:root{--space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:40px;--radius-1:8px;--radius-2:16px;--radius-3:24px;--radius-pill:999px;--font-ui:-apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;--leading-tight:1.15;--leading-read:1.75;--text-1:.8125rem;--text-2:1.0625rem;--text-3:1.25rem;--text-4:1.75rem;--display-numeral:clamp(56px, 16vw, 96px);--tap-min:64px;--motion-fast:.15s;--motion-base:.22s;--motion-slow:.3s;--ease-out:cubic-bezier(.2, .7, .3, 1);--layer-raise:10;--layer-top:100;--focus-inner:#fff;--focus-outer:#101010}[data-palette=a]{--paper:#faf6ef;--paper-raised:#fff;--ink:#171512;--ink-soft:#5c564c;--edge:#e3dccc;--tap-flash:#17151229;--room-metronome-fill:#e76e00;--room-metronome-edge:#924300;--room-metronome-ink:#171512;--room-tuner-fill:#00539b;--room-tuner-edge:#002246;--room-tuner-ink:#fff;--room-note-fill:#e1005f;--room-note-edge:#7f0033;--room-note-ink:#fff;--room-ear-fill:#00cbc9;--room-ear-edge:#008b8a;--room-ear-ink:#171512;--room-rhythm-fill:#fde800;--room-rhythm-edge:#9e9000;--room-rhythm-ink:#171512;--room-theory-fill:#4b006a;--room-theory-edge:#1b0021;--room-theory-ink:#fff}[data-palette=b]{--paper:#0e1116;--paper-raised:#1b2029;--ink:#f2efe9;--ink-soft:#9aa1ac;--edge:#2c323c;--tap-flash:#f2efe92e;--room-metronome-fill:#ff9245;--room-metronome-edge:#ff9245;--room-metronome-ink:#171512;--room-tuner-fill:#007fe9;--room-tuner-edge:#007fe9;--room-tuner-ink:#171512;--room-note-fill:#ff5b85;--room-note-edge:#ff5b85;--room-note-ink:#171512;--room-ear-fill:#00e0de;--room-ear-edge:#00e0de;--room-ear-ink:#171512;--room-rhythm-fill:#ffea5e;--room-rhythm-edge:#ffea5e;--room-rhythm-ink:#171512;--room-theory-fill:#9b00d7;--room-theory-edge:#9b00d7;--room-theory-ink:#fff}[data-room=metronome]{--room-fill:var(--room-metronome-fill);--room-edge:var(--room-metronome-edge);--room-ink:var(--room-metronome-ink)}[data-room=tuner]{--room-fill:var(--room-tuner-fill);--room-edge:var(--room-tuner-edge);--room-ink:var(--room-tuner-ink)}[data-room=note]{--room-fill:var(--room-note-fill);--room-edge:var(--room-note-edge);--room-ink:var(--room-note-ink)}[data-room=ear]{--room-fill:var(--room-ear-fill);--room-edge:var(--room-ear-edge);--room-ink:var(--room-ear-ink)}[data-room=rhythm]{--room-fill:var(--room-rhythm-fill);--room-edge:var(--room-rhythm-edge);--room-ink:var(--room-rhythm-ink)}[data-room=theory]{--room-fill:var(--room-theory-fill);--room-edge:var(--room-theory-edge);--room-ink:var(--room-theory-ink)}*{box-sizing:border-box}html,body{background:var(--paper);color:var(--ink);margin:0;padding:0}body{font-family:var(--font-ui);font-size:var(--text-2);line-height:var(--leading-read);-webkit-text-size-adjust:100%;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}.prose{-webkit-user-select:text;user-select:text}:focus-visible{outline:3px solid var(--focus-inner);outline-offset:2px;box-shadow:0 0 0 6px var(--focus-outer)}.page{max-width:480px;padding:calc(var(--space-4) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));margin:0 auto}.wordmark{font-size:var(--text-3);font-weight:700;line-height:var(--leading-tight);margin:0 0 var(--space-4)}.page-head{justify-content:space-between;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-4);display:flex}.page-head .wordmark{margin:0}.quiet-link{color:var(--ink-soft);font-size:var(--text-1);min-height:var(--tap-min);padding-inline:var(--space-2);align-items:center;margin-inline-end:calc(var(--space-2) * -1);text-decoration:none;display:inline-flex}.quiet-link:hover{color:var(--ink)}.grid{gap:var(--space-3);grid-template-columns:repeat(2,1fr);display:grid}.grid+.grid{margin-top:var(--space-3)}.door{--door-radius:var(--radius-3);border-radius:var(--door-radius);background:var(--room-fill);color:var(--room-ink);border:3px solid var(--room-edge);min-height:var(--tap-min);padding:var(--space-3);transition:transform var(--motion-fast) var(--ease-out);-webkit-tap-highlight-color:var(--tap-flash);text-decoration:none;display:flex;position:relative}.door:active{transform:scale(.97)}.door--tool{--door-radius:var(--radius-2);aspect-ratio:2;align-items:center;gap:var(--space-2)}.door--tool .door__label{font-size:var(--text-3)}.door--game{aspect-ratio:1;flex-direction:column;justify-content:space-between;align-items:flex-start}.door__label{font-size:var(--text-3);font-weight:700;line-height:var(--leading-tight)}.door__soon{width:22px;height:22px;color:var(--room-ink);position:absolute;inset-block-start:var(--space-2);inset-inline-end:var(--space-2)}.room{background:var(--room-fill);min-height:100dvh;color:var(--room-ink);justify-content:center;align-items:center;gap:var(--space-4);padding:calc(var(--space-4) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));text-align:center;flex-direction:column;display:flex}.room__title{font-size:var(--text-4);font-weight:700;line-height:var(--leading-tight);margin:0}.room__blurb{font-size:var(--text-2);margin:0}.back{border-radius:var(--radius-pill);background:var(--room-edge);width:72px;height:72px;color:var(--paper);z-index:var(--layer-raise);-webkit-tap-highlight-color:var(--tap-flash);place-items:center;text-decoration:none;display:grid;position:fixed;inset-block-start:calc(var(--space-3) + env(safe-area-inset-top));inset-inline-start:var(--space-3)}.prose h2{font-size:var(--text-3);margin:var(--space-5) 0 var(--space-2);line-height:var(--leading-tight)}.prose p{margin:0 0 var(--space-3)}.prose strong{font-weight:700}.palette-picker{gap:var(--space-3);margin:var(--space-3) 0;grid-template-columns:repeat(2,1fr);display:grid}.palette-card{min-height:var(--tap-min);padding:var(--space-3);border-radius:var(--radius-2);border:3px solid var(--edge);background:var(--paper-raised);color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:var(--tap-flash);font-weight:700}.palette-card[aria-pressed=true]{border-color:var(--ink)}.palette-swatches{margin-top:var(--space-2);gap:4px;display:flex}.palette-swatches i{border-radius:3px;flex:1;height:14px}.palette-swatches i:first-child{background:var(--room-metronome-fill)}.palette-swatches i:nth-child(2){background:var(--room-tuner-fill)}.palette-swatches i:nth-child(3){background:var(--room-note-fill)}.palette-swatches i:nth-child(4){background:var(--room-ear-fill)}.palette-swatches i:nth-child(5){background:var(--room-rhythm-fill)}.palette-swatches i:nth-child(6){background:var(--room-theory-fill)}@media (prefers-reduced-motion:reduce){*{transition-duration:1ms!important;animation-duration:1ms!important}}