:root{color-scheme:light dark;--bg: #0b1021;--panel: #0f172a;--accent: #7dd3fc;--text: #e2e8f0;--muted: #94a3b8;--border: #1f2937;--shadow: 0 20px 60px rgba(0, 0, 0, .4);--rounded: 18px;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 20%,#111827,#0b1021 40%),radial-gradient(circle at 80% 0%,rgba(125,211,252,.15),transparent 35%),#0b1021;color:var(--text);min-height:100vh}.app-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:16px}h1{margin:0;font-size:1.9rem;letter-spacing:.02em}.tagline{margin:4px 0 0;color:var(--muted)}.app-nav{display:flex;gap:12px;margin-bottom:16px}.nav-link{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#7dd3fc14;border:1px solid var(--border);border-radius:10px;color:var(--text);text-decoration:none;font-size:.9rem;transition:all .2s ease}.nav-link:hover{background:#7dd3fc26;border-color:var(--accent)}.nav-icon{font-size:1.1rem}.window-frame{position:relative;aspect-ratio:16 / 9;background:linear-gradient(120deg,#7dd3fc1a,#38bdf808),radial-gradient(circle at 30% 30%,rgba(125,211,252,.2),transparent 35%),#0f172a;border:1px solid var(--border);border-radius:var(--rounded);overflow:hidden;box-shadow:var(--shadow)}.window-frame canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}#pin-canvas{image-rendering:pixelated;background:radial-gradient(circle at 30% 30%,rgba(125,211,252,.08),transparent 35%),#0b1021}.overlay{pointer-events:none}.status-badge{position:absolute;left:12px;top:12px;background:#0f172acc;border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:.85rem;color:var(--muted)}.status-badge.warning{color:#fbbf24;border-color:#f8b40066}.status-group{text-align:right}.status{font-weight:600}.hint{margin-top:4px;color:var(--muted)}.mode-switch{display:flex;flex-direction:column;gap:6px}.mode-section{border-top:1px solid var(--border);padding-top:10px}.mode-section h3{margin:0 0 6px;color:var(--muted);font-size:.95rem}.controls h2{margin:0 0 8px}.rgb-hand-group{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}.rgb-hand-title{margin:0 0 10px;font-size:1rem;color:var(--text);background:linear-gradient(90deg,#ef4444,#22c55e,#3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hand-species-select select{width:100%;padding:6px 10px;background:#1e293b80;border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.9rem}.rgb-matrix-title{margin:16px 0 8px;font-size:.9rem;color:var(--muted);font-weight:600}.rgb-matrix-col-labels{display:grid;grid-template-columns:24px repeat(3,1fr);gap:4px;margin-bottom:4px;font-size:.75rem;text-align:center}.rgb-matrix-container{display:flex;flex-direction:column;gap:6px}.rgb-matrix-row{display:grid;grid-template-columns:24px repeat(3,1fr);gap:4px;align-items:center}.rgb-row-label{font-size:.9rem;text-align:center}.rgb-matrix-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;background:#1e293b4d;border-radius:6px}.rgb-cell-label{font-size:.65rem;font-weight:600;opacity:.8}.rgb-slider{width:100%;height:6px;cursor:pointer}.rgb-cell-value{font-size:.7rem;font-weight:600;font-family:monospace}.control-row{display:flex;flex-direction:column;gap:6px}.control-row label{display:flex;justify-content:space-between;font-size:.95rem;color:var(--muted)}.control-row input[type=range],.control-row select{width:100%}.matrix-grid{display:flex;flex-direction:column;gap:6px}.matrix-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}.matrix-cell input{width:100%;padding:6px;background:#1e293b73;border:1px solid var(--border);border-radius:8px;color:var(--text)}.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}n .toggle-inline{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--muted);cursor:pointer}.toggle-inline input[type='"checkbox"']{width:14px;height:14px;cursor:pointer}button{background:linear-gradient(135deg,#1e293b,#111827);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:600;transition:transform .1s ease,border-color .2s ease}button:hover{transform:translateY(-1px);border-color:var(--accent)}button.secondary{background:#1e293b80}button.toggle-btn{flex:1;padding:8px 12px;font-size:.85rem;transition:all .15s ease}button.toggle-btn.active{background:#7dd3fc33;border-color:var(--accent);color:var(--accent)}.debug-buttons{margin-top:12px}.button-group{display:flex;flex-wrap:wrap;gap:8px}.button-group button.active{border-color:var(--accent);box-shadow:0 0 0 1px #7dd3fc40}.toggle{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--muted)}.note{color:var(--muted);margin:0}.etch-dpad{display:flex;flex-direction:column;align-items:center;gap:4px;margin:12px 0}.dpad-row{display:flex;gap:4px}.dpad-btn{width:44px;height:44px;border-radius:8px;background:#1e293b99;border:1px solid var(--border);color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s,transform .05s;-webkit-user-select:none;user-select:none;touch-action:manipulation}.dpad-btn:hover{background:#1e293be6}.dpad-btn:active{background:var(--accent);color:var(--bg);transform:scale(.95)}.dpad-center{border-radius:50%;font-size:22px}.dpad-center.pen-down{background:#22c55e;color:#fff}.dpad-center.pen-up{background:#ef4444;color:#fff}.etch3d-help{position:absolute;top:12px;right:12px;background:#0f172ad9;border:1px solid var(--border);padding:10px 12px;border-radius:10px;font-size:.78rem;color:var(--text);max-width:240px;pointer-events:none;z-index:11;box-shadow:var(--shadow)}@media (max-width: 960px){.layout{grid-template-columns:1fr}.status-group{text-align:left}}@media (max-width: 640px){h1{font-size:1.4rem}}.collapsible{border:1px solid var(--border);border-radius:10px;margin-bottom:8px}.collapsible-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#1e293b66;color:var(--text);font-size:.9rem;font-weight:600;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.collapsible-header::-webkit-details-marker{display:none}.collapsible-header:after{content:"▶";font-size:.7rem;transition:transform .2s ease;color:var(--muted)}.collapsible[open] .collapsible-header:after{transform:rotate(90deg)}.collapsible-content{padding:12px;display:flex;flex-direction:column;gap:12px}.collapsible{overflow:visible}.video-controls{display:flex;align-items:center;gap:10px;padding:8px 0}.video-buttons{display:flex;align-items:center;gap:8px}.model-controls{padding:0;margin-top:8px}.model-controls .collapsible{margin:0}.model-controls .hint-text{color:var(--text-secondary);text-align:center}.icon-btn{width:36px;height:36px;border-radius:50%;background:#1e293b99;border:1px solid var(--border);color:var(--text);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,transform .1s}.icon-btn:hover{background:#1e293be6}.icon-btn:active{transform:scale(.95)}.facefx-overlay{position:absolute;right:50px;top:50px;width:180px;background:#0b1021d9;border:1px solid var(--border);border-radius:10px;padding:10px;font-size:.75rem;color:var(--text);z-index:15;display:none;pointer-events:none}.facefx-title{font-weight:600;margin-bottom:8px;color:var(--accent)}.facefx-bars{display:flex;flex-direction:column;gap:4px}.facefx-row{display:flex;align-items:center;gap:6px}.facefx-label{width:70px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.facefx-bar{flex:1;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.facefx-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .05s ease}.facefx-val{width:24px;text-align:right;color:var(--muted)}@media (pointer: coarse){.control-row input[type=range]{height:32px}.control-row select{height:40px;font-size:1rem}button{min-height:44px;font-size:.95rem}.icon-btn{width:44px;height:44px;font-size:18px}.dpad-btn{width:54px;height:54px;font-size:22px}.toggle-inline{font-size:.85rem}.toggle-inline input[type=checkbox]{width:18px;height:18px}.collapsible-header{padding:12px 14px;font-size:.95rem}}.hide-ui-btn{position:fixed;bottom:20px;right:20px;width:50px;height:50px;border-radius:50%;background:var(--panel);border:2px solid var(--accent);color:var(--accent);font-size:20px;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .2s,opacity .2s}.hide-ui-btn:hover{transform:scale(1.1)}.hide-ui-btn.hidden-mode{opacity:.3}.hide-ui-btn.hidden-mode:hover{opacity:1}body.ui-hidden .controls,body.ui-hidden .app-header,body.ui-hidden .app-nav,body.ui-hidden .viewer-bar,body.ui-hidden .status{opacity:0;pointer-events:none;transition:opacity .3s}body.ui-hidden .layout{grid-template-columns:1fr}body.ui-hidden .window-frame{position:fixed;top:0;left:0;width:100vw;height:100vh;aspect-ratio:unset;border-radius:0;border:none;z-index:100}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-track{background:#7dd3fc26;height:8px;border-radius:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);margin-top:-6px;transition:transform .1s}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}@media (pointer: coarse){input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-10px}input[type=range]::-webkit-slider-track{height:10px;border-radius:5px}}:root{--frame-nav-height: 108px}.frame-nav{position:sticky;top:0;width:100%;background:linear-gradient(135deg,#0f172af5,#0a0e1cf5);border-bottom:1px solid var(--border);z-index:1200;box-shadow:0 14px 40px #00000073;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.nav-shell{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;flex-wrap:nowrap}.nav-brand{display:flex;align-items:center;gap:8px;flex-shrink:0}.nav-logo{font-size:1.5rem;color:var(--accent);filter:drop-shadow(0 0 18px rgba(125,211,252,.35))}.nav-title{font-size:1rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.nav-subtitle{display:none}.nav-spacer{width:100px;flex-shrink:0}.mobile-nav-toggle{display:none!important}.uni-menu-bar{display:flex;align-items:center;gap:4px;flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none;padding:0 8px}.uni-menu-bar::-webkit-scrollbar{display:none}.uni-menu-item{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#ffffff08;border:1px solid transparent;border-radius:8px;color:var(--muted);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s ease;white-space:nowrap;text-decoration:none}.uni-menu-item:hover{background:#ffffff0f;color:var(--text);border-color:#ffffff1a}.uni-menu-item.active{background:#38bdf826;border-color:#7dd3fc66;color:var(--accent)}.uni-menu-item.expanded{background:#38bdf81a;border-color:#7dd3fc4d;color:var(--text)}.uni-menu-icon{font-size:1rem}.uni-menu-label{display:none}@media (min-width: 768px){.uni-menu-label{display:inline}}.nav-menu-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#ffffff0a;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:1.2rem;cursor:pointer;transition:all .15s ease;flex-shrink:0}.nav-menu-toggle:hover{background:#ffffff14;border-color:#7dd3fc66}.uni-menu-panel{display:none;padding:0;background:#0000004d;border-top:1px solid var(--border);overflow:hidden}.uni-menu-panel.open{display:block;padding:10px 16px}.uni-menu-apps{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}.uni-menu-apps::-webkit-scrollbar{display:none}.uni-menu-app{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;background:#ffffff0a;border:1px solid var(--border);border-radius:10px;color:var(--text);text-decoration:none;font-size:.8rem;min-width:80px;transition:all .15s ease}.uni-menu-app:hover{background:#ffffff14;border-color:#7dd3fc66;transform:translateY(-2px)}.uni-menu-app.active{background:#38bdf833;border-color:#7dd3fc99;box-shadow:0 0 16px #38bdf833}.uni-menu-app-icon{font-size:1.3rem}.uni-menu-app-label{font-size:.7rem;color:var(--muted);text-align:center}.uni-menu-app.active .uni-menu-app-label{color:var(--text)}.nav-deck{display:none;padding:16px;border-top:1px solid var(--border);background:linear-gradient(180deg,#0f172af2,#0b1021f2)}.frame-nav.deck-open .nav-deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.deck-category{display:flex;flex-direction:column;gap:8px}.deck-category-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:4px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}.deck-category-apps{display:flex;flex-wrap:wrap;gap:6px}.deck-app{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;background:#ffffff0a;border:1px solid var(--border);border-radius:8px;color:var(--text);text-decoration:none;font-size:.75rem;min-width:70px;cursor:pointer;transition:all .15s ease}.deck-app:hover{background:#ffffff14;border-color:#7dd3fc66}.deck-app.active{background:#38bdf826;border-color:#7dd3fc80}.deck-app-icon{font-size:1.1rem}.deck-app-label{font-size:.65rem;color:var(--muted);text-align:center}.deck-app:hover .deck-app-label,.deck-app.active .deck-app-label{color:var(--text)}.nav-menu-toggle{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#ffffff0a;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .15s ease;flex-shrink:0}.nav-menu-toggle:hover{background:#ffffff14;border-color:#7dd3fc66;color:var(--text)}.frame-nav.deck-open .nav-menu-toggle{background:#38bdf826;border-color:#7dd3fc80;color:var(--accent)}.toggle-label{display:none}@media (min-width: 640px){.toggle-label{display:inline}}.toggle-icon{font-size:.6rem}.deck-section{display:none}.deck-section-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}.deck-actions{display:flex;flex-wrap:wrap;gap:8px}.deck-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#ffffff0a;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.85rem;cursor:pointer;transition:all .15s ease}.deck-btn:hover{background:#ffffff14;border-color:#7dd3fc66}.deck-btn-icon{font-size:1rem}.deck-btn-label{color:var(--muted)}.deck-btn:hover .deck-btn-label{color:var(--text)}.nav-chip{padding:8px 12px;border-radius:999px;background:#7dd3fc1f;border:1px solid rgba(125,211,252,.35);color:var(--accent);font-weight:700;letter-spacing:.05em}.nav-btn{padding:8px 12px;border-radius:12px;border:1px solid var(--border);background:#ffffff0a;color:var(--text);cursor:pointer;transition:transform .1s,box-shadow .2s,border-color .2s}.nav-btn:hover{border-color:#7dd3fc80;box-shadow:0 10px 30px #00000040;transform:translateY(-1px)}.nav-btn.primary{background:linear-gradient(135deg,#7dd3fc47,#38bdf838);border-color:#7dd3fc73;color:#e0f2fe}.nav-btn.ghost{background:#ffffff08}.nav-deck{display:none;padding:12px 16px 16px;border-top:1px solid var(--border);background:linear-gradient(180deg,#0f172aeb,#0b1021eb);gap:14px}.frame-nav.deck-open .nav-deck{display:block}.deck-column{display:flex;flex-direction:column;gap:10px}.nav-grid-label{text-transform:uppercase;font-size:.78rem;letter-spacing:.08em;color:var(--muted);padding-left:2px}.nav-grid{display:grid;gap:10px;background:#ffffff05;border:1px solid var(--border);border-radius:16px;padding:12px}.nav-grid--channels{grid-template-columns:repeat(3,minmax(0,1fr))}.nav-grid--modes{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.nav-grid--remote{grid-template-columns:repeat(3,minmax(0,1fr))}.nav-tile{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;padding:12px 10px;border-radius:12px;border:1px solid var(--border);background:#ffffff08;color:var(--text);text-decoration:none;cursor:pointer;min-height:92px;transition:border-color .2s,box-shadow .2s,transform .08s,background .2s}.nav-tile:hover{border-color:#7dd3fc80;box-shadow:0 10px 26px #00000059;transform:translateY(-1px)}.nav-tile.active{border-color:#7dd3fccc;background:linear-gradient(135deg,#7dd3fc2e,#38bdf824);box-shadow:0 0 0 1px #7dd3fc66,0 14px 40px #00000059}.nav-tile__icon{font-size:1.6rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}.nav-tile__label{font-size:.85rem;text-align:center;color:var(--muted)}.nav-tile.active .nav-tile__label{color:var(--text)}.nav-accordion{display:flex;flex-direction:column;gap:0;width:100%}.nav-accordion__bar{display:flex;align-items:center;gap:4px;padding:0;overflow-x:auto;scrollbar-width:none}.nav-accordion__bar::-webkit-scrollbar{display:none}.nav-accordion__category{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#ffffff08;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;text-decoration:none}.nav-accordion__category:hover{background:#ffffff0f;border-color:#7dd3fc66}.nav-accordion__category.active{background:#38bdf826;border-color:#7dd3fc99;color:#7dd3fc}.nav-accordion__category.expanded{background:#38bdf81a;border-color:#7dd3fc80;border-bottom-left-radius:0;border-bottom-right-radius:0}.nav-accordion__icon{font-size:1.1rem}.nav-accordion__label{display:none}@media (min-width: 640px){.nav-accordion__label{display:inline}}.nav-accordion__arrow{font-size:.7rem;opacity:.6;margin-left:auto;transition:transform .2s}.nav-accordion__category.expanded .nav-accordion__arrow{transform:rotate(180deg)}.nav-accordion__panel{display:none;overflow:hidden;background:#00000040;border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;margin-top:-1px}.nav-accordion__panel.open{display:block}.nav-accordion__apps{display:flex;align-items:center;gap:8px;padding:12px;overflow-x:auto;scrollbar-width:none}.nav-accordion__apps::-webkit-scrollbar{display:none}.nav-accordion__app{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;background:#ffffff0a;border:1px solid var(--border);border-radius:10px;color:var(--text);text-decoration:none;font-size:.85rem;min-width:100px;transition:all .2s ease}.nav-accordion__app:hover{background:#ffffff14;border-color:#7dd3fc80;transform:translateY(-2px)}.nav-accordion__app.active{background:#38bdf833;border-color:#7dd3fcb3;box-shadow:0 0 20px #38bdf833}.nav-accordion__app-icon{font-size:1.4rem}.nav-accordion__app-label{font-size:.75rem;color:var(--muted);text-align:center}.nav-accordion__app.active .nav-accordion__app-label{color:var(--text)}@media (max-width: 900px){.nav-grid--channels,.nav-grid--remote{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 768px){.nav-actions{width:100%;justify-content:flex-start}.frame-nav.deck-open .nav-deck{grid-template-columns:1fr}.mobile-nav-toggle{display:flex}}.mobile-nav-toggle{display:none;position:fixed;top:14px;right:14px;z-index:1400;width:44px;height:44px;background:var(--panel);border:1px solid var(--border);border-radius:10px;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;box-shadow:0 12px 32px #00000059}body.has-nav .app-container{margin-left:0;height:calc(100vh - var(--frame-nav-height, 120px));min-height:calc(100vh - var(--frame-nav-height, 120px))}body.has-nav .audio-app,body.has-nav .stage-app,body.has-nav #app,body.has-nav .mask-app,body.has-nav .kiosk-app,body.has-nav .studio-app{padding-top:12px;min-height:calc(100vh - var(--frame-nav-height, 120px))}.frame-dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center}.dialog-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-content{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--rounded);padding:24px;max-width:400px;width:90%;box-shadow:0 20px 60px #00000080}.dialog-content h2{margin:0 0 16px;font-size:1.3rem}.dialog-content p{margin:0 0 12px;color:var(--muted);line-height:1.5}.dialog-content ul{margin:0 0 16px;padding-left:20px;color:var(--muted);line-height:1.8}.dialog-content li strong{color:var(--text)}.about-note{font-size:.85rem;padding:12px;background:#7dd3fc1a;border-radius:8px;margin-top:16px}.theme-options{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.theme-option{display:flex;align-items:center;gap:12px;padding:12px;background:#7dd3fc0d;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s}.theme-option:hover{background:#7dd3fc1a;border-color:var(--accent)}.theme-option input{accent-color:var(--accent)}.dialog-close{width:100%;padding:12px;background:var(--accent);color:var(--panel);border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:opacity .2s}.dialog-close:hover{opacity:.9}.particle-header{margin-bottom:12px}.particle-header h1{font-size:1.5rem;letter-spacing:.15em;font-weight:600}.collapsible-section{border-top:1px solid var(--border);margin-top:8px}.collapsible-section:first-child{border-top:none;margin-top:0}.section-header{display:flex;align-items:center;justify-content:space-between;padding:8px 0;cursor:pointer;-webkit-user-select:none;user-select:none}.section-header:hover{color:var(--accent)}.section-title{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0}.section-header:hover .section-title{color:var(--accent)}.section-toggle{font-size:.8rem;color:var(--muted);transition:transform .2s}.collapsible-section.collapsed .section-toggle{transform:rotate(-90deg)}.collapsible-section .section-content{display:flex;flex-direction:column;gap:8px;padding-bottom:8px;max-height:none;overflow:visible}.collapsible-section.collapsed .section-content{display:none;max-height:0;overflow:hidden}.controls.compact{padding:12px;gap:6px}.controls.compact .control-row{gap:4px}.controls.compact label{font-size:.8rem}.controls.compact input[type=range]{height:4px}.controls.compact .buttons{gap:6px}.controls.compact button{padding:6px 10px;font-size:.8rem}.window-frame.fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#000;width:100vw!important;height:100vh!important;aspect-ratio:unset;border-radius:0;border:none}.window-frame.fullscreen canvas{width:100%!important;height:100%!important}.controls.hidden{display:none}.toggle-controls-btn{position:fixed;top:10px;right:10px;z-index:1001;background:#0f172acc;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.85rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s}.toggle-controls-btn:hover{background:#7dd3fc26;border-color:var(--accent)}.toggle-controls-btn.hidden{display:none}.app-container{display:flex;flex-direction:row;height:100vh;overflow:hidden;margin:0;padding:0;max-width:none}.viewer{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:24px;min-width:0;overflow:hidden}.window-frame{position:relative;width:100%;max-width:min(1200px,calc(100vh - var(--frame-nav-height, 120px) - 48px) * 16 / 9);aspect-ratio:16 / 9;background:#0f172a;border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 20px 50px #00000073}.controls-panel{width:320px;min-width:320px;max-width:320px;background:linear-gradient(180deg,#0f172af2,#0b1021fa);border-left:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:20;position:relative}.controls-panel.closed{transform:translate(100%);position:absolute;right:0;height:100%}.panel-toggle-btn{position:absolute;top:24px;right:24px;z-index:30;width:44px;height:44px;border-radius:12px;background:#0f172a99;border:1px solid rgba(255,255,255,.1);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s ease}.panel-toggle-btn:hover{background:#7dd3fc26;border-color:var(--accent);transform:scale(1.05)}.panel-header{margin-bottom:10px}.panel-header h1{font-size:1.5rem;margin:0;background:linear-gradient(to right,#fff,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.gradient-preview{width:100%;height:12px;border-radius:6px;border:1px solid rgba(255,255,255,.08);margin-top:6px}.velocity-overlay{mix-blend-mode:screen;z-index:2}@media (max-width: 960px){.app-container{flex-direction:column;height:auto;min-height:100vh}.viewer{min-height:50vh;flex:none;padding:16px}.controls-panel{width:100%;min-width:100%;max-width:100%;max-height:50vh;border-left:none;border-top:1px solid rgba(255,255,255,.08)}.controls-panel.closed{max-height:0;transform:none;position:relative;padding:0;overflow:hidden}.panel-toggle-btn{top:auto;bottom:16px;right:16px}}