: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}: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}*{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-label #bpm-value{display:inline-block;min-width:2.5em;text-align:right;color:var(--ink);font-weight:600}.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 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}.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:#f4f2ea;cursor:pointer;transition:background .05s,transform .05s;min-height:32px;margin:0 2px}.grid-cell:hover{background:#ecead8}.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{min-height:280px}.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}.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-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)}.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)}@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}