@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

/* Display case surfaces only. Engine canvases and their rendered pixels stay untouched. */
:root { --museum-paper:#e8d9ba; --museum-panel:#f2e6cc; --museum-ink:#29251f; --museum-muted:#675944; --museum-line:#9b815a; --museum-accent:#713e35; }
[data-theme="dark"] { color-scheme:dark; --museum-paper:#171b1c; --museum-panel:#252b2a; --museum-ink:#f1e4c9; --museum-muted:#c6b99e; --museum-line:#8d7958; --museum-accent:#d49b89; }
.theme-toggle { z-index:45; flex:none; padding:8px 12px; border:1px solid var(--museum-line); border-radius:0; background:var(--museum-panel); color:var(--museum-ink); font:700 12px 'Barlow Condensed',sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.theme-toggle:hover { border-color:var(--museum-accent); color:var(--museum-accent); }
.theme-toggle:focus-visible { outline:2px solid var(--museum-accent); outline-offset:3px; }
.demo-header { background:var(--museum-paper) !important; border-bottom:1px solid var(--museum-line) !important; backdrop-filter:none !important; }
.demo-header .brand img { height:62px !important; width:auto; padding:3px 9px; background:#20282a; border:1px solid var(--museum-line); filter:none !important; }
.demo-header .app-title h1,.demo-header .app-title .kicker { color:var(--museum-ink); }
.demo-header .app-title h1 { font:600 28px/.95 'Cormorant Garamond',Georgia,serif; }
.demo-header .app-title .kicker { color:var(--museum-accent); font:700 11px 'Barlow Condensed',sans-serif; letter-spacing:.16em; }
.demo-header .back-btn { border-color:var(--museum-line); border-radius:0; background:var(--museum-panel); color:var(--museum-ink); font:700 12px 'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.1em; }
.demo-header .back-btn:hover { color:var(--museum-accent); }
.demo-header .engine-logo img { filter:none; }
body:has(.demo-header) { --green:#9c7434; --green-soft:#795927; --blue:#713e35; --blue-deep:#5b3028; --bg:#e8d9ba; --bg-2:#d8c29d; --surface:#f2e6cc; --surface-2:#f8ecd3; --text:#29251f; --muted:#5e5141; --faint:#77674f; --line:#9b815a80; --grad:linear-gradient(110deg,#8c662f,#713e35); --font-sans:'Barlow Condensed','Arial Narrow',sans-serif; --font-display:'Cormorant Garamond',Georgia,serif; --radius:0; --radius-sm:0; background:var(--museum-paper); }
[data-theme="dark"] body:has(.demo-header) { --green:#b99a61; --green-soft:#d5b477; --blue:#d49b89; --blue-deep:#bb7969; --bg:#171b1c; --bg-2:#222827; --surface:#252b2a; --surface-2:#303632; --text:#f1e4c9; --muted:#c6b99e; --faint:#a89b83; --line:#a58d6780; --grad:linear-gradient(110deg,#b99a61,#a86d61); }
body:has(.demo-header) .toolbar,body:has(.demo-header) .card,body:has(.demo-header) .prompt-box,body:has(.demo-header) .doc-list li,body:has(.demo-header) .drawer { background:var(--surface); border-color:var(--museum-line); border-radius:0; backdrop-filter:none; }
body:has(.demo-header) .frame { border:7px solid #2b2924; outline:1px solid var(--museum-line); outline-offset:-10px; border-radius:0; box-shadow:0 12px 30px #0003; }
body:has(.demo-header) .tb-btn,body:has(.demo-header) .toolbar select { border-color:var(--museum-line); border-radius:0; }
body:has(.demo-header) .grad-text { background:none; color:var(--museum-accent); -webkit-text-fill-color:currentColor; }
body:has(.demo-header) .card .step { border-radius:0; color:var(--museum-ink); }
body:has(.demo-header) #loading { background:var(--museum-paper); }
body:has(.demo-header) .toolbar,body:has(.demo-header) .card { box-shadow:none; }

/* The hair lab has its own compact control layout. */
body:has(.app .controls) { --bg:var(--museum-paper); --panel:var(--museum-panel); --edge:var(--museum-line); --ink:var(--museum-ink); --dim:var(--museum-muted); --accent:var(--museum-accent); --accent-dim:#9c743428; font-family:'Barlow Condensed','Arial Narrow',sans-serif; }
body:has(.app .controls) > header h1 { font:600 42px/.95 'Cormorant Garamond',Georgia,serif; letter-spacing:.015em; }
body:has(.app .controls) > header h1 b { color:var(--museum-accent); }
body:has(.app .controls) .controls,body:has(.app .controls) .stage { border-radius:0; border-color:var(--museum-line); }
body:has(.app .controls) .controls { box-shadow:inset 0 0 0 5px var(--museum-panel),inset 0 0 0 6px var(--museum-line); }

/* Spectral exhibition shell retains its own carefully composed layout. */
[data-theme="dark"] body:has(.sitehead) { --paper:#171b1c; --paper-light:#303632; --paper-dark:#222827; --ink:#f1e4c9; --faded:#c6b99e; --brass:#b99a61; --brass-light:#d5b477; --oxblood:#d49b89; --line:#a58d67; background:radial-gradient(circle at 50% 0,#303735 0,#171b1c 75%); }
[data-theme="dark"] .intro p { color:#c6b99e; }
[data-theme="dark"] .panel { background:linear-gradient(135deg,#303631,#242a29); border-color:#79694e; box-shadow:inset 0 0 0 5px #252b29,inset 0 0 0 6px #6a5c44,0 9px 24px #080b0a50; }
[data-theme="dark"] .exhibits button.active,[data-theme="dark"] .exhibits button:hover { background:#b69a6d22; }
[data-theme="dark"] #exhibitCopy { color:var(--faded); }
.sitehead > .theme-toggle { margin-left:0; }

/* Full-screen ZX exhibit: keep the simulation full bleed, theme its information card. */
body:has(#se-about) .theme-toggle { position:fixed; top:10px; left:10px; }
body:has(#se-about) #se-about { color:var(--museum-ink); }
body:has(#se-about) #se-about summary,body:has(#se-about) #se-about .se-body { background:var(--museum-panel); border:1px solid var(--museum-line); border-radius:0; color:var(--museum-ink); opacity:1; }