:root { color-scheme: dark; --bg: #111112; --surface: #19191b; --surface-raised: #202024; --surface-hover: #29292e; --ink: #f2f0eb; --muted: #a5a2a0; --faint: #6d6a68; --line: #353437; --line-strong: #4b494d; --accent: #8b83ff; --experience: #e7a84b; --orchestration: #8b83ff; --integration: #5ca8d8; --foundation: #70b98d; --external: #d16f86; --danger: #e06f6f; --radius: 8px; --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace; --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } html { background: var(--bg); scroll-behavior: smooth; } body { margin: 0; min-width: 320px; /* Base colour lives on ; body keeps only the grid lines over a transparent base so the fixed ambient glow can sit between them. */ background: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px), transparent; background-size: 32px 32px; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; } /* Soft accent bloom anchored top-right, slowly breathing — the same ambient flourish as the product site, sharing its tokens. Fixed and behind content; purely decorative. */ .ambient-glow { position: fixed; z-index: -1; top: -18%; right: -8%; width: min(760px, 68%); height: 78vh; background: radial-gradient(closest-side, rgba(139,131,255,.16), transparent 70%), radial-gradient(closest-side, rgba(92,168,216,.11), transparent 72%); background-position: 28% 22%, 82% 64%; background-repeat: no-repeat; filter: blur(20px); pointer-events: none; animation: ambientDrift 20s ease-in-out infinite alternate; } @keyframes ambientDrift { from { transform: translate3d(0, 0, 0) scale(1); opacity: .8; } to { transform: translate3d(-3%, 2%, 0) scale(1.06); opacity: 1; } } button, input, select { font: inherit; } a { color: inherit; } .skip-link { position: fixed; left: 16px; top: -80px; z-index: 20; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: 4px; } .skip-link:focus { top: 16px; } .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; } .topbar { min-height: 88px; padding: 18px clamp(20px, 4vw, 64px); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: rgba(17,17,18,.92); backdrop-filter: blur(16px); } .brand { display: flex; align-items: center; gap: 14px; } .brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-strong); color: var(--ink); font: 700 19px var(--mono); transform: rotate(-2deg); } .eyebrow { margin: 0 0 6px; color: var(--faint); font: 600 10px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; } h1 { margin: 0; font-size: 17px; line-height: 1.1; letter-spacing: -.01em; } .topbar-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 11px var(--mono); } .topbar-meta code { color: var(--faint); } .topbar-meta a { text-decoration: none; color: var(--ink); } .topbar-meta a:hover { text-decoration: underline; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--foundation); box-shadow: 0 0 0 4px rgba(112,185,141,.12); animation: statusPulse 2.6s ease-out infinite; } @keyframes statusPulse { 0% { box-shadow: 0 0 0 0 rgba(112,185,141,.5); } 70% { box-shadow: 0 0 0 7px rgba(112,185,141,0); } 100% { box-shadow: 0 0 0 0 rgba(112,185,141,0); } } .section-nav { position: sticky; top: 0; z-index: 10; display: flex; gap: 2px; padding: 0 clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--line); background: rgba(17,17,18,.95); backdrop-filter: blur(16px); } .nav-item { min-height: 48px; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: 600 12px var(--mono); } .nav-item:hover { color: var(--ink); } .nav-item.active { border-bottom-color: var(--accent); color: var(--ink); } .nav-item:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } main { min-height: 75vh; } .view { display: none; padding: 48px clamp(20px, 4vw, 64px) 72px; } .view.active { display: block; } .intro-row { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 32px; } .intro-row.compact { align-items: start; } h2 { margin: 0 0 12px; font-size: clamp(32px, 5vw, 64px); line-height: .96; letter-spacing: -.055em; } /* View titles pick up the same accent gradient as the product site's hero. */ .intro-row h2 { background: linear-gradient(96deg, var(--ink) 28%, var(--accent) 78%, var(--integration) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lede { max-width: 720px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; } .stats { display: flex; gap: 28px; flex-shrink: 0; } .stat { min-width: 86px; } .stat-value { display: block; font: 500 26px/1 var(--mono); letter-spacing: -.06em; } .stat-label { display: block; margin-top: 7px; color: var(--faint); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .12em; } .graph-toolbar, .inventory-toolbar { display: flex; gap: 10px; align-items: center; min-height: 58px; padding: 10px; border: 1px solid var(--line); border-bottom: 0; background: var(--surface); } .search-control { flex: 1; } .search-control input, .inventory-toolbar input { width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid transparent; border-radius: 4px; background: var(--bg); color: var(--ink); font: 12px var(--mono); } .search-control input::placeholder, .inventory-toolbar input::placeholder { color: var(--faint); } .select-control { display: flex; align-items: center; gap: 8px; color: var(--faint); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; } .select-control select { min-height: 38px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); font: 12px var(--mono); } .quiet-button { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; font: 11px var(--mono); } .quiet-button:hover { background: var(--surface-hover); color: var(--ink); } .graph-workspace { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 680px; border: 1px solid var(--line); background: rgba(17,17,18,.8); } .graph-scroll { overflow: auto; min-width: 0; } #architecture-graph { display: block; min-width: 1160px; width: 100%; height: 680px; } .graph-layer-label { fill: var(--faint); font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; } .graph-layer-rule { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; } .graph-edge { fill: none; stroke: var(--line-strong); stroke-width: 1.25; opacity: .56; vector-effect: non-scaling-stroke; } .graph-edge.reference { stroke: #55545a; stroke-dasharray: 3 5; opacity: .28; } .graph-edge.active { stroke: var(--ink); opacity: .95; stroke-width: 2; } .graph-edge.dimmed { opacity: .06; } .graph-node { cursor: pointer; transition: opacity .18s ease; } .graph-node rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; rx: 5; } .graph-node:hover rect, .graph-node:focus rect { fill: var(--surface-hover); stroke: var(--node-color); } .graph-node.selected rect { stroke: var(--node-color); stroke-width: 2; } .graph-node.dimmed { opacity: .16; } .graph-node .node-kicker { fill: var(--node-color); font: 600 8px var(--mono); letter-spacing: .12em; } .graph-node .node-title { fill: var(--ink); font: 600 13px var(--sans); } .graph-node .node-meta { fill: var(--faint); font: 10px var(--mono); } .graph-node .node-rule { stroke: var(--node-color); stroke-width: 3; } /* Interplay graph: connection pools ⋈ on-device models. Mirrors the System Map node/edge tokens; edge classes emphasize cross-domain `interplay` wiring and de-emphasize the `structure`/`lifecycle` scaffolding. */ /* The interplay graph is a pannable/zoomable canvas: the SVG fills its frame and a viewBox window moves over the content (app.js), so the scroll container clips rather than scrolls and shows a grab cursor. */ #interplay-graph { display: block; width: 100%; height: 72vh; touch-action: none; } #interplay-scroll { overflow: hidden; cursor: grab; } #interplay-scroll.panning { cursor: grabbing; } .graph-hint { margin: 0; padding: 10px 2px 0; color: var(--faint); font: 10px var(--mono); letter-spacing: .04em; } /* Fullscreen: the workspace fills the screen, graph above, inspector below. */ #interplay-workspace:fullscreen { height: 100vh; background: var(--bg); grid-template-rows: minmax(0, 1fr) auto; } #interplay-workspace:fullscreen #interplay-scroll { min-height: 0; } #interplay-workspace:fullscreen #interplay-graph { height: 100%; } .interplay-edge { fill: none; stroke-width: 1.25; vector-effect: non-scaling-stroke; } .interplay-edge.structure { stroke: var(--line-strong); opacity: .5; } .interplay-edge.lifecycle { stroke: #55545a; stroke-dasharray: 3 5; opacity: .4; } .interplay-edge.interplay { stroke: var(--accent); opacity: .8; stroke-width: 1.75; } /* A product surface invoking a queried namespace — the caller perspective. */ .interplay-edge.usage { stroke: #7ec8b0; stroke-dasharray: 5 4; opacity: .55; } /* Feature-module hulls: each product feature is a bounded, labelled region; the shared core is drawn a touch warmer so it reads as the factored-out backbone. */ .interplay-group-rect { fill: rgba(126, 200, 176, .05); stroke: var(--line); stroke-width: 1; } .interplay-group-label { fill: var(--faint); font: 700 11px var(--mono); letter-spacing: .14em; opacity: .65; text-transform: uppercase; } .interplay-group.shared .interplay-group-rect { fill: rgba(160, 160, 200, .07); stroke-dasharray: 6 4; } .interplay-group.shared .interplay-group-label { opacity: .8; } .interplay-edge.active { stroke: var(--ink); opacity: .95; stroke-width: 2.25; } .interplay-edge.dimmed { opacity: .07; } .interplay-node { cursor: grab; transition: opacity .18s ease; } .interplay-node.dragging { cursor: grabbing; } .interplay-node rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; } .interplay-node rect.operation { fill: var(--bg); stroke-dasharray: 3 4; } .interplay-node rect.caller { fill: var(--bg); } /* Queried RPC namespaces / REST endpoints tile into a compact grid, so their labels use the tighter mono face and their meta line shrinks to fit. */ .interplay-node rect.endpoint { fill: var(--bg); } .interplay-node[data-kind="endpoint"] .node-title { fill: var(--ink); font: 600 11px var(--mono); } .interplay-node[data-kind="endpoint"] .node-meta { font-size: 8px; } .interplay-node rect[data-explained="true"] { stroke: var(--node-color); } .interplay-node:hover rect, .interplay-node:focus rect { fill: var(--surface-hover); stroke: var(--node-color); } .interplay-node.selected rect { stroke: var(--node-color); stroke-width: 2; } .interplay-node.dimmed { opacity: .16; } .interplay-node .node-kicker { fill: var(--node-color); font: 600 8px var(--mono); letter-spacing: .1em; } .interplay-node .node-title { fill: var(--ink); font: 600 12px var(--sans); } .interplay-node .node-meta { fill: var(--faint); font: 9px var(--mono); } .interplay-node .node-rule { stroke: var(--node-color); stroke-width: 3; } .inspector { border-top: 1px solid var(--line); background: var(--surface); padding: 26px; overflow: auto; } .inspector-empty { max-width: 680px; color: var(--muted); } .inspector-index { display: block; margin-bottom: 32px; color: var(--line-strong); font: 32px var(--mono); } .inspector h3 { margin: 0 0 12px; font-size: 24px; letter-spacing: -.03em; } .inspector p { color: var(--muted); font-size: 13px; line-height: 1.6; } .inspector-badge { display: inline-block; margin-bottom: 16px; color: var(--component-color); font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; } .inspector-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 22px 0; background: var(--line); border: 1px solid var(--line); } .inspector-metric { padding: 12px 8px; background: var(--bg); } .inspector-metric strong { display: block; font: 16px var(--mono); } .inspector-metric span { color: var(--faint); font: 8px var(--mono); text-transform: uppercase; letter-spacing: .08em; } .inspector-section { margin-top: 24px; } .inspector-section h4 { margin: 0 0 10px; color: var(--faint); font: 600 9px var(--mono); text-transform: uppercase; letter-spacing: .12em; } .chip-list { display: flex; flex-wrap: wrap; gap: 5px; } .chip { max-width: 100%; padding: 5px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font: 9px var(--mono); overflow-wrap: anywhere; } .evidence-list { margin: 0; padding: 0; list-style: none; } .evidence-list li { border-top: 1px solid var(--line); } .evidence-list a { display: block; padding: 8px 0; color: var(--muted); font: 9px/1.4 var(--mono); text-decoration: none; overflow-wrap: anywhere; } .evidence-list a:hover { color: var(--ink); } .relationship { padding: 9px 0; border-top: 1px solid var(--line); } .relationship strong { display: block; color: var(--ink); font-size: 11px; } .relationship span { color: var(--faint); font: 9px var(--mono); } .legend { display: flex; flex-wrap: wrap; gap: 18px; padding: 16px 2px; color: var(--faint); font: 10px var(--mono); } .legend-item { display: flex; align-items: center; gap: 7px; } .legend-swatch { width: 18px; height: 2px; background: var(--legend-color); } .authority-banner { margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--line-strong); border-left: 3px solid var(--foundation); background: var(--surface); color: var(--muted); font: 11px/1.6 var(--mono); } .authority-banner.warning { border-left-color: var(--experience); color: #d8d3ca; } .authority-banner strong { color: var(--ink); } .behavior-content { display: grid; gap: 18px; } .behavior-group { min-width: 0; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .behavior-group > h3 { margin: 0; font-size: 20px; letter-spacing: -.025em; } .group-note, .derivation, .empty-state { margin: 8px 0 0; color: var(--faint); font: 10px/1.6 var(--mono); } .derivation { max-width: 900px; color: var(--muted); } .code-graph-reference { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 2px solid var(--integration); background: var(--bg); color: var(--muted); font: 10px/1.7 var(--mono); overflow-wrap: anywhere; } .behavior-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-top: 18px; } .behavior-row { min-width: 0; padding: 14px; border: 1px solid var(--line); background: var(--bg); } .behavior-row h4 { margin: 0 0 7px; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; } .behavior-meta, .provenance { margin: 0; color: var(--faint); font: 9px/1.55 var(--mono); overflow-wrap: anywhere; } .provenance { margin-top: 8px; } .source-link { color: var(--integration); text-decoration: none; } .source-link:hover { color: var(--ink); text-decoration: underline; } .source-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pocket-section { margin-top: 22px; } .pocket-section > h4 { margin: 0 0 10px; color: var(--muted); font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; } .pocket-section .behavior-row + .behavior-row { margin-top: 8px; } .scenario-sequence { margin: 20px 0 0; padding-left: 32px; } .scenario-sequence li { padding: 0 0 10px 8px; color: var(--faint); font: 11px var(--mono); } .scenario-sequence .behavior-row { color: var(--ink); } .document-workspace { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; } .document-list { position: sticky; top: 72px; display: grid; gap: 2px; } .document-link { min-height: 48px; padding: 12px 14px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--muted); text-align: left; cursor: pointer; font: 12px var(--mono); } .document-link:hover { background: var(--surface); color: var(--ink); } .document-link.active { border-left-color: var(--accent); background: var(--surface); color: var(--ink); } .document { min-width: 0; padding: 40px clamp(22px, 5vw, 64px); border: 1px solid var(--line); background: var(--surface); } .document h1 { margin: 0 0 32px; font-size: clamp(30px, 5vw, 52px); line-height: 1; letter-spacing: -.05em; } .document h2 { margin: 44px 0 14px; font-size: 22px; line-height: 1.15; letter-spacing: -.025em; } .document h3 { margin: 28px 0 10px; font-size: 16px; } .document p, .document li { max-width: 70ch; color: #c6c3be; font-size: 15px; line-height: 1.75; } .document code { padding: 2px 5px; background: var(--bg); color: #d5d0ff; border-radius: 3px; font: 12px var(--mono); } .document strong { color: var(--ink); } .document ul, .document ol { padding-left: 22px; } .document .authority-note { margin-bottom: 28px; color: var(--faint); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .12em; } .inventory-table-wrap { overflow: auto; border: 1px solid var(--line); } .inventory-table { width: 100%; border-collapse: collapse; background: var(--surface); } .inventory-table th { position: sticky; top: 0; padding: 12px 16px; background: var(--bg); color: var(--faint); text-align: left; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .12em; } .inventory-table td { padding: 15px 16px; border-top: 1px solid var(--line); color: var(--muted); font: 11px var(--mono); } .inventory-table tr { cursor: pointer; } .inventory-table tbody tr:hover { background: var(--surface-hover); } .inventory-table .component-name { color: var(--ink); font: 600 13px var(--sans); } .layer-pill { color: var(--layer-color); } footer { display: flex; justify-content: space-between; gap: 24px; padding: 28px clamp(20px, 4vw, 64px); border-top: 1px solid var(--line); color: var(--faint); font: 10px/1.5 var(--mono); } footer p { margin: 0; } footer strong { color: var(--muted); } @media (max-width: 980px) { .topbar-meta code, .topbar-meta > span:not(.status-dot) { display: none; } .intro-row { align-items: start; flex-direction: column; } .inspector { min-height: 300px; } .document-workspace { grid-template-columns: 1fr; gap: 14px; } .document-list { position: static; display: flex; overflow: auto; } .document-link { flex: 0 0 auto; border-left: 0; border-bottom: 2px solid transparent; } .document-link.active { border-bottom-color: var(--accent); } } @media (max-width: 620px) { .topbar { min-height: 72px; } .brand-mark { width: 36px; height: 36px; } .topbar-meta a { font-size: 0; } .topbar-meta a::after { content: "GitHub ↗"; font-size: 11px; } .section-nav { overflow-x: auto; } .nav-item { flex: 0 0 auto; padding: 0 12px; } .view { padding-top: 32px; } .stats { width: 100%; justify-content: space-between; gap: 10px; } .stat { min-width: 0; } .graph-toolbar { align-items: stretch; flex-direction: column; border-bottom: 0; } .select-control { justify-content: space-between; } .select-control select { flex: 1; } .document { padding: 28px 20px; } .behavior-list { grid-template-columns: 1fr; } .behavior-group { padding: 18px; } footer { flex-direction: column; } } /* When a view becomes active its content rises in with a light stagger. Driven by the class toggle app.js already does, so it re-plays on every tab switch and never leaves anything hidden (no persisted opacity:0 state). */ .view.active > * { animation: viewIn .5s cubic-bezier(.22, 1, .36, 1) backwards; } .view.active > *:nth-child(2) { animation-delay: 60ms; } .view.active > *:nth-child(3) { animation-delay: 120ms; } .view.active > *:nth-child(n+4) { animation-delay: 160ms; } @keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }