:root{--bg: #0d0f14;--surface: #161a22;--surface-2: #1d222c;--surface-3: #2a3140;--text: #f2f4f8;--text-dim: #9aa3b2;--accent: #f0b429;--accent-ink: #201500;--hl: #f0b429;--radius: 14px}:root[data-theme=light]{--bg: #f6f4ef;--surface: #ffffff;--surface-2: #f0ece2;--surface-3: #ddd6c4;--text: #201e1a;--text-dim: #68624f;--accent: #b8720a;--accent-ink: #fff8ec;--hl: #b8720a}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}.app{max-width:720px;margin:0 auto;padding:28px 16px 48px}.header{text-align:center;margin-bottom:20px}.topbar{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px}.lang-selector{display:flex;gap:6px}.lang-pill{background:var(--surface);color:var(--text-dim);border:1px solid var(--surface-3);border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background .2s,color .2s,transform .15s}.lang-pill:hover{transform:translateY(-1px)}.lang-pill.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.theme-toggle{width:36px;height:36px;background:var(--surface);color:var(--text);border:1px solid var(--surface-3);border-radius:999px;font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s}.theme-toggle:hover{transform:translateY(-1px);background:var(--surface-2)}.title{font-family:Playfair Display,Georgia,serif;font-size:clamp(2.4rem,8vw,3.6rem);font-weight:700;margin:0;letter-spacing:.01em}.subtitle{color:var(--text-dim);text-transform:uppercase;letter-spacing:.35em;font-size:.85rem;margin:6px 0 22px}.family-selector{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.pill{background:var(--surface);color:var(--text);border:1px solid var(--surface-3);border-radius:999px;padding:12px 24px;font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s,color .2s,transform .15s}.pill:hover{transform:translateY(-1px)}.pill.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.main{display:flex;flex-direction:column;gap:22px}.wheel-wrap{position:relative;margin:8px auto 0;width:min(92vw,560px)}.wheel-arrow{position:absolute;top:4.5%;left:50%;transform:translate(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}.wheel-arrow-label{color:var(--accent);font-family:Playfair Display,Georgia,serif;font-weight:700;font-size:1.4rem;text-shadow:0 0 12px rgba(240,180,41,.6)}.wheel-svg{display:block;width:100%;height:auto}.wheel-rotor{transition:transform .7s cubic-bezier(.22,1,.36,1)}.wheel-segment{cursor:pointer;outline:none}.wheel-segment:hover path{filter:brightness(1.12)}.wheel-segment:focus-visible path{stroke:var(--accent);stroke-width:5}.wheel-segment text{transition:transform .7s cubic-bezier(.22,1,.36,1)}.wheel-chord{fill:#fff;font-family:Playfair Display,Georgia,serif;font-size:30px;font-weight:700;paint-order:stroke;stroke:#00000073;stroke-width:5px;pointer-events:none}.wheel-roman{fill:var(--text-dim);font-family:Playfair Display,Georgia,serif;font-size:30px;font-weight:600}.wheel-mode{fill:var(--accent);font-family:Playfair Display,Georgia,serif;font-size:26px;font-weight:700;letter-spacing:.08em}.wheel-mode-small{font-size:20px}.scale-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;background:var(--surface);border:1px solid var(--surface-3);border-radius:var(--radius);padding:14px 12px}.scale-cell{display:flex;flex-direction:column;align-items:center;gap:6px}.scale-roman{color:var(--text-dim);font-family:Playfair Display,Georgia,serif;font-size:.95rem}.scale-note{width:100%;aspect-ratio:1;max-width:64px;border-radius:12px;border:1px solid var(--surface-3);background:var(--surface-2);color:var(--text);font-family:Playfair Display,Georgia,serif;font-size:clamp(1rem,3.4vw,1.5rem);font-weight:600;cursor:pointer;transition:background .2s,color .2s,transform .15s}.scale-note:hover{transform:translateY(-2px)}.scale-note.tonic{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 0 18px #f0b42959}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:480px;margin:0 auto;width:100%}.btn{background:var(--surface-2);color:var(--text);border:1px solid var(--surface-3);border-radius:12px;padding:15px 18px;font-size:1.05rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s,transform .15s}.btn:hover{transform:translateY(-1px);background:var(--surface-3)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn.primary:hover{background:#ffc63d}.key-selector{text-align:center}.key-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.25em;font-size:.9rem;margin:4px 0 14px}.key-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:560px;margin:0 auto}.key-chip{width:56px;height:56px;border-radius:50%;border:1px solid var(--surface-3);background:transparent;color:var(--text);font-size:1.05rem;font-weight:600;font-family:inherit;cursor:pointer;transition:background .2s,color .2s,transform .15s}.key-chip:hover{transform:translateY(-2px);background:var(--surface-2)}.key-chip.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.panel{background:var(--surface);border:1px solid var(--surface-3);border-radius:var(--radius);padding:22px 24px}.panel-title{font-family:Playfair Display,Georgia,serif;font-size:1.6rem;font-weight:600;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--surface-3)}.info-list{margin:0}.info-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0}.info-row dt{color:var(--text-dim)}.info-row dd{margin:0;font-weight:700;text-align:right}.info-scale{color:var(--accent);letter-spacing:.15em}.interval-mode{color:var(--text-dim);margin:0 0 12px;font-weight:600}.interval-row{display:flex;flex-wrap:wrap;gap:10px}.interval-chip{min-width:52px;text-align:center;padding:10px 8px;border-radius:10px;background:var(--surface-2);border:1px solid var(--surface-3);font-weight:700;font-size:1.1rem}.interval-chip.hl{background:var(--hl);color:var(--accent-ink);border-color:var(--hl);box-shadow:0 0 14px #f0b42959}.interval-hint{color:var(--text-dim);font-size:.9rem;margin:14px 0 0}.explanation p{margin:0;line-height:1.65;font-size:1.05rem}.footer{text-align:center;color:var(--text-dim);font-size:.85rem;margin-top:36px}@media (prefers-reduced-motion: reduce){.wheel-rotor,.wheel-segment text,.pill,.btn,.key-chip,.scale-note{transition:none}}@media (max-width: 480px){.controls{grid-template-columns:1fr 1fr}.key-chip{width:48px;height:48px}.panel{padding:18px}}