/* LARPCHI, second identity: a black dot-matrix display (Geist Pixel Circle) with one warm light, the truth.
   Fonts: Geist Pixel Circle (display, numbers), Geist (text), Geist Mono (small labels only). OFL, by Vercel. */
@font-face { font-family: 'Geist Pixel'; src: url('/fonts/GeistPixel-Circle.woff2') format('woff2'); font-display: swap }
@font-face { font-family: 'Geist Pixel Square'; src: url('/fonts/GeistPixel-Square.woff2') format('woff2'); font-display: swap }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap }

:root {
  --bg: #000; --bg2: #060606; --card: #0c0c0c; --card2: #151515; --line: #1c1c1c; --line2: #2b2b2b;
  --text: #f4f4f2; --dim: #9b9b97; --faint: #5d5d5a;
  --lime: #ffd25e;            /* the one accent: warm light. Name kept for the scan console */
  --sun: #ffb648; --sun2: #ff7a3d;
  --red: #ff4d3a; --orange: #ff8a3a; --amber: #ffc23d; --green: #39e09b; --cyan: #7fd8ff;
  --display: 'Geist Pixel', 'Geist Mono', monospace;
  --body: 'Geist', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --snap: cubic-bezier(.2, 1.4, .3, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(16px, 3vw, 44px);
  color-scheme: dark;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.5 var(--body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.01em; text-wrap: balance }
.px { font-family: var(--display); font-weight: 400; letter-spacing: 0 }
p { margin: 0 }
a { color: inherit }
button { font: inherit; color: inherit; cursor: pointer }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px }
[hidden] { display: none !important }
.kicker, .fine, .meta dt, .menu a, .credits { font-family: var(--mono) }
.kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim) }
.fine { font-size: 13px; color: var(--faint) }

/* ---------- header: three columns, mono labels, the logo in the middle ---------- */
.bar { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 56px; padding: 0 var(--pad); background: rgba(0, 0, 0, .9); border-bottom: 1px solid var(--line); backdrop-filter: none }
.menu { display: flex; align-items: center; gap: 22px }
.menu.right { justify-content: flex-end }
.menu a { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--dim); position: relative; padding: 4px 0; transition: color .2s }
.menu a:hover, .menu a.on { color: var(--text) }
.menu a.on::before { content: ''; position: absolute; left: -10px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--lime); border-radius: 50% }
.menu .getpro { color: #000; background: var(--text); padding: 6px 12px; clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px) }
.menu .getpro:hover { color: #000; background: var(--lime) }
.menu .getpro.on { color: #000; background: var(--lime) }
.menu .getpro.on::before { display: none }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none }
.logo-mark { width: 74px; height: 42px; background: url("/img/mark.svg") center / contain no-repeat }
.logo-word { font-family: var(--display); font-size: 22px; letter-spacing: .02em }
.credits { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim) }
.credits i { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--lime) var(--p, 100%), var(--line2) 0) }
.credits b { color: var(--text); font-weight: 500 }

/* ---------- shared bits ---------- */
section { position: relative }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 28px; margin-bottom: 34px }
.sec-head .kicker { width: 100% }
.sec-head h1, .sec-head h2 { font-size: clamp(40px, 5vw, 88px); line-height: .95 }
.sec-head .more, .more { margin-left: auto; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); text-decoration: none }
.more:hover { color: var(--text) }
.go { position: relative; display: inline-flex; align-items: center; gap: 14px; border: 0; background: var(--text); color: #000; font: 500 22px var(--body); padding: 16px 26px; text-decoration: none; cursor: pointer;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); transition: background .2s, transform .15s }
.go i { font-style: normal; transition: transform .3s var(--out) }
.go:hover { background: var(--lime) }
.go:hover i { transform: translateX(5px) }
.go:active { transform: translateY(2px) }
.go[disabled] { opacity: .5; cursor: wait }
.go.wide { margin-top: 26px }
.linkish { background: none; border: 0; padding: 0; color: var(--dim); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line2); font-family: var(--mono); font-size: 13px }
.linkish:hover { color: var(--text) }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line2); background: var(--card); text-decoration: none; font-weight: 500; color: var(--text); cursor: pointer; transition: border-color .2s, background .2s }
.btn:hover { border-color: var(--text) }
.btn.primary { background: var(--text); color: #000; border-color: var(--text) }
.btn.primary:hover { background: var(--lime); border-color: var(--lime) }
.panel { background: var(--bg2); border: 1px solid var(--line); padding: 18px; display: grid; gap: 14px }
.panel h3 { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 500 }
.err { margin-top: 12px; color: var(--red); font-family: var(--mono); font-size: 14px }

/* ---------- 01 hero ---------- */
.hero { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 30px; padding: 56px var(--pad) 64px }
/* a fixed height: a canvas sized by its own pixels would push the layout and grow without end */
.lineup { display: block; width: 100%; height: clamp(320px, 52vh, 520px) }
.hero .lineup { grid-column: 2; grid-row: 1 }
.hero-foot { grid-column: 1; grid-row: 1; display: grid; gap: 34px; align-content: center }
.hero h1 { font-size: clamp(48px, 6.6vw, 124px); line-height: .92 }
.meta { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 28px; margin: 20px 0 0 }
.meta div { display: grid; gap: 2px }
.meta dt { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint) }
.meta dd { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase }
.hero-right { width: min(600px, 100%); display: grid; gap: 12px }
.ask { display: flex; gap: 10px }
.field { flex: 1; display: flex; align-items: center; min-width: 0; border: 1px solid var(--line2); background: var(--bg2); transition: border-color .2s }
.ask:focus-within .field { border-color: var(--text) }
.at { font-family: var(--display); font-size: 24px; color: var(--faint); padding: 0 4px 0 14px }
.field input { flex: 1; min-width: 0; height: 60px; background: none; border: 0; outline: 0; color: var(--text); font: 500 19px var(--body) }
.field input::placeholder { color: var(--faint) }
.under { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center }
.deep { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--dim); cursor: pointer }
.deep input { accent-color: var(--lime) }
.try { display: flex; flex-wrap: wrap; gap: 6px }
.try .fine { align-self: center; margin-right: 4px }
.try button { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); padding: 4px 10px 4px 4px; font-family: var(--mono); font-size: 12.5px; transition: border-color .2s }
.try button:hover { border-color: var(--text) }
.try img { width: 24px; height: 24px; object-fit: cover; filter: grayscale(1) }
.try .sc { font-family: var(--display) }

/* ---------- 02 live ---------- */
.checkpage { padding: 34px var(--pad) 60px }
.ck-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 48px; align-items: end; margin-bottom: 26px }
.ck-title h1 { font-size: clamp(48px, 5.4vw, 96px); line-height: .92; margin-top: 8px }
.ck-form { display: grid; gap: 10px; max-width: 900px; width: 100% }
.ck-form .field input { height: 64px; font-size: 20px }
#ckMode { margin-left: auto }
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 480px); gap: 26px; align-items: start }
.stagewrap { display: flex; justify-content: center; background: var(--bg2); border: 1px solid var(--line); padding: 34px 22px 22px; min-height: 560px }
.stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px }
.frame { position: relative; display: inline-block; line-height: 0; overflow: hidden; background: var(--card); min-width: 300px; min-height: 400px }
.frame img { display: block; height: min(62vh, 640px); width: auto; max-width: min(46vw, 680px); object-fit: contain; transition: opacity .35s, filter .6s }
.frame.dim img { filter: grayscale(.8) brightness(.55) }
.frame.swap img { opacity: 0 }
.beam { position: absolute; top: 0; bottom: 0; left: 0; width: 22%; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgba(255, 210, 94, .06) 70%, rgba(255, 210, 94, .45) 99%, var(--lime)) }
.beam.run { animation: beam 1.25s cubic-bezier(.5, 0, .5, 1) infinite }
.beam.once { animation: beam 1.1s cubic-bezier(.5, 0, .5, 1) 1 }
@keyframes beam { 0% { transform: translateX(-100%); opacity: 1 } 100% { transform: translateX(460%); opacity: 1 } }
.boxes { position: absolute; inset: 0; pointer-events: none }
/* the rest of the photo dims around the object being checked */
.spot { position: absolute; pointer-events: none; opacity: 0; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .58); transition: left .45s var(--out), top .45s var(--out), width .45s var(--out), height .45s var(--out), opacity .35s }
.spot.on { opacity: 1 }
/* the reticle travels from object to object */
.reticle { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: transform .44s var(--out), opacity .25s }
.reticle.on { opacity: 1 }
.reticle i { position: absolute; background: var(--lime) }
.reticle i:nth-child(1) { left: -18px; top: -1px; width: 36px; height: 2px }
.reticle i:nth-child(2) { left: -1px; top: -18px; width: 2px; height: 36px }
.reticle::before { content: ''; position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border: 2px solid var(--lime); border-radius: 50%; transition: transform .3s var(--snap) }
.reticle.lock::before { transform: scale(.45) }
.reticle.lock i { opacity: .25 }
.reticle b { position: absolute; left: 16px; top: 12px; white-space: nowrap; font: 500 10.5px var(--mono); letter-spacing: .06em; color: #000; background: var(--lime); padding: 2px 5px }
.reticle.lock b { opacity: 0 }
.box { position: absolute; --c: var(--lime); opacity: 0; transform: scale(.35); transition: transform .38s var(--snap), opacity .2s }
.box.on { opacity: 1; transform: none }
.box i { position: absolute; width: 14px; height: 14px; border: 2px solid var(--c); transition: border-color .3s }
.box i:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0 }
.box i:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0 }
.box i:nth-child(3) { left: -2px; bottom: -2px; border-right: 0; border-top: 0 }
.box i:nth-child(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0 }
.box::before { content: ''; position: absolute; inset: 0; border: 1px dashed var(--c); opacity: .55; transition: opacity .3s }
.box.hot::before { opacity: 1; background: color-mix(in srgb, var(--c) 14%, transparent) }
/* dots fill the box from the top while it is checked, then flash out in the verdict colour */
.box .fill { position: absolute; inset: 0; background: radial-gradient(circle, color-mix(in srgb, var(--c) 70%, transparent) 1.2px, transparent 1.7px) 0 0 / 7px 7px; clip-path: inset(0 0 100% 0); opacity: .9 }
.box .fill::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3) }
.box.checking.on .fill { animation: fillscan .72s steps(14) forwards }
@keyframes fillscan { to { clip-path: inset(0 0 0 0) } }
.box.done .fill { clip-path: inset(0 0 0 0); animation: flashout .7s ease-out forwards }
.box.done .fill::after { display: none }
@keyframes flashout { 0% { opacity: .95 } 100% { opacity: 0 } }
.box.done.v-fake { animation: jolt .36s steps(4) }
@keyframes jolt { 25% { translate: -3px 0 } 50% { translate: 3px 0 } 75% { translate: -2px 0 } }
.box.done.v-ok i { animation: okpulse .6s var(--out) }
@keyframes okpulse { 40% { transform: scale(1.5) } }
.box .tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1.2; font: 500 12px var(--mono); color: #000; background: var(--c); padding: 3px 7px 3px 5px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s .2s, left .3s var(--out), top .3s var(--out), background .3s; transform-origin: 0 50% }
.box.on .tag { opacity: 1 }
.box.done .tag { animation: flip .4s var(--snap) }
@keyframes flip { 0% { transform: rotateX(90deg) } 100% { transform: none } }
.box .tag em { font-style: normal; font-weight: 700; min-width: 1ch; text-align: center }
.box .tag b { font-weight: 500; overflow: hidden; text-overflow: ellipsis }
.box .tag .vw { text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; padding-left: 6px; border-left: 1px solid rgba(0, 0, 0, .3) }
.box.checking .tag em { animation: blink .5s steps(2) infinite }
@keyframes blink { 50% { opacity: .2 } }
.box .tag.sp { top: auto; bottom: calc(100% + 4px); opacity: 1 }
.box.low .tag.sp { bottom: auto; top: calc(100% + 4px) }
.box.v-fake { --c: var(--red) } .box.v-sus { --c: var(--amber) } .box.v-ok { --c: var(--green) } .box.v-unclear { --c: var(--cyan) }
/* the verdict stamped on the account's picture at the end */
.frame.portrait img { height: min(52vh, 440px); max-width: min(46vw, 440px) }
.fstamp { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 2px; padding: 10px 22px 12px; border: 5px solid var(--c); color: var(--c); background: rgba(0, 0, 0, .55); line-height: 1; transform: translate(-50%, -50%) rotate(-10deg) scale(2.2); opacity: 0; transition: transform .45s var(--snap), opacity .2s; pointer-events: none }
.fstamp.on { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg) }
.fstamp b { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4vw, 60px); white-space: nowrap }
.fstamp span { font: 500 12px var(--mono); letter-spacing: .12em }
.demo-pill { position: absolute; right: 0; top: -26px; font: 500 11px var(--mono); letter-spacing: .12em; color: #000; background: var(--lime); padding: 3px 7px; line-height: 1.3 }
.strip { display: flex; gap: 6px }
.strip button { width: 50px; height: 50px; padding: 0; border: 1px solid transparent; overflow: hidden; background: var(--card); opacity: .5; transition: opacity .2s, border-color .2s, transform .25s var(--out) }
.strip button.on { opacity: 1; border-color: var(--text); transform: translateY(-3px) }
.strip button.done { opacity: .85 }
.strip img { width: 100%; height: 100%; object-fit: cover; display: block }
.tagline { min-height: 22px; font-family: var(--mono); font-size: 13px; color: var(--dim); text-align: center; max-width: 560px }
.console { display: flex; flex-direction: column; gap: 14px; background: var(--bg2); border: 1px solid var(--line); padding: 20px; min-height: 560px }
.who { display: flex; align-items: center; gap: 12px; min-height: 50px; padding-bottom: 14px; border-bottom: 1px solid var(--line) }
.who img { width: 44px; height: 44px; object-fit: cover; background: var(--card2) }
.who .nm { font-weight: 600; font-size: 17px; line-height: 1.2 }
.who .sub { color: var(--dim); font-size: 13.5px }
.who .kind { margin-left: auto; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint) }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line) }
.facts div { background: var(--card); padding: 9px 11px }
.facts b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px }
.facts span { font-size: 12px; color: var(--dim) }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-family: var(--mono); font-size: 13px }
.steps li { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; color: var(--faint); transition: color .3s }
.steps li::before { content: ''; width: 8px; height: 8px; margin-left: 4px; border: 1px solid var(--line2); transition: background .3s, border-color .3s, transform .3s var(--snap) }
.steps li.now { color: var(--text) }
.steps li.now::before { border-color: var(--lime); animation: tick .9s ease-in-out infinite }
.steps li.ok { color: var(--dim) }
.steps li.ok::before { background: var(--lime); border-color: var(--lime); transform: rotate(45deg) scale(.9) }
.steps li em { font-style: normal; color: var(--faint) }
@keyframes tick { 50% { transform: rotate(45deg) } }
.finds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; align-content: start; overflow: auto; max-height: 330px; scrollbar-width: thin }
.find { display: grid; grid-template-columns: 3px 1fr auto; gap: 4px 12px; padding: 9px 12px 9px 0; background: var(--card); --c: var(--lime); opacity: 0; transform: translateX(18px); transition: opacity .3s, transform .45s var(--out), background .2s }
.find.in { opacity: 1; transform: none }
.find::before { content: ''; grid-row: span 2; background: var(--c) }
.find b { font-weight: 600; font-size: 14.5px }
.find .vd { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--c); align-self: center }
.find p { grid-column: 2 / 4; font-size: 13.5px; color: var(--dim); line-height: 1.35 }
.find.hot { background: var(--card2) }
.find.v-fake { --c: var(--red) } .find.v-sus { --c: var(--amber) } .find.v-ok { --c: var(--green) } .find.v-unclear { --c: var(--cyan) }
.find.sig { grid-template-columns: 3px 1fr auto; background: transparent; border: 1px solid var(--line) }
.find.sig b { font-weight: 500; grid-row: span 2; align-self: center }
.find.sig .vd { grid-row: span 2 }
.find.rc b { font-weight: 500; font-size: 13.5px; line-height: 1.35 }
.find.rc p a { color: var(--c); text-decoration: none }
.judges { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line) }
.judge { display: grid; grid-template-columns: 56px 1fr 40px; gap: 12px; align-items: center; font-family: var(--mono); font-size: 13px }
.jn { color: var(--dim) }
.jm { position: relative; height: 6px; background: var(--card2); overflow: hidden }
.jm i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c, var(--lime)); transition: width .9s var(--out) }
.judge b { font-family: var(--display); font-weight: 400; font-size: 20px; text-align: right }
.split-flag { font-family: var(--mono); font-size: 12px; color: var(--amber) }
.verdict { display: grid; grid-template-columns: 120px 1fr; gap: 6px 18px; align-items: center; position: relative }
.dial { width: 120px; height: 120px; transform: rotate(-90deg) }
.dial circle { fill: none; stroke-width: 8 }
.dial .track { stroke: var(--card2) }
.dial .arc { stroke: var(--lime); stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.1s var(--out), stroke .4s }
.num { position: absolute; left: 0; width: 120px; text-align: center; top: 50%; transform: translateY(-50%) }
.num b { display: block; font-family: var(--display); font-weight: 400; font-size: 42px; line-height: 1 }
.num span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--dim) }
.vtext strong { display: inline-block; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1 }
.vtext strong.stamp { animation: stamp .42s var(--snap) }
@keyframes stamp { 0% { transform: scale(1.7) rotate(-6deg); opacity: 0 } 60% { opacity: 1 } 100% { transform: none } }
.vtext p { margin-top: 6px; font-size: 15px; line-height: 1.35 }
.openlink { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--lime); text-decoration: none; cursor: pointer }
.openlink:hover { text-decoration: underline }
.ticker { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line) }
.ticker h3 { display: none }
.tick { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 14px 14px 14px 0; border-right: 1px solid var(--line); text-decoration: none; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .6s var(--out) }
.tick:not(:first-of-type) { padding-left: 14px }
.tick.in { opacity: 1; transform: none }
.tick .ts { grid-row: span 2; display: grid; place-items: center; height: 44px; background: var(--card); font-family: var(--display); font-size: 20px; color: var(--c) }
.tick .tw { font-weight: 600; font-size: 14px; display: flex; gap: 10px; align-items: baseline }
.tick .tw em { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--c) }
.tick .th { font-size: 13.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* ---------- 03 story: pinned, lines light up with scroll ---------- */
.story { height: 420vh; border-top: 1px solid var(--line) }
.story-pin { position: sticky; top: 56px; height: calc(100vh - 56px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 0 var(--pad); overflow: hidden }
.story-text { display: grid; gap: 14px }
.story-text .kicker { margin-bottom: 16px }
.sline { font-size: clamp(30px, 3.6vw, 64px); line-height: 1.02; color: var(--line2); transition: color .5s, transform .6s var(--out); transform: translateX(-10px) }
.sline.past { color: var(--faint); transform: none }
.sline.on { color: var(--text); transform: none }
.verdictline.on { color: var(--red); font-size: clamp(56px, 7vw, 128px) }
.story-photo { display: grid; gap: 14px; justify-items: center }
.sp-frame { position: relative; line-height: 0; overflow: hidden; border: 1px solid var(--line2) }
.sp-frame img { height: min(66vh, 680px); width: auto; max-width: 100%; display: block; filter: grayscale(var(--g, 1)) contrast(1.05); transition: filter .8s }
.sp-scan { position: absolute; left: 0; right: 0; height: 2px; top: calc(var(--scan, 0) * 100%); background: var(--lime); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); opacity: var(--scanOn, 0) }
.sp-boxes { position: absolute; inset: 0 }
.sp-boxes .box i { opacity: 1; transform: none }
.sp-stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg) scale(var(--st, 2.4)); opacity: var(--sto, 0); font-family: var(--display); font-size: clamp(60px, 8vw, 140px); color: var(--red); border: 6px solid var(--red); padding: 6px 22px; line-height: 1; background: rgba(0, 0, 0, .35); transition: transform .45s var(--snap), opacity .2s }
.sp-bar { width: min(420px, 80%); height: 2px; background: var(--line2) }
.sp-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--text) }

/* ---------- 04 sunrise: background goes from night to light with scroll (--t from 0 to 1) ---------- */
.sunrise { height: 240vh; --t: 0 }
.sun-pin { position: sticky; top: 56px; height: calc(100vh - 56px); overflow: hidden; display: grid; place-items: center; align-content: end; padding-bottom: 12vh; text-align: center; --t2: 0;
  /* night first warms from below (ember), the paper light only arrives at the end: no grey middle */
  background:
    radial-gradient(ellipse 60% 50% at 50% calc(110% - var(--t) * 75%), rgba(255, 196, 110, calc(var(--t) * 1.1)), transparent 65%),
    radial-gradient(ellipse 130% 70% at 50% 115%, rgba(255, 96, 48, calc(var(--t) * .95)), rgba(120, 30, 60, calc(var(--t) * .5)) 55%, transparent 80%),
    linear-gradient(180deg, rgba(246, 239, 228, var(--t2)), rgba(255, 228, 188, var(--t2))),
    #000 }
#sun { position: absolute; inset: 0; width: 100%; height: 100% }
.sun-title { position: relative; font-size: clamp(48px, 7vw, 132px); line-height: .92; color: color-mix(in srgb, #f4f4f2 calc(100% - var(--t2) * 100%), #0b0b0b) }
.sun-sub { position: relative; margin-top: 20px; max-width: 46ch; font-size: 19px; color: color-mix(in srgb, #c9c2b8 calc(100% - var(--t2) * 100%), #3b3530) }

/* ---------- 05 how, on the light ---------- */
.light { --bg: #f6efe4; --bg2: #fbf6ee; --card: #fff; --card2: #efe6d8; --line: #e3d7c4; --line2: #cdbfa8; --text: #0b0b0b; --dim: #5f574d; --faint: #9a8f80; background: var(--bg); color: var(--text); color-scheme: light }
.how { padding: 60px var(--pad) 110px }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.fstep { background: var(--card); border: 1px solid var(--line); padding: 14px 14px 22px; display: grid; gap: 8px; align-content: start; opacity: 0; transform: translateY(40px) rotate(-1.5deg); transition: opacity .6s, transform .9s var(--out) }
.fstep:nth-child(2) { transform: translateY(60px) rotate(1deg) } .fstep:nth-child(3) { transform: translateY(80px) rotate(-.6deg) } .fstep:nth-child(4) { transform: translateY(100px) rotate(1.4deg) }
.fstep.in { opacity: 1; transform: none }
.fstep:nth-child(2).in { transition-delay: .1s } .fstep:nth-child(3).in { transition-delay: .2s } .fstep:nth-child(4).in { transition-delay: .3s }
.fstep .no { font-family: var(--display); font-size: 28px; color: var(--sun2); margin-top: 6px }
.fstep h3 { font-size: 22px; font-weight: 600 }
.fstep p { color: var(--dim); font-size: 15.5px }
.fvis { position: relative; height: 210px; background: var(--card2); overflow: hidden }
.vis-account { display: grid; align-content: center; gap: 2px; padding: 16px }
.meter-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line) }
.meter-row span { color: var(--dim); font-size: 13px }
.meter-row b { font-family: var(--display); font-weight: 400; font-size: 24px }
.meter-row em { font-style: normal; color: var(--faint); font-size: 12px }
.vis-eyes img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block }
.vbox { position: absolute; border: 2px solid var(--green); opacity: 0; transform: scale(1.35); transition: opacity .3s, transform .45s var(--snap) }
.vbox.v-fake { border-color: var(--red) } .vbox.v-sus { border-color: var(--amber) } .vbox.v-ok { border-color: var(--green) } .vbox.v-unclear { border-color: var(--cyan) }
.fstep.in .vbox { opacity: 1; transform: none }
.fstep.in .vbox:nth-of-type(2) { transition-delay: .3s } .fstep.in .vbox:nth-of-type(3) { transition-delay: .6s } .fstep.in .vbox:nth-of-type(4) { transition-delay: .9s }
.vis-lead { display: grid; align-content: center; gap: 6px; padding: 14px }
.ln { font-size: 13.5px; padding: 7px 10px; background: var(--card); border-left: 3px solid var(--red); opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .5s var(--out) }
.ln.neg { border-left-color: var(--green) }
.ln b { font-family: var(--display); font-weight: 400; margin-right: 8px }
.fstep.in .ln { opacity: 1; transform: none }
.fstep.in .ln:nth-child(2) { transition-delay: .25s } .fstep.in .ln:nth-child(3) { transition-delay: .5s } .fstep.in .ln:nth-child(4) { transition-delay: .75s }
.vis-jev { display: grid; place-items: center; padding: 18px }
.vis-jev svg { width: 82%; overflow: visible }
.vis-jev path { fill: none; stroke-width: 12; stroke-dasharray: 252; stroke-dashoffset: 252; transition: stroke-dashoffset 1.2s var(--out) }
.vis-jev .ja { stroke: var(--line); stroke-dashoffset: 0 }
.vis-jev .jb { stroke: var(--red) }
.fstep.in .vis-jev .jb { stroke-dashoffset: var(--off, 252) }
.jv { display: flex; gap: 18px; font-family: var(--mono); font-size: 12.5px; color: var(--dim); margin-top: -30px }
.jv b { font-family: var(--display); font-weight: 400; color: var(--text); font-size: 22px; margin-left: 4px }
.tells-head { font-size: clamp(28px, 3vw, 46px); margin: 70px 0 18px }
.tells { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; max-width: 1100px }
.tell { background: var(--card); border: 1px solid var(--line); overflow: hidden }
.tell canvas { display: block; width: 100%; aspect-ratio: 1 }
.tell div { padding: 10px 12px 12px }
.tell b { display: block; font-size: 15px }
.tell span { font-size: 13.5px; color: var(--dim) }

/* ---------- 06 leaderboard: big rows, the centre one lights ---------- */
.board { padding: 110px var(--pad) 90px; border-top: 1px solid var(--line) }
.lbtabs { display: flex; gap: 4px; margin-left: auto }
.lbtabs button { background: none; border: 1px solid transparent; padding: 7px 12px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim) }
.lbtabs button.on { border-color: var(--text); color: var(--text) }
.biglist { display: grid; gap: 0; border-top: 1px solid var(--line) }
.brow { display: grid; grid-template-columns: 60px 72px minmax(0, 1fr) auto auto; gap: 24px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: #262626; transition: color .35s }
.brow .rk { font-family: var(--mono); font-size: 13px; color: inherit }
.brow .h { font-family: var(--display); font-size: clamp(34px, 4.6vw, 84px); line-height: 1.02; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.brow .w { font-family: var(--mono); font-size: 13px; letter-spacing: .08em }
.brow .s { font-family: var(--display); font-size: clamp(30px, 3.6vw, 64px); min-width: 2.2ch; text-align: right }
.brow canvas { grid-column: 2; grid-row: 1; width: 72px; height: 72px; opacity: .14; transition: opacity .35s; image-rendering: pixelated }
.brow.on { color: var(--text) }
.brow.on .w, .brow.on .s { color: var(--c) }
.brow.on canvas { opacity: 1 }
.board .more { display: inline-block; margin-top: 22px }

/* ---------- 07 latest ---------- */
.latest { padding: 90px var(--pad); border-top: 1px solid var(--line) }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px }
.ccard { position: relative; display: grid; grid-template-rows: auto 1fr; text-decoration: none; background: var(--card); border: 1px solid var(--line); overflow: hidden; opacity: 0; transform: translateY(26px); transition: opacity .5s, transform .7s var(--out), border-color .2s }
.ccard.in { opacity: 1; transform: none }
.ccard:hover { border-color: var(--text) }
.ccard .pic { position: relative; aspect-ratio: 4 / 3; background: var(--card2); overflow: hidden }
.ccard .pic img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: filter .5s, transform .8s var(--out) }
.ccard:hover .pic img { filter: none; transform: scale(1.04) }
.ccard .score { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; min-width: 58px; height: 58px; background: #000; font-family: var(--display); font-size: 28px; color: var(--c) }
.ccard .body { padding: 12px 14px 16px; display: grid; gap: 4px; align-content: start }
.ccard .h { font-weight: 600 }
.ccard .lb { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--c) }
.ccard p { font-size: 14.5px; color: var(--dim); line-height: 1.35 }
.ccard .demo { position: absolute; left: 10px; top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; background: #000; padding: 3px 7px; color: var(--dim) }

/* ---------- 08 pro teaser and the /pro page ---------- */
.protease { padding: 90px var(--pad); border-top: 1px solid var(--line) }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.plan { position: relative; color: var(--text); text-decoration: none; background: var(--bg2); border: 1px solid var(--line); padding: 22px; display: grid; gap: 12px; align-content: start; transition: border-color .25s, transform .4s var(--out) }
.plan:hover { border-color: var(--text); transform: translateY(-4px) }
.plan.hot { border-color: var(--lime) }
.plan .pn { font-family: var(--display); font-size: 40px; line-height: 1 }
.plan .pp { font-family: var(--mono); font-size: 13px; color: var(--dim) }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px }
.plan li::before { content: '■ '; color: var(--lime); font-size: 10px; vertical-align: 2px }
.propage { padding: 30px var(--pad) 90px; max-width: 1360px; margin: 0 auto }
.pro-banner { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: space-between; border: 1px solid var(--line); background: var(--bg2); padding: 14px 18px; margin-bottom: 26px }
.pro-banner .ring { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; color: var(--dim) }
.pro-banner .ring i { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(var(--lime) var(--p, 100%), var(--line2) 0); -webkit-mask: radial-gradient(circle, transparent 9px, #000 10px); mask: radial-gradient(circle, transparent 9px, #000 10px) }
.pro-banner .ring b { color: var(--text); font-family: var(--display); font-size: 22px; font-weight: 400 }
.ptable-wrap { overflow-x: auto; border: 1px solid var(--line) }
.ptable { width: 100%; border-collapse: collapse; min-width: 760px }
.ptable th, .ptable td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px }
.ptable th { vertical-align: bottom; font-weight: 500 }
.ptable td:not(:first-child), .ptable th:not(:first-child) { width: 22%; border-left: 1px solid var(--line) }
.ptable .col-head { display: grid; gap: 6px }
.ptable .col-head b { font-family: var(--display); font-size: 32px; font-weight: 400 }
.ptable .col-head span { font-family: var(--mono); font-size: 12.5px; color: var(--dim) }
.ptable .col-pro { background: color-mix(in srgb, var(--lime) 6%, transparent) }
.ptable .feat small { display: block; color: var(--faint); font-size: 12.5px; margin-top: 2px }
.ptable .yes { color: var(--lime) } .ptable .no { color: var(--faint) }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px }
.way { border: 1px solid var(--line); background: var(--bg2); padding: 20px; display: grid; gap: 14px; align-content: start }
.way h3 { font-family: var(--display); font-size: 30px; font-weight: 400 }
.passes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.passes .tier { border: 1px solid var(--line); display: grid }
.passes .tier > span { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--dim) }
.passes button { display: flex; justify-content: space-between; gap: 10px; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px; text-align: left; transition: background .2s }
.passes button:last-child { border-bottom: 0 }
.passes button:not(:disabled):hover { background: var(--card2) }
.passes button:disabled { cursor: not-allowed; opacity: .45 }
.passes button:disabled:hover { background: none }
.passes button b { font-family: var(--display); font-weight: 400; font-size: 20px }
.holdbox { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line) }
.holdbox div { background: var(--card); padding: 12px }
.holdbox b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px }
.wallet-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.pro-note { font-size: 14px; color: var(--dim); border-left: 2px solid var(--lime); padding: 6px 12px }
.pro-msg { font-family: var(--mono); font-size: 13px; color: var(--lime); min-height: 18px }

/* ---------- 09 token ---------- */
.tokenpage { padding: 46px var(--pad) 100px }
.tok { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px }
.tok-main, .tank, .split { background: var(--bg2); border: 1px solid var(--line); padding: 24px }
.big { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.2; max-width: 24em; font-weight: 500 }
.calc { margin-top: 28px; display: grid; gap: 10px }
.calc label { color: var(--dim); font-family: var(--mono); font-size: 13px }
.calc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center }
.calc-row input { width: 100%; accent-color: var(--lime) }
.calc-row output { font-family: var(--display); font-size: 28px; min-width: 6.2ch; text-align: right }
.calc-row span { color: var(--dim); font-family: var(--mono); font-size: 13px }
#holdPlan { color: var(--lime); min-width: 4ch }
.calc-res { display: flex; align-items: baseline; gap: 12px; margin-top: 6px }
.calc-res b { font-size: 84px; line-height: 1; color: var(--lime); display: inline-block; font-weight: 400 }
.calc-res b.bump { animation: bump .3s var(--snap) }
@keyframes bump { 0% { transform: translateY(8px) scale(.94) } }
.calc-res span { font-size: 19px }
.tok-side { display: grid; gap: 14px }
.tank-head { display: flex; justify-content: space-between; align-items: baseline; color: var(--dim); font-family: var(--mono); font-size: 13px }
.tank-head b { font-size: 34px; color: var(--text); font-weight: 400 }
.tank-bar { height: 14px; margin: 14px 0; background: var(--card2); overflow: hidden; display: flex }
.tank-bar i { display: block; height: 100%; width: 0; background: radial-gradient(circle at 3px 3px, var(--lime) 2.2px, transparent 2.6px) 0 0 / 7px 7px; transition: width 1.4s var(--out) }
.tank-foot { display: flex; justify-content: space-between; gap: 10px; color: var(--dim); font-size: 14px }
.tank-foot b { color: var(--text) }
.split-head { color: var(--dim); margin-bottom: 14px; font-family: var(--mono); font-size: 13px }
.split-bar { display: flex; height: 12px; gap: 3px }
.split-bar i { width: 0; transition: width 1s var(--out); background: var(--c) }
.tokenpage.in .split-bar i { width: var(--w) }
.split-bar i:nth-child(2) { transition-delay: .12s } .split-bar i:nth-child(3) { transition-delay: .24s } .split-bar i:nth-child(4) { transition-delay: .36s }
.s1 { --c: var(--lime) } .s2 { --c: var(--red) } .s3 { --c: var(--cyan) } .s4 { --c: var(--faint) }
.split-legend { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 14px; color: var(--dim) }
.split-legend li::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--c); margin-right: 8px }
.split-legend b { color: var(--text) }

/* the contract address: an empty slot of 44 dots that a light runs along until launch, then the address types itself in */
.ca { border: 1px solid var(--line2); background: var(--bg2); padding: 22px 24px; margin-bottom: 14px; display: grid; gap: 14px }
.ca-head { display: flex; justify-content: space-between; align-items: center; gap: 12px }
.ca-state { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); display: flex; align-items: center; gap: 8px }
.ca-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite }
.ca.live .ca-state { color: var(--green) }
.ca.live .ca-state::before { animation: none }
@keyframes pulse { 50% { opacity: .25 } }
.ca-row { display: flex; gap: 12px; align-items: center }
.ca-slot { flex: 1; min-width: 0; display: flex; gap: 2px; font-family: var(--display); font-size: clamp(16px, 1.9vw, 30px); line-height: 1; padding: 14px 16px; background: #000; border: 1px solid var(--line); overflow: hidden }
.ca-slot i { font-style: normal; width: 1ch; text-align: center; color: var(--line2); transition: color .25s }
.ca-slot i.lit { color: var(--lime) }
.ca-slot i.ch { color: var(--text) }
.ca-row .btn[disabled] { opacity: .4; cursor: not-allowed }
.ca-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 13px var(--mono); letter-spacing: .04em }
.ca-links a { color: var(--faint); text-decoration: none; pointer-events: none }
.ca.live .ca-links a { color: var(--dim); pointer-events: auto }
.ca.live .ca-links a:hover { color: var(--text) }
.ca .fine a { color: var(--dim) }
@media (max-width: 960px) { .tok { grid-template-columns: 1fr } .ca-row { flex-direction: column; align-items: stretch } .ca-slot { font-size: 13px; padding: 12px } }

/* ---------- 10 outro and footer ---------- */
.outro { padding: 40px var(--pad) 110px; border-top: 1px solid var(--line); display: grid; justify-items: center; gap: 26px; text-align: center }
.lineup.small { height: 240px; max-width: 900px }
.outro h2 { font-size: clamp(40px, 5.6vw, 100px); line-height: .95 }
.foot { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 26px var(--pad) 36px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px }
.foot nav { display: flex; gap: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase }
.foot a { color: var(--dim); text-decoration: none }
.foot a:hover { color: var(--text) }
.drop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0, 0, 0, .9) }
.drop div { font-size: 44px; padding: 60px 90px; border: 2px dashed var(--lime) }

/* ---------- setup ---------- */
.setup { padding: 48px var(--pad); max-width: 720px }
.setup h2 { font-size: 56px; margin-bottom: 10px }
.setform { display: grid; gap: 10px; margin: 26px 0 }
.setform label { font-family: var(--mono); font-size: 13px; color: var(--dim) }
.setform input { height: 50px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text); font: 500 17px var(--body); padding: 0 14px }
.setform .go { justify-self: start; margin-top: 8px }
.setinfo { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; color: var(--dim); font-family: var(--mono); font-size: 13px }
.setinfo dd { margin: 0; color: var(--text) }

/* old case-page pieces still used by the report */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px }
.gal { position: relative; overflow: hidden; background: var(--card); line-height: 0 }
.gal img { width: 100%; height: auto; display: block }
.gal .boxes .box i { opacity: 1; transform: none }
.gal .boxes .box::before { opacity: .5 }
.gal .boxes .box .tag { opacity: 1; transform: none; font-size: 11px }
.gal .meta { position: absolute; left: 8px; bottom: 8px; line-height: 1.2; font-family: var(--mono); font-size: 11.5px; background: #000; padding: 4px 7px; color: var(--dim) }
.context { white-space: pre-wrap; font-size: 15px; color: var(--dim); max-height: 280px; overflow: auto }
.cost { font-size: 13px; color: var(--faint) }

/* ---------- smaller screens ---------- */
@media (max-width: 1200px) {
  .live-grid { grid-template-columns: 1fr }
  .ticker { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .story-pin { grid-template-columns: 1fr; align-content: center; gap: 20px }
  .story-photo { order: -1 }
  .sp-frame img { height: 38vh }
  .story-text { gap: 8px }
  .story-text .kicker { margin-bottom: 4px }
  .sline { font-size: clamp(22px, 5.4vw, 40px) }
  .sp-stamp { font-size: clamp(40px, 12vw, 80px); border-width: 4px }
  .tok, .ways { grid-template-columns: 1fr }
  .brow canvas { display: none }
}
@media (max-width: 760px) {
  body { font-size: 16px }
  .bar { grid-template-columns: auto 1fr; }
  .bar { height: auto; padding-block: 8px; row-gap: 4px }
  .menu.left { grid-column: 1 / -1; grid-row: 2; order: 3; overflow-x: auto; gap: 18px; padding: 2px 0 2px 10px; scrollbar-width: none }
  .menu.left a { white-space: nowrap }
  .menu.right { gap: 12px }
  .hero { min-height: auto }
  .lineup { height: 300px }
  .meta { grid-template-columns: repeat(2, auto) }
  .ask { flex-direction: column }
  .go { justify-content: center }
  .frame img { max-width: 100%; height: auto; max-height: 60vh }
  .ticker, .flow, .plans, .passes, .holdbox { grid-template-columns: 1fr }
  .verdict { grid-template-columns: 1fr }
  .num { position: static; transform: none; width: auto; text-align: left }
  .dial { display: none }
  .brow { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px }
  .brow .w { display: none }
  .foot { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
  .story { height: auto } .story-pin { position: static; height: auto; padding: 60px var(--pad) }
  .sline { color: var(--text) }
  .sunrise { height: auto; --t: 1 } .sun-pin { position: static; height: 70vh }
}

/* ---------- pages ---------- */
.page { min-height: calc(100vh - 56px - 70px) }
.page.light { background: var(--bg) }
.wipe { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 100; pointer-events: none; display: none }
.wipe.on { display: block; pointer-events: auto }
/* a new page builds itself: its parts rise one after another */
.page.enter :is(.ca, .utils > *, .utils-head, .sec-head > *, .ck-top > *, .live-grid > *, .ticker, .flow > *, .hero-foot > *, .idx > *, .tells-head, .lbnote, .rp-top, .rp-id, .rp-strip, .rp-verdict) { animation: rise .5s var(--out) both; animation-delay: calc(var(--i, 0) * 35ms) }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.page.enter .hero .lineup { animation: fadein .5s .1s both }
@keyframes fadein { from { opacity: 0 } }

/* home: the way to every page */
.index { padding: 90px var(--pad) 100px }
.idx { display: grid; border-top: 1px solid var(--line) }
.irow { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.2fr) 40px; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); position: relative; overflow: hidden }
.irow::before { content: ''; position: absolute; inset: 0; background: var(--text); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s var(--out); z-index: 0 }
.irow > * { position: relative; z-index: 1; transition: color .3s, transform .45s var(--out) }
.irow .rk { font-family: var(--mono); font-size: 13px; color: var(--faint) }
.irow .h { font-family: var(--display); font-size: clamp(36px, 4.4vw, 76px); line-height: 1 }
.irow .d { color: var(--dim); font-size: 16px }
.irow i { font-style: normal; font-size: 28px; justify-self: end }
.irow:hover::before { transform: scaleY(1) }
.irow:hover > * { color: var(--bg) }
.irow:hover .h { transform: translateX(14px) }
.irow:hover i { transform: translateX(-6px) }

/* leaderboard page: rows are dealt in like cards */
.board { padding: 46px var(--pad) 90px; border-top: 0 }
.lbnote { color: var(--dim); margin: -18px 0 22px; font-size: 16px }
.biglist.deal .brow { animation: deal .7s var(--out) both; animation-delay: calc(min(var(--i, 0), 12) * 45ms) }
@keyframes deal { from { opacity: 0; transform: translateX(-40px) } }
.latest { padding: 46px var(--pad) 90px; border-top: 0 }
.how { padding: 46px var(--pad) 110px }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 10px; padding-top: 16px }
  .hero .lineup { grid-column: 1; grid-row: 1; height: 260px }
  .hero-foot { grid-column: 1; grid-row: 2 }
  .ck-top { grid-template-columns: 1fr; gap: 14px }
  #ckMode { margin-left: 0; width: 100% }
  .irow { grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 12px }
  .irow .d { display: none }
}

/* token page: what the token gives */
.utils-head { font-size: clamp(32px, 3.6vw, 60px); margin: 46px 0 18px }
.utils { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.util { background: var(--bg2); border: 1px solid var(--line); padding: 22px; display: grid; gap: 10px; align-content: start; transition: border-color .25s, transform .4s var(--out) }
.util:hover { border-color: var(--text); transform: translateY(-4px) }
.util.hot { border-color: var(--lime) }
.util .no { font-family: var(--mono); font-size: 12px; color: var(--faint) }
.util .lv { font: 500 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lime) }
.util h3 { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1 }
.util ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: var(--dim) }
.util li::before { content: '■ '; color: var(--lime); font-size: 9px; vertical-align: 2px }
.util-note { margin-top: 14px; padding: 16px 20px; border: 1px dashed var(--line2); color: var(--dim); font-size: 15px }
.util-note a { color: var(--text) }
@media (max-width: 1200px) { .utils { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 760px) { .utils { grid-template-columns: 1fr } }