:root{--bg:#090b0f;--panel:#111419;--panel-2:#171b21;--line:#292e36;--line-soft:#20252c;--text:#f1f4f7;--muted:#7f8995;--accent:#35a7ff;--accent-hover:#65bcff;--accent-border:#276b9e;--accent-soft:#11263a;--cyan:#73e9ff;--danger:#ff6b71}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:13px;overflow-x:hidden}button,input,select{font:inherit}button{color:inherit}button,input,select{outline:none}button:focus-visible,input:focus-visible,select:focus-visible{box-shadow:0 0 0 2px #35a7ff6b}.app-shell{background:radial-gradient(circle at 52% -10%,#1a2027 0,#0c0e12 34%,#090b0f 65%);min-height:100vh}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:5;background:#0c0e12eb;grid-template-columns:280px 1fr 280px;align-items:center;height:74px;padding:0 18px;display:grid;position:relative}.brand{align-items:center;gap:11px;display:flex}.vpx-symbol{background:linear-gradient(145deg,#17344b,#0d1822);border:1px solid #315c7c;border-radius:8px;flex:0 0 34px;width:34px;height:34px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #081019,0 0 18px #35a7ff1f}.vpx-symbol i{background:linear-gradient(180deg, #8bd1ff, var(--accent));border-radius:2px;width:3px;height:24px;position:absolute;top:5px;left:15px;transform:rotate(42deg);box-shadow:0 0 8px #35a7ff61}.vpx-symbol i:last-child{transform:rotate(-42deg)}.brand-copy h1{letter-spacing:1.65px;margin:0;font-size:12px;font-weight:500;line-height:1.1}.brand-copy h1 strong{color:#fff;letter-spacing:1px;font-size:15px;font-weight:820}.brand-copy p{color:#71808e;letter-spacing:.75px;text-transform:uppercase;margin:4px 0 0;font-size:8px}.canvas-size{border:1px solid var(--line);background:#101318;border-radius:10px;justify-self:center;align-items:end;gap:8px;padding:7px 10px;display:flex}.canvas-size .compact-field{grid-template-columns:18px 1fr;align-items:center;gap:5px;width:112px;display:grid}.canvas-size .compact-field>span{color:#5d6672;margin:0;font-size:10px}.canvas-size input{text-align:right;background:0 0;border:0;padding:0 4px;font-weight:650}.canvas-size .number-wrap{background:0 0;border:0}.size-x{color:#4f5863;padding-bottom:2px}.ratio-pill{color:#10130b;background:var(--accent);border-radius:999px;align-self:center;margin-left:5px;padding:5px 8px;font-size:10px;font-weight:750}.top-actions{justify-self:end;align-items:center;gap:12px;display:flex}.local-note{color:var(--muted);align-items:center;gap:6px;font-size:10px;display:flex}.local-note i{background:#6ddb92;border-radius:50%;width:6px;height:6px;box-shadow:0 0 8px #6ddb92}.workspace{grid-template-columns:246px minmax(400px,1fr) 278px;min-height:calc(100vh - 74px);display:grid}.panel{background:linear-gradient(#12151afa,#0d1014fa)}.layers-panel{border-right:1px solid var(--line);flex-direction:column;min-height:calc(100vh - 74px);display:flex}.properties-panel{border-left:1px solid var(--line);min-height:calc(100vh - 74px)}.panel-heading{border-bottom:1px solid var(--line-soft);justify-content:space-between;align-items:center;min-height:69px;padding:15px 15px 13px;display:flex}.eyebrow{color:#69727e;letter-spacing:1.4px;font-size:9px;font-weight:700}.panel-heading h2{margin:4px 0 0;font-size:14px;font-weight:650}.panel-heading h2 em{color:#12150b;background:var(--accent);border-radius:50%;place-items:center;min-width:18px;height:18px;margin-left:5px;font-size:9px;font-style:normal;display:inline-grid}.button{appearance:none;border:1px solid var(--line);cursor:pointer;background:#171b21;border-radius:7px;justify-content:center;align-items:center;gap:7px;transition:all .16s;display:inline-flex}.button:hover{background:#1d2229;border-color:#49515b}.icon-button{width:35px;height:35px;padding:0}.icon-button.accent{color:#08131c;background:var(--accent);border-color:var(--accent)}.icon-button.accent:hover{background:var(--accent-hover)}.icon-button.small{border-radius:6px;width:29px;height:29px}.icon-button.active{color:var(--accent);border-color:var(--accent-border);background:var(--accent-soft)}.icon-button.danger:hover{color:var(--danger);border-color:#6d3037}.layer-tools{border-bottom:1px solid var(--line-soft);gap:5px;padding:9px 12px;display:flex}.layer-list{flex:1;max-height:calc(100vh - 252px);padding:7px;overflow-y:auto}.layer-row{text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;grid-template-columns:22px 42px minmax(0,1fr) 18px;align-items:center;gap:7px;width:100%;height:58px;margin-bottom:3px;padding:5px;display:grid}.layer-row:hover{background:#171b21}.layer-row.selected{background:var(--accent-soft);border-color:var(--accent-border);box-shadow:inset 2px 0 0 var(--accent)}.layer-index{color:#59616b;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.thumb{background:#080a0d;border:1px solid #343a43;border-radius:5px;width:42px;height:42px;overflow:hidden}.thumb img{object-fit:cover;width:100%;height:100%}.layer-info{min-width:0}.layer-info strong,.layer-info small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.layer-info strong{font-size:11px;font-weight:620}.layer-info small{color:#707985;letter-spacing:.4px;margin-top:5px;font-size:8px}.row-icons{color:#69727c;flex-direction:column;gap:4px;display:flex}.row-icons i{cursor:pointer;display:flex}.row-icons i:hover{color:var(--text)}.empty-layers{color:var(--muted);flex-direction:column;align-items:center;gap:8px;padding:50px 10px;display:flex}.add-media{color:#c9d0d8;border-style:dashed;height:38px;margin:10px 12px 14px}.stage-column{background:#0a0c10;flex-direction:column;min-width:0;display:flex}.stage-toolbar{border-bottom:1px solid var(--line-soft);justify-content:space-between;align-items:center;gap:12px;height:69px;padding:8px 12px;display:flex}.preset-scroller{scrollbar-width:none;gap:6px;display:flex;overflow-x:auto}.preset-scroller::-webkit-scrollbar{display:none}.preset-scroller button{color:#9ba4ae;text-align:left;cursor:pointer;background:#111419;border:1px solid #292e36;border-radius:6px;flex:none;min-width:84px;height:43px;padding:6px 9px}.preset-scroller button:hover,.preset-scroller button.active{color:var(--text);border-color:var(--accent-border);background:var(--accent-soft)}.preset-scroller strong,.preset-scroller span{display:block}.preset-scroller strong{font-size:9px;font-weight:650}.preset-scroller span{color:#6e7782;margin-top:4px;font-family:ui-monospace,monospace;font-size:8px}.preset-scroller button.active span{color:#78bff0}.view-tools{align-items:center;gap:5px;display:flex}.zoom-value{color:#8f98a3;text-align:right;width:36px;font-size:10px}.zoom-slider{width:76px;accent-color:var(--accent)}.curve-toggle{color:#8c96a1;letter-spacing:.7px;cursor:pointer;background:#14181d;border:1px solid #30363e;border-radius:6px;justify-content:center;align-items:center;gap:5px;min-width:67px;height:29px;padding:0 8px;font-size:8px;font-weight:750;display:inline-flex}.curve-toggle span{color:#0e1207;background:#68717b;border-radius:3px;place-items:center;height:18px;padding:0 4px;font-size:8px;display:inline-grid}.curve-toggle.active{color:var(--accent);border-color:var(--accent-border);background:var(--accent-soft)}.curve-toggle.active span{background:var(--accent)}.curve-value{color:#8da8bd;text-align:right;min-width:29px;font-size:9px}.curve-slider{width:68px;accent-color:var(--accent)}.camera-tools{color:#77c7ff;background:#11161c;border:1px solid #30363e;border-radius:6px;align-items:center;gap:5px;height:31px;padding:0 7px;display:flex}.camera-tools select{color:#d7e5ef;background:#11161c;border:0;border-left:1px solid #2d3540;width:58px;height:24px;padding-left:5px;font-size:9px}.camera-axis{color:#788896;align-items:center;gap:2px;font:700 8px ui-monospace,monospace;display:flex}.camera-axis input{width:38px;accent-color:var(--accent)}.camera-axis.rotation-axis{color:#6fc3ff}.camera-axis.rotation-axis input{width:47px}.floor-color{color:#788896;cursor:pointer;background:#11161c;border:1px solid #30363e;border-radius:6px;align-items:center;gap:6px;height:31px;padding:0 7px;font:700 8px ui-monospace,monospace;display:flex}.floor-color input{cursor:pointer;background:#090c10;border:1px solid #3b4652;border-radius:4px;width:22px;height:22px;padding:2px}.stage-area{background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:32px 32px;flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:0;padding:42px 28px 28px;display:flex;position:relative;overflow:hidden}.ruler{color:#4f5863;justify-content:space-between;width:82%;max-width:1100px;margin-bottom:9px;font-family:ui-monospace,monospace;font-size:8px;display:flex}.ruler span:before{content:"";background:#3b424b;width:1px;height:5px;margin:0 auto 3px;display:block}.led-frame{background:#020303;max-width:100%;max-height:62vh;transition:width .2s;position:relative;box-shadow:0 22px 60px #0009,0 0 0 1px #323941,0 0 0 6px #0f1216,0 0 0 7px #252a31}.stage{touch-action:none;isolation:isolate;background:#050708;width:100%;height:100%;position:relative;overflow:hidden}.stage.show-grid:after{content:"";pointer-events:none;z-index:300;background-image:linear-gradient(#ffffff16 1px,#0000 1px),linear-gradient(90deg,#ffffff16 1px,#0000 1px);background-size:10% 25%;position:absolute;inset:0;box-shadow:inset 0 0 50px #00000040}.led-frame.curve-mode{background:#090c11;max-height:68vh;box-shadow:0 30px 75px #000000c7,0 0 0 1px #39414a,0 0 0 6px #0d1014,0 0 0 7px #293039}.curve-mode .stage{z-index:2;box-shadow:inset 0 0 40px #00000059}.curve-mode .stage.show-grid:after{display:none}.curve-canvas{z-index:5;pointer-events:auto;cursor:grab;touch-action:none;width:100%;height:100%;position:absolute;inset:0}.curve-canvas.dragging{cursor:grabbing}.camera-monitor{z-index:12;pointer-events:none;background:#05070a;border:1px solid #596979;border-radius:8px;width:clamp(260px,43%,460px);position:absolute;bottom:10px;right:12px;overflow:hidden;box-shadow:0 16px 45px #000c,0 0 0 4px #080b0fc7,0 0 22px #35a7ff14}.monitor-head{color:#aeb9c4;letter-spacing:.65px;background:linear-gradient(#1b222a,#11161c);border-bottom:1px solid #39434e;justify-content:space-between;align-items:center;height:25px;padding:0 9px;font:700 8px ui-monospace,monospace;display:flex}.monitor-head span{align-items:center;gap:5px;display:flex}.monitor-head i{background:#67e58a;border-radius:50%;width:5px;height:5px;box-shadow:0 0 7px #67e58acc}.monitor-head b{color:#72c8ff;font-weight:700}.camera-monitor canvas{aspect-ratio:16/9;background:#030405;width:100%;display:block}.curve-mode .media-layer{pointer-events:none;box-shadow:none!important;outline:0!important}.curve-mode .media-layer>img,.curve-mode .media-layer>video,.curve-mode .resize-handle,.curve-mode .layer-tag{opacity:0}.curve-mode .safe-area,.curve-mode .center-cross,.curve-mode .frame-corner{display:none}.media-layer{cursor:move;-webkit-user-select:none;user-select:none;z-index:2;transform-origin:50%;position:absolute}.media-layer img,.media-layer video{pointer-events:none;width:100%;height:auto;transform:scale(var(--flip-x,1), var(--flip-y,1));display:block}.media-layer.active{outline:1px solid var(--accent);outline-offset:2px}.media-layer.locked{cursor:not-allowed}.resize-handle{background:var(--accent);cursor:nwse-resize;border:2px solid #10130d;border-radius:2px;width:12px;height:12px;position:absolute;bottom:-6px;right:-6px}.layer-tag{text-overflow:ellipsis;white-space:nowrap;background:var(--accent);color:#11140a;letter-spacing:.3px;pointer-events:none;max-width:170px;padding:3px 6px;font-size:8px;font-weight:700;position:absolute;top:-25px;left:-3px;overflow:hidden}.safe-area{pointer-events:none;z-index:350;border:1px dashed #ffffff61;position:absolute;inset:5%}.safe-area span{color:#ffffff8c;letter-spacing:1px;font-size:7px;position:absolute;top:2px;right:2px}.center-cross{z-index:360;pointer-events:none;opacity:.7;position:absolute;top:50%;left:50%}.center-cross i{background:#35a7ffb3;position:absolute}.center-cross i:first-child{width:20px;height:1px;left:-10px}.center-cross i:last-child{width:1px;height:20px;top:-10px}.frame-corner{border-color:var(--accent);z-index:400;pointer-events:none;border-style:solid;width:13px;height:13px;position:absolute}.frame-corner.tl{border-width:2px 0 0 2px;top:-3px;left:-3px}.frame-corner.tr{border-width:2px 2px 0 0;top:-3px;right:-3px}.frame-corner.bl{border-width:0 0 2px 2px;bottom:-3px;left:-3px}.frame-corner.br{border-width:0 2px 2px 0;bottom:-3px;right:-3px}.stage-meta{color:#5b6470;letter-spacing:.7px;gap:18px;width:82%;max-width:1100px;margin-top:13px;font-size:8px;display:flex}.stage-meta span:first-child{color:#8f9a83}.green-dot{background:#71df86;border-radius:50%;width:5px;height:5px;margin-right:4px;display:inline-block;box-shadow:0 0 7px #71df86}.drop-hint{z-index:500;color:var(--accent);border:2px dashed var(--accent);background:#091927e6;flex-direction:column;justify-content:center;align-items:center;gap:7px;display:flex;position:absolute;inset:0}.led-frame.drag-over{box-shadow:0 0 38px #35a7ff45, 0 0 0 1px var(--accent)}.properties-body{padding:14px}.field{margin-bottom:13px;display:block}.field>span{color:#87919d;margin-bottom:6px;font-size:9px;display:block}.field input:not([type=range]),.field select{color:#e5e9ed;background:#0d1014;border:1px solid #2c323a;border-radius:5px;width:100%;height:34px;padding:0 9px}.field input:focus,.field select:focus{border-color:var(--accent-border)}.property-group{border-top:1px solid var(--line-soft);margin-top:15px;padding:15px 0 4px}.group-title{color:#68717c;letter-spacing:1.1px;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:9px;font-weight:700;display:flex}.group-title button{color:#7f8994;cursor:pointer;background:0 0;border:0;align-items:center;gap:4px;font-size:9px;display:flex}.group-title button:hover{color:var(--text)}.two-cols{grid-template-columns:1fr 1fr;gap:7px;display:grid}.number-wrap{background:#0d1014;border:1px solid #2c323a;border-radius:5px;align-items:center;height:34px;padding:0 7px;display:flex}.number-wrap:focus-within{border-color:var(--accent-border)}.number-wrap input{color:#e5e9ed;width:100%;min-width:0;background:0 0!important;border:0!important;height:30px!important;padding:0!important}.number-wrap b{color:#606a75;flex:none;font-size:8px;font-weight:500}.fit-buttons{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.fit-buttons button{color:#a4adb7;cursor:pointer;background:#161a20;border:1px solid #2b3138;border-radius:5px;padding:7px 2px;font-size:9px}.fit-buttons button:hover{border-color:var(--accent-border);color:var(--accent)}.flip-buttons{grid-template-columns:repeat(2,1fr);gap:5px;margin-top:6px;display:grid}.flip-buttons button{color:#a4adb7;cursor:pointer;background:#161a20;border:1px solid #2b3138;border-radius:5px;height:30px;font-size:9px;font-weight:650}.flip-buttons button:hover,.flip-buttons button.active{border-color:var(--accent-border);color:var(--accent);background:var(--accent-soft)}.range-field span{justify-content:space-between;display:flex}.range-field span b{color:#aeb7c0;font-weight:600}.range-field input{width:100%;accent-color:var(--accent)}.source-card{border:1px solid var(--line);background:#0e1115;border-radius:7px;align-items:center;gap:10px;margin-top:12px;padding:10px;display:flex}.source-icon{width:34px;height:34px;color:var(--cyan);background:#172127;border:1px solid #273840;border-radius:6px;place-items:center;display:grid}.source-card strong,.source-card small{display:block}.source-card strong{font-size:10px}.source-card small{color:#6d7681;margin-top:4px;font-size:8px}.no-selection{color:#707985;text-align:center;flex-direction:column;align-items:center;gap:8px;padding:70px 25px;display:flex}.no-selection strong{color:#aab2ba;margin-top:4px}.no-selection span{font-size:10px;line-height:1.5}input[type=number]::-webkit-inner-spin-button{opacity:.25}@media (width<=1050px){.topbar{grid-template-columns:220px 1fr auto}.local-note{display:none}.workspace{grid-template-columns:220px minmax(380px,1fr)}.properties-panel{border-left:0;border-top:1px solid var(--line);grid-column:1/-1;min-height:0}.properties-body{grid-template-columns:1fr 2fr 1fr;gap:18px;display:grid}.property-group{border-top:0;margin-top:0;padding-top:0}}@media (width<=760px){.topbar{grid-template-columns:1fr auto;gap:8px;height:auto;min-height:70px;padding:10px 12px}.canvas-size{grid-area:2/1/auto/-1;justify-content:center;width:100%}.workspace{flex-direction:column;display:flex}.layers-panel{border-right:0;border-bottom:1px solid var(--line);min-height:0}.layer-list{max-height:none;padding-bottom:9px;display:flex;overflow-x:auto}.layer-row{flex:0 0 215px}.layer-tools,.add-media{display:none}.stage-toolbar{flex-direction:column;align-items:stretch;height:auto}.view-tools{justify-content:flex-end}.stage-area{min-height:390px;padding:38px 14px 25px}.led-frame{width:94%!important}.properties-body{display:block}.property-group{border-top:1px solid var(--line-soft);margin-top:15px;padding-top:15px}}