:root{
  --bg:#07080d;--panel:#0d1018;--panel2:#111623;--line:#ffffff16;--ink:#e8ece9;
  --muted:#7f8a88;--violet:#8e83ff;--violet2:#b9b2ff;--sea:#64f1ca;--amber:#dcb36c;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 60% 5%,#17142a 0,#080a10 38%,#050609 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer}
.app{min-height:100vh;padding:18px}
.topbar{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);background:#090c13d9;backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px}.brand>span:last-child{display:flex;flex-direction:column;gap:2px}
.pd{width:36px;height:36px;display:grid;place-items:center;border:1px solid #8e83ff66;color:var(--violet2);font-weight:900;letter-spacing:-.06em}
.brand b{font-size:14px;letter-spacing:.17em}.brand small,.version,.host-state{font-size:8px;letter-spacing:.15em;color:var(--muted)}
.version{margin-left:auto}.host-state{padding:7px 9px;border:1px solid var(--line);background:#0b0f16}.host-state.ready{color:#9ee8d1;border-color:#64f1ca44}
.songbar{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:8px;margin-top:10px}
.songbar>div{padding:10px 12px;border:1px solid var(--line);background:#0b0e15}
.songbar small{display:block;font-size:7px;letter-spacing:.16em;color:#77827f}.songbar b{display:block;margin-top:4px;font-size:11px}
.workspace{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(520px,2fr);gap:12px;margin-top:12px}
.panel{border:1px solid var(--line);background:linear-gradient(145deg,#0b0f17eb,#0a0d13d9);box-shadow:0 24px 70px #0007}
.sources,.instrument{padding:14px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.panel-head span{display:flex;flex-direction:column;gap:2px}.panel-head small{font-size:7px;letter-spacing:.16em;color:var(--violet2)}.panel-head b{font-size:12px}
.panel-head em{font-style:normal;font-size:9px;color:#9e98d5}
.hint{font-size:9px;line-height:1.5;color:var(--muted);margin:8px 0 10px}
.source-list{display:grid;gap:6px}.source-row{display:grid;grid-template-columns:minmax(0,1fr) 68px;gap:7px;align-items:center;padding:8px;border:1px solid #ffffff10;background:#0a0d12}
.source-row>span{display:flex;flex-direction:column;gap:2px;min-width:0}.source-row b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.source-row small{font-size:7px;color:#6f7d79}
.source-row button{border:1px solid #8e83ff4d;background:#8e83ff12;color:#cbc7ff;padding:7px;font-size:8px;font-weight:800}
.source-row button:disabled{opacity:.4;cursor:default}
audio{width:100%;height:34px;margin-top:9px}.status{min-height:17px;margin-top:5px;font-size:8px;color:#7d8b87}.status.ready{color:#8ce4c8}.status.error{color:#ff9595}
.song-map{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.section-map{display:grid;gap:5px;margin-top:7px}
.section{padding:7px 8px;border:1px solid #ffffff0e;background:#0a0d12}.section b{font-size:8px}.section small{display:block;margin-top:2px;font-size:7px;color:#6f7c78}
.empty{padding:10px;border:1px dashed #ffffff12;color:#66726f;font-size:8px;text-align:center}
.instrument-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.instrument-head small,.handoff small{font-size:7px;letter-spacing:.17em;color:var(--violet2)}.instrument-head h1{margin:4px 0 6px;font-size:27px;letter-spacing:-.035em}.instrument-head p{max-width:620px;margin:0;color:#98a3a0;font-size:10px;line-height:1.5}
.loop-state{min-width:150px;padding:9px 11px;border:1px solid #8e83ff30;background:#8e83ff0a;text-align:right}.loop-state b{display:block;margin-top:3px;font-size:11px}.loop-state span{display:block;margin-top:2px;font-size:7px;color:#777e99}
.patches{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}.patch{padding:10px;border:1px solid #ffffff12;background:#0c1018;color:#cfd5d2;text-align:left}.patch.active{border-color:#8e83ff88;background:#8e83ff18;color:#fff}.patch b{display:block;font-size:9px}.patch small{display:block;margin-top:3px;font-size:7px;color:#7a8490;line-height:1.35}.patch.active small{color:#b9b5dc}
.transport{display:flex;align-items:center;gap:7px;margin-top:10px;flex-wrap:wrap}.transport button{border:1px solid #ffffff18;background:#0b1017;color:#adb7b4;padding:9px 11px;font-size:8px;font-weight:800}.transport button.primary{border-color:#8e83ff66;background:#8e83ff1c;color:#eeeaff}.transport button.active{border-color:#64f1ca66;color:#bff6e5;background:#64f1ca12}.transport button:disabled{opacity:.35;cursor:not-allowed}.transport span{margin-left:auto;font-size:8px;color:#6f7b78}
.surface{position:relative;min-height:310px;margin-top:10px;border:1px solid #8e83ff42;background:radial-gradient(circle at 50% 30%,#211c43 0,#111527 38%,#090d15 100%);overflow:hidden;touch-action:none;user-select:none;outline:none}
.surface:focus{box-shadow:0 0 0 1px #8e83ff99,0 0 30px #8e83ff18}
.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr)}.grid:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ffffff10,transparent 35%,#0005)}.grid i{border-right:1px solid #ffffff10}
.surface-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}.surface-copy b{font-size:20px;letter-spacing:.18em;color:#f2efff}.surface-copy span{margin-top:8px;font-size:10px;color:#bbb8d8}.surface-copy small{margin-top:8px;max-width:500px;color:#777f8a;font-size:8px}
.note-flash{position:absolute;width:18px;height:18px;border-radius:50%;background:#b9b2ff;box-shadow:0 0 26px #8e83ff;transform:translate(-50%,-50%);pointer-events:none;opacity:.85}
.handoff{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:11px;padding:10px 11px;border:1px solid #ffffff12;background:#0a0e14}.handoff>span{display:flex;flex-direction:column;gap:2px}.handoff b{font-size:9px;color:#cbd3d0}.handoff button{border:1px solid #64f1ca55;background:#64f1ca16;color:#c9f7e9;padding:9px 12px;font-size:8px;font-weight:900}.handoff button:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.songbar{grid-template-columns:1.5fr 1fr 1fr}.songbar>div:nth-child(n+4){display:none}.surface{min-height:250px}.sources{order:2}.instrument{order:1}}
@media(max-width:560px){.app{padding:8px}.topbar{flex-wrap:wrap}.host-state{width:100%}.workspace{margin-top:8px}.instrument-head{flex-direction:column}.loop-state{width:100%;text-align:left}.patches{grid-template-columns:1fr}.transport span{width:100%;margin-left:0}.surface{min-height:220px}.handoff{align-items:flex-start;flex-direction:column}.handoff button{width:100%}}
/* v0.5.2 standalone audio startup */
.audio-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:12px;border:1px solid #64f1ca3b;background:#101b20;color:#e8ece9}
.audio-toolbar button{padding:11px 14px;font-size:12px;font-weight:800;border:1px solid #8e83ff80;background:#8e83ff1b;color:#f3f1ff}
.audio-toolbar .audio-start{background:#64f1ca21;border-color:#64f1ca88;color:#bcf6e6}
.audio-toolbar label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#d0d9d6}
.audio-toolbar select{color:#e8ece9;background:#121825;border:1px solid #ffffff35;padding:7px}
.audio-toolbar input[type=range]{width:92px;accent-color:#64f1ca}
.audio-toolbar strong{font-size:11px;color:#b5bbb8}
.audio-toolbar strong.ready{color:#85e4c5}
.audio-toolbar strong.error{color:#ff9191}
@media(max-width:560px){.audio-toolbar{align-items:stretch}.audio-toolbar button{flex:1 1 120px}.audio-toolbar strong{width:100%}}