.synth-workspace{color:#dce9e9;background:#09171d;border:1px solid #36515a;border-radius:12px;overflow:hidden}.synth-toolbar,.synth-play-mode,.synth-keyboard header{border-bottom:1px solid #2e444d;flex-wrap:wrap;align-items:center;gap:16px;padding:16px 20px;display:flex}.synth-toolbar{background:#10232c;justify-content:space-between}.synth-toolbar strong,.synth-keyboard strong{color:#a5e9dc;align-items:center;gap:9px;display:flex}.synth-toolbar small{color:#aabfc6;margin-left:12px;font-weight:400}.synth-toolbar div{gap:6px;display:flex}.synth-workspace button{color:#e6f3f2;cursor:pointer;background:#172e38;border:1px solid #42606c;border-radius:6px;min-height:34px;padding:6px 10px}.synth-workspace button:hover,.synth-workspace button[aria-pressed=true]{background:#25453e;border-color:#98e1d3}.synth-workspace button:disabled{opacity:.3;cursor:default}.synth-workspace input,.synth-workspace select{accent-color:#9de6d7;color:#e3eeee;background:#132831;border:1px solid #45616a;border-radius:4px;padding:5px}.synth-play-mode{font-size:14px}.synth-play-mode span{color:#afc6ce;flex:1}.synth-play-mode label{align-items:center;gap:10px;display:flex}.synth-build{grid-template-columns:minmax(0,1fr) 250px;display:grid}.synth-map{background:radial-gradient(at 15% 20%,#14332e55,#0000 70%);grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:55px;min-height:420px;padding:24px 20px 48px;display:grid;position:relative}.synth-column{z-index:1;pointer-events:none}.synth-column>*{pointer-events:auto}.synth-column h3{letter-spacing:1.5px;color:#b1c9c8;margin:0 0 22px;font-size:12px}.synth-node{background:#142c30;border:1px solid #3d6262;border-left:3px solid #94e0cf;border-radius:7px;margin:0 0 28px;box-shadow:0 6px 14px #0004}.synth-node.shape,.synth-node.space{background:#2a2d25;border-color:#79704d #79704d #79704d #dab979}.synth-node.motion{background:#29283a;border-color:#716186 #716186 #716186 #c3a4ed}.synth-node.selected{outline-offset:3px;outline:1px solid #e5f3ed}.synth-node .synth-node-title{text-align:left;background:0 0;border:0;grid-template-columns:22px 1fr;width:100%;padding:15px 10px;display:grid}.synth-node-title small{color:#b5ccce;grid-column:2;margin-top:7px;font-size:12px}.synth-ports{justify-content:space-between;gap:2px;padding:5px 5px 8px;display:flex}.synth-ports button{background:0 0;border:0;padding:2px;font-size:12px}.synth-cables{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.synth-cables path{fill:none;stroke:#dfbc7f;stroke-width:2px}.synth-cables path.motion{stroke:#c1a1e7;stroke-dasharray:6 4}.synth-map-hint{color:#a6bfc6;font-size:12px;position:absolute;bottom:8px;left:20px}.synth-desk h3{gap:8px;font-size:16px;display:flex}.synth-desk p{color:#b5c9cf;font-size:14px;line-height:1.5}.synth-param{margin:16px 0;display:block}.synth-param span{justify-content:space-between;font-size:13px;display:flex}.synth-param output{color:#a4dece}.synth-param input{width:100%;padding:0}.synth-param button{margin-top:6px;font-size:12px}.synth-palette{grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;display:grid}.synth-palette button{text-align:left;align-items:center;gap:3px;padding:7px 4px;font-size:12px;display:flex}.synth-desk details{margin-top:20px}.synth-settings,.synth-sequencer{border-top:1px solid #34505a;padding:14px 20px}.synth-settings summary{cursor:pointer;color:#bdd9d5}.synth-wire-row{align-items:center;gap:12px;padding:8px 0;font-size:13px;display:flex}.synth-wire-row span{flex:1}.synth-wire-row label{align-items:center;gap:8px;display:flex}.synth-wire-row input{max-width:100px}.synth-envelope{grid-template-columns:repeat(4,1fr);gap:20px;padding:15px 0;display:grid}.synth-envelope label{font-size:14px;display:grid}.synth-sequence-options{flex-wrap:wrap;gap:10px;display:flex}.synth-sequence-options label{gap:6px;max-width:150px;font-size:12px;display:grid}.synth-steps{grid-template-columns:repeat(16,minmax(52px,1fr));gap:5px;margin:18px 0;padding-bottom:6px;display:grid;overflow-x:auto}.synth-steps>div{opacity:.65;background:#0b1b22;border:1px solid #34444f;border-radius:5px;padding:5px}.synth-steps>div.on{opacity:1;border-color:#82bcb3}.synth-steps button{background:#34665b;width:100%}.synth-steps label{color:#b0c9c9;margin-top:5px;font-size:10px;display:block}.synth-steps input{width:100%;padding:2px;font-size:12px}.synth-sequencer small{margin-left:12px}.synth-keyboard{background:#071015;border-top:1px solid #40515b}.synth-keyboard header{font-size:12px}.synth-keyboard header span{color:#a9c6ce;flex:1}.synth-keys{touch-action:none;justify-content:center;height:100px;padding:12px 22px 0;display:flex}.synth-keys button{touch-action:none;border-radius:0 0 5px 5px;flex-shrink:0;width:9%;max-width:95px;padding:0;position:relative}.synth-keys .white{color:#16232a;background:linear-gradient(#deded5,#a7b4af);border:1px solid #152426;height:88px}.synth-keys .black{color:#d7e6e4;z-index:2;background:linear-gradient(#0d1820,#253842);width:5%;max-width:48px;height:55px;margin-left:-2.5%;margin-right:-2.5%;box-shadow:0 4px 4px #000a}.synth-keys button span{position:absolute;bottom:8px;left:0;right:0}.synth-keys button.pressed{background:#87d7c5}.synth-message{background:#243c3d;padding:10px 20px}.synth-finished-panel{background:#243937 0 0/cover;border:3px double #9f9e86;border-radius:12px;min-height:260px;margin:20px;padding:30px}.synth-finished-panel header{justify-content:space-between;align-items:center;gap:20px;display:flex}.synth-finished-panel h2{font-family:Georgia,serif;font-size:34px;font-style:italic}.synth-finished-panel header span{letter-spacing:2px;font-size:10px}.synth-macros{grid-template-columns:repeat(4,1fr);gap:25px;margin-top:40px;display:grid}.synth-macros label{text-align:center;gap:15px;display:grid}.preset-columns:has(.preset-column-synths){grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:1100px){.synth-build{grid-template-columns:1fr}.synth-desk{border-top:1px solid #37505b;border-left:0}.synth-palette{grid-template-columns:repeat(4,1fr)}.preset-columns:has(.preset-column-synths){grid-template-columns:1fr}}@media (max-width:650px){.synth-map{gap:18px;min-width:530px;padding:20px 9px 65px}.synth-build{overflow-x:auto}.synth-node strong{font-size:12px}.synth-node-title small{font-size:10px}.synth-desk{min-width:300px}.synth-toolbar small{display:none}.synth-envelope,.synth-macros{grid-template-columns:repeat(2,1fr)}.synth-wire-row{flex-wrap:wrap}.synth-wire-row span{min-width:100%}.synth-finished-panel h2{font-size:24px}.synth-column h3{font-size:10px}}.synth-finished-panel{background:var(--face-surface);color:var(--face-ink);text-shadow:var(--face-text-shadow);position:relative;overflow:hidden}.synth-finished-panel header,.synth-macros{z-index:1;position:relative}.dream-app .synth-workspace{flex:1;min-height:0;overflow:auto}.synth-macros .hardware-control{min-width:0}.synth-finished-panel .knob-ticks{box-sizing:border-box;width:82px;max-width:82px;height:82px;min-height:82px;padding:8px;position:relative}.synth-finished-panel .photo-knob{aspect-ratio:1;width:auto;height:auto;position:absolute;inset:8px}.synth-workspace{--route-mint:#91dccc;--route-gold:#eac28d;--route-violet:#c6b5ef;background:#091319;border-color:#30434b;border-radius:10px;font-size:14px}.synth-workspace .routing-toolbar button{color:var(--route-violet);background:0 0;border:1px solid #35454f;border-radius:5px;align-items:center;gap:7px;padding:7px 10px;font-size:14px;display:flex}.synth-build{grid-template-columns:minmax(0,1fr) 318px;min-height:570px}.synth-map-area{background:radial-gradient(at 20% 10%,#16303255,#0000 65%),#091319;flex-direction:column;min-width:0;display:flex}.synth-play-mode{border:0;gap:8px;padding:16px 18px 0;font-size:12px}.synth-play-mode label{color:#bce6df;background:#14292d;border:1px solid #365253;border-radius:5px;gap:8px;padding:4px 8px}.synth-play-mode select{background:0 0;border:0;max-width:165px;padding:4px;font-size:12px}.synth-play-mode .synth-mode-help{flex-basis:100%;order:5;margin-top:2px;font-size:12px}.synth-play-mode button{background:0 0;border-color:#34434b;align-items:center;gap:6px;min-height:36px;padding:6px 8px;font-size:12px;display:flex}.synth-play-mode .route-blocks-toggle{color:#c9e2c9;background:#20372d;border-color:#45604e;margin-left:auto}.synth-map{background:0 0;flex:1;gap:64px;min-height:430px;padding:18px 18px 44px}.synth-column h3{letter-spacing:1px;text-transform:uppercase;color:var(--route-gold);gap:7px;margin:0 0 14px;font-weight:600;display:flex}.synth-column:first-of-type h3{color:var(--route-mint)}.synth-column h3 span{color:#64838a;font-weight:400}.synth-node{border-color:#345354;border-left-color:var(--route-mint);color:var(--route-mint);background:#14282c;margin-bottom:24px;position:relative;box-shadow:0 5px 16px #0003}.synth-node.shape,.synth-node.space{border-color:#665b45;border-left-color:var(--route-gold);color:var(--route-gold);background:#212923}.synth-node.motion{color:var(--route-violet)}.synth-node.output{color:#cbe5d4;background:#243730;border:1px solid #6c8175}.synth-node.selected{border-color:currentColor;outline:none;box-shadow:0 0 0 2px #91dccc20}.synth-node .synth-node-title{color:inherit;align-items:center;min-height:65px;padding:12px 10px 6px;font-size:15px}.synth-node-title small{margin-top:5px;font-weight:400}.synth-ports{border-top:1px solid #ffffff12;padding:4px 8px 7px}.synth-ports button{min-height:24px;color:inherit}.synth-ports button:disabled{visibility:hidden}.synth-cables path{stroke-width:1.6px}.synth-desk{background:#132129;border-left:1px solid #31444b;padding:0}.synth-desk h3{margin:20px 0 10px;font-size:14px}.synth-desk .synth-palette button{color:#cce4e6;background:#1b343b;border:1px solid #42646a;border-radius:4px;gap:7px;min-height:43px;padding:8px}.synth-desk .synth-param input{background:0 0;border:0;height:16px}.synth-map-hint{color:#809da6;left:18px;right:18px}@media (max-width:1100px){.synth-build{grid-template-columns:minmax(0,1fr) 280px}.synth-map{gap:30px}.synth-palette{grid-template-columns:1fr 1fr}}@media (max-width:800px){.synth-build{grid-template-columns:1fr}.synth-desk{border-top:1px solid #31444b;border-left:0}.synth-workspace .routing-toolbar{flex-wrap:wrap}.synth-workspace .routing-toolbar nav{margin-left:0}.synth-workspace .routing-toolbar>div>span{display:none}}.synth-map{gap:64px;padding-left:28px;padding-right:28px}.synth-node{overflow:visible}.synth-ports{align-items:center;min-height:30px;padding:0;display:flex;position:relative}.synth-ports .synth-output-socket{text-align:right;justify-content:flex-end;margin-left:auto}.synth-workspace .synth-input-socket,.synth-workspace .synth-output-socket{touch-action:none;cursor:crosshair;min-height:28px;color:inherit;background:0 0;border:0;border-radius:0;align-items:center;gap:6px;padding:4px 12px;font-size:11px;display:flex;position:relative}.synth-input-socket i,.synth-output-socket i{pointer-events:none;z-index:3;background:#102126;border:2px solid;border-radius:50%;width:10px;height:10px;position:absolute;top:50%;transform:translateY(-50%)}.synth-input-socket i{left:-7px}.synth-output-socket i{right:-6px}.synth-control-ports .synth-input-socket{color:#c6b5ef;border-top:1px solid #ffffff0c;width:100%}.synth-control-ports{position:relative}.synth-input-socket b{margin-left:auto;font-size:10px;font-weight:400}.synth-workspace .valid-target{color:#bdfff0;cursor:crosshair;background:#24443a;box-shadow:inset 0 0 0 1px #91dccc}.synth-workspace .invalid-target{opacity:.25;cursor:not-allowed}.synth-workspace .hover-target{background:#3e6350;box-shadow:inset 0 0 0 2px #dbffc3}.synth-workspace .valid-target i{box-shadow:0 0 0 4px #91dccc33}.synth-cables{z-index:0}.synth-cables path{stroke-linejoin:round;stroke-linecap:round}.synth-wire-preview{color:#bdf4d9}.synth-wire-preview path{stroke:currentColor;stroke-width:2.5px}.synth-workspace[data-wiring] .synth-map-hint{color:#bdf4d9}.synth-column h3{white-space:nowrap}.synth-input-socket:before,.synth-output-socket:before{content:"";z-index:2;position:absolute;inset:0 -12px}.synth-input-socket span,.synth-output-socket span{pointer-events:none}.synth-control-ports .synth-input-socket:not(.valid-target){color:#b7add0}.synth-node-actions{justify-content:space-between;align-items:center;padding:3px 4px 0 7px;display:flex}.synth-workspace .synth-node-actions button{min-height:25px;color:inherit;background:0 0;border:0;align-items:center;gap:5px;padding:2px 5px;display:flex}.synth-workspace .synth-node-actions .synth-grab{cursor:grab;touch-action:none;opacity:.7;font-size:10px}.synth-workspace .synth-node-actions .synth-grab:active{cursor:grabbing;opacity:1}.synth-workspace .synth-delete:hover{color:#ffe1db;background:#643b36}.synth-node:has(.synth-grab:active){z-index:5;box-shadow:0 12px 28px #0008}.synth-map{overflow:visible}.synth-map-area{overflow:auto}.synth-node-actions{height:0;padding:0}.synth-workspace .synth-node-actions .synth-grab{opacity:1;width:24px;height:28px;min-height:28px;color:inherit;z-index:4;place-items:center;padding:4px;display:grid;position:absolute;top:50%;right:13px;transform:translateY(-50%)}.synth-workspace .synth-node-actions .synth-delete{z-index:4;width:23px;height:23px;min-height:23px;position:absolute;top:3px;right:4px}.synth-node .synth-node-title{padding-right:30px}.synth-ports{position:static}.synth-workspace .synth-output-socket.route-output-port{z-index:4;touch-action:none;cursor:grab;background:0 0;border:0;place-items:center;width:24px;height:28px;min-height:28px;padding:0;display:grid;position:absolute;top:50%;right:-13px;transform:translateY(-50%)}.synth-output-socket.route-output-port i{background:#0b1920;border:2px solid;border-radius:50%;width:10px;height:10px;transition:box-shadow .15s,background .15s;display:block;position:static;transform:none;box-shadow:0 0 0 3px #0b192088}:is(.synth-output-socket.route-output-port:hover i,.synth-output-socket.route-output-port:focus-visible i){box-shadow:0 0 0 5px color-mix(in srgb,currentColor 18%,transparent);background:currentColor}.synth-output-socket.route-output-port:active{cursor:grabbing}.synth-output-socket.route-output-port:before{display:none}.synth-input-socket i{background:#0b1920;box-shadow:0 0 0 3px #0b192088}.synth-node.sound:nth-of-type(2){color:#d4dd82;border-left-color:#d4dd82}.synth-node.sound:nth-of-type(3){color:#b6b9f4;border-left-color:#b6b9f4}.synth-node.sound:nth-of-type(4){color:#efb48c;border-left-color:#efb48c}.synth-map{isolation:isolate}.synth-cables{z-index:6;pointer-events:none}.synth-cables path{vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px #061013)}.synth-wire-preview path{stroke:#c9ffe9;stroke-width:3px;filter:drop-shadow(0 0 3px #0d1e20)}.synth-wire-preview rect{fill:#163c32;stroke:#c9ffe9;stroke-width:2px}.synth-output-socket.route-output-port i{pointer-events:auto}.synth-workspace .synth-node{display:block}.synth-workspace .synth-ports{display:block;position:static}.synth-workspace .synth-output-socket.route-output-port{inset:50% -13px auto auto}.synth-node.selected{--selected-glow:#91dccc;border-color:var(--selected-glow);animation:2s ease-in-out infinite synth-selected-pulse}.synth-node.shape.selected,.synth-node.space.selected{--selected-glow:#eac28d}.synth-node.motion.selected{--selected-glow:#c6b5ef}.synth-node.output.selected{--selected-glow:#cbe5d4}@keyframes synth-selected-pulse{0%,to{box-shadow:0 0 0 2px color-mix(in srgb,var(--selected-glow) 45%,transparent),0 0 12px color-mix(in srgb,var(--selected-glow) 18%,transparent)}50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--selected-glow) 75%,transparent),0 0 26px color-mix(in srgb,var(--selected-glow) 42%,transparent),inset 0 0 18px color-mix(in srgb,var(--selected-glow) 8%,transparent)}}@media (prefers-reduced-motion:reduce){.synth-node.selected{box-shadow:0 0 0 2px var(--selected-glow),0 0 16px color-mix(in srgb,var(--selected-glow) 30%,transparent);animation:none}}.synth-finished-panel{isolation:isolate;background-color:#a3977c;background-image:var(--face-grain,linear-gradient(transparent,transparent)),var(--face-surface),url(/materials/aged-metal.png);border-color:var(--face-edge);background-position:50%;background-size:auto,cover,cover}.synth-finished-panel .faceplate-image-layer{z-index:0}.synth-finished-panel .hardware-label,.synth-finished-panel .hardware-control output{color:var(--face-ink);text-shadow:var(--face-text-shadow)}.synth-audio-status{color:#b8d7d2;background:#10252a;border-bottom:1px solid #30454c;align-items:center;gap:12px;padding:10px 18px;font-size:13px;line-height:1.5;display:flex}.synth-audio-status.warning{color:#ffe0a9;background:#342b1c;border-color:#745e38}.fitted-studio .studio-dialog.synth-faceplate-dialog{width:min(1180px,100vw - 32px);height:auto;max-height:calc(100dvh - 32px);overflow:hidden}.fitted-studio .synth-faceplate-dialog .dialog-content{overscroll-behavior:contain;height:auto;max-height:calc(100dvh - 34px);padding:48px 24px 24px;overflow-y:auto}.synth-faceplate-dialog .dialog-close{z-index:5;background:#172a33;margin:0;position:absolute;top:12px;right:16px}.synth-faceplate-dialog .faceplate-workspace{grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);align-items:start;height:auto;min-height:0}.synth-faceplate-dialog .faceplate-preview{min-width:0;display:block;position:sticky;top:0}.synth-faceplate-dialog .synth-finished-panel{width:100%;min-height:260px;margin:0;padding:24px 18px}.synth-faceplate-dialog .synth-macros{gap:8px}.synth-faceplate-dialog .synth-finished-panel h2{font-size:28px}.synth-faceplate-dialog .faceplate-preview .sf-panel-photo{display:block}.synth-faceplate-dialog .faceplate-workspace>*{max-height:none;overflow:visible}.synth-faceplate-dialog .faceplate-preview{overflow:visible}@media (max-width:800px){.synth-faceplate-dialog .faceplate-workspace{grid-template-columns:1fr}.synth-faceplate-dialog .faceplate-preview{position:static}.fitted-studio .synth-faceplate-dialog .dialog-content{padding:48px 16px 20px}}.synth-node.sound{color:var(--module-colour)!important;border-left-color:var(--module-colour)!important}.synth-node.selected{--selected-glow:var(--module-colour)}.synth-connection-help{color:#9fbcc3;margin:14px 0;font-size:13px}.synth-connection-card{background:#101f26;border:1px solid #30464d;border-radius:7px;grid-template-columns:minmax(150px,1fr) 110px minmax(150px,1fr) minmax(140px,.65fr) 34px;align-items:center;gap:14px;margin:10px 0;padding:12px;display:grid}.synth-workspace .synth-connection-end{text-align:left;border-left:3px solid var(--from-colour);min-height:62px;color:var(--from-colour);background:#152a2e;align-items:center;gap:10px;padding:10px 12px;display:flex}.synth-workspace .synth-connection-end.destination{color:var(--to-colour);border-left-color:var(--to-colour)}.synth-connection-end span{gap:5px;display:grid}.synth-connection-end strong{font-size:14px}.synth-connection-end small{color:#b8cdd1;font-size:12px}.synth-connection-arrow{color:var(--to-colour);align-items:center;padding-top:15px;display:flex;position:relative}.synth-connection-arrow span{color:#aec7cd;text-align:center;font-size:10px;position:absolute;top:-5px;left:0;right:0}.synth-connection-arrow i{background:linear-gradient(to right,var(--from-colour),var(--to-colour));border-radius:3px;flex:1;height:3px}.synth-connection-arrow svg{margin-left:-4px}.synth-connection-arrow.movement i{-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 7px,#0000 7px 11px);mask-image:repeating-linear-gradient(90deg,#000 0 7px,#0000 7px 11px)}.synth-connection-amount{gap:8px;font-size:12px;display:grid}.synth-connection-amount span{justify-content:space-between;gap:8px;display:flex}.synth-connection-amount output{color:#c7e8e0}.synth-connection-amount input{width:100%;accent-color:var(--from-colour);padding:0}@media (max-width:850px){.synth-connection-card{grid-template-columns:minmax(100px,1fr) 70px minmax(100px,1fr);gap:10px}.synth-connection-amount{grid-column:1/3}.synth-connection-remove{justify-self:end}.synth-workspace .synth-connection-end{padding:8px}.synth-connection-end svg{display:none}}.synth-control-options{color:#b9d1d4;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin-top:14px;font-size:13px;display:flex}.synth-control-options p{margin:0}.synth-control-options label{align-items:center;gap:8px;display:flex}.synth-control-explanation{color:#b0c8cf;margin-top:8px;font-size:12px;line-height:1.5}.synth-envelope select{min-width:0;max-width:100%}.synth-envelope label{min-width:0}.synth-finished-panel{box-sizing:border-box;width:calc(100% - 40px);max-width:829px;min-height:260px;margin:20px auto;padding:30px}.synth-faceplate-dialog .synth-finished-panel{width:100%;max-width:829px}.synth-finished-panel .knob-ticks{margin:0 auto}
