:root { --creator-ink: #f6f7fb; --creator-muted: #aeb7c8; --creator-panel: rgba(13, 18, 31, .94); --creator-line: rgba(255,255,255,.12); --creator-accent: #77f2bf; }
.creator-global-bar { position: sticky; top: 0; z-index: 120; display: flex; align-items: center; gap: 1rem; padding: .8rem clamp(1rem,3vw,2rem); color: var(--creator-ink); background: rgba(7,10,18,.92); border-bottom: 1px solid var(--creator-line); backdrop-filter: blur(18px); }
.creator-brand { display: grid; margin-right: auto; line-height: 1.05; }.creator-brand span { color: var(--creator-muted); font-size: .75rem; }
.header,.toggle-controls { display:none; }
.creator-mode,.creator-visibility { display:flex; gap:.4rem; align-items:center; border:0; margin:0; padding:0; }.creator-mode label,.creator-visibility label { padding:.45rem .65rem; border:1px solid var(--creator-line); border-radius:999px; font-size:.8rem; cursor:pointer; }
.container { display:grid; grid-template-columns:minmax(18rem,24rem) minmax(0,1fr); align-items:start; gap:clamp(1rem,3vw,2.5rem); max-width:1500px; margin:0 auto; }
.creator-editor { position:sticky; top:5rem; z-index:50; max-height:calc(100vh - 6rem); overflow:auto; color:var(--creator-ink); background:var(--creator-panel); border:1px solid var(--creator-line); border-radius:18px; box-shadow:0 24px 70px #0007; }
.creator-tabs { position:sticky; top:0; z-index:2; display:flex; overflow-x:auto; background:#0b101c; border-bottom:1px solid var(--creator-line); }.creator-tabs button { flex:1; min-width:max-content; padding:.8rem .65rem; color:var(--creator-muted); background:none; border:0; border-bottom:2px solid transparent; }.creator-tabs button[aria-selected="true"] { color:var(--creator-ink); border-color:var(--creator-accent); }
.creator-panels { padding:1rem; }.creator-panel { display:grid; gap:.85rem; }.creator-field { display:grid; gap:.4rem; }.creator-field input,.creator-panel input { max-width:100%; }
html[data-creator-mode="pure"] [data-plus-only="true"] { display:none !important; }
body:not(.preview-mode):not(.finalized) #artifactRoot { width:min(100%,34rem); min-height:auto; aspect-ratio:9/16; margin:1rem auto; border-radius:22px; box-shadow:0 30px 90px #0009; }
body.preview-mode .creator-global-bar,body.preview-mode .creator-editor,body.finalized .creator-global-bar,body.finalized .creator-editor { display:none !important; }
.mode-controls { grid-column:2; }
body.preview-mode .mode-controls { position:fixed; right:1rem; bottom:1rem; z-index:200; }
body.preview-mode .container,body.finalized .container { display:block; max-width:none; padding:0; }.preview-mode #artifactRoot,.finalized #artifactRoot { width:100%; min-height:100vh; overflow:visible; border-radius:0; }
@media (max-width:900px){.creator-global-bar{flex-wrap:wrap}.container{grid-template-columns:1fr}.creator-editor{position:relative;top:0;max-height:none}.creator-visibility{width:100%;overflow-x:auto}}