:root{--bg: #faf9f5;--panel: #ffffff;--ink: #2a2a2a;--fg: #2a2a2a;--sub: #6b6b6b;--line: #e4e2da;--input-bg: #ffffff;--accent: #c44cff;--bass: #c44cff;--snare: #e2b23a;--hat: #7bc27b;--g4: #e07b4a;--c4: #4a9eff;--head: #ff3b5c;--beat-line: rgba(40, 40, 40, .35);--vf-fg: #2a2a2a;--cell-off: #f4f2ea;--cell-off-hover: #ecead8;--key-white: #ffffff;--key-black: #3c3c44;--hg0: #c44cff;--hg1: #c8811a;--hg2: #1a9e8f;--hg3: #2f6fd6;--hg4: #d6446e;--hg0-glow: rgba(196, 76, 255, .35);--hg1-glow: rgba(224, 150, 40, .4);--hg2-glow: rgba(26, 158, 143, .38);--hg3-glow: rgba(47, 111, 214, .38);--hg4-glow: rgba(214, 68, 110, .38);--hg0-ink: #ffffff;--hg1-ink: #2b1c00;--hg2-ink: #ffffff;--hg3-ink: #ffffff;--hg4-ink: #ffffff}:root[data-theme=dark]{--bg: #0f0f11;--panel: #1a1a1f;--ink: #e8e6e0;--fg: #e8e6e0;--sub: #8b8880;--line: #2a2a30;--input-bg: #13131a;--beat-line: rgba(232, 230, 224, .25);--vf-fg: #e8e6e0;--cell-off: #232327;--cell-off-hover: #2d2d33;--key-white: #2b2b31;--key-black: #0e0e12;--hg1: #f0ab45;--hg2: #35c9b8;--hg3: #5b96f0;--hg4: #f06a92;--hg1-glow: rgba(240, 171, 69, .4);--hg2-glow: rgba(53, 201, 184, .38);--hg3-glow: rgba(91, 150, 240, .38);--hg4-glow: rgba(240, 106, 146, .38);--hg2-ink: #06241f;--hg3-ink: #07162e;--hg4-ink: #3a0716}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Yu Gothic UI,sans-serif}.app-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--panel)}.app-header h1{font-size:18px;margin:0;letter-spacing:.08em;font-weight:700;color:var(--fg);font-feature-settings:"palt"}.app-header h1 .plus{color:var(--accent);font-size:20px;font-weight:800;margin-left:1px;letter-spacing:0}.icon-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:999px;background:var(--input-bg);color:var(--sub);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;-webkit-tap-highlight-color:transparent}.icon-btn:hover{border-color:var(--fg);color:var(--fg);box-shadow:0 2px 8px #0000000f}.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-btn:active{transform:scale(.96)}.random-btn:active{transform:rotate(-8deg) scale(.96)}.theme-icon{display:none}:root:not([data-theme=dark]) .theme-icon-dark{display:block}:root[data-theme=dark] .theme-icon-light{display:block}.transport{display:flex;align-items:center;gap:18px;padding:12px 20px;flex-wrap:wrap;background:var(--panel);border-bottom:1px solid var(--line)}.play-btn{padding:8px 20px;border:none;border-radius:8px;background:var(--fg);color:var(--bg);font-size:15px;font-weight:600;cursor:pointer}.play-btn.playing{background:var(--accent);color:#fff}.ghost-btn{padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--input-bg);color:var(--ink);cursor:pointer;font-size:13px}.count-split{display:inline-flex}.count-split-main{border-top-right-radius:0;border-bottom-right-radius:0}.count-split-caret{display:inline-flex;align-items:center;border-top-left-radius:0;border-bottom-left-radius:0;border-left-width:0;padding-left:9px;padding-right:9px}.count-split-main.active{background:var(--accent);border-color:var(--accent);color:#fff}.count-split-main.active+.count-split-caret{border-color:var(--accent)}.count-caret{font-size:10px;line-height:1;transition:transform .2s}.count-split-caret[aria-expanded=true] .count-caret{transform:rotate(180deg)}.count-split-main:disabled,.count-split-caret:disabled{opacity:.4;cursor:not-allowed}.sheet-row .count-split,.sheet-row .count-split-main{flex:1}.count-voice{padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--input-bg);color:var(--ink);font-size:13px}.bpm-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sub)}.bpm-label input[type=range]{width:160px}.bpm-input{width:3.6em;padding:3px 4px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);font-family:inherit;font-size:inherit;font-weight:600;text-align:right;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield;cursor:ns-resize;touch-action:none}.bpm-input::-webkit-outer-spin-button,.bpm-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bpm-input:hover{border-color:var(--line);background:var(--input-bg)}.bpm-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--line);background:var(--input-bg);cursor:text}.bpm-input.bpm-dragging,.mob-bpm-badge.bpm-dragging{border-color:var(--accent);background:var(--input-bg);-webkit-user-select:none;user-select:none}.swing-label,.swing-ratio-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sub)}.swing-label select{padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--input-bg);color:var(--ink)}.swing-ratio-label[hidden],.sheet-row[hidden]{display:none}.swing-ratio-label input[type=range]{width:110px}.swing-ratio-label #swing-ratio-value{display:inline-block;min-width:3em;text-align:right;color:var(--ink);font-weight:600}.volume-label{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:13px;color:var(--sub)}.volume-label input[type=range]{width:90px}#volume-value{display:inline-block;min-width:3em;text-align:right;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}.swing-indicator{margin-left:10px;padding:2px 8px;border-radius:999px;background:var(--input-bg);border:1px solid var(--line);color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.04em;display:none}.swing-indicator.active{display:inline-block}main{display:grid;gap:16px;padding:20px;max-width:1100px;margin:0 auto}main>*{min-width:0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px 20px}.panel h2{margin:0 0 12px;font-size:13px;color:var(--sub);font-weight:600;letter-spacing:.08em}.preset-select{padding:4px 8px;font-size:12px;color:var(--fg);background:var(--input-bg);border:1px solid var(--line);border-radius:6px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease}.preset-select:hover{border-color:var(--fg)}.preset-select:focus{outline:2px solid var(--accent);outline-offset:1px}.header-preset{height:34px;padding:0 28px;font-size:12px;border-radius:999px;max-width:150px;text-align:center;text-align-last:center;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%238a8a8a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4l3 3 3-3'/></svg>");background-repeat:no-repeat;background-position:right 10px center}.header-preset option{text-align:center}.control-item{display:inline-flex;align-items:center;gap:4px}.control-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--sub);flex-shrink:0}.grid-wrap{display:flex;flex-direction:column;gap:6px;-webkit-user-select:none;user-select:none;touch-action:none;position:relative}.track-row{display:flex;align-items:center;gap:8px}.track-label{width:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.track-label svg{display:block}.track-cells{flex:1;display:grid;grid-template-columns:repeat(16,1fr);gap:0;position:relative;height:44px}.grid-cell{position:relative;border:1px solid var(--line);border-radius:4px;background:var(--cell-off);cursor:pointer;transition:background .05s,transform .05s;min-height:32px;margin:0 2px}.grid-cell:hover{background:var(--cell-off-hover)}.grid-beat-divider{position:absolute;top:0;bottom:0;width:1.5px;background:var(--beat-line);pointer-events:none;transform:translate(-.75px);z-index:2}.grid-bar-divider{position:absolute;top:0;bottom:0;width:2.5px;background:var(--fg);opacity:.55;pointer-events:none;transform:translate(-1.25px);z-index:3}.grid-head{position:absolute;top:0;bottom:0;width:2px;background:var(--head);box-shadow:0 0 8px #ff3b5c80;pointer-events:none;opacity:0;transition:opacity .1s;z-index:3;transform:translate(-1px)}.grid-head.visible{opacity:1}.grid-cell.on[data-track=bass]{background:var(--bass);border-color:var(--bass)}.grid-cell.on[data-track=snare]{background:var(--snare);border-color:var(--snare)}.grid-cell.on[data-track=hat]{background:var(--hat);border-color:var(--hat)}.grid-cell.on[data-track=g4]{background:var(--g4);border-color:var(--g4)}.grid-cell.on[data-track=c4]{background:var(--c4);border-color:var(--c4)}.grid-cell.run-span{border-radius:4px;z-index:1}.score-wrap{position:relative;width:100%;overflow-x:auto}.score-head{position:absolute;top:10px;bottom:10px;width:2px;background:var(--head);box-shadow:0 0 8px #ff3b5c80;pointer-events:none;opacity:0;transition:opacity .1s;transform:translate(-1px);z-index:3}.score-head.visible{opacity:1}#score svg path,#score svg rect,#score svg line,#score svg polyline{fill:var(--fg);stroke:var(--fg)}#score svg text{fill:var(--fg);stroke:none}.app-footer{text-align:center;padding:14px;color:var(--sub)}.app-version{font-size:11px;color:var(--sub);opacity:.5}.mob-version{position:absolute;right:8px;bottom:4px;font-size:9px;color:var(--sub);opacity:.4}.mob-coffee{position:absolute;left:8px;bottom:2px;font-size:14px;line-height:1;text-decoration:none;opacity:.45;transition:opacity .15s ease;-webkit-tap-highlight-color:transparent}.mob-coffee:hover,.mob-coffee:active,.mob-coffee:focus-visible{opacity:1}.panel-header{display:flex;align-items:center;justify-content:space-between}.panel-header h2{margin:0 0 12px}.grid-mode{margin:0 auto 8px 14px}.grid-mode .seg-btn{padding:3px 10px;font-size:11px}[data-grid-mode=velocity] .grid-cell.on{cursor:ns-resize}.ea-overlay{position:absolute;top:12%;bottom:12%;border-radius:999px;background:linear-gradient(to right,transparent 2%,var(--hat) 96%);opacity:.85;pointer-events:none;z-index:2}[data-grid-mode=velocity] .grid-cell.on:after{content:"";position:absolute;left:12%;right:12%;bottom:calc(8% + 76% * var(--vel, 1));height:2px;border-radius:1px;background:#ffffffe6;box-shadow:0 0 2px #00000040;pointer-events:none}.score-toggle{padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--sub);font-size:12px;cursor:pointer;transition:background .15s,color .15s}.score-toggle.active{background:var(--c4);color:#fff;border-color:var(--c4)}.beat-indicator{display:flex;justify-content:center;gap:3px;margin-bottom:8px}.beat-dot{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .15s;cursor:pointer}.beat-dot.visible{background:var(--ink)}.beat-dot.beat-head{margin-left:4px}.beat-dot:first-child{margin-left:0}.transport-mobile{display:none}.mob-play-btn{width:56px;height:56px;border:none;border-radius:50%;background:var(--fg);color:var(--bg);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,box-shadow .3s;line-height:1}.mob-play-btn.playing{color:#fff}.mob-play-btn.playing{background:var(--accent);animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 #c44cff66}50%{box-shadow:0 0 0 10px #c44cff00}}.mob-bpm-badge{padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;min-width:70px;text-align:center;touch-action:none}.mob-settings-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--sub);cursor:pointer;display:flex;align-items:center;justify-content:center}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:200;opacity:0;transition:opacity .25s}.sheet-backdrop.show{opacity:1}.bottom-sheet{position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-radius:16px 16px 0 0;padding:12px 20px calc(20px + env(safe-area-inset-bottom,0px));z-index:210;transform:translateY(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);box-shadow:0 -4px 24px #0000001f}.bottom-sheet.show{transform:translateY(0)}.sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 16px}.sheet-content{display:flex;flex-direction:column;gap:16px}.sheet-row{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink)}.sheet-label{min-width:56px;color:var(--sub);font-size:13px;flex-shrink:0}.sheet-row input[type=range]{flex:1}.sheet-row select{flex:1;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--input-bg);color:var(--ink);font-size:14px}.sheet-val{min-width:3em;text-align:right;font-weight:600}.sheet-seg{display:flex;flex:1;width:100%}.sheet-seg .seg-btn{flex:1;padding:10px 6px;font-size:14px;min-width:0}.bottom-sheet[data-mode=bpm] .sheet-row:not(.sheet-row-bpm),.bottom-sheet[data-mode=bpm] #sheet-clear-btn{display:none}.beat-accent-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:300;opacity:0;transition:opacity .2s}.beat-accent-backdrop.show{opacity:1}.beat-accent-backdrop:not(.show),.sheet-backdrop:not(.show){pointer-events:none}.beat-accent-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-48%) scale(.97);width:min(360px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px 18px;z-index:310;box-shadow:0 12px 40px #00000038;max-height:calc(100vh - 32px);overflow-y:auto;opacity:0;transition:opacity .2s,transform .2s cubic-bezier(.22,1,.36,1)}.beat-accent-panel.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.beat-accent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.beat-accent-title{font-size:15px;font-weight:600;color:var(--ink)}.beat-accent-close{border:none;background:transparent;color:var(--sub);font-size:16px;line-height:1;cursor:pointer;padding:4px}.count-panel-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.count-panel-label{min-width:72px;color:var(--sub);font-size:13px;flex-shrink:0}.count-panel-row .count-voice{flex:1;max-width:none}.count-panel-sub{font-size:13px;font-weight:600;color:var(--ink);margin:16px 0 12px;padding-top:14px;border-top:1px solid var(--line)}.count-method-list{display:flex;flex-direction:column;gap:8px}.count-method-row{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}.count-method-row input{flex-shrink:0;accent-color:var(--accent)}.count-method-name{min-width:9em;color:var(--ink);font-weight:600;flex-shrink:0}.count-method-pattern{color:var(--sub);font-size:12px;line-height:1.5}.beat-accent-list{display:flex;flex-direction:column;gap:12px}.beat-vol-row{display:flex;align-items:center;gap:12px}.beat-vol-row[hidden],.count-panel-row[hidden]{display:none}.beat-vol-num{min-width:1.4em;text-align:center;font-weight:700;font-size:15px;color:var(--accent)}.beat-vol-slider{flex:1}.beat-vol-val{min-width:3.2em;text-align:right;font-size:13px;font-weight:600;color:var(--ink)}.beat-accent-foot{display:flex;align-items:center;gap:12px;margin-top:16px}.beat-accent-reset{flex-shrink:0;font-size:12px;padding:6px 12px}.beat-accent-hint{font-size:11px;color:var(--sub);line-height:1.4}.sheet-clear-btn{width:100%;padding:12px;text-align:center;font-size:14px;margin-top:4px;color:var(--head);border-color:var(--head)}.save-dialog{width:min(320px,calc(100vw - 32px))}.save-name-input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--input-bg);color:var(--ink);font-family:inherit;font-size:14px}.save-name-input:focus{outline:2px solid var(--accent);outline-offset:1px}.save-dialog-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--sub)}.save-dialog-note[hidden]{display:none}.save-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.save-confirm-btn{padding:8px 20px;border:none;border-radius:8px;background:var(--fg);color:var(--bg);font-size:13px;font-weight:600;cursor:pointer}@media (max-width: 768px){main{padding:12px;max-width:none}.panel{padding:12px 14px 16px}}@media (max-width: 640px){html,body{margin:0;padding:0;overflow-x:hidden;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}body{touch-action:manipulation}.app-header{padding:6px 8px;border-bottom:none;justify-content:flex-start;gap:4px}.app-header h1{font-size:14px;flex-shrink:0;white-space:nowrap}.control-item-timesig,.control-item-bars{display:none}.control-item-preset>.control-icon{display:none}.control-item-preset{margin:0;flex:1 1 auto;min-width:0;display:flex}.control-item-preset .header-preset{height:28px;padding:0 20px;font-size:11px;width:100%;max-width:none;background-position:right 6px center}.app-header .icon-btn{width:30px;height:30px}.app-header .icon-btn svg{width:15px;height:15px}.transport-desktop{display:none}.transport-mobile{display:flex;align-items:center;justify-content:center;gap:20px;position:fixed;bottom:0;left:0;right:0;z-index:100;padding:8px 20px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -2px 12px #0000000f}main{padding:4px 0 84px;gap:4px;max-width:none}.panel{border:none;border-radius:0;padding:4px 6px 6px;background:transparent}.panel-score{border-top:1px solid var(--line);padding-top:6px}.panel h2{margin:0 0 3px;font-size:11px;padding-left:2px}.score-toggle,.beat-indicator{display:none!important}.panel-header{margin-bottom:0}.grid-wrap{gap:1px}.track-row{gap:2px}.track-label{width:18px;flex-shrink:0}.track-label svg{width:14px;height:14px}.track-cells{height:48px;gap:0}.grid-cell{min-height:0;border-radius:3px;border-width:.5px;margin:0;box-sizing:border-box}.grid-cell:active{transform:scale(.92)}.score-wrap{overflow:hidden;max-width:100%}#score{min-height:auto;overflow:hidden;max-width:100%}.app-footer{display:none}}@media (max-width: 900px) and (orientation: landscape){.app-header,.transport-desktop{display:none}.transport-mobile{display:flex;align-items:center;justify-content:center;gap:16px;position:fixed;bottom:0;left:0;right:0;z-index:100;padding:4px 16px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px));background:var(--panel);border-top:1px solid var(--line)}.mob-play-btn{width:40px;height:40px;font-size:16px}html,body{overflow-x:hidden}body{touch-action:manipulation}main{padding:4px 4px 52px;padding-left:calc(4px + env(safe-area-inset-left,0px));padding-right:calc(4px + env(safe-area-inset-right,0px));max-width:none;gap:4px}.panel{padding:6px;border-radius:8px}.panel h2{margin:0 0 4px;font-size:11px}.score-toggle,.beat-indicator{display:none!important}.grid-wrap,.track-row{gap:2px}.track-cells{height:28px;gap:0}.track-label{width:18px}.track-label svg{width:14px;height:14px}.grid-cell{min-height:0;border-width:.5px;margin:0;box-sizing:border-box}.grid-cell:active{transform:scale(.9)}.score-wrap{overflow:hidden;max-width:100%}#score{min-height:auto;overflow:hidden;max-width:100%}.app-footer{display:none}}.header-time-sig .seg-btn{padding:4px 10px;font-size:12px}.header-controls{display:inline-flex;align-items:center;gap:8px}.header-bars .seg-btn{padding:4px 10px;font-size:12px;min-width:26px}.bar-pager{margin-left:auto}.bar-pager .seg-btn{padding:2px 10px;font-size:12px;min-width:28px}.seg-group{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--input-bg)}.seg-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;padding:8px 14px;font-size:13px;font-family:inherit;color:var(--fg);cursor:pointer;border-right:1px solid var(--line)}.seg-btn:last-child{border-right:none}.seg-btn.active{background:var(--fg);color:var(--bg)}.explain-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none;opacity:0;transition:opacity .18s ease}.explain-overlay.is-open{opacity:1}.explain-overlay[hidden]{display:none}.explain-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f0f118c;pointer-events:auto}[data-theme=dark] .explain-backdrop{background:#000000a6}.explain-svg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:visible}.explain-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.explain-close{position:absolute;top:max(12px,env(safe-area-inset-top,0px));right:12px;width:36px;height:36px;font-size:22px;line-height:1;pointer-events:auto;background:var(--panel);z-index:2}.explain-bracket{fill:none;stroke-linecap:round;stroke-linejoin:round}.explain-bracket-inner{stroke:var(--accent, #c44cff);stroke-width:1.5}.explain-bracket-outer{stroke:var(--accent, #c44cff);stroke-width:2.5;opacity:.85}.explain-dashed{stroke:var(--accent, #c44cff);stroke-width:1.2;stroke-dasharray:4 4;opacity:.85}.explain-connector{stroke:#ffd84d;stroke-width:1.6;stroke-linecap:round}.explain-connector-dot{fill:#ffd84d}.explain-inline{position:absolute;background:#fffbe6;color:#1a1a1a;border:1.5px solid #ffd84d;border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;line-height:1.35;max-width:260px;white-space:normal;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;box-shadow:0 3px 10px #00000040;pointer-events:none}.explain-inline-down{transform:translate(-50%)}.explain-inline-up{transform:translate(-50%,-100%)}[data-theme=dark] .explain-inline{background:#2a2410;color:#fff8d0;border-color:#ffd84d}.explain-label,.explain-caption{position:absolute;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--panel);color:var(--fg, #1a1a1a);border:1px solid var(--accent, #c44cff);border-radius:6px;padding:3px 8px;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 2px 8px #0000002e;pointer-events:none}.explain-label-center{transform:translate(-50%,-100%)}.explain-label-left{transform:translateY(-50%)}.explain-label-right{transform:translate(-100%,-50%)}.explain-label-inside{transform:translate(-50%);background:#ffffffeb;border-color:var(--accent, #c44cff);font-size:11px;padding:1px 6px}[data-theme=dark] .explain-label-inside{background:#1a1a1feb}.explain-label-outer{transform:translate(-50%,-100%);background:var(--accent, #c44cff);color:#fff;border-color:var(--accent, #c44cff);font-size:12px;letter-spacing:.04em}.explain-label-outer-inside{transform:translateY(-100%);background:var(--accent, #c44cff);color:#fff;border-color:var(--accent, #c44cff);font-size:11px}.explain-align-label{position:absolute;transform:translate(-100%,-100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--panel);color:var(--fg, #1a1a1a);border:1px solid var(--accent, #c44cff);border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px #0000002e}.explain-caption{transform:translate(-50%,-100%);background:var(--accent, #c44cff);color:#fff;border-color:var(--accent, #c44cff);font-size:11px;letter-spacing:.02em}.harmony-head{display:flex;align-items:center;gap:10px;margin:-4px -6px;padding:4px 6px;cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent}.harmony-head:hover{background:var(--cell-off)}.harmony-head h2{margin:0}.harmony-sub{margin-left:8px;font-size:11px;font-weight:400;color:var(--sub);letter-spacing:.04em}.harmony-badge{font-size:11px;font-weight:600;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums}.harmony-toggle{margin-left:auto;width:28px;height:28px;border:none;border-radius:999px;background:transparent;color:var(--sub);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.harmony-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.harmony-toggle[aria-expanded=true] .count-caret{transform:rotate(180deg)}.harmony-body{margin-top:12px}.harmony-body[hidden]{display:none}.harmony-controls{display:grid;gap:10px}.harmony-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.harmony-label{font-size:12px;color:var(--sub);flex-shrink:0}.harmony-row .harmony-label:not(:first-child){margin-left:8px}.seg-btn:disabled{opacity:.35;cursor:not-allowed}.harmony-root{display:inline-flex;align-items:center;gap:6px}.harmony-step{padding:4px 12px;font-size:15px;line-height:1.2}.harmony-root-name{min-width:3em;text-align:center;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg)}.harmony-stop{margin-left:auto;padding:5px 12px;font-size:12px;color:#d06a6a;border-color:#d06a6a80}.harmony-stop:hover{border-color:#d06a6a}.harmony-kb-wrap{overflow-x:auto;margin-top:12px;padding-bottom:6px}.harmony-kb{display:flex;gap:3px;height:132px;min-width:620px}.hkey{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:22px;padding:0 0 6px;border-radius:0 0 6px 6px;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .12s ease,box-shadow .12s ease,transform .12s ease;font-family:inherit}.hkey:active{transform:scale(.97)}.hkey-white{background:var(--key-white);border:1px solid var(--line)}.hkey-black{background:var(--key-black);border:1px solid var(--key-black)}.hkey-label{font-size:10px;font-weight:700;pointer-events:none}.hkey-white .hkey-label{color:var(--sub)}.hkey-black .hkey-label{color:#b7b7bf}.hkey.hg0{background:var(--hg0);border-color:var(--hg0);box-shadow:0 0 12px var(--hg0-glow)}.hkey.hg0 .hkey-label{color:var(--hg0-ink)}.hkey.hg1{background:var(--hg1);border-color:var(--hg1);box-shadow:0 0 12px var(--hg1-glow)}.hkey.hg1 .hkey-label{color:var(--hg1-ink)}.hkey.hg2{background:var(--hg2);border-color:var(--hg2);box-shadow:0 0 12px var(--hg2-glow)}.hkey.hg2 .hkey-label{color:var(--hg2-ink)}.hkey.hg3{background:var(--hg3);border-color:var(--hg3);box-shadow:0 0 12px var(--hg3-glow)}.hkey.hg3 .hkey-label{color:var(--hg3-ink)}.hkey.hg4{background:var(--hg4);border-color:var(--hg4);box-shadow:0 0 12px var(--hg4-glow)}.hkey.hg4 .hkey-label{color:var(--hg4-ink)}.harmony-mixer{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}.harmony-mixer[hidden]{display:none}.hmix-title{font-size:12px;color:var(--sub);margin-bottom:8px}.hmix-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.hmix-name{width:40px;font-size:13px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}.hmix-name.hg0{color:var(--hg0)}.hmix-name.hg1{color:var(--hg1)}.hmix-name.hg2{color:var(--hg2)}.hmix-name.hg3{color:var(--hg3)}.hmix-name.hg4{color:var(--hg4)}.hmix-hz{width:58px;flex:0 0 auto;font-size:11px;line-height:1.25;color:var(--sub);font-variant-numeric:tabular-nums}.hmix-hz>span{display:block}.hmix-hz-cents{font-size:10px;color:var(--sub);opacity:.85;width:fit-content;cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none;border-bottom:1px dotted var(--line)}.hmix-hz-cents:hover{color:var(--fg);opacity:1;border-bottom-color:var(--fg)}.hmix-hz-cents.hmix-cents-dragging{color:var(--accent);opacity:1;border-bottom-color:var(--accent)}.hmix-slider{flex:1;min-width:60px}.hmix-val{width:28px;text-align:right;font-size:12px;color:var(--fg);font-variant-numeric:tabular-nums}.hmix-btn{width:28px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--input-bg);color:var(--sub);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;font-family:inherit}.hmix-btn:hover{border-color:var(--fg);color:var(--fg)}.hmix-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.hmix-remove{color:#d06a6a;border-color:#d06a6a80}.hmix-remove:hover{border-color:#d06a6a;color:#d06a6a}@media (max-width: 640px){.harmony-head{margin:0;padding:2px}.harmony-row{gap:6px}.harmony-row .harmony-label:not(:first-child){margin-left:2px}.harmony-kb{height:96px;min-width:560px}.harmony-stop{margin-left:0}.hmix-row{gap:6px}.hmix-name{width:32px;font-size:12px}.hmix-hz{width:52px;font-size:10px}.hmix-hz-cents{font-size:9px}.hmix-slider{min-width:40px}}