:root{--dot-ink: #0a1230;--dot-mid: #14193a;--dot-flame: #f6c15e;--dot-coral: #ff6b8a;--dot-mint: #8aeac0;--dot-sky: #7ac8ed;--dot-mauve: #c9a8ef;--dot-cream: #f4e7c8;--dot-cream-dim: #b8aa84;--dot-cream-dimmer: #7a7058}body:has(.dot){background:radial-gradient(circle at 18% 8%,#1a1e58 0%,transparent 50%),radial-gradient(circle at 82% 92%,#2a1640 0%,transparent 55%),var(--dot-ink);color:var(--dot-cream);font-family:Inter,-apple-system,system-ui,sans-serif;min-height:100vh}.dot{max-width:880px;margin:0 auto;padding:36px 24px 64px}.dot__hero{margin-bottom:32px}.dot__kicker{font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;letter-spacing:.18em;color:var(--dot-coral);text-transform:uppercase;margin:0 0 12px}.dot__title{font-family:Inter Tight,sans-serif;font-weight:800;font-size:clamp(32px,5.5vw,52px);letter-spacing:-.025em;line-height:1.04;margin:0 0 16px}.dot__sub{font-size:15px;line-height:1.55;color:var(--dot-cream-dim);margin:0}.dot__sub a{color:var(--dot-sky);text-decoration:underline;text-underline-offset:3px}.dot__stage{background:#ffffff0a;border:1px solid rgba(244,231,200,.1);border-radius:18px;padding:22px;margin-bottom:36px}.dot__banner{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 18px;background:#8aeac01a;border:1px solid rgba(138,234,192,.3);border-radius:10px}.dot__banner-icon{font-size:22px}.dot__banner-body{flex:1;display:flex;flex-direction:column}.dot__banner-title{font-family:Inter Tight,sans-serif;font-weight:700;font-size:15px;color:var(--dot-mint)}.dot__banner-meta{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.04em;color:var(--dot-cream-dim);margin-top:2px}.dot__banner-action{border:1px solid rgba(138,234,192,.6);background:#8aeac026;color:var(--dot-mint);padding:8px 14px;border-radius:6px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}.dot__banner-action:hover{background:#8aeac040}.dot__strip{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:8px}@media(max-width:720px){.dot__strip{grid-template-columns:repeat(4,1fr);gap:6px}}@media(max-width:420px){.dot__strip{grid-template-columns:repeat(2,1fr)}}.dot__beat{display:flex;flex-direction:column;gap:4px;padding:6px;background:#0000004d;border-radius:8px;border:1px solid rgba(244,231,200,.08);transition:border-color .2s ease,opacity .2s ease}.dot__beat--filled{border-color:#f4e7c833}.dot__beat--your-turn{border-color:var(--dot-flame);background:#f6c15e0f;box-shadow:0 0 0 2px #f6c15e33}.dot__beat--future{opacity:.3}.dot__beat-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:3px;aspect-ratio:1}.dot__cell{background:#f4e7c80f;border:1px solid rgba(244,231,200,.1);border-radius:2px;cursor:pointer;transition:background 80ms ease,transform 60ms ease;min-width:0;min-height:0;padding:0}.dot__cell:hover{background:#f4e7c829}.dot__cell--on{background:var(--cell-color);border-color:var(--cell-color)}.dot__cell--low.dot__cell--on{--cell-color: #f6c15e}.dot__cell--mid.dot__cell--on{--cell-color: #ff8a70}.dot__cell--high.dot__cell--on{--cell-color: #c9a8ef}.dot__cell--bell.dot__cell--on{--cell-color: #8aeac0}.dot__cell--play{box-shadow:0 0 0 2px var(--dot-cream);transform:scale(.92)}.dot__beat--locked .dot__cell{cursor:not-allowed}.dot__beat--locked .dot__cell:hover{background:#f4e7c80f}.dot__beat--locked .dot__cell--on:hover{background:var(--cell-color)}.dot__beat-label{display:flex;align-items:center;justify-content:space-between;gap:4px;font-family:JetBrains Mono,monospace;font-size:9px;letter-spacing:.06em;color:var(--dot-cream-dimmer)}.dot__beat-n{color:var(--dot-cream-dim)}.dot__beat--your-turn .dot__beat-n{color:var(--dot-flame)}.dot__beat-pid{font-weight:600}.dot__beat--your-turn .dot__beat-pid{color:var(--dot-flame)}.dot__legend{display:flex;flex-wrap:wrap;gap:14px;padding:6px 0;margin-bottom:16px;justify-content:center}.dot__legend-item{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.12em;color:var(--dot-cream-dim)}.dot__legend-item--low{color:#f6c15e}.dot__legend-item--mid{color:#ff8a70}.dot__legend-item--high{color:#c9a8ef}.dot__legend-item--bell{color:#8aeac0}.dot__transport{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}.dot__btn{border:1px solid rgba(244,231,200,.25);background:#f4e7c814;color:var(--dot-cream);padding:10px 18px;border-radius:8px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;letter-spacing:.02em}.dot__btn:hover{background:#f4e7c829}.dot__btn--play{background:#f6c15e26;border-color:#f6c15e73;color:var(--dot-flame)}.dot__btn--play:hover{background:#f6c15e40}.dot__bpm-wrap{display:flex;align-items:center;gap:10px;flex:1;min-width:220px}.dot__bpm-label{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.12em;color:var(--dot-cream-dim)}.dot__bpm{flex:1;accent-color:var(--dot-flame);cursor:pointer}.dot__bpm-readout{font-family:JetBrains Mono,monospace;font-size:13px;color:var(--dot-flame);min-width:32px;text-align:right}.dot__actions{display:flex;flex-wrap:wrap;gap:10px}.dot__action{flex:0 0 auto;border:1px solid rgba(244,231,200,.18);background:#f4e7c80f;color:var(--dot-cream);padding:10px 16px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none}.dot__action:hover{background:#f4e7c824;border-color:#f4e7c859}.dot__action--primary{background:#ff6b8a26;border-color:#ff6b8a73;color:var(--dot-coral)}.dot__action--primary:hover{background:#ff6b8a40}.dot__action--ghost{color:var(--dot-cream-dim);background:transparent;border-color:#f4e7c81a}.dot__notes{max-width:720px}.dot__notes-h{font-family:Inter Tight,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--dot-cream);margin:0 0 12px}.dot__notes p,.dot__notes li{font-size:14px;line-height:1.6;color:var(--dot-cream-dim);margin:0 0 12px}.dot__notes ul{list-style:none;padding-left:0;margin:0 0 12px}.dot__notes li{padding-left:18px;position:relative;margin-bottom:6px}.dot__notes li:before{content:"·";position:absolute;left:6px;color:var(--dot-flame)}.dot__notes em{color:var(--dot-flame);font-style:italic}.dot__notes strong{color:var(--dot-cream);font-weight:600}.dot__notes code{font-family:JetBrains Mono,monospace;font-size:12px;padding:1px 6px;border-radius:4px;background:#f4e7c814;color:var(--dot-mint)}.dot__notes a{color:var(--dot-coral);text-decoration:underline;text-underline-offset:3px}.dot__toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%) translateY(20px);background:#000000d9;color:var(--dot-flame);padding:10px 18px;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:12px;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .24s ease,transform .24s ease;z-index:50;border:1px solid rgba(246,193,94,.4)}.dot__toast--show{opacity:1;transform:translate(-50%) translateY(0)}