*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--sidebar-width:320px;--bg-deep:#0c0b0e;--bg-panel:#13111a;--bg-panel-end:#0e0d12;--text-primary:#ede8df;--text-secondary:#8a8490;--text-muted:#5c5862;--accent:#c9a55a;--accent-hover:#ddb96c;--accent-dim:#c9a55a1a;--border:#c9a55a14;--border-strong:#c9a55a2e;--input-bg:#0000004d;--input-border:#c9a55a1f;--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:14px;--font-display:"Cormorant Garamond", Georgia, serif;--font-body:"DM Sans", system-ui, sans-serif;--font-mono:"JetBrains Mono", Consolas, monospace;--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--ease-smooth:cubic-bezier(.4, 0, .2, 1)}html,body{width:100%;height:100%;font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);overflow:hidden}#app{width:100%;height:100%;position:relative}#viewport{top:0;left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));height:100%;display:block;position:absolute}#sidebar{width:var(--sidebar-width);background:linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-end) 100%);border-right:1px solid var(--border);z-index:10;height:100%;position:absolute;top:0;left:0;overflow:hidden auto}#sidebar:before{content:"";background:linear-gradient(90deg, transparent, var(--accent), transparent);z-index:1;height:1px;position:absolute;top:0;left:0;right:0}#sidebar::-webkit-scrollbar{width:4px}#sidebar::-webkit-scrollbar-track{background:0 0}#sidebar::-webkit-scrollbar-thumb{background:#c9a55a26;border-radius:2px}#sidebar::-webkit-scrollbar-thumb:hover{background:#c9a55a4d}#toolbar{bottom:16px;left:calc(50% + var(--sidebar-width) / 2);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-strong);border-radius:var(--radius-xl);z-index:10;opacity:0;width:auto;height:auto;transition:opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);background:#0e0d12cc;align-items:center;gap:16px;padding:8px 20px;transition-delay:.4s;display:flex;position:absolute;transform:translate(-50%)translateY(10px)}#app.loaded #toolbar{opacity:1;transform:translate(-50%)translateY(0)}.toolbar-btn{border:1px solid var(--border-strong);color:var(--text-primary);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-body);letter-spacing:.3px;transition:all .2s var(--ease-smooth);background:0 0;padding:6px 16px;font-size:11px;font-weight:500}.toolbar-btn:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);box-shadow:0 0 16px #c9a55a1f}.toolbar-separator{background:var(--border-strong);width:1px;height:16px}.toolbar-mode-label{font-family:var(--font-body);color:var(--text-muted);letter-spacing:.3px;font-size:11px}.sidebar-brand{text-align:center;border-bottom:1px solid var(--border);opacity:0;transition:opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);padding:28px 20px 24px;transition-delay:.1s;transform:translateY(8px)}#app.loaded .sidebar-brand{opacity:1;transform:translateY(0)}.brand-name{font-family:var(--font-display);letter-spacing:12px;color:var(--accent);text-indent:12px;font-size:28px;font-weight:300;line-height:1}.brand-sub{font-family:var(--font-body);letter-spacing:5px;text-transform:uppercase;color:var(--text-secondary);text-indent:5px;margin-top:6px;font-size:9px;font-weight:500}.panel-section{border-bottom:1px solid var(--border);opacity:0;transition:opacity .4s var(--ease-out-expo), transform .4s var(--ease-out-expo);transform:translateY(8px)}.panel-section:last-child{border-bottom:none}#app.loaded .panel-section{opacity:1;transform:translateY(0)}#app.loaded .panel-section:nth-child(2){transition-delay:.15s}#app.loaded .panel-section:nth-child(3){transition-delay:.2s}#app.loaded .panel-section:nth-child(4){transition-delay:.25s}#app.loaded .panel-section:nth-child(5){transition-delay:.3s}#app.loaded .panel-section:nth-child(6){transition-delay:.35s}.panel-header{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-display);text-transform:uppercase;letter-spacing:2.5px;color:var(--text-secondary);justify-content:space-between;align-items:center;padding:14px 20px;font-size:14px;font-weight:500;transition:color .2s,background .2s;display:flex;position:relative}.panel-header:hover{color:var(--text-primary);background:#c9a55a08}.panel-header:after{content:"";background:var(--accent);opacity:0;width:2px;transition:opacity .2s;position:absolute;top:20%;bottom:20%;left:0}.panel-header:hover:after{opacity:1}.panel-header .chevron{color:var(--text-muted);transition:transform .4s var(--ease-out-expo);font-size:8px}.panel-header.collapsed .chevron{transform:rotate(-90deg)}.panel-content-wrapper{transition:grid-template-rows .4s var(--ease-out-expo);grid-template-rows:1fr;display:grid}.panel-content-wrapper.collapsed{grid-template-rows:0fr}.panel-content{flex-direction:column;gap:8px;min-height:0;padding:4px 20px 16px;display:flex;overflow:hidden}.sub-label{font-family:var(--font-body);text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-size:10px;font-weight:600}.hint-text{font-family:var(--font-body);color:var(--text-muted);font-size:11px;font-style:italic;line-height:1.5}.cam-controls{flex-direction:column;gap:8px;display:flex}.btn{border:1px solid var(--border-strong);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-body);letter-spacing:.3px;transition:all .2s var(--ease-smooth);white-space:nowrap;background:0 0;padding:7px 14px;font-size:11px;font-weight:500}.btn:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.btn.active{background:var(--accent);border-color:var(--accent);color:var(--bg-deep)}.btn-block{text-align:center;width:100%}.btn-primary{background:linear-gradient(135deg, var(--accent), #b8943e);border-color:var(--accent);color:var(--bg-deep);letter-spacing:1px;text-transform:uppercase;font-size:11px;font-weight:600}.btn-primary:hover{background:linear-gradient(135deg, var(--accent-hover), var(--accent));border-color:var(--accent-hover);color:var(--bg-deep);transform:translateY(-1px);box-shadow:0 4px 20px #c9a55a40}.btn-primary.active{background:linear-gradient(135deg, var(--accent-hover), var(--accent));color:var(--bg-deep)}.btn-group{border-radius:var(--radius-md);border:1px solid var(--border-strong);display:flex;overflow:hidden}.btn-group .btn{border:none;border-right:1px solid var(--border);color:var(--text-secondary);background:0 0;border-radius:0;flex:1;padding:7px 8px;font-size:11px}.btn-group .btn:last-child{border-right:none}.btn-group .btn:hover{background:var(--accent-dim);color:var(--text-primary)}.btn-group .btn.active{background:var(--accent);color:var(--bg-deep)}.btn-row{flex-wrap:wrap;gap:6px;display:flex}.input-row{align-items:center;gap:8px;display:flex}.input-row label{font-family:var(--font-body);color:var(--text-secondary);white-space:nowrap;font-size:11px;font-weight:600}.input-row label.x,.input-row label.y,.input-row label.z{text-align:center;width:16px}.input-row label.x{color:#e07565}.input-row label.y{color:#65c892}.input-row label.z{color:#659ec8}.input-row input[type=number]{background:var(--input-bg);border:1px solid var(--input-border);color:var(--text-primary);border-radius:var(--radius-sm);font-family:var(--font-mono);flex:1;width:0;padding:5px 8px;font-size:12px;transition:border-color .2s,box-shadow .2s}.input-row input[type=number]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px #c9a55a1a}input[type=color]{border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;background:0 0;width:36px;height:28px;padding:2px;transition:border-color .2s}input[type=color]:hover{border-color:var(--accent)}.checkbox-row{font-family:var(--font-body);color:var(--text-secondary);align-items:center;gap:8px;font-size:12px;display:flex}.checkbox-row input[type=checkbox]{accent-color:var(--accent)}select{background:var(--input-bg);border:1px solid var(--input-border);color:var(--text-primary);border-radius:var(--radius-sm);font-family:var(--font-body);cursor:pointer;padding:5px 8px;font-size:12px;transition:border-color .2s,box-shadow .2s}select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px #c9a55a1a}.pose-list{max-height:180px;overflow-y:auto}.pose-list::-webkit-scrollbar{width:3px}.pose-list::-webkit-scrollbar-track{background:0 0}.pose-list::-webkit-scrollbar-thumb{background:#c9a55a26;border-radius:2px}.pose-item{font-family:var(--font-body);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);justify-content:space-between;align-items:center;padding:6px 8px;font-size:12px;transition:background .15s,color .15s;display:flex}.pose-item:hover{background:var(--accent-dim);color:var(--text-primary)}.pose-item .pose-delete{color:var(--text-muted);cursor:pointer;font-size:14px;line-height:1;transition:color .15s}.pose-item .pose-delete:hover{color:#c0392b}#loading-overlay{background:var(--bg-deep);z-index:100;transition:opacity .6s var(--ease-out-expo);flex-direction:column;justify-content:center;align-items:center;gap:32px;display:flex;position:absolute;inset:0}#loading-overlay.hidden{opacity:0;pointer-events:none}.loading-brand{text-align:center}.loading-brand-name{font-family:var(--font-display);letter-spacing:20px;color:var(--accent);text-indent:20px;font-size:64px;font-weight:300;line-height:1;animation:2.5s ease-in-out infinite breathe}.loading-brand-sub{font-family:var(--font-body);letter-spacing:8px;text-transform:uppercase;color:var(--text-secondary);text-indent:8px;margin-top:8px;font-size:11px;font-weight:400}.spinner{border-radius:50%;width:32px;height:32px;position:relative}.spinner:before,.spinner:after{content:"";border:1px solid #0000;border-radius:50%;position:absolute;inset:0}.spinner:before{border-top-color:var(--accent);animation:1.2s linear infinite spin}.spinner:after{border-bottom-color:#c9a55a40;animation:2s linear infinite reverse spin}#loading-overlay p{font-family:var(--font-body);color:var(--text-muted);letter-spacing:1px;font-size:11px}#loading-overlay p.error{color:#c0392b}@keyframes spin{to{transform:rotate(360deg)}}@keyframes breathe{0%,to{opacity:1}50%{opacity:.6}}#onboarding-overlay{-webkit-backdrop-filter:blur(12px);z-index:90;opacity:0;transition:opacity .4s var(--ease-out-expo);background:#0c0b0ed1;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#onboarding-overlay.visible{opacity:1}.onboarding-card{border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:linear-gradient(#16141e 0%,#0f0e14 100%);width:440px;max-width:90vw;padding:36px 32px 28px;position:relative;box-shadow:0 24px 80px #0009}.onboarding-card:before{content:"";background:linear-gradient(90deg, transparent, var(--accent), transparent);border-radius:1px;height:1px;position:absolute;top:0;left:15%;right:15%}.onboarding-skip{color:var(--text-muted);font-family:var(--font-body);letter-spacing:.5px;cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:11px;transition:color .2s;position:absolute;top:16px;right:16px}.onboarding-skip:hover{color:var(--text-primary)}.onboarding-steps{display:grid}.onboarding-step{opacity:0;transition:opacity .4s var(--ease-out-expo), transform .4s var(--ease-out-expo);pointer-events:none;grid-area:1/1;transform:translateY(10px)}.onboarding-step.active{opacity:1;pointer-events:auto;transform:translateY(0)}.onboarding-num{font-family:var(--font-display);color:var(--accent);opacity:.25;letter-spacing:4px;margin-bottom:12px;font-size:48px;font-weight:300;line-height:1}.onboarding-title{font-family:var(--font-display);color:var(--text-primary);letter-spacing:.5px;margin-bottom:14px;font-size:22px;font-weight:400;line-height:1.35}.onboarding-body{font-family:var(--font-body);color:var(--text-secondary);font-size:13px;line-height:1.75}.onboarding-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;margin-top:28px;padding-top:20px;display:flex}.onboarding-dots{gap:8px;display:flex}.onboarding-dot{background:var(--border-strong);width:6px;height:6px;transition:background .3s var(--ease-out-expo), transform .3s var(--ease-out-expo);border-radius:50%}.onboarding-dot.active{background:var(--accent);transform:scale(1.4)}.onboarding-next{padding:8px 28px}