:root{--bg: #0c0f14;--panel: #141a22;--panel-2: #1b2430;--accent: #ff9f1c;--accent-2: #2ec4b6;--text: #f1f5f9;--muted: #93a4b7;--danger: #ff6b6b;--dark-bg: #0a0c10;--dark-panel: #0f141c;--dark-panel-2: #141c26;--dark-text: #e2e8f0;--dark-muted: #8b9bb0}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;min-height:100vh;font-family:Space Grotesk,Satoshi,Trebuchet MS,sans-serif;color:var(--text);background:radial-gradient(1200px 800px at 20% -10%,#1d2330 0%,transparent 60%),radial-gradient(1000px 700px at 120% 10%,#1a2a2f 0%,transparent 55%),linear-gradient(180deg,#0a0d12,#0f141b)}.landing-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 16px}.landing-card{width:min(420px,100%);text-align:center;display:grid;gap:16px}.landing-title{margin:0;font-size:clamp(28px,6vw,40px);letter-spacing:.02em}.landing-actions{display:flex;justify-content:center}body.theme-dark{color:var(--dark-text);background:radial-gradient(1200px 800px at 20% -10%,#121826 0%,transparent 60%),radial-gradient(1000px 700px at 120% 10%,#0f1a22 0%,transparent 55%),linear-gradient(180deg,var(--dark-bg) 0%,#0b1118 100%)}body.theme-dark .panel,body.theme-dark .drawer-panel,body.theme-dark .drawer-section,body.theme-dark .add-menu{background:var(--dark-panel);border-color:#1f2a3a}body.theme-dark .btn-ghost,body.theme-dark .icon-btn,body.theme-dark .tool-btn,body.theme-dark select,body.theme-dark input{background:var(--dark-panel-2);border-color:#263447;color:var(--dark-text)}body.theme-dark .label,body.theme-dark .field,body.theme-dark .drawer-section-title{color:var(--dark-muted)}#psVideoParent{position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;pointer-events:none;opacity:0}#playerUI,.playerUI,#overlay,.overlay,#afkOverlay,.afkOverlay,#streamerOverlay,.streamerOverlay{display:none!important}#app{display:flex;flex-direction:column;gap:16px;padding:16px;min-height:100vh;align-items:center;justify-content:center}.icon-btn{width:36px;height:36px;border-radius:12px;border:1px solid #2b3646;background:var(--panel-2);color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-size:0;cursor:pointer;-webkit-user-select:none;user-select:none}.icon-btn svg{width:20px;height:20px;aspect-ratio:1 / 1;fill:currentColor;display:block}.icon-btn:active{transform:scale(.96)}.settings-fab{position:fixed;top:16px;right:16px;z-index:900;width:44px;height:44px;border-radius:50%;border:1px solid #334155;background:radial-gradient(circle at 30% 30%,#1f2a3a,#0f141b);box-shadow:0 10px 24px #0006}.panel{background:var(--panel);border-radius:16px;padding:12px 16px;border:1px solid #202a3a}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0}.label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em}.value{font-size:14px}.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);min-width:0}.hint{font-size:12px;color:var(--accent-2);min-height:16px}select{background:var(--panel-2);color:var(--text);border:1px solid #2b3646;border-radius:10px;padding:6px 10px;font-size:14px;width:100%;min-width:0}.btn{background:var(--accent);color:#0a0d12;border:none;border-radius:12px;padding:10px 14px;font-weight:600;letter-spacing:.02em}.btn-danger{background:var(--danger);color:#0a0d12}.btn:active{transform:scale(.98)}.btn.active{background:var(--accent-2);color:#051017}.btn-ghost{background:transparent;border:1px solid #2b3646;color:var(--text)}.btn-sm{padding:6px 10px;font-size:12px;border-radius:10px}.controller{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;padding:12px;width:min(520px,100%)}.controller-only{margin-top:24px}.controller-layout{position:relative;width:min(860px,100%);height:min(70vh,520px);margin:0 auto;border-radius:24px;background:transparent}.layout-grid{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;transition:opacity .2s ease;background-image:linear-gradient(rgba(148,163,184,var(--grid-alpha, .22)) var(--grid-line, 1px),transparent var(--grid-line, 1px)),linear-gradient(90deg,rgba(148,163,184,var(--grid-alpha, .22)) var(--grid-line, 1px),transparent var(--grid-line, 1px));background-size:var(--grid-cell-x, 32px) var(--grid-cell-y, 32px);background-position:0 0;z-index:1}.layout-grid.visible{opacity:1}.stick{position:relative;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#242f3d,#141a22);border:1px solid #2b3646;justify-self:center;touch-action:none}.stick-inner{position:absolute;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ff9f1c,#ffbf69);transform:translate(40px,40px);transition:transform .05s ease-out}.control-stick{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#242f3d,#141a22);border:1px solid #2b3646;touch-action:none;z-index:2}.control-stick-inner{position:absolute;border-radius:50%;background:linear-gradient(135deg,#ff9f1c,#ffbf69);transition:transform .05s ease-out}.control-button{position:absolute;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;border:none;touch-action:none;-webkit-user-select:none;user-select:none;z-index:2}.control-button.active{transform:scale(.96);filter:brightness(.95)}.control-button.shape-square{border-radius:16px}.control-button.shape-pill{border-radius:999px;padding:0 16px}.control-widget{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:14px;font-size:14px;color:var(--text);background:#0f172a73;border:1px dashed rgba(148,163,184,.35);text-transform:uppercase;letter-spacing:.08em;pointer-events:auto}.control-widget.control-theme-ghost{background:#0f172a40;border-color:#94a3b873}.control-label{border-style:solid;background:#0f172a99;font-weight:600}.control-badge{border-radius:999px;padding:0 12px;background:#2ec4b640;border:1px solid rgba(46,196,182,.6)}.control-badge[data-state=off]{background:#0f172a59;border-color:#94a3b88c;color:var(--muted)}.control-badge[data-state=on]{background:#2ec4b647;border-color:#2ec4b6d9;color:#e6fffb;box-shadow:0 6px 14px #2ec4b640}.control-swipe{border-radius:18px;border-style:dashed;background:#0f172a26;font-size:12px;color:var(--muted)}.control-ring-label{position:absolute;top:14%;left:50%;transform:translate(-50%);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ring-label, rgba(148, 163, 184, .8));pointer-events:none;z-index:3}.control-ring-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(12px,3.2vw,18px);font-weight:700;color:var(--ring-text, var(--text));font-variant-numeric:tabular-nums;letter-spacing:.02em;text-transform:none;pointer-events:none;z-index:3;text-shadow:0 3px 10px rgba(0,0,0,.6)}.control-theme-accent{background:radial-gradient(circle at 30% 30%,#ffd27a,#ff9f1c 70%);color:#0a0d12;border:1px solid rgba(255,191,105,.8);box-shadow:0 8px 18px #ff9f1c47,inset 0 0 0 1px #ffffff26}.control-theme-accent-2{background:radial-gradient(circle at 30% 30%,#7ff0e6,#2ec4b6 70%);color:#051017;border:1px solid rgba(46,196,182,.7);box-shadow:0 8px 18px #2ec4b647,inset 0 0 0 1px #ffffff1f}.control-theme-ghost{background:transparent;border:1px solid #2b3646;color:var(--text)}.control-theme-dark{background:#0f172a;color:#e2e8f0;border:1px solid #1f2a3a}.control-theme-blue{background:#60a5fa;color:#0a0d12}.control-theme-red{background:#f87171;color:#0a0d12}.control-theme-green{background:#34d399;color:#051017}.control-theme-violet{background:#a78bfa;color:#0a0d12}.control-theme-slate{background:#94a3b8;color:#0a0d12}.control-stick.control-theme-blue{background:radial-gradient(circle at 30% 30%,#3b82f6,#1e293b);border-color:#1e40af}.control-stick.control-theme-red{background:radial-gradient(circle at 30% 30%,#ef4444,#1f2937);border-color:#991b1b}.control-stick.control-theme-green{background:radial-gradient(circle at 30% 30%,#10b981,#1f2937);border-color:#065f46}.control-stick.control-theme-violet{background:radial-gradient(circle at 30% 30%,#8b5cf6,#1f2937);border-color:#5b21b6}.control-stick.control-theme-slate{background:radial-gradient(circle at 30% 30%,#64748b,#1f2937);border-color:#334155}.control-stick.control-theme-dark{background:radial-gradient(circle at 30% 30%,#1f2937,#0f172a);border-color:#1e293b}.control-stick.control-theme-accent{background:radial-gradient(circle at 30% 30%,#ffbf69,#1f2937);border-color:#ff9f1ccc;box-shadow:0 10px 20px #ff9f1c40}.control-stick.control-theme-accent-2{background:radial-gradient(circle at 30% 30%,#5eead4,#1f2937);border-color:#2ec4b6cc;box-shadow:0 10px 20px #2ec4b640}.control-stick.control-theme-blue .control-stick-inner{background:linear-gradient(135deg,#93c5fd,#60a5fa)}.control-stick.control-theme-red .control-stick-inner{background:linear-gradient(135deg,#fecaca,#f87171)}.control-stick.control-theme-green .control-stick-inner{background:linear-gradient(135deg,#a7f3d0,#34d399)}.control-stick.control-theme-violet .control-stick-inner{background:linear-gradient(135deg,#c4b5fd,#a78bfa)}.control-stick.control-theme-slate .control-stick-inner{background:linear-gradient(135deg,#cbd5f5,#94a3b8)}.control-stick.control-theme-dark .control-stick-inner{background:linear-gradient(135deg,#334155,#0f172a)}.control-stick.control-theme-accent .control-stick-inner{background:linear-gradient(135deg,#ffd27a,#ff9f1c)}.control-stick.control-theme-accent-2 .control-stick-inner{background:linear-gradient(135deg,#99f6e4,#2ec4b6)}.control-widget.control-theme-accent,.control-widget.control-theme-accent-2{border-style:solid}.control-toggle{border-radius:999px;padding:0 14px;text-transform:uppercase;letter-spacing:.1em}.control-button.control-toggle{font-size:13px;padding:0 14px}.control-toggle[data-state=off]{background:#0f172a59;border:1px solid rgba(148,163,184,.55);color:var(--text)}.control-toggle[data-state=on]{background:radial-gradient(circle at 30% 30%,#7ff0e6,#2ec4b6 70%);border:1px solid rgba(46,196,182,.9);color:#051017;box-shadow:0 8px 18px #2ec4b647,inset 0 0 0 1px #ffffff1f}.control-ring{border-radius:999px;--ring-angle: 0deg;--ring-track: rgba(148, 163, 184, .22);--ring-fill: #2ec4b6;--ring-fill-2: #7ff0e6;--ring-glow: rgba(46, 196, 182, .3);--ring-indicator-width: 2px;--ring-hole: 18%;--ring-core: rgba(8, 12, 18, .92);--ring-core-border: rgba(148, 163, 184, .22);--ring-text: #f8fafc;--ring-label: rgba(148, 163, 184, .8);background:conic-gradient(from 0deg,var(--ring-fill) 0deg,var(--ring-fill-2) var(--ring-angle),var(--ring-track) var(--ring-angle) 360deg);border:1px solid rgba(148,163,184,.35);box-shadow:0 12px 24px #0006,inset 0 0 0 1px #ffffff0d,0 0 16px var(--ring-glow);display:flex;align-items:center;justify-content:center;color:var(--ring-text, var(--text));text-transform:none;letter-spacing:normal;touch-action:none}.control-ring:after{content:"";position:absolute;inset:var(--ring-hole);border-radius:999px;background:var(--ring-core);border:1px solid var(--ring-core-border);box-shadow:inset 0 6px 12px #00000073;z-index:1}.control-ring:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;background:linear-gradient(180deg,#fffffffa,#ffffff59);background-repeat:no-repeat;background-size:var(--ring-indicator-width) var(--ring-hole);background-position:50% 0%;transform:rotate(var(--ring-angle));transform-origin:50% 50%;filter:drop-shadow(0 0 6px var(--ring-glow));z-index:2}.control-ring.control-theme-accent{--ring-fill: #ff9f1c;--ring-fill-2: #ffd27a;--ring-glow: rgba(255, 159, 28, .35)}.control-ring.control-theme-accent-2{--ring-fill: #2ec4b6;--ring-fill-2: #7ff0e6;--ring-glow: rgba(46, 196, 182, .35)}.control-ring.control-theme-blue{--ring-fill: #3b82f6;--ring-fill-2: #93c5fd;--ring-glow: rgba(59, 130, 246, .35)}.control-ring.control-theme-red{--ring-fill: #f87171;--ring-fill-2: #fecaca;--ring-glow: rgba(248, 113, 113, .35)}.control-ring.control-theme-green{--ring-fill: #34d399;--ring-fill-2: #a7f3d0;--ring-glow: rgba(52, 211, 153, .35)}.control-ring.control-theme-violet{--ring-fill: #a78bfa;--ring-fill-2: #c4b5fd;--ring-glow: rgba(167, 139, 250, .35)}.control-ring.control-theme-slate{--ring-fill: #94a3b8;--ring-fill-2: #cbd5f5;--ring-glow: rgba(148, 163, 184, .3);--ring-text: #e2e8f0;--ring-label: rgba(203, 213, 225, .8)}.control-ring.control-theme-dark{--ring-fill: #334155;--ring-fill-2: #64748b;--ring-glow: rgba(51, 65, 85, .4);--ring-track: rgba(148, 163, 184, .18);--ring-text: #e2e8f0;--ring-label: rgba(203, 213, 225, .8);--ring-core: rgba(8, 11, 18, .96)}.control-ring.control-theme-ghost{--ring-fill: #94a3b8;--ring-fill-2: #e2e8f0;--ring-track: rgba(148, 163, 184, .18);--ring-glow: rgba(148, 163, 184, .2);--ring-text: #e2e8f0;--ring-label: rgba(203, 213, 225, .7);--ring-core: rgba(9, 12, 18, .8)}.control-swipe:after{content:attr(data-direction);position:absolute;right:8px;bottom:6px;font-size:10px;color:#94a3b8cc;text-transform:uppercase;letter-spacing:.1em}@media (orientation: landscape) and (max-height: 520px){.buttons .btn{width:70px;height:70px;font-size:18px}}.debug{font-family:IBM Plex Mono,Consolas,monospace;font-size:12px}input[type=checkbox]{accent-color:var(--accent-2)}.editor-shell{min-height:100vh;display:flex;flex-direction:column;gap:12px;padding:16px}.editor-header{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}.editor-header-left,.editor-header-right{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.editor-header-center{flex:1;display:flex;justify-content:center}.editor-header-center .field{min-width:min(320px,100%)}.editor-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}.editor-toolbar .btn{min-width:90px}.toolbar-left{display:flex;gap:8px;align-items:center}.tool-btn{width:40px;height:40px;border-radius:12px;border:1px solid #2b3646;background:var(--panel-2);color:var(--text);font-weight:700;display:inline-flex;align-items:center;justify-content:center}.tool-btn.active{background:var(--accent-2);color:#051017;border-color:transparent}.editor-main{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start;flex:1;min-height:0}.editor-layout-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(360px,62vh,820px)}.editor-canvas{position:relative;width:min(100%,1200px);aspect-ratio:var(--canvas-w, 16) / var(--canvas-h, 9);display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;border:1px dashed rgba(148,163,184,.35);border-radius:18px;padding:0;overflow:hidden}.editor-canvas.show-safe-area:after{content:"";position:absolute;top:6%;right:6%;bottom:6%;left:6%;border:2px dashed rgba(46,196,182,.45);border-radius:14px;pointer-events:none;z-index:3}.resolution-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:center}.resolution-controls .field{min-width:70px}.ratio-dims input{width:54px}.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end}.editor-sidebar{position:sticky;top:16px;align-self:start}.editor-page .controller-layout{position:absolute;left:50%;top:50%;width:100%;height:100%;transform-origin:center;transition:opacity .2s ease}.editor-page.editor-landscape .controller-layout,.editor-page.editor-portrait .controller-layout{width:100%;height:100%}.editor-status{min-height:18px;font-size:12px;color:var(--muted)}.control-selected{outline:3px solid #60a5fa;outline-offset:3px}.control-button:hover,.control-stick:hover{box-shadow:0 0 0 3px #5eead459}.add-menu{position:absolute;min-width:180px;background:var(--panel);border:1px solid #202a3a;border-radius:12px;padding:10px;box-shadow:0 12px 24px #00000059;display:none;z-index:10;pointer-events:auto}.add-menu.open{display:block}.add-menu.fixed{position:fixed}.add-menu.anchor-button{transform:translate(-50%,8px)}.add-menu-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px}.add-menu-list{display:grid;gap:8px}.add-menu-item{background:var(--panel-2);border:1px solid #2b3646;color:var(--text);border-radius:10px;padding:8px 10px;text-align:left}.add-menu-item:active{transform:scale(.98)}.delete-btn{display:inline-flex;align-items:center;gap:6px}.delete-btn svg{width:16px;height:16px;fill:currentColor}@media (max-width: 900px){.editor-main{grid-template-columns:1fr}.editor-sidebar{position:static}.editor-header{flex-direction:column;align-items:stretch}.editor-header-left,.editor-header-right,.editor-header-center{justify-content:flex-start;width:100%}.editor-toolbar{gap:8px;flex-wrap:wrap;align-items:flex-start}.editor-toolbar .btn{min-width:70px;padding:8px 10px}.tool-btn{width:34px;height:34px;border-radius:10px}.editor-header-left .btn,.editor-header-right .btn{padding:8px 10px}.resolution-controls{width:100%;gap:6px}.resolution-controls .field{min-width:70px}.editor-canvas{max-height:100%;width:100%}.editor-layout-wrap{min-height:clamp(320px,55vh,640px)}}.drawer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:1000}.drawer.open{pointer-events:auto;opacity:1}.drawer-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#04070c8c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer-panel{position:absolute;right:12px;left:12px;top:12px;background:var(--panel);border:1px solid #202a3a;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 40px #00000059;max-height:calc(100vh - 24px);overflow-y:auto}.drawer-section{display:flex;flex-direction:column;gap:10px;padding:10px 12px;border-radius:14px;background:#0f141cb3;border:1px solid #202a3a}.drawer-section-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.drawer-header{display:flex;align-items:center;justify-content:space-between}.drawer-title{font-size:16px;font-weight:600}.drawer input{background:var(--panel-2);color:var(--text);border:1px solid #2b3646;border-radius:10px;padding:8px 10px;font-size:14px;width:100%;min-width:0}.drawer-section input,.drawer-section select{width:100%;min-width:0}.drawer.open~#app{filter:blur(2px)}body.drawer-open{overflow:hidden}.status{font-size:14px;color:var(--accent-2)}@media (min-width: 800px){#app{max-width:720px;margin:0 auto}}@media (max-width: 600px){.drawer-panel{top:0;right:0;bottom:0;left:0;border-radius:0;max-height:none}.settings-fab{top:12px;right:12px}}@media (orientation: landscape) and (max-height: 520px){#app{padding:12px 16px}.controller-layout{height:min(86vh,560px)}}