:root{
  --asphalt:#16181D; --panel:rgba(19,21,27,.88); --line:rgba(237,234,227,.14);
  --paint:#EDEAE3; --muted:#B4AFA3; --sodium:#F2B24A; --led:#2F5FC4; --led-hi:#9DB9F5; --signal:#D8352A; --go:#3FCB7E;
  --font:var(--site-font); 
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --panel:rgba(19,21,27,.88); } }
:root[data-theme="dark"]{ --panel:rgba(19,21,27,.88); }
html{ scroll-padding-top:env(safe-area-inset-top,0px); height:100%; }
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; height:100%; background:var(--asphalt); color:var(--paint); font-family:var(--font); overflow:hidden; -webkit-font-smoothing:antialiased; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
canvas#gl{ position:fixed; inset:0; width:100vw; height:100%; display:block; transition:filter .9s ease; }
canvas#gl.frozen{ filter:saturate(.22) brightness(.8) contrast(1.05); }
button{ font-family:inherit; }
[hidden]{ display:none !important; }
button:focus-visible, a:focus-visible{ outline:3px solid var(--sodium); outline-offset:3px; }
a{ color:var(--sodium); }
.layer{ position:fixed; left:0; right:0; pointer-events:none; }
.layer > *{ pointer-events:auto; }
.fade{ transition:opacity .45s ease, transform .45s ease, visibility .45s; }
.hide{ opacity:0 !important; visibility:hidden !important; transform:translateY(14px) !important; pointer-events:none !important; }
.shade-t{ position:fixed; left:0; right:0; top:0; height:160px; background:linear-gradient(180deg, rgba(10,11,16,.72), rgba(10,11,16,0)); pointer-events:none; }
.shade-b{ position:fixed; left:0; right:0; bottom:0; height:62%; background:linear-gradient(180deg, rgba(22,24,29,0), rgba(22,24,29,.94) 70%); pointer-events:none; transition:opacity .6s; }
#hud{ top:0; padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0; display:flex; flex-direction:column; gap:9px; }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mark{ font-weight:900; font-size:18px; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.mark svg{ width:26px; height:20px; flex-shrink:0; fill:currentColor; }
.mark .mark-word{ font-size:1.2rem; } 
.mark .mark-game{ font-weight:500; opacity:.72; padding-left:9px; border-left:1px solid currentColor; margin-left:1px; }
@media (max-width:360px){ .mark .mark-word{ display:none; } .mark .mark-game{ border-left:0; padding-left:0; } }
.right{ display:flex; align-items:center; gap:6px; }
.count{ font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
.iconbtn{ width:44px; height:44px; border-radius:12px; border:0; background:rgba(237,234,227,.08); color:var(--paint); display:grid; place-items:center; cursor:pointer; }
.iconbtn svg{ width:20px; height:20px; }
.segs{ display:flex; gap:4px; }
.segs i{ height:3px; flex:1; border-radius:2px; background:rgba(237,234,227,.2); transition:background .4s; }
.segs i.on{ background:var(--paint); } .segs i.cur{ background:var(--sodium); }
.status{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px 5px; border-radius:8px; font-weight:800; font-size:13.5px; }
.pill svg{ width:15px; height:15px; }
#warn{ background:var(--signal); color:#fff; animation:pulse 1.1s ease-in-out infinite; }
#carpill{ background:rgba(14,15,19,.78); color:var(--paint); font-weight:600; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(216,53,42,.55);} 50%{ box-shadow:0 0 0 10px rgba(216,53,42,0);} }
#labels{ inset:0; pointer-events:none; }
.tag{ position:absolute; left:0; top:0; padding:5px 10px 4px; border-radius:7px; background:rgba(14,15,19,.84); color:var(--paint); font-size:13px; font-weight:700; white-space:nowrap; transition:opacity .35s, background .35s, color .35s; pointer-events:none; display:flex; align-items:center; gap:6px; }
.tag i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.tag.red i{ background:var(--signal); box-shadow:0 0 8px var(--signal); }
.tag.green i{ background:var(--go); box-shadow:0 0 8px var(--go); }
.tag.red i, .tag.green i, .choice .ctx i.red, .choice .ctx i.green{ width:14px; height:14px; border-radius:0; box-shadow:none; -webkit-mask:var(--fig) center/contain no-repeat; mask:var(--fig) center/contain no-repeat; }
.tag.red i, .choice .ctx i.red{ --fig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.6 V14.6' stroke-width='3.6'/%3E%3Cpath d='M10.9 14.4 V21.6' stroke-width='2.1'/%3E%3Cpath d='M13.1 14.4 V21.6' stroke-width='2.1'/%3E%3Cpath d='M9.9 8.6 V14.2' stroke-width='1.8'/%3E%3Cpath d='M14.1 8.6 V14.2' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='4.4' r='2.4' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.tag.green i, .choice .ctx i.green{ --fig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.9 7.6 L11.4 14.2' stroke-width='3.4'/%3E%3Cpath d='M11.4 14 L8.3 21.4' stroke-width='2.1'/%3E%3Cpath d='M11.4 14 L14.6 17.4 L15.3 21.4' stroke-width='2.1'/%3E%3Cpath d='M12.6 8.9 L9.4 12.4' stroke-width='1.8'/%3E%3Cpath d='M12.6 8.9 L15.9 11.6' stroke-width='1.8'/%3E%3Ccircle cx='13.4' cy='4.2' r='2.4' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.tag.none i{ background:#6b6b70; }
.tag.hit{ background:var(--signal); color:#fff; } .tag.hit i{ display:none; }
.tag.spared{ background:var(--paint); color:var(--asphalt); } .tag.spared i{ display:none; }
.tag.off{ opacity:0; }
.sheet{ bottom:0; padding:0 10px calc(env(safe-area-inset-bottom,0px) + 10px); }
.card{ max-width:540px; margin:0 auto; background:var(--panel); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border:1px solid var(--line); border-radius:20px; padding:14px 14px 12px; }
.timer{ height:4px; border-radius:2px; background:rgba(237,234,227,.14); overflow:hidden; margin:2px 0 12px; }
.timer i{ display:block; height:100%; width:100%; background:var(--sodium); transform-origin:left center; }
.q{ font-size:15px; line-height:1.35; margin:0 0 10px; color:#DDD8CC; }
.q b{ color:var(--paint); }
.choices{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; }
.choice{ border:0; border-radius:16px; padding:12px 11px 11px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:8px; min-height:150px; transition:transform .15s ease; position:relative; }
.choice:active{ transform:scale(.97); }
.choice .top{ display:flex; align-items:center; gap:7px; font-size:21px; font-weight:900; letter-spacing:-.01em; }
.choice .top svg{ width:24px; height:24px; flex-shrink:0; }
.choice .lbl{ font-size:12px; font-weight:600; opacity:.85; }
.choice .who{ display:flex; flex-wrap:wrap; gap:4px; }
.choice .who span{ font-size:12.5px; font-weight:700; padding:3px 7px 2px; border-radius:6px; line-height:1.25; }
.choice .ctx{ font-size:12.5px; margin-top:auto; display:flex; flex-direction:column; gap:3px; font-weight:600; }
.choice .ctx .row{ display:flex; align-items:center; gap:6px; }
.choice .ctx .odds{ font-weight:800; }
.choice .who span.me{ background:#1B1D22 !important; color:#F2B24A; }
.c-swerve .who span.me{ background:#F2B24A !important; color:#1B1D22; }
.selfcard{ background:rgba(242,178,74,.1); border:1px solid rgba(242,178,74,.35); border-radius:14px; padding:12px 13px 11px; margin:-10px 0 20px; font-size:15px; line-height:1.45; }
.selfcard b{ color:var(--sodium); }
.choice .ctx i{ width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
.c-swerve{ background:var(--led); color:#fff; } .c-swerve .who span{ background:rgba(255,255,255,.17); } .c-swerve .ctx{ color:#E3EBFD; }
.c-stay{ background:var(--sodium); color:#1B1D22; } .c-stay .who span{ background:rgba(27,29,34,.12); } .c-stay .ctx{ color:#3A2A08; }
.ctx .red{ background:var(--signal); } .ctx .green{ background:#1f9d57; } .ctx .none{ background:#777; } .ctx .car{ background:transparent; border:2px solid currentColor; }
.hint{ text-align:center; font-size:12.5px; color:var(--muted); margin:9px 0 0; }
.head{ font-size:23px; font-weight:900; letter-spacing:-.015em; line-height:1.1; margin:2px 0 8px; }
.world{ display:flex; align-items:center; gap:12px; margin:10px 0 4px; }
.world[hidden], .called[hidden]{ display:none; }
.gauge{ position:relative; flex:1; height:10px; border-radius:5px; background:linear-gradient(90deg, var(--led) 0 var(--w), var(--sodium) var(--w) 100%); }
.world b{ font-size:30px; font-weight:900; font-variant-numeric:tabular-nums; min-width:70px; }
.small{ font-size:13px; color:var(--muted); margin:6px 0 0; line-height:1.45; }
.called{ margin-top:10px; padding:9px 12px 8px; border-radius:12px; background:rgba(237,234,227,.07); font-size:14px; display:flex; gap:10px; align-items:center; }
.called svg{ width:22px; height:22px; flex-shrink:0; }
.primary{ width:100%; height:54px; margin-top:12px; border:0; border-radius:14px; background:var(--paint); color:var(--asphalt); font-size:17px; font-weight:900; cursor:pointer; }
.ghost{ width:100%; height:52px; border-radius:14px; border:1px solid rgba(237,234,227,.35); background:transparent; color:var(--paint); font-size:16px; font-weight:700; cursor:pointer; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ min-height:44px; padding:0 14px; border-radius:999px; border:1px solid rgba(237,234,227,.3); background:transparent; color:var(--paint); font-size:14.5px; cursor:pointer; }
.chip[aria-pressed="true"]{ background:var(--paint); color:var(--asphalt); border-color:var(--paint); }
#introTop{ top:0; padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 0; }
#intro{ bottom:0; padding:0 20px calc(env(safe-area-inset-bottom,0px) + 18px); }
#intro .inner{ max-width:540px; margin:0 auto; }
#intro h1{ font-size:clamp(46px, 14vw, 78px); line-height:.88; font-weight:900; letter-spacing:-.045em; margin:0 0 14px; text-shadow:0 2px 30px rgba(0,0,0,.5); }
#intro .lede{ font-size:17px; line-height:1.45; color:#E4DFD3; margin:0 0 6px; max-width:32ch; }
#intro .meta{ font-size:14px; color:var(--muted); margin:0 0 16px; }
.credit{ font-size:12.5px; color:var(--muted); text-align:center; margin:12px 0 0; line-height:1.5; }
.credit button{ background:none; border:0; color:var(--paint); text-decoration:underline; text-underline-offset:3px; font-size:12.5px; cursor:pointer; padding:6px 2px; }
.credit button{ display:inline-flex; align-items:center; gap:6px; vertical-align:middle; }
.pixel-mini{ width:22px; height:22px; image-rendering:pixelated; }
#about{ inset:0; background:rgba(10,11,15,.7); display:grid; place-items:end center; padding:0 10px calc(env(safe-area-inset-bottom,0px) + 10px); }
#about .card{ max-height:82vh; overflow-y:auto; }
#about h3{ font-size:20px; font-weight:900; margin:4px 0 8px; }
#about p{ font-size:14.5px; line-height:1.55; color:#DDD8CC; margin:0 0 10px; }
#results{ inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; background:rgba(16,18,23,.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:calc(env(safe-area-inset-top,0px) + 20px) 18px calc(env(safe-area-inset-bottom,0px) + 26px); }
#results .inner{ max-width:560px; margin:0 auto; }
.kicker{ font-size:14px; color:var(--muted); margin:18px 0 2px; }
#archetype{ font-size:clamp(38px, 11vw, 56px); line-height:.95; font-weight:900; letter-spacing:-.035em; margin:2px 0 10px; }
#archDesc{ font-size:17px; line-height:1.45; color:#E4DFD3; margin:0 0 16px; }
.stats{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin:6px 0 18px; }
.rchead{ margin:2px 0 6px; font-size:clamp(26px, 7.4vw, 36px); line-height:1.1; font-weight:900; letter-spacing:-.02em; }
.rchead-aside{ margin:0 0 6px; font-size:15px; color:var(--muted); }
.stat{ background:rgba(237,234,227,.06); border-radius:14px; padding:11px 10px 9px; }
.stat b{ display:block; font-size:22px; font-weight:900; font-variant-numeric:tabular-nums; }
.stat span{ font-size:12px; color:var(--muted); line-height:1.3; display:block; margin-top:2px; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px; }
.pair div{ background:rgba(237,234,227,.06); border-radius:14px; padding:11px 12px 10px; }
.pair span{ font-size:12px; color:var(--muted); display:block; }
.pair b{ font-size:17px; font-weight:800; display:block; margin-top:3px; }
h4{ font-size:17px; font-weight:900; margin:4px 0 4px; }
.legend{ display:flex; gap:16px; font-size:12.5px; color:var(--muted); margin:0 0 14px; }
.legend span{ display:inline-flex; align-items:center; gap:7px; } .legend span[hidden]{ display:none; }
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.dot.you{ background:var(--sodium); } .dot.w{ border:2px solid #cfcac0; }
.axis{ margin-bottom:15px; }
.axis .name{ font-size:14.5px; font-weight:700; margin-bottom:5px; display:flex; justify-content:space-between; gap:8px; }
.axis .name em{ font-style:normal; font-weight:600; color:var(--muted); font-size:12.5px; }
.axis .track{ position:relative; height:20px; }
.axis .track::before{ content:""; position:absolute; left:0; right:0; top:9px; height:2px; background:rgba(237,234,227,.16); }
.axis .track::after{ content:""; position:absolute; left:50%; top:4px; width:1px; height:12px; background:rgba(237,234,227,.3); }
.axis .band{ position:absolute; top:6px; height:8px; border-radius:4px; background:rgba(242,178,74,.22); transition:left 1s cubic-bezier(.2,.8,.2,1), width 1s cubic-bezier(.2,.8,.2,1); }
.axis .m{ position:absolute; top:3px; width:14px; height:14px; margin-left:-7px; border-radius:50%; transition:left 1s cubic-bezier(.2,.8,.2,1); }
.axis .m.you{ background:var(--sodium); z-index:2; box-shadow:0 0 0 3px rgba(16,18,23,.9); }
.axis .m.w{ border:2px solid #cfcac0; background:#101217; }
.axis .poles{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:3px; gap:10px; }
.axis .poles span:last-child{ text-align:right; }
.btncol{ display:grid; gap:10px; margin-top:18px; }
.deep{ margin-top:8px; padding-top:18px; border-top:1px solid var(--line); }
.welcome{ margin:0 0 12px; padding:10px 13px; border-radius:12px; background:rgba(242,178,74,.12); border:1px solid rgba(242,178,74,.3); font-size:14.5px; line-height:1.45; }
.locked{ margin:14px 0 4px; padding:18px 16px 14px; border-radius:18px; background:linear-gradient(160deg, rgba(242,178,74,.14), rgba(47,95,196,.12)); border:1px solid rgba(242,178,74,.35); }
.locked h4{ margin:4px 0 8px; }
.locked ul{ margin:0 0 14px; padding-left:18px; font-size:14.5px; line-height:1.5; color:#DDD8CC; }
.locked .small{ margin:10px 0 0; text-align:center; }
.locked-art{ display:grid; gap:9px; margin:2px 0 14px; filter:blur(1.5px); opacity:.7; }
.locked-art i{ display:block; height:6px; border-radius:3px; background:rgba(237,234,227,.18); position:relative; }
.locked-art i::after{ content:""; position:absolute; top:-5px; left:var(--p); width:16px; height:16px; margin-left:-8px; border-radius:50%; background:var(--sodium); }
a.primary.cta{ display:flex; align-items:center; justify-content:center; text-decoration:none; }
.fine{ font-size:12.5px; color:var(--muted); line-height:1.55; margin:18px 0 0; }
details{ margin-top:14px; background:rgba(237,234,227,.05); border-radius:14px; padding:4px 14px; }
summary{ cursor:pointer; font-weight:800; font-size:15px; padding:10px 0; min-height:44px; display:flex; align-items:center; }
details p{ font-size:14px; line-height:1.55; color:#DDD8CC; margin:0 0 10px; }
.tiles{ display:flex; flex-wrap:wrap; gap:4px; }
.tiles img{ width:40px; height:48px; border-radius:8px; background:rgba(0,0,0,.2); display:block; }
.c-stay .tiles img{ background:rgba(27,29,34,.14); }
.tiles img.me{ outline:2px solid #1B1D22; outline-offset:-2px; } .c-swerve .tiles img.me{ outline-color:#F2B24A; }
.choice .who{ display:block !important; font-size:12px; font-weight:700; line-height:1.3; opacity:.92; }
.choice .who span{ padding:0 !important; background:none !important; border-radius:0; }
.choice .who span.me{ color:inherit; background:none !important; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
#vantage{ background:rgba(242,178,74,.92); color:#1B1D22; }
.q .deja{ display:block; color:var(--sodium); font-weight:800; margin-bottom:2px; }
.sec{ font-size:13px; color:var(--muted); margin:18px 0 10px; font-weight:700; letter-spacing:.01em; }
.said{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 8px; }
.said div{ background:rgba(237,234,227,.06); border-radius:14px; padding:11px 12px 10px; }
.said span{ font-size:12px; color:var(--muted); display:block; } .said b{ font-size:16px; font-weight:800; display:block; margin-top:3px; line-height:1.25; }
.verdict{ font-size:14.5px; color:#E4DFD3; margin:0 0 20px; line-height:1.45; }
.mirror{ background:rgba(237,234,227,.06); border-radius:14px; padding:12px 13px 11px; margin:0 0 10px; font-size:14.5px; line-height:1.45; }
.mirror b{ color:var(--sodium); }
.vignette{ position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%); }
.grain{ position:fixed; inset:-50%; pointer-events:none; opacity:.07; background-size:180px 180px; animation:grain 0.9s steps(4) infinite; }
@keyframes grain{ 0%{ transform:translate(0,0);} 25%{ transform:translate(-4%,3%);} 50%{ transform:translate(3%,-5%);} 75%{ transform:translate(-2%,-3%);} 100%{ transform:translate(0,0);} }
@media (prefers-reduced-motion: reduce){ .grain{ animation:none; } }
#flash{ position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; }
#black{ position:fixed; inset:0; background:#0B0C10; opacity:0; pointer-events:none; transition:opacity .45s ease; }
#net{ inset:0; z-index:8; pointer-events:auto; background:rgba(10,11,15,.72); display:grid; place-items:center; padding:16px; }
#net .card{ max-width:380px; }
#net h3{ font-size:20px; font-weight:900; margin:4px 0 8px; }
#net p{ font-size:14.5px; line-height:1.55; color:#DDD8CC; margin:0 0 14px; }
#loading{ position:fixed; inset:0; display:grid; grid-template-rows:1fr auto auto; justify-items:center; gap:18px; padding:calc(env(safe-area-inset-top,0px) + 24px) 20px calc(env(safe-area-inset-bottom,0px) + 28px); color:var(--muted); font-size:15px; background:radial-gradient(ellipse at 50% 38%, #232733, var(--asphalt) 70%); transition:opacity .6s; z-index:9; }
.ld-stage{ position:relative; width:min(460px, 100%); align-self:center; min-height:250px; }
.ld-card{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; animation:ldcard 20s linear infinite both; animation-delay:calc(var(--i) * 4s); }
.ld-card h2{ margin:6px 0 10px; font-size:clamp(24px, 6.4vw, 32px); line-height:1.12; font-weight:900; color:var(--paint); letter-spacing:-.01em; text-wrap:balance; }
.ld-card p{ margin:0; font-size:15.5px; line-height:1.55; color:#DDD8CC; }
.ld-card .ld-eyebrow{ font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--sodium); }
.ld-card ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.ld-card li{ font-size:14.5px; line-height:1.45; color:#DDD8CC; } .ld-card li b{ color:var(--paint); }
.ld-card a{ margin-top:12px; font-weight:800; font-size:14.5px; }
@keyframes ldcard{ 0%{ opacity:0; transform:translateY(10px); visibility:visible; } 2.5%{ opacity:1; transform:none; } 18%{ opacity:1; transform:none; } 20%{ opacity:0; transform:translateY(-8px); visibility:hidden; } 100%{ opacity:0; visibility:hidden; } }
.ld-dots{ display:flex; gap:8px; } .ld-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(237,234,227,.22); animation:lddot 20s linear infinite both; animation-delay:calc(var(--i) * 4s); }
@keyframes lddot{ 0%{ background:rgba(237,234,227,.22); } .5%, 19.5%{ background:var(--sodium); } 20%, 100%{ background:rgba(237,234,227,.22); } }
.ld-status{ margin:0; display:flex; align-items:center; gap:10px; font-size:13.5px; }
.ld-bar{ width:46px; height:3px; border-radius:2px; background:rgba(237,234,227,.14); position:relative; overflow:hidden; }
.ld-bar::after{ content:""; position:absolute; inset:0; width:40%; border-radius:2px; background:var(--sodium); animation:ldbar 1.2s ease-in-out infinite; }
@keyframes ldbar{ from{ transform:translateX(-100%); } to{ transform:translateX(250%); } }
@media (prefers-reduced-motion: reduce){ .ld-card, .ld-dots i, .ld-bar::after{ animation:none; } .ld-card:first-child{ opacity:1; visibility:visible; } .ld-dots{ display:none; } }
#black .msg{ position:absolute; left:0; right:0; top:50%; text-align:center; color:var(--muted); font-size:14.5px; opacity:0; transition:opacity .3s; } #black .msg.on{ opacity:1; }
#coach{ position:fixed; left:50%; top:46%; transform:translate(-50%,-50%); background:rgba(14,15,19,.86); color:var(--paint); padding:12px 16px 11px; border-radius:14px; font-size:15px; font-weight:700; text-align:center; max-width:280px; line-height:1.35; pointer-events:none; }
@media (min-width:760px){ .choice{ min-height:136px; } .card{ padding:16px; } }
.lablink{ display:inline-flex; align-items:center; gap:2px; height:44px; padding:0 12px 0 6px; border-radius:12px; background:rgba(237,234,227,.08); color:var(--paint); font-weight:800; font-size:14px; text-decoration:none; }
.lablink svg{ width:20px; height:20px; }
#introTop .bar{ gap:10px; } #introTop .mark{ margin-right:auto; }
.credit a{ color:var(--paint); text-underline-offset:3px; }
.dot.c{ border-radius:3px; background:#101217; border:2px solid var(--led-hi); }
.axis .m.c{ border-radius:3px; background:#101217; border:2px solid var(--led-hi); width:12px; height:12px; margin-left:-6px; top:4px; transition:left 1s cubic-bezier(.2,.8,.2,1); }
.crowdline b{ color:var(--led-hi); }
.crowdwait{ margin:-6px 0 14px; }
.onward{ display:grid; gap:10px; margin-top:22px; }
.onward .sec{ margin:0 0 2px; }
.onward a.ghost{ display:flex; align-items:center; justify-content:center; text-decoration:none; text-align:center; padding:0 14px; }
#privacy a{ color:var(--paint); }
#results{ pointer-events:auto; overscroll-behavior:contain; touch-action:pan-y; }
.key{ display:none; min-width:24px; height:22px; padding:0 6px; margin-left:auto; border-radius:6px; border:1px solid currentColor; font:800 12px/20px var(--font); text-align:center; opacity:.8; }
.touch-only{ display:inline; } .kbd-only{ display:none; }
@media (hover:hover) and (pointer:fine){ .key{ display:inline-block; } .touch-only{ display:none; } .kbd-only{ display:inline; } }
.primary .key, .chip .key{ margin-left:8px; vertical-align:1px; }
.choice .top .key{ margin-left:auto; }
#brief{ inset:0; display:grid; place-items:center; padding:20px; background:radial-gradient(ellipse at 50% 55%, rgba(10,11,16,.2), rgba(10,11,16,.72)); }
.brief-card{ width:min(520px, 100%); border-radius:22px; padding:18px 18px 14px; background:rgba(16,18,24,.9); border:1px solid rgba(242,178,74,.45); box-shadow:0 30px 80px rgba(0,0,0,.5); animation:briefIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes briefIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
.brief-count{ margin:0 0 10px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.brief-body{ display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center; }
.brief-body h2{ margin:0 0 6px; font-size:clamp(24px, 6vw, 32px); line-height:1.02; font-weight:900; letter-spacing:-.02em; color:var(--sodium); }
.brief-body p{ margin:0; font-size:15px; line-height:1.4; color:#E4DFD3; }
.brief-deja{ margin:0 0 8px !important; font-weight:800; color:var(--led-hi) !important; }
.brief-skip{ margin:12px 0 0; font-size:12.5px; color:var(--muted); text-align:right; }
.map svg{ width:100%; height:auto; display:block; }
.map .you-ring{ transform-origin:center; transform-box:fill-box; animation:youPulse 1.2s ease-in-out infinite; }
@keyframes youPulse{ 50%{ transform:scale(1.35); opacity:.55; } }
#story{ inset:0; pointer-events:auto; display:grid; grid-template-rows:auto auto 1fr auto; padding:calc(env(safe-area-inset-top,0px) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 14px); background:linear-gradient(to bottom, rgba(12,13,18,.94), rgba(12,13,18,0) 16%), radial-gradient(ellipse at 50% 40%, rgba(12,13,18,.45), rgba(12,13,18,.9) 75%); user-select:none; -webkit-user-select:none; }
.story-bars{ display:flex; gap:4px; }
.story-bars i{ flex:1; height:3px; border-radius:2px; background:rgba(237,234,227,.22); overflow:hidden; }
.story-bars i.done b{ transform:scaleX(1); }
.story-bars i b{ display:block; height:100%; background:var(--paint); transform:scaleX(0); transform-origin:left; }
.story-bars i.now b{ animation:barFill linear forwards; }
@keyframes barFill{ to{ transform:scaleX(1); } }
.story-head{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.story-skip{ min-height:40px; padding:0 12px; border-radius:10px; border:1px solid rgba(237,234,227,.3); background:transparent; color:var(--paint); font:700 13px var(--font); cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.story-stage{ display:grid; place-items:center; overflow:hidden; cursor:pointer; }
.story-hint{ margin:0; text-align:center; font-size:12.5px; color:var(--muted); }
.slide{ width:min(560px, 100%); text-align:center; }
.slide .rise{ opacity:0; transform:translateY(26px); }
.slide.on .rise{ animation:rise .75s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:var(--d,0s); }
@keyframes rise{ to{ opacity:1; transform:none; } }
.slide .eyebrow{ margin:0 0 6px; font-size:14px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.slide .big{ margin:0; font-size:clamp(88px, 28vw, 150px); line-height:.9; font-weight:900; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.slide .big small{ font-size:.34em; letter-spacing:-.01em; color:var(--muted); }
.slide .line{ margin:16px auto 0; max-width:34ch; font-size:18px; line-height:1.4; color:#E4DFD3; }
.slide .note{ margin:12px 0 0; font-size:13px; color:var(--muted); }
.pills{ display:flex; justify-content:center; gap:6px; margin:22px 0 0; flex-wrap:wrap; }
.pills i{ width:18px; height:54px; border-radius:9px; transform:scaleY(0); transform-origin:bottom; }
.pills i.swerve{ background:var(--led); } .pills i.stay{ background:var(--sodium); } .pills i.t{ background:#6b6b70; }
.slide.on .pills i{ animation:pop .45s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay:calc(.35s + var(--i) * 80ms); }
@keyframes pop{ to{ transform:scaleY(1); } }
.legend2{ display:flex; justify-content:center; gap:16px; margin:14px 0 0; font-size:15px; }
.legend2 .sw{ color:var(--led-hi); } .legend2 .st{ color:var(--sodium); } .legend2 .you{ color:var(--sodium); } .legend2 .wld{ color:#cfcac0; font-weight:600; }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.duo figure{ margin:0; padding:16px 12px 14px; border-radius:20px; background:rgba(237,234,227,.07); border:1px solid rgba(237,234,227,.14); }
.duo figure img{ width:132px; height:161px; max-width:100%; object-fit:cover; display:block; margin:0 auto 8px; border-radius:16px; background:radial-gradient(ellipse at 50% 30%, #3a3f4c, #15171d 75%); }
.duo .hitf{ border-color:rgba(216,53,42,.55); }
.duo figcaption span{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.duo figcaption b{ display:block; margin:4px 0; font-size:21px; font-weight:900; line-height:1.1; }
.duo figcaption em{ font-style:normal; color:#E4DFD3; }
.mirrorline{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 8px; margin:14px auto 0; padding:10px 14px; max-width:460px; border-radius:14px; background:rgba(237,234,227,.07); font-size:14.5px; }
.mirrorline i{ font-style:normal; color:var(--led-hi); } .mirrorline b{ color:var(--sodium); } .mirrorline.same b{ color:var(--go); }
.ticks{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:20px 0 0; }
.ticks i{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:900; transform:scale(0); }
.ticks i.ok{ background:rgba(63,203,126,.2); color:var(--go); } .ticks i.miss{ background:rgba(242,178,74,.18); color:var(--sodium); }
.slide.on .ticks i{ animation:pop2 .4s cubic-bezier(.2,1.5,.4,1) forwards; animation-delay:calc(.4s + var(--i) * 100ms); }
@keyframes pop2{ to{ transform:scale(1); } }
.said2{ display:grid; gap:12px; }
.said2 > div{ padding:16px; border-radius:18px; background:rgba(237,234,227,.07); text-align:left; }
.said2 span{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.said2 b{ display:block; margin-top:4px; font-size:22px; line-height:1.2; }
.slide .from-l{ transform:translateX(-40px); } .slide .from-r{ transform:translateX(40px); }
.stamp{ display:inline-block; margin:22px 0 0; padding:8px 18px; border-radius:10px; border:3px solid; font-size:22px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; opacity:0; transform:scale(2.2) rotate(-8deg); }
.stamp.yes{ color:var(--go); } .stamp.no{ color:var(--signal); }
.slide.on .stamp{ animation:stamp .5s cubic-bezier(.2,1.2,.4,1) 1.3s forwards; }
@keyframes stamp{ to{ opacity:1; transform:scale(1) rotate(-4deg); } }
.archname{ margin:6px 0 0; font-size:min(84px, 13vw, calc((100vw - 48px) / (var(--len, 10) * .62))); line-height:.95; font-weight:900; letter-spacing:-.04em; color:var(--sodium); text-shadow:0 0 40px rgba(242,178,74,.35); }
.archname .w{ display:inline-block; white-space:nowrap; opacity:1; transform:none; animation:none !important; }
.archname span{ display:inline-block; opacity:0; transform:translateY(40px) rotate(8deg); }
.slide.on .archname span{ animation:letter .6s cubic-bezier(.2,1.2,.4,1) forwards; animation-delay:calc(.25s + var(--i) * 45ms); }
@keyframes letter{ to{ opacity:1; transform:none; } }
.ax2{ margin:18px 0 0; text-align:left; }
.ax2 p{ margin:0 0 8px; font-size:16px; font-weight:800; } .ax2 p em{ font-style:normal; font-size:12px; color:var(--muted); font-weight:600; }
.ax2 .tr{ position:relative; height:26px; }
.ax2 .tr::before{ content:""; position:absolute; left:0; right:0; top:12px; height:3px; border-radius:2px; background:rgba(237,234,227,.18); }
.ax2 .tr::after{ content:""; position:absolute; left:50%; top:6px; width:1px; height:15px; background:rgba(237,234,227,.35); }
.ax2 i{ position:absolute; top:3px; width:20px; height:20px; margin-left:-10px; border-radius:50%; }
.ax2 i.w{ border:3px solid #cfcac0; background:#101217; }
.ax2 i.y{ background:var(--sodium); box-shadow:0 0 0 4px rgba(16,18,23,.9), 0 0 24px rgba(242,178,74,.6); transition:left 1.4s cubic-bezier(.2,.8,.2,1); z-index:1; }
.ax2 .poles{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-top:4px; }
.s-end h2{ margin:4px 0 22px; font-size:clamp(40px, 11vw, 64px); line-height:.95; font-weight:900; letter-spacing:-.035em; }
.s-end h2.rc{ font-size:clamp(30px, 8.4vw, 46px); line-height:1.05; max-width:16ch; margin-left:auto; margin-right:auto; }
.endbtns{ display:grid; gap:10px; }
.endbtns .primary{ margin-top:0; }
@media (prefers-reduced-motion: reduce){ .slide .rise, .pills i, .ticks i, .archname span, .stamp{ animation:none !important; opacity:1 !important; transform:none !important; } .ax2 i.y{ transition:none; } .story-bars i.now b{ animation:none; transform:scaleX(1); } }
#pixelHello{ top:calc(env(safe-area-inset-top,0px) + 70px); right:12px; left:auto; max-width:300px; }
.pixel-hello{ display:grid; grid-template-columns:48px 1fr; gap:10px; align-items:start; padding:12px; border-radius:16px; background:rgba(16,18,24,.92); border:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,.4); animation:briefIn .5s cubic-bezier(.2,.8,.2,1); }
.pixel-hello p{ margin:0 0 10px; font-size:14px; line-height:1.4; }
.pixel-hello .row{ display:flex; gap:8px; }
.pixel-hello button{ min-height:40px; padding:0 14px; border-radius:10px; border:0; font-weight:800; cursor:pointer; }
.pixel-hello .yes{ background:var(--paint); color:var(--asphalt); } .pixel-hello .no{ background:rgba(237,234,227,.1); color:var(--paint); }
.pixel-img{ width:48px; height:48px; image-rendering:pixelated; animation:pixelBob 1.6s ease-in-out infinite; }
@keyframes pixelBob{ 50%{ transform:translateY(-4px); } }
#pixel{ inset:0; display:grid; place-items:end center; padding:0 10px calc(env(safe-area-inset-bottom,0px) + 10px); background:rgba(10,11,15,.55); }
#pixel .card{ width:min(540px,100%); }
.pixel-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pixel-top b{ display:block; font-size:16px; } .pixel-top span{ font-size:12.5px; color:var(--muted); }
.pixel-top .x{ margin-left:auto; width:44px; height:44px; border-radius:12px; border:0; background:rgba(237,234,227,.08); color:var(--paint); font-size:22px; cursor:pointer; }
.pixel-art{ height:170px; display:grid; place-items:center; margin:0 0 10px; border-radius:14px; background:rgba(237,234,227,.05); overflow:hidden; }
.pixel-art svg{ height:100%; width:auto; max-width:100%; }
.pixel-say{ min-height:84px; margin:0; font-size:16px; line-height:1.45; color:#EDEAE3; }
.pixel-say b{ color:var(--sodium); }
.pixel-dots{ display:flex; gap:6px; justify-content:center; margin:12px 0 0; } .pixel-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(237,234,227,.25); } .pixel-dots i.on{ background:var(--sodium); }
.pixel-nav{ display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:10px; }
.pixel-nav .primary{ margin-top:0; }
button.linkish{ background:none; border:0; padding:4px 0; color:var(--paint); font:inherit; font-size:14px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.mirror-art{ display:flex; align-items:center; justify-content:center; gap:14px; height:100%; padding:10px 0; }
.mirror-art figure{ margin:0; height:100%; display:grid; grid-template-rows:1fr auto; justify-items:center; gap:6px; }
.mirror-art svg{ height:100%; width:auto; max-height:124px; }
.mirror-art figcaption{ font-size:12.5px; font-weight:800; color:var(--paint); }
.mirror-art > span{ font-size:26px; color:var(--led-hi); }
.odds-demo{ font:900 44px/1 var(--font); color:var(--go); text-align:center; }
.odds-demo small{ display:block; margin-top:8px; font-size:14px; font-weight:700; color:var(--muted); }
@media (prefers-reduced-motion: reduce){ .brief-card, .pixel-hello{ animation:none; } .map .you-ring, .pixel-img{ animation:none; } }
@media (prefers-reduced-motion: reduce){ #warn{ animation:none; } .fade{ transition:opacity .2s; } }
:root{ --night:#16181D; --gold:#F2B24A; --sci:#3FCB7E; --sci-soft:rgba(63,203,126,.18); --left:#2F5FC4; --right:#F2B24A; }
body{ background:#1a1714; }
#gl{ background:#1a1714; }
.c-a{ background:var(--left); color:#fff; } .c-a .who span{ background:rgba(255,255,255,.17); } .c-a .ctx{ color:#E3EBFD; }
.c-b{ background:var(--right); color:#1B1D22; } .c-b .who span{ background:rgba(27,29,34,.12); } .c-b .ctx{ color:#3A2A08; }
.choice{ min-height:0; gap:7px; padding:11px 11px 10px; }
.choice .top{ font-size:19px; }
.choice .top .key{ margin-left:auto; }
.choice .top .side{ font-weight:900; }
.ftiles{ display:flex; gap:5px; }
.ftile{ flex:0 0 auto; width:64px; display:flex; flex-direction:column; align-items:center; gap:3px; }
.ftile img{ width:58px; height:58px; border-radius:12px; display:block; background:rgba(0,0,0,.18); }
.c-b .ftile img{ background:rgba(27,29,34,.12); }
.ftile span{ font-size:12px; font-weight:800; line-height:1.1; text-align:center; letter-spacing:-.005em; max-width:100%; hyphens:auto; overflow-wrap:break-word; }
.decide-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
.decide-foot .hint{ margin:0; text-align:left; }
.even{ display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 13px; border-radius:12px; border:1px solid rgba(237,234,227,.3); background:rgba(237,234,227,.06); color:var(--paint); font-weight:800; font-size:14px; cursor:pointer; flex-shrink:0; font-family:inherit; }
.even svg{ width:20px; height:20px; }
.even .key{ margin-left:4px; }
.q{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.q .serv{ font-size:12.5px; color:var(--muted); font-weight:600; }
.q .deja{ color:var(--led-hi); font-weight:800; }
@media (max-width:420px){ .choices{ gap:6px; } .choice{ padding-left:7px; padding-right:7px; } .ftile span{ letter-spacing:-.025em; } .ftile{ width:auto; flex:0 1 52px; min-width:0; } .ftile img{ width:100%; max-width:48px; height:auto; aspect-ratio:1 / 1; border-radius:10px; } .ftile span{ font-size:12px; } .choice .top{ font-size:17px; } .ftiles{ gap:3px; } .even{ min-height:38px; font-size:13px; padding:0 10px; } }
@media (min-width:760px){ .choice{ min-height:0; } .ftile{ width:76px; } .ftile img{ width:70px; height:70px; } .ftile span{ font-size:12px; } }
.pill.notes{ background:rgba(14,15,19,.78); color:var(--paint); font-weight:700; cursor:pointer; border:0; font-family:inherit; }
.pill.notes b{ color:var(--sci); font-variant-numeric:tabular-nums; }
.pill.notes svg{ width:15px; height:15px; color:var(--sci); }
.pill.notes.bump{ animation:nbump .8s ease; }
@keyframes nbump{ 30%{ transform:scale(1.12); box-shadow:0 0 0 6px rgba(63,203,126,.25); } }
.pill.calls{ background:rgba(14,15,19,.78); color:var(--paint); font-weight:700; }
.pill.calls b{ color:var(--gold); font-variant-numeric:tabular-nums; }
.pill.focus{ background:rgba(63,203,126,.16); color:#bff0d3; font-weight:700; border:1px solid rgba(63,203,126,.4); }
.pill.focus i{ width:8px; height:8px; border-radius:50%; background:var(--sci); box-shadow:0 0 8px var(--sci); animation:blink 1.2s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity:.35; } }
#notesDrawer{ inset:0; z-index:6; background:rgba(10,11,15,.6); display:grid; place-items:end center; padding:0 10px calc(env(safe-area-inset-bottom,0px) + 10px); }
#notesDrawer h3{ margin:4px 0 10px; font-size:19px; font-weight:900; }
.notelist{ display:grid; gap:8px; margin:0 0 6px; max-height:52vh; overflow:auto; }
.lnote{ display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; padding:10px 12px; border-radius:12px; background:rgba(237,234,227,.06); font-size:14.5px; line-height:1.4; }
.lnote svg{ width:20px; height:20px; margin-top:1px; }
.lnote.testing{ border:1px dashed rgba(63,203,126,.45); background:transparent; }
.lnote .when{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.notenew{ display:flex; gap:9px; align-items:flex-start; margin-top:10px; padding:9px 12px 8px; border-radius:12px; background:var(--sci-soft); border:1px solid rgba(63,203,126,.35); font-size:14px; line-height:1.4; }
.notenew svg{ width:20px; height:20px; flex-shrink:0; color:var(--sci); margin-top:1px; }
.notenew b{ color:#c9f5da; }
.dejaline{ margin-top:10px; padding:9px 12px 8px; border-radius:12px; background:rgba(157,185,245,.12); border:1px solid rgba(157,185,245,.35); font-size:14px; line-height:1.4; }
.dejaline b{ color:var(--led-hi); }
.revbtns{ display:grid; gap:8px; margin-top:12px; }
.revbtns .primary{ margin-top:0; position:relative; overflow:hidden; }
.revbtns .primary .auto{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--gold); transform-origin:left; transform:scaleX(0); }
.revbtns .primary.counting .auto{ animation:autofill linear forwards; }
@keyframes autofill{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
.express{ margin-top:10px; padding:11px 12px 12px; border-radius:14px; background:rgba(47,95,196,.16); border:1px solid rgba(110,150,240,.4); font-size:14px; line-height:1.4; }
.express p{ margin:0 0 9px; }
.express .row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.express .primary, .express .ghost{ margin-top:0; height:44px; min-height:44px; font-size:14.5px; }
#revHead small{ display:block; font-size:14px; font-weight:600; color:var(--muted); letter-spacing:0; margin-top:4px; }
.stick{ position:absolute; left:0; top:0; pointer-events:none; transform:translate(-50%,-100%); }
.sticker{ padding:6px 12px 5px; border-radius:999px; background:var(--sci); color:#0f2a1b; font-weight:900; font-size:14px; letter-spacing:.01em; display:inline-flex; gap:6px; align-items:center; box-shadow:0 8px 24px rgba(0,0,0,.35); opacity:0; transform:scale(.4) rotate(-8deg); transition:opacity .25s, transform .45s cubic-bezier(.2,1.6,.4,1); white-space:nowrap; }
.sticker svg{ width:15px; height:15px; }
.sticker.on{ opacity:1; transform:scale(1) rotate(-4deg); }
.sticker.even{ background:#cfcac0; color:#1B1D22; }
.bubble{ padding:7px 11px 6px; border-radius:12px; background:rgba(250,247,240,.95); color:#1B1D22; font-weight:700; font-size:13.5px; white-space:nowrap; box-shadow:0 8px 22px rgba(0,0,0,.3); opacity:0; transform:translateY(6px) scale(.92); transition:opacity .3s, transform .35s cubic-bezier(.2,1.4,.4,1); position:relative; }
.bubble::after{ content:""; position:absolute; left:50%; bottom:-6px; margin-left:-6px; border:6px solid transparent; border-bottom:0; border-top-color:rgba(250,247,240,.95); }
.bubble.on{ opacity:1; transform:none; }
.ftag{ padding:3px 8px 2px; border-radius:6px; background:rgba(14,15,19,.82); color:var(--paint); font-size:12px; font-weight:800; white-space:nowrap; opacity:0; transition:opacity .3s; transform:translate(-50%,-50%); }
.ftag.on{ opacity:1; }
@media (max-width:759px){ .ftag{ display:none; } }
#intro h1 span{ color:var(--sci); }
#intro .kick{ display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; padding:6px 11px 5px; border-radius:8px; background:rgba(12,15,20,.7); font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#bff0d3; }
#intro .kick .dot{ width:8px; height:8px; border-radius:50%; background:var(--sci); box-shadow:0 0 10px var(--sci); animation:blink 1.1s ease-in-out infinite; }
.introbtns{ display:grid; gap:8px; }
.introbtns .primary{ margin-top:0; }
.introbtns .ghost{ min-height:46px; height:46px; font-size:15px; display:flex; align-items:center; justify-content:center; }
.introbtns .ghost .key{ margin-left:8px; }
#setup{ bottom:0; }
.setup-card{ max-width:600px; }
.setup-top{ display:flex; justify-content:space-between; align-items:center; }
.setup-top .step{ font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.mback{ background:none; border:0; color:var(--paint); font:700 14px var(--font); cursor:pointer; padding:8px 4px; }
#setup h2{ margin:6px 0 4px; font-size:24px; font-weight:900; letter-spacing:-.015em; }
#setup .sub{ margin:0 0 12px; font-size:14.5px; line-height:1.45; color:#DDD8CC; }
.opts.list, .opts.map, .opts.pair{ display:grid; grid-template-columns:1fr; gap:6px; max-height:min(46vh, 420px); overflow-y:auto; padding:2px; }
.opts.map{ display:block; max-height:none; overflow:visible; }
.opts.two{ grid-template-columns:1fr 1fr; }
.srow{ display:flex; align-items:center; gap:12px; min-height:44px; padding:7px 14px; border-radius:13px; border:1.5px solid rgba(237,234,227,.18); background:rgba(237,234,227,.04); color:var(--paint); font:700 15px/1.25 var(--font); text-align:left; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.srow .lbl{ flex:1; }
.srow .n{ font-size:12px; font-weight:900; opacity:.45; min-width:14px; text-align:right; }
.srow:hover{ border-color:rgba(237,234,227,.4); }
.srow[aria-pressed="true"]{ background:var(--paint); color:var(--night); border-color:var(--paint); }
.opts.doc .srow{ min-height:64px; padding:6px 14px 6px 6px; }
.opts.doc .srow img{ width:52px; height:62px; object-fit:cover; border-radius:10px; background:radial-gradient(ellipse at 50% 30%, #4a4036, #1b1714 75%); }
.opts.age .srow{ min-height:40px; padding:5px 14px; }
.srow .ic{ width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; }
.srow .ic img{ width:34px; height:34px; }
.opts.map .wmap{ display:block; width:100%; max-width:min(100%, 62vh); height:auto; aspect-ratio:1000 / 540; margin:0 auto; touch-action:manipulation; }
.wmap .rg{ fill:rgba(237,234,227,.22); stroke:#1a1714; stroke-width:1.5; cursor:pointer; transition:fill .15s; }
.wmap .rg:hover{ fill:rgba(237,234,227,.36); }
.wmap .rg.pns{ fill:rgba(237,234,227,.1); }
.wmap .rg[aria-pressed="true"]{ fill:var(--gold); }
.wmap .pnst{ font:800 44px var(--font); fill:var(--paint); opacity:.75; pointer-events:none; }
.mapname{ text-align:center; font-size:20px; font-weight:900; margin:6px 0 2px; min-height:26px; }
.mapchips{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:6px 0 2px; }
.mapchips .chip{ min-height:34px; font:800 13.5px var(--font); color:var(--paint); background:rgba(237,234,227,.08); border:1.5px solid rgba(237,234,227,.25); border-radius:999px; padding:5px 10px 4px; cursor:pointer; }
.mapchips .chip[aria-pressed="true"]{ background:var(--gold); color:#17161D; border-color:var(--gold); }
.opts.pair{ grid-template-columns:1fr 1fr; overflow:visible; max-height:none; }
.pairb{ min-height:56px; border-radius:14px; border:1.5px solid rgba(237,234,227,.35); background:transparent; color:var(--paint); font:800 16px var(--font); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 10px; }
.pairb kbd{ font:800 12px var(--font); border:1.5px solid currentColor; border-bottom-width:2.5px; border-radius:6px; padding:0 5px; opacity:.6; }
.pairb.main{ background:var(--paint); color:var(--night); border-color:var(--paint); box-shadow:0 0 0 3px rgba(242,178,74,.45); }
.pairb .pl{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; text-align:center; color:inherit; }
.pairb .pl b{ display:block; margin:0; font:800 16px/1.2 var(--font); color:inherit; }
.pairb .pl small{ display:block; font:600 12.5px/1.3 var(--font); color:inherit; opacity:.8; }
.pairb:not(.main):hover{ border-color:rgba(237,234,227,.6); }
.pairb:not(.main)[aria-pressed="true"]{ border-color:var(--paint); background:rgba(237,234,227,.12); }
.setup-nav{ display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:12px; }
.setup-nav .primary{ margin-top:0; }
.setup-nav .ghost{ min-height:54px; height:54px; }
.setup-nav[hidden]{ display:none !important; }
.keys{ margin:10px 0 0; font-size:12.5px; color:var(--muted); text-align:center; }
.keys kbd, .story-hint kbd, .brief-skip kbd, .small kbd{ font:800 12px var(--font); border:1.5px solid currentColor; border-bottom-width:2.5px; border-radius:5px; padding:0 4px; }
@media (pointer: coarse){ .srow .n, .pairb kbd{ display:none; } }
@media (max-width:620px){ .opts.list, .opts.pair{ max-height:42vh; } .srow{ min-height:42px; font-size:14.5px; } .opts.map .wmap{ max-width:min(100%, 52vh); } }
#pause{ inset:0; z-index:7; background:rgba(10,11,15,.72); display:grid; place-items:center; padding:16px; }
#pause .card{ width:min(420px,100%); }
#pause h3{ margin:4px 0 6px; font-size:22px; font-weight:900; }
#pause p{ margin:0 0 12px; color:#DDD8CC; font-size:14.5px; line-height:1.5; }
#pause .btncol{ margin-top:4px; }
#pause .btncol .primary{ margin-top:0; }
#pause a.ghost{ display:flex; align-items:center; justify-content:center; text-decoration:none; }
.podium{ display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left; }
.podium .col h5{ margin:0 0 8px; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:center; }
.podium .col.sci h5{ color:var(--sci); }
.prow{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:14px; background:rgba(237,234,227,.06); margin-bottom:7px; }
.prow img{ width:52px; height:52px; border-radius:12px; background:rgba(0,0,0,.25); flex-shrink:0; }
.prow b{ font-size:15.5px; line-height:1.15; display:block; }
.prow em{ font-style:normal; font-size:12px; color:var(--muted); }
.prow .rk{ font-size:20px; font-weight:900; color:var(--gold); width:18px; text-align:center; flex-shrink:0; }
.col.sci .prow .rk{ color:var(--sci); }
.blind{ display:grid; gap:12px; }
.blind figure{ margin:0; display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; text-align:left; padding:12px; border-radius:20px; background:rgba(237,234,227,.07); border:1px solid rgba(237,234,227,.14); }
.blind figure img{ width:96px; height:96px; border-radius:16px; background:radial-gradient(ellipse at 50% 35%, #3d352d, #171411 75%); }
.blind figcaption span{ display:block; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.blind figcaption b{ display:block; font-size:22px; font-weight:900; margin:3px 0 4px; line-height:1.05; }
.blind figcaption em{ font-style:normal; font-size:14.5px; color:#E4DFD3; line-height:1.35; display:block; }
.blind figcaption em i{ font-style:normal; font-weight:900; color:var(--gold); } .blind figcaption em u{ text-decoration:none; font-weight:900; color:var(--sci); }
.blind .up{ border-color:rgba(242,178,74,.45); } .blind .down{ border-color:rgba(157,185,245,.45); }
.ax2 i.s{ border:3px solid var(--sci); background:#101217; }
.ax2 p em.nt{ color:var(--led-hi); }
.legend2 .sc{ color:var(--sci); }
.dejabig{ display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; }
.dejabig .bk{ padding:12px 10px; border-radius:16px; background:rgba(237,234,227,.07); }
.dejabig .bk span{ display:block; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.dejabig .bk b{ font-size:20px; }
.dejabig .ar{ font-size:26px; color:var(--led-hi); }
.legend .dot.s{ border:2px solid var(--sci); background:#101217; }
.axis .m.s{ border:2px solid var(--sci); background:#101217; }
.axis .name em.nt{ color:var(--led-hi); }
.axis.untested{ opacity:.55; }
.sec-sub{ margin:-2px 0 12px; }
.mlist{ display:grid; gap:8px; margin:0 0 20px; }
.mrow{ display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:8px 10px; border-radius:14px; background:rgba(237,234,227,.06); }
.mrow img{ width:44px; height:44px; border-radius:10px; background:rgba(0,0,0,.25); }
.mrow b{ font-size:15px; } .mrow span{ font-size:12.5px; color:var(--muted); display:block; }
.mrow .ranks{ text-align:right; font-size:13px; font-weight:800; white-space:nowrap; }
.mrow .ranks i{ font-style:normal; color:var(--gold); } .mrow .ranks u{ text-decoration:none; color:var(--sci); }
.chartbox{ position:relative; margin:0 0 22px; }
.chartbox svg{ display:block; width:100%; height:auto; overflow:visible; }
.chartbox .tip{ position:absolute; pointer-events:none; padding:7px 10px 6px; border-radius:10px; background:rgba(16,18,24,.96); border:1px solid var(--line); font-size:13px; line-height:1.35; white-space:nowrap; opacity:0; transition:opacity .12s; z-index:2; }
.chartbox .tip b{ color:var(--paint); } .chartbox .tip span{ color:var(--muted); }
.rk-row{ cursor:default; }
.rk-row:hover rect.hl, .rk-row.on rect.hl{ fill:rgba(237,234,227,.06); }
.kpis{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:0 0 18px; }
.kpis div{ background:rgba(237,234,227,.06); border-radius:14px; padding:10px 10px 9px; }
.kpis b{ display:block; font-size:20px; font-weight:900; font-variant-numeric:tabular-nums; }
.kpis span{ display:block; font-size:12px; color:var(--muted); line-height:1.3; margin-top:2px; }
.tiers{ display:grid; gap:8px; margin:0 0 22px; }
.tier{ display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; }
.tier > b{ font-size:15px; color:var(--gold); padding-top:7px; text-align:center; }
.tier .chipsr{ display:flex; flex-wrap:wrap; gap:5px; }
.tier .chipsr span{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 3px; border-radius:999px; background:rgba(237,234,227,.07); font-size:12.5px; font-weight:700; }
.tier .chipsr img{ width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.25); }
#results .previewbtn{ margin-top:10px; }
.shareimg{ display:block; width:100%; border-radius:16px; margin:10px 0 0; }
img.pending{ background:rgba(237,234,227,.08) !important; }
.count{ white-space:nowrap; }
@media (max-width:440px){ #hud .mark .mark-word, #story .mark .mark-word{ display:none; } #hud .mark .mark-game, #story .mark .mark-game{ border-left:0; padding-left:0; } }
@media (max-width:420px){ .choice .top .bw{ display:none; } }
#gl{ }
.cine{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.cine i{ position:absolute; left:0; right:0; height:0; background:#050608; transition:height .7s cubic-bezier(.65,0,.35,1); }
.cine .ct{ top:0; } .cine .cb{ bottom:0; }
.cine.on i{ height:7.5vh; }
@media (max-aspect-ratio: 4/5){ .cine.on i{ height:5vh; } }
.grain{ opacity:.06; mix-blend-mode:overlay; }
@media (prefers-reduced-motion: reduce){ .cine i{ transition:none; } }
#receiptView{ display:flex; align-items:flex-end; justify-content:center; padding:0 16px max(16px, env(safe-area-inset-bottom)); pointer-events:none; }
#receiptView .rcwrap{ pointer-events:auto; width:min(440px, 100%); max-height:calc(100dvh - 86px); display:flex; flex-direction:column; gap:10px; }
#receiptView:not(.hide) .rcpt{ animation:rcIn 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rcIn{ from{ transform:translateY(60vh) rotate(-1.5deg); } to{ transform:none; } }
.rcpt{ position:relative; overflow:auto; background:#f4f0e5; color:#2a2622; font-family:ui-monospace, Menlo, Consolas, monospace; padding:20px 18px 16px; border-radius:2px; box-shadow:0 30px 60px rgba(0,0,0,.55);
  -webkit-mask:linear-gradient(#000,#000) 0 10px/100% calc(100% - 20px) no-repeat, radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) 0 0/12px 10px repeat-x, radial-gradient(circle at 6px 10px, transparent 5px, #000 5.5px) 0 100%/12px 10px repeat-x;
          mask:linear-gradient(#000,#000) 0 10px/100% calc(100% - 20px) no-repeat, radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) 0 0/12px 10px repeat-x, radial-gradient(circle at 6px 10px, transparent 5px, #000 5.5px) 0 100%/12px 10px repeat-x; }
.rcpt header{ text-align:center; letter-spacing:.06em; border-bottom:1px dashed rgba(42,38,34,.4); padding:6px 0 10px; }
.rcpt header b{ display:block; font-size:17px; } .rcpt header small{ font-size:12px; opacity:.75; }
.rcintro{ font-size:12.5px; line-height:1.45; margin:10px 0 6px; opacity:.85; }
#rcLines{ list-style:none; margin:0; padding:0; }
.rl{ border-bottom:1px dashed rgba(42,38,34,.22); padding:8px 2px; cursor:pointer; }
.rl .rlb{ display:block; width:100%; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.rl .rlb:focus-visible{ outline:2px solid #2a2622; outline-offset:2px; }
.rl .l2{ display:block; }
.rl .l1{ display:grid; grid-template-columns:26px 1fr auto; gap:6px; align-items:baseline; font-size:13.5px; }
.rl .n{ opacity:.6; } .rl .what b{ font-weight:700; } .rl .mk{ font-weight:700; font-size:15px; }
.rl .l2{ margin:2px 0 0 32px; font-size:12px; opacity:.75; }
.rl.ok .mk{ color:#1f8a4c; } .rl.miss .mk{ color:#c0352a; } .rl.close .mk{ color:#7a7468; }
.rl .why{ display:none; margin:8px 0 2px 32px; font-size:12.5px; line-height:1.5; }
.rl.open .why{ display:block; animation:rise .35s ease both; }
.rl .why p{ margin:0 0 6px; } .rl .why i{ display:block; font-size:12px; opacity:.65; font-style:normal; }
.rctotal{ margin:12px 0 4px; font-size:14px; font-weight:700; display:flex; justify-content:space-between; border-top:2px solid #2a2622; padding-top:8px; }
.rcaside{ margin:2px 0 0; font-size:12.5px; opacity:.75; text-align:right; }
.rcfoot{ font-size:12px; line-height:1.45; opacity:.6; margin:8px 0 0; }
.rcbtns{ display:flex; gap:8px; } .rcbtns button{ flex:1; }
#replayCard .rpeye{ font-size:12.5px; color:var(--muted); margin:0 0 4px; letter-spacing:.02em; }
.rpbars{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:10px 0 4px; }
.rpcol h6{ margin:0 0 6px; font-size:13px; font-weight:800; display:flex; align-items:center; gap:6px; }
.rpcol.A h6{ color:var(--led-hi); } .rpcol.B h6{ color:var(--sodium); }
.rpcol h6 .tagS{ font-size:12px; font-weight:800; padding:2px 6px; border-radius:20px; background:var(--go); color:#0f2a1b; opacity:0; transform:scale(.6); transition:.4s cubic-bezier(.2,.8,.2,1); }
.rpcol.win h6 .tagS{ opacity:1; transform:none; }
.rpb{ display:grid; grid-template-columns:1fr; gap:3px; margin:0 0 7px; font-size:12px; color:var(--muted); }
.rpb .tr{ height:7px; border-radius:4px; background:rgba(237,234,227,.1); overflow:hidden; }
.rpb .tr i{ display:block; height:100%; width:0; border-radius:4px; background:var(--paint); transition:width .9s cubic-bezier(.2,.8,.2,1); }
.rpb.good .tr i{ background:var(--go); } .rpb.bad .tr i{ background:#e06a52; }
.rpwhy{ font-size:13.5px; line-height:1.5; margin:8px 0 4px; }
.rpwhy p{ margin:0 0 6px; } .rpwhy p b{ color:var(--paint); } .rpwhy i{ display:block; font-size:12px; color:var(--muted); font-style:normal; }
.slide .myth{ text-align:left; max-width:520px; margin:0 auto; }
.slide .myth .belief{ font-size:15px; color:var(--muted); margin:0 0 8px; }
.slide .myth h3{ font-size:clamp(26px, 6vw, 40px); line-height:1.05; margin:0 0 12px; letter-spacing:-.02em; }
.slide .myth .ev{ font-size:16px; line-height:1.5; margin:0 0 12px; }
.slide .myth .study{ font-size:13px; color:var(--muted); border-left:3px solid var(--go); padding:2px 0 2px 10px; margin:0 0 14px; }
.slide .myth .yours{ display:flex; align-items:center; gap:10px; font-size:14px; background:rgba(237,234,227,.06); border-radius:12px; padding:8px 10px; }
.slide .myth .yours img{ width:44px; height:44px; }
.slide .sealed .lnote{ text-align:left; }
.rpbars{ display:block; }
.rpg{ display:grid; grid-template-columns:auto 1fr 1fr; gap:6px 10px; align-items:center; }
.rpg h6{ margin:0; font-size:13px; font-weight:800; display:flex; align-items:center; gap:6px; } .rpg h6.A{ color:var(--led-hi); } .rpg h6.B{ color:var(--sodium); }
.rpg h6 .tagS{ font-size:12px; font-weight:800; padding:2px 6px; border-radius:20px; background:var(--go); color:#0f2a1b; opacity:0; transform:scale(.6); transition:.4s cubic-bezier(.2,.8,.2,1); }
.rpg h6.win .tagS{ opacity:1; transform:none; }
.rpg .lb{ font-size:12px; color:var(--muted); white-space:nowrap; }
.rpg .tr{ height:8px; border-radius:4px; background:rgba(237,234,227,.1); overflow:hidden; }
.rpg .tr i{ display:block; height:100%; width:0; border-radius:4px; transition:width .9s cubic-bezier(.2,.8,.2,1); }
.rpg .tr.good i{ background:var(--go); } .rpg .tr.bad i{ background:#e06a52; }
.locked{ position:relative; background:none !important; border:0 !important; padding:0 !important; margin-top:18px; text-align:left; }
.locked .teaser{ filter:blur(5px) saturate(.9); opacity:.9; pointer-events:none; user-select:none; max-height:440px; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 0%, #000 35%, transparent 92%); mask-image:linear-gradient(#000 0%, #000 35%, transparent 92%); }
.teaser h4{ margin:6px 0 10px; } .tz-axis{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; margin:0 0 6px 40%; } .tz-axis span:first-child{ color:#E06A52; } .tz-axis span:last-child{ color:var(--go); }
.tz-row{ display:grid; grid-template-columns:28px minmax(0, 36%) 1fr; gap:10px; align-items:center; height:34px; font-size:13.5px; }
.tz-row img{ width:26px; height:26px; } .tz-row b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tz-tr{ position:relative; height:12px; border-top:1px dashed rgba(237,234,227,.1); top:6px; } .tz-tr i{ position:absolute; top:-7px; height:12px; }
.tz-tr .band{ background:rgba(242,178,74,.22); border-radius:6px; } .tz-tr .you{ width:12px; margin-left:-6px; border-radius:50%; background:var(--sodium); } .tz-tr .sci{ width:13px; margin-left:-6.5px; border-radius:50%; border:2.5px solid var(--go); box-sizing:border-box; }
.tz-tiers{ display:flex; gap:8px; } .tz-tiers i{ flex:1; height:44px; border-radius:10px; background:rgba(237,234,227,.08); }
.locked .gate{ position:relative; margin-top:-150px; padding:24px 4px 4px; text-align:center; background:linear-gradient(rgba(16,18,23,0), rgba(16,18,23,.97) 40%); }
.locked .gate h4{ font-size:20px; margin:0 0 6px; } .locked .gate .cta{ display:inline-flex; margin:12px auto 8px; }
.srcnote{ margin:-4px 0 10px; opacity:.8; }
.nsx{ display:inline-block; margin:3px 0 0 6px; padding:0 6px; border:1px solid currentColor; border-radius:4px; font-size:12px; line-height:16px; font-weight:700; letter-spacing:.02em; opacity:.7; white-space:nowrap; vertical-align:1px; }
:root{ --site-font:"Urbanist","Avenir Next","Helvetica Neue",Arial,sans-serif; }
.site-wordmark{ font-family:var(--site-font); font-weight:500; letter-spacing:-.035em; }
.ld-card{ animation:ldcard3 12s linear infinite both; animation-delay:calc(var(--i) * 4s); }
@keyframes ldcard3{ 0%{ opacity:0; transform:translateY(10px); visibility:visible; } 4%{ opacity:1; transform:none; } 30%{ opacity:1; transform:none; } 33.3%{ opacity:0; transform:translateY(-8px); visibility:hidden; } 100%{ opacity:0; visibility:hidden; } }
.ld-dots i{ animation:lddot3 12s linear infinite both; animation-delay:calc(var(--i) * 4s); }
@keyframes lddot3{ 0%{ background:rgba(237,234,227,.22); } .5%, 33%{ background:var(--sodium); } 33.4%, 100%{ background:rgba(237,234,227,.22); } }
.timer.late i{ background:var(--signal); }
#loading{ background:radial-gradient(ellipse at 50% 38%, #3a2a26, #1a1714 70%); }
small { font-size: max(12px, .83em); }