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

:root { --bg:#cbd0d3; --panel:#e0e3e5; --ink:#34393f; --muted:#606b73; --accent:#a24b4d; --accent-dark:#7f353b; --line:#afb6ba; 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:#7f353b; }
.primary { background:linear-gradient(#b36565,#8e4348); border-color:#80363c; }
.primary:hover { background:#a25055; border-color:#74363b; }
button[aria-pressed="true"] { background:#a24b4d; border-color:#873b40; }
.engine-badge { background:#474b55; border-color:#7e6667; }
.engine-badge span { color:#e4c6c4; }
.nes-monitor { border-color:#6c7263; }
html { scroll-padding-top:var(--nes-monitor-offset,0px); }
.nes-disclosure { min-width:0; margin:0 0 14px; border:1px solid var(--line); border-radius:10px; background:#e8e7e0; }
.nes-disclosure > summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; padding:10px 12px; min-height:38px; cursor:pointer; list-style:none; user-select:none; }
.nes-disclosure > summary::-webkit-details-marker { display:none; }
.nes-disclosure > summary::before { content:'›'; display:inline-block; flex:0 0 auto; font-weight:800; transform:rotate(0deg); }
.nes-disclosure[open] > summary::before { transform:rotate(90deg); }
.nes-disclosure > summary h2,.nes-disclosure > summary h3,.nes-disclosure > summary h4 { margin:0; font-size:.82rem; color:#703d42; }
.nes-disclosure > summary p,.nes-disclosure > summary span { margin:0; color:var(--muted); font-size:.67rem; }
.nes-panel-body { padding:12px; }
.nes-workspace.nes-disclosure { padding:0; }
.nes-disclosure > summary #voiceCapacity { flex:1 1 250px; }
.nes-disclosure .nes-vgm-import { margin:0; border:0; background:transparent; }
.nes-output-options { margin:10px 0 0; background:transparent; }
.nes-output-options .nes-click-guard { margin:0; padding:0 12px 10px; }
.nes-hardware-panel { background:transparent; }
.nes-hardware-panel .nes-hardware-monitor { margin:0; border:0; border-radius:0 0 9px 9px; }
.nes-hardware-panel .nes-hardware-heading h3 { display:none; }
.nes-subsection.nes-disclosure { margin:18px 0 0; padding:10px 0 0; border:0; border-top:1px solid #c7c1c9; border-radius:0; background:transparent; }
.nes-subsection.nes-disclosure > summary { padding:0; min-height:30px; }
.nes-subsection.nes-disclosure > summary h4 { font-size:.76rem; }
.nes-disclosure-body { padding-top:10px; }
.nes-monitor-panel > .nes-monitor { margin:0; border:0; border-radius:0 0 9px 9px; }
.nes-monitor-panel.is-pinned { position:sticky; top:8px; z-index:5; box-shadow:0 4px 14px #34393f33; }
.nes-monitor-panel.is-pinned .monitor-body { min-height:155px; }
.nes-monitor-panel.is-pinned #outputCanvas { height:150px; }
.nes-monitor-panel.is-pinned .monitor-pitch input { height:105px; min-height:85px; }
.nes-keep-monitor { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-left:auto; color:#c7d2d8; font-size:.65rem; }
.nes-click-guard { margin:10px 0 0; color:var(--muted); font-size:.7rem; }
.nes-click-guard label { display:flex; align-items:center; gap:7px; }
.nes-click-guard p { margin:5px 0 0; font-size:.64rem; line-height:1.5; max-width:90ch; }
.nes-vgm-import { margin:0 0 20px; padding:14px; border:1px solid var(--line); border-radius:10px; background:#eeece7; }
.nes-vgm-import .section-heading { margin:0 0 10px; }
.nes-vgm-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:8px 0; min-width:0; }
.nes-vgm-actions .subtext { margin:0; }
#vgmFileName { flex:1 1 200px; min-width:0; overflow-wrap:anywhere; font-size:.76rem; }
#vgmStatus[data-error="true"] { color:#a02f31; }
#dpcmStatus { overflow-wrap:anywhere; margin:8px 0 14px; }
#dpcmStatus[data-error="true"] { color:#a02f31; }
#vgmVoiceWarnings { padding:8px 10px; border-left:3px solid var(--accent); background:#e4ddd4; }
.nes-vgm-filters { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.nes-vgm-filters button { border-radius:999px; }
.nes-vgm-voices { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:7px; }
.nes-vgm-voices button { display:flex; flex-direction:column; gap:5px; align-items:start; padding:10px 12px; text-align:left; overflow-wrap:anywhere; }
.nes-vgm-voices small { font-size:.65rem; font-weight:400; }
#outputCanvas { display:block; width:100%; height:190px; border-radius:8px; }
.nes-workspace { padding:8px 0 0; }
.nes-workspace .section-heading { justify-content:space-between; margin-bottom:10px; }
#voiceCapacity { color:#7f353b; font-weight:650; }
.nes-hardware-monitor { margin:0 0 14px; padding:12px 14px; border:1px solid #9ca6a4; border-radius:9px; background:#e3e8de; min-width:0; }
.nes-hardware-heading,.nes-hardware-channel-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.nes-hardware-heading h3 { margin:0; font-size:.8rem; color:#4e6050; }
#hardwareMonitorStatus,.nes-hardware-channel-heading span { color:#58675f; font-size:.65rem; }
.nes-hardware-channels { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:10px 20px; margin-top:8px; }
.nes-hardware-channel { min-width:0; }
.nes-hardware-channel-heading h4 { margin:0; font-size:.7rem; }
.nes-hardware-metric { display:grid; grid-template-columns:74px minmax(30px,1fr) minmax(32px,auto); align-items:center; gap:8px; margin-top:6px; font-size:.66rem; }
.nes-hardware-value { text-align:right; font-variant-numeric:tabular-nums; }
.nes-hardware-meter { height:8px; overflow:hidden; border-radius:4px; background:#c4cec1; }
.nes-hardware-meter > span { display:block; height:100%; background:#657e5a; }
.nes-hardware-monitor[data-mode="live"] .nes-hardware-meter[data-available="true"] > span { background:#667d4a; }
.nes-hardware-monitor .nes-help { margin:8px 0 0; font-size:.64rem; line-height:1.5; }
.nes-editor { min-width:0; }
.nes-source-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin:0 0 14px; }
.nes-source-bar .nes-field { flex:0 1 390px; }
.nes-source-bar p { flex:1 1 250px; margin:0; color:var(--muted); font-size:.73rem; line-height:1.6; }
.nes-card { min-width:0; border:1px solid #b5b0b6; background:#eeece7; border-radius:10px; padding:17px; }
.nes-card h3 { margin:0 0 15px; font-size:.86rem; color:#873e44; }
.nes-fields { display:flex; flex-wrap:wrap; gap:14px 20px; align-items:end; }
.nes-field { display:flex; flex:0 1 140px; min-width:0; max-width:100%; flex-direction:column; gap:6px; color:var(--muted); font-size:.73rem; }
.nes-field select,.nes-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; }
.nes-choice-group { display:flex; flex-wrap:wrap; gap:5px; width:100%; min-width:0; }
.nes-choice { flex:1 1 auto; min-width:0; min-height:36px; padding:6px 10px; border-radius:999px; white-space:normal; font-size:.73rem; }
.nes-choice[aria-checked="true"] { color:#f7f2fb; background:#a24b4d; border-color:#873b40; box-shadow:inset 0 1px #ffffff24; }
.nes-choice[aria-checked="true"]:hover { background:#b55759; }
.nes-choice-field[data-choice="pulseDuty"],.nes-choice-field[data-choice="waveLevel"] { flex-basis:270px; }
.nes-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; }
.nes-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; }
.nes-stepper-button:hover { border:0; background:#ffffff12; color:#fff; }
.nes-stepper-button:active { background:#ffffff24; }
.nes-field .nes-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; }
.nes-stepper-value.is-dragging { color:#ffc58c; }
.nes-stepper[aria-disabled="true"] { opacity:.5; }
.nes-stepper[aria-disabled="true"] .nes-stepper-value { cursor:default; }
.nes-stepper-value:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.nes-check { flex-direction:row; align-items:center; min-height:34px; flex:0 1 auto; }
.nes-check input { flex:0 0 auto; }
.nes-field output { min-height:20px; color:#7f353b; }
.nes-subsection { margin-top:20px; padding-top:15px; border-top:1px solid #c7c1c9; }
.nes-subsection h4 { margin:0 0 12px; font-size:.76rem; color:#873e44; }
.nes-help { color:var(--muted); font-size:.71rem; line-height:1.6; margin:13px 0 0; max-width:86ch; }
.nes-pan { display:flex; flex-wrap:wrap; gap:12px 24px; padding:14px 4px; align-items:center; }
.nes-pan > span { color:var(--muted); font-size:.73rem; }
.nes-wave-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.nes-wave-heading h3 { margin:0; }
.nes-wave-actions { display:flex; flex-wrap:wrap; gap:6px; }
.nes-wave-actions button { min-height:30px; padding:5px 10px; font-size:.73rem; }
#fdsCanvas { display:block; width:100%; height:190px; border:1px solid #526b7f; border-radius:8px; background:#202831; touch-action:none; cursor:crosshair; }
.nes-wave-readout { margin:8px 0 12px; color:#64675b; font-size:.68rem; font-variant-numeric:tabular-nums; }
#fdsDepthEnvelopePlan { padding:8px 10px; border-left:3px solid #70845c; background:#e1e7d9; line-height:1.6; }
#fdsDepthEnvelopePlan[data-warning="true"] { border-color:#b17b33; background:#eee2cd; color:#70502a; }
.nes-dmc-editor { min-width:0; margin-bottom:17px; }
.nes-dmc-editor > .nes-help:first-of-type { margin:0 0 12px; }
#dmcDacCanvas { display:block; width:100%; height:210px; border:1px solid #526b7f; border-radius:8px; background:#202831; touch-action:none; cursor:crosshair; }
#dmcDacCanvas[data-editable="false"] { cursor:default; }
.nes-dmc-drawing-status { margin:8px 0; }
.nes-dmc-legend { margin:0 0 14px; }
.nes-dmc-navigation { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:12px 0; }
#dmcBitsPage { flex:1 0 100%; text-align:center; color:var(--muted); font-size:.7rem; font-variant-numeric:tabular-nums; }
.nes-dmc-navigation button { min-height:30px; padding:5px 10px; font-size:.7rem; }
.nes-dmc-bit-grid { display:grid; gap:10px; }
.nes-dmc-byte { min-width:0; }
.nes-dmc-byte-label { display:block; margin:0 0 4px; color:var(--muted); font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.nes-dmc-bits { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; }
.nes-dmc-bit { min-width:0; min-height:45px; padding:3px 0; font-size:1rem; line-height:1.2; border-radius:6px; font-variant-numeric:tabular-nums; }
.nes-dmc-bit small { display:block; margin-bottom:2px; font-size:.55rem; font-weight:400; }
.nes-dmc-bit.is-inspected { outline:2px solid #c2985e; outline-offset:1px; }
.nes-dmc-byte[data-padding="true"] { opacity:.65; }
.nes-dmc-bit-readout { min-height:2.8em; font-variant-numeric:tabular-nums; }
@media(max-width:640px) { #dmcDacCanvas { height:190px; } }
.nes-pulse-preview { margin:14px 0 0; height:46px; border:1px solid #b7b8aa; background:#d5ddbd; border-radius:7px; overflow:hidden; }
.nes-pulse-preview svg { display:block; width:100%; height:100%; }
.nes-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:#a24b4d; 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) {
  .nes-card { padding:13px 11px; }
  .nes-fields { gap:12px; }
  .nes-field { flex-basis:calc(50% - 6px); }
  .nes-choice-field[data-choice="pulseDuty"],.nes-choice-field[data-choice="waveLevel"] { flex-basis:100%; }
  .nes-check { flex-basis:auto; }
  .nes-source-bar { gap:9px; }
  .nes-source-bar .nes-field { flex-basis:100%; }
  .nes-source-bar p { flex-basis:100%; }
  #fdsCanvas { height:170px; }
  #outputCanvas { height:170px; }
  .nes-pan { gap:10px 18px; }
}

.nes-triangle-preview { height:70px; border:1px solid #acb5bd; border-radius:7px; background:#d8e0e5; }
.nes-triangle-preview svg { width:100%; height:100%; }
.nes-triangle-preview path { fill:none; stroke:#54768a; stroke-width:2; vector-effect:non-scaling-stroke; }
.nes-wave-actions { margin-bottom:8px; }
.nes-mod-brush { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); }
.nes-mod-brush button { min-width:38px; }
.nes-mod-brush button[data-mod-code="4"] { border-color:#b66e64; }
@media(max-width:640px) { .nes-mod-brush { grid-template-columns:repeat(4,minmax(0,1fr)); } }