@import url('../synth-spu/synth.css');

:root { --bg:#cbc9c3; --panel:#e1dfd9; --ink:#33343a; --muted:#62636a; --accent:#685486; --accent-dark:#514369; --line:#b5b2ae; background:var(--bg); }
body { background:linear-gradient(150deg,#ebe9e3,var(--bg) 75%); }
.synth-shell { background:linear-gradient(145deg,#f0eee8,var(--panel) 38%,#d0cec8); border-color:#a49f9d; box-shadow:inset 0 1px #fffc,inset 0 0 0 5px #d8d5d0,0 15px 40px #38343b24; }
h1 > .product-name { color:#55446d; }
.primary { background:linear-gradient(#7a6597,#5b4878); border-color:#57416e; }
.primary:hover { background:#6d548e; border-color:#513c6b; }
button[aria-pressed="true"] { background:#685486; border-color:#5a4674; }
.engine-badge { background:#514d5d; border-color:#6e6279; }
.engine-badge span { color:#d0c4dc; }
.gb-monitor { border-color:#6c7263; }
.synth-menu-panel { background:#eeece7; }
.synth-icon-button { background:linear-gradient(#f0eee8,#d0cec8); color:var(--accent-dark); border-color:var(--line); }
.synth-icon-button:hover { background:#e1d6ec; border-color:var(--accent); }
.dmg-vgm-import { display:grid; gap:6px; }
#vgmStatus { margin:2px 0 6px; font-size:.7rem; line-height:1.5; overflow-wrap:anywhere; }
#vgmStatus[data-error="true"] { color:#a02f31; }
#outputCanvas { display:block; width:100%; height:190px; border-radius:8px; }
.gb-workspace { padding:8px 0 0; }
.gb-workspace .section-heading { justify-content:space-between; margin-bottom:10px; }
#voiceCapacity { color:#544269; font-weight:650; }
.gb-editor { min-width:0; }
.gb-source-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin:0 0 14px; }
.gb-source-bar .gb-field { flex:0 1 250px; }
.gb-source-bar p { flex:1 1 250px; margin:0; color:var(--muted); font-size:.73rem; line-height:1.6; }
.gb-card { min-width:0; border:1px solid #b5b0b6; background:#eeece7; border-radius:10px; padding:17px; }
.gb-card h3 { margin:0 0 15px; font-size:.86rem; color:#564268; }
.gb-fields { display:flex; flex-wrap:wrap; gap:14px 20px; align-items:end; }
.gb-field { display:flex; flex:0 1 140px; min-width:0; max-width:100%; flex-direction:column; gap:6px; color:var(--muted); font-size:.73rem; }
.gb-field select,.gb-field input[type="number"] { width:100%; max-width:100%; min-height:34px; padding:6px 8px; color:var(--ink); background:#faf9f5; border:1px solid #aaa4b0; border-radius:6px; }
.gb-choice-group { display:flex; flex-wrap:wrap; gap:5px; width:100%; min-width:0; }
.gb-choice { flex:1 1 auto; min-width:0; min-height:36px; padding:6px 10px; border-radius:999px; white-space:normal; font-size:.73rem; }
.gb-choice[aria-checked="true"] { color:#f7f2fb; background:#685486; border-color:#5a4674; box-shadow:inset 0 1px #ffffff24; }
.gb-choice[aria-checked="true"]:hover { background:#765e95; }
.gb-choice-field[data-choice="pulseDuty"],.gb-choice-field[data-choice="waveLevel"] { flex-basis:270px; }
.gb-stepper { display:grid; grid-template-columns:34px minmax(24px,1fr) 34px; align-items:center; width:100%; min-height:38px; border:2px solid #7d8985; border-radius:999px; background:linear-gradient(#3b4140,#303736); color:#f3eee0; box-shadow:inset 0 1px #ffffff14; }
.gb-stepper-button { min-height:32px; padding:0; border:0; border-radius:999px; background:transparent; box-shadow:none; color:inherit; font-size:1.4rem; line-height:1; }
.gb-stepper-button:hover { border:0; background:#ffffff12; color:#fff; }
.gb-stepper-button:active { background:#ffffff24; }
.gb-field .gb-stepper-value { display:block; min-height:26px; line-height:26px; text-align:center; color:inherit; font-size:1.05rem; font-weight:800; user-select:none; cursor:ew-resize; touch-action:none; border-radius:5px; }
.gb-stepper-value.is-dragging { color:#ffc58c; }
.gb-stepper[aria-disabled="true"] { opacity:.5; }
.gb-stepper[aria-disabled="true"] .gb-stepper-value { cursor:default; }
.gb-stepper-value:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.gb-check { flex-direction:row; align-items:center; min-height:34px; flex:0 1 auto; }
.gb-check input { flex:0 0 auto; }
.gb-field output { min-height:20px; color:#55446d; }
.gb-subsection { margin-top:20px; padding-top:15px; border-top:1px solid #c7c1c9; }
.gb-subsection h4 { margin:0 0 12px; font-size:.76rem; color:#5c4a71; }
.gb-help { color:var(--muted); font-size:.71rem; line-height:1.6; margin:13px 0 0; max-width:86ch; }
.gb-pan { display:flex; flex-wrap:wrap; gap:12px 24px; padding:14px 4px; align-items:center; }
.gb-pan > span { color:var(--muted); font-size:.73rem; }
.gb-wave-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.gb-wave-heading h3 { margin:0; }
.gb-wave-actions { display:flex; flex-wrap:wrap; gap:6px; }
.gb-wave-actions button { min-height:30px; padding:5px 10px; font-size:.73rem; }
#waveCanvas { display:block; width:100%; height:190px; border:1px solid #617351; border-radius:8px; background:#283427; touch-action:none; cursor:crosshair; }
.gb-wave-readout { margin:8px 0 12px; color:#64675b; font-size:.68rem; font-variant-numeric:tabular-nums; }
.gb-pulse-preview { margin:14px 0 0; height:46px; border:1px solid #b7b8aa; background:#d5ddbd; border-radius:7px; overflow:hidden; }
.gb-pulse-preview svg { display:block; width:100%; height:100%; }
.gb-pulse-preview path { stroke:#52643b; fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
#codeOutput { flex:1 0 100%; width:100%; min-width:0; max-height:300px; padding:12px; border-radius:8px; border:1px solid #9b93a2; background:#22252b; color:#dce7ce; font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size:2; }
.keyboard-section { margin-top:20px; }
.keyboard-toolbar p { margin:0; }
.keyboard-mount { flex:1 1 0; min-width:0; }
.keyboard-mount .active,.keyboard-mount .is-active,.keyboard-mount [aria-pressed="true"] { background:linear-gradient(#d2bfdf,#ae97bf); border-color:#806194; color:#3d284c; box-shadow:inset 0 -2px #987bab; }
.keyboard-section .toolbar-button.is-selected { background:#685486; border-color:#9986ac; }
footer { line-height:1.65; }
footer p { flex:1 1 600px; }
footer div { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; }
@media(max-width:640px) {
  .gb-card { padding:13px 11px; }
  .gb-fields { gap:12px; }
  .gb-field { flex-basis:calc(50% - 6px); }
  .gb-choice-field[data-choice="pulseDuty"],.gb-choice-field[data-choice="waveLevel"] { flex-basis:100%; }
  .gb-check { flex-basis:auto; }
  .gb-source-bar { gap:9px; }
  .gb-source-bar .gb-field { flex-basis:100%; }
  .gb-source-bar p { flex-basis:100%; }
  #waveCanvas { height:170px; }
  #outputCanvas { height:170px; }
  .gb-pan { gap:10px 18px; }
}

/* Shared Code / Files layout, with the DMG palette. */
.dmg-code-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
.dmg-code-workspace.has-files { grid-template-columns:230px minmax(0,1fr); }
.dmg-main,.dmg-expanded-code,.dmg-input-section,.dmg-code-panel { min-width:0; }
.dmg-files-panel { border:1px solid var(--line); border-radius:10px; padding:12px; background:#eeece7b8; min-width:0; }
.dmg-files-panel[hidden],.dmg-expanded-code[hidden],#synthKeyboardPanel[hidden],#synthCodePanel[hidden] { display:none; }
.dmg-files-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.dmg-files-heading h2 { margin:0; font-size:.78rem; letter-spacing:.15em; }
.dmg-files-toolbar,.dmg-files-actions { display:flex; flex-wrap:wrap; gap:5px; }
.dmg-files-toolbar button,.dmg-files-actions button { min-height:28px; padding:4px 7px; font-size:.7rem; }
.dmg-files-actions { padding-top:9px; margin-top:8px; border-top:1px solid var(--line); }
.dmg-files-status { margin:8px 0 0; font-size:.7rem; overflow-wrap:anywhere; color:var(--muted); }
#dmgFilesTree { min-height:80px; max-height:55vh; overflow:auto; }
#dmgFilesTree .file-tree { list-style:none; margin:0; padding:0; }
#dmgFilesTree .file-tree .file-tree { padding-left:12px; }
#dmgFilesTree li { margin:0; padding:0; }
#dmgFilesTree summary { cursor:pointer; font-size:.75rem; padding:5px 2px; overflow-wrap:anywhere; }
#dmgFilesTree .file-tree-root { font-size:.7rem; color:var(--muted); margin:0 0 6px; padding:5px; border-bottom:1px solid var(--line); }
#dmgFilesTree button { display:block; width:100%; text-align:left; min-height:0; height:auto; padding:6px; border:0; border-radius:6px; background:transparent; color:var(--ink); box-shadow:none; font:inherit; font-size:.74rem; line-height:1.4; overflow-wrap:anywhere; }
#dmgFilesTree button[aria-pressed="true"] { background:transparent; color:var(--ink); box-shadow:none; }
#dmgFilesTree button[aria-selected="true"],#dmgFilesTree button[aria-current="true"] { background:#e4daec; }
#dmgFilesTree button:hover,#dmgFilesTree summary:hover { background:#e7e0eb; }
#dmgFilesTree button:active { background:#e4daec; box-shadow:none; }
#dmgFilesTree button:focus-visible { outline-offset:-2px; }
#dmgFilesTree .file-drop-target { background:#e4daec; outline:1px solid var(--accent); }
.dmg-input-tabs { display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--line); padding-bottom:0; margin-bottom:12px; }
.dmg-input-tabs > button { border-radius:8px 8px 0 0; margin-bottom:-1px; min-height:34px; }
.dmg-input-tabs > button[aria-selected="true"] { background:#e4daec; border-bottom-color:#e4daec; color:#55446d; }
.dmg-input-tabs .dmg-code-expand { margin-left:auto; padding:5px 9px; }
.dmg-input-tabs .dmg-code-expand[hidden] { display:none; }
.dmg-input-options { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; color:var(--muted); font-size:.73rem; }
.dmg-input-options .check-control { display:flex; align-items:center; gap:7px; }
.dmg-code-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.dmg-code-toolbar button { min-height:32px; padding:6px 14px; }
#synthCodeState { font-size:.72rem; color:var(--muted); margin-left:auto; }
.dmg-code-caption { margin:8px 0; }
.dmg-code-editor,.dmg-code-editor-host { box-sizing:border-box; width:100%; height:320px; min-height:240px; border:1px solid var(--line); border-radius:7px; background:#182127; color:#e4edf5; }
.dmg-code-editor-host:not([data-ready="true"]) { display:none; }
.dmg-code-editor { resize:vertical; padding:12px; font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size:2; }
.dmg-code-editor:focus { outline:2px solid #9986ac; outline-offset:1px; }
.dmg-code-console { margin-top:8px; font-size:.73rem; }
.dmg-code-console pre,.dmg-code-error { margin:8px 0 0; overflow:auto; max-height:160px; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
.dmg-code-error { color:#ac302b; }.dmg-code-error:empty { display:none; }
.dmg-code-workspace.is-code-expanded .dmg-main { display:none; }
.dmg-code-workspace.is-code-expanded .dmg-expanded-code { grid-column:1/-1; }
.dmg-code-workspace.has-files.is-code-expanded .dmg-expanded-code { grid-column:2; }
.is-code-expanded .dmg-code-editor,.is-code-expanded .dmg-code-editor-host { height:65vh; }
.dmg-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#dmgFileNameDialog { width:min(420px,90vw); border:1px solid var(--line); border-radius:10px; background:var(--paper,#eeece7); color:inherit; padding:18px; }
#dmgFileNameDialog input { box-sizing:border-box; width:100%; margin:8px 0 14px; padding:8px; }
.dmg-file-context-menu { position:fixed; z-index:1000; display:grid; gap:5px; min-width:210px; max-width:calc(100vw - 8px); max-height:calc(100vh - 8px); overflow:auto; box-sizing:border-box; padding:8px; border:1px solid var(--line); border-radius:10px; background:#eeece7; color:var(--ink); box-shadow:0 8px 24px #26344135; }
.dmg-file-context-menu[hidden] { display:none; }
.dmg-file-context-menu button { width:100%; min-height:32px; padding:6px 12px; text-align:left; font-size:.8rem; box-shadow:none; }
.dmg-file-context-menu button:hover:not(:disabled),.dmg-file-context-menu button:focus-visible { background:#e4daec; }
@media(max-width:760px) { .dmg-code-workspace.has-files { grid-template-columns:minmax(0,1fr); }.dmg-code-workspace.has-files.is-code-expanded .dmg-expanded-code { grid-column:1; }#dmgFilesTree { max-height:240px; }.dmg-code-editor { font-size:12px; } }

.dmg-code-live-tools { margin:0 0 16px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#eeece7; }
.dmg-code-live-tools[hidden] { display:none; }
.dmg-live-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.dmg-live-controls label { display:flex; align-items:center; gap:7px; font-size:.75rem; color:var(--muted); }
.dmg-live-controls select { max-width:100%; padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:#faf9f5; color:var(--ink); }
#dmgLiveStatus,#dmgLiveReadout { margin:7px 0; font-size:.72rem; line-height:1.5; overflow-wrap:anywhere; color:var(--muted); font-variant-numeric:tabular-nums; }
.dmg-inline-help { font-size:.73rem; color:var(--muted); margin:8px 0; }
.dmg-inline-help summary { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid var(--line); border-radius:50%; cursor:pointer; font-weight:750; }
.dmg-inline-help p { max-width:80ch; line-height:1.6; }
#voiceEditor[data-readonly="true"] { outline:1px solid #9986ac; outline-offset:4px; border-radius:8px; }
.dmg-file-context-menu,.spu-file-context-menu { background:#eeece7; }
.dmg-file-context-menu button:hover:not(:disabled),.spu-file-context-menu button:hover:not(:disabled) { background:#e4daec; }

/* Reference song transport stays above the same monitor and sound editor. */
.dmg-song-player { min-width:0; margin:0 0 16px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#eeece7; }
.dmg-song-player[hidden] { display:none; }
.dmg-song-transport { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.dmg-song-transport>label { display:flex; align-items:center; flex:1 1 260px; min-width:0; gap:8px; font-size:.75rem; color:var(--muted); }
.dmg-song-transport select { flex:1; min-width:0; width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:#faf9f5; color:var(--ink); text-overflow:ellipsis; }
.dmg-song-transport>button { min-height:32px; padding:6px 12px; }
.dmg-song-transport .dmg-inline-help { margin:0 0 0 auto; }
#dmgSongPosition { font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.dmg-song-seek { display:flex; align-items:center; gap:10px; margin:6px 0; min-width:0; }
#dmgSongSeek { flex:1; min-width:0; width:100%; height:20px; accent-color:#69587e; }
#dmgSongSeekPosition { flex:0 0 auto; min-width:5.5ch; text-align:right; font-size:.7rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.dmg-song-channels { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:8px 0 10px; min-width:0; }
.dmg-song-channels>span { font-size:.7rem; color:var(--muted); }
.dmg-song-channel-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); flex:1 1 280px; gap:5px; min-width:0; }
.dmg-song-channel-buttons button { min-width:0; min-height:30px; padding:5px 6px; font-size:.67rem; line-height:1.35; }
.dmg-song-channel-buttons button[aria-pressed="true"] { color:#fff; }
.dmg-song-channel-buttons button[aria-pressed="false"] { color:var(--muted); background:#e4e1dd; box-shadow:none; }
#dmgSongStatus,#dmgSongLiveStatus,#dmgSongReadout { margin:7px 0; font-size:.72rem; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
#dmgSongStatus[data-error="true"] { color:#a02f31; }
#dmgSongLiveStatus:empty,#dmgSongReadout:empty { display:none; }
@media(max-width:640px) { .dmg-song-transport>label { flex-basis:100%; }.dmg-song-player { padding:10px; } }

#dmgSongCaptureButton { min-height:30px; padding:5px 10px; font-size:.73rem; }
#dmgSongAuditionStatus { margin:7px 0; font-size:.72rem; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
#dmgSongAuditionStatus:empty { display:none; }