:root{--metal-light: #d8dde3;--metal-mid: #a7afb8;--metal-dark: #6f767e;--metal-shadow: #3a3e44;--bezel: #2a2d31;--frame-gap: 3px}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%;overflow:hidden;background:#1a1c1f;font-family:Consolas,SF Mono,Menlo,monospace;-webkit-user-select:none;user-select:none}.board{width:100vw;height:100vh;padding:var(--frame-gap);background:var(--bezel)}.frame-node{display:grid;gap:var(--frame-gap);width:100%;height:100%}.frame-leaf{width:100%;height:100%;min-width:0;min-height:0}.frame-leaf.powered-off .panel{filter:brightness(.74) saturate(.5)}.panel{position:relative;width:100%;height:100%;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;padding:4%;overflow:hidden;border-radius:5px;color:#e8eaed;background:linear-gradient(var(--plate-angle, 135deg),var(--metal-light) 0%,var(--metal-mid) 48%,var(--metal-dark) 100%),repeating-linear-gradient(var(--plate-angle, 135deg),rgba(255,255,255,.05) 0 2px,rgba(0,0,0,.045) 2px 4px);background-blend-mode:overlay;box-shadow:inset 1px 1px #ffffff80,inset -1px -1px #0000004d,inset 0 -3px 6px #00000052,0 0 0 1px #00000073,0 1px 2px #00000080}.panel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.2) 50%,transparent 62%);pointer-events:none}.panel-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--label-size, .7rem);letter-spacing:.06em;text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 1px rgba(0,0,0,.3);color:#2c2f33;line-height:1;z-index:1}.panel-label-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;color:#f5f7fa;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 4px rgba(0,0,0,.7);pointer-events:none}.led-well{position:relative;width:42cqmin;height:42cqmin;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 40%,var(--metal-dark),var(--metal-shadow));box-shadow:inset 0 2px 5px #000000b3,inset 0 -1px 1px #ffffff26;display:flex;align-items:center;justify-content:center;z-index:1}.led-bulb{width:70%;aspect-ratio:1;border-radius:50%;background:#0a0a0a;box-shadow:inset 0 1px 2px #ffffff1a}.led-bulb.on{background:radial-gradient(circle at 40% 35%,#fff 0%,var(--led-color) 45%,color-mix(in srgb,var(--led-color) 60%,black) 100%);box-shadow:0 0 6px 1px var(--led-color),0 0 14px 3px color-mix(in srgb,var(--led-color) 55%,transparent),inset 0 1px 2px #fff9}.button{position:relative;box-sizing:border-box;min-width:0;max-width:86cqw;max-height:78cqh;padding:5% 8%;border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;font:inherit;font-size:var(--label-size, .7rem);color:#2c2f33;cursor:pointer;border:1px solid rgba(0,0,0,.35);background:linear-gradient(180deg,var(--metal-light),var(--metal-mid));box-shadow:0 3px 0 var(--metal-dark),0 4px 6px #00000080,inset 0 1px #fff9;transform:translateY(0);transition:transform 60ms ease,box-shadow 60ms ease,background .12s ease;z-index:1}.button-face{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.45)}.button.transparent.on .button-face{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}.button.transparent{background:linear-gradient(180deg,#dce1e680,#969ea666);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.button.on{transform:translateY(3px);box-shadow:0 0 0 var(--metal-dark),0 1px 2px #00000080,inset 0 2px 4px #0006}.button.transparent.on{background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--lit-color) 80%,white),var(--lit-color));box-shadow:0 0 10px 2px var(--lit-color),inset 0 2px 4px #0000004d;color:#fff}.switch{position:relative;width:46cqmin;height:46cqmin;flex:none;border:none;background:none;padding:0;cursor:pointer;z-index:1;perspective:42cqmin;perspective-origin:50% 50%}.switch-base{position:absolute;left:50%;top:50%;width:28cqmin;height:28cqmin;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 35%,#fbfdff,#c6ccd3 45%,#6f767e);box-shadow:inset 0 2px 3px #fffc,inset 0 -3px 5px #0000008c,0 1px 3px #0009}.switch-stick{position:absolute;border-radius:999px;background:linear-gradient(90deg,#70767e,#fdfefe 42%,#c2c8cf 60%,#6b7178);box-shadow:0 1px 3px #0000008c,inset 0 0 2px #fff9;transition:transform .22s cubic-bezier(.45,.05,.4,1);will-change:transform}.switch-stick:after{content:"";position:absolute;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#cdd2d8 55%,#80868d);box-shadow:inset 0 0 2px #0000004d}.switch.vertical .switch-stick{left:50%;bottom:50%;width:11cqmin;height:27cqmin;transform-origin:50% 100%}.switch.vertical .switch-stick:after{width:100%;aspect-ratio:1;left:0;top:-5cqmin}.switch.vertical.on .switch-stick{transform:translate(-50%) rotateX(-26deg)}.switch.vertical.off .switch-stick{transform:translate(-50%) rotateX(-154deg)}.switch.horizontal .switch-stick{left:50%;top:50%;width:27cqmin;height:11cqmin;transform-origin:0% 50%}.switch.horizontal .switch-stick:after{height:100%;aspect-ratio:1;top:0;right:-5cqmin}.switch.horizontal.on .switch-stick{transform:translateY(-50%) rotateY(-26deg)}.switch.horizontal.off .switch-stick{transform:translateY(-50%) rotateY(-154deg)}.panel-meter .meter{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;z-index:1}.meter-box{position:relative;overflow:hidden;width:34cqmin;height:86cqh;max-height:86cqmin;border-radius:5px;background:linear-gradient(90deg,#2b2e33,#43474d 50%,#2b2e33);box-shadow:inset 0 2px 5px #000c,inset 0 0 0 1px #ffffff14,0 1px #ffffff40}.meter-ticks{position:absolute;top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(to top,rgba(0,0,0,.55) 0 1px,transparent 1px var(--tick, 10%))}.meter-indicator{position:absolute;background:var(--color-2, #ff3b30)}.panel-meter[data-subtype="0"] .meter-indicator{left:12%;right:12%;bottom:0;height:calc(var(--frac, 0) * 100%);border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--color-2, #ff3b30) 70%,black),var(--color-2, #ff3b30));box-shadow:0 0 6px color-mix(in srgb,var(--color-2, #ff3b30) 60%,transparent);transition:height .7s ease,width .7s ease}.panel-meter[data-subtype="1"] .meter-indicator{left:8%;right:8%;height:6%;min-height:2px;bottom:calc(var(--frac, 0) * 100%);transform:translateY(50%);border-radius:2px;box-shadow:0 0 5px var(--color-2, #ff3b30);transition:bottom .14s ease,left .14s ease}@container (aspect-ratio >= 1){.meter-box{width:86cqw;max-width:86cqmin;height:34cqmin;max-height:none}.meter-ticks{background-image:repeating-linear-gradient(to right,rgba(0,0,0,.55) 0 1px,transparent 1px var(--tick, 10%))}.panel-meter[data-subtype="0"] .meter-indicator{left:0;right:auto;top:12%;bottom:12%;height:auto;width:calc(var(--frac, 0) * 100%)}.panel-meter[data-subtype="1"] .meter-indicator{top:8%;bottom:8%;left:calc(var(--frac, 0) * 100%);right:auto;height:auto;width:6%;min-height:0;min-width:2px;transform:translate(-50%);transition:left .14s ease,bottom .14s ease}}.context-menu{position:fixed;z-index:1000;min-width:200px;background:#24272b;border:1px solid #3a3e44;border-radius:6px;box-shadow:0 8px 24px #0009;padding:4px;color:#e8eaed;font-size:13px}.context-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:inherit;padding:8px 12px;border-radius:4px;cursor:pointer;font:inherit}.context-menu button:hover:not(:disabled){background:#3a3e44}.context-menu button:disabled{opacity:.4;cursor:default}.context-sep{height:1px;background:#3a3e44;margin:4px 6px}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1100;background:#00000073;display:flex;align-items:center;justify-content:center}.dialog{width:min(440px,92vw);max-height:88vh;overflow:auto;background:#24272b;color:#e8eaed;border:1px solid #3a3e44;border-radius:10px;box-shadow:0 16px 48px #000000b3;font-size:13px}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #3a3e44;font-weight:600}.dialog-close{background:none;border:none;color:#aeb4bb;font-size:20px;line-height:1;cursor:pointer}.dialog-close:hover{color:#fff}.dialog-body{padding:16px}.dialog-footer{display:flex;gap:8px;align-items:center;padding:12px 16px;border-top:1px solid #3a3e44}.dialog-footer button,.dialog input[type=number],.dialog select{background:#2f3338;color:#e8eaed;border:1px solid #4a4f56;border-radius:6px;padding:6px 10px;font:inherit;cursor:pointer}.dialog-footer button.primary{background:#3b6ea5;border-color:#4d82bd}.dialog-footer button.primary:disabled{opacity:.45;cursor:default}.dialog-field{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}.dialog-label{width:120px;flex-shrink:0;color:#aeb4bb;padding-top:6px}.dialog-control{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.dialog-control input[type=text],.dialog input[type=text]{flex:1;background:#2f3338;color:#e8eaed;border:1px solid #4a4f56;border-radius:6px;padding:6px 10px;font:inherit}.dialog-note{color:#aeb4bb;margin:4px 0 0}.dialog-error{color:#ff8a80;font-size:12px}.radio{display:inline-flex;align-items:center;gap:6px;cursor:pointer}.radio.block{display:flex;margin-bottom:8px}.swatch-row{display:flex;flex-wrap:wrap;gap:6px}.swatch{width:26px;height:26px;border-radius:6px;border:2px solid transparent;cursor:pointer;outline:1px solid rgba(0,0,0,.4)}.swatch.selected{border-color:#fff;box-shadow:0 0 0 2px #3b6ea5}.swatch-none{background:#2f3338;color:#aeb4bb;display:flex;align-items:center;justify-content:center;font-size:14px}.pattern-row{display:flex;gap:4px}.pattern-step{width:30px;height:30px;border-radius:6px;border:1px solid #4a4f56;background:#2f3338;color:#8a9099;cursor:pointer;font:inherit}.pattern-step.on{background:#3b6ea5;border-color:#4d82bd;color:#fff}.range-value{min-width:40px}.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.color-cell{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}.color-cell input[type=color]{width:100%;height:40px;border:1px solid #4a4f56;border-radius:6px;background:none;cursor:pointer}.color-meta{display:flex;gap:6px;align-items:baseline}.color-meta em{color:#aeb4bb;font-style:normal;font-size:11px}