body{font-family:Arial,Helvetica,sans-serif;color:#fffbea}canvas{position:fixed;inset:0}body:after{z-index:1;background:linear-gradient(180deg,#143a4820,transparent 40%,#143a4830)}.logo{position:fixed;z-index:3;top:28px;left:36px;color:#fffbea;font-size:32px;font-weight:900;letter-spacing:-1.8px;text-decoration:none;text-shadow:0 2px 15px #174a4420}.centerpiece{position:fixed;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;padding:75px 20px 20px}.vinyl{width:min(43vw,440px,51vh);aspect-ratio:1;border-radius:50%;position:relative;display:grid;place-items:center;background:repeating-radial-gradient(circle at center,#1c2527 0,#1c2527 2px,#30393a 3px,#141e21 4px);box-shadow:10px 22px 40px #133e4650,inset 0 0 0 2px #354044;animation:rotation 32s linear infinite;animation-play-state:paused}.vinyl:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 15deg,transparent,#e1edf51c,transparent 30%,#0002,transparent 55%,#d5e4ed21,transparent 80%)}.vinyl.playing{animation-play-state:running}.record-label{width:34%;height:34%;border-radius:50%;background:#e7ad79;border:8px solid #c28b5d;color:#493a2b;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}.record-label b{font-size:clamp(32px,5vw,65px);line-height:.95;letter-spacing:-3px}.record-label span{font-size:clamp(5px,.65vw,8px);letter-spacing:1px;margin-top:10px}.record-label:after{content:'';width:5px;height:5px;background:#18282c;border-radius:50%;position:absolute;left:calc(50% - 2.5px);top:calc(50% - 2.5px)}.focus{text-align:center;text-shadow:0 1px 12px #19424770}.modes{display:flex;justify-content:center;gap:20px}.focus button{font:inherit;border:0;background:none;color:inherit;cursor:pointer;text-shadow:inherit;padding:6px 0}.modes button{font-size:11px;opacity:.65;border-bottom:1px solid transparent}.modes button.selected{opacity:1;border-bottom-color:#fffbea}#clock{font-size:54px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-2px;line-height:1.2;margin:10px 0 3px}.actions{display:flex;justify-content:center;align-items:center;gap:18px;font-size:12px}.actions #reset{opacity:.65;font-size:11px}.actions span{opacity:.4}#note{font-size:10px;letter-spacing:.6px;min-height:14px;margin:10px 0 0;opacity:.8}button:focus-visible,a:focus-visible{outline:2px solid #fffbea;outline-offset:5px;border-radius:2px}button:hover{opacity:1!important}@keyframes rotation{to{transform:rotate(360deg)}}@media(max-width:600px){.logo{top:24px;left:24px;font-size:28px}.vinyl{width:min(78vw,43vh)}.centerpiece{gap:26px;padding-top:60px}.record-label{border-width:6px}.record-label b{font-size:48px}.record-label span{font-size:6px}#clock{font-size:48px}}@media(max-height:550px) and (min-width:601px){.centerpiece{flex-direction:row;gap:60px;padding-top:25px}.vinyl{width:65vh}.logo{font-size:26px;top:16px}}@media(prefers-reduced-motion:reduce){.vinyl{animation:none}}
/* Quiet, direct controls: one primary action, no panels. */
.focus{color:#fffef1;text-shadow:0 2px 14px #133a4899}.actions #toggle{padding:9px 17px;border:1px solid #fffbeaaa;border-radius:22px;min-width:125px;background:#244b4320;transition:background .2s,transform .2s}.actions #toggle:hover{background:#244b4355;transform:translateY(-1px)}.actions #toggle:active{transform:translateY(0)}.actions #toggle:before{content:'▷';margin-right:8px;font-size:12px}.actions #toggle[aria-pressed=true]:before{content:'Ⅱ'}.actions #reset{min-height:36px;padding:9px 5px}.modes button{min-height:32px;padding:8px 3px}.logo{transition:opacity .2s}.logo:hover{opacity:.8}.record-label{box-shadow:inset 0 0 0 1px #f4cb9a70}.vinyl{will-change:transform}.focus #note{max-width:260px;line-height:1.5}.centerpiece{gap:24px}.focus #clock{font-size:48px;letter-spacing:-1.8px;margin:8px 0}.modes{gap:18px}.focus .actions{gap:12px}@media(max-width:600px){.centerpiece{gap:28px}.focus #clock{font-size:44px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}