@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#f4f5f7;font-synthesis:none;--surface:#11151c;--surface-2:#171c25;--line:#ffffff17;--muted:#8e96a5;--orange:#ff6b35;--mint:#7be7c4;--violet:#8d76ff;background:#0b0d12;font-family:Manrope,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.welcome-shell{background:linear-gradient(#ffffff06 1px,#0000 1px) 0 0/48px 48px,linear-gradient(90deg,#ffffff06 1px,#0000 1px) 0 0/48px 48px,radial-gradient(circle at 50% 10%,#181c2b 0,#0b0d12 48%);min-height:100dvh;padding:28px clamp(24px,5vw,76px) 34px;position:relative;overflow:auto}.ambient{filter:blur(110px);opacity:.13;pointer-events:none;border-radius:50%;width:420px;height:420px;position:fixed}.ambient-one{background:var(--orange);top:25%;left:-240px}.ambient-two{background:var(--violet);bottom:-100px;right:-260px}.welcome-nav,.welcome-footer{z-index:1;justify-content:space-between;align-items:center;display:flex;position:relative}.brand{letter-spacing:.16em;white-space:nowrap;align-items:center;gap:12px;font-size:13px;font-weight:500;display:flex}.brand b{color:var(--orange);font-weight:800}.brand-mark{align-items:flex-end;gap:3px;width:29px;height:27px;display:flex;transform:skewY(-8deg)}.brand-mark i{background:currentColor;border-radius:2px;width:7px;display:block}.brand-mark i:first-child{height:15px}.brand-mark i:nth-child(2){background:var(--orange);height:22px}.brand-mark i:nth-child(3){height:18px}.webgpu-pill{color:#aab1bd;letter-spacing:.08em;border:1px solid var(--line);background:#11151c99;border-radius:100px;align-items:center;gap:8px;padding:9px 12px;font:500 11px DM Mono,monospace;display:flex}.webgpu-pill span{background:var(--mint);width:6px;height:6px;box-shadow:0 0 10px var(--mint);border-radius:50%}.welcome-hero{z-index:1;text-align:center;max-width:920px;margin:clamp(68px,11vh,120px) auto 56px;position:relative}.eyebrow{color:var(--orange);letter-spacing:.08em;background:#ff6b3514;border:1px solid #ff6b3540;border-radius:100px;align-items:center;gap:8px;padding:8px 13px;font-size:12px;font-weight:700;display:inline-flex}.welcome-hero h1{letter-spacing:-.055em;margin:24px 0 20px;font-size:clamp(48px,6vw,84px);font-weight:800;line-height:1.02}.welcome-hero h1 em{color:#0000;-webkit-text-stroke:1px #ffffff9e;font-style:normal}.welcome-hero p{color:var(--muted);margin:0;font-size:clamp(15px,1.4vw,18px)}.resume-button{color:#e9ebef;border:1px solid var(--line);cursor:pointer;background:#171c25d9;border-radius:10px;align-items:center;gap:9px;min-height:44px;margin:23px auto 0;padding:0 15px;display:flex}.resume-button:hover{border-color:#7be7c473}.resume-button span{color:var(--mint);border-left:1px solid var(--line);padding-left:6px;font:500 10px DM Mono}.welcome-error{color:#ffadad;background:#ff5b5b14;border:1px solid #ff5b5b33;border-radius:8px;width:fit-content;margin:16px auto 0;padding:10px 14px;font-size:12px}.mode-grid{z-index:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1120px;margin:0 auto 72px;display:grid;position:relative}.mode-card{text-align:left;border:1px solid var(--line);cursor:pointer;background:linear-gradient(145deg,#1a1f29eb,#0f1219e6);border-radius:18px;flex-direction:column;align-items:flex-start;min-height:270px;padding:28px;transition:transform .25s,border-color .25s,background .25s;display:flex;position:relative;overflow:hidden}.mode-card:after{content:"";background:var(--accent);filter:blur(65px);opacity:0;border-radius:50%;width:190px;height:190px;transition:opacity .25s;position:absolute;inset:auto -50px -90px auto}.mode-card:hover{border-color:color-mix(in srgb, var(--accent) 52%, transparent);background:linear-gradient(145deg,#1e232efa,#11141cf2);transform:translateY(-6px)}.mode-card:hover:after{opacity:.18}.mode-card.orange{--accent:var(--orange)}.mode-card.mint{--accent:var(--mint)}.mode-card.violet{--accent:var(--violet)}.mode-index{color:#4a5260;font:500 12px DM Mono;position:absolute;top:19px;right:22px}.mode-icon{width:48px;height:48px;color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);border-radius:12px;place-items:center;display:grid}.mode-icon svg{width:22px}.mode-copy{flex-direction:column;gap:10px;margin-top:28px;display:flex}.mode-copy strong{letter-spacing:-.02em;font-size:22px}.mode-copy>span{color:var(--muted);max-width:270px;font-size:14px;line-height:1.65}.mode-action{color:var(--accent);align-items:center;gap:7px;margin-top:auto;font-size:13px;font-weight:700;display:flex}.mode-action svg{transition:transform .2s}.mode-card:hover .mode-action svg{transform:translate(4px)}.welcome-footer{color:#646c78;letter-spacing:.05em;max-width:1120px;margin:auto;font:400 11px DM Mono}.loading-mask{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#080a0ed1;flex-direction:column;justify-content:center;align-items:center;gap:9px;display:flex;position:fixed;inset:0}.loading-mask strong{margin-top:15px;font-size:18px}.loading-mask span{color:var(--muted);font-size:13px}.loader{border:3px solid #ffffff1a;border-top-color:var(--orange);border-radius:50%;width:42px;height:42px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.editor-shell{background:#0b0d12;grid-template-rows:58px minmax(0,1fr) 27px;height:100dvh;display:grid}.editor-topbar{z-index:10;border-bottom:1px solid var(--line);background:#0c0f14f0;align-items:center;padding:0 14px 0 18px;display:flex;position:relative}.brand-button{border:0;border-right:1px solid var(--line);cursor:pointer;background:0 0;padding:8px 18px 8px 0}.project-title{color:#6f7785;align-items:center;gap:8px;padding-left:18px;font-size:11px;display:flex}.project-title span{color:#d8dbe1;font-size:13px;font-weight:650}.project-title i{background:#4c5360;border-radius:50%;width:3px;height:3px}.top-actions{align-items:center;gap:7px;margin-left:auto;display:flex}.icon-button,.camera-actions button{cursor:pointer;color:#aab1bd;background:0 0;border:1px solid #0000;border-radius:8px;place-items:center;width:38px;height:38px;display:grid}.icon-button:hover,.camera-actions button:hover{color:#fff;border-color:var(--line);background:#1b202a}.icon-button svg{width:17px}.icon-button:disabled,button:disabled{opacity:.35;cursor:not-allowed}.top-divider{background:var(--line);width:1px;height:22px;margin:0 4px}.secondary-button,.play-button{cursor:pointer;border-radius:8px;align-items:center;gap:8px;min-height:38px;padding:0 14px;font-size:12px;font-weight:700;display:flex}.secondary-button{border:1px solid var(--line);background:#171b23}.secondary-button:hover{background:#1d222c}.play-button{background:var(--orange);color:#111318;border:1px solid coral;box-shadow:0 0 18px #ff6b3529}.play-button.is-playing{background:#f1f3f7;border-color:#f1f3f7}.editor-workspace{grid-template-columns:66px minmax(0,1fr) 276px;min-height:0;display:grid}.tool-rail{z-index:4;border-right:1px solid var(--line);background:#0e1117;flex-direction:column;align-items:center;gap:5px;padding:12px 8px;display:flex}.tool-button{color:#777f8e;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:50px;min-height:52px;display:flex}.tool-button svg{width:19px;height:19px}.tool-button span{font-size:9px;font-weight:600}.tool-button:hover{color:#d9dde3;background:#171c24}.tool-button.active{color:var(--orange);background:#ff6b351a;border-color:#ff6b3533}.rail-divider{background:var(--line);width:31px;height:1px;margin:6px 0}.viewport-wrap{background:#11151d;min-width:0;min-height:0;position:relative;overflow:hidden}.viewport,.viewport canvas{touch-action:none;width:100%;height:100%;display:block}.selection-box{z-index:6;pointer-events:none;border:1px solid var(--mint);background:#7be7c41f;display:none;position:absolute;box-shadow:0 0 0 1px #0006}.empty-guide{text-align:center;pointer-events:none;position:absolute;top:47%;left:50%;transform:translate(-50%,-50%)}.empty-guide>span{width:54px;height:54px;color:var(--orange);background:#ff6b351a;border:1px solid #ff6b3540;border-radius:15px;place-items:center;margin:auto;display:grid}.empty-guide strong{margin-top:18px;font-size:17px;display:block}.empty-guide p{color:#8c94a2;margin:7px 0 14px;font-size:12px}.empty-guide button{pointer-events:auto;color:#111318;background:var(--orange);cursor:pointer;border:0;border-radius:8px;padding:10px 16px;font-weight:700}.viewport-hud{align-items:center;gap:8px;display:flex;position:absolute;bottom:13px;left:14px}.viewport-hud span{color:#87909e;letter-spacing:.04em;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#0a0c11b8;border:1px solid #ffffff12;border-radius:5px;align-items:center;gap:6px;padding:6px 8px;font:500 9px DM Mono;display:flex}.viewport-hud i{background:var(--mint);border-radius:50%;width:5px;height:5px}.viewport-hud i.warn{background:#ffc857}.camera-actions{flex-direction:column;gap:5px;display:flex;position:absolute;top:13px;right:13px}.camera-actions button{border-color:var(--line);background:#0c0f14c2}.camera-actions svg{width:17px}.play-hint{color:var(--mint);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0b0d12c7;border:1px solid #7be7c440;border-radius:100px;padding:8px 13px;font-size:11px;position:absolute;top:14px;left:50%;transform:translate(-50%)}.engine-error{z-index:15;background:#120e12f0;border:1px solid #ff5b5b47;border-radius:12px;gap:9px;width:min(390px,100% - 32px);padding:20px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 60px #0006}.engine-error strong{color:#ffadad}.engine-error span{color:#a9b0bc;font-size:12px;line-height:1.6}.engine-error button{border:1px solid var(--line);cursor:pointer;background:#20242d;border-radius:7px;justify-self:end;padding:7px 12px}.property-panel{z-index:4;border-left:1px solid var(--line);background:#10131a;overflow:auto}.panel-mobile-toggle{display:none}.panel-content{min-height:100%}.panel-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:70px;padding:15px 17px;display:flex}.panel-heading>div{flex-direction:column;gap:4px;display:flex}.panel-heading span{color:#6f7887;text-transform:uppercase;letter-spacing:.1em;font:500 9px DM Mono}.panel-heading strong{font-size:13px}.panel-heading button{color:var(--orange);cursor:pointer;background:0 0;border:0;font-size:10px}.property-section{border-bottom:1px solid var(--line);padding:18px 17px}.property-section>label,.label-row label{color:#929aa8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:13px;font-size:10px;font-weight:700;display:block}.palette-grid{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.swatch,.custom-color{aspect-ratio:1;cursor:pointer;border:1px solid #ffffff1f;border-radius:8px;place-items:center;min-width:0;display:grid;position:relative}.swatch:after{content:"";border:1px solid #0000;border-radius:11px;position:absolute;inset:-3px}.swatch.active:after{border-color:#fff}.swatch svg{color:#14171d;filter:drop-shadow(0 1px 1px #ffffff4d);width:13px}.custom-color{color:#8c95a4;background:conic-gradient(#ff6b35,#ffc857,#7be7c4,#49a8ff,#8d76ff,#ff6b35);overflow:hidden}.custom-color:before{content:"";background:#181d25;border-radius:5px;position:absolute;inset:4px}.custom-color svg{z-index:1;width:16px;position:relative}.custom-color input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.hex-row{border:1px solid var(--line);background:#151922;border-radius:7px;align-items:center;gap:10px;height:34px;margin-top:13px;padding:0 10px;display:flex}.color-dot{border-radius:50%;width:9px;height:9px}.hex-row code{color:#aab2bf;font:500 11px DM Mono}.label-row{justify-content:space-between;align-items:center;display:flex}.label-row output{color:var(--orange);font:500 10px DM Mono}.label-row label{margin:0}.range{width:100%;accent-color:var(--orange);margin:17px 0 7px}.range-labels{color:#606977;justify-content:space-between;font-size:9px;display:flex}.shape-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.shape-grid button{border:1px solid var(--line);color:#aeb5c0;cursor:pointer;background:#161b23;border-radius:8px;align-items:center;gap:7px;min-height:42px;padding:0 10px;font-size:10px;display:flex}.shape-grid button:hover{color:#fff;border-color:#ff6b3552}.shape-grid svg{width:15px;color:var(--orange)}.transform-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.transform-grid button{color:#b7bec9;border:1px solid var(--line);cursor:pointer;background:#161b23;border-radius:7px;place-items:center;min-height:38px;display:grid}.transform-grid button:hover{color:var(--mint);border-color:#7be7c44d}.transform-grid svg{width:15px}.shortcut-help{color:#616a78;align-items:center;gap:6px;margin:10px 0 0;font-size:9px;display:flex}.shortcut-help svg{width:13px}.stats-section{gap:12px;display:grid}.stats-section>div{color:#737c8a;justify-content:space-between;font-size:11px;display:flex}.stats-section strong{color:#dce0e6;font:500 11px DM Mono}.stats-section strong.text-warn{color:#ffc857}.danger-button{color:#ff8585;cursor:pointer;background:#ff5b5b0f;border:1px solid #ff5b5b33;border-radius:8px;width:calc(100% - 34px);height:38px;margin:17px;font-size:11px}.editor-statusbar{border-top:1px solid var(--line);color:#666f7d;letter-spacing:.035em;background:#0b0e13;justify-content:space-between;align-items:center;padding:0 12px 0 18px;font:500 9px DM Mono;display:flex}.editor-statusbar span{align-items:center;gap:6px;display:flex}.status-ok{background:var(--mint);border-radius:50%;width:5px;height:5px}@media (width<=900px){.mode-grid{grid-template-columns:1fr;max-width:540px}.mode-card{min-height:220px}.welcome-hero{margin-top:70px}.welcome-footer{max-width:540px}.editor-workspace{grid-template-columns:60px minmax(0,1fr)}.property-panel{z-index:20;border:1px solid var(--line);border-radius:12px;width:270px;transition:transform .25s;position:absolute;top:68px;bottom:38px;right:10px;transform:translate(calc(100% + 20px));box-shadow:0 20px 50px #00000059}.property-panel.open{transform:translate(0)}.panel-mobile-toggle{border:1px solid var(--line);color:#bec4ce;background:#171b23;border-radius:8px 0 0 8px;align-items:center;gap:7px;height:38px;padding:0 11px;font-size:11px;display:flex;position:fixed;top:69px;right:12px;transform:translate(-276px)}.property-panel:not(.open) .panel-mobile-toggle{border-radius:8px;transform:translate(-8px)}.panel-mobile-toggle svg:last-child{transition:transform .2s}.property-panel.open .panel-mobile-toggle svg:last-child{transform:rotate(180deg)}.project-title,.editor-statusbar span:nth-child(2){display:none}}@media (width<=620px){.welcome-shell{padding:20px 16px 28px}.webgpu-pill{display:none}.welcome-hero{text-align:left;margin:62px 0 38px}.welcome-hero h1{font-size:46px}.welcome-hero p{line-height:1.65}.mode-card{min-height:205px;padding:22px}.mode-copy{margin-top:19px}.welcome-footer{flex-direction:column;align-items:flex-start;gap:8px}.editor-shell{grid-template-rows:54px minmax(0,1fr) 26px}.editor-topbar{padding:0 8px}.brand-button .brand>span:last-child{display:none}.brand-button{border-right:0;padding-right:10px}.top-divider,.import-button{display:none}.play-button{padding:0 11px}.editor-workspace{display:block;position:relative}.tool-rail{z-index:12;border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0e1117e6;border-radius:13px;flex-direction:row;justify-content:space-around;height:60px;padding:5px 8px;position:absolute;bottom:8px;left:8px;right:8px}.tool-button{width:54px;height:48px;min-height:48px}.rail-divider{width:1px;height:30px;margin:0 2px}.viewport-wrap{height:100%}.viewport-hud{bottom:78px}.property-panel{top:62px;bottom:78px}.panel-mobile-toggle{top:63px}.editor-statusbar span:last-child{display:none}.editor-statusbar{justify-content:flex-start}.camera-actions{top:55px}.play-hint{top:10px}.empty-guide{width:82%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}