*,*::before,*::after{box-sizing:border-box}
html{background:var(--abyss);-webkit-font-smoothing:antialiased}
body{margin:0;color:var(--snow);font-family:var(--sans);line-height:1.55;min-height:100vh;
  background:linear-gradient(180deg,var(--ultramarine-deep) 0,color-mix(in oklab,var(--ultramarine-deep) 46%,var(--abyss)) 520px,var(--abyss) 1100px)}
::selection{background:var(--ultramarine);color:var(--snow)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ultramarine-mid);outline-offset:3px}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:132px;mix-blend-mode:overlay;opacity:.11}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}@media(min-width:1024px){.wrap{padding:0 2.5rem}}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;gap:1rem;flex-wrap:wrap}@media(min-width:1024px){.site-header{padding:1.25rem 2.5rem}}
.lockup{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.ci-mark{display:inline-block;aspect-ratio:409/609;height:1.75rem;background:currentColor;-webkit-mask:url(/assets/ci-mark.png) 50%/contain no-repeat;mask:url(/assets/ci-mark.png) 50%/contain no-repeat}
.lockup .name{font-family:var(--serif);font-size:1.3rem;line-height:1}
.chip{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500}
.cap{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:rgba(247,244,238,.6)}
.cap::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ember);margin-right:.6rem;vertical-align:middle}
.dim{color:rgba(247,244,238,.66)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,1.1rem + 4.6vw,4.35rem);line-height:1.06;margin:1rem 0 .4rem}
h1 small{font-size:.45em;color:rgba(247,244,238,.5);margin-left:.6rem}
h2{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);line-height:1.1;margin:0 0 1rem;padding-bottom:.8rem;border-bottom:1px solid var(--hair)}
.lede{font-size:1.25rem;color:rgba(247,244,238,.8);max-width:42rem}
.ep{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:rgba(247,244,238,.8);margin:0}
main section{padding:2.6rem 0}
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
.card{background:var(--ridge);border:1px solid rgba(247,244,238,.1);border-radius:1rem;padding:1.3rem 1.4rem;text-decoration:none;display:block;transition:border-color .4s}
a.card:hover{border-color:rgba(49,95,224,.7)}
.card h3{font-size:1.6rem;margin:.4rem 0 .2rem}
.card p{margin:.3rem 0 0;font-size:.9rem;color:rgba(247,244,238,.75)}
.tag{display:inline-flex;gap:.4rem;align-items:center;padding:.25rem .6rem;border-radius:999px;border:1px solid rgba(247,244,238,.2);color:rgba(247,244,238,.78)}
.tag.lit{border-color:rgba(49,95,224,.8)}
.tag.todo,.todo{border-style:dashed;color:#ffb39b}
.todo-inline{color:#ffb39b;font-size:.85em}
.two{display:grid;gap:2.5rem}@media(min-width:900px){.two{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
dl{margin:0}dt{margin-top:1.1rem}dd{margin:.3rem 0 0;color:rgba(247,244,238,.85)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.85rem}
ul{padding-left:1.1rem}li{margin:.3rem 0}
.sources li a{color:var(--snow)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:.75rem .6rem;border-bottom:1px solid var(--hair);vertical-align:top}
th{font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,244,238,.55)}
td a{text-decoration-color:rgba(49,95,224,.8);text-underline-offset:3px}
.tree ul{list-style:none;padding-left:1.4rem;border-left:1px solid var(--hair);margin:.2rem 0 .2rem .5rem}
.tree>ul{border-left:0;padding-left:0;margin-left:0}
.tree li{margin:.55rem 0}
.tree .node{display:inline-flex;gap:.7rem;align-items:baseline}
.tree .node b{font-family:var(--serif);font-weight:400;font-size:1.3rem}
.frame{border:1px solid rgba(247,244,238,.1);border-radius:1rem;overflow:hidden;background:var(--abyss)}
.frame iframe{display:block;width:100%;aspect-ratio:1400/900;border:0}
footer{border-top:1px solid rgba(247,244,238,.12);padding:1.6rem 0 2.2rem;color:rgba(247,244,238,.6);margin-top:3rem}