:root {
  color-scheme: light;
  interpolate-size: allow-keywords;

  --night: #0A1020;
  --stone: #F3EEE4;
  --cobalt: #2F55E0;
  --cobalt-bright: #5B7FFF;
  --cobalt-pale: #E3E9FF;
  --vermilion: #FF5B35;
  --vermilion-lite: #FF6A45;
  --vermilion-deep: #E8431F;
  --mist: #A9B3C9;
  --mist-dim: #8A94AB;
  --sand: #E2D3B6;
  --shallows: #B4C4FF;
  --navy: #1C2B85;

  --deep: #0A1020;
  --deep-2: #121A2E;
  --deep-3: #1A2440;

  --paper: #F3EEE4;
  --paper-2: #FBF8F2;
  --paper-3: #E9E2D5;
  --paper-ink: #0A1020;
  --paper-soft: #4A5266;
  --paper-mute: #5B6274;
  --paper-accent: #AA3517;
  --paper-cobalt: #2347C9;
  --paper-line: rgba(10, 16, 32, 0.13);
  --paper-line-strong: rgba(10, 16, 32, 0.45);
  --paper-fig: #E4EAFF;

  --tri-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24' preserveAspectRatio='none'%3E%3Cpath d='M14 0 28 24H0Z' fill='%23000'/%3E%3C/svg%3E");

  --r-tile: 8px;
  --r-card: 8px;
  --r-inner: 6px;
  --r-control: 4px;

  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.75rem);
  --sheet-max: 90rem;
  --section-pad: clamp(4.5rem, 2.8rem + 6.5vw, 9rem);
  --header-h: 4.25rem;
  --measure: 64ch;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  --face-draft: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --face-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --t-display: clamp(2.15rem, 1.25rem + 3.4vw, 4.4rem);
  --t-h3: clamp(1.4rem, 1.12rem + 1.2vw, 2.2rem);
  --t-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.75rem;
  --t-micro: 0.6875rem;

  --ease-register: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-press: cubic-bezier(0.3, 0, 0.2, 1);
  --dur-press: 90ms;
  --dur-settle: 240ms;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --deep: #070B17;
  --deep-2: #0F1628;
  --deep-3: #172038;
  --paper: #0E1527;
  --paper-2: #141D33;
  --paper-3: #0B1122;
  --paper-ink: #F3EEE4;
  --paper-soft: #A9B3C9;
  --paper-mute: #8E98AE;
  --paper-accent: #FF6A45;
  --paper-cobalt: #8FA8FF;
  --paper-line: rgba(243, 238, 228, 0.12);
  --paper-line-strong: rgba(243, 238, 228, 0.42);
  --paper-fig: #1A2547;
}

body,
.scheme-paper,
.scheme-card {
  --fg: var(--paper-ink);
  --fg-soft: var(--paper-soft);
  --fg-mute: var(--paper-mute);
  --line: var(--paper-line);
  --line-strong: var(--paper-line-strong);
  --accent: var(--paper-accent);
  --cool: var(--paper-cobalt);
  --pop: var(--paper-accent);
  --card: var(--paper-2);
  --focus: var(--paper-accent);
  --fill: var(--vermilion);
  --fill-ink: var(--night);
  --base-fill: var(--cobalt);
  --delta-fill: var(--vermilion-deep);
  --bg: var(--paper);
  color: var(--fg);
}

.scheme-paper {
  background-color: var(--paper);
}

.scheme-card {
  --bg: var(--paper-2);
  background-color: var(--paper-2);
}

.scheme-deep {
  --fg: var(--stone);
  --fg-soft: var(--mist);
  --fg-mute: var(--mist-dim);
  --line: rgba(243, 238, 228, 0.12);
  --line-strong: rgba(243, 238, 228, 0.4);
  --accent: var(--vermilion-lite);
  --cool: var(--mist);
  --pop: var(--vermilion-lite);
  --card: var(--deep-2);
  --focus: var(--stone);
  --fill: var(--vermilion);
  --fill-ink: var(--night);
  --base-fill: var(--cobalt-bright);
  --delta-fill: var(--vermilion-lite);
  --bg: var(--deep);
  background-color: var(--deep);
  color: var(--fg);
}

.scheme-cobalt {
  --fg: #FFFFFF;
  --fg-soft: var(--cobalt-pale);
  --fg-mute: var(--cobalt-pale);
  --line: rgba(255, 255, 255, 0.22);
  --line-strong: rgba(255, 255, 255, 0.62);
  --accent: #FFFFFF;
  --cool: #FFFFFF;
  --pop: #FFFFFF;
  --card: rgba(255, 255, 255, 0.08);
  --focus: #FFFFFF;
  --fill: var(--vermilion);
  --fill-ink: var(--night);
  --base-fill: #FFFFFF;
  --delta-fill: var(--vermilion);
  --bg: var(--cobalt);
  background-color: var(--cobalt);
  color: var(--fg);
}

.scheme-shallows {
  --fg: var(--night);
  --fg-soft: #263055;
  --fg-mute: #3A4466;
  --line: rgba(10, 16, 32, 0.18);
  --line-strong: rgba(10, 16, 32, 0.5);
  --accent: var(--navy);
  --cool: var(--navy);
  --pop: var(--navy);
  --card: rgba(255, 255, 255, 0.3);
  --focus: var(--night);
  --fill: var(--night);
  --fill-ink: var(--stone);
  --bg: var(--shallows);
  background-color: var(--shallows);
  color: var(--fg);
}

.scheme-verm {
  --fg: var(--night);
  --fg-soft: #1E2433;
  --fg-mute: #1E2433;
  --line: rgba(10, 16, 32, 0.22);
  --line-strong: rgba(10, 16, 32, 0.6);
  --accent: var(--night);
  --cool: var(--night);
  --pop: var(--night);
  --card: rgba(255, 255, 255, 0.16);
  --focus: var(--night);
  --fill: var(--night);
  --fill-ink: var(--stone);
  --bg: var(--vermilion);
  background-color: var(--vermilion);
  color: var(--fg);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
  background: var(--deep);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  font-family: var(--face-draft);
  font-size: var(--t-body);
  font-stretch: 100%;
  font-weight: 400;
  line-height: 1.62;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
}

h1, h2, h3, h4 {
  font-weight: 700;
  text-wrap: balance;
}

h2 {
  font-size: var(--t-display);
  font-stretch: 118%;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

h3 {
  font-size: var(--t-h3);
  font-stretch: 112%;
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

p, li, dd, dt {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

code {
  font-family: var(--face-mono);
  font-stretch: 87.5%;
  font-size: 0.86em;
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--fg);
  overflow-wrap: anywhere;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus, var(--paper-accent));
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

::selection {
  background: var(--vermilion);
  color: var(--night);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  inset-block-start: -6rem;
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-control);
  background: var(--vermilion);
  color: var(--night);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  inset-block-start: var(--s-4);
}

.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--sheet-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  font-size: var(--t-small);
  font-weight: 650;
  line-height: 1.4;
  color: var(--fg-soft);
}

.label-red {
  color: var(--accent);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 58ch;
}

.icon {
  inline-size: 1em;
  block-size: 1em;
  flex-shrink: 0;
}

.btn-primary > .icon,
.btn-ghost > .icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  margin-inline-end: 0.1em;
}

.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.7rem 1.25rem;
  border: 2px solid var(--fill);
  border-radius: var(--r-control);
  background: var(--fill);
  color: var(--fill-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-press), border-color var(--dur-press) var(--ease-press), color var(--dur-press) var(--ease-press);
}

.btn-primary:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}

.btn-ghost:hover {
  background: var(--fg);
  color: var(--bg);
}

.btn-small {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  font-size: var(--t-small);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  font-weight: 700;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.text-link:hover {
  text-decoration-color: currentColor;
}

.stack-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.stack-list li {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg);
}

.ticks {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.ticks li {
  position: relative;
  padding-inline-start: 1.25rem;
}

.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.75em;
  inline-size: 0.6rem;
  block-size: 2px;
  background: var(--fg-mute);
}

.navbar-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  overflow-x: clip;
  border-block-end: 1px solid var(--line);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  max-width: var(--sheet-max);
  min-height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  max-width: calc(100% - 56px);
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg);
  text-decoration: none;
  font-size: 1.0625rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: 0;
}

.logo-mark {
  inline-size: 1.25rem;
  block-size: 1.1rem;
  flex-shrink: 0;
  background: var(--vermilion);
  -webkit-mask: var(--tri-solid) center / 100% 100% no-repeat;
  mask: var(--tri-solid) center / 100% 100% no-repeat;
}

.logo-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar-links {
  position: fixed;
  inset-block-start: var(--header-h);
  inset-inline: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  padding: var(--s-6) var(--gutter) var(--s-7);
  overflow-y: auto;
  background: var(--deep);
  border-block-start: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.5rem);
  transition: opacity var(--dur-settle) var(--ease-register), transform var(--dur-settle) var(--ease-register), visibility 0s linear var(--dur-settle);
}

.navbar-links.active,
.navbar-links.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.navbar-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  counter-reset: nav;
  border-block-start: 1px solid var(--line);
}

.navbar-links li {
  counter-increment: nav;
  border-block-end: 1px solid var(--line);
}

.nav-link {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  min-height: 44px;
  padding-block: var(--s-4);
  color: var(--fg);
  text-decoration: none;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-stretch: 120%;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.nav-link.is-active {
  color: var(--vermilion-lite);
}

.navbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.nav-cta {
  min-height: 44px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--fg);
  font-size: var(--t-small);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-press), border-color var(--dur-press) var(--ease-press);
}

.theme-toggle .icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  color: currentColor;
  transition: transform var(--dur-settle) var(--ease-register);
}

.theme-toggle[aria-pressed="true"] .icon {
  transform: rotate(180deg);
}

.theme-toggle:hover {
  border-color: var(--fg);
  background: color-mix(in srgb, var(--fg) 10%, transparent);
}

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  inline-size: 44px;
  block-size: 44px;
  flex-shrink: 0;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}

.menu-line {
  display: block;
  inline-size: 20px;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-settle) var(--ease-register), opacity var(--dur-press) linear;
}

.menu-toggle[aria-expanded="true"] .menu-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-line:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1024px) {
  .logo-link {
    max-width: clamp(140px, 28vw, 320px);
  }

  .menu-toggle {
    display: none;
  }

  .navbar-links {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--s-5);
    height: auto;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  .navbar-links ul {
    flex-direction: row;
    gap: var(--s-1);
    border: 0;
  }

  .navbar-links li {
    border: 0;
  }

  .nav-link {
    position: relative;
    align-items: center;
    padding: 0.5rem 0.8rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fg-soft);
    transition: color var(--dur-press) var(--ease-press);
  }

  .nav-link::before {
    content: none;
  }

  .nav-link::after {
    content: "";
    position: absolute;
    inset-inline: 0.8rem;
    inset-block-end: 0.4rem;
    block-size: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-settle) var(--ease-register);
  }

  .nav-link:hover,
  .nav-link.is-active {
    color: var(--fg);
  }

  .nav-link.is-active::after,
  .nav-link:hover::after {
    transform: scaleX(1);
  }

  .navbar-actions {
    flex-wrap: nowrap;
    gap: var(--s-2);
  }

  .theme-toggle {
    padding: 0;
  }

  .theme-toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

.hero {
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem);
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
}

.hero-layout > * {
  min-width: 0;
}

.hero-copy {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.hero-id {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.avatar {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  inline-size: clamp(4.5rem, 3.4rem + 3.2vw, 6.5rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--sand);
  color: var(--navy);
}

.avatar-initials {
  position: relative;
  z-index: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem);
  font-stretch: 125%;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.hero-id-text {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.hero-name {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  font-stretch: 112%;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hero-open {
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg-soft);
}

.hero-title {
  font-size: clamp(2.6rem, 1.3rem + 5.2vw, 6rem);
  font-stretch: 112%;
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hero-tagline {
  max-width: 30ch;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.hero-key {
  text-decoration: underline;
  text-decoration-color: var(--vermilion);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}

.hero .lead {
  max-width: 54ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-2);
}

.btn-meta {
  font-weight: 500;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  list-style: none;
  margin-block-start: var(--s-2);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line);
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--fg-soft);
}

[data-local-time],
.clock-rel {
  white-space: nowrap;
}

.hero-stack {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-3);
}

.stack-caption {
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--fg-soft);
}

.stack-diagram {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.layer-group {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1.25rem 0.5rem minmax(0, 1fr);
  column-gap: 0.4rem;
}

/* Below this width the 1.25rem label gutter is too narrow and the vertical
   axis labels clip against the screen edge (e.g. on the 3D iPhone panel).
   Drop the decorative axis labels and let the layer titles carry the meaning.
   Scoped through .stack-diagram so it outranks the base rules regardless of
   where they appear in the cascade. */
@media (max-width: 620px) {
  .stack-diagram .group-label { display: none; }
  .stack-diagram .layer-group { grid-template-columns: 0.35rem minmax(0, 1fr); }
  .stack-diagram .layer-group::before { grid-column: 1; }
  .stack-diagram .layers { grid-column: 2; }
}

.layer-group:has(> .layers > :nth-child(2)) { flex-grow: 2; }
.layer-group:has(> .layers > :nth-child(3)) { flex-grow: 3; }
.layer-group:has(> .layers > :nth-child(4)) { flex-grow: 4; }
.layer-group:has(> .layers > :nth-child(5)) { flex-grow: 5; }

.layer-group::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  border: 2px solid var(--line-strong);
  border-inline-end: 0;
}

.group-label {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
}

.layers {
  grid-column: 3;
  grid-row: 1;
  list-style: none;
  container: layer / inline-size;
  display: grid;
  grid-auto-rows: minmax(4.75rem, 1fr);
  gap: 4px;
}

.layer {
  --layer: var(--stone);
  --layer-ink: var(--night);
  --layer-line: rgba(10, 16, 32, 0.32);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-inner);
  background: var(--layer);
  color: var(--layer-ink);
}

.tone-stone { --layer: var(--stone); }
.tone-sand { --layer: var(--sand); }
.tone-shallows { --layer: var(--shallows); }

.tone-navy,
.tone-night {
  --layer-ink: var(--stone);
  --layer-line: rgba(243, 238, 228, 0.42);
}

.tone-navy { --layer: var(--navy); }
.tone-night { --layer: var(--night); }
.tone-terracotta { --layer: var(--vermilion); }

.layer-name {
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
  font-stretch: 118%;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.035em;
}

.layer-tools {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.layer-tools li {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--layer-line);
  border-radius: var(--r-control);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}

@container layer (min-width: 26rem) {
  .layer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
  }

  .layer-name {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .layer-tools {
    flex: 0 1 auto;
    justify-content: flex-end;
  }
}

.stack-link {
  justify-self: start;
}

.title-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: var(--s-6);
  border-block-start: 2px solid var(--fg);
}

.tb-row {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-block-end: 1px solid var(--line);
}

.tb-row dt {
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg-soft);
}

.tb-row dd {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--fg);
}

.tb-sub {
  display: block;
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--fg-soft);
}

@media (min-width: 720px) {
  .title-block {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .hero-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: stretch;
  }

  /* Keep the hero within one screen: type and rhythm follow the viewport height. */
  .hero {
    padding-block: clamp(1rem, 3vh, 2.5rem);
  }

  .hero-copy {
    gap: clamp(0.6rem, 1.8vh, 1.25rem);
  }

  .hero-title {
    font-size: clamp(2.25rem, min(1.3rem + 5.2vw, 9.5vh), 6rem);
  }

  .hero-tagline {
    max-width: 42ch;
  }

  /* Bottom of the copy column lines up with the bottom of the stack column. */
  .hero-copy {
    grid-template-rows: auto auto auto auto auto 1fr;
  }

  .hero-facts {
    align-self: end;
  }

  .hero .title-block {
    margin-block-start: clamp(0.5rem, 1.5vh, 1rem);
  }

  .avatar {
    inline-size: clamp(3.5rem, 8vh, 6.5rem);
  }

  .hero-facts {
    padding-block-start: clamp(0.5rem, 1.5vh, 1rem);
  }
}

@media (min-width: 1024px) and (max-height: 820px) {
  .hero-title {
    font-size: clamp(2.25rem, min(1.3rem + 5.2vw, 8.5vh), 6rem);
  }

  .hero-tagline {
    font-size: 1.125rem;
  }

  .hero .lead {
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .hero-copy {
    gap: 0.5rem;
  }

  .hero-actions {
    margin-block-start: 0;
  }

  .hero-facts {
    margin-block-start: 0;
  }

}

/* Wide enough for chips to stay on two lines at most, so equal fixed-height rows
   fit their content. Narrower desktops keep the default flexible stack. */
@media (min-width: 1400px) {
  .hero .layers {
    grid-auto-rows: 4rem;
    grid-auto-rows: clamp(3.75rem, round(down, 7.5vh, 2px), 4.75rem);
  }

  .hero .stack-diagram {
    justify-content: space-between;
  }

  /* Repeated class outranks the :has() flex-grow rules, so a group is exactly as
     tall as its bars and its bracket matches them. */
  .hero .stack-diagram .layer-group.layer-group.layer-group {
    flex: 0 0 auto;
  }

  .hero .layer {
    padding-block: 0.25rem;
    overflow: hidden;
  }

  .hero .layer-tools li {
    line-height: 1.25;
  }
}

@media (min-width: 1200px) {
  .title-block {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .tb-row {
    border-block-end: 0;
  }

  .tb-row + .tb-row {
    padding-inline-start: var(--s-4);
    border-inline-start: 1px solid var(--line);
  }
}

.section-head {
  display: grid;
  gap: var(--s-4);
  max-width: 60rem;
}

.section,
.approach {
  position: relative;
  padding-block: var(--section-pad);
}

.is-split-top {
  border-block-start: 1px solid var(--line);
}

.principles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: var(--s-7) var(--s-6);
  margin-block-start: var(--s-7);
}

.principle {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding-block-start: var(--s-4);
  border-block-start: 2px solid var(--fg);
}

.principle h3 {
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  font-stretch: 115%;
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.principle p {
  color: var(--fg-soft);
  max-width: 44ch;
}

.inline-link {
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.inline-link:hover {
  text-decoration-color: currentColor;
}

.case-one {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--deep);
}

.case-one-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "context" "decision" "demo" "result";
  gap: var(--s-7);
}

.case-one-grid > * {
  min-width: 0;
}

.case-one-head {
  grid-area: head;
  display: grid;
  gap: var(--s-5);
  max-width: 62rem;
}

.case-one-head h2 {
  font-size: clamp(2.15rem, 1.2rem + 3.8vw, 4.75rem);
}

.case-one-context { grid-area: context; }
.case-one-decision { grid-area: decision; }
.sim-wrap { grid-area: demo; }
.case-one-result { grid-area: result; }

.case-one-context,
.case-one-decision,
.case-one-result {
  display: grid;
  gap: var(--s-4);
  max-width: var(--measure);
}

.case-one-context p,
.case-one-decision > p {
  color: var(--fg-soft);
}

.block-title {
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--fg);
  padding-block-end: var(--s-2);
  border-block-end: 2px solid var(--fg);
}

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--s-4);
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 2.25rem;
  color: var(--fg);
}

.steps li::before {
  content: counter(step) ".";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--fg-mute);
}

.lesson {
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: 2px solid var(--fg);
}

.lesson .label {
  color: var(--fg-soft);
}

.lesson-text {
  font-size: var(--t-h3);
  font-stretch: 110%;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sim {
  container: sim / inline-size;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--card);
}

.sim-head {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border-block-end: 1px solid var(--line);
}

.sim-head .label {
  color: var(--fg-soft);
}

.sim-head h3 {
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
}

.sim-intro {
  font-size: var(--t-small);
  color: var(--fg-soft);
  max-width: 60ch;
}

.sim-mode {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border: 0;
  border-block-end: 1px solid var(--line);
  min-width: 0;
}

.sim-mode legend {
  padding: 0;
  margin-block-end: var(--s-2);
}

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.seg-option {
  position: relative;
  display: inline-flex;
}

.seg-option input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seg-option span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-control);
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--fg-soft);
  transition: background-color var(--dur-press) var(--ease-press), color var(--dur-press) var(--ease-press), border-color var(--dur-press) var(--ease-press);
}

.seg-option:hover span {
  border-color: var(--fg);
  color: var(--fg);
}

.seg-option input:checked + span {
  background: var(--cobalt-bright);
  border-color: var(--cobalt-bright);
  color: var(--night);
}

.seg-option input[value="overlay"]:checked + span {
  background: var(--vermilion-lite);
  border-color: var(--vermilion-lite);
  color: var(--night);
}

.seg-option input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.sim-users {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
}

@container sim (min-width: 21rem) {
  .sim-users {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sim-user {
  --bar: var(--fg-mute);
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--card);
  min-width: 0;
}

.sim-user[data-state="base"] { --bar: var(--base-fill); }
.sim-user[data-state="delta"],
.sim-user[data-state="overwritten"] { --bar: var(--delta-fill); }

.sim-user.is-flash {
  animation: panel-flash 900ms var(--ease-press);
}

.sim-user-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.sim-user-head h4 {
  font-size: 1.0625rem;
  font-stretch: 115%;
  font-weight: 750;
}

.sim-status {
  padding: 0.2rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: var(--r-control);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-soft);
}

.sim-user[data-state="base"] .sim-status { color: var(--cool); }
.sim-user[data-state="delta"] .sim-status { color: var(--accent); }
.sim-user[data-state="overwritten"] .sim-status {
  color: var(--night);
  background: var(--vermilion-lite);
  border-color: var(--vermilion-lite);
}

.sim-chart {
  display: flex;
  align-items: flex-end;
  gap: 7%;
  block-size: 8rem;
  padding-inline: 4%;
  border-block-end: 1px solid var(--line-strong);
  background: repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px 25%);
}

.sim-bar {
  flex: 1;
  block-size: calc(var(--v, 50) * 1%);
  border-radius: 5px 5px 0 0;
  background: var(--bar);
  transition: block-size var(--dur-settle) var(--ease-register), background-color var(--dur-settle) var(--ease-press);
}

.sim-user[data-state="delta"] .sim-bar,
.sim-user[data-state="overwritten"] .sim-bar {
}

.sim-user[data-state="base"] .sim-bar {
}

.sim-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.sim-filter-label {
  font-size: var(--t-micro);
  color: var(--fg-mute);
  flex-basis: 100%;
}

.sim-filter button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.7rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-control);
  background: transparent;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-press), color var(--dur-press) var(--ease-press), border-color var(--dur-press) var(--ease-press), transform var(--dur-press) var(--ease-press);
}

.sim-filter button:hover {
  border-color: var(--fg);
}

.sim-filter button:active {
  transform: translateY(1px);
}

.sim-filter button[aria-pressed="true"] {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--deep);
}

.sim-db {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-block-start: 1px solid var(--line);
}

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.sim-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--face-mono);
  font-stretch: 87.5%;
  font-size: var(--t-label);
  line-height: 1.45;
}

.sim-table caption {
  padding-block-end: 0.35rem;
  text-align: start;
  font-weight: 600;
  color: var(--fg);
}

.sim-note {
  margin-inline-start: 0.5rem;
  font-weight: 450;
  color: var(--fg-mute);
}

.sim[data-mode="overlay"] .sim-note {
  display: none;
}

.sim[data-mode="shared"] .sim-delta-table caption,
.sim[data-mode="shared"] .sim-delta-table td {
  color: var(--fg-mute);
}

.sim[data-mode="shared"] .sim-delta-table th {
  border-block-end-style: dashed;
}

.sim-table th {
  padding: 0.35rem 0.75rem 0.35rem 0;
  text-align: start;
  font-weight: 450;
  color: var(--fg-mute);
  border-block-end: 1px solid var(--line-strong);
  white-space: nowrap;
}

.sim-table td {
  padding: 0.4rem 0.75rem 0.4rem 0;
  border-block-end: 1px solid var(--line);
  color: var(--fg);
  overflow-wrap: anywhere;
}

.sim-table td:last-child {
  color: var(--accent);
}

[data-base-table] td:last-child {
  color: var(--cool);
}

.sim[data-mode="shared"] [data-base-table] td:last-child {
  color: var(--fg);
}

.sim-empty td,
.sim-empty td:last-child {
  color: var(--fg-mute);
}

.is-written {
  animation: row-flash 1100ms var(--ease-press);
}

.sim-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-block-start: 1px solid var(--line);
}

.sim-log {
  flex: 1 1 16rem;
  min-height: 3em;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-soft);
}

@media (min-width: 1024px) {
  .case-one-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "head head" "context demo" "decision demo" "result demo";
    column-gap: clamp(2rem, 4vw, 4.5rem);
    row-gap: var(--s-7);
    align-items: start;
  }

  .sim-wrap {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 1.25rem);
    align-self: start;
  }
}

.work {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--paper);
}

.stack-head {
  display: grid;
  gap: var(--s-4);
  max-width: 60rem;
}

.sheets {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  margin-block-start: var(--s-8);
}

.case-sheet {
  --case: var(--cobalt);
  --case-text: var(--paper-cobalt);
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--card);
}

.sheet-strip {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
}

.sheet-strip .label {
  color: var(--fg);
}

.sheet-strip .stack-list li {
  border-color: var(--line-strong);
}

.case-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "fig" "blocks";
  gap: var(--s-6);
  padding: var(--s-6) var(--s-5) var(--s-6);
}

.case-body > * {
  min-width: 0;
}

.case-intro {
  grid-area: intro;
  display: grid;
  gap: var(--s-3);
}

.case-intro h3 {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.9rem);
  font-stretch: 118%;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.035em;
}

.case-lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--fg-soft);
  max-width: 48ch;
}

.case-fig {
  grid-area: fig;
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: var(--s-5);
  border-radius: var(--r-inner);
  background-color: var(--paper-fig);
}

.case-fig figcaption {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--fg-soft);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--line);
}

.fig-label {
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--fg);
}

.case-blocks {
  grid-area: blocks;
  display: grid;
  gap: var(--s-5);
}

.case-block {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  max-width: var(--measure);
}

.case-block h4 {
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--fg);
}

.case-block p,
.case-block li {
  font-size: 1rem;
  line-height: 1.6;
}

.tenants-before {
  display: grid;
  gap: var(--s-2);
}

.tenant-cells {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
  gap: 0.4rem;
}

.tenant-cells li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1.5px solid var(--case-text);
  border-radius: 8px;
  background: color-mix(in srgb, var(--case) 16%, var(--card));
  font-family: var(--face-mono);
  font-stretch: 87.5%;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--case-text);
}

.tenant-cells .is-more {
  border-style: dashed;
}

.tenants-bracket {
  position: relative;
  block-size: 1.5rem;
  margin-inline: 1.25rem;
  border: 1.5px solid var(--fg-mute);
  border-block-start: 0;
  border-radius: 0 0 10px 10px;
}

.tenants-bracket::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 100%;
  inline-size: 1.5px;
  block-size: 1rem;
  background: var(--fg-mute);
}

.tenants-after {
  display: grid;
  gap: var(--s-2);
  margin-block-start: 1rem;
  padding: var(--s-3);
  border: 1.5px solid var(--fg);
  border-radius: var(--r-inner);
  background: var(--card);
}

.tenant-layer {
  display: grid;
  grid-template-columns: minmax(0, 6.25rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-2);
}

.layer-db {
  font-family: var(--face-mono);
  font-stretch: 87.5%;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.groups {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  block-size: 2rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.groups span {
  border-inline-end: 2px solid var(--vermilion-deep);
  background: color-mix(in srgb, var(--cobalt) 22%, transparent);
}

.groups span:nth-child(even) {
  background: color-mix(in srgb, var(--cobalt) 40%, transparent);
}

.groups span:last-child {
  border-inline-end: 0;
}

.tiles-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.tiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
}

.tiles li {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  font-family: var(--face-mono);
  font-stretch: 87.5%;
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--fg-soft);
  transition: background-color var(--dur-settle) var(--ease-press), color var(--dur-settle) var(--ease-press), border-color var(--dur-settle) var(--ease-press), transform var(--dur-settle) var(--ease-register);
  transition-delay: calc(var(--i, 0) * 14ms);
}

.tiles li:nth-child(5n + 2) {
  background: color-mix(in srgb, var(--vermilion) 22%, var(--card));
}

.tiles li:nth-child(7n + 4) {
  background: color-mix(in srgb, var(--vermilion) 22%, var(--card));
}

.tiles .is-more {
  border-style: dashed;
  color: var(--case-text);
}

.tiles.is-dark li {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--card);
}

.tiles.is-dark li:nth-child(5n + 2) {
  background: var(--vermilion-deep);
  border-color: var(--vermilion-deep);
  color: var(--night);
}

.tiles.is-dark .is-more {
  color: var(--card);
}

.pipeline {
  list-style: none;
  position: relative;
  display: grid;
  gap: var(--s-4);
}

.pipeline::before {
  content: "";
  position: absolute;
  inset-block: 0.9rem;
  inset-inline-start: calc(1.125rem - 1px);
  inline-size: 2px;
  border-radius: 2px;
  background: var(--line-strong);
}

.station {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding-inline-start: 2.75rem;
  min-width: 0;
}

.station::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(1.125rem - 8px);
  inset-block-start: 0.25rem;
  inline-size: 16px;
  block-size: 16px;
  border: 2px solid var(--fg);
  border-radius: 5px;
  background: var(--card);
}

.station-gate::before {
  border-color: var(--vermilion-deep);
  background: var(--vermilion-deep);
  transform: rotate(45deg) scale(0.9);
}

.station:first-child::before {
  border-color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 25%, var(--card));
}

.station:last-child::before {
  border-color: var(--cobalt);
  background: var(--cobalt);
}

.station-num {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--fg-mute);
}

.station strong {
  font-size: 1rem;
  font-stretch: 108%;
  font-weight: 750;
  line-height: 1.25;
}

.station span:last-child {
  font-size: 0.875rem;
  color: var(--fg-soft);
  line-height: 1.4;
}

@media (min-width: 480px) {
  .tiles {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .case-body:has(> .case-fig) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "intro fig" "blocks fig";
    align-items: start;
    column-gap: var(--s-7);
  }

  .is-fig-left .case-body:has(> .case-fig) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "fig intro" "fig blocks";
  }

  .is-fig-wide .case-body:has(> .case-fig) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "fig" "blocks";
  }

  .is-fig-wide .case-blocks,
  .case-body:not(:has(> .case-fig)) .case-blocks {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    column-gap: var(--s-6);
  }

  .tenant-cells {
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 0.3rem;
  }

  .pipeline {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-4);
  }

  .pipeline::before {
    inset-block: auto;
    inset-block-start: calc(0.25rem + 7px);
    inset-inline: 0.5rem;
    inline-size: auto;
    block-size: 2px;
    background: var(--line-strong);
  }

  .station {
    padding-inline-start: 0;
    padding-block-start: 2.1rem;
  }

  .station::before {
    inset-inline-start: 0;
  }
}

@media (min-width: 1024px) {
  .case-body {
    padding: var(--s-7) var(--s-7) var(--s-7);
  }

  .sheet-strip {
    padding: var(--s-5) var(--s-7);
  }
}

.experience {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--section-pad);
  background: var(--deep);
}

.rev-block {
  margin-block-start: var(--s-7);
  border-block-start: 2px solid var(--fg);
}

.rev-head {
  display: none;
}

.rev summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5rem;
  grid-template-areas: "period chev" "role chev" "company chev" "location chev";
  column-gap: var(--s-4);
  row-gap: 0.2rem;
  align-items: start;
  min-height: 44px;
  padding: var(--s-5) var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  border-block-end: 1px solid var(--line);
  border-radius: var(--r-inner);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-press);
}

.rev summary::-webkit-details-marker {
  display: none;
}

.rev summary:hover {
  background: color-mix(in srgb, var(--stone) 5%, transparent);
}

.rev summary:focus-visible {
  outline-offset: -2px;
}

.rev-period {
  grid-area: period;
  display: grid;
  gap: 0.5rem;
  font-size: var(--t-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-soft);
  line-height: 1.5;
}

.rev-span {
  position: relative;
  display: block;
  inline-size: 100%;
  max-inline-size: 13rem;
  block-size: 6px;
  background-color: color-mix(in srgb, var(--fg) 12%, transparent);
  background-image: linear-gradient(to right, transparent calc(100% - 1px), var(--bg) calc(100% - 1px));
  background-size: calc(100% / var(--years, 8)) 100%;
}

.rev-span::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--from, 0%);
  inline-size: var(--len, 0%);
  min-inline-size: 4px;
  background: var(--cobalt-bright);
}

.rev[open] .rev-span::after {
  background: var(--fg);
}

.rev-axis {
  display: flex;
  justify-content: space-between;
  max-inline-size: 13rem;
  font-variant-numeric: tabular-nums;
}

.rev-case {
  white-space: nowrap;
  font-weight: 700;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.rev-case:hover {
  text-decoration-color: currentColor;
}

.rev-role {
  grid-area: role;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-stretch: 112%;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.rev-company {
  grid-area: company;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--fg);
}

.rev-location {
  grid-area: location;
  font-size: var(--t-small);
  color: var(--fg-soft);
}

.rev-chevron {
  grid-area: chev;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.4rem;
  color: var(--fg-soft);
  transition: transform var(--dur-settle) var(--ease-register);
}

.rev[open] .rev-chevron {
  transform: rotate(180deg);
  color: var(--fg);
}

.rev::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--dur-settle) var(--ease-register), content-visibility var(--dur-settle) allow-discrete;
}

.rev[open]::details-content {
  block-size: auto;
}

.rev-body {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-5) 0 var(--s-7);
  border-block-end: 1px solid var(--line);
}

.rev-body > * {
  min-width: 0;
}

.rev-overview {
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

.rev-overview > p:first-child {
  color: var(--fg);
}

.rev-overview .label {
  margin-block-start: var(--s-2);
  color: var(--cool);
}

.rev-points {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.rev-points li {
  position: relative;
  padding-inline-start: 1.4rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-soft);
}

.rev-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  inline-size: 0.6rem;
  block-size: 2px;
  background: var(--fg-mute);
}

@media (min-width: 1024px) {
  .rev-head {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 0.9fr) 1.5rem;
    column-gap: var(--s-5);
    padding-block: var(--s-3);
    border-block-end: 1px solid var(--line-strong);
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--fg-mute);
  }

  .rev summary {
    grid-template-columns: 13rem minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 0.9fr) 1.5rem;
    grid-template-areas: "period role company location chev";
    column-gap: var(--s-5);
    align-items: center;
  }

  .rev-chevron {
    margin-block-start: 0;
  }

  .rev-body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s-7);
  }
}

.ai {
  position: relative;
  padding-block: var(--section-pad);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--s-5);
  margin-block-start: var(--s-7);
}

.ai-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-card);
}

.ai-kicker {
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.4;
  color: var(--accent);
}

.ai-card h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  font-stretch: 118%;
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.ai-card > p:not(.ai-kicker) {
  color: var(--fg-soft);
  max-width: 48ch;
}

.card-link {
  align-self: flex-start;
  margin-block-start: auto;
}

.ai-tools {
  margin-block-start: var(--s-6);
}

.ai-tools li {
  border-color: var(--line-strong);
}

@media (min-width: 1024px) {
  .ai-card {
    padding: var(--s-7) var(--s-6);
  }
}

.stack-section {
  position: relative;
  padding-block: var(--section-pad);
}

.stack-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
}

.stack-grid > * {
  min-width: 0;
}

.stack-head h2 {
  font-size: clamp(2.15rem, 1.25rem + 2.6vw, 3.4rem);
}

.schedule {
  border-block-start: 2px solid var(--fg);
}

.schedule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line);
}

.schedule dt {
  font-size: 1.0625rem;
  font-stretch: 112%;
  font-weight: 750;
  line-height: 1.3;
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chips li {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}

.chips .is-recent {
  border-color: var(--cobalt);
  background: var(--cobalt);
  color: #FFFFFF;
  font-weight: 600;
}

.chip-key {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-small);
  color: var(--fg-soft);
  max-width: 40ch;
}

.chip-swatch {
  flex-shrink: 0;
  inline-size: 1.75rem;
  block-size: 1.1rem;
  border-radius: var(--r-control);
  background: var(--cobalt);
}

@media (min-width: 720px) {
  .schedule-row {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

@media (min-width: 1024px) {
  .stack-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s-7);
    align-items: start;
  }

  .stack-head {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 2rem);
  }
}

.ref-band {
  padding-block: var(--section-pad);
  background:
    var(--paper-3);
}

.ref-band.scheme-paper {
  --card: var(--paper-2);
}

.ref-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
}

.ref-grid > * {
  min-width: 0;
}

.writing,
.education {
  display: grid;
  align-content: start;
  gap: var(--s-4);
}

.pubs {
  list-style: none;
  margin-block-start: var(--s-5);
  border-block-start: 2px solid var(--fg);
}

.pub {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--line);
}

.pub-year {
  white-space: nowrap;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  font-stretch: 125%;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent);
}

.pub-body {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

.pub-body h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
  line-height: 1.22;
}

.pub-publisher {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cool);
}

.pub-focus {
  font-size: var(--t-small);
  color: var(--fg-soft);
  max-width: 60ch;
}

.pub-focus .label {
  display: inline;
  margin-inline-end: 0.4rem;
}

.pub-try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-block-start: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-inner);
  background-color: var(--deep);
  color: var(--stone);
}

.pub-try p {
  flex: 1 1 14rem;
  font-size: var(--t-small);
}

.pub-try .btn-ghost {
  color: var(--stone);
  border-color: var(--stone);
}

.pub-try .btn-ghost:hover {
  background: var(--stone);
  color: var(--deep);
}

.pub-try :focus-visible {
  outline-color: var(--stone);
}

.edu {
  list-style: none;
  margin-block-start: var(--s-5);
  border-block-start: 2px solid var(--fg);
}

.edu li {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--line);
}

.edu h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
  line-height: 1.22;
}

.edu p {
  color: var(--fg-soft);
}

.edu .edu-meta {
  font-size: 0.875rem;
  color: var(--cool);
}

.langs-title {
  margin-block-start: var(--s-5);
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--fg);
}

.langs {
  border-block-start: 1px solid var(--line-strong);
}

.langs div {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--line);
}

.langs dt {
  font-weight: 750;
  font-stretch: 110%;
}

.langs dd {
  color: var(--fg-soft);
}

@media (min-width: 1024px) {
  .ref-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s-8);
  }
}

.contact {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--vermilion);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

.contact-grid > * {
  min-width: 0;
}

.contact-lead {
  display: grid;
  align-content: start;
  gap: var(--s-5);
}

.email-band {
  display: grid;
  gap: var(--s-3);
  padding-block-start: var(--s-5);
  border-block-start: 1.5px solid var(--line-strong);
}

.email-band .email-row {
  inline-size: 100%;
  justify-content: space-between;
}

.email-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

@media (min-width: 640px) {
  .email-band .email-actions {
    margin-inline-start: auto;
  }
}

.contact h2 {
  font-size: clamp(2.6rem, 1.4rem + 5.2vw, 6.25rem);
  font-stretch: 120%;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.contact .lead {
  color: var(--fg);
}

.contact-where {
  color: var(--fg-soft);
  max-width: 52ch;
}

.email-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
}

.email-link {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.3rem;
  font-size: clamp(1.25rem, 0.75rem + 2.4vw, 2.6rem);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--fg);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  transition: text-decoration-thickness var(--dur-press) var(--ease-press), text-underline-offset var(--dur-settle) var(--ease-register);
}

.email-link:hover {
  text-decoration-thickness: 5px;
  text-underline-offset: 0.26em;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 2px solid var(--fg);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--fg);
  font-size: var(--t-small);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-press) var(--ease-press), color var(--dur-press) var(--ease-press), transform var(--dur-press) var(--ease-press);
}

.copy-btn:hover,
.copy-btn.is-done {
  background: var(--fg);
  color: var(--vermilion);
}


.contact .btn-ghost {
  color: var(--fg);
  border-color: var(--fg);
}

.contact .btn-ghost:hover {
  background: var(--fg);
  color: var(--vermilion);
}

.site-footer {
  padding-block: var(--s-6);
  border-block-start: 1px solid var(--line);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-6);
  font-size: var(--t-small);
  color: var(--fg-soft);
}

.footer-name {
  font-size: 1.0625rem;
  font-stretch: 125%;
  font-weight: 800;
  color: var(--fg);
}


html:not(.js) [data-theme-toggle],
html:not(.js) .copy-btn,
html:not(.js) [data-flip],
html:not(.js) .sim-mode,
html:not(.js) .sim-filter,
html:not(.js) [data-sim-reset],
html:not(.js) .sim-intro,
html:not(.js) .pub-try,
html:not(.js) .rev-span,
html:not(.js) .rev-axis {
  display: none;
}

html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition-property: background-color, color, border-color, fill !important;
  transition-duration: 280ms !important;
  transition-timing-function: var(--ease-press) !important;
  transition-delay: 0s !important;
}

@keyframes panel-flash {
  0% {
    box-shadow: inset 0 0 0 2px var(--vermilion-lite);
    background-color: color-mix(in srgb, var(--vermilion) 22%, var(--card));
  }
  100% {
    box-shadow: inset 0 0 0 0 transparent;
    background-color: var(--card);
  }
}

@keyframes row-flash {
  from {
    background-color: color-mix(in srgb, var(--vermilion) 25%, transparent);
  }
  to {
    background-color: transparent;
  }
}

@media print {
  :root,
  html[data-theme="dark"] {
    color-scheme: light;
    --paper: #FFFFFF;
    --paper-2: #FFFFFF;
    --paper-3: #FFFFFF;
    --paper-ink: #0A1020;
    --paper-soft: #3A4152;
    --paper-mute: #4A5266;
    --paper-line: rgba(10, 16, 32, 0.2);
    --paper-line-strong: rgba(10, 16, 32, 0.6);
    --paper-fig: #FFFFFF;
    --section-pad: 1.5rem;
  }

  .scheme-deep,
  .scheme-cobalt,
  .scheme-shallows,
  .scheme-verm,
  .scheme-card,
  .scheme-paper {
    --fg: #0A1020;
    --fg-soft: #3A4152;
    --fg-mute: #4A5266;
    --line: rgba(10, 16, 32, 0.2);
    --line-strong: rgba(10, 16, 32, 0.6);
    --accent: #AA3517;
    --cool: #2347C9;
    --pop: #AA3517;
    --card: #FFFFFF;
    background: #FFFFFF !important;
    color: #0A1020;
  }

  body {
    font-size: 10.5pt;
  }

  .navbar-wrapper,
  .skip-link,
  .hero-facts li:last-child,
  .hero-actions,
  .stack-link,
  .sim-wrap,
  .copy-btn,
  [data-flip],
  .pub-try,
  .site-footer .text-link,
  .rev-chevron {
    display: none !important;
  }

  .case-sheet,
  .pub,
  .edu li,
  .schedule-row,
  .principle,
  .ai-card,
  .rev {
    break-inside: avoid;
  }

  .case-sheet,
  .ai-card {
    border: 1px solid rgba(10, 16, 32, 0.3);
  }

  .layer,
  .avatar {
    --layer-ink: #0A1020;
    --layer-line: rgba(10, 16, 32, 0.4);
    background: #FFFFFF !important;
    border: 1px solid rgba(10, 16, 32, 0.3);
  }

  .layer-group::before {
    border-color: rgba(10, 16, 32, 0.6);
  }

  .chips .is-recent,
  .chip-swatch {
    background: #FFFFFF !important;
    border: 2px solid #0A1020;
    color: #0A1020;
  }

  .rev-span,
  .rev-axis {
    display: none !important;
  }

  .rev::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }

  .navbar-links {
    transform: none;
  }
}