:root{color-scheme:dark;--bg:#0f0f11;--surface:#17171a;--surface-alt:#1e1e23;--border:#2a2a2f;--text:#f4f4f5;--body:#d4d4d8;--muted:#8e8e96;--accent:#e4e4e7;--on-accent:#0f0f11;--font-heading:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-body:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--font-editorial:Georgia, serif;--tile-light:#fafafa;--tile-dark:#0a0a0a;--radius:14px;--radius-sm:8px;--page-max:1240px;--gutter:clamp(16px, 4vw, 40px)}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;margin:0}body{min-height:100vh}img{max-width:100%}a{color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mono,.eyebrow,.num,.chip,.btn,.tag{font-family:var(--font-mono)}.skip{position:absolute;left:-9999px}.skip:focus{z-index:10;background:var(--accent);color:var(--on-accent);border-radius:var(--radius-sm);padding:8px 12px;top:12px;left:12px}.site-header{padding:14px var(--gutter);border-bottom:1px solid var(--border);font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:10px;font-size:12px;display:flex}.site-header a{text-decoration:none}.site-home{font-weight:700}.site-home span,.crumb-sep{color:var(--muted);font-weight:400}.crumb:hover,.site-home:hover{color:var(--accent)}.page{max-width:var(--page-max);padding:40px var(--gutter) 80px;margin:0 auto}.brand-layout{grid-template-columns:200px minmax(0,1fr);align-items:start;gap:48px;display:grid}.brand-layout>*{min-width:0}.side-nav{font-family:var(--font-mono);letter-spacing:.08em;flex-direction:column;gap:2px;font-size:12px;display:flex;position:sticky;top:24px}.side-nav a{border-radius:var(--radius-sm);color:var(--body);text-transform:uppercase;gap:10px;padding:7px 10px;text-decoration:none;display:flex}.side-nav a .num{color:var(--accent);font-weight:700}.side-nav a:hover,.side-nav a[aria-current=true]{background:var(--surface);color:var(--text)}@media (width<=900px){.page:has(.brand-layout){padding-top:0}.brand-layout{grid-template-columns:minmax(0,1fr);gap:24px}.side-nav{z-index:5;margin:0 calc(var(--gutter) * -1);padding:8px var(--gutter);background:var(--bg);border-bottom:1px solid var(--border);flex-direction:row;position:sticky;top:0;overflow-x:auto}.side-nav a{white-space:nowrap}}.embedded .site-header,.embedded .side-nav,.embedded .skip{display:none}.embedded .page{padding:16px}.embedded .brand-layout{grid-template-columns:minmax(0,1fr)}.doc-head{border-bottom:1px solid var(--border);flex-direction:column;gap:14px;margin-bottom:40px;padding-bottom:28px;display:flex}.doc-head__logo{align-self:flex-start;width:auto;height:30px}.eyebrow{letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-size:11px;font-weight:700}.doc-head h1{font-family:var(--font-heading);letter-spacing:-.02em;margin:0;font-size:clamp(32px,5vw,46px);line-height:1.08}.doc-head .lede{color:var(--text);margin:0;font-size:17px}.prose{color:var(--body);max-width:72ch;font-size:15px;line-height:1.65}.prose p{margin:0 0 .8em}.prose p:last-child{margin-bottom:0}.prose em{font-family:var(--font-editorial);font-style:normal}.prose code{font-family:var(--font-mono);background:var(--surface-alt);border-radius:5px;padding:1px 5px;font-size:.88em}.prose ul{margin:.4em 0 .8em;padding-left:1.2em}.prose li{margin:.2em 0}.doc-meta{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap;gap:8px 28px;font-size:11px;display:flex}.doc-meta strong{color:var(--text);margin-right:6px}.doc-meta a:hover{color:var(--accent)}.section{scroll-margin-top:24px}.section+.section{margin-top:64px}.section-head{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:24px;padding-bottom:12px;display:flex}.section-head .num{letter-spacing:.18em;color:var(--accent);font-size:12px;font-weight:700}.section-head h2{font-family:var(--font-heading);letter-spacing:-.01em;margin:0;font-size:28px}.section-head .actions{gap:8px;margin-left:auto;display:flex}.embedded .section-head .actions{display:none}.group-block+.group-block{margin-top:32px}.group-title{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text);margin:0 0 6px;font-size:12px;font-weight:700}.group-note{color:var(--muted);max-width:72ch;margin:0 0 14px;font-size:14px;line-height:1.5}.btn,.chip{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;align-items:center;gap:6px;text-decoration:none;transition:border-color .15s,color .15s,background .15s;display:inline-flex}.btn{letter-spacing:.12em;text-transform:uppercase;border-radius:var(--radius-sm);padding:8px 12px;font-size:11px;font-weight:700}.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.chip{border-radius:999px;padding:4px 8px;font-size:11px}.btn:hover,.chip:hover{border-color:var(--accent);color:var(--accent)}.btn--accent:hover{color:var(--on-accent);filter:brightness(1.08)}.btn--accent .size{color:inherit;opacity:.65}.chip .dot{border:1px solid color-mix(in srgb, var(--text) 25%, transparent);border-radius:99px;width:9px;height:9px}.chip .size,.btn .size{color:var(--muted);font-weight:400}.chips{flex-wrap:wrap;gap:6px;display:flex}.section-actions{flex-wrap:wrap;gap:8px;margin:-8px 0 24px;display:flex}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.card-head{background:var(--surface-alt);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex}.card-head h3{margin:0;font-size:14px;font-weight:600}.card-body{padding:16px}.card+.card{margin-top:20px}.logo-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;display:grid}.logo-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;display:flex;overflow:hidden}.logo-tile{cursor:pointer;place-items:center;height:150px;padding:24px;display:grid;position:relative}.logo-tile[data-bg=light]{background:var(--tile-light)}.logo-tile[data-bg=dark]{background:var(--tile-dark)}.logo-tile img{object-fit:contain;max-width:100%;max-height:72px}.tile-hint{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);opacity:0;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:700;transition:opacity .15s,transform .15s;position:absolute;bottom:8px;right:8px;transform:translateY(4px)}.logo-tile:hover .tile-hint,.logo-tile:focus-visible .tile-hint{opacity:1;transform:none}.logo-meta{border-top:1px solid var(--border);flex-direction:column;gap:8px;padding:12px 14px 14px;display:flex}.logo-meta h4{margin:0;font-size:14px;font-weight:600}.logo-meta p{color:var(--muted);margin:0;font-size:13px;line-height:1.45}.swatch-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;display:grid}.swatch{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;display:flex;overflow:hidden}.swatch-color{border:0;border-bottom:1px solid var(--border);cursor:pointer;height:104px;font-family:var(--font-mono);letter-spacing:.04em;text-align:left;justify-content:space-between;align-items:flex-end;padding:10px 12px;font-size:13px;font-weight:700;display:flex}.swatch-color .copy-hint{letter-spacing:.14em;text-transform:uppercase;opacity:0;font-size:10px;transition:opacity .15s}.swatch-color:hover .copy-hint,.swatch-color:focus-visible .copy-hint{opacity:.85}.swatch-info{flex-direction:column;gap:8px;padding:12px;display:flex}.swatch-name{font-size:14px;font-weight:600}.swatch-usage{color:var(--muted);margin:0;font-size:12.5px;line-height:1.45}.family-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;display:grid}.family-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;display:flex;overflow:hidden}.family-specimen{border-bottom:1px solid var(--border);padding:18px 18px 14px}.family-specimen .aa{color:var(--text);font-size:64px;line-height:1;display:block}.family-specimen p{color:var(--body);margin:10px 0 0;font-size:17px;line-height:1.4}.family-meta{flex-direction:column;gap:10px;padding:14px 18px 16px;display:flex}.family-meta h4{margin:0;font-size:16px}.family-meta p{color:var(--muted);margin:0;font-size:13px;line-height:1.45}.weights{color:var(--text);flex-wrap:wrap;gap:4px 12px;font-size:15px;display:flex}.scale{border:1px solid var(--border);border-radius:var(--radius);margin-top:28px;overflow:hidden}.scale-row{background:var(--surface);cursor:pointer;text-align:left;width:100%;color:var(--text);border:0;grid-template-columns:210px minmax(0,1fr);align-items:center;gap:18px;padding:14px 18px;display:grid}.scale-row+.scale-row{border-top:1px solid var(--border)}.scale-row:hover{background:var(--surface-alt)}.scale-meta{font-family:var(--font-mono);color:var(--muted);flex-direction:column;gap:3px;font-size:11px;display:flex}.scale-meta strong{color:var(--accent);letter-spacing:.08em;font-size:12px}.scale-sample{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (width<=640px){.scale-row{grid-template-columns:minmax(0,1fr)}}.token-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;display:grid}.token{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;color:var(--text);text-align:left;font:inherit;flex-direction:column;gap:10px;padding:14px;display:flex}.token:hover{border-color:var(--accent)}.token-visual{place-items:center;height:84px;display:grid}.radius-demo{background:var(--surface-alt);border:2px solid var(--accent);width:64px;height:64px}.spacing-demo{background:var(--accent);border-radius:3px;justify-self:start;max-width:100%;height:10px}.shadow-demo{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:100%;height:64px}.token-label{font-family:var(--font-mono);flex-direction:column;gap:3px;font-size:11px;display:flex}.token-label strong{color:var(--text);font-size:12px}.token-label span{color:var(--muted);word-break:break-word}.token-usage{font-family:var(--font-body);color:var(--muted);font-size:12px;line-height:1.4}.token-table{table-layout:fixed;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;font-size:13px;overflow:hidden}.token-table th,.token-table td{text-align:left;border-bottom:1px solid var(--border);vertical-align:top;padding:10px 14px}.token-table th:first-child{width:30%}.token-table th:nth-child(2){width:32%}.token-table th{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--surface-alt);font-size:10px}.token-table tr:last-child td{border-bottom:0}.token-table .chip{white-space:normal;overflow-wrap:anywhere;text-align:left;border-radius:8px}.table-wrap{overflow-x:auto}.component-frame{background:var(--bg);border:0;width:100%;min-height:80px;display:block}.card-note{color:var(--muted);border-bottom:1px solid var(--border);margin:0;padding:10px 16px;font-size:13px}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;display:grid}.icon-cell{background:var(--surface);border:1px solid var(--border);border-radius:10px;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 10px;text-decoration:none;display:flex}.icon-cell:hover{border-color:var(--accent)}.icon-cell img{width:24px;height:24px}.icon-cell img.invert{filter:brightness(0)invert()}.icon-cell span{font-family:var(--font-mono);color:var(--muted);text-align:center;word-break:break-word;font-size:10px}.guideline-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;display:grid}.guideline{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px}.guideline h3{font-family:var(--font-heading);margin:0 0 10px;font-size:18px}.dodont{color:var(--body);flex-direction:column;gap:6px;margin:12px 0 0;padding:0;font-size:14px;line-height:1.5;list-style:none;display:flex}.dodont li{grid-template-columns:18px minmax(0,1fr);gap:6px;display:grid}.dodont li:before{font-family:var(--font-mono);font-weight:700}.dodont.do li:before{content:"✓";color:var(--accent)}.dodont.dont li:before{content:"✕";color:#ff5c6c}.download-list{border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;display:flex;overflow:hidden}.download{background:var(--surface);grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 18px;text-decoration:none;display:grid}.download+.download{border-top:1px solid var(--border)}.download:hover{background:var(--surface-alt)}.download .tag{letter-spacing:.14em;background:var(--surface-alt);border:1px solid var(--border);color:var(--accent);border-radius:6px;justify-self:start;padding:4px 8px;font-size:10px;font-weight:700}.download strong{font-size:14px;display:block}.download small{color:var(--muted);font-size:13px}.download .size{font-family:var(--font-mono);color:var(--muted);font-size:11px}.hub-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;display:grid}.hub-card{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--brand-accent,var(--accent));border-radius:var(--radius);flex-direction:column;text-decoration:none;transition:transform .2s,border-color .2s;display:flex;overflow:hidden}.hub-card:hover{border-color:var(--brand-accent,var(--accent));transform:translateY(-2px)}.hub-card .logo-tile{height:160px;cursor:inherit}.hub-card-body{padding:16px 18px 18px}.hub-card-body h2{margin:0 0 4px;font-size:18px}.hub-card-body p{color:var(--muted);margin:0;font-size:14px;line-height:1.45}.toast{z-index:20;background:var(--text);color:var(--bg);font-family:var(--font-mono);letter-spacing:.04em;opacity:0;pointer-events:none;border-radius:999px;padding:10px 16px;font-size:12px;font-weight:700;transition:opacity .15s,transform .15s;position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px)}.toast.show{opacity:1;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important}}