body{margin:0}:root{--g:#3ddc84;--p:#a855f7;--bg:#07090f;--bg2:#0c0f1a;--surface:#ffffff0b;--surface2:#ffffff12;--text:#ffffffed;--muted:#ffffff94;--soft:#ffffff59;--bg-elevated:var(--bg2);--panel-bg:var(--surface);--panel-border:#ffffff17;--panel-border-active:#3ddc8466;--green:var(--g);--purple:var(--p);--danger:#ff5c7a}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif}#root{min-height:100vh}.gradient-text{background:linear-gradient(90deg, var(--green), var(--purple));color:#0000;-webkit-background-clip:text;background-clip:text}.gradient-divider{background:linear-gradient(90deg, transparent, var(--green), var(--purple), transparent);border:none;height:1px}.glass-panel{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(14px);border-radius:14px;padding:20px}.glass-panel--accent{border-color:var(--panel-border-active);background:linear-gradient(135deg,#3ddc8412,#a855f712)}.mono-stat{font-family:SF Mono,Fira Code,Consolas,monospace}button{font-family:inherit}.glow-button{background:linear-gradient(135deg, var(--green), var(--purple));color:#07090f;border:none;border-radius:8px;font-weight:700;transition:box-shadow .2s,transform .1s}.glow-button:hover:not(:disabled){box-shadow:0 0 18px #3ddc8473}.glow-button:active:not(:disabled){transform:scale(.98)}.glow-button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.ghost-button{border:1px solid var(--panel-border);color:var(--text);cursor:pointer;background:#ffffff0d;border-radius:8px;transition:background .15s,border-color .15s}.ghost-button:hover:not(:disabled){background:#ffffff17;border-color:#ffffff2e}.ghost-button:disabled{opacity:.35;cursor:not-allowed}input[type=text],input[type=number],select{border:1px solid var(--panel-border);color:var(--text);background:#ffffff0d;border-radius:6px;padding:6px 10px;font-family:inherit}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--panel-border-active);outline:none}option{background:var(--bg-elevated);color:var(--text)}input[type=checkbox],input[type=radio]{accent-color:var(--green)}input[type=color]{border:1px solid var(--panel-border);background:0 0;border-radius:6px}input[type=range]{appearance:none;vertical-align:middle;background:#ffffff24;border-radius:2px;outline:none;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--green);cursor:pointer;border:2px solid var(--bg);border-radius:50%;width:16px;height:16px;box-shadow:0 0 8px #3ddc84b3}input[type=range]::-moz-range-thumb{background:var(--green);cursor:pointer;border:2px solid var(--bg);border-radius:50%;width:16px;height:16px;box-shadow:0 0 8px #3ddc84b3}input[type=range]::-moz-range-track{background:#ffffff24;border-radius:2px;height:4px}a{color:var(--green)}.app-shell{min-height:100vh;display:flex}.sidebar{background:var(--bg-elevated);border-right:1px solid var(--panel-border);flex-shrink:0;width:240px;height:100vh;padding:24px 14px;position:sticky;top:0;overflow-y:auto}.sidebar-logo{align-items:center;padding:4px 10px 24px;display:flex}.sidebar-logo-img{filter:drop-shadow(0 0 10px #a855f759);width:auto;max-width:100%;height:150px}.sidebar-nav{flex-direction:column;gap:2px;display:flex}.sidebar-nav-item{color:#cad5e4;cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:12px;width:100%;margin:3px 0;padding:9px 12px;font-family:inherit;font-size:14px;transition:background .15s,color .15s;display:flex}.sidebar-nav-item span{color:#aab9d1;flex-shrink:0;place-items:center;width:19px;display:inline-grid}.sidebar-nav-item:hover{background:#152139}.sidebar-nav-item.active{color:var(--green);border-left:2px solid var(--green);background:linear-gradient(90deg,#3ddc8421,#3ddc8409)}.sidebar-nav-item.active span{color:var(--green)}.app-main{flex:1;min-width:0;padding:40px 20px}.controls-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start;gap:16px 28px;display:grid}.controls-grid label{display:block}.sp-editor{--sp-bg:#07090f;--sp-panel:#101724;--sp-border:#344157;--sp-text:#edf3fb;--sp-muted:#a7b8cd;--sp-green:#3ddc84;--sp-purple:#a855f7;color:var(--sp-text);background:var(--sp-bg);border:1px solid var(--sp-border);border-radius:14px;font:14px/1.4 Inter,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}.sp-editor *{box-sizing:border-box}.sp-editor button,.sp-editor input,.sp-editor select,.sp-editor textarea{font:inherit}.sp-editor button{cursor:pointer;color:var(--sp-text);border:1px solid var(--sp-border);background:#172235;border-radius:8px;padding:8px 11px}.sp-editor button:hover{border-color:var(--sp-purple);background:#202c43}.sp-editor button:focus-visible,.sp-editor input:focus-visible,.sp-editor textarea:focus-visible,.sp-editor select:focus-visible,.sp-file:focus-within{outline:2px solid var(--sp-green);outline-offset:2px}.sp-toolbar{border-bottom:1px solid var(--sp-border);background:#0b111c;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;display:flex}.sp-toolbar .sp-primary{background:var(--sp-green);border-color:var(--sp-green);color:#08140f;margin-left:auto;font-weight:800}.sp-file{cursor:pointer;border:1px solid var(--sp-border);background:#172235;border-radius:8px;padding:8px 11px;display:inline-block}.sp-file:hover{border-color:var(--sp-green)}.sp-body{grid-template-columns:minmax(0,1fr) 290px;min-height:540px;display:grid}.sp-stage{background:radial-gradient(circle at 30% 20%,#49316c45,transparent 45%),repeating-conic-gradient(#101722 0 25%,#0b121e 0 50%) 0 0/20px 20px;place-items:center;min-width:0;min-height:400px;padding:20px;display:grid;position:relative;overflow:hidden}.sp-stage canvas{touch-action:none;cursor:grab;border:1px solid #53637c;width:auto;max-width:100%;height:auto;max-height:70vh;display:block;box-shadow:0 20px 70px #0009}.sp-stage canvas:active{cursor:grabbing}.sp-size{background:#0b111dde;border-radius:5px;padding:5px 8px;font:11px ui-monospace,SFMono-Regular,Consolas,monospace;position:absolute;bottom:12px;right:16px}.sp-inspector{border-left:1px solid var(--sp-border);background:linear-gradient(145deg,#141b2b,#0c1321);max-height:78vh;padding:16px;overflow:auto}.sp-inspector h2{margin:0 0 8px;font-size:18px}.sp-inspector h3{margin:0 0 10px;font-size:13px}.sp-help{color:var(--sp-muted);margin:0 0 12px;font-size:12px}.sp-section{border-top:2px solid #0000;border-image:linear-gradient(90deg,var(--sp-green),var(--sp-purple),transparent) 1;margin-top:17px;padding-top:15px}.sp-stickers{grid-template-columns:repeat(6,1fr);gap:4px;max-height:150px;padding-right:2px;display:grid;overflow-y:auto}.sp-stickers button{justify-content:center;align-items:center;padding:4px;font-size:20px;display:flex}.sp-stickers img{width:20px;height:20px;display:block}.sp-layers{gap:5px;display:grid}.sp-layers button{text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sp-layers button.active{border-color:var(--sp-green);color:var(--sp-green)}.sp-section label{color:#cbd8e8;justify-content:space-between;align-items:center;gap:8px;margin:8px 0;font-size:12px;display:flex}.sp-section label:has(textarea){display:block}.sp-section input[type=number],.sp-section textarea,.sp-section select{border:1px solid var(--sp-border);width:125px;min-width:0;color:var(--sp-text);background:#101a2b;border-radius:6px;padding:6px}.sp-section textarea{resize:vertical;width:100%;margin-top:6px}.sp-section input[type=range]{width:125px;accent-color:var(--sp-green)}.sp-section input[type=color]{border:1px solid var(--sp-border);background:#101a2b;border-radius:6px;width:48px;height:32px;padding:2px}.sp-section input[type=checkbox]{accent-color:var(--sp-green)}.sp-order{flex-wrap:wrap;gap:5px;margin-top:13px;display:flex}.sp-order button{padding:6px;font-size:11px}.sp-status{border-top:1px solid var(--sp-border);color:var(--sp-muted);padding:8px 13px;font:11px ui-monospace,SFMono-Regular,Consolas,monospace}@media (width<=850px){.sp-body{grid-template-columns:1fr}.sp-inspector{border-left:0;border-top:1px solid var(--sp-border);max-height:none}.sp-stage{min-height:300px}.sp-toolbar .sp-primary{margin-left:0}}.sg-gradient-stops{flex-direction:column;gap:6px;margin:8px 0;display:flex}.sg-gradient-stop{align-items:center;gap:6px;display:flex}.sg-gradient-stop input[type=color]{border:1px solid var(--sp-border);background:#101a2b;border-radius:6px;width:32px;height:28px;padding:2px}.sg-gradient-stop button{padding:2px 8px;font-size:13px}.sg-app{--g:#3ddc84;--p:#a855f7;--b:#07090f;--panel:#101725;--edge:#354158;--fg:#f1f5fb;--mute:#9eafc6;color:var(--fg);background:var(--b);border:1px solid var(--edge);border-radius:14px;font:14px/1.4 Inter,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}.sg-app *{box-sizing:border-box}.sg-app button,.sg-app input,.sg-app select{font:inherit}.sg-app button{color:var(--fg);cursor:pointer;border:1px solid var(--edge);background:#192438;border-radius:8px;padding:8px 11px}.sg-app button:hover{border-color:var(--g)}.sg-app button:disabled{cursor:not-allowed;opacity:.4}.sg-app :focus-visible{outline:2px solid var(--g);outline-offset:2px}.sg-header{border-bottom:1px solid var(--edge);background:#0c1220;justify-content:space-between;align-items:center;gap:15px;padding:16px 20px;display:flex}.sg-header strong{letter-spacing:-.045em;font-size:24px}.sg-header strong span{color:var(--p)}.sg-header small{color:var(--mute);font-size:12px;display:block}.sg-actions{flex-wrap:wrap;gap:7px;display:flex}.sg-main{grid-template-columns:minmax(0,1fr) minmax(345px,445px);display:grid}.sg-preview{background:repeating-conic-gradient(#182232 0 25%,#101928 0 50%) 0 0/24px 24px;flex-direction:column;justify-content:center;align-items:center;gap:14px;min-width:0;padding:22px;display:flex}.sg-preview canvas{touch-action:none;cursor:crosshair;border:1px solid #70829d;width:auto;max-width:100%;height:auto;max-height:72vh;display:block;box-shadow:0 25px 60px #0009}.sg-preview p{margin:0}.sg-preview [data-readout]{color:#dbe6f3;background:#0b1220dc;border-radius:7px;padding:6px 12px;font:12px ui-monospace,SFMono-Regular,Consolas,monospace}.sg-note{max-width:700px;color:var(--mute);text-align:center;font-size:12px}.sg-controls{border-left:1px solid var(--edge);background:linear-gradient(135deg,#141d2d,#0c1320);max-height:82vh;padding:18px;overflow:auto}.sg-controls h2{margin:0 0 13px;font-size:18px}.sg-controls h3{border-bottom:2px solid #0000;border-image:linear-gradient(90deg,var(--g),var(--p),transparent) 1;margin:22px 0 10px;padding-bottom:8px;font-size:14px}.sg-controls h3 span{float:right;color:var(--mute);font:12px ui-monospace,Consolas,monospace}.sg-controls label{color:#c5d2e4;gap:4px;font-size:12px;display:grid}.sg-controls>label{margin:12px 0}.sg-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.sg-controls input[type=number],.sg-controls select{border:1px solid var(--edge);width:100%;min-width:0;color:var(--fg);background:#0b1423;border-radius:6px;padding:8px}.sg-controls input[type=range]{accent-color:var(--g);width:100%;min-width:50px}.sg-controls input[type=color]{border:1px solid var(--edge);background:#0b1423;border-radius:5px;width:39px;height:36px;padding:2px}.sg-stops{gap:7px;display:grid}.sg-stop{border:1px solid var(--edge);background:#111c2d;border-radius:8px;align-items:center;gap:5px;padding:6px;display:flex}.sg-stop .sg-index{color:var(--mute);width:16px;font:12px ui-monospace,Consolas,monospace}.sg-stop input[type=number]{text-align:center;width:52px;padding:6px}.sg-stop span:not(.sg-index){color:var(--mute);font-size:11px}.sg-stop button{padding:3px 7px}.sg-presets button{font-size:12px}.sg-status{border-top:1px solid var(--edge);color:var(--mute);padding:9px 18px;font:12px ui-monospace,Consolas,monospace}[hidden]{display:none!important}@media (width<=900px){.sg-main{display:block}.sg-controls{border-left:0;border-top:1px solid var(--edge);max-height:none}.sg-preview canvas{max-height:45vh}}@media (width<=570px){.sg-header{display:block}.sg-header .sg-actions{margin-top:12px}.sg-preview{padding:10px}.sg-stop{flex-wrap:wrap}.sg-stop input[type=range]{width:calc(100% - 78px)}}