:root{--left-width:216px;--right-width:282px;--graph-height:270px}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--cl-bg);color:var(--cl-text);font-family:var(--cl-font);font-size:12px}body{-webkit-font-smoothing:antialiased}#app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}.topbar{height:53px;flex:none;display:flex;align-items:center;padding:0 15px;gap:17px;border-bottom:1px solid #32343c;background:#1c1e24}.brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:650;letter-spacing:-.5px}.brand-mark{height:29px;width:29px;border-radius:8px;border:1px solid #765035;background:linear-gradient(145deg,#573b2b,#33271f);color:#f0a26c;display:flex;align-items:center;justify-content:center}.brand small{font-size:8px;font-weight:600;letter-spacing:.8px;padding:3px 4px;border:1px solid #424650;border-radius:3px;color:#9ca2ad;margin-left:2px}.menu-group{display:flex;align-items:center;gap:1px}.menu-group .cl-button{font-size:11px;color:#a4abb8;padding:4px 8px}.topbar-separator{height:21px;width:1px;background:#353842}.workspace-switcher{margin:auto;display:flex;gap:3px;padding:3px;background:#121418;border:1px solid #2c3038;border-radius:7px}.workspace-switcher button{padding:5px 13px;color:#858e9c;font-size:10px;min-height:27px}.workspace-switcher button.active{background:#303038;color:#eadbd0}.topbar-actions{display:flex;align-items:center;gap:8px}.topbar-actions>.cl-button.primary{padding:8px 13px}.gpu-badge{display:flex;align-items:center;gap:6px;font-family:var(--cl-mono);font-size:9px;color:#93b69b;padding:5px 8px;border-radius:5px;border:1px solid #324239;background:#1a2720}.gpu-badge:before{content:'';height:5px;width:5px;background:#86c096;border-radius:50%;box-shadow:0 0 8px #86c09666}.gpu-badge.software{color:#c7a477;border-color:#54422d;background:#2b241b}.gpu-badge.software:before{background:#c7a477}.projectbar{height:38px;display:flex;align-items:center;gap:12px;padding:0 15px;border-bottom:1px solid #2b2e35;background:#181a1f;flex:none}.projectbar .project-label{display:flex;align-items:center;gap:8px;font-size:11px}.project-label>svg{color:#e2a577}.project-label strong{font-weight:550}.dirty-dot{color:var(--cl-accent);font-size:16px;line-height:1}.projectbar .crumb{color:#676f7c;font-size:10px}.projectbar .spacer{flex:1}.projectbar .view-tools{display:flex;gap:3px}.projectbar .cl-button{color:#9aa3b2}.workspace{display:grid;grid-template-columns:var(--left-width) 4px minmax(0,1fr) 4px var(--right-width);flex:1;min-height:0}.library,.inspector-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#1b1d22}.library{border-right:1px solid #292c33}.inspector-panel{border-left:1px solid #292c33}.splitter-x{cursor:col-resize;background:#121419;position:relative}.splitter-y{cursor:row-resize;background:#111317;position:relative}.splitter-x:hover,.splitter-x.dragging,.splitter-y:hover,.splitter-y.dragging{background:#916345;z-index:10}.pane-header{height:36px;display:flex;align-items:center;border-bottom:1px solid #30333b;padding:0 10px;gap:6px;flex:none}.pane-header>span{font-size:9px;font-weight:600;letter-spacing:1.2px;color:#9ca4b1}.pane-header .cl-button{margin-left:auto;color:#727c8d}.pane-tabs{display:flex;gap:15px;align-items:stretch;padding:0 15px;height:38px;border-bottom:1px solid #30333b;flex:none}.pane-tabs button{padding:0;background:none;border:0;border-bottom:2px solid transparent;font-size:10px;color:#798393}.pane-tabs button.active{border-bottom-color:var(--cl-accent);color:#e0d9d4}.preset-search{margin:13px 12px 10px;position:relative}.preset-search svg{position:absolute;top:9px;left:10px;color:#677283}.preset-search input{width:100%;padding:8px 9px 8px 31px;background:#14161b;font-size:10px;border-color:#30343d}.preset-categories{display:flex;gap:4px;margin:0 12px 12px;flex-wrap:wrap}.preset-categories button{font-size:8px;min-height:22px;padding:4px 6px;text-transform:uppercase;letter-spacing:.6px;border-radius:4px;color:#7c8696}.preset-categories button.active{background:#53402f66;color:#e3a271}.preset-list{padding:0 10px;overflow:auto;flex:1;min-height:0}.preset-card{width:100%;display:flex;align-items:center;text-align:left;gap:10px;margin-bottom:7px;padding:7px;border:1px solid #2d3037;border-radius:6px;background:#202228;position:relative;overflow:hidden;color:var(--cl-text)}.preset-card:hover{background:#282a31;border-color:#51515a}.preset-card.active{border-color:#8e6345;background:#2b2725}.preset-card.active:after{content:'';position:absolute;right:9px;top:50%;width:4px;height:4px;border-radius:50%;background:#eca16d}.preset-art{flex-shrink:0;height:44px;width:47px;border-radius:5px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 90%,color-mix(in srgb,var(--preset-color) 25%,transparent),transparent 65%),#11141a;display:flex;align-items:center;justify-content:center}.preset-art svg{width:30px;height:34px;stroke-width:1;fill:color-mix(in srgb,var(--preset-color) 14%,transparent);color:var(--preset-color);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--preset-color) 30%,transparent))}.preset-name{font-size:10px;font-weight:550;margin-bottom:5px}.preset-tag{font-size:7px;font-weight:600;letter-spacing:1px;color:#777f8e}.library-footer{padding:12px 14px;border-top:1px solid #2c2f36;color:#687386;font-size:8px;letter-spacing:.8px;line-height:1.7}.scene-list{padding:9px 8px;overflow:auto}.scene-node{display:flex;align-items:center;gap:8px;width:100%;text-align:left;color:#99a2b1;font-size:11px;padding:9px 8px;background:none;border:0;border-radius:5px}.scene-node.active{background:#303039;color:#ede5dc}.scene-node small{margin-left:auto;font-size:8px;color:#606b7e}.studio-center{display:grid;grid-template-rows:minmax(140px,1fr) 4px var(--graph-height);min-width:0;min-height:0;background:#101217}.viewport-panel{position:relative;min-height:0;display:flex;flex-direction:column;overflow:hidden}.viewport-toolbar{height:35px;flex:none;background:#1a1c22;display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid #2b2e36}.viewport-toolbar .cl-button{color:#9aa3b2;min-height:23px;font-size:9px}.viewport-toolbar select{font-size:9px;border-color:transparent;background:#20232a;padding:4px 7px}.viewport-toolbar .spacer{flex:1}.viewport-stage{flex:1;min-height:0;position:relative;background:radial-gradient(ellipse at 50% 45%,#222934,#101318);overflow:hidden}.viewport-stage canvas{display:block;width:100%;height:100%;object-fit:fill;touch-action:none}.viewport-overlay{position:absolute;pointer-events:none;font-family:var(--cl-mono);font-size:9px;color:#82909e;line-height:1.8;text-shadow:0 1px 4px #000}.viewport-overlay.top-left{top:16px;left:18px}.viewport-overlay.top-right{top:16px;right:17px;text-align:right}.viewport-overlay.bottom-left{left:17px;bottom:14px}.viewport-overlay.bottom-right{right:17px;bottom:13px}.view-label{display:flex;align-items:center;gap:6px;font-family:var(--cl-font);font-size:10px;font-weight:550;color:#b1bbc8;letter-spacing:.1px}.live-dot{height:5px;width:5px;background:#eaa268;border-radius:50%}.viewport-subtitle{color:#65788a;font-size:8px;letter-spacing:.5px;margin-top:4px}.axis-gizmo{width:53px;height:49px;position:relative;opacity:.8}.axis-gizmo:before,.axis-gizmo:after{content:'';position:absolute;width:24px;height:1px;left:23px;top:29px;transform-origin:left;background:#ca7573;transform:rotate(18deg)}.axis-gizmo:after{background:#68a390;transform:rotate(-90deg)}.axis-gizmo i{position:absolute;background:#7899c2;left:3px;top:37px;width:24px;height:1px;transform:rotate(-22deg)}.axis-gizmo span{position:absolute;font-size:8px}.axis-gizmo .x{right:0;bottom:8px;color:#cc8782}.axis-gizmo .y{left:21px;top:0;color:#84b3a3}.axis-gizmo .z{left:0;bottom:0;color:#8aa5c8}.software-banner{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);padding:6px 10px;font-size:8px;background:#262319dc;border:1px solid #665036;border-radius:5px;color:#bfa581;white-space:nowrap;pointer-events:none}.transport{height:41px;background:#191b21;border-top:1px solid #2c2f36;display:flex;align-items:center;gap:7px;padding:0 13px;flex:none}.transport .cl-button{color:#919cac;min-height:25px;width:26px}.transport .play-button{color:#eca36f;background:#4a3424aa;border-color:#67503a}.transport-separator{height:15px;width:1px;background:#353944;margin:0 5px}.frame-display{font-family:var(--cl-mono);font-size:11px;color:#dcdee3;min-width:53px}.frame-display small{font-size:8px;color:#636e80}.transport .frame-slider{flex:1;margin:0 7px;height:2px}.transport input[type=number]{width:46px;font-size:9px;padding:4px}.transport .time-readout{font-family:var(--cl-mono);font-size:9px;color:#758196}.graph-panel{display:flex;flex-direction:column;overflow:hidden;min-height:0;background:#17191f}.graph-header{display:flex;align-items:center;height:35px;flex:none;padding:0 10px;background:#1d1f26;border-bottom:1px solid #30333b;gap:8px}.graph-tabs{height:100%;display:flex;align-items:stretch;gap:17px;margin-left:5px}.graph-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:#7b8698;font-size:10px;display:flex;align-items:center;gap:6px;padding:0}.graph-tabs button.active{border-bottom-color:var(--cl-accent);color:#ddd8d4}.graph-header>.cl-button:first-of-type{margin-left:auto}.graph-header>.cl-button{min-height:24px;color:#8893a4}.node-count{font-family:var(--cl-mono);font-size:8px;color:#646e7e}.graph-content,.animation-content{flex:1;min-height:0}.animation-content{overflow:auto}.graph-footer{height:21px;display:flex;align-items:center;padding:0 12px;font-size:8px;gap:12px;color:#5e6b7e;flex:none;background:#17191e;border-top:1px solid #262a32}.graph-footer .spacer{flex:1}.inspector-content{overflow:auto;flex:1;min-height:0}.inspector-footer{padding:10px 16px;border-top:1px solid #2b2f37;font-size:8px;color:#667184;line-height:1.7}.inspector-footer .cl-button{padding:3px 0;font-size:9px;color:#9b795f}.statusbar{height:25px;background:#17191e;border-top:1px solid #30333a;display:flex;align-items:center;gap:14px;padding:0 13px;font:8px var(--cl-mono);color:#737f90;flex:none}.statusbar .spacer{flex:1}.statusbar .status-good{color:#89a894}.statusbar .cl-button{font-size:8px;min-height:19px;padding:1px 4px;color:#818c9d}.statusbar .cl-button svg{width:12px;height:12px}.busy-indicator{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#16191edb;backdrop-filter:blur(8px);border:1px solid #45414a;border-radius:10px;padding:18px 24px;text-align:center;color:#d1b49c;font-size:11px;z-index:6}.busy-indicator.visible{display:block}.busy-indicator .bar{height:3px;background:#343039;width:160px;margin:13px auto 0;overflow:hidden;border-radius:3px}.busy-indicator .bar i{display:block;height:100%;background:#da9565;width:0;transition:width .15s}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-field{display:flex;flex-direction:column;gap:7px;font-size:10px;color:#9ca7b7}.form-field input,.form-field select{width:100%;height:33px;padding:7px 9px;font-size:11px}.form-field.full{grid-column:1/-1}.form-checkbox{display:flex;align-items:center;gap:8px;font-size:11px;color:#a9b3c0}.export-note{padding:11px 13px;background:#25232a;border:1px solid #3b3640;border-radius:5px;font-size:10px;line-height:1.8;color:#a6978e;margin-top:17px}.export-progress{height:5px;background:#30323a;border-radius:4px;overflow:hidden;margin:15px 0 8px}.export-progress i{height:100%;display:block;width:0;background:var(--cl-accent)}.export-progress-label{font-size:10px;color:#9aa6b8}.export-preview{width:100%;max-height:240px;object-fit:contain;margin-top:15px;background:repeating-conic-gradient(#292b32 0% 25%,#202329 0% 50%) 50% /16px 16px;border-radius:6px}.shortcut-row{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid #2b3039;font-size:11px}.shortcut-row kbd{font-family:var(--cl-mono);color:#d1ab8d;font-size:10px}.help-intro{font-size:12px;line-height:1.8;color:#a1adbc}.help-heading{font-size:11px;color:#dac0aa;margin-top:22px}.package-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;font-family:var(--cl-mono);font-size:9px;color:#9ea6b5}.package-list span{background:#14171c;padding:9px;border:1px solid #30343c;border-radius:4px}.mobile-toggle{display:none!important}.new-node-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px}.new-node{display:flex;gap:10px;align-items:center;text-align:left;padding:14px;background:#23262d;border:1px solid #3a3e49;border-radius:7px;font-size:12px}.new-node:hover{border-color:#b18564;background:#2c2928}.new-node small{display:block;font-size:9px;color:#737f91;margin-top:5px}#startup{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 43%,#302622,#16181d 47%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999}.startup-mark{font-size:52px;line-height:1;font-weight:250;letter-spacing:-6px;color:#e9a171;border:1px solid #75513b;width:90px;height:90px;border-radius:25px;display:flex;align-items:center;justify-content:center;background:#32271f}.startup-mark span{font-size:60px;margin-left:-4px;color:#f8cbab}#startup h1{font-size:27px;letter-spacing:-.8px;font-weight:500;margin:23px 0 10px}#startup p{font-size:8px;letter-spacing:3px;color:#a58d7e}#startup-message{font-size:10px;color:#8b8180;margin-top:12px}.startup-progress{width:130px;height:2px;background:#4d3930;margin-top:25px;overflow:hidden}.startup-progress i{display:block;width:50%;height:100%;background:#f1a572;animation:loading 1.4s ease-in-out infinite}#startup.failed .startup-progress{display:none}#startup.failed #startup-message{max-width:550px;padding:20px;line-height:1.7;text-align:center}.startup-actions{display:flex;gap:10px;margin:12px}.startup-gone{opacity:0;pointer-events:none;transition:opacity .25s}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#3b414c;border-radius:6px}::-webkit-scrollbar-track{background:transparent}[hidden]{display:none!important}@keyframes loading{from{transform:translateX(-130%)}to{transform:translateX(250%)}}
@media(min-width:1700px){:root{--left-width:235px;--right-width:304px;--graph-height:285px}.topbar{height:57px}.preset-art{height:52px;width:54px}.preset-name{font-size:11px}.preset-card{padding:9px}.cl-property{font-size:11px}}
@media(max-width:1100px){:root{--left-width:185px;--right-width:248px}.brand small{display:none}.topbar{gap:10px;padding:0 10px}.workspace-switcher button{padding:5px 8px}.menu-group .cl-button{padding:4px 5px}.gpu-badge{font-size:8px}.topbar-actions{gap:4px}.preset-art{width:37px}.preset-card{gap:7px}.preset-name{font-size:9px}.transport{padding:0 7px;gap:3px}.time-readout{display:none}.viewport-subtitle{display:none}.projectbar .crumb{display:none}}
@media(max-width:850px){:root{--right-width:255px;--graph-height:210px}.workspace{grid-template-columns:minmax(0,1fr) 4px var(--right-width)}.library,.splitter-left{display:none}.library.open{position:fixed;display:flex;top:91px;bottom:25px;left:0;width:235px;z-index:50;box-shadow:20px 0 70px #0009}.mobile-toggle{display:inline-flex!important}.menu-group{display:none}.brand{font-size:15px}.topbar-separator{display:none}.workspace-switcher{margin-left:auto}.projectbar{padding:0 10px}.projectbar .cl-button{font-size:9px}.cl-graph-hint{display:none}}
@media(max-width:600px){:root{--graph-height:200px}.workspace{display:flex}.studio-center{width:100%;flex:1}.inspector-panel,.splitter-right{display:none}.inspector-panel.open{position:fixed;display:flex;top:91px;bottom:25px;right:0;width:280px;z-index:50;box-shadow:-20px 0 70px #0009}.topbar{height:50px;padding:0 8px;gap:8px}.brand{font-size:14px;gap:7px}.brand-mark{height:27px;width:27px}.workspace-switcher{display:none}.topbar-actions{margin-left:auto}.topbar-actions .cl-button.primary{font-size:10px;padding:6px 9px}.gpu-badge{font-size:7px;padding:5px}.projectbar{height:38px}.projectbar .view-tools>.cl-button:not(.mobile-toggle){display:none}.statusbar{gap:9px;font-size:7px;padding:0 8px}.statusbar .status-extra{display:none}.graph-tabs{gap:14px}.node-count{display:none}.graph-header{padding:0 8px;gap:3px}.viewport-toolbar{gap:3px;padding:0 6px}.viewport-toolbar .cl-button{font-size:8px;padding:3px 4px}.viewport-toolbar select{font-size:8px;max-width:92px}.viewport-overlay{font-size:8px}.software-banner{font-size:7px;bottom:9px;max-width:90%;overflow:hidden;text-overflow:ellipsis}.viewport-overlay.bottom-left{bottom:34px}.viewport-overlay.bottom-right{bottom:30px}.frame-display{font-size:10px;min-width:44px}.transport{gap:2px}.transport-separator{margin:0 2px}.cl-timeline-ruler{margin-left:105px}.cl-track-label{width:105px}.cl-timeline-header .cl-muted{display:none}.export-grid{gap:12px}.package-list{grid-template-columns:1fr}.viewport-subtitle{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}