@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Inter-Medium.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: IBMPlexMono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: IBMPlexMono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
}

:root {
  --black: #000000;
  --ink: #0a0a0a;
  --charcoal: #141414;
  --elev: #1c1c1c;
  --line: #2a2a2a;
  --muted: #8a8a8a;
  --silver: #c8c8c8;
  --white: #f5f5f5;
  --paper: #ffffff;
  --magenta: #ff2e88;
  --danger: #ff4d6a;
  --header: 64px;
  --footer: 52px;
  --radius: 10px;
}

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

html {
  background: var(--black);
  color-scheme: dark;
  overscroll-behavior: none;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--black);
  color: var(--white);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  overscroll-behavior: none;
}

a {
  color: var(--paper);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--paper);
}

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

.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  z-index: 20;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--black);
  border-radius: 6px;
}

.skip:focus {
  top: 12px;
}

.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;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header);
  padding: 12px 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--paper);
  font-family: IBMPlexMono, ui-monospace, monospace;
  font-size: 22px;
  line-height: 1;
  text-shadow:
    0 0 10px rgb(255 255 255 / 0.4),
    0 0 2px rgb(255 255 255 / 0.75);
}

.brand-name {
  margin-right: -0.5em;
  color: var(--paper);
  font-family: IBMPlexMono, ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.nav-text,
.nav-lang {
  padding: 8px 10px;
  color: var(--silver);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.nav-text.is-active,
.nav-text:hover,
.nav-lang:hover {
  color: var(--paper);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.btn-ghost {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--white);
}

.btn-ghost:hover {
  border-color: var(--silver);
  color: var(--paper);
}

.btn-solid {
  border: 1px solid var(--paper);
  background: var(--paper);
  color: var(--black);
}

.btn-solid:hover {
  background: var(--white);
  color: var(--black);
}

.hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.hint a {
  color: var(--muted);
}

.hint a:hover {
  color: var(--paper);
}

.page-inner {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.page-inner main {
  flex: 1;
  width: min(860px, calc(100% - 48px));
  margin: 0 auto;
  padding: 32px 0 80px;
}

.page-wide main {
  width: min(1040px, calc(100% - 48px));
}

.prose h1,
.hero-copy h1,
.features-head h1 {
  margin: 0 0 16px;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.prose h2 {
  margin: 36px 0 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.prose h3 {
  margin: 24px 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.prose p,
.prose li {
  color: var(--silver);
}

.prose ul,
.prose ol {
  padding-left: 1.2em;
}

.prose .lede {
  color: var(--white);
  font-size: 17px;
}

.notice {
  margin: 0 0 28px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--charcoal);
  color: var(--silver);
}

.legal-block {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink);
}

.address {
  margin: 0;
  color: var(--white);
  font-style: normal;
  line-height: 1.6;
}

.features-head {
  max-width: 640px;
  margin-bottom: 40px;
}

.features-head p {
  margin: 0;
  color: var(--silver);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.feature-card {
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--charcoal);
}

.feature-card h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.feature-card p {
  margin: 0;
  color: var(--silver);
  font-size: 14px;
  line-height: 1.45;
}

.help-head {
  max-width: 640px;
  margin-bottom: 40px;
}

.help-head h1 {
  margin: 0 0 16px;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.help-head p {
  margin: 0 0 20px;
  color: var(--silver);
}

.help-search {
  position: relative;
}

.help-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.help-search-field input {
  width: 100%;
  height: 48px;
  padding: 8px 40px 8px 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--charcoal);
  color: var(--white);
  font: 400 15px/1.45 Inter, system-ui, sans-serif;
}

.help-search-field input::placeholder {
  color: var(--muted);
  font-size: 13px;
}

.help-search-field input:focus {
  border-color: var(--paper);
  outline: none;
}

.help-search-icon,
.help-search-clear,
.help-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
}

.help-search-icon {
  position: absolute;
  left: 8px;
  width: 36px;
  height: 36px;
  pointer-events: none;
}

.help-search-clear {
  position: absolute;
  right: 4px;
  width: 36px;
  height: 36px;
  color: var(--muted);
  cursor: pointer;
}

.help-search-clear:hover {
  color: var(--paper);
}

.help-search-icon svg,
.help-search-clear svg,
.help-search-toggle svg {
  width: 20px;
  height: 20px;
}

.help-search-toggle {
  width: 48px;
  height: 48px;
  color: var(--white);
  cursor: pointer;
}

.help-search--compact {
  display: flex;
  justify-content: flex-end;
  width: 48px;
  height: 48px;
  overflow: hidden;
  transition: width 240ms cubic-bezier(0.33, 1, 0.68, 1);
}

.help-search--compact.is-open {
  width: min(320px, 60vw);
  overflow: visible;
}

.help-search--compact:not(.is-open) .help-search-field,
.help-search--compact:not(.is-open) .help-suggestions {
  display: none;
}

.help-search--compact.is-open .help-search-toggle {
  display: none;
}

.help-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 8;
  max-height: 260px;
  margin: 0;
  padding: 6px 0;
  overflow: auto;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--elev);
  box-shadow: 0 12px 32px rgb(0 0 0 / 45%);
}

.help-suggestion {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--white);
  font: 400 15px/1.35 Inter, system-ui, sans-serif;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.help-suggestion[aria-selected="true"],
.help-suggestion:hover {
  background: var(--charcoal);
}

.help-suggestion-title {
  display: block;
  font-weight: 600;
}

.help-suggestion-snippet {
  display: block;
  margin-top: 2px;
  color: var(--silver);
  font-size: 13px;
}

.help-suggestion mark {
  background: transparent;
  color: var(--paper);
  font-weight: 600;
}

.help-empty {
  max-width: 360px;
  margin: 48px auto;
  text-align: center;
  color: var(--silver);
}

.help-empty-rings {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.help-empty-rings::before,
.help-empty-rings::after {
  content: "";
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.help-empty-rings::before {
  inset: 20px;
}

.help-empty-rings::after {
  inset: 40px;
}

.help-category {
  margin-bottom: 40px;
}

.help-section-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: IBMPlexMono, ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.help-category-lead {
  margin: 0 0 16px;
  color: var(--silver);
}

.help-hairline {
  height: 1px;
  margin: 0 0 16px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.help-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.help-card {
  display: block;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--charcoal);
  text-decoration: none;
}

.help-card:hover {
  border-color: #3a3a3a;
}

.help-card h3 {
  margin: 0 0 8px;
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
}

.help-card p {
  margin: 0;
  color: var(--silver);
  font-size: 14px;
  line-height: 1.45;
}

.help-article-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}

.help-back {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.help-back:hover {
  color: var(--paper);
}

.help-article h1 {
  margin: 0 0 16px;
}

.help-block {
  margin-top: 28px;
}

.help-steps {
  padding-left: 1.2em;
}

.help-steps > li + li {
  margin-top: 12px;
}

.help-result {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--charcoal);
}

.help-result p:last-child {
  margin-bottom: 0;
}

.help-faq {
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink);
}

.help-faq summary {
  padding: 14px 16px;
  cursor: pointer;
  color: var(--white);
  font-weight: 600;
}

.help-faq-body {
  padding: 0 16px 14px;
}

.help-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.help-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--white);
  font-size: 13px;
  text-decoration: none;
}

.help-pill:hover {
  border-color: var(--paper);
}

.help-article code,
.help-card code {
  font-family: IBMPlexMono, ui-monospace, monospace;
  font-size: 0.92em;
}

.site-footer {
  padding: 12px 24px 16px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
}

.footer-nav a,
.footer-copy {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--paper);
}

.footer-copy {
  margin: 8px 0 0;
  text-align: center;
}

.page-error {
  text-align: center;
  padding-top: 12vh;
}

@media (max-width: 720px) {
  .brand-name {
    display: none;
  }

  .site-header {
    padding: 10px 16px;
  }

  .nav-text {
    display: none;
  }

  .page-inner main,
  .page-wide main {
    width: calc(100% - 32px);
  }

  .help-article-bar {
    align-items: flex-start;
  }

  .help-search--compact.is-open {
    width: min(320px, calc(100vw - 120px));
  }
}

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

/* Home */

@property --b-fade {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --b-c0 {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --b-c1 {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --b-c2 {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --b-c3 {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --b-c4 {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --b-card {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --b-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.91;
}

@property --l-fade {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --l-link {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --l-notes {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --l-card {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --l-note {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --l-topic {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --z-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.84;
}

@property --z-pulse {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --z-fade {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --h-collapse {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --h-travel {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --h-pillar {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.45;
}

@property --h-fade {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.page-home {
  overflow-x: clip;
}

.home-hero {
  position: relative;
  padding: 20px 0 8px;
}

.home-rings {
  position: absolute;
  top: -72px;
  right: -88px;
  width: 320px;
  height: 320px;
  pointer-events: none;
}

.home-rings span {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 0.05);
  border-radius: 50%;
}

.home-rings span:nth-child(1) { inset: 0; border-color: rgb(255 255 255 / 0.045); }
.home-rings span:nth-child(2) { inset: 32px; border-color: rgb(255 255 255 / 0.055); }
.home-rings span:nth-child(3) { inset: 64px; border-color: rgb(255 255 255 / 0.07); }
.home-rings span:nth-child(4) { inset: 96px; border-color: rgb(255 255 255 / 0.09); }
.home-rings span:nth-child(5) { inset: 128px; border-color: rgb(255 255 255 / 0.12); }

.home-copy {
  position: relative;
  max-width: 640px;
}

.home-kicker {
  margin: 0 0 14px;
  color: var(--paper);
  font-family: IBMPlexMono, ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5em;
}

.home-tagline {
  margin: 0 0 28px;
  color: var(--silver);
  font-size: 13px;
}

.home-hero h1 {
  margin: 0 0 20px;
  max-width: 14em;
  font-size: clamp(34px, 5.5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.home-lede,
.home-sub,
.home-lead,
.home-block > p,
.home-close p {
  max-width: 62ch;
}

.home-lede {
  margin: 0;
  color: var(--white);
  font-size: 17px;
  line-height: 1.5;
}

.home-sub,
.home-block > p,
.home-close p {
  margin: 14px 0 0;
  color: var(--silver);
  font-size: 15px;
  line-height: 1.5;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.home-stage,
.home-block,
.home-close {
  margin-top: 72px;
}

.home-stage h2,
.home-block h2,
.home-close h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.stage-frame {
  position: relative;
  height: 168px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--charcoal);
}

.stage-anim {
  animation-duration: var(--dur);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--freeze) * var(--dur) * -1);
}

.js .stage-frame.is-playing.stage-anim,
.js .stage-frame.is-playing .stage-anim {
  animation-play-state: running;
  animation-delay: 0s;
}

.stage-fit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.home-lead {
  margin: 20px 0 0;
  color: var(--silver);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.home-points {
  max-width: 62ch;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.home-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.home-points li + li {
  margin-top: 12px;
}

.home-num {
  flex: none;
  width: 28px;
  color: var(--muted);
  font-family: IBMPlexMono, ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 1.45;
}

.home-points p {
  margin: 0;
  color: var(--white);
  font-size: 15px;
  line-height: 1.45;
}

.js .home-points li {
  transform: translateY(12px);
  opacity: 0;
  transition:
    opacity 420ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 420ms cubic-bezier(0.33, 1, 0.68, 1);
}

.js .home-points.is-in li {
  transform: none;
  opacity: 1;
}

.js .home-points li:nth-child(2) { transition-delay: 140ms; }
.js .home-points li:nth-child(3) { transition-delay: 280ms; }
.js .home-points li:nth-child(4) { transition-delay: 420ms; }

.home-block .feature-grid {
  margin-top: 20px;
}

.home-note {
  max-width: 62ch;
  margin: 36px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.research-rings,
.research-dot {
  position: absolute;
  pointer-events: none;
}

.research-rings {
  inset: 0;
  opacity: 0.4;
  animation-name: research-rings-fade;
}

.research-rings span {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.research-rings span:nth-child(1) { width: 168px; height: 168px; border-color: rgb(255 255 255 / 0.17); }
.research-rings span:nth-child(2) { width: 134px; height: 134px; border-color: rgb(255 255 255 / 0.14); }
.research-rings span:nth-child(3) { width: 101px; height: 101px; border-color: rgb(255 255 255 / 0.12); }
.research-rings span:nth-child(4) { width: 67px; height: 67px; border-color: rgb(255 255 255 / 0.09); }
.research-rings span:nth-child(5) { width: 34px; height: 34px; border-color: rgb(255 255 255 / 0.06); }

.research-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--paper);
  opacity: 0.55;
  transform: translate(-50%, -50%);
  animation-name: research-dot-fade;
}

.research-dot:nth-of-type(1) { left: 16%; top: 22%; animation-name: research-dot-1, research-dot-fade; }
.research-dot:nth-of-type(2) { left: 78%; top: 18%; animation-name: research-dot-2, research-dot-fade; }
.research-dot:nth-of-type(3) { left: 28%; top: 58%; animation-name: research-dot-3, research-dot-fade; }
.research-dot:nth-of-type(4) { left: 86%; top: 46%; animation-name: research-dot-4, research-dot-fade; }
.research-dot:nth-of-type(5) { left: 10%; top: 74%; animation-name: research-dot-5, research-dot-fade; }
.research-dot:nth-of-type(6) { left: 62%; top: 28%; animation-name: research-dot-6, research-dot-fade; }
.research-dot:nth-of-type(7) { left: 42%; top: 14%; animation-name: research-dot-7, research-dot-fade; }
.research-dot:nth-of-type(8) { left: 90%; top: 72%; animation-name: research-dot-8, research-dot-fade; }
.research-dot:nth-of-type(9) { left: 34%; top: 86%; animation-name: research-dot-9, research-dot-fade; }
.research-dot:nth-of-type(10) { left: 70%; top: 64%; animation-name: research-dot-10, research-dot-fade; }
.research-dot:nth-of-type(11) { left: 52%; top: 42%; animation-name: research-dot-11, research-dot-fade; }
.research-dot:nth-of-type(12) { left: 22%; top: 38%; animation-name: research-dot-12, research-dot-fade; }

.stage-research {
  --dur: 10.8s;
  --freeze: 0.72;
}

.board {
  position: relative;
  flex: none;
  width: 352px;
  height: 130px;
  opacity: var(--b-fade);
}

.board-row {
  display: flex;
  gap: 8px;
  height: 100%;
}

.mini-col {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 64px;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
}

.mini-label {
  display: block;
  height: 24px;
  padding: 8px 8px 0;
  overflow: hidden;
  color: var(--muted);
  font-family: IBMPlexMono, ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

.mini-rule {
  height: 1px;
  background: var(--line);
}

.mini-body {
  position: relative;
  flex: 1;
  min-height: 0;
}

.board-row .mini-col:nth-child(1) { opacity: var(--b-c0); }
.board-row .mini-col:nth-child(2) { opacity: var(--b-c1); }
.board-row .mini-col:nth-child(3) { opacity: var(--b-c2); }
.board-row .mini-col:nth-child(4) { opacity: var(--b-c3); }
.board-row .mini-col:nth-child(5) { opacity: var(--b-c4); }

.mini-card {
  width: 44px;
  height: 28px;
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 6px;
  background: var(--elev);
  box-shadow: 0 0 8px rgb(255 255 255 / 0.14);
}

.mini-card::after {
  content: "";
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--paper);
}

.board-card {
  position: absolute;
  top: 28px;
  left: calc(10px + 216px * var(--b-x));
  opacity: var(--b-card);
}

.stage-board {
  --dur: 10.2s;
  --freeze: 0.62;
  animation-name: b-fade, b-c0, b-c1, b-c2, b-c3, b-c4, b-card, b-x;
}

.links-stage {
  position: absolute;
  inset: 0;
  opacity: var(--l-fade);
}

.links-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.link-line {
  stroke: rgb(255 255 255 / 0.28);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.link-line-a,
.link-line-b {
  stroke-dasharray: 40 0;
}

.link-line-a {
  stroke-dashoffset: calc(40 * (1 - clamp(0, var(--l-link) * 2, 1)));
}

.link-line-b {
  stroke-dashoffset: calc(40 * (1 - clamp(0, (var(--l-link) - 0.5) * 2, 1)));
}

.links-card,
.note-sheet,
.topic-pill {
  position: absolute;
}

.links-card {
  left: 14%;
  top: 42%;
  opacity: var(--l-card);
  transform: translate(-50%, -50%);
}

.note-sheet {
  left: 50%;
  top: 52%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 68px;
  height: 80px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
  opacity: var(--l-note);
  transform: translate(-50%, -50%);
}

.note-line {
  display: block;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}

.note-line:nth-child(1) { transform: scaleX(min(1, var(--l-notes) / 0.34)); }
.note-line:nth-child(2) { transform: scaleX(clamp(0, (var(--l-notes) - 0.34) / 0.33, 1)); }

.note-line:nth-child(3) {
  width: 62%;
  transform: scaleX(clamp(0, (var(--l-notes) - 0.67) / 0.33, 1));
}

.topic-pill {
  left: 86%;
  top: 38%;
  padding: 6px 10px;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 10px;
  background: var(--elev);
  color: var(--silver);
  font-family: IBMPlexMono, ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.8px;
  line-height: 1;
  opacity: var(--l-topic);
  transform: translate(-50%, -50%);
}

.stage-links {
  --dur: 10.8s;
  --freeze: 0.74;
  animation-name: l-fade, l-link, l-notes, l-card, l-note, l-topic;
}

.zl-stage {
  position: absolute;
  inset: 0;
  opacity: var(--z-fade);
}

.pillar-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(48px + 24px * var(--z-pulse));
  height: calc(48px + 24px * var(--z-pulse));
  border-radius: 50%;
  box-shadow:
    0 0 calc(28px + 20px * var(--z-pulse)) calc(4px * var(--z-pulse))
    rgb(255 255 255 / calc(0.16 * var(--z-pulse)));
  transform: translate(-50%, -50%);
}

.pillar-slot {
  --progress: var(--z-progress);
  --burn: max(0, (var(--progress) - 0.8) / 0.2);
  --core: color-mix(in srgb, var(--magenta) calc(var(--burn) * 100%), var(--paper));
  position: absolute;
  top: 16px;
  bottom: 14px;
  left: 50%;
  width: 24px;
  transform: translateX(-50%);
}

.pillar-slot.slim {
  --progress: var(--h-pillar);
  top: 6px;
  right: auto;
  bottom: 6px;
  left: 6px;
  width: 8px;
  opacity: var(--h-fade);
  transform: none;
}

.pillar-body {
  position: absolute;
  inset: 0;
  transform: scaleY(calc(1 - var(--progress)));
  transform-origin: bottom center;
}

.pillar-glow {
  position: absolute;
  inset: -18px;
  border-radius: 20px;
  background: rgb(255 255 255 / calc(0.18 + 0.2 * (1 - var(--progress))));
  filter: blur(28px);
}

.pillar-mid {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    to bottom,
    rgb(from var(--core) r g b / 0.15),
    rgb(from var(--core) r g b / 0.95),
    rgb(255 255 255 / 0.85)
  );
  filter: blur(6px);
}

.pillar-core {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 32.5%;
  width: 35%;
  border-radius: 20px;
  background: var(--core);
  opacity: 0.95;
}

.stage-zeitlicht {
  --dur: 11s;
  --freeze: 0.55;
  animation-name: z-progress, z-pulse, z-fade;
}

.hf {
  position: relative;
  display: flex;
  flex: none;
  height: 120px;
}

.hf-fold {
  flex: none;
  width: calc(72px * (1 - var(--h-collapse)));
  height: 100%;
  overflow: hidden;
}

.hf-fold .mini-col {
  margin-right: 8px;
  opacity: calc(1 - var(--h-collapse));
}

.hf-gap {
  flex: none;
  width: 8px;
}

.hf-card {
  position: absolute;
  top: 28px;
  left: calc(72px * (1 - var(--h-collapse)) + 18px + 64px * var(--h-travel));
  opacity: var(--h-fade);
}

.stage-hyperfocus {
  --dur: 9.6s;
  --freeze: 0.5;
  animation-name: h-collapse, h-travel, h-pillar, h-fade;
}

@media (max-width: 720px) {
  .stage-frame { height: 120px; }
  .board,
  .hf { height: 100px; }
  .home-rings { display: none; }
}

@media (max-width: 400px) {
  .board { transform: scale(0.78); }
  .hf { transform: scale(0.86); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-frame.stage-anim,
  .stage-frame .stage-anim {
    animation-play-state: paused !important;
    animation-delay: calc(var(--freeze) * var(--dur) * -1) !important;
  }

  .js .home-points li {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

@keyframes research-rings-fade {
  0%, 18% {
    opacity: 0.28;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  58%, 84% {
    opacity: 0.46;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  96%, 100% { opacity: 0.36; }
}

@keyframes research-dot-1 {
  0%, 18% { left: 16%; top: 22%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58%, 84% { left: 50%; top: 16%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96%, 100% { left: 31.3%; top: 19.3%; }
}
@keyframes research-dot-2 {
  0%, 18% { left: 78%; top: 18%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58%, 84% { left: 50%; top: 22.18%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96%, 100% { left: 65.4%; top: 19.88%; }
}
@keyframes research-dot-3 {
  0%, 18% { left: 28%; top: 58%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58%, 84% { left: 50%; top: 28.36%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96%, 100% { left: 37.9%; top: 44.66%; }
}
@keyframes research-dot-4 {
  0%, 18% { left: 86%; top: 46%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58%, 84% { left: 50%; top: 34.55%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96%, 100% { left: 69.8%; top: 40.85%; }
}
@keyframes research-dot-5 {
  0%, 18% { left: 10%; top: 74%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58%, 84% { left: 50%; top: 40.73%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96%, 100% { left: 28%; top: 59.03%; }
}
@keyframes research-dot-6 {
  0%, 18% { left: 62%; top: 28%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58%, 84% { left: 50%; top: 46.91%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96%, 100% { left: 56.6%; top: 36.51%; }
}
@keyframes research-dot-7 {
  0%, 18% { left: 42%; top: 14%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58%, 84% { left: 50%; top: 53.09%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96%, 100% { left: 45.6%; top: 31.59%; }
}
@keyframes research-dot-8 {
  0%, 18% { left: 90%; top: 72%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58%, 84% { left: 50%; top: 59.27%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96%, 100% { left: 72%; top: 66.27%; }
}
@keyframes research-dot-9 {
  0%, 18% { left: 34%; top: 86%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58%, 84% { left: 50%; top: 65.45%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96%, 100% { left: 41.2%; top: 76.75%; }
}
@keyframes research-dot-10 {
  0%, 18% { left: 70%; top: 64%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58%, 84% { left: 50%; top: 71.64%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96%, 100% { left: 61%; top: 67.44%; }
}
@keyframes research-dot-11 {
  0%, 18% { left: 52%; top: 42%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58%, 84% { left: 50%; top: 77.82%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96%, 100% { left: 51.1%; top: 58.12%; }
}
@keyframes research-dot-12 {
  0%, 18% { left: 22%; top: 38%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58%, 84% { left: 50%; top: 84%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96%, 100% { left: 34.6%; top: 58.7%; }
}

@keyframes research-dot-fade {
  0% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  6%, 18% {
    opacity: 0.22;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  58%, 84% {
    opacity: 0.6;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  92% {
    opacity: 0.42;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  98%, 100% { opacity: 0; }
}

@keyframes b-fade {
  0% {
    --b-fade: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  5%, 93% {
    --b-fade: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  98%, 100% { --b-fade: 0; }
}

@keyframes b-c0 {
  0%, 4% {
    --b-c0: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  16%, 100% { --b-c0: 1; }
}

@keyframes b-c1 {
  0%, 10% {
    --b-c1: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  22%, 100% { --b-c1: 1; }
}

@keyframes b-c2 {
  0%, 16% {
    --b-c2: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  28%, 100% { --b-c2: 1; }
}

@keyframes b-c3 {
  0%, 22% {
    --b-c3: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  34%, 100% { --b-c3: 1; }
}

@keyframes b-c4 {
  0%, 28% {
    --b-c4: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  40%, 100% { --b-c4: 1; }
}

@keyframes b-card {
  0%, 36% {
    --b-card: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  44%, 90% {
    --b-card: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  97%, 100% { --b-card: 0; }
}

@keyframes b-x {
  0%, 42% {
    --b-x: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  70%, 100% { --b-x: 1; }
}

@keyframes l-fade {
  0% {
    --l-fade: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  5%, 92% {
    --l-fade: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  98%, 100% { --l-fade: 0; }
}

@keyframes l-link {
  0%, 46% {
    --l-link: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  78%, 100% { --l-link: 1; }
}

@keyframes l-notes {
  0%, 18% {
    --l-notes: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  40%, 100% { --l-notes: 1; }
}

@keyframes l-card {
  0%, 4% {
    --l-card: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  14%, 100% { --l-card: 1; }
}

@keyframes l-note {
  0%, 16% {
    --l-note: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  30%, 100% { --l-note: 1; }
}

@keyframes l-topic {
  0%, 34% {
    --l-topic: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  46%, 100% { --l-topic: 1; }
}

@keyframes z-progress {
  0%, 10% {
    --z-progress: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  78%, 100% { --z-progress: 1; }
}

@keyframes z-pulse {
  0%, 80% {
    --z-pulse: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  88% {
    --z-pulse: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  94%, 100% { --z-pulse: 0; }
}

@keyframes z-fade {
  0% {
    --z-fade: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  6%, 92% {
    --z-fade: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  98%, 100% { --z-fade: 0; }
}

@keyframes h-collapse {
  0%, 10% {
    --h-collapse: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  28%, 94% {
    --h-collapse: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  100% { --h-collapse: 0; }
}

@keyframes h-travel {
  0%, 76% {
    --h-travel: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  86%, 100% { --h-travel: 1; }
}

@keyframes h-pillar {
  0%, 32% { --h-pillar: 0; }
  72%, 100% { --h-pillar: 1; }
}

@keyframes h-fade {
  0% {
    --h-fade: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  6%, 92% {
    --h-fade: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  97%, 100% { --h-fade: 0; }
}

@page {
  margin: 2cm;
}

@media print {
  .site-header,
  .site-footer,
  .skip {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .prose p,
  .prose li,
  .address {
    color: #000;
  }
}