:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#03050a;color:#f1f7ff}*{box-sizing:border-box}html,body,#root,.app-shell{margin:0;width:100%;min-height:100%;overflow:hidden}.video-stage{position:fixed;top:50%;left:50%;width:min(78vw,calc(78vh * 1.7777778));aspect-ratio:16 / 9;transform:translate(-50%,-50%);overflow:hidden;background:#060812}.source-video,.webgl-canvas,.editor-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.source-video{opacity:0;pointer-events:none}.overlay-video-source{display:none}.webgl-canvas{background:#060812}.editor-layer{z-index:2;touch-action:none}.video-stage.is-loading .webgl-canvas,.video-stage.is-loading .editor-layer{opacity:0}.camera-loading{position:absolute;z-index:4;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:7px;text-align:center;background:#060812;color:#e8faff}.camera-loading i{width:26px;height:26px;margin:0 auto 4px;border:2px solid rgba(121,231,255,.24);border-top-color:#7ae8ff;border-radius:50%;animation:camera-spin .78s linear infinite}.camera-loading strong{font-size:13px}.camera-loading small{color:#e9f6ff99;font-size:10px}.connection-hint,.region-selection-hint{position:absolute;z-index:3;top:13px;left:50%;transform:translate(-50%);margin:0;padding:7px 10px;color:#001017;background:#c9f5ff;font:700 11px ui-monospace,monospace}.region-selection-hint{top:auto;bottom:13px;color:#effaff;background:#040b14c7;border:1px solid rgba(190,236,255,.55)}@keyframes camera-spin{to{transform:rotate(360deg)}}.effect-panel{position:fixed;z-index:3;top:22px;right:22px;width:min(272px,calc(100vw - 44px));max-height:calc(100vh - 44px);padding:13px;overflow:auto;border:1px solid rgba(210,241,255,.34);background:#040810eb;transition:opacity .26s ease-out,transform .26s ease-out}.effect-panel.is-hidden{opacity:0;pointer-events:none;transform:translateY(-10px)}.effect-panel-head{display:grid;gap:2px;margin-bottom:11px}.effect-panel-head span{color:#78dcff;font:700 10px ui-monospace,monospace;letter-spacing:.09em}.effect-panel-head strong{font-size:14px}.effect-panel-head small{color:#ebf6ff99;font-size:11px}.effect-options{display:grid;gap:5px}.effect-option{display:grid;grid-template-columns:88px 1fr;align-items:baseline;gap:7px;width:100%;padding:7px 8px;text-align:left;background:#09101c;border-color:#d9f0ff36}.effect-option span{font-size:11px}.effect-option small{color:#ebf6ff94;font-size:10px}.effect-option.selected{background:#c9f5ff;border-color:#c9f5ff;color:#02111a}.effect-option.selected small{color:#001723ad}.hue-control{display:grid;gap:7px;margin-top:12px;color:#d8f7ff;font-size:11px}.hue-control>span{display:flex;justify-content:space-between}.hue-control output{color:#7df;font-family:ui-monospace,monospace}.hue-control input{width:100%;accent-color:#7ae8ff}.hue-control.is-disabled{opacity:.38}.hue-control.is-disabled output{color:inherit}.overlay-video-control{display:grid;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid rgba(217,240,255,.2)}.overlay-video-control input{display:none}.overlay-video-control button{width:100%;padding:7px 8px;font-size:10px}.overlay-video-control small{color:#ebf6ff94;font-size:9px;line-height:1.45}.gradient-editor{display:grid;gap:9px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(217,240,255,.2)}.gradient-editor-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.gradient-editor-head strong{font-size:11px}.gradient-editor-head small{color:#ebf6ff8f;font-size:9px;text-align:right}.gradient-track{position:relative;height:19px;margin:11px 4px 4px;border:1px solid rgba(235,248,255,.6);cursor:crosshair}.gradient-stop{position:absolute;top:50%;width:14px;height:25px;padding:0;border:2px solid #08111c;border-radius:0;transform:translate(-50%,-50%);cursor:ew-resize}.gradient-stop.selected{border-color:#f5fcff;box-shadow:0 0 0 1px #58dfff}.gradient-stop-tools{display:flex;align-items:center;justify-content:space-between;gap:8px}.gradient-stop-tools label{display:flex;align-items:center;gap:7px;color:#ebf6ffbd;font-size:10px}.gradient-stop-tools input[type=color]{width:25px;height:20px;padding:0;border:1px solid rgba(217,240,255,.45);background:none;cursor:pointer}.gradient-stop-actions{display:flex;gap:4px}.gradient-stop-tools button{padding:6px 7px;font-size:10px}.polygon-guide{fill:#58ceff14;stroke:none}.region-selector{fill:#58ceff03;stroke:transparent;stroke-width:1.5px;vector-effect:non-scaling-stroke;cursor:pointer}.region-selector.selected{fill:#ffd54d1a;stroke:#ffdc57;stroke-width:3px;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,220,87,.9))}.edge-guide,.crease-guide{stroke:#e5f9ffd9;vector-effect:non-scaling-stroke;stroke-width:1.5px}.crease-guide{stroke:#69ddff;stroke-dasharray:5 4}.partition-guide{stroke:#ffdf6d;stroke-width:1.5px;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}.vertex{cursor:grab}.vertex circle:first-child{fill:#d9f7ff;stroke:#07111e;stroke-width:.006;vector-effect:non-scaling-stroke}.vertex text{fill:#fff;font:700 .035px ui-monospace,monospace;paint-order:stroke;stroke:#06101c;stroke-width:.009px}.vertex.candidate circle:first-child{fill:#ffd369;filter:drop-shadow(0 0 9px #ffd369)}.vertex.bound circle:first-child{fill:#82ffb5}.vertex.temporarily-lost circle:first-child{fill:#ff9eac}.vertex.connection-source circle:first-child{fill:#ffdf6d;filter:drop-shadow(0 0 7px #ffdf6d)}.capture-radius{fill:none;stroke:#79e7ff75;stroke-width:.003;vector-effect:non-scaling-stroke}.control-dock{position:fixed;z-index:3;left:22px;bottom:22px;display:flex;gap:16px;align-items:flex-end;max-width:calc(100vw - 44px)}.status-dock{position:fixed;z-index:3;left:22px;bottom:22px;width:220px}.status-dock .identity{width:100%}.control-dock{left:258px}.identity{display:grid;gap:3px;min-width:220px;padding:11px 13px;border:1px solid rgba(210,241,255,.28);background:#03060cb3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.identity span{color:#78dcff;font:700 10px ui-monospace,monospace;letter-spacing:.09em}.identity strong{font-size:12px}.identity small{color:#ebf6ff94;font-size:10px}.actions{display:flex;flex-wrap:wrap;gap:7px;max-width:640px}button{border:1px solid rgba(217,240,255,.42);background:#050a13c7;color:#eaf6ff;padding:9px 11px;font:600 11px ui-sans-serif,system-ui;cursor:pointer}button:hover:not(:disabled){background:#42a0cf57}button:disabled{opacity:.36;cursor:not-allowed}.accent{background:#8ce7ff;border-color:#8ce7ff;color:#001017}.error-banner{position:fixed;z-index:5;top:18px;left:50%;transform:translate(-50%);margin:0;padding:9px 12px;color:#ffc9d3;border:1px solid rgba(255,126,150,.5);background:#1e040cd1;font-size:12px}.corner-status{position:fixed;z-index:3;right:18px;bottom:16px;color:#e9f6ff8c;font:10px ui-monospace,monospace}.site-footer{position:fixed;z-index:4;left:50%;bottom:8px;transform:translate(-50%);pointer-events:auto;font-size:10px;letter-spacing:.04em;white-space:nowrap}.site-footer a{color:#d2f1ff94;text-decoration:none;border-bottom:1px solid rgba(122,232,255,.28)}.site-footer a:hover{color:#7ae8ff;border-bottom-color:#7ae8ff}@media(max-width:760px){.video-stage{width:100vw}.control-dock{left:12px;bottom:12px;display:grid}.identity{min-width:0}.actions{max-width:calc(100vw - 24px)}.effect-panel{top:12px;right:12px;width:min(250px,calc(100vw - 24px))}.corner-status{display:none}}@media(max-width:900px)and (orientation:landscape){html,body,#root,.app-shell{width:100%;height:100%;min-height:100dvh}.video-stage{left:max(10px,env(safe-area-inset-left));top:39%;width:min(55vw,177.77778dvh);transform:translateY(-50%)}.effect-panel{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:min(280px,35vw);max-height:calc(100dvh - 20px);padding:10px}.effect-panel-head{margin-bottom:8px}.effect-panel-head strong{font-size:13px}.effect-panel-head small{font-size:10px}.effect-options{gap:4px}.effect-option{min-height:44px;grid-template-columns:82px 1fr;padding:6px 7px;touch-action:manipulation}.effect-option span{font-size:10px}.effect-option small{font-size:9px}.control-dock{left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));display:grid;gap:6px;max-width:55vw;align-items:stretch}.identity{min-width:0;max-width:none;padding:7px 9px}.identity strong{font-size:11px}.identity small{font-size:9px}.actions{gap:5px;max-width:100%}.actions button{min-height:44px;padding:8px 9px;touch-action:manipulation}.gradient-stop{min-width:28px;min-height:44px}.gradient-track{touch-action:none}.corner-status{right:max(12px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom))}}@media(max-width:1200px)and (orientation:portrait){.corner-status{display:none}}.orientation-gate{display:none}@media(max-width:1200px)and (orientation:portrait){.orientation-gate{display:grid;position:fixed;z-index:20;top:0;right:0;bottom:0;left:0;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:#03050a;text-align:center}.orientation-gate-card{display:grid;justify-items:center;gap:12px;width:min(340px,88vw);padding:28px 22px;border:1px solid rgba(210,241,255,.28);background:#080f1bf0;box-shadow:0 20px 60px #00000073}.orientation-gate-icon{width:62px;height:42px;border:2px solid #7ae8ff;border-radius:5px;transform:rotate(90deg);box-shadow:0 0 24px #7ae8ff38}.orientation-gate strong{color:#f1f7ff;font-size:17px}.orientation-gate small{max-width:270px;color:#ebf6ffa6;font-size:12px;line-height:1.6}.orientation-gate button{min-height:44px;margin-top:4px;padding-inline:18px;touch-action:manipulation}}@media(max-width:900px){button{-webkit-tap-highlight-color:transparent}button:active{transform:scale(.98)}}@media(orientation:landscape)and (max-width:1200px),(orientation:landscape)and (max-height:700px){html,body,#root{width:100%;height:100%;min-height:100dvh;overflow:hidden}.app-shell{display:grid;width:100%;height:100%;min-height:100dvh;grid-template-columns:minmax(0,1fr) minmax(260px,35vw);grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.video-stage{grid-column:1;grid-row:1;position:relative;inset:auto;width:auto;height:100%;max-width:100%;aspect-ratio:16 / 9;transform:none;align-self:start;justify-self:start}.connection-hint,.region-selection-hint{display:none}.effect-panel{grid-column:2;grid-row:1 / span 2;position:relative;inset:auto;width:auto;height:100%;max-height:none;overflow:auto}.control-dock{grid-column:1;grid-row:2;position:static;width:100%;max-width:none;display:grid;gap:6px;align-items:stretch}.identity{min-width:0;max-width:none;padding:8px 10px}.actions{max-width:none;gap:6px}.corner-status{display:none}}@media(orientation:landscape)and (max-width:1200px),(orientation:landscape)and (max-height:700px){.app-shell{grid-template-columns:minmax(0,1fr) minmax(78px,7.5vw) minmax(210px,22vw);grid-template-rows:minmax(0,1fr) 36px;gap:6px;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.effect-panel{padding:9px}.effect-panel{grid-column:3}.effect-panel-head{margin-bottom:7px}.effect-panel-head span{font-size:9px}.effect-panel-head strong{font-size:12px}.effect-panel-head small{font-size:9px}.effect-options{gap:4px}.effect-option{min-height:40px;grid-template-columns:72px 1fr;gap:5px;padding:6px}.effect-option span{font-size:10px}.effect-option small{font-size:9px}.video-stage{width:min(100%,calc((100dvh - 62px) * 1.7777778));height:auto;max-height:none;align-self:end}.status-dock{grid-column:1;grid-row:2;position:static;align-self:stretch;width:100%;height:36px;max-height:36px;overflow:hidden;display:flex}.status-dock .identity{width:100%;height:100%;display:grid;align-content:start;align-items:start;gap:8px;padding:12px 10px;white-space:normal}.status-dock .identity span{display:block}.status-dock .identity strong{font-size:11px;line-height:1.45}.status-dock .identity small{display:block;font-size:10px;line-height:1.55;white-space:normal;overflow:visible;text-overflow:clip}.control-dock{gap:5px;height:100%;max-height:none;overflow:hidden}.control-dock{grid-column:2;grid-row:1 / span 2;position:static;width:100%}.identity{display:flex;align-items:center;gap:8px;min-height:36px;padding:5px 8px;white-space:nowrap;overflow:hidden}.identity span{display:none}.identity strong{flex:0 0 auto;font-size:10px}.identity small{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:9px}.actions{display:flex;flex-direction:column;flex-wrap:nowrap;gap:5px;width:100%;max-width:none;min-width:0;height:100%;overflow-x:hidden;overflow-y:auto;padding:0 1px 1px 0;scrollbar-width:thin;touch-action:pan-y}.actions::-webkit-scrollbar{width:4px}.actions button{flex:0 0 auto;width:100%;min-height:36px;padding:6px 7px;font-size:10px;white-space:nowrap;touch-action:manipulation}.status-dock .identity{display:flex;align-items:center;gap:8px;height:100%;padding:5px 8px;white-space:nowrap;overflow:hidden}.status-dock .identity span{display:none}.status-dock .identity strong{flex:0 0 auto;font-size:10px;line-height:1.35}.status-dock .identity small{min-width:0;display:block;font-size:9px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}