:root{--c-bg:#0b0d18;--c-surface:#10121e;--c-panel:#0d0f1a;--c-border:#1c1f33;--c-border2:#252843;--c-text:#c0c8e4;--c-muted:#505878;--c-dim:#2a2e48;--c-accent:#00c8e8;--c-accent2:#9b72f8;--c-accentd:#008baa;--c-success:#34d399;--c-warn:#f59e0b;--c-code-bg:#070912;--sidebar-w:272px;--r:6px;--font-ui:"Barlow Condensed","Arial Narrow",sans-serif;--font-body:"Barlow Semi Condensed",sans-serif;--font-code:"Fira Code","Consolas",monospace}section#sbody{background:var(--c-bg);color:var(--c-text);display:flex;font-family:var(--font-ui);font-size:15px;height:100%;letter-spacing:.02em;overflow:hidden}section#sbody .font-heading,section#sbody h1,section#sbody h2,section#sbody h3,section#sbody h4,section#sbody h5,section#sbody h6{font-family:var(--font-ui)!important}::-webkit-scrollbar{height:5px;width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--c-dim);border-radius:3px}.sidebar{background:var(--c-panel);border-right:1px solid var(--c-border);display:flex;flex-direction:column;min-width:var(--sidebar-w);overflow:hidden;position:relative;width:var(--sidebar-w)}.sidebar:after{background:linear-gradient(180deg,var(--c-accent)0,transparent 60%);content:"";height:100%;opacity:.25;pointer-events:none;position:absolute;right:0;top:0;width:1px}.sidebar-head{border-bottom:1px solid var(--c-border);flex-shrink:0;padding:16px 18px 14px}.sidebar-head h1{align-items:center;color:#fff;display:flex;font-size:18px;font-weight:700;gap:9px;letter-spacing:.12em;text-transform:uppercase}.logo-glyph{background:var(--c-accent);border-radius:3px;display:grid;flex-shrink:0;gap:2px;grid-template-columns:repeat(4,1fr);height:22px;padding:3px;width:22px}.logo-glyph span{background:var(--c-panel);border-radius:1px;display:block}.logo-glyph span:nth-child(2n){background:rgba(0,200,232,.4)}.sidebar-head p{color:var(--c-muted);font-family:var(--font-code);font-size:12px;margin-top:3px}.sidebar-body{flex:1;overflow-y:auto;padding-bottom:16px}.s-sec{border-bottom:1px solid var(--c-border);padding:12px 18px}.s-lbl{align-items:center;color:var(--c-muted);display:flex;font-size:10px;font-weight:700;gap:7px;letter-spacing:.14em;margin-bottom:9px;text-transform:uppercase}.s-lbl:before{background:var(--c-accent);border-radius:1px;content:"";display:block;flex-shrink:0;height:11px;width:2px}.upload-zone{background:hsla(0,0%,100%,.02);border:1.5px dashed var(--c-border2);border-radius:var(--r);cursor:pointer;padding:14px 12px 12px;position:relative;text-align:center;transition:all .18s}.upload-zone.drag,.upload-zone:hover{background:rgba(0,200,232,.05);border-color:var(--c-accent)}.upload-zone input{cursor:pointer;inset:0;opacity:0;position:absolute}.uz-icon{font-size:20px;margin-bottom:5px}.uz-text{color:var(--c-muted);font-size:12px}.file-badge,.uz-text strong{color:var(--c-accent)}.file-badge{align-items:center;background:rgba(0,200,232,.07);border:1px solid rgba(0,200,232,.15);border-radius:var(--r);display:none;font-family:var(--font-code);font-size:11px;gap:8px;margin-top:8px;overflow:hidden;padding:6px 10px}.file-badge.visible{display:flex}.file-badge .fname{color:#7ae8f8;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-badge .fdims{color:var(--c-muted);flex-shrink:0;font-size:10px}select{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:hsla(0,0%,100%,.04);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath fill='%23505878' d='m0 0 4.5 5L9 0z'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;border:1px solid var(--c-border2);border-radius:var(--r);color:var(--c-text);cursor:pointer;font-family:var(--font-ui);font-size:13px;letter-spacing:.04em;outline:none;padding:7px 28px 7px 10px;transition:border-color .15s;width:100%}select:focus{border-color:var(--c-accent)}select optgroup{font-family:var(--font-ui)}select optgroup,select option{background:#12152a}.disp-chip{background:hsla(0,0%,100%,.02);border:1px solid var(--c-border2);border-radius:var(--r);display:none;line-height:1.5;margin-top:8px;padding:7px 10px}.disp-chip.visible{display:block}.disp-chip .dc-name{color:#e0e8ff;font-size:13px;font-weight:700}.disp-chip .dc-meta{color:var(--c-muted);font-family:var(--font-code);font-size:11px;margin-top:1px}.dc-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.dc-badge{border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.08em;padding:2px 7px;text-transform:uppercase}.b-vfd{background:rgba(0,160,200,.15);border:1px solid rgba(0,160,200,.3);color:#5ad8f0}.b-oled{background:rgba(100,120,255,.12);border:1px solid rgba(100,120,255,.25);color:#8aadff}.b-lcd{background:rgba(60,140,70,.15);border:1px solid rgba(60,140,70,.3);color:#70c87a}.b-led{background:rgba(200,80,0,.15);border:1px solid rgba(200,80,0,.3);color:#f84}.b-epaper{background:hsla(48,25%,61%,.12);border:1px solid hsla(48,25%,61%,.25);color:#c4ba8a}.b-tft{background:rgba(220,60,30,.14);border:1px solid rgba(220,60,30,.28);color:#f75}.b-ws{background:rgba(30,180,60,.12);border:1px solid rgba(30,180,60,.28);color:#4e8}.b-sharp{background:rgba(160,200,240,.1);border:1px solid rgba(160,200,240,.22);color:#ace}.b-dim{background:hsla(240,9%,43%,.1);border:1px solid var(--c-border2);color:var(--c-muted)}#ws2812Config{display:none;margin-top:9px}#ws2812Config.visible{display:block}.ws-grid{display:grid;gap:4px;grid-template-columns:1fr 1fr;margin-top:4px}.ws-opt{background:hsla(0,0%,100%,.03);border:1px solid var(--c-border2);border-radius:4px;color:var(--c-muted);cursor:pointer;font-family:var(--font-code);font-size:10px;line-height:1.3;padding:5px 6px;text-align:center;transition:all .13s}.ws-opt:hover:not(.active){background:hsla(0,0%,100%,.06);color:var(--c-text)}.ws-opt.active{background:rgba(44,238,136,.1);border-color:rgba(44,238,136,.3);color:#4e8}.ctrl-row{margin-top:9px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--c-accent) var(--pct,50%),var(--c-dim) var(--pct,50%));border-radius:2px;cursor:pointer;height:4px;outline:none;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--c-accent);border:2px solid var(--c-panel);border-radius:50%;box-shadow:0 0 8px rgba(0,200,232,.5);height:13px;-webkit-transition:transform .1s;transition:transform .1s;width:13px}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}.cb-row{align-items:center;cursor:pointer;display:flex;gap:9px;margin-top:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cb-row input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:hsla(0,0%,100%,.03);border:1.5px solid var(--c-border2);border-radius:3px;cursor:pointer;flex-shrink:0;height:15px;position:relative;transition:all .15s;width:15px}.cb-row input[type=checkbox]:checked{background:var(--c-accent);border-color:var(--c-accent)}.cb-row input[type=checkbox]:checked:after{border:2px solid #000;border-left:none;border-top:none;content:"";height:8px;left:3px;position:absolute;top:1px;transform:rotate(40deg);width:5px}.cb-row span{color:var(--c-muted);font-size:12px;letter-spacing:.05em}.rot-grid{display:grid;gap:4px;grid-template-columns:repeat(4,1fr);margin-top:2px}.rot-btn{background:hsla(0,0%,100%,.03);border:1px solid var(--c-border2);border-radius:4px;color:var(--c-muted);cursor:pointer;font-family:var(--font-code);font-size:11px;padding:5px 2px;text-align:center;transition:all .13s}.rot-btn.active{background:rgba(0,200,232,.15);border-color:rgba(0,200,232,.35);color:var(--c-accent)}.rot-btn:hover:not(.active){background:hsla(0,0%,100%,.06);color:var(--c-text)}.btn{align-items:center;border:none;border-radius:var(--r);cursor:pointer;display:flex;font-family:var(--font-ui);font-size:13px;font-weight:600;gap:6px;justify-content:center;letter-spacing:.06em;padding:9px 14px;text-transform:uppercase;transition:all .15s}.btn-primary{background:var(--c-accent);box-shadow:0 2px 16px rgba(0,200,232,.2);color:#000;width:100%}.btn-primary:hover{background:#10daf8;box-shadow:0 4px 20px rgba(0,200,232,.35)}.btn-primary:disabled{background:var(--c-dim);box-shadow:none;color:var(--c-muted);cursor:default}.btn-sm{background:hsla(0,0%,100%,.04);border:1px solid var(--c-border2);color:var(--c-muted);flex:1;font-size:11px;padding:6px 8px}.btn-sm:hover:not(:disabled){background:hsla(0,0%,100%,.08);border-color:var(--c-accent);color:var(--c-text)}.btn-sm:disabled{cursor:default;opacity:.35}.workspace{flex:1;min-width:0}.pane,.workspace{display:flex;flex-direction:column;overflow:hidden}.preview-pane{border-bottom:1px solid var(--c-border);flex:0 0 50%}.code-pane{flex:1;min-height:0}.pane-header{align-items:center;background:var(--c-panel);border-bottom:1px solid var(--c-border);display:flex;flex-shrink:0;gap:10px;height:40px;padding:0 14px}.pane-title{color:var(--c-muted);flex-shrink:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.tab-group{background:rgba(0,0,0,.3);border-radius:5px;display:flex;gap:1px;padding:2px}.tab-btn{background:transparent;border:none;border-radius:4px;color:var(--c-muted);cursor:pointer;font-family:var(--font-code);font-size:11px;letter-spacing:.03em;padding:3px 12px;transition:all .13s}.tab-btn.active{background:rgba(0,200,232,.15);color:var(--c-accent)}.pa-btn{align-items:center;background:transparent;border:1px solid var(--c-border2);border-radius:4px;color:var(--c-muted);cursor:pointer;display:flex;font-family:var(--font-ui);font-size:10px;gap:4px;letter-spacing:.06em;padding:3px 10px;text-transform:uppercase;transition:all .13s}.pa-btn:hover:not(:disabled){background:rgba(0,200,232,.07);border-color:var(--c-accent);color:var(--c-accent)}.pa-btn:disabled{cursor:default;opacity:.3}.display-stage{background:radial-gradient(ellipse at 50% 40%,#0e1428 0,#070912 55%,#04060e 100%);flex:1;justify-content:center;overflow:hidden;position:relative}.display-stage,.stage-empty{align-items:center;display:flex}.stage-empty{color:var(--c-dim);flex-direction:column;gap:8px;pointer-events:none}.stage-empty .se-icon{font-size:36px;opacity:.5}.stage-empty .se-text{font-size:12px;letter-spacing:.08em;text-transform:uppercase}.stage-empty .se-hint{color:var(--c-muted);font-family:var(--font-code);font-size:10px}#previewCanvas{animation:fadeIn .25s ease;border-radius:4px;display:none;max-height:calc(100% - 32px);max-width:calc(100% - 32px)}@keyframes fadeIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}#cropOverlay{background:#000;display:none;flex-direction:column;inset:0;overflow:hidden;position:absolute}#cropOverlay.active{display:flex}.crop-editor-region{cursor:-webkit-grab;cursor:grab;flex:1;min-height:0;overflow:hidden;position:relative}.crop-editor-region.grabbing{cursor:-webkit-grabbing!important;cursor:grabbing!important}#cropCanvas{display:block;height:100%;touch-action:none;width:100%}.crop-bar{align-items:center;background:rgba(4,6,18,.92);border-bottom:1px solid var(--c-border);border-top:1px solid var(--c-border);display:flex;flex-shrink:0;gap:8px;padding:6px 12px}.crop-bar-hint{color:var(--c-muted);flex:1;font-family:var(--font-code);font-size:10px;letter-spacing:.04em;pointer-events:none}.crop-zoom-val{font-size:11px;min-width:42px;text-align:right}.crop-bar-btn,.crop-zoom-val{color:var(--c-accent);flex-shrink:0;font-family:var(--font-code)}.crop-bar-btn{background:rgba(0,200,232,.07);border:1px solid rgba(0,200,232,.25);border-radius:4px;cursor:pointer;font-size:10px;letter-spacing:.05em;padding:3px 10px;transition:all .13s}.crop-bar-btn:hover{background:rgba(0,200,232,.18);border-color:rgba(0,200,232,.5)}#cropZoomSlider{flex-shrink:0;width:90px}.crop-preview-strip{align-items:center;background:radial-gradient(ellipse at 50% 60%,#0a0e1e 0,#04060e 100%);display:flex;flex-shrink:0;gap:12px;justify-content:center;min-height:60px;overflow:hidden;padding:10px 16px 12px}.cpstrip-label{color:var(--c-muted);flex-shrink:0;font-family:var(--font-code);font-size:9px;letter-spacing:.1em;text-transform:uppercase;transform:rotate(180deg);-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}#pipCanvas{border-radius:3px;flex-shrink:0;image-rendering:-moz-crisp-edges;image-rendering:pixelated}.ph-crop-toggle{background:transparent;border:1px solid var(--c-border2);border-radius:4px;color:var(--c-muted);cursor:pointer;display:none;font-family:var(--font-code);font-size:10px;letter-spacing:.04em;margin-right:4px;padding:3px 10px;transition:all .13s}.ph-crop-toggle:hover{background:rgba(0,200,232,.07);border-color:var(--c-accent);color:var(--c-accent)}.ph-crop-toggle.crop-active{background:rgba(0,200,232,.12);border-color:rgba(0,200,232,.4);color:var(--c-accent)}.code-scroll{background:var(--c-code-bg);flex:1;overflow:auto}#codeOutput{color:#8090b8;font-family:var(--font-code);font-size:12px;line-height:1.7;padding:14px 18px;-moz-tab-size:2;tab-size:2;white-space:pre}i.kw{color:#7ba3f8}i.kw,i.pp{font-style:normal}i.pp{color:#c084fc}i.ty{color:#4dddbb}i.cm,i.ty{font-style:normal}i.cm{color:#384a60}i.st{color:#d4a574}i.nm,i.st{font-style:normal}i.nm{color:#8fca9a}i.hl{color:var(--c-text);font-style:normal;font-weight:500}.resize-handle{background:var(--c-border);cursor:ns-resize;flex-shrink:0;height:5px;position:relative}.resize-handle:hover{background:var(--c-accent)}@media(max-width:680px){section#sbody{flex-direction:column}.sidebar{height:auto;max-height:48vh;min-width:0;overflow-y:auto;width:100%}.preview-pane{flex:0 0 180px}}