Something went wrong. Try again.
about things notes.zzstoatzz.io
notes
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990:root { color-scheme: dark; --bg: #0b0b0f; --panel: #12121e; --text: #e4e4eb; --muted: #8b8b9e; --border: rgba(255, 255, 255, 0.07); --link: #7db4f5; --codebg: rgba(255, 255, 255, 0.05); --shadow: rgba(0, 0, 0, 0.4); --accent: rgba(125, 180, 245, 0.08); --tok-comment: #7c7c93; --tok-kw: #c6a0f6; --tok-str: #90d3a6; --tok-num: #e2a978; --tok-fn: #7db4f5; --radius: 10px; --gutter: 16px; --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --sans: "Geist", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f8f8fa; --panel: #ffffff; --text: #1a1a2e; --muted: #64648a; --border: rgba(0, 0, 0, 0.08); --link: #2563eb; --codebg: rgba(0, 0, 0, 0.04); --shadow: rgba(0, 0, 0, 0.06); --accent: rgba(37, 99, 235, 0.06); --tok-comment: #6a6a80; --tok-kw: #8250df; --tok-str: #0a7d55; --tok-num: #b4530a; --tok-fn: #2563eb; }}
:root[data-theme="light"] { color-scheme: light; --bg: #f8f8fa; --panel: #ffffff; --text: #1a1a2e; --muted: #64648a; --border: rgba(0, 0, 0, 0.08); --link: #2563eb; --codebg: rgba(0, 0, 0, 0.04); --shadow: rgba(0, 0, 0, 0.06); --accent: rgba(37, 99, 235, 0.06); --tok-comment: #6a6a80; --tok-kw: #8250df; --tok-str: #0a7d55; --tok-num: #b4530a; --tok-fn: #2563eb;}
* { box-sizing: border-box;}
html,body { height: 100%;}
html { /* keep tab-focused headings/links clear of the sticky header */ scroll-padding-top: 64px;}
/* Accessibility utilities */.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 8px 14px; background: var(--panel); color: var(--text); border: 1px solid var(--link); border-radius: 6px; transform: translateY(-150%); transition: transform 0.15s ease;}.skip-link:focus { transform: translateY(0); text-decoration: none;}
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: inherit;}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }}
@media (forced-colors: active) { .sidebar a.active, [aria-current="page"] { outline: 2px solid Highlight; }}
body { margin: 0; font-family: var(--sans); font-weight: 400; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
a { color: var(--link); text-decoration: none;}a:hover { text-decoration: underline;}
/* App shell */.app { min-height: 100%; display: flex; flex-direction: column;}
/* Header */.header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 0 var(--gutter); height: 48px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-width: 100%;}
.brand { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--text); letter-spacing: -0.02em; white-space: nowrap; flex-shrink: 0;}.brand:hover { text-decoration: none; opacity: 0.8;}
/* Nav — inline in header */.nav { display: flex; gap: 2px; margin-left: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;}.nav::-webkit-scrollbar { display: none;}
.nav a { padding: 6px 10px; border-radius: 6px; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; transition: color 0.1s, background 0.1s;}.nav a:hover { color: var(--text); background: var(--codebg); text-decoration: none;}.nav a[aria-current="page"] { color: var(--text); background: var(--accent);}
/* Header right */.header-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0;}
.header-link { padding: 6px 10px; font-size: 13px; font-weight: 500; border-radius: 6px; color: var(--muted); white-space: nowrap;}.header-link:hover { color: var(--text); background: var(--codebg); text-decoration: none;}
/* Theme toggle */.theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--muted); transition: color 0.15s, border-color 0.15s;}.theme-toggle:hover { color: var(--text); border-color: var(--muted);}.theme-toggle .icon-moon { display: none;}:root[data-theme="dark"] .theme-toggle .icon-sun { display: none;}:root[data-theme="dark"] .theme-toggle .icon-moon { display: block;}:root[data-theme="light"] .theme-toggle .icon-sun { display: block;}:root[data-theme="light"] .theme-toggle .icon-moon { display: none;}
/* Main content */.main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: var(--gutter);}
.content { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 28px 32px;}
/* Docs sidebar (desktop only — a sticky page tree in what would be dead margin) */.sidebar { display: none;}.sidebar ul { list-style: none; margin: 0; padding: 0;}.sidebar a { display: block; padding: 5px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; line-height: 1.45;}.sidebar a:hover { color: var(--text); background: var(--codebg);}.sidebar .s-page { color: var(--text); font-weight: 500; margin-top: 3px;}/* nested groups indent behind a static tree line (structure, not state) */.sidebar .s-children { margin: 2px 0 8px 13px; padding-left: 5px; border-left: 1px solid var(--border);}.sidebar .s-child { font-size: 12.5px;}.sidebar a.active { color: var(--link); font-weight: 600; background: var(--accent);}/* collapsible tree: only the active page's ancestry opens automatically */.sidebar details > summary { display: flex; align-items: center; gap: 2px; cursor: pointer; list-style: none;}.sidebar details > summary::-webkit-details-marker { display: none;}.sidebar details > summary::before { content: ""; flex-shrink: 0; width: 14px; height: 14px; background: currentColor; color: var(--muted); clip-path: polygon(35% 25%, 70% 50%, 35% 75%); transition: transform 0.12s;}.sidebar details[open] > summary::before { transform: rotate(90deg);}.sidebar details.s-section > summary .s-page { flex: 1;}.sidebar details.s-group > summary .s-dir { flex: 1;}/* directory group labels inside a section */.sidebar .s-dir { display: block; padding: 4px 10px 2px; color: var(--muted); font-size: 12px; font-weight: 500;}.sidebar a.s-dir:hover { color: var(--text);}
@media (min-width: 1024px) { .main { max-width: 1180px; display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 36px; align-items: start; } .sidebar { display: block; position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 84px); overflow-y: auto; font-size: 13px; padding-bottom: 16px; } .content { min-width: 0; } /* the page tree replaces the header's top nav on desktop */ .header .nav { display: none; }}
/* Footer */.site-footer { padding: 16px var(--gutter); text-align: center; border-top: 1px solid var(--border);}
.footer-link { font-size: 12px; color: var(--muted);}.footer-link:hover { color: var(--text); text-decoration: none;}
/* Content typography */.content h1,.content h2,.content h3 { scroll-margin-top: 64px; letter-spacing: -0.01em;}
.content h1 { margin-top: 0; font-size: 24px; font-weight: 700;}
.content h2 { font-size: 17px; font-weight: 600; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--border);}
.content h2:first-of-type { border-top: none; padding-top: 0;}
.content h3 { font-size: 14px; font-weight: 600; margin-top: 24px; color: var(--muted);}
.content img { display: block; max-width: 100%; height: auto; margin: 1.2em auto; border-radius: 6px; background: #fff;}
.content p,.content li { line-height: 1.7; font-size: 14px;}
.content code { font-family: var(--mono); font-size: 0.85em; background: var(--codebg); padding: 2px 5px; border-radius: 4px; border: 1px solid var(--border);}
.content pre { overflow-x: auto; padding: 14px 16px; border-radius: 8px; background: var(--codebg); border: 1px solid var(--border); font-size: 13px; line-height: 1.6;}
.content pre code { background: transparent; padding: 0; border: none; font-size: inherit;}
.content .token.comment { color: var(--tok-comment); font-style: italic;}.content .token.keyword,.content .token.builtin-type { color: var(--tok-kw);}.content .token.string,.content .token.char { color: var(--tok-str);}.content .token.number,.content .token.boolean { color: var(--tok-num);}.content .token.builtin,.content .token.function,.content .token.class-name { color: var(--tok-fn);}.content .token.operator,.content .token.punctuation { color: var(--text); opacity: 0.7;}
.content details { margin: 12px 0; border: 1px solid var(--border); border-radius: 8px;}
.content details summary { cursor: pointer; padding: 10px 14px; font-size: 14px; border-radius: 8px;}
.content details summary:hover { background: var(--accent);}
.content details[open] summary { border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0;}
.content details > :not(summary) { padding: 0 14px;}
/* Generated section indexes are trees, not a wall of nested bullets. */.content .overview-tree > ul,.content .overview-tree ul { list-style: none; margin: 0; padding: 0;}.content .overview-tree details { margin: 6px 0;}.content .overview-tree details > summary { display: flex; align-items: center; gap: 10px; font-weight: 600;}.content .overview-tree details > summary span { flex: 1;}.content .overview-tree details > ul { margin: 4px 14px 10px; padding: 2px 0 2px 18px; border-left: 1px solid var(--border);}.content .overview-tree li > a { display: block; padding: 5px 8px;}.content .overview-tree .overview-page-link { flex: none; color: var(--muted); font-size: 11px; font-weight: 500;}
.content hr { border: none; border-top: 1px solid var(--border); margin: 28px 0;}
.content blockquote { border-left: 3px solid var(--link); margin: 16px 0; padding: 4px 16px; color: var(--muted); background: var(--accent); border-radius: 0 6px 6px 0;}
.content .ds-figure { margin: 24px 0; padding: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--codebg);}.content .ds-figure svg { display: block; width: 100%; height: auto; color: var(--text);}.content .ds-figure text { fill: currentColor; font-family: var(--sans);}.content .ds-figure .ds-label,.content .ds-figure .ds-query { font-size: 14px; font-weight: 600;}.content .ds-figure .ds-bit { fill: var(--panel); stroke: var(--muted); stroke-opacity: 0.5;}.content .ds-figure .ds-bit-set { fill: var(--link); stroke: var(--link);}.content .ds-figure .ds-bit-text,.content .ds-figure .ds-index,.content .ds-figure .ds-mono { font-family: var(--mono); font-size: 12px; text-anchor: middle;}.content .ds-figure .ds-bit-set + text,.content .ds-figure .ds-bit-text { font-weight: 600;}.content .ds-figure .ds-index { fill: var(--muted); font-size: 10px;}.content .ds-figure .ds-mono { text-anchor: start;}.content .ds-figure .ds-maybe { fill: var(--link); font-size: 13px; font-weight: 600;}.content .ds-figure .ds-no { fill: var(--tok-str); font-size: 13px; font-weight: 600;}.content .ds-figure .ds-node { fill: var(--panel); stroke: var(--muted); stroke-width: 1.5;}.content .ds-figure .ds-node-accent { fill: var(--accent); stroke: var(--link); stroke-width: 2;}.content .ds-figure .ds-edge { fill: none; stroke: var(--muted); stroke-width: 1.5;}.content .ds-figure .ds-edge-accent { fill: none; stroke: var(--link); stroke-width: 2;}.content .ds-figure .ds-muted { fill: var(--muted); font-size: 11px;}.content .ds-figure .ds-accent { fill: var(--link); font-weight: 600;}.content .ds-figure figcaption { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.5;}
.content table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 16px 0;}
.content th,.content td { padding: 8px 12px; border: 1px solid var(--border); text-align: left;}
.content th { background: var(--codebg); font-weight: 600;}
.empty { color: var(--muted);}
/* Mobile */@media (max-width: 640px) { .header { gap: 4px; padding: 0 12px; }
.nav { margin-left: 8px; gap: 0; }
.nav a { padding: 6px 8px; font-size: 12px; }
.header-link { font-size: 12px; padding: 5px 8px; }
.main { padding: 12px; }
.content { padding: 20px 16px; border-radius: 8px; }
.content h1 { font-size: 20px; }
.content h2 { font-size: 16px; }
.content pre { font-size: 12px; padding: 12px; }}
/* "on this page" — right-hand heading toc, desktop only */.toc { display: none;}@media (min-width: 1280px) { .main { grid-template-columns: 216px minmax(0, 1fr) 180px; } .toc { display: block; position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 84px); overflow-y: auto; font-size: 12px; } .toc .toc-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; } .toc ul { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 1px solid var(--border); } .toc a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; line-height: 1.4; } .toc a:hover { color: var(--text); } .toc .s-toc-sub { padding-left: 12px; }}
/* ⌘K search */.search-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--muted); transition: color 0.15s, border-color 0.15s;}.search-toggle:hover { color: var(--text); border-color: var(--muted);}
.ksearch { position: fixed; inset: 0; z-index: 200;}.ksearch-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);}/* the panel's box is fixed: top-anchored with a hard height, results scroll inside. typing and result-count changes never move the input. */.ksearch-panel { position: absolute; top: 12vh; left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 2 * var(--gutter))); height: min(430px, 72dvh); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 16px 48px var(--shadow); overflow: hidden;}@media (max-width: 640px) { .ksearch-panel { top: max(12px, env(safe-area-inset-top)); height: min(430px, calc(100dvh - max(12px, env(safe-area-inset-top)) - 12vh)); }}.ksearch-inputrow { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--muted); flex-shrink: 0;}.ksearch-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font: 400 15px var(--sans);}.ksearch-input::placeholder { color: var(--muted);}.ksearch-close { background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; color: var(--muted); font: 400 11px var(--mono); cursor: pointer;}.ksearch-results { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px;}.ksearch-label { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);}.ksearch-row { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--text);}.ksearch-row:hover { background: var(--codebg); text-decoration: none;}.ksearch-row.active { background: var(--accent); outline: 1px solid color-mix(in srgb, var(--link) 35%, transparent);}.ksearch-title { display: block; font-size: 14px; font-weight: 500; line-height: 1.35;}.ksearch-path { display: block; font: 400 11px var(--mono); color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.ksearch-ext { margin-left: 4px; opacity: 0.7;}.ksearch-snippet { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--muted);}.ksearch-status { padding: 10px; font-size: 12.5px; color: var(--muted);}body.ksearch-open { overflow: hidden;}/* loading: the content section renders skeleton result rows, shaped like the rows that will replace them, with a slow shimmer sweeping across. */.ksearch-skeleton { padding: 8px 10px;}.ksearch-skeleton span { display: block; height: 10px; border-radius: 4px; background: linear-gradient( 90deg, var(--codebg) 0%, color-mix(in srgb, var(--muted) 22%, var(--codebg)) 50%, var(--codebg) 100% ); background-size: 200% 100%; animation: ksearch-shimmer 1.4s ease-in-out infinite;}.ksearch-skeleton .sk-title { height: 12px; margin-bottom: 7px;}.ksearch-skeleton .sk-path { height: 8px;}@keyframes ksearch-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -80% 0; }}@media (prefers-reduced-motion: reduce) { .ksearch-skeleton span { animation: none; background: var(--codebg); }}