*{box-sizing:border-box}
:root{--bg:#0c0e13;--pn:#141821;--ln:#2a3140;--ink:#e6e9ef;--mut:#8b94a7;--acc:#7ef0c8;--barH:44px;--tabW:52px;--paneW:300px}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.4 "DotGothic16","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden}
button,select,input{font:inherit;color:var(--ink);background:#1d2330;border:1px solid var(--ln);border-radius:4px;padding:2px 7px}
button{cursor:pointer}button:hover{border-color:var(--acc)}button.on,button.pri{background:#1e4a3e;border-color:var(--acc);color:#dfffee}
input[type=range]{padding:0;width:80px;accent-color:var(--acc)}input[type=number]{width:54px}
label{color:var(--mut);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.chk input{margin:0}
code{font:11px ui-monospace,monospace;color:var(--ink)}
/* top bar */
.bar{flex:none;display:flex;gap:8px;align-items:center;padding:6px 10px;min-height:var(--barH);border-bottom:1px solid var(--ln);background:#0c0e13;overflow-x:auto;scrollbar-width:none}
.bar::-webkit-scrollbar{display:none}
.bar h1{margin:0 4px 0 0;font-size:15px;letter-spacing:.06em;white-space:nowrap}.bar h1 span{color:var(--acc)}
.grp{display:flex;gap:4px;align-items:center;flex:none}
.tr button{min-width:32px}
.pq select{max-width:110px}
.title{flex:1;min-width:40px;color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
#scope{flex:none;background:#05070a;border:1px solid var(--ln);border-radius:4px;width:90px;height:26px}
.vol input{width:64px}
#mute{padding:2px 5px}#mute.on{background:#5a2330;border-color:#ff7a8a}
/* work area */
.work{flex:1;min-height:0;display:flex}
.editor{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;padding:6px 8px 4px}
.rollbar{flex:none;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-bottom:5px;position:relative}
.seg{display:inline-flex}.seg button{border-radius:0;min-width:30px}.seg button:first-child{border-radius:4px 0 0 4px}.seg button:last-child{border-radius:0 4px 4px 0}
#chLabel{margin-left:auto;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop{position:relative}.pop summary{list-style:none;cursor:pointer;color:var(--mut);border:1px solid var(--ln);border-radius:4px;padding:2px 8px;background:#1d2330;white-space:nowrap}
.pop summary::-webkit-details-marker{display:none}.pop[open] summary{border-color:var(--acc);color:var(--ink)}
.popbox{position:absolute;z-index:20;top:calc(100% + 4px);left:0;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--pn);border:1px solid var(--ln);border-radius:6px;box-shadow:0 8px 24px #000a}
#lanes{flex:none;width:100%;height:72px;display:block;background:#090b10;border:1px solid var(--ln);border-radius:4px 4px 0 0;cursor:pointer}
.rollBox{flex:1;min-height:160px;position:relative;border:1px solid var(--ln);border-top:0;border-radius:0 0 4px 4px;background:#090b10;overflow:hidden}
#roll{position:absolute;left:0;top:0;display:block;pointer-events:none}
#rollWrap{position:absolute;inset:0;overflow:auto;touch-action:pan-x pan-y;cursor:crosshair;overscroll-behavior:contain}
#rollSpace{pointer-events:none}
.zoom button{min-width:0;padding:2px 6px}.zoom button[id$=Lbl]{font:11px ui-monospace,monospace;min-width:44px;color:var(--mut)}.zoom button:disabled{opacity:.4;cursor:default}
#noteEd{flex:none;margin-top:4px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:26px;color:var(--mut);font-size:12px}
#noteEd b{color:var(--ink)}#noteEd input[type=text]{width:56px}#noteEd button{padding:1px 6px}
.status{flex:none;font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.4em}
/* side: panes + tab strip */
.side{flex:none;display:flex;border-left:1px solid var(--ln);background:var(--pn)}
.panes{width:var(--paneW);overflow-y:auto;padding:10px;border-right:1px solid var(--ln)}
.side.closed .panes{display:none}
.pane{display:none}.pane.on{display:block}
.tabs{width:var(--tabW);display:flex;flex-direction:column;gap:2px;padding:6px 4px}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0;border-color:transparent;background:transparent;color:var(--mut);font-size:10px}
.tabs button b{font-size:16px;line-height:1;color:var(--ink);font-weight:normal}
.tabs button.on{background:#1e4a3e;border-color:var(--acc);color:#dfffee}
h3{margin:12px 0 6px;font-size:13px;color:var(--acc)}h3:first-child{margin-top:0}h3 small{color:var(--mut);font-weight:normal;font-size:11px}
.note{color:var(--mut);font-size:11px;margin:4px 0 8px}
.row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.row button{font-size:12px;padding:2px 7px}.row select{max-width:100%;flex:1}
.row.ai button{flex:1 1 45%}
.airow{display:flex;gap:6px;margin:4px 0}.airow input{flex:1;min-width:0;padding:6px 8px}.airow button{flex:1}
.fold summary{cursor:pointer;color:var(--mut);font-size:12px;margin:6px 0}
#chips{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
#chips button{font-size:11px;border-radius:99px;padding:1px 8px}#chips button.sfx{border-style:dashed}
#chans .ch{display:grid;grid-template-columns:10px 1fr auto auto;gap:4px;align-items:center;padding:3px 4px;border-radius:4px;cursor:pointer;border:1px solid transparent}
#chans .ch.sel{border-color:var(--ln);background:#1b2130}#chans .dot{width:10px;height:10px;border-radius:2px}
#chans .ch button{padding:0 6px;font-size:11px}#chans .ch button.on{background:#5a2330;border-color:#ff7a8a}#chans .ch button.solo.on{background:#4a4220;border-color:#ffd166}
#chans .ch small{display:block;color:var(--mut);font-size:11px}
#pats{display:flex;flex-wrap:wrap;gap:4px}#pats button{font-size:12px;padding:2px 8px}
#order{display:flex;flex-wrap:wrap;gap:3px;min-height:26px;max-height:30vh;overflow-y:auto;position:relative;align-content:flex-start}#order button{font:12px ui-monospace,monospace;padding:2px 6px}
#order button.play{box-shadow:0 0 0 2px var(--acc) inset}
.kv{display:grid;grid-template-columns:70px 1fr 40px;gap:4px 6px;align-items:center;font-size:12px}
.kv span{color:var(--mut)}.kv output{color:var(--ink);font:11px ui-monospace,monospace;text-align:right}
.kv input[type=range]{width:100%}.kv select,.kv input[type=text]{width:100%}
.help ul{padding-left:16px;margin:4px 0}.help li{margin:3px 0;font-size:12px}.help pre{font:10px ui-monospace,monospace;background:#090b10;padding:8px;border-radius:4px;overflow:auto;white-space:pre}
kbd{border:1px solid var(--ln);border-radius:3px;padding:0 4px;font:11px ui-monospace,monospace;background:#1d2330}
a{color:var(--acc)}
@media(max-width:1100px){.lbl{display:none}#scope{display:none}}
/* mobile: tabs become a bottom bar, panes a bottom sheet */
@media(max-width:820px){
  .work{flex-direction:column}
  .editor{padding:4px 6px 2px}
  .title{display:none}.bar h1{display:none}.bar{gap:6px;padding:5px 6px}
  .side{border-left:0;border-top:1px solid var(--ln);flex-direction:column}
  .tabs{width:auto;flex-direction:row;padding:3px 4px calc(3px + env(safe-area-inset-bottom))}
  .tabs button{flex:1;padding:4px 0}
  .rollbar{gap:4px 5px}.zoom button[id$=Lbl]{min-width:38px;padding:2px 3px}.rollbar>label{font-size:0;gap:0}.rollbar>label select{font-size:13px}#chLabel{font-size:11px}
  .panes{position:fixed;left:0;right:0;bottom:calc(46px + env(safe-area-inset-bottom));width:auto;max-height:58vh;border:1px solid var(--ln);border-radius:10px 10px 0 0;background:var(--pn);box-shadow:0 -10px 30px #000c;z-index:30}

}
.kv.exp{grid-template-columns:70px 1fr}.kv.exp label{color:var(--mut)}.kv.exp input[type=number]{width:100%}