:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}.plg{display:none;align-items:baseline;font:800 17px/1 'Archivo',sans-serif;color:#F4F2EC;letter-spacing:-.01em;text-transform:none;margin-right:12px;vertical-align:-2px}
.top:has(#cover[hidden]) .plg{display:inline-flex}
.top:has(#cover[hidden]) .tl .dt{display:none}
.plg .spk{display:inline-block;width:2px;height:11px;margin:0 6px 0 1px;border-radius:1px;background:linear-gradient(180deg,#FFB08F,#FF6B45);box-shadow:0 0 6px 1px rgba(255,107,69,.7);transform:skewX(-12deg);align-self:center}
.plg .pP{position:relative;font-size:1.3em;line-height:.8}
.plg .pP i{position:absolute;left:.2em;top:.13em;width:.2em;height:.2em;border-radius:50%;background:radial-gradient(circle,#FFC2A6 0,#FF6B45 55%,#C2410C 100%);box-shadow:0 0 5px 1px rgba(255,107,69,.75)}
.top:has(#cover[hidden]) .tl>b{display:none}.top:has(#cover[hidden]) .tl{font-size:0}.top:has(#cover[hidden]) .plg{font-size:17px}.top:has(#cover[hidden]) .plg::after{content:'AgriFood Tech · Edition 1';font:600 10px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#FF6B45;border:1px solid rgba(255,107,69,.5);border-radius:99px;padding:4px 8px;margin-left:10px;align-self:center}
#wu{padding-top:42px!important}
.top:has(#cover[hidden]){background:linear-gradient(180deg,#0B0F0D 0,#0B0F0D 75%,rgba(11,15,13,0) 100%);padding-bottom:12px}
.top:has(#cover[hidden]) .plg::after{border:0;border-left:1px solid rgba(237,235,228,.28);border-radius:0;padding:2px 0 2px 12px;margin-left:12px;color:#FF6B45;content:'AgriFood Tech · Edition 1'}
.plg .plimg{height:24px;width:auto;display:block}
.top:has(#cover[hidden]) .plg{align-items:center}
@media (max-width:380px){.plg .plimg{height:21px}}
#wu h1{font-size:clamp(30px,10.8cqw,52px)!important;white-space:nowrap}

.waj{display:none;margin:16px 0 6px;padding:16px;border-radius:20px;background:rgba(37,211,102,.06);border:1px solid rgba(37,211,102,.25)}.form.done~.waj{display:block}.waj .wat{font:700 18px 'Archivo',sans-serif;color:#EDEBE4;margin-bottom:10px;text-align:center}.waj .wab{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:999px;border:1.5px solid #25D366;color:#25D366;background:rgba(37,211,102,.08);font:700 16px 'Archivo',sans-serif;text-decoration:none}.waj .wan{text-align:center;font-size:13.5px;color:rgba(237,235,228,.65);margin-top:8px}

/* Full-screen edition: a paced kinetic intro, then a big swipeable deck of the 10 cards, with a sign-up call to action throughout and at the end. */
:root { --ink: #0A0E0C; --paper: #EDEBE4; --mist: #8E958F; --orange: #FF6B45; --line: rgba(237,235,228,.14); color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #050706; color: var(--paper); }
body { font-family: 'Archivo', Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
.mono { font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.app { position: relative; height: 100dvh; max-width: 520px; margin: 0 auto; overflow: hidden; overflow: clip; background: radial-gradient(120% 50% at 50% 100%, rgba(255,107,69,.16), rgba(10,14,12,0) 60%), var(--ink); container-type: inline-size; }
@media (min-width: 560px) { .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }

/* top bar */
.top { position: absolute; left: 0; right: 0; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: max(14px, env(safe-area-inset-top)) 16px 0; font-size: 11px; color: var(--mist); }
.top b { color: var(--paper); font-weight: 600; }
.top .tl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top button { flex: none; }
.top .tb { display: flex; flex: none; gap: 4px; }
.top button { background: none; border: 0; color: var(--mist); font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; padding: 8px 0 8px 8px; cursor: pointer; }

/* ---------- intro ---------- */
.intro { position: absolute; inset: 0; z-index: 10; transition: opacity .5s; }
.intro.gone { opacity: 0; pointer-events: none; }
.bars { position: absolute; left: 16px; right: 16px; top: calc(max(14px, env(safe-area-inset-top)) + 28px); display: flex; gap: 4px; z-index: 12; }
.bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(237,235,228,.18); overflow: hidden; }
.bars i b { display: block; height: 100%; background: var(--paper); transform-origin: left; transform: scaleX(0); }
.bars i.done b { transform: scaleX(1); }
.bars i.cur b { animation: fill 6s linear forwards; }
.intro.paused .bars i.cur b, .intro.paused .kc.in { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
.wipe { position: absolute; inset: 0; z-index: 9; background: var(--gc); clip-path: inset(0 100% 0 0); pointer-events: none; }
.wipe.go { animation: wipe .9s ease-in-out; }
@keyframes wipe { 0% { clip-path: inset(0); opacity: 0; } 45% { clip-path: inset(0); opacity: .14; } 100% { clip-path: inset(0); opacity: 0; } }
.kw, .kc, .knum { transition: opacity .35s ease; } .kw.out, .kc.out, .knum.out { opacity: 0 !important; }
.knum { position: absolute; left: 4cqw; bottom: -4cqw; z-index: 2; font: 800 62cqw/1 'Archivo', sans-serif; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--gc) 35%, transparent); opacity: 0; transform: translateY(10cqw); transition: opacity .7s, transform 1.4s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.knum.in { opacity: 1; transform: none; }
.kw { position: absolute; left: 6cqw; right: 6cqw; top: calc(max(14px, env(safe-area-inset-top)) + 64px); z-index: 6; pointer-events: none; }
.kw .kl { display: inline-block; font: 600 max(11px, 2.8cqw) 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--gc); background: transparent; border: 1.5px solid var(--gc); padding: 2px 8px; border-radius: 4px; opacity: 0; }
.kw b { display: block; margin-top: 3cqw; font: 800 min(15cqw, calc(112cqw / var(--len, 8))) / 0.9 'Archivo', sans-serif; letter-spacing: -.045em; text-transform: uppercase; color: var(--gc); white-space: nowrap; overflow: hidden; }
.kw b span { display: inline-block; transform: translateY(105%); }
.kw .kco { display: block; margin-top: 3.5cqw; font: 800 6.6cqw 'Archivo', sans-serif; letter-spacing: -.02em; color: var(--paper); opacity: 0; }
.kw .kh { margin: 1.2cqw 0 0; max-width: 52cqw; font-size: max(15px, 4cqw); line-height: 1.3; color: rgba(237,235,228,.82); opacity: 0; }
.kw.in .kl { animation: up .6s .1s both; opacity: 1; }
.kw.in b span { animation: rise .8s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(.2s + var(--k) * .045s); }
@keyframes rise { to { transform: none; } }
@keyframes up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.kw.in .kco { animation: up .7s .9s both; opacity: 1; }
.kw.in .kh { animation: up .7s 1.2s both; opacity: 1; }
.kc { position: absolute; right: -6cqw; bottom: 110px; width: 52cqw; aspect-ratio: 9 / 16; border-radius: 3cqw; overflow: hidden; z-index: 4; box-shadow: 0 30px 60px -20px #000, 0 0 0 1px rgba(237,235,228,.12); opacity: 0; transform: translateX(30cqw) rotate(4deg); }
.kc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc.in { animation: kcin 1.1s .4s cubic-bezier(.2,.9,.2,1) forwards, kdrift 5s 1.5s ease-out forwards; }
@keyframes kcin { to { opacity: 1; transform: translateX(0) rotate(-5deg); } }
@keyframes kdrift { from { opacity: 1; transform: rotate(-5deg); } to { opacity: 1; transform: rotate(-6.5deg) scale(1.03); } }
.ictl { position: absolute; left: 16px; right: 16px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 12; display: flex; gap: 10px; }
.pill { min-height: 52px; padding: 0 20px; border-radius: 99px; border: 1px solid rgba(237,235,228,.24); background: rgba(10,14,12,.8); backdrop-filter: blur(8px); font: 600 13px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.pill.main { flex: 1; color: #0D110F; background: var(--paper); border-color: transparent; font: 800 17px 'Archivo', sans-serif; letter-spacing: -.01em; text-transform: none; }

/* ---------- deck ---------- */
.deck { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .5s .1s; }
.deck.on { opacity: 1; pointer-events: auto; }
.dhead { padding: calc(max(14px, env(safe-area-inset-top)) + 34px) 16px 0; }
.dhead .home { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 9px 16px; border-radius: 99px; border: 0; background: var(--paper); color: #0D110F; box-shadow: 0 6px 18px -6px rgba(237,235,228,.35); font: 700 12px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.dhead .home:hover, .dhead .home:focus-visible { background: #fff; outline: 2px solid #FF6B45; outline-offset: 2px; }
#cover { display: none !important; }
.dbars { display: flex; gap: 4px; }
.dbars button { flex: 1; padding: 8px 0; background: none; border: 0; cursor: pointer; }
.dbars button span { display: block; height: 3px; border-radius: 2px; background: rgba(237,235,228,.18); transition: background .3s; }
.dbars button.seen span { background: rgba(237,235,228,.55); }
.dbars button.on span { background: var(--gc); }
.cap { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; min-height: 30px; }
.cap .n { font: 600 22px 'IBM Plex Mono', monospace; color: var(--paper); letter-spacing: 0; }
.cap .ty { font-size: 12px; color: var(--gc); }
.cap .co { margin-left: auto; font-weight: 800; font-size: 16px; text-align: right; min-width: 0; line-height: 1.15; }
.cap .n { white-space: nowrap; }
.who { display: none; margin: 2px 0 8px; font-size: 13px; line-height: 1.35; color: var(--mist); min-height: 18px; }
.who b { color: var(--paper); font-weight: 700; }
.pager { flex: 1; min-height: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pager::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: 8px 16px; min-height: 0; }
.slide .card { height: 100%; max-height: calc((100cqw - 32px) * 16 / 9); aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(237,235,228,.14), 0 30px 60px -24px #000; background: #111; }
.slide .card img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* flip */
.slide { perspective: 1800px; }
.slide .card { position: relative; overflow: visible; background: none; box-shadow: none; container-type: size; cursor: pointer; }
.card .fi { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.8,.3,1); }
.card.on .fi { transform: rotateY(180deg); }
.card .ff, .card .fb { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 0 1px rgba(237,235,228,.14), 0 30px 60px -24px #000; background: #111; }
.card .ff img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card .fb { transform: rotateY(180deg); background: radial-gradient(120% 50% at 50% 0%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%), #0D110F; padding: 5.5cqw 5.5cqw 4cqw; overflow-y: auto; overscroll-behavior: contain; cursor: auto; }
.fb .bh { display: flex; justify-content: space-between; align-items: center; font: 600 max(9px, 2.9cqw) 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.fb .bh .t { background: var(--tc); color: #0D110F; padding: .8cqw 1.8cqw; border-radius: 1.2cqw; }
.bh .tgs { display: flex; gap: 1.4cqw; flex-wrap: wrap; justify-content: flex-end; }
.bh .t2 { color: var(--tc); border: 1.5px solid var(--tc); padding: calc(.8cqw - 1.5px) 1.8cqw; border-radius: 1.2cqw; white-space: nowrap; }
.bh .t { white-space: nowrap; }
.fb h3 { font: 800 max(15px, 5.6cqw)/1.12 'Archivo', sans-serif; letter-spacing: -.01em; margin: 3.2cqw 0 1cqw; color: var(--paper); }
.fb .l { font: 600 max(9px, 2.8cqw) 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--tc); margin: 3.6cqw 0 1.8cqw; }
.fb .nums { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.fb .nums div { border: 1px solid rgba(237,235,228,.1); background: rgba(237,235,228,.04); border-radius: 2.6cqw; padding: 2.4cqw 2.6cqw; }
.fb .nums b { display: block; font: 800 max(14px, 5.4cqw)/1 'Archivo', sans-serif; color: var(--tc); }
.fb .nums span { display: block; font-size: max(10px, 3.1cqw); line-height: 1.3; color: var(--mist); margin-top: 1.2cqw; }
.fb ul { list-style: none; padding: 0; margin: 0; }
.fb li { position: relative; padding-left: 3.4cqw; font-size: max(11.5px, 3.5cqw); line-height: 1.38; color: var(--paper); margin-bottom: 1.2cqw; }
.fb li::before { content: ''; position: absolute; left: 0; top: .6em; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--tc); }
.fb .rd { border-left: 2px solid var(--tc); padding: .4cqw 0 .4cqw 3cqw; margin-bottom: 2.2cqw; font-size: max(11.5px, 3.5cqw); line-height: 1.38; color: var(--paper); }
.fb .rd b { display: block; font: 600 max(9px, 2.7cqw) 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); margin-bottom: .6cqw; }
.fb .src { margin-top: 3cqw; padding-top: 2.6cqw; border-top: 1px solid rgba(237,235,228,.12); font: 600 max(10px, 2.9cqw)/1.5 'IBM Plex Mono', monospace; color: var(--mist); }
.fb .src a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(237,235,228,.35); margin-right: 3cqw; }
.fb .src i { font-style: normal; color: #FFB547; }
.dhead .hrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; }
.dhead .hrow .home { margin: 0; }
.dhead .deep { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; border: 1.5px solid #FF6B45; background: rgba(255,107,69,.12); color: var(--paper); font: 700 12px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.dhead .deep[aria-pressed="true"] { background: #FF6B45; color: #0D110F; }
.deck.atend .dhead .deep { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .card .fi { transition: none; } }

/* back: bigger + scroll cue */
.card .fb { padding-bottom: 0; }
.fb .bh { font-size: max(10.5px, 3.1cqw); }
.fb h3 { font-size: max(17px, 5.9cqw); }
.fb .l { font-size: max(11px, 3.2cqw); margin: 4.4cqw 0 2cqw; }
.fb .nums b { font-size: max(19px, 6.6cqw); }
.fb .nums span { font-size: max(12.5px, 3.7cqw); }
.fb li, .fb .rd { font-size: max(15.5px, 4.7cqw); line-height: 1.38; }
.fb .rd b { font-size: max(11px, 3.1cqw); }
.fb .src { font-size: max(12px, 3.4cqw); padding-bottom: 5cqw; }
.fb .more { position: sticky; bottom: 0; margin: 0 -5.5cqw; padding: 9cqw 0 3.6cqw; text-align: center; background: linear-gradient(to bottom, rgba(13,17,15,0), #0D110F 55%); font: 700 max(11.5px, 3.3cqw) 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); pointer-events: none; transition: opacity .3s; }
.fb .more span { display: inline-block; padding: 1.6cqw 3.6cqw; border-radius: 99px; background: var(--tc); color: #0D110F; animation: nudge 1.6s ease-in-out infinite; }
.fb.end .more { opacity: 0; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .fb .more span { animation: none; } }

.fb .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; }
.fb .nums div { min-width: 0; overflow: hidden; }
.fb .nums div { padding: 2cqw 2cqw; border-radius: 2.2cqw; }
.fb .nums b { font-size: max(15px, 4.8cqw) !important; letter-spacing: -.01em; line-height: 1.05; }
.fb .nums span { font-size: max(11px, 3.3cqw) !important; line-height: 1.25; color: rgba(237,235,228,.8); }
.fb .rd.watch { font-weight: 600; border-left-width: 3px; }
/* compact deck header: bigger card */
.dhead { padding-top: calc(max(14px, env(safe-area-inset-top)) + 28px); }
.dhead .hrow { margin: 0 0 2px; }
.dhead .home { padding: 8px 14px; font-size: 11px; }
.dhead .deep { padding: 7px 14px; font-size: 11px; }
.dbars button { padding: 5px 0; }
.cap { margin-top: 2px; min-height: 0; align-items: center; gap: 8px; white-space: nowrap; }
.cap .n { font-size: 15px; }
.cap .co { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide { padding: 6px 12px; }
.slide .card { max-height: calc((100cqw - 24px) * 16 / 9); }
.dfoot { padding-top: 6px; grid-template-columns: 46px 1fr 46px; }
.dfoot .nav, .dfoot .cta { min-height: 46px; }
/* the other side is visible */
.card .ff::after { content: '↻'; position: absolute; right: 0; bottom: 0; width: 11cqw; height: 11cqw; background: linear-gradient(135deg, transparent 50%, #FF6B45 50%); color: #0D110F; font: 800 3.8cqw/1 'Archivo', sans-serif; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 1.6cqw 1.4cqw 0; border-top-left-radius: 2cqw; box-shadow: -3px -3px 10px rgba(0,0,0,.4); }
.card .ff::before { content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; }
.slide .card { border-radius: 16px; }
@keyframes peek { 0%, 50%, 100% { transform: rotateY(0); } 22% { transform: rotateY(-10deg); } 72% { transform: rotateY(-7deg); } }
.card.peek .fi { animation: peek 1.6s cubic-bezier(.45,.05,.55,.95) 1; }
.card .ff::after { display: none !important; }
#deep.hint { animation: dhint 1.6s ease-in-out 2; }
@keyframes dhint { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,69,0); } 50% { box-shadow: 0 0 0 6px rgba(255,107,69,.35); background: rgba(255,107,69,.22); } }
@media (prefers-reduced-motion: reduce) { .card.peek .fi, #deep.hint { animation: none; } }

.slide.end { flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 8px 22px 12px; overflow-y: auto; }
.slide.end > :first-child { margin-top: auto; } .slide.end > :last-child { margin-bottom: auto; }
.end h2 { margin: 0; font-size: clamp(28px, 8.6cqw, 44px); line-height: .98; letter-spacing: -.035em; }
.end h2 em { font-style: normal; color: var(--orange); }
.end p { margin: 10px 0 16px; font-size: 15px; line-height: 1.45; color: rgba(237,235,228,.8); }
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { font-size: 11px; color: var(--mist); }
.form input { min-height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(237,235,228,.24); background: rgba(237,235,228,.05); color: var(--paper); font: 500 17px 'Archivo', sans-serif; }
.form .go { min-height: 52px; border: 0; border-radius: 14px; background: var(--orange); color: #0D110F; font: 800 18px 'Archivo', sans-serif; cursor: pointer; }
.form .ok { display: none; padding: 16px; border-radius: 14px; background: rgba(110,231,168,.12); color: #B8F2D0; font-size: 15px; }
.form.done .ok { display: block; } .form.done input, .form.done .go, .form.done label { display: none; }
.end .alt { display: flex; gap: 10px; margin-top: 12px; }
.end .alt button { flex: 1; min-height: 44px; padding: 0 8px; border-radius: 99px; border: 1px solid rgba(237,235,228,.24); background: none; font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.end .shr { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.end .shr .mono { font-size: 11px; color: var(--mist); }
.end .shi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.end .shi { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.end a.sh { text-decoration: none; }
.end .shi .sh { aspect-ratio: auto; max-height: none; min-height: 64px; padding: 10px 6px; gap: 6px; grid-auto-flow: row; align-content: center; justify-items: center; border-radius: 16px; border-color: rgba(237,235,228,.32); background: rgba(237,235,228,.07); font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.end .shi .sh svg { width: 26px; height: 26px; }
.end .shi .sh[data-sh="wa"] { background: var(--paper); color: #0D110F; border-color: var(--paper); }
.end .shi .sh[data-sh="wa"]:hover { background: #fff; }
.end .shr > .mono { color: var(--paper) !important; font-size: 12px !important; }
@media (max-height: 700px) { .end .shi .sh { min-height: 48px; padding: 5px 6px; gap: 3px; } .end .shi .sh svg { width: 22px; height: 22px; } }
.end .shi .sh { border: 1.5px solid rgba(237,235,228,.6); background: rgba(237,235,228,.12); color: var(--paper); font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.end .shi .sh svg { color: var(--orange); }
.end .shi .sh[data-sh="wa"] { background: var(--paper); border-color: var(--paper); color: #0D110F; }
.end .shi .sh[data-sh="wa"] svg { color: #0D110F; }
.end .shi .sh:hover { background: rgba(237,235,228,.2); border-color: var(--paper); }
.end button.over#again { margin-top: 12px; padding: 10px 20px; border: 1.5px solid rgba(237,235,228,.45); border-radius: 99px; color: var(--paper); background: rgba(237,235,228,.06); font-size: 12.5px; }
.end button.over#again:hover { border-color: var(--paper); background: rgba(237,235,228,.12); }
@media (max-height: 700px) { .end button.over#again { margin-top: 6px; padding: 6px 16px; } }
.end .sh { aspect-ratio: 1; max-height: 52px; border-radius: 14px; border: 1px solid rgba(237,235,228,.22); background: rgba(237,235,228,.05); color: var(--paper); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.end .sh:hover { background: rgba(237,235,228,.12); border-color: rgba(237,235,228,.4); }
.end .over { align-self: center; margin-top: 8px; background: none; border: 0; color: var(--mist); font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 8px; }
.end .fine { margin-top: 14px; font-size: 12px; color: var(--mist); }
.dfoot { display: grid; grid-template-columns: 52px 1fr 52px; gap: 10px; padding: 8px 16px max(18px, env(safe-area-inset-bottom)); }
.dfoot .nav { min-height: 52px; border-radius: 99px; border: 1px solid rgba(237,235,228,.24); background: rgba(237,235,228,.04); font-size: 24px; line-height: 1; cursor: pointer; }
.dfoot .nav:disabled { opacity: .25; cursor: default; }
.dfoot .cta { min-height: 52px; border: 0; border-radius: 99px; background: var(--orange); color: #0D110F; font: 800 16px 'Archivo', sans-serif; cursor: pointer; }
.deck.atend .dfoot .cta { visibility: hidden; }
.toast { position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 20px); z-index: 40; padding: 10px 16px; border-radius: 99px; background: var(--paper); color: #0D110F; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- welcome (two variants for review) ---------- */
.wel { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; padding: calc(max(14px, env(safe-area-inset-top)) + 40px) 20px max(20px, env(safe-area-inset-bottom)); background: inherit; transition: opacity .5s, transform .5s; overflow-y: auto; }
.wel.gone { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.wel[hidden] { display: none; }
.wel .kick { font-size: 11px; color: var(--orange); }
.wel h1 { margin: 10px 0 0; font-size: clamp(34px, 10.4cqw, 52px); line-height: .98; letter-spacing: -.035em; font-weight: 800; }
.wel h1 em { font-style: normal; color: var(--orange); }
.wel .sub { margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: rgba(237,235,228,.78); }
.wel .start { min-height: 58px; border: 0; border-radius: 99px; background: var(--orange); color: #0D110F; font: 800 18px 'Archivo', sans-serif; cursor: pointer; margin-top: 18px; }
.wel .later { margin-top: 10px; text-align: center; font-size: 12px; color: var(--mist); }
.wel .a1 { animation: up .6s both; animation-delay: var(--d, 0s); }
/* E: kinetic prelude (what / who / for whom as three beats) */
.we { padding: 0; overflow: hidden; }
.we .eb { position: absolute; left: 16px; right: 16px; top: calc(max(14px, env(safe-area-inset-top)) + 28px); display: flex; gap: 4px; z-index: 3; }
.we .eb i { flex: 1; height: 3px; border-radius: 2px; background: rgba(237,235,228,.18); overflow: hidden; }
.we .eb i b { display: block; height: 100%; background: var(--paper); transform-origin: left; transform: scaleX(0); }
.we .eb i.done b { transform: scaleX(1); } .we .eb i.cur b { animation: fill 2.8s linear forwards; }
.we .beat { position: absolute; left: 6cqw; right: 6cqw; top: calc(max(14px, env(safe-area-inset-top)) + 70px); }
.we .beat .q { display: inline-block; font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #0D110F; background: var(--bc); padding: 4px 9px; border-radius: 4px; }
.we .beat .w { display: block; margin-top: 4cqw; font: 800 min(22cqw, calc(118cqw / var(--len, 6))) / .88 'Archivo', sans-serif; letter-spacing: -.05em; text-transform: uppercase; color: var(--bc); white-space: nowrap; overflow: hidden; }
.we .beat .w span { display: inline-block; transform: translateY(105%); }
.we .beat.in .w span { animation: rise .8s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(.15s + var(--k) * .05s); }
.we .beat .s { margin: 5cqw 0 0; max-width: 80cqw; font-size: clamp(19px, 5.6cqw, 26px); line-height: 1.3; color: rgba(237,235,228,.88); opacity: 0; }
.we .beat.in .s { animation: up .7s .8s both; }
.we .beat .s b { color: var(--paper); }
.we .ghost { position: absolute; right: -4cqw; bottom: 90px; font: 800 70cqw/1 'Archivo', sans-serif; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--bc) 30%, transparent); pointer-events: none; transition: opacity .5s; }
.we .ewipe { position: absolute; inset: 0; z-index: 2; background: var(--bc); clip-path: inset(0 100% 0 0); pointer-events: none; }
.we .ewipe.go { animation: wipe .9s cubic-bezier(.65,0,.35,1); }
.we .ectl { position: absolute; left: 16px; right: 16px; bottom: max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.we .ectl .start { margin: 0; }
.we .ectl small { text-align: center; font-size: 12px; color: var(--mist); }
/* G: video-style cover */
.wg { padding: 0; justify-content: flex-end; }
.wg .bg { position: absolute; inset: -6%; background-size: cover; background-position: center 30%; filter: blur(14px) saturate(1.1) brightness(.5); transform: scale(1.08); animation: kb 14s ease-out forwards; }
@keyframes kb { to { transform: scale(1); } }
.wg .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,12,.35) 0%, rgba(10,14,12,.1) 35%, rgba(10,14,12,.85) 68%, #0A0E0C 100%); }
.wg .stack { position: absolute; left: 50%; top: 30%; width: min(46cqw, 26dvh); aspect-ratio: 9 / 16; transform: translate(-50%, -50%); }
.wg .stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 0 0 1px rgba(237,235,228,.18), 0 30px 60px -20px #000; }
.wg .stack img:nth-child(1) { transform: rotate(-8deg) translateX(-18%); opacity: .55; }
.wg .stack img:nth-child(2) { transform: rotate(8deg) translateX(18%); opacity: .55; }
.wg .play { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%; border: 0; background: var(--orange); color: #0D110F; font-size: 30px; padding-left: 6px; cursor: pointer; box-shadow: 0 0 0 10px rgba(255,107,69,.22), 0 20px 40px -10px #000; z-index: 2; }
.wg .gtxt { position: relative; z-index: 2; padding: 0 20px max(20px, env(safe-area-inset-bottom)); }
.wg .gtxt .dur { font-size: 11px; color: var(--mist); }
.wg .gtxt h1 { margin-top: 8px; }
.wg .gtxt .start { width: 100%; }
.wg .gpts { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; }
.wg .gpts div { display: flex; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.35; }
.wg .gpts .q { flex: none; width: 68px; font-size: 11px; color: var(--gc2); }
/* H: slot machine (what / who / for whom reels lock in) */
.wh { padding-top: calc(max(14px, env(safe-area-inset-top)) + 44px); }
.wh .mach { margin: 18px -4px auto; border-radius: 22px; padding: 14px 12px; background: linear-gradient(180deg, #1A1F1C, #0E1210); border: 1px solid rgba(237,235,228,.16); box-shadow: inset 0 2px 0 rgba(255,255,255,.05), 0 30px 60px -30px #000; }
.wh .reel { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; }
.wh .reel + .reel { margin-top: 10px; }
.wh .reel .q { font-size: 11px; color: var(--rc); text-align: right; }
.wh .win { position: relative; height: clamp(52px, 15cqw, 72px); overflow: hidden; border-radius: 12px; background: #050706; box-shadow: inset 0 0 0 1px rgba(237,235,228,.1), inset 0 10px 14px -8px #000, inset 0 -10px 14px -8px #000; }
.wh .strip { position: absolute; left: 0; right: 0; top: 0; transform: translateY(0); }
.wh .strip span { display: flex; align-items: center; height: clamp(52px, 15cqw, 72px); padding: 0 12px; font: 800 clamp(22px, 7.4cqw, 34px) 'Archivo', sans-serif; letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; color: rgba(237,235,228,.5); }
.wh .strip span:last-child { color: var(--rc); }
.wh .reel.lock .win { box-shadow: inset 0 0 0 2px var(--rc), 0 0 24px -4px var(--rc); transition: box-shadow .3s; }
.wh .reel .sub { grid-column: 2; font-size: 14px; line-height: 1.35; color: rgba(237,235,228,.8); padding: 6px 4px 0; opacity: 0; transition: opacity .5s .2s; }
.wh .reel.lock .sub { opacity: 1; }
.wh .again { align-self: center; margin-top: 10px; background: none; border: 0; color: var(--mist); font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 8px; }
/* I: scratch card */
.wi .scr { position: relative; margin: 18px 0 auto; border-radius: 22px; overflow: hidden; border: 1px solid rgba(237,235,228,.16); background: #111613; touch-action: none; }
.wi .under { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.wi .under .ln .q { display: block; font-size: 11px; color: var(--uc); }
.wi .under .ln b { display: block; margin-top: 2px; font-size: clamp(26px, 8cqw, 38px); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; }
.wi .under .ln span.s { display: block; margin-top: 4px; font-size: 14px; color: rgba(237,235,228,.72); }
.wi canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; transition: opacity .6s; }
.wi .scr.clear canvas { opacity: 0; pointer-events: none; }
.wi .hint2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; text-align: center; color: #0D110F; transition: opacity .3s; }
.wi .hint2 b { display: block; font: 800 26px/1 'Archivo', sans-serif; letter-spacing: -.02em; }
.wi .hint2 span { display: block; margin-top: 6px; font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.wi .hint2 .fing { font-size: 34px; margin-top: 10px; animation: wig 1.6s ease-in-out infinite; }
@keyframes wig { 0%, 100% { transform: translateX(-14px) rotate(-8deg); } 50% { transform: translateX(14px) rotate(8deg); } }
.wi .scr.touched .hint2 { opacity: 0; }
.wi .rv { align-self: center; margin-top: 8px; background: none; border: 0; color: var(--mist); font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 8px; }
.wi .start { opacity: .35; pointer-events: none; transition: opacity .4s; }
.wi.open .start { opacity: 1; pointer-events: auto; }
/* J: strategic briefing (light, business) */
.wj { background: #F3F0E8; color: #14181A; padding-top: calc(max(14px, env(safe-area-inset-top)) + 40px); }
.wj ~ .top, .app.light .top { color: #6B706C; } .app.light .top b { color: #14181A; }
.wj .kick { color: #C2410C; }
.wj h1 { color: #14181A; font-size: clamp(30px, 9cqw, 44px); }
.wj h1 em { color: #C2410C; }
.wj .why { margin: 14px 0 0; font-size: 15.5px; line-height: 1.45; color: #3D4340; }
.wj .bens { margin: 16px 0 0; border-top: 1.5px solid #14181A; }
.wj .ben { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(20,24,26,.15); }
.wj .ben .n { font: 600 13px 'IBM Plex Mono', monospace; color: #C2410C; padding-top: 3px; }
.wj .ben b { display: block; font-size: 17px; letter-spacing: -.01em; }
.wj .ben span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: #4A504C; }
.wj .rit { margin: 16px 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wj .rit div { border-radius: 10px; padding: 9px 10px; border: 1px solid rgba(20,24,26,.18); font-size: 12px; line-height: 1.3; color: #4A504C; }
.wj .rit div b { display: block; font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #14181A; }
.wj .rit .now { background: #14181A; border-color: #14181A; color: #EDEBE4; } .wj .rit .now b { color: #FF6B45; }
.wj .rit .nx { border-style: dashed; }
.wj .start { background: #14181A; color: #F3F0E8; }
.wj .later { color: #6B706C; }
/* K: why the habit pays (pattern builds up) */
.wk .grid { margin: 16px 0 0; display: grid; grid-template-columns: 84px repeat(6, 1fr); gap: 3px; align-items: center; font-size: 11px; }
.wk .grid .h { font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--mist); text-align: center; }
.wk .grid .h.cur { color: var(--orange); }
.wk .grid .t { color: rgba(237,235,228,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.wk .grid .c { height: 15px; border-radius: 3px; background: rgba(237,235,228,.06); }
.wk .grid .c.v1 { background: rgba(255,107,69,.4); } .wk .grid .c.v2 { background: var(--orange); }
.wk .grid .c.f { background: none; border: 1px dashed rgba(237,235,228,.18); }
.wk .grid .c { opacity: 0; animation: up .4s both; animation-delay: var(--d); }
.wk .cap2 { margin: 8px 0 0; font-size: 12.5px; color: var(--mist); }
.wk .cap2 b { color: var(--paper); font-weight: 600; }
.wk .rs { margin: 14px 0 auto; display: flex; flex-direction: column; gap: 8px; }
.wk .rs div { display: flex; gap: 10px; font-size: 15px; line-height: 1.35; }
.wk .rs div i { flex: none; font-style: normal; color: var(--orange); font-weight: 800; }
.wk .two { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.wk .two .start { margin: 0; }
.wk .rem { display: flex; align-items: center; justify-content: center; color: var(--paper); text-decoration: none; min-height: 50px; border-radius: 99px; border: 1px solid rgba(237,235,228,.3); background: none; font: 600 13px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
/* L: pick your role, benefits follow */
.wl .roles { margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.wl .role { text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(237,235,228,.04); cursor: pointer; transition: border-color .3s, background .3s, transform .3s; }
.wl .role b { font-size: 20px; letter-spacing: -.015em; }
.wl .role .ck { grid-row: span 2; align-self: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(237,235,228,.3); display: grid; place-items: center; font-size: 14px; color: transparent; transition: all .3s; }
.wl .role span.d { font-size: 14px; line-height: 1.4; color: rgba(237,235,228,.72); }
.wl .role[aria-pressed="true"] { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); }
.wl .role[aria-pressed="true"] .ck { background: var(--rc); border-color: var(--rc); color: #0D110F; }
.wl .yours { margin: 14px 0 auto; min-height: 92px; }
.wl .yours .h { font-size: 11px; color: var(--mist); }
.wl .yours ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wl .yours li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; animation: up .4s both; animation-delay: var(--d); }
.wl .yours li i { font-style: normal; flex: none; width: 104px; font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--tc); }
.wl .start[disabled] { opacity: .35; cursor: default; }
/* M: one real move as the hook */
.wm { padding: 0; }
.wm .hero { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.wm .hero img { position: absolute; left: 50%; top: calc(max(14px, env(safe-area-inset-top)) + 34px); width: min(78cqw, 46dvh * 9 / 16); transform: translateX(-50%) rotate(-3deg); border-radius: 16px; box-shadow: 0 0 0 1.5px #C9A7FF, 0 40px 70px -30px #000; animation: mfade .8s both; }
@keyframes mfade { from { opacity: 0; } }
.wm .low .start { width: 100%; }
.wm .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg, rgba(10,14,12,0), #0A0E0C 85%); }
.wm .low { position: relative; z-index: 2; margin-top: -110px; padding: 0 20px max(20px, env(safe-area-inset-bottom)); }
.wm .tag { display: inline-block; font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #0D110F; background: #C9A7FF; padding: 4px 8px; border-radius: 4px; }
.wm h1 { margin-top: 10px; }
.wm .one { margin: 10px 0 0; font-size: 16px; color: rgba(237,235,228,.82); }
.wm .one b { color: var(--orange); }
.wm .why2 { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.wm .why2 .h { font-size: 11px; color: var(--mist); }
.wm .why2 div { font-size: 14.5px; line-height: 1.4; color: rgba(237,235,228,.85); }
.wm .why2 div b { color: var(--paper); }
/* N / O: the mockup hero, on a phone */
.wn, .wo { padding-top: calc(max(14px, env(safe-area-inset-top)) + 40px); background: radial-gradient(90% 40% at 100% 20%, rgba(255,107,69,.22), rgba(10,14,12,0) 70%), #0A0E0C; }
.wn h1, .wo h1 { font-size: clamp(42px, 13.4cqw, 64px); line-height: .94; letter-spacing: -.045em; margin-top: 12px; }
.wn .p, .wo .p { margin: 14px 0 0; font-size: 16px; line-height: 1.45; color: rgba(237,235,228,.8); }
.hfan { position: relative; flex: 1; min-height: 190px; margin: 6px -20px 0; }
.hfan img { position: absolute; left: 50%; top: 46%; width: min(34cqw, 24dvh * 9 / 16 * 1.5); aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 1px rgba(237,235,228,.14), 0 26px 40px -18px #000; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(var(--s, 1)); }
.hfan .floor { position: absolute; left: 25%; right: 25%; bottom: 4%; height: 18px; border-radius: 50%; background: radial-gradient(rgba(255,107,69,.35), transparent 70%); filter: blur(6px); }
.hpulse { display: block; width: 100%; height: 34px; margin: 2px 0 10px; overflow: visible; }
.hpulse path { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linejoin: round; }
.wn .sub2, .wo .sub2 { margin-top: 10px; display: flex; justify-content: center; }
.wn .sub2 button, .wo .sub2 button { background: none; border: 0; color: var(--paper); font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 8px; }
.wn .start, .wo .start { margin-top: 0; }
/* O: same hero, animated */
.wo h1 .wd { display: inline-block; opacity: 0; transform: translateY(40%); animation: rise2 .7s cubic-bezier(.2,.9,.2,1) both; animation-delay: var(--d); }
@keyframes rise2 { to { opacity: 1; transform: none; } }
.wo .hpulse path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s 1s ease-in-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.wo .hfan img { opacity: 0; animation: pop .8s cubic-bezier(.2,1.3,.4,1) forwards; animation-delay: var(--dd); }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 40%) rotate(0deg) scale(.6); } to { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(var(--s, 1)); } }
.wo .lay { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.wo .lay span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); opacity: 0; animation: up .5s both; animation-delay: var(--d); }
.wo .lay i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
/* P: final welcome. O's headline, N's text, a 3D card stage in its own band */
.wp { padding-top: calc(max(14px, env(safe-area-inset-top)) + 40px); background: radial-gradient(90% 40% at 100% 20%, rgba(255,107,69,.22), rgba(10,14,12,0) 70%), #0A0E0C; }
.wp h1 { font-size: clamp(38px, 12cqw, 58px); line-height: .94; letter-spacing: -.045em; margin-top: 12px; }
.wp h1 .wd { display: inline-block; opacity: 0; transform: translateY(40%); animation: rise2 .7s cubic-bezier(.2,.9,.2,1) both; animation-delay: var(--d); }
.wp .p { margin: 12px 0 0; font-size: 17.5px; line-height: 1.42; color: rgba(237,235,228,.92); position: relative; z-index: 2; }
.wp .pts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 5px; font-size: 12px; white-space: nowrap; line-height: 1.35; color: rgba(237,235,228,.78); position: relative; z-index: 2; }
.wp .pts li { padding: 4px 8px 4px 19px; position: relative; border: 1px solid var(--line); border-radius: 99px; color: var(--paper); }
.wp .pts li::before { content: ''; position: absolute; left: 8px; top: 50%; margin-top: -3.5px; width: 7px; height: 7px; border-radius: 2px; background: var(--orange); }
.wp .pts b { color: var(--paper); font-weight: 600; }
.orb { position: relative; flex: 1; min-height: 200px; margin: 8px -20px 0; perspective: 1100px; perspective-origin: 50% 35%; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.orb.drag { cursor: grabbing; }
.orb-ring { position: absolute; left: 50%; top: 20px; width: var(--cw, 150px); height: calc(var(--cw, 150px) * 16 / 9); margin-left: calc(var(--cw, 150px) / -2); transform-style: preserve-3d; transform: translateZ(calc(var(--R, 260px) * -1)) rotateX(-6deg) rotateY(var(--a, 0deg)); }
.orb-card { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; transform: rotateY(calc(var(--i) * 36deg)) translateZ(var(--R, 260px)); border: 1px solid rgba(237,235,228,.14); background: #0D110F; box-shadow: 0 30px 50px -20px rgba(0,0,0,.8); }
.orb-card img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.orb-card::after { content: ''; position: absolute; inset: 0; background: #050706; opacity: var(--dim, 0); pointer-events: none; }
.orb-card.front { border-color: var(--cc); box-shadow: 0 0 0 1.5px var(--cc), 0 30px 60px -16px var(--ccg, rgba(255,107,69,.45)); }
.orb-floor { position: absolute; left: 50%; bottom: 0; width: 120%; height: 70px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--ccg, rgba(255,107,69,.35)), rgba(255,107,69,0)); filter: blur(6px); pointer-events: none; }
.orb-hint { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--mist); pointer-events: none; }
.orb-cap { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: var(--paper); cursor: pointer; padding: 4px 8px 8px; text-align: center; }
.orb-cap .t { font-size: 10px; padding: 2px 7px; border-radius: 4px; color: #0D110F; font-weight: 600; }
.orb-cap .h { font: 700 16px/1.2 'Archivo', sans-serif; min-height: 1.2em; }
.orb-cap:focus-visible, .orb:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 10px; }
.wp .hpulse { display: none; }
.wp .hpulse path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s 1.6s ease-in-out forwards; }

@media (max-height: 700px) { .wp .pts, .orb-hint { display: none; } .orb { margin-top: 4px; } .orb-ring { top: 4px; } .wp h1 { font-size: clamp(36px, 11.4cqw, 52px); } .wp .p { font-size: 16px; margin-top: 10px; } .wp .start { min-height: 52px; } }
/* Q: coverflow */
.cf, .sk { position: relative; flex: 1; min-height: 200px; margin: 8px -20px 0; perspective: 900px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; overflow: hidden; }
.cf-in, .sk-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.cf .fc, .sk .fc { position: absolute; left: 50%; top: 50%; width: var(--cw, 150px); height: calc(var(--cw, 150px) * 16 / 9); margin: calc(var(--cw, 150px) * -8 / 9) 0 0 calc(var(--cw, 150px) / -2); border-radius: 14px; overflow: hidden; border: 1px solid rgba(237,235,228,.14); background: #0D110F; box-shadow: 0 30px 50px -20px rgba(0,0,0,.85); transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s, filter .7s; }
.cf .fc img, .sk .fc img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.cf .fc.front, .sk .fc.front { border-color: var(--cc); box-shadow: 0 0 0 1.5px var(--cc), 0 30px 60px -16px var(--ccg, rgba(255,107,69,.45)); }
.cf .fc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,6,var(--sh, 0)), rgba(5,7,6,calc(var(--sh, 0) * .4))); pointer-events: none; transition: opacity .7s; }
.cf .fc { -webkit-box-reflect: below 6px linear-gradient(transparent 70%, rgba(255,255,255,.18)); }
/* R: depth stack */
.sk { perspective: 800px; perspective-origin: 50% 20%; }
.sk .fc.gone { transform: translate3d(-140%, 10%, 80px) rotate(-18deg) !important; opacity: 0 !important; }
/* S / T: cards fly to the sides */
.fl { position: relative; flex: 1; min-height: 200px; margin: 8px -20px 0; perspective: 900px; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; overflow: hidden; }
.fl-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.fl .fc { position: absolute; left: 50%; top: 50%; width: var(--cw, 150px); height: calc(var(--cw, 150px) * 16 / 9); margin: calc(var(--cw, 150px) * -8 / 9) 0 0 calc(var(--cw, 150px) / -2); border-radius: 14px; overflow: hidden; border: 1px solid rgba(237,235,228,.14); background: #0D110F; box-shadow: 0 30px 50px -20px rgba(0,0,0,.85); transition: transform .75s cubic-bezier(.2,.8,.2,1), opacity .6s, filter .6s; will-change: transform; }
.fl .fc.nt { transition: none; }
.fl .fc img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.fl .fc.front { border-color: var(--cc); box-shadow: 0 0 0 1.5px var(--cc), 0 30px 60px -16px var(--ccg, rgba(255,107,69,.45)); }
.fl.fb .fc { transition: transform 1s cubic-bezier(.45,.05,.2,1), opacity .8s, filter .8s; }

.clar { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; margin-top: 14px; padding: 5px 16px 5px 5px; border-radius: 99px; background: rgba(255,107,69,.08); border: 1px solid rgba(255,107,69,.38); color: var(--paper); }
.clar .ic { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--orange); display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(255,107,69,.14); }
.clar svg { width: 20px; height: 10px; }
.clar path { fill: none; stroke: #0D110F; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30 120; stroke-dashoffset: 30; animation: cbeat 1.8s cubic-bezier(.45,.05,.55,.95) 1s infinite; }
@keyframes cbeat { from { stroke-dashoffset: 30; } to { stroke-dashoffset: -62; } }
.clar path.pb { stroke: #0D110F; stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.clar path.ps { stroke: #FFF4EC; stroke-width: 2.6; stroke-dasharray: 16 120; filter: drop-shadow(0 0 1.5px #fff); }
.clar .ic { animation: cring 1.8s ease-out 1s infinite; }
@keyframes cring { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,107,69,.14); } 45% { box-shadow: 0 0 0 6px rgba(255,107,69,.24); } }
.clar b { font: 700 15.5px/1 'Archivo', sans-serif; letter-spacing: -.01em; }
.clar .sep { width: 1px; height: 14px; background: rgba(237,235,228,.28); }
.clar em { font: 600 12px/1 'IBM Plex Mono', monospace; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .clar path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } .clar .ic { animation: none; } }
@media (max-height: 700px) { .clar { margin-top: 8px; padding: 4px 12px 4px 4px; gap: 8px; } .clar .ic { width: 24px; height: 24px; } .clar b { font-size: 13.5px; } .clar em { font-size: 10.5px; } }
/* keep the start button on screen on short phones */
.wp .orb, .wp .cf, .wp .sk, .wp .fl { min-height: 120px; }
.wp [data-start] { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 6; box-shadow: 0 -10px 24px 6px #0A0E0C; flex: none; }
@media (max-height: 700px) { .wp .orb-cap .h { font-size: 14px; } .wp .orb-cap { padding-bottom: 4px; } .wp .sub2 { margin-top: 0 !important; } .wp .sub2 button { padding: 4px !important; } .wp h1 { font-size: clamp(32px, 10.4cqw, 46px) !important; } }
/* U / V: big cards that fill the lower half, start button floats over them */
.wbig .hand, .wbig .run { position: relative; z-index: 1; flex: 1; min-height: 220px; margin: 10px -20px -96px; overflow: hidden; }
.wbig [data-start] { position: sticky; z-index: 8; }
.wbig [data-start] { margin-top: 0; }
.wbig .sub2 { position: relative; z-index: 6; background: #0A0E0C; margin: 0 -20px; padding-bottom: 2px; }
.wbig [data-start] { box-shadow: 0 -30px 40px 10px rgba(10,14,12,.85); }
.wl11 ul { display: flex; flex-direction: column; gap: 7px; }
.wl11 li.si { grid-template-columns: 54px 1fr auto !important; gap: 12px !important; padding: 8px 10px 8px 8px !important; border: 0; border-radius: 14px; background: linear-gradient(180deg, rgba(237,235,228,.05), rgba(237,235,228,.02)); box-shadow: inset 0 0 0 1px rgba(237,235,228,.12); }
.wl11 li.si .nm > span { color: var(--sc) !important; }
.wl11 .sic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--sf), rgba(0,0,0,0) 75%); }
.wl11 .sic svg { width: 44px; height: 44px; overflow: visible; }
.wl11 .sic .s { stroke: var(--sc); stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; } .wl11 .sic .f { fill: var(--sf); } .wl11 .sic .m { stroke: var(--sm); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.wl11 li.si .st.n { background: #EDEBE4; color: #0D110F; border-radius: 5px; letter-spacing: .1em; }
.wl11 .mt4 { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-left: 8px; font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: .06em; color: var(--mist); text-transform: uppercase; white-space: nowrap; }
.wl11 .mt4 .seg { display: flex; gap: 3px; }
.wl11 .mt4 i { width: 11px; height: 5px; border-radius: 3px; background: rgba(237,235,228,.16); }
.wl11 .mt4 i.on { background: var(--sc); box-shadow: 0 0 6px var(--sm); }
.wl11 .onw { margin-top: 8px; border: 1.5px dashed rgba(237,235,228,.22); border-radius: 14px; padding: 9px 12px; font-size: 12.5px; line-height: 1.35; color: #C9CCC6; }
.wl11 .onw b { color: var(--paper); }
@media (max-height: 700px) { .wl11 ul { gap: 5px; } .wl11 li.si { grid-template-columns: 40px 1fr auto !important; gap: 9px !important; padding: 5px 8px 5px 5px !important; } .wl11 .sic { width: 40px; height: 40px; } .wl11 .sic svg { width: 34px; height: 34px; } }
@media (max-height: 700px) and (min-height: 590px) { .wl11 li.si { grid-template-columns: 44px 1fr auto !important; padding: 6px 8px 6px 6px !important; } .wl11 .sic { width: 44px; height: 44px; } .wl11 .sic svg { width: 37px; height: 37px; } }
@media (max-height: 700px) and (min-height: 630px) { .wl11 .wbox .nxt { display: block; font-size: 12.5px; margin: 8px 0 6px; } }
@media (max-height: 700px) { .wl11 .wbox h2 { font-size: 20px; line-height: 1.1; } .wl11 .wbox li.si { padding-top: 4px !important; padding-bottom: 4px !important; } }
@media (max-height: 700px) and (min-height: 680px) { .wl11 .wbox .sum { display: block; font-size: 12.5px; margin-top: 6px; } }
.wl11 ul { gap: 5px; } .wl11 .wbox li.si { padding-top: 6px !important; padding-bottom: 6px !important; }
@media (max-height: 700px) { .wl11 ul { gap: 3px; } .wl11 .wbox li.si { padding-top: 3px !important; padding-bottom: 3px !important; } }
.wu .start[data-start] { display: block; width: auto; min-height: 46px; padding: 0 28px; margin-left: auto !important; margin-right: auto !important; font-size: 16px; box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08) inset; }
/* U: hand of cards */
.hand { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.hand-in { position: absolute; inset: 0; }
.hand .hc { position: absolute; left: 50%; top: 58px; width: var(--cw); height: calc(var(--cw) * 16 / 9); margin-left: calc(var(--cw) / -2); border-radius: 16px; overflow: hidden; border: 1px solid rgba(237,235,228,.16); background: #0D110F; box-shadow: -10px 20px 40px -12px rgba(0,0,0,.9); transform-origin: 50% calc(100% + var(--R)); transition: opacity .5s, border-color .6s, box-shadow .6s; backface-visibility: hidden; will-change: transform; }
.hand .hc::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.hand .hc img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.hand .hc.front { border-color: var(--ccg, rgba(255,107,69,.5)); box-shadow: 0 24px 50px -16px var(--ccg, rgba(255,107,69,.5)); }
.hand-cap { position: absolute; left: 0; right: 0; top: 2px; display: flex; justify-content: center; pointer-events: none; z-index: 40; }
.hand-cap .tagp { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; line-height: 1.2; border-radius: 99px; background: rgba(10,14,12,.92); border: 1px solid color-mix(in srgb, var(--hc, #FF6B45) 45%, transparent); box-shadow: 0 0 14px -8px var(--hc, #FF6B45), 0 8px 18px -8px #000; font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); white-space: nowrap; }
.hand-cap .tagp b { padding: 3px 8px; border-radius: 99px; background: var(--hc, #FF6B45); color: #0D110F; font-weight: 600; }
.hand-cap .tagp i { font-style: normal; color: var(--mist); font-size: 10px; }
.hand-cap .tagp.pop { animation: capPop .45s ease-out; }
@keyframes capPop { 0% { transform: translateY(3px); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* V: runway of cards flowing toward the viewer */
.run { perspective: 700px; perspective-origin: 50% 10%; }
.run-plane { position: absolute; left: 50%; top: 0; bottom: 0; width: calc(var(--cw) * 2 + 18px); margin-left: calc(var(--cw) * -1 - 9px); transform-origin: 50% 100%; transform: rotateX(42deg); transform-style: preserve-3d; overflow: visible; }
.run-track { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; animation: flow var(--dur, 40s) linear infinite; }
@keyframes flow { from { transform: translateY(0); } to { transform: translateY(50%); } }
.run:hover .run-track, .run.hold .run-track { animation-play-state: paused; }
.run .rc { aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; border: 1px solid rgba(237,235,228,.16); box-shadow: 0 0 0 1px var(--cc) inset; cursor: pointer; padding: 0; background: #0D110F; }
.run .rc:nth-child(4n+2), .run .rc:nth-child(4n+3) { transform: translateY(40%); }
.run .rc img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.run::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 3; background: linear-gradient(#0A0E0C, rgba(10,14,12,0)); pointer-events: none; }
.run-cap { position: absolute; left: 0; right: 0; top: 4px; text-align: center; font-size: 10px; color: var(--mist); z-index: 4; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .run-track { animation: none; } }
/* review switcher (for choosing a variant; not part of the final page) */
.rev { position: fixed; right: 10px; bottom: 50%; z-index: 60; display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 12px; background: rgba(237,235,228,.92); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.rev button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: #0D110F; font: 800 15px 'Archivo', sans-serif; cursor: pointer; }
.rev button.on { background: #0D110F; color: var(--paper); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .pager { scroll-behavior: auto; } }
.card .fb{overflow:hidden!important;display:flex;flex-direction:column}.fb .src{margin-top:auto}.fb .more{display:none}
@container (max-width: 300px) {
.fb h3 { font-size: 15.5px !important; margin: 2.4cqw 0 0; }
.fb .l { font-size: 9.5px !important; margin: 2.6cqw 0 1.2cqw !important; }
.fb .nums b { font-size: 13.5px !important; }
.fb .nums span { font-size: 9.5px !important; }
.fb li, .fb .rd { font-size: 12px !important; line-height: 1.32 !important; margin-bottom: .8cqw; }
.fb .src { font-size: 10px !important; padding-bottom: 3cqw; margin-top: auto; }
.fb .bh { font-size: 9px !important; }
}
/* ---------- watchlist: closing summary slide ---------- */
.slide.wl11 { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 6px 14px 10px; overflow-y: auto; }
.wl11 .wbox { margin: auto 0; border-radius: 18px; border: 1px solid rgba(237,235,228,.14); background: radial-gradient(120% 40% at 50% 0%, rgba(255,107,69,.14), transparent 70%), #0D110F; padding: 16px 14px 14px; }
.wl11 .wk1 { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--mist); }
.wl11 .wk1 svg { width: 22px; height: 12px; } .wl11 .wk1 path { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; }
.wl11 h2 { margin: 8px 0 2px; font-size: clamp(22px, 6.6cqw, 30px); line-height: 1.02; letter-spacing: -.03em; }
.wl11 h2 em { font-style: normal; color: var(--orange); }
.wl11 .sum { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.4; color: rgba(237,235,228,.78); }
.wl11 .sum b { color: var(--orange); }
.wl11 ul { list-style: none; margin: 0; padding: 0; }
.wl11 li { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(237,235,228,.08); }
.wl11 .dots { display: flex; gap: 4px; justify-content: center; } .wl11 .dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px dashed rgba(237,235,228,.3); } .wl11 .dots i.f { border: 0; background: var(--orange); opacity: .85; }
.wl11 .nm span { color: var(--mist) !important; }
.wl11 .ring circle { fill: none; stroke-width: 3.2; }
.wl11 .ring .bg { stroke: rgba(237,235,228,.1); }
.wl11 .ring .fg { stroke: var(--rc); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.wl11.go .ring .fg { stroke-dashoffset: var(--off); }
.wl11 .ring text { font: 700 11px 'IBM Plex Mono', monospace; fill: var(--rc); text-anchor: middle; dominant-baseline: central; }
.wl11 .nm b { display: block; font-size: 14.5px; line-height: 1.2; letter-spacing: -.01em; }
.wl11 .nm span { display: block; margin-top: 2px; font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--rc); }
.wl11 .nx { text-align: right; font: 600 10px/1.3 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.wl11 .nx b { display: block; color: var(--paper); font-size: 11px; }
.wl11 .eds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.wl11 .eds div { border-radius: 10px; padding: 8px 9px; border: 1px solid rgba(237,235,228,.16); font-size: 11.5px; line-height: 1.3; color: var(--mist); }
.wl11 .eds div b { display: block; font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); }
.wl11 .eds .now { background: rgba(255,107,69,.12); border-color: rgba(255,107,69,.5); } .wl11 .eds .now b { color: var(--orange); }
.wl11 .eds .q { border-style: dashed; }
.wl11 li.tw { cursor: pointer; }
.wl11 li.tw:hover .nm b { color: var(--orange); }
.wl11 .tap { margin: 0 0 6px; font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.slide.wl11 { position: relative; }
.wsh { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; padding: 8px 12px; background: rgba(10,14,12,.72); opacity: 0; pointer-events: none; transition: opacity .3s; }
.wsh.on { opacity: 1; pointer-events: auto; }
.wsh .bx { width: 100%; max-height: 100%; overflow: auto; border-radius: 18px; padding: 16px 15px 14px; background: radial-gradient(120% 40% at 50% 0%, rgba(255,107,69,.16), transparent 70%), #121614; box-shadow: 0 0 0 1px rgba(237,235,228,.14), 0 30px 60px -20px #000; transform: translateY(10px); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.wsh.on .bx { transform: none; }
.wsh .tp { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wsh .tp span { font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.wsh .x { border: 0; background: rgba(237,235,228,.1); color: var(--paper); width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; }
.wsh h3 { margin: 8px 0 2px; font: 800 21px/1.12 'Archivo', sans-serif; letter-spacing: -.01em; color: var(--paper); }
.wsh .mv { font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.wsh .mt { position: relative; height: 8px; margin: 14px 0 0; border-radius: 99px; background: linear-gradient(90deg, #FFB547, rgba(237,235,228,.18) 50%, #7FE0A8); }
.wsh .mt i { position: absolute; top: 50%; left: 50%; width: 6px; height: 20px; border-radius: 3px; background: var(--paper); transform: translate(-50%,-50%); box-shadow: 0 0 0 3px #121614; transition: left .9s cubic-bezier(.3,.7,.3,1); }
.wsh .ml { display: flex; justify-content: space-between; margin-top: 7px; font: 500 11.5px 'IBM Plex Mono', monospace; color: var(--mist); }
.wsh .ml b { color: var(--paper); }
.wsh ul { list-style: none; margin: 10px 0 0; padding: 0; }
.wsh li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(237,235,228,.1); }
.wsh .tg { justify-self: start; font: 600 11px 'IBM Plex Mono', monospace; padding: 4px 7px; border-radius: 7px; }
.wsh .tw .tg { background: rgba(127,224,168,.16); color: #7FE0A8; } .wsh .hw .tg { background: rgba(255,181,71,.16); color: #FFB547; }
.wsh li p { margin: 0; font-size: 14.5px; line-height: 1.32; color: var(--paper); }
.wsh li small { display: block; margin-top: 2px; font: 500 10.5px 'IBM Plex Mono', monospace; color: var(--mist); }
.wsh li.none p { color: var(--mist); }
.wsh .wt { margin-top: 8px; padding-top: 10px; border-top: 1px dashed rgba(237,235,228,.18); font-size: 15px; line-height: 1.35; color: var(--paper); }
.wsh .wt b { color: var(--orange); }
.wsh .wt span { margin-left: 6px; font: 700 10.5px 'IBM Plex Mono', monospace; padding: 3px 7px; border-radius: 99px; background: var(--orange); color: #0D110F; white-space: nowrap; }
.wsh .wsrc { margin-top: 8px; font: 500 10.5px 'IBM Plex Mono', monospace; color: var(--mist); }
@media (max-height: 700px) { .wsh .bx { padding: 12px 12px 10px; } .wsh h3 { font-size: 17px; margin-top: 4px; } .wsh .mt { margin-top: 10px; } .wsh ul { margin-top: 6px; } .wsh li { padding: 5px 0; grid-template-columns: 76px 1fr; } .wsh li p { font-size: 12.5px; } .wsh li small { font-size: 9.5px; } .wsh .tg { font-size: 10px; } .wsh .wt { font-size: 13px; margin-top: 4px; padding-top: 7px; } .wsh .wsrc { margin-top: 5px; font-size: 9.5px; } }
@media (prefers-reduced-motion: reduce) { .wsh, .wsh .bx, .wsh .mt i { transition: none; } }
.wl11 .go2 { margin-top: 12px; width: 100%; min-height: 50px; border: 0; border-radius: 99px; background: var(--orange); color: #0D110F; font: 800 16px 'Archivo', sans-serif; cursor: pointer; }
.wl11 li.tw { grid-template-columns: 1fr auto; align-items: start; }
.wl11 .tow { margin: 4px 0 0; font-size: 13px; line-height: 1.3; color: var(--paper); }
.wl11 .tow i { font: 600 9.5px 'IBM Plex Mono', monospace; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin-right: 6px; }
.wl11 .wd2 { font: 700 10.5px 'IBM Plex Mono', monospace; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; padding: 5px 8px; border-radius: 99px; background: var(--orange); color: #0D110F; margin-top: 1px; }
.wl11 .wd2.nd { background: transparent; color: var(--mist); box-shadow: inset 0 0 0 1px rgba(237,235,228,.2); }
@media (max-height: 700px) { .wl11 .sum, .wl11 .fine2, .wl11 .nxt, .wl11 li.tw .nm > span { display: none; } .wl11 .nm b { font-size: 13px; } .wl11 .tow { font-size: 12px; margin-top: 2px; } .wl11 li.tw { padding: 5px 0; } .wl11 .wd2 { font-size: 9.5px; padding: 4px 6px; } .wl11 h2 { font-size: 21px; } .wl11 .go2 { min-height: 42px; margin-top: 8px; } .wl11 .wbox { padding: 12px 12px 10px; } }
.wl11 .fine2 { margin-top: 8px; text-align: center; font-size: 11.5px; color: var(--mist); }
@media (max-height: 700px) { .wl11 li { padding: 5px 0; } .wl11 .eds div { padding: 5px 7px; } }
/* watchlist: fit one phone screen */
.slide.wl11 { justify-content: safe center; padding: 4px 12px 6px; }
.slide.wl11 { justify-content: stretch; overflow: hidden; }
.wl11 .wbox { margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 12px 12px; }
.wl11 .wr { flex: 1; min-height: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 10px -12px 0; }
.wl11 .wr::-webkit-scrollbar { display: none; }
.wl11 .wc { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; margin: 0; padding: 14px 24px 12px; position: relative; isolation: isolate; }
.wl11 .wc::before { content: ''; position: absolute; inset: 0 12px; border-radius: 16px; background: radial-gradient(120% 40% at 50% 0%, rgba(255,107,69,.12), transparent 70%), #141816; box-shadow: inset 0 0 0 1px rgba(237,235,228,.12); z-index: -1; }
.wl11 .wc > * { position: relative; flex-shrink: 0; } .wl11 .wc > .sp { flex-shrink: 1; }
.wl11 .tp { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wl11 .tp > span:first-child { font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.wl11 .wc .wd2 { background: var(--paper); }
.wl11 .wc .wd2.nd { background: transparent; }
.wl11 .wc h3 { margin: 12px 0 2px; font: 800 22px/1.12 'Archivo', sans-serif; letter-spacing: -.01em; color: var(--paper); }
.wl11 .mv { font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.wl11 .mt { position: relative; height: 8px; margin: 14px 0 0; border-radius: 99px; background: linear-gradient(90deg, #FFB547, rgba(237,235,228,.18) 50%, #7FE0A8); }
.wl11 .mt i { position: absolute; top: 50%; left: 50%; width: 6px; height: 20px; border-radius: 3px; background: var(--paper); transform: translate(-50%,-50%); box-shadow: 0 0 0 3px #141816; transition: left .9s cubic-bezier(.3,.7,.3,1); }
.wl11 .ml { display: flex; justify-content: space-between; margin-top: 7px; font: 500 11.5px 'IBM Plex Mono', monospace; color: var(--mist); }
.wl11 .ml b { color: var(--paper); }
.wl11 .wc ul { list-style: none; margin: 10px 0 0; padding: 0; }
.wl11 .wc li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(237,235,228,.1); align-items: start; }
.wl11 .tg { justify-self: start; font: 600 11px 'IBM Plex Mono', monospace; padding: 4px 7px; border-radius: 7px; }
.wl11 .tw .tg { background: rgba(127,224,168,.16); color: #7FE0A8; } .wl11 .hw .tg { background: rgba(255,181,71,.16); color: #FFB547; }
.wl11 .wc li p { margin: 0; text-align: left; font-size: 14.5px; line-height: 1.32; color: var(--paper); }
.wl11 .wc li small { display: block; margin-top: 2px; font: 500 10.5px 'IBM Plex Mono', monospace; color: var(--mist); }
.wl11 .wc li.none p { color: var(--mist); }
.wl11 .sp { flex: 1; min-height: 6px; }
.wl11 .wt { margin: 0; padding-top: 10px; border-top: 1px dashed rgba(237,235,228,.18); font-size: 15.5px; line-height: 1.35; color: var(--paper); }
.wl11 .wt b { color: var(--orange); }
.wl11 .wsrc { margin: 6px 0 0; font: 500 10.5px 'IBM Plex Mono', monospace; color: var(--mist); }
.wl11 .wnav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.wl11 .wnav button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(237,235,228,.08); color: var(--paper); font-size: 18px; cursor: pointer; }
.wl11 .wnav button:disabled { opacity: .3; }
.wl11 .wdots { display: flex; gap: 6px; } .wl11 .wdots span { width: 7px; height: 7px; border-radius: 99px; background: rgba(237,235,228,.25); transition: width .3s, background .3s; } .wl11 .wdots span.on { width: 20px; background: var(--paper); }
.wl11 .go2 { margin-top: 10px; }
@media (max-height: 700px) { .wl11 .wbox { padding: 10px 10px 10px; } .wl11 h2 { font-size: 20px; } .wl11 .wr { margin-top: 6px; } .wl11 .wc { padding: 10px 20px 8px; } .wl11 .wc h3 { font-size: 16px; margin-top: 5px; } .wl11 .mt { margin-top: 7px; } .wl11 .wc { padding-top: 8px; } .wl11 .ml { font-size: 10.5px; margin-top: 5px; } .wl11 .wc ul { margin-top: 5px; } .wl11 .wc li { padding: 3px 0; grid-template-columns: 74px 1fr; gap: 8px; } .wl11 .wk1 { display: none; } .wl11 h2 { margin-top: 0; } .wl11 .wc li p { font-size: 12.5px; line-height: 1.26; } .wl11 .wc li small { font-size: 9.5px; margin-top: 1px; } .wl11 .tg { font-size: 10px; padding: 3px 6px; } .wl11 .wt { font-size: 13px; padding-top: 6px; } .wl11 .wsrc { font-size: 9.5px; margin-top: 4px; } .wl11 .mv { display: none; } .wl11 .wc li small { display: inline; margin-left: 6px; } .wl11 .wnav { margin-top: 6px; } .wl11 .wnav button { width: 34px; height: 34px; } .wl11 .go2 { min-height: 40px; margin-top: 5px; } .wl11 .wt { padding-top: 4px; } .wl11 .wnav { margin-top: 3px; } }
@media (prefers-reduced-motion: reduce) { .wl11 .mt i { transition: none; } }
.wl11 .th { justify-content: space-between; gap: 0; }
.wl11 .th h2 { margin: 8px 0 0; font-size: clamp(24px, 7.4cqw, 32px); line-height: 1.04; }
.wl11 .tsub { margin: 8px 0 0; font-size: 14.5px; line-height: 1.4; color: rgba(237,235,228,.8); }
.wl11 .tgrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: 14px; }
.wl11 .tgrid i { font: 600 10px/1 'IBM Plex Mono', monospace; font-style: normal; text-align: center; padding: 9px 0; border-radius: 6px; color: var(--mist); background: rgba(237,235,228,.06); box-shadow: inset 0 0 0 1px rgba(237,235,228,.1); }
.wl11 .tgrid i.on { color: #0D110F; background: var(--orange); box-shadow: none; }
.wl11 .tmv { margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wl11 .tmv .tr { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; text-align: left; background: rgba(237,235,228,.045); }
.wl11 .tmv b { font: 800 17px/1 'Archivo', sans-serif; text-align: center; }
.wl11 .tmv .ad b { color: #7FE0A8; } .wl11 .tmv .ct b { color: #FFB547; }
.wl11 .tmv span { font-size: 15px; font-weight: 700; color: var(--paper); }
.wl11 .tmv small { font: 500 10.5px 'IBM Plex Mono', monospace; letter-spacing: .04em; color: var(--mist); text-align: right; }
.wl11 .tnl { margin: 16px 0 8px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.wl11 .tnx { margin: 0; padding: 0 0 0 4px; position: relative; display: flex; flex-direction: column; gap: 8px; }
.wl11 .tnx::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: rgba(237,235,228,.16); }
.wl11 .tnx .tr { display: grid; grid-template-columns: 78px 1fr; gap: 8px; align-items: baseline; position: relative; padding-left: 18px; }
.wl11 .tnx .tr::before { content: ''; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px #0D110F; }
.wl11 .tnx .d { font: 700 11px 'IBM Plex Mono', monospace; color: var(--paper); }
.wl11 .tnx .t { font-size: 14px; line-height: 1.3; color: rgba(237,235,228,.88); }
.wl11 .tq { margin: 16px 0 0; font: 800 20px/1.15 'Archivo', sans-serif; letter-spacing: -.01em; color: var(--paper); text-align: center; }
.wl11 .tq em { font-style: normal; color: var(--orange); }
.wl11 .th .go2 { margin-top: 10px; }
.wl11 .th .tgrid i, .wl11 .th .tmv .tr, .wl11 .th .tnx .tr { opacity: 0; transform: translateY(6px); }
.wl11.go .th .tgrid i { animation: tin .45s ease-out forwards; animation-delay: calc(var(--k) * 70ms + 150ms); }
.wl11.go .th .tmv .tr { animation: tin .5s ease-out forwards; animation-delay: calc(var(--k) * 110ms + 900ms); }
.wl11.go .th .tnx .tr { animation: tin .5s ease-out forwards; animation-delay: calc(var(--k) * 140ms + 1550ms); }
@keyframes tin { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wl11 .th .tgrid i, .wl11 .th .tmv .tr, .wl11 .th .tnx .tr { opacity: 1; transform: none; animation: none !important; } }
@media (max-height: 700px) { .wl11 .th .wk1 { display: none; } .wl11 .th h2 { font-size: 22px; margin-top: 0; } .wl11 .tsub { font-size: 12.5px; margin-top: 5px; } .wl11 .tgrid { margin-top: 8px; gap: 4px; } .wl11 .tgrid i { padding: 6px 0; font-size: 9px; } .wl11 .tmv { margin-top: 8px; gap: 4px; } .wl11 .tmv .tr { padding: 4px 8px; } .wl11 .tmv span { font-size: 13px; } .wl11 .tmv b { font-size: 15px; } .wl11 .tnl { margin: 10px 0 5px; } .wl11 .tnx { gap: 4px; } .wl11 .tnx .t { font-size: 12.5px; } .wl11 .tq { margin-top: 8px; font-size: 16px; } }
.wl11 .wbox { margin: 0; padding: 12px 12px 12px; }
.wl11 h2 { font-size: clamp(20px, 6cqw, 28px); margin-top: 6px; }
.wl11 .sum { font-size: 12.5px; margin: 4px 0 6px; }
.wl11 li { grid-template-columns: 34px 1fr auto; gap: 8px; padding: 6px 0; }
.wl11 .nm b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl11 .nm span { font-size: 9.5px; white-space: nowrap; }
.wl11 .dots i { width: 7px; height: 7px; } .wl11 .dots { gap: 3px; }
.wl11 .nx { font-size: 9px; } .wl11 .nx b { font-size: 10.5px; }
.wl11 .eds { margin-top: 8px; } .wl11 .eds div { padding: 6px 8px; font-size: 11px; }
.wl11 .go2 { margin-top: 8px; min-height: 44px; font-size: 15px; }
.wl11 .fine2 { margin-top: 6px; font-size: 11px; }
@media (max-height: 760px) { .wl11 .fine2 { display: none; } .wl11 li { padding: 5px 0; } .wl11 .wbox { padding-top: 10px; padding-bottom: 10px; } .wl11 .sum { font-size: 12px; line-height: 1.35; } .wl11 .wk1 { display: none; } .wl11 h2 { margin-top: 0; } }
.wl11 .nxt { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(237,235,228,.12); font-size: 14px; line-height: 1.35; color: var(--paper); text-align: center; }
.wl11 li { grid-template-columns: 1fr auto !important; }
.wl11 .st { font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 99px; white-space: nowrap; text-align: center; line-height: 1.25; }
.wl11 .st small { display: block; font-size: 9px; opacity: .8; letter-spacing: .04em; }
.wl11 .st.n { background: var(--orange); color: #0D110F; }
/* fit fix: wrap long story names, compact chip */
.wl11 li > .nm { min-width: 0; }
.wl11 .nm b { white-space: normal !important; overflow: visible !important; font-size: 13.5px !important; line-height: 1.2; }
.wl11 .st { padding: 4px 8px !important; font-size: 9.5px !important; }
.wl11 .sum { font-size: 12px !important; line-height: 1.35 !important; margin: 4px 0 4px !important; }
.wl11 li { padding: 5px 0 !important; gap: 8px !important; }
.wl11 .nxt { margin-top: 6px !important; padding-top: 6px !important; font-size: 13px !important; }
.wl11 .go2 { min-height: 42px !important; margin-top: 6px !important; }
.wl11 h2 { font-size: clamp(20px, 6cqw, 26px) !important; }
/* intro: card never climbs into the headline */
.kc { width: min(52cqw, calc((100dvh - 385px) * 9 / 16)); min-width: 150px; bottom: 92px; right: -2cqw; }
.kw .kh { max-width: 56cqw; }
/* last slides: hide the prev/next bar so the card has room */
.deck.atend .dfoot { display: none; }
.slide.wl11, .slide.end { padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; }

/* soft sign-up */
.end { --orange: #F77856; }
.form input { border-radius: 99px; padding: 0 20px; border: 1px solid rgba(237,235,228,.18); background: rgba(237,235,228,.06); outline: none; transition: border-color .2s, box-shadow .2s; }
.form input:focus, .form input:focus-visible { outline: none; border-color: rgba(237,235,228,.4); box-shadow: 0 0 0 5px rgba(237,235,228,.06); }
.form .go { border-radius: 99px; box-shadow: 0 8px 22px rgba(255,107,69,.18); }
.form .ok { border-radius: 22px; }
.end .shi { gap: 10px; }
.end .shi .sh, .end .shi .sh[data-sh="wa"] { border-radius: 26px; border: 1px solid rgba(237,235,228,.16); background: rgba(237,235,228,.06); color: var(--paper); font-weight: 600; box-shadow: none; }
.end .shi .sh svg, .end .shi .sh[data-sh="wa"] svg { color: var(--orange); }
.end .shi .sh:hover, .end .shi .sh[data-sh="wa"]:hover { background: rgba(237,235,228,.11); border-color: rgba(237,235,228,.3); }


/* compact deck chrome: bigger card */
.dhead { padding: calc(max(10px, env(safe-area-inset-top)) + 26px) 14px 0 !important; }
.top { padding-top: max(10px, env(safe-area-inset-top)) !important; }
.dhead .hrow { margin: 0 0 2px !important; }
.dhead .home, .dhead .deep { padding: 6px 12px !important; font-size: 11px !important; }
.dbars button { padding: 4px 0 !important; }
.cap { margin-top: 0 !important; min-height: 0 !important; align-items: center; gap: 8px; white-space: nowrap; }
.cap .n { font-size: 15px !important; } .cap .ty { font-size: 11px; } .cap .co { font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide:not(.end):not(.wl11) { padding: 4px 10px !important; }
.slide .card { max-height: calc((100cqw - 20px) * 16 / 9) !important; }
.dfoot { grid-template-columns: 44px 1fr 44px !important; gap: 8px !important; padding: 4px 14px max(8px, env(safe-area-inset-bottom)) !important; }
.dfoot .nav, .dfoot .cta { min-height: 44px !important; } .dfoot .cta { font-size: 15px !important; } .dfoot .nav { font-size: 20px !important; }
.sub2 { display: none !important; }
.end h2 em { display: block; margin-top: 8px; }
.end h2 { margin-bottom: 34px !important; }

/* wide, readable card back */
.slide .card .fb { left: calc(-1 * var(--xw, 0px)); right: calc(-1 * var(--xw, 0px)); overflow-y: auto !important; padding: 18px 18px 0; z-index: 3; }
.slide .card.on { z-index: 20; }
.fb .bh { font-size: 12px; }
.fb h3 { font-size: 23px; line-height: 1.12; margin: 12px 0 2px; }
.fb .l { font-size: 12.5px; margin: 18px 0 8px; }
.fb .nums { gap: 8px; }
.fb .nums div { padding: 10px 11px; border-radius: 10px; }
.fb .nums b { font-size: 21px !important; }
.fb .nums span { font-size: 14.5px !important; }
.fb li, .fb .rd { font-size: 17.5px; line-height: 1.38; }
.fb li { padding-left: 14px; margin-bottom: 6px; }
.fb li::before { width: 6px; height: 6px; }
.fb .rd { padding-left: 12px; }
.fb .src { font-size: 13px; padding-bottom: 16px; margin-top: 18px; }
.fb .bh > span:first-child { white-space: nowrap; }
/* one card size for front and back */
.slide .card { aspect-ratio: 3 / 5 !important; max-height: calc((100cqw - 20px) * 5 / 3) !important; }
.slide .card .fb { left: 0 !important; right: 0 !important; }
/* back auto-fits the card; thumbnails use the 3:5 card shape */
.fb { --k: 1; padding: calc(18px * var(--k)) 18px 0 !important; }
.fb .bh { font-size: calc(12px * var(--k)); }
.fb .bh { column-gap: 10px; row-gap: 6px; flex-wrap: wrap; }
.fb .nums { display: grid !important; grid-template-columns: auto 1fr !important; column-gap: 14px !important; row-gap: 0 !important; margin-bottom: 2px; }
.fb .nums div { display: contents !important; }
.fb .nums b, .fb .nums span { padding: calc(8px * var(--k)) 0 !important; border-top: 1px solid rgba(237,235,228,.1); margin: 0 !important; }
.fb .nums div:first-child b, .fb .nums div:first-child span { border-top: 0; padding-top: calc(2px * var(--k)) !important; }
.fb .nums b { white-space: nowrap !important; font-size: calc(18px * var(--k)) !important; line-height: 1.25 !important; align-self: baseline; }
.fb .nums span { font-size: calc(16.5px * var(--k)) !important; line-height: 1.3 !important; color: rgba(237,235,228,.85) !important; align-self: baseline; }
.fb .nums b, .fb .nums span, .fb li, .fb .rd { font-size: calc(17px * var(--k)) !important; line-height: 1.35 !important; }
.fb .rd { font-weight: 500 !important; }
.fb .nums { column-gap: 0 !important; }
.fb .nums div b { font-size: calc(17px * var(--k)) !important; padding-right: 14px !important; }
.fb .nums div b, .fb .nums div span { align-self: stretch !important; }
.fb h3 { font-size: calc(19.5px * var(--k)); line-height: 1.22; margin: calc(12px * var(--k)) 0 2px; }
.fb .l { font-size: calc(12.5px * var(--k)); margin: calc(16px * var(--k)) 0 calc(8px * var(--k)); }
.fb .nums div { padding: calc(10px * var(--k)) 9px; }
.fb .nums b { font-size: calc(19px * var(--k) * var(--kn, 1)) !important; white-space: normal; overflow-wrap: normal; }
.fb .nums span { font-size: calc(15.5px * var(--k)) !important; line-height: 1.3 !important; }
.fb li, .fb .rd { font-size: calc(17.5px * var(--k)); }
.fb .src { font-size: calc(13px * var(--k)); margin-top: calc(16px * var(--k)); padding-bottom: calc(14px * var(--k)); }
.hand .hc, .cf .fc, .sk .fc, .fl .fc, .orb-ring { height: calc(var(--cw, 150px) * 5 / 3) !important; }
.cf .fc, .sk .fc, .fl .fc { margin-top: calc(var(--cw, 150px) * -5 / 6) !important; }
.kc, .wg .stack, .hfan img, .run .rc { aspect-ratio: 3 / 5 !important; }
@media (max-width: 385px) { .wp .pts { flex-wrap: wrap; row-gap: 5px; font-size: 11px; } .wp .pts li { padding: 3px 7px 3px 17px; } .wp .pts li::before { left: 7px; } }


@media (min-width:1024px){
 .app{max-width:none!important;border:0!important;background:radial-gradient(60% 70% at 78% 60%, rgba(255,107,69,.18), rgba(10,14,12,0) 70%), #0A0E0C!important}
 .top{padding-left:6vw!important;padding-right:6vw!important;padding-top:22px!important}
 .plg .plimg{height:30px!important}
 #wu{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);grid-template-rows:1fr auto auto auto auto auto 1fr;column-gap:5vw;padding:90px 4vw 40px 6vw!important;background:transparent!important;overflow:hidden}
 #wu>.kick{grid-column:1;grid-row:2}
 #wu>h1{grid-column:1;grid-row:3;font-size:clamp(52px,5vw,84px)!important;white-space:normal!important}
 #wu>.clar{grid-column:1;grid-row:4;margin-top:22px}
 #wu>.p{grid-column:1;grid-row:5;font-size:20px;max-width:560px;margin-top:20px}
 #wu>.start{grid-column:1;grid-row:6;margin:28px 0 0 0!important;justify-self:start;position:static!important;box-shadow:0 10px 30px rgba(255,107,69,.25)!important;min-height:56px!important;font-size:18px!important}
 #wu>.sub2{grid-column:1;grid-row:7;align-self:start;justify-content:flex-start!important;background:none!important;margin:8px 0 0!important}
 #wu>.hand{grid-column:2;grid-row:1/8;margin:0!important;min-height:0;height:100%}
 #wu>.hpulse{display:none!important}
 #wu>.clar{justify-self:start;align-self:start}
 #wu>.hand{overflow:visible!important;z-index:1}
 #wu>.sub2{display:flex!important;position:relative;z-index:3}
 #wu>.sub2 button{padding:8px 0!important}
}


@media (min-width:1024px){
 /* intro */
 .bars{left:6vw!important;right:6vw!important}
 .kw{left:6vw!important;right:50vw!important;top:120px!important}
 .kw .kl{font-size:14px!important;padding:4px 10px!important}
 .kw b{font-size:min(96px, calc(64vw / var(--len,8) * 1.1))!important;margin-top:22px!important}
 .kw .kco{font-size:48px!important;margin-top:26px!important}
 .kw .kh{font-size:22px!important;max-width:38vw!important;margin-top:12px!important;line-height:1.4!important}
 .knum{font-size:min(70vh,620px)!important;left:3vw!important;bottom:-8vh!important}
 .kc{width:auto!important;height:min(72vh,640px)!important;min-width:0!important;right:12vw!important;bottom:auto!important;top:11vh!important;border-radius:22px!important}
 .ictl{left:50%!important;right:auto!important;transform:translateX(-50%);width:560px}
 /* deck */
 .dhead{width:100%;padding:62px 6vw 0!important}
 .dfoot{max-width:620px;margin:0 auto;width:100%}
 .slide .card{max-height:100%!important}
 .slide:not(.end):not(.wl11){padding:14px 10px!important}
 /* watch list */
 .slide.wl11{padding:16px 6vw!important;overflow-y:auto!important}
 .slide.wl11{justify-content:center!important}
 .wl11 .wbox{max-width:1180px;width:100%;margin:0 auto!important;padding:34px 40px!important;flex:none!important;height:auto!important}
 .wl11 h2{font-size:48px!important}
 .wl11 .sum{font-size:17px!important;max-width:760px}
 .wl11 ul{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important}
 .wl11 .wbox li.si{padding:12px 14px 12px 10px!important}
 .wl11 .nm b{font-size:17px!important}
 .wl11 .go2{max-width:420px;margin-left:auto;margin-right:auto;display:block;width:100%}
 .wl11 .nxt,.wl11 .fine2{text-align:center}
 /* end */
 .slide.end{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:6vw;align-content:center;padding:0 8vw!important;max-width:1440px;margin:0 auto}
 .slide.end>*{grid-column:2;margin-top:0!important;margin-bottom:0!important}
 .slide.end>h2{grid-column:1;grid-row:1/9;align-self:center;font-size:clamp(48px,5vw,80px)!important}
 .slide.end>.shr{margin-top:22px!important}
 .slide.end>.fine{margin-top:16px!important}
 .slide.end>#again,.slide.end .over{justify-self:start}
}

/* Header label: exact case "AgriFood Tech", fit on phones */
.top .tl{text-transform:none}
.top .plg::after,.top:has(#cover[hidden]) .plg::after{text-transform:none;letter-spacing:.03em}
@media (max-width:600px){
  .top .tl{letter-spacing:.02em}
  .top .tl .dt{display:none}
  .top .plg,.top:has(#cover[hidden]) .plg{margin-right:0}
  .top .plg .plimg{height:26px!important}
  .top .plg::after,.top:has(#cover[hidden]) .plg::after{font-size:10px;letter-spacing:0;padding-left:8px;margin-left:8px}
}
@media (max-width:360px){
  .top .tl{font-size:10px;letter-spacing:0}
  .top .plg .plimg{height:21px!important}
  .top .plg::after,.top:has(#cover[hidden]) .plg::after{font-size:9px}
}
@media (max-width:340px){.top .tl{letter-spacing:-.02em}}
/* End screen: share buttons never overflow; Start over has breathing room */
.end .shi{grid-template-columns:repeat(3,minmax(0,1fr))}
.end .shi .sh{min-width:0}
.end .shi .sh span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:1024px){.slide.end>#again{margin-top:20px!important}.slide.end>.shr{min-width:0}}