@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;--ok:#73e9b7;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;gap:12px;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);text-align:right}
.bench{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);gap:48px;padding:28px 0}
.left,.right{min-width: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;font-weight:400}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}
label small{font-weight:400;letter-spacing:0;color:var(--muted);font-size:10px;word-break:break-all}
input,select,textarea{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%}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.5;font-weight:400;resize:vertical;min-height:150px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cyan);outline-offset:1px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.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;padding:0 16px}
.go:hover{transform:translateY(-1px)}.go:disabled{opacity:.55;cursor:wait}
.ghost{font:inherit;font-size:12px;letter-spacing:.08em;min-height:44px;border:1px dashed #4a5068;border-radius:10px;background:none;color:var(--cyan);cursor:pointer}
.ghost:hover{border-color:var(--cyan)}
.note{min-height:1.2em;margin:0;font-size:12px;color:var(--hot);font-weight:400;line-height:1.5}
.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)}}
.banner{margin:14px 0 0;padding:12px 14px;border:1px solid var(--hot);border-radius:12px;color:var(--hot);font-size:12px;line-height:1.5;font-weight:400;background:#1c1612}
.people,.results{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.people li{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#141824;animation:in .4s both}
.people .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.people h3{margin:0;font:28px/1.05 Anton,Impact,sans-serif;font-weight:400;color:#f5f0e6;overflow-wrap:anywhere}
.people .owes{font:24px/1 Anton,Impact,sans-serif;font-weight:400;color:var(--cream)}
.people .paid .owes{color:var(--ok)}
.people .tag{font-size:10px;letter-spacing:.14em;color:var(--cyan)}
.people .facts{font-size:12px;color:var(--muted);font-weight:400;margin:6px 0 0}
.people .quote{font-size:12px;color:#c9ccd6;font-weight:400;margin:8px 0 0;line-height:1.5;border-left:2px solid var(--cream);padding-left:10px}
.people details{margin-top:8px;font-size:11px;color:var(--muted);font-weight:400;line-height:1.5}.people summary{cursor:pointer;color:var(--cyan);letter-spacing:.08em;min-height:24px}
.pay{margin-top:14px;display:grid;gap:8px}.fine{margin:0;font-size:11px;color:var(--muted);font-weight:400}
.results li{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:#131722;font-size:12px;font-weight:400;color:#c9ccd6;line-height:1.5;overflow-wrap:anywhere}
.results li b{color:var(--ink)}.results .ok b.s{color:var(--ok)}.results .bad{border-color:var(--hot);color:var(--hot)}
@keyframes in{from{opacity:0;transform:translateY(6px)}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 8px;color:var(--cream)}.work h2 small{color:var(--muted);letter-spacing:.04em;font-weight:400;margin-left:8px}
.rule{margin:0 0 12px;font-size:12px;color:var(--muted);font-weight:400;line-height:1.5}
#trace{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12px}
#trace li{display:grid;grid-template-columns:104px 120px 1fr 92px;gap:12px;padding:8px 10px;border-radius:8px;background:#131722;font-weight:400;color:#c9ccd6;align-items:baseline}
#trace li.night{box-shadow:inset 3px 0 0 var(--cyan)}
#trace li b{color:var(--cyan);font-weight:700;overflow-wrap:anywhere}#trace li code{color:var(--muted);font-size:11px}#trace .empty{display:block;color:var(--muted)}
#trace .msg{overflow-wrap:anywhere}#trace .w{font-size:11px;color:var(--cream);text-align:right;white-space:nowrap}
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%)}
 #trace li{grid-template-columns:1fr auto;gap:4px 10px}#trace li code{grid-column:1}#trace .msg{grid-column:1/-1;order:3}.clock{font-size:10px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}