/* Desktop-in-a-mockup styles for the homepage (index.html). The OS windows are the REAL @sheru/webui SPA, themed by the OFFICIAL @sheru/ui engine (/embed/main.js). The engine stamps and rewrites the official token block on :root, re-skinning every window. The page places a fixed-resolution desktop canvas ([data-desktop]) inside a hardware mockup's screen; the compositor scales it to fit. Page-level marketing styles live in the page and use hp-prefixed custom properties only, so the cycling theme never restyles the page around the device. */ :root { /* Constant content typography. */ --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-copy: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* Constant identity — never themed. */ --tape-fill: rgba(255, 221, 0, 0.07); --tape-edge: rgba(255, 221, 0, 0.13); --tape-ink: rgba(255, 236, 130, 0.16); /* Pre-JS fallback (Windows 98) for the official tokens the slogan window reads. The @sheru/ui engine overwrites these on :root once /embed/main.js boots; they only prevent a flash before it loads. */ --window-bg: #c0c0c0; --window-border: none; --window-radius: 0px; --surface: #c0c0c0; --fg: #000000; --fg-muted: #404040; --border: #808080; --titlebar-bg: linear-gradient(90deg, #000080, #1084d0); --titlebar-fg: #ffffff; --titlebar-h: 22px; --font-ui: Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif; --font-size: 12px; --control-bg: #c0c0c0; --control-fg: #000000; --control-border: #808080; --control-radius: 0px; --control-bg-hover: #c0c0c0; --control-bg-active: #c0c0c0; } /* Desktop wallpaper per OS (keyed on the official data-theme the engine sets on ). */ [data-theme="win98"] { --hp-desktop-bg: #008080; } [data-theme="aqua"] { --hp-desktop-bg: radial-gradient(140% 110% at 50% 0%, #6c9ef0 0%, #2f6fde 45%, #14356f 100%); } [data-theme="winxp"] { --hp-desktop-bg: linear-gradient(180deg, #4a93d9 0%, #6fb1e3 38%, #8ec63f 46%, #5b9b34 70%, #4a8a2c 100%); } [data-theme="win7"] { --hp-desktop-bg: radial-gradient(120% 90% at 50% 110%, #2f7fd6 0%, #103e76 45%, #06203f 100%); } [data-theme="xfce"] { --hp-desktop-bg: linear-gradient(180deg, #41576b, #25323f); } /* ── Scrollable pages ── The embedded SPA injects its app-shell base stylesheet into the document (#sheru-base, appended after the page's own