@layer reset, tokens, base, layout, components, pages, motion, print;@font-face{font-family: Manrope;font-style: normal;font-weight: 200 800;font-display: swap;src: url("/fonts/manrope.b5f9b1b3aa.woff2") format("woff2")}@font-face{font-family: "Fira Code";font-style: normal;font-weight: 300 700;font-display: swap;src: url("/fonts/firacode.113667f8a1.woff2") format("woff2")}@font-face{font-family: "Manrope Fallback";src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"), local("DejaVu Sans");size-adjust: 104%;ascent-override: 102%;descent-override: 29%;line-gap-override: 0%}@font-face{font-family: "Fira Code Fallback";src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"), local("Liberation Mono");size-adjust: 101%;ascent-override: 93%;descent-override: 27%;line-gap-override: 0%}@property --tone-h{syntax: "<number>";inherits: true;initial-value: 150}@property --drift{syntax: "<percentage>";inherits: false;initial-value: 0%}@property --w{syntax: "<number>";inherits: false;initial-value: 460}@property --angle{syntax: "<angle>";inherits: false;initial-value: 0deg}@property --mx{syntax: "<length>";inherits: true;initial-value: -999px}@property --my{syntax: "<length>";inherits: true;initial-value: -999px}@property --rx{syntax: "<angle>";inherits: false;initial-value: 0deg}@property --ry{syntax: "<angle>";inherits: false;initial-value: 0deg}@property --drawer-backdrop{syntax: "<number>";inherits: true;initial-value: 0}@layer tokens{:root{--bg: #000;--bg-raise: oklch(0.13 0.004 250);--glass: oklch(0.16 0.006 250 / 0.62);--glass-strong: oklch(0.12 0.005 250 / 0.86);--ink: oklch(0.985 0.004 120);--ink-2: oklch(0.985 0.004 120 / 0.8);--ink-3: oklch(0.985 0.004 120 / 0.6);--ink-4: oklch(0.985 0.004 120 / 0.5);--line: oklch(1 0 0 / 0.1);--line-2: oklch(1 0 0 / 0.18);--line-3: oklch(1 0 0 / 0.32);--green: oklch(0.87 0.21 145);--teal: oklch(0.84 0.14 190);--violet: oklch(0.72 0.19 295);--aurora: linear-gradient(100deg in oklch, var(--green), var(--teal) 50%, var(--violet));--aurora-loop: linear-gradient(100deg in oklch, var(--green), var(--teal) 25%, var(--violet) 50%, var(--teal) 75%, var(--green));--font: Manrope, "Manrope Fallback", ui-sans-serif, system-ui, sans-serif;--font-mono: "Fira Code", "Fira Code Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;--step--2: clamp(0.72rem, 0.7rem + 0.08vw, 0.78rem);--step--1: clamp(0.82rem, 0.79rem + 0.12vw, 0.9rem);--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);--step-1: clamp(1.18rem, 1.08rem + 0.45vw, 1.45rem);--step-2: clamp(1.45rem, 1.25rem + 0.95vw, 2.05rem);--step-3: clamp(1.9rem, 1.45rem + 2vw, 3.2rem);--step-4: clamp(2.5rem, 1.7rem + 3.8vw, 5rem);--step-5: clamp(3.1rem, 1.6rem + 7.2vw, 9.5rem);--space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.3rem);--space-2xs: clamp(0.5rem, 0.47rem + 0.15vw, 0.6rem);--space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.9rem);--space-s: clamp(1rem, 0.93rem + 0.35vw, 1.25rem);--space-m: clamp(1.5rem, 1.38rem + 0.55vw, 1.9rem);--space-l: clamp(2rem, 1.8rem + 1vw, 2.75rem);--space-xl: clamp(3rem, 2.6rem + 2vw, 4.5rem);--space-2xl: clamp(4rem, 3.2rem + 4vw, 7.5rem);--space-3xl: clamp(6rem, 4.4rem + 8vw, 12rem);--pad: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);--max: 82rem;--measure: 68ch;--header-h: 4.5rem;--r-xs: 0.375rem;--r-s: 0.625rem;--r-m: 1rem;--r-l: 1.5rem;--r-xl: 2.25rem;--r-pill: 999px;--ease-out: cubic-bezier(0.16, 1, 0.3, 1);--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);--ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.8%, 1);--shadow-l: 0 2.5rem 6rem -2rem oklch(0 0 0 / 0.9), 0 0 0 1px var(--line)}[data-tone="green"]{--tone-h: 150}[data-tone="teal"]{--tone-h: 190}[data-tone="violet"]{--tone-h: 295}:root, [data-tone]{--tone: oklch(0.86 0.17 var(--tone-h));--tone-ink: oklch(0.9 0.12 var(--tone-h));--tone-deep: oklch(0.55 0.2 var(--tone-h));--tone-soft: oklch(0.86 0.17 var(--tone-h) / 0.12);--tone-line: oklch(0.86 0.17 var(--tone-h) / 0.35);--tone-glow: oklch(0.7 0.22 var(--tone-h) / 0.32)}}@layer reset{*, *::before, *::after{box-sizing: border-box}*{margin: 0}html{-webkit-text-size-adjust: none;text-size-adjust: none;interpolate-size: allow-keywords}img, picture, svg, video, canvas{display: block;max-width: 100%}img{height: auto}input, button, textarea, select{font: inherit;color: inherit;letter-spacing: inherit}button{cursor: pointer}ul[role="list"], ol[role="list"]{list-style: none;padding: 0}[hidden]:not([hidden="until-found"]){display: none !important}dialog, [popover]{color: inherit}}@layer base{html{color-scheme: dark;background: var(--bg);scrollbar-color: oklch(0.35 0.01 250) var(--bg);scrollbar-gutter: stable;hanging-punctuation: first allow-end last;scroll-padding-top: calc(var(--header-h) + 1.5rem);@media (prefers-reduced-motion: no-preference){&:focus-within{scroll-behavior: smooth}}}body{display: grid;grid-template-rows: 1fr auto;min-block-size: 100svh;background: var(--bg);color: var(--ink);font-family: var(--font);font-size: var(--step-0);font-weight: 450;font-size-adjust: from-font;line-height: 1.6;letter-spacing: -0.006em;font-optical-sizing: auto;font-synthesis: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;overflow-x: clip}body::after{content: "";position: fixed;inset: 0;z-index: 90;pointer-events: none;background: url("/img/grain.svg") 0 0 / 240px 240px;opacity: 0.045}::selection{background: oklch(0.86 0.17 var(--tone-h) / 0.34);color: var(--ink)}:focus-visible{outline: 2px solid var(--tone);outline-offset: 3px;border-radius: var(--r-xs)}a{color: inherit;text-decoration-thickness: from-font;text-underline-offset: 0.2em;text-decoration-skip-ink: auto}h1, h2, h3, h4{font-weight: 650;line-height: 1.06;letter-spacing: -0.035em;text-wrap: balance}h1{font-size: var(--step-4)}h2{font-size: var(--step-3)}h3{font-size: var(--step-1);letter-spacing: -0.02em;line-height: 1.2}p, li, dd, blockquote, figcaption{text-wrap: pretty}code, kbd, samp, pre{font-family: var(--font-mono);font-size: 0.9em;font-variant-ligatures: contextual}kbd{display: inline-grid;place-items: center;min-inline-size: 1.6em;padding: 0.05em 0.4em;border: 1px solid var(--line-2);border-bottom-width: 2px;border-radius: var(--r-xs);background: oklch(1 0 0 / 0.04);color: var(--ink-2);font-size: 0.78em;line-height: 1.5}abbr[title]{text-decoration: underline dotted var(--ink-4)}hr{border: 0;border-block-start: 1px solid var(--line)}input, textarea{accent-color: var(--tone)}::placeholder{color: var(--ink-4)}@media (forced-colors: active){body::after{display: none}}}@layer layout{.wrap{inline-size: min(100% - var(--pad) * 2, var(--max));margin-inline: auto}.wrap-narrow{inline-size: min(100% - var(--pad) * 2, var(--measure));margin-inline: auto}.site-main{position: relative;isolation: isolate;min-inline-size: 0}.section{padding-block: var(--space-2xl)}.section + .section{padding-block-start: 0}.visually-hidden{position: absolute !important;inline-size: 1px;block-size: 1px;padding: 0;margin: -1px;overflow: hidden;clip-path: inset(50%);white-space: nowrap;border: 0}.top-sentinel{position: absolute;inset: 0 auto auto 0;inline-size: 1px;block-size: 8px;pointer-events: none}.skip-link{position: fixed;inset-block-start: 0.75rem;inset-inline-start: 0.75rem;z-index: 100;padding: 0.6rem 1rem;border-radius: var(--r-pill);background: var(--ink);color: var(--bg);font-weight: 650;font-size: var(--step--1);text-decoration: none;translate: 0 -200%;&:focus-visible{translate: 0 0}}.page-hero{position: relative;padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-xl);isolation: isolate;&::before{content: "";position: absolute;inset: 0 0 -20% 0;z-index: -1;background: radial-gradient(60% 55% at 85% 0%, var(--tone-glow), transparent 70%), radial-gradient(40% 40% at 10% 10%, oklch(0.7 0.2 var(--tone-h) / 0.12), transparent 70%);mask-image: linear-gradient(to bottom, #000 40%, transparent);pointer-events: none}}.page-hero > .wrap, .page-hero > .wrap-narrow{display: grid;justify-items: start;gap: var(--space-m)}.page-title{font-size: var(--step-5);font-weight: 700;letter-spacing: -0.055em;line-height: 0.92;text-box: trim-both cap alphabetic}.page-lead{max-inline-size: 46ch;color: var(--ink-2);font-size: var(--step-1);line-height: 1.45}.section-head{display: grid;gap: var(--space-s);margin-block-end: var(--space-xl);& h2{max-inline-size: 22ch}& .section-sub{max-inline-size: 52ch;color: var(--ink-3);font-size: var(--step-1);line-height: 1.45}}.label{display: inline-flex;align-items: center;gap: 0.75em;color: var(--ink-3);font-family: var(--font-mono);font-size: var(--step--2);font-weight: 450;letter-spacing: 0.14em;text-transform: uppercase;& .label-index{color: var(--tone)}&::after{content: "";inline-size: 3rem;block-size: 1px;background: linear-gradient(90deg, var(--line-3), transparent)}&.label-plain::after{display: none}}.dot{inline-size: 0.5rem;block-size: 0.5rem;border-radius: 50%;background: var(--tone);box-shadow: 0 0 0 0.25rem var(--tone-soft), 0 0 1rem var(--tone-glow);flex: none}}@layer components{.icon{flex: none;inline-size: 1.25em;block-size: 1.25em}.btn{--btn-bg: var(--ink);--btn-fg: var(--bg);--btn-line: var(--ink);position: relative;display: inline-flex;align-items: center;justify-content: center;gap: 0.6em;min-block-size: 3rem;padding: 0.75rem 1.35rem;border: 1px solid var(--btn-line);border-radius: var(--r-pill);background: var(--btn-bg);color: var(--btn-fg);font-size: var(--step--1);font-weight: 650;letter-spacing: -0.01em;line-height: 1.1;text-decoration: none;white-space: nowrap;transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.35s var(--ease-out), translate 0.5s var(--ease-spring);& .icon{transition: translate 0.35s var(--ease-out)}&:hover{box-shadow: 0 0.75rem 2.5rem -0.75rem var(--tone-glow), 0 0 0 4px var(--tone-soft);& .icon-trail{translate: 0.2em 0}}&:active{scale: 0.98}}.btn-ghost{--btn-bg: oklch(1 0 0 / 0.03);--btn-fg: var(--ink);--btn-line: var(--line-2);backdrop-filter: blur(12px);&:hover{--btn-line: var(--line-3);--btn-bg: oklch(1 0 0 / 0.07)}}.btn-tone{--btn-bg: var(--tone);--btn-line: var(--tone);--btn-fg: oklch(0.15 0.02 var(--tone-h));@supports (color: contrast-color(red)){--btn-fg: contrast-color(var(--tone))}}.btn-sm{min-block-size: 2.25rem;padding: 0.4rem 0.9rem;font-size: var(--step--2)}.btn-meta{font-family: var(--font-mono);font-weight: 450;font-size: 0.85em;opacity: 0.6}.icon-btn{display: inline-grid;place-items: center;inline-size: 2.75rem;block-size: 2.75rem;border: 1px solid transparent;border-radius: var(--r-pill);background: transparent;color: var(--ink-2);text-decoration: none;transition: background-color 0.2s, color 0.2s, border-color 0.2s;&:hover{background: oklch(1 0 0 / 0.07);color: var(--ink)}}.actions{display: flex;flex-wrap: wrap;gap: var(--space-2xs)}.text-link{display: inline-flex;align-items: center;gap: 0.4em;color: var(--ink);font-weight: 600;text-decoration: none;background: linear-gradient(var(--tone), var(--tone)) 0 100% / 0 1px no-repeat;transition: background-size 0.45s var(--ease-out), color 0.2s;&:hover{background-size: 100% 1px;color: var(--tone-ink)}}.chip{display: inline-flex;align-items: center;gap: 0.45em;min-block-size: 1.9rem;padding: 0.2rem 0.75rem;border: 1px solid var(--line-2);border-radius: var(--r-pill);color: var(--ink-2);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.02em;white-space: nowrap;text-decoration: none;& .icon{inline-size: 1.1em;block-size: 1.1em;color: var(--tone)}}a.chip:hover{border-color: var(--tone-line);color: var(--ink)}.chip-tone{border-color: var(--tone-line);background: var(--tone-soft);color: var(--tone-ink)}.chips{display: flex;flex-wrap: wrap;gap: 0.4rem}.pulse{position: relative;inline-size: 0.5rem;block-size: 0.5rem;border-radius: 50%;background: var(--tone);&::after{content: "";position: absolute;inset: 0;border-radius: inherit;background: inherit;@media (prefers-reduced-motion: no-preference){animation: pulse 2.4s var(--ease-out) infinite}}}.card{position: relative;isolation: isolate;border: 1px solid var(--line);border-radius: var(--r-l);background: linear-gradient(180deg, oklch(1 0 0 / 0.035), oklch(1 0 0 / 0.01));overflow: clip;transition: border-color 0.3s var(--ease-out), background-color 0.3s}.spot::before{content: "";position: absolute;inset: 0;z-index: -1;border-radius: inherit;background: radial-gradient(28rem circle at var(--mx) var(--my), var(--tone-soft), transparent 45%);opacity: 0;transition: opacity 0.4s var(--ease-out);pointer-events: none}.spot:hover::before{opacity: 1}.ring::after{content: "";position: absolute;inset: 0;z-index: 1;padding: 1px;border-radius: inherit;background: conic-gradient(from var(--angle), transparent 0 55%, var(--tone) 70%, var(--violet) 80%, transparent 92%);mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);opacity: 0;transition: opacity 0.4s var(--ease-out);pointer-events: none}.ring:is(:hover, :focus-within)::after{opacity: 1;@media (prefers-reduced-motion: no-preference){animation: spin-angle 4s linear infinite}}.tilt{transform: perspective(70rem) rotateX(var(--rx)) rotateY(var(--ry));transition: transform 0.6s var(--ease-out), border-color 0.3s;will-change: transform}.stats{display: flex;flex-wrap: wrap;gap: var(--space-s) var(--space-l);& div{display: grid;gap: 0.25rem}& dt{order: 2;color: var(--ink-3);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.08em;text-transform: uppercase}& dd{font-size: var(--step-2);font-weight: 650;letter-spacing: -0.04em;line-height: 1;font-variant-numeric: tabular-nums}}.switch{appearance: none;position: relative;flex: none;inline-size: 2.75rem;block-size: 1.6rem;margin: 0;border: 1px solid var(--line-2);border-radius: var(--r-pill);background: oklch(1 0 0 / 0.06);cursor: pointer;transition: background-color 0.3s var(--ease-out), border-color 0.3s;&::before{content: "";position: absolute;inset-block: 0.17rem;inset-inline-start: 0.17rem;aspect-ratio: 1;border-radius: 50%;background: var(--ink-3);transition: translate 0.45s var(--ease-spring), background-color 0.3s}&:checked{border-color: var(--tone);background: var(--tone);&::before{translate: 1.15rem 0;background: oklch(0.15 0.02 var(--tone-h))}}@media (forced-colors: active){appearance: auto}}.accordion{border-block-start: 1px solid var(--line)}.accordion details{border-block-end: 1px solid var(--line);&::details-content{block-size: 0;overflow-y: clip;transition: block-size 0.45s var(--ease-out), content-visibility 0.45s allow-discrete}&[open]::details-content{block-size: auto}}.accordion summary{display: flex;align-items: center;justify-content: space-between;gap: var(--space-m);padding-block: var(--space-m);font-size: var(--step-1);font-weight: 600;letter-spacing: -0.02em;line-height: 1.3;cursor: pointer;list-style: none;&::-webkit-details-marker{display: none}&::after{content: "";flex: none;inline-size: 1.75rem;block-size: 1.75rem;border: 1px solid var(--line-2);border-radius: 50%;background: linear-gradient(var(--ink-2), var(--ink-2)) center / 0.7rem 1.5px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) center / 1.5px 0.7rem no-repeat;transition: rotate 0.45s var(--ease-spring), border-color 0.2s}&:hover::after{border-color: var(--tone)}}.accordion details[open] summary::after{rotate: 135deg}.accordion .answer{max-inline-size: 64ch;padding-block-end: var(--space-m);color: var(--ink-2);& a{color: var(--tone-ink)}}.code{position: relative;margin: 0;border: 1px solid var(--line);border-radius: var(--r-m);background: oklch(0.11 0.006 250);overflow: clip;& figcaption{display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 0.45rem 0.5rem 0.45rem 1rem;border-block-end: 1px solid var(--line);color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.08em;text-transform: uppercase}& pre{margin: 0;padding: 1rem 1.1rem 1.1rem;overflow-x: auto;color: oklch(0.92 0.02 200);font-size: var(--step--1);line-height: 1.7;tab-size: 2;scrollbar-width: thin}}.code-copy{display: inline-flex;align-items: center;gap: 0.4em;padding: 0.3rem 0.6rem;border: 1px solid transparent;border-radius: var(--r-s);background: transparent;color: var(--ink-3);font-family: var(--font);font-size: var(--step--2);font-weight: 600;letter-spacing: 0;text-transform: none;transition: color 0.2s, border-color 0.2s, background-color 0.2s;&:hover{border-color: var(--line-2);background: oklch(1 0 0 / 0.05);color: var(--ink)}&.is-done{color: var(--green)}@media (scripting: none){display: none}}.toast{position: fixed;inset: auto 50% 1.5rem auto;translate: 50% 0;margin: 0;padding: 0.45rem 0.8rem;border: 1px solid var(--tone-line);border-radius: var(--r-pill);background: var(--glass-strong);backdrop-filter: blur(16px);color: var(--ink);font-size: var(--step--2);font-weight: 600;white-space: nowrap;opacity: 0;scale: 0.9;transition: opacity 0.2s var(--ease-out), scale 0.35s var(--ease-spring), display 0.2s allow-discrete, overlay 0.2s allow-discrete;&:popover-open{opacity: 1;scale: 1;@starting-style{opacity: 0;scale: 0.9}}@supports (position-anchor: --a){position-anchor: --copy-source;position-area: block-start;position-try-fallbacks: flip-block;inset: auto;translate: none;margin-block: 0.5rem;&.is-free{position-area: none;inset: auto 50% 1.5rem auto;translate: 50% 0;margin: 0}}}.marquee{--gap: 2.5rem;display: flex;overflow: clip;border-block: 1px solid var(--line);mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);user-select: none}.marquee-track{display: flex;flex: none;gap: var(--gap);min-inline-size: 100%;padding-block: var(--space-s);padding-inline-end: var(--gap);list-style: none;padding-inline-start: 0;@media (prefers-reduced-motion: no-preference){animation: marquee 38s linear infinite}& li{display: inline-flex;align-items: center;gap: var(--gap);color: var(--ink-3);font-family: var(--font-mono);font-size: var(--step--1);letter-spacing: 0.12em;text-transform: uppercase;white-space: nowrap;&::after{content: "";inline-size: 0.4rem;block-size: 0.4rem;border-radius: 50%;background: var(--aurora)}}}.marquee:hover .marquee-track{animation-play-state: paused}.aurora-text{background: var(--aurora-loop) var(--drift) 0 / 200% 100%;-webkit-background-clip: text;background-clip: text;color: transparent;@media (prefers-reduced-motion: no-preference){animation: drift 9s var(--ease-in-out) infinite alternate}@media (forced-colors: active){color: CanvasText;background: none}}@scope (.prose) to (.code, .fn-pop, .endnotes){:scope{color: var(--ink-2);font-size: var(--step-0);line-height: 1.75;overflow-wrap: break-word}:scope > * + *{margin-block-start: 1.25em}h2, h3, h4{position: relative;color: var(--ink);scroll-margin-top: calc(var(--header-h) + 1.5rem)}h2{margin-block-start: 2.4em;font-size: var(--step-2)}h3{margin-block-start: 2em;font-size: var(--step-1)}:is(h2, h3) + *{margin-block-start: 0.8em}a:not(.h-anchor){color: var(--ink);text-decoration-color: var(--tone-line);transition: color 0.2s, text-decoration-color 0.2s;&:hover{color: var(--tone-ink);text-decoration-color: currentColor}}strong{color: var(--ink);font-weight: 700}ul, ol{padding-inline-start: 1.3em}li + li{margin-block-start: 0.4em}li::marker{color: var(--tone)}blockquote{padding: 0.2em 0 0.2em 1.25em;border-inline-start: 2px solid var(--tone);color: var(--ink);font-size: 1.1em;font-weight: 500}:not(pre) > code{padding: 0.1em 0.35em;border: 1px solid var(--line);border-radius: var(--r-xs);background: oklch(1 0 0 / 0.05);color: var(--ink);font-size: 0.86em}img{border-radius: var(--r-m)}figure figcaption{margin-block-start: 0.6rem;color: var(--ink-3);font-size: var(--step--1)}hr{margin-block: 2.5em}table{inline-size: 100%;border-collapse: collapse;font-size: var(--step--1)}th, td{padding: 0.6rem 0.75rem;border-block-end: 1px solid var(--line);text-align: start}th{color: var(--ink)}}.prose > .code{margin-block-start: 1.5em}.h-anchor{margin-inline-start: 0.35em;color: var(--ink-4);font-weight: 400;text-decoration: none;opacity: 0;transition: opacity 0.2s, color 0.2s;:is(h2, h3):hover > &, &:focus-visible{opacity: 1}&:hover{color: var(--tone)}@media (hover: none){opacity: 0.4}}.fn-ref button{margin-inline: 0.1em;padding: 0 0.35em;border: 1px solid var(--tone-line);border-radius: var(--r-pill);background: var(--tone-soft);color: var(--tone-ink);font-family: var(--font-mono);font-size: 0.72em;line-height: 1.4;vertical-align: 0.1em}.fn-pop{max-inline-size: min(38ch, 100vw - 2rem);padding: 0.85rem 1rem;border: 1px solid var(--line-2);border-radius: var(--r-m);background: var(--glass-strong);backdrop-filter: blur(20px);box-shadow: var(--shadow-l);color: var(--ink-2);font-size: var(--step--1);line-height: 1.55;opacity: 0;translate: 0 0.35rem;transition: opacity 0.2s var(--ease-out), translate 0.3s var(--ease-out), display 0.2s allow-discrete, overlay 0.2s allow-discrete;&:popover-open{opacity: 1;translate: 0 0;@starting-style{opacity: 0;translate: 0 0.35rem}}& .fn-num{margin-inline-end: 0.35em;color: var(--tone);font-family: var(--font-mono)}@supports (position-area: block-start){inset: auto;margin: 0.5rem 0;position-area: block-start span-inline-end;position-try-fallbacks: flip-block, flip-inline}}.endnotes{margin-block-start: var(--space-xl);padding-block-start: var(--space-m);border-block-start: 1px solid var(--line);color: var(--ink-3);font-size: var(--step--1);& .endnotes-title{margin-block-end: 0.75rem;color: var(--ink-2);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.12em;text-transform: uppercase}& ol{padding-inline-start: 1.2em}& li + li{margin-block-start: 0.4em}& .fn-back{color: var(--tone);text-decoration: none}}.field{display: grid;gap: 0.5rem;& label{color: var(--ink-2);font-size: var(--step--1);font-weight: 600}& .hint{color: var(--ink-4);font-size: var(--step--2);font-family: var(--font-mono)}& .error{display: none;color: oklch(0.78 0.16 25);font-size: var(--step--1)}&:has(:user-invalid) .error{display: block}}.input{inline-size: 100%;min-block-size: 3rem;padding: 0.75rem 1rem;border: 1px solid var(--line-2);border-radius: var(--r-m);background: oklch(1 0 0 / 0.03);color: var(--ink);font-size: var(--step-0);line-height: 1.5;transition: border-color 0.2s, background-color 0.2s, box-shadow 0.25s;&:hover{border-color: var(--line-3)}&:focus{outline: none;border-color: var(--tone);background: oklch(1 0 0 / 0.05);box-shadow: 0 0 0 4px var(--tone-soft)}&:user-invalid{border-color: oklch(0.7 0.18 25)}}textarea.input{field-sizing: content;min-block-size: 9rem;max-block-size: 26rem;resize: vertical}}@layer components{.site-header{position: fixed;inset: 0 0 auto;z-index: 50;padding: max(0.75rem, env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left));pointer-events: none}.header-bar{view-transition-name: site-header;display: flex;align-items: center;gap: var(--space-xs);max-inline-size: var(--max);min-block-size: 3.5rem;margin-inline: auto;padding: 0.4rem 0.45rem 0.4rem 0.9rem;border: 1px solid transparent;border-radius: var(--r-pill);pointer-events: auto;transition: max-inline-size 0.7s var(--ease-out), background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), backdrop-filter 0.45s var(--ease-out)}@supports (container-type: scroll-state){html{container-type: scroll-state;container-name: viewport}@container viewport scroll-state(scrollable: top){.header-bar{max-inline-size: 60rem;border-color: var(--line);background: var(--glass);backdrop-filter: blur(22px) saturate(1.7);box-shadow: 0 1.25rem 3rem -1.5rem oklch(0 0 0 / 0.9)}}}.site-header[data-scrolled] .header-bar{max-inline-size: 60rem;border-color: var(--line);background: var(--glass);backdrop-filter: blur(22px) saturate(1.7);box-shadow: 0 1.25rem 3rem -1.5rem oklch(0 0 0 / 0.9)}.brand{display: inline-flex;align-items: center;gap: 0.6rem;margin-inline-end: auto;color: var(--ink);font-size: var(--step-0);font-weight: 750;letter-spacing: -0.04em;text-decoration: none;& svg{inline-size: 1.75rem;block-size: 1.75rem;transition: scale 0.6s var(--ease-spring), filter 0.6s var(--ease-out)}&:hover svg{scale: 1.08;filter: hue-rotate(-45deg)}}.nav{position: relative;flex: none}.nav-list{display: flex;gap: 0.15rem;padding: 0;list-style: none;& a{position: relative;z-index: 1;display: block;padding: 0.55rem 1rem;border-radius: var(--r-pill);color: var(--ink-3);font-size: var(--step--1);font-weight: 600;text-decoration: none;transition: color 0.25s;&:hover, &[aria-current]{color: var(--ink)}}& a[aria-current]{anchor-name: --nav-active}}.nav-pill{display: none}@supports (anchor-name: --a){.nav-list:has(a:is(:hover, :focus-visible)) a[aria-current]{anchor-name: none}.nav-list a:is(:hover, :focus-visible){anchor-name: --nav-active}.nav-pill{display: block;position: absolute;position-anchor: --nav-active;inset: anchor(top) anchor(right) anchor(bottom) anchor(left);border: 1px solid var(--line-2);border-radius: var(--r-pill);background: oklch(1 0 0 / 0.07);box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08);pointer-events: none;view-transition-name: nav-pill;@media (prefers-reduced-motion: no-preference){transition: inset 0.45s var(--ease-spring), opacity 0.25s}}.nav:not(:has(a[aria-current], a:hover, a:focus-visible)) .nav-pill{opacity: 0}}@supports not (anchor-name: --a){.nav-list a[aria-current]{background: oklch(1 0 0 / 0.08)}}.header-actions{display: flex;align-items: center;gap: 0.25rem}.search-btn{display: inline-flex;align-items: center;gap: 0.6rem;min-block-size: 2.5rem;padding: 0.3rem 0.4rem 0.3rem 0.85rem;border: 1px solid var(--line);border-radius: var(--r-pill);background: oklch(1 0 0 / 0.03);color: var(--ink-3);font-size: var(--step--1);font-weight: 500;transition: border-color 0.2s, color 0.2s, background-color 0.2s;&:hover{border-color: var(--line-2);background: oklch(1 0 0 / 0.06);color: var(--ink)}& kbd{font-size: 0.72rem}@media (scripting: none){display: none}}.menu-btn{display: none}@media (width < 52rem){.nav{display: none}.menu-btn{display: inline-grid}.search-btn{padding-inline: 0.65rem;& .search-label{position: absolute;inline-size: 1px;block-size: 1px;overflow: hidden;clip-path: inset(50%);white-space: nowrap}& kbd{display: none}}.header-actions .gh-link{display: none}}@media (scripting: none) and (width < 52rem){.nav{display: block}.nav-list a{padding-inline: 0.6rem}.menu-btn{display: none}}}@layer components{.drawer{--drawer-width: min(22rem, 86dvw);--drawer-backdrop: 0;inline-size: auto;block-size: auto;inset: 0;margin: 0;padding: 0;border: 0;background: transparent;overflow: visible}.drawer::backdrop{background: oklch(0 0 0 / calc(var(--drawer-backdrop) * 0.7));backdrop-filter: blur(calc(var(--drawer-backdrop) * 6px))}.drawer-scroller{display: grid;grid-template-columns: 100dvw var(--drawer-width);block-size: 100svh;overflow-x: scroll;overscroll-behavior: none;scrollbar-width: none;scroll-snap-type: x mandatory;@media (prefers-reduced-motion: no-preference){scroll-behavior: smooth}&::before{content: "";scroll-snap-align: start;scroll-initial-target: nearest}}.drawer-sheet{display: grid;grid-template-rows: auto 1fr auto;gap: var(--space-l);block-size: 100svh;padding: max(1rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) 1.5rem;border-inline-start: 1px solid var(--line);background: radial-gradient(80% 50% at 100% 0%, var(--tone-glow), transparent 70%), var(--glass-strong);backdrop-filter: blur(24px) saturate(1.5);overflow-y: auto;scroll-snap-align: end;scrollbar-width: none;outline: none}.drawer-head{display: flex;align-items: center;justify-content: space-between}.drawer-nav{display: grid;align-content: start;gap: 0.25rem;padding: 0;list-style: none;counter-reset: drawer;& a{display: flex;align-items: baseline;gap: 0.9rem;padding-block: 0.6rem;border-block-end: 1px solid var(--line);color: var(--ink-2);font-size: var(--step-3);font-weight: 650;letter-spacing: -0.045em;line-height: 1.1;text-decoration: none;counter-increment: drawer;&::before{content: counter(drawer, decimal-leading-zero);color: var(--tone);font-family: var(--font-mono);font-size: var(--step--2);font-weight: 450;letter-spacing: 0.1em}&[aria-current], &:hover{color: var(--ink)}}}.drawer-foot{display: grid;gap: 0.75rem;color: var(--ink-3);font-size: var(--step--1);& a{color: var(--ink-2);text-decoration: none;&:hover{color: var(--ink)}}}@supports (animation-timeline: scroll()){.drawer{timeline-scope: --drawer-fade;animation: drawer-backdrop linear both;animation-timeline: --drawer-fade}.drawer-scroller{scroll-timeline: --drawer-fade x}}}@layer components{.site-footer{position: relative;isolation: isolate;padding-block: var(--space-2xl) max(var(--space-m), env(safe-area-inset-bottom));border-block-start: 1px solid var(--line);overflow: clip;&::before{content: "";position: absolute;inset: auto -10% -40% -10%;block-size: 70%;z-index: -1;background: radial-gradient(50% 60% at 50% 100%, oklch(0.6 0.2 var(--tone-h) / 0.22), transparent 70%);pointer-events: none}}.footer-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));gap: var(--space-l)}.footer-intro{display: flex;margin-block-end: var(--space-l);flex-wrap: wrap;align-items: end;justify-content: space-between;gap: var(--space-m);padding-block-end: var(--space-l);border-block-end: 1px solid var(--line);& p{max-inline-size: 34ch;color: var(--ink-2);font-size: var(--step-1);line-height: 1.4}}.footer-col{display: grid;align-content: start;gap: 0.6rem;& h2{margin-block-end: 0.35rem;color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);font-weight: 450;letter-spacing: 0.14em;text-transform: uppercase}& ul{display: grid;gap: 0.5rem;padding: 0;list-style: none}& a{display: inline-flex;align-items: center;gap: 0.5em;color: var(--ink-2);font-size: var(--step--1);font-weight: 500;text-decoration: none;transition: color 0.2s;&:hover{color: var(--ink)}& .icon{inline-size: 1.05em;block-size: 1.05em;color: var(--ink-4)}}}.footer-facts li{display: inline-flex;align-items: center;gap: 0.5em;color: var(--ink-3);font-size: var(--step--1);& .icon{inline-size: 1.05em;block-size: 1.05em;color: var(--tone)}}.footer-mark{position: relative;margin-block: var(--space-xl) var(--space-m);container-type: inline-size;user-select: none;& span{display: block;font-size: clamp(3rem, 17.8cqi, 17rem);font-weight: 800;letter-spacing: -0.065em;line-height: 0.8;white-space: nowrap;text-box: trim-both cap alphabetic}& .footer-mark-line{color: transparent;-webkit-text-stroke: 1px var(--line-3)}& .footer-mark-fill{position: absolute;inset: -0.3em 0 0;padding-block-start: 0.3em;background: var(--aurora);-webkit-background-clip: text;background-clip: text;color: transparent;clip-path: inset(0 0 0 0)}}.footer-bottom{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 0.5rem 1.5rem;padding-block-start: var(--space-s);border-block-start: 1px solid var(--line);color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.04em;& p{display: inline-flex;align-items: center;gap: 0.6em}& a{color: inherit;&:hover{color: var(--ink)}}}.footer-top{display: inline-flex;align-items: center;gap: 0.4em;& .icon{transition: translate 0.3s var(--ease-spring)}&:hover .icon{translate: 0 -0.2em}}.back-top{position: fixed;inset: auto max(var(--pad), env(safe-area-inset-right)) max(var(--pad), env(safe-area-inset-bottom)) auto;z-index: 40;display: grid;place-items: center;inline-size: 3rem;block-size: 3rem;border: 1px solid var(--line-2);border-radius: 50%;background: var(--glass);backdrop-filter: blur(14px);color: var(--ink);opacity: 0;pointer-events: none;scale: 0.85;transition: border-color 0.2s;&:hover{border-color: var(--tone)}}}@layer components{.palette{inline-size: min(40rem, 100% - 2rem);max-block-size: min(34rem, 100svh - 6rem);margin: 12svh auto auto;padding: 0;border: 1px solid var(--line-2);border-radius: var(--r-l);background: var(--glass-strong);backdrop-filter: blur(28px) saturate(1.6);box-shadow: 0 2rem 6rem -1rem oklch(0 0 0 / 0.9), 0 0 0 1px oklch(1 0 0 / 0.03), 0 0 5rem -2rem var(--tone-glow);overflow: clip;opacity: 0;translate: 0 -0.75rem;scale: 0.98;transition-property: opacity, translate, scale, display, overlay;transition-duration: 0.28s;transition-timing-function: var(--ease-out);transition-behavior: allow-discrete;&::backdrop{background: oklch(0 0 0 / 0);backdrop-filter: blur(0);transition-property: background-color, backdrop-filter, display, overlay;transition-duration: 0.28s;transition-behavior: allow-discrete}}.palette:is([open]):where(:not([data-closing])){opacity: 1;translate: 0 0;scale: 1;@starting-style{opacity: 0;translate: 0 -0.75rem;scale: 0.98}&::backdrop{background: oklch(0 0 0 / 0.55);backdrop-filter: blur(6px);@starting-style{background: oklch(0 0 0 / 0);backdrop-filter: blur(0)}}}.palette-box{display: grid;grid-template-rows: auto minmax(0, 1fr) auto;max-block-size: inherit}.palette-field{display: flex;align-items: center;gap: 0.75rem;padding: 0.9rem 1.1rem;border-block-end: 1px solid var(--line);color: var(--ink-3);& input{flex: 1;min-inline-size: 0;padding: 0.25rem 0;border: 0;background: transparent;color: var(--ink);font-size: var(--step-1);font-weight: 500;letter-spacing: -0.02em;outline: none}}.palette-close{display: grid;place-items: center;padding: 0;border: 0;background: none;color: var(--ink-3);cursor: pointer;& .icon{display: none}&:hover kbd{border-color: var(--line-3);color: var(--ink)}@media (pointer: coarse){inline-size: 2.5rem;block-size: 2.5rem;margin: -0.5rem -0.6rem -0.5rem 0;border-radius: 50%;& kbd{display: none}& .icon{display: block}}}.palette-list{margin: 0;padding: 0.5rem;overflow-y: auto;overscroll-behavior: contain;list-style: none;scrollbar-width: thin}.palette-group{padding: 0.75rem 0.75rem 0.35rem;color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.14em;text-transform: uppercase}.palette-item{display: grid;grid-template-columns: auto minmax(0, 1fr) auto;align-items: center;gap: 0.85rem;padding: 0.6rem 0.75rem;border-radius: var(--r-m);color: var(--ink-2);cursor: pointer;& .icon{inline-size: 1.1rem;block-size: 1.1rem;color: var(--ink-4)}& .pi-text{display: grid;min-inline-size: 0}& .pi-title{overflow: hidden;color: var(--ink);font-weight: 600;text-overflow: ellipsis;white-space: nowrap}& .pi-desc{overflow: hidden;color: var(--ink-4);font-size: var(--step--1);text-overflow: ellipsis;white-space: nowrap}& .pi-kind{color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.06em}&[aria-selected="true"]{background: oklch(1 0 0 / 0.07);box-shadow: inset 0 0 0 1px var(--line-2);& .icon{color: var(--tone)}}}::highlight(palette-match){background-color: oklch(0.86 0.17 165 / 0.28);color: oklch(0.97 0.08 165)}mark.pm{background: oklch(0.86 0.17 165 / 0.28);color: inherit}.palette-empty{padding: 2rem 1rem;color: var(--ink-3);text-align: center}.palette-foot{display: flex;flex-wrap: wrap;gap: 0.5rem 1.25rem;padding: 0.65rem 1.1rem;border-block-start: 1px solid var(--line);color: var(--ink-4);font-size: var(--step--2);& span{display: inline-flex;align-items: center;gap: 0.3em}@media (pointer: coarse){display: none}}@media (prefers-reduced-motion: reduce){.palette{translate: none;scale: none;transition-duration: 0.1s}}}@layer pages{.section-title{font-size: var(--step-4);font-weight: 700;letter-spacing: -0.05em;line-height: 0.95}.mono{font-family: var(--font-mono);font-size: 0.9em}.hero{position: relative;isolation: isolate;display: grid;align-items: end;min-block-size: max(100svh, 42rem);padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-xl);overflow: clip;&::before{content: "";position: absolute;inset: 0;z-index: -3;display: none;background: url("/img/terrain.svg") 60% 30% / cover no-repeat;opacity: 0.6;mask-image: radial-gradient(130% 95% at 65% 25%, #000 35%, transparent 80%)}&::after{content: "";position: absolute;inset: 0;z-index: -1;background: linear-gradient(to top, var(--bg) 4%, oklch(0 0 0 / 0.6) 30%, transparent 62%), radial-gradient(60% 50% at 15% 85%, oklch(0 0 0 / 0.7), transparent 70%);pointer-events: none}&.no-gl::before{display: block}@media (scripting: none){&::before{display: block}}}.terrain{position: absolute;inset: 0;z-index: -2;inline-size: 100%;block-size: 100%;opacity: 0;mask-image: radial-gradient(130% 95% at 65% 25%, #000 35%, transparent 82%);transition: opacity 1.8s var(--ease-out);&.is-live{opacity: 1}.no-gl &{display: none}}.hero-inner{display: grid;gap: var(--space-m);container-type: inline-size}.hero-eyebrow{display: inline-flex;align-items: center;gap: 0.75rem;color: var(--ink-2);font-family: var(--font-mono);font-size: var(--step--1);letter-spacing: 0.08em;text-transform: uppercase}.wordmark{margin-inline-start: -0.045em;font-size: clamp(3.2rem, min(18.4cqi, 28svh), 18.5rem);font-weight: 500;letter-spacing: -0.065em;line-height: 0.82;white-space: nowrap;text-box: trim-both cap alphabetic;& .wm{display: block}& .ch{--w: 500;display: inline-block;font-weight: var(--w);transition: --w 0.9s var(--ease-out)}&[data-measured] .ch{inline-size: var(--cw);text-align: center}& .ch-re{background: var(--aurora-loop) var(--drift) 0 / 400% 100%;-webkit-background-clip: text;background-clip: text;color: transparent;@media (prefers-reduced-motion: no-preference){animation: drift 7s var(--ease-in-out) infinite alternate}& + .ch-re{animation-delay: -1.4s}@media (forced-colors: active){color: CanvasText;background: none}}}.hero-foot{display: grid;gap: var(--space-m);align-items: end;padding-block-start: var(--space-m);border-block-start: 1px solid var(--line-2);@container (width > 52rem){grid-template-columns: minmax(0, 1fr) auto}}.hero-lead{max-inline-size: 44ch;color: var(--ink-2);font-size: var(--step-1);line-height: 1.45;text-wrap: pretty;& strong{color: var(--ink);font-weight: 650}}.hero-meta{display: grid;grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));gap: var(--space-s);& div{display: flex;align-items: baseline;justify-content: space-between;gap: 1rem;padding-block: 0.6rem;border-block-start: 1px solid var(--line)}& dt{color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.1em;text-transform: uppercase}& dd{font-family: var(--font-mono);font-size: var(--step--1);font-variant-numeric: tabular-nums}}.scroll-cue{position: absolute;inset: auto auto var(--space-m) 50%;display: none;inline-size: 1.6rem;block-size: 2.6rem;border: 1px solid var(--line-3);border-radius: var(--r-pill);translate: -50% 0;& span{position: absolute;inset: 0.4rem auto auto 50%;inline-size: 0.25rem;block-size: 0.5rem;border-radius: var(--r-pill);background: var(--ink);translate: -50% 0}@media (min-height: 50rem) and (min-width: 60rem){display: block}}.manifesto{padding-block: var(--space-2xl)}.manifesto-sticky .wrap{display: grid;gap: var(--space-l)}.manifesto-text{max-inline-size: 26ch;font-size: clamp(2rem, 1.1rem + 3.1vw, 4.6rem);font-weight: 650;letter-spacing: -0.045em;line-height: 1.12;text-wrap: pretty;& .w{transition: color 0.3s}}.principle-list{display: grid;grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));gap: var(--space-s);padding: 0;list-style: none}.principle{display: grid;align-content: start;gap: var(--space-xs);padding: var(--space-l) var(--space-m);& h3{font-size: var(--step-2)}& p{color: var(--ink-3);line-height: 1.55}}.principle-num{margin-block-end: var(--space-m);color: var(--tone);font-family: var(--font-mono);font-size: var(--step--1)}.rail{padding-block: var(--space-2xl)}.rail-head{display: flex;flex-wrap: wrap;align-items: end;justify-content: space-between;gap: var(--space-s) var(--space-l);margin-block-end: var(--space-l);& > div{display: grid;gap: var(--space-s)}}.rail-progress{display: none}.rail-track{display: grid;gap: var(--space-s);inline-size: min(100% - var(--pad) * 2, var(--max));margin: 0 auto;padding: 0;list-style: none}.panel{container: panel / inline-size;min-block-size: 28rem;&:hover{border-color: var(--line-2)}}.panel-inner{display: grid;block-size: 100%;@container panel (width > 46rem){grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr)}}.panel-body{display: grid;align-content: start;gap: var(--space-s);padding: var(--space-l);& .stats{margin-block-start: auto;padding-block-start: var(--space-m)}}.panel-kind{display: inline-flex;align-items: center;gap: 0.7rem;color: var(--ink-3);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.1em;text-transform: uppercase}.panel-title{font-size: var(--step-4);font-weight: 700;letter-spacing: -0.055em;line-height: 0.95;text-wrap: balance;& a{color: inherit;text-decoration: none}}.stretched::after{content: "";position: absolute;inset: 0;z-index: 2}.panel-summary{max-inline-size: 40ch;color: var(--ink-2);font-size: var(--step-0);line-height: 1.5}.stats-compact dd{font-size: var(--step-1)}.panel-cta{display: inline-flex;align-items: center;gap: 0.5em;margin-block-start: var(--space-s);color: var(--tone-ink);font-weight: 650;font-size: var(--step--1);& .icon-trail{transition: translate 0.4s var(--ease-out)}.panel:hover & .icon-trail{translate: 0.3em 0}}.panel-art{position: relative;display: grid;place-items: center;min-block-size: 18rem;border-block-start: 1px solid var(--line);background: radial-gradient(70% 70% at 50% 50%, var(--tone-soft), transparent 70%), repeating-linear-gradient(0deg, transparent 0 31px, oklch(1 0 0 / 0.035) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, oklch(1 0 0 / 0.035) 31px 32px);overflow: clip;@container panel (width > 46rem){border-block-start: 0;border-inline-start: 1px solid var(--line)}}.orbit{--r: clamp(6.5rem, 22cqi, 10rem);position: relative;display: grid;place-items: center;inline-size: calc(var(--r) * 2 + 3rem);aspect-ratio: 1}.orbit-ring{position: absolute;inset: 1.5rem;border: 1px dashed var(--tone-line);border-radius: 50%}.orbit-ring-inner{inset: calc(1.5rem + var(--r) * 0.42);border-style: solid;border-color: var(--line)}.orbit-icons{position: absolute;inset: 0;margin: 0;padding: 0;list-style: none;& li{--a: calc(var(--i) * 40deg);position: absolute;inset: 50% auto auto 50%;display: grid;place-items: center;inline-size: 2.9rem;block-size: 2.9rem;margin: -1.45rem 0 0 -1.45rem;border: 1px solid var(--line-2);border-radius: 50%;background: var(--bg-raise);color: var(--tone);transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1))}& li:nth-child(1){--i: 0}& li:nth-child(2){--i: 1}& li:nth-child(3){--i: 2}& li:nth-child(4){--i: 3}& li:nth-child(5){--i: 4}& li:nth-child(6){--i: 5}& li:nth-child(7){--i: 6}& li:nth-child(8){--i: 7}& li:nth-child(9){--i: 8}}.orbit-core{display: grid;place-items: center;inline-size: 5.5rem;aspect-ratio: 1;border-radius: 1.6rem;background: linear-gradient(145deg, var(--tone), var(--tone-deep));color: oklch(0.15 0.03 var(--tone-h));box-shadow: 0 0 4rem -0.5rem var(--tone-glow), inset 0 1px 0 oklch(1 0 0 / 0.4)}.reader{inline-size: min(88%, 24rem);border: 1px solid var(--line-2);border-radius: var(--r-m);background: oklch(0.1 0.01 var(--tone-h) / 0.9);box-shadow: var(--shadow-l);rotate: -4deg;transition: rotate 0.8s var(--ease-spring);.panel:hover &{rotate: -1deg}}.reader-chrome{display: flex;align-items: center;gap: 0.35rem;padding: 0.7rem 0.9rem;border-block-end: 1px solid var(--line);& span{inline-size: 0.55rem;aspect-ratio: 1;border-radius: 50%;background: var(--line-2)}& i{margin-inline-start: auto;color: var(--ink-4);font-family: var(--font-mono);font-size: 0.68rem;font-style: normal}}.reader-body{display: grid;gap: 0.9rem;padding: 1.2rem;& b, & i, & .reader-kicker{display: block;block-size: 0.5rem;border-radius: var(--r-pill);background: var(--line-2)}}.reader-kicker{inline-size: 30%;background: var(--tone) !important}.reader-title{display: grid;gap: 0.5rem;& b{block-size: 1.05rem;background: var(--ink-2)}& b:last-child{inline-size: 62%}}.reader-lines{display: grid;gap: 0.55rem;& i:nth-child(3n){inline-size: 86%}& i:nth-child(4n){inline-size: 72%}& i:last-child{inline-size: 45%}}.reader-chips{display: flex;flex-wrap: wrap;gap: 0.35rem;margin-block-start: 0.3rem;& em{padding: 0.15rem 0.5rem;border: 1px solid var(--tone-line);border-radius: var(--r-pill);color: var(--tone-ink);font-family: var(--font-mono);font-size: 0.62rem;font-style: normal}}.diff{inline-size: min(90%, 24rem);padding: 1rem 0;border: 1px solid var(--line-2);border-radius: var(--r-m);background: oklch(0.09 0 0 / 0.9);font-family: var(--font-mono);font-size: clamp(0.72rem, 2.4cqi, 0.86rem);box-shadow: var(--shadow-l);& p{padding: 0.2rem 1rem;white-space: pre}& b{display: inline-block;inline-size: 1.4ch;font-weight: 400}}.diff-head{display: flex;align-items: center;gap: 0.5rem;margin-block-end: 0.5rem;color: var(--ink-4)}.diff-del{background: oklch(0.6 0.2 25 / 0.12);color: oklch(0.8 0.1 25);text-decoration: line-through oklch(0.8 0.1 25 / 0.4)}.diff-add{background: oklch(0.86 0.17 150 / 0.1);color: var(--green)}.diff-ctx{color: var(--ink-3)}.teaser .text-link{margin-block-start: var(--space-l)}.cta{position: relative;padding-block: var(--space-2xl) var(--space-3xl);overflow: clip;&::before{content: "";position: absolute;inset: 30% -20% -30%;z-index: -1;background: radial-gradient(40% 50% at 30% 60%, oklch(0.7 0.2 150 / 0.16), transparent 70%), radial-gradient(40% 50% at 70% 60%, oklch(0.6 0.2 295 / 0.2), transparent 70%);pointer-events: none}}.cta-inner{display: grid;justify-items: start;gap: var(--space-l);margin-block-start: var(--space-2xl)}.cta-title{font-size: clamp(3.5rem, 2rem + 11vw, 13rem);font-weight: 750;letter-spacing: -0.07em;line-height: 0.85;text-box: trim-both cap alphabetic;& a{text-decoration: none}}.cta-row{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-s)}.cta-mail{color: var(--ink);font-size: var(--step-2);font-weight: 600;letter-spacing: -0.03em;text-decoration: underline 1px var(--line-3);text-underline-offset: 0.2em;transition: text-decoration-color 0.3s;&:hover{text-decoration-color: var(--tone)}}}@layer pages{.bento-section{container-type: inline-size}.bento{display: grid;gap: var(--space-s);@container (width > 56rem){grid-template-columns: repeat(12, minmax(0, 1fr));& > :nth-child(1){grid-column: span 7}& > :nth-child(2){grid-column: span 5}& > .bento-next{grid-column: 1 / -1}& > .bento-card:not(.bento-next){grid-row: span 2;grid-template-rows: subgrid;row-gap: 0}}}.bento-card{display: grid;grid-template-rows: minmax(16rem, 1fr) auto;&:hover{border-color: var(--line-2)}}.bento-art{position: relative;display: grid;place-items: center;padding-block: var(--space-m);border-block-end: 1px solid var(--line);background: radial-gradient(70% 80% at 50% 45%, var(--tone-soft), transparent 70%), repeating-linear-gradient(0deg, transparent 0 31px, oklch(1 0 0 / 0.035) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, oklch(1 0 0 / 0.035) 31px 32px);overflow: clip;container-type: inline-size}.bento-body{display: grid;align-content: start;gap: var(--space-xs);padding: var(--space-l)}.bento-title{font-size: var(--step-3);font-weight: 700;letter-spacing: -0.05em;line-height: 1;& a{color: inherit;text-decoration: none}}.bento-title-sm{font-size: var(--step-2)}.bento-summary{max-inline-size: 48ch;color: var(--ink-2);line-height: 1.55}.bento-body .chips{margin-block-start: var(--space-xs);padding: 0;list-style: none}.bento-go{position: absolute;inset: var(--space-s) var(--space-s) auto auto;display: grid;place-items: center;inline-size: 2.75rem;block-size: 2.75rem;border: 1px solid var(--line-2);border-radius: 50%;background: var(--glass);color: var(--ink);backdrop-filter: blur(10px);transition: rotate 0.5s var(--ease-spring), background-color 0.3s, color 0.3s;.bento-card:hover &{rotate: 45deg;background: var(--tone);color: var(--bg)}}.bento-next{grid-template-rows: auto;border-style: dashed;background: transparent;& .bento-body{@container (width > 56rem){grid-template-columns: auto 1fr auto;align-items: center;gap: var(--space-l)}}& .actions{justify-content: start}}.project-hero{padding-block-end: var(--space-xl)}.project-hero-grid{display: grid;gap: var(--space-xl);align-items: center;justify-items: stretch;@media (min-width: 64rem){grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr)}}.project-hero-text{display: grid;gap: var(--space-m);align-content: start;container-type: inline-size;& .page-title-long{font-size: min(var(--step-5), 11.6cqi)}& .page-lead{margin: 0}& .label a{color: inherit;text-decoration: none;&:hover{color: var(--ink)}}}.project-hero-art{display: grid;place-items: center;min-block-size: 22rem;border: 1px solid var(--line);border-radius: var(--r-xl);background: radial-gradient(70% 70% at 50% 50%, var(--tone-soft), transparent 70%), repeating-linear-gradient(0deg, transparent 0 31px, oklch(1 0 0 / 0.035) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, oklch(1 0 0 / 0.035) 31px 32px);container-type: inline-size}.meta-strip{display: grid;grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));margin-block-start: var(--space-s);border-block: 1px solid var(--line);& div{display: grid;gap: 0.3rem;padding: var(--space-xs) var(--space-s) var(--space-xs) 0}& div + div{padding-inline-start: var(--space-s);border-inline-start: 1px solid var(--line)}& dt{color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.1em;text-transform: uppercase}& dd{font-weight: 600;font-variant-numeric: tabular-nums}& a{color: inherit;text-decoration-color: var(--line-3);text-underline-offset: 0.2em}}html:has(.subnav){scroll-padding-block-start: calc(var(--header-h) + 4.5rem)}.subnav{position: sticky;inset-block-start: calc(var(--header-h) + 0.25rem);z-index: 20;margin-block-end: var(--space-l);pointer-events: none;& ul{display: flex;gap: 0.25rem;inline-size: fit-content;max-inline-size: min(100% - var(--pad) * 2, var(--max));margin-inline: auto;padding: 0.3rem;border: 1px solid var(--line-2);border-radius: var(--r-pill);background: var(--glass-strong);backdrop-filter: blur(18px) saturate(1.4);list-style: none;overflow-x: auto;scrollbar-width: none;scroll-target-group: auto;pointer-events: auto}& a{display: block;padding: 0.4rem 0.9rem;border-radius: var(--r-pill);color: var(--ink-3);font-size: var(--step--1);font-weight: 600;text-decoration: none;white-space: nowrap;transition: color 0.2s, background-color 0.3s;&:hover{color: var(--ink)}&:is(:target-current, .target-current){background: var(--tone-soft);color: var(--tone-ink)}}}.split{display: grid;grid-template-columns: minmax(0, 1fr);gap: var(--space-l);@media (min-width: 64rem){grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);gap: var(--space-2xl);& > .section-head{position: sticky;inset-block-start: calc(var(--header-h) + 5rem);align-self: start;margin: 0}& .section-title{font-size: var(--step-3)}}}.lead-prose{font-size: var(--step-1);line-height: 1.6;& .note{display: inline-flex;align-items: center;gap: 0.5em;color: var(--ink-3);font-size: var(--step-0)}}.features{--cols: 3;display: grid;grid-template-columns: 1fr;gap: var(--space-s);padding: 0;list-style: none;@media (min-width: 38rem){grid-template-columns: repeat(2, minmax(0, 1fr))}@media (min-width: 62rem){grid-template-columns: repeat(var(--cols), minmax(0, 1fr))}}.feature{display: grid;grid-row: span 3;grid-template-rows: subgrid;gap: var(--space-xs);padding: var(--space-m);& h3{align-self: end;font-size: var(--step-1);letter-spacing: -0.03em}& p{color: var(--ink-3);font-size: var(--step--1);line-height: 1.6}}.feature-icon{display: grid;place-items: center;inline-size: 2.75rem;block-size: 2.75rem;margin-block-end: var(--space-s);border: 1px solid var(--tone-line);border-radius: var(--r-m);background: var(--tone-soft);color: var(--tone)}.verify{display: grid;gap: var(--space-m);padding: var(--space-l);border-color: var(--tone-line)}.verify-head{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-s);& .feature-icon{margin: 0}& > div{flex: 1;min-inline-size: 12rem}& .btn{position: relative;z-index: 2}}.verify-title{font-weight: 700}.verify-sub, .verify-note{color: var(--ink-3);font-size: var(--step--1);line-height: 1.6;& code{color: var(--ink-2);font-family: var(--font-mono);font-size: 0.92em}}.fingerprint{display: grid;grid-template-columns: repeat(auto-fill, minmax(12.5ch, 1fr));gap: 0.6rem 1.6rem;padding: var(--space-m);border: 1px solid var(--line);border-radius: var(--r-m);background: oklch(0 0 0 / 0.4);color: var(--tone-ink);font-family: var(--font-mono);font-size: var(--step-0);letter-spacing: 0.04em;& span:nth-child(even){color: var(--ink-2)}& i{color: var(--ink-4);font-style: normal}}.fingerprint-sm{font-size: var(--step--1)}.steps{display: grid;gap: var(--space-s);padding: 0;list-style: none;counter-reset: step}.step{display: grid;grid-template-columns: auto 1fr;gap: var(--space-m);padding: var(--space-m) 0;border-block-start: 1px solid var(--line);& h3{margin-block-end: 0.4rem;font-size: var(--step-1)}& p{color: var(--ink-2);line-height: 1.6}& a{color: var(--tone-ink);text-underline-offset: 0.2em}}.step-num{display: grid;place-items: center;inline-size: 2.75rem;block-size: 2.75rem;border: 1px solid var(--tone-line);border-radius: 50%;color: var(--tone);font-family: var(--font-mono)}.releases{display: grid;justify-items: start;gap: var(--space-m)}.timeline{position: relative;display: grid;inline-size: 100%;padding: 0 0 0 1.75rem;list-style: none;&::before{content: "";position: absolute;inset: 0.6rem auto 0.6rem 0.45rem;inline-size: 1px;background: linear-gradient(var(--tone), var(--line) 30%, var(--line))}}.timeline-older::before{background: var(--line)}.release{position: relative;display: grid;gap: 0.35rem;padding-block: var(--space-xs) var(--space-s);&::before{content: "";position: absolute;inset: 1.05rem auto auto -1.62rem;inline-size: 0.6rem;block-size: 0.6rem;border: 1px solid var(--line-3);border-radius: 50%;background: var(--bg)}&.is-latest::before{border-color: var(--tone);background: var(--tone);box-shadow: 0 0 0 4px var(--tone-soft), 0 0 1rem var(--tone-glow)}}.release-head{display: flex;flex-wrap: wrap;align-items: center;gap: 0.4rem 0.9rem;& h3{font-size: var(--step-2);letter-spacing: -0.04em}& h3 a{color: inherit;text-decoration: none;&:hover{color: var(--tone-ink)}}& time{color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2)}}.release-apk{display: inline-flex;align-items: center;gap: 0.5em;inline-size: fit-content;color: var(--ink-2);font-family: var(--font-mono);font-size: var(--step--1);text-decoration: none;& span{color: var(--ink-4)}&:hover{color: var(--tone-ink)}}.further{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: var(--space-m);padding: var(--space-l);& > div:first-child{display: grid;gap: var(--space-xs);max-inline-size: 44ch}}.further-title{font-size: var(--step-2);font-weight: 650;letter-spacing: -0.035em;line-height: 1.2}}@layer pages{.demo{display: grid;gap: var(--space-m);justify-items: center;@media (min-width: 40rem){grid-template-columns: auto auto;align-items: center;justify-content: center}}.demo-controls{display: grid;gap: 0.4rem;margin: 0;padding: var(--space-s);border: 1px solid var(--line);border-radius: var(--r-l);background: var(--glass);backdrop-filter: blur(14px);& legend{float: left;inline-size: 100%;margin-block-end: 0.5rem;color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.1em;text-transform: uppercase}& label{display: flex;align-items: center;gap: 0.75rem;padding: 0.45rem 0.25rem;color: var(--ink-2);font-size: var(--step--1);font-weight: 600;cursor: pointer;&:has(:checked){color: var(--ink)}}}.phone{position: relative;inline-size: 17.5rem;padding: 0.55rem;border: 1px solid var(--line-2);border-radius: 2.6rem;background: linear-gradient(160deg, oklch(0.24 0.01 var(--tone-h)), oklch(0.12 0.005 var(--tone-h)));box-shadow: var(--shadow-l), 0 0 6rem -1rem var(--tone-glow), inset 0 1px 0 oklch(1 0 0 / 0.12);rotate: 2deg;transition: rotate 0.8s var(--ease-spring);&:hover{rotate: 0deg}&::before{content: "";position: absolute;inset: 1.05rem auto auto 50%;z-index: 2;inline-size: 4.5rem;block-size: 1.15rem;border-radius: var(--r-pill);background: #000;translate: -50% 0}}.phone-screen{display: grid;grid-template-rows: auto 1fr auto;block-size: 31rem;border-radius: 2.1rem;background: radial-gradient(90% 60% at 80% 10%, oklch(0.4 0.08 var(--tone-h) / 0.35), transparent 70%), oklch(0.11 0.01 250);overflow: clip;font-size: 0.78rem;transition: background-color 0.5s}.chat-head{display: flex;align-items: center;gap: 0.6rem;padding: 2.6rem 1rem 0.8rem;border-block-end: 1px solid var(--line);background: oklch(0.15 0.01 250 / 0.8);transition: background-color 0.5s}.avatar{inline-size: 2.1rem;aspect-ratio: 1;border-radius: 50%;background: linear-gradient(135deg, var(--green), var(--violet))}.chat-name{display: grid;line-height: 1.3;& b{font-weight: 700}& i{display: inline-flex;align-items: center;gap: 0.25rem;color: var(--ink-4);font-size: 0.68rem;font-style: normal}& .when-secret{display: none;color: var(--green)}}.chat-body{display: flex;flex-direction: column;justify-content: end;gap: 0.45rem;padding: 0.9rem 0.8rem}.msg{display: grid;gap: 0.35rem;max-inline-size: 78%;padding: 0.6rem 0.75rem;border-radius: 1rem;& > i{display: block;block-size: 0.4rem;border-radius: var(--r-pill);background: oklch(1 0 0 / 0.28)}& > i:nth-child(2){inline-size: 70%}}.msg-in{align-self: start;inline-size: 11rem;border-end-start-radius: 0.3rem;background: oklch(0.22 0.01 250)}.msg-out{grid-template-columns: 1fr auto;align-items: end;align-self: end;inline-size: 9rem;border-end-end-radius: 0.3rem;background: oklch(0.5 0.12 var(--tone-h) / 0.55);& > i{background: oklch(1 0 0 / 0.5)}}.ticks{display: inline-flex;color: var(--ink-3);& svg + svg{margin-inline-start: -0.45rem}}.collapse{display: grid;grid-template-rows: 1fr;transition: grid-template-rows 0.5s var(--ease-out), opacity 0.4s, margin 0.5s var(--ease-out);& > *{min-block-size: 0;overflow: clip}}.msg-ad{position: relative;inline-size: 12.5rem;border: 1px dashed oklch(0.75 0.15 70 / 0.6);background: oklch(0.3 0.06 70 / 0.35);& > i{background: oklch(0.85 0.1 70 / 0.35)}}.ad-tag{color: oklch(0.85 0.12 75);font-size: 0.62rem;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase}.ad-btn{margin-block-start: 0.15rem;padding: 0.3rem;border-radius: 0.5rem;background: oklch(0.75 0.15 70 / 0.3);font-size: 0.68rem;font-weight: 700;text-align: center}.msg-file{grid-template-columns: auto 1fr;align-items: center;gap: 0.6rem;align-self: start;inline-size: 13.5rem;border-end-start-radius: 0.3rem;background: oklch(0.22 0.01 250);& > svg{padding: 0.4rem;inline-size: 2rem;block-size: 2rem;border-radius: 50%;background: var(--tone-soft);color: var(--tone)}& span{display: grid;gap: 0.15rem}& b{font-weight: 650}& i{color: var(--ink-3);font-size: 0.66rem;font-style: normal;line-height: 1.35}}.limit-upsell{color: oklch(0.8 0.14 300) !important}.limit-info{display: none}.chat-seen{display: flex;flex-wrap: wrap;align-items: center;gap: 0.35rem;padding: 0.75rem 0.9rem 1.1rem;border-block-start: 1px solid var(--line);background: oklch(0.15 0.01 250 / 0.8);& > span{inline-size: 100%;color: var(--ink-4);font-size: 0.62rem;letter-spacing: 0.08em;text-transform: uppercase}}.sig{padding: 0.15rem 0.55rem;border: 1px solid oklch(0.75 0.15 70 / 0.5);border-radius: var(--r-pill);color: oklch(0.88 0.1 75);font-size: 0.68rem;font-style: normal;transition: color 0.3s, border-color 0.3s, opacity 0.3s, text-decoration-color 0.3s;text-decoration: line-through transparent}.demo:has(#d-ads:checked) .ad{grid-template-rows: 0fr;opacity: 0;margin-block: -0.225rem}.demo:has(#d-ghost:checked){& .sig{border-color: var(--line);color: var(--ink-4);text-decoration-color: currentColor;opacity: 0.7}& .ticks{color: var(--ink-4)}}.demo:has(#d-premium:checked){& .limit-upsell{display: none}& .limit-info{display: block}}.demo:has(#d-secret:checked){& .chat-head{background: oklch(0.3 0.09 150 / 0.45)}& .when-plain{display: none}& .when-secret{display: inline-flex}& .msg-out{background: oklch(0.55 0.15 150 / 0.5)}}}@layer pages{.project-hero-art .reader{inline-size: min(84%, 26rem)}.topics{display: grid;grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));column-gap: var(--space-l);padding: 0;list-style: none}.topic a{--v: 0;display: grid;grid-template-columns: 2.5rem minmax(0, 1fr) minmax(4rem, 8rem) 2.5rem;align-items: center;gap: var(--space-s);padding-block: 0.95rem;border-block-end: 1px solid var(--line);color: var(--ink-2);text-decoration: none;transition: color 0.2s, padding 0.4s var(--ease-out);&:hover{padding-inline-start: 0.5rem;color: var(--ink)}}.topic-num{color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2)}.topic-name{font-size: var(--step-0);font-weight: 600;letter-spacing: -0.02em}.topic-bar{block-size: 0.35rem;border-radius: var(--r-pill);background: var(--line);overflow: clip;& i{display: block;inline-size: calc(var(--v) * 100%);block-size: 100%;border-radius: inherit;background: linear-gradient(90deg, var(--tone-deep), var(--tone));transition: inline-size 0.8s var(--ease-out)}}.topic-count{color: var(--tone-ink);font-family: var(--font-mono);font-size: var(--step--1);text-align: end}.features-4{--cols: 4}}@layer pages{.tag-filter{display: flex;flex-wrap: wrap;gap: 0.4rem;margin: 0 0 var(--space-xl);padding: 0;border: 0;& label{cursor: pointer;transition: border-color 0.2s, color 0.2s, background-color 0.2s;&:hover{border-color: var(--line-3);color: var(--ink)}&:has(:checked){border-color: var(--tone-line);background: var(--tone-soft);color: var(--tone-ink)}&:has(:focus-visible){outline: 2px solid var(--tone);outline-offset: 2px}& span{color: var(--ink-4)}}& input{position: absolute;opacity: 0;pointer-events: none}}.year-group{display: grid;gap: var(--space-s);margin-block-end: var(--space-xl);@media (min-width: 56rem){grid-template-columns: 10rem minmax(0, 1fr)}}.year{position: sticky;inset-block-start: calc(var(--header-h) + 1rem);align-self: start;color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step-1);font-weight: 400}.post-list{margin: 0;padding: 0;list-style: none;border-block-start: 1px solid var(--line)}.post-row{display: grid;grid-template-columns: 1fr auto;gap: 0.4rem var(--space-m);padding: var(--space-s) 0;border-block-end: 1px solid var(--line);color: inherit;text-decoration: none;transition: padding 0.4s var(--ease-out), background-color 0.3s;@media (min-width: 48rem){grid-template-columns: 7.5rem minmax(0, 1fr) auto;align-items: baseline}&:hover{padding-inline: 0.75rem;background: oklch(1 0 0 / 0.025);& .post-title{color: var(--tone-ink)}& .post-arrow{rotate: 45deg;color: var(--tone)}}}.post-date{color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2)}.post-main{display: grid;gap: 0.3rem;grid-column: 1 / -1;@media (min-width: 48rem){grid-column: auto}}.post-title{font-size: var(--step-1);font-weight: 650;letter-spacing: -0.025em;line-height: 1.25;text-wrap: balance;transition: color 0.2s}.post-desc{color: var(--ink-3);font-size: var(--step--1);line-height: 1.5}.post-meta{display: inline-flex;align-items: center;gap: 0.4rem;grid-row: 1;grid-column: 2;color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);white-space: nowrap;@media (min-width: 48rem){grid-column: 3}}.post-arrow{transition: rotate 0.4s var(--ease-spring), color 0.2s}.empty{display: grid;justify-items: center;gap: var(--space-s);padding: var(--space-2xl) var(--space-m);border: 1px dashed var(--line-2);border-radius: var(--r-xl);text-align: center;& h2{font-size: var(--step-3);letter-spacing: -0.045em}& p{max-inline-size: 44ch;color: var(--ink-3);line-height: 1.6}& .actions{justify-content: center;margin-block-start: var(--space-xs)}}.sprout{inline-size: 7.5rem;stroke-width: 2.2;stroke-linecap: round;stroke-linejoin: round;& path{stroke: var(--tone)}& .sprout-ground{stroke: var(--line-3)}& .sprout-leaf-r{stroke: var(--violet)}& .sprout-seed{fill: var(--tone)}@media (prefers-reduced-motion: no-preference){& path{stroke-dasharray: 1;stroke-dashoffset: 1;animation: draw 1.4s var(--ease-out) forwards}& .sprout-stem{animation-delay: 0.3s}& .sprout-leaf-l{animation-delay: 0.75s}& .sprout-leaf-r{animation-delay: 0.95s}}}.progress{position: fixed;inset: 0 0 auto;z-index: 60;block-size: 3px;background: var(--aurora);transform-origin: 0 50%}.post-hero .wrap-narrow{display: grid;gap: var(--space-m);& .page-lead{margin: 0}& .label a{color: inherit;text-decoration: none}}.post-heading{font-size: var(--step-4);font-weight: 700;letter-spacing: -0.05em;line-height: 1}.post-byline{display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem 1.25rem;color: var(--ink-3);font-family: var(--font-mono);font-size: var(--step--2);& span{display: inline-flex;align-items: center;gap: 0.4em}}.post-hero .chips{padding: 0;list-style: none}.post-layout{display: grid;gap: var(--space-xl);justify-content: center;grid-template-columns: minmax(0, var(--measure));&.has-toc{@media (min-width: 72rem){grid-template-columns: 15rem minmax(0, var(--measure));justify-content: start;padding-inline-start: max(0rem, (100% - var(--measure) - 15rem - var(--space-xl)) / 2 - 8rem)}}}.post-body{padding-block-end: var(--space-2xl)}.toc{@media (min-width: 72rem){position: sticky;inset-block-start: calc(var(--header-h) + 2rem);align-self: start;max-block-size: calc(100svh - var(--header-h) - 4rem);overflow-y: auto;scrollbar-width: thin}@media (max-width: 71.99rem){padding: var(--space-s);border: 1px solid var(--line);border-radius: var(--r-m)}& ol{display: grid;gap: 0.15rem;margin: 0;padding: 0;list-style: none;scroll-target-group: auto}& a{display: block;padding: 0.3rem 0 0.3rem 0.9rem;border-inline-start: 1px solid var(--line);color: var(--ink-3);font-size: var(--step--1);line-height: 1.4;text-decoration: none;transition: color 0.2s, border-color 0.2s;&:hover{color: var(--ink)}&:is(:target-current, .target-current){border-color: var(--tone);color: var(--tone-ink)}}& .toc-3 a{padding-inline-start: 1.8rem}}.toc-title{margin-block-end: 0.75rem;color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.12em;text-transform: uppercase}.post-nav{display: grid;gap: var(--space-s);padding-block: var(--space-l) var(--space-2xl);border-block-start: 1px solid var(--line);@media (min-width: 40rem){grid-template-columns: 1fr 1fr}}.post-nav-link{display: grid;gap: 0.4rem;padding: var(--space-s) var(--space-m);border: 1px solid var(--line);border-radius: var(--r-m);color: inherit;text-decoration: none;transition: border-color 0.2s, background-color 0.2s;& span{display: inline-flex;align-items: center;gap: 0.4em;color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);text-transform: uppercase;letter-spacing: 0.08em}& b{font-weight: 650;line-height: 1.3}&:hover{border-color: var(--tone-line);background: var(--tone-soft)}}.post-nav-next{grid-column: -2;text-align: end;& span{justify-content: end}}}@keyframes draw{to{stroke-dashoffset: 0}}@layer pages{.contact-section{container-type: inline-size}.contact-grid{display: grid;gap: var(--space-s);@container (width > 50rem){grid-template-columns: repeat(2, minmax(0, 1fr));& .contact-main{grid-row: span 2}}}.contact-card{display: grid;align-content: start;gap: var(--space-xs);padding: var(--space-l);&:hover{border-color: var(--line-2)}& .panel-kind .icon{color: var(--tone)}& .actions{position: relative;z-index: 3;margin-block-start: var(--space-s)}}.contact-main{align-content: end;min-block-size: 20rem;container-type: inline-size;border-color: var(--tone-line);background: radial-gradient(80% 90% at 100% 0%, var(--tone-soft), transparent 60%), linear-gradient(180deg, oklch(1 0 0 / 0.035), oklch(1 0 0 / 0.01))}.contact-email{color: var(--ink);font-size: clamp(1.35rem, 7.4cqi, 3.4rem);font-weight: 700;letter-spacing: -0.05em;line-height: 1.05;overflow-wrap: anywhere;text-decoration: none;background: linear-gradient(var(--tone), var(--tone)) 0 100% / 0 2px no-repeat;transition: background-size 0.5s var(--ease-out);&:hover{background-size: 100% 2px}}.contact-title{font-size: var(--step-2);letter-spacing: -0.04em;& a{color: inherit;text-decoration: none}}.contact-text{max-inline-size: 42ch;color: var(--ink-3);line-height: 1.55}.compose{display: grid;gap: var(--space-m);padding: var(--space-l)}.topic-pick{display: flex;flex-wrap: wrap;gap: 0.4rem;margin: 0;padding: 0;border: 0;& legend{margin-block-end: 0.6rem;color: var(--ink-2);font-size: var(--step--1);font-weight: 600}& label{cursor: pointer;&:has(:checked){border-color: var(--tone-line);background: var(--tone-soft);color: var(--tone-ink)}&:has(:focus-visible){outline: 2px solid var(--tone);outline-offset: 2px}}& input{position: absolute;opacity: 0;pointer-events: none}}.compose-foot{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-s);& .hint{color: var(--ink-4);font-size: var(--step--2)}}}@layer pages{.facts{display: grid;margin: 0;border-block-start: 1px solid var(--line);& div{display: grid;gap: 0.3rem var(--space-m);padding-block: var(--space-s);border-block-end: 1px solid var(--line);@media (min-width: 40rem){grid-template-columns: 13rem 1fr}}& dt{color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: 0.08em;text-transform: uppercase;padding-block-start: 0.2rem}& dd{color: var(--ink-2);line-height: 1.5}& code{font-family: var(--font-mono);color: var(--tone-ink)}}.checks{display: grid;gap: var(--space-l)}.checks-score{display: flex;align-items: center;gap: var(--space-s);font-size: var(--step-1);font-weight: 600;letter-spacing: -0.02em}.checks-ring{--v: 0;position: relative;inline-size: 3.5rem;aspect-ratio: 1;border-radius: 50%;background: conic-gradient(var(--tone) calc(var(--v) * 360deg), var(--line) 0);mask: radial-gradient(closest-side, transparent 72%, #000 74%);@media (scripting: none){display: none}}.check-list{display: grid;grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));gap: 0 var(--space-l);margin: 0;padding: 0;list-style: none}.check{display: grid;grid-template-columns: auto minmax(0, 1fr) auto;align-items: start;gap: var(--space-s);padding-block: var(--space-s);border-block-end: 1px solid var(--line)}.check-state{inline-size: 0.6rem;block-size: 0.6rem;margin-block-start: 0.45rem;border-radius: 50%;background: var(--line-2);transition: background-color 0.4s, box-shadow 0.4s;[data-state="yes"] &{background: var(--green);box-shadow: 0 0 0.75rem oklch(0.87 0.21 145 / 0.6)}[data-state="no"] &{background: oklch(0.8 0.14 75)}}.check-text{display: grid;gap: 0.2rem;& b{font-weight: 650}& span{color: var(--ink-3);font-size: var(--step--1);line-height: 1.5}}.check-label{color: var(--ink-4);font-family: var(--font-mono);font-size: var(--step--2);white-space: nowrap;[data-state="yes"] &{color: var(--green)}[data-state="no"] &{color: oklch(0.85 0.12 75)}}@media (prefers-reduced-motion: no-preference){[data-checked] .check{animation: rise 0.6s var(--ease-out) both;animation-delay: calc(var(--i, 0) * 30ms)}}}@layer pages{.error-page{position: relative;isolation: isolate;display: grid;align-items: center;min-block-size: 100svh;padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-xl);overflow: clip;&::before{content: "";position: absolute;inset: 0;z-index: -2;background: url("/img/terrain.svg") 50% 50% / cover no-repeat;opacity: 0.35;mask-image: radial-gradient(80% 70% at 70% 40%, #000 20%, transparent 75%);filter: grayscale(0.6)}}.error-inner{display: grid;gap: var(--space-m);justify-items: start;container-type: inline-size;& .page-lead{margin: 0}}.error-code{position: absolute;inset: auto 0 -0.08em auto;padding-inline-end: 0.12em;z-index: -1;color: transparent;font-size: clamp(8rem, 38vw, 34rem);font-weight: 800;letter-spacing: -0.08em;line-height: 0.75;-webkit-text-stroke: 1px var(--line-2);user-select: none;pointer-events: none}}@keyframes pulse{to{scale: 3.2;opacity: 0}}@keyframes spin-angle{to{--angle: 360deg}}@keyframes spin{to{rotate: 360deg}}@keyframes marquee{to{translate: -100% 0}}@keyframes drift{from{--drift: 0%}to{--drift: 100%}}@keyframes drawer-backdrop{from{--drawer-backdrop: 0}to{--drawer-backdrop: 1}}@keyframes cue{0%{translate: -50% 0;opacity: 0}30%{opacity: 1}100%{translate: -50% 0.9rem;opacity: 0}}@keyframes rise{from{opacity: 0;translate: 0 1.25rem}}@layer motion{@media (prefers-reduced-motion: no-preference){@view-transition{navigation: auto}.scroll-cue span{animation: cue 2.2s var(--ease-in-out) infinite}.orbit-icons{animation: spin 80s linear infinite;& svg{animation: spin 80s linear infinite reverse}}.panel:hover .orbit-icons, .panel:hover .orbit-icons svg{animation-play-state: paused}.page-hero > .wrap > *{animation: rise 0.9s var(--ease-out) both}.page-hero > .wrap > :nth-child(2){animation-delay: 0.06s}.page-hero > .wrap > :nth-child(3){animation-delay: 0.12s}.page-hero > .wrap > :nth-child(4){animation-delay: 0.18s}.page-hero > .wrap > :nth-child(n + 5){animation-delay: 0.24s}}::view-transition-group(*){animation-duration: 0.55s;animation-timing-function: var(--ease-out)}::view-transition-old(root){animation: 0.32s var(--ease-in-out) both vt-fade-out}::view-transition-new(root){animation: 0.5s var(--ease-out) both vt-fade-in}html:active-view-transition-type(forward){&::view-transition-old(root){animation-name: vt-out-left}&::view-transition-new(root){animation-name: vt-in-right}}html:active-view-transition-type(backward){&::view-transition-old(root){animation-name: vt-out-right}&::view-transition-new(root){animation-name: vt-in-left}}html:active-view-transition-type(deeper){&::view-transition-old(root){animation-name: vt-out-down}&::view-transition-new(root){animation-name: vt-in-up}}html:active-view-transition-type(shallower){&::view-transition-old(root){animation-name: vt-out-up}&::view-transition-new(root){animation-name: vt-in-down}}::view-transition-group(nav-pill){animation-duration: 0.6s;animation-timing-function: var(--ease-spring)}::view-transition-group(.project-title), ::view-transition-group(.project-art){animation-duration: 0.65s;animation-timing-function: cubic-bezier(0.2, 0.9, 0.1, 1)}::view-transition-old(.project-title), ::view-transition-new(.project-title){block-size: 100%;object-fit: contain;object-position: left center}@supports ((animation-timeline: view()) and (animation-range: entry)){@media (prefers-reduced-motion: no-preference){.reveal{animation: rise linear both;animation-timeline: view();animation-range: entry 5% entry 75%}.footer-mark-fill{animation: mark-fill linear both;animation-timeline: view();animation-range: entry 0% entry 100%}.manifesto{view-timeline: --manifesto block;block-size: 260svh;padding-block: 0}.manifesto-sticky{position: sticky;inset-block-start: 0;display: grid;align-items: center;block-size: 100svh}.manifesto-text .w{--p: 0;animation: word-light linear both;animation-timeline: --manifesto;animation-range: contain calc(var(--p) * 1%) contain calc(var(--p) * 1% + 9%)}@supports (order: sibling-index()){.manifesto-text .w{--p: calc((sibling-index() - 1) / sibling-count() * 82)}}@media (min-width: 60rem) and (min-height: 38rem){.rail{view-timeline: --rail block;block-size: 300svh;padding-block: 0}.rail-sticky{position: sticky;inset-block-start: 0;display: grid;grid-template-rows: auto minmax(0, 1fr);grid-template-columns: minmax(0, 1fr);align-content: center;block-size: 100svh;padding-block: calc(var(--header-h) + var(--space-s)) var(--space-l);overflow: clip}.rail-head{inline-size: min(100% - var(--pad) * 2, var(--max))}.rail-track{display: flex;gap: var(--space-m);justify-self: start;inline-size: max-content;block-size: 100%;margin: 0;padding-inline: max(var(--pad), (100vw - var(--max)) / 2);animation: rail-slide linear both;animation-timeline: --rail;animation-range: contain 4% contain 96%}.panel{flex: none;inline-size: min(64rem, 80vw);block-size: 100%;min-block-size: 0}.panel-more{inline-size: min(44rem, 60vw)}.rail-progress{display: block;flex: 1;max-inline-size: 24rem;block-size: 2px;margin-block-end: 0.7rem;border-radius: var(--r-pill);background: var(--line);overflow: clip;& i{display: block;block-size: 100%;background: var(--aurora);transform-origin: 0 50%;animation: grow linear both;animation-timeline: --rail;animation-range: contain 4% contain 96%}}}}}@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)){@media (prefers-reduced-motion: no-preference){.hero-inner{animation: hero-out linear both;animation-timeline: scroll(root);animation-range: 0 85svh}.terrain, .hero::before{animation: terrain-out linear both;animation-timeline: scroll(root);animation-range: 0 100svh}.progress{animation: grow linear both;animation-timeline: scroll(root)}}html{timeline-scope: --footer}.site-footer{view-timeline: --footer}.back-top{animation: back-top linear both, back-top-away linear both;animation-timeline: scroll(root), --footer;animation-range: 90svh 110svh, entry 0% entry 35%}}@supports not ((animation-timeline: scroll()) and (animation-range: 0% 100%)){.progress{display: none}html:has(.site-header[data-scrolled]) .back-top{opacity: 1;scale: 1;pointer-events: auto}}}@keyframes vt-fade-out{to{opacity: 0}}@keyframes vt-fade-in{from{opacity: 0}}@keyframes vt-out-left{to{opacity: 0;translate: -4rem 0}}@keyframes vt-in-right{from{opacity: 0;translate: 4rem 0}}@keyframes vt-out-right{to{opacity: 0;translate: 4rem 0}}@keyframes vt-in-left{from{opacity: 0;translate: -4rem 0}}@keyframes vt-out-down{to{opacity: 0;scale: 0.97}}@keyframes vt-in-up{from{opacity: 0;translate: 0 3rem}}@keyframes vt-out-up{to{opacity: 0;translate: 0 -2rem}}@keyframes vt-in-down{from{opacity: 0;scale: 1.03}}@keyframes mark-fill{from{clip-path: inset(0 100% 0 0)}to{clip-path: inset(0 0 0 0)}}@keyframes word-light{from{opacity: 0.4}60%{color: var(--tone-ink)}to{opacity: 1}}@keyframes rail-slide{to{translate: calc(-100% + 100vw) 0}}@keyframes hero-out{to{opacity: 0;translate: 0 -12svh}}@keyframes terrain-out{to{translate: 0 22svh;scale: 1.06}}@keyframes grow{from{scale: 0 1}}@keyframes back-top{to{opacity: 1;scale: 1;pointer-events: auto}}@keyframes back-top-away{to{translate: 0 calc(100% + 3rem);visibility: hidden}}@layer print{@media print{:root{--bg: #fff;--ink: #000;--ink-2: #222;--ink-3: #444;--ink-4: #666;--line: #ccc;--line-2: #bbb}body{background: #fff;color: #000;&::after{display: none}}.site-header, .drawer, .palette, .toast, .back-top, .skip-link, .terrain, .scroll-cue, .marquee, .footer-mark, .code-copy, .h-anchor, .progress, .toc, .demo, .site-footer .footer-grid{display: none !important}.page-hero, .hero{min-block-size: 0;padding-block: 0 1.5rem;&::before, &::after{display: none !important}}.aurora-text, .wordmark .ch-re{background: none;color: #000}.card{border-color: #ccc;background: none;break-inside: avoid}.prose a[href^="http"]::after{content: " (" attr(href) ")";font-size: 0.85em;color: #555}pre{white-space: pre-wrap}@page{margin: 18mm 16mm}}}.vt-opengram{view-transition-name:project-opengram;view-transition-class:project-title}.vt-art-opengram{view-transition-name:art-opengram;view-transition-class:project-art}.vt-kremlinkernel{view-transition-name:project-kremlinkernel;view-transition-class:project-title}.vt-art-kremlinkernel{view-transition-name:art-kremlinkernel;view-transition-class:project-art}