/* materialscodegraph.com: tokens and steps from Brand/style-guide-mcg.md. Fonts: the latin woff2 files Google Fonts serves Chrome, self-hosted. */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400 600; font-display:swap; src:url(fonts/inter-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/jetbrains-mono-400-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --page:#F7F7F5; --surface:#FFFFFF; --surface-2:#F0EFEC; --ink:#1A1A1A; --ink-2:#55524E; --ink-3:#6E6A64; --hairline:#E6E4E1; --ring:#E0DEDA; --accent:#C43D00; --on-accent:#FFFFFF; --accent-wash:rgba(196,61,0,.08); --status-good:#047857; --status-warn:#A16207; --status-serious:#C2410C; --status-crit:#DC2626; --focus:var(--ink); color-scheme:light;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --gutter:clamp(16px,4vw,48px); }
html[data-theme="dark"] { --page:#050505; --surface:#0F0F0F; --surface-2:#141414; --ink:#E0E0E0; --ink-2:#9a9a9a; --ink-3:#6f6f6f; --hairline:#262626; --ring:#262626; --accent:#FF4D00; --on-accent:#14100E; --accent-wash:rgba(255,77,0,.12); --status-good:#34d399; --status-warn:#fbbf24; --status-serious:#fb923c; --status-crit:#f87171; color-scheme:dark; }

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--page); color:var(--ink); font:400 14px/1.5 var(--font); -webkit-font-smoothing:antialiased; }
h1, h2, h3, p, dl, ol, ul, pre, table, figure { margin:0; }
a { color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; }
code, pre, .mono, .ledger dd, td, .tools li { font-family:var(--font-mono); }
code { font-size:13px; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.skip { position:absolute; left:16px; top:-100px; padding:8px 16px; background:var(--surface); border:1px solid var(--ring); border-radius:6px; }
.skip:focus { top:16px; z-index:10; }
.wrap { max-width:72rem; margin:0 auto; padding:0 var(--gutter); }
.narrow { max-width:56rem; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* type steps */
.hero-title { font:400 40px/1.15 var(--font); letter-spacing:0; }
.stat { font:400 28px/1.15 var(--font-mono); font-variant-numeric:tabular-nums; }
h2 { font:600 16px/1.4 var(--font); }
h3 { font:600 16px/1.4 var(--font); }
.small { font-size:13px; }
.label { font:500 12px/1.5 var(--font); letter-spacing:.02em; color:var(--ink-2); }
.micro { font:400 11px/1.4 var(--font-mono); }
.muted { color:var(--ink-2); }
.muted-3 { color:var(--ink-3); }
.tabular { font-variant-numeric:tabular-nums; }

/* buttons */
.btn, .btn-ghost { display:inline-flex; align-items:center; justify-content:center; padding:8px 16px; border-radius:6px; border:1px solid transparent; font:500 14px/1.2 var(--font); text-decoration:none; cursor:pointer; }
.btn { background:var(--accent); color:var(--on-accent); }
.btn:hover { background:color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--ring); }
.btn-ghost:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.btn-ghost--copy { padding:2px 8px; font-size:12px; margin-left:8px; vertical-align:middle; }

/* nav */
.nav { border-bottom:1px solid var(--hairline); background:var(--page); }
.nav .wrap { display:flex; align-items:center; gap:16px; min-height:56px; flex-wrap:wrap; }
.lockup { display:inline-flex; align-items:center; gap:.5em; text-decoration:none; font-size:14px; }
.lockup .mark { width:20px; height:20px; }
.nav nav { min-width:0; margin:0 auto 0 8px; }
.nav-links { display:flex; flex-wrap:wrap; gap:8px 24px; list-style:none; padding:0; margin:0; }
.nav-links a { text-decoration:none; color:var(--ink-2); font-size:13px; }
.nav-links a:hover { color:var(--ink); text-decoration:underline; }
.nav-end { display:flex; align-items:center; gap:12px; margin-left:auto; }
.theme-toggle { width:36px; height:36px; display:inline-grid; place-items:center; border-radius:6px; border:1px solid var(--ring); background:transparent; color:var(--ink); font-size:16px; line-height:1; cursor:pointer; }
.theme-toggle:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
@media (max-width:48rem) { .lockup span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .nav nav { order:3; flex-basis:100%; margin:0; padding-bottom:12px; } }

/* sections */
section { padding:48px 0; border-top:1px solid var(--hairline); }
section > .wrap > h2 { margin-bottom:24px; }
.lede { max-width:56rem; color:var(--ink-2); }
.lede + * { margin-top:24px; }
.caption { margin-top:12px; font-size:13px; color:var(--ink-3); max-width:56rem; }
.caption a { color:inherit; }
.caption + .ledger { margin-top:8px; }

/* hero */
.hero { border-top:0; padding:64px 0 48px; }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; }
.hero-title { margin-bottom:16px; }
.hero p { color:var(--ink-2); max-width:34rem; margin-bottom:24px; }
.hero-actions { display:flex; align-items:center; gap:24px; }
@media (max-width:48rem) { .hero { padding-top:32px; } .hero .wrap { grid-template-columns:1fr; gap:32px; } .hero-title { font-size:32px; } }

/* connect block */
.connect { background:var(--surface); border:1px solid var(--hairline); border-radius:6px; overflow:hidden; }
.tabs { display:flex; border-bottom:1px solid var(--hairline); }
.tabs button { flex:1; padding:8px 12px; background:transparent; border:0; border-right:1px solid var(--hairline); color:var(--ink-2); font:500 12px/1.5 var(--font); letter-spacing:.02em; cursor:pointer; }
.tabs button:last-child { border-right:0; }
.tabs button[aria-selected="true"] { color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink); }
.connect pre { padding:16px; font:400 13px/1.5 var(--font-mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.connect pre[hidden] { display:none; }
.connect-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 16px; border-top:1px solid var(--hairline); }
.connect-foot .btn-ghost--copy { margin:0; }

/* ledger (style guide section 4) */
.ledger { border-top:1px solid var(--ink); }
.ledger-row { display:grid; grid-template-columns:minmax(0,34%) minmax(0,66%); border-bottom:1px solid var(--hairline); }
.ledger dt, .ledger dd { min-width:0; padding:12px 0; margin:0; }
.ledger dt { padding-right:16px; font:500 12px/1.5 var(--font); letter-spacing:.02em; color:var(--ink-2); }
.ledger dd { font:400 13px/1.5 var(--font-mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.ledger .unit { color:var(--ink-2); }
.ledger .src { font-size:11px; color:var(--ink-3); margin-left:8px; }
.ledger .val--quote { color:var(--accent); }
.ledger .hash, .ledger .url { overflow-wrap:anywhere; word-break:break-all; }
.ledger .prose { font-family:var(--font); color:var(--ink-2); }
.ledger pre { font:400 13px/1.5 var(--font-mono); white-space:pre; overflow-x:auto; }
.ledger .fields { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:4px 12px; }
.ledger .status { display:inline-flex; align-items:center; gap:6px; }
.ledger .dot { width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block; }
.ledger .status--good { color:var(--status-good); }
.ledger .nested { margin:0; }
.ledger .nested div { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:0 16px; padding:4px 0; border-top:1px dotted var(--hairline); }
.ledger .nested .hash { grid-column:1 / -1; }
@media (max-width:560px) { .ledger-row { grid-template-columns:1fr; } .ledger dt { padding-bottom:0; } }
.ledgers { display:grid; gap:32px; }
.ledgers h3 { margin-bottom:12px; }
.ledger--full { margin-top:8px; max-width:56rem; }
.caption--quote { margin-top:32px; }
.price + .lede, .table-wrap + .lede { margin-top:24px; }
@media (min-width:64rem) { .ledgers { grid-template-columns:repeat(3, minmax(0,1fr)); } .ledgers .ledger-row { grid-template-columns:1fr; } .ledgers .ledger dt { padding-bottom:0; } }

/* tables */
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; border-top:1px solid var(--ink); }
th { text-align:left; font:500 12px/1.5 var(--font); letter-spacing:.02em; color:var(--ink-2); padding:12px 16px 12px 0; border-bottom:1px solid var(--hairline); vertical-align:bottom; }
td { padding:12px 16px 12px 0; border-bottom:1px solid var(--hairline); vertical-align:top; font-size:13px; font-variant-numeric:tabular-nums; }
td.prose { font-family:var(--font); font-size:14px; }
@media (max-width:48rem) { .catalog thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .catalog tr { display:grid; padding:12px 0; border-bottom:1px solid var(--hairline); } .catalog td { border:0; padding:2px 0; } .catalog td::before { content:attr(data-h) ": "; font:500 12px/1.5 var(--font); letter-spacing:.02em; color:var(--ink-2); } .catalog td.prose::before { content:none; } }
.price { max-width:56rem; }

/* connect section */
.tools { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13px; }

/* footer */
footer { border-top:1px solid var(--hairline); background:var(--surface); padding:32px 0; font-size:13px; color:var(--ink-2); }
footer .wrap { display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; }
footer nav { display:flex; gap:24px; }
footer a { color:inherit; }

/* legal pages */
.legal { max-width:56rem; padding:48px 0; }
.legal h1 { font:600 20px/1.3 var(--font); margin-bottom:8px; }
.legal h2 { margin:32px 0 8px; }
.legal p, .legal li { color:var(--ink-2); }
.legal ul { padding-left:20px; }
.legal li { margin:4px 0; }

/* the mark (style guide section 7): constructs once on load, static under reduced motion */
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes appear { to { opacity:1; } }
.mark--construct .mark-nodes circle { opacity:0; animation:appear .16s ease-out forwards; }
.mark--construct .mark-nodes circle:nth-child(1) { animation-delay:.6s } .mark--construct .mark-nodes circle:nth-child(2) { animation-delay:.68s }
.mark--construct .mark-nodes circle:nth-child(3) { animation-delay:.76s } .mark--construct .mark-nodes circle:nth-child(4) { animation-delay:.84s }
.mark--construct .mark-nodes circle:nth-child(5) { animation-delay:.92s } .mark--construct .mark-nodes circle:nth-child(6) { animation-delay:1s }
.mark--construct .mark-hex { stroke-dasharray:54; stroke-dashoffset:54; animation:draw .6s ease-in-out 1.1s forwards; }
@media (prefers-reduced-motion: reduce), print {
  html { scroll-behavior:auto; }
  .mark--construct .mark-hex { animation:none; stroke-dashoffset:0; }
  .mark--construct .mark-nodes circle { animation:none; opacity:1; }
}

/* style guide section 10: 6f6f6f on the dark page is AA large only, so small muted text takes --ink-2 there */
html[data-theme="dark"] .caption, html[data-theme="dark"] .ledger .src, html[data-theme="dark"] .muted-3 { color:var(--ink-2); }