:root{--bg: #0e1016;--panel: rgba(20, 23, 32, .78);--border: rgba(255, 255, 255, .1);--text: #e8eaf0;--muted: #9aa1b3;--accent: #ff7a45;--accent-2: #3fd0c9;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(120% 90% at 50% 20%,#1c2030 0%,var(--bg) 60%,#07080c 100%);color:var(--text);overflow:hidden;-webkit-user-select:none;user-select:none}#scene{position:fixed;inset:0;display:block;touch-action:none}.panel,.top .switch,.chord-nav,.variants,.toolbar{background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.top{position:fixed;top:18px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}.switch{display:flex;align-items:center;gap:10px;padding:6px 14px;border-radius:999px;cursor:pointer}.switch input{position:absolute;opacity:0;pointer-events:none}.switch-text{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .2s}.switch .track{position:relative;width:40px;height:22px;border-radius:999px;background:#ffffff1f;transition:background .25s}.switch .knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.4,0,.2,1)}.switch input:checked~.track{background:var(--accent)}.switch input:checked~.track .knob{transform:translate(18px)}.switch input:not(:checked)~.switch-text.off,.switch input:checked~.switch-text.on{color:var(--text)}.switch:has(input:checked) .switch-text.off{color:var(--muted)}.switch:has(input:not(:checked)) .switch-text.on{color:var(--muted)}.switch:has(input:not(:checked)) .switch-text.off{color:var(--text)}.chord-nav{display:flex;align-items:center;gap:6px;padding:6px;border-radius:16px}.arrow{width:44px;height:56px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-size:34px;line-height:1;cursor:pointer;transition:background .15s,color .15s}.arrow:hover{background:#ffffff0f;color:var(--text)}.chord-title{min-width:150px;text-align:center}#chord-name{font-size:32px;font-weight:700;letter-spacing:-.01em}.notes{display:flex;justify-content:center;gap:5px;min-height:18px;margin-top:2px}.notes span{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:#ff7a452e;color:#ffb08f}.notes span.open{background:#3fd0c92e;color:#8fe9e4}.variants{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:16px;padding:14px;border-radius:16px;width:150px}.variants h3{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.options{display:flex;flex-direction:column;gap:4px}.options button{text-align:left;padding:7px 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font-size:13px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.options button:hover{background:#ffffff0d;color:var(--text)}.options button[aria-pressed=true]{color:#fff;background:#ff7a452e;border-color:#ff7a4580}.options button:disabled{opacity:.35;cursor:default}.toolbar{position:fixed;left:50%;bottom:24px;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:8px;border-radius:16px}.divider{width:1px;height:36px;background:var(--border);margin:0 4px}.tool{display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;padding:10px 0 8px;background:transparent;color:var(--muted);border:1px solid transparent;border-radius:12px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}.tool svg{width:26px;height:26px;fill:currentColor}.tool span{font-size:11px;letter-spacing:.06em;text-transform:uppercase}.tool:hover{color:var(--text);background:#ffffff0d}.tool:active{transform:scale(.96)}.tool[aria-pressed=true]{color:#fff;background:linear-gradient(160deg,#ff7a4559,#ff7a451f);border-color:#ff7a458c}.tool.play{color:#8fe9e4}.tool.play:hover{background:#3fd0c926}.hint{position:fixed;left:20px;bottom:26px;margin:0;max-width:240px;font-size:12px;line-height:1.4;color:var(--muted)}@media(max-width:720px){.variants{right:8px;width:118px;padding:10px}.hint{display:none}}.toolbar .guitar-only{display:none}.toolbar.guitar-model .guitar-only{display:flex}.toolbar.guitar-model .divider.guitar-only{display:block}