:root {
  color-scheme: dark;
  --ink: #e6ebee;
  --muted: #8b969e;
  --dim: #59656e;
  --paper: #080b0f;
  --panel: #0c1116;
  --line: rgba(221, 231, 237, .13);
  --line-soft: rgba(221, 231, 237, .065);
  --live: #9dbeb1;
  --experiment: #a9a3d7;
  --cooldown: #a8b2bc;
  --recovery: #c2aa82;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 84% 4%, rgba(111, 153, 166, .1), transparent 30rem),
    linear-gradient(154deg, #0b1015 0%, #07090d 58%, #090c10 100%);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.012em;
}

a { color: inherit; }
button { font: inherit; }
.ambient { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.ambient span:first-child {
  position: absolute; width: 46rem; height: 46rem; right: -25rem; top: -25rem;
  border: 1px solid rgba(210, 227, 234, .045); border-radius: 50%;
  box-shadow: 0 0 10rem rgba(104, 149, 168, .045) inset;
}
.ambient span:last-child {
  position: absolute; inset: 0; opacity: .12; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.site-head, main, footer { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.site-head {
  min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--line);
}
.wordmark { font-family: Georgia, "Times New Roman", serif; font-size: 1.06rem; letter-spacing: .045em; text-decoration: none; }
.register, .eyebrow, .section-head, .lane-id, .lane-kicker, dt, .lane-link, .summary span, .summary strong, button, footer {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
}
.register { display: flex; align-items: center; gap: 9px; color: #7f8b94; font-size: .59rem; letter-spacing: .13em; }
.signal { width: 5px; height: 5px; border-radius: 50%; background: var(--live); box-shadow: 0 0 9px rgba(157,190,177,.7); }

main { padding: clamp(62px, 8vw, 108px) 0 84px; }
.intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: clamp(34px, 7vw, 92px); align-items: end; }
.eyebrow { margin: 0 0 22px; color: #8c99a2; font-size: .61rem; font-weight: 600; letter-spacing: .17em; }
h1 { margin: 0; font: 400 clamp(3.5rem, 7.4vw, 7rem)/.88 Georgia, "Times New Roman", serif; letter-spacing: -.062em; }
h1 em { color: #909ca5; font-weight: 400; }
.intro-note { padding: 22px 0 2px 24px; border-left: 1px solid var(--line); color: #9ba6ae; font-size: .9rem; line-height: 1.72; word-break: keep-all; }
.intro-note p { margin: 0; }
.intro-note p + p { margin-top: 8px; color: #73808a; }

.summary { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(58px, 8vw, 92px) 0 78px; border-block: 1px solid var(--line); }
.summary div { min-height: 94px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border-right: 1px solid var(--line-soft); }
.summary div:last-child { border-right: 0; }
.summary span { color: #64717a; font-size: .54rem; letter-spacing: .13em; }
.summary strong { color: #aab4bb; font-size: .72rem; font-weight: 500; letter-spacing: .09em; }

.section-head { display: flex; justify-content: space-between; gap: 24px; padding: 0 2px 15px; color: #69767f; font-size: .57rem; letter-spacing: .13em; }
.section-head h2 { margin: 0; font: inherit; }
.section-head > span { text-align: right; }
.ledger { border-top: 8px solid #11171d; }
.lane {
  --accent: var(--live);
  position: relative; display: grid; grid-template-columns: 118px minmax(0, 1fr) 145px; gap: 28px;
  min-height: 290px; padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 46px);
  border: 1px solid var(--line); border-top: 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent), transparent 96%), transparent 34%), rgba(10,14,19,.68);
}
.lane::before { content: ""; position: absolute; left: -1px; top: 26px; bottom: 26px; width: 2px; background: var(--accent); opacity: .55; }
.lane-experiment { --accent: var(--experiment); }
.lane-cooldown { --accent: var(--cooldown); }
.lane-recovery { --accent: var(--recovery); }
.lane-id { display: flex; flex-direction: column; gap: 10px; color: var(--accent); font-size: .57rem; letter-spacing: .14em; }
.lane-id span { color: #536069; font-size: 1.9rem; font-family: Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.lane-id b { font-weight: 600; }
.lane-kicker { margin: 0 0 13px; color: var(--accent); font-size: .57rem; letter-spacing: .15em; }
.lane h3 { margin: 0; max-width: 720px; font: 400 clamp(2rem, 4.2vw, 3.45rem)/.97 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.lane-copy { max-width: 720px; margin: 18px 0 30px; color: #9aa5ad; font-size: .88rem; line-height: 1.68; word-break: keep-all; }
dl { margin: 0; }
dl div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
dt { color: #65727b; font-size: .52rem; letter-spacing: .11em; }
dd { margin: 0; color: #a4aeb5; font-size: .78rem; line-height: 1.55; word-break: keep-all; }
.lane-link { align-self: start; justify-self: end; padding-bottom: 5px; border-bottom: 1px solid color-mix(in srgb, var(--accent), transparent 40%); color: var(--accent); font-size: .57rem; letter-spacing: .1em; text-decoration: none; }
.lane-link:hover, .lane-link:focus-visible { color: #fff; outline: none; }

.handoff { margin-top: 84px; padding: clamp(28px, 5vw, 52px); border: 1px solid var(--line); background: rgba(11,15,20,.8); }
.handoff > div:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; }
.handoff h2 { margin: 0; font: 400 clamp(2.2rem, 5vw, 4.5rem)/.92 Georgia, "Times New Roman", serif; letter-spacing: -.05em; }
.handoff > div:first-child > p:last-child { margin: 0; color: #8f9aa2; font-size: .88rem; line-height: 1.68; word-break: keep-all; }
#copy-context { margin: 34px 0 18px; padding: 12px 15px; border: 1px solid #53626c; color: #cad1d5; background: #111820; cursor: pointer; font-size: .58rem; letter-spacing: .11em; }
#copy-context:hover, #copy-context:focus-visible { border-color: var(--live); color: #fff; outline: none; }
#context-plain { max-height: 360px; margin: 0; overflow: auto; padding: 22px; border: 1px solid var(--line-soft); color: #8f9ba3; background: #07090c; font: .72rem/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: keep-all; }
.copy-status { min-height: 1.2em; margin: 12px 0 0; color: var(--live); font: .58rem/1.5 ui-monospace, monospace; letter-spacing: .08em; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 23px 0 max(34px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: #616d75; font-size: .56rem; line-height: 1.5; letter-spacing: .09em; }
footer a { text-decoration: none; }
footer p { margin: 0; }

@media (max-width: 820px) {
  .site-head, main, footer { width: min(100% - 28px, 1120px); }
  .intro { grid-template-columns: 1fr; }
  h1 { font-size: clamp(3.3rem, 14.8vw, 5.7rem); }
  .intro-note { max-width: 34rem; }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .summary div:nth-child(2) { border-right: 0; }
  .summary div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .lane { grid-template-columns: 68px minmax(0, 1fr); gap: 18px; }
  .lane-link { grid-column: 2; justify-self: start; margin-top: 4px; }
  .handoff > div:first-child { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .site-head { min-height: 68px; }
  .register { max-width: 55%; text-align: right; line-height: 1.4; }
  main { padding-top: 54px; }
  h1 { font-size: clamp(3rem, 15vw, 4.25rem); }
  .summary { margin-bottom: 58px; }
  .summary div { min-height: 82px; padding: 14px 12px; }
  .section-head > span { display: none; }
  .lane { display: block; min-height: 0; padding: 26px 21px 30px; }
  .lane-id { flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 32px; }
  .lane-id span { font-size: 1.5rem; }
  .lane h3 { font-size: clamp(2rem, 11vw, 3rem); }
  dl div { grid-template-columns: 1fr; gap: 6px; }
  .lane-link { display: inline-block; margin-top: 26px; }
  .handoff { margin-top: 58px; padding: 26px 20px; }
  #context-plain { padding: 16px; font-size: .67rem; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}