@font-face{font-family:Newsreader;src:url('assets/fonts/newsreader-variable.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url('assets/fonts/alegreya-sans-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url('assets/fonts/alegreya-sans-medium.woff2') format('woff2');font-weight:500 800;font-display:swap}
@font-face{font-family:"Courier Prime";src:url('assets/fonts/courier-prime-regular.woff2') format('woff2');font-display:swap}

:root{--ink:#191a1c;--ink2:#222427;--cream:#f3eddc;--cream2:#fbf8f0;--rule:#cbc1ac;--peri:#93a8ff;--blue:#2a3c9e;--coral:#e8705a;--mustard:#e3bd4e;--muted:#a8a69e;--border:#34363c;--serif:Newsreader,Georgia,serif;--sans:"Alegreya Sans",system-ui,sans-serif;--mono:"Courier Prime",monospace;--pad:clamp(16px,3vw,48px);--head:64px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--cream);font:19px/1.4 var(--sans);min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden;background-image:radial-gradient(ellipse at 70% 10%,rgba(147,168,255,.10),transparent 50%)}
button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.55}
a{color:inherit;text-underline-offset:4px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--serif);font-weight:400;line-height:1}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--peri);outline-offset:4px}#main:focus{outline:none}
::selection{background:var(--peri);color:var(--ink)}
.skip{position:fixed;left:16px;top:-80px;background:var(--peri);color:var(--ink);padding:12px;z-index:60}.skip:focus{top:12px}
.eyebrow{font:12px/1.4 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}.tiny{font:12px/1.5 var(--mono);color:var(--muted)}.mono{font-family:var(--mono)}
.link-button{background:none;border:0;padding:0;color:var(--peri);text-decoration:underline;text-underline-offset:4px;font:inherit}.link-button:hover{color:#fff}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:58px;padding:14px 26px;background:var(--peri);color:var(--ink);border:0;border-radius:14px;font-weight:700;font-size:20px;text-decoration:none;box-shadow:0 6px 0 #4b5cb0,0 14px 30px rgba(0,0,0,.35);transition:transform .15s,box-shadow .15s;cursor:pointer}
.primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 #4b5cb0,0 18px 34px rgba(0,0,0,.4);background:#a9b9ff}.primary:active{transform:translateY(4px);box-shadow:0 2px 0 #4b5cb0}.primary .arrow{font-weight:400;font-size:24px}
.secondary{min-height:50px;padding:10px 18px;border:1px solid var(--border);background:var(--ink2);border-radius:12px;font-size:17px}.secondary:hover{border-color:var(--peri)}

/* header / footer */
.top{height:var(--head);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);border-bottom:1px solid var(--border)}
.wordmark{text-decoration:none;font:24px var(--serif);display:flex;align-items:center;gap:10px}.brand-icon{width:24px;height:22px;position:relative;display:inline-block}.brand-icon i{position:absolute;background:var(--peri);width:13px;height:6px;left:0;top:4px}.brand-icon i+i{background:var(--cream);left:11px;top:12px}
.top-right{display:flex;align-items:center;gap:18px}.keys-hint{font:11px var(--mono);color:var(--muted);letter-spacing:.5px}
.sound{border:1px solid var(--border);background:transparent;border-radius:999px;min-height:40px;padding:6px 14px;display:inline-flex;align-items:center;gap:8px;font:12px var(--mono)}.sound>span:first-child{color:var(--peri);font-size:17px}.sound[aria-pressed=true]{border-color:var(--peri);background:rgba(147,168,255,.12)}
main{flex:1;display:flex;flex-direction:column}
.bottom{display:flex;justify-content:space-between;gap:16px;padding:14px var(--pad);border-top:1px solid var(--border);font:13px var(--sans);color:var(--muted);flex-wrap:wrap}.foot-note{font:11px var(--mono)}
.loading{padding:80px 0;text-align:center;font:34px var(--serif);color:var(--muted)}.noscript{padding:30px;text-align:center}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,24px);padding:12px 20px;background:var(--cream);color:var(--ink);font:14px var(--mono);border-radius:10px;z-index:50;opacity:0;pointer-events:none;transition:.25s;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}

/* stage */
.stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#2b2e36,#191a1c 70%);border-radius:24px;min-height:200px}
.stage canvas.stage-gl{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:manipulation}
.stage-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .6s}.stage.ready .stage-poster{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.stage-2d{position:absolute;inset:0}.stage-2d .stage-poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}.stage-2d canvas{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:90%;width:auto}
.chip-bubble{position:absolute;left:6%;top:7%;max-width:min(300px,60%);background:var(--cream);color:var(--ink);padding:12px 16px;border-radius:16px 16px 16px 4px;font:italic 17px/1.3 var(--serif);box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:2;animation:bob 4s ease-in-out infinite}.chip-bubble.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.tap-hint{position:absolute;right:14px;bottom:12px;font:10px var(--mono);letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;z-index:2}

/* home */
.home{flex:1;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,48px);padding:clamp(16px,2.5vw,36px) var(--pad);align-items:stretch;min-height:calc(100svh - var(--head) - 56px)}
.home .stage{min-height:min(70vh,760px)}
.home-copy{display:flex;flex-direction:column;justify-content:center;padding:10px 0}
.home-copy h1{font-size:clamp(64px,8.5vw,136px);letter-spacing:-.04em;line-height:.86;margin:14px 0 26px}
.hook{font-size:clamp(21px,2vw,27px);line-height:1.25;max-width:460px;margin-bottom:28px;color:#e9e3d2}.hook b{color:var(--cream);font-weight:700}
.start{align-self:flex-start;font-size:22px;padding:16px 30px}.meta{margin:18px 0 6px}.meta b{color:var(--peri);font-weight:400}.daily{margin:0}

/* play */
.play{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,40px);padding:clamp(14px,2vw,28px) var(--pad);align-items:stretch;max-width:1500px;width:100%;margin:0 auto}
.play .stage{min-height:420px;height:calc(100svh - var(--head) - 56px - 2*clamp(14px,2vw,28px));max-height:820px;position:sticky;top:clamp(14px,2vw,28px)}
.card-col{display:flex;flex-direction:column;gap:14px;justify-content:center;min-width:0}
.round-head{display:flex;justify-content:space-between;align-items:center}.counter{font:13px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}.counter b{color:var(--cream);font-weight:400}
.pips{display:flex;gap:7px}.pips i{width:30px;height:7px;border-radius:4px;background:var(--border);display:block;box-sizing:border-box}.pips i.now{background:transparent;border:2px solid var(--peri);animation:pulse 1.6s infinite}.pips i.ok{background:var(--peri)}.pips i.bad{background:var(--coral)}
.incoming{background:var(--ink2);border:1px solid var(--border);border-radius:18px 18px 18px 6px;padding:16px 20px}
.from{display:flex;align-items:center;gap:10px;font:13px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.avatar{width:28px;height:28px;border-radius:50%;background:var(--peri);color:var(--ink);display:inline-grid;place-items:center;font:700 14px var(--sans);font-style:normal}
.lbl-tag{margin-left:auto;font:11px var(--mono);letter-spacing:1px;border:1px solid var(--border);border-radius:999px;padding:3px 9px;color:var(--muted);white-space:nowrap}
.msg{font-size:clamp(18px,1.5vw,21px);line-height:1.35;margin:0 0 8px}.context{margin:0;font:italic 16px/1.35 var(--serif);color:var(--muted)}
.helper{margin:-2px 0 0;font:15px/1.35 var(--sans);color:var(--muted);padding:0 4px}.helper b{color:var(--cream);font-weight:700;letter-spacing:.5px}
.decision{display:flex;flex-direction:column;gap:14px}
.proposal-wrap{position:relative;isolation:isolate}
.zone{position:absolute;inset:0;border-radius:22px;display:flex;align-items:center;opacity:0;transition:opacity .2s;pointer-events:none;z-index:0;border:2px dashed transparent}
.zone span{font:700 15px var(--mono);letter-spacing:2px;padding:10px 14px;border-radius:10px}
.zone-stop{justify-content:flex-start;padding-left:18px;background:rgba(232,112,90,.12);border-color:rgba(232,112,90,.5)}.zone-stop span{color:var(--coral)}
.zone-send{justify-content:flex-end;padding-right:18px;background:rgba(147,168,255,.14);border-color:rgba(147,168,255,.55)}.zone-send span{color:var(--peri)}
.proposal-wrap:has(.proposal[data-dir=send]) .zone-send,.proposal-wrap:has(.proposal[data-dir=stop]) .zone-stop{opacity:1}
.proposal-wrap.armed .zone span{background:var(--cream);color:var(--ink)}
.proposal{position:relative;z-index:1;background:var(--cream);color:var(--ink);border-radius:22px 22px 6px 22px;padding:18px 22px 16px;box-shadow:0 14px 34px rgba(0,0,0,.45),0 2px 0 #cbc1ac;cursor:grab;user-select:none;-webkit-user-select:none;will-change:transform;--tension:0}
.proposal.grabbing,.proposal.dragging{cursor:grabbing;box-shadow:0 24px 50px rgba(0,0,0,.55)}
.proposal[data-dir=send]{outline:3px solid rgba(147,168,255,calc(var(--tension)*1))}.proposal[data-dir=stop]{outline:3px solid rgba(232,112,90,calc(var(--tension)*1))}
.prop-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;font:13px var(--mono);letter-spacing:1px;text-transform:uppercase;color:#625c50}.prop-head b{font-weight:400}.chip-avatar{width:36px;height:36px}.drag-hint{margin-left:auto;font-size:12px;color:#8a8375}
.proposal.nudge{animation:enter .4s cubic-bezier(.2,.9,.3,1) both,nudge 1.6s cubic-bezier(.45,0,.3,1) 1.1s 1}
@keyframes nudge{0%,100%{transform:none}22%{transform:translateX(34px) rotate(1.4deg)}48%{transform:none}70%{transform:translateX(-34px) rotate(-1.4deg)}}
.proposal-wrap:has(.proposal.nudge) .zone-send{animation:peek-r 1.6s cubic-bezier(.45,0,.3,1) 1.1s 1}.proposal-wrap:has(.proposal.nudge) .zone-stop{animation:peek-l 1.6s cubic-bezier(.45,0,.3,1) 1.1s 1}
@keyframes peek-r{0%,48%,100%{opacity:0}22%{opacity:1}}@keyframes peek-l{0%,48%,100%{opacity:0}70%{opacity:1}}
.swipe-hint{display:none;justify-content:space-between;gap:12px;margin:0;font:15px var(--sans);color:var(--muted)}.swipe-hint .sw-l{color:var(--coral)}.swipe-hint .sw-r{color:var(--peri)}
.reply{font:clamp(22px,1.9vw,28px)/1.22 var(--serif);margin:0 0 10px}
.chip-line{margin:0;font:italic 15px/1.3 var(--sans);color:#625c50}
.decide{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.decide button{min-height:68px;border-radius:16px;font:700 19px var(--sans);letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:10px;border:2px solid transparent;transition:transform .12s,box-shadow .12s,background .15s;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.decide button:hover{transform:translateY(-2px)}.decide button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn-send{background:var(--peri);color:var(--ink);box-shadow:0 6px 0 #4b5cb0!important}.btn-send:hover{background:#a9b9ff}
.btn-stop{background:var(--ink2);color:var(--cream);border-color:var(--coral)!important;box-shadow:0 6px 0 #7a3b30!important}.btn-stop:hover{background:#3a2a28}
.decide kbd{font:11px var(--mono);border:1px solid currentColor;border-radius:5px;padding:1px 6px;opacity:.6}
/* outcome */
.outcome{background:var(--cream);color:var(--ink);border-radius:22px;padding:20px 24px 22px;box-shadow:0 14px 34px rgba(0,0,0,.45);position:relative;overflow:hidden}
.stamp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.you-chose{display:inline-flex;align-items:center;gap:8px;font:12px var(--mono);letter-spacing:1px;text-transform:uppercase;color:#625c50}.you-chose .chip-avatar{width:44px;height:44px;animation:pop .5s cubic-bezier(.2,1.6,.4,1) .3s both}
.stamp{display:inline-block;font:700 18px var(--mono);letter-spacing:2px;padding:9px 14px;border:3px double currentColor;border-radius:6px;transform:rotate(-4deg);animation:slam .4s cubic-bezier(.2,1.4,.4,1) both}
.tone-good .stamp{color:var(--blue)}.tone-bad .stamp{color:#b8382a}.tone-miss .stamp{color:#8a6500}
.tone-bad{background:#f6ddd6}.tone-miss{background:#f5ecc9}
.punch{font:clamp(24px,2vw,32px)/1.15 var(--serif);margin:0 0 10px}.note{font-size:17px;line-height:1.4;color:#3f3b33;margin:0 0 16px}
.next-row{display:flex;align-items:center;gap:16px}.key-hint{color:#8a8375}

/* interlude (3am) */
.pp-root{background:#0f1016;border:1px solid var(--border);border-radius:20px;padding:14px 16px 10px;overflow:hidden}
.pp-scene{position:relative;height:250px;--chaos:0}.pp-clock{position:absolute;right:12px;top:4px;font:12px var(--mono);color:var(--muted);letter-spacing:2px}
.pp-side{position:absolute;bottom:64px;width:34%;text-align:center}.pp-left{left:0}.pp-right{right:0}
.pp-zzz{position:absolute;top:-2px;font:italic 14px var(--serif);color:var(--peri);animation:zzz 2.4s ease-in-out infinite;pointer-events:none}.pp-left .pp-zzz{right:-30px}.pp-right .pp-zzz{left:-30px;animation-delay:-1.2s}
.pp-laptop{margin:0 auto;width:110px;height:68px;background:#d9d1ba;border-radius:8px 8px 3px 3px;position:relative;border-bottom:8px solid #c9c0a8}.pp-screen{position:absolute;inset:6px 8px 4px;background:var(--peri);color:var(--ink);font:700 11px/1.15 var(--mono);display:grid;place-items:center;border-radius:4px;box-shadow:0 0 18px rgba(147,168,255,calc(.3 + var(--chaos)*.7))}
.pp-off .pp-screen{background:#1b1c22;color:#3a3c45;box-shadow:none}.pp-off .pp-zzz{animation:none;opacity:.3}
.pp-label{font:11px var(--mono);color:var(--muted);margin-top:8px;letter-spacing:1px}
.pp-bubble{display:inline-block;background:var(--cream);color:var(--ink);font:13px/1.2 var(--sans);padding:5px 9px;border-radius:10px;margin-bottom:8px;opacity:0;transform:translateY(6px) scale(.9);min-height:24px}.pp-bubble.show{opacity:1;transform:none;transition:.18s}
.pp-mail{position:absolute;left:0;top:92px;font-size:34px;color:var(--cream);text-shadow:0 0 12px rgba(147,168,255,.8);will-change:transform;margin-left:-16px}
.pp-off .pp-mail{opacity:.15}.pp-off .pp-bubble{visibility:hidden}
.pp-count{position:absolute;left:0;right:0;top:8px;text-align:center;font:13px var(--mono);color:var(--muted);letter-spacing:1px}.pp-count b{color:var(--cream);font-size:18px}
.pp-wall{position:absolute;left:0;right:0;bottom:0;height:52px;border-top:2px solid #2a2c34}
.pp-socket{position:absolute;left:50%;top:8px;width:40px;height:36px;margin-left:-20px;background:#2a2c34;border-radius:6px}.pp-socket:before,.pp-socket:after{content:'';position:absolute;top:12px;width:6px;height:12px;background:#0f1016;left:10px}.pp-socket:after{left:24px}
.pp-cord{position:absolute;left:calc(50% + 20px);top:24px;width:46%;height:3px;background:#5a5e6a;--pull:0;transform-origin:left;transform:scaleX(calc(1 - var(--pull)/300))}
.pp-plug{position:absolute;left:calc(50% - 24px);top:4px;width:48px;height:44px;border:0;border-radius:8px;background:var(--coral);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;--tug:0;box-shadow:0 0 0 calc(var(--tug)*12px) rgba(232,112,90,.3),0 4px 0 #9a4a3c;transition:box-shadow .12s}.pp-plug span{position:absolute;left:12px;top:-8px;width:6px;height:12px;background:#c9c0a8;box-shadow:18px 0 0 #c9c0a8}.pp-plug.grab{cursor:grabbing}.pp-plug.out{transition:transform .3s,box-shadow .12s}
.pp-plug::after{content:'';position:absolute;inset:-18px}/* bigger finger target */
.pp-pull-cue{position:absolute;left:calc(50% + 32px);top:-22px;font:11px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--coral);animation:tugcue 1.5s ease-in-out infinite;pointer-events:none}
.pp-off .pp-pull-cue,.pp-scene:has(.pp-plug.grab) .pp-pull-cue{display:none}
@keyframes tugcue{50%{transform:translate(5px,-4px);opacity:.45}}
.pp-hint{font-size:16px;color:var(--muted);margin:12px 0 4px}.pp-hint b{color:var(--cream)}
.pp-intro .msg b{color:var(--peri);font-weight:700}
.pp-payoff{background:var(--cream);color:var(--ink);border-radius:16px;padding:16px 18px;margin-top:10px}.pp-punch{font:26px/1.15 var(--serif);margin:0 0 6px}.pp-note{font-size:16px;color:#3f3b33;margin:0 0 14px}
.pp-off .pp-zzz{animation:none;opacity:.3}

/* results */
.results{padding:clamp(16px,2.5vw,36px) var(--pad);max-width:1280px;width:100%;margin:0 auto}
.review-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,44px);align-items:stretch}
.results-stage{min-height:420px}
.review-sheet{background:var(--cream);color:var(--ink);border-radius:24px;padding:26px 28px 24px;box-shadow:0 20px 50px rgba(0,0,0,.5);position:relative;display:flex;flex-direction:column}
.review-sheet .eyebrow{color:#625c50;border-bottom:1px dashed var(--rule);padding-bottom:12px}
.score-row{display:flex;align-items:center;gap:22px;margin:12px 0 8px}.score-big{font:120px/.9 var(--serif);letter-spacing:-7px;color:var(--blue);white-space:nowrap}.score-big small{font-size:44px;color:#625c50;letter-spacing:0;margin-left:10px}
.score-text{min-width:0}.score-row h1{font-size:clamp(30px,3vw,42px);margin:2px 0 6px;letter-spacing:-.5px}.score-row .tiny{color:#625c50;margin:0}.blurb{margin:0;color:#3f3b33;font-size:16px}
.medal{font-size:52px;margin-left:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.roast{font:italic clamp(19px,1.6vw,22px)/1.3 var(--serif);border-left:3px solid var(--blue);padding-left:16px;margin:12px 0}
.calls-wrap{margin:0 0 12px}.calls-wrap summary{cursor:pointer;font:12px var(--mono);letter-spacing:2px;text-transform:uppercase;color:#625c50;list-style:none;display:flex;align-items:center;gap:8px;padding:4px 0}.calls-wrap summary::-webkit-details-marker{display:none}.calls-wrap summary::before{content:'▸';font-size:14px;transition:transform .2s}.calls-wrap[open] summary::before{transform:rotate(90deg)}.calls-wrap summary:hover{color:var(--ink)}
.calls{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.calls li{display:flex;flex-direction:column;gap:2px;border:1px solid var(--rule);border-radius:12px;padding:8px 10px;font-size:14px;line-height:1.2}.calls i{font-style:normal;font-weight:700}.calls li.good i{color:var(--blue)}.calls li.bad i,.calls li.miss i{color:#b8382a}.calls em{font:11px var(--mono);letter-spacing:1px;color:#625c50;font-style:normal}
.why{font-size:16px;line-height:1.4;color:#3f3b33;border-top:1px dashed var(--rule);padding-top:12px;margin:0 0 14px}.why b{color:var(--ink);font-weight:700}.why a{color:var(--blue);white-space:nowrap}
.share-row{display:flex;gap:10px;flex-wrap:wrap}.review-sheet .secondary{background:#fff;border-color:var(--rule);color:var(--ink)}
.replay-row{margin:12px 0 0;color:#625c50}.review-sheet .link-button{color:var(--blue)}.review-sheet .link-button:hover{color:var(--ink)}
.eli5{margin-top:clamp(32px,5vw,64px);border-top:1px solid var(--border);padding-top:30px;max-width:960px}
.eli5 h2{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.5px;margin-bottom:12px}.lede{font-size:20px;line-height:1.35;color:#d9d3c2;margin-bottom:20px;max-width:760px}
.demo{background:var(--ink2);border:1px solid var(--border);border-radius:20px;padding:18px 20px}
.demo-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.tag{font:11px var(--mono);letter-spacing:2px;text-transform:uppercase;border:1px solid var(--border);border-radius:999px;padding:5px 10px;color:var(--muted)}.demo-cap{font-size:15px;color:var(--muted)}
.demo-msg{background:#2b2d33;border-radius:16px 16px 16px 4px;padding:12px 16px;max-width:560px;margin-bottom:14px}.demo-msg .from{margin-bottom:6px}.demo-msg p{margin:0;font-size:18px}
.demo-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo-reply{background:var(--cream);color:var(--ink);border-radius:16px 16px 4px 16px;padding:14px 16px;display:flex;flex-direction:column;border-top:4px solid var(--blue)}.demo-reply.is-bad{background:#f6ddd6;border-top-color:var(--coral)}.demo-reply .lbl{display:block;font:11px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:#625c50;margin-bottom:8px}.demo-reply .lbl b{color:var(--ink);font-weight:700}.demo-reply p{margin:0 0 10px;font:21px/1.25 var(--serif);flex:1}
.verdict{font:700 13px var(--mono);letter-spacing:.5px}.verdict.ok{color:var(--blue)}.verdict.bad{color:#b8382a}
.demo-foot{margin:14px 0 0;font-size:17px;color:#d9d3c2}.chip-aside{display:block;margin-top:6px;font:italic 16px var(--serif);color:var(--muted)}
.cta{margin:22px 0 18px}.foot{margin:0}.foot a{color:var(--peri)}
dialog{background:var(--cream);color:var(--ink);border:0;border-radius:18px;padding:22px;max-width:520px;width:calc(100% - 32px)}dialog::backdrop{background:rgba(10,11,14,.8)}dialog textarea{width:100%;font:14px var(--mono);padding:10px;border:1px solid var(--rule);border-radius:8px;margin-bottom:12px}

/* motion */
.view-enter{animation:enter .4s cubic-bezier(.2,.9,.3,1) both}
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes slam{from{opacity:0;transform:rotate(-4deg) scale(2.4)}60%{opacity:1;transform:rotate(-4deg) scale(.94)}to{transform:rotate(-4deg) scale(1)}}
@keyframes bob{50%{transform:translateY(-6px)}}@keyframes pop{30%{transform:scale(1.08) rotate(-2deg)}}@keyframes pulse{50%{opacity:.4}}
@keyframes zzz{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-8px);opacity:1}}

/* responsive */
@media(max-width:1100px){.home{grid-template-columns:1fr 1fr}.home-copy h1{font-size:clamp(60px,9vw,100px)}}
@media(max-width:860px){
  :root{--head:54px}.keys-hint{display:none}.wordmark{font-size:21px}.sound-label{display:none}.sound{padding:6px 10px}
  .home{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0;padding-top:12px;gap:14px}.home .stage{min-height:200px;height:32svh;max-height:300px}.home-copy{text-align:left;padding:0 0 10px}.home-copy h1{font-size:clamp(52px,14vw,84px);margin:6px 0 12px}.hook{font-size:19px;line-height:1.3;margin-bottom:16px}.start{width:100%;justify-content:space-between}.chip-bubble{font-size:14px;max-width:62%;padding:9px 12px}.tap-hint{display:none}.meta{margin-top:12px}
  .play{grid-template-columns:1fr;gap:12px;padding:10px 14px 110px;display:block}
  .play .stage{position:relative;top:0;height:220px;min-height:220px;max-height:none;border-radius:18px;margin-bottom:12px}
  .card-col{gap:10px}.round-head{margin-bottom:0}.pips i{width:22px}
  .incoming{padding:12px 14px}.msg{font-size:18px;margin-bottom:6px}.context{font-size:15px}
  .proposal{padding:14px 16px 12px}.reply{font-size:21px}.chip-line{font-size:14px}.drag-hint{display:none}.prop-head{font-size:12px;letter-spacing:.5px}
  .swipe-hint{display:flex;padding:0 4px}
  .decide{position:fixed;left:0;right:0;bottom:0;padding:10px 14px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(25,26,28,.96) 30%);z-index:20;gap:10px}
  .decide button{min-height:60px;font-size:17px}.decide kbd{display:none}
  .outcome{padding:16px 18px 18px}.punch{font-size:23px}.note{font-size:16px}.stamp{font-size:15px;padding:7px 10px}
  .decision:has(.outcome)~*{display:none}
  .interlude{padding-bottom:20px}.pp-scene{height:230px;transition:height .35s}.pp-laptop{width:90px;height:58px}
  .helper{font-size:14px}.lbl-tag{font-size:10px;padding:2px 7px}
  /* after the plug is pulled: shrink the 3D stage, drop the intro, so the payoff + continue fit on screen */
  .interlude.pp-done .stage{height:72px;min-height:72px;margin-bottom:8px;transition:height .35s,min-height .35s}
  .interlude.pp-done .pp-intro{display:none}.interlude.pp-done .pp-scene{height:180px}
  .results{padding-top:10px}.review-grid{grid-template-columns:1fr;gap:12px}.replay-row{margin-top:10px}.results-stage{min-height:150px;height:150px;order:-1;border-radius:18px}.review-sheet{padding:16px 16px 18px}.review-sheet .eyebrow{font-size:11px;letter-spacing:1.5px;padding-bottom:8px}
  .score-row{gap:14px;margin:10px 0 8px;align-items:center}.score-big{font-size:72px;letter-spacing:-4px;line-height:1}.score-big small{font-size:28px;margin-left:6px}.score-row h1{font-size:26px;margin:0 0 4px}.blurb{font-size:14px}.medal{font-size:30px;align-self:flex-start}
  .roast{font-size:17px;line-height:1.3;margin:10px 0 12px;padding-left:12px}
  .calls-wrap{order:5;margin:14px 0 0}.calls{grid-template-columns:1fr 1fr}
  .why{font-size:16px;padding-top:12px;margin-bottom:12px}
  .share-row .primary{flex:1 1 100%}.share-row .secondary{flex:1 1 40%}
  .eli5{padding-top:22px;margin-top:28px}.eli5 h2{font-size:28px}.lede{font-size:17px}.demo{padding:14px}.demo-pair{grid-template-columns:1fr}.demo-reply p{font-size:19px}.demo-msg p{font-size:17px}
  .bottom{font-size:11px;padding:12px 14px}
}
@media(max-width:400px){.decide{grid-template-columns:1fr 1fr}.decide button{font-size:15px;min-height:56px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.stamp{opacity:1}.pp-bubble{transition:none}}