:root { color-scheme: light; --ink:#192520; --muted:#63726b; --line:#d9e2dc; --paper:#f3f6f3; --panel:#fff; --green:#166f4a; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); } a { color:#155f42; text-decoration-thickness:1px; text-underline-offset:3px; } a:hover { color:#0b422c; }
.app-topbar { position:sticky; top:0; z-index:1000; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:12px clamp(18px,3vw,44px); background:#fff; border-bottom:1px solid var(--line); box-shadow:0 3px 12px #223d2d0b; } .app-brand { color:var(--ink); font-size:1.35rem; font-weight:800; letter-spacing:-.025em; line-height:1.2; text-decoration:none; } .app-section-toggle { display:inline-flex; flex:0 0 auto; gap:4px; padding:4px; border:1px solid var(--line); border-radius:11px; background:#eef2ee; } .app-section-toggle a { padding:9px 15px; border-radius:8px; color:var(--muted); font-size:.9rem; font-weight:650; text-decoration:none; white-space:nowrap; } .app-section-toggle a:hover { color:#10553a; } .app-section-toggle a.active { background:#166f4a; color:#fff; box-shadow:0 1px 4px #152b1c17; }
.layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:36px; width:min(1440px,100%); margin:0 auto; padding:28px; } .sidebar { position:sticky; top:20px; align-self:start; max-height:calc(100vh - 40px); overflow:auto; padding:4px 10px 20px 0; } .nav-group { margin-bottom:22px; } .nav-group h2 { margin:0 0 8px; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .nav-group a { display:block; padding:6px 9px; border-radius:6px; color:var(--ink); font-size:.89rem; text-decoration:none; } .nav-group a[aria-current=page] { color:#10553a; background:#e5f2ea; font-weight:700; }
.article { min-width:0; padding:34px clamp(22px,5vw,76px); background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 3px 14px #223d2d0b; } .breadcrumb { margin:0 0 20px; color:var(--green); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } article { max-width:900px; line-height:1.68; } article h1 { margin:0 0 22px; font-size:clamp(2rem,4vw,3rem); line-height:1.12; letter-spacing:-.035em; } article h2 { margin:2.1em 0 .55em; font-size:1.55rem; line-height:1.25; } article h3 { margin:1.8em 0 .45em; font-size:1.2rem; } article p, article ul, article ol, article blockquote { margin:0 0 1.1em; } article li { margin:.3em 0; } article code { padding:.12em .32em; border-radius:4px; background:#eff3f0; font: .91em ui-monospace,SFMono-Regular,Consolas,monospace; } article pre { overflow:auto; margin:1.2em 0; padding:17px; border-radius:9px; background:#15221a; color:#deefe4; line-height:1.55; } article pre code { padding:0; background:transparent; color:inherit; font-size:.85rem; } article blockquote { padding:4px 18px; border-left:3px solid #78ad8d; color:var(--muted); } article hr { margin:2em 0; border:0; border-top:1px solid var(--line); } .table-wrap { width:100%; overflow:auto; margin:1.2em 0; } table { width:100%; border-collapse:collapse; } th,td { min-width:100px; padding:9px 10px; border-bottom:1px solid #e7ece8; text-align:left; vertical-align:top; } th { background:#f4f7f4; font-size:.82rem; } .page-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; max-width:900px; margin-top:48px; padding-top:18px; border-top:1px solid var(--line); font-size:.9rem; }
@media (max-width:850px) { .layout { grid-template-columns:1fr; gap:12px; padding:14px; } .sidebar { position:static; max-height:none; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; columns:2; } .nav-group { break-inside:avoid; } .article { padding:24px 18px; } }
@media (max-width:520px) { .sidebar { columns:1; } .app-topbar { align-items:stretch; flex-direction:column; gap:10px; padding:11px 12px; } .app-brand { font-size:1.15rem; } .app-section-toggle { align-self:flex-start; } }

.code-example { margin:1.2em 0; } .code-example.has-calculator-link figcaption { display:flex; justify-content:flex-end; padding:7px 12px; border:1px solid var(--line); border-bottom:0; border-radius:9px 9px 0 0; background:#f4f7f4; } .code-example pre { margin:0; border-radius:0 0 9px 9px; } .code-example:not(.has-calculator-link) pre { border-radius:9px; } .open-in-calculator { color:#155f42; font-size:.82rem; font-weight:700; text-decoration:none; } .open-in-calculator:hover { text-decoration:underline; }