/* Keel HostDocument surface map (engine-owned). Products supply View trees only. */
:root {
  color-scheme: dark;
  /* Core palette (opaque text canvases for a11y) */
  --keel-bg: #070b14;
  --keel-ink: #eef3fb;
  --keel-muted: #93a0b5;
  --keel-accent: #7ec2ff;
  --keel-line: rgba(140, 170, 220, 0.14);
  --keel-card: #101624;
  --keel-elev-1: #0e1420;
  --keel-elev-2: #121a2c;
  --keel-success: #5ee4a8;
  --keel-warn: #f0c674;
  --keel-danger: #ff8e8e;
  /* Radius / max */
  --keel-radius: 16px;
  --keel-radius-sm: 10px;
  --keel-radius-pill: 999px;
  --keel-max: 1120px;
  --keel-max-wide: 1280px;
  /* Type scale (HostDocument surfaces map to these) */
  --keel-font: "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --keel-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --keel-fs-display: clamp(2.1rem, 4vw, 3.15rem);
  --keel-fs-title: clamp(1.45rem, 2.4vw, 1.85rem);
  --keel-fs-h2: 1.35rem;
  --keel-fs-lead: 1.08rem;
  --keel-fs-body: 0.98rem;
  --keel-fs-small: 0.84rem;
  --keel-fs-eyebrow: 0.72rem;
  --keel-lh-tight: 1.18;
  --keel-lh-body: 1.55;
  /* Density */
  --keel-space-1: 0.35rem;
  --keel-space-2: 0.65rem;
  --keel-space-3: 1rem;
  --keel-space-4: 1.35rem;
  --keel-space-5: 2rem;
  --keel-pad-comfortable: 1.25rem 1.35rem;
  --keel-pad-compact: 0.75rem 0.9rem;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%;
  background: var(--keel-bg); color: var(--keel-ink);
  font-family: var(--keel-font); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.skip { position: absolute; left: -999px; top: 8px; background: #111; color: #fff; padding: 8px 12px; z-index: 30; }
.skip:focus { left: 8px; }

#keel-root[data-keel-surface="app-shell"],
#keel-root {
  position: relative; z-index: 1; width: 100%; padding: 0 0 40px;
  /* Opaque HostDocument canvas so axe/AT resolve text contrast against engine theme bg
     (transparent root yields color-contrast incomplete on nested View nodes). */
  background: var(--keel-bg);
  color: var(--keel-ink);
}
#keel-outlet {
  display: block;
  max-width: var(--keel-max);
  margin: 0 auto;
  padding: var(--keel-space-3) 20px 0;
  outline: none;
  background: transparent;
  color: inherit;
}
#keel-root [data-rect] {
  position: static !important; left: auto !important; top: auto !important;
  width: auto !important; height: auto !important;
}
#keel-root [data-keel-layout="stack"] { display: flex; flex-direction: column; align-items: stretch; }
#keel-root [data-keel-layout="row"] { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; }
#keel-root [data-keel-layout="wrap"] { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: inherit; }
#keel-root [data-keel-layout="scroll"] { overflow: auto; max-height: 70vh; }

#keel-root [data-keel-surface="nav"] {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem;
  width: 100%; margin: 0;
  padding: var(--keel-space-2) max(20px, calc((100vw - var(--keel-max)) / 2 + 20px));
  border-bottom: 1px solid var(--keel-line);
  background: var(--keel-bg);
  backdrop-filter: blur(14px) saturate(1.2);
}
#keel-root [data-keel-surface="brand"] {
  font-weight: 750; color: var(--keel-ink) !important; font-size: 1.1rem;
  padding: 0.25rem 0.4rem; border: 1px solid rgba(140,180,255,.35); border-radius: 10px;
  text-decoration: none;
}
#keel-root [data-keel-surface="nav-link"] {
  color: var(--keel-muted) !important; font-size: 0.875rem; padding: 0.28rem 0.55rem;
  border-radius: 999px; text-decoration: none;
}
#keel-root [data-keel-surface="nav-link"].is-active,
#keel-root [data-keel-surface="nav-link"][aria-current="page"],
#keel-root [data-keel-surface="nav-link-active"] {
  color: var(--keel-ink) !important; background: #121a2c;
  box-shadow: inset 0 0 0 1px rgba(120,160,255,.22);
}
#keel-root [data-keel-surface="nav-cta"] {
  color: var(--keel-accent) !important; border: 1px solid rgba(126,194,255,.35);
  border-radius: 999px; padding: 0.3rem 0.7rem; text-decoration: none; font-size: 0.875rem;
}
#keel-root [data-keel-surface="hero"],
#keel-root [data-keel-surface="band"] { display: flex; flex-direction: column; gap: 0.85rem; padding: 0.5rem 0 0.25rem; }
#keel-root [data-keel-surface="panel"] {
  display: flex; flex-direction: column; gap: 0.85rem; padding: 1.15rem 1.2rem;
  border-radius: calc(var(--keel-radius) + 2px); border: 1px solid var(--keel-line);
  background: var(--keel-elev-1); /* solid text canvas; gradients break axe contrast */
}
#keel-root [data-keel-surface="grid"] { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
#keel-root [data-keel-surface="card"] {
  flex: 1 1 240px; min-width: min(100%, 220px); max-width: 100%;
  display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1.05rem;
  border-radius: var(--keel-radius); border: 1px solid var(--keel-line); background: var(--keel-card);
}
#keel-root [data-keel-surface="cta-row"] { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
#keel-root [data-keel-surface="btn-primary"],
#keel-root [data-keel-surface="btn-ghost"] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.65rem 1.05rem; border-radius: 999px; text-decoration: none; font-weight: 600;
}
#keel-root [data-keel-surface="btn-primary"] {
  background: #8ec7ff; color: #0a0e16 !important; border: none;
}
#keel-root [data-keel-surface="btn-ghost"] {
  color: var(--keel-ink) !important; border: 1px solid var(--keel-line); background: #0e1422;
}
#keel-root [data-keel-surface="eyebrow"] {
  font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 650; color: var(--keel-accent); text-transform: uppercase;
}
#keel-root [data-keel-surface="lead"] { color: var(--keel-muted); font-size: 1.05rem; max-width: 42rem; }
#keel-root [data-keel-surface="body"],
#keel-root span { color: var(--keel-muted); max-width: 46rem; }
#keel-root [data-keel-surface="metric"] {
  flex: 1 1 120px; padding: 0.85rem 1rem; border-radius: 14px; border: 1px solid var(--keel-line);
  background: #0c121e;
}
#keel-root [data-keel-surface="metric-value"] {
  font-size: 1.9rem; font-weight: 730; letter-spacing: -0.03em;
  color: #9fd0ff; /* solid measurable; gradient text is axe incomplete */
}
#keel-root [data-keel-surface="foot"] {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center;
  max-width: var(--keel-max); margin: 1.75rem auto 0; padding: 0.85rem 20px 0;
  border-top: 1px solid var(--keel-line);
}
#keel-root h1 { font-size: clamp(2rem, 4.5vw, 3.05rem); line-height: 1.08; letter-spacing: -0.035em; margin: 0.15em 0 0.35em; font-weight: 720; color: var(--keel-ink); }
#keel-root h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 0 0 0.4em; letter-spacing: -0.02em; }
#keel-root h3 { font-size: 1.05rem; margin: 0; color: var(--keel-ink); }
#keel-root a { color: var(--keel-accent); text-decoration: none; }
#keel-root a:hover { color: #a9d6ff; }
#keel-root .spacer-flex { flex: 1 1 auto; min-width: 0.5rem; }
/* Prefer Dom-emitted flex from UiStyle.flex over class escape */
#keel-root [style*="flex:"] { min-width: 0; }
#keel-outlet.is-route-enter { animation: keel-route-in .28s ease both; }
@keyframes keel-route-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #keel-outlet.is-route-enter { animation: none; }
}

/* Semantic tables (UiKind::Table → <table>) */
#keel-root table {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
}
#keel-root table th, #keel-root table td {
  border: 1px solid var(--keel-line); padding: 0.55rem 0.65rem; text-align: left; vertical-align: top;
}
#keel-root table th { background: #141c2c; color: var(--keel-ink); font-weight: 650; }
#keel-root table td { color: var(--keel-muted); }
#keel-root [data-keel-surface="matrix"] { display: table; width: 100%; }

/* Form + document field widgets (W-FORM / document-edit).
 * Compact form textfields must not inherit doc-edit min-height:180 or large radius:
 * large border-radius + Dom inline radius makes axe color-contrast elmPartiallyObscured. */
#keel-root [data-keel-surface="field"],
#keel-root textarea[data-keel-surface="field"] {
  box-sizing: border-box !important;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  border-radius: 6px !important; /* beat Dom inline border-radius */
  border: 1px solid var(--keel-line);
  background: #080c16;
  color: var(--keel-ink);
  padding: 0.65rem 0.85rem;
  font: 16px/1.4 var(--keel-font);
  overflow: hidden;
  resize: vertical;
}
#keel-root textarea[data-keel-surface="field"][data-keel-doc-edit="1"],
#keel-root [data-keel-surface="field"][data-keel-doc-edit="1"] {
  min-height: 180px;
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: auto;
}
#pg-preview {
  min-height: 160px; border-radius: 12px; border: 1px solid var(--keel-line);
  background: #0c121e; padding: 1rem;
}
#pg-toolbar button {
  border-radius: 999px; border: 1px solid var(--keel-line);
  background: #121828; color: var(--keel-ink); padding: 0.4rem 0.85rem; cursor: pointer;
}

/* W-ASYNC-1 status surfaces */
#keel-root [data-keel-surface="async-pending"],
#keel-root [data-keel-surface="async-empty"],
#keel-root [data-keel-surface="async-error"],
#keel-root [data-keel-surface="async-ready"] {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--keel-line);
  background: #0c121e;
}
#keel-root [data-keel-surface="async-error"] { border-color: rgba(255,120,120,.35); }
#keel-root [data-keel-surface="async-ready"] { border-color: rgba(120,220,160,.28); }

/* W-A11Y dialog kit */
#keel-root [data-keel-surface="dialog"] {
  display: flex; flex-direction: column; gap: 0.65rem;
  max-width: min(420px, 92vw);
  margin: 1rem auto;
  padding: 1.1rem 1.2rem;
  border-radius: calc(var(--keel-radius) + 2px);
  border: 1px solid rgba(126,194,255,.28);
  background: #121e30; /* solid dialog canvas for contrast resolve */
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
#keel-root [data-keel-surface="dialog"] [role="heading"],
#keel-root [data-keel-surface="dialog"] h2 {
  margin: 0;
}

/* W-LIST sticky header inside virtual list scroll */
#keel-root [data-keel-surface="virtual-list"] {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#keel-root [data-keel-surface="virtual-list"]:focus-visible,
#keel-root [data-keel-virtualized="1"]:focus-visible {
  outline: 2px solid rgba(126,194,255,.55);
  outline-offset: 2px;
}
#keel-root [data-keel-surface="virtual-list-sticky"] {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #0a0e18;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--keel-line);
  padding: 0.45rem 0.6rem;
}
/* W-LIST sticky leading column (horizontal scroll within virtual list) */
#keel-root [data-keel-surface="virtual-list-sticky-col"] {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #0a0e18;
  border-right: 1px solid var(--keel-line);
  min-width: 2.5rem;
  padding: 0.25rem 0.5rem;
}
/* Corner: sticky top+left for header/leading intersection */
#keel-root [data-keel-surface="virtual-list-sticky-corner"] {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 4;
  background: #0a0e18;
  border-right: 1px solid var(--keel-line);
  border-bottom: 1px solid var(--keel-line);
  min-width: 2.5rem;
  padding: 0.45rem 0.5rem;
}

/* W-LIST multi-header freeze panes: stacked sticky rows (top from inline style / surface token) */
#keel-root [data-keel-surface^="virtual-list-freeze-"] {
  position: sticky;
  z-index: 3;
  background: #0a0e18;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--keel-line);
  padding: 0.35rem 0.6rem;
}
#keel-root [data-keel-surface^="virtual-list-freeze-corner-"] {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #0a0e18;
  border-right: 1px solid var(--keel-line);
  border-bottom: 1px solid var(--keel-line);
  min-width: 2.5rem;
  padding: 0.35rem 0.5rem;
}

/* W-LIST multi-lead freeze columns: progressive sticky left (left from inline style) */
#keel-root [data-keel-surface^="virtual-list-freeze-col-"] {
  position: sticky;
  z-index: 2;
  background: #0a0e18;
  border-right: 1px solid var(--keel-line);
  min-width: 2.5rem;
  padding: 0.25rem 0.5rem;
}



/* W-A11Y shadow isolation: light portal is a host; dialog chrome lives in open ShadowRoot */
#keel-modal-root[data-keel-shadow="open"] {
  /* content is in shadow; keep light host non-interactive */
  pointer-events: none;
}
#keel-modal-root[data-keel-shadow="open"]:not(:has(*)) {
  /* empty host */
}
/* Modal inert backdrop (pack-owned; dialog View remains interactive) */
#keel-root [data-keel-inert-owner] {
  pointer-events: none;
  user-select: none;
}
#keel-root [data-keel-modal-open="1"] {
  outline: 2px solid rgba(126,194,255,.35);
  outline-offset: 2px;
}

/* Modal stack elevation */
#keel-root [data-keel-modal-depth] {
  position: relative;
  z-index: var(--keel-modal-z, 1100);
}
#keel-root [data-keel-modal-open="1"] {
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

/* W-NAV-4: name the primary soft-nav outlet for View Transitions morphing. */
#keel-outlet {
  view-transition-name: keel-outlet;
  /* shared-vt-* names applied by keel_site_host ensureViewTransitionNames */
}

/* Modal portal host (reparented dialogs stay under #keel-root) */
#keel-modal-root[data-keel-portal="1"] {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
#keel-modal-root[data-keel-portal="1"] > * {
  pointer-events: auto;
  max-height: min(90vh, 720px);
  overflow: auto;
}

/* W-FORM-2 field validation chrome */
#keel-root [data-keel-surface="field-invalid"],
#keel-root textarea[data-keel-surface="field-invalid"],
#keel-root [aria-invalid="true"] {
  border-color: rgba(255,120,120,.55) !important;
  box-shadow: 0 0 0 1px rgba(255,120,120,.18);
}
#keel-root [data-keel-id$="__err"] {
  min-height: 1.1em;
  font-size: 0.85rem;
  color: rgb(248, 113, 113);
}

/* W-NAV shared-element VT: surface shared-vt-* stamps data-keel-vt; host sets view-transition-name */
#keel-root [data-keel-shared-vt="1"] {
  /* name applied by JS (view-transition-name); keep layout free */
}

/* W-FORM-4 async field validation pending */
#keel-root [data-keel-surface="field-pending"],
#keel-root textarea[data-keel-surface="field-pending"],
#keel-root [aria-busy="true"][data-keel-surface^="field"] {
  border-color: rgba(125,194,255,.55) !important;
  box-shadow: 0 0 0 1px rgba(125,194,255,.18);
}
/* W-ERR-1 error boundary fallback */
#keel-root [data-keel-surface="error-boundary-fallback"] {
  border: 1px solid rgba(255,120,120,.35);
  border-radius: 12px;
  background: #280c10;
  padding: 0.85rem 1rem;
}
#keel-root [data-keel-surface="error-boundary"] {
  display: flex; flex-direction: column; gap: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#keel-root [data-keel-surface="error-boundary-retry"] {
  align-self: flex-start;
  border: 1px solid rgba(126,194,255,.35);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  background: #1e3048;
  color: #dbeafe;
  cursor: pointer;
}
#keel-root [data-keel-surface="error-boundary-retrying"] {
  font-variant-numeric: tabular-nums;
  color: rgba(191,219,254,.9);
}

/* W-NAV geometric morph (View Transitions residual): host adds html.keel-vt-morph during soft-nav */
html.keel-vt-morph::view-transition-group(*) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.keel-vt-morph::view-transition-old(root),
html.keel-vt-morph::view-transition-new(root) {
  animation-duration: 180ms;
  mix-blend-mode: normal;
}
html.keel-vt-morph::view-transition-group(keel-outlet),
html.keel-vt-morph::view-transition-group(keel-hero) {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
html.keel-vt-morph::view-transition-old(keel-hero),
html.keel-vt-morph::view-transition-new(keel-hero) {
  height: 100%;
  width: 100%;
  object-fit: cover;
  overflow: clip;
}
@media (prefers-reduced-motion: reduce) {
  html.keel-vt-morph::view-transition-group(*),
  html.keel-vt-morph::view-transition-old(root),
  html.keel-vt-morph::view-transition-new(root) {
    animation-duration: 0.01ms !important;
  }
}
#keel-root [data-keel-vt-morph="geometry"] {
  /* morph identity stamp; view-transition-name set by site host */
}


/* W-NAV per-route VT choreography kinds (host class from plan_vt_choreography) */
html.keel-vt-kind-fade::view-transition-old(root),
html.keel-vt-kind-fade::view-transition-new(root) {
  animation-duration: var(--keel-vt-duration, 280ms);
  animation-timing-function: ease;
}
html.keel-vt-kind-fade::view-transition-old(root) {
  animation-name: keel-vt-fade-out;
}
html.keel-vt-kind-fade::view-transition-new(root) {
  animation-name: keel-vt-fade-in;
}
@keyframes keel-vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes keel-vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
html.keel-vt-kind-slide.keel-vt-dir-forward::view-transition-old(root) {
  animation: keel-vt-slide-out-left var(--keel-vt-duration, 280ms) ease both;
}
html.keel-vt-kind-slide.keel-vt-dir-forward::view-transition-new(root) {
  animation: keel-vt-slide-in-right var(--keel-vt-duration, 280ms) ease both;
}
html.keel-vt-kind-slide.keel-vt-dir-back::view-transition-old(root) {
  animation: keel-vt-slide-out-right var(--keel-vt-duration, 280ms) ease both;
}
html.keel-vt-kind-slide.keel-vt-dir-back::view-transition-new(root) {
  animation: keel-vt-slide-in-left var(--keel-vt-duration, 280ms) ease both;
}
@keyframes keel-vt-slide-out-left {
  to { transform: translateX(-12%); opacity: 0.6; }
}
@keyframes keel-vt-slide-in-right {
  from { transform: translateX(12%); opacity: 0.6; }
}
@keyframes keel-vt-slide-out-right {
  to { transform: translateX(12%); opacity: 0.6; }
}
@keyframes keel-vt-slide-in-left {
  from { transform: translateX(-12%); opacity: 0.6; }
}
html.keel-vt-kind-none {
  /* host skips startViewTransition when plan says none */
}
@media (prefers-reduced-motion: reduce) {
  html.keel-vt-kind-fade::view-transition-old(root),
  html.keel-vt-kind-fade::view-transition-new(root),
  html.keel-vt-kind-slide::view-transition-old(root),
  html.keel-vt-kind-slide::view-transition-new(root) {
    animation: none !important;
  }
}


/* W-NAV spring / FLIP custom curves (plan_vt_spring_curve + plan_vt_flip) */
html.keel-vt-kind-spring::view-transition-group(*),
html.keel-vt-kind-spring::view-transition-old(root),
html.keel-vt-kind-spring::view-transition-new(root) {
  animation-duration: var(--keel-vt-duration, 320ms);
  animation-timing-function: var(--keel-vt-spring, cubic-bezier(0.22, 1.2, 0.18, 1));
}
html.keel-vt-kind-spring::view-transition-old(root) {
  animation-name: keel-vt-spring-out;
}
html.keel-vt-kind-spring::view-transition-new(root) {
  animation-name: keel-vt-spring-in;
}
@keyframes keel-vt-spring-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0.55; transform: scale(0.97); }
}
@keyframes keel-vt-spring-in {
  from { opacity: 0.55; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}
html.keel-vt-kind-flip::view-transition-group(keel-hero),
html.keel-vt-kind-flip::view-transition-group(keel-brand) {
  animation-duration: var(--keel-vt-duration, 320ms);
  animation-timing-function: var(--keel-vt-spring, cubic-bezier(0.2, 0.9, 0.2, 1));
}
html.keel-vt-kind-flip [data-keel-vt-flip-pending="1"] {
  will-change: transform;
  transform-origin: top left;
}
@media (prefers-reduced-motion: reduce) {
  html.keel-vt-kind-spring::view-transition-old(root),
  html.keel-vt-kind-spring::view-transition-new(root),
  html.keel-vt-kind-flip::view-transition-group(*) {
    animation: none !important;
  }
}

/* Document-edit host regions (W-A11Y scrollable-region-focusable) */
#pg-patches:focus-visible,
#pg-preview:focus-visible {
  outline: 2px solid rgba(126,194,255,.55);
  outline-offset: 2px;
}
#pg-md[data-keel-doc-edit="1"] {
  min-height: 180px;
}

/* W-ASYNC flight interactive hydrate mount (solid panel canvas) */
#keel-root [data-keel-surface="flight-interactive"] {
  display: flex; flex-direction: column; gap: 0.85rem; padding: 1.15rem 1.2rem;
  border-radius: calc(var(--keel-radius) + 2px); border: 1px solid var(--keel-line);
  background: #0e1420;
}
#keel-root [data-keel-surface="flight-interactive"][data-keel-flight-activated="1"],
#keel-root [data-keel-flight-root][data-keel-flight-activated="1"] {
  outline: 1px dashed rgba(126,194,255,.35);
}


/* HostDocument design tokens v2 — type / depth / density / exhibit / theater
 * Products select closed surfaces via View.surface(...); no Tailwind dual SSOT.
 */
#keel-root[data-keel-density="compact"] #keel-outlet { padding-top: 0.4rem; }
#keel-root[data-keel-density="comfortable"] #keel-outlet { padding-top: 0.85rem; }

#keel-root [data-keel-surface="display"] {
  font-size: var(--keel-fs-display);
  line-height: var(--keel-lh-tight);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--keel-ink);
  max-width: 18ch;
}
#keel-root [data-keel-surface="title"] {
  font-size: var(--keel-fs-title);
  line-height: var(--keel-lh-tight);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--keel-ink);
}
#keel-root [data-keel-surface="mono"],
#keel-root [data-keel-surface="code-rail"] {
  font-family: var(--keel-font-mono);
  font-size: var(--keel-fs-small);
  line-height: 1.45;
}
#keel-root [data-keel-surface="code-rail"] {
  display: block;
  padding: var(--keel-pad-compact);
  border-radius: var(--keel-radius-sm);
  border: 1px solid var(--keel-line);
  background: var(--keel-elev-2);
  overflow: auto;
  max-height: 14rem;
  color: var(--keel-muted);
}

/* Depth elevations (opaque) */
#keel-root [data-keel-surface="elev-0"] {
  background: var(--keel-bg);
  border: 1px solid transparent;
  border-radius: var(--keel-radius);
}
#keel-root [data-keel-surface="elev-1"] {
  background: var(--keel-elev-1);
  border: 1px solid var(--keel-line);
  border-radius: var(--keel-radius);
}
#keel-root [data-keel-surface="elev-2"] {
  background: var(--keel-elev-2);
  border: 1px solid rgba(140, 170, 220, 0.2);
  border-radius: var(--keel-radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

/* Exhibit / theater shells (Labs + Performance) */
#keel-root [data-keel-surface="exhibit"],
#keel-root [data-keel-surface="theater"] {
  display: flex;
  flex-direction: column;
  gap: var(--keel-space-3);
  padding: var(--keel-pad-comfortable);
  border-radius: calc(var(--keel-radius) + 2px);
  border: 1px solid var(--keel-line);
  background: var(--keel-elev-1);
}
#keel-root [data-keel-surface="theater"] {
  border-color: rgba(126, 194, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(126, 194, 255, 0.08);
}
#keel-root [data-keel-surface="exhibit-title"] {
  font-size: var(--keel-fs-h2);
  font-weight: 700;
  color: var(--keel-ink);
}
#keel-root [data-keel-surface="exhibit-promise"] {
  color: var(--keel-muted);
  font-size: var(--keel-fs-body);
  max-width: 48rem;
}
#keel-root [data-keel-surface="oracle-pass"] {
  color: var(--keel-success) !important;
  font-size: var(--keel-fs-small);
  font-family: var(--keel-font-mono);
}
#keel-root [data-keel-surface="oracle-fail"] {
  color: var(--keel-danger) !important;
  font-size: var(--keel-fs-small);
  font-family: var(--keel-font-mono);
}
#keel-root [data-keel-surface="oracle-warn"] {
  color: var(--keel-warn) !important;
  font-size: var(--keel-fs-small);
  font-family: var(--keel-font-mono);
}
#keel-root [data-keel-surface="chip"] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--keel-radius-pill);
  border: 1px solid var(--keel-line);
  background: var(--keel-elev-2);
  color: var(--keel-muted);
  font-size: var(--keel-fs-small);
  font-weight: 600;
}
#keel-root [data-keel-surface="chip-accent"] {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--keel-radius-pill);
  border: 1px solid rgba(126, 194, 255, 0.35);
  background: rgba(126, 194, 255, 0.08);
  color: var(--keel-accent);
  font-size: var(--keel-fs-small);
  font-weight: 650;
}
#keel-root [data-keel-surface="proof-strip"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--keel-space-2);
  align-items: stretch;
  padding: var(--keel-space-3) 0;
}
#keel-root [data-keel-surface="figure"] {
  display: block;
  border-radius: var(--keel-radius);
  border: 1px solid var(--keel-line);
  background: var(--keel-elev-2);
  overflow: hidden;
  padding: var(--keel-space-3);
}
#keel-root [data-keel-surface="kicker"] {
  font-size: var(--keel-fs-eyebrow);
  letter-spacing: 0.14em;
  font-weight: 650;
  color: var(--keel-accent);
  text-transform: uppercase;
}

/* Hero polish: more air, display-friendly */
#keel-root [data-keel-surface="hero"] {
  gap: var(--keel-space-3);
  padding: var(--keel-space-5) 0 var(--keel-space-4);
}
#keel-root [data-keel-surface="hero"] h1,
#keel-root [data-keel-surface="hero"] [data-keel-surface="shared-vt-title"] {
  font-size: var(--keel-fs-display);
  line-height: var(--keel-lh-tight);
  letter-spacing: -0.02em;
  max-width: 18ch;
}
#keel-root [data-keel-surface="metric"] {
  padding: var(--keel-pad-compact);
  border-radius: var(--keel-radius-sm);
  border: 1px solid var(--keel-line);
  background: var(--keel-elev-2);
  min-width: 7.5rem;
}
#keel-root [data-keel-surface="metric-value"] {
  font-size: 1.35rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--keel-accent);
}

/* Compact density helper on panels */
#keel-root [data-keel-density="compact"][data-keel-surface="panel"],
#keel-root [data-keel-surface="panel"][data-keel-density="compact"],
#keel-root [data-keel-surface="exhibit"][data-keel-density="compact"],
#keel-root [data-keel-surface="theater"][data-keel-density="compact"] {
  padding: var(--keel-pad-compact);
  gap: var(--keel-space-2);
}


/* HostDocument craft polish v2.2 — motion + interaction without dual CSS SSOT */
@media (prefers-reduced-motion: no-preference) {
  #keel-root a[data-keel-surface^="nav-"],
  #keel-root a[data-keel-surface^="btn-"],
  #keel-root [data-keel-surface="card"],
  #keel-root [data-keel-surface="metric"],
  #keel-root [data-keel-surface="exhibit"],
  #keel-root [data-keel-surface="theater"] {
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      box-shadow 180ms ease,
      color 120ms ease,
      transform 160ms ease;
  }
  #keel-root [data-keel-surface="card"]:hover {
    border-color: rgba(126, 194, 255, 0.28);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
  }
  #keel-root [data-keel-surface="btn-primary"]:hover {
    filter: brightness(1.05);
  }
  #keel-root [data-keel-surface="btn-ghost"]:hover {
    border-color: rgba(126, 194, 255, 0.35);
    background: var(--keel-elev-2);
  }
  #keel-root [data-keel-surface="nav-link"]:hover {
    color: var(--keel-ink) !important;
    background: rgba(18, 26, 44, 0.85);
  }
}
@media (prefers-reduced-motion: reduce) {
  #keel-root * {
    scroll-behavior: auto !important;
  }
}

/* Lead / body rhythm */
#keel-root [data-keel-surface="lead"] {
  font-size: var(--keel-fs-lead);
  line-height: 1.55;
  max-width: 46rem;
}
#keel-root [data-keel-surface="body"] {
  font-size: var(--keel-fs-body);
  line-height: var(--keel-lh-body);
}

/* Focus ring (a11y craft) */
#keel-root a:focus-visible,
#keel-root button:focus-visible,
#keel-root [tabindex]:focus-visible,
#keel-root textarea:focus-visible,
#keel-root input:focus-visible {
  outline: 2px solid var(--keel-accent);
  outline-offset: 2px;
}

/* Proof strip metrics as a modern KPI strip */
#keel-root [data-keel-surface="proof-strip"] {
  gap: var(--keel-space-3);
  padding: var(--keel-space-4) 0;
}
#keel-root [data-keel-surface="proof-strip"] > [data-keel-surface="metric"] {
  flex: 1 1 8.5rem;
  min-width: 8rem;
  background: var(--keel-elev-1);
  border: 1px solid var(--keel-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
#keel-root [data-keel-surface="metric-value"] {
  letter-spacing: -0.02em;
}

/* Theater callout */
#keel-root [data-keel-surface="theater"] {
  position: relative;
}
#keel-root [data-keel-surface="theater"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, var(--keel-accent), rgba(126, 194, 255, 0.15));
  pointer-events: none;
}

/* Footer breathing room */
#keel-root [data-keel-surface="foot"] {
  margin-top: var(--keel-space-5);
  padding-top: var(--keel-space-4);
  opacity: 0.95;
}


/* HostDocument media IR v1 (RD-P2 figure/frame/code-rail) - craft polish v2.2 */
#keel-root [data-keel-surface="figure"] {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.35rem 0 0.75rem;
  padding: 0.7rem;
  border-radius: calc(var(--keel-radius) + 2px);
  border: 1px solid var(--keel-line);
  background: #0c121c;
  overflow: hidden;
  max-width: min(100%, 44rem);
}
#keel-root [data-keel-surface="frame"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.55rem;
  border-radius: var(--keel-radius);
  border: 1px solid var(--keel-line);
  background: #0a101a;
  overflow: hidden;
}
#keel-root [data-keel-surface="media-rail"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: stretch;
}
#keel-root [data-keel-surface="media"],
#keel-root [data-keel-surface="figure"] img,
#keel-root img[data-keel-surface="media"] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: calc(var(--keel-radius) - 4px);
  background: #080c14;
  border: 1px solid rgba(140, 170, 220, 0.1);
  object-fit: cover;
}
#keel-root [data-keel-surface="caption"] {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--keel-muted);
  letter-spacing: 0.01em;
  margin: 0;
}
#keel-root [data-keel-surface="code-rail"] {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  padding: 0.85rem 1rem;
  border-radius: var(--keel-radius);
  border: 1px solid var(--keel-line);
  background: #0a0f18;
  color: #c9d4e8;
  overflow: auto;
  max-width: 100%;
  white-space: pre-wrap;
}
/* HostDocument craft polish v2.2 media IR */

/* HostDocument video IR v1 (RD-P2 media) */
#keel-root video[data-keel-surface="media"],
#keel-root [data-keel-surface="figure"] video,
#keel-root video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 160px;
  border-radius: calc(var(--keel-radius) - 4px);
  background: #080c14;
  border: 1px solid rgba(140, 170, 220, 0.12);
  object-fit: cover;
}