:root{--bg:#f5f8fb;--panel:#fff;--panel-border:#c6d2de;--text:#213444;--muted:#5c7488;--select-bg:#f8fbfe;--select-border:#c6d4e1;--slider-track:color-mix(in srgb, var(--link) 30%, transparent);--slider-fill:var(--link);--slider-thumb-bg:#fff;--slider-thumb-border:var(--link);--chip-bg:#f3f7fb;--chip-border:#c7d6e3;--chip-active-bg:#dff0ff;--chip-active-border:#5d9bd1;--chip-hover-border:#8db2d2;--heading:#193042;--link:#2f6087;--link-hover:#1e4462;--nav-hover-bg:#dff0ff99;--nav-active-bg:#dff0ff;--handpan-shell-grad-start:#f3f6fb;--handpan-shell-grad-end:#dbe2ea;--handpan-shell-stroke:#b7c2cd;--handpan-tone-fill:#f9fbfd;--handpan-tone-stroke:#9aacbe;--handpan-tone-center-stroke:#8ea2b7;--handpan-chord-fill:#ffe2ad;--handpan-chord-stroke:#de9b3e;--handpan-shockwave-ring:#86b7e6;--handpan-shockwave-glow:#3a76ad;--handpan-shockwave-ring-active:#d8b489;--handpan-shockwave-glow-active:#8a6a44;--handpan-chord-root-stroke:color-mix(in srgb, var(--handpan-chord-stroke) 76%, #000 24%);--handpan-chord-active-stroke:#c6b18a;--handpan-chord-played-fill:#ffd296;--handpan-tone-label:#243647;--handpan-slot-label:#567188;--step-card-bg:#f9fbfd;--step-name-color:#213444;--step-action-bg:#fff;--step-action-border:#c7d6e3;--step-action-text:#355063;--add-chord-text:#234058;--social-btn-bg:#e9f3fb;--social-btn-border:#b8cde0;--social-btn-icon:#2f6087;--ui-surface-bg:var(--panel);--ui-surface-border:var(--panel-border);--ui-surface-strong-border:var(--chip-active-border);--ui-surface-shadow:0 18px 36px #00000047;--ui-overlay-bg:#0e1c2757;--ui-action-bg:var(--chip-active-bg);--ui-action-border:var(--chip-active-border);--ui-action-muted-bg:var(--chip-bg);--ui-action-muted-border:var(--chip-border);--page-bg:radial-gradient(circle at 20% 0%, #fff 0%, #f5f8fb 55%, #edf3f8 100%);--font-size-body:1rem;--line-body:1.5;--line-heading:1.2;--content-max:1280px;--layout-cols:2fr 3fr;--layout-gap:16px;--pan-max:540px;--radius:8px;--radius-sm:4px;--overlay-bg:#000000d9;--font-size-xs:11px;--font-size-2xs:10px;font-size:15px;font-family:var(--font-body);color:var(--text);line-height:var(--line-body);font-weight:500}:root[data-theme=forest]{--bg:#eef4ef;--panel:#f8fcf8;--panel-border:#b5c8b8;--text:#22372d;--muted:#4f6e5f;--select-bg:#f3faf4;--select-border:#b9cfbf;--chip-bg:#eaf6ec;--chip-border:#b6d1be;--chip-active-bg:#dcedd4;--chip-active-border:#4f8a62;--chip-hover-border:#75a888;--heading:#1f3c2d;--link:#2f6e49;--link-hover:#1e4f34;--nav-hover-bg:#d2eccc94;--nav-active-bg:#d2eccc;--handpan-shell-grad-start:#f1f6f1;--handpan-shell-grad-end:#d5dfd7;--handpan-shell-stroke:#a8b7ac;--handpan-tone-fill:#f8fcf8;--handpan-tone-stroke:#8ca394;--handpan-tone-center-stroke:#7c9383;--handpan-chord-fill:#bfd7a5;--handpan-chord-stroke:#6f9d5b;--handpan-shockwave-ring:#9ec489;--handpan-shockwave-glow:#5f9a4a;--handpan-shockwave-ring-active:#5f9a4a;--handpan-shockwave-glow-active:#3c7a2c;--handpan-chord-root-stroke:color-mix(in srgb, var(--handpan-chord-stroke) 76%, #000 24%);--handpan-chord-active-stroke:#8aa07f;--handpan-chord-played-fill:color-mix(in srgb, var(--handpan-chord-fill) 72%, var(--chip-active-bg) 28%);--handpan-tone-label:#233b2e;--handpan-slot-label:#4e6f5b;--step-card-bg:#f0f8f1;--step-name-color:#294735;--step-action-bg:#f6fbf7;--step-action-border:#b6d1be;--step-action-text:#365b45;--add-chord-text:#2c5c3e;--social-btn-bg:#dff0e4;--social-btn-border:#b5cfbd;--social-btn-icon:#2f6e49;--ui-surface-bg:var(--panel);--ui-surface-border:var(--panel-border);--ui-surface-strong-border:var(--chip-active-border);--ui-surface-shadow:0 18px 36px #00000038;--ui-overlay-bg:#0c180f52;--ui-action-bg:var(--chip-active-bg);--ui-action-border:var(--chip-active-border);--ui-action-muted-bg:var(--chip-bg);--ui-action-muted-border:var(--chip-border);--page-bg:radial-gradient(circle at 20% -10%, #f5fbf6 0%, #ebf5ed 45%, #dfece2 100%)}:root[data-theme=night]{--bg:#0f1620;--panel:#192431;--panel-border:#3a4f64;--text:#e5eef8;--muted:#a5bbcf;--select-bg:#223243;--select-border:#3d5468;--chip-bg:#243546;--chip-border:#44607a;--chip-active-bg:#35597a;--chip-active-border:#79b2e1;--chip-hover-border:#669ec9;--heading:#f1f7ff;--link:#9ecdf3;--link-hover:#d0e9ff;--nav-hover-bg:#79b2e13d;--nav-active-bg:#79b2e157;--handpan-shell-grad-start:#2a3948;--handpan-shell-grad-end:#1b2835;--handpan-shell-stroke:#4f6578;--handpan-tone-fill:#2b3d4f;--handpan-tone-stroke:#6e89a0;--handpan-tone-center-stroke:#86a2bb;--handpan-chord-fill:#7f6340;--handpan-chord-stroke:#caa06f;--handpan-shockwave-ring:#9ecdf3;--handpan-shockwave-glow:#4f83b8;--handpan-shockwave-ring-active:#d8b489;--handpan-shockwave-glow-active:#8a6a44;--handpan-chord-root-stroke:#534432;--handpan-chord-active-stroke:#9f8e7a;--handpan-chord-played-fill:#b58a59;--handpan-tone-label:#e6f1fb;--handpan-slot-label:#9bb4ca;--step-card-bg:#223242;--step-name-color:#deecfa;--step-action-bg:#2a3b4d;--step-action-border:#4b647a;--step-action-text:#bdd2e6;--add-chord-text:#c7def2;--social-btn-bg:#2a3b4d;--social-btn-border:#4b647a;--social-btn-icon:#b9d4ec;--ui-surface-bg:var(--panel);--ui-surface-border:var(--panel-border);--ui-surface-strong-border:var(--chip-active-border);--ui-surface-shadow:0 18px 36px #00000075;--ui-overlay-bg:#04090d94;--ui-action-bg:var(--chip-active-bg);--ui-action-border:var(--chip-active-border);--ui-action-muted-bg:var(--chip-bg);--ui-action-muted-border:var(--chip-border);--page-bg:radial-gradient(circle at 20% -10%, #182332 0%, #111a24 48%, #0b1219 100%)}:root[data-theme=mag]{--mag-black:#000;--mag-dark:#1e1e1e;--mag-grey-1:#2b3530;--mag-grey-2:#354d40;--mag-grey-3:#3a4c41;--mag-grey-4:#d5d7da;--mag-grey-5:#e9eaeb;--mag-grey-6:#e8e8e8;--mag-gold-1:#c99e59;--mag-gold-2:#ffd695;--mag-white:#fff;--mag-red-active:#c51a1b;--mag-red-grad:#8e1217cc;--mag-grad-pan-fill:linear-gradient(42deg, var(--mag-grey-3) 0%, var(--mag-black) 39%, var(--mag-black) 74%, var(--mag-red-grad) 100%);--mag-grad-panel:linear-gradient(135deg, var(--mag-grey-3) 0%, var(--mag-black) 39%, var(--mag-black) 82%, var(--mag-red-grad) 100%);--mag-grad-panel-border:linear-gradient(to bottom left, var(--mag-gold-1) 0%, #c99e5900 100%);--mag-grad-button:linear-gradient(120deg, var(--mag-black) 57%, var(--mag-grey-1) 100%);--mag-grad-active-button:linear-gradient(120deg, var(--mag-grey-2) 57%, var(--mag-grey-1) 100%);--mag-grad-active-field-stroke:linear-gradient(var(--mag-gold-2), #ffd69500);--bg:var(--mag-dark);--panel:#161616;--panel-border:var(--mag-gold-1);--text:var(--mag-white);--muted:#c9c9c9;--select-bg:#00000073;--select-border:var(--mag-gold-1);--slider-track:#c99e5959;--slider-fill:var(--mag-gold-1);--slider-thumb-bg:var(--toggle-on-knob-bg);--slider-thumb-border:var(--toggle-on-knob-border);--chip-bg:#141414;--chip-border:#c99e5959;--chip-active-bg:var(--mag-grey-2);--chip-active-border:var(--mag-gold-1);--chip-hover-border:var(--mag-gold-1);--heading:var(--mag-white);--link:var(--mag-gold-1);--link-hover:var(--mag-gold-2);--nav-hover-bg:#c99e5929;--nav-active-bg:#c99e593d;--accordion-caret:var(--mag-gold-1);--handpan-pan-fill:var(--mag-grad-pan-fill);--handpan-shell-fill:url(#panFillGradient);--handpan-pan-red:var(--mag-red-grad);--handpan-shell-glow:var(--mag-gold-1);--handpan-shell-outer:var(--mag-gold-1);--handpan-tone-played-fill:var(--mag-black);--handpan-shell-grad-start:var(--mag-grey-3);--handpan-shell-grad-end:var(--mag-black);--handpan-shell-stroke:var(--mag-gold-1);--handpan-tone-fill:var(--mag-black);--handpan-tone-stroke:var(--mag-gold-1);--handpan-tone-center-stroke:var(--mag-gold-1);--handpan-chord-fill:var(--mag-black);--handpan-chord-stroke:var(--mag-gold-2);--handpan-chord-root-stroke:var(--mag-gold-2);--handpan-chord-active-stroke:var(--mag-gold-2);--handpan-chord-played-fill:var(--mag-black);--handpan-tone-label:var(--mag-gold-1);--handpan-slot-label:var(--mag-gold-1);--handpan-tone-active-label:var(--mag-gold-2);--handpan-shockwave-ring:var(--mag-gold-2);--handpan-shockwave-glow:var(--mag-red-active);--handpan-shockwave-ring-active:var(--mag-gold-2);--handpan-shockwave-glow-active:var(--mag-red-active);--toggle-off-bg:var(--mag-grey-6);--toggle-off-border:var(--mag-grey-5);--toggle-off-knob-bg:var(--mag-white);--toggle-off-knob-border:var(--mag-grey-4);--toggle-on-bg:var(--mag-gold-1);--toggle-on-border:var(--mag-gold-1);--toggle-on-knob-bg:var(--mag-white);--toggle-on-knob-border:var(--mag-gold-2);--step-card-bg:#141414;--step-name-color:var(--mag-white);--step-action-bg:#161616;--step-action-border:#c99e5959;--step-action-text:var(--mag-gold-1);--add-chord-text:var(--mag-gold-1);--social-btn-bg:#161616;--social-btn-border:#c99e5966;--social-btn-icon:var(--mag-gold-1);--ui-surface-bg:var(--panel);--ui-surface-border:var(--panel-border);--ui-surface-strong-border:var(--chip-active-border);--ui-surface-shadow:0 18px 36px #0000008c;--ui-overlay-bg:#0009;--ui-action-bg:var(--chip-active-bg);--ui-action-border:var(--chip-active-border);--ui-action-muted-bg:var(--chip-bg);--ui-action-muted-border:var(--chip-border);--page-bg:url(/assets/mag-bg.webp) center center / cover no-repeat fixed, var(--mag-black)}:root[data-theme=mag] .panel{background:var(--mag-grad-panel) padding-box, var(--mag-grad-panel-border) border-box;border:1px solid #0000}:root[data-theme=mag] .diagram-wrap,:root[data-theme=mag] .sequence-preview,:root[data-theme=mag] .editor-preview{background:0 0;border:none;padding:16px}:root[data-theme=mag] .diagram-wrap{padding-top:48px}:root[data-theme=mag] h1{color:var(--mag-white);letter-spacing:-.01em;white-space:nowrap;font-size:clamp(1.6rem,9cqi,3.5rem);font-weight:600;line-height:1}:root[data-theme=mag] .subtitle{color:var(--mag-white);font-size:1rem;font-weight:500}:root[data-theme=mag] .field>span,:root[data-theme=mag] .advanced-summary{color:var(--mag-gold-1);font-size:1.19rem;font-weight:600}:root[data-theme=mag] .field>span.field-label-small,:root[data-theme=mag] select,:root[data-theme=mag] .check-row,:root[data-theme=mag] .chord-chip{color:var(--mag-white);font-size:1rem;font-weight:500}:root[data-theme=mag] .chord-chip,:root[data-theme=mag] .scale-play-btn,:root[data-theme=mag] .reset-view-btn,:root[data-theme=mag] .tuning-info-close,:root[data-theme=mag] .confirm-btn,:root[data-theme=mag] .app-message-close{background:var(--mag-grad-button);border:1px solid var(--mag-gold-1);color:var(--mag-white);border-radius:var(--radius);min-height:40px;font-family:var(--font-body);cursor:pointer;justify-content:center;align-items:center;padding:0 14px;font-size:1rem;font-weight:500;display:flex}:root[data-theme=mag] select{appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C99E59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px, var(--mag-grad-button);min-height:40px;padding-top:0;padding-bottom:0;padding-right:34px}:root[data-theme=mag] .tuning-select{background:var(--mag-grad-button);padding-right:42px}:root[data-theme=mag] .chord-chip.is-active,:root[data-theme=mag] .scale-play-btn.stop{background:var(--mag-grad-active-button);box-shadow:none}*{box-sizing:border-box}:where(a[href],button,summary,select,input[type=checkbox],input[type=radio],input[type=range],input[type=button],input[type=submit],[role=button]){cursor:pointer;touch-action:manipulation}:where(button,input,select):disabled{cursor:not-allowed}body{min-height:100vh;font-size:var(--font-size-body);font-family:var(--font-body);letter-spacing:.01em;background:var(--page-bg);margin:0}#app{min-height:100vh;padding:24px}.page{flex-direction:column;min-height:calc(100vh - 48px);display:flex}.layout{max-width:var(--content-max);grid-template-columns:var(--layout-cols);gap:var(--layout-gap);flex:1;align-items:start;width:100%;margin:0 auto;display:grid}.panel,.diagram-wrap{background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;padding:16px}.panel{container-type:inline-size}h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--line-heading);letter-spacing:.01em;color:var(--heading)}h1{margin:0;font-size:clamp(1.45rem,1.2rem + 1vw,2rem);font-weight:600}.subtitle{color:var(--muted);margin:8px 0 16px;font-size:.98rem;line-height:1.45}.playback-section{border-top:1px dashed var(--panel-border);margin-top:14px;padding-top:12px}.modal-overlay{background:var(--ui-overlay-bg);z-index:50;overscroll-behavior:contain;justify-content:center;align-items:flex-start;padding:17vh 16px 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-card{background:var(--ui-surface-bg);border:1px solid var(--ui-surface-border);width:min(480px,100%);color:var(--text);box-shadow:var(--ui-surface-shadow);border-radius:12px;padding:14px 16px}@media (width<=640px){.modal-overlay{padding-top:12vh}}.field{gap:6px;margin-top:6px;margin-bottom:12px;display:grid}.field>span{letter-spacing:.03em;color:var(--muted);font-size:.86rem;font-weight:600}.field .field-label-small{letter-spacing:0;text-transform:none;color:var(--text);font-size:.92rem;font-weight:500}.field-after-toggles{margin-top:10px}select{appearance:none;border:1px solid var(--select-border);width:100%;color:var(--text);border-radius:var(--radius);font-family:var(--font-body);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c7488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px, var(--select-bg);padding:10px 34px 10px 10px;font-size:.95rem;font-weight:500}:root[data-theme=night] select:not(.tuning-select){background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239fb2c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px, var(--select-bg)}.tuning-select{background:var(--select-bg);padding-right:42px}textarea,input[type=text],input[type=number]{border:1px solid var(--select-border);background:var(--select-bg);width:100%;color:var(--text);border-radius:var(--radius);font-family:var(--font-body);padding:10px;font-size:.95rem;font-weight:500}.chord-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:25rem;display:grid;overflow-y:auto}.chord-chip--none+.chord-chip{grid-column-start:1}@media (width>=641px) and (width<=900px),(width>=1200px){.chord-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.chord-chip{border:1px solid var(--chip-border);background:var(--chip-bg);color:var(--text);border-radius:var(--radius);font-family:var(--font-body);letter-spacing:.01em;cursor:pointer;text-align:center;padding:10px 12px;font-size:.92rem;font-weight:600}.chord-chip:hover{border-color:var(--chip-hover-border)}.chord-chip.is-active{background:var(--chip-active-bg);border-color:var(--chip-active-border);box-shadow:inset 0 0 0 1px #5d9bd133}.diagram-wrap{place-items:start center;display:grid}.advanced{border-top:1px dashed var(--panel-border);margin-top:14px;padding-top:10px}.section-tabs{display:none}@media (width<=900px){.section-tabs{border-top:1px dashed var(--panel-border);gap:2px;margin-top:12px;display:flex;overflow-x:auto}.section-tab{min-width:max-content;color:var(--muted);font-family:var(--font-body);white-space:nowrap;text-align:center;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1 1 0;padding:9px 6px 8px;font-size:.86rem;font-weight:600}.section-tab.is-active{color:var(--text);border-bottom-color:var(--chip-active-border)}.tabbed-panel .advanced .advanced-summary,.tabbed-panel .advanced:not(.is-open){display:none}.tabbed-panel .advanced{border-top:none;margin-top:12px;padding-top:0}}.advanced summary{color:var(--muted);letter-spacing:.04em;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:.84rem;font-weight:600}.check-row{color:var(--text);align-items:center;gap:8px;margin-top:10px;font-size:.92rem;display:flex}.toggle-row{justify-content:flex-start;align-items:center}.toggle-row .switch{order:-1}.switch{width:30px;height:16px;display:inline-flex;position:relative}.switch input{opacity:0;width:0;height:0}.switch-slider{background:var(--toggle-off-bg,var(--chip-border));border:1px solid var(--toggle-off-border,var(--select-border));border-radius:999px;transition:background .2s,border-color .2s;position:absolute;inset:0}.switch-slider:before{content:"";box-sizing:border-box;background:var(--toggle-off-knob-bg,#fff);border:1px solid var(--toggle-off-knob-border,transparent);border-radius:50%;width:14px;height:14px;transition:transform .2s,border-color .2s;position:absolute;top:0;left:0;box-shadow:0 1px 2px #0000003d}.switch input:checked+.switch-slider{background:var(--toggle-on-bg,var(--chip-active-border));border-color:var(--toggle-on-border,var(--chip-active-border))}.switch input:checked+.switch-slider:before{background:var(--toggle-on-knob-bg,#fff);border-color:var(--toggle-on-knob-border,transparent);transform:translate(14px)}.slider-row{grid-template-columns:7rem 1fr;align-items:center;gap:12px;padding-right:6px;display:grid}.slider-row>span{white-space:nowrap}.slider-row input[type=range]{width:100%;min-width:0}input[type=range]{appearance:none;cursor:pointer;background:0 0;height:14px}input[type=range]::-webkit-slider-runnable-track{background:var(--slider-track);border-radius:999px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--slider-thumb-bg);border:1px solid var(--slider-thumb-border);border-radius:50%;width:12px;height:12px;margin-top:-4px}input[type=range]::-moz-range-track{background:var(--slider-track);border-radius:999px;height:4px}input[type=range]::-moz-range-progress{background:var(--slider-fill);border-radius:999px;height:4px}input[type=range]::-moz-range-thumb{border:1px solid var(--slider-thumb-border);background:var(--slider-thumb-bg);border-radius:50%;width:12px;height:12px}.scale-play-btn{border:1px solid var(--chip-active-border);background:color-mix(in srgb, var(--chip-active-bg) 76%, var(--panel) 24%);width:100%;color:var(--add-chord-text);border-radius:var(--radius);font-family:var(--font-body);cursor:pointer;margin-top:10px;padding:10px;font-size:.9rem;font-weight:600}.scale-play-btn:disabled{opacity:.65;cursor:not-allowed}.scale-play-btn.stop{background:color-mix(in srgb, var(--chip-bg) 72%, #c95f5f 28%);color:color-mix(in srgb, var(--text) 72%, #7a1f1f 28%);border-color:color-mix(in srgb, var(--step-action-border) 72%, #b85a5a 28%)}.reset-view-btn{border:1px solid var(--step-action-border);background:var(--step-action-bg);width:100%;color:var(--muted);border-radius:var(--radius);font-family:var(--font-body);margin-top:8px;padding:9px;font-size:.88rem;font-weight:600}.social-block{border-top:1px solid #c7d6e380;gap:8px;margin-top:14px;padding-top:10px;display:grid}.social-title{letter-spacing:.04em;color:var(--muted);font-size:.8rem;font-weight:600}.social-link{color:var(--link);align-items:center;gap:8px;font-size:.9rem;font-weight:600;text-decoration:none;display:inline-flex}.social-link svg{fill:currentColor;width:18px;height:18px}.social-link:hover{color:var(--link-hover)}.footer{max-width:var(--content-max);width:100%;color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:10px;margin:18px auto 0;padding:10px 4px;font-size:.84rem;display:flex}.footer a{color:var(--link);text-underline-offset:2px;font-weight:600;-webkit-text-decoration:underline #2f608759;text-decoration:underline #2f608759;transition:color .2s,text-decoration-color .2s}.footer a:hover{color:var(--link-hover);text-decoration-color:#1e4462b3}.footer-right{justify-items:end;gap:6px;display:grid}.footer-version{color:inherit;font-size:.72rem;font-weight:600}.footer-service{align-items:center;gap:10px;display:flex}.footer-social{flex-wrap:wrap;gap:8px;display:flex}.footer-social a{background:var(--social-btn-bg);border:1px solid var(--social-btn-border);width:30px;height:30px;color:var(--social-btn-icon);border-radius:999px;justify-content:center;align-items:center;margin-top:6px;text-decoration:none;display:inline-flex}.footer-social svg{fill:currentColor;width:16px;height:auto}.footer-theme-switcher{color:var(--muted);align-items:center;gap:6px;font-size:.78rem;font-weight:500;display:inline-flex}.footer-theme-switcher select{border:1px solid var(--chip-border);background:var(--panel);color:var(--text);border-radius:9px;min-width:96px;padding:6px 8px;font-size:.8rem;font-weight:500}.legal-page{max-width:var(--content-max);background:var(--panel);border:1px solid var(--panel-border);width:100%;color:var(--text);border-radius:18px;margin:0 auto;padding:24px}.legal-page h1,.panel>h2:first-child{margin-top:0}.legal-page h2{margin-top:1.6rem;margin-bottom:.7rem;font-size:1.2rem}.legal-page h3{margin-top:1.3rem;margin-bottom:.55rem;font-size:1.02rem}.legal-page h4{margin-top:1rem;margin-bottom:.4rem;font-size:.95rem}.legal-page p,.legal-page li{font-size:.95rem;line-height:1.55}.about-cta a{border:1px solid var(--chip-border);border-radius:var(--radius);background:var(--chip-bg);color:var(--link);padding:9px 12px;font-weight:600;text-decoration:none;display:inline-block}a{color:var(--link);text-underline-offset:2px;-webkit-text-decoration:underline #2f608759;text-decoration:underline #2f608759}a:hover{color:var(--link-hover);text-decoration-color:#1e4462b3}@media (width<=900px){#app{padding:12px}.layout{grid-template-columns:1fr}.footer{text-align:center;justify-content:center;font-size:.82rem}.footer-right{text-align:center;justify-items:center;width:100%}.footer-service{flex-direction:column;gap:6px}.footer-social,.footer-theme-switcher{justify-content:center;width:100%}}.app-message[data-v-eaa69e71]{z-index:1200;border:1px solid var(--ui-surface-border);background:var(--ui-surface-bg);width:min(560px,100vw - 24px);color:var(--text);box-shadow:var(--ui-surface-shadow);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;font-weight:600;display:flex;position:fixed;top:17vh;left:50%;transform:translate(-50%)}.app-message.is-info[data-v-eaa69e71],.app-message.is-warning[data-v-eaa69e71],.app-message.is-error[data-v-eaa69e71],.app-message.is-success[data-v-eaa69e71]{border-color:var(--ui-surface-border);background:var(--ui-surface-bg)}.app-message-close[data-v-eaa69e71]{border:1px solid var(--ui-action-border);background:var(--ui-action-bg);color:var(--text);border-radius:var(--radius);cursor:pointer;padding:5px 9px;font-size:.76rem;font-weight:600}.app-message-close[data-v-eaa69e71]:hover{background:color-mix(in srgb, var(--ui-action-bg) 76%, var(--ui-surface-bg) 24%)}@media (width<=640px){.app-message[data-v-eaa69e71]{top:12vh}}.brand-logo[data-v-e8aec0ea]{flex-shrink:0;align-items:center;display:inline-flex}.brand-logo img[data-v-e8aec0ea]{width:auto;height:34px;display:block}.topbar[data-v-a119f4ec]{max-width:var(--content-max);justify-content:flex-start;align-items:center;gap:12px;width:100%;margin:0 auto 16px;padding:10px 2px;display:flex}.topnav[data-v-a119f4ec]{align-items:center;gap:10px;display:inline-flex}.menu-toggle[data-v-a119f4ec]{display:none}.topnav-link[data-v-a119f4ec]{letter-spacing:.02em;color:var(--link);border-radius:var(--radius);padding:7px 10px;font-size:.86rem;font-weight:600;text-decoration:none}.topnav-link[data-v-a119f4ec]:hover{color:var(--link-hover);background:var(--nav-hover-bg)}.topnav-link.router-link-exact-active[data-v-a119f4ec]{color:var(--link-hover);background:var(--nav-active-bg)}@media (width<=900px){.topbar[data-v-a119f4ec]{gap:12px;margin-bottom:12px;padding-top:6px;padding-bottom:8px;position:relative}.menu-toggle[data-v-a119f4ec]{border:1px solid var(--chip-border);border-radius:var(--radius);background:var(--panel);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:40px;height:40px;display:inline-flex}.menu-toggle span[data-v-a119f4ec]{background:var(--link);border-radius:2px;width:18px;height:2px}.topnav[data-v-a119f4ec]{background:var(--panel);border:1px solid var(--panel-border);z-index:20;border-radius:12px;flex-direction:column;align-items:stretch;min-width:210px;padding:8px;display:none;position:absolute;top:calc(100% + 8px);left:0;box-shadow:0 8px 16px #00000014}.topnav.open[data-v-a119f4ec]{display:flex}.topnav-link[data-v-a119f4ec]{text-align:left;width:100%}}.app-header[data-v-7d5877b6]{margin-bottom:8px}.confirm-card h3[data-v-c3e345c4]{margin:0 0 8px;font-size:1.02rem}.confirm-card p[data-v-c3e345c4]{color:var(--muted);margin:0 0 12px;line-height:1.45}.confirm-actions[data-v-c3e345c4]{justify-content:flex-end;gap:8px;display:flex}.confirm-btn[data-v-c3e345c4]{border:1px solid var(--ui-action-border);background:var(--ui-action-bg);border-radius:var(--radius);color:var(--text);padding:8px 11px;font-weight:600}.confirm-btn.cancel[data-v-c3e345c4]{border-color:var(--ui-action-muted-border);background:var(--ui-action-muted-bg);color:var(--muted)}.chord-meta-muted[data-v-8ef2909e]{opacity:.68}.advanced-content[data-v-3b1c4cd5]{opacity:0;grid-template-rows:0fr;transition:grid-template-rows .18s,opacity .16s;display:grid}.advanced.is-open .advanced-content[data-v-3b1c4cd5]{opacity:1;grid-template-rows:1fr}.advanced-inner[data-v-3b1c4cd5]{overflow:hidden}.advanced-summary[data-v-3b1c4cd5]{width:100%;color:var(--muted);font-family:var(--font-body);letter-spacing:.03em;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;align-items:center;gap:8px;padding:0;font-size:.86rem;font-weight:600;display:flex}.advanced-chevron[data-v-3b1c4cd5]{border-right:1.8px solid var(--accordion-caret,var(--muted));border-bottom:1.8px solid var(--accordion-caret,var(--muted));transform-origin:50%;flex-shrink:0;width:7px;height:7px;transition:transform .18s;position:relative;top:-1px;transform:rotate(-45deg)}.advanced.is-open .advanced-chevron[data-v-3b1c4cd5]{transform:rotate(45deg)}@media (prefers-reduced-motion:reduce){.advanced-content[data-v-3b1c4cd5]{transition:none}}.tuning-info-card[data-v-9ce02ce3]{width:min(520px,100%)}.tuning-info-head[data-v-9ce02ce3]{justify-content:space-between;align-items:center;gap:10px;display:flex}.tuning-info-head h3[data-v-9ce02ce3]{color:var(--link);margin:0;font-size:1.02rem}.tuning-info-close[data-v-9ce02ce3]{border:1px solid var(--ui-action-muted-border);background:var(--ui-action-muted-bg);color:var(--muted);border-radius:var(--radius);padding:7px 10px;font-weight:600}.tuning-info-grid[data-v-9ce02ce3]{gap:8px;margin-top:10px;display:grid}.tuning-info-grid p[data-v-9ce02ce3]{color:var(--text);margin:0}.tuning-info-grid strong[data-v-9ce02ce3]{color:var(--text)}.tuning-row[data-v-4b64176c]{display:block;position:relative}.tuning-info-btn[data-v-4b64176c]{border:1px solid var(--select-border);width:22px;height:22px;color:var(--link);cursor:pointer;background:0 0;border-radius:50%;padding:0;font-weight:600;line-height:1;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.tuning-info-btn[data-v-4b64176c]:hover{border-color:var(--link)}.layout-debug[data-v-c0713267]{z-index:100;border-radius:var(--radius);background:var(--overlay-bg);border:1px solid var(--mag-gold-1);color:#fff;width:300px;font-size:var(--font-size-xs);flex-direction:column;gap:4px;padding:8px 10px;line-height:1;display:flex;position:fixed;bottom:16px;left:16px}.ld-head[data-v-c0713267]{justify-content:space-between;align-items:baseline;margin-bottom:2px;display:flex}.ld-profile[data-v-c0713267]{color:var(--mag-gold-1);font-size:var(--font-size-2xs)}.ld-row[data-v-c0713267]{justify-content:space-between;align-items:center;display:flex}.ld-stepper[data-v-c0713267]{align-items:center;gap:6px;display:inline-flex}.ld-stepper button[data-v-c0713267]{border-radius:var(--radius-sm);border:1px solid var(--mag-gold-1);width:18px;height:18px;color:var(--mag-gold-1);cursor:pointer;background:0 0;padding:0;font-size:13px;line-height:1}.ld-value[data-v-c0713267]{text-align:center;font-variant-numeric:tabular-nums;min-width:30px}.ld-reset[data-v-c0713267]{border-radius:var(--radius-sm);border:1px solid var(--mag-gold-1);color:var(--mag-gold-1);cursor:pointer;background:0 0;align-self:flex-start;margin-top:4px;padding:2px 8px}.ld-log[data-v-c0713267]{max-height:144px;font-size:var(--font-size-2xs);color:#cfcfcf;border-top:1px solid #c99e594d;flex-direction:column;gap:1px;margin-top:6px;padding-top:4px;line-height:1.3;display:flex;overflow-y:auto}.ld-log-line[data-v-c0713267]{white-space:nowrap}.ld-log-empty[data-v-c0713267]{color:#777}.handpan[data-v-36593bad]{width:min(var(--pan-max), 100%);max-width:100%;height:auto;overflow:visible}.handpan.mini[data-v-36593bad]{width:140px}.shell[data-v-36593bad]{fill:var(--handpan-shell-fill,url(#shellGradient));stroke:var(--handpan-shell-stroke);stroke-width:.8px}.shell-glow[data-v-36593bad]{fill:none;stroke:var(--handpan-shell-glow,transparent);stroke-width:1.4px}.shell-outer[data-v-36593bad]{fill:none;stroke:var(--handpan-shell-outer,transparent);stroke-width:.16px}.shockwave-glow[data-v-36593bad]{fill:url(#fieldRedGlow);pointer-events:none;transform-box:fill-box;transform-origin:50%;animation:.35s ease-out forwards mag-redflash-36593bad}@keyframes mag-redflash-36593bad{0%{opacity:0;transform:scale(.7)}28%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.18)}}.shockwave-ring[data-v-36593bad]{fill:none;stroke:url(#activeFieldStroke);stroke-width:var(--wave-width,1);pointer-events:none;transform-box:fill-box;transform-origin:50%;animation:.5s ease-out forwards mag-shockwave-36593bad}.shockwave.is-active .shockwave-glow[data-v-36593bad]{fill:url(#fieldRedGlowActive)}.shockwave.is-active .shockwave-ring[data-v-36593bad]{stroke:url(#activeFieldStrokeActive)}@keyframes mag-shockwave-36593bad{0%{opacity:var(--wave-opacity,1);transform:scale(1)}to{transform:scale(var(--wave-scale,1.4));opacity:0}}@media (prefers-reduced-motion:reduce){.shockwave-ring[data-v-36593bad]{transform:scale(var(--wave-scale,1.4));opacity:calc(var(--wave-opacity,1) * .5);animation:none}}.tone[data-v-36593bad]{fill:var(--handpan-tone-fill);stroke:var(--handpan-tone-stroke);stroke-width:.18px;cursor:pointer;transition:fill .2s,stroke .2s}.center-tone[data-v-36593bad]{stroke:var(--handpan-tone-center-stroke);stroke-width:.22px}.tone-highlighted[data-v-36593bad]{fill:var(--handpan-chord-fill);stroke:var(--handpan-chord-stroke)}:root[data-theme=mag] .tone-highlighted[data-v-36593bad]{stroke-width:.4px}.tone-highlighted.tone-root[data-v-36593bad]{stroke:var(--handpan-chord-root-stroke)}.tone-played[data-v-36593bad]{fill:var(--handpan-tone-played-fill,var(--chip-active-bg))}.tone-highlighted.tone-played[data-v-36593bad]{fill:var(--handpan-chord-played-fill);stroke:var(--handpan-chord-stroke)}.tone-highlighted.tone-root.tone-played[data-v-36593bad]{stroke:var(--handpan-chord-root-stroke)}.tone-label[data-v-36593bad]{fill:var(--handpan-tone-label);text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-size:3.6px;font-weight:600}.slot-label[data-v-36593bad]{fill:var(--handpan-slot-label);text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-size:2.5px;font-weight:600}.label-active[data-v-36593bad]{animation:.6s ease-out forwards mag-label-flash-36593bad}@keyframes mag-label-flash-36593bad{0%{fill:var(--handpan-tone-active-label,var(--handpan-tone-label))}to{fill:var(--handpan-tone-label)}}.extension-label[data-v-36593bad]{fill:var(--muted);text-anchor:middle;dominant-baseline:middle;pointer-events:none;font-size:2.5px;font-weight:600}.not-found-page[data-v-76d262e9]{text-align:center}.not-found-actions[data-v-76d262e9]{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px;display:inline-flex}.not-found-link[data-v-76d262e9]{border:1px solid var(--chip-border);background:var(--chip-bg);color:var(--text);border-radius:var(--radius);padding:8px 12px;font-weight:600;text-decoration:none}.not-found-link[data-v-76d262e9]:hover{border-color:var(--chip-active-border);background:var(--chip-active-bg)}.sequencer[data-v-d85b0cf6]{max-width:var(--content-max);gap:var(--layout-gap);grid-template-columns:var(--layout-cols);width:100%;margin:0 auto;display:grid}.sequence-preview[data-v-d85b0cf6],.sequence-lane[data-v-d85b0cf6]{min-height:0}.sequence-controls[data-v-d85b0cf6]{grid-area:1/1/span 2}.sequence-lane[data-v-d85b0cf6]{grid-area:1/2}.sequence-preview[data-v-d85b0cf6]{grid-area:2/2}.active-chord-name[data-v-d85b0cf6]{z-index:1;color:var(--muted);pointer-events:none;margin:0;font-weight:600;position:absolute;top:2px;left:2px}.preview-diagram-wrap[data-v-d85b0cf6]{gap:6px;display:grid;position:relative}.preview-main[data-v-d85b0cf6]{place-items:center;display:grid}.preview-info-bar[data-v-d85b0cf6]{grid-template-columns:1fr auto;align-items:end;min-height:78px;display:grid}.preview-info-left[data-v-d85b0cf6]{min-height:1px}.next-chord-preview[data-v-d85b0cf6]{align-items:flex-end;gap:8px;display:flex;transform:translateY(-22px)}.next-chord-badge[data-v-d85b0cf6]{color:var(--muted);margin:0;font-size:.78rem;font-weight:600;line-height:1.1}.next-chord-mini[data-v-d85b0cf6] .handpan.mini{width:118px}.arp-hint[data-v-d85b0cf6]{color:var(--muted);margin:0;font-size:.78rem}.add-chord[data-v-d85b0cf6]{border:1px solid var(--chip-active-border);background:var(--chip-active-bg);color:var(--add-chord-text);border-radius:var(--radius);cursor:pointer;margin-top:10px;padding:10px;font-weight:600}.insert-hint[data-v-d85b0cf6]{color:var(--muted);margin:7px 0 0;font-size:.82rem}.transport[data-v-d85b0cf6]{border-top:1px dashed var(--panel-border);margin-top:14px;padding-top:10px}.transport .player-controls[data-v-d85b0cf6]{margin-top:0}.player-controls[data-v-d85b0cf6]{margin-top:16px}.player-btn[data-v-d85b0cf6]{border:1px solid var(--chip-active-border);background:color-mix(in srgb, var(--chip-active-bg) 76%, var(--panel) 24%);width:100%;color:var(--add-chord-text);border-radius:var(--radius);cursor:pointer;padding:10px;font-weight:600}.player-btn.stop[data-v-d85b0cf6]{background:color-mix(in srgb, var(--chip-bg) 72%, #c95f5f 28%);color:color-mix(in srgb, var(--text) 72%, #7a1f1f 28%);border-color:color-mix(in srgb, var(--step-action-border) 72%, #b85a5a 28%)}.row-field[data-v-d85b0cf6]{grid-template-columns:1fr 150px;align-items:center;gap:10px;display:grid}.row-field-label[data-v-d85b0cf6]{letter-spacing:0;text-transform:none;color:var(--text);font-size:.92rem;font-weight:500}.row-field select[data-v-d85b0cf6]{width:150px}.empty-lane[data-v-d85b0cf6]{color:var(--muted)}.step-grid[data-v-d85b0cf6]{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}@media (width<=510px){.step-grid[data-v-d85b0cf6]{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=400px){.step-grid[data-v-d85b0cf6]{grid-template-columns:repeat(2,minmax(0,1fr))}}.lane-top[data-v-d85b0cf6]{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.lane-header[data-v-d85b0cf6]{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:flex}.lane-transport[data-v-d85b0cf6]{border:1px solid var(--chip-active-border);background:color-mix(in srgb, var(--chip-active-bg) 76%, var(--panel) 24%);color:var(--add-chord-text);border-radius:var(--radius);font-family:var(--font-body);cursor:pointer;flex-shrink:0;padding:6px 16px;font-size:.86rem;font-weight:600;display:none}.lane-transport.is-playing[data-v-d85b0cf6]{background:color-mix(in srgb, var(--chip-bg) 72%, #c95f5f 28%);color:color-mix(in srgb, var(--text) 72%, #7a1f1f 28%);border-color:color-mix(in srgb, var(--step-action-border) 72%, #b85a5a 28%)}.lane-transport[data-v-d85b0cf6]:disabled{opacity:.6}@media (width<=900px){.lane-transport[data-v-d85b0cf6]{display:inline-flex}}.lane-header h2[data-v-d85b0cf6]{margin:0}.lane-caret[data-v-d85b0cf6]{border-right:1.8px solid var(--accordion-caret,var(--muted));border-bottom:1.8px solid var(--accordion-caret,var(--muted));transform-origin:50%;flex-shrink:0;width:7px;height:7px;transition:transform .18s;position:relative;top:-2px;transform:rotate(-45deg)}.lane-caret.is-open[data-v-d85b0cf6]{transform:rotate(45deg)}.step-grid.is-collapsed[data-v-d85b0cf6]{cursor:grab;grid-template-columns:none;grid-auto-columns:9rem;grid-auto-flow:column;overflow-x:auto}.step-grid.is-collapsed.is-dragging[data-v-d85b0cf6]{cursor:grabbing;-webkit-user-select:none;user-select:none}.step-card[data-v-d85b0cf6]{border:1px solid var(--panel-border);background:var(--step-card-bg);cursor:pointer;border-radius:12px;justify-items:center;padding:10px;display:grid}.step-card.is-active[data-v-d85b0cf6]{border-color:var(--mag-gold-2,var(--chip-active-border));box-shadow:inset 0 0 0 1px var(--mag-gold-2,var(--chip-active-border)), 0 0 10px #ffd69547}.step-select[data-v-d85b0cf6]{text-align:left;cursor:pointer;background:0 0;border:none;width:100%;padding:0}.step-index[data-v-d85b0cf6]{color:var(--muted);letter-spacing:.03em;font-size:.78rem;display:block}.step-name[data-v-d85b0cf6]{color:var(--step-name-color);margin-bottom:6px;font-weight:600;display:block}.chord-variant-muted[data-v-d85b0cf6]{opacity:.68;font-weight:500}.step-card[data-v-d85b0cf6] .handpan.mini{margin-inline:auto}.step-actions[data-v-d85b0cf6]{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;display:grid}.step-actions button[data-v-d85b0cf6]{border:1px solid var(--step-action-border);background:var(--step-action-bg);color:var(--step-action-text);border-radius:var(--radius);cursor:pointer;padding:6px}@media (width<=900px){.sequencer[data-v-d85b0cf6]{grid-template-columns:1fr}.sequence-controls[data-v-d85b0cf6],.sequence-lane[data-v-d85b0cf6],.sequence-preview[data-v-d85b0cf6]{grid-area:auto}.sequence-preview[data-v-d85b0cf6]{order:1}}