/* ═══════════════════════════════════════════════════════════════════ * used google gemini to resize iframe to letwebsite scale from cellphone to times square! * planekey.css — the ONE stylesheet. * ------------------------------------------------------------------- * A website needs ONE shared stylesheet. This file is it. It replaces * the previous three (tokens.css + planekey.css + shared.css), which * had duplicated the design tokens four ways over: * tokens.css → planekey.css's own :root → shared.css → inline * …and that duplication WAS the "colors are all over the place" bug. * * Anchored on the brand/logo design doc (pages/logo-system.html): * canonical dark window #0A0C10 * canonical light ink #E8ECF2 ramp * semantic tier accents burrow(blue) / warren(green) / thump(amber) * * There is NO light-mode flip — PlaneKey is a dark product; text is * always light on a dark surface, so contrast is guaranteed (this is * what killed the old dark-on-dark readability bug). * * The token canon is defined ONCE below; the three historical * vocabularies (planekey --ink/--panel, shared --accent/--line, inline * --text/--surface/--pk) are ALIASED to it, so a page written in any * dialect resolves the same palette. Pages should stop shipping their * own inline :root overrides — those are the last drift to clean up. * ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); :root { /* ── Surface (logo-doc canon) ── */ /* Was corrupted to #d3d7de (light grey) at some point — contradicting * this token's own "canonical dark window" label, the ink ramp below * (whose contrast ratios only hold on near-black), and every chrome * surface in the app (nav/hub headers are all rgba(10,12,16,…)). * Light-grey --bg made every var(--bg) page render near-white text on * light grey, and made pages like financial-ops look "transparent" * (their gradient stacks bottom out at var(--bg)). #0a0c10 = the * rgb(10,12,16) base the chrome already uses. */ --bg: #0a0c10; /* canonical dark window */ --bg-deep: #09090f; /* Surfaces are lifted well above --bg so cards actually separate from the * page (the old values were near-black-on-near-black — unreadable). */ --surface: #13131f; --surface2: #1a1a28; /* Was #27303e00 — trailing 00 = zero alpha, a fully TRANSPARENT * "surface", contradicting what a surface token is. Nothing consumes * --surface3/--panel-3 yet (dead token — flagpole: whoever reaches for * the third surface tier first, it's now a real color). */ --surface3: #27303e; --border: #2a2a40; /* visible hairline, not a whisper */ --border-strong: #46516A; /* ── Ink ramp (every tier clears WCAG AA on --bg — readability is real, * not aspirational; nothing important rides an unreadable gray) ── */ --text: #ebebf0; /* primary text — ~13:1 */ --text-2: #C5CCD7; /* secondary — ~9:1 */ --muted: #A7B0BD; /* muted body/labels — ~7:1 (was #8E97A4) */ --dim: #838D9C; /* dim/secondary labels — ~4.7:1 (was #5C6573, failed) */ --faint: #66707F; /* faint/decorative — ~3.1:1 (was #3A414F, invisible) */ /* ── Semantic tier accents (the WBT substrate as colour) ── */ --burrow: #7CA7FF; /* blue — encrypted / private (Burrow) */ --warren: #6FD49A; /* green — routing / network (Warren) */ --thump: #F0B14B; /* amber — alerts / broadcasts (Thump) */ --danger: #F07A7A; /* Exact hue complement of --burrow (220° → 40°, same S/L). Its hex is a * near-mirror of the blue: #7CA7FF ↔ #FFD37C (R/B channels swap). Paired * with the deeper --thump gold, the two form the mark's *radiant strength* * gradient — soft warmth low, deep heat high. Logo-scoped; not an alert. */ --burrow-comp: #FFD37C; /* The one the two golds CRESCENDO into: sRGB midpoint of --burrow-comp and * --thump = (248,194,100). At full strength both radiant layers interpolate * to this single hue — the two yellows merge into one. */ --gold-merge: #F8C264; --burrow-wash: rgba(124,167,255, 0.10); --warren-wash: rgba(111,212,154, 0.10); --thump-wash: rgba(240,177, 75, 0.10); /* ── Operational accent: green is PlaneKey's interactive colour * (same family as --warren); --accent (purple) is the secondary. ── */ --pk: #00b894; --pk-dim: rgba(0,184,148, 0.10); --pk-border: rgba(0,184,148, 0.30); --accent: #6c5ce7; --accent-dim:rgba(108,92,231, 0.12); --warn: #fdcb6e; --bad: #e17055; /* ── Type ── */ --sans: 'IBM Plex Sans', 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace; /* ── Geometry ── */ --r-card: 8px; --r-tile: 10px; --r-pill: 100px; --r-chip: 4px; --radius: 12px; --shadow: 0 2px 0 var(--bg-deep), 0 0 0 1px var(--border); /* Content container — Single sources of truth for page bounds. Max widths now use viewport scale safeguards so giant hardware spreads out nicely. */ --container-max: min(92vw, 2400px); --container-narrow: min(85vw, 1200px); --container-prose: min(75vw, 880px); /* Density (overridable via Tweaks) — fluid scaling from mobile to billboard */ --pad-page: clamp(16px, 3.5vw, 120px); --gap-card: clamp(10px, 1.5vw, 48px); --motion: 1; /* ───────────────────────────────────────────────────────────────── * ALIASES — the legacy vocabularies resolve to the canon above, so a * page in any of the three dialects gets ONE consistent palette. * ───────────────────────────────────────────────────────────────── */ --panel: var(--surface); --panel-2: var(--surface2); --panel-3: var(--surface3); --line: var(--border); --line-strong:var(--border-strong); --line-soft: var(--surface2); --ink: var(--text); --ink-2: var(--text-2); --ink-dim: var(--faint); --ink-mute: var(--dim); --ink-muted: var(--muted); --ink-faint: var(--faint); --ok: var(--warren); --good: var(--warren); --paper: var(--surface); } [data-density="compact"] { --pad-page: clamp(12px, 2.5vw, 40px); --gap-card: clamp(6px, 1vw, 24px); } [data-density="roomy"] { --pad-page: clamp(22px, 5vw, 160px); --gap-card: clamp(14px, 2vw, 64px); } [data-motion="off"] * { animation: none !important; transition: none !important; } [data-accent="muted"] { --burrow: #6E89C5; --warren: #69A788; --thump: #C49254; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); /* Root dynamic scaling: dynamically inflates sizing on immense high-res setups (TV/Display Walls) */ font-size: clamp(14px, 0.25vw + 13.5px, 28px); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; } body { background: radial-gradient(1200px 600px at 70% -10%, rgba(142, 166, 215, 0.04), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(111,212,154,0.03), transparent 60%), var(--bg); min-height: 100vh; } a { color: var(--burrow); text-decoration: none; } a:hover { color: var(--ink); } code, kbd, samp, pre { font-family: var(--mono); font-size: 0.92em; } /* ── Headings (unified across marketing + app — one type system) ──── */ h1, h2, h3, h4 { font-family: var(--sans); color: var(--ink); letter-spacing: -0.02em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(36px, 5vw + 1rem, 110px); line-height: 1.05; font-weight: 600; } h2 { font-size: clamp(24px, 3vw + 0.5rem, 64px); line-height: 1.15; font-weight: 600; } h3 { font-size: clamp(16px, 1.2vw + 10px, 36px); line-height: 1.3; font-weight: 600; } /* ═══ App design system (.pk-*) ═══════════════════════════════════ */ /* ── App nav ──────────────────────────────────────────────────────── */ .pk-nav { position: sticky; top: 0; z-index: 50; background: rgba(10,12,16,0.78); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .pk-nav-inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--pad-page); padding-block: clamp(12px, 1vw + 4px, 28px); display: flex; align-items: center; gap: clamp(14px, 2vw, 48px); } .pk-brand { font-family: var(--sans); font-weight: 600; font-size: clamp(14px, 0.5vw + 12px, 24px); letter-spacing: -0.01em; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; } .pk-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .pk-brand-mark { width: clamp(16px, 1vw + 12px, 32px); height: clamp(16px, 1vw + 12px, 32px); display: inline-block; flex: 0 0 auto; background-color: currentColor; -webkit-mask: url("/img/pk-mark.svg") center / contain no-repeat; mask: url("/img/pk-mark.svg") center / contain no-repeat; } .pk-brand .pk-brand-word { color: var(--ink); font-weight: 400; } .pk-brand-word em, .pk-brand-word span { font-style: italic; font-weight: 500; color: var(--burrow); } .pk-brand .pk-brand-word em { font-style: normal; color: var(--burrow); } .pk-nav-links { display: flex; gap: 4px; margin-left: 8px; font-size: clamp(12px, 0.3vw + 11px, 18px); font-family: var(--sans); } .pk-nav-links a { color: var(--ink-dim); padding: 6px 12px; border-radius: var(--r-chip); } .pk-nav-links a:hover { color: var(--ink); background: var(--panel); } .pk-nav-links a.active { color: var(--ink); } .pk-nav-spacer { flex: 1; } .pk-nav-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: clamp(11px, 0.3vw + 10px, 16px); color: var(--ink); padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-chip); background: var(--panel); } .pk-nav-cta:hover { background: var(--panel-2); color: var(--ink); } .pk-nav-cta .pk-prompt { color: var(--warren); } /* ── App layout ──────────────────────────────────────────────────── */ main { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--pad-page); padding-bottom: clamp(48px, 8vw, 160px); } .pk-wrap { max-width: var(--container-max); margin-inline: auto; } .pk-eyebrow { font-family: var(--mono); font-size: clamp(10px, 0.2vw + 9px, 16px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; } .pk-eyebrow::before { content: ''; width: clamp(12px, 1vw, 32px); height: 1px; background: var(--ink-faint); display: inline-block; } .pk-eyebrow.is-burrow { color: var(--burrow); } .pk-eyebrow.is-burrow::before { background: var(--burrow); } .pk-eyebrow.is-warren { color: var(--warren); } .pk-eyebrow.is-warren::before { background: var(--warren); } .pk-eyebrow.is-thump { color: var(--thump); } .pk-eyebrow.is-thump::before { background: var(--thump); } .pk-lede { font-size: clamp(14px, 0.6vw + 12px, 24px); color: var(--ink-dim); max-width: var(--container-prose); margin: 0; line-height: 1.55; text-wrap: pretty; } /* ── Buttons + CTAs ────────────────────────────────────────────── */ .pk-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: clamp(12px, 0.3vw + 12px, 18px); font-weight: 500; padding: clamp(8px, 1vw, 16px) clamp(14px, 1.5vw, 28px); border-radius: var(--r-chip); border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .pk-btn:hover { background: var(--panel-2); border-color: var(--ink-faint); } .pk-btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); } .pk-btn-primary:hover { background: #fff; border-color: #fff; } .pk-btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-dim); } .pk-btn-ghost:hover { color: var(--ink); border-color: var(--line-strong); } .pk-cmd { display: inline-flex; align-items: center; font-family: var(--mono); font-size: clamp(12px, 0.3vw + 11px, 18px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-chip); overflow: hidden; color: var(--ink); max-width: 100%; } .pk-cmd-prompt { padding: 10px 12px; background: var(--panel-2); color: var(--warren); border-right: 1px solid var(--line); } .pk-cmd-text { padding: 10px 14px; overflow-x: auto; white-space: nowrap; } .pk-cmd-copy { margin-left: auto; padding: 10px 12px; color: var(--ink-mute); background: transparent; border: 0; border-left: 1px solid var(--line); font-family: var(--mono); font-size: clamp(10px, 0.2vw + 10px, 14px); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .pk-cmd-copy:hover { color: var(--ink); background: var(--panel-2); } .pk-cmd-copy.is-copied { color: var(--warren); } /* ── Cards / panels ────────────────────────────────────────────── */ .pk-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tile); padding: clamp(16px, 2vw + 4px, 48px); position: relative; } .pk-card-flush { padding: 0; } .pk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: clamp(11px, 0.2vw + 10px, 16px); color: var(--ink-dim); letter-spacing: 0.05em; text-transform: uppercase; } .pk-card-head-title { color: var(--ink); } .pk-card-body { padding: clamp(12px, 1.5vw, 32px); } .pk-tier-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tile); padding: clamp(16px, 2vw, 40px); display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .pk-tier-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ink-faint); } .pk-tier-card.is-burrow::before { background: var(--burrow); } .pk-tier-card.is-warren::before { background: var(--warren); } .pk-tier-card.is-thump::before { background: var(--thump); } .pk-tier-mark { font-family: var(--mono); font-size: clamp(10px, 0.2vw + 9px, 14px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); } .pk-tier-name { font-family: var(--sans); font-weight: 600; font-size: clamp(18px, 1.5vw + 8px, 36px); letter-spacing: -0.015em; color: var(--ink); } .pk-tier-tag { font-family: var(--sans); font-size: clamp(12px, 0.3vw + 11px, 18px); color: var(--ink-dim); line-height: 1.5; } /* ── Chips + status ────────────────────────────────────────────── */ .pk-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: clamp(10px, 0.2vw + 10px, 15px); letter-spacing: 0.04em; padding: 4px 8px; border-radius: var(--r-chip); background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-dim); } .pk-chip.is-ok { color: var(--warren); border-color: rgba(111,212,154,0.25); background: var(--warren-wash); } .pk-chip.is-warn { color: var(--thump); border-color: rgba(240,177, 75,0.25); background: var(--thump-wash); } .pk-chip.is-burrow{ color: var(--burrow); border-color: rgba(124,167,255,0.25); background: var(--burrow-wash); } .pk-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 22%, transparent); } .pk-chip-dot.is-pulse { animation: pk-pulse 2.2s ease-in-out infinite; } @keyframes pk-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 22%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in oklch, currentColor 0%, transparent); } } /* ── Hairline section divider ──────────────────────────────────── */ .pk-rule { border: 0; border-top: 1px solid var(--line); margin: clamp(32px, 5vw, 96px) 0 clamp(24px, 4vw, 72px); } /* ── App footer ────────────────────────────────────────────────── */ .pk-footer { border-top: 1px solid var(--line); margin-top: clamp(48px, 8vw, 160px); padding-block: clamp(2px, 3vw, 2px) clamp(4px, 6vw, 96px); padding-inline: var(--pad-page); background: var(--bg-deep); } .pk-footer-inner { max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 15vw, 280px), 1fr)); gap: clamp(20px, 2.5vw, 64px); } .pk-footer h4 { font-family: var(--mono); font-size: clamp(10px, 0.2vw + 10px, 15px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin: 0 0 14px; } .pk-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .pk-footer a { color: var(--ink-dim); font-size: clamp(12px, 0.2vw + 12px, 18px); } .pk-footer a:hover { color: var(--ink); } .pk-footer-copy { color: var(--ink-mute); font-size: clamp(11px, 0.2vw + 11px, 16px); margin-top: 22px; } /* ── Selection ─────────────────────────────────────────────────── */ ::selection { background: rgba(124,167,255,0.30); color: var(--ink); } /* ── App responsive macros using auto-matching ───────────────────── */ @media (max-width: 1024px) { .pk-nav-inner { gap: 16px; } } @media (max-width: 880px) { .pk-nav-links { display: none; } .pk-nav-menu { display: inline-flex !important; } } @media (max-width: 560px) { .pk-nav-inner { gap: 10px; } } .pk-nav-menu { display: none; background: transparent; border: 1px solid var(--line-strong); color: var(--ink); padding: 6px 10px; border-radius: var(--r-chip); font-family: var(--mono); font-size: 12px; cursor: pointer; margin-left: auto; } /* ═══ Marketing / document layer (formerly shared.css) ════════════════ * Class-based components for the public site (nav, hero, pricing tiers, * prose docs, footer). These use distinct class names from the .pk-* * app system, so the two coexist in one file. Bare-element typography * (h1/h2/h3) is unified above — marketing and app share one type scale. */ .site-nav { border-bottom: 1px solid var(--line); background: var(--panel); } .site-nav .inner { max-width: var(--container-max); margin: 0 auto; padding: 14px var(--pad-page); display: flex; align-items: center; gap: 24px; } .site-nav .brand { font-weight: 700; color: var(--ink); font-size: clamp(14px, 0.5vw + 13px, 24px); letter-spacing: 0.02em; } .site-nav .brand span { color: var(--accent); } .site-nav .links { display: flex; gap: 20px; margin-left: auto; font-size: clamp(12px, 0.3vw + 12px, 18px); } .site-nav .links a { color: var(--ink-dim); } .site-nav .links a:hover { color: var(--ink); } .site-nav .links a.active { color: var(--ink); } .site-nav + header:not([class]):not([id]), body > header:not([class]):not([id]):first-of-type { max-width: var(--container-narrow); margin: 0 auto; padding: clamp(24px, 5vw, 80px) var(--pad-page) 24px; } .eyebrow { font-size: clamp(11px, 0.2vw + 10px, 15px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; font-weight: 600; } .lede { font-size: clamp(15px, 0.5vw + 13px, 24px); color: var(--ink-dim); max-width: var(--container-prose); margin: 0; } main.prose { max-width: var(--container-prose); } main.prose p { color: var(--ink-dim); margin: 0 0 16px; } main.prose p strong { color: var(--ink); } main.prose ul, main.prose ol { color: var(--ink-dim); padding-left: 22px; } main.prose li { margin-bottom: 6px; } main.prose code { background: var(--panel-2); padding: 2px 6px; border-radius: 4px; font-size: 13.5px; color: var(--ink); } main.prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; } .panel { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(16px, 2vw, 40px); } .note { background: var(--panel-2); border-left: 3px solid var(--accent); padding: 12px 16px; border-radius: 6px; margin: 16px 0; color: var(--ink-dim); font-size: clamp(13px, 0.3vw + 12px, 18px); } .note strong { color: var(--ink); } .btn { display: inline-block; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-size: clamp(12px, 0.3vw + 12px, 18px); font-weight: 500; cursor: pointer; text-decoration: none; } .btn:hover { border-color: var(--accent-dim); text-decoration: none; } .btn.primary { background: var(--accent); border-color: var(--accent); color: #0e1116; } .btn.primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); } /* Marketing footer */ body > footer { max-width: var(--container-max); margin: 48px auto 24px; padding: 24px var(--pad-page) 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; color: var(--ink-muted); font-size: clamp(11px, 0.2vw + 11px, 16px); } body > footer .links { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto; } body > footer a { color: var(--ink-dim); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 20vw, 360px), 1fr)); gap: var(--gap-card); } .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 22vw, 400px), 1fr)); gap: var(--gap-card); margin-bottom: 48px; } .plan { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 2.5vw, 44px); } .plan.featured { box-shadow: 0 2px 0 var(--bg-deep), 0 0 0 2px var(--accent); } .plan h2 { font-size: clamp(20px, 1.5vw + 6px, 32px); margin: 0 0 4px; } .plan .subtitle { color: var(--ink-dim); font-size: clamp(12px, 0.2vw + 12px, 18px); margin: 0 0 20px; } .plan .price { margin: 0 0 20px; } .plan .price .amount { font-size: clamp(28px, 3vw, 56px); font-weight: 700; } .plan .price .unit { font-size: clamp(12px, 0.2vw + 12px, 16px); color: var(--ink-dim); } .plan .price .custom { font-size: clamp(20px, 1vw + 4px, 32px); font-weight: 600; } .plan ul.features { list-style: none; padding: 0; margin: 0 0 24px; } .plan ul.features li { padding: 7px 0; color: var(--ink-dim); font-size: clamp(12px, 0.2vw + 12px, 18px); border-bottom: 1px solid var(--line); } .plan ul.features li:last-child { border-bottom: 0; } .plan ul.features li.subtle { color: var(--ink-muted); font-size: clamp(11px, 0.2vw + 11px, 15px); } .cta-button { display: inline-block; width: 100%; padding: 11px 18px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #0e1116; font-size: clamp(13px, 0.3vw + 12px, 18px); font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; } .cta-button.secondary { background: var(--panel-2); border-color: var(--line); color: var(--ink); } .cta-button.enterprise { background: var(--panel-2); border-color: var(--line); color: var(--ink); } .addons .plan { max-width: var(--container-narrow); } .faq { max-width: var(--container-prose); margin-top: 48px; } .qa { margin-bottom: 28px; } .qa h4 { margin: 0 0 8px; font-size: clamp(14px, 0.4vw + 12px, 22px); } .qa p { color: var(--ink-dim); font-size: clamp(12px, 0.3vw + 11px, 18px); margin: 0; } .counter { font-size: 12px; color: var(--ink-muted); margin-top: 12px; min-height: 18px; display: flex; align-items: center; gap: 8px; } .counter.populated { color: var(--ink-dim); } .counter .num { color: var(--ink); font-weight: 600; } .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--good); display: inline-block; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:0.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} } /* ═══════════════════════════════════════════════════════════════════════════ PlaneKey status mark — the logo AS a progress/notification indicator. ═══════════════════════════════════════════════════════════════════════════ */ .pk-mark { width: clamp(32px, 4vw, 96px); height: clamp(32px, 4vw, 96px); overflow: visible; --plane-color: var(--ink); --key-color: var(--burrow); --endpoint-color: var(--burrow); --glow-color: transparent; --plane-opacity: 1; --key-opacity: 1; } .pk-mark .plane, .pk-mark .bisector, .pk-mark .tooth, .pk-mark .endpoint { transition: stroke 180ms ease, fill 180ms ease, opacity 180ms ease, transform 180ms ease, filter 180ms ease; transform-box: fill-box; transform-origin: center; } .pk-mark .plane { fill: none; stroke: var(--plane-color); stroke-width: 1.5; stroke-linecap: square; opacity: var(--plane-opacity); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--plane-color) 35%, transparent)); } .pk-mark .bisector, .pk-mark .tooth { fill: none; stroke: var(--key-color); stroke-width: 1.5; stroke-linecap: square; opacity: var(--key-opacity); filter: drop-shadow(0 0 6px var(--glow-color)); } .pk-mark .endpoint { fill: var(--endpoint-color); opacity: var(--key-opacity); filter: drop-shadow(0 0 6px var(--glow-color)); } /* Product → KEY accent */ .pk-mark[data-product="planekey"] { --key-color: var(--burrow); --endpoint-color: var(--burrow); } .pk-mark[data-product="rootrabbit"] { --key-color: var(--pk); --endpoint-color: var(--pk); } .pk-mark[data-product="burrow"] { --key-color: var(--burrow); --endpoint-color: var(--burrow); } .pk-mark[data-product="bridge"] { --key-color: var(--accent); --endpoint-color: var(--accent); } .pk-mark[data-product="bean"] { --key-color: var(--warn); --endpoint-color: var(--warn); } /* State → key/endpoint action color. */ .pk-mark[data-state="idle"] { --glow-color: transparent; } .pk-mark[data-state="pending"] { --key-color: var(--burrow); --endpoint-color: var(--burrow); --glow-color: color-mix(in srgb, var(--burrow) 55%, transparent); } .pk-mark[data-state="success"] { --key-color: var(--warn); --endpoint-color: var(--warn); --glow-color: color-mix(in srgb, var(--warn) 65%, transparent); } .pk-mark[data-state="failure"] { --key-color: var(--bad); --endpoint-color: var(--bad); --glow-color: color-mix(in srgb, var(--bad) 35%, transparent); } .pk-mark[data-state="lockout"] { --key-color: var(--muted); --endpoint-color: var(--muted); --plane-opacity: .55; --key-opacity: .35; } /* Motion */ .pk-mark[data-state="pending"] .endpoint-left { animation: pkPulseLeft 700ms ease-in-out infinite alternate; } .pk-mark[data-state="pending"] .endpoint-right { animation: pkPulseRight 700ms ease-in-out infinite alternate; } .pk-mark[data-state="pending"] .bisector, .pk-mark[data-state="pending"] .tooth { animation: pkSweep 900ms ease-in-out infinite; } .pk-mark[data-state="success"] .endpoint { animation: pkPop 320ms ease-out 1; } .pk-mark[data-state="success"] .bisector, .pk-mark[data-state="success"] .tooth { animation: pkFlash 420ms ease-out 1; } .pk-mark[data-state="failure"] .bisector { animation: pkJitter 90ms linear 5; } .pk-mark[data-state="failure"] .tooth { animation: pkCrack 220ms ease-in-out 2 alternate; } .pk-mark[data-state="failure"] .endpoint-left { animation: pkSplitLeft 220ms ease-out 1 forwards; } .pk-mark[data-state="failure"] .endpoint-right { animation: pkSplitRight 220ms ease-out 1 forwards; } @keyframes pkPulseLeft { from { transform: scale(.95); opacity:.65; } to { transform: scale(1.08); opacity:1; } } @keyframes pkPulseRight { from { transform: scale(1.08); opacity:1; } to { transform: scale(.95); opacity:.65; } } @keyframes pkSweep { 0%{opacity:.5;} 50%{opacity:1;} 100%{opacity:.6;} } @keyframes pkFlash { 0%{opacity:.75;} 40%{opacity:1;} 100%{opacity:1;} } @keyframes pkPop { 0%{transform:scale(1);} 60%{transform:scale(1.18);} 100%{transform:scale(1.05);} } @keyframes pkJitter { 0%{transform:translateX(0);} 25%{transform:translateX(-.45px);} 50%{transform:translateX(.7px);} 75%{transform:translateX(-.3px);} 100%{transform:translateX(0);} } @keyframes pkCrack { from{transform:translateX(0);opacity:.9;} to{transform:translateX(.8px);opacity:.45;} } @keyframes pkSplitLeft { from{transform:translateX(0);opacity:1;} to{transform:translateX(-.75px);opacity:.55;} } @keyframes pkSplitRight { from{transform:translateX(0);opacity:1;} to{transform:translateX(.75px);opacity:.55;} } @media (prefers-reduced-motion: reduce) { .pk-mark * { animation: none !important; } } /* ── Status mark: per-PART live indicators ──────────────────── */ .pk-mark .endpoint-left { fill: var(--part-left, var(--endpoint-color)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--part-left, transparent) 70%, transparent)); } .pk-mark .endpoint-right { fill: var(--part-right, var(--endpoint-color)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--part-right, transparent) 70%, transparent)); } .pk-mark .bisector { stroke: var(--part-bisector, var(--key-color)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--part-bisector, transparent) 70%, transparent)); } .pk-mark .tooth { stroke: var(--part-tooth, var(--key-color)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--part-tooth, transparent) 70%, transparent)); } .pk-mark .endpoint-left[data-lit], .pk-mark .endpoint-right[data-lit] { animation: pkPop 320ms ease-out 1; } .pk-mark .bisector[data-lit], .pk-mark .tooth[data-lit] { animation: pkFlash 420ms ease-out 1; } .pk-mark[data-live="1"] { animation: pkBreathe 3.2s ease-in-out infinite; } .pk-mark[data-live="warm"] { animation: pkBreatheWarm 4s ease-in-out infinite; } @keyframes pkBreathe { 0%, 100% { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--burrow) 18%, transparent)); } 50% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--burrow) 45%, transparent)); } } @keyframes pkBreatheWarm { 0%, 100% { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--burrow-comp) 22%, transparent)) drop-shadow(0 0 1px color-mix(in srgb, var(--thump) 12%, transparent)); } 50% { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gold-merge) 55%, transparent)) drop-shadow(0 0 13px color-mix(in srgb, var(--gold-merge) 30%, transparent)); } } @media (prefers-reduced-motion: reduce) { .pk-mark[data-live="1"], .pk-mark[data-live="warm"] { animation: none; } } /* ── Data-arrival crescendo ───────────────────────────────── */ .pk-feed { background: transparent; transition: background .45s ease, border-color .45s ease; } .pk-feed[data-arrived] { background: var(--surface); animation: pkFeedBloom 900ms cubic-bezier(.2, .9, .25, 1) 1; } .pk-feed[data-arrived] .pk-feed-v, .pk-feed[data-arrived] .v { animation: pkFeedCenter 900ms cubic-bezier(.2, .9, .25, 1) 1; transform-origin: center; } @keyframes pkFeedBloom { 0% { box-shadow: 0 0 2px color-mix(in srgb, var(--burrow-comp) 22%, transparent), 0 0 1px color-mix(in srgb, var(--thump) 14%, transparent); } 38% { box-shadow: 0 0 18px color-mix(in srgb, var(--gold-merge) 68%, transparent), 0 0 34px color-mix(in srgb, var(--gold-merge) 38%, transparent); } 100% { box-shadow: 0 0 0 transparent; } } @keyframes pkFeedCenter { 0% { transform: scale(.9); opacity: .35; } 40% { transform: scale(1.07); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pk-feed { transition: none; } .pk-feed[data-arrived], .pk-feed[data-arrived] .v, .pk-feed[data-arrived] .pk-feed-v { animation: none; } } /* ── Ambient RADIANT STRENGTH signal ────────── */ .pk-mark[data-radiant] { --strength: 0; transition: filter 320ms ease; filter: drop-shadow(0 0 calc(2px + var(--strength) * 5px) color-mix(in srgb, color-mix(in srgb, var(--burrow-comp), var(--gold-merge) calc(var(--strength) * 100%)) calc(28% + var(--strength) * 34%), transparent)) drop-shadow(0 0 calc(1px + var(--strength) * 11px) color-mix(in srgb, color-mix(in srgb, var(--thump), var(--gold-merge) calc(var(--strength) * 100%)) calc(var(--strength) * 72%), transparent)); } .pk-mark[data-radiant][data-unlock] { animation: pkUnlock 900ms cubic-bezier(.2,.9,.25,1) 1; } @keyframes pkUnlock { 0% { transform: scale(1); filter: drop-shadow(0 0 2px color-mix(in srgb, var(--burrow-comp) 30%, transparent)) drop-shadow(0 0 1px color-mix(in srgb, var(--thump) 20%, transparent)); } 38% { transform: scale(1.09); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--gold-merge) 90%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--gold-merge) 55%, transparent)); } 100% { transform: scale(1); filter: drop-shadow(0 0 calc(2px + var(--strength) * 5px) color-mix(in srgb, color-mix(in srgb, var(--burrow-comp), var(--gold-merge) calc(var(--strength) * 100%)) calc(28% + var(--strength) * 34%), transparent)) drop-shadow(0 0 calc(1px + var(--strength) * 11px) color-mix(in srgb, color-mix(in srgb, var(--thump), var(--gold-merge) calc(var(--strength) * 100%)) calc(var(--strength) * 72%), transparent)); } } @media (prefers-reduced-motion: reduce) { .pk-mark[data-radiant][data-unlock] { animation: none; } .pk-mark[data-radiant] { transition: none; } } /* ── page: account (moved from ui/pages/account.html — design-system conformance pass 2026-10-26) ── */ :where(body.pg-account) *, :where(body.pg-account) *::before, :where(body.pg-account) *::after { box-sizing:border-box; margin:0; padding:0; } body:where(.pg-account), body:where(.pg-account) { min-width:0; overflow-x:hidden; } body:where(.pg-account) { font-family:'Satoshi',system-ui,sans-serif; color:var(--text); background: radial-gradient(ellipse 800px 400px at 50% -10%, rgba(0,184,148,.12), transparent 60%), var(--bg); line-height:1.55; min-height:100vh; } :where(body.pg-account) main { max-width:1100px; margin:0 auto; padding:28px 22px 60px; } :where(body.pg-account) h1 { font-size:clamp(28px,4vw,36px); margin:0 0 6px; letter-spacing:-.03em; } :where(body.pg-account) .lede { color:var(--muted); font-size:14px; max-width:64ch; margin:0 0 24px; } :where(body.pg-account) #gate { background:rgba(19,19,31,.85); border:1px solid var(--border); border-radius:14px; padding:24px; max-width:520px; margin:24px auto; display:none; } :where(body.pg-account) #gate.show { display:block; } :where(body.pg-account) #gate h2 { margin:0 0 8px; font-size:18px; letter-spacing:-.02em; } :where(body.pg-account) #gate p { color:var(--muted); font-size:13px; margin:0 0 14px; } :where(body.pg-account) #gate input { width:100%; padding:9px 11px; margin-bottom:8px; background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:7px; font:inherit; font-size:13px; font-family:'JetBrains Mono',ui-monospace,monospace; } :where(body.pg-account) #gate input:focus { outline:none; border-color:var(--pk); } :where(body.pg-account) #gate button { width:100%; padding:9px 12px; margin-top:6px; background:var(--pk); color:var(--bg); border:0; border-radius:7px; font:inherit; font-weight:700; font-size:13px; cursor:pointer; } :where(body.pg-account) #gate button:hover { background:var(--pk); } :where(body.pg-account) #gate .or { text-align:center; color:var(--dim); font-size:12px; margin:14px 0; letter-spacing:.06em; text-transform:uppercase; } :where(body.pg-account) #gate a { color:var(--pk); text-decoration:none; } :where(body.pg-account) #gate a:hover { text-decoration:underline; } :where(body.pg-account) #authed { display:none; } :where(body.pg-account) #authed.show { display:block; } :where(body.pg-account) .grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); } :where(body.pg-account) .card { background:rgba(19,19,31,.85); border:1px solid var(--border); border-radius:14px; padding:20px 22px; } :where(body.pg-account) .card.span-2 { grid-column:1 / -1; } :where(body.pg-account) .card h2 { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); font-weight:700; margin:0 0 12px; display:flex; align-items:center; gap:8px; } :where(body.pg-account) .card h2 .pill { font-size:10px; padding:2px 8px; border-radius:4px; letter-spacing:.06em; font-weight:700; background:var(--pk-dim); color:var(--pk); border:1px solid var(--pk-border); } :where(body.pg-account) .card h2 .pill.warn { background:rgba(253,203,110,.12); color:var(--warn); border-color:rgba(253,203,110,.4); } :where(body.pg-account) .card h2 .pill.bad { background:rgba(225,112,85,.12); color:var(--bad); border-color:rgba(225,112,85,.4); } :where(body.pg-account) .kv { display:grid; grid-template-columns:auto 1fr; gap:5px 16px; font-size:13px; } :where(body.pg-account) .kv .k { color:var(--muted); } :where(body.pg-account) .kv .v { color:var(--text); font-variant-numeric:tabular-nums; word-break:break-all; overflow-wrap:anywhere; } :where(body.pg-account) .kv .v.mono { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; } :where(body.pg-account) .empty { padding:14px; text-align:center; color:var(--dim); font-size:13px; font-style:italic; } :where(body.pg-account) .receipts { display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto; } :where(body.pg-account) .receipt { display:flex; align-items:center; gap:10px; padding:9px 12px; background:rgba(30,37,49,.4); border:1px solid var(--border); border-radius:8px; font-size:13px; cursor:pointer; transition:border-color .12s; } :where(body.pg-account) .receipt:hover { border-color:var(--pk-border); } :where(body.pg-account) .receipt .id { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:var(--accent); flex:0 0 80px; } :where(body.pg-account) .receipt .desc { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } :where(body.pg-account) .receipt .when { color:var(--dim); font-size:11px; flex-shrink:0; } :where(body.pg-account) .cert { display:flex; align-items:center; gap:10px; padding:8px 12px; margin-bottom:6px; background:rgba(30,37,49,.4); border:1px solid var(--border); border-radius:8px; font-size:13px; } :where(body.pg-account) .cert .name { flex:1; } :where(body.pg-account) .cert .badge { font-size:10px; padding:2px 7px; border-radius:4px; background:rgba(108,92,231,.12); color:var(--accent); border:1px solid rgba(108,92,231,.35); letter-spacing:.05em; text-transform:uppercase; } :where(body.pg-account) .cert .revoke { background:transparent; color:var(--bad); border:1px solid var(--bad); border-radius:6px; padding:3px 10px; font:inherit; font-size:11px; font-weight:600; cursor:pointer; } :where(body.pg-account) .cert .revoke:hover { background:rgba(225,112,85,.10); } :where(body.pg-account) .profile-form { display:flex; flex-direction:column; gap:8px; } :where(body.pg-account) .profile-form label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); font-weight:700; } :where(body.pg-account) .profile-form input, :where(body.pg-account) .profile-form textarea { width:100%; padding:8px 10px; background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:6px; font:inherit; font-size:13px; } :where(body.pg-account) .profile-form textarea { resize:vertical; min-height:60px; max-height:160px; } :where(body.pg-account) .profile-form input:focus, :where(body.pg-account) .profile-form textarea:focus { outline:none; border-color:var(--pk); } :where(body.pg-account) .profile-form button { align-self:flex-start; background:var(--pk); color:var(--bg); border:0; border-radius:7px; padding:7px 14px; font:inherit; font-weight:700; font-size:12px; cursor:pointer; } :where(body.pg-account) .actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; } :where(body.pg-account) .action-btn { background:transparent; color:var(--text); border:1px solid var(--border); border-radius:7px; padding:6px 12px; font:inherit; font-size:12px; cursor:pointer; text-decoration:none; } :where(body.pg-account) .action-btn:hover { border-color:var(--pk); color:var(--pk); } :where(body.pg-account) .action-btn.danger { color:var(--bad); border-color:var(--bad); } :where(body.pg-account) .action-btn.danger:hover { background:rgba(225,112,85,.10); } :where(body.pg-account) .toast { position:fixed; bottom:24px; right:24px; background:var(--pk-dim); color:var(--pk); border:1px solid var(--pk-border); border-radius:8px; padding:10px 14px; font-size:13px; font-weight:600; box-shadow:0 12px 32px rgba(9,9,15,.4); display:none; z-index:9000; } :where(body.pg-account) .toast.show { display:block; } :where(body.pg-account) .toast.bad { background:rgba(225,112,85,.10); color:var(--bad); border-color:rgba(225,112,85,.4); } .pg-account-i0 { text-align:center;font-size:13px; } .pg-account-i1 { display:flex;gap:8px;margin-top:12px;flex-wrap:wrap; } .pg-account-i2 { flex:1;min-width:200px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:7px 10px;font:inherit;font-size:13px; } .pg-account-i3 { flex:1;min-width:160px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:7px 10px;font:inherit;font-size:13px; } .pg-account-i4 { border-color:var(--pk);color:var(--pk); } .pg-account-i5 { text-align:left;padding:0 0 10px;font-style:normal; } .pg-account-i6 { color:var(--muted);font-size:12px; } .pg-account-i7 { color:var(--muted); } .pg-account-i8 { background:rgba(9,9,15,.7);border:1px solid var(--pk-border);border-radius:8px;padding:12px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--muted);max-height:240px;overflow:auto;white-space:pre-wrap;word-break:break-all;margin-bottom:8px; } /* ── page: account-costs (moved from ui/pages/account/costs.html — design-system conformance pass 2026-10-26) ── */ body:where(.pg-account-costs) { padding: 0; } :where(body.pg-account-costs) main { max-width: 880px; margin-inline: auto; padding: 26px 22px 64px; } :where(body.pg-account-costs) .head { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:8px; } :where(body.pg-account-costs) .head h1 { font-size:clamp(22px,3vw,30px); } :where(body.pg-account-costs) .head .lede { color:var(--muted); font-size:14px; margin-top:4px; max-width:60ch; } :where(body.pg-account-costs) .tier-badge { margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:600; padding:7px 12px; border-radius:var(--r-pill); background:var(--burrow-wash); color:var(--burrow); border:1px solid rgba(124,167,255,.30); text-transform:uppercase; letter-spacing:.06em; } :where(body.pg-account-costs) .tier-badge.pro { background:var(--warren-wash); color:var(--warren); border-color:rgba(111,212,154,.30); } :where(body.pg-account-costs) .tier-badge.team { background:var(--thump-wash); color:var(--thump); border-color:rgba(240,177,75,.30); } :where(body.pg-account-costs) .tier-badge.enterprise { background:rgba(108,92,231,.12); color:var(--accent); border-color:rgba(108,92,231,.35); } :where(body.pg-account-costs) .grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:18px; } :where(body.pg-account-costs) .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:18px 20px; } :where(body.pg-account-costs) .card.span-2 { grid-column:1 / -1; } :where(body.pg-account-costs) .card h2 { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); font-weight:700; margin:0 0 14px; display:flex; align-items:center; gap:8px; } :where(body.pg-account-costs) .card h2 .hint { margin-left:auto; font-weight:500; letter-spacing:0; text-transform:none; color:var(--faint); font-size:11px; } :where(body.pg-account-costs) .meter { margin:12px 0; } :where(body.pg-account-costs) .meter .row { display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; } :where(body.pg-account-costs) .meter .row .k { color:var(--text-2); } :where(body.pg-account-costs) .meter .row .v { color:var(--muted); font-variant-numeric:tabular-nums; } :where(body.pg-account-costs) .bar { height:7px; border-radius:6px; background:var(--surface3); overflow:hidden; } :where(body.pg-account-costs) .bar > span { display:block; height:100%; border-radius:6px; background:var(--burrow); transition:width .4s ease; } :where(body.pg-account-costs) .bar.warn > span { background:var(--thump); } :where(body.pg-account-costs) .bar.full > span { background:var(--danger); } :where(body.pg-account-costs) .unlimited { font-family:var(--mono); font-size:12px; color:var(--warren); } :where(body.pg-account-costs) .stat { display:flex; align-items:baseline; gap:8px; margin:6px 0; } :where(body.pg-account-costs) .stat .num { font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; } :where(body.pg-account-costs) .stat .lbl { font-size:13px; color:var(--muted); } :where(body.pg-account-costs) .mark-note { font-size:12px; color:var(--dim); line-height:1.5; margin-top:10px; } :where(body.pg-account-costs) .kv { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:13.5px; } :where(body.pg-account-costs) .kv:last-child { border-bottom:0; } :where(body.pg-account-costs) .kv .k { color:var(--muted); } :where(body.pg-account-costs) .kv .v { color:var(--text); font-variant-numeric:tabular-nums; } :where(body.pg-account-costs) .cta { display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:9px 16px; border-radius:var(--r-chip); font-size:13px; font-weight:600; background:var(--burrow); color:var(--bg); text-decoration:none; border:0; cursor:pointer; } :where(body.pg-account-costs) .cta.ghost { background:transparent; color:var(--burrow); border:1px solid rgba(124,167,255,.35); } :where(body.pg-account-costs) .muted-empty { color:var(--dim); font-size:13px; font-style:italic; } :where(body.pg-account-costs) .hide { display:none !important; } :where(body.pg-account-costs) #signin-note { background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-card); padding:18px 20px; color:var(--muted); font-size:14px; } :where(body.pg-account-costs) #signin-note a { color:var(--burrow); } .pg-account-costs-i0 { width:0 } /* ── page: account-index (moved from ui/pages/account/index.html — design-system conformance pass 2026-10-26) ── */ :where(body.pg-account-index) *, :where(body.pg-account-index) *::before, :where(body.pg-account-index) *::after { box-sizing:border-box; margin:0; padding:0; } body:where(.pg-account-index), body:where(.pg-account-index) { height:100%; overflow:hidden; min-width:0; } body:where(.pg-account-index) { font-family:var(--sans); color:var(--text); background:var(--bg); display:flex; flex-direction:column; } :where(body.pg-account-index) header.hub { flex-shrink:0; border-bottom:1px solid var(--border); background:rgba(10,12,16,.85); backdrop-filter:blur(10px); } :where(body.pg-account-index) .hub-top { display:flex; align-items:center; gap:14px; padding:12px 20px 0; } :where(body.pg-account-index) .pk-brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; } :where(body.pg-account-index) .pk-brand-mark { width:20px; height:20px; border-radius:5px; position:relative; background:linear-gradient(135deg, var(--burrow) 0%, var(--warren) 100%); flex-shrink:0; } :where(body.pg-account-index) .pk-brand-mark::after { content:""; position:absolute; inset:5px; border:2px solid var(--bg); border-radius:2px; transform:rotate(45deg) scale(.72); } :where(body.pg-account-index) .pk-brand-word { font-weight:700; font-size:16px; letter-spacing:-.02em; color:var(--text); } :where(body.pg-account-index) .pk-brand-word em { font-style:normal; color:var(--burrow); } :where(body.pg-account-index) .hub-title { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:700; margin-left:4px; } :where(body.pg-account-index) .hub-spacer { flex:1; } :where(body.pg-account-index) .hub-meta { font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; } :where(body.pg-account-index) .tabs { display:flex; gap:2px; padding:6px 16px 0; overflow-x:auto; } :where(body.pg-account-index) .tab { background:none; border:0; color:var(--muted); font:inherit; font-size:13px; font-weight:600; padding:9px 14px; cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; border-radius:6px 6px 0 0; } :where(body.pg-account-index) .tab:hover { color:var(--text); background:rgba(232,236,242,.03); } :where(body.pg-account-index) .tab.active { color:var(--burrow); border-bottom-color:var(--burrow); } :where(body.pg-account-index) .tab .badge { font-size:9px; padding:1px 5px; border-radius:4px; margin-left:6px; background:var(--warren-wash); color:var(--warren); font-weight:700; letter-spacing:.05em; } :where(body.pg-account-index) main { flex:1; position:relative; overflow:hidden; } :where(body.pg-account-index) iframe { width:100%; height:100%; border:0; display:block; background:var(--bg); } /* ── page: attestation-index (moved from ui/pages/attestation/index.html — design-system conformance pass 2026-10-26) ── */ :where(body.pg-attestation-index) *, :where(body.pg-attestation-index) *::before, :where(body.pg-attestation-index) *::after { box-sizing:border-box; margin:0; padding:0; } body:where(.pg-attestation-index), body:where(.pg-attestation-index) { min-width:0; overflow-x:hidden; } body:where(.pg-attestation-index) { font-family:'Satoshi',system-ui,sans-serif; color:var(--text); background: radial-gradient(ellipse 800px 400px at 50% -10%, rgba(108,92,231,.10), transparent 60%), var(--bg); line-height:1.55; min-height:100vh; } :where(body.pg-attestation-index) main { max-width:1100px; margin:0 auto; padding:28px 22px 60px; } :where(body.pg-attestation-index) h1 { font-size:clamp(28px,4vw,36px); margin:0 0 6px; letter-spacing:-.03em; } :where(body.pg-attestation-index) .lede { color:var(--muted); font-size:14px; max-width:64ch; margin:0 0 24px; } :where(body.pg-attestation-index) .toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:rgba(19,19,31,.7); border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:16px; } :where(body.pg-attestation-index) .toolbar label { font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; font-weight:700; } :where(body.pg-attestation-index) .toolbar input, :where(body.pg-attestation-index) .toolbar select { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:6px 9px; font:inherit; font-size:13px; } :where(body.pg-attestation-index) .toolbar input { min-width:220px; flex:1; } :where(body.pg-attestation-index) .toolbar button { background:var(--pk-dim); color:var(--pk); border:1px solid var(--pk-border); border-radius:6px; padding:6px 14px; font:inherit; font-weight:700; font-size:12px; cursor:pointer; } :where(body.pg-attestation-index) .toolbar button:hover { background:rgba(0,184,148,.18); } :where(body.pg-attestation-index) .stats { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin-bottom:18px; } :where(body.pg-attestation-index) .stat { background:rgba(19,19,31,.7); border:1px solid var(--border); border-radius:10px; padding:12px 14px; } :where(body.pg-attestation-index) .stat .k { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); font-weight:700; margin-bottom:4px; } :where(body.pg-attestation-index) .stat .v { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } :where(body.pg-attestation-index) .stat.pending .v { color:var(--warn); } :where(body.pg-attestation-index) .stat.approved .v { color:var(--pk); } :where(body.pg-attestation-index) .stat.rejected .v { color:var(--bad); } :where(body.pg-attestation-index) .stat.error .v { color:var(--bad); } :where(body.pg-attestation-index) .timeline { background:rgba(19,19,31,.85); border:1px solid var(--border); border-radius:14px; overflow:hidden; } :where(body.pg-attestation-index) .timeline .empty { padding:24px; text-align:center; color:var(--dim); font-size:13px; font-style:italic; } :where(body.pg-attestation-index) .change-row { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; } :where(body.pg-attestation-index) .change-row:last-child { border-bottom:0; } :where(body.pg-attestation-index) .change-row:hover { background:rgba(30,37,49,.4); } :where(body.pg-attestation-index) .change-row .state { flex:0 0 80px; font-size:11px; font-weight:700; padding:4px 0; text-align:center; border-radius:5px; letter-spacing:.05em; text-transform:uppercase; } :where(body.pg-attestation-index) .state.pending { background:rgba(253,203,110,.12); color:var(--warn); border:1px solid rgba(253,203,110,.35); } :where(body.pg-attestation-index) .state.running { background:rgba(108,92,231,.12); color:var(--accent); border:1px solid rgba(108,92,231,.35); } :where(body.pg-attestation-index) .state.approved { background:var(--pk-dim); color:var(--pk); border:1px solid var(--pk-border); } :where(body.pg-attestation-index) .state.rejected { background:rgba(225,112,85,.12); color:var(--bad); border:1px solid rgba(225,112,85,.35); } :where(body.pg-attestation-index) .state.error { background:rgba(225,112,85,.12); color:var(--bad); border:1px solid rgba(225,112,85,.35); } :where(body.pg-attestation-index) .change-row .body { flex:1; min-width:0; } :where(body.pg-attestation-index) .change-row .body .head { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } :where(body.pg-attestation-index) .change-row .body .head code { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; color:var(--accent); background:rgba(108,92,231,.08); padding:1px 6px; border-radius:4px; } :where(body.pg-attestation-index) .change-row .body .sub { font-size:12px; color:var(--muted); margin-top:2px; } :where(body.pg-attestation-index) .change-row .chevron { color:var(--dim); flex-shrink:0; } :where(body.pg-attestation-index) .detail { margin-top:18px; display:none; background:rgba(19,19,31,.85); border:1px solid var(--border); border-radius:14px; padding:20px 22px; } :where(body.pg-attestation-index) .detail.show { display:block; } :where(body.pg-attestation-index) .detail h3 { font-size:14px; letter-spacing:-.01em; margin:0 0 14px; } :where(body.pg-attestation-index) .detail h3 code { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; background:rgba(30,37,49,.5); padding:2px 8px; border-radius:4px; color:var(--accent); } :where(body.pg-attestation-index) .detail .grid { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13px; } :where(body.pg-attestation-index) .detail .grid .k { color:var(--muted); } :where(body.pg-attestation-index) .detail .grid .v { color:var(--text); font-variant-numeric:tabular-nums; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; word-break:break-all; } :where(body.pg-attestation-index) .detail .blob { margin-top:14px; background:rgba(9,9,15,.7); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:var(--muted); max-height:200px; overflow:auto; white-space:pre-wrap; word-break:break-all; } :where(body.pg-attestation-index) .detail .blob-label { font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin:14px 0 4px; } :where(body.pg-attestation-index) .note { background:rgba(253,203,110,.08); color:var(--warn); border:1px solid rgba(253,203,110,.3); border-radius:8px; padding:10px 12px; margin-top:12px; font-size:12px; } .pg-attestation-index-i0 { color:var(--muted); } /* ── page: billing-return (moved from ui/pages/billing-return.html — design-system conformance pass 2026-10-26) ── */ .pg-billing-return-i0 { max-width:680px;margin:0 auto; } .pg-billing-return-i1 { margin-top:0; } .pg-billing-return-i2 { color:var(--ink-dim);padding-left:22px; } .pg-billing-return-i3 { margin-top:24px;padding:16px;background:var(--panel-2);border-radius:8px;font-family:ui-monospace,monospace;font-size:13px;color:var(--ink-dim); } .pg-billing-return-i4 { margin-top:24px;display:flex;gap:8px;flex-wrap:wrap; } /* ── page: bridge-explorer-index (moved from ui/pages/bridge-explorer/index.html — design-system conformance pass 2026-10-26) ── */ :where(body.pg-bridge-explorer-index) *, :where(body.pg-bridge-explorer-index) *::before, :where(body.pg-bridge-explorer-index) *::after { box-sizing:border-box; margin:0; padding:0; } body:where(.pg-bridge-explorer-index), body:where(.pg-bridge-explorer-index) { min-width:0; overflow-x:hidden; } body:where(.pg-bridge-explorer-index) { font-family:'Satoshi',system-ui,sans-serif; color:var(--text); background: radial-gradient(ellipse 800px 400px at 50% -10%, rgba(108,92,231,.10), transparent 60%), var(--bg); line-height:1.55; min-height:100vh; } :where(body.pg-bridge-explorer-index) main { max-width:1180px; margin:0 auto; padding:28px 22px 60px; } :where(body.pg-bridge-explorer-index) h1 { font-size:clamp(28px,4vw,36px); margin:0 0 6px; letter-spacing:-.03em; } :where(body.pg-bridge-explorer-index) .lede { color:var(--muted); font-size:14px; max-width:72ch; margin:0 0 22px; } :where(body.pg-bridge-explorer-index) .stats { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin-bottom:18px; } :where(body.pg-bridge-explorer-index) .stat { background:rgba(19,19,31,.85); border:1px solid var(--border); border-radius:10px; padding:12px 14px; } :where(body.pg-bridge-explorer-index) .stat .k { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); font-weight:700; margin-bottom:4px; } :where(body.pg-bridge-explorer-index) .stat .v { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } :where(body.pg-bridge-explorer-index) .stat.consumed .v { color:var(--pk); } :where(body.pg-bridge-explorer-index) .stat.loose .v { color:var(--warn); } :where(body.pg-bridge-explorer-index) .stat.ui-facing .v { color:var(--accent); } :where(body.pg-bridge-explorer-index) .stat.coverage .v { color:var(--text); } :where(body.pg-bridge-explorer-index) .toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:18px; } :where(body.pg-bridge-explorer-index) .toolbar input, :where(body.pg-bridge-explorer-index) .toolbar select { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:7px 10px; font:inherit; font-size:13px; } :where(body.pg-bridge-explorer-index) .toolbar input { flex:1; min-width:200px; } :where(body.pg-bridge-explorer-index) .toolbar label.toggle { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); cursor:pointer; padding:6px 10px; border:1px solid var(--border); border-radius:6px; } :where(body.pg-bridge-explorer-index) .toolbar label.toggle input { accent-color:var(--pk); } :where(body.pg-bridge-explorer-index) .layout { display:grid; gap:14px; grid-template-columns:220px 1fr; } @media (max-width:760px) { :where(body.pg-bridge-explorer-index) .layout { grid-template-columns:1fr; } } :where(body.pg-bridge-explorer-index) .module-list { background:rgba(19,19,31,.85); border:1px solid var(--border); border-radius:14px; padding:14px; height:fit-content; max-height:80vh; overflow-y:auto; } :where(body.pg-bridge-explorer-index) .module-item { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; margin-bottom:3px; background:transparent; border:1px solid transparent; border-radius:7px; cursor:pointer; font-size:13px; color:var(--text); text-align:left; width:100%; font:inherit; } :where(body.pg-bridge-explorer-index) .module-item:hover { background:rgba(30,37,49,.4); border-color:var(--border); } :where(body.pg-bridge-explorer-index) .module-item.active { background:rgba(108,92,231,.12); border-color:rgba(108,92,231,.4); color:var(--accent); } :where(body.pg-bridge-explorer-index) .module-item .name { font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; } :where(body.pg-bridge-explorer-index) .module-item .count { font-size:11px; padding:1px 6px; border-radius:6px; background:rgba(30,37,49,.6); color:var(--muted); font-variant-numeric:tabular-nums; flex-shrink:0; margin-left:6px; } :where(body.pg-bridge-explorer-index) .routes-card { background:rgba(19,19,31,.85); border:1px solid var(--border); border-radius:14px; padding:18px 20px; } :where(body.pg-bridge-explorer-index) .routes-header h2 { font-size:16px; margin:0; letter-spacing:-.02em; } :where(body.pg-bridge-explorer-index) .routes-header p { font-size:12px; color:var(--muted); margin:4px 0 14px; } :where(body.pg-bridge-explorer-index) .route { border-top:1px solid var(--border); padding:14px 0; } :where(body.pg-bridge-explorer-index) .route:first-of-type { border-top:0; padding-top:0; } :where(body.pg-bridge-explorer-index) .route-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } :where(body.pg-bridge-explorer-index) .verb { flex:0 0 56px; text-align:center; font-size:10px; font-weight:700; padding:3px 0; border-radius:5px; letter-spacing:.06em; } :where(body.pg-bridge-explorer-index) .verb.GET { background:rgba(0,184,148,.10); color:var(--pk); border:1px solid var(--pk-border); } :where(body.pg-bridge-explorer-index) .verb.POST { background:rgba(108,92,231,.10); color:var(--accent); border:1px solid rgba(108,92,231,.4); } :where(body.pg-bridge-explorer-index) .verb.PATCH { background:rgba(253,203,110,.10); color:var(--warn); border:1px solid rgba(253,203,110,.4); } :where(body.pg-bridge-explorer-index) .verb.DELETE { background:rgba(225,112,85,.10); color:var(--bad); border:1px solid rgba(225,112,85,.4); } :where(body.pg-bridge-explorer-index) .verb.PUT { background:rgba(253,203,110,.10); color:var(--warn); border:1px solid rgba(253,203,110,.4); } :where(body.pg-bridge-explorer-index) .path { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13px; font-weight:600; flex:1; word-break:break-all; } :where(body.pg-bridge-explorer-index) .badge { font-size:10px; padding:2px 7px; border-radius:5px; letter-spacing:.05em; text-transform:uppercase; background:rgba(30,37,49,.6); color:var(--muted); border:1px solid var(--border); font-weight:600; } :where(body.pg-bridge-explorer-index) .badge.consumed { background:var(--pk-dim); color:var(--pk); border-color:var(--pk-border); } :where(body.pg-bridge-explorer-index) .badge.webhook { color:var(--warn); border-color:rgba(253,203,110,.4); } :where(body.pg-bridge-explorer-index) .badge.machine_polling { color:var(--accent); border-color:rgba(108,92,231,.4); } :where(body.pg-bridge-explorer-index) .badge.federation { color:var(--dim); } :where(body.pg-bridge-explorer-index) .badge.ui_facing { color:var(--warn); border-color:rgba(253,203,110,.4); } :where(body.pg-bridge-explorer-index) .tier { font-size:9px; padding:2px 7px; border-radius:5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; border:1px solid; } :where(body.pg-bridge-explorer-index) .tier.public { color:var(--dim); border-color:var(--border); background:rgba(30,37,49,.6); } :where(body.pg-bridge-explorer-index) .tier.customer { color:var(--pk); border-color:var(--pk-border); background:var(--pk-dim); } :where(body.pg-bridge-explorer-index) .tier.enterprise { color:var(--accent); border-color:rgba(108,92,231,.4); background:rgba(108,92,231,.10); } :where(body.pg-bridge-explorer-index) .tier.internal { color:var(--bad); border-color:rgba(225,112,85,.4); background:rgba(225,112,85,.10); } :where(body.pg-bridge-explorer-index) .tier.machine { color:var(--warn); border-color:rgba(253,203,110,.4); background:rgba(253,203,110,.10); } :where(body.pg-bridge-explorer-index) .route-body { margin-top:10px; padding:10px 12px; background:rgba(30,37,49,.4); border:1px solid var(--border); border-radius:8px; display:none; } :where(body.pg-bridge-explorer-index) .route.open .route-body { display:block; } :where(body.pg-bridge-explorer-index) .route-body .src { font-size:11px; color:var(--dim); font-family:'JetBrains Mono',ui-monospace,monospace; margin-bottom:8px; } :where(body.pg-bridge-explorer-index) .field-list { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:12px; margin-top:8px; } :where(body.pg-bridge-explorer-index) .field-list .fk { color:var(--muted); font-weight:600; } :where(body.pg-bridge-explorer-index) .field-list .fv { color:var(--text); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; } :where(body.pg-bridge-explorer-index) .field-list .ft { color:var(--accent); } :where(body.pg-bridge-explorer-index) .invoke-form { display:flex; flex-direction:column; gap:6px; margin-top:10px; } :where(body.pg-bridge-explorer-index) .invoke-form .form-row { display:flex; gap:6px; align-items:center; font-size:12px; } :where(body.pg-bridge-explorer-index) .invoke-form .form-row label { flex:0 0 120px; color:var(--muted); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; } :where(body.pg-bridge-explorer-index) .invoke-form .form-row input, :where(body.pg-bridge-explorer-index) .invoke-form textarea { flex:1; min-width:0; background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:5px; padding:5px 8px; font:inherit; font-size:12px; font-family:'JetBrains Mono',ui-monospace,monospace; } :where(body.pg-bridge-explorer-index) .invoke-form textarea { min-height:60px; resize:vertical; } :where(body.pg-bridge-explorer-index) .invoke-actions { display:flex; gap:6px; margin-top:8px; } :where(body.pg-bridge-explorer-index) .invoke-actions button { background:var(--pk); color:var(--bg); border:0; border-radius:6px; padding:6px 14px; font:inherit; font-weight:700; font-size:12px; cursor:pointer; } :where(body.pg-bridge-explorer-index) .invoke-actions button:hover { background:var(--pk); } :where(body.pg-bridge-explorer-index) .invoke-actions button.copy { background:transparent; color:var(--muted); border:1px solid var(--border); } :where(body.pg-bridge-explorer-index) .response { margin-top:10px; background:rgba(9,9,15,.7); border:1px solid var(--border); border-radius:6px; padding:8px 10px; max-height:280px; overflow:auto; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:var(--muted); white-space:pre-wrap; word-break:break-all; } :where(body.pg-bridge-explorer-index) .response.ok { border-color:var(--pk-border); color:var(--pk); } :where(body.pg-bridge-explorer-index) .response.bad { border-color:rgba(225,112,85,.4); color:var(--bad); } :where(body.pg-bridge-explorer-index) .meta-note { font-size:11px; color:var(--dim); margin-top:14px; } :where(body.pg-bridge-explorer-index) .meta-note a { color:var(--pk); text-decoration:none; } .pg-bridge-explorer-index-i0 { display:none;background:rgba(225,112,85,.08);border:1px solid rgba(225,112,85,.35);border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:13px;color:var(--bad); } .pg-bridge-explorer-index-i1 { font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:700;margin-bottom:10px; } .pg-bridge-explorer-index-i2 { padding:24px;text-align:center;color:var(--dim);font-style:italic; } .pg-bridge-explorer-index-i3 { padding:18px;text-align:center;color:var(--dim);font-style:italic; } .pg-bridge-explorer-index-i4 { font-size:11px;color:var(--muted);margin-bottom:6px; } .pg-bridge-explorer-index-i5 { color:var(--accent); } .pg-bridge-explorer-index-i6 { display:none; } .pg-bridge-explorer-index-i7 { padding:24px;text-align:center;color:var(--bad); } .pg-bridge-explorer-index-i8 { padding:24px;text-align:center;color:var(--muted); } /* ── page: bridge-index (moved from ui/pages/bridge-index.html — design-system conformance pass 2026-10-26) ── */ .pg-bridge-index-i0 { margin-top:24px;display:flex;gap:12px;flex-wrap:wrap; } .pg-bridge-index-i1 { margin-bottom:48px; } .pg-bridge-index-i2 { margin-top:0; } .pg-bridge-index-i3 { color:var(--ink-dim);font-size:14.5px;margin:0; } .pg-bridge-index-i4 { color:var(--ink-dim);max-width:760px;padding-left:22px; } .pg-bridge-index-i5 { color:var(--ink); } .pg-bridge-index-i6 { color:var(--ink-dim);max-width:760px; } /* ── page: changelog (moved from ui/pages/changelog.html — design-system conformance pass 2026-10-26) ── */ .pg-changelog-i0 { color:var(--ink-dim); } .pg-changelog-i1 { margin-bottom:16px; } .pg-changelog-i2 { display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; } .pg-changelog-i3 { margin:0; } .pg-changelog-i4 { font-size:14px;color:var(--accent); } .pg-changelog-i5 { font-size:12px;color:var(--ink-muted);margin-left:auto; } .pg-changelog-i6 { color:var(--ink-dim);margin:12px 0; } .pg-changelog-i7 { color:var(--ink-dim);font-size:14px;padding-left:22px; } .pg-changelog-i8 { color:var(--warn); } /* ── page: example (moved from ui/pages/example.html — design-system conformance pass 2026-10-26) ── */ :where(body.pg-example) here. Prefer tokens (var(--…)) over raw hex so you inherit the theme + the AA-safe ink ramp automatically. -->