:root { color-scheme: light; --ink:#142325; --muted:#425456; --accent:#1f6f5b; --accent-strong:#11483b; --paper:#fbfcfa; --canvas:#e9eeee; --wash:#eef4f1; --line:#cfd9d7; --accent-soft:#d9ebe5; --deep:#0d1b1c; --focus:#8a6419; --on-dark:#edf5f2; --on-dark-muted:#c9d8d4; --radius:.5rem; --font-body:"Avenir Next","Segoe UI",Arial,sans-serif; --font-head:"Avenir Next","Segoe UI",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-padding-block-start:2rem; }
body { margin:0; background:linear-gradient(180deg,var(--canvas) 0,#f6f8f6 44rem,var(--deep) 100%); color:var(--ink); font:1rem/1.7 var(--font-body); }
a { color:var(--accent); text-underline-offset:.22em; text-decoration-thickness:.08em; overflow-wrap:anywhere; }
a:hover { color:var(--accent-strong); }
:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
img { display:block; max-inline-size:100%; block-size:auto; }
button,summary { font:inherit; }
.container { inline-size:min(100% - 2rem,74rem); margin-inline:auto; }
.skip-link { position:absolute; inset-block-start:-10rem; inset-inline-start:1rem; z-index:10; padding:.75rem 1rem; background:white; }
.skip-link:focus { inset-block-start:1rem; }
.site-header { border-block-end:1px solid var(--line); background:var(--canvas); }
.header-bar { display:flex; align-items:center; gap:.75rem; min-block-size:5rem; position:relative; }
.brand { display:flex; align-items:center; gap:.5rem; color:var(--ink); font:bold 1.45rem/1 var(--font-head); text-decoration:none; margin-inline-end:auto; }
.brand-mark { inline-size:2.75rem; block-size:2.75rem; flex-shrink:0; }
.locale-switcher { display:flex; gap:.1rem; }
.locale-switcher a,.locale-switcher span { display:grid; place-items:center; min-inline-size:2.75rem; min-block-size:2.75rem; border-radius:.5rem; font-size:.8rem; font-weight:700; text-decoration:none; }
.locale-switcher span { color:var(--ink); background:var(--wash); }
.site-menu > summary { cursor:pointer; list-style:none; min-block-size:2.75rem; padding:.65rem .8rem; border:1px solid var(--line); border-radius:.6rem; font-size:.85rem; font-weight:650; }
.site-menu > summary::-webkit-details-marker { display:none; }
.menu-icon { font-size:1.4rem; line-height:1; }
.menu-label { display:none; }

.site-menu[open] > summary { background:var(--wash); }
.menu-panel { position:absolute; z-index:5; inset-block-start:calc(100% - .2rem); inset-inline:0; padding:1rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 16px 40px #0d1b1c1a; max-block-size:75dvh; overflow:auto; }
.menu-panel ul { list-style:none; margin:0; padding:0; }
.menu-panel a,.docs-menu > summary { display:block; padding:.65rem .75rem; min-block-size:2.75rem; border-radius:.5rem; color:var(--ink); text-decoration:none; cursor:pointer; }
.menu-panel a:hover,.docs-menu > summary:hover { background:var(--wash); color:var(--accent); }
.docs-menu > summary::after { content:" +"; }
.docs-menu[open] > summary::after { content:" −"; }
.docs-menu ul { margin-inline-start:1rem; border-inline-start:1px solid var(--line); }
.quick-links { display:none; }
main { margin-block:1rem 2rem; padding:2.5rem clamp(1rem,3vw,2rem) 4rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }
.publication { max-inline-size:54rem; margin-inline:auto; }
.publication:has(.hero) { max-inline-size:none; }
h1,h2,h3 { font-family:var(--font-head); font-weight:700; line-height:1.12; letter-spacing:-.035em; overflow-wrap:anywhere; }
h1 { font-size:clamp(2.25rem,6vw,4.5rem); margin:0 0 1.25rem; max-inline-size:20ch; }
h2 { font-size:clamp(1.75rem,3.5vw,2.6rem); margin-block:3rem 1rem; }
h3 { font-size:1.35rem; margin-block:1.5rem .65rem; }
p { margin-block:.8rem 1.25rem; }
.publication > p:first-of-type { font-size:1.15rem; color:var(--muted); }
li { margin-block:.35rem; }
pre { padding:1.25rem; background:var(--wash); border:1px solid var(--line); border-radius:.8rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.88rem; line-height:1.7; }
code { font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:.9em; overflow-wrap:anywhere; }
:not(pre) > code { padding:.15em .3em; background:var(--wash); border-radius:.25rem; }
blockquote { margin-inline:0; padding:.2rem 1.25rem; border-inline-start:4px solid var(--accent); background:var(--wash); }
table { table-layout:fixed; inline-size:100%; border-collapse:collapse; margin-block:1.5rem; }
th,td { overflow-wrap:anywhere; text-align:start; padding:.75rem 1rem; border-block-end:1px solid var(--line); vertical-align:top; }
th { background:var(--wash); }
.hero { display:grid; gap:2rem; align-items:center; padding-block:1rem 2.5rem; }
.hero h1 { font-size:clamp(2.7rem,6vw,5.25rem); max-inline-size:14ch; }
.hero h1 span { color:var(--accent); }
.hero h1 .hero-product { display:block; font:700 .76rem/1.5 ui-monospace,monospace; text-transform:uppercase; letter-spacing:.12em; margin-block-end:1.25rem; }
.eyebrow { display:block; font:700 .76rem/1.5 ui-monospace,monospace; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin-block:0 1.25rem; }
.lead { font-size:clamp(1.1rem,1.6vw,1.25rem); color:var(--muted); max-inline-size:48ch; }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-block:1.5rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; text-align:center; min-block-size:3rem; padding:.8rem 1.25rem; border:1px solid var(--accent); border-radius:.65rem; background:var(--accent); color:#fff; text-decoration:none; font-weight:650; line-height:1.4; }
.btn:hover { color:#fff; background:var(--accent-strong); }
.btn-secondary { background:#fff; color:var(--accent); }
.btn-secondary:hover { background:var(--wash); color:var(--accent-strong); }
.small-note { color:var(--muted); font-size:.88rem; }
.source-window { background:var(--wash); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; box-shadow:6px 8px 0 var(--accent-soft); min-inline-size:0; }
.window-label { display:flex; gap:.75rem; justify-content:space-between; margin-block-end:1rem; font:.75rem/1.5 ui-monospace,monospace; color:var(--muted); }
.source-window pre { background:white; margin:0; border-color:var(--line); padding:1rem; font-size:.78rem; }
.output-list { display:grid; gap:.7rem; margin-block-start:1.25rem; }
.output-link { display:flex; justify-content:space-between; gap:.5rem; align-items:center; min-block-size:3rem; padding:.7rem .8rem; background:white; border:1px solid var(--line); border-radius:.65rem; text-decoration:none; font:.8rem/1.5 ui-monospace,monospace; }
.output-link strong { color:var(--muted); font:650 .75rem/1.5 system-ui,sans-serif; }
.benefit-strip { display:grid; gap:1rem; padding:1.5rem; margin-block:1.5rem 3rem; background:var(--accent-soft); border-radius:var(--radius); }
.benefit-strip strong { display:block; font:bold 1.45rem/1.3 var(--font-head); letter-spacing:-.025em; }
.benefit-strip span { font-size:.9rem; color:var(--muted); }
.content-section { padding-block:1rem 2rem; }
.content-section h2 { margin-block-start:0; max-inline-size:23ch; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:1rem; margin-block:1.5rem; }
.card { padding:1.5rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; min-inline-size:0; }
.card h3 { margin-block-start:0; }
.card p { color:var(--muted); }
.card p:last-child { margin-block-end:0; }
.card-tag { display:block; margin-block-end:1rem; color:var(--accent); font:.75rem/1.5 ui-monospace,monospace; }
.workflow { padding:1.5rem; background:var(--wash); border-radius:var(--radius); }
.workflow ol { padding-inline-start:1.5rem; }
.workflow li { padding-inline-start:.5rem; margin-block:1.25rem; }
.workflow li::marker { color:var(--accent); font-weight:700; }
.proof-block { border-block:1px solid var(--line); padding-block:2.5rem; margin-block:1rem 3rem; }
.proof-block h2 { margin-block-start:0; }
.support-panel { padding:1.5rem; background:linear-gradient(135deg,var(--deep),var(--accent-strong)); color:var(--on-dark); border-radius:var(--radius); }
.support-panel h2 { margin-block-start:0; }
.support-panel p { max-inline-size:56ch; }
.support-panel .eyebrow { color:var(--accent-soft); }
.support-panel a { color:#fff; }
.support-panel .btn { background:#fff; border-color:#fff; color:var(--accent); }
.support-panel .btn:hover { background:var(--wash); }
.support-panel .small-note { color:var(--on-dark-muted); }
.author-block { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:start; margin-block:2rem; }
.author-photo { inline-size:100px; flex-shrink:0; border-radius:1rem; }
.author-text { margin-inline-start:1.5rem; min-inline-size:0; }
.author-text p:first-child { margin-block-start:0; }
.site-footer { padding-block:2rem; background:transparent; }
.site-footer a,.site-footer strong { color:var(--on-dark); }
.site-footer a:hover { color:var(--accent-soft); }
.site-footer :focus-visible,.support-panel :focus-visible { outline-color:#c8962f; }
.footer-inner { display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:start; color:var(--on-dark-muted); font-size:.85rem; }
.footer-inner p { margin:0; }
.footer-links { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.footer-links a { display:inline-flex; align-items:center; min-block-size:2.75rem; }
@media (max-width:24rem) { .brand { font-size:1.15rem; gap:.35rem; } .header-bar { gap:.35rem; } .site-menu > summary { padding:.65rem .5rem; } .author-block { flex-direction:column; } .author-text { margin-inline-start:0; margin-block-start:1rem; } }
@media (min-width:40rem) { .container { inline-size:min(100% - 4rem,74rem); } .benefit-strip { grid-template-columns:repeat(3,minmax(0,1fr)); } .menu-panel { inset-inline-start:auto; inline-size:24rem; } .support-panel,.workflow { padding:2.5rem; } }
@media (min-width:64rem) { .menu-icon { display:none; } .menu-label { display:inline; } main { padding-block-start:4rem; } .hero { grid-template-columns:1.15fr 1fr; gap:3.5rem; padding-block:1rem 3rem; } .quick-links { display:flex; gap:1.25rem; } .quick-links a { min-block-size:2.75rem; display:flex; align-items:center; font-size:.9rem; text-decoration:none; } .source-window { padding:1.5rem; } .content-section { padding-block:2rem 3rem; } }
@media (prefers-reduced-motion:no-preference) { .btn { transition:background .15s ease; } }
@media (forced-colors:active) { .btn,.source-window,.card,.support-panel { border:1px solid CanvasText; } }