@import"https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap";:root{--void-bg-base: #0a0a0a;--void-bg-elevated: #111111;--void-bg-overlay: #1a1a1a;--void-border: #2a2a2a;--void-border-strong: #3a3a3a;--void-text-primary: #f0f0f0;--void-text-muted: #888888;--void-text-disabled: #444444;--void-accent: #c160ef;--void-accent-hover: #d175ff;--void-accent-glow: rgba(193, 96, 239, .2);--void-destructive: #ef4444;--void-shadow: #3a3a3a;--void-radius: 0px;--void-font-mono: "Kode Mono", monospace;--void-font-size-display: 48px;--void-font-size-hl: 32px;--void-font-size-hm: 24px;--void-font-size-body-lg: 18px;--void-font-size-body: 16px;--void-font-size-label: 14px;--void-font-size-label-sm: 12px;--void-space-xs: 4px;--void-space-sm: 8px;--void-space-md: 16px;--void-space-lg: 24px;--void-space-xl: 48px;--void-duration-fast: .1s;--void-duration-base: .2s;--void-duration-slow: .35s;--void-ease-out: cubic-bezier(.16, 1, .3, 1);--void-ease-in-out: cubic-bezier(.4, 0, .2, 1)}@media (prefers-reduced-motion: reduce){:root{--void-duration-fast: 0ms;--void-duration-base: 0ms;--void-duration-slow: 0ms}}*,*:before,*:after{box-sizing:border-box}:root{--rail-out: 1rem;--inset: 2rem;--pad: 1.5rem;--hatch: repeating-linear-gradient(-45deg, var(--void-border) 0 1px, transparent 1px .375rem);--key-shadow: 3px 3px 0 0 var(--void-shadow);color-scheme:dark;scrollbar-color:var(--void-border-strong) var(--void-bg-base);accent-color:var(--void-accent)}html{scroll-behavior:smooth;scroll-padding-top:4.5rem}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}body{margin:0;background:var(--void-bg-base);color:var(--void-text-primary);font-family:var(--void-font-mono);font-size:var(--void-font-size-body);line-height:1.6;caret-color:var(--void-accent);-webkit-font-smoothing:antialiased}body:before,body:after{content:"";position:fixed;top:0;bottom:0;width:calc(var(--inset) - var(--rail-out));border-inline:1px solid var(--void-border);background:var(--hatch);pointer-events:none;z-index:20}body:before{left:var(--rail-out)}body:after{right:var(--rail-out)}::selection{background:var(--void-accent);color:var(--void-bg-base)}:focus-visible{outline:2px solid var(--void-accent);outline-offset:2px}a{color:var(--void-text-primary);text-decoration-line:underline;text-decoration-color:var(--void-border-strong);text-underline-offset:.3em;transition:color var(--void-duration-fast) var(--void-ease-out),text-decoration-color var(--void-duration-fast) var(--void-ease-out)}a:hover{color:var(--void-accent);text-decoration-color:currentColor}code,pre{font-family:var(--void-font-mono)}p code{color:var(--void-text-primary);white-space:nowrap}h1,h2,h3,p{margin:0}h2{font-size:var(--void-font-size-hm);font-weight:700;line-height:1.2;text-wrap:balance}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.skip{position:absolute;left:var(--inset);top:-3rem;z-index:40;padding:var(--void-space-sm) var(--void-space-md);background:var(--void-accent);color:var(--void-bg-base)}.skip:focus{top:var(--void-space-sm)}.page{padding-inline:var(--inset)}.key{font:inherit;font-size:var(--void-font-size-label);font-weight:500;letter-spacing:.05em;color:var(--void-bg-base);background:var(--void-accent);border:1px solid var(--void-accent);border-radius:var(--void-radius);padding:var(--void-space-sm) var(--void-space-md);cursor:pointer;white-space:nowrap;box-shadow:var(--key-shadow);transition:transform var(--void-duration-base) var(--void-ease-out),box-shadow var(--void-duration-base) var(--void-ease-out),background-color var(--void-duration-base) var(--void-ease-out),color var(--void-duration-base) var(--void-ease-out)}.key:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 0 var(--void-shadow)}.key:active{transform:translate(3px,3px);box-shadow:none;transition-duration:var(--void-duration-fast)}.key-quiet{color:var(--void-text-primary);background:var(--void-bg-elevated);border-color:var(--void-border-strong)}.key-quiet:hover{color:var(--void-accent);border-color:var(--void-accent)}.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:var(--void-space-md);height:4rem;padding-inline:var(--pad);background:var(--void-bg-base);border-bottom:1px solid var(--void-border)}.mark{font-size:1.125rem;font-weight:700;text-decoration:none}.cursor{color:var(--void-accent)}.nav-link{margin-left:auto;color:var(--void-text-muted);font-size:var(--void-font-size-label);text-decoration:none}.nav-link:hover{color:var(--void-accent)}.hero{display:grid;gap:var(--void-space-lg);padding:var(--void-space-xl) var(--pad);border-bottom:1px solid var(--void-border)}.wordmark-void{background:linear-gradient(var(--void-accent),var(--void-accent)) no-repeat;color:var(--void-bg-base)}.wordmark{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1}.hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--void-space-lg)}.thesis{color:var(--void-text-muted);max-width:44ch}.install{display:flex;max-width:100%;align-items:stretch;gap:var(--void-space-sm)}.install code{display:flex;align-items:center;gap:var(--void-space-sm);padding:var(--void-space-sm) var(--void-space-md);background:var(--void-bg-elevated);border:1px solid var(--void-border-strong);white-space:nowrap;position:relative;overflow:hidden}.install:has(.copy-key[data-state=copied]) code:after,.step-code:has(.copy-key[data-state=copied]) pre:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--void-accent-glow);transform-origin:left;animation:sweep .7s var(--void-ease-out) both;pointer-events:none}@keyframes sweep{0%{transform:scaleX(0)}55%{transform:scaleX(1);opacity:1}to{transform:scaleX(1);opacity:0}}.prompt{color:var(--void-text-muted)}.copy-key{min-width:7.5rem}.stage{--d: 1;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"body body" "caption controls";background:var(--void-bg-base)}.stage:focus-within{z-index:2}.stage-body{grid-area:body;display:grid;place-items:center;min-width:0;min-height:min(44svh,26rem);padding:var(--void-space-xl) var(--pad)}.specimen{--d: 1;grid-area:1 / 1;max-width:100%;zoom:1.6;animation:enter var(--void-duration-slow) var(--void-ease-out) both}.stage[data-enter=prev],.specimen[data-dir=prev]{--d: -1}.ghost{pointer-events:none;animation:exit .28s var(--void-ease-out) forwards}.stage-caption>div,.chips{animation:enter var(--void-duration-slow) var(--void-ease-out) backwards}@keyframes enter{0%{opacity:0;filter:blur(6px);transform:translate(calc(var(--d) * 2rem))}}@keyframes exit{to{opacity:0;filter:blur(4px);transform:translate(calc(var(--d) * -2rem))}}.stage-controls{grid-area:controls;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--void-space-xs);padding:var(--void-space-md) var(--pad);border-top:1px solid var(--void-border)}.chips{display:flex;flex-wrap:wrap;gap:var(--void-space-xs)}.chip{position:relative;overflow:hidden;font:inherit;font-size:var(--void-font-size-label-sm);letter-spacing:.05em;color:var(--void-text-muted);background:var(--void-bg-base);border:1px solid var(--void-border);padding:2px var(--void-space-sm);cursor:pointer;transition:color var(--void-duration-base) var(--void-ease-out),border-color var(--void-duration-base) var(--void-ease-out)}.chip:hover,.chip[aria-pressed=true]{color:var(--void-text-primary);border-color:var(--void-border-strong)}.stage[data-playing] .chips .chip[aria-pressed=true]:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--void-accent);transform-origin:left;animation:fuse var(--step) linear forwards}@keyframes fuse{0%{transform:scaleX(0)}}.stage-play{margin-left:var(--void-space-sm)}.stage-caption{grid-area:caption;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--void-space-md);padding:var(--void-space-md) var(--pad);border-top:1px solid var(--void-border)}.stage-caption h3{font-size:var(--void-font-size-body)}.stage-caption p{color:var(--void-text-muted);font-size:var(--void-font-size-label)}.stage-caption a{flex-shrink:0;font-size:var(--void-font-size-label)}.showcase{border-bottom:1px solid var(--void-border)}.tabs{position:relative;display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--void-border)}.tab{flex-shrink:0;font:inherit;font-size:var(--void-font-size-label);color:var(--void-text-muted);background:none;border:0;border-right:1px solid var(--void-border);padding:var(--void-space-md) var(--void-space-lg);cursor:pointer;transition:color var(--void-duration-base) var(--void-ease-out)}.tab:hover,.tab[aria-pressed=true]{color:var(--void-text-primary)}.tab-ink{position:absolute;left:0;bottom:0;height:2px;background:var(--void-accent);pointer-events:none;transition:transform var(--void-duration-slow) var(--void-ease-out),width var(--void-duration-slow) var(--void-ease-out)}.section{border-bottom:1px solid var(--void-border)}.section-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--void-space-xl);align-items:end;padding:var(--void-space-xl) var(--pad);border-top:1px solid var(--void-border)}.section-head p{color:var(--void-text-muted);max-width:62ch}.theming-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);border-top:1px solid var(--void-border)}.theming-grid>*{padding:var(--void-space-lg) var(--pad);border-right:1px solid var(--void-border)}.theming-grid>:last-child{border-right:0}.theme-controls{display:flex;flex-direction:column;align-items:flex-start;gap:var(--void-space-lg)}fieldset{margin:0;padding:0;border:0;min-width:0}legend{padding:0;margin-bottom:var(--void-space-sm);color:var(--void-text-muted);font-size:var(--void-font-size-label-sm);letter-spacing:.125rem;text-transform:uppercase}.swatches{display:flex;flex-wrap:wrap;gap:var(--void-space-sm)}.swatch{display:inline-flex;align-items:center;gap:var(--void-space-sm);font:inherit;font-size:var(--void-font-size-label);color:var(--void-text-muted);background:none;border:1px solid var(--void-border);padding:var(--void-space-xs) var(--void-space-sm);cursor:pointer;text-transform:capitalize}.swatch:hover,.swatch[aria-pressed=true]{color:var(--void-text-primary);border-color:var(--void-accent)}.swatch-chip{width:.875rem;height:.875rem}.swatch input[type=color]{width:1rem;height:1rem;padding:0;border:0;background:none;cursor:pointer}.theme-preview{display:flex;flex-direction:column;justify-content:center;gap:var(--void-space-lg)}.preview-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--void-space-md)}.theme-code{display:flex;flex-direction:column;align-items:flex-start;gap:var(--void-space-md)}pre{position:relative;margin:0;width:100%;padding:var(--void-space-md);background:var(--void-bg-elevated);border:1px solid var(--void-border);font-size:var(--void-font-size-label);line-height:1.7;overflow-x:auto}.steps{margin:0;padding:0;list-style:none;counter-reset:step;border-top:1px solid var(--void-border)}.step{counter-increment:step;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--void-space-xl);padding:var(--void-space-lg) var(--pad);border-bottom:1px solid var(--void-border)}.step:last-child{border-bottom:0}.step-text h3{font-size:1.125rem;font-weight:700}.step-text h3:before{content:counter(step) "  ";color:var(--void-text-muted);white-space:pre}.step-text p{margin-top:var(--void-space-xs);color:var(--void-text-muted);font-size:var(--void-font-size-label)}.step-code{display:flex;align-items:flex-start;gap:var(--void-space-sm)}.close{display:flex;flex-direction:column;align-items:flex-start;gap:var(--void-space-lg);padding:var(--void-space-xl) var(--pad)}.close .steps{align-self:stretch}.close-actions{display:flex;flex-wrap:wrap;gap:var(--void-space-md)}.colophon{display:flex;flex-wrap:wrap;gap:var(--void-space-sm) var(--void-space-lg);width:100%;margin-top:var(--void-space-xl);padding-top:var(--void-space-md);border-top:1px solid var(--void-border);color:var(--void-text-muted);font-size:var(--void-font-size-label-sm);letter-spacing:.05em}.colophon a{color:var(--void-text-muted)}@property --void-accent{syntax: "<color>"; inherits: true; initial-value: #c160ef;}@property --void-shadow{syntax: "<color>"; inherits: true; initial-value: #3a3a3a;}:root{transition:--void-accent var(--void-duration-slow) var(--void-ease-out),--void-shadow var(--void-duration-slow) var(--void-ease-out)}.type,.caret{display:inline-block}.caret{color:var(--void-accent)}.arrow{display:inline-block;transition:transform var(--void-duration-base) var(--void-ease-out)}a:hover .arrow{transform:translate(2px,-2px)}@media (prefers-reduced-motion: no-preference){.type{animation:type .7s steps(7,end) .15s backwards}.wordmark-void{animation:select .32s steps(4,end) .9s backwards}.caret{animation:caret-ride .7s steps(7,end) .15s backwards,blink 1s steps(1) .9s 4}.thesis{animation:rise .5s var(--void-ease-out) .85s backwards}.hero .install code{animation:key-rise .45s var(--void-ease-out) 1s backwards}.hero .copy-key{animation:key-rise .45s var(--void-ease-out) 1.08s backwards}.showcase{animation:rise .6s var(--void-ease-out) 1.15s backwards}[data-reveal]>*{transition:opacity .7s var(--void-ease-out),transform .7s var(--void-ease-out),filter .7s var(--void-ease-out);transition-delay:calc(var(--i, 0) * 90ms)}[data-reveal]:not([data-shown])>*{opacity:0;filter:blur(4px);transform:translateY(1.25rem)}[data-boot] [data-reveal]>*{transition-delay:calc(1.3s + var(--i, 0) * 90ms)}}@keyframes select{0%{background-size:0 100%;color:var(--void-text-primary)}}@keyframes type{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes caret-ride{0%{transform:translate(-4.2em)}}@keyframes blink{50%{opacity:0}}@keyframes rise{0%{opacity:0;transform:translateY(.75rem)}}@keyframes key-rise{0%{opacity:0;transform:translate(3px,3px);box-shadow:none}}@media (pointer: coarse){.chip,.tab,.swatch{min-height:2.75rem}}@media (max-width: 64rem){.theming-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.theme-code{grid-column:1 / -1;border-top:1px solid var(--void-border)}.theme-preview{border-right:0}}@media (max-width: 40rem){:root{--rail-out: .375rem;--inset: 1rem;--pad: 1rem}.nav-link{display:none}.nav>:last-child{margin-left:auto}.specimen{zoom:1.25}.stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"body" "controls" "caption"}.stage-controls{justify-content:flex-start}.stage-body{min-height:22rem}.hero-row,.section-head,.step,.theming-grid{grid-template-columns:minmax(0,1fr)}.section-head{gap:var(--void-space-md);padding-top:var(--void-space-xl)}.install code{flex:1;min-width:0;overflow-x:auto}.copy-key{min-width:0}.theming-grid>*{border-right:0;border-bottom:1px solid var(--void-border)}.step-code{flex-direction:column}}