/* ============================================================================
   USG — public face
   The category-standard product site, played straight and finished properly:
   near-black ground, hairline cards, generous air, one typeface family doing
   the talking. Steam's sentiment scale is the only colour voice on the page —
   blue is interactive, green is buy, gold is mixed, red is negative — because
   that is the palette this audience already reads as data.
   Archivo (UI/display) + JetBrains Mono (measurement only), self-hosted.
   One stylesheet for the whole site. It began as the public face's, and the
   tool behind sign-in was moved onto it so a customer never crosses a seam at
   sign-in; the tool's own instruments are ported at the end of this file.
   ========================================================================== */

@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrainsmono-latin.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrainsmono-latin-ext.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* ---- ground: deep, cool, one hue with the Steam blue ---- */
  --ground:#0a0d12;
  --panel:#10141b;
  --panel-2:#161b24;
  --panel-3:#1d232e;
  --rail:rgba(184,204,224,.13);
  --rail-2:rgba(184,204,224,.08);

  /* ---- text, tinted cool, never gray ---- */
  --text:#eef3f8;
  --text-2:#a4b2c2;
  --text-3:#7c8ba0;

  /* ---- the Steam scale: meanings, not decoration ---- */
  --blue:#66c0f4;      /* interactive · demand · the link */
  --blue-2:#9ad8ff;
  --blue-dim:#2f6d94;
  --green:#a1c93a;     /* positive · resolved · buy */
  --green-2:#b8de52;
  --gold:#d5a63c;      /* mixed — the tell */
  --red:#d6552f;       /* negative · open */
  --red-2:#e97a52;

  --font-ui:"Archivo",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --sheet-max:1180px;
  --pad:clamp(1.1rem,4vw,2.5rem);
  --r:12px;
  --r-sm:8px;
  --card:linear-gradient(180deg,rgba(233,241,250,.045),rgba(233,241,250,.02));
  --lift:0 1px 2px rgba(2,6,12,.5),0 18px 44px -28px rgba(2,6,12,.9);
  --lift-2:0 2px 4px rgba(2,6,12,.5),0 28px 60px -30px rgba(2,6,12,.95);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:8px;top:8px}
body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--font-ui);font-weight:400;line-height:1.65;
  font-size:clamp(1rem,.5vw + .9rem,1.06rem);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
body>main{flex:1}
::selection{background:var(--blue);color:#06131c}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---- primitives ---------------------------------------------------- */
.sheet{max-width:var(--sheet-max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(3rem,6.5vw,5.5rem)}
.section--tight{padding-block:clamp(1rem,2.5vw,1.5rem)}
.stack>*+*{margin-top:1rem}
.mono{font-family:var(--font-mono)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.muted{color:var(--text-2)}
.faint{color:var(--text-3)}

.label{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3)}

h1,h2,h3{font-family:var(--font-ui);font-weight:700;line-height:1.08;
  letter-spacing:-.028em;text-wrap:balance;margin:0}
.h-hero{font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.04em;line-height:1.02;font-weight:800}
.h-sect{font-size:clamp(1.55rem,2.9vw,2.3rem);letter-spacing:-.034em;font-weight:700}
.lede{font-size:clamp(1.06rem,.8vw + .9rem,1.26rem);color:var(--text-2);max-width:62ch;line-height:1.58}
p{max-width:70ch}

.rule{height:0;border:0;border-top:1px solid var(--rail);margin:0}

/* Old-world helper kept as a no-op so shared markup never breaks; the public
   face has no kickers, the heading carries its own weight. */
.eyebrow{display:none}

/* ---- header --------------------------------------------------------- */
.bar{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ground) 78%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--rail-2)}
.bar__in{display:flex;align-items:center;gap:1.4rem;height:60px}
.wordmark{display:flex;align-items:center;gap:.6rem;font-weight:700;
  letter-spacing:-.02em;font-size:1.04rem;color:var(--text)}
.wordmark .bug{display:inline-grid;place-items:center;width:26px;height:26px;flex:none;
  background:linear-gradient(150deg,var(--blue) 0%,var(--blue-dim) 110%);color:#06131c;
  font-size:.82rem;font-weight:800;border-radius:7px;
  box-shadow:0 1px 2px rgba(2,6,12,.5),0 6px 16px -8px color-mix(in srgb,var(--blue) 55%,transparent)}
.wordmark .sub{font-size:.72rem;font-weight:500;letter-spacing:.02em;color:var(--text-3)}
.nav{margin-left:auto;display:flex;gap:1.3rem;align-items:center}
.nav a:not(.btn){font-size:.9rem;font-weight:500;color:var(--text-2);
  padding:.85em .2em;transition:color .14s}
.nav a:not(.btn):hover{color:var(--text)}
.nav .btn{white-space:nowrap}
@media(max-width:720px){.hide-sm{display:none!important}.bar__in{gap:.9rem}.wordmark .sub{display:none}}
@media(max-width:560px){.nav{gap:.9rem}.nav .btn{padding:.5em .85em;font-size:.82rem;min-height:44px}}

/* ---- buttons -------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-ui);font-weight:600;font-size:.92rem;letter-spacing:-.005em;
  padding:.62em 1.15em;border:1px solid var(--rail);border-radius:var(--r-sm);
  background:var(--card);color:var(--text);cursor:pointer;
  box-shadow:0 1px 2px rgba(2,6,12,.35);
  transition:background .14s,border-color .14s,color .14s,box-shadow .18s,
    transform .14s cubic-bezier(.2,.8,.25,1)}
.btn:hover{border-color:rgba(184,204,224,.26);transform:translateY(-1px);
  box-shadow:0 2px 3px rgba(2,6,12,.4),0 10px 24px -14px rgba(2,6,12,.9)}
.btn--primary{background:linear-gradient(180deg,var(--blue-2),var(--blue));
  border-color:color-mix(in srgb,var(--blue) 80%,#fff 8%);color:#06131c;font-weight:700;
  box-shadow:0 1px 2px rgba(2,6,12,.5),0 10px 26px -12px color-mix(in srgb,var(--blue) 40%,transparent)}
.btn--primary:hover{background:linear-gradient(180deg,#b7e3ff,var(--blue-2));
  border-color:var(--blue-2);color:#06131c;
  box-shadow:0 2px 3px rgba(2,6,12,.5),0 14px 32px -12px color-mix(in srgb,var(--blue) 50%,transparent)}
/* Buy is green because on Steam, green is buy. */
.btn--buy{background:linear-gradient(180deg,var(--green-2),var(--green));
  border-color:color-mix(in srgb,var(--green) 80%,#fff 8%);color:#101b04;font-weight:700;
  box-shadow:0 1px 2px rgba(2,6,12,.5),0 10px 26px -12px color-mix(in srgb,var(--green) 45%,transparent)}
.btn--buy:hover{background:linear-gradient(180deg,#c4e764,var(--green-2));
  border-color:var(--green-2);color:#101b04;
  box-shadow:0 2px 3px rgba(2,6,12,.5),0 14px 32px -12px color-mix(in srgb,var(--green) 55%,transparent)}
.btn--lg{font-size:1rem;padding:.8em 1.5em}
.btn .arrow{transition:transform .16s cubic-bezier(.2,.8,.25,1)}
.btn:hover .arrow{transform:translateX(3px)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---- card (the panel, grown up) ------------------------------------- */
.panel{background:var(--card);border:1px solid var(--rail);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--lift)}
.panel__hd{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.8rem 1.25rem;border-bottom:1px solid var(--rail-2);
  font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--text-2)}
.panel__hd .spacer{margin-left:auto}
.panel__bd{padding:clamp(1.15rem,2.4vw,1.75rem)}
/* an error card announces itself in the negative voice, quietly */
.panel--open{border-color:color-mix(in srgb,var(--red) 35%,var(--rail))}
.panel--open>.panel__hd{background:color-mix(in srgb,var(--red) 8%,transparent);
  border-bottom-color:color-mix(in srgb,var(--red) 25%,var(--rail-2))}
.panel__bd--rows{padding:0}
.rowline{margin:0;padding:.95rem clamp(1.15rem,2.4vw,1.75rem);border-top:1px solid var(--rail-2)}
.rowline--pad{padding-top:1.2rem;padding-bottom:1.2rem}
.rowline__hd{display:flex;gap:.6rem;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.evidence{margin:.7rem 0 0;font-size:.8rem;color:var(--text-3);max-width:80ch;line-height:1.65}
.onward{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:center;
  justify-content:space-between;padding:clamp(1.5rem,4vw,2.25rem)}

/* ---- status pills ---------------------------------------------------- */
.stamp{display:inline-flex;align-items:center;gap:.35rem;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  padding:.3em .75em;border-radius:999px;background:var(--panel-3);color:var(--text-2);
  white-space:nowrap}
.stamp--open{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red-2);
  border:1px solid color-mix(in srgb,var(--red) 40%,transparent)}
.stamp--mixed{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.stamp--served{border:1px solid var(--rail)}
.stamp--owned{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);
  border:1px solid color-mix(in srgb,var(--green) 40%,transparent)}

.tid{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.02em;color:var(--text-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- sentiment bar (data, so the data palette) ----------------------- */
.rev{display:block;height:6px;border-radius:3px;background:color-mix(in srgb,var(--red) 55%,var(--panel-3));
  overflow:hidden;min-width:56px}
.rev>i{display:block;height:100%;background:var(--green);width:var(--target,0%)}
.rev--mixed>i{background:var(--gold)}
.rev--neg>i{background:var(--red-2)}

/* ---- list rows (magazine index, related notes) ----------------------- */
.q{border:1px solid var(--rail);border-radius:var(--r);overflow:hidden;
  background:var(--card);box-shadow:var(--lift)}
.q__row{display:grid;gap:1rem;align-items:center;padding:1.05rem 1.25rem;
  border-top:1px solid var(--rail-2);transition:background .14s;position:relative}
.q__row:first-child{border-top:0}
a.q__row:hover{background:rgba(233,241,250,.03)}
a.q__row:hover .q__name{color:var(--blue)}
.q__name{display:block;font-weight:600;font-size:1.05rem;letter-spacing:-.015em;transition:color .14s}
.q__sub{display:block;color:var(--text-3);font-size:.85rem;margin-top:.25rem}
.q__go{color:var(--text-3);transition:transform .16s cubic-bezier(.2,.8,.25,1),color .16s}
a.q__row:hover .q__go{color:var(--blue);transform:translateX(3px)}

/* ---- key/value ------------------------------------------------------- */
.kv{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:.5rem 1.2rem;
  font-size:.95rem;align-items:baseline}
.kv--stack{grid-template-columns:1fr;gap:.1rem;margin:0}
.kv dt{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3)}
.kv dd{margin:0;color:var(--text)}

/* ---- forms ----------------------------------------------------------- */
.field{display:block;margin-bottom:1.05rem}
.field>span{display:block;font-size:.82rem;font-weight:600;color:var(--text-2);
  margin-bottom:.4rem;letter-spacing:.01em}
.field input,.field textarea,.field select{width:100%;font-family:var(--font-ui);font-size:1rem;
  padding:.66em .8em;background:rgba(2,6,12,.45);color:var(--text);
  border:1px solid var(--rail);border-radius:var(--r-sm);
  transition:border-color .14s,box-shadow .14s}
.field textarea{resize:vertical;line-height:1.55;min-height:6.5em}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-dim);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent);outline:none}
.field input[type=checkbox]{width:auto;accent-color:var(--blue)}
.form-note{font-size:.88rem;color:var(--text-2)}
.form-err{color:var(--red-2);font-size:.84rem;margin-top:.35rem}
.authcard{max-width:430px;margin-inline:auto}
.authcard .panel__bd{padding:clamp(1.4rem,3vw,1.9rem)}
.authcard h1{text-align:center}

/* ---- flash ----------------------------------------------------------- */
.flash{font-size:.88rem;border:1px solid color-mix(in srgb,var(--blue) 35%,transparent);
  background:color-mix(in srgb,var(--blue) 9%,transparent);color:var(--blue-2);
  padding:.75rem 1rem;border-radius:var(--r-sm);margin:0}
.flash--alert{border-color:color-mix(in srgb,var(--red) 50%,transparent);
  background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red-2)}

/* ---- prose (article and legal body) ---------------------------------- */
.prose{font-size:1.08rem;line-height:1.75;color:var(--text-2);max-width:70ch}
.prose>*+*{margin-top:1.2em}
.prose h2{color:var(--text);font-size:1.5rem;letter-spacing:-.028em;margin-top:2.3em}
.prose h3{color:var(--text);font-size:1.2rem;letter-spacing:-.02em;margin-top:1.7em}
.prose p{max-width:none}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{margin-top:.4em}
.prose ul>li::marker{color:var(--blue-dim)}
.prose ol>li::marker{color:var(--text-3)}
.prose blockquote{margin:1.8em 0;padding:1.1rem 1.35rem;border:1px solid var(--rail);
  border-radius:var(--r-sm);background:var(--card);color:var(--text)}
.prose blockquote p{margin:0}
.prose code{font-family:var(--font-mono);font-size:.88em;background:var(--panel-2);
  padding:.12em .35em;border-radius:4px;color:var(--blue-2)}
.prose pre{font-family:var(--font-mono);background:var(--panel);border:1px solid var(--rail);
  padding:1rem 1.1rem;border-radius:var(--r-sm);overflow-x:auto;font-size:.88rem}
.prose pre code{background:none;padding:0}
.prose hr{border:0;border-top:1px solid var(--rail);margin:2em 0}
.prose table{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:.9rem;line-height:1.5}
.prose thead th{font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);text-align:left;
  padding:0 1rem .5rem 0;border-bottom:1px solid var(--rail)}
.prose tbody td{padding:.7rem 1rem .7rem 0;border-bottom:1px solid var(--rail-2);
  vertical-align:top;color:var(--text-2);font-variant-numeric:tabular-nums}
.prose tbody td:first-child{color:var(--text);font-weight:600}
@media(max-width:760px){
  .prose table{display:block;overflow-x:auto;width:auto;min-width:100%}
  .prose th,.prose td{min-width:9ch}
  .prose td{max-width:38ch}
}

/* ---- footer ---------------------------------------------------------- */
.colophon{border-top:1px solid var(--rail-2);background:rgba(2,6,12,.35);
  font-size:.88rem;color:var(--text-3)}
.colophon a{transition:color .14s}
.colophon a:hover{color:var(--text)}
.colophon nav a{display:inline-block;padding-block:.8em;margin-block:-.8em}

/* ============================================================================
   HOME
   ========================================================================== */

/* ---- hero: the promise on the left, the evidence on the right ---------
   Real capsule art from the analysed corpus, each badge its true Steam
   score. Most of the wall reads gold and red, which is the premise of the
   product, proved before it is claimed. */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rail-2);isolation:isolate}
/* one quiet interactive-blue bloom behind the composition, canon's ambient light */
.hero::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(60vw,900px);aspect-ratio:1;right:-12%;top:-32%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 13%,transparent),transparent 70%)}
.hero__wall{position:absolute;inset:0;z-index:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));padding:.7rem;
  align-content:center;
  opacity:.55;pointer-events:none;
  mask-image:linear-gradient(96deg,transparent 30%,rgba(0,0,0,.5) 55%,#000 90%);
  -webkit-mask-image:linear-gradient(96deg,transparent 30%,rgba(0,0,0,.5) 55%,#000 90%)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(92deg,var(--ground) 24%,
    color-mix(in srgb,var(--ground) 82%,transparent) 48%,transparent 70%)}
.cap{position:relative;margin:0;border-radius:8px;overflow:hidden;
  aspect-ratio:460/215;
  border:1px solid var(--rail-2);background:var(--panel);
  box-shadow:0 1px 2px rgba(2,6,12,.5),0 10px 24px -16px rgba(2,6,12,.9);
  animation:cap-in .55s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay:calc(var(--i) * 28ms)}
.cap img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(.96)}
.cap figcaption{position:absolute;right:.35rem;bottom:.3rem;font-size:.7rem;
  font-weight:700;padding:.08rem .38rem;border-radius:999px;background:rgba(4,9,15,.85)}
.cap--well figcaption{color:var(--green)}
.cap--mixed figcaption{color:var(--gold)}
.cap--poor figcaption{color:var(--red-2)}
.cap--poor{border-color:color-mix(in srgb,var(--red) 35%,var(--rail-2))}
@keyframes cap-in{from{transform:translateY(10px)}to{transform:none}}

.hero__in{position:relative;z-index:1;padding-block:clamp(4.5rem,12vw,9.5rem)}
.hero__h{font-size:clamp(2.5rem,6.4vw,5.1rem);font-weight:800;letter-spacing:-.04em;
  line-height:.99;margin:0;max-width:15ch;
  text-shadow:0 2px 34px rgba(4,9,15,.9)}
.hero__h em{font-style:normal;color:var(--blue)}
.hero__sub{font-size:clamp(1.06rem,.9vw + .9rem,1.3rem);color:var(--text-2);
  max-width:56ch;line-height:1.55;margin:1.5rem 0 0}
.hero__do{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2.2rem}
.hero__note{margin:1.7rem 0 0;font-size:.88rem;color:var(--text-3);max-width:none}

/* ---- the four questions: a 2×2 of real cards -------------------------- */
.asks{list-style:none;margin:2.8rem 0 0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.asks{grid-template-columns:1fr}}
.ask{background:var(--card);border:1px solid var(--rail);border-radius:var(--r);
  padding:clamp(1.3rem,2.6vw,1.8rem);box-shadow:var(--lift);
  display:flex;flex-direction:column;
  transition:border-color .16s,transform .16s cubic-bezier(.2,.8,.25,1),box-shadow .2s}
.ask:hover{border-color:rgba(184,204,224,.24);transform:translateY(-2px);box-shadow:var(--lift-2)}
.ask__n{display:none}
.ask__q{font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:700;letter-spacing:-.024em;
  line-height:1.22;max-width:24ch}
.ask__a{margin:.7rem 0 0;color:var(--text-2);max-width:60ch;line-height:1.62;flex:1}
.ask__from{margin:1.1rem 0 0;padding-top:.9rem;border-top:1px solid var(--rail-2);
  font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);max-width:none}

/* the catalogue reuses the same list at spec density inside a card */
.asks--tight{margin-top:1.5rem;gap:.9rem}
.asks--tight .ask{padding:1.05rem 1.15rem;box-shadow:none;background:rgba(2,6,12,.3)}
.asks--tight .ask__q a:hover{color:var(--blue)}
.asks--tight .ask__a{font-size:.92rem}

/* ---- the method -------------------------------------------------------- */
.method{background:rgba(2,6,12,.35);border-block:1px solid var(--rail-2)}
.steps{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.steps>li{background:var(--card);border:1px solid var(--rail);border-radius:var(--r);
  padding:clamp(1.3rem,2.6vw,1.7rem);box-shadow:var(--lift)}
.step__n{margin:0;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue)}
.step__t{margin:.65rem 0 0;font-weight:700;font-size:1.14rem;letter-spacing:-.02em}
.step__d{margin:.55rem 0 0;color:var(--text-2);line-height:1.62}

/* ---- the scale board ---------------------------------------------------- */
.scaleboard{list-style:none;margin:2.8rem 0 0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--rail)}
.scaleboard__row{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:.5rem 2.4rem;align-items:baseline;padding:1.7rem 0;
  border-bottom:1px solid var(--rail-2)}
.scaleboard__n{margin:0;font-size:clamp(1.8rem,3.6vw,3rem);font-weight:800;
  letter-spacing:-.045em;line-height:1;color:var(--blue);white-space:nowrap;
  min-width:13ch}
.scaleboard__l{margin:0;font-weight:600;font-size:1.06rem;letter-spacing:-.015em}
.scaleboard__d{margin:.45rem 0 0;color:var(--text-2);max-width:62ch;line-height:1.62}
@media(max-width:640px){
  .scaleboard__row{grid-template-columns:1fr;gap:.35rem}
  .scaleboard__n{min-width:0}
}

/* The number the whole section lands on. */
.cost{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem 2.2rem;
  align-items:start;margin-top:2.8rem;padding:clamp(1.5rem,3.6vw,2.4rem);
  border:1px solid color-mix(in srgb,var(--gold) 35%,var(--rail));border-radius:var(--r);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 9%,transparent),
    color-mix(in srgb,var(--gold) 4%,transparent));
  box-shadow:var(--lift)}
.cost__n{margin:0;font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.045em;
  line-height:1;color:var(--gold);white-space:nowrap}
.cost__d{margin:0;color:var(--text-2);max-width:62ch;line-height:1.65}
.cost__d strong{color:var(--text);font-weight:700}
@media(max-width:640px){.cost{grid-template-columns:1fr}}

/* ---- the mid-page nudge ------------------------------------------------- */
.nudge{display:flex;flex-wrap:wrap;gap:.9rem 1.8rem;align-items:center;
  justify-content:space-between;margin-top:2.8rem;padding-top:1.8rem;
  border-top:1px solid var(--rail-2)}
.nudge p{margin:0;color:var(--text-2);max-width:54ch;line-height:1.55}
.nudge .btn{flex:none}

/* ---- the close: one centred beat ----------------------------------------- */
.close{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  border:1px solid var(--rail);border-radius:calc(var(--r) + 4px);
  background:var(--card);box-shadow:var(--lift-2);
  padding:clamp(2.4rem,6vw,4rem) clamp(1.4rem,4vw,3rem)}
.close::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(70%,640px);aspect-ratio:2.6;left:50%;top:-40%;transform:translateX(-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--green) 14%,transparent),transparent 72%)}
.close .muted{margin:0 auto;max-width:52ch}
.close .btn{margin-top:.6rem}

@media(max-width:720px){
  .hero__wall{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));opacity:.3}
  .hero__in{padding-block:clamp(3.25rem,14vw,5rem)}
  /* the text column runs full width here, so the scrim has to hold longer */
  .hero::after{background:linear-gradient(92deg,var(--ground) 55%,
    color-mix(in srgb,var(--ground) 80%,transparent) 78%,transparent 96%)}
}

/* ============================================================================
   THE CATALOGUE
   ========================================================================== */
.offers{display:grid;gap:1.5rem;margin-top:2.6rem}
.offers .panel__hd{padding:.9rem 1.4rem;font-size:.86rem}
.offers .panel__hd>span:first-child{font-weight:700;letter-spacing:-.01em;color:var(--text)}
.offers .panel__bd{padding:clamp(1.3rem,2.8vw,2rem)}
.offer__q{font-size:clamp(1.3rem,2vw,1.75rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.16;max-width:26ch}
.offer__for{margin:.6rem 0 0;font-size:.88rem;color:var(--text-3);max-width:none}
.offer__grid{display:grid;gap:clamp(1.4rem,3vw,2.4rem);margin-top:1.8rem;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(272px,.6fr)}
.offer__tier{margin:.6rem 0 0;font-size:.95rem;line-height:1.62}
/* The size of the field a report reads, as one measured line. Deliberately not
   a tile strip: the figures sit in a sentence, the way every other number on
   the public face does. */
.offer__scale{display:flex;flex-wrap:wrap;gap:.25rem .7rem;align-items:baseline;
  margin:1.15rem 0 0;padding:.85rem 0;font-size:.92rem;color:var(--text-2);
  border-block:1px solid var(--rail-2);max-width:none}
.offer__scale b{color:var(--text);font-weight:700}
.offer__scale>span{color:var(--text-3)}
.offer__do{display:flex;flex-direction:column;gap:.65rem;align-items:stretch;
  padding:1.15rem;border:1px solid var(--rail-2);border-radius:var(--r-sm);
  background:rgba(2,6,12,.3)}
.offer__do .btn{width:100%}
@media(max-width:980px){.offer__grid{grid-template-columns:1fr}
  .offer__do{align-items:stretch}}

.paywall__dt{color:var(--blue);letter-spacing:.01em;text-transform:none;
  font-size:.86rem;margin-top:.7rem;font-weight:600}
.paywall__note{margin:.85rem 0 0;font-size:.78rem;color:var(--text-3);
  line-height:1.6;max-width:none}

/* ============================================================================
   MAGAZINE
   ========================================================================== */
.cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;align-items:center}
.cats a{display:inline-flex;align-items:baseline;gap:.45rem;font-size:.88rem;font-weight:500;
  color:var(--text-2);border:1px solid var(--rail);border-radius:999px;padding:.38em .95em;
  transition:color .14s,border-color .14s,background .14s}
.cats a:hover{color:var(--text);border-color:rgba(184,204,224,.26);
  background:rgba(233,241,250,.03)}
.cats .num{font-size:.74rem;color:var(--text-3)}

.feature{display:grid;align-items:stretch}
.feature img{height:100%;min-height:240px;object-fit:cover;border-left:1px solid var(--rail-2);
  background:var(--panel-2)}
@media(max-width:760px){
  .feature{grid-template-columns:1fr!important}
  .feature img{border-left:0;border-top:1px solid var(--rail-2);min-height:200px;order:-1}
}

/* ============================================================================
   MOTION — content first, entrances staggered once, and none of it for
   reduced-motion readers.
   ========================================================================== */
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media(prefers-reduced-motion:reduce){
  .cap{animation:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============================================================================
   THE TOOL, IN THE PUBLIC FACE'S CLOTHES
   Everything behind sign-in used to live in its own stylesheet and its own
   visual world. One site now, one look: these are the tool's components
   rebuilt on this file's tokens, radii and shadows. The structure is the
   tool's, unchanged, because the instruments work; what changes is that the
   chrome is Archivo rather than mono-uppercase, corners are the public face's,
   and surfaces carry the same layered lift as every card out front.
   Colour still means exactly what it meant: the Steam scale is untouched.
   ========================================================================== */

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- classification chips ------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:600;
  letter-spacing:.01em;padding:.28em .65em;margin:.15rem .3rem .15rem 0;
  border:1px solid var(--rail);border-radius:999px;color:var(--text-2);
  background:rgba(2,6,12,.3);white-space:nowrap}
.chip--high{border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--red-2);
  background:color-mix(in srgb,var(--red) 12%,transparent)}
.chip--medium{border-color:color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold);
  background:color-mix(in srgb,var(--gold) 12%,transparent)}
.chip--low{border-color:var(--rail);color:var(--text-3)}
.chip--fix{border-color:color-mix(in srgb,var(--blue) 45%,transparent);color:var(--blue);
  background:color-mix(in srgb,var(--blue) 12%,transparent)}
.chip--wontfix{border-color:var(--rail-2);color:var(--text-3);background:transparent;
  text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--text-3) 60%,transparent)}

/* ---- build grade ----------------------------------------------------- */
.grade{display:inline-flex;align-items:baseline;gap:.3rem;font-size:.76rem;font-weight:600;
  padding:.26em .65em;border-radius:999px;border:1px solid var(--rail);
  color:var(--text-2);white-space:nowrap}
.grade b{font-family:var(--font-mono);font-weight:700;font-variant-numeric:tabular-nums}
.grade--1,.grade--2{border-color:color-mix(in srgb,var(--green) 45%,transparent);color:var(--green)}
.grade--3{border-color:color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold)}
.grade--4,.grade--5{border-color:color-mix(in srgb,var(--red) 42%,transparent);color:var(--red-2)}

/* ---- magnitude meter -------------------------------------------------- */
.meter{display:block;height:10px;background:var(--rail-2);border-radius:5px;overflow:hidden}
.meter>i{display:block;height:100%;background:var(--blue-dim);width:var(--target,0%)}
.meter--fix>i{background:var(--red)}
.meter--struct>i{background:var(--text-3)}
.meter--clear>i{background:var(--green)}
.meter--edge>i{background:var(--gold)}
.meter--short>i{background:var(--red-2)}

/* ---- the queue table -------------------------------------------------- */
.q__hd{display:grid;gap:1rem;align-items:center;padding:.7rem 1.25rem;
  border-bottom:1px solid var(--rail-2);font-size:.74rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.q--genres .q__hd,.q--genres .q__row{grid-template-columns:minmax(0,2.1fr) 92px minmax(120px,1fr) 96px 22px}
.q--games .q__hd,.q--games .q__row{grid-template-columns:minmax(0,2.3fr) 108px minmax(110px,.9fr) 104px 22px}
@media(max-width:860px){
  .q--genres .q__hd,.q--games .q__hd{display:none}
  .q--genres .q__row,.q--games .q__row{grid-template-columns:1fr;gap:.45rem}
  .q__row>*{grid-column:1}
  .q__row>.q__go{display:none}
}

/* ---- the opened lead ticket ------------------------------------------- */
.lead{display:grid;gap:clamp(1.25rem,3vw,2.25rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,.85fr)}
@media(max-width:1000px){.lead{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lead>:last-child{grid-column:1/-1}}
@media(max-width:640px){.lead{grid-template-columns:1fr}.lead>:last-child{grid-column:auto}}

/* ---- a counted complaint ---------------------------------------------- */
.want{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(90px,1.6fr) 68px 96px;
  gap:.5rem 1.1rem;align-items:center;padding:.8rem 1.25rem;
  border-top:1px solid var(--rail-2)}
@media(max-width:720px){
  .want{grid-template-columns:1fr auto;gap:.35rem .8rem}
  .want>:nth-child(2){grid-column:1/-1;order:3}
  .want>:nth-child(3){order:4;text-align:left!important}
  .want>:nth-child(4){order:2}
}

/* ---- spec rows inside a panel ----------------------------------------- */
.rowspec{display:grid;gap:.6rem 1.75rem;padding:1.2rem 1.25rem;
  border-top:1px solid var(--rail-2)}
.rowspec--rule{grid-template-columns:minmax(150px,220px) 1fr;align-items:start}
.rowspec--cat{grid-template-columns:minmax(160px,1.05fr) minmax(0,1.7fr) auto;align-items:center}
@media(max-width:760px){
  .rowspec--rule,.rowspec--cat{grid-template-columns:1fr}
  .rowspec--cat>:last-child{justify-content:flex-start!important}
}

/* ---- readout: facts as one measured line, never tiles ----------------- */
.readout{border:1px solid var(--rail);border-radius:var(--r);background:var(--card);
  overflow:hidden;box-shadow:var(--lift)}
.readout__line{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;padding:.95rem 1.25rem;
  font-size:.92rem;color:var(--text-2);align-items:baseline}
.readout__line b{color:var(--text);font-weight:700}
.readout__line .hi{color:var(--blue)}
.readout__line .flag{color:var(--red-2)}
.readout__bd{padding:1rem 1.25rem;border-top:1px solid var(--rail-2)}
.ratio{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--rail-2)}
.ratio>span{display:block;height:100%}
.ratio .well{background:var(--green)}
.ratio .mid{background:var(--gold)}
.ratio .poor{background:var(--red-2)}
.ratio__key{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin-top:.55rem;
  font-size:.78rem;color:var(--text-3)}
.ratio__key i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:.35rem}

/* ---- paywall / price ---------------------------------------------------- */
.paywall{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.45fr);
  gap:clamp(1.5rem,3.5vw,2.5rem);align-items:start}
.pricebox{border:1px solid var(--rail);border-radius:var(--r-sm);padding:1.35rem;
  background:rgba(2,6,12,.3)}
.pricebox__amount{margin:0;font-size:2.4rem;font-weight:800;letter-spacing:-.04em;line-height:1}
@media (max-width:720px){.paywall{grid-template-columns:1fr}}
.shortfall{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;align-items:baseline;
  padding:.5rem 0;border-top:1px solid var(--rail-2)}
.twoup{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem}

/* ---- drift -------------------------------------------------------------- */
.drift{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.45fr);
  gap:clamp(1.5rem,3.5vw,2.5rem);align-items:start}
.drift__areas{display:grid;gap:.1rem}
.drift__area{display:grid;grid-template-columns:1fr auto auto;gap:.5rem .9rem;
  align-items:baseline;padding:.5rem 0;border-top:1px solid var(--rail-2)}
@media (max-width:720px){.drift{grid-template-columns:1fr}}

/* ---- the picker --------------------------------------------------------- */
.finder{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem}
.finder input{flex:1 1 22rem;min-width:0;background:rgba(2,6,12,.45);color:var(--text);
  border:1px solid var(--rail);border-radius:var(--r-sm);padding:.7em .9em;
  font-family:var(--font-ui);font-size:.95rem;transition:border-color .14s,box-shadow .14s}
.finder input::placeholder{color:var(--text-3)}
.finder input:focus{outline:none;border-color:var(--blue-dim);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}

.gamerow{display:grid;grid-template-columns:minmax(0,1.6fr) auto minmax(120px,.5fr) auto;
  gap:.75rem 1.5rem;align-items:center;padding:1rem 1.25rem;
  border-top:1px solid var(--rail-2);transition:background .14s}
.gamerow:hover{background:rgba(233,241,250,.03)}
.gamerow__name{font-weight:700;font-size:1.02rem;color:var(--text)}
.gamerow__name:hover{color:var(--blue)}
.gamerow__demand{text-align:right}
.gamerow__lenses{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.gamerow__lenses a{font-size:.78rem;font-weight:500;color:var(--text-2);
  border:1px solid var(--rail);border-radius:999px;padding:.32em .8em;
  white-space:nowrap;transition:color .14s,border-color .14s}
.gamerow__lenses a:hover{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 45%,transparent)}
@media(max-width:900px){
  .gamerow{grid-template-columns:1fr auto;gap:.5rem 1rem}
  .gamerow__rating{grid-column:1/-1}
  .gamerow__lenses{grid-column:1/-1;justify-content:flex-start}
}

.libraryrow{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

/* ---- a Steam search result: a row that submits --------------------------- */
.hitrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:.75rem 1.1rem;align-items:center;width:100%;text-align:left;
  padding:.8rem 1.25rem;border:0;border-top:1px solid var(--rail-2);
  background:none;color:inherit;font:inherit;cursor:pointer;transition:background .14s}
.hitrow:hover,.hitrow:focus-visible{background:rgba(233,241,250,.03)}
.hitrow:hover .hitrow__name{color:var(--blue)}
.hitrow img{border-radius:6px;width:120px;height:45px;object-fit:cover}
.hitrow__noart{display:block;width:120px;height:45px;border-radius:6px;background:var(--panel-3)}
.hitrow__name{font-weight:600;font-size:1.02rem;transition:color .14s;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hitrow:hover .q__go{color:var(--blue);transform:translateX(3px)}
@media(max-width:600px){
  .hitrow{grid-template-columns:auto minmax(0,1fr);gap:.5rem .8rem}
  .hitrow>.tid{grid-column:2}
  .hitrow>.q__go{display:none}
}

/* A sample is a real report shown unlocked; it must not look like the reader's own. */
.panel--sample{border-color:color-mix(in srgb,var(--gold) 38%,var(--rail))}
.panel--sample>.panel__hd{background:color-mix(in srgb,var(--gold) 9%,transparent);
  border-bottom-color:color-mix(in srgb,var(--gold) 28%,var(--rail-2))}
.lenses--sample{margin-top:0}

/* ---- lens switcher / account tabs ---------------------------------------- */
.lenses{display:flex;flex-wrap:wrap;gap:0;margin-top:1.6rem;border-bottom:1px solid var(--rail-2)}
.lenses a{font-size:.92rem;font-weight:500;color:var(--text-3);padding:.7em 1em;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .14s,border-color .14s;white-space:nowrap}
.lenses a:hover{color:var(--text-2)}
.lenses a.is-on{color:var(--blue);border-bottom-color:var(--blue)}
@media(max-width:600px){.lenses{overflow-x:auto;flex-wrap:nowrap}}

.tabs{display:flex;gap:1.5rem;border-bottom:1px solid var(--rail-2);margin-top:1.5rem}
.tabs a{font-size:.92rem;font-weight:500;color:var(--text-3);padding:.65rem 0;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .14s}
.tabs a:hover{color:var(--text)}
.tabs a[aria-current=page]{color:var(--text);border-bottom-color:var(--blue)}

/* ============================================================================
   THE WRITTEN REPORT — a bought document, read top to bottom.
   ========================================================================== */
.report{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:start}
@media(min-width:1100px){.report{grid-template-columns:200px minmax(0,1fr);gap:clamp(2.5rem,4vw,4.5rem)}}
.toc{display:none}
@media(min-width:1100px){.toc{display:block;position:sticky;top:80px}}
.toc ol{list-style:none;margin:.8rem 0 0;padding:0;border-left:1px solid var(--rail-2)}
.toc a{display:block;font-size:.82rem;line-height:1.45;color:var(--text-3);
  padding:.38rem 0 .38rem .9rem;margin-left:-1px;border-left:2px solid transparent;
  transition:color .14s,border-color .14s}
.toc a:hover{color:var(--text);border-left-color:var(--blue-dim)}
.report__sect{scroll-margin-top:80px}
.report__sect+.report__sect{margin-top:clamp(2.4rem,4.5vw,3.4rem);
  padding-top:clamp(1.9rem,3.5vw,2.5rem);border-top:1px solid var(--rail-2)}
.report__sect>h2{font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.028em;font-weight:700}
.report__sect>.prose{margin-top:1.05rem}

/* figures: a chart is a card like any other, mono only where it measures */
.fig{margin-top:2rem}
.fig svg{display:block}
.fig svg text{font-family:var(--font-ui)}
.fig svg .fnum{font-family:var(--font-mono)}
.figkey{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;margin-top:.85rem;
  font-size:.78rem;color:var(--text-3)}
.figkey i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.4rem;
  vertical-align:-1px;background:var(--k,var(--blue))}
.figkey i.figkey--ring{background:transparent;border:2px solid var(--k,var(--text-3))}
.fignote{margin-top:.8rem;font-size:.78rem;color:var(--text-3);max-width:80ch;line-height:1.65}

.strip{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--rail-2)}
.strip>i{background:var(--blue);min-width:2px}
.strip>i+i{margin-left:2px}
.strip>i.strip--rest{background:var(--panel-3)}

.beline{display:grid;grid-template-columns:minmax(96px,180px) minmax(0,1fr) minmax(15ch,auto);
  gap:.9rem;align-items:center;padding:.46rem 0}
.beline__name{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.beline__val{font-size:.76rem;color:var(--text-2);text-align:right;white-space:nowrap}
@media(max-width:560px){
  .beline{grid-template-columns:minmax(0,1fr) auto;row-gap:.3rem}
  .beline .meter{grid-column:1/-1;order:3}
}

/* ---- the tag picker: 430 names as a dense, filterable grid --------------- */
.taggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:.5rem}
.taggrid a{display:flex;align-items:center;gap:.55rem;min-width:0;
  padding:.52rem .8rem;border:1px solid var(--rail-2);border-radius:var(--r-sm);
  color:var(--text);font-size:.92rem;font-weight:550;text-decoration:none;
  transition:border-color .14s,background .14s}
.taggrid a:hover{border-color:var(--blue-dim);
  background:color-mix(in srgb,var(--blue) 7%,transparent)}
.taggrid a>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.taggrid .yours{margin-left:auto;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.06em;color:var(--green);white-space:nowrap}

/* ---- the one authored motion the tool keeps: the intake scan ------------- */
@media(prefers-reduced-motion:no-preference){
  .scan .rev>i,.scan .meter>i{width:0;animation:fill .85s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay:calc(var(--i,0)*70ms + 120ms)}
  @keyframes fill{to{width:var(--target)}}
}
@media(prefers-reduced-motion:reduce){
  .scan .rev>i,.scan .meter>i{width:var(--target)}
}