@charset "UTF-8";
:root {
  --paper:#090711; --ink:#eeedf5; --muted:#aaa5bb; --line:#322c43; --accent:#b99aff;
  color-scheme:dark;
  --serif:Georgia,"Times New Roman",serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
}
* {box-sizing:border-box}
[hidden] {display:none!important}
html {scroll-behavior:smooth;scroll-padding-top:110px}
body {margin:0;background:radial-gradient(ellipse 660px 560px at 84% 5%,#45225a55,transparent 72%),var(--paper);color:var(--ink);font:16px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
::selection {background:#463467;color:#f5efff}
html {scrollbar-color:#645371 #090711}
a {color:inherit;text-decoration-thickness:1px;text-underline-offset:.25em}
a:hover {color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible {outline:2px solid var(--accent);outline-offset:5px}
button,input {font:inherit}
button {cursor:pointer}
button:disabled {cursor:default}
.wrap {width:min(1120px,calc(100% - 96px));margin-inline:auto}
.skip {position:fixed;left:1rem;top:-5rem;padding:.5rem 1rem;background:var(--accent);color:var(--paper);z-index:30}
.skip:focus {top:1rem}
.reading-progress {position:fixed;inset:0 0 auto;height:3px;background:var(--accent);z-index:25;transform:scaleX(var(--progress,0));transform-origin:left;pointer-events:none}
.header {position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;min-height:88px;border-bottom:1px solid var(--line);gap:28px;background:var(--paper);transition:box-shadow .25s}
.has-scrolled .header {box-shadow:0 12px 24px -22px #000c}
.brand {display:inline-flex;align-items:center;gap:12px;font-size:17px;font-weight:650;letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.brand-mark {width:22px;height:22px}
nav {display:flex;gap:30px;align-items:center;font-size:13px}
nav a {text-decoration:none;position:relative;padding:12px 0;color:var(--muted)}
nav a::after {content:"";position:absolute;inset:auto 0 7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .24s}
nav a:hover::after,nav a[aria-current=page]::after {transform:scaleX(1)}
nav a[aria-current=page] {color:var(--ink)}
h1,h2,h3,p {margin-top:0}
.eyebrow,.section-label,.meta,.topic-kicker {font:11px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.eyebrow {display:flex;align-items:center;gap:10px;margin:0 0 24px}
.eyebrow::before {content:"";width:6px;height:6px;background:var(--accent);border-radius:50%;flex-shrink:0}
.hero {display:grid;grid-template-columns:1.16fr 1fr;gap:40px;align-items:center;padding:64px 0 48px;min-height:570px}
.hero h1 {font:650 clamp(80px,8.8vw,118px)/.98 var(--sans);letter-spacing:-.065em;margin:0 0 28px}
.hero h1 span {display:block;overflow:hidden}
.hero h1 i {display:block;font-style:normal;animation:title-in .85s cubic-bezier(.2,.7,.1,1) both}
.hero h1 span:nth-child(2) i {font-style:normal;color:var(--accent);animation-delay:.12s}
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .hero h1 i {width:fit-content;max-width:100%;background:linear-gradient(130deg,#f8f6ff 5%,#a5a2b4 25%,#f1edfa 42%,#8c889f 63%,#eee6fa 85%);background-clip:text;-webkit-background-clip:text;color:transparent}
  .hero h1 span:nth-child(2) i {background-image:linear-gradient(130deg,#e5d7ff 5%,#a181d1 35%,#d8c0ff 55%,#9b75c8 76%,#dfcefb 98%);color:transparent}
}
.intro {max-width:350px;color:var(--muted);font-size:16px;margin-bottom:26px}
.text-link {display:inline-flex;gap:18px;align-items:center;font-size:13px;text-decoration:none;border-bottom:1px solid currentColor;padding:5px 0;transition:gap .25s}
.text-link:hover {gap:26px}
.hero-foot {display:flex;align-items:center;gap:20px;padding-top:38px;font:10px/1.5 var(--mono);letter-spacing:.04em;color:var(--muted)}
.hero-foot::before {content:"";width:30px;height:1px;background:var(--accent)}
.hero-visual {position:relative;aspect-ratio:1;perspective:850px;isolation:isolate}
.hero-visual::before {content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,#70539b30,transparent 70%);pointer-events:none}
.visual-tilt {position:absolute;inset:0;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.visual-grid {position:absolute;inset:15%;border-radius:50%;background-image:radial-gradient(#675683 1px,transparent 1px);background-size:17px 17px;opacity:.45}
.orbit {position:absolute;inset:3%;border:1px solid var(--line);border-radius:50%;animation:orbit 32s linear infinite}
.orbit::before {content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);left:50%;top:-5px;box-shadow:0 0 0 5px var(--paper),0 0 18px #b99aff55}
.orbit-two {inset:11%;border-style:dashed;animation-direction:reverse;animation-duration:45s}
.orbit-two::before {width:5px;height:5px;top:-3px;background:var(--muted)}
.hero-art {filter:drop-shadow(0 8px 18px #02060980);position:absolute;inset:6%;width:88%;height:88%;animation:float 7s ease-in-out infinite}
.visual-label {position:absolute;z-index:2;font:10px/1.4 var(--mono);letter-spacing:.08em;color:var(--muted);background:var(--paper);padding:5px}
.visual-label.top {top:2%;right:7%}
.visual-label.bottom {left:0;bottom:5%}
.visual-dot {display:inline-block;width:5px;height:5px;background:var(--accent);margin-right:8px;border-radius:50%}
.ticker {overflow:hidden;border-block:1px solid var(--line);margin:10px 0 64px;padding:15px 0}
.ticker-track {display:flex;width:max-content;animation:ticker 35s linear infinite}
.ticker-track span {display:block;white-space:nowrap;padding-right:32px;font:11px var(--mono);letter-spacing:.14em;color:var(--muted)}
.ticker-track b {font-weight:400;color:var(--accent);padding:0 26px}
.section-head {display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:22px}
.section-head h2 {font:400 34px/1.2 var(--serif);letter-spacing:-.04em;margin:0}
.section-head a {font-size:12px;white-space:nowrap}
.section-number {display:block;font:10px var(--mono);letter-spacing:.1em;color:var(--muted);margin-bottom:13px}
.topics {padding:0 0 72px}
.topic-list {display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.topic-link {display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:relative;text-decoration:none;padding:25px 22px 25px 0;border-bottom:1px solid var(--line)}
.topic-link+.topic-link {padding-left:24px;border-left:1px solid var(--line)}
.topic-link strong {font:400 28px var(--serif);letter-spacing:-.04em}
.topic-link .topic-desc {font-size:12px;color:var(--muted);max-width:190px;line-height:1.6}
.topic-link .topic-kicker {font-size:9px}
.topic-link::after {content:"↗";position:absolute;right:17px;top:26px;font-size:17px;transition:transform .25s}
.topic-link:hover::after {transform:translate(3px,-3px)}
.feature {background:linear-gradient(115deg,#21192f,#13101e);border:1px solid #554064;color:var(--ink);padding:48px;display:grid;grid-template-columns:1.4fr 1fr;gap:45px;position:relative;overflow:hidden;margin-bottom:72px}
.feature::before {content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,#d6c2ef,transparent)}
.feature .eyebrow {color:var(--accent)}
.feature .eyebrow::before {background:var(--accent)}
.feature h2 {font:400 clamp(36px,4vw,53px)/1.1 var(--serif);letter-spacing:-.05em;margin-bottom:22px;max-width:450px}
.feature p {font-size:14px;max-width:370px;color:#d1c7e0}
.feature a:hover {color:white}
.dns-figure {display:flex;flex-direction:column;justify-content:center;gap:19px;font:11px/1.5 var(--mono);position:relative}
.dns-node {border:1px solid #6b587e;padding:18px 20px;position:relative}
.dns-node:nth-child(2) {margin-left:30px}
.dns-node:nth-child(3) {margin-left:60px}
.dns-node+.dns-node::before {content:"↓";position:absolute;top:-24px;left:24px;color:var(--accent)}
.dns-node small {display:block;font-size:9px;margin-top:5px;color:#c4b2d8;letter-spacing:.06em}
.note-section {padding-bottom:72px}
.note-list {list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.note-list li {border-bottom:1px solid var(--line)}
.note-link {display:grid;grid-template-columns:65px 1fr auto 27px;gap:20px;align-items:center;padding:25px 0;text-decoration:none;transition:padding .25s,background .25s}
.note-link:hover {padding-left:12px;padding-right:12px;background:#1b1527}
.note-number {font:italic 23px var(--serif);color:var(--muted)}
.note-link h3 {font:400 26px/1.3 var(--serif);letter-spacing:-.035em;margin:0 0 7px}
.note-link p {font-size:12px;color:var(--muted);margin:0;max-width:640px}
.note-time {font:10px var(--mono);white-space:nowrap;color:var(--muted)}
.note-arrow {justify-self:end;font-size:22px;transition:transform .2s}
.note-link:hover .note-arrow {transform:translate(3px,-3px)}
.workbench {padding-bottom:72px}
.bench-shell {border-top:1px solid var(--line)}
.bench-tabs {display:flex;border-bottom:1px solid var(--line);gap:32px}
.bench-tabs button {background:none;border:0;border-bottom:2px solid transparent;padding:17px 0;color:var(--muted);font-size:12px}
.bench-tabs button[aria-selected=true] {border-color:var(--accent);color:var(--ink)}
.bench-panel {display:grid;grid-template-columns:1fr 1.4fr;gap:45px;padding-top:30px}
.bench-panel h3 {font:400 29px/1.2 var(--serif);letter-spacing:-.04em;margin-bottom:13px}
.bench-panel p {font-size:13px;color:var(--muted);max-width:350px}
.bench-code {background:#161320;position:relative;min-width:0}
.bench-code pre {margin:0;padding:28px 24px 18px;overflow:auto;font:12px/2 var(--mono)}
.copy-button {display:block;border:0;border-top:1px solid var(--line);background:none;font-size:11px;color:var(--accent);padding:12px 24px;width:100%;text-align:left;min-height:44px}
.copy-button:hover {background:#2c223c}
.shelf {padding-bottom:70px}
.shelf-list {display:grid;grid-template-columns:1fr 1fr;gap:0 45px;border-top:1px solid var(--line)}
.shelf-link {display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:13px}
.shelf-link small {font:10px var(--mono);color:var(--muted)}
.closing {display:grid;grid-template-columns:1fr 1fr;gap:50px;border-top:1px solid var(--line);padding:45px 0 60px}
.closing h2 {font:400 36px/1.2 var(--serif);letter-spacing:-.04em;max-width:360px;margin:0}
.closing p {font-size:14px;max-width:400px;color:var(--muted);margin-bottom:20px}
.footer {border-top:1px solid var(--line);padding:23px 0 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}
.footer-right {display:flex;gap:22px;align-items:center}
.motion-toggle {border:0;background:none;color:inherit;font-size:11px;padding:10px 0;text-decoration:underline;text-underline-offset:4px;min-height:44px}
.page-head {padding:62px 0 38px;max-width:800px}
.page-head h1 {font:400 clamp(48px,6.3vw,76px)/1.07 var(--serif);letter-spacing:-.055em;margin-bottom:22px}
.page-head .lead {font-size:18px;line-height:1.6;color:var(--muted);max-width:600px;margin:0}
.index-main {padding-bottom:80px;min-height:65vh}
.notebook-tools {display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:20px;padding-top:12px}
.filters {display:flex;gap:6px;flex-wrap:wrap}
.filters button {border:1px solid transparent;background:none;color:var(--muted);padding:9px 13px;font-size:11px;min-height:40px;border-radius:2px}
.filters button[aria-pressed=true] {border-color:var(--line);color:var(--ink);background:#161320}
.search-label {display:flex;gap:12px;align-items:center;font-size:11px;color:var(--muted)}
.search-label input {background:transparent;border:0;border-bottom:1px solid #746382;font-size:12px;padding:11px 4px;width:180px;border-radius:0;color:var(--ink)}
.search-label input::placeholder {color:#a098b3;opacity:1}
.bench-code pre,.article pre code {color:#ded5f1}
.filters button[aria-pressed=true] {color:var(--accent);border-color:#796491}
.results {font:10px var(--mono);color:var(--muted);margin:12px 0}
.empty {padding:40px 0;color:var(--muted)}
.article {max-width:760px;margin:0 auto;padding:56px 0 80px}
.article .eyebrow {margin-bottom:22px}
.article h1 {font:400 clamp(42px,5.5vw,65px)/1.1 var(--serif);letter-spacing:-.055em;margin-bottom:20px}
.article .summary {font-size:19px;line-height:1.6;color:var(--muted);margin-bottom:24px}
.article .meta {margin-bottom:30px;font-size:9px}
.article h2 {font:400 30px/1.3 var(--serif);letter-spacing:-.035em;margin:42px 0 15px;scroll-margin-top:115px}
.article h3 {font-size:18px;margin-top:30px}
.article p,.article li {font-size:16px;line-height:1.85}
.article ul,.article ol {padding-left:23px}
.article li+li {margin-top:9px}
.article code {font: .84em var(--mono);background:#161320;padding:2px 5px;border-radius:2px;overflow-wrap:anywhere}
.article pre {background:#161320;border-left:2px solid var(--accent);padding:20px 22px;margin:25px 0;overflow:auto;line-height:1.8}
.article pre code {padding:0;background:none;white-space:pre;overflow-wrap:normal;font-size:12px}
.article aside {border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;margin:28px 0;color:var(--muted);font-size:14px}
.contents {display:block;border-block:1px solid var(--line);padding:19px 0;margin:32px 0;font-size:12px}
.contents strong {display:block;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;color:var(--muted)}
.contents ol {margin:0;display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;padding:0}
.contents li,.contents li+li {margin:0;font-size:12px}
.article-end {border-top:1px solid var(--line);margin-top:45px;padding-top:24px}
.related {display:flex;flex-direction:column;gap:12px;margin-top:26px;font-size:14px}
.article-refs {font-size:13px!important;color:var(--muted);margin-top:36px}
.error {min-height:65vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:55px 0}
.error h1 {font:400 clamp(80px,18vw,160px)/1 var(--serif);letter-spacing:-.07em;margin:0 0 20px}
.error p {color:var(--muted);max-width:430px}
[data-reveal] {transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.motion-ready[data-motion=on] [data-reveal]:not(.is-visible) {opacity:0;transform:translateY(24px)}
[data-loop] .orbit,[data-loop] .hero-art,[data-loop] .ticker-track {animation-play-state:paused}
[data-motion=on][data-hidden=false] [data-loop].in-view .orbit,
[data-motion=on][data-hidden=false] [data-loop].in-view .hero-art,
[data-motion=on][data-hidden=false] [data-loop].in-view .ticker-track {animation-play-state:running}
[data-motion=off] *,[data-motion=off] *::before,[data-motion=off] *::after {animation:none!important;transition:none!important}
@keyframes title-in {from{opacity:0;transform:translateY(105%) rotate(3deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes float {0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes orbit {to{transform:rotate(360deg)}}
@keyframes ticker {to{transform:translateX(-50%)}}
@media(min-width:1500px) {.hero{padding-block:80px}}
@media(max-width:960px) {
  .wrap{width:calc(100% - 56px)}.hero{gap:15px;min-height:530px}.hero h1{font-size:100px}
  .topic-link strong{font-size:24px}.topic-link+.topic-link{padding-left:16px}.topic-link::after{right:8px}
  .notebook-tools{align-items:flex-start;flex-direction:column;gap:12px}.search-label input{width:250px}
}
@media(max-width:760px) {
  html{scroll-padding-top:90px}.wrap{width:calc(100% - 40px)}.header{min-height:76px;gap:16px}
  nav{gap:20px;font-size:12px}.brand{font-size:15px;gap:8px}.brand-mark{width:19px;height:19px}
  .hero{grid-template-columns:1fr;gap:18px;padding:40px 0 26px;min-height:0}
  .hero h1{font-size:86px}.intro{font-size:15px;max-width:340px}.hero-foot{padding-top:24px}
  .hero-visual{width:min(100%,345px);justify-self:center;margin-top:8px}.visual-label{font-size:8px}
  .eyebrow{margin-bottom:20px;font-size:10px}.ticker{margin-bottom:40px;padding:13px 0}
  .section-head{align-items:flex-end;padding-bottom:19px}.section-head h2{font-size:29px}.section-label{font-size:9px}
  .topics,.note-section,.workbench,.shelf{padding-bottom:46px}.topic-list{grid-template-columns:1fr 1fr}
  .topic-link,.topic-link+.topic-link{padding:22px 12px 22px 0;border-left:0}
  .topic-link:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}.topic-link strong{font-size:27px}
  .topic-link .topic-desc{max-width:140px}.topic-link::after{top:23px;right:8px}
  .feature{grid-template-columns:1fr;gap:28px;padding:30px 24px;margin-bottom:46px}.feature h2{font-size:41px}
  .dns-figure{gap:15px}.dns-node{padding:12px 15px;font-size:10px}.dns-node+.dns-node::before{top:-21px}
  .note-link{grid-template-columns:30px 1fr 18px;gap:12px;padding:23px 0}.note-link:hover{padding-left:0;padding-right:0}
  .note-link h3{font-size:23px}.note-link p{font-size:11px}.note-number{font-size:18px}.note-time{display:none}.note-arrow{font-size:18px}
  .bench-panel{grid-template-columns:1fr;gap:12px;padding-top:23px}.bench-panel h3{font-size:28px}
  .bench-tabs{gap:30px}.bench-code pre{padding:20px;font-size:10px}.copy-button{padding:12px 20px}
  .shelf-list{grid-template-columns:1fr}.closing{grid-template-columns:1fr;gap:20px;padding:32px 0 40px}
  .closing h2{font-size:31px}.footer{align-items:flex-start;flex-direction:column;gap:4px;padding-bottom:22px}
  .footer-right{width:100%;justify-content:space-between;gap:12px}.page-head{padding:40px 0 30px}.page-head .lead{font-size:16px}
  .filters{gap:1px}.filters button{padding:8px 10px;font-size:10px}.search-label{width:100%}.search-label input{flex:1;width:0}
  .article{padding:40px 0 55px}.article .summary{font-size:17px}.article h2{font-size:27px}.article p,.article li{font-size:15px}
  .article pre{padding:16px}.article pre code{font-size:11px}.contents ol{gap:7px 18px}.contents li,.contents li+li{font-size:11px}
}
@media(max-width:360px) {.wrap{width:calc(100% - 30px)}nav{gap:13px}.brand{font-size:14px}.hero h1{font-size:77px}}
@media(prefers-reduced-motion:reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
  .motion-ready [data-reveal]{opacity:1!important;transform:none!important}
}