:root{--studio-accent: #2ec4b6;--studio-accent-dim: rgba(46, 196, 182, .16);--studio-accent-glow: rgba(46, 196, 182, .35)}html[data-studio-accent=aurora]{--studio-accent: #7c6bff;--studio-accent-dim: rgba(124, 107, 255, .2);--studio-accent-glow: rgba(124, 107, 255, .45)}html[data-studio-accent=solar]{--studio-accent: #ffb547;--studio-accent-dim: rgba(255, 181, 71, .2);--studio-accent-glow: rgba(255, 181, 71, .42)}html[data-studio-accent=ice]{--studio-accent: #5ce1ff;--studio-accent-dim: rgba(92, 225, 255, .15);--studio-accent-glow: rgba(92, 225, 255, .38)}.studio-root{display:grid;grid-template-columns:280px minmax(0,1fr) 400px;grid-template-rows:auto minmax(0,1fr);gap:0;height:100vh}.studio-shell{position:relative;overflow:hidden;background:radial-gradient(1000px 520px at 18% 0%,var(--studio-accent-dim),transparent 55%),radial-gradient(700px 420px at 88% 12%,rgba(168,85,247,.08),transparent 45%),#090b10}.studio-topbar{grid-column:1 / span 3;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.07);background:#0a0c10e6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:5}.studio-topbar-left{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:6px}.studio-brand{display:flex;gap:12px;align-items:center;min-width:0}.studio-brand-mark{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--studio-accent-dim),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0}.studio-brand-dot{width:12px;height:12px;border-radius:50%;background:var(--studio-accent);box-shadow:0 0 16px var(--studio-accent-glow)}.studio-brand-text{min-width:0}.studio-badge{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#ffffff6b}.studio-title{font-weight:700;font-size:15px;letter-spacing:-.02em;color:#f3f6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studio-title-user{color:#fff}.studio-title-role{font-weight:500;color:#ffffff73;font-size:13px}.studio-topbar-hint{font-size:11px;color:#ffffff61;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.studio-kbd{font-family:ui-monospace,monospace;font-size:10px;padding:2px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.12);background:#00000059;color:#ffffffa6}.studio-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;word-break:break-all}.studio-status-pill{flex:1 1 200px;max-width:min(420px,100%);display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#00000040;font-size:12px;color:#ffffffbf;line-height:1.35;min-width:0}.studio-status-dot{width:8px;height:8px;border-radius:50%;background:#ffffff59;flex-shrink:0}.studio-status-pill--success .studio-status-dot{background:#34d399;box-shadow:0 0 10px #34d39980}.studio-status-pill--warning .studio-status-dot{background:#fbbf24}.studio-status-pill--error .studio-status-dot{background:#fb7185}.studio-status-text{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.studio-topbar-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-end;flex:1 1 220px}.studio-accent-row{display:flex;gap:6px;align-items:center;margin-right:4px}.studio-accent-swatch{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.12);cursor:pointer;padding:0;transition:transform .12s ease,box-shadow .15s ease}.studio-accent-swatch:hover{transform:scale(1.06)}.studio-accent-swatch--on{box-shadow:0 0 0 2px var(--studio-accent);border-color:#ffffff59}.studio-accent-swatch[data-accent=teal]{background:linear-gradient(135deg,#2ec4b6,#0891b2)}.studio-accent-swatch[data-accent=aurora]{background:linear-gradient(135deg,#7c6bff,#ec4899)}.studio-accent-swatch[data-accent=solar]{background:linear-gradient(135deg,#ffb547,#f97316)}.studio-accent-swatch[data-accent=ice]{background:linear-gradient(135deg,#5ce1ff,#3b82f6)}.studio-draft-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:#fbbf241f;border:1px solid rgba(251,191,36,.35);color:#fcd34d;white-space:nowrap}.studio-btn{border:1px solid rgba(255,255,255,.12);background:#ffffff0a;color:#f3f6ff;border-radius:10px;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600;transition:border-color .15s ease,background .15s ease,transform .12s ease}.studio-btn:hover{border-color:#ffffff38;background:#ffffff14}.studio-btn:active{transform:translateY(1px)}.studio-btn:focus-visible{outline:2px solid var(--studio-accent);outline-offset:2px}.studio-btn--primary{background:linear-gradient(180deg,#fff,#e7e9f1);color:#0a0c10;border-color:#fff3;font-weight:700}.studio-btn--primary:hover{background:#fff}.studio-btn--primary:disabled{opacity:.55;cursor:not-allowed;transform:none}.studio-btn--ghost{background:transparent}.studio-left,.studio-right{border-right:1px solid rgba(255,255,255,.06);border-left:1px solid rgba(255,255,255,.06);background:#0a0c1085;overflow:auto;padding:16px 14px 20px}.studio-left{grid-row:2}.studio-center{grid-row:2;display:flex;flex-direction:column;min-height:0;background:#05060a}.studio-right{grid-row:2}.studio-panel-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffffff6b;margin:4px 2px 10px}.studio-preview-chrome{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);background:#0003}.studio-preview-chrome-main{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;flex:1;min-width:0}.studio-help-trigger{flex-shrink:0;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#ffffff0f;color:#ffffffd9;font-size:16px;font-weight:700;cursor:pointer;line-height:1;transition:border-color .15s ease,background .15s ease,color .15s ease}.studio-help-trigger:hover{border-color:var(--studio-accent);background:var(--studio-accent-dim);color:#fff}.studio-viewport-group,.studio-zoom-group{display:flex;flex-wrap:wrap;gap:6px}.studio-vp-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#e8ecfc;font-size:12px;cursor:pointer;transition:border-color .15s ease,background .15s ease}.studio-vp-btn:hover{border-color:var(--studio-accent)}.studio-vp-btn--active{border-color:var(--studio-accent);background:var(--studio-accent-dim)}.studio-vp-ico{font-size:14px;line-height:1;opacity:.9}.studio-vp-lbl{font-weight:600}@media (max-width: 500px){.studio-vp-lbl{display:none}}.studio-zoom-btn{min-width:44px;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#00000040;color:#ffffffd9;font-size:11px;font-weight:600;cursor:pointer}.studio-zoom-btn--active{border-color:var(--studio-accent);background:var(--studio-accent-dim);color:#fff}.studio-iframe-stage{flex:1;min-height:0;overflow:auto;padding:14px;display:flex;justify-content:center;align-items:flex-start}.studio-iframe-viewport{width:100%;max-width:100%;transition:transform .18s ease,max-width .2s ease}.studio-iframe-viewport--desktop{width:100%}.studio-iframe-viewport--tablet{width:834px;max-width:100%}.studio-iframe-viewport--mobile{width:390px;max-width:100%}.studio-iframe-wrap{position:relative;width:100%;height:min(76vh,920px);min-height:400px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 80px #0000008c,0 0 0 1px #ffffff0a inset;background:#fff}.studio-iframe{width:100%;height:100%;border:0;background:#fff;touch-action:manipulation}.studio-structure-intro{font-size:12px;line-height:1.5;color:#ffffff73;margin:0 2px 12px}.studio-structure-search{width:100%;margin-bottom:12px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#00000040;color:#fff;font-size:13px;outline:none}.studio-structure-search::placeholder{color:#ffffff59}.studio-structure-search:focus{border-color:var(--studio-accent);box-shadow:0 0 0 3px var(--studio-accent-dim)}.studio-nav-list{list-style:none;margin:0;padding:0}.studio-nav-list li{margin-bottom:8px}.studio-structure-empty{font-size:12px;color:#fff6;padding:12px;text-align:center;list-style:none}.studio-nav-item{width:100%;text-align:left;border:1px solid rgba(255,255,255,.08);background:#ffffff08;color:#eef1f8;border-radius:12px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:border-color .15s ease,background .15s ease}.studio-nav-item:hover{border-color:#ffffff38;background:#ffffff0f}.studio-nav-item--active{border-color:var(--studio-accent);background:var(--studio-accent-dim);box-shadow:0 0 20px #0000004d}.studio-nav-item-label{font-weight:600;font-size:13px}.studio-nav-item-id{font-family:ui-monospace,monospace;font-size:10px;color:#ffffff59;word-break:break-all;max-width:100%}.studio-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.studio-inspector{padding-bottom:24px}.studio-empty--inspector{min-height:280px;align-content:center;padding:24px 16px}.studio-empty-icon{font-size:42px;opacity:.35;line-height:1}.studio-empty-title{font-weight:700;font-size:15px;color:#f0f4ff}.studio-empty-desc{font-size:13px;line-height:1.55;color:#ffffff73;max-width:320px}.studio-inspector-card{padding:14px 16px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(165deg,#ffffff0a,#00000040);margin-bottom:14px}.studio-inspector-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.studio-inspector-kind-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--studio-accent-dim);border:1px solid rgba(255,255,255,.08);font-size:16px}.studio-inspector-head-text{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.studio-inspector-kind{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--studio-accent)}.studio-inspector-dirty{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;background:#fbbf241f;border:1px solid rgba(251,191,36,.35);color:#fcd34d}.studio-field-mono{font-family:ui-monospace,monospace;font-size:11px;color:#ffffffbf;word-break:break-all;padding:8px 10px;border-radius:8px;background:#00000059;border:1px solid rgba(255,255,255,.06);margin-bottom:10px}.studio-inspector-preview{font-size:12px;line-height:1.45;color:#ffffff8c;padding:10px;border-radius:8px;background:#00000040;margin-bottom:10px;max-height:120px;overflow-y:auto}.studio-inspector-hint{font-size:12px;line-height:1.5;color:#fff6;margin:0 0 12px}.studio-inspector-toolbar{display:flex;gap:8px;margin-bottom:10px}.studio-mini-btn{font-size:11px;font-weight:600;padding:5px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:#ffffffd9;cursor:pointer}.studio-mini-btn:hover:not(:disabled){border-color:var(--studio-accent)}.studio-mini-btn:disabled{opacity:.4;cursor:not-allowed}.studio-inspector-label{font-size:11px;font-weight:600;color:#ffffff73;margin-bottom:6px}.studio-textarea{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0000004d;color:#f3f6ff;padding:10px 12px;font-size:13px;line-height:1.5;outline:none;min-height:140px;resize:vertical;font-family:inherit}.studio-textarea--compact{min-height:96px;font-family:ui-monospace,monospace;font-size:12px}.studio-textarea:focus{border-color:var(--studio-accent);box-shadow:0 0 0 3px var(--studio-accent-dim)}.studio-inspector-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px;color:#fff6}.studio-inspector-meta-warn{color:#fcd34d;font-weight:600}.studio-upload-card{padding:14px 16px;border-radius:14px;border:1px dashed rgba(255,255,255,.15);background:#0003}.studio-upload-hint{font-size:11px;color:#fff6;margin:0 0 10px;line-height:1.45}.studio-upload-zone{position:relative;display:block;padding:20px 16px;text-align:center;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#ffffff05;cursor:pointer;transition:border-color .15s ease,background .15s ease}.studio-upload-zone:hover{border-color:var(--studio-accent);background:var(--studio-accent-dim)}.studio-upload-zone input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.studio-upload-zone-text{font-size:12px;color:#ffffff8c;pointer-events:none}.studio-empty{display:grid;place-items:center;padding:40px 24px;text-align:center;gap:12px;color:#ffffff80}.studio-empty-brand{font-weight:800;font-size:22px;letter-spacing:-.03em;color:#fff}.studio-error-card{max-width:520px;line-height:1.65;padding:18px 20px;border-radius:14px;border:1px solid rgba(251,113,133,.35);background:#fb718514;color:#fecdd3;font-size:14px}.studio-skeleton-title{width:200px;height:22px;border-radius:8px;background:linear-gradient(90deg,#ffffff0f,#ffffff1f,#ffffff0f);background-size:200% 100%;animation:studio-shimmer 1.4s ease-in-out infinite}.studio-skeleton-line{width:min(360px,88vw);height:12px;border-radius:6px;margin-top:12px;background:linear-gradient(90deg,#ffffff0d,#ffffff17,#ffffff0d);background-size:200% 100%;animation:studio-shimmer 1.4s ease-in-out infinite}.studio-skeleton-line--short{width:220px}@keyframes studio-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.studio-loading-hint{margin-top:24px;font-size:13px;color:#ffffff73}@media (max-width: 1200px){.studio-root{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto}.studio-topbar{grid-column:1 / span 2}.studio-left{grid-column:1;grid-row:2;max-height:40vh}.studio-center{grid-column:2;grid-row:2;min-height:480px}.studio-right{grid-column:1 / span 2;grid-row:3;border-top:1px solid rgba(255,255,255,.06);max-height:50vh}}@media (max-width: 780px){.studio-root{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}.studio-topbar{grid-column:1}.studio-left{grid-column:1;grid-row:2;max-height:none}.studio-center{grid-column:1;grid-row:3;min-height:420px}.studio-right{grid-column:1;grid-row:4;max-height:none}}.studio-help-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10050;background:#0000008c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;animation:studio-fade-in .15s ease}.studio-help-panel{width:min(440px,100%);max-height:min(80vh,560px);overflow-y:auto;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(165deg,#161820fa,#080a0efc);box-shadow:0 24px 80px #000000a6;padding:18px 20px 20px}.studio-help-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.studio-help-head h2{margin:0;font-size:16px;font-weight:700;color:#fff;letter-spacing:-.02em}.studio-help-close{width:36px;height:36px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#ffffff0f;color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .15s ease}.studio-help-close:hover{background:#ffffff1a}.studio-help-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}.studio-help-list li{font-size:13px;line-height:1.5;color:#ffffffc7;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}.studio-help-kbds{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.studio-help-plus{opacity:.45;font-size:11px;-webkit-user-select:none;user-select:none}.studio-help-desc{flex:1;min-width:140px}.studio-help-note{color:#ffffff7a;font-size:12px;line-height:1.5}@keyframes studio-fade-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.studio-skeleton-title,.studio-skeleton-line,.studio-help-backdrop{animation:none}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;background:#0a0c10;color:#eef1f8;font-family:ui-sans-serif,system-ui,Segoe UI,Inter,sans-serif;-webkit-font-smoothing:antialiased}#root{height:100%}button{font:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:8px}