/* Vana API - quiet, roomy, one accent. */
:root {
  --vn-paper: #fafaf7;
  --vn-sheet: #ffffff;
  --vn-ink: #15151a;
  --vn-ink-2: #3b3b44;
  --vn-mute: #75756e;
  --vn-line: #e7e6df;
  --vn-line-2: #d9d8cf;
  --vn-indigo: #4338ca;
  --vn-indigo-deep: #3730a3;
  --vn-indigo-wash: #eef0fc;
  --vn-good-ink: #1d6b48;
  --vn-bad-ink: #a4281f;
  --vn-bad-wash: #fbefed;
  --vn-good-wash: #edf6f1;
  --vn-code-bg: #f1f0ea;
  --vn-serif: "Instrument Serif", "Songti SC", serif;
  --vn-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --vn-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --vn-r: 14px;
  --vn-gap: clamp(4.5rem, 9vw, 8rem);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --vn-paper: #0e0e11;
    --vn-sheet: #16161b;
    --vn-ink: #ecebe6;
    --vn-ink-2: #c9c8c1;
    --vn-mute: #94938c;
    --vn-line: #26262d;
    --vn-line-2: #33333b;
    --vn-indigo: #8b8ff8;
    --vn-indigo-deep: #a5a8ff;
    --vn-indigo-wash: #1c1d36;
    --vn-good-ink: #6fd3a0;
    --vn-bad-ink: #f08f86;
    --vn-bad-wash: #2a1716;
    --vn-good-wash: #13261c;
    --vn-code-bg: #1b1b21;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--vn-paper); color: var(--vn-ink); font: 400 17px/1.65 var(--vn-sans); }
a { color: var(--vn-indigo); text-decoration: none; }
a:where(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }
code, pre { font-family: var(--vn-mono); font-size: 0.88em; }
code { background: var(--vn-code-bg); padding: 0.1em 0.4em; border-radius: 6px; word-break: break-all; }
img, svg { max-width: 100%; }

.vn-wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.vn-narrow { width: min(520px, 100% - 2.5rem); }
.vn-main { min-height: 60vh; }

/* bar */
.vn-bar { border-bottom: 1px solid var(--vn-line); background: var(--vn-paper); position: sticky; top: 0; z-index: 20; }
.vn-bar-in { display: flex; align-items: center; gap: 2rem; min-height: 68px; flex-wrap: wrap; }
.vn-brand { display: inline-flex; align-items: center; gap: 0.5rem; font: 400 1.6rem/1 var(--vn-serif); color: var(--vn-ink); letter-spacing: -0.01em; }
.vn-brand:hover { text-decoration: none; }
.vn-brand-api { font: 500 0.7rem/1 var(--vn-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--vn-mute); margin-left: 0.15rem; }
.vn-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--vn-indigo); display: inline-block; }
.vn-nav { display: flex; gap: 1.6rem; flex: 1; }
.vn-nav a { color: var(--vn-ink-2); font-size: 0.95rem; }
.vn-nav a.vn-here { color: var(--vn-ink); box-shadow: inset 0 -1px 0 var(--vn-ink); }
.vn-nav a:hover { text-decoration: none; color: var(--vn-ink); }
.vn-side { display: flex; align-items: center; gap: 1rem; font-size: 0.92rem; }
.vn-who { color: var(--vn-mute); }
.vn-tag { font-style: normal; font-size: 0.72rem; border: 1px solid var(--vn-line-2); border-radius: 99px; padding: 0.05rem 0.45rem; }
.vn-inline { display: inline; margin: 0; }

.vn-lang { position: relative; }
.vn-lang summary { list-style: none; cursor: pointer; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--vn-mute); border: 1px solid var(--vn-line-2); border-radius: 99px; padding: 0.2rem 0.65rem; }
.vn-lang summary::-webkit-details-marker { display: none; }
.vn-lang-list { position: absolute; right: 0; top: calc(100% + 0.5rem); background: var(--vn-sheet); border: 1px solid var(--vn-line); border-radius: 12px; padding: 0.4rem; display: grid; min-width: 9rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); }
.vn-lang-list a { color: var(--vn-ink-2); padding: 0.35rem 0.7rem; border-radius: 8px; }
.vn-lang-list a.vn-on, .vn-lang-list a:hover { background: var(--vn-indigo-wash); color: var(--vn-ink); text-decoration: none; }

/* buttons */
.vn-pill, .vn-ghost, .vn-quiet { font: 500 0.95rem/1 var(--vn-sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: 99px; text-decoration: none; }
.vn-pill { background: var(--vn-indigo); color: #fff; border: 1px solid var(--vn-indigo); padding: 0.7rem 1.3rem; }
.vn-pill:hover { background: var(--vn-indigo-deep); text-decoration: none; }
@media (prefers-color-scheme: dark) { .vn-pill { color: #0e0e11; } }
.vn-pill-lg { padding: 0.95rem 1.7rem; font-size: 1rem; }
.vn-ghost { background: transparent; color: var(--vn-ink); border: 1px solid var(--vn-line-2); padding: 0.7rem 1.2rem; }
.vn-ghost:hover { border-color: var(--vn-ink); text-decoration: none; }
.vn-quiet { background: none; border: 0; color: var(--vn-ink-2); padding: 0.2rem 0.1rem; }
.vn-quiet:hover { color: var(--vn-ink); text-decoration: underline; }
.vn-danger { color: var(--vn-bad-ink) !important; }
.vn-pill:disabled, .vn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }
.vn-dotsep::before { content: "\00b7"; margin: 0 0.45rem; color: var(--vn-line-2); }
.vn-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; margin: 1.8rem 0 0; }
.vn-arrow::after { content: " →"; }

/* type */
.vn-display { font: 400 clamp(3rem, 7.4vw, 6rem)/1.02 var(--vn-serif); letter-spacing: -0.025em; margin: 0.4rem 0 1.6rem; }
.vn-display-sm { font: 400 clamp(2.3rem, 5vw, 3.8rem)/1.06 var(--vn-serif); letter-spacing: -0.02em; margin: 0 0 1rem; }
.vn-soft { color: var(--vn-mute); font-style: italic; }
.vn-h1 { font: 400 2.4rem/1.1 var(--vn-serif); margin: 0 0 1.6rem; letter-spacing: -0.01em; }
.vn-h2 { font: 400 clamp(1.9rem, 3.4vw, 2.6rem)/1.12 var(--vn-serif); margin: 0 0 1.6rem; letter-spacing: -0.015em; }
.vn-h3 { font: 600 1rem/1.4 var(--vn-sans); margin: 0 0 0.9rem; }
.vn-lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--vn-ink-2); max-width: 40rem; margin: 0 0 1rem; }
.vn-lead-sm { color: var(--vn-ink-2); max-width: 44rem; margin: -0.6rem 0 2rem; }
.vn-mute { color: var(--vn-mute); }
.vn-meta { color: var(--vn-mute); font-size: 0.85rem; margin: 0 0 0.4rem; }
.vn-meta a { color: var(--vn-mute); }
.vn-aside { color: var(--vn-mute); font-size: 0.92rem; margin-top: 1.4rem; }
.vn-unit { color: var(--vn-mute); font-size: 0.82rem; margin-top: 0.8rem; }
.vn-empty { color: var(--vn-mute); padding: 2rem 0; }
.vn-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* hero */
.vn-hero { padding: clamp(4rem, 10vw, 8.5rem) 0 3rem; }
.vn-kicker { display: inline-block; font-size: 0.85rem; color: var(--vn-indigo); background: var(--vn-indigo-wash); padding: 0.3rem 0.8rem; border-radius: 99px; margin: 0; }
.vn-hook { font-size: 1.05rem; margin: 0.6rem 0 0; color: var(--vn-ink); }
.vn-hook::before { content: ""; display: inline-block; width: 1.6rem; height: 1px; background: var(--vn-ink); vertical-align: middle; margin-right: 0.7rem; }
.vn-badges { list-style: none; padding: 0; margin: 2.8rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; color: var(--vn-mute); font-size: 0.9rem; }
.vn-badges li::before { content: "·"; margin-right: 0.5rem; color: var(--vn-line-2); }
.vn-badges li:first-child::before { content: none; }
.vn-badge-gift { color: var(--vn-indigo); }

.vn-term-wrap { margin-top: 1rem; }
.vn-term { margin: 0; background: #121216; color: #e6e5df; border-radius: 18px; overflow: hidden; border: 1px solid #23232a; }
.vn-term-top { display: flex; gap: 0.4rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid #23232a; }
.vn-term-top span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #34343c; }
.vn-term pre { margin: 0; padding: 1.4rem 1.5rem; font-size: 0.9rem; line-height: 1.85; overflow-x: auto; white-space: pre; }
.vn-c { color: #8b8ff8; }
.vn-ok { color: #6fd3a0; }
.vn-term figcaption { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1.5rem 1.3rem; }
.vn-term figcaption span { font-size: 0.75rem; color: #a3a29b; border: 1px solid #2c2c33; border-radius: 99px; padding: 0.15rem 0.6rem; }

.vn-band { margin-top: var(--vn-gap); border-top: 1px solid var(--vn-line); border-bottom: 1px solid var(--vn-line); }
.vn-assure { list-style: none; margin: 0; padding: 1.4rem 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; font-size: 0.9rem; color: var(--vn-ink-2); }
.vn-figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: var(--vn-gap); }
.vn-figures b { display: block; font: 400 3rem/1 var(--vn-serif); margin-bottom: 0.5rem; }
.vn-figures span { color: var(--vn-mute); font-size: 0.9rem; }

.vn-block { margin-top: var(--vn-gap); }
.vn-quiet-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem 2.2rem; }
.vn-quiet-list h3, .vn-three h3, .vn-steps h3 { font: 600 1.02rem/1.4 var(--vn-sans); margin: 0 0 0.4rem; }
.vn-quiet-list p, .vn-three p, .vn-steps p { margin: 0; color: var(--vn-ink-2); font-size: 0.95rem; }
.vn-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.vn-num-mark { display: block; font: 400 1.1rem/1 var(--vn-serif); color: var(--vn-indigo); margin-bottom: 1.2rem; }
.vn-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; counter-reset: vnstep; }
.vn-steps li { border-top: 1px solid var(--vn-ink); padding-top: 1.2rem; counter-increment: vnstep; }
.vn-steps li::before { content: counter(vnstep); font: 400 2.2rem/1 var(--vn-serif); display: block; margin-bottom: 0.8rem; }
.vn-tools { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.vn-tools li { border: 1px solid var(--vn-line-2); border-radius: 99px; padding: 0.45rem 1rem; font-size: 0.92rem; background: var(--vn-sheet); }
.vn-close { margin: var(--vn-gap) auto; text-align: center; padding: clamp(3rem, 7vw, 5rem) 1rem; border-top: 1px solid var(--vn-line); }
.vn-close p { color: var(--vn-ink-2); margin: 0 auto 2rem; max-width: 34rem; }

/* tables */
.vn-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vn-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.vn-table th, .vn-table td { text-align: left; padding: 0.85rem 0.8rem; border-bottom: 1px solid var(--vn-line); vertical-align: top; }
.vn-table thead th { font-weight: 500; color: var(--vn-mute); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom-color: var(--vn-line-2); }
.vn-tight th, .vn-tight td { padding: 0.55rem 0.6rem; font-size: 0.88rem; }
.vn-vs tbody th { font-weight: 500; width: 22%; }
.vn-vs td:last-child { color: var(--vn-ink); }
.vn-vs td:nth-child(2) { color: var(--vn-mute); }
.vn-id { font-size: 0.8rem; background: none; padding: 0; color: var(--vn-mute); }
.vn-dim td { opacity: 0.5; }
.vn-minus { color: var(--vn-bad-ink); }
.vn-plus { color: var(--vn-good-ink); }

/* passes */
.vn-shelf { margin-bottom: 3rem; }
.vn-shelf-name { font: 500 0.8rem/1 var(--vn-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vn-mute); margin: 0 0 1.2rem; }
.vn-plan-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.vn-plan { background: var(--vn-sheet); border: 1px solid var(--vn-line); border-radius: var(--vn-r); padding: 1.6rem; display: flex; flex-direction: column; }
.vn-plan h3 { font: 400 1.5rem/1.15 var(--vn-serif); margin: 0 0 0.9rem; }
.vn-plan-cost { margin: 0; }
.vn-plan-cost b { font: 400 2rem/1 var(--vn-serif); }
.vn-plan-cost span { color: var(--vn-mute); font-size: 0.88rem; }
.vn-plan-was { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--vn-mute); }
.vn-plan-was span { color: var(--vn-indigo); }
.vn-plan-note { color: var(--vn-ink-2); font-size: 0.88rem; margin: 0.8rem 0 1.2rem; flex: 1; }
.vn-plan-buy { margin-top: auto; }
.vn-plan-buy .vn-pill, a.vn-plan-buy { width: 100%; }
.vn-facts { margin: 1.1rem 0 0; display: grid; gap: 0.35rem; }
.vn-facts div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; border-bottom: 1px dashed var(--vn-line); padding-bottom: 0.35rem; }
.vn-facts dt { color: var(--vn-mute); }
.vn-facts dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.vn-facts-wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.5rem 2rem; }
.vn-rules { color: var(--vn-ink-2); font-size: 0.92rem; padding-left: 1.2rem; max-width: 52rem; }
.vn-rules li { margin-bottom: 0.45rem; }

.vn-mine { border: 1px solid var(--vn-line); border-radius: var(--vn-r); padding: 1.4rem; margin-bottom: 1.6rem; background: var(--vn-sheet); }
.vn-mine-row + .vn-mine-row { border-top: 1px solid var(--vn-line); margin-top: 1rem; padding-top: 1rem; }
.vn-mine-head { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.6rem; }
.vn-mine-line { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1rem; align-items: center; font-size: 0.86rem; margin-top: 0.35rem; }
.vn-meter { height: 6px; background: var(--vn-line); border-radius: 99px; overflow: hidden; display: block; }
.vn-meter span { display: block; height: 100%; background: var(--vn-indigo); border-radius: 99px; }
.vn-chip { font-style: normal; font-size: 0.72rem; color: var(--vn-indigo); background: var(--vn-indigo-wash); border-radius: 99px; padding: 0.1rem 0.5rem; }
.vn-soon { color: var(--vn-bad-ink); font-weight: 600; font-size: 0.86rem; }

/* docs */
.vn-page-head { padding: clamp(3.5rem, 8vw, 6rem) 0 1rem; }
.vn-base { font-size: 0.95rem; }
.vn-doc section { margin: 3.5rem 0; max-width: 48rem; }
.vn-code { position: relative; background: var(--vn-code-bg); border: 1px solid var(--vn-line); border-radius: 12px; padding: 1.1rem 1.2rem; overflow-x: auto; line-height: 1.7; }
.vn-code code { background: none; padding: 0; word-break: normal; white-space: pre; }
.vn-copy, .vn-copy-inline { cursor: pointer; border: 1px solid var(--vn-line-2); background: var(--vn-sheet); color: var(--vn-mute); border-radius: 8px; font-size: 0.8rem; line-height: 1; padding: 0.35rem 0.5rem; }
.vn-copy { position: absolute; top: 0.6rem; right: 0.6rem; }
.vn-copy:hover, .vn-copy-inline:hover { color: var(--vn-ink); border-color: var(--vn-ink); }
.vn-copied { color: var(--vn-good-ink) !important; border-color: var(--vn-good-ink) !important; }
.vn-callout { border-left: 2px solid var(--vn-indigo); padding: 0.2rem 0 0.2rem 1rem; color: var(--vn-ink-2); font-size: 0.95rem; }
.vn-pairs { display: grid; gap: 0.4rem; margin: 1.2rem 0; }
.vn-pairs div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; }
.vn-pairs dt { color: var(--vn-mute); font-family: var(--vn-mono); font-size: 0.86rem; }
.vn-pairs dd { margin: 0; }
.vn-plain { padding-left: 1.2rem; color: var(--vn-ink-2); }
.vn-plain li { margin-bottom: 0.4rem; }

/* notes */
.vn-shelves { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 2.5rem; }
.vn-shelves a { border: 1px solid var(--vn-line-2); border-radius: 99px; padding: 0.35rem 0.9rem; color: var(--vn-ink-2); font-size: 0.88rem; }
.vn-shelves a span { color: var(--vn-mute); margin-left: 0.3rem; }
.vn-shelves a.vn-on { background: var(--vn-ink); color: var(--vn-paper); border-color: var(--vn-ink); }
.vn-shelves a.vn-on span { color: inherit; opacity: 0.7; }
.vn-shelves a:hover { text-decoration: none; border-color: var(--vn-ink); }
.vn-notes { list-style: none; padding: 0; margin: 0; }
.vn-notes li { padding: 1.6rem 0; border-bottom: 1px solid var(--vn-line); }
.vn-notes h2 { font: 400 1.7rem/1.2 var(--vn-serif); margin: 0.2rem 0 0.5rem; }
.vn-notes h2 a { color: var(--vn-ink); }
.vn-notes p:last-child { margin: 0; color: var(--vn-ink-2); max-width: 46rem; }
.vn-nudge { margin: 3.5rem 0; padding: 2rem; border: 1px solid var(--vn-line); border-radius: var(--vn-r); display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--vn-sheet); }
.vn-nudge p { margin: 0; max-width: 32rem; }
.vn-read { max-width: 46rem; padding: clamp(3rem, 7vw, 5rem) 0; }
.vn-prose { font-size: 1.06rem; line-height: 1.75; }
.vn-prose h2 { font: 400 1.8rem/1.2 var(--vn-serif); margin: 2.4rem 0 0.8rem; }
.vn-prose h3 { font: 600 1.05rem/1.4 var(--vn-sans); margin: 1.8rem 0 0.6rem; }
.vn-prose blockquote { border-left: 2px solid var(--vn-line-2); margin: 1.2rem 0; padding-left: 1rem; color: var(--vn-ink-2); }
.vn-related ul { padding-left: 1.1rem; }

/* forms */
.vn-form { display: grid; gap: 1.1rem; margin: 2rem 0 0; }
.vn-form label { display: grid; gap: 0.4rem; font-size: 0.88rem; color: var(--vn-ink-2); }
.vn-form small { color: var(--vn-mute); }
.vn-form input, .vn-form select, .vn-form textarea { font: inherit; font-size: 1rem; color: var(--vn-ink); background: var(--vn-sheet); border: 1px solid var(--vn-line-2); border-radius: 10px; padding: 0.7rem 0.85rem; width: 100%; }
.vn-form input:focus, .vn-form select:focus, .vn-form textarea:focus { outline: 2px solid var(--vn-indigo); outline-offset: 1px; border-color: transparent; }
.vn-form button { justify-self: start; }
.vn-form-row { grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); align-items: end; margin-top: 0.6rem; }
.vn-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.8rem; }
.vn-check { display: flex !important; align-items: center; gap: 0.5rem; }
.vn-check input { width: auto !important; }
.vn-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vn-gift { color: var(--vn-indigo); background: var(--vn-indigo-wash); border-radius: 10px; padding: 0.7rem 1rem; font-size: 0.95rem; }

.vn-notice { margin: 1.4rem auto 0; width: min(1120px, 100% - 2.5rem); padding: 0.85rem 1.1rem; border-radius: 10px; font-size: 0.95rem; }
.vn-pane .vn-notice { width: auto; margin: 0 0 1.2rem; }
.vn-notice-good { background: var(--vn-good-wash); color: var(--vn-good-ink); }
.vn-notice-bad { background: var(--vn-bad-wash); color: var(--vn-bad-ink); }
.vn-why { opacity: 0.8; }

/* space (console) */
.vn-space { display: grid; grid-template-columns: 200px 1fr; gap: 3rem; padding: 3rem 0 5rem; }
.vn-rail nav { display: grid; gap: 0.15rem; position: sticky; top: 90px; }
.vn-rail a { color: var(--vn-ink-2); padding: 0.5rem 0.8rem; border-radius: 10px; font-size: 0.94rem; display: flex; justify-content: space-between; align-items: center; }
.vn-rail a.vn-here { background: var(--vn-sheet); color: var(--vn-ink); box-shadow: inset 0 0 0 1px var(--vn-line); }
.vn-rail a:hover { text-decoration: none; color: var(--vn-ink); }
.vn-count { background: var(--vn-indigo); color: #fff; font-size: 0.72rem; border-radius: 99px; padding: 0.05rem 0.45rem; }
.vn-pane { min-width: 0; }
.vn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.vn-stat { border: 1px solid var(--vn-line); border-radius: var(--vn-r); padding: 1.2rem; background: var(--vn-sheet); }
.vn-stat span { display: block; color: var(--vn-mute); font-size: 0.82rem; margin-bottom: 0.4rem; }
.vn-stat b { font: 400 1.9rem/1.1 var(--vn-serif); font-variant-numeric: tabular-nums; }
.vn-warn b { color: var(--vn-bad-ink); }
.vn-good b, .vn-good { color: var(--vn-good-ink); }
.vn-card { border: 1px solid var(--vn-line); border-radius: var(--vn-r); padding: 1.5rem; background: var(--vn-sheet); margin-bottom: 1.6rem; }
.vn-card-soft { background: var(--vn-indigo-wash); border-color: transparent; }
.vn-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; }
.vn-two .vn-card { margin-bottom: 1.6rem; }
.vn-big { font: 400 2.6rem/1 var(--vn-serif); margin: 0.2rem 0 0.6rem; }
.vn-ticks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; color: var(--vn-mute); font-size: 0.85rem; margin: 1rem 0 0; }
.vn-ticks li::before { content: "✓ "; color: var(--vn-good-ink); }
.vn-chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 0.5rem; }
.vn-chart span { flex: 1; background: var(--vn-indigo); opacity: 0.8; border-radius: 4px 4px 0 0; min-height: 2px; }
.vn-chart span { position: relative; }
.vn-chart span:hover { opacity: 1; }
.vn-chart span:hover::after { content: attr(data-vn-day) "  " attr(data-vn-sum); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.75rem; background: var(--vn-ink); color: var(--vn-paper); padding: 0.2rem 0.5rem; border-radius: 6px; }
.vn-secret { font-size: 0.8rem; }
.vn-copy-inline { padding: 0.2rem 0.4rem; }
.vn-snips { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.vn-snip-name { font-size: 0.85rem; color: var(--vn-mute); margin: 0 0 0.3rem; }
.vn-snip .vn-code { font-size: 0.82rem; margin: 0; }
.vn-model-list { list-style: none; padding: 0; margin: 0; columns: 2 320px; column-gap: 2rem; }
.vn-model-list li { break-inside: avoid; padding: 0.4rem 0; border-bottom: 1px solid var(--vn-line); font-size: 0.88rem; }
.vn-model-list i { font-style: normal; color: var(--vn-mute); font-size: 0.78rem; }
.vn-letter { border-bottom: 1px solid var(--vn-line); padding: 1.2rem 0; }
.vn-letter-body { white-space: pre-wrap; margin: 0.3rem 0 0.8rem; }
.vn-reply { border-left: 2px solid var(--vn-indigo); padding-left: 1rem; margin-top: 0.6rem; }
.vn-reply p:last-child { white-space: pre-wrap; margin: 0; }
.vn-pre { white-space: pre-wrap; word-break: break-word; background: var(--vn-code-bg); padding: 1rem; border-radius: 10px; margin: 0; }

/* keeper */
.vn-keeper .vn-knav { gap: 1rem; flex-wrap: wrap; }
.vn-kmain { padding: 2.4rem 0 4rem; }
.vn-model-row { grid-template-columns: 14rem 1fr 1fr auto auto auto !important; }
.vn-model-row input { padding: 0.35rem 0.4rem !important; font-size: 0.82rem !important; width: 4.2rem !important; margin-right: 0.2rem; }

/* footer */
.vn-foot { border-top: 1px solid var(--vn-line); margin-top: var(--vn-gap); padding: 4rem 0 3rem; font-size: 0.92rem; }
.vn-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.vn-foot-grid h4 { font: 500 0.78rem/1 var(--vn-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vn-mute); margin: 0.4rem 0 1rem; }
.vn-foot-grid div > a { display: block; color: var(--vn-ink-2); margin-bottom: 0.5rem; word-break: break-all; }
.vn-foot-about p { color: var(--vn-mute); max-width: 22rem; }
.vn-foot-lines { list-style: none; padding: 0; margin: 3rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; color: var(--vn-ink-2); }
.vn-foot-lines li::before { content: "— "; color: var(--vn-line-2); }
.vn-fine { color: var(--vn-mute); font-size: 0.82rem; margin-top: 1.4rem; }
.vn-in-space .vn-foot { margin-top: 0; }

@media (max-width: 900px) {
  .vn-assure { grid-template-columns: repeat(2, 1fr); }
  .vn-figures { grid-template-columns: repeat(2, 1fr); }
  .vn-quiet-list { grid-template-columns: repeat(2, 1fr); }
  .vn-three, .vn-steps { grid-template-columns: 1fr; gap: 2rem; }
  .vn-foot-grid { grid-template-columns: 1fr 1fr; }
  .vn-space { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 1.5rem; }
  .vn-rail nav { position: static; display: flex; overflow-x: auto; gap: 0.3rem; padding-bottom: 0.4rem; }
  .vn-rail a { white-space: nowrap; }
  .vn-mine-line { grid-template-columns: 1fr; gap: 0.3rem; }
  .vn-model-row { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .vn-bar-in { gap: 0.8rem; padding: 0.7rem 0; }
  .vn-nav { order: 3; flex-basis: 100%; gap: 1.1rem; overflow-x: auto; }
  .vn-side { margin-left: auto; gap: 0.6rem; }
  .vn-who { display: none; }
  .vn-assure { grid-template-columns: 1fr; }
  .vn-quiet-list { grid-template-columns: 1fr; }
  .vn-foot-grid { grid-template-columns: 1fr; }
  .vn-pairs div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* home: one address, lots of air, models quietly below */
.vn-door { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(5rem, 12vw, 10rem) 0 clamp(3rem, 7vw, 6rem); }
.vn-door-label { font: 500 0.78rem/1 var(--vn-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--vn-mute); margin: 0 0 1.4rem; }
.vn-door-row { display: flex; align-items: flex-end; gap: 1.4rem; flex-wrap: wrap; }
.vn-door-addr { font: 400 clamp(2.1rem, 14vw, 8.4rem)/0.95 var(--vn-serif); letter-spacing: -0.03em; margin: 0; white-space: nowrap; flex: 0 0 auto; max-width: 100%; }
.vn-door-scheme { display: block; font: 400 0.95rem/1 var(--vn-mono); letter-spacing: 0; color: var(--vn-mute); margin-bottom: 0.9rem; }
.vn-door-copy { cursor: pointer; font: 500 0.9rem/1 var(--vn-sans); color: var(--vn-indigo); background: transparent; border: 1px solid var(--vn-indigo); border-radius: 99px; padding: 0.7rem 1.2rem; margin-bottom: 0.6rem; }
.vn-door-copy:hover { background: var(--vn-indigo-wash); }
.vn-door-line { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--vn-ink-2); max-width: 36rem; margin: 2.4rem 0 0; }
.vn-door-facts { color: var(--vn-mute); margin: 0.8rem 0 0; font-size: 0.98rem; }
.vn-door-gift { color: var(--vn-indigo); }
.vn-door-links { display: flex; gap: 2rem; flex-wrap: wrap; margin: 2.6rem 0 0; font-size: 1rem; }
.vn-door-links a { color: var(--vn-ink); border-bottom: 1px solid var(--vn-line-2); padding-bottom: 0.2rem; }
.vn-door-links a:first-child { color: var(--vn-indigo); border-color: var(--vn-indigo); }
.vn-door-links a::after { content: " \2192"; color: var(--vn-mute); }
.vn-door-links a:hover { text-decoration: none; border-color: currentColor; }

.vn-under { margin-top: 0; }
.vn-under-in { max-width: 760px; }
.vn-under-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vn-mute); border-bottom: 1px solid var(--vn-line-2); padding-bottom: 0.7rem; margin: 0; }
.vn-under-list { list-style: none; margin: 0; padding: 0; }
.vn-under-list li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "id price"; column-gap: 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--vn-line); }
.vn-under-name { grid-area: name; font-size: 0.98rem; }
.vn-under-list .vn-id { grid-area: id; }
.vn-under-price { grid-area: price; align-self: center; font-variant-numeric: tabular-nums; color: var(--vn-ink-2); font-size: 0.92rem; white-space: nowrap; }
.vn-under-price i { font-style: normal; color: var(--vn-line-2); margin: 0 0.35rem; }
.vn-under-more { margin: 1.2rem 0 0; font-size: 0.92rem; }

.vn-ways { margin-top: var(--vn-gap); }
.vn-ways dl, .vn-ways .vn-aside { max-width: 860px; }
.vn-ways dl { margin: 0; display: grid; gap: 0; }
.vn-ways dl div { display: grid; grid-template-columns: minmax(0, 18rem) 1fr; gap: 2rem; padding: 1.1rem 0; border-top: 1px solid var(--vn-line); }
.vn-ways dt { font-family: var(--vn-mono); font-size: 0.92rem; color: var(--vn-indigo); overflow-wrap: anywhere; }
.vn-ways dd { margin: 0; color: var(--vn-ink-2); }

.vn-reserves { margin-top: var(--vn-gap); }
.vn-res-group { margin-top: 2.2rem; }
.vn-res-group ul { list-style: none; margin: 0; padding: 0; }
.vn-res-group li { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 1rem; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--vn-line); font-size: 0.94rem; }
.vn-res-name { font-weight: 500; }
.vn-res-cost { font-variant-numeric: tabular-nums; }
.vn-res-quota { color: var(--vn-mute); font-variant-numeric: tabular-nums; }
.vn-calm { margin-top: var(--vn-gap); }
.vn-last { margin: var(--vn-gap) auto; padding-top: 3rem; border-top: 1px solid var(--vn-line); font: 400 clamp(1.6rem, 3vw, 2.2rem)/1.3 var(--vn-serif); }
.vn-last a { white-space: nowrap; }

@media (max-width: 640px) {
  .vn-door { min-height: 0; padding-top: 4rem; }
  .vn-door-links { gap: 1.2rem; }
  .vn-ways dl div { grid-template-columns: 1fr; gap: 0.3rem; }
  .vn-res-group li { grid-template-columns: 1fr auto; }
  .vn-res-quota { grid-column: 1; }
}

/* §7.11 structure: bare header, one-line footer, top console tabs, plan rows, one-row sign-up */
.vn-bar-in { justify-content: space-between; }
.vn-foot { text-align: center; padding: 3.2rem 0 2.6rem; }
.vn-foot-line { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem 1.6rem; font-size: 0.95rem; }
.vn-foot-line a { color: var(--vn-ink-2); }
.vn-langs { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 1.4rem 0 0; font-size: 0.82rem; }
.vn-langs a { color: var(--vn-mute); }
.vn-langs a.vn-on { color: var(--vn-ink); }

.vn-space { display: block; padding: 2.2rem 0 4rem; }
.vn-tabs { display: flex; gap: 0.3rem 2rem; flex-wrap: wrap; border-bottom: 1px solid var(--vn-line); margin-bottom: 1.2rem; }
.vn-tabs a { color: var(--vn-ink-2); padding: 0.7rem 0; font-size: 0.98rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vn-tabs a.vn-here { color: var(--vn-ink); border-bottom-color: var(--vn-indigo); }
.vn-tabs a:hover, .vn-subtabs a:hover { text-decoration: none; color: var(--vn-ink); }
.vn-subtabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 2rem; }
.vn-subtabs a { font-size: 0.88rem; color: var(--vn-ink-2); padding: 0.35rem 0.85rem; border-radius: 99px; border: 1px solid var(--vn-line-2); }
.vn-subtabs a.vn-here { background: var(--vn-ink); color: var(--vn-paper); border-color: var(--vn-ink); }

.vn-planlist { list-style: none; margin: 0 0 1.6rem; padding: 0; max-width: 880px; }
.vn-planlist li { display: grid; grid-template-columns: 1.6fr 1.2fr 1fr auto; gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--vn-line); }
.vn-pl-name { font: 400 1.25rem/1.2 var(--vn-serif); }
.vn-pl-week { color: var(--vn-mute); font-size: 0.92rem; }
.vn-pl-cost { font-variant-numeric: tabular-nums; }
.vn-pl-cost i { font-style: normal; color: var(--vn-mute); font-size: 0.86rem; }
.vn-pl-buy { margin: 0; font-size: 0.95rem; }
.vn-pl-buy .vn-quiet { color: var(--vn-indigo); font-size: 0.95rem; }

.vn-named { margin-top: var(--vn-gap); }
.vn-named p { font: 400 clamp(1.4rem, 2.6vw, 2rem)/1.35 var(--vn-serif); max-width: 46rem; margin: 0; }
.vn-reserves .vn-planlist { margin-top: 1rem; }
.vn-footnote { color: var(--vn-mute); font-size: 0.84rem; margin-top: 2.4rem; border-top: 1px solid var(--vn-line); padding-top: 1rem; }
.vn-url-head { font: 400 clamp(1.3rem, 2.6vw, 1.9rem)/1.2 var(--vn-mono); color: var(--vn-indigo); overflow-wrap: anywhere; }

.vn-titles { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.vn-titles li { padding: 0.75rem 0; border-bottom: 1px solid var(--vn-line); }
.vn-titles a { color: var(--vn-ink); font: 400 1.25rem/1.3 var(--vn-serif); }

.vn-join-form { margin-top: 2.2rem; display: grid; gap: 1.2rem; }
.vn-join-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.vn-join-row label { display: grid; gap: 0.35rem; font-size: 0.85rem; color: var(--vn-ink-2); }
.vn-join-row input { font: inherit; font-size: 1rem; color: var(--vn-ink); background: var(--vn-sheet); border: 1px solid var(--vn-line-2); border-radius: 10px; padding: 0.75rem 0.85rem; width: 100%; }
.vn-join-row input:focus { outline: 2px solid var(--vn-indigo); outline-offset: 1px; border-color: transparent; }
.vn-join-form > .vn-pill { justify-self: start; }

@media (max-width: 760px) {
  .vn-join-row { grid-template-columns: 1fr; }
  .vn-planlist li { grid-template-columns: 1fr auto; }
  .vn-pl-week { grid-column: 1; }
}

/* console overview (§7.13): balance and key count side by side */
.vn-glance { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 1rem; margin-bottom: 1.6rem; }
.vn-glance-cell { border: 1px solid var(--vn-line); border-radius: var(--vn-r); padding: 1.2rem 1.3rem; background: var(--vn-sheet); }
.vn-glance-cell span { display: block; color: var(--vn-mute); font-size: 0.82rem; margin-bottom: 0.4rem; }
.vn-glance-cell b { font: 400 2rem/1.1 var(--vn-serif); font-variant-numeric: tabular-nums; }
.vn-glance-cell.vn-warn b { color: var(--vn-bad-ink); }

/* article code listings (numbered) */
.vn-listing { background: var(--vn-code-bg); border: 1px solid var(--vn-line); border-radius: 10px; padding: 0.9rem 1.1rem; overflow-x: auto; font: 0.86rem/1.7 var(--vn-mono); white-space: pre; margin: 1.2rem 0; }

/* §7.14: code and model ids never wrap inside tables (phones scroll the table instead) */
.vn-table code, .vn-table .vn-id, .vn-planlist code { white-space: nowrap; }
.vn-langmark { font-size: 0.72rem; color: var(--vn-indigo); background: var(--vn-indigo-wash); border-radius: 99px; padding: 0.05rem 0.45rem; vertical-align: middle; margin-left: 0.4rem; }
.vn-wrap-cell { white-space: pre-wrap; word-break: break-word; max-width: 40rem; }