@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Mono:wght@400;600&family=Kalam:wght@400;700&display=swap");
/* Visualli components. Every color, radius and space is a token from tokens.css. */
:root { --vi-fs-body: 15px; --vi-fs-sm: 13px; --vi-fs-cap: 12px; --vi-lh-body: 22px; --vi-label-scale: 1; color-scheme: light; }
[data-theme$="dark"] { color-scheme: dark; }
[data-scale="lg"] { --vi-fs-body: 17px; --vi-fs-sm: 15px; --vi-fs-cap: 14px; --vi-lh-body: 26px; --vi-label-scale: 1.15; }
[data-type="readable"] { --font-hand: "Atkinson Hyperlegible Next", system-ui, sans-serif; --font-note: "Atkinson Hyperlegible Next", system-ui, sans-serif; --font-display: "Atkinson Hyperlegible Next", system-ui, sans-serif; letter-spacing: 0.01em; }
[data-type="readable"] .node-label, [data-type="readable"] .node-root, [data-type="readable"] .edge-label, [data-type="readable"] .annotation, [data-type="readable"] .signature,
[data-type="readable"] .vi-node__label, [data-type="readable"] .vi-edge__label, [data-type="readable"] .vi-signature__word { font-family: var(--font-ui) !important; font-weight: 700; letter-spacing: 0.02em; font-style: normal; }
body { font-family: var(--font-ui); color: var(--ink); background: var(--canvas); font-size: var(--vi-fs-body); line-height: var(--vi-lh-body); -webkit-font-smoothing: antialiased; }
.vi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vi-icon { flex: none; display: block; }
:where(button, a, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@keyframes vi-spin { to { transform: rotate(360deg); } }
.vi-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: vi-spin .8s linear infinite; flex: none; }

/* Button */
.vi-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: 600 var(--vi-fs-sm)/16px var(--font-ui); letter-spacing: .01em; border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; transition: background var(--duration-instant), border-color var(--duration-instant), transform var(--duration-instant); white-space: nowrap; }
.vi-btn:active:not(:disabled) { transform: translateY(1px); }
.vi-btn:disabled { opacity: .45; cursor: not-allowed; }
.vi-btn--sm { height: 32px; padding: 0 var(--space-3); }
.vi-btn--md { height: 40px; padding: 0 var(--space-4); }
.vi-btn--lg { height: 52px; padding: 0 var(--space-5); font-size: var(--vi-fs-body); border-radius: var(--radius-md); }
.vi-btn--block { width: 100%; }
.vi-btn--primary { background: var(--action); color: var(--on-action); }
.vi-btn--primary:hover:not(:disabled) { background: var(--action-hover); }
.vi-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.vi-btn--secondary:hover:not(:disabled) { background: var(--surface-sunken); }
.vi-btn--ghost { background: transparent; color: var(--ink); }
.vi-btn--ghost:hover:not(:disabled) { background: var(--surface-sunken); }
.vi-btn--danger { background: var(--danger); color: var(--surface); }
[data-theme$="dark"] .vi-btn--danger { color: var(--ink-inverse); }
.vi-btn--danger:hover:not(:disabled) { filter: brightness(.92); }

.vi-iconbtn { display: inline-grid; place-items: center; border-radius: var(--radius-sm); border: 1.5px solid transparent; background: transparent; color: var(--ink); cursor: pointer; transition: background var(--duration-instant); flex: none; }
.vi-iconbtn--sm { width: 32px; height: 32px; }
.vi-iconbtn--md { width: 40px; height: 40px; }
.vi-iconbtn--lg { width: 48px; height: 48px; border-radius: var(--radius-md); }
.vi-iconbtn:hover { background: var(--surface-sunken); }
.vi-iconbtn--surface { background: var(--surface); border-color: var(--line); }
.vi-iconbtn--surface:hover { border-color: var(--line-strong); }
.vi-iconbtn--primary { background: var(--action); color: var(--on-action); border-radius: var(--radius-pill); }
.vi-iconbtn.is-active { background: var(--action); color: var(--on-action); }

/* Field, search */
.vi-field { display: grid; gap: 6px; }
.vi-field__label { font: 600 var(--vi-fs-sm)/16px var(--font-ui); color: var(--ink); }
.vi-field__input { font: 400 var(--vi-fs-body)/var(--vi-lh-body) var(--font-ui); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px var(--space-3); width: 100%; box-sizing: border-box; resize: vertical; }
.vi-field__input::placeholder, .vi-search input::placeholder, .vi-composer__input::placeholder { color: var(--ink-subtle); opacity: 1; }
.vi-field__input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.vi-field__hint { display: flex; gap: 6px; align-items: center; font-size: var(--vi-fs-cap); line-height: 16px; color: var(--ink-muted); }
.vi-field.is-invalid .vi-field__input { border-color: var(--danger); }
.vi-field.is-invalid .vi-field__hint { color: var(--danger); }
.vi-search { display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-muted); border: 1.5px solid transparent; box-sizing: border-box; }
.vi-search:focus-within { border-color: var(--focus); }
.vi-search input { flex: 1; min-width: 0; border: 0; background: none; font: 400 var(--vi-fs-sm)/18px var(--font-ui); color: var(--ink); outline: none; }
.vi-search input::-webkit-search-cancel-button { display: none; }
.vi-search__clear { border: 0; background: none; color: var(--ink-muted); cursor: pointer; display: grid; place-items: center; padding: 4px; border-radius: var(--radius-xs); }

/* Switch & segmented */
.vi-switchrow { display: flex; align-items: center; gap: var(--space-4); justify-content: space-between; }
.vi-switchrow__label { font: 600 var(--vi-fs-sm)/18px var(--font-ui); color: var(--ink); }
.vi-switchrow__desc { font-size: var(--vi-fs-cap); line-height: 16px; color: var(--ink-muted); margin-top: 2px; }
.vi-switch { width: 40px; height: 24px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--surface-sunken); position: relative; cursor: pointer; flex: none; transition: background var(--duration-quick); padding: 0; }
.vi-switch__knob { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--ink-muted); transition: transform var(--duration-quick) var(--ease-bloom), background var(--duration-quick); }
.vi-switch[aria-checked="true"] { background: var(--action); border-color: var(--action); }
.vi-switch[aria-checked="true"] .vi-switch__knob { transform: translateX(16px); background: var(--on-action); }
.vi-switchrow.is-disabled { opacity: .45; }
.vi-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1px solid var(--line); }
.vi-seg__opt { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--ink-muted); font: 600 var(--vi-fs-sm)/16px var(--font-ui); padding: 0 var(--space-3); height: 32px; border-radius: 7px; cursor: pointer; }
.vi-seg--sm .vi-seg__opt { height: 26px; padding: 0 var(--space-2); }
.vi-seg__opt.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); outline: 1px solid var(--line); }
[data-theme^="contrast"] .vi-seg__opt.is-on { outline: 2px solid var(--ink); }

/* Badge, avatar, tooltip */
.vi-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill); font: 600 var(--vi-fs-cap)/16px var(--font-ui); border: 1px solid transparent; white-space: nowrap; }
.vi-badge--neutral { background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--line); }
.vi-badge--new { background: var(--topic-sun); color: var(--node-ink); border-color: var(--topic-sun-ring); }
.vi-badge--success { background: var(--success-soft); color: var(--success); }
.vi-badge--warning { background: var(--warning-soft); color: var(--warning); }
.vi-badge--danger { background: var(--danger-soft); color: var(--danger); }
.vi-badge--info { background: var(--info-soft); color: var(--info); }
[data-theme^="contrast"] .vi-badge { border-color: currentColor; }
.vi-avatar { display: inline-grid; place-items: center; border-radius: 50%; color: var(--node-ink); font-weight: 700; font-family: var(--font-ui); border: 1.5px solid; overflow: hidden; flex: none; box-sizing: border-box; }
.vi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vi-tipwrap { position: relative; display: inline-flex; }
.vi-tip { position: absolute; z-index: var(--z-menu); pointer-events: none; opacity: 0; transition: opacity var(--duration-quick); background: var(--ink); color: var(--ink-inverse); font: 600 var(--vi-fs-cap)/16px var(--font-ui); padding: 6px var(--space-2); border-radius: var(--radius-xs); white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.vi-tip kbd { font: 600 11px/14px var(--font-mono); opacity: .75; }
.vi-tip--top { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.vi-tip--bottom { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.vi-tip--right { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.vi-tip.is-open { opacity: 1; }

/* Menu, dialog, toast */
.vi-menu { min-width: 200px; width: max-content; max-width: 320px; padding: var(--space-1); background: var(--surface-overlay); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); display: grid; z-index: var(--z-menu); animation: vi-pop var(--duration-quick) var(--ease-standard); }
[data-theme^="contrast"] .vi-menu, [data-theme^="contrast"] .vi-dialog, [data-theme^="contrast"] .vi-toast, [data-theme^="contrast"] .vi-composer, [data-theme^="contrast"] .vi-vault, [data-theme^="contrast"] .vi-ctrls { border: 2px solid var(--line-strong); }
@keyframes vi-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.vi-menu__item { display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-2); border: 0; background: none; border-radius: var(--radius-xs); color: var(--ink); font: 400 var(--vi-fs-sm)/18px var(--font-ui); cursor: pointer; text-align: left; }
.vi-menu__item:hover:not(:disabled), .vi-menu__item:focus-visible { background: var(--surface-sunken); outline: none; }
.vi-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.vi-menu__item:disabled { color: var(--ink-subtle); cursor: default; }
.vi-menu__item.is-danger { color: var(--danger); }
.vi-menu__label { flex: 1; }
.vi-menu__item.has-hint { height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; align-items: flex-start; }
.vi-menu__item.has-hint > svg { margin-top: 1px; }
.vi-menu__hint { display: block; font-size: var(--vi-fs-cap); line-height: 16px; color: var(--ink-muted); }
.vi-menu__head { padding: var(--space-2) var(--space-2) var(--space-1); font: 400 11px/14px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.vi-menu__sp { width: 16px; }
.vi-menu kbd { font: 400 11px/14px var(--font-mono); color: var(--ink-subtle); }
.vi-menu__div { height: 1px; background: var(--line); margin: var(--space-1) var(--space-2); }
.vi-scrim { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: var(--z-dialog); padding: var(--space-4); animation: vi-fade var(--duration-base); }
.vi-scrim.is-inline { position: absolute; }
@keyframes vi-fade { from { opacity: 0; } }
.vi-dialog { width: min(440px, 100%); background: var(--surface-overlay); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: var(--space-5); box-sizing: border-box; animation: vi-pop var(--duration-base) var(--ease-standard); }
.vi-dialog__head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); }
.vi-dialog__title { margin: 0; font: 700 22px/28px var(--font-ui); color: var(--ink); }
.vi-dialog__desc { margin: var(--space-2) 0 0; color: var(--ink-muted); font-size: var(--vi-fs-sm); line-height: 20px; }
.vi-dialog__body { margin-top: var(--space-4); }
.vi-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.vi-toast { display: flex; align-items: center; gap: var(--space-3); width: min(420px, 100%); box-sizing: border-box; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); background: var(--surface-overlay); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
.vi-toast__icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.vi-toast--neutral .vi-toast__icon { background: var(--topic-sun); color: var(--node-ink); }
.vi-toast--success .vi-toast__icon { background: var(--success-soft); color: var(--success); }
.vi-toast--warning .vi-toast__icon { background: var(--warning-soft); color: var(--warning); }
.vi-toast--danger .vi-toast__icon { background: var(--danger-soft); color: var(--danger); }
.vi-toast--info .vi-toast__icon { background: var(--info-soft); color: var(--info); }
.vi-toast__text { flex: 1; min-width: 0; }
.vi-toast__title { font: 700 var(--vi-fs-sm)/18px var(--font-ui); color: var(--ink); }
.vi-toast__body { font-size: var(--vi-fs-cap); line-height: 16px; color: var(--ink-muted); margin-top: 2px; }

/* Brand: spectrum, signature, thinking */
.vi-spectrum { display: flex; gap: 0; }
.vi-spectrum--bar { height: var(--vi-sz); border-radius: var(--radius-pill); overflow: hidden; }
.vi-spectrum--bar span { flex: 1; }
.vi-spectrum--dots, .vi-spectrum--letters { gap: calc(var(--vi-sz) * .6); align-items: center; }
.vi-spectrum--dots span, .vi-spectrum--letters span { width: var(--vi-sz); height: var(--vi-sz); border-radius: 50%; }
.vi-signature { position: relative; display: inline-block; white-space: nowrap; }
.vi-signature__word { font-family: var(--font-hand); font-weight: 400; font-style: normal; }
.vi-signature__swash { position: absolute; left: -4%; width: 108%; bottom: -0.2em; height: .3em; overflow: visible; }
.vi-signature__reveal { transform-box: fill-box; transform-origin: left center; }
.vi-signature.is-anim .vi-signature__reveal { transform: scaleX(0); animation: vi-draw-swash var(--duration-reveal) var(--ease-standard) 120ms forwards; }
@keyframes vi-draw-swash { to { transform: scaleX(1); } }
.vi-thinking { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font: 400 var(--vi-fs-sm)/18px var(--font-ui); }
.vi-thinking__tree { flex: none; overflow: visible; }
.vi-thinking__light { transform-box: fill-box; transform-origin: center; animation: vi-twinkle 2.4s ease-in-out infinite; }
.vi-thinking__halo { transform-box: fill-box; transform-origin: center; opacity: 0; animation: vi-halo 2.4s ease-in-out infinite; }
.vi-thinking__branches path, .vi-thinking__roots path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vi-grow var(--duration-reveal) var(--ease-standard) forwards; }
.vi-thinking__roots { opacity: .45; }
.vi-thinking__roots path { animation-duration: var(--duration-base); }
.vi-thinking__trunk { transform-box: fill-box; transform-origin: 50% 100%; animation: vi-trunk var(--duration-base) var(--ease-bloom) both; }
@keyframes vi-grow { to { stroke-dashoffset: 0; } }
@keyframes vi-trunk { from { transform: scaleY(.6); } }
@keyframes vi-twinkle { 0%, 100% { transform: scale(.78); opacity: .55; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes vi-halo { 0%, 100% { transform: scale(.6); opacity: 0; } 50% { transform: scale(1); opacity: .22; } }
.vi-thinking__label { font-family: var(--font-note); font-size: 20px; color: var(--ink-muted); }
[data-type="readable"] .vi-thinking__label { font-family: var(--font-ui); font-size: var(--vi-fs-sm); }

/* Canvas: node */
.vi-node { position: relative; display: inline-grid; place-items: center; border: 0; padding: 0; background: none; color: var(--node-ink); cursor: default; transition: transform var(--duration-base) var(--ease-bloom), opacity var(--duration-base); -webkit-tap-highlight-color: transparent; }
button.vi-node { cursor: pointer; }
.vi-node__svg { position: absolute; inset: 0; overflow: visible; }
.vi-node__body { filter: drop-shadow(var(--vi-node-shadow, 0 6px 14px rgba(24, 33, 64, .10))); }
[data-theme$="dark"] .vi-node__body { --vi-node-shadow: 0 0 22px rgba(255, 255, 255, .10); }
[data-theme^="contrast"] .vi-node__body { filter: none; }
.vi-node__rings { transform-origin: center; transition: transform var(--duration-base) var(--ease-standard); }
@media (hover: hover) { button.vi-node:hover .vi-node__rings { transform: rotate(-2deg) scale(1.015); } button.vi-node:hover { transform: translateY(-2px); } }
.vi-node { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.vi-node.is-selected { transform: translateY(-2px); }
.vi-node.is-selected .vi-node__rings { transform: rotate(-2deg) scale(1.015); }
.vi-node.is-selected .vi-node__body { stroke-width: 4; }
.vi-node:focus-visible { outline: none; }
.vi-node:focus-visible .vi-node__body { stroke: var(--focus); stroke-width: 4; }
.vi-node.is-selected .vi-node__body { stroke: var(--ink); }
.vi-node__label { position: relative; text-align: center; color: var(--node-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: calc(var(--vi-nfs, 22px) * var(--vi-label-scale) * var(--vi-ninv, 1)); line-height: 1.15; padding-top: 2px; }
.vi-node__label.node-root { --vi-nfs: 30px; }
.vi-node--mini .vi-node__label { --vi-nfs: 15px; }
.vi-node.is-dimmed { opacity: 1; }
[data-theme^="focus"] .vi-node.is-dimmed { opacity: .4; }
.vi-map.is-touch .vi-node.is-dimmed { opacity: .6; }
[data-theme^="focus"] .vi-map.is-touch .vi-node.is-dimmed { opacity: .4; }

/* Canvas: edge */
.vi-edge__line { fill: none; stroke: var(--edge); stroke-width: 2.5; stroke-linecap: round; }
.vi-edge.is-dashed .vi-edge__line { stroke-dasharray: 7 7; }
.vi-edge__arrow { fill: none; stroke: var(--edge); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.vi-edge__label { font: 500 calc(18px * var(--vi-inv, 1)) / 1 var(--font-note); fill: var(--edge-label); paint-order: stroke; stroke: var(--canvas); stroke-width: 5px; stroke-linejoin: round; letter-spacing: .01em; }
[data-type="readable"] .vi-edge__label { font-size: calc(14px * var(--vi-inv, 1)); font-weight: 600; }

/* Fact card: a hand-cut sheet with an offset outline in the node's ring color */
.vi-fact { position: relative; width: 300px; box-sizing: border-box; padding: var(--space-4) var(--space-4) var(--space-3); background: var(--surface-overlay); color: var(--ink); border: 2px solid var(--vi-fact-ring); border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px; font: 400 var(--vi-fs-sm)/20px var(--font-ui); z-index: var(--z-card); animation: vi-pop var(--duration-quick) var(--ease-standard); }
.vi-fact { box-shadow: 5px 6px 0 0 var(--vi-fact-fill), 5px 6px 0 2px var(--vi-fact-ring); }
[data-theme^="contrast"] .vi-fact { border-color: var(--ink); }
[data-theme^="contrast"] .vi-fact { box-shadow: none; }
.vi-fact__title { font: 700 22px/26px var(--font-hand); margin-bottom: var(--space-1); }
.vi-fact__body { color: var(--ink); }
.vi-fact__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--line); }
.vi-fact__src { display: inline-flex; gap: 4px; align-items: center; font-size: var(--vi-fs-cap); color: var(--ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi-fact__acts { display: inline-flex; gap: var(--space-3); align-items: center; flex: none; }
.vi-fact__link { color: var(--link); font: 600 var(--vi-fs-cap)/16px var(--font-ui); }
.vi-fact__deeper { display: inline-flex; align-items: center; gap: 2px; border: 0; background: var(--action); color: var(--on-action); font: 600 var(--vi-fs-cap)/16px var(--font-ui); padding: 5px 8px 5px 10px; border-radius: var(--radius-pill); cursor: pointer; }

/* Depth trail */
.vi-trail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; }
.vi-trail li { position: relative; }
.vi-trail li + li::before { content: ""; position: absolute; left: 13px; top: -8px; height: 10px; border-left: 1.5px dashed var(--line-strong); }
.vi-trail button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 8px 4px 5px; border-radius: var(--radius-sm); color: var(--ink-muted); font: 400 var(--vi-fs-cap)/16px var(--font-ui); cursor: pointer; }
.vi-trail button span { display: inline-flex; align-items: center; gap: 4px; }
.vi-trail button:hover:not(:disabled) { background: var(--surface-sunken); color: var(--ink); }
.vi-trail li.is-current button { color: var(--ink); font-weight: 700; font-size: var(--vi-fs-sm); cursor: default; background: var(--surface); box-shadow: var(--shadow-float); }
.vi-trail li.is-current button:disabled { opacity: 1; }

/* Source chip */
.vi-source { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 260px; height: 44px; padding: 0 var(--space-2) 0 6px; border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1px solid var(--line); box-sizing: border-box; }
.vi-source__icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); color: var(--ink); flex: none; border: 1px solid var(--line); }
.vi-source.is-error { border-color: var(--danger); }
.vi-source.is-error .vi-source__icon { color: var(--danger); background: var(--danger-soft); }
.vi-source__text { display: grid; min-width: 0; }
.vi-source__name { font: 600 var(--vi-fs-sm)/16px var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-source__meta { font-size: var(--vi-fs-cap); line-height: 16px; color: var(--ink-muted); white-space: nowrap; }
.vi-source.is-error .vi-source__meta { color: var(--danger); }
.vi-source__x { border: 0; background: none; color: var(--ink-muted); cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-xs); flex: none; }
.vi-source__x:hover { background: var(--surface); color: var(--ink); }

/* Canvas controls */
.vi-ctrls { display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
.vi-ctrls__pct { min-width: 44px; text-align: center; font: 600 var(--vi-fs-cap)/16px var(--font-ui); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.vi-ctrls__div { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

/* Visual map */
.vi-map { position: relative; overflow: hidden; background: var(--canvas); border-radius: inherit; isolation: isolate; }
.vi-map__immersion { position: absolute; inset: 0; opacity: var(--immersion-alpha); transition: background var(--duration-base); z-index: -1; }
.vi-map__world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.vi-map__edges { position: absolute; overflow: visible; pointer-events: none; }
.vi-map__group rect { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 10 6; }
.vi-map__group text { font: 700 22px/1 var(--font-note); fill: var(--ink-muted); }
.vi-map__slot { position: absolute; transform: translate(-50%, -50%); }
.vi-map.is-reveal .vi-map__slot { animation: vi-bloom var(--duration-reveal) var(--ease-bloom) backwards; }
@keyframes vi-bloom { from { opacity: 0; transform: translate(calc(-50% + var(--vi-dx)), calc(-50% + var(--vi-dy))) scale(.55); } }
.vi-map.is-reveal .vi-edge { animation: vi-fade var(--duration-base) var(--ease-standard) backwards; }
.vi-map.is-reveal .vi-edge__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vi-line .5s var(--ease-standard) forwards; animation-delay: inherit; }
.vi-map.is-reveal .vi-edge.is-dashed .vi-edge__line { stroke-dasharray: 7 7; stroke-dashoffset: 0; animation: vi-fade .5s var(--ease-standard) backwards; animation-delay: inherit; }
@keyframes vi-line { to { stroke-dashoffset: 0; } }
.vi-map:not(.is-reveal) .vi-edge__line { stroke-dasharray: none; }
.vi-map:not(.is-reveal) .vi-edge.is-dashed .vi-edge__line { stroke-dasharray: 7 7; }
.vi-map__lens { position: absolute; inset: 0; transform-origin: var(--vi-ox) var(--vi-oy); }
.vi-map.is-diving .vi-map__lens { transform: scale(3.2); opacity: 0; transition: transform var(--duration-zoom) var(--ease-zoom), opacity 160ms 150ms; }
.vi-map.is-surfacing .vi-map__lens { transform: scale(.6); opacity: 0; transform-origin: 50% 50%; transition: transform 220ms var(--ease-zoom), opacity 200ms; }
.vi-map.is-reveal .vi-map__lens { animation: vi-settle 260ms var(--ease-standard); }
@keyframes vi-settle { from { transform: scale(.94); } }
[data-motion="reduced"] .vi-map__lens { animation: none !important; transform: none !important; }
.vi-map__fact { position: absolute; }
.vi-map.is-idle .vi-map__world { transition: transform var(--duration-base) var(--ease-standard); }
/* Movable ideas */
.vi-map.is-editable .vi-node { cursor: grab; touch-action: none; }
.vi-map.is-dragging, .vi-map.is-dragging .vi-node { cursor: grabbing; }
.vi-map__slot.is-dragging { z-index: 5; }
.vi-map__slot.is-dragging .vi-node { transform: scale(1.04); transition: none; }
.vi-map__slot.is-dragging .vi-node__body { filter: drop-shadow(0 14px 28px rgba(24, 33, 64, .22)); }
[data-theme$="dark"] .vi-map__slot.is-dragging .vi-node__body { filter: drop-shadow(0 0 32px rgba(255, 255, 255, .18)); }
[data-theme^="contrast"] .vi-map__slot.is-dragging .vi-node__body { filter: none; stroke: var(--focus); }
.vi-map.is-dragging .vi-edge__label { pointer-events: none; }
.vi-map__hint { position: absolute; left: var(--space-4); right: var(--space-4); margin: 0; text-align: center; color: var(--ink-muted); pointer-events: none; z-index: var(--z-chrome); animation: vi-fade var(--duration-base) var(--ease-standard); }

/* Fact card — shared parts and the touch sheet */
.vi-fact__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.vi-fact__back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 2px 0; margin-bottom: var(--space-1); color: var(--link); font: 600 var(--vi-fs-cap)/16px var(--font-ui); cursor: pointer; }
.vi-term { border: 0; background: none; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }
.vi-fact--sheet { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-width: 560px; margin: 0 auto; max-height: var(--vi-sheet-h, 300px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 2px solid var(--vi-fact-ring); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -6px 0 0 var(--vi-fact-fill), var(--shadow-pop); font-size: var(--vi-fs-body); line-height: var(--vi-lh-body);
  animation: vi-sheet-in var(--duration-base) var(--ease-standard); transition: transform var(--duration-quick) var(--ease-standard), max-height var(--duration-base) var(--ease-standard); }
.vi-fact--sheet.is-expanded { max-height: calc(100% - var(--space-7)); }
.vi-fact--sheet.is-dragging { transition: none; }
@keyframes vi-sheet-in { from { transform: translateY(100%); } }
.vi-fact__grip { position: sticky; top: 0; display: flex; justify-content: center; margin: 0 calc(var(--space-4) * -1); background: var(--surface-overlay); touch-action: none; cursor: grab; z-index: 1; }
.vi-fact__handle { position: relative; width: 64px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; }
.vi-fact__handle::after { content: ""; position: absolute; left: 12px; right: 12px; top: 10px; height: 5px; border-radius: var(--radius-pill); background: var(--line-strong); }
.vi-fact--sheet .vi-fact__title { font-size: calc(24px * var(--vi-label-scale)); line-height: 1.15; padding-top: var(--space-1); }
.vi-fact--sheet .vi-fact__close { margin: 0 calc(var(--space-2) * -1) 0 0; }
.vi-fact--sheet .vi-fact__src { font-size: var(--vi-fs-sm); }
.vi-fact--sheet .vi-fact__deeper { min-height: 44px; padding: 0 var(--space-3) 0 var(--space-4); font-size: var(--vi-fs-sm); }
.vi-fact--sheet .vi-fact__link { font-size: var(--vi-fs-sm); min-height: 44px; display: inline-flex; align-items: center; }
[data-motion="reduced"] .vi-fact--sheet { animation: vi-fade 120ms; }
@media (prefers-reduced-motion: reduce) { .vi-fact--sheet { animation: vi-fade 120ms; } .vi-map.is-idle .vi-map__world { transition: none; } }
.vi-map__trail { position: absolute; top: var(--space-4); left: var(--space-4); z-index: var(--z-chrome); }
.vi-map__ctrls { position: absolute; bottom: var(--space-4); right: var(--space-4); z-index: var(--z-chrome); }
[data-reveal="instant"] .vi-map.is-reveal .vi-map__slot, [data-motion="reduced"] .vi-map.is-reveal .vi-map__slot { animation: vi-fade 120ms backwards; animation-delay: 0ms !important; }
[data-reveal="instant"] .vi-map.is-reveal .vi-edge, [data-reveal="instant"] .vi-map.is-reveal .vi-edge__line, [data-motion="reduced"] .vi-map.is-reveal .vi-edge, [data-motion="reduced"] .vi-map.is-reveal .vi-edge__line { animation: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .vi-map.is-reveal .vi-map__slot { animation: vi-fade 120ms backwards; animation-delay: 0ms !important; } .vi-map.is-reveal .vi-edge, .vi-map.is-reveal .vi-edge__line { animation: none; stroke-dashoffset: 0; } }
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { transition-duration: 1ms !important; }
[data-motion="reduced"] .vi-thinking__light, [data-motion="reduced"] .vi-thinking__trunk { animation: none; }
[data-motion="reduced"] .vi-thinking__halos { display: none; }
[data-motion="reduced"] .vi-thinking__branches path, [data-motion="reduced"] .vi-thinking__roots path { animation: none; stroke-dashoffset: 0; }

/* Composer */
.vi-composer { width: min(720px, 100%); box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: var(--space-2); display: grid; gap: var(--space-2); position: relative; }
.vi-composer:focus-within { border-color: var(--line-strong); }
.vi-composer__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 4px 4px 0; }
.vi-composer__row { display: flex; align-items: flex-end; gap: var(--space-2); }
.vi-composer__plus { position: relative; }
.vi-composer__plus .vi-iconbtn { border-radius: var(--radius-pill); }
.vi-composer__menu { position: absolute; bottom: calc(100% + 8px); left: 0; }
.vi-composer__input { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: none; color: var(--ink); font: 400 var(--vi-fs-body)/var(--vi-lh-body) var(--font-ui); padding: 9px 4px; max-height: 168px; }
.vi-composer__send { width: 40px; height: 40px; border-radius: var(--radius-pill); border: 0; background: var(--action); color: var(--on-action); display: grid; place-items: center; cursor: pointer; flex: none; transition: transform var(--duration-instant) var(--ease-bloom), background var(--duration-instant); }
.vi-composer__send:hover:not(:disabled) { background: var(--action-hover); transform: scale(1.06); }
.vi-composer__send:disabled { background: var(--surface-sunken); color: var(--ink-subtle); cursor: default; }
.vi-composer.is-busy .vi-composer__send:disabled { background: var(--action); color: var(--on-action); }
.vi-composer__hint { font-size: var(--vi-fs-cap); line-height: 16px; color: var(--ink-subtle); padding: 0 var(--space-2) 2px; }

/* Chat turns */
.vi-turn { display: flex; }
.vi-turn--user { justify-content: flex-end; }
.vi-turn__bubble { max-width: 420px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md); font-size: var(--vi-fs-sm); line-height: 20px; box-shadow: var(--shadow-float); }
.vi-turn__receipt { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--surface); border: 1px solid var(--line); padding: 4px 10px 4px 4px; border-radius: var(--radius-pill); box-shadow: var(--shadow-float); color: var(--ink-muted); font-size: var(--vi-fs-sm); line-height: 18px; }
.vi-turn__mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); flex: none; }
.vi-treemark { display: inline-grid; place-items: center; flex: none; line-height: 0; }
.vi-treemark__svg { overflow: visible; }
.vi-turn__undo { display: inline-flex; gap: 4px; align-items: center; border: 0; background: none; color: var(--link); font: 600 var(--vi-fs-cap)/16px var(--font-ui); cursor: pointer; padding: 4px; border-radius: var(--radius-xs); }

/* Vault */
.vi-vault { width: 288px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.vi-vault__head { display: flex; align-items: center; justify-content: space-between; height: 32px; }
.vi-vault__logo img { height: 22px; display: block; }
.vi-logo-dark { display: none !important; }
[data-theme$="dark"] .vi-vault__logo .vi-logo-dark { display: block !important; }
[data-theme$="dark"] .vi-vault__logo .vi-logo-light:not(:only-child) { display: none; }
.vi-vault__brand { font: 400 20px/1 var(--font-display); letter-spacing: .04em; }
.vi-vault__scroll { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0 calc(var(--space-2) * -1); padding: 0 var(--space-2); }
.vi-vault__group { margin: var(--space-3) 0 var(--space-1) var(--space-2); font: 400 12px/16px var(--font-display); letter-spacing: .14em; color: var(--ink-muted); text-transform: uppercase; }
[data-type="readable"] .vi-vault__group { font-family: var(--font-ui); font-weight: 700; letter-spacing: .06em; }
.vi-vault ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.vi-vault__item { position: relative; }
.vi-vault__row { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: 0 40px 0 var(--space-2); border: 0; background: none; border-radius: var(--radius-sm); color: var(--ink); text-align: left; cursor: pointer; font: 400 var(--vi-fs-sm)/18px var(--font-ui); box-sizing: border-box; }
.vi-vault__row:hover, .vi-vault__item.is-menu .vi-vault__row { background: var(--surface-sunken); }
.vi-vault__item.is-active .vi-vault__row { background: var(--surface-sunken); font-weight: 700; box-shadow: inset 3px 0 0 -0px transparent; }
.vi-vault__dot { flex: none; }
.vi-vault__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-vault__meta { font-size: 12px; color: var(--ink-subtle); flex: none; }
.vi-vault__more { position: absolute; right: 4px; top: 4px; opacity: 0; }
.vi-vault__item:hover .vi-vault__more, .vi-vault__item.is-menu .vi-vault__more, .vi-vault__more:focus-within, .vi-vault__item.is-active .vi-vault__more { opacity: 1; }
.vi-vault__item:hover .vi-vault__meta, .vi-vault__item.is-active .vi-vault__meta { visibility: hidden; }
.vi-vault__menu { position: absolute; right: 0; top: 36px; }
.vi-vault__rename { flex: 1; min-width: 0; font: 600 var(--vi-fs-sm)/18px var(--font-ui); color: var(--ink); background: var(--surface); border: 1.5px solid var(--focus); border-radius: var(--radius-xs); padding: 6px 8px; outline: none; }
.vi-vault__empty { color: var(--ink-muted); font-size: var(--vi-fs-sm); padding: var(--space-3) var(--space-2); }
.vi-vault__foot { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.vi-vault__user { flex: 1; display: grid; font: 600 var(--vi-fs-sm)/16px var(--font-ui); min-width: 0; }
.vi-vault__plan { font-weight: 400; font-size: 12px; color: var(--ink-muted); }

/* Comfort panel */
.vi-comfort { display: grid; gap: var(--space-5); }
.vi-comfort__h { font: 700 var(--vi-fs-sm)/18px var(--font-ui); margin-bottom: var(--space-2); color: var(--ink); }
.vi-comfort__pals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.vi-pal { display: grid; gap: 2px; text-align: left; padding: var(--space-3); border-radius: var(--radius-md); border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); }
.vi-pal:hover { border-color: var(--line-strong); }
.vi-pal.is-on { border: 2px solid var(--ink); padding: calc(var(--space-3) - .5px); }
.vi-pal__sw { display: flex; margin-bottom: var(--space-2); background: transparent; }
.vi-pal__sw i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid; margin-right: -6px; }
.vi-pal__t { font: 700 var(--vi-fs-sm)/18px var(--font-ui); }
.vi-pal__d { font-size: var(--vi-fs-cap); line-height: 16px; color: var(--ink-muted); }
.vi-comfort__toggles { gap: var(--space-4); display: grid; }

/* Upvote */
.vi-upvote { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.vi-upvote__btn { display: grid; justify-items: center; gap: 0; width: 48px; padding: 6px 0; border-radius: var(--radius-sm); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 700 var(--vi-fs-sm)/16px var(--font-ui); cursor: pointer; flex: none; transition: transform var(--duration-instant) var(--ease-bloom); }
.vi-upvote__btn:hover { transform: translateY(-1px); }
.vi-upvote__btn.is-on { background: var(--vi-up); border-color: var(--vi-up-ring); color: var(--node-ink); }
.vi-upvote__text { flex: 1; min-width: 0; }
.vi-upvote h3 { margin: 0; font: 700 var(--vi-fs-sm)/18px var(--font-ui); color: var(--ink); }
.vi-upvote p { margin: 2px 0 0; font-size: var(--vi-fs-cap); line-height: 16px; color: var(--ink-muted); }

/* Card */
.vi-card { display: grid; gap: var(--space-2); align-content: start; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); font: 400 var(--vi-fs-sm)/20px var(--font-ui); text-decoration: none; box-sizing: border-box; width: 100%; }
.vi-card--lg { padding: var(--space-5); border-radius: var(--radius-lg); gap: var(--space-3); }
.vi-card--raised { border-color: transparent; box-shadow: var(--shadow-float); }
.vi-card--sunken { background: var(--surface-sunken); border-color: transparent; }
[data-theme^="contrast"] .vi-card { border: 2px solid var(--line-strong); }
.vi-card__media { margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-1); border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; }
.vi-card--lg .vi-card__media { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-1); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.vi-card__media > * { display: block; width: 100%; }
.vi-card__eyebrow { font: 400 12px/16px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.vi-card__title { font: 700 17px/24px var(--font-ui); color: var(--ink); }
.vi-card--lg .vi-card__title { font-size: 22px; line-height: 28px; }
.vi-card__body { color: var(--ink-muted); }
.vi-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.vi-card.is-interactive { cursor: pointer; transition: transform var(--duration-instant) var(--ease-standard), border-color var(--duration-instant), box-shadow var(--duration-instant); }
@media (hover: hover) { .vi-card.is-interactive:hover { border-color: var(--line-strong); transform: translateY(-1px); } .vi-card--raised.is-interactive:hover { box-shadow: var(--shadow-pop); } }

/* ───────── Understanding: SemanticPeek · SemanticAnchor · GoDeeper ───────── */
/* Peek actions: Go deeper (understand) and Step inside (enter the rings) */
.vi-deeper-btn { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 var(--vi-fs-cap)/16px var(--font-ui); padding: 4px 10px 4px 8px; border-radius: var(--radius-pill); cursor: pointer; }
.vi-deeper-btn:hover { background: var(--surface-sunken); }
.vi-deeper-btn.is-primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
.vi-fact--sheet .vi-deeper-btn { min-height: 44px; padding: 0 var(--space-4) 0 var(--space-3); font-size: var(--vi-fs-sm); }
.vi-fact__acts { flex-wrap: wrap; justify-content: flex-end; }
.vi-fact__link { display: inline-flex; align-items: center; gap: 2px; }

/* SemanticAnchor: the term and its definition card */
.vi-anchor { position: relative; display: inline; }
.vi-anchor.is-open .vi-term { background: var(--selection); border-radius: 3px; }
.vi-anchor__pop { position: absolute; left: -12px; top: calc(100% + 6px); z-index: var(--z-menu); display: block; width: max-content; }
.vi-anchor-card { position: relative; display: block; width: min(300px, calc(100vw - 32px)); box-sizing: border-box; padding: var(--space-3) var(--space-4) var(--space-3);
  background: var(--surface-overlay); color: var(--ink); text-align: left; white-space: normal; font: 400 var(--vi-fs-sm)/20px var(--font-ui);
  border: 2px solid var(--vi-fact-ring); border-radius: 12px 16px 10px 14px / 14px 10px 16px 12px; box-shadow: 4px 5px 0 0 var(--vi-fact-fill), 4px 5px 0 2px var(--vi-fact-ring), var(--shadow-pop);
  animation: vi-pop var(--duration-quick) var(--ease-standard); }
.vi-anchor-card.is-in-sheet { width: auto; border: 0; box-shadow: none; padding: 0; animation: none; background: transparent; }
[data-theme^="contrast"] .vi-anchor-card { border-color: var(--ink); box-shadow: none; }
.vi-anchor-card__eyebrow { font: 400 11px/14px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.vi-anchor-card__word { font: 700 20px/24px var(--font-hand); color: var(--ink); margin: 2px 0 var(--space-1); }
.vi-fact--sheet .vi-anchor-card__word { font-size: calc(24px * var(--vi-label-scale)); line-height: 1.15; }
.vi-anchor-card__desc { margin: 0; color: var(--ink); }
.vi-anchor-card__acts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--line); }
.vi-fact--sheet .vi-anchor-card__acts .vi-fact__link { min-height: 44px; }

/* GoDeeper */
.vi-deeper { position: absolute; z-index: var(--z-card); display: flex; flex-direction: column; box-sizing: border-box; background: var(--surface); color: var(--ink); font: 400 var(--vi-fs-sm)/20px var(--font-ui); overflow: hidden; }
.vi-deeper--panel { top: var(--space-4); right: var(--space-4); bottom: var(--space-4); width: 380px; max-width: calc(100% - 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); animation: vi-panel-in var(--duration-base) var(--ease-standard); }
.vi-deeper--sheet { left: 0; right: 0; bottom: 0; max-height: calc(100% - var(--space-7)); max-width: 560px; margin: 0 auto; border-top: 2px solid var(--vi-fact-ring); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -6px 0 0 var(--vi-fact-fill), var(--shadow-pop); animation: vi-sheet-in var(--duration-base) var(--ease-standard); padding-bottom: env(safe-area-inset-bottom, 0px); }
.vi-deeper--stack { inset: 0; border-radius: inherit; animation: vi-fade var(--duration-base) var(--ease-standard); }
[data-theme^="contrast"] .vi-deeper { border: 2px solid var(--line-strong); box-shadow: none; }
@keyframes vi-panel-in { from { opacity: 0; transform: translateX(24px); } }
.vi-deeper__handle { display: block; width: 40px; height: 5px; border-radius: var(--radius-pill); background: var(--line-strong); margin: 10px auto 6px; }
.vi-deeper__head { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--line); }
.vi-deeper--sheet .vi-deeper__head { padding-top: 0; }
.vi-deeper__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.vi-deeper__eyebrow { font: 400 11px/14px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.vi-deeper__title { margin: 2px 0 0; font: 700 calc(26px * var(--vi-label-scale))/1.15 var(--font-hand); color: var(--ink); outline: none; }
[data-type="readable"] .vi-deeper__title, [data-type="readable"] .vi-anchor-card__word { font-family: var(--font-ui); }
.vi-deeper__context { display: flex; align-items: center; gap: 6px; margin-top: var(--space-1); font-size: var(--vi-fs-cap); color: var(--ink-muted); }
.vi-deeper__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vi-fact-fill); box-shadow: inset 0 0 0 1.5px var(--vi-fact-ring); flex: none; }
.vi-deeper__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3) var(--space-3) var(--space-4); }
.vi-facets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.vi-facet { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.vi-facet.is-open { border-color: var(--vi-fact-ring); }
.vi-facet__head { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 48px; padding: 0 var(--space-3); border: 0; background: none; color: var(--ink); font: 600 var(--vi-fs-sm)/18px var(--font-ui); text-align: left; cursor: pointer; border-radius: inherit; }
.vi-facet.is-open .vi-facet__head { background: var(--vi-fact-fill); color: var(--node-ink); border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0; }
.vi-facet__title { flex: 1; }
.vi-facet__state { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-subtle); }
.vi-facet.is-open .vi-facet__state { color: var(--node-ink); }
.vi-facet__chev { transition: transform var(--duration-quick) var(--ease-standard); }
.vi-facet.is-open .vi-facet__chev { transform: rotate(90deg); }
.vi-facet.is-pending .vi-facet__head, .vi-facet.is-loading .vi-facet__head { color: var(--ink-muted); cursor: default; }
.vi-facet.is-pending .vi-facet__head .vi-icon { opacity: .6; }
.vi-facet.is-error .vi-facet__state { color: var(--danger); }
.vi-facet__retry { font: 600 var(--vi-fs-cap)/16px var(--font-ui); }
.vi-facet__body { padding: var(--space-3); color: var(--ink); font-size: var(--vi-fs-body); line-height: var(--vi-lh-body); }
.vi-facet__body p { margin: 0 0 var(--space-2); } .vi-facet__body p:last-child { margin: 0; }
.vi-mapit { position: relative; margin-top: var(--space-4); padding: var(--space-4); padding-top: calc(var(--space-4) + 3px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.vi-mapit__bar { position: absolute; left: 0; right: 0; top: 0; border-radius: 0; }
.vi-mapit__title { font: 700 var(--vi-fs-body)/22px var(--font-ui); }
.vi-mapit__text { margin: 2px 0 var(--space-3); color: var(--ink-muted); }
.vi-mapit__text b { color: var(--ink); }
.vi-mapit__go { height: 44px; }
.vi-mapit__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.vi-mapit__choices { display: grid; gap: var(--space-2); }
.vi-mapit__choice { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-3); text-align: left; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; font: 400 var(--vi-fs-sm)/18px var(--font-ui); }
.vi-mapit__choice:hover { background: var(--surface-sunken); }
.vi-mapit__choice b { display: block; font-weight: 700; }
.vi-mapit__choice span span { color: var(--ink-muted); font-size: var(--vi-fs-cap); }
.vi-mapit__choice .vi-icon { margin-top: 1px; }
.vi-mapit__cancel { justify-self: center; border: 0; background: none; color: var(--ink-muted); font: 600 var(--vi-fs-cap)/16px var(--font-ui); padding: var(--space-2); cursor: pointer; }
[data-motion="reduced"] .vi-deeper, [data-motion="reduced"] .vi-anchor-card { animation: vi-fade 120ms; }
@media (prefers-reduced-motion: reduce) { .vi-deeper, .vi-anchor-card { animation: vi-fade 120ms; } }
.vi-peek .vi-fact__foot { flex-wrap: wrap; row-gap: var(--space-2); }
.vi-peek .vi-fact__src { flex: 1 1 100%; }
.vi-peek .vi-fact__acts { margin-left: auto; }

/* Spotlight from a host (e.g. a source passage) — dims the rest in every palette */
.vi-map.has-highlight .vi-node.is-dimmed { opacity: .35; transition: opacity var(--duration-quick) var(--ease-standard); }
.vi-map.has-highlight .vi-node.is-selected .vi-node__body { stroke: var(--ink); }

/* Pressed toolbar buttons and counts (top-right cluster) */
.vi-btn[aria-pressed="true"] { background: var(--surface-sunken); border-color: var(--line-strong); }
.vi-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); font: 700 11px/1 var(--font-ui); }
.vi-btn[aria-pressed="true"] .vi-count { background: var(--action); color: var(--on-action); }
.vi-toolbar { display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
[data-theme^="contrast"] .vi-toolbar { border: 2px solid var(--line-strong); box-shadow: none; }
.vi-toolbar__div { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

/* SourcesPanel */
.vi-sources__title { margin: 2px 0 0; font: 700 calc(19px * var(--vi-label-scale))/1.25 var(--font-ui); color: var(--ink); outline: none; }
.vi-srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.vi-src { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.vi-src.is-open { border-color: var(--line-strong); }
.vi-src.is-error { border-color: var(--danger); }
.vi-src__head { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-2) var(--space-3); border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; border-radius: inherit; }
.vi-src__head:hover { background: var(--surface-sunken); }
.vi-src__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink); flex: none; border: 1px solid var(--line); }
.vi-src.is-error .vi-src__icon { color: var(--danger); background: var(--danger-soft); }
.vi-src__text { flex: 1; min-width: 0; display: grid; }
.vi-src__name { font: 700 var(--vi-fs-sm)/18px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-src__meta { font-size: var(--vi-fs-cap); line-height: 16px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-src.is-error .vi-src__meta { color: var(--danger); white-space: normal; }
.vi-src__chev { color: var(--ink-subtle); transition: transform var(--duration-quick) var(--ease-standard); flex: none; }
.vi-src.is-open .vi-src__chev { transform: rotate(90deg); }
.vi-src__body { padding: 0 var(--space-3) var(--space-3); border-top: 1px dashed var(--line); }
.vi-src__label { font: 400 11px/14px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin: var(--space-3) 0 var(--space-2); }
.vi-src__note { margin: var(--space-3) 0 0; padding: var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-xs); font: 400 var(--vi-fs-sm)/20px var(--font-ui); color: var(--ink); max-height: 180px; overflow: auto; white-space: pre-wrap; }
.vi-src__img { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--radius-xs); margin-top: var(--space-3); }
.vi-src__empty { color: var(--ink-muted); font-size: var(--vi-fs-sm); margin: var(--space-3) 0; }
.vi-passages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.vi-passage { padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); background: var(--surface-sunken); outline-offset: 2px; transition: background var(--duration-instant); }
.vi-passage:hover, .vi-passage:focus-visible { background: var(--selection); }
.vi-passage__quote { font: 400 var(--vi-fs-sm)/20px var(--font-ui); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vi-passage__loc { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font: 600 11px/18px var(--font-mono); color: var(--ink-muted); vertical-align: 1px; }
.vi-passage__ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.vi-passage__arrow { color: var(--ink-subtle); }
.vi-idea-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px 0 6px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: 600 var(--vi-fs-cap)/16px var(--font-ui); cursor: pointer; }
.vi-idea-chip:hover { border-color: var(--line-strong); }
.vi-idea-chip i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.vi-src__acts { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.vi-src__acts a.vi-btn { text-decoration: none; }
.vi-src__more { position: relative; }
.vi-src__menu { position: absolute; right: 0; bottom: calc(100% + 4px); }
.vi-sources__more { margin-top: var(--space-4); }
@media (pointer: coarse) { .vi-idea-chip { min-height: 36px; } }

/* ───────── Edit mode ───────── */
/* The editing bar: top-center of the canvas */
.vi-map__editbar { position: absolute; left: 50%; transform: translateX(-50%); z-index: var(--z-menu); max-width: calc(100% - 24px); }
.vi-editbar { display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow-pop); white-space: nowrap; animation: vi-pop var(--duration-quick) var(--ease-standard); }
[data-theme^="contrast"] .vi-editbar { border: 2px solid var(--ink); box-shadow: none; }
.vi-editbar .vi-btn--primary { border-radius: var(--radius-pill); }
.vi-editbar__state { display: inline-flex; align-items: center; gap: 6px; font: 700 var(--vi-fs-sm)/18px var(--font-ui); color: var(--ink); padding-right: 4px; }
.vi-editbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--focus); box-shadow: 0 0 0 3px var(--selection); }
.vi-editbar__div { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.vi-editbar.is-pick, .vi-editbar.is-nudge { gap: var(--space-2); padding-left: var(--space-4); }
.vi-editbar__pick { font: 600 var(--vi-fs-sm)/18px var(--font-ui); color: var(--ink); white-space: normal; }
.vi-editbar.is-nudge { color: var(--ink); font: 400 var(--vi-fs-sm)/18px var(--font-ui); }
.vi-editbar.is-nudge > .vi-icon { color: var(--success); }
/* Canvas state while editing: a quiet dot grid says "you can change this" */
.vi-map.is-editing { background-image: radial-gradient(var(--line) 1px, transparent 1.2px); background-size: var(--space-5) var(--space-5); }
.vi-map.is-picking .vi-node { cursor: crosshair; }
.vi-map.is-editing .vi-node.is-selected .vi-node__body { stroke: var(--focus); stroke-width: 4; }

/* Selection bar: the selected construct's verbs */
.vi-selbar { position: absolute; z-index: var(--z-menu); transform: translate(-50%, -100%); display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface-overlay); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); animation: vi-pop var(--duration-quick) var(--ease-standard); }
[data-theme^="contrast"] .vi-selbar { border: 2px solid var(--ink); box-shadow: none; }
.vi-selbar__btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; min-height: 44px; padding: 4px 6px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--ink); font: 600 11px/14px var(--font-ui); cursor: pointer; }
.vi-selbar__btn:hover { background: var(--surface-sunken); }
.vi-selbar__btn.is-danger { color: var(--danger); }
.vi-selbar__div { width: 1px; align-self: stretch; margin: 6px 2px; background: var(--line); }
.vi-map { container-type: inline-size; }
@container (max-width: 560px) { .vi-selbar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .vi-selbar__btn { min-width: 44px; justify-content: center; } }
/* Narrow maps (phones, small embeds): the editing bar sits at the bottom and goes icon-only; names stay for screen readers. */
.vi-map__editbar.is-compact { left: var(--space-3); right: var(--space-3); transform: none; max-width: none; display: flex; justify-content: center; }
.vi-map__editbar.is-compact .vi-editbar { padding-left: 4px; max-width: 100%; box-sizing: border-box; }
.vi-map__editbar.is-compact .vi-editbar.is-pick, .vi-map__editbar.is-compact .vi-editbar.is-nudge { flex: 1; padding-left: var(--space-3); }
.vi-map__editbar.is-compact .vi-editbar.is-nudge > span { flex: 1; min-width: 0; }
.vi-map__editbar.is-compact .vi-editbar__state, .vi-map__editbar.is-compact .vi-btn--ghost > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vi-map__editbar.is-compact .vi-editbar__state + .vi-editbar__div { display: none; }
.vi-map__editbar.is-compact .vi-btn--ghost { width: 40px; padding: 0; }
.vi-map__editbar.is-compact .vi-editbar.is-pick, .vi-map__editbar.is-compact .vi-editbar.is-nudge { white-space: normal; border-radius: var(--radius-md); }

/* Inline editors */
.vi-inline { font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--focus); border-radius: var(--radius-xs); padding: 4px 8px; outline: none; box-shadow: var(--shadow-pop); }
.vi-inline--node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 180px; text-align: center; font: 700 calc(22px * var(--vi-ninv, 1)) / 1.15 var(--font-hand); color: var(--node-ink); background: var(--surface); z-index: 3; }
.vi-map__slot:has(.vi-inline--node) .vi-node__label { visibility: hidden; }
.vi-inline--edge { position: absolute; transform: translate(-50%, -50%); width: 200px; text-align: center; font: 500 18px/1.2 var(--font-note); z-index: var(--z-menu); }
.vi-inline--group { position: absolute; transform: translate(0, -80%); width: 220px; font: 700 18px/1.2 var(--font-note); z-index: var(--z-menu); }
[data-type="readable"] .vi-inline--node, [data-type="readable"] .vi-inline--edge, [data-type="readable"] .vi-inline--group { font-family: var(--font-ui); }

/* Selectable connectors and groups */
.vi-edge__hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; }
.vi-edge__hit:hover + .vi-edge__line { stroke-width: 3.5; }
.vi-edge.is-selected .vi-edge__line, .vi-edge.is-selected .vi-edge__arrow { stroke: var(--focus); stroke-width: 3.5; }
.vi-edge.is-pending .vi-edge__line { stroke-dasharray: 6 6; stroke: var(--focus); }
.vi-edge.is-pending .vi-edge__arrow { stroke: var(--focus); }
.vi-map__group-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.vi-map.is-editing .vi-map__group text { pointer-events: auto; cursor: pointer; }
.vi-map__group.is-selected rect:not(.vi-map__group-hit) { stroke: var(--focus); stroke-width: 2.5; stroke-dasharray: none; }
.vi-map__group.is-selected text { fill: var(--focus); }

/* Summary editor (inside a peek) */
.vi-sumedit { display: grid; gap: var(--space-2); }
.vi-sumedit__input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px; font: 400 var(--vi-fs-sm)/20px var(--font-ui); box-shadow: none; }
.vi-sumedit__warn { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: var(--space-2); border-radius: var(--radius-xs); background: var(--warning-soft); color: var(--warning); font-size: var(--vi-fs-cap); line-height: 16px; }
.vi-sumedit__warn .vi-icon { margin-top: 1px; }
.vi-sumedit__acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.vi-sumedit__hint { margin-right: auto; font-size: var(--vi-fs-cap); color: var(--ink-subtle); }
.vi-map__fact .vi-fact:has(.vi-sumedit) { width: 320px; }

/* Chat tips: transient hints in the chat stack (not history) */
.vi-turn__text { min-width: 0; }
.vi-turn__action { display: inline-flex; align-items: center; gap: 4px; flex: none; border: 0; background: var(--action); color: var(--on-action); font: 600 var(--vi-fs-cap)/16px var(--font-ui); padding: 6px 12px 6px 10px; border-radius: var(--radius-pill); cursor: pointer; min-height: 32px; }
.vi-turn__x { flex: none; margin: -4px -6px -4px 0; }
.vi-turn.is-tip .vi-turn__receipt { animation: vi-pop var(--duration-base) var(--ease-standard); }

/* ───────── ExtensionPanel: Visualli beside the page ───────── */
.vi-ext { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-ui); }
.vi-ext__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface); border-bottom: 1px solid var(--line); min-height: 52px; box-sizing: border-box; }
.vi-ext__brand { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1 var(--font-display); letter-spacing: .12em; color: var(--ink); flex: none; }
.vi-ext__page { flex: 1; min-width: 0; }
.vi-ext__title { font: 700 var(--vi-fs-sm)/18px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-ext__src { display: flex; align-items: center; gap: 4px; font-size: var(--vi-fs-cap); line-height: 16px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; }
.vi-ext__src img { border-radius: 3px; }
.vi-ext__body { position: relative; flex: 1; min-height: 0; }
.vi-ext__body .vi-map { height: 100% !important; }
.vi-ext__state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-2); padding: var(--space-6); text-align: center; }
.vi-ext__state-title { margin: var(--space-2) 0 0; font: 700 17px/24px var(--font-ui); }
.vi-ext__state-text { margin: 0 0 var(--space-2); max-width: 320px; color: var(--ink-muted); font-size: var(--vi-fs-sm); line-height: 20px; }
.vi-ext__err { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); }
@container (max-width: 420px) { .vi-ext__brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.vi-ext { container-type: inline-size; }
@media (prefers-reduced-motion: reduce) { .vi-thinking__light, .vi-thinking__trunk { animation: none; } .vi-thinking__halos { display: none; } .vi-thinking__branches path, .vi-thinking__roots path { animation: none; stroke-dashoffset: 0; } }