/* ========================================================================== Host An App — Design System (hand-written, zero dependencies, no Tailwind) -------------------------------------------------------------------------- Single source of truth for every page: landing, docs, 404, login, and the server-rendered document shell (internal/render/layout.html) loaded by Markdown and Mermaid deployments. Self-hosted fonts live under /assets/fonts/ so the strict Content-Security-Policy on / routes cannot block them. Two themes live in this file: • DARK (default) — legacy: content deployed before the paper retheme still references these classes until it expires. • PAPER (body.paper) — marketing, service, and rendered pages (landing, docs, login, 404, Markdown + Mermaid deployments). Light "paper" aesthetic. Adding class="paper" to flips the shared design tokens, so most rules restyle automatically. ========================================================================== */ /* ----- Self-hosted fonts (latin subset) ----- */ @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-400.woff2") format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-400-italic.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-var-latin.woff2") format("woff2"); } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/dm-mono-400.woff2") format("woff2"); } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/dm-mono-500.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/space-grotesk-var-latin.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/assets/fonts/jetbrains-mono-var-latin.woff2") format("woff2"); } /* ----- Design tokens (shared defaults; body.paper flips them to paper) ----- */ :root { --bg-base: #030405; --bg-surface: #0A0B0E; --bg-surface-hover: #111318; --bg-deep: #050608; --border: #1E2128; --border-active: #323642; --text-bright: #F3F4F6; --text: #E5E7EB; --text-muted: #A8B0BC; --text-muted-2: #8A919E; --accent: #FF4F19; --accent-hover: #FF6B3D; --success: #00E676; --warning: #F5A623; --error: #FF3366; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "DM Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; --font-serif: "Instrument Serif", Georgia, serif; --radius: 0.75rem; --radius-sm: 0.375rem; --header-h: 3.5rem; } /* ----- Reset / base ----- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg-base); color: var(--text-bright); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-image: radial-gradient(circle at 50% 0%, rgba(255, 79, 25, 0.05) 0%, transparent 50%), radial-gradient(circle at 100% 100%, rgba(0, 230, 118, 0.02) 0%, transparent 50%); background-attachment: fixed; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ::selection { background: rgba(255, 79, 25, 0.3); color: var(--text-bright); } [id] { scroll-margin-top: 5rem; } /* ----- Scrollbar ----- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-active); } /* ----- Screen-reader only ----- */ .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; } .hide-sm { display: inline; } @media (min-width: 640px) { .hide-sm { display: none; } } /* ----- Shared text utilities (used by docs, api-docs and the admin UI) ----- */ .mono { font-family: var(--font-mono); font-size: 12px; } .muted { color: var(--text-muted); } /* ----- Layout primitives ----- */ .page-main { flex: 1 0 auto; } .container { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; } @media (min-width: 640px) { .container { padding-inline: 1.5rem; } } /* ========================================================================== Animations ========================================================================== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(2.5); opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } } .anim-fade-up { opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .anim-delay-1 { animation-delay: 0.1s; } .anim-delay-2 { animation-delay: 0.2s; } .anim-delay-3 { animation-delay: 0.3s; } .anim-delay-4 { animation-delay: 0.4s; } /* ========================================================================== Reusable components (docs) ========================================================================== */ .doc-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .doc-card--accent { border-color: rgba(255, 81, 43, 0.35); background: var(--orange-soft); } .doc-card:hover { border-color: var(--border-active); background: var(--bg-surface-hover); transform: translateY(-2px); } .code-block { background: #181817; border: 1px solid #30302e; border-radius: 14px; overflow: hidden; position: relative; } .code-block pre { padding: 1.125rem 1.375rem; margin: 0; overflow-x: auto; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.8; color: #deddd8; } .code-block .code-header { padding: 0.625rem 1.375rem; border-bottom: 1px solid #30302e; display: flex; align-items: center; justify-content: space-between; background: #1d1d1b; } .code-block .code-header > span { font-family: var(--font-mono); font-size: 0.6875rem; color: #777; } .code-block .code-header > span.badge { color: inherit; } .code-shimmer::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 81, 43, 0.5) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 3s linear infinite; } code { font-family: var(--font-mono); font-size: 0.875em; background: var(--bg-surface); border: 1px solid var(--border); padding: 0.15em 0.4em; border-radius: 4px; color: var(--text-bright); } pre code { background: none; border: 0; padding: 0; font-size: inherit; border-radius: 0; } .hl-keyword { color: #FF79C6; } .hl-string { color: #F1FA8C; } .hl-comment { color: #6272A4; font-style: italic; } .hl-type { color: #8BE9FD; } .hl-number { color: #BD93F4; } .hl-property { color: #50FA7B; } .hl-literal { color: #BD93F4; } .hl-tag { color: #FF79C6; } .hl-attr { color: #50FA7B; } .hl-value { color: #F1FA8C; } .hl-method { color: #8BE9FD; } .hl-url { color: #FF6B3D; } .badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.625rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-weight: 500; } .badge-get { background: rgba(32, 165, 107, 0.12); color: var(--success); border: 1px solid rgba(32, 165, 107, 0.3); } .badge-post { background: rgba(255, 81, 43, 0.12); color: var(--accent); border: 1px solid rgba(255, 81, 43, 0.3); } .badge-required { background: rgba(255, 81, 43, 0.12); color: var(--accent); border: 1px solid rgba(255, 81, 43, 0.3); } .badge-optional { background: rgba(119, 116, 108, 0.12); color: var(--text-muted-2); border: 1px solid rgba(119, 116, 108, 0.3); } .badge-success { background: rgba(32, 165, 107, 0.12); color: var(--success); border: 1px solid rgba(32, 165, 107, 0.3); } .badge-error { background: rgba(212, 61, 31, 0.12); color: var(--error); border: 1px solid rgba(212, 61, 31, 0.3); } .badge-managed { background: rgba(129, 140, 248, 0.14); color: #A5B4FC; border: 1px solid rgba(129, 140, 248, 0.35); } .copy-btn { font-family: var(--font-mono); font-size: 0.625rem; background: #282826; border: 1px solid #41413f; color: #fff; padding: 0.375rem 0.75rem; border-radius: 8px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; position: absolute; top: 0.55rem; right: 0.625rem; z-index: 2; } .copy-btn:hover { background: #343432; } .copy-btn:active { transform: scale(0.95); } .param-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .param-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .param-table th { text-align: left; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-muted-2); text-transform: uppercase; letter-spacing: 0.08em; } .param-table td { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--border); color: var(--text-bright); vertical-align: top; } .param-table tr:last-child td { border-bottom: 0; } .param-table td.muted { color: var(--text-muted); font-size: 0.8125rem; } .param-table td.mono { font-family: var(--font-mono); color: var(--accent); font-size: 0.75rem; } /* ========================================================================== Docs page (paper theme — body.paper) ========================================================================== */ .integ-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; } @media (min-width: 640px) { .integ-grid { grid-template-columns: repeat(2, 1fr); } } .docs-layout { display: flex; flex: 1; flex-direction: column; min-height: 0; } @media (min-width: 1024px) { .docs-layout { flex-direction: row; } } [hidden] { display: none !important; } .docs-content section { scroll-margin-top: 140px; } .docs-sidebar { padding: 1.75rem 0.9rem; border-right: 1px solid var(--line); } @media (min-width: 1024px) { .docs-sidebar { position: fixed; top: 80px; left: 0; bottom: 0; width: 250px; overflow-y: auto; } } .docs-sidebar-inner { display: flex; flex-direction: column; gap: 1.25rem; } .docs-nav-toggle { display: none; } /* Mobile: the sidebar becomes a tappable, collapsible "On this page" menu. No more hidden horizontal scroll — one obvious control that expands the section list vertically. */ @media (max-width: 1023px) { .docs-sidebar { position: sticky; top: 80px; z-index: 40; padding: 0.6rem 1.25rem 0.75rem; border-right: 0; border-bottom: 1px solid var(--line); background: rgba(244, 242, 236, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .docs-nav-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.25rem; margin: 0; background: none; border: 0; font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); cursor: pointer; text-align: left; } .docs-nav-toggle__label { display: inline-flex; align-items: center; gap: 0.5rem; } .docs-nav-toggle__label::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--orange); } .docs-nav-toggle__icon { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 0.5rem; background: var(--orange-soft); color: var(--orange); font-size: 1.125rem; font-weight: 500; line-height: 1; transition: transform 0.18s ease; } .docs-nav-toggle[aria-expanded='true'] .docs-nav-toggle__icon { transform: rotate(45deg); } .docs-sidebar-inner { display: none; flex-direction: column; gap: 0.125rem; padding-top: 0.5rem; margin-top: 0.5rem; border-top: 1px solid var(--line); } .docs-sidebar-inner.is-open { display: flex; } .sidebar-group { flex-direction: column; gap: 0.125rem; padding: 0.25rem 0; } .docs-sidebar .section-title { display: block; } .docs-sidebar .nav-link { white-space: normal; flex-shrink: 0; padding: 0.5rem 0.75rem; border-radius: 0.5rem; } /* Long endpoint paths (e.g. webhook routes) must wrap, not overflow. */ .docs-sidebar .nav-link { overflow-wrap: anywhere; word-break: break-word; } .docs-sidebar .nav-link .badge { flex-shrink: 0; } } /* Small screens: let endpoint cards wrap so long paths fit the viewport. */ @media (max-width: 639px) { .endpoint-head { flex-wrap: wrap; row-gap: 0.25rem; } .endpoint-head .endpoint-path { overflow-wrap: anywhere; word-break: break-word; min-width: 0; flex: 1 1 100%; } .endpoint-head .endpoint-summary { max-width: 100%; text-align: left; margin-left: 0; flex-basis: 100%; } } .sidebar-group { display: flex; flex-direction: column; gap: 0.125rem; } .section-title { font-size: 0.625rem; font-family: var(--font-mono); font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.5rem; padding: 0 0.75rem; } .nav-link { display: block; padding: 0.4rem 0.75rem; font-size: 0.8125rem; color: var(--muted); border-radius: 0.5rem; transition: color 0.15s ease, background 0.15s ease; font-family: var(--font-sans); } .nav-link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.65); } .nav-link.active { color: var(--orange); background: var(--orange-soft); font-weight: 600; } .docs-content { flex: 1; min-width: 0; } @media (min-width: 1024px) { .docs-content { margin-left: 250px; } } .docs-content__inner { max-width: 50rem; margin-inline: auto; padding: 2.75rem 1.5rem 5rem; } @media (min-width: 640px) { .docs-content__inner { padding: 3rem 2.5rem 5rem; } } .docs-content section { margin-bottom: 4rem; } .docs-content h1 { margin: 0 0 1.25rem; font-size: clamp(2.125rem, 5vw, 2.875rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1.0; color: var(--ink); } .docs-content h1 em, .docs-content h2 em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; } .docs-content h2 { margin: 0 0 1rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); } .docs-content h3 { margin: 0 0 0.75rem; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .docs-content h4 { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 700; color: var(--ink); } .docs-content p { margin: 0 0 1rem; font-size: 0.875rem; color: var(--muted); line-height: 1.65; } .docs-content p strong { color: var(--ink); font-weight: 600; } .docs-content code { font-size: 0.8125rem; } .docs-content .lead { font-size: 1rem; max-width: 38rem; margin-bottom: 2rem; color: var(--muted); } .docs-content .code-block { margin-bottom: 1.5rem; } .docs-content .doc-card { margin-bottom: 0; } .docs-content ol { margin: 0 0 1rem; padding-left: 1.25rem; font-size: 0.875rem; color: var(--muted); line-height: 1.7; display: flex; flex-direction: column; gap: 0.5rem; } .docs-content ol li::marker { color: var(--orange); font-family: var(--font-mono); font-size: 0.75rem; } .docs-content .reserved-slugs { display: flex; flex-wrap: wrap; gap: 0.5rem; } .docs-content .table-card { background: rgba(255, 255, 255, 0.55); border: 1px solid var(--line); border-radius: 1rem; overflow-x: auto; margin: 0 -1.5rem 1.5rem; } @media (max-width: 639px) { .docs-content .table-card { margin-inline: -1rem; } } @media (min-width: 640px) { .docs-content .table-card { margin-inline: 0; } } .docs-content .table-card .param-table th, .docs-content .table-card .param-table td { padding-inline: 1rem; } .docs-content .stack { display: flex; flex-direction: column; gap: 0.75rem; } .docs-content .row { display: flex; align-items: center; gap: 0.75rem; } .docs-content .setup-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .docs-content .setup-title img { width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; } .docs-content .setup-block { margin-bottom: 1.5rem; } /* ——— Generated Projects reference (docs) ——— Body rendered by `make docs-projects` from internal/projects/docs.md (goldmark output, headings demoted one level). Scoped under .docs-md so the hand-written page keeps its own components untouched. */ .docs-md h3 { margin-top: 2rem; } .docs-md h4 { margin-top: 1.5rem; } .docs-md .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .docs-md strong { color: var(--ink); font-weight: 600; } .docs-md table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.8125rem; } .docs-md th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.625rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .docs-md td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; } .docs-md tr:last-child td { border-bottom: 0; } /* ——— Product switch (docs): sticky segmented control, one track at a time ——— */ .doc-switch { position: sticky; top: 80px; z-index: 30; margin: 2.5rem -1.5rem 2rem; padding: 0.625rem 1.5rem; background: rgba(244, 242, 236, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } @media (min-width: 640px) { .doc-switch { margin-inline: -2.5rem; padding-inline: 2.5rem; } } .doc-switch__tabs { display: flex; gap: 0.375rem; background: rgba(23, 23, 21, 0.05); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem; } .doc-switch__tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.55rem 1rem; border: none; border-radius: 999px; background: transparent; cursor: pointer; font: inherit; color: var(--muted); transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .doc-switch__tab:hover { color: var(--ink); } .doc-switch__tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } .doc-switch__tab.is-active { background: var(--ink); color: #fff; box-shadow: 0 4px 14px rgba(23, 23, 21, 0.18); } .doc-switch__num { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--orange); background: rgba(255, 81, 43, 0.12); flex-shrink: 0; } .doc-switch__tab.is-active .doc-switch__num { color: #fff; background: var(--orange); } .doc-switch__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; } .doc-switch__name { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.02em; } .doc-switch__hint { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.72; } @media (max-width: 479px) { .doc-switch__hint { display: none; } } /* ——— Model diagram (docs, managed): an animated architecture diagram ——— Owner chain (vertical): you → namespace → project. Request path (horizontal, inside the project): users → frontends → backend. Color key: blue = public pages/entry · green = private data · amber = the action call · orange = the credential and everything it unlocks. */ .doc-arch { display: flex; flex-direction: column; margin: 0 0 1.75rem; } /* owner apex — the root of the ownership chain */ .doc-arch__owner { display: flex; align-items: center; gap: 0.7rem; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0.55rem 1rem; border: 1.5px solid rgba(255, 81, 43, 0.42); border-radius: 1rem; background: var(--orange-soft); box-shadow: 0 2px 0 rgba(255, 81, 43, 0.07) inset; } .doc-arch__owner-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 0.7rem; background: #fff; border: 1px solid rgba(255, 81, 43, 0.42); color: var(--orange); } .doc-arch__owner-icon svg { width: 19px; height: 19px; } .doc-arch__owner-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .doc-arch__owner-name { display: flex; align-items: center; gap: 0.55rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); flex-wrap: wrap; } .doc-arch__owner-role { font-family: var(--font-mono); font-size: 0.52rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.13em; color: var(--orange); padding: 0.06rem 0.4rem; border-radius: 999px; border: 1px solid rgba(255, 81, 43, 0.3); } .doc-arch__owner-desc { font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.5; color: var(--muted); letter-spacing: 0.02em; } /* vertical spine connector (owner → namespace) */ .doc-arch__spine { position: relative; height: 2.3rem; display: flex; align-items: center; justify-content: center; } .doc-arch__spine-rail { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(180deg, rgba(255, 81, 43, 0.55), rgba(255, 81, 43, 0.16)); } .doc-arch__spine-dot { position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 81, 43, 0.18); animation: doc-arch-flow 1.9s ease-in-out infinite; } .doc-arch__spine-label { position: relative; z-index: 1; padding: 0.13rem 0.6rem; font-family: var(--font-mono); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--orange); background: var(--paper); border: 1px solid rgba(255, 81, 43, 0.26); border-radius: 999px; white-space: nowrap; } @keyframes doc-arch-flow { 0% { top: -5px; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { top: calc(100% - 5px); opacity: 0; } } /* namespace = the account envelope */ .doc-arch__scope { border: 1.5px dashed var(--border-active); border-radius: 1.25rem; padding: 1.05rem 1.05rem 1.1rem; background: rgba(255, 255, 255, 0.4); } .doc-arch__scope-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.85rem; } .doc-arch__scope-icon { width: 33px; height: 33px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 0.55rem; background: var(--paper-bright); color: var(--orange); } .doc-arch__scope-icon svg { width: 16px; height: 16px; } .doc-arch__scope-text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .doc-arch__scope-title { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .doc-arch__scope-sub { font-family: var(--font-mono); font-size: 0.64rem; color: var(--muted); letter-spacing: 0.02em; } .doc-arch__scope-count { margin-left: auto; flex-shrink: 0; padding: 0.28rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-bright); font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); white-space: nowrap; } .doc-arch__projects { display: flex; flex-direction: column; gap: 0.6rem; } .doc-arch__project { background: var(--paper-bright); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; } .doc-arch__project--stub { opacity: 0.7; } .doc-arch__proj-head { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--line); } .doc-arch__project--stub .doc-arch__proj-head { border-bottom: none; } .doc-arch__proj-icon { width: 25px; height: 25px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 0.45rem; background: var(--paper-bright); color: var(--muted); } .doc-arch__proj-icon svg { width: 13px; height: 13px; } .doc-arch__proj-name { font-size: 0.8rem; font-weight: 700; color: var(--ink); } .doc-arch__proj-label { margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); letter-spacing: 0.02em; text-align: right; } .doc-arch__proj-body { padding: 0.8rem; } /* the request path as one connected horizontal row */ .doc-arch__row { display: grid; grid-template-columns: auto 2.6rem minmax(0, 1fr) 5.4rem minmax(0, 1.35fr); gap: 0.35rem; align-items: stretch; } .doc-arch__node { display: flex; flex-direction: column; justify-content: center; gap: 0.45rem; border-radius: 0.75rem; padding: 0.6rem 0.7rem; } .doc-arch__node-name { font-size: 0.8rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .doc-arch__node-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .doc-arch__node-head em { font-style: normal; font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); font-weight: 400; } .doc-arch__node-note { font-family: var(--font-mono); font-size: 0.58rem; line-height: 1.5; color: var(--muted); } /* the public audience (external actors) consuming the frontend */ .doc-arch__aud { align-items: center; text-align: center; border: 1.5px solid rgba(119, 118, 108, 0.28); background: rgba(23, 23, 21, 0.04); } .doc-arch__aud-icon { width: 34px; height: 34px; margin: 0 auto; display: grid; place-items: center; border-radius: 999px; background: var(--paper-bright); border: 1px solid var(--line); color: var(--muted); } .doc-arch__aud-icon svg { width: 17px; height: 17px; } /* frontends plane (public) */ .doc-arch__fe { border: 1px solid rgba(63, 97, 255, 0.32); background: rgba(63, 97, 255, 0.06); } .doc-arch__fe-types { font-family: var(--font-mono); font-size: 0.58rem; line-height: 1.7; color: var(--muted); } /* backend plane (private): actions surface on the left, data core on the right */ .doc-arch__be { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0.5rem; border: 1px solid rgba(32, 165, 107, 0.34); background: rgba(32, 165, 107, 0.06); padding: 0.5rem 0.6rem; min-width: 0; } .doc-arch__be-acts { display: flex; flex-direction: column; gap: 0.25rem; align-items: stretch; border: 1px dashed rgba(185, 122, 31, 0.5); background: rgba(185, 122, 31, 0.08); border-radius: 0.55rem; padding: 0.4rem 0.5rem; } .doc-arch__be-acts .doc-arch__node-name { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--warning); } .doc-arch__act { font-family: var(--font-mono); font-size: 0.58rem; color: var(--muted); background: var(--paper-bright); border: 1px solid var(--line); border-radius: 0.35rem; padding: 0.1rem 0.4rem; text-align: left; } .doc-arch__be-core { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .doc-arch__db-icon { color: var(--green); flex-shrink: 0; display: grid; place-items: center; } .doc-arch__db-icon svg { width: 26px; height: 26px; } .doc-arch__db-text { display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start; min-width: 0; } .doc-arch__pill { align-self: flex-start; font-family: var(--font-mono); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap; } .doc-arch__pill--pub { color: var(--blue); background: rgba(63, 97, 255, 0.12); border: 1px solid rgba(63, 97, 255, 0.3); } .doc-arch__pill--own { color: var(--orange); background: var(--orange-soft); border: 1px solid rgba(255, 81, 43, 0.34); } /* horizontal connectors joining the nodes (animated request flow) */ .doc-arch__cn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; min-height: 6rem; } .doc-arch__cn-rail { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, rgba(119, 118, 108, 0.45), rgba(119, 118, 108, 0.12)); } .doc-arch__cn--op .doc-arch__cn-rail { background: linear-gradient(90deg, rgba(185, 122, 31, 0.5), rgba(185, 122, 31, 0.16)); } .doc-arch__cn-rail::after { content: ""; position: absolute; right: -1px; top: 50%; margin-top: -4px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .doc-arch__cn--pub .doc-arch__cn-rail::after { border-left: 6px solid rgba(119, 118, 108, 0.6); } .doc-arch__cn--op .doc-arch__cn-rail::after { border-left: 6px solid rgba(185, 122, 31, 0.7); } .doc-arch__cn-dot { position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--muted); animation: doc-arch-run 1.5s linear infinite; } .doc-arch__cn--op .doc-arch__cn-dot { background: var(--warning); box-shadow: 0 0 0 3px rgba(185, 122, 31, 0.18); animation-delay: 0.5s; } @keyframes doc-arch-run { 0% { left: -4px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } } .doc-arch__cn-label { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.05rem; font-family: var(--font-mono); font-size: 0.56rem; font-weight: 700; line-height: 1.2; color: var(--warning); text-align: center; background: var(--paper-bright); border: 1px solid rgba(185, 122, 31, 0.26); border-radius: 0.45rem; padding: 0.24rem 0.4rem; box-shadow: 0 2px 8px rgba(23, 23, 21, 0.05); } .doc-arch__cn--pub .doc-arch__cn-label { color: var(--muted); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; border-color: var(--line); } .doc-arch__cn-label em { font-style: normal; font-weight: 500; font-size: 0.48rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); } /* compact textual restatement of the data path, under the row */ .doc-arch__path { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; padding-top: 0.65rem; border-top: 1px dashed var(--line); } .doc-arch__path-step { padding: 0.28rem 0.5rem; border: 1px solid var(--line); border-radius: 0.45rem; background: var(--paper-bright); font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); } .doc-arch__path-step--pub { color: var(--blue); border-color: rgba(63, 97, 255, 0.3); } .doc-arch__path-step--op { color: var(--warning); border-color: rgba(185, 122, 31, 0.38); font-weight: 500; background: rgba(185, 122, 31, 0.08); } .doc-arch__path-step--be { color: var(--green); border-color: rgba(32, 165, 107, 0.34); } .doc-arch__path-arr { font-size: 0.7rem; color: var(--muted); } /* entrance cascade: top-down build, loops start after the section is visible */ @keyframes doc-arch-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes doc-arch-glow { 0%, 100% { box-shadow: 0 2px 0 rgba(255, 81, 43, 0.07) inset, 0 0 0 0 rgba(255, 81, 43, 0); } 50% { box-shadow: 0 2px 0 rgba(255, 81, 43, 0.08) inset, 0 0 0 8px rgba(255, 81, 43, 0.13); } } .reveal.visible .doc-arch__owner { animation: doc-arch-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.65s both, doc-arch-glow 3s ease-in-out 2.6s infinite; } .reveal.visible .doc-arch__spine { animation: doc-arch-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.95s both; } .reveal.visible .doc-arch__scope { animation: doc-arch-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s both; } .reveal.visible .doc-arch__project { animation: doc-arch-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.45s both; } .reveal.visible .doc-arch__project--stub { animation: doc-arch-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.6s both; } .reveal.visible .doc-arch__path { animation: doc-arch-rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 1.85s both; } /* the live request flow pulses on the action call */ @keyframes doc-arch-opflow { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(185, 122, 31, 0); } 50% { transform: scale(1.03); box-shadow: 0 0 0 5px rgba(185, 122, 31, 0.18); } } .reveal.visible .doc-arch__path-step--op { animation: doc-arch-opflow 2.6s ease-in-out 2.6s infinite; } .reveal.visible .doc-arch__cn--op .doc-arch__cn-label { animation: doc-arch-opflow 2.6s ease-in-out 2.6s infinite; } @media (max-width: 720px) { .doc-arch__row { grid-template-columns: minmax(0, 1fr); } .doc-arch__cn { min-height: 2.4rem; } .doc-arch__cn-rail { top: 0; bottom: 0; left: 50%; width: 2px; height: auto; margin: 0 0 0 -1px; background: linear-gradient(180deg, rgba(119, 118, 108, 0.4), rgba(119, 118, 108, 0.14)); } .doc-arch__cn--op .doc-arch__cn-rail { background: linear-gradient(180deg, rgba(185, 122, 31, 0.5), rgba(185, 122, 31, 0.16)); } .doc-arch__cn-rail::after { top: auto; right: auto; bottom: -1px; left: 50%; margin: 0 0 0 -4px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: none; border-right: none; border-bottom: 6px solid rgba(185, 122, 31, 0.7); border-left: 4px solid transparent; border-right: 4px solid transparent; margin-left: -4px; } .doc-arch__cn--pub .doc-arch__cn-rail::after { border-bottom-color: rgba(119, 118, 108, 0.6); } .doc-arch__cn-dot { left: 50%; top: -4px; margin: 0 0 0 -4px; animation-name: doc-arch-fall; } .doc-arch__cn--op .doc-arch__cn-dot { animation-delay: 0.4s; } @keyframes doc-arch-fall { 0% { top: -4px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } } .doc-arch__be { grid-template-columns: minmax(0, 1fr); } .doc-arch__be-acts { flex-direction: row; align-items: center; } .doc-arch__scope-sub, .doc-arch__proj-label { display: none; } } .docs-md ul { margin: 0 0 1rem; padding-left: 1.25rem; font-size: 0.875rem; color: var(--muted); line-height: 1.7; display: flex; flex-direction: column; gap: 0.5rem; } .docs-md ul li::marker { color: var(--orange); font-family: var(--font-mono); font-size: 0.75rem; } .docs-md pre { background: #181817; border: 1px solid #30302e; border-radius: 10px; padding: 1.125rem 1.25rem; margin: 0 0 1.5rem; overflow-x: auto; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.8; color: #deddd8; } .docs-md pre code { font-size: inherit; background: none; border: none; padding: 0; border-radius: 0; color: inherit; } /* ——— MCP setup tabs (docs) ——— */ .docs-mcp-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .docs-mcp-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.55); color: var(--muted); font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; white-space: nowrap; } .docs-mcp-tab:hover { border-color: var(--border-active); color: var(--ink); transform: translateY(-1px); } .docs-mcp-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; } .docs-mcp-tab img, .docs-mcp-tab svg, .docs-mcp-tab span.docs-mcp-icon { width: 1.125rem; height: 1.125rem; border-radius: 0.25rem; flex-shrink: 0; display: inline-grid; place-items: center; } .docs-mcp-tab svg { display: block; } /* white-logo pills need dark square so white SVG is always legible (inactive tab is light) */ .docs-mcp-icon-bg { width: 1.25rem; height: 1.25rem; border-radius: 0.3rem; background: #171715; display: grid; place-items: center; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.06); } .docs-mcp-icon-bg svg, .docs-mcp-icon-bg img { width: 14px; height: 14px; object-fit: contain; display: block; } .docs-mcp-tab.active img { filter: none; } .docs-mcp-panel { display: none; animation: fadeUp .35s cubic-bezier(.16,1,.3,1); } .docs-mcp-panel.active { display: block; } .docs-mcp-panel .code-block { margin-bottom: 0; } /* ========================================================================== Deployed document styles (Markdown & Mermaid) ========================================================================== */ /* Markdown + Mermaid content structure. Token-driven: under body.paper the flipped tokens render it in the light paper theme automatically. */ /* Document sizing */ .md-content { max-width: 720px; margin: 0 auto; padding: 3rem 1.5rem 4rem; width: 100%; } @media (max-width: 768px) { .md-content { padding: 2rem 1rem 3rem; max-width: 100%; } } .md-content h1, .md-content h2, .md-content h3, .md-content h4, .md-content h5, .md-content h6 { font-weight: 600; line-height: 1.25; color: var(--text-bright); } .md-content h1 { font-size: 1.6rem; margin-top: 0.5rem; margin-bottom: 1.5rem; } @media (max-width: 768px) { .md-content h1 { font-size: 1.35rem; } } .md-content h2 { font-size: 1.25rem; margin-top: 2.5rem; margin-bottom: 0.75rem; } @media (max-width: 768px) { .md-content h2 { font-size: 1.1rem; } } .md-content h3 { font-size: 1.05rem; margin-top: 2rem; margin-bottom: 0.5rem; } .md-content h4 { font-size: 1rem; margin-top: 1.5rem; margin-bottom: 0.5rem; } .md-content h5 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted-2); } .md-content h6 { font-size: 0.75rem; color: var(--text-muted-2); } .md-content p { margin-bottom: 1rem; color: var(--text); line-height: 1.7; } .md-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .md-content a:hover { color: var(--accent-hover); } .md-content strong { font-weight: 600; color: var(--text-bright); } .md-content em { font-style: italic; color: var(--text); } .md-content del { text-decoration: line-through; color: var(--text-muted); } .md-content code { font-family: var(--font-mono); font-size: 0.875em; background: var(--bg-surface); border: 1px solid var(--border); padding: 0.15em 0.4em; border-radius: 4px; color: var(--text-bright); } .md-content pre { position: relative; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; overflow-x: auto; margin-bottom: 1.25rem; font-size: 0.85rem; line-height: 1.6; -webkit-overflow-scrolling: touch; } @media (max-width: 768px) { .md-content pre { padding: 0.75rem 0.85rem; font-size: 0.78rem; } } .md-content pre code { background: none; padding: 0; border: none; border-radius: 0; font-size: inherit; color: inherit; line-height: inherit; } .md-content blockquote { margin: 1.5rem 0; padding: 0.75rem 1rem; border-left: 2px solid var(--border-active); color: var(--text-muted); background: rgba(255,255,255,0.015); border-radius: 0 4px 4px 0; } .md-content blockquote p { margin-bottom: 0.25rem; } .md-content blockquote p:last-child { margin-bottom: 0; } .md-content ul, .md-content ol { margin: 0.5rem 0 1rem 1.5rem; color: var(--text); } .md-content li { margin-bottom: 0.3rem; } .md-content li p { margin-bottom: 0.25rem; } .md-content hr { border: none; height: 1px; background: var(--border); margin: 2.5rem 0; } .md-content img { max-width: 100%; height: auto; border-radius: 4px; margin: 1rem 0; } .md-content .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0 1.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-surface); } @media (max-width: 768px) { .md-content .table-wrapper { border-radius: 4px; } } .md-content table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 400px; } .md-content th, .md-content td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .md-content thead tr:last-child th { border-bottom: 1px solid var(--border-active); } .md-content th { font-weight: 600; color: var(--text-bright); background: var(--bg-deep); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; } .md-content tbody tr:last-child td { border-bottom: none; } .md-content td { color: var(--text); } .doc-header { margin-bottom: 1.5rem; } .doc-header h1 { margin-top: 0; color: var(--text-bright); font-size: 1.8rem; } /* Mermaid diagram tabs (shared by Markdown inline and standalone Mermaid pages) */ .md-content .mermaid-block, .mermaid-content .mermaid-block { border: 1px solid var(--border); border-radius: 6px; margin: 1.5rem 0; } .mermaid-content .mermaid-block { margin: 0 0 1.5rem; } .md-content .mermaid-tabs, .mermaid-content .mermaid-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-deep); } .md-content .mermaid-tab, .mermaid-content .mermaid-tab { padding: 0.5rem 1rem; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted-2); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--font-mono); transition: color 0.15s; outline: none; } .md-content .mermaid-tab:hover, .mermaid-content .mermaid-tab:hover { color: var(--text-bright); } .md-content .mermaid-tab.active, .mermaid-content .mermaid-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .md-content .mermaid-panel, .mermaid-content .mermaid-panel { background: var(--bg-surface); padding: 1.5rem; display: flex; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; } .md-content .mermaid-panel[data-panel="visual"], .mermaid-content .mermaid-panel[data-panel="visual"] { position: relative; overflow: hidden; display: block; padding: 0; background: #FFFFFF; height: 60vh; min-height: 280px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; transition: position 0s, inset 0s; } .md-content .mermaid-panel[data-panel="visual"].panning, .mermaid-content .mermaid-panel[data-panel="visual"].panning { cursor: grabbing; } .md-content .mermaid-panel[data-panel="visual"] pre.mermaid, .mermaid-content .mermaid-panel[data-panel="visual"] pre.mermaid { margin: 0; padding: 0; background: none; border: none; display: block; } .md-content .mermaid-panel[data-panel="visual"] svg, .mermaid-content .mermaid-panel[data-panel="visual"] svg { display: block; position: absolute; top: 0; left: 0; max-width: none !important; transform-origin: 0 0; } .md-content .mermaid-panel pre.mermaid, .mermaid-content .mermaid-panel pre.mermaid { margin: 0; background: none; border: none; padding: 0; font-family: inherit; color: inherit; border-radius: 0; } .md-content .mermaid-panel pre.mermaid svg, .mermaid-content .mermaid-panel pre.mermaid svg { max-width: 100%; height: auto; } .md-content .mermaid-raw, .mermaid-content .mermaid-raw { position: relative; margin: 0; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.6; color: var(--text); white-space: pre; width: 100%; } .md-content .mermaid-raw code, .mermaid-content .mermaid-raw code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; } @media (max-width: 768px) { .md-content .mermaid-block, .mermaid-content .mermaid-block { border-radius: 4px; } .md-content .mermaid-panel, .mermaid-content .mermaid-panel { padding: 1rem 0.5rem; } .md-content .mermaid-raw, .mermaid-content .mermaid-raw { padding: 0.75rem 0.85rem; font-size: 0.78rem; } .md-content .mermaid-tab, .mermaid-content .mermaid-tab { padding: 0.4rem 0.75rem; font-size: 0.625rem; } } /* --- Mermaid standalone page (container only — block rules shared above) --- */ .mermaid-content { max-width: 100%; margin: 0 auto; padding: 2rem 1rem 3rem; width: 100%; } @media (min-width: 768px) { .mermaid-content { max-width: 960px; padding: 3rem 1.5rem 4rem; } } .mermaid-content h1 { font-weight: 600; font-size: 1.6rem; line-height: 1.3; margin-bottom: 1.25rem; color: var(--text-bright); } @media (max-width: 768px) { .mermaid-content h1 { font-size: 1.3rem; } } /* Diagram panel styles (pan / zoom / fullscreen — shared by Markdown inline tabs and standalone Mermaid pages) */ .diagram-container { position: relative; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 1.25rem; overflow: hidden; display: block; height: 65vh; min-height: 300px; background: #FFFFFF; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; } .diagram-container.panning { cursor: grabbing; } .diagram-container pre.mermaid { margin: 0; padding: 0; background: none; border: none; display: block; } .diagram-container svg { display: block; position: absolute; top: 0; left: 0; max-width: none !important; transform-origin: 0 0; } .diagram-zoom { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 5; display: flex; flex-direction: column; gap: 0.3rem; opacity: 0.85; transition: opacity 0.15s; } .diagram-container:hover .diagram-zoom { opacity: 1; } .diagram-zoom button { width: 34px; height: 34px; padding: 0; border: 1px solid #D1D5DB; background: #FFFFFF; color: #1F2937; border-radius: 6px; cursor: pointer; font-size: 1.15rem; line-height: 1; font-weight: 500; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .diagram-zoom button:hover { background: #F3F4F6; } .diagram-zoom button:active { background: #E5E7EB; } .diagram-hint { position: absolute; left: 0.6rem; bottom: 0.5rem; z-index: 5; font-size: 0.7rem; color: #6B7280; pointer-events: none; font-family: var(--font-mono); } /* Fullscreen diagram panel */ .mermaid-panel[data-panel="visual"].is-fullscreen, .diagram-container.is-fullscreen { position: fixed !important; inset: 0 !important; z-index: 9999; width: 100vw !important; height: 100dvh !important; border-radius: 0; margin: 0; background: #FFFFFF; } /* Let the mermaid block container overflow so the fixed panel breaks out */ .mermaid-block:has(.is-fullscreen) { overflow: visible; } .source-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted-2); margin-bottom: 0.5rem; font-weight: 500; font-family: var(--font-mono); } .source-block { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.85rem; line-height: 1.6; font-family: var(--font-mono); color: var(--text); white-space: pre; } @media (max-width: 768px) { .source-block { padding: 0.75rem 0.85rem; font-size: 0.78rem; } } /* ========================================================================== PAPER THEME — landing + docs (body.paper) -------------------------------------------------------------------------- A tiny publishing machine for the internet. Light paper background, ink text, orange accents, serif italic flourishes. ========================================================================== */ body.paper { /* paper palette */ --paper: #f4f2ec; --paper-bright: #fbfaf7; --ink: #171715; --muted: #77746c; --line: rgba(23, 23, 21, .13); --orange: #ff512b; --orange-soft: rgba(255, 81, 43, .11); --green: #20a56b; --blue: #3f61ff; --sans: Inter, system-ui, sans-serif; --serif: "Instrument Serif", Georgia, serif; --mono: "DM Mono", ui-monospace, monospace; /* flip the shared dark-theme tokens so shared rules restyle themselves */ --bg-base: #f4f2ec; --bg-surface: rgba(255, 255, 255, .55); --bg-surface-hover: #fbfaf7; --bg-deep: #181817; --border: rgba(23, 23, 21, .13); --border-active: rgba(23, 23, 21, .38); --text-bright: #171715; --text: #2a2a27; --text-muted: #77746c; --text-muted-2: #9b9890; --accent: #ff512b; --accent-hover: #e84420; --success: #20a56b; --warning: #b97a1f; --error: #d43d1f; --font-sans: var(--sans); --font-mono: var(--mono); --font-serif: var(--serif); --header-h: 80px; background: var(--paper); background-image: none; color: var(--ink); font-family: var(--sans); overflow-x: hidden; } body.paper button, body.paper input, body.paper textarea { font: inherit; } body.paper ::selection { background: var(--orange); color: white; } body.paper ::-webkit-scrollbar { width: 10px; } body.paper ::-webkit-scrollbar-thumb { background: rgba(23, 23, 21, .18); border-radius: 6px; border: 3px solid var(--paper); } body.paper ::-webkit-scrollbar-thumb:hover { background: rgba(23, 23, 21, .3); } /* subtle paper grain */ body.paper::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); } /* inline code chips on paper (dark panels reset this below) */ body.paper code { background: #ece9e2; border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); } body.paper .code-block code, body.paper .config-panel code, body.paper .md-content pre code, body.paper .mermaid-raw code, body.paper .source-block code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } /* dark panels keep their own dark tokens regardless of theme */ .config-panel, .machine, .code-block { --text-bright: #deddd8; --text: #deddd8; --text-muted: #9b9890; --text-muted-2: #777; --border: #30302e; --border-active: #41413f; --bg-surface: #232321; --bg-base: #181817; } /* ========================================================= PAPER HEADER (shared by landing + docs) ========================================================= */ .header { width: min(1220px, calc(100% - 40px)); height: 80px; margin: auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 100; } .header--sticky { position: sticky; top: 0; /* Full-bleed bar: the background must span the whole viewport so wide content (e.g. CSV tables up to 1400px) never sticks out beside it. The inner content stays aligned with the 1220px centered column via symmetric padding. */ width: 100%; margin: 0; padding-inline: max(20px, calc((100% - 1220px) / 2)); background: rgba(244, 242, 236, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font-size: 18px; font-weight: 750; letter-spacing: -.045em; } .brand-mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: 10px; transform: rotate(-5deg); transition: transform .3s cubic-bezier(.2, .8, .2, 1); } .brand:hover .brand-mark { transform: rotate(5deg) scale(1.08); } /* Arrow glyph as inline SVG: immune to emoji font fallback (a bare ↗ text node renders as the color-emoji variant on some platforms). */ .brand-mark svg { width: 15px; height: 15px; display: block; } .header-right { display: flex; align-items: center; gap: 18px; } .system-status { font-family: var(--mono); font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 7px; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(32, 165, 107, .5); animation: statusPulse 2.5s infinite; } .status-dot.is-error { background: var(--error); animation: none; } @keyframes statusPulse { 70% { box-shadow: 0 0 0 8px rgba(32, 165, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(32, 165, 107, 0); } } .header-link { color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; } .header-link:hover { text-decoration: underline; text-underline-offset: 4px; } /* ========================================================= PAPER HERO — infrastructure edition Serious statement, live stats, and the platform topology diagram (SVG, animated packets, reduced-motion aware). ========================================================= */ .hero { width: min(1220px, calc(100% - 40px)); margin: auto; padding: 84px 0 40px; } .hero-copy { position: relative; z-index: 10; max-width: 900px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .55); font-family: var(--mono); font-size: 10px; letter-spacing: .02em; animation: enter .8s both; } .spark { color: var(--orange); font-size: 14px; } .hero-title { margin: 28px 0 0; max-width: 1000px; font-size: clamp(52px, 7.2vw, 112px); font-weight: 700; line-height: .9; letter-spacing: -.075em; animation: enter .9s .08s both; } .hero-title em { font-family: var(--serif); font-weight: 400; letter-spacing: -.04em; /* hand-drawn orange squiggle under the key word */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='7' viewBox='0 0 52 7'%3E%3Cpath d='M0 4 Q6.5 0 13 4 T26 4 T39 4 T52 4' fill='none' stroke='%23ff512b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: left 96%; background-size: 52px 7px; padding-bottom: .07em; } .hero-subtitle { max-width: 680px; margin: 32px 0 0; color: var(--muted); font-size: 17.5px; line-height: 1.65; animation: enter .9s .16s both; } .hero-actions { margin-top: 30px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; animation: enter .9s .24s both; } /* mono microcopy strip under the CTAs — the platform facts, stated plainly, like a spec sheet header */ .hero-meta { margin-top: 22px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; color: var(--muted); animation: enter .9s .26s both; } .hero-meta-sep { color: rgba(23, 23, 21, .25); } /* live ledger — real numbers from /api/v1/stats */ .hero-ledger { margin-top: 38px; display: flex; align-items: stretch; gap: 26px; animation: enter .9s .32s both; } .ledger-item { position: relative; display: flex; flex-direction: column; gap: 5px; } .ledger-num { font-family: var(--mono); font-size: 24px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ledger-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .ledger-sep { width: 1px; background: var(--line); } .ledger-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(32, 165, 107, .5); animation: statusPulse 2.5s infinite; } @keyframes enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* buttons */ .button { border: 0; cursor: pointer; padding: 15px 20px; border-radius: 13px; font-size: 13px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; } .button-primary { background: var(--ink); color: white; box-shadow: 0 12px 30px rgba(0, 0, 0, .13); } .button-secondary { background: rgba(255, 255, 255, .65); border: 1px solid var(--line); color: var(--ink); } .button:hover { transform: translateY(-3px); } /* ========================================================= PAPER SECTIONS ========================================================= */ .section { width: min(1220px, calc(100% - 40px)); margin: 0 auto 150px; } .section-head { max-width: 780px; margin-bottom: 42px; } .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); } .section-lead { max-width: 62ch; margin: 20px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; } /* ========================================================= INTEGRATIONS ========================================================= */ .integration-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } @media (max-width: 1100px) { .integration-grid { grid-template-columns: repeat(3, 1fr); } } .integration-card { min-height: 235px; padding: 25px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 20px; text-align: left; cursor: pointer; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; } .integration-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0, 0, 0, .06); } .integration-card.active { border-color: var(--ink); background: var(--paper-bright); } .integration-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: #171715; border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 2px 10px rgba(0,0,0,0.10); } .integration-icon img, .integration-icon svg { width: 26px; height: 26px; object-fit: contain; } .integration-icon svg { display: block; } .integration-card h3 { margin: 32px 0 7px; color: var(--ink); font-size: 18px; letter-spacing: -.04em; } .integration-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .integration-active-indicator { position: absolute; top: 20px; right: 20px; width: 8px; height: 8px; border-radius: 50%; background: transparent; } .integration-card.active .integration-active-indicator { background: var(--orange); } .config-panel { margin-top: 15px; min-height: 140px; padding: 25px 25px 62px; background: #181817; color: #deddd8; border-radius: 20px; position: relative; } .config-label { color: #6d6c68; font-family: var(--mono); font-size: 10px; } .config-panel pre { margin: 20px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.8; white-space: pre-wrap; transition: opacity .2s, transform .2s; } /* ---- config note — free/managed caption under the install snippet ---- */ .config-note { max-width: 720px; margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; } .config-note strong { color: var(--text); font-weight: 650; } .config-note code { font-family: var(--mono); font-size: 12px; } /* ---- COPY — command chip inside dark config panel ---- */ .copy-button { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 10px; border: 1px solid #2d2d2b; background: #232321; color: #c8c5be; font-family: var(--sans); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; line-height: 1; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: transform .42s cubic-bezier(.16,1,.3,1), background .22s ease, color .22s ease, border-color .22s ease, box-shadow .42s cubic-bezier(.16,1,.3,1); } .copy-button::before { content: ""; width: 13px; height: 13px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='8' height='8' rx='1.7'/%3E%3Cpath d='M3 8V4.7A1.7 1.7 0 0 1 4.7 3H8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='8' height='8' rx='1.7'/%3E%3Cpath d='M3 8V4.7A1.7 1.7 0 0 1 4.7 3H8'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .9; transition: transform .42s cubic-bezier(.16,1,.3,1); } .copy-button:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-1.5px); box-shadow: 0 8px 22px rgba(255,81,43,.32); } .copy-button:hover::before { transform: translateY(-1px); } .copy-button:active { transform: scale(.97); transition-duration: .12s; } .copy-button.is-copied { background: #f4f2ec; border-color: #f4f2ec; color: #1a1a18; box-shadow: 0 4px 16px rgba(0,0,0,.14); } .copy-button.is-copied::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.6 8.15L6.55 11.1L12.4 4.85' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.6 8.15L6.55 11.1L12.4 4.85' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: copyCheckIn .36s cubic-bezier(.16,1,.3,1); } @keyframes copyCheckIn { 0% { transform: scale(.55) rotate(-10deg); } 100% { transform: scale(1) rotate(0); } } .copy-button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* ========================================================= PLAYGROUND / THE PUBLISHING MACHINE ========================================================= */ .machine { background: #181817; color: white; border-radius: 26px; overflow: hidden; box-shadow: 0 35px 100px rgba(0, 0, 0, .18); } .machine-header { height: 70px; padding: 0 25px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #30302e; } .machine-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 650; } .machine-led { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: statusPulse 2s infinite; } .machine-state { font-family: var(--mono); font-size: 10px; color: #777; } .machine-grid { display: grid; grid-template-columns: 1.5fr .75fr; } .editor { min-height: 540px; border-right: 1px solid #30302e; } .editor-top { min-height: 60px; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid #30302e; } .editor-file { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; } .editor-dot { width: 8px; height: 8px; background: var(--orange); border-radius: 2px; flex-shrink: 0; } .editor-tools { display: flex; align-items: center; gap: 8px; } /* ---- TYPE SWITCHER — underline tabs, not pills ---- */ .editor-types { display: inline-flex; align-items: end; gap: 18px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .type-btn { position: relative; border: 0; cursor: pointer; padding: 10px 2px 12px; margin-bottom: -1px; border-radius: 0; background: transparent; color: #7a7872; font-family: var(--sans); font-size: 12.5px; font-weight: 550; letter-spacing: -.015em; line-height: 1; transition: color .22s ease, transform .22s cubic-bezier(.16,1,.3,1); } .type-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .34s cubic-bezier(.16,1,.3,1); border-radius: 2px 2px 0 0; } .type-btn:hover { color: #b8b5b0; background: transparent; } .type-btn:active { transform: scale(.96); } .type-btn.is-active { background: transparent; color: #f4f2ec; font-weight: 700; box-shadow: none; animation: none; } .type-btn.is-active::after { transform: scaleX(1); } .type-btn.is-active:hover { color: #fff; } /* ---- UPLOAD — dashed ghost that solidifies on hover ---- */ .upload-button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9px; border: 1px dashed #2f2f2d; background: #1e1e1c; color: #9a9893; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 550; letter-spacing: -.01em; line-height: 1; transition: color .22s ease, border-color .22s ease, background .22s ease, transform .42s cubic-bezier(.16,1,.3,1), box-shadow .22s ease; } .upload-button::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 11.6V3.8M8 3.8L4.7 7.1M8 3.8L11.3 7.1M3 10.6V11.9C3 12.45 3.45 12.9 4 12.9H12C12.55 12.9 13 12.45 13 11.9V10.6' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 11.6V3.8M8 3.8L4.7 7.1M8 3.8L11.3 7.1M3 10.6V11.9C3 12.45 3.45 12.9 4 12.9H12C12.55 12.9 13 12.45 13 11.9V10.6' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .85; transition: transform .42s cubic-bezier(.16,1,.3,1); } .upload-button:hover { color: #f4f2ec; border-style: solid; border-color: #3a3a38; background: #2a2a28; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.14); } .upload-button:hover::before { transform: translateY(-1.5px); } .upload-button:active { transform: scale(.97); transition-duration: .12s; } .type-btn:focus-visible, .upload-button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } .editor textarea { width: 100%; height: 480px; padding: 25px; border: 0; outline: 0; resize: none; background: transparent; color: #deddd8; font-family: var(--mono); font-size: 13px; line-height: 1.75; } .editor textarea::placeholder { color: #555; } .deploy-side { padding: 24px; display: flex; flex-direction: column; } .deploy-card { padding: 24px; background: #232321; border: 1px solid #2d2d2b; border-radius: 17px; transition: background .5s; } .deploy-status-label { font-family: var(--mono); font-size: 10px; color: #777; } .deploy-orb { width: 56px; height: 56px; margin: 20px 0 16px; display: grid; place-items: center; background: #2b2b29; border-radius: 50%; font-size: 21px; transition: background .5s, color .5s, box-shadow .5s, transform .5s; } .deploy-orb svg { width: 24px; height: 24px; display: block; } .deploy-card.live .deploy-orb { color: var(--green); background: rgba(32, 165, 107, .12); box-shadow: 0 0 35px rgba(32, 165, 107, .18); transform: scale(1.08); } .deploy-card h3 { margin: 0; font-size: 20px; letter-spacing: -.04em; } .deploy-url { display: none; margin-top: 16px; padding: 10px; background: #1a1a19; border-radius: 8px; font-family: var(--mono); font-size: 10px; color: var(--green); word-break: break-all; } .deploy-card.live .deploy-url { display: block; } .deploy-url:hover { text-decoration: underline; text-underline-offset: 3px; } .deploy-open { display: none; margin-top: 12px; padding: 11px 14px; background: var(--orange); color: white; border-radius: 10px; font-size: 12px; font-weight: 700; transition: transform .2s, background .2s; } .deploy-card.live .deploy-open { display: inline-block; width: 100%; text-align: center; } .deploy-open:hover { transform: translateY(-2px); background: #e84420; } .logs { margin-top: 18px; min-height: 130px; font-family: var(--mono); font-size: 10px; line-height: 1.9; color: #777; overflow: hidden; } .log-success { color: var(--green); } .log-error { color: #ff7a5c; } .publish-button { margin-top: auto; width: 100%; border: 0; border-radius: 13px; padding: 16px; background: var(--orange); color: white; font-weight: 750; font-size: 13px; cursor: pointer; transition: transform .2s, background .2s; } .publish-button:hover { transform: translateY(-3px); background: #e84420; } .publish-button:disabled { cursor: wait; opacity: .8; } /* ========================================================= TIERS — the platform's two products, side by side. Free tier on paper; managed tier inverted to ink so the serious product reads as the heavyweight. ========================================================= */ .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; } .tier { position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 255, 255, .55); } .tier--managed { background: #171715; border-color: #171715; color: #f4f2ec; } .tier-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .tier-name { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .tier--managed .tier-name { color: #9b9890; } .tier-badge { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--muted); } .tier-badge--live { color: var(--green); border-color: rgba(32, 165, 107, .4); } .tier--managed .tier-badge { border-color: rgba(244, 242, 236, .22); color: #b5b2aa; } .tier-title { margin: 26px 0 0; font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; letter-spacing: -.05em; line-height: 1.02; } .tier-title em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; color: var(--orange); } .tier-desc { max-width: 48ch; margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; } .tier--managed .tier-desc { color: #b5b2aa; } .tier-list { margin: 26px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .tier-list li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.6; color: var(--text); } .tier--managed .tier-list li { color: #d8d5cd; } .tier-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 2px; background: var(--orange); } .tier-list code { font-family: var(--mono); font-size: 11.5px; padding: .1em .35em; border-radius: 5px; background: rgba(23, 23, 21, .06); } .tier--managed .tier-list code { background: rgba(244, 242, 236, .12); color: #f4f2ec; } .tier-foot { margin-top: auto; padding-top: 20px; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--muted); } .tier--managed .tier-foot { border-top-color: rgba(244, 242, 236, .16); color: #9b9890; } /* waitlist CTA on the managed tier card */ .tier-cta { margin-top: auto; width: 100%; margin-bottom: 14px; } .tier-cta + .tier-foot { margin-top: 0; } /* ========================================================= FAQ — native details/summary, no JS ========================================================= */ .faq { max-width: 860px; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item:first-child { border-top: 1px solid var(--line); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); transition: color .15s ease; } .faq-q::-webkit-details-marker { display: none; } .faq-q:hover { color: var(--orange); } .faq-q::after { content: "+"; flex-shrink: 0; font-family: var(--mono); font-weight: 400; font-size: 19px; color: var(--orange); transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .faq-item[open] .faq-q::after { transform: rotate(45deg); } .faq-a { padding: 0 26px 22px 2px; } .faq-a p { margin: 0; max-width: 68ch; color: var(--muted); font-size: 14px; line-height: 1.65; } /* ========================================================= LANDING RESPONSIVE — infrastructure edition blocks ========================================================= */ @media (max-width: 600px) { .tier { padding: 24px 18px; } .runtime-card { padding: 20px 16px; } .spec-group { padding: 4px 16px 10px; } .spec-row { gap: 12px; } .faq-a { padding-right: 8px; } } /* ========================================================= PAPER FOOTER — clean, two-zone layout Brand (+ tagline) on the left, grouped nav columns on the right. Legal and product links are vertical lists, not an inline dot-separated sentence, so the footer scans instead of shouting. Legacy .footer-left is kept for already-deployed pages (they expire within 7 days) — visually identical to .footer__brand. ========================================================= */ .footer { width: min(1220px, calc(100% - 40px)); margin: auto; padding: 40px 0 44px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; line-height: 1.6; color: var(--muted); } .footer a { color: var(--muted); text-decoration: none; text-underline-offset: 3px; transition: color .15s ease; } .footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23,23,21,.22); } .footer-heart { color: var(--orange); } /* legacy alias — deployed pages still reference this until expiry */ .footer-left, .footer__brand { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .footer-made { font-size: 10px; } .footer__title { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); } .footer__tagline { margin-top: 2px; font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 28ch; } /* Running Host An App release tag (vX.Y.Z), stamped into the landing footer at image build time. Doubles as a quick visual cache-freshness check: the tag shown must match the latest entry on /changelog. */ .footer__version { margin-top: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0; } .footer__version a { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(23,23,21,.18); text-underline-offset: 3px; font-variant-numeric: tabular-nums; } .footer__version a:hover { color: var(--ink); } .footer__publisher { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); } .footer__publisher a { text-decoration: underline; text-decoration-color: rgba(23,23,21,.18); } .footer__inner { display: flex; justify-content: space-between; gap: 48px; align-items: flex-start; } .footer__nav { display: flex; gap: 40px; flex-shrink: 0; } .footer__col { display: flex; flex-direction: column; gap: 0; min-width: 120px; } .footer__col-title { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; } .footer__links { display: flex; flex-direction: column; gap: 7px; } .footer__links a { font-size: 11px; color: var(--muted); } .footer__links a:hover { color: var(--ink); } /* legacy horizontal legal row — still supported, now unused */ .footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--mono); font-size: 10px; color: var(--muted); } .footer__legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .footer__legal a:hover { color: var(--ink); } .footer__legal-dot { opacity: .35; } @media (max-width: 760px) { .footer__inner { flex-direction: column; gap: 28px; } .footer__nav { width: 100%; gap: 28px; } .footer__col { min-width: 0; flex: 1; } } @media (max-width: 600px) { .footer { width: calc(100% - 28px); padding-top: 32px; } } /* ========================================================= DEPLOYED DOCUMENTS ON PAPER (Markdown + Mermaid) Server-rendered deployments share the paper theme. Code panels stay dark (like the docs-page code blocks), tables and quotes go light, headings pick up paper typography. ========================================================= */ /* dark panels keep their own dark tokens regardless of theme */ body.paper .md-content pre, body.paper .md-content .mermaid-tabs, body.paper .mermaid-content .mermaid-tabs, body.paper .mermaid-panel[data-panel="raw"], body.paper .mermaid-raw, body.paper .source-block { color: #deddd8; --text: #deddd8; --text-muted: #9b9890; --text-muted-2: #777; --border: #30302e; --border-active: #41413f; --bg-surface: #232321; --bg-deep: #181817; } /* headings — paper typography (Inter, tight tracking) */ body.paper .doc-header h1 { font-size: clamp(2.125rem, 5vw, 2.875rem); letter-spacing: -.055em; } body.paper .md-content h1 { font-size: clamp(1.9rem, 4.5vw, 2.5rem); letter-spacing: -.045em; } body.paper .md-content h2 { font-size: 1.45rem; letter-spacing: -.035em; } body.paper .md-content h3 { letter-spacing: -.025em; } body.paper .mermaid-content h1 { font-size: clamp(1.9rem, 4.5vw, 2.5rem); letter-spacing: -.045em; } /* quotes — orange rule on translucent paper */ body.paper .md-content blockquote { background: rgba(255, 255, 255, .5); border-left-color: var(--orange); } /* code blocks — dark panels with paper-card radius */ body.paper .md-content pre { border-radius: 12px; } /* anchor targets clear the sticky header */ body.paper .md-content :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 96px; } /* tables — light cards like the docs param tables */ body.paper .md-content .table-wrapper { background: rgba(255, 255, 255, .55); border-radius: 12px; } body.paper .md-content th { background: rgba(255, 255, 255, .65); } /* mermaid blocks — paper cards around the white canvas */ body.paper .md-content .mermaid-block, body.paper .mermaid-content .mermaid-block { border-radius: 14px; } /* ========================================================= PAPER ERROR PAGE (404) + PASSWORD GATE (login) Paper-theme twins of the marketing pages: same header, footer, buttons and type. The base body rule already stretches the page (flex column, min-height 100vh), so the footer sits at the bottom even on short pages. ========================================================= */ /* anchors borrowing the button look (404 actions) */ a.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* --- 404 -------------------------------------------------- */ .error-hero { flex: 1; width: min(1220px, calc(100% - 40px)); margin: auto; padding: 100px 0 130px; } .error-hero h1 { margin: 28px 0 0; font-size: clamp(54px, 8vw, 108px); font-weight: 700; line-height: .9; letter-spacing: -.085em; animation: enter .9s .08s both; } .error-hero h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.04em; } .error-hero h1 .orange { color: var(--orange); } .error-hero h1 .error-hero__quiet { color: #9b9890; } .error-hero__text { max-width: 560px; margin: 30px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; animation: enter .9s .16s both; } /* --- payments return page ---------------------------------- */ /* Platform-owned confirmation after hosted Stripe checkout: an animated green checkmark draw, a scaling ring, a spark cascade, and content that staggers up. Pure SVG/CSS motion — no script, so it is CSP-safe and works with JS disabled. Namespace: pay-return (BEM). */ .pay-return { flex: 1; width: min(1220px, calc(100% - 40px)); margin: auto; padding: 72px 0 110px; display: grid; place-items: center; } .pay-return__card { position: relative; width: min(560px, 100%); text-align: center; padding: 56px 44px 52px; background: var(--paper-bright); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 30px 70px rgba(23, 23, 21, .09); } .pay-return__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .6); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); animation: payrise .7s cubic-bezier(.2, 0, 0, 1) .35s both; } .pay-return__title { margin: 22px 0 0; font-size: clamp(28px, 4vw, 38px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--text-bright); animation: payrise .7s cubic-bezier(.2, 0, 0, 1) .42s both; } .pay-return__text { max-width: 420px; margin: 18px auto 0; color: var(--muted); font-size: 16.5px; line-height: 1.6; animation: payrise .7s cubic-bezier(.2, 0, 0, 1) .5s both; } .pay-return__actions { margin-top: 32px; display: flex; justify-content: center; animation: payrise .7s cubic-bezier(.2, 0, 0, 1) .58s both; } .pay-return__actions .button-primary { background: var(--green); color: white; box-shadow: 0 12px 30px rgba(32, 165, 107, .32); } .pay-return__actions .button-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 38px rgba(32, 165, 107, .4); } /* The badge: ring scales in, checkmark draws, burst sparkles pop. */ .pay-return__badge { position: relative; width: 118px; height: 118px; margin: 0 auto 6px; } .pay-return__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .pay-return__ringcircle { fill: none; stroke: var(--green); stroke-width: 7; stroke-linecap: round; stroke-dasharray: calc(2 * 3.1416 * 54); stroke-dashoffset: calc(2 * 3.1416 * 54); animation: payring .7s cubic-bezier(.2, 0, 0, 1) .05s forwards; } .pay-return__check { position: absolute; inset: 0; width: 100%; height: 100%; } .pay-return__checkpath { fill: none; stroke: var(--green); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: paydraw .45s cubic-bezier(.4, 0, .2, 1) .5s forwards; } /* spark burst around the checkmark */ .pay-return__burst { position: absolute; inset: -18px; pointer-events: none; } .pay-return__burst i { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--green); opacity: 0; animation: payburst .6s ease-out .55s forwards; } .pay-return__burst i:nth-child(1) { transform: rotate(0deg) translateX(0); } .pay-return__burst i:nth-child(2) { transform: rotate(60deg) translateX(0); } .pay-return__burst i:nth-child(3) { transform: rotate(120deg) translateX(0); } .pay-return__burst i:nth-child(4) { transform: rotate(180deg) translateX(0); } .pay-return__burst i:nth-child(5) { transform: rotate(240deg) translateX(0); } .pay-return__burst i:nth-child(6) { transform: rotate(300deg) translateX(0); } /* floating confetti behind the card (ambient layer) */ .pay-return__confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .pay-return__confetti i { position: absolute; top: -8vh; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: payfall linear infinite; } .pay-return__confetti i:nth-child(1) { left: 6%; background: var(--green); animation-duration: 8.5s; animation-delay: 0s; } .pay-return__confetti i:nth-child(2) { left: 16%; background: var(--orange); animation-duration: 10s; animation-delay: 1.2s; } .pay-return__confetti i:nth-child(3) { left: 27%; background: var(--blue); animation-duration: 9s; animation-delay: .6s; } .pay-return__confetti i:nth-child(4) { left: 36%; background: var(--green); animation-duration: 11s; animation-delay: 2s; } .pay-return__confetti i:nth-child(5) { left: 47%; background: var(--orange); animation-duration: 8s; animation-delay: .3s; } .pay-return__confetti i:nth-child(6) { left: 55%; background: var(--blue); animation-duration: 10.5s; animation-delay: 1.6s; } .pay-return__confetti i:nth-child(7) { left: 64%; background: var(--green); animation-duration: 9.2s; animation-delay: .9s; } .pay-return__confetti i:nth-child(8) { left: 73%; background: var(--orange); animation-duration: 8.7s; animation-delay: 2.4s; } .pay-return__confetti i:nth-child(9) { left: 84%; background: var(--blue); animation-duration: 10.2s; animation-delay: 1s; } .pay-return__confetti i:nth-child(10) { left: 93%; background: var(--green); animation-duration: 9.6s; animation-delay: 1.9s; } /* canceled variant: muted pulse, no checkmark */ .pay-return--canceled .pay-return__badge { display: none; } .pay-return--canceled .pay-return__pulse { width: 118px; height: 118px; margin: 0 auto 6px; border-radius: 50%; background: rgba(32, 165, 107, .14); animation: paypulse 2.4s ease-out infinite; } .pay-return__pulse--muted { background: rgba(255, 81, 43, .1) !important; } /* keyframes */ @keyframes payring { to { stroke-dashoffset: 0; } } @keyframes paydraw { to { stroke-dashoffset: 0; } } @keyframes payburst { 0% { opacity: 0; transform: rotate(0deg) translateX(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(180deg) translateX(56px) scale(1); } } @keyframes payrise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes payfall { 0% { transform: translateY(-8vh) rotate(0deg); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(110vh) rotate(540deg); opacity: 0; } } @keyframes paypulse { 0% { transform: scale(.6); opacity: .7; } 70% { transform: scale(1.15); opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pay-return * { animation: none !important; } .pay-return .pay-return__checkpath { stroke-dashoffset: 0; } .pay-return .pay-return__ringcircle { stroke-dashoffset: 0; } .pay-return__confetti { display: none; } } /* --- password gate ---------------------------------------- */ .gate { flex: 1; width: min(1220px, calc(100% - 40px)); margin: auto; padding: 70px 0; display: flex; align-items: center; justify-content: center; } .gate-card { width: min(400px, 100%); padding: 34px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 55px rgba(0, 0, 0, .06); animation: enter .8s both; } .gate-card__mark { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: 13px; transform: rotate(-5deg); font-size: 17px; } .gate-card__kicker { margin-top: 24px; } .gate-card__title { margin: 8px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -.05em; line-height: 1.05; } .gate-card__hint { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .gate-form { margin-top: 26px; display: flex; flex-direction: column; gap: 9px; } .gate-form__label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .gate-form__input { width: 100%; padding: 14px 16px; background: var(--paper-bright); border: 1px solid var(--line); border-radius: 13px; color: var(--ink); font-size: 15px; transition: border-color .2s ease; } .gate-form__input:focus { outline: none; border-color: var(--ink); } .gate-form__error { margin: 0; color: var(--error); font-size: 13px; } .gate-form__submit { margin-top: 8px; } /* --- provider picker (sign-in method chooser) ------------- */ /* Shared by the frontend login picker and the MCP authorize picker (both pages link this stylesheet); buttons are rendered by internal/auth/provider/picker.go. */ .provider-list { margin-top: 26px; } .provider { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 14px 16px; border-radius: 13px; font-size: 14px; font-weight: 650; letter-spacing: -.01em; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .provider:hover { transform: translateY(-2px); } .provider:active { transform: translateY(0); } .provider__logo { width: 20px; height: 20px; flex-shrink: 0; } .provider__label { flex: 1; text-align: center; } .provider--google { background: #fff; border: 1px solid var(--line); color: var(--ink); } .provider--google:hover { border-color: var(--ink); } .provider--github { background: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .13); } .provider--github .provider__logo { width: 22px; height: 22px; } .provider--github:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, .2); } .provider--plain { background: var(--paper-bright); border: 1px solid var(--line); color: var(--ink); } .provider--plain:hover { border-color: var(--ink); } @media (prefers-reduced-motion: reduce) { .provider { transition: none; } .provider:hover { transform: none; } } /* ========================================================= REVEALS ========================================================= */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ========================================================= PAPER RESPONSIVE ========================================================= */ @media (max-width: 900px) { .machine-grid { grid-template-columns: 1fr; } .integration-grid { grid-template-columns: 1fr; } .editor { border-right: 0; border-bottom: 1px solid #30302e; } /* five type tabs now — let the switcher wrap on narrow screens */ .editor-types { gap: 12px; flex-wrap: wrap; } } @media (max-width: 600px) { /* The sticky header must stay full-bleed (width: 100% + its own padding-inline) so the bar spans the whole mobile viewport; only non-sticky headers shrink to the column width. */ .header:not(.header--sticky) { width: calc(100% - 28px); } .header-right { gap: 14px; } .system-status { display: none; } .hero, .section, .footer, .error-hero, .gate { width: calc(100% - 28px); } .error-hero h1 { font-size: 46px; } .gate { padding: 40px 0; } /* ---- hero ---- */ .hero { padding: 56px 0 48px; } /* scale with the viewport instead of a fixed 64px that overflows narrow phones (320-430px) */ .hero-title { font-size: clamp(40px, 12.5vw, 64px); letter-spacing: -.065em; } .hero-subtitle { margin-top: 26px; font-size: 16px; } /* stack CTAs full-width — they do not fit side by side on phones */ .hero-actions { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 10px; } .hero-actions .button { width: 100%; display: inline-flex; align-items: center; justify-content: center; } .hero-meta { gap: 6px 10px; font-size: 10px; } /* live ledger — 3 equal columns; labels wrap instead of overflowing */ .hero-ledger { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ledger-sep { display: none; } .ledger-num { font-size: clamp(15px, 4.5vw, 19px); } .ledger-label { font-size: 8px; line-height: 1.45; } /* ---- sections ---- */ .section { margin-bottom: 90px; } .section-head { margin-bottom: 30px; } /* ---- integrations ---- */ .integration-card { min-height: 0; padding: 18px 20px; border-radius: 16px; } .integration-icon { width: 34px; height: 34px; border-radius: 9px; } .integration-icon img, .integration-icon svg { width: 22px; height: 22px; } .integration-card h3 { margin-top: 18px; font-size: 16px; } .integration-card p { font-size: 12.5px; } .config-panel { padding: 20px 18px 60px; border-radius: 16px; } /* ---- publishing machine ---- */ .machine { border-radius: 18px; } /* brand + state wrap instead of squishing on very narrow screens */ .machine-header { height: auto; min-height: 70px; padding: 14px 18px; flex-wrap: wrap; row-gap: 8px; } .editor-top { padding: 10px 14px; } .editor-types { gap: 10px; } .type-btn { padding: 8px 2px 10px; font-size: 12px; } .editor textarea { height: 400px; padding: 18px; font-size: 12px; } .deploy-side { padding: 18px; } .deploy-card { padding: 20px; } } /* ========================================================= DEPLOYED PAGE — share bar + expiry (paper) Shown on every deployment via layout.html (.deploy-meta) or injected into raw HTML. Uses paper tokens, no dark override needed. ========================================================= */ .deploy-meta { width: min(720px, calc(100% - 32px)); margin: 18px auto 0; padding: 14px 0 18px; border-top: 1px solid var(--line); } .deploy-meta__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; background: rgba(255, 255, 255, .62); border: 1px solid var(--line); border-radius: 13px; font-family: var(--mono); font-size: 11px; color: var(--muted); } .deploy-meta__expiry { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .deploy-meta__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(32, 165, 107, .45); animation: statusPulse 2.5s infinite; } .deploy-meta__countdown { color: var(--ink); font-weight: 600; } .deploy-meta__share { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .deploy-meta__url { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } @media (max-width: 600px) { .deploy-meta__url { max-width: 160px; } } .deploy-meta__copy { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper-bright); color: var(--ink); font-family: var(--sans); font-size: 11px; font-weight: 650; letter-spacing: .02em; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .deploy-meta__copy:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-1px); } .deploy-meta__copy:active { transform: scale(.97); } .deploy-meta__copy.is-copied { background: var(--green); border-color: var(--green); color: white; } /* Share button + popover (next to Copy link) */ .deploy-share-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .deploy-share__popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 210px; padding: 8px; background: var(--paper-bright); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 24, 32, .16); font-family: var(--sans); font-size: 13px; color: var(--ink); } .deploy-share__label { display: block; padding: 4px 10px 8px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .deploy-share__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 550; text-align: left; text-decoration: none; cursor: pointer; transition: background .16s ease; } .deploy-share__item svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; } .deploy-share__item:hover { background: var(--paper); } .deploy-share__item:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } /* playground copy button next to URL */ .deploy-url-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .deploy-url-row .deploy-url { margin-top: 0; flex: 1; min-width: 0; } .deploy-url-copy { flex-shrink: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #3a3a38; background: #1e1e1c; color: #deddd8; font-family: var(--mono); font-size: 10px; font-weight: 600; cursor: pointer; transition: background .15s, transform .15s; } .deploy-url-copy:hover { background: #2a2a28; } .deploy-url-copy:active { transform: scale(.97); } .deploy-url-copy.is-copied { background: var(--green); border-color: var(--green); color: white; } .deploy-expiry { margin-top: 10px; font-family: var(--mono); font-size: 10px; color: #9a9893; display: none; } .deploy-card.live .deploy-expiry { display: block; } /* ========================================================= LEGAL PAGES — Terms, Privacy, Acceptable Use, Report Paper-theme centered article, shares typography with docs but no sidebar. Uses paper tokens so it inverts gracefully. ========================================================= */ .legal { flex: 1; width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 80px; } .legal__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .legal__eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; } .legal h1 { margin: 0; font-size: clamp(32px, 5vw, 46px); font-weight: 750; line-height: .95; letter-spacing: -.06em; color: var(--ink); } .legal h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; } .legal__meta { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .legal__lead { margin: 18px 0 0; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 44rem; } .legal__notice { margin-top: 18px; padding: 12px 14px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 12px; font-size: 12.5px; line-height: 1.6; color: var(--muted); } .legal__notice strong { color: var(--ink); } .legal__toc { margin: 28px 0 0; padding: 16px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 14px; } .legal__toc-title { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .legal__toc ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; } .legal__toc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(23,23,21,.18); } .legal__toc a:hover { text-decoration-color: var(--orange); color: var(--orange); } .legal__toc li::marker { color: var(--muted); font-family: var(--mono); font-size: 11px; } .legal__body { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 32px; } .legal__body h2 { margin: 36px 0 12px; font-size: 20px; font-weight: 750; letter-spacing: -.04em; color: var(--ink); scroll-margin-top: 96px; } .legal__body h2:first-child { margin-top: 0; } .legal__body h3 { margin: 22px 0 8px; font-size: 14px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); } .legal__body p { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: #3a3936; } .legal__body p strong { color: var(--ink); } .legal__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(23,23,21,.22); } .legal__body a:hover { color: var(--orange); text-decoration-color: var(--orange); } .legal__body ul, .legal__body ol { margin: 0 0 16px 1.25rem; font-size: 14px; line-height: 1.7; color: #3a3936; } .legal__body li { margin-bottom: 6px; } .legal__body li::marker { color: var(--muted); } .legal__body hr { border: 0; height: 1px; background: var(--line); margin: 28px 0; } /* subtle callout used for warnings (e.g. "do not deploy secrets") */ .legal__callout { margin: 16px 0; padding: 14px 16px; background: var(--orange-soft); border: 1px solid rgba(255,81,43,.18); border-radius: 12px; font-size: 13px; line-height: 1.6; color: #3a3936; } .legal__callout strong { color: var(--ink); } /* contact card */ .legal__contact { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: 12px; font-family: var(--mono); font-size: 12px; color: var(--ink); } .legal__contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* interactive report form on the /report page */ .report-form { margin: 24px 0 36px; padding: 22px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); border-radius: 16px; } .report-form__title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 16px; letter-spacing: -.01em; } .report-form__fields { display: flex; flex-direction: column; gap: 10px; } .report-form__label { font-size: 12px; font-weight: 600; color: #3a3936; margin-top: 6px; } .report-form__label:first-of-type { margin-top: 0; } .report-form__optional { font-weight: 400; color: var(--muted); } .report-form__input { width: 100%; padding: 11px 13px; font-size: 13px; font-family: inherit; color: var(--ink); background: rgba(255, 255, 255, .75); border: 1px solid var(--line); border-radius: 10px; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; } .report-form__input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 79, 25, .14); } .report-form__textarea { resize: vertical; min-height: 96px; line-height: 1.5; } .report-form__hint { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 4px 0 2px; } .report-form__hint a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; } .report-form__submit { align-self: flex-start; margin-top: 8px; padding: 12px 20px; } .report-form__submit:disabled { opacity: .6; cursor: default; transform: none; } .report-form__result { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; } .report-form__result.is-ok { background: rgba(46, 160, 67, .12); border: 1px solid rgba(46, 160, 67, .3); color: #1d7a33; } .report-form__result.is-error { background: rgba(255, 81, 43, .1); border: 1px solid rgba(255, 81, 43, .28); color: #b03a1f; } /* footer legal nav — inline, wraps gracefully */ .footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--mono); font-size: 10px; color: var(--muted); } .footer__legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .footer__legal a:hover { color: var(--ink); } .footer__legal-dot { opacity: .35; } @media (max-width: 600px) { .legal { width: calc(100% - 28px); padding-top: 32px; } .legal__toc { padding: 14px; } } @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; } .reveal { opacity: 1; transform: none; } } /* ========================================================================== DATA VIEWERS (JSON + CSV deployments) Server-rendered interactive explorers on the paper theme. Tree/table go on light paper cards; raw JSON stays on a dark code panel like Markdown code blocks. All classes are BEM under .jsonv-* / .csvv-*. ========================================================================== */ /* ----- shared viewer primitives ----- */ .jsonv-title, .csvv-title { font-size: clamp(1.9rem, 4.5vw, 2.5rem); letter-spacing: -.045em; margin: 0 0 1.25rem; } .jsonv { width: min(880px, 100%); margin-inline: auto; } /* CSV tables benefit from extra horizontal room for more columns/data. */ .csvv { width: min(1400px, calc(100% - 2rem)); margin-inline: auto; } .jsonv-toolbar, .csvv-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .jsonv-search, .csvv-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; } .jsonv-search input[type="search"], .csvv-search input[type="search"], .csvv-filter-input, .csvv-range-input { font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--paper-bright); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; outline: none; transition: border-color .15s ease; min-width: 0; } .jsonv-search input[type="search"] { flex: 1 1 160px; } .csvv-filter-input { width: 100%; } .jsonv-search input:focus-visible, .csvv-search input:focus-visible, .csvv-filter-input:focus-visible, .csvv-range-input:focus-visible { border-color: var(--orange); } .jsonv-search-count, .csvv-count { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; } .jsonv-actions, .csvv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .jsonv-btn, .csvv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--paper-bright); color: var(--ink); font-family: var(--sans); font-size: 11px; font-weight: 650; letter-spacing: .02em; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .jsonv-btn:hover:not(:disabled), .csvv-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-1px); } .jsonv-btn:active:not(:disabled), .csvv-btn:active:not(:disabled) { transform: scale(.97); } .jsonv-btn:disabled, .csvv-btn:disabled { opacity: .45; cursor: not-allowed; } .jsonv-btn--primary, .csvv-btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .jsonv-btn--primary:hover, .csvv-btn--primary:hover { background: var(--orange); border-color: var(--orange); color: #fff; } .jsonv-btn.active, .csvv-btn.active { background: var(--orange-soft); border-color: var(--orange); color: var(--orange); } .jsonv-depth, .csvv-perpage { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); } .jsonv-depth select, .csvv-perpage select { font-family: var(--mono); font-size: 11px; color: var(--ink); background: var(--paper-bright); border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; cursor: pointer; } /* ----- JSON viewer: tree ----- */ .jsonv-panels { position: relative; } .jsonv-tree { background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.25rem; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink); overflow-x: auto; } .jsonv-node { position: relative; } .jsonv-children { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line); } .jsonv-line { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; } .jsonv-toggle { flex: 0 0 auto; width: 16px; height: 16px; margin-right: 4px; padding: 0; border: none; background: none; color: var(--muted); font-size: 10px; line-height: 16px; text-align: center; cursor: pointer; border-radius: 4px; transition: color .15s ease, background .15s ease; } .jsonv-toggle:hover { color: var(--ink); background: var(--orange-soft); } .jsonv-toggle--leaf { cursor: default; } .jsonv-toggle--leaf:hover { color: var(--muted); background: none; } .jsonv-key { color: var(--ink); font-weight: 500; cursor: copy; border-radius: 4px; transition: background .15s ease; } .jsonv-key:hover { background: var(--orange-soft); } .jsonv-colon { color: var(--muted); } .jsonv-value { cursor: copy; border-radius: 4px; transition: background .15s ease; } .jsonv-value:hover { background: var(--orange-soft); } .jsonv-value--string { color: #187a4f; } .jsonv-value--number { color: var(--blue); } .jsonv-value--boolean { color: #8250df; } .jsonv-value--null { color: var(--muted); font-style: italic; } .jsonv-bracket { color: var(--muted); } .jsonv-preview { color: var(--muted); font-size: 11px; margin: 0 4px; } .jsonv-badge { margin-left: 8px; font-size: 9px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: rgba(23, 23, 21, .06); border-radius: 99px; padding: 1px 7px; } .jsonv-row--match { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; background: var(--orange-soft); } /* ----- JSON viewer: raw tab ----- */ .jsonv-rawwrap { display: flex; flex-direction: column; gap: 0.75rem; } .jsonv-rawbar { display: flex; gap: 8px; } .jsonv-raw { margin: 0; background: #181817; border: 1px solid #30302e; border-radius: 14px; padding: 1.125rem 1.375rem; overflow-x: auto; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.7; color: #deddd8; } .jsonv-stats { margin-top: 0.75rem; font-family: var(--mono); font-size: 11px; color: var(--muted); } .jsonv-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; } .jsonv-tab { padding: 7px 12px; border: none; background: var(--paper-bright); color: var(--muted); font-family: var(--sans); font-size: 11px; font-weight: 650; cursor: pointer; transition: background .15s ease, color .15s ease; } .jsonv-tab + .jsonv-tab { border-left: 1px solid var(--line); } .jsonv-tab.active { background: var(--ink); color: var(--paper); } /* ----- CSV viewer: table ----- */ .csvv-tablewrap { background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 14px; overflow: auto; max-height: 70vh; } .csvv-table { width: 100%; border-collapse: collapse; font-size: 13px; } .csvv-table th, .csvv-table td { padding: 8px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; } .csvv-headrow th { position: sticky; top: 0; z-index: 2; background: rgba(255, 255, 255, .92); backdrop-filter: blur(4px); border-bottom: 1px solid var(--border-active, rgba(23, 23, 21, .38)); } .csvv-sortbtn { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; padding: 0; font-family: var(--sans); font-size: 12px; font-weight: 650; letter-spacing: .01em; color: var(--ink); cursor: pointer; } .csvv-sortarrow { color: var(--orange); min-width: 12px; } .csvv-type { font-family: var(--mono); font-size: 9px; font-weight: 500; color: var(--muted); background: rgba(23, 23, 21, .06); border-radius: 99px; padding: 1px 6px; } .csvv-type--badge { margin-left: 4px; text-transform: uppercase; letter-spacing: .05em; } th.csvv-th--number .csvv-sortbtn, td.csvv-cell--number { text-align: right; } td.csvv-cell--number { font-family: var(--mono); font-size: 12px; } .csvv-filterrow td { position: sticky; top: 41px; z-index: 1; background: rgba(251, 250, 247, .95); padding: 6px 8px; } .csvv-range { display: inline-flex; gap: 4px; } .csvv-range-input { width: 72px; } .csvv-row:nth-child(even) { background: rgba(255, 255, 255, .35); } .csvv-row:hover { background: var(--orange-soft); } .csvv-empty { color: var(--muted); font-style: italic; text-align: center; } .csvv-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 0.75rem; } .csvv-pager-label { font-family: var(--mono); font-size: 11px; color: var(--muted); } /* ----- CSV viewer: summary + charts ----- */ .csvv-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 1rem; } .csvv-statcard { background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; } .csvv-statcard-name { font-family: var(--sans); font-size: 12px; font-weight: 650; color: var(--ink); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .csvv-statline { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; line-height: 1.7; } .csvv-statkey { color: var(--muted); } .csvv-statval { color: var(--ink); } .csvv-chart { background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 1rem; } .csvv-chart-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); } .csvv-chart-controls select { font-family: var(--mono); font-size: 11px; color: var(--ink); background: var(--paper-bright); border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; cursor: pointer; } .csvv-chart-stage { overflow-x: auto; } .csvv-svg { width: 100%; height: auto; min-width: 480px; } .csvv-grid { stroke: var(--line); stroke-width: 1; } .csvv-axis { stroke: rgba(23, 23, 21, .38); stroke-width: 1; } .csvv-tick { fill: var(--muted); font-family: var(--mono); font-size: 10px; } .csvv-line { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; } .csvv-point { fill: var(--orange); stroke: #fff; stroke-width: 1.5; transition: r .15s ease; } .csvv-point:hover { fill: var(--ink); } .csvv-bar { fill: var(--orange); opacity: .85; transition: opacity .15s ease; } .csvv-bar:hover { opacity: 1; } .csvv-chart-empty { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: center; padding: 24px 0; } /* ----- shared toast ----- */ .jsonv-toast, .csvv-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px; padding: 8px 14px; border-radius: 99px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 1200; } .jsonv-toast.is-visible, .csvv-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ----- responsive ----- */ @media (max-width: 640px) { .jsonv, .csvv { width: 100%; } .jsonv-tree { padding: 0.75rem 0.85rem; font-size: 12px; } .jsonv-children { margin-left: 8px; padding-left: 8px; } .csvv-table th, .csvv-table td { padding: 6px 10px; } .csvv-filterrow td { top: 37px; } } /* ========================================================================== DOCS PAGE (hostan.app/docs) — animated paper theme Editorial, text-first docs with layered motion: scroll progress, ambient blobs, marquee, staggered reveals, counters, accordion and a live "publishing machine" terminal. All BEM under .doc-*. ========================================================================== */ /* Scroll progress bar */ .doc-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } /* Ambient background blobs */ .doc-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .doc-bg__blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; } .doc-bg__blob--a { width: 520px; height: 520px; top: -160px; right: -120px; background: radial-gradient(circle at 30% 30%, rgba(255, 81, 43, .28), transparent 70%); animation: docDrift 22s ease-in-out infinite alternate; } .doc-bg__blob--b { width: 420px; height: 420px; top: 30%; left: -160px; background: radial-gradient(circle at 30% 30%, rgba(23, 23, 21, .09), transparent 70%); animation: docDrift 28s ease-in-out infinite alternate-reverse; } .doc-bg__blob--c { width: 340px; height: 340px; bottom: 8%; right: 10%; background: radial-gradient(circle at 30% 30%, rgba(255, 81, 43, .12), transparent 70%); animation: docDrift 32s ease-in-out infinite alternate; } @keyframes docDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-30px, 40px, 0) scale(1.12); } } /* Hero */ .doc-hero { position: relative; padding-top: 1rem; } .doc-kicker { display: inline-block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 1rem; } .doc-title { margin-bottom: 1.25rem !important; } .doc-title__grad { background: linear-gradient(90deg, var(--orange), #d43d1f, var(--orange)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: docGradShift 9s ease-in-out infinite; } @keyframes docGradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Hero actions */ .doc-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 2rem; } .doc-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.25rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease; } .doc-cta__arrow { display: inline-block; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); } .doc-cta:hover { transform: translateY(-2px); } .doc-cta:hover .doc-cta__arrow { transform: translate(2px, -2px); } .doc-cta--primary { background: var(--ink); color: #fff; box-shadow: 0 12px 30px rgba(23, 23, 21, .18); } .doc-cta--primary:hover { box-shadow: 0 16px 38px rgba(255, 81, 43, .28); } .doc-cta--ghost { background: rgba(255, 255, 255, .6); border: 1px solid var(--line); color: var(--ink); } /* The publishing machine (terminal) */ .doc-terminal { max-width: 34rem; background: #1d1d1b; border-radius: 1rem; overflow: hidden; box-shadow: 0 24px 60px rgba(23, 23, 21, .22); font-family: var(--mono); margin: 1.5rem 0 0.5rem; transition: box-shadow .4s ease; } .doc-terminal.is-live { box-shadow: 0 24px 70px rgba(255, 81, 43, .28); } .doc-terminal__head { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); } .doc-terminal__dot { width: 10px; height: 10px; border-radius: 50%; background: #4a4a47; } .doc-terminal__dot:nth-child(1) { background: #ff512b; } .doc-terminal__dot:nth-child(2) { background: #4a4a46; } .doc-terminal__dot:nth-child(3) { background: #5c5c57; } .doc-terminal__label { margin-left: auto; font-size: 0.68rem; color: #9a9893; letter-spacing: 0.08em; text-transform: uppercase; } .doc-terminal__body { padding: 1rem 1.1rem; min-height: 4.5rem; display: flex; flex-direction: column; gap: 0.4rem; } .doc-terminal__row { display: block; font-size: 0.85rem; color: #deddd8; white-space: pre-wrap; word-break: break-word; } .doc-terminal__prompt { color: var(--orange); } .doc-terminal__row.is-typing .doc-terminal__text::after { content: "▌"; color: var(--orange); animation: docCursor .9s step-end infinite; } @keyframes docCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .doc-terminal__url { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem 1rem; font-size: 0.85rem; } .doc-terminal__check { color: var(--orange); font-weight: 700; animation: docCheckPop .5s cubic-bezier(.34, 1.56, .64, 1); } @keyframes docCheckPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .doc-terminal__url a { color: var(--orange); text-decoration: none; border-bottom: 1px dotted rgba(255, 81, 43, .5); word-break: break-all; } .doc-terminal__url a:hover { text-decoration: underline; } /* Content-type marquee */ .doc-marquee { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; margin: 2.5rem 0 3.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .doc-marquee__track { display: flex; align-items: center; gap: 2.5rem; width: max-content; animation: docMarquee 26s linear infinite; } .doc-marquee__item { font-family: var(--serif); font-size: 1.5rem; color: var(--muted); white-space: nowrap; } .doc-marquee__dot { color: var(--orange); font-size: 0.9rem; } @keyframes docMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Section lead */ .doc-section-lead { max-width: 40rem; color: var(--muted); } /* Publishing cards grid */ .doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .doc-cardx { background: var(--paper-bright); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease, border-color .35s ease, opacity .7s cubic-bezier(.2, .8, .2, 1); } .doc-cardx:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(23, 23, 21, .10); border-color: rgba(23, 23, 21, .22); } .doc-cardx__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--orange-soft); color: var(--ink); margin-bottom: 0.9rem; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), color .3s ease; } .doc-cardx__icon svg { width: 20px; height: 20px; } .doc-cardx:hover .doc-cardx__icon { transform: scale(1.12) rotate(-4deg); color: var(--orange); } .doc-cardx h4 { margin-bottom: 0.4rem; } .doc-cardx p { font-size: 0.8rem; margin: 0; } /* Steps */ .doc-steps { display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; position: relative; } .doc-steps::before { content: ""; position: absolute; left: 23px; top: 18px; bottom: 18px; width: 2px; background: var(--orange); opacity: .28; } .doc-step { position: relative; display: flex; gap: 1.1rem; padding: 0.4rem 0 1.4rem; } .doc-step__num { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--paper-bright); border: 1px solid var(--line); font-family: var(--serif); font-size: 1.3rem; color: var(--orange); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .3s ease, color .3s ease; } .doc-step:hover .doc-step__num { transform: scale(1.12); background: var(--ink); color: #fff; border-color: var(--ink); } .doc-step__body h4 { margin-bottom: 0.3rem; } .doc-step__body p { font-size: 0.85rem; margin: 0; } /* Callouts */ .doc-callout { display: flex; gap: 1rem; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; margin-top: 1.25rem; transition: border-color .3s ease, box-shadow .3s ease; } .doc-callout:hover { border-color: rgba(23, 23, 21, .2); box-shadow: 0 14px 34px rgba(23, 23, 21, .07); } .doc-callout--accent { border-left: 3px solid var(--orange); } .doc-callout__badge { flex-shrink: 0; align-self: flex-start; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange); background: var(--orange-soft); padding: 0.3rem 0.6rem; border-radius: 999px; } .doc-callout__body p { font-size: 0.875rem; } .doc-callout__foot { font-size: 0.8rem; } /* Counters */ .doc-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1.75rem 0 1.25rem; } .doc-counter { background: var(--paper-bright); border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem 1.25rem; text-align: center; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, opacity .7s cubic-bezier(.2, .8, .2, 1); } .doc-counter:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(23, 23, 21, .09); } .doc-counter__num { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .doc-counter__num:not([data-count="0"]):before { content: ""; display: block; width: 28px; height: 3px; margin: 0 auto 0.6rem; border-radius: 2px; background: var(--orange); } .doc-counter__label { margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted); } /* API reference split */ .doc-api { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem; align-items: center; margin-top: 1.25rem; } .doc-api__text { display: flex; flex-direction: column; gap: 1.25rem; } /* Grid tracks are minmax(auto, 1fr): without min-width 0 the no-wrap

 in the
   code column forces the grid (and the page, and the sticky header) wider than
   phone viewports. Let the pre scroll inside its card instead. */
.doc-api__text, .doc-api__code { min-width: 0; }
.doc-api__code .code-block pre { max-width: 100%; }
@media (max-width: 760px) { .doc-api { grid-template-columns: minmax(0, 1fr); } }

/* FAQ accordion */
.doc-faq {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.25rem;
}
.doc-faq__item {
    background: var(--paper-bright);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.doc-faq__item:hover { border-color: rgba(23, 23, 21, .22); }
.doc-faq__item.is-open { border-color: rgba(255, 81, 43, .4); box-shadow: 0 12px 30px rgba(255, 81, 43, .08); }
.doc-faq__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
}
.doc-faq__icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--orange);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.doc-faq__item.is-open .doc-faq__icon { transform: rotate(45deg); }
.doc-faq__panel {
    padding: 0 1.1rem 1rem;
    font-size: 0.875rem;
    color: var(--muted);
}
.doc-faq__panel:not([hidden]) {
    animation: docPanelIn .3s cubic-bezier(.2, .8, .2, 1);
}
@keyframes docPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.doc-faq__panel p { margin: 0; }

/* Docs health dot: green when ok, red when down — the same semantics as the
   landing and API docs (no docs-specific orange override; orange reads as an
   error). Warm code-property accents for /docs stay here. */
.doc-api .hl-property { color: #ff6b3d; }

/* Small print + flush helpers (replace inline styles in the markup) */
.docs-content .doc-note {
    font-size: 0.8125rem;
    color: var(--muted);
    margin-top: 1rem;
}
.docs-content .doc-flush { margin-bottom: 0; }
.docs-content a.doc-link { color: var(--accent); }
.docs-content a.doc-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Stagger reveals within grids/steps/counters. Delays only apply while the
   element has not yet revealed (via :not(.visible)) so they do not linger and
   delay later hover transitions. */
.doc-cards .reveal:not(.visible):nth-child(1), .doc-steps .reveal:not(.visible):nth-child(1) { transition-delay: 0.05s; }
.doc-cards .reveal:not(.visible):nth-child(2), .doc-steps .reveal:not(.visible):nth-child(2) { transition-delay: 0.10s; }
.doc-cards .reveal:not(.visible):nth-child(3), .doc-steps .reveal:not(.visible):nth-child(3) { transition-delay: 0.15s; }
.doc-cards .reveal:not(.visible):nth-child(4), .doc-steps .reveal:not(.visible):nth-child(4) { transition-delay: 0.20s; }
.doc-cards .reveal:not(.visible):nth-child(5) { transition-delay: 0.25s; }
.doc-counters .reveal:not(.visible):nth-child(1) { transition-delay: 0.05s; }
.doc-counters .reveal:not(.visible):nth-child(2) { transition-delay: 0.10s; }
.doc-counters .reveal:not(.visible):nth-child(3) { transition-delay: 0.15s; }

/* Mobile refinements */
@media (max-width: 640px) {
    body.docs .docs-content__inner { padding: 2rem 1.1rem 4rem; }
    body.docs .header-right { gap: 10px; }
    body.docs #statusMeta { display: none; }
    .doc-hero__actions { flex-direction: column; align-items: stretch; }
    .doc-cta { justify-content: center; }
    .doc-marquee { margin: 2rem 0 2.5rem; padding: 0.85rem 0; }
    .doc-marquee__item { font-size: 1.15rem; }
    .doc-callout { flex-direction: column; gap: 0.75rem; }
    .doc-step { gap: 0.9rem; }
    .doc-step__num { width: 40px; height: 40px; font-size: 1.1rem; }
    .doc-steps::before { left: 19px; }
    .doc-counter { padding: 1.25rem 1rem; }
    .doc-cardx { padding: 1.1rem; }
    .doc-api { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .doc-marquee__track { animation: none; }
    .doc-title__grad, .doc-bg__blob { animation: none; }
    .doc-terminal__row.is-typing .doc-terminal__text::after { animation: none; }
    .doc-faq__panel:not([hidden]) { animation: none; }
    /* the doc-arch cascade/loops use delayed animations that would otherwise
       leave the diagram hidden until each delay elapses; render it statically */
    .doc-arch__owner, .doc-arch__spine, .doc-arch__scope,
    .doc-arch__project, .doc-arch__path, .doc-arch__path-step--op,
    .doc-arch__cn .doc-arch__cn-label {
        animation: none !important;
    }
    .doc-arch__spine-dot { animation: none; top: calc(50% - 4.5px); opacity: 1; }
    .doc-arch__cn-dot { animation: none; opacity: 1; left: 50%; top: 50%; margin-left: -4px; margin-top: -4px; }
}

/* ==========================================================================
   Admin operations dashboard (body.admin)
   --------------------------------------------------------------------------
   Operator-only surface served by the Go binary under /admin/. Reuses the
   paper theme tokens above; no second stylesheet, no framework.

   Layout is a real operations dashboard at every width:
     ≥1080px  sidebar navigation + top bar
     720–1079 top bar + tab strip
     <720px   compact top bar + fixed bottom tab bar (thumb zone)
   Scope, theme and data controls live in the chrome; every section renders
   as panels over the paper background. body.admin-dark flips the same
   tokens to the platform's dark palette — one source of truth per color.
   ========================================================================== */

body.admin {
  --adm-display: "Space Grotesk", var(--sans);
  --adm-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --adm-shadow-sheet: 0 -12px 48px rgba(23, 23, 21, .22);
  --adm-shadow-pop: 0 12px 40px rgba(23, 23, 21, .18);
  --adm-ease: cubic-bezier(.32, .72, 0, 1);
  --adm-green: #20a56b;
  --adm-blue: #3f61ff;
  --adm-teal: #0e7c86;
  --adm-amber: #d99000;
  --adm-violet: #7a4fd0;
  --adm-red: #d64550;
  --adm-hover: rgba(23, 23, 21, .045);
  --adm-bright: var(--paper-bright);
  --adm-sbw: 236px;

  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
}

/* ----- dark palette (same hue families, tuned for low-light triage) ----- */

body.admin.admin-dark {
  --paper: #0b0c0e;
  --paper-bright: #14161a;
  --ink: #f3f4f6;
  --muted: #9aa2af;
  --line: rgba(255, 255, 255, .11);
  --orange: #ff6b3d;
  --orange-soft: rgba(255, 79, 25, .17);
  --green: #2fe08d;
  --blue: #7d90ff;
  --warning: #f5a623;
  --error: #ff4d6f;
  --adm-green: #2fe08d;
  --adm-blue: #7d90ff;
  --adm-teal: #3ec3cd;
  --adm-amber: #ffb547;
  --adm-violet: #a98bef;
  --adm-red: #ff6b7a;
  --adm-hover: rgba(255, 255, 255, .05);
  --adm-shadow-sheet: 0 -12px 48px rgba(0, 0, 0, .6);
  --adm-shadow-pop: 0 12px 40px rgba(0, 0, 0, .55);

  background: var(--paper);
  color: var(--ink);
}

body.admin { -webkit-tap-highlight-color: transparent; }
body.admin :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
body.admin [hidden] { display: none !important; }

/* ==========================================================================
   Chrome: sidebar / top bar / tab strip / bottom nav
   ========================================================================== */

/* ----- sidebar (≥1080px) ----- */

.adm-sb {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 45;
  display: none;
  flex-direction: column;
  width: var(--adm-sbw, 236px);
  padding: 14px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--adm-bright);
  border-right: 1px solid var(--line);
}
.adm-sb__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 14px;
  font-family: var(--adm-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: inherit;
  text-decoration: none;
}
.adm-sb__nav { flex: 1; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; overflow-y: auto; }
.adm-sb__sec {
  padding: 14px 12px 5px;
  font-family: var(--adm-data);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.adm-sb__it {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 11px;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.adm-sb__it svg { width: 17px; height: 17px; flex: none; }
.adm-sb__it:hover { background: var(--adm-hover); color: var(--ink); }
.adm-sb__it.is-on { background: var(--ink); color: var(--paper-bright); font-weight: 600; }
.admin-dark .adm-sb__it.is-on { color: #0b0c0e; }
.adm-sb__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--error);
  color: #fff;
  font-family: var(--adm-data);
  font-size: 10px;
  font-weight: 700;
}
.adm-sb__it.is-on .adm-sb__badge { background: var(--orange); }
.adm-sb__foot { padding: 12px 10px 2px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.adm-sb__live { display: flex; align-items: center; gap: 8px; }
.adm-sb__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: adm-pulse 2s ease infinite; }
.adm-sb__dot.is-bad { background: var(--error); animation: none; }
.adm-sb__ver { margin-top: 5px; padding-left: 16px; font-family: var(--adm-data); font-size: 10px; }
@keyframes adm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* ----- top bar (every width) ----- */

.adm-tb {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.adm-tb__t {
  margin: 0;
  font-family: var(--adm-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.adm-tb__sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-tb__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.adm-tb__search { position: relative; display: none; }
.adm-tb__search svg {
  position: absolute;
  left: 9px; top: 50%;
  width: 13px; height: 13px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.adm-tb__search input {
  width: 150px;
  height: 34px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--adm-bright);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}
.adm-tb__search input:focus { outline: none; border-color: var(--ink); }

/* live pill: data age + pause/resume for the 15s poll */
.adm-live {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--adm-bright);
  font-family: var(--adm-data);
  font-size: 10.5px;
  color: var(--ink);
  cursor: pointer;
}
.adm-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: adm-pulse 2s ease infinite; }
.adm-live.is-paused { opacity: .75; }
.adm-live.is-paused .adm-live__dot { background: var(--muted); animation: none; }

.adm-iconbtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--adm-bright);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, transform .12s var(--adm-ease);
}
.adm-iconbtn svg { width: 15px; height: 15px; }
.adm-iconbtn:hover { border-color: var(--border-active); }
.adm-iconbtn:active { transform: scale(.94); }

/* ----- tab strip (720–1079px) ----- */

.adm-tb__tabs { display: none; gap: 4px; order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
.adm-tb__tabs::-webkit-scrollbar { display: none; }
.adm-tb__tabs .adm-tabstrip-btn {
  appearance: none;
  flex: none;
  padding: 8px 13px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}
.adm-tb__tabs .adm-tabstrip-btn.is-on { background: var(--ink); color: var(--paper-bright); }
.admin-dark .adm-tb__tabs .adm-tabstrip-btn.is-on { color: #0b0c0e; }
.adm-tb__tabs .adm-tabstrip-btn .adm-badge { margin-left: 6px; }

/* ----- hamburger + off-canvas drawer (<720px); replaces the old bottom nav,
   so mobile navigation is the same hierarchical sidebar as desktop ----- */

.adm-ham {
  display: none;
  appearance: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--adm-bright);
  color: var(--ink);
  cursor: pointer;
}
.adm-ham svg { width: 18px; height: 18px; }

.adm-drawerbd {
  position: fixed;
  inset: 0;
  z-index: 94;
  background: rgba(10, 10, 9, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

@media (max-width: 719.98px) {
  .adm-ham { display: inline-flex; }
  .adm-sb {
    display: flex;
    z-index: 96;
    width: min(300px, 86vw);
    transform: translateX(-105%);
    transition: transform .28s var(--adm-ease);
    box-shadow: var(--adm-shadow-sheet);
  }
  body.is-drawer .adm-sb { transform: none; }
  body.is-drawer .adm-drawerbd { opacity: 1; pointer-events: auto; }
  body.is-drawer { overflow: hidden; }
}

/* ==========================================================================
   IA remodel: primitive chain strip, breadcrumbs, tree rows, user identity
   ========================================================================== */

.adm-chain { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.adm-chain__it {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--adm-bright);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.adm-chain__it svg { width: 15px; height: 15px; color: var(--muted); }
.adm-chain__it:hover { border-color: var(--border-active); }
.adm-chain__it b {
  font-family: var(--adm-display);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.adm-chain__l { font-size: 11.5px; font-weight: 600; color: var(--muted); }
#res-tiers, #res-frontends, #res-artifacts { scroll-margin-top: 64px; }

.adm-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 12.5px;
}
.adm-crumbs__lnk {
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 4px;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  border-radius: 7px;
  cursor: pointer;
}
.adm-crumbs__lnk:hover { color: var(--ink); background: var(--adm-hover); }
.adm-crumbs__sep { display: inline-flex; width: 13px; height: 13px; color: var(--muted); opacity: .6; }
.adm-crumbs__here { font-weight: 650; color: var(--ink); padding: 2px 4px; }

.adm-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--adm-hover);
  color: var(--ink);
  font-family: var(--adm-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}
.adm-avatar--lg { width: 52px; height: 52px; font-size: 20px; }
.adm-userhead { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.adm-userhead .adm-heading { margin: 0; }

/* Expandable tree row: toggle unfolds the member list in place; the main
   button drills to the owning section. */
.adm-trow { display: flex; align-items: stretch; gap: 6px; }
.adm-trow__tog {
  appearance: none;
  flex: none;
  width: 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.adm-trow__tog svg { width: 14px; height: 14px; transition: transform .2s var(--adm-ease); }
.adm-trow__tog.is-open svg { transform: rotate(90deg); }
.adm-trow__tog:hover { color: var(--ink); border-color: var(--border-active); }
.adm-trow__main {
  appearance: none;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--adm-bright);
  padding: 12px 14px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.adm-trow__main:hover { border-color: var(--border-active); }
.adm-tree { margin-bottom: 8px; }
.adm-tree__kids { margin: 6px 0 0 40px; display: flex; flex-direction: column; gap: 6px; }

/* ==========================================================================
   Scope switcher (namespace > project > deployment ownership lens)
   ========================================================================== */

.adm-scoper { position: relative; padding: 0 4px 10px; }
.adm-scoper__btn {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease;
}
.adm-scoper__btn:hover { border-color: var(--border-active); }
.adm-scoper__btn svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.adm-scoper__btn-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-scoper__btn small { display: block; font-family: var(--adm-data); font-size: 9px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.adm-scoper__caret { transition: transform .18s var(--adm-ease); }
.adm-scoper.is-open .adm-scoper__caret { transform: rotate(180deg); }

.adm-scoper__menu {
  position: absolute;
  left: 6px; right: 6px;
  top: calc(100% - 14px);
  z-index: 60;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--adm-bright);
  box-shadow: var(--adm-shadow-pop);
}
.adm-scoper__opt {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.adm-scoper__opt:hover { background: var(--adm-hover); }
.adm-scoper__opt.is-on { background: var(--orange-soft); color: var(--orange); font-weight: 650; }
.adm-scoper__opt small { margin-left: auto; font-family: var(--adm-data); font-size: 10px; color: var(--muted); }
.adm-scoper__opt svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.adm-scoper__opt.is-on svg { color: var(--orange); }

/* compact scope control for the top bar (tablet/mobile) */
.adm-scoper--bar { padding: 0; width: 160px; min-width: 0; }
.adm-scoper--bar .adm-scoper__btn { padding: 6px 9px; border-radius: 10px; font-size: 12px; min-height: 34px; }
.adm-scoper--bar .adm-scoper__btn small { display: none; }
.adm-scoper--bar .adm-scoper__btn-label { min-width: 0; }
.adm-scoper--bar .adm-scoper__btn-label > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-scoper--bar .adm-scoper__menu { left: 0; right: auto; width: 220px; top: calc(100% + 6px); }

/* ==========================================================================
   Content shell + panels
   ========================================================================== */

.adm-main { padding: 14px 12px 28px; }
.adm-view { display: none; }
.adm-view.is-active { display: block; animation: adm-viewin .22s var(--adm-ease); }
@keyframes adm-viewin {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.adm-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.adm-grid--wide { margin-top: 10px; }

.adm-panel {
  min-width: 0;
  padding: 13px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--adm-bright);
}
.adm-panel__hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.adm-panel__h {
  margin: 0;
  font-family: var(--adm-data);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.adm-panel__sub { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.adm-panel__sub b { color: var(--ink); font-variant-numeric: tabular-nums; }
.adm-panel__note { margin-top: 10px; font-size: 11.5px; color: var(--muted); }

.adm-kicker {
  display: block;
  margin-bottom: 5px;
  font-family: var(--adm-data);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange);
}
.adm-heading {
  margin: 2px 0 12px;
  font-family: var(--adm-display);
  font-size: clamp(21px, 4.5vw, 30px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.adm-heading em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.adm-subheading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 8px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.adm-subheading::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ==========================================================================
   KPI cards (value + trend + real series sparkline where one exists)
   ========================================================================== */

.adm-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.adm-kpi {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--adm-bright);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform .14s var(--adm-ease), border-color .15s ease;
}
.adm-kpi:hover { border-color: var(--border-active); }
.adm-kpi:active { transform: scale(.98); }
.adm-kpi--warn { border-color: var(--warning); }
.adm-kpi--bad { border-color: var(--error); }
.adm-kpi--static { cursor: default; }
.adm-kpi--static:hover { border-color: var(--line); }
.adm-kpi--static:active { transform: none; }
.adm-kpi__l { font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.adm-kpi__row { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.adm-kpi__v {
  font-family: var(--adm-display);
  font-size: 21px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}
.adm-kpi__d { margin-bottom: 4px; font-family: var(--adm-data); font-size: 10px; color: var(--muted); white-space: nowrap; }
.adm-kpi__d.is-up { color: var(--green); }
.adm-kpi__d.is-down { color: var(--error); }
.adm-kpi__spark { margin-left: auto; margin-bottom: 2px; flex: none; }
.adm-kpi__spark svg { display: block; width: 60px; height: 21px; }
.adm-kpi__spark polyline { fill: none; stroke: var(--cc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.adm-kpi__spark circle { fill: var(--cc); }
.adm-kpi__meter { height: 4px; margin-top: 8px; border-radius: 99px; background: var(--adm-hover); overflow: hidden; }
.adm-kpi__meter i { display: block; height: 100%; border-radius: 99px; background: var(--green); }
.adm-kpi__meter i.is-warn { background: var(--warning); }
.adm-kpi__meter i.is-bad { background: var(--error); }

/* ==========================================================================
   Charts (hand-rolled SVG/DOM; color via .cc-* custom property classes)
   ========================================================================== */

.cc-green  { --cc: var(--adm-green); }
.cc-blue   { --cc: var(--adm-blue); }
.cc-orange { --cc: var(--orange); }
.cc-amber  { --cc: var(--adm-amber); }
.cc-teal   { --cc: var(--adm-teal); }
.cc-violet { --cc: var(--adm-violet); }
.cc-ink    { --cc: var(--ink); }
.cc-red    { --cc: var(--adm-red); }
.cc-muted  { --cc: #a5a099; }
.admin-dark .cc-muted { --cc: #6b7280; }

/* range chips (7D / 30D / 90D) */
.adm-range { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--adm-hover); }
.adm-range button {
  appearance: none;
  padding: 5px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--adm-data);
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
}
.adm-range button.is-on { background: var(--adm-bright); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }

/* area chart with pointer crosshair */
.adm-achart { position: relative; height: 170px; margin-top: 2px; }
.adm-achart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.adm-achart .adm-achart__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: .55; }
.adm-achart .adm-achart__line { fill: none; stroke: var(--cc); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.adm-achart__x {
  position: absolute;
  top: 4px; bottom: 0;
  width: 1px;
  background: var(--line);
  opacity: 0;
  pointer-events: none;
}
.adm-achart__dot {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cc);
  border: 2px solid var(--adm-bright);
  box-shadow: 0 0 0 1px var(--cc);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.adm-achart__tip {
  position: absolute;
  top: 8px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper-bright);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}
.admin-dark .adm-achart__tip { color: #0b0c0e; }
.adm-achart__tip b { display: block; font-family: var(--adm-data); font-size: 12px; }
.adm-achart.is-tracked:hover .adm-achart__x,
.adm-achart.is-tracked:hover .adm-achart__dot,
.adm-achart.is-tracked:hover .adm-achart__tip { opacity: 1; }
.adm-achart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--adm-data);
  font-size: 9.5px;
  color: var(--muted);
}

/* grouped daily bars (created vs removed, audit tones) */
.adm-bars { display: flex; align-items: flex-end; gap: 3px; height: 105px; }
.adm-bars__col {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}
.adm-bars__col i { display: block; width: 42%; max-width: 9px; border-radius: 2.5px; }
.adm-bars__col i.is-a { background: var(--cc); }
.adm-bars__col i.is-b { background: var(--cc); opacity: .55; }
.adm-bars__col:hover i { filter: brightness(1.15); }
.adm-bars__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--adm-data);
  font-size: 9px;
  color: var(--muted);
}

/* donut + legend */
.adm-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.adm-donut__svgbox { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; flex: 1; min-width: 0; }
.adm-donut svg { width: 108px; height: 108px; flex: none; }
.adm-donut__arc { fill: none; stroke: var(--cc); stroke-width: 16; }
.adm-donut__t { font-family: var(--adm-display); font-size: 25px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.adm-donut__c { font-family: var(--adm-data); font-size: 7.5px; letter-spacing: .08em; fill: var(--muted); text-anchor: middle; text-transform: uppercase; }
.adm-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 150px;
}
.adm-legend li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; min-width: 0; }
.adm-legend li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-legend li b { margin-left: auto; font-family: var(--adm-data); font-size: 12px; font-weight: 500; }
.adm-legend li small { min-width: 3.2ch; font-family: var(--adm-data); font-size: 9.5px; color: var(--muted); text-align: right; }
.adm-legend--row { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; flex: none; }
.adm-legend--row li b { margin-left: .1rem; }
.adm-sw { width: 9px; height: 9px; border-radius: 3px; background: var(--cc); flex: none; align-self: center; }

/* ranked horizontal bars */
.adm-rrows { display: flex; flex-direction: column; gap: 9px; }
.adm-rrow {
  display: grid;
  grid-template-columns: minmax(80px, 128px) 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
}
.adm-rrow__l { font-family: var(--adm-data); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-rrow__t { height: 9px; border-radius: 99px; background: var(--adm-hover); overflow: hidden; }
.adm-rrow__t i { display: block; height: 100%; border-radius: 99px; background: var(--cc); }
.adm-rrow__v { font-family: var(--adm-data); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* 100% stacked strip */
.adm-strip { display: flex; height: 13px; border-radius: 99px; background: var(--adm-hover); overflow: hidden; }
.adm-strip i { display: block; background: var(--cc); }

.adm-chart-empty { padding: 10px 0 4px; font-family: var(--adm-data); font-size: 10.5px; color: var(--muted); }

/* ==========================================================================
   Pills, type badges, flags
   ========================================================================== */

.adm-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--adm-data);
  font-size: 9.5px;
  white-space: nowrap;
}
.adm-pill--ok { color: var(--green); }
.adm-pill--warn { color: var(--warning); }
.adm-pill--bad { color: var(--error); }
.adm-pill--muted { color: var(--muted); }
.adm-pill--dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.adm-type {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--adm-hover);
  font-family: var(--adm-data);
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.adm-type--html { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.adm-type--markdown { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.adm-type--mermaid { color: var(--ink); }
.adm-type--json { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.adm-type--csv { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, transparent); }
.adm-type--database { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }

.adm-flag {
  display: inline-block;
  margin-right: 3px;
  padding: 0 5px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  font-family: var(--adm-data);
  font-size: 10px;
  color: var(--muted);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.adm-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: transform .12s var(--adm-ease), background .15s ease, color .15s ease;
}
.adm-btn svg { width: 15px; height: 15px; }
.adm-btn:active { transform: scale(.97); }
.adm-btn:disabled { opacity: .4; cursor: not-allowed; }
.adm-btn--primary { background: var(--ink); color: var(--paper-bright); }
.admin-dark .adm-btn--primary { color: #0b0c0e; }
.adm-btn--primary:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); color: #fff; }
.adm-btn--danger { border-color: var(--error); color: var(--error); }
.adm-btn--danger:hover:not(:disabled) { background: var(--error); color: #fff; }
.adm-btn--ghost { border-color: var(--line); }
.adm-btn--ghost:hover:not(:disabled) { border-color: var(--border-active); }
.adm-btn--sm { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 12px; }

@media (min-width: 1080px) {
  .adm-btn { min-height: 33px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; }
  .adm-btn svg { width: 13px; height: 13px; }
}

/* ==========================================================================
   Deployments: toolbar, quick chips, cards (touch) + table (desktop)
   ========================================================================== */

.adm-depbar { display: flex; gap: 8px; margin-bottom: 10px; }
.adm-search { position: relative; flex: 1; min-width: 0; }
.adm-search svg {
  position: absolute;
  left: 12px; top: 50%;
  width: 15px; height: 15px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.adm-search input {
  width: 100%;
  height: 44px;
  padding: 0 12px 0 37px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--adm-bright);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.adm-search input:focus { outline: none; border-color: var(--ink); }
.adm-filterbtn {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--adm-bright);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.adm-filterbtn.is-on { border-color: var(--ink); background: var(--ink); color: var(--paper-bright); }
.admin-dark .adm-filterbtn.is-on { color: #0b0c0e; }
.adm-filterbtn__n {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

.adm-chipsrow { display: flex; gap: 6px; margin-bottom: 10px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.adm-chipsrow::-webkit-scrollbar { display: none; }
.adm-qchip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--adm-bright);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.adm-qchip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper-bright); }
.admin-dark .adm-qchip.is-on { color: #0b0c0e; }
.adm-qchip small { margin-left: 4px; font-family: var(--adm-data); font-size: 10px; opacity: .7; }

.adm-resultline {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 10px;
  font-family: var(--adm-data);
  font-size: 10.5px;
  color: var(--muted);
}

/* expandable cards (touch widths) */
.adm-deplist { display: flex; flex-direction: column; gap: 8px; }
.adm-dep { border: 1px solid var(--line); border-radius: 15px; background: var(--adm-bright); overflow: hidden; }
.adm-dep__head {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 10px 12px 9px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.adm-dep__r1 { display: flex; align-items: center; gap: 8px; }
.adm-dep__slug { overflow: hidden; font-family: var(--adm-data); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.adm-dep__chev { flex: none; margin-left: auto; color: var(--muted); transition: transform .22s var(--adm-ease); }
.adm-dep__chev svg { display: block; width: 16px; height: 16px; }
.adm-dep.is-open .adm-dep__chev { transform: rotate(180deg); }
.adm-dep__r2 { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--muted); }
.adm-dep__r2 .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-dep__r3 { display: flex; flex-wrap: wrap; gap: 5px; }
.adm-dep__x { display: none; padding: 4px 12px 12px; border-top: 1px dashed var(--line); }
.adm-dep.is-open .adm-dep__x { display: block; animation: adm-viewin .2s var(--adm-ease); }
.adm-dep__acts { display: flex; gap: 7px; margin-top: 11px; }
.adm-dep__acts .adm-btn { flex: 1; }

.adm-kv { display: grid; grid-template-columns: 88px 1fr; gap: 5px 10px; margin: 10px 0 0; font-size: 12.5px; }
.adm-kv dt { padding-top: 3px; font-family: var(--adm-data); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.adm-kv dd { margin: 0; word-break: break-word; }
.adm-kv--2col { grid-template-columns: 88px 1fr 88px 1fr; }

.adm-minibars { display: flex; align-items: flex-end; gap: 3px; height: 42px; margin-top: 10px; }
.adm-minibars i { flex: 1; min-height: 2px; border-radius: 2px; background: var(--cc); }
.adm-minibars-l { margin-top: 4px; font-family: var(--adm-data); font-size: 9px; color: var(--muted); }

.adm-segrow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.adm-segchip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.adm-segchip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper-bright); }
.admin-dark .adm-segchip.is-on { color: #0b0c0e; }
.adm-segchip.is-on.is-danger { background: var(--error); border-color: var(--error); color: #fff; }

/* sortable table (≥1080px) */
.adm-tablewrap {
  display: none;
  max-height: calc(100vh - 215px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--adm-bright);
  overflow: auto;
}
.adm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.adm-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--adm-bright);
  font-family: var(--adm-data);
  font-size: 9.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  user-select: none;
}
.adm-table th[data-sort] { cursor: pointer; }
.adm-table th[data-sort]:hover { color: var(--ink); }
.adm-table th .arr { margin-left: 3px; font-size: 8px; }
.adm-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.adm-table tbody tr { cursor: pointer; }
.adm-table tbody tr:hover { background: var(--adm-hover); }
.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-table td.num, .adm-table th.num { text-align: right; font-family: var(--adm-data); }
.adm-table .cell-flagged { color: var(--error); font-weight: 600; }
.adm-table tr.row-exp-soon { background: color-mix(in srgb, var(--warning) 6%, transparent); }
.adm-table tr.row-exp-expired { background: color-mix(in srgb, var(--error) 5%, transparent); }
.adm-rowacts { display: flex; gap: 6px; opacity: 0; transition: opacity .12s ease; }
.adm-table tr:hover .adm-rowacts, .adm-table tr:focus-within .adm-rowacts { opacity: 1; }
.adm-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }

/* expiry tinting on cards */
.adm-dep.is-exp-soon { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }
.adm-dep.is-exp-expired { border-color: color-mix(in srgb, var(--error) 40%, var(--line)); opacity: .85; }

/* ==========================================================================
   Generic rows (projects, namespaces, members), stats
   ========================================================================== */

.adm-rows { display: flex; flex-direction: column; gap: 8px; }
.adm-row {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--adm-bright);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .12s var(--adm-ease);
}
.adm-row:hover { border-color: var(--border-active); }
.adm-row:active { transform: scale(.99); }
.adm-row--static { cursor: default; }
.adm-row--static:active { transform: none; }
.adm-row--danger { border-color: var(--error); }
.adm-row__main { flex: 1; min-width: 0; }
.adm-row__t { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13.5px; font-weight: 650; }
.adm-row__s { margin-top: 2px; font-family: var(--adm-data); font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-row__chev { flex: none; color: var(--muted); }
.adm-row__chev svg { display: block; width: 16px; height: 16px; }
.adm-row__act { flex: none; }

.adm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0 4px; }
.adm-stat { padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--adm-bright); min-width: 0; }
.adm-stat__v { font-family: var(--adm-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-stat__l { margin-top: 1px; font-size: 9.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

.adm-backrow { margin-bottom: 10px; }
.adm-backbtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--adm-bright);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.adm-backbtn:hover { border-color: var(--border-active); }

.adm-lead { margin: 0 0 12px; font-size: 13px; color: var(--muted); }

/* danger zone framing */
.adm-dangerbox { border-color: var(--error); }
.adm-dangerbox .adm-panel__h { color: var(--error); }

/* ==========================================================================
   Attention list
   ========================================================================== */

.adm-attn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adm-attn__it {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--adm-bright);
}
.adm-attn__it.is-warn { border-color: var(--warning); }
.adm-attn__it.is-bad { border-color: var(--error); }
.adm-attn__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.adm-attn__ic svg { width: 16px; height: 16px; }
.adm-attn__it.is-ok .adm-attn__ic { background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); }
.adm-attn__it.is-warn .adm-attn__ic { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.adm-attn__it.is-bad .adm-attn__ic { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); }
.adm-attn__tx { flex: 1; min-width: 0; font-size: 13px; }
.adm-attn__tx b { font-weight: 650; }
.adm-attn__tx small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted); }
.adm-attn__go {
  appearance: none;
  flex: none;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
}
.adm-attn__go:hover { background: var(--ink); border-color: var(--ink); color: var(--paper-bright); }
.admin-dark .adm-attn__go:hover { color: #0b0c0e; }

/* ==========================================================================
   Reports (moderation queue)
   ========================================================================== */

.adm-seg { display: flex; gap: 3px; margin-bottom: 12px; padding: 3px; border-radius: 12px; background: var(--adm-hover); }
.adm-seg button {
  appearance: none;
  flex: 1;
  padding: 9px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}
.adm-seg button.is-on { background: var(--adm-bright); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.adm-seg button small { margin-left: 3px; font-family: var(--adm-data); font-size: 10px; font-weight: 400; }

.adm-reports { display: grid; grid-template-columns: 1fr; gap: 9px; }
.adm-report {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 14px;
  background: var(--adm-bright);
}
.adm-report.is-open { border-left-color: var(--error); }
.adm-report.is-dismissed { border-left-color: var(--muted); opacity: .88; }
.adm-report.is-removed { border-left-color: var(--green); opacity: .88; }
.adm-report__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-report__head strong { font-size: 13px; }
.adm-report__head time { margin-left: auto; font-family: var(--adm-data); font-size: 9.5px; color: var(--muted); }
.adm-report__slug { font-size: 13px; }
.adm-report__slug a { color: inherit; }
.adm-report__desc {
  margin: 0;
  padding: 9px 11px;
  border-left: 3px solid var(--line);
  border-radius: 8px;
  background: var(--adm-hover);
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-word;
}
.adm-report__actions { display: flex; flex-wrap: wrap; gap: 7px; }

/* ==========================================================================
   System: tiles, gauge, health, audit timeline
   ========================================================================== */

.adm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.adm-tile { padding: 8px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--adm-hover); min-width: 0; }
.adm-tile--warn { border-color: var(--warning); }
.adm-tile--bad { border-color: var(--error); }
.adm-tile__v { font-family: var(--adm-display); font-size: 14px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.adm-tile__l { font-size: 8.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

.adm-gauge { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.adm-gauge svg { width: 122px; height: 72px; flex: none; }
@media (min-width: 1080px) {
  .adm-gauge svg { width: 145px; height: 85px; }
}
.adm-gauge__bg { fill: none; stroke: var(--adm-hover); stroke-width: 11; stroke-linecap: round; }
.adm-gauge__fg { fill: none; stroke: var(--cc); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset .7s var(--adm-ease); }
.adm-gauge__pct { font-family: var(--adm-display); font-size: 18px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.adm-gauge__meta { flex: 1; min-width: 150px; }
.adm-gauge__row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 12px; }
.adm-gauge__row:last-child { border-bottom: none; }
.adm-gauge__row b { font-weight: 650; }
.adm-gauge__row .n { font-family: var(--adm-data); font-size: 10.5px; color: var(--muted); }

.adm-hchk { display: flex; flex-direction: column; gap: 9px; }
.adm-hchk__it { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.adm-hchk__it b { font-weight: 650; }
.adm-hchk__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; }
.adm-hchk__dot.is-bad { background: var(--error); }

.adm-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.adm-tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.adm-tl__it { position: relative; padding: 0 0 15px 24px; }
.adm-tl__it:last-child { padding-bottom: 2px; }
.adm-tl__dot {
  position: absolute;
  left: 0; top: 4px;
  width: 11px; height: 11px;
  border: 2px solid var(--adm-bright);
  border-radius: 50%;
  background: var(--cc);
  box-shadow: 0 0 0 1px var(--line);
}
.adm-tl__h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.adm-tl__h b { font-weight: 650; }
.adm-tl__h time { font-family: var(--adm-data); font-size: 9.5px; color: var(--muted); }
.adm-tl__s { margin-top: 2px; font-size: 11.5px; color: var(--muted); word-break: break-word; }

/* ==========================================================================
   Sheets (bottom on touch, centered on ≥720px) + confirm modal
   ========================================================================== */

.adm-sheet { position: fixed; inset: 0; z-index: 90; }
.adm-sheet__bd { position: absolute; inset: 0; background: rgba(10, 10, 9, .5); opacity: 0; transition: opacity .25s ease; }
.adm-sheet.is-open .adm-sheet__bd { opacity: 1; }
.adm-sheet__card {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  width: min(620px, 100%);
  max-height: 90%;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: var(--paper);
  box-shadow: var(--adm-shadow-sheet);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(104%);
  transition: transform .3s var(--adm-ease);
}
.adm-sheet.is-open .adm-sheet__card { transform: none; }
.adm-sheet__grip { width: 38px; height: 4px; margin: 4px auto 10px; border-radius: 99px; background: var(--line); }
.adm-sheet__h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.adm-sheet__t { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 16.5px; font-weight: 750; letter-spacing: -.02em; }
.adm-sheet__foot {
  position: sticky;
  bottom: calc(-16px - env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 8px;
  margin: 14px -16px 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.adm-sheet__foot .adm-btn { flex: 1; }

/* filter sheet groups */
.adm-fgroup__t { margin: 14px 0 8px; font-family: var(--adm-data); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.adm-fchips { display: flex; flex-wrap: wrap; gap: 6px; }

/* confirm modal (destructive flows; typed-name friction) */
.adm-cmodal { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-end; justify-content: center; }
.adm-cmodal__bd { position: absolute; inset: 0; background: rgba(10, 10, 9, .55); }
.adm-cmodal__card {
  position: relative;
  width: min(440px, 100%);
  max-height: 86%;
  padding: 18px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: var(--paper);
  box-shadow: var(--adm-shadow-sheet);
  overflow-y: auto;
  animation: adm-sheetup .3s var(--adm-ease);
}
@keyframes adm-sheetup {
  from { transform: translateY(60%); opacity: .4; }
  to { transform: none; opacity: 1; }
}
.adm-cmodal__t { margin: 0 0 8px; font-size: 16.5px; font-weight: 750; letter-spacing: -.02em; }
.adm-cmodal__p { margin: 6px 0; font-size: 13px; }
.adm-cmodal__ul { margin: 8px 0; padding-left: 18px; font-size: 12.5px; }
.adm-cmodal__ul li { margin: 4px 0; }
.adm-cmodal__acts { display: flex; flex-direction: column-reverse; gap: 8px; margin-top: 14px; }

.adm-input {
  width: 100%;
  height: 44px;
  margin: 6px 0;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--adm-bright);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.adm-input:focus { outline: none; border-color: var(--ink); }

.adm-token {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px dashed var(--ink);
  border-radius: 12px;
  background: var(--adm-hover);
  font-family: var(--adm-data);
  font-size: 12px;
  word-break: break-all;
  user-select: all;
}

/* ==========================================================================
   Toast, skeletons, empty states, login
   ========================================================================== */

.adm-toast {
  position: fixed;
  left: 50%;
  bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 120;
  max-width: min(420px, calc(100% - 28px));
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper-bright);
  font-size: 13px;
  text-align: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--adm-ease);
}
.admin-dark .adm-toast { color: #0b0c0e; }
.adm-toast.is-show { transform: translateX(-50%) translateY(0); opacity: 1; }
.adm-toast.is-err { background: var(--error); color: #fff; }

.adm-sk { border-radius: 9px; background: linear-gradient(100deg, var(--adm-hover) 40%, var(--line) 50%, var(--adm-hover) 60%); background-size: 200% 100%; animation: adm-shimmer 1.1s linear infinite; }
@keyframes adm-shimmer { to { background-position: -200% 0; } }

.adm-empty { padding: 36px 16px; color: var(--muted); text-align: center; }
.adm-empty svg { display: block; width: 38px; height: 38px; margin: 0 auto 10px; opacity: .5; }
.adm-empty b { display: block; margin-bottom: 3px; font-size: 14px; color: var(--ink); }
.adm-empty p { margin: 0 0 14px; font-size: 12.5px; }

body.admin.is-locked { overflow: hidden; }

/* Login: rendered FIRST (no hidden attr) so an unauthenticated visit never
   flashes dashboard chrome. Deliberately NOT a : password-manager
   extensions hook form submits, and the admin CSP blocking their inline
   bootstrap can leave that hook half-broken — swallowing the submit so
   clicking Sign In silently does nothing. A plain div + button gives them
   nothing to intercept; Enter is handled in JS. */
.adm-login { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--paper); }
.adm-login__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  width: min(360px, calc(100% - 40px));
  padding: 2.2rem 2.4rem 1.8rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--adm-bright);
  box-shadow: 0 16px 50px rgba(23, 23, 21, .10);
  text-align: center;
}
.adm-login__card h1 { margin: 0; font-family: var(--adm-display); font-size: 20px; letter-spacing: -.03em; }
.adm-login__sub {
  margin: 0;
  font-family: var(--adm-data);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.adm-login__card .adm-input { text-align: center; font-size: 14px; }
.adm-login__error { margin: 0; font-size: 12.5px; color: var(--error); }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper-bright);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
}
.admin-dark .brand-mark { color: #0b0c0e; }

.adm-mt0 { margin-top: 0; }
.adm-mt4 { margin-top: 4px; }
.adm-mt8 { margin-top: 8px; }
.adm-mt10 { margin-top: 10px; }
.adm-mt14 { margin-top: 14px; }
.adm-mt16 { margin-top: 16px; }
.adm-flexrow { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-span { grid-column: 1 / -1; }

/* ==========================================================================
   Admin responsive
   ========================================================================== */

@media (min-width: 720px) {
  .adm-main { padding: 18px 20px 36px; }
  .adm-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .adm-grid--2 { grid-template-columns: 1fr 1fr; }
  .adm-reports { grid-template-columns: 1fr 1fr; }
  .adm-tiles { grid-template-columns: repeat(6, 1fr); }
  .adm-tb { flex-wrap: wrap; height: auto; padding-top: 6px; padding-bottom: 0; row-gap: 0; }
  .adm-tb__tabs { display: flex; }
  .adm-tb__search { display: block; }
  .adm-achart { height: 200px; }

  /* confirm modal centers and pops instead of sliding from the bottom */
  .adm-cmodal { align-items: center; }
  .adm-cmodal__card { border-radius: 18px; padding-bottom: 18px; animation: adm-pop .22s var(--adm-ease); }
  @keyframes adm-pop {
    from { transform: scale(.94); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  .adm-cmodal__acts { flex-direction: row; justify-content: flex-end; }
  .adm-cmodal__acts .adm-btn { flex: 0 0 auto; }

  /* sheets become centered dialogs */
  .adm-sheet__card {
    bottom: auto;
    top: 50%;
    border-radius: 18px;
    padding-bottom: 18px;
    transform: translate(-50%, calc(-50% + 14px));
    opacity: 0;
    transition: opacity .22s ease, transform .25s var(--adm-ease);
  }
  .adm-sheet.is-open .adm-sheet__card { transform: translate(-50%, -50%); opacity: 1; }
  .adm-sheet__grip { display: none; }
  .adm-sheet__foot { position: static; justify-content: flex-end; margin: 14px 0 0; padding: 0; border-top: none; background: none; }
  .adm-sheet__foot .adm-btn { flex: 0 0 auto; }
  .adm-toast { bottom: 22px; }
}

@media (max-width: 719.98px) {
  .adm-tb {
    flex-wrap: wrap;
    height: auto;
    gap: 8px;
    padding: 8px 12px;
  }
  .adm-tb__t { font-size: 16px; }
  .adm-tb__sub { display: none; }
  .adm-tb__right { gap: 6px; }
  .adm-tb__right .adm-iconbtn--secondary { display: none; }
  .adm-scoper--bar { order: 5; flex: 1 1 100%; width: 100%; max-width: none; }
  .adm-scoper--bar .adm-scoper__btn { width: 100%; }
  .adm-scoper--bar .adm-scoper__menu { left: 0; right: 0; width: auto; }
}

@media (min-width: 1080px) {
  .adm-sb { display: flex; }
  .adm-scoper--bar { display: none; }
  .adm-main { margin-left: var(--adm-sbw); padding: 22px 26px 44px; }
  .adm-tb { margin-left: var(--adm-sbw); padding: 0 24px; }
  .adm-tb__tabs { display: none; }
  .adm-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .adm-tb__search input { width: 220px; }
  .adm-grid--2 { grid-template-columns: 1fr 1fr; }
  .adm-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .adm-reports { grid-template-columns: repeat(3, 1fr); }
  .adm-deplist { display: none; }
  .adm-tablewrap { display: block; }
  .adm-achart { height: 225px; }
  .adm-stats { grid-template-columns: repeat(4, 1fr); }
  .adm-stat__v { font-size: 17px; }
  .adm-seg { display: inline-flex; }
  .adm-seg button { padding: 9px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  body.admin *, body.admin *::before, body.admin *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   API reference explorer (api-docs page)
   ========================================================================== */

.api-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1.25rem; }
.api-meta .badge { font-size: .625rem; }
.api-meta a.badge { text-decoration: underline; }

/* Collapsible endpoint cards */
.endpoint-card { background: rgba(255,255,255,.55); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; margin-bottom: 1.25rem; scroll-margin-top: 84px; }
.endpoint-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; }
.endpoint-head:hover { background: rgba(255,255,255,.65); }
.endpoint-path { font-family: var(--mono); font-size: .8125rem; font-weight: 600; color: var(--ink); }
.endpoint-summary { font-size: .8125rem; color: var(--muted); margin-left: auto; text-align: right; max-width: 45%; }
.endpoint-body { display: none; padding: 1.25rem; }
.endpoint-card.is-open .endpoint-body { display: block; }
.endpoint-card.is-open .endpoint-head { background: rgba(255,255,255,.7); }

.schema-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .schema-grid { grid-template-columns: 1fr 1fr; } }

.try-row { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.api-try { margin-bottom: 1.5rem; }
.api-try h4 { margin-bottom: .4rem; }
.api-try p { font-size: .75rem; margin: 0; }
.mini-btn { font-family: var(--mono); font-size: .6875rem; padding: .45rem .7rem; border-radius: .5rem; border: 1px solid var(--line); background: var(--ink); color: #fff; cursor: pointer; }
.mini-btn--ghost { background: rgba(255,255,255,.6); color: var(--ink); }
.mini-btn:hover { transform: translateY(-1px); }

.resp-row { display: flex; gap: .5rem; align-items: center; margin: .4rem 0; font-size: .8125rem; }
.resp-code { font-family: var(--mono); font-weight: 600; min-width: 2.5rem; }

.openapi-error { padding: 2rem; text-align: center; color: var(--muted); }
.api-hint { font-size: .8125rem; color: var(--muted); margin-top: -.5rem; margin-bottom: 1rem; }
/* ==========================================================================
   LANDING V2 + PLAYGROUND — clear navbar, split hero, dedicated playground
   Appended block for the layout restructure. All classes BEM-style.
   ========================================================================== */

/* ----- responsive utilities: hide below breakpoints ----- */
@media (max-width: 1100px) { .u-hide-md { display: none !important; } }
@media (max-width: 760px)  { .u-hide-sm { display: none !important; } }

/* =========================================================
   NAVBAR (paper, sticky)
========================================================= */

.nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* CTA chip at the end of the nav */
.nav-cta {
    display: inline-flex;
    align-items: center;

    padding: 9px 16px;

    background: var(--ink);
    color: #fff !important;
    border-radius: 10px;

    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.01em;

    transition: transform .2s ease, background .2s ease;
}

.nav-cta:hover {
    transform: translateY(-2px);
    background: #2a2a27;
}

.nav-cta.is-active {
    background: var(--orange);
}

.nav-cta.is-active:hover {
    background: #e84420;
}

/* =========================================================
   HERO SPLIT — copy left, animated explainer right
========================================================= */

.hero {
    padding-top: 60px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 46px;
    align-items: center;
}

.hero-grid .hero-copy {
    max-width: none;
}

.hero-grid .hero-title {
    font-size: clamp(40px, 5.4vw, 84px);
}

/* the journey is now the animated side explainer */
.hero-grid .journey {
    margin-top: 0;
    padding: 22px;
}

.hero-grid .journey-grid {
    grid-template-columns: 1fr;
    gap: 4px;
}

.hero-grid .journey-link {
    transform: rotate(90deg);
    margin: -4px auto;

    width: 30px;
    height: 30px;

    animation: journeyNudgeY 2.4s ease-in-out infinite;
}

.hero-grid .journey-head {
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.hero-grid .journey-step-head { margin-bottom: 10px; }

.hero-grid .prompt-card,
.hero-grid .platform-card,
.hero-grid .browser-card {
    padding: 16px 17px;
}

.hero-grid .power-row { padding: 8px 0; }

.hero-grid .browser-chart { min-height: 54px; }

.hero-grid .prompt-caret { height: 12px; }

@media (max-width: 1080px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .hero-grid .journey {
        max-width: 640px;
        margin-inline: auto;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .hero { padding-top: 34px; }
    .hero-grid { gap: 26px; }
}

/* =========================================================
   CTA STRIP — try-it banner before the FAQ
========================================================= */

.cta-strip {
    width: min(1220px, calc(100% - 40px));
    margin: 0 auto 90px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;

    padding: 34px 38px;

    background: var(--ink);
    color: #f4f2ec;
    border-radius: 22px;

    box-shadow: 0 24px 60px rgba(0, 0, 0, .16);
}

.cta-copy { max-width: 560px; }

.cta-strip .kicker { color: var(--orange); }

.cta-title {
    margin: 12px 0 0;

    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1.02;
}

.cta-title em {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.03em;
    color: var(--orange);
}

.cta-text {
    margin: 12px 0 0;

    color: #b5b2aa;
    font-size: 15px;
    line-height: 1.6;
}

.cta-strip .button-primary {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 12px 30px rgba(255, 81, 43, .35);
}

.cta-strip .button-primary:hover {
    background: #e84420;
}

@media (max-width: 700px) {
    .cta-strip {
        padding: 26px 22px;
        border-radius: 18px;
    }
}

/* ==========================================================================
   PLAYGROUND PAGE
========================================================================== */

.pg-wrap {
    width: min(1220px, calc(100% - 40px));
    margin: 0 auto;
    padding: 52px 0 30px;
}

.pg-head {
    max-width: 720px;
    margin-bottom: 34px;
}

.pg-title {
    margin: 14px 0 0;

    font-size: clamp(40px, 5.6vw, 72px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.065em;
}

.pg-lead {
    max-width: 60ch;
    margin: 18px 0 0;

    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
}

.pg-grid {
    display: grid;
    grid-template-columns: 1.35fr .72fr;
    gap: 18px;
    align-items: start;
}

/* editor console grows to fill */
.pg-editor {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pg-editor .editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    border-right: 0;
}

.pg-editor .editor-top { flex-shrink: 0; }

.pg-editor .editor-shell {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pg-editor textarea {
    flex: 1;
    height: auto;
    min-height: 320px;
}

/* ---- example button (light ghost inside the dark editor) ---- */
.example-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 12px;

    border: 1px solid #2f2f2d;
    border-radius: 9px;
    background: #1e1e1c;
    color: #c8c5be;

    cursor: pointer;

    font-size: 12px;
    font-weight: 550;
    letter-spacing: -.01em;
    line-height: 1;

    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.example-button:hover {
    color: #f4f2ec;
    border-color: #3a3a38;
    background: #2a2a28;
}

/* ---- drop overlay ---- */
.drop-overlay {
    position: absolute;
    inset: 10px;
    z-index: 5;

    display: grid;
    place-items: center;

    background: rgba(23, 23, 21, .88);
    border: 2px dashed rgba(255, 81, 43, .6);
    border-radius: 14px;

    opacity: 0;
    pointer-events: none;

    transition: opacity .18s ease;

    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .02em;
    color: #f4f2ec;
}

.drop-overlay.is-dragging {
    opacity: 1;
    pointer-events: auto;
}

/* ---- editor meta row (byte count + shortcut) ---- */
.editor-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;

    padding: 12px 22px;

    border-top: 1px solid #30302e;

    font-family: var(--mono);
    font-size: 10px;
    color: #777;
}

.byte-counter.is-over { color: #ff7a5c; }

.editor-hint { letter-spacing: .02em; }

/* ---- options row (slug, password, one-time) ---- */
.opt-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    padding: 16px 22px;

    border-top: 1px solid #30302e;
}

.opt-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.opt-field--slug { flex: 1 1 180px; }

.opt-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9b9890;
}

.opt-input-wrap {
    display: flex;
    align-items: center;

    background: #1a1a19;
    border: 1px solid #2d2d2b;
    border-radius: 9px;

    transition: border-color .18s ease;
}

.opt-input-wrap:focus-within {
    border-color: #555;
}

.opt-prefix {
    padding-left: 11px;
    font-family: var(--mono);
    font-size: 12px;
    color: #6d6c68;
}

.opt-input {
    width: 100%;
    min-width: 0;

    padding: 10px 11px;

    background: transparent;
    border: 0;
    outline: 0;

    color: #deddd8;
    font-family: var(--mono);
    font-size: 12.5px;
}

.opt-input::placeholder { color: #555; }

.opt-input.is-invalid {
    color: #ff7a5c;
}

/* ---- one-time toggle chip ---- */
.opt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: auto;
    align-self: flex-start;

    padding: 11px 13px;

    border: 1px dashed #2f2f2d;
    border-radius: 9px;
    background: #1e1e1c;

    cursor: pointer;

    user-select: none;
}

.opt-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.opt-toggle-box {
    width: 15px;
    height: 15px;
    flex-shrink: 0;

    border: 1px solid #555;
    border-radius: 5px;

    display: grid;
    place-items: center;

    transition: background .18s ease, border-color .18s ease;
}

.opt-toggle-box::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--orange);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .18s ease, transform .18s ease;
}

.opt-toggle input:checked + .opt-toggle-box {
    border-color: var(--orange);
}

.opt-toggle input:checked + .opt-toggle-box::after {
    opacity: 1;
    transform: scale(1);
}

.opt-toggle input:focus-visible + .opt-toggle-box {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.opt-toggle-label {
    font-size: 12px;
    font-weight: 550;
    color: #c8c5be;
}

.opt-error {
    margin: 0;
    padding: 0 22px 14px;

    font-family: var(--mono);
    font-size: 10.5px;
    color: #ff7a5c;
}

.pg-editor .publish-button {
    margin-top: 18px;
    border-radius: 0 0 26px 26px;
}

/* =========================================================
   PLAYGROUND SIDE PANE
========================================================= */

.pg-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* result card — dark terminal panel on the paper page */
.pg-side .deploy-card {
    margin: 0;
}

/* deployed URL shown as a row with a copy button */
.deploy-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.pg-side .deploy-url {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}

.deploy-url-copy {
    flex-shrink: 0;

    padding: 7px 11px;

    border: 1px solid #2d2d2b;
    border-radius: 8px;
    background: #232321;
    color: #c8c5be;

    font-size: 11px;
    font-weight: 650;
    letter-spacing: .03em;

    cursor: pointer;

    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.deploy-url-copy:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

.deploy-url-copy.is-copied {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

/* live preview card */
.preview-block {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .6);
    overflow: hidden;
}

.preview-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;

    padding: 12px 16px;

    border-bottom: 1px solid var(--line);

    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
}

.preview-note {
    font-size: 9px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

.preview-frame {
    display: block;
    width: 100%;
    height: 320px;

    border: 0;
    background: #fff;
}

/* logs on the light page get their own card */
.pg-side .logs {
    min-height: 120px;
    margin-top: 0;

    padding: 14px 18px;

    background: rgba(255, 255, 255, .6);
    border: 1px solid var(--line);
    border-radius: 16px;

    color: var(--muted);
}

/* small print under the console */
.pg-foot {
    max-width: 760px;
    margin: 22px auto 0;

    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.pg-foot code {
    font-family: var(--mono);
    font-size: 12px;
    padding: .1em .35em;
    border-radius: 5px;
    background: rgba(23, 23, 21, .06);
    border: 0;
}

.pg-foot a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1000px) {
    .pg-grid {
        grid-template-columns: 1fr;
    }

    .pg-side {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .pg-wrap { padding-top: 34px; }
    .pg-editor .publish-button { border-radius: 0 0 18px 18px; }
    .opt-row { padding: 14px 16px; }
    .editor-meta { padding: 11px 16px; }
    .preview-frame { height: 260px; }
}

/* ==========================================================================
   LANDING V3 — strong section titles, chat demo, feature grid,
   clean integrations, playground contrast fixes.
   ========================================================================== */

/* ----- eyebrow pill uses a live dot instead of the old star ----- */
.eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(32, 165, 107, .5);
    animation: statusPulse 2.5s infinite;
}

.section-lead {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
    max-width: 58ch;
}

.section-head { margin-bottom: 44px; }

/* =========================================================
   DEMO — a Claude-style CLI that deploys and opens the result
   Dark terminal on the paper page. You ask, the agent calls the
   deploy tool, and the opened site appears as a light page that
   resembles the ask.
========================================================= */

.demo {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #181817;
    color: #e7e5df;

    border: 1px solid rgba(23, 23, 21, .18);
    border-radius: 20px;

    box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}

.demo-head {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px 18px;

    border-bottom: 1px solid #2a2a28;
}

.demo-dots { display: flex; gap: 5px; }

.demo-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(244, 242, 236, .2);
}

.demo-title {
    flex: 1;
    min-width: 0;

    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    color: #9b9890;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--green);

    transition: color .2s ease;
}

.demo-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: statusPulse 2s infinite;
}

.demo-live.is-busy {
    color: #b59a7a;
}

.demo-live.is-busy i {
    background: #e8b26b;
}

/* the stage hosts either the terminal or the opened site */
.demo-stage {
    position: relative;

    min-height: 400px;
    flex: 1;

    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.7;
}

/* ---- terminal ---- */
.demo-stage.is-site .term { display: none; }

.term {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    gap: 9px;

    padding: 18px;

    overflow: hidden;
}

.tr {
    display: block;
    color: #d8d5cd;

    animation: demoRise .18s ease both;
}

.tr--ask {
    color: #f4f2ec;
    font-weight: 500;
}

.tr-caret {
    display: inline-block;

    width: 7px;
    height: 14px;
    margin-left: 2px;
    vertical-align: -2px;

    background: #f4f2ec;

    animation: caretBlink .9s steps(1) infinite;
}

@keyframes caretBlink {
    50% { opacity: 0; }
}

/* the agent "thinking…" dots */
.thinking {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #9b9890;
}

.thinking i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9b9890;
    animation: thinkingPulse 1.1s ease-in-out infinite;
}

.thinking i:nth-child(2) { animation-delay: .15s; }
.thinking i:nth-child(3) { animation-delay: .3s; }

@keyframes thinkingPulse {
    0%, 60%, 100% { opacity: .35; }
    30% { opacity: 1; }
}

/* the deploy tool call */
.tool {
    margin: 2px 0 2px 0;

    border: 1px solid #2f2f2e;
    border-radius: 11px;
    background: #1e1e1c;

    overflow: hidden;
}

.tool-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px 11px;

    border-bottom: 1px solid #2a2a28;
}

.tool-head b {
    color: #f4f2ec;
    font-weight: 600;
    font-size: 11px;
}

.tool-head span {
    color: #777;
    font-size: 10px;
    letter-spacing: .02em;
}

.tool-rows {
    padding: 3px 11px 9px;
}

.tool-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.tool-key {
    width: 62px;
    flex-shrink: 0;

    color: #777;
    font-size: 10.5px;
}

.tool-val {
    color: #c8c5be;
    font-size: 11.5px;
}

.tool-done {
    margin-top: 5px;

    color: var(--green);
    font-size: 11.5px;
}

/* ---- the opened site (light page) ---- */
.demo-stage.is-term .site { display: none; }

.site {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    background: #fbfaf7;
    color: var(--ink);

    overflow: hidden;

    animation: siteOpen .5s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes siteOpen {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.site-bar {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 11px 15px;

    border-bottom: 1px solid var(--line);
    background: rgba(23, 23, 21, .035);
}

.sb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}

.sb-url {
    flex: 1;
    min-width: 0;

    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--green);
}

.sb-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

.site-body {
    flex: 1;

    padding: 18px;

    overflow: hidden;
}

.site-title {
    margin: 0;

    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.03em;
}

.site-sub {
    margin: 3px 0 0;

    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
}

/* dashboard kind */
.site-kpis {
    display: flex;
    gap: 9px;
    margin-top: 16px;
}

.site-kpi {
    flex: 1;

    padding: 12px;

    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.site-kpi-num {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.site-kpi-lab {
    margin-top: 2px;

    font-size: 11px;
    color: var(--muted);
}

.site-chart {
    display: flex;
    align-items: flex-end;
    gap: 7px;

    height: 92px;
    margin-top: 16px;

    padding: 9px 7px;

    border: 1px dashed var(--line);
    border-radius: 11px;
}

.site-chart--tall { height: 150px; margin-top: 18px; }

.chart-bar {
    flex: 1;
    height: 40%;
    border-radius: 3px 3px 0 0;

    background: rgba(23, 23, 21, .14);

    transform-origin: bottom;
    animation: barGrow .55s cubic-bezier(.2, .8, .2, 1) both;
}

.chart-bar:nth-child(2n) { background: rgba(255, 81, 43, .55); }
.chart-bar:nth-child(6) { background: var(--accent); }

@keyframes barGrow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* sign-in kind */
.site-form {
    display: flex;
    flex-direction: column;
    gap: 9px;

    max-width: 260px;
    margin: 18px auto 0;

    padding: 18px;

    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.site-input {
    padding: 10px 12px;

    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(23, 23, 21, .03);

    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.site-input--pwd { letter-spacing: .12em; color: #b0aca2; }

.site-btn {
    margin-top: 4px;
    padding: 11px;

    border-radius: 9px;
    background: var(--ink);
    color: #fff;

    font-size: 12.5px;
    font-weight: 650;
    text-align: center;
}

.site-hint {
    text-align: center;
    font-size: 11px;
    color: var(--muted);
}

/* chart legend */
.site-legend {
    display: flex;
    gap: 18px;
    margin-top: 12px;
}

.site-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    font-size: 11px;
    color: var(--muted);
}

.lg-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: rgba(23, 23, 21, .14);
}

.lg-dot--alt { background: rgba(255, 81, 43, .55); }

/* footer: what the app ships with */
.site-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    padding: 11px 15px;

    border-top: 1px dashed var(--line);
}

.site-chip {
    display: inline-flex;
    align-items: center;

    padding: 4px 9px;

    border: 1px solid rgba(255, 81, 43, .35);
    border-radius: 999px;
    background: rgba(255, 81, 43, .06);

    font-family: var(--mono);
    font-size: 9px;
    color: var(--accent);
}

.site-chip::before {
    content: "◆";
    font-size: 6px;
    margin-right: 5px;
    color: var(--accent);
}

/* demo sits full-height in the split hero */
.hero-grid .demo { align-self: stretch; justify-content: center; }

@media (max-width: 1080px) {
    .hero-grid .demo { max-width: 640px; margin-inline: auto; width: 100%; }
    .demo-stage { min-height: 460px; }
}

@media (max-width: 600px) {
    .demo-stage { min-height: 380px; }
    .term { padding: 14px; }
    .site-body { padding: 14px; }
}
FEATURE GRID ("what you get")
========================================================= */

.feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 14px;
}

.feat {
    display: flex;
    flex-direction: column;

    padding: 24px 22px;

    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--line);
    border-radius: 18px;

    transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
}

.feat:hover {
    transform: translateY(-4px);
    border-color: var(--border-active);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .06);
}

.feat-ic {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;
    background: rgba(255, 81, 43, .1);
    color: var(--accent);
}

.feat-ic svg {
    width: 19px;
    height: 19px;
    display: block;
}

.feat-name {
    margin-top: 16px;

    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--ink);
}

.feat-text {
    margin: 7px 0 0;

    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.section-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.section-link:hover { color: var(--accent-hover); }

/* =========================================================
   CLEAN INTEGRATIONS (logo tabs + terminal)
========================================================= */

.integ-console {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .55);
    padding: 12px;
}

.integ-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.integ-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px 8px 9px;

    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
    color: var(--muted);

    cursor: pointer;

    font-size: 13px;
    font-weight: 600;

    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .1s ease;
}

.integ-tab:hover {
    color: var(--ink);
    border-color: var(--border-active);
}

.integ-tab:active { transform: scale(.97); }

.integ-tab.active {
    color: var(--ink);
    border-color: var(--ink);
    background: var(--paper-bright);
}

.integ-ic {
    width: 20px;
    height: 20px;
    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 6px;
    overflow: hidden;
    background: #171715;
}

.integ-ic img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.integ-ic--svg svg {
    width: 18px;
    height: 18px;
    display: block;
}

.integ-term {
    margin-top: 12px;

    background: #181817;
    color: #deddd8;
    border-radius: 14px;

    overflow: hidden;
}

.integ-term-head {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 11px 16px;

    border-bottom: 1px solid #2a2a28;
}

.integ-term-dots { display: flex; gap: 5px; }

.integ-term-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(244, 242, 236, .16);
}

.integ-term-name {
    flex: 1;
    min-width: 0;

    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9b9890;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.integ-copy {
    position: static;
    padding: 7px 12px;
    border-radius: 8px;
}

.integ-term pre {
    margin: 0;

    padding: 18px 20px;

    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.8;
    white-space: pre-wrap;

    transition: opacity .15s ease, transform .15s ease;
}

.integ-term pre.is-swap {
    animation: integSwap .22s ease;
}

@keyframes integSwap {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   PLAYGROUND CONTRAST + POLISH
   The deploy card now sits outside the dark .machine, so give
   it and its text explicit light colors.
========================================================= */

.pg-side .deploy-card,
.pg-side .deploy-card * {
    color: inherit;
}

.pg-side .deploy-card {
    color: #deddd8;
    border-radius: 18px;
}

.pg-side .deploy-card h3 {
    color: #f4f2ec;
    font-size: 19px;
}

.pg-side .deploy-status-label {
    color: #9b9890;
    letter-spacing: .08em;
}

.pg-side .deploy-expiry {
    margin-top: 12px;

    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.5;
    color: #9b9890;
}

.pg-side .deploy-url {
    color: var(--green);
}

/* =========================================================
   DEMO: restaurant booking site (managed scene)
========================================================= */

.bk-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 18px;
}

.bk-venue {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
}

.bk-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 5px 10px 5px 5px;

    border: 1px solid rgba(32, 165, 107, .4);
    border-radius: 999px;
    background: rgba(32, 165, 107, .06);
}

.bk-avatar {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: var(--green);
    color: #fff;

    font-size: 11px;
    font-weight: 700;
}

.bk-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.bk-uname {
    font-size: 11.5px;
    font-weight: 650;
    color: var(--ink);
}

.bk-provider {
    font-size: 10px;
    color: var(--muted);
}

.bk-sub {
    margin-top: 16px;
}

.bk-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 12px;
}

.bk-slot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 9px 13px;

    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;

    transition: border-color .25s ease, background .25s ease;
}

.bk-slot-time {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink);
}

.bk-slot-state {
    font-size: 11px;
    font-weight: 650;
    color: var(--accent);
}

.bk-slot-row.is-open { border-style: dashed; }
.bk-slot-row.is-open .bk-slot-state { color: var(--accent); }

.bk-slot-row.is-taken {
    background: rgba(23, 23, 21, .035);
}

.bk-slot-row.is-taken .bk-slot-state {
    color: var(--muted);
    font-weight: 500;
}

.bk-slot-row.is-yours {
    border-color: rgba(32, 165, 107, .55);
    background: rgba(32, 165, 107, .07);
}

.bk-slot-row.is-yours .bk-slot-state {
    color: var(--green);
}

.bk-check::before {
    content: "\2713";
    margin-right: 5px;
}

.bk-note {
    margin-top: 12px;

    font-size: 11px;
    line-height: 1.5;
    color: var(--muted);
}

/* a slot flipping to "booked by you" pops briefly */
.bk-slot-row.is-yours {
    animation: slotYours .4s cubic-bezier(.2, .8, .2, 1);
}

@keyframes slotYours {
    0% { transform: scale(1); }
    40% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* =========================================================
   DEMO additions: agent reply, one-time gate + 404, view tags
========================================================= */

/* agent's answer in the terminal: url + password */
.reply {
    margin: 2px 0;

    border: 1px solid #3a3a38;
    border-radius: 11px;
    background: #20201e;

    padding: 9px 11px;
}

.reply-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.reply-key {
    width: 62px;
    flex-shrink: 0;
    color: #9b9890;
    font-size: 10.5px;
    letter-spacing: .03em;
}

.reply-val {
    font-size: 11.5px;
    word-break: break-all;
}

.reply-val.is-url { color: #6fd5a4; }
.reply-val.is-pw { color: #e8b26b; }

.reply-note {
    margin-top: 6px;
    color: #777;
    font-size: 10px;
}

/* tool value accents */
.tool-val.is-amber { color: #e8b26b; }

/* tag line under the browser bar in each opened view */
.view-tag {
    padding: 8px 15px;

    border-bottom: 1px dashed var(--line);
    background: rgba(255, 81, 43, .05);

    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
}

/* one-time password gate */
.burn-gate {
    height: 100%;
    display: grid;
    place-items: center;
}

.burn-card {
    width: min(240px, 90%);
    padding: 22px 20px;

    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;

    text-align: center;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
}

.burn-lock {
    width: 40px;
    height: 40px;
    margin: 0 auto;

    display: grid;
    place-items: center;

    border-radius: 12px;
    background: rgba(23, 23, 21, .07);
}

.burn-lock::before {
    content: "";
    width: 16px;
    height: 16px;

    background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.burn-title {
    margin-top: 12px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}

.burn-hint {
    margin-top: 4px;

    font-size: 11px;
    color: var(--muted);
}

.burn-field {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-top: 14px;
}

.burn-input {
    padding: 9px 12px;

    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(23, 23, 21, .03);

    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .15em;
    color: var(--ink);
    text-align: center;
}

.burn-btn {
    padding: 9px;

    border-radius: 9px;
    background: var(--ink);
    color: #fff;

    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* one-time gone (404) */
.gone {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
}

.gone-code {
    font-family: var(--mono);
    font-size: 42px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}

.gone-title {
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.03em;
    color: var(--ink);
}

.gone-text {
    max-width: 34ch;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

.gone-hint {
    margin-top: 6px;

    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

/* dashboards use full available height */
.dash-inner { min-height: 100%; }
.bk-inner { min-height: 100%; }

.demo-stage { min-height: 430px; }

/* ==========================================================================
   LANDING V5 — differentiated scenes (no numbered mono kickers), colored
   feature tiles, dedicated FAQ off the landing.
   ========================================================================== */

/* ----- scene scaffolding: full-bleed bands with a centered column ----- */
.scene {
    padding: 100px 0;
}

.scene-inner {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.scene-inner--tight { max-width: 1120px; }

/* dark showcase band (platform) */
.scene--ink {
    background:
        radial-gradient(900px 380px at 82% -10%, rgba(255, 81, 43, .16), transparent 70%),
        #191812;
    color: #f4f2ec;
}

/* warm band (integrations), distinct from the paper and the ink */
.scene--warm {
    background:
        radial-gradient(700px 300px at -5% 0%, rgba(255, 81, 43, .06), transparent 70%),
        #ece9e1;
}

/* ----- opener: label (sentence case) + big title + lead ----- */
.scene-head {
    margin-bottom: 46px;
}

.scene-head--center {
    text-align: center;
    margin-inline: auto;
    max-width: 720px;
}

.scene-label {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin: 0;

    color: var(--ink);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.005em;
}

.scene-label i {
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.scene-head--center .scene-label i { width: 2px; height: 30px; }

.scene--ink .scene-label { color: #c9c5bc; }
.scene--warm .scene-label { color: #4a4840; }

.scene-title {
    margin: 20px 0 0;

    color: var(--ink);
    font-size: clamp(40px, 5.4vw, 72px);
    font-weight: 800;
    line-height: .97;
    letter-spacing: -.045em;
}

.scene-title em {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.03em;
    color: var(--accent);
}

.scene-title--light { color: #f6f4ee; }
.scene-title--light em { color: var(--orange); }

.scene-lead {
    max-width: 58ch;
    margin: 22px 0 0;

    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
}

.scene-lead--light { color: #c2beb4; }
.scene--warm .scene-lead { color: #5d5a50; }

/* =========================================================
   PLATFORM BAND — the two tiers, one glass one paper
========================================================= */

.tiers--band {
    gap: 20px;
}

/* neutral base so band overrides win */
.tiers--band .tier {
    background: transparent;
    border: 1px solid transparent;
}

/* quick shares = the plain, no-frills option (deliberately not premium) */
.tiers--band .tier--glass {
    background: rgba(255, 255, 255, .025);
    border: 1px dashed rgba(255, 255, 255, .16);
    box-shadow: none;
}

.tier--glass .tier-name { color: #9b9890; }
.tier--glass .tier-title { color: #d6d2c9; }
.tier--glass .tier-title em { color: #c8c1b4; }
.tier--glass .tier-desc { color: #b6b1a6; }
.tier--glass .tier-list li { color: #cfc9bf; }
.tier--glass .tier-list li::before { background: #8a867c; }
.tier--glass .tier-list code { background: rgba(255, 255, 255, .08); color: #d6d2c9; }
.tier--glass .tier-foot { border-top-color: rgba(255, 255, 255, .12); color: #8f8a80; }
.tier--glass .tier-badge { border-color: rgba(255, 255, 255, .18); color: #aaa59a; }
.tier--glass .tier-badge--live { color: #9bc4ab; border-color: rgba(127, 227, 182, .28); }

/* managed = the premium paper card, the highlight on the dark band */
.tiers--band .tier--paper {
    position: relative;

    background: linear-gradient(180deg, #fdfcf9 0%, #f0ede4 100%);
    border: 1px solid #1c1b19;
    border-top: 3px solid var(--orange);
    color: #171715;

    box-shadow:
        0 0 0 1px rgba(255, 81, 43, .07),
        0 44px 90px rgba(0, 0, 0, .5);
}

.tiers--band .tier--paper .tier-head {
    padding-bottom: 2px;
}

.tiers--band .tier--paper .tier-badge {
    background: rgba(255, 81, 43, .1);
    border-color: rgba(255, 81, 43, .35);
    color: var(--orange);
}

.tiers--band .tier--paper .tier-foot {
    font-weight: 600;
    letter-spacing: .03em;
}

.tiers--band .tier--paper .tier-list li::before {
    background: var(--orange);
}

.tier--paper .tier-name { color: #9b9890; }
.tier--paper .tier-title { color: #171715; }
.tier--paper .tier-title em { color: var(--orange); }
.tier--paper .tier-desc { color: #66635a; }
.tier--paper .tier-list li { color: #2c2b27; }
.tier--paper .tier-badge { border-color: var(--line); color: var(--muted); }
.tier--paper .tier-foot { border-top-color: var(--line); color: var(--muted); }

@media (max-width: 980px) {
    .tiers--band { grid-template-columns: 1fr; }
}

/* =========================================================
   FEATURES — the colored tile wall (personality, not SaaS cards)
========================================================= */

.tile {
    position: relative;

    padding: 26px 26px 28px 30px;

    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--line);
    border-radius: 18px;

    overflow: hidden;

    transition: border-color .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;

    background: transparent;
    border-radius: 0 3px 3px 0;

    transition: background .25s ease;
}

.tile:hover {
    transform: translateY(-4px);
    border-color: rgba(23, 23, 21, .5);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .06);
}

.tile:hover::before {
    background: var(--orange);
}

/* index + icon sit on one quiet row */
.tile-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tile-index {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .16em;
    color: rgba(23, 23, 21, .35);
}

.tile-ic {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfaf7;
    color: var(--ink);
}

.tile-ic svg {
    width: 19px;
    height: 19px;
    display: block;
}

.tile-title {
    margin: 20px 0 0;

    color: var(--ink);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.tile-text {
    margin: 8px 0 0;
    max-width: 40ch;

    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.62;
}

/* a serif pull-quote glyph per tile keeps each card from feeling empty */
.tile-gesture {
    margin-top: 18px;

    font-family: var(--serif);
    font-size: 26px;
    line-height: 1;
    color: rgba(23, 23, 21, .16);
}

.feat-wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

/* --- end features --- */
/* =========================================================
   INTEGRATIONS — split: story left, console right
========================================================= */

.integ-split {
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: 52px;
    align-items: center;
}

.integ-copy .scene-head { margin-bottom: 0; }

.integ-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;

    margin-top: 26px;
}

.integ-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-family: var(--mono);
    font-size: 11px;
    color: #5d5a50;
}

.integ-meta-item i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.integ-panel {
    padding: 14px;

    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(23, 23, 21, .12);
    border-radius: 20px;

    box-shadow: 0 24px 60px rgba(0, 0, 0, .06);
}

.integ-panel .config-note {
    max-width: none;
    margin: 14px 10px 6px;
}

@media (max-width: 940px) {
    .integ-split {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .integ-copy .scene-lead { max-width: 60ch; }
}

@media (max-width: 640px) {
    .scene { padding: 64px 0; }
    .scene-title { font-size: clamp(34px, 9vw, 52px); }
    .scene-head { margin-bottom: 30px; }
    .scene-label { font-size: 12px; }
    .integ-panel { padding: 8px; }
}

/* =========================================================
   FAQ PAGE
========================================================= */

.faq-page {
    width: min(920px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 40px;
}

.faq-page-head {
    max-width: 640px;
    margin-bottom: 54px;
}

.faq-page-title {
    margin: 20px 0 0;

    color: var(--ink);
    font-size: clamp(42px, 5.6vw, 68px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.045em;
}

.faq-page-title em {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.03em;
    color: var(--accent);
}

.faq-page-lead {
    margin: 20px 0 0;

    color: var(--muted);
    font-size: 16.5px;
    line-height: 1.7;
}

.faq-groups {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.faq-group-title {
    margin: 0 0 6px;

    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--ink);
}

.faq-cta {
    margin-top: 60px;
    padding: 30px 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;

    background: var(--ink);
    color: #f4f2ec;
    border-radius: 20px;
}

.faq-cta-text {
    max-width: 46ch;
    font-size: 16px;
    line-height: 1.6;
    color: #d5d1c8;
}

.faq-cta-text strong { color: #fff; }

.faq-cta .button-primary {
    background: var(--orange);
    box-shadow: 0 12px 30px rgba(255, 81, 43, .35);
}

@media (max-width: 600px) {
    .faq-page { padding-top: 46px; }
    .faq-groups { gap: 44px; }
    .faq-cta { padding: 24px 22px; }
}