:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-synthesis:none;text-rendering:optimizelegibility;--brand-cyan:#12d9e6;--brand-cyan-strong:#007b87;--brand-pink:#ff1f6d;--brand-pink-strong:#cf1554;--bg:#f7f8fa;--bg-alt:#eff2f5;--surface:#fff;--surface-soft:#fbfcfd;--surface-raised:#fff;--text:#0b1119;--text-muted:#46515e;--text-subtle:#6f7a87;--line:#00000017;--line-soft:#0000000f;--cyan-soft:#12d9e61a;--pink-soft:#ff1f6d1a;--shadow:0 24px 70px #0a18161f, 0 2px 8px #0a18160d;--focus:#007b87;font-family:IBM Plex Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--brand-cyan:#1de8f1;--brand-cyan-strong:#12c7d2;--brand-pink:#ff397e;--brand-pink-strong:#ff5b93;--bg:#090d16;--bg-alt:#0d1320;--surface:#101725;--surface-soft:#0d1420;--surface-raised:#172132;--text:#f7f9fc;--text-muted:#b1bdca;--text-subtle:#7f8d9d;--line:#ffffff17;--line-soft:#ffffff0f;--cyan-soft:#1de8f11a;--pink-soft:#ff397e1f;--shadow:0 32px 80px #0000006b, 0 2px 10px #00000047;--focus:#1de8f1}*{box-sizing:border-box}html{background:var(--bg)}body{min-width:320px;min-height:100vh;color:var(--text);background:radial-gradient(circle at 50% -20%, var(--cyan-soft) 0, transparent 38%), var(--bg);margin:0}button,input,select{font:inherit}button,select,input[type=color],input[type=file]{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}button:disabled,input:disabled,select:disabled{cursor:not-allowed;opacity:.45}.editor{grid-template-rows:auto 1fr;min-height:100vh;display:grid}.topbar{border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:10;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:11px clamp(14px,2.6vw,30px);display:flex;position:sticky;top:0}.brand-lockup{flex:none;align-items:center;gap:11px;display:flex}.brand-mark{background:var(--bg);width:40px;height:40px;box-shadow:inset 0 0 0 5px var(--brand-cyan), 0 0 26px var(--cyan-soft);border-radius:9px;display:block;position:relative}.brand-mark i{background:var(--bg);border-radius:4px;position:absolute;inset:10px}.brand-mark b{background:var(--brand-pink);box-shadow:0 0 16px var(--pink-soft);position:absolute;inset:15px}.eyebrow{color:var(--text-subtle);letter-spacing:.17em;text-transform:uppercase;margin:0 0 3px;font-size:9px;font-weight:800}h1,h2,h3{margin:0;line-height:1.12}h1{letter-spacing:-.025em;font-size:18px}h2{letter-spacing:-.015em;font-size:15px}h3{color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;grid-column:1/-1;margin-top:6px;font-size:10px}.beta-badge{border:1px solid color-mix(in srgb, var(--brand-pink) 35%, transparent);color:var(--brand-pink-strong);background:var(--pink-soft);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:3px 7px;font-size:9px;font-weight:800}.top-actions{justify-content:flex-end;align-items:center;gap:7px;min-width:0;display:flex}.save-state{min-width:110px;color:var(--text-muted);justify-content:flex-end;align-items:center;gap:7px;margin-right:4px;font-size:11px;display:flex}.status-dot{background:var(--brand-cyan);width:7px;height:7px;box-shadow:0 0 13px color-mix(in srgb, var(--brand-cyan) 70%, transparent);border-radius:50%}.button,.icon-button{border:1px solid #0000;border-radius:8px;min-height:36px;font-size:11px;font-weight:750;transition:transform .12s,border-color .12s,background .12s}.button{padding:0 13px}.icon-button{min-width:36px;color:var(--text-muted);border-color:var(--line);background:var(--surface);padding:0}.button:hover:not(:disabled),.icon-button:hover:not(:disabled){transform:translateY(-1px)}.button.brand{color:#061015;background:linear-gradient(115deg, var(--brand-cyan), color-mix(in srgb, var(--brand-cyan) 58%, white));box-shadow:0 8px 28px var(--cyan-soft)}.button.quiet,.button.secondary{color:var(--text);border-color:var(--line);background:var(--surface)}.button.text-button{min-height:30px;color:var(--brand-cyan-strong);background:0 0;padding:0 6px}.theme-button{color:var(--brand-pink)}.workspace{background:var(--line);grid-template-columns:minmax(210px,252px) minmax(440px,1fr) minmax(270px,326px);gap:1px;min-width:0;display:grid}.library-panel,.preview-panel,.inspector-panel{background:color-mix(in srgb, var(--bg-alt) 80%, var(--surface));min-width:0}.library-panel,.inspector-panel{max-height:calc(100vh - 72px);padding:20px 15px;overflow-y:auto}.panel-heading,.preview-heading{justify-content:space-between;align-items:flex-start;gap:14px;display:flex}.panel-heading{margin-bottom:15px}.panel-heading.compact{margin-top:17px}.inspector-heading{z-index:2;background:color-mix(in srgb, var(--bg-alt) 92%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:20px 0 12px;position:sticky;top:-20px}.section-divider{background:var(--line);height:1px;margin:18px 0 0}.panel-note{color:var(--text-subtle);margin:15px 4px 0;font-size:10px;line-height:1.55}.preset-list{gap:8px;display:grid}.preset-card{text-align:left;border:1px solid var(--line);width:100%;color:var(--text);background:var(--surface);border-radius:10px;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px;padding:8px;display:grid}.preset-card:hover{border-color:color-mix(in srgb, var(--brand-cyan) 45%, var(--line));background:color-mix(in srgb, var(--surface) 91%, var(--cyan-soft))}.preset-card strong,.preset-card small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.preset-card strong{font-size:11px}.preset-card small{color:var(--text-subtle);margin-top:3px;font-size:9px}.preset-art{background:radial-gradient(circle, var(--preset-start) 0 5%, transparent 6% 100%), radial-gradient(circle at 35% 65%, var(--preset-end) 0 4%, transparent 5%), #07101c;border-radius:8px;width:48px;height:42px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14}.preset-art:before,.preset-art:after{content:"";background:var(--preset-start);width:5px;height:5px;box-shadow:14px -10px 0 var(--preset-end), -9px 9px 0 var(--preset-start);position:absolute;transform:rotate(45deg)}.preset-art:before{bottom:9px;left:17px}.preset-art:after{top:9px;right:8px;transform:scale(.6)rotate(45deg)}.preset-art-2{background:radial-gradient(ellipse at 50% 90%, var(--preset-start), transparent 55%), #140b0c}.preset-art-3{background:radial-gradient(circle at 25% 20%, var(--preset-start) 0 3%, transparent 4%), radial-gradient(circle at 70% 45%, var(--preset-end) 0 4%, transparent 5%), #07101c}.preset-art-4{background:radial-gradient(circle, transparent 0 10%, var(--preset-start) 11% 13%, transparent 14%), conic-gradient(from 20deg, transparent, var(--preset-end), transparent, var(--preset-start), transparent), #07101c}.preset-art-5{background:radial-gradient(ellipse at 48% 78%, var(--preset-start), transparent 38%), radial-gradient(ellipse at 60% 48%, var(--preset-end), transparent 34%), radial-gradient(ellipse at 40% 24%, #c8d0d8, transparent 28%), #07101c;filter:saturate(.7)}.preset-art-6{background:radial-gradient(ellipse at 50% 100%, #fff 0 8%, transparent 20%), radial-gradient(ellipse at 50% 86%, var(--preset-start), transparent 42%), radial-gradient(ellipse at 50% 72%, var(--preset-end), transparent 58%), #18090c}.preset-art-7{background:radial-gradient(ellipse at 50% 72%, transparent 0 24%, var(--preset-start) 26% 30%, transparent 33%), conic-gradient(from 30deg at 50% 72%, transparent, var(--preset-end), transparent), #061324}.preset-art-8{background:repeating-linear-gradient(105deg, transparent 0 8px, var(--preset-start) 9px 11px, transparent 12px 18px), linear-gradient(#07101c, #102b45)}.preset-art-9{background:radial-gradient(ellipse at 50% 78%, var(--preset-start), transparent 48%), radial-gradient(ellipse at 24% 62%, var(--preset-end), transparent 30%), radial-gradient(ellipse at 76% 58%, #f5d39a, transparent 28%), #17110d}.preset-art-10{background:conic-gradient(from 12deg at 50% 80%, transparent, var(--preset-start), transparent 18%, #ffe45c 24%, transparent 36%, var(--preset-end), transparent 58%), #07101c}.preset-art-11{background:radial-gradient(circle at 25% 32%, #f8ffb5 0 4%, transparent 7%), radial-gradient(circle at 68% 24%, var(--preset-start) 0 3%, transparent 7%), radial-gradient(circle at 72% 68%, var(--preset-end) 0 4%, transparent 8%), radial-gradient(circle at 38% 76%, #b5ff72 0 3%, transparent 7%), #07130e}.preset-art-12{background:conic-gradient(from 50deg at 50% 50%, transparent 0 10%, var(--preset-start) 11% 13%, transparent 14% 28%, #fff 29% 31%, transparent 32% 54%, var(--preset-end) 55% 58%, transparent 59%), radial-gradient(circle, #7ff6ff 0 5%, transparent 7%), #070b1c}.emitter-row{text-align:left;border:1px solid color-mix(in srgb, var(--brand-cyan) 32%, var(--line));width:100%;color:var(--text);background:linear-gradient(110deg, var(--cyan-soft), var(--pink-soft));border-radius:10px;align-items:center;gap:10px;padding:11px;display:flex}.emitter-row strong{font-size:11px;display:block}.emitter-row small{color:var(--text-muted);margin-top:3px;font-size:9px;display:block}.emitter-icon{color:var(--brand-cyan)}.preview-panel{flex-direction:column;padding:clamp(18px,2.6vw,32px);display:flex}.preview-heading{margin-bottom:14px}.metrics{gap:clamp(10px,2vw,22px);margin:0;display:flex}.metrics div{gap:2px;display:grid}.metrics dt{color:var(--text-subtle);letter-spacing:.12em;text-transform:uppercase;font-size:8px;font-weight:800}.metrics dd{color:var(--text-muted);margin:0;font:650 10px JetBrains Mono,ui-monospace,monospace}.preview-tools{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-bottom:10px;display:flex}.preview-tools label{color:var(--text-subtle);align-items:center;gap:6px;font-size:9px;display:flex}.preview-tools select{border:1px solid var(--line);min-height:28px;color:var(--text-muted);background:var(--surface);border-radius:6px;padding:0 24px 0 8px;font-size:9px}.preview-tools input[type=color]{border:1px solid var(--line);background:var(--surface);border-radius:6px;width:28px;height:28px;padding:2px}.canvas-frame{border:1px solid var(--line);background:var(--preview-background,#07101c);min-height:300px;box-shadow:var(--shadow);border-radius:16px;flex:1;place-items:center;display:grid;position:relative;overflow:hidden}.canvas-grid{opacity:.16;background-image:linear-gradient(#1de8f12e 1px,#0000 1px),linear-gradient(90deg,#1de8f12e 1px,#0000 1px);background-size:24px 24px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#000 34%,#000);mask-image:linear-gradient(#0000,#000 34%,#000)}.canvas-host{z-index:1;aspect-ratio:16/11;width:min(100%,720px);transition:width .18s;position:relative}.canvas-frame[data-scale=compact] .canvas-host{width:min(70%,460px)}.canvas-frame[data-scale=large] .canvas-host{width:100%}.canvas-host canvas{display:block;width:100%!important;height:100%!important}.preview-status{z-index:2;color:#d2e5f199;margin:0;font-size:9px;position:absolute;bottom:9px;left:12px}.transport{justify-content:center;gap:8px;padding-top:12px;display:flex}.compact-button{width:100%;min-height:34px;padding:0 9px;font-size:9px}.texture-actions{gap:5px;display:flex}.texture-actions .compact-button{min-width:0}.inspector-panel{background:var(--bg-alt)}.form-error{border:1px solid color-mix(in srgb, var(--brand-pink) 45%, var(--line));color:var(--brand-pink-strong);background:var(--pink-soft);border-radius:8px;margin:0 0 10px;padding:9px 10px;font-size:10px;line-height:1.4}details{border:1px solid var(--line);background:var(--surface);border-radius:10px;margin-bottom:8px}summary{color:var(--text-muted);letter-spacing:.04em;cursor:pointer;-webkit-user-select:none;user-select:none;padding:11px 12px;font-size:10px;font-weight:800;list-style-position:inside}details[open] summary{color:var(--text);border-bottom:1px solid var(--line-soft)}.property-grid{grid-template-columns:1fr 1fr;gap:10px 8px;padding:11px;display:grid}.field{min-width:0;color:var(--text-subtle);gap:5px;font-size:9px;font-weight:650;display:grid}.field.span-2,.field-help.span-2{grid-column:1/-1}.field input:not([type=color]):not([type=file]),.field select{border:1px solid var(--line);width:100%;min-height:32px;color:var(--text);background:var(--surface-soft);border-radius:7px;padding:0 8px;font:550 10px JetBrains Mono,ui-monospace,monospace}.field input[type=color]{border:1px solid var(--line);background:var(--surface-soft);border-radius:7px;width:100%;height:32px;padding:3px}.field-help{color:var(--text-subtle);margin:0;font-size:9px;line-height:1.45}.file-control{border:1px dashed color-mix(in srgb, var(--brand-cyan) 38%, var(--line));background:var(--cyan-soft);border-radius:8px;gap:5px;min-height:36px;padding:7px;display:grid}.file-control input{max-width:100%;color:var(--text-muted);font-size:9px}.file-control span{color:var(--text);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.toast{z-index:30;border:1px solid color-mix(in srgb, var(--brand-cyan) 35%, var(--line));max-width:min(340px,100vw - 36px);color:var(--text);background:var(--surface-raised);box-shadow:var(--shadow);border-radius:10px;padding:11px 14px;font-size:11px;position:fixed;bottom:18px;right:18px}@media (width<=1120px){.workspace{grid-template-columns:minmax(190px,230px) minmax(0,1fr)}.inspector-panel{grid-column:1/-1;max-height:none}.inspector-panel form{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:8px;display:grid}.inspector-panel details{margin:0}.inspector-heading{position:static}}@media (width<=780px){.topbar{align-items:flex-start}.top-actions{flex-wrap:wrap}.save-state{order:-1;width:100%;min-width:0}.button.quiet{width:36px;padding:0;font-size:0}.button.quiet[data-action=import]:after{content:"↑";font-size:14px}.button.quiet[data-action=export]:after{content:"↓";font-size:14px}.button.brand[data-action=copy-code]{width:36px;padding:0;font-size:0}.button.brand[data-action=copy-code]:after{content:"</>";font:800 9px ui-monospace,monospace}.workspace{flex-direction:column;display:flex}.preview-panel{order:-1;padding:16px 13px}.library-panel,.inspector-panel{max-height:none;padding:18px 13px}.preset-list,.inspector-panel form{grid-template-columns:1fr 1fr}}@media (width<=520px){.topbar{min-height:64px;padding:10px 12px}.brand-mark{width:36px;height:36px}.beta-badge,.save-state{display:none}.top-actions{flex-wrap:nowrap;gap:5px}.top-actions .icon-button,.top-actions .button{width:32px;min-width:32px;min-height:32px}.top-actions [data-action=undo],.top-actions [data-action=redo]{display:none}.preview-heading{display:grid}.metrics{justify-content:space-between;width:100%}.preview-tools{justify-content:flex-start}.canvas-frame{border-radius:12px;min-height:260px}.transport .button{flex:1;padding:0 8px}.preset-list,.inspector-panel form{grid-template-columns:1fr}.property-grid{gap:9px 7px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}