:root { --ink:#14161a; --paper:#f7f5f0; --card:#fff; --mute:#62666d; --line:#dcd8cf; --acc:#e4572e; --acc-soft:#fde9e2; --blue:#2f5fd0; --sg:#5b7fbf; --night:#0e1014; --night-line:#2a2e37; --dim:#8b9099; --bar:#f1eee7; }
* { box-sizing:border-box; } html, body { margin:0; }
body { font:17px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper); }
.mono, code, pre { font-family:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
a { color:inherit; text-underline-offset:3px; }
.wrap { max-width:1080px; margin:0 auto; padding:0 28px; } .narrow { max-width:800px; }
.top { display:flex; justify-content:space-between; align-items:center; padding:20px 0; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:680; font-size:19px; letter-spacing:-0.02em; text-decoration:none; } .brand svg { width:24px; height:24px; }
.top nav { display:flex; gap:24px; font-size:15.5px; } .top nav a { text-decoration:none; color:var(--mute); } .top nav a:hover, .top nav a.on { color:var(--ink); } .top nav a.on { font-weight:600; }
.btn { display:inline-block; background:var(--ink); color:#fff; border:1.5px solid var(--ink); border-radius:9px; padding:10px 17px; font-size:16px; text-decoration:none; font-weight:600; } .btn.ghost { background:transparent; color:var(--ink); }
.hljs-keyword, .hljs-built_in, .hljs-literal { color:#a8480f; } .hljs-string, .hljs-regexp { color:#1d7a5f; } .hljs-comment { color:#8d9199; font-style:italic; }
.hljs-title, .hljs-name { color:#2a55b8; } .hljs-attr { color:#7a3e9d; } .hljs-number { color:#b0570f; }
.card { border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; min-width:0; } .card + .card { margin-top:12px; }
.card.night { background:var(--night); border-color:var(--night); color:#e9e6df; }
.ptab { font:500 12px ui-monospace,Menlo,monospace; color:var(--mute); padding:7px 14px; background:var(--bar); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; } .ptab a { color:inherit; }
.night .ptab { background:#171a22; border-color:var(--night-line); color:var(--dim); }
.card pre { margin:0; padding:12px 14px; font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.card pre.nowrap { white-space:pre; overflow-x:auto; word-break:normal; }
.foot { font-size:13px; line-height:1.5; color:var(--dim); padding:8px 14px; border-top:1px solid var(--night-line); }
.tks { padding:10px 14px 6px; line-height:1.9; } .tk { font:14px ui-monospace,Menlo,monospace; border:1px solid #3a425a; border-radius:5px; padding:3px 3px; margin-right:2px; background:#1b2030; white-space:pre; } .tk.a { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700; }
.then { font-size:13px; color:#c9cedb; background:#171a22; border-top:1px solid var(--night-line); border-bottom:1px solid var(--night-line); padding:6px 14px; } .then b { color:#fff; font-family:ui-monospace,Menlo,monospace; font-weight:600; }
.cols { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:22px; align-items:start; margin:22px 0; }
p.note { font-size:14.5px; line-height:1.5; color:var(--mute); margin:10px 0 0; }
.term { background:var(--night); color:#e9e6df; border-radius:12px; padding:14px 16px; font:14px/1.7 ui-monospace,Menlo,monospace; overflow:auto; white-space:pre-wrap; } .term .p { color:#7d8494; } .term .g { color:#8fd3a5; } .term .r { color:#ff9d7a; }
pre.out { color:#dfe3ee; } pre.out .cut { background:#3a1d14; color:#ffc7b3; display:block; margin:0 -14px; padding:1px 14px; box-shadow:inset 3px 0 0 var(--acc); } pre.out b { color:#bdebcb; font-weight:600; } pre.out i { font-style:normal; color:#7d8494; }
.run { padding:4px 14px 8px; } .turn { padding:11px 0; border-bottom:1px solid var(--night-line); } .turn:last-child { border:0; }
.meta { font-size:12.5px; color:var(--dim); margin-bottom:6px; } .think { font-size:14px; color:#aab0bf; font-style:italic; margin-bottom:7px; line-height:1.45; }
.call { font:13px/1.55 ui-monospace,Menlo,monospace; word-break:break-word; } .call b { background:var(--blue); color:#fff; border-radius:5px; padding:1px 7px; margin-right:8px; font-weight:600; }
pre.result { font:12.5px/1.5 ui-monospace,Menlo,monospace; color:#bdebcb; margin:6px 0 0; padding:0; white-space:pre-wrap; }
b.n { display:inline-block; width:17px; height:17px; border-radius:50%; background:var(--ink); color:#fff; font:700 10.5px/17px ui-sans-serif,system-ui; text-align:center; vertical-align:1px; margin-left:4px; }
ol.keys { list-style:none; margin:14px 0 0; padding:0; font-size:15.5px; line-height:1.45; } ol.keys li { display:grid; grid-template-columns:26px 1fr; margin:7px 0; } ol.keys b.n { margin:2px 0 0; }
table.t { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:16px; margin:18px 0 6px; }
table.t th { text-align:left; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); padding:10px 14px; border-bottom:1px solid var(--line); font-weight:600; }
table.t td { padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.4; } table.t tr:last-child td { border-bottom:0; } td.num { font-variant-numeric:tabular-nums; font-weight:650; white-space:nowrap; } tr.us td { background:var(--acc-soft); }
table.t code { font-size:13px; } table.t tr.g td { background:var(--bar); font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:600; color:var(--mute); padding:6px 14px; }
.chart { border:1px solid var(--line); background:#fff; border-radius:12px; padding:16px 18px 14px; margin:18px 0 0; } .chart h4 { margin:0 0 2px; font-size:16px; } .chart .sub2 { font-size:13.5px; color:var(--mute); margin:0 0 10px; }
.lg { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13.5px; margin-bottom:8px; } .lg i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.brow { display:grid; grid-template-columns:96px 1fr; gap:2px 10px; padding:7px 0; border-top:1px solid #efece5; align-items:center; } .band { grid-row:span 2; font-size:13.5px; color:var(--mute); }
.bs { display:grid; grid-template-columns:minmax(0,1fr) 66px; align-items:center; gap:8px; } .trk { min-width:0; } .bar { height:13px; border-radius:0 4px 4px 0; } .bar.s { background:var(--sg); } .bar.a { background:var(--acc); } .v { font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.gap { display:block; color:#8d9199; font-style:italic; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); margin:6px -14px; padding:3px 14px; font-family:ui-sans-serif,system-ui; font-size:12.5px; }
.hl { background:var(--acc-soft); display:block; margin:0 -14px; padding:0 14px; box-shadow:inset 3px 0 0 var(--acc); }
.act { display:block; background:#e6ecfb; box-shadow:inset 3px 0 0 var(--blue); margin:0 -14px; padding:0 14px; }
footer.site { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:26px 0 44px; margin-top:90px; font-size:14.5px; color:var(--mute); border-top:1px solid var(--line); } footer.site a { color:inherit; }
/* a story or the guide: one column of prose with figures */
article { padding:26px 0 0; } article .kick { font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:650; color:var(--mute); margin:0 0 12px; } article .kick a { text-decoration:none; } article .kick b { color:var(--acc); }
article h1 { font-size:clamp(34px, 4.6vw, 54px); line-height:1.04; letter-spacing:-0.04em; margin:0 0 18px; max-width:900px; }
article .lede { font-size:21px; line-height:1.45; max-width:760px; margin:0 0 10px; }
article h2 { font-size:28px; letter-spacing:-0.03em; line-height:1.12; margin:54px 0 10px; max-width:800px; }
article p, article li { font-size:18px; line-height:1.58; max-width:740px; } article p { margin:0 0 14px; } article p.note { font-size:14.5px; max-width:780px; }
article code { font-size:.88em; background:#ece9e1; padding:1px 5px; border-radius:5px; } article pre code, .card code, table code { background:none; padding:0; }
article .next { display:flex; flex-wrap:wrap; gap:10px; margin-top:54px; } article .next a { border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px 14px; text-decoration:none; font-size:15.5px; } article .next a:hover { border-color:var(--ink); }
details.src { border:1px solid var(--line); border-radius:12px; background:#fff; margin:12px 0; overflow:hidden; } details.src summary { cursor:pointer; padding:10px 14px; font:500 13px ui-monospace,Menlo,monospace; color:var(--mute); } details.src pre { margin:0; padding:12px 14px; font-size:12.5px; line-height:1.6; border-top:1px solid var(--line); overflow-x:auto; }
.tabs { display:flex; gap:4px; padding:8px 10px; border-bottom:1px solid var(--night-line); background:#171a22; } .tabs button { font:600 12.5px ui-sans-serif,system-ui; color:var(--dim); background:none; border:0; border-radius:7px; padding:6px 10px; cursor:pointer; } .tabs button.on { background:#2a3040; color:#fff; }
.winbar { height:50px; border-radius:10px; background:#eceae3; position:relative; overflow:hidden; display:flex; } .seg { height:100%; flex:none; } .sys { background:#8b8f97; } .h { background:#14161a; border-right:1px solid #eceae3; } .h.c { background:#2f8f57; } .now { background:var(--acc); }
.lim { position:absolute; top:0; height:50px; border-left:2px dashed var(--acc); z-index:2; } .wrapbar { position:relative; }
.leg { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13.5px; color:var(--mute); margin-top:10px; } .leg i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; } .stats b { font-size:32px; letter-spacing:-0.03em; display:block; font-variant-numeric:tabular-nums; } .stats span { font-size:13.5px; color:var(--mute); line-height:1.35; display:block; }
.tog { display:flex; gap:8px; margin-top:14px; } .tog button { font:600 14px ui-sans-serif,system-ui; border:1.5px solid var(--ink); background:#fff; border-radius:8px; padding:7px 12px; cursor:pointer; } .tog button.on { background:var(--ink); color:#fff; }
.wall { border:1px solid var(--line); background:#fff; border-radius:12px; padding:12px 14px; margin:18px 0 6px; } .fam { display:flex; flex-wrap:wrap; gap:5px 6px; align-items:center; padding:5px 0; } .fam + .fam { border-top:1px solid #efece5; }
.fn { font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:600; color:var(--mute); width:82px; flex:none; } .mdl { font:11.5px ui-monospace,Menlo,monospace; border:1px solid var(--line); border-radius:6px; padding:2px 6px; background:#faf8f3; white-space:nowrap; }
.filelist { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; } .filelist span { font:13px ui-monospace,Menlo,monospace; border:1px solid var(--line); background:#fff; border-radius:8px; padding:5px 9px; } .filelist i { font-style:normal; color:var(--mute); margin-left:7px; }
.card.code { margin:18px 0 8px; } .card.code pre { font-size:12.5px; line-height:1.62; }
.spark { display:flex; align-items:flex-end; gap:4px; height:86px; border-bottom:1px solid var(--line); } .spark i { flex:1; border-radius:3px 3px 0 0; display:block; }
.card.ex { margin:10px 0 22px; max-width:860px; } .card.ex pre { font-size:12.5px; line-height:1.62; white-space:pre; overflow-x:auto; word-break:normal; } .card.ex .gap { margin:4px -14px; }
article p b { font-weight:650; }
.tree { margin:18px 0 20px; display:grid; gap:8px; max-width:980px; } .tree .lv { display:grid; gap:8px; position:relative; padding-top:18px; } .tree .lv.two { grid-template-columns:1fr 1fr; } .tree .lv.four { grid-template-columns:repeat(4,1fr); }
.tree .lab { position:absolute; top:0; left:0; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:600; color:var(--mute); } .tree .nd { border:1px solid var(--line); background:#fff; border-radius:9px; padding:8px 11px; font-size:13.5px; line-height:1.4; } .tree .s1 { background:#eef2fb; border-color:#cfd9f0; } .tree .s2 { background:#e3eaf8; border-color:#b9c8ea; }
@media (max-width:760px) { .tree .lv.four { grid-template-columns:1fr 1fr; } }
.for-agents { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (max-width:860px) { .cols { grid-template-columns:1fr; } }
@media (max-width:480px) { .top nav a:last-child { display:none; } }
@media (max-width:640px) { .wrap { padding:0 18px; } .top nav { gap:13px; font-size:14px; } .brand { font-size:17px; gap:7px; } .brand svg { width:20px; height:20px; } article p, article li { font-size:17px; } article .lede { font-size:19px; } article h2 { font-size:24px; margin-top:42px; } .card pre { font-size:11.5px; } table.t { font-size:14.5px; } table.t td, table.t th { padding:9px 10px; } td.num { white-space:normal; } .fn { width:100%; } .stats b { font-size:26px; } }