@font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/host-grotesk-400.ttf') format('truetype'); }
@font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/host-grotesk-500.ttf') format('truetype'); }
@font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/host-grotesk-600.ttf') format('truetype'); }
@font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/host-grotesk-700.ttf') format('truetype'); }

/* ============================================================
   CREATOR ECONOMY MAP — STYLES
   Daylight product world: cool near-white ground, white surfaces,
   ink type, hairlines, soft layered shadow, one cobalt accent.
   ============================================================ */

:root {
    --font: 'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --bg: oklch(98.3% 0.003 264);
    --surface: #fff;
    --ink: oklch(20% 0.014 264);
    --ink-2: oklch(44% 0.014 264);
    --ink-3: oklch(54% 0.012 264);
    --line: oklch(20% 0.014 264 / 0.09);
    --line-2: oklch(20% 0.014 264 / 0.16);

    --accent: oklch(54% 0.21 262);
    --accent-hover: oklch(47% 0.22 262);
    --accent-soft: oklch(54% 0.21 262 / 0.09);
    --accent-ring: oklch(54% 0.21 262 / 0.4);

    /* Relationship kinds: shown only when a stakeholder is in focus */
    --t-money: oklch(60% 0.15 158);
    --t-content: oklch(54% 0.2 262);
    --t-influence: oklch(66% 0.16 62);
    --t-talent: oklch(56% 0.17 318);

    --shadow-1: 0 1px 1px oklch(20% 0.02 264 / 0.04), 0 1px 3px oklch(20% 0.02 264 / 0.06);
    --shadow-2: 0 1px 2px oklch(20% 0.02 264 / 0.05), 0 6px 16px oklch(20% 0.02 264 / 0.08);
    --shadow-3: 0 2px 4px oklch(20% 0.02 264 / 0.05), 0 16px 40px oklch(20% 0.02 264 / 0.13);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-io: cubic-bezier(0.7, 0, 0.2, 1);

    --bar-h: 56px;
    --panel-w: 432px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
    margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bg);
    overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'tnum' 0;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
svg.ic { display: block; flex: none; }
.chipic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--ink-2); flex: none; }
.toollogo.mini { width: 34px; height: 34px; border-radius: 9px; box-shadow: none; }
.toollogo.mini img { padding: 5px; }
.toollogo.mini.letter { font-size: 15px; }

/* Parts of the page the browser draws, themed */
::selection { background: var(--accent-soft); color: var(--ink); }
input, [contenteditable] { caret-color: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.tnum { font-variant-numeric: tabular-nums; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip-link:focus { left: 8px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-quiet { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: 13.5px; transition: background .15s, color .15s; white-space: nowrap; }
.btn-quiet:hover { background: var(--bg); color: var(--ink); }
.btn-quiet.icon-only { width: 36px; padding: 0; justify-content: center; }
.btn-cta, .btn-solid { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 500; font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: background .15s, transform .15s; }
.btn-cta:hover, .btn-solid:hover { background: oklch(30% 0.02 264); }
.btn-accent { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 46px; margin-top: 18px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; box-shadow: 0 1px 2px oklch(40% 0.2 262 / 0.35), inset 0 1px 0 oklch(100% 0 0 / 0.16); transition: background .15s, transform .15s; }
.btn-accent:hover { background: var(--accent-hover); }
.btn-accent:active { transform: scale(.985); }
.btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 500; font-size: 13.5px; text-decoration: none; transition: background .15s, border-color .15s; }
.btn-line:hover { background: var(--bg); border-color: oklch(20% 0.014 264 / 0.28); }
.btn-line.primary { background: var(--ink); color: #fff; border-color: transparent; }
.btn-line.primary:hover { background: oklch(30% 0.02 264); }

/* ── Top bar ─────────────────────────────────────────────── */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.bar-left, .bar-end { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar-end { gap: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: -0.012em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: #fff; }
.crumbs { display: flex; align-items: center; gap: 2px; margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--line-2); min-width: 0; }
.crumbs:empty { display: none; }
.crumb { height: 30px; padding: 0 8px; border-radius: 8px; color: var(--ink-2); font-weight: 500; font-size: 13.5px; white-space: nowrap; transition: background .15s, color .15s; }
button.crumb:hover { background: var(--bg); color: var(--ink); }
.crumb.here { color: var(--ink); cursor: default; }
.crumb-sep { color: var(--ink-3); display: grid; place-items: center; }
.crumb-ic { display: none; }
.crumb { display: inline-flex; align-items: center; }

.search-wrapper { position: relative; width: 240px; }
.search-wrapper:focus-within { width: 340px; }
.search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; display: grid; }
#search-input { width: 100%; height: 36px; padding: 0 38px 0 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; -webkit-appearance: none; appearance: none; transition: background .15s, border-color .15s, box-shadow .15s; }
#search-input::placeholder { color: var(--ink-3); }
#search-input::-webkit-search-cancel-button { display: none; }
#search-input:hover { border-color: var(--line-2); }
#search-input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font: 500 11px var(--font); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink-3); background: var(--surface); }
.search-clear { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: none; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--ink-3); }
.search-clear:hover { background: var(--bg); color: var(--ink); }
.search-clear.visible { display: grid; }
.search-wrapper:has(.search-clear.visible) .search-kbd, .search-wrapper:focus-within .search-kbd { display: none; }
.search-results { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 64vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-3); padding: 6px; z-index: 60; }
.search-results.open { display: block; }
.sr-item { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; border-radius: 9px; }
.sr-item:hover, .sr-item:focus { background: var(--bg); outline: none; }
.sr-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--bg); color: var(--ink-2); flex: none; }
.sr-text { display: flex; flex-direction: column; min-width: 0; }
.sr-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sub { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-empty { padding: 14px 12px; color: var(--ink-3); font-size: 13.5px; }

.seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; color: var(--ink-2); font-weight: 500; font-size: 13px; transition: background .15s, color .15s, box-shadow .15s; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ── Stage ───────────────────────────────────────────────── */
.stage { position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: 0; }
.canvas-container { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
body.view-list .canvas-container { display: none; }

#graph-svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform .95s var(--ease-io), opacity .5s ease .3s, visibility 0s; }
#graph-svg.panning { cursor: grabbing; }
body.instant #graph-svg, body.instant .tools-view { transition: none !important; }
body.level-deep #graph-svg { transform: scale(12); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .95s var(--ease-io), opacity .4s ease, visibility 0s linear .95s; }

/* Bundles: the resting structure, quiet */
.bundle { transition: opacity .25s; }
.bundle-hit { fill: none; stroke: transparent; stroke-width: 22; cursor: pointer; }
.bundle-path { fill: none; stroke: oklch(20% 0.014 264 / 0.12); stroke-width: 1; pointer-events: none; transition: stroke .2s, stroke-width .2s; }
.bundle:hover .bundle-path { stroke: oklch(20% 0.014 264 / 0.5); stroke-width: 1.6; }
.bundle.dim { opacity: .35; }
.bundle.hidden, .bundle.quiet { display: none; }

/* Edges: appear on focus, coloured by the kind of flow */
.edge { --tc: var(--t-content); transition: opacity .25s; }
.edge.type-money { --tc: var(--t-money); }
.edge.type-content { --tc: var(--t-content); }
.edge.type-influence { --tc: var(--t-influence); }
.edge.type-talent { --tc: var(--t-talent); }
.edge-hit { fill: none; stroke: transparent; stroke-width: 24; cursor: pointer; }
.edge-path { fill: none; stroke: var(--tc); stroke-width: 1.6; stroke-linecap: round; opacity: .85; pointer-events: none; transition: stroke-width .2s, opacity .2s; }
.edge:hover .edge-path, .edge.active .edge-path { opacity: 1; }
.edge:hover .edge-path { stroke-width: 2.4; }
.edge.selected .edge-path { stroke-width: 3; opacity: 1; }
.edge.hidden { display: none; }

/* Stakeholders: white discs, one drawn icon */
.node { cursor: pointer; outline: none; transition: opacity .25s; }
.node-disc { fill: #fff; stroke: var(--line-2); stroke-width: 1; transition: fill .2s, stroke .2s, stroke-width .2s; }
.node-icon { color: var(--ink-2); transition: color .2s; pointer-events: none; }
.node-label { font: 500 12.5px var(--font); fill: var(--ink); pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.node-sub { font: 500 11.5px var(--font); fill: var(--accent); pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.label-short { display: none; font-size: 15px; }
#graph-svg.zoom-far .label-full, #graph-svg.zoom-far .node-sub { display: none; }
#graph-svg.zoom-far .label-short { display: block; }
.node:hover .node-disc, .node.focus .node-disc { stroke: var(--ink); stroke-width: 1.5; }
.node:focus-visible .node-disc { stroke: var(--accent); stroke-width: 2.5; }
.node:hover .node-icon, .node.focus .node-icon { color: var(--ink); }
.node.selected .node-disc { fill: var(--ink); stroke: var(--ink); }
.node.selected .node-icon { color: #fff; }
.node.selected .node-label { font-weight: 600; }
.node.dim { opacity: .3; }

/* ── Floating controls ───────────────────────────────────── */
.dock { position: absolute; left: 50%; bottom: calc(22px + var(--safe-b)); transform: translateX(-50%); z-index: 6; transition: left .5s var(--ease), opacity .3s; }
.pill { display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-2); }
.lens-btn, .pill-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border-radius: 11px; color: var(--ink-2); font-weight: 500; font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.lens-btn:hover, .pill-btn:hover { background: var(--bg); color: var(--ink); }
.lens-btn.active { background: var(--ink); color: #fff; }
.lens-short { display: none; }
.lens-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dc); flex: none; }
.lens-btn.active .lens-dot { box-shadow: 0 0 0 2px oklch(100% 0 0 / 0.9); }
.pill-btn[aria-checked="true"] { background: var(--ink); color: #fff; }
.pill-count { font-variant-numeric: tabular-nums; font-size: 12px; opacity: .7; }
.dock-tools, .dock-brands { display: none; }
body.level-deep .dock-lens { display: none; }
body.level-tools .dock-tools, body.level-brands .dock-brands { display: block; }

.dock-left { position: absolute; left: 20px; bottom: calc(22px + var(--safe-b)); z-index: 7; }
.pill-btn.solo { height: 44px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); border-radius: 15px; padding: 0 16px; color: var(--ink); }
.pill-btn.solo:hover { background: var(--bg); }
.pop { position: absolute; left: 0; bottom: calc(100% + 10px); width: 288px; max-height: min(62vh, 560px); overflow: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-3); transform-origin: bottom left; animation: pop .22s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.pop-title { padding: 10px 10px 6px; font-weight: 600; font-size: 13px; color: var(--ink); }
.pop-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 10px; border-radius: 10px; text-align: left; font-weight: 500; font-size: 14px; }
.pop-item:hover, .pop-item.on { background: var(--bg); }
.pop-item .chipic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--bg); color: var(--ink-2); flex: none; }
.pop-item small { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pop-foot { margin: 6px 4px 2px; padding: 10px 6px 4px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 12.5px; color: var(--ink-3); }
.pop-foot a, .pop-foot button { color: var(--ink-2); font-weight: 500; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

.zoomctl { position: absolute; right: 20px; bottom: calc(22px + var(--safe-b)); z-index: 6; display: flex; flex-direction: column; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-2); transition: right .5s var(--ease); }
.zoom-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--ink-2); transition: background .15s, color .15s; }
.zoom-btn:hover { background: var(--bg); color: var(--ink); }
body.panel-open .zoomctl { right: calc(var(--panel-w) + 20px); }
body.panel-open .dock { left: calc(50% - var(--panel-w) / 2); }

/* ── Info panel ──────────────────────────────────────────── */
.info-panel { position: fixed; top: var(--bar-h); right: 0; bottom: 0; width: var(--panel-w); z-index: 30; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 40px oklch(20% 0.02 264 / 0.06); transform: translateX(104%); transition: transform .5s var(--ease); display: flex; flex-direction: column; }
.info-panel.open { transform: none; }
.sheet-handle { display: none; }
.panel-close { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ink-3); transition: background .15s, color .15s; }
.panel-close:hover { background: var(--bg); color: var(--ink); }
.panel-content { flex: 1; overflow: auto; padding: 26px 28px 28px; overscroll-behavior: contain; }

.panel-head { display: flex; gap: 14px; align-items: flex-start; padding-right: 38px; }
.chipic.lg { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); flex: none; }
.panel-head h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.18; text-wrap: balance; }
.panel-tagline { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.edge-head { flex-direction: column; gap: 12px; }
.edge-pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.edge-node { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 500; font-size: 13.5px; transition: border-color .15s, background .15s; }
.edge-node:hover { border-color: var(--ink); background: var(--bg); }
.edge-node .chipic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--ink-2); }
.edge-arrow { color: var(--ink-3); display: grid; }
.kind { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 13px; color: var(--ink-2); }
.kind i { width: 8px; height: 8px; border-radius: 50%; background: var(--dc); }

.panel-tabs { display: flex; gap: 22px; margin: 22px 0 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.panel-tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; padding: 10px 0 11px; color: var(--ink-3); font-weight: 500; font-size: 14px; white-space: nowrap; transition: color .15s; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); }
.tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px; }
.tab .count { margin-left: 5px; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink-3); }
.panel-body { padding-top: 20px; }
.panel-desc { font-size: 15px; line-height: 1.62; color: var(--ink); text-wrap: pretty; max-width: 66ch; }
/* "My take": the author's voice, set apart from the neutral description */
.take { margin: 18px 0 4px; padding: 14px 16px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); max-width: 66ch; }
.take-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.take-av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.take-t { margin: 0; font-size: 15px; line-height: 1.58; color: var(--ink); text-wrap: pretty; }

.panel-body h4, .list-body h4 { margin: 30px 0 10px; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
h4 .count { margin-left: 6px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }

/* Sourced facts: figure left, sentence and source right */
.facts { margin: 22px 0 0; border-top: 1px solid var(--line); }
.fact { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); position: relative; }
.fact-v { font-size: 21px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fact-t { font-size: 14px; line-height: 1.45; color: var(--ink); }
.fact-s { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.chip-example { background: transparent; }
button.chip-node { cursor: pointer; font-weight: 500; color: var(--ink); transition: border-color .15s, background .15s; padding-left: 9px; }
button.chip-node i { width: 8px; height: 8px; border-radius: 50%; background: var(--tint); flex: none; }
button.chip-node:hover { border-color: var(--ink); background: var(--surface); }
.chip a.ent, a.ent { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color .15s, color .15s; }
a.ent:hover { color: var(--ink); text-decoration-color: var(--ink); }

.action-list { margin: 0; padding: 0; list-style: none; }
.action-list li { position: relative; padding: 5px 0 5px 18px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.action-list li::before { content: ''; position: absolute; left: 3px; top: 13px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }

.lens-note { margin-bottom: 6px; font-size: 13px; color: var(--ink-2); }
.link-btn { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }

.edge-list { border-top: 1px solid var(--line); }
.edge-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; text-align: left; padding: 12px 2px; border-bottom: 1px solid var(--line); transition: background .15s; }
.edge-row:hover { background: var(--bg); }
.edge-row-top { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 14px; }
.edge-row-top .dir { color: var(--ink-3); display: grid; }
.edge-row-top .chipic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--ink-2); }
.edge-row-label { grid-column: 1; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; padding-left: 0; }
.edge-row .kind { grid-column: 2; grid-row: 1; }
.edge-row .kind span { display: none; }

.news-list { border-top: 1px solid var(--line); }
.news-card { display: block; padding: 14px 2px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .15s; }
a.news-card:hover { background: var(--bg); }
.news-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.news-source { color: var(--ink-2); font-weight: 500; }
.news-title { margin-top: 3px; font-size: 14.5px; font-weight: 500; line-height: 1.38; letter-spacing: -0.005em; text-wrap: pretty; }
a.news-card:hover .news-title { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.news-summary { margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

.panel-foot { position: sticky; bottom: -28px; display: flex; justify-content: space-between; gap: 8px; margin: 30px -28px -28px; padding: 12px 28px; background: var(--surface); border-top: 1px solid var(--line); }
.panel-foot .btn-line { flex: 1; }

/* Tools bridges */
.bridge { display: grid; gap: 0; border-top: 1px solid var(--line); }
.bridge-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; font-weight: 500; font-size: 14px; transition: background .15s; }
.bridge-row:hover { background: var(--bg); }
.bridge-row small { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.bridge-row span { display: inline-flex; align-items: center; gap: 10px; }
.cdot { width: 9px; height: 9px; border-radius: 50%; background: var(--cd); flex: none; }

.toollogo { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; flex: none; }
.toollogo img { width: 100%; height: 100%; object-fit: contain; padding: 9px; }
.toollogo.letter { background: var(--bg); color: var(--ink-2); font-weight: 600; font-size: 22px; }
.status { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }
.status.dead { background: oklch(96% 0.012 25); color: oklch(42% 0.1 25); border-color: oklch(85% 0.04 25); }
.epitaph { margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.kv { margin: 20px 0 0; border-top: 1px solid var(--line); }
.kv div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink); }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.btnrow .btn-line { flex: 1 1 auto; }
.src-list { margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; }
.src-list li { padding: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-list a { color: var(--ink-2); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.warn { margin: 16px 0 0; padding: 11px 13px; border-radius: 11px; background: oklch(97.5% 0.02 85); border: 1px solid oklch(88% 0.06 85); font-size: 13px; line-height: 1.5; color: oklch(38% 0.07 70); }

/* ── Tooltip ─────────────────────────────────────────────── */
.edge-tooltip { position: fixed; top: 0; left: 0; z-index: 70; max-width: 300px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-3); font-size: 13px; pointer-events: none; opacity: 0; transition: opacity .12s; }
.edge-tooltip.visible { opacity: 1; }
.tt-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 3px; }
.tt-label { color: var(--ink); line-height: 1.4; }
.tt-hint { color: var(--ink-3); font-size: 12px; margin-top: 4px; }

/* ── Tour ────────────────────────────────────────────────── */
.tour { position: fixed; left: 20px; top: calc(var(--bar-h) + 16px); width: 340px; z-index: 45; padding: 18px 20px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-3); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.tour.open { opacity: 1; transform: none; pointer-events: auto; }
.tour-progress { display: flex; gap: 4px; margin-bottom: 14px; }
.tour-progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--line-2); transition: background .3s; }
.tour-progress span.on { background: var(--ink); }
.tour-title { font-weight: 600; font-size: 16px; letter-spacing: -0.012em; }
.tour-text { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.tour-actions { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.tour-count { margin-left: auto; margin-right: 4px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.toast { position: fixed; left: 50%; bottom: calc(90px + var(--safe-b)); transform: translate(-50%, 8px); padding: 10px 16px; background: var(--ink); color: #fff; font-weight: 500; font-size: 13.5px; border-radius: 999px; box-shadow: var(--shadow-3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--ease); z-index: 80; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Reading (list) view ─────────────────────────────────── */
.list-view { display: none; position: absolute; inset: 0; overflow: auto; padding: 40px 20px calc(60px + var(--safe-b)); background: var(--bg); }
body.view-list .list-view { display: block; }
.list-intro, .list-cards { max-width: 760px; margin: 0 auto; }
.list-intro { margin-bottom: 26px; }
.list-intro h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.list-intro p { margin-top: 10px; color: var(--ink-2); font-size: 15px; max-width: 56ch; }
.list-cards { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-1); overflow: hidden; }
.list-card { border-bottom: 1px solid var(--line); }
.list-card:last-child { border-bottom: 0; }
.list-card summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; transition: background .15s; }
.list-card summary::-webkit-details-marker { display: none; }
.list-card summary:hover { background: var(--bg); }
.list-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.list-title strong { font-size: 16.5px; font-weight: 600; letter-spacing: -0.012em; }
.list-tagline { font-size: 14px; color: var(--ink-2); }
.list-chevron { color: var(--ink-3); transition: transform .25s var(--ease); display: grid; }
.list-card[open] .list-chevron { transform: rotate(180deg); }
.list-body { padding: 4px 20px 24px 80px; }
.list-actions { margin-top: 22px; }

/* ── Tools landscape ─────────────────────────────────────── */
.tools-view { position: absolute; inset: 0; overflow: hidden; background: var(--bg); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; visibility: hidden; opacity: 0; transform: scale(.05); transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform .95s var(--ease-io), opacity .45s ease, visibility 0s linear .95s; }
body.level-tools #tools-view, body.level-brands #brands-view, body.level-platforms #platforms-view { visibility: visible; opacity: 1; transform: none; transition: transform .95s var(--ease-io), opacity .5s ease .12s, visibility 0s; }
.tools-view.drag { cursor: grabbing; }
.tools-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; --inv: 1; }  /* will-change is set from landscape.js only while the camera moves, so it re-renders sharp once it stops */
.cluster { position: absolute; border-radius: 50%; pointer-events: none; --s: 1; --dy: 0px; }
.cluster .disc { position: absolute; inset: 0; border-radius: 50%; background: var(--cbg); border: 1px solid var(--cline); cursor: pointer; pointer-events: auto; transform: scale(var(--s)); transition: transform .6s var(--ease), box-shadow .2s; }
.cluster-label { position: absolute; left: 50%; top: 0; transform: translate(-50%, calc(-100% - 12px + var(--dy))); display: flex; align-items: baseline; gap: calc(8px * var(--inv)); white-space: nowrap; font-weight: 600; font-size: calc(15px * var(--inv)); letter-spacing: -0.01em; color: var(--cink); line-height: 1; pointer-events: auto; z-index: 3; transition: transform .6s var(--ease); }
.tools-world.wrap .cluster-label { flex-wrap: wrap; justify-content: center; align-items: baseline; white-space: normal; width: calc(124px * var(--inv)); text-align: center; line-height: 1.12; row-gap: calc(2px * var(--inv)); }
.cluster-label small { font-size: .82em; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cluster.picked .disc { box-shadow: 0 0 0 2px var(--cink); }
.t { position: absolute; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--tbg); border: 1px solid var(--line); cursor: pointer; padding: 0; pointer-events: auto; transition: width .22s cubic-bezier(.22, .8, .3, 1), height .22s cubic-bezier(.22, .8, .3, 1), margin .22s cubic-bezier(.22, .8, .3, 1), box-shadow .22s ease; }  /* one cheap transition: switching levels must not animate a thousand tiles */
.t img { width: 100%; height: 100%; object-fit: contain; padding: 5px; border-radius: inherit; opacity: 0; transition: opacity .3s; }
.t.has-img { background: #fff; box-shadow: 0 1px 2px oklch(20% 0.02 264 / 0.06); }
.t.has-img img { opacity: 1; }
.t.letter { color: var(--cink); font-weight: 600; font-size: 15px; background: #fff; }
.t:hover { z-index: 5; width: 44px; height: 44px; margin: -4px 0 0 -4px; box-shadow: var(--shadow-2); }
.t:hover::after { content: attr(data-n); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; padding: calc(5px * var(--inv)) calc(9px * var(--inv)); border-radius: 8px; font: 500 calc(12.5px * var(--inv)) var(--font); pointer-events: none; z-index: 9; }
.t.sel { z-index: 4; box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); }
.t.dim { opacity: .12; pointer-events: none; }
.t.dead { display: none; filter: grayscale(1); background: var(--bg); border-style: dashed; }
.t.dead img { opacity: .55; }
.tools-world.show-dead .t.dead { display: grid; }
.tools-world.far .t { border-radius: 50%; border-color: transparent; box-shadow: none; background: var(--tdot); }
.tools-world.far .t img, .tools-world.far .t.letter { visibility: hidden; }
.tools-world.far .t:hover::after { font-size: calc(13px * var(--inv)); }
.tools-world.far .t.dead { background: var(--line-2); }
.tools-hint { position: absolute; left: 50%; bottom: calc(80px + var(--safe-b)); transform: translateX(-50%); padding: 8px 14px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .4s; white-space: nowrap; z-index: 4; }
.tools-hint.on { opacity: .92; }

/* ── Edit mode ───────────────────────────────────────────── */
.edit-bar { display: none; position: fixed; left: 50%; top: calc(var(--bar-h) + 12px); transform: translateX(-50%); z-index: 90; align-items: center; gap: 10px; padding: 7px 8px 7px 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-3); font-size: 13px; white-space: nowrap; }
body.editing .edit-bar { display: flex; }
.edit-badge { font-weight: 600; }
.edit-count, .edit-hint { color: var(--ink-3); }
.edit-bar.has-changes .edit-count { color: oklch(48% 0.14 158); font-weight: 600; }
body.editing .tour { top: calc(var(--bar-h) + 70px); }
.ed { outline: 1px dashed var(--accent-ring); outline-offset: 2px; border-radius: 4px; cursor: text; min-width: 1.5ch; display: inline; transition: background .12s; }
.ed:hover { background: var(--accent-soft); }
.ed:focus { outline: 2px solid var(--accent); background: var(--accent-soft); }
.ed.changed { outline-color: var(--t-money); }
.ed.ed-block { display: block; }
.ed:empty::before { content: attr(data-placeholder); color: var(--ink-3); font-style: italic; }
.ed-rm { color: var(--ink-3); font-size: 15px; line-height: 1; padding: 0 5px; margin-left: 2px; border-radius: 4px; vertical-align: middle; }
.ed-rm:hover { color: oklch(52% 0.2 25); background: oklch(52% 0.2 25 / 0.1); }
.ed-add { display: inline-flex; align-items: center; margin-top: 8px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px dashed var(--line-2); color: var(--ink-2); font-size: 13px; }
.ed-add:hover { color: var(--ink); border-color: var(--accent); }
.chips .ed-add { margin-top: 0; }
.fact .ed-rm { position: absolute; top: 12px; right: 0; }
.news-card.editing { position: relative; }
.news-card.editing .ed-rm { position: absolute; top: 10px; right: 0; }
.news-url { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); word-break: break-all; }
.news-url .ed { color: var(--accent); }
body.editing .action-list li { display: flex; gap: 4px; align-items: flex-start; }
body.editing .action-list li .ed { flex: 1; }
body.editing .zoomctl { right: 20px; }

/* ── Intro: floating icon field ───────────────────────────── */
.splash { display: none; }
html.splash-on .splash { display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden; color: var(--ink); touch-action: none; user-select: none; -webkit-user-select: none; }
html.splash-on body { overflow: hidden; }
.intro-ground { position: absolute; inset: 0; background: var(--bg); transition: opacity .38s ease; }
.intro-field { position: absolute; inset: 0; overflow: hidden; perspective: 1000px; cursor: grab; transition: opacity .36s ease, transform .48s var(--ease); }
.intro-field.dragging { cursor: grabbing; }
.intro-tile { position: absolute; display: grid; place-items: center; background: var(--surface); border-radius: 22%; box-shadow: 0 2px 3px oklch(20% 0.014 264 / .05), 0 12px 24px oklch(20% 0.014 264 / .1); transform-style: preserve-3d; }
.intro-tile img { display: block; width: 78%; height: 78%; object-fit: contain; border-radius: 12%; pointer-events: none; }
.intro-tile.far { box-shadow: 0 2px 8px oklch(20% 0.014 264 / .06); filter: blur(.7px); }
.intro-copy { position: absolute; left: 50%; top: 49%; width: min(740px, 88vw); transform: translate(-50%, -50%); text-align: center; pointer-events: none; transition: opacity .28s ease, translate .38s var(--ease); }
.intro-heading { font-size: clamp(48px, 6.2vw, 88px); font-weight: 600; line-height: .99; letter-spacing: -.04em; text-wrap: balance; }
.intro-heading span { display: block; }
.intro-sub { margin-top: 24px; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.5; color: var(--ink-2); }
.intro-start { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; margin-top: 28px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 600; background: var(--ink); color: var(--surface); pointer-events: auto; transition: background .15s ease, transform .2s var(--ease); }
.intro-start:hover { background: var(--accent); transform: translateY(-2px); }
.intro-start:active { transform: translateY(0); }
.intro-by { margin-top: 20px; font-size: 13px; color: var(--ink-2); }
.intro-skip { position: absolute; top: max(18px, env(safe-area-inset-top)); right: 24px; padding: 10px 14px; min-height: 44px; border-radius: 10px; background: var(--surface); color: var(--ink-2); font-size: 13px; transition: color .15s ease; }
.intro-skip:hover, .intro-motion:hover { color: var(--accent); }
.intro-foot { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 28px; right: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--ink-2); transition: opacity .2s ease; }
.intro-hint, .intro-motion { padding: 10px 12px; background: var(--bg); border-radius: 10px; }
.intro-motion { min-height: 44px; }
.splash.leaving { pointer-events: none; }
.splash.leaving .intro-field { opacity: 0; transform: scale(1.12); }
.splash.leaving .intro-copy { opacity: 0; translate: 0 -8px; }
.splash.leaving .intro-ground, .splash.leaving .intro-skip, .splash.leaving .intro-foot { opacity: 0; }
@media (max-width: 600px) {
    .intro-copy { top: 48%; width: calc(100% - 32px); }
    .intro-heading { font-size: clamp(38px, 10.4vw, 62px); line-height: 1.03; letter-spacing: -.035em; }
    .intro-sub { margin-top: 22px; }
    .intro-start { margin-top: 24px; }
    .intro-foot { left: 6px; right: 6px; font-size: 11px; }
    .intro-skip { right: 12px; top: max(12px, env(safe-area-inset-top)); }
}
@media (max-height: 560px) and (min-width: 601px) {
    .intro-heading { font-size: 44px; }
    .intro-sub { margin-top: 12px; }
    .intro-start { margin-top: 16px; }
    .intro-by { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .intro-field, .intro-copy, .intro-ground, .intro-start { transition: none; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .search-wrapper { width: 190px; }
    .search-wrapper:focus-within { width: 260px; }
    .btn-quiet .lbl, .seg-btn .lbl { display: none; }
    .btn-quiet { width: 36px; padding: 0; justify-content: center; }
    .seg-btn { padding: 0 9px; }
}
@media (max-width: 900px) {
    :root { --bar-h: 52px; }
    .bar { padding: 0 12px; gap: 8px; }
    .brand-name { display: none; }
    .brand-mark { width: 32px; height: 32px; }
    .crumbs { margin-left: 4px; padding-left: 8px; }
    .crumb { padding: 0 6px; font-size: 13px; }
    .btn-cta, .search-kbd { display: none; }
    #tour-btn { display: none; }
    /* Search collapses to an icon and opens over the bar */
    .search-wrapper, .search-wrapper:focus-within { width: 36px; }
    .search-wrapper:focus-within { position: fixed; left: 10px; right: 10px; top: 8px; width: auto; z-index: 70; }
    #search-input { padding: 0; color: transparent; font-size: 16px; cursor: pointer; background: var(--surface); }
    #search-input::placeholder { color: transparent; }
    .search-icon { left: 50%; transform: translate(-50%, -50%); }
    .search-wrapper:focus-within #search-input { padding: 0 38px 0 38px; color: var(--ink); cursor: text; }
    .search-wrapper:focus-within #search-input::placeholder { color: var(--ink-3); }
    .search-wrapper:focus-within .search-icon { left: 11px; transform: translateY(-50%); }
    /* Breadcrumbs keep the way back and the current place */
    .crumbs { max-width: 58vw; overflow: hidden; margin-left: 2px; padding-left: 6px; }
    .crumbs > .crumb:first-child { flex: none; }
    .crumb-txt { display: none; }
    .crumbs > .crumb:first-child .crumb-ic { display: grid; }
    .crumbs > .crumb-sep { display: none; }
    .crumbs > *:nth-child(n+2):not(:last-child) { display: none; }
    .crumb:last-child { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
    .crumb:last-child .crumb-txt, .crumb.here .crumb-txt { display: inline; }
    .bar-end { gap: 4px; }

    .dock { bottom: calc(14px + var(--safe-b)); }
    .dock-lens .pill { max-width: calc(100vw - 20px); overflow-x: auto; scrollbar-width: none; }
    .dock-lens .pill::-webkit-scrollbar { display: none; }
    .lens-btn { padding: 0 8px; gap: 5px; font-size: 12.5px; flex: none; }
    .lens-btn .lens-label { display: none; }
    .lens-btn .lens-short { display: inline; }
    .dock-left { left: 12px; top: 12px; bottom: auto; }
    .pill-btn.solo { height: 40px; padding: 0 13px; border-radius: 13px; }
    .pop { bottom: auto; top: calc(100% + 8px); transform-origin: top left; width: min(300px, calc(100vw - 24px)); }
    .zoomctl { top: 12px; bottom: auto; right: 12px; }
    #zoom-in, #zoom-out { display: none; }
    body.panel-open .zoomctl, body.panel-open .dock, body.panel-open .dock-left { display: none; }
    #graph-svg .label-full, #graph-svg .node-sub { display: none; }
    #graph-svg .label-short { display: block; font-size: 13px; }
    .tools-hint.on { bottom: calc(76px + var(--safe-b)); }
    .panel-foot .btn-line { white-space: nowrap; gap: 5px; padding: 0 6px; min-width: 0; font-size: 13px; }
    .dock-tools .pill-btn .lbl, .dock-brands .pill-btn .lbl { font-size: 13px; }
    .dock-tools .pill-btn:last-child { display: none; }

    /* Bottom sheet */
    .info-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 58%; border-left: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; box-shadow: 0 -16px 48px oklch(20% 0.02 264 / 0.14); transform: translateY(104%); transition: transform .5s var(--ease), height .3s var(--ease); }
    .info-panel.open { transform: none; }
    .info-panel.expanded { height: calc(100% - var(--bar-h) - 12px); }
    .sheet-handle { display: block; width: 100%; height: 28px; flex: none; touch-action: none; }
    .sheet-handle span { display: block; width: 40px; height: 4px; margin: 12px auto 0; border-radius: 3px; background: var(--line-2); }
    .panel-close { top: 10px; right: 10px; }
    .panel-content { padding: 6px 20px calc(24px + var(--safe-b)); }
    .panel-foot { bottom: calc(-24px - var(--safe-b)); margin: 26px -20px calc(-24px - var(--safe-b)); padding: 12px 20px calc(12px + var(--safe-b)); }
    .panel-tabs { position: sticky; top: -6px; background: var(--surface); z-index: 2; margin-left: -20px; margin-right: -20px; padding: 0 20px; }
    .fact { grid-template-columns: 84px 1fr; gap: 12px; }

    .tour { left: 10px; right: 10px; width: auto; top: calc(var(--bar-h) + 62px); }
    body.editing .tour { top: calc(var(--bar-h) + 118px); }
    .edit-bar { flex-wrap: wrap; justify-content: center; white-space: normal; max-width: calc(100vw - 20px); top: calc(var(--bar-h) + 10px); }
    .edit-hint { display: none; }
    .list-body { padding-left: 20px; }

    .splash-loader { --fw: 72px; --fh: 98px; }
    .splash-h1 { font-size: clamp(40px, 13vw, 72px); }
    .splash-lines i:nth-child(1) { left: 25%; }
    .splash-lines i:nth-child(3) { left: 75%; }
    .splash-start { height: 52px; padding: 0 36px; }
    .splash-skip { bottom: auto; top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}
@media (forced-colors: active) {
    .node-disc, .edge-path, .t { forced-color-adjust: none; }
}

/* ── Brands landscape: highlight how a creator gets in ───── */
.dock-brands .pill-btn { gap: 8px; }
.dock-brands .pill-btn.on, .dock-brands .pill-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tools-world[data-filter="open"] .t:not(.a-open), .tools-world[data-filter="pitch"] .t:not(.a-pitch), .tools-world[data-filter="closed"] .t:not(.a-closed) { opacity: .14; filter: grayscale(1); }
@media (max-width: 420px) { .dock-brands .pill-btn { padding: 0 10px; } .dock-brands .pill-count { display: none; } }

/* SEO extension: preserve the map canvas and expose the same reading content. */
.brand-name { font-size: inherit; font-weight: inherit; line-height: 1.2; }
.site-menu { position: relative; font-size: 13px; }
.site-menu summary { cursor: pointer; padding: 10px; }
.site-menu nav { position: absolute; top: 100%; left: 0; min-width: 220px; padding: 10px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-2); }
.site-menu a { display: block; padding: 9px; text-decoration: none; }
.site-menu a:hover { background: var(--bg); }
.map-guide { position: absolute; top: 12px; left: 16px; z-index: 4; width: min(310px, calc(100% - 32px)); color: var(--ink-2); font-size: 13px; }
.map-guide summary { cursor: pointer; width: fit-content; padding: 8px 12px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-1); }
.map-guide div { padding: 16px; margin-top: 6px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-2); }
.map-guide p + p { margin-top: 12px; }
body.view-list .map-guide, body.level-tools .map-guide, body.level-brands .map-guide, body.level-platforms .map-guide { display: none; }
.reading-intro, .reading-footer { max-width: 760px; margin: 0 auto 30px; }
.reading-intro h2, .reading-footer h2 { margin: 24px 0 10px; font-size: 24px; letter-spacing: -.02em; }
.reading-intro p, .reading-footer p { margin: 12px 0; max-width: 70ch; font-size: 15px; color: var(--ink-2); }
.reading-footer { margin-top: 32px; }
.reading-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.list-title h2 { font-size: 16.5px; font-weight: 600; letter-spacing: -.012em; }
html:not(.js) body { overflow: auto; }
html:not(.js) .stage { position: static; padding-top: 80px; }
html:not(.js) .list-view { display: block; position: static; overflow: visible; }
html:not(.js) .canvas-container, html:not(.js) .bar-end, html:not(.js) .splash { display: none; }
@media (max-width: 720px) { .bar-left .brand-name { white-space: normal; max-width: 145px; font-size: 13px; } .site-menu summary { padding: 8px 5px; } }
@media (max-width: 720px) {
    .bar { gap: 6px; padding-inline: 12px; }
    .bar-left .brand { gap: 6px; }
    .bar-left .brand-name { display: block; max-width: 102px; font-size: 12px; }
    .bar-end { gap: 4px; }
    .bar-left .site-menu summary { font-size: 12px; padding-inline: 4px; }
    .map-guide { left: 110px; width: 170px; }
    .map-guide div { position: absolute; left: -94px; width: calc(100vw - 32px); }
}

/* ── Disclosure controls (Guide menu, About this map): a drawn chevron, not the browser's triangle ── */
.site-menu summary, .map-guide summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; }
.site-menu summary::-webkit-details-marker, .map-guide summary::-webkit-details-marker { display: none; }
.site-menu summary::after, .map-guide summary::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; opacity: .65; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.site-menu[open] summary::after, .map-guide[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.site-menu summary { border-radius: 10px; color: var(--ink-2); font-weight: 500; }
.site-menu summary:hover { background: var(--bg); color: var(--ink); }
.map-guide summary { height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-2); color: var(--ink); font-size: 14px; font-weight: 500; }
.map-guide summary:hover { background: var(--bg); }
body.panel-open .map-guide, body.touring .map-guide { display: none; }

/* ── Phones ── */
@media (max-width: 900px) {
    /* Comfortable touch targets in the bar and docks */
    .search-wrapper, .search-wrapper:focus-within { width: 40px; }
    #search-input { height: 40px; }
    .seg-btn { min-width: 38px; height: 36px; }
    #share-btn { width: 40px; height: 40px; }
    .lens-btn { height: 40px; }
    .zoom-btn { width: 44px; height: 44px; }
    .map-guide summary { height: 40px; padding: 0 13px; border-radius: 13px; font-size: 13.5px; }

    /* The tour docks at the bottom and keeps the map visible; the details sheet waits until the tour ends */
    .tour { top: auto; bottom: calc(76px + var(--safe-b)); transform: translateY(8px); }
    body.editing .tour { top: auto; }
    body.touring .info-panel { transform: translateY(104%); }
    body.touring .zoomctl, body.touring .dock-left, body.touring .dock { display: none; }
}
@media (max-width: 1180px) {
    /* Inside a Dive the breadcrumb needs the room; the title stays in the page for screen readers and search */
    body.level-deep .bar-left .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 720px) {
    body.level-deep .bar-left .site-menu { display: none; }
    .bar-left .brand-name { max-width: 118px; font-size: 12.5px; line-height: 1.15; }
}