:root { color-scheme: light dark; --ink:#1e293b; --muted:#526072; --paper:#fafaf8; --card:#fff; --line:#d9e1e8; --accent:#166a68; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 ui-sans-serif,system-ui,"Segoe UI",sans-serif; } a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; } .site-header { max-width:1120px; margin:auto; padding:1.1rem 1.5rem; display:flex; gap:1rem; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); } .brand { color:var(--ink); font-weight:700; text-decoration:none; white-space:nowrap; } .brand span,.badge { color:var(--accent); font-size:.78em; font-weight:700; } nav { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:flex-end; } nav a { text-decoration:none; font-size:.92rem; } .content { width:min(1120px,100%); padding:2.7rem 1.5rem 4rem; margin:auto; } h1,h2,h3 { line-height:1.2; color:var(--ink); } h1 { font-size:clamp(2.1rem,5vw,4.2rem); margin:.1rem 0 .65rem; } h2 { margin-top:3rem; } .lead { font-size:1.25rem; color:var(--muted); max-width:50rem; } .notice { padding:1rem 1.1rem; background:#e8f4f1; border-left:4px solid var(--accent); border-radius:.25rem; } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin:1.5rem 0; } .card { border:1px solid var(--line); background:var(--card); border-radius:.6rem; padding:1rem; box-shadow:0 2px 10px #16243b0a; } .card h3 { margin:.1rem 0 .4rem; } .button { display:inline-block; padding:.6rem .9rem; background:var(--accent); color:#fff; border-radius:.35rem; text-decoration:none; margin:.2rem .45rem .2rem 0; } .metric { font-size:1.8rem; font-weight:750; color:var(--accent); } pre { overflow:auto; padding:1rem; background:#17212b; color:#ecf5f2; border-radius:.45rem; } code { overflow-wrap:anywhere; } table { display:block; overflow:auto; width:100%; border-collapse:collapse; } th,td { border:1px solid var(--line); padding:.55rem .65rem; text-align:left; vertical-align:top; } th { background:#edf3f3; } img { max-width:100%; height:auto; border:1px solid var(--line); border-radius:.35rem; } footer { border-top:1px solid var(--line); max-width:1120px; padding:1.2rem 1.5rem; margin:auto; color:var(--muted); font-size:.9rem; } @media (max-width:720px) { .site-header { align-items:flex-start; flex-direction:column; } nav { justify-content:flex-start; } .content { padding-top:1.7rem; } }