:root{--bg:#121417;--panel:#1b1e23;--panel2:#23272e;--line:#2f343c;--fg:#e8eaed;--muted:#98a0aa;--accent:#4fc3a1;--accent-fg:#0d1512;--danger:#e5776b;--warn:#e2b45a;--g-sub:#a48be0;--g-vit:#ee8a66;--g-une:#7fa8cc;--grid:#262a31;--sec-a:#2b3540;--sec-b:#323b2f;--t-mel:#f2c46d;--t-chd:#6fb3e8;--t-bass:#a98be8;--t-drum:#8a929c;--f-t:#4fc3a1;--f-s:#e2b45a;--f-d:#e5776b;--r-chord:#f2c46d;--r-pass:#6fb3e8;--r-nbr:#a98be8;--r-app:#e5776b;--r-other:#8a929c;--m-a:#4fc3a1;--m-b:#ee8a66;--m-c:#7fa8cc;--roll-in:#1d2127;--roll-out:#15181c;--kbd-white:#e8eaed;--kbd-black:#23272e;--sans:"Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:ui-monospace, "JetBrains Mono", Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--fg);font:14px/1.5 var(--sans);margin:0}button,input,select,textarea{font:inherit;color:inherit}button{background:var(--panel2);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:5px 10px}button:hover:not(:disabled){border-color:var(--muted)}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);padding:9px 14px;font-weight:600}button.danger{color:var(--danger)}input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:6px;min-width:0;padding:5px 8px}.mono{font-family:var(--mono);font-size:12px}.small{font-size:11.5px}.muted{color:var(--muted)}.row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.app{grid-template-columns:minmax(320px,420px) 1fr;min-height:100vh;display:grid}.create{border-right:1px solid var(--line);background:var(--panel);height:100vh;padding:18px 16px 40px;position:sticky;top:0;overflow-y:auto}.brand h1{margin:0;font-size:20px}.brand p{color:var(--muted);margin:4px 0 14px;font-size:13px}.tabs{background:var(--bg);border-radius:8px;flex-wrap:wrap;gap:4px;margin-bottom:14px;padding:3px;display:flex}.tabs button{background:0 0;border:0;flex:1 0 auto;padding:5px 8px}.tabs button[aria-selected=true]{background:var(--panel2);font-weight:600}.panel{gap:12px;display:grid}.moods{border:0;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;margin:0;padding:0;display:grid}.moods legend{color:var(--muted);letter-spacing:.08em;margin-bottom:4px;font-size:12px}.mood{text-align:left;border-left:3px solid var(--gc);padding:8px 10px;display:grid}.mood small{color:var(--muted);font-size:11px}.mood[aria-pressed=true]{background:color-mix(in srgb, var(--gc) 22%, var(--panel2));border-color:var(--gc)}.g-崇高{--gc:var(--g-sub)}.g-活力{--gc:var(--g-vit)}.g-不安{--gc:var(--g-une)}.recipe{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px}.recipe p{margin:0 0 6px}.recipe ul{color:var(--muted);margin:0;padding-left:18px}.field{color:var(--muted);gap:4px;font-size:12.5px;display:grid}.field input,.field select{color:var(--fg)}.grid2{grid-template-columns:1fr 1fr;gap:8px;display:grid}.grid3{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.grid4{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}h3{margin:6px 0 0;font-size:14px}.sections{gap:8px;display:grid}.sec{background:var(--bg);border:1px solid var(--line);border-radius:8px;gap:6px;padding:8px;display:grid}.sec-head{align-items:center;gap:6px;display:flex}.sec-head .name{flex:1;font-weight:600}.sec-head label{color:var(--muted);white-space:nowrap;font-size:12px}.sec-head input[type=number]{width:52px}.sec-head button{padding:3px 7px}.phrases{flex-wrap:wrap;align-items:center;gap:4px;font-size:12px;display:flex}.phrase{background:var(--panel2);border-radius:6px;align-items:center;gap:2px;padding:2px;display:inline-flex}.phrase select,.phrase input{padding:2px 4px;font-size:12px}.phrase .steps{width:44px}.phrase button{border:0;padding:1px 6px}.json{width:100%;height:60vh;font-family:var(--mono);font-size:12px}.sticky{background:var(--panel);padding:10px 0;position:sticky;bottom:-40px}.error{color:var(--danger);margin:0;font-size:13px}.status{color:var(--warn);font-size:13px}.tpl{background:var(--bg);border:1px solid var(--line);border-radius:8px;gap:6px;padding:10px;display:grid}.tpl small{color:var(--muted);display:block}.dots{gap:6px;display:flex}.dot{border-radius:50%;width:30px;height:30px;padding:0}.dot.cur{border-color:var(--accent)}.dot.ok{background:var(--f-t);color:#111}.dot.ng{background:var(--danger);color:#111}.choices{gap:6px;display:grid}.choices button{text-align:left;padding:8px 12px}.choices button.right{background:color-mix(in srgb, var(--f-t) 35%, var(--panel2));border-color:var(--f-t);opacity:1}.choices button.wrong{background:color-mix(in srgb, var(--danger) 30%, var(--panel2));border-color:var(--danger);opacity:1}.works{min-width:0;padding:18px 20px 60px}.works-head{align-items:baseline;gap:12px;margin-bottom:12px;display:flex}.works-head h2{margin:0;font-size:18px}.empty{color:var(--muted)}.card{background:var(--panel);border:1px solid var(--line);cursor:pointer;border-radius:10px;margin-bottom:10px;padding:10px 12px}.card.open{border-color:var(--accent);cursor:default}.card-head{align-items:center;gap:12px;display:flex}.play{border-radius:50%;flex:none;width:38px;height:38px;padding:0;font-size:14px}.title{min-width:0;display:grid}.title small{color:var(--muted)}.busy{color:var(--warn);white-space:nowrap;margin-left:auto;font-size:12.5px}.card-body{gap:10px;margin-top:10px;display:grid}.motifs{gap:6px;display:grid}.motif{background:var(--bg);border-radius:6px;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:6px 8px;display:grid}.tag{color:var(--t-mel);font-size:12px;font-weight:600}.track-id{color:var(--accent)}.provenance{margin:-6px 0 14px;font-size:12.5px}.provenance summary{cursor:pointer;color:var(--accent)}.provenance p{color:var(--muted);margin:6px 0 0}.import{color:var(--accent);cursor:pointer;margin-left:auto;font-size:12.5px}.import input{display:none}.energy{flex-wrap:wrap;align-items:center;gap:6px 10px;display:flex}.seg{background:var(--bg);border-radius:6px;align-items:center;gap:2px;padding:2px 4px;display:inline-flex}.seg small{color:var(--muted);margin-right:4px;font-size:11.5px}.seg button{padding:1px 7px;font-size:11.5px}.seg button[aria-pressed=true],button.toggle.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.legend{flex-wrap:wrap;align-items:center;gap:4px 8px;display:flex}.legend>span:not(.fn):not(.role):not(.muted){color:var(--muted);margin-left:6px}.fn,.role{color:#111;border-radius:10px;margin-right:6px;padding:0 7px;font-size:11.5px;font-weight:600;display:inline-block}.fn-t{background:var(--f-t)}.fn-s{background:var(--f-s)}.fn-d{background:var(--f-d)}.r-chord{background:var(--r-chord)}.r-passing{background:var(--r-pass)}.r-neighbor{background:var(--r-nbr)}.r-appoggiatura{background:var(--r-app)}.r-other{background:var(--r-other)}.explain{background:var(--bg);border:1px solid var(--line);border-radius:8px;gap:8px;padding:10px 12px;font-size:13px;display:grid}.explain p{color:var(--muted);margin:2px 0 0}.explain .tag{margin-right:6px}.explain button{justify-self:start}.editor{background:var(--bg);border:1px solid var(--accent);border-radius:8px;gap:8px;padding:10px;display:grid}.editor p{margin:0}.palette{gap:4px;display:grid}.kbd{width:100%;height:auto;display:block}.kbd rect{transition:fill .12s}.circle{justify-self:center;width:100%;max-width:340px}.cof{cursor:pointer}.cof text{font:600 12px var(--sans);text-anchor:middle;dominant-baseline:middle;pointer-events:none}.cof text.roman{font-size:8.5px}.cof text.minor{font-size:10px;font-weight:500}.circle text.center{font:600 14px var(--sans);text-anchor:middle}.circle text.center.small{font-size:11px;font-weight:400}.lesson-group{gap:4px;display:grid}.lesson{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gc,var(--accent));border-radius:8px;padding:6px 10px}.lesson summary{cursor:pointer}.lesson ul{color:var(--muted);margin:6px 0;padding-left:18px;font-size:13px}.lesson p{margin:6px 0;font-size:13px}button.link{color:var(--accent);background:0 0;border:0;text-decoration:underline}.lyrics{background:var(--bg);border:1px solid var(--line);border-radius:8px;gap:10px;padding:10px;display:grid}.lyrics p{margin:0}.lyr-head{align-items:baseline;gap:8px;display:flex}.lyr-body{grid-template-columns:minmax(0,1fr) minmax(140px,220px);gap:8px;display:grid}.lyr-body textarea{resize:vertical;font-size:15px;line-height:22px}.lyr-info div{white-space:nowrap;text-overflow:ellipsis;line-height:22px;overflow:hidden}.lyr-info .ok{color:var(--f-t)}.lyr-info .warn{color:var(--warn)}.zhe{background:var(--panel2);border-radius:8px;padding:0 5px}.z-A{background:color-mix(in srgb, var(--m-a) 35%, transparent)}.z-B{background:color-mix(in srgb, var(--m-b) 35%, transparent)}.z-C{background:color-mix(in srgb, var(--m-c) 35%, transparent)}.z-D{background:color-mix(in srgb, var(--f-s) 35%, transparent)}@media (width<=760px){.lyr-body{grid-template-columns:1fr}}.chip{text-align:center;border-left:3px solid var(--fc);padding:2px 7px;line-height:1.15;display:inline-grid}.chip small{color:var(--muted);font-size:10px}.chip.hint{outline:1.5px solid var(--fc)}.fn-b-t{--fc:var(--f-t)}.fn-b-s{--fc:var(--f-s)}.fn-b-d{--fc:var(--f-d)}.roll{border:1px solid var(--line);border-radius:6px;outline:none;grid-template-columns:44px 1fr;max-height:360px;display:grid;overflow:hidden auto}.roll:focus-visible{outline:2px solid var(--accent)}.roll-keys{background:var(--panel);border-right:1px solid var(--line)}.rk{color:var(--muted);border-bottom:1px solid var(--grid);box-sizing:border-box;padding-left:4px;font-size:9px;line-height:11px}.rk.in{color:var(--fg)}.rk.tonic{color:var(--accent);font-weight:600}.roll-scroll{cursor:crosshair;touch-action:none;overflow-x:auto}.roll-scroll svg{display:block}.rn{fill:var(--t-mel);cursor:grab}.rn.out{fill:var(--danger)}.rn.sel{stroke:var(--fg);stroke-width:1.5px}.daw{border:1px solid var(--line);background:var(--bg);border-radius:8px;grid-template-columns:64px 1fr;display:grid;overflow:hidden}.daw-labels{border-right:1px solid var(--line);background:var(--panel)}.lab{color:var(--muted);border-bottom:1px solid var(--grid);align-items:center;padding-left:6px;font-size:11.5px;display:flex}.mute{padding:2px 6px;font-size:11.5px}.mute.off{opacity:.55;text-decoration:line-through}.daw-scroll{cursor:pointer;overflow-x:auto}.playhead{background:var(--accent);pointer-events:none;width:2px;display:none;position:absolute;top:0;bottom:0;left:0}@media (width<=760px){.app{grid-template-columns:1fr}.create{border-right:0;border-bottom:1px solid var(--line);height:auto;position:static}.grid4{grid-template-columns:1fr 1fr}.motif{grid-template-columns:1fr}}@media print{@page{size:A4;margin:15mm 13mm 14mm}:root,:root[data-theme=dark],:root:not([data-theme=light]){--bg:#fff;--panel:#fff;--panel2:#f3f4f6;--line:#cfd4da;--fg:#1b1e23;--muted:#555d66;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html,body{-webkit-print-color-adjust:exact;print-color-adjust:exact;font-size:10pt}.create,button{display:none}.app{display:block}.card{break-inside:avoid}}