@layer reset, tokens, base, layout, components, pages, docs, utilities, overrides; @layer reset { * { box-sizing: border-box; margin: 0; } html { background: var(--bg); } } @layer tokens { /* Self-hosted woff2 (OFL). font-display: block — no FOUT on titles/code; preloaded in . */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: block; src: url('assets/fonts/fraunces-latin.woff2') format('woff2'); } @font-face { font-family: 'Commit Mono'; font-style: normal; font-weight: 400; font-display: block; src: url('assets/fonts/commit-mono-400.woff2') format('woff2'); } @font-face { font-family: 'Commit Mono'; font-style: normal; font-weight: 500; font-display: block; src: url('assets/fonts/commit-mono-500.woff2') format('woff2'); } @font-face { font-family: 'Commit Mono'; font-style: normal; font-weight: 700; font-display: block; src: url('assets/fonts/commit-mono-700.woff2') format('woff2'); } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: block; src: url('assets/fonts/caveat-latin.woff2') format('woff2'); } :root { color-scheme: dark; --bg: #141414; --panel: #0b0c0c; --panel-raised: #101111; --fg: #faf9f6; --soft: #d8d6cf; --dim: #a09e95; --fg-muted: rgb(250 249 246 / 0.7); --line: #30302d; --line-strong: #4a4944; --line-muted: rgb(250 249 246 / 0.06); --accent: #34e2ea; --accent-soft: rgb(52 226 234 / 0.12); --accent-surface-subtle: rgb(52 226 234 / 0.06); --accent-surface: rgb(52 226 234 / 0.10); --accent-border-muted: rgb(52 226 234 / 0.22); --accent-border: rgb(52 226 234 / 0.45); --accent-fill-soft: rgb(52 226 234 / 0.16); --accent-glow: rgb(52 226 234 / 0.55); --warning: #efc34a; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --mono: 'Commit Mono', ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --font-serif: 'Fraunces', ui-serif, Georgia, "Times New Roman", serif; --font-hand: 'Caveat', "Segoe Print", cursive; --grid-cell: 44px; --text-xs: 0.7rem; --text-sm: 0.78rem; --text-base: 17px; --text-lg: 1.3rem; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-hero: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --radius-sm: 5px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --shadow-panel: 0 28px 80px rgb(0 0 0 / 0.35); --shadow-raised: inset 0 1px 0 rgb(255 255 255 / 0.045), 0 28px 80px rgb(0 0 0 / 0.35); --inactive-title: 0.5; --inactive-body: 0.34; --z-skip: 20; --z-control: 10; } } @layer base { body { min-width: 320px; overflow-x: clip; /* html provides the opaque --bg base (reset layer). body stays transparent so the fixed body::before grid and body::after spine (z-index:-1) paint above html's background instead of being covered by an opaque body layer. */ background: radial-gradient(circle at 50% 8%, var(--accent-surface-subtle), transparent 28rem); color: var(--fg); font: 17px/1.7 var(--sans); font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; background-image: linear-gradient(rgb(250 249 246 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(250 249 246 / 0.06) 1px, transparent 1px); background-size: var(--grid-cell) var(--grid-cell); } /* twotimespi.dev fold-in: the notebook margin line, translated to splice cyan. */ body::after { position: fixed; top: 0; bottom: 0; left: calc(var(--grid-cell) * 2); z-index: -1; width: 2px; pointer-events: none; content: ""; background: linear-gradient(to bottom, transparent, rgb(52 226 234 / 0.42) 12%, rgb(52 226 234 / 0.42) 88%, transparent); } @media (max-width: 800px) { body::after { content: none; } } ::selection { background: var(--accent); color: var(--bg); } a { color: var(--fg); text-decoration-color: var(--dim); text-underline-offset: 3px; transition: color 180ms ease, text-decoration-color 180ms ease; } a:hover { color: var(--accent); text-decoration-color: var(--accent); } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } button { color: inherit; } code, pre { font-family: var(--mono); } img { display: block; max-width: 100%; height: auto; } .skip { position: fixed; left: 1rem; top: 0.6rem; z-index: var(--z-skip); padding: 0.4rem 0.8rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); transform: translateY(-300%); transition: transform 150ms ease; } .skip:focus-visible { transform: none; } } @layer utilities { .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } @layer layout { .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.35rem; padding: clamp(4rem, 8vh, 6rem) 2rem; text-align: center; isolation: isolate; } .story { max-width: 760px; margin: 0 auto; padding: 0 2rem; } .story-stage-wrap { display: none; } .story-copy { min-width: 0; } .story-step { scroll-margin-top: 2rem; padding: clamp(4.5rem, 10vw, 7rem) 0; } .stage-shell { position: relative; width: 100%; min-height: min(72svh, 690px); display: grid; place-items: center; } .scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; pointer-events: none; filter: blur(8px); clip-path: inset(3% round 12px); transform: translateY(24px) scale(0.975); transition: opacity 380ms ease, visibility 380ms step-end, filter 420ms ease, clip-path 620ms var(--ease-out), transform 620ms var(--ease-out); } .scene.is-active { opacity: 1; visibility: visible; pointer-events: auto; filter: blur(0); clip-path: inset(0 round 10px); transform: translateY(0) scale(1); transition-timing-function: ease, step-start, ease, var(--ease-out), var(--ease-out); } .scene > * { width: min(100%, 880px); } .finale { min-height: 92svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.35rem; padding: 6rem 2rem; border-top: 1px solid var(--line); text-align: center; } footer { min-height: 88px; display: flex; align-items: center; justify-content: center; gap: 0.9rem; padding: 1.5rem 2rem; border-top: 1px solid var(--line); color: var(--dim); font: 0.82rem var(--mono); } } @layer components { /* Hero identity */ .hero-title { line-height: 1; } .hero-mark { display: block; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: scale 140ms var(--ease-out), filter 240ms ease; } .hero-mark:hover:not(:disabled) { filter: brightness(1.08); } .hero-mark:active:not(:disabled) { scale: 0.96; } .hero-mark:disabled { cursor: default; } .hero-logo { display: block; width: min(480px, 80vw); height: auto; } .logo-comet { will-change: stroke-dashoffset, opacity; } .hero-promise { max-width: 32ch; color: var(--soft); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.5; text-wrap: balance; } .install { position: relative; max-width: 100%; min-width: min(380px, 100%); display: flex; flex-direction: column; gap: 0.4rem; padding: 0.45rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: rgb(11 12 12 / 0.72); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 18px 50px rgb(0 0 0 / 0.18); } .install-tabs { position: relative; display: flex; gap: 0.2rem; } .install-tab { position: relative; z-index: 1; min-height: 44px; padding: 0.3rem 0.7rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--dim); font: 0.75rem var(--mono); cursor: pointer; transition: color 180ms ease; } .install-tab:hover { color: var(--soft); } .install-tab[aria-selected="true"] { color: var(--accent); } .install-tabs::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--indicator-w, 0); transform: translateX(var(--indicator-x, 0)); background: var(--accent-soft); border: 1px solid var(--accent-border-muted); border-radius: var(--radius-sm); z-index: 0; pointer-events: none; } .install-tabs.is-ready::after { transition: transform 320ms var(--ease-out), width 320ms var(--ease-out); } .install-cmd { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgb(0 0 0 / 0.3); } .install-cmd code { min-width: 0; flex: 1; overflow-x: auto; white-space: nowrap; color: var(--accent); font-size: 0.82rem; scrollbar-width: thin; } .copy, .replay { min-height: 44px; padding: 0.3rem 0.7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--dim); font: 0.75rem var(--mono); cursor: pointer; transition: color 180ms ease, border-color 180ms ease, scale 120ms ease; } .copy:hover, .replay:hover { color: var(--accent); border-color: var(--accent); } .copy:active, .replay:active { scale: 0.96; } .hero-links, .final-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; font: 0.84rem var(--mono); } .hero-links a, .final-links a { min-height: 44px; display: inline-flex; align-items: center; } .scroll-cue { position: absolute; bottom: 1.4rem; display: grid; justify-items: center; gap: 0.45rem; color: var(--dim); font: 0.72rem var(--mono); text-decoration: none; } .scroll-cue i { width: 1px; height: 28px; background: linear-gradient(var(--accent), transparent); transform-origin: top; } .motion-toggle { position: fixed; top: 0.75rem; right: 0.75rem; z-index: var(--z-control); min-width: 104px; min-height: 44px; padding: 0.45rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgb(20 20 20 / 0.94); color: var(--soft); font: 0.75rem var(--mono); cursor: pointer; transition: color 180ms ease, border-color 180ms ease, scale 120ms ease; } .motion-toggle:hover { color: var(--accent); border-color: var(--accent); } .motion-toggle:active { scale: 0.96; } /* Story copy */ .story-step h2, .finale h2 { margin-bottom: 1rem; font-family: var(--font-serif); font-optical-sizing: auto; font-size: clamp(2rem, 4.5vw, 3.8rem); font-weight: 650; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; } .story-step > p:not(.story-index, .story-sequence, .provider-line, .policy-line), .finale > p { max-width: 58ch; color: var(--soft); text-wrap: pretty; } .story-index { margin-bottom: 1rem; color: var(--accent); font: 600 1.15rem/1 var(--font-hand); letter-spacing: 0.01em; } .story-sequence, .policy-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin-top: 1.4rem; color: var(--soft); font: 0.82rem var(--mono); } .story-sequence i, .policy-line i { color: var(--accent); font-style: normal; } .policy-line strong { padding: 0.18rem 0.45rem; background: var(--accent); color: var(--bg); font-weight: 700; } .provider-line { margin-top: 1.4rem; color: var(--dim); font: 0.8rem/1.8 var(--mono); } .stage-list, .claim-list { margin-top: 1.35rem; padding: 0; list-style: none; color: var(--dim); font: 0.82rem var(--mono); } .stage-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .stage-list li { padding: 0.2rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); } .claim-list { display: grid; gap: 0.45rem; } .claim-list li::before { margin-right: 0.55rem; color: var(--accent); content: "↳"; } .interface-lines { display: grid; gap: 1rem; margin-top: 1.4rem; } .interface-lines p { display: grid; gap: 0.25rem; } .interface-lines code { width: fit-content; color: var(--accent); } .interface-lines span { color: var(--dim); font-size: 0.9rem; } .story-fallback { margin-top: 2rem; } .story-fallback img { width: 100%; outline: 1px solid rgb(255 255 255 / 0.1); background: var(--panel); } .story-fallback figcaption { margin-top: 0.7rem; color: var(--dim); font: 500 1.02rem/1.3 var(--font-hand); } .fallback-pipeline { display: grid; gap: 0.5rem; padding: 0; counter-reset: stage; list-style: none; color: var(--soft); font: 0.84rem var(--mono); } .fallback-pipeline li { display: flex; align-items: center; gap: 0.75rem; } .fallback-pipeline li::before { color: var(--accent); counter-increment: stage; content: counter(stage, decimal-leading-zero); } .fallback-decision { display: grid; gap: 0.7rem; } .fallback-decision code { padding: 0.75rem 0.9rem; border: 1px solid var(--line); background: var(--panel); color: var(--soft); overflow-x: auto; } /* Sticky product stage chrome */ .scene-rail { position: absolute; left: 0; z-index: 2; display: grid; gap: 0.15rem; } .scene-rail a { position: relative; min-width: 44px; min-height: 44px; display: flex; align-items: center; gap: 0.6rem; color: var(--dim); font: 0.68rem var(--mono); text-decoration: none; } .scene-rail a::before { width: 20px; height: 1px; background: var(--line-strong); content: ""; transform: scaleX(0.5); transform-origin: left; transition: transform 260ms var(--ease-out), background 180ms ease; } .scene-rail a span { display: none; } .scene-rail a b { position: absolute; left: 1.7rem; opacity: 0; font-weight: 500; white-space: nowrap; transform: translateX(-4px); transition: opacity 180ms ease, transform 260ms var(--ease-out); } .scene-rail a[aria-current="step"] b { opacity: 1; transform: translateX(0); } @media (hover: hover) and (pointer: fine) { .scene-rail a:hover b { opacity: 1; transform: translateX(0); } } .scene-rail a[aria-current="step"] { color: var(--accent); } .scene-rail a[aria-current="step"]::before { background: var(--accent); transform: scaleX(1); } .stage-footer { position: absolute; left: 3rem; right: 0; bottom: 0.4rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--dim); font: 0.7rem var(--mono); } .stage-footer b { color: var(--soft); font-weight: 500; } /* Frames — terminal, annotated still, diagram — with corner-notch blueprint motif */ .terminal-frame, .annotated-still, .diagram-frame { position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background-color: var(--panel); box-shadow: var(--shadow-raised); } /* ponytail: corner brackets via 8 linear-gradients on an overlay pseudo; pointer-events:none so the replay button stays clickable even where the TR bracket sits near it. Visual tuning pending a browser pass. */ .terminal-frame::after, .annotated-still::after, .diagram-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background-image: linear-gradient(var(--accent-border-muted), var(--accent-border-muted)), linear-gradient(var(--accent-border-muted), var(--accent-border-muted)), linear-gradient(var(--accent-border-muted), var(--accent-border-muted)), linear-gradient(var(--accent-border-muted), var(--accent-border-muted)), linear-gradient(var(--accent-border-muted), var(--accent-border-muted)), linear-gradient(var(--accent-border-muted), var(--accent-border-muted)), linear-gradient(var(--accent-border-muted), var(--accent-border-muted)), linear-gradient(var(--accent-border-muted), var(--accent-border-muted)); background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px; background-position: left 12px top 12px, left 12px top 12px, right 12px top 12px, right 12px top 12px, left 12px bottom 12px, left 12px bottom 12px, right 12px bottom 12px, right 12px bottom 12px; background-repeat: no-repeat; } .terminal-frame img, .annotated-still img { width: 100%; background: #070708; outline: 1px solid rgb(255 255 255 / 0.1); outline-offset: -1px; } .frame-bar { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0.85rem 0 1rem; border-bottom: 1px solid var(--line); color: var(--dim); font: 0.7rem var(--mono); letter-spacing: 0.055em; text-transform: uppercase; } .frame-bar .replay { min-height: 44px; } /* Pipeline scene */ .diagram-frame { padding-bottom: 0.5rem; } .pipe { display: block; width: 100%; height: auto; padding: clamp(1rem, 3vw, 2rem); } .pipe-path { stroke: var(--line-strong); stroke-width: 1.5; } .pipe-arrows path { fill: #6d6a61; } .pipe-pulse { fill: var(--accent); filter: drop-shadow(0 0 5px var(--accent-glow)); } .pnode rect { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1; transition: stroke 180ms ease, fill 180ms ease; } .pnode text { fill: var(--soft); font: 13px var(--mono); text-anchor: middle; dominant-baseline: central; transition: fill 180ms ease; } .pipe-complete { opacity: 0; transition: opacity 240ms ease; } .pipe-complete circle { fill: var(--accent); } .pipe-complete path { fill: none; stroke: var(--bg); stroke-width: 2; } .pipe-complete text { fill: var(--accent); font: 12px var(--mono); } .pipeline-frame.is-complete .pipe-path { stroke: var(--accent); } .pipeline-frame.is-complete .pipe-complete { opacity: 1; } .pipeline-frame.is-complete .stage-status { color: var(--accent); } /* Annotated stills */ .still-canvas { position: relative; } .annotation { position: absolute; display: inline-flex; align-items: center; min-height: 30px; padding: 0.28rem 0.55rem; border: 1px solid rgb(52 226 234 / 0.55); border-radius: var(--radius-sm); background: rgb(11 12 12 / 0.94); color: var(--accent); font: 500 1.02rem/1.2 var(--font-hand); letter-spacing: 0.01em; box-shadow: 0 8px 24px rgb(0 0 0 / 0.35); } .annotation::after { position: absolute; width: 28px; height: 1px; background: var(--accent); content: ""; } .annotation-tr { top: 12%; right: 3%; } .annotation-tr::after { right: 100%; } .annotation-tl { top: 11%; left: 3%; } .annotation-tl::after { left: 100%; } .annotation-bl { bottom: 8%; left: 3%; } .annotation-bl::after { left: 100%; } .annotation-br { right: 3%; bottom: 8%; } .annotation-br::after { right: 100%; } .annotation-ml { top: 55%; left: 3%; } .annotation-ml::after { left: 100%; } .annotated-still > figcaption { padding: 0.75rem 1rem; color: var(--dim); font: 500 1.02rem/1.3 var(--font-hand); } /* Trajectory state diagram */ .trajectory-frame { padding-bottom: 1rem; } .decision-diagram { padding: clamp(1.25rem, 4vw, 3rem); } .decision-main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; } .decision-node { min-height: 104px; display: grid; place-content: center; gap: 0.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel-raised); text-align: center; transition: border-color 220ms ease, background 220ms ease, transform 420ms var(--ease-out); } .decision-node b { font: 0.9rem var(--mono); } .decision-node span { color: var(--dim); font: 0.7rem var(--mono); } .decision-arrow { color: var(--accent); font-style: normal; } .decision-branches { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; margin-top: 1rem; } .decision-branch { min-height: 96px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.55rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--dim); text-align: center; transition: opacity 220ms ease, border-color 220ms ease, background 220ms ease, transform 420ms var(--ease-out); } .decision-branch span { flex-basis: 100%; font: 0.68rem var(--mono); } .decision-branch b, .decision-branch strong { font: 0.84rem var(--mono); } .decision-branch i { font-style: normal; } .decision-outcome { margin-top: 1.2rem; color: var(--soft); font: 0.78rem var(--mono); text-align: center; } .decision-diagram[data-signal="progress"] .branch-continue, .decision-diagram:not([data-signal="progress"]) .branch-stop { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); transform: translateY(-3px); } .decision-diagram[data-signal="progress"] .branch-stop, .decision-diagram:not([data-signal="progress"]) .branch-continue { opacity: 0.38; } .signal-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding: 0 1rem; } .signal-controls button { min-height: 44px; padding: 0.45rem 0.7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--dim); font: 0.7rem var(--mono); cursor: pointer; transition: color 180ms ease, border-color 180ms ease, background 180ms ease, scale 120ms ease; } .signal-controls button:hover { color: var(--soft); border-color: var(--soft); } .signal-controls button:active { scale: 0.96; } .signal-controls button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } /* Finale */ .finale h2 { max-width: 14ch; margin-bottom: 0; } .finale > p { max-width: 42ch; } .final-links { margin-top: 0.4rem; } } @layer pages { @media (min-width: 901px) { html.story-ready .story { max-width: 1500px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.65fr); gap: clamp(3rem, 7vw, 8rem); padding: 0 clamp(2.5rem, 5vw, 5.5rem); } html.story-ready .story-stage-wrap { display: block; min-width: 0; } html.story-ready .story-fallback { display: none; } html.story-ready .story-stage { position: sticky; top: 1rem; height: calc(100svh - 2rem); display: grid; align-items: center; padding-left: 3rem; } html.story-ready .story-step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 14svh 0; transform: translateY(18px); transition: transform 560ms var(--ease-out); } html.story-ready .story-step > * { opacity: var(--inactive-body); transition: opacity 360ms ease; } html.story-ready .story-step > h2 { opacity: var(--inactive-title); } html.story-ready .story-step.is-active { transform: translateY(0); } html.story-ready .story-step.is-active > * { opacity: 1; } } @media (max-width: 1120px) and (min-width: 901px) { html.story-ready .story { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: 3rem; padding-inline: 2rem; } html.story-ready .story-stage { padding-left: 2rem; } .stage-footer { left: 2rem; } .scene-rail a b { display: none; } } @media (max-width: 900px) { .story { padding-inline: 1.25rem; } .story-step { padding-block: 5rem; } .story-step + .story-step { border-top: 1px solid var(--line); } .story-step h2 { font-size: clamp(2rem, 9vw, 3.2rem); } .story-index { margin-bottom: 0.75rem; } .story-fallback { margin-top: 1.7rem; } .annotation { font-size: 0.6rem; } } @media (max-width: 640px) { body { font-size: 16px; } .hero { gap: 1.15rem; padding-inline: 1.1rem; } .hero::before { width: 92vw; } .hero-logo { width: min(88vw, 420px); } .motion-toggle { top: 0.55rem; right: 0.55rem; } .install { width: 100%; max-width: 390px; } .hero-links { gap: 1.2rem; } .scroll-cue { bottom: 1rem; } .story { padding-inline: 1rem; } .story-step { padding-block: 4.5rem; } .stage-list { gap: 0.35rem; } .stage-list li { font-size: 0.72rem; } .annotation { display: none; } .story-fallback figcaption { display: block; } .finale { min-height: 84svh; padding-inline: 1rem; } .finale h2 { font-size: clamp(2.2rem, 11vw, 3.4rem); } } } @layer docs { .docs-body { background: radial-gradient(circle at 22% 5%, var(--accent-surface-subtle), transparent 26rem), var(--bg); } .docs-width { width: min(1460px, calc(100% - 2.5rem)); margin-inline: auto; } .docs-topbar { position: sticky; top: 0; z-index: var(--z-control); min-height: 64px; border-bottom: 1px solid var(--line); background: rgb(20 20 20 / 0.96); } .docs-topbar-inner { width: min(1460px, calc(100% - 2.5rem)); min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-inline: auto; } .docs-brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--fg); font-weight: 700; line-height: 1; text-decoration: none; } .docs-brand img { flex: 0 0 auto; } .docs-toplinks { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); font: 0.78rem var(--mono); white-space: nowrap; } .docs-toplinks a { min-height: 44px; display: inline-flex; align-items: center; color: var(--dim); text-decoration: none; } .docs-toplinks a:hover, .docs-toplinks a[aria-current] { color: var(--accent); } .docs-hero { padding-block: clamp(4rem, 8vw, 6rem) clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); } .docs-hero .docs-width { max-width: 1460px; } .docs-label { margin-bottom: 1rem; color: var(--accent); font: 0.78rem var(--mono); } .docs-hero h1 { max-width: 13ch; font-family: var(--font-serif); font-optical-sizing: auto; font-size: clamp(2.65rem, 6vw, 5.25rem); font-weight: 650; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; } .docs-hero p:last-child { max-width: 62ch; margin-top: 1.4rem; color: var(--soft); font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.6; text-wrap: pretty; } .docs-mobile-tools { display: none; } .docs-layout { display: grid; grid-template-columns: 210px minmax(0, 760px) 180px; justify-content: space-between; gap: clamp(2.5rem, 5vw, 5.5rem); padding-block: 3.5rem 7rem; } .docs-sidebar, .docs-toc { min-width: 0; } .docs-side-nav, .docs-toc > * { position: sticky; top: 5.5rem; } .docs-side-nav { display: grid; gap: 2rem; } .docs-side-nav section { display: grid; gap: 0.18rem; } .docs-side-nav h2, .docs-toc > p { margin-bottom: 0.45rem; color: var(--soft); font: 500 0.72rem var(--mono); } .docs-side-nav a, .docs-toc a { display: block; padding: 0.38rem 0.55rem; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--dim); font-size: 0.78rem; line-height: 1.35; text-decoration: none; } .docs-side-nav a:hover, .docs-toc a:hover { color: var(--fg); } .docs-toc { position: relative; color: var(--dim); } .docs-toc nav { position: sticky; top: 7.4rem; display: grid; gap: 0.08rem; } .docs-toc > p { position: sticky; top: 5.5rem; } .docs-content { min-width: 0; counter-reset: docs-step; } .docs-section { scroll-margin-top: 5.5rem; padding-bottom: clamp(4.5rem, 8vw, 7rem); } .docs-section + .docs-section { padding-top: clamp(4.5rem, 8vw, 7rem); border-top: 1px solid var(--line); } .docs-section h2 { max-width: 18ch; margin-bottom: 1.2rem; font-family: var(--font-serif); font-optical-sizing: auto; font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 650; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; } .docs-section h3 { margin-block: 2.6rem 0.75rem; color: var(--fg); font-size: 1.05rem; line-height: 1.3; } .docs-section p, .docs-section li, .docs-section dd { max-width: 68ch; color: var(--soft); } .docs-section p + p { margin-top: 1rem; } .docs-section p + .docs-code, .docs-section .docs-code + p, .docs-section p + .docs-table-wrap, .docs-section .docs-table-wrap + p, .docs-section p + .docs-flow, .docs-section p + .docs-mode-list, .docs-section p + .docs-check-list, .docs-section p + .docs-link-row, .docs-section p + .docs-reference-list { margin-top: 1.5rem; } .docs-section a:not(.docs-link-row a, .docs-reference-list a, .docs-next a) { color: var(--fg); text-decoration-color: var(--accent-border); text-decoration-thickness: from-font; text-underline-position: from-font; } .docs-lead { color: var(--fg) !important; font-size: 1.08rem; line-height: 1.65; } .docs-section :not(pre) > code { padding: 0.08rem 0.28rem; border: 1px solid var(--line); border-radius: 4px; background: rgb(0 0 0 / 0.22); color: var(--accent); font-size: 0.9em; overflow-wrap: break-word; } .docs-code { max-width: 100%; padding: 1rem 1.15rem; overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel); color: var(--soft); font: 0.82rem/1.75 var(--mono); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.035); tab-size: 2; } .docs-code span { color: var(--accent); user-select: none; } .docs-note { max-width: 100% !important; padding: 0.9rem 1rem; border: 1px solid var(--accent-border-muted); border-radius: var(--radius-md); background: var(--accent-surface-subtle); font-size: 0.9rem; } .docs-note strong { color: var(--accent); } .docs-steps { display: grid; gap: 0; margin-top: 2rem; padding: 0; list-style: none; } .docs-steps li { position: relative; display: grid; grid-template-columns: minmax(10rem, 0.6fr) 1fr; gap: 1.25rem; padding: 1.1rem 0 1.1rem 2.7rem; border-bottom: 1px solid var(--line); counter-increment: docs-step; } .docs-steps li::before { position: absolute; inset-inline-start: 0; top: 1.15rem; color: var(--accent); font: 0.74rem var(--mono); content: counter(docs-step, decimal-leading-zero); } .docs-steps strong { color: var(--fg); } .docs-steps span { color: var(--dim); } .docs-command-sequence { display: grid; margin-block: 2rem; border-top: 1px solid var(--line-strong); } .docs-command-sequence div { display: grid; grid-template-columns: minmax(10rem, 0.7fr) 1fr; gap: 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--line); } .docs-command-sequence code { color: var(--accent); } .docs-command-sequence span { color: var(--dim); } .docs-flow { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; list-style: none; } .docs-flow li { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--soft); font: 0.75rem var(--mono); } .docs-flow li:not(:last-child)::after { color: var(--accent); content: "→"; } .docs-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-md); } .docs-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .docs-table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--panel); font-size: 0.84rem; } .docs-table-wrap caption { padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); color: var(--dim); font: 0.72rem var(--mono); text-align: start; } .docs-table-wrap th, .docs-table-wrap td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; } .docs-table-wrap tr:last-child th, .docs-table-wrap tr:last-child td { border-bottom: 0; } .docs-table-wrap thead th { color: var(--dim); font: 500 0.7rem var(--mono); } .docs-table-wrap tbody th { width: 25%; font-weight: 500; } .docs-table-wrap tbody td { color: var(--soft); } .docs-mode-list { display: grid; border-top: 1px solid var(--line-strong); } .docs-mode-list > div { display: grid; grid-template-columns: minmax(9rem, 0.45fr) 1fr; gap: 1.5rem; padding-block: 1.2rem; border-bottom: 1px solid var(--line); } .docs-mode-list dt code { color: var(--accent); } .docs-mode-list dd { display: grid; gap: 0.2rem; } .docs-mode-list dd strong { color: var(--fg); } .docs-mode-list dd span { color: var(--dim); } .docs-check-list { display: grid; gap: 0.7rem; padding: 0; list-style: none; } .docs-check-list li { position: relative; padding-inline-start: 1.5rem; } .docs-check-list li::before { position: absolute; inset-inline-start: 0; color: var(--accent); content: "✓"; } .docs-link-row, .docs-reference-list { display: grid; border-top: 1px solid var(--line-strong); } .docs-link-row a, .docs-reference-list a { position: relative; display: grid; grid-template-columns: minmax(11rem, 0.55fr) 1fr auto; gap: 1.25rem; align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; } .docs-link-row a::after, .docs-reference-list a::after { color: var(--accent); content: "↗"; } .docs-link-row span, .docs-reference-list span { color: var(--dim); font-size: 0.86rem; } .docs-link-row a:hover strong, .docs-reference-list a:hover strong { color: var(--accent); } .docs-next { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 3rem; padding: 1.2rem 1.25rem; border: 1px solid var(--accent-border-muted); border-radius: var(--radius-md); background: var(--accent-surface-subtle); } .docs-next p { margin: 0; } .docs-next strong { color: var(--fg); } .docs-next a { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); font: 0.76rem var(--mono); } .docs-footer { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem max(1.25rem, calc((100vw - 1460px) / 2)); border-top: 1px solid var(--line); color: var(--dim); font: 0.76rem var(--mono); } .docs-reference-layout { padding-top: clamp(2.5rem, 5vw, 4.5rem); } .docs-side-nav { max-height: calc(100vh - 7rem); padding-inline-end: 0.35rem; overflow-y: auto; scrollbar-width: thin; } .docs-side-nav a[aria-current="page"] { border-color: var(--accent-border-muted); background: var(--accent-surface-subtle); color: var(--accent); } .docs-page-header { padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); } .docs-page-header h1 { max-width: 14ch; margin-bottom: 1.25rem; font-family: var(--font-serif); font-optical-sizing: auto; font-size: clamp(3rem, 6vw, 5.4rem); font-weight: 650; line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; } .docs-page-header > p:not(.docs-label) { max-width: 62ch; color: var(--soft); font-size: clamp(1rem, 2vw, 1.16rem); line-height: 1.65; } .docs-source-meta { display: flex; flex-wrap: wrap; gap: 0.65rem 1.25rem; margin-top: 1.5rem; color: var(--dim); font: 0.72rem var(--mono); } .docs-source-meta a { color: var(--accent); text-underline-position: from-font; } .docs-prose { padding-top: clamp(2.5rem, 5vw, 4rem); } .docs-prose h2, .docs-prose h3, .docs-prose h4 { scroll-margin-top: 5.5rem; } .docs-prose h2 { max-width: 22ch; margin-block: clamp(4rem, 8vw, 6rem) 1.15rem; font-family: var(--font-serif); font-optical-sizing: auto; font-size: clamp(2rem, 4vw, 3rem); font-weight: 650; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; } .docs-prose h3 { margin-block: 2.8rem 0.85rem; color: var(--fg); font-size: 1.08rem; line-height: 1.35; } .docs-prose h4 { margin-block: 2rem 0.7rem; color: var(--fg); font-size: 0.95rem; } .docs-prose > h2:first-child, .docs-prose > h3:first-child { margin-top: 0; } .docs-prose p, .docs-prose li { max-width: 72ch; color: var(--soft); line-height: 1.72; } .docs-prose p + p { margin-top: 1rem; } .docs-prose ul, .docs-prose ol { display: grid; gap: 0.5rem; margin-block: 1.15rem; padding-inline-start: 1.35rem; } .docs-prose li::marker { color: var(--accent); } .docs-prose strong { color: var(--fg); } .docs-prose a { color: var(--fg); text-decoration-color: var(--accent-border); text-decoration-thickness: from-font; text-underline-position: from-font; } .docs-prose :not(pre) > code { padding: 0.08rem 0.28rem; border: 1px solid var(--line); border-radius: 4px; background: rgb(0 0 0 / 0.22); color: var(--accent); font-size: 0.9em; overflow-wrap: anywhere; } .docs-prose pre { max-width: 100%; margin-block: 1.5rem; padding: 1rem 1.15rem; overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel); color: var(--soft); font: 0.82rem/1.75 var(--mono); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.035); tab-size: 2; } .docs-prose pre code { color: inherit; font: inherit; } .docs-prose .docs-table-wrap { margin-block: 1.5rem; } .docs-prose .docs-note { margin-top: 2rem; color: var(--soft); line-height: 1.65; } .docs-prose blockquote { margin-block: 1.5rem; padding-inline-start: 1rem; border-inline-start: 2px solid var(--accent-border); } .docs-prose blockquote p { color: var(--dim); } .docs-prose hr { margin-block: 3rem; border: 0; border-top: 1px solid var(--line); } .docs-page-toc nav { max-height: calc(100vh - 9rem); overflow-y: auto; scrollbar-width: thin; } .docs-page-toc a.is-subsection { padding-inline-start: 1.25rem; font-size: 0.72rem; } .docs-page-toc nav > span { padding: 0.38rem 0.55rem; color: var(--dim); font-size: 0.76rem; } .docs-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(4rem, 8vw, 7rem); padding-top: 2rem; border-top: 1px solid var(--line); } .docs-pagination a { min-height: 88px; display: flex; flex-direction: column; justify-content: center; padding: 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); color: var(--fg); text-decoration: none; } .docs-pagination a:last-child { text-align: end; } .docs-pagination span { color: var(--dim); font: 0.7rem var(--mono); } .docs-pagination strong { margin-top: 0.3rem; font-size: 0.9rem; } .docs-pagination a:hover { border-color: var(--accent-border-muted); } @media (max-width: 1120px) { .docs-layout { grid-template-columns: 200px minmax(0, 760px); justify-content: start; } .docs-toc { display: none; } } @media (max-width: 800px) { .docs-width, .docs-topbar-inner { width: min(100% - 2rem, 760px); } .docs-hero { padding-block: 4rem 3.5rem; } .docs-mobile-tools { display: block; padding-block: 1rem 0; } .docs-mobile-nav { border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel); } .docs-mobile-nav summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0.9rem; color: var(--soft); font: 0.78rem var(--mono); cursor: pointer; } .docs-mobile-nav summary::after { width: 0.75rem; height: 0.75rem; flex: 0 0 0.75rem; background: linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 1px 100% no-repeat; content: ""; } .docs-mobile-nav[open] summary::after { background: linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat; } .docs-mobile-nav nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem; padding: 0.3rem 0.6rem 0.75rem; border-top: 1px solid var(--line); } .docs-mobile-nav a { min-height: 44px; display: flex; align-items: center; padding: 0.35rem; color: var(--dim); font-size: 0.8rem; text-decoration: none; } .docs-mobile-nav a[aria-current="page"] { color: var(--accent); } .docs-layout { display: block; padding-top: 2rem; } .docs-sidebar { display: none; } .docs-section { scroll-margin-top: 4.5rem; } } @media (max-width: 600px) { .docs-toplinks { gap: 0.8rem; font-size: 0.72rem; } .docs-toplinks a:first-child { color: var(--accent); } .docs-hero h1 { font-size: clamp(2.45rem, 13vw, 3.6rem); } .docs-steps li, .docs-command-sequence div, .docs-mode-list > div, .docs-link-row a, .docs-reference-list a { grid-template-columns: 1fr; gap: 0.35rem; } .docs-link-row a, .docs-reference-list a { padding-inline-end: 1.8rem; } .docs-link-row a::after, .docs-reference-list a::after { position: absolute; inset-inline-end: 0; top: 1rem; } .docs-flow { gap: 0.35rem 0.45rem; } .docs-page-header h1 { font-size: clamp(2.7rem, 13vw, 4rem); } .docs-source-meta { align-items: flex-start; flex-direction: column; } .docs-pagination { grid-template-columns: 1fr; } .docs-pagination a:last-child { text-align: start; } .docs-next { align-items: flex-start; flex-direction: column; } .docs-footer { align-items: flex-start; flex-direction: column; } } } @layer overrides { @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } .scroll-cue i { animation: cue 1.8s var(--ease-out) infinite; } @keyframes cue { 0%, 100% { opacity: 0.35; transform: scaleY(0.45); } 45% { opacity: 1; transform: scaleY(1); } } } html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after { animation-play-state: paused !important; transition-duration: 0.01ms !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .scroll-cue i { transform: none; } .scene { filter: none; transform: none; clip-path: none; } } }