@layer reset, tokens, flow, primitives, layout, icons, shell, rail, pages, desk, product, showcase, responsive, a11y;
@layer tokens {
@media (prefers-reduced-data: no-preference) {
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Inter-Regular.woff2") format("woff2"), url("/fonts/Inter-Regular.ttf") format("truetype");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Inter-SemiBold.woff2") format("woff2"), url("/fonts/Inter-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Inter-Bold.woff2") format("woff2"), url("/fonts/Inter-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/InterDisplay-Bold.woff2") format("woff2"), url("/fonts/InterDisplay-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2"), url("/fonts/JetBrainsMono-Regular.ttf") format("truetype");
}
}
:root {
  color-scheme: light dark;
  --density: 1;
 --dir: 1;
  interpolate-size: allow-keywords;
  --bg:        light-dark(#f3f0ea, #080b12);
  --bg-elev:   light-dark(#fffdf9, #101826);
 --bg-soft:   light-dark(#ebe6dd, #141d2e);
 --bg-hover:  light-dark(#e2dcd2, #1a2436);
 --bg-active: light-dark(#d5f3ed, #0f2a28);
  --card:      light-dark(#fffdf9, #182236);
  --chrome:    light-dark(rgba(255, 253, 249, 0.92), rgba(16, 24, 38, 0.94));
  --text:  light-dark(#161410, #eceaf5);
  --muted: light-dark(#5a5348, #b0aabf);
 --faint: light-dark(#7a7368, #8889a0);
  --accent:     light-dark(#0f766e, #3eefd0);
  --accent-dim: light-dark(#0d5e58, #1ab89a);
  --accent-ink: light-dark(#ffffff, #04221c);
  --accent-soft: light-dark(rgba(15, 118, 110, 0.14), rgba(62, 239, 208, 0.16));
  --accent-ring: light-dark(rgba(15, 118, 110, 0.28), rgba(62, 239, 208, 0.32));
  --accent-glow: light-dark(rgba(15, 118, 110, 0.22), rgba(62, 239, 208, 0.22));
  --mesh:        light-dark(rgba(15, 118, 110, 0.12), rgba(62, 239, 208, 0.16));
  --purple-soft: light-dark(rgba(139, 92, 246, 0.10), rgba(167, 139, 250, 0.12));
  --ok:            light-dark(#15803d, #6edf96);
  --ok-strong:     light-dark(#22c55e, #4ade80);
  --warn:          light-dark(#a16207, #e8c36a);
  --warn-strong:   light-dark(#eab308, #fbbf24);
  --danger:        light-dark(#dc2626, #f07178);
  --danger-strong: #ef4444;
  --info:          light-dark(#2563eb, #60a5fa);
  --purple:        light-dark(#7c3aed, #a78bfa);
  --ok-glow:     light-dark(rgba(22, 163, 74, 0.16), rgba(110, 223, 150, 0.16));
  --warn-glow:   light-dark(rgba(202, 138, 4, 0.16), rgba(232, 195, 106, 0.16));
  --danger-glow: light-dark(rgba(220, 38, 38, 0.16), rgba(240, 113, 120, 0.16));
  --tone-ok: var(--ok);
  --tone-ok-soft: var(--ok-glow);
  --tone-ok-ink: light-dark(#ffffff, #052e16);
  --tone-warn: var(--warn);
  --tone-warn-soft: var(--warn-glow);
  --tone-warn-ink: light-dark(#ffffff, #422006);
  --tone-danger: var(--danger);
  --tone-danger-soft: var(--danger-glow);
  --tone-danger-ink: light-dark(#ffffff, #2a0a0c);
  --tone-info: var(--info);
  --tone-info-soft: light-dark(rgba(37, 99, 235, 0.14), rgba(96, 165, 250, 0.16));
  --tone-info-ink: light-dark(#ffffff, #082f49);
  --tone-accent: var(--accent);
  --tone-accent-soft: var(--accent-soft);
  --tone-accent-ink: var(--accent-ink);
  --tone-purple: var(--purple);
  --tone-purple-soft: var(--purple-soft);
  --tone-purple-ink: light-dark(#ffffff, #2e1065);
  --tone-muted: var(--muted);
  --tone-muted-soft: var(--bg-hover);
  --tone-muted-ink: var(--text);
  --border:        light-dark(#ddd6cb, #2a3a52);
  --border-strong: light-dark(#c4bdb2, #334155);
  --hairline:      light-dark(#e4ddd3, #1c2532);
  --ink-on-solid: #ffffff;
  --stage-plate: #000000;
  --scrim: light-dark(rgba(15, 23, 42, 0.42), rgba(0, 0, 0, 0.65));
  --scrim-strong: light-dark(rgba(15, 23, 42, 0.62), rgba(4, 7, 12, 0.82));
  --highlight: light-dark(rgba(15, 23, 42, 0.06), rgba(255, 255, 255, 0.12));
  --shine: none;
  --ring: var(--accent);
  --radius-sm: 8px;
  --radius: clamp(10px, 1.2vw, 14px);
  --radius-md: var(--radius);
  --radius-lg: clamp(14px, 1.8vw, 18px);
  --radius-pill: 999px;
  --radius-full: var(--radius-pill);
  --shadow-soft: light-dark(0 2px 8px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(0, 0, 0, 0.2));
  --shadow: light-dark(0 12px 32px rgba(15, 23, 42, 0.06), 0 18px 50px rgba(0, 0, 0, 0.45));
  --shadow-strong: light-dark(0 24px 48px rgba(15, 23, 42, 0.10), 0 28px 64px rgba(0, 0, 0, 0.55));
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow);
  --shadow-lg: var(--shadow-strong);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-geist: "Geist", "Geist Sans", var(--font-system);
  --font-serif: "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --font-display-stack: "Inter Display", var(--font-sans);
  --font: var(--font-custom, var(--font-sans));
  --font-display: var(--font-display-custom, var(--font-display-stack));
  --mono: var(--font-mono-custom, var(--font-mono));
  --font-features: "kern" 1, "liga" 1, "calt" 1;
  --font-features-pro: "kern" 1, "liga" 1, "calt" 1, "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1;
  --font-settings: normal;
  --font-display-settings: "opsz" 36;
  --font-tabular: tabular-nums;
  --font-proportional: proportional-nums;
  --t-3xs: clamp(0.60rem, 0.58rem + 0.08vw, 0.65rem);
  --t-2xs: clamp(0.68rem, 0.65rem + 0.10vw, 0.72rem);
  --t-xs: clamp(0.72rem, 0.7rem + 0.12vw, 0.78rem);
  --t-sm: clamp(0.83rem, 0.8rem + 0.18vw, 0.9rem);
  --t-md: clamp(0.95rem, 0.9rem + 0.25vw, 1.02rem);
  --t-lg: clamp(1.08rem, 1rem + 0.35vw, 1.18rem);
  --t-xl: clamp(1.28rem, 1.15rem + 0.6vw, 1.45rem);
  --t-2xl: clamp(1.55rem, 1.35rem + 1vw, 1.85rem);
  --t-3xl: clamp(2rem, 1.65rem + 1.8vw, 2.6rem);
  --t-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.4rem);
  --lh-tight: 1.3;
  --lh-body: 1.62;
  --lh-relaxed: 1.75;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --space-1: calc(clamp(3px, 0.2rem + 0.1vw, 4px) * var(--density));
  --space-2: calc(clamp(6px, 0.4rem + 0.15vw, 8px) * var(--density));
  --space-3: calc(clamp(10px, 0.7rem + 0.2vw, 12px) * var(--density));
  --space-4: calc(clamp(14px, 0.9rem + 0.3vw, 16px) * var(--density));
  --space-5: calc(clamp(20px, 1.4rem + 0.5vw, 24px) * var(--density));
  --space-6: calc(clamp(28px, 2rem + 0.8vw, 32px) * var(--density));
  --space-7: calc(clamp(40px, 3rem + 1vw, 48px) * var(--density));
  --space-8: calc(clamp(56px, 4rem + 1.2vw, 64px) * var(--density));
  --shell-h: calc(52px * var(--density));
  --list-min: clamp(280px, 35vw, 500px);
  --detail-min: clamp(320px, 40vw, 700px);
  --pane-w: 380px;
  --pane-gutter: 6px;
  --nav-w: 200px;
  --nav-collapsed: 52px;
  --tools-w: 280px;
  --status-h: calc(28px * var(--density));
  --row-h: calc(40px * var(--density));
  --grid-min: 12.5rem;
  --split-min: 18rem;
  --side-min: 18rem;
  --top-h: 3.1rem;
  --prose-w: 54rem;
  --desk-w: 88rem;
  --rail-break: 720px;
  --split-break: 640px;
  --viewport-max: 576px;
  --form-grid-col: 224px;
  --dur-instant: 0s;
  --dur-fast: 0.12s;
  --dur: 0.2s;
  --dur-slow: 0.4s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-spring: 0.35s;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring-snappy: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --z-base: 0;
  --z-sticky: 10;
  --z-header: 50;
  --z-dropdown: 100;
  --z-tooltip: 110;
  --z-modal: 1000;
  --z-toast: 9999;
  --chrome-blur: blur(18px);
  --float-blur: blur(20px);
  --float-blur-lg: blur(24px);
  --scrim-blur: blur(10px);
  --panel-wash: linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 92%, var(--accent-soft)), var(--card) 60%);
  --chrome-fill: color-mix(in srgb, color-mix(in srgb, var(--card) 92%, var(--accent-soft)) 88%, transparent);
  --dock-fill: color-mix(in srgb, color-mix(in srgb, var(--bg-soft) 88%, var(--accent-soft)) 70%, var(--card));
  --side-fill: color-mix(in srgb, color-mix(in srgb, var(--bg-soft) 88%, var(--accent-soft)) 65%, var(--card));
  --sticky-fill: color-mix(in srgb, color-mix(in srgb, var(--card) 94%, var(--accent-soft)) 92%, var(--bg-soft));
  --featured-wash: color-mix(in srgb, var(--intent-soft, var(--accent-soft)) 50%, transparent);
  --notice-fill: color-mix(in srgb, var(--intent-soft, var(--accent-soft)) 55%, var(--card));
  --intent-border: color-mix(in srgb, var(--intent, var(--accent)) 45%, var(--border));
  --intent-border-soft: color-mix(in srgb, var(--intent, var(--accent)) 28%, var(--border));
  --accent-edge: color-mix(in srgb, var(--accent) 55%, var(--border));
  --border-accent: color-mix(in oklab, var(--border) 55%, var(--accent));
 --border-accent-soft: color-mix(in oklab, var(--border) 70%, var(--accent));
  --border-accent-strong: color-mix(in oklab, var(--border) 40%, var(--accent));
 --edge-accent: var(--edge-accent);
  --edge-accent-soft: color-mix(in oklab, var(--border-strong) 70%, var(--accent));
 --edge-accent-strong: color-mix(in oklab, var(--border-strong) 40%, var(--accent));
  --hairline-accent: color-mix(in oklab, var(--hairline) 55%, var(--accent));
 --hairline-accent-soft: color-mix(in oklab, var(--hairline) 70%, var(--accent));
  --fill-flat: color-mix(in oklab, var(--card) 92%, var(--accent-soft));
 --fill-plate: color-mix(in oklab, var(--card) 94%, var(--accent-soft));
  --fill-quiet: color-mix(in oklab, var(--card) 96%, var(--accent-soft));
 --fill-sunken: color-mix(in oklab, var(--bg-soft) 80%, var(--accent-soft));
  --fill-sunken-soft: color-mix(in oklab, var(--bg-soft) 82%, var(--accent-soft));
 --fill-row: color-mix(in oklab, var(--bg-soft) 70%, var(--accent-soft));
  --fill-hover: color-mix(in oklab, var(--bg-hover) 55%, var(--accent-soft));
 --fill-elev: color-mix(in oklab, var(--bg-elev) 88%, var(--accent-soft));
  --fill-elev-soft: color-mix(in oklab, var(--bg-elev) 85%, var(--accent-soft));
 --fill-bg: color-mix(in oklab, var(--bg) 88%, var(--accent-soft));
  --fill-track: color-mix(in oklab, var(--bg-hover) 70%, var(--accent-soft));
 --fill-chrome: color-mix(in oklab, var(--chrome) 85%, var(--accent-soft));
  --fill-active: color-mix(in oklab, var(--bg-active) 55%, var(--accent-soft));
 --fill-active-hot: color-mix(in oklab, var(--bg-active) 70%, var(--accent-soft));
  --fill-nest: color-mix(in oklab, var(--panel-wash) 88%, var(--accent-soft));
 --fill-sticky: color-mix(in oklab, var(--sticky-fill) 85%, var(--accent-soft));
  --fill-dock: color-mix(in oklab, var(--dock-fill) 85%, var(--accent-soft));
 --fill-side: color-mix(in oklab, var(--side-fill) 88%, var(--accent-soft));
  --fill-notice: color-mix(in oklab, var(--notice-fill) 92%, var(--accent-soft));
 --fill-ink: color-mix(in oklab, var(--bg) 88%, var(--accent));
  --fill-mark: color-mix(in oklab, var(--bg-hover) 50%, var(--accent));
 --fill-rail: color-mix(in oklab, var(--accent-soft) 85%, var(--bg-elev));
 --fill-solid: color-mix(in oklab, var(--accent) 88%, var(--bg-elev));
  --border-feature: color-mix(in oklab, var(--accent) 35%, var(--border));
 --intent-edge: color-mix(in oklab, var(--intent-border-soft) 70%, var(--accent));
 --focus-halo: 0 0 0 4px color-mix(in oklab, var(--accent-ring) 50%, transparent);
 --intent-halo: 0 0 0 0.4rem var(--intent-soft, var(--accent-soft));
  --fill-outline: color-mix(in oklab, transparent 70%, var(--accent-soft));
 --fill-shimmer: color-mix(in oklab, var(--accent-soft) 55%, var(--bg-soft));
 --border-ok: color-mix(in oklab, var(--ok, var(--accent)) 65%, var(--border));
  --accent-mid: color-mix(in oklab, var(--accent) 55%, var(--accent-soft));
 --accent-fade: color-mix(in oklab, var(--accent) 55%, transparent);
 --ring-current: 0 0 0 3px color-mix(in oklab, currentColor 22%, transparent);
  --wash-hold: color-mix(in srgb, var(--accent) 18%, transparent);
 --wash-drop: color-mix(in srgb, var(--accent) 22%, transparent);
 --wash-warn: color-mix(in srgb, var(--warn) 18%, transparent);
  --featured-wash-pro: color-mix(in srgb, var(--intent-soft, var(--accent-soft)) 22%, var(--card));
 --featured-wash-soft: color-mix(in srgb, var(--intent-soft, var(--accent-soft)) 18%, var(--card));
 --featured-wash-round: color-mix(in srgb, var(--intent-soft, var(--accent-soft)) 14%, var(--card));
  --intent-border-pro: color-mix(in srgb, var(--intent, var(--accent)) 32%, var(--border));
 --accent-edge-pro: color-mix(in srgb, var(--accent) 40%, var(--border));
  --brand-glow-soft: 0 8px 20px color-mix(in srgb, var(--accent) 26%, transparent);
 --brand-glow-round: 0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent);
 --brand-glow-relaxed: 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent);
  --outline-accent: color-mix(in srgb, var(--accent) 70%, transparent);
 --outline-accent-dash: color-mix(in srgb, var(--accent) 35%, transparent);
 --border-intent: color-mix(in srgb, var(--intent) 40%, var(--border));
  --plate: color-mix(in srgb, var(--bg-elev) 92%, transparent);
 --plate-soft: color-mix(in srgb, var(--bg-elev) 94%, transparent);
 --plate-quiet: color-mix(in srgb, var(--bg-elev) 96%, transparent);
 --plate-scrim: color-mix(in srgb, var(--bg) 75%, transparent);
  --dash-border: color-mix(in srgb, var(--border) 70%, var(--accent-ring));
 --chip-ring: 0 0 0 1px var(--accent-ring);
 --mark-ring: 0 0 0 2px var(--accent-ring);
 --control-ring: 0 0 0 3px var(--accent-ring);
 --intent-inset: inset 0 0 0 1px var(--intent-soft, var(--accent-ring));
 --spinner-track: var(--accent-ring);
 --track-inset: inset 0 0 0 1px var(--border-accent);
 --meter-sheen: color-mix(in srgb, var(--ink-on-solid) 42%, transparent);
 --btn-hover-wash: linear-gradient(color-mix(in srgb, currentColor 9%, transparent) 0 0);
 --btn-press-wash: linear-gradient(color-mix(in srgb, currentColor 16%, transparent) 0 0);
 --heat-ok: color-mix(in oklab, var(--ok) calc(var(--heat, 0) * 55%), transparent);
 --heat-dn: color-mix(in oklab, var(--danger) calc(var(--heat, 0) * 55%), transparent);
 --progress-glow: 0 0 8px var(--accent-glow);
 --progress-glow-sm: 0 0 6px var(--accent-glow);
 --float-glow: 0 0 24px var(--accent-dim, rgba(0, 0, 0, 0.25));
 --float-glow-lg: 0 0 32px var(--accent-soft);
 --sticky-edge: var(--shadow-sm), 0 1px 0 var(--edge-accent);
  --callout-wash: linear-gradient(90deg, var(--intent-soft, var(--accent-soft)), transparent 70%) var(--card);
 --accent-wash: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 35%, var(--bg-soft)), var(--card) 70%);
  --intent-wash: linear-gradient(180deg, var(--intent-soft, var(--accent-soft)), var(--card) 55%);
 --mesh-alt: var(--purple-soft);
 --mast-glow: radial-gradient(ellipse at 12% 40%, var(--mesh), transparent 58%), radial-gradient(ellipse at 92% 8%, var(--mesh-alt), transparent 42%);
 --hero-wash: radial-gradient(ellipse at 10% 20%, var(--mesh), transparent 55%), var(--panel-wash);
  --hover-lift: translateY(-1px);
 --hover-elevate: 0 4px 12px rgba(0, 0, 0, 0.06);
 --brand-mark-bg: linear-gradient(145deg, var(--accent) 0%, var(--accent-dim) 100%);
 --brand-mark-shadow: 0 0 0 1px var(--accent-ring), 0 8px 18px var(--accent-glow);
  --glass-blur: blur(20px) saturate(180%);
 --glass-blur-lg: blur(32px) saturate(180%);
 --glass-bg: light-dark(rgba(255, 253, 249, 0.75), rgba(12, 17, 24, 0.75));
 --glass-border: color-mix(in oklab, light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08)) 72%, var(--accent));
  --glass-shadow: light-dark(0 8px 32px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.4));
  accent-color: var(--accent);
  caret-color: var(--accent);
}
* { scrollbar-width: thin; scrollbar-color: var(--border-accent) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px;
}
::-webkit-scrollbar-track { background: transparent;
}
::-webkit-scrollbar-thumb { background: var(--edge-accent); border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--faint) 45%, var(--accent));
}
:root[data-theme="light"] { color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark;
}
[data-theme="midnight"] {
  color-scheme: dark;
  --bg:        #05060a;
  --bg-elev:   #0b0e18;
  --bg-soft:   #080b14;
  --bg-hover:  #121628;
  --bg-active: #171332;
  --card:      #0e1220;
  --chrome:    rgba(11, 14, 24, 0.94);
  --text:  #e8e6f4;
  --muted: #a8a3c0;
  --faint: #7d7996;
  --accent:     #8b7cff;
  --accent-dim: #7869ea;
  --accent-ink: #0a0714;
  --accent-soft: rgba(139, 124, 255, 0.16);
  --accent-ring: rgba(139, 124, 255, 0.32);
  --accent-glow: rgba(139, 124, 255, 0.22);
  --mesh:        rgba(139, 124, 255, 0.16);
  --border:        #232a42;
  --border-strong: #2e3654;
  --hairline:      #1c2233;
  --scrim: rgba(0, 0, 0, 0.7);
  --scrim-strong: rgba(4, 7, 12, 0.85);
}
html[data-dir="rtl"], html[dir="rtl"] { direction: rtl; --dir: -1;
}
html[data-dir="ltr"], html[dir="ltr"] { direction: ltr; --dir: 1;
}
html[data-font="system"] { --font: var(--font-system); --font-display: var(--font-system);
}
html[data-font="geist"] { --font: var(--font-geist); --font-display: var(--font-geist);
}
html[data-font="inter"] { --font: var(--font-sans); --font-display: var(--font-display-stack);
}
html[data-font="serif"] { --font: var(--font-serif); --font-display: var(--font-serif);
}
html[data-font="mono"] { --font: var(--font-mono); --font-display: var(--font-mono);
}
html[data-font="custom"] { --font: var(--font-custom, var(--font-sans)); --font-display: var(--font-display-custom, var(--font));
}
html[data-palette="slate"] { --palette-h: 220; --palette-c: 0.14;
}
html[data-palette="indigo"] { --palette-h: 265; --palette-c: 0.16;
}
html[data-palette="emerald"] { --palette-h: 155; --palette-c: 0.15;
}
html[data-palette="amber"] { --palette-h: 75;  --palette-c: 0.16;
}
html[data-palette="rose"] { --palette-h: 15;  --palette-c: 0.17;
}
html[data-palette="violet"] { --palette-h: 290; --palette-c: 0.16;
}
html[data-palette="cyan"] { --palette-h: 200; --palette-c: 0.15;
}
@supports (color: oklch(0.5 0.1 200)) {html[data-palette]:not([data-palette="custom"]) {
    --accent: light-dark(
      oklch(0.52 var(--palette-c, 0.15) var(--palette-h, 175)),
      oklch(0.78 var(--palette-c, 0.15) var(--palette-h, 175))
    );
    --accent-dim: light-dark(
      oklch(0.42 var(--palette-c, 0.15) var(--palette-h, 175)),
      oklch(0.68 var(--palette-c, 0.15) var(--palette-h, 175))
    );
    --accent-ink: light-dark(#ffffff, oklch(0.12 0.04 var(--palette-h, 175)));
    --accent-soft: light-dark(oklch(0.52 var(--palette-c, 0.15) var(--palette-h, 175) / 0.14), oklch(0.78 var(--palette-c, 0.15) var(--palette-h, 175) / 0.16));
    --accent-ring: light-dark(oklch(0.52 var(--palette-c, 0.15) var(--palette-h, 175) / 0.28), oklch(0.78 var(--palette-c, 0.15) var(--palette-h, 175) / 0.32));
    --accent-glow: light-dark(oklch(0.52 var(--palette-c, 0.15) var(--palette-h, 175) / 0.22), oklch(0.78 var(--palette-c, 0.15) var(--palette-h, 175) / 0.22));
    --mesh: light-dark(oklch(0.52 var(--palette-c, 0.15) var(--palette-h, 175) / 0.12), oklch(0.78 var(--palette-c, 0.15) var(--palette-h, 175) / 0.16));
    --ring: var(--accent);
}
}
html[data-accent="custom"],
html[data-palette="custom"] {
  --accent-dim: var(--accent); --accent-ink: var(--ink-on-solid);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 32%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent); --ring: var(--accent);
  --mesh: color-mix(in srgb, var(--accent) 14%, transparent);
}
@supports (color: oklch(from red l c h)) {html[data-accent="custom"],
  html[data-palette="custom"] {
    --accent-dim: oklch(from var(--accent) calc(l * 0.88) c h);
    --accent-ink: oklch(from var(--accent) clamp(0.12, (0.62 - l) * 8, 0.98) 0.03 h);
    --accent-soft: oklch(from var(--accent) l c h / 0.16);
    --accent-ring: oklch(from var(--accent) l c h / 0.32);
    --accent-glow: oklch(from var(--accent) l c h / 0.22);
    --mesh: oklch(from var(--accent) l c h / 0.14);
}
}
html[data-palette="custom"],
html[data-accent="custom"] {
  --accent: var(--brand, var(--accent));
}
@media (prefers-reduced-motion: reduce) {:root { --hover-lift: none;
 --hover-elevate: none;
}
*, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
}
::selection { background: var(--accent-soft); color: var(--accent-ink);
}}
@layer product {
html[data-style="pro"],
html[data-style="sharp"],
html[data-style="flat"],
html[data-style="brutal"] {
  --shine: none; --chrome-blur: none; --float-blur: none; --float-blur-lg: none;
  --scrim-blur: none; --glass-blur: none; --glass-blur-lg: none;
  --hover-lift: none; --hover-elevate: var(--shadow-soft);
}
html[data-style="pro"],
html[data-style="sharp"],
html[data-style="flat"],
html[data-style="brutal"],
html[data-style="dense"],
html[data-style="soft"],
html[data-style="round"],
html[data-style="relaxed"] {
  --panel-wash: var(--card); --hero-wash: var(--card);
  --chrome-fill: var(--card); --dock-fill: var(--card); --side-fill: var(--card); --sticky-fill: var(--card);
}
html[data-style="pro"],
html[data-style="sharp"],
html[data-style="flat"],
html[data-style="brutal"],
html[data-style="dense"] { --featured-wash: var(--card);
}
html[data-style="pro"] {
  --radius-sm: 4px; --radius: 6px; --radius-lg: 8px;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --glass-bg: var(--card); --glass-border: var(--border-accent-soft); --glass-shadow: var(--shadow);
  --mesh: transparent; --mesh-alt: transparent; --mast-glow: none;
  --featured-wash: var(--featured-wash-pro);
  --notice-fill: var(--card); --callout-wash: var(--card); --accent-wash: var(--card); --intent-wash: var(--card);
  --intent-border: var(--intent-border-pro); --intent-border-soft: var(--border-accent-soft);
  --accent-edge: var(--accent-edge-pro); --dash-border: var(--border-accent); --chip-ring: 0 0 0 1px var(--accent-ring);
  --brand-mark-bg: var(--accent); --brand-mark-shadow: var(--chip-ring);
  --font-features: var(--font-features-pro); --control-h: calc(2.35rem * var(--density));
}
html[data-style="pro"] :is(.popover, dialog.modal-overlay, .cmd-palette[data-surface="glass"], dialog.cmd-palette[data-surface="glass"]) { background: var(--bg-elev);
}
html[data-style="sharp"] {
  --radius-sm: 0; --radius: 2px; --radius-lg: 3px;
  --shadow-soft: none; --shadow: none; --shadow-md: none; --shadow-lg: none;
  --shadow-strong: 0 0 0 1px var(--border-accent); --mesh: transparent; --mesh-alt: transparent; --mast-glow: none;
  --dash-border: var(--edge-accent); --intent-border: var(--edge-accent); --intent-border-soft: var(--border-accent-soft); --glass-border: var(--border-accent);
  --brand-mark-bg: var(--accent); --brand-mark-shadow: 0 0 0 1px var(--edge-accent-strong); --chip-ring: 0 0 0 1px var(--accent-ring);
}
html[data-style="soft"] {
  --radius-sm: 10px; --radius: clamp(12px, 1.5vw, 18px); --radius-lg: clamp(18px, 2.2vw, 24px);
  --shadow-soft: 0 1px 4px rgba(15, 23, 42, 0.05); --shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08); --hover-lift: translateY(-2px); --hover-elevate: 0 8px 24px rgba(15, 23, 42, 0.08);
  --featured-wash: var(--featured-wash-soft);
  --dash-border: var(--border-accent); --glass-border: var(--border-accent-soft); --chip-ring: 0 0 0 1px var(--accent-ring);
  --brand-mark-shadow: var(--brand-glow-soft);
}
html[data-style="round"] {
  --radius-sm: 14px; --radius: 20px; --radius-lg: 28px;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08); --shadow-md: 0 14px 36px rgba(15, 23, 42, 0.1);
  --hover-lift: translateY(-2px); --hover-elevate: 0 12px 28px rgba(15, 23, 42, 0.1);
  --featured-wash: var(--featured-wash-round);
  --dash-border: var(--border-accent); --glass-border: var(--border-accent-soft); --chip-ring: 0 0 0 1px var(--accent-ring);
  --brand-mark-shadow: var(--brand-glow-round);
}
html[data-style="dense"] {
  --density: 0.85; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px;
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
  --dash-border: var(--border-accent); --glass-border: var(--border-accent-soft); --chip-ring: 0 0 0 1px var(--accent-ring);
}
html[data-style="relaxed"] {
  --density: 1.15; --radius: clamp(12px, 1.4vw, 16px); --radius-lg: clamp(16px, 1.8vw, 20px); --featured-wash: var(--card);
  --hover-lift: translateY(-1px); --hover-elevate: 0 6px 18px rgba(15, 23, 42, 0.07);
  --dash-border: var(--border-accent); --glass-border: var(--border-accent-soft); --chip-ring: 0 0 0 1px var(--accent-ring);
  --brand-mark-shadow: var(--brand-glow-relaxed);
}
html[data-style="flat"] {
  --shadow-soft: none; --shadow: none; --shadow-md: none; --shadow-lg: none;
  --shadow-strong: none; --shadow-inner: none; --mesh: transparent;
  --dash-border: var(--edge-accent); --intent-border: var(--edge-accent);
  --brand-mark-bg: var(--accent); --brand-mark-shadow: 0 0 0 1px var(--edge-accent-strong); --chip-ring: 0 0 0 1px var(--accent-ring);
}
html[data-style="brutal"] {
  --radius-sm: 0; --radius: 0; --radius-lg: 0;
  --shadow-soft: 2px 2px 0 var(--edge-accent-soft); --shadow: 4px 4px 0 var(--edge-accent-soft);
  --shadow-md: 4px 4px 0 var(--edge-accent-soft); --shadow-lg: 6px 6px 0 var(--edge-accent-soft);
  --shadow-strong: 8px 8px 0 var(--edge-accent-soft); --mesh: transparent; --mast-glow: none; --dash-border: var(--edge-accent);
  --brand-mark-bg: var(--accent); --brand-mark-shadow: 3px 3px 0 var(--edge-accent); --chip-ring: 0 0 0 1px var(--accent-ring);
}
html[data-style="glass"] {
  --card: var(--glass-bg); --bg-elev: var(--glass-bg); --shadow: var(--glass-shadow); --radius: var(--radius-lg);
  --chrome-blur: var(--glass-blur); --float-blur: var(--glass-blur); --float-blur-lg: var(--glass-blur-lg); --scrim-blur: var(--glass-blur);
  --panel-wash: var(--glass-bg); --hero-wash: var(--glass-bg); --featured-wash: var(--glass-bg);
  --chrome-fill: var(--glass-bg); --dock-fill: var(--glass-bg); --side-fill: var(--glass-bg); --sticky-fill: var(--glass-bg);
  --glass-border: var(--border-accent); --dash-border: var(--border-accent); --chip-ring: 0 0 0 1px var(--accent-ring);
}
html[data-style="glass"] .panel[data-surface], html[data-style="glass"] .card[data-surface] { border-color: var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}}
@layer reset {
@view-transition { navigation: auto;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0;
}
html { height: 100%;
 -webkit-text-size-adjust: 100%;
}
body {
  height: 100%; font-family: var(--font); font-size: var(--t-md);
  background: var(--bg);
  color: var(--text); line-height: var(--lh-body, 1.55);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: var(--font-features);
  overflow: hidden;
}
html:not([data-canvas="doc"]):not([data-canvas="bare"]) body {
  background:
    radial-gradient(70rem 28rem at 8% -12%, var(--mesh), transparent 58%),
    radial-gradient(42rem 22rem at 100% 0%, var(--purple-soft), transparent 50%),
    var(--bg);
}
html[data-canvas="doc"] body,
html[data-canvas="bare"] body {
  overflow: auto;
}
html[data-canvas="bare"] body {
  background: transparent;
  height: auto;
}
.page { container-type: inline-size;
}
::selection { background: var(--accent-soft); color: var(--text);
}
::target-text { background: var(--accent-soft); color: var(--text);
}
h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-bold); line-height: var(--lh-tight); text-wrap: balance;
}
@supports (text-box-trim: trim-both) {h1, h2, h3, .display, .kicker {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}
}
h1 { font-size: var(--t-2xl); letter-spacing: -0.04em;
}
h2 { font-size: var(--t-xl); letter-spacing: -0.03em;
}
h3 { font-size: var(--t-lg); letter-spacing: -0.02em;
}
h4 { font-size: var(--t-md);
}
h5 { font-size: var(--t-sm);
}
h6 { font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase;
}
p { line-height: var(--lh-body); text-wrap: pretty; hanging-punctuation: first last;
}
a { color: var(--accent); text-decoration: none;
}
a:hover { text-decoration: underline;
}
button { font-family: inherit; font-size: inherit; cursor: pointer;
}
input, select, textarea { font-family: inherit; font-size: inherit;
}
img, svg { display: block; max-width: 100%;
}
code { font-family: var(--mono); font-size: 0.85em;
}
ul, ol { list-style: none;
}
hr { border: 0; border-top: 1px solid var(--border);
}
.hidden { display: none !important;
}
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none;
}
html[data-shell="plain"] .work,
html[data-shell="plain"] #work {
  container-name: work;
  container-type: inline-size;
  min-width: 0;
  min-height: 0;
  padding: var(--space-6);
  max-width: 48rem;
  margin-inline: auto;
}
html[data-shell="plain"][data-canvas="app"] .work,
html[data-shell="plain"][data-canvas="app"] #work,
html[data-canvas="bare"] .work,
html[data-canvas="bare"] #work {
  max-width: none;
  padding: 0;
  margin-inline: 0;
  width: 100%;
  container-type: normal;
}
.hint { font-size: var(--t-xs); color: var(--faint); margin: 0;
}
.mono { font-family: var(--mono);
}
html, body, .shell, .topbar, .layout {
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (prefers-reduced-motion: no-preference) {::view-transition-old(root) { animation: vf-vt-out var(--dur) var(--ease);
}
::view-transition-new(root) { animation: vf-vt-in var(--dur) var(--ease);
}
}
@keyframes vf-vt-out { to { opacity: 0; }
}
@keyframes vf-vt-in { from { opacity: 0; }
}}
@layer primitives {
.stack { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
}
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.cluster > .field { width: auto; min-width: 4.5rem; max-width: 7rem;
}
.sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--side-min, 18rem), 22rem);
  gap: var(--space-4);
  min-width: 0;
}
.sidebar[data-side="start"] {
  grid-template-columns: minmax(var(--side-min, 18rem), 22rem) minmax(0, 1fr);
}
.frame {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 16 / 9;
}
.frame[data-surface="sunken"] {
  background: var(--fill-bg);
  border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
.frame > * { width: 100%; height: auto; display: block;
}
.frame > .velvet-viewport {
  position: absolute;
  inset: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.frame > .velvet-viewport > .velvet-canvas {
  width: 100%;
  height: 100%;
}
.frame[data-ratio="1/1"] { aspect-ratio: 1 / 1;
}
.frame[data-ratio="4/3"] { aspect-ratio: 4 / 3;
}
.frame[data-ratio="3/2"] { aspect-ratio: 3 / 2;
}
.frame[data-ratio="16/9"] { aspect-ratio: 16 / 9;
}
.frame[data-ratio="2/1"] { aspect-ratio: 2 / 1;
}
.frame[data-ratio="21/9"] { aspect-ratio: 21 / 9;
}
.frame[data-ratio="fill"] {
  aspect-ratio: auto;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 22rem;
}
.frame[data-live] > svg { visibility: hidden;
}
.frame[data-ratio="fill"] .velvet-canvas { cursor: crosshair;
}
@supports (aspect-ratio: attr(data-ratio type(<ratio>))) {.frame[data-ratio]:not([data-ratio="fill"]),
  .velvet-viewport[data-ratio]:not([data-ratio="fill"]) {
    aspect-ratio: attr(data-ratio type(<ratio>), 16 / 9);
}
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4) var(--space-5);
  align-items: start;
  min-width: 0;
  width: 100%;
}
.form-grid > * { min-width: 0;
}
.form-grid > .hint,
.form-grid > .drop,
.form-grid > .field:has(textarea),
.form-grid > .field:has(.list-row),
.form-grid > .field:has(.cluster),
.form-grid > .field:has(.drop),
.form-grid > .field:has(input[type="file"]) {
  grid-column: 1 / -1;
}
.scroll {
  min-height: 0;
  overflow: auto;
}
.scroll[data-axis="x"] { overflow-x: auto; overflow-y: hidden;
}
.scroll[data-axis="y"] { overflow-y: auto; overflow-x: hidden;
}
.scroll[data-stick] > * { overflow-anchor: none;
}
.scroll[data-stick]::after {
  content: "";
  display: block;
  height: 1px;
  overflow-anchor: auto;
}
.tab-panel { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
}
.panel-actions { margin-inline-start: auto;
}
.panel-actions .btn { min-inline-size: 1.75rem; padding-inline: var(--space-1);
}
.data-grid { overflow: auto; min-width: 0;
}
.data-grid[data-surface="sunken"] tr[data-current],
:is(.directory[data-surface="flat"], .panel[data-surface]) .data-table tr[data-current] {
  background: var(--accent-soft);
}
.data-grid[data-surface="sunken"] tr[data-current] td { color: var(--text);
}
.data-grid .grid-hit {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.data-grid[data-surface="sunken"] tr:has(.grid-hit):hover { background: var(--accent-soft);
}
.graph { position: relative; min-height: 10rem; contain: layout paint;
}
.graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.graph-edge { stroke: var(--border); stroke-width: 0.08;
}
.graph-node {
  position: absolute;
  left: calc(var(--gx, 0) * 100% / 12);
  top: calc(var(--gy, 0) * 100% / 8);
  transform: translate(-50%, -50%);
  contain: layout style;
}
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 12.5rem)), 1fr));
  gap: var(--space-3);
}
.grid-auto > * { min-width: 0;
}
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--split-min, 18rem)), 1fr));
  gap: var(--space-4);
}
.split > * { min-width: 0;
}
.center { display: flex; align-items: center; justify-content: center;
}
.between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
:is([data-tone="accent"], .callout-accent, .banner-accent) { --intent: var(--tone-accent); --intent-soft: var(--tone-accent-soft); --intent-ink: var(--tone-accent-ink);
}
:is([data-tone="ok"], [data-tone="live"], .callout-ok, .banner-ok) { --intent: var(--tone-ok); --intent-soft: var(--tone-ok-soft); --intent-ink: var(--tone-ok-ink);
}
:is([data-tone="warn"], [data-tone="away"], .callout-warn, .banner-warn) { --intent: var(--tone-warn); --intent-soft: var(--tone-warn-soft); --intent-ink: var(--tone-warn-ink);
}
:is([data-tone="danger"], .btn-danger, .callout-danger, .banner-danger) { --intent: var(--tone-danger); --intent-soft: var(--tone-danger-soft); --intent-ink: var(--tone-danger-ink);
}
[data-tone="info"] { --intent: var(--tone-info); --intent-soft: var(--tone-info-soft); --intent-ink: var(--tone-info-ink);
}
[data-tone="purple"] { --intent: var(--tone-purple); --intent-soft: var(--tone-purple-soft); --intent-ink: var(--tone-purple-ink);
}
[data-tone="muted"] { --intent: var(--tone-muted); --intent-soft: var(--tone-muted-soft); --intent-ink: var(--bg-elev);
}
:is([data-size="xs"], .btn-xs, .tiny) { --control-h: calc(1.75rem * var(--density)); --control-px: var(--space-2); --control-fs: var(--t-xs);
}
:is([data-size="sm"], .btn-sm) { --control-h: calc(2rem * var(--density)); --control-px: var(--space-3); --control-fs: var(--t-xs);
}
[data-size="md"] { --control-h: calc(2.5rem * var(--density)); --control-px: var(--space-4); --control-fs: var(--t-sm);
}
:is([data-size="lg"], .btn-lg) { --control-h: calc(3rem * var(--density)); --control-px: var(--space-5); --control-fs: var(--t-md);
}
[data-size="xl"] { --control-h: calc(3.5rem * var(--density)); --control-px: var(--space-6); --control-fs: var(--t-lg);
}
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: var(--t-xs); font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; white-space: nowrap;
  background: var(--intent-soft, var(--accent-soft)); color: var(--intent, var(--accent));
  border: 1px solid var(--intent-soft, var(--accent-ring)); box-shadow: var(--chip-ring);
}
.badge[data-variant="solid"] { background: var(--intent, var(--accent)); color: var(--intent-ink, var(--accent-ink));
}
.badge[data-variant="outline"] { background: var(--fill-outline); border-color: currentColor;
}
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-sm);
  font-size: var(--t-xs); font-weight: 500; color: var(--muted);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tag[data-surface="flat"] {
  background: var(--fill-track);
  border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
.tag[data-surface="flat"]:hover { background: var(--fill-active); border-color: var(--accent);
}
.card {
  border-radius: var(--radius);
  min-width: 0;
}
.card[data-surface] { padding: var(--space-4);
}
[data-surface="glass"],
.card[data-surface="glass"],
.panel[data-surface="glass"] {
  background: var(--chrome-fill); backdrop-filter: var(--chrome-blur); -webkit-backdrop-filter: var(--chrome-blur);
  border: 1px solid var(--border-accent-soft); box-shadow: var(--shine), var(--chip-ring);
}
[data-surface="sunken"],
.card[data-surface="sunken"],
.panel[data-surface="sunken"] {
  background: var(--panel-wash); border: 1px solid var(--border-accent-soft); box-shadow: var(--shine), var(--chip-ring);
}
[data-surface="elevated"],
.card[data-surface="elevated"],
.panel[data-surface="elevated"] {
  background: var(--fill-plate);
  border: 1px solid var(--border-accent);
  box-shadow: var(--shine), var(--shadow-md), var(--chip-ring);
}
[data-surface="flat"],
.card[data-surface="flat"],
.panel[data-surface="flat"] {
  background: var(--fill-quiet);
  border: 1px solid var(--border-accent-soft);
  box-shadow: var(--shine), var(--shadow-soft), var(--chip-ring);
}
.skeleton {
  background: linear-gradient(90deg, var(--fill-track) 22%, var(--fill-shimmer) 38%, var(--fill-track) 62%);
  background-size: 400% 100%; animation: skeleton-pulse 1.4s ease infinite; border-radius: var(--radius-sm);
}
@keyframes skeleton-pulse { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; }
}
.divider { height: 1px; background: var(--border-accent); margin: var(--space-3) 0; border: none;
}
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--text); font-weight: 600; flex-shrink: 0;
}
.avatar[data-surface="flat"] { background: var(--fill-track);
}
.avatar-sm { width: 32px; height: 32px; font-size: 12px;
}
.avatar-md { width: 40px; height: 40px; font-size: 14px;
}
.presence-stack { display: inline-flex; align-items: center;
}
.presence-stack .avatar {
  margin-inline-start: -8px; border: 2px solid var(--fill-elev); box-shadow: var(--shadow-sm), var(--chip-ring); transition: transform var(--dur-fast);
}
.presence-stack .avatar:first-child {
  margin-inline-start: 0;
}
.presence-stack .avatar:hover {
  transform: translateY(-2px) scale(1.08);
  z-index: 2;
}
.presence-ring { outline: 2px solid var(--accent); outline-offset: 2px;
}
.avatar-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px 8px 2px 2px;
  border-radius: var(--radius-pill); font-size: var(--t-xs); font-weight: 500;
}
.avatar-chip[data-surface="flat"] { background: var(--fill-sunken); border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
.avatar-chip[data-surface="flat"]:hover { background: var(--fill-hover); border-color: var(--accent);
}
.input, .select, .textarea {
  width: 100%; max-width: 100%; min-width: 0;
  min-height: var(--control-h, calc(2.5rem * var(--density)));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: var(--control-fs, var(--t-sm));
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input[data-surface="sunken"], .select[data-surface="sunken"], .textarea[data-surface="sunken"] {
  background: var(--fill-elev);
  border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
:is(.input, .select, .textarea):hover { border-color: var(--edge-accent-strong);
}
:is(.input, .select, .textarea)::placeholder { color: var(--faint); opacity: 1;
}
:is(.input, .select, .textarea):disabled { opacity: 0.55; cursor: not-allowed;
}
@supports (appearance: base-select) {.select { appearance: base-select;
}
.select[data-surface="sunken"]::picker(select) {
    background: var(--fill-elev); color: var(--text);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-sm), var(--chip-ring);
}
}
.input[type="date"],
.input[type="time"],
.input[type="datetime-local"],
.input[type="month"],
.input[type="week"],
.input[type="number"],
.input[type="search"],
.input[type="file"] {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.input[type="date"]::-webkit-datetime-edit,
.input[type="time"]::-webkit-datetime-edit,
.input[type="datetime-local"]::-webkit-datetime-edit {
  min-width: 0;
}
.textarea { min-height: 6rem; resize: vertical;
}
@supports (field-sizing: content) {.textarea { field-sizing: content; max-height: 16rem;
}
}
input[type="color"].input { padding: 2px; max-width: 4.5rem; cursor: pointer;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--control-ring);
}
.field { display: flex; flex-direction: column; gap: var(--space-1); overflow: visible; min-width: 0; width: 100%;
}
.field-label { font-size: var(--t-xs); font-weight: 600; color: var(--muted);
}
.field-msg { font-size: var(--t-xs); color: var(--faint);
}
.field-msg.danger { color: var(--danger);
}
.field-msg.ok { color: var(--ok);
}
.field-msg.warn { color: var(--warn);
}
.field-msg.info { color: var(--accent);
}
.field:has(.field-msg.danger) .input,
.field:has(.field-msg.danger) .textarea,
.field:has(.field-msg.danger) .select,
.input:user-invalid,
.textarea:user-invalid,
.select:user-invalid { border-color: var(--danger);
}
.input:user-valid,
.textarea:user-valid,
.select:user-valid { border-color: var(--border-ok);
}
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: 7rem; border-radius: var(--radius); cursor: pointer;
  text-align: center; color: var(--muted); font-size: var(--t-sm); position: relative;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.drop[data-surface="sunken"] {
  padding: var(--space-5) var(--space-4); border: 1.5px dashed var(--edge-accent);
  background: var(--fill-bg);
}
.drop[data-surface="sunken"]::before {
  content: "⬆"; font-size: 1.25rem; line-height: 1; opacity: .55; color: var(--accent);
}
.drop[data-surface="sunken"].on, .drop[data-surface="sunken"]:focus-within,
.drop[data-surface="sunken"]:hover {
  border-color: var(--accent); border-style: solid; background: var(--bg-active);
  color: var(--text); box-shadow: var(--control-ring);
}
.drop[data-surface="sunken"].on::before,
.drop[data-surface="sunken"]:focus-within::before,
.drop[data-surface="sunken"]:hover::before { opacity: 1;
}
.drop-label { pointer-events: none; font-weight: 550;
}
.input[type="file"]::file-selector-button {
  margin-inline-end: var(--space-2); border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm); background: var(--fill-elev); color: var(--text); box-shadow: var(--chip-ring);
  padding: .2rem .65rem; font: inherit; cursor: pointer;
}
.input[type="file"]::file-selector-button:hover { border-color: var(--accent); background: var(--fill-hover);
}
search.suggest,
.suggest { position: relative; display: block; min-width: 0; width: 100%;
}
.suggest-menu {
  display: none; opacity: 0; transform: translateY(-4px) scale(0.98);
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: var(--z-dropdown); margin: 0; list-style: none;
  max-height: 12rem; overflow: auto;
  transition: opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    display var(--dur-fast) allow-discrete;
}
.suggest-menu[data-surface="glass"] {
  padding: var(--space-1);
  background: var(--plate);
  border: 1px solid var(--border-accent); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md), var(--chip-ring);
  backdrop-filter: var(--float-blur); -webkit-backdrop-filter: var(--float-blur);
}
.suggest[data-open="true"] .suggest-menu {
  display: flex; flex-direction: column; gap: 1px; opacity: 1; transform: translateY(0) scale(1);
}
@starting-style {
  .suggest[data-open="true"] .suggest-menu {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}
.suggest-opt.off { display: none;
}
.suggest-opt {
  display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); min-height: 40px;
  border: none; background: transparent; color: var(--text); border-radius: var(--radius-sm);
  font-size: var(--t-sm); font-weight: 500; cursor: pointer;
}
.suggest-menu[data-surface="glass"] .suggest-opt.on,
.suggest-menu[data-surface="glass"] .suggest-opt[aria-selected="true"] {
  background: var(--fill-active); color: var(--accent);
}
.suggest-menu[data-surface="glass"] .suggest-opt:hover,
.suggest-menu[data-surface="glass"] .suggest-opt:focus-visible {
  background: var(--fill-hover); color: var(--accent);
}
.suggest-empty {
  padding: var(--space-3);
  color: var(--faint);
  font-size: var(--t-sm);
}
.suggest-empty.off { display: none;
}
.kbd {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 650;
  line-height: 1;
  padding: 0.2em 0.5em;
  border-radius: 6px;
  color: var(--text);
}
.kbd[data-surface="flat"] {
  border: 1px solid var(--border-accent); border-bottom-width: 2px;
  background: var(--fill-sunken); box-shadow: var(--chip-ring);
}
.switch { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; cursor: pointer; font-size: var(--t-sm); position: relative;
}
.switch input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.switch-track {
  width: 44px; height: 24px; flex-shrink: 0; border-radius: var(--radius-pill);
  background: var(--fill-track);
  border: 1px solid var(--border-accent); position: relative; box-shadow: var(--chip-ring);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--text); transition: transform var(--dur-fast) var(--ease);
}
.switch input:checked + .switch-track {
  background: var(--accent); border-color: var(--accent);
}
.switch input:checked + .switch-track::after {
  transform: translateX(20px);
  background: var(--accent-ink);
}
.switch input:focus-visible + .switch-track {
  outline: none; box-shadow: var(--control-ring);
}
.check {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 40px; cursor: pointer; font-size: var(--t-sm);
}
.input-check { width: auto; height: 18px; margin: 0; accent-color: var(--accent);
}
.list-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-accent); min-width: 0;
}
.directory[data-surface="flat"] .list-row:hover { background: var(--fill-row);
}
.list-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.list-row-text span { font-size: var(--t-sm); color: var(--muted);
}
.list-row .avatar-sm { width: 22px; height: 22px; font-size: 10px; flex: none;
}
.row-dot {
  width: 0.5rem; height: 0.5rem; flex: none;
  border-radius: var(--radius-full);
  background: var(--ok-strong);
}
.row-dot[data-tone="ok"],
.row-dot[data-tone="live"] { background: var(--ok-strong);
}
.row-dot[data-tone="away"],
.row-dot[data-tone="warn"] { background: var(--warn);
}
.row-dot[data-tone="danger"] { background: var(--danger);
}
.row-dot[data-tone="muted"] { background: var(--faint);
}
.block { display: flex; flex-direction: column; gap: var(--space-3); scroll-margin-top: var(--space-4);
}
.desk > .block {
  content-visibility: auto;
  contain-intrinsic-size: auto 12rem;
}
[data-island] {
  contain: layout style;
}
.metric {
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 0; border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.metric[data-surface="flat"] { padding: var(--space-4) var(--space-5);
  background: var(--fill-flat);
}
.metric[data-surface="flat"]:hover { border-color: var(--border-accent-strong); transform: var(--hover-lift); box-shadow: var(--chip-ring);
}
.metric[data-surface="flat"][data-tone] {
  border-color: var(--border-intent);
  background: var(--intent-wash);
}
.metric[data-surface="flat"][data-tone] .metric-value { color: var(--intent);
}
.metric-value { font-size: var(--t-2xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
.metric-label { order: -1; font-size: var(--t-xs); font-weight: 600; color: var(--muted);
}
.callout, .banner {
  display: flex; flex-direction: column; gap: var(--space-1);
  border-radius: var(--radius);
}
.callout[data-surface="sunken"], .banner[data-surface="sunken"] {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-accent-soft);
  border-inline-start: 3px solid var(--intent, var(--accent)); background: var(--callout-wash);
  box-shadow: var(--chip-ring);
}
.callout p, .banner p { color: var(--muted); font-size: var(--t-sm);
}
.customize-body { padding: var(--space-3);
}
.customize-btn { flex-shrink: 0;
}
.act-form { display: contents;
}
:is(.btn, .btn-primary, .btn-ghost, .btn-danger, .ghost, .btn-xs, .btn-sm, .tiny) {
  --btn-bg: transparent; --btn-fg: var(--intent, var(--text)); --btn-bd: var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h, calc(2.5rem * var(--density)));
  padding: var(--space-1) var(--control-px, var(--space-4));
  border: 1px solid var(--btn-bd); border-radius: var(--radius-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--control-fs, var(--t-sm)); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
:is(.btn-primary, .btn-danger, [data-variant="solid"]) {
  --btn-bg: var(--intent, var(--accent)); --btn-fg: var(--intent-ink, var(--accent-ink)); --btn-bd: transparent;
  box-shadow: var(--shine), var(--chip-ring);
}
[data-variant="soft"] { --btn-bg: var(--intent-soft, var(--accent-soft)); --btn-fg: var(--intent, var(--accent)); --btn-bd: transparent;
}
[data-variant="outline"] { --btn-bd: var(--intent, var(--border-strong));
}
:is(.btn, .btn-primary, .btn-ghost, .btn-danger, .ghost, .btn-xs, .btn-sm, .tiny):hover {
  background-image: var(--btn-hover-wash);
}
:is(.btn, .btn-primary, .btn-ghost, .btn-danger, .ghost, .btn-xs, .btn-sm, .tiny):active {
  background-image: var(--btn-press-wash);
  transform: translateY(1px);
}
:is(.btn, .btn-primary, .btn-danger, .btn-ghost).busy {
  pointer-events: none; opacity: 0.72;
}
.busy::before {
  content: "";
  width: 0.85em; height: 0.85em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vf-spin 0.7s linear infinite;
}
button:disabled {
  opacity: 0.45; pointer-events: none; cursor: default;
}
.btn-lg { min-width: min(160px, 100%); border-radius: var(--radius);
}
.skip-link {
  position: absolute; top: -100px; left: 0; z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4);
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.skip-link:focus { top: 0;
}
:focus-visible {
  outline: 2px solid var(--ring, var(--accent));
  outline-offset: 2px;
  box-shadow: var(--focus-halo);
}
.md { font-size: var(--t-sm); color: var(--text);
}
.md p, .md li { margin: 0 0 var(--space-2); color: var(--muted);
}
.md h2 { font-size: var(--t-lg); margin: var(--space-5) 0 var(--space-2);
}
.md h3 { font-size: var(--t-md); margin: 0 0 var(--space-2);
}
.md h4 { font-size: var(--t-sm); margin: var(--space-3) 0 var(--space-1); text-transform: none;
}
.md ul { padding-left: 1.2rem; margin: 0 0 var(--space-2);
}
.md ol { padding-left: 1.4rem; margin: 0 0 var(--space-2);
}
.md blockquote { margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-3); border-inline-start: 3px solid var(--accent); color: var(--muted);
}
.md[data-surface="flat"] pre { margin: 0 0 var(--space-3); padding: var(--space-3); background: var(--fill-track); border: 1px solid var(--border-accent); border-radius: var(--radius-sm); overflow-x: auto; box-shadow: var(--chip-ring);
}
.md[data-surface="flat"] pre code { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text); background: none; padding: 0;
}
.md table { margin: 0 0 var(--space-3); border-collapse: collapse; font-size: var(--t-xs);
}
.md th, .md td { border: 1px solid var(--border-accent); padding: var(--space-1) var(--space-2); text-align: start;
}
.md[data-surface="flat"] th { background: var(--fill-track); color: var(--text);
}
.md a { color: var(--accent);
}
.code-block {
  font-family: var(--mono); font-size: var(--t-xs); line-height: 1.55; border-radius: var(--radius-sm);
  overflow-x: auto; color: var(--text); white-space: pre; margin: 0; min-width: 0; max-width: 100%;
}
.code-block[data-surface="sunken"] {
  background: var(--fill-bg);
  border: 1px solid var(--border-accent); padding: var(--space-4); box-shadow: var(--chip-ring);
}
.code { margin: 0;
}
.code-lang { font-size: var(--t-xs); font-weight: 600; color: var(--muted); margin: 0 0 var(--space-1);
}
.code-kw { color: var(--accent);
}
.code-str { color: var(--ok);
}
.code-cmt { color: var(--faint); font-style: italic;
}
.loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-6);
}
.spinner {
  display: block;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 3px solid var(--spinner-track);
  border-top-color: var(--accent);
  animation: vf-spin 0.7s linear infinite;
}
@keyframes vf-spin { to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {.spinner { animation: vf-pulse 1.1s ease-in-out infinite;
}
.skeleton { animation: none;
}
.meter-fill::after,
  .meter.busy .meter-fill,
  .meter.play .meter-fill { animation: none;
}
.busy::before { animation: vf-pulse 1.1s ease-in-out infinite;
}
}
@keyframes vf-pulse { 50% { opacity: 0.35; }
}
.sk-line { height: 0.7rem; width: 100%;
}
.banner { position: sticky; top: 0; z-index: var(--z-sticky);
}
.fold { border-radius: var(--radius);
}
.fold[data-surface="flat"] {
  border: 1px solid var(--border-accent);
  background: var(--fill-flat); box-shadow: var(--shine), var(--chip-ring);
}
.fold > summary {
  display: flex; align-items: center; gap: var(--space-2); min-height: 40px;
  padding: 0 var(--space-4); cursor: pointer; font-weight: 600; user-select: none;
  transition: background var(--dur-fast) var(--ease);
}
.fold[data-surface="flat"] > summary:hover,
.faq-list[data-surface="sunken"] .fold > summary:hover { background: var(--fill-hover);
}
.fold-body { padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--border-accent); color: var(--muted); font-size: var(--t-sm);
}
@supports (interpolate-size: allow-keywords) {.fold::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition: block-size var(--dur) var(--ease),
      opacity var(--dur) var(--ease),
      content-visibility var(--dur) allow-discrete;
}
.fold[open]::details-content {
    block-size: auto;
    opacity: 1;
}
@starting-style {
    .fold[open]::details-content {
      block-size: 0;
      opacity: 0;
    }
}
}
@media (prefers-reduced-motion: reduce) {.fold::details-content { transition: none;
}
}
.tip { position: relative; anchor-name: --vf-tip;
}
.tip::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  z-index: var(--z-tooltip);
}
.tip[data-surface="elevated"]::after {
  background: var(--fill-elev);
  border: 1px solid var(--border-accent); box-shadow: var(--shadow-sm), var(--chip-ring);
}
@supports (position-anchor: --vf-tip) {.tip::after {
    position-anchor: --vf-tip;
    left: auto; bottom: auto; transform: none;
    position-area: block-start;
    margin-bottom: 6px;
}
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1;
}
.table-wrap {
  overflow: auto; max-height: 16rem;
  border-radius: var(--radius);
}
.table-wrap[data-surface="flat"] {
  border: 1px solid var(--border-accent-soft); box-shadow: var(--chip-ring);
  background:
    linear-gradient(to right, var(--bg-elev) 30%, transparent),
    linear-gradient(to right, transparent, var(--bg-elev) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.12), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.12), transparent) 100% 0;
  background-repeat: no-repeat; background-color: var(--card);
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.virtual-spacer td { line-height: 0; font-size: 0;
}
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-sm);
}
.data-table th, .data-table td {
  padding: var(--space-2) var(--space-3); text-align: start;
  border-block-end: 1px solid var(--border-accent-soft);
}
.data-table thead th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  font-size: var(--t-xs); color: var(--muted); font-weight: 650;
}
.directory[data-surface="flat"] .data-table thead th {
  background: var(--fill-elev); box-shadow: 0 1px 0 var(--border-accent);
}
.data-table.col-resize { table-layout: fixed;
}
.col-grip {
  position: absolute; inset-inline-end: -3px; top: 0; bottom: 0;
  width: 7px; cursor: col-resize; touch-action: none;
}
.col-grip:hover, .col-grip[data-resizing] { background: var(--accent-dim);
}
@supports (animation-timeline: scroll()) {.data-table thead th {
    animation: sticky-header-elevate linear both;
    animation-timeline: scroll(nearest root); animation-range: 0px 40px;
}
}
@keyframes sticky-header-elevate {
  to {
    box-shadow: var(--sticky-edge);
  }
}
.page-progress, .reading-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--accent);
  box-shadow: var(--progress-glow); transform-origin: 0 50%; z-index: var(--z-toast); pointer-events: none; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {.page-progress, .reading-progress {
    animation: page-scroll-progress linear;
    animation-timeline: scroll();
}
}
@keyframes page-scroll-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.data-table tbody tr:last-child td { border-bottom: none;
}
.directory[data-surface="flat"] .data-table tbody tr:not([data-current]):hover { background: var(--fill-row);
}
.slider { width: 100%; min-height: 40px; accent-color: var(--accent);
}
.meter { width: 100%; height: 10px; border-radius: var(--radius-pill); overflow: hidden; position: relative;
}
.meter[data-surface="sunken"] { background: var(--fill-track); box-shadow: var(--track-inset);
}
.meter-fill {
  display: block; height: 100%;
  position: relative;
  background: var(--intent, var(--accent));
  border-radius: var(--radius-pill);
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
  overflow: hidden;
}
.meter-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--meter-sheen),
    transparent
  );
  transform: translateX(-100%);
  animation: meter-sheen 1.15s linear infinite;
}
.meter[data-tone="ok"] .meter-fill::after,
.meter[data-tone="danger"] .meter-fill::after { display: none;
}
.meter.busy .meter-fill {
  width: 32% !important;
  animation: meter-indet 1.15s var(--ease-in-out) infinite;
}
.meter.busy .meter-fill::after { display: none;
}
.meter.play .meter-fill {
  width: 8%;
  animation: meter-play 2.6s var(--ease-in-out) infinite;
}
@keyframes meter-sheen {
  to { transform: translateX(100%); }
}
@keyframes meter-indet {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
@keyframes meter-play {
  0% { width: 8%; }
  70% { width: 86%; }
  100% { width: 100%; }
}
.dialog-actions { padding: 0 var(--space-4) var(--space-4);
}
.live {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--t-xs); font-weight: 650;
}
.live i {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: var(--ring-current);
}
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  font-size: var(--t-sm);
}
.crumbs li { display: flex; align-items: center; gap: var(--space-1);
}
.crumbs li:not(:last-child)::after {
  content: "/";
  color: var(--faint);
}
.crumb {
  border: none; background: transparent; color: var(--accent);
  padding: 0 var(--space-1); min-height: 40px; font: inherit; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
}
a.crumb:hover { text-decoration: underline;
}
.crumbs [aria-current="page"] { color: var(--text); font-weight: 650;
}
.steps {
  display: flex; gap: var(--space-3); align-items: flex-start; overflow-x: auto;
}
.steps[data-surface="flat"] {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  background: var(--fill-plate);
  border: 1px solid var(--border-accent-soft); box-shadow: var(--chip-ring);
}
.step {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--t-sm); color: var(--muted); flex: 1; min-width: 0;
}
.step.on { color: var(--text); font-weight: 650;
}
.tabs .tab-panel { display: none;
}
.tabs:has(.tab-bar > label:nth-child(1) input:checked) .tab-panel:nth-child(1),
.tabs:has(.tab-bar > label:nth-child(2) input:checked) .tab-panel:nth-child(2),
.tabs:has(.tab-bar > label:nth-child(3) input:checked) .tab-panel:nth-child(3),
.tabs:has(.tab-bar > label:nth-child(4) input:checked) .tab-panel:nth-child(4),
.tabs:has(.tab-bar > label:nth-child(5) input:checked) .tab-panel:nth-child(5),
.tabs:has(.tab-bar > label:nth-child(6) input:checked) .tab-panel:nth-child(6) {
  display: block;
}
.tabs .tab-panel { padding: var(--space-3) 0; color: var(--muted); font-size: var(--t-sm);
}
.tabs[data-surface="flat"] {
  padding: var(--space-2); border-radius: var(--radius);
  background: var(--fill-plate);
  border: 1px solid var(--border-accent-soft); box-shadow: var(--chip-ring);
}
.tabs[data-surface="flat"] .tab-bar > label:has(input:checked) {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.tabs .tab-panels { contain: layout;
}
.tabs .tab-panels > .tab-panel {
  color: inherit; font-size: inherit; content-visibility: auto; contain-intrinsic-size: auto 8rem;
}
.pager { display: flex; align-items: center; gap: var(--space-2);
}
.pager-status { font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--muted);
}
.velvet-viewport {
  position: relative; width: 100%; max-width: 36rem;
  background: var(--fill-bg);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9;
}
.velvet-stage {
  position: relative;
  width: 100%;
  background: var(--stage-plate);
  border-radius: var(--radius);
  overflow: hidden;
}
.velvet-stage > video,
.velvet-stage > audio {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.velvet-stage[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--faint);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: vf-spin 0.9s linear infinite;
}
.velvet-viewport[data-ratio="1/1"] { aspect-ratio: 1 / 1;
}
.velvet-viewport[data-ratio="4/3"] { aspect-ratio: 4 / 3;
}
.velvet-viewport[data-ratio="3/2"] { aspect-ratio: 3 / 2;
}
.velvet-viewport[data-ratio="16/9"] { aspect-ratio: 16 / 9;
}
.velvet-viewport[data-ratio="2/1"] { aspect-ratio: 2 / 1;
}
.velvet-viewport[data-ratio="21/9"] { aspect-ratio: 21 / 9;
}
.velvet-viewport[data-ratio="fill"] {
  aspect-ratio: auto;
  max-width: none;
  width: 100%;
  height: 100%;
}
.ago { font-variant-numeric: tabular-nums;
}
.velvet-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.velvet-gpu {
  image-rendering: pixelated;
  contain: strict;
}
.popover {
  margin: auto;
  border-radius: var(--radius);
  color: var(--text);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), overlay 0.2s allow-discrete, display 0.2s allow-discrete;
}
.popover[data-surface="glass"] {
  padding: var(--space-4);
  border: 1px solid var(--border-accent);
  background: var(--plate);
  backdrop-filter: var(--float-blur); -webkit-backdrop-filter: var(--float-blur);
  box-shadow: var(--shadow-lg), var(--chip-ring), var(--float-glow);
}
:is([popover], .popover):not(:popover-open) { display: none !important; pointer-events: none !important; opacity: 0; transform: scale(0.96) translateY(-4px);
}
:is([popover], .popover):popover-open { display: flex !important; pointer-events: auto !important; opacity: 1; transform: translateY(0);
}
@starting-style {
  :is([popover], .popover):popover-open { opacity: 0; transform: scale(0.96) translateY(-4px); }
}
dialog.modal-overlay {
  border-radius: var(--radius);
  padding: 0;
  max-width: min(92vw, 38rem);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), overlay 0.22s allow-discrete, display 0.22s allow-discrete;
}
dialog.modal-overlay[data-surface="glass"] {
  border: 1px solid var(--border-accent);
  background: var(--plate-soft);
  backdrop-filter: var(--float-blur-lg); -webkit-backdrop-filter: var(--float-blur-lg);
  box-shadow: var(--shadow-lg), var(--chip-ring);
}
dialog.modal-overlay::backdrop {
  background: var(--plate-scrim);
  backdrop-filter: var(--scrim-blur);
  -webkit-backdrop-filter: var(--scrim-blur);
  transition: opacity 0.22s var(--ease), overlay 0.22s allow-discrete, display 0.22s allow-discrete;
}
dialog.modal-overlay:not([open]) {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
}
dialog.modal-overlay:not([open])::backdrop {
  opacity: 0;
}
@starting-style {
  dialog.modal-overlay[open] {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  dialog.modal-overlay[open]::backdrop {
    opacity: 0;
  }
}
.timeline {
  display: flex; flex-direction: column; position: relative;
  padding-inline-start: var(--space-5); gap: var(--space-4);
}
.timeline::before {
  content: ""; position: absolute; inset-block: var(--space-2); inset-inline-start: 7px; width: 2px;
}
.timeline[data-surface="flat"] {
  background: var(--fill-quiet); border: 0; box-shadow: none;
  border-radius: var(--radius); padding-block: var(--space-2); padding-inline-end: var(--space-2);
}
.timeline[data-surface="flat"]::before { background: var(--border-accent);
}
.timeline-item {
  position: relative; display: flex; flex-direction: column; gap: var(--space-1);
}
.timeline-dot {
  position: absolute; inset-inline-start: calc(var(--space-5) * -1 + 2px); top: 4px;
  width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--accent);
  border: 2px solid var(--bg-elev); box-shadow: var(--mark-ring);
}
.timeline-dot.ok { background: var(--ok);
}
.timeline-dot.warn { background: var(--warn);
}
.timeline-dot.danger { background: var(--danger);
}
.timeline-content { border-radius: var(--radius-sm);
}
.timeline-content[data-surface="flat"] {
  background: var(--fill-flat);
  border: 1px solid var(--border-accent);
  padding: var(--space-3); box-shadow: var(--shadow-sm);
}
.timeline-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.timeline-title { font-weight: 650; font-size: var(--t-sm);
}
.timeline-time { font-size: var(--t-xs); color: var(--faint); font-variant-numeric: tabular-nums;
}
.toast-wrap, .toast-hud {
  position: fixed; bottom: var(--space-4); inset-inline-end: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  z-index: var(--z-toast); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--space-3);
  border-radius: var(--radius); font-size: var(--t-sm); min-width: 18rem; max-width: 28rem;
  animation: toast-in 0.24s var(--ease-spring);
}
.toast[data-surface="elevated"] {
  padding: var(--space-3) var(--space-4); background: var(--fill-elev);
  border: 1px solid var(--border-accent); box-shadow: var(--shadow-lg), var(--chip-ring);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-icon { display: inline-flex; align-items: center; color: var(--accent);
}
.toast-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px; border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(90deg, var(--accent), var(--accent-mid)); box-shadow: var(--progress-glow-sm);
}
.notif-panel {
  width: 24rem; max-height: 28rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
.notif-panel[data-surface="elevated"] {
  background: var(--fill-elev);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius); box-shadow: var(--shadow-md), var(--chip-ring);
}
.notif-item {
  display: flex; gap: var(--space-3); padding: var(--space-3);
  border-block-end: 1px solid var(--hairline-accent); transition: background var(--dur-fast);
}
.notif-panel[data-surface="elevated"] .notif-item:hover { background: var(--fill-hover);
}
.notif-panel[data-surface="elevated"] .notif-item.unread,
.notif-panel[data-surface="elevated"] .notif-unread { background: var(--accent-soft);
}
.active { font-weight: inherit;
}
.done { font-weight: inherit;
}
.ok { color: var(--ok);
}
.warn { color: var(--warn);
}
.cmd-palette, dialog.cmd-palette {
  width: min(92vw, 36rem); border-radius: var(--radius); padding: 0; overflow: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    overlay var(--dur) allow-discrete, display var(--dur) allow-discrete;
}
.cmd-palette[data-surface="glass"], dialog.cmd-palette[data-surface="glass"] {
  border: 1px solid var(--border-accent);
  background: var(--plate-quiet);
  backdrop-filter: var(--float-blur-lg); -webkit-backdrop-filter: var(--float-blur-lg);
  box-shadow: var(--shadow-lg), var(--chip-ring), var(--float-glow-lg);
}
.cmd-palette:not([open]):not(:popover-open), dialog.cmd-palette:not([open]) {
  opacity: 0; transform: scale(0.96) translateY(-8px);
}
@starting-style {
  .cmd-palette[open], .cmd-palette:popover-open, dialog.cmd-palette[open] {
    opacity: 0; transform: scale(0.96) translateY(-8px);
  }
}
.cmd-input-wrap {
  display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border-accent);
}
.cmd-palette[data-surface="glass"] .cmd-input-wrap,
dialog.cmd-palette[data-surface="glass"] .cmd-input-wrap { background: var(--fill-sunken);
}
.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: var(--t-md);
  color: var(--text);
}
.cmd-list {
  max-height: 22rem; overflow-y: auto; padding: var(--space-2); display: flex; flex-direction: column; gap: 2px;
}
.cmd-group {
  padding: var(--space-1) var(--space-2);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cmd-item {
  display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--t-sm); color: var(--text); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cmd-palette[data-surface="glass"] .cmd-item:hover,
.cmd-palette[data-surface="glass"] .cmd-item.selected,
dialog.cmd-palette[data-surface="glass"] .cmd-item:hover,
dialog.cmd-palette[data-surface="glass"] .cmd-item.selected {
  background: var(--accent); color: var(--accent-ink);
}
.cmd-badge {
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.notif-flyout {
  width: 22rem;
  max-height: 26rem;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
section.panel + section.panel { margin-block-start: var(--space-2);
}
#work { line-height: 1.55;
}
#work p { max-width: 68ch;
}
form.act-form:has(> button.list-row) {
  display: block;
  margin: 0;
}
button.list-row {
  width: 100%;
  margin: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-accent);
  min-width: 0;
}
:is(.directory[data-surface="flat"], .panel[data-surface]) button.list-row:hover { background: var(--fill-hover);
}
button.list-row[data-current] { color: var(--accent);
}
:is(.directory[data-surface="flat"], .panel[data-surface]) button.list-row[data-current] .list-row-text strong::after {
  content: "";
  display: inline-block;
  width: 0.35rem; height: 0.35rem;
  margin-inline-start: 0.4rem;
  border-radius: var(--radius-full);
  background: var(--accent);
}
.list-row .avatar[data-surface="flat"] {
  background: hsl(var(--av-h, 220) 38% 42%);
  color: var(--bg-elev);
}
[data-grid] td[data-heat] {
  background: var(--heat-ok);
  --heat: 0;
}
[data-grid] td[data-heat="1.00"] { --heat: 1;
}
[data-grid] td[data-heat="0.90"] { --heat: 1;
}
[data-grid] td[data-heat="0.80"] { --heat: 0.89;
}
[data-grid] td[data-heat="0.70"] { --heat: 0.78;
}
[data-grid] td[data-heat="0.60"] { --heat: 0.67;
}
[data-grid] td[data-heat="0.50"] { --heat: 0.56;
}
[data-grid] td[data-heat="0.40"] { --heat: 0.44;
}
[data-grid] td[data-heat="0.30"] { --heat: 0.33;
}
[data-grid] td[data-heat="0.20"] { --heat: 0.22;
}
[data-grid] td[data-heat="0.10"] { --heat: 0.11;
}
[data-grid] td[data-heat="0.00"] { --heat: 0;
}
[data-grid] td[data-dir="dn"] {
  background: var(--heat-dn);
}
[data-grid] th[data-sort] { cursor: pointer; user-select: none;
}
[data-grid] tr[data-cursor="1"] {
  outline: 1px solid var(--accent-fade);
  outline-offset: -1px;
}
[data-grid] [data-ago] { color: var(--muted);
}
@container (max-width: 28rem) {[data-grid] [data-prio="3"], [data-grid] [data-prio="4"] { display: none;
}
}
@container (max-width: 20rem) {[data-grid] [data-prio="2"] { display: none;
}
}}
@layer flow {
.flow {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--flow-gap, var(--space-3));
}
.flow[data-container] {
  container-type: inline-size;
}
.flow[data-flow="col"],
.flow[data-flow="stack"] { flex-direction: column;
}
.flow[data-flow="row"] {
  flex-direction: row;
  align-items: center;
}
.flow[data-flow="wrap"] {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.flow[data-flow="center"] {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.flow[data-flow="between"] {
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.flow[data-flow="split"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.flow[data-flow="split"][data-ratio="1-2"] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.flow[data-flow="split"][data-ratio="2-1"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.flow[data-flow="split"][data-ratio="1-3"] { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}
.flow[data-flow="split"][data-ratio="3-1"] { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
.flow[data-flow="split"][data-ratio="1-4"] { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
}
.flow[data-flow="split"][data-ratio="4-1"] { grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
}
.flow[data-flow="split"][data-ratio="golden"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
}
.flow[data-flow="sidebar"] {
  display: grid;
  grid-template-columns: minmax(var(--side-min, 16rem), 22rem) minmax(0, 1fr);
  align-items: stretch;
}
.flow[data-flow="sidebar"][data-side="end"] {
  grid-template-columns: minmax(0, 1fr) minmax(var(--side-min, 16rem), 22rem);
}
.flow[data-flow="deck"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--flow-min, 14rem), 1fr));
  align-items: start;
}
.flow[data-flow="dock"] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  flex: 1 1 auto;
}
.flow[data-flow="shell"] {
  display: grid;
  grid-template-columns: 4.5rem minmax(14rem, 16.5rem) minmax(0, 1fr) minmax(12rem, 15rem);
  align-items: stretch;
  min-height: 0;
  height: 100%;
  gap: 0;
}
.flow[data-flow="board"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.flow[data-flow="grid"] { display: grid; grid-template-columns: repeat(var(--flow-cols, 12), minmax(0, 1fr)); align-items: start;
}
.flow[data-flow="grid"] > :is([data-grid], .panel) { align-self: stretch;
}
.flow[data-flow="grid"] > [data-grid] { display: grid;
}
.flow[data-flow="grid"][style*="--grid-min"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 12rem), 1fr));
}
.flow[data-cols="1"] { --flow-cols: 1;
}
.flow[data-cols="2"] { --flow-cols: 2;
}
.flow[data-cols="3"] { --flow-cols: 3;
}
.flow[data-cols="4"] { --flow-cols: 4;
}
.flow[data-cols="5"] { --flow-cols: 5;
}
.flow[data-cols="6"] { --flow-cols: 6;
}
.flow[data-cols="7"] { --flow-cols: 7;
}
.flow[data-cols="8"] { --flow-cols: 8;
}
.flow[data-cols="9"] { --flow-cols: 9;
}
.flow[data-cols="10"] { --flow-cols: 10;
}
.flow[data-cols="11"] { --flow-cols: 11;
}
.flow[data-cols="12"] { --flow-cols: 12;
}
.flow[data-cols="16"] { --flow-cols: 16;
}
.flow[data-cols="24"] { --flow-cols: 24;
}
.flow[data-cols] { --fc: var(--flow-cols);
}
.flow[data-flow="bento"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--flow-min, 16rem)), 1fr));
  grid-auto-flow: dense;
  align-items: stretch;
}
.flow[data-flow="bento"] > [data-span="2"] { grid-column: span 2;
}
.flow[data-flow="bento"] > [data-span="3"] { grid-column: span 3;
}
.flow[data-flow="bento"] > [data-span="4"] { grid-column: span 4;
}
.flow[data-flow="bento"] > [data-row-span="2"] { grid-row: span 2;
}
.flow[data-flow="bento"] > [data-row-span="3"] { grid-row: span 3;
}
.flow[data-flow="bento"][data-cols],
.flow[data-flow="masonry"][data-cols] {
  grid-template-columns: repeat(var(--flow-cols), minmax(0, 1fr));
}
.flow[data-flow="subgrid"],
.flow > [data-subgrid="col"],
.flow > [data-flow="subgrid"] {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: var(--subgrid-span, 1 / -1);
}
.flow > [data-subgrid="row"] {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: var(--subgrid-row-span, 1 / -1);
}
.flow > [data-subgrid="both"] {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: var(--subgrid-span, 1 / -1);
  grid-row: var(--subgrid-row-span, 1 / -1);
}
.flow[data-flow="masonry"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--flow-min, 14rem)), 1fr));
}
@supports (grid-template-rows: masonry) {.flow[data-flow="masonry"] { grid-template-rows: masonry;
}
}
@container (max-width: 40rem) {
  .flow[data-collapse="col"] {
    display: flex;
    flex-direction: column;
  }
  .flow[data-collapse="col"] > * {
    width: auto;
    min-width: 0;
  }
}
.flow[data-flow="timeline"] {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-inline-start: var(--space-5);
}
.flow[data-flow="timeline"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0.35rem;
  width: 2px;
}
.flow[data-flow="timeline"][data-surface="flat"] { background: var(--fill-quiet); border: 0; box-shadow: none; border-radius: var(--radius); padding-inline: var(--space-2);
}
.flow[data-flow="timeline"][data-surface="flat"]::before { background: var(--accent-soft);
}
.flow[data-gap="0"] { --flow-gap: 0px;
}
.flow[data-gap="1"] { --flow-gap: var(--space-1);
}
.flow[data-gap="2"] { --flow-gap: var(--space-2);
}
.flow[data-gap="3"] { --flow-gap: var(--space-3);
}
.flow[data-gap="4"] { --flow-gap: var(--space-4);
}
.flow[data-gap="5"] { --flow-gap: var(--space-5);
}
.flow[data-gap="6"] { --flow-gap: var(--space-6);
}
.flow[data-align="start"] { align-items: start;
}
.flow[data-align="center"] { align-items: center;
}
.flow[data-align="end"] { align-items: end;
}
.flow[data-align="stretch"] { align-items: stretch;
}
.flow[data-align="baseline"] { align-items: baseline;
}
.flow[data-justify="start"] { justify-content: start;
}
.flow[data-justify="center"] { justify-content: center;
}
.flow[data-justify="end"] { justify-content: end;
}
.flow[data-justify="between"] { justify-content: space-between;
}
.flow[data-justify="around"] { justify-content: space-around;
}
.flow[data-justify="evenly"] { justify-content: space-evenly;
}
.flow > [data-fill],
.flow > [data-width="fill"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.flow > [data-width="hug"] {
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
}
.flow > [data-span="1"] { grid-column: span 1 / span 1;
}
.flow > [data-span="2"] { grid-column: span 2 / span 2;
}
.flow > [data-span="3"] { grid-column: span 3 / span 3;
}
.flow > [data-span="4"] { grid-column: span 4 / span 4;
}
.flow > [data-span="5"] { grid-column: span 5 / span 5;
}
.flow > [data-span="6"] { grid-column: span 6 / span 6;
}
.flow > [data-span="7"] { grid-column: span 7 / span 7;
}
.flow > [data-span="8"] { grid-column: span 8 / span 8;
}
.flow > [data-span="9"] { grid-column: span 9 / span 9;
}
.flow > [data-span="10"] { grid-column: span 10 / span 10;
}
.flow > [data-span="11"] { grid-column: span 11 / span 11;
}
.flow > [data-span="12"],
.flow > [data-span="full"] { grid-column: 1 / -1;
}
.flow > [data-row-span="1"] { grid-row: span 1 / span 1;
}
.flow > [data-row-span="2"] { grid-row: span 2 / span 2;
}
.flow > [data-row-span="3"] { grid-row: span 3 / span 3;
}
.flow > [data-row-span="4"] { grid-row: span 4 / span 4;
}
.flow > [data-row-span="full"] { grid-row: 1 / -1;
}
.flow > [data-bento="hero"] { grid-column: span 2 / span 2; grid-row: span 2 / span 2;
}
.flow > [data-bento="wide"] { grid-column: span 2 / span 2;
}
.flow > [data-bento="tall"] { grid-row: span 2 / span 2;
}
.flow > [data-bento="stat"] { grid-column: span 1 / span 1; grid-row: span 1 / span 1;
}
.flow > [data-order="first"] { order: -1;
}
.flow > [data-order="last"] { order: 99;
}
.flow > [data-order="1"] { order: 1;
}
.flow > [data-order="2"] { order: 2;
}
.flow > [data-order="3"] { order: 3;
}
.flow > [data-order="4"] { order: 4;
}
.flow > [data-order="5"] { order: 5;
}
.flow > [data-order="6"] { order: 6;
}
[data-ratio="1/1"], [data-ratio="1-1"], [data-ratio="square"] { aspect-ratio: 1 / 1;
}
[data-ratio="16/9"], [data-ratio="16-9"], [data-ratio="video"] { aspect-ratio: 16 / 9;
}
[data-ratio="4/3"], [data-ratio="4-3"] { aspect-ratio: 4 / 3;
}
[data-ratio="3/2"], [data-ratio="3-2"] { aspect-ratio: 3 / 2;
}
[data-ratio="21/9"], [data-ratio="21-9"], [data-ratio="ultrawide"] { aspect-ratio: 21 / 9;
}
[data-ratio="9/16"], [data-ratio="9-16"], [data-ratio="portrait"] { aspect-ratio: 9 / 16;
}
[data-ratio="golden"] { aspect-ratio: 1.618 / 1;
}
[data-ratio] > img,
[data-ratio] > video,
[data-ratio] > canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@container work (max-width: 40rem) {.flow[data-flow="split"], .flow[data-flow="sidebar"],
  .flow[data-flow="sidebar"][data-side="end"],
  .flow[data-flow="board"], .flow[data-flow="bento"] { grid-template-columns: minmax(0, 1fr);
}
.flow[data-flow="bento"] > [data-bento="hero"],
  .flow[data-flow="bento"] > [data-span],
  .flow[data-flow="bento"] > [data-bento="wide"] { grid-column: 1 / -1;
}
}
@supports not (container-type: inline-size) {
  @media (max-width: 720px) {
    .flow[data-flow="split"],
    .flow[data-flow="sidebar"],
    .flow[data-flow="sidebar"][data-side="end"],
    .flow[data-flow="board"] { grid-template-columns: minmax(0, 1fr); }
  }
}
.flow[data-flow="floor"] {
  display: grid;
  align-items: stretch;
  align-content: stretch;
  min-height: 0;
  height: 100%;
}
.flow[data-flow="floor"] > [data-grid] {
  grid-column: calc(var(--gc, 0) + 1) / span var(--gx, 1);
  grid-row: calc(var(--gr, 0) + 1) / span var(--gy, 1);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.flow[data-flow="floor"][data-supergrid] > [data-dnd-item]:not([data-grid]) {
  grid-column: auto;
  grid-row: auto;
}
.flow[data-flow="floor"] > [data-area],
.flow[data-flow="floor"] > [data-zone],
.flow[data-flow="floor"] > [data-dnd-zone] {
  min-width: 0;
  min-height: var(--row-h);
}
.flow[data-flow="floor"][data-surface="sunken"] > [data-area],
.flow[data-flow="floor"][data-surface="sunken"] > [data-zone],
.flow[data-flow="floor"][data-surface="sunken"] > [data-dnd-zone] {
  border: 1.5px dashed var(--edge-accent); border-radius: var(--radius);
  background: var(--fill-elev);
}
.flow[data-flow="floor"][data-surface="sunken"] > [data-dnd-zone].dnd-over {
  border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--chip-ring);
}
.flow[data-flow="floor"] [data-theme="light"] { color-scheme: light;
}
.flow[data-flow="floor"] [data-theme="dark"] { color-scheme: dark;
}
@container work (max-width: 48rem) {.flow > [data-span-sm="full"],
  .flow > [data-span-sm="12"] { grid-column: 1 / -1;
}
.flow > [data-span-sm="6"] { grid-column: span 6 / span 6;
}
.flow > [data-span-sm="4"] { grid-column: span 4 / span 4;
}
.flow > [data-span-sm="3"] { grid-column: span 3 / span 3;
}
}
@container work (max-width: 64rem) {.flow > [data-span-md="full"] { grid-column: 1 / -1;
}
.flow > [data-span-md="8"] { grid-column: span 8 / span 8;
}
.flow > [data-span-md="6"] { grid-column: span 6 / span 6;
}
.flow > [data-span-md="4"] { grid-column: span 4 / span 4;
}
}
@container work (max-width: 32rem) {.flow[data-flow="grid"]:not([data-cols="1"]) { grid-template-columns: minmax(0, 1fr);
}
.flow[data-flow="grid"] > [data-span] { grid-column: 1 / -1;
}
.flow[data-flow="grid"] > [data-grid] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
}
.flow[data-flow="floor"]:not([data-cols="1"]):not([data-supergrid]) { grid-template-columns: minmax(0, 1fr);
}
.flow[data-flow="floor"]:not([data-supergrid]) > [data-span] { grid-column: 1 / -1;
}
.flow[data-flow="split"],
  .flow[data-flow="sidebar"] { grid-template-columns: minmax(0, 1fr);
}
}
@supports not (container-type: inline-size) {@media (max-width: 600px) {.flow[data-flow="grid"]:not([data-cols="1"]) { grid-template-columns: minmax(0, 1fr);
}
.flow[data-flow="grid"] > [data-span] { grid-column: 1 / -1;
}
.flow[data-flow="grid"] > [data-grid] {
      grid-column: 1 / -1 !important;
      grid-row: auto !important;
}
.flow[data-flow="floor"]:not([data-cols="1"]):not([data-supergrid]) { grid-template-columns: minmax(0, 1fr);
}
.flow[data-flow="floor"]:not([data-supergrid]) > [data-span] { grid-column: 1 / -1;
}
.flow[data-flow="split"],
    .flow[data-flow="sidebar"] { grid-template-columns: minmax(0, 1fr);
}
}
}
.tile-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.5rem;
  cursor: grab;
  font: inherit;
  color: var(--muted, inherit);
}
svg.canvas {
  display: block;
  width: 100%;
  height: min(22rem, 46vh);
  border-radius: var(--radius, 0.5rem);
  touch-action: none;
}
svg.canvas[data-surface="sunken"] { background: var(--fill-elev); border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
svg.canvas .stroke {
  fill: none;
  stroke: var(--intent, var(--accent, currentColor));
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.canvas .stroke-live {
  opacity: 0.55;
  pointer-events: none;
}
.flow[data-flow="floor"] > [data-dnd-item],
#ws-float > [data-float] {
  transition: opacity 0.35s ease, scale 0.35s ease;
}
@starting-style {
  .flow[data-flow="floor"] > [data-dnd-item],
  #ws-float > [data-float] {
    opacity: 0;
    scale: 0.96;
  }
}
.flow[data-flow="wrap"] > .flow[data-flow="col"] { flex: 1 1 0%; min-width: 0;
}
.workspace[data-pack="desk"] > [data-area] { min-height: 0; min-width: 0; overflow: hidden;
}
#dnd-ghost {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  border: 2px solid var(--accent);
  background: var(--wash-drop);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow-soft), var(--chip-ring);
}
#dnd-ghost[data-overlap] {
  border-color: var(--warn);
  background: var(--wash-warn);
  border-style: dashed;
}
#dnd-ghost[hidden] { display: none;
}
html.dnd-live [data-dnd-zone] {
  outline: 1px dashed var(--outline-accent-dash);
}
.tile-bar::after {
  content: "⠿";
  opacity: 0;
  transition: opacity 0.15s ease;
}
[data-dnd-item]:hover .tile-bar::after { opacity: 0.55;
}
[data-dnd-item]:active .tile-bar { cursor: grabbing;
}
.flow[data-flow="floor"] > *:not([data-grid]) {
  grid-column: 1 / -1;
  width: 100%;
}
.flow[data-flow="floor"]:not([data-supergrid]) > *:not([data-grid]):not([data-dnd-item]) {
  width: 100%;
}
.flow[data-flow="floor"][data-supergrid] > *:not([data-grid]):not([data-dnd-item]):not([data-span]) {
  width: 100%;
}
.flow[data-flow="floor"][data-supergrid] > [data-dnd-item][data-span]:not([data-grid]) {
  grid-column: 1 / -1;
}
[data-dnd-item] { view-transition-name: var(--vt, none);
}
@property --fc {
  syntax: "<integer>";
  inherits: true;
  initial-value: 12;
}
@property --fr {
  syntax: "<integer>";
  inherits: true;
  initial-value: 8;
}
.flow[data-flow="floor"] {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="8"] { grid-template-columns: repeat(8, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="12"] { grid-template-columns: repeat(12, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="16"] { grid-template-columns: repeat(16, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-cols="24"] { grid-template-columns: repeat(24, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-rows="2"] { grid-template-rows: repeat(2, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-rows="4"] { grid-template-rows: repeat(4, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-rows="6"] { grid-template-rows: repeat(6, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-rows="8"] { grid-template-rows: repeat(8, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-rows="12"] { grid-template-rows: repeat(12, minmax(0, 1fr));
}
.flow[data-flow="floor"][data-rows="16"] { grid-template-rows: repeat(16, minmax(0, 1fr));
}
.workspace[data-fc="6"] { --fc: 6;
}
.workspace[data-fc="12"] { --fc: 12;
}
.workspace[data-fc="24"] { --fc: 24;
}
.workspace[data-fr="4"] { --fr: 4;
}
.workspace[data-fr="8"] { --fr: 8;
}
.workspace[data-fr="16"] { --fr: 16;
}
.workspace[data-pack="desk"] {
  display: grid;
  contain: none;
  gap: 0;
  width: 100%;
  flex: 1 1 0;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
}
.workspace[data-pack="desk"][data-side="on"][data-end="on"][data-flow="on"][data-main="off"][data-stack="off"][data-dock="off"] {
  grid-template-columns:
    minmax(13rem, min(var(--side-w, 18rem), 30rem))
    minmax(0, 1fr)
    minmax(12rem, min(var(--end-w, 16rem), 24rem));
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top top top"
    "side flow end"
    "side foot end";
}
.workspace[data-pack="desk"][data-foot="off"] {
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "top top top"
    "side flow end";
}
.workspace[data-pack="desk"]:not(:has(> [data-area="side"] [data-dnd-item])):not(:has(> [data-area="end"] [data-dnd-item])) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "top"
    "flow"
    "foot";
}
.workspace[data-pack="desk"]:not(:has(> [data-area="side"] [data-dnd-item])):has(> [data-area="end"] [data-dnd-item]) {
  grid-template-columns: minmax(0, 1fr) minmax(12rem, min(var(--end-w, 16rem), 24rem));
  grid-template-areas:
    "top top"
    "flow end"
    "foot end";
}
.workspace[data-pack="desk"]:has(> [data-area="side"] [data-dnd-item]):not(:has(> [data-area="end"] [data-dnd-item])) {
  grid-template-columns: minmax(13rem, min(var(--side-w, 18rem), 30rem)) minmax(0, 1fr);
  grid-template-areas:
    "top top"
    "side flow"
    "side foot";
}
.workspace[data-pack="desk"] > [data-area="side"]:not(:has([data-dnd-item])),
.workspace[data-pack="desk"] > [data-area="end"]:not(:has([data-dnd-item])),
.workspace[data-pack="desk"] > [data-area="foot"]:not(:has([data-dnd-item])) {
  display: none;
}
.flow[data-at-narrow="hide"] { @container (max-width: 40rem) { display: none; }
}
[data-island][data-defer="1"] { min-height: 2.5rem;
}}
@layer layout {
.shell {
  display: grid;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  grid-template-areas: "topbar topbar" "rail main";
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: auto minmax(0, 1fr);
}
html[data-shell="plain"] .shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  grid-template: none;
}
html[data-shell="plain"] .rail,
html[data-shell="plain"] .tools,
html[data-shell="plain"] .status,
html[data-shell="plain"] .pane-head { display: none;
}
html[data-shell="plain"] .content {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
}
.topbar { grid-area: topbar;
}
.rail {
  grid-area: rail;
  min-height: 0;
  width: var(--nav-w);
  min-width: var(--nav-collapsed);
  max-width: 18rem;
  overflow: hidden;
  transition: width var(--dur) var(--ease);
}
html[data-nav="expanded"] .rail { resize: inline;
}
.content { grid-area: main; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.tools {
  grid-area: tools; display: none; flex-direction: column; gap: var(--space-3);
  min-height: 0; overflow: auto; border-inline-start: 1px solid var(--border-accent);
  width: var(--tools-w); min-width: 12rem; max-width: 24rem;
}
.tools[data-surface="elevated"] { background: var(--fill-elev); padding: var(--space-3); border-inline-start-color: var(--border-accent);
}
html[data-shell="editor"] .tools { resize: inline;
}
.status {
  grid-area: status; display: none; align-items: center; justify-content: space-between;
  gap: var(--space-3); min-height: var(--status-h); border-block-start: 1px solid var(--border-accent);
  font-size: var(--t-xs); color: var(--muted);
}
.status[data-surface="elevated"] { background: var(--fill-elev); padding: 0 var(--space-3); border-block-start-color: var(--border-accent);
}
html[data-shell="editor"] .shell {
  grid-template:
    "topbar topbar topbar" auto
    "rail   main   tools"  minmax(0, 1fr)
    "rail   status status" var(--status-h)
    / auto minmax(0, 1fr) auto;
}
html[data-shell="editor"] .tools { display: flex;
}
html[data-shell="editor"] .status { display: flex;
}
html[data-shell="focus"] .shell {
  grid-template:
    "topbar" auto
    "main"   minmax(0, 1fr)
    / minmax(0, 1fr);
}
html[data-shell="focus"] .rail,
html[data-shell="focus"] .tools,
html[data-shell="focus"] .status { display: none;
}
html[data-shell="work"] { --nav-w: 12rem;
}
html[data-shell="work"] .shell {
  grid-template:
    "topbar topbar" auto
    "rail   main"   minmax(0, 1fr)
    / auto minmax(0, 1fr);
}
html[data-nav="collapsed"] .rail {
  width: var(--nav-collapsed);
  max-width: var(--nav-collapsed);
  resize: none;
}
html[data-nav-at="end"] .shell,
html[data-nav-at="end"][data-shell="work"] .shell,
html[data-nav-at="end"][data-shell="app"] .shell {
  grid-template:
    "topbar topbar" var(--shell-h)
    "main   rail"   minmax(0, 1fr)
    / minmax(0, 1fr) auto;
}
html[data-nav-at="end"][data-shell="editor"] .shell {
  grid-template:
    "topbar topbar topbar" var(--shell-h)
    "main   tools  rail"   minmax(0, 1fr)
    "status status rail"   var(--status-h)
    / minmax(0, 1fr) auto auto;
}
html[data-nav-at="top"] .shell,
html[data-nav-at="top"][data-shell="work"] .shell,
html[data-nav-at="top"][data-shell="app"] .shell {
  grid-template:
    "topbar" var(--shell-h)
    "rail"   auto
    "main"   minmax(0, 1fr)
    / minmax(0, 1fr);
}
html[data-nav-at="bottom"] .shell,
html[data-nav-at="bottom"][data-shell="work"] .shell,
html[data-nav-at="bottom"][data-shell="app"] .shell {
  grid-template:
    "topbar" var(--shell-h)
    "main"   minmax(0, 1fr)
    "rail"   auto
    / minmax(0, 1fr);
}
html[data-nav-at="none"] .rail { display: none;
}
html[data-nav-at="none"] .shell,
html[data-nav-at="none"][data-shell="work"] .shell,
html[data-nav-at="none"][data-shell="app"] .shell {
  grid-template:
    "topbar" var(--shell-h)
    "main"   minmax(0, 1fr)
    / minmax(0, 1fr);
}
html[data-nav-at="top"] .rail,
html[data-nav-at="bottom"] .rail {
  width: auto;
  min-width: 0;
  max-width: none;
  resize: none;
}
.rail, .tools, .status { contain: layout style;
}
.rail, .tools { overscroll-behavior: contain;
}
html[data-density="dense"] {
  --density: 0.82;
  --grid-min: 10rem;
}
html[data-density="comfy"] { --density: 1.08;
}
.work {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overflow-wrap: break-word;
  padding: clamp(var(--space-3), 2vw, var(--space-5));
  container-type: inline-size;
  container-name: work;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-top: var(--space-4);
  --t-xs: clamp(0.72rem, 0.7rem + 0.12cqw, 0.78rem);
  --t-sm: clamp(0.83rem, 0.8rem + 0.18cqw, 0.9rem);
  --t-md: clamp(0.95rem, 0.9rem + 0.25cqw, 1.02rem);
  --t-lg: clamp(1.08rem, 1rem + 0.35cqw, 1.18rem);
  --t-xl: clamp(1.28rem, 1.15rem + 0.6cqw, 1.45rem);
  --t-2xl: clamp(1.55rem, 1.35rem + 1cqw, 1.85rem);
  --t-3xl: clamp(2rem, 1.65rem + 1.8cqw, 2.6rem);
}
@container work style(--density: 0.82) {.rows > .row { min-height: 32px;
}
}
html[data-modals] .work { overflow: hidden;
}
.areas {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hero" "main" "side";
}
html[data-layout="split"] .areas:not([data-layout]),
.areas[data-layout="split"] {
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem);
  grid-template-areas: "hero hero" "main side";
}
html[data-layout="editor"] .areas:not([data-layout]),
.areas[data-layout="editor"] {
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
  grid-template-areas: "main side" "main side";
}
html[data-layout="editor"] .areas:not([data-layout]) > [data-area="hero"],
.areas[data-layout="editor"] > [data-area="hero"] { display: none;
}
.areas > [data-area="hero"] { grid-area: hero;
}
.areas > [data-area="main"] { grid-area: main; min-width: 0;
}
.areas > [data-area="side"] { grid-area: side; min-width: 0;
}
.workspace,
.workspace[data-workspace] {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
  align-items: stretch;
  contain: layout;
}
.workspace[data-surface="flat"],
.workspace[data-workspace][data-surface="flat"] {
  background: var(--fill-quiet);
}
.workspace:not([data-pack="desk"]),
.workspace[data-workspace]:not([data-pack="desk"]) {
  --ws-lead: 0px;
  --ws-trail: 0px;
  grid-template-columns: var(--ws-lead) minmax(0, 1fr) var(--ws-trail);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  grid-template-areas:
    "top top top"
    "side main end"
    "side flow end"
    "side stack end"
    "dock dock dock"
    "foot foot foot";
  column-gap: 0;
}
.workspace:not([data-pack="desk"])[data-lead="end"] {
  grid-template-areas:
    "top top top"
    "end main side"
    "end flow side"
    "end stack side"
    "dock dock dock"
    "foot foot foot";
}
.workspace:not([data-pack="desk"])[data-lead="start"][data-side="on"] {
  --ws-lead: min(var(--side-w, 18rem), 30rem);
  column-gap: var(--space-3);
}
.workspace:not([data-pack="desk"])[data-lead="end"][data-end="on"] {
  --ws-lead: min(var(--end-w, 16rem), 24rem);
  column-gap: var(--space-3);
}
.workspace:not([data-pack="desk"])[data-lead="start"][data-end="on"] {
  --ws-trail: min(var(--end-w, 16rem), 24rem);
  column-gap: var(--space-3);
}
.workspace:not([data-pack="desk"])[data-lead="end"][data-side="on"] {
  --ws-trail: min(var(--side-w, 18rem), 30rem);
  column-gap: var(--space-3);
}
.workspace[data-side="off"] > [data-area="side"],
.workspace[data-end="off"] > [data-area="end"],
.workspace[data-flow="off"] > [data-area="flow"],
.workspace[data-stack="off"] > [data-area="stack"],
.workspace[data-dock="off"] > [data-area="dock"],
.workspace[data-main="off"] > [data-area="main"] {
  display: none;
}
.workspace[data-side="on"] > [data-area="side"] {
  min-width: 13rem;
  max-width: min(var(--side-w, 18rem), 30rem);
  width: min(var(--side-w, 18rem), 30rem);
}
.workspace[data-end="on"] > [data-area="end"] {
  min-width: 12rem;
  max-width: min(var(--end-w, 16rem), 24rem);
  width: min(var(--end-w, 16rem), 24rem);
}
.workspace > [data-area="main"] {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.workspace > [data-area="side"],
.workspace > [data-area="end"] {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow: hidden;
}
.workspace > [data-area="side"] > [data-dnd-item],
.workspace > [data-area="end"] > [data-dnd-item] {
  flex: 1 1 0;
  min-height: 0;
}
.workspace [data-dnd-item] {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.workspace [data-dnd-item] > [data-key],
.workspace [data-dnd-item] > [data-key] > [data-island],
.workspace [data-dnd-item] > [data-key] > [data-panel],
.workspace [data-dnd-item] > [data-key] > [data-island] > [data-panel],
.workspace [data-dnd-item] > [data-key] > [data-panel] > [data-slot="body"],
.workspace [data-dnd-item] > [data-key] > [data-island] > [data-panel] > [data-slot="body"] {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.workspace > [data-area="side"] { grid-area: side;
}
.workspace > [data-area="end"] { grid-area: end;
}
.workspace > [data-area="top"] {
  grid-area: top;
  min-width: 0;
}
.workspace > [data-area="flow"] {
  grid-area: flow;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.workspace > [data-area="stack"] { grid-area: stack; min-width: 0;
}
.workspace > [data-area="dock"] {
  grid-area: dock;
  min-width: 0;
  border-block-start: 1px solid var(--border-accent);
  padding-block-start: var(--space-2);
}
.workspace > [data-area="foot"] {
  grid-area: foot;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}
.workspace > [data-area="foot"] > [data-panel],
.workspace > [data-area="foot"] > [data-dnd-item] {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
}
.workspace > [data-area="foot"] > [data-dnd-item] > [data-key],
.workspace > [data-area="foot"] > [data-dnd-item] > [data-key] > [data-island],
.workspace > [data-area="foot"] > [data-dnd-item] > [data-key] > [data-panel],
.workspace > [data-area="foot"] > [data-dnd-item] > [data-key] > [data-island] > [data-panel] {
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
}
.workspace > [data-area="foot"] [data-panel] > [data-slot="body"] {
  overflow: visible;
}
.workspace > [data-park] {
  min-height: var(--space-6);
}
.workspace .panel { min-width: 0;
}
.workspace .panel[data-surface="flat"], .workspace .panel[data-surface="elevated"] {
  background: var(--fill-elev);
  border-color: var(--border-accent); box-shadow: var(--chip-ring);
}
.workspace .panel-head,
.workspace [data-panel] > [data-slot="head"] { font-size: var(--t-xs); letter-spacing: 0.02em;
}
.grid-auto > [data-span="w"],
.grid-auto > [data-span="2"] { grid-column: span 2;
}
.grid-auto > [data-span="h"],
.grid-auto > [data-span="3"] { grid-row: span 2;
}
.grid-auto > [data-span="x"],
.grid-auto > [data-span="4"] {
  grid-column: span 2;
  grid-row: span 2;
}
.workspace > [data-area="side"],
.workspace > [data-area="end"],
.workspace > [data-area="foot"],
.workspace > [data-area="dock"] { position: relative;
}
.zone-edge {
  position: absolute;
  z-index: 4;
  touch-action: none;
  user-select: none;
}
.zone-edge[data-zone-dir="x"] {
  cursor: col-resize;
  width: 10px;
  inset-block: 0;
}
.zone-edge[data-zone-dir="y"] {
  cursor: row-resize;
  height: 10px;
  inset-inline: 0;
}
.zone-edge[data-zone-dir="x"][data-zone-from="end"] { inset-inline-end: -5px;
}
.zone-edge[data-zone-dir="x"][data-zone-from="start"] { inset-inline-start: -5px;
}
.zone-edge[data-zone-dir="y"][data-zone-from="end"] { inset-block-end: -5px;
}
.zone-edge[data-zone-dir="y"][data-zone-from="start"] { inset-block-start: -5px;
}
.zone-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1px;
}
.workspace[data-surface="flat"] .zone-edge:hover::after,
.workspace[data-surface="flat"] .zone-edge.zone-resizing::after,
html[data-customize] .workspace[data-surface="flat"] .zone-edge::after {
  background: var(--accent-glow);
}
html[data-customize] .workspace[data-surface="flat"] {
  outline: 2px solid var(--outline-accent);
  outline-offset: 4px;
}
html[data-customize] .workspace[data-surface="flat"] [data-area] {
  outline: 1px dashed var(--outline-accent-dash);
  outline-offset: 2px;
  min-height: 3rem;
}
[data-dnd-zone].dnd-over {
  box-shadow: inset 0 -2px 0 0 var(--accent);
  background: var(--accent-soft);
}
[data-token="bg"] { --card: var(--bg);
}
[data-token="bg-elev"] { --card: var(--bg-elev);
}
[data-token="card"] { --card: var(--card);
}
[data-token="bg-soft"] { --card: var(--bg-soft);
}
[data-token="bg-hover"] { --card: var(--bg-hover);
}
[data-token="text"] { --card: var(--text);
}
[data-token="muted"] { --card: var(--muted);
}
[data-token="border"] { --card: var(--border);
}
[data-token="accent"] { --card: var(--accent);
}
[data-token="accent-soft"] { --card: var(--accent-soft);
}
[data-token="accent-ink"] { --card: var(--accent-ink);
}
[data-token="ok"] { --card: var(--ok);
}
[data-token="warn"] { --card: var(--warn);
}
[data-token="danger"] { --card: var(--danger);
}
.workspace[data-theme="light"],
[data-area][data-theme="light"] { color-scheme: light;
}
.workspace[data-theme="dark"],
[data-area][data-theme="dark"] { color-scheme: dark;
}
.rows {
  display: grid;
  grid-template-columns: var(--row-cols, minmax(0, 1fr) auto);
  column-gap: var(--space-3);
}
.rows > .row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  min-height: var(--row-h, 40px);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--border-accent);
}
@supports not (grid-template-columns: subgrid) {.rows > .row {
    grid-template-columns: var(--row-cols, minmax(0, 1fr) auto);
}
}
@container work (max-width: 48rem) {html[data-layout="split"] .areas:not([data-layout]),
  html[data-layout="editor"] .areas:not([data-layout]),
  .areas[data-layout="split"],
  .areas[data-layout="editor"],
  .sidebar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero" "main" "side";
}
.workspace:not([data-pack="desk"]) {
    --ws-lead: 0px;
    --ws-trail: 0px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "side" "main" "end" "flow" "stack" "dock" "foot";
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto auto;
    column-gap: 0;
}
.sidebar { grid-template-columns: minmax(0, 1fr);
}
}
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 100ms var(--ease-out) both vt-fade-out;
}
::view-transition-new(root) {
  animation: 180ms var(--ease-out) both vt-fade-in;
}
::view-transition-old(vf-page) {
  animation: 90ms var(--ease-out) both vt-page-out;
}
::view-transition-new(vf-page) {
  animation: 180ms var(--ease-out) both vt-page-in;
}
@keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; }
}
@keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; }
}
@keyframes vt-page-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); }
}
@keyframes vt-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); }
}
[data-align="start"],
[data-text-align="start"] { text-align: start;
}
[data-align="center"],
[data-text-align="center"] { text-align: center;
}
[data-align="end"],
[data-text-align="end"] { text-align: end;
}
[data-text-align="justify"] { text-align: justify;
}
[data-vt="fade"] { view-transition-name: vt-fade;
}
[data-vt="slide"] { view-transition-name: vt-slide;
}
[data-vt="none"] { view-transition-name: none !important;
}
@media (prefers-reduced-motion: reduce) {::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(vf-page),
  ::view-transition-new(vf-page) {
    animation: none;
}
}
.flow[data-flow="floor"][data-supergrid] > .grid-auto {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  grid-auto-rows: minmax(3.5rem, auto);
}
.grid-auto[data-supergrid] {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(3.5rem, auto);
}}
@layer icons {
:root {
  --ico-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --ico-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='6' y2='6'/%3E%3Cline x1='4' x2='20' y1='12' y2='12'/%3E%3Cline x1='4' x2='20' y1='18' y2='18'/%3E%3C/svg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --ico-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ico-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='4' y1='21' y2='14'/%3E%3Cline x1='4' x2='4' y1='10' y2='3'/%3E%3Cline x1='12' x2='12' y1='21' y2='12'/%3E%3Cline x1='12' x2='12' y1='8' y2='3'/%3E%3Cline x1='20' x2='20' y1='21' y2='16'/%3E%3Cline x1='20' x2='20' y1='12' y2='3'/%3E%3Cline x1='2' x2='6' y1='14' y2='14'/%3E%3Cline x1='10' x2='14' y1='8' y2='8'/%3E%3Cline x1='18' x2='22' y1='16' y2='16'/%3E%3C/svg%3E");
  --ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --ico-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  --ico-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
  --ico-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  --ico-zap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
  --ico-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
  --ico-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
  --ico-paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 17.93 8.8l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
  --ico-bar-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='20' y2='10'/%3E%3Cline x1='18' x2='18' y1='20' y2='4'/%3E%3Cline x1='6' x2='6' y1='20' y2='16'/%3E%3C/svg%3E");
  --ico-graduation-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E");
  --ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --ico-palette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='currentColor'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='currentColor'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='currentColor'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='currentColor'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3E%3C/svg%3E");
  --ico-message-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E");
  --ico-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
  --ico-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
  --ico-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
  --ico-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  --ico-brain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z'/%3E%3Cpath d='M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z'/%3E%3Cpath d='M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4'/%3E%3C/svg%3E");
}
.icon {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  vertical-align: middle;
}
.icon-sm { width: 16px; height: 16px; -webkit-mask-size: 16px; mask-size: 16px;
}
.icon-md { width: 20px; height: 20px; -webkit-mask-size: 20px; mask-size: 20px;
}
@keyframes icon-spin { to { transform: rotate(360deg); }
}
.icon-chevron-left { -webkit-mask-image: var(--ico-chevron-left); mask-image: var(--ico-chevron-left);
}
.icon-x { -webkit-mask-image: var(--ico-x); mask-image: var(--ico-x);
}
.icon-menu { -webkit-mask-image: var(--ico-menu); mask-image: var(--ico-menu);
}
.icon-search { -webkit-mask-image: var(--ico-search); mask-image: var(--ico-search);
}
.icon-map-pin { -webkit-mask-image: var(--ico-map-pin); mask-image: var(--ico-map-pin);
}
.icon-sliders { -webkit-mask-image: var(--ico-sliders); mask-image: var(--ico-sliders);
}
.icon-user { -webkit-mask-image: var(--ico-user); mask-image: var(--ico-user);
}
.icon-info { -webkit-mask-image: var(--ico-info); mask-image: var(--ico-info);
}
.icon-moon { -webkit-mask-image: var(--ico-moon); mask-image: var(--ico-moon);
}
.icon-sun { -webkit-mask-image: var(--ico-sun); mask-image: var(--ico-sun);
}
.icon-home { -webkit-mask-image: var(--ico-home); mask-image: var(--ico-home);
}
.icon-zap { -webkit-mask-image: var(--ico-zap); mask-image: var(--ico-zap);
}
.icon-target { -webkit-mask-image: var(--ico-target); mask-image: var(--ico-target);
}
.icon-globe { -webkit-mask-image: var(--ico-globe); mask-image: var(--ico-globe);
}
.icon-paperclip { -webkit-mask-image: var(--ico-paperclip); mask-image: var(--ico-paperclip);
}
.icon-bar-chart { -webkit-mask-image: var(--ico-bar-chart); mask-image: var(--ico-bar-chart);
}
.icon-graduation-cap { -webkit-mask-image: var(--ico-graduation-cap); mask-image: var(--ico-graduation-cap);
}
.icon-lock { -webkit-mask-image: var(--ico-lock); mask-image: var(--ico-lock);
}
.icon-palette { -webkit-mask-image: var(--ico-palette); mask-image: var(--ico-palette);
}
.icon-message-circle { -webkit-mask-image: var(--ico-message-circle); mask-image: var(--ico-message-circle);
}
.icon-clipboard { -webkit-mask-image: var(--ico-clipboard); mask-image: var(--ico-clipboard);
}
.icon-inbox { -webkit-mask-image: var(--ico-inbox); mask-image: var(--ico-inbox);
}
.icon-dot { -webkit-mask-image: var(--ico-dot); mask-image: var(--ico-dot);
}
.icon-users { -webkit-mask-image: var(--ico-users); mask-image: var(--ico-users);
}
.icon-cpu { -webkit-mask-image: var(--ico-brain); mask-image: var(--ico-brain);
}}
@layer shell {
.topbar {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--shell-h); min-height: var(--shell-h);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border-accent);
  flex-shrink: 0; z-index: var(--z-header);
}
.topbar[data-surface="glass"] {
  background: var(--chrome); border-bottom-color: var(--border-accent);
  backdrop-filter: var(--chrome-blur); -webkit-backdrop-filter: var(--chrome-blur);
}
.topbar-brand {
  display: flex; align-items: center; gap: var(--space-2);
  border: none; background: none; cursor: pointer; color: var(--text);
  text-decoration: none; flex-shrink: 0;
}
.topbar-brand:hover { text-decoration: none;
}
.topbar-brand:hover .topbar-brand-text { color: var(--accent);
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--brand-mark-bg);
  color: var(--accent-ink);
  font-size: 13px; font-weight: 800; line-height: 1;
  box-shadow: var(--brand-mark-shadow);
}
.topbar-jump {
  display: flex; align-items: center; gap: var(--space-2);
  min-width: 0; max-width: 28rem; flex: 1 1 12rem;
  height: 34px; border-radius: var(--radius-pill);
  color: var(--faint); font-size: var(--t-sm); cursor: pointer;
}
.topbar-jump[data-surface="sunken"] {
  padding: 0 10px 0 12px; border: 1px solid var(--border-accent);
  background: var(--fill-sunken); box-shadow: var(--chip-ring);
}
.topbar-jump[data-surface="sunken"]:hover { border-color: var(--edge-accent-strong); color: var(--muted);
}
.topbar-jump .icon { color: var(--faint);
}
.topbar-jump-label { flex: 1; text-align: left;
}
.topbar-jump .kbd { margin-left: auto;
}
.topbar-brand-text { font-size: var(--t-md); font-weight: 700; letter-spacing: -0.03em;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px;
}
.lang-btn #langCode { font-weight: 700;
}
.page { display: flex; flex-direction: column; gap: var(--space-4); min-height: 100%; min-width: 0;
}
.page-head { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0;
}
.page-head h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--t-lg);
}
.page-body { flex: 1; min-height: 0; min-width: 0;
}
.empty, .empty-rich { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); color: var(--muted);
}
.empty[data-surface="sunken"], .empty-rich[data-surface="sunken"] {
  padding: var(--space-6); border: 1px dashed var(--outline-accent-dash);
  border-radius: var(--radius); background: var(--fill-sunken-soft); box-shadow: var(--chip-ring);
}
.empty-title { font-weight: 700; color: var(--text); font-size: var(--t-lg);
}
.empty-rich > [data-slot="head"] { display: flex; flex-direction: column; align-items: center; gap: inherit;
}
.panel, [data-panel] {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative;
}
.panel { border-radius: var(--radius); gap: var(--space-3); overflow: visible;
}
.panel[data-surface] { padding: var(--space-4);
}
.flow[data-flow="center"] > .panel[data-surface]:only-child {
  inline-size: min(100%, 26rem); margin-block: var(--space-7); padding: var(--space-6);
  box-shadow: var(--shine), var(--shadow-soft), var(--chip-ring);
}
.flow[data-flow="center"] > .panel[data-surface]:only-child > [data-slot="head"] h3 { font-size: var(--t-xl); white-space: normal;
}
.workspace [data-panel]:not(.panel) {
  background: transparent;
  border: 0;
  padding: 0;
  gap: 0;
  box-shadow: none;
  overflow: hidden;
}
[data-panel] > :is([data-slot="head"], [data-slot="foot"]) { flex: 0 0 auto; min-width: 0;
}
[data-panel] > [data-slot="body"] { flex: 1 1 auto; min-width: 0; min-height: 0;
}
[data-grid]:not(.flow[data-flow="grid"] > *) [data-panel] > [data-slot="body"] {
  container-type: size;
  container-name: panel-body;
}
@supports (container-type: size) {[data-grid]:not(.flow[data-flow="grid"] > *) [data-slot="body"] .table-wrap {
    max-height: 100cqh;
}
}
[data-panel][data-layout="log"] > [data-slot="body"],
[data-panel][data-layout="canvas"] > [data-slot="body"],
[data-panel][data-layout="stage"] > [data-slot="body"],
[data-panel][data-layout="meter"] > [data-slot="body"] {
  overflow: hidden;
}
[data-panel][data-layout="list"] > [data-slot="body"],
[data-panel][data-layout="doc"] > [data-slot="body"],
[data-panel][data-layout="form"] > [data-slot="body"],
[data-panel][data-layout="embed"] > [data-slot="body"] {
  overflow: auto;
}
[data-panel][data-layout="log"] > [data-slot="body"] > *,
[data-panel][data-layout="list"] > [data-slot="body"] > *,
[data-panel][data-layout="doc"] > [data-slot="body"] > *,
[data-panel][data-layout="canvas"] > [data-slot="body"] > *,
[data-panel][data-layout="stage"] > [data-slot="body"] > *,
[data-panel][data-layout="embed"] > [data-slot="body"] > * {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
[data-panel][data-layout="log"] > [data-slot="body"] > * {
  overflow: hidden;
}
.flow[data-flow="floor"] [data-panel][data-layout="form"] > [data-slot="body"] > * {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
[data-panel][data-layout="log"] > [data-slot="body"] .flow {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
[data-panel][data-layout="log"] > [data-slot="body"] .flow > :last-child {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.panel-head,
[data-panel] > [data-slot="head"] {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-block-end: var(--space-2);
}
.panel-head h2, .panel-head h3,
[data-panel] > [data-slot="head"] h2,
[data-panel] > [data-slot="head"] h3 {
  font-size: var(--t-md); font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.35;
}
.panel > p {
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.panel-head h3,
[data-panel] > [data-slot="head"] h3 {
  display: flex; align-items: center; gap: var(--space-2);
}
[data-panel] > [data-slot="head"] h3 {
  min-width: 0; overflow: hidden; white-space: nowrap;
}
.panel > [data-slot="head"] h3 > .icon {
  color: var(--intent, var(--accent)); border-radius: var(--radius-sm); flex: none;
  box-shadow: var(--intent-halo);
  margin-inline: 0.15rem 0.25rem;
}
.panel-sub { font-size: var(--t-xs); color: var(--muted); line-height: 1.45; margin-block-start: 2px;
}
.panel > [data-slot="head"] { flex-wrap: wrap; row-gap: var(--space-1);
}
.panel > [data-slot="head"] > h3 { white-space: normal;
}
.panel > [data-slot="head"] > .cluster:has(> .panel-sub) { flex-basis: 100%;
}
.hero { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.fb-btn {
  border: none; background: transparent; color: var(--muted);
  padding: 6px 10px; font-size: var(--t-xs); font-weight: 600;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.fb-btn:hover { background: var(--fill-hover); color: var(--text);
}
:is(.filter-bar[data-surface="sunken"], .toolbar[data-surface="glass"], .command-bar[data-surface="glass"], .list-desk[data-surface="flat"], .panel[data-surface]) .fb-btn.on { background: var(--fill-hover); color: var(--text);
}
.ps-pill {
  position: relative;
  border: 1px solid var(--border-accent); background: transparent; color: var(--muted);
  border-radius: var(--radius-pill); padding: 6px 12px; font-size: var(--t-xs); font-weight: 600; box-shadow: var(--chip-ring);
  cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ps-pill:hover:not(.on) { background: var(--fill-hover); color: var(--text); border-color: var(--border-accent-strong);
}
.ps-pill.on,
html[data-shell="app"] .ps-pill[data-shell="app"],
html[data-shell="editor"] .ps-pill[data-shell="editor"],
html[data-shell="focus"] .ps-pill[data-shell="focus"],
html[data-density="comfy"] .ps-pill[data-density="comfy"],
html[data-density="dense"] .ps-pill[data-density="dense"],
html[data-layout="stack"] .ps-pill[data-layout="stack"],
html[data-layout="split"] .ps-pill[data-layout="split"],
html[data-layout="editor"] .ps-pill[data-layout="editor"] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
dialog.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: none; padding: 0;
  background: transparent; color: inherit;
  color-scheme: inherit;
  overscroll-behavior: contain;
}
dialog.modal-overlay[open],
dialog.modal-overlay:popover-open {
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(12vh, var(--safe-t)) max(16px, var(--safe-r)) max(16px, var(--safe-b)) max(16px, var(--safe-l));
}
dialog.modal-overlay::backdrop {
  background: var(--scrim);
}
@media (prefers-reduced-motion: no-preference) {dialog.modal-overlay {
    opacity: 0;
    transition:
      display var(--dur) allow-discrete,
      overlay var(--dur) allow-discrete,
      opacity var(--dur) var(--ease);
}
dialog.modal-overlay[open],
  dialog.modal-overlay:popover-open {
    opacity: 1;
}
@starting-style {
    dialog.modal-overlay[open],
    dialog.modal-overlay:popover-open { opacity: 0; }
}
dialog.modal-overlay::backdrop {
    opacity: 0;
    transition: opacity var(--dur) var(--ease), display var(--dur) allow-discrete;
}
dialog.modal-overlay[open]::backdrop,
  dialog.modal-overlay:popover-open::backdrop { opacity: 1;
}
@starting-style {
    dialog.modal-overlay[open]::backdrop,
    dialog.modal-overlay:popover-open::backdrop { opacity: 0; }
}
}
.modal-overlay[data-depth="1"] { z-index: calc(var(--z-modal) + 10);
}
.modal-overlay[data-depth="2"] { z-index: calc(var(--z-modal) + 20);
}
.modal-overlay[data-depth="3"] { z-index: calc(var(--z-modal) + 30);
}
.modal-overlay[data-depth="4"] { z-index: calc(var(--z-modal) + 40);
}
.modal-overlay[data-depth="5"] { z-index: calc(var(--z-modal) + 50);
}
dialog.modal-overlay[data-kind="sheet"][open],
dialog.modal-overlay[data-kind="sheet"]:popover-open {
  align-items: stretch; justify-content: flex-end; padding: 0;
}
.sheet {
  display: flex; flex-direction: column; width: min(28rem, 100%); height: 100%;
  animation: sheet-in var(--dur) var(--ease-out);
}
.sheet[data-surface="elevated"] {
  background: var(--fill-elev);
  border-inline-start: 1px solid var(--border-accent);
  box-shadow: var(--shadow), var(--chip-ring);
}
.sheet .dialog-actions { flex-shrink: 0;
}
@keyframes sheet-in {
  from { transform: translateX(calc(16px * var(--dir, 1))); opacity: 0.5; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {.sheet { animation: none;
}
}
@media (prefers-reduced-motion: no-preference) {dialog.modal-overlay[open] .cmd-card,
  dialog.modal-overlay:popover-open .cmd-card {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@starting-style {
    dialog.modal-overlay[open] .cmd-card,
    dialog.modal-overlay:popover-open .cmd-card {
      opacity: 0;
      transform: translateY(0.4rem);
    }
}
}
.cmd-card {
  width: min(32rem, 100%); border-radius: var(--radius-lg); overflow: hidden; min-width: 0;
}
.cmd-card[data-surface="elevated"] {
  background: var(--fill-elev);
  border: 1px solid var(--border-accent);
  box-shadow: var(--shadow), var(--chip-ring);
}
.cmd-input { flex: 1; border: none; background: transparent; color: var(--text); outline: none; font-size: var(--t-md);
}
.cmd-list { display: flex; flex-direction: column; padding: var(--space-2); max-height: 50vh; overflow: auto; overscroll-behavior: contain;
}
.cmd-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border: none; background: transparent; color: var(--text);
  border-radius: var(--radius-sm); text-align: left;
}
.cmd-card[data-surface="elevated"] .cmd-item.on,
.cmd-card[data-surface="elevated"] .cmd-item:hover { background: var(--fill-hover);
}
.sig-tray {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column-reverse; align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}
.sig-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  border-radius: 10px; color: var(--text);
}
.sig-toast[data-surface="elevated"] {
  padding: 12px 20px; background: var(--fill-elev);
  border: 1px solid var(--border-accent); box-shadow: var(--shadow), var(--chip-ring), var(--float-glow);
}
@media (prefers-reduced-motion: no-preference) {.sig-toast {
    opacity: 1; transform: translateY(0);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@starting-style {
    .sig-toast { opacity: 0; transform: translateY(0.35rem); }
}
}
#appLoader {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); background: var(--scrim);
}
.prose { max-width: min(var(--prose-w, 54rem), 100%); margin-inline: auto;
}
.pane-head { display:flex; align-items:center; gap:8px; min-height:40px; padding:6px 14px; border-bottom:1px solid var(--border-accent); flex-shrink:0;
}
.panel[data-surface] .pane-head { background: var(--fill-chrome);
}
.pane-title { font-size: var(--t-sm); font-weight: 650;
}
html:not([data-net="off"]) .net-off { display: none;
}
.vf-inspect {
  position: fixed; right: 16px; bottom: 16px; z-index: 9000;
  width: min(320px, calc(100vw - 32px)); max-height: min(70vh, 520px);
  overflow: auto; overscroll-behavior: contain; color: var(--text); border-radius: var(--radius); padding: 0;
}
.vf-inspect[data-surface="elevated"] {
  background: var(--fill-elev);
  border: 1px solid var(--border-accent); box-shadow: var(--shadow), var(--chip-ring);
}
.vf-inspect .cluster { margin:0 12px 12px;
}}
@layer rail {
.rail {
  grid-area: rail; display: flex; flex-direction: column; border-inline-end: 1px solid var(--border-accent);
  width: var(--nav-w, 14rem); min-width: var(--nav-w, 14rem); overflow: hidden;
  transition: width var(--dur, 0.2s) var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              min-width var(--dur, 0.2s) var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.rail[data-surface="glass"] {
  background: var(--chrome); border-inline-end-color: var(--border-accent);
  backdrop-filter: var(--chrome-blur); -webkit-backdrop-filter: var(--chrome-blur);
}
html[data-nav="collapsed"] .rail {
  width: var(--nav-collapsed, 48px) !important;
  min-width: var(--nav-collapsed, 48px) !important;
  max-width: var(--nav-collapsed, 48px) !important;
}
html[data-nav="expanded"] .rail {
  width: var(--nav-w, 14rem) !important;
  min-width: var(--nav-w, 14rem) !important;
}
.rail-toggle {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 1px solid var(--border-accent); border-radius: var(--radius-sm, 6px); background: transparent;
  color: var(--muted); cursor: pointer; transition: all var(--dur-fast, 0.15s) ease; box-shadow: var(--chip-ring);
}
.rail[data-surface="glass"] .rail-toggle:hover {
  background: var(--fill-hover); color: var(--text);
  border-color: var(--accent); box-shadow: var(--chip-ring);
}
html[data-nav="collapsed"] .rail-toggle-ico {
  transform: rotate(180deg);
}
.rail-toggle-ico {
  transition: transform var(--dur, 0.2s) var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.rail-nav { display: flex; flex-direction: column; padding: 4px 8px; gap: 3px;
}
.rail-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px;
  border: none; border-radius: var(--radius-sm, 8px); background: transparent; color: var(--muted);
  font-size: var(--t-sm, 0.88rem); font-weight: 600; text-align: left; cursor: pointer;
  text-decoration: none; transition: all var(--dur-fast, 0.15s) ease; position: relative;
}
.rail-item .icon {
  background-color: currentColor;
  color: inherit;
  flex-shrink: 0;
}
.rail[data-surface="glass"] .rail-item:hover {
  background: var(--fill-hover); color: var(--text);
}
.rail[data-surface="glass"] .rail-item.active {
  background: var(--fill-rail); color: var(--text); font-weight: 700; box-shadow: var(--chip-ring);
}
.rail[data-surface="glass"] .rail-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.rail-item.active .icon {
  color: var(--accent);
}
.rail-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-nav="collapsed"] .rail-label {
  display: none;
}
html[data-nav="collapsed"] .rail-item {
  justify-content: center;
  padding: 8px 0;
  width: 100%;
}
.rail-spacer {
  flex: 1;
}
html[data-nav-at="top"] .rail,
html[data-nav-at="bottom"] .rail {
  flex-direction: row;
  align-items: stretch;
  border-inline-end: none;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
html[data-nav-at="top"] .rail { border-block-end: 1px solid var(--border-accent);
}
html[data-nav-at="bottom"] .rail { border-block-start: 1px solid var(--border-accent);
}
html[data-nav-at="top"] .rail-toggle,
html[data-nav-at="bottom"] .rail-toggle { display: none;
}
html[data-nav-at="top"] .rail-nav,
html[data-nav-at="bottom"] .rail-nav {
  flex-direction: row;
  flex: 1;
  justify-content: flex-start;
  align-items: stretch;
  gap: 2px;
  padding: var(--space-1) var(--space-2);
}
html[data-nav-at="bottom"] .rail-nav { justify-content: space-around;
}
html[data-nav-at="top"] .rail-item,
html[data-nav-at="bottom"] .rail-item {
  width: auto;
  flex: 0 1 auto;
}
html[data-nav-at="bottom"] .rail-item {
  flex-direction: column;
  gap: 2px;
  min-height: 48px;
  padding: 6px 10px;
  font-size: var(--t-xs);
}
html[data-nav-at="end"] .rail {
  border-inline-end: none;
  border-inline-start: 1px solid var(--border-accent);
}
@media (max-width: 720px) {
  html[data-shell="app"]:not([data-nav-at="top"]):not([data-nav-at="bottom"]):not([data-nav-mobile="bottom"]) .rail,
  html[data-shell="work"]:not([data-nav-at="top"]):not([data-nav-at="bottom"]):not([data-nav-mobile="bottom"]) .rail {
    width: var(--nav-collapsed, 48px) !important;
    min-width: var(--nav-collapsed, 48px) !important;
    max-width: var(--nav-collapsed, 48px) !important;
  }
}}
@layer pages {
.page { view-transition-name: vf-page;
}
.page > .page-head { display: none;
}
.work { padding: var(--space-4) clamp(var(--space-4), 2vw, var(--space-6));
}
.work:has(.page) { padding: var(--space-6) clamp(var(--space-5), 3vw, var(--space-8));
}
.desk {
  display: flex; flex-direction: column; gap: var(--space-8);
  overflow-x: clip; max-width: min(var(--desk-w), 100%); margin-inline: auto;
}
.live-meter { display: flex; flex-direction: column; gap: var(--space-3);
}
.live-meter [data-island] { display: flex; align-items: center; gap: var(--space-3); min-width: 0; border-radius: var(--radius);
}
.live-meter[data-surface="flat"] [data-island] {
  padding: var(--space-3) var(--space-4); background: var(--fill-flat);
  border: 1px solid var(--border-accent); box-shadow: var(--shine), var(--shadow-soft), var(--chip-ring);
}
.live-meter .hint { margin: 0;
}
.live-meter .ago { font-variant-numeric: tabular-nums;
}
.work:has(.workspace) .workspace,
.work:has(.workspace) [data-area="main"] { flex: 1; min-height: 0;
}
.work:has(.workspace) [data-area="main"] { display: flex; flex-direction: column;
}
.work:has(.workspace) [data-area="main"] > * { min-height: 0;
}
.mast { position: relative; padding: var(--space-7) 0 var(--space-5);
}
.mast-split {
  display: grid; align-items: center; gap: var(--space-7) var(--space-8);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.mast-split:not(:has(.mast-aside)) { grid-template-columns: minmax(0, 42rem);
}
.mast::before {
  content: ""; position: absolute; inset-block-start: -8%; inset-inline: -6%;
  height: 14rem; pointer-events: none; z-index: -1;
}
.mast[data-surface="elevated"]::before {
  background: var(--mast-glow);
}
.mast-copy { display: block; min-width: 0;
}
.mast .kicker {
  display: inline-flex; align-items: center; margin-bottom: var(--space-4);
  border-radius: var(--radius-pill); letter-spacing: 0.1em;
}
.mast[data-surface="elevated"] .kicker {
  padding: 4px 12px; border: 1px solid var(--accent-ring); background: var(--accent-soft); box-shadow: var(--chip-ring);
}
.display {
  font-family: var(--font-display); font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.75rem);
  letter-spacing: -0.04em; line-height: 1.04; max-width: 20ch; font-weight: 750; text-wrap: balance;
}
.display span { color: var(--muted); font-weight: 600;
}
.mast .lede { margin-top: var(--space-4); font-size: var(--t-lg); line-height: 1.55; max-width: 38rem;
}
.cta-row { margin-top: var(--space-6); gap: var(--space-3);
}
.mast-aside { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
}
.mast-aside .code { margin: 0; max-height: 18rem; overflow: auto;
}
.band {
  display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: var(--space-5) var(--space-8); align-items: start; padding-block: var(--space-6);
}
.band + .band { border-top: 1px solid var(--hairline-accent);
}
.band > [data-slot="head"] { align-self: stretch; align-items: flex-start;
}
.band .band-head { margin-bottom: 0; position: sticky; top: var(--space-4);
}
.band .band-head h2 { font-size: var(--t-xl); letter-spacing: -0.03em;
}
.band .lede { font-size: var(--t-sm); max-width: 22rem;
}
.band-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3);
}
.band-head h2 { text-wrap: balance;
}
.kicker { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.lede { color: var(--muted); max-width: 46rem; text-wrap: pretty;
}
.value-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; border-radius: var(--radius); transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.value-card[data-surface="flat"] { padding: var(--space-5); background: var(--fill-flat); border: 1px solid var(--border-accent-soft);
}
.value-card[data-surface="flat"]:hover { border-color: var(--border-accent-strong); transform: var(--hover-lift); box-shadow: var(--chip-ring);
}
.value-card > [data-slot="head"] { flex-direction: column; align-items: flex-start; gap: var(--space-3);
}
.value-card h3 { font-size: var(--t-md); letter-spacing: -0.01em; white-space: normal;
}
.value-card p { color: var(--muted); font-size: var(--t-sm); line-height: 1.55;
}
.value-card[data-surface="flat"][data-variant="solid"] {
  border-color: var(--intent-border);
  background: var(--intent-wash);
  box-shadow: var(--shine), var(--chip-ring), var(--shadow-soft);
}
.logo-strip { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); align-items: center;
}
.logo-strip > * { font-size: var(--t-sm); font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); transition: color var(--dur-fast) var(--ease);
}
.logo-strip > *:hover { color: var(--accent);
}
.panel[data-kind="quote"] { gap: var(--space-3);
}
.panel[data-kind="quote"] > [data-slot="body"] { font-size: var(--t-md); line-height: 1.55; font-style: italic; color: var(--text);
}
.panel[data-kind="quote"] > [data-slot="body"]::before {
  content: "“"; display: block; margin-bottom: var(--space-2); font-size: var(--t-2xl);
  line-height: 1; font-style: normal; font-weight: 700; color: var(--intent, var(--accent));
}
.band[data-surface="flat"][data-tone] {
  padding-inline: var(--space-5); border-radius: var(--radius);
  background: var(--intent-soft, var(--accent-soft)); border-top-color: transparent;
}
.band[data-surface="flat"][data-tone] + .band,
.band + .band[data-surface="flat"][data-tone] { border-top-color: transparent;
}
.site-foot { margin-top: var(--space-4); border-top: 1px solid var(--hairline-accent);
}
.site-foot[data-surface="flat"] { padding-top: var(--space-6); border-top-color: var(--hairline-accent-soft);
}
.site-foot .dim:first-child { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.recipe {
  display: grid; gap: 1px; padding: 0; list-style: none; overflow: hidden; border-radius: var(--radius);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.recipe[data-surface="flat"] { background: var(--border-accent-soft); border: 1px solid var(--border-accent); box-shadow: var(--shine), var(--chip-ring);
}
.recipe[data-surface="flat"] > * { background: var(--fill-quiet);
}
.recipe li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); min-width: 0;
}
.recipe[data-surface="flat"] .recipe-n {
  display: inline-grid; place-items: center; align-self: flex-start; inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: var(--t-xs); font-weight: 700;
  box-shadow: var(--chip-ring); border: 1px solid var(--border-accent-strong);
}
.recipe strong { font-size: var(--t-md); letter-spacing: -0.03em;
}
.recipe p { color: var(--muted); font-size: var(--t-sm);
}
.recipe code { display: block; margin-top: auto; padding: var(--space-2) 0 0; font-size: var(--t-xs); overflow-wrap: anywhere; color: var(--text);
}
.toolbar {
  position: sticky; top: var(--space-2); z-index: 2; border-radius: var(--radius);
}
.toolbar[data-surface="glass"], .command-bar[data-surface="glass"],
.status-dock[data-surface="glass"] {
  background: var(--chrome); border: 1px solid var(--hairline-accent-soft); backdrop-filter: var(--chrome-blur); -webkit-backdrop-filter: var(--chrome-blur); box-shadow: var(--chip-ring);
}
.toolbar[data-surface="glass"] { padding: var(--space-3) var(--space-4);
}
.toolbar > .between, .filter-bar > .between, .command-bar > .between, .status-dock > .between { width: 100%;
}
.kpi-strip { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
}
.kpi-strip[data-surface="sunken"] { padding: var(--space-3); border-radius: var(--radius); background: var(--fill-sunken); border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
.kpi-strip .metric { padding: var(--space-3) var(--space-4);
}
.kpi-strip .metric-value { font-size: var(--t-xl);
}
.empty-cta {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-3); min-width: 0; border-radius: var(--radius);
}
.empty-cta[data-surface="sunken"] { padding: var(--space-6); border: 1.5px dashed var(--edge-accent); background: var(--fill-bg); box-shadow: var(--chip-ring);
}
.empty-cta[data-surface="sunken"]:hover { border-color: var(--accent); background: var(--fill-active-hot); box-shadow: var(--chip-ring);
}
.empty-cta .empty[data-surface], .empty-cta .empty-rich[data-surface] { padding: 0;
}
.page-hero, .feature-grid { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
}
.page-hero .band-head h2 { font-size: var(--t-2xl); letter-spacing: -0.035em;
}
.directory {
  display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; border-radius: var(--radius);
}
.directory[data-surface="flat"] { padding: var(--space-3); background: var(--fill-plate); border: 1px solid var(--border-accent-soft); box-shadow: var(--chip-ring);
}
.directory[data-surface="flat"] > .toolbar[data-surface="glass"] {
  position: static; border: 0; background: var(--dock-fill); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.theme-strip, .style-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
}
.logo-strip[data-surface], .theme-strip[data-surface], .style-strip[data-surface], .chip-row[data-surface] {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--fill-sunken); border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
.theme-strip .badge { letter-spacing: 0.04em;
}
.style-strip .badge { letter-spacing: 0.03em; text-transform: lowercase;
}
.pricing-tier { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
}
.pricing-tier > a[class*="btn"] { align-self: start;
}
.pricing-tier[data-surface="elevated"]:has([data-variant="solid"]) {
  padding: var(--space-2); border-radius: calc(var(--radius) + 2px); background: var(--featured-wash);
  box-shadow: var(--shine), var(--chip-ring); border-color: var(--border-feature);
}
.split-pane { min-width: 0;
}
.split-pane[data-surface="sunken"] > .sidebar {
  gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-accent);
  border-radius: var(--radius); background: var(--fill-side); box-shadow: var(--shine), var(--chip-ring);
}
.step-rail {
  border-radius: var(--radius);
}
.step-rail[data-surface="sunken"] { padding: var(--space-4); background: var(--fill-bg); border: 1px dashed var(--edge-accent); box-shadow: var(--chip-ring);
}
.step-rail .steps { gap: var(--space-3);
}
.step-rail .step { padding-block: var(--space-1);
}
.status-dock {
  margin-top: var(--space-2); border-radius: var(--radius-pill); color: var(--muted); font-size: var(--t-xs);
}
.auth-shell {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: var(--space-5); align-items: center; min-width: 0; border-radius: var(--radius);
}
.auth-shell[data-surface="elevated"] { padding: var(--space-5); background: var(--hero-wash); border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
.auth-shell > .panel { margin: 0; inline-size: 100%;
}
.auth-shell .form-grid { grid-template-columns: 1fr; gap: var(--space-3);
}
.action-card {
  display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; border-radius: var(--radius);
}
.action-card[data-surface="flat"] { padding: var(--space-3); background: var(--fill-flat); border: 1px solid var(--border-accent-soft); box-shadow: var(--chip-ring); transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.action-card[data-surface="flat"]:hover { border-color: var(--border-accent-strong); transform: var(--hover-lift); box-shadow: var(--chip-ring);
}
.action-card > a[class*="btn"], .action-card > .act-form { align-self: start;
}
.notice-bar {
  display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; border-radius: var(--radius);
}
.notice-bar[data-surface="sunken"] {
  padding: var(--space-3) var(--space-4); border: 1px solid var(--intent-edge);
  background: var(--fill-notice);
  box-shadow: inset 3px 0 0 var(--intent, var(--accent)), var(--chip-ring);
}
.ops-desk, .settings-shell, .plan-board, .dash-shell, .launch-pad, .doc-shell, .guide-shell, .list-desk {
  display: flex; flex-direction: column; gap: var(--space-4); min-width: 0;
}
.hero-mast { min-width: 0; position: relative;
}
.hero-mast .mast { border-radius: calc(var(--radius) + 4px);
}
.hero-mast[data-surface="elevated"] .mast { padding: var(--space-8) var(--space-5) var(--space-6); border: 1px solid var(--border-accent); background: var(--hero-wash); box-shadow: var(--shine), var(--shadow-soft), var(--chip-ring);
}
.hero-mast .mast::before { inset-inline: 0; border-radius: inherit;
}
.surface, .media-tile, .link-tile, .elev-surface, .defer-panel {
  display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; border-radius: var(--radius);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.surface[data-surface="flat"], .media-tile[data-surface="elevated"],
.link-tile[data-surface="flat"], .elev-surface[data-surface="glass"],
.defer-panel[data-surface="glass"] { padding: var(--space-4);
}
.surface[data-surface="flat"], .link-tile[data-surface="flat"] { background: var(--fill-flat); border: 1px solid var(--border-accent-soft); box-shadow: var(--chip-ring);
}
.elev-surface[data-surface="glass"], .defer-panel[data-surface="glass"] { background: var(--chrome); border: 1px solid var(--hairline-accent-soft); backdrop-filter: var(--chrome-blur); -webkit-backdrop-filter: var(--chrome-blur); box-shadow: var(--chip-ring);
}
.surface[data-surface="flat"]:hover, .media-tile[data-surface="elevated"]:hover,
.link-tile[data-surface="flat"]:hover, .elev-surface[data-surface="glass"]:hover,
.defer-panel[data-surface="glass"]:hover { border-color: var(--accent); box-shadow: var(--hover-elevate), var(--chip-ring); transform: var(--hover-lift);
}
.media-tile > .cluster, .media-tile > .chip-row, .link-tile > a { margin-top: auto;
}
.media-tile[data-surface="elevated"] { background: var(--fill-flat);
}
.link-tile > a { align-self: start;
}
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-width: 0;
}
.chip-row .btn-sm, .chip-row .btn-xs { border-radius: var(--radius-pill);
}
.chip-row .btn-primary { box-shadow: var(--chip-ring);
}
.filter-bar[data-surface="sunken"] .chip-row[data-surface="sunken"] { padding: 0; border: 0; background: transparent; box-shadow: none;
}
.filter-bar {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0; border-radius: var(--radius);
}
.filter-bar[data-surface="sunken"] {
  padding: var(--space-2) var(--space-3); background: var(--fill-sunken);
  border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
.filter-bar .stack { gap: var(--space-2); min-width: 0; flex: 1 1 auto;
}
.filter-bar .stack > .chip-row { gap: var(--space-1) var(--space-2);
}
.filter-bar .chip-row > .muted { min-width: 3.5rem; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em;
}
.list-desk .directory[data-surface="flat"] { background: var(--fill-nest);
}
.list-desk .directory[data-surface="flat"] .data-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--fill-sticky);
}
.promo-band { border-radius: var(--radius); overflow: clip; min-width: 0;
}
.promo-band > .band { margin: 0;
}
.command-bar {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0; border-radius: var(--radius-pill);
}
.command-bar[data-surface="glass"], .status-dock[data-surface="glass"] { padding: var(--space-2) var(--space-3);
}
.feed-list {
  display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; border-radius: var(--radius);
}
.feed-list[data-surface="sunken"] { padding: var(--space-4); border-inline-start: 3px solid var(--accent-edge); background: var(--fill-sunken-soft); border: 1px solid var(--border-accent-soft); border-inline-start-width: 3px; box-shadow: var(--chip-ring);
}
.site-page { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0;
}
.trust-band, .pricing-board, .faq-list, .feature-band, .stat-band, .process-band, .quote-board { min-width: 0; border-radius: var(--radius); overflow: clip;
}
.trust-band[data-surface="flat"], .feature-band[data-surface="flat"],
.pricing-board[data-surface="elevated"], .promo-band[data-surface="elevated"],
.faq-list[data-surface="sunken"], .stat-band[data-surface="sunken"], .quote-board[data-surface="sunken"],
.process-band[data-surface="elevated"] { padding: var(--space-4) var(--space-5);
}
.trust-band[data-surface="flat"], .feature-band[data-surface="flat"] { background: var(--fill-plate); border: 1px solid var(--border-accent-soft); box-shadow: var(--chip-ring);
}
.pricing-board[data-surface="elevated"], .promo-band[data-surface="elevated"] { background: var(--fill-elev); border: 1px solid var(--border-accent); box-shadow: var(--chip-ring);
}
.faq-list[data-surface="sunken"], .stat-band[data-surface="sunken"], .quote-board[data-surface="sunken"] { background: var(--fill-sunken-soft); border: 1px solid var(--border-accent-soft); box-shadow: var(--chip-ring);
}
.pricing-board .pricing-tier, .quote-board [data-kind="quote"] { height: 100%;
}
.quote-board[data-surface="sunken"] [data-kind="quote"] { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--space-3);
}
.faq-list[data-surface="sunken"] .fold {
  border-radius: var(--radius-sm); background: var(--fill-dock); padding-inline: var(--space-3);
}
.stat-band .metric { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--fill-bg);
}
.process-band .step { border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); background: var(--fill-flat);
}
.process-band[data-surface="elevated"] { background: var(--accent-wash);
}
.flow-list { list-style: decimal; padding-inline-start: 1.35rem; color: var(--muted); display: flex; flex-direction: column; gap: var(--space-2);
}
.flow-list li { padding-inline-start: var(--space-1);
}
.tree-label-branch { font-weight: 600; color: var(--accent-ink, var(--text));
}
@container work (max-width: 48rem) {.mast-split, .band, .split-pane > .sidebar, .auth-shell { grid-template-columns: 1fr;
}
.band .band-head { position: static;
}
.filter-bar, .command-bar, .toolbar, .status-dock { flex-wrap: wrap;
}
.filter-bar > .between, .command-bar > .between, .toolbar > .between,
  .status-dock > .between { flex-wrap: wrap; gap: var(--space-2);
}
.hero-mast[data-surface="elevated"] .mast { padding: var(--space-5) var(--space-4) var(--space-4);
}
.list-desk .directory .data-table thead th { position: static;
}
}
@container work (max-width: 40rem) {.desk { gap: var(--space-6);
}
.work:has(.page) { padding: var(--space-4);
}
.display { max-width: none;
}
.ops-desk, .settings-shell, .plan-board, .dash-shell, .launch-pad,
  .doc-shell, .guide-shell, .list-desk { gap: var(--space-3);
}
.step-rail[data-surface="sunken"], .auth-shell[data-surface="elevated"], .kpi-strip[data-surface="sunken"] { padding: var(--space-3);
}
}
@supports not (container-type: inline-size) {@media (max-width: 720px) {.mast-split, .band, .split-pane > .sidebar, .auth-shell { grid-template-columns: 1fr;
}
.band .band-head { position: static;
}
.filter-bar, .command-bar, .toolbar, .status-dock { flex-wrap: wrap;
}
.filter-bar > .between, .command-bar > .between, .toolbar > .between,
    .status-dock > .between { flex-wrap: wrap; gap: var(--space-2);
}
.hero-mast[data-surface="elevated"] .mast { padding: var(--space-5) var(--space-4) var(--space-4);
}
.list-desk .directory .data-table thead th { position: static;
}
}
@media (max-width: 480px) {.ops-desk, .settings-shell, .plan-board, .dash-shell, .launch-pad,
    .doc-shell, .guide-shell, .list-desk { gap: var(--space-3);
}
.step-rail[data-surface="sunken"], .auth-shell[data-surface="elevated"], .kpi-strip[data-surface="sunken"] { padding: var(--space-3);
}
}
}
.t-text { display: inline;
}
.t-accent { color: var(--accent);
}
.t-inverse { color: var(--ink-on-solid);
}
.dim { color: var(--muted);
}
.faint { color: var(--faint);
}}
@layer responsive {
@media (pointer: coarse) {
  .rail-item,
  .rail-toggle,
  .btn, .btn-primary, .btn-ghost, .btn-danger, .btn-sm,
  .topbar-jump, .lang-btn {
    min-height: 44px;
  }
}
@media (max-width: 720px) {html[data-shell="app"]:not([data-nav-at="top"]):not([data-nav-at="bottom"]):not([data-nav-mobile="bottom"]) .rail,
  html[data-shell="work"]:not([data-nav-at="top"]):not([data-nav-at="bottom"]):not([data-nav-mobile="bottom"]) .rail,
  html[data-shell="editor"]:not([data-nav-at="top"]):not([data-nav-at="bottom"]):not([data-nav-mobile="bottom"]) .rail {
    width: var(--nav-collapsed);
    max-width: var(--nav-collapsed);
    resize: none;
}
html[data-shell="editor"] .tools { display: none;
}
.rail-label { display: none;
}
.rail-item { justify-content: center; padding: 8px;
}
.topbar-brand-sub { display: none;
}
.topbar-jump-label,
  .topbar-jump .kbd { display: none;
}
.topbar-jump {
    min-width: 40px; width: 40px; flex: 0 0 auto; max-width: none;
    padding: 0; justify-content: center;
}
}
@media (max-width: 480px) {.topbar { gap: 8px; padding-inline: var(--space-3);
}
  .panel[data-surface] { padding: var(--space-3);
}
.topbar-brand-text { display: none;
}
dialog.modal-overlay[data-kind="sheet"][open],
  dialog.modal-overlay[data-kind="sheet"]:popover-open {
    align-items: flex-end;
    justify-content: stretch;
}
.sheet {
    width: 100%;
    height: min(92vh, 100%);
    height: min(92dvh, 100%);
    border-inline-start: none;
    border-block-start: 1px solid var(--border-accent);
    border-radius: var(--radius) var(--radius) 0 0;
}
}
@media print {body {
    background: #ffffff !important;
    color: #000000 !important;
}
.rail, .topbar, .tools, .status, .skip-link, .toast-hud, .cmd-palette, .btn, button {
    display: none !important;
}
.shell, .content, .work {
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}
.card[data-surface], .panel[data-surface] {
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
    break-inside: avoid;
}
}}
@layer a11y {
@media (prefers-contrast: more) {
  :root {
    --text: light-dark(#0c0a08, #fffdf8);
    --muted: light-dark(#3f3a32, #d2ccc2);
    --border: light-dark(#8a8378, #8b9bb0);
    --border-strong: light-dark(#5c564c, #b4c2d4);
    --accent: light-dark(#0a5c56, #5ff0d4);
  }
  .btn, .btn-primary, .btn-ghost, .btn-danger, .panel[data-surface], .input, .select, .textarea {
    border-width: 2px;
  }
}
@media (forced-colors: active) {.btn-primary,
.btn-ghost,
.btn-danger,
.ps-pill,
.rail-item,
.panel[data-surface],
.card[data-surface],
.mast-aside[data-surface="elevated"],
.recipe[data-surface="flat"],
.band[data-surface="flat"],
.sheet[data-surface="elevated"],
.toast[data-surface="elevated"],
.cmd-palette[data-surface="glass"],
.live-meter[data-surface="flat"] [data-island],
.cmd-card[data-surface="elevated"],
.sig-toast[data-surface="elevated"],
.directory[data-surface="flat"],
.value-card[data-surface="flat"],
.site-foot[data-surface="flat"],
.surface[data-surface="flat"],
.elev-surface[data-surface="glass"],
.defer-panel[data-surface="glass"],
.filter-bar[data-surface="sunken"],
.command-bar[data-surface="glass"],
.toolbar[data-surface="glass"],
.notice-bar[data-surface="sunken"],
.auth-shell[data-surface="elevated"],
.mast[data-surface="elevated"],
.hero-mast[data-surface="elevated"] .mast,
.empty-cta[data-surface="sunken"],
.step-rail[data-surface="sunken"],
.promo-band[data-surface="elevated"],
.action-card[data-surface="flat"],
.media-tile[data-surface="elevated"],
.link-tile[data-surface="flat"],
.pricing-tier[data-surface="elevated"],
.chip-row[data-surface="sunken"],
.logo-strip[data-surface="flat"],
.theme-strip[data-surface="flat"],
.style-strip[data-surface="flat"],
.callout[data-surface="sunken"],
.banner[data-surface="sunken"],
.data-grid[data-surface="sunken"],
.cal[data-surface="flat"],
.bulk[data-surface="elevated"],
.thread[data-surface="sunken"],
.tline[data-surface="flat"],
.code-block[data-surface="sunken"],
.drop[data-surface="sunken"],
.frame[data-surface="sunken"],
.shelf[data-surface="elevated"],
.empty[data-surface="sunken"],
.empty-rich[data-surface="sunken"],
.topbar-jump[data-surface="sunken"],
.topbar[data-surface="glass"],
.rail[data-surface="glass"],
.vf-inspect[data-surface="elevated"],
.tools[data-surface="elevated"],
.status[data-surface="elevated"],
.timeline-content[data-surface="flat"],
#desk-hold[data-surface="elevated"],
#ws-float [data-float][data-surface="elevated"],
#ws-float [data-float][data-surface="flat"],
.workspace[data-surface="flat"],
.flow[data-flow="floor"][data-surface="sunken"],
.suggest-menu[data-surface="glass"],
.notif-panel[data-surface="elevated"],
.tag-input[data-surface="sunken"],
.seg-switch[data-surface="sunken"],
.multi-select[data-surface="sunken"],
.date-range[data-surface="flat"],
.input[data-surface="sunken"],
.select[data-surface="sunken"],
.textarea[data-surface="sunken"],
.meter[data-surface="sunken"],
.tag[data-surface="flat"],
.kbd[data-surface="flat"],
.avatar[data-surface="flat"],
.avatar-chip[data-surface="flat"],
.table-wrap[data-surface="flat"],
.tip[data-surface="elevated"],
iframe.vf-embed[data-surface="sunken"],
svg.canvas[data-surface="sunken"],
.kpi-strip[data-surface="sunken"],
.feed-list[data-surface="sunken"],
.metric[data-surface="flat"],
.timeline[data-surface="flat"],
.flow[data-flow="timeline"][data-surface="flat"],
.plan-board[data-surface="flat"],
.list-desk[data-surface="flat"],
.ops-desk[data-surface="flat"],
.dash-shell[data-surface="flat"],
.launch-pad[data-surface="flat"],
.settings-shell[data-surface="flat"],
.doc-shell[data-surface="flat"],
.guide-shell[data-surface="flat"],
.page-hero[data-surface="flat"],
.site-page[data-surface="flat"],
.status-dock[data-surface="glass"],
.trust-band[data-surface="flat"],
.pricing-board[data-surface="elevated"],
.faq-list[data-surface="sunken"],
.feature-band[data-surface="flat"],
.stat-band[data-surface="sunken"],
.process-band[data-surface="elevated"],
.quote-board[data-surface="sunken"] {
    border: 1px solid ButtonText;
    forced-color-adjust: none;
}
.btn-primary { background: Highlight; color: HighlightText;
}
.icon {
    forced-color-adjust: none;
    background-color: ButtonText;
}
.rail-item.active { outline: 2px solid Highlight;
}
.meter-fill { forced-color-adjust: none;
}
}
@media (prefers-reduced-transparency: reduce) {:root {
    --chrome: light-dark(#fffdf9, #0c1118);
    --scrim: light-dark(rgb(15 23 42 / 0.72), rgb(0 0 0 / 0.82));
    --focus-halo: none;
 --intent-halo: none;
 --mark-ring: 0 0 0 2px var(--border-accent);
 --control-ring: 0 0 0 3px var(--border-accent);
 --spinner-track: var(--border-accent);
 --intent-inset: inset 0 0 0 1px var(--border-accent);
 --track-inset: inset 0 0 0 1px var(--border);
 --meter-sheen: transparent;
 --heat-ok: var(--ok-soft, var(--accent-soft));
 --heat-dn: var(--danger-soft, var(--accent-soft));
 --progress-glow: none;
 --progress-glow-sm: none;
 --float-glow: none;
 --float-glow-lg: none;
 --sticky-edge: var(--shadow-sm);
}
.topbar[data-surface="glass"],
.rail[data-surface="glass"],
.elev-surface[data-surface="glass"],
.defer-panel[data-surface="glass"],
.popover[data-surface="glass"],
dialog.modal-overlay[data-surface="glass"],
.suggest-menu[data-surface="glass"],
.cmd-palette[data-surface="glass"],
.command-bar[data-surface="glass"],
.toolbar[data-surface="glass"],
.status-dock[data-surface="glass"],
.hero-mast[data-surface="elevated"] .mast,
.auth-shell[data-surface="elevated"],
.step-rail[data-surface="sunken"],
.kpi-strip[data-surface="sunken"],
.list-desk .directory[data-surface="flat"] {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.topbar[data-surface="glass"],
.rail[data-surface="glass"] {
    background: var(--chrome); border-color: var(--border-accent);
}
.elev-surface[data-surface="glass"], .defer-panel[data-surface="glass"],
  .popover[data-surface="glass"], dialog.modal-overlay[data-surface="glass"],
  .suggest-menu[data-surface="glass"], .cmd-palette[data-surface="glass"],
  .hero-mast[data-surface="elevated"] .mast,
  .auth-shell[data-surface="elevated"], .step-rail[data-surface="sunken"],
  .list-desk .directory[data-surface="flat"] { background: var(--card); border-color: var(--border-accent);
}
.command-bar[data-surface="glass"], .toolbar[data-surface="glass"],
  .status-dock[data-surface="glass"],
  .filter-bar[data-surface="sunken"], .kpi-strip[data-surface="sunken"] {
    background: var(--bg-soft); border-color: var(--border-accent);
}
}
@media (prefers-reduced-motion: reduce) {.presence-stack .avatar:hover { transform: none;
}
.surface[data-surface="flat"], .media-tile[data-surface="elevated"],
  .link-tile[data-surface="flat"], .elev-surface[data-surface="glass"],
  .defer-panel[data-surface="glass"],
  .action-card[data-surface="flat"], .pricing-tier[data-surface="elevated"],
  .value-card[data-surface="flat"] {
    transition: none !important;
}
.surface[data-surface="flat"]:hover,
.media-tile[data-surface="elevated"]:hover,
.link-tile[data-surface="flat"]:hover,
.elev-surface[data-surface="glass"]:hover,
.defer-panel[data-surface="glass"]:hover,
.value-card[data-surface="flat"]:hover,
.action-card[data-surface="flat"]:hover,
.metric[data-surface="flat"]:hover { transform: none !important;
}
}
@media (prefers-reduced-data: reduce) {body {
    background: var(--bg);
}
.mast[data-surface="elevated"]::before,
  .hero-mast[data-surface="elevated"] .mast[data-surface="elevated"]::before { display: none;
}
.auth-shell[data-surface="elevated"], .step-rail[data-surface="sunken"],
  .kpi-strip[data-surface="sunken"], .list-desk .directory[data-surface="flat"] {
    background: var(--card);
}
}
[data-vf-panic] {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9999;
  margin: 0;
  padding: 8px 12px;
  box-sizing: border-box;
  background: #b3261e;
  color: #fff;
  font: 12px/1.5 system-ui, sans-serif;
  word-break: break-word;
}
@media print {.skip-link, .topbar, .rail, .tools, .status, .sig-tray, .modal-overlay, #appLoader {
    display: none !important;
}
html, body { height: auto; overflow: visible;
}
.shell { display: block; height: auto; overflow: visible;
}
.content, .work { overflow: visible !important; height: auto !important;
}
.list-desk .directory[data-surface="flat"] .data-table thead th { position: static;
}
.toolbar { position: static;
}
.surface[data-surface="flat"], .media-tile[data-surface="elevated"],
  .link-tile[data-surface="flat"], .elev-surface[data-surface="glass"],
  .defer-panel[data-surface="glass"],
  .auth-shell[data-surface="elevated"], .step-rail[data-surface="sunken"],
  .hero-mast[data-surface="elevated"] .mast,
  .action-card[data-surface="flat"], .directory[data-surface="flat"],
  .value-card[data-surface="flat"], .site-foot[data-surface="flat"],
  .kpi-strip[data-surface="sunken"],
  .toolbar[data-surface="glass"], .filter-bar[data-surface="sunken"],
  .command-bar[data-surface="glass"], .feed-list[data-surface="sunken"],
  .empty-cta[data-surface="sunken"],
  .chip-row[data-surface="sunken"], .logo-strip[data-surface="flat"],
  .theme-strip[data-surface="flat"], .style-strip[data-surface="flat"],
  .pricing-tier[data-surface="elevated"],
  .trust-band[data-surface="flat"], .pricing-board[data-surface="elevated"],
  .faq-list[data-surface="sunken"], .feature-band[data-surface="flat"],
  .stat-band[data-surface="sunken"], .process-band[data-surface="elevated"],
  .quote-board[data-surface="sunken"], .promo-band[data-surface="elevated"],
  .recipe[data-surface="flat"], .toast[data-surface="elevated"],
  .cmd-palette[data-surface="glass"] {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    break-inside: avoid;
}
.surface[data-surface="flat"]:hover, .media-tile[data-surface="elevated"]:hover,
  .link-tile[data-surface="flat"]:hover, .elev-surface[data-surface="glass"]:hover,
  .defer-panel[data-surface="glass"]:hover { transform: none !important;
}
}}
@layer product {
/* Product CSS. Bundled last in @layer product — always wins. */

@layer product {
  :root {
    --brand: #0f766e;
    /* --font-custom: "Source Serif 4", serif; */
    --shine: none;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --panel-pad: clamp(var(--space-4), 1.25rem + 0.25vw, var(--space-6));
    --panel-gap: var(--space-3);
    --panel-radius: var(--radius);
    --panel-border: 1px solid var(--border);
    --panel-bg: var(--card);
    --card-pad: var(--panel-pad);
    --card-radius: var(--panel-radius);
    --card-border: var(--panel-border);
    --card-bg: var(--panel-bg);
    --workspace-gap: var(--space-4);
    --workspace-pad: clamp(var(--space-2), 1vw, var(--space-4));
  }

  /* Matte surfaces — tokens only, no glass. */
  .surface, .card, .panel, .stat-card, .action-card, .pricing-tier {
    background: var(--panel-bg);
    border: var(--panel-border);
    border-radius: var(--panel-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: var(--panel-pad);
  }

  /* Card & Panel Variants: Outline, Soft, Ghost, Solid */
  .card[data-variant="outline"], .panel[data-variant="outline"] {
    background: transparent;
    border: 1px solid var(--border-strong);
    box-shadow: none;
  }
  .card[data-variant="soft"], .panel[data-variant="soft"] {
    background: var(--bg-hover);
    border: 1px solid transparent;
    box-shadow: none;
  }
  .card[data-variant="ghost"], .panel[data-variant="ghost"] {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
  }
  .card[data-variant="solid"], .panel[data-variant="solid"] {
    background: var(--intent-wash, var(--card));
    border: 1px solid var(--intent-border, var(--border));
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
  }

  /* Nested panels inside cards/surfaces: prevent double border and zero-margin squeeze */
  .surface > .panel,
  .card > .panel,
  .surface > .flow > .panel,
  .card > .flow > .panel {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* Workspace and custom containers */
  .workspace, [data-workspace] {
    gap: var(--workspace-gap, var(--space-4));
    padding: var(--workspace-pad, clamp(var(--space-2), 1vw, var(--space-4)));
  }

  .workspace [data-panel],
  .workspace .panel,
  .workspace .card {
    border-radius: var(--panel-radius, var(--radius));
    padding: var(--panel-pad, var(--space-4));
  }

  /* Section / hero / band spacing */
  .mast,
  .hero-mast,
  .band,
  .band-wide,
  .content-section,
  .page-hero,
  .page-head {
    padding-inline: clamp(var(--space-3), 1.25rem + 0.5vw, var(--space-6));
  }

  .hero-mast[data-surface],
  .mast[data-surface],
  .page-hero[data-surface],
  .band[data-surface] {
    padding: clamp(var(--space-4), 1.5rem + 0.5vw, var(--space-6));
    border-radius: var(--radius-lg, var(--radius));
  }

  /* Root fix for Page Hero, Shell Headers, and Container Breathing Room:
     Ensure Title, Kicker, Subtitle, and Text NEVER touch panel or container edges. */
  .page-hero,
  .page-head {
    padding: clamp(var(--space-4), 1.25rem + 0.5vw, var(--space-6));
    border-radius: var(--radius);
    margin-block-end: var(--space-4);
    min-width: 0;
  }

  .band-head,
  [data-panel] > .band-head,
  .page-hero .band-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding-inline: var(--space-2);
  }
  .mast-copy { padding-inline: var(--space-2); }

  .band-head h2,
  .band-head h3,
  .page-hero h2,
  .page-hero h1 {
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.025em;
    font-weight: 700;
  }

  .band-head .kicker,
  .page-hero .kicker {
    margin-block-end: 2px;
    letter-spacing: 0.08em;
  }

  .band-head .lede,
  .page-hero .lede {
    margin-block-start: 4px;
    line-height: 1.55;
    max-width: 48rem;
    color: var(--muted);
    font-size: var(--t-sm);
  }

  .surface:hover, .card:hover, .panel:hover, .stat-card:hover, .action-card:hover, .pricing-tier:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: none;
  }

  /* Panel & Card Head, Title, Subtitle, & Body Spacing */
  .panel-head,
  [data-panel] > [data-slot="head"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-3);
    padding-inline: var(--space-2);
    min-width: 0;
  }

  .panel-head h2, .panel-head h3,
  [data-panel] > [data-slot="head"] h2,
  [data-panel] > [data-slot="head"] h3,
  .panel-title {
    font-size: var(--t-md);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin: 0;
  }

  .panel-sub {
    font-size: var(--t-xs);
    color: var(--muted);
    line-height: 1.45;
    margin-block-start: 2px;
  }

  [data-panel] > [data-slot="body"],
  .panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding-inline: var(--space-2);
    line-height: 1.6;
  }

  .panel p, [data-slot="body"] p {
    margin: 0;
    color: var(--muted);
    font-size: var(--t-sm);
    line-height: 1.6;
  }

  /* All Shell Containers & Workspaces */
  .ops-desk, .settings-shell, .plan-board, .dash-shell, .launch-pad,
  .doc-shell, .guide-shell, .list-desk, .site-page {
    padding-inline: clamp(var(--space-3), 1.25rem + 0.5vw, var(--space-6));
    padding-block: clamp(var(--space-3), 1rem + 0.5vw, var(--space-6));
    padding-block-end: var(--space-6);
    gap: var(--space-5);
  }

  /* Feed lists and recipe step lists */
  .feed-list {
    border-radius: var(--radius);
    padding: var(--space-4);
    min-width: 0;
  }
  .recipe {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    list-style: none;
    border-radius: var(--radius);
  }
  .recipe li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--border);
    min-width: 0;
  }
  .recipe strong {
    font-size: var(--t-md);
    letter-spacing: -0.02em;
    font-weight: 700;
  }
  .recipe p {
    color: var(--muted);
    font-size: var(--t-sm);
    line-height: 1.55;
    gap: var(--space-5);
  }

  /* Alignment utilities */
  /* Compact actions + form controls */
  .form-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
  }

  .form-grid > .field {
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
  }

  .form-grid button[type="submit"],
  .form-grid .btn,
  .form-grid .btn-primary,
  form.stack button[type="submit"] {
    width: auto;
    min-width: 6.5rem;
    max-width: max-content;
    height: 38px;
    padding-inline: var(--space-4);
    font-size: var(--t-sm);
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    align-self: flex-end;
    justify-self: start;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  }

  .form-grid button[type="submit"]:hover,
  form.stack button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }

  .form-grid input.input,
  form.stack input.input {
    height: 38px;
    border-radius: var(--radius-sm, 6px);
    padding-inline: var(--space-3);
    font-size: var(--t-sm);
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .text-start, [data-align="start"], [data-text-align="start"] {
    text-align: start;
    align-items: flex-start;
  }
  .text-center, [data-align="center"], [data-text-align="center"] {
    text-align: center;
    align-items: center;
  }
  .text-end, [data-align="end"], [data-text-align="end"] {
    text-align: end;
    align-items: flex-end;
  }
  .text-justify, [data-text-align="justify"] {
    text-align: justify;
  }

  /* Anchor positioning hook */
  .topbar-settings-btn {
    anchor-name: --settings-anchor;
  }

  /* Settings popover */
  .popover.settings-drawer {
    position: fixed;
    inset-block-start: calc(var(--top-h, 3.25rem) + 8px);
    inset-inline-end: 1rem;
    inset-block-end: auto;
    inset-inline-start: auto;
    margin: 0;
    inline-size: min(calc(100vw - 2rem), 26rem);
    max-inline-size: 26rem;
    max-block-size: calc(100dvh - var(--top-h, 3.25rem) - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-lg, var(--radius));
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-xl, 0 16px 40px rgba(0, 0, 0, 0.35));
    z-index: 1000;
    transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
    opacity: 0;
    transform: translateY(-8px);
  }

  .popover.settings-drawer:popover-open {
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    .popover.settings-drawer:popover-open {
      opacity: 0;
      transform: translateY(-8px);
    }
  }

  @supports (position-anchor: --settings-anchor) {
    .popover.settings-drawer {
      position-anchor: --settings-anchor;
      inset-block-start: anchor(bottom);
      inset-inline-end: anchor(right);
      margin-block-start: 8px;
    }
  }

  .popover.settings-drawer::backdrop {
    background: color-mix(in srgb, var(--bg) 50%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.2s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
    opacity: 0;
  }

  .popover.settings-drawer:popover-open::backdrop {
    opacity: 1;
  }

  @starting-style {
    .popover.settings-drawer:popover-open::backdrop {
      opacity: 0;
    }
  }

  @media (max-width: 640px) {
    .popover.settings-drawer {
      inset: auto !important;
      margin: auto !important;
      inline-size: min(calc(100vw - 2rem), 24rem);
      max-block-size: 85dvh;
      transform: scale(0.95);
    }
    .popover.settings-drawer:popover-open {
      transform: scale(1);
    }
    @starting-style {
      .popover.settings-drawer:popover-open {
        transform: scale(0.95);
      }
    }
  }

  /* Bento flow */
  .flow[data-flow="bento"] {
    gap: var(--space-4);
  }
  .flow[data-flow="bento"] > [data-span],
  .flow[data-flow="bento"] > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .flow[data-flow="bento"] > [data-span] > .surface,
  .flow[data-flow="bento"] > div > .surface {
    flex: 1;
  }

  /* Responsive layout collapse: prevent horizontal overflow */
  @media (max-width: 640px) {
    .flow[data-flow="bento"] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .flow[data-flow="bento"] > [data-span],
    .flow[data-flow="bento"] > div {
      grid-column: 1 / -1 !important;
    }
    .flow[data-flow="split"],
    .flow[data-flow="sidebar"],
    .flow[data-flow="board"] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .flow[data-flow="grid"] > [data-grid] {
      grid-column: 1 / -1 !important;
      grid-row: auto !important;
    }
  }

  @container work (max-width: 42rem) {
    .flow[data-flow="bento"] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .flow[data-flow="bento"] > [data-span],
    .flow[data-flow="bento"] > div {
      grid-column: 1 / -1 !important;
    }
    .flow[data-flow="split"],
    .flow[data-flow="sidebar"],
    .flow[data-flow="board"] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .flow[data-flow="grid"] > [data-grid] {
      grid-column: 1 / -1 !important;
      grid-row: auto !important;
    }
  }
}

/* ui-add:charts:css — spark/bars/ring skins (copied from charts.css; you own them) */
.chart-spark, .spark { color: var(--accent); display: block; }
.chart-spark .spark-line, .spark .spark-line { stroke: currentColor; }
.spark-fill { fill: currentColor; }
.bars, .chart-bars { display: flex; flex-direction: column; gap: var(--space-2); }
.bar, .chart-bar { display: grid; grid-template-columns: 4.5rem 1fr 2.5rem; gap: var(--space-2); align-items: center; font-size: var(--t-xs); }
.bar-label, .chart-bar-label { color: var(--muted); font-weight: 600; }
.bar-track, .chart-bar-track { height: 8px; background: var(--bg-hover); border-radius: var(--radius-pill); overflow: hidden; }
.bar-fill, .chart-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.bar-n, .chart-bar-n { text-align: end; font-variant-numeric: tabular-nums; color: var(--text); }
.ring, .chart-ring { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.ring span, .chart-ring span { font-weight: 700; font-variant-numeric: tabular-nums; }
.ring em, .chart-ring em { font-style: normal; font-size: var(--t-xs); color: var(--muted); }
.ring-track, .chart-ring-track { stroke: var(--bg-hover); }
.ring-fill, .chart-ring-fill { stroke: var(--accent); stroke-linecap: round; }

/* ui-add:stat:css — stat card skin (copied from kit.css; you own it) */
.stat-card { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.stat-card { min-width: 0; }
.stat-label { font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
.stat-value { font-size: var(--t-2xl); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-foot { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.stat-delta { font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.stat-delta[data-tone="ok"] { color: var(--tone-ok); }
.stat-delta[data-tone="danger"] { color: var(--tone-danger); }
.stat-hint { font-size: var(--t-3xs); color: var(--faint); }

/* ui-add:thread:css — thread surface skin (copied from kit.css; you own it) */
.thread { display: grid; gap: var(--space-3); }
.thread-log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-height: 24rem; overflow-y: auto; overscroll-behavior: contain; }
.thread-msg { display: grid; gap: 2px; max-width: 85%; }
.thread-msg.thread-mine { justify-self: end; text-align: end; }
.thread-meta { display: flex; gap: var(--space-2); font-size: var(--t-3xs); color: var(--muted); }
.thread-msg.thread-mine .thread-meta { flex-direction: row-reverse; }
.thread-msg p { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--bg-hover); font-size: var(--t-sm); overflow-wrap: anywhere; }
.thread-msg.thread-mine p { background: var(--accent-soft); }
.thread-compose { display: flex; gap: var(--space-2); }
.thread-compose input { flex: 1; }

/* ui-add:tline:css — timeline feed skin (copied from kit.css; you own it) */
.tline { list-style: none; margin: 0; padding: 0; display: grid; }
.tline-item { display: grid; grid-template-columns: 12px 1fr; gap: var(--space-2); position: relative; padding-bottom: var(--space-4); }
.tline-item:last-child { padding-bottom: 0; }
.tline-item::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--bg-hover); }
.tline-item:last-child::before { display: none; }
.tline-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 3px; justify-self: center; background: var(--muted); z-index: 1; }
.tline-item[data-tone="ok"] .tline-dot { background: var(--tone-ok); }
.tline-item[data-tone="warn"] .tline-dot { background: var(--tone-warn); }
.tline-item[data-tone="danger"] .tline-dot { background: var(--tone-danger); }
.tline-item[data-tone="accent"] .tline-dot { background: var(--accent); }
.tline-body { display: grid; gap: 2px; min-width: 0; }
.tline-time { font-size: var(--t-3xs); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ui-add:cal:css — month calendar skin (copied from kit.css; you own it) */
.cal { display: grid; gap: var(--space-2); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cal-title { font-size: var(--t-md); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: var(--t-3xs); font-weight: 700; color: var(--muted); text-transform: uppercase; padding: var(--space-1) 0; }
.cal-cell { min-height: 4.5rem; border: 1px solid transparent; border-radius: var(--radius-sm); padding: var(--space-1); display: grid; gap: 4px; align-content: start; }
.cal-cell.cal-today { background: var(--accent-soft); border-color: var(--accent); }
.cal-day { font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.cal-cell.cal-muted .cal-day { opacity: 0.45; }
.cal-chips { display: grid; gap: 2px; min-width: 0; }
.cal-chip { font-size: var(--t-3xs); line-height: 1.3; padding: 0 4px; border-radius: var(--radius-pill); background: var(--bg-hover); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip[data-tone="ok"] { background: var(--tone-ok-soft); color: var(--tone-ok); }
.cal-chip[data-tone="warn"] { background: var(--tone-warn-soft); color: var(--tone-warn); }
.cal-chip[data-tone="danger"] { background: var(--tone-danger-soft); color: var(--tone-danger); }
.cal-chip[data-tone="accent"] { background: var(--tone-accent-soft); color: var(--accent); }
.cal-more { font-size: var(--t-3xs); color: var(--faint); }

/* ui-add:plot:css — time-series plot skin (copied from charts.css + kit.css; you own it) */
.plot-frame { width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--bg); }
.plot-frame > svg { display: block; }
.plot-stats { font-size: var(--t-xs); }

/* Client paints scrub inline `--grid-min: Nrem` (space/dot not allowed by
   the host scrubber) — restate the column minimums the views ask for. */
.kpi-strip > .flow[data-flow="grid"],
#clf-grid-16 > .flow[data-flow="grid"],
#clf-grid-18 > .flow[data-flow="grid"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr));
}
.kpi-strip > .flow[data-flow="grid"] { --grid-min: 11rem; }
#clf-grid-16 > .flow[data-flow="grid"] { --grid-min: 16rem; }
#clf-grid-18 > .flow[data-flow="grid"] { --grid-min: 18rem; }

/* Score trend (pages/ui.rs::trend): bar height = --h (0–100 → 100–1000). */
.account-trend { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 140px; padding: 18px 4px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.12)); }
.account-trend-pass { position: absolute; left: 0; right: 0; bottom: 66.67%; border-top: 1px dashed var(--tone-ok, #3ccf8e); opacity: .7; pointer-events: none; }
.account-trend-bar { position: relative; flex: 1 1 0; max-width: 48px; min-height: 2px; height: calc(var(--h, 0) * 1%); border-radius: 4px 4px 0 0; background: var(--tone-danger, #ff6b6b); opacity: .85; }
.account-trend-bar[data-pass="1"] { background: var(--tone-ok, #3ccf8e); }
.account-trend-bar > b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: var(--t-3xs, 10px); font-weight: 600; color: var(--muted, #8d9ab3); white-space: nowrap; padding-bottom: 2px; }

/* ════════════════════════════════════════════════════════════════════
   Exam platform (pages/home.rs, `vp-` product classes).
   1. Start screen: exam picker, format, modes (app theme tokens).
   2. The sitting: full-screen, light, Pearson-VUE-like exam chrome.
   3. Score report.
   ════════════════════════════════════════════════════════════════════ */
.vp-form { display: contents; margin: 0; }
.vp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vp-h { font-size: var(--t-lg, 1.15rem); font-weight: 650; margin: 0 0 var(--space-2); letter-spacing: -0.01em; }
.vp-h3 { font-size: var(--t-md, 1rem); font-weight: 650; margin: 0 0 var(--space-1); }
.vp-kicker { font-size: var(--t-3xs, .7rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.vp-title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; font-weight: 700; margin: var(--space-1) 0 var(--space-2); letter-spacing: -0.02em; }
.vp-code { font-weight: 500; color: var(--muted); font-size: .6em; vertical-align: middle; border: 1px solid var(--border); border-radius: var(--radius-pill, 999px); padding: .15em .6em; }
.vp-lede { color: var(--muted); max-width: 68ch; margin: 0 0 var(--space-3); line-height: 1.55; }
.vp-fine { color: var(--muted); font-size: var(--t-xs, .8rem); line-height: 1.5; margin: var(--space-2) 0 0; max-width: 80ch; }
.vp-fine a { color: var(--accent); }
.vp-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.vp-stack { display: grid; gap: var(--space-1); }
.vp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Buttons (shared by start screen, sitting and report). */
.vp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 2.5rem; padding: 0 1.1rem; border-radius: 6px; border: 1px solid var(--border-strong, var(--border)); background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s; }
.vp-btn:hover { background: var(--bg-hover); }
.vp-btn:focus-visible, .vp-opt-btn:focus-visible, .vp-strike:focus-visible, .vp-cell:focus-visible, .vp-card:focus-visible, .vp-chip:focus-visible, .vp-tab:focus-visible, .vp-flag:focus-visible { outline: 3px solid #2f6fdc; outline-offset: 2px; }
.vp-btn[disabled] { opacity: .45; cursor: not-allowed; }
.vp-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.vp-btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.vp-btn-lg { min-height: 3rem; padding: 0 1.6rem; font-size: 1.05rem; }
.vp-btn-sm { min-height: 2.1rem; padding: 0 .8rem; font-size: var(--t-sm, .875rem); font-weight: 500; justify-content: flex-start; text-align: left; width: 100%; }
.vp-btn-danger-ghost { color: var(--tone-danger); border-color: color-mix(in srgb, var(--tone-danger) 45%, transparent); }
.vp-chip { min-height: 2rem; padding: 0 .85rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: inherit; font: inherit; font-size: var(--t-sm, .875rem); cursor: pointer; }
.vp-chip.vp-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Exam switcher (Practice / Progress / Account). */
.vp-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.vp-switch-label { font-size: var(--t-xs); color: var(--muted); margin-right: var(--space-1); }

/* 1 · Start screen */
.vp-picker { margin-bottom: var(--space-4); }
.vp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-3); }
.vp-card { position: relative; display: grid; gap: .3rem; text-align: left; padding: var(--space-4); border-radius: var(--radius-lg, 12px); border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; cursor: pointer; transition: border-color .12s, transform .12s; }
.vp-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.vp-card.vp-on { border: 2px solid var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.vp-card-code { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; color: var(--accent); }
.vp-card-title { font-size: 1.05rem; font-weight: 650; line-height: 1.3; }
.vp-card-meta, .vp-card-bank { font-size: var(--t-xs); color: var(--muted); }
.vp-card-sel { position: absolute; top: var(--space-3); right: var(--space-3); font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--accent); border-radius: 999px; padding: .15rem .55rem; }
.vp-format { padding: var(--space-5, 1.5rem); border-radius: var(--radius-lg, 12px); border: 1px solid var(--border); background: var(--card); margin-bottom: var(--space-4); }
.vp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.vp-facts div { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); }
.vp-facts dt { font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vp-facts dd { margin: .2rem 0 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vp-domains, .vp-sections { width: 100%; border-collapse: collapse; font-size: var(--t-sm, .9rem); }
.vp-domains caption { text-align: left; color: var(--muted); font-size: var(--t-xs); padding-bottom: var(--space-2); }
.vp-domains th, .vp-domains td, .vp-sections th, .vp-sections td { padding: .55rem .5rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.vp-domains thead th, .vp-sections thead th { font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.vp-dom-n { display: inline-block; min-width: 5.2rem; color: var(--muted); font-size: var(--t-xs); }
.vp-dom-w { color: var(--muted); font-weight: 400; font-size: var(--t-xs); }
.vp-bar-cell { width: 28%; }
.vp-wbar, .vp-sbar { display: block; height: 8px; border-radius: 4px; width: calc(var(--w, 0) * 1%); background: var(--accent); min-width: 2px; }
.vp-wbar { width: calc(var(--w, 0) * 2.5%); max-width: 100%; }
.vp-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.vp-mode { padding: var(--space-4); border-radius: var(--radius-lg, 12px); border: 1px solid var(--border); background: var(--card); display: grid; gap: var(--space-2); align-content: start; }
.vp-mode p { margin: 0; color: var(--muted); font-size: var(--t-sm, .9rem); line-height: 1.5; }
.vp-mode-main { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--card)), var(--card)); }

/* 2 · The sitting — full screen, light, calm, no app chrome. */
body:has(.vp-sitting) .rail, body:has(.vp-sitting) .topbar, body:has(.vp-sitting) .skip-link { display: none !important; }
body:has(.vp-sitting) { overflow: hidden; }
/* Ancestors (islands use `contain: layout`, pages are size containers) would
   become the containing block of the fixed sitting — lift that while it runs. */
:has(> .vp-sitting), :has(.vp-sitting) { contain: none !important; container-type: normal !important; content-visibility: visible !important; transform: none !important; filter: none !important; }
.vp-sitting {
  --x-bg: #ffffff; --x-ink: #1d2433; --x-muted: #5b6475; --x-line: #d7dce5; --x-soft: #f3f5f9;
  --x-head: #232f3e; --x-head-ink: #ffffff; --x-sel: #e8f0fe; --x-sel-line: #2f6fdc; --x-flag: #c77700; --x-bad: #b42318;
  position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto auto 1fr auto auto;
  background: var(--x-bg); color: var(--x-ink); color-scheme: only light;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.55;
}
.vp-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 1.25rem; background: var(--x-head); color: var(--x-head-ink); }
.vp-bar-title { display: grid; min-width: 0; }
.vp-bar-exam { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-bar-code { font-size: .78rem; opacity: .75; }
.vp-bar-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.vp-bar-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.vp-timer-label { font-size: .75rem; opacity: .7; }
.vp-timer { font-variant-numeric: tabular-nums; font-weight: 700; padding: .2rem .6rem; border-radius: 6px; background: rgba(255,255,255,.12); min-width: 6.2rem; text-align: center; }
.vp-timer.vp-warn { background: #f5b301; color: #1d2433; }
.vp-timer.vp-crit { background: #d92d20; color: #fff; animation: vp-pulse 1.2s ease-in-out infinite; }
@keyframes vp-pulse { 50% { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .vp-timer.vp-crit { animation: none; } }
.vp-subbar { display: flex; align-items: center; gap: 1rem; padding: .5rem 1.25rem; border-bottom: 1px solid var(--x-line); background: var(--x-soft); flex-wrap: wrap; }
.vp-progress { flex: 1 1 8rem; height: 6px; border-radius: 3px; background: var(--x-line); overflow: hidden; max-width: 22rem; }
.vp-progress-fill { display: block; height: 100%; width: calc(var(--p, 0) * 1%); background: var(--x-sel-line); }
.vp-sub-stats { font-size: .85rem; color: var(--x-muted); flex: 1 1 auto; }
.vp-flag { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: 0 .9rem; border-radius: 6px; border: 1px solid var(--x-line); background: #fff; color: var(--x-ink); font: inherit; font-weight: 600; cursor: pointer; }
.vp-flag.vp-on { border-color: var(--x-flag); color: var(--x-flag); background: #fff7e6; }
.vp-body { overflow-y: auto; padding: 1.75rem 1.25rem 2rem; }
.vp-q { max-width: 52rem; margin: 0 auto; }
.vp-qnum { margin: 0 0 .4rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--x-muted); }
.vp-stem { font-size: 1.08rem; margin: 0 0 1rem; white-space: pre-line; }
.vp-instr { margin: 0 0 1rem; font-weight: 700; }
.vp-instr-count { font-weight: 500; color: var(--x-muted); margin-left: .5rem; }
.vp-opts { display: grid; gap: .6rem; }
.vp-opt { display: grid; grid-template-columns: 1fr auto; align-items: stretch; border: 1px solid var(--x-line); border-radius: 8px; background: #fff; transition: border-color .1s, background .1s; }
.vp-opt:hover { border-color: #9fb3d9; }
.vp-opt.vp-on { border-color: var(--x-sel-line); background: var(--x-sel); box-shadow: inset 3px 0 0 var(--x-sel-line); }
.vp-opt-btn { display: grid; grid-template-columns: auto auto 1fr; gap: .7rem; align-items: start; text-align: left; padding: .8rem .9rem; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; border-radius: 8px 0 0 8px; }
.vp-mark { width: 1.15rem; height: 1.15rem; margin-top: .2rem; border-radius: 50%; border: 2px solid #7a8599; background: #fff; position: relative; }
.vp-mark.vp-mark-box { border-radius: 4px; }
.vp-opt.vp-on .vp-mark { border-color: var(--x-sel-line); background: var(--x-sel-line); box-shadow: inset 0 0 0 3px #fff; }
.vp-opt.vp-on .vp-mark.vp-mark-box { box-shadow: none; }
.vp-opt.vp-on .vp-mark.vp-mark-box::after { content: ""; position: absolute; left: .3rem; top: .05rem; width: .3rem; height: .6rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vp-letter { font-weight: 700; color: var(--x-muted); min-width: 1.2rem; }
.vp-opt.vp-struck .vp-opt-text, .vp-opt.vp-struck .vp-letter { text-decoration: line-through; text-decoration-thickness: 2px; color: #9aa3b2; }
.vp-opt.vp-struck { background: #fafbfc; border-style: dashed; }
.vp-strike { width: 2.75rem; border: 0; border-left: 1px solid var(--x-line); background: transparent; color: var(--x-muted); font-size: 1.05rem; cursor: pointer; border-radius: 0 8px 8px 0; }
.vp-strike:hover { background: var(--x-soft); color: var(--x-bad); }
.vp-strike[aria-pressed="true"] { color: var(--x-sel-line); }
.vp-conf { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.25rem; font-size: .85rem; color: var(--x-muted); }
.vp-sitting .vp-chip { border-color: var(--x-line); color: var(--x-ink); }
.vp-sitting .vp-chip.vp-on { background: var(--x-sel-line); border-color: var(--x-sel-line); color: #fff; }
.vp-foot { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center; padding: .7rem 1.25rem; border-top: 1px solid var(--x-line); background: var(--x-soft); }
.vp-foot-l { justify-self: start; } .vp-foot-c { justify-self: center; } .vp-foot-r { justify-self: end; display: flex; gap: .5rem; }
.vp-sitting .vp-btn { border-color: #b8c1d1; color: var(--x-ink); background: #fff; }
.vp-sitting .vp-btn:hover { background: #eef2f8; }
.vp-sitting .vp-btn-primary { background: var(--x-sel-line); border-color: var(--x-sel-line); color: #fff; }
.vp-sitting .vp-btn-primary:hover { background: #2559b8; }
.vp-sitting .vp-btn-danger-ghost { color: var(--x-bad); border-color: #e5b2ad; }
.vp-foot .vp-btn { white-space: nowrap; }
.vp-keys { max-width: none; margin: 0; padding: .3rem 1.25rem .5rem; font-size: .72rem; color: var(--x-muted); background: var(--x-soft); text-align: center; }
/* Review screen */
.vp-review { max-width: 64rem; margin: 0 auto; width: 100%; }
.vp-review .vp-lede { color: var(--x-muted); }
.vp-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.vp-tab { min-height: 2.25rem; padding: 0 .9rem; border-radius: 6px; border: 1px solid var(--x-line); background: #fff; color: var(--x-ink); font: inherit; font-weight: 600; cursor: pointer; }
.vp-tab.vp-on { background: var(--x-head); border-color: var(--x-head); color: #fff; }
.vp-tab-n { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border-radius: 999px; background: rgba(127,127,127,.18); font-size: .78rem; }
.vp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }
.vp-cell { position: relative; display: grid; gap: .1rem; justify-items: start; min-height: 3.6rem; padding: .5rem .7rem; border-radius: 6px; border: 1px solid var(--x-line); background: #fff; color: var(--x-ink); font: inherit; text-align: left; cursor: pointer; }
.vp-cell:hover { border-color: var(--x-sel-line); }
.vp-cell-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.vp-cell-s { font-size: .74rem; color: var(--x-bad); font-weight: 600; }
.vp-cell.vp-incomplete { background: #fff5f4; border-color: #f1c2bd; }
.vp-cell.vp-flagged { box-shadow: inset 0 -3px 0 var(--x-flag); }
.vp-cell-f { position: absolute; top: .35rem; right: .5rem; color: var(--x-flag); }
.vp-empty { color: var(--x-muted); }
/* Dialogs */
.vp-modal { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1rem; background: rgba(17, 24, 39, .55); }
.vp-dlg { width: min(32rem, 100%); background: #fff; color: var(--x-ink); border-radius: 10px; padding: 1.5rem; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.vp-dlg-t { margin: 0 0 .6rem; font-size: 1.25rem; }
.vp-dlg p { margin: 0 0 .8rem; }
.vp-dlg-warn { padding: .6rem .8rem; border-radius: 6px; background: #fff5f4; color: var(--x-bad); }
.vp-dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
@media (max-width: 640px) {
  .vp-bar { padding: .5rem .8rem; } .vp-bar-code, .vp-timer-label { display: none; }
  .vp-subbar, .vp-body, .vp-foot { padding-left: .8rem; padding-right: .8rem; }
  .vp-foot { gap: .4rem; } .vp-foot .vp-btn { padding-left: .7rem; padding-right: .7rem; }
  .vp-sub-stats { display: none; }
  .vp-foot { grid-template-columns: 1fr 1fr; }
  .vp-foot-c { display: none; }
  .vp-keys { display: none; }
  .vp-body { padding-top: 1.1rem; }
}

/* 3 · Score report */
.vp-report { padding: var(--space-5, 1.5rem); border-radius: var(--radius-lg, 12px); border: 1px solid var(--border); background: var(--card); margin-bottom: var(--space-4); }
.vp-report-head { margin-bottom: var(--space-3); }
.vp-verdict { display: grid; grid-template-columns: auto auto 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-3); }
.vp-verdict.vp-pass { background: var(--tone-ok-soft, rgba(60,207,142,.12)); border: 1px solid var(--tone-ok); }
.vp-verdict.vp-fail { background: var(--tone-danger-soft, rgba(255,107,107,.12)); border: 1px solid var(--tone-danger); }
.vp-verdict p { margin: 0; }
.vp-verdict-word { font-size: 1.6rem; font-weight: 800; letter-spacing: .1em; }
.vp-verdict.vp-pass .vp-verdict-word { color: var(--tone-ok); }
.vp-verdict.vp-fail .vp-verdict-word { color: var(--tone-danger); }
.vp-score { font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.vp-score-of { color: var(--muted); margin-left: .25rem; }
.vp-scale { position: relative; height: 12px; border-radius: 6px; background: var(--bg-hover); margin: var(--space-5, 1.6rem) 0 var(--space-6, 2rem); }
.vp-scale-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w, 0) * 1%); border-radius: 6px; }
.vp-scale-fill.vp-pass { background: var(--tone-ok); } .vp-scale-fill.vp-fail { background: var(--tone-danger); }
.vp-scale-pass { position: absolute; top: -6px; bottom: -6px; left: calc(var(--w, 0) * 1%); border-left: 2px dashed var(--text, #fff); }
.vp-scale-pass span { position: absolute; top: -1.4rem; left: -1.6rem; font-size: var(--t-3xs); color: var(--muted); white-space: nowrap; }
.vp-scale-lo, .vp-scale-hi { position: absolute; top: 1rem; font-size: var(--t-3xs); color: var(--muted); }
.vp-scale-lo { left: 0; } .vp-scale-hi { right: 0; }
.vp-sec { font-weight: 650; white-space: nowrap; }
.vp-sec.vp-meets { color: var(--tone-ok); } .vp-sec.vp-needs { color: var(--tone-warn); }
.vp-sbar.vp-meets { background: var(--tone-ok); } .vp-sbar.vp-needs { background: var(--tone-warn); }
.vp-report-actions { margin-bottom: var(--space-4); }
.vp-report-actions .vp-fine { margin-bottom: var(--space-2); }
@media (max-width: 640px) {
  .vp-verdict { grid-template-columns: auto 1fr; } .vp-verdict p { grid-column: 1 / -1; }
  .vp-bar-cell { display: none; } .vp-dom-n { display: block; }
}

/* ── Landing + exam catalog (src/pages/catalog.rs) ───────────────────── */
.vp-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); margin-bottom: var(--space-4); border-radius: var(--radius-lg, 12px); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 22%, var(--card)) 0%, var(--card) 60%); }
.vp-hero-t { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); line-height: 1.1; font-weight: 750; letter-spacing: -0.025em; margin: var(--space-2) 0; }
.vp-hero-p { color: var(--muted); max-width: 60ch; margin: 0 0 var(--space-3); line-height: 1.55; }
.vp-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(6rem, 1fr)); gap: var(--space-2); margin: 0; }
.vp-hero-stats div { padding: var(--space-3); border-radius: var(--radius); background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--border); text-align: center; }
.vp-hero-stats dt { font-size: var(--t-3xs, .7rem); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vp-hero-stats dd { margin: .15rem 0 0; font-size: 1.6rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.vp-conts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.vp-cont { padding: var(--space-4); border-radius: var(--radius-lg, 12px); border: 1px solid var(--border); background: var(--card); display: grid; gap: var(--space-1); }
.vp-cont .vp-h3 { margin: 0; font-size: 1.05rem; }
.vp-cont .vp-row { margin-top: var(--space-2); }
.vp-cont .vp-btn-sm { width: auto; }
.vp-pass { color: var(--tone-ok, #2fbf71); font-weight: 700; }
.vp-fail { color: var(--tone-danger, #e5484d); font-weight: 700; }
.vp-cat { margin-bottom: var(--space-4); }
.vp-cat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.vp-cat-head .vp-h { margin: 0; }
.vp-cat-head .vp-fine { margin: 0; }
.vp-link-btn { background: none; border: 0; padding: .25rem 0; color: var(--accent); font: inherit; font-size: var(--t-sm, .875rem); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.vp-link-btn:focus-visible, .vp-xcard:focus-visible, .vp-search-in:focus-visible { outline: 3px solid #2f6fdc; outline-offset: 2px; }
.vp-search { display: flex; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.vp-search .vp-form { display: contents; }
.vp-search-in { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: 0 1rem; border-radius: 8px; border: 1px solid var(--border-strong, var(--border)); background: var(--bg); color: inherit; font: inherit; font-size: 1rem; }
.vp-filters { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.vp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.vp-chips .vp-form { display: inline-flex; }
.vp-chips-label { font-size: var(--t-xs); color: var(--muted); margin-right: var(--space-1); }
.vp-chip-n { display: inline-block; margin-left: .4rem; padding: 0 .4rem; border-radius: 999px; background: rgba(127,127,127,.2); font-size: .75rem; font-variant-numeric: tabular-nums; }
.vp-chip.vp-on .vp-chip-n { background: rgba(255,255,255,.25); }
.vp-xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: var(--space-3); }
.vp-xgrid > .vp-form { display: flex; }
.vp-xcard { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: .45rem; text-align: left; padding: var(--space-4); border-radius: var(--radius-lg, 12px); border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.vp-xcard:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.vp-xcard.vp-on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.vp-xcard.vp-soon { background: color-mix(in srgb, var(--card) 70%, transparent); border-style: dashed; }
.vp-xcard.vp-soon .vp-xtitle, .vp-xcard.vp-soon .vp-xcode { opacity: .8; }
.vp-xtop { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.vp-xcode { font-size: var(--t-xs, .8rem); font-weight: 800; letter-spacing: .06em; color: var(--accent); margin-right: auto; }
.vp-lvl, .vp-pill { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--border); }
.vp-lvl-f { color: #3fb68b; border-color: color-mix(in srgb, #3fb68b 45%, transparent); }
.vp-lvl-a { color: #4c9aff; border-color: color-mix(in srgb, #4c9aff 45%, transparent); }
.vp-lvl-p { color: #b48cff; border-color: color-mix(in srgb, #b48cff 45%, transparent); }
.vp-lvl-s { color: #f5a524; border-color: color-mix(in srgb, #f5a524 45%, transparent); }
.vp-pill { color: var(--muted); background: rgba(127,127,127,.12); }
.vp-xtitle { font-size: 1.05rem; font-weight: 650; line-height: 1.3; }
.vp-xdesc { font-size: var(--t-sm, .875rem); color: var(--muted); line-height: 1.45; }
.vp-xmeta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: var(--t-xs, .8rem); font-variant-numeric: tabular-nums; }
.vp-xbank { font-size: var(--t-xs, .8rem); color: var(--muted); }
.vp-xme { display: grid; gap: .3rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--border); font-size: var(--t-xs, .8rem); }
.vp-xme-empty { color: var(--muted); }
.vp-xme-v { font-weight: 700; }
.vp-meter { display: block; height: 6px; border-radius: 3px; background: rgba(127,127,127,.22); overflow: hidden; }
.vp-meter-lg { height: 10px; border-radius: 5px; width: min(22rem, 100%); }
.vp-meter-fill { display: block; height: 100%; width: calc(var(--w, 0) * 1%); background: var(--muted); }
.vp-meter-fill.vp-ready { background: var(--tone-ok, #2fbf71); }
.vp-meter-fill.vp-almost { background: #f5b301; }
.vp-meter-fill.vp-notyet { background: var(--tone-danger, #e5484d); }
.vp-xme-v.vp-ready, .vp-mine-v.vp-ready { color: var(--tone-ok, #2fbf71); }
.vp-xme-v.vp-almost, .vp-mine-v.vp-almost { color: #f5b301; }
.vp-xme-v.vp-notyet, .vp-mine-v.vp-notyet { color: var(--tone-danger, #e5484d); }
.vp-empty-cat { padding: var(--space-5, 1.5rem); text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-lg, 12px); color: var(--muted); }
.vp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--t-sm, .875rem); color: var(--muted); }
.vp-mine { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius-lg, 12px); border: 1px solid var(--border); background: var(--card); }
.vp-mine-v { font-size: 1.25rem; font-weight: 750; margin: .2rem 0 .5rem; }
.vp-mine .vp-btn-sm { width: auto; }
.vp-facts-sm { margin: 0; }
.vp-facts-sm dd { font-size: 1.1rem; }
.vp-callout-soon { padding: var(--space-3); border-radius: var(--radius); border: 1px dashed var(--border); background: rgba(127,127,127,.08); max-width: 70ch; }
@media (max-width: 720px) {
  .vp-hero { grid-template-columns: 1fr; }
  .vp-hero-stats dd { font-size: 1.25rem; }
  .vp-mine { grid-template-columns: 1fr; }
  .vp-search .vp-btn { padding: 0 .8rem; }
  .vp-sorts { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
}
@media (prefers-reduced-motion: reduce) { .vp-xcard, .vp-xcard:hover { transition: none; transform: none; } }

/* ── Account v2: summary cards, devices, transfer QR, confirms ── */
.vp-btn-ghost { border-color: var(--border); font-weight: 500; }
.vp-btn-danger { background: var(--tone-danger); border-color: var(--tone-danger); color: #fff; }
.vp-btn-danger:hover { background: var(--tone-danger); filter: brightness(1.08); }
.vp-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.vp-row .vp-form { display: contents; }
.vp-secret { padding: var(--space-4); border-radius: var(--radius-lg, 12px); border: 2px solid var(--tone-warn, #c58a00); background: color-mix(in srgb, var(--tone-warn, #c58a00) 10%, transparent); display: grid; gap: var(--space-2); }
.vp-secret h3 { margin: 0; font-size: 1.05rem; }
.vp-secret p { margin: 0; max-width: 70ch; }
.vp-rcode { font: 700 clamp(1.25rem, 5vw, 1.8rem)/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; user-select: all; word-break: break-all; }
.vp-agrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-3); }
.vp-acard { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card); align-content: start; }
.vp-acard header { display: grid; gap: .1rem; }
.vp-acard header b { font-size: 1.1rem; }
.vp-acard header span { color: var(--muted); font-size: var(--t-sm, .875rem); }
.vp-acard .vp-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
.vp-acard .vp-facts div { padding: .35rem .4rem; }
.vp-acard .vp-facts dd { font-size: 1rem; }
.vp-devices { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.vp-device { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); }
.vp-device > div { display: grid; gap: .15rem; min-width: 0; }
.vp-device small { color: var(--muted); font-size: var(--t-xs); }
.vp-device.vp-current { border-color: var(--accent); }
.vp-device .vp-pill { justify-self: start; }
.vp-method { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.vp-method > div { display: grid; gap: .15rem; max-width: 60ch; }
.vp-method small { color: var(--muted); font-size: var(--t-xs); }
.vp-confirm { margin: var(--space-2) 0; padding: var(--space-3); border-radius: var(--radius); border: 2px solid var(--tone-danger); background: color-mix(in srgb, var(--tone-danger) 8%, transparent); display: grid; gap: var(--space-2); }
.vp-confirm p { margin: 0; }
.vp-transfer { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.vp-transfer p { margin: 0 0 var(--space-2); max-width: 60ch; }
.vp-qr-wrap { background: #fff; padding: 12px; border-radius: 8px; border: 1px solid var(--border); line-height: 0; }
.vp-qr { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(15rem, 70vw); aspect-ratio: 1; }
.vp-qr span { background: #fff; }
.vp-qr span.vp-q1 { background: #000; }
.vp-link-text code { display: block; padding: .5rem .6rem; border-radius: 6px; background: rgba(127,127,127,.12); font-size: var(--t-xs); word-break: break-all; }
@media (max-width: 720px) {
  .vp-transfer { grid-template-columns: 1fr; justify-items: center; }
  .vp-device, .vp-method { flex-direction: column; align-items: stretch; }
  .vp-acard .vp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ════════════════════════════════════════════════════════════════════
   Site design system — home, certifications, exam pages, footer
   (src/pages/home.rs, certs.rs, catalog.rs, ui.rs::site_footer).
   One max-width column, a type scale, cards, top nav + mobile bottom nav.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --page-max: 74rem;
  --fs-display: clamp(2rem, 1.35rem + 2.8vw, 3.35rem);
  --fs-h1: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem);
  --fs-h2: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
  --sec-gap: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  --seg-1: #4c9aff; --seg-2: #3fb68b; --seg-3: #b48cff; --seg-4: #f5a524; --seg-5: #ef6b8a;
}

/* Top nav: brand · links · theme in one bar (desktop). */
html[data-nav-at="top"] .shell { grid-template: "topbar" var(--shell-h) "main" minmax(0, 1fr) / minmax(0, 1fr); }
html[data-nav-at="top"] .rail { grid-area: topbar; justify-self: center; align-self: stretch; position: relative; z-index: 70; opacity: 1; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0; }
html[data-nav-at="top"] .rail-nav { padding: 0 var(--space-2); gap: var(--space-1); align-items: center; }
html[data-nav-at="top"] .rail-spacer { display: none; }
html[data-nav-at="top"] .rail-item { color: var(--muted); opacity: 1; min-height: 2.4rem; padding: 0 .9rem; border-radius: 999px; gap: .45rem; font-weight: 600; font-size: var(--t-sm, .9rem); }
html[data-nav-at="top"] .rail-item:hover { color: var(--text); background: var(--bg-hover); }
html[data-nav-at="top"] .rail-item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
html[data-nav-at="top"] .rail-item .icon { width: 1rem; height: 1rem; }
.rail-item[data-page="exam"] { display: none !important; }
.rail-item:focus-visible, .topbar-brand:focus-visible, .vp-link:focus-visible, .vp-xcard:focus-visible, .vp-dash-row:focus-visible, .vp-crumbs a:focus-visible, .vp-footer a:focus-visible { outline: 3px solid #2f6fdc; outline-offset: 2px; }
.topbar-brand { gap: .55rem; text-decoration: none; }
.topbar-brand .brand-mark { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 800; }
.topbar-brand-text { font-weight: 750; letter-spacing: -.01em; }
.topbar-brand-sub { color: var(--muted); font-size: var(--t-xs, .8rem); }
@media (max-width: 960px) { .topbar-brand-sub { display: none; } }

/* Phones: the nav becomes a bottom tab bar with labels. */
@media (max-width: 720px) {
  html[data-nav-at="top"] .shell { grid-template: "topbar" var(--shell-h) "main" minmax(0, 1fr) "rail" auto / minmax(0, 1fr); }
  html[data-nav-at="top"] .rail { grid-area: rail; justify-self: stretch; background: var(--card) !important; border-top: 1px solid var(--border) !important; padding-bottom: env(safe-area-inset-bottom); }
  html[data-nav-at="top"] .rail-nav { justify-content: space-around; padding: .25rem .25rem; }
  html[data-nav-at="top"] .rail-item { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; min-height: 3.25rem; padding: .3rem .2rem; border-radius: 10px; font-size: .72rem; }
  html[data-nav-at="top"] .rail-item .rail-label { display: block !important; }
  html[data-nav-at="top"] .rail-item .icon { width: 1.25rem; height: 1.25rem; }
  .topbar-brand-text { display: inline !important; }
}
body:has(.vp-sitting) .rail { display: none !important; }

/* One column, centered. */
[data-island="home"], [data-island="certs"], [data-island="stage"], .vp-pr, .vp-st, [data-island="account"], .vp-footer { width: 100%; max-width: var(--page-max); margin-inline: auto; }
/* Perf v20: Practice / Progress are split into islands (pr-*, st-*) that
   generate no box — the wrapper grid, the card grid and the sticky session
   bar lay out exactly as before the split. */
[data-island^="pr-"], [data-island^="st-"] { display: contents; }
[data-island="home"], [data-island="certs"] { padding-block: var(--space-4) 0; }

/* Type + shared bits. */
.vp-sec-t { font-size: var(--fs-h2); font-weight: 750; letter-spacing: -.02em; margin: 0 0 var(--space-3); }
.vp-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.vp-sec-head .vp-sec-t { margin: 0; }
.vp-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.vp-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.vp-box { padding: clamp(1rem, .8rem + 1vw, 1.5rem); border-radius: var(--radius-lg, 12px); border: 1px solid var(--border); background: var(--card); min-width: 0; }
.vp-box > .vp-h { margin-top: 0; }
.vp-pill-ok { color: var(--tone-ok, #2fbf71); border-color: color-mix(in srgb, var(--tone-ok, #2fbf71) 45%, transparent); background: color-mix(in srgb, var(--tone-ok, #2fbf71) 10%, transparent); }
.vp-btn-block { width: 100%; }
.vp-crumbs { margin-bottom: var(--space-3); }
.vp-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; font-size: var(--t-sm, .875rem); color: var(--muted); }
.vp-crumbs li + li::before { content: "/"; margin-right: .35rem; opacity: .5; }
.vp-crumbs a { color: inherit; text-decoration: none; }
.vp-crumbs a:hover { color: var(--accent); text-decoration: underline; }
.vp-crumbs [aria-current] { color: var(--text); font-weight: 600; }
a.vp-xcard { text-decoration: none; }
.vp-seg-1 { --seg: var(--seg-1); } .vp-seg-2 { --seg: var(--seg-2); } .vp-seg-3 { --seg: var(--seg-3); } .vp-seg-4 { --seg: var(--seg-4); } .vp-seg-5 { --seg: var(--seg-5); }

/* Home · hero. */
.vp-hero2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); border-radius: 20px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--accent) 20%, var(--card)) 0%, var(--card) 65%); }
.vp-hero2-t { font-size: var(--fs-display); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; margin: var(--space-2) 0 var(--space-3); max-width: 16ch; }
.vp-hero2-p { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--muted); max-width: 56ch; line-height: 1.6; margin: 0 0 var(--space-4); }
.vp-hero2-cta .vp-btn-lg { min-height: 3.1rem; }
.vp-hero-who { margin: var(--space-3) 0 0; font-size: var(--t-sm, .9rem); color: var(--muted); }
.vp-hero2-art { position: relative; min-width: 0; }

/* Home · facts strip, steps, features, dashboard, FAQ. */
.vp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: var(--space-4) 0 var(--sec-gap); border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--border); }
.vp-stats > div { display: grid; gap: .2rem; padding: var(--space-4); background: var(--card); }
.vp-stats strong { font-size: clamp(1.15rem, 1rem + .9vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vp-stats span { color: var(--muted); font-size: var(--t-sm, .875rem); }
.vp-how, .vp-featured, .vp-dash, .vp-feats, .vp-faq, .vp-related, .vp-modes-sec { margin-bottom: var(--sec-gap); }
.vp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.vp-steps li { position: relative; padding: var(--space-5, 1.5rem) var(--space-4) var(--space-4); border-radius: 14px; border: 1px solid var(--border); background: var(--card); }
.vp-steps p, .vp-feat-grid p, .vp-faq dd, .vp-out p { margin: 0; color: var(--muted); line-height: 1.6; font-size: var(--t-sm, .925rem); }
.vp-step-n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: var(--space-2); border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 800; }
.vp-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-4) var(--space-5, 1.5rem); }
.vp-feat-grid article { padding-left: var(--space-3); border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.vp-dash-list { display: grid; gap: var(--space-2); }
.vp-dash-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr) minmax(10rem, 16rem) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: inherit; text-decoration: none; transition: border-color .12s; }
.vp-dash-row:hover { border-color: var(--accent); }
.vp-dash-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-dash-r { display: grid; gap: .25rem; font-size: var(--t-xs, .8rem); }
.vp-dash-last { color: var(--muted); font-size: var(--t-xs, .8rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-faq dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--space-3); margin: 0; }
.vp-faq dl > div { padding: var(--space-4); border-radius: 12px; border: 1px solid var(--border); background: var(--card); }
.vp-faq dt { font-weight: 700; margin-bottom: var(--space-1); }

/* Footer. */
.vp-footer { margin-top: var(--sec-gap); padding: var(--space-5, 1.5rem) 0 calc(var(--space-5, 1.5rem) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--t-sm, .875rem); }
.vp-footer-cols { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr; gap: var(--space-4) var(--space-5, 1.5rem); }
.vp-footer p { margin: .3rem 0 0; line-height: 1.55; max-width: 48ch; }
.vp-footer-brand { color: var(--text); }
.vp-footer-h { font-size: var(--t-sm, .875rem); font-weight: 700; color: var(--text); margin: 0; }
.vp-footer ul { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .25rem; }
.vp-footer a { color: inherit; }
.vp-footer a:hover { color: var(--accent); }
.vp-disclaimer { margin-top: var(--space-4) !important; padding-top: var(--space-3); border-top: 1px dashed var(--border); font-size: var(--t-xs, .8rem); max-width: none !important; }

/* Certifications · catalog + exam page. */
.vp-page-head { margin-bottom: var(--space-4); }
.vp-page-head .vp-title, .vp-cert-head .vp-title { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.03em; }
.vp-cert-head { padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); margin-bottom: var(--space-3); border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--accent) 16%, var(--card)) 0%, var(--card) 60%); }
.vp-cert-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.vp-cert-badges .vp-xcode { margin-right: 0; font-size: .9rem; }
.vp-cert-head .vp-lede { font-size: 1.05rem; margin-bottom: var(--space-3); }
.vp-cert-cta .vp-btn-sm { width: auto; }
.vp-factbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 1px; margin: 0 0 var(--space-4); border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--border); }
.vp-factbar > div { padding: var(--space-3) var(--space-4); background: var(--card); }
.vp-factbar dt { font-size: var(--t-3xs, .7rem); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vp-factbar dd { margin: .2rem 0 0; font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vp-factbar small { font-size: .8rem; color: var(--muted); font-weight: 600; }
.vp-cert-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-3); margin-bottom: var(--sec-gap); align-items: start; }
.vp-stackbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: var(--space-3) 0; gap: 2px; }
.vp-seg { display: block; height: 100%; flex: 0 0 calc(var(--w, 0) * 1% - 2px); background: var(--seg); }
.vp-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.vp-legend li { display: grid; grid-template-columns: auto 2rem minmax(0, 1fr) 3rem minmax(4rem, 7rem); align-items: center; gap: .5rem; font-size: var(--t-sm, .9rem); }
.vp-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--seg); flex: none; }
.vp-leg-n { font-weight: 700; color: var(--muted); font-size: var(--t-xs, .8rem); }
.vp-leg-w { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.vp-leg-bar { display: block; height: 6px; border-radius: 3px; background: rgba(127,127,127,.18); }
.vp-leg-bar .vp-wbar { height: 6px; background: var(--seg); width: calc(var(--w, 0) * 2.5%); }
.vp-leg-c { grid-column: 3 / -1; margin-top: -.35rem; font-size: var(--t-xs, .75rem); color: var(--muted); }
.vp-prog-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.vp-prog-top .vp-h { margin: 0; }
.vp-prog-top .vp-btn-sm { width: auto; }
.vp-prog-grid { display: grid; gap: var(--space-3); }
.vp-prog-empty p { margin: 0; color: var(--muted); line-height: 1.6; }
.vp-prog-empty a { color: var(--accent); }
.vp-weak ul { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .3rem; }
.vp-weak li { display: flex; justify-content: space-between; gap: var(--space-2); padding: .45rem .6rem; border-radius: 8px; background: rgba(127,127,127,.1); font-size: var(--t-sm, .875rem); }
.vp-modegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); }
.vp-modegrid .vp-mode { align-content: start; grid-template-rows: auto auto 1fr auto; }
.vp-modegrid .vp-mode > .vp-btn, .vp-modegrid .vp-mode > .vp-form .vp-btn { justify-self: start; }
.vp-modegrid .vp-mode-main { grid-column: span 2; }
.vp-mode-ico { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .4rem; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 800; font-size: .85rem; justify-self: start; }
.vp-out { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-3); }
.vp-out li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.vp-out li:last-child { border-bottom: 0; }
.vp-out-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.vp-out-h .vp-h3 { margin: 0; flex: 1; }
.vp-out-w { font-weight: 800; font-variant-numeric: tabular-nums; }
.vp-outline .vp-btn-sm, .vp-soon-box .vp-btn-sm { width: auto; }
/* Sample questions (exam pages): exam-like options, answer behind a summary. */
.vp-samples { display: grid; gap: .9rem; }
.vp-sample { display: grid; gap: .55rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--r-md, 10px); background: var(--bg-elev); }
.vp-sample-h { display: flex; align-items: center; gap: .5rem; }
.vp-sample-k { font-size: var(--fs-2xs, .6875rem); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.vp-sample-stem { margin: 0; font-weight: 600; }
.vp-sample-opts { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.vp-sample-opts li { display: flex; gap: .55rem; align-items: baseline; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: var(--r-sm, 8px); }
.vp-sample-opts b { color: var(--accent); font-weight: 700; min-width: 1ch; }
.vp-sample-a summary { cursor: pointer; color: var(--accent); font-weight: 650; font-size: var(--fs-sm, .875rem); }
.vp-sample-a p { margin: .45rem 0 0; color: var(--muted); line-height: 1.55; }
.vp-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: 12px; border: 1px solid color-mix(in srgb, #f5b301 55%, var(--border)); background: color-mix(in srgb, #f5b301 12%, var(--card)); }
.vp-banner .vp-btn-sm { width: auto; margin-left: auto; }
.vp-soon-box { margin-bottom: var(--sec-gap); display: grid; gap: var(--space-2); justify-items: start; border-style: dashed; }
.vp-soon-box p { margin: 0; color: var(--muted); max-width: 70ch; line-height: 1.6; }
.vp-soon-box .vp-h { margin: 0; }
.vp-missing, .vp-idle { margin-bottom: var(--sec-gap); }
.vp-idle { padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border-radius: 18px; border: 1px solid var(--border); background: var(--card); }

@media (max-width: 960px) {
  .vp-hero2 { grid-template-columns: 1fr; }
  .vp-hero2-art { min-height: 0; max-width: 34rem; }
  .vp-cert-grid { grid-template-columns: 1fr; }
  .vp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  [data-island="home"], [data-island="certs"] { padding-top: var(--space-2); }
  .vp-hero2 { padding: 1.25rem; border-radius: 16px; }
  .vp-hero2-cta .vp-btn { width: 100%; }
  .vp-steps { grid-template-columns: 1fr; }
  .vp-dash-row { grid-template-columns: 5rem minmax(0, 1fr); }
  .vp-dash-r, .vp-dash-last { grid-column: 1 / -1; }
  .vp-modegrid .vp-mode-main { grid-column: auto; }
  .vp-legend li { grid-template-columns: auto 2rem minmax(0, 1fr) 3rem; }
  .vp-leg-bar { display: none; }
  .vp-footer-cols { grid-template-columns: 1fr; }
  .vp-factbar dd { font-size: 1.15rem; }
  .vp-cert-cta .vp-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .vp-dash-row { transition: none; transform: none; } }
html[data-nav-at="top"] .rail-item::before, html[data-nav-at="top"] .rail-item::after { display: none !important; }
.vp-prog .vp-facts-sm { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.vp-prog .vp-facts-sm div { padding: .5rem .6rem; }
@media (max-width: 1100px) { .vp-prog .vp-facts-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Practice v2: builder, dashboard, session, summary, flashcards, notebook ── */
.vp-pr { display: grid; gap: var(--space-4, 1rem); max-width: 72rem; margin: 0 auto; padding-bottom: var(--space-5, 1.5rem); }
.vp-pr .vp-page-head { margin-bottom: 0; }
.vp-pr .vp-keys { background: transparent; color: var(--muted); padding: 0; text-align: left; }
.vp-pr .vp-empty { color: var(--muted); padding: var(--space-5, 1.5rem); border: 1px dashed var(--border); border-radius: var(--radius-lg, 12px); text-align: center; }
.vp-ptabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.vp-ptab { display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1rem; color: var(--muted); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.vp-ptab:hover { color: var(--text); }
.vp-ptab.vp-on { color: var(--text); border-bottom-color: var(--accent); }
.vp-ptab-s { display: none; }
/* Narrow screens: the three sections become one segmented control that
   always fits (no clipped "Mistake no…", no sideways scroll). */
@media (max-width: 640px) {
  .vp-ptabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft, rgba(127,127,127,.08)); overflow: visible; }
  .vp-ptab { justify-content: center; gap: .3rem; min-height: 2.5rem; padding: .35rem .4rem; margin: 0; border: 0; border-radius: 9px; font-size: .86rem; min-width: 0; }
  .vp-ptab-l { overflow: hidden; text-overflow: ellipsis; }
  .vp-ptab-x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vp-ptab-s { display: inline; }
  .vp-ptab.vp-on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.18), inset 0 0 0 1px var(--border); }
  .vp-ptab .vp-chip-n { margin-left: 0; }
}
.vp-live { color: var(--tone-ok, #2fbf71); font-size: .7rem; }
.vp-chip-sm { min-height: 1.6rem; padding: 0 .6rem; font-size: .78rem; }
.vp-dim { opacity: .55; }
.vp-btn.vp-on { border-color: var(--accent); color: var(--accent); }

.vp-pdash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3, .75rem); }
.vp-pstat { display: grid; gap: .35rem; align-content: start; padding: var(--space-4, 1rem); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card); min-width: 0; }
.vp-pstat-due { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.vp-pstat .vp-btn { justify-self: start; margin-top: .25rem; }
.vp-pbig { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vp-pbig small { font-size: .95rem; color: var(--muted); font-weight: 600; }
.vp-goal { margin-top: .25rem; }

.vp-presets .vp-h { margin: 0 0 .6rem; }
.vp-pre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: var(--space-3, .75rem); }
.vp-pre { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7rem; row-gap: .2rem; text-align: left; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card); color: inherit; font: inherit; cursor: pointer; transition: border-color .12s, transform .12s; width: 100%; }
.vp-pre:hover { border-color: var(--accent); transform: translateY(-1px); }
.vp-pre:focus-visible, .vp-popt:focus-visible, .vp-topic:focus-visible, .vp-grade:focus-visible, .vp-ptab:focus-visible { outline: 3px solid #2f6fdc; outline-offset: 2px; }
.vp-pre-main { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
.vp-pre-ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 8px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 1.1rem; }
.vp-pre-t { font-weight: 700; }
.vp-pre-d { color: var(--muted); font-size: var(--t-xs, .8rem); line-height: 1.4; }

.vp-builder { display: grid; gap: .85rem; }
.vp-b-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; }
.vp-b-head .vp-h { margin: 0; }
.vp-b-row { display: grid; grid-template-columns: 7rem 1fr; gap: .75rem; align-items: start; }
.vp-b-l { font-size: var(--t-xs, .8rem); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: .45rem; }
.vp-custom { display: inline-flex !important; gap: .35rem; align-items: center; }
.vp-num-in { width: 4.5rem; min-height: 2rem; padding: 0 .5rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: inherit; font: inherit; text-align: center; }
.vp-num-in.vp-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.vp-b-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.vp-live-count { margin: 0; color: var(--muted); }
.vp-live-count b { color: var(--text); font-variant-numeric: tabular-nums; }

.vp-tpicker { display: grid; gap: .75rem; padding: .9rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--card) 70%, transparent); max-height: 32rem; overflow: auto; }
.vp-tpicker .vp-search { margin: 0; }
.vp-tdom .vp-h3 { margin: .25rem 0 .5rem; font-size: .95rem; }
.vp-tgroup { margin-bottom: .6rem; }
.vp-tgroup-h { display: flex; gap: .75rem; align-items: baseline; font-size: var(--t-xs, .8rem); font-weight: 700; color: var(--muted); margin-bottom: .3rem; }
.vp-topics { display: flex; flex-wrap: wrap; gap: .4rem; }
.vp-topic { display: inline-flex; align-items: center; gap: .45rem; min-height: 2rem; padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: inherit; font: inherit; font-size: .84rem; cursor: pointer; text-align: left; }
.vp-topic.vp-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.vp-topic-m { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.vp-tdot { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; flex: none; vertical-align: middle; margin: 0 .2rem 0 .5rem; }
.vp-topic .vp-tdot { margin: 0; }
.vp-legend-m { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin: 0; }
.vp-m0 { background: rgba(127,127,127,.25); }
.vp-m1 { background: #e5484d; }
.vp-m2 { background: #f5b301; }
.vp-m3 { background: var(--tone-ok, #2fbf71); }
.vp-tdot.vp-hm-due { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }

.vp-heat { display: grid; gap: .6rem; }
.vp-heat .vp-fine { margin-top: 0; }
.vp-hm-row { display: grid; grid-template-columns: 14rem 1fr auto; gap: .9rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--border); }
.vp-hm-l { display: grid; gap: .1rem; font-size: .9rem; }
.vp-hm-l .vp-fine { margin: 0; }
.vp-hm-cells { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.vp-hm-c { width: 16px; height: 16px; border-radius: 4px; }
.vp-hm-c.vp-hm-due { box-shadow: 0 0 0 2px var(--accent); }
.vp-hm-task { font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; margin: 0 2px 0 6px; }
.vp-hm-task:first-child { margin-left: 0; }

.vp-psession { display: grid; gap: var(--space-3, .75rem); }
.vp-psbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .65rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.vp-psbar-l { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.vp-pmode { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-pprog { flex: 1 1 10rem; max-width: none; background: rgba(127,127,127,.2); }
.vp-pprog .vp-progress-fill { background: var(--accent); transition: width .25s; }
.vp-psbar-r { display: flex; align-items: center; gap: .8rem; font-variant-numeric: tabular-nums; font-size: .88rem; }
.vp-pstat-i { white-space: nowrap; color: var(--muted); }
.vp-streak { color: var(--text); font-weight: 700; }
.vp-psbar .vp-timer { font-weight: 700; }

.vp-pq, .vp-fc { display: grid; gap: .9rem; padding: clamp(1rem, .7rem + 1.2vw, 1.75rem); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card); }
.vp-pq-meta { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; font-size: .82rem; }
.vp-pq-topic { font-weight: 600; }
.vp-pq-why { color: var(--accent); font-weight: 600; }
.vp-pq .vp-stem { font-size: 1.12rem; line-height: 1.55; margin: 0; }
.vp-pq .vp-instr { margin: 0; color: var(--accent); }
.vp-popts { display: grid; gap: .55rem; }
.vp-popt { display: grid; grid-template-columns: 2rem 1fr auto; gap: .75rem; align-items: start; width: 100%; text-align: left; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
.vp-popt:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.vp-po-k { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 6px; border: 1px solid var(--border); font-weight: 700; font-size: .85rem; }
.vp-po-t { display: grid; gap: .3rem; padding-top: .15rem; line-height: 1.45; }
.vp-po-note { font-size: .84rem; color: var(--muted); }
.vp-po-mark { font-weight: 800; font-size: 1.05rem; padding-top: .1rem; }
.vp-popt.vp-po-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.vp-popt.vp-po-on .vp-po-k { background: var(--accent); border-color: var(--accent); color: #fff; }
.vp-popt.vp-po-ok { border-color: var(--tone-ok, #2fbf71); background: color-mix(in srgb, var(--tone-ok, #2fbf71) 11%, transparent); }
.vp-popt.vp-po-ok .vp-po-k { background: var(--tone-ok, #2fbf71); border-color: var(--tone-ok, #2fbf71); color: #fff; }
.vp-popt.vp-po-ok .vp-po-mark { color: var(--tone-ok, #2fbf71); }
.vp-popt.vp-po-bad { border-color: var(--tone-danger, #e5484d); background: color-mix(in srgb, var(--tone-danger, #e5484d) 10%, transparent); }
.vp-popt.vp-po-bad .vp-po-k { background: var(--tone-danger, #e5484d); border-color: var(--tone-danger, #e5484d); color: #fff; }
.vp-popt.vp-po-bad .vp-po-mark { color: var(--tone-danger, #e5484d); }
.vp-popt[aria-disabled="true"] { cursor: default; }
.vp-pconf { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding: .6rem .75rem; border-radius: 10px; background: rgba(127,127,127,.08); }
.vp-pconf .vp-b-l { padding: 0 .3rem 0 0; }
.vp-pconf .vp-fine { margin: 0 0 0 .4rem; flex: 1 1 14rem; }
.vp-fb { display: grid; gap: .45rem; padding: .9rem 1rem; border-radius: 10px; border: 1px solid var(--border); }
.vp-fb p { margin: 0; }
.vp-fb-ok { border-color: var(--tone-ok, #2fbf71); background: color-mix(in srgb, var(--tone-ok, #2fbf71) 9%, transparent); }
.vp-fb-bad { border-color: var(--tone-danger, #e5484d); background: color-mix(in srgb, var(--tone-danger, #e5484d) 8%, transparent); }
.vp-fb-v { font-weight: 800; font-size: 1.05rem; }
.vp-fb-ok .vp-fb-v { color: var(--tone-ok, #2fbf71); }
.vp-fb-bad .vp-fb-v { color: var(--tone-danger, #e5484d); }
.vp-fb-x { line-height: 1.55; margin: 0; }
.vp-cw { padding: .5rem .7rem; border-radius: 8px; background: color-mix(in srgb, #f5b301 16%, transparent); font-size: .9rem; }
.vp-pq-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; align-items: center; padding-top: .3rem; }

.vp-fc-front { font-size: 1.2rem; line-height: 1.55; margin: 0; }
.vp-fc-hint { display: grid; justify-items: start; gap: .6rem; padding: 1rem; border: 1px dashed var(--border); border-radius: 10px; }
.vp-fc-hint .vp-fine { margin: 0; }
.vp-fc-back { display: grid; gap: .4rem; padding: 1rem; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.vp-fc-ans { margin: 0; padding-left: 1.2rem; font-weight: 700; font-size: 1.05rem; }
.vp-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.vp-grade { display: grid; gap: .15rem; justify-items: center; padding: .7rem .4rem; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: inherit; font: inherit; cursor: pointer; width: 100%; }
.vp-grade span { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.vp-grade-0 { border-color: color-mix(in srgb, var(--tone-danger, #e5484d) 60%, var(--border)); }
.vp-grade-1 { border-color: color-mix(in srgb, #f5b301 60%, var(--border)); }
.vp-grade-2 { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.vp-grade-3 { border-color: color-mix(in srgb, var(--tone-ok, #2fbf71) 60%, var(--border)); }
.vp-grade:hover { background: rgba(127,127,127,.1); }

.vp-psum { display: grid; gap: var(--space-4, 1rem); }
.vp-psum .vp-report-head { margin: 0; }
.vp-sum-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card); }
.vp-sum-acc { display: grid; }
.vp-sum-acc b { font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.vp-sum-acc span { color: var(--muted); font-size: .85rem; }
.vp-sum-acc.vp-ready b { color: var(--tone-ok, #2fbf71); }
.vp-sum-acc.vp-almost b { color: #f5b301; }
.vp-sum-acc.vp-notyet b { color: var(--tone-danger, #e5484d); }
.vp-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-3, .75rem); }
.vp-sum-grid .vp-h { font-size: 1rem; margin: 0 0 .5rem; }
.vp-sum-grid .vp-sections { width: 100%; }
.vp-sbar.vp-pass { background: var(--tone-ok, #2fbf71); } .vp-sbar.vp-fail { background: var(--tone-danger, #e5484d); }
.vp-moved { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .88rem; }
.vp-moved li { display: flex; justify-content: space-between; gap: .75rem; }
.vp-up { color: var(--tone-ok, #2fbf71); font-weight: 700; white-space: nowrap; }
.vp-down { color: var(--tone-danger, #e5484d); font-weight: 700; white-space: nowrap; }
.vp-rvs { display: grid; gap: .4rem; }
.vp-rv { border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.vp-rv summary { display: grid; grid-template-columns: 2rem 1.5rem 1fr auto; gap: .5rem; align-items: center; padding: .6rem .8rem; cursor: pointer; list-style: none; }
.vp-rv summary::-webkit-details-marker { display: none; }
.vp-rv-n { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .85rem; }
.vp-rv-mark { font-weight: 800; }
.vp-rv-ok .vp-rv-mark { color: var(--tone-ok, #2fbf71); }
.vp-rv-bad .vp-rv-mark { color: var(--tone-danger, #e5484d); }
.vp-rv-skip .vp-rv-mark { color: var(--muted); }
.vp-rv-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-rv-c { font-size: .75rem; color: var(--muted); }
.vp-rv-b { display: grid; gap: .5rem; padding: 0 .9rem .9rem 3rem; }
.vp-rv-b p { margin: 0; }

.vp-nbs { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.vp-nb { display: grid; gap: .5rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card); }
.vp-nb-top { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.vp-nb-top .vp-tdot { margin: 0; }
.vp-nb-s { margin: 0; line-height: 1.5; }
.vp-nb details summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .88rem; }
.vp-nb details p { margin: .4rem 0 0; }
.vp-nb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center; }
.vp-nb-foot .vp-fine { margin: 0; }
.vp-out-p { display: inline-block; margin-top: .35rem; font-size: .88rem; font-weight: 600; }

@media (max-width: 960px) {
  .vp-pdash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-hm-row { grid-template-columns: 1fr auto; }
  .vp-hm-cells { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 720px) {
  .vp-pr { gap: .8rem; }
  .vp-pdash { gap: .5rem; }
  .vp-pstat { padding: .75rem; }
  .vp-pbig { font-size: 1.5rem; }
  .vp-b-row { grid-template-columns: 1fr; gap: .35rem; }
  .vp-b-l { padding-top: 0; }
  .vp-psbar { top: 0; padding: .5rem .65rem; gap: .4rem .7rem; }
  .vp-psbar-r { gap: .55rem; font-size: .8rem; width: 100%; justify-content: space-between; }
  .vp-pq, .vp-fc { padding: .9rem; }
  .vp-pq .vp-stem { font-size: 1.02rem; }
  .vp-popt { padding: .7rem; gap: .55rem; grid-template-columns: 1.8rem 1fr auto; }
  .vp-pq-foot { flex-direction: column-reverse; align-items: stretch; }
  .vp-pq-foot .vp-row { justify-content: space-between; }
  .vp-pq-foot .vp-btn-primary { flex: 1 1 auto; }
  .vp-pr .vp-keys { display: none; }
  .vp-grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-rv-b { padding-left: .9rem; }
  .vp-hm-c { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) { .vp-pre, .vp-pre:hover, .vp-pprog .vp-progress-fill { transition: none; transform: none; } }

/* ════════════════════════════════════════════════════════════════════
   Design system v3 — two themes (light / dark), one set of tokens.
   Theme: <html data-theme="light|dark"> set before first paint by the
   inline <head> script (saved choice, else prefers-color-scheme). The
   kernel's third colorway (midnight, on its cycle hotkey) renders as dark.
   Contrast (WCAG AA): text ≥ 4.5:1 on --bg and --card in both themes;
   --accent is used as text, so it meets 4.5:1 as well.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* Type scale (1.2 minor third, fluid at the top). */
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.35rem;
  --fs-h2: clamp(1.25rem, 1.1rem + .55vw, 1.6rem);
  --fs-h1: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  --fs-display: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.6;
  /* Spacing (4 px grid). */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem;
  /* Radius. */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  /* Motion. */
  --ease: cubic-bezier(.2, .7, .2, 1); --dur-1: .12s; --dur-2: .2s;
  --focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
  --page-max: 76rem;
}
:root[data-theme="light"] {
  color-scheme: only light; /* shell-v13: "only" = no forced darkening (Chrome Android "dark theme for sites") */
  --bg: #f6f7fb; --bg-elev: #ffffff; --bg-soft: #eef0f6; --bg-hover: #eceff6; --bg-active: #e3e7f5;
  --card: #ffffff; --chrome: rgba(255, 255, 255, .86);
  --text: #0f1424; --muted: #4a5368; --faint: #6b7489;
  --accent: #4338ca; --accent-dim: #3730a3; --accent-ink: #ffffff;
  --accent-soft: rgba(67, 56, 202, .10); --accent-ring: rgba(67, 56, 202, .30); --accent-glow: rgba(67, 56, 202, .18); --mesh: rgba(67, 56, 202, .08);
  --border: #e0e4ee; --border-strong: #c9cfdd; --hairline: #e9ecf3;
  --tone-ok: #157347; --tone-danger: #c62828; --tone-warn: #9a5b00;
  --elev-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
  --elev-2: 0 8px 24px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .05);
  --elev-3: 0 20px 48px rgba(16, 24, 40, .14);
  --seg-1: #2f6fdc; --seg-2: #16936b; --seg-3: #7c4ddb; --seg-4: #c47a00; --seg-5: #d0436a;
}
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #0a0c12; --bg-elev: #12151e; --bg-soft: #10131b; --bg-hover: #1a1e2a; --bg-active: #1e2340;
  --card: #12151e; --chrome: rgba(12, 14, 20, .82);
  --text: #eceef5; --muted: #a9b0c2; --faint: #8a92a6;
  --accent: #a5b4fc; --accent-dim: #818cf8; --accent-ink: #0b0e1a;
  --accent-soft: rgba(165, 180, 252, .12); --accent-ring: rgba(165, 180, 252, .35); --accent-glow: rgba(165, 180, 252, .18); --mesh: rgba(165, 180, 252, .10);
  --border: #242a38; --border-strong: #333b4d; --hairline: #1b202b;
  --tone-ok: #4ade80; --tone-danger: #f87171; --tone-warn: #fbbf24;
  --elev-1: 0 1px 2px rgba(0, 0, 0, .4);
  --elev-2: 0 10px 30px rgba(0, 0, 0, .45);
  --elev-3: 0 24px 60px rgba(0, 0, 0, .55);
  --seg-1: #6ea8ff; --seg-2: #43c59a; --seg-3: #b79bff; --seg-4: #f5b13d; --seg-5: #f27a99;
}
html, body { background: var(--bg); color: var(--text); }
body { font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent-soft); }

/* Header: brand · nav · actions, glass chrome, hairline. */
.topbar { background: var(--chrome) !important; border-bottom: 1px solid var(--hairline) !important; backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
.topbar-brand .brand-mark, .vp-footer-brand .brand-mark { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: var(--accent-ink); font-weight: 800; box-shadow: var(--elev-1); }
.vp-footer-brand .brand-mark { width: 1.5rem; height: 1.5rem; border-radius: 7px; font-size: .8rem; margin-right: .3rem; }
.topbar-right { display: flex; align-items: center; gap: var(--s-2); }
.clf-top-cta { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .95rem; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: var(--fs-sm); text-decoration: none; transition: filter var(--dur-1) var(--ease); }
.clf-top-cta:hover { filter: brightness(1.08); }
/* On the practice page itself the CTA is the current place, not a call. */
.clf-top-cta[aria-current="page"], body[data-page="practice"] .clf-top-cta { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent-ring, var(--accent)); pointer-events: none; }
@media (max-width: 720px) { .clf-top-cta { display: none; } }
.clf-theme { position: relative; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.clf-theme:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.clf-theme-ico { grid-area: 1 / 1; display: inline-grid; place-items: center; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
:root[data-theme="light"] .clf-theme-sun, :root:not([data-theme="light"]) .clf-theme-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
html[data-nav-at="top"] .rail-item.active { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-ring); }

/* Focus: one ring everywhere. */
:where(a, button, input, select, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.vp-btn:focus-visible, .vp-chip:focus-visible, .vp-xcard:focus-visible, .vp-mode2:focus-visible, .vp-crow:focus-visible, .vp-drow:focus-visible, .vp-vtile:focus-visible, .clf-theme:focus-visible, .vp-topic:focus-visible, .vp-pre:focus-visible, .vp-link-btn:focus-visible, .vp-search-in:focus-visible { outline: none; box-shadow: var(--focus); }

/* Buttons + chips: accent ink (AA on accent in both themes). */
.vp-btn { border-radius: var(--r-md); transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.vp-btn-primary, .vp-btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--elev-1); }
.vp-btn-primary:active { transform: translateY(1px); }
.vp-chip { border-color: var(--border); background: var(--card); transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.vp-chip:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.vp-chip.vp-on, .vp-chip.vp-on:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.vp-chip.vp-on .vp-chip-n { background: color-mix(in srgb, var(--accent-ink) 18%, transparent); }
.vp-chip-n { background: var(--bg-soft); color: inherit; }
.vp-search-in { border-radius: var(--r-md); background: var(--card); }
.vp-link-btn { text-decoration: none; }
.vp-link-btn:hover { text-decoration: underline; }

/* Surfaces. */
.vp-box, .vp-xcard, .vp-steps li, .vp-faq dl > div, .vp-dash-row, .vp-pstat, .vp-mode, .vp-pre { border-radius: var(--r-lg); border-color: var(--border); background: var(--card); box-shadow: var(--elev-1); }
.vp-xcard:hover, .vp-dash-row:hover, .vp-pre:hover { border-color: var(--accent-ring); box-shadow: var(--elev-2); }
.vp-hero2 { border-radius: var(--r-xl); border-color: var(--border); background: radial-gradient(80% 120% at 0% 0%, var(--accent-soft) 0%, transparent 60%), radial-gradient(60% 80% at 100% 100%, var(--mesh) 0%, transparent 70%), var(--card); box-shadow: var(--elev-2); }
.vp-cert-head { border-radius: var(--r-xl); border-color: var(--border); background: radial-gradient(90% 140% at 100% 0%, var(--accent-soft) 0%, transparent 60%), var(--card); box-shadow: var(--elev-1); }
.vp-stats, .vp-factbar { border-radius: var(--r-lg); box-shadow: var(--elev-1); }
.vp-kicker { color: var(--accent); }
.vp-lvl-f { color: var(--seg-2); border-color: color-mix(in srgb, var(--seg-2) 45%, transparent); }
.vp-lvl-a { color: var(--seg-1); border-color: color-mix(in srgb, var(--seg-1) 45%, transparent); }
.vp-lvl-p { color: var(--seg-3); border-color: color-mix(in srgb, var(--seg-3) 45%, transparent); }
.vp-lvl-s { color: var(--seg-4); border-color: color-mix(in srgb, var(--seg-4) 45%, transparent); }
.vp-meter { background: var(--bg-soft); }
.vp-meter-fill.vp-ready { background: var(--tone-ok); }
.vp-meter-fill.vp-notyet { background: var(--tone-danger); }
.vp-xme-v.vp-ready, .vp-mine-v.vp-ready { color: var(--tone-ok); }

/* Vendor tags. */
.vp-vtag { display: inline-flex; align-items: center; min-height: 1.35rem; padding: 0 .5rem; border-radius: var(--r-sm); font-size: .7rem; font-weight: 800; letter-spacing: .04em; color: var(--muted); background: var(--bg-soft); white-space: nowrap; }
.vp-xtop .vp-xcode { margin-right: auto; }
.vp-xtrack { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.vp-cert-badges .vp-xtrack { padding: .15rem .5rem; border: 1px solid var(--border); border-radius: var(--r-pill); }
.vp-retires { margin-top: 0; }

/* Catalog: vendor groups. */
.vp-chips-vendor .vp-chip { font-weight: 650; }
.vp-vgroup { margin-bottom: var(--s-6); }
.vp-vgroup-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--hairline); }
.vp-vgroup-t { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -.015em; margin: 0; }
.vp-vgroup-h .vp-fine { margin: 0 0 0 auto; }
.vp-sources { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.vp-sources summary { cursor: pointer; font-weight: 650; color: var(--text); }
.vp-sources ul { margin: var(--s-2) 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.vp-sources a { color: var(--accent); }

/* Home: vendor tiles. */
.vp-vendors { margin-bottom: var(--sec-gap); }
.vp-vtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--s-3); }
.vp-vtiles > .vp-form { display: flex; }
a.vp-vtile { text-decoration: none; }
.vp-vtile { flex: 1; display: grid; gap: .45rem; align-content: start; text-align: left; padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; cursor: pointer; box-shadow: var(--elev-1); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.vp-vtile:hover { transform: translateY(-2px); box-shadow: var(--elev-2); border-color: var(--accent-ring); }
.vp-vtile-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.vp-vtile-n { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.vp-vtile-t { font-size: var(--fs-lg); font-weight: 750; letter-spacing: -.01em; }
.vp-vtile-p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.vp-vtile-tracks { font-size: var(--fs-xs); color: var(--faint); }
.vp-vtile-codes { font-size: var(--fs-xs); font-weight: 750; letter-spacing: .04em; color: var(--text); }
.vp-vtile-go { margin-top: .3rem; font-weight: 700; font-size: var(--fs-sm); color: var(--accent); }

/* Score trend: pass line at the exam's own mark (--pass, 0–100). */
.account-trend { border-bottom-color: var(--border); }
.account-trend-pass { bottom: calc(var(--pass, 66.67) * 1%); border-top-color: var(--tone-ok); }
.account-trend-bar { background: var(--tone-danger); }
.account-trend-bar[data-pass="1"] { background: var(--tone-ok); }

/* ── Practice hub v3: continue strip · 1 certification · 2 mode · 3 custom ── */
.vp-page-head-sm .vp-lede { margin-bottom: 0; }
.vp-cont { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3) var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--accent-ring); background: linear-gradient(120deg, var(--accent-soft), transparent 70%), var(--card); box-shadow: var(--elev-1); }
.vp-cont-main { display: grid; gap: .15rem; min-width: 0; }
.vp-cont-main b { font-size: var(--fs-lg); }
.vp-cont-main .vp-fine { margin: 0; }
.vp-cont-side { display: flex; align-items: center; gap: var(--s-4); grid-column: 3; grid-row: 1; }
.vp-cont > .vp-form { grid-column: 2; grid-row: 1; }
.vp-cont-kpi { display: grid; gap: .2rem; min-width: 5.5rem; }
.vp-cont-kpi b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; line-height: 1.1; }
.vp-cont-kpi small { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.vp-goal-d summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); list-style: none; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: var(--r-pill); }
.vp-goal-d summary::-webkit-details-marker { display: none; }
.vp-goal-d[open] summary { color: var(--text); }
.vp-goal-d .vp-chips { margin-top: .4rem; }
.vp-cont-also { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--hairline); }
.vp-cont-also .vp-fine { margin: 0; }

.vp-hub { display: grid; gap: var(--s-3); }
.vp-hstep { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); box-shadow: var(--elev-1); }
.vp-hstep-n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.vp-hstep-body { display: grid; gap: var(--s-3); min-width: 0; }
.vp-hstep-t { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -.015em; margin: .2rem 0 0; }
.vp-cur { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.vp-cur-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; flex: 1 1 18rem; min-width: 0; }
.vp-cur-id .vp-xcode { margin: 0; }
.vp-cur-t { flex-basis: 100%; font-size: var(--fs-xl); font-weight: 750; letter-spacing: -.015em; margin: 0; line-height: var(--lh-snug); }
.vp-cur-facts { display: flex; gap: var(--s-5); margin: 0; }
.vp-cur-facts dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vp-cur-facts dd { margin: .1rem 0 0; font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.vp-cur-facts small { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.vp-cur .vp-btn-sm { width: auto; justify-content: center; }
.vp-cert-step > .vp-hstep-body > .vp-meter { height: 6px; }
.vp-cpick { display: grid; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--hairline); }
.vp-cpick .vp-search { margin: 0; }
.vp-cgroup { display: grid; gap: .35rem; }
.vp-cgroup > .vp-form { display: block; }
.vp-cgroup-h { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: var(--fs-sm); margin-bottom: .2rem; }
.vp-cgroup-h .vp-fine { margin: 0 0 0 auto; }
.vp-crow { width: 100%; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 9rem 5rem; align-items: center; gap: var(--s-3); text-align: left; padding: .7rem .9rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-elev); color: inherit; font: inherit; cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.vp-crow:hover { border-color: var(--accent-ring); background: var(--bg-hover); }
.vp-crow.vp-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vp-crow .vp-xcode { margin: 0; }
.vp-crow-t { font-weight: 650; min-width: 0; }
.vp-crow-t small { color: var(--muted); font-weight: 500; }
.vp-crow-m { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--muted); }
.vp-crow-d { font-size: var(--fs-xs); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.vp-mode2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--s-3); }
.vp-mode2-grid > .vp-form { display: flex; }
.vp-mode2 { flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: .8rem; row-gap: .2rem; align-content: start; text-align: left; padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-elev); color: inherit; font: inherit; text-decoration: none; cursor: pointer; transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.vp-mode2:hover { transform: translateY(-1px); border-color: var(--accent-ring); box-shadow: var(--elev-2); }
.vp-mode2.vp-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vp-mode2-main { border-color: var(--accent-ring); background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--bg-elev); }
.vp-mode2-ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); font-size: 1.15rem; }
.vp-mode2-t { font-weight: 750; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.vp-mode2-d { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }

.vp-hstep .vp-builder { gap: var(--s-4); }
.vp-b-col { grid-template-columns: 1fr; gap: .5rem; }
.vp-b-col .vp-b-l { padding-top: 0; }
.vp-drows { display: grid; gap: .35rem; }
.vp-drows > .vp-form { display: block; }
.vp-drow { width: 100%; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) 9rem 9.5rem; align-items: center; gap: var(--s-3); text-align: left; padding: .6rem .8rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-elev); color: inherit; font: inherit; cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.vp-drow:hover { border-color: var(--accent-ring); }
.vp-drow-chk { width: 1.1rem; height: 1.1rem; border-radius: 5px; border: 2px solid var(--border-strong); display: grid; place-items: center; }
.vp-drow.vp-on { border-color: var(--accent); background: var(--accent-soft); }
.vp-drow.vp-on .vp-drow-chk { background: var(--accent); border-color: var(--accent); }
.vp-drow.vp-on .vp-drow-chk::after { content: ""; width: .32rem; height: .58rem; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.vp-drow-t { min-width: 0; }
.vp-drow-t b { color: var(--muted); margin-right: .35rem; font-size: var(--fs-xs); }
.vp-drow-all .vp-drow-t { font-weight: 700; }
.vp-drow-all { grid-template-columns: 1.1rem minmax(0, 1fr) auto; }
.vp-drow-m { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.vp-drow-n { font-size: var(--fs-xs); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.vp-more { justify-self: start; }
.vp-b-adv { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-soft); }

.vp-heat { padding: 0; }
.vp-heat > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem var(--s-3); padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none; }
.vp-heat > summary::-webkit-details-marker { display: none; }
.vp-heat > summary::before { content: "▸"; color: var(--muted); transition: transform var(--dur-2) var(--ease); }
.vp-heat[open] > summary::before { transform: rotate(90deg); }
.vp-heat > summary .vp-h { margin: 0; }
.vp-heat > summary .vp-fine { margin: 0; }
.vp-heat[open] { padding-bottom: var(--s-4); }
.vp-heat > :not(summary) { margin-inline: var(--s-5); }
.vp-epick { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.vp-epick-g { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.vp-epick-g > .vp-form { display: inline-flex; }

@media (max-width: 760px) {
  .vp-cont { grid-template-columns: 1fr; padding: var(--s-4); }
  .vp-cont-side, .vp-cont > .vp-form { grid-column: 1; grid-row: auto; }
  .vp-cont > .vp-form .vp-btn { width: 100%; }
  .vp-hstep { grid-template-columns: 1fr; padding: var(--s-4); gap: var(--s-3); }
  .vp-hstep-n { width: 1.8rem; height: 1.8rem; font-size: .85rem; }
  .vp-crow { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .vp-crow-m, .vp-crow-d { grid-column: 2; text-align: left; }
  .vp-drow { grid-template-columns: 1.1rem minmax(0, 1fr); }
  .vp-drow-m, .vp-drow-n { grid-column: 2; text-align: left; }
  .vp-cur-facts { gap: var(--s-4); }
  .vp-b-row { grid-template-columns: 1fr; gap: .4rem; }
  .vp-b-l { padding-top: 0; }
}

/* Reduced motion: no transforms or transitions anywhere in the product. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .vp-xcard:hover, .vp-vtile:hover, .vp-mode2:hover, .vp-pre:hover, .vp-card:hover { transform: none; }
}

/* v3 polish: compact hub steps on phones */
@media (max-width: 760px) {
  .vp-hstep { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
  .vp-hstep-n { display: none; }
}

/* ── Readiness + today's plan (src/pages/plan.rs) ── */
.vp-ready-card { display: grid; gap: var(--space-3, .75rem); padding: var(--space-4, 1rem); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card); }
.vp-ready-card.vp-r-likely { border-color: color-mix(in srgb, var(--tone-ok, #2fbf71) 45%, var(--border)); }
.vp-ready-card.vp-r-border { border-color: color-mix(in srgb, #f5b301 45%, var(--border)); }
.vp-ready-card.vp-r-notyet { border-color: color-mix(in srgb, var(--tone-danger, #e5484d) 40%, var(--border)); }
.vp-rhead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-4, 1rem); align-items: start; }
.vp-rhead > div { display: grid; gap: .45rem; min-width: 0; }
.vp-rtitle { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.vp-r-likely .vp-rtitle { color: var(--tone-ok, #2fbf71); }
.vp-r-border .vp-rtitle { color: #d99a00; }
.vp-r-notyet .vp-rtitle { color: var(--tone-danger, #e5484d); }
.vp-r-unknown .vp-rtitle { color: var(--muted); }
.vp-rnum { margin: 0; }
.vp-rnum b { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.vp-rnum small { color: var(--muted); font-weight: 600; margin-left: .35rem; }
.vp-rband { position: relative; height: 12px; border-radius: 6px; background: rgba(127,127,127,.18); }
.vp-rband-r { position: absolute; top: 0; bottom: 0; left: calc(var(--lo, 0) * 1%); right: 0; }
.vp-rband-w { display: block; height: 100%; width: calc(var(--w, 0) / (100 - var(--lo, 0)) * 100%); border-radius: 6px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.vp-rband-m, .vp-rband-p { position: absolute; top: -4px; bottom: -4px; left: calc(var(--at, 0) * 1%); width: 3px; margin-left: -1px; border-radius: 2px; }
.vp-rband-m { background: var(--text); }
.vp-rband-p { background: var(--tone-danger, #e5484d); width: 2px; }
.vp-rwarn { color: var(--tone-danger, #e5484d); font-weight: 600; }
.vp-rdate { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.vp-rdate-f { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.vp-rdate-f label { font-weight: 600; font-size: .85rem; }
.vp-date-in { min-height: 2rem; padding: 0 .5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg, transparent); color: var(--text); font: inherit; color-scheme: light dark; }
.vp-plan { display: grid; gap: .45rem; padding: var(--space-3, .75rem); border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.vp-plan-h { display: flex; justify-content: space-between; align-items: baseline; }
.vp-plan-h b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.vp-plan-l { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; font-size: .9rem; }
.vp-plan .vp-btn { justify-self: start; }
.vp-rdoms summary { cursor: pointer; font-weight: 600; }
.vp-rdoms ul { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .45rem; }
.vp-rdoms li { display: grid; grid-template-columns: minmax(8rem, 1.2fr) minmax(4rem, 1fr) minmax(9rem, auto); gap: .6rem; align-items: center; font-size: .9rem; }
.vp-rdom-v small { color: var(--muted); }
@media (max-width: 720px) {
  .vp-rhead { grid-template-columns: 1fr; }
  .vp-rdoms li { grid-template-columns: 1fr; gap: .2rem; }
}

/* Teacher assignments on the practice hub */
.vp-asgs { display: grid; gap: .5rem; padding: var(--space-4, 1rem); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: var(--radius-lg, 12px); background: var(--card); }
.vp-asgs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.vp-asg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 14rem) auto; gap: .8rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--border); }
.vp-asg:first-child { border-top: 0; }
.vp-asg-main { display: grid; gap: .15rem; min-width: 0; }
.vp-asg-prog { display: grid; gap: .2rem; }
.vp-asg-ok { color: var(--tone-ok, #2fbf71); font-weight: 700; }
.vp-btn-sm { min-height: 2rem; padding: 0 .8rem; font-size: .85rem; }
@media (max-width: 640px) { .vp-asg { grid-template-columns: 1fr; gap: .4rem; } }

/* ── Performance-based items: exhibit, order, match ─────────────────── */
.vp-exhibit { margin: 0; display: grid; gap: .3rem; }
.vp-exhibit figcaption { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vp-exhibit pre { margin: 0; padding: .75rem .9rem; border-radius: 8px; border: 1px solid var(--border); background: color-mix(in srgb, var(--fg, #888) 6%, var(--card, transparent)); font: .82rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; white-space: pre; max-width: 100%; }
.vp-exhibit pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-arr { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.vp-arr-i { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto auto; gap: .7rem; align-items: center; padding: .55rem .6rem .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card, transparent); }
.vp-arr-dr { cursor: grab; }
.vp-arr-dr:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.vp-arr-i.vp-dragging, .vp-mt-src.vp-dragging { opacity: .45; }
.vp-arr-n { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 6px; border: 1px solid var(--border); font-weight: 700; font-size: .85rem; }
.vp-arr-t { line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.vp-arr-mv { display: flex; gap: .3rem; }
.vp-arr-mv .vp-form { display: contents; }
.vp-arr-b { width: 2.2rem; height: 2.2rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.vp-arr-b:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.vp-arr-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vp-arr-b:disabled { opacity: .35; cursor: default; }
.vp-arr-v { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.vp-arr-v.vp-ok, .vp-mt-ok th { color: var(--tone-ok, #2fbf71); }
.vp-arr-v.vp-bad { color: var(--tone-danger, #e5484d); }
.vp-arr-tools { align-items: center; gap: .6rem; }
.vp-arr-ans { margin: .2rem 0 0; font-size: .9rem; }
.vp-mt-legend { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.vp-mt-src { padding: .25rem .6rem; border-radius: 999px; border: 1px dashed var(--border); font-size: .82rem; cursor: grab; user-select: none; }
.vp-mt { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.vp-mt th, .vp-mt td { padding: .55rem .7rem; text-align: left; vertical-align: middle; border-top: 1px solid var(--border); }
.vp-mt thead th { border-top: 0; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: rgba(127,127,127,.06); }
.vp-mt tbody th { font-weight: 600; width: 40%; overflow-wrap: anywhere; }
.vp-mt-c { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.vp-mt-c .vp-form { display: contents; }
.vp-mt-r.vp-mt-ok { background: color-mix(in srgb, var(--tone-ok, #2fbf71) 8%, transparent); }
.vp-mt-r.vp-mt-bad { background: color-mix(in srgb, var(--tone-danger, #e5484d) 8%, transparent); }
.vp-mt-got { font-weight: 600; }
@media (max-width: 640px) {
  .vp-arr-i { grid-template-columns: 1.6rem minmax(0, 1fr) auto; }
  .vp-arr-i .vp-arr-v { grid-column: 2 / -1; }
  .vp-mt, .vp-mt tbody, .vp-mt tr, .vp-mt th, .vp-mt td { display: block; width: auto; }
  .vp-mt thead { display: none; }
  .vp-mt tbody th { border-top: 1px solid var(--border); padding-bottom: .2rem; width: auto; }
  .vp-mt tbody tr:first-child th { border-top: 0; }
  .vp-mt td { border-top: 0; padding-top: .2rem; }
}

/* ── Why the other options are wrong + doc links ───────────────────── */
.vp-why { display: grid; gap: .3rem; padding: .6rem .8rem; border-radius: 8px; border: 1px solid var(--border); background: rgba(127,127,127,.05); }
.vp-why-h { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.vp-why ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .88rem; line-height: 1.45; }
.vp-docs { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: baseline; }
/* The exam room is always the light test-centre look (--x-* tokens). */
.vp-sitting .vp-q .vp-chip { background: #fff; color: var(--x-ink); border-color: var(--x-line); }
.vp-sitting .vp-q .vp-chip:hover { border-color: var(--x-sel-line); }
.vp-sitting .vp-q .vp-chip.vp-on { background: var(--x-sel-line); border-color: var(--x-sel-line); color: #fff; }
.vp-sitting .vp-q .vp-arr-i, .vp-sitting .vp-q .vp-mt, .vp-sitting .vp-q .vp-exhibit pre { background: #fff; color: var(--x-ink); border-color: var(--x-line); }
.vp-sitting .vp-q .vp-mt th, .vp-sitting .vp-q .vp-mt td, .vp-sitting .vp-q .vp-arr-n, .vp-sitting .vp-q .vp-arr-b, .vp-sitting .vp-q .vp-mt-src { border-color: var(--x-line); color: var(--x-ink); }
.vp-sitting .vp-q .vp-arr-b { background: #fff; }
.vp-sitting .vp-q .vp-arr-b:hover:not(:disabled) { border-color: var(--x-sel-line); color: var(--x-sel-line); }

/* ── Repetition due (spaced-repetition queue on the hub) ───────────── */
.vp-rep { display: grid; gap: .45rem; padding: var(--space-4, 1rem); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card); margin-bottom: var(--space-3, .75rem); }
.vp-rep .vp-plan-h .vp-btn-sm { width: auto; }
.vp-rep .vp-plan-h { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vp-rep-n { margin: 0; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.vp-rep-n b { font-size: 1.6rem; line-height: 1; }
.vp-rep-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.vp-rep-l li { display: flex; justify-content: space-between; gap: .8rem; padding: .3rem 0; border-top: 1px solid var(--border); }
.vp-rep-l li:first-child { border-top: 0; }
.vp-rep-t { min-width: 0; overflow-wrap: anywhere; }
.vp-rep p { margin: 0; }
.vp-rep-hint { display: block; margin-top: .25rem; color: var(--muted); }
.vp-conf-g { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 640px) { .vp-rep-l li { flex-direction: column; gap: 0; } }

/* ── Report question (practice feedback, exam answer review) ───────── */
.vp-flagq { margin-top: var(--space-2, .5rem); font-size: .9rem; }
.vp-flagq > summary { cursor: pointer; color: var(--muted); width: fit-content; padding: .2rem 0; }
.vp-flagq > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.vp-report-f { display: grid; gap: .5rem; margin-top: .5rem; padding: var(--space-3, .75rem); border: 1px solid var(--border); border-radius: var(--radius, 8px); background: var(--card); max-width: 40rem; }
.vp-report-f fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .3rem; }
.vp-report-f legend { font-weight: 600; margin-bottom: .2rem; }
.vp-rep-r { display: flex; gap: .45rem; align-items: center; }
.vp-report-f textarea { width: 100%; min-height: 4.5rem; font: inherit; color: var(--text); background: var(--bg, transparent); border: 1px solid var(--border); border-radius: 6px; padding: .45rem .55rem; resize: vertical; }
.vp-report-f .vp-btn { justify-self: start; }
.vp-reported { margin-top: var(--space-2, .5rem); }

/* ── Terminal labs (LPI) ─────────────────────────────────────────── */
.vp-labs { display: grid; gap: .5rem; padding: var(--space-4, 1rem); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card); margin: var(--space-3, .75rem) 0; }
.vp-labs .vp-plan-h { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.vp-labs p { margin: 0; }
.vp-labs-l { list-style: none; margin: 0; padding: 0; display: grid; }
.vp-labs-l li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .5rem 0; border-top: 1px solid var(--border); }
.vp-labs-t { display: grid; min-width: 0; overflow-wrap: anywhere; }
.vp-labs-v { display: flex; gap: .35rem; flex-wrap: wrap; }
.vp-labs-v .vp-form { display: inline; margin: 0; }
.vp-lab { display: grid; gap: var(--space-3, .75rem); }
.vp-lab-h { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.vp-lab-h p, .vp-lab-h h1 { margin: 0; }
.vp-lab-h .vp-btn-sm { width: auto; }
.vp-lab-stem { margin: 0; font-size: 1.05rem; max-width: 60rem; }
.vp-lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); gap: var(--space-4, 1rem); align-items: start; }
.vp-term-wrap { display: grid; gap: .4rem; min-width: 0; }
.vp-term { --term-bg: #0d1117; --term-fg: #d7dde5; background: var(--term-bg); color: var(--term-fg); border-radius: var(--radius, 8px); border: 1px solid #30363d; height: clamp(16rem, 52vh, 34rem); overflow: auto; display: flex; flex-direction: column-reverse; }
.vp-term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-term pre { margin: 0; padding: .75rem .9rem; font: .86rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.vp-term-p { color: #7ee787; font-weight: 600; }
.vp-term-m { color: #8b949e; }
.vp-term-f { box-sizing: border-box; max-width: 100%; min-width: 0; display: flex; align-items: center; gap: .5rem; background: #0d1117; border: 1px solid #30363d; border-radius: var(--radius, 8px); padding: .35rem .5rem; }
.vp-term-f:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-term-pr { color: #7ee787; font: 600 .86rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.vp-term-in { flex: 1; min-width: 0; background: transparent; border: 0; color: #e6edf3; font: .9rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: .35rem 0; caret-color: #7ee787; }
.vp-term-f .vp-term-in { width: auto; max-width: none; }
.vp-term-f .vp-term-in:focus, .vp-term-f .vp-term-in:focus-visible { outline: none; box-shadow: none; }
.vp-term-f .vp-term-run { width: auto; border-color: #30363d; color: #e6edf3; }
.vp-lab-side { display: grid; gap: .6rem; padding: var(--space-4, 1rem); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card); }
.vp-lab-side h2, .vp-lab-side h3 { margin: 0; }
.vp-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.vp-goal { display: flex; gap: .5rem; align-items: baseline; }
.vp-goal-i { width: 1.2em; flex: none; text-align: center; color: var(--muted); font-weight: 700; }
.vp-goal-ok .vp-goal-i { color: var(--tone-ok, #1a7f37); }
.vp-goal-no .vp-goal-i { color: var(--tone-danger, #cf222e); }
.vp-lab-ok, .vp-lab-no { margin: 0; padding: .5rem .7rem; border-radius: var(--radius, 8px); font-weight: 600; }
.vp-lab-ok { background: color-mix(in srgb, var(--tone-ok, #1a7f37) 14%, transparent); color: var(--tone-ok, #1a7f37); }
.vp-lab-no { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.vp-lab-acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.vp-lab-acts .vp-form { margin: 0; }
.vp-lab-acts .vp-btn-sm { width: auto; }
.vp-lab-hints { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.vp-lab-sol { display: grid; gap: .4rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.vp-lab-sol ol { margin: 0; padding-left: 1.2rem; }
.vp-lab-sol code { font: .85rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.vp-lab-sol p { margin: 0; }
.vp-lab-side > .vp-form .vp-btn-sm { width: auto; }
@media (max-width: 860px) { .vp-lab-grid { grid-template-columns: minmax(0, 1fr); } .vp-term { height: clamp(14rem, 45vh, 24rem); } }
@media (max-width: 640px) { .vp-labs-l li { flex-direction: column; align-items: flex-start; } .vp-term-pr { max-width: 45%; overflow: hidden; text-overflow: ellipsis; } }

/* ════════════════════════════════════════════════════════════════════
   Design system v4 — one calm, professional look on every page.
   Last in the file on purpose: it restates the tokens and the shared
   components (header, buttons, chips, badges, cards, question screens,
   score report) so earlier generations above only add page layout.
   · Tokens: type scale, 4 px spacing, 3 radii, flat surfaces with one
     hairline and a soft shadow; light/dark with WCAG AA text contrast
     (checked: text ≥ 14:1, muted ≥ 7:1, faint/accent/tones ≥ 4.7:1 on
     --bg, --card and --bg-soft in both themes).
   · Vendor marks are neutral text badges (no trademark colours/logos).
   · Areas (cloud, security, …) carry a small colour dot only.
   · The exam room stays the light test-centre look in both themes.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.3rem;
  --fs-h2: clamp(1.2rem, 1.08rem + .45vw, 1.45rem);
  --fs-h1: clamp(1.65rem, 1.3rem + 1.3vw, 2.25rem);
  --fs-display: clamp(2rem, 1.35rem + 2.6vw, 3.1rem);
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  --ctl-h: 2.5rem; --ctl-h-sm: 2rem; --ctl-h-lg: 3rem;
  --read: 70ch;
  --page-max: 75rem;
  --a-cloud: #3b82f6; --a-security: #e0475b; --a-linux: #e0a106; --a-networking: #0ea5a4; --a-ai-data: #8b5cf6; --a-it-service: #64748b;
}
:root[data-theme="light"] {
  --bg: #f6f7fb; --bg-elev: #ffffff; --bg-soft: #eef0f5; --bg-hover: #f0f2f7; --bg-active: #e6e9f2;
  --card: #ffffff; --chrome: rgba(255, 255, 255, .92);
  --text: #0f172a; --muted: #475069; --faint: #5f6880;
  --accent: #3347c4; --accent-dim: #2a3aa6; --accent-ink: #ffffff;
  --accent-soft: rgba(51, 71, 196, .08); --accent-ring: rgba(51, 71, 196, .32); --accent-glow: rgba(51, 71, 196, .12); --mesh: transparent;
  --border: #e2e5ec; --border-strong: #cdd2dc; --hairline: #e8ebf1;
  --tone-ok: #147a46; --tone-danger: #c42b2b; --tone-warn: #975a00;
  --tone-ok-soft: #eaf6ef; --tone-danger-soft: #fcefef; --tone-warn-soft: #fdf4e3;
  --elev-1: 0 1px 2px rgba(15, 23, 42, .05);
  --elev-2: 0 4px 16px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .05);
  --elev-3: 0 16px 40px rgba(15, 23, 42, .14);
}
:root:not([data-theme="light"]) {
  --bg: #0a0c12; --bg-elev: #12161f; --bg-soft: #171c27; --bg-hover: #1a2030; --bg-active: #1f2638;
  --card: #12161f; --chrome: rgba(10, 12, 18, .9);
  --text: #e9ecf3; --muted: #a6aec0; --faint: #8b94a8;
  --accent: #9db1ff; --accent-dim: #7f97f5; --accent-ink: #0a0c12;
  --accent-soft: rgba(157, 177, 255, .1); --accent-ring: rgba(157, 177, 255, .36); --accent-glow: rgba(157, 177, 255, .14); --mesh: transparent;
  --border: #232937; --border-strong: #323a4c; --hairline: #1c212c;
  --tone-ok: #4ade80; --tone-danger: #f87171; --tone-warn: #fbbf24;
  --tone-ok-soft: rgba(74, 222, 128, .1); --tone-danger-soft: rgba(248, 113, 113, .1); --tone-warn-soft: rgba(251, 191, 36, .1);
  --elev-1: 0 1px 2px rgba(0, 0, 0, .35);
  --elev-2: 0 6px 20px rgba(0, 0, 0, .4);
  --elev-3: 0 20px 48px rgba(0, 0, 0, .5);
}
body { font-size: var(--fs-md); line-height: 1.55; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Header: solid chrome, one hairline, brand · tagline · nav · CTA · theme. */
.topbar { box-shadow: none !important; backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); }
.topbar-brand .brand-mark { width: 1.85rem; height: 1.85rem; border-radius: 8px; background: var(--accent); box-shadow: none; font-size: .95rem; }
.topbar-brand-text { font-size: 1rem; font-weight: 750; letter-spacing: -.015em; }
.topbar-brand-sub { padding-left: .6rem; margin-left: .1rem; border-left: 1px solid var(--border); color: var(--faint); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em; }
html[data-nav-at="top"] .rail-item { border-radius: var(--r-md); color: var(--muted); font-weight: 600; }
html[data-nav-at="top"] .rail-item:hover { background: var(--bg-hover); color: var(--text); }
html[data-nav-at="top"] .rail-item.active { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
/* The header link is secondary: the page body owns the one primary CTA. */
.clf-top-cta { border-radius: var(--r-md); min-height: 2.25rem; padding: 0 1rem; box-shadow: inset 0 0 0 1px var(--accent-ring); background: transparent; color: var(--accent); }
.clf-top-cta:hover { background: var(--accent-soft); filter: none; }
.clf-top-cta[aria-current="page"], body[data-page="practice"] .clf-top-cta { box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--muted); }
.clf-theme { border-radius: var(--r-md); width: 2.25rem; height: 2.25rem; }
@media (max-width: 720px) {
  html[data-nav-at="top"] .rail { background: var(--chrome) !important; backdrop-filter: blur(8px); }
  html[data-nav-at="top"] .rail-item.active { background: var(--accent-soft); color: var(--accent); }
  html[data-nav-at="top"] .rail-item { font-size: .7rem; font-weight: 650; }
}

/* Focus: one visible ring everywhere (keyboard only). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.vp-btn:focus-visible, .vp-chip:focus-visible, .vp-xcard:focus-visible, .vp-vtile:focus-visible, .vp-mode2:focus-visible, .vp-crow:focus-visible, .vp-drow:focus-visible, .vp-pre:focus-visible, .vp-popt:focus-visible, .vp-topic:focus-visible, .vp-grade:focus-visible, .vp-ptab:focus-visible, .vp-link-btn:focus-visible, .vp-dash-row:focus-visible, .clf-theme:focus-visible, .rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.vp-search-in:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Type. */
.vp-kicker { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .09em; color: var(--accent); }
.vp-title { letter-spacing: -.025em; line-height: 1.15; }
.vp-page-head .vp-title, .vp-cert-head .vp-title { font-size: var(--fs-h1); font-weight: 780; }
.vp-sec-t { font-size: var(--fs-h2); font-weight: 720; letter-spacing: -.02em; }
.vp-h { font-size: var(--fs-lg); font-weight: 680; letter-spacing: -.012em; }
.vp-lede { max-width: var(--read); color: var(--muted); line-height: 1.6; }
.vp-fine { color: var(--faint); }
.vp-link { color: var(--accent); font-weight: 650; font-size: var(--fs-sm); }

/* Buttons: primary (one per view), secondary (default), ghost, danger. */
.vp-btn { min-height: var(--ctl-h); padding: 0 1.05rem; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--card); color: var(--text); font-weight: 650; font-size: var(--fs-sm); letter-spacing: -.005em; box-shadow: var(--elev-1); }
.vp-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.vp-btn-primary, .vp-btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--elev-1); }
.vp-btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); filter: none; }
:root:not([data-theme="light"]) .vp-btn-primary:hover { background: #b3c3ff; border-color: #b3c3ff; }
.vp-btn-ghost { background: transparent; box-shadow: none; border-color: var(--border); font-weight: 600; }
.vp-btn-lg { min-height: var(--ctl-h-lg); padding: 0 1.5rem; font-size: var(--fs-md); }
.vp-btn-sm { min-height: var(--ctl-h-sm); padding: 0 .8rem; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.vp-btn-danger-ghost { background: transparent; color: var(--tone-danger); border-color: color-mix(in srgb, var(--tone-danger) 40%, transparent); }
.vp-btn[disabled], .vp-btn.vp-dim { opacity: .5; box-shadow: none; }
.vp-link-btn { color: var(--accent); font-weight: 650; }

/* Chips: quiet when off; selected = accent tint + accent text (not a wall of solid fills). */
.vp-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--ctl-h-sm); padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.vp-chip:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.vp-chip.vp-on, .vp-chip.vp-on:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 .5px var(--accent); }
.vp-chip-n { margin-left: 0; min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--bg-soft); color: var(--muted); font-size: var(--fs-2xs); font-weight: 700; text-align: center; line-height: 1.35rem; }
.vp-chip.vp-on .vp-chip-n { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.vp-chip-sm { min-height: 1.75rem; padding: 0 .6rem; font-size: var(--fs-xs); }
.vp-chips-label { font-size: var(--fs-xs); font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; }

/* Badges: vendor (neutral text mark), level (dot), status pills. */
.vp-vtag { min-height: 1.4rem; padding: 0 .45rem; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--bg-soft); color: var(--text); font-size: var(--fs-2xs); font-weight: 750; letter-spacing: .03em; }
.vp-xcode { color: var(--text); font-size: var(--fs-xs); font-weight: 750; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.vp-lvl, .vp-lvl-f, .vp-lvl-a, .vp-lvl-p, .vp-lvl-s { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: var(--fs-2xs); font-weight: 650; letter-spacing: .02em; text-transform: none; }
.vp-lvl::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--faint); }
.vp-lvl-f::before { background: var(--seg-2); } .vp-lvl-a::before { background: var(--seg-1); } .vp-lvl-p::before { background: var(--seg-3); } .vp-lvl-s::before { background: var(--seg-4); }
.vp-pill { display: inline-flex; align-items: center; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--muted); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.vp-pill-soon { border-color: color-mix(in srgb, var(--tone-warn) 40%, transparent); background: var(--tone-warn-soft); color: var(--tone-warn); }
.vp-pill-ok { border-color: color-mix(in srgb, var(--tone-ok) 40%, transparent); background: var(--tone-ok-soft); color: var(--tone-ok); }

/* Surfaces: flat card, one border, soft shadow; hover lifts the border only. */
.vp-box, .vp-xcard, .vp-steps li, .vp-faq dl > div, .vp-dash-row, .vp-pstat, .vp-mode, .vp-pre, .vp-vtile, .vp-hstep, .vp-pq, .vp-fc, .vp-ready-card, .vp-rep, .vp-labs, .vp-lab-side, .vp-asgs, .vp-acard, .vp-format, .vp-idle, .vp-sum-top, .vp-nb, .vp-rv { border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); box-shadow: var(--elev-1); }
.vp-xcard:hover, .vp-vtile:hover, .vp-dash-row:hover, .vp-pre:hover, .vp-mode2:hover { transform: none; border-color: var(--accent-ring); box-shadow: var(--elev-2); }

/* Home: hero. */
.vp-hero2 { border-radius: var(--r-xl); border: 1px solid var(--border); background: linear-gradient(180deg, var(--accent-soft), transparent 55%), var(--card); box-shadow: var(--elev-1); padding: clamp(1.5rem, 1rem + 3vw, 3.25rem); }
.vp-hero2-t { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; max-width: 15ch; }
.vp-hero2-p { color: var(--muted); font-size: clamp(1rem, .96rem + .25vw, 1.125rem); max-width: 54ch; }
.vp-stats { border-radius: var(--r-lg); box-shadow: var(--elev-1); }
.vp-stats > div { padding: var(--s-4) var(--s-5); }
.vp-stats strong { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; }
.vp-stats span { color: var(--muted); }
.vp-steps li { padding: var(--s-5); }
.vp-step-n { width: 1.9rem; height: 1.9rem; border-radius: var(--r-sm); background: var(--accent-soft); font-size: .85rem; }
.vp-feat-grid article { border-left-color: var(--border-strong); }

/* Home: area tiles (one colour dot per area — no vendor colours). */
.vp-area-cloud { --area: var(--a-cloud); } .vp-area-security { --area: var(--a-security); } .vp-area-linux { --area: var(--a-linux); }
.vp-area-networking { --area: var(--a-networking); } .vp-area-ai-data { --area: var(--a-ai-data); } .vp-area-it-service { --area: var(--a-it-service); }
.vp-vtiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: var(--s-3); }
.vp-vtile { position: relative; overflow: hidden; padding: var(--s-4) var(--s-5) var(--s-5); gap: .4rem; background: var(--card); }
.vp-vtile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--area, var(--accent)); opacity: .85; }
.vp-area-dot { width: .7rem; height: .7rem; border-radius: 3px; background: var(--area, var(--accent)); }
.vp-vtile-t { font-size: var(--fs-lg); font-weight: 750; }
.vp-vtile-tracks { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.vp-vtile-codes { color: var(--faint); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .02em; }
.vp-vtile-go { margin-top: .4rem; font-size: var(--fs-sm); }

/* Certifications: toolbar (search · areas · labelled filter rows). */
.vp-cat-head { align-items: baseline; }
.vp-search-in { min-height: 2.75rem; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--card); font-size: var(--fs-md); }
.vp-search .vp-btn { min-height: 2.75rem; }
.vp-areas { gap: .4rem; margin: 0 0 var(--s-3); padding: .3rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-soft); }
.vp-areas .vp-chip { min-height: 2.25rem; padding: 0 .9rem; border-color: transparent; background: transparent; border-radius: var(--r-md); font-size: var(--fs-sm); }
.vp-areas .vp-chip:hover { background: var(--card); }
.vp-areas .vp-chip.vp-on { background: var(--card); color: var(--text); border-color: var(--border); box-shadow: var(--elev-1); }
.vp-areas .vp-chip.vp-on .vp-chip-n { background: var(--accent-soft); color: var(--accent); }
.vp-filters { display: grid; gap: .5rem; margin-bottom: var(--s-5); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
.vp-fgroup { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.vp-fgroup + .vp-fgroup { padding-top: .5rem; border-top: 1px solid var(--hairline); }
.vp-filters .vp-chips { gap: .35rem; }
.vp-vgroup { margin-bottom: var(--s-6); }
.vp-vgroup-h { border-bottom: 0; padding-bottom: 0; }
.vp-vgroup-t { font-size: var(--fs-lg); font-weight: 720; }
@media (max-width: 720px) {
  .vp-areas, .vp-filters .vp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .vp-areas::-webkit-scrollbar, .vp-filters .vp-chips::-webkit-scrollbar { display: none; }
  .vp-areas > .vp-form, .vp-filters .vp-chips > .vp-form { flex: none; }
  .vp-fgroup { grid-template-columns: 1fr; gap: .3rem; }
  .vp-filters { padding: var(--s-3); }
}

/* Exam cards: header · title · area/track · 3-line description · facts · you. */
.vp-xgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--s-3); }
.vp-xcard { gap: .5rem; padding: var(--s-4) var(--s-5) var(--s-4); }
.vp-xtop { gap: .4rem; }
.vp-xtitle { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.vp-xtrack { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.vp-xtrack::before { content: ""; width: .5rem; height: .5rem; border-radius: 2px; background: var(--area, var(--faint)); }
.vp-xdesc { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.vp-xmeta { gap: .2rem 0; color: var(--text); font-size: var(--fs-xs); font-weight: 600; }
.vp-xmeta span + span::before { content: "·"; margin: 0 .45rem; color: var(--faint); }
.vp-xbank { color: var(--faint); }
.vp-xme { border-top-color: var(--hairline); }
.vp-xcard.vp-soon { border-style: dashed; background: transparent; box-shadow: none; }
.vp-xcard.vp-soon .vp-xtitle, .vp-xcard.vp-soon .vp-xcode, .vp-xcard.vp-soon .vp-xdesc, .vp-xcard.vp-soon .vp-xmeta { opacity: 1; color: var(--muted); }
.vp-xcard.vp-soon:hover { box-shadow: none; border-color: var(--border-strong); }
.vp-xcard.vp-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Exam page head + facts. */
.vp-cert-head { border-radius: var(--r-xl); background: linear-gradient(180deg, var(--accent-soft), transparent 60%), var(--card); box-shadow: var(--elev-1); }
.vp-cert-badges .vp-xtrack { border: 0; padding: 0; }
.vp-factbar { border-radius: var(--r-lg); box-shadow: var(--elev-1); }
.vp-factbar dd { font-size: 1.3rem; font-weight: 780; letter-spacing: -.02em; }
.vp-crumbs { font-size: var(--fs-sm); }

/* Practice hub. */
.vp-cont { border-color: var(--border); background: linear-gradient(90deg, var(--accent-soft), transparent 65%), var(--card); }
.vp-hstep-n { border-radius: var(--r-sm); background: var(--accent-soft); font-size: .9rem; }
.vp-hstep-t, .vp-cur-t { font-size: var(--fs-xl); font-weight: 740; }
.vp-crow, .vp-drow, .vp-mode2 { background: var(--card); border-color: var(--border); }
.vp-crow:hover, .vp-drow:hover { background: var(--bg-hover); }
.vp-mode2-main { border-color: var(--accent-ring); background: var(--accent-soft); }
.vp-mode2-ico, .vp-pre-ico, .vp-mode-ico { border-radius: var(--r-md); }
.vp-plan { border-radius: var(--r-md); background: var(--bg-soft); border-color: var(--border); }
.vp-ptab.vp-on { color: var(--accent); }
.vp-psbar { border-radius: var(--r-md); box-shadow: var(--elev-1); top: .5rem; }

/* Practice question: readable measure, clear options, clear verdicts. */
.vp-pq { gap: 1rem; padding: clamp(1rem, .7rem + 1.4vw, 2rem); }
.vp-pq .vp-stem, .vp-fc-front { max-width: var(--read); font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); line-height: 1.6; color: var(--text); }
.vp-pq-meta { color: var(--muted); }
.vp-popts, .vp-pconf, .vp-fb, .vp-why { max-width: 52rem; }
.vp-popt { min-height: 3.25rem; align-items: center; padding: .75rem .95rem; border-radius: var(--r-md); background: var(--card); border-color: var(--border-strong); }
.vp-popt:hover { background: var(--bg-hover); border-color: var(--accent-ring); }
.vp-po-k { border-radius: var(--r-sm); border-color: var(--border-strong); background: var(--bg-soft); color: var(--muted); }
.vp-po-t { padding-top: 0; }
.vp-popt.vp-po-on { background: var(--accent-soft); border-color: var(--accent); }
.vp-popt.vp-po-on .vp-po-k { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.vp-popt.vp-po-ok { background: var(--tone-ok-soft); border-color: var(--tone-ok); }
.vp-popt.vp-po-bad { background: var(--tone-danger-soft); border-color: var(--tone-danger); }
.vp-popt.vp-po-ok .vp-po-k { background: var(--tone-ok); border-color: var(--tone-ok); }
.vp-popt.vp-po-bad .vp-po-k { background: var(--tone-danger); border-color: var(--tone-danger); }
.vp-popt.vp-po-ok .vp-po-k, .vp-popt.vp-po-bad .vp-po-k { color: var(--accent-ink); }
:root[data-theme="light"] .vp-popt.vp-po-ok .vp-po-k, :root[data-theme="light"] .vp-popt.vp-po-bad .vp-po-k { color: #fff; }
.vp-pconf { border-radius: var(--r-md); background: var(--bg-soft); }
.vp-fb { border-radius: var(--r-md); border-left-width: 4px; padding: 1rem 1.1rem; }
.vp-fb-ok { background: var(--tone-ok-soft); }
.vp-fb-bad { background: var(--tone-danger-soft); }
.vp-fb-x { max-width: var(--read); }
.vp-why { border-radius: var(--r-md); background: var(--bg-soft); border-color: var(--border); }

/* Score report: verdict card, scale with labelled pass mark, sections. */
.vp-report { border-radius: var(--r-xl); box-shadow: var(--elev-1); }
.vp-verdict { border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); border-width: 1px; border-left-width: 5px; }
.vp-verdict.vp-pass { background: var(--tone-ok-soft); border-color: var(--tone-ok); }
.vp-verdict.vp-fail { background: var(--tone-danger-soft); border-color: var(--tone-danger); }
.vp-verdict-word { font-size: 1.15rem; letter-spacing: .14em; padding: .25rem .6rem; border-radius: var(--r-sm); border: 1.5px solid currentColor; }
.vp-score { font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3rem); letter-spacing: -.03em; }
.vp-verdict p { color: var(--text); font-weight: 600; }
.vp-scale { height: 10px; border-radius: 5px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--border); margin: 2.4rem 0 2.2rem; }
.vp-scale-fill { border-radius: 5px; }
.vp-scale-pass { top: -8px; bottom: -8px; border-left: 2px solid var(--text); }
.vp-scale-pass span { top: -1.6rem; left: 0; transform: translateX(-50%); font-size: var(--fs-xs); font-weight: 700; color: var(--text); background: var(--card); padding: 0 .3rem; border-radius: 4px; }
.vp-scale-lo, .vp-scale-hi { top: 1.1rem; font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
.vp-domains th, .vp-domains td, .vp-sections th, .vp-sections td { padding: .65rem .55rem; border-bottom-color: var(--hairline); }
.vp-sbar, .vp-wbar { height: 8px; border-radius: 4px; }

/* The exam room: calm test-centre look, readable column, clear focus. */
.vp-sitting { --x-head: #1b2433; --x-sel: #edf2fd; --x-sel-line: #2f62d0; --x-line: #d5dae3; --x-soft: #f4f6f9; --x-muted: #535c70; font-family: var(--font, system-ui, sans-serif); }
.vp-bar { padding: .65rem 1.5rem; }
.vp-bar-exam { font-size: .95rem; }
.vp-timer { border-radius: var(--r-sm); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); min-width: 6rem; padding: .25rem .65rem; }
.vp-subbar { padding: .55rem 1.5rem; }
.vp-progress { height: 6px; max-width: 26rem; }
.vp-body { padding: 2rem 1.5rem 2.5rem; }
.vp-q { max-width: 50rem; }
.vp-stem { font-size: 1.125rem; line-height: 1.6; max-width: var(--read); margin-bottom: 1.25rem; }
.vp-qnum { color: var(--x-sel-line); }
.vp-opts { gap: .6rem; }
.vp-opt { border-radius: var(--r-md); }
.vp-opt-btn { align-items: center; min-height: 3.25rem; padding: .75rem 1rem; border-radius: var(--r-md) 0 0 var(--r-md); }
.vp-mark { margin-top: 0; flex: none; }
.vp-mark.vp-mark-box { border-radius: 4px; }
.vp-opt:hover { border-color: #9fb3d9; background: #fbfcfe; }
.vp-opt.vp-on:hover { background: var(--x-sel); }
.vp-strike { border-radius: 0 var(--r-md) var(--r-md) 0; }
.vp-opt-btn:focus-visible, .vp-strike:focus-visible, .vp-cell:focus-visible, .vp-flag:focus-visible, .vp-tab:focus-visible, .vp-sitting .vp-btn:focus-visible, .vp-sitting .vp-chip:focus-visible { outline: 3px solid var(--x-sel-line); outline-offset: 2px; box-shadow: none; }
.vp-foot { padding: .75rem 1.5rem; }
.vp-sitting .vp-btn { box-shadow: none; font-size: .95rem; }
.vp-keys { color: var(--x-muted); }
@media (max-width: 640px) {
  .vp-bar, .vp-subbar, .vp-body, .vp-foot { padding-left: .9rem; padding-right: .9rem; }
  .vp-stem { font-size: 1.05rem; }
}

/* Footer. */
.vp-footer { color: var(--muted); }
.vp-footer-h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.vp-footer a { text-decoration: none; }
.vp-footer a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.vp-disclaimer { color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  .vp-xcard:hover, .vp-vtile:hover, .vp-mode2:hover, .vp-pre:hover { transform: none; }
}
/* Fact strips: hairlines on the cells, so an odd last row never shows a grey hole. */
.vp-stats, .vp-factbar { gap: 0; background: var(--card); }
/* Cells are transparent so a later cell never paints over an earlier one's hairline. */
.vp-stats > div, .vp-factbar > div { background: transparent; box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border); }
/* Terminal lab: the Run button stays on the dark terminal surface. */
.vp-term-f .vp-term-run { background: transparent; box-shadow: none; }
.vp-term-f .vp-term-run:hover { background: #161b22; }

/* ════════════════════════════════════════════════════════════════════
   Practice v9 on design system v4: short sessions, pass probability,
   calibration / pace, twin questions, the mistake book.
   ════════════════════════════════════════════════════════════════════ */
.vp-short, .vp-ins, .vp-mb { border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); box-shadow: var(--elev-1); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-4); }
.vp-short { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); }
.vp-short-head .vp-h { margin: 0 0 .2rem; }
.vp-short-head .vp-fine { margin: 0; font-size: var(--fs-sm); max-width: 60ch; }
.vp-short-grid { display: grid; grid-template-columns: repeat(3, minmax(6.5rem, 1fr)); gap: var(--s-2); }
.vp-short-t { display: grid; justify-items: start; gap: .1rem; width: 100%; min-height: 4.5rem; padding: .7rem .9rem; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--card); color: var(--text); text-align: left; cursor: pointer; }
.vp-short-t:hover { background: var(--bg-hover); border-color: var(--accent-ring); }
.vp-short-t.vp-on { border-color: var(--accent); background: var(--accent-soft); }
.vp-short-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-short-m { font-size: var(--fs-xl); font-weight: 780; letter-spacing: -.02em; line-height: 1.1; }
.vp-short-m small { font-size: var(--fs-sm); font-weight: 650; color: var(--muted); }
.vp-short-n { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.vp-short-g { font-size: var(--fs-2xs); color: var(--tone-ok); font-weight: 700; }
.vp-short-grid > .vp-form { display: flex; }

.vp-ins { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-4) var(--s-6); }
.vp-ins-pass .vp-kicker { display: block; margin-bottom: .2rem; }
.vp-ins-big { margin: 0 0 .5rem; line-height: 1; }
.vp-ins-big b { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.vp-ins-big small { font-size: var(--fs-lg); color: var(--muted); font-weight: 650; }
.vp-ins .vp-meter { height: 8px; border-radius: 4px; max-width: 24rem; }
.vp-ins-fill { background: var(--accent); }
.vp-ins-low .vp-ins-fill { background: var(--tone-danger); }
.vp-ins-mid .vp-ins-fill { background: var(--tone-warn); }
.vp-ins-high .vp-ins-fill { background: var(--tone-ok); }
.vp-ins-pass .vp-fine { font-size: var(--fs-xs); margin: .6rem 0 0; max-width: 48ch; }
.vp-ins-top { display: grid; align-content: start; gap: .5rem; }
.vp-ins-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; counter-reset: ins; }
.vp-ins-list li { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: var(--r-md); background: var(--bg-soft); counter-increment: ins; }
.vp-ins-list li::before { content: counter(ins); flex: none; width: 1.4rem; height: 1.4rem; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--border); color: var(--muted); font-size: var(--fs-2xs); font-weight: 750; display: grid; place-items: center; }
.vp-ins-c { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 650; }
.vp-ins-c small { display: block; color: var(--faint); font-size: var(--fs-2xs); font-weight: 600; }
.vp-ins-g { flex: none; color: var(--tone-ok); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.vp-ins-top .vp-form { justify-self: start; }
.vp-ins-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--hairline); padding-top: var(--s-3); }
.vp-ins-facts > div { padding: 0 var(--s-3); }
.vp-ins-facts > div + div { border-left: 1px solid var(--hairline); }
.vp-ins-facts > div:first-child { padding-left: 0; }
.vp-ins-facts dt { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.vp-ins-facts dd { margin: .2rem 0 0; font-weight: 700; font-size: var(--fs-md); }
.vp-ins-facts dd small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; margin-top: .1rem; }
.vp-sum-facts { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
.vp-cal-over { color: var(--tone-danger); }
.vp-cal-under { color: var(--tone-warn); }
.vp-cal-good { color: var(--tone-ok); }
.vp-cal-unknown { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); }
.vp-pace { font-variant-numeric: tabular-nums; }
.vp-pace small { color: var(--faint); font-weight: 600; }
.vp-pace-behind { color: var(--tone-warn); }
.vp-pace-warn { margin: 0; padding: .55rem .8rem; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--tone-warn) 40%, transparent); background: var(--tone-warn-soft); color: var(--text); font-size: var(--fs-sm); max-width: 52rem; }
.vp-ins-tr { grid-column: 1 / -1; margin: 0; font-size: var(--fs-sm); color: var(--muted); }

.vp-pill-ad { border-color: var(--accent-ring); background: var(--accent-soft); color: var(--accent); }
.vp-pill-bad { border-color: color-mix(in srgb, var(--tone-danger) 40%, transparent); background: var(--tone-danger-soft); color: var(--tone-danger); }
.vp-pq-twin, .vp-pq:has(.vp-twin) { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-glow), var(--elev-1); }
.vp-twin { display: inline-flex; align-self: flex-start; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 750; letter-spacing: .01em; }
.vp-twin-fb { margin: .3rem 0 0; font-weight: 650; color: var(--text); }

.vp-mb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); }
.vp-mb-head .vp-h { margin: .15rem 0 .2rem; }
.vp-mb-head .vp-fine { margin: 0; font-size: var(--fs-sm); max-width: 60ch; }
.vp-mb-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.vp-mb-row { padding: .7rem .9rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-soft); }
.vp-mb-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.vp-mb-when { margin-left: auto; font-size: var(--fs-xs); }
.vp-mb-row .vp-nb-s { margin: .4rem 0 .2rem; color: var(--muted); font-size: var(--fs-sm); }
.vp-mb-row details summary { font-size: var(--fs-sm); color: var(--accent); font-weight: 650; cursor: pointer; }
.vp-mb-dots { display: inline-flex; gap: 3px; }
.vp-mb-dot { width: .6rem; height: .6rem; border-radius: 50%; border: 1.5px solid var(--border-strong); background: transparent; }
.vp-mb-dot.vp-mb-on { border-color: var(--tone-ok); background: var(--tone-ok); }
.vp-nb-h { margin: var(--s-5) 0 var(--s-2); }

.vp-xpace { margin-left: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--x-soft, #f4f6f9); color: var(--x-muted, #535c70); font-size: .8rem; font-weight: 650; }
.vp-xpace-behind { background: #fdf4e3; color: #7a4800; }

@media (max-width: 860px) {
  .vp-short { grid-template-columns: minmax(0, 1fr); }
  .vp-ins { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vp-short, .vp-ins, .vp-mb { padding: var(--s-3) var(--s-4); }
  .vp-short-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vp-short-t { min-height: 4rem; padding: .55rem .6rem; }
  .vp-ins-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .vp-ins-facts > div { padding: 0; }
  .vp-ins-facts > div + div { border-left: 0; border-top: 1px solid var(--hairline); padding-top: var(--s-2); }
  .vp-mb-head { flex-direction: column; }
  .vp-mb-when { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   Certifications catalog v10 (src/pages/catalog.rs, certs.rs) — on
   design system v4: header with stats · sticky search + area tabs ·
   collapsible filter panel · result line with removable tokens ·
   equal-height cards grouped by area · quieter "coming soon" section.
   Cards: the title link is stretched over the card (::after); the foot
   links sit above it, so there is no nested interactive content.
   ════════════════════════════════════════════════════════════════════ */
.vp-chead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-5); }
.vp-chead .vp-lede { margin: .35rem 0 0; max-width: 60ch; }
.vp-cstats { display: grid; grid-template-columns: repeat(3, auto); margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--elev-1); }
.vp-cstats > div { padding: .7rem 1.15rem; min-width: 7.5rem; }
.vp-cstats > div + div { border-left: 1px solid var(--hairline); }
.vp-cstats dt { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.vp-cstats dd { margin: .15rem 0 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); }
.vp-cstats dd small { font-size: var(--fs-sm); font-weight: 650; letter-spacing: 0; color: var(--muted); }

.vp-cbar { position: sticky; top: 0; z-index: 6; display: grid; gap: .6rem; margin: 0 0 .6rem; padding: .6rem 0; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); }
.vp-cbar-row { display: flex; align-items: stretch; gap: .5rem; }
.vp-csearch { position: relative; flex: 1 1 auto; min-width: 0; margin: 0; }
.vp-csearch-ico { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); display: flex; color: var(--faint); pointer-events: none; }
.vp-csearch-ico .icon, .vp-cfilt .icon { width: 1.05rem; height: 1.05rem; }
.vp-csearch-in { width: 100%; min-height: 2.75rem; padding: 0 1rem 0 2.6rem; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--card); color: var(--text); font: inherit; font-size: var(--fs-md); box-shadow: var(--elev-1); }
.vp-csearch-in::placeholder { color: var(--faint); opacity: 1; }
.vp-csearch-in:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)); }
.vp-csearch-go { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vp-cbar-row > .vp-form { display: flex; }
.vp-cfilt { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--r-md); }
.vp-cfilt.vp-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.vp-cfilt-n { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: 800; }
.vp-careas { margin: 0; }

.vp-cfp { display: grid; gap: .5rem; margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--elev-1); }
.vp-cfp[hidden] { display: none; }
.vp-cfp .vp-fgroup { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.vp-cfp .vp-fgroup + .vp-fgroup { padding-top: .5rem; border-top: 1px solid var(--hairline); }
.vp-cfp .vp-chips { gap: .35rem; }

.vp-cres { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; min-height: 2rem; margin: 0 0 var(--s-4); }
.vp-cres-n { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.vp-cres-n b { color: var(--text); font-variant-numeric: tabular-nums; }
.vp-cres-sort { color: var(--faint); font-size: var(--fs-xs); font-weight: 600; }
.vp-ctoks { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.vp-ctoks > .vp-form { display: inline-flex; }
.vp-ctok { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.75rem; padding: 0 .4rem 0 .7rem; border-radius: 999px; border: 1px solid var(--accent-ring); background: var(--accent-soft); color: var(--accent); font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; }
.vp-ctok:hover { border-color: var(--accent); }
.vp-ctok-x { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; font-size: .9rem; line-height: 1; }
.vp-ctok:hover .vp-ctok-x { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.vp-ctok:focus-visible, .vp-cfilt:focus-visible, .vp-cc-more:focus-visible, .vp-cres-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-cres-clear { background: none; border: 0; padding: 0 .25rem; font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.vp-csec { margin: 0 0 var(--s-6); }
.vp-csec-h { display: flex; align-items: center; gap: .6rem; margin: 0 0 var(--s-3); padding-bottom: .55rem; border-bottom: 1px solid var(--hairline); }
.vp-csec-dot { width: .65rem; height: .65rem; border-radius: 3px; background: var(--area, var(--faint)); flex: none; }
.vp-csec-t { margin: 0; font-size: var(--fs-lg); font-weight: 740; letter-spacing: -.015em; }
.vp-csec-n { margin-left: auto; color: var(--faint); font-size: var(--fs-xs); font-weight: 650; }
.vp-csec-live .vp-csec-dot { background: var(--tone-ok); border-radius: 50%; }
.vp-csec-soon .vp-csec-dot { background: transparent; border: 1.5px dashed var(--faint); border-radius: 50%; }

.vp-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: var(--s-3); align-items: stretch; }
.vp-cgrid-soon { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }

.vp-ccard { position: relative; display: flex; flex-direction: column; gap: .55rem; min-width: 0; padding: 1rem 1.1rem 1rem; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); box-shadow: var(--elev-1); transition: border-color var(--dur-1, .12s) ease, box-shadow var(--dur-1, .12s) ease, transform var(--dur-1, .12s) ease; }
.vp-ccard:hover { border-color: var(--accent-ring); box-shadow: var(--elev-2); transform: translateY(-1px); }
.vp-ccard:has(.vp-cc-link:focus-visible) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow), var(--elev-2); }
.vp-cc-top { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.vp-cc-code { color: var(--muted); font-size: var(--fs-xs); font-weight: 750; letter-spacing: .05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-cc-top .vp-lvl { margin-left: auto; white-space: nowrap; }
.vp-cc-title { margin: .1rem 0 0; font-size: 1.04rem; font-weight: 720; letter-spacing: -.012em; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-wrap: balance; }
.vp-cc-link { color: var(--text); text-decoration: none; }
.vp-cc-link::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.vp-cc-link:focus-visible { outline: none; }
.vp-ccard:hover .vp-cc-link { color: var(--accent); }
.vp-cc-area { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--muted); font-size: var(--fs-xs); font-weight: 650; }
.vp-cc-dot { width: .5rem; height: .5rem; border-radius: 2px; background: var(--area, var(--faint)); flex: none; }
.vp-cc-desc { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; min-height: 3em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.vp-cc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .2rem 0 0; padding: .6rem 0; border-block: 1px solid var(--hairline); }
.vp-cc-facts > div { padding: 0 .6rem; min-width: 0; }
.vp-cc-facts > div:first-child { padding-left: 0; }
.vp-cc-facts > div + div { border-left: 1px solid var(--hairline); }
.vp-cc-facts dt { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.vp-cc-facts dd { margin: .1rem 0 0; font-size: 1rem; font-weight: 760; letter-spacing: -.015em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-cc-facts dd small { font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0; color: var(--muted); }
.vp-cc-bank { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; color: var(--faint); font-size: var(--fs-xs); font-weight: 600; }
.vp-cc-bank b { color: var(--text); font-weight: 750; font-variant-numeric: tabular-nums; }
.vp-cc-me { display: grid; gap: .35rem; padding: .5rem .65rem; border-radius: var(--r-md); background: var(--bg-soft); }
.vp-cc-me-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .6rem; font-size: var(--fs-xs); }
.vp-cc-me-v { font-weight: 750; color: var(--muted); }
.vp-cc-me-v.vp-ready { color: var(--tone-ok); } .vp-cc-me-v.vp-almost { color: var(--tone-warn); } .vp-cc-me-v.vp-notyet { color: var(--tone-danger); }
.vp-cc-me-s { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.vp-cc-me .vp-meter-fill.vp-almost { background: var(--tone-warn); }
.vp-cc-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .3rem; }
.vp-cc-more { position: relative; z-index: 1; flex: none; white-space: nowrap; color: var(--accent); font-size: var(--fs-sm); font-weight: 650; text-decoration: none; border-radius: var(--r-sm); }
a.vp-cc-more:not(.vp-btn)::after { content: " →"; }
a.vp-cc-more:not(.vp-btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.vp-cc-cta { position: relative; z-index: 1; flex: none; width: auto; min-width: 7.5rem; padding: 0 1.1rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* Coming soon: flat, no shadow, muted title — clearly "not yet". */
.vp-ccard-soon { background: color-mix(in srgb, var(--card) 55%, var(--bg)); box-shadow: none; border-style: dashed; border-color: var(--border-strong); }
.vp-ccard-soon:hover { transform: none; box-shadow: none; border-color: var(--accent-ring); }
.vp-ccard-soon .vp-cc-link { color: var(--muted); }
.vp-ccard-soon .vp-cc-facts dd { color: var(--muted); }

@media (max-width: 900px) {
  .vp-chead { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .vp-cstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vp-cstats > div { min-width: 0; padding: .6rem .8rem; }
}
@media (max-width: 720px) {
  .vp-cbar { position: static; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .vp-cstats dd { font-size: 1.2rem; }
  .vp-cstats dt { letter-spacing: .04em; }
  .vp-cfilt { padding: 0 .8rem; }
  .vp-cfp { padding: var(--s-3); }
  .vp-cfp .vp-fgroup { grid-template-columns: 1fr; gap: .3rem; }
  .vp-cfp .vp-chips { flex-wrap: wrap; overflow: visible; }
  .vp-ccard { padding: .9rem 1rem; }
  .vp-cc-title, .vp-cc-desc { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vp-ccard, .vp-ccard:hover { transition: none; transform: none; }
}
@media (max-width: 720px) {
  .vp-careas { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); padding-right: 2rem; }
}

/* ══ Learn v11: flashcards (FSRS), fill in the blank, why is it wrong,
   exam countdown, knowledge map. Theme tokens only, so both themes keep
   AA contrast; status is shape + border style + text, never colour alone. */

/* Exam countdown (practice hub). */
.vp-cd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: center; margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-left: 6px solid var(--accent); border-radius: var(--r-md, 10px); background: var(--card); }
.vp-cd.vp-cd-soon { border-left-color: var(--tone-warn); }
.vp-cd.vp-cd-past { border-left-color: var(--faint); border-left-style: dashed; }
.vp-cd-num { display: grid; justify-items: center; min-width: 5.5rem; padding: .35rem .6rem; border-radius: 10px; background: var(--accent-soft); color: var(--text); text-align: center; }
.vp-cd-num b { font-size: 2.2rem; line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; }
.vp-cd-num span { font-size: .75rem; color: var(--muted); }
.vp-cd-soon .vp-cd-num { background: var(--tone-warn-soft); }
.vp-cd-body { display: grid; gap: .2rem; min-width: 0; }
.vp-cd-body .vp-fine { margin: 0; }
.vp-cd-t { margin: 0; font-size: 1.05rem; }
.vp-cd-date { margin: 0; color: var(--muted); font-size: .88rem; }
.vp-cd-src { display: block; font-size: .82rem; }
.vp-cd-src a { color: var(--accent); }
.vp-cd-side { display: flex; flex-direction: column; gap: .4rem; }

/* Deck list (/practice/flashcards/). */
.vp-decks-h { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.vp-decks { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .5rem; }
.vp-deck { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.vp-deck.vp-deck-all { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.vp-deck-n { display: grid; gap: .1rem; min-width: 0; }
.vp-deck-n b { overflow-wrap: anywhere; }
.vp-deck-c { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.vp-deck-due b { color: var(--text); }
.vp-deck-done { color: var(--tone-ok); font-weight: 700; font-size: .9rem; }
.vp-drills { list-style: none; margin: .5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .6rem; }
.vp-drill { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; align-items: start; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.vp-drill .vp-btn, .vp-drill > .vp-fine { grid-column: 2; justify-self: start; }
/* .vp-form is display: contents, so the act button is the flex/grid item. */
.vp-deck .vp-btn-sm, .vp-drill .vp-btn-sm, .vp-km-dh .vp-btn-sm, .vp-cd-side .vp-btn-sm { width: auto; flex: 0 0 auto; }
.vp-drill-ico { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 1.1rem; }
.vp-drill-t { margin: 0; font-size: 1rem; }
.vp-drill .vp-fine { margin: .15rem 0 0; }

/* Flashcard. */
.vp-fc2-face { display: grid; gap: .35rem; }
.vp-fc2-st { margin-left: auto; font-size: .78rem; color: var(--muted); }
.vp-fc2-flip { justify-self: start; }
.vp-fc2-ans { margin: 0; font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.vp-fc2-why { margin: 0; line-height: 1.55; }
.vp-fc2-more summary { cursor: pointer; color: var(--accent); font-size: .88rem; }
.vp-fc2-more .vp-fb-x { margin: .4rem 0 0; }
.vp-fc-on .vp-fc-back { animation: vp-fc2-in .28s ease-out; transform-origin: top center; }
@keyframes vp-fc2-in { from { opacity: 0; transform: rotateX(-12deg) translateY(-4px); } to { opacity: 1; transform: none; } }
.vp-kbd { display: inline-block; min-width: 1.3rem; padding: 0 .3rem; border: 1px solid var(--border-strong, var(--border)); border-bottom-width: 2px; border-radius: 4px; font: 600 .72rem/1.3 ui-monospace, monospace; color: var(--muted); text-align: center; }

/* Fill in the blank. */
.vp-cz, .vp-whyq { display: grid; gap: .9rem; padding: clamp(1rem, .7rem + 1.2vw, 1.75rem); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); background: var(--card); min-width: 0; }
.vp-cz-q { margin: 0; font-size: 1.15rem; line-height: 1.7; overflow-wrap: anywhere; }
.vp-cz-gap { display: inline-block; min-width: 4.5rem; border-bottom: 2px solid var(--accent); color: transparent; letter-spacing: -.1em; }
.vp-cz-fill { padding: 0 .25rem; border-radius: 4px; background: var(--accent-soft); color: var(--text); font-weight: 700; border-bottom: 2px solid var(--accent); }
.vp-cz-f { display: grid; gap: .35rem; }
.vp-cz-l { font-weight: 600; font-size: .9rem; }
.vp-cz-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.vp-cz-in { flex: 1 1 12rem; min-width: 0; padding: .6rem .75rem; border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; background: var(--bg, transparent); color: var(--text); font: inherit; font-size: 1.05rem; }
.vp-cz-in:focus-visible { outline: 3px solid var(--accent-ring, #2f6fdc); outline-offset: 1px; border-color: var(--accent); }
.vp-cz-alt, .vp-cz-next { gap: .75rem; align-items: center; flex-wrap: wrap; }
.vp-cz-res, .vp-why-sum { display: grid; gap: .25rem; padding: .75rem .9rem; border-radius: 10px; border: 1px solid var(--border); border-left-width: 5px; }
.vp-cz-res p { margin: 0; }
.vp-cz-h { font-size: 1rem; }
.vp-cz-ok { border-left-color: var(--tone-ok); background: var(--tone-ok-soft); }
.vp-cz-bad { border-left-color: var(--tone-danger); border-left-style: double; border-left-width: 6px; background: var(--tone-danger-soft); }
.vp-cz-you { font-weight: 600; overflow-wrap: anywhere; }

/* Why is it wrong? */
.vp-why-ok { display: grid; gap: .3rem; padding: .7rem .9rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--tone-ok) 50%, var(--border)); background: var(--tone-ok-soft); }
.vp-why-ok ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.vp-why-tag { font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--tone-ok); }
.vp-why-l { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; margin-right: .35rem; border-radius: 6px; border: 1px solid var(--border-strong, var(--border)); font-weight: 700; font-size: .85rem; }
.vp-why-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; align-items: start; }
.vp-why-reasons { position: sticky; top: 4.5rem; padding: .7rem .9rem; border-radius: 10px; background: var(--bg-soft, transparent); border: 1px solid var(--border); }
.vp-why-rs { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.vp-why-rs li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; line-height: 1.45; font-size: .92rem; overflow-wrap: anywhere; }
.vp-why-rn { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); font-weight: 800; font-size: .85rem; }
.vp-why-rows { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.vp-why-row { display: grid; gap: .45rem; padding: .7rem .8rem; border: 1px dashed var(--border-strong, var(--border)); border-radius: 10px; }
.vp-why-row.vp-why-set { border-style: solid; }
.vp-why-opt { margin: 0; overflow-wrap: anywhere; }
.vp-why-picks { display: flex; flex-wrap: wrap; gap: .35rem; }
.vp-why-b { display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; padding: 0 .5rem; border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.vp-why-b:hover { background: var(--bg-hover, rgba(127,127,127,.1)); }
.vp-why-b.vp-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); box-shadow: inset 0 0 0 2px var(--card); }
span.vp-why-b { cursor: default; }
.vp-why-b:focus-visible { outline: 3px solid var(--accent-ring, #2f6fdc); outline-offset: 2px; }
.vp-why-res { margin: 0; font-size: .9rem; font-weight: 600; }
.vp-why-good { color: var(--tone-ok); }
.vp-why-miss { color: var(--tone-danger); }

/* Knowledge map (/practice/map/). */
.vp-km { display: grid; gap: 1.25rem; }
.vp-km-top { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; align-items: center; justify-content: space-between; }
.vp-km-sum { margin: 0; font-size: 1.05rem; }
.vp-km-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.vp-km-key { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem .2rem .3rem; border: 1px solid var(--border); border-left-width: 4px; border-radius: 999px; font-size: .85rem; }
.vp-km-sw { font-size: 1rem; line-height: 1; width: 1.1rem; text-align: center; }
.vp-km-d { display: grid; gap: .6rem; }
.vp-km-dh { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.vp-km-dh > div { display: grid; gap: .25rem; min-width: 0; flex: 1 1 16rem; }
.vp-km-dt { margin: 0; font-size: 1.02rem; overflow-wrap: anywhere; }
.vp-km-dh .vp-fine { margin: 0; }
.vp-km-bar { display: flex; height: .5rem; max-width: 24rem; border-radius: 999px; overflow: hidden; background: var(--bg-soft, rgba(127,127,127,.15)); }
.vp-km-seg { flex: 0 0 calc(var(--w, 0) * .1%); }
.vp-km-seg.vp-km-s0 { background: var(--faint); opacity: .45; }
.vp-km-seg.vp-km-s1 { background: var(--tone-danger); }
.vp-km-seg.vp-km-s2 { background: var(--tone-warn); }
.vp-km-seg.vp-km-s3 { background: var(--tone-ok); }
.vp-km-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: .4rem; }
.vp-km-grid li { display: grid; min-width: 0; }
.vp-km-c { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .4rem; align-items: center; width: 100%; min-height: 2.75rem; padding: .4rem .55rem; border: 1px solid var(--border); border-left-width: 5px; border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: .84rem; line-height: 1.3; text-align: left; cursor: pointer; }
.vp-km-c:hover { background: var(--bg-hover, rgba(127,127,127,.1)); }
.vp-km-c:focus-visible { outline: 3px solid var(--accent-ring, #2f6fdc); outline-offset: 2px; }
.vp-km-g { font-size: 1rem; line-height: 1; width: 1rem; text-align: center; }
.vp-km-t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.vp-km-p { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--muted); }
/* Status: glyph + border style + tint (never colour alone). */
.vp-km-c.vp-km-s0, .vp-km-key.vp-km-s0 { border-left-style: dashed; border-left-color: var(--faint); }
.vp-km-c.vp-km-s1, .vp-km-key.vp-km-s1 { border-left-color: var(--tone-danger); background: var(--tone-danger-soft); }
.vp-km-c.vp-km-s2, .vp-km-key.vp-km-s2 { border-left-color: var(--tone-warn); background: var(--tone-warn-soft); }
.vp-km-c.vp-km-s3, .vp-km-key.vp-km-s3 { border-left-style: double; border-left-width: 6px; border-left-color: var(--tone-ok); background: var(--tone-ok-soft); }
.vp-km-s0 .vp-km-g, .vp-km-s0 .vp-km-sw { color: var(--muted); }
.vp-km-s1 .vp-km-g, .vp-km-s1 .vp-km-sw { color: var(--tone-danger); }
.vp-km-s2 .vp-km-g, .vp-km-s2 .vp-km-sw { color: var(--tone-warn); }
.vp-km-s3 .vp-km-g, .vp-km-s3 .vp-km-sw { color: var(--tone-ok); }

@media (max-width: 720px) {
  .vp-cd { grid-template-columns: auto minmax(0, 1fr); padding: .85rem; }
  .vp-cd-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .vp-cd-num { min-width: 4.5rem; }
  .vp-cd-num b { font-size: 1.8rem; }
  .vp-why-cols { grid-template-columns: minmax(0, 1fr); }
  .vp-why-reasons { position: static; }
  .vp-cz, .vp-whyq { padding: .9rem; }
  .vp-km-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
  .vp-deck .vp-btn-sm { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .vp-fc-on .vp-fc-back { animation: none; } }

/* ══ class-v11: case studies (practice) + post-exam deep review ═══════
   Case study: hub card .vp-cases, scenario <details> .vp-case-sc, the
   linked questions reuse the practice question markup (.vp-pq/.vp-popt).
   Deep review: charts are plain HTML + custom properties (--h, --w, --x,
   --y); each has a text summary and a table for screen readers. */
.vp-cases { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
.vp-cases-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.vp-cases-t { margin: 0; font-size: var(--fs-lg); }
.vp-case-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.vp-case-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); padding: var(--s-3); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg-soft); }
.vp-case-row-main { min-width: 0; flex: 1 1 16rem; display: grid; gap: .15rem; }
.vp-case-row-t { font-weight: 600; overflow-wrap: anywhere; }
.vp-case-row-m { color: var(--muted); font-size: var(--fs-sm); }
.vp-case-row-r { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.vp-case-best { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.vp-case-full { color: var(--tone-ok); font-weight: 600; }
.vp-case-new { color: var(--accent); }
.vp-case-done { color: var(--tone-ok); }
.vp-case { display: grid; gap: var(--s-4); min-width: 0; }
.vp-case-sc { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
.vp-case-sum { cursor: pointer; padding: var(--s-3) var(--s-4); font-weight: 600; border-radius: var(--r-lg); }
.vp-case-sum:focus-visible { outline: none; box-shadow: var(--focus); }
.vp-case-body { padding: 0 var(--s-4) var(--s-4); display: grid; gap: var(--s-3); min-width: 0; max-width: var(--read, 70ch); }
.vp-case-body p { margin: 0; line-height: var(--lh-body, 1.6); }
.vp-case-h { margin: var(--s-2) 0 0; font-size: var(--fs-md); }
.vp-case-ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.vp-case-body .vp-exhibit { max-width: 100%; overflow-x: auto; }
.vp-case-dots { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.vp-case-dot { width: 1.75rem; height: 1.75rem; display: inline-grid; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--border-strong); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--muted); background: var(--card); }
.vp-case-dot-cur { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.vp-case-dot-ok { background: var(--tone-ok-soft, #eaf6ef); border-color: var(--tone-ok); color: var(--tone-ok); }
.vp-case-dot-bad { background: var(--tone-danger-soft, #fcefef); border-color: var(--tone-danger); color: var(--tone-danger); }
:root:not([data-theme="light"]) .vp-case-dot-ok { background: rgba(74, 222, 128, .12); }
:root:not([data-theme="light"]) .vp-case-dot-bad { background: rgba(248, 113, 113, .12); }
.vp-case-q { min-width: 0; }
.vp-case-qtop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.vp-case-qn { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.vp-case-sumry { display: grid; gap: var(--s-3); }
.vp-case-res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.vp-case-res { display: grid; grid-template-columns: auto 1fr; gap: .2rem var(--s-3); padding: var(--s-3); border-radius: var(--r-md); border: 1px solid var(--border); border-left-width: 4px; background: var(--card); min-width: 0; }
.vp-case-res-ok { border-left-color: var(--tone-ok); }
.vp-case-res-bad { border-left-color: var(--tone-danger); }
.vp-case-res-m { font-weight: 700; }
.vp-case-res-ok .vp-case-res-m { color: var(--tone-ok); }
.vp-case-res-bad .vp-case-res-m { color: var(--tone-danger); }
.vp-case-res-t { overflow-wrap: anywhere; }
.vp-case-res-s { grid-column: 2; color: var(--muted); font-size: var(--fs-sm); }

/* Deep review */
.vp-deep { display: grid; gap: var(--s-6); min-width: 0; }
.vp-deep-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--s-3); margin: var(--s-4) 0; }
.vp-deep-kpis > div { padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); display: grid; gap: .1rem; }
.vp-deep-kpis dt { font-size: var(--fs-sm); color: var(--muted); }
.vp-deep-kpis dd { margin: 0; font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.vp-deep-sec { display: grid; gap: var(--s-3); min-width: 0; }
.vp-deep-sec > .vp-h { margin: 0; }
.vp-deep-scroll { max-width: 100%; overflow-x: auto; }
.vp-deep-dom td, .vp-deep-dom th { vertical-align: middle; }
.vp-deep-loss { display: block; height: .7rem; min-width: 2px; width: calc(var(--w, 0) * 1%); max-width: 100%; border-radius: var(--r-pill); background: var(--tone-danger); }
.vp-deep-tchart { --n: 10; --b: 50; position: relative; display: flex; align-items: flex-end; gap: 2px; height: 10rem; min-width: calc(var(--n) * 6px); padding: 0 0 1px; border-bottom: 1px solid var(--border-strong); }
.vp-deep-tb { flex: 1 1 0; min-width: 4px; height: calc(var(--h, 0) * 1%); min-height: 2px; border-radius: 2px 2px 0 0; }
.vp-deep-tb-ok, .vp-deep-legend .vp-deep-tb-ok { background: var(--tone-ok); }
.vp-deep-tb-bad, .vp-deep-legend .vp-deep-tb-bad { background: var(--tone-danger); }
.vp-deep-tb-skip, .vp-deep-legend .vp-deep-tb-skip { background: var(--border-strong); }
.vp-deep-tline { position: absolute; left: 0; right: 0; bottom: calc(var(--b) * 1%); border-top: 2px dashed var(--accent); pointer-events: none; }
.vp-deep-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--muted); }
.vp-deep-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.vp-deep-legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; }
.vp-deep-legend .vp-deep-lg-line { height: 0; border-top: 2px dashed var(--accent); border-radius: 0; }
.vp-deep-tbl summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.vp-deep-tbl summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.vp-deep-chs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-3); }
.vp-deep-ch { padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-top-width: 4px; border-radius: var(--r-md); background: var(--card); min-width: 0; }
.vp-deep-ch p { margin: 0; }
.vp-deep-ch-good { border-top-color: var(--tone-ok); }
.vp-deep-ch-bad { border-top-color: var(--tone-danger); }
.vp-deep-ch-meh { border-top-color: var(--tone-warn); }
.vp-deep-ch-n { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.vp-deep-ch-t { font-weight: 600; }
.vp-deep-pace { position: relative; width: 100%; max-width: 32rem; aspect-ratio: 16 / 10; margin: var(--s-2) 0 var(--s-5) var(--s-5); border-left: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
.vp-deep-diag { position: absolute; inset: 0; background: linear-gradient(to top left, transparent calc(50% - 1px), var(--accent) calc(50% - 1px), var(--accent) calc(50% + 1px), transparent calc(50% + 1px)); opacity: .55; pointer-events: none; }
.vp-deep-pt { position: absolute; left: calc(var(--x, 0) * 1%); bottom: calc(var(--y, 0) * 1%); width: .5rem; height: .5rem; margin: 0 0 -.25rem -.25rem; border-radius: 50%; background: var(--tone-ok); }
.vp-deep-pt-late { background: var(--tone-danger); }
.vp-deep-ax-x, .vp-deep-ax-y { position: absolute; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.vp-deep-ax-x { right: 0; bottom: -1.4rem; }
.vp-deep-ax-y { left: -1.4rem; bottom: 0; transform: rotate(-90deg); transform-origin: left bottom; }
@media (forced-colors: active) {
  .vp-deep-tb, .vp-deep-loss, .vp-deep-pt { background: CanvasText; forced-color-adjust: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vp-case-row, .vp-case-dot, .vp-deep-tb, .vp-deep-pt { transition: none; animation: none; }
}
.vp-duel-strip { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.vp-duel-strip a { color: var(--accent); font-weight: 600; }
/* ══ end class-v11 ══ */

/* ════════════════════════════════════════════════════════════════════
   Shell v13 on design system v4: header · menu · Display · footer.
   Last on purpose (restates the header from the blocks above).
   · Light theme is `color-scheme: only light` (here and above): with
     plain `light`, Chrome on Android with "dark theme for sites" (and
     Samsung Internet) algorithmically darkened the light theme — on a
     phone you could switch to light and still see dark.
   · Header: brand · primary nav · find · Display · theme · account ·
     menu. The rail is the phone's bottom tab bar only. Shrinks on
     scroll (html.cs-scrolled, set by static/pwa/shell.js).
   · Display prefs: html[data-cs-width|text|density|motion|contrast],
     applied before first paint by the inline <head> script.
   ════════════════════════════════════════════════════════════════════ */
/* The header is sized in px: the Display text size scales the page, not the
   chrome (an XL header would push the nav into the buttons). */
:root { --shell-h: 56px; --cs-nav-gap: 2px; }
html.cs-scrolled { --shell-h: 48px; }
.topbar.cs-top { font-size: 15px; }
.cs-top .topbar-brand-text { font-size: 16px; }
.cs-top .topbar-brand-sub { font-size: 12px; }
.cs-top .brand-mark { width: 30px; height: 30px; font-size: 15px; }
:root[data-theme="light"] { color-scheme: only light; }
:root:not([data-theme="light"]) { color-scheme: dark; }

/* Header layout */
.topbar.cs-top { display: flex; align-items: center; gap: var(--s-3); padding: 0 clamp(.75rem, 2vw, 1.5rem); border-bottom: 1px solid var(--hairline) !important; transition: height var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
html.cs-scrolled .topbar.cs-top { box-shadow: 0 1px 0 var(--border), 0 6px 18px rgba(15, 23, 42, .06) !important; }
.cs-top .topbar-brand { flex: 0 0 auto; }
html.cs-scrolled .cs-top .brand-mark { width: 26px; height: 26px; font-size: 13px; }
html.cs-scrolled .cs-top .topbar-brand-sub { display: none; }
.cs-nav { display: flex; align-items: center; gap: var(--cs-nav-gap); min-width: 0; margin-inline: auto; }
.cs-nav-a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 11px; border-radius: var(--r-md); color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.cs-nav-a .icon { width: 16px; height: 16px; opacity: .85; }
.cs-nav-a:hover { color: var(--text); background: var(--bg-hover); text-decoration: none; }
.cs-nav-a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.cs-nav-a[aria-current="page"] .icon { opacity: 1; }
.cs-top .topbar-right { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cs-nav + .topbar-right { margin-left: 0; }
.cs-ibtn, .cs-top .clf-theme { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.cs-ibtn:hover, .cs-top .clf-theme:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border); }
.cs-ibtn .icon, .clf-theme .icon { width: 17px; height: 17px; }
.cs-acct { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; margin-left: 3px; border-radius: var(--r-md); border: 1px solid var(--border-strong); color: var(--text); font-weight: 650; font-size: 14px; text-decoration: none; white-space: nowrap; }
.cs-acct:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.cs-acct[aria-current="page"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cs-menu-btn { display: none; }
:where(.cs-nav-a, .cs-ibtn, .cs-acct, .cs-btn, .cs-menu-a, .cs-find-a, .cs-seg-o):focus-visible, .cs-seg-o:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The app rail is only the phone's tab bar now. */
@media (min-width: 721px) { html[data-nav-at="top"] .rail { display: none !important; } }
/* Narrower desktops: the secondary links move into the menu. */
@media (max-width: 1499px) { .cs-top .topbar-brand-sub { display: none; } }
@media (max-width: 1365px) { .cs-nav-x { display: none; } .cs-menu-btn { display: inline-grid; } }
/* Never overlap the buttons, whatever the fonts do: the nav clips. */
.cs-nav { flex: 0 1 auto; min-width: 0; overflow: hidden; }
@media (max-width: 920px) { .cs-nav-a .icon { display: none; } .cs-nav-a { padding: 0 9px; } .cs-acct-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cs-acct { padding: 0; width: 36px; justify-content: center; } }
@media (max-width: 720px) {
  :root { --shell-h: 52px; }
  html.cs-scrolled { --shell-h: 46px; }
  .cs-nav, .cs-acct, .cs-find-btn { display: none; }
  .cs-top .topbar-right { gap: .15rem; }
  .cs-ibtn, .cs-top .clf-theme { width: 44px; height: 44px; }
}
/* Theme toggle: CSS icons (sun in dark, moon in light). */
.cs-top .clf-theme .clf-theme-ico { grid-area: 1 / 1; }
.cs-top .clf-theme { position: relative; }
:root[data-theme="light"] .clf-theme-sun, :root:not([data-theme="light"]) .clf-theme-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }

/* Dialogs (menu + Display) */
.cs-disp, .cs-drawer { padding: 0; border: 1px solid var(--border); background: var(--card); color: var(--text); box-shadow: var(--elev-3, 0 20px 48px rgba(0, 0, 0, .25)); overscroll-behavior: contain; }
.cs-disp::backdrop, .cs-drawer::backdrop { background: rgba(8, 10, 16, .4); }
.cs-disp { position: fixed; inset: calc(var(--shell-h) + .5rem) clamp(.5rem, 2vw, 1.5rem) auto auto; margin: 0; width: min(24rem, calc(100vw - 1rem)); max-height: calc(100dvh - var(--shell-h) - 1rem); overflow: auto; border-radius: var(--r-lg); }
.cs-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(23rem, 92vw); height: 100dvh; max-height: 100dvh; overflow: auto; border-radius: var(--r-lg) 0 0 var(--r-lg); }
.cs-disp-in, .cs-drawer-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; padding: 1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); }
.cs-disp, .cs-drawer { overflow-x: hidden; }
.cs-disp-in > *, .cs-drawer-in > * { min-width: 0; }
.cs-disp-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cs-disp-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 750; }
.cs-disp-sub { margin: -.4rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.cs-seg-f { margin: 0; padding: 0; border: 0; display: grid; gap: .35rem; min-width: 0; }
.cs-seg-f legend { padding: 0; margin-bottom: .35rem; font-size: var(--fs-sm); font-weight: 650; }
.cs-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--bg-soft); border: 1px solid var(--border); }
.cs-seg-o { position: relative; display: grid; place-items: center; min-height: 2.25rem; border-radius: calc(var(--r-md) - 3px); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); cursor: pointer; text-align: center; }
.cs-seg-o input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.cs-seg-o:has(input:checked) { background: var(--card); color: var(--text); box-shadow: var(--elev-1); }
.cs-seg-o:hover { color: var(--text); }
.cs-disp-foot, .cs-menu-foot { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding-top: .3rem; border-top: 1px solid var(--hairline); }
.cs-menu-foot { justify-content: flex-start; }
.cs-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: 0 1rem; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: transparent; color: var(--text); font: inherit; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; text-decoration: none; }
.cs-btn:hover { background: var(--bg-hover); text-decoration: none; }
.cs-btn-go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cs-btn-go:hover { background: var(--accent-dim); }
.cs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-find-w { display: flex; align-items: center; gap: .5rem; padding: 0 .75rem; min-height: 2.75rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-soft); color: var(--muted); }
.cs-find-w:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.cs-find { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1rem; outline: none; }
.cs-find-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.cs-find-l li { min-width: 0; }
.cs-menu-nav { grid-template-columns: minmax(0, 1fr); }
.cs-disp, .cs-drawer { box-sizing: border-box; }
.cs-find-a { display: flex; min-width: 0; overflow: hidden; align-items: baseline; gap: .6rem; padding: .45rem .6rem; border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
.cs-find-a b { flex: 0 0 auto; min-width: 5.5rem; font-variant-numeric: tabular-nums; }
.cs-find-a span { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-find-a:hover { background: var(--bg-hover); text-decoration: none; }
.cs-find-none { padding: .4rem .6rem; color: var(--muted); font-size: var(--fs-sm); }
.cs-menu-nav { display: grid; gap: 2px; padding-top: .6rem; border-top: 1px solid var(--hairline); }
.cs-menu-a { display: flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: 0 .7rem; border-radius: var(--r-md); color: var(--text); font-weight: 600; text-decoration: none; }
.cs-menu-a .icon { width: 1.1rem; height: 1.1rem; color: var(--muted); }
.cs-menu-a:hover { background: var(--bg-hover); text-decoration: none; }
.cs-menu-a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.cs-menu-a[aria-current="page"] .icon { color: var(--accent); }
@media (max-width: 520px) {
  .cs-disp { inset: auto 0 0 0; width: 100vw; max-width: 100vw; max-height: 88dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .cs-drawer[open] { animation: cs-in-r .18s var(--ease); }
  .cs-disp[open] { animation: cs-in-d .14s var(--ease); }
}
@keyframes cs-in-r { from { transform: translateX(1.5rem); opacity: 0; } }
@keyframes cs-in-d { from { transform: translateY(-.4rem); opacity: 0; } }

/* Display: content width, text size, density, motion, contrast */
html[data-cs-width="wide"] { --page-max: 96rem; }
html[data-cs-width="full"] { --page-max: none; }
html[data-cs-text="s"] { font-size: 93.75%; }
html[data-cs-text="l"] { font-size: 112.5%; }
html[data-cs-text="xl"] { font-size: 125%; }
html[data-cs-density="compact"] { --density: .86; --sec-gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); --ctl-h: 2.2rem; --ctl-h-lg: 2.6rem; --s-4: .75rem; --s-5: 1.1rem; --s-6: 1.5rem; --space-4: .75rem; --space-5: 1.1rem; }
html[data-cs-density="compact"] .work { padding: clamp(.5rem, 1.4vw, 1rem); }
html[data-cs-motion="reduce"] *, html[data-cs-motion="reduce"] *::before, html[data-cs-motion="reduce"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
html[data-cs-contrast="more"][data-theme="light"] { --muted: #2b3346; --faint: #3c4559; --border: #9aa3b5; --border-strong: #6b7488; --hairline: #b6bdcb; }
html[data-cs-contrast="more"]:not([data-theme="light"]) { --muted: #d3d8e4; --faint: #bcc3d2; --border: #5a647a; --border-strong: #7d879d; --hairline: #485065; }
html[data-cs-contrast="more"] a:not(.vp-btn):not(.cs-nav-a):not(.cs-menu-a):not(.cs-find-a):not(.rail-item):not(.topbar-brand):not(.cs-acct):not(.cs-btn) { text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-contrast: more) {
  :root[data-theme="light"] { --muted: #2b3346; --faint: #3c4559; --border: #9aa3b5; --border-strong: #6b7488; }
  :root:not([data-theme="light"]) { --muted: #d3d8e4; --faint: #bcc3d2; --border: #5a647a; --border-strong: #7d879d; }
}

/* Footer */
.vp-footer { margin-top: var(--sec-gap); padding: var(--s-6, 2rem) 0 calc(var(--s-5, 1.5rem) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-sm); }
.vp-foot-top { display: grid; grid-template-columns: minmax(14rem, 1.1fr) minmax(0, 3fr); gap: var(--s-5, 1.5rem) clamp(1.5rem, 4vw, 3.5rem); }
.vp-foot-about p { margin: .45rem 0 0; max-width: 34ch; line-height: 1.55; }
.vp-foot-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.vp-foot-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.1rem; padding: 0 .75rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.vp-foot-btn:hover { border-color: var(--accent); color: var(--accent); }
.vp-foot-btn .icon { width: .95rem; height: .95rem; }
.vp-foot-disp, .vp-foot-flip, .vp-foot-fb { white-space: nowrap; }
body:not(:has(#fb-tab)) .vp-foot-fb { display: none; }
.vp-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--s-5, 1.5rem); }
.vp-foot-cols ul { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .35rem; }
.vp-foot-cols a { color: var(--muted); text-decoration: none; }
.vp-foot-cols a:hover { color: var(--accent); text-decoration: underline; }
.vp-footer-h { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.vp-foot-exams li { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
.vp-foot-v { flex: 0 0 100%; color: var(--faint); font-size: var(--fs-xs); font-weight: 600; }
.vp-foot-exams a { font-variant-numeric: tabular-nums; }
.vp-foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin-top: var(--s-5, 1.5rem); padding-top: var(--s-4); border-top: 1px solid var(--hairline); font-size: var(--fs-xs); }
.vp-foot-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
.vp-foot-status::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: var(--faint); vertical-align: .05em; }
.vp-foot-st-ok::before { background: var(--tone-ok); }
.vp-foot-st-warn::before { background: var(--tone-warn); }
.vp-foot-ver { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Trademark block: collapsed by default (details), same faint look open. */
.vp-footer .vp-disc { margin: .9rem 0 0; border-top: 1px dashed var(--border); padding-top: .55rem; }
.vp-footer .vp-disc summary { cursor: pointer; font-size: var(--fs-2xs, .6875rem); font-weight: 650; color: var(--muted); list-style-position: inside; }
.vp-footer .vp-disc summary:hover { color: var(--ink); }
.vp-footer .vp-disc[open] summary { margin-bottom: .35rem; }
.vp-footer .vp-disclaimer { margin: 0; max-width: none; font-size: var(--fs-2xs, .6875rem); line-height: 1.5; color: var(--faint); }
@media (max-width: 960px) { .vp-foot-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .vp-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-footer { padding-top: var(--s-5, 1.5rem); }
  .vp-foot-about p { max-width: none; }
}
@media (forced-colors: active) { .cs-seg-o:has(input:checked) { outline: 2px solid CanvasText; } }
@media print { .topbar, .rail, .cs-disp, .cs-drawer, .vp-foot-acts { display: none !important; } }
/* ══ end shell-v13 ══ */

/* ══ Practice v14 ═══════════════════════════════════════════════════════
   Practice: 1 choose certification → 2 choose mode (src/pages/practice.rs)
   and the Stats section (src/pages/stats.rs, /stats/). Kept in one block
   so it merges cleanly with the shell work (header / footer / settings).
   ════════════════════════════════════════════════════════════════════ */
.vp-st { width: 100%; max-width: var(--page-max); margin-inline: auto; }
.vp-pr, .vp-st { display: grid; gap: var(--s-5); min-width: 0; }
.vp-pr > *, .vp-st > * { min-width: 0; }

/* Shared page head: kicker · title · facts, action on the right. */
.vp-pv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-top: var(--s-2); }
.vp-pv-id { display: grid; gap: .35rem; min-width: 0; flex: 1 1 20rem; }
.vp-pv-t { margin: 0; font-size: var(--fs-h1); font-weight: 780; overflow-wrap: anywhere; }
.vp-pv-code { display: inline-flex; align-items: center; gap: .45rem; vertical-align: middle; margin-right: .2rem; }
.vp-pv-code .vp-xcode { font-size: var(--fs-md); }
.vp-pv-facts { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.vp-pv-facts b { color: var(--text); font-variant-numeric: tabular-nums; }
.vp-pv-head > .vp-form { flex: 0 0 auto; }

/* Step 1 — the certification chooser. */
.vp-cc { display: grid; gap: var(--s-5); }
.vp-cc-search { margin: 0; max-width: 40rem; }
.vp-cc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: var(--s-5) var(--s-6); align-items: start; }
.vp-cc-sec { display: grid; gap: var(--s-2); min-width: 0; }
.vp-cc-h { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.vp-cc-soon { margin-left: auto; color: var(--faint); font-size: var(--fs-xs); font-weight: 600; }
.vp-cc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.vp-cc-quick { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--s-2); }
.vp-cc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; align-items: stretch; }
.vp-cc-row .vp-form { display: contents; }
.vp-cc-pick { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 6.5rem 5.5rem; align-items: center; gap: var(--s-3); min-height: 3.25rem; padding: .55rem .85rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: var(--elev-1); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.vp-cc-pick:hover { border-color: var(--accent-ring); background: var(--bg-hover); }
.vp-cc-pick.vp-on { border-color: var(--accent); background: var(--accent-soft); }
.vp-cc-pick:focus-visible, .vp-cc-pin:focus-visible, .vp-pv-more-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-cc-code { min-width: 0; }
.vp-cc-t { display: grid; min-width: 0; font-weight: 650; font-size: var(--fs-sm); line-height: 1.3; overflow-wrap: anywhere; }
.vp-cc-t small { color: var(--faint); font-weight: 500; font-size: var(--fs-xs); }
.vp-cc-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .45rem; }
.vp-cc-pct { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.vp-cc-due, .vp-cc-new, .vp-cc-ok { justify-self: end; font-size: var(--fs-2xs); font-weight: 700; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.vp-cc-due { background: var(--tone-warn-soft); color: var(--tone-warn); }
.vp-cc-new { background: var(--bg-soft); color: var(--muted); }
.vp-cc-ok { background: var(--tone-ok-soft); color: var(--tone-ok); }
.vp-cc-pin { width: 2.75rem; min-height: 3.25rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); color: var(--faint); font-size: 1.1rem; cursor: pointer; }
.vp-cc-pin:hover { color: var(--accent); border-color: var(--accent-ring); }
.vp-cc-pin.vp-on { color: var(--tone-warn); border-color: color-mix(in srgb, var(--tone-warn) 45%, transparent); background: var(--tone-warn-soft); }
.vp-cc-none { margin: 0; color: var(--muted); }
.vp-cc-none a { color: var(--accent); font-weight: 600; }

/* Step 2 — four primary modes. */
.vp-pv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: var(--s-3); }
.vp-pv-card { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-2); min-width: 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); box-shadow: var(--elev-1); }
.vp-pv-main { border-color: var(--accent-ring); background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--card); }
.vp-pv-ch { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.vp-pv-ico { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-md); background: var(--bg-soft); color: var(--accent); font-size: 1rem; }
.vp-pv-main .vp-pv-ico { background: var(--accent); color: var(--accent-ink); }
.vp-pv-ct { margin: 0; font-size: var(--fs-lg); font-weight: 720; letter-spacing: -.012em; }
.vp-pv-badge { padding: .1rem .5rem; border-radius: 999px; background: var(--tone-warn-soft); color: var(--tone-warn); font-size: var(--fs-2xs); font-weight: 750; }
.vp-pv-cd { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.vp-pv-ca { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-top: var(--s-1); }
.vp-pv-ca .vp-form { display: contents; }
.vp-pv-ca .vp-btn { width: auto; }
.vp-pv-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; margin: 0; padding: .65rem 1rem; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--bg-soft); color: var(--muted); font-size: var(--fs-sm); }
.vp-pv-sum b { color: var(--text); font-variant-numeric: tabular-nums; }
.vp-pv-sum .vp-link { margin-left: auto; }

/* "More ways to practice": one quiet toggle, compact rows. */
.vp-pv-more { display: grid; gap: var(--s-3); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); }
.vp-pv-more > .vp-form { display: block; }
.vp-pv-more-t { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .25rem 1rem; padding: .9rem 1.1rem; border: 0; border-radius: var(--r-lg); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.vp-pv-more-t:hover { background: var(--bg-hover); }
.vp-pv-more-l { font-weight: 700; }
.vp-pv-more-t .vp-fine { font-size: var(--fs-xs); overflow-wrap: anywhere; }
.vp-pv-chev { color: var(--muted); }
.vp-pv-more-b { display: grid; gap: var(--s-4); padding: 0 var(--s-4) var(--s-4); }
.vp-pv-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.vp-pv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem var(--s-4); padding: .8rem .2rem; border-top: 1px solid var(--hairline); }
.vp-pv-rt { display: grid; gap: .1rem; min-width: 0; }
.vp-pv-rh { margin: 0; font-size: var(--fs-md); font-weight: 680; }
.vp-pv-rt .vp-fine { margin: 0; font-size: var(--fs-sm); }
.vp-pv-ra { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.vp-pv-ra .vp-form, .vp-pv-ra .vp-chips .vp-form { display: contents; }
.vp-pv-ra .vp-btn { width: auto; }
.vp-pv-ra .vp-chips { justify-content: flex-end; }
.vp-pv-ra .vp-chip small { color: var(--faint); font-weight: 600; }
.vp-pv-more-b .vp-labs { margin: 0; }
.vp-pv-custom { min-width: 0; }

/* Practice session: options are choices until Check (a quiet hint). */
.vp-popt[aria-pressed="true"]:not(.vp-po-ok):not(.vp-po-bad) .vp-po-t { font-weight: 600; }

/* ── Stats ── */
.vp-st-switch { flex: 1 1 100%; }
.vp-st-switch .vp-form { display: contents; }
.vp-st-tabs { margin-top: calc(var(--s-2) * -1); }
.vp-st-map { margin-left: auto; color: var(--accent); }
.vp-st-sec { display: grid; gap: var(--s-3); min-width: 0; }
.vp-st-sec.vp-box { padding: var(--s-4) var(--s-5); }
.vp-st-sec > .vp-h, .vp-st-sec > p { margin: 0; }
.vp-st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: var(--s-3); margin: 0; }
.vp-st-kpi { display: grid; gap: .15rem; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); box-shadow: var(--elev-1); min-width: 0; }
.vp-st-kpi dt { font-size: var(--fs-xs); font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.vp-st-kpi dd { margin: 0; display: grid; gap: .1rem; }
.vp-st-kpi b { font-size: var(--fs-xl); font-weight: 760; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vp-st-kpi small { color: var(--muted); font-size: var(--fs-xs); }
.vp-st-goal { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.vp-st-goal .vp-form { display: contents; }
.vp-st-empty { margin: 0; padding: var(--s-4); border-radius: var(--r-md); border: 1px dashed var(--border-strong); color: var(--muted); }
.vp-st-empty a, .vp-st-sec a:not(.vp-btn) { color: var(--accent); font-weight: 600; }
.vp-st-scroll { max-width: 100%; overflow-x: auto; }
.vp-st-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.vp-st-tbl th, .vp-st-tbl td { padding: .55rem .6rem; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: middle; }
.vp-st-tbl thead th { font-size: var(--fs-xs); font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.vp-st-tbl tbody th small { display: block; color: var(--faint); font-weight: 500; font-size: var(--fs-xs); }
.vp-st-tbl td.vp-num { text-align: right; }
.vp-st-tbl .vp-meter { display: inline-block; width: 4rem; vertical-align: middle; }
.vp-st-tbl tr.vp-on th, .vp-st-tbl tr.vp-on td { background: var(--accent-soft); }
.vp-st-tbl .vp-form { display: inline; }
.vp-st-et { display: block; color: var(--muted); font-weight: 500; font-size: var(--fs-xs); }
.vp-st-tag { display: inline-flex; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--border); font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; color: var(--muted); }
.vp-st-tag.vp-st-ok { border-color: color-mix(in srgb, var(--tone-ok) 40%, transparent); background: var(--tone-ok-soft); color: var(--tone-ok); }
.vp-st-tag.vp-st-bad { border-color: color-mix(in srgb, var(--tone-danger) 40%, transparent); background: var(--tone-danger-soft); color: var(--tone-danger); }
.vp-st-verdict { margin: 0; padding: .8rem 1rem; border-radius: var(--r-md); border: 1px solid var(--border); border-left-width: 4px; background: var(--card); }
.vp-st-verdict.vp-st-ok { border-left-color: var(--tone-ok); }
.vp-st-verdict.vp-st-warn { border-left-color: var(--tone-warn); }
.vp-st-verdict.vp-st-bad { border-left-color: var(--tone-danger); }
.vp-st-deep { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; padding: .75rem 1rem; border-radius: var(--r-md); background: var(--accent-soft); }
.vp-st-bars { display: flex; align-items: flex-end; gap: 3px; height: 7rem; padding-bottom: 1px; border-bottom: 1px solid var(--border-strong); }
.vp-st-bars-sm { height: 5rem; }
.vp-st-bar { flex: 1 1 0; min-width: 3px; height: calc(var(--h, 0) * 1%); min-height: 3px; border-radius: 2px 2px 0 0; background: var(--accent); }
.vp-st-bar-bad { background: var(--tone-danger); }
.vp-st-bar0 { background: var(--border); }
.vp-st-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--s-4); }
.vp-st-list { list-style: none; margin: 0; padding: 0; display: grid; }
.vp-st-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--hairline); }
.vp-st-list li small { margin-left: .4rem; color: var(--faint); }
.vp-st-data { padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); border: 1px dashed var(--border-strong); }
.vp-st-data .vp-form { display: inline; }
.vp-st-confirm { display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--tone-danger-soft); }
.vp-st-confirm p { margin: 0; }
.vp-st .vp-ready-card, .vp-st .vp-rep, .vp-st .vp-ins, .vp-st .vp-heat { margin: 0; }

@media (max-width: 720px) {
  .vp-cc-pick { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code due" "t t" "m m"; gap: .3rem .6rem; }
  .vp-cc-code { grid-area: code; } .vp-cc-t { grid-area: t; } .vp-cc-m { grid-area: m; } .vp-cc-pick > .vp-cc-due, .vp-cc-pick > .vp-cc-new, .vp-cc-pick > .vp-cc-ok { grid-area: due; }
  .vp-pv-row { grid-template-columns: minmax(0, 1fr); }
  .vp-pv-ra, .vp-pv-ra .vp-chips { justify-content: flex-start; }
  .vp-pv-sum .vp-link { margin-left: 0; flex-basis: 100%; }
  .vp-pv-card { padding: var(--s-4); }
  .vp-st-sec.vp-box, .vp-st-data { padding: var(--s-3) var(--s-4); }
  .vp-st-map { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vp-cc-pick { transition: none; }
}
@media (forced-colors: active) {
  .vp-st-bar { background: CanvasText; forced-color-adjust: none; }
}
/* .vp-btn-sm is full-width + left-aligned by default (list rows); the
   v14 heads, mode rows and Stats use it as a compact inline button. */
.vp-pv-head .vp-btn-sm, .vp-pv-ra .vp-btn-sm, .vp-pv-ca .vp-btn-sm, .vp-st .vp-btn-sm { width: auto; justify-content: center; text-align: center; }
/* ══ end Practice v14 ══ */

/* ══ Quality v15 — honest statistics + hint ladder ════════════════════
   Kept minimal and self-contained (guide-v15 owns the surrounding
   Practice / Stats UI): the "Not enough data yet" state, what is needed,
   the evidence line, and the practice hint ladder. */
.vp-q15-na b, b.vp-q15-na, .vp-q15-na > b { color: var(--muted); font-weight: 600; }
.vp-st-kpi.vp-q15-na dd b { font-size: 1rem; }
.vp-rnum.vp-q15-na b { font-size: 1.15rem; }
.vp-q15-need { margin: var(--space-2, .5rem) 0 0; font-size: var(--t-sm, .9rem); color: var(--text, inherit); }
small.vp-q15-need { color: var(--muted); font-size: var(--t-xs, .8rem); }
.vp-q15-ev { font-style: normal; }
.vp-q15-hints { display: grid; gap: .5rem; margin: .75rem 0 .25rem; }
.vp-q15-hints .vp-btn { justify-self: start; width: auto; }
.vp-q15-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.vp-q15-step { padding: .55rem .75rem; border-radius: 8px; border: 1px solid var(--border); border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); line-height: 1.5; }
.vp-q15-step b { display: block; font-size: var(--t-xs, .8rem); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.vp-popt.vp-q15-out { opacity: .55; border-style: dashed; cursor: not-allowed; }
.vp-popt.vp-q15-out .vp-po-t { text-decoration: line-through; text-decoration-thickness: 2px; }
@media (forced-colors: active) {
  .vp-q15-step { border-left-color: Highlight; }
}
/* ══ end Quality v15 ══ */

/* ══ Guide v15 ══════════════════════════════════════════════════════════
   Continue card + today's session + quick starts (src/pages/guide.rs, on
   Practice and Home) and the knowledge map's domain cards
   (src/pages/recall.rs::map_page). Design system v4 tokens only.
   ════════════════════════════════════════════════════════════════════ */
.vp-gd { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top act" "why why"; align-items: center; gap: var(--s-2) var(--s-5); margin: 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--accent-ring); background: linear-gradient(180deg, var(--accent-soft), transparent 75%), var(--card); box-shadow: var(--elev-1); }
.vp-gd-top { grid-area: top; display: grid; gap: .3rem; min-width: 0; }
.vp-gd-last { margin: 0; font-size: 1.02rem; line-height: 1.45; overflow-wrap: anywhere; }
.vp-gd-last b { font-weight: 650; }
.vp-gd-act { grid-area: act; display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; align-items: center; }
.vp-gd-act .vp-form { display: contents; }
.vp-gd-act .vp-btn-lg { min-height: 3rem; padding-inline: 1.4rem; font-weight: 650; }
.vp-gd-why { grid-area: why; margin: 0; color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.vp-gd-why-l { font-weight: 600; color: var(--text); }
.vp-gd-home { width: 100%; max-width: var(--page-max); margin: var(--s-4) auto 0; }
.vp-gd-quick { display: grid; gap: var(--s-2); }
.vp-gd-qh { margin: 0; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.vp-gd-ql { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.vp-gd-ql .vp-form { display: block; height: 100%; }
.vp-gd-q { width: 100%; height: 100%; display: grid; gap: .2rem; align-content: start; padding: .8rem 1rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, background-color .12s; }
.vp-gd-q:hover { border-color: var(--accent-ring); background: var(--accent-soft); }
.vp-gd-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-gd-qt { font-weight: 650; }
.vp-gd-qs { color: var(--muted); font-size: var(--fs-sm); }

/* Knowledge map: domain cards → concepts. */
.vp-km-tools { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; }
.vp-km-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--s-3); }
.vp-km-ds > .vp-km-d { align-content: start; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); min-width: 0; }
.vp-km-ds > .vp-km-d:has(.vp-km-grid) { grid-column: 1 / -1; }
.vp-km-dim { opacity: .6; }
.vp-km-ds .vp-km-dh { flex-wrap: nowrap; align-items: flex-start; }
.vp-km-dm { display: grid; gap: .15rem; min-width: 0; }
.vp-km-w { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.vp-km-big { display: grid; justify-items: end; line-height: 1.1; flex: 0 0 auto; }
.vp-km-big b { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vp-km-big span { color: var(--muted); font-size: var(--fs-xs, .75rem); }
.vp-km-ds .vp-km-bar { max-width: none; }
.vp-km-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; margin: 0; font-size: var(--fs-sm); }
.vp-km-facts > div { display: contents; }
.vp-km-facts dt { color: var(--muted); }
.vp-km-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.vp-km-wk { display: inline-flex; gap: .3rem; align-items: baseline; padding: 0 .35rem; border-left: 3px solid currentColor; }
.vp-km-da { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.vp-km-da .vp-btn-sm { width: auto; justify-content: center; text-align: center; }
.vp-km-chev { margin-left: .35rem; }
.vp-km-none { margin: 0; }

@media (max-width: 720px) {
  .vp-gd { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "act" "why"; padding: var(--s-4); }
  .vp-gd-act { justify-content: stretch; }
  .vp-gd-act .vp-btn { flex: 1 1 100%; justify-content: center; }
  .vp-gd-ql { grid-template-columns: minmax(0, 1fr); }
  .vp-gd-home { margin-inline: var(--s-3); width: auto; }
  .vp-km-tools { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .vp-gd-q { transition: none; }
}
@media (forced-colors: active) {
  .vp-gd, .vp-gd-q, .vp-km-ds > .vp-km-d { border-color: CanvasText; }
}
/* ══ end Guide v15 ══ */

/* ════════════════════════════════════════════════════════════════════
   Cohesion v18 — design tightening (not a palette swap)
   · 8 px spacing tokens (--sp-1 … --sp-6) for new and shared layout.
   · One type scale: --fs-2xs … --fs-xl, --fs-h2, --fs-h1 (defined above).
   · One card style: .vp-box / .vp-card / .vp-pv-card / knowledge-map
     domains / guide questions share radius, border, surface and shadow.
   · Clear hover and focus-visible states on every interactive surface.
   · Mastery colours: --mastery-0 … --mastery-3 = Not started / Weak /
     Learning / Mastered, the same on the mastery grid, the knowledge map
     and every legend (learn::LEVELS, recall::Status).
   · Light, dark and the contrast modes keep working (tokens only).
   ════════════════════════════════════════════════════════════════════ */
:root {
  --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem;
  --cv-card-r: var(--r-lg, 14px);
  --cv-card-pad: clamp(var(--sp-2), .8rem + 1vw, var(--sp-3));
  --mastery-0: color-mix(in srgb, var(--faint) 40%, transparent);
  --mastery-1: var(--tone-danger);
  --mastery-2: var(--tone-warn);
  --mastery-3: var(--tone-ok);
  --mastery-1-soft: var(--tone-danger-soft);
  --mastery-2-soft: var(--tone-warn-soft);
  --mastery-3-soft: var(--tone-ok-soft);
}

/* Type scale on the shared text roles. */
.vp-kicker { font-size: var(--fs-2xs); }
.vp-fine { font-size: var(--fs-sm); }
.vp-h { font-size: var(--fs-lg); line-height: 1.3; }
.vp-h3 { font-size: var(--fs-md); line-height: 1.35; }
.vp-lede { font-size: var(--fs-md); }
.vp-page-head { margin-bottom: var(--sp-3); }

/* One card. */
.vp-box, .vp-card, .vp-pv-card, .vp-km-ds > .vp-km-d, .vp-gd-q, .vp-acard {
  border-radius: var(--cv-card-r); border: 1px solid var(--border); background: var(--card); box-shadow: var(--elev-1);
}
.vp-box { padding: var(--cv-card-pad); }
/* Interactive cards lift; static ones (About) do not. */
a.vp-card, button.vp-card, a.vp-dash-row, .vp-gd-q { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.vp-card:hover, button.vp-card:hover, a.vp-dash-row:hover, .vp-gd-q:hover { border-color: var(--accent); box-shadow: var(--elev-2); }
.vp-ab-sec .vp-card:hover { transform: none; border-color: var(--border); box-shadow: var(--elev-1); }

/* Hover + focus. */
.vp-ptab:not(.vp-on):hover { color: var(--text); background: var(--bg-hover); }
.vp-link:hover, .vp-foot-cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
:is(.vp-btn, .vp-chip, .vp-ptab, .vp-card, .vp-link, .vp-dash-row, .vp-gd-q, .vp-ws-cert, .vp-foot-cols a, .vp-foot-btn):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Mastery colours — one meaning everywhere. */
.vp-m0 { background: var(--mastery-0); }
.vp-m1 { background: var(--mastery-1); }
.vp-m2 { background: var(--mastery-2); }
.vp-m3 { background: var(--mastery-3); }
.vp-km-seg.vp-km-s0 { background: var(--mastery-0); opacity: 1; }
.vp-km-seg.vp-km-s1 { background: var(--mastery-1); }
.vp-km-seg.vp-km-s2 { background: var(--mastery-2); }
.vp-km-seg.vp-km-s3 { background: var(--mastery-3); }
.vp-km-c.vp-km-s1, .vp-km-key.vp-km-s1 { border-left-color: var(--mastery-1); background: var(--mastery-1-soft); }
.vp-km-c.vp-km-s2, .vp-km-key.vp-km-s2 { border-left-color: var(--mastery-2); background: var(--mastery-2-soft); }
.vp-km-c.vp-km-s3, .vp-km-key.vp-km-s3 { border-left-color: var(--mastery-3); background: var(--mastery-3-soft); }
html[data-cs-contrast="more"] .vp-m0, html[data-cs-contrast="more"] .vp-km-seg.vp-km-s0 { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
@media (forced-colors: active) {
  .vp-m0, .vp-m1, .vp-m2, .vp-m3, .vp-km-seg { forced-color-adjust: none; }
  .vp-box, .vp-card, .vp-pv-card { border-color: CanvasText; }
  .vp-est { border: 1px solid CanvasText; }
}

/* Shell: About in the app shell (no rail entry, page width). */
.rail-item[data-page="about"] { display: none !important; }
[data-island="about"] { width: 100%; max-width: var(--page-max); margin-inline: auto; }
.cs-menu-sep { display: block; height: 1px; margin: var(--sp-1) 0; background: var(--border); }

/* Certification workspace row (pages::workspace). */
.vp-ws { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-3); }
.vp-ws-cert { display: inline-flex; align-items: baseline; gap: .35rem; padding: .35rem 0; color: var(--text); text-decoration: none; white-space: nowrap; }
.vp-ws-cert b { font-size: var(--fs-sm); letter-spacing: .02em; }
.vp-ws-cert:hover b { color: var(--accent); }
.vp-ws-tabs { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
  .vp-ws { display: grid; gap: var(--sp-1); }
  .vp-ws-cert { padding: 0; }
  .vp-ws-tabs.vp-ptabs { grid-template-columns: repeat(5, auto); justify-content: stretch; }
  .vp-ws-tabs .vp-ptab { padding: .35rem .3rem; font-size: var(--fs-xs); gap: .2rem; }
  .vp-ws-tabs .vp-chip-n { min-width: 1.1rem; padding: 0 .25rem; line-height: 1.1rem; }
}

/* Estimated scores. */
.vp-est { display: inline-block; margin-left: var(--sp-1); padding: .1rem .5rem; border-radius: var(--r-pill, 999px); background: var(--bg-soft); color: var(--muted); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }

/* About + How it's built (pages::about). */
.vp-ab-tabs { margin-bottom: var(--sp-3); }
.vp-ab-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-2); padding: 0; list-style: none; }
.vp-ab-facts li { display: grid; gap: .15rem; padding: var(--sp-2); border-radius: var(--cv-card-r); border: 1px solid var(--border); background: var(--card); box-shadow: var(--elev-1); }
.vp-ab-facts strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; line-height: 1.2; }
.vp-ab-facts span { color: var(--muted); font-size: var(--fs-sm); }
.vp-ab-sec { margin: var(--sp-5) 0 0; }
.vp-ab-sec > .vp-h { font-size: var(--fs-h2); margin-bottom: var(--sp-2); }
.vp-ab-sec.vp-box > .vp-h { font-size: var(--fs-lg); }
.vp-ab-sec p { max-width: var(--read, 70ch); line-height: 1.6; }
.vp-ab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp-2); }
.vp-ab-grid .vp-card { display: block; padding: var(--cv-card-pad); }
.vp-ab-grid .vp-card p { margin: var(--sp-1) 0 0; color: var(--muted); }
.vp-ab-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-2); padding: 0; list-style: none; counter-reset: none; }
.vp-ab-flow > li { display: grid; gap: .2rem; padding: var(--sp-2); }
.vp-ab-flow small { color: var(--muted); font-size: var(--fs-sm); }
.vp-ab-steps, .vp-ab-list { margin: var(--sp-1) 0 0; padding-left: 1.25rem; display: grid; gap: var(--sp-1); color: var(--muted); line-height: 1.55; }
.vp-ab-steps b, .vp-ab-list b { color: var(--text); }
.vp-ab-cost { width: 100%; max-width: 40rem; border-collapse: collapse; font-size: var(--fs-sm); }
.vp-ab-cost th, .vp-ab-cost td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--border); text-align: left; }
.vp-ab-cost td:last-child, .vp-ab-cost tfoot td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-ab-cost tfoot th, .vp-ab-cost tfoot td { font-weight: 700; border-bottom: 0; }
@media (max-width: 640px) { .vp-ab-sec { margin-top: var(--sp-4); } }
/* Counts (exam::facts): the number span takes its strip's number style,
   never the label style of a sibling `span` rule. */
.vp-stats strong .vp-fact, .vp-ab-facts strong .vp-fact, .vp-cstats dd .vp-fact { font: inherit; color: inherit; letter-spacing: inherit; }
/* ═══ end Cohesion v18 ═══ */
/* ══ Study v18 — today's session, picker filters, flashcards, Progress ══ */
/* Today's session (Dashboard card, Progress "In short"). */
.vp-today { display: grid; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--bg-soft); }
.vp-today-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem; }
.vp-today-t { font-weight: 750; color: var(--text); }
.vp-today-total { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.vp-today-prog { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.vp-today-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.vp-today-part { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto auto; align-items: center; gap: .3rem .6rem; min-height: 2.75rem; padding: .3rem .5rem; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--border); }
.vp-today-part .vp-form { display: contents; }
.vp-today-ix { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--bg-soft); color: var(--muted); font-size: var(--fs-xs); font-weight: 750; }
.vp-today-what { min-width: 0; font-weight: 650; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.vp-today-d { color: var(--muted); font-weight: 600; }
.vp-today-meta { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vp-today-go { width: auto; min-height: 2.25rem; }
.vp-today-part.is-done { background: transparent; }
.vp-today-part.is-done .vp-today-ix { background: var(--tone-ok-soft); color: var(--tone-ok); }
.vp-today-part.is-done .vp-today-what { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.vp-today-part.is-cur { border-color: var(--accent-ring); background: var(--accent-soft); }
.vp-today-part.is-cur .vp-today-ix { background: var(--accent); color: var(--accent-ink); }
.vp-today-st { color: var(--text); font-weight: 700; }
.vp-today-basis { margin: 0; color: var(--faint); font-size: var(--fs-xs); }
/* Stepper above a running part, and the way on from its summary. */
.vp-today-step { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin: 0 0 var(--s-2); padding: .45rem .75rem; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--bg-soft); font-size: var(--fs-xs); }
.vp-today-step-h { font-weight: 750; color: var(--text); }
.vp-today-step ol { display: flex; flex-wrap: wrap; gap: .3rem .9rem; list-style: none; margin: 0; padding: 0; color: var(--muted); }
.vp-today-step li.is-done { color: var(--tone-ok); }
.vp-today-step li.is-cur { color: var(--text); font-weight: 700; }
.vp-today-step small { color: var(--faint); font-weight: 500; }
.vp-today-fin { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--tone-ok); font-weight: 700; }

/* Practice chooser: level / vendor filters, one-click start rows. */
.vp-cc-filt { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; }
.vp-cc-fg { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.vp-cc-fg .vp-form { display: inline-flex; }
.vp-cc-fl { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; margin-right: .2rem; }
.vp-cc-row-go { grid-template-columns: minmax(0, 1fr) auto auto; }
.vp-cc-go { width: auto; min-height: 3.25rem; white-space: nowrap; }

/* Compact certification dropdown (Flashcards, Knowledge map). */
.vp-xdrop { position: relative; max-width: 40rem; }
.vp-xdrop-s { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .35rem .8rem; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); cursor: pointer; list-style: none; }
.vp-xdrop-s::-webkit-details-marker { display: none; }
.vp-xdrop-s:hover { border-color: var(--accent-ring); }
.vp-xdrop-s:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-xdrop-s .vp-xcode { flex: none; white-space: nowrap; }
.vp-xdrop-l { flex: none; color: var(--faint); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vp-xdrop-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-size: var(--fs-sm); }
.vp-xdrop-c { margin-left: auto; color: var(--muted); transition: transform var(--dur-1) var(--ease); }
.vp-xdrop[open] .vp-xdrop-c { transform: rotate(180deg); }
.vp-xdrop-p { margin-top: .4rem; padding: var(--s-3); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); box-shadow: var(--elev-1); }

/* Flashcards: due reviews ahead of new cards. */
.vp-fc-due, .vp-fc-new { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.vp-fc-due { border-color: color-mix(in srgb, var(--tone-warn) 40%, var(--border)); }
.vp-fc-due.vp-fc-clear { border-color: color-mix(in srgb, var(--tone-ok) 35%, var(--border)); }
.vp-fc-main { display: grid; gap: .25rem; min-width: 0; flex: 1 1 18rem; }
.vp-fc-main .vp-h, .vp-fc-main p { margin: 0; }
.vp-fc-big { font-size: var(--fs-lg); font-weight: 650; }
.vp-fc-big b { font-weight: 780; font-variant-numeric: tabular-nums; }
.vp-fc-mid b { font-variant-numeric: tabular-nums; }
.vp-fc-act { display: flex; flex-wrap: wrap; gap: .5rem; }
.vp-fc-act .vp-form { display: contents; }
.vp-fc-act .vp-btn { width: auto; }

/* Progress: plain-language first view, Analysis explainer. */
.vp-st-plain { display: grid; gap: .4rem; }
.vp-st-plain p { margin: 0; }
.vp-st-plain-t { margin: 0; font-size: var(--fs-xl, 1.4rem); font-weight: 760; letter-spacing: -.015em; }
.vp-st-plain.vp-st-ok .vp-st-plain-t { color: var(--tone-ok); }
.vp-st-plain.vp-st-warn .vp-st-plain-t { color: var(--tone-warn); }
.vp-st-plain.vp-st-bad .vp-st-plain-t { color: var(--tone-danger); }
.vp-st-howl { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.vp-st-howl b { color: var(--text); }

@media (max-width: 720px) {
  .vp-today { padding: var(--s-3); }
  .vp-today-part { grid-template-columns: 1.75rem minmax(0, 1fr) auto; }
  .vp-today-meta { grid-column: 2; white-space: normal; }
  .vp-today-go { grid-column: 3; grid-row: 1 / span 2; }
  .vp-today-prog { margin-left: 0; }
  .vp-cc-row-go { grid-template-columns: minmax(0, 1fr) auto; }
  .vp-cc-row-go .vp-cc-go { grid-column: 1 / -1; min-height: 2.75rem; }
  .vp-fc-act, .vp-fc-act .vp-btn { width: 100%; }
}
@media (forced-colors: active) {
  .vp-today-part, .vp-xdrop-s, .vp-xdrop-p { border-color: CanvasText; }
}
/* ══ end Study v18 ══ */

/* i18n v19 (docs/I18N.md): Swedish gloss on English exam terms. The tip is
   in the text (screen readers read "term (svensk term)"), shown as a bubble
   on hover / keyboard focus only. */
.vp-gl { position: relative; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); text-underline-offset: .2em; cursor: help; border-radius: 2px; }
.vp-gl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vp-gl-tip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vp-gl:hover > .vp-gl-tip, .vp-gl:focus > .vp-gl-tip, .vp-gl:focus-within > .vp-gl-tip {
  width: auto; height: auto; overflow: visible; clip-path: none; z-index: 30;
  left: 50%; bottom: calc(100% + .35rem); transform: translateX(-50%);
  padding: .25rem .55rem; border-radius: var(--r-md); background: var(--text); color: var(--bg);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) { .vp-gl:hover > .vp-gl-tip, .vp-gl:focus > .vp-gl-tip { animation: vp-gl-in .12s ease-out; } }
@keyframes vp-gl-in { from { opacity: 0; } to { opacity: 1; } }
.vp-foot-lang { text-decoration: none; }


/* ── Landing v20 ──────────────────────────────────────────────────────
   Hero: a real question, answerable without JS (radio + :has()). The
   feedback is prerendered and only revealed — answering writes no DOM. */
.vp-hero-free { margin: var(--space-3) 0 0; font-size: var(--fs-xs, .8rem); color: var(--muted); }
.vp-hero2-cta { flex-wrap: wrap; gap: var(--space-2); }
.vp-hq { display: grid; gap: .65rem; padding: 1rem 1rem 1.1rem; border-radius: var(--r-lg, 14px); border: 1px solid var(--border); background: var(--card); box-shadow: var(--elev-2); }
.vp-hq-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; font-size: var(--fs-xs, .78rem); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.vp-hq-code { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--faint, var(--muted)); }
.vp-hq-stem { margin: 0; font-weight: 650; line-height: 1.5; }
.vp-hq-opts { display: grid; gap: .45rem; }
.vp-hq-o { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: .6rem; align-items: start; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.vp-hq-o:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.vp-hq-r { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vp-hq-o:has(.vp-hq-r:focus-visible) { outline: 3px solid #2f6fdc; outline-offset: 2px; }
.vp-hq-k { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--border-strong, var(--border)); font-size: .75rem; font-weight: 750; }
.vp-hq-t { display: grid; gap: .3rem; line-height: 1.45; font-size: var(--t-sm, .925rem); }
.vp-hq-note, .vp-hq-mark, .vp-hq-fb > *, .vp-hq-fb { display: none; }
.vp-hq-note { color: var(--muted); font-size: var(--fs-xs, .8rem); }
.vp-hq-mark { font-weight: 800; color: var(--tone-ok, #2fbf71); }
.vp-hq-hint { margin: 0; font-size: var(--fs-xs, .8rem); color: var(--muted); }
.vp-hq:has(.vp-hq-r:checked) .vp-hq-hint { display: none; }
.vp-hq:has(.vp-hq-r:checked) .vp-hq-fb { display: grid; gap: .4rem; }
.vp-hq:has(.vp-hq-r:checked) .vp-hq-why { display: grid; gap: .5rem; }
.vp-hq:has(.vp-hq-ok .vp-hq-r:checked) .vp-hq-yes { display: block; color: var(--tone-ok, #2fbf71); }
.vp-hq:has(.vp-hq-o:not(.vp-hq-ok) .vp-hq-r:checked) .vp-hq-no { display: block; color: var(--tone-danger, #e5484d); }
.vp-hq:has(.vp-hq-r:checked) .vp-hq-ok { border-color: var(--tone-ok, #2fbf71); background: color-mix(in srgb, var(--tone-ok, #2fbf71) 11%, transparent); }
.vp-hq:has(.vp-hq-r:checked) .vp-hq-ok .vp-hq-k { background: var(--tone-ok, #2fbf71); border-color: var(--tone-ok, #2fbf71); color: #fff; }
.vp-hq:has(.vp-hq-r:checked) .vp-hq-ok .vp-hq-mark { display: block; }
.vp-hq-o:not(.vp-hq-ok):has(.vp-hq-r:checked) { border-color: var(--tone-danger, #e5484d); background: color-mix(in srgb, var(--tone-danger, #e5484d) 10%, transparent); }
.vp-hq-o:not(.vp-hq-ok):has(.vp-hq-r:checked) .vp-hq-k { background: var(--tone-danger, #e5484d); border-color: var(--tone-danger, #e5484d); color: #fff; }
.vp-hq-o:has(.vp-hq-r:checked) .vp-hq-note { display: block; }
.vp-hq-fb p { margin: 0; }
.vp-hq-why p { color: var(--muted); font-size: var(--t-sm, .9rem); line-height: 1.55; }
.vp-hq-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
/* Area tiles without a ready exam follow, quieter. */
.vp-vtile-soon { background: color-mix(in srgb, var(--card) 55%, var(--bg)); box-shadow: none; border-style: dashed; }
.vp-vtile-soon .vp-vtile-t, .vp-vtile-soon .vp-vtile-n { color: var(--muted); }
/* For teachers and classes. */
.vp-teach { margin-bottom: var(--sec-gap); }
.vp-teach-p { margin: 0 0 var(--space-4); color: var(--muted); max-width: 62ch; line-height: 1.6; }
.vp-teach .vp-feat-grid article { display: grid; gap: .45rem; align-content: start; }
/* Not-affiliated line next to exam names; the score caveat. */
.vp-indep { margin: var(--space-2) 0 0; font-size: var(--fs-xs, .8rem); color: var(--muted); line-height: 1.5; max-width: 70ch; }
.vp-score-note { margin: var(--space-3) 0 var(--space-4); padding: .75rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 6%, var(--card)); font-size: var(--t-sm, .9rem); line-height: 1.55; color: var(--muted); }
.vp-score-note strong { color: var(--text); }
/* Catalog: coming-soon exams folded under their heading. */
.vp-soon-fold > summary { cursor: pointer; list-style: none; }
.vp-soon-fold > summary::-webkit-details-marker { display: none; }
.vp-soon-more::after { content: "▸"; color: var(--muted); font-size: .9rem; }
.vp-soon-fold[open] .vp-soon-more::after { content: "▾"; }
.vp-soon-fold > summary:focus-visible { outline: 3px solid #2f6fdc; outline-offset: 2px; }
}
@layer desk {
/* Desk pack tracks. Layered in `@layer desk`. Default 3-col (main off, empty-rail :has(… */
.workspace[data-pack="desk"][data-side="on"][data-end="on"][data-flow="off"][data-stack="off"][data-dock="off"] {
  display: grid;
  contain: none;
  grid-template-columns:
    minmax(13rem, min(var(--side-w, 18rem), 30rem))
    minmax(0, 1fr)
    minmax(12rem, min(var(--end-w, 16rem), 24rem));
  grid-template-rows: var(--top-h, auto) minmax(0, 1fr) auto;
  grid-template-areas:
    "top top top"
    "side main end"
    "side foot end";
}
.workspace[data-pack="desk"][data-side="on"][data-end="on"][data-lead="end"][data-flow="off"][data-stack="off"][data-dock="off"] {
  grid-template-columns:
    minmax(12rem, min(var(--end-w, 16rem), 24rem))
    minmax(0, 1fr)
    minmax(13rem, min(var(--side-w, 18rem), 30rem));
  grid-template-rows: var(--top-h, auto) minmax(0, 1fr) auto;
  grid-template-areas:
    "top top top"
    "end main side"
    "end foot side";
}
.workspace[data-pack="desk"][data-side="on"][data-end="on"][data-flow="on"] {
  display: grid;
  contain: none;
  grid-template-columns:
    minmax(13rem, min(var(--side-w, 18rem), 30rem))
    minmax(0, 1fr)
    minmax(12rem, min(var(--end-w, 16rem), 24rem));
  grid-template-rows: var(--top-h, auto) minmax(0, 1fr) minmax(0, auto) minmax(0, auto) auto auto;
  grid-template-areas:
    "top top top"
    "side main end"
    "side flow end"
    "side stack end"
    "side foot end"
    "dock dock dock";
}
/* Default floor recipe (main off, 3-row) lives unlayered in flow.css peel tail so it is… */
.workspace[data-pack="desk"][data-side="on"][data-end="on"][data-lead="end"][data-flow="on"][data-main="off"][data-stack="off"][data-dock="off"] {
  grid-template-columns:
    minmax(12rem, min(var(--end-w, 16rem), 24rem))
    minmax(0, 1fr)
    minmax(13rem, min(var(--side-w, 18rem), 30rem));
  grid-template-areas:
    "top top top"
    "end flow side"
    "end foot side";
}
}
@layer desk {
/* Desk skins + resize grips. Lattice tracks live in flow.css (peel tail). */
.workspace[data-skin="game"] {
  --top-h: 2.5rem;
  --side-w: 14rem;
  --end-w: 14rem;
}
.workspace[data-surface="flat"][data-skin="game"] [data-area="flow"] {
  background: var(--fill-ink);
}
[data-z] { z-index: calc(2 + var(--z, 0)); }
[data-lock] { cursor: default; }
[data-tile-resize] {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  z-index: 4;
}
[data-tile-resize="n"], [data-tile-resize="s"] { left: 50%; width: 1.2rem; margin-left: -0.6rem; cursor: ns-resize; }
[data-tile-resize="e"], [data-tile-resize="w"] { top: 50%; height: 1.2rem; margin-top: -0.6rem; cursor: ew-resize; }
[data-tile-resize="n"] { top: 0; }
[data-tile-resize="s"] { bottom: 0; }
[data-tile-resize="e"] { right: 0; }
[data-tile-resize="w"] { left: 0; }
[data-tile-resize="nw"] { top: 0; left: 0; cursor: nwse-resize; }
[data-tile-resize="ne"] { top: 0; right: 0; cursor: nesw-resize; }
[data-tile-resize="sw"] { bottom: 0; left: 0; cursor: nesw-resize; }
[data-tile-resize="se"] { bottom: 0; right: 0; cursor: nwse-resize; }
[data-dnd-item] { position: relative; touch-action: none; }
.desk-grab [data-dnd-item] { cursor: grab; }
.desk-grab [data-dnd-item][data-resizing] { cursor: grabbing; }
[data-tile-resize] { touch-action: none; opacity: 0.45; }
[data-tile-resize]:hover,
[data-tile-resize]:active { opacity: 1; }
#ws-float {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none !important;
}
#ws-float:not(:has([data-float])) {
  display: none !important;
  pointer-events: none !important;
}
#ws-float [data-float] {
  position: fixed;
  left: calc(var(--fx, 16) / 64 * (100vw - 2.5rem) + 1.25rem);
  top: calc(var(--fy, 8) / 64 * (100vh - 9rem) + 1.25rem);
  width: min(calc(var(--fw, 36) / 64 * 100vw), 92vw);
  max-height: min(calc(var(--fh, 46) / 64 * 100vh), 78vh);
  overflow: auto;
  pointer-events: auto;
  border-radius: var(--radius);
}
#ws-float [data-float][data-surface="elevated"],
#ws-float [data-float][data-surface="flat"] {
  background: var(--fill-flat);
  border: 1px solid var(--border-accent);
  box-shadow: var(--shadow), var(--chip-ring);
}
#ws-float .stack > :not([data-float]) {
  position: fixed;
  right: 1.25rem;
  bottom: 4.5rem;
  width: min(28rem, 92vw);
  max-height: min(70vh, 36rem);
  overflow: auto;
}
@media (max-width: 48rem) {
  #ws-float [data-float],
  #ws-float .stack > :not([data-float]) {
    left: 0.75rem;
    right: 0.75rem;
    top: auto;
    bottom: 4.5rem;
    width: auto;
    max-height: 60vh;
  }
}

#desk-hold {
  position: fixed;
  z-index: 420;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 9rem;
  border-radius: var(--radius, 0.65rem);
}
#desk-hold[data-surface="elevated"] {
  padding: 0.35rem;
  background: var(--fill-plate);
  border: 1px solid var(--border-accent);
  box-shadow: var(--shadow), var(--chip-ring);
}
#desk-hold[hidden] { display: none; }
#desk-hold [data-hold] {
  margin: 0;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#desk-hold[data-surface="elevated"] [data-hold]:hover { background: var(--wash-hold); }
iframe.vf-embed {
  display: block;
  width: 100%;
  min-height: 16rem;
  border: 0;
}
iframe.vf-embed[data-surface="sunken"] { background: var(--fill-bg); border: 1px solid var(--border-accent); border-radius: var(--radius); box-shadow: var(--chip-ring); }
[data-dnd-zone].dnd-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.flow[data-flow="floor"].dnd-over {
  outline: 2px solid var(--outline-accent);
}

/* Catalog shelf (`#build-kit`): presence = build mode. Cards are drag sources with the… */
.shelf {
  border-block-end: 1px solid var(--border-accent);
}
.shelf[data-surface="elevated"] {
  padding: var(--space-1) var(--space-2);
  background: var(--fill-elev);
  border-block-end-color: var(--border-accent); box-shadow: var(--chip-ring);
}
.shelf .cluster { gap: var(--space-2); }
.shelf-card {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: inherit; text-align: start;
  border-radius: var(--r-sm, 8px); color: var(--text);
  font-size: var(--t-sm); cursor: grab; user-select: none;
}
.shelf-card[data-surface="flat"] {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-accent);
  background: var(--fill-flat); box-shadow: var(--chip-ring);
}
.shelf-card[data-surface="flat"]:hover, .shelf-card[data-surface="flat"]:focus-visible {
  border-color: var(--accent-dim, var(--accent)); box-shadow: var(--chip-ring);
}
.shelf-card:active { cursor: grabbing; }
.shelf-card .icon { color: var(--muted); }

/* Face-scoped density (3.11): a tile may pack tighter than its page without touching th… */
[data-density="dense"] {
  --density: 0.82;
  --grid-min: 10rem;
}

/* Pointer-owning faces (FaceCaps::POINTER — ink/canvas class): the browser must not tur… */
[data-pointer] {
  touch-action: none;
  user-select: none;
}

/* Chart-tab strip (kernel chrome `ct-strip`): a full 8-tab strip scrolls horizontally i… */
[data-key="ct-strip"] {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
[data-key="ct-strip"]::-webkit-scrollbar { display: none; }
[data-key="ct-strip"] > * { flex: 0 0 auto; }
}