:root{--bg:#fff8f4;--panel:#fff;--panel-2:#fdeee5;--line:#efc5ad;--fg:#211d1d;--dim:#665b57;--accent:#ad4d2a;--accent-hover:#963f24;--brand:#db6a41;--loop:#15616d;--radius:10px;--mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--wave-playhead:#211d1dd9;--wave-grid:#211d1d1a;--wave-loop-scrim:#fff8f4bd;--wave-loop-mark:#15616d;--wave-loop-ink:#fff;--wave-idle:#4a3f3b;--wave-main:#db6a41;--zoom-bg:#fffdfb;--zoom-grid-bar:#211d1d47;--zoom-grid-beat:#211d1d1c;--zoom-grid-quarter:#211d1d12;--zoom-grid-half:#211d1d21;--zoom-ruler:#8a7a72;--zoom-playhead:#211d1de6;--stem-vocals:#db6a41;--stem-guitar:#b07000;--stem-bass:#0f8f5f;--stem-drums:#1273a3;--stem-piano:#7b4bd0;--stem-other:#5b6b7d;--stem-mix:#3a3230}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,system-ui,PingFang TC,Microsoft JhengHei,Noto Sans TC,sans-serif}body{min-height:100vh}.bar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:5;background:#ffffffeb;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;display:flex;position:sticky;top:0}.bar .brand-name{font:700 17px/1 var(--mono);letter-spacing:-.02em;text-transform:lowercase;margin:0}.bar .brand-name span{color:var(--accent)}.brand{color:var(--fg);align-items:center;gap:10px;text-decoration:none;display:flex}.brand-mark{border-radius:6px;flex:none;width:26px;height:26px;display:block}@media (width<=359px){.brand-mark{display:none}}.bar-right{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.demos-link{color:var(--dim);text-underline-offset:3px}.demos-link:hover{color:var(--fg)}.repo-link{color:var(--dim);align-items:center;transition:color .12s;display:flex}.repo-link:hover{color:var(--fg)}.loadzone{gap:8px;display:flex}.lang-toggle{border:1px solid var(--line);border-radius:7px;display:inline-flex;overflow:hidden}.lang-toggle button{appearance:none;color:var(--dim);font:inherit;cursor:pointer;background:0 0;border:0;margin:0;padding:6px 11px;font-size:12px;font-weight:600;line-height:1.2}.lang-toggle button:hover{color:var(--fg);background:var(--panel-2)}.lang-toggle button[aria-pressed=true]{background:var(--accent);color:#fff}.lang-toggle button[aria-pressed=true]:hover{background:var(--accent-hover)}[hidden]{display:none!important}.btn{background:var(--accent);color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:7px;padding:7px 14px;font-size:13px;font-weight:600;display:inline-block}.btn:hover{background:var(--accent-hover)}.btn.ghost{color:var(--fg);border-color:var(--line);background:0 0}.btn[disabled]{opacity:.5;cursor:default}.btn[disabled]:hover{filter:none;background:0 0}.song-banner{background:var(--brand);border-radius:var(--radius);color:#fff;align-items:center;gap:16px;margin:0 0 24px;padding:14px 18px;text-decoration:none;transition:background .12s;display:flex;box-shadow:6px 6px #e6b88173}.song-banner:hover{background:#db682a}.song-banner:focus-visible{outline:2px solid var(--fg);outline-offset:3px}.song-banner-text{flex-direction:column;gap:3px;min-width:0;display:flex}.song-banner-title{font-size:20px;font-weight:700;line-height:1.4}.song-banner-sub{color:#3d1a0b;font-size:13px}.song-banner-go{margin-left:auto;font-size:1.3rem;line-height:1;transition:transform .12s}.song-banner:hover .song-banner-go{transform:translate(3px,-3px)}@media (prefers-reduced-motion:reduce){.song-banner,.song-banner-go{transition:none}.song-banner:hover .song-banner-go{transform:none}}@media (width<=480px){.song-banner{gap:12px;padding:12px 14px}}main{max-width:1080px;margin:0 auto;padding:24px 20px 60px}.dim{color:var(--dim)}code{font:12px var(--mono);background:var(--panel-2);border-radius:4px;padding:1px 5px}.dropzone{border:1.5px dashed var(--line);border-radius:var(--radius);text-align:center;padding:56px 24px;transition:border-color .15s,background .15s}.dropzone .big{margin:0 auto 12px;font-size:19px;font-weight:600}.dropzone p{text-align:left;max-width:540px;margin:6px auto}.build-sha{z-index:5;font:10px var(--mono);color:var(--dim);opacity:.6;position:fixed;bottom:6px;right:8px}.drag-overlay{z-index:100;pointer-events:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#fff8f4d9;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.drag-card{border:2px dashed var(--accent);border-radius:var(--radius);background:var(--panel);text-align:center;padding:44px 56px}.drag-card .big{margin:0 0 6px;font-size:20px;font-weight:600}.drag-card p{margin:0}.react-portal-host{display:contents}.master{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:var(--radius);align-items:center;gap:16px;padding:14px 16px;display:flex;box-shadow:6px 6px #e6b88173}.master-mid{flex:1;min-width:0}.title{font:600 13px/1.4 var(--mono);color:var(--fg);white-space:nowrap;text-overflow:ellipsis;margin-bottom:8px;overflow:hidden}.play{background:var(--accent);cursor:pointer;border:none;border-radius:50%;flex:none;place-items:center;width:52px;height:52px;transition:transform .1s;display:grid}.play:active{transform:scale(.94)}.ico-play{border-top:9px solid #0000;border-bottom:9px solid #0000;border-left:15px solid #fff;width:0;height:0;margin-left:4px}.play.playing .ico-play{background:linear-gradient(90deg,#fff 0 5px,#0000 5px 9px,#fff 9px 14px);border:none;width:14px;height:16px;margin-left:0}.times{font:12px/1.5 var(--mono);text-align:right;flex:none;min-width:54px}.times span{display:block}.wave{cursor:pointer;touch-action:none;width:100%;display:block}.wave.main{height:76px}.wave.main:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.controls{flex-wrap:wrap;align-items:center;gap:20px;padding:16px 4px 4px;display:flex}.ctl{color:var(--dim);align-items:center;gap:8px;font-size:12px;display:flex}select,input[type=range]{accent-color:var(--accent)}select{background:var(--panel-2);color:var(--fg);border:1px solid var(--line);font:13px var(--mono);border-radius:6px;padding:5px 8px}input[type=range]{width:110px}.hint.dim{font:12.5px/1.7 var(--mono);color:#4a423f;flex-direction:column;flex:1 0 100%;order:9;gap:3px;margin:2px 0 0;display:flex}.hint strong{color:var(--fg);font-weight:600}.loop-badge{font:11px var(--mono);color:var(--dim);border:1px solid var(--line);border-radius:6px;align-items:center;gap:8px;padding:4px 6px 4px 10px;display:inline-flex}.loop-badge.armed{color:var(--loop);border-color:color-mix(in srgb, var(--loop) 45%, transparent)}.mini{border:1px solid var(--line);color:var(--dim);font:10px var(--mono);cursor:pointer;background:0 0;border-radius:4px;padding:2px 7px}.mini:hover{color:var(--fg);border-color:var(--dim)}.mini[disabled]{opacity:.45;cursor:default}.mini[disabled]:hover{color:var(--dim);border-color:var(--line)}.lanes{flex-direction:column;gap:6px;margin-top:10px;display:flex}#zoom-lane-root,#note-lanes-root{display:contents}.lane{background:var(--panel);border:1px solid var(--line);border-radius:8px;grid-template-columns:128px 1fr 96px;align-items:center;gap:12px;padding:8px 12px;transition:opacity .15s,border-color .15s;display:grid}.lane.muted{opacity:.45}.lane.muted:hover{opacity:.68}.lane-name{font:600 12px var(--mono);cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit;background:var(--panel-2);border:none;border-right:1px solid var(--line);border-radius:7px 0 0 7px;align-self:stretch;align-items:center;gap:8px;margin:-8px 0 -8px -12px;padding:8px 10px 8px 12px;transition:background .12s;display:flex;overflow:hidden}.lane-name:hover{background:#fbe1d2}.lane-name:active{background:#f7d2bd}.lane-name .dot{background:currentColor;border-radius:50%;flex:none;width:9px;height:9px}.lane-name .kbd{color:var(--dim);border:1px solid var(--line);border-radius:3px;flex:none;margin-left:auto;padding:0 4px;font-size:10px}.lane-name .txt{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.lane-name .time-code{color:var(--dim);font-variant-numeric:tabular-nums;flex:none;font-weight:400}.lane .wave{height:40px}.lane-vol{align-items:center;display:flex}.lane-vol input{width:100%}.lane.overview .lane-name{cursor:default}.lane.overview .lane-name:hover{background:var(--panel-2)}.lane.overview .lane-name{flex-direction:column;align-items:flex-start;gap:2px}.lane.overview .lane-name .time-code{font-size:11px}.tempo-range-hint{font:11px var(--mono);color:var(--dim);grid-column:1/-1;align-items:center;gap:8px;margin-top:2px;display:flex}.status{font:12px var(--mono);color:var(--dim);white-space:pre-wrap;margin-top:20px}.status.err{color:#a52f2f}@media (width<=640px){.lane{grid-template-columns:96px 1fr}.lane-vol,.hint-keys{display:none}}.sep{background:var(--panel);border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:10px;margin:0 0 14px;padding:14px 16px;display:flex}.sep-row{align-items:center;gap:12px;display:flex}.sep-bar{background:var(--panel-2);border-radius:3px;height:6px;overflow:hidden}.sep-bar>div{background:var(--brand);width:0;height:100%;transition:width .2s linear}.lane.ribbon,.lane.ribbon-zoom{padding-bottom:14px;position:relative}.lane.ribbon .lane-name .dot{background:#0f8f5f}.ribbon-grip{cursor:ns-resize;touch-action:none;justify-content:center;align-items:center;height:10px;display:flex;position:absolute;bottom:0;left:0;right:0}.ribbon-grip:after{content:"";background:#e3c3ae;border-radius:2px;width:34px;height:3px;transition:background .15s}.ribbon-grip:hover:after{background:#c99f85}.lane.ribbon-zoom .lane-name{cursor:default;background:0 0;border-right:none;border-radius:0;flex-direction:column;grid-column:1/-1;align-items:stretch;gap:5px;margin:0;padding:0}.lane.ribbon-zoom .lane-name:hover{background:0 0}.lane.ribbon-zoom .wave{grid-column:2}.zoom-top-row{align-items:center;gap:10px;display:flex}.zoom-lane-sel{flex-wrap:wrap;align-items:center;gap:10px;margin-top:1px;display:flex}.zoom-chip-host,.zoom-edit-host,.zoom-chord-host{display:contents}.zoom-chip{align-items:center;gap:3px;display:inline-flex}.zoom-chip-select{cursor:pointer;font:10px var(--mono);color:var(--dim);background:0 0;border:none;align-items:center;gap:4px;padding:0;display:inline-flex}.zoom-chip-select:hover{color:var(--fg)}.zoom-chip-select.on{color:var(--chip-color)}.zoom-chip-dot{border:1.5px solid var(--chip-color);background:0 0;border-radius:50%;flex:none;width:8px;height:8px}.zoom-chip-select.on .zoom-chip-dot{background:var(--chip-color)}.zoom-chip-mute{line-height:1;font:11px var(--mono);color:var(--dim);cursor:pointer;background:0 0;border:none;padding:0}.zoom-chip-mute:hover{color:var(--fg)}.zoom-chip-mute.muted{opacity:.55;text-decoration:line-through}.zoom-notes-chip{font:10px var(--mono);padding:2px 8px}.zoom-notes-chip.active{border-color:var(--loop);color:var(--loop)}.zoom-chord-row{flex-wrap:wrap;align-items:center;gap:5px;margin-top:1px;display:flex}.capo-select{width:48px}.capo-play-key{white-space:nowrap}.chord-field{color:#1d6fa0;width:74px;font-weight:700}.chord-field.ambiguous{color:#8a5a00;border-color:#8a5a00}.chord-field.edited{color:#7b4bd0;border-color:#7b4bd0}.note-field.chord-candidates{color:#8a5a00;width:auto;max-width:145px}.zoom-sub-btn{padding:2px 6px}.zoom-sub-btn.active{border-color:var(--loop);color:var(--loop)}.zoom-secs-group{flex:none;align-items:center;display:flex}.zoomwave{cursor:grab;touch-action:none}.zoomwave:active{cursor:grabbing}.zoomwave.editing,.zoomwave.editing:active{cursor:pointer}.zoom-secs{color:var(--dim);font-variant-numeric:tabular-nums;font-weight:400}.zoom-btns{gap:4px;margin-left:8px;display:inline-flex}.zoom-btn{font:600 12px var(--mono);background:var(--panel-2);width:22px;height:22px;color:var(--fg);border:1px solid var(--line);cursor:pointer;border-radius:5px;padding:0;line-height:1}.zoom-btn:hover{background:#f7d2bd}.zoom-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.btn.ghost{background:var(--panel-2);color:var(--fg);border:1px solid var(--line)}.btn.ghost:hover{background:#f7d2bd}.notes{flex-direction:column;gap:8px;margin:10px 0 0;display:flex}.notes-panel-label{font:600 12px var(--mono);color:var(--fg)}.notes-row{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.notes-count{font:12px var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}.notes-spinner{border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:12px;height:12px;animation:.7s linear infinite notes-spin}@keyframes notes-spin{to{transform:rotate(360deg)}}.notes-ctl{font:12px var(--mono);color:var(--dim);align-items:center;gap:8px;display:flex}.notes-ctl input[type=range]{width:150px}.notes-val{font-variant-numeric:tabular-nums;min-width:4.5em}.notes-sub{margin-left:22px}.notes-stats{font:12px var(--mono);font-variant-numeric:tabular-nums}.notes-stats .n-fold{color:#1273a3}.notes-stats .n-mute{color:#7a716d}.notes-val.risky{color:var(--loop)}.notes-sub:has(input:disabled){opacity:.45}.notes-adv summary{font:12px var(--mono);color:var(--dim);cursor:pointer}.notes-adv[open] summary{margin-bottom:6px}.note-range-hint{font:11px var(--mono);color:var(--dim);grid-column:1/-1;margin-top:2px}.note-toolbar{flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:4px;margin-top:6px;display:flex}.note-tbtn{font:11px var(--mono)}.note-tbtn:disabled{opacity:.4;cursor:default}.note-tbtn-danger{border-color:color-mix(in srgb, #a52f2f 45%, var(--line));color:#a52f2f}.note-tbtn-armed{border-color:var(--loop);color:var(--loop)}.note-fields{flex-wrap:wrap;grid-column:1/-1;align-items:flex-end;gap:4px;margin-top:4px;display:flex}.note-field{font:11px var(--mono);border:1px solid var(--line);color:var(--fg);background:0 0;border-radius:4px;width:6.5em;padding:2px 6px}.note-field:disabled{opacity:.4;cursor:default}.note-field-group{cursor:default;flex-direction:column;align-items:flex-start;gap:2px;display:flex}.note-field-label{font:10px var(--mono);color:color-mix(in srgb, var(--fg) 65%, transparent)}.note-field-pitch-group{gap:2px;display:flex}.note-field-select{width:3.2em;padding:2px}.notes-edit-list{position:relative}.notes-edit-list summary{font:12px var(--mono);color:var(--dim);cursor:pointer}.notes-edit-panel{z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);align-items:flex-start;gap:8px;max-width:min(480px,90vw);max-height:320px;margin-top:6px;padding:10px 12px;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 8px 24px #211d1d29}.edit-rows{font:11px var(--mono);color:var(--dim);flex-direction:column;gap:3px;margin:0;padding:0;list-style:none;display:flex}.edit-row{align-items:center;gap:6px;display:flex}.edit-warn{color:var(--loop)}.edit-remove{padding:1px 5px;font-size:9px}.yt-panel{max-width:900px;margin:48px auto 64px;padding:0 20px}.yt-panel-title{letter-spacing:.06em;color:var(--fg);margin:0 0 12px;font-size:.95rem;font-weight:600}.yt-frame{aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius);background:#000;position:relative;overflow:hidden}.yt-frame iframe{border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.yt-panel-note{color:var(--dim);margin:10px 0 0;font-size:.82rem}.yt-panel-note a{color:var(--dim);text-underline-offset:3px}.yt-panel-note a:hover{color:var(--fg)}