@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=IBM+Plex+Mono:wght@500;700&display=swap');
:root{color-scheme:dark;--board:#0e1712;--chalk:#f2eedf;--dim:#aab3a6;--accent:#dccb6e;--line:#ded7bc44;--bad:#d2a092;font-family:'IBM Plex Mono',monospace;background:var(--board);color:var(--chalk)}
*{box-sizing:border-box} body{margin:0;min-height:100dvh;background:radial-gradient(circle at 50% 15%,#ffffff10,transparent 34%),repeating-linear-gradient(100deg,#ffffff05 0 1px,transparent 1px 9px),linear-gradient(90deg,#0003 1px,transparent 1px),var(--board);background-size:auto,auto,12px 12px,auto;overflow-x:hidden} body:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,#0009 100%)}
.appShell{position:relative;z-index:1;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto auto;width:min(1120px,calc(100vw - 32px));margin:auto;padding:18px 0 20px}.top{display:grid;grid-template-columns:1fr auto;align-items:start;border-bottom:1px solid var(--line);padding-bottom:12px;gap:16px}.brand .eyebrow{margin:0;color:var(--accent);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}.brand h1{font:52px/.85 'Patrick Hand',cursive;margin:4px 0 0}.meta{display:flex;gap:28px;align-items:start;text-align:right}.metric{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.12em}.metric strong{display:block;color:var(--chalk);font:32px/.8 'Patrick Hand',cursive;letter-spacing:0;text-transform:none}.metric:first-child strong{color:var(--accent)}
body.quiz-running .top{display:none}.view{display:none}.view.active{display:block}.quizStage{position:relative;display:grid;place-items:center;text-align:center;min-height:clamp(420px,70dvh,720px);border-bottom:1px solid var(--line)}.questionShell{display:grid;place-items:center;text-align:center;gap:20px}.questionKicker{margin:0;color:var(--dim);font-size:13px;text-transform:uppercase;letter-spacing:.2em}.bigQuestion{font:clamp(96px,17vw,230px)/.78 'Patrick Hand',cursive;text-wrap:balance;max-width:900px;text-shadow:0 0 1px #fff}.heroStart{border:2px solid var(--accent);background:transparent;color:var(--accent);font:clamp(96px,17vw,210px)/.8 'Patrick Hand',cursive;padding:.04em .22em .12em;cursor:pointer}.heroStart:hover{background:#dccb6e18}.listenPill{position:absolute;left:0;top:20px;color:var(--dim);font-size:13px;text-transform:uppercase;letter-spacing:.12em}.listenPill.on{color:var(--accent)}.scoreMarks{position:absolute;left:0;bottom:24px;display:flex;gap:6px;color:var(--accent);font:38px/.7 'Patrick Hand',cursive}.coinStack{display:flex;gap:6px;flex-wrap:wrap}.coin{background:none;border:0;box-shadow:none;animation:markIn .25s ease-out both}.coin:after{content:"/";color:var(--accent);font:38px/.7 'Patrick Hand',cursive}.primaryControls{position:absolute;right:0;bottom:22px;display:flex;gap:10px;align-items:center}.mainAction,.iconBtn,.quietBtn,button,select,input{font-family:'IBM Plex Mono',monospace}.mainAction{border:1px solid var(--accent);background:transparent;color:var(--accent);font-weight:700;text-transform:lowercase;padding:14px 18px;min-width:120px;cursor:pointer}.mainAction:disabled{display:none}body:not(.quiz-running) #start{display:none}.iconBtn{width:48px;height:48px;border:1px solid var(--line);background:transparent;color:var(--chalk);font:24px 'Patrick Hand',cursive;cursor:pointer}.iconBtn:disabled{opacity:.35}.quietBtn{border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--dim);padding:6px 0}.quietBtn:disabled{opacity:.35}.utilityBar{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:18px;align-items:center;padding-top:14px;color:var(--dim);font-size:12px}.status{color:var(--dim);text-transform:lowercase}.status.live{color:var(--accent)}.status.error{color:var(--bad)}.tabs{display:flex;gap:18px}.tab{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--dim);font-weight:700;padding:6px 0}.tab.active{color:var(--accent);border-color:var(--accent)}.audioCompact{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.audioCompact label{display:flex;gap:8px;align-items:center;color:var(--dim);text-transform:lowercase}.devicePicker.hidden{display:none}select,input{background:transparent;color:var(--chalk);border:1px solid var(--line);padding:8px 10px}button{cursor:pointer}button:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}
.settingsGrid.active{display:block}.card{border:1px solid var(--line);background:#0b100dcc;padding:18px;margin-top:16px}.card h2{margin:0 0 16px;color:var(--accent);font-size:13px;letter-spacing:.16em;text-transform:uppercase}.settingsForm{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}.settingsForm label{display:grid;gap:6px;color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.1em}.settingsForm input[type=number]{font-size:18px}.checkLine{display:flex!important;flex-direction:row;align-items:center;text-transform:none!important;letter-spacing:0!important;font-size:15px!important}.settingsActions{display:flex;flex-wrap:wrap;gap:12px}.settingsActions button{border:1px solid var(--line);background:transparent;color:var(--chalk);padding:10px 12px;font-weight:700}.grid.active{display:grid;grid-template-columns:1fr 1.4fr;gap:16px}.conversationCard{grid-column:1/-1}pre{white-space:pre-wrap;word-break:break-word;margin:0;color:var(--chalk);font:12px/1.45 'IBM Plex Mono',monospace;max-height:520px;overflow:auto}.costCounter{position:fixed;right:18px;bottom:18px;z-index:10;display:grid;gap:1px;padding:10px 12px;background:#0b100ddd;border:1px solid var(--line);text-align:right}.costCounter strong{color:var(--accent);font-size:14px}.costCounter span{color:var(--dim);font-size:11px}.celebration,.oopsBadge{pointer-events:none;position:fixed;left:50%;top:50%;z-index:20;opacity:0;transform:translate(-50%,-50%);color:var(--accent);font:74px/.9 'Patrick Hand',cursive}.oopsBadge{color:#dfc8bd}.celebration.show,.oopsBadge.show{animation:chalkNote 1.1s ease-out both}.confetti{display:none}@keyframes markIn{from{opacity:0;transform:translateY(-8px) rotate(-10deg)}to{opacity:1;transform:none}}@keyframes chalkNote{0%{opacity:0;transform:translate(-50%,-45%) scale(.9)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-58%) scale(1.03)}}
@media(max-width:720px){.appShell{width:calc(100vw - 24px);padding:12px 0 18px}.top{grid-template-columns:1fr}.brand h1{font-size:46px}.meta{text-align:left;gap:20px}.metric strong{font-size:27px}.quizStage{min-height:58dvh}.bigQuestion{font-size:clamp(76px,24vw,118px);max-width:360px}.heroStart{font-size:clamp(78px,25vw,120px)}.listenPill{top:14px}.primaryControls{left:0;right:0;justify-content:space-between}.mainAction{flex:1}.scoreMarks{bottom:86px}.utilityBar{grid-template-columns:1fr;gap:12px}.audioCompact{gap:10px}.audioCompact label{width:100%;justify-content:space-between}.costCounter{position:static;margin:14px 0 0 auto;width:max-content;max-width:100%}.grid.active{grid-template-columns:1fr}.settingsForm{grid-template-columns:1fr}}