*,:after,:before{box-sizing:border-box}:root{--serif:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"Hanken Grotesk",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;--mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;--r-sm:8px;--r-md:12px;--r-lg:18px;--maxw:1180px;--ease:cubic-bezier(0.2,0.7,0.2,1)}html[data-theme=light]{--paper:#fbfaf7;--paper-2:#f3f1ea;--panel:#ffffff;--ink:#1a1813;--ink-2:#57544b;--ink-3:#8c887c;--line:rgba(26,24,19,0.1);--line-2:rgba(26,24,19,0.18);--accent:#2b34e8;--accent-ink:#ffffff;--accent-tint:rgba(43,52,232,0.08);--shadow:0 1px 2px rgba(26,24,19,0.04),0 14px 40px -18px rgba(26,24,19,0.22);--grid:rgba(26,24,19,0.045);--checker:rgba(26,24,19,0.08);color-scheme:light}html[data-theme=dark]{--paper:#100f0c;--paper-2:#1a1813;--panel:#18160f;--ink:#f0eee6;--ink-2:#b1ada1;--ink-3:#767269;--line:rgba(240,238,230,0.1);--line-2:rgba(240,238,230,0.2);--accent:#8186ff;--accent-ink:#0b0a07;--accent-tint:rgba(129,134,255,0.14);--shadow:0 1px 2px rgba(0,0,0,0.5),0 18px 50px -20px rgba(0,0,0,0.7);--grid:rgba(240,238,230,0.04);--checker:rgba(240,238,230,0.1);color-scheme:dark}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;position:relative}body:before{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0,#000 30%,transparent 85%);mask-image:radial-gradient(ellipse 90% 70% at 50% 0,#000 30%,transparent 85%)}body:after,body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}body:after{opacity:.5;mix-blend-mode:overlay;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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E")}#root,main{position:relative;z-index:1}::selection{background:var(--accent);color:var(--accent-ink)}a{color:inherit}.eyebrow{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}.eyebrow,.mono{font-family:var(--mono)}.mono{font-feature-settings:"tnum" 1}.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}.section{padding:64px 0;border-top:1px solid var(--line)}.section:first-of-type{border-top:none}.section-head{display:flex;align-items:baseline;gap:16px;margin-bottom:36px}.section-num{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em}.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,44px);line-height:1;letter-spacing:-.01em;margin:0}.section-meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}.topbar{position:-webkit-sticky;position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}.topbar-inner{display:flex;align-items:center;gap:18px;height:60px}.brand{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--serif);font-size:22px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}.brand b{font-weight:400}.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);align-self:center}.nav{display:flex;gap:2px;margin:0 auto;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;padding:7px 11px;border-radius:7px;white-space:nowrap;transition:color .18s,background .18s}.nav a:hover{color:var(--ink);background:var(--paper-2)}.nav a.active{color:var(--accent);background:var(--accent-tint)}.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.btn{font-family:var(--sans);font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 15px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--panel);color:var(--ink);cursor:pointer;white-space:nowrap;transition:transform .12s var(--ease),background .16s,border-color .16s,box-shadow .16s}.btn:hover{border-color:var(--ink-3);box-shadow:var(--shadow)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}.btn.primary:hover{filter:brightness(1.06)}.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}.btn.ghost:hover{background:var(--paper-2);color:var(--ink);box-shadow:none}.btn.icon{width:38px;padding:0}.btn.sm{height:32px;font-size:12.5px;padding:0 11px}.btn svg{width:16px;height:16px}.field{font-family:var(--mono);font-size:14px;width:100%;height:48px;padding:0 16px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--panel);color:var(--ink);outline:none;transition:border-color .16s,box-shadow .16s}.field:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}textarea.field{height:auto;padding:14px 16px;line-height:1.6;resize:vertical;min-height:220px}.landing{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 28px}.landing-mark{display:inline-flex;align-items:center;gap:10px;margin-bottom:30px}.landing-mark .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px var(--accent-tint)}.landing h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,8vw,92px);line-height:.95;letter-spacing:-.02em;margin:0 0 8px;max-width:14ch}.landing h1 em{font-style:italic;color:var(--accent)}.landing .lede{font-size:clamp(16px,2.2vw,20px);color:var(--ink-2);max-width:56ch;margin:0 auto 44px;line-height:1.5}.loader-card{width:100%;max-width:640px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:8px;text-align:left}.tabs{display:flex;gap:4px;padding:4px;margin-bottom:4px}.tab{flex:1 1;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:9px;border-radius:var(--r-sm);border:none;background:transparent;color:var(--ink-3);cursor:pointer;transition:background .16s,color .16s}.tab.active,.tab:hover{color:var(--ink)}.tab.active{background:var(--paper-2)}.loader-body{padding:12px}.loader-row{display:flex;align-items:center;gap:8px}.loader-row .field{flex:1 1}.loader-row .btn{height:48px;padding:0 22px}.examples{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:30px}.examples .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}.chip,.examples .lbl{font-family:var(--mono)}.chip{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);cursor:pointer;transition:border-color .16s,color .16s,transform .12s var(--ease)}.chip:hover{color:var(--ink);border-color:var(--ink-3);transform:translateY(-1px)}.err{color:#e5484d;font-family:var(--mono);font-size:12.5px;margin:12px 4px 2px}.masthead{padding:70px 0 56px}.masthead .eyebrow{margin-bottom:18px}.masthead h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,9vw,104px);line-height:.9;letter-spacing:-.025em;margin:0 0 18px}.masthead .desc{font-size:clamp(17px,2.4vw,22px);line-height:1.45;color:var(--ink-2);max-width:60ch;margin:0}.masthead .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:5px 10px;border:1px solid var(--line-2);border-radius:999px}.tag b{color:var(--ink);font-weight:600}.fam{margin-bottom:34px}.fam-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}.fam-name{font-size:13px;font-weight:600;letter-spacing:.02em}.fam-count,.fam-name{font-family:var(--mono)}.fam-count{font-size:11px;color:var(--ink-3)}.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-gap:10px;gap:10px}.swatch{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--panel);cursor:pointer;transition:transform .14s var(--ease),box-shadow .16s,border-color .16s;text-align:left;padding:0;font:inherit;color:inherit;display:block}.swatch:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}.swatch-color{height:64px;position:relative;background-image:linear-gradient(45deg,var(--checker) 25%,transparent 25%),linear-gradient(-45deg,var(--checker) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker) 75%),linear-gradient(-45deg,transparent 75%,var(--checker) 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}.swatch-color .fill{position:absolute;inset:0}.swatch-color .p3{position:absolute;top:6px;right:6px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;padding:2px 5px;border-radius:5px;background:rgba(0,0,0,.45);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.swatch-meta{padding:8px 9px 9px}.swatch-step{font-family:var(--mono);font-size:12px;font-weight:600}.swatch-val{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.swatch input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0}.edit-badge{position:absolute;left:6px;bottom:6px;font-family:var(--mono);font-size:9px;padding:2px 5px;border-radius:5px;background:var(--accent);color:var(--accent-ink);opacity:0;transition:opacity .16s}.swatch:hover .edit-badge{opacity:1}.typeset{display:flex;flex-direction:column;gap:2px}.type-fam{margin-bottom:26px}.type-fam-name{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-bottom:10px;margin-bottom:14px}.type-fam-name,.type-row{border-bottom:1px solid var(--line)}.type-row{padding:14px 0}.type-row:last-child{border-bottom:none}.type-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:8px}.type-key .k{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent)}.type-key .m{font-family:var(--mono);font-size:11px;color:var(--ink-3)}.type-specimen{color:var(--ink);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bars{display:flex;flex-direction:column;gap:10px}.bar{display:grid;grid-template-columns:56px 1fr 72px;align-items:center;grid-gap:16px;gap:16px}.bar .bk{font-family:var(--mono);font-size:12px;font-weight:600}.bar .btrack{height:16px;display:flex;align-items:center}.bar .bfill{height:16px;border-radius:4px;background:var(--accent);min-width:2px}.bar .bv{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:right}.radii-grid,.shadow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:16px;gap:16px}.radii-item{display:flex;flex-direction:column;align-items:center;gap:12px}.radii-box{width:100%;height:96px;background:var(--accent-tint);border:1.5px solid var(--accent)}.radii-cap{text-align:center}.shadow-item{background:var(--panel);border-radius:var(--r-md);border:1px solid var(--line);padding:22px}.shadow-demo{height:70px;border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--line);margin-bottom:16px}.kv{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}.kv b{color:var(--ink);font-weight:600}.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:16px;gap:16px}.comp{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--panel)}.comp-stage{min-height:120px;display:flex;align-items:center;justify-content:center;padding:28px;background:var(--paper-2);background-image:radial-gradient(var(--line-2) 1px,transparent 1px);background-size:14px 14px}.comp-foot{border-top:1px solid var(--line);padding:12px 14px}.comp-name{font-family:var(--mono);font-size:12px;font-weight:600;margin-bottom:8px}.comp-props{display:flex;flex-direction:column;gap:3px}.comp-prop{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);display:flex;gap:6px;align-items:center}.comp-prop .pk{color:var(--ink-2)}.comp-prop .swat{width:11px;height:11px;border-radius:3px;border:1px solid var(--line-2);flex:none}.prose-layout{display:grid;grid-template-columns:200px 1fr;grid-gap:48px;gap:48px;align-items:start}.toc{position:-webkit-sticky;position:sticky;top:80px;display:flex;flex-direction:column;gap:2px}.toc a{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-decoration:none;border-left:2px solid transparent;padding:4px 0 4px 12px;transition:color .16s,border-color .16s}.toc a.active,.toc a:hover{color:var(--ink);border-color:var(--accent)}.prose{max-width:70ch;font-size:16.5px;line-height:1.7;color:var(--ink-2)}.prose>:first-child{margin-top:0}.prose h1,.prose h2,.prose h3,.prose h4{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.1;letter-spacing:-.01em;scroll-margin-top:80px}.prose h1{font-size:2.4em;margin:0 0 .4em}.prose h2{font-size:1.9em;margin:1.6em 0 .5em;padding-top:.4em;border-top:1px solid var(--line)}.prose h3{font-size:1.4em;margin:1.4em 0 .4em}.prose p{margin:0 0 1.1em}.prose strong{color:var(--ink);font-weight:600}.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-tint);transition:border-color .16s}.prose a:hover{border-color:var(--accent)}.prose ol,.prose ul{margin:0 0 1.2em;padding-left:1.3em}.prose li{margin:.35em 0;padding-left:.2em}.prose li::marker{color:var(--ink-3)}.prose code{font-family:var(--mono);font-size:.86em;border:1px solid var(--line);border-radius:5px;padding:.1em .4em;color:var(--ink)}.prose code,.prose pre{background:var(--paper-2)}.prose pre{border:1px solid var(--line);border-radius:var(--r-md);padding:16px;overflow-x:auto;margin:0 0 1.2em}.prose pre code{background:none;border:none;padding:0;font-size:.84em;line-height:1.6}.prose blockquote{margin:0 0 1.2em;padding:4px 0 4px 20px;border-left:2px solid var(--accent);color:var(--ink);font-family:var(--serif);font-size:1.3em;line-height:1.4;font-style:italic}.prose blockquote p{margin:0}.prose table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:.92em}.prose td,.prose th{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}.prose th{font-family:var(--mono);font-size:.82em;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:600}.prose hr{border:none;border-top:1px solid var(--line);margin:2em 0}.raw{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;overflow-x:auto;line-height:1.65;color:var(--ink-2);white-space:pre;-moz-tab-size:2;tab-size:2}.raw,.toast{font-family:var(--mono);font-size:12.5px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;box-shadow:var(--shadow);z-index:100;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.foot{border-top:1px solid var(--line);padding:40px 0 60px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}.foot a{color:var(--ink-2);text-decoration:none}.foot a:hover{color:var(--accent)}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.rise{animation:rise .6s var(--ease) both}.empty{font-size:13px;color:var(--ink-3);padding:8px 0}.empty,.inline-edit{font-family:var(--mono)}.inline-edit{font-size:inherit;color:var(--ink);background:var(--accent-tint);border:1px solid var(--accent);border-radius:5px;padding:1px 5px;width:7ch;outline:none}.inline-edit.wide{width:16ch}.inline-edit:focus{box-shadow:0 0 0 3px var(--accent-tint)}.editing-hint{align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--accent);background:var(--accent-tint);border-radius:999px;padding:4px 10px}.editing-hint,.seg{display:inline-flex}.seg{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:2px}.seg button{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;border:none;background:transparent;color:var(--ink-3);padding:6px 11px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .16s,color .16s}.seg button svg{width:14px;height:14px}.seg button.on,.seg button:hover{color:var(--ink)}.seg button.on{background:var(--panel);box-shadow:var(--shadow)}.seg button.on.accent{background:var(--accent);color:var(--accent-ink)}@media (max-width:860px){.prose-layout{grid-template-columns:1fr;gap:24px}.toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}.toc a{border-left:none;border:1px solid var(--line-2);border-radius:999px;padding:5px 11px}.nav{display:none}}@media (max-width:560px){.wrap{padding:0 18px}.section{padding:48px 0}.bar{grid-template-columns:44px 1fr 60px;gap:10px}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.001ms!important;transition-duration:.001ms!important}}