:root{--bg:#f6f5f2;--surface:#fff;--text:#1b1c1f;--muted:#696d74;--line:#dcd9d2;--accent:#f5b82e;--on-accent:#16130b;--danger:#b3261e;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#111214;--surface:#1a1c1f;--text:#ececec;--muted:#9aa0a6;--line:#2f3237;--danger:#ff8a80;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;margin:0;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}a{color:inherit}button,.button{font:inherit;border:1px solid var(--line);background:var(--surface);min-height:44px;color:var(--text);cursor:pointer;white-space:nowrap;touch-action:manipulation;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0 14px;text-decoration:none;display:inline-flex}button:disabled{opacity:.4;cursor:default}.primary{background:var(--text);color:var(--bg);border-color:#0000;font-weight:600}.danger{color:var(--danger)}input,select{font:inherit;border:1px solid var(--line);background:var(--surface);min-height:44px;color:var(--text);border-radius:8px;padding:0 10px;font-size:16px}.page{max-width:1100px;padding:max(16px, env(safe-area-inset-top)) 16px 48px;margin:0 auto}.page.editor{max-width:none}.page-head,.section-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.page-head{margin-bottom:16px}.page-head h1{margin:0;font-size:1.6rem}.section-head{margin:28px 0 10px}.section-head h2{margin:0;font-size:1.1rem}.actions{flex-wrap:wrap;gap:8px;display:flex}.muted{color:var(--muted)}.notice{border:1px solid var(--line);background:var(--surface);border-radius:10px;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 14px;display:flex}.list{border:1px solid var(--line);background:var(--surface);border-radius:12px;margin:0;padding:0;list-style:none;overflow:hidden}.list:empty{display:none}.list li{border-top:1px solid var(--line);align-items:center;gap:8px;padding:6px 8px 6px 14px;display:flex}.list li:first-child{border-top:0}.list-main{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;padding:10px 0;text-decoration:none;overflow:hidden}.meta{white-space:nowrap;font-size:.875rem}.numbered{counter-reset:n}.numbered li:before{counter-increment:n;content:counter(n) ".";color:var(--muted);min-width:1.6em}.meta-form{flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:20px;display:flex}.meta-form label,.add-to-setlist{color:var(--muted);flex-direction:column;gap:4px;font-size:.875rem;display:flex}.meta-form .grow{flex:220px}.meta-form input[type=number]{width:110px}.time-sig{color:var(--text);align-items:center;gap:6px;display:flex}.add-to-setlist{max-width:360px;margin-top:16px}.search{appearance:none;width:100%}.numbered li{padding-left:4px}.drag-handle{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab;order:-1}.dragging{z-index:1;background:var(--surface);position:relative;box-shadow:0 4px 16px #0003}.pick-list{max-height:min(60vh,480px);margin-top:8px;overflow-y:auto}.pick-list li{padding:0}.pick{text-align:left;background:0 0;border:0;border-radius:0;flex:1;justify-content:flex-start;min-width:0;padding:0 14px}.editor{padding-top:max(12px, env(safe-area-inset-top))}.editor .page-head{margin-bottom:10px}.editor input,.editor select,.editor button,.editor .button{min-height:36px}.editor .meta-form{gap:8px;margin-bottom:12px}.editor .meta-form label{gap:2px;font-size:.8rem}.icon-btn{width:36px;color:var(--muted);background:0 0;border-color:#0000;padding:0}.icon-btn:hover:not(:disabled){background:var(--bg);color:var(--text)}.icon-btn.danger:hover:not(:disabled){color:var(--danger)}.ed-section{border:1px solid var(--line);background:var(--surface);border-radius:10px;margin:10px 0;padding:8px}.ed-section-head{align-items:center;gap:4px;margin-bottom:8px;display:flex}.ed-section-head .muted{white-space:nowrap;padding:0 4px}.ed-section-head:last-child{margin-bottom:0}.ed-section-name{flex:1 1 0;min-width:0;font-weight:600}.ed-bars{grid-template-columns:repeat(var(--per-row), minmax(calc(var(--beats) * 56px + 10px), 1fr));gap:6px;display:grid;overflow-x:auto}.ed-bar{border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:4px}.ed-bar-head{align-items:center;font-size:.75rem;display:flex}.ed-bar-head .ed-bar-grip{min-height:26px;color:var(--muted);background:0 0;border:0;flex:1;justify-content:flex-start;gap:2px;padding:0 2px}.ed-bar-grip svg{width:14px;height:14px}.ed-bar.moving{opacity:.4}.ed-bar.drop-before{box-shadow:inset 4px 0 0 var(--accent)}.ed-bar.drop-after{box-shadow:inset -4px 0 0 var(--accent)}.ed-section.drop-into{outline:2px solid var(--accent);outline-offset:-2px}.bar-ghost{z-index:10;pointer-events:none;background:var(--text);color:var(--bg);white-space:pre;border-radius:8px;padding:6px 10px;font-weight:700;position:fixed;transform:translate(-50%,calc(-100% - 16px));box-shadow:0 4px 16px #00000040}.ed-bar-head .icon-btn{width:26px;min-height:26px}.ed-bar-head .icon-btn svg{width:15px;height:15px}.ed-bar-head .icon-btn:hover:not(:disabled){background:var(--surface)}.ed-row{grid-template-columns:repeat(var(--beats), minmax(0, 1fr));gap:3px;margin-top:3px;display:grid}.editor .ed-row input{border-radius:6px;width:100%;min-width:0;min-height:34px;padding:0 5px}.ed-chord{font-weight:700}.ed-add-bar,.ed-add-section{color:var(--muted);background:0 0;border-style:dashed}.ed-add-section{width:100%}:root:has(.stage){background:#0e0f11}.stage{--bg:#0e0f11;--surface:#17191c;--text:#f3f3f3;--muted:#8f959d;--line:#34383e;--cell-min:calc(68px * var(--scale));--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:var(--bg);min-height:100vh;color:var(--text);padding:0 12px 45vh}.stage .primary{background:var(--accent);color:var(--on-accent)}.st-toolbar{z-index:5;padding:max(10px, env(safe-area-inset-top)) 0 10px;background:var(--bg);border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;gap:8px;display:flex;position:sticky;top:0}.st-group,.st-field{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.st-title{margin:0 6px;font-size:1.1rem;font-weight:700}.st-value{text-align:center;font-variant-numeric:tabular-nums;min-width:5.2em}.st-play{min-width:150px;font-size:1.05rem}.st-progress{flex-basis:100%;align-items:center;gap:10px;display:flex}.st-progress-track{background:var(--line);border-radius:3px;flex:1;height:6px;overflow:hidden}.st-progress-fill{background:var(--accent);transform-origin:0;height:100%}.st-time{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;font-size:.875rem}@media (width<=600px){.st-controls{flex-wrap:nowrap;width:100%;overflow-x:auto}.st-field{flex-wrap:nowrap}.st-play{order:-1;min-width:120px}}.st-hint{margin:8px 0 0;font-size:.875rem}.st-section{margin-top:calc(18px * var(--scale))}.st-section h2{font-size:calc(.85rem * var(--scale));letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 6px;font-weight:700}.st-bars{--gap:calc(8px * var(--scale));gap:var(--gap);grid-template-columns:repeat(auto-fill, minmax(max(min(100%, calc(var(--beats) * var(--cell-min))), calc((100% - (var(--per-row) - 1) * var(--gap)) / var(--per-row) - 1px)), 1fr));display:grid}.st-bar{cursor:pointer}.st-chords,.st-lyrics{grid-template-columns:repeat(var(--beats), minmax(0, 1fr));display:grid}.st-chords{border:2px solid var(--line);background:var(--surface);border-radius:8px;overflow:hidden}.st-bar.is-active .st-chords{border-color:var(--accent)}.st-bar.is-start .st-chords{border-color:var(--accent);border-style:dashed}.st-cell{min-width:0;min-height:calc(46px * var(--scale));padding:calc(6px * var(--scale));border-left:1px solid var(--line)}.st-cell:first-child{border-left:0}.st-cell.is-now{background:var(--accent);color:var(--on-accent)}.st-chord{font-size:calc(1.6rem * var(--scale) * min(1, 3.6 / var(--len)));white-space:nowrap;font-weight:800;line-height:1.1;display:block}.st-lyrics{padding:4px 2px 0}.st-lyrics:empty{display:none}.st-lyric{padding:0 calc(6px * var(--scale));font-size:calc(1.05rem * var(--scale));overflow-wrap:break-word;line-height:1.3}.st-lyric.is-now{color:var(--accent)}.st-countin{z-index:10;font-variant-numeric:tabular-nums;color:var(--accent);pointer-events:none;background:#00000073;place-items:center;font-size:min(40vw,40vh);font-weight:800;display:grid;position:fixed;inset:0}.login{max-width:360px}.login form{flex-direction:column;gap:12px;margin-bottom:16px;display:flex}.login label{flex-direction:column;gap:4px;display:flex}.banner{background:var(--danger);color:var(--bg);text-align:center;margin:0;padding:8px 16px;font-size:.875rem}
