@font-face{font-family:Unbounded;src:url('/fonts/meridian/unbounded-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Unbounded;src:url('/fonts/meridian/unbounded-cyrillic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0400-052F}
@font-face{font-family:Onest;src:url('/fonts/meridian/onest-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Onest;src:url('/fonts/meridian/onest-cyrillic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0400-052F}
@font-face{font-family:Mono;src:url('/fonts/meridian/jbmono-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Mono;src:url('/fonts/meridian/jbmono-cyrillic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0400-052F}
:root{color-scheme:dark;--bg:#0c1220;--panel:#131d2d;--line:#2b3749;--ink:#f4f4ef;--muted:#a3afc1;--lime:#dfff80;--orange:#ff856f;--accent:var(--lime);--display:Unbounded,Arial,sans-serif;--body:Onest,'Segoe UI',sans-serif;--mono:Mono,monospace}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--body);min-height:100dvh;background-image:radial-gradient(ellipse at 80% 0%,#21314255,transparent 55%)}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--lime);outline-offset:5px}button{color:inherit}h1,h2,h3,p{margin:0}button svg{width:18px}mark{color:var(--bg);background:var(--lime);padding:0 .12em}::selection{background:var(--lime);color:var(--bg)}[hidden]{display:none!important}
.topbar{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:28px 44px;gap:20px;border-bottom:1px solid #ffffff10}.brand{font:650 18px/1.12 var(--display);letter-spacing:-1px;text-decoration:none;display:flex;gap:4px}.brand>span{color:var(--lime)}.brand-dot{color:var(--orange)}.byline{font:10px var(--mono);letter-spacing:1.2px;color:var(--muted)}.byline a{text-decoration:none;color:#e3e8ef;margin-left:6px}.lang{display:flex;border:1px solid var(--line);border-radius:24px;padding:3px;gap:3px}.lang button{border:0;border-radius:20px;padding:7px 10px;background:none;font:11px var(--mono);color:var(--muted)}.lang button[aria-pressed=true]{background:#e7eada;color:#111827}
main{max-width:1352px;margin:auto;padding:0 44px}footer{max-width:1352px;margin:36px auto 0;padding:22px 44px;border-top:1px solid #ffffff12;display:flex;justify-content:space-between;gap:16px;color:#9aa6b8;font-size:11px}footer button{color:var(--muted);background:none;border:0;font-size:11px;text-decoration:underline;text-underline-offset:3px}.loading{padding:100px 0;text-align:center}.eyebrow{font:11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);display:flex;align-items:center;gap:10px}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 16px #dfff8070}.pill{border:1px solid var(--line);padding:6px 12px;border-radius:99px;font-size:11px;color:var(--muted)}
.intro{display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:60px;padding:65px 0 35px;min-height:620px}.intro h1{font:600 clamp(38px,4.2vw,62px)/1.16 var(--display);letter-spacing:-2.3px;margin:25px 0}.intro h1 span{color:var(--lime);display:block}.intro-copy>p{max-width:430px;color:#b9c4d3;font-size:18px;line-height:1.7}.intro .actions{margin-top:32px}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.primary{border:0;background:var(--lime);color:#101825;font-weight:700;padding:16px 24px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:25px;text-decoration:none;transition:transform .18s,box-shadow .18s;min-height:52px}.primary:hover{transform:translateY(-2px);box-shadow:0 7px 25px #dfff8020}.primary:active{transform:translateY(1px)}.arrow{font-size:23px;font-weight:400;line-height:1}.text-btn{background:transparent;border:0;color:#bcc6d5;padding:12px 5px;font-size:13px;text-decoration:underline;text-underline-offset:5px}.micro{font:11px/1.6 var(--mono);color:#99a7b9;margin-top:18px}.intro-meta{display:flex;gap:22px;margin-top:35px;font-size:12px;color:#a7b3c5}.intro-meta span::before{content:'↳';color:var(--lime);margin-right:8px}
.preview{position:relative;isolation:isolate;min-width:0;padding:24px;border:1px solid #3a4858;border-radius:20px;background:linear-gradient(160deg,#1c2a3c,#111a28 65%);box-shadow:0 32px 90px #0004;transform:rotate(1deg)}.preview::after{content:'';position:absolute;inset:12px -12px -12px 12px;border:1px solid #ffffff16;border-radius:20px;z-index:-1}.preview-head{display:flex;justify-content:space-between;align-items:center;font:10px var(--mono);letter-spacing:1px;color:var(--muted)}.preview .big-number{font:600 clamp(52px,6vw,86px)/1.1 var(--display);letter-spacing:-4px;margin-top:20px}.preview .sub{color:#aebbd0;font-size:13px;margin-top:6px}.preview-canvas{width:100%;height:195px;display:block;margin-top:22px;opacity:.75}.inbox-note{display:flex;gap:12px;align-items:center;background:#f0f0e9;color:#192131;padding:16px;border-radius:11px;margin:8px -38px -5px 28px;transform:rotate(-3deg);box-shadow:0 12px 25px #0004;font-size:13px}.inbox-note p{line-height:1.5}.inbox-note strong{font-size:11px;color:#546079;display:block;margin-bottom:3px}.avatar{flex:0 0 34px;height:34px;display:grid;place-items:center;background:#dfff80;color:#192131;border-radius:10px;font-weight:750}.avatar.coral{background:#ffab95}.inbox-tag{position:absolute;right:4%;top:44%;background:var(--lime);color:#1b2530;transform:rotate(7deg);padding:9px 14px;font:650 12px var(--display);box-shadow:0 8px 20px #0003}.bottom-strip{border-top:1px solid #ffffff15;padding-top:23px;display:flex;justify-content:space-between;align-items:center;color:#a0adbf;font-size:12px}.bottom-strip strong{color:var(--ink);font-weight:500}.mini-dots{color:var(--lime);letter-spacing:4px;font-size:18px}
.game-top{display:flex;align-items:center;justify-content:space-between;padding:25px 0;gap:12px}.case-label{font:11px var(--mono);color:var(--muted);letter-spacing:1px}.steps{display:flex;gap:8px}.step{width:50px;height:4px;background:#2d394b;border-radius:4px}.step.active{background:var(--accent);box-shadow:0 0 18px #dfff8040}.step.done{background:#708951}.case-caption{font:11px var(--mono);color:var(--accent)}.workspace{display:grid;grid-template-columns:minmax(0,1.17fr) minmax(350px,1fr);gap:24px;align-items:start}.universe{position:relative;border:1px solid #334055;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#33462d55,transparent 70%),#101927;min-width:0}.universe-top{padding:25px 28px 0;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font:10px var(--mono);letter-spacing:1px}.count-wrap{padding:20px 28px 0}.count{font:600 clamp(46px,5.5vw,78px)/1.12 var(--display);letter-spacing:-3px;font-variant-numeric:tabular-nums;display:block}.count-caption{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;margin-top:8px}.delta{color:var(--orange);font:11px var(--mono)}.universe canvas{display:block;width:100%;height:245px;padding:0 18px}.universe .axis{display:flex;justify-content:space-between;border-top:1px solid #ffffff0a;margin:0 28px;padding:12px 0;font:10px var(--mono);color:#95a4b8}.definition{padding:17px 28px 20px;border-top:1px solid #ffffff12;background:#080f1960;min-height:86px}.definition small{display:block;font:9px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}.definition p{font-size:13px;color:#d9e0e9;line-height:1.65}.definition em{font-style:normal;color:var(--accent)}.universe.passed{border-color:#aaca6870}.universe.passed .count{color:var(--lime)}.board-stamp{position:absolute;right:26px;top:115px;border:2px solid var(--lime);border-radius:6px;padding:7px 10px;color:var(--lime);font:700 12px var(--mono);transform:rotate(-9deg);animation:stamp .38s cubic-bezier(.2,1.6,.4,1)}
.control{min-width:0}.request{padding:5px 0 22px;border-bottom:1px solid var(--line)}.person{display:flex;align-items:center;gap:11px;margin-bottom:16px}.person b{display:block;font-size:13px}.person small{display:block;color:var(--muted);font-size:11px;margin-top:1px}.person .time{margin-left:auto;font:10px var(--mono);color:var(--muted)}.request h1{font:550 clamp(20px,2vw,27px)/1.45 var(--display);letter-spacing:-.65px}.request>p{color:#bcc8d7;margin-top:13px;font-size:14px;line-height:1.7}.request .purpose{margin-top:14px;color:var(--accent);font-size:11px;display:flex;gap:7px;align-items:center}.filter-heading{display:flex;justify-content:space-between;align-items:center;margin:22px 0 12px;font-size:12px;color:#c4cedb}.filter-heading span{font:10px var(--mono);color:var(--muted)}.filters{display:grid;grid-template-columns:1fr 1fr;gap:9px}.filter{position:relative;background:#172131;border:1px solid #334056;border-radius:11px;text-align:left;padding:12px;min-height:68px;transition:background .18s,border-color .18s;display:flex;align-items:center;gap:10px}.filter:hover{background:#202d41;border-color:#76869b}.filter[aria-pressed=true]{border-color:var(--accent);background:#dfff800a}.filter[aria-pressed=true] .check-icon{background:var(--accent);border-color:var(--accent);color:#0c1420}.check-icon{width:19px;height:19px;border:1px solid #69778b;border-radius:6px;display:grid;place-items:center;flex:0 0 19px;color:transparent;font-size:12px}.filter b{font-size:12px;display:block;font-weight:550}.filter small{font-size:10px;color:#94a3b8;display:block;margin-top:2px}.filter:disabled{opacity:.75}.submit-row{margin-top:18px;display:flex;gap:15px;align-items:center}.submit-row .primary{flex:1}.reset{border:0;background:none;color:var(--muted);padding:12px 0;font-size:11px}.feedback{margin-top:15px;border-left:2px solid var(--orange);padding:10px 14px;background:#ff856f09;color:#dce2eb;font-size:13px;line-height:1.7}.feedback strong{display:block;color:#ffc1af;font-weight:600;margin-bottom:2px}.help-row{display:flex;justify-content:space-between;margin-top:16px;gap:12px}.help-row button{border:0;background:none;color:#9eacc0;font-size:11px;padding:5px 0;text-decoration:underline;text-underline-offset:4px}.hint{margin-top:12px;font-size:12px;color:#c7d2df;padding:12px 15px;background:#172334;border-radius:8px}.evidence{margin-top:18px;padding:17px;border:1px solid var(--line);border-radius:12px}.evidence h2{font-size:13px;font-weight:600}.evidence p{font-size:11px;color:var(--muted);margin:5px 0 12px}.table-scroll{overflow:auto}.evidence table{width:100%;border-collapse:collapse;font:10px/1.5 var(--mono);white-space:nowrap}.evidence th,.evidence td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}.evidence th{color:var(--muted);font-weight:400}.zero{padding:12px 0;color:var(--muted);font-size:12px}
.receipt{background:#eef0e6;color:#1a2631;padding:24px;border-radius:14px;position:relative;animation:arrive .4s ease-out}.receipt>.eyebrow{color:#4f6c3f}.receipt h2{font:600 23px/1.4 var(--display);letter-spacing:-.7px;margin:15px 0}.receipt .receipt-count{font:600 48px/1.1 var(--display);letter-spacing:-2px;padding:14px 0 17px;border-bottom:1px dashed #a1aa99}.receipt p{font-size:14px;line-height:1.7;color:#435145;margin-top:16px}.receipt .reply{border-left:2px solid #6d8b55;padding-left:13px;font-size:13px;color:#3a5140}.receipt .primary{width:100%;margin-top:22px;background:#162431;color:#f1f4e9}.receipt .hint-label{display:block;font-size:10px;color:#687567;margin-top:13px}.round-success{margin-bottom:18px;font:11px var(--mono);letter-spacing:.3px;color:#bdd390;display:flex;gap:8px;align-items:center}.secondary{border:1px solid var(--line);background:transparent;border-radius:10px;padding:13px 18px;color:#d9e0eb;font-size:13px;text-decoration:none}
.final{padding:44px 0 10px;animation:arrive .5s ease-out}.final-heading{max-width:790px}.final h1{font:600 clamp(29px,3.4vw,47px)/1.25 var(--display);letter-spacing:-1.5px;margin:20px 0 16px}.final-heading>p{color:#acb9cb;font-size:17px;max-width:660px}.answers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0}.answer-card{border:1px solid var(--line);border-radius:14px;background:#142031;padding:23px;position:relative;overflow:hidden}.answer-card::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--card-color)}.answer-card .name{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}.answer-card .answer{font:550 clamp(30px,3vw,43px)/1.1 var(--display);letter-spacing:-1.5px;margin:20px 0 12px;color:var(--card-color)}.answer-card p{font-size:12px;color:#c4ceda;min-height:38px}.answer-card small{font:10px var(--mono);color:var(--muted);display:block;margin-top:13px}.insight{display:flex;align-items:center;gap:20px;padding:20px 24px;background:#dfff8009;border:1px solid #dfff8030;border-radius:12px;font-size:14px;color:#cbd7ba}.insight strong{font-weight:600;color:var(--lime)}.insight-icon{font:400 30px var(--display);color:var(--lime)}.bridge{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px;background:#eaece4;color:#182432;border-radius:18px;padding:32px}.bridge .eyebrow{color:#687467}.bridge h2{font:600 25px/1.4 var(--display);letter-spacing:-.8px;margin:14px 0}.bridge p{font-size:14px;color:#50604e;max-width:450px;line-height:1.7}.bridge .primary{background:#172331;color:white;margin-top:20px;font-size:13px}.bridge small{display:block;color:#657260;font-size:10px;margin-top:12px}.teaser{background:#182433;border-radius:12px;padding:25px;color:#f2f3ee;display:flex;flex-direction:column;justify-content:center}.teaser .tag{font:10px var(--mono);color:#9aaabd}.teaser .growth{font:600 54px/1 var(--display);color:#ff9f77;margin:19px 0 12px;letter-spacing:-2px}.teaser p{font-size:12px;color:#b8c5d4}.teaser-bars{display:flex;gap:7px;height:52px;align-items:end;margin-top:22px}.teaser-bars i{height:var(--bar);background:#8b9caf;width:100%;border-radius:3px 3px 0 0}.teaser-bars i:nth-last-child(-n+3){background:#ff875f}.final-actions{display:flex;align-items:center;justify-content:space-between;margin-top:20px;gap:12px}.share-note{color:var(--lime);font-size:12px;min-height:20px}.share-fallback{width:100%;margin-top:12px;background:#142031;color:#e8eddf;border:1px solid var(--line);border-radius:8px;padding:12px;font:12px var(--body)}.demo-banner{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;background:#e9ece2;color:#152331;padding:12px 20px;border-radius:40px;z-index:10;box-shadow:0 4px 30px #0006;font-size:12px}.demo-banner button{background:#162331;color:white;border:0;border-radius:30px;padding:6px 13px}.screen-reader{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes stamp{from{opacity:0;transform:rotate(-12deg) scale(1.6)}to{opacity:1;transform:rotate(-9deg) scale(1)}}
@media(min-width:1600px){.intro{padding-top:85px;min-height:690px}.universe canvas{height:285px}}
@media(max-width:1000px){main{padding:0 28px}.topbar{padding:23px 28px}.intro{gap:35px}.intro h1{font-size:39px;letter-spacing:-1.5px}.intro-copy>p{font-size:16px}.preview{padding:20px}.inbox-note{margin-right:-22px;margin-left:5px}.workspace{grid-template-columns:1fr 1fr;gap:20px}.count{font-size:53px}.filter{padding:10px;gap:8px}.filter b{font-size:11px}.request h1{font-size:21px}.universe canvas{height:260px}.bridge{gap:25px}}
@media(max-width:720px){.topbar{padding:20px}.byline{display:none}.brand{font-size:16px}main{padding:0 20px}.intro{grid-template-columns:1fr;gap:35px;padding:32px 0;min-height:0}.intro h1{font-size:clamp(32px,8.5vw,46px);margin:19px 0;letter-spacing:-1.3px}.intro-copy>p{font-size:15px;max-width:440px}.intro .actions{margin-top:24px}.intro .primary{width:100%}.intro .actions .text-btn{width:100%;padding:2px}.intro-meta{margin-top:20px;justify-content:space-between;gap:8px;font-size:10px}.preview{margin:0 9px 9px 0;padding:20px;transform:rotate(1deg)}.preview .big-number{font-size:57px}.preview-canvas{height:160px;margin-top:15px}.inbox-note{margin-right:-24px;font-size:12px}.bottom-strip{font-size:11px;gap:20px}.bottom-strip>span:last-child{display:none}.game-top{padding:18px 0}.case-caption{display:none}.step{width:33px}.workspace{display:flex;flex-direction:column;gap:18px}.universe{width:100%;border-radius:14px}.universe-top{padding:17px 19px 0;font-size:9px}.count-wrap{padding:10px 19px 0}.count{font-size:49px;letter-spacing:-2px}.count-caption{margin-top:4px;font-size:11px}.universe canvas{height:125px}.universe .axis{margin:0 19px;padding:9px 0;font-size:9px}.definition{padding:12px 19px;min-height:0}.definition small{font-size:8px;margin-bottom:4px}.definition p{font-size:11px}.control{width:100%}.request{padding-top:0;padding-bottom:15px}.person{margin-bottom:12px}.request h1{font-size:21px;letter-spacing:-.6px}.request>p{font-size:13px;margin-top:10px}.request .purpose{margin-top:10px}.filter-heading{margin-top:17px}.filter{min-height:62px;padding:11px}.filter b{font-size:12px}.filters{gap:8px}.submit-row{margin-top:14px}.primary{padding:14px 20px}.board-stamp{top:53px;right:20px;font-size:10px;padding:5px 8px}.receipt{padding:21px}.receipt .receipt-count{font-size:41px}.receipt h2{font-size:21px}.final{padding-top:27px}.final h1{font-size:29px;letter-spacing:-1px}.final-heading>p{font-size:14px}.answers{grid-template-columns:1fr;gap:10px;margin:22px 0}.answer-card{padding:17px 19px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.answer-card .answer{grid-column:2;grid-row:1/3;margin:0;align-self:center;justify-self:end;font-size:32px}.answer-card p{min-height:0;font-size:11px}.answer-card small{grid-column:1/3;margin-top:3px}.insight{padding:17px;font-size:12px;gap:12px}.bridge{grid-template-columns:1fr;padding:23px;gap:23px;margin-top:22px}.bridge h2{font-size:22px}.bridge p{font-size:13px}.bridge .primary{width:100%;gap:15px}.teaser{padding:21px}.teaser .growth{font-size:44px;margin:14px 0}.final-actions{flex-wrap:wrap}.final-actions .secondary{width:100%}footer{padding:20px;margin-top:25px;flex-wrap:wrap;font-size:10px}.demo-banner{width:max-content;max-width:95%;font-size:11px;gap:10px}}
/* On a phone the question precedes the live result; filters remain close enough
   to see the result change without scrolling back through a large dashboard. */
@media(max-width:720px){
  .intro{display:flex;flex-direction:column;gap:0;padding:22px 0 20px;align-items:stretch}
  .intro-copy{display:contents}.intro .eyebrow{order:0;font-size:9px}
  .intro h1{order:1;font-size:28px;line-height:1.2;margin:13px 0 18px;letter-spacing:-1px}
  .intro h1 span{display:inline}
  .intro .preview{order:4;padding:18px;margin:22px 9px 0 0}
  .intro .preview .big-number{font-size:64px;margin-top:14px}
  .intro .preview-canvas{height:clamp(180px,27svh,270px);opacity:1;margin-top:12px}
  .intro .inbox-tag{top:43%;font-size:11px}
  .intro .inbox-note{padding:12px;margin-top:0;margin-bottom:-1px}
  /* The start button stays on the first screen of any phone; the animated preview follows it. */
  .intro-copy>p{order:2;font-size:13px;line-height:1.5;margin-top:0}
  .intro .actions{order:3;margin-top:12px}.intro-meta{order:5;margin-top:16px}
  .topbar{padding:16px 20px}.game-top{padding:14px 0}
  .workspace{display:flex;gap:0}.control{display:contents}
  .request{order:0;border-bottom:0;padding-bottom:0}.request .purpose{display:none}
  .person{margin-bottom:9px}.request h1{font-size:19px;line-height:1.4}
  .request>p{line-height:1.6;margin-top:8px}
  .universe{order:1;margin-top:16px}.universe-top{display:none}
  .count-wrap{padding:12px 16px 0}.count{font-size:36px}
  .universe canvas{height:76px;padding:0 10px}.universe .axis{padding:6px 0;margin:0 16px}
  .definition{display:none}.filter-heading,.filters,#feedback,.submit-row,.help-row,.hint{order:2}
  .filter-heading{margin:15px 0 9px}.filter{min-height:59px;padding:9px;gap:7px}.filter b{font-size:11px}
  .round-success{order:2;margin:20px 0 12px}.receipt{order:3}
  .board-stamp{top:19px;right:17px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Claude pass: evidence as people, share of the crowd in the finale, stamp that never covers numbers */
.people{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.people li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#101927}
.people .who{display:flex;align-items:baseline;gap:8px;min-width:120px}
.people .who b{font:600 12px var(--mono);color:#e8eef6}
.people .who em{font-style:normal;font:10px var(--mono);color:var(--muted);padding:2px 6px;border-radius:6px;background:#1c2738}
.people .facts{display:flex;flex-wrap:wrap;gap:6px}
.people .fact{font-size:11px;color:#7d8da3;padding:3px 8px;border-radius:999px;border:1px solid #273345}
.people .fact.on{color:#0c1420;background:var(--accent);border-color:var(--accent)}
.answer-card .share-bar{display:block;height:4px;border-radius:4px;background:#243044;margin-top:14px;position:relative;overflow:hidden}
.answer-card .share-bar::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--card-color);border-radius:4px}
.board-stamp{top:22px;right:24px}
.universe.passed .universe-top span:last-child{visibility:hidden}
.filter-heading{gap:12px;flex-wrap:wrap}
@media(max-width:720px){.board-stamp{top:14px;right:16px}.answer-card .share-bar{grid-column:1/3;margin-top:6px}}
/* Atterna funnel pass: readable sizes, gut check, share card and the bridge into Atterna. */
.request>p{font-size:16px}.person b{font-size:14px}.person small{font-size:12px}
.filter b{font-size:14px}.filter small{font-size:12px;line-height:1.35}.filter{min-height:72px}
.filter-heading{font-size:13px}.help-row button,.reset{font-size:13px}.hint,.feedback{font-size:14px}.definition p{font-size:14px}footer,footer button{font-size:12px}
.gut{margin-top:22px;padding:22px;border:1px solid #334056;border-radius:14px;background:#131d2d;display:grid;gap:12px}
.gut label{font-size:15px;font-weight:600;color:#e8edf4}
.gut output{font:600 clamp(40px,4.2vw,60px)/1 var(--display);letter-spacing:-2px;color:var(--accent);font-variant-numeric:tabular-nums}
.gut input[type=range]{width:100%;accent-color:var(--accent);height:28px}
.gut-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:-6px}
.gut p{margin:0;font-size:13px;color:var(--muted)}
.gut .primary{justify-self:start}
.gut-result{font-size:15px!important;color:#233126!important}
.gut-result b{font-variant-numeric:tabular-nums}
.first-try{display:inline-block;padding:1px 8px;border-radius:99px;background:#dfff80;color:#101825;font-weight:700;font-size:12px}
.guess-line{margin-top:10px;font-size:13px;color:#d9e0eb}
.guess-line b{color:var(--ink)}
.final-actions.share-first{margin:6px 0 4px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bridge.atterna{margin-top:40px}
.bridge .features{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:12px}
.bridge .features li{display:grid;gap:3px;padding-left:16px;border-left:3px solid #6d8b55}
.bridge .features b{font-size:15px;color:#101825}
.bridge .features span{font-size:14px;color:#435145;line-height:1.55}
.bridge-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px}
@media (min-width:1680px){body{zoom:1.12}}
@media (min-width:1920px){body{zoom:1.22}}
@media (min-width:2400px){body{zoom:1.4}}
/* Atterna identity (ADR-042): paper, ink and one signal colour instead of neon on navy.
   Data-journalism restraint: white panels with hairlines, no glows, gradients or tilted cards. */
:root{color-scheme:light;--bg:#F3F5F7;--panel:#FFFFFF;--line:#E1E6EC;--line-2:#CFD6DF;--ink:#0E1726;--ink-2:#27324A;--muted:#5B6677;--faint:#8C96A6;--lime:#FF6B35;--orange:#E5484D;--good:#0F9D76;--accent:var(--lime)}
body{background:var(--bg);background-image:none;color:var(--ink)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:var(--lime)}
mark{color:#fff;background:var(--lime)}::selection{background:var(--lime);color:#fff}
.topbar{border-bottom:1px solid var(--line)}.brand{color:var(--ink)}.brand>span{color:var(--lime)}.brand-dot{color:var(--ink)}
.byline{color:var(--faint)}.byline a{color:var(--ink)}
.lang{border-color:var(--line-2);background:#fff}.lang button{color:var(--muted)}.lang button[aria-pressed=true]{background:var(--ink);color:#fff}
footer{border-top:1px solid var(--line);color:var(--muted)}footer button{color:var(--muted)}
.eyebrow{color:var(--faint);letter-spacing:1px}.live-dot{background:var(--lime);box-shadow:none}
.intro h1{color:var(--ink)}.intro h1 span{color:var(--lime)}.intro-copy>p{color:var(--ink-2)}.intro-meta{color:var(--muted)}.intro-meta span::before{color:var(--lime)}
.primary{background:var(--lime);color:var(--ink)}.primary:hover{box-shadow:0 8px 22px rgba(255,107,53,.25)}
.text-btn{color:var(--ink-2)}.micro{color:var(--muted)}
.secondary{border-color:var(--line-2);color:var(--ink);background:#fff}
.preview{background:#fff;border-color:var(--line);box-shadow:0 24px 60px rgba(14,23,38,.08);transform:none}.preview::after{display:none}
.preview-head{color:var(--faint)}.preview .big-number{color:var(--ink)}.preview .sub{color:var(--muted)}.preview-canvas{opacity:1}
.inbox-note{background:var(--ink);color:#fff;transform:none;box-shadow:0 14px 30px rgba(14,23,38,.18);margin:12px 0 0}.inbox-note strong{color:#C9D3E4}
.inbox-tag{background:var(--lime);color:#fff;transform:none;box-shadow:none;border-radius:8px}
.avatar{background:#FFE4D9;color:#9A3412}.avatar.coral{background:#FFE4D9;color:#9A3412}
.bottom-strip{border-top:1px solid var(--line);color:var(--muted)}.bottom-strip strong{color:var(--ink)}.mini-dots{color:var(--lime)}
.case-label{color:var(--faint)}.case-caption{color:var(--ink-2)}
.step{background:var(--line)}.step.active{box-shadow:none}.step.done{background:var(--good)}
.universe{background:#fff;border-color:var(--line)}.universe-top{color:var(--faint)}.count{color:var(--ink)}.count-caption{color:var(--muted)}.delta{color:var(--orange)}
.universe .axis{border-top-color:var(--line);color:var(--faint)}
.definition{background:#F8F9FB;border-top:1px solid var(--line)}.definition small{color:var(--faint)}.definition p{color:var(--ink-2)}
.universe.passed{border-color:var(--accent)}.universe.passed .count{color:var(--accent)}
.board-stamp{transform:none;border-radius:999px;border:0;background:var(--accent);color:#fff;font-weight:600;animation:arrive .3s ease-out}
.request{border-bottom-color:var(--line)}.request h1{color:var(--ink)}.request>p{color:var(--ink-2)}.person small,.person .time{color:var(--muted)}
.filter-heading{color:var(--ink-2)}.filter-heading span{color:var(--faint)}
.filter{background:#fff;border-color:var(--line-2)}.filter:hover{background:#F8F9FB;border-color:var(--ink)}
.filter[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,#fff)}
.filter[aria-pressed=true] .check-icon{background:var(--accent);border-color:var(--accent);color:#fff}
.check-icon{border-color:var(--faint)}.filter small{color:var(--muted)}
.reset{color:var(--muted)}.feedback{border-left-color:var(--orange);background:#FDECEC;color:var(--ink)}.feedback strong{color:#B42318}
.help-row button{color:var(--muted)}.hint{background:#EBEEF2;color:var(--ink-2)}
.evidence{border-color:var(--line);background:#fff}.evidence p,.evidence th{color:var(--muted)}
.people li{background:#fff;border-color:var(--line)}.people .who b{color:var(--ink)}.people .who em{background:#EBEEF2;color:var(--muted)}
.people .fact{color:var(--muted);border-color:var(--line)}.people .fact.on{color:#fff;background:var(--accent);border-color:var(--accent)}
.receipt{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 44px rgba(14,23,38,.07)}.receipt>.eyebrow{color:var(--faint)}
.receipt .receipt-count{border-bottom-color:var(--line-2);color:var(--ink)}.receipt p{color:var(--ink-2)}.receipt .reply{border-left-color:var(--accent);color:var(--ink-2)}
.receipt .primary{background:var(--ink);color:#fff}.receipt .hint-label{color:var(--muted)}.round-success{color:var(--good);font-weight:600}
.gut-result{color:var(--ink-2)!important}.first-try{background:var(--good);color:#fff}
.final h1{color:var(--ink)}.final-heading>p{color:var(--ink-2)}
.answer-card{background:#fff;border-color:var(--line)}.answer-card .name{color:var(--muted)}.answer-card p{color:var(--ink-2)}.answer-card small{color:var(--faint)}
.answer-card .share-bar{background:#EBEEF2}.guess-line{color:var(--ink-2)}.guess-line b{color:var(--ink)}
.insight{background:#FFF4EE;border-color:#FFE4D9;color:var(--ink-2)}.insight strong{color:#C2410C}.insight-icon{color:var(--lime)}
.bridge{background:#EBEEF2;color:var(--ink)}.bridge .eyebrow{color:var(--faint)}.bridge p{color:var(--ink-2)}.bridge small{color:var(--muted)}
.bridge .features li{border-left-color:var(--lime)}.bridge .features b{color:var(--ink)}.bridge .features span{color:var(--ink-2)}
.bridge .primary,.bridge-cta .primary{background:var(--lime);color:var(--ink)}
.teaser{background:var(--ink);color:#fff}.teaser .tag{color:#8C96A6}.teaser .growth{color:var(--lime)}.teaser p{color:#C9D3E4}.teaser-bars i{background:#3A4760}.teaser-bars i:nth-last-child(-n+3){background:var(--lime)}
.share-note{color:var(--good)}.share-fallback{background:#fff;color:var(--ink);border-color:var(--line)}
.demo-banner{background:var(--ink);color:#fff;box-shadow:0 8px 30px rgba(14,23,38,.25)}.demo-banner button{background:var(--lime)}
.gut{background:#fff;border-color:var(--line)}.gut label{color:var(--ink)}.gut output{color:var(--accent)}.gut p,.gut-scale{color:var(--muted)}
/* Final: one concrete continuation right under the headline, by the learner's own SQL level; sharing comes later. */
.final-next{margin:26px 0 8px;display:grid;gap:10px;max-width:880px}
.final-next>p{margin:0;font-weight:600;color:var(--ink)}
.final-routes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.final-routes a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-radius:14px;text-decoration:none;text-align:left}
.final-routes a span{display:grid;gap:3px}.final-routes b{font-size:16px}.final-routes small{font-size:13px;opacity:.85}
.final-routes .primary{background:var(--lime);color:var(--ink)}
.final-routes .secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
.final-next .text-btn{justify-self:start;color:var(--ink-2)}
.gut-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}.gut-actions .text-btn{color:var(--ink-2)}
.gut .primary[disabled]{opacity:.45;cursor:not-allowed}
@media(max-width:720px){.final-routes{grid-template-columns:1fr}}
/* Clarifying questions: step 1 of each question, a readable chat with a stated rule. */
.asks{margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;display:grid;gap:12px}
.step-tag{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:999px;background:var(--accent);color:#fff;font:600 11px var(--body);letter-spacing:.3px;vertical-align:2px}
.asks-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:16px;color:var(--ink)}
.asks-rule{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}.asks-rule b{color:var(--ink)}
.dots{display:inline-flex;gap:4px;vertical-align:-1px;margin:0 2px}.dots i{width:10px;height:10px;border-radius:50%;border:2px solid var(--accent);background:var(--accent)}.dots i.used{background:transparent;border-color:var(--line-2,#C9D0DA)}
.bonus{margin-left:4px;padding:1px 7px;border-radius:999px;background:#FFF4EE;color:#C2410C;font-size:11px;font-weight:600}
.qa{display:grid;gap:6px}
.msg{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.45}.msg p{margin:0;padding:8px 12px;border-radius:12px}
.msg.me{justify-content:flex-end}.msg.me .who{order:2;font-size:11px;font-weight:600;color:var(--muted);padding-top:9px}.msg.me p{background:var(--ink);color:#fff;border-bottom-right-radius:3px;max-width:82%}
.msg.them .avatar{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700}
.msg.them>div{display:grid;gap:4px;max-width:86%}.msg.them p{background:#EBEEF2;color:var(--ink);border-bottom-left-radius:3px}
.verdict{justify-self:start;font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px}.verdict.key{background:#E7F6F0;color:#0B7A5C}.verdict.noise{background:#F1F2F4;color:var(--muted)}
.ask-list{display:grid;gap:8px}
.ask{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--line);background:#F7F8FA;color:var(--ink);border-radius:10px;padding:10px 12px;font:500 14px var(--body);text-align:left;cursor:pointer}
.ask span{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:700;font-size:12px}
.ask:hover:not([disabled]),.ask:focus-visible{border-color:var(--accent);background:#fff}
.ask[disabled]{cursor:not-allowed;opacity:.45}.ask[disabled] span{background:#9AA3B2}
.asks-note{margin:0;font-size:13px;color:var(--ink-2);background:#F7F8FA;border-radius:10px;padding:10px 12px}
.filter-heading .step-tag{margin-right:6px}
@media(max-width:720px){.asks{order:0;margin-top:12px;padding:14px}.msg{font-size:13px}}
/* What the 24,000 are: a readable breakdown, open on the first question, one tap away after. */
.census{margin:14px 16px 4px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#F7F8FA;font-size:14px;color:var(--ink-2)}
.census h2{margin:0;font:700 15px var(--body);color:var(--ink)}
.census p{margin:8px 0;line-height:1.5}.census-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;margin:10px 0}
.census ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.census li{display:flex;align-items:baseline;gap:8px;font-size:14px}.census li b{font:600 18px var(--display);color:var(--ink);letter-spacing:-.5px}
.census li i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none;align-self:center}.census-note{color:var(--muted);font-size:13px}
@media(max-width:720px){.census{margin:10px 12px 4px;padding:12px}.census li b{font-size:16px}.asks{order:0;margin-top:12px}}
.filter-heading b{font-size:16px;font-weight:600;color:var(--ink);display:flex;align-items:center}.filter-heading .step-tag{color:#fff;font:600 11px var(--body)}
#count-cap{font-size:14px;color:var(--ink-2)}
@media(max-width:720px){.census li{flex-wrap:wrap;row-gap:0}.census li span{flex-basis:100%;padding-left:18px;font-size:13px}}
/* Picking questions: a limited choice with a send button, not a list to click through. */
.asks-rule b{color:var(--ink)}
.ask .box{flex:none;width:20px;height:20px;border-radius:5px;border:2px solid var(--line-2,#C9D0DA);background:#fff;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700}
.ask.on{border-color:var(--accent);background:#fff;box-shadow:0 0 0 1px var(--accent) inset}.ask.on .box{background:var(--accent);border-color:var(--accent)}
.ask[disabled] .box{background:#F1F2F4}
.ask-send{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.ask-send .primary{min-height:44px;padding:11px 18px}.ask-send .primary[disabled]{opacity:.4;cursor:not-allowed}
.ask-send span{font-size:13px;color:var(--muted)}
/* Readability pass: no label under 11px, the definition reads as the thing you are building. */
.case-label,.case-caption{font-size:12px}
.universe-top{font-size:11px;letter-spacing:.8px}
.axis{font-size:11px}.time{font-size:11px}.delta{font-size:13px;font-weight:600}
.purpose{font-size:13px}
.filter-heading span{font-size:11px}
.definition{padding:16px 22px 18px}
.definition small{font:600 11px var(--mono);letter-spacing:1px;margin-bottom:10px;color:var(--muted)}
.definition p{font-size:15px;line-height:1.5;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.definition em{font-style:normal;font-weight:600;font-size:14px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,#fff);border:1px solid color-mix(in srgb,var(--accent) 35%,#fff);padding:4px 10px;border-radius:999px}
@media(max-width:720px){.definition{display:block;padding:12px 16px 14px}.definition p{font-size:14px}.definition em{font-size:13px;padding:3px 9px}.axis{font-size:11px}}
/* Result panel: every row starts at the same left edge (28px desktop, 16px phone). */
.census{margin:0;padding:18px 28px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.definition{padding:16px 28px 20px}
@media(max-width:720px){.census{margin:0;padding:14px 16px}.definition{padding:12px 16px 14px}}
/* Final: the product first, then the case notes, sharing last. */
.sell{margin-top:26px}
.sell .final-routes{margin-top:20px}
.sell-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}.sell-links .text-btn{color:var(--ink-2);padding:8px 0}
.hard-cta{margin-top:18px;padding:14px 16px;border:1px dashed var(--line-2,#C9D0DA);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.hard-cta div{display:grid;gap:2px}.hard-cta b{color:var(--ink);font-size:15px}.hard-cta span{color:var(--ink-2);font-size:13px}
.hard-cta .secondary{white-space:nowrap}
.answers.two{grid-template-columns:repeat(2,1fr)}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.share-row>span{font:600 11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.share-row .text-btn{color:var(--ink-2);padding:8px 0;font-size:13px}
@media(max-width:720px){.answers.two{grid-template-columns:1fr}.hard-cta .secondary{width:100%}}

.final-routes .primary,.final-routes .primary b{color:var(--ink)}.final-routes .primary small{color:var(--ink);opacity:.92}
/* Selling block routes: stacked full-width cards with one alignment, and quiet arrow links below. */
.sell .final-routes{grid-template-columns:1fr;gap:10px}
.sell .final-routes a{min-height:72px;padding:14px 18px;align-items:center}
.sell .final-routes a span{gap:4px}.sell .final-routes b{font-size:16px;line-height:1.25}.sell .final-routes small{font-size:13px;line-height:1.35}
.sell .final-routes .arrow{flex:none;align-self:center}
.sell-links{flex-direction:column;align-items:flex-start;gap:2px;margin-top:12px}
.sell-links .text-btn{text-decoration:none;padding:6px 0;font-size:14px;color:var(--ink-2)}
.sell-links .text-btn::before{content:'→ ';color:var(--accent)}
.sell-links .text-btn:hover{text-decoration:underline;text-underline-offset:4px}
/* No label under 11px anywhere in the game (legacy sizes from the first design). */
.byline,.byline a,.preview-head span,.axis span,.time,.teaser .tag{font-size:11px}
.hint-label{font-size:12px}.answer-card small{font-size:12px;line-height:1.4}
@media(max-width:720px){.intro .eyebrow,.board-stamp,.intro-meta,.bottom-strip{font-size:11px}.axis span{font-size:11px}}
.person .time,.people .who em{font-size:11px}.receipt .hint-label{font-size:12px}
.verdict.later{background:#FFF4E5;color:#9A5B00}

/* Atterna product menu in the game header (Kirill, 2026-09-28). */
.wn-menu{position:relative;margin-left:auto}
.topbar .wn-menu+.lang{margin-left:0}
.wn-menu>summary{list-style:none;display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);font:650 13px var(--display,inherit);cursor:pointer}
.wn-menu>summary::-webkit-details-marker{display:none}
.wn-menu>summary:focus-visible{outline:3px solid #FF6B35;outline-offset:2px}
.wn-menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:50;display:flex;flex-direction:column;gap:2px;min-width:220px;padding:8px;border:1px solid var(--line-2);border-radius:14px;background:#fff;box-shadow:0 24px 48px -20px rgba(14,23,38,.35)}
.wn-menu-panel a{padding:10px 12px;border-radius:9px;color:var(--ink);font-size:15px;font-weight:600;text-decoration:none}
.wn-menu-panel a:hover{background:#F3F5F7}
.wn-menu-panel a.wn-access{margin-top:6px;background:#FF6B35;color:var(--ink);text-align:center}

/* Atterna band on the intro, and a footer rule as wide as the content above it (Kirill, 2026-09-28). */
.atterna-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:center;border-top:1px solid var(--line);padding:24px 0 6px}
.atterna-band-copy{display:flex;flex-direction:column;gap:6px;max-width:520px}
.atterna-band-brand{font:700 15px var(--display,inherit);color:var(--ink);text-decoration:none}
.atterna-band-brand:hover{color:#FF6B35}
.atterna-band-copy p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.atterna-band-links{display:flex;gap:10px;flex-wrap:wrap}
.atterna-band-links a{display:flex;flex-direction:column;gap:3px;min-width:170px;padding:12px 16px;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.atterna-band-links a:hover{border-color:var(--ink);transform:translateY(-1px)}
.atterna-band-links b{font-size:15px}.atterna-band-links span{font-size:12.5px;color:var(--muted)}
footer{box-sizing:border-box;width:calc(100% - 88px);max-width:1264px;padding-left:0;padding-right:0}
@media(max-width:1000px){.atterna-band{grid-template-columns:1fr}footer{width:calc(100% - 56px)}}
@media(max-width:720px){.atterna-band-links{flex-direction:column}.atterna-band-links a{min-width:0}footer{width:calc(100% - 40px);padding-left:0;padding-right:0}}

/* Reward first (2026-09-28): the count is visible on every tap on a phone, the grid stays under the finger
   (game.mjs corrects the scroll itself; browser anchoring would double it), the results open with the score. */
html{overflow-anchor:none}
.mini-count{display:none}
@media(max-width:720px){
  .submit-row{position:sticky;bottom:0;z-index:6;margin:14px -20px 0;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:rgba(243,245,247,.96);border-top:1px solid var(--line);box-shadow:0 -12px 24px -20px rgba(14,23,38,.5)}
  .mini-count{display:flex;flex-direction:column;line-height:1.1;min-width:74px}
  .mini-count b{font:650 22px var(--display);letter-spacing:-.8px;color:var(--accent);font-variant-numeric:tabular-nums}
  .mini-count small{font-size:11px;color:var(--muted)}
  .submit-row .reset{padding:12px 4px}
}
.final-score{display:flex;align-items:center;gap:14px;margin:18px 0 4px;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--lime) 12%,#fff);border:1px solid color-mix(in srgb,var(--lime) 40%,#fff);width:max-content;max-width:100%;animation:arrive .5s ease-out}
.final-score b{font:700 34px/1 var(--display);letter-spacing:-1px;color:var(--lime)}
.final-score span{font-size:15px;color:var(--ink);line-height:1.4}.final-score em{font-style:normal;font-weight:650}
.bridge.solo{grid-template-columns:1fr}
@media(max-width:720px){.final-score{width:auto}.final-score b{font-size:28px}.final-score span{font-size:14px}}

/* The next puzzle right under the result (2026-09-30). */
.next-up{margin:22px 0 26px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff}
.next-up h2{font:600 clamp(19px,2.2vw,24px)/1.3 var(--display);letter-spacing:-.4px;margin:8px 0 14px;color:var(--ink)}
.next-up .final-routes{grid-template-columns:1fr;gap:10px}
.next-up .final-routes a{min-height:72px;padding:14px 18px}
.next-up .final-routes b{font-size:16px;line-height:1.3}.next-up .final-routes small{font-size:13px;line-height:1.35}
.next-up .final-routes .arrow{flex:none;align-self:center}
/* Playtest fixes 2026-10-02 */
/* Desktop: the count stays in view while you pick filters and send (the phone has the sticky mini count). */
@media(min-width:721px){.universe{position:sticky;top:16px;align-self:start}}
.gut output.empty{font:600 clamp(20px,2vw,26px)/1.2 var(--body);letter-spacing:0;color:var(--muted)}
.feedback-more{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:6px;font-weight:600;color:var(--ink)}
.feedback-more .text-btn{width:auto;padding:4px 0;font-size:14px;font-weight:650;color:var(--accent);text-decoration:underline}
.asks-rule .to-choose{display:inline;width:auto;padding:4px 0;font-size:inherit;font-weight:600;color:var(--accent)}
.filter-heading:focus{outline:none}
.next-up .final-routes .route-hard{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:72px;padding:14px 18px;border-radius:14px;border:1px dashed var(--line-2,#C9D0DA);background:#F7F8FA;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.next-up .final-routes .route-hard span{display:grid;gap:3px}
.next-up .final-routes .route-hard:hover{border-color:var(--ink-2)}
.census-review{border-top:1px solid var(--line)}
.census-review summary{cursor:pointer;padding:12px 16px;font-size:13px;font-weight:600;color:var(--ink-2);min-height:44px;display:flex;align-items:center}
.census-review .census{border-top:0}
@media(max-width:720px){
  /* After a right answer the result and the colleague's reply come first; the count details follow (Codex review G-04). */
  .universe.passed{order:4;margin-top:18px}
  .submit-row{align-self:stretch}
  .submit-row .primary{white-space:nowrap;gap:8px;padding:12px 14px;font-size:14px}
}

/* The heading receives focus to announce a new screen; button/link focus stays visible. */
#app h1[tabindex="-1"]:focus{outline:none}

/* Header on phones (public-c WP-10, WP-17): the brand keeps a short "by Atterna" line under it and the row fits at 320px. */
.brand-wrap{display:flex;align-items:center;gap:20px;min-width:0}
@media(max-width:720px){
  .brand-wrap{flex-direction:column;align-items:flex-start;gap:3px}
  .byline{display:block;font-size:10px;letter-spacing:.8px;line-height:1.2;white-space:nowrap}
  .byline .by-extra{display:none}
  .byline a{margin-left:3px}
}
@media(max-width:400px){
  .topbar{gap:8px;padding-left:16px;padding-right:16px}
  .brand{font-size:14px}
  .wn-menu>summary{padding:0 11px}
  .lang button{padding:7px 8px}
}

/* Finale polish (2026-10-04) ------------------------------------------------------------------------------------------ */
/* Phones: the reveal comes first (the three answers are the payoff), then the line that names it, then where to go next. */
@media(max-width:720px){
  .final{display:flex;flex-direction:column}
  .final>*{order:6}
  .final>.final-heading{order:1}.final>.answers{order:2}.final>.insight{order:3}.final>.next-up{order:4}
  .final>.next-up{margin:22px 0 8px}
}
/* "Challenge a friend" is a button, with the quiet options beside it */
.share-row .share-challenge{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;font:650 14px var(--body);cursor:pointer;transition:border-color .15s,transform .12s}
.share-row .share-challenge:hover{border-color:var(--ink)}.share-row .share-challenge:active{transform:translateY(1px)}
@media(max-width:720px){
  .share-row>span{flex:1 0 100%}
  .share-row .share-challenge{flex:1 0 100%}
  .share-row .text-btn{padding:10px 0;font-size:14px}
}
/* "What Atterna trains": an ink block with one primary button, not grey on grey */
.bridge.atterna.sell{background:var(--ink);color:#fff;box-shadow:0 26px 60px -34px rgba(14,23,38,.7)}
.bridge.atterna.sell .eyebrow{color:#FFB08F}
.bridge.atterna.sell h2{color:#fff}
.bridge.atterna.sell p{color:#C9D1DE;max-width:560px}
.bridge.atterna.sell .sell-go{margin-top:22px;min-height:56px;padding:14px 22px;font-size:16px;gap:18px;box-shadow:0 12px 26px -14px rgba(255,107,53,.9)}
.bridge.atterna.sell .sell-go:hover{background:#F25A22;box-shadow:0 14px 30px -14px rgba(255,107,53,1)}
.bridge.atterna.sell .sell-go span{text-wrap:balance;text-align:left}
.bridge.atterna.sell .sell-links{margin-top:16px}
.bridge.atterna.sell .sell-links .text-btn{color:#E6ECF5}
.bridge.atterna.sell .sell-links .text-btn:hover{color:#fff}
.bridge.atterna.sell .sell-links .text-btn::before{color:var(--lime)}
.bridge.atterna.sell .final-routes{margin-top:22px}
.bridge.atterna.sell a:focus-visible{outline-color:#fff}
@media(max-width:720px){.bridge.atterna.sell .sell-go{width:100%;justify-content:space-between}}
/* wide screens: the pitch on the left, the one button and the quiet links on the right (the hard-level block keeps its two route cards) */
@media(min-width:900px){
  .bridge.atterna.sell:has(.sell-go)>div{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);column-gap:64px;align-items:center}
  .bridge.atterna.sell:has(.sell-go)>div>.eyebrow,.bridge.atterna.sell:has(.sell-go)>div>h2,.bridge.atterna.sell:has(.sell-go)>div>p{grid-column:1}
  .bridge.atterna.sell:has(.sell-go) .sell-go{grid-column:2;grid-row:1/span 2;align-self:end;margin:0}
  .bridge.atterna.sell:has(.sell-go) .sell-links{grid-column:2;grid-row:3;align-self:start;margin-top:14px}
}
/* finale text contrast: small grey labels 4.5:1+, large orange figures 3:1+ (they were 2.6-3.0) */
.final .eyebrow,.next-up .eyebrow{color:var(--muted)}
.answer-card small{color:var(--muted)}
.answers:not(.two) .answer-card:first-child .answer,.final-score b{color:#E8541A}
.byline,.byline .by-extra{color:var(--muted)}
/* Free-account offer after the reveal (2026-10-04): kicker, headline, four benefits as a checklist, one orange button */
.free-account{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"head list" "act list";gap:14px 36px;align-items:start;margin:26px 0 8px;padding:24px 26px;border:1px solid #F5C8B2;border-radius:16px;background:radial-gradient(80% 140% at 0 0,#FFF1E8 0,transparent 62%),#fff;color:var(--ink)}
.free-account .fa-head{grid-area:head}
.free-account .eyebrow{color:#C2410C}
.free-account h2{font:600 clamp(19px,2.1vw,24px)/1.3 var(--display);letter-spacing:-.4px;margin:8px 0 8px;color:var(--ink)}
.free-account .fa-head p{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:460px}
.free-account .fa-list{grid-area:list;list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:center;align-self:stretch}
.free-account .fa-list li{display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.free-account .fa-list li::before{content:'✓';flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#FFE7DA;color:#C2410C;font-size:13px;font-weight:700}
.free-account .fa-actions{grid-area:act;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.free-account .fa-go{gap:14px;min-height:50px;padding:0 22px;font-size:15.5px;box-shadow:0 10px 22px -14px rgba(255,107,53,.95)}
.free-account .fa-small{flex:1 0 100%;font-size:12.5px;color:var(--muted);order:3}
.free-account .fa-have{font-size:14px;color:var(--ink-2)}
.free-account .fa-have a{color:var(--ink);font-weight:650;text-underline-offset:3px}
.free-account a:focus-visible{outline:3px solid #1D65BB;outline-offset:3px}
@media(max-width:720px){
  .free-account{grid-template-columns:1fr;grid-template-areas:"head" "list" "act";gap:14px;padding:20px 18px}
  .free-account .fa-go{width:100%;justify-content:space-between}
  .free-account .fa-small{order:0;flex:none}
  .free-account .fa-actions{flex-direction:column;align-items:stretch;gap:8px}
  .free-account .fa-have{text-align:center}
  .free-account .fa-small{text-align:center}
}