@font-face{font-family:SpaceMono;src:url('assets/space-mono-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Anton;src:url('assets/anton.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--ink:#f4efe3;--bg:#10131b;--line:#333746;--blue:#3b62e0;--cyan:#62dbec;--cream:#f3d9b5;--muted:#a3a8b8;--hot:#ff7a59;font-family:SpaceMono,ui-monospace,monospace;font-weight:700;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}
body{margin:0;min-width:320px;background:radial-gradient(ellipse at 78% 24%,#1a2031 0,transparent 38%),var(--bg)}
.shell{max-width:1220px;margin:0 auto;padding:24px 40px 22px}
.mast{display:flex;justify-content:space-between;align-items:center;min-height:44px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.1em}
.mark{color:#e4e7ef;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}.mark span{color:var(--cyan);font-size:14px;margin-right:8px}
.clock{color:var(--cream)}
.bench{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);gap:48px;padding:28px 0}
.eyebrow{color:var(--cyan);font-size:11px;letter-spacing:.12em;margin:0}
h1{margin:12px 0 10px;font:76px/.9 Anton,Impact,sans-serif;color:#f5f0e6}h1 em{color:var(--cream);font-style:normal}
.lede{color:var(--muted);font-size:14px;line-height:1.6;max-width:34em;font-weight:400}
form{display:grid;gap:14px;margin-top:22px}
label{display:grid;gap:6px;font-size:11px;letter-spacing:.08em;color:#c9ccd6}
input{font:inherit;font-size:16px;color:var(--ink);background:#171b26;border:1px solid #3a4052;border-radius:10px;padding:12px 14px;min-height:48px;width:100%}
input:focus{outline:2px solid var(--cyan);outline-offset:1px}
.row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end}
.coffee{display:grid;gap:6px;font-size:11px;letter-spacing:.08em;color:#c9ccd6}
.stepper{display:flex;align-items:center;border:1px solid #3a4052;border-radius:10px;background:#171b26}
.stepper button{font:inherit;font-size:20px;width:48px;height:48px;border:0;background:none;color:var(--cream);cursor:pointer}
.stepper output{min-width:28px;text-align:center;font-size:16px}
.go{font:inherit;font-size:15px;letter-spacing:.08em;min-height:54px;border:0;border-radius:12px;background:var(--cream);color:#1a1410;cursor:pointer;transition:transform .12s}
.go:hover{transform:translateY(-1px)}.go:disabled{opacity:.55;cursor:wait}
.note{min-height:1.2em;margin:0;font-size:12px;color:var(--hot)}
.stage{position:relative;border:1px solid var(--line);border-radius:18px;background:linear-gradient(#151a26,#0f121a);padding:18px 18px 0;overflow:hidden}
.speech{background:var(--cream);color:#1f1813;border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.45;min-height:3.4em;position:relative}
.speech:after{content:"";position:absolute;left:50%;bottom:-9px;border:10px solid transparent;border-top-color:var(--cream);border-bottom:0}
.speech p{margin:0}
.nerves{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:10px;letter-spacing:.1em;color:var(--muted)}
.nerves i{flex:1;height:8px;border-radius:8px;background:#232838;overflow:hidden}.nerves b{display:block;height:100%;width:0;background:linear-gradient(90deg,#73e9b7,var(--cream),var(--hot));transition:width .6s}
.monkey{display:block;width:min(300px,80%);margin:6px auto 0}
.lids{animation:blink 5.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sweat,.sweat-spray,.zzz{opacity:0;transition:opacity .3s}
[data-mood=groggy] .lids{transform:translateY(4px) scaleY(.5);animation:none}
[data-mood=groggy] .monkey{animation:breath 3s ease-in-out infinite}
[data-mood=wired] .sweat{opacity:1}
[data-mood=wired] .left-pupil,[data-mood=wired] .right-pupil{animation:dart 1.1s steps(2,end) infinite}
[data-mood=thinking] .sweat{opacity:1}
[data-mood=thinking] .monkey{animation:shake .16s linear infinite}
@keyframes blink{0%,92%,100%{transform:none}95%{transform:translateY(7px) scaleY(.1)}}
@keyframes breath{50%{transform:translateY(3px)}}
@keyframes dart{50%{transform:translateX(4px)}}
@keyframes shake{25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}
.picks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.picks li{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#141824;opacity:0;transform:translateY(6px);animation:in .4s forwards}
.picks .slot{font-size:10px;letter-spacing:.14em;color:var(--cyan)}.picks h3{margin:4px 0 2px;font:28px/1.05 Anton,Impact,sans-serif;font-weight:400;color:#f5f0e6}
.picks .almost{font-size:12px;color:var(--muted);font-weight:400}.picks .blurb{font-size:12px;color:#c9ccd6;font-weight:400;margin:6px 0 0;line-height:1.5}
@keyframes in{to{opacity:1;transform:none}}
.work{border-top:1px solid var(--line);padding:22px 0}
.work h2{font-size:12px;letter-spacing:.12em;margin:0 0 12px;color:var(--cream)}.work h2 small{color:var(--muted);letter-spacing:.04em;font-weight:400;margin-left:8px}
#trace{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12px}
#trace li{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:8px 10px;border-radius:8px;background:#131722;font-weight:400;color:#c9ccd6}
#trace li b{color:var(--cyan);font-weight:700}#trace li code{color:var(--muted);font-size:11px;word-break:break-word}#trace .empty{display:block;color:var(--muted)}
footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;font-size:10px;letter-spacing:.1em;color:#7d8396}
@media (max-width:860px){.shell{padding:16px 18px}.bench{grid-template-columns:1fr;gap:26px;padding:20px 0}h1{font-size:56px}.monkey{width:min(230px,70%)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}