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

/* A folded card keeps its summary height beside an open grid neighbour. */
.sid-card:not([open]) { align-self:start; }

:root { --bg:#d7cdb5; --panel:#ebe3d0; --ink:#3d352b; --muted:#746857; --accent:#167f82; --accent-dark:#13696c; --line:#bdb097; background:var(--bg); }
body { background:linear-gradient(145deg,#f3edde,var(--bg) 75%); }
main { max-width:1160px; padding-top:18px; }
.masthead { margin-bottom:16px; }
.synth-shell { padding:23px; border-color:#a39880; background:linear-gradient(145deg,#faf5e7,var(--panel) 42%,#dcd1b9); box-shadow:inset 0 1px #fffc,inset 0 0 0 5px #e2d8c2,0 15px 40px #5e4a2826; }
.synth-heading { padding-bottom:12px; }
.product-identity { flex:1 1 auto; gap:18px; }
.product-icon { object-fit:contain; border-radius:20px; box-shadow:0 3px 8px #5e422b30; }
h1 { font-size:clamp(1.9rem,4vw,2.7rem); } h1>.product-name { color:#574635; }
.description { margin-top:7px; } .eyebrow { margin-bottom:7px; color:#837057; }
.engine-badge { color:#f3eada; background:#5b4b3c; border-color:#7c6851; font-size:1.1rem; }
.engine-badge span { color:#d8c5a6; }
.primary { background:linear-gradient(#239d9c,#14777a); border-color:#136d70; }
.primary:hover { background:#19898b; border-color:#0f6265; }
button[aria-pressed="true"] { background:#167f82; border-color:#126b6e; }
.audio-toolbar { margin-top:16px; }
#masterVolume[data-boosted="true"] { accent-color:#e18430; }
#masterVolumeValue[data-boosted="true"] { color:#a75216; font-weight:800; }
.audio-status { margin-top:9px; color:#5d6f65; }
.audio-status[data-error="true"] { color:#a1392c; }
.sid-monitor { margin-bottom:16px; border-color:#81745f; background:#273330; }
.sid-monitor>p { color:#b7c9c0; margin:6px 0 9px; font-size:.7rem; }
.sid-monitor .visual-mode-controls button[aria-pressed="true"] { background:#285b51; border-color:#7fb5a8; }
.monitor-body { min-height:165px; }
#outputCanvas { width:100%; height:165px; display:block; }
.monitor-pitch { flex-basis:51px; border-color:#4f6b63; background:#172d29; }
.monitor-pitch input { height:112px; min-height:90px; accent-color:#64b7ac; }
.sid-workspace>.section-heading { margin:0 0 10px; justify-content:space-between; }
#patchStatus { font-size:.7rem; color:var(--muted); margin:0; }
#patchStatus[data-busy="true"] { color:#a26222; }
.sid-editor { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.sid-card { min-width:0; border:1px solid var(--line); border-radius:9px; background:#f7f1e3b8; }
.sid-card>summary { cursor:pointer; padding:12px 14px; font-size:.83rem; font-weight:800; color:#5a4a37; }
.sid-card>summary { position:relative; padding-right:50px; }
.sid-help-button { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; min-width:26px; min-height:26px; padding:0; border:1px solid #9d9c85; border-radius:50%; background:#f3efdf; color:#526d64; font-size:.78rem; font-weight:800; cursor:pointer; }
.sid-card>summary>.sid-help-button { position:absolute; right:11px; top:8px; }
.sid-help-panel { margin-top:8px; padding:0 10px 10px; border-left:2px solid #93a393; }
.sid-help-panel[hidden] { display:none; }
.sid-inline-help { margin-top:8px; }
.sid-inline-help>.sid-help-button { list-style:none; }
.sid-inline-help>.sid-help-button::-webkit-details-marker { display:none; }
.sid-card-content { min-width:0; padding:2px 14px 14px; }
.sid-wide { grid-column:1/-1; }
.sid-fields { display:flex; flex-wrap:wrap; align-items:end; gap:12px 14px; }
.sid-field { display:flex; min-width:0; max-width:100%; flex:1 1 125px; flex-direction:column; gap:6px; font-size:.72rem; color:var(--muted); }
.sid-field>span { line-height:1.35; }
.sid-choice-field { flex-basis:100%; }
.sid-choice-group { display:flex; flex-wrap:wrap; gap:5px; }
.sid-choice-group button { flex:1 1 auto; min-width:0; padding:6px 10px; min-height:33px; font-size:.72rem; border-radius:999px; }
.sid-choice-group button[aria-checked="true"],.sid-choice-group button[aria-pressed="true"] { background:#167f82; border-color:#126b6e; color:#f6fbf5; }
.sid-check { flex-direction:row; align-items:center; flex-basis:100%; min-height:28px; color:#4f5d4a; font-weight:700; }
.sid-slider { flex-basis:calc(50% - 8px); }
.sid-slider input { width:100%; margin:0; min-height:23px; }
.param-control { display:grid; grid-template-columns:30px minmax(25px,1fr) 30px; align-items:center; width:100%; min-height:36px; border:2px solid #7c8e7e; border-radius:999px; background:linear-gradient(#42483d,#32392f); color:#f6f0da; box-shadow:inset 0 1px #fff2; }
.param-button,.param-value { background:transparent; border:0; border-radius:999px; box-shadow:none; color:inherit; padding:0; min-height:30px; line-height:1; }
.param-button { font-size:1.35rem; }.param-value { font-size:.96rem; font-weight:850; cursor:ew-resize; touch-action:none; }
.param-control button:hover { color:#fff; border:0; background:#fff1; }.param-control button:active { background:#fff2; }
.param-value.is-dragging { color:#ffd194; }
.sid-field[data-disabled="true"] { opacity:.5; }
.sid-help { font-size:.7rem; color:var(--muted); line-height:1.55; margin:10px 0 0; }
.sid-help[data-warning="true"] { color:#9a5724; }
.sid-advanced { padding-top:10px; }.sid-advanced>summary { font-size:.7rem; color:var(--muted); cursor:pointer; margin-bottom:8px; }
.sid-capacity { font-size:.71rem; font-weight:750; color:#276f67; margin:10px 2px 12px; overflow-wrap:anywhere; }
.preset-tools { margin:12px 0; }.preset-actions { align-items:center; gap:9px; }
.sid-import-tools { margin:0 0 16px; }
.sid-import-actions,.sid-import-options { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.sid-import-actions button { min-height:36px; padding:7px 13px; font-size:.76rem; }
.sid-import-options { margin-top:10px; justify-content:space-between; }
.sid-import-subtune { display:flex; align-items:center; gap:8px; font-size:.74rem; color:var(--muted); }
.sid-import-subtune button { min-width:32px; min-height:32px; padding:3px 9px; }
.sid-import-subtune output { min-width:48px; text-align:center; font-weight:750; }
.sid-import-models { flex:1 1 230px; max-width:390px; }
.sid-import-voices { margin-top:12px; }
.sid-import-voices button[data-available="false"] { border-style:dashed; }
.sid-import-status[data-error="true"],.sid-import-preview[data-unavailable="true"] { color:#a1392c; }
.sid-import-preview { white-space:pre-line; overflow-wrap:anywhere; }
#sidImportInfo { overflow-wrap:anywhere; }
.sid-live-tools { margin:0 0 14px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:#f7f1e3b8; }
.sid-live-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.sid-live-controls .sid-check { display:flex; flex:0 1 auto; margin:0; font-size:.75rem; }
.sid-live-channels { display:flex; flex:0 1 440px; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0; }
.sid-live-channel-label { font-size:.7rem; font-weight:700; color:#4f5d4a; }
.sid-live-channels .sid-choice-group { flex:1 1 250px; }
.sid-keyboard-mode { display:flex; flex:0 1 255px; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0; }
.sid-keyboard-mode .sid-choice-group { flex:1 1 155px; }
.sid-keyboard-mode[hidden],.sid-choice-group button[hidden] { display:none; }
#sidLiveView { margin-top:12px; min-width:0; }
#sidLiveView[hidden] { display:none; }
.sid-editor[data-observing="true"] button:disabled,.sid-editor[data-observing="true"] input:disabled { opacity:1; cursor:default; }
.sid-editor[data-observing="true"] .param-value[data-changed="true"] { color:#ffd194; }
.sid-editor[data-observing="true"] [data-changed="true"] { outline:1px solid #c58e4e; outline-offset:1px; }
#voiceEditor input[type="range"][data-unavailable="true"] { opacity:0; }
.sid-live-view { padding:10px 2px; border-top:1px solid var(--line); }
.sid-live-heading { margin:0 0 6px; font-size:.8rem; color:#316b62; }
.sid-live-state,.sid-live-notice { font-size:.71rem; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.sid-live-readouts { display:flex; flex-wrap:wrap; gap:8px 16px; margin:8px 0; }
.sid-live-readout { min-width:0; flex:1 1 140px; }
.sid-live-readout.sid-live-wide { flex-basis:100%; }
.sid-live-readout dt { color:var(--muted); font-size:.65rem; }
.sid-live-readout dd { margin:3px 0 0; color:#274f48; font-size:.72rem; font-weight:700; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.sid-live-readout dd[data-changed="true"] { color:#a24e16; }
.sid-live-help>summary { display:inline-flex; align-items:center; justify-content:center; list-style:none; width:26px; height:26px; border:1px solid #9d9c85; border-radius:50%; font-size:.78rem; font-weight:800; color:#526d64; cursor:pointer; }
.sid-live-help>summary::-webkit-details-marker { display:none; }
.preset-actions .sid-help { flex-basis:100%; margin:0; }
.instrument-name-control { flex:1 1 210px; }.instrument-name-control input { min-width:80px; width:150px; flex:1; border-color:var(--line); background:#fffaf0; }
#codeOutput { flex:1 0 100%; width:100%; min-width:0; max-height:260px; padding:12px; border:1px solid #758076; border-radius:7px; background:#202b28; color:#d5eadc; font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.keyboard-section { margin-top:16px; }.keyboard-section>.section-heading { margin-bottom:8px; }.keyboard-toolbar p { margin:0; }
.keyboard-mount { flex:1 1 0; min-width:0; }.performance-keyboard { margin-top:8px; }
.keyboard-mount .active,.keyboard-mount .is-active,.keyboard-mount [aria-pressed="true"] { background:linear-gradient(#abd6bf,#7fb4a1); border-color:#438974; color:#1f493c; box-shadow:inset 0 -2px #589a83; }
.keyboard-section .toolbar-button.is-selected { background:#167f82; border-color:#268487; }
footer { line-height:1.6; margin-top:18px; }footer p { flex:1 1 600px; }footer div { display:flex; flex-wrap:wrap; gap:5px; }
@media(max-width:640px) {
  main { padding:12px 8px 20px; }.synth-shell { padding:15px 11px; }.masthead { margin:0 4px 12px; }
  .title-row { gap:10px; }.engine-badge { padding:9px 10px; font-size:.9rem; }.engine-badge span { font-size:.43rem; }
  .product-identity { gap:12px; }.product-icon { width:72px; height:72px; border-radius:14px; }
  .sid-editor { grid-template-columns:minmax(0,1fr); gap:10px; }.sid-wide { grid-column:auto; }
  .sid-card>summary { padding:10px 11px; }.sid-card-content { padding:2px 11px 12px; }.sid-fields { gap:10px; }
  .sid-field { flex-basis:calc(50% - 5px); }.sid-choice-field,.sid-check { flex-basis:100%; }
  .sid-slider { flex-basis:100%; }.audio-toolbar { gap:12px; }.master-control { width:100%; justify-content:flex-end; }
  .monitor-body { min-height:150px; }#outputCanvas { height:150px; }.monitor-pitch input { min-height:85px; height:95px; }
  .keyboard-section>.section-heading { align-items:start; }.keyboard-section>.section-heading p { font-size:.64rem; }
}
@media(max-width:360px) { .product-identity { gap:10px; }.product-icon { width:60px; height:60px; border-radius:12px; } }

/* Code and Files retain the SID editor's existing palette and controls. */
.sid-code-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
.sid-code-workspace.has-files { grid-template-columns:230px minmax(0,1fr); }
.sid-main,.sid-expanded-code,.sid-input-section,.sid-code-panel { min-width:0; }
.sid-files-panel { border:1px solid var(--line); border-radius:10px; padding:12px; background:#f7f1e3b8; min-width:0; }
.sid-files-panel[hidden],.sid-expanded-code[hidden],#synthKeyboardPanel[hidden],#synthCodePanel[hidden] { display:none; }
.sid-files-toolbar { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.sid-files-toolbar button { min-height:30px; padding:5px 9px; font-size:.7rem; }
.sid-files-path,.sid-files-status { font-size:.7rem; overflow-wrap:anywhere; color:var(--muted); }
#sidFilesTree { min-height:80px; max-height:55vh; overflow:auto; margin:8px 0; }
#sidFilesTree .file-tree { list-style:none; margin:0; padding-left:12px; }
#sidFilesTree > .file-tree { padding-left:0; }
#sidFilesTree li { margin:0; padding:0; }
#sidFilesTree summary { cursor:pointer; font-size:.72rem; padding:4px 0; }
#sidFilesTree .file-tree-root { font-size:.7rem; color:var(--muted); margin:6px 0; }
#sidFilesTree button { display:block; width:100%; text-align:left; min-height:30px; padding:5px 8px; font-size:.72rem; overflow-wrap:anywhere; border-color:transparent; background:transparent; }
#sidFilesTree button[aria-selected="true"],#sidFilesTree button[aria-current="true"] { background:#d9e9df; border-color:#6b9c8d; }
.sid-input-tabs { display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--line); padding-bottom:0; margin-bottom:12px; }
.sid-input-tabs > button { border-radius:8px 8px 0 0; margin-bottom:-1px; min-height:34px; }
.sid-input-tabs > button[aria-selected="true"] { background:#d9e9df; border-bottom-color:#d9e9df; color:#185e54; }
.sid-input-tabs .sid-code-expand { margin-left:auto; padding:5px 9px; }
.sid-input-tabs .sid-code-expand[hidden] { display:none; }
.sid-code-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.sid-code-toolbar button { min-height:32px; padding:6px 14px; }
#synthCodeState { font-size:.72rem; color:var(--muted); margin-left:auto; }
.sid-code-caption { margin:8px 0; }
.sid-code-editor,.sid-code-editor-host { box-sizing:border-box; width:100%; height:320px; min-height:240px; border:1px solid var(--line); border-radius:7px; background:#172320; color:#edf1e5; }
.sid-code-editor-host:not([data-ready="true"]) { display:none; }
.sid-code-editor { resize:vertical; padding:12px; font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size:2; }
.sid-code-editor:focus { outline:2px solid #679c8a; outline-offset:1px; }
.sid-code-console { margin-top:8px; font-size:.73rem; }
.sid-code-console pre,.sid-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; }
.sid-code-error { color:#a1392c; }.sid-code-error:empty { display:none; }
.sid-code-workspace.is-code-expanded .sid-main { display:none; }
.sid-code-workspace.is-code-expanded .sid-expanded-code { grid-column:1/-1; }
.sid-code-workspace.has-files.is-code-expanded .sid-expanded-code { grid-column:2; }
.is-code-expanded .sid-code-editor,.is-code-expanded .sid-code-editor-host { height:65vh; }
.sid-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; }
#sidFileNameDialog { width:min(420px,90vw); border:1px solid var(--line); border-radius:10px; background:var(--paper,#f5eedf); color:inherit; padding:18px; }
#sidFileNameDialog input { box-sizing:border-box; width:100%; margin:8px 0 14px; padding:8px; }
#sidFileTextEditor { box-sizing:border-box; width:100%; min-height:170px; padding:8px; resize:vertical; font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
@media(max-width:760px) { .sid-code-workspace.has-files { grid-template-columns:minmax(0,1fr); }.sid-code-workspace.has-files.is-code-expanded .sid-expanded-code { grid-column:1; }#sidFilesTree { max-height:240px; }.sid-code-editor { font-size:12px; } }