/* GSHertz workspace: visual hierarchy, accessible controls, independent pad LEDs. */
:root{color-scheme:dark;--bg:#10151e;--panel:#171e29;--panel2:#202a38;--chrome:#151d28;--line:#334052;--txt:#edf3fc;--sub:#a5b3c7;--cell:#273447;--cellbeat:#34455b;--font-ui:"Segoe UI","Yu Gothic UI",Meiryo,system-ui,sans-serif}
body{height:100dvh;font-size:13px}
button,select,input[type=number],input[type=text]{min-height:28px;border-radius:2px;border-color:#3b4a60;padding:4px 8px}
button{font-weight:500;transition:background .12s,border-color .12s,color .12s}
select{padding-right:28px}
input:disabled,select:disabled{opacity:.4;cursor:default}
#selSynth{min-width:80px}
#selBar{min-width:56px}
#barsWrap{align-items:stretch}
button:hover{background:#2b394d}
button:disabled{opacity:.48}
button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input[type=text]{color:var(--txt);background:var(--bg)}
input[type=text]:focus{color:var(--txt);background:var(--bg);outline:2px solid var(--accent)}
input[type=range]{height:24px;accent-color:var(--accent)}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:#46566d;border-radius:0}
input[type=range]::-webkit-slider-thumb{height:14px;width:6px;border:1px solid var(--panel);border-radius:0;margin-top:-5px;background:var(--accent)}
input[type=range]::-moz-range-track{height:4px;background:#46566d;border-radius:0}
input[type=range]::-moz-range-thumb{height:12px;width:6px;border:1px solid var(--panel);border-radius:0;background:var(--accent)}
input[type=color]{width:30px;height:28px;border-color:var(--line);border-radius:2px}
input[type=number]{width:70px;font-family:var(--font-mono);font-size:13px}
label.chk{gap:7px;white-space:nowrap}
.ui-titlebar{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid var(--line)}
.brand{padding:0;font-size:15px;letter-spacing:0;white-space:nowrap}
.brand small{display:block;font-size:10px;margin:3px 0 0;letter-spacing:.02em;color:var(--sub)}
.brand .ver{font-size:9px;color:var(--sub);border-color:var(--line);vertical-align:3px;border-radius:4px}
.modeswitch{padding:3px;background:#0d131c;border:1px solid var(--line);border-radius:2px;gap:3px}
.modeswitch button,.modeswitch button:first-child,.modeswitch button:last-child{border:1px solid transparent;border-radius:2px;min-width:66px;margin:0;background:transparent;color:var(--sub);font-size:11px;letter-spacing:1px}
.modeswitch button.on{background:var(--panel2);color:var(--accent);border-color:var(--accent)}
.ui-control-group{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.ui-project-actions{margin-left:auto;gap:6px}
#btnWav{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#btnRgb{margin-left:9px;border-color:#67739a;color:#ddd9ff}
.ui-transport{padding:6px 8px;gap:8px;align-items:end;background:var(--panel)}
.ui-playback{align-self:center;gap:6px;padding-right:16px;border-right:1px solid var(--line);flex-wrap:nowrap}
.sqbtn,.skip,.recbtn{width:34px;height:34px;min-width:34px;min-height:34px}
#btnPlay{width:42px;min-width:42px;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#btnPlay.on{background:var(--accent-ink);color:var(--accent);border-width:2px}
#btnRec{color:#f47f8e}
#btnRec.on{color:#fff;background:#a82f48}
.ui-position{font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:1px;white-space:nowrap;padding:5px 8px;border:1px solid var(--line);border-radius:2px;background:var(--bg);color:var(--accent)}
.ui-field-wrap{display:flex;flex-direction:column;gap:5px;min-width:0}
.ui-field{color:var(--sub);font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.ui-field-wrap select{max-width:180px}
.ui-field-wrap input[type=range]{margin:4px 0}
.ui-disclosure{min-width:0}
.ui-disclosure>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--sub);min-height:28px;padding:4px 8px;border:1px solid transparent;border-radius:2px;user-select:none}
.ui-disclosure>summary::-webkit-details-marker{display:none}
.ui-disclosure>summary::after{content:'';width:12px;height:12px;background:currentColor;mask:url('icons/chevron-down.svg') center/contain no-repeat;margin-left:6px}
.ui-disclosure[open]>summary::after{transform:rotate(180deg)}
.ui-disclosure>summary:hover,.ui-disclosure[open]>summary{color:var(--txt);background:var(--panel2)}
.ui-disclosure-body{padding:8px;gap:8px;align-items:end}
#uiGenerator{padding:3px 8px;border-bottom:1px solid var(--line);background:var(--chrome);display:flow-root}
#uiGenerator>summary{float:left;width:max-content;color:var(--sub);height:38px;font-size:11px;padding:3px 6px;margin-right:12px}
#uiGenerator>summary::after{transform:rotate(-90deg)}
#uiGenerator[open]>summary::after{transform:rotate(90deg)}
#uiGenerator .ui-disclosure-body{flex-wrap:nowrap;align-items:center;overflow-x:auto;min-height:38px;padding:2px 0;gap:12px}
#uiGenerator .ui-field-wrap{flex-direction:row;align-items:center;flex-shrink:0;gap:6px}
#uiGenerator .ui-field-wrap select{max-width:145px}
#uiGenerator #btnAuto{flex-shrink:0}
.ui-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ui-pad-width{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ui-pad-width input[type=range]{width:78px;margin:0}
.ui-pad-width output{font:11px var(--font-mono);color:var(--sub);min-width:38px}
.ui-editor-toolbar{padding:6px 8px;background:var(--bg);gap:7px}
.ui-editor-title{font-size:13px;margin-right:8px}
.ui-edit-hint{color:var(--sub);font-size:10px;margin-right:auto}
.ui-editor-toolbar .ui-field-wrap{flex-direction:row;align-items:center;margin-left:auto;gap:7px}
.ui-editor-toolbar button,.ui-editor-toolbar select{font-size:11px;min-height:29px}
#btnAddTrack{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
#tracks{padding:4px 8px 8px;min-width:260px;background:var(--bg)}
.track{border:1px solid var(--line);border-radius:2px;margin-bottom:6px;overflow:hidden;background:var(--panel)}
.track[data-track]{border-left:3px solid var(--mk,var(--accent))}
.thead{padding:9px 10px;gap:7px;background:#1a2432;border-bottom:1px solid var(--line)}
.thead .tname{font-size:13px;min-width:54px}
.thead .tkind{color:var(--sub);font-size:10px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thead button,.thead select,.thead input[type=number]{font-size:11px;min-height:28px}
.thead .tvol{width:72px}
.thead .nv-sel{margin-left:0}
.thead .tchev{min-width:22px;width:22px;border:1px solid var(--line);background:transparent}
.thead .tchev.on{background:transparent;color:var(--sub)}
.thead .tcolor{width:20px;height:20px;min-height:20px}
.thead label.f{font-size:10px}
.thead .trand{margin-left:0}
.ui-track-main{flex:1 1 100%;min-width:0;gap:inherit;align-items:center}
.thead .ui-track-options{margin-left:3px;font-size:11px;min-height:28px;padding:4px 7px;border-color:var(--line);flex-shrink:0;display:inline-flex;align-items:center;gap:6px;color:var(--sub);background:transparent}
.ui-track-options::after{content:'';width:12px;height:12px;background:currentColor;mask:url('icons/chevron-down.svg') center/contain no-repeat;margin-left:6px}
.ui-track-options[aria-expanded=true]::after{transform:rotate(180deg)}
.thead .ui-track-options:hover,.thead .ui-track-options[aria-expanded=true]{color:var(--txt);background:var(--panel2)}
.ui-track-settings{flex:1 1 100%;min-width:0;border-top:1px solid var(--line);padding:9px 0 0;align-items:center;gap:7px}
.ui-track-settings[hidden]{display:none}
.ui-track-settings .grow{display:none}
.tsolo.on{background:#f1c56d!important;color:#231909!important;border-color:#f1c56d!important}
.tmute.on{background:#663044!important;color:#ffd9e2!important;border-color:#db7799!important}
.gridwrap{padding:10px 10px 12px 0;scrollbar-color:#566980 var(--bg)}
.gridwrap.collapsed{padding-left:0}
/* Keep the sticky label's containing row as wide as the full note timeline. */
.grow-row{width:max-content;min-width:100%;margin-bottom:4px;align-items:stretch}
.cells{gap:4px}
#tracks .cells{flex:0 0 auto}
#tracks .cell,#fxTrkGrid .cell{width:var(--pad-width,28px);flex:0 0 var(--pad-width,28px)}
.cell,.melodic .cell{width:29px;height:23px;border-radius:4px;border-color:#42516a;position:relative;transition:background-color .12s,border-color .12s}
.cell.on{background:color-mix(in srgb,var(--mk,var(--accent)) 65%,#162133);border-color:var(--mk,var(--accent))}
.cell.held{background:color-mix(in srgb,var(--mk,var(--accent)) 24%,#192331);border-color:color-mix(in srgb,var(--mk,var(--accent)) 38%,var(--line))}
.cell.unfit{opacity:.5}
.cell:hover:not(.ro){outline:1px solid var(--mk,var(--accent));outline-offset:1px;background:color-mix(in srgb,var(--mk,var(--accent)) 30%,var(--cell))}
.cell.ph,.cell.on.ph{box-shadow:none;transition:none}
.cell.ph::after{content:'';position:absolute;inset:1px auto 1px 0;width:2px;background:#f3f6ff;pointer-events:none}
/* A neutral position marker remains even with LEDs disabled. Animations own their glow. */
.rgb-enabled .cell.ph:not(.rcell),.rgb-enabled .cell.on.ph{transition:none}
.rowlabel{flex-basis:58px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;color:#b1c2d9;background:var(--panel);border-color:var(--line)}
.rowlabel.perc-lab{justify-content:flex-start}
.perc-lab .lname{max-width:52px}
.lrm{width:16px;min-height:16px;height:16px;opacity:.65}
.lrm:focus-visible,.grow-row:hover .lrm{opacity:1}
.cell.mini{height:30px}.cell.mini.perc{height:12px}
.track.ruler{position:sticky;top:0;z-index:5;background:var(--bg);border:1px solid transparent;border-left-width:3px;margin-bottom:6px;border-radius:0}
.ruler .gridwrap{padding-top:5px;padding-bottom:5px}
.ruler .rowlabel{background:var(--bg)}
.ruler .cell{height:23px;border:0;border-left:1px solid #50647e;background:transparent;border-radius:0}
.rbar{font-size:12px;color:var(--sub)}
#musicRight{border:1px solid var(--line);border-right:0;background:var(--panel);border-radius:0;margin-bottom:6px;min-width:220px}
#musicPrev,#musicReg{padding:8px;gap:6px}
.fx-col-h{font-size:12px;color:var(--txt);font-weight:650;padding-bottom:8px;border-bottom:1px solid var(--line);letter-spacing:.04em}
.fx-spr-view{border-radius:2px;background:#0b1018;border:1px dashed #44536a}
.fx-spr-note,.fx-note{line-height:1.6;color:var(--sub)}
.fx-spr-ctrl{flex-wrap:wrap}
.mreg-sub{font-size:11px;color:var(--sub);margin-bottom:5px}
.fx-empty{padding:16px 5px;line-height:1.8}
.fx-cat,.fx-saved-btn{text-align:left;padding:8px 10px;font-size:12px}
.fx-cat{border-left:3px solid transparent}
.fx-cat.on{background:#243f50;color:#baf4fb;border-color:var(--accent);border-left-color:var(--accent)}
.mreg-cat{padding-right:10px}.mreg-preset{padding-left:2px}
.ui-sidebar-hidden #musicRight,.ui-sidebar-hidden #mzCol{display:none}
#foot{padding:0;gap:0;display:block;border-top:1px solid var(--line);background:var(--chrome)}
body.fx-mode #foot{display:block}
.ui-io-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:7px 18px;border-bottom:1px solid var(--line)}
.ui-io-row>.ui-field-wrap{flex-direction:row;align-items:center}
.ui-io-row .ui-disclosure{position:relative}
.ui-io-row .ui-disclosure-body{position:absolute;bottom:calc(100% + 8px);left:0;width:350px;z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:8px;max-height:60vh;overflow:auto}
.ui-status-row{padding:6px 18px;min-height:38px;gap:14px}
.ui-support{margin-left:auto;gap:5px}
.ui-support .ui-field-wrap{flex-direction:row;align-items:center;margin-right:7px}
.ui-support button{background:transparent;color:var(--sub);font-size:11px}
.ui-support button:hover{color:var(--txt);background:#2b394d}
.ui-shortcut{font-size:10px;color:var(--sub);border:1px solid var(--line);border-radius:4px;padding:3px 6px}
.ui-muted{color:var(--sub);font-size:11px}
.ui-icon{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ui-icon::before{content:''!important;display:inline-block;flex:0 0 15px;width:15px!important;height:15px!important;background:currentColor!important;border:0!important;margin:0!important;mask:var(--icon) center/contain no-repeat;transform:none!important;pointer-events:none}
.ui-icon.skip::after{display:none}
.sqbtn.play.ui-icon::before{mask-image:url('icons/play.svg')}
.sqbtn.stop.ui-icon::before{mask-image:url('icons/square.svg')}
.ui-symbol{font-size:0!important;gap:0}
.tchev.ui-icon::before{transition:transform .15s;transform:rotate(-90deg)!important}
.tchev.ui-icon.on::before{transform:rotate(0deg)!important}
body.fx-mode #fxPanel{padding:8px;gap:8px}
.fx-cols{gap:4px}
.fx-mid{padding:0 12px}
.fx-params{gap:8px}
.fx-row{padding:8px 0;border-bottom:1px solid var(--line)}
.fx-controls{flex-wrap:wrap}
.fx-note{font-size:11px}
.fx-saved{padding:0 12px}
.fx-track-strip{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:8px}
.fx-track-strip .gridwrap{max-height:230px}
.fx-track-strip .cell{width:27px}
.modal-box{border-color:var(--line);background:var(--panel)}
.kitmenu{padding:5px;border-radius:2px;max-height:80vh;overflow:auto}
.kititem{min-height:31px}
.rgb-dialog{width:min(530px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:12px;background:#161e2c;color:var(--txt);border:1px solid #53627c;border-radius:2px}
.rgb-dialog::backdrop{background:#070b14b8}
.rgb-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ui-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:#99aecb}
.rgb-header h2{margin:5px 0 0;font-size:15px;letter-spacing:0}
#rgbClose{font-size:11px;background:transparent}
.rgb-description{font-size:12px;color:var(--sub);line-height:1.5;margin:8px 0}
.rgb-preview{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;padding:8px;border:1px solid #34465c;border-radius:2px;background:#0b111d;overflow:hidden}
.rgb-pad{height:28px;background:#223048;border:1px solid #485d79;border-radius:2px}
.rgb-preview-note{font-size:11px;color:var(--sub);margin:7px 0 8px;text-align:center}
.rgb-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rgb-enable{grid-column:1/-1;padding-bottom:12px;border-bottom:1px solid var(--line)}
.rgb-controls .ui-field-wrap{position:relative;gap:8px}
.rgb-controls .ui-field-wrap:has(#rgb-pattern){grid-column:1/-1}
.rgb-controls .ui-field-wrap:has(input[type=range]){grid-column:1/-1;padding-top:2px}
.rgb-controls select{max-width:none;width:100%;height:36px}
.rgb-controls input[type=color]{width:100%;height:36px;padding:3px}
.rgb-controls input[type=range]{width:100%}
.rgb-controls output{position:absolute;right:0;top:0;font-family:var(--font-mono);font-size:12px;color:var(--txt)}
.rgb-controls .ui-field{font-size:11px}
.rgb-presets{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.rgb-presets>.ui-field{width:100%;margin-bottom:2px}
.rgb-preset{font-size:11px;display:flex;align-items:center;gap:6px;flex:1}
.rgb-preset::before{content:'';width:9px;height:9px;border-radius:0;background:var(--swatch)}
.rgb-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.rgb-motion-note{font-size:11px;line-height:1.5;color:var(--sub);margin-bottom:0}
@media(min-width:1600px){.ui-edit-hint{font-size:11px}.ui-transport{gap:19px}.cell,.melodic .cell{width:32px;height:25px}.cell.mini{height:30px}.cell.mini.perc{height:12px}}
@media(max-width:1200px){.brand small{max-width:165px;overflow:hidden;text-overflow:ellipsis}.ui-titlebar{gap:12px}.ui-project-actions button{font-size:11px}.ui-edit-hint{display:none}.ui-transport{gap:10px}.ui-playback{padding-right:10px}.ui-position{font-size:14px;padding:8px}.thead .tkind{display:none}.ui-project-actions{gap:4px}#btnRgb{margin-left:3px}.ui-editor-toolbar{flex-wrap:wrap}}
@media(max-width:900px){body{overflow:auto;min-height:100dvh;height:auto}#topbar{flex-shrink:0}.ui-titlebar{flex-wrap:wrap}.ui-project-actions{margin-left:0}.brand{margin-right:auto}.ui-transport{gap:12px}.ui-playback{border-right:0}.ui-editor-toolbar>.ui-field-wrap{margin-left:0}#musicArea{min-height:420px;overflow:visible;align-items:stretch}#tracks{min-width:0;overflow:auto}#musicRight{flex-basis:240px!important;min-width:190px}#musicPrev{flex-basis:230px!important}#foot{flex-shrink:0}.ui-support{flex-wrap:wrap}.ui-shortcut{display:none}body.fx-mode #fxPanel{min-height:75vh;overflow:visible}.fx-cols{overflow-x:auto;min-height:380px}.fx-mid{min-width:280px}.fx-cats{min-width:125px}.fx-saved{min-width:185px}.fx-sprite{min-width:210px}.fx-track-strip{min-width:0}.ui-io-row .ui-disclosure-body{max-width:calc(100vw - 40px);position:fixed;left:20px;bottom:20px}.ruler .gridwrap{overflow-x:auto}}
@media(max-width:620px){.ui-titlebar,.ui-transport,.ui-editor-toolbar,.ui-io-row,.ui-status-row{padding-left:10px;padding-right:10px}.brand small{display:none}.ui-project-actions{width:100%;gap:5px}.ui-project-actions button{flex:1;padding:5px;font-size:10px}#btnRgb{margin:0}.ui-project-actions button::before{display:none}.ui-playback{flex-basis:100%;padding:0}.ui-playback .chk{font-size:11px}.ui-field-wrap select{max-width:130px}.ui-transport{gap:10px}.ui-transport .ui-field-wrap{flex:1 1 60px}.ui-transport #rngMaster{width:100%}.ui-editor-toolbar{gap:5px}.ui-editor-title{flex-basis:100%}#musicArea{flex-direction:column}#tracks{padding:4px 8px 12px;max-height:65vh;min-height:280px}#mzCol,#mzRow{display:none}#musicRight{flex:none!important;min-height:350px;display:grid;grid-template-columns:1fr 1fr;margin:0 8px 12px;border:1px solid var(--line);border-radius:0}#musicPrev,#musicReg{min-width:0;padding:10px}#musicPrev{border-right:1px solid var(--line)}.mreg-cols{flex-direction:column}.mreg-cat{border:0;padding:0}.mreg-catlist{max-height:110px}.ui-status-row{gap:7px}.ui-support{width:100%;margin:0;gap:2px}.ui-io-row{gap:6px}.ui-io-row .ui-field-wrap select{max-width:115px}.thead{gap:5px}.thead .grow{flex-basis:100%;height:0}.ui-track-settings{gap:6px}.thead .tvol{width:62px}.rgb-dialog{padding:17px}.rgb-header h2{font-size:19px}.rgb-controls{gap:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Keep MIDI/input controls on one line; narrow windows scroll this bar horizontally. */
#foot,body.fx-mode #foot{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;padding:5px 14px;overflow-x:auto;min-height:43px}
#foot .ui-io-row{flex:0 0 auto;flex-wrap:nowrap;padding:0;border:0;gap:8px}
#foot .ui-status-row{display:contents}
#foot .ui-support{flex:0 0 auto;flex-wrap:nowrap;width:auto;margin-left:auto;gap:4px}
#foot .ui-support button,#foot .ui-io-row>button,#foot summary,#footInfo{white-space:nowrap;flex-shrink:0}
#foot .ui-shortcut{display:none}
#foot #selInput{max-width:115px}
#foot #ioStatus{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#foot #ioStatus:empty{display:none}
#foot .ui-disclosure-body{position:fixed;left:8px;bottom:52px;width:350px;max-width:calc(100vw - 16px);max-height:60vh;z-index:30}
#foot #btnDebug,#foot #btnBug{font-size:0;gap:0;width:30px;padding:5px}
@media(max-width:1200px){#footInfo{display:none}}
@media(max-width:620px){#foot{gap:10px;padding-left:10px;padding-right:10px}#uiGenerator{padding-left:10px;padding-right:10px}.ui-editor-toolbar .ui-pad-width{margin-right:auto}}