/* Self-contained instrument face; never inherit the generator's form sizing. */
#housekeysSynth{grid-column:1/-1;justify-self:stretch;min-width:0;margin:0 20px 22px;color:#e8eee9;--synth-accent:#bef17d;--synth-line:#344046}
#housekeysSynth *{box-sizing:border-box}.hk-synth{max-width:1120px;margin:auto;overflow:hidden;border:1px solid #4a555a;border-radius:12px;background:linear-gradient(140deg,#1a2227,#11181c);box-shadow:0 18px 50px #0003,inset 0 1px #ffffff0b}
.hk-synth>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 22px;cursor:pointer;list-style:none;border-bottom:1px solid transparent;background:#141b1f}.hk-synth[open]>summary{border-bottom-color:#343f44}.hk-synth>summary::-webkit-details-marker{display:none}.synth-brand{display:flex;align-items:center;gap:12px}.synth-brand>i{display:grid;place-items:center;font-size:30px;font-style:normal;color:var(--synth-accent);width:32px;height:36px}.synth-brand strong{display:block;font-size:23px;letter-spacing:-.06em;line-height:1.2;font-weight:650}.synth-brand strong b{font-weight:400;color:#b7c6c8}.synth-brand small{display:block;font-size:8px;letter-spacing:.18em;color:#81938e;margin-top:5px}.synth-summary-action{font-size:11px;color:#a8bab4}.synth-content{padding:0 22px 14px;font-size:13px}
#housekeysSynth label{font-weight:400;letter-spacing:0;margin:0;color:#b4c3c4;font-size:12px}#housekeysSynth button,#housekeysSynth select,#housekeysSynth input:not([type=range]):not([type=checkbox]){font:inherit;color:#e5ecea;background:#202a2f;border:1px solid #465259;border-radius:6px;padding:0 12px;height:40px;min-height:40px;margin:0}#housekeysSynth button{cursor:pointer;white-space:nowrap}#housekeysSynth button:hover{border-color:#a6cb7d}#housekeysSynth button:disabled{opacity:.45;cursor:default}#housekeysSynth :focus-visible{outline:2px solid var(--synth-accent);outline-offset:4px}
.synth-preset-bar{display:flex;align-items:center;gap:16px;padding:16px 0}.synth-preset{display:flex;align-items:center;gap:10px}.synth-preset>label{font-size:8px!important;letter-spacing:.12em!important;color:#839491!important}.synth-preset>select{width:160px!important;background:#0e171a!important}.synth-patch-display{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px;padding:0 16px;border-left:1px solid var(--synth-line)}.synth-patch-display span{font-family:ui-monospace,monospace;color:#cae7a6;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}.synth-patch-display small{font-size:8px;letter-spacing:.1em;color:#728780}.synth-preset-actions{display:flex;gap:7px}.synth-preset-actions button{font-size:11px!important;min-height:36px!important;height:36px!important}.synth-quick-start{font-size:11px;color:#99a9ad;margin:0 0 16px}
.synth-workspace{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;padding:20px 0;border-top:1px solid #303c41;border-bottom:1px solid #303c41}.synth-canvas-panel{min-width:0;padding:0 16px;border-right:1px solid #303c41}.synth-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.synth-section-title h3{font-size:9px;letter-spacing:.15em;margin:0;font-weight:500;color:#90a39d}.synth-section-title>span{font-size:10px;color:#b8d794}.synth-canvas{position:relative;height:150px;touch-action:none;cursor:crosshair;margin:23px 14px 0;border:1px solid #49624f;border-radius:7px;background:radial-gradient(ellipse,#4c69372b,transparent 80%),linear-gradient(#a8ca8810 1px,transparent 1px),linear-gradient(90deg,#a8ca8810 1px,transparent 1px);background-size:auto,20px 20px,20px 20px;box-shadow:inset 0 2px 12px #0003}.synth-canvas svg{position:absolute;width:100%;height:100%;pointer-events:none}.synth-canvas path{fill:none;stroke:#bff17c;stroke-width:2}.synth-canvas .synth-orbit{stroke:#8bb76b33;transform:translateY(10px)}#housekeysSynth #synthPoint{position:absolute;width:44px;height:44px;min-height:44px;padding:0;transform:translate(-50%,-50%);border:1px solid #cbf894;border-radius:50%;background:#b5f6771a;box-shadow:0 0 24px #a5f66c15;touch-action:none}#synthPoint span{display:block;width:9px;height:9px;border-radius:50%;margin:auto;background:#d0ff9c}.canvas-label{position:absolute;font-size:7px;letter-spacing:.15em;color:#91a18e;pointer-events:none}.canvas-label.bright{top:-15px;left:39%}.canvas-label.dark{bottom:-15px;left:41%}.canvas-label.warm{left:-18px;top:42%;writing-mode:vertical-rl;transform:rotate(180deg)}.canvas-label.glass{right:-18px;top:40%;writing-mode:vertical-rl}#synthCanvasHelp{font-size:9px;color:#7f9494;text-align:center;margin:24px 0 0}
.synth-macros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:12px;min-width:0}.synth-macro{text-align:center;min-width:0}.synth-macro>label{display:block;font-size:12px!important;color:#e1e9e6!important;margin-bottom:12px!important}.synth-dial{--turn:135deg;--pointer:0deg;position:relative;width:86px;height:86px;margin:0 auto 10px}.synth-dial-face{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 225deg,var(--synth-accent) 0 var(--turn),#3a484e var(--turn) 270deg,transparent 270deg 360deg)}.synth-dial-face:before{content:'';position:absolute;inset:5px;border-radius:50%;background:linear-gradient(140deg,#3a454c,#182126 65%);border:1px solid #11191d;box-shadow:inset 0 2px 3px #ffffff17,0 4px 7px #0007}.synth-dial-face i{position:absolute;inset:13px;transform:rotate(var(--pointer));border-radius:50%}.synth-dial-face i:after{content:'';position:absolute;top:0;left:calc(50% - 1px);width:2px;height:12px;border-radius:2px;background:#dbe6dc;box-shadow:0 0 4px #fff3}#housekeysSynth .synth-dial input[type=range]{position:absolute;inset:0;z-index:2;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:.001;cursor:ns-resize;touch-action:none}.synth-dial:focus-within{outline:2px solid var(--synth-accent);outline-offset:5px;border-radius:50%}.synth-macro output{display:block;font:11px ui-monospace,monospace;color:#c4e39f;margin-bottom:10px}.synth-macro>small{display:block;max-width:130px;margin:auto;color:#85989d;font-size:10px;line-height:1.5;min-height:30px}
.synth-discover{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 0}.synth-discover>span{color:#84989b;font-size:11px}.synth-discover>button{font-size:11px!important;height:34px!important;min-height:34px!important}.synth-variations{display:flex;gap:8px;width:100%}.synth-variations:empty{display:none}.synth-variations button{flex:1;border-color:#6d8959!important;font-size:12px!important}
.synth-advanced,.synth-library-panel{border-top:1px solid #303c41}.synth-advanced>summary,.synth-library-panel>summary{padding:12px 0;cursor:pointer;font-size:11px;color:#b5c4c4}.synth-advanced>summary>span,.synth-library-panel>summary>span{font-size:10px;color:#71868b;margin-left:10px}.synth-advanced[open],.synth-library-panel[open]{padding-bottom:16px}.synth-layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.synth-layer span{display:block;margin-bottom:8px;color:#c3d7b5}.synth-layer select{width:100%}.synth-effects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.synth-coordinates{display:flex;gap:16px}.synth-coordinates label{flex:1}#housekeysSynth input[type=range]:not([data-synth-macro]){display:block;width:100%;height:24px;min-height:24px;padding:0;margin:8px 0;accent-color:var(--synth-accent)}#housekeysSynth input[type=checkbox]{width:16px;height:16px;min-height:0;flex:0 0 16px;margin:0;padding:0;accent-color:var(--synth-accent)}.synth-locks{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0}.synth-locks>span{font-size:11px;color:#819697}#housekeysSynth .synth-lock{display:flex;align-items:center;gap:5px;font-size:11px}.synth-library-fields{display:flex;gap:20px;flex-wrap:wrap}.synth-save,.synth-library{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex:1;min-width:230px}.synth-save>label,.synth-library>label{width:100%;font-size:11px!important}.synth-save>input,.synth-library>select{flex:1;width:100px!important;min-width:0}
.synth-bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #38464c;margin-top:0;padding-top:16px}.synth-transport{display:flex;align-items:center;gap:8px}#housekeysSynth .synth-transport>label{display:flex;align-items:center;gap:6px;font-size:11px}#housekeysSynth #synthPlay{background:var(--synth-accent);color:#15230e;border-color:var(--synth-accent);font-weight:600;min-width:136px}#housekeysSynth #synthStop{font-size:15px;width:40px;padding:0}.synth-export{display:flex;align-items:center;gap:12px}#housekeysSynth #synthWav{border-color:#88a16b;color:#d1f3ac;background:#263024}.synth-export>small{font-size:9px;color:#7c9686}#synthStatus{font-size:10px;line-height:1.5;color:#8da0a4;margin:12px 0 0}#synthLifetime{font-size:11px;color:#c3ed8e}.generator-embedded #housekeysSynth{margin:0 12px 12px}
@media(max-width:1000px){.synth-workspace{grid-template-columns:240px minmax(0,1fr);gap:16px}.synth-dial{width:74px;height:74px}.synth-macros{gap:8px}.synth-preset>label{display:none}.synth-preset>select{width:140px!important}.synth-patch-display{padding:0 10px}.synth-patch-display small{font-size:7px}.synth-export>small{display:none}}
@media(max-width:800px){.synth-workspace{grid-template-columns:1fr;gap:22px}.synth-canvas-panel{border-right:0;padding:0 14px}.synth-canvas{height:150px}.synth-macros{padding:0 0 4px}.synth-patch-display{display:none}.synth-preset-bar{justify-content:space-between}.synth-brand strong{font-size:21px}}
@media(max-width:500px){#housekeysSynth{margin:0 10px 16px}.hk-synth>summary{padding:16px 14px}.synth-brand{gap:8px}.synth-brand>i{font-size:25px;width:24px}.synth-brand strong{font-size:20px}.synth-brand small{font-size:7px}.synth-summary-action{font-size:9px}.synth-content{padding:0 14px 14px}.synth-preset-bar{gap:8px;flex-wrap:wrap;padding:14px 0}.synth-preset{flex:1;min-width:0}.synth-preset>select{width:100%!important;min-width:0;padding-left:8px!important}.synth-preset-actions{gap:5px}.synth-preset-actions button{font-size:10px!important;padding:0 8px!important;height:40px!important;min-height:40px!important}.synth-quick-start{font-size:10px;margin-bottom:12px}.synth-workspace{padding:16px 0;gap:22px}.synth-macros{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.synth-dial{width:76px;height:76px}.synth-macro>label{margin-bottom:8px!important}.synth-macro output{margin-bottom:6px}.synth-macro>small{font-size:9px;max-width:125px}.synth-discover{gap:8px}.synth-discover>span{font-size:9px;flex:1}.synth-discover>button{font-size:10px!important}.synth-advanced>summary>span,.synth-library-panel>summary>span{font-size:9px;margin-left:6px}.synth-layers{grid-template-columns:1fr}.synth-layer{display:flex;align-items:center;gap:12px}.synth-layer span{flex:1;margin:0;min-width:80px}.synth-layer select{flex:1;min-width:0}.synth-effects{grid-template-columns:repeat(2,minmax(0,1fr))}.synth-save,.synth-library{min-width:0;flex-basis:100%}.synth-bottom-bar{gap:10px;align-items:stretch;flex-wrap:wrap}.synth-transport{flex:1;justify-content:flex-start}.synth-export{flex-basis:100%}.synth-export>button{width:100%}.synth-export>small{display:none}}

#housekeysSynth .synth-library-panel:not([open]){border-top:0}#housekeysSynth .synth-library-panel:not([open])>summary{display:none}.synth-bottom-bar{border-top:0;padding-top:0;margin-bottom:16px}