:root {
  /* Provisional foundation tokens; no final visual system is implied. */
  color-scheme: light;
  --layer-workspace: 0;
  --layer-dock: 10;
  --layer-transition: 20;
  --layer-tooltip: 30;
  --layer-menu: 40;
  --text: #303a38;
  --muted: #69736d;
  --wallpaper: #e8e8e2;
  --surface: rgb(250 251 246 / 66%);
  /* Boundary roles: floating surfaces, structural dividers, interactive focus. */
  --border-width: 1px;
  --border: rgb(66 83 71 / 13%);
  --border-emphasis: rgb(66 83 71 / 30%);
  --divider: rgb(66 83 71 / 10%);
  --surface-content: #fafbf6;
  --surface-subtle: rgb(232 232 226 / 42%);
  --state-hover: rgb(89 110 92 / 8%);
  --state-selected: rgb(89 110 92 / 12%);
  --focus-color: var(--text);
  --focus-width: 2px;
  --focus-offset: 2px;
  --disabled-opacity: .5;
  --control-padding-block: 7px;
  --control-padding-inline: 9px;
  --radius-control: 6px;
  --radius-content: 8px;
  --radius-popover: 10px;
  --radius-window: 14px;
  --radius-dock: 23px;
  --radius-icon: 13px;
  --shadow-window: 0 2px 8px rgb(49 61 44 / 7%);
  --shadow-window-active: 0 12px 32px rgb(49 61 44 / 15%), 0 2px 6px rgb(49 61 44 / 7%);
  --shadow-popover: 0 8px 24px rgb(49 61 44 / 14%);
  --shadow-tooltip: 0 2px 8px rgb(49 61 44 / 10%);
  --shadow-dock: 0 5px 20px rgb(49 61 44 / 7%);
  --shadow-control: 0 1px 3px rgb(49 61 44 / 10%);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --menu-height: 44px;
  --window-title-height: 33px;
  --traffic-disc-size: 12px;
  --traffic-target-width: 24px;
  --traffic-target-height: 28px;
  --traffic-gap: 0px;
  --edge-space: 24px;
  --dock-space: 116px;
  --dock-icon-size: 48px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--wallpaper);
}

* { box-sizing: border-box; }
body { margin: 0; }

.desktop-shell {
  height: 100vh;
  min-height: 380px;
  height: 100svh;
  display: grid;
  grid-template-rows: var(--menu-height) 1fr var(--dock-space);
  background:
    radial-gradient(ellipse at 78% 80%, rgb(181 197 175 / 35%), transparent 65%),
    radial-gradient(ellipse at 14% 22%, rgb(255 255 251 / 65%), transparent 65%),
    var(--wallpaper);
}

.menu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: var(--edge-space);
  border-bottom: var(--border-width) solid var(--divider);
  background: var(--surface);
}

.site-identity { display: flex; align-items: center; gap: var(--space-3); font-size: 13px; font-weight: 600; }
.identity-mark { font-family: Georgia, serif; font-size: 25px; line-height: 1; font-weight: 400; letter-spacing: -3px; padding-right: 3px; }
.prototype-label { color: var(--muted); font-size: 11px; }

.desktop { position: relative; display: grid; place-items: center; min-height: 220px; padding: var(--edge-space); }
.workspace-placeholder { text-align: center; color: var(--muted); }
.region-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.workspace-placeholder p { margin: 12px 0 0; font-family: Georgia, serif; font-size: clamp(22px, 3vw, 32px); font-weight: 400; letter-spacing: -.025em; color: #727c70; }

.dock-region { display: flex; align-items: end; justify-content: center; padding: 0 var(--edge-space) max(14px, env(safe-area-inset-bottom)); }
.dock { display: flex; align-items: center; gap: 22px; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-dock); background: var(--surface); box-shadow: var(--shadow-dock); }
.dock-label { color: var(--muted); font-size: 11px; padding-inline: 3px; }
.dock-items { display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.project-placeholder { display: grid; place-items: center; width: var(--dock-icon-size); height: var(--dock-icon-size); border: var(--border-width) solid var(--border); border-radius: var(--radius-icon); background: rgb(255 255 255 / 30%); }
.project-placeholder > span { width: 19px; height: 19px; border: 1px dashed rgb(66 83 71 / 27%); border-radius: var(--radius-control); }

/* Application shortcuts share the existing Dock slot dimensions. */
.dock-app { position: relative; }
.app-shortcut { display: grid; place-items: center; width: var(--dock-icon-size); height: var(--dock-icon-size); padding: 9px; border: 1px solid #506352; border-radius: var(--radius-icon); background: #596e5c; color: #fafbf6; cursor: pointer; }
.app-shortcut svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.25; stroke-linejoin: round; }
.app-shortcut-label { display: none; }
.app-shortcut:hover { background: #4d6150; }
.app-shortcut:focus-visible, .window-close:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 3px; }

/* Windows stay within the Desktop, leaving the Menu Bar and Dock accessible. */
.app-window { position: absolute; margin: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-content); border: var(--border-width) solid var(--border); border-radius: var(--radius-window); box-shadow: var(--shadow-window); outline: none; }
.app-window.is-active { border-color: var(--border-emphasis); box-shadow: var(--shadow-window-active); }
.app-window > .window-content, .app-window > .archive-layout { flex: 1; min-height: 0; overflow: auto; }
.window-title-bar { flex-shrink: 0; cursor: grab; touch-action: none; user-select: none; }
.window-title-bar h1 { min-width: 0; }
.window-close { flex-shrink: 0; }
.is-manipulating, .is-manipulating * { user-select: none; }
.is-manipulating .window-title-bar { cursor: grabbing; }
.window-resize { position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; padding: 0; border: 0; background: linear-gradient(135deg, transparent 45%, #879083 46%, #879083 50%, transparent 51%, transparent 60%, #879083 61%, #879083 65%, transparent 66%) center / 12px 12px no-repeat; cursor: nwse-resize; touch-action: none; }
.window-resize:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -4px; border-radius: var(--radius-control); }

.app-window[hidden] { display: none; }
.window-title-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px 10px 20px; border-bottom: var(--border-width) solid var(--divider); }
.window-title-bar h1 { margin: 0; font-size: 13px; font-weight: 500; }
.window-close { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: var(--border-width) solid var(--border); border-radius: 50%; color: var(--text); background: transparent; font-size: 20px; cursor: pointer; }
.window-close:hover { background: #e8e8e2; }
.window-content { padding: clamp(24px, 5vw, 40px); }
.window-content .region-label { color: var(--muted); }
.window-content h2 { margin: 14px 0; font-family: Georgia, serif; font-size: 32px; font-weight: 400; letter-spacing: -.025em; }
.window-content p { margin: 0; line-height: 1.65; }
.window-content .project-role { margin-top: 20px; color: var(--muted); font-size: 13px; }

.demo-placeholder { display: grid; place-items: center; min-height: 100px; margin: 24px 0; padding: var(--space-5); border: var(--border-width) solid transparent; border-radius: var(--radius-content); color: var(--muted); font-size: 13px; text-align: center; }
.archive-shortcut { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border: var(--border-width) solid var(--border); border-radius: var(--radius-content); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.archive-shortcut svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.archive-shortcut:hover { background: var(--wallpaper); }
.archive-shortcut:focus-visible, .archive-sidebar button:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }

.archive-layout { display: grid; grid-template-columns: 160px minmax(0, 1fr); min-height: 260px; }
.archive-sidebar { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 20px 10px; background: rgb(232 232 226 / 48%); border-right: 0; }
.archive-sidebar-label { padding: 0 10px 12px; color: var(--muted); font-size: 11px; }
.archive-sidebar button { border: 0; border-radius: var(--radius-control); padding: 10px; background: transparent; color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.archive-sidebar button[aria-current], .archive-sidebar button:hover { background: var(--state-selected); }
.archive-content { padding: 30px 24px; }
.archive-content h2 { margin: 0 0 16px; font-size: 20px; font-weight: 500; }
.archive-content p { margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.archive-content .region-label { color: var(--muted); font-size: 10px; }

@media (max-width: 540px) {
  :root { --edge-space: 16px; }
  .prototype-label { display: none; }
  .archive-layout { grid-template-columns: 120px minmax(0, 1fr); }
  .archive-content { padding: 24px 16px; }
}

/* Desktop applications are separate from digital product shortcuts in the Dock. */
.desktop-apps { position: absolute; top: var(--edge-space); left: var(--edge-space); max-height: calc(100% - 2 * var(--edge-space)); overflow: auto; }
.desktop-apps ul { display: grid; gap: 18px; margin: 0; padding: 4px; list-style: none; }
.desktop-shortcut { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 80px; padding: 3px; border: 0; border-radius: var(--radius-content); color: var(--text); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.desktop-shortcut-icon { display: grid; place-items: center; width: 48px; height: 48px; border: var(--border-width) solid var(--border); border-radius: 12px; background: var(--surface); }
.desktop-shortcut-icon svg { width: 26px; height: 26px; stroke: #596e5c; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.desktop-shortcut:hover { background: rgb(255 255 255 / 35%); }
.desktop-shortcut:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 1px; }
.future-interface { margin-top: var(--space-6); padding-top: 0; border-top: 0; }
.future-interface p { margin-top: 10px; color: var(--muted); font-size: 13px; }

/* Separate stacking contexts keep menu disclosures above every app window. */
.menu-bar { position: relative; z-index: var(--layer-menu); }
.desktop { z-index: var(--layer-workspace); }
.updates-menu { position: relative; margin-left: auto; flex-shrink: 0; }
.updates-trigger { display: flex; align-items: center; gap: var(--space-2); padding: 7px 8px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.updates-trigger:hover, .updates-trigger[aria-expanded="true"] { background: var(--state-hover); }
.updates-trigger svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.updates-dropdown { position: absolute; top: calc(100% + 9px); right: 0; width: min(330px, calc(100vw - 32px)); border: var(--border-width) solid var(--border); border-radius: 12px; background: var(--surface-content); box-shadow: var(--shadow-popover); overflow: hidden; }
.updates-dropdown[hidden] { display: none; }
.updates-header { padding: 18px 18px 14px; border-bottom: 0; }
.updates-header h2 { margin: 0; font-size: 14px; font-weight: 600; }
.updates-header p { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
.updates-list { max-height: min(290px, calc(100svh - 210px)); margin: 0; padding: 0 18px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.updates-list li { padding: 14px 0; border-bottom: var(--border-width) solid var(--divider); }
.updates-list li:last-child { border-bottom: 0; }
.updates-list time { color: var(--muted); font-size: 11px; }
.updates-list p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.updates-all { width: 100%; padding: 13px 18px; border: 0; border-top: var(--border-width) solid var(--border); background: transparent; color: var(--text); text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.updates-all:hover { background: var(--state-hover); }
.updates-trigger:focus-visible, .updates-all:focus-visible, .updates-list:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -3px; }
@media (max-width: 540px) {
  .updates-trigger { gap: 4px; font-size: 10px; padding-inline: 2px; }
}

/* Same Dock slots and spacing; long names retain their full accessible tooltip. */
.dock-region { justify-content: safe center; overflow-x: auto; }
.dock { flex-shrink: 0; }
.project-monogram { font-size: 13px; font-weight: 600; letter-spacing: -.04em; }

/* Shallow global navigation; existing identity spacing and type are retained. */
.site-menu { position: relative; }
.site-menu-trigger { padding: 0; border: 0; color: inherit; background: transparent; font-family: inherit; cursor: pointer; }
.site-menu-trigger:hover, .site-menu-trigger[aria-expanded="true"] { color: #596e5c; }
.site-menu-dropdown { position: absolute; top: calc(100% + 13px); left: 0; width: min(250px, calc(100vw - 32px)); max-height: calc(100svh - 70px); overflow-y: auto; padding: 8px; border: var(--border-width) solid var(--border); border-radius: 12px; background: var(--surface-content); box-shadow: var(--shadow-popover); }
.site-menu-dropdown[hidden] { display: none; }
.site-menu-group { display: flex; flex-direction: column; padding: 6px 0; }
.site-menu-group + .site-menu-group { margin-top: var(--space-1); }
.site-menu-section { padding: 6px 10px; color: var(--muted); font-size: 10px; }
.site-menu-group button { padding: 9px 10px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.site-menu-group button:hover { background: var(--state-hover); }
.site-menu-trigger:focus-visible, .site-menu-group button:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 1px; border-radius: 4px; }
.desktop:focus { outline: none; }

/* Active state uses elevation, an inset edge, and title weight, not colour alone. */
.app-window.is-active .window-title-bar { box-shadow: none; }
.app-window.is-active .window-title-bar h1 { font-weight: 700; }
.window-focus-state { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.desktop:focus-visible { outline: 2px solid rgb(48 58 56 / 45%); outline-offset: -6px; }

/* Menu Bar refinement: compact disclosures anchored and clamped by menus.js. */
.menu-bar { gap: var(--space-3); }
.site-menu { min-width: 0; }
.site-menu-trigger { gap: 10px; max-width: 100%; min-width: 0; }
.site-menu-trigger > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-mark, .menu-chevron { flex-shrink: 0; }
.menu-chevron { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.updates-trigger { gap: 6px; font-size: 11px; }
.updates-trigger > span { color: var(--muted); }
.site-menu-dropdown, .updates-dropdown { position: fixed; right: auto; border-radius: var(--radius-popover); }
.site-menu-dropdown { padding: 6px; }
.site-menu-group { padding: 4px 0; }
.site-menu-section { padding: 5px 9px; }
.site-menu-group button { padding: var(--control-padding-block) var(--control-padding-inline); }
.updates-dropdown { display: flex; flex-direction: column; }
.updates-header { flex-shrink: 0; padding: 12px 14px 10px; }
.updates-header h2 { font-size: 13px; }
.updates-header p { font-size: 10px; margin-top: 4px; }
.updates-list { flex: 0 1 auto; min-height: 0; max-height: 250px; padding: 0; }
.updates-list li { padding: 0; }
.updates-entry { display: block; position: relative; width: 100%; padding: 10px 14px; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; }
.updates-entry time { font-size: 10px; }
.updates-entry p { margin-top: 4px; font-size: 12px; line-height: 1.4; }
.updates-entry-button { cursor: pointer; padding-right: 32px; }
.updates-entry-button::after { content: '→'; position: absolute; right: 14px; top: 50%; color: var(--muted); }
.updates-entry-button:hover { background: var(--state-hover); }
.updates-entry-button:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -3px; }
.updates-all { flex-shrink: 0; padding: 11px 14px; }
@media (max-width: 540px) {
  .menu-bar { gap: var(--space-2); }
  .site-menu-trigger { gap: 6px; font-size: 12px; }
  .updates-trigger { gap: 4px; font-size: 10px; }
}

/* One shape-based state marker; labels and slot geometry remain unchanged. */
.desktop-shortcut-icon { position: relative; }
.app-shortcut { position: relative; }
.shortcut-state { position: absolute; bottom: 3px; left: calc(50% - 3px); width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; pointer-events: none; }
[data-app-state="closed"] .shortcut-state { visibility: hidden; }
[data-app-state="active"] .shortcut-state { background: currentColor; }
.desktop-shortcut-icon .shortcut-state { color: #596e5c; }
.shortcut-state-description { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shortcut-tooltip { position: fixed; z-index: var(--layer-tooltip); width: max-content; max-width: calc(100vw - 16px); padding: 7px 10px; border: var(--border-width) solid var(--border); border-radius: var(--radius-control); background: var(--surface-content); color: var(--text); box-shadow: var(--shadow-tooltip); font-size: 11px; line-height: 1.4; pointer-events: auto; }
.shortcut-tooltip[hidden] { display: none; }

/* A small hit-area bridge lets a pointer cross the tooltip gap without loss. */
.shortcut-tooltip::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.shortcut-tooltip[data-placement="below"]::before { top: -10px; }

/* Shared archive internals only. Window geometry/chrome are unchanged. */
.archive-window { container-type: size; }
.app-window > .archive-layout { overflow: hidden; grid-template-columns: 132px minmax(0, 1fr); }
.archive-layout > .archive-sidebar { min-height: 0; overflow-y: auto; }
.archive-reader { padding: var(--space-5); min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; scroll-behavior: auto; }
.archive-reader:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -3px; }
.archive-reader h2 { font-size: 22px; line-height: 1.25; margin: 0 0 12px; }
.archive-reader h3 { font-size: 14px; line-height: 1.4; margin: 0 0 10px; }
.archive-reader p { font-size: 13px; line-height: 1.65; margin: 0 0 16px; color: var(--text); }
:is(.archive-reader, .archive-reader-toolbar) button, .archive-reader a { max-width: 100%; font: inherit; font-size: 12px; color: var(--text); }
:is(.archive-reader, .archive-reader-toolbar) button { border: var(--border-width) solid transparent; border-radius: var(--radius-control); padding: var(--control-padding-block) var(--control-padding-inline); background: var(--surface-subtle); text-align: left; white-space: normal; cursor: pointer; }
:is(.archive-reader, .archive-reader-toolbar) button:hover:not(:disabled) { background: var(--state-hover); }
:is(.archive-reader, .archive-reader-toolbar) button:disabled { opacity: var(--disabled-opacity); cursor: default; }
:is(.archive-reader, .archive-reader-toolbar) button:focus-visible, .archive-reader a:focus-visible, .milestone-strip:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.archive-reader h2:focus { outline: none; }
.archive-reader .archive-example-note { padding: 8px 10px; border: var(--border-width) solid transparent; border-radius: var(--radius-control); color: var(--muted); font-size: 10px; line-height: 1.5; }
.archive-reader .archive-status, .archive-reader .archive-topics { color: var(--muted); font-size: 11px; }
.archive-date { display: block; color: var(--muted); font-size: 10px; line-height: 1.5; margin-bottom: 8px; }
.overview-section, .archive-resources { margin-top: var(--space-6); padding-top: 0; border-top: 0; }
.archive-resources { display: flex; flex-direction: column; align-items: start; gap: var(--space-2); }
.archive-resources h3 { margin-bottom: 0; }
.archive-empty { padding: 16px 0; color: var(--muted); }
.archive-empty h3 { font-weight: 500; }
.archive-empty p { color: var(--muted); }
.milestone-controls, .archive-modes, .inspector-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.milestone-strip { display: flex; gap: 10px; overflow-x: auto; padding: 3px 3px 12px; overscroll-behavior-x: contain; }
.archive-reader .milestone-card { flex: 0 0 min(220px, 85%); display: flex; flex-direction: column; gap: var(--space-2); padding: 10px; }
.milestone-card strong { font-size: 13px; }
.milestone-card > span { font-size: var(--window-meta-size); line-height: var(--window-meta-leading); }
.archive-modes button[aria-pressed="true"] { background: var(--surface-content); border-color: transparent; box-shadow: var(--shadow-control); font-weight: 600; }
.archive-feed-entry { padding: var(--space-5) 0; border-bottom: var(--border-width) solid var(--divider); }
.archive-feed-entry h3 { font-size: 18px; }
.archive-feed-entry .artifact-visual { margin: 12px 0; }
.artifact-visual { display: grid; place-items: center; width: 100%; aspect-ratio: var(--artifact-ratio, 4 / 3); min-width: 0; border: var(--border-width) solid transparent; border-radius: var(--radius-control); background: var(--surface-subtle); overflow: hidden; }
.artifact-visual > span { padding: 12px; font-size: 11px; text-align: center; color: var(--muted); }
.artifact-visual img, .artifact-visual video { display: block; width: 100%; height: 100%; object-fit: contain; }
.artifact-thumb { aspect-ratio: 4 / 3; }
.artifact-thumb img { object-fit: cover; }
.archive-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.archive-reader .artifact-tile { padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.artifact-tile > span { font-size: 11px; }
.entry-artifact { margin: 20px 0; }
.entry-artifact figcaption { margin: 8px 0; color: var(--muted); font-size: 11px; }
.media-inspector { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.inspector-browser { display: none; }
.inspector-detail { min-width: 0; }
.artifact-info { margin-top: var(--space-4); }
.artifact-info p { font-size: 12px; }
.inspector-toolbar + h2 { font-size: 19px; }
@container (min-width: 740px) {
 .archive-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .media-inspector { grid-template-columns: 92px minmax(0, 1fr); }
 .inspector-browser { display: flex; flex-direction: column; gap: 7px; align-self: start; max-height: 400px; overflow-y: auto; padding: 3px; }
 .inspector-browser button { padding: 3px; flex-shrink: 0; }
 .inspector-browser button[aria-pressed="true"] { outline: var(--focus-width) solid var(--focus-color); outline-offset: -2px; }
}
@container (max-width: 440px) {
 .app-window > .archive-layout { grid-template-columns: 108px minmax(0, 1fr); }
 .archive-reader { padding: 14px; }
 .archive-sidebar { padding-inline: 6px; }
 .archive-sidebar button { padding: 8px 6px; font-size: 11px; }
 .archive-reader h2 { font-size: 18px; }
 .archive-media-grid { gap: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
 .milestone-strip, .archive-reader { scroll-behavior: auto; }
}
/* Reading/browsing controls stay reachable without scrolling back to the top. */
.archive-reader .archive-modes, .archive-reader .inspector-toolbar { position: sticky; top: 0; z-index: 1; padding-block: 8px; background: var(--surface-content); }
.archive-reader { overscroll-behavior: contain; }
/* Fit the whole inspected artifact to the available window, not a crop. */
.inspector-detail > .artifact-visual { width: min(100%, calc(max(120px, 100cqh - 230px) * var(--artifact-ratio))); margin-inline: auto; }

/* Window chrome stays shared; contents and surrounding navigation are unchanged. */
.desktop-shell { overflow: clip; }
.window-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.window-title-bar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.window-control { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: var(--border-width) solid var(--border); border-radius: 50%; color: var(--text); background: transparent; font: inherit; font-size: 18px; cursor: pointer; }
.window-control:hover { background: #e8e8e2; }
.window-control:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 3px; }
.is-maximized .window-title-bar { cursor: default; }
.window-resize[hidden] { display: none; }


/* Compact chrome: 16 px control visuals inside unchanged 28 px targets. */
.window-title-bar { gap: 10px; padding: 3px 8px 3px 12px; }
.window-title-bar h1 { font-size: 12px; line-height: 1.3; }
.app-window.is-active .window-title-bar h1 { font-weight: 600; }
.window-controls { gap: var(--traffic-gap); }
.window-close, .window-control { position: relative; isolation: isolate; width: var(--traffic-target-width); height: var(--traffic-target-height); border: 0; border-radius: 4px; background: transparent; font-size: 14px; line-height: 1; }
.window-close::before, .window-control::before { content: ''; position: absolute; inset: 6px; z-index: -1; border: var(--border-width) solid var(--border); border-radius: 50%; }
.window-close:hover, .window-control:hover { background: transparent; }
.window-close:hover::before, .window-control:hover::before { background: var(--wallpaper); border-color: var(--border-emphasis); }
.window-close:focus-visible, .window-control:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -2px; border-radius: var(--radius-control); }
.site-menu-trigger { border-radius: var(--radius-control); }
.site-menu-trigger:hover, .site-menu-trigger[aria-expanded="true"] { color: var(--text); background: var(--state-hover); }
.shortcut-tooltip { padding: 6px 9px; overflow-wrap: anywhere; line-height: 1.4; }


/* Semantic sibling layers: window z-indices remain inside the workspace. */
body { isolation: isolate; }
.dock-region { position: relative; z-index: var(--layer-dock); pointer-events: none; }
.dock { pointer-events: auto; }
.dock-minimized { display: flex; flex-shrink: 0; gap: var(--space-3); margin: 0; padding: 0 0 0 16px; border-left: var(--border-width) solid var(--divider); list-style: none; }
.dock-minimized[hidden] { display: none; }
.minimized-window { display: grid; place-items: center; width: var(--dock-icon-size); height: var(--dock-icon-size); padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); cursor: pointer; }
.minimized-window:hover { background: var(--state-hover); }
.minimized-window:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 3px; }
.minimized-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; width: 44px; height: 38px; padding-top: 5px; border: 1px solid rgb(66 83 71 / 24%); border-radius: var(--radius-control); background: var(--surface-content); overflow: hidden; }
.minimized-preview::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-bottom: var(--border-width) solid var(--divider); background: var(--wallpaper); }
.minimized-preview-icon { display: grid; place-items: center; height: 17px; color: #596e5c; }
.minimized-preview-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.4; }
.minimized-preview-icon .project-monogram { font-size: 10px; }
.minimized-preview-kind { max-width: 40px; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minimize-flight { position: fixed; z-index: var(--layer-transition); transform-origin: top left; pointer-events: none; border: var(--border-width) solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.minimize-flight > span { display: block; padding: 9px 12px; border-bottom: var(--border-width) solid var(--divider); font-size: 12px; white-space: nowrap; }


/* Purpose-specific hierarchy, using the same boundary and state vocabulary. */
.demo-placeholder, .archive-reader .archive-example-note { background: var(--surface-subtle); }
.archive-shortcut { background: var(--surface-subtle); border-color: transparent; border-radius: var(--radius-control); }
.archive-shortcut:hover { background: var(--state-hover); }
.archive-sidebar button[aria-current] { font-weight: 600; }
.archive-modes { width: fit-content; padding: 3px; background: var(--surface-subtle); border-radius: var(--radius-content); }
.archive-modes button { background: transparent; }
.archive-reader .artifact-tile { background: transparent; }
.archive-resources button { background: transparent; padding-inline: var(--control-padding-inline); text-decoration: underline; text-underline-offset: 3px; }
.archive-resources button:hover:not(:disabled) { background: transparent; text-decoration-thickness: 2px; }
.window-close::before, .window-control::before { border-color: transparent; }
.window-close:hover::before, .window-control:hover::before { border-color: transparent; }
button:disabled { opacity: var(--disabled-opacity); cursor: default; }


/* Shared traffic lights: compact, nonoverlapping 24 × 28 px pointer targets. */
.window-title-bar { justify-content: flex-start; gap: 8px; padding-inline: 8px 12px; }
.window-controls { gap: var(--traffic-gap); }
.window-title-bar h1 { flex: 1; }
.window-close, .window-control { --traffic-fill: #c7cbc5; color: #303a38; }
.window-close { --traffic-fill: #e96961; }
.window-minimize { --traffic-fill: #e9b64c; }
.window-maximize { --traffic-fill: #65ad70; }
.window-close::before, .window-control::before,
.window-close:hover::before, .window-control:hover::before { inset: auto; left: 50%; top: 50%; width: var(--traffic-disc-size); height: var(--traffic-disc-size); transform: translate(-50%, -50%); border: 0; background: var(--traffic-fill); }
.window-controls button:disabled { --traffic-fill: #c7cbc5; opacity: 1; cursor: default; }
.window-controls .control-symbol { opacity: 0; font-size: 11px; line-height: 1; }
.window-controls:hover button:not(:disabled) .control-symbol,
.window-controls button:focus-visible .control-symbol { opacity: 1; }
.app-window > .archive-layout { grid-template-columns: 176px minmax(0, 1fr); }
.archive-sidebar button { white-space: nowrap; font-size: 12px; }
@container (max-width: 440px) {
  .app-window > .archive-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .archive-layout > .archive-sidebar { flex-direction: row; align-items: center; gap: 4px; padding: 8px; overflow-x: auto; overflow-y: hidden; }
  .archive-sidebar button { flex-shrink: 0; padding: 8px 10px; font-size: 12px; }
}


/* Window-local density tokens: surrounding desktop chrome is unchanged. */
.app-window {
  --window-pad: var(--space-4);
  --window-page-size: 22px;
  --window-section-size: 14px;
  --window-entry-size: 16px;
  --window-body-size: 13px;
  --window-meta-size: 11px;
  --window-control-size: 12px;
  --window-body-leading: 1.5;
  --window-editorial-section-size: 15px;
  --window-editorial-leading: 1.7;
  --window-editorial-gap: 14px;
  --window-reading-measure: 68ch;
  --window-meta-leading: 1.5;
  --window-heading-weight: 600;
  --window-paragraph-gap: var(--space-2);
  --window-section-gap: var(--space-4);
}
.demo-window, .desktop-app-window { container-type: inline-size; }
.window-title-bar { padding-block: 2px; padding-inline: var(--space-2); }
.window-title-bar h1 { font-size: var(--window-control-size); }
.window-content { padding: var(--window-pad); overflow-wrap: anywhere; }
.window-content .region-label { display: block; font-size: var(--window-meta-size); line-height: 1.4; }
.window-content h2 { margin: var(--space-1) 0 var(--space-2); font-size: var(--window-page-size); line-height: 1.25; }
.window-content p { max-inline-size: 65ch; margin: 0 0 var(--window-paragraph-gap); font-size: var(--window-body-size); line-height: var(--window-body-leading); }
.window-content p:last-child { margin-bottom: 0; }
.window-content .demo-placeholder { min-height: 80px; margin: var(--space-3) 0; padding: var(--space-3); font-size: var(--window-body-size); line-height: var(--window-body-leading); }
.window-content .archive-shortcut { gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--window-control-size); }
.window-content .future-interface { margin-top: var(--window-section-gap); }
.window-content .future-interface p { margin-top: var(--space-1); }
.app-window > .archive-layout { grid-template-columns: 156px minmax(0, 1fr); }
.archive-sidebar { padding: var(--space-3) var(--space-2); gap: var(--space-1); }
.archive-sidebar button { min-height: 28px; padding: 6px var(--space-2); font-size: var(--window-control-size); line-height: 16px; }
.archive-reader { padding: var(--window-pad); }
.archive-reader h2 { margin-bottom: var(--space-2); font-size: var(--window-page-size); line-height: 1.25; }
.archive-reader h3 { margin-bottom: var(--space-1); font-size: var(--window-section-size); line-height: 1.4; }
.archive-reader p { max-inline-size: 68ch; margin-bottom: var(--window-paragraph-gap); font-size: var(--window-body-size); line-height: var(--window-body-leading); }
.archive-reader .archive-example-note { margin-bottom: var(--space-3); padding: var(--space-1) var(--space-2); font-size: var(--window-meta-size); line-height: 1.4; }
.archive-reader .archive-status, .archive-reader .archive-topics, .archive-date { font-size: var(--window-meta-size); }
.archive-date { margin-bottom: var(--space-1); line-height: 1.4; }
.overview-section, .archive-resources { margin-top: var(--window-section-gap); }
.archive-resources { gap: var(--space-1); }
.archive-resources button, .archive-resources a { font-size: var(--window-control-size); }
.archive-empty { padding-block: var(--space-3); }
.milestone-controls, .archive-modes, .inspector-toolbar { gap: var(--space-1); margin-bottom: var(--space-2); }
.milestone-strip { gap: var(--space-2); padding-bottom: var(--space-2); }
.archive-reader .milestone-card { gap: var(--space-1); padding: var(--space-2); }
.archive-feed-entry { padding-block: var(--space-3); }
.archive-feed-entry h3 { font-size: var(--window-entry-size); }
.archive-feed-entry .artifact-visual { max-width: 320px; margin-block: var(--space-2); }
.archive-media-grid { gap: var(--space-2); }
.archive-reader .artifact-tile { gap: var(--space-1); }
.entry-artifact { margin-block: var(--space-3); }
.entry-artifact figcaption { margin-block: var(--space-1); font-size: var(--window-meta-size); }
.media-inspector { gap: var(--space-3); }
.artifact-info { margin-top: var(--space-2); }
.artifact-info p { font-size: var(--window-body-size); }
.inspector-toolbar + h2 { font-size: var(--window-page-size); }
.archive-reader .archive-modes, .archive-reader .inspector-toolbar { padding-block: var(--space-1); }
@container (max-width: 440px) {
  .app-window > .archive-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .archive-layout > .archive-sidebar { padding: var(--space-2); gap: var(--space-1); }
  .archive-sidebar button { padding: 6px var(--space-2); font-size: var(--window-control-size); }
  .archive-reader { padding: var(--space-3); }
  .archive-reader h2 { font-size: var(--window-page-size); }
}
@container (max-width: 360px) {
  .demo-window > .window-content, .desktop-app-window > .window-content { padding: var(--space-3); }
}
/* Thumbnail-rail placeholders need less inset than full-size previews. */
.inspector-browser .artifact-thumb > span { padding: var(--space-1); font-size: var(--window-meta-size); line-height: 1.2; }

/* Shared Archive disclosure navigation. Parent targets remain independent. */
:root { --archive-tree-width: 180px; --archive-tree-disclosure: 24px; --archive-tree-indent: 8px; --archive-nav-row: 32px; --archive-nav-leading: 16px; --archive-nav-pad: 8px; }
.app-window > .archive-layout { grid-template-columns: var(--archive-tree-width) minmax(0, 1fr); }
.archive-layout > .archive-sidebar { display: block; padding-inline: var(--space-1); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.archive-sidebar:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -3px; }
.archive-tree, .archive-tree-children { list-style: none; padding: 0; margin: 0; }
.archive-tree-section + .archive-tree-section { margin-top: 16px; }
.archive-tree-parent { display: flex; align-items: center; }
.archive-sidebar .archive-disclosure { flex: 0 0 var(--archive-tree-disclosure); padding: 0; text-align: center; }
.archive-disclosure span { display: inline-block; font-size: 16px; transform: rotate(0deg); }
.archive-disclosure[aria-expanded='true'] span { transform: rotate(90deg); }
.archive-sidebar .archive-nav-item { display: flex; align-items: center; min-width: 0; width: 100%; min-height: var(--archive-nav-row); padding: 4px var(--archive-nav-pad); font-weight: 500; line-height: var(--archive-nav-leading); background: transparent; box-shadow: none; }
.archive-tree-parent .archive-nav-item { flex: 1; width: auto; padding-left: 0; font-weight: 600; }
.archive-tree-children { padding-left: var(--archive-tree-disclosure); }
.archive-nav-label { display: block; width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive-nav-item[data-archive-nav^="log:"] .archive-nav-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: var(--archive-nav-leading); max-height: calc(2 * var(--archive-nav-leading)); }
.archive-sidebar .archive-nav-item:hover:not([aria-current]), .archive-sidebar .archive-disclosure:hover { background: var(--state-hover); box-shadow: none; }
.archive-sidebar .archive-nav-item[aria-current] { font-weight: 500; background: var(--state-selected); box-shadow: none; }
.archive-sidebar .archive-tree-parent .archive-nav-item { font-weight: 600; }
.archive-sidebar .archive-milestone-row .archive-nav-item { font-weight: 600; }
.archive-milestone-logs > li + li { margin-top: 2px; }
.archive-sidebar .archive-nav-item:focus-visible, .archive-sidebar .archive-disclosure:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -2px; }
.archive-tree-parent .archive-nav-label { overflow: visible; text-overflow: clip; }
.archive-nav-tooltip { position: fixed; z-index: var(--layer-tooltip); width: max-content; max-width: min(240px, calc(100vw - 16px)); padding: 4px 6px; border: 0; border-radius: var(--radius-control); background: var(--text); color: var(--surface-content); font: 11px/1.4 system-ui; box-shadow: none; white-space: normal; overflow-wrap: anywhere; pointer-events: none; }
@container (max-width: 440px) {
 .app-window > .archive-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 40%) minmax(0, 1fr); }
 .archive-layout > .archive-sidebar { display: block; overflow: auto; }
 .archive-tree { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-1); }
 .archive-tree-section + .archive-tree-section { margin-top: 0; }
 .archive-tree-section { min-width: 0; }
}

/* A literal, selectable reaction. Transforms do not change inline geometry. */
.scroll-smiley { display: inline-block; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
 .scroll-smiley { transform: none !important; }
}

/* Initial Scope: read-only record and optional curated materials. */
.scope-fields { margin: 0; font-size: var(--window-body-size); line-height: var(--window-body-leading); }
.scope-field { display: grid; grid-template-columns: 126px minmax(0,1fr); gap: var(--space-3); padding-block: var(--space-2); }
.scope-field dt { font-weight: 600; }
.scope-field dd { margin: 0; min-width: 0; }
.scope-field ul { padding-left: 18px; margin: 0; }
.initial-materials { margin-top: var(--space-5); }
.initial-material-strip { display: flex; position: relative; overflow-x: auto; gap: var(--space-3); padding: 4px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.initial-material-card { flex: 0 0 min(230px, 85%); scroll-snap-align: start; margin: 0; }
.initial-material-card figcaption { font-size: 12px; font-weight: 600; margin-block: var(--space-2); }
.archive-reader .initial-material-card p { font-size: 12px; }
.archive-reader .initial-material-open { width: 100%; padding: 0; background: transparent; }
.initial-materials .artifact-thumb { aspect-ratio: 3/4; }
.initial-materials .artifact-thumb img { object-fit: contain; }
.scope-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.scope-map-content { display: flex; flex-direction: column; gap: var(--space-2); overflow: auto; }
.scope-map-content p { margin: 0; font-size: 12px; }
.scope-map-content button { font: inherit; font-size: 12px; border: 0; border-radius: var(--radius-control); background: var(--surface-subtle); color: var(--text); padding: 6px 8px; cursor: pointer; }
.scope-map-content button:hover { background: var(--state-hover); }
.scope-map-content button:focus-visible, .scope-map-viewport:focus-visible, .initial-material-strip:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -2px; }
.scope-map-content button[aria-pressed='true'] { font-weight: 600; box-shadow: inset 2px 0 currentColor; }
.scope-map-content .inspector-toolbar { flex-shrink: 0; }
.scope-map-pan { display: flex; gap: 4px; flex-wrap: wrap; }
.scope-map-viewport { position: relative; flex: 0 0 280px; min-height: 200px; overflow: hidden; background: var(--surface-subtle); border-radius: var(--radius-control); touch-action: none; }
.scope-map-world { position: absolute; width: 1000px; height: 640px; transform-origin: 0 0; }
.scope-map-world svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.scope-map-world line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 4; }
.scope-map-world text { fill: var(--text); font: 11px system-ui; text-anchor: middle; paint-order: stroke; stroke: var(--surface-content); stroke-width: 4px; }
.scope-map-world .scope-map-node { position: absolute; width: 150px; height: 50px; background: var(--surface-content); box-shadow: var(--shadow-control); }
.scope-map-band { position: absolute; color: var(--muted); font-size: 12px; }
.scope-map-detail h3 { font-size: 14px; margin: 0 0 4px; }
.scope-map-outline { font-size: 12px; }
.scope-map-outline > summary { cursor: pointer; }
@container (max-width: 520px) {
 .scope-field { grid-template-columns: minmax(0,1fr); gap: 4px; }
}

.initial-material-card { flex-basis: 100%; min-width: 0; }
.initial-materials .artifact-thumb { height: 240px; aspect-ratio: auto; }

/* Invisible shared resize boundaries. One existing keyboard target is retained. */
.window-resize-boundary { position: absolute; z-index: 3; padding: 0; border: 0; background: transparent; touch-action: none; }
.window-resize-boundary[hidden] { display: none; }
.window-resize-boundary[data-resize-direction='n'] { top: 0; left: 8px; right: 8px; height: 3px; cursor: ns-resize; }
.window-resize-boundary[data-resize-direction='s'] { bottom: 0; left: 12px; right: 12px; height: 4px; cursor: ns-resize; }
.window-resize-boundary[data-resize-direction='w'] { left: 0; top: 8px; bottom: 12px; width: 4px; cursor: ew-resize; }
.window-resize-boundary[data-resize-direction='e'] { right: 0; top: 8px; bottom: 12px; width: 4px; cursor: ew-resize; }
.window-resize-boundary[data-resize-direction='nw'],.window-resize-boundary[data-resize-direction='ne'] { top: 0; width: 8px; height: 8px; }
.window-resize-boundary[data-resize-direction='sw'],.window-resize-boundary[data-resize-direction='se'] { bottom: 0; width: 12px; height: 12px; }
.window-resize-boundary[data-resize-direction='nw'],.window-resize-boundary[data-resize-direction='sw'] { left: 0; }
.window-resize-boundary[data-resize-direction='ne'],.window-resize-boundary[data-resize-direction='se'] { right: 0; }
.window-resize-boundary[data-resize-direction='nw'],.window-resize-boundary[data-resize-direction='se'] { cursor: nwse-resize; }
.window-resize-boundary[data-resize-direction='ne'],.window-resize-boundary[data-resize-direction='sw'] { cursor: nesw-resize; }
.window-resize-boundary.window-resize:focus-visible { width: 24px; height: 24px; outline-offset: -3px; }

/* Keep milestone disclosure inside the Development Logs branch. */
.archive-tree-children[id$="-logs-children"] {
 margin: 2px 0 0 calc(var(--archive-tree-disclosure) / 2);
 padding: 2px 0 2px 7px;
 border-inline-start: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
}
.archive-milestone-group { list-style: none; }
.archive-milestone-group + .archive-milestone-group { margin-top: 4px; }
.archive-milestone-row { display: flex; align-items: center; position: relative; }
.archive-milestone-row::before {
 content: "";
 position: absolute;
 inset-inline-start: -7px;
 top: 50%;
 width: 7px;
 border-block-start: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
 pointer-events: none;
}
.archive-sidebar .archive-milestone-row > .archive-disclosure { flex-basis: 20px; min-height: var(--archive-nav-row); }
.archive-sidebar .archive-milestone-row > .archive-nav-item { flex: 1; width: auto; }
.archive-milestone-logs {
 list-style: none;
 margin: 0 0 0 10px;
 padding: 0 0 0 10px;
 border-inline-start: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.archive-nav-item[data-archive-nav^="milestone:"] .archive-nav-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: var(--archive-nav-leading); max-height: calc(2 * var(--archive-nav-leading)); }

/* Editorial navigation: a numbered sequence, never a time-scaled roadmap. */
.scope-timeline { --timeline-rail-width: 36px; --timeline-entry-padding: var(--space-3); list-style: none; margin: var(--space-3) 0; padding: 0; }
.scope-timeline-item { position: relative; margin: 0; padding: 0; min-width: 0; }
.scope-timeline-item + .scope-timeline-item { margin-top: var(--space-2); }
.scope-timeline-item:not(:last-child)::after { content: ''; position: absolute; left: calc(var(--timeline-entry-padding) + var(--timeline-rail-width) / 2); top: 52px; bottom: calc(-1 * var(--space-2)); width: var(--border-width); background: var(--border-emphasis); pointer-events: none; }
.archive-reader .scope-timeline-entry { display: grid; grid-template-columns: var(--timeline-rail-width) minmax(0,1fr); gap: var(--space-3); width: 100%; min-width: 0; margin: 0; padding: var(--timeline-entry-padding); border: 0; border-radius: var(--radius-content); background: var(--surface-subtle); box-shadow: none; text-align: left; color: var(--text); white-space: normal; cursor: pointer; }
.archive-reader .scope-timeline-entry:hover { background: var(--state-hover); }
.archive-reader .scope-timeline-entry:active { background: var(--state-selected); }
.archive-reader .scope-timeline-entry:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.scope-timeline-number { display: block; padding-top: 2px; font-size: 22px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.scope-timeline-detail { display: flex; flex-direction: column; min-width: 0; gap: var(--space-1); overflow-wrap: anywhere; }
.scope-timeline-kicker { font-size: 10px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.scope-timeline-title { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; }
.scope-timeline-period { font-size: var(--window-meta-size); line-height: var(--window-meta-leading); color: var(--muted); }
.scope-timeline-summary { margin-top: var(--space-1); font-size: var(--window-body-size); line-height: var(--window-body-leading); }
.scope-timeline-destination { align-self: flex-start; margin-top: var(--space-1); font-size: var(--window-meta-size); line-height: var(--window-meta-leading); text-decoration: underline; text-underline-offset: 3px; }
.scope-timeline-entry:hover .scope-timeline-title, .scope-timeline-entry:focus-visible .scope-timeline-title { text-decoration: underline; text-underline-offset: 3px; }
.archive-reader .essay-inline-link { display: inline; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; min-height: 0; }
.milestone-essay blockquote { margin: 16px 0; padding-left: 14px; border-left: 2px solid var(--border-emphasis); }
.essay-annotation { margin: 12px 0; font-size: 12px; line-height: 1.6; }

/* Shared navigation levels; sibling rows use the same leading edge. */
:root { --archive-reading-inset: 8px; }
.archive-overview-tail { height: 0; pointer-events: none; overflow-anchor: none; }
.archive-reader[data-archive-view='overview'] { overflow-anchor: none; }

/* Overview reading rhythm: major sections, closely grouped supporting content. */
.archive-reader[data-archive-view='overview'] { --overview-section-gap: 32px; --overview-heading-gap: var(--space-3); --overview-row-gap: var(--space-3); }
.archive-reader[data-archive-view='overview'] > [data-overview-section] { margin-top: var(--overview-section-gap); }
.archive-reader[data-archive-view='overview'] > [data-overview-section] > h3 { margin: 0 0 var(--overview-heading-gap); font-size: var(--window-editorial-section-size); line-height: 1.4; font-weight: var(--window-heading-weight); }
.archive-reader[data-archive-view='overview'] > [data-overview-section] > p:last-child { margin-bottom: 0; }
.archive-reader[data-archive-view='overview'] .scope-fields { display: grid; gap: var(--overview-row-gap); container: scope-record / inline-size; }
.archive-reader[data-archive-view='overview'] .scope-field { grid-template-columns: 124px minmax(0,1fr); gap: var(--space-4); padding-block: 0; align-items: start; }
.archive-reader[data-archive-view='overview'] .scope-field dt { padding-top: 1px; font-size: 12px; font-weight: 500; color: var(--muted); }
.archive-reader[data-archive-view='overview'] .scope-field dd { overflow-wrap: anywhere; }
.archive-reader[data-archive-view='overview'] .scope-field ul { padding-left: var(--space-4); }
.archive-reader[data-archive-view='overview'] .scope-field li + li { margin-top: var(--space-1); }
.archive-reader[data-archive-view='overview'] .scope-timeline { margin-block: 0; }
.archive-reader[data-archive-view='overview'] > .archive-resources { display: block; }
@container scope-record (max-width: 380px) {
 .archive-reader[data-archive-view='overview'] .scope-field { grid-template-columns: minmax(0,1fr); gap: var(--space-1); }
}

/* Authored milestone reading, separate from the compact timeline. */
.milestone-essay { max-inline-size: var(--window-reading-measure); font-size: var(--window-body-size); }
.archive-reader .milestone-essay p,
.archive-reader [data-overview-section='brief'] > p,
.archive-reader[data-archive-view='entry'] > p:not(.archive-date,.archive-example-note,.archive-topics) { max-inline-size: var(--window-reading-measure); margin: 0 0 var(--window-editorial-gap); line-height: var(--window-editorial-leading); }
.archive-reader .milestone-essay h3,
.archive-reader[data-archive-view='entry'] > h3 { margin: var(--space-6) 0 var(--space-3); font-size: var(--window-editorial-section-size); line-height: 1.4; font-weight: var(--window-heading-weight); }
.archive-reader[data-archive-view='milestone'] > .archive-date { margin-bottom: var(--space-4); font-style: italic; }

.essay-logo { margin: var(--space-5) 0 var(--space-6); }
.archive-reader .essay-logo-open { display: block; width: min(260px,100%); padding: 0; background: transparent; border: 0; }
.essay-logo img { display: block; width: 100%; height: auto; object-fit: contain; }
.essay-logo figcaption { margin-top: var(--space-2); font-size: var(--window-meta-size); line-height: var(--window-meta-leading); color: var(--muted); }
.essay-materials { margin-block: var(--space-5) var(--space-6); min-width: 0; }
.essay-materials h4 { font-size: 13px; margin: 0 0 var(--space-2); }
.archive-reader[data-archive-view='essay-inspector'] .artifact-visual { display: block; }

/* Only the reader should scroll when focusing a private media control. */
.archive-window.has-essay-media { overflow: clip; }

/* Editorial screenshot collection: fixed portrait targets, native horizontal pan. */
.essay-gallery-strip { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 3px 3px 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.essay-gallery-strip::-webkit-scrollbar { display: none; }
.essay-gallery-item { flex: 0 0 136px; min-width: 0; scroll-snap-align: start; }
.archive-reader .essay-gallery-open { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; box-shadow: none; }
.archive-reader .essay-gallery-open:hover { background: transparent; }
.essay-gallery-frame { display: block; width: 100%; aspect-ratio: var(--screenshot-ratio, 1080 / 2340); overflow: hidden; border-radius: var(--radius-control); background: var(--surface-subtle); }
.essay-gallery-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.essay-gallery-title { display: block; font-size: var(--window-meta-size); line-height: 1.4; text-align: left; }
.essay-gallery-open:hover .essay-gallery-title { text-decoration: underline; text-underline-offset: 3px; }
.screenshot-inspector .inspector-detail > .artifact-visual { width: min(100%,320px); aspect-ratio: auto; }
.screenshot-inspector .inspector-detail > .artifact-visual img { height: auto; object-fit: contain; }
@container (max-width: 520px) {
 .screenshot-inspector { grid-template-columns: minmax(0,1fr); }
 .screenshot-inspector .inspector-browser { display: none; }
}

/* Optional development preview uses inert text, never destination styling. */
.archive-nav-placeholder, .archive-nav-preview-note, .archive-nav-preview-heading { display: block; padding: var(--space-1) var(--archive-nav-pad); color: var(--muted); font-size: var(--window-control-size); line-height: var(--archive-nav-leading); overflow-wrap: anywhere; }
.archive-nav-placeholder { font-style: italic; }
.archive-nav-preview-note { font-size: var(--window-meta-size); margin-bottom: var(--space-1); }
.archive-nav-preview-heading { font-size: var(--window-meta-size); }

/* Archive reading tools keep editorial status outside the document flow. */
.archive-navigation-tools { position: sticky; top: 0; z-index: 2; display: flex; align-items: start; width: fit-content; max-width: 100%; gap: 4px; margin: 0 0 10px; background: var(--surface-content); border-radius: var(--radius-control); }
.archive-sidebar .archive-sidebar-toggle { flex: 0 0 28px; min-height: 28px; padding: 0; text-align: center; font-size: 19px; line-height: 28px; }
.app-window > .archive-layout.archive-sidebar-collapsed { grid-template-columns: 40px minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
.archive-sidebar-collapsed > .archive-sidebar { overflow: hidden; }
.archive-sidebar-collapsed .archive-navigation-tools { margin: 0; }
.archive-tree[hidden] { display: none; }
.archive-reader[data-archive-view='entry'] > h2 { max-inline-size: 36ch; margin-bottom: 10px; }
.archive-reader[data-archive-view='entry'] > .archive-date { margin-bottom: 20px; }
.archive-reader .archive-palette { max-inline-size: var(--window-reading-measure); margin: 24px 0; padding-block: 16px; border-block: 1px solid var(--divider); }
.archive-reader .archive-palette h3 { margin: 0 0 6px; font-size: 14px; line-height: 1.4; }
.archive-reader .artifact-caption { margin-bottom: 12px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.archive-swatches { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(106px,100%),1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.archive-swatch { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.archive-swatch-preview { display: block; height: 48px; border-radius: var(--radius-control); border: 1px solid rgb(0 0 0 / 10%); }
.archive-swatch strong { font-weight: 500; }
.archive-swatch code { font-size: 11px; }
.archive-swatch-role { font-size: 11px; color: var(--muted); }

/* Curated evidence reuses the existing gallery and media inspector. */
.archive-evidence-gallery .essay-gallery-item { flex-basis: min(260px,80%); }

/* One horizontal treatment for explicitly associated screenshot collections. */
.archive-carousel { --archive-carousel-height: clamp(280px,36cqi,320px); min-width: 0; }
.archive-carousel .archive-carousel-strip { display: flex; position: relative; align-items: flex-start; gap: 12px; max-width: 100%; margin: 0; padding: 3px 3px 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 3px; scrollbar-width: thin; }
.archive-carousel .archive-carousel-strip::-webkit-scrollbar { display: block; height: 7px; }
.archive-carousel .archive-carousel-strip::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 4px; }
.archive-carousel .archive-carousel-card { flex: 0 0 clamp(160px,calc(var(--archive-carousel-height) * var(--carousel-ratio,0.6)),min(360px,85%)); min-width: 0; margin: 0; scroll-snap-align: start; }
.archive-carousel .archive-carousel-preview { display: block; width: 100%; height: var(--archive-carousel-height); aspect-ratio: auto; background: transparent; }
.archive-carousel .archive-carousel-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.archive-carousel-strip:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -2px; }
.archive-carousel-controls { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; }
.archive-carousel-controls[hidden] { display: none; }
.archive-carousel-status { color: var(--muted); font-size: 11px; line-height: 1.4; }
.archive-carousel[data-carousel-count='1'] .archive-carousel-strip { overflow-x: hidden; }
.archive-carousel[data-carousel-count='1'] .archive-carousel-card { flex-basis: min(480px,100%); }
.archive-carousel[data-carousel-count='1'] .archive-carousel-preview { height: auto; aspect-ratio: auto; }
.archive-carousel[data-carousel-count='1'] .archive-carousel-preview img { width: auto; max-width: 100%; height: auto; max-height: 420px; }
.archive-reader .archive-context-image { margin: 8px 6px 0 0; text-decoration: underline; text-underline-offset: 3px; }
.inspector-image-viewport { max-width: 100%; max-height: min(60vh,520px); overflow: auto; overscroll-behavior: contain; }
.inspector-image-viewport:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -2px; }
.inspector-image-viewport > .artifact-visual { width: 100%; aspect-ratio: auto; }
.inspector-image-viewport > .artifact-visual img { width: 100%; height: auto; object-fit: contain; }
.inspector-image-viewport.is-original-size > .artifact-visual { width: var(--original-image-width); max-width: none; }
.archive-workflow { margin: 24px 0; padding-block: 16px; border-block: 1px solid var(--divider); }
.archive-reader .archive-workflow-label { margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.archive-workflow > h3 { margin: 0 0 14px; }
.archive-workflow-areas { display: grid; gap: 24px; }
.archive-workflow-area { position: relative; min-width: 0; padding-left: 14px; border-left: 1px solid var(--divider); }
.archive-workflow-area + .archive-workflow-area::before { content: '↕'; position: absolute; top: -25px; left: -5px; color: var(--muted); font: 16px/24px system-ui; }
.archive-workflow-area h4 { margin: 0 0 6px; font-size: 13px; }
.archive-reader .archive-workflow-status { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.archive-workflow-area > p { font-size: 12px; }
.archive-reader .archive-workflow-artifact { display: block; width: 100%; padding: 0; margin: 8px 0; text-align: left; background: transparent; }
.archive-workflow-artifact .artifact-visual { max-height: 160px; aspect-ratio: 3 / 2; background: transparent; }
.archive-workflow-artifact > span { display: block; margin-top: 6px; font-size: 11px; text-decoration: underline; }
.archive-workflow-area > button:not(.archive-workflow-artifact) { display: block; margin-block: 6px; }
.archive-workflow figcaption { margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.6; }
@container (min-width: 740px) {
 .archive-workflow-areas { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
 .archive-workflow-area { padding-left: 0; border-left: 0; }
 .archive-workflow-area + .archive-workflow-area::before { content: '↔'; top: 0; left: -18px; }
}
.archive-unassigned-group { margin-top: var(--space-2); }

/* Archive navigation keeps destinations and their disclosure controls distinct. */
.archive-navigation-tools {
 display: grid;
 grid-template-columns: 28px minmax(0, 1fr);
 align-items: center;
 width: 100%;
 gap: 0 6px;
 padding: 2px;
 box-sizing: border-box;
}
.archive-sidebar-heading { font-size: 11px; font-weight: 600; color: var(--muted); }
.archive-sidebar .archive-sidebar-toggle { display: grid; place-items: center; }
.archive-sidebar-icon {
 position: relative;
 width: 15px;
 height: 12px;
 border: 1px solid currentColor;
 border-radius: 3px;
 box-sizing: border-box;
}
.archive-sidebar-icon::before {
 content: "";
 position: absolute;
 inset: 0 auto 0 0;
 width: 4px;
 border-right: 1px solid currentColor;
 background: currentColor;
 opacity: .4;
}
.archive-sidebar-collapsed .archive-sidebar-icon::before { background: transparent; opacity: 1; }
.archive-sidebar-collapsed .archive-navigation-tools { grid-template-columns: 28px; }
.archive-tree-parent { background: var(--surface-subtle); border-radius: var(--radius-control); }
.archive-tree-parent .archive-nav-item { padding-inline: var(--archive-nav-pad); }
.archive-tree-parent .archive-nav-item[data-archive-context] { font-weight: 700; }
.archive-tree-parent .archive-nav-label { white-space: normal; }
.archive-tree-children[id$="-overview-children"] { margin-top: 3px; }
.archive-sidebar .archive-nav-item[data-archive-nav^="milestone:"] { font-weight: 650; }
.archive-sidebar .archive-nav-item[data-archive-nav^="log:"] { font-weight: 400; }
.archive-sidebar .archive-nav-item[aria-current] {
 background: var(--state-selected);
 font-weight: 650;
}
.archive-sidebar .archive-nav-item[data-archive-contains-current] { background: var(--state-hover); }
.archive-sidebar .archive-nav-item[data-archive-contains-current]::after {
 content: "";
 flex: 0 0 5px;
 height: 5px;
 margin-inline: 4px;
 border-radius: 50%;
 background: var(--muted);
}
.archive-sidebar .archive-nav-item[data-archive-nav^="log:"] .archive-nav-label,
.archive-sidebar .archive-nav-item[data-archive-nav^="milestone:"] .archive-nav-label {
 display: block;
 max-height: none;
 overflow-wrap: break-word;
}
@container (min-width: 620px) {
 .app-window > .archive-layout:not(.archive-sidebar-collapsed) { grid-template-columns: 212px minmax(0,1fr); }
}
@container (max-width: 440px) {
 .archive-tree { display: block; }
 .archive-tree-section + .archive-tree-section { margin-top: 8px; }
}

.archive-diagrams { margin-block: 24px; }
.archive-diagram { margin-block: 16px 24px; }
.archive-diagram h4 { margin-block: 0 10px; }
.archive-diagram-stages, .archive-diagram-cards, .archive-diagram-edges {
 list-style: none;
 padding: 0;
 margin: 0;
}
.archive-diagram-stage + .archive-diagram-stage { margin-top: 8px; }
.archive-diagram-cards {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
 gap: 8px;
}
.archive-diagram-node {
 min-width: 0;
 padding: 10px 12px;
 border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
 border-radius: var(--radius-control);
 background: var(--surface-subtle);
 overflow-wrap: anywhere;
}
.archive-diagram-node strong { font-weight: 650; }
.archive-diagram-notes { margin: 5px 0 0; padding-inline-start: 18px; }
.archive-diagram-edges:not(:empty) { margin-top: 6px; }
.archive-diagram-edge { display: flex; gap: 6px; align-items: baseline; }
.archive-diagram-edge svg {
 flex: 0 0 14px;
 width: 14px;
 height: 14px;
 align-self: start;
 margin-top: .16em;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.5;
}
.archive-diagram-note { font-size: .9em; color: var(--muted); }

.archive-layout > .archive-sidebar {
 display: flex;
 flex-direction: column;
 overflow: hidden;
 padding-block: 0;
}
.archive-navigation-tools {
 position: static;
 flex: none;
 border-radius: 0;
 border-bottom: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
 background: transparent;
 margin: 0;
 padding-block: 5px;
}
.archive-nav-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 6px 0; }
.archive-sidebar-collapsed .archive-nav-scroll { display: none; }
.archive-sidebar-collapsed .archive-sidebar-toggle { border: 1px solid color-mix(in srgb, var(--text) 32%, transparent); }
.archive-tree-parent, .archive-milestone-row { align-items: start; }
.archive-milestone-row::before { top: 16px; }
.archive-milestone-row > .archive-nav-item:first-child { margin-inline-start: 20px; }
.archive-sidebar .archive-milestone-row .archive-nav-item { align-items: start; gap: 5px; padding-block: 8px; }
.archive-era-number { flex: none; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--muted); }
.archive-era-context { font-size: .85em; color: var(--muted); margin-block: 0 4px; }
.archive-review-unavailable { border-inline-start: 2px solid currentColor; padding: 8px 12px; margin-bottom: 12px; }
.archive-review-unavailable p { margin: 2px 0 0; }

.archive-diagram-viewport { overflow: auto; margin-block: 8px; border-radius: var(--radius-control); }
.archive-diagram-graph { position: relative; min-width: 500px; padding: 6px 6px 40px; }
.archive-diagram-graph-row { display: flex; justify-content: center; gap: 14px; }
.archive-diagram-graph-row + .archive-diagram-graph-row { margin-top: 44px; }
.archive-diagram-graph-row .archive-diagram-node { width: min(100%, 220px); max-width: 100%; position: relative; z-index: 1; }
.archive-diagram-node-note { margin: 4px 0 0; font-size: .85em; }
.archive-diagram-graph > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.archive-diagram-graph > svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.archive-diagram-graph > svg text { fill: currentColor; font-size: 11px; paint-order: stroke; stroke: var(--surface-content); stroke-width: 4px; }
.archive-diagram-dialog { width: min(880px, calc(100vw - 24px)); max-height: 90vh; box-sizing: border-box; color: var(--text); background: var(--surface-content); }
.archive-diagram-dialog::backdrop { background: rgb(0 0 0 / 42%); }
.archive-diagram-text { margin-block: 8px; }
.archive-diagram-text > summary { cursor: pointer; }
.archive-diagram-text > ol { margin-block: 8px; }

.archive-comparison-dialog {
 padding: 0;
 overflow: hidden;
 border: var(--border-width) solid var(--border);
 border-radius: var(--radius-window);
 box-shadow: var(--shadow-window);
}
.archive-comparison-dialog[open] {
 display: grid;
 grid-template-rows: auto minmax(0, 1fr);
}
.archive-comparison-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 10px 14px;
 border-bottom: var(--border-width) solid var(--border);
 background: var(--surface-subtle);
}
.archive-comparison-header h2 { margin: 0; font-size: 1rem; line-height: 1.3; }
.archive-comparison-header .archive-comparison-close {
 --traffic-disc-size: 20px;
 width: 36px;
 height: 36px;
 font-size: 16px;
}
.archive-comparison-dialog .archive-diagram-viewport:focus-visible {
 outline: var(--focus-width) solid var(--focus-color);
 outline-offset: -2px;
}
.archive-comparison-dialog .archive-diagram-viewport {
 min-height: 0;
 margin: 0;
 border-radius: 0;
 overscroll-behavior: contain;
}
.archive-comparison-graph {
 box-sizing: border-box;
 width: min(100%, 660px);
 min-width: 460px;
 margin-inline: auto;
 padding: 16px 14px 36px;
}
.archive-comparison-graph .archive-diagram-graph-row { gap: 12px; }
.archive-comparison-graph .archive-diagram-graph-row + .archive-diagram-graph-row { margin-top: 25px; }
.archive-comparison-graph .archive-diagram-node {
 width: 185px;
 padding: 7px 10px;
 text-align: center;
}
.archive-comparison-graph .archive-comparison-focus {
 width: min(100%, 362px);
 padding: 10px 14px;
 text-align: start;
 border-color: color-mix(in srgb, var(--focus-color) 35%, var(--border));
 background: color-mix(in srgb, var(--focus-color) 8%, var(--surface-content));
}
.archive-comparison-focus strong { font-size: 1.06em; }
.archive-comparison-notes {
 margin: 5px 0 0;
 padding-inline-start: 17px;
 color: var(--muted);
 font-size: .9em;
 line-height: 1.45;
}
.archive-comparison-graph .archive-comparison-outcome {
 flex: 1 1 0;
 display: grid;
 place-items: center;
}

.archive-reader-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.archive-reader-pane > .archive-reader { flex: 1; }
.archive-reader-toolbar {
 flex: none;
 margin: 0;
 padding: 6px var(--window-pad);
 border-bottom: var(--border-width) solid var(--border);
 background: var(--surface-content);
}
.archive-reader-toolbar[hidden] { display: none; }
.archive-sidebar .archive-narrative-list { margin-inline-start: 0; padding-inline-start: var(--archive-tree-disclosure); border: 0; }
.archive-narrative-list > li + li { margin-top: 2px; }

.archive-static-gallery, .initial-materials { --archive-carousel-height: 280px; }
.archive-static-gallery .archive-carousel-card,
.initial-materials .archive-carousel-card {
 flex-basis: clamp(130px, calc(var(--archive-carousel-height) * var(--carousel-ratio)), 360px);
}
.archive-static-gallery[data-carousel-count='1'] .archive-carousel-card { flex-basis: 100%; }
.archive-static-gallery figure { margin: 0; }
.archive-static-gallery .archive-carousel-preview img,
.initial-materials .archive-carousel-preview img { object-position: top center; margin-inline: auto; }
.archive-static-caption, .initial-material-card figcaption, .initial-material-card > p { text-align: center; }
.archive-static-caption .essay-gallery-title { text-align: inherit; }
.archive-static-caption { display: grid; gap: 3px; margin-top: 6px; }
.archive-palette .archive-carousel-card { flex: 0 0 110px; }
.archive-static-gallery[data-carousel-count='1'] .archive-sitemap-canvas {
 height: min(410px, 60vh);
 overflow: auto;
 overscroll-behavior: contain;
 border: 1px solid var(--border);
}
.archive-static-gallery[data-carousel-count='1'] .archive-sitemap-canvas img {
 width: 1800px;
 max-width: none;
 max-height: none;
 margin: 0;
}
.archive-sitemap-canvas:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -2px; }

.has-local-project-demo > .window-content {
 display: flex;
 flex-direction: column;
 gap: 0;
 min-height: 0;
 padding: 0;
 overflow: hidden;
}
.has-local-project-demo > .window-content > :is(.region-label, h2, p) { display: none; }
.has-local-project-demo > .window-content { position: relative; }
.project-demo-frame {
 --demo-scale: .85;
 position: absolute;
 inset: 0 auto auto 0;
 width: calc(100% / var(--demo-scale));
 height: calc(100% / var(--demo-scale));
 border: 0;
 background: #18151d;
 transform: scale(var(--demo-scale));
 transform-origin: top left;
}
#dm-a-gm-demo > .window-title-bar { height: 34px; }