.daw{background:var(--daw-bg);min-height:100dvh;color:var(--ink);font-family:var(--font-sans)}.daw-shell{flex-direction:column;gap:10px;max-width:1200px;min-height:100dvh;margin:0 auto;padding:12px 16px 6px;display:flex}.daw-top{border-bottom:1px solid var(--daw-line);align-items:center;gap:14px;padding:2px 2px 10px;display:flex;position:relative}.daw-title{align-items:baseline;gap:10px;min-width:0;display:flex}.daw-title h1{white-space:nowrap;margin:0;font-size:15px;font-weight:700}.daw-meta{color:var(--mut2);white-space:nowrap;font-size:11px}.daw-transport{align-items:center;gap:6px;margin-left:8px;display:flex}.daw-actions{gap:6px;margin-left:auto;display:flex}.daw-main{grid-template-columns:1fr 248px;align-items:start;gap:10px;display:grid}.daw-left{flex-direction:column;gap:6px;min-width:0;display:flex;overflow-x:auto}.chord-rail{display:flex}.rail-lead{letter-spacing:.08em;width:44px;color:var(--mut2);flex:none;align-items:center;padding-left:2px;font-size:10px;display:flex}.rail-grid{flex:1;min-width:0;display:grid}.rail-meas{border-left:2px solid var(--daw-line);gap:3px;padding-left:4px;padding-right:2px;display:flex}.rail-meas.cur{border-left-color:var(--red)}.rslot{border:1px solid var(--daw-chord-bd);border-radius:var(--radius);background:var(--daw-chord);min-width:0;min-height:30px;color:var(--daw-chord-ink);font-family:var(--font-chord);cursor:pointer;flex:1;font-size:13px;font-style:italic}.rslot.empty{border:1px dashed var(--daw-line);color:var(--mut);font-family:var(--font-sans);background:0 0;font-style:normal}.rslot.open{background:var(--ink);border-color:var(--ink);color:var(--daw-bg)}.roll{border:1px solid var(--daw-line);border-radius:var(--radius-pad);background:var(--daw-panel2)}.roll-scroll{overscroll-behavior:contain;height:320px;overflow-y:auto}.roll-body{display:flex}.roll-labels{z-index:2;background:var(--daw-panel2);flex:none;width:44px;position:sticky;left:0}.rlab{height:18px;color:var(--mut2);justify-content:flex-end;align-items:center;padding-right:6px;font-size:9px;display:flex}.rlab.dk{color:var(--mut)}.roll-grid{flex:1;gap:1px;min-width:0;padding:0 2px 0 0;display:grid;position:relative}.rcell{background:var(--daw-cell);cursor:pointer;border:none;border-radius:1px;min-width:0;padding:0}.rcell.dk{background:var(--daw-cell-dk)}.rcell.db{background:var(--daw-cell-db)}.rcell.mb{box-shadow:-2px 0 0 0 var(--daw-line)}.roll-note{z-index:1;border:1px solid var(--daw-note-bd);background:var(--daw-note);cursor:pointer;border-radius:3px;min-width:0;padding:0}.roll-note.sel{background:var(--daw-note-sel);border-color:var(--daw-note-sel-bd)}.roll-playhead{background:var(--red);z-index:3;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}.inspector{flex-direction:column;gap:10px;display:flex}.insp-card{border:1px solid var(--daw-line);border-radius:var(--radius-pad);background:var(--daw-panel);padding:10px 12px 12px}.insp-hd{margin:0 0 8px;font-size:12px;font-weight:700}.insp-row{justify-content:space-between;align-items:center;padding:4px 0;display:flex}.insp-lab{color:var(--mut2);font-size:11px}.insp-ctl{align-items:center;gap:4px;display:flex}.insp-ctl b{text-align:center;border:1px solid var(--daw-line);border-radius:var(--radius);background:var(--daw-bg);min-width:82px;padding:4px 6px;font-size:11.5px}.insp-ctl button{border:1px solid var(--daw-line);border-radius:var(--radius);background:var(--daw-panel);width:22px;height:22px;color:var(--ink);cursor:pointer;justify-content:center;align-items:center;padding:0;display:inline-flex}.insp-ctl button:disabled{opacity:.3}.insp-acc{gap:4px;display:flex}.insp-acc button{border:1px solid var(--daw-line);border-radius:var(--radius);background:var(--daw-bg);min-width:0;color:var(--ink);cursor:pointer;flex:1;padding:6px 2px;font-size:10.5px}.insp-acc button.on{background:var(--ink);border-color:var(--ink);color:var(--daw-bg)}.insp-macc{border:1px solid var(--daw-line);border-radius:var(--radius);background:var(--daw-bg);width:100%;color:var(--mut2);cursor:pointer;margin-top:8px;padding:6px 0;font-size:10.5px}.insp-macc b{color:var(--ink);margin-left:4px}.daw-score{border:1px solid var(--daw-line);border-radius:var(--radius-pad);background:var(--daw-panel2);padding:4px 0}.daw-status{color:var(--mut2);border-top:1px solid var(--daw-line);justify-content:space-between;margin-top:auto;padding:8px 2px 6px;font-size:10px;display:flex}.daw .icon-btn,.daw .chip{background:var(--daw-panel);border-color:var(--daw-line);color:var(--ink)}.daw .icon-btn.on{background:var(--ink);border-color:var(--ink)}.daw .popover{background:var(--daw-panel);border-color:var(--daw-line)}.daw .popover button,.daw .popover input{background:var(--daw-panel);color:var(--ink);border-color:var(--daw-line)}.daw .popover button.on{background:var(--ink);color:var(--daw-bg)}.daw .chord-pick{background:var(--daw-panel);border-color:var(--daw-line);max-width:560px;margin:0 0 2px 44px}.daw .chord-pick .cp-hd,.daw .chord-pick .cp-row{border-bottom-color:var(--daw-line)}.daw .chord-pick .cp-row button,.daw .chord-pick .cp-ft button{background:var(--daw-panel);color:var(--ink);border-color:var(--daw-line)}.daw .chord-pick .cp-row button.on{background:var(--ink);color:var(--daw-bg)}@media (hover:hover){.rcell:hover{outline:1px solid var(--mut2);outline-offset:-1px}.roll-note:hover,.rslot:hover{filter:brightness(1.15)}.daw .icon-btn:hover,.daw .chip:hover,.insp-ctl button:hover:not(:disabled),.insp-acc button:not(.on):hover,.insp-macc:hover{background:var(--daw-cell-db)}}.community{max-width:var(--app-max-width);font-family:var(--font-sans);color:var(--ink);margin:0 auto}.c-header{border-bottom:2px solid var(--ink);justify-content:space-between;align-items:center;gap:8px;padding:8px 0;display:flex}.c-nav{align-items:center;gap:12px;display:flex}.c-nav a{color:var(--ink);font-size:11px;font-weight:600;text-decoration:none}.c-nav a.active{color:var(--red)}.c-linkbtn{color:var(--ink);cursor:pointer;background:0 0;border:none;padding:0;font-size:11px;font-weight:600}.c-list{flex-direction:column;gap:12px;padding:12px 0;display:flex}.c-card{border:1px solid var(--ink);border-radius:var(--radius-pad);background:var(--paper);padding:12px}.c-card .c-title{font-weight:600}.c-cardhit{text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;margin:0;padding:0;display:block}.c-meta{color:var(--mut2);align-items:center;gap:8px;font-size:11px;display:flex}.c-badge{color:var(--red);border:1px solid var(--red);border-radius:var(--radius);padding:1px 6px;font-size:10.5px;font-weight:600}.c-sentinel{height:1px}.c-eyebrow{letter-spacing:.22em;color:var(--mut2);font-size:9px}.c-state{text-align:center;color:var(--mut);font-size:11px}.c-toast{border:1px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:var(--paper);padding:8px 12px;font-size:11px;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}.c-like{border:1px solid var(--ink);border-radius:var(--radius);color:var(--ink);background:var(--paper);cursor:pointer;padding:6px 14px;font-size:12px;font-weight:600}.c-like.on{background:var(--ink);color:var(--paper)}.c-like:disabled{opacity:.5;cursor:default}.c-danger{border-color:var(--red);color:var(--red)}.c-detail{flex-direction:column;gap:12px;padding:12px 0;display:flex}.c-detail-title{font-size:15px;font-weight:600}.c-notice{color:var(--mut2);font-size:11px}.c-notice a{color:var(--red);font-weight:600;text-decoration:none}.c-row{align-items:center;gap:10px;display:flex}.c-form{flex-direction:column;gap:10px;padding:12px 0;display:flex}.c-textarea{border:1px solid var(--ink);border-radius:var(--radius);min-height:72px;color:var(--ink);background:var(--paper);resize:vertical;padding:8px;font-family:inherit;font-size:12px}.c-input{border:1px solid var(--ink);border-radius:var(--radius);color:var(--ink);background:var(--paper);padding:8px;font-family:inherit;font-size:12px}.c-btn{border:1px solid var(--ink);border-radius:var(--radius);color:var(--paper);background:var(--ink);cursor:pointer;padding:10px 0;font-size:12px;font-weight:600}.c-btn:disabled{opacity:.5;cursor:default}:root{--ink:#111;--mut:#b0b0b0;--mut2:#666;--line:#e4e4e4;--line2:#d6d6d6;--red:#e3372e;--cell:#f2f2f2;--celldb:#e8e8e8;--celldk:#e0e0e0;--celldkdb:#d6d6d6;--on:#8f8f8f;--rest:#c4b28e;--paper:#fff;--staff:#c9c9c9;--rest-glyph:#8a8a8a;--chord-text:#555;--font-sans:"Pretendard", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif;--font-chord:Georgia, serif;--radius:2px;--radius-pad:3px;--radius-cell:1.5px;--shadow-popover:0 6px 18px #00000026;--app-max-width:420px;--bg-outer:#f0f0f0;--bg-pad-zone:#fafafa;--bg-stepper-zone:#f5f5f5;--bg-nav-btn:#f5f5f5}.daw{--daw-bg:var(--paper);--daw-panel:var(--paper);--daw-panel2:var(--bg-pad-zone);--daw-line:var(--line);--daw-cell:var(--cell);--daw-cell-db:var(--celldb);--daw-cell-dk:var(--celldk);--daw-note:var(--on);--daw-note-bd:#6b6b6b;--daw-note-sel:var(--red);--daw-note-sel-bd:#b52a23;--daw-chord:var(--paper);--daw-chord-bd:var(--ink);--daw-chord-ink:var(--ink)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{background:var(--bg-outer);font-family:var(--font-sans);color:var(--ink);margin:0}#root{justify-content:center;display:flex}.app{width:100%;max-width:var(--app-max-width);background:#fff;flex-direction:column;min-height:100dvh;display:flex}.pane-score,.pane-edit{flex-direction:column;min-width:0;display:flex}.chord-row{align-items:stretch;gap:4px;padding:4px 8px;display:flex}.chord-row .cslot{border:1.5px solid var(--ink);border-radius:var(--radius);min-height:32px;font-family:var(--font-chord);color:var(--ink);cursor:pointer;background:#fff;flex:1;font-size:13.5px;font-style:italic}.chord-row .cslot.empty{border:1px dashed var(--line2);color:var(--mut)}.chord-row .cslot.open{background:var(--ink);color:#fff}.chord-row .cacc{border:1px solid var(--line2);border-radius:var(--radius);height:100%;color:var(--mut2);cursor:pointer;background:#fff;flex-direction:column;justify-content:center;padding:2px 6px;font-size:8px;display:flex}.chord-row .cacc b{color:var(--ink);font-size:9.5px;font-weight:700}.chord-row .cacc.off b{color:var(--mut)}.chord-pick{border:1.5px solid var(--ink);border-radius:var(--radius);background:#fff;margin:0 8px 4px}.chord-pick .cp-hd{border-bottom:1px solid var(--ink);justify-content:space-between;padding:6px 8px;font-size:11px;display:flex}.chord-pick .cp-row{border-bottom:1px solid var(--line);display:flex}.chord-pick .cp-row button{border:none;border-left:1px solid var(--line);cursor:pointer;background:#fff;flex:1;padding:7px 0;font-size:12px}.chord-pick .cp-row button:first-child{border-left:none}.chord-pick .cp-row button.on{background:var(--ink);color:#fff}.chord-pick .cp-ft{display:flex}.chord-pick .cp-ft button{cursor:pointer;background:#fff;border:none;flex:1;padding:8px 0;font-size:12px}.chord-pick .cp-ft button:first-child{color:var(--red);border-right:1px solid var(--line)}.pad{border:1px solid var(--ink);border-radius:var(--radius-pad);background:var(--bg-pad-zone);margin:0 8px;padding:8px}.pad .beat-head{gap:7px;margin-left:28px;display:flex}.pad .bh{border-top:2px solid var(--ink);flex:1;padding:2px 0;font-size:11px;font-weight:700}.pad-scroll{height:156px;overflow-y:auto}.pad .prow{align-items:center;gap:7px;height:17px;display:flex}.pad .prow.rest{border-top:1px solid var(--ink);height:20px;margin-top:2px;padding-top:2px}.pad .pl{width:21px;color:var(--mut2);text-align:right;flex:none;font-size:8.5px}.pad .pl.dk{font-weight:700}.pad .grp{flex:1;gap:2px;display:flex}.pad .pcell{border-radius:var(--radius-cell);background:var(--cell);cursor:pointer;color:#fff;border:none;flex:1;height:15px;padding:0;font-size:9px;line-height:1}.pad .prow.rest .pcell{background:var(--cell);height:16px}.pad .pcell.db{background:var(--celldb)}.pad .pcell.dk{background:var(--celldk)}.pad .pcell.dk.db{background:var(--celldkdb)}.pad .pcell.on{background:var(--on)}.pad .prow.rest .pcell.on{background:var(--rest)}.pad .pcell.sel{background:var(--red);outline:1.5px solid var(--ink);outline-offset:-1.5px}.pad .pcell .tie.lead{display:inline-block;transform:scaleX(-1)}.header{padding:10px 8px 6px;position:relative}.header-row{justify-content:space-between;align-items:flex-start;gap:6px;display:flex}.eyebrow{letter-spacing:.12em;color:var(--mut2);font-size:8.5px}.title{margin:2px 0 0;font-size:17px;font-weight:700}.header-btns{align-items:center;gap:4px;display:flex}.icon-btn{border:1px solid var(--ink);border-radius:var(--radius);cursor:pointer;background:#fff;justify-content:center;align-items:center;width:32px;height:32px;font-size:10px;display:inline-flex}.icon-btn.on{background:var(--ink);color:#fff}.chip{border:1px solid var(--ink);border-radius:var(--radius);cursor:pointer;background:#fff;height:32px;padding:5px 9px;font-size:11px}.metaline{color:var(--mut2);border-bottom:1px solid var(--line);justify-content:space-between;margin-top:6px;padding-bottom:6px;font-size:9.5px;display:flex}.popover{z-index:10;border:1.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-popover);background:#fff;display:flex;position:absolute;top:46px;right:8px}.popover button{border:none;border-left:1px solid var(--line2);cursor:pointer;background:#fff;padding:8px 10px;font-size:10.5px}.popover button:first-child{border-left:none}.popover button.on{background:var(--ink);color:#fff}.popover input{border:none;border-left:1px solid var(--line2);text-align:center;width:56px;font-size:12px}.measure-bar{border:1.5px solid var(--ink);border-radius:var(--radius);justify-content:center;align-items:center;gap:0;margin:6px 8px 0;display:flex}.measure-bar button{cursor:pointer;background:#fff;border:none;align-items:center;padding:7px 14px;display:inline-flex}.measure-bar button.dim{opacity:.3}.measure-bar span{text-align:center;border-left:1px solid var(--line2);border-right:1px solid var(--line2);flex:1;padding:7px 0;font-size:11.5px}.steppers{background:var(--bg-stepper-zone);gap:6px;padding:6px 8px;display:flex}.stepper{border:1.5px solid var(--ink);border-radius:var(--radius);background:#fff}.stepper.dis{opacity:.35;pointer-events:none}.stepper.vert{flex-direction:column;align-items:stretch;width:96px;display:flex}.hsteppers{flex-direction:column;flex:1;gap:6px;display:flex}.stepper.horiz{flex:1;align-items:stretch;display:flex}.stepper.horiz button{flex:0 0 72px}.stepper button{cursor:pointer;background:#fff;border:none;justify-content:center;align-items:center;gap:3px;padding:6px;display:inline-flex}.stepper button:disabled{opacity:.3}.stepper .lab{color:var(--mut2);font-size:8.5px}.stepper .cur{text-align:center;flex:1;align-self:center;padding:6px 4px;font-size:11.5px;font-weight:700}.stepper.vert .cur{border-top:1.5px solid var(--red);border-bottom:1.5px solid var(--red);align-self:stretch}.stepper.horiz .cur{border-left:1.5px solid var(--red);border-right:1.5px solid var(--red)}.stepper .cap{color:var(--mut2);text-align:center;padding:2px 0 3px;font-size:8px}.button-bar{border-top:2px solid var(--ink);background:#fff;display:flex}.button-bar .bb{border:none;border-right:1px solid var(--line2);cursor:pointer;letter-spacing:.04em;background:#fff;flex-direction:column;flex:1;align-items:center;gap:3px;min-width:0;padding:11px 0 13px;font-size:9.5px;display:flex}.button-bar .bb:last-child{border-right:none}.button-bar .bb:active{background:#eee}.button-bar .bb.pri:active{background:#333}.button-bar .bb.pri{background:var(--ink);color:#fff}.button-bar .bb.warn{color:var(--red)}.button-bar .bb.nav{background:var(--bg-nav-btn)}.button-bar .bb.add{color:var(--red);font-weight:700}.toast{background:var(--ink);color:#fff;border-radius:var(--radius-pad);z-index:20;padding:7px 14px;font-size:12px;position:fixed;bottom:64px;left:50%;transform:translate(-50%)}.viewer{flex-direction:column;gap:12px;padding:18px 12px 24px;display:flex}.viewer .hero .rule{border:none;border-top:1.5px solid var(--ink);margin:10px 0}.viewer .badges{gap:6px;display:flex}.viewer .badges span{border:1px solid var(--ink);border-radius:var(--radius);padding:3px 7px;font-size:10px}.viewer .score-card{border:1px solid var(--ink);border-radius:var(--radius-pad);padding:6px}.viewer .score-scroll{max-height:300px;overflow-y:auto}.viewer .big-play{background:var(--ink);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-self:center;align-items:center;width:64px;height:64px;display:flex}.viewer-actions{gap:8px;display:flex}.viewer-actions button{border:1px solid var(--ink);border-radius:var(--radius);cursor:pointer;background:#fff;flex:1;justify-content:center;align-items:center;gap:5px;padding:10px 0;font-size:12px;display:inline-flex}.viewer-actions button.dark{background:var(--ink);color:#fff}.stepper .cur b{display:block}.stepper .ccap{color:var(--mut2);font-size:7.5px;font-weight:400;display:block}@media (width>=900px){.app--view{max-width:680px}}@media (hover:hover){.icon-btn:hover,.chip:hover,.measure-bar button:hover,.stepper button:hover:not(:disabled),.chord-pick .cp-row button:hover,.chord-pick .cp-ft button:hover,.popover button:hover,.button-bar .bb:hover{background:var(--bg-stepper-zone)}.chord-row .cslot:hover{border-color:var(--red)}.pad .pcell:hover{outline:1px solid var(--mut2);outline-offset:-1px}}.icon-btn:focus-visible,.chip:focus-visible,.button-bar .bb:focus-visible,.measure-bar button:focus-visible,.stepper button:focus-visible,.chord-row .cslot:focus-visible,.pad .pcell:focus-visible{outline:2px solid var(--red);outline-offset:-2px}