/* ==========================================================================
   WHISPERS OF SILENCE — THE CIPHER MURDERS
   css/intro.css — THE COLD OPEN

   Styles js/intro.js only. Every selector is namespaced `wi-` so this file can
   be added or removed without touching css/styles.css.

   Design tokens are inherited from styles.css when present and fall back to
   literals so the module also works standalone. Mobile-first: laid out for
   375x667 and up, nothing ever overflows horizontally, touch targets >= 44px.
   No @import, no webfont load, no external URL — the only url() in this file
   is an inline SVG data URI used for film grain.
   ========================================================================== */

.wi-root {
  --wi-crimson: var(--accent-crimson, #ff2a55);
  --wi-cyan:    var(--accent-cyan, #00f0ff);
  --wi-gold:    var(--accent-gold, #ffd700);
  --wi-bg:      var(--bg-dark, #07090e);
  --wi-text:    var(--text-main, #f0f4f8);
  --wi-muted:   var(--text-muted, #9aaaba);
  --wi-title:   var(--font-title, 'Cinzel', Georgia, serif);
  --wi-sans:    var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
  --wi-code:    var(--font-code, 'JetBrains Mono', ui-monospace, monospace);
  --wi-accent:  var(--wi-crimson);

  --wi-pad: 20px;
  --wi-safe-t: env(safe-area-inset-top, 0px);
  --wi-safe-b: env(safe-area-inset-bottom, 0px);

  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 200;
  overflow: hidden;
  background: var(--wi-bg);
  font-family: var(--wi-sans);
  color: var(--wi-text);
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0;
  transition: opacity 420ms ease;
  contain: layout paint;
}
.wi-root.is-live { opacity: 1; }
.wi-root, .wi-root * { box-sizing: border-box; }

.wi-root[data-accent="cyan"]    { --wi-accent: var(--wi-cyan); }
.wi-root[data-accent="gold"]    { --wi-accent: var(--wi-gold); }
.wi-root[data-accent="crimson"] { --wi-accent: var(--wi-crimson); }

.wi-acc-crimson { --wi-accent: var(--wi-crimson); }
.wi-acc-cyan    { --wi-accent: var(--wi-cyan); }
.wi-acc-gold    { --wi-accent: var(--wi-gold); }

/* ==========================================================================
   1 · BACKDROP — Ken Burns plates, cross-faded one per beat
   ========================================================================== */

.wi-stage {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--wi-bg);
}

.wi-plate {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  transition: opacity 720ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.wi-plate.is-on { opacity: 1; }

.wi-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desaturated, crushed and dimmed — the plate is a mood, not a photograph.
     Text legibility comes from the scrim below, not from the image. */
  filter: grayscale(0.72) contrast(1.16) brightness(0.52) saturate(0.7);
  opacity: 0.9;
  animation-name: wi-kb-in;
  animation-duration: 6000ms;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  will-change: transform;
}
.wi-pan-in    img { animation-name: wi-kb-in; }
.wi-pan-left  img { animation-name: wi-kb-left; }
.wi-pan-up    img { animation-name: wi-kb-up; }
.wi-pan-drift img { animation-name: wi-kb-drift; }

@keyframes wi-kb-in {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.22) translate3d(0, -2.2%, 0); }
}
@keyframes wi-kb-left {
  from { transform: scale(1.20) translate3d(4%, -1%, 0); }
  to   { transform: scale(1.08) translate3d(-4%, 1%, 0); }
}
@keyframes wi-kb-up {
  from { transform: scale(1.16) translate3d(-2%, 4%, 0); }
  to   { transform: scale(1.06) translate3d(2%, -3%, 0); }
}
@keyframes wi-kb-drift {
  from { transform: scale(1.10) translate3d(-3%, -2%, 0); }
  to   { transform: scale(1.20) translate3d(3%, 2%, 0); }
}

/* ==========================================================================
   2 · GRADE — scrim, vignette, scanlines, film grain, cut flash
   ========================================================================== */

.wi-scrim,
.wi-vignette,
.wi-scan,
.wi-grain,
.wi-cut {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
}

.wi-scrim {
  z-index: 2;
  background:
    linear-gradient(to top,
      var(--wi-bg) 0%,
      rgba(7, 9, 14, 0.93) 24%,
      rgba(7, 9, 14, 0.52) 54%,
      rgba(7, 9, 14, 0.30) 74%,
      rgba(7, 9, 14, 0.62) 100%);
}

.wi-vignette {
  z-index: 3;
  background: radial-gradient(125% 92% at 50% 40%,
    rgba(0, 0, 0, 0) 34%,
    rgba(0, 0, 0, 0.45) 74%,
    rgba(0, 0, 0, 0.82) 100%);
}

.wi-scan {
  z-index: 4;
  opacity: 0.5;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.045) 0px,
    rgba(255, 255, 255, 0.045) 1px,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0) 3px);
  animation: wi-scan-drift 9s linear infinite;
}
@keyframes wi-scan-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 3px, 0); }
}

/* Inline SVG noise — a data URI, so no network request is made. */
.wi-grain {
  z-index: 5;
  opacity: 0.09;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: wi-grain-shift 640ms steps(4) infinite;
}
@keyframes wi-grain-shift {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-2%, 1%, 0); }
  50%  { transform: translate3d(1%, -2%, 0); }
  75%  { transform: translate3d(2%, 2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* One-frame lift on every hard cut between beats. */
.wi-cut {
  z-index: 7;
  background: #ffffff;
  opacity: 0;
  mix-blend-mode: overlay;
}
.wi-cut.is-cut { animation: wi-cut-flash 280ms ease-out 1; }
@keyframes wi-cut-flash {
  0%   { opacity: 0.16; }
  28%  { opacity: 0.05; }
  100% { opacity: 0; }
}

/* ==========================================================================
   3 · THE 03:15 CLOCK  — hour and minute hands never move
   ========================================================================== */

.wi-clock {
  position: absolute;
  z-index: 9;
  top: calc(12px + var(--wi-safe-t));
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0.66;
  pointer-events: none;
}

.wi-dial { display: block; overflow: visible; }
.wi-dial .wi-d-face { fill: rgba(7, 9, 14, 0.45); }
.wi-dial .wi-d-ring { fill: none; stroke: rgba(240, 244, 248, 0.34); stroke-width: 2.5; }
.wi-dial .wi-d-ticks line { stroke: rgba(240, 244, 248, 0.42); stroke-width: 3; stroke-linecap: round; }
.wi-dial .wi-d-hour { stroke: var(--wi-text); stroke-width: 6; stroke-linecap: round; }
.wi-dial .wi-d-min  { stroke: var(--wi-text); stroke-width: 4; stroke-linecap: round; }
.wi-dial .wi-d-pin  { fill: var(--wi-accent); }

.wi-dial .wi-d-sec {
  stroke: var(--wi-accent);
  stroke-width: 2;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 50px 50px;
  animation: wi-sec-tick 12s steps(60, end) infinite;
}
@keyframes wi-sec-tick {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.wi-dial .wi-pend {
  transform-box: view-box;
  transform-origin: 50px 50px;
  animation: wi-swing 2600ms cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.wi-dial .wi-pend line   { stroke: rgba(240, 244, 248, 0.26); stroke-width: 2; }
.wi-dial .wi-pend circle { fill: rgba(240, 244, 248, 0.20); stroke: var(--wi-accent); stroke-width: 1.4; }
@keyframes wi-swing {
  from { transform: rotate(-7deg); }
  to   { transform: rotate(7deg); }
}

.wi-clock-label {
  font-family: var(--wi-code);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--wi-accent);
  margin-top: -2px;
}

/* ==========================================================================
   4 · SKIP  — persistent, always the top layer, >=44px target
   ========================================================================== */

.wi-skip {
  position: absolute;
  z-index: 12;
  top: calc(10px + var(--wi-safe-t));
  right: 12px;
  min-height: 44px;
  min-width: 78px;
  padding: 12px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--wi-code);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--wi-text);
  background: rgba(7, 9, 14, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.wi-skip:hover,
.wi-skip:focus-visible {
  color: var(--wi-accent);
  border-color: var(--wi-accent);
  background: rgba(7, 9, 14, 0.8);
}
.wi-skip:focus-visible { outline: 2px solid var(--wi-cyan); outline-offset: 2px; }

/* ==========================================================================
   5 · NARRATION
   ========================================================================== */

.wi-content {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  bottom: calc(62px + var(--wi-safe-b));
  transition: bottom 620ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.wi-root.is-final .wi-content { bottom: 42%; }

.wi-beat,
.wi-final {
  position: absolute;
  /* plain fallback first; the max() pair only applies where it parses */
  left: var(--wi-pad);
  right: var(--wi-pad);
  left: max(var(--wi-pad), env(safe-area-inset-left, 0px));
  right: max(var(--wi-pad), env(safe-area-inset-right, 0px));
  bottom: 0;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 440ms ease, transform 440ms cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: opacity, transform;
}
.wi-beat.is-in,
.wi-final.is-in { opacity: 1; transform: none; }
.wi-beat.is-out,
.wi-final.is-out { opacity: 0; transform: translate3d(0, -10px, 0); }

/* --- kicker ------------------------------------------------------------- */

.wi-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--wi-code);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--wi-accent);
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
}
.wi-ktext {
  min-width: 0;
  overflow-wrap: anywhere;
}
.wi-krule {
  flex: 0 0 auto;
  width: 20px;
  height: 1px;
  background: var(--wi-accent);
  box-shadow: 0 0 8px var(--wi-accent);
  transform-origin: left center;
  animation: wi-rule-in 520ms cubic-bezier(0.16, 0.9, 0.3, 1) both;
}
@keyframes wi-rule-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- typed lines -------------------------------------------------------- */

.wi-lines { display: block; }

.wi-line {
  position: relative;
  margin: 0 0 9px 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: var(--wi-text);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.8);
  overflow-wrap: break-word;
  word-break: normal;
}
.wi-line:last-child { margin-bottom: 0; }

/* The ghost half holds the not-yet-typed remainder at zero opacity so the
   line is laid out once and never reflows as it fills in. */
.wi-g { opacity: 0; }

.wi-cur {
  display: inline-block;
  position: relative;
  width: 0;
  height: 1em;
  vertical-align: -0.16em;
}
.wi-cur::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.04em;
  width: 2px;
  height: 0.96em;
  background: var(--wi-accent);
  box-shadow: 0 0 9px var(--wi-accent);
  opacity: 0;
}
.wi-line.is-active .wi-cur::after {
  opacity: 1;
  animation: wi-blink 1000ms steps(1, end) infinite;
}
@keyframes wi-blink {
  0%, 55%  { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* Screen-reader copy of each line (the typed pair is aria-hidden). */
.wi-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- evidence stamp ----------------------------------------------------- */

.wi-stamp {
  position: absolute;
  right: 2px;
  bottom: calc(100% + 18px);
  max-width: 88%;
  padding: 7px 11px;
  font-family: var(--wi-title);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.2px;
  line-height: 1;
  white-space: nowrap;
  color: var(--wi-stamp-c, var(--wi-crimson));
  border: 2px solid var(--wi-stamp-c, var(--wi-crimson));
  border-radius: 3px;
  opacity: 0;
  transform: rotate(-9deg);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.wi-stamp-crimson { --wi-stamp-c: var(--wi-crimson); }
.wi-stamp-gold    { --wi-stamp-c: var(--wi-gold); }
.wi-stamp.is-in   { animation: wi-stamp-land 640ms cubic-bezier(0.16, 0.9, 0.3, 1) forwards; }

@keyframes wi-stamp-land {
  0%   { opacity: 0;    transform: rotate(-17deg) scale(2.05); filter: blur(3px); }
  52%  { opacity: 1;    transform: rotate(-7.4deg) scale(0.93); filter: blur(0); }
  70%  { opacity: 1;    transform: rotate(-10deg) scale(1.05); }
  86%  { opacity: 0.96; transform: rotate(-8.4deg) scale(0.985); }
  100% { opacity: 0.94; transform: rotate(-9deg) scale(1); }
}

/* ==========================================================================
   6 · HANDOFF CARD — the case number resolves into chapter one
   ========================================================================== */

.wi-final { text-align: center; }

.wi-fcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--wi-code);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--wi-cyan);
  text-shadow: 0 0 16px rgba(0, 240, 255, 0.45);
}
.wi-fscramble { white-space: pre; }
.wi-fcase-tag {
  font-size: 8.5px;
  letter-spacing: 2px;
  color: var(--wi-crimson);
  border: 1px solid var(--wi-crimson);
  border-radius: 3px;
  padding: 3px 6px;
  opacity: 0;
  transition: opacity 420ms ease 180ms;
}
.wi-final.is-composed .wi-fcase-tag { opacity: 1; }

.wi-fcard {
  padding: 20px 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 2px solid var(--wi-cyan);
  border-radius: 14px;
  background: rgba(7, 9, 14, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.985);
  transition: opacity 520ms ease 120ms, transform 520ms cubic-bezier(0.2, 0.7, 0.3, 1) 120ms;
}
.wi-final.is-composed .wi-fcard { opacity: 1; transform: none; }

.wi-fact {
  font-family: var(--wi-code);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.6px;
  color: var(--wi-muted);
  overflow-wrap: anywhere;
}
.wi-fno {
  margin-top: 10px;
  font-family: var(--wi-code);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--wi-crimson);
}
.wi-ftitle {
  margin: 6px 0 0;
  font-family: var(--wi-title);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--wi-text);
  overflow-wrap: break-word;
}
.wi-fmeta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  font-family: var(--wi-code);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.6px;
  color: var(--wi-muted);
}
.wi-fmeta-t { overflow-wrap: anywhere; }
.wi-fdot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wi-crimson);
  box-shadow: 0 0 10px var(--wi-crimson);
  animation: wi-pulse 1800ms ease-in-out infinite;
}
@keyframes wi-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

.wi-go {
  margin-top: 20px;
  width: 100%;
  min-height: 50px;
  padding: 15px 20px;
  pointer-events: auto;
  font-family: var(--wi-code);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--wi-bg);
  background: var(--wi-cyan);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(0, 240, 255, 0.35);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 460ms ease 320ms, transform 460ms ease 320ms;
}
.wi-final.is-composed .wi-go { opacity: 1; transform: none; }
.wi-go:focus-visible { outline: 2px solid var(--wi-gold); outline-offset: 3px; }

/* ==========================================================================
   7 · PROGRESS + HINT
   ========================================================================== */

.wi-pips {
  position: absolute;
  z-index: 9;
  left: 0; right: 0;
  bottom: calc(30px + var(--wi-safe-b));
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.wi-pip {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgba(240, 244, 248, 0.18);
  transition: background 380ms ease, box-shadow 380ms ease, width 380ms ease;
}
.wi-pip.is-done { background: rgba(240, 244, 248, 0.42); }
.wi-pip.is-on {
  width: 26px;
  background: var(--wi-accent);
  box-shadow: 0 0 10px var(--wi-accent);
}

.wi-hint {
  position: absolute;
  z-index: 9;
  left: 0; right: 0;
  bottom: calc(12px + var(--wi-safe-b));
  text-align: center;
  font-family: var(--wi-code);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 2.6px;
  color: rgba(240, 244, 248, 0.42);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.wi-hint.is-on { opacity: 1; animation: wi-hint-pulse 2200ms ease-in-out infinite; }
@keyframes wi-hint-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.35; }
}
.wi-root.is-final .wi-hint { opacity: 0; animation: none; }

/* ==========================================================================
   8 · LARGER SCREENS — the phone frame appears at 768px in styles.css, so
   only the type scale grows here. Layout is identical.
   ========================================================================== */

@media (min-width: 480px) {
  .wi-root { --wi-pad: 28px; }
  .wi-line { font-size: 18px; }
  .wi-ftitle { font-size: 30px; }
  .wi-go { width: auto; min-width: 260px; }
}

@media (min-height: 760px) {
  .wi-line { font-size: 18.5px; line-height: 1.55; }
}

/* Short landscape phones: shrink the block so nothing is pushed off screen. */
@media (max-height: 460px) {
  .wi-line { font-size: 15px; line-height: 1.42; margin-bottom: 6px; }
  .wi-clock { display: none; }
  .wi-content { bottom: calc(50px + var(--wi-safe-b)); }
  .wi-root.is-final .wi-content { bottom: 34%; }
  .wi-ftitle { font-size: 21px; }
  .wi-fcard { padding: 14px 12px; }
}

/* ==========================================================================
   9 · REDUCED MOTION
   Whole text per beat, plain cross-fades, no Ken Burns, no typewriter, no
   grain shimmer, no ticking. Still fully skippable — .wi-skip is untouched.
   The JS applies .wi-rm as well, so this holds even if the media query is
   not what triggered it.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .wi-plate img,
  .wi-scan,
  .wi-grain,
  .wi-dial .wi-d-sec,
  .wi-dial .wi-pend,
  .wi-krule,
  .wi-fdot,
  .wi-hint.is-on,
  .wi-line.is-active .wi-cur::after {
    animation: none !important;
  }
  .wi-plate img { transform: scale(1.02); }
  .wi-cut, .wi-cur { display: none !important; }
  .wi-stamp.is-in { animation: none !important; opacity: 0.94; transform: rotate(-9deg); }
  .wi-root, .wi-plate, .wi-beat, .wi-final, .wi-fcard, .wi-go, .wi-content {
    transition-duration: 300ms !important;
  }
}

.wi-rm .wi-plate img,
.wi-rm .wi-scan,
.wi-rm .wi-grain,
.wi-rm .wi-dial .wi-d-sec,
.wi-rm .wi-dial .wi-pend,
.wi-rm .wi-krule,
.wi-rm .wi-fdot,
.wi-rm .wi-hint.is-on,
.wi-rm .wi-line.is-active .wi-cur::after {
  animation: none !important;
}
.wi-rm .wi-plate img { transform: scale(1.02); }
.wi-rm .wi-cut,
.wi-rm .wi-cur { display: none !important; }
.wi-rm .wi-stamp.is-in {
  animation: none !important;
  opacity: 0.94;
  transform: rotate(-9deg);
}
.wi-rm.wi-root,
.wi-rm .wi-plate,
.wi-rm .wi-beat,
.wi-rm .wi-final,
.wi-rm .wi-fcard,
.wi-rm .wi-go,
.wi-rm .wi-content {
  transition-duration: 300ms !important;
}

/* Forced-colors safety net (Windows high contrast). */
@media (forced-colors: active) {
  .wi-root { background: Canvas; }
  .wi-plate, .wi-grain, .wi-scan, .wi-vignette { display: none; }
  .wi-skip, .wi-go { forced-color-adjust: none; }
}