/* Shared styles for the site and the admin console, in the Argoforge v1 look (Pantheon Prime panel kit).
   Colours come from theme/generated/theme.generated.css (the engine's Hestia theme, served at /shared/theme/); dark = violet, light = marble. */

:root {
  color-scheme: dark;
  --bg: var(--k-bg);
  --surface: color-mix(in srgb, var(--k-card) 82%, transparent);
  --surface-2: color-mix(in srgb, var(--k-card2) calc(var(--k-card-alpha) * 100%), transparent);
  --raise: color-mix(in srgb, var(--k-card) 88%, var(--k-raise));
  --sunk: var(--k-deep);
  --line: var(--k-line2);
  --line-strong: var(--k-edge);
  --line-acc: var(--k-line);
  --ink: var(--k-ink); --ink-2: color-mix(in srgb, var(--k-ink) 72%, var(--k-dim)); --ink-3: var(--k-dim); --faint: var(--k-faint);
  --acc: var(--k-acc2); --acc-fill: var(--k-acc-deep); --acc-ink: #fff;
  --acc-soft: color-mix(in srgb, var(--k-acc) calc(var(--k-hover-rest) * 100% * 2), transparent);
  --acc-hover: color-mix(in srgb, var(--k-acc) calc(var(--k-hover-hover) * 100% * 2), transparent);
  --glow: var(--k-glow);
  --ok: var(--k-ok); --ok-soft: color-mix(in srgb, var(--k-ok) 15%, transparent);
  --warn: var(--k-warn); --warn-soft: color-mix(in srgb, var(--k-warn) 15%, transparent);
  --bad: var(--k-bad); --bad-soft: color-mix(in srgb, var(--k-bad) 14%, transparent);
  --code-bg: color-mix(in srgb, var(--k-deep) 88%, transparent);
  --sans: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif: "New York", ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: var(--v-font-mono);
  --r-card: var(--k-radius-card); --r-screen: var(--k-radius-screen); --r-pill: 999px; --r-chip: var(--k-radius-chip);
  --track-m: 0.12em; --track-l: 0.16em;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --v-panel-blur: 0px;
}
:root[data-cw="marble"] {
  color-scheme: light;
  --surface: color-mix(in srgb, var(--k-card) 86%, transparent);
  --bg: var(--k-bg);
  --raise: var(--k-raise);
  --acc: var(--k-acc-deep);
}

/* ── base and backdrop ──────────────────────────────────────────────── */
/* A plain near-black page with one soft violet glow at the top: no picture behind the text, and solid panels
   (no backdrop blur), so text stays sharp at any scroll. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: transparent; position: relative; isolation: isolate;
  font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 38% at 50% -6%, color-mix(in srgb, var(--k-acc) 16%, transparent), transparent 72%),
    radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--k-acc) 5%, transparent), transparent 70%),
    var(--bg);
}
:root[data-cw="marble"] body::before {
  background: radial-gradient(ellipse 60% 38% at 50% -6%, color-mix(in srgb, var(--k-acc) 10%, transparent), transparent 72%), var(--bg);
}
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
code { font-family: var(--mono); font-size: .9em; color: var(--acc); }
::selection { background: color-mix(in srgb, var(--k-acc) 40%, transparent); }

/* ── glyphs: white monoline masks tinted by currentColor ────────────── */
.gl {
  display: inline-block; flex: none; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat;
}
.gl-access   { --g: url("theme/glyphs/access.png"); }
.gl-craft    { --g: url("theme/glyphs/craft.png"); }
.gl-memory   { --g: url("theme/glyphs/memory.png"); }
.gl-model    { --g: url("theme/glyphs/model.png"); }
.gl-overview { --g: url("theme/glyphs/overview.png"); }
.gl-projects { --g: url("theme/glyphs/projects.png"); }
.gl-reflex   { --g: url("theme/glyphs/reflex.png"); }
.gl-rules    { --g: url("theme/glyphs/rules.png"); }
.gl-vault    { --g: url("theme/glyphs/vault.png"); }
.gl-xenia    { --g: url("theme/glyphs/xenia.png"); }
.gl-argus    { --g: url("modules/argus/glyph.png"); }
.gl-kairos   { --g: url("modules/kairos/glyph.png"); }
.gl-legion   { --g: url("modules/legion/glyph.png"); }
.gl-nexus    { --g: url("modules/nexus/glyph.png"); }
.gl-hermes    { --g: url("modules/hermes/glyph.png"); }
.gl-hestia    { --g: url("modules/hestia/glyph.png"); }
.gl-lethe     { --g: url("modules/lethe/glyph.png"); }
.gl-metis     { --g: url("modules/metis/glyph.png"); }
.gl-mnemosyne { --g: url("modules/mnemosyne/glyph.png"); }
.gl-yggdrasil { --g: url("modules/yggdrasil/glyph.png"); }
.gl-lg { width: 30px; height: 30px; }
.gl-xl { width: 96px; height: 96px; }

/* ── top bar and brand ──────────────────────────────────────────────── */
.top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 600 19px/1 var(--serif); letter-spacing: 0.02em; }
.brand:hover { text-decoration: none; }
.brand-mark { flex: none; width: 32px; height: 32px; filter: drop-shadow(0 0 8px var(--glow)); }
.brand small {
  font: 700 10px/1 var(--sans); letter-spacing: var(--track-m); text-transform: uppercase; color: var(--acc);
  border: 1px solid var(--line-acc); background: var(--acc-soft); border-radius: var(--r-pill); padding: 4px 8px;
}

/* ── layout primitives ──────────────────────────────────────────────── */
main { display: flex; justify-content: center; padding: 5vh 16px 48px; }
.panel { width: 100%; max-width: 420px; }
.panel.wide { max-width: 640px; }
h1 { font: 600 30px/1.1 var(--serif); letter-spacing: 0; margin: 0 0 6px; }
.lead { color: var(--ink-3); margin: 0 0 20px; }
.eyebrow-k, .k {
  display: block; font: 700 11px/1 var(--sans); letter-spacing: var(--track-l); text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
}
.k-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--acc); }
.k-row .k { margin: 0; }
.k-row.bad { color: var(--bad); }

.card {
  background: var(--raise); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 22px;
  -webkit-backdrop-filter: blur(var(--v-panel-blur)); backdrop-filter: blur(var(--v-panel-blur));
}
.card + .card { margin-top: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }

/* hero: portrait on the right fading into the card, figure and actions on the left */
.hero-card {
  position: relative; overflow: hidden; border-radius: var(--r-screen); border: 1px solid var(--line-strong);
  background: var(--k-deep); padding: 28px; min-height: 220px; isolation: isolate;
}
.hero-card .portrait {
  position: absolute; inset: 0 0 0 auto; z-index: -1;
  width: var(--pw, 68%); width: round(down, var(--pw, 68%), 1px);
  background: var(--pic, none) right center / cover no-repeat;
}
.hero-card .portrait::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 70% 45%, color-mix(in srgb, var(--k-acc) 45%, transparent), transparent 70%);
  z-index: -1;
}
.hero-card .portrait {
  -webkit-mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 55%), linear-gradient(0deg, transparent 0%, #000 30%);
  mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 55%), linear-gradient(0deg, transparent 0%, #000 30%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero-card .portrait .gl { position: absolute; right: 12%; top: 50%; translate: 0 -50%; color: var(--k-acc2); filter: drop-shadow(0 0 18px var(--glow)); opacity: .9; }
.pic-agents   { --pic: url("theme/portraits/agents.jpg"); }
.pic-memory   { --pic: url("theme/portraits/memory.jpg"); }
.pic-projects { --pic: url("theme/portraits/projects.jpg"); }
.pic-rules    { --pic: url("theme/portraits/rules.jpg"); }
.pic-argus    { --pic: url("modules/argus/portrait.jpg"); }
.pic-hestia   { --pic: url("modules/hestia/portrait.jpg"); }
.pic-kairos   { --pic: url("modules/kairos/portrait.jpg"); }
.pic-legion   { --pic: url("modules/legion/portrait.jpg"); }
.pic-nexus    { --pic: url("modules/nexus/portrait.jpg"); }
.pic-hermes   { --pic: url("modules/hermes/portrait.jpg"); }
.pic-lethe    { --pic: url("modules/lethe/portrait.jpg"); }
.pic-metis    { --pic: url("modules/metis/portrait.jpg"); }
.pic-mnemosyne { --pic: url("modules/mnemosyne/portrait.jpg"); }
.pic-yggdrasil { --pic: url("modules/yggdrasil/portrait.jpg"); }
:root[data-cw="marble"] .hero-card { background: var(--k-card); }
:root[data-cw="marble"] .hero-card .portrait { opacity: .9; }
.hero-card > :not(.portrait) { position: relative; max-width: 60%; }
.hero-card h1, .hero-card h2 { text-align: left; }
.epigraph { font: italic 17px/1.4 var(--serif); color: var(--ink-2); margin: 6px 0 0; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--sans); letter-spacing: var(--track-m); text-transform: uppercase;
  color: var(--acc); border: 1px solid var(--line-acc); background: var(--acc-soft); border-radius: var(--r-pill); padding: 6px 12px;
}

/* numbers shelf: big figure, caps caption, thin divider */
.shelf { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 30px 0 4px; }
.stat { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; }
.stat .gl { color: var(--acc); grid-row: 1; }
.stat b { font: 700 40px/1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.stat span { grid-column: 1 / -1; font: 600 11px/1.3 var(--sans); letter-spacing: var(--track-m); text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--line-strong); }

/* ── forms ──────────────────────────────────────────────────────────── */
label { display: block; font-size: 13.5px; color: var(--ink-2); margin: 0 0 6px; }
.field { margin-bottom: 16px; }
input, select, textarea {
  width: 100%; height: 42px; padding: 0 14px; border-radius: var(--r-chip);
  border: 1px solid var(--line-strong); background: var(--code-bg); color: var(--ink);
  font: 15px var(--sans); outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
/* own chevron instead of the native one: Safari pins the native arrow to the edge and ignores padding-right */
select {
  -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
input:focus, select:focus, textarea:focus { border-color: var(--k-acc); box-shadow: 0 0 0 3px var(--acc-soft), 0 0 18px -6px var(--glow); }
input::placeholder, textarea::placeholder { color: var(--faint); }
/* the browser's autofill paints fields pale yellow: keep them on the page's own surface */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--k-deep) inset; transition: background-color 9999s;
}
input[type=checkbox] { width: auto; height: auto; accent-color: var(--k-acc); }
textarea { height: auto; min-height: 58px; padding: 10px 14px; resize: vertical; line-height: 1.4; }
label.check { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; cursor: pointer; }

/* ── buttons: pills, the primary one glows ──────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: var(--r-pill);
  font: 600 15px var(--sans); border: 1px solid transparent; cursor: pointer; color: var(--ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), opacity .15s var(--ease);
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-primary { background: linear-gradient(180deg, var(--k-acc), var(--k-acc-deep)); color: var(--acc-ink); box-shadow: 0 8px 26px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover { box-shadow: 0 10px 34px -6px var(--glow), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: var(--acc-soft); }
.btn-ghost:hover { background: var(--acc-hover); border-color: var(--line-acc); }
.btn-danger { border-color: color-mix(in srgb, var(--k-bad) 40%, transparent); color: var(--bad); background: var(--bad-soft); }
.btn-block { width: 100%; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.is-off { opacity: .55; cursor: default; }
.is-off:hover { transform: none; }

.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12.5px; margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.soon { font: 700 10px var(--sans); letter-spacing: var(--track-m); text-transform: uppercase; color: var(--ink-3); background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 8px; }

.switch { text-align: center; color: var(--ink-3); font-size: 14px; margin-top: 18px; }
.switch button { background: none; border: 0; color: var(--acc); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.msg { font-size: 13.5px; border-radius: var(--r-chip); padding: 10px 12px; margin-bottom: 16px; border: 1px solid transparent; }
.msg.bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--k-bad) 30%, transparent); }
.msg.warn { background: var(--warn-soft); color: var(--warn); }
.msg.ok { background: var(--ok-soft); color: var(--ok); }

.cmd {
  display: flex; align-items: center; gap: 12px;
  background: var(--code-bg); border: 1px solid var(--line-acc); border-radius: var(--r-chip);
  padding: 10px 10px 10px 14px; font: 13.5px/1.5 var(--mono); color: var(--ink); margin-bottom: 12px;
  box-shadow: inset 0 0 24px -12px var(--glow);
}
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--ink); }
.cmd .copy {
  flex: none; border: 1px solid var(--line-strong); background: var(--acc-soft); color: var(--ink-2);
  border-radius: var(--r-pill); font: 600 12px var(--sans); padding: 5px 12px; cursor: pointer;
}
.cmd .copy:hover { color: var(--ink); background: var(--acc-hover); }
.note { font-size: 13.5px; color: var(--ink-3); margin: 0; }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; font-size: 14px; }
dl.facts dt { color: var(--ink-3); font: 600 11px/1.9 var(--sans); letter-spacing: var(--track-m); text-transform: uppercase; }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
dl.facts code { font: 13px var(--mono); }
.pill { font: 700 11px var(--sans); letter-spacing: var(--track-m); text-transform: uppercase; color: var(--ok); background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--k-ok) 30%, transparent); border-radius: var(--r-pill); padding: 3px 10px; }
.tag {
  display: inline-block; vertical-align: 1px; margin-left: 4px; font: 700 10px var(--sans); letter-spacing: var(--track-m);
  text-transform: uppercase; color: var(--ink-3); background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 8px;
}
.tag.ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.tag.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.tag.bad { color: var(--bad); background: var(--bad-soft); border-color: transparent; }

.foot { text-align: center; color: var(--faint); font-size: 12.5px; padding: 0 16px 24px; }
.fine { font-size: 12.5px; color: var(--faint); margin: 10px 0 0 !important; }
.oauth-2 { margin-top: 10px; }
.center { text-align: center; }

/* ── account page ───────────────────────────────────────────────────── */
.panel > .hero-card { margin-bottom: 14px; min-height: 0; padding: 24px; }
.panel > .hero-card .lead { margin: 0; }
.panel > .hero-card .chip { margin-bottom: 12px; }
.panel > .hero-card > :not(.portrait) { max-width: 72%; }
#view-auth .hero-card .portrait { --pw: 75%; }
.panel.xwide { max-width: 860px; }
main:has(> .panel.xwide:not([hidden])) { padding-top: 24px; }

/* profile bar: the wide hero with the projects portrait — who, plan, a line about the account and the API key; pinned
   while the tabs below scroll */
.panel > .hero-card.profile-bar {
  position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 16px;
  margin: 0 0 12px; padding: 22px 26px; box-shadow: 0 14px 34px -20px rgba(0,0,0,.7);
}
.profile-bar .portrait { --pw: 58%; background-position: right 22%; }
.panel > .hero-card.profile-bar > :not(.portrait) { max-width: 64%; }
.profile-bar .chip { align-self: flex-start; margin-bottom: 10px; }
.pb-who { display: flex; flex-direction: column; min-width: 0; }
.pb-email { font-size: 28px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-danger.btn-xs { color: var(--bad); }
.plan-top { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.plan-top h1 { margin: 0; }
.pb-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 10px 18px; margin: 0; font-size: 14px; }
.pb-fields dt { font-weight: 700; color: var(--ink); }
.pb-fields dd { margin: 0; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.pb-fields dd code { font: 13px var(--mono); color: var(--acc); }
.pb-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pb-fields .pb-cmd { display: inline-flex; vertical-align: middle; }
.pb-fields .pb-cmd code { color: var(--ink); }
.pb-actions { display: flex; }
.link { background: none; border: 0; padding: 0; color: var(--acc); font: inherit; cursor: pointer; }
.link:hover { text-decoration: underline; }
.pb-cmd { margin: 0; padding: 6px 6px 6px 14px; gap: 4px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.pb-cmd code { min-width: 0; max-width: 380px; }
.pb-cmd.fresh { border-color: var(--k-ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.icon-btn {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent;
  background: none; color: var(--ink-3); cursor: pointer; transition: color .15s var(--ease), background .15s var(--ease);
}
.icon-btn:hover:not(:disabled) { color: var(--ink); background: var(--acc-hover); border-color: var(--line-acc); }
.icon-btn:disabled { opacity: .4; cursor: default; }
.icon-btn.done { color: var(--ok); }
.btn-xs { color: var(--bad); }
.plan-top { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.plan-top h1 { margin: 0; }
.link { background: none; border: 0; padding: 0; color: var(--acc); font: inherit; cursor: pointer; }
.link:hover { text-decoration: underline; }
.btn-xs { height: 28px; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.pb-key-note { margin: 6px 0 0; font-size: 12.5px; color: var(--ok); max-width: 460px; }

/* account data: one tile per count */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.stat-tile { display: flex; flex-direction: column; align-items: flex-start; text-align: left; font: inherit; transition: border-color .15s var(--ease), background .15s var(--ease); gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--sunk); }
.stat-tile b { font: 700 26px/1.1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.stat-tile span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.stat-tile small { font-size: 11.5px; color: var(--faint); }
button.stat-tile { cursor: pointer; }
button.stat-tile:hover { border-color: var(--line-acc); background: var(--acc-soft); }
.stat-tile[aria-expanded="true"] { border-color: var(--k-acc); background: var(--acc-soft); box-shadow: 0 0 0 1px var(--k-acc) inset; }
.stats-detail { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line-acc); border-radius: var(--r-chip); background: var(--sunk); }
.stats-detail h3 { font: 600 12px/1.6 var(--sans); letter-spacing: var(--track-m); text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.d-list { list-style: none; margin: 0; padding: 0; }
.d-row { padding: 10px 0; border-top: 1px solid var(--line); }
.d-row:first-child { border-top: 0; padding-top: 2px; }
.d-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.d-head b { color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.d-head .tag { margin-left: 0; }
.d-text { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.d-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--faint); }

/* install the app: three numbered steps */
.install-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 14px; }
.install-steps li { counter-increment: st; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; row-gap: 4px; font-size: 14px; color: var(--ink-2); }
.install-steps li::before {
  content: counter(st); grid-row: 1 / span 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px var(--sans); color: var(--acc); background: var(--acc-soft); border: 1px solid var(--line-acc);
}
.install-steps li > * { grid-column: 2; }
.install-steps b { color: var(--ink); }
.install-steps .fine { margin: 0 !important; }
.install-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0; }
.install-steps code { font: 13px var(--mono); }

/* plan screen: the plan in force as a hero, then the landing's plans to choose from */
.panel > .hero-card.plan-now { padding: 24px 26px; margin-bottom: 26px; }
.plan-now .portrait { --pw: 55%; }
.panel > .hero-card.plan-now > :not(.portrait) { max-width: 62%; }
.plan-now .chip { margin-bottom: 10px; }
.plan-now-name { display: flex; align-items: center; gap: 12px; font: 600 34px/1.1 var(--serif); color: var(--ink); }
.plan-now-status { margin: 8px 0 0; color: var(--ink-2); font-size: 14.5px; }
.plan-now-actions { margin-top: 16px; gap: 8px; }
.plan-now-actions:not(:has(> :not([hidden]))) { display: none; }
.pill.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.plan-choose { margin: 0 0 22px; }
#view-plan .plans { margin-bottom: 18px; }
#view-plan .plan .btn { margin-bottom: 4px; }
.plan.is-current { border-color: var(--k-ok); box-shadow: 0 0 0 1px var(--k-ok) inset; }
.plan-flag.plan-flag-ok { background: var(--k-ok); color: #06140c; box-shadow: none; }

@media (max-width: 640px) {
  .panel > .hero-card.profile-bar { position: relative; padding: 18px; }
  .panel > .hero-card.profile-bar > :not(.portrait) { max-width: 100%; }
  .profile-bar .portrait { opacity: .35; }
  .pb-email { font-size: 22px; }
  .pb-fields { gap: 10px 14px; }
  .pb-fields .pb-cmd { display: flex; }
}

/* ── landing ────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
.top-land {
  position: sticky; top: 0; z-index: 10; gap: 16px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(var(--v-panel-blur)); -webkit-backdrop-filter: blur(var(--v-panel-blur));
  border-bottom: 1px solid var(--line);
}
.land-nav { display: flex; gap: 2px; margin-right: auto; margin-left: 16px; }
.land-nav a { color: var(--ink-2); font-size: 14.5px; padding: 6px 12px; border-radius: var(--r-pill); }
.land-nav a:hover { color: var(--ink); background: var(--acc-soft); text-decoration: none; }
.top-actions { gap: 8px; flex-wrap: nowrap; align-items: center; }

.hero { max-width: 1120px; margin: 0 auto; padding: 6vh 16px 4vh; }
.hero .hero-card { padding: 48px 44px; min-height: 460px; display: flex; flex-direction: column; justify-content: center; }
.hero .hero-card .portrait { --pw: 62%; }
.badge { margin-bottom: 22px; align-self: flex-start; }
.hero-title { font: 600 clamp(34px, 4.6vw, 56px)/1.06 var(--serif); letter-spacing: -0.01em; margin: 0 0 18px; }
.hero-title em { font-style: italic; color: var(--acc); text-shadow: 0 0 32px var(--glow); }
.hero-lead { font-size: clamp(15px, 1.4vw, 17.5px); color: var(--ink-2); max-width: 560px; margin: 0 0 28px; }
.hero-note { color: var(--faint); font-size: 13px; margin: 18px 0 0; }

.sect { max-width: 1120px; margin: 0 auto; padding: 64px 16px; }
.sect h2 { font: 600 clamp(26px, 3.2vw, 38px)/1.15 var(--serif); margin: 0 0 12px; text-align: center; }
.sect-lead { color: var(--ink-3); text-align: center; max-width: 640px; margin: 0 auto 36px; font-size: 16px; }
.eyebrow { text-align: center; font: 700 12px var(--sans); letter-spacing: var(--track-l); text-transform: uppercase; color: var(--acc); margin: 0 0 12px; }

.grid { display: grid; gap: 14px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid .card > h3 + .feats { margin-top: 12px; }
.grid .card + .card { margin-top: 0; }
.card > .gl { color: var(--acc); margin-bottom: 14px; filter: drop-shadow(0 0 10px var(--glow)); }
.card h3 { font-size: 16.5px; margin: 0 0 8px; letter-spacing: -0.01em; }
.card p { color: var(--ink-3); margin: 0; font-size: 14.5px; }
.card p.more { margin-top: 12px; }

.loop { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.loop li {
  position: relative; background: var(--raise); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 22px;
  -webkit-backdrop-filter: blur(var(--v-panel-blur)); backdrop-filter: blur(var(--v-panel-blur));
}
.loop li:not(:last-child)::after {
  content: "→"; position: absolute; right: -13px; top: 26px; z-index: 1;
  color: var(--acc); font-size: 18px; line-height: 1; text-shadow: 0 0 10px var(--glow);
}
.loop-head { display: flex; align-items: center; justify-content: space-between; color: var(--acc); }
.loop-head .gl { filter: drop-shadow(0 0 10px var(--glow)); }
.loop-n { font: 700 12px var(--sans); color: var(--faint); letter-spacing: var(--track-m); }
.loop h3 { font: 600 20px/1.2 var(--serif); margin: 14px 0 6px; }
.loop .mod { display: inline-block; font: 700 10.5px var(--sans); letter-spacing: var(--track-m); text-transform: uppercase; color: var(--acc); background: var(--acc-soft); border: 1px solid var(--line-acc); border-radius: var(--r-pill); padding: 3px 9px; margin: 0 0 10px; }
.loop p { color: var(--ink-3); font-size: 14.5px; margin: 0; }

.steps { list-style: none; padding: 0; margin: 0 auto 24px; max-width: 720px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.steps li {
  display: flex; gap: 16px; align-items: flex-start; background: var(--raise); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 20px 24px;
  -webkit-backdrop-filter: blur(var(--v-panel-blur)); backdrop-filter: blur(var(--v-panel-blur));
}
.steps li > div { min-width: 0; flex: 1; }
.step-n {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--k-acc), var(--k-acc-deep)); color: #fff; font-weight: 700; box-shadow: 0 0 22px -4px var(--glow);
}
.steps h3 { font-size: 16.5px; margin: 5px 0 6px; }
.steps p { color: var(--ink-3); margin: 0 0 10px; font-size: 14.5px; }
.steps .cmd { margin: 0; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.plan {
  position: relative; background: var(--raise); border: 1px solid var(--line-strong); border-radius: var(--r-screen); padding: 28px 24px;
  -webkit-backdrop-filter: blur(var(--v-panel-blur)); backdrop-filter: blur(var(--v-panel-blur));
}
.plan-hl { border-color: var(--k-acc); box-shadow: 0 18px 60px -22px var(--glow), 0 0 0 1px var(--k-acc) inset; }
.plan-flag {
  position: absolute; top: -12px; left: 24px; font: 700 11px var(--sans); letter-spacing: var(--track-m); text-transform: uppercase;
  background: linear-gradient(180deg, var(--k-acc), var(--k-acc-deep)); color: #fff; border-radius: var(--r-pill); padding: 5px 11px; box-shadow: 0 0 18px -4px var(--glow);
}
.plan h3 { font: 600 24px/1.1 var(--serif); margin: 0 0 4px; }
.plan-for { color: var(--ink-3); margin: 0 0 18px; font-size: 14.5px; }
.price { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 18px; line-height: 1; }
.price span { font-size: 14px; font-weight: 450; color: var(--ink-3); letter-spacing: 0; margin-left: 4px; }
.plan-sub { font: 700 11px var(--sans); letter-spacing: var(--track-l); text-transform: uppercase; color: var(--ink-3); margin: 24px 0 12px; }
.feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.feats li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--ink-2); }
.feats li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 700; }
.feats b { color: var(--ink); font-weight: 600; }
.plan-foot { color: var(--faint); font-size: 13px; margin: 18px 0 0; }

.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq details {
  background: var(--raise); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 0 20px;
  -webkit-backdrop-filter: blur(var(--v-panel-blur)); backdrop-filter: blur(var(--v-panel-blur));
}
.faq details[open] { border-color: var(--line-acc); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--acc); font-weight: 400; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--ink-3); margin: 0 0 16px; font-size: 14.5px; }

.cta-band .hero-card { min-height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px; }
.cta-band h2, .cta-band .sect-lead { text-align: left; margin-left: 0; }
.cta-band .sect-lead { margin-bottom: 24px; }
.landing .foot { padding-top: 24px; border-top: 1px solid var(--line); max-width: 1120px; margin: 0 auto; }

@media (max-width: 960px) {
  .grid-4, .grid-3, .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop li::after { display: none; }
  .plans { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .land-nav { display: none; }
  .top-land .brand { margin-right: auto; }
  .hero-card > :not(.portrait) { max-width: 72%; }
}
@media (max-width: 560px) {
  .grid-4, .grid-3, .grid-2, .loop { grid-template-columns: 1fr; }
  .top { padding: 12px 16px; }
  .brand small { display: none; }
  .top-actions .btn-primary { display: none; }
  .sect { padding: 48px 16px; }
  .steps li { padding: 16px; }
  .hero-card, .hero .hero-card, .cta-band .hero-card { padding: 24px 20px; }
  .hero-card .portrait { --pw: 100%; opacity: .45; }
  .hero-card > :not(.portrait), .panel > .hero-card > :not(.portrait) { max-width: 100%; }
  .stat + .stat { padding-left: 0; border-left: 0; }
}

/* ── landing hero: the modules as one council under Yggdrasil (img/hero-council.jpg); each figure is a link,
   its name shows on hover; the headline and the button stand on the empty floor below them ── */
.hero-arc { position: relative; max-width: 1600px; margin: 0 auto; overflow-x: clip; }
.council { position: relative; }
.council-pic {
  display: block; width: 100%; height: auto;
  -webkit-mask: linear-gradient(to bottom, #000 62%, transparent 98%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(to bottom, #000 62%, transparent 98%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.council-spots { position: absolute; inset: 0; }
.spot { position: absolute; border-radius: 45%; outline: none; }
.spot::before {
  content: ""; position: absolute; inset: -6%; border-radius: inherit; opacity: 0; transition: opacity .3s var(--ease);
  background: radial-gradient(ellipse 50% 50% at 50% 55%, color-mix(in srgb, var(--k-acc) 30%, transparent), transparent 72%);
}
.spot-tag {
  position: absolute; left: 50%; top: 0; translate: -50% -115%; white-space: nowrap; pointer-events: none;
  display: grid; justify-items: center; gap: 3px; padding: 7px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--line-acc);
  opacity: 0; transition: opacity .25s var(--ease), translate .25s var(--ease);
}
.spot-tag b { font: 600 15px/1 var(--serif); color: var(--ink); }
.spot-tag small { font: 700 10px/1 var(--sans); letter-spacing: var(--track-m); text-transform: uppercase; color: var(--acc); }
.spot[href$="yggdrasil.html"] .spot-tag { top: auto; bottom: 18%; translate: -50% 0; }
.spot:hover::before, .spot:focus-visible::before, .spot.is-lit::before { opacity: 1; }
.spot:hover .spot-tag, .spot:focus-visible .spot-tag, .spot.is-lit .spot-tag { opacity: 1; translate: -50% -125%; }
.spot[href$="yggdrasil.html"]:hover .spot-tag, .spot[href$="yggdrasil.html"]:focus-visible .spot-tag, .spot[href$="yggdrasil.html"].is-lit .spot-tag { translate: -50% 0; }
.arc-hearth {
  position: relative; z-index: 1; max-width: 640px; margin: -9% auto 0; padding: 0 16px 28px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.arc-hearth .badge { align-self: center; margin-bottom: 16px; }
.arc-hearth .hero-title { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 14px; text-shadow: 0 2px 24px var(--bg); }
.arc-hearth .hero-lead { margin: 0 auto 22px; max-width: 520px; }
.btn-hearth { padding-inline: 28px; min-height: 48px; font-size: 16px; box-shadow: 0 0 0 6px var(--acc-soft), 0 12px 48px -10px var(--glow); }
.arc-demo { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.arc-hearth .hero-note { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .spot::before, .spot-tag { transition: none; } }
@media (max-width: 760px) {
  .arc-hearth { margin-top: 4px; }
  .spot-tag { display: none; }
}

/* ── landing: the team — each module as its character, a short role and what it does ── */
.cast { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.cast-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 16px 18px;
  background: var(--raise); border: 1px solid var(--line-strong); border-radius: var(--r-card); color: var(--ink);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cast-card:hover, .cast-card:focus-visible { text-decoration: none; border-color: var(--line-acc); transform: translateY(-3px); box-shadow: 0 14px 44px -18px var(--glow); }
.cast-pic {
  width: 84px; height: 84px; border-radius: 50%; margin-bottom: 8px;
  background: var(--pic) var(--fx, 60%) var(--fy, 40%) / auto var(--zoom, 150%) no-repeat, var(--k-deep);
  border: 1px solid var(--line-acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 70%, transparent), 0 10px 36px -12px var(--glow);
}
.cast-card b { font: 600 18px/1.1 var(--serif); }
.cast-tag { font: 700 10.5px/1.2 var(--sans); letter-spacing: var(--track-m); text-transform: uppercase; color: var(--acc); }
.cast-card p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 960px) { .cast { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cast-pic { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .cast-card { transition: none; } }

/* ── landing: Nexus "weak prompt → task card" player over a real recorded run ── */
.nx-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.nx-tabs .chip { cursor: pointer; font: inherit; font-size: 14px; }
.nx-tabs .chip.on { color: var(--acc); border-color: var(--line-acc); background: var(--acc-soft); }
.nx { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: stretch; }
.nx-col { background: var(--raise); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 20px; min-width: 0; }
.nx-in { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.nx-prompt { font: italic 500 19px/1.35 var(--serif); color: var(--ink); margin: 0 0 6px; }
.nx-prompt::before { content: "“"; color: var(--acc); } .nx-prompt::after { content: "”"; color: var(--acc); }
.nx-blocks { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.nx-blocks li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-acc); background: var(--acc-soft); color: var(--acc); }
.nx-blocks li b { color: var(--ink); font-weight: 600; }
.nx-blocks li span { color: var(--ink-3); font-size: 13.5px; }
.nx-team { margin: 0 0 12px; }
.nx-team .k { margin-bottom: 8px; color: var(--acc); }
.nx-team pre { white-space: pre-wrap; max-height: 320px; overflow: auto; font: 12px/1.5 var(--mono); color: var(--ink-2); background: var(--code-bg); border: 1px solid var(--line-acc); border-radius: 10px; padding: 12px; margin: 0; }
.nx.is-playing .nx-team { opacity: 0; translate: 0 6px; transition: opacity .35s var(--ease), translate .35s var(--ease); }
.nx.is-playing .nx-team.in { opacity: 1; translate: 0 0; }
.nx-raw summary { cursor: pointer; color: var(--ink-3); font-size: 13.5px; }
.nx-raw pre { white-space: pre-wrap; max-height: 280px; overflow: auto; font: 12px/1.5 var(--mono); color: var(--ink-2); background: var(--code-bg); border-radius: 10px; padding: 12px; margin: 10px 0 0; }
.nx-card { font-size: 14.5px; color: var(--ink-2); }
.nx-card p { margin: 0 0 8px; } .nx-card ul { margin: 0 0 8px; padding-left: 18px; } .nx-card li { margin: 0 0 4px; } .nx-card li.sub { margin-left: 14px; }
.nx-card b { color: var(--ink); }
.nx-result { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--ink-3); font-size: 13.5px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.nx-src { text-align: center; color: var(--faint); font-size: 13px; margin: 14px 0 0; }
/* before the play: the middle and the answer wait; while playing, their parts come in one by one */
.nx:not(.is-playing):not(.is-played) .nx-out { opacity: .35; filter: saturate(.4); }
.nx:not(.is-played) .nx-result { visibility: hidden; }
.nx.is-playing .nx-blocks li, .nx.is-playing .nx-card > * { opacity: 0; translate: 0 6px; transition: opacity .35s var(--ease), translate .35s var(--ease); }
.nx.is-playing .nx-blocks li.in, .nx.is-playing .nx-card > .in { opacity: 1; translate: 0 0; }
.nx:not(.is-playing):not(.is-played) .nx-card { max-height: 220px; overflow: hidden; -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); }

/* ── landing: the efficiency check, four meters "without → with Argoforge" ── */
.speed { padding: 28px; }
.gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gauge { display: grid; justify-items: center; text-align: center; gap: 2px; }
.gauge svg { width: 100%; max-width: 180px; overflow: visible; }
.g-track, .g-fill { fill: none; stroke-width: 9; stroke-linecap: round; }
.g-track { stroke: var(--line); }
.g-fill { stroke: var(--acc); stroke-dasharray: 0 100; opacity: 0; transition: stroke-dasharray 1s var(--ease), stroke .3s; filter: drop-shadow(0 0 6px var(--glow)); }
.gauge.is-filled .g-fill { opacity: 1; }
.gauge.is-better .g-fill { stroke: var(--ok); } .gauge.is-worse .g-fill { stroke: var(--bad); }
.g-delta { font: 700 30px/1 var(--sans); letter-spacing: -0.02em; margin-top: -30px; color: var(--ink); }
.gauge.is-better .g-delta { color: var(--ok); } .gauge.is-worse .g-delta { color: var(--bad); }
.g-label { font: 700 11px/1 var(--sans); letter-spacing: var(--track-l); text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.g-pair { color: var(--ink-3); font-size: 13px; } .g-pair i { font-style: normal; color: var(--ink-2); font-weight: 600; }
/* while a measurement goes: each meter sweeps on its own beat, then settles on the figure */
.gauges.is-measuring .g-fill { opacity: 1; transition: none; animation: g-sweep 11s ease-in-out infinite alternate; }
.gauges.is-measuring .gauge:nth-child(2) .g-fill { animation-duration: 13s; animation-delay: -2.5s; }
.gauges.is-measuring .gauge:nth-child(3) .g-fill { animation-duration: 10s; animation-delay: -5s; }
.gauges.is-measuring .gauge:nth-child(4) .g-fill { animation-duration: 12s; animation-delay: -1.5s; }
.gauges.is-measuring .g-delta { color: var(--ink-3); }
/* a slow climb over the same range (6 → 94): up a step, a small slip back, on up again; alternate walks it down the same way */
@keyframes g-sweep {
  0% { stroke-dasharray: 6 100; } 16% { stroke-dasharray: 24 100; } 22% { stroke-dasharray: 19 100; }
  38% { stroke-dasharray: 42 100; } 44% { stroke-dasharray: 37 100; } 60% { stroke-dasharray: 60 100; }
  66% { stroke-dasharray: 55 100; } 82% { stroke-dasharray: 78 100; } 88% { stroke-dasharray: 73 100; }
  100% { stroke-dasharray: 94 100; }
}
@media (prefers-reduced-motion: reduce) { .gauges.is-measuring .g-fill { animation: none; stroke-dasharray: 50 100; } }
.speed-src { text-align: center; color: var(--ink-3); font-size: 14px; margin: 22px 0 0; }
.speed-act { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; }
.speed-note { color: var(--faint); font-size: 13px; margin: 0; text-align: center; max-width: 520px; }
/* the model picker: providers the Mac reported as chips, their models in a select */
.speed-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 6px; }
.speed-pick .nx-tabs { margin: 0; }
.speed-pick .chip { color: var(--ink-3); border-color: var(--line-strong); background: transparent; }
.speed-pick .chip.on { color: var(--acc); border-color: var(--line-acc); background: var(--acc-soft); box-shadow: 0 0 14px -6px var(--glow); }
.speed-pick select { width: auto; min-width: 240px; max-width: 100%; }
@media (max-width: 960px) { .nx { grid-template-columns: 1fr; } .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .g-fill { transition: none; } }

/* ── localization: hide the page until i18n.js has applied the language; the language toggle ── */
html.i18n-pending body { visibility: hidden; }
.lang-toggle { min-width: 46px; padding: 0 10px; font: 700 12px var(--sans); letter-spacing: var(--track-m); color: var(--ink-2); }
.lang-toggle:hover { color: var(--ink); }