:root{font-family:Arial,sans-serif;color:#202020;background:#111;font-synthesis:none;--paper:#e7e7e1;--line:#aaa9a0;--ink:#292929;--muted:#77776f}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:280px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid #111;outline-offset:2px}button:disabled{opacity:.25;cursor:default}.app-shell,.workspace{height:100dvh;min-height:0;overflow:hidden}.workspace{display:grid;grid-template-rows:minmax(0,1fr) minmax(295px,43dvh)}
.stage{position:relative;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#282828,#111 75%);color:#858580}.stage:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:14px 14px}.stage:after{content:"";position:absolute;inset:10px;border:1px solid #ffffff22;pointer-events:none}.stage-top,.stage-bottom{position:relative;z-index:1;flex:none;height:28px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;font:10px 'Courier New',monospace;letter-spacing:.18em}.sigil{font-size:17px;color:#c5c5bf}.stage-pulse{width:5px;height:5px;border-radius:50%;background:#b7b7af;box-shadow:0 0 8px #aaa}.stage-center{position:relative;z-index:1;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:7px 18px}.flag-surround{position:relative;width:min(100%,1100px);aspect-ratio:3/2;background:#eee;box-shadow:0 0 0 1px #ffffff77,0 0 0 6px #0008,0 15px 35px #0009}.flag-surround svg{display:block;width:100%;height:100%;overflow:visible;touch-action:none}.flag-surround svg [data-layer-id]{cursor:grab}.flag-surround svg [data-layer-id]:active{cursor:grabbing}.selection-outline{fill:none;stroke:#333;stroke-width:1.5;stroke-dasharray:6 4;vector-effect:non-scaling-stroke;pointer-events:none}.selection-handle{fill:#fafaf4;stroke:#333;stroke-width:2;vector-effect:non-scaling-stroke;cursor:pointer}.rotation-stem{stroke:#333;stroke-width:1.5;vector-effect:non-scaling-stroke}.rotation-handle{fill:#333;stroke:#fafaf4;stroke-width:2;vector-effect:non-scaling-stroke;cursor:crosshair}
.control-panel{min-height:0;overflow:hidden;display:grid;grid-template-columns:190px 230px minmax(0,1fr);grid-template-rows:42px minmax(0,1fr) 16px;grid-template-areas:'top top tools' 'format layers editor' 'bottom bottom bottom';background:var(--paper);border-top:6px solid #3b3b3b;box-shadow:0 -4px 16px #0006}.plate-top{grid-area:top;min-width:0;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font:11px 'Courier New',monospace;color:#777}.plate-mark{font-size:15px}.plate-tools{grid-area:tools;min-width:0;padding:4px 12px;display:flex;align-items:center;gap:5px;border-bottom:1px solid var(--line)}.tool-spacer{flex:1}.tool-key{width:31px;height:31px;border:1px solid #999;background:#eeeee8;color:#383838;font-size:18px;line-height:1}.tool-key:hover,.tool-key:active{background:#c5c5bf}.tool-key.dark-key{background:#333;color:#f3f3ed;border-color:#333}.deck-nav{display:none}.plate-section{min-width:0;min-height:0;position:relative;padding:13px 12px 9px;border-right:1px solid var(--line);overflow:hidden}.format-section{grid-area:format}.layers-section{grid-area:layers}.editor-section{grid-area:editor;border-right:0}.section-numeral{position:absolute;top:4px;right:9px;color:#95958c;font:13px Georgia,serif}.plate-bottom{grid-area:bottom;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-top:1px solid var(--line);color:#92928b;font:9px 'Courier New',monospace}
.ratio-grid{display:flex;justify-content:space-between;gap:2px;padding:13px 0 5px}.ratio-key{position:relative;width:30px;height:35px;border:0;background:transparent;color:#60605a;display:grid;place-items:center}.ratio-key:before{content:"";position:absolute;width:30px;height:30px;border:1px solid #aaa;border-radius:50%}.ratio-key.active:before{border:2px solid #242424;background:#d2d2cb}.ratio-key:hover:before{border-color:#242424}.ratio-shape{width:var(--rw);height:var(--rh);max-width:24px;max-height:24px;border:2px solid currentColor;z-index:1}.patch-line{height:18px;display:flex;align-items:center;justify-content:center;margin:1px 9px}.jack{width:9px;height:9px;border-radius:50%;border:2px solid #444;background:#222;box-shadow:0 0 0 2px #bdbdb5}.wire{width:67%;height:1px;background:#777}.base-color{display:flex;align-items:center;justify-content:center;gap:18px;padding:4px}.base-symbol{color:#72726c;font:17px 'Courier New',monospace}.color-socket{width:40px;height:40px;position:relative;display:grid;place-items:center;border-radius:50%;background:#484848;box-shadow:inset 0 2px 3px #111,0 2px 0 #aaa;cursor:pointer}.color-socket:before{content:"";position:absolute;inset:4px;border:1px solid #bbb;border-radius:50%}.color-socket input{z-index:1;width:25px;height:25px;border:0;border-radius:50%;padding:0;background:none;cursor:pointer}.color-socket input::-webkit-color-swatch-wrapper{padding:0}.color-socket input::-webkit-color-swatch{border:2px solid #eeeee8;border-radius:50%}.color-socket input::-moz-color-swatch{border:2px solid #eeeee8;border-radius:50%}
.layers-section{display:flex;flex-direction:column}.layer-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;overflow:hidden;padding-top:8px}.layer-row{flex:0 1 36px;min-height:28px;display:flex;align-items:center;gap:5px;padding:0 5px;background:#dadad4;border:1px solid #b2b2aa;cursor:pointer}.layer-row:hover{background:#cecec8}.layer-row.selected{background:#bfbfb9;border-color:#595953;box-shadow:inset 3px 0 #333}.layer-index{width:18px;flex:none;color:#666;font:9px 'Courier New',monospace}.layer-icon{width:23px;height:23px;flex:none;display:grid;place-items:center;border-radius:50%;background:#383838;color:#eee;font:15px 'Courier New',monospace}.layer-name{display:none}.layer-color{width:10px;height:10px;border-radius:50%;border:1px solid #555;margin-left:auto}.layer-buttons{display:flex;gap:0}.layer-buttons button{width:23px;height:25px;border:0;background:transparent;color:#555;font-size:14px}.layer-buttons button:hover{color:#111}.layer-buttons .hidden-layer{opacity:.35}.layer-foot{flex:none;height:38px;display:flex;align-items:center;justify-content:center;gap:10px}.page-key{width:25px;height:25px;border:0;background:transparent;color:#555;font-size:11px}.page-key:hover{color:#111}#layerPageLabel{font:9px 'Courier New',monospace;color:#777}.add-key{width:30px;height:30px;border:1px solid #444;border-radius:50%;background:#333;color:#f4f4ed;font-size:17px}.add-key:hover{background:#666}.add-menu{position:absolute;z-index:5;top:6px;left:4px;right:4px;bottom:5px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:4px;padding:7px;background:#e9e9e3;border:2px solid #444;box-shadow:0 8px 20px #0005}.add-menu[hidden]{display:none}.add-menu button{min-width:0;min-height:0;border:1px solid #aaa;background:#d8d8d1;color:#333;font:19px 'Courier New',monospace}.add-menu button:hover{background:#bbb}
.inspector{height:100%;min-height:0;display:grid;grid-template-columns:minmax(145px,.8fr) minmax(190px,1fr) minmax(230px,1.1fr);gap:12px;align-items:start}.inspector-empty{height:100%;display:grid;place-items:center;color:#888;font-size:24px;letter-spacing:.3em}.oscillator-bank,.geometry-bank,.texture-bank{min-width:0;min-height:0}.oscillator-bank{display:flex;flex-direction:column;align-items:stretch;gap:8px}.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}.type-key{min-width:0;height:27px;border:1px solid #aaa;background:#d9d9d2;color:#454545;font:17px 'Courier New',monospace}.type-key.active{border-color:#333;background:#333;color:#eee}.type-key:hover{border-color:#333}.text-socket{width:100%;height:26px;border:1px solid #888;background:#efefe8;text-align:center;color:#222;font:13px 'Courier New',monospace}.color-pair{display:flex;align-items:center;justify-content:center;gap:24px}.color-pair .color-socket{width:37px;height:37px}.color-pair .color-socket input{width:23px;height:23px}.inspector-actions{display:flex;justify-content:center;gap:9px}.inspector-actions button{width:31px;height:27px;border:1px solid #999;background:#d9d9d2;color:#333;font-size:17px}.inspector-actions button:hover{border-color:#222;background:#bcbcb6}.knob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px 1px}.knob-unit{height:66px;display:flex;flex-direction:column;align-items:center;gap:2px}.knob-glyph{height:12px;color:#666;font:12px 'Courier New',monospace;line-height:1}.knob-body{width:39px;height:39px;position:relative;border:3px solid #333;border-radius:50%;background:repeating-conic-gradient(from -135deg,#aaa 0 2deg,transparent 2deg 24deg);box-shadow:0 0 0 1px #aaa}.knob-body:before{content:"";position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#696969,#282828 70%);box-shadow:inset 0 0 0 1px #777}.knob-body:after{content:"";position:absolute;top:3px;left:calc(50% - 1px);width:2px;height:12px;background:#eee;transform-origin:center 15px;transform:rotate(var(--turn))}.knob-body input{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);margin:0;opacity:0;cursor:ns-resize;touch-action:none}.knob-unit output{color:#555;font:9px 'Courier New',monospace}.effect-rail{height:12px;display:flex;justify-content:space-around;align-items:center;color:#777;font:10px 'Courier New',monospace}.effects-bank{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:9px 3px 2px;background:#d0d0c9;border:1px solid #999}.effects-bank .knob-unit{height:64px}.effects-bank .knob-body{width:37px;height:37px}.effect-selectors{display:flex;justify-content:space-between;gap:5px;margin-top:9px}.pattern-grid,.mode-grid{display:flex;gap:2px}.pattern-key,.mode-key{width:26px;height:26px;border:1px solid #999;background:#dcdcd5;color:#555;font:15px 'Courier New',monospace}.pattern-key.active,.mode-key.active{background:#333;color:#f4f4ed;border-color:#333}.pattern-key:hover,.mode-key:hover{border-color:#222}
.export-dialog{width:min(340px,calc(100vw - 25px));padding:18px;background:#e7e7e1;border:4px solid #333;box-shadow:0 20px 70px #0008}.export-dialog::backdrop{background:#0009}.dialog-head{display:flex;justify-content:space-between;align-items:center;color:#666;font:14px 'Courier New',monospace}.dialog-head button{border:0;background:none;color:#333;font-size:24px}.dialog-actions{display:flex;gap:8px;margin-top:18px}.dialog-actions button{height:45px;flex:1;display:flex;align-items:center;justify-content:space-around;border:1px solid #999;background:#d8d8d1;color:#333;font:20px 'Courier New',monospace}.dialog-actions button:hover{background:#bbb}.dialog-actions small{font-size:10px}
@media(max-width:1060px){.workspace{grid-template-rows:minmax(0,1fr) minmax(270px,46dvh)}.control-panel{grid-template-columns:160px 190px minmax(0,1fr)}.inspector{grid-template-columns:minmax(120px,.8fr) minmax(145px,1fr) minmax(190px,1.1fr);gap:7px}.type-key{height:25px;font-size:15px}.effects-bank .knob-body{width:33px;height:33px}.effects-bank .knob-unit{height:61px}.pattern-key,.mode-key{width:23px;height:24px;font-size:13px}}
@media(max-width:900px){.workspace{grid-template-rows:minmax(0,1fr) minmax(290px,48dvh)}.control-panel{display:grid;grid-template-columns:1fr;grid-template-rows:37px 38px minmax(0,1fr);grid-template-areas:'tools' 'nav' 'content';border-top-width:4px}.plate-top,.plate-bottom{display:none}.plate-tools{padding:3px 10px}.tool-key{width:31px;height:30px}.deck-nav{grid-area:nav;display:flex;align-items:stretch;justify-content:center;border-bottom:1px solid #aaa}.deck-nav button{flex:1;border:0;border-right:1px solid #bbb;background:#deded8;color:#666;font:20px 'Courier New',monospace}.deck-nav button:last-child{border-right:0}.deck-nav button[aria-pressed=true]{background:#333;color:#eee}.plate-section{grid-area:content;display:none;border:0;padding:12px 16px}.control-panel[data-deck=format] .format-section,.control-panel[data-deck=layers] .layers-section,.control-panel[data-deck=shape] .editor-section,.control-panel[data-deck=geometry] .editor-section,.control-panel[data-deck=texture] .editor-section{display:block}.control-panel[data-deck=layers] .layers-section{display:flex}.inspector{display:block}.oscillator-bank,.geometry-bank,.texture-bank{display:none}.control-panel[data-deck=shape] .oscillator-bank,.control-panel[data-deck=geometry] .geometry-bank,.control-panel[data-deck=texture] .texture-bank{display:flex}.control-panel[data-deck=shape] .oscillator-bank{max-width:520px;margin:auto}.control-panel[data-deck=geometry] .geometry-bank,.control-panel[data-deck=texture] .texture-bank{max-width:560px;margin:auto;flex-direction:column}.type-grid{grid-template-columns:repeat(8,1fr);gap:4px}.type-key{height:35px;font-size:19px}.color-pair{margin-top:6px}.ratio-grid{max-width:450px;margin:auto;justify-content:space-around}.ratio-key{width:53px;height:53px}.ratio-key:before{width:48px;height:48px}.patch-line{max-width:390px;margin:5px auto}.base-color{margin-top:10px}.layer-list{max-width:550px;width:100%;margin:auto}.layer-row{flex-basis:38px}.layer-foot{justify-content:center}.add-menu{top:6px;bottom:6px;left:calc(50% - min(45vw,250px));right:calc(50% - min(45vw,250px))}.knob-grid{grid-template-columns:repeat(4,1fr);gap:5px}.knob-unit{height:72px}.knob-body{width:43px;height:43px}.effects-bank{grid-template-columns:repeat(5,1fr);padding:14px 8px 6px}.effects-bank .knob-body{width:43px;height:43px}.effect-selectors{justify-content:center;gap:25px;margin-top:13px}.pattern-key,.mode-key{width:33px;height:32px;font-size:17px}.inspector-actions{margin-top:5px}}
@media(max-width:520px){.workspace{grid-template-rows:minmax(0,1fr) minmax(300px,53dvh)}.stage-top,.stage-bottom{height:21px;padding:0 11px;font-size:9px}.stage:after{inset:5px}.stage-center{padding:5px 9px}.plate-section{padding:10px 10px}.type-grid{gap:2px}.type-key{height:34px}.color-pair{margin-top:2px}.layer-list{max-width:100%}.add-menu{left:5px;right:5px}.knob-grid{gap:1px}.knob-unit{height:68px}.knob-body{width:40px;height:40px}.effects-bank .knob-body{width:35px;height:35px}.effects-bank .knob-unit{height:67px}.effect-selectors{gap:11px}.pattern-key,.mode-key{width:30px;height:30px}}
@media(max-height:600px){.workspace{grid-template-rows:minmax(0,1fr) 285px}.stage-top,.stage-bottom{height:20px}.control-panel{grid-template-rows:34px minmax(0,1fr) 10px}.plate-tools{padding-top:1px;padding-bottom:1px}.plate-section{padding-top:7px}.type-key{height:23px}.knob-unit{height:60px}.knob-body{width:35px;height:35px}.layer-row{flex-basis:30px}.effect-selectors{margin-top:5px}}
@media(max-width:900px) and (max-height:600px){.workspace{grid-template-rows:minmax(0,1fr) minmax(220px,60dvh)}.control-panel{grid-template-rows:32px 30px minmax(0,1fr)}.plate-section{padding:6px 10px}.type-key{height:27px}.knob-grid{grid-template-columns:repeat(4,1fr)}.knob-unit{height:55px}.effects-bank .knob-unit{height:55px}.effect-selectors{margin-top:5px}.layer-row{flex-basis:28px}}
/* Keep the entire instrument inside the visual viewport. */
.workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 295px}.stage,.control-panel,.deck-nav,.inspector,.type-grid{min-width:0}.control-panel{width:100%}.deck-nav button{min-width:0}
@media(max-width:1060px){.workspace{grid-template-rows:minmax(0,1fr) 285px}}
@media(max-width:900px){.workspace{grid-template-rows:minmax(0,1fr) minmax(270px,47dvh)}.control-panel{grid-template-columns:minmax(0,1fr)}.type-grid{width:100%}.type-key{min-width:0}}
@media(max-width:520px){.workspace{grid-template-rows:minmax(0,1fr) minmax(290px,51dvh)}.deck-nav button{font-size:18px}.oscillator-bank{max-width:100%}}
@media(max-width:900px) and (max-height:600px){.workspace{grid-template-rows:minmax(0,1fr) 57dvh}.control-panel{grid-template-rows:27px 25px minmax(0,1fr)}.tool-key{height:23px;width:27px;font-size:15px}.deck-nav button{font-size:16px}.type-key{height:22px;font-size:14px}.oscillator-bank{gap:3px}.color-pair{margin:0}.color-pair .color-socket{width:28px;height:28px}.color-pair .color-socket input{width:19px;height:19px}.inspector-actions button{height:22px}.knob-grid{grid-template-columns:repeat(4,1fr);gap:0}.knob-unit{height:50px}.knob-body{width:29px;height:29px}.knob-body:after{height:9px;transform-origin:center 12px}.effects-bank{padding:3px}.effects-bank .knob-unit{height:48px}.effects-bank .knob-body{width:29px;height:29px}.effect-selectors{margin-top:2px}.pattern-key,.mode-key{height:22px;width:24px;font-size:13px}.layer-foot{height:23px}.layer-row{min-height:20px}.add-key{width:23px;height:23px;font-size:13px}}
@media(max-width:900px){.control-panel[data-deck=shape] .editor-section,.control-panel[data-deck=geometry] .editor-section,.control-panel[data-deck=texture] .editor-section{display:flex;align-items:center;justify-content:center}.inspector{width:100%;height:auto}}
@media(max-width:900px) and (max-height:600px){.workspace{grid-template-rows:minmax(0,1fr) 49dvh}}
@media(max-width:520px) and (max-height:600px) and (orientation:portrait){.type-grid{grid-template-columns:repeat(4,1fr)}.type-key{height:30px;font-size:17px}}

/* Color channels behave like miniature two-axis joysticks. */
.color-joystick{--disc-size:64px;width:var(--disc-size);flex:none;display:flex;flex-direction:column;align-items:center;gap:7px}
.color-disc{position:relative;width:var(--disc-size);height:var(--disc-size);border:3px solid #3b3b39;border-radius:50%;cursor:crosshair;touch-action:none;box-shadow:0 0 0 2px #a7a79f,inset 0 0 0 1px #dadad0,inset 0 3px 9px #0008;background:radial-gradient(circle,#e9e9e1 0%,#e9e9e1aa 20%,transparent 75%),conic-gradient(from 0deg,#a14d4d,#9a884a,#5c8550,#4c8585,#545b98,#8e548f,#a14d4d)}
.color-disc:before,.color-disc:after{content:"";position:absolute;pointer-events:none;background:#ffffff7d}
.color-disc:before{top:50%;left:5px;right:5px;height:1px}.color-disc:after{left:50%;top:5px;bottom:5px;width:1px}
.color-puck{position:absolute;z-index:1;left:calc(50% + var(--x));top:calc(50% + var(--y));width:18px;height:18px;transform:translate(-50%,-50%);border:2px solid #f5f5ee;border-radius:50%;background:var(--color);box-shadow:0 0 0 2px #292929,0 2px 5px #0007;pointer-events:none}
.color-lightness{appearance:none;width:calc(var(--disc-size) - 2px);height:10px;margin:0;border:1px solid #555;border-radius:8px;background:linear-gradient(90deg,#111,hsl(var(--hue) 100% 50%),#f8f8f4);cursor:ew-resize;touch-action:none}
.color-lightness::-webkit-slider-thumb{appearance:none;width:7px;height:15px;border:1px solid #303030;border-radius:2px;background:#e9e9e1;box-shadow:0 1px 3px #0006}
.color-lightness::-moz-range-thumb{width:7px;height:15px;border:1px solid #303030;border-radius:2px;background:#e9e9e1;box-shadow:0 1px 3px #0006}
.color-pair{gap:15px}.base-color{gap:16px;padding:4px 0}.base-color .color-joystick{--disc-size:76px}
@media(max-width:1060px){.color-joystick{--disc-size:55px}.color-pair{gap:8px}.base-color .color-joystick{--disc-size:70px}}
@media(max-width:900px){.color-joystick{--disc-size:77px}.color-pair{gap:30px;margin-top:3px}.base-color .color-joystick{--disc-size:98px}}
@media(max-width:520px){.color-joystick{--disc-size:69px}.color-pair{gap:25px}}
@media(max-width:900px) and (max-height:600px){.color-joystick{--disc-size:43px;gap:4px}.color-pair{gap:18px}.base-color .color-joystick{--disc-size:64px}.color-puck{width:13px;height:13px}.color-lightness{height:8px}}
.oscillator-bank{gap:5px}.oscillator-bank .type-key{height:24px}.oscillator-bank .color-joystick{--disc-size:54px}.oscillator-bank .inspector-actions button{height:23px}
@media(max-width:900px){.oscillator-bank .type-key{height:35px}.oscillator-bank .color-joystick{--disc-size:77px}.oscillator-bank .inspector-actions button{height:27px}}
@media(max-width:520px){.oscillator-bank .type-key{height:34px}.oscillator-bank .color-joystick{--disc-size:69px}}
@media(max-width:900px) and (max-height:600px){.editor-section{padding-top:2px;padding-bottom:2px}.oscillator-bank{gap:2px}.oscillator-bank .type-grid{gap:2px}.oscillator-bank .type-key{height:20px}.oscillator-bank .color-joystick{--disc-size:34px;gap:2px}.oscillator-bank .color-lightness{height:6px}.oscillator-bank .inspector-actions{margin-top:0}.oscillator-bank .inspector-actions button{height:19px}}
@media(max-width:520px) and (max-height:600px) and (orientation:portrait){.oscillator-bank .type-key{height:23px}.oscillator-bank .color-joystick{--disc-size:50px}.oscillator-bank .inspector-actions button{height:23px}}

.patch-bay{height:64px;flex:none;position:relative;display:flex;align-items:center;padding:3px 10px;background:linear-gradient(#d9d9d2,#c8c8c1);border:1px solid #999;box-shadow:inset 0 1px #f4f4ed,inset 0 -2px 3px #9997}
.patch-wires{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.patch-trace,.patch-cord,.patch-cord-light{fill:none;stroke-linecap:round}
.patch-trace{stroke:#787870;stroke-width:1;stroke-dasharray:2 5;opacity:.65}
.patch-cord{stroke:#242424;stroke-width:5;filter:drop-shadow(0 2px 1px #777)}
.patch-cord-light{stroke:#b9b9b2;stroke-width:1;opacity:.9}
.patch-cord-live{stroke-dasharray:4 3}
.patch-port{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:29px;height:29px;padding:0;border:3px solid #41413e;border-radius:50%;background:radial-gradient(circle at 35% 28%,#6f6f6b,#333 75%);box-shadow:0 0 0 2px #a7a79e,inset 0 1px 2px #111,0 2px 2px #777;color:#deded7;font:14px 'Courier New',monospace;line-height:1;touch-action:none;cursor:grab}
.patch-port:active{cursor:grabbing}.patch-port:hover{border-color:#111;box-shadow:0 0 0 2px #555,inset 0 1px 2px #111,0 2px 2px #777}
.patch-source{width:35px;height:35px;background:radial-gradient(circle at 35% 25%,#85857f,#2e2e2c 72%);font-size:19px}
.patch-targets{position:relative;z-index:1;flex:1;min-width:0;display:flex;align-items:center;justify-content:space-around;margin-left:20px}
.patch-target.patched{border-color:#e9e9e1;box-shadow:0 0 0 2px #30302d,inset 0 0 0 2px #111,0 2px 2px #777;color:#fff}
.patch-target.armed{border-color:#f7f7ef;box-shadow:0 0 0 4px #333,inset 0 0 0 2px #111,0 2px 5px #666;color:#fff}
.texture-bank{gap:5px}.texture-bank .effects-bank{padding-top:5px}.texture-bank .effect-selectors{margin-top:1px}
@media(max-width:900px){.patch-bay{height:70px;max-width:560px;width:100%;margin:auto}.texture-bank{gap:9px}.texture-bank .effect-selectors{margin-top:2px}}
@media(max-width:900px) and (max-height:600px){.patch-bay{height:38px;padding:1px 8px}.patch-source{width:25px;height:25px;font-size:15px}.patch-target{width:22px;height:22px;border-width:2px;font-size:11px}.patch-targets{margin-left:12px}.texture-bank{gap:2px}.texture-bank .effects-bank{padding-top:2px}.texture-bank .effect-selectors{margin-top:0}}

/* A separate modulation deck shares the editor's footprint. */
.stage-transport{display:flex;align-items:center;gap:7px;min-width:100px;width:min(29vw,240px)}
.stage-transport button{flex:none;width:21px;height:20px;border:1px solid #797973;background:#222;color:#deded8;font:13px 'Courier New',monospace;line-height:1;cursor:pointer}
.stage-transport button[aria-pressed=true]{background:#d0d0ca;color:#222}
.stage-transport input{flex:1;min-width:0;height:12px;margin:0;accent-color:#d8d8d0;cursor:ew-resize}
.stage-transport span{flex:none;min-width:31px;font:9px 'Courier New',monospace;letter-spacing:0}

.motion-bank{display:none;height:100%;min-height:0;flex-direction:column;gap:5px}
.control-panel[data-deck=motion] .inspector{display:none}
.control-panel[data-deck=motion] .motion-bank{display:flex}
.mod-patch-bay{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;padding:4px 6px;background:linear-gradient(#d6d6cf,#c7c7c0);border:1px solid #999;box-shadow:inset 0 1px #f5f5ec}
.mod-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.mod-cord,.mod-cord-light{fill:none;stroke-linecap:round}
.mod-cord{stroke:#282825;stroke-width:4;filter:drop-shadow(0 2px 1px #777)}
.mod-cord.selected{stroke:#111;stroke-width:6}
.mod-cord.live{stroke-dasharray:5 4}
.mod-cord-light{stroke:#dddcd3;stroke-width:1}
.mod-sources{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;flex:none}
.mod-source-card{min-width:0;display:flex;align-items:center;justify-content:space-around;gap:4px;padding:4px;background:#d8d8d1;border:1px solid #9b9b94;box-shadow:inset 0 1px #f6f6ed}
.mod-source-card.active{border-color:#31312e}
.mod-port{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:27px;height:27px;padding:0;border:3px solid #42423f;border-radius:50%;background:radial-gradient(circle at 34% 24%,#777771,#272725 75%);box-shadow:0 0 0 2px #aaa9a1,inset 0 1px 2px #111;color:#ecece4;font:12px 'Courier New',monospace;cursor:grab;touch-action:none}
.mod-port:hover,.mod-port.armed{box-shadow:0 0 0 3px #555,inset 0 1px 2px #111}
.mod-source-port{width:31px;height:31px;font-size:15px}
.mod-wave-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:116px}
.mod-wave-keys button{width:23px;height:23px;padding:0;border:1px solid #aaa;background:#e5e5de;color:#555;font:13px 'Courier New',monospace}
.mod-wave-keys button.active{background:#333;color:#eee;border-color:#333}
.mod-rate{display:flex;gap:3px}
.mod-rate .knob-unit{height:48px;width:36px;gap:0}
.mod-rate .knob-body{width:28px;height:28px;border-width:2px}
.mod-rate .knob-body:after{height:9px;transform-origin:center 11px}
.mod-rate .knob-glyph{height:10px;font-size:10px}
.mod-rate .knob-unit output{font-size:8px}
.mod-scope{position:relative;z-index:0;flex:1;min-height:20px;margin:0 5px;background:repeating-linear-gradient(0deg,#3737310b 0 1px,transparent 1px 9px),repeating-linear-gradient(90deg,#3737310b 0 1px,transparent 1px 18px),#c2c2ba;border:1px solid #989890;box-shadow:inset 0 1px 3px #6667;overflow:hidden}
.mod-scope svg{display:block;width:100%;height:100%}
.mod-wave-line{fill:none;stroke:#343431;stroke-width:1.6;vector-effect:non-scaling-stroke}
.mod-wave-b{stroke:#77776f;stroke-dasharray:3 2}
.mod-scope-needle{position:absolute;top:0;bottom:0;width:1px;background:#f4f4ea;box-shadow:0 0 0 1px #3338,0 0 4px #222;pointer-events:none}
.mod-targets{position:relative;z-index:1;flex:none;min-height:32px;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));align-items:center;justify-items:center;gap:3px;padding:3px 2px}
.mod-target-port.connected{border-color:#f2f2eb;box-shadow:0 0 0 2px #292926,inset 0 0 0 1px #111;color:#fff}
.mod-target-port.selected{background:#111}
.mod-target-port:disabled{opacity:.35;cursor:default}
.mod-footer{display:flex;align-items:center;justify-content:center;gap:12px;flex:none;height:58px;background:#d3d3cc;border:1px solid #aaa}
.mod-footer-glyph{min-width:51px;color:#555;font:13px 'Courier New',monospace;text-align:center}
.mod-footer .knob-unit{height:53px;gap:0}
.mod-footer .knob-body{width:32px;height:32px}
.mod-footer .knob-body:after{height:10px;transform-origin:center 13px}
.mod-empty{height:53px;display:grid;place-items:center;color:#777}
.mod-remove{width:26px;height:26px;border:1px solid #aaa;background:#e4e4dc;color:#333;font-size:18px}
.mod-remove:disabled{opacity:.35}
.export-dialog{width:min(440px,calc(100vw - 25px))}
.dialog-actions{flex-wrap:wrap}
.dialog-actions button{min-width:95px}
@media(max-width:900px){.control-panel[data-deck=motion] .editor-section{display:flex;align-items:center;justify-content:center}.control-panel[data-deck=motion] .motion-bank{width:100%;max-width:650px}.mod-targets{grid-template-columns:repeat(7,minmax(0,1fr));min-height:62px}.mod-patch-bay{gap:4px}.mod-source-card{padding:3px}.mod-footer{height:52px}.mod-footer .knob-unit{height:49px}}
@media(max-width:520px){.stage-transport{width:44vw;gap:3px}.stage-transport span{font-size:8px;min-width:24px}.mod-sources{gap:4px}.mod-source-card{gap:2px}.mod-wave-keys{max-width:50px}.mod-wave-keys button{width:21px;height:19px;font-size:11px}.mod-rate{gap:0}.mod-rate .knob-unit{width:30px}.mod-rate .knob-body{width:25px;height:25px}.mod-source-port{width:26px;height:26px;font-size:12px}.mod-target-port{width:25px;height:25px;font-size:11px}.mod-footer{height:49px}.mod-footer .knob-unit{height:45px}.mod-footer .knob-body{width:26px;height:26px}}
@media(max-width:900px) and (max-height:600px){.stage-transport button{height:17px;width:19px}.mod-patch-bay{gap:2px;padding:2px 4px}.mod-source-card{padding:1px}.mod-rate .knob-unit{height:37px}.mod-rate .knob-body{width:21px;height:21px}.mod-rate .knob-body:after{height:7px;transform-origin:center 9px}.mod-wave-keys button{height:17px}.mod-targets{grid-template-columns:repeat(13,minmax(0,1fr));padding:0;min-height:24px}.mod-target-port{width:21px;height:21px;border-width:2px;font-size:10px}.mod-footer{height:37px}.mod-footer .knob-unit{height:35px}.mod-footer .knob-body{width:20px;height:20px}.mod-footer .knob-body:after{height:6px;transform-origin:center 9px}.mod-footer .knob-glyph{height:8px;font-size:9px}}
@media(max-width:520px) and (max-height:600px) and (orientation:portrait){.mod-targets{grid-template-columns:repeat(7,minmax(0,1fr));min-height:48px}}

/* Small engraved cues retain the instrument's quiet appearance. */

.deck-nav button{display:flex;align-items:center;justify-content:center;gap:6px}.deck-nav small{font:9px 'Courier New',monospace}
.layer-name{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:9px 'Courier New',monospace;color:#4c4c46}.layer-color{margin-left:0}.layer-buttons button{width:19px}
.knob-glyph{position:relative}.knob-glyph small{display:none}.knob-unit:hover .knob-glyph small{display:block;position:absolute;z-index:5;bottom:100%;left:50%;transform:translateX(-50%);padding:3px 5px;background:#333;color:#eee;white-space:nowrap;font:9px 'Courier New',monospace;pointer-events:none}
.image-controls{display:flex;gap:3px;justify-content:center}.image-controls button{width:40px;height:35px;padding:2px;border:1px solid #aaa;background:#deded7;color:#333;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center}.image-controls button[aria-pressed=true]{background:#333;color:#eee}.image-controls small{font:7px 'Courier New',monospace}.image-controls svg{width:20px;height:20px}
.oscillator-bank:has(.image-controls) .type-grid{display:none}
.image-dialog{width:min(610px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:16px;background:#e7e7e1;color:#333;border:4px solid #333;box-shadow:0 20px 70px #0008;overflow:hidden}.image-dialog::backdrop{background:#000a}.image-drawer-head{display:flex;justify-content:space-between;align-items:center;font:11px 'Courier New',monospace;letter-spacing:.1em}.image-drawer-head button{width:28px;height:28px;border:0;background:none;font-size:22px;color:#333}.emblem-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:12px 0}.emblem-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;height:100px;background:#d7d7cf;border:1px solid #aaa;color:#333}.emblem-grid button:hover{background:#bdbdb5;border-color:#333}.emblem-grid svg{width:58px;height:58px}.emblem-grid span{font:9px 'Courier New',monospace}.image-drawer-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font:9px 'Courier New',monospace;color:#666}.image-drawer-foot button{padding:9px 12px;border:1px solid #555;background:#333;color:#eee;font:11px 'Courier New',monospace}
@media(max-width:520px){.emblem-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.emblem-grid button{height:85px}.emblem-grid svg{width:48px;height:48px}.image-dialog{padding:10px}.deck-nav button{flex-direction:column;gap:0}.deck-nav small{font-size:8px}.image-drawer-foot{font-size:8px}}
@media(max-height:600px){.emblem-grid button{height:65px}.emblem-grid svg{width:36px;height:36px}.emblem-grid{margin:5px 0}.image-dialog{padding:8px}.image-controls button{height:29px}}
@media(max-width:900px) and (max-height:600px){.deck-nav button{flex-direction:row;gap:4px}.deck-nav small{font-size:8px}}
.knob-glyph{display:flex;align-items:center;justify-content:center;gap:3px}.knob-glyph small,.knob-unit:hover .knob-glyph small{display:inline;position:static;transform:none;padding:0;background:none;color:#64645d;white-space:nowrap;font:7px 'Courier New',monospace}.mod-rate .knob-glyph{gap:1px}.mod-rate .knob-glyph small{font-size:6px}.mod-empty{font:9px 'Courier New',monospace;color:#666}.image-controls button:disabled{opacity:.4}






.tool-key{flex:none}.tool-key:has(small){width:auto;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 7px}.tool-key small{font:9px 'Courier New',monospace}
.section-numeral{left:12px;right:auto;top:4px;color:#62625b;font:8px 'Courier New',monospace;letter-spacing:.04em}.bank-caption{display:block;font:8px 'Courier New',monospace;color:#696960;flex:none;height:11px}.editor-section{padding-top:19px}.oscillator-bank,.geometry-bank,.texture-bank{position:relative}.layer-row .layer-name{font-size:9px}.add-key{display:flex;align-items:center;justify-content:center;gap:5px;width:auto;padding:0 9px}.add-key small{font:9px 'Courier New',monospace}
.emblem-grid img{width:58px;height:58px;object-fit:contain}.emblem-grid button{gap:3px;height:111px}.emblem-grid small{font:8px 'Courier New',monospace;color:#666}.image-controls img{width:20px;height:20px;object-fit:contain}.image-drawer-foot a{color:#666;font-size:8px}.image-drawer-foot>span{text-align:right;line-height:1.7}.mode-key{height:29px;width:29px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px}.mode-key small{font:6px 'Courier New',monospace}.mode-grid{display:flex;gap:2px}
@media(max-width:1060px){.plate-tools{padding-left:5px;padding-right:5px;gap:3px}.tool-key:has(small){padding:0 5px}.tool-key small{font-size:8px}.bank-caption{font-size:7px}}
@media(max-width:900px){.bank-caption{display:none}.section-numeral{top:6px;left:12px;font-size:9px}.deck-nav small{font-size:10px}.plate-section.editor-section{padding-top:24px}.plate-tools{padding-left:8px;padding-right:8px}.mode-key{width:36px;height:35px;font-size:16px}.mode-key small{font-size:7px}}
@media(max-width:520px){.emblem-grid img{width:43px;height:43px}.emblem-grid button{height:88px;gap:3px}.emblem-grid span{font-size:8px;text-align:center}.emblem-grid small{font-size:7px}.tool-key{width:27px;font-size:17px}.tool-key:has(small){padding:0 5px}.tool-key small{font-size:8px}.deck-nav small{font-size:9px}.plate-tools{gap:3px}.tool-spacer{min-width:0}.section-numeral{font-size:8px}}
@media(max-height:600px){.emblem-grid img{width:35px;height:35px}.emblem-grid button{height:72px}.bank-caption{height:9px;font-size:7px}.mode-key{height:24px;font-size:12px}}
@media(max-width:900px) and (max-height:600px){.plate-section.editor-section{padding-top:17px}.section-numeral{top:3px;font-size:7px}.tool-key:has(small){padding:0 4px}.tool-key small{font-size:7px}.deck-nav small{font-size:8px}.mode-key{width:27px;height:25px;font-size:12px}.mod-empty{font-size:8px}.emblem-grid button{height:70px}}
.mod-target-cell{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}.mod-target-cell small{font:7px 'Courier New',monospace;color:#53534c}.mod-targets{min-height:44px}.mod-target-port{font-size:12px}
@media(min-width:901px){.oscillator-bank .type-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.oscillator-bank{gap:4px}.oscillator-bank .color-joystick{--disc-size:50px}.oscillator-bank .type-key{height:24px}.bank-caption{margin-bottom:3px}}
@media(max-width:900px){.mod-targets{min-height:82px}.mod-target-cell small{font-size:7px}}
@media(max-width:900px) and (max-height:600px){.mod-targets{min-height:34px}.mod-target-cell{gap:1px}.mod-target-cell small{font-size:6px}}
@media(max-width:520px) and (max-height:600px) and (orientation:portrait){.mod-targets{min-height:62px}}
@media(min-width:521px) and (max-width:900px) and (max-height:600px){.oscillator-bank .type-grid{grid-template-columns:repeat(9,minmax(0,1fr))}}
@media(max-width:520px) and (max-height:600px) and (orientation:portrait){.oscillator-bank .type-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

.lfo-deck-key[aria-pressed=true]{background:#333;color:#eee;border-color:#333}
@media(max-width:900px){.lfo-deck-key{display:none!important}}

/* The image entry is separate from the sixteen geometric layer choices. */
.add-menu{display:flex;flex-direction:column;gap:5px;padding:7px}.add-menu-head{flex:none;height:21px;display:flex;align-items:center;justify-content:space-between;font:9px 'Courier New',monospace;color:#555}.add-menu .add-menu-head button{width:22px;height:21px;border:0;background:none;font-size:20px}.add-shape-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:3px;flex:1;min-height:0}.add-menu .add-image-entry{flex:none;height:34px;display:flex;align-items:center;justify-content:space-between;gap:7px;padding:0 8px;background:#333;color:#eee;border-color:#333;font:10px 'Courier New',monospace}.add-image-entry>span:first-child{font-size:23px}.add-key{width:30px;height:30px;padding:0;display:grid;place-items:center}.type-key[data-type=image]{display:flex;align-items:center;justify-content:center;gap:2px}.type-key[data-type=image] small{font:7px 'Courier New',monospace}
.library-search{display:flex;flex-direction:column;gap:6px;margin-top:7px}.library-search input{width:100%;height:28px;min-width:0;padding:0 8px;border:1px solid #aaa;background:#efefe8;color:#333;font:10px 'Courier New',monospace;border-radius:0}.library-categories{display:flex;gap:4px}.library-categories button{flex:1;height:23px;min-width:0;padding:0;border:1px solid #aaa;background:#d5d5cd;color:#555;font:15px 'Courier New',monospace}.library-categories button[aria-pressed=true]{background:#333;color:#eee;border-color:#333}.library-pages{display:flex;align-items:center;justify-content:center;gap:12px;height:26px;margin:1px 0 7px;font:9px 'Courier New',monospace;color:#555}.library-pages button{width:29px;height:23px;border:1px solid #aaa;background:#deded6;color:#444;font-size:15px}.library-empty{grid-column:1/-1;display:grid;place-items:center;font:11px 'Courier New',monospace;color:#666;min-height:80px}.emblem-grid{grid-auto-rows:1fr;min-height:228px}.emblem-grid button{min-height:0}.image-controls button{font-size:17px}
@media(max-width:520px){.emblem-grid{min-height:272px}.image-dialog{width:calc(100vw - 20px)}}
@media(max-height:600px){.library-search{margin-top:3px;gap:3px;flex-direction:row}.library-search input{height:24px;flex:1;min-width:80px}.library-categories{flex:1;gap:2px}.library-categories button{height:24px;font-size:12px}.library-pages{height:23px;margin-bottom:3px}.emblem-grid{min-height:145px}.emblem-grid button{height:66px}.emblem-grid img{height:32px;width:32px}}
@media(max-width:520px) and (max-height:600px){.library-search{flex-direction:column}.library-categories button{height:20px}.emblem-grid{min-height:204px}.emblem-grid button{height:66px}}
@media(max-width:900px) and (max-height:600px){.add-menu{gap:3px;padding:5px}.add-menu-head{height:18px}.add-menu .add-image-entry{height:29px}}
.layer-buttons .mutation-lock[aria-pressed=true]{background:#333;color:#eee;border-radius:3px}
#evolveBtn{font-size:13px;letter-spacing:-3px;padding-right:5px}
@media(max-width:520px){.plate-tools{gap:2px;padding-left:5px;padding-right:5px}.plate-tools .tool-key{min-width:25px;width:25px}.plate-tools .lfo-deck-key,#imagesBtn{width:auto;min-width:25px}.layer-buttons button{width:21px;min-height:28px}}

.action-icon{width:18px;height:18px;flex:none;vertical-align:middle;pointer-events:none}#uploadImage{display:inline-flex;align-items:center;justify-content:center;gap:6px}