:root{--bg-dark:#060811;--panel-bg:#0f172ad9;--border-col:#94a3b829;--accent-primary:#6366f1;--accent-pink:#f43f5e;--accent-cyan:#00e5ff;--text-main:#f8fafc;--text-muted:#94a3b8}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-main);background:radial-gradient(circle at 50% 10%,#131b36 0%,#060811 75%);flex-direction:column;height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--border-col);z-index:10;background:#090d1af5;justify-content:space-between;align-items:center;height:62px;padding:0 24px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-logo{font-size:24px}.brand h1{letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#38bdf8,#818cf8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:18px;font-weight:800}.brand-tag{color:#a5b4fc;background:#6366f133;border:1px solid #6366f173;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:700}.top-actions{align-items:center;gap:10px;display:flex}.workspace{flex:1;grid-template-columns:370px 1fr 350px;gap:18px;height:calc(100vh - 62px);padding:16px 22px;display:grid;overflow:hidden}.panel{background:var(--panel-bg);border:1px solid var(--border-col);border-radius:16px;flex-direction:column;gap:16px;padding:16px;display:flex;overflow-y:auto;box-shadow:0 12px 32px #0006}.panel::-webkit-scrollbar{width:6px}.panel::-webkit-scrollbar-thumb{background:#94a3b840;border-radius:999px}.section-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);justify-content:space-between;align-items:center;margin-bottom:8px;font-size:12px;font-weight:800;display:flex}.stage-wrapper{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex;position:relative;overflow:hidden}.canvas-container{aspect-ratio:9/16;contain:paint layout;background:#060811;border:2px solid #94a3b840;border-radius:20px;height:100%;max-height:calc(100vh - 110px);position:relative;overflow:hidden;transform:translateZ(0);box-shadow:0 12px 32px #000000a6,0 0 20px #6366f12e}#simCanvas{cursor:crosshair;width:100%;height:100%;display:block;transform:translateZ(0)}.perf-badge{color:#38bdf8;font-variant-numeric:tabular-nums;background:#0f172ad9;border:1px solid #38bdf859;border-radius:999px;align-items:center;gap:6px;padding:5px 12px;font-size:11.5px;font-weight:700;display:flex;box-shadow:0 0 12px #38bdf826}.btn-gpu{color:#fff;background:linear-gradient(135deg,#0ea5e9,#0284c7);border-color:#38bdf8;font-weight:800}.btn-gpu.mode-2d{color:#94a3b8;background:#1e293be6;border-color:#94a3b866}.rec-badge{color:#fff;pointer-events:none;background:#f43f5eeb;border-radius:999px;align-items:center;gap:6px;padding:5px 12px;font-size:12px;font-weight:800;animation:1.2s infinite pulseRec;display:flex;position:absolute;top:14px;right:14px;box-shadow:0 0 16px #f43f5ecc}.rec-badge.hidden{display:none}@keyframes pulseRec{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.96)}}.stage-hint{color:var(--text-muted);margin-top:8px;font-size:12px}.btn{color:#fff;cursor:pointer;background:#1e293be6;border:1px solid #ffffff24;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:9px 15px;font-size:13px;font-weight:700;transition:all .15s;display:inline-flex}.btn:hover{background:#334155f2;transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,#6366f1,#4f46e5);border-color:#818cf8;box-shadow:0 4px 16px #6366f159}.btn-primary:hover{background:linear-gradient(135deg,#818cf8,#6366f1)}.btn-record{background:linear-gradient(135deg,#f43f5e,#e11d48);border-color:#fb7185;box-shadow:0 4px 16px #f43f5e59}.btn-record.recording{color:#e11d48;background:#fff;border-color:#fff}.variant-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.variant-card{cursor:pointer;background:#0f172ab3;border:1.5px solid #94a3b829;border-radius:10px;padding:9px 10px;transition:all .14s}.variant-card:hover{border-color:#ffffff59}.variant-card.active{border-color:var(--accent);box-shadow:0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);background:#1e293bf2}.v-header{align-items:center;gap:6px;margin-bottom:3px;display:flex}.v-emoji{font-size:17px}.v-name{color:#f8fafc;font-size:12.5px;font-weight:700}.v-role{color:var(--text-muted);font-size:10.5px}.preset-list{flex-direction:column;gap:6px;display:flex}.preset-btn{text-align:left;color:#e2e8f0;cursor:pointer;background:#1e293ba6;border:1px solid #94a3b82e;border-radius:9px;padding:9px 12px;font-size:12.5px;font-weight:600;transition:all .15s}.preset-btn:hover{background:#6366f138;border-color:#818cf8}.control-group{flex-direction:column;gap:6px;margin-bottom:10px;display:flex}.control-label{color:#cbd5e1;justify-content:space-between;font-size:12px;font-weight:600;display:flex}input[type=text],select{color:#fff;background:#090d1ad9;border:1px solid #94a3b840;border-radius:8px;width:100%;padding:8px 10px;font-size:12.5px;font-weight:600}input[type=range]{width:100%;accent-color:var(--accent-primary)}.toggle-row{color:#e2e8f0;justify-content:space-between;align-items:center;padding:6px 0;font-size:12.5px;font-weight:600;display:flex}.god-grid{grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}@media (width<=1150px){.workspace{grid-template-columns:310px 1fr 300px}}