:root { color-scheme:dark; --bg:#111412; --panel:#1a1e1a; --line:#363c34; --ink:#f3f4e9; --muted:#b5bcaf; --acid:#dcf880; --purple:#bdb7ed; --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
a:focus-visible { outline:3px solid var(--acid); outline-offset:5px; }
::selection { background:var(--acid); color:var(--bg); }
.wrap { max-width:1200px; margin:auto; padding-inline:40px; }
.skip { position:fixed; top:-80px; left:16px; z-index:10; padding:14px 20px; background:var(--acid); color:var(--bg); }
.skip:focus { top:16px; }
.nav { min-height:98px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; font-size:27px; font-weight:900; letter-spacing:-1.5px; text-decoration:none; }
.brand svg { width:32px; height:32px; color:var(--acid); }
.nav-links { display:flex; gap:24px; align-items:center; flex-wrap:wrap; font-size:13px; }
.nav-links a { text-decoration:none; }
.nav-links a:hover { color:var(--acid); }
.nav-cta { border:1px solid #626c58; padding:12px 17px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:27px; color:var(--muted); font:11px/1.8 var(--mono); }
.breadcrumbs a { text-decoration:none; }
.breadcrumbs a:hover { color:var(--acid); }
.eyebrow { font:11px/1.7 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--acid); }
.hero { display:grid; grid-template-columns:1.5fr 1fr; gap:50px; padding-block:48px 46px; align-items:center; }
h1 { font-size:clamp(40px,4.8vw,60px); font-weight:600; line-height:1.08; letter-spacing:-.05em; margin:20px 0; text-wrap:balance; }
.lead { color:var(--muted); font-size:18px; line-height:1.8; margin-bottom:22px; }
.byline { color:var(--muted); font:10px/1.8 var(--mono); }
.principle { background:var(--purple); color:#222333; padding:30px; box-shadow:7px 7px 0 #090c0a; }
.principle .eyebrow { color:#41425b; }
.principle h2 { font-size:29px; line-height:1.2; margin:19px 0 15px; letter-spacing:-.025em; }
.principle p { font-size:14px; line-height:1.8; margin:0; }
.scope { padding:18px 22px; border-block:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.8; }
.scope strong { color:var(--ink); }
.reading { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:65px; padding-block:18px 55px; }
.body-copy { min-width:0; }
.body-copy section { padding-block:28px 15px; }
.body-copy h2 { font-size:29px; font-weight:600; line-height:1.25; letter-spacing:-.03em; margin:0 0 20px; }
.body-copy h3 { font-size:20px; line-height:1.4; margin:27px 0 12px; }
.body-copy p,.body-copy li,.body-copy dd { color:var(--muted); font-size:16px; line-height:1.85; }
.body-copy p { margin:0 0 19px; }
.body-copy strong { color:var(--ink); }
.body-copy a { color:var(--acid); text-underline-offset:4px; }
.body-copy code { font:0.85em/1.6 var(--mono); overflow-wrap:anywhere; }
.body-copy .term-link { color:var(--ink); text-decoration-thickness:1px; }
.body-copy .source-note { font-size:13px; }
.download { display:inline-block; padding:16px 20px; border:1px solid var(--acid); font-weight:700; }
.table-wrap:focus-visible { outline:3px solid var(--acid); outline-offset:4px; }
.case-table th { width:26%; }
.case-table td:last-child { width:26%; }
.body-copy ul { padding-left:22px; }
.body-copy li { padding-left:4px; margin-bottom:12px; }
.flow { padding:0; list-style:none; counter-reset:flow; margin:24px 0; }
.flow li { display:grid; grid-template-columns:34px 1fr; gap:14px; counter-increment:flow; padding:17px 0; margin:0; border-top:1px solid var(--line); }
.flow li::before { content:"0" counter(flow); color:var(--acid); font:12px/2 var(--mono); }
.flow strong { display:block; }
.example { border-left:3px solid var(--acid); padding:18px 23px; margin:24px 0; background:var(--panel); }
.example p:last-child { margin-bottom:0; }
.example .eyebrow { margin-bottom:9px; }
.toc { align-self:start; position:sticky; top:25px; padding-top:33px; }
.toc h2 { font:11px/1.8 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 16px; }
.toc a { display:block; border-top:1px solid var(--line); padding:13px 0; font-size:13px; line-height:1.7; text-decoration:none; }
.toc a:hover { color:var(--acid); }
.table-wrap { overflow-x:auto; margin:22px 0; }
table { border-collapse:collapse; width:100%; font-size:14px; line-height:1.8; }
caption { text-align:left; color:var(--muted); font:11px/1.8 var(--mono); padding-bottom:12px; }
th,td { text-align:left; vertical-align:top; padding:14px 14px 14px 0; border-top:1px solid var(--line); }
th { color:var(--ink); }
td { color:var(--muted); }
tbody th { width:31%; }
.zillq { padding:27px; background:var(--panel); border:1px solid #586247; }
.body-copy .zillq { margin-top:28px; }
.related { border-top:1px solid var(--line); padding-block:38px 45px; }
.related h2 { font-size:28px; letter-spacing:-.025em; font-weight:600; margin:14px 0 24px; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.card { text-decoration:none; padding:25px; border:1px solid var(--line); background:var(--panel); }
.card:hover { border-color:var(--acid); }
.card span { color:var(--acid); font:10px/1.8 var(--mono); text-transform:uppercase; }
.card h3 { font-size:20px; line-height:1.35; margin:14px 0; }
.card p { color:var(--muted); font-size:13px; line-height:1.8; margin:0; }
footer { border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:22px; padding-block:27px 35px; }
footer .brand { font-size:19px; }
footer .brand svg { width:23px; height:23px; }
footer p,footer>a:last-child { margin:0; color:var(--muted); font:10px/1.8 var(--mono); }
footer>a:last-child { color:var(--acid); text-decoration:none; }
@media(max-width:950px) { .wrap { padding-inline:28px; } .hero { gap:30px; } .reading { grid-template-columns:minmax(0,1fr) 210px; gap:35px; } .nav-links { gap:18px; } }
@media(max-width:760px) { .wrap { padding-inline:22px; } .nav { flex-wrap:wrap; gap:20px; padding-block:23px; } .nav-links { gap:17px; } .hero,.reading { grid-template-columns:1fr; gap:28px; } .hero { padding-block:35px; } .lead { font-size:16px; } .principle { box-shadow:5px 5px 0 #090c0a; } .toc { position:static; grid-row:1; padding-top:6px; } .toc a { display:inline-block; border:0; padding:5px 16px 5px 0; text-decoration:underline; text-underline-offset:4px; } .reading { padding-top:20px; } .cards { grid-template-columns:1fr; } .body-copy h2 { font-size:27px; } }
@media(max-width:420px) { .wrap { padding-inline:18px; } .nav-links { font-size:12px; gap:16px; } .nav-cta { padding:10px 13px; } .principle { padding:25px; } .scope { padding-inline:0; } h1 { font-size:39px; } .body-copy p,.body-copy li { font-size:15px; } th,td { padding-right:10px; font-size:13px; } .zillq { padding:23px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media screen and (max-width:600px) {
  .case-table,.case-table tbody,.case-table tr,.case-table th,.case-table td { display:block; width:100%; }
  .case-table caption { display:block; width:100%; }
  .case-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .case-table th { padding:18px 0 8px; }
  .case-table td,.case-table td:last-child { width:100%; border:0; padding:0 0 14px; }
  .case-table td:last-child::before { content:"Expected result: "; display:block; font-weight:bold; color:var(--ink); }
}
@media print {
  :root { color-scheme:light; --bg:#fff; --panel:#fff; --line:#bbb; --ink:#111; --muted:#333; --acid:#111; }
  body { background:#fff; color:#111; }
  .wrap { max-width:none; padding:0; }
  .nav,.skip,.toc,.related,footer,.zillq,.principle { display:none; }
  .hero,.reading { display:block; padding:12px 0; }
  h1 { font-size:30px; }
  .body-copy h2 { font-size:22px; break-after:avoid; }
  .body-copy h3 { break-after:avoid; }
  .body-copy p,.body-copy li,.lead { font-size:11pt; line-height:1.5; }
  .table-wrap { overflow:visible; }
  table { font-size:9pt; }
  tr,.example { break-inside:avoid; }
  .byline { font-size:9pt; }
}