/* ============================================================
   Starplane — Windows 98 default theme
   Pixel-ramps, not soft shadows. 1996 vintage.
   ============================================================ */

/* ── Theme custom properties are RUNTIME-INJECTED (Layer 1.5) ──────────────────
   The `--w98-*` palette + the generalized `--theme-*` tokens are NO LONGER
   hardcoded here. `src/theme-apply.ts` lowers the ACTIVE `@staros/theme`
   Theme to those vars at boot via `<style id="theme-vars">{ :root { … } }` (and
   on every `setActiveTheme(id)` switch). The win98 Theme's emit round-trips
   these exact values (proven in theme-apply.domtest.ts + @staros/theme
   emit.test.ts), so booting on win98 is pixel-identical to the old static block.

   :root keeps only the non-theme platform defaults below (font + a fallback
   color-scheme). `theme-apply` also drives `color-scheme` on documentElement,
   so the `color-scheme` here is just the no-JS fallback. */
:root {
	color-scheme: light;
	/* DESIGN-LOCK W-D0: the DEFAULT OS identity uses a real VECTOR font (crisp at
	   any DPR), NOT the win98 bitmap. The pixel font ("Pixelated MS Sans Serif")
	   is a BITMAP — antialiased on a smooth theme it blurs (the operator-reported
	   blurry text). It is now scoped to the retro pixel themes only (below). The
	   editorial canon supplies Space Grotesk via --star-font-ui; the terminal
	   fallback is a crisp system vector stack so text is sharp even pre-font-load. */
	font-family: var(--star-font-ui, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	font-size: 11px;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	color: var(--w98-text);
	font-family: inherit;
	font-size: 11px;
	cursor: default;
}

/* ── Text/image rendering is THEME-CONDITIONAL (was wrongly global before) ──────
   DEFAULT = smooth. The signature glass-and-ember console (star-os/starpunk) +
   the other smooth eras (macos26, win11, midnight, nextstep) render UI text
   antialiased so it "holds its AA contrast … functional beauty" (star-os.ts:45),
   instead of inheriting the win98 bitmap aliasing that used to leak from the
   unconditional `html, body` rule. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: auto;
	image-rendering: auto;
}

/* Pixel eras ONLY keep the 1996 crisp-aliased bitmap look: no glyph smoothing +
   nearest-neighbour image scaling. Keyed by the pixel-era theme ids plus the
   apple-ii scanline backdrop (apple-ii boots `data-theme="apple2"` AND
   `data-chrome-backdrop="scanline"`). The smooth themes match none of these. */
:root[data-theme="win98"] body,
:root[data-theme="winxp"] body,
:root[data-theme="apple2"] body,
:root[data-chrome-backdrop="scanline"] body {
	/* Retro pixel eras keep the 1996 bitmap font — crisp ONLY here, where smoothing
	   is off and image-rendering is nearest-neighbour. This is the ONLY place the
	   pixel font is the default face (W-D0: pulled out of the global :root). */
	font-family: "Pixelated MS Sans Serif", "MS Sans Serif", "Microsoft Sans Serif", "Tahoma", "Geneva", sans-serif;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: grayscale;
	image-rendering: pixelated;
}

button,
a {
	font: inherit;
}

/* ============================================================
   Teal desktop
   ============================================================ */
.w98-desktop {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	--starbox-wallpaper-base: var(--theme-wallpaper, var(--star-bg, var(--w98-teal, #008080)));
	--starbox-wallpaper-layer-filter: saturate(0.96) contrast(1.02);
	--starbox-wallpaper-layer-blend: soft-light;
	--starbox-wallpaper-veil-opacity: 1;
	--starbox-wallpaper-veil:
		radial-gradient(115% 92% at 50% 30%,
			transparent 34%,
			color-mix(in srgb, var(--star-bg, #0a0806) 22%, transparent) 74%,
			color-mix(in srgb, var(--star-bg, #0a0806) 48%, transparent) 100%),
		linear-gradient(180deg,
			color-mix(in srgb, var(--star-surface, #ffffff) 14%, transparent) 0%,
			transparent 18%,
			transparent 76%,
			color-mix(in srgb, var(--star-bg, #0a0806) 30%, transparent) 100%),
		radial-gradient(80% 54% at 50% 94%,
			color-mix(in srgb, var(--star-accent, #f5641e) 12%, transparent) 0%,
			transparent 62%);
	/* Token-aware desktop FLOOR: the per-theme wallpaper over `--star-bg`, lifted
	   from a flat fill by a soft accent vignette from the top — warm orange under
	   star-os, phosphor green under apple-ii, system blue under win11, navy under
	   win98. Depth without a wallpaper-engine dependency. (Wiring the generative
	   @mogos/starstyle/wallpaper engine needs a dep authorization — see report.) */
	background:
		radial-gradient(135% 115% at 50% -12%,
			color-mix(in srgb, var(--star-accent, #000080) 12%, transparent),
			transparent 55%),
		var(--theme-wallpaper, var(--star-bg, var(--w98-teal, #008080)));
}

:root[data-theme="win98"] .w98-desktop {
	--starbox-wallpaper-base:
		linear-gradient(180deg,
			color-mix(in srgb, var(--star-bg, #008080) 82%, var(--star-surface, #ffffff) 18%) 0%,
			var(--star-bg, var(--theme-wallpaper, #008080)) 100%);
	--starbox-wallpaper-layer-filter: hue-rotate(118deg) saturate(0.74) contrast(0.92);
	--starbox-wallpaper-layer-blend: screen;
	--starbox-wallpaper-veil:
		linear-gradient(180deg,
			color-mix(in srgb, var(--star-surface, #ffffff) 10%, transparent) 0%,
			transparent 28%,
			color-mix(in srgb, var(--star-bg, #008080) 24%, transparent) 100%),
		radial-gradient(72% 52% at 24% 20%,
			color-mix(in srgb, var(--star-accent, #000080) 16%, transparent),
			transparent 66%);
}

/* ── Rich per-theme WALLPAPERS ──
   Multi-stop mesh gradients (no engine dependency) that give translucent glass
   something real to refract — the flat fill is half of why the modern themes
   read cheap. Decorative backdrop art (hues are intentional, not UI tokens). */
:root[data-theme="macos26"] .w98-desktop {
	--starbox-wallpaper-base:
		linear-gradient(155deg,
			color-mix(in srgb, var(--star-bg, #6e92c4) 78%, var(--star-surface, #ffffff) 22%),
			color-mix(in srgb, var(--star-accent, #5c7f86) 22%, var(--star-bg, #5c7f86)));
	--starbox-wallpaper-layer-filter: saturate(0.82) hue-rotate(172deg) brightness(1.08);
	--starbox-wallpaper-layer-blend: screen;
	--starbox-wallpaper-veil:
		radial-gradient(70% 62% at 18% 8%,
			color-mix(in srgb, var(--star-surface, #ffffff) 36%, transparent),
			transparent 68%),
		radial-gradient(78% 82% at 84% 24%,
			color-mix(in srgb, var(--star-accent, #007aff) 18%, transparent),
			transparent 62%),
		linear-gradient(180deg,
			color-mix(in srgb, var(--star-surface, #ffffff) 24%, transparent),
			transparent 44%,
			color-mix(in srgb, var(--star-bg, #6e92c4) 28%, transparent));
	background:
		radial-gradient(75% 80% at 18% 12%, rgba(168, 192, 232, 0.95), transparent 62%),
		radial-gradient(65% 70% at 86% 26%, rgba(214, 184, 224, 0.9), transparent 58%),
		radial-gradient(85% 95% at 55% 105%, rgba(120, 180, 196, 0.95), transparent 60%),
		linear-gradient(155deg, #6e92c4, #5c7f86);
}
/* Windows 11 "Mica" — a NEUTRAL, STATIC light desktop (NOT the blue "Bloom"
   hero, NOT an animated mesh). Fluent Mica is a desaturated material: a near-
   white ceiling that settles into a soft cool-grey floor, lit by one barely-
   there skylight bloom. Token-driven with literal fallbacks (standalone-
   contract): `--star-surface`→#f9f9fb ceiling, `--star-bg`→#c8cdd6 mica floor.
   Only desaturated slate is used — provably off the purple/blue AI-gradient band.
   Pure paint, no animation → the "static" the win11 desktop is meant to be.
   (The animated wallpaper-shell is suppressed for win11 just below.) */
:root[data-theme="win11"] .w98-desktop {
	--starbox-wallpaper-layer-filter: saturate(0.4);
	--starbox-wallpaper-layer-blend: normal;
	background:
		radial-gradient(120% 80% at 50% -22%,
			rgba(255, 255, 255, 0.55), transparent 58%),
		radial-gradient(110% 78% at 50% 122%,
			rgba(120, 134, 158, 0.18), transparent 62%),
		linear-gradient(180deg,
			var(--star-surface, #f9f9fb) 0%,
			color-mix(in srgb, var(--star-surface, #f9f9fb) 50%, var(--star-bg, #c8cdd6)) 46%,
			var(--star-bg, #c8cdd6) 100%);
}
/* The OS-wide animated wallpaper-shell (warm "Ember Harbor" drift) is the OtthOS
   signature for the hero themes; win11 deliberately opts OUT so its desktop reads
   as the neutral STATIC Mica floor above (era-faithful + matches the win11 spec).
   Scoped to win11 only — every other theme keeps the live wallpaper. */
:root[data-theme="win11"] .starbox-wallpaper-shell {
	display: none;
}

.starbox-wallpaper-layer-paint {
	mix-blend-mode: var(--starbox-wallpaper-layer-blend, normal);
}

.starbox-wallpaper-veil {
	mix-blend-mode: var(--starbox-wallpaper-veil-blend, normal);
}

:root[data-theme="starpunk"] .w98-desktop {
	--starbox-wallpaper-base:
		radial-gradient(120% 120% at 50% 52%,
			color-mix(in srgb, var(--star-surface, #15110d) 8%, var(--star-bg, #0a0806)),
			var(--star-bg, #0a0806) 72%);
	--starbox-wallpaper-layer-filter: saturate(1.16) contrast(1.08);
	--starbox-wallpaper-layer-blend: screen;
	--starbox-wallpaper-veil:
		radial-gradient(86% 62% at 50% 110%,
			color-mix(in srgb, var(--star-accent, #f5641e) 24%, transparent),
			transparent 60%),
		repeating-linear-gradient(0deg,
			color-mix(in srgb, var(--star-text, #f4efe9) 3%, transparent) 0 1px,
			transparent 1px 4px),
		radial-gradient(100% 88% at 50% 36%,
			transparent 36%,
			color-mix(in srgb, var(--star-bg, #0a0806) 44%, transparent) 100%);
	background:
		radial-gradient(80% 70% at 50% 118%, rgba(255, 106, 26, 0.22), transparent 58%),
		radial-gradient(60% 50% at 18% 8%, rgba(255, 138, 61, 0.10), transparent 55%),
		radial-gradient(120% 120% at 50% 50%, #15110d, #0a0806 70%);
}
:root[data-theme="midnight"] .w98-desktop {
	--starbox-wallpaper-base:
		linear-gradient(160deg,
			color-mix(in srgb, var(--star-bg, #16203a) 86%, var(--star-surface, #ffffff) 14%),
			var(--star-bg, #080d1c) 76%);
	--starbox-wallpaper-layer-filter: hue-rotate(172deg) saturate(0.58) brightness(0.92);
	--starbox-wallpaper-layer-blend: screen;
	--starbox-wallpaper-veil:
		radial-gradient(72% 60% at 78% 18%,
			color-mix(in srgb, var(--star-accent, #7aa2ff) 22%, transparent),
			transparent 62%),
		linear-gradient(180deg,
			color-mix(in srgb, var(--star-surface, #ffffff) 7%, transparent),
			transparent 44%,
			color-mix(in srgb, var(--star-bg, #080d1c) 42%, transparent));
	background:
		radial-gradient(70% 60% at 78% 18%, rgba(80, 120, 200, 0.28), transparent 60%),
		radial-gradient(90% 90% at 30% 100%, rgba(40, 70, 130, 0.30), transparent 62%),
		linear-gradient(160deg, #16203a, #0c1226 72%, #080d1c);
}
:root[data-theme="apple2"] .w98-desktop {
	--starbox-wallpaper-base: var(--star-bg, #060f08);
	--starbox-wallpaper-layer-filter: hue-rotate(86deg) saturate(0.62) contrast(1.24);
	--starbox-wallpaper-layer-blend: screen;
	background:
		radial-gradient(120% 120% at 50% 50%, #0d1c0f, #060f08 72%);
}
/* Windows XP "Bliss" — the rolling green hill under a blue sky (the most famous
   desktop ever shipped), approximated as a layered gradient. */
:root[data-theme="winxp"] .w98-desktop {
	--starbox-wallpaper-base:
		linear-gradient(180deg,
			color-mix(in srgb, var(--star-info, #2f7fd6) 70%, var(--star-surface, #ffffff) 30%) 0%,
			color-mix(in srgb, var(--star-ok, #76b83e) 62%, var(--star-surface, #ffffff) 38%) 56%,
			color-mix(in srgb, var(--star-ok, #3f7d24) 84%, var(--star-bg, #376f1a) 16%) 100%);
	--starbox-wallpaper-layer-filter: hue-rotate(82deg) saturate(0.7) brightness(1.04);
	--starbox-wallpaper-layer-blend: soft-light;
	--starbox-wallpaper-veil:
		radial-gradient(140% 90% at 50% 128%,
			color-mix(in srgb, var(--star-ok, #76b83e) 34%, transparent),
			transparent 58%),
		linear-gradient(180deg,
			color-mix(in srgb, var(--star-surface, #ffffff) 28%, transparent) 0%,
			transparent 42%,
			color-mix(in srgb, var(--star-ok, #3f7d24) 22%, transparent) 100%);
	background:
		radial-gradient(140% 90% at 50% 128%, #76b83e, transparent 58%),
		linear-gradient(180deg, #2f7fd6 0%, #6fb1e6 34%, #a7d977 58%, #5a9a30 78%, #3f7d24 100%);
}

/* ── Windows XP "Luna" chrome gaps (the 3 the ChromeProfile enum can't express;
   keyed off data-theme="winxp"; values mirror theme-winxp.css / the design
   language: Luna blue #0058e2, green Start #3f8a2e, orange-red close #c22424) ── */
/* (a) Rounded TOP-ONLY window frame — XP rounds the top two corners only. */
:root[data-theme="winxp"] .w98-desktop .demo-window {
	border-radius: 8px 8px 0 0;
}
:root[data-theme="winxp"] .w98-desktop .demo-window .demo-window__bar {
	border-radius: 7px 7px 0 0;
}
/* (b) Luna caption buttons — glassy BLUE min/max, iconic ORANGE-RED close. */
:root[data-theme="winxp"] .w98-desktop .demo-controls button {
	width: 21px;
	height: 21px;
	border-radius: 3px;
	border: 1px solid #1a4ba8;
	color: #fff;
	background: linear-gradient(180deg, #6aa6f0 0%, #2f6fd8 52%, #2056b8 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
:root[data-theme="winxp"] .w98-desktop .demo-controls button:hover {
	background: linear-gradient(180deg, #8cc0ff 0%, #3f86e6 52%, #2a63c8 100%);
	filter: none;
}
:root[data-theme="winxp"] .w98-desktop .demo-controls button:last-child {
	border-color: #8c1414;
	background: linear-gradient(180deg, #f6a06a 0%, #d44a2a 46%, #c22424 100%);
}
:root[data-theme="winxp"] .w98-desktop .demo-controls button:last-child:hover {
	background: linear-gradient(180deg, #ffba84 0%, #e85a36 46%, #d62a2a 100%);
}
/* (c) Glossy Luna TASKBAR gradient (neither bevel nor acrylic) + green Start. */
:root[data-theme="winxp"] .w98-taskbar {
	background: linear-gradient(180deg, #3f8be8 0%, #2b6fd0 9%, #245fc4 48%, #2768cc 92%, #1a4fb0 100%);
	border-top: 1px solid #5a9bf0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
:root[data-theme="winxp"] .w98-start {
	height: 24px;
	padding: 0 16px 0 10px;
	color: #fff;
	font-style: italic;
	font-weight: 700;
	font-size: 14px;
	border: 1px solid #2a5e1f;
	border-radius: 0 9px 9px 0;
	background: linear-gradient(180deg, #6fc24a 0%, #4d9c33 48%, #357d24 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
:root[data-theme="winxp"] .w98-start:hover {
	background: linear-gradient(180deg, #82d65c 0%, #5aad3d 48%, #3d8c2a 100%);
}
/* XP task buttons: glossy blue raised pills */
:root[data-theme="winxp"] .w98-tasks button {
	color: #fff;
	border: 1px solid #1a4ba8;
	border-radius: 3px;
	background: linear-gradient(180deg, #4f8be8 0%, #2f6fd0 52%, #2861c4 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
:root[data-theme="winxp"] .w98-tasks button[data-active="true"] {
	background: linear-gradient(180deg, #2b5fb8 0%, #2056aa 52%, #1c4d9c 100%);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
:root[data-theme="winxp"] .w98-tray {
	border: 1px solid #2a64c0;
	border-radius: 3px;
	background: linear-gradient(180deg, #2c6fcc 0%, #1f57b4 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* ── MODERN START MENU — kill the dated blue vertical "Star OS" rail ──
   The win98/XP vertical brand bar reads cheap. For non-bevel (modern) profiles
   drop the rail entirely and present a clean panel: wider, padded, rounded item
   rows, a quiet header. win98/nextstep keep the classic rail (era-correct). */
:root[data-chrome-border="shadow"] .w98-startmenu__rail,
:root[data-chrome-border="hairline"] .w98-startmenu__rail,
:root[data-chrome-border="none"] .w98-startmenu__rail {
	display: none;
}
:root[data-chrome-border="shadow"] .w98-startmenu,
:root[data-chrome-border="hairline"] .w98-startmenu,
:root[data-chrome-border="none"] .w98-startmenu {
	min-width: 260px;
	padding: 8px;
	gap: 0;
}
:root[data-chrome-border="shadow"] .w98-startmenu__items,
:root[data-chrome-border="hairline"] .w98-startmenu__items,
:root[data-chrome-border="none"] .w98-startmenu__items {
	padding: 0;
	gap: 1px;
}
/* a quiet section header in place of the brand rail */
:root[data-chrome-border="shadow"] .w98-startmenu__items::before,
:root[data-chrome-border="hairline"] .w98-startmenu__items::before,
:root[data-chrome-border="none"] .w98-startmenu__items::before {
	content: "Starosphere";
	display: block;
	padding: 2px 8px 8px;
	font-size: var(--star-text-xs, 10px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--star-text-muted, #808080);
}
/* modern menu rows: roomier, rounded, icon-led */
:root[data-chrome-border="shadow"] .w98-startmenu__item,
:root[data-chrome-border="hairline"] .w98-startmenu__item,
:root[data-chrome-border="none"] .w98-startmenu__item {
	padding: 7px 10px;
	margin: 0;
	border-radius: var(--star-radius-control, 8px);
	font-size: var(--star-text-sm, 13px);
}
:root[data-chrome-border="shadow"] .w98-startmenu__pinned,
:root[data-chrome-border="hairline"] .w98-startmenu__pinned,
:root[data-chrome-border="none"] .w98-startmenu__pinned {
	margin-bottom: 4px;
}

/* ── win11 MODERN START MENU (the grid) ──
   The `.w98-startmenu__win11` block is always in the DOM; shown ONLY for win11
   (the classic cascade is hidden for win11). A centered floating acrylic panel:
   search field + Pinned app-tile grid (real icons) + Recommended list + a user/
   power row — the real win11 shape, not the category cascade. */
.w98-startmenu__win11 {
	display: none;
}
:root[data-theme="win11"] .w98-startmenu__items {
	display: none;
}
/* When open, win11's menu is a BLOCK (not the rail+items flex row) so the grid
   child gets full width; the open/close toggle is preserved via [data-open]. */
:root[data-theme="win11"] .w98-startmenu[data-open="true"] {
	display: block;
	left: 50%;
	transform: translateX(-50%);
	transform-origin: bottom center;
	width: 360px;
	min-width: 360px;
	padding: 0;
}
:root[data-theme="win11"] .w98-startmenu__win11 {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding: 16px 16px 10px;
}
.w98-startmenu__search {
	width: 100%;
	padding: 8px 14px;
	border-radius: 18px;
	border: 1px solid var(--star-border, #ccc);
	background: var(--star-surface-sunken, #fff);
	color: var(--star-text, #111111);
	font: inherit;
	font-family: var(--star-font-ui, inherit);
	font-size: 13px;
}
.w98-startmenu__search::placeholder {
	color: var(--star-text-muted, #888);
}
.w98-startmenu__search:focus-visible {
	outline: none;
	border-color: var(--star-accent, #005fb8);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--star-accent, #005fb8) 30%, transparent);
}
.w98-startmenu__section-head {
	font-size: var(--star-text-sm, 12px);
	font-weight: 600;
	color: var(--star-text, #111111);
	padding: 0 2px;
}
.w98-startmenu__section-head--row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.w98-startmenu__allapps {
	border: 0;
	border-radius: 6px;
	padding: 4px 10px;
	background: color-mix(in srgb, var(--star-text, #111111) 7%, transparent);
	color: var(--star-text, #111111);
	font: inherit;
	font-family: var(--star-font-ui, inherit);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--star-dur-fast, 120ms) var(--star-ease, ease);
}
.w98-startmenu__allapps:hover {
	background: color-mix(in srgb, var(--star-text, #111111) 13%, transparent);
}
.w98-startmenu__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 2px;
	max-height: 230px;
	overflow-y: auto;
}
.w98-startmenu__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 9px 2px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--star-text, #111111);
	cursor: pointer;
	font: inherit;
	font-family: var(--star-font-ui, inherit);
	transition: background-color var(--star-dur-fast, 120ms) var(--star-ease, ease);
}
.w98-startmenu__tile:hover {
	background: color-mix(in srgb, var(--star-text, #111111) 9%, transparent);
}
/* Designed keyboard focus for the win11 start-menu interactive controls (tiles,
   recommended rows, all-apps, power) — these had :hover but no :focus-visible, so
   keyboard users got no cue. Resolves the active theme's `--star-focus-ring`. */
.w98-startmenu__tile:focus-visible,
.w98-startmenu__reco-row:focus-visible,
.w98-startmenu__allapps:focus-visible,
.w98-startmenu__power:focus-visible {
	outline: 2px solid var(--star-focus-ring, var(--star-accent, #005fb8));
	outline-offset: -2px;
	background: color-mix(in srgb, var(--star-text, #111111) 9%, transparent);
}
.w98-startmenu__tile-icon,
.w98-startmenu__tile-icon > svg {
	width: 30px;
	height: 30px;
	image-rendering: auto;
}
.w98-startmenu__tile-label {
	font-size: 10px;
	line-height: 1.15;
	text-align: center;
	max-width: 50px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.w98-startmenu__reco {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.w98-startmenu__reco-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--star-text, #111111);
	cursor: pointer;
	font: inherit;
	font-family: var(--star-font-ui, inherit);
	text-align: left;
}
.w98-startmenu__reco-row:hover {
	background: color-mix(in srgb, var(--star-text, #111111) 9%, transparent);
}
.w98-startmenu__reco-icon,
.w98-startmenu__reco-icon > svg {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	image-rendering: auto;
}
.w98-startmenu__reco-label {
	font-size: var(--star-text-sm, 12px);
}
.w98-startmenu__user {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 2px;
	padding: 8px 10px;
	border-top: 1px solid color-mix(in srgb, var(--star-text, #111111) 10%, transparent);
}
.w98-startmenu__user-name {
	font-size: var(--star-text-sm, 12px);
	font-weight: 600;
	color: var(--star-text, #111111);
}
.w98-startmenu__power {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--star-text, #111111);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}
.w98-startmenu__power:hover {
	background: color-mix(in srgb, var(--star-text, #111111) 9%, transparent);
}

/* ── ChromeProfile: backdrop=scanline ── apple-ii lays phosphor scanlines + a
   faint CRT vignette over the whole desktop. pointer-events:none so it never
   eats clicks; multiply blend so the phosphor reads ON the green. */
:root[data-chrome-backdrop="scanline"] .w98-desktop::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		repeating-linear-gradient(
			0deg,
			rgba(0, 0, 0, 0) 0px,
			rgba(0, 0, 0, 0) 2px,
			rgba(0, 0, 0, 0.30) 3px
		),
		radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.45) 100%);
	mix-blend-mode: multiply;
}

.w98-desktop[data-wallpaper="dither-50-maze"] {
	background-image: var(--w98-maze-pattern);
}

.w98-desktop[data-wallpaper="dither-25-light"] {
	background-image: var(--w98-light-pattern);
}

.w98-actions {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 30;
	display: flex;
	gap: 2px;
	padding: 2px;
	background: var(--w98-face);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow);
}

.w98-actions a {
	padding: 3px 10px;
	font-size: 11px;
	color: var(--w98-text);
	text-decoration: none;
	background: var(--w98-face);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow);
}

.w98-actions a:hover {
	background: var(--w98-face-light);
}

.w98-actions a:active {
	box-shadow:
		inset -1px -1px 0 var(--w98-light),
		inset 1px 1px 0 var(--w98-shadow);
	padding: 4px 9px 2px 11px;
}

/* Desktop icon column — My Computer, My Documents, IE, Network, Recycle Bin. */
.w98-desktop .starplane-deskicons {
	position: absolute;
	left: 10px;
	top: 62px;
	/* Desktop icons are the floor of the desktop stack — never above windows. */
	z-index: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 88px;
}

.w98-desktop .starplane-deskicon {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	width: 82px;
	min-height: 66px;
	padding: 6px 4px 5px;
	color: var(--star-text-inverse, #fff);
	font: inherit;
	font-size: var(--star-text-xs, 11px);
	line-height: 1.25;
	text-align: center;
	/* Legible over any wallpaper without the crude hard-offset stamp: a tight
	   contact shadow for edge definition + a soft drop for separation. */
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.55);
	cursor: default;
	user-select: none;
	background: transparent;
	border: 0;
	border-radius: var(--star-radius-sm, 8px);
	isolation: isolate;
	touch-action: manipulation;
	transition:
		transform var(--star-mo-snap, var(--star-dur-fast, 90ms)) var(--star-mo-settle-curve, var(--star-ease, ease)),
		color var(--star-mo-snap, var(--star-dur-fast, 90ms)) var(--star-mo-settle-curve, var(--star-ease, ease));
}

.w98-desktop .starplane-deskicon::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	border-radius: inherit;
	opacity: 0;
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--star-surface, #ffffff) 34%, transparent),
			color-mix(in srgb, var(--star-bg, #0a0806) 18%, transparent)),
		color-mix(in srgb, var(--star-surface, #ffffff) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--star-surface, #ffffff) 26%, transparent);
	box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--star-bg, #0a0806) 70%, transparent);
	transition: opacity var(--star-mo-snap, var(--star-dur-fast, 90ms)) var(--star-mo-settle-curve, var(--star-ease, ease));
}

.w98-desktop .starplane-deskicon:hover::before,
.w98-desktop .starplane-deskicon:focus-visible::before,
.w98-desktop .starplane-deskicon[data-selected="true"]::before {
	opacity: 1;
}

.w98-desktop .starplane-deskicon:hover {
	transform: translateY(-1px);
}

.w98-desktop .starplane-deskicon:active {
	transform: translateY(0) scale(0.98);
}

.w98-desktop .starplane-deskicon[data-selected="true"] {
	color: var(--star-text-inverse, #fff);
}

.starplane-deskicon__img {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--star-radius-sm, 8px);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.42));
	transition:
		transform var(--star-mo-snap, var(--star-dur-fast, 90ms)) var(--star-mo-settle-curve, var(--star-ease, ease)),
		filter var(--star-mo-snap, var(--star-dur-fast, 90ms)) var(--star-mo-settle-curve, var(--star-ease, ease));
}

.starplane-deskicon__img > svg {
	width: 32px;
	height: 32px;
	image-rendering: auto;
}

.starplane-deskicon__label {
	max-width: 78px;
	min-height: 18px;
	padding: 2px 5px 3px;
	border: 1px solid transparent;
	border-radius: var(--star-radius-sm, 8px);
	background: color-mix(in srgb, var(--star-bg, #0a0806) 28%, transparent);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	overflow-wrap: anywhere;
	transition:
		background-color var(--star-mo-snap, var(--star-dur-fast, 90ms)) var(--star-mo-settle-curve, var(--star-ease, ease)),
		border-color var(--star-mo-snap, var(--star-dur-fast, 90ms)) var(--star-mo-settle-curve, var(--star-ease, ease));
}

.w98-desktop .starplane-deskicon:hover .starplane-deskicon__img,
.w98-desktop .starplane-deskicon:focus-visible .starplane-deskicon__img {
	transform: translateY(-1px);
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.48));
}

.w98-desktop .starplane-deskicon[data-selected="true"] .starplane-deskicon__img {
	filter:
		drop-shadow(0 5px 10px color-mix(in srgb, var(--star-accent, #f5641e) 34%, transparent))
		saturate(1.08);
}

.w98-desktop .starplane-deskicon[data-selected="true"] .starplane-deskicon__label {
	background: color-mix(in srgb, var(--star-accent, var(--w98-title, #000080)) 84%, var(--star-bg, #0a0806));
	color: var(--star-text-inverse, #fff);
	border-color: color-mix(in srgb, var(--star-text-inverse, #fff) 62%, transparent);
	text-shadow: none;
}

.w98-desktop .starplane-deskicon:hover .starplane-deskicon__label {
	border-color: color-mix(in srgb, var(--star-surface, #ffffff) 42%, transparent);
	background: color-mix(in srgb, var(--star-surface, #ffffff) 22%, var(--star-bg, #0a0806) 20%);
}

.w98-desktop .starplane-deskicon:focus-visible .starplane-deskicon__label {
	border-color: var(--star-focus-ring, #fff);
	outline: none;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--star-focus-ring, #f5641e) 42%, transparent);
}

.w98-desktop .starplane-deskicon[data-drop-target-active="true"] {
	background: color-mix(in srgb, var(--star-surface, #ffffff) 12%, transparent);
	outline: 1px dotted var(--star-focus-ring, #fff);
	outline-offset: -2px;
}

.w98-desktop .starplane-deskicon[data-drop-target-reject="true"] {
	outline: 1px dotted var(--w98-danger);
	outline-offset: -2px;
}

/* Quick Launch tray — IE, Outlook, Show Desktop. */
.w98-quicklaunch {
	display: flex;
	align-items: center;
	gap: 1px;
	padding: 0 2px;
}

.w98-ql {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
	background: transparent;
	border: 1px solid transparent;
	font: inherit;
}

.w98-ql > svg {
	width: 16px;
	height: 16px;
	image-rendering: pixelated;
}

.w98-ql:hover {
	border-color: var(--w98-light) var(--w98-shadow) var(--w98-shadow) var(--w98-light);
}

.w98-ql:active {
	border-color: var(--w98-shadow) var(--w98-light) var(--w98-light) var(--w98-shadow);
	padding: 3px 1px 1px 3px;
}

/* ============================================================
   Window (Starplane window — chrome only; geometry is kernel)
   ============================================================ */
/* Scoped under `.w98-desktop` (0,2,0) so the authentic 4-tone raised frame beats
   build.ts' inline `.demo-window { border:2px solid … }` flat-bevel (0,1,0). */
.w98-desktop .demo-window {
	position: absolute;
	display: flex;
	flex-direction: column;
	width: min(560px, calc(100vw - 32px));
	min-height: 220px;
	/* Frame MATERIAL is fully token-driven. `--star-shadow-2` IS the design
	   language's window elevation: win98 = a 4-tone hard inset bevel, star-os = a
	   soft dual-layer ember glow, win11/macOS = a soft drop, apple-ii = phosphor
	   bloom. The `--w98-*` fallback chain keeps win98 pixel-true if the `--star-*`
	   block hasn't injected yet, then upgrades the instant it does. */
	background: var(--star-chrome-window-bg, var(--star-surface, var(--w98-face, #c0c0c0)));
	padding: 0;
	border: var(--star-chrome-window-border, 1px solid var(--star-border-strong, var(--w98-dark, #111111)));
	border-radius: var(--star-chrome-window-radius, var(--star-radius-window, 0px));
	box-shadow: var(--star-chrome-window-shadow, var(--star-shadow-2,
		inset 1px 1px 0 var(--w98-light, #fff),
		inset -1px -1px 0 var(--w98-shadow, #808080),
		inset 2px 2px 0 var(--w98-face-light, #dfdfdf),
		inset -2px -2px 0 #404040));
	font-size: 11px;
	transition: var(--star-chrome-window-transition, box-shadow var(--star-dur-fast, 0ms) var(--star-ease, linear));
}
/* The win98/NeXT bevel needs the 3px frame gutter between the raised edge and
   the caption; flat eras (shadow/hairline/none) sit flush to the radius. */
:root[data-chrome-border="bevel"] .w98-desktop .demo-window {
	padding: 3px;
}
.w98-desktop .demo-window[data-focused="true"] {
	z-index: 50;
}

/* ════════════════════════════════════════════════════════════════════════════
   GLASS / VIBRANCY LAYER — real translucent material for the MODERN profiles
   (data-chrome-backdrop = vibrancy [macOS] / acrylic [win11]).
   Derives translucency from the OPAQUE --star-surface via color-mix(…,transparent)
   so no new theme tokens are needed; adds a real backdrop-filter blur, a skylight
   RIM highlight (spec P1), and focus-by-ELEVATION (spec P2 — lift, not a ring).
   win98/nextstep/apple-ii keep their opaque bevel/phosphor — this layer never
   touches them. Recipes mined from theme-macos26.css and capped for idle GPU
   cost (rim inset 0 1px 0 rgba(255,255,255,.65); blur <=24px; chrome<pane
   opacity ladder).
   ════════════════════════════════════════════════════════════════════════════ */
/* Window = ONE translucent glass sheet: skylight rim + theme elevation + the real
   blur sampling the wallpaper/windows behind it. */
:root[data-chrome-backdrop="vibrancy"] .w98-desktop .demo-window,
:root[data-chrome-backdrop="acrylic"] .w98-desktop .demo-window {
	background: var(--star-chrome-glass-pane, var(--glass-pane));
	box-shadow: var(--star-chrome-glass-rim, var(--glass-rim)), var(--star-shadow-2);
	backdrop-filter: var(--star-chrome-glass-blur, var(--glass-blur));
	-webkit-backdrop-filter: var(--star-chrome-glass-blur, var(--glass-blur));
}
/* Focus communicated by a TIER of LIFT, not a blue ring (spec P2). */
:root[data-chrome-backdrop="vibrancy"] .w98-desktop .demo-window[data-focused="true"],
:root[data-chrome-backdrop="acrylic"] .w98-desktop .demo-window[data-focused="true"] {
	box-shadow: var(--star-chrome-glass-rim, var(--glass-rim)), var(--star-shadow-3);
	border-color: var(--star-border-strong, var(--star-border));
}
/* Titlebar = unified vibrant chrome (NO opaque gradient) with dark-on-light text;
   traffic lights are already handled by the titlebar profile. */
:root[data-chrome-backdrop="vibrancy"] .w98-desktop .demo-window .demo-window__bar,
:root[data-chrome-backdrop="acrylic"] .w98-desktop .demo-window .demo-window__bar {
	background: var(--star-chrome-glass-chrome, var(--glass-chrome));
	color: var(--star-text, #1d1d1f);
}
:root[data-chrome-backdrop="vibrancy"] .w98-desktop .demo-window:not([data-focused="true"]) .demo-window__bar,
:root[data-chrome-backdrop="acrylic"] .w98-desktop .demo-window:not([data-focused="true"]) .demo-window__bar {
	background: var(--star-chrome-glass-chrome, var(--glass-chrome));
	color: var(--star-text-muted, #6b6b6f);
}
/* Body transparent → the window's single glass surface reads through; opaque app
   wells/lists provide legible content contrast on top. */
:root[data-chrome-backdrop="vibrancy"] .w98-desktop .demo-window .demo-window__body,
:root[data-chrome-backdrop="acrylic"] .w98-desktop .demo-window .demo-window__body {
	background: transparent;
}

/* ════════════════════════════════════════════════════════════════════════════
   macOS TAHOE HIGH-FIDELITY VIBRANCY (registry id "macos26") — Liquid Glass lifted
   to fidelity, layered ON the shared glass base above. The base derives a flat
   translucency from --star-surface; THIS block adds the Tahoe details that separate
   real Liquid Glass from generic glassmorphism:
     1. DEEPER SATURATION — saturate(2.0) so the lake-dusk wallpaper reads through
        the glass rich and vivid, not washed;
     2. a COOL SKYLIGHT FILM — a low-alpha pale-sky veil (rgba(120,150,190,…)) layered
        OVER the near-white pane, the ambient-sky bounce-light that makes macOS glass
        read cool. It is a SEPARATE film (not mixed into the pane color) so the sheet
        stays near-white + legible — mixing a tint color in would grey it;
     3. a BRIGHTER REFRACTIVE EDGE — the sub-pixel white rim is pushed brighter, the
        Liquid Glass refraction signature.
   Elevation comes from the deepened --star-shadow-* (see macos-tahoe.ts) with a
   LITERAL fallback on every --star-* read, so a standalone consumer that mounts a
   macos app WITHOUT the design-language injection still gets the material + float.
   STATIC — backdrop-filter/box-shadow are never transitioned/animated → GPU-safe
   (only transform + opacity ever animate). Anti-slop: the only saturated hue is the
   macOS system blue; the cool film is a low-alpha sky cast, NOT a blue→violet
   AI hero gradient.
   ════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="macos26"] {
	/* Tahoe vibrancy — deeper saturation than the shared glass base */
	--glass-blur: blur(24px) saturate(1.6);
	/* the faint cool skylight film — ambient-sky bounce, layered over the pane */
	--glass-tint: rgba(120, 150, 190, 0.12);
	/* brighter refractive glass edge — the Liquid Glass refraction signature */
	--glass-rim:
		inset 0 1px 0 rgba(255, 255, 255, 0.72),
		inset 0 0 0 0.5px rgba(255, 255, 255, 0.48);
}
/* Tahoe window — near-white vibrancy pane (literal --star-* fallback) under a thin
   cool skylight film; elevation carries the deepened --star-shadow-* with a literal
   fallback so a bare consumer still floats above the desktop. */
:root[data-theme="macos26"] .w98-desktop .demo-window {
	background:
		linear-gradient(var(--glass-tint, rgba(120, 150, 190, 0.12)), var(--glass-tint, rgba(120, 150, 190, 0.12))),
		var(--glass-pane, color-mix(in srgb, var(--star-surface, #f5f5f7) 78%, transparent));
	box-shadow:
		var(--glass-rim),
		var(--star-shadow-2, 0 1px 2px rgba(0, 0, 0, 0.07), 0 8px 22px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(20, 40, 80, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.05));
}
:root[data-theme="macos26"] .w98-desktop .demo-window[data-focused="true"] {
	box-shadow:
		var(--glass-rim),
		var(--star-shadow-3, 0 2px 5px rgba(0, 0, 0, 0.09), 0 30px 70px rgba(0, 0, 0, 0.20), 0 16px 32px rgba(20, 40, 80, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.06));
}

/* ════════════════════════════════════════════════════════════════════════════
   STAR-OS "STARPORT" HOLOGRAPHIC SIGNATURE (the hero — registry id "starpunk")
   Per cl-starpunk's signature-spec. Opaque legible body + an amber-glass FILM +
   blur on the titlebar (the look never sits under the readable content) + the
   triple-bloom glow ladder + an edge filament that lights the focused window.
   The only saturated hue is the flame; near-neutral darks only.
   Keyed off data-theme="starpunk" so it touches only the hero.
   ════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="starpunk"] {
	--sx-glass-blur: 18px;
	--sx-film-warm: color-mix(in srgb, var(--star-accent, #ff6a1a) 6%, transparent);
}
/* Titlebar = warm amber-glass film over the raised hull (NOT a bright orange bar)
   + a fine 3px scanline (CRT memory + kills banding). */
:root[data-theme="starpunk"] .w98-desktop .demo-window .demo-window__bar {
	background:
		repeating-linear-gradient(
			0deg,
			color-mix(in srgb, var(--star-text, #f4efe9) 3%, transparent) 0px,
			color-mix(in srgb, var(--star-text, #f4efe9) 3%, transparent) 1px,
			transparent 1px,
			transparent 3px
		),
		linear-gradient(180deg, var(--sx-film-warm), transparent 60%),
		var(--star-surface-raised, #1f1813);
	color: var(--star-text, #f4efe9);
	-webkit-backdrop-filter: blur(var(--sx-glass-blur)) saturate(1.15);
	backdrop-filter: blur(var(--sx-glass-blur)) saturate(1.15);
	border-bottom: 1px solid var(--star-border, #2c241d);
}
/* Active window: the flame warms the caption, the bloom expands, the frame lights. */
:root[data-theme="starpunk"] .w98-desktop .demo-window[data-focused="true"] .demo-window__bar {
	background:
		repeating-linear-gradient(
			0deg,
			color-mix(in srgb, var(--star-text, #f4efe9) 3%, transparent) 0px,
			color-mix(in srgb, var(--star-text, #f4efe9) 3%, transparent) 1px,
			transparent 1px,
			transparent 3px
		),
		linear-gradient(180deg, color-mix(in srgb, var(--star-accent, #ff6a1a) 16%, transparent), transparent 70%),
		var(--star-surface-raised, #1f1813);
}
:root[data-theme="starpunk"] .w98-desktop .demo-window {
	position: relative;
	outline: 1px solid var(--star-border, #2c241d);
	outline-offset: -1px;
}
:root[data-theme="starpunk"] .w98-desktop .demo-window[data-focused="true"] {
	box-shadow: var(--star-shadow-3);
	outline-color: color-mix(in srgb, var(--star-accent, #ff6a1a) 40%, var(--star-border, #2c241d));
}
:root[data-theme="starpunk"] .w98-desktop .demo-window:not([data-focused="true"]) {
	opacity: 0.93;
}
/* Inner glow — "lit from within": a top specular + a faint warm pool at the head. */
:root[data-theme="starpunk"] .w98-desktop .demo-window::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 3;
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--star-accent-hover, #ff8a3d) 22%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--star-text, #fff) 4%, transparent);
	background:
		radial-gradient(120% 60% at 50% 0%,
			color-mix(in srgb, var(--star-accent, #ff6a1a) 7%, transparent),
			transparent 55%);
}
/* Edge-NEON filament — the focused window's 1px frame becomes a lit EL-wire seam,
   brightest at the top (focus = lit, the eye knows what's on top). */
:root[data-theme="starpunk"] .w98-desktop .demo-window[data-focused="true"]::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: calc(var(--star-radius-window, 8px) + 1px);
	padding: 1px;
	pointer-events: none;
	z-index: 4;
	background: linear-gradient(
		180deg,
		var(--star-focus-ring, #ff9d52),
		color-mix(in srgb, var(--star-accent, #ff6a1a) 40%, transparent) 30%,
		var(--star-border, #2c241d) 70%
	);
	-webkit-mask: linear-gradient(#111111 0 0) content-box, linear-gradient(#111111 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#111111 0 0) content-box, linear-gradient(#111111 0 0);
	mask-composite: exclude;
}

/* ════════════════════════════════════════════════════════════════════════════
   NeXTSTEP (1989) — the CHISEL + the GRABBER BAR  (registry id "nextstep")
   The lowest-fidelity era before this pass: with zero dedicated chrome rules it
   inherited win98's 2-tone bevel + a flat dark caption and read as "grey win98",
   not NeXT. NeXTSTEP's signature is THREE things this block restores:
     (1) the dark, horizontally-PINSTRIPED title "grabber" bar with a CENTERED
         bold Helvetica caption (the NeXT grip texture),
     (2) the FLAT single-line CHISEL (1px light top-left / dark bottom-right —
         the design language's `--star-shadow-*`), cooler + flatter than win98's
         2px ramp,
     (3) cool blue-grey panels + raised SQUARE button tiles.
   Every value is token-FIRST with a NeXT literal fallback (standalone-contract:
   `var(--star-X, <lit>)`), so it resolves before JS boots and in standalone
   consumers. Motion is instant (`--star-dur-* = 0`) — no transitions added.
   GPU-safe: only static paint; no animated width/height/top/left.
   ════════════════════════════════════════════════════════════════════════════ */

/* Panel = cool blue-grey Helvetica surface carved by a FLAT single-line chisel
   (`--star-shadow-2`), framed by a hard 1px cool-dark outline — flatter + cooler
   than the win98 ramp. */
:root[data-theme="nextstep"] .w98-desktop .demo-window {
	background: var(--star-surface, #a6aaae);
	border: 1px solid var(--star-border-strong, #2a2c30);
	box-shadow: var(--star-shadow-2, inset 1px 1px #c4c8cc, inset -1px -1px #54585c);
}
/* Focus is communicated by a hard NeXT menu-drop (a crisp offset shadow, never a
   soft blur or a colour ring) layered over the same chisel. */
:root[data-theme="nextstep"] .w98-desktop .demo-window[data-focused="true"] {
	box-shadow:
		var(--star-shadow-2, inset 1px 1px #c4c8cc, inset -1px -1px #54585c),
		2px 2px 0 rgba(20, 22, 24, 0.4);
}

/* The iconic NeXT title "grabber" bar — a dark cool-charcoal caption carved with
   faint horizontal pinstripe grip lines, a 1px light top chisel, a dark bottom
   edge. Active fill is the near-black `--star-accent` (the NeXT selection ink). */
:root[data-theme="nextstep"] .w98-desktop .demo-window .demo-window__bar {
	background:
		repeating-linear-gradient(
			0deg,
			color-mix(in srgb, var(--star-text-inverse, #f2f4f6) 20%, transparent) 0px,
			color-mix(in srgb, var(--star-text-inverse, #f2f4f6) 20%, transparent) 1px,
			transparent 1px,
			transparent 3px
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--star-accent-hover, #34373c) 88%, #ffffff) 0%,
			var(--star-accent, #1c1e22) 64%
		);
	color: var(--star-text-inverse, #f2f4f6);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--star-text-inverse, #f2f4f6) 26%, transparent),
		inset 0 -1px 0 var(--star-border-strong, #2a2c30);
	border-bottom: 1px solid var(--star-border-strong, #2a2c30);
}
/* Inactive caption: a flat raised cool-grey shelf with the lightest grip — the
   NeXT "this window is asleep" recede (no hue, no glow). */
:root[data-theme="nextstep"] .w98-desktop .demo-window:not([data-focused="true"]) .demo-window__bar {
	background:
		repeating-linear-gradient(
			0deg,
			color-mix(in srgb, var(--star-text, #111316) 7%, transparent) 0px,
			color-mix(in srgb, var(--star-text, #111316) 7%, transparent) 1px,
			transparent 1px,
			transparent 3px
		),
		linear-gradient(
			180deg,
			var(--star-surface-raised, #b6babe) 0%,
			color-mix(in srgb, var(--star-surface, #a6aaae) 78%, #6e7276) 100%
		);
	color: color-mix(in srgb, var(--star-text, #111316) 64%, transparent);
}

/* Caption CENTERED (NeXT centers the title), bold Helvetica with a hair of ink
   shadow so it stays legible riding the grip pinstripes. */
:root[data-theme="nextstep"] .w98-desktop .demo-window .demo-title {
	justify-content: center;
}
:root[data-theme="nextstep"] .w98-desktop .demo-window .demo-title__label {
	flex: 0 1 auto;
	text-align: center;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* NeXT window controls: raised cool-grey SQUARE tiles with the single-line
   chisel, riding the dark grabber bar (no radius, no win98 2-tone ramp). */
:root[data-theme="nextstep"] .w98-desktop .demo-controls button {
	width: 16px;
	height: 16px;
	border: 1px solid var(--star-border-strong, #2a2c30);
	border-radius: 0;
	background: var(--star-surface-raised, #b6babe);
	box-shadow: var(--star-shadow-1, inset 1px 1px #c4c8cc, inset -1px -1px #6e7276);
	color: var(--star-text, #111316);
}
:root[data-theme="nextstep"] .w98-desktop .demo-controls button:hover {
	background: var(--star-surface, #a6aaae);
}

/* Top global menubar = a flat cool-grey NeXT shelf chiseled by a 1px light top
   edge + a hard dark base line (the design language's flat single-line, not a
   win98 gradient shelf). */
:root[data-theme="nextstep"] .w98-taskbar {
	background: var(--star-surface, #a6aaae);
	border-bottom: 1px solid var(--star-border-strong, #2a2c30);
	box-shadow: inset 0 1px 0 var(--star-surface-raised, #c4c8cc);
}

/* ---- Resize handles ----
   Thin invisible hit-zones around the window chrome (4 edges + 4 corners). The
   window is position:absolute so these absolutely-position against it. Pointer
   events only on the handles; the wrapper is inert. Corners sit ABOVE edges
   (higher z) so a corner drag wins a diagonal resize. GPU-safe: no animation. */
.demo-resize {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}
.demo-resize__edge,
.demo-resize__corner {
	position: absolute;
	pointer-events: auto;
	touch-action: none;
}
.demo-resize__edge--n { top: -3px; left: 6px; right: 6px; height: 6px; cursor: ns-resize; }
.demo-resize__edge--s { bottom: -3px; left: 6px; right: 6px; height: 6px; cursor: ns-resize; }
.demo-resize__edge--e { right: -3px; top: 6px; bottom: 6px; width: 6px; cursor: ew-resize; }
.demo-resize__edge--w { left: -3px; top: 6px; bottom: 6px; width: 6px; cursor: ew-resize; }
.demo-resize__corner { width: 12px; height: 12px; z-index: 6; }
.demo-resize__corner--nw { top: -4px; left: -4px; cursor: nwse-resize; }
.demo-resize__corner--ne { top: -4px; right: -4px; cursor: nesw-resize; }
.demo-resize__corner--sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.demo-resize__corner--se { bottom: -4px; right: -4px; cursor: nwse-resize; }

.demo-window[data-minimized="true"] {
	transform: translateY(120vh);
	opacity: 0;
	pointer-events: none;
	transition: transform 140ms ease-in, opacity 100ms ease-in;
}

.demo-window[data-closed="true"] {
	display: none;
}

/* ---- Maximized ----
   The maximize tool flips the window's server-side `maximized` flag, but the
   headless server has no screen size so the window's server geometry never
   grows. The class (toggled from the snapshot flag) owns the box instead: it
   fills the desktop containing block (`.w98-desktop` is position:relative,
   100vw×100vh) minus the 28px taskbar. `!important` beats the base
   `.demo-window { width: min(560px, …) }` rule AND any inline width/height that
   might leak from a prior restored render. GPU-safe: static layout only, no
   transform/opacity animation introduced here. */
.demo-window--maximized {
	inset: 0 0 28px 0 !important;
	left: 0 !important;
	top: 0 !important;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	min-height: 0 !important;
	/* Edge-to-edge fill: drop the rounded corners + floating drop shadow. */
	border-radius: 0 !important;
	box-shadow: none !important;
}
.demo-window--maximized .demo-window__bar {
	border-radius: 0;
}

/* ---- Title bar ----
   Selectors here are scoped under `.w98-desktop .demo-window …` (specificity
   0,3,0) so they BEAT the stale duplicate chrome rules injected by build.ts'
   inline <style> (`.demo-window__bar`, 0,1,0) regardless of source order. The
   authoritative title bar is 20px tall (a tap target that still reads as a thin
   Win98 caption), with a crisp 3-stop blue gradient when focused. */
.w98-desktop .demo-window .demo-window__bar {
	/* Caption height comes from the theme (`--theme-titlebar-height`: win98 20,
	   star-os 30, macОS 28, apple-ii 16). The focused fill is the theme's injected
	   gradient; top corners follow the window radius so a rounded era doesn't
	   square off the caption. */
	height: var(--theme-titlebar-height, 20px);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 3px;
	padding: 1px 2px 1px 3px;
	color: var(--w98-title-text, #fff);
	font-size: 11px;
	font-weight: 700;
	cursor: grab;
	touch-action: none;
	user-select: none;
	background: var(--theme-titlebar-gradient, linear-gradient(
		90deg,
		var(--w98-title, #000080) 0%,
		#1084d0 55%,
		var(--w98-title-2, #1084d0) 100%
	));
	border-top-left-radius: var(--star-radius-window, 0px);
	border-top-right-radius: var(--star-radius-window, 0px);
}

.w98-desktop .demo-window:not([data-focused="true"]) .demo-window__bar {
	background: var(--theme-titlebar-gradient-inactive, linear-gradient(
		90deg,
		var(--w98-title-inactive-1, #808080) 0%,
		var(--w98-title-inactive-2, #b5b5b5) 100%
	));
	color: var(--w98-title-text-inactive, #d4d0c8);
}

.w98-desktop .demo-window .demo-window__bar:active {
	cursor: grabbing;
}

.w98-desktop .demo-window .demo-title {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	letter-spacing: 0;
}

/* The title TEXT lives in its own element so nowrap + ellipsis target the text
   (not an anonymous flex item). `min-width:0` lets it clip instead of wrapping
   mid-word or shoving the min/max/close controls off the bar. */
.w98-desktop .demo-window .demo-title__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.demo-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	image-rendering: pixelated;
}

/* Real app icon in the title bar — renders the app's 32×32 pixel-art SVG
   (innerHTML) scaled to the 16px title-bar slot. Overrides the background-image
   approach of the static .demo-icon--* classes for the live, per-app icon. */
.demo-icon--app {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
}
.demo-icon--app > svg {
	width: 16px;
	height: 16px;
	image-rendering: pixelated;
}

/* My Computer icon (mini CRT + base) */
.demo-icon--mycomputer {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='1' y='0' width='14' height='11' fill='%23111111'/><rect x='2' y='1' width='12' height='9' fill='%23c0c0c0'/><rect x='2' y='1' width='12' height='1' fill='%23ffffff'/><rect x='2' y='1' width='1' height='9' fill='%23ffffff'/><rect x='13' y='2' width='1' height='8' fill='%23808080'/><rect x='3' y='9' width='10' height='1' fill='%23808080'/><rect x='3' y='2' width='10' height='7' fill='%23111111'/><rect x='4' y='3' width='8' height='5' fill='%23008080'/><rect x='5' y='4' width='3' height='1' fill='%2300c0c0'/><rect x='5' y='5' width='1' height='1' fill='%2300c0c0'/><rect x='6' y='11' width='4' height='1' fill='%23111111'/><rect x='2' y='12' width='12' height='4' fill='%23111111'/><rect x='3' y='13' width='10' height='2' fill='%23c0c0c0'/><rect x='3' y='13' width='10' height='1' fill='%23ffffff'/><rect x='4' y='14' width='5' height='1' fill='%23404040'/><rect x='11' y='14' width='1' height='1' fill='%2300a000'/></svg>");
}
/* Notepad icon (spiral pad + ruled lines) */
.demo-icon--notepad {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='2' y='2' width='12' height='14' fill='%23111111'/><rect x='3' y='3' width='10' height='12' fill='%23ffffff'/><rect x='3' y='3' width='10' height='2' fill='%23e0e0e0'/><rect x='4' y='0' width='1' height='4' fill='%23707070'/><rect x='7' y='0' width='1' height='4' fill='%23707070'/><rect x='10' y='0' width='1' height='4' fill='%23707070'/><rect x='4' y='0' width='1' height='1' fill='%23111111'/><rect x='7' y='0' width='1' height='1' fill='%23111111'/><rect x='10' y='0' width='1' height='1' fill='%23111111'/><rect x='4' y='7' width='8' height='1' fill='%231111110a0'/><rect x='4' y='9' width='8' height='1' fill='%231111110a0'/><rect x='4' y='11' width='8' height='1' fill='%231111110a0'/><rect x='4' y='13' width='5' height='1' fill='%231111110a0'/></svg>");
}
/* MS Paint icon (palette + brush) */
.demo-icon--paint {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path d='M8 3 C4 3 1.5 5.2 1.5 8.2 c0 3.2 2.8 5.8 6.2 5.8 2 0 2.2-1.2 2.2-2 0-1 .8-1.2 1.8-1.6 1.8-.8 2.8-2 2.8-3.5 0-3.2-3-3.9-6.5-3.9 z' fill='%23deb887' stroke='%23111111' stroke-width='0.8'/><ellipse cx='5' cy='10' rx='1.2' ry='0.9' fill='%23ffffff' stroke='%23111111' stroke-width='0.5'/><circle cx='4.8' cy='5.6' r='1' fill='%23e00000'/><circle cx='7.6' cy='4.6' r='1' fill='%23f0d000'/><circle cx='10.3' cy='5.4' r='1' fill='%23008000'/><circle cx='11.8' cy='7.4' r='1' fill='%231111110d0'/><path d='M14.4 0.8 L9.4 6.8' stroke='%23111111' stroke-width='2'/><path d='M14 1.4 L10.2 6' stroke='%23c08030' stroke-width='1'/><path d='M9.6 6.6 L8.8 7.6' stroke='%23111111' stroke-width='1.6'/><circle cx='8.4' cy='8.2' r='0.8' fill='%23e00000'/></svg>");
}

.demo-controls {
	display: flex;
	gap: 0;
	margin-left: 2px;
}

/* Scoped under `.w98-desktop` (0,2,1) so the token-driven styling BEATS build.ts'
   inline `<style>` `.demo-controls button` (0,1,1) injected AFTER the linked sheet. */
.w98-desktop .demo-controls button {
	width: 16px;
	height: 14px;
	padding: 0;
	margin-left: 2px;
	border: 1px solid var(--star-border, var(--w98-dark, #111111));
	border-radius: var(--star-radius-control, 0px);
	background: var(--star-surface, var(--w98-face, #c0c0c0));
	box-shadow: var(--star-shadow-1,
		inset 1px 1px 0 var(--w98-light, #fff),
		inset -1px -1px 0 var(--w98-shadow, #808080));
	color: var(--star-text, var(--w98-text, #111111));
	font-size: 9px;
	font-weight: 700;
	font-family: "Marlett", "MS Sans Serif", sans-serif;
	cursor: pointer;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		background-color var(--star-dur-fast, 0ms) var(--star-ease, linear),
		box-shadow var(--star-dur-fast, 0ms) var(--star-ease, linear),
		filter var(--star-dur-fast, 0ms) var(--star-ease, linear);
}

.w98-desktop .demo-controls button:first-child {
	margin-left: 0;
}

.w98-desktop .demo-controls button:hover {
	background: var(--star-surface-raised, var(--w98-face-light, #dfdfdf));
}

/* Pressed: bevel eras invert the 3D edge; flat eras dim (GPU-safe filter). */
.w98-desktop .demo-controls button:active {
	filter: brightness(0.9);
}
:root[data-chrome-border="bevel"] .w98-desktop .demo-controls button:active {
	filter: none;
	box-shadow:
		inset 1px 1px 0 var(--star-border, var(--w98-shadow, #808080)),
		inset -1px -1px 0 var(--star-surface-sunken, var(--w98-light, #fff));
}

/* ── ChromeProfile: window-button SHAPE (data-chrome-buttons) ── */
/* pill (win11 / midnight / win98-pill): wider soft chips; close flushes red. */
:root[data-chrome-buttons="pill"] .w98-desktop .demo-controls button {
	width: 30px;
	height: calc(var(--theme-titlebar-height, 20px) - 8px);
}
:root[data-chrome-buttons="pill"] .w98-desktop .demo-controls button:last-child:hover {
	background: var(--star-danger, #c42b1c);
	color: #fff;
	filter: none;
}

/* circle (macOS traffic lights): three colored dots, controls moved LEFT, the
   glyphs hidden until the cluster is hovered. */
:root[data-chrome-titlebar="traffic-lights-left"] .w98-desktop .demo-controls {
	order: -1;
	margin-left: 0;
	margin-right: var(--star-space-2, 8px);
	gap: 8px;
	padding-left: 4px;
}
:root[data-chrome-buttons="circle"] .w98-desktop .demo-controls button {
	width: 12px;
	height: 12px;
	margin-left: 0;
	border-radius: 50%;
	border: 0.5px solid rgba(0, 0, 0, 0.18);
	box-shadow: none;
	color: transparent;
	font-size: 8px;
	font-family: ui-sans-serif, system-ui, sans-serif;
}
:root[data-chrome-buttons="circle"] .w98-desktop .demo-controls button:nth-child(1) { background: #febc2e; }
:root[data-chrome-buttons="circle"] .w98-desktop .demo-controls button:nth-child(2) { background: #28c840; }
:root[data-chrome-buttons="circle"] .w98-desktop .demo-controls button:nth-child(3) { background: #ff5f57; }
:root[data-chrome-buttons="circle"] .w98-desktop .demo-controls:hover button { color: rgba(0, 0, 0, 0.5); }
:root[data-chrome-buttons="circle"] .w98-desktop .demo-controls button:hover { background-color: inherit; }
:root[data-chrome-buttons="circle"] .w98-desktop .demo-controls button:active { filter: brightness(0.85); }
/* center the caption title when the lights sit left (true macOS) */
:root[data-chrome-titlebar="traffic-lights-left"] .w98-desktop .demo-window__bar {
	justify-content: center;
}
:root[data-chrome-titlebar="traffic-lights-left"] .w98-desktop .demo-title {
	flex: 0 1 auto;
	justify-content: center;
	font-weight: 600;
}

/* ---- Menu bar (File / Edit / Help) ---- */
.w98-menubar {
	display: flex;
	gap: 0;
	padding: 1px 2px;
	background: var(--w98-face);
	font-size: 11px;
	border-bottom: 1px solid var(--w98-face);
}

.w98-menubar--paint {
	grid-column: 2;
}

.w98-menubar__root {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 18px;
}

.w98-menubar button {
	border: 0;
	background: transparent;
	padding: 2px 6px;
	font: inherit;
	cursor: pointer;
	color: var(--w98-text);
	text-align: left;
}

.w98-menubar .starplane-menubar-item {
	position: relative;
	white-space: nowrap;
}

.w98-menubar button:hover,
.w98-menubar .w98-menubar__open {
	background: var(--w98-menu-blue);
	color: var(--w98-light);
}

.w98-menubar__menu {
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
	z-index: 1000;
	min-width: 138px;
	padding: 2px;
	background: var(--w98-face);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow),
		1px 1px 0 rgba(0, 0, 0, 0.35);
	color: var(--w98-text);
}

.w98-menubar__menu .w98-menubar__menu {
	top: -3px;
	left: calc(100% - 3px);
}

.w98-menubar__menu .starplane-menubar-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 18px;
	padding: 2px 18px 2px 18px;
	color: var(--w98-text);
}

.w98-menubar__menu .starplane-menubar-item::before {
	content: "";
	position: absolute;
	left: 5px;
	width: 7px;
	height: 7px;
}

.w98-menubar__menu .starplane-menubar-checked::before {
	content: "\2713";
	top: 2px;
	font-size: 11px;
}

.w98-menubar__menu .starplane-menubar-item[aria-haspopup="true"]::after {
	content: "\25B6";
	position: absolute;
	right: 5px;
	font-size: 9px;
}

.w98-menubar__menu .starplane-menubar-item:hover,
.w98-menubar__menu .w98-menubar__open {
	background: var(--w98-menu-blue);
	color: var(--w98-light);
}

.w98-menubar__menu .starplane-menubar-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}
.w98-menubar__menu .starplane-menubar-accelerator {
	margin-left: auto;
	padding-left: 24px;
	color: inherit;
	opacity: 0.85;
}
.w98-menubar__menu .starplane-menubar-chevron {
	display: none; /* w98 uses ::after triangle for haspopup */
}

.w98-menubar__menu .starplane-menubar-separator {
	height: 0;
	margin: 3px 6px;
	border-top: 1px solid var(--w98-shadow);
	border-bottom: 1px solid var(--w98-light);
	pointer-events: none;
}

.w98-menubar__disabled {
	color: var(--w98-shadow);
	text-shadow: 1px 1px 0 var(--w98-light);
}

.w98-menubar .underline {
	text-decoration: underline;
}

/* ---- Body slots ----
   Scoped under `.w98-desktop .demo-window` (0,3,0) to beat build.ts' inline
   `.demo-window__body { padding:4px }` (0,1,0). The client area carries a
   uniform 6px inset — the authentic Win98 window-body gutter between the raised
   frame and the app content — and reads as the recessed face, not a flat panel. */
.w98-desktop .demo-window .demo-window__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--w98-face);
	padding: 6px;
	font-size: 11px;
}

.w98-desktop .demo-window .demo-window__body > * {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
}

/* Embeds (iframe games) stay full-bleed — override the 6px gutter back to 0. */
.w98-desktop .demo-window .demo-window__body--embed {
	padding: 0;
}

/* Native Solid mods mount one root under this shared host. Keep that root
   stretched exactly like AppPlan `.starplane-app` content. */
.native-frame-wrap {
	display: flex;
	flex-direction: column;
}

.native-frame-wrap > * {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
}

/* ---- Embed body (DOOM, 2048, js-dos games) ----
   An embed window's body is a sandboxed iframe. It must fill the window
   EDGE-TO-EDGE: zero the body padding (the served index.html sets a 4px body
   padding for the chrome — drop it here for embeds so the iframe is full-bleed)
   and let the frame wrap + iframe own 100%×100%. Any side-space the GAME shows
   (e.g. the 2048 board's own centering) is internal to the embedded HTML and is
   NOT the shell's margin — the shell's iframe is flush to the window edge. */
.demo-window__body--embed {
	padding: 0;
}
.demo-window__body--embed > .embed-frame-wrap {
	flex: 1;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}
.embed-frame {
	flex: 1;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* =========================================================
   My Computer — explorer layout
   ========================================================= */
.mycomp-body {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	min-height: 290px;
	background: var(--w98-face);
	padding: 0;
}

.mycomp-toolbar {
	display: flex;
	align-items: center;
	gap: 1px;
	padding: 2px 4px;
	border-bottom: 1px solid var(--w98-shadow);
	box-shadow: 0 1px 0 var(--w98-light);
}

.mycomp-toolbar .tb-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 2px 4px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--w98-text);
	font-size: 11px;
	cursor: pointer;
	min-width: 42px;
}

.mycomp-toolbar .tb-btn:hover {
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow);
}

.mycomp-toolbar .tb-glyph {
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-position: center;
	image-rendering: pixelated;
}

.mycomp-toolbar .tb-glyph--back {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' shape-rendering='crispEdges'><polygon points='2,11 10,3 10,7 20,7 20,15 10,15 10,19' fill='%23111111'/><polygon points='4,11 9,6 9,8 19,8 19,14 9,14 9,16' fill='%23111111080'/><polygon points='5,11 9,7 9,9 12,9 12,13 9,13 9,15' fill='%233050c8'/></svg>");
}
.mycomp-toolbar .tb-glyph--up {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' shape-rendering='crispEdges'><rect x='1' y='11' width='8' height='2' fill='%23111111'/><rect x='1' y='13' width='20' height='7' fill='%23111111'/><rect x='2' y='12' width='6' height='1' fill='%23dc9e00'/><rect x='2' y='14' width='18' height='5' fill='%23ffd24a'/><rect x='2' y='14' width='18' height='1' fill='%23ffe9a0'/><rect x='3' y='18' width='17' height='1' fill='%23c88a00'/><polygon points='14,1 8,7 11,7 11,12 17,12 17,7 20,7' fill='%23111111'/><polygon points='14,3 10,7 12,7 12,11 16,11 16,7 18,7' fill='%23111111080'/></svg>");
}
.mycomp-toolbar .tb-glyph--view {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' shape-rendering='crispEdges'><rect x='2' y='3' width='18' height='16' fill='%23111111'/><rect x='3' y='4' width='16' height='14' fill='%23ffffff'/><rect x='3' y='4' width='16' height='2' fill='%230a246a'/><rect x='17' y='4' width='1' height='1' fill='%23c0c0c0'/><rect x='3' y='6' width='16' height='2' fill='%23c0c0c0'/><rect x='3' y='6' width='16' height='1' fill='%23ffffff'/><rect x='4' y='9' width='2' height='2' fill='%23111111080'/><rect x='7' y='9' width='10' height='1' fill='%23808080'/><rect x='4' y='12' width='2' height='2' fill='%23dc9e00'/><rect x='7' y='12' width='9' height='1' fill='%23808080'/><rect x='4' y='15' width='2' height='2' fill='%23008080'/><rect x='7' y='15' width='10' height='1' fill='%23808080'/></svg>");
}

.mycomp-toolbar .tb-sep {
	width: 1px;
	height: 22px;
	margin: 0 3px;
	background: var(--w98-shadow);
	box-shadow: 1px 0 0 var(--w98-light);
}

.mycomp-address {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px 4px;
	border-bottom: 1px solid var(--w98-shadow);
	box-shadow: 0 1px 0 var(--w98-light);
	font-size: 11px;
}

.mycomp-address .addr-field {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	padding: 2px 4px;
	background: var(--w98-light);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow),
		inset -1px -1px 0 var(--w98-face-light);
}

.mycomp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 4px;
	padding: 12px;
	background: var(--w98-light);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow),
		inset -1px -1px 0 var(--w98-face-light);
	margin: 2px;
	overflow: auto;
}

.mycomp-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 4px;
	font-size: 11px;
	cursor: pointer;
	color: var(--w98-text);
	text-align: center;
}

.mycomp-tile:hover .mycomp-tile__label {
	background: var(--w98-menu-blue);
	color: var(--w98-light);
}

.mycomp-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
}

.mycomp-grid--compact .mycomp-tile__icon {
	width: 24px;
	height: 24px;
}

.mycomp-tile[data-drop-source="true"] {
	opacity: 0.55;
}

.mycomp-tile__icon {
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	image-rendering: pixelated;
}

.mycomp-tile__icon--kernel {
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: none;
}

.mycomp-tile__icon--kernel svg {
	width: 32px;
	height: 32px;
	image-rendering: pixelated;
}

.mycomp-tile__icon--floppy {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'><rect x='3' y='3' width='26' height='26' fill='%23111111000'/><rect x='4' y='4' width='24' height='24' fill='%23606060' stroke='%23111111'/><rect x='8' y='4' width='16' height='10' fill='%23111111000'/><rect x='10' y='5' width='12' height='6' fill='%23808080'/><rect x='17' y='4' width='3' height='10' fill='%23c0c0c0'/><rect x='10' y='20' width='12' height='8' fill='%23e0e0e0' stroke='%23111111'/><rect x='12' y='22' width='8' height='1' fill='%23808080'/></svg>");
}
.mycomp-tile__icon--hd {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'><rect x='3' y='8' width='26' height='16' fill='%23c0c0c0' stroke='%23111111'/><rect x='3' y='8' width='26' height='4' fill='%23a0a0a0'/><rect x='3' y='20' width='26' height='4' fill='%23a0a0a0'/><circle cx='25' cy='15' r='1' fill='%2300ff00'/><rect x='6' y='14' width='12' height='2' fill='%23808080'/><rect x='6' y='18' width='12' height='2' fill='%23808080'/></svg>");
}
.mycomp-tile__icon--cd {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'><rect x='3' y='10' width='26' height='12' fill='%23c0c0c0' stroke='%23111111'/><rect x='3' y='10' width='26' height='3' fill='%23a0a0a0'/><circle cx='16' cy='16' r='2' fill='%23111111'/><circle cx='25' cy='17' r='1' fill='%23ffff00'/></svg>");
}
.mycomp-tile__icon--cpanel {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'><rect x='2' y='4' width='28' height='24' fill='%23111111'/><rect x='3' y='5' width='26' height='22' fill='%23c0c0c0'/><rect x='3' y='5' width='26' height='1' fill='%23ffffff'/><rect x='3' y='5' width='1' height='22' fill='%23ffffff'/><rect x='28' y='6' width='1' height='21' fill='%23808080'/><rect x='4' y='26' width='25' height='1' fill='%23808080'/><rect x='6' y='8' width='12' height='8' fill='%23111111'/><rect x='7' y='9' width='10' height='6' fill='%23ffffff'/><path d='M9 14 a4 4 0 0 1 6 0' fill='none' stroke='%23808080'/><path d='M12 14 L14.4 10.8' stroke='%23e00000'/><rect x='20' y='8' width='6' height='8' fill='%23808080'/><rect x='20' y='8' width='6' height='1' fill='%23404040'/><rect x='22' y='10' width='2' height='3' fill='%23111111'/><rect x='21' y='10' width='4' height='2' fill='%23e00000'/><rect x='6' y='19' width='14' height='2' fill='%23808080'/><rect x='6' y='19' width='14' height='1' fill='%23404040'/><rect x='10' y='17' width='3' height='5' fill='%23c0c0c0'/><rect x='10' y='17' width='3' height='1' fill='%23ffffff'/><rect x='10' y='17' width='1' height='5' fill='%23ffffff'/><rect x='12' y='17' width='1' height='5' fill='%23404040'/><rect x='10' y='21' width='3' height='1' fill='%23404040'/><rect x='22' y='19' width='3' height='3' fill='%2300a000'/><rect x='22' y='19' width='3' height='1' fill='%23004000'/><rect x='6' y='24' width='8' height='1' fill='%23404040'/><rect x='16' y='24' width='4' height='1' fill='%23404040'/></svg>");
}
.mycomp-tile__icon--printers {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'><rect x='7' y='2' width='18' height='9' fill='%23111111'/><rect x='8' y='3' width='16' height='7' fill='%23ffffff'/><rect x='10' y='5' width='12' height='1' fill='%23808080'/><rect x='10' y='7' width='12' height='1' fill='%23808080'/><rect x='2' y='10' width='28' height='11' fill='%23111111'/><rect x='3' y='11' width='26' height='9' fill='%23c0c0c0'/><rect x='3' y='11' width='26' height='1' fill='%23ffffff'/><rect x='3' y='11' width='1' height='9' fill='%23ffffff'/><rect x='28' y='12' width='1' height='8' fill='%23808080'/><rect x='4' y='19' width='25' height='1' fill='%23808080'/><rect x='5' y='13' width='3' height='2' fill='%23808080'/><rect x='24' y='13' width='2' height='2' fill='%2300a000'/><rect x='6' y='21' width='20' height='9' fill='%23111111'/><rect x='7' y='22' width='18' height='7' fill='%23dfdfdf'/><rect x='8' y='21' width='16' height='6' fill='%23111111'/><rect x='9' y='20' width='14' height='6' fill='%23ffffff'/><rect x='11' y='22' width='10' height='1' fill='%23111111080'/><rect x='11' y='24' width='8' height='1' fill='%23808080'/></svg>");
}
.mycomp-tile__icon--network {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'><path d='M8 16 V28 H24 V25' fill='none' stroke='%23111111' stroke-width='4'/><path d='M8 16 V28 H24 V25' fill='none' stroke='%23e8b400' stroke-width='2'/><rect x='1' y='1' width='14' height='12' fill='%23111111'/><rect x='2' y='2' width='12' height='10' fill='%23c0c0c0'/><rect x='2' y='2' width='12' height='1' fill='%23ffffff'/><rect x='2' y='2' width='1' height='10' fill='%23ffffff'/><rect x='13' y='3' width='1' height='9' fill='%23808080'/><rect x='3' y='11' width='10' height='1' fill='%23808080'/><rect x='4' y='4' width='8' height='6' fill='%23111111'/><rect x='5' y='5' width='6' height='4' fill='%23008080'/><rect x='5' y='5' width='2' height='1' fill='%2300c0c0'/><rect x='4' y='13' width='8' height='3' fill='%23111111'/><rect x='5' y='14' width='6' height='1' fill='%23c0c0c0'/><rect x='17' y='10' width='14' height='12' fill='%23111111'/><rect x='18' y='11' width='12' height='10' fill='%23c0c0c0'/><rect x='18' y='11' width='12' height='1' fill='%23ffffff'/><rect x='18' y='11' width='1' height='10' fill='%23ffffff'/><rect x='29' y='12' width='1' height='9' fill='%23808080'/><rect x='19' y='20' width='10' height='1' fill='%23808080'/><rect x='20' y='13' width='8' height='6' fill='%23111111'/><rect x='21' y='14' width='6' height='4' fill='%23008080'/><rect x='21' y='14' width='2' height='1' fill='%2300c0c0'/><rect x='20' y='22' width='8' height='3' fill='%23111111'/><rect x='21' y='23' width='6' height='1' fill='%23c0c0c0'/></svg>");
}

.mycomp-tile__icon--kernel.mycomp-tile__icon--floppy,
.mycomp-tile__icon--kernel.mycomp-tile__icon--hd,
.mycomp-tile__icon--kernel.mycomp-tile__icon--cd {
	background-image: none;
}

.mycomp-tile__label {
	padding: 0 2px;
	line-height: 1.2;
	max-width: 92px;
	word-break: break-word;
}

.mycomp-status {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
}

.mycomp-status .status-cell {
	flex: 1;
	padding: 2px 6px;
	background: var(--w98-face);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow),
		inset -1px -1px 0 var(--w98-light);
	font-size: 11px;
}

/* =========================================================
   Notepad
   ========================================================= */
.notepad-body {
	display: flex;
	flex-direction: column;
	background: var(--w98-face);
	padding: 0;
	min-height: 220px;
}

.notepad-area {
	flex: 1;
	margin: 2px;
	padding: 2px 4px;
	background: var(--w98-light);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow),
		inset -1px -1px 0 var(--w98-face-light);
	font-family: "Lucida Console", "Courier New", monospace;
	font-size: 12px;
	line-height: 1.3;
	color: var(--w98-text);
	white-space: pre;
	overflow: auto;
	min-height: 160px;
	caret-color: var(--w98-text);
	outline: 0;
}

.notepad-area::after {
	content: "_";
	display: inline-block;
	color: var(--w98-text);
}

/* =========================================================
   MS Paint
   ========================================================= */
.paint-body {
	display: grid;
	grid-template-columns: 36px 1fr;
	grid-template-rows: 1fr auto;
	gap: 0;
	background: var(--w98-face);
	padding: 0;
	height: 100%;
	min-height: 240px;
}

.paint-tools {
	grid-row: 1 / span 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-content: start;
	gap: 1px;
	padding: 3px 2px;
	border-right: 1px solid var(--w98-shadow);
	box-shadow: 1px 0 0 var(--w98-light);
}

.paint-tools .ptool {
	width: 16px;
	height: 16px;
	padding: 0;
	border: 1px solid var(--w98-dark);
	background: var(--w98-face);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow);
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	image-rendering: pixelated;
}

.paint-tools .ptool:hover {
	background-color: var(--w98-face-light);
}

.paint-tools .ptool[data-active="true"] {
	box-shadow:
		inset -1px -1px 0 var(--w98-light),
		inset 1px 1px 0 var(--w98-shadow);
	background-color: var(--w98-face-dark);
}

.ptool--pencil {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'><polygon points='2,12 4,10 11,3 12,4 5,11 3,13' fill='%23ffd54f' stroke='%23111111'/></svg>");
}
.ptool--brush {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'><rect x='3' y='3' width='5' height='5' fill='%23808080' stroke='%23111111'/><polygon points='8,3 11,1 13,3 11,5' fill='%238b4513' stroke='%23111111'/><rect x='1' y='9' width='4' height='3' fill='%23111111' /></svg>");
}
.ptool--eraser {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'><rect x='3' y='4' width='8' height='6' fill='%23ffffff' stroke='%23111111'/><rect x='3' y='4' width='8' height='2' fill='%23ff5577'/></svg>");
}
.ptool--fill {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'><polygon points='2,9 7,2 12,7 7,12' fill='%23ffffff' stroke='%23111111'/><rect x='8' y='9' width='4' height='4' fill='%231111110ff'/></svg>");
}
.ptool--text {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'><text x='2' y='11' font-family='Times New Roman' font-size='11' font-weight='700' fill='%23111111'>A</text></svg>");
}
.ptool--line {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'><line x1='2' y1='12' x2='12' y2='2' stroke='%23111111' stroke-width='1.5'/></svg>");
}
.ptool--rect {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'><rect x='2' y='3' width='10' height='8' fill='none' stroke='%23111111'/></svg>");
}
.ptool--ellipse {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'><ellipse cx='7' cy='7' rx='5' ry='4' fill='none' stroke='%23111111'/></svg>");
}

.paint-canvas {
	margin: 2px;
	background: var(--w98-light);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow),
		inset -1px -1px 0 var(--w98-face-light);
	overflow: hidden;
	position: relative;
}

.paint-canvas svg {
	display: block;
	width: 100%;
	height: 100%;
}

.paint-palette {
	grid-column: 2;
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px 4px;
	border-top: 1px solid var(--w98-shadow);
	box-shadow: 0 1px 0 var(--w98-light);
}

.paint-swatch-stack {
	width: 24px;
	height: 22px;
	position: relative;
	flex-shrink: 0;
}

.paint-swatch-stack .swatch {
	position: absolute;
	width: 14px;
	height: 14px;
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow);
}

.paint-swatch-stack .swatch--fg {
	top: 0;
	left: 0;
	background: #111111;
	z-index: 2;
}
.paint-swatch-stack .swatch--bg {
	top: 7px;
	left: 9px;
	background: #fff;
}

.paint-colors {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-auto-flow: column;
	gap: 1px;
}

.paint-colors .color {
	width: 14px;
	height: 11px;
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow);
	cursor: pointer;
	padding: 0;
}

/* =========================================================
   Taskbar
   ========================================================= */
.w98-taskbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 28px;
	display: flex;
	align-items: stretch;
	z-index: 100000;
	padding: 2px;
	gap: 3px;
	background: var(--star-chrome-taskbar-bg,
		linear-gradient(180deg,
			color-mix(in srgb, var(--star-surface-raised, #ffffff) 72%, transparent),
			color-mix(in srgb, var(--star-surface, #c0c0c0) 86%, transparent)),
		color-mix(in srgb, var(--star-bg, #0a0806) 10%, transparent));
	border-top: var(--star-chrome-taskbar-border-top, 1px solid color-mix(in srgb, var(--star-surface-raised, #ffffff) 62%, var(--star-border, #808080)));
	box-shadow: var(--star-chrome-taskbar-shadow,
		0 -1px 0 color-mix(in srgb, var(--star-bg, #0a0806) 18%, transparent),
		var(--star-taskbar-shadow, inset 0 1px 0 var(--w98-face-light, #dfdfdf)));
}
.w98-taskbar-root {
	display: contents;
}

.starbox-menu-bar__trigger {
	min-height: 24px;
	padding: 0 var(--star-space-2, 8px);
	border-radius: var(--star-radius-sm, 8px);
	transition:
		background-color var(--star-mo-snap, var(--star-dur-fast, 90ms)) var(--star-mo-settle-curve, var(--star-ease, ease)),
		transform var(--star-mo-snap, var(--star-dur-fast, 90ms)) var(--star-mo-settle-curve, var(--star-ease, ease));
}

.starbox-menu-bar__trigger:hover,
.starbox-menu-bar__trigger:focus-visible {
	background: color-mix(in srgb, var(--star-accent, #f5641e) 14%, transparent);
	outline: none;
}

.starbox-menu-bar__trigger:active {
	transform: translateY(1px);
}

.starbox-status-cluster {
	gap: var(--star-space-2, 8px);
	color: var(--star-text, #111111);
}

.starbox-status-cluster [data-status-kind] {
	display: inline-flex;
	align-items: center;
	gap: var(--star-space-1, 4px);
	min-height: 22px;
	padding: 0 var(--star-space-2, 8px);
	border-radius: var(--star-radius-sm, 8px);
	background: color-mix(in srgb, var(--star-surface-raised, #ffffff) 46%, transparent);
}

.starbox-status-cluster__model-chip {
	color: var(--star-accent-ink, var(--star-accent, #f5641e));
	background: color-mix(in srgb, var(--star-accent, #f5641e) 12%, transparent);
}

.star-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent);
}

.star-dot--running {
	color: var(--star-ok, #16a34a);
	background: currentColor;
}

.star-dot--idle {
	color: var(--star-text-muted, #6b7177);
	background: currentColor;
}

/* ── ChromeProfile: taskbar STYLE (data-chrome-taskbar-style) ── */
/* acrylic: translucent, blurred Mica bar (win11 / midnight). The bg is made
   semi-opaque so the blur reads; --star-surface fills the tint. */
:root[data-chrome-taskbar-style="acrylic"] .w98-taskbar {
	background: var(--star-chrome-acrylic-taskbar-bg, color-mix(in srgb, var(--star-surface, #c0c0c0) 72%, transparent));
	border-top: var(--star-chrome-acrylic-taskbar-border-top, 1px solid color-mix(in srgb, var(--star-text, #111111) 8%, transparent));
	box-shadow: var(--star-chrome-acrylic-taskbar-shadow, 0 -1px 0 rgba(255, 255, 255, 0.06));
	/* win11 CENTERS the Start + app-icon cluster on the full-width bar; the tray
	   (clock/indicators) floats at the right edge. */
	justify-content: center;
}
:root[data-chrome-backdrop="acrylic"][data-chrome-taskbar-style="acrylic"] .w98-taskbar,
:root[data-chrome-backdrop="vibrancy"][data-chrome-taskbar-style="acrylic"] .w98-taskbar {
	backdrop-filter: var(--star-chrome-acrylic-taskbar-filter, blur(24px) saturate(1.35));
	-webkit-backdrop-filter: var(--star-chrome-acrylic-taskbar-filter, blur(24px) saturate(1.35));
}
:root[data-chrome-taskbar-style="acrylic"] .w98-tasks {
	flex: 0 1 auto;
}
:root[data-chrome-taskbar-style="acrylic"] .w98-divider {
	display: none; /* no Start→tasks separator in the centered win11 cluster */
}
:root[data-chrome-taskbar-style="acrylic"] .w98-tray {
	position: absolute;
	right: 8px;
	top: auto;
	bottom: 3px;
	transform: none;
	margin-left: 0;
}
/* win11 task buttons read as centered icon chips, not labeled bars */
:root[data-chrome-taskbar-style="acrylic"] .w98-tasks button {
	min-width: 0;
	max-width: none;
	width: 40px;
	height: 22px;
	justify-content: center;
	padding: 0;
}
:root[data-chrome-taskbar-style="acrylic"] .w98-tasks .task-label {
	display: none;
}
/* dock: a floating, centered, rounded magnify-bar (macOS / star-os signature). */
:root[data-chrome-taskbar-style="dock"] .w98-taskbar {
	left: 0;
	right: 0;
	bottom: 14px;
	margin: 0 auto;
	transform: none;
	width: max-content;
	max-width: calc(100vw - 24px);
	height: 66px;
	align-items: flex-end;
	padding: 7px 11px;
	gap: 4px;
	overflow: visible; /* let icon tiles magnify ABOVE the dock */
	/* P3 dock recipe (theme-macos26.css:1466-1485): heavy-blur glass pill +
	   skylight rim + deep drop. Bg derived translucent from --star-surface. */
	background: var(--star-chrome-dock-bg, color-mix(in srgb, var(--star-surface, #c0c0c0) 50%, transparent));
	border: var(--star-chrome-dock-border, 1px solid color-mix(in srgb, var(--star-text, #fff) 14%, transparent));
	border-radius: var(--star-chrome-dock-radius, 26px);
	box-shadow: var(--star-chrome-dock-shadow,
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 0 0 0.5px rgba(255, 255, 255, 0.28),
		var(--star-shadow-3, 0 24px 60px rgba(0, 0, 0, 0.35)));
}
:root[data-chrome-backdrop="vibrancy"][data-chrome-taskbar-style="dock"] .w98-taskbar,
:root[data-chrome-backdrop="acrylic"][data-chrome-taskbar-style="dock"] .w98-taskbar {
	backdrop-filter: var(--star-chrome-dock-filter, blur(24px) saturate(1.35));
	-webkit-backdrop-filter: var(--star-chrome-dock-filter, blur(24px) saturate(1.35));
}
/* ── A real macOS-style DOCK ──
   Reuses the existing window state (the .w98-tasks open-window buttons) but
   renders each as a magnifying icon TILE: icon-only, rounded, with a hover lift
   (GPU transform) + a running-indicator dot. The start button becomes the
   leading launcher tile; the tray rides at the trailing edge. */
:root[data-chrome-taskbar-style="dock"] .w98-tasks {
	flex: 0 1 auto;
	gap: 6px;
	align-items: flex-end;
	overflow: visible;
}
:root[data-chrome-taskbar-style="dock"] .w98-start,
:root[data-chrome-taskbar-style="dock"] .w98-tasks button {
	position: relative;
	width: 52px;
	height: 52px;
	min-width: 0;
	max-width: none;
	padding: 2px;
	flex-direction: column;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
	transform-origin: bottom center;
	transition:
		transform var(--star-dur-base, 180ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
/* the icon glyph itself is the squircle tile (with its own depth), macOS-style */
:root[data-chrome-taskbar-style="dock"] .w98-tasks .task-icon,
:root[data-chrome-taskbar-style="dock"] .w98-tasks .task-icon--app > svg,
:root[data-chrome-taskbar-style="dock"] .w98-start .w98-flag {
	width: 44px;
	height: 44px;
	border-radius: 23%;
	filter: drop-shadow(0 1px 2px rgba(44, 33, 24, 0.20));
}
:root[data-chrome-taskbar-style="dock"] .w98-start:hover,
:root[data-chrome-taskbar-style="dock"] .w98-tasks button:hover {
	transform: translateY(-13px) scale(1.32);
	background: transparent;
}
:root[data-chrome-taskbar-style="dock"] .w98-tasks .task-label {
	display: none;
}
:root[data-chrome-taskbar-style="dock"] .w98-start {
	font-size: 0; /* hide the "Start" word — the flag IS the launcher icon */
	justify-content: center;
}
:root[data-chrome-taskbar-style="dock"] .w98-start .w98-flag {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--star-surface-raised, var(--w98-face-light, #dfdfdf));
}
:root[data-chrome-taskbar-style="dock"] .w98-start .w98-flag::before {
	top: 8px;
	border-left-width: 15px;
	border-right-width: 15px;
	border-bottom-width: 15px;
}
:root[data-chrome-taskbar-style="dock"] .w98-start .w98-flag::after {
	bottom: 8px;
	border-left-width: 15px;
	border-right-width: 15px;
	border-top-width: 15px;
}
/* running-window indicator dot under each open-window tile (macOS dock dot) */
:root[data-chrome-taskbar-style="dock"] .w98-tasks button::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: color-mix(in srgb, var(--star-text, #111111) 32%, transparent);
}
:root[data-chrome-taskbar-style="dock"] .w98-tasks button[data-active="true"]::after {
	background: var(--star-accent, var(--w98-title, #000080));
}
/* dock keeps only launcher + app tiles; the tray cluster relocates top-right. */
:root[data-chrome-taskbar-style="dock"] .w98-divider {
	display: none;
}
:root[data-chrome-taskbar-style="dock"] .w98-tray {
	position: fixed;
	top: 10px;
	right: 12px;
	z-index: 100001;
	height: 28px;
	margin-left: 0;
	padding: 4px 8px;
	gap: 7px;
		border: var(--star-chrome-floating-tray-border, 1px solid color-mix(in srgb, var(--star-text, #111111) 14%, transparent));
		border-radius: var(--star-chrome-floating-tray-radius, var(--star-radius-control, 6px));
		background: var(--star-chrome-floating-tray-bg, color-mix(in srgb, var(--star-surface, #c0c0c0) 72%, transparent));
		box-shadow: var(--star-chrome-floating-tray-shadow, var(--star-shadow-2, 0 10px 28px rgba(0, 0, 0, 0.22)));
}
:root[data-chrome-backdrop="vibrancy"][data-chrome-taskbar-style="dock"] .w98-tray,
:root[data-chrome-backdrop="acrylic"][data-chrome-taskbar-style="dock"] .w98-tray {
	backdrop-filter: var(--star-chrome-floating-tray-filter, blur(18px) saturate(1.2));
	-webkit-backdrop-filter: var(--star-chrome-floating-tray-filter, blur(18px) saturate(1.2));
}

/* menubar: a thin, flat GLOBAL menu bar pinned to the TOP (NeXT / Apple II).
   Strictly scoped to data-chrome-taskbar-style="menubar" — the 5 bottom-bar
   themes are untouched. The Start menu drops DOWNWARD from under the bar, and a
   maximized window starts below it. */
:root[data-chrome-taskbar-style="menubar"] .w98-taskbar {
	top: 0;
	bottom: auto;
	height: 22px;
	align-items: center;
	border-top: 0;
	border-bottom: 1px solid var(--star-border, var(--w98-dark, #111111));
	box-shadow: 0 1px 0 var(--star-surface-raised, rgba(0, 0, 0, 0.15));
}
:root[data-chrome-taskbar-style="menubar"] .w98-startmenu {
	top: 22px;
	bottom: auto;
	transform-origin: top left;
}
:root[data-chrome-taskbar-style="menubar"] .w98-tray {
	top: 2px;
	bottom: auto;
	right: 4px;
}
:root[data-chrome-taskbar-style="menubar"] .demo-window--maximized {
	inset: 22px 0 0 0 !important;
}

.w98-start {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 22px;
	padding: 0 6px 0 3px;
	font-weight: 700;
	font-size: 11px;
	color: var(--star-text, var(--w98-text, #111111));
	background: var(--star-chrome-start-bg, var(--star-surface, var(--w98-face, #c0c0c0)));
	border: var(--star-chrome-start-border, 1px solid var(--star-border, var(--w98-dark, #111111)));
	border-radius: var(--star-chrome-start-radius, var(--star-radius-control, 0px));
	box-shadow: var(--star-chrome-start-shadow, var(--star-shadow-1,
		inset 1px 1px 0 var(--w98-light, #fff),
		inset -1px -1px 0 var(--w98-shadow, #808080)));
	cursor: pointer;
	font-family: inherit;
	transition:
		background-color var(--star-dur-fast, 0ms) var(--star-ease, linear),
		box-shadow var(--star-dur-fast, 0ms) var(--star-ease, linear),
		transform var(--star-mo-snap, var(--star-dur-fast, 90ms)) var(--star-mo-settle-curve, var(--star-ease, ease));
}

.w98-start[data-open="true"] {
	background: var(--star-surface-raised, var(--w98-face-light, #dfdfdf));
}
:root[data-chrome-border="bevel"] .w98-start[data-open="true"] {
	box-shadow:
		inset 1px 1px 0 var(--star-border, var(--w98-shadow, #808080)),
		inset -1px -1px 0 var(--star-surface-sunken, var(--w98-light, #fff));
}

.w98-start:hover {
	background: var(--star-surface-raised, var(--w98-face-light, #dfdfdf));
	transform: translateY(-1px);
}

.w98-start:active {
	transform: translateY(0);
}
/* flat eras: the start button gets an accent tint on hover, not a bevel chip */
:root[data-chrome-border="shadow"] .w98-start:hover,
:root[data-chrome-border="hairline"] .w98-start:hover,
:root[data-chrome-border="none"] .w98-start:hover {
	background: color-mix(in srgb, var(--star-accent, #000080) 22%, transparent);
}
/* DOCK mode: the launcher is an ICON (the rounded bipyramid flag), not the flat-era
   Start button — so the accent-tint SQUARE backplate above renders as an ugly orange
   square behind the rounded flag on hover (operator: "shitty shadow"). Suppress it;
   the lift+scale IS the hover affordance. Must come AFTER the flat-era rules to win. */
:root[data-chrome-taskbar-style="dock"] .w98-start:hover {
	background: transparent;
}

/* Star OS floating bipyramid launcher mark. */
.w98-flag {
	display: inline-block;
	width: 17px;
	height: 15px;
	flex-shrink: 0;
	position: relative;
	color: var(--star-accent, var(--w98-title, #000080));
	filter: drop-shadow(1px 1px 0 var(--star-surface-sunken, var(--w98-light, #fff)));
}
.w98-flag::before,
.w98-flag::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
}
.w98-flag::before {
	top: 1px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid currentColor;
}
.w98-flag::after {
	bottom: 1px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid color-mix(in srgb, currentColor 72%, var(--star-surface-sunken, #fff));
}

.w98-divider {
	width: 1px;
	height: 22px;
	background: var(--w98-shadow);
	box-shadow: 1px 0 0 var(--w98-light);
	margin: 0 3px;
	align-self: center;
}

.w98-tasks {
	display: flex;
	flex: 1;
	gap: 3px;
	min-width: 0;
	overflow: hidden;
	align-items: center;
}

.w98-tasks button {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 6px;
	min-width: 130px;
	max-width: 180px;
	font-size: 11px;
	color: var(--star-text, var(--w98-text, #111111));
	background: var(--star-chrome-task-button-bg, var(--star-surface, var(--w98-face, #c0c0c0)));
	border: var(--star-chrome-task-button-border, 1px solid var(--star-border, var(--w98-dark, #111111)));
	border-radius: var(--star-chrome-task-button-radius, var(--star-radius-control, 0px));
	box-shadow: var(--star-chrome-task-button-shadow, var(--star-shadow-1,
		inset 1px 1px 0 var(--w98-light, #fff),
		inset -1px -1px 0 var(--w98-shadow, #808080)));
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-shrink: 1;
	font-family: inherit;
	transition:
		background-color var(--star-dur-fast, 0ms) var(--star-ease, linear),
		box-shadow var(--star-dur-fast, 0ms) var(--star-ease, linear),
		transform var(--star-mo-snap, var(--star-dur-fast, 90ms)) var(--star-mo-settle-curve, var(--star-ease, ease));
}

.w98-tasks button:hover {
	background: var(--star-surface-raised, var(--w98-face-light, #dfdfdf));
	transform: translateY(-1px);
}

.w98-tasks button:active {
	transform: translateY(0);
}

.w98-tasks button[data-active="true"] {
	background: var(--star-surface-raised, var(--w98-face-light, #dfdfdf));
}
/* win98/NeXT keep the dithered "pressed" hatch + inverted bevel on the active task. */
:root[data-chrome-border="bevel"] .w98-tasks button[data-active="true"] {
	background-image:
		repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.55) 0 1px,
			transparent 1px 2px
		);
	box-shadow:
		inset 1px 1px 0 var(--star-border, var(--w98-shadow, #808080)),
		inset -1px -1px 0 var(--star-surface-sunken, var(--w98-light, #fff));
}
/* flat eras: running/active state is shown ONLY by the cadmium diamond dot below —
 * no underline keyline (operator: keep just the dot, colored when active). */

.w98-tasks .task-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	image-rendering: pixelated;
}

/* Real app icon in the taskbar button — renders the app's 32×32 pixel-art SVG
   (innerHTML) scaled to the 14px taskbar slot. */
.w98-tasks .task-icon--app {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
}
.w98-tasks .task-icon--app > svg {
	width: 14px;
	height: 14px;
	image-rendering: pixelated;
}

.w98-tasks .task-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.w98-tray {
	position: absolute;
	right: 2px;
	bottom: 3px;
	z-index: 100001;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 6px;
	margin-left: 3px;
	background: var(--star-chrome-tray-bg, color-mix(in srgb, var(--star-surface, #c0c0c0) 42%, transparent));
	border: var(--star-chrome-tray-border, 1px solid var(--star-border, var(--w98-dark, #111111)));
	border-radius: var(--star-chrome-tray-radius, var(--star-radius-control, 0px));
	/* SUNKEN bezel for the tray on bevel eras; flat eras drop the frame below. */
	box-shadow: var(--star-chrome-tray-shadow,
		inset 1px 1px 0 var(--star-border, var(--w98-shadow, #808080)),
		inset -1px -1px 0 var(--star-surface-sunken, var(--w98-light, #fff)));
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}
/* flat eras: the tray reads as part of the bar, no sunken frame. */
:root[data-chrome-border="shadow"] .w98-tray,
:root[data-chrome-border="hairline"] .w98-tray,
:root[data-chrome-border="none"] .w98-tray {
	border: 0;
	box-shadow: none;
}

.w98-tray .tray-icon {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	image-rendering: pixelated;
}

.w98-presence {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--star-text-muted, #303030);
}

.tray-icon--speaker {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><polygon points='1,5 4,5 8,1 8,15 4,11 1,11' fill='%23111111'/><polygon points='2,6 5,6 7,4 7,12 5,10 2,10' fill='%23c0c0c0'/><polygon points='2,6 5,6 7,4 7,5 5,7 2,7' fill='%23ffffff'/><path d='M9.5 5.5 Q11 8 9.5 10.5' fill='none' stroke='%23111111'/><path d='M11 3.5 Q13.2 8 11 12.5' fill='none' stroke='%23111111'/><path d='M12.6 1.5 Q15.6 8 12.6 14.5' fill='none' stroke='%23111111'/></svg>");
}
.tray-icon--network {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='0' y='8' width='8' height='6' fill='%23111111'/><rect x='1' y='9' width='6' height='4' fill='%23c0c0c0'/><rect x='1' y='9' width='6' height='1' fill='%23ffffff'/><rect x='2' y='10' width='4' height='2' fill='%23008080'/><rect x='8' y='1' width='8' height='6' fill='%23111111'/><rect x='9' y='2' width='6' height='4' fill='%23c0c0c0'/><rect x='9' y='2' width='6' height='1' fill='%23ffffff'/><rect x='10' y='3' width='4' height='2' fill='%23008080'/><path d='M4 8 V5 H12' fill='none' stroke='%23404040'/><rect x='1' y='13' width='2' height='1' fill='%2300e000'/><rect x='13' y='6' width='2' height='1' fill='%2300e000'/></svg>");
}
.tray-icon--ime {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='0' y='2' width='16' height='12' fill='%23111111'/><rect x='1' y='3' width='14' height='10' fill='%23111111080'/><rect x='3' y='5' width='1' height='6' fill='%23ffffff'/><rect x='3' y='5' width='3' height='1' fill='%23ffffff'/><rect x='3' y='7' width='2' height='1' fill='%23ffffff'/><rect x='3' y='10' width='3' height='1' fill='%23ffffff'/><rect x='8' y='5' width='1' height='6' fill='%23ffffff'/><rect x='12' y='5' width='1' height='6' fill='%23ffffff'/><rect x='9' y='6' width='1' height='2' fill='%23ffffff'/><rect x='10' y='7' width='1' height='2' fill='%23ffffff'/><rect x='11' y='9' width='1' height='2' fill='%23ffffff'/></svg>");
}

.w98-tray .tray-clock {
	min-width: 38px;
	text-align: center;
}

.tray-wallpaper {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid var(--w98-dark);
	border-radius: 0;
	background:
		linear-gradient(135deg, transparent 45%, var(--w98-dark) 45% 55%, transparent 55%),
		var(--w98-face);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow);
	color: transparent;
	cursor: pointer;
}

.tray-wallpaper:active {
	box-shadow:
		inset -1px -1px 0 var(--w98-light),
		inset 1px 1px 0 var(--w98-shadow);
}

.starplane-tooltip {
	font: 11px/1.2 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
	padding: 2px 4px;
}

.starplane-tooltip::after {
	display: none;
}

.starplane-dialog-root {
	/* W-D0: generic portaled widget → follow the ACTIVE theme's font (pixel on
	   retro, vector on editorial), never hardcode the bitmap (blurs off-retro). */
	font-family: inherit;
}

.starplane-dialog-scrim {
	background: rgba(0, 0, 0, 0.18);
}

.starplane-dialog {
	padding: 3px;
	border: 1px solid var(--w98-dark);
	border-radius: 0;
	background: var(--w98-face);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow),
		inset 2px 2px 0 var(--w98-face-light),
		inset -2px -2px 0 #404040;
	color: var(--w98-text);
}

.starplane-dialog-title {
	margin: 0;
	padding: 2px 4px;
	background: linear-gradient(90deg, var(--w98-title) 0%, #1084d0 50%, var(--w98-title-2) 100%);
	color: var(--w98-title-text);
	font: 700 11px/1.25 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
}

.starplane-dialog-body {
	min-height: 48px;
	padding: 14px 12px 8px;
	font: 11px/1.35 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
}

.starplane-dialog-actions {
	gap: 6px;
	margin: 0;
	padding: 4px 8px 9px;
}

.starplane-dialog-action {
	min-width: 72px;
	min-height: 22px;
	padding: 2px 12px;
	border: 1px solid var(--w98-dark);
	border-radius: 0;
	background: var(--w98-face);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow);
	color: var(--w98-text);
	font: 11px/1 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
}

.starplane-dialog-action:hover,
.starplane-dialog-action:focus-visible,
.w98-start:focus-visible,
.w98-tasks button:focus-visible,
.starplane-deskicon:focus-visible,
.tray-wallpaper:focus-visible,
.demo-controls button:focus-visible,
.tb-btn:focus-visible,
.ptool:focus-visible,
.color:focus-visible,
.w98-ql:focus-visible {
	/* Designed focus indicator, theme-driven: resolves the active theme's
	   `--star-focus-ring` (win98 = dotted black, the smooth themes = their accent
	   ring), falling back to the win98 dark for the no-token boot. */
	outline: 1px dotted var(--star-focus-ring, var(--w98-dark, #111111));
	outline-offset: -3px;
}

/* =========================================================
   Start menu
   ========================================================= */
.w98-startmenu {
	position: absolute;
	left: 2px;
	bottom: 27px;
	z-index: 100100;
	display: none;
	min-width: 220px;
	background: var(--w98-face);
	padding: 2px;
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow),
		inset 2px 2px 0 var(--w98-face-light),
		inset -2px -2px 0 #404040;
	font-size: 11px;
}

/* NOTE: the live Start menu is the rail+items FLEX layout defined below
   (`.w98-startmenu{display:flex}` + `__rail`/`__items`). The old win98 grid
   (`display:grid;grid-template-columns:22px 1fr`) belonged to the now-dead
   `__banner` markup; as a `[data-open="true"]` rule (specificity 0,2,0) it
   out-ranked the flex base (0,1,0) and crushed `__items` into the 22px column,
   collapsing every `__category` (and its `left:100%` submenu) to ~22px so the
   cascade opened INSIDE the menu instead of to its right. Removed so the flex
   layout governs the open menu. */

/* Vertical "Windows 98" banner — CRITICAL signifier (legacy __banner markup;
   retained as inert styling, not rendered by the current shell) */
.w98-startmenu__banner {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 6px 4px 8px;
	background: linear-gradient(0deg, var(--w98-title) 0%, #1084d0 60%, var(--w98-title-2) 100%);
}

.w98-startmenu__banner-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: var(--w98-light);
	font-family: "Tahoma", "MS Sans Serif", sans-serif;
	font-weight: 700;
	font-size: 21px;
	letter-spacing: 0.5px;
	line-height: 1;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.w98-startmenu__banner-text b {
	font-weight: 900;
}

.w98-startmenu__list {
	display: flex;
	flex-direction: column;
	min-width: 200px;
	padding: 1px;
}

.w98-startmenu__list .smitem {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 14px 3px 4px;
	color: var(--w98-text);
	background: transparent;
	border: 0;
	font: inherit;
	cursor: pointer;
	position: relative;
	text-align: left;
}

.w98-startmenu__list .smitem:hover {
	background: var(--w98-menu-blue);
	color: var(--w98-light);
}

.w98-startmenu__list .smitem .smicon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	image-rendering: pixelated;
}

.smicon--programs {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'><rect x='0' y='4' width='10' height='3' fill='%23111111'/><rect x='0' y='6' width='20' height='13' fill='%23111111'/><rect x='1' y='5' width='8' height='2' fill='%23dc9e00'/><rect x='1' y='7' width='18' height='11' fill='%23ffd24a'/><rect x='1' y='7' width='18' height='1' fill='%23ffe9a0'/><rect x='9' y='9' width='15' height='13' fill='%23111111'/><rect x='10' y='10' width='13' height='11' fill='%23c0c0c0'/><rect x='10' y='10' width='13' height='2' fill='%23111111080'/><rect x='21' y='10' width='1' height='1' fill='%23c0c0c0'/><rect x='11' y='13' width='11' height='7' fill='%23ffffff'/><rect x='12' y='14' width='3' height='3' fill='%23e00000'/><rect x='16' y='14' width='3' height='3' fill='%23008000'/><rect x='12' y='18' width='7' height='1' fill='%23808080'/></svg>");
}
.smicon--documents {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'><rect x='0' y='4' width='10' height='3' fill='%23111111'/><rect x='0' y='6' width='20' height='14' fill='%23111111'/><rect x='1' y='5' width='8' height='2' fill='%23dc9e00'/><rect x='1' y='7' width='18' height='12' fill='%23dc9e00'/><rect x='9' y='1' width='12' height='15' fill='%23111111'/><rect x='10' y='2' width='10' height='13' fill='%23ffffff'/><rect x='12' y='4' width='6' height='1' fill='%23808080'/><rect x='12' y='6' width='6' height='1' fill='%23808080'/><rect x='12' y='8' width='4' height='1' fill='%23808080'/><rect x='0' y='11' width='20' height='9' fill='%23111111'/><rect x='1' y='12' width='18' height='7' fill='%23ffd24a'/><rect x='1' y='12' width='18' height='1' fill='%23ffe9a0'/><rect x='2' y='18' width='17' height='1' fill='%23c88a00'/></svg>");
}
.smicon--settings {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'><rect x='10' y='2' width='4' height='20' fill='%23111111'/><rect x='2' y='10' width='20' height='4' fill='%23111111'/><rect x='4' y='4' width='4' height='4' fill='%23111111'/><rect x='16' y='4' width='4' height='4' fill='%23111111'/><rect x='4' y='16' width='4' height='4' fill='%23111111'/><rect x='16' y='16' width='4' height='4' fill='%23111111'/><circle cx='12' cy='12' r='8' fill='%23111111'/><rect x='11' y='4' width='2' height='16' fill='%23a0a0a0'/><rect x='4' y='11' width='16' height='2' fill='%23a0a0a0'/><rect x='5' y='5' width='2' height='2' fill='%23a0a0a0'/><rect x='17' y='5' width='2' height='2' fill='%23a0a0a0'/><rect x='5' y='17' width='2' height='2' fill='%23a0a0a0'/><rect x='17' y='17' width='2' height='2' fill='%23a0a0a0'/><circle cx='12' cy='12' r='6.5' fill='%23a0a0a0'/><path d='M7 9 a6.5 6.5 0 0 1 5 -2.8' fill='none' stroke='%23e0e0e0' stroke-width='1.6'/><circle cx='12' cy='12' r='2.6' fill='%23111111'/><circle cx='12' cy='12' r='1.8' fill='%23ffffff'/></svg>");
}
.smicon--find {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'><rect x='2' y='1' width='13' height='17' fill='%23111111'/><rect x='3' y='2' width='11' height='15' fill='%23ffffff'/><rect x='5' y='4' width='7' height='1' fill='%23808080'/><rect x='5' y='6' width='7' height='1' fill='%23808080'/><rect x='5' y='8' width='5' height='1' fill='%23808080'/><rect x='5' y='10' width='7' height='1' fill='%23808080'/><circle cx='13' cy='12' r='6' fill='%23111111'/><circle cx='13' cy='12' r='4.4' fill='%23b8e0e8'/><path d='M10.5 10.6 a3.4 3.4 0 0 1 2 -1.6' fill='none' stroke='%23ffffff' stroke-width='1.4'/><path d='M17.5 16.5 L21.5 20.5' stroke='%23111111' stroke-width='4'/><path d='M17.8 16.8 L21 20' stroke='%23800000' stroke-width='2'/></svg>");
}
.smicon--help {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'><rect x='2' y='2' width='20' height='19' fill='%23111111'/><rect x='3' y='3' width='15' height='17' fill='%23800080'/><rect x='18' y='3' width='3' height='17' fill='%23ffffff'/><rect x='18' y='4' width='1' height='15' fill='%23c0c0c0'/><rect x='3' y='3' width='2' height='17' fill='%23400040'/><rect x='5' y='3' width='13' height='1' fill='%23b040b0'/><path d='M8.5 9 q0 -3 3.2 -3 q3.2 0 3.2 2.8 q0 2 -2.4 2.8 l0 1.6' fill='none' stroke='%23ffd000' stroke-width='2.2'/><rect x='11.3' y='15.5' width='2.4' height='2.4' fill='%23ffd000'/></svg>");
}
.smicon--run {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'><rect x='4' y='2' width='19' height='15' fill='%23111111'/><rect x='5' y='3' width='17' height='13' fill='%23c0c0c0'/><rect x='5' y='3' width='17' height='2' fill='%23111111080'/><rect x='20' y='3' width='1' height='1' fill='%23c0c0c0'/><rect x='6' y='6' width='15' height='1' fill='%23ffffff'/><rect x='6' y='8' width='11' height='4' fill='%23ffffff'/><rect x='6' y='8' width='11' height='1' fill='%23808080'/><rect x='7' y='9' width='6' height='2' fill='%23111111'/><rect x='18' y='8' width='3' height='4' fill='%23808080'/><rect x='18' y='8' width='3' height='1' fill='%23ffffff'/><polygon points='2,22 2,14 5,17 7,12 9,13 7,18 11,18' fill='%23111111'/><polygon points='3,20 3,16 5,18 7,13.4 8,13.8 6,19 9,19' fill='%23ffffff'/></svg>");
}
.smicon--logoff {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'><circle cx='7' cy='12' r='5.5' fill='%23111111'/><circle cx='7' cy='12' r='3.8' fill='%23e8b800'/><circle cx='7' cy='12' r='1.8' fill='%23ffffff'/><circle cx='6.4' cy='10.6' r='1' fill='%23fff0a0'/><rect x='11' y='10' width='12' height='4' fill='%23111111'/><rect x='12' y='11' width='11' height='2' fill='%23e8b800'/><rect x='12' y='11' width='11' height='1' fill='%23fff0a0'/><rect x='17' y='13' width='2' height='4' fill='%23111111'/><rect x='21' y='13' width='2' height='5' fill='%23111111'/><rect x='17.5' y='13' width='1' height='3' fill='%23e8b800'/><rect x='21.5' y='13' width='1' height='4' fill='%23e8b800'/></svg>");
}
.smicon--shutdown {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'><rect x='1' y='2' width='20' height='15' fill='%23111111'/><rect x='2' y='3' width='18' height='13' fill='%23c0c0c0'/><rect x='2' y='3' width='18' height='1' fill='%23ffffff'/><rect x='2' y='3' width='1' height='13' fill='%23ffffff'/><rect x='19' y='4' width='1' height='12' fill='%23808080'/><rect x='3' y='15' width='17' height='1' fill='%23808080'/><rect x='4' y='5' width='14' height='9' fill='%23111111020'/><path d='M13.5 6.2 a3.6 3.6 0 1 0 2.6 6 a4.4 4.4 0 0 1 -2.6 -6 z' fill='%23ffd000'/><rect x='6' y='11' width='1' height='1' fill='%23ffffff'/><rect x='9' y='7' width='1' height='1' fill='%23ffffff'/><rect x='8' y='18' width='6' height='2' fill='%23111111'/><rect x='9' y='18' width='4' height='1' fill='%23808080'/><rect x='5' y='20' width='12' height='3' fill='%23111111'/><rect x='6' y='21' width='10' height='1' fill='%23c0c0c0'/></svg>");
}

.smitem__chev {
	margin-left: auto;
	font-size: 11px;
	color: inherit;
}

.smitem__chev::before {
	content: "\25B6";
}

.smsep {
	height: 0;
	margin: 2px 2px;
	border-top: 1px solid var(--w98-shadow);
	border-bottom: 1px solid var(--w98-light);
}

/* =========================================================
   Resize handles — wire transparent
   ========================================================= */
.starplane-resize-handle {
	position: absolute;
	z-index: 3;
	border: 0;
	background: transparent;
	padding: 0;
}

.starplane-resize-handle--n,
.starplane-resize-handle--s {
	left: 8px;
	right: 8px;
	height: 4px;
	cursor: ns-resize;
}
.starplane-resize-handle--n {
	top: 0;
}
.starplane-resize-handle--s {
	bottom: 0;
}
.starplane-resize-handle--e,
.starplane-resize-handle--w {
	top: 8px;
	bottom: 8px;
	width: 4px;
	cursor: ew-resize;
}
.starplane-resize-handle--e {
	right: 0;
}
.starplane-resize-handle--w {
	left: 0;
}
.starplane-resize-handle--nw,
.starplane-resize-handle--ne,
.starplane-resize-handle--sw,
.starplane-resize-handle--se {
	width: 10px;
	height: 10px;
}
.starplane-resize-handle--nw {
	top: 0;
	left: 0;
	cursor: nwse-resize;
}
.starplane-resize-handle--ne {
	top: 0;
	right: 0;
	cursor: nesw-resize;
}
.starplane-resize-handle--sw {
	bottom: 0;
	left: 0;
	cursor: nesw-resize;
}
.starplane-resize-handle--se {
	right: 0;
	bottom: 0;
	cursor: nwse-resize;
}

/* =========================================================
   Notepad textarea (real keyboard input)
   ========================================================= */
.notepad-area--editable {
	padding: 0;
	display: flex;
}
.notepad-area--editable::after {
	display: none; /* textarea owns the caret */
}
.notepad-textarea {
	flex: 1;
	width: 100%;
	min-height: 160px;
	resize: none;
	margin: 0;
	padding: 4px 6px;
	background: var(--w98-light);
	border: 0;
	outline: 0;
	box-shadow: none;
	font-family: "Lucida Console", "Courier New", monospace;
	font-size: 12px;
	line-height: 1.3;
	color: var(--w98-text);
	caret-color: var(--w98-text);
	white-space: pre;
	overflow: auto;
}
.notepad-textarea::selection {
	background: var(--w98-menu-blue);
	color: var(--w98-light);
}

/* =========================================================
   AppPlan runtime projection (server-authoritative human view)
   ========================================================= */
.demo-window__body > .starplane-app,
.starplane-app {
	width: 100%;
	height: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	color: var(--star-text, var(--w98-text, #111111));
	/* App CONTENT inherits the theme's UI font — Oxanium under star-os, pixel MS
	   Sans under win98, VT323 under apple-ii — so the controls below belong to the
	   active machine, not to win98. */
	font-family: var(--star-font-ui, inherit);
}

/* DISARTO app identity override (SBQ-N3-DISARTO-APPS2).
   Scoped only to the two pack plans owned by this lane. The pack sources live in
   ../starplane, outside this Starbox worktree, so the Starbox renderer applies
   the identity through its existing data-app-id hook. */
.starplane-app[data-app-id="calculator"],
.starplane-app[data-app-id="file-explorer"] {
	/* Standalone-contract token chains: --star-* (live theme) → --starplane-*
	   (starkit alias floor) → a terminal literal. So the app stays themed inside
	   the shell AND renders correctly when mounted by a standalone starkit
	   consumer that ships no --star-* floor. The accent now FOLLOWS the booted
	   theme (--star-accent) instead of freezing one orange, so the calculator is
	   theme-coherent under starpunk/disarto/midnight alike. */
	--disarto-app-bg: var(--star-surface-sunken, var(--starplane-surface-sunken, #131619));
	--disarto-app-surface: var(--star-surface, var(--starplane-surface, #16191d));
	--disarto-app-raised: var(--star-surface-raised, var(--starplane-surface-raised, #1c2024));
	--disarto-app-text: var(--star-text, var(--starplane-text, #f2f3f4));
	--disarto-app-muted: var(--star-text-muted, var(--starplane-text-muted, #9097a0));
	--disarto-app-accent: var(--star-accent, var(--starplane-accent, #f5641e));
	--disarto-app-accent-hover: var(--star-accent-hover, var(--starplane-accent-hover, #ff8347));
	--disarto-app-accent-on: var(--star-accent-on, var(--starplane-accent-on, #ffffff));
	--disarto-app-border: var(--star-border, var(--starplane-border, rgb(242 243 244 / 10%)));
	--disarto-app-border-strong: var(--star-border-strong, var(--starplane-border-strong, rgb(242 243 244 / 20%)));
	--disarto-app-focus: var(--star-focus-ring, var(--starplane-focus-ring, var(--disarto-app-accent)));
	--disarto-app-radius: var(--star-radius-control, var(--starplane-radius-control, 12px));
	--disarto-app-radius-sm: var(--star-radius-sm, var(--starplane-radius-sm, 10px));
	--disarto-app-shadow: var(--star-shadow-2, var(--starplane-shadow-2, 0 1px 2px rgb(0 0 0 / 50%), 0 12px 30px -12px rgb(0 0 0 / 60%)));
	color: var(--disarto-app-text);
	background: var(--disarto-app-bg);
	font-family: var(--star-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif);
}

.starplane-app[data-app-id="calculator"] > .starplane-app__column,
.starplane-app[data-app-id="file-explorer"] > .starplane-app__column {
	gap: var(--star-space-3, 12px) !important;
	padding: var(--star-space-4, 16px) !important;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--disarto-app-accent) 10%, transparent), transparent 42%),
		var(--disarto-app-bg);
}

.starplane-app[data-app-id="calculator"] .starplane-app__text--title,
.starplane-app[data-app-id="file-explorer"] .starplane-app__text--title {
	font-size: var(--star-text-lg, 16px);
	font-weight: 650;
	letter-spacing: 0;
	color: var(--disarto-app-text);
}

.starplane-app[data-app-id="calculator"] .starplane-app__text--caption,
.starplane-app[data-app-id="file-explorer"] .starplane-app__text--caption,
.starplane-app[data-app-id="calculator"] .starplane-app__button,
.starplane-app[data-app-id="file-explorer"] .starplane-app__button {
	font-family: var(--star-font-mono, "IBM Plex Mono", ui-monospace, monospace);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.starplane-app[data-app-id="calculator"] .starplane-app__text--caption,
.starplane-app[data-app-id="file-explorer"] .starplane-app__text--caption {
	color: var(--disarto-app-muted);
	font-weight: 650;
}

.starplane-app[data-app-id="calculator"] .starplane-app__box--border,
.starplane-app[data-app-id="file-explorer"] .starplane-app__box--border,
.starplane-app[data-app-id="calculator"] .starplane-app__list:not(.starplane-app__list--grid),
.starplane-app[data-app-id="file-explorer"] .starplane-app__list:not(.starplane-app__list--grid),
.starplane-app[data-app-id="file-explorer"] > .starplane-app__column > .starplane-app__box--border {
	border: 1px solid var(--disarto-app-border);
	border-radius: var(--disarto-app-radius);
	background: var(--disarto-app-surface) !important;
	box-shadow: var(--disarto-app-shadow);
}

.starplane-app[data-app-id="calculator"] .starplane-app__box--border:has(.starplane-app__text--display) {
	border-color: color-mix(in srgb, var(--disarto-app-accent) 46%, var(--disarto-app-border));
	background: var(--disarto-app-raised) !important;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 5%),
		0 16px 32px -24px color-mix(in srgb, var(--disarto-app-accent) 55%, transparent);
	/* Anchor the readout to the bottom-right of a tall well (classic calculator
	   geometry) and keep it from being squeezed by a long value. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
	min-height: 64px;
}

.starplane-app[data-app-id="calculator"] .starplane-app__text--display {
	color: var(--disarto-app-text);
	font-family: var(--star-font-mono, var(--starplane-font-mono, "IBM Plex Mono", ui-monospace, monospace));
	font-size: var(--star-text-xl, var(--starplane-text-xl, 28px));
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.15;
	/* Tabular, lining figures so the digit columns never jitter as the value
	   updates; clip-not-wrap so a long / overflow result (the relevant overflow
	   state for a four-function readout) never breaks the layout — it stays one
	   right-aligned line and truncates rather than reflowing the keypad. */
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.starplane-app[data-app-id="calculator"] .starplane-app__list--grid {
	gap: var(--star-space-2, 8px) !important;
}

.starplane-app[data-app-id="calculator"] .starplane-app__button,
.starplane-app[data-app-id="file-explorer"] .starplane-app__button {
	min-height: 36px;
	border: 1px solid var(--disarto-app-border) !important;
	border-radius: var(--disarto-app-radius-sm);
	background: var(--disarto-app-raised) !important;
	box-shadow: var(--star-shadow-1, var(--starplane-shadow-1, 0 1px 2px rgb(0 0 0 / 50%)));
	color: var(--disarto-app-text) !important;
	font-weight: 700;
	/* Tabular figures so digit keys share one glyph width — a tidy, aligned
	   keypad. Press feedback animates `transform` only (GPU-safe, below). */
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	transition:
		background-color var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		border-color var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		color var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		transform var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.starplane-app[data-app-id="calculator"] .starplane-app__button:hover:not(:disabled),
.starplane-app[data-app-id="file-explorer"] .starplane-app__button:hover:not(:disabled) {
	border-color: color-mix(in srgb, var(--disarto-app-accent) 60%, var(--disarto-app-border));
	background: color-mix(in srgb, var(--disarto-app-raised) 82%, var(--disarto-app-accent) 18%) !important;
	transform: translateY(-1px);
	filter: none;
}

.starplane-app[data-app-id="calculator"] .starplane-app__button:active:not(:disabled),
.starplane-app[data-app-id="file-explorer"] .starplane-app__button:active:not(:disabled) {
	background: color-mix(in srgb, var(--disarto-app-raised) 72%, var(--disarto-app-accent) 28%) !important;
	transform: translateY(1px);
	filter: none;
}

.starplane-app[data-app-id="calculator"] .starplane-app__button:focus-visible,
.starplane-app[data-app-id="file-explorer"] .starplane-app__button:focus-visible,
.starplane-app[data-app-id="file-explorer"] .starplane-app__input:focus-visible {
	outline: 2px solid var(--disarto-app-focus);
	outline-offset: 2px;
}

.starplane-app[data-app-id="calculator"] .starplane-app__button:disabled,
.starplane-app[data-app-id="file-explorer"] .starplane-app__button:disabled {
	color: var(--disarto-app-muted);
	background: color-mix(in srgb, var(--disarto-app-raised) 55%, transparent);
	border-color: var(--disarto-app-border);
	opacity: 1;
}

.starplane-app[data-app-id="calculator"] .starplane-app__button--primary,
.starplane-app[data-app-id="file-explorer"] .starplane-app__button--primary {
	background: var(--disarto-app-accent);
	border-color: var(--disarto-app-accent);
	color: var(--disarto-app-accent-on);
}

.starplane-app[data-app-id="calculator"] .starplane-app__button--primary:hover:not(:disabled),
.starplane-app[data-app-id="file-explorer"] .starplane-app__button--primary:hover:not(:disabled) {
	background: var(--disarto-app-accent-hover);
	border-color: var(--disarto-app-accent-hover);
}

.starplane-app[data-app-id="file-explorer"] .starplane-app__input {
	min-height: 36px;
	border: 1px solid var(--disarto-app-border);
	border-radius: var(--disarto-app-radius-sm);
	background: var(--disarto-app-bg);
	color: var(--disarto-app-text);
}

.starplane-app[data-app-id="file-explorer"] .starplane-app__list:not(.starplane-app__list--grid) {
	min-height: 148px;
	padding: var(--star-space-1, 4px) !important;
	overflow: auto;
}

.starplane-app[data-app-id="file-explorer"] .starplane-app__list .starplane-app__box {
	border-radius: var(--disarto-app-radius-sm);
	background: transparent !important;
	transition:
		background-color var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		transform var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.starplane-app[data-app-id="file-explorer"] .starplane-app__list .starplane-app__box:hover {
	background: color-mix(in srgb, var(--disarto-app-accent) 12%, transparent) !important;
	transform: translateY(-1px);
}

.starplane-app[data-app-id="file-explorer"] .starplane-app__list .starplane-app__box:active {
	background: color-mix(in srgb, var(--disarto-app-accent) 18%, transparent) !important;
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.starplane-app[data-app-id="calculator"] .starplane-app__button,
	.starplane-app[data-app-id="file-explorer"] .starplane-app__button,
	.starplane-app[data-app-id="file-explorer"] .starplane-app__list .starplane-app__box {
		transition: none;
	}

	.starplane-app[data-app-id="calculator"] .starplane-app__button:hover:not(:disabled),
	.starplane-app[data-app-id="file-explorer"] .starplane-app__button:hover:not(:disabled),
	.starplane-app[data-app-id="file-explorer"] .starplane-app__list .starplane-app__box:hover {
		transform: none;
	}
}

/* =========================================================
   Notepad — disarto app identity elevation (SS-APP-NOTEPAD).
   The multi-note-editor view-tree (pack plan) lives in ../starplane,
   OUTSIDE this Starbox worktree, so the renderer applies the identity
   through its existing data-app-id hook — the SAME mechanism the
   calculator/file-explorer block above uses. Every --star-* chain keeps
   a terminal literal so the surface also resolves standalone (the static
   --star-* floor in star-tokens.css is the first <head> sheet, so bare
   var(--star-*) already resolves at runtime; the literals are the
   standalone belt-and-suspenders contract). Motion is GPU-safe only
   (transform + opacity + color), guarded by prefers-reduced-motion.
   ========================================================= */
.starplane-app[data-app-id="notepad"] {
	--np-bg: var(--star-bg, #f4f5f7);
	--np-surface: var(--star-surface, #ffffff);
	--np-sunken: var(--star-surface-sunken, #f7f8f9);
	--np-text: var(--star-text, #0b0d0f);
	--np-muted: var(--star-text-muted, #6b7177);
	--np-accent: var(--star-accent, #f5641e);
	--np-accent-hover: var(--star-accent-hover, #ff7536);
	--np-accent-on: var(--star-accent-on, #ffffff);
	--np-accent-soft: color-mix(in srgb, var(--star-accent, #f5641e) 12%, transparent);
	--np-border: var(--star-border, rgba(11, 13, 15, 0.10));
	--np-border-strong: var(--star-border-strong, rgba(11, 13, 15, 0.18));
	--np-focus: var(--star-focus-ring, #f5641e);
	--np-danger: var(--star-danger, #dc2626);
	--np-danger-soft: color-mix(in srgb, var(--star-danger, #dc2626) 10%, transparent);
	--np-shadow-1: var(--star-shadow-1, 0 1px 2px rgba(11, 13, 15, 0.04));
	--np-shadow-2: var(--star-shadow-2, 0 1px 2px rgba(11, 13, 15, 0.04), 0 10px 26px -12px rgba(11, 13, 15, 0.12));
	--np-radius: var(--star-radius-control, 12px);
	--np-radius-sm: var(--star-radius-sm, 10px);
	color: var(--np-text);
	background: var(--np-bg);
	font-family: var(--star-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif);
}

/* Root canvas: generous breathing room + a whisper of accent in the top-left
   (anti-slop: a single hue, no blue→violet gradient). */
.starplane-app[data-app-id="notepad"] > .starplane-app__column {
	gap: var(--star-space-3, 12px) !important;
	padding: var(--star-space-4, 16px) !important;
	background:
		radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--np-accent) 7%, transparent), transparent 46%),
		var(--np-bg);
}

/* Major bordered surfaces float as white cards on a soft diffuse shadow — NOT
   win98 bevels. Scoped to NON-tappable boxes, so the tappable note cards keep
   their plan-supplied state backgrounds (selected / pinned / default). */
.starplane-app[data-app-id="notepad"] .starplane-app__box--border:not(.starplane-app__box--tappable) {
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius) !important;
	background: var(--np-surface) !important;
	box-shadow: var(--np-shadow-1);
}

/* Toolbar action clusters (the nested bordered boxes grouping New/Save and
   Pin/Delete) read as a segmented trough, NOT as heavy nested cards. */
.starplane-app[data-app-id="notepad"] .starplane-app__box--border:not(.starplane-app__box--tappable)
	.starplane-app__box--border {
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius-sm) !important;
	background: var(--np-sunken) !important;
	box-shadow: none;
}

/* Typography — titles read as identity, captions/buttons as mono-uppercase labels. */
.starplane-app[data-app-id="notepad"] .starplane-app__text--title {
	font-size: var(--star-text-lg, 16px);
	font-weight: 680;
	letter-spacing: -0.01em;
	color: var(--np-text);
}

.starplane-app[data-app-id="notepad"] .starplane-app__text--caption {
	color: var(--np-muted);
	font-family: var(--star-font-mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace);
	font-size: var(--star-text-xs, 11px);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.starplane-app[data-app-id="notepad"] .starplane-app__text--body {
	color: var(--np-text);
}

/* Buttons — instrument-grade, four variants, full state matrix. GPU-safe
   transition (transform/opacity/bg/border/color only). */
.starplane-app[data-app-id="notepad"] .starplane-app__button {
	min-height: 34px;
	padding: 0 var(--star-space-3, 12px);
	border: 1px solid var(--np-border-strong) !important;
	border-radius: var(--np-radius-sm) !important;
	background: var(--np-surface) !important;
	box-shadow: var(--np-shadow-1);
	color: var(--np-text) !important;
	font-family: var(--star-font-mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace);
	font-size: var(--star-text-xs, 11px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		background-color var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		border-color var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		color var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		transform var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		box-shadow var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.starplane-app[data-app-id="notepad"] .starplane-app__button:hover:not(:disabled) {
	border-color: color-mix(in srgb, var(--np-accent) 55%, var(--np-border-strong)) !important;
	background: color-mix(in srgb, var(--np-surface) 82%, var(--np-accent) 18%) !important;
	box-shadow: var(--np-shadow-2);
	transform: translateY(-1px);
	filter: none;
}

.starplane-app[data-app-id="notepad"] .starplane-app__button:active:not(:disabled) {
	background: color-mix(in srgb, var(--np-surface) 70%, var(--np-accent) 30%) !important;
	transform: translateY(1px);
	box-shadow: var(--np-shadow-1);
	filter: none;
}

.starplane-app[data-app-id="notepad"] .starplane-app__button:focus-visible {
	outline: 2px solid var(--np-focus);
	outline-offset: 2px;
}

.starplane-app[data-app-id="notepad"] .starplane-app__button:disabled {
	color: var(--np-muted) !important;
	background: color-mix(in srgb, var(--np-surface) 60%, transparent) !important;
	border-color: var(--np-border) !important;
	box-shadow: none;
	opacity: 1;
}

/* Primary = the flame accent (Save). */
.starplane-app[data-app-id="notepad"] .starplane-app__button--primary {
	background: var(--np-accent) !important;
	border-color: var(--np-accent) !important;
	color: var(--np-accent-on) !important;
	box-shadow: var(--np-shadow-2);
}

.starplane-app[data-app-id="notepad"] .starplane-app__button--primary:hover:not(:disabled) {
	background: var(--np-accent-hover) !important;
	border-color: var(--np-accent-hover) !important;
}

/* Danger = red, for Delete / Clear all. */
.starplane-app[data-app-id="notepad"] .starplane-app__button--danger {
	background: var(--np-surface) !important;
	border-color: color-mix(in srgb, var(--np-danger) 40%, var(--np-border-strong)) !important;
	color: var(--np-danger) !important;
}

.starplane-app[data-app-id="notepad"] .starplane-app__button--danger:hover:not(:disabled) {
	background: var(--np-danger) !important;
	border-color: var(--np-danger) !important;
	color: var(--np-accent-on) !important;
}

/* Ghost = borderless prev/next browse buttons. */
.starplane-app[data-app-id="notepad"] .starplane-app__button--ghost {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none;
	color: var(--np-muted) !important;
}

.starplane-app[data-app-id="notepad"] .starplane-app__button--ghost:hover:not(:disabled) {
	background: var(--np-accent-soft) !important;
	border-color: transparent !important;
	color: var(--np-accent) !important;
}

/* Title field — a quiet, larger input; the border wakes on focus. */
.starplane-app[data-app-id="notepad"] .starplane-app__input {
	min-height: 38px;
	padding: 8px 12px !important;
	border: 1px solid var(--np-border) !important;
	border-radius: var(--np-radius-sm) !important;
	background: var(--np-sunken) !important;
	color: var(--np-text) !important;
	font-family: var(--star-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif);
	font-size: var(--star-text-lg, 16px);
	font-weight: 600;
	transition:
		background-color var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		border-color var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		box-shadow var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.starplane-app[data-app-id="notepad"] .starplane-app__input:focus-visible {
	outline: none;
	border-color: var(--np-accent) !important;
	background: var(--np-surface) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-accent) 22%, transparent);
}

/* The hero writing surface — a generous, comfortable mono textarea. */
.starplane-app[data-app-id="notepad"] .starplane-app__textarea {
	min-height: 160px;
	padding: 14px 16px !important;
	border: 1px solid var(--np-border) !important;
	border-radius: var(--np-radius-sm) !important;
	background: var(--np-sunken) !important;
	color: var(--np-text) !important;
	box-shadow: inset 0 1px 2px rgba(11, 13, 15, 0.04);
	resize: none;
	transition:
		background-color var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		border-color var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		box-shadow var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.starplane-app[data-app-id="notepad"] .starplane-app__textarea--mono {
	font-family: var(--star-font-mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace);
	font-size: var(--star-text-md, 13px);
	line-height: 1.65;
	white-space: pre;
}

.starplane-app[data-app-id="notepad"] .starplane-app__textarea:focus-visible {
	outline: none;
	border-color: var(--np-accent) !important;
	background: var(--np-surface) !important;
	box-shadow:
		inset 0 1px 2px rgba(11, 13, 15, 0.04),
		0 0 0 3px color-mix(in srgb, var(--np-accent) 22%, transparent);
}

/* Notes sidebar — scrollable list of tappable note cards. */
.starplane-app[data-app-id="notepad"] .starplane-app__list:not(.starplane-app__list--grid) {
	gap: var(--star-space-2, 8px) !important;
	padding: var(--star-space-2, 8px) !important;
	scrollbar-width: thin;
	scrollbar-color: var(--np-border-strong) transparent;
}

.starplane-app[data-app-id="notepad"] .starplane-app__list:not(.starplane-app__list--grid)::-webkit-scrollbar {
	width: 8px;
}

.starplane-app[data-app-id="notepad"] .starplane-app__list:not(.starplane-app__list--grid)::-webkit-scrollbar-thumb {
	background: var(--np-border-strong);
	border-radius: 8px;
}

/* Note cards keep their plan-supplied state background (selected = light blue,
   pinned = warm, default = white) — that inline value is the ONLY state signal
   in the DOM — and gain disarto chrome + a GPU-safe hover lift on top. */
.starplane-app[data-app-id="notepad"] .starplane-app__box--tappable {
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius-sm) !important;
	box-shadow: var(--np-shadow-1);
	cursor: pointer;
	transition:
		transform var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		box-shadow var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		border-color var(--star-dur-fast, 90ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.starplane-app[data-app-id="notepad"] .starplane-app__box--tappable:hover {
	border-color: color-mix(in srgb, var(--np-accent) 45%, var(--np-border-strong));
	box-shadow: var(--np-shadow-2);
	transform: translateY(-1px);
}

.starplane-app[data-app-id="notepad"] .starplane-app__box--tappable:active {
	transform: translateY(0);
	box-shadow: var(--np-shadow-1);
}

/* Empty book — a calm placeholder, not a dead grey well. */
.starplane-app[data-app-id="notepad"] .starplane-app__list-empty {
	color: var(--np-muted);
	background: transparent !important;
	border: 1px dashed var(--np-border-strong) !important;
	border-radius: var(--np-radius-sm) !important;
}

@media (prefers-reduced-motion: reduce) {
	.starplane-app[data-app-id="notepad"] .starplane-app__button,
	.starplane-app[data-app-id="notepad"] .starplane-app__input,
	.starplane-app[data-app-id="notepad"] .starplane-app__textarea,
	.starplane-app[data-app-id="notepad"] .starplane-app__box--tappable {
		transition: none;
	}

	.starplane-app[data-app-id="notepad"] .starplane-app__button:hover:not(:disabled),
	.starplane-app[data-app-id="notepad"] .starplane-app__box--tappable:hover {
		transform: none;
	}
}
/* The app's ROOT view node (the direct child of .starplane-app) must FILL the
   window width — no inherited max-width / auto-centering. Declarative apps then
   use the full window; any centering is the app's explicit choice (align/justify
   on a child), never a shell-imposed margin. */
.demo-window__body > .starplane-app > .starplane-app__column,
.demo-window__body > .starplane-app > .starplane-app__row,
.demo-window__body > .starplane-app > .starplane-app__grid {
	width: 100%;
	/* Root view node FILLS the window height too — so apps whose plan column has
	   no explicit `grow` (e.g. Calculator) don't leave a dead grey void below
	   their content. The trailing pane absorbs the slack (rule below). */
	flex: 1 1 auto;
	min-height: 0;
}
/* In a root column, the LAST list (a History tape / Notes list) absorbs the
   leftover height so its sunken well anchors to the window bottom instead of a
   short list floating above dead grey space. Scoped to the root child + last
   list so it never stretches an interior list that has siblings after it. The
   inline `max-height` the renderer sets (the plan's cap) is lifted ONLY for this
   trailing-list-fills-window case so the well grows to the bottom; `!important`
   beats the renderer's inline `max-height`. */
.demo-window__body > .starplane-app > .starplane-app__column > .starplane-app__list:last-child {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none !important;
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow),
		inset -1px -1px 0 var(--w98-light);
	background: var(--w98-light);
	padding: 2px;
	overflow: auto;
}
/* When that trailing list holds its own empty-well, the inner well already
   frames itself — drop the outer frame's double border so it isn't a box-in-box. */
.demo-window__body > .starplane-app > .starplane-app__column > .starplane-app__list:last-child:has(> .starplane-app__list-empty) {
	border: 0;
	box-shadow: none;
	background: transparent;
	padding: 0;
}
.starplane-app__column {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}
.starplane-app__row {
	display: flex;
	flex-direction: row;
	width: 100%;
	min-width: 0;
}
/* NESTED-GROUP fix (D2). A row/column nested INSIDE a row is a content-sized
   group (a button cluster, an inline pair), NOT a full-width band. The base
   `width:100%` made such a nested row eat the whole parent row, so a
   `justify:between` header collapsed: the title pinned left and its button
   cluster stretched flush against it (Notepad "Notepad|New Save…", Task Manager,
   Sticky Notes). Size nested groups to their content; an explicit `grow` (which
   sets `flex:1 1 auto` inline) still wins and re-expands the band when intended. */
.starplane-app__row > .starplane-app__row,
.starplane-app__row > .starplane-app__column {
	width: auto;
}
.starplane-app__grid {
	display: grid;
	width: 100%;
	min-height: 0;
}
.starplane-app__text {
	min-width: 0;
	/* Wrap at word boundaries, not mid-word. `anywhere` was breaking footer hints
	   into "del / delete" and "Clear / all" mid-token — a Win98 status line wraps
	   between words, never inside one. `break-word` only splits a word too long to
	   fit on its own line (a long URL/hash), which is the correct fallback. */
	overflow-wrap: break-word;
	word-break: normal;
}
.starplane-app__text--display {
	font-family: var(--star-font-mono, "Lucida Console", "Courier New", monospace);
	font-size: var(--star-text-xl, 20px);
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-variant-numeric: tabular-nums;
}
/* A box framing a calculator-style DISPLAY reads as a SUNKEN data field over the
   theme's well surface — the recessed LCD, not a raised panel. */
.starplane-app__box--border:has(.starplane-app__text--display) {
	background: var(--star-surface-sunken, var(--w98-light, #fff));
	box-shadow: none;
}
:root[data-chrome-border="bevel"] .starplane-app__box--border:has(.starplane-app__text--display) {
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow, #808080),
		inset -1px -1px 0 var(--w98-light, #fff);
}
.starplane-app__text--title {
	/* App header (e.g. the "Notepad" / "Calculator" body title). nowrap+ellipsis
	   so a narrow window NEVER breaks the header mid-word ("Notepa d"). Overrides
	   `.starplane-app__text { overflow-wrap:anywhere }` which otherwise allows the
	   mid-word break. 15px is one notch under the old 16px — a tighter, more
	   Win98-weight header that still leads the hierarchy. */
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: normal;
	flex-shrink: 0;
}
.starplane-app__text--caption {
	font-size: 11px;
}
.starplane-app__text--mono {
	font-family: var(--star-font-mono, "Lucida Console", "Courier New", monospace);
}
/* VALUE-COLUMN fix (D2). A mono text that is a NON-growing direct child of a row
   is a right-hand VALUE column (Task Manager "Not Responding" / "Running",
   Calculator history value, R/G/B readouts) — a value never breaks mid-phrase.
   Multi-line mono SUMMARY blocks are column children (Settings "Display: …"), so
   the `row >` scope leaves them free to wrap. `grow` value cells are excluded. */
.starplane-app__row > .starplane-app__text--mono {
	white-space: nowrap;
	flex-shrink: 0;
}
/* FIELD-LABEL fix (D2). A text inside a horizontal row that immediately precedes
   a form control (select / input / slider) is an inline FIELD LABEL — e.g.
   "Theme:" + a select, "Group" + a select. Default text has `min-width:0` +
   `overflow-wrap:break-word`, so in a flex row these labels collapsed to their
   narrowest box and broke MID-WORD ("Them/e:", "Densit/y", "Grou/p", "Volum/e").
   A Win98 control-panel label never wraps: pin it to content width and forbid the
   break. Scoped to the label-then-control adjacency so wrapping status/footer
   captions (which are NOT immediately followed by a control) are untouched. */
.starplane-app__row > .starplane-app__text:has(
	+ .starplane-app__select,
	+ .starplane-app__input,
	+ .starplane-app__slider
) {
	flex: 0 0 auto;
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
}
.starplane-app__button {
	/* Token-driven control: win98 keeps the dense beveled key; modern themes get a
	   rounded, soft-elevation control (radius + shadow-1 from the design language).
	   Bevel-specific 3D edges are added back only for data-chrome-border=bevel. */
	min-height: 23px;
	padding: 3px 10px;
	border: 1px solid var(--star-border, var(--w98-dark, #111111));
	border-radius: var(--star-radius-control, 0px);
	background: var(--star-surface-raised, var(--w98-face, #c0c0c0));
	box-shadow: var(--star-shadow-1, none);
	color: var(--star-text, var(--w98-text, #111111));
	font: inherit;
	font-family: var(--star-font-ui, inherit);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--star-dur-fast, 0ms) var(--star-ease, linear),
		box-shadow var(--star-dur-fast, 0ms) var(--star-ease, linear),
		filter var(--star-dur-fast, 0ms) var(--star-ease, linear);
}
/* win98/NeXT hard bevel on the key (raised) */
:root[data-chrome-border="bevel"] .starplane-app__button {
	box-shadow:
		inset 1px 1px 0 var(--w98-light, #fff),
		inset -1px -1px 0 var(--w98-shadow, #808080);
}
.starplane-app__button:focus-visible {
	outline: 2px solid var(--star-focus-ring, var(--w98-text, #111111));
	outline-offset: 1px;
}
:root[data-chrome-border="bevel"] .starplane-app__button:focus-visible {
	outline: 1px dotted var(--star-focus-ring, var(--w98-text, #111111));
	outline-offset: -3px;
}
.starplane-app__button:hover:not(:disabled) {
	background: var(--star-surface, var(--w98-face-light, #dfdfdf));
	filter: brightness(1.04);
}
.starplane-app__button:active:not(:disabled) {
	filter: brightness(0.94);
}
:root[data-chrome-border="bevel"] .starplane-app__button:active:not(:disabled) {
	filter: none;
	box-shadow:
		inset -1px -1px 0 var(--w98-light, #fff),
		inset 1px 1px 0 var(--w98-shadow, #808080);
}
.starplane-app__button:disabled {
	color: var(--star-text-muted, var(--w98-face-dark, #808080));
	opacity: 0.7;
	cursor: default;
}
/* PRIMARY = a filled accent button (shadcn-grade emphasis), the same on every
   machine — the accent IS the theme's signature hue. */
.starplane-app__button--primary {
	font-weight: 700;
	color: var(--star-accent-on, #fff);
	background: var(--star-accent, var(--w98-title, #000080));
	border-color: var(--star-accent, var(--w98-title, #000080));
}
.starplane-app__button--primary:hover:not(:disabled) {
	background: var(--star-accent-hover, var(--star-accent, #000080));
}
.starplane-app__button--danger {
	color: var(--star-danger, #c40000);
}
.starplane-app__button--ghost {
	background: transparent;
	box-shadow: none;
	border-color: transparent;
}
.starplane-app__button--ghost:hover:not(:disabled) {
	background: var(--star-surface-raised, var(--w98-face-light, #dfdfdf));
}
.starplane-app__input,
.starplane-app__select,
.starplane-app__textarea {
	width: 100%;
	min-width: 0;
	padding: 4px 6px;
	border: 1px solid var(--star-border, var(--w98-dark, #111111));
	border-radius: var(--star-radius-sm, 0px);
	background: var(--star-surface-sunken, var(--w98-light, #fff));
	color: var(--star-text, var(--w98-text, #111111));
	font: inherit;
	font-family: var(--star-font-ui, inherit);
	transition: box-shadow var(--star-dur-fast, 0ms) var(--star-ease, linear),
		border-color var(--star-dur-fast, 0ms) var(--star-ease, linear);
}
/* bevel themes: the field is a SUNKEN well (inset bevel) */
:root[data-chrome-border="bevel"] .starplane-app__input,
:root[data-chrome-border="bevel"] .starplane-app__select,
:root[data-chrome-border="bevel"] .starplane-app__textarea {
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow, #808080),
		inset -1px -1px 0 var(--w98-light, #fff);
}
.starplane-app__input:focus-visible,
.starplane-app__select:focus-visible,
.starplane-app__textarea:focus-visible {
	outline: none;
	border-color: var(--star-accent, var(--w98-title, #000080));
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--star-accent, #000080) 35%, transparent);
}
.starplane-app__textarea {
	min-height: 120px;
	resize: none;
}
.starplane-app__textarea--mono {
	font-family: var(--star-font-mono, "Lucida Console", "Courier New", monospace);
	font-size: 12px;
	line-height: 1.35;
	white-space: pre;
}
.starplane-app__checkbox {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.starplane-app__slider {
	width: 100%;
}
.starplane-app__progress {
	height: 14px;
	border: 1px solid var(--star-border, var(--w98-dark, #111111));
	border-radius: var(--star-radius-sm, 0px);
	background: var(--star-surface-sunken, var(--w98-light, #fff));
	overflow: hidden;
}
.starplane-app__progress-fill {
	height: 100%;
	background: var(--star-accent, var(--w98-title, #000080));
}
.starplane-app__list,
.starplane-app__repeat {
	min-height: 0;
}

/* Columned list/repeat → real grid (minesweeper 9×9, paint 8×8, calendar 7-col,
   calculator button pad). Without this a `list`/`repeat` defaults to a block
   container and its children stack as full-width horizontal bars. The inline
   `display:grid` + `grid-template-columns` + `gap` come from the renderer; this
   only adds track alignment + per-cell shrink. */
.starplane-app__list--grid,
.starplane-app__repeat--grid {
	align-content: start;
	justify-content: stretch;
}

/* Every grid cell may shrink its track (min-width:0 lets the 1fr columns fit a
   narrow window). Cell HEIGHT is content-driven by default — a button grid
   (calculator) sizes each button to its own min-height, NOT to the column width.
   Only `box` cells (game/paint boards) opt into the square 1:1 aspect below. */
.starplane-app__list--grid > *,
.starplane-app__repeat--grid > * {
	min-width: 0;
}

/* Board cells are SQUARE: aspect-ratio 1/1 keeps height == column width so the
   board reads as a grid of squares (minesweeper, paint, dice, tic-tac-toe,
   memory-match, connect-four, char-map, weather/world-clock/calendar boxes).
   Scoped to `box` children ONLY — buttons (calculator) and text (calendar
   weekday header) must NOT be forced square (that was the 172px-tall overlapping
   Calculator bug: a 4-wide button grid in a 720px window made each button square
   ≈ 172px tall, so 4 stacked button rows overlapped). */
.starplane-app__list--grid > .starplane-app__box,
.starplane-app__repeat--grid > .starplane-app__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	aspect-ratio: 1 / 1;
}

/* Buttons laid out in a grid (calculator pad) share their row and size to
   content — fill the column width but keep a sane fixed key height, never the
   square aspect that boards use. */
.starplane-app__list--grid > .starplane-app__button,
.starplane-app__repeat--grid > .starplane-app__button {
	width: 100%;
	min-height: 23px;
	aspect-ratio: auto;
}

/* Keypad grids (calculator-style buttons) are content-height controls, not
   compressible board canvases. If a flex column shrinks the grid container below
   its button rows, the buttons overflow into the next row and intercept clicks. */
.starplane-app__list--grid:has(> .starplane-app__button),
.starplane-app__repeat--grid:has(> .starplane-app__button) {
	flex-shrink: 0;
}
/* Empty list/tape states are a FRAMED SUNKEN WELL — a recessed white inset that
   reads as a deliberate (if empty) Win98 list box, not floating grey text in a
   dead panel. Centered, single-line placeholder; the well fills the pane it
   lives in so the History / Notes sidebar never reads as void grey space. */
.starplane-app__list-empty {
	flex: 1 1 auto;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 10px;
	text-align: center;
	color: var(--star-text-muted, var(--w98-face-dark, #808080));
	font-style: italic;
	background: var(--star-surface-sunken, var(--w98-light, #fff));
	border: 1px solid var(--star-border, var(--w98-dark, #111111));
	border-radius: var(--star-radius-sm, 0px);
}
:root[data-chrome-border="bevel"] .starplane-app__list-empty {
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow, #808080),
		inset -1px -1px 0 var(--w98-light, #fff);
}

/* ── Agent welcome — the boot hero's empty state (agent-chat only) ──────────
   A purposeful, on-canon invitation instead of a lonely italic line: a brand
   diamond mark, a Fraunces headline, and example-prompt chips that fill the
   compose box. Reads the --star-* canon with literal fallbacks. */
.agent-welcome {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 13px;
	padding: 40px 28px;
	text-align: center;
	min-height: 220px;
	color: var(--star-text, #2c2118);
}
.agent-welcome__mark {
	width: 38px;
	height: 38px;
	transform: rotate(45deg);
	background: color-mix(in srgb, var(--star-accent, #dd5a2a) 15%, transparent);
	border: 1.5px solid var(--star-accent, #dd5a2a);
	border-radius: 3px;
	margin-bottom: 2px;
}
.agent-welcome__title {
	font-family: var(--star-font-display, "Fraunces", Georgia, "Times New Roman", serif);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--star-text, #2c2118);
}
.agent-welcome__sub {
	font-family: var(--star-font-ui, ui-sans-serif, system-ui, sans-serif);
	font-size: 13px;
	line-height: 1.55;
	color: var(--star-text-muted, #5a4a38);
	max-width: 360px;
}
.agent-welcome__chips {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	width: 100%;
	max-width: 420px;
	margin-top: 6px;
}
.agent-welcome__chip {
	font-family: var(--star-font-ui, ui-sans-serif, system-ui, sans-serif);
	font-size: 12px;
	font-weight: 500;
	padding: 7px 13px;
	color: var(--star-text, #2c2118);
	background: var(--star-surface-raised, #fbf5e6);
	border: 1px solid var(--star-border, #cbb799);
	border-radius: var(--star-radius-control, 0px);
	cursor: pointer;
	transition:
		border-color var(--star-dur-fast, 120ms) var(--star-ease, ease),
		transform var(--star-dur-fast, 120ms) var(--star-ease, ease),
		background var(--star-dur-fast, 120ms) var(--star-ease, ease);
}
.agent-welcome__chip:hover {
	border-color: var(--star-accent, #dd5a2a);
	background: color-mix(in srgb, var(--star-accent, #dd5a2a) 7%, var(--star-surface-raised, #fbf5e6));
	transform: translateY(-1px);
}
.agent-welcome__chip:active {
	transform: translateY(0);
}
.agent-welcome__chip:focus-visible {
	outline: 2px solid var(--star-accent, #dd5a2a);
	outline-offset: 2px;
}
/* A list that holds its own empty well becomes a flex column so the well can
   grow to fill the reserved pane height (maxHeight on the list caps it). */
.starplane-app__list:has(> .starplane-app__list-empty) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
/* POPULATED DATA WELL (D2). A non-grid list of record rows (File Explorer files,
   Task Manager processes, Recycle Bin items) is a DATA SURFACE — per the spec it
   reads as a SUNKEN WHITE WELL, not rows floating on raw grey face. The empty
   state already wells itself (rule above); this frames the POPULATED state to
   match. Excluded: `--grid` lists (game/paint/calendar boards keep their own face),
   lists that contain their own empty-well (already framed), and lists nested
   INSIDE a `box` (the box already provides the surface — e.g. the Terminal's
   `#0b0b0b` scrollback — and must not be whitewashed). The 1px inner gutter keeps
   the first/last row off the bevel. */
.starplane-app__column > .starplane-app__list:not(.starplane-app__list--grid):not(:has(> .starplane-app__list-empty)),
.demo-window__body > .starplane-app > .starplane-app__list:not(.starplane-app__list--grid):not(:has(> .starplane-app__list-empty)) {
	background: var(--star-surface-sunken, var(--w98-light, #fff));
	border: 1px solid var(--star-border, var(--w98-dark, #111111));
	border-radius: var(--star-radius-sm, 0px);
	padding: 1px;
}
:root[data-chrome-border="bevel"] .starplane-app__column > .starplane-app__list:not(.starplane-app__list--grid):not(:has(> .starplane-app__list-empty)),
:root[data-chrome-border="bevel"] .demo-window__body > .starplane-app > .starplane-app__list:not(.starplane-app__list--grid):not(:has(> .starplane-app__list-empty)) {
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow, #808080),
		inset -1px -1px 0 var(--w98-light, #fff);
}
.starplane-app__box {
	min-width: 0;
}
.starplane-app__box--border {
	border: 1px solid var(--star-border, var(--w98-dark, #111111));
	border-radius: var(--star-radius-sm, 0px);
	background: var(--star-surface, var(--w98-face, #c0c0c0));
	box-shadow: var(--star-shadow-1, none);
}
:root[data-chrome-border="bevel"] .starplane-app__box--border {
	box-shadow:
		inset 1px 1px 0 var(--w98-light, #fff),
		inset -1px -1px 0 var(--w98-shadow, #808080);
}
.starplane-app__box--tappable {
	cursor: pointer;
}
.starplane-app__divider {
	height: 1px;
	background: var(--star-border, var(--w98-shadow, #808080));
	border: 0;
}
.starplane-app__spacer {
	min-height: 1px;
}

/* =========================================================
   Disarto app skins: Notepad + Settings
   ========================================================= */
.starplane-app[data-app-id="notepad"],
.starplane-app[data-app-id="settings"] {
	--disarto-app-bg: var(--star-surface);
	--disarto-app-panel: var(--star-surface-raised);
	--disarto-app-well: var(--star-surface-sunken);
	--disarto-app-text: var(--star-text);
	--disarto-app-muted: var(--star-text-muted);
	--disarto-app-border: var(--star-border);
	--disarto-app-border-strong: var(--star-border-strong);
	--disarto-app-accent: var(--star-accent);
	--disarto-app-accent-hover: var(--star-accent-hover);
	--disarto-app-accent-on: var(--star-accent-on);
	--disarto-app-focus: var(--star-focus-ring);
	--disarto-app-ok: var(--star-ok);

	gap: 12px;
	padding: 14px;
	color: var(--disarto-app-text);
	background: var(--disarto-app-bg);
	border-radius: var(--star-radius-window);
	box-shadow: var(--star-shadow-2);
	font-family: var(--star-font-ui);
}

.starplane-app[data-app-id="notepad"] .starplane-app__box--border,
.starplane-app[data-app-id="settings"] .starplane-app__box--border,
.starplane-app[data-app-id="notepad"] .starplane-app__list:not(.starplane-app__list--grid),
.starplane-app[data-app-id="settings"] .starplane-app__list:not(.starplane-app__list--grid) {
	background: var(--disarto-app-panel);
	border-color: var(--disarto-app-border);
	border-radius: var(--star-radius-window);
	box-shadow: var(--star-shadow-1);
}

.starplane-app[data-app-id="notepad"] .starplane-app__textarea,
.starplane-app[data-app-id="settings"] .starplane-app__input,
.starplane-app[data-app-id="settings"] .starplane-app__select,
.starplane-app[data-app-id="settings"] .starplane-app__textarea {
	background: var(--disarto-app-well);
	border-color: var(--disarto-app-border);
	border-radius: var(--star-radius-control);
	color: var(--disarto-app-text);
	box-shadow: none;
}

.starplane-app[data-app-id="notepad"] .starplane-app__textarea:hover,
.starplane-app[data-app-id="settings"] .starplane-app__input:hover,
.starplane-app[data-app-id="settings"] .starplane-app__select:hover,
.starplane-app[data-app-id="settings"] .starplane-app__textarea:hover {
	background: color-mix(in srgb, var(--disarto-app-accent) 8%, var(--disarto-app-well));
	border-color: var(--disarto-app-border-strong);
}

.starplane-app[data-app-id="notepad"] .starplane-app__textarea:focus-visible,
.starplane-app[data-app-id="settings"] .starplane-app__input:focus-visible,
.starplane-app[data-app-id="settings"] .starplane-app__select:focus-visible,
.starplane-app[data-app-id="settings"] .starplane-app__textarea:focus-visible {
	outline: 2px solid var(--disarto-app-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--disarto-app-focus) 18%, transparent);
}

.starplane-app[data-app-id="notepad"] .starplane-app__button,
.starplane-app[data-app-id="settings"] .starplane-app__button {
	border-color: var(--disarto-app-border);
	border-radius: var(--star-radius-control);
	background: var(--disarto-app-panel);
	box-shadow: var(--star-shadow-1);
	transition:
		background-color var(--star-dur-fast) var(--star-ease),
		border-color var(--star-dur-fast) var(--star-ease),
		box-shadow var(--star-dur-fast) var(--star-ease),
		transform var(--star-dur-fast) var(--star-ease);
}

.starplane-app[data-app-id="notepad"] .starplane-app__button:hover:not(:disabled),
.starplane-app[data-app-id="settings"] .starplane-app__button:hover:not(:disabled) {
	background: color-mix(in srgb, var(--disarto-app-accent) 8%, var(--disarto-app-panel));
	border-color: var(--disarto-app-border-strong);
	box-shadow: var(--star-shadow-2);
	filter: none;
}

.starplane-app[data-app-id="notepad"] .starplane-app__button:active:not(:disabled),
.starplane-app[data-app-id="settings"] .starplane-app__button:active:not(:disabled) {
	transform: translateY(1px);
	box-shadow: var(--star-shadow-1);
	filter: none;
}

.starplane-app[data-app-id="notepad"] .starplane-app__button--primary,
.starplane-app[data-app-id="settings"] .starplane-app__button--primary {
	color: var(--disarto-app-accent-on);
	background: var(--disarto-app-accent);
	border-color: var(--disarto-app-accent);
}

.starplane-app[data-app-id="notepad"] .starplane-app__button--primary:hover:not(:disabled),
.starplane-app[data-app-id="settings"] .starplane-app__button--primary:hover:not(:disabled) {
	background: var(--disarto-app-accent-hover);
	border-color: var(--disarto-app-accent-hover);
}

.starplane-app[data-app-id="notepad"] .starplane-app__text--caption,
.starplane-app[data-app-id="settings"] .starplane-app__text--caption {
	color: var(--disarto-app-muted);
	font-family: var(--star-font-mono);
	font-size: var(--star-text-xs);
	text-transform: uppercase;
}

.starplane-app[data-app-id="notepad"] .starplane-app__text--mono,
.starplane-app[data-app-id="settings"] .starplane-app__text--mono {
	font-family: var(--star-font-mono);
}

.starplane-app[data-app-id="notepad"] .starplane-app__text--title,
.starplane-app[data-app-id="settings"] .starplane-app__text--title {
	font-size: var(--star-text-lg);
	letter-spacing: 0;
}

.starplane-app[data-app-id="settings"] .starplane-app__progress {
	background: var(--disarto-app-well);
	border-color: var(--disarto-app-border);
	border-radius: var(--star-radius-sm);
}

.starplane-app[data-app-id="settings"] .starplane-app__progress-fill {
	background: var(--disarto-app-ok);
}

.starplane-app[data-app-id="notepad"] .starplane-app__box--tappable:hover,
.starplane-app[data-app-id="settings"] .starplane-app__box--tappable:hover {
	background: color-mix(in srgb, var(--disarto-app-accent) 8%, var(--disarto-app-panel));
	border-color: var(--disarto-app-border-strong);
	box-shadow: var(--star-shadow-2);
}

.starplane-app[data-app-id="notepad"] .starplane-app__box--tappable:active,
.starplane-app[data-app-id="settings"] .starplane-app__box--tappable:active {
	transform: translateY(1px);
	box-shadow: var(--star-shadow-1);
}

/* ════════════════════════════════════════════════════════════════════════════
   CONTENT VIBRANCY LADDER (demo P4/P1) — translucent app panes under glass.
   The window is one glass sheet; the app's data wells / cards become near-opaque
   TRANSLUCENT panes (legible, ~0.85) carrying the skylight RIM, so content reads
   as macOS vibrancy MATERIAL instead of flat opaque cards. Scoped to the glass
   profiles (vibrancy/acrylic); win98/nextstep/apple-ii keep their solid wells.
   ════════════════════════════════════════════════════════════════════════════ */
:root[data-chrome-backdrop="vibrancy"] .starplane-app__column > .starplane-app__list:not(.starplane-app__list--grid):not(:has(> .starplane-app__list-empty)),
:root[data-chrome-backdrop="acrylic"] .starplane-app__column > .starplane-app__list:not(.starplane-app__list--grid):not(:has(> .starplane-app__list-empty)),
:root[data-chrome-backdrop="vibrancy"] .demo-window__body > .starplane-app > .starplane-app__list:not(.starplane-app__list--grid):not(:has(> .starplane-app__list-empty)),
:root[data-chrome-backdrop="acrylic"] .demo-window__body > .starplane-app > .starplane-app__list:not(.starplane-app__list--grid):not(:has(> .starplane-app__list-empty)),
:root[data-chrome-backdrop="vibrancy"] .starplane-app__list-empty,
:root[data-chrome-backdrop="acrylic"] .starplane-app__list-empty {
	background: color-mix(in srgb, var(--star-surface-sunken, #fff) 82%, transparent);
	border-color: color-mix(in srgb, var(--star-border, #111111) 55%, transparent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),
		0 1px 3px rgba(0, 0, 0, 0.06);
}
/* cards / framed boxes → vibrant raised pane with the skylight rim */
:root[data-chrome-backdrop="vibrancy"] .starplane-app__box--border,
:root[data-chrome-backdrop="acrylic"] .starplane-app__box--border {
	background: color-mix(in srgb, var(--star-surface, #fff) 72%, transparent);
	border-color: color-mix(in srgb, var(--star-border, #111111) 50%, transparent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
}
/* form fields → translucent sunken well (macOS field) */
:root[data-chrome-backdrop="vibrancy"] .starplane-app__input,
:root[data-chrome-backdrop="vibrancy"] .starplane-app__select,
:root[data-chrome-backdrop="vibrancy"] .starplane-app__textarea,
:root[data-chrome-backdrop="acrylic"] .starplane-app__input,
:root[data-chrome-backdrop="acrylic"] .starplane-app__select,
:root[data-chrome-backdrop="acrylic"] .starplane-app__textarea {
	background: color-mix(in srgb, var(--star-surface-sunken, #fff) 76%, transparent);
	border-color: color-mix(in srgb, var(--star-border, #111111) 55%, transparent);
}
/* buttons → vibrant raised chip with rim */
:root[data-chrome-backdrop="vibrancy"] .starplane-app__button,
:root[data-chrome-backdrop="acrylic"] .starplane-app__button {
	background: color-mix(in srgb, var(--star-surface-raised, #fff) 78%, transparent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ── Type/density rhythm (demo P5/P6) — applies to ALL themes ──
   A real hierarchy: tight tracking on titles, a quiet muted meta tier. Cheap,
   universal, lifts every list/form from "one font size" to intentional. */
.starplane-app__text--title {
	letter-spacing: -0.01em;
}
.starplane-app__text--caption {
	color: var(--star-text-muted, var(--w98-face-dark, #808080));
	letter-spacing: 0.005em;
}

/* =========================================================
   Cascading Start menu panels
   ========================================================= */
.w98-cascade {
	position: fixed;
	z-index: 2147482600;
	min-width: 180px;
	max-width: 320px;
	padding: 2px;
	background: var(--w98-face);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow),
		inset 2px 2px 0 var(--w98-face-light),
		inset -2px -2px 0 #404040,
		2px 2px 0 rgba(0, 0, 0, 0.35);
	font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
	font-size: 11px;
	color: var(--w98-text);
	display: flex;
	flex-direction: column;
	padding: 1px;
}
.w98-cascade .smitem {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 18px 3px 4px;
	color: var(--w98-text);
	background: transparent;
	border: 0;
	font: inherit;
	cursor: pointer;
	position: relative;
	text-align: left;
	min-height: 22px;
}
.w98-cascade .smitem:hover,
.w98-cascade .smitem[data-active="true"] {
	background: var(--w98-menu-blue);
	color: var(--w98-light);
}
.w98-cascade .smicon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	image-rendering: pixelated;
}
.w98-cascade .smitem__label {
	flex: 1;
	white-space: nowrap;
}
.w98-cascade .smitem__chev {
	margin-left: 8px;
}

/* Leaf icons for cascade items (synthesized SVGs, no network) */
.smicon--leaf-notepad {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' shape-rendering='crispEdges'><rect x='3' y='2' width='12' height='15' fill='%23111111'/><rect x='4' y='3' width='10' height='13' fill='%23ffffff'/><rect x='4' y='3' width='10' height='2' fill='%23e0e0e0'/><rect x='5' y='0' width='1' height='4' fill='%23707070'/><rect x='8' y='0' width='1' height='4' fill='%23707070'/><rect x='11' y='0' width='1' height='4' fill='%23707070'/><rect x='5' y='0' width='1' height='1' fill='%23111111'/><rect x='8' y='0' width='1' height='1' fill='%23111111'/><rect x='11' y='0' width='1' height='1' fill='%23111111'/><rect x='5' y='7' width='8' height='1' fill='%231111110a0'/><rect x='5' y='9' width='8' height='1' fill='%231111110a0'/><rect x='5' y='11' width='8' height='1' fill='%231111110a0'/><rect x='5' y='13' width='5' height='1' fill='%231111110a0'/></svg>");
}
.smicon--leaf-calc {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' shape-rendering='crispEdges'><rect x='1' y='1' width='16' height='16' fill='%23111111'/><rect x='2' y='2' width='14' height='14' fill='%23c0c0c0'/><rect x='2' y='2' width='14' height='1' fill='%23ffffff'/><rect x='2' y='2' width='1' height='14' fill='%23ffffff'/><rect x='15' y='3' width='1' height='13' fill='%23808080'/><rect x='3' y='15' width='13' height='1' fill='%23808080'/><rect x='3' y='3' width='12' height='3' fill='%23111111'/><rect x='4' y='4' width='10' height='1' fill='%2300c000'/><rect x='11' y='4' width='3' height='1' fill='%2380ff80'/><rect x='4' y='8' width='2' height='2' fill='%23404040'/><rect x='8' y='8' width='2' height='2' fill='%23404040'/><rect x='12' y='8' width='2' height='2' fill='%23404040'/><rect x='4' y='12' width='2' height='2' fill='%23404040'/><rect x='8' y='12' width='2' height='2' fill='%23404040'/><rect x='12' y='12' width='2' height='2' fill='%23c00000'/></svg>");
}
.smicon--leaf-paint {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' shape-rendering='crispEdges'><path d='M9 3.5 C4.6 3.5 2 5.9 2 9 c0 3.4 3 6 6.6 6 2.2 0 2.3-1.3 2.3-2.1 0-1.1.9-1.3 2-1.7 2-.8 3.1-2.1 3.1-3.7 0-3.4-3.2-4-7-4 z' fill='%23deb887' stroke='%23111111' stroke-width='0.8'/><ellipse cx='5.6' cy='11' rx='1.3' ry='1' fill='%23ffffff' stroke='%23111111' stroke-width='0.5'/><circle cx='5.4' cy='6.4' r='1.1' fill='%23e00000'/><circle cx='8.5' cy='5.3' r='1.1' fill='%23f0d000'/><circle cx='11.5' cy='6.2' r='1.1' fill='%23008000'/><circle cx='13.2' cy='8.4' r='1.1' fill='%231111110d0'/><path d='M16.2 1 L10.6 7.6' stroke='%23111111' stroke-width='2.2'/><path d='M15.8 1.6 L11.4 6.8' stroke='%23c08030' stroke-width='1.1'/><path d='M10.8 7.4 L9.9 8.5' stroke='%23111111' stroke-width='1.8'/><circle cx='9.4' cy='9.2' r='0.9' fill='%23e00000'/></svg>");
}
.smicon--leaf-wordpad {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' shape-rendering='crispEdges'><rect x='2' y='1' width='12' height='16' fill='%23111111'/><rect x='3' y='2' width='10' height='14' fill='%23ffffff'/><rect x='5' y='4' width='6' height='1' fill='%23808080'/><rect x='5' y='6' width='6' height='1' fill='%23808080'/><rect x='5' y='8' width='4' height='1' fill='%23808080'/><path d='M16.5 5.5 L10.5 11.5' stroke='%23111111' stroke-width='2.4'/><path d='M16.1 5.9 L11 11' stroke='%23111111080' stroke-width='1.2'/><polygon points='10.6,11.4 9,13.4 11.2,12.4' fill='%23e8c890' stroke='%23111111' stroke-width='0.4'/><rect x='9' y='13' width='1' height='1' fill='%23111111'/></svg>");
}
.smicon--leaf-game {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' shape-rendering='crispEdges'><g transform='rotate(-10 6 9)'><rect x='2' y='2' width='9' height='13' fill='%23111111'/><rect x='3' y='3' width='7' height='11' fill='%23ffffff'/><path d='M6.5 5 q-1.6 0 -1.6 1.6 q0 1.6 1.6 2.6 q1.6 -1 1.6 -2.6 q0 -1.6 -1.6 -1.6 z' fill='%23c00000'/></g><rect x='8' y='3' width='9' height='13' fill='%23111111'/><rect x='9' y='4' width='7' height='11' fill='%23ffffff'/><path d='M12.5 6.2 l1.8 2.6 -1.8 2.6 -1.8 -2.6 z' fill='%23c00000'/></svg>");
}
.smicon--leaf-ie {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M13.6 6.9 A5.4 5.4 0 1 0 13.4 11.4' fill='none' stroke='%2306246a' stroke-width='4.4'/><rect x='4.6' y='7.6' width='9.8' height='3' fill='%2306246a'/><path d='M13.6 6.9 A5.4 5.4 0 1 0 13.4 11.4' fill='none' stroke='%232a6fe8' stroke-width='3'/><rect x='5' y='8' width='9' height='2.2' fill='%232a6fe8'/><ellipse cx='9' cy='8.6' rx='8.4' ry='2.8' fill='none' stroke='%23f0c428' stroke-width='1.1' transform='rotate(-19 9 8.6)'/></svg>");
}
.smicon--leaf-oe {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' shape-rendering='crispEdges'><rect x='1' y='4' width='16' height='11' fill='%23111111'/><rect x='2' y='5' width='14' height='9' fill='%23ffffff'/><rect x='2' y='13' width='14' height='1' fill='%23d0d0d0'/><path d='M2 5.5 L9 11 L16 5.5' fill='none' stroke='%23808080'/><path d='M2 13.5 L7.4 9.4 M16 13.5 L10.6 9.4' fill='none' stroke='%23c8c8c8'/><path d='M13 2.6 a6.4 6.4 0 0 1 3.4 7.4' fill='none' stroke='%232a6fe8' stroke-width='1.4'/><polygon points='13.8,0.6 10.8,2.8 14.2,4.4' fill='%232a6fe8'/></svg>");
}
.smicon--leaf-dos {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' shape-rendering='crispEdges'><rect x='1' y='2' width='16' height='14' fill='%23111111'/><rect x='2' y='3' width='14' height='12' fill='%23c0c0c0'/><rect x='3' y='4' width='12' height='10' fill='%23111111'/><rect x='4' y='6' width='1' height='1' fill='%23ffffff'/><rect x='5' y='7' width='1' height='1' fill='%23ffffff'/><rect x='6' y='8' width='1' height='1' fill='%23ffffff'/><rect x='5' y='9' width='1' height='1' fill='%23ffffff'/><rect x='4' y='10' width='1' height='1' fill='%23ffffff'/><rect x='8' y='10' width='3' height='1' fill='%23c0c0c0'/></svg>");
}
.smicon--leaf-doc {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' shape-rendering='crispEdges'><polygon points='3,1 12,1 16,5 16,17 3,17' fill='%23111111'/><polygon points='4,2 11,2 15,6 15,16 4,16' fill='%23ffffff'/><polygon points='11,2 11,6 15,6' fill='%23c0c0c0'/><path d='M11 2 L11 6 L15 6' fill='none' stroke='%23111111' stroke-width='0.8'/><rect x='6' y='8' width='7' height='1' fill='%23808080'/><rect x='6' y='10' width='7' height='1' fill='%23808080'/><rect x='6' y='12' width='5' height='1' fill='%23808080'/></svg>");
}
.smicon--leaf-settings {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' shape-rendering='crispEdges'><rect x='7.5' y='1' width='3' height='16' fill='%23111111'/><rect x='1' y='7.5' width='16' height='3' fill='%23111111'/><rect x='3' y='3' width='3' height='3' fill='%23111111'/><rect x='12' y='3' width='3' height='3' fill='%23111111'/><rect x='3' y='12' width='3' height='3' fill='%23111111'/><rect x='12' y='12' width='3' height='3' fill='%23111111'/><circle cx='9' cy='9' r='6' fill='%23111111'/><rect x='8.2' y='2.4' width='1.6' height='13.2' fill='%23a0a0a0'/><rect x='2.4' y='8.2' width='13.2' height='1.6' fill='%23a0a0a0'/><rect x='3.8' y='3.8' width='1.6' height='1.6' fill='%23a0a0a0'/><rect x='12.6' y='3.8' width='1.6' height='1.6' fill='%23a0a0a0'/><rect x='3.8' y='12.6' width='1.6' height='1.6' fill='%23a0a0a0'/><rect x='12.6' y='12.6' width='1.6' height='1.6' fill='%23a0a0a0'/><circle cx='9' cy='9' r='4.6' fill='%23a0a0a0'/><path d='M5.6 7 a4.6 4.6 0 0 1 3.4 -2' fill='none' stroke='%23e0e0e0' stroke-width='1.2'/><circle cx='9' cy='9' r='2' fill='%23111111'/><circle cx='9' cy='9' r='1.3' fill='%23ffffff'/></svg>");
}
.smicon--leaf-find {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><circle cx='7.5' cy='7.5' r='5.4' fill='%23111111'/><circle cx='7.5' cy='7.5' r='3.9' fill='%23b8e0e8'/><path d='M5.2 6.2 a3 3 0 0 1 1.8 -1.4' fill='none' stroke='%23ffffff' stroke-width='1.3'/><path d='M11.4 11.4 L15.6 15.6' stroke='%23111111' stroke-width='3.6'/><path d='M11.7 11.7 L15.1 15.1' stroke='%23800000' stroke-width='1.8'/></svg>");
}
.smicon--default {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' shape-rendering='crispEdges'><rect x='1' y='2' width='16' height='14' fill='%23111111'/><rect x='2' y='3' width='14' height='12' fill='%23c0c0c0'/><rect x='2' y='3' width='14' height='2' fill='%23111111080'/><rect x='14' y='3' width='1' height='1' fill='%23c0c0c0'/><rect x='3' y='6' width='12' height='8' fill='%23ffffff'/><rect x='4' y='7' width='6' height='1' fill='%23808080'/><rect x='4' y='9' width='8' height='1' fill='%23808080'/><rect x='4' y='11' width='5' height='1' fill='%23808080'/></svg>");
}

/* =========================================================
   Hand-rolled context menu (right-click)
   ========================================================= */
.w98-ctxmenu {
	position: fixed;
	z-index: 2147483000;
	min-width: 160px;
	max-width: 320px;
	padding: 2px;
	background: var(--w98-face);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow),
		inset 2px 2px 0 var(--w98-face-light),
		inset -2px -2px 0 #404040,
		2px 2px 0 rgba(0, 0, 0, 0.35);
	font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
	font-size: 11px;
	color: var(--w98-text);
	display: flex;
	flex-direction: column;
}
.w98-ctxmenu__item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 3px 22px 3px 22px;
	background: transparent;
	border: 0;
	font: inherit;
	color: var(--w98-text);
	cursor: pointer;
	text-align: left;
	min-height: 22px;
}
.w98-ctxmenu__item[data-disabled="true"] {
	color: var(--w98-shadow);
	cursor: default;
	pointer-events: none;
	text-shadow: 1px 1px 0 var(--w98-light);
}
.w98-ctxmenu__item:hover:not([data-disabled="true"]) {
	background: var(--w98-menu-blue);
	color: var(--w98-light);
}
.w98-ctxmenu__label {
	flex: 1;
	white-space: nowrap;
}
.w98-ctxmenu__acc {
	margin-left: auto;
	color: inherit;
	opacity: 0.85;
}
.w98-ctxmenu__sep {
	height: 0;
	margin: 2px 2px;
	border-top: 1px solid var(--w98-shadow);
	border-bottom: 1px solid var(--w98-light);
}

/* =========================================================
   Run dialog
   ========================================================= */
.w98-run-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.w98-run-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.w98-run-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' shape-rendering='crispEdges'><rect x='2' y='8' width='28' height='20' fill='%23dfdfdf' stroke='%23111111'/><rect x='2' y='8' width='28' height='4' fill='%230a246a'/><rect x='4' y='14' width='10' height='2' fill='%23111111'/><rect x='4' y='18' width='14' height='2' fill='%23111111'/><rect x='4' y='22' width='8' height='2' fill='%23111111'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
}
.w98-run-prompt {
	font: 11px/1.4 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
}
.w98-run-field {
	display: flex;
	align-items: center;
	gap: 8px;
}
.w98-run-label {
	font: 11px/1 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
}
.w98-run-input {
	flex: 1;
	min-width: 220px;
	padding: 2px 4px;
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow),
		inset -1px -1px 0 var(--w98-face-light);
	background: var(--w98-light);
	font: 12px/1.2 "Lucida Console", "Courier New", monospace;
	color: var(--w98-text);
	border-radius: 0;
	outline: 0;
}

/* =========================================================
   Open / Save dialog (mock)
   ========================================================= */
.w98-open-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 360px;
}
.w98-open-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
}
.w98-open-label {
	font: 11px/1 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
}
.w98-open-combo {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 4px;
	background: var(--w98-light);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow),
		inset -1px -1px 0 var(--w98-face-light);
	font: 11px/1.2 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
}
.w98-open-combo--inline {
	flex: none;
	min-width: 140px;
}
.w98-open-combo-icon {
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'><polygon points='1,4 4,4 5,2 13,2 13,12 1,12' fill='%23ffe082' stroke='%23111111'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
}
.w98-open-combo-arrow {
	margin-left: auto;
	width: 12px;
	height: 12px;
	background: var(--w98-face);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow);
	position: relative;
}
.w98-open-combo-arrow::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><polygon points='2,3 8,3 5,7' fill='%23111111'/></svg>");
	background-size: 8px 8px;
	background-position: center;
	background-repeat: no-repeat;
}
.w98-open-list {
	min-height: 140px;
	background: var(--w98-light);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow),
		inset -1px -1px 0 var(--w98-face-light);
	padding: 4px;
	outline: 0;
}
.w98-open-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 4px;
	font: 11px/1.2 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
	color: var(--w98-text);
	cursor: pointer;
}
.w98-open-item[data-selected="true"] {
	background: var(--w98-menu-blue);
	color: var(--w98-light);
}
.w98-open-item-icon {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-size: contain;
}
.w98-open-item-icon--doc,
.w98-open-item-icon--notepad {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><polygon points='3,2 10,2 13,5 13,14 3,14' fill='%23ffffff' stroke='%23111111'/><polyline points='10,2 10,5 13,5' fill='none' stroke='%23111111'/><line x1='5' y1='7' x2='11' y2='7' stroke='%230a246a'/><line x1='5' y1='9' x2='11' y2='9' stroke='%230a246a'/><line x1='5' y1='11' x2='10' y2='11' stroke='%230a246a'/></svg>");
}
.w98-open-item-icon--run {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><rect x='2' y='4' width='12' height='10' fill='%23dfdfdf' stroke='%23111111'/><rect x='2' y='4' width='12' height='2' fill='%230a246a'/><rect x='4' y='8' width='4' height='2' fill='%23111111'/></svg>");
}
.w98-open-fields {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.w98-open-field {
	display: flex;
	align-items: center;
	gap: 8px;
}
.w98-open-input {
	flex: 1;
	padding: 2px 4px;
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow),
		inset -1px -1px 0 var(--w98-face-light);
	background: var(--w98-light);
	font: 11px/1.2 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
	color: var(--w98-text);
	border-radius: 0;
	outline: 0;
}

/* =========================================================
   Shut Down dialog
   ========================================================= */
.w98-shutdown-body {
	min-width: 320px;
}
.w98-shutdown-row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.w98-shutdown-icon {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'><defs><linearGradient id='clouds' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%2300a8ff'/><stop offset='1' stop-color='%230058ff'/></linearGradient></defs><rect x='1' y='1' width='40' height='40' fill='url(%23clouds)' stroke='%23111111'/><ellipse cx='14' cy='30' rx='10' ry='4' fill='%23ffffff'/><ellipse cx='26' cy='26' rx='12' ry='5' fill='%23ffffff'/><rect x='6' y='6' width='30' height='2' fill='%23ffffff' opacity='0.5'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
}
.w98-shutdown-prompt {
	flex: 1;
}
.w98-shutdown-title {
	font: 700 11px/1.3 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
	margin-bottom: 8px;
}
.w98-shutdown-options {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.w98-shutdown-option {
	display: flex;
	align-items: center;
	gap: 6px;
	font: 11px/1.2 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
	cursor: pointer;
}
.w98-shutdown-option input[type="radio"] {
	margin: 0;
	accent-color: var(--w98-menu-blue);
}

/* MS-DOS body */
.w98-msdos-body {
	font: 14px/1.4 "Lucida Console", "Courier New", monospace;
	background: #111111;
	color: #c0c0c0;
	padding: 16px;
	min-height: 80px;
}

/* =========================================================
   Safe-to-turn-off overlay
   ========================================================= */
.w98-safe-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483500;
	background: #111111;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 36px;
	cursor: default;
}
.w98-safe-text {
	color: #f5a623;
	font: 700 38px/1.25 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
	letter-spacing: 0.04em;
	text-align: center;
	text-shadow: 0 0 6px rgba(245, 166, 35, 0.4);
	user-select: none;
}
.w98-safe-reboot {
	background: transparent;
	border: 1px dashed rgba(245, 166, 35, 0.4);
	color: #f5a623;
	padding: 6px 14px;
	font: 11px/1.2 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
	cursor: pointer;
	opacity: 0.6;
}
.w98-safe-reboot:hover {
	opacity: 1;
}

/* Dim taskbar + windows when shutting down */
.w98-desktop[data-shutdown="true"] {
	filter: brightness(0.35) contrast(0.9);
	pointer-events: none;
}

/* =========================================================
   Toast (mini status bubble above taskbar)
   ========================================================= */
.w98-toast-host {
	position: fixed;
	right: 14px;
	bottom: 40px;
	z-index: 2147483200;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-end;
	pointer-events: none;
}
.w98-toast {
	background: var(--w98-face);
	border: 1px solid var(--w98-dark);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow),
		inset 2px 2px 0 var(--w98-face-light),
		inset -2px -2px 0 #404040,
		2px 2px 0 rgba(0, 0, 0, 0.35);
	padding: 6px 12px;
	font: 700 11px/1.3 "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
	color: var(--w98-text);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 180ms ease-out, transform 180ms ease-out;
	pointer-events: auto;
	max-width: 320px;
}
.w98-toast[data-visible="true"] {
	opacity: 1;
	transform: translateY(0);
}

/* The hidden attribute must always win over the task-button flex display. */
.w98-tasks button[hidden] {
	display: none;
}

/* Icon-pack SVG injected into 16px icon slots (e.g. Minesweeper). */
.demo-icon--inline-svg {
	background: none;
}

.demo-icon--inline-svg > svg {
	width: 16px;
	height: 16px;
	display: block;
	image-rendering: pixelated;
}

/* ── Start menu ──────────────────────────────────────────────────────────── */
.w98-startmenu__backdrop {
	position: fixed;
	inset: 0;
	z-index: 998;
}
.w98-startmenu {
	position: absolute;
	left: 0;
	bottom: 28px;
	z-index: 999;
	display: flex;
	min-width: 258px;
	overflow: visible;
	background: var(--star-chrome-start-menu-bg, var(--star-surface, var(--w98-face, #c0c0c0)));
	border: var(--star-chrome-start-menu-border, 1px solid var(--star-border, var(--w98-dark, #111111)));
	border-radius: var(--star-chrome-start-menu-radius, var(--star-radius-window, 0px));
	box-shadow: var(--star-chrome-start-menu-shadow, var(--star-shadow-3, 2px 2px 0 rgba(0, 0, 0, 0.4)));
	transform-origin: bottom left;
}
/* win98/NeXT keep the 2-tone raised panel bevel + square corners. */
:root[data-chrome-border="bevel"] .w98-startmenu {
	border: var(--star-chrome-start-menu-bevel-border, 2px solid);
	border-color: var(--star-chrome-start-menu-bevel-border-color, var(--star-surface-sunken, #fff) var(--star-border, #404040)
		var(--star-border, #404040) var(--star-surface-sunken, #fff));
	border-radius: 0;
}
/* acrylic/vibrancy eras: the menu is a translucent blurred sheet. */
:root[data-chrome-backdrop="acrylic"] .w98-startmenu,
:root[data-chrome-backdrop="vibrancy"] .w98-startmenu {
	background: var(--star-chrome-start-menu-glass-bg, color-mix(in srgb, var(--star-surface, #c0c0c0) 82%, transparent));
	backdrop-filter: var(--star-chrome-start-menu-glass-filter, blur(24px) saturate(1.35));
	-webkit-backdrop-filter: var(--star-chrome-start-menu-glass-filter, blur(24px) saturate(1.35));
}
/* Windows 11 ACRYLIC START PANEL — high-fidelity Fluent. A light, near-opaque
   acrylic sheet (legible over any wallpaper), rounded-8, a hairline Fluent
   border, a top "reveal" rim highlight, and a deep soft drop. The blur samples
   the desktop behind it. Token-driven with literal fallbacks (standalone-
   contract). Placed AFTER the shared acrylic rule so it wins for win11 only.
   GPU-safe: blur composites; the open animation is transform/opacity only. */
:root[data-theme="win11"] .w98-startmenu {
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--star-surface-raised, #ffffff) 86%, transparent) 0%,
			color-mix(in srgb, var(--star-surface, #f9f9fb) 90%, transparent) 100%);
	border: 1px solid color-mix(in srgb, var(--star-text, #1a1a1a) 9%, transparent);
	border-radius: var(--star-radius-window, 8px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		var(--star-shadow-3, 0 16px 40px rgba(0, 0, 0, 0.18));
	backdrop-filter: blur(24px) saturate(1.3);
	-webkit-backdrop-filter: blur(24px) saturate(1.3);
}
/* The menu is always mounted (one live reactive scope; see client.tsx) and
   shown/hidden via this flag — closed = removed from layout + hit-testing. */
.w98-startmenu[data-open="false"] {
	display: none;
}
/* Open with a GPU-safe rise+fade (transform/opacity only). win98's 0ms duration
   collapses this to an instant pop — era-true. */
.w98-startmenu[data-open="true"] {
	animation: star-menu-rise var(--star-dur-base, 0ms) var(--star-ease, linear);
}
@keyframes star-menu-rise {
	from { opacity: 0; transform: translateY(6px) scale(0.99); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.w98-startmenu__rail {
	width: 26px;
	background: linear-gradient(180deg,
		var(--star-accent-hover, #1084d0),
		var(--star-accent, #000080));
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 8px 0;
}
.w98-startmenu__brand {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: var(--star-accent-on, #fff);
	opacity: 0.88;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 1px;
}
.w98-startmenu__brand::first-letter {
	color: var(--star-accent-on, #fff);
	opacity: 1;
}
.w98-startmenu__items {
	width: 226px;
	flex: 0 0 226px;
	display: flex;
	flex-direction: column;
	padding: 2px;
	/* TOP LEVEL is now just the handful of CATEGORY rows — short enough never to
	   overflow. overflow must stay VISIBLE so each category's cascading submenu
	   (absolutely positioned at left:100%) can escape to the right of the menu
	   instead of being clipped. The submenu caps its OWN height + scrolls. */
	max-height: calc(100vh - 28px - 8px);
	overflow: visible;
}

/* A category SECTION: a header label + its program items. Authentic Win98
   grouped programs under labeled separators; this is the same shape. */
.w98-startmenu__section {
	display: flex;
	flex-direction: column;
}
.w98-startmenu__section + .w98-startmenu__section {
	margin-top: 2px;
	border-top: 1px solid var(--w98-shadow, #404040);
	box-shadow: 0 1px 0 var(--w98-light, #ffffff);
}
.w98-startmenu__section-label {
	padding: 3px 8px 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--w98-shadow, #404040);
	user-select: none;
	pointer-events: none;
}

.w98-startmenu__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 24px 4px 8px;
	margin: 1px 2px;
	background: transparent;
	border: 0;
	border-radius: var(--star-radius-sm, 0px);
	text-align: left;
	font-size: 13px;
	color: var(--star-text, var(--w98-text, #111111));
	cursor: pointer;
	transition: background-color var(--star-dur-fast, 0ms) var(--star-ease, linear);
}
.w98-startmenu__item:hover,
.w98-startmenu__item:focus-visible {
	background: var(--star-accent, #000080);
	color: var(--star-accent-on, #fff);
	outline: none;
}
/* The real 32×32 pixel-art app icon, rendered at 20px in the menu. The inner
   <svg> is sized to fill; image-rendering:pixelated keeps the crispEdges look. */
.w98-startmenu__item-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
}
.w98-startmenu__item-icon > svg {
	width: 20px;
	height: 20px;
	image-rendering: pixelated;
}

/* ── Two-tier cascading Start menu ───────────────────────────────────────────
   Top level = CATEGORY rows; hovering one cascades its app SUBMENU to the right.
   Each category row is the positioning anchor for its absolutely-placed submenu;
   the submenu sits flush against the menu's right edge (left:100%) with NO gap,
   so the pointer can travel from the category into the submenu without flicker.
   These add structure only — they reuse the existing win98 --w98-* token VALUES
   and do not alter any of them. */
.w98-startmenu__category {
	position: relative;
	display: flex;
	flex-direction: column;
}
/* The category row reserves space for the right chevron and keeps the highlight
   sticky while its submenu is open (data-active="true"). */
.w98-startmenu__category-btn {
	width: 100%;
	padding-right: 18px;
}
.w98-startmenu__category[data-active="true"] > .w98-startmenu__category-btn {
	background: var(--star-accent, #000080);
	color: var(--star-accent-on, #fff);
}
.w98-startmenu__chevron {
	margin-left: auto;
	padding-left: 8px;
	font-size: 9px;
	line-height: 1;
	flex: 0 0 auto;
}
/* The cascading submenu: defaults to the RIGHT of the menu, top-aligned to its
   category row. client.tsx measures the live anchor + natural submenu size on
   open/resize and overrides top/left/max-height only when a viewport edge would
   clip it; the default keeps the classic no-gap cascade for short categories. */
.w98-startmenu__submenu {
	position: absolute;
	left: 100%;
	top: 0;
	margin-top: -2px;
	min-width: 214px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	padding: 2px;
	background: var(--star-surface, var(--w98-face, #c0c0c0));
	border: 1px solid var(--star-border, var(--w98-dark, #111111));
	border-radius: var(--star-radius-window, 0px);
	box-shadow: var(--star-shadow-3, 2px 2px 0 rgba(0, 0, 0, 0.4));
	/* A long category can exceed the desktop — client.tsx shifts it upward first,
	   then this cap + scroll becomes the fallback for lists taller than the viewport. */
	max-height: calc(100vh - 28px - 8px);
	max-width: calc(100vw - 16px);
	overflow-y: auto;
	overflow-x: hidden;
}
.w98-startmenu__subitem {
	width: 100%;
}
.w98-startmenu__category-btn .w98-startmenu__item-label,
.w98-startmenu__subitem .w98-startmenu__item-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Pinned agent launcher (Star Pilot) — the headline entry above the categories.
   Bolder + a touch larger so it reads as the primary action. */
.w98-startmenu__pinned {
	font-weight: 700;
	padding-top: 6px;
	padding-bottom: 6px;
}
.w98-startmenu__pinned .w98-startmenu__item-icon {
	font-size: 16px;
	line-height: 1;
}
.w98-startmenu__pinned-sep {
	height: 0;
	margin: 2px 6px;
	border-top: 1px solid var(--w98-shadow, #404040);
	box-shadow: 0 1px 0 var(--w98-light, #ffffff);
}

/* =========================================================
   Title-bar drag (optimistic move) + Infinity-Strip layout
   ========================================================= */

/* While dragging, the bar is grabbing and the window text never selects.
   GPU-safe: only transform/opacity are touched by the renderer's inline style;
   this rule adds the cursor + selection guard. */
.demo-window--dragging {
	cursor: grabbing;
	user-select: none;
}
.demo-window--dragging .demo-window__bar {
	cursor: grabbing;
}

/* ── Windows host — freeform (layoutMode === "freeform") ─────────────────────
   ONE always-mounted host wraps the window <For> in both modes (the BUG-2 fix:
   no <Show> branch swap, so a window opened after exiting strip renders at once).
   In freeform the host must be LAYOUT-TRANSPARENT so each window's own
   `position: absolute` still resolves against `.w98-desktop` exactly as a direct
   child would — `display: contents` removes the host's own box from the tree,
   leaving the windows positioned against the desktop. */
.w98-windows-host--freeform {
	display: contents;
}

/* ── The Infinity-Strip lane (layoutMode === "strip") ────────────────────────
   A horizontally-scrollable lane that holds the server-arranged windows in
   source order. The windows themselves switch to position:relative + a fixed
   flex-basis (their server width) via the renderer's inline style, so the lane
   lays them out left-to-right at their real widths. */
.w98-strip {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	/* sit above the 28px taskbar, below it stays clickable */
	bottom: 28px;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 6px;
	padding: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	/* INSTANT wheel scroll — `scroll-behavior: smooth` animated EVERY `scrollLeft +=`
	 * increment from the wheel handler over ~400ms, so rapid wheel ticks queued and the
	 * strip crawled (operator: "horizontal scroll very slow"). Auto = wheel is immediate;
	 * programmatic "scroll to window" jumps opt into smooth explicitly where needed. */
	scroll-behavior: auto;
	/* Hidden scrollbar in infinity mode (operator) — still fully scrollable via
	   wheel/drag; the bar itself is visual noise on the lane. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* grab affordance on the lane background (drag-to-scroll) */
	cursor: grab;
	/* keep the strip a self-contained band; windows can't escape vertically */
	z-index: 1;
}
.w98-strip::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}
.w98-strip:active {
	cursor: grabbing;
}

/* A window inside the strip: the renderer sets flex-basis to the server width;
   this guards the minimum so a tiny window still reads as a card, and keeps the
   chrome from collapsing. The title-bar drag is a no-op in strip mode (the bar
   pointerdown bails on strip), so there's no fight with lane drag-to-scroll. */
.w98-strip > .demo-window {
	position: relative;
	flex-shrink: 0;
	min-width: 220px;
	max-width: none;
	height: 100%;
	/* a real window already paints its own bevel; no extra inset needed */
}
.w98-strip > .demo-window .demo-window__bar {
	/* default grab cursor is misleading in strip mode (bar drag is disabled) */
	cursor: default;
}

/* In strip mode the desktop icons stay put under the lane; the lane covers them
   visually but they remain reachable when the strip empties. No change needed —
   the lane has its own background-less band so the teal desktop shows through. */
.w98-desktop--strip .starplane-deskicons {
	/* keep icons visible at the far-left gutter behind the lane padding */
	z-index: 0;
}

/* ── Infinity ∞ toggle button (system tray) ──────────────────────────────────
   A small raised tray button; sunken + tinted when the strip is active. */
.w98-infinity {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0 2px;
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	color: var(--star-text, var(--w98-text, #111111));
	background: var(--star-surface, var(--w98-face, #c0c0c0));
	border: 1px solid var(--star-border, var(--w98-dark, #111111));
	border-radius: var(--star-radius-control, 0px);
	box-shadow: var(--star-shadow-1,
		inset 1px 1px 0 var(--w98-light, #fff),
		inset -1px -1px 0 var(--w98-shadow, #808080));
	cursor: pointer;
	font-family: inherit;
	transition:
		background-color var(--star-dur-fast, 0ms) var(--star-ease, linear),
		box-shadow var(--star-dur-fast, 0ms) var(--star-ease, linear);
}
.w98-infinity:hover {
	background: var(--star-surface-raised, var(--w98-face-light, #dfdfdf));
}
:root[data-chrome-border="bevel"] .w98-infinity:active,
:root[data-chrome-border="bevel"] .w98-infinity[data-active="true"] {
	box-shadow:
		inset 1px 1px 0 var(--star-border, var(--w98-shadow, #808080)),
		inset -1px -1px 0 var(--star-surface-sunken, var(--w98-light, #fff));
}
.w98-infinity[data-active="true"] {
	color: var(--star-accent, var(--w98-title, #000080));
	background-color: var(--star-surface-raised, var(--w98-face-dark, #808080));
}
.w98-infinity:focus-visible {
	outline: 1px dotted var(--star-focus-ring, var(--w98-dark, #111111));
	outline-offset: -3px;
}

/* ── Theme switch (tray) — Layer 1.5 client-side theme cycle ───────────────────
   A raised Win98 tray button labelled with the active theme name. Drawn from
   theme vars so it re-skins itself when the theme switches. */
.w98-theme-switch {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 18px;
	padding: 0 7px 0 6px;
	margin: 0 2px;
	/* Stay ABOVE the click-away backdrop (z 8999) so the switch itself remains
	   clickable to toggle the gallery closed; the backdrop only catches clicks
	   OFF the switch + gallery. */
	position: relative;
	z-index: 9001;
	font-size: 11px;
	line-height: 1;
	color: var(--star-text, var(--w98-text, #111111));
	background: var(--star-surface, var(--w98-face, #c0c0c0));
	border: 1px solid var(--star-border, var(--w98-dark, #111111));
	border-radius: var(--star-radius-control, 0px);
	box-shadow: var(--star-shadow-1,
		inset 1px 1px 0 var(--w98-light, #fff),
		inset -1px -1px 0 var(--w98-shadow, #808080));
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	transition:
		background-color var(--star-dur-fast, 0ms) var(--star-ease, linear),
		box-shadow var(--star-dur-fast, 0ms) var(--star-ease, linear);
}
/* A live accent swatch dot before the theme name — the switch reads as a real,
   labelled control (not a bare text run), and the dot IS the active theme. */
.w98-theme-switch::before {
	content: "";
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--star-accent, var(--w98-menu-blue, #000080));
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 6px -1px var(--star-accent, #000080);
}
.w98-theme-switch:hover {
	background: var(--star-surface-raised, var(--w98-face-light, #dfdfdf));
}
:root[data-chrome-border="bevel"] .w98-theme-switch:active {
	box-shadow:
		inset 1px 1px 0 var(--star-border, var(--w98-shadow, #808080)),
		inset -1px -1px 0 var(--star-surface-sunken, var(--w98-light, #fff));
}
.w98-theme-switch:focus-visible {
	outline: 1px dotted var(--star-focus-ring, var(--w98-dark, #111111));
	outline-offset: -3px;
}

/* ── Theme gallery click-away backdrop ──
   Full-viewport scrim under the gallery (z 9000); a click off the gallery
   dismisses it. Invisible — it's a hit-target, not a dimmer. */
.w98-theme-gallery__backdrop {
	position: fixed;
	inset: 0;
	z-index: 8999;
}

/* ── Toast stack — the DEAD-CLICK cure ──
   A denied/failed human intent surfaces here instead of vanishing. Bottom-right
   above the taskbar; token-driven; top accent by kind; GPU-safe slide-in. */
.w98-toaster {
	position: fixed;
	right: 10px;
	bottom: 38px;
	z-index: 200000;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: min(360px, 80vw);
	pointer-events: none;
}
.w98-toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	font-size: 12px;
	line-height: 1.25;
	color: var(--star-text, var(--w98-text, #111111));
	background: var(--star-surface, var(--w98-face, #c0c0c0));
	border: 1px solid var(--star-border, var(--w98-dark, #111111));
	border-top: 3px solid var(--star-danger, #c40000);
	border-radius: var(--star-radius-control, 0px);
	box-shadow: var(--star-shadow-3, 2px 2px 0 rgba(0, 0, 0, 0.4));
	animation: star-toast-in var(--star-dur-base, 160ms) var(--star-ease, ease-out);
}
.w98-toast[data-kind="info"] {
	border-top-color: var(--star-info, #000080);
}
.w98-toast__icon {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--star-danger, #c40000);
}
.w98-toast[data-kind="info"] .w98-toast__icon {
	color: var(--star-info, #000080);
}
.w98-toast__text {
	min-width: 0;
}
@keyframes star-toast-in {
	from { opacity: 0; transform: translateX(12px); }
	to { opacity: 1; transform: translateX(0); }
}

/* ════════════════════════════════════════════════════════════════════════════
   AGENT CHAT + MARKDOWN  (web-shell chat-app upgrade)
   Win98-authentic: MS Sans Serif body, Lucida Console for code; theme vars only
   (near-neutral darks only). GPU-safe animation —
   transform + opacity only.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Chat shell: toolbar · thinking · scroll-locked transcript · compose ── */
.chat-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	position: relative;
}
/* Grouped chat header bar — canon by default (flat, bottom hairline), win98
   bevel preserved under [data-chrome-border="bevel"] for the Skins theme. */
.chat-toolbar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 4px 8px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--star-border, var(--w98-dark, #808080));
	flex: 0 0 auto;
}
.chat-toolbar__spacer { flex: 1 1 auto; }
.chat-toolbar__hint {
	font-size: 11px;
	font-family: var(--star-font-ui, inherit);
	color: var(--star-text-muted, var(--w98-face-dark, #808080));
	white-space: nowrap;
}
.chat-toolbar__btn {
	min-height: 22px;
	padding: 3px 10px;
	border: 1px solid var(--star-border, var(--w98-dark, #111111));
	border-radius: var(--star-radius-control, 0px);
	background: var(--star-surface-raised, var(--w98-face, #c0c0c0));
	color: var(--star-text, var(--w98-text, #111111));
	font: inherit;
	font-family: var(--star-font-ui, inherit);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition:
		border-color var(--star-dur-fast, 0ms) var(--star-ease, ease),
		background var(--star-dur-fast, 0ms) var(--star-ease, ease);
}
.chat-toolbar__btn:hover {
	background: var(--star-surface, var(--w98-face-light, #dfdfdf));
	border-color: var(--star-accent, var(--w98-dark, #111111));
}
.chat-toolbar__btn:focus-visible {
	outline: 2px solid var(--star-accent, var(--w98-text, #111111));
	outline-offset: 1px;
}
/* win98/NeXT bevel restored for the retro Skins */
:root[data-chrome-border="bevel"] .chat-toolbar {
	border-bottom: none;
	padding: 2px 2px 4px;
	margin-bottom: 0;
}
:root[data-chrome-border="bevel"] .chat-toolbar__btn {
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow);
}
:root[data-chrome-border="bevel"] .chat-toolbar__btn:active {
	box-shadow:
		inset -1px -1px 0 var(--w98-light),
		inset 1px 1px 0 var(--w98-shadow);
}
:root[data-chrome-border="bevel"] .chat-toolbar__btn:focus-visible {
	outline: 1px dotted var(--w98-text);
	outline-offset: -3px;
}

/* The transcript is the only scroller; compose + thinking stay pinned. */
.chat-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
}
/* The AppPlan list inside the scroller must not double-scroll. */
.chat-scroll .starplane-app__list { max-height: none !important; overflow: visible !important; }

/* "↓ Latest" jump button when the human scrolled up to read. */
.chat-jump {
	position: absolute;
	right: 12px;
	bottom: 96px;
	z-index: 5;
	padding: 3px 10px;
	border: 1px solid var(--w98-dark);
	background: var(--w98-face);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow);
	color: var(--w98-text);
	font: inherit;
	font-size: 11px;
	cursor: pointer;
	animation: chat-jump-in 120ms ease-out;
}
@keyframes chat-jump-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Message bubbles: distinct user/assistant styling + hover copy ── */
.chat-msg { position: relative; }
.chat-msg[data-role="assistant"] {
	border-top: 2px solid var(--w98-menu-blue);
}
.chat-msg[data-role="user"] {
	border-top: 2px solid var(--w98-face-dark);
}
.chat-msg-copy {
	position: absolute;
	top: 2px;
	right: 2px;
	padding: 0 5px;
	height: 16px;
	line-height: 14px;
	border: 1px solid var(--w98-dark);
	background: var(--w98-face);
	color: var(--w98-text);
	font: inherit;
	font-size: 9px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 90ms ease-out;
}
.chat-msg:hover .chat-msg-copy,
.chat-msg-copy:focus-visible { opacity: 1; }
.chat-msg-copy.is-copied { opacity: 1; color: var(--star-ok, #0a6b2e); }

/* ── Thinking panel (live, dimmed, collapsible) ── */
.chat-think {
	flex: 0 0 auto;
	margin: 0 2px 4px;
	border: 1px solid var(--w98-shadow);
	background: var(--w98-face-light);
	box-shadow: inset 1px 1px 0 var(--w98-light);
}
.chat-think__head {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 3px 6px;
	border: 0;
	background: transparent;
	color: var(--w98-face-dark);
	font: inherit;
	font-size: 10px;
	cursor: pointer;
	text-align: left;
}
.chat-think__head:hover { color: var(--w98-text); }
.chat-think__head:focus-visible { outline: 1px dotted var(--w98-text); outline-offset: -2px; }
.chat-think__caret { width: 9px; flex: 0 0 auto; }
.chat-think__title { font-weight: 700; }
.chat-think[data-active="true"] .chat-think__title { color: var(--w98-text); }
.chat-think__count { margin-left: auto; opacity: 0.75; font-variant-numeric: tabular-nums; }
.chat-think__steps {
	list-style: none;
	margin: 0;
	padding: 0 6px 6px 8px;
	max-height: 160px;
	overflow-y: auto;
}
.chat-think__step {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 1px 0;
	color: var(--w98-face-dark);
	font-size: 10px;
	line-height: 1.4;
	animation: chat-step-in 140ms ease-out;
}
@keyframes chat-step-in {
	from { opacity: 0; transform: translateX(-3px); }
	to   { opacity: 1; transform: translateX(0); }
}
.chat-think__step[data-kind="tool"] { color: var(--w98-text); }
.chat-think__glyph { flex: 0 0 auto; width: 10px; text-align: center; }
.chat-think__label { font-family: "Lucida Console", "Courier New", monospace; }
/* Live "thinking" dots — static so long model turns do not animate at idle. */
.chat-think__dots { display: inline-flex; gap: 2px; }
.chat-think__dots i {
	width: 3px; height: 3px;
	background: var(--w98-menu-blue);
	border-radius: 50%;
	display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
	.chat-jump, .chat-think__step, .chat-think__dots i { animation: none; }
	.chat-scroll { scroll-behavior: auto; }
}

/* ── Compose box: auto-grow textarea + keymap hint + counter ── */
.chat-compose { display: flex; flex-direction: column; gap: 2px; }
.starplane-app__textarea--chat {
	min-height: 44px;
	resize: none;
	line-height: 1.35;
}
.chat-compose__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 2px;
	font-size: 10px;
	color: var(--w98-face-dark);
}
.chat-compose__hint { white-space: nowrap; }
.chat-compose__count { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════════
   MARKDOWN  (rendered inside an agent-chat message body — .md-body)
   ════════════════════════════════════════════════════════════════════════════ */
.md-body { line-height: 1.4; overflow-wrap: break-word; word-break: normal; }
.md-body .md-p { margin: 0 0 6px; }
.md-body .md-p:last-child { margin-bottom: 0; }
.md-body .md-h { margin: 8px 0 4px; line-height: 1.2; font-weight: 700; }
.md-body .md-h:first-child { margin-top: 0; }
.md-body .md-h1 { font-size: 15px; }
.md-body .md-h2 { font-size: 13px; }
.md-body .md-h3 { font-size: 12px; }
.md-body strong { font-weight: 700; }
.md-body em { font-style: italic; }
.md-body .md-list { margin: 0 0 6px; padding-left: 18px; }
.md-body .md-list li { margin: 1px 0; }
.md-body .md-link { color: var(--w98-menu-blue); text-decoration: underline; }
.md-body .md-link:hover { text-decoration: none; }
.md-body .md-link:focus-visible { outline: 1px dotted var(--w98-menu-blue); }
.md-body .md-hr {
	border: 0;
	border-top: 1px solid var(--w98-shadow);
	border-bottom: 1px solid var(--w98-light);
	margin: 6px 0;
}
.md-body .md-quote {
	margin: 0 0 6px;
	padding: 4px 8px;
	border-top: 2px solid var(--w98-shadow);
	background: var(--w98-face-light);
	color: var(--w98-face-dark);
}

/* Inline code: monospace + subtle sunken tint on near-neutral darks. */
.md-body .md-code {
	font-family: var(--star-font-mono, "Lucida Console", "Courier New", monospace);
	font-size: 11px;
	padding: 0 3px;
	background: var(--star-surface-sunken, var(--w98-light, #fff));
	border: 1px solid var(--star-border, var(--w98-shadow, #808080));
	border-radius: var(--star-radius-sm, 2px);
	color: var(--star-accent, #5a2d8c);
}

/* Fenced code block: sunken field + a copy bar + a subtle syntax tint. */
.md-body .md-pre-wrap {
	margin: 0 0 6px;
	border: 1px solid var(--w98-dark);
	background: var(--w98-light);
	box-shadow:
		inset 1px 1px 0 var(--w98-shadow),
		inset -1px -1px 0 var(--w98-light);
}
.md-body .md-pre-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1px 4px;
	background: var(--w98-face);
	border-bottom: 1px solid var(--w98-shadow);
}
.md-body .md-pre-lang {
	font-size: 9px;
	font-weight: 700;
	color: var(--w98-face-dark);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.md-body .md-pre-copy {
	min-height: 16px;
	padding: 0 6px;
	border: 1px solid var(--w98-dark);
	background: var(--w98-face);
	box-shadow:
		inset 1px 1px 0 var(--w98-light),
		inset -1px -1px 0 var(--w98-shadow);
	color: var(--w98-text);
	font: inherit;
	font-size: 9px;
	line-height: 1;
	cursor: pointer;
}
.md-body .md-pre-copy:hover { background: var(--w98-face-light); }
.md-body .md-pre-copy:active {
	box-shadow:
		inset -1px -1px 0 var(--w98-light),
		inset 1px 1px 0 var(--w98-shadow);
}
.md-body .md-pre-copy.is-copied { color: var(--star-ok, #0a6b2e); }
.md-body .md-pre {
	margin: 0;
	padding: 6px 8px;
	overflow-x: auto;
	font-family: "Lucida Console", "Courier New", monospace;
	font-size: 11px;
	line-height: 1.35;
	color: var(--w98-text);
	white-space: pre;
}
.md-body .md-pre code { font: inherit; background: none; border: 0; padding: 0; }
/* Subtle per-language syntax tint as a top rule, not a decorative left rail. */
.md-body .md-pre--ts, .md-body .md-pre--tsx,
.md-body .md-pre--js, .md-body .md-pre--jsx { border-top: 3px solid var(--star-info, #2d6fd4); }
.md-body .md-pre--py, .md-body .md-pre--python { border-top: 3px solid var(--star-ok, #3a7a3a); }
.md-body .md-pre--rust, .md-body .md-pre--rs { border-top: 3px solid var(--star-accent, #a6552a); }
.md-body .md-pre--sh, .md-body .md-pre--bash, .md-body .md-pre--shell { border-top: 3px solid var(--star-text-muted, #555); }
.md-body .md-pre--json { border-top: 3px solid var(--star-warn, #b8860b); }

/* Markdown tables. */
.md-body .md-table {
	border-collapse: collapse;
	margin: 0 0 6px;
	width: 100%;
	font-size: 11px;
}
.md-body .md-table th,
.md-body .md-table td {
	border: 1px solid var(--w98-shadow);
	padding: 2px 6px;
	text-align: left;
}
.md-body .md-table th { background: var(--w98-face); font-weight: 700; }