/* Shared site surfaces. Generated app iframes and uploaded images retain their own colors. */
.account-heading>div{min-width:0}
.account-logout{flex:none;margin-left:auto;padding:7px 9px;border:1px solid var(--st-border,#dedbe9);border-radius:7px;background:var(--st-raised,#f7f6fa);color:var(--st-ink,#353146);font:600 11px/1.4 system-ui;cursor:pointer}
.account-logout:hover{background:var(--st-accent-soft,#f0eaff);border-color:var(--st-accent-border,#cec1ed)}
.account-logout:disabled{opacity:.65;cursor:wait}
.account-session-status{font-size:11px;line-height:1.6;padding:8px;color:var(--st-danger,#b33850)}
body[data-site-appearance]{--accent:var(--st-accent-ink);--ink:var(--st-ink);--muted:var(--st-muted);--line:var(--st-border);--bg:var(--st-bg);background:var(--st-bg);color:var(--st-ink)}
body[data-site-appearance=dark]{color-scheme:dark;--shadow:0 4px 18px #0002;--lime:#293e30;--lavender:#302c45;--blue:#243747;--peach:#44312c;--mint:#243e35}
body[data-site-appearance] .account-appearance{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 10px;border-bottom:1px solid var(--st-border)}
.account-appearance>div:first-child{display:grid;gap:3px}
.account-appearance b{font-size:12px}.account-appearance small{font-size:10px;color:var(--st-muted)}
.account-appearance .studio-appearance-actions{display:flex;gap:5px}
.account-appearance .btn{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:8px;border-radius:7px;background:var(--st-raised);color:var(--st-ink);border:1px solid var(--st-border)}
.account-appearance .studio-appearance-open span{display:none}
body[data-site-appearance] .account-aux a{color:var(--st-accent-ink)}
body[data-site-appearance] header nav a.active{color:var(--st-accent-ink)}
body[data-site-appearance] header nav a.active:after{background:var(--st-accent-ink)}
body[data-site-appearance=dark] :is(.demo-label,.footer){background:var(--st-bg);color:var(--st-muted);border-color:var(--st-border)}
body[data-site-appearance=dark] .footer:before{color:var(--st-accent-ink)}
body[data-site-appearance=dark] .header-right .avatar{background:var(--st-accent-soft);color:var(--st-accent-ink)}
body[data-site-appearance=dark] #main:not(:has(#studio-editor,#studio-library)) :is(.panel,.side-card,.tool-card,.home-works,.discovery-strip,.workspace-actions,.stat-tile,.steps,.design-section,.request,.guide-card,.workspace-row,.search-box,.idea-input,.community-empty,dialog){background:var(--st-surface);border-color:var(--st-border);color:var(--st-ink);box-shadow:var(--shadow)}
body[data-site-appearance=dark] #main:not(:has(#studio-editor,#studio-library)) :is(.notice,.prompt,.profile-cover,.hero-note,.experiment-banner,.classroom-note-form,.note-reply,.community-mode,.experiment-steps>div,.idea-today,.remix-chain a,.screen-flow span,.sticky-note){background:var(--st-raised);border-color:var(--st-border);color:var(--st-ink)}
/* The original lab cards explicitly pin a light gradient. */
body[data-site-appearance=dark] #main :is(.lab-new,.lab-remix){background:var(--st-surface)!important}
body[data-site-appearance=dark] .studio-lab-entry{background:var(--st-accent-soft);border-color:var(--st-accent-border)}
body[data-site-appearance=dark] .side-card:has(#idea-summary){background:var(--st-surface)!important;border-color:var(--st-border)!important}
body[data-site-appearance=dark] #main:not(:has(#studio-editor,#studio-library)) :is(h1,h2,h3,.card-body h3,.story-card>p,.home-hero p,.pipeline b,.pipeline small,.hand-note,.discovery-label,.preview-window b){color:var(--st-ink)}
body[data-site-appearance=dark] #main:not(:has(#studio-editor,#studio-library)) :is(p,small,.meta,.small-label,.field,.byline,.breadcrumb,.use-meta,.preview-help,.publish-extra summary span,.publish-submit small,.note-input-row label,.note-byline time,.discovery-heading>span,.stat-tile small,.community-empty p){color:var(--st-muted)}
body[data-site-appearance=dark] #main:not(:has(#studio-editor,#studio-library)) :is(input:not([type=checkbox]):not([type=radio]),textarea,select){color:var(--st-ink);background:var(--st-raised);border-color:var(--st-border);color-scheme:dark}
body[data-site-appearance=dark] :is(input,textarea)::placeholder{color:var(--st-muted);opacity:.85}
body[data-site-appearance=dark] #main:not(:has(#studio-editor,#studio-library)) :is(.btn,.chip,.scene-chip,.check){color:var(--st-ink);background:var(--st-raised);border-color:var(--st-border);box-shadow:none}
body[data-site-appearance=dark] #main:not(:has(#studio-editor,#studio-library)) :is(.btn.primary,.chip.active,.scene-chip.selected){color:var(--st-on-accent);background:var(--st-accent);border-color:var(--st-accent);box-shadow:none}
body[data-site-appearance=dark] #main:not(:has(#studio-editor,#studio-library)) :is(.btn:not(.primary):hover,.chip:not(.active):hover,.check:has(input:checked),.scene-chip:not(.selected):hover){color:var(--st-accent-ink);background:var(--st-accent-soft);border-color:var(--st-accent-border)}
body[data-site-appearance=dark] #main:not(:has(#studio-editor,#studio-library)) :is(.btn.ghost,.eyebrow,.tabs .active,.auth-text-button,.auth-switch,.story-source,.note-reply-button,.publish-extra summary){color:var(--st-accent-ink)}
body[data-site-appearance=dark] :is(.classroom-note,.story-source,.card-bottom,.line-item,.publish-extra,.timeline,.auth-switch,.auth-verification-help,.auth-legacy,.lab-principles>div){border-color:var(--st-border)}
body[data-site-appearance=dark] :is(.tag,.count-pill,.compare-tag,.lab-icon,.experiment-symbol,.section-icon,.stat-icon,.avatar,.request .vote,.phase-icon){background:var(--st-accent-soft);color:var(--st-accent-ink)}
body[data-site-appearance=dark] .tag.orange{background:#453922;color:#f3d18b}
body[data-site-appearance=dark] .tag:not(.purple):not(.orange){background:var(--st-success-bg);color:var(--st-success)}
body[data-site-appearance=dark] .steps .step-marker{background:var(--st-raised);color:var(--st-muted)}
body[data-site-appearance=dark] .steps :is(.active,.complete) .step-marker{background:var(--st-accent-soft);color:var(--st-accent-ink);box-shadow:none}
body[data-site-appearance=dark] .pipeline a{background:var(--st-raised);border-color:var(--st-border)}
body[data-site-appearance=dark] :is(.preview,.community-art){background-color:var(--st-subtle);background-image:none}
body[data-site-appearance=dark] :is(.art-paper,.preview-window){background:var(--st-raised);border-color:var(--st-border)}
body[data-site-appearance=dark] :is(.art-paper small,.art-checks,.mini-label,.art-question){color:var(--st-muted)}
body[data-site-appearance=dark] .art-timer{color:var(--st-accent-ink)}
body[data-site-appearance=dark] :is(.art-groups span,.art-speech span,.mini-teams span,.preview .corner,.art-caption){background:var(--st-accent-soft);color:var(--st-accent-ink)}
body[data-site-appearance=dark] :is(#toast,.gai-panel,.gai-header,.gai-invite,.gai-composer,.gai-quick,.gai-bubble,.gai-links a){color:var(--st-ink);background:var(--st-surface);border-color:var(--st-border)}
body[data-site-appearance=dark] :is(.gai-quick button,.gai-message.user .gai-bubble,.gai-close,.gai-mode,.gai-composer input:not([type=checkbox])){background:var(--st-raised);color:var(--st-ink);border-color:var(--st-border)}
body[data-site-appearance=dark] :is(.gai-header small,.gai-invite p,.gai-mode-note,.gai-disclaimer){color:var(--st-muted)}
body[data-site-appearance=dark] :is(.gai-invite b,.page-art figcaption){color:var(--st-accent-ink)}
body[data-site-appearance=dark] :is(.gai-bubble p,.gai-context-label,.gai-author,.gai-footnote){color:var(--st-muted)}
body[data-site-appearance=dark] .gai-composer button{background:var(--st-accent);color:var(--st-on-accent)}
body[data-site-appearance=dark] :is(dialog:not(.studio-appearance-dialog),.admin-quota-confirm){background:var(--st-surface);color:var(--st-ink);border-color:var(--st-border)}
body[data-site-appearance=dark] .ai-usage{background:var(--st-raised);color:var(--st-ink);border-color:var(--st-border)}
body[data-site-appearance=dark] .ai-usage :is(small,details){color:var(--st-muted)}
body[data-site-appearance=dark] .ai-usage-heading>b{color:var(--st-ink)}
body[data-site-appearance=dark] .ai-usage button{color:var(--st-accent-ink)}
body[data-site-appearance=dark] :is(.admin-table th,.admin-table td,table th,table td){border-color:var(--st-border)}
body[data-site-appearance=dark] table th{background:var(--st-raised);color:var(--st-muted)}
body[data-site-appearance=dark] :is(a,button,input,textarea,select):focus-visible{outline-color:var(--st-accent-ink)}