.ws{background:var(--bg-page);min-height:100dvh;color:var(--ink);font-family:var(--font-sans)}.ws-top{background:var(--bg-card);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;display:flex}.ws-top-left{align-items:center;gap:12px;min-width:0;display:flex}.ws-back{border:1px solid var(--line2);border-radius:var(--radius-ctl);background:var(--bg-card);cursor:pointer;justify-content:center;align-items:center;width:30px;height:30px;display:inline-flex}.ws-title{white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:15px;font-weight:600;overflow:hidden}.ws-saved{color:var(--mut2);white-space:nowrap;font-size:11px}.ws-top-right{flex:none;gap:8px;display:flex}.ws-btn-outline{border:1px solid var(--line2);border-radius:var(--radius-ctl);background:var(--bg-card);color:var(--ink);cursor:pointer;padding:7px 14px;font-size:13px}.ws-btn-primary{border:1px solid var(--brand-primary);border-radius:var(--radius-ctl);background:var(--brand-primary);color:var(--brand-primary-text);cursor:pointer;padding:7px 14px;font-size:13px;font-weight:600}.ws-main{grid-template-columns:1fr 260px;align-items:start;gap:16px;max-width:1280px;margin:0 auto;padding:16px 20px;display:grid}.ws-canvas{flex-direction:column;gap:12px;min-width:0;display:flex}.ws-transport{align-items:center;gap:8px;display:flex}.ws-play{background:var(--brand-tint);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:inline-flex}.ws-chip{border:1px solid var(--line2);border-radius:var(--radius-ctl);background:var(--bg-card);color:var(--ink);cursor:pointer;padding:7px 10px;font-size:13px}.ws-icon-btn{border:1px solid var(--line2);border-radius:var(--radius-ctl);background:var(--bg-card);width:32px;height:32px;color:var(--ink);cursor:pointer;justify-content:center;align-items:center;padding:0;display:inline-flex}.ws-icon-btn.on{background:var(--ink);border-color:var(--ink)}.ws-transport-sep{background:var(--line);width:1px;height:20px;margin:0 2px}.ws-tempo-wrap{position:relative}.ws-tempo-pop{z-index:20;background:var(--bg-card);border:1px solid var(--line2);border-radius:var(--radius-ctl);box-shadow:var(--shadow-popover);align-items:center;gap:4px;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);left:0}.ws-tempo-pop input{border:1px solid var(--line2);border-radius:var(--radius);width:56px;font:inherit;padding:4px 6px}.ws-zoom{gap:4px;margin-left:auto;display:flex}.ws-zoom button{border:1px solid var(--line2);border-radius:var(--radius-ctl);background:var(--bg-card);width:28px;height:28px;color:var(--ink);cursor:pointer;font-size:15px;line-height:1}.ws-scroll{border:1px solid var(--line);background:var(--bg-page);border-radius:8px;max-height:520px;overflow:auto}.sl{background:var(--bg-page);width:max-content;display:flex}.sl-gutter{z-index:2;background:var(--bg-page);flex:none;position:sticky;left:0}.sl-body{flex:none;display:block}.roll{border-top:1px solid var(--line)}.roll-scroll{overflow:visible}.roll-body{width:max-content;display:flex}.roll-labels{z-index:2;background:var(--bg-page);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{background:var(--bg-card);flex:none;display:grid}.rcell{background:var(--bg-card);border:none;border-bottom:1px solid var(--line);cursor:pointer;min-width:0;padding:0}.rcell.dk{background:var(--bg-pad-zone)}.rcell.db{box-shadow:inset 1px 0 0 var(--line)}.rcell.mb{box-shadow:inset 2px 0 0 var(--line2)}.roll-note{z-index:1;border:1px solid var(--brand-primary);background:var(--note-block);cursor:grab;touch-action:none;border-radius:3px;padding:0;position:absolute}.roll-note.sel{background:var(--note-block-selected)}.roll-resize{cursor:ew-resize;position:absolute;top:0;bottom:0;right:0}.roll-playhead{background:var(--playhead);z-index:3;pointer-events:none;width:2px;position:absolute;top:0;bottom:0}.ws-hints{color:var(--mut2);flex-wrap:wrap;gap:6px 14px;padding:2px;font-size:11px;display:flex}.ws-hint{align-items:center;gap:5px;display:inline-flex}.ws-hint kbd{font-family:var(--font-sans);color:var(--ink);background:var(--bg-card);border:1px solid var(--line2);border-radius:4px;padding:1px 5px;font-size:10px}.pk{border:1px solid var(--line);background:var(--bg-card);border-radius:8px;padding:6px}.pk-keys{height:64px;display:flex;position:relative}.pk-white{border:1px solid var(--line2);background:var(--paper);cursor:pointer;border-radius:0 0 3px 3px;flex:1;justify-content:center;align-items:flex-end;min-width:0;padding-bottom:3px;display:flex}.pk-lab{color:var(--mut2);font-size:8px}.pk-black{border:1px solid var(--ink);background:var(--ink);cursor:pointer;z-index:2;border-radius:0 0 3px 3px;height:58%;position:absolute;top:0;transform:translate(-50%)}.pp{flex-direction:column;gap:12px;display:flex}.pp-card{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--shadow-card);padding:12px 14px 14px}.pp-hd{margin:0 0 10px;font-size:12px;font-weight:700}.pp-title{border:1px solid var(--line2);border-radius:var(--radius-ctl);width:100%;font:inherit;padding:7px 9px;font-size:13px}.pp-grid2{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;display:grid}.pp-field{flex-direction:column;gap:4px;display:flex}.pp-field input{border:1px solid var(--line2);border-radius:var(--radius-ctl);font:inherit;padding:6px 8px}.pp-static{border:1px solid var(--line);border-radius:var(--radius-ctl);background:var(--bg-pad-zone);padding:6px 8px;font-size:13px}.pp-lab{color:var(--mut2);font-size:11px}.pp-lens{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.pp-lens button{border:1px solid var(--line2);border-radius:var(--radius-ctl);background:var(--bg-card);color:var(--ink);cursor:pointer;padding:7px 0;font-size:12px}.pp-lens button.on{background:var(--brand-tint);border-color:var(--brand-outline);color:var(--brand-tint-text);font-weight:700}.pp-rest{justify-content:center;align-items:center;display:inline-flex}.pp-rest:disabled{opacity:.35}.pp-row{justify-content:space-between;align-items:center;padding:4px 0;display:flex}.pp-ctl{align-items:center;gap:4px;display:flex}.pp-ctl b{text-align:center;border:1px solid var(--line);border-radius:var(--radius-ctl);background:var(--bg-pad-zone);min-width:84px;padding:4px 6px;font-size:11.5px}.pp-ctl button{border:1px solid var(--line2);border-radius:var(--radius-ctl);background:var(--bg-card);width:22px;height:22px;color:var(--ink);cursor:pointer;justify-content:center;align-items:center;padding:0;display:inline-flex}.pp-ctl button:disabled{opacity:.3}.pp-chords{gap:4px;display:flex}.pp-slot{border:1px solid var(--line2);border-radius:var(--radius-ctl);background:var(--bg-card);min-width:0;min-height:30px;color:var(--ink);font-family:var(--font-chord);cursor:pointer;flex:1;font-size:13px;font-style:italic}.pp-slot.empty{color:var(--mut);font-family:var(--font-sans);border-style:dashed;font-style:normal}.pp-slot.open{background:var(--brand-tint);border-color:var(--brand-outline)}.pp-acc{gap:4px;display:flex}.pp-acc button{border:1px solid var(--line2);border-radius:var(--radius-ctl);background:var(--bg-card);min-width:0;color:var(--ink);cursor:pointer;flex:1;padding:6px 2px;font-size:10.5px}.pp-acc button.on{background:var(--brand-tint);border-color:var(--brand-outline);color:var(--brand-tint-text);font-weight:700}.pp-macc{border:1px solid var(--line2);border-radius:var(--radius-ctl);background:var(--bg-card);width:100%;color:var(--mut2);cursor:pointer;margin-top:8px;padding:6px 0;font-size:10.5px}.pp-macc b{color:var(--ink);margin-left:4px}.ws-picker{z-index:40;max-width:560px;box-shadow:var(--shadow-popover);position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@media (hover:hover){.ws-btn-primary:hover{background:var(--brand-primary-hover)}.ws-btn-outline:hover,.ws-chip:hover,.ws-icon-btn:not(.on):hover,.ws-zoom button:hover,.ws-back:hover,.pp-lens button:not(.on):hover,.pp-acc button:not(.on):hover{background:var(--bg-stepper-zone)}.roll-note:hover{filter:brightness(1.06)}.rcell:hover{outline:1px solid var(--brand-outline);outline-offset:-1px}}.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(--brand-primary)}.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-cardhead{justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;display:flex}.c-date{color:var(--mut2);flex:none;font-size:13px}.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(--brand-primary);border:1px solid var(--brand-outline);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(--brand-primary);color:var(--brand-primary-text);border-color:var(--brand-primary)}.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(--brand-primary);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(--line2);border-radius:var(--radius-ctl);color:var(--ink);background:var(--bg-card);padding:9px 10px;font-family:inherit;font-size:13px}.c-input:focus{border-color:var(--brand-outline);outline:none}.c-tags{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.c-tag{color:var(--brand-tint-text);background:var(--brand-tint);border:none;border-radius:20px;align-items:center;gap:4px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-flex}.c-tag-x{color:var(--mut2);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;line-height:1}.c-taginput{border:1px solid var(--line2);border-radius:var(--radius-ctl);background:var(--bg-card);flex-wrap:wrap;align-items:center;gap:6px;padding:7px 9px;display:flex}.c-taginput:focus-within{border-color:var(--brand-outline)}.c-tag-field{min-width:80px;color:var(--ink);background:0 0;border:none;outline:none;flex:1;padding:2px;font-family:inherit;font-size:13px}.c-tag-field:disabled{opacity:.5}.c-tagfield{flex-direction:column;gap:6px;display:flex}.c-tag-hint{color:var(--mut2);font-size:11.5px}.c-tagsug{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.c-tagsug-label{color:var(--mut2);font-size:11.5px}.c-tag-sug{color:var(--brand-tint-text);border:1px dashed var(--brand-outline);cursor:pointer;background:0 0;border-radius:20px;align-items:center;padding:2px 9px;font-family:inherit;font-size:11px;font-weight:600;display:inline-flex}@media (hover:hover){.c-tag-sug:hover{background:var(--brand-tint);border-style:solid}}.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}.c-btn-primary{border-color:var(--brand-primary);color:var(--brand-primary-text);background:var(--brand-primary);border-radius:var(--radius-ctl)}@media (hover:hover){.c-btn-primary:hover:not(:disabled){background:var(--brand-primary-hover);border-color:var(--brand-primary-hover)}}.c-appbar,.c-side,.c-toplicks{display:none}.c-create{border-radius:var(--radius-ctl);font:inherit;color:var(--brand-primary-text);background:var(--brand-primary);cursor:pointer;border:none;align-items:center;gap:5px;padding:8px 14px;font-size:13px;font-weight:600;display:inline-flex}.c-sort{gap:8px;padding:12px 0 0;display:flex}.c-sort button{border:1px solid var(--line);font:inherit;color:var(--mut2);background:var(--bg-card);cursor:pointer;border-radius:20px;padding:5px 14px;font-size:13px}.c-sort button.active{color:var(--brand-tint-text);border-color:var(--brand-outline);background:var(--brand-tint);font-weight:600}.c-rankbadge{min-width:22px;height:22px;color:var(--mut2);background:var(--bg-page);border:1px solid var(--line);border-radius:11px;justify-content:center;align-items:center;padding:0 6px;font-size:12px;font-weight:700;display:inline-flex}.c-rankbadge.top{color:#fff;background:var(--rank-accent);border-color:var(--rank-accent)}@media (width>=1024px){.community{max-width:1240px}.c-header{display:none}.c-appbar{border-bottom:1px solid var(--line);align-items:center;gap:20px;padding:10px 20px;display:flex}.c-brand{color:var(--brand-primary);white-space:nowrap;align-items:center;gap:8px;font-size:16px;font-weight:700;text-decoration:none;display:inline-flex}.c-searchwrap{border:1px solid var(--line);background:var(--bg-card);border-radius:20px;flex:1;align-items:center;gap:8px;max-width:480px;margin:0 auto;padding:0 14px;display:flex}.c-search{font:inherit;color:var(--ink);background:0 0;border:none;flex:1;padding:8px 0;font-size:13px}.c-search:disabled{cursor:not-allowed}.c-avatarwrap{position:relative}.c-avatar{border:1px solid var(--line);background:var(--brand-tint);width:34px;height:34px;color:var(--brand-tint-text);font:inherit;cursor:pointer;border-radius:50%;font-weight:700}.c-avatarmenu{border:1px solid var(--line);border-radius:var(--radius-ctl);background:var(--bg-card);min-width:140px;box-shadow:var(--shadow-popover);z-index:20;flex-direction:column;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);right:0}.c-avatarmenu button{text-align:left;font:inherit;color:var(--ink);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:8px 10px;font-size:13px}.c-avatarmenu button:hover{background:var(--bg-page)}.community-shell{grid-template-columns:200px 1fr 260px;align-items:start;gap:24px;padding:20px;display:grid}.c-side{display:block;position:sticky;top:20px}.c-sidenav{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.c-sidenav a{border-radius:var(--radius-ctl);color:var(--mut2);align-items:center;gap:10px;padding:8px 10px;font-size:14px;font-weight:500;text-decoration:none;display:flex}.c-sidenav a.active{color:var(--brand-tint-text);background:var(--brand-tint)}.c-sidetags{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}.c-sidetags-h{letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);margin-bottom:8px;font-size:11px}.c-sidetags ul{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.c-sidetag{color:var(--brand-tint-text);background:var(--brand-tint);border-radius:20px;align-items:center;padding:3px 10px;font-size:12px;font-weight:600;display:inline-flex}.c-main{min-width:0}.c-toplicks{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--shadow-card);padding:14px;display:block;position:sticky;top:20px}.c-toplicks-h{color:var(--ink);align-items:center;gap:6px;margin-bottom:10px;font-size:13px;font-weight:700;display:flex}.c-toplicks-list{counter-reset:none;margin:0;padding:0;list-style:none}.c-toplicks-list button{width:100%;font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:6px 0;display:flex}.c-rank{width:18px;color:var(--mut2);flex:none;font-size:12px;font-weight:700}.c-rank-1{color:var(--rank-accent)}.c-toplicks-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ink);flex:1;font-size:13px;overflow:hidden}.c-toplicks-likes{color:var(--mut2);flex:none;font-size:12px}.c-list{grid-template-columns:repeat(2,1fr);gap:18px;padding:16px 0;display:grid}.c-card{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--shadow-card);padding:16px;transition:border-color .12s}.c-card .c-title{font-size:17px;font-weight:500}@media (hover:hover){.c-card:hover{border-color:var(--brand-outline)}}}: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;--brand-primary:#0f6e56;--brand-primary-text:#e1f5ee;--brand-tint:#e1f5ee;--brand-tint-text:#085041;--brand-outline:#1d9e75;--brand-primary-hover:#0c5a46;--note-block:#5dcaa5;--note-block-selected:#0f6e56;--playhead:#d85a30;--rank-accent:#ba7517;--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-page:#f7f6f3;--bg-card:#fff;--bg-outer:var(--bg-page);--bg-pad-zone:#fafafa;--bg-stepper-zone:#f5f5f5;--bg-nav-btn:#f5f5f5;--radius-card:12px;--radius-ctl:6px;--shadow-card:0 1px 2px #1111110d, 0 1px 3px #1111110a}*{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(--note-block)}.pad .prow.rest .pcell.on{background:var(--rest)}.pad .pcell.sel{background:var(--note-block-selected);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(--brand-outline);border-bottom:1.5px solid var(--brand-outline);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:var(--brand-primary-hover)}.button-bar .bb.pri{background:var(--brand-primary);color:var(--brand-primary-text)}.button-bar .bb.warn{color:var(--red)}.button-bar .bb.nav{background:var(--bg-nav-btn)}.button-bar .bb.add{color:var(--brand-primary);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>=1024px){.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(--brand-outline)}.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(--brand-outline);outline-offset:-2px}