:root {
color-scheme: dark;
--bg: #111315;
--bg-2: #15181b;
--bg-3: #1a1d20;
--raise: #2b3036;
--line: #25292d;
--line-2: #2f353b;
--fg: #d5d8db;
--fg-strong: #f1f3f4;
--muted: #9aa1a8;
--faint: #8a9198;
--accent: #7cc4b0;
--accent-ink: #0d1f1a;
--up: #8fd3a8;
--down: #f0a39a;
--warn: #e8c27a;
--focus: #9fd8c8;
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--top-h: 60px;
--foot-h: 44px;
--bar-h: 0px;
--gutter: clamp(16px, 3vw, 40px);
--radius: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
background: var(--bg);
color: var(--fg);
font: 400 16px/1.6 var(--font);
-webkit-font-smoothing: antialiased;
display: grid;
grid-template-rows: auto 1fr auto;
}
h1, h2, h3 { color: var(--fg-strong); font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 4.2vw, 46px); max-width: 17ch; }
h2 { font-size: clamp(24px, 2.6vw, 32px); }
h3 { font-size: 17px; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--fg-strong); }
code, pre, .hash, .num, var { font-family: var(--mono); font-variant-numeric: tabular-nums; }
var { font-style: normal; color: var(--accent); }
.num { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.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; left: 12px; top: -60px; z-index: 50; background: var(--fg-strong); color: var(--bg); padding: 8px 12px; border-radius: var(--radius); }
.skip-link:focus { top: 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.top {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; gap: 32px;
height: var(--top-h);
padding: 0 var(--gutter);
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-strong); text-decoration: none; flex: none; }
.brand__mark { display: block; }
.brand__dot { fill: var(--accent); }
.brand__word { font-weight: 600; font-size: 14px; letter-spacing: 0.26em; text-transform: uppercase; margin-right: -0.26em; }
.badge { margin-left: 12px; font: 500 11px/1 var(--mono); color: var(--accent); border: 1px solid var(--line-2); padding: 5px 7px; border-radius: 4px; letter-spacing: 0.02em; }
.tabs {
display: flex; gap: 2px;
padding: 3px;
background: var(--bg-3);
border: 1px solid var(--line-2);
border-radius: var(--radius);
}
.tab {
display: block;
padding: 7px 15px;
border-radius: 4px;
color: var(--muted);
font-size: 14px;
text-decoration: none;
white-space: nowrap;
}
.tab:hover { color: var(--fg-strong); }
.tab[aria-selected="true"] { background: var(--raise); color: var(--fg-strong); box-shadow: inset 0 -2px 0 var(--accent); }
.tab__short { display: none; }
.no-js .tab[href="#overview"] { background: var(--raise); color: var(--fg-strong); }
.session { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--warn); }
.panels { min-width: 0; outline: none; }
.panel {
min-height: calc(100vh - var(--top-h) - var(--foot-h) - var(--bar-h));
min-height: calc(100dvh - var(--top-h) - var(--foot-h) - var(--bar-h));
padding: clamp(28px, 4.5vh, 56px) var(--gutter) clamp(20px, 3vh, 36px);
display: grid;
align-content: start;
gap: clamp(18px, 3vh, 32px);
}
.no-js .panel + .panel { border-top: 1px solid var(--line); }
.js .panels:not([data-ready]) > .panel:not(:first-of-type) { display: none; }
.panel__head { display: grid; gap: 10px; max-width: 70ch; }
.panel__head--row { display: flex; justify-content: space-between; align-items: end; gap: 24px; max-width: none; flex-wrap: wrap; }
.panel__head--row > div:first-child { display: grid; gap: 10px; max-width: 68ch; }
.eyebrow { font: 500 11.5px/1 var(--mono); color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; }
.lede { color: var(--muted); font-size: 16.5px; max-width: 62ch; }
.note { border: 1px solid var(--line-2); border-radius: 4px; padding: 11px 14px; font-size: 14px; color: var(--fg); max-width: 60ch; }
.note--warn { border-color: rgb(232 194 122 / 0.5); color: var(--warn); }
.textlink { color: var(--accent); font-size: 15px; }
.textlink::after { content: " →"; }
.empty { color: var(--faint); font-size: 15px; padding: 18px 0; }
.scrollbox { overflow: auto; overscroll-behavior: contain; max-height: calc(100dvh - var(--top-h) - var(--foot-h) - var(--bar-h) - 230px); min-height: 160px; border-top: 1px solid var(--line); }
.scrollbox:focus-visible { outline-offset: -2px; }
.panel--overview { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; padding: 0; align-content: stretch; }
.overview__copy { padding: clamp(32px, 7vh, 72px) var(--gutter) 32px; display: flex; flex-direction: column; gap: 22px; border-right: 1px solid var(--line); }
.overview__copy .lede { font-size: 17px; color: #b3b9bf; }
.overview__next { margin-top: auto; }
.readout { display: grid; grid-template-rows: 1fr auto; min-height: 100%; min-width: 0; }
.readout__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--line); }
.readout__row--wide { border: 1px solid var(--line); border-radius: var(--radius); }
.readout__cell { padding: 18px; border-right: 1px solid var(--line); min-width: 0; }
.readout__cell:last-child { border-right: 0; }
.readout__cell dt { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.readout__cell dd { margin: 6px 0 0; font: 400 clamp(20px, 2.4vw, 30px)/1.1 var(--mono); color: var(--fg-strong); overflow-wrap: anywhere; }
.readout__cell dd.is-text { font: 400 17px/1.35 var(--font); }
.hero { display: flex; flex-direction: column; justify-content: center; gap: 18px; min-width: 0; padding: clamp(28px, 6vh, 64px) clamp(20px, 3vw, 44px); }
.hero > svg { display: block; overflow: visible; }
.hero__title { font: 500 11.5px/1.3 var(--mono); color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.page-home .hero { text-shadow: 0 1px 14px rgb(0 0 0 / 0.85); }
.tally { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--muted); }
.tally__item { display: inline-flex; align-items: center; gap: 7px; }
.tally__n { font: 400 15px/1 var(--mono); color: var(--fg-strong); }
.tally__mark { width: 9px; height: 9px; border-radius: 50%; }
.tally__item--fell .tally__mark { position: relative; border-radius: 0; }
.tally__item--fell .tally__mark::before, .tally__item--fell .tally__mark::after { content: ""; position: absolute; left: -1px; right: -1px; top: 3.5px; height: 1.6px; background: var(--down); transform: rotate(45deg); }
.tally__item--fell .tally__mark::after { transform: rotate(-45deg); }
.tally__item--running .tally__mark { border: 1.5px solid var(--fg); }
.tally__item--held .tally__mark { background: var(--accent); }
.st__grid { stroke: var(--line); stroke-width: 1; }
.st__base { stroke: var(--line-2); stroke-width: 1; }
.st__line { fill: none; stroke: var(--fg-strong); stroke-width: 1.6; stroke-linejoin: round; }
.st__n { font: 400 20px var(--mono); fill: var(--fg-strong); }
.st__label { font: 400 12px var(--font); fill: var(--muted); }
.st__dot { fill: var(--accent); }
.readout__updated { padding: 14px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.tone-up { color: var(--up) !important; }
.tone-down { color: var(--down) !important; }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); }
.ladder__step { position: relative; padding: 18px 18px 54px; border-right: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.ladder__step:last-child { border-right: 0; }
.ladder__step:not(:last-child)::after { content: ""; position: absolute; right: -5px; top: 24px; width: 9px; height: 9px; border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); background: var(--bg); transform: rotate(45deg); }
.ladder__n { font: 500 12px/1 var(--mono); color: var(--accent); }
.ladder__step p { font-size: 14px; color: var(--muted); }
.ladder__count { position: absolute; left: 18px; bottom: 16px; font: 400 13px/1 var(--mono); color: var(--fg-strong); }
.ladder__fold > summary { list-style: none; display: grid; gap: 8px; }
.ladder__fold > summary::-webkit-details-marker, .why > summary::-webkit-details-marker { display: none; }
.ladder__fold > p { margin-top: 8px; }
.why { border-top: 1px solid var(--line); padding-top: 20px; }
.why > summary { list-style: none; }
.why__title { font-size: 15px; color: var(--muted); font-weight: 400; margin-bottom: 14px; }
.why__list { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.why__list dt { color: var(--fg-strong); font-weight: 500; font-size: 15px; margin-bottom: 4px; }
.why__list dd { margin: 0; color: var(--muted); font-size: 14px; }
@media (min-width: 761px) { [data-fold] > summary { pointer-events: none; } }
.segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--radius); }
.segmented__btn { font: inherit; font-size: 13px; padding: 6px 13px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.segmented__btn:hover { color: var(--fg-strong); }
.segmented__btn[aria-pressed="true"] { background: var(--raise); color: var(--fg-strong); box-shadow: inset 0 -2px 0 var(--accent); }
.log { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.log th { position: sticky; top: 0; background: var(--bg); text-align: left; font-weight: 400; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.log th.num { text-align: right; }
.log td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.log td.num { color: var(--muted); }
.log td.num:not(:first-child) { text-align: right; color: var(--fg); }
.entry__toggle { font: inherit; color: var(--fg-strong); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.entry__toggle::before { content: "+"; display: inline-block; width: 1.1em; color: var(--accent); font-family: var(--mono); }
.entry__toggle[aria-expanded="true"]::before { content: "–"; }
.entry__id { font: 12.5px var(--mono); color: var(--muted); }
.entry__detail td { background: var(--bg-2); padding: 16px 12px 18px 30px; }
.entry__more { display: grid; gap: 12px; max-width: 80ch; }
.entry__meta { font-size: 13px; color: var(--muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.kv dt { color: var(--muted); font-size: 13px; padding-top: 1px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.metrics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.metrics li { border: 1px solid var(--line-2); border-radius: 4px; padding: 4px 9px; font-size: 13px; display: flex; gap: 8px; }
.metrics span { color: var(--muted); }
.metrics b { font: 400 13px var(--mono); color: var(--fg-strong); }
.status { display: inline-block; font: 500 11.5px/1 var(--mono); padding: 4px 7px; border-radius: 3px; border: 1px solid currentColor; letter-spacing: 0.02em; white-space: nowrap; }
.status--fell { color: var(--down); }
.status--held { color: var(--up); }
.status--running { color: var(--warn); }
.status--retired, .status--sealed { color: var(--muted); }
.track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); min-height: 0; }
.track__list { border-top: 0; border-right: 1px solid var(--line); max-height: calc(100dvh - var(--top-h) - var(--foot-h) - var(--bar-h) - 300px); }
.commits { list-style: none; margin: 0; padding: 0; }
.commit { width: 100%; display: grid; grid-template-columns: 52px 1fr auto auto; gap: 12px; align-items: center; padding: 11px 14px; font: inherit; font-size: 14px; text-align: left; color: var(--fg); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.commit:hover { background: var(--bg-2); }
.commit[aria-pressed="true"] { background: var(--bg-3); box-shadow: inset 2px 0 0 var(--accent); }
.commit__n { color: var(--muted); }
.commit__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-strong); }
.commit__when { color: var(--muted); font-size: 12.5px; }
.track__detail { padding: 18px 20px; display: grid; gap: 14px; align-content: start; min-width: 0; overflow: auto; max-height: calc(100dvh - var(--top-h) - var(--foot-h) - var(--bar-h) - 300px); }
.track__detail .hash { font-size: 13px; color: var(--accent); word-break: break-all; }
.verify { display: grid; gap: 8px; }
.verify .hash { color: var(--fg); }
.verify__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.good { color: var(--up); }
.bad { color: var(--down); }
.reveal { max-height: 220px; }
.howto { font-size: 14px; color: var(--muted); }
.howto summary { cursor: pointer; color: var(--fg); width: max-content; max-width: 100%; }
.howto[open] { display: grid; gap: 10px; }
.howto p { max-width: 80ch; }
.code { margin: 0; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; overflow: auto; font-size: 13px; color: var(--fg-strong); white-space: pre-wrap; word-break: break-all; }
.panel--waitlist { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(24px, 5vw, 72px); align-content: center; }
.waitlist__copy { display: grid; gap: 18px; align-content: start; }
.facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14.5px; color: var(--muted); max-width: 56ch; }
.facts li { padding-left: 18px; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.waitlist__form { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); background: var(--bg-2); align-self: start; }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field__label { font-size: 13.5px; color: var(--fg); }
.field__input { font: inherit; font-size: 16px; color: var(--fg-strong); background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px; padding: 11px 12px; width: 100%; }
.field__input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.field__input[aria-invalid="true"] { border-color: var(--down); }
.field__input--code { font-family: var(--mono); letter-spacing: 0.12em; }
.field__error { color: var(--down); font-size: 13.5px; }
.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 10px; font-size: 14px; color: var(--muted); }
.field--check .field__error { grid-column: 1 / -1; }
.check { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-size: 14.5px; min-height: 1.6em; }
.form__status[data-tone="good"], [data-link-status][data-tone="good"] { color: var(--up); }
.form__status[data-tone="bad"], [data-link-status][data-tone="bad"] { color: var(--down); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 15px/1 var(--font); color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 12px 18px; text-decoration: none; cursor: pointer; }
.btn:hover { background: #95d3c2; color: var(--accent-ink); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--fg-strong); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--bg-3); color: var(--fg-strong); }
.btn--small { font-size: 13px; padding: 8px 12px; }
.doc { padding: clamp(32px, 6vh, 64px) var(--gutter); }
.doc__inner { max-width: 72ch; display: grid; gap: 16px; align-content: start; }
.doc--center { display: grid; align-content: center; }
.doc h2 { font-size: 20px; margin-top: 16px; }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.doc__updated, .doc__small { font-size: 13.5px; color: var(--muted); }
.doc__table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.doc__table th { text-align: left; font-weight: 500; color: var(--fg-strong); padding: 10px 16px 10px 0; vertical-align: top; width: 9em; border-bottom: 1px solid var(--line); }
.doc__table td { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--fg); }
.draft-note { border: 1px solid rgb(232 194 122 / 0.5); color: var(--warn); padding: 10px 14px; border-radius: 4px; font-size: 14px; }
.login { max-width: 460px; display: grid; gap: 18px; padding-top: 4vh; }
.login__backup summary { cursor: pointer; color: var(--muted); font-size: 14px; width: max-content; }
.login__backup[open] summary { margin-bottom: 14px; }
.pill { font: 500 12px/1 var(--mono); padding: 7px 10px; border-radius: 999px; border: 1px solid currentColor; text-transform: uppercase; letter-spacing: 0.06em; }
.pill--ok { color: var(--up); }
.pill--degraded { color: var(--warn); }
.pill--down { color: var(--down); }
.system { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.system .scrollbox { max-height: calc(100dvh - var(--top-h) - var(--foot-h) - var(--bar-h) - 330px); }
.meters, .messages, .notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.meters li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.meters meter { grid-column: 1 / -1; width: 100%; height: 8px; }
.meters__label { color: var(--fg-strong); }
.messages { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.msg time { color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.msg--warn span { color: var(--warn); }
.msg--error span { color: var(--down); }
.notes li { color: var(--muted); }
.news { list-style: none; margin: 0; padding: 0; }
.news__item { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; max-width: 90ch; }
.news__meta { font: 12.5px var(--mono); color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.news__title { font-size: 16px; }
.news__title a { color: var(--fg-strong); }
.news__item p:not(.news__meta):not(.tags) { color: var(--fg); font-size: 14.5px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 12px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 3px; padding: 2px 6px; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; min-height: var(--foot-h); padding: 10px var(--gutter); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); }
.foot__disclaimer strong { color: var(--fg); font-weight: 500; }
.foot__links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.foot__links a { color: var(--muted); }
.foot__links a:hover { color: var(--fg-strong); }
@media (max-width: 1100px) {
.ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ladder__step:nth-child(3) { border-right: 0; }
.ladder__step:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
.ladder__step:nth-child(3)::after { display: none; }
}
@media (max-width: 760px) {
:root { --top-h: 54px; --bar-h: calc(58px + env(safe-area-inset-bottom)); --foot-h: 52px; }
body { padding-bottom: var(--bar-h); }
.top { gap: 12px; }
.badge { display: none; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgb(17 19 21 / 0.96); border-top: 1px solid var(--line); }
.tabs { width: 100%; }
.tab { flex: 1 1 0; text-align: center; padding: 10px 2px; font-size: 13px; }
.tab__long { display: none; }
.tab__short { display: inline; }
.no-js .tabbar { position: static; }
.no-js body { padding-bottom: 0; }
.panel { padding-top: 24px; }
.panel--overview { grid-template-columns: 1fr; }
.overview__copy { border-right: 0; padding: 26px var(--gutter) 22px; gap: 16px; }
.overview__copy .lede { font-size: 16px; }
.note { font-size: 13.5px; }
.readout__row { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.readout__cell { padding: 12px var(--gutter); }
.readout__cell:nth-child(2) { border-right: 0; }
.readout__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.hero { padding: 18px var(--gutter) 20px; gap: 12px; border-top: 1px solid var(--line); justify-content: start; }
.tally { gap: 4px 16px; font-size: 13px; }
.overview__next { display: none; }
.ladder { grid-template-columns: 1fr; }
.ladder__step { border-right: 0; border-bottom: 1px solid var(--line); padding: 0; }
.ladder__step:last-child { border-bottom: 0; }
.ladder__step::after { display: none; }
.ladder__fold > summary { grid-template-columns: 22px 1fr auto 14px; align-items: baseline; gap: 10px; padding: 13px 14px; cursor: pointer; }
.ladder__fold > summary::after, .why > summary::after { content: "+"; font-family: var(--mono); color: var(--accent); text-align: right; }
.ladder__fold[open] > summary::after, .why[open] > summary::after { content: "–"; }
.ladder__step h3 { font-size: 15px; }
.ladder__fold > p { margin: 0; padding: 0 14px 14px 46px; font-size: 13.5px; }
.ladder__count { position: static; font-size: 12px; color: var(--muted); }
.why > summary { display: flex; justify-content: space-between; cursor: pointer; padding: 4px 0; }
.why__title { margin-bottom: 0; }
.why[open] .why__list { margin-top: 12px; }
.why__list { grid-template-columns: 1fr; gap: 12px; }
.panel__head--row { align-items: start; }
.log th:nth-child(3), .log td:nth-child(3) { display: none; }
.entry__detail td { padding-left: 14px; }
.track { grid-template-columns: 1fr; }
.track__list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 34dvh; }
.track__detail { max-height: none; }
.commit { grid-template-columns: 40px 1fr auto; }
.commit__when { display: none; }
.panel--waitlist { grid-template-columns: 1fr; align-content: start; }
.system { grid-template-columns: 1fr; }
.session__left { display: none; }
.foot { flex-direction: column; align-items: flex-start; gap: 6px; }
.scrollbox { max-height: none; }
}
html { background: var(--bg); }
.page-home {
background: transparent;
--line: rgb(255 255 255 / 0.085);
--line-2: rgb(255 255 255 / 0.14);
--bg-2: rgb(16 19 22 / 0.62);
--bg-3: rgb(22 26 30 / 0.58);
--raise: rgb(255 255 255 / 0.09);
--glass: rgb(11 14 17 / 0.48);
}
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #05070a; pointer-events: none; }
.sky::before {
content: ""; position: absolute; inset: 0; z-index: 2;
background:
linear-gradient(90deg, rgb(6 8 11 / 0.88) 0%, rgb(6 8 11 / 0.6) 38%, rgb(6 8 11 / 0.15) 72%, rgb(6 8 11 / 0.3) 100%),
linear-gradient(180deg, rgb(6 8 11 / 0.5) 0%, transparent 20%, transparent 68%, rgb(6 8 11 / 0.8) 100%);
}
.sky::after { content: ""; position: absolute; inset: 0; z-index: 3; background: url("/assets/brand/grain.svg"); opacity: 0.06; mix-blend-mode: overlay; }
.sky__layer {
position: absolute; inset: 0; opacity: 0; transform: scale(1.04);
transition: opacity 1.1s ease, transform 1.9s cubic-bezier(0.16, 1, 0.3, 1), filter 1.1s ease;
}
.sky__layer.is-on { opacity: 1; transform: none; filter: none; }
.sky__layer.is-gone-down { opacity: 0; transform: scale(1.3); filter: blur(10px); }
.sky__layer.is-gone-up { opacity: 0; transform: scale(0.86); filter: blur(8px); }
.sky__layer.from-above { transition: none; opacity: 0; transform: scale(0.9); }
.sky__layer.from-below { transition: none; opacity: 0; transform: scale(1.28); filter: blur(10px); }
.sky__media {
position: absolute; inset: -3%;
transform: translate3d(calc(var(--px, 0) * -26px), calc(var(--py, 0) * -16px), 0);
transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sky__media picture, .sky__img, .sky__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.sky__video { opacity: 0; transition: opacity 1.4s ease; }
.sky__video.is-playing { opacity: 1; }
.page-home .top { background: transparent; }
.page-home .top::before, .page-home .foot { background: rgb(8 10 13 / 0.42); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.page-home .top::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.page-home .tabs, .page-home .segmented, .page-home .ladder, .page-home .track, .page-home .waitlist__form,
.page-home .note, .page-home .scrollbox, .page-home .code {
background: var(--glass); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.page-home .ladder__step:not(:last-child)::after { background: #14181c; }
.page-home .log th { background: rgb(12 15 18 / 0.92); }
.page-home .overview__copy .lede { color: #c3c9ce; }
.page-home h1 {
background: linear-gradient(180deg, #ffffff 35%, #a9b5bf 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-wrap: balance;
}
.eyebrow--live { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: beacon 2.6s ease-out infinite; }
@keyframes beacon {
0% { box-shadow: 0 0 0 0 rgb(124 196 176 / 0.6); }
70%, 100% { box-shadow: 0 0 0 10px rgb(124 196 176 / 0); }
}
.hud { margin-left: auto; display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hud__mark { color: var(--accent); flex: none; }
.hud__dot { fill: var(--accent); animation: nadir 3.2s ease-in-out infinite; }
.hud__k { color: var(--faint); }
.hud__v { display: inline-block; min-width: 7.5ch; color: var(--fg-strong); }
.hud__label { padding-left: 10px; border-left: 1px solid var(--line-2); }
@keyframes nadir { 50% { opacity: 0.3; } }
@media (max-width: 1180px) { .hud__label { display: none; } }
.tabs { position: relative; }
.tabs__ink {
position: absolute; left: 0; top: 3px; bottom: 3px; width: var(--w, 0); transform: translateX(var(--x, 0));
border-radius: 4px; background: var(--raise); pointer-events: none;
box-shadow: inset 0 -2px 0 var(--accent), 0 8px 22px -10px rgb(124 196 176 / 0.6);
}
.tabs__ink.is-ready { transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.5, 1), width 0.55s cubic-bezier(0.34, 1.3, 0.5, 1); }
.has-ink .tab { position: relative; z-index: 1; }
.has-ink .tab[aria-selected="true"] { background: transparent; box-shadow: none; }
.btn, .tab, .segmented__btn, .commit, .entry__toggle { position: relative; overflow: hidden; }
.ripple {
position: absolute; left: var(--rx); top: var(--ry); width: var(--rs); height: var(--rs);
margin: calc(var(--rs) / -2) 0 0 calc(var(--rs) / -2); border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgb(124 196 176 / 0.38) 0%, rgb(124 196 176 / 0.12) 35%, transparent 65%);
transform: scale(0); animation: ripple 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.btn .ripple { background: radial-gradient(circle, rgb(255 255 255 / 0.55) 0%, transparent 60%); }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.ladder__step, .why__list > div, .waitlist__form, .track, .note { position: relative; }
.ladder__step::before, .why__list > div::before, .waitlist__form::before, .track::before, .note::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgb(124 196 176 / 0.12), transparent 65%);
transition: opacity 0.4s ease;
}
.ladder__step:hover::before, .why__list > div:hover::before, .waitlist__form:hover::before, .track:hover::before, .note:hover::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.tab, .segmented__btn, .btn, .commit { transition: background-color 160ms ease, color 160ms ease, transform 140ms cubic-bezier(0.3, 0.7, 0.4, 1), box-shadow 220ms ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 30px -12px rgb(124 196 176 / 0.75); }
.btn:active:not(:disabled), .tab:active, .segmented__btn:active { transform: scale(0.96); }
.ladder__step { transition: background-color 0.3s ease; }
.ladder__step:hover { background: rgb(255 255 255 / 0.025); }
.js .panels[data-ready] > .panel > *, .js .overview__copy > *, .js .ladder__step {
animation: rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.js .panel > :nth-child(2), .js .overview__copy > :nth-child(2) { animation-delay: 90ms; }
.js .panel > :nth-child(3), .js .overview__copy > :nth-child(3) { animation-delay: 180ms; }
.js .panel > :nth-child(4), .js .overview__copy > :nth-child(4) { animation-delay: 270ms; }
.js .panel > :nth-child(5), .js .overview__copy > :nth-child(5) { animation-delay: 360ms; }
.js .ladder__step:nth-child(1) { animation-delay: 160ms; }
.js .ladder__step:nth-child(2) { animation-delay: 230ms; }
.js .ladder__step:nth-child(3) { animation-delay: 300ms; }
.js .ladder__step:nth-child(4) { animation-delay: 370ms; }
.js .ladder__step:nth-child(5) { animation-delay: 440ms; }
.page-home h1 { animation-duration: 1.2s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); filter: blur(5px); } }
@media (prefers-reduced-motion: reduce) {
.sky__layer, .sky__media, .sky__video { transition: none; }
.hud__dot, .eyebrow--live::before { animation: none; }
}
@media (max-width: 760px) {
.sky::before { background: linear-gradient(180deg, rgb(6 8 11 / 0.72) 0%, rgb(6 8 11 / 0.5) 45%, rgb(6 8 11 / 0.85) 100%); }
.page-home .tabbar { background: rgb(8 10 13 / 0.62); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.hud { gap: 8px; }
.hud__mark { display: none; }
}
@media (forced-colors: active) {
.tab[aria-selected="true"], .segmented__btn[aria-pressed="true"] { outline: 2px solid CanvasText; }
}