:root{--ink:#080e17;--paper:#f5f0e6;--gold:#e4c463;--warm:#e8dcc8;--line:#526174;--body:'DM Sans',system-ui,sans-serif;--display:'Fraunces',Georgia,serif}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--warm);font:17px/1.65 var(--body)}.wrap{width:min(1050px,calc(100% - 40px));margin:auto}h1,h2{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.035em;color:white}h1{font-size:clamp(40px,5vw,66px);margin:0}h2{font-size:clamp(29px,3vw,40px)}p{max-width:64ch}.eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}.listening{padding:90px 0;background:#0c1524}.lead{font-size:19px;max-width:47ch;margin-bottom:35px}.draw-tabs,.drawing-tools,.pen-controls{display:flex;gap:10px;flex-wrap:wrap}button,summary{font:500 15px/1.4 var(--body);cursor:pointer}button{min-height:48px;padding:11px 18px;border:1px solid #7c899a;border-radius:24px;background:#132238;color:#f5f0e6}button:hover{background-color:#213750}button:disabled{opacity:.45;cursor:default}button:focus-visible,canvas:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:5px}.draw-tabs button[aria-pressed=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}.draw-tabs button:last-child[aria-pressed=true]{background:#b8e0ed}.drawing-frame{position:relative;width:100%;margin:22px 0;background:var(--paper);border:2px solid #b6aa95;border-radius:8px;overflow:hidden}#drawing{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair}#draw-cursor{position:absolute;pointer-events:none;width:15px;height:15px;border:2px solid #080e17;background:#ffffff88;border-radius:50%;transform:translate(-50%,-50%);display:none}.drawing-frame:focus-within #draw-cursor,.drawing-frame.keyboard-active #draw-cursor{display:block}#blank-hint{position:absolute;pointer-events:none;left:0;right:0;top:43%;text-align:center;font:400 clamp(17px,2.3vw,27px) var(--display);color:#596373}.drawing-tools{margin:18px 0}.drawing-tools button{font-size:14px}.keyboard-draw{border-block:1px solid var(--line);padding:14px 0;margin-top:24px}.keyboard-draw summary{min-height:44px;align-content:center;color:var(--gold)}.keyboard-draw p{font-size:14px}.pen-controls button{min-width:48px}.pen-controls #pen-down[aria-pressed=true]{background:var(--gold);color:var(--ink)}#draw-status{font-size:14px;color:#bfccd9;min-height:3em}.draw-invitation{border-top:1px solid var(--line);margin-top:38px;padding-top:20px}dialog{background:#0c1524;color:var(--warm);border:1px solid #7c899a;border-radius:12px;width:min(540px,calc(100% - 32px));padding:25px}dialog::backdrop{background:#02050ddd}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#compare[aria-pressed=true]{background:var(--paper);color:var(--ink)}@media(max-width:600px){.listening{padding:65px 0}.wrap{width:calc(100% - 36px)}.lead{font-size:17px}.draw-tabs{display:grid;grid-template-columns:1fr}.draw-tabs button{text-align:left}.drawing-frame{margin:16px 0}.drawing-tools{gap:8px}.drawing-tools button{padding:10px 14px}#drawing{aspect-ratio:1.25;object-fit:fill}.pen-controls{gap:8px}.pen-controls #pen-down{flex-basis:62%}.drawing-tools #compare{flex:1}.draw-invitation{margin-top:25px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
:root{color-scheme:dark}
@media(max-width:600px){.listening{padding-top:42px}.listening h1,.listening h2.activity-title{font-size:33px;max-width:13ch}.listening .eyebrow{font-size:10px;margin-bottom:16px}.lead{margin-bottom:22px}.draw-tabs{grid-template-columns:1fr 1fr;gap:7px}.draw-tabs button{border-radius:10px;padding:9px;font-size:12px;min-height:54px}.drawing-frame{margin-top:12px}#draw-prompt{font-size:14px;margin:15px 0 0}.drawing-tools{margin-top:12px}}