:root {
--color-bg-page: #0a0a0a;
--color-bg-surface: #111111;
--color-bg-elevated: #1a1a1a;
--color-bg-frame: #1c1c1c;

--color-bg-stage: #000000;
--color-text-primary: #E0E0E0;
--color-text-secondary: #8899AA;

--color-text-muted: #444444;
--color-brand: #00D2FF;
--color-caution: #FFD43B;
--color-caution-bg: #3D3312;
--font-sans: Inter, Montserrat, system-ui, sans-serif;
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
--radius-md: 6px;
--radius-lg: 10px;
--radius-pill: 999px;
--stroke-thin: 1px;
--stroke-focus: 2px;
--motion-fade: 200ms;

--dial-sweep: 3000ms;
--dial-intro: 1100ms;
--dial-turn: 880ms;
--gutter: 16px;

--gutter-left: max(var(--gutter), env(safe-area-inset-left));
--gutter-right: max(var(--gutter), env(safe-area-inset-right));

--header-h: 60px;
--header-real: var(--header-h);
--prose-width: 720px;

--t-display: 39px;
--t-major: 25px;
--t-minor: 20px;
--t-sub: 18px;
--t-body: 16px;
--t-small: 14px;
--t-micro: 12px;
--lh-display: 1.06;
--lh-major: 1.14;
--lh-minor: 1.2;
--rail-gap: 32px;
--grid-width: 1200px;
--target-min: 44px;
color-scheme: dark;
}

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

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

@font-face {
font-family: "JetBrains Mono";
src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}

@media (min-width: 721px) {
:root {
--t-display: 49px;
--t-major: 31px;
--t-minor: 25px;
--t-sub: 20px;
}
}

@media (min-width: 1100px) {
:root {
--t-display: 61px;
--t-major: 39px;
}
}

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

html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;

scroll-padding-top: calc(var(--header-real) + 8px);

scrollbar-gutter: stable;
}

body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--color-bg-page);
color: var(--color-text-primary);
font-family: var(--font-sans);
font-size: var(--t-body);
line-height: 1.6;
overflow-wrap: break-word;
}

a {
color: var(--color-brand);
text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
outline: var(--stroke-focus) solid var(--color-brand);
outline-offset: 3px;
border-radius: var(--radius-md);
}

h2,
h3,
h4 {
line-height: 1.25;
text-wrap: balance;
}

h1 {
font-size: var(--t-display);
line-height: var(--lh-display);
letter-spacing: -0.022em;
text-wrap: balance;
}

.mono {
font-family: var(--font-mono);
}

.vh {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}

.skip-link {
position: absolute;
display: inline-flex;
align-items: center;
min-height: var(--target-min);
left: var(--gutter-left);
top: -100px;
padding: 0 14px;
background: var(--color-bg-surface);
border-radius: var(--radius-md);
transition: top var(--motion-fade) ease-out;

z-index: 5;
}

.skip-link:focus {
top: var(--gutter);
}

.site-footer,
.band,
.hero {
width: 100%;
max-width: var(--grid-width);
margin: 0 auto;
padding-left: var(--gutter-left);
padding-right: var(--gutter-right);
}

.band-narrow,
.hero-copy > p,
.hero-copy > h1,
.band > h2,
.band > p,
.band > ul,
.band > ol,
.band > .kdf {
max-width: var(--prose-width);
}

.site-header {
position: sticky;
top: 0;
z-index: 4;

background: var(--color-bg-page);
border-bottom: var(--stroke-thin) solid var(--color-bg-frame);
}

.header-inner {
display: flex;
align-items: center;

flex-wrap: wrap;
gap: 4px 16px;
width: 100%;
max-width: var(--grid-width);
min-height: var(--header-h);
margin: 0 auto;
padding-left: var(--gutter-left);
padding-right: var(--gutter-right);
}

.brand {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: var(--target-min);
margin-right: auto;
color: var(--color-text-primary);
font-weight: 700;
font-size: var(--t-sub);
letter-spacing: -0.01em;
text-decoration: none;
}

.brand-mark {
display: block;
}

.brand:hover .brand-name {
color: var(--color-brand);
}

.site-nav ul {
display: flex;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}

.site-nav a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 10px;
border-radius: var(--radius-md);
color: var(--color-text-secondary);
font-size: var(--t-small);
text-decoration: none;
}

.site-nav a:hover {
background: var(--color-bg-surface);
color: var(--color-text-primary);
}

.nav-page,
.site-nav a.nav-page,
.toc-panel a.nav-page {
color: var(--color-brand);
}

.onward {
margin-top: 28px;
font-size: var(--t-body);
}

.onward a {
font-weight: 600;
text-decoration: none;
}

.onward a:hover {
text-decoration: underline;
}

.header-tools {
display: flex;
align-items: center;
gap: 8px;
}

.tool {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: var(--target-min);
min-height: var(--target-min);
padding: 0 10px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
color: var(--color-text-secondary);
font: inherit;
font-size: var(--t-small);
text-decoration: none;
cursor: pointer;

list-style: none;
}

.tool::-webkit-details-marker {
display: none;
}

.tool:hover {
border-color: var(--color-brand);
color: var(--color-text-primary);
}

.lang-pill {
display: inline-flex;
align-items: center;
padding: 2px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
font-family: var(--font-mono);
font-size: var(--t-micro);
}

.lang-seg {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
min-height: 40px;
padding: 0 6px;
border-radius: var(--radius-md);
text-decoration: none;
}

@media (pointer: coarse) {
.lang-pill {
padding: 0;
}

.lang-seg {
min-width: var(--target-min);
min-height: var(--target-min);
}
}

.lang-here {
background: var(--color-bg-elevated);
color: var(--color-brand);
}

a.lang-seg {
color: var(--color-text-secondary);
}

a.lang-seg:hover {
background: var(--color-bg-elevated);
color: var(--color-text-primary);
}

.toc {
display: none;
}

.site-header[data-nav="back"] .toc {
display: block;
}

.toc[open] > .toc-summary {
border-color: var(--color-brand);
color: var(--color-text-primary);
}

.toc-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: calc(100dvh - var(--header-real));
overflow-y: auto;
padding: 4px var(--gutter-right) max(16px, env(safe-area-inset-bottom))
var(--gutter-left);
background: var(--color-bg-surface);
border-bottom: var(--stroke-thin) solid var(--color-bg-frame);

box-shadow: 0 18px 36px rgb(0 0 0 / 70%);
}

.toc-panel ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: toc;
}

.toc-panel li + li {
border-top: var(--stroke-thin) solid var(--color-bg-frame);
}

.toc-panel a {
display: flex;
align-items: center;
gap: 12px;
min-height: var(--target-min);
padding: 4px 6px;
color: var(--color-text-primary);
text-decoration: none;
}

.toc-panel a::before {
content: counter(toc);
counter-increment: toc;
min-width: 18px;
color: var(--color-text-secondary);
font-family: var(--font-mono);
font-size: var(--t-micro);
}

.toc-panel a[aria-current] {
color: var(--color-brand);
}

.toc-panel a[aria-current]::after {
content: "";
width: 7px;
height: 7px;
margin-left: auto;
border-radius: var(--radius-pill);
background: var(--color-brand);
}

main {
flex: 1;
}

.band {
padding-top: 48px;
padding-bottom: 8px;
}

.band-intro {
padding-bottom: 0;
}

.band > h2 {
margin: 0 0 16px;
font-size: var(--t-minor);
line-height: var(--lh-minor);
}

.band::before {
content: "";
display: block;
border-top: var(--stroke-thin) solid var(--color-bg-frame);
margin-bottom: 24px;
}

.band-major::before {
border-top: var(--stroke-focus) solid var(--color-brand);
margin-bottom: 32px;
}

.band-major > h2 {
margin-bottom: 20px;
font-size: var(--t-major);
line-height: var(--lh-major);
letter-spacing: -0.015em;
}

.band-intro::before,
.hero::before {
display: none;
}

.hero {
padding-top: 24px;
padding-bottom: 8px;
}

@media (min-width: 900px) {
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
grid-template-areas:
"copy clip"
"fleet clip";
grid-template-rows: auto auto;
column-gap: 48px;

align-items: start;
}

.hero-copy {
grid-area: copy;
}

.hero > [data-media-slot] {
grid-area: clip;
margin-bottom: 0;
}

.hero > .fleet {
grid-area: fleet;
margin-top: 32px;
}

.hero > [data-media-slot] video {
max-height: min(560px, calc(100vh - var(--header-real) - 190px));
}

.hero > .stage-clip.stage-device {
display: block;
max-width: none;
}
}

h1 {
margin: 0 0 20px;
}

.lede {
color: var(--color-text-secondary);
font-size: var(--t-sub);
}

.hero .lede {
margin: 0 0 24px;
}

.tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 24px;
padding: 0;
list-style: none;
}

.tags li {
padding: 4px 12px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-pill);
color: var(--color-brand);
font-family: var(--font-mono);
font-size: var(--t-micro);
}

.tags .tag-status {
border-color: var(--color-caution);
color: var(--color-caution);
}

.stage {
margin: 0 0 24px;
max-width: var(--prose-width);
}

.stage video,
.stage img {
display: block;
width: 100%;
height: auto;
background: var(--color-bg-stage);
}

.stage-empty {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
min-height: 180px;
padding: 24px;
border: var(--stroke-thin) dashed var(--color-text-muted);
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
color: var(--color-text-secondary);
}

.stage-empty p {
margin: 0;
}

.stage-label {
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-secondary);
}

.stage-sm .stage-empty {
min-height: 120px;
}

.stage-frame {
display: flex;
flex-direction: column;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-lg);
background: var(--color-bg-stage);
overflow: hidden;
}

.stage-plate {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
padding: 20px;
}

.stage-plate:has(> .zoom) {
padding-bottom: 0;
}

.stage-wide .stage-plate {
padding: 0;
}

.stage-device .stage-frame,
.stage-screen .stage-frame {
width: fit-content;
max-width: 100%;
}

.stage-bar {
display: flex;
flex-wrap: wrap;
width: 0;
min-width: 100%;
align-items: center;
gap: 4px 10px;
margin: 0;
padding: 7px 10px;
border-top: var(--stroke-thin) solid var(--color-bg-frame);
background: var(--color-bg-surface);
}

.stage-bar .prov {
max-width: 100%;
padding: 2px 0;
border: 0;
border-radius: 0;
}

.stage-bar .clip-toggle ~ .prov {
margin-left: auto;
}

.stage-bar a.prov:hover {
background: none;
text-decoration: underline;
}

.stage-bar[hidden] {
display: none;
}

.stage-clip video {
display: block;
max-width: 100%;
background: var(--color-bg-stage);
}

.stage-device video {
width: auto;
height: auto;
max-height: min(560px, 76vh);
}

@media (min-width: 760px) {
.stage-clip.stage-device {
display: grid;
grid-template-columns: auto minmax(240px, 1fr);
column-gap: var(--rail-gap);
max-width: none;
}

.stage-clip.stage-device > :not(figcaption) {
grid-column: 1;
}

.stage-clip.stage-device > figcaption {
grid-column: 2;
grid-row: 1;
align-self: start;
max-width: 52ch;
margin-top: 0;
}

.screens > .stage,
.board-clips > .stage,
.panel-shots > .stage {
display: block;
max-width: none;
}
}

.stage-wide {
max-width: none;
}

.stage-wide video {
width: 100%;
border: var(--stroke-thin) solid var(--color-bg-frame);
}

.clip-toggle {
min-height: 30px;
padding: 0 14px;
white-space: nowrap;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-md);
background: var(--color-bg-elevated);
color: var(--color-text-secondary);
font-family: var(--font-mono);
font-size: var(--t-micro);
cursor: pointer;
}

.clip-toggle:hover {
color: var(--color-text-primary);
}

.stage-clip figcaption .note {
display: block;
max-width: none;
margin: 4px 0 0;
font-size: var(--t-small);
}

.stage-screen img {
width: auto;
height: 480px;
max-width: 100%;
border: var(--stroke-thin) solid var(--color-bg-frame);
image-rendering: pixelated;
}

.stage-screen .zoom {
width: fit-content;
max-width: 100%;
}

.screens {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 24px;
}

.panel-shots {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 20px;
margin-bottom: 16px;
}

.panel-shots .stage {
min-width: 0;
max-width: none;
margin: 0;
}

.panel-shots [data-media-slot="manage"] {
flex: 1 1 100%;
}

.panel-shots [data-media-slot="manage_settings"] {
flex: 3 1 460px;
}

.panel-shots [data-media-slot="manage_mobile"] {
flex: 1 1 180px;
max-width: 280px;
}

.screens .stage {
flex: 0 1 300px;
min-width: 0;
margin-bottom: 0;
}

.board-clips {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px 24px;
margin: 0 0 16px;
}

.board-clips .stage {
min-width: 0;
max-width: none;
margin: 0;
}

@media (min-width: 700px) {
.board-clips .stage-clip video {
width: 100%;
height: 320px;

max-height: 70vh;
object-fit: contain;
}
}

.stage figcaption {
margin-top: 8px;
color: var(--color-text-secondary);
font-size: var(--t-small);
}

.fleet {
margin: 0 0 16px;
}

.fleet-strip {
overflow-x: auto;
}

.fleet img {
display: block;
width: 100%;
max-width: 960px;
height: auto;
margin: 0;
}

.fleet figcaption {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 12px;
color: var(--color-text-secondary);
font-size: var(--t-small);
max-width: var(--prose-width);
}

.fleet strong {
color: var(--color-text-primary);
}

.steps {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 32px;
}

.steps > li {
max-width: var(--prose-width);
}

.steps h3 {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 8px;
font-size: var(--t-sub);
}

.steps h4 {
margin: 20px 0 8px;
font-size: var(--t-body);
font-weight: 700;
color: var(--color-text-primary);
}

.steps p {
margin: 0 0 16px;
}

.step-n {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 28px;
height: 28px;
border: var(--stroke-thin) solid var(--color-brand);
border-radius: var(--radius-pill);
color: var(--color-brand);
font-family: var(--font-mono);
font-size: var(--t-micro);
}

.facts {
margin: 0 0 8px;
padding-left: 20px;
}

.facts li {
margin-bottom: 10px;
}

.kdf {
display: block;
width: 100%;
height: auto;
margin: 8px 0 32px;
}

.kdf-box rect {
fill: var(--color-bg-surface);
stroke: var(--color-bg-frame);
stroke-width: 1.5;
}

.kdf-arrow path {
fill: none;
stroke: var(--color-brand);
stroke-width: 1.5;
}

.kdf-text text {
fill: var(--color-text-primary);
font-family: var(--font-sans);
font-size: var(--t-small);
text-anchor: middle;
}

.cards {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
margin-bottom: 16px;
}

.card {
padding: 20px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
}

.card h3 {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 10px;
font-size: var(--t-sub);
}

.card p {
margin: 0;
font-size: var(--t-body);
color: var(--color-text-secondary);
}

.card-pending {
border-color: var(--color-caution-bg);
}

p.flag,
.flag {
display: inline-block;
margin: 0 0 10px;
padding: 2px 10px;
border-radius: var(--radius-pill);
background: var(--color-caution-bg);
color: var(--color-caution);
font-family: var(--font-mono);
font-size: var(--t-micro);
}

.i {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 2px;
background: var(--color-brand);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}

.i-credential {
-webkit-mask-image: url("icons/credential.svg");
mask-image: url("icons/credential.svg");
}

.i-key {
-webkit-mask-image: url("icons/key.svg");
mask-image: url("icons/key.svg");
}

.i-lock {
-webkit-mask-image: url("icons/lock.svg");
mask-image: url("icons/lock.svg");
}

.i-totp {
-webkit-mask-image: url("icons/totp.svg");
mask-image: url("icons/totp.svg");
}

.i-settings {
-webkit-mask-image: url("icons/settings.svg");
mask-image: url("icons/settings.svg");
}

.i-warning {
background: var(--color-caution);
-webkit-mask-image: url("icons/warning.svg");
mask-image: url("icons/warning.svg");
}

.scale-switch {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
color: var(--color-text-secondary);
font-size: var(--t-small);
}

.scale-switch button {
min-height: var(--target-min);
padding: 0 14px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
color: var(--color-text-secondary);
font: inherit;
cursor: pointer;
}

.scale-switch button[aria-pressed="true"] {
border-color: var(--color-brand);
color: var(--color-brand);
}

.devices {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
margin-bottom: 20px;
}

.device {
display: flex;
flex-direction: column;
padding: 16px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
}

.device-art {
display: flex;
align-items: flex-end;
justify-content: flex-start;
min-height: 190px;
margin-bottom: 14px;
}

.device-art .zoom {
width: auto;
max-width: 100%;
}

.device-art img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 190px;
image-rendering: auto;
}

.device h3 {
margin: 0 0 10px;
font-size: var(--t-body);
}

.device dl {
display: grid;
gap: 4px;
margin: 0;
font-size: var(--t-small);
}

.device dl > div {
display: flex;
gap: 8px;
justify-content: space-between;
}

.device dt {
color: var(--color-text-secondary);
}

.device dd {
margin: 0;
text-align: right;
color: var(--color-text-primary);
}

.device .status {
color: var(--color-caution);
}

.devices[data-scale="true"] {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 28px 0;
}

.devices[data-scale="true"] .device {
flex: 0 0 auto;
border: 0;
background: none;
padding: 0 24px 0 0;
}

.devices[data-scale="true"] .device-art {
min-height: 0;
}

.devices[data-scale="true"] .device-art img {
max-width: none;
max-height: none;
}

.devices[data-scale="true"] h3 {
margin: 12px 0 0;
font-size: var(--t-small);
color: var(--color-text-secondary);
font-weight: 400;
}

.devices[data-scale="true"] dl {
display: none;
}

.note {
max-width: var(--prose-width);
margin: 0 0 8px;
color: var(--color-text-secondary);
font-size: var(--t-small);
}

.band-limits {
margin-top: 24px;
}

.band-limits .facts {
padding: 20px 20px 20px 40px;
border: var(--stroke-thin) solid var(--color-caution-bg);
border-radius: var(--radius-lg);
background: var(--color-bg-elevated);
}

.band-limits .facts li:last-child {
margin-bottom: 0;
}

.site-footer {
margin-top: 48px;
padding-top: 24px;
padding-bottom: 40px;
border-top: var(--stroke-thin) solid var(--color-bg-frame);
color: var(--color-text-secondary);
font-size: var(--t-small);
}

.site-footer p {
margin: 0 0 6px;
}

hr {
max-width: var(--prose-width);
margin: 24px 0;
border: 0;
border-top: var(--stroke-thin) solid var(--color-bg-frame);
}

.prov {
display: inline-block;

align-self: start;

padding: 2px 9px;
border: var(--stroke-thin) solid var(--color-brand);
border-radius: var(--radius-pill);
color: var(--color-brand);
font-family: var(--font-mono);
font-size: var(--t-micro);
line-height: 1.5;
text-decoration: none;
white-space: nowrap;
}

a.prov:hover {
background: var(--color-bg-elevated);
}

.prov-mock,
.prov-panel,
.prov-composed {
border-color: var(--color-caution);
color: var(--color-caution);
}

.kinds {
display: grid;
gap: 14px;
max-width: var(--prose-width);
margin: 0 0 20px;
}

.kinds > div {
display: grid;
gap: 4px;
}

.kinds dt {
font-weight: 400;
}

.kinds dd {
margin: 0;
color: var(--color-text-secondary);
}

.tracker {
display: grid;
gap: 12px;
max-width: var(--prose-width);
margin: 0 0 20px;
padding: 0;
list-style: none;
}

@media (min-width: 1000px) {

.band > .tracker {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: none;
}
}

.track {
padding: 14px 16px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-left: 3px solid var(--color-text-secondary);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
}

.track-state {
margin: 0 0 6px;
font-family: var(--font-mono);
font-size: var(--t-micro);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-secondary);
}

.track h3 {
margin: 0 0 6px;
font-size: var(--t-sub);
}

.track p:last-child {
margin: 0;
color: var(--color-text-secondary);
font-size: var(--t-small);
}

.track-done {
border-left-color: var(--color-brand);
}

.track-done .track-state {
color: var(--color-brand);
}

.track-doing {
border-left-color: var(--color-caution);
}

.track-doing .track-state {
color: var(--color-caution);
}

.org {
position: relative;
max-width: var(--prose-width);
margin: 0 0 24px;
}

.org-head,
.org-post {
position: relative;
padding: 14px 16px 14px 56px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
}

.org-head {
border-color: var(--color-brand);
}

.org-tree {
position: relative;
margin: 0;
padding: 0 0 0 28px;
list-style: none;
display: grid;
gap: 12px;
}

.org-tree::before {
content: "";
position: absolute;
inset: -12px auto 0 13px;
width: var(--stroke-thin);
background: var(--color-text-muted);
}

.org-post::before {
content: "";
position: absolute;
top: 50%;
left: -15px;
width: 15px;
height: var(--stroke-thin);
background: var(--color-text-muted);
}

.org-post:last-child::after {
content: "";
position: absolute;
inset: 50% auto -1px -15px;
width: var(--stroke-thin);
background: var(--color-bg-page);
}

.org-head::after {
content: "";
position: absolute;
top: 100%;
left: 13px;
height: 12px;
width: var(--stroke-thin);
background: var(--color-text-muted);
}

.org-chip {
position: absolute;
top: 14px;
left: 12px;
margin: 0;
padding: 3px 0;
width: 38px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-md);
background: var(--color-bg-elevated);
color: var(--color-brand);
font-family: var(--font-mono);
font-size: var(--t-micro);
text-align: center;
}

.org-head h3,
.org-post h3 {
margin: 0 0 2px;
font-size: var(--t-body);
}

.org-role {
margin: 0;
color: var(--color-text-secondary);
font-size: var(--t-small);
}

.org-holder {
margin: 2px 0 0;
font-size: var(--t-small);
}

.org-note {
margin: 8px 0 0;
color: var(--color-text-secondary);
font-size: var(--t-small);
font-style: italic;
}

.org-where {
margin: 8px 0 0;
color: var(--color-text-secondary);
font-family: var(--font-mono);
font-size: var(--t-micro);
}

@media (min-width: 760px) {
.org-head,
.org-post {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
align-items: baseline;
}

.org-head h3,
.org-post h3,
.org-role {
grid-column: 1;
}

.org-holder,
.org-note,
.org-where {
grid-column: 2;
margin-top: 0;
}

.org-note {
margin-top: 2px;
}

.org-where {
margin-top: 6px;
}
}

.zoom {
display: block;
position: relative;
width: 100%;
margin: 0;
padding: 0 0 32px;
border: 0;
background: none;
font: inherit;
color: inherit;
cursor: zoom-in;
}

.zoom-mark {
position: absolute;
right: 0;
bottom: 0;
width: 28px;
height: 28px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-md);
background: var(--color-bg-elevated);
pointer-events: none;
}

.zoom-mark::before,
.zoom-mark::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border: var(--stroke-focus) solid var(--color-text-primary);
}

.zoom-mark::before {
top: 6px;
left: 6px;
border-right: 0;
border-bottom: 0;
}

.zoom-mark::after {
right: 6px;
bottom: 6px;
border-top: 0;
border-left: 0;
}

.zoom:hover .zoom-mark,
.zoom:focus-visible .zoom-mark {
border-color: var(--color-brand);
}

.zoom:hover .zoom-mark::before,
.zoom:hover .zoom-mark::after,
.zoom:focus-visible .zoom-mark::before,
.zoom:focus-visible .zoom-mark::after {
border-color: var(--color-brand);
}

.device-art .zoom {
padding-bottom: 26px;
}

.device-art .zoom-mark {
width: 22px;
height: 22px;
}

.device-art .zoom-mark::before {
top: 4px;
left: 4px;
}

.device-art .zoom-mark::after {
right: 4px;
bottom: 4px;
}

.devices[data-scale="true"] .zoom,
.fleet .zoom {
width: auto;
}

.zoom-dialog {
width: fit-content;
min-width: min(92vw, 460px);
max-width: min(96vw, 1400px);
max-height: 94vh;
padding: 12px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
color: var(--color-text-primary);
overflow: hidden;
}

.zoom-dialog::backdrop {
background: rgba(0, 0, 0, 0.82);
}

html.zoomed,
html.zoomed body {
overflow: hidden;
}

.zoom-bar {
display: flex;
justify-content: flex-end;
gap: 8px;
margin: 0 0 10px;
}

.zoom-bar button {
min-height: var(--target-min);
padding: 0 16px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-md);
background: var(--color-bg-elevated);
color: var(--color-text-primary);
font: inherit;
cursor: pointer;
}

.zoom-pane {
display: flex;
align-items: center;
justify-content: center;
max-height: 72vh;
overflow: auto;
overscroll-behavior: contain;
background: var(--color-bg-page);
border-radius: var(--radius-md);
}

.zoom-pane img {
display: block;
max-width: 100%;
max-height: 72vh;
cursor: zoom-in;
}

.zoom-dialog[data-fit="actual"] .zoom-pane {
display: block;
}

.zoom-dialog[data-fit="actual"] .zoom-pane img {
max-width: none;
max-height: none;
cursor: zoom-out;
}

.zoom-pane img.pixels {
image-rendering: pixelated;
}

.zoom-caption {
max-width: var(--prose-width);
margin: 10px 0 0;
color: var(--color-text-primary);
font-size: var(--t-small);
}

.zoom-hint {
margin: 4px 0 0;
color: var(--color-text-secondary);
font-size: var(--t-small);
}

.band > .follow-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
max-width: none;
margin: 0 0 20px;
padding: 0;
list-style: none;
}

.follow-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"mark name"
"mark handle"
"body body";
align-items: center;

align-content: start;
column-gap: 14px;
height: 100%;
padding: 16px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-lg);
background: var(--color-bg-surface);
color: var(--color-text-primary);
text-decoration: none;
}

.follow-card:hover {
border-color: var(--color-brand);
background: var(--color-bg-elevated);
}

.follow-card .mark {
grid-area: mark;
}

.follow-name {
grid-area: name;
font-weight: 700;
}

.follow-handle {
grid-area: handle;
color: var(--color-text-secondary);
font-size: var(--t-small);

overflow-wrap: anywhere;
}

.follow-body {
grid-area: body;
margin-top: 12px;
color: var(--color-text-secondary);
font-size: var(--t-small);
}

.band-lead {
padding-top: 40px;
padding-bottom: 16px;
}

.band-lead::before {
display: none;
}

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

@property --turn {
syntax: "<angle>";
initial-value: 0deg;
inherits: true;
}

.lockup {
--mark-size: 128px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
margin: 0 0 32px;
}

.dial {
display: block;
width: var(--mark-size);
height: var(--mark-size);
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--color-brand);
cursor: pointer;
user-select: none;

touch-action: pan-y;
}

.dial:focus-visible {
border-radius: var(--radius-pill);
outline-offset: 8px;
}

.dial-mark {
display: block;
width: 100%;
height: 100%;
}

.dial-sweep {

stroke-dasharray: 100 200;
stroke-dashoffset: calc(100 - var(--dial) * 100);
}

.dial-key {
transform-box: fill-box;
transform-origin: 5px 5px;
rotate: var(--turn);
}

.dial-hint {
flex: 1 1 15ch;
max-width: 42ch;
color: var(--color-text-secondary);
font-size: var(--t-small);
}

@media (min-width: 560px) {
.lockup {
--mark-size: 152px;
gap: 16px 32px;
}
}

@media (min-width: 721px) {
.lockup {
--mark-size: 184px;
}
}

@media (min-width: 1100px) {
.lockup {
--mark-size: 216px;
}
}

.band-lead h1,
.band-lead .lede,
.byline {
max-width: var(--prose-width);
}

.band-lead .lede {
margin: 0;
}

.byline {
margin: 16px 0 0;
color: var(--color-text-secondary);
font-size: var(--t-small);
}

.band-claim {
padding-bottom: 24px;
}

.claim-fig {
margin: 28px 0 0;
max-width: 760px;
}

.fig {
display: block;
width: 100%;
height: auto;
}

.fig-cap {
margin: 0;
color: var(--color-text-primary);
font-size: var(--t-small);
line-height: 1.3;
}

.fig-data {
color: var(--color-text-secondary);
font-family: var(--font-mono);
font-size: var(--t-micro);
}

.fig-case rect {
fill: var(--color-bg-surface);
stroke: var(--color-bg-frame);
stroke-width: 1.5;
}

.fig-case .fig-screen {
fill: var(--color-bg-stage);
}

.fig-key,
.fig-packet {
fill: var(--color-brand);
}

.fig-caret {
fill: var(--color-brand);
}

.fig-dots {
clip-path: inset(0 0 0 0);
}

.fig-dots circle {
fill: var(--color-text-primary);
}

.fig-rail,
.fig-thread,
.fig-fill {
--len: 100;
fill: none;
stroke: var(--color-brand);
stroke-width: 1.5;
stroke-dasharray: var(--len);
stroke-dashoffset: 0;
}

.fig-thread,
.fig-fill {
stroke-width: 2;
}

.fig-fill {
--len: 14;
}

.fig-rail-dead {
stroke: var(--color-text-muted);
stroke-dasharray: 5 5;
}

.fig-stop {
stroke: var(--color-text-muted);
stroke-width: 2;
}

.claim-fig figcaption {
max-width: var(--prose-width);
margin: 14px 0 0;
color: var(--color-text-secondary);
font-size: var(--t-small);
}

.fig-tag {
margin-right: 10px;
color: var(--color-brand);
font-family: var(--font-mono);
font-size: var(--t-micro);
}

.types {
display: grid;

grid-template-columns: auto minmax(72px, 1fr) minmax(0, 2.2fr);
align-items: center;
gap: 16px;
}

.types-device .fig {
width: 52px;
}

.types-device .fig-cap {
margin-top: 10px;
}

.types-link .fig-cap {
margin-bottom: 6px;
}

.types-host .fig-cap {
margin-bottom: 8px;
}

.types-field {
padding: 10px 12px 12px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
}

.types-field .fig-cap {
margin-bottom: 4px;
}

.types-rhythm {
grid-column: 1 / -1;
max-width: var(--prose-width);
margin: 4px 0 0;
}

.types-gaps {
display: flex;
flex-wrap: wrap;
gap: 2px 10px;
margin: 0 0 8px;
color: var(--color-text-primary);
}

.types-unit {
color: var(--color-text-secondary);
}

.types-rhythm p:last-child {
margin: 0;
color: var(--color-text-secondary);
font-size: var(--t-small);
}

@media (max-width: 720px) {
.types {
grid-template-columns: auto minmax(72px, 1fr);
}

.types-host {
grid-column: 1 / -1;
margin-top: 4px;
}
}

.nowhere {
display: grid;
grid-template-columns: minmax(104px, 0.4fr) minmax(56px, 1.5fr) minmax(0, 1.7fr);
align-items: center;
gap: 10px 12px;
}

.nowhere-vault {
grid-column: 1;
grid-row: 1 / 4;
align-self: stretch;
display: flex;
align-items: center;
margin: 0;
padding: 12px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
font-size: var(--t-small);
}

.nowhere-rail {
grid-column: 2;
}

.nowhere-box {
grid-column: 3;
margin: 0;
padding: 10px 12px;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
font-size: var(--t-small);
}

.nowhere-none {
grid-column: 3;
margin: 0;
color: var(--color-text-secondary);
font-family: var(--font-mono);
font-size: var(--t-micro);
}

.fig-fleet .fig-case rect {
fill: var(--color-bg-elevated);
}

.fig-fleet .fig-case .fig-screen {
fill: var(--color-bg-stage);
stroke: none;
}

.cost {
max-width: 760px;
margin: 24px 0 0;
}

.cost-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin: 0 0 8px;
font-family: var(--font-mono);
}

.cost-work {
color: var(--color-text-secondary);
font-size: var(--t-micro);
}

.cost-seconds {
color: var(--color-brand);
font-size: var(--t-small);
}

.cost-track {
height: 14px;
overflow: hidden;
border: var(--stroke-thin) solid var(--color-bg-frame);
border-radius: var(--radius-pill);
background: var(--color-bg-surface);
}

.cost-fill {
height: 100%;
background: var(--color-brand);
transform: scaleX(0);
transform-origin: left center;
}

.cost-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
margin: 16px 0 0;
}

.cost-run {
min-height: var(--target-min);
padding: 0 18px;
border: var(--stroke-thin) solid var(--color-brand);
border-radius: var(--radius-md);
background: var(--color-bg-surface);
color: var(--color-brand);
font-family: var(--font-sans);
font-size: var(--t-small);
font-weight: 700;
cursor: pointer;
}

.cost-run[disabled] {
border-color: var(--color-bg-frame);
color: var(--color-text-secondary);
cursor: default;
}

.cost-state {
font-size: var(--t-small);
}

.cost[data-outcome="wiped"] .cost-state {
color: var(--color-caution);
}

.cost-count {
margin-left: auto;
color: var(--color-text-secondary);
font-family: var(--font-mono);
font-size: var(--t-micro);
}

.band-onward .note {
margin-top: 24px;
}

.coming {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 16px;
margin: 20px 0 0;
}

.coming-lede {
color: var(--color-text-secondary);
font-size: var(--t-small);
}

.coming-name {
color: var(--color-text-secondary);
font-family: var(--font-mono);
font-size: var(--t-micro);
}

@keyframes rise {
from {
transform: translateY(10px);
}

to {
transform: translateY(0);
}
}

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.band > h2,
.cards > .card,
.track,
.org-post,
.follow-cards > li,
.board-clips > .stage {
animation: rise linear both;
animation-timeline: view();

animation-range: entry 0% entry 55%;
}
}
}

@keyframes draw {
from {
stroke-dashoffset: var(--len);
}
}

@keyframes travel {
from {
transform: translateX(var(--from-x));
}
}

@keyframes reveal {
from {
clip-path: inset(0 100% 0 0);
}
}

@keyframes sweep {
to {
transform: scaleX(1);
}
}

@keyframes dial-fill {
from {
--dial: 0;
}

to {
--dial: 1;
}
}

@keyframes dial-turn {
0% {
--turn: 0deg;
}

28% {
--turn: 90deg;
}

62% {
--turn: 90deg;
}

100% {
--turn: 0deg;
}
}

@media (prefers-reduced-motion: no-preference) {

.dial-mark {
animation:
dial-fill var(--dial-intro) linear 240ms 1,
dial-turn var(--dial-turn) cubic-bezier(0.22, 0.9, 0.24, 1) 1340ms 1;
}

.dial[data-driven] .dial-mark {
animation: none;
}

.dial[data-turning] .dial-mark {
animation: dial-turn var(--dial-turn) cubic-bezier(0.22, 0.9, 0.24, 1) 1;
}

.cost-fill[data-running] {
animation: sweep 2000ms linear forwards;
}
}

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

.claim-fig {
view-timeline-name: --fig;
}

.fig-rail,
.fig-thread {
animation: draw linear;
animation-timeline: --fig;
animation-range: cover 8% cover 42%;
}

.nowhere .fig-packet {
--from-x: -372px;
animation: travel linear;
animation-timeline: --fig;
}

.nowhere-rail-1 .fig-rail,
.nowhere-rail-1 .fig-packet {
animation-range: cover 6% cover 28%;
}

.nowhere-rail-2 .fig-rail,
.nowhere-rail-2 .fig-packet {
animation-range: cover 14% cover 36%;
}

.nowhere-rail-3 .fig-rail,
.nowhere-rail-3 .fig-packet {
animation-range: cover 22% cover 44%;
}

.nowhere-rail-4 .fig-rail {
animation-range: cover 30% cover 52%;
}

.types .fig-fill,
.types .fig-caret,
.types .fig-packet,
.types .fig-dots {
animation: draw steps(14);
animation-timeline: --fig;
animation-range: cover 8% cover 42%;
}

.types .fig-dots {
animation-name: reveal;
}

.types .fig-caret {
--from-x: -210px;
animation-name: travel;
}

.types .fig-packet {
--from-x: -272px;
animation-name: travel;
}
}
}

@media (max-width: 887px) {
:root {
--header-h: 56px;
}

.site-nav {
display: none;
}

.toc {
display: block;
}
}

@media (min-width: 888px) and (max-width: 1045px) {
:root:lang(es) {
--header-h: 56px;
}

:lang(es) .site-nav {
display: none;
}

:lang(es) .toc {
display: block;
}
}

@media (max-width: 720px) {

.stage-device video {
max-height: min(460px, 48vh);
}

.band {
padding-top: 36px;
}

.stage-screen img {
height: auto;
width: 270px;
}

.zoom-pane,
.zoom-pane img {
max-height: 58vh;
}
}

@media (max-width: 419px) {
.toc-word {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
}

@media (max-width: 359px) {
.brand-name {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
}

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

.skip-link {
transition: none;
}
}