/* Odincode.ai design system (docs/build/WEB-DESIGN.md). Fonts: Inter, Space Grotesk, JetBrains Mono (SIL OFL 1.1,
   /static/fonts/*-OFL.txt). Icons: Tabler Icons (MIT, /static/icons/LICENSE-tabler-icons.txt). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-latin-ext-wght-normal.woff2?v=34b9c504cab7") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-latin-wght-normal.woff2?v=3100e775e861") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/space-grotesk-latin-ext-wght-normal.woff2?v=952dddb45d2f") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/space-grotesk-latin-wght-normal.woff2?v=0640890476fc") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/static/fonts/jetbrains-mono-latin-ext-wght-normal.woff2?v=79bfdab9ba46") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/static/fonts/jetbrains-mono-latin-wght-normal.woff2?v=18be452724bf") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens ---------- */
:root { color-scheme: light; --primary: #2bc7ee; --primary-hover: #5ad3f2; --on-primary: #0b0e12; --code-bg: #0b0e12; --code-fg: #e6eaf0; --code-muted: #8792a1; --code-line: rgba(240, 242, 245, 0.09); --code-key: #2bc7ee; --code-str: #4ade80; --nav-fg: #aab3c0; --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-full: 999px; --gutter: 1.5rem; --header-h: 4rem; --w-nav: 80rem; --w-wide: 72rem; --w-feature: 64rem; --w-hero: 56rem; --w-text: 48rem; --w-lead: 42rem; --w-auth: 28rem; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --bg: #f8f9fb; --bg-band: #f1f3f7; --surface: #ffffff; --surface-solid: #ffffff; --surface-2: #f1f3f6; --surface-3: #e7eaef; --card-line: #e3e6eb; --line: #dfe3e8; --line-soft: rgba(18, 23, 33, 0.07); --line-strong: #818898; --input-bg: #ffffff; --fg: #121721; --fg-2: #2d3646; --muted: #535d6e; --link: #046f90; --link-hover: #035873; --ring: #046f90; --primary-tint: rgba(4, 111, 144, 0.08); --primary-line: rgba(4, 111, 144, 0.28); --glow: hsl(192 85% 45% / 0.12); --glow-strong: hsl(192 85% 45% / 0.22); --text-gradient: linear-gradient(135deg, #0986a5, #1d52cd); --ok: #147145; --ok-tint: #ebf7f0; --ok-line: #a7d9bd; --warn: #955104; --warn-tint: #fdf4e3; --warn-line: #efc887; --err: #b62020; --err-tint: #fdeeee; --err-line: #f0b4b4; --danger: #c81e1e; --danger-hover: #a51818; --cat-cyan: #046f90; --cat-violet: #6d28d9; --cat-amber: #b45309; --cat-green: #15803d; --row-zebra: #fafbfc; --row-hover: #f3f6f9; --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06); --shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.14); --glass: rgba(255, 255, 255, 0.78); --card: var(--surface-solid); --text: var(--fg); --accent: var(--primary); --accent-text: var(--on-primary); --warn-bg: var(--warn-tint); --ok-bg: var(--ok-tint); --err-bg: var(--err-tint); --code-text: var(--code-fg); --i-adjustments: url("/static/icons/adjustments.svg?v=7987c440bdb6"); --i-alert-circle: url("/static/icons/alert-circle.svg?v=424ce994b0e5"); --i-alert-triangle: url("/static/icons/alert-triangle.svg?v=a9b988817c31"); --i-arrow-left: url("/static/icons/arrow-left.svg?v=5e3f7551a668"); --i-arrow-right: url("/static/icons/arrow-right.svg?v=c7629ab9db98"); --i-arrow-up-right: url("/static/icons/arrow-up-right.svg?v=005ee1e517bf"); --i-ban: url("/static/icons/ban.svg?v=987b07a3eb7e"); --i-bolt: url("/static/icons/bolt.svg?v=c3e4431f3b1e"); --i-book: url("/static/icons/book.svg?v=bb996054d2a5"); --i-brand-apple: url("/static/icons/brand-apple.svg?v=fb4bed9e6cab"); --i-brand-debian: url("/static/icons/brand-debian.svg?v=09f3c9281134"); --i-brand-ubuntu: url("/static/icons/brand-ubuntu.svg?v=acb944e5b78c"); --i-brand-windows: url("/static/icons/brand-windows.svg?v=582b4ea449ce"); --i-building: url("/static/icons/building.svg?v=a6fa6407e035"); --i-calendar: url("/static/icons/calendar.svg?v=ff403e0993d2"); --i-certificate: url("/static/icons/certificate.svg?v=3faf94cccbcd"); --i-chart-bar: url("/static/icons/chart-bar.svg?v=c16ae9fd3b52"); --i-check: url("/static/icons/check.svg?v=552002dd8e86"); --i-chevron-down: url("/static/icons/chevron-down.svg?v=c7985d0bd348"); --i-chevron-left: url("/static/icons/chevron-left.svg?v=7e96ce31e7f7"); --i-chevron-right: url("/static/icons/chevron-right.svg?v=1a6260cd6262"); --i-circle-check: url("/static/icons/circle-check.svg?v=8af3ebff0e32"); --i-circle-x: url("/static/icons/circle-x.svg?v=c1fe519ec920"); --i-clock: url("/static/icons/clock.svg?v=a4caec3e1221"); --i-cloud-lock: url("/static/icons/cloud-lock.svg?v=a952458e6e5d"); --i-code: url("/static/icons/code.svg?v=50b74d98e04a"); --i-coin: url("/static/icons/coin.svg?v=f36853b95441"); --i-copy: url("/static/icons/copy.svg?v=30368e8ba692"); --i-cpu: url("/static/icons/cpu.svg?v=9b22dd1d8313"); --i-credit-card: url("/static/icons/credit-card.svg?v=d03636940142"); --i-database: url("/static/icons/database.svg?v=a0774cc4cbb3"); --i-device-desktop: url("/static/icons/device-desktop.svg?v=9ad8e879672d"); --i-device-laptop: url("/static/icons/device-laptop.svg?v=327a336dab01"); --i-device-mobile: url("/static/icons/device-mobile.svg?v=ab23c84c22ea"); --i-dots: url("/static/icons/dots.svg?v=d9f4158bf818"); --i-download: url("/static/icons/download.svg?v=19524a8aa853"); --i-external-link: url("/static/icons/external-link.svg?v=6a348507064f"); --i-eye: url("/static/icons/eye.svg?v=0f7d955996e8"); --i-file-text: url("/static/icons/file-text.svg?v=74d2367140b4"); --i-file-zip: url("/static/icons/file-zip.svg?v=135aa119d8d7"); --i-filter: url("/static/icons/filter.svg?v=a73833ec00c6"); --i-fingerprint: url("/static/icons/fingerprint.svg?v=f7f0987d6bd0"); --i-globe: url("/static/icons/globe.svg?v=043b955073a9"); --i-history: url("/static/icons/history.svg?v=0b56cf3c8f5f"); --i-info-circle: url("/static/icons/info-circle.svg?v=58adffb9415c"); --i-key: url("/static/icons/key.svg?v=b7839df00185"); --i-lifebuoy: url("/static/icons/lifebuoy.svg?v=96a3985146d9"); --i-lock: url("/static/icons/lock.svg?v=5768b7a2ac80"); --i-logout: url("/static/icons/logout.svg?v=a1639089f4c2"); --i-mail: url("/static/icons/mail.svg?v=047b050f20f7"); --i-map-pin: url("/static/icons/map-pin.svg?v=1ce59431b573"); --i-menu: url("/static/icons/menu.svg?v=efa95d7c9010"); --i-message: url("/static/icons/message.svg?v=2ae620f65e96"); --i-minus: url("/static/icons/minus.svg?v=8f710e267de5"); --i-package: url("/static/icons/package.svg?v=fe4ed2d8d104"); --i-plug: url("/static/icons/plug.svg?v=6dc5d66a5bb3"); --i-plus: url("/static/icons/plus.svg?v=74a591c56bac"); --i-qrcode: url("/static/icons/qrcode.svg?v=968082504034"); --i-receipt: url("/static/icons/receipt.svg?v=5f755e7b2b84"); --i-refresh: url("/static/icons/refresh.svg?v=e4246c0fe154"); --i-robot: url("/static/icons/robot.svg?v=14066d226292"); --i-rocket: url("/static/icons/rocket.svg?v=886591ad9a7a"); --i-search: url("/static/icons/search.svg?v=5f93445b2f57"); --i-server: url("/static/icons/server.svg?v=8a65533d63ab"); --i-settings: url("/static/icons/settings.svg?v=9d24d0449970"); --i-shield-check: url("/static/icons/shield-check.svg?v=b69275c81c2d"); --i-shield-lock: url("/static/icons/shield-lock.svg?v=8edc63da1c7e"); --i-sparkles: url("/static/icons/sparkles.svg?v=85f60c9b4a9a"); --i-terminal: url("/static/icons/terminal.svg?v=164162907788"); --i-trash: url("/static/icons/trash.svg?v=9650eed44276"); --i-user: url("/static/icons/user.svg?v=aaa5d8f5ca68"); --i-users: url("/static/icons/users.svg?v=29ae89c91689"); --i-world-check: url("/static/icons/world-check.svg?v=e3ea290f8cda"); --i-x: url("/static/icons/x.svg?v=4b65248ce612"); }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; --bg: #0e1115; --bg-band: #11151a; --surface: rgba(25, 29, 36, 0.85); --surface-solid: #191d24; --surface-2: #1f242c; --surface-3: #272b35; --card-line: rgba(240, 242, 245, 0.08); --line: #2c313a; --line-soft: rgba(240, 242, 245, 0.07); --line-strong: #6a7181; --input-bg: rgba(35, 39, 47, 0.35); --fg: #f0f2f5; --fg-2: #c3cad4; --muted: #8792a1; --link: #2bc7ee; --link-hover: #5ad3f2; --ring: #2bc7ee; --primary-tint: rgba(43, 199, 238, 0.10); --primary-line: rgba(43, 199, 238, 0.30); --glow: hsl(192 85% 55% / 0.15); --glow-strong: hsl(192 85% 55% / 0.30); --text-gradient: linear-gradient(135deg, #5ad3f2, #75b2f0); --ok: #4ade80; --ok-tint: rgba(34, 197, 94, 0.10); --ok-line: rgba(34, 197, 94, 0.32); --warn: #fbbf24; --warn-tint: rgba(245, 158, 11, 0.10); --warn-line: rgba(245, 158, 11, 0.32); --err: #f87171; --err-tint: rgba(239, 68, 68, 0.10); --err-line: rgba(239, 68, 68, 0.35); --danger: #dc2828; --danger-hover: #b91c1c; --cat-cyan: #2bc7ee; --cat-violet: #8347eb; --cat-amber: #f59f0a; --cat-green: #22c35d; --row-zebra: rgba(35, 39, 47, 0.18); --row-hover: rgba(35, 39, 47, 0.45); --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.025); --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.5); --glass: rgba(25, 29, 36, 0.85); } }
header.top, footer.site, .theme-dark { color-scheme: dark; --bg: #0e1115; --bg-band: #11151a; --surface: rgba(25, 29, 36, 0.85); --surface-solid: #191d24; --surface-2: #1f242c; --surface-3: #272b35; --card-line: rgba(240, 242, 245, 0.08); --line: #2c313a; --line-soft: rgba(240, 242, 245, 0.07); --line-strong: #6a7181; --input-bg: rgba(35, 39, 47, 0.35); --fg: #f0f2f5; --fg-2: #c3cad4; --muted: #8792a1; --link: #2bc7ee; --link-hover: #5ad3f2; --ring: #2bc7ee; --primary-tint: rgba(43, 199, 238, 0.10); --primary-line: rgba(43, 199, 238, 0.30); --glow: hsl(192 85% 55% / 0.15); --glow-strong: hsl(192 85% 55% / 0.30); --text-gradient: linear-gradient(135deg, #5ad3f2, #75b2f0); --ok: #4ade80; --ok-tint: rgba(34, 197, 94, 0.10); --ok-line: rgba(34, 197, 94, 0.32); --warn: #fbbf24; --warn-tint: rgba(245, 158, 11, 0.10); --warn-line: rgba(245, 158, 11, 0.32); --err: #f87171; --err-tint: rgba(239, 68, 68, 0.10); --err-line: rgba(239, 68, 68, 0.35); --danger: #dc2828; --danger-hover: #b91c1c; --cat-cyan: #2bc7ee; --cat-violet: #8347eb; --cat-amber: #f59f0a; --cat-green: #22c35d; --row-zebra: rgba(35, 39, 47, 0.18); --row-hover: rgba(35, 39, 47, 0.45); --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.025); --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.5); --glass: rgba(25, 29, 36, 0.85); color: var(--fg); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 400 1rem/1.6 var(--font-sans); font-feature-settings: "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
main { flex: 1 0 auto; display: block; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--fg); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.75rem; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
* + h2 { margin-top: 1.75rem; }
* + h3 { margin-top: 1.25rem; }
p { margin: 0 0 0.875rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li + li { margin-top: 0.25rem; }
strong, b { font-weight: 600; }
small { font-size: 0.8125rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: color 0.15s, text-decoration-color 0.15s; }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
::selection { background: hsl(192 85% 55% / 0.3); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.muted { color: var(--muted); font-size: 0.9375rem; }
p.muted { line-height: 1.55; }
.detail { color: var(--muted); font-size: 0.8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.mono, code, kbd, samp, pre { font-family: var(--font-mono); font-feature-settings: normal; }
.mono { font-size: 0.875em; }
.nowrap { white-space: nowrap; }
.mt-sm { margin-top: 1rem; } .mt-md { margin-top: 2rem; } .mt-lg { margin-top: 3rem; } .mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.625rem 1rem; border-radius: var(--r-md); background: var(--primary); color: var(--on-primary); font-weight: 600; text-decoration: none; }
.skip:focus { top: 0.75rem; }
#content:focus { outline: none; }

/* ---------- icons (CSS masks in currentColor; no inline SVG, no <img>) ---------- */
.i { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.25em; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-xs { width: 0.75rem; height: 0.75rem; } .i-sm { width: 1rem; height: 1rem; } .i-md { width: 1.25rem; height: 1.25rem; } .i-lg { width: 1.5rem; height: 1.5rem; } .i-xl { width: 2rem; height: 2rem; }
.i-adjustments { --i: var(--i-adjustments); }
.i-alert-circle { --i: var(--i-alert-circle); }
.i-alert-triangle { --i: var(--i-alert-triangle); }
.i-arrow-left { --i: var(--i-arrow-left); }
.i-arrow-right { --i: var(--i-arrow-right); }
.i-arrow-up-right { --i: var(--i-arrow-up-right); }
.i-ban { --i: var(--i-ban); }
.i-bolt { --i: var(--i-bolt); }
.i-book { --i: var(--i-book); }
.i-brand-apple { --i: var(--i-brand-apple); }
.i-brand-debian { --i: var(--i-brand-debian); }
.i-brand-ubuntu { --i: var(--i-brand-ubuntu); }
.i-brand-windows { --i: var(--i-brand-windows); }
.i-building { --i: var(--i-building); }
.i-calendar { --i: var(--i-calendar); }
.i-certificate { --i: var(--i-certificate); }
.i-chart-bar { --i: var(--i-chart-bar); }
.i-check { --i: var(--i-check); }
.i-chevron-down { --i: var(--i-chevron-down); }
.i-chevron-left { --i: var(--i-chevron-left); }
.i-chevron-right { --i: var(--i-chevron-right); }
.i-circle-check { --i: var(--i-circle-check); }
.i-circle-x { --i: var(--i-circle-x); }
.i-clock { --i: var(--i-clock); }
.i-cloud-lock { --i: var(--i-cloud-lock); }
.i-code { --i: var(--i-code); }
.i-coin { --i: var(--i-coin); }
.i-copy { --i: var(--i-copy); }
.i-cpu { --i: var(--i-cpu); }
.i-credit-card { --i: var(--i-credit-card); }
.i-database { --i: var(--i-database); }
.i-device-desktop { --i: var(--i-device-desktop); }
.i-device-laptop { --i: var(--i-device-laptop); }
.i-device-mobile { --i: var(--i-device-mobile); }
.i-dots { --i: var(--i-dots); }
.i-download { --i: var(--i-download); }
.i-external-link { --i: var(--i-external-link); }
.i-eye { --i: var(--i-eye); }
.i-file-text { --i: var(--i-file-text); }
.i-file-zip { --i: var(--i-file-zip); }
.i-filter { --i: var(--i-filter); }
.i-fingerprint { --i: var(--i-fingerprint); }
.i-globe { --i: var(--i-globe); }
.i-history { --i: var(--i-history); }
.i-info-circle { --i: var(--i-info-circle); }
.i-key { --i: var(--i-key); }
.i-lifebuoy { --i: var(--i-lifebuoy); }
.i-lock { --i: var(--i-lock); }
.i-logout { --i: var(--i-logout); }
.i-mail { --i: var(--i-mail); }
.i-map-pin { --i: var(--i-map-pin); }
.i-menu { --i: var(--i-menu); }
.i-message { --i: var(--i-message); }
.i-minus { --i: var(--i-minus); }
.i-package { --i: var(--i-package); }
.i-plug { --i: var(--i-plug); }
.i-plus { --i: var(--i-plus); }
.i-qrcode { --i: var(--i-qrcode); }
.i-receipt { --i: var(--i-receipt); }
.i-refresh { --i: var(--i-refresh); }
.i-robot { --i: var(--i-robot); }
.i-rocket { --i: var(--i-rocket); }
.i-search { --i: var(--i-search); }
.i-server { --i: var(--i-server); }
.i-settings { --i: var(--i-settings); }
.i-shield-check { --i: var(--i-shield-check); }
.i-shield-lock { --i: var(--i-shield-lock); }
.i-sparkles { --i: var(--i-sparkles); }
.i-terminal { --i: var(--i-terminal); }
.i-trash { --i: var(--i-trash); }
.i-user { --i: var(--i-user); }
.i-users { --i: var(--i-users); }
.i-world-check { --i: var(--i-world-check); }
.i-x { --i: var(--i-x); }
.tile { display: inline-grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: var(--r-md); background: var(--primary-tint); color: var(--link); box-shadow: inset 0 0 0 1px var(--primary-line); }
.tile .i { width: 1.5rem; height: 1.5rem; }
.tile.lg { width: 3.5rem; height: 3.5rem; border-radius: var(--r-lg); }
.tile.sm { width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); }
.tile.sm .i { width: 1.25rem; height: 1.25rem; }
.tile.violet { color: var(--cat-violet); background: color-mix(in srgb, var(--cat-violet) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-violet) 30%, transparent); }
.tile.amber { color: var(--cat-amber); background: color-mix(in srgb, var(--cat-amber) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-amber) 30%, transparent); }
.tile.green { color: var(--cat-green); background: color-mix(in srgb, var(--cat-green) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat-green) 30%, transparent); }

/* ---------- header (always dark glass) ---------- */
header.top { position: sticky; top: 0; z-index: 50; background: rgba(12, 15, 19, 0.97); border-bottom: 1px solid var(--line-soft); -webkit-backdrop-filter: saturate(140%) blur(18px); backdrop-filter: saturate(140%) blur(18px); }
@media (prefers-color-scheme: dark) { @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { header.top { background: rgba(14, 17, 21, 0.84); } } }
.top-inner { position: relative; max-width: var(--w-nav); margin: 0 auto; min-height: var(--header-h); padding: 0 var(--gutter); display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; font: 700 1.25rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--fg); text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--fg); }
.brand .tld { color: var(--primary); }
.brand-mark { display: inline-block; flex: none; width: 1.75rem; height: 1.75rem; background: url("/static/brand/mark-on-dark.svg?v=9bc3de45a497") center / contain no-repeat; }
.top-nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; }
.nav-main, .nav-util { display: flex; align-items: center; gap: 0.25rem 1.25rem; min-width: 0; }
.nav-util { margin-left: auto; }
header.top nav a, header.top nav button.link { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.25rem; padding: 0 0.125rem; color: var(--nav-fg); font-size: 0.875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
header.top nav a:hover, header.top nav button.link:hover { color: var(--fg); text-decoration: none; }
header.top nav a[hreflang]::before { content: ""; width: 1rem; height: 1rem; background-color: currentColor; -webkit-mask: var(--i-globe) center / contain no-repeat; mask: var(--i-globe) center / contain no-repeat; }
header.top nav button.link::before { content: ""; width: 1rem; height: 1rem; background-color: currentColor; -webkit-mask: var(--i-logout) center / contain no-repeat; mask: var(--i-logout) center / contain no-repeat; }
header.top nav a[href="/login"] { min-height: 2.375rem; padding: 0 1.125rem; border-radius: var(--r-md); background: var(--primary); color: var(--on-primary); font-weight: 600; }
header.top nav a[href="/login"]:hover { background: var(--primary-hover); color: var(--on-primary); }
body.area-account header.top nav a[href="/account"], body.area-admin header.top nav a[href="/admin"], body.area-staff header.top nav a[href="/staff"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--primary); }
header.top nav form { margin: 0; }
header.top .org { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 15rem; padding: 0.3rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-full); background: rgba(255, 255, 255, 0.03); color: var(--fg-2); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.top .org::before { content: ""; flex: none; width: 0.875rem; height: 0.875rem; background-color: var(--primary); -webkit-mask: var(--i-building) center / contain no-repeat; mask: var(--i-building) center / contain no-repeat; }
header.top form.orgswitch { display: flex; align-items: center; gap: 0.375rem; }
header.top form.orgswitch select { width: auto; max-width: 13rem; min-height: 2.25rem; padding: 0.25rem 2rem 0.25rem 0.75rem; font-size: 0.8125rem; background-color: rgba(255, 255, 255, 0.04); border-color: var(--line); }
header.top form.orgswitch button { min-height: 2.25rem; padding: 0 0.875rem; font-size: 0.8125rem; }
details.menu { display: none; margin-left: auto; }
details.menu > summary { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); color: var(--fg); cursor: pointer; list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:hover { background: rgba(255, 255, 255, 0.06); }
details.menu > summary .i { width: 1.375rem; height: 1.375rem; }
details.menu[open] > summary .i { --i: var(--i-x); }
@media (max-width: 1023.98px) {
  details.menu { display: block; }
  details.menu + .top-nav { display: none; }
  details.menu[open] + .top-nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--gutter) 1.25rem; background: #0e1115; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  details.menu[open] + .top-nav .nav-main, details.menu[open] + .top-nav .nav-util { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  details.menu[open] + .top-nav .nav-util { border-top: 1px solid var(--line); margin-top: 0.5rem; padding-top: 0.5rem; }
  details.menu[open] + .top-nav a, details.menu[open] + .top-nav button.link { min-height: 2.75rem; padding: 0 0.75rem; border-radius: var(--r-md); font-size: 1rem; }
  body.area-account details.menu[open] + .top-nav a[href="/account"], body.area-admin details.menu[open] + .top-nav a[href="/admin"], body.area-staff details.menu[open] + .top-nav a[href="/staff"] { box-shadow: none; background: rgba(43, 199, 238, 0.12); color: var(--fg); }
  details.menu[open] + .top-nav .org { align-self: flex-start; margin: 0.5rem 0; }
  details.menu[open] + .top-nav form.orgswitch { margin: 0.5rem 0; }
  details.menu[open] + .top-nav form.orgswitch select { flex: 1; max-width: none; }
}
@media (max-width: 639.98px) {
  .top-inner { gap: 0.75rem; }
  .nav-main { display: none; }
  details.menu[open] + .top-nav .nav-main { display: flex; }
  .nav-util { gap: 0.25rem 0.875rem; }
}
@media (max-width: 379.98px) {
  :root { --gutter: 1rem; }
  .brand { font-size: 1.125rem; gap: 0.5rem; }
  .brand-mark { width: 1.5rem; height: 1.5rem; }
  header.top nav a[href="/login"] { padding: 0 0.875rem; }
}

/* ---------- page shells ---------- */
.shell { width: 100%; max-width: calc(var(--w-text) + 2 * var(--gutter)); margin: 0 auto; padding: 2.5rem var(--gutter) 4.5rem; }
body.l-auth .shell { max-width: calc(var(--w-auth) + 2 * var(--gutter)); padding-top: clamp(2.5rem, 7vh, 5rem); }
body.l-app .shell { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }
body.l-console .shell { max-width: calc(var(--w-nav) + 2 * var(--gutter)); padding-top: 2rem; }
body.l-marketing .shell { max-width: none; padding: 0; }
body.l-auth main { background: radial-gradient(40rem 26rem at 50% 0%, var(--glow), transparent 70%) no-repeat; }
.with-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
body.l-app .content { max-width: 52rem; }
@media (min-width: 1024px) {
  .with-nav { grid-template-columns: 14rem minmax(0, 1fr); gap: 2.5rem; }
  .with-nav > nav.section { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; }
}
.content > :last-child { margin-bottom: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin: 0 0 1.75rem; }
.page-head h1 { margin: 0; }
.page-head .eyebrow { margin-bottom: 0.625rem; }
.page-head .lead { margin: 0.5rem 0 0; font-size: 1rem; color: var(--muted); max-width: var(--w-lead); }
.page-head .actions { margin: 0; }
.admin-org { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem; color: var(--muted); font-size: 0.875rem; }
.admin-org::before { content: ""; width: 1rem; height: 1rem; background-color: var(--link); -webkit-mask: var(--i-building) center / contain no-repeat; mask: var(--i-building) center / contain no-repeat; }
.admin-org strong { color: var(--fg); font-weight: 600; }
.admin-org form { margin: 0 0 0 auto; }

/* section navigation: a sidebar from 1024px, a scrolling pill row below */
nav.section { display: flex; flex-direction: column; gap: 2px; margin: 0; }
nav.section .section-title { display: block; padding: 0 0.75rem 0.625rem; color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
nav.section a { display: flex; align-items: center; gap: 0.5rem; min-height: 2.375rem; padding: 0.375rem 0.75rem; border-radius: var(--r-md); color: var(--muted); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background-color 0.15s, color 0.15s; }
nav.section a:hover { color: var(--fg); background: var(--surface-2); }
nav.section a.current { color: var(--link); background: var(--primary-tint); font-weight: 600; }
@media (min-width: 1024px) {
  nav.section a.current::after { content: ""; margin-left: auto; width: 0.875rem; height: 0.875rem; background-color: currentColor; -webkit-mask: var(--i-chevron-right) center / contain no-repeat; mask: var(--i-chevron-right) center / contain no-repeat; }
}
@media (max-width: 1023.98px) {
  nav.section { position: relative; flex-direction: row; gap: 0.375rem; overflow-x: auto; scroll-padding-inline: var(--gutter); margin: -0.5rem calc(-1 * var(--gutter)) 0; padding: 0.5rem var(--gutter); scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent); mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent); }
  nav.section::-webkit-scrollbar { display: none; }
  nav.section .section-title { display: none; }
  nav.section a { flex: none; min-height: 2.25rem; padding: 0.25rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-full); white-space: nowrap; }
  nav.section a.current { border-color: var(--primary-line); scroll-initial-target: nearest; }
}

/* ---------- footer (always dark) ---------- */
footer.site { flex: none; background: var(--bg); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.footer-inner { max-width: calc(var(--w-wide) + 2 * var(--gutter)); margin: 0 auto; padding: 4rem var(--gutter) 2.5rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-bottom: 3rem; }
@media (max-width: 767.98px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; } }
.footer-brand p { max-width: 18rem; margin: 1rem 0 0; line-height: 1.6; }
footer.site h2 { margin: 0 0 1rem; font: 600 0.875rem/1.4 var(--font-display); letter-spacing: 0; color: var(--fg); }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
footer.site li + li { margin: 0; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover, footer.site a[aria-current], footer.site .brand { color: var(--fg); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 2rem; border-top: 1px solid var(--line); font-size: 0.8125rem; }
.footer-bottom p { margin: 0; display: inline-flex; align-items: center; gap: 0.625rem; }
footer.site.compact .footer-inner { max-width: calc(var(--w-nav) + 2 * var(--gutter)); padding-top: 1.5rem; padding-bottom: 1.5rem; }
footer.site.compact .footer-bottom { padding-top: 0; border-top: 0; }
footer.site.compact .brand-mark { width: 1.25rem; height: 1.25rem; }
footer.site a[hreflang]::before { content: ""; display: inline-block; width: 0.875rem; height: 0.875rem; margin-right: 0.375rem; vertical-align: -0.125rem; background-color: currentColor; -webkit-mask: var(--i-globe) center / contain no-repeat; mask: var(--i-globe) center / contain no-repeat; }

/* ---------- marketing: bands, containers, hero ---------- */
.container { width: 100%; max-width: calc(var(--w-wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.container.feature { max-width: calc(var(--w-feature) + 2 * var(--gutter)); }
.container.hero-w { max-width: calc(var(--w-hero) + 2 * var(--gutter)); }
.container.text { max-width: calc(var(--w-text) + 2 * var(--gutter)); }
.band { position: relative; padding: 6rem 0; border-top: 1px solid var(--line); background: var(--bg); }
.band.alt { background: var(--bg-band); }
.band.tight { padding: 3.5rem 0; }
@media (max-width: 767.98px) { .band { padding: 4rem 0; } }
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; color: var(--link); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; line-height: 1.4; text-transform: uppercase; }
.eyebrow .i { width: 1rem; height: 1rem; }
.lead { font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.text-gradient { background: var(--text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .text-gradient { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }
.section-head { max-width: var(--w-lead); margin: 0 auto 3.5rem; text-align: center; }
.section-head.start { margin-left: 0; text-align: left; }
.section-head h2 { margin: 0 0 1rem; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; }
.section-head p { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.hero { position: relative; overflow: hidden; padding: clamp(4.5rem, 12vh, 8rem) 0 clamp(4rem, 10vh, 6.5rem); text-align: center; background:
  radial-gradient(38rem 24rem at 50% 18%, hsl(192 85% 55% / 0.10), transparent 70%),
  radial-gradient(26rem 20rem at 85% 95%, hsl(192 85% 55% / 0.06), transparent 70%),
  var(--bg); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.hero .container { position: relative; max-width: calc(var(--w-hero) + 2 * var(--gutter)); }
.hero h1 { margin: 0 0 1.5rem; font-size: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.025em; }
.hero .lead { max-width: var(--w-lead); margin: 0 auto 2.5rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.625; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; }
.hero .below { margin-top: 3rem; }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 3.5rem 0 0; padding: 0; list-style: none; }
.tags li { margin: 0; padding: 0.4rem 1rem; border: 1px solid var(--card-line); border-radius: var(--r-full); background: var(--glass); color: var(--muted); font-size: 0.75rem; font-weight: 500; }
.prompt-bar { max-width: var(--w-lead); margin: 0 auto; padding: 0.5rem; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--glass); box-shadow: 0 0 30px var(--glow), 0 0 60px hsl(192 85% 55% / 0.06); transition: box-shadow 0.3s var(--ease); text-align: left; }
.prompt-bar:focus-within, .prompt-bar:hover { box-shadow: 0 0 40px var(--glow-strong), 0 0 80px hsl(192 85% 55% / 0.1); }
.prompt-bar pre, .prompt-bar .codeblock { margin: 0; border: 0; background: transparent; }

/* ---------- cards ---------- */
.card { position: relative; margin: 0 0 1.25rem; padding: 1.5rem; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.card > :last-child { margin-bottom: 0; }
.card > h1:first-child, .card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card h1 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); }
.card h2 { font-size: 1.25rem; }
.card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.card-head h2, .card-head h3 { margin: 0; }
.card-head p { margin: 0.25rem 0 0; }
.card.glass, .glass { background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.card.interactive, a.card { display: block; color: inherit; text-decoration: none; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease); }
@media (hover: hover) { .card.interactive:hover, a.card:hover { border-color: var(--primary-line); box-shadow: 0 8px 32px var(--glow); } }
.card.strip { overflow: hidden; padding-top: calc(1.5rem + 4px); }
.card.strip::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--strip, var(--cat-cyan)); }
.card.strip.violet { --strip: var(--cat-violet); } .card.strip.amber { --strip: var(--cat-amber); } .card.strip.green { --strip: var(--cat-green); }
.card.featured { max-width: 32rem; margin: 0 auto; padding: 2rem; text-align: center; box-shadow: inset 0 0 0 1px var(--primary-line), 0 0 40px var(--glow); }
.card.featured .tile { margin: 0 auto 1.25rem; }
.card.stat { margin: 0; }
@media (max-width: 479.98px) { .card { padding: 1.25rem; } .card.strip { padding-top: calc(1.25rem + 4px); } }
.grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid.cols-2, .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 899.98px) { .grid.cols-3 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) { .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid > .card { margin: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.grid2 .card { margin: 0; }
.feature h3 { margin: 1.25rem 0 0.5rem; font-size: 1.125rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.625; }
.feature.center { text-align: center; }
.feature.center .tile { margin: 0 auto; }
.strip-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.strip-head .i { color: var(--strip, var(--cat-cyan)); width: 1.25rem; height: 1.25rem; }
.strip-head h3 { margin: 0; font-size: 1.125rem; }

/* connector tree: a featured card, a vertical line with a chevron, then a row of cards with ticks */
.tree { display: grid; gap: 0; }
.tree-stem { display: grid; justify-items: center; height: 4.5rem; color: var(--muted); }
.tree-stem::before { content: ""; width: 1px; height: 3rem; background: var(--line); }
.tree-stem::after { content: ""; width: 1.25rem; height: 1.25rem; background-color: currentColor; -webkit-mask: var(--i-chevron-down) center / contain no-repeat; mask: var(--i-chevron-down) center / contain no-repeat; }
/* each card sits in a .tree-node, so the tick is drawn outside the card (strip cards clip their own ::before strip) */
.tree-node { position: relative; display: flex; min-width: 0; }
.tree-node > .card { flex: 1 1 auto; min-width: 0; margin: 0; }
@media (min-width: 1024px) { .tree-node::before { content: ""; position: absolute; left: 50%; top: -2rem; width: 1px; height: 2rem; background: var(--line); } .tree-row { margin-top: 2rem; } }

/* step flow */
.steps { list-style: none; max-width: var(--w-auth); margin: 0 auto; padding: 0; display: grid; gap: 0; counter-reset: step; }
.steps > li { position: relative; margin: 0; padding: 1.25rem 1.5rem 1.25rem 4.5rem; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--surface); counter-increment: step; }
.steps > li + li { margin-top: 2rem; }
.steps > li + li::after { content: ""; position: absolute; left: 50%; top: calc(-2rem - 1px); width: 1px; height: 2rem; background: var(--line); }
.steps > li::before { content: counter(step); position: absolute; left: 1.25rem; top: 1.25rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--primary-tint); color: var(--link); font: 700 1rem/1 var(--font-display); }
.steps h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.steps p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 1rem; margin: 0 0 1.25rem; }
@media (max-width: 639.98px) { .stats { grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: 0.75rem; } .stats .card { padding: 1rem; } .stats .stat-num { font-size: 1.5rem; } }
.stats .card { margin: 0; padding: 1.25rem; }
.stat-num { margin: 0.25rem 0 0.125rem; font: 700 1.875rem/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.stat-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 3.5rem 0; text-align: center; }
@media (min-width: 768px) { .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-strip dt { order: 2; margin: 0.25rem 0 0; color: var(--muted); font-size: 0.875rem; text-wrap: balance; }
.stat-strip dd { order: 1; margin: 0; font: 700 1.875rem/1.2 var(--font-display); color: var(--link); }
.stat-strip > div { display: flex; flex-direction: column; }

/* CTA band */
.cta { max-width: var(--w-text); margin: 0 auto; text-align: center; }
.cta h2 { margin: 0 0 1.5rem; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.08; }
.cta p { max-width: 36rem; margin: 0 auto 2.5rem; color: var(--muted); font-size: 1.125rem; }
.cta .actions { justify-content: center; margin: 0; }

/* ---------- buttons ---------- */
button, a.button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; margin: 0; padding: 0.5rem 1.25rem; border: 1px solid transparent; border-radius: var(--r-md); background: var(--primary); color: var(--on-primary); font: 600 0.9375rem/1.2 var(--font-sans); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s; -webkit-tap-highlight-color: transparent; }
button:hover, a.button:hover, .button:hover { background: var(--primary-hover); color: var(--on-primary); text-decoration: none; }
button:active, a.button:active { transform: translateY(1px); }
button .i, a.button .i { width: 1.125rem; height: 1.125rem; }
button.secondary, a.button.secondary, .button.secondary { background: transparent; border-color: var(--line-strong); color: var(--fg); }
button.secondary:hover, a.button.secondary:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--fg); }
button.ghost, a.button.ghost { background: transparent; color: var(--link); }
button.ghost:hover, a.button.ghost:hover { background: var(--primary-tint); color: var(--link-hover); }
button.danger, a.button.danger { background: var(--danger); border-color: var(--danger); color: #ffffff; }
button.danger:hover, a.button.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: #ffffff; }
button.secondary.danger, .button.secondary.danger { background: transparent; border-color: var(--err-line); color: var(--err); }
button.secondary.danger:hover, .button.secondary.danger:hover { background: var(--err-tint); color: var(--err); }
button.link { min-height: 0; padding: 0; border: 0; background: none; color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button.link:hover { background: none; color: var(--link-hover); }
button.small, a.button.small, .button.small { min-height: 2.25rem; padding: 0.25rem 0.875rem; font-size: 0.875rem; }
button.large, a.button.large, .button.large { min-height: 3.25rem; padding: 0.75rem 2rem; font-size: 1rem; }
button.block, a.button.block { display: flex; width: 100%; }
button[disabled], button[aria-disabled="true"], a.button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
button[disabled]:hover { background: var(--primary); }
button.secondary[disabled]:hover { background: transparent; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.actions form { margin: 0; }
form + p, form + .alert, form + ul, form + dl { margin-top: 1rem; }
.actions.center { justify-content: center; }
form.actions { margin-top: 0.75rem; }
@media (max-width: 479.98px) { .cta .actions > *, .hero-actions > * { width: 100%; } }

/* ---------- forms ---------- */
form { margin: 0; }
label { display: block; margin: 1rem 0 0.375rem; color: var(--fg); font-size: 0.875rem; font-weight: 500; }
input[type=email], input[type=text], input[type=number], input[type=search], input[type=password], input[type=url], input[type=tel], input[type=date], input[type=datetime-local], input:not([type]), select, textarea { display: block; width: 100%; min-height: 2.75rem; margin: 0; padding: 0.5rem 0.875rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background-color: var(--input-bg); color: var(--fg); font: 400 1rem/1.5 var(--font-sans); transition: border-color 0.15s, box-shadow 0.15s; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid transparent; outline-offset: 0; border-color: var(--ring); box-shadow: 0 0 0 3px hsl(192 85% 50% / 0.35); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--err); }
input[disabled], select[disabled], textarea[disabled] { opacity: 0.6; cursor: not-allowed; }
select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("/static/ui/select-arrow.svg?v=5d217e1481ca"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; cursor: pointer; }
select option { background: var(--surface-solid); color: var(--fg); }
textarea { min-height: 6rem; resize: vertical; }
textarea.mono { font-family: var(--font-mono); font-size: 0.875rem; }
input[type=number] { max-width: 10rem; font-variant-numeric: tabular-nums; }
input[type=checkbox], input[type=radio] { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--primary); cursor: pointer; flex: none; }
input.code { max-width: 18rem; padding: 0.625rem 1rem; font: 600 1.5rem/1.3 var(--font-mono); letter-spacing: 0.3em; text-align: center; }
label.check { display: flex; align-items: flex-start; gap: 0.625rem; margin: 0.875rem 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; cursor: pointer; }
label.check input { margin-top: 0.1875rem; }
fieldset { min-width: 0; margin: 0 0 1.25rem; padding: 1rem 1.25rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-lg); }
legend { padding: 0 0.375rem; color: var(--fg); font-weight: 600; font-size: 0.9375rem; }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.choices label { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0; font-weight: 400; font-size: 0.9375rem; }
.field { margin: 0 0 1.125rem; }
.field > label { margin-top: 0; }
.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.field-row label { margin-bottom: 0.375rem; }
.field-row a { font-size: 0.8125rem; }
.hint { margin: 0.375rem 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.field-error { display: flex; align-items: flex-start; gap: 0.375rem; margin: 0.375rem 0 0; color: var(--err); font-size: 0.875rem; font-weight: 500; }
.field-error::before { content: ""; flex: none; margin-top: 0.15rem; width: 1rem; height: 1rem; background-color: currentColor; -webkit-mask: var(--i-alert-circle) center / contain no-repeat; mask: var(--i-alert-circle) center / contain no-repeat; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.filters > div { flex: 1 1 11rem; }
.filters label { margin-top: 0; }
.filters > div.go { flex: 0 0 auto; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.inline-form select, .inline-form input[type=text] { width: auto; min-width: 7rem; min-height: 2.25rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.875rem; }
.inline-form button { min-height: 2.25rem; padding: 0.25rem 0.875rem; font-size: 0.875rem; }
.inline-form label, .row label { margin: 0; }
.actions + p, .actions + .muted { margin-top: 0.875rem; }
form.inline-form { margin-top: 1rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.row select { width: auto; min-width: 12rem; }
.divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* auth template */
.auth-head { margin: 0 0 2rem; text-align: center; }
.auth-head .tile { margin: 0 auto 1.5rem; }
.auth-head h1 { margin: 0 0 0.5rem; font-size: 1.625rem; }
.auth-head p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.card.auth-card { padding: 2rem; }
.card.auth-card form > button[type=submit]:last-child, .card.auth-card .actions > button[type=submit]:only-child { width: 100%; }
.auth-foot { margin: 1.5rem 0 0; text-align: center; color: var(--muted); font-size: 0.875rem; }
@media (max-width: 479.98px) { .card.auth-card { padding: 1.5rem 1.25rem; } }
body.l-auth .shell > .content > .card { box-shadow: var(--shadow-card), 0 0 60px var(--glow); }

/* ---------- alerts, notices ---------- */
.alert { position: relative; margin: 0 0 1.25rem; padding: 0.875rem 1rem 0.875rem 2.875rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--fg); font-size: 0.9375rem; line-height: 1.55; }
.alert::before { content: ""; position: absolute; left: 1rem; top: 1.0625rem; width: 1.125rem; height: 1.125rem; background-color: var(--alert-c, var(--link)); -webkit-mask: var(--alert-i, var(--i-info-circle)) center / contain no-repeat; mask: var(--alert-i, var(--i-info-circle)) center / contain no-repeat; }
.alert.ok { --alert-c: var(--ok); --alert-i: var(--i-circle-check); background: var(--ok-tint); border-color: var(--ok-line); }
.alert.warn { --alert-c: var(--warn); --alert-i: var(--i-alert-triangle); background: var(--warn-tint); border-color: var(--warn-line); }
.alert.err { --alert-c: var(--err); --alert-i: var(--i-alert-circle); background: var(--err-tint); border-color: var(--err-line); }
.alert.info { --alert-c: var(--link); --alert-i: var(--i-info-circle); background: var(--primary-tint); border-color: var(--primary-line); }
.alert a { color: inherit; font-weight: 600; }
.alert .alert-title { display: block; margin-bottom: 0.125rem; font-weight: 600; }
.alert > :last-child { margin-bottom: 0; }
.alert.mfa-due { margin-bottom: 1.5rem; }
.notice { margin: 0 0 0.875rem; padding: 0.875rem 1rem; border: 1px solid var(--line-soft); border-left: 3px solid var(--primary-line); border-radius: var(--r-md); background: var(--surface-2); color: var(--fg-2); font-size: 0.9375rem; line-height: 1.6; }
ul.notices { margin: 0; padding: 0; list-style: none; }
ul.notices li { margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--line-soft); }
ul.notices li:first-child { border-top: none; padding-top: 0; }
li.notice-item p { margin-bottom: 0.25rem; }
li.notice-item form { margin: 0; }
ul.hints { margin: 0; padding-left: 1.125rem; }
ul.hints li::marker { color: var(--muted); }

/* ---------- pills, badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.0625rem 0.625rem; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface-2); color: var(--fg-2); font-size: 0.75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: 0.0625rem; }
.pill.ok, .pill.warn, .pill.err, .pill.info { padding-left: 0.5rem; }
.pill.ok::before, .pill.warn::before, .pill.err::before, .pill.info::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--ok); background: var(--ok-tint); border-color: var(--ok-line); }
.pill.warn { color: var(--warn); background: var(--warn-tint); border-color: var(--warn-line); }
.pill.err { color: var(--err); background: var(--err-tint); border-color: var(--err-line); }
.pill.info { color: var(--link); background: var(--primary-tint); border-color: var(--primary-line); }
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); font: 700 0.75rem/1.5 var(--font-mono); letter-spacing: 0.02em; }
.badge.primary { background: var(--primary-tint); color: var(--link); }
.dot { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ok); vertical-align: 0.0625rem; }
.dot.warn { background: var(--warn); } .dot.err { background: var(--err); } .dot.off { background: var(--line-strong); }
.dot.live { box-shadow: 0 0 0 0 currentColor; animation: oc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ---------- lists, facts ---------- */
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1.5rem; margin: 0 0 1rem; font-size: 0.9375rem; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
ul.list { margin: 0; padding: 0; list-style: none; }
ul.list > li { margin: 0; padding: 0.875rem 0; border-top: 1px solid var(--line-soft); }
ul.list > li:first-child { border-top: none; padding-top: 0; }
ul.list > li:last-child { padding-bottom: 0; }
ul.list > li > form { margin-top: 0.5rem; }

/* ---------- tables ---------- */
.table-wrap { position: relative; overflow-x: auto; margin: 0 0 1.25rem; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--surface); -webkit-overflow-scrolling: touch; }
.card .table-wrap { margin-left: -1.5rem; margin-right: -1.5rem; border-width: 1px 0; border-radius: 0; background: transparent; }
.card .table-wrap:last-child { margin-bottom: -1.5rem; border-bottom: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
* + .table-wrap { margin-top: 1.25rem; }
.admin > form:not([class]) { margin: -0.5rem 0 1.25rem; }
.card > .table-wrap:first-child { margin-top: -1.5rem; border-top: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.card > .table-wrap:only-child { border-radius: var(--r-lg); }
@media (max-width: 479.98px) { .card .table-wrap { margin-left: -1.25rem; margin-right: -1.25rem; } .card .table-wrap:last-child { margin-bottom: -1.25rem; } .card > .table-wrap:first-child { margin-top: -1.25rem; } }
table.data { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
table.data caption { padding: 0 0 0.75rem; text-align: left; color: var(--muted); font-size: 0.8125rem; }
table.data th, table.data td { padding: 0.75rem 1rem; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
table.data thead th { padding-top: 0.625rem; padding-bottom: 0.625rem; border-top: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
table.data th:first-child, table.data td:first-child { padding-left: 1.5rem; }
table.data th:last-child, table.data td:last-child { padding-right: 1.5rem; }
table.data tbody tr:nth-child(even) { background: var(--row-zebra); }
table.data tbody tr { transition: background-color 0.15s; }
table.data tbody tr:hover { background: var(--row-hover); }
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data td.nowrap { white-space: nowrap; }
table.data tfoot td { border-top: 2px solid var(--line); font-weight: 600; }
table.data form { margin: 0; }
table.data .actions { margin: 0; gap: 0.5rem; }
table.data code { font-size: 0.8125rem; }
table.data.dense th, table.data.dense td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
@media (max-width: 639.98px) {
  table.data.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.data.stack, table.data.stack tbody, table.data.stack tr, table.data.stack td { display: block; width: 100%; }
  table.data.stack tr { padding: 0.75rem 1.25rem; border-top: 1px solid var(--line-soft); }
  table.data.stack tbody tr:nth-child(even) { background: transparent; }
  table.data.stack td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; border: 0; text-align: right; }
  table.data.stack td:empty { display: none; }
  table.data.stack td::before { content: attr(data-label); color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; white-space: normal; }
  table.data.stack td:first-child, table.data.stack td:last-child { padding-left: 0; padding-right: 0; }
}

/* ---------- tabs, pagination ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 1.25rem; padding: 0.25rem; width: fit-content; max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.tabs a { display: inline-flex; align-items: center; min-height: 2.125rem; padding: 0.25rem 0.875rem; border-radius: 9px; color: var(--muted); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.tabs a:hover { color: var(--fg); }
.tabs a[aria-current=page] { background: var(--surface-solid); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), inset 0 0 0 1px var(--line); }
nav.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1.25rem 0 0; color: var(--muted); font-size: 0.875rem; }
nav.pagination .pages { display: flex; gap: 0.5rem; }

/* ---------- code ---------- */
:not(pre) > code { padding: 0.125em 0.375em; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface-2); font-size: 0.85em; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
pre { margin: 0 0 1rem; padding: 1rem 1.25rem; overflow-x: auto; border: 1px solid var(--code-line); border-radius: var(--r-lg); background: var(--code-bg); color: var(--code-fg); font-size: 0.875rem; line-height: 1.65; tab-size: 2; }
pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
.codeblock { margin: 0 0 1rem; overflow: hidden; border: 1px solid var(--code-line); border-radius: var(--r-lg); background: var(--code-bg); color: var(--code-fg); }
.codeblock-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.75rem; padding: 0.375rem 0.5rem 0.375rem 1rem; border-bottom: 1px solid var(--code-line); color: var(--code-muted); font-size: 0.75rem; font-weight: 500; }
.codeblock-head .label { display: inline-flex; align-items: center; gap: 0.5rem; }
.codeblock-head .label .i { width: 0.875rem; height: 0.875rem; }
.codeblock pre { margin: 0; border: 0; border-radius: 0; background: none; }
.codeblock.wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.codeblock .cmd::before { content: "$ "; color: var(--code-muted); user-select: none; -webkit-user-select: none; }
.codeblock .select-all { user-select: all; -webkit-user-select: all; }
.codeblock .tok-c { color: var(--code-muted); } .codeblock .tok-k { color: var(--code-key); } .codeblock .tok-s { color: var(--code-str); }
button.copy { min-height: 2rem; padding: 0.125rem 0.625rem; border: 1px solid var(--code-line); border-radius: 9px; background: rgba(255, 255, 255, 0.04); color: var(--code-fg); font-size: 0.75rem; font-weight: 500; }
button.copy:hover { background: rgba(255, 255, 255, 0.09); color: #ffffff; }
button.copy .i { width: 0.875rem; height: 0.875rem; }
button.copy[data-state=done] { color: var(--code-str); border-color: rgba(74, 222, 128, 0.35); }
button.copy[data-state=done] .i { --i: var(--i-check); }
button.copy:focus-visible { outline-color: #2bc7ee; }
.usercode { display: inline-block; margin: 0.25rem 0 1rem; padding: 0.5rem 1.25rem; border: 1px solid var(--primary-line); border-radius: var(--r-md); background: var(--primary-tint); color: var(--fg); font: 700 2rem/1.3 var(--font-mono); letter-spacing: 0.12em; }
p.secret code { display: inline-block; padding: 0.5rem 0.75rem; font-size: 1.0625rem; letter-spacing: 0.08em; word-break: break-all; }
ol.codes { display: grid; grid-template-columns: repeat(2, max-content); gap: 0.5rem 2.5rem; margin: 0 0 1rem; padding: 1rem 1.25rem 1rem 2.75rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); font-size: 1.0625rem; }
ol.codes li { margin: 0; }
ol.codes li::marker { color: var(--muted); font-size: 0.8125rem; }
ol.codes code { padding: 0; border: 0; background: none; letter-spacing: 0.06em; font-size: 1rem; }
.qr { margin: 0.5rem 0 1.25rem; }
.qr svg.qrcode { display: block; width: 14rem; max-width: 100%; height: auto; padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #ffffff; }

/* ---------- empty state, confirmation, downloads ---------- */
.empty { padding: 2.5rem 1.5rem; border: 1px dashed var(--line); border-radius: var(--r-lg); text-align: center; color: var(--muted); }
.empty .tile { margin: 0 auto 1rem; }
.empty h3 { margin: 0 0 0.375rem; font-size: 1rem; }
.empty p { max-width: 28rem; margin: 0 auto; font-size: 0.9375rem; }
.empty .actions { justify-content: center; }
details.confirm { margin: 0.75rem 0 0; }
details.confirm > summary { display: inline-flex; list-style: none; }
details.confirm > summary::-webkit-details-marker { display: none; }
details.confirm[open] > summary { opacity: 0.6; }
.confirm-panel { margin-top: 0.75rem; padding: 1rem 1.25rem; border: 1px solid var(--err-line); border-radius: var(--r-md); background: var(--err-tint); }
.confirm-panel p { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.confirm-panel .actions { margin-top: 0.75rem; }
details:not(.menu):not(.confirm) > summary { cursor: pointer; color: var(--link); font-weight: 500; }
details { margin: 1rem 0 0.5rem; }
details.menu { margin: 0 0 0 auto; }
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1.5rem; }
.dl-card { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 1.75rem; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
@media (hover: hover) { .dl-card:hover { border-color: var(--primary-line); box-shadow: 0 8px 32px var(--glow); } }
.dl-card .tile { margin-bottom: 1rem; }
.dl-card h3 { margin: 0; font-size: 1.25rem; }
.dl-card .dl-detail { margin: 0 0 1rem; color: var(--muted); font-size: 0.9375rem; }
.dl-card .button { margin-top: auto; }
.dl-card .dl-foot { margin-top: auto; padding-top: 1.25rem; }
.dl-card .dl-foot .button { margin: 0; }
.dl-card .dl-meta { margin: 0; color: var(--muted); font: 400 0.75rem/1.5 var(--font-mono); }
.dl-card .dl-note { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.55; }
.dl-card details { margin: 0.5rem 0 0; font-size: 0.75rem; }
.dl-card details > summary { color: var(--muted); font-weight: 500; }
.dl-card details code { display: block; margin-top: 0.375rem; font-size: 0.6875rem; word-break: break-all; }

/* ---------- charts (src/admin/charts.ts, the usage page) ---------- */
.meter-wrap { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
svg.meter { width: 5.5rem; height: 0.5rem; vertical-align: middle; border-radius: 4px; }
svg.bar { width: 100%; min-width: 6rem; height: 0.5rem; vertical-align: middle; border-radius: 4px; }
.meter-num { font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.meter-track, .bar-track { fill: var(--surface-3); }
.meter-fill.ok, .bar-fill { fill: var(--primary); }
.meter-fill.warn { fill: var(--cat-amber); }
.meter-fill.err { fill: var(--err); }
.split-plan { fill: var(--primary); }
.split-credit { fill: var(--cat-amber); }
.split-absorbed { fill: var(--line-strong); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.875rem; color: var(--muted); font-size: 0.8125rem; }
.legend .key { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.25rem; border-radius: 3px; vertical-align: -0.0625rem; }
.split-plan-key { background: var(--primary); }
.split-credit-key { background: var(--cat-amber); }
.split-absorbed-key { background: var(--line-strong); }
svg.usage-chart { display: block; width: 100%; height: 8rem; margin: 0.25rem 0 1rem; border-bottom: 1px solid var(--line); }
svg.usage-chart rect.bar { fill: var(--primary); }
ul.windows { display: grid; gap: 1rem; margin: 0 0 1rem; padding: 0; list-style: none; }
li.window { margin: 0; }
li.window .window-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
li.window .window-pct { margin-left: auto; font-variant-numeric: tabular-nums; }
meter { display: block; width: 100%; height: 0.625rem; margin: 0.375rem 0; border: 0; border-radius: 5px; background: var(--surface-3); }
meter::-webkit-meter-bar { height: 0.625rem; border: 0; border-radius: 5px; background: var(--surface-3); }
meter::-webkit-meter-optimum-value { border-radius: 5px; background: var(--primary); }
meter::-webkit-meter-suboptimum-value { border-radius: 5px; background: var(--cat-amber); }
meter::-webkit-meter-even-less-good-value { border-radius: 5px; background: var(--err); }
meter::-moz-meter-bar { border-radius: 5px; background: var(--primary); }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--cat-amber); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--err); }

/* ---------- motion (CSS only; content is visible without it) ---------- */
@keyframes oc-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes oc-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .container > * { animation: oc-rise 0.6s var(--ease) both; }
  .hero .container > :nth-child(2) { animation-delay: 0.08s; } .hero .container > :nth-child(3) { animation-delay: 0.16s; }
  .hero .container > :nth-child(4) { animation-delay: 0.24s; } .hero .container > :nth-child(n+5) { animation-delay: 0.32s; }
  @supports (animation-timeline: view()) {
    .reveal { animation: oc-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- forced colours, print ---------- */
@media (forced-colors: active) {
  .i, .alert::before, .field-error::before, header.top nav a[hreflang]::before, header.top nav button.link::before, header.top .org::before, .admin-org::before, nav.section a.current::after, .tree-stem::after, footer.site a[hreflang]::before { forced-color-adjust: none; background-color: CanvasText; }
  .brand-mark { forced-color-adjust: none; }
  nav.section a.current, .tabs a[aria-current=page] { outline: 2px solid CanvasText; }
}
@media print {
  header.top, footer.site, nav.section, .skip, .noprint, button.copy { display: none !important; }
  body { background: #ffffff; color: #000000; }
  .shell { padding: 0; max-width: none; }
  .with-nav { display: block; }
  .card, .table-wrap { border: none; box-shadow: none; background: none; padding: 0; }
  pre, .codeblock { background: #ffffff; color: #000000; border: 1px solid #999999; }
  * { animation: none !important; }
}