:root { --paper:#fff; --ink:#111; --muted:#626262; --line:#e6e6e6; --accent:#121212; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Helvetica Neue",Helvetica,sans-serif; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:5px; }
button { font:inherit; color:inherit; cursor:pointer; }
.site-header { height:88px; margin:0; padding:0 32px; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:3; }
.identity { display:flex; align-items:center; gap:13px; text-decoration:none; font-size:23px; letter-spacing:-.7px; font-weight:500; }
.identity img { display:block; border-radius:7px; }
#menu-open, #menu-close, #motion-toggle { border:0; background:transparent; font-size:13px; padding:10px; min-height:44px; display:inline-flex; align-items:center; gap:20px; }
#menu-open span, #menu-close span, #motion-toggle span { font-family:monospace; color:var(--muted); font-size:11px; }
#menu-open:hover, #menu-close:hover, #motion-toggle:hover { background:#f3f3f3; border-radius:6px; }
.home-page .site-header { position:fixed; inset:0 0 auto; }
main { margin:auto; max-width:1240px; padding:40px 6% 20px; }
.home-page main { max-width:none; margin:0; padding:0; }
h1,h2,h3 { font-weight:500; letter-spacing:-.055em; line-height:1.02; text-wrap:balance; }
h1 { font-size:clamp(52px,7.3vw,100px); margin:25px 0; max-width:900px; }
h2 { font-size:clamp(27px,3.3vw,42px); margin:0 0 13px; }
h3 { font-size:26px; margin:0; }
p { max-width:640px; }
.eyebrow { font:12px/1.5 monospace; color:var(--muted); margin:30px 0 12px; }
.lede { font-size:21px; color:var(--muted); margin:25px 0 55px; max-width:520px; }
.status { font:12px/1.6 monospace; color:var(--muted); padding:12px 0; }
.quiet-note { font-size:14px; color:var(--muted); margin-top:45px; }
.text-cta { display:inline-block; font-size:22px; margin:15px 0 45px; }
.path-list { margin-top:25px; }
.path-row { display:grid; grid-template-columns:56px 1fr auto; gap:20px; padding:35px 0; border-top:1px solid var(--line); align-items:center; }
.path-number { font:12px monospace; color:var(--muted); align-self:start; padding-top:7px; }
.path-row p { font-size:16px; color:var(--muted); margin:0; }
.path-row a { font-size:14px; white-space:nowrap; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:3px; }
.issue { display:grid; grid-template-columns:130px 1fr 100px; gap:22px; padding:26px 0; border-top:1px solid var(--line); }
.issue>span { font:11px/1.6 monospace; color:var(--muted); }
.issue .status { margin:0; padding:0; text-align:right; }
.issue>p:last-child { grid-column:2/-1; font-size:13px; color:var(--muted); margin:0; }
.flow { display:flex; align-items:center; gap:28px; margin:60px 0; flex-wrap:wrap; }
.flow>a, .flow>span { display:flex; flex-direction:column; gap:7px; text-decoration:none; }
.flow small { font-size:12px; color:var(--muted); }
.flow b { font:12px monospace; color:var(--muted); }
.flow img { margin-bottom:12px; }
code { font-family:monospace; font-size:.9em; background:#f4f4f4; padding:2px 5px; }
pre.document { white-space:pre-wrap; overflow-wrap:anywhere; font:15px/1.9 monospace; max-width:920px; margin:25px 0 70px; }
.documentation-index { list-style:none; padding:0; margin:0; }
.documentation-index li { border-top:1px solid var(--line); }
.documentation-index a { display:flex; justify-content:space-between; gap:25px; padding:16px 0; text-decoration:none; font-size:16px; }
.documentation-index span { color:var(--muted); }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:65px 32px 0; padding:25px 0; font-size:12px; color:var(--muted); }
.site-footer>a { color:var(--ink); text-decoration:none; }
.home-page .site-footer { position:fixed; inset:auto 32px 0; height:64px; margin:0; padding:0; z-index:3; pointer-events:none; }
.home-page .site-footer>* { pointer-events:auto; }
.skip { position:fixed; top:-100px; left:20px; background:var(--ink); color:white; padding:12px 18px; z-index:6; }
.skip:focus { top:10px; }
:focus-visible { outline:2px solid #111; outline-offset:6px; }
::selection { background:#e0e0e0; }
#site-menu { position:fixed; inset:0 0 0 auto; margin:0; width:min(560px,100%); max-width:100%; height:100dvh; max-height:100dvh; border:0; border-left:1px solid var(--line); padding:27px 40px 35px; background:#fff; color:var(--ink); overflow:auto; }
#site-menu::backdrop { background:rgb(255 255 255 / .7); backdrop-filter:blur(6px); }
#site-menu[open] { animation:menu-in 350ms cubic-bezier(.2,.8,.2,1); }
.menu-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:60px; }
.menu-top p { font:12px monospace; color:var(--muted); margin:0; }
#site-menu nav { display:flex; flex-direction:column; }
#site-menu nav a { display:flex; align-items:center; justify-content:space-between; padding:12px 0; text-decoration:none; font-size:clamp(30px,3.5vw,48px); letter-spacing:-.05em; }
#site-menu nav a span { opacity:0; font-size:26px; transition:opacity .2s; }
#site-menu nav a:hover span,#site-menu nav a:focus-visible span { opacity:1; }
#site-menu a[aria-current] { color:var(--muted); }
.menu-components { display:flex; flex-wrap:wrap; gap:18px 25px; margin:48px 0 70px; max-width:320px; }
.menu-components a { text-decoration:none; font-size:14px; }
.product-reference { display:flex; align-items:center; gap:22px; border-top:1px solid var(--line); padding-top:28px; }
.product-reference p { font-size:12px; line-height:1.6; margin:0; color:var(--muted); }
.product-reference>a { margin-left:auto; text-decoration:none; }
.fallback-navigation { padding:20px 32px; font-size:14px; }
@keyframes menu-in { from { transform:translateX(35px); opacity:0; } to { transform:none; opacity:1; } }
@media(max-width:700px) {
 .site-header { height:76px; padding:0 20px; }
 .identity { font-size:19px; gap:10px; }.identity img { width:30px; height:30px; border-radius:5px; }
 #menu-open { padding-right:0; gap:12px; } main { padding:25px 24px; }
 h1 { font-size:54px; }.lede { font-size:18px; margin-bottom:40px; }
 .path-row { grid-template-columns:30px 1fr; gap:15px; padding:28px 0; }
 .path-row a { grid-column:2; justify-self:start; }.path-row h2 { font-size:30px; }
 .issue { grid-template-columns:1fr auto; gap:12px; }.issue h3 { grid-column:1/-1; grid-row:2; }.issue>p:last-child { grid-column:1/-1; }
 .flow { flex-direction:column; align-items:flex-start; gap:20px; }
 .site-footer { margin:45px 20px 0; gap:15px; }.site-footer .independent-note { display:none; }
 .home-page .site-footer { inset:auto 20px 0; height:58px; }
 #site-menu { padding:22px 28px; }.menu-top { margin-bottom:42px; }#site-menu nav a { font-size:42px; }.menu-components { margin:38px 0 50px; }
 pre.document { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } }
html[data-reduced-motion] { scroll-behavior:auto; }
html[data-reduced-motion] *,html[data-reduced-motion] *:before,html[data-reduced-motion] *:after { animation:none!important; transition:none!important; }

/* An open directory: every component is visible; detail is user-selected. */
.home-page .site-header{background:rgb(255 255 255 / .96);}
.home-page .site-footer{position:fixed;inset:auto 32px 0;margin:0;height:64px;background:#fff;border-top:1px solid var(--line);}
.component-directory{scroll-margin-top:100px;display:grid;grid-template-columns:1fr 1.65fr;gap:7%;padding:75px 5.7% 104px;border-top:1px solid var(--line);}
.component-intro{align-self:start;position:sticky;top:120px;}
.component-intro .eyebrow{margin:0 0 26px;font-size:10px;letter-spacing:.08em;}
.component-intro h2{font-size:clamp(42px,5.4vw,74px);margin:0 0 25px;}
.component-intro p{font-size:17px;color:var(--muted);margin:0 0 24px;}
.component-intro a{font-size:13px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:5px;}
.component{border-bottom:1px solid var(--line);scroll-margin-top:110px;}
.component:first-child{border-top:1px solid var(--line);}
.component summary{display:grid;grid-template-columns:28px 1fr auto 20px;gap:15px;align-items:center;list-style:none;cursor:pointer;min-height:88px;padding:20px 0;font-size:24px;letter-spacing:-.04em;}
.component summary::-webkit-details-marker{display:none;}
.component-number,.component-type{font:11px/1.5 monospace;letter-spacing:0;color:var(--muted);}
.component-type{text-align:right;}
.component-toggle{font:22px monospace;text-align:center;transition:transform .2s;}
.component[open] .component-toggle{transform:rotate(45deg);}
.component summary:hover{color:#777;}
.component-body{padding:0 0 28px 43px;animation:component-in .25s ease-out;}
.component-body>p{font-size:16px;margin:0 0 16px;max-width:520px;}
.component-body .component-evidence{font:11px/1.8 monospace;color:var(--muted);}
.component-links{display:flex;flex-wrap:wrap;gap:15px 24px;}
.component-links a{font-size:13px;text-decoration:none;border-bottom:1px solid var(--line);padding:10px 0;min-height:48px;}
.component-links a:hover{border-color:var(--ink);}
.component-body pre{font:12px/1.9 monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:#f6f6f6;padding:16px;margin:15px 0;}
.component-body code{padding:0;background:none;font-size:inherit;}
@keyframes component-in{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}
@media(max-width:900px){.component-directory{gap:5%;grid-template-columns:1fr 2fr;}.component summary{font-size:21px;grid-template-columns:25px 1fr 18px;gap:12px;}.component-type{grid-column:2;grid-row:2;text-align:left;}.component-toggle{grid-column:3;grid-row:1/3;}.component-body{padding-left:37px;}}
@media(max-width:760px){.component-directory{grid-template-columns:1fr;gap:40px;padding:55px 7% 100px;}.component-intro{position:static;}.component-intro h2{font-size:48px;}.component-intro h2 br{display:none;}.component summary{min-height:88px;}.component-body>p{font-size:15px;}.home-page .site-footer{inset:auto 20px 0;margin:0;}}

/* Readable reference documents, including narrow-screen code/table/diagram scrolling. */
article.document{max-width:900px;font-size:17px;line-height:1.7;}
.document h1{font-size:clamp(36px,5vw,62px);line-height:1.1;margin:35px 0;}
.document h2{font-size:30px;letter-spacing:-.03em;line-height:1.25;margin:45px 0 18px;}
.document h3{font-size:23px;line-height:1.3;margin:30px 0 15px;}
.document [id]{scroll-margin-top:110px;}
.document p{max-width:760px;}.document li{margin:8px 0;}
.document pre{max-width:100%;overflow:auto;padding:20px;background:#f5f5f5;font:14px/1.8 monospace;}
.document pre code{padding:0;background:none;font-size:inherit;}
.document table{display:block;max-width:100%;overflow:auto;border-collapse:collapse;font-size:14px;}
.document th,.document td{padding:13px 16px;border:1px solid var(--line);text-align:left;min-width:10rem;overflow-wrap:break-word;}
.document th{background:#f5f5f5;}.document img{max-width:100%;height:auto;}
.document-diagram{margin:30px 0;max-width:100%;overflow:auto;padding:20px 0;}
.document-diagram svg{display:block;width:100%;min-width:720px;color:#444;}
.document-diagram figcaption{font-size:13px;color:var(--muted);max-width:700px;}
.document section{margin:35px 0;overflow-wrap:anywhere;}
@media(max-width:760px){article.document{font-size:16px;}.document pre{font-size:12px;padding:15px;}.document h2{font-size:26px;}}
.document{overflow-wrap:anywhere;min-width:0;}
.document :not(pre)>code{white-space:normal;overflow-wrap:anywhere;}

.header-contribute{margin-left:auto;margin-right:28px;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
.site-footer{font-size:13px;}.home-page .site-footer{padding-inline:12px;}
.documentation-index a{min-height:48px;}
@media(max-width:700px){.header-contribute{font-size:12px;margin-right:12px;}.identity{font-size:17px;}.site-header{gap:8px;}.site-footer{font-size:12px;}}

/* Documentation: task-based hierarchy with a persistent local navigation. */
.documentation-page main { max-width:1440px; padding:32px 4% 60px; }
.docs-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(30px,5vw,76px); align-items:start; }
.docs-sidebar { position:sticky; top:24px; max-height:calc(100dvh - 48px); overflow:auto; padding:0 14px 20px 0; scrollbar-width:thin; }
.doc-menu>summary { font-size:14px; font-weight:600; cursor:pointer; padding:12px 0 20px; }
.doc-sidebar-nav { font-size:14px; }
.doc-sidebar-nav ul { list-style:none; padding:0; margin:0; }
.doc-sidebar-nav summary { cursor:pointer; padding:11px 6px; font-weight:500; }
.doc-sidebar-nav a { display:block; padding:9px 12px; min-height:40px; text-decoration:none; color:var(--muted); line-height:1.4; border-left:2px solid transparent; }
.doc-sidebar-nav a:hover { color:var(--ink); background:#f6f6f6; }
.doc-sidebar-nav a[aria-current="page"] { color:var(--ink); background:#f1f1ef; border-left-color:var(--ink); font-weight:600; }
.doc-nav-group { border-top:1px solid var(--line); }
.doc-nav-group ul { margin-left:8px; }
.doc-nav-group details { margin-left:10px; }
.docs-content { min-width:0; max-width:880px; }
.docs-intro { padding:0 0 42px; border-bottom:1px solid var(--line); }
.docs-intro .eyebrow { margin-top:8px; }
.docs-intro h1 { font-size:clamp(40px,5vw,68px); line-height:1.06; margin:24px 0; }
.docs-intro>p { max-width:55ch; }
.docs-start { display:inline-flex; gap:30px; justify-content:space-between; align-items:center; padding:14px 18px; background:var(--ink); color:white; text-decoration:none; font-size:15px; margin:14px 0 4px; }
.docs-start:hover { background:#333; }
.docs-note { color:var(--muted); font-size:13px; }
.doc-category { padding:36px 0; border-bottom:1px solid var(--line); scroll-margin-top:28px; }
.doc-category h2 { font-size:28px; letter-spacing:-.035em; line-height:1.2; }
.doc-category p { color:var(--muted); font-size:15px; margin:10px 0 22px; }
.doc-subgroup { padding:12px 0 4px 18px; border-left:1px solid var(--line); margin:20px 0; }
.doc-subgroup h3 { font-size:17px; letter-spacing:-.015em; line-height:1.4; margin:0 0 10px; }
.doc-links { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:30px; }
.doc-links li { min-width:0; }
.doc-links a { display:flex; justify-content:space-between; gap:14px; padding:13px 0; min-height:48px; text-decoration:none; border-bottom:1px solid #eee; font-size:15px; }
.doc-links a:hover { text-decoration:underline; }
.doc-breadcrumbs { font-size:13px; color:var(--muted); margin:8px 0 28px; line-height:1.8; }
.doc-breadcrumbs ol { display:flex; flex-wrap:wrap; gap:6px 12px; padding:0; margin:0; list-style:none; }
.doc-breadcrumbs li+li::before { content:"/"; margin-right:12px; color:#aaa; }
.doc-breadcrumbs a { text-decoration:none; }
.docs-content .document h1 { font-size:clamp(32px,4vw,48px); margin:22px 0 28px; }
.docs-content .document p { max-width:68ch; }
.doc-toc { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; margin:0 0 30px; font-size:14px; }
.doc-toc summary { cursor:pointer; font-weight:500; }
.doc-toc ul { list-style:none; padding:10px 0 0; margin:0; }
.doc-toc li { margin:0!important; }
.doc-toc a { display:block; text-decoration:none; color:var(--muted); padding:6px 0; }
.doc-toc a:hover { color:var(--ink); text-decoration:underline; }
.doc-toc .toc-subheading { padding-left:18px; }
.doc-pagination { display:flex; gap:24px; justify-content:space-between; border-top:1px solid var(--line); margin-top:48px; padding-top:24px; }
.doc-pagination a { flex:1; text-decoration:none; font-size:15px; }
.doc-pagination small { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.doc-source { font-size:12px; color:var(--muted); overflow-wrap:anywhere; margin:30px 0 0; }
@media(max-width:850px) {
  .documentation-page main { padding:12px 6% 40px; }
  .docs-layout { grid-template-columns:minmax(0,1fr); gap:26px; }
  .docs-sidebar { position:static; max-height:none; overflow:visible; padding:0; }
  .doc-menu { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .doc-menu>summary { padding:16px 0; min-height:48px; }
  .doc-sidebar-nav { padding-bottom:16px; }
  .doc-sidebar-nav a { min-height:44px; }
  .docs-intro h1 { font-size:clamp(38px,8vw,58px); }
  .doc-category { padding:28px 0; }
}
@media(max-width:520px) {
  .doc-links { grid-template-columns:minmax(0,1fr); }
  .doc-breadcrumbs { font-size:12px; }
  .doc-pagination { flex-direction:column; }
}