/* SALTO Network site · v3 "signal" art direction (derived from SALTO_01_Homepage tokens) */
:root {
  color-scheme: dark;
  --bg: #06090b;
  --bg-2: #0a1013;
  --panel: rgba(16, 24, 27, 0.72);
  --panel-solid: #10181b;
  --line: rgba(160, 200, 190, 0.14);
  --line-2: rgba(160, 200, 190, 0.26);
  --ink: #f2f4ed;
  --muted: #aab6b0;
  --dim: #8b9893;
  --lime: #ceff54;
  --lime-ink: #10140a;
  --cyan: #78dde1;
  --violet: #c0b2ff;
  --amber: #f4bc72;
  --grad: linear-gradient(100deg, #ceff54 0%, #8ff0b6 45%, #78dde1 75%, #c0b2ff 100%);
  --mono: "Salto Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: "Salto Display", "Helvetica Neue", Arial, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  --t: 240ms;
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --r: 16px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t: 0ms; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; }
}
* { box-sizing: border-box; }
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
html.smooth { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-wrap: break-word;
  background-image: radial-gradient(1200px 600px at 85% -10%, rgba(120, 221, 225, 0.08), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(206, 255, 84, 0.06), transparent 60%), radial-gradient(800px 600px at 50% 120%, rgba(192, 178, 255, 0.07), transparent 60%); background-attachment: fixed; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, h4, p, figure, dl, dd, ol, ul { margin: 0; }
ul[role="list"], ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
main:focus, .catalog:focus, .opt:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.shell { width: min(1320px, calc(100% - 48px)); margin-inline: auto; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 60; padding: 12px 16px; background: var(--lime); color: var(--lime-ink); font-weight: 700; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 10px; }
.mono-h, .sec-no, .eyebrow, .sim-tag, .stage, .instrument-head, .instrument-foot, .opt-num, .hint, .fine, .lbl { font-family: var(--mono); letter-spacing: 0.06em; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: shimmer 8s var(--ease) infinite alternate; }
@keyframes shimmer { to { background-position: 100% 0; } }
.glass { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -30px rgba(0, 0, 0, 0.8); }
.pad { padding: 22px; }

/* spotlight + gradient edge */
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity var(--t);
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(206, 255, 84, 0.10), rgba(120, 221, 225, 0.05) 40%, transparent 70%); }
.spot:hover::before { opacity: 1; }
.spot::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity var(--t);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(206, 255, 84, 0.7), rgba(120, 221, 225, 0.35) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.spot:hover::after { opacity: 1; }

/* reveal */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* buttons */
.btn { max-width: 100%; display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid transparent; transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t); }
.btn b { font-size: 18px; line-height: 1; transition: transform var(--t); }
.btn:hover b { transform: translateX(3px); }
.btn.lime { background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 0 0 rgba(206, 255, 84, 0.5); }
.btn.lime:hover:not(:disabled) { box-shadow: 0 0 28px 2px rgba(206, 255, 84, 0.35); }
.btn.lime:disabled { background: #35411f; color: #a9b38f; }
.btn.outline { border-color: rgba(206, 255, 84, 0.45); color: var(--lime); background: rgba(206, 255, 84, 0.04); }
.btn.outline:hover { background: rgba(206, 255, 84, 0.1); }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 13px; }
.text-btn { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; min-height: 32px; }
.text-btn:hover { color: var(--ink); }
.text-link { color: var(--lime); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.sec-cta { margin-top: 28px; display: flex; justify-content: center; }
.sec-cta.left { justify-content: flex-start; }
.next-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 10px 0 80px; }

/* header */
.mast { position: sticky; top: 0; z-index: 40; background: rgba(6, 9, 11, 0.78); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line); }
.mast-in { min-height: 66px; display: flex; align-items: center; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 23px; letter-spacing: -1px; text-decoration: none; white-space: nowrap; }
.word-network { font: 600 9px var(--mono); letter-spacing: 0.14em; color: var(--muted); border-left: 1px solid var(--line-2); padding-left: 8px; margin-left: 8px; vertical-align: middle; }
.desktop { display: flex; gap: 4px; margin-left: auto; }
.desktop a { font-size: 14px; color: #c9d0ca; text-decoration: none; padding: 8px 10px; border-radius: 999px; transition: background var(--t), color var(--t); }
.desktop a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.desktop a[aria-current="page"] { color: var(--lime-ink); background: var(--lime); }
.mast-right { display: flex; align-items: center; gap: 10px; }
.ask-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 13px; }
.ask-btn:hover { border-color: var(--cyan); }
.ask-btn kbd { font: 11px var(--mono); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 5px; color: var(--muted); }
.ask-orb { width: 18px; height: 18px; border-radius: 50%; flex: none; background: conic-gradient(from 0deg, #ceff54, #78dde1, #c0b2ff, #ceff54); box-shadow: 0 0 14px rgba(120, 221, 225, 0.6); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; gap: 6px; align-items: center; min-height: 38px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; font: 600 12px var(--mono); cursor: pointer; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; background: var(--panel-solid); border: 1px solid var(--line-2); border-radius: 12px; padding: 8px; z-index: 40; box-shadow: 0 20px 40px #0008; }
.lang li { padding: 7px 10px; }
.lang li a { font-weight: 700; color: var(--lime); }
.lang .lang-off { color: var(--dim); }
.mobmenu { display: none; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 12px; position: relative; }
.mobmenu span, .mobmenu span::before, .mobmenu span::after { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--ink); content: ""; transition: transform var(--t); }
.mobmenu span { top: 19px; }
.mobmenu span::before { left: 0; top: -6px; }
.mobmenu span::after { left: 0; top: 6px; }
.mobmenu[aria-expanded="true"] span { background: transparent; }
.mobmenu[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.mobmenu[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav { border-top: 1px solid var(--line); padding: 10px 0 18px; }
.mobile-nav a { display: block; padding: 12px 0; font-size: 18px; border-bottom: 1px solid var(--line); text-decoration: none; }
.mobile-nav a[aria-current="page"] { color: var(--lime); }

/* canvases */
.hero, .page-hero { position: relative; overflow: hidden; }
.mesh-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.9; }
.hero > .shell, .page-hero > .shell { position: relative; z-index: 1; }

/* hero / demo */
.hero { border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); column-gap: 44px; padding: 30px 0 34px; align-items: start; }
.hero-left, .hero-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hero-right { position: sticky; top: 84px; }
.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--lime); text-transform: uppercase; }
.eyebrow i { width: 18px; height: 1px; background: var(--lime); }
.eyebrow > span[aria-hidden] { color: var(--dim); }
.eyebrow .ey-b { color: var(--muted); }
h1 { font-size: clamp(42px, 5.2vw, 76px); line-height: 0.95; letter-spacing: -0.045em; font-weight: 700; margin: 14px 0; }
h1 span { display: block; }
h1 em { display: block; font-style: normal; }
.lead { font-size: 17px; color: #cfd6d0; max-width: 580px; }
.hero-actions { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 18px; }
.hero-sub { font: 11px var(--mono); color: var(--muted); }
.ask-inline { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 14px; color: #dfe6e0; }
.ask-inline:hover { border-color: var(--cyan); box-shadow: 0 0 24px rgba(120, 221, 225, 0.2); }
.instrument { overflow: hidden; }
.instrument-head, .instrument-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; font-size: 10.5px; color: var(--muted); }
.instrument-head { border-bottom: 1px solid var(--line); }
.instrument-foot { border-top: 1px solid var(--line); }
.instrument-foot .jumps { color: var(--lime); }
.sim-tag { font-size: 10px; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px; color: var(--muted); text-transform: uppercase; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.sim-tag.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.terrain { position: relative; aspect-ratio: 740 / 510; }
.terrain-img, .route-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-svg .hop { fill: none; stroke: #4b5d46; stroke-width: 2; stroke-dasharray: 5 6; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -22; } }
.route-svg .range-a { fill: rgba(206, 255, 84, 0.05); stroke: rgba(206, 255, 84, 0.35); stroke-dasharray: 3 5; }
.pin ellipse { fill: none; stroke: currentColor; opacity: 0.7; }
.pin .pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }
.pin path { stroke: currentColor; }
.pin circle { fill: currentColor; }
.pin-a, .pin-b { color: var(--lime); }
.pin-c { color: #91f2d4; }
.pin-b { transition: opacity var(--t), transform var(--t); }
.hero[data-relay="out"] .pin-b { opacity: 0.35; transform: translate(26px, -14px); }
.hero[data-relay="out"] #tagB { opacity: 0.55; }
.tags path { fill: none; stroke: #a0b6a3; stroke-width: 0.9; }
.tags rect { fill: rgba(10, 16, 18, 0.9); stroke: #3c4b47; }
.tags text { fill: #d8e0da; font: 11px var(--mono); letter-spacing: 0.04em; }
.envelope rect { fill: var(--paper, #f2f4ed); stroke: var(--lime-ink); stroke-width: 0.8; }
.envelope path { fill: none; stroke: var(--lime-ink); stroke-width: 0.9; }
.envelope .glow { fill: var(--lime); opacity: 0.5; }
.envelope[data-kind="ack"] .glow { fill: var(--cyan); }
.hero[data-phase="idle"] .envelope, .hero[data-phase="offline"] .envelope { opacity: 0; }
.hero[data-phase="hop1"] .hop1, .hero[data-phase="hop2"] .hop2 { stroke: var(--lime); stroke-dasharray: none; filter: drop-shadow(0 0 6px rgba(206, 255, 84, 0.8)); }
.hero[data-phase="accepted"] .hop1, .hero[data-phase="hop2"] .hop1, .hero[data-phase="delivered"] .hop1, .hero[data-phase="delivered"] .hop2, .hero[data-phase="ackAtB"] .hop1, .hero[data-phase="ackAtB"] .hop2, .hero[data-phase="ackWait"] .hop1, .hero[data-phase="ackWait"] .hop2, .hero[data-phase="ackReturn"] .hop1, .hero[data-phase="ackReturn"] .hop2, .hero[data-phase="received"] .hop1, .hero[data-phase="received"] .hop2 { stroke: #8ab83b; stroke-dasharray: none; animation: none; }
.console { padding: 18px 18px 14px; }
.console-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.console-head h2 { font-size: 19px; letter-spacing: -0.01em; }
.steps { display: grid; gap: 8px; }
.step { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.step .num { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 700 13px var(--mono); color: var(--muted); }
.step-title { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.hint { font-size: 11px; color: var(--muted); margin-top: 6px; }
.real { font-size: 12px; color: var(--muted); margin-top: 6px; }
.real b[data-state="offline"] { color: var(--amber); }
.real b[data-state="online"] { color: var(--cyan); }
.real small { display: block; font-size: 11px; color: var(--dim); }
.switch-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 14px 4px 6px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(0, 0, 0, 0.25); font-size: 14px; transition: border-color var(--t), box-shadow var(--t); }
.switch-btn:hover:not(:disabled) { border-color: var(--lime); box-shadow: 0 0 20px rgba(206, 255, 84, 0.15); }
.switch-btn:disabled { opacity: 0.5; }
.track { width: 44px; height: 26px; border-radius: 99px; background: #2a3532; position: relative; transition: background var(--t); flex: none; }
.thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform var(--t); }
.switch-btn[aria-checked="true"] .track { background: var(--lime); }
.switch-btn[aria-checked="true"] .thumb { transform: translateX(18px); background: var(--lime-ink); }
#netSwitch[aria-checked="true"] .track { background: var(--cyan); }
.compose { display: flex; gap: 8px; flex-wrap: wrap; }
.compose input { flex: 1 1 200px; min-width: 0; min-height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); padding: 0 12px; font-size: 15px; }
.compose input:disabled { color: var(--dim); }
.compose input:focus-visible { border-color: var(--cyan); }
.status-box { margin-top: 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line); padding: 12px 14px; border-left: 3px solid var(--line-2); transition: border-color var(--t); }
.status-box[data-phase="pending"], .status-box[data-phase="hop1"] { border-left-color: var(--amber); }
.status-box[data-phase="accepted"], .status-box[data-phase="hop2"], .status-box[data-phase="delivered"], .status-box[data-phase="ackAtB"], .status-box[data-phase="ackWait"], .status-box[data-phase="ackReturn"] { border-left-color: var(--cyan); }
.status-box[data-phase="received"] { border-left-color: var(--lime); box-shadow: 0 0 30px -10px rgba(206, 255, 84, 0.5); }
.status-title { font-weight: 700; font-size: 16px; }
.status-body { font-size: 14px; color: #cdd5cf; margin-top: 2px; }
.status-note { font-size: 13px; color: var(--amber); margin-top: 8px; }
.console-actions { display: flex; gap: 16px; margin-top: 6px; }
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ladder li[data-ladder] { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 10px 34px; background: var(--panel); transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.ladder li[data-ladder]::before { content: ""; position: absolute; left: 12px; top: 13px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.ladder b { display: block; font-size: 14px; }
.ladder span { display: block; font-size: 12px; color: var(--muted); }
.ladder .is-current[data-ladder="pending"] { border-color: var(--amber); }
.ladder .is-current[data-ladder="pending"]::before { background: var(--amber); border-color: var(--amber); }
.ladder .is-current[data-ladder="accepted"] { border-color: var(--cyan); box-shadow: 0 0 24px -8px rgba(120, 221, 225, 0.6); }
.ladder .is-current[data-ladder="accepted"]::before { background: var(--cyan); border-color: var(--cyan); }
.ladder .is-current[data-ladder="received"] { border-color: var(--lime); background: rgba(206, 255, 84, 0.08); box-shadow: 0 0 28px -8px rgba(206, 255, 84, 0.7); }
.ladder .is-current[data-ladder="received"]::before { background: var(--lime); border-color: var(--lime); }
.ladder .is-done::before { background: #6f7d77; border-color: #6f7d77; }
.ladder-term { position: absolute; right: 8px; top: 8px; font: 10px var(--mono); color: var(--cyan); }
.ladder-legend { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.devices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.device { border: 1px dashed var(--line-2); border-radius: 12px; padding: 8px 12px; min-height: 76px; background: rgba(0, 0, 0, 0.2); }
.device-name { display: block; font: 700 11px var(--mono); color: var(--muted); letter-spacing: 0.05em; }
.device-range { display: block; font: 10px var(--mono); color: var(--dim); min-height: 14px; }
.hero[data-relay="in"] #rangeB { color: var(--lime); }
.device-holds { display: block; font-size: 13px; overflow-wrap: anywhere; }
.device[data-device="C"] .device-holds { font-family: var(--mono); font-size: 12.5px; color: var(--lime); }

/* stats */
.stats { border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); }
.stats-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 26px 0; }
.stat b { display: block; font-size: clamp(36px, 4vw, 54px); line-height: 1; letter-spacing: -0.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { font-size: 14px; color: var(--muted); }

/* page hero */
.page-hero { border-bottom: 1px solid var(--line); }
.page-hero-in { padding: 72px 0 64px; max-width: 900px; }
.page-hero h1 { font-size: clamp(40px, 5.6vw, 80px); }

/* sections */
.section { padding: 88px 0; }
.section.shell { padding-inline: 0; }
.band { background: rgba(255, 255, 255, 0.015); border-block: 1px solid var(--line); }
.sec-no { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--lime); text-transform: uppercase; margin-bottom: 18px; }
.sec-no i { width: 18px; height: 1px; background: currentColor; }
h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -0.035em; font-weight: 700; }
.split-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 36px; }
.split-heading p { color: var(--muted); font-size: 17px; max-width: 580px; }
.body-l { font-size: 18px; color: #cfd6d0; margin-top: 18px; max-width: 640px; }
.muted { color: var(--muted); }
.fine { font-size: 11.5px; color: var(--muted); margin-top: 18px; }
.mono-h { font-size: 11px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; font-weight: 600; }

/* name */
.name-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; }
.name-jumps { margin-top: 22px; font: 13px var(--mono); color: var(--lime); }
.acronym { display: grid; gap: 8px; margin-top: 16px; }
.acro-row { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.acro-row dt { display: flex; align-items: baseline; gap: 12px; font-weight: 700; font-size: 18px; }
.acro-row dt b { font-size: 34px; line-height: 1; width: 26px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acro-row dd { color: #cfd6d0; }

/* stack */
.stack { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 36px; align-items: center; }
.rings-wrap { max-width: 460px; width: 100%; margin-inline: auto; }
.rings { width: 100%; height: auto; overflow: visible; }
.rings .lring { cursor: pointer; }
.rings .lring circle { fill: rgba(120, 221, 225, 0.025); stroke: rgba(160, 200, 190, 0.28); stroke-width: 1.2; transition: stroke var(--t), fill var(--t), stroke-width var(--t); }
.rings .lring text { fill: var(--muted); font: 600 9.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.rings .lring:hover circle { stroke: var(--cyan); }
.rings .lring.is-on circle { stroke: var(--lime); stroke-width: 2.4; fill: rgba(206, 255, 84, 0.06); filter: drop-shadow(0 0 10px rgba(206, 255, 84, 0.55)); }
.rings .lring.is-on text { fill: var(--lime); }
.rings .core { animation: corepulse 3s ease-in-out infinite; transform-origin: 220px 220px; }
@keyframes corepulse { 50% { opacity: 0.65; } }
.rings .core-env rect { fill: var(--ink); } .rings .core-env path { fill: none; stroke: #10140a; stroke-width: 1.5; }
.rings .core-t { fill: var(--ink); font: 700 11px var(--sans); }
.center { text-align: center; }
.stack-ui { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: start; }
.tablist.vertical { flex-direction: column; align-items: stretch; }
.tablist.vertical [role="tab"] { justify-content: flex-start; border-radius: 12px; }
.tab-no { font: 11px var(--mono); color: var(--dim); }
[aria-selected="true"] .tab-no { color: var(--lime-ink); }
.stack-panel { padding: 22px; min-height: 200px; }
.stack-body { font-size: 17px; color: #dfe6e0; }
.proto-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.proto-chips a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px; font: 12px var(--mono); text-decoration: none; border: 1px solid rgba(120, 221, 225, 0.35); color: var(--cyan); background: rgba(120, 221, 225, 0.06); }
.proto-chips a:hover { border-color: var(--lime); color: var(--lime); }

/* pass */
.pass-sec { border-block: 1px solid var(--line); background: radial-gradient(700px 400px at 80% 50%, rgba(192, 178, 255, 0.1), transparent 70%); }
.pass-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.pass-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.pass-steps li { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--panel); display: grid; gap: 4px; }
.pass-steps b { font-size: 16px; }
.pass-steps span:last-child { color: var(--muted); font-size: 14px; }
.pass-card { padding: 22px; }
.proof-lines { display: grid; gap: 8px; margin: 6px 0 14px; }
.proof-lines li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); }
.proof-lines code { font: 13px var(--mono); }
.proof-lines .ok code { color: var(--lime); }
.proof-lines .pseudo code { color: var(--violet); }
.never { font-size: 14px; color: var(--muted); }

/* timeline + envelope */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: s; position: relative; }
.tl { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; background: var(--panel); }
.tl-no { font: 12px var(--mono); color: var(--lime); }
.tl h3 { font-size: 22px; margin: 6px 0; }
.tl p { color: var(--muted); font-size: 14.5px; }
.env-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; }
.env-visual { padding: 26px; display: grid; gap: 8px; }
.env-layer { border-radius: 10px; padding: 12px 14px; border: 1px solid var(--line-2); font: 12px var(--mono); color: var(--muted); margin-inline: calc(var(--i) * 8px); transition: all var(--t); background: rgba(255, 255, 255, 0.02); }
.env-layer.env-payload { background: repeating-linear-gradient(135deg, rgba(206, 255, 84, 0.1) 0 6px, transparent 6px 12px); color: var(--lime); }
.env-layer.is-on { border-color: var(--lime); color: var(--ink); box-shadow: 0 0 24px -6px rgba(206, 255, 84, 0.6); transform: translateX(6px); }
.env-list { display: grid; gap: 8px; }
.env-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color var(--t); }
.env-item:hover, .env-item:focus { border-color: var(--cyan); }
.env-item dt { font-weight: 700; }
.env-item dd { color: var(--muted); font-size: 14px; }
.rules { margin-top: 28px; padding: 22px; }
.rules h3 { font-size: 18px; margin-bottom: 10px; }
.rules ol { display: grid; gap: 8px; counter-reset: r; }
.rules li { counter-increment: r; padding-left: 34px; position: relative; color: #dfe6e0; }
.rules li::before { content: counter(r); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); font: 700 12px var(--mono); display: grid; place-items: center; }

/* how */
.domains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 40px; }
.domains div { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--panel); }
.domains dt { font: 700 13px var(--mono); letter-spacing: 0.08em; color: var(--lime); }
.domains dd { font-size: 14px; color: #cfd6d0; margin-top: 6px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.how-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 90px; }
.how-action { font-size: 16px; font-weight: 700; }
.how-action span { display: block; font: 600 10.5px var(--mono); text-transform: uppercase; color: var(--dim); letter-spacing: 0.08em; }
.how-card h3 { font-size: 20px; letter-spacing: -0.01em; color: var(--cyan); }
.how-card h3 small { display: block; font: 10.5px var(--mono); color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.how-card dt { font: 600 10.5px var(--mono); color: var(--dim); text-transform: uppercase; margin-top: 4px; letter-spacing: 0.06em; }
.how-card dd { font-size: 14px; color: #d3dad4; }

/* protocol library */
.depth { padding: 14px 18px; margin-bottom: 26px; color: #dfe6e0; }
.lib-group { display: flex; gap: 12px; align-items: baseline; font-size: 22px; margin: 34px 0 14px; }
.lib-group span { font: 12px var(--mono); color: var(--lime); }
.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.proto { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: var(--panel); scroll-margin-top: 90px; }
.proto:target { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(206, 255, 84, 0.18); }
.proto h4 { font-size: 17px; color: var(--cyan); }
.proto dt { font: 600 10.5px var(--mono); text-transform: uppercase; color: var(--dim); margin-top: 8px; letter-spacing: 0.06em; }
.proto dd { font-size: 14px; color: #d3dad4; }
.used { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.used .lbl { width: 100%; font-size: 10.5px; text-transform: uppercase; color: var(--dim); }
.used a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--line-2); }
.used a:hover { color: var(--lime); }

/* hubs */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hub { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 90px; transition: transform var(--t); }
.hub:hover { transform: translateY(-3px); }
.hub-art { border-radius: 12px; overflow: hidden; aspect-ratio: 480 / 300; background: #0f1714; }
.hub-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.hub:hover .hub-art img { transform: scale(1.04); }
.hub h3 { font-size: 21px; letter-spacing: -0.01em; }
.hub-tag { color: var(--muted); font-size: 14px; margin-top: -4px; }
.hub-modes { display: grid; gap: 6px; font-size: 14px; }
.hub-modes dt { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cyan); }
.hub-modes div:first-child dt { color: var(--lime); }
.hub-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.hub-more { color: var(--lime); font-weight: 700; text-decoration: none; font-size: 14px; min-height: 28px; display: inline-flex; align-items: center; }
.hub-more.dim { color: var(--muted); font-weight: 600; }
.hub-list { width: 100%; }
.hub-list summary { cursor: pointer; font-size: 14px; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.hub-list ul { margin-top: 6px; display: grid; gap: 2px; }
.hub-list li a { display: flex; align-items: center; min-height: 28px; font-size: 13.5px; color: #cfd6d0; }
.hub-list a:hover { color: var(--lime); }

/* stage badge */
.stage { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor; line-height: 1.35; max-width: 100%; }
.stage::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.stage-available { color: var(--lime); background: rgba(206, 255, 84, 0.06); }
.stage-dev { color: var(--ink); background: rgba(255, 255, 255, 0.06); }

/* tabs */
.tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
[role="tab"] { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.02); transition: background var(--t), color var(--t), border-color var(--t); }
[role="tab"]:hover { border-color: var(--cyan); }
[role="tab"][aria-selected="true"] { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); box-shadow: 0 0 24px -6px rgba(206, 255, 84, 0.7); }
.mode-dot { width: 9px; height: 9px; border-radius: 50%; }
.mode-offline { background: var(--lime); }
.mode-private { background: var(--violet); }
.mode-hardened { background: var(--amber); }
.mode-fast { background: var(--cyan); }
[role="tab"][aria-selected="true"] .mode-dot { background: var(--lime-ink); }
.tabpanel { padding: 22px; }
.no-js .tabpanel + .tabpanel { margin-top: 12px; }
.vpn-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 24px; align-items: start; }
.vpn-panel h3 { font-size: 26px; }
.vpn-panel h3 small { display: block; font: 12px var(--mono); color: var(--muted); margin-top: 4px; letter-spacing: 0.03em; }
.vpn-panel .vpn-top p { margin-top: 10px; color: #cfd6d0; }
.meters { display: grid; gap: 10px; }
.meter-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.meter { display: inline-flex; gap: 4px; }
.meter i { width: 22px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }
.meter i.on { background: var(--grad); background-size: 400% 100%; box-shadow: 0 0 10px rgba(206, 255, 84, 0.35); }
.tradeoffs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.tradeoffs div { border-top: 1px solid var(--line-2); padding-top: 8px; }
.tradeoffs dt { font: 600 10.5px var(--mono); text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em; }
.tradeoffs dd { font-size: 15px; margin-top: 2px; }
.rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.rule-grid > div { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--panel); border-top: 2px solid var(--lime); }
.rule-grid h3 { font-size: 17px; }
.rule-grid p { color: #cfd6d0; font-size: 14.5px; margin-top: 4px; }

/* nodes */
.node-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 16px; align-items: start; }
.node-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.res { border-radius: 12px; padding: 16px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); }
.res h4 { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.res-relay h4 { color: var(--lime); }
.res-storage h4 { color: var(--cyan); }
.res-compute h4 { color: var(--violet); }
.res p { margin-top: 6px; color: #d5dcd6; }
.configurator { padding: 20px; margin-top: 58px; }
.configurator h3 { font-size: 18px; }
.roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.role-tog { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; font-size: 14px; }
.role-tog input { accent-color: var(--lime); width: 16px; height: 16px; }
.sliders { display: grid; gap: 12px; }
.sliders label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.sliders label span { display: flex; justify-content: space-between; }
.sliders output { color: var(--ink); font-family: var(--mono); }
.sliders input[type="range"] { width: 100%; accent-color: var(--lime); min-height: 28px; }
.sliders input:disabled { opacity: 0.4; }
.node-sum { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; margin-top: 14px; }
.ring { width: 110px; height: 110px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray 500ms var(--ease); }
.ring-bg { stroke: rgba(255, 255, 255, 0.07); }
.ring-relay { stroke: var(--lime); stroke-dasharray: 0 100; }
.ring-storage { stroke: var(--cyan); stroke-dasharray: 0 100; }
.ring-compute { stroke: var(--violet); stroke-dasharray: 0 100; }
#nodeSummary { font-size: 14px; color: #dfe6e0; }
.related { padding-top: 0; }
.rel-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rel-list a { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; height: 100%; }
.rel-list b { font-size: 15px; }
.rel-list span { color: var(--muted); font-size: 13.5px; }

/* catalogue */
.cat-tools { position: sticky; top: 66px; z-index: 5; background: rgba(6, 9, 11, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 12px 0; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, 0.02); }
.chip:hover { border-color: var(--cyan); }
.chip small { font: 11px var(--mono); color: var(--muted); margin-left: 4px; }
.chip[aria-pressed="true"] { background: var(--ink); color: #11181a; border-color: var(--ink); }
.chip[aria-pressed="true"] small { color: #46524f; }
.cat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 10px; }
.search input { min-height: 42px; width: min(360px, 80vw); border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); padding: 0 12px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; min-height: 42px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--lime); }
.cat-count { font: 12px var(--mono); color: var(--muted); margin-left: auto; }
.family { margin-top: 34px; scroll-margin-top: 170px; }
.family-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end; border-bottom: 1px solid var(--line-2); padding-bottom: 10px; margin-bottom: 14px; }
.family-head h3 { font-size: 26px; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 12px; }
.family-head h3 span { font: 12px var(--mono); color: var(--lime); }
.family-head h3 small { font: 12px var(--mono); color: var(--muted); }
.family-head p { color: var(--muted); font-size: 14px; }
.opt-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opt { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 190px; transition: border-color var(--t), box-shadow var(--t); }
.opt.is-target, .opt:target { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(206, 255, 84, 0.18), 0 0 40px -10px rgba(206, 255, 84, 0.5); }
.opt-head { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline; }
.opt-num { font-size: 11px; color: var(--dim); }
.opt h4 { font-size: 17px; letter-spacing: -0.005em; line-height: 1.25; }
.opt-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag-demo { font: 10.5px var(--mono); color: var(--cyan); text-transform: uppercase; letter-spacing: 0.05em; }
.opt-usage { font-size: 14.5px; color: #dbe1dc; }
.lbl { display: block; font-size: 10.5px; text-transform: uppercase; color: var(--dim); margin-bottom: 2px; }
.opt-net { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-net div { border-radius: 10px; padding: 8px 10px; background: rgba(0, 0, 0, 0.25); }
.opt-net dt { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
.net-off dt { color: var(--lime); }
.net-on dt { color: var(--cyan); }
.opt-net dd { font-size: 13.5px; color: #cfd6d0; margin-top: 2px; }
.opt-proto { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-proto .lbl { width: 100%; margin: 0; }
.opt-proto a { font: 11.5px var(--mono); text-decoration: none; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(192, 178, 255, 0.35); color: var(--violet); background: rgba(192, 178, 255, 0.06); min-height: 24px; display: inline-flex; align-items: center; }
.opt-proto a:hover { border-color: var(--lime); color: var(--lime); }
.opt-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.opt-co { font: 11px var(--mono); color: var(--dim); }
.permalink { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-2); text-decoration: none; font: 700 14px var(--mono); color: var(--muted); position: relative; }
.permalink:hover { color: var(--lime); border-color: var(--lime); }
.permalink[data-state]::after { content: attr(data-msg); position: absolute; right: 0; bottom: calc(100% + 6px); background: var(--ink); color: #11181a; font: 11px var(--mono); padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.cat-none { margin-top: 20px; color: var(--amber); }

/* lab */
.lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.term { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; scroll-margin-top: 90px; }
.term:target { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(206, 255, 84, 0.2); }
.term header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.term-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; background: conic-gradient(from 210deg, rgba(206, 255, 84, 0.9), rgba(120, 221, 225, 0.9), rgba(192, 178, 255, 0.9), rgba(206, 255, 84, 0.9)); -webkit-mask: radial-gradient(circle at center, transparent 6px, #000 7px); mask: radial-gradient(circle at center, transparent 6px, #000 7px); }
.term h3 { font-size: 18px; line-height: 1.25; }
.term abbr { text-decoration: none; font: 700 12px var(--mono); background: var(--lime); color: var(--lime-ink); padding: 2px 6px; border-radius: 5px; margin-right: 4px; vertical-align: 2px; }
.term dl { display: grid; gap: 2px; }
.term dt { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); margin-top: 8px; }
.term dd { font-size: 14px; color: #d3dad4; }
.term dd[data-f="limit"] { color: var(--cyan); }

/* atlas */
.atlas-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.atlas-feats { display: grid; gap: 8px; margin-top: 22px; }
.feat { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; background: var(--panel); }
.feat b { font-size: 15px; }
.feat span { font-size: 13.5px; color: var(--muted); }
.atlas-fig { position: relative; overflow: hidden; }
.atlas-fig img { width: 100%; }
.atlas-scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(206, 255, 84, 0.16) 50%, transparent 100%); width: 30%; animation: scan 4.5s linear infinite; }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
.atlas-fig figcaption { position: absolute; left: 12px; bottom: 12px; font: 11px var(--mono); background: rgba(6, 9, 11, 0.86); padding: 5px 9px; border-radius: 6px; color: var(--muted); text-transform: uppercase; }

/* get */
.get-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 36px; align-items: center; padding: 40px; background: linear-gradient(120deg, rgba(206, 255, 84, 0.07), rgba(120, 221, 225, 0.05) 50%, rgba(192, 178, 255, 0.08)); }
.stores { display: grid; gap: 10px; }
.store { display: grid; padding: 12px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.35); text-decoration: none; }
.store small { font-size: 12px; color: var(--muted); }
.store b { font-size: 19px; }

/* participate */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.path { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 22px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 90px; }
.path h3 { font-size: 21px; }
.path p { color: #cfd6d0; font-size: 15px; flex: 1; }
.path-partner { border-style: dashed; }
.money-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 30px; }
.money-grid h3 { font-size: 19px; margin-bottom: 12px; }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; color: #d5dcd6; font-size: 15px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(-45deg); }
.cos { display: grid; gap: 12px; }
.cos div { border-left: 2px solid var(--line-2); padding-left: 14px; }
.cos dt { font-weight: 700; }
.cos dd { color: var(--muted); font-size: 14.5px; }

/* faq */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; }
.qs details { border-top: 1px solid var(--line); }
.qs details:last-child { border-bottom: 1px solid var(--line); }
.qs summary { cursor: pointer; padding: 16px 0; font-size: 18px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; color: var(--lime); font-size: 22px; line-height: 1; transition: transform var(--t); }
.qs details[open] summary::after { transform: rotate(45deg); }
.qs p { padding: 0 0 18px; color: #cfd6d0; max-width: 680px; }

/* ask */
.ask { width: min(720px, calc(100% - 24px)); max-height: min(78vh, 760px); padding: 0; border: 1px solid var(--line-2); border-radius: 20px; background: rgba(10, 16, 19, 0.96); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(120, 221, 225, 0.1), 0 0 60px -20px rgba(120, 221, 225, 0.4); }
.ask::backdrop { background: rgba(2, 4, 5, 0.7); backdrop-filter: blur(6px); }
.ask[open] { animation: pop 220ms var(--ease); }
@keyframes pop { from { transform: translateY(10px) scale(0.98); opacity: 0; } }
.ask-in { padding: 18px; display: grid; gap: 12px; }
.ask-head { display: flex; align-items: center; gap: 10px; }
.ask-head h2 { font-size: 18px; letter-spacing: 0; flex: 1; }
.ask-close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 20px; }
#askInput { width: 100%; min-height: 52px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.35); padding: 0 16px; font-size: 16px; }
#askInput:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(120, 221, 225, 0.2); }
.ask-suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 11px var(--mono); color: var(--dim); }
.ask-suggest .chip { min-height: 32px; font-size: 13px; font-family: var(--sans); }
.ask-count { font: 12px var(--mono); color: var(--muted); min-height: 16px; }
.ask-results { display: grid; gap: 8px; overflow: auto; max-height: 46vh; }
.ask-results li { animation: rise 320ms var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.ask-hit { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); text-decoration: none; background: rgba(255, 255, 255, 0.02); }
.ask-hit:hover, .ask-hit.is-sel, .ask-hit:focus-visible { border-color: var(--lime); background: rgba(206, 255, 84, 0.06); }
.ask-hit small { font: 10.5px var(--mono); color: var(--cyan); text-transform: uppercase; letter-spacing: 0.06em; }
.ask-hit b { font-size: 16px; }
.ask-hit > span { font-size: 13.5px; color: var(--muted); }
.ask-modes { display: grid; gap: 2px; margin-top: 4px; }
.ask-modes i { font-style: normal; font-size: 12.5px; color: #cfd6d0; }
.ask-note { font-size: 12px; color: var(--dim); }
.ask-note span { display: block; font-family: var(--mono); font-size: 11px; margin-top: 2px; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 48px 0 26px; background: rgba(0, 0, 0, 0.4); }
.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: 36px; }
.foot p { color: var(--muted); font-size: 14px; margin-top: 10px; }
.foot ul { display: grid; gap: 4px; }
.foot ul a { color: #cfd6d0; font-size: 14px; display: inline-flex; min-height: 26px; align-items: center; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); font: 11px var(--mono); color: var(--dim); }
.noscript { position: fixed; bottom: 0; left: 0; right: 0; background: var(--amber); color: #1a1205; padding: 10px 16px; text-align: center; margin: 0; }
.no-js .console .steps, .no-js .console .status-box { opacity: 0.6; }

/* responsive */
@media (max-width: 1280px) {
  .desktop { display: none; }
  .mobmenu { display: inline-block; }
  .mast-right { margin-left: auto; }
}
@media (max-width: 1080px) {
  .hero-grid { display: flex; flex-direction: column; gap: 14px; }
  .hero-left, .hero-right { display: contents; }
  .intro { order: 1; } .console { order: 2; } .instrument { order: 3; } .ladder { order: 4; } .devices { order: 5; } .quick { order: 6; }
  .how-grid, .hub-grid, .lab-grid, .lib-grid, .rel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .domains, .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .name-grid, .atlas-grid, .faq-grid, .money-grid, .pass-grid, .env-grid, .stack, .node-wrap, .get-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .configurator { margin-top: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .shell { width: calc(100% - 32px); }
  .mast-in { min-height: 60px; gap: 8px; }
  .brand { font-size: 20px; }
  .brand img { width: 28px; height: 28px; }
  .word-network, .ask-txt, .ask-btn kbd, .get-btn { display: none; }
  .ask-btn { padding: 0 9px; }
  html { scroll-padding-top: 70px; }
  .hero-grid { padding: 16px 0 24px; gap: 12px; }
  h1 { font-size: 42px; margin: 10px 0; }
  .lead { font-size: 15.5px; }
  .hero-actions { margin-top: 12px; }
  .hero-sub { display: none; }
  .ask-inline { display: none; }
  .instrument-head { display: none; }
  .instrument-foot { font-size: 9.5px; padding: 6px 10px; }
  .terrain { aspect-ratio: 740 / 440; }
  .terrain-img { object-fit: cover; object-position: 50% 50%; }
  .eyebrow { font-size: 10px; gap: 6px; }
  .eyebrow i { display: none; }
  .console { padding: 14px 12px 12px; }
  .ladder, .devices { grid-template-columns: minmax(0, 1fr); }
  .device { min-height: 0; }
  .stats-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero-in { padding: 44px 0 40px; }
  .section { padding: 56px 0; }
  .split-heading { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 24px; }
  .how-grid, .hub-grid, .lab-grid, .lib-grid, .rel-list, .paths, .rule-grid, .node-res, .opt-list, .domains, .timeline, .pass-steps { grid-template-columns: minmax(0, 1fr); }
  .stack-ui, .vpn-top { grid-template-columns: minmax(0, 1fr); }
  .tablist.vertical { flex-direction: row; flex-wrap: wrap; }
  .rings-wrap { max-width: 340px; }
  .tradeoffs { grid-template-columns: 1fr 1fr; }
  .acro-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .family-head { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .opt-net { grid-template-columns: minmax(0, 1fr); }
  .cat-tools { position: static; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .chip { flex: none; }
  .cat-count { margin-left: 0; width: 100%; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .get-in { padding: 24px; }
  .lang ul { right: -40px; }
  .node-sum { grid-template-columns: 90px 1fr; }
  .ring { width: 90px; height: 90px; }
}
@media (max-width: 360px) {
  h1 { font-size: 36px; }
  .compose .btn { width: 100%; justify-content: center; }
}
@media (forced-colors: active) {
  .stage, .switch-btn, .chip, [role="tab"] { border: 1px solid CanvasText; }
  .grad, .stat b, .acro-row dt b { color: CanvasText; background: none; }
}

/* ---------------- v4: views, diagrams, specs, A to Z, LILI ---------------- */
.js .view[hidden] { display: none !important; }
.js .view:not([hidden]) { animation: viewin 420ms var(--ease); }
@keyframes viewin { from { opacity: 0; transform: translateY(8px); } }
.desktop a[aria-current="page"] { color: var(--lime-ink); background: var(--lime); }
h1:focus, h1:focus-visible { outline: none; }
.diagram { padding: 18px; margin-top: 22px; overflow: hidden; }
.diagram svg { width: 100%; height: auto; display: block; max-width: 860px; margin-inline: auto; }
.diagram .passd { max-width: 780px; }
.nodes-diagram svg { max-width: 620px; }
.diagram figcaption { margin: 10px 0 0; }
.diagram-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 8px; }
svg text { font-family: var(--sans); }
/* sequence */
.seq .lane rect { fill: rgba(120, 221, 225, 0.08); stroke: rgba(120, 221, 225, 0.5); }
.seq .lane text { fill: var(--ink); font: 700 13px var(--sans); }
.seq .lane line { stroke: rgba(160, 200, 190, 0.3); stroke-dasharray: 4 6; }
.seq .arrow line { stroke-width: 2; stroke-dasharray: 6 5; animation: dash 1.2s linear infinite; }
.seq marker path { fill: var(--muted); }
.seq .arrow text { font: 600 11.5px var(--mono); }
.seq .arrow-msg line { stroke: var(--lime); } .seq .arrow-msg text { fill: var(--lime); }
.seq .arrow-pch line { stroke: var(--cyan); } .seq .arrow-pch text { fill: var(--cyan); }
.seq .arrow-ack line { stroke: var(--violet); } .seq .arrow-ack text { fill: var(--violet); }
.seq .arrow { opacity: 0; animation: seqin 0.6s var(--ease) forwards; animation-delay: var(--d); }
@keyframes seqin { to { opacity: 1; } }
/* key exchange */
.keyx .kbox rect { fill: rgba(0, 0, 0, 0.35); stroke: var(--line-2); stroke-width: 1.4; }
.keyx .kbox text { fill: var(--ink); font: 700 13px var(--mono); }
.keyx .k-classic rect { stroke: var(--cyan); } .keyx .k-pq rect { stroke: var(--violet); }
.keyx .k-kdf rect { stroke: var(--amber); } .keyx .k-session rect { stroke: var(--lime); fill: rgba(206, 255, 84, 0.1); }
.keyx .kflow { fill: none; stroke: var(--lime); stroke-width: 2; stroke-dasharray: 5 5; animation: dash 1s linear infinite; }
.keyx .kfoot { fill: var(--muted); font: 12px var(--mono); }
/* pass */
.passd .pnode rect, .passd .psvc rect { fill: rgba(0, 0, 0, 0.35); stroke: var(--line-2); stroke-width: 1.4; }
.passd .pnode text, .passd .psvc text { fill: var(--ink); font: 700 12px var(--sans); }
.passd .phone rect:first-child { stroke: var(--violet); }
.passd .chip-ic { fill: rgba(192, 178, 255, 0.18) !important; stroke: var(--violet) !important; }
.passd .proof rect { stroke: var(--lime); fill: rgba(206, 255, 84, 0.1); }
.passd .proof text.small { font: 700 10px var(--mono); fill: var(--lime); }
.passd .psvc text.pseudo { font: 10px var(--mono); fill: var(--violet); font-weight: 400; }
.passd .pflow { fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-dasharray: 5 6; animation: dash 1.1s linear infinite; }
/* vpn routes */
.route { width: 100%; max-width: 760px; height: auto; margin: 18px auto 4px; display: block; }
.route .r-line { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 6 6; animation: dash 1s linear infinite; }
.route .r-node circle { fill: #0d1416; stroke: var(--cyan); stroke-width: 1.6; }
.route .r-you circle { stroke: var(--lime); fill: rgba(206, 255, 84, 0.15); }
.route .r-dest circle { stroke: var(--violet); }
.route .r-node text { fill: var(--muted); font: 11px var(--mono); }
.route .r-packet { fill: var(--lime); filter: drop-shadow(0 0 6px var(--lime)); animation: packet 3.2s linear infinite; }
@keyframes packet { from { transform: translateX(0); } to { transform: translateX(600px); } }
.route-hardened .r-packet { animation-duration: 6s; animation-timing-function: steps(12, end); }
.route-fast .r-packet { animation-duration: 1.4s; }
/* nodes */
.nodes-diagram { max-width: 760px; margin: 0 auto 26px; }
.nodesd .n-link { stroke: rgba(120, 221, 225, 0.4); stroke-width: 1.5; stroke-dasharray: 4 6; fill: none; animation: dash 1.4s linear infinite; }
.nodesd .n-link.soft { stroke: rgba(160, 200, 190, 0.14); }
.nodesd .n-hub circle { fill: rgba(206, 255, 84, 0.08); stroke: var(--lime); stroke-width: 1.6; }
.nodesd .n-hub .halo { fill: none; stroke: rgba(206, 255, 84, 0.25); animation: corepulse 2.6s ease-in-out infinite; }
.nodesd .n-dev circle { fill: #0d1416; stroke: var(--cyan); stroke-width: 1.6; }
.nodesd .n-dev text { fill: var(--ink); font: 700 12px var(--sans); }
.nodesd .n-dev[data-node="nas"] circle, .nodesd .n-dev[data-node="server"] circle { stroke: var(--violet); }
.nodesd .n-pkt { fill: var(--lime); animation: npkt 2.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes npkt { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)); opacity: 0; } }
/* atlas hex map */
.hexmap { width: 100%; height: auto; display: block; padding: 12px; }
.hexmap .hx { fill: rgba(120, 221, 225, 0.08); stroke: rgba(120, 221, 225, 0.22); stroke-width: 0.8; }
.hexmap .hx.warm { fill: rgba(120, 221, 225, 0.3); }
.hexmap .hx.hot { fill: rgba(206, 255, 84, 0.55); stroke: var(--lime); animation: hexpulse 4s ease-in-out infinite; animation-delay: var(--d); }
.hexmap .hx.hidden { fill: none; stroke: rgba(244, 188, 114, 0.6); stroke-dasharray: 2 2; }
@keyframes hexpulse { 50% { fill: rgba(206, 255, 84, 0.2); } }
.hexmap .hx-legend text { fill: var(--muted); font: 10px var(--mono); }
.atlas-fig { aspect-ratio: auto; }
/* specs */
.spec-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 6px 20px; }
.spec-table div { display: grid; grid-template-columns: 170px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec-table div:nth-child(odd) { padding-right: 20px; }
.spec-table dt { font: 600 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); }
.spec-table dd { font-size: 14px; color: #dfe6e0; }
.proto .spec { font: 12.5px var(--mono); color: var(--violet); }
/* A to Z */
.az-tools { margin-bottom: 14px; }
.az-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.az-letters a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-2); text-decoration: none; font: 700 13px var(--mono); }
.az-letters a:hover { border-color: var(--lime); color: var(--lime); }
.az-group { display: grid; grid-template-columns: 60px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.az-letter { font-size: 34px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.az-group dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.az-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); scroll-margin-top: 90px; }
.az-item dt { font-weight: 700; font-size: 16px; color: var(--cyan); }
.az-item dd { font-size: 13.5px; color: #d3dad4; margin-top: 4px; }
.az-item .az-salto { color: var(--lime); }
.az-item.is-target, .term.is-target, .proto.is-target { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(206, 255, 84, 0.2); }
/* LILI answer */
.ask-head > div { flex: 1; }
.ask-by { font: 11px var(--mono); color: var(--cyan); letter-spacing: 0.06em; }
.ask-orb.big { width: 30px; height: 30px; }
.ask-form { display: flex; gap: 8px; }
.ask-form #askInput { flex: 1; }
.ask-answer { border: 1px solid rgba(120, 221, 225, 0.4); border-radius: 14px; padding: 14px 16px; background: linear-gradient(120deg, rgba(120, 221, 225, 0.07), rgba(192, 178, 255, 0.06)); }
.ask-answer[data-state="thinking"] .ask-answer-text { color: var(--muted); animation: blink 1.4s ease-in-out infinite; }
.ask-answer-text { white-space: pre-wrap; font-size: 15px; max-height: 46vh; overflow-y: auto; }
.ask-answer-text p { margin: 0 0 8px; } .ask-answer-text p:last-child { margin-bottom: 0; }
.ask-answer-text ul { margin: 0 0 8px; padding-left: 20px; } .ask-answer-text li { margin: 2px 0; }
.ask-answer-text strong { color: var(--ink); }
.ask-answer-text a, .ask-sources a { color: var(--lime); }
.ask-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font: 12px var(--mono); color: var(--muted); align-items: center; }
.ask-note .kbd { display: block; font-family: var(--mono); font-size: 11px; margin-top: 2px; }
@media (max-width: 1080px) { .diagram-grid, .spec-table, .az-group dl { grid-template-columns: minmax(0, 1fr); } .spec-table div:nth-child(odd) { padding-right: 0; } }
@media (max-width: 760px) { .spec-table div { grid-template-columns: minmax(0, 1fr); gap: 4px; } .az-group { grid-template-columns: minmax(0, 1fr); } .diagram { padding: 10px; } }

/* ================= v5: illustrations and interactive explanations ================= */
.page-hero-in { max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 40px; align-items: center; }
.ph-text { max-width: 820px; }
.hero-art { width: 100%; max-width: 380px; justify-self: end; aspect-ratio: 1; filter: drop-shadow(0 0 40px rgba(206, 255, 84, 0.12)); }
.art { width: 100%; height: 100%; overflow: visible; }
.art .spin { stroke: rgba(120, 221, 225, 0.45); stroke-width: 1.5; transform-origin: 210px 210px; animation: rot 26s linear infinite; }
.art .spin.s1 { animation-duration: 18s; animation-direction: reverse; stroke: rgba(192, 178, 255, 0.5); }
.art .spin.s2 { animation-duration: 12s; stroke: rgba(206, 255, 84, 0.55); }
.art .spin.s3 { animation-duration: 9s; animation-direction: reverse; }
.art .bit { fill: var(--lime); opacity: 0.2; animation: blinkbit 3s ease-in-out infinite; animation-delay: var(--d); }
.art .core-box { fill: rgba(206, 255, 84, 0.08); stroke: var(--lime); stroke-width: 1.5; }
.orb-ring { fill: none; stroke: var(--line-2); stroke-dasharray: 3 7; }
.orb-spin { transform-origin: 210px 210px; animation: rot 60s linear infinite; }
.orb-ic rect { fill: rgba(16, 24, 27, 0.9); stroke: var(--line-2); }
.orb-core { fill: rgba(206, 255, 84, 0.08); stroke: var(--lime); stroke-width: 1.5; }
.tun { fill: none; stroke: rgba(120, 221, 225, 0.35); stroke-width: 1.5; animation: tunnel 3s ease-in-out infinite; animation-delay: var(--d); }
.tun-axis { stroke: rgba(206, 255, 84, 0.3); stroke-dasharray: 4 6; animation: dash 1s linear infinite; }
.lock rect, .lock path { fill: none; stroke: var(--violet); stroke-width: 2; }
.lock { animation: blinkbit 2.7s ease-in-out infinite; animation-delay: var(--d); }
.tun-pkt { fill: var(--lime); filter: drop-shadow(0 0 8px var(--lime)); animation: tunpkt 2.7s linear infinite; }
.art-nodes .nl { stroke: rgba(120, 221, 225, 0.4); stroke-width: 1.4; stroke-dasharray: 4 6; animation: dash 1.5s linear infinite; animation-delay: var(--d); }
.art-nodes .nd circle { fill: #0d1416; stroke: var(--cyan); stroke-width: 1.5; }
.art-nodes .nd rect { fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: 0.7; }
.art-nodes .nd { animation: blinkbit 3.4s ease-in-out infinite; animation-delay: var(--d); }
.nd-hub { fill: rgba(206, 255, 84, 0.08); stroke: var(--lime); stroke-width: 1.6; }
.mk-e { stroke: rgba(192, 178, 255, 0.5); stroke-width: 1.4; animation: mklight 4.8s ease-in-out infinite; animation-delay: var(--d); }
.mk-n { fill: #0d1416; stroke: var(--violet); stroke-width: 1.4; animation: mknode 4.8s ease-in-out infinite; animation-delay: var(--d); }
.mk-n.l0 { stroke: var(--lime); fill: rgba(206, 255, 84, 0.12); }
.gl-o { fill: rgba(120, 221, 225, 0.04); stroke: var(--line-2); }
.gl-lon { fill: none; stroke: rgba(120, 221, 225, 0.32); animation: globe 8s linear infinite; animation-delay: var(--d); transform-origin: 210px 210px; }
.gl-lat { fill: none; stroke: rgba(120, 221, 225, 0.2); }
.gl-hex { fill: rgba(206, 255, 84, 0.5); stroke: var(--lime); animation: blinkbit 3.2s ease-in-out infinite; animation-delay: var(--d); }
.jp { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 6 8; animation: dash 1.2s linear infinite; }
.jp.p1 { stroke: rgba(206, 255, 84, 0.5); } .jp.p2 { stroke: rgba(120, 221, 225, 0.5); } .jp.p3 { stroke: rgba(192, 178, 255, 0.5); }
.jdot { fill: var(--lime); animation: blinkbit 2.1s ease-in-out infinite; animation-delay: var(--d); }
.j-core { fill: rgba(206, 255, 84, 0.07); stroke: var(--lime); stroke-width: 1.5; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes blinkbit { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes tunnel { 0%, 100% { stroke-opacity: 0.2; } 50% { stroke-opacity: 0.8; } }
@keyframes tunpkt { from { transform: translateX(0); } to { transform: translateX(380px); } }
@keyframes mklight { 0%, 15% { stroke: rgba(192, 178, 255, 0.25); } 30%, 70% { stroke: var(--lime); } 100% { stroke: rgba(192, 178, 255, 0.25); } }
@keyframes mknode { 0%, 15% { fill: #0d1416; } 30%, 70% { fill: rgba(206, 255, 84, 0.25); } 100% { fill: #0d1416; } }
@keyframes globe { from { transform: scaleX(1); } 50% { transform: scaleX(0.05); } to { transform: scaleX(1); } }

/* term chips */
.tchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font: 600 13px var(--mono); text-decoration: none; white-space: nowrap; border: 1px solid; transition: background var(--t), transform var(--t); }
.tchip.est { color: var(--cyan); border-color: rgba(120, 221, 225, 0.4); background: rgba(120, 221, 225, 0.06); }
.tchip.inv { color: var(--lime); border-color: rgba(206, 255, 84, 0.45); background: rgba(206, 255, 84, 0.07); }
.tchip.inv::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.tchip:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.06); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }

/* what the network sees */
.xray-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 24px; align-items: start; }
.xray-left { padding: 20px; position: sticky; top: 86px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(0, 0, 0, 0.3); }
.seg-wrap { flex-wrap: wrap; border-radius: 16px; }
.seg button { border: 0; background: none; color: var(--muted); font: 600 14px var(--sans); padding: 9px 16px; border-radius: 999px; cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--lime); color: var(--lime-ink); }
.xray-svg { width: 100%; height: auto; margin: 14px 0 6px; overflow: visible; }
.xray-svg text { fill: var(--muted); font: 600 12px var(--mono); }
.xn circle, .xn rect { fill: #0d1416; stroke: var(--cyan); stroke-width: 1.6; }
.xsrv rect { stroke: var(--amber); }
.xw { fill: none; stroke: rgba(244, 188, 114, 0.6); stroke-width: 2; stroke-dasharray: 6 6; animation: dash 1s linear infinite; }
.xw-hid { fill: none; stroke: rgba(206, 255, 84, 0.6); stroke-width: 2; stroke-dasharray: 6 6; animation: dash 1s linear infinite; opacity: 0; }
.xobs circle { fill: rgba(244, 188, 114, 0.12); stroke: var(--amber); } .xobs .pupil { fill: var(--amber); stroke: none; }
.leak { fill: var(--amber); animation: leak 2.4s ease-out infinite; animation-delay: var(--d); }
.xshield path { fill: rgba(206, 255, 84, 0.12); stroke: var(--lime); stroke-width: 2; opacity: 0; transform: scale(0.6); transition: opacity var(--t), transform 400ms var(--ease); transform-box: fill-box; transform-origin: center; }
.xpkt { fill: var(--amber); animation: xpkt 3.2s linear infinite; offset-path: path("M70 150 C170 150 170 150 260 150 S350 150 450 150"); }
@keyframes leak { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(var(--dx), -110px); opacity: 0; } }
@keyframes xpkt { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.xray[data-mode="salto"] .xw { opacity: 0.15; }
.xray[data-mode="salto"] .xw-hid { opacity: 1; }
.xray[data-mode="salto"] .xleak, .xray[data-mode="salto"] .xobs { opacity: 0.18; }
.xray[data-mode="salto"] .xshield path { opacity: 1; transform: scale(1); }
.xray[data-mode="salto"] .xpkt { fill: var(--lime); offset-path: path("M70 150 C150 60 220 60 260 90 S380 240 450 150"); }
.xray[data-mode="salto"] .xsrv rect { stroke: var(--lime); }
.xscore { display: flex; align-items: baseline; gap: 10px; font: 600 13px var(--mono); color: var(--muted); text-transform: uppercase; }
.xscore b { font: 700 54px var(--sans); color: var(--amber); transition: color var(--t); }
.xray[data-mode="salto"] .xscore b { color: var(--lime); }
.xlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.xi { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: border-color var(--t); }
.xi-h { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.xi-badge { font: 700 11px var(--mono); padding: 3px 8px; border-radius: 6px; text-transform: uppercase; }
.xi-badge.bad { color: var(--amber); background: rgba(244, 188, 114, 0.12); }
.xi-badge.good { color: var(--lime); background: rgba(206, 255, 84, 0.12); display: none; }
.xi p { margin: 8px 0 0; font-size: 15px; }
.xi-o { color: var(--muted); } .xi-s { display: none; color: var(--ink); }
.xi-t { display: none; margin-top: 8px; font: 600 12px var(--mono); color: var(--lime); }
.xray[data-mode="salto"] .xi { border-color: rgba(206, 255, 84, 0.35); }
.xray[data-mode="salto"] .xi-badge.bad, .xray[data-mode="salto"] .xi-o { display: none; }
.xray[data-mode="salto"] .xi-badge.good, .xray[data-mode="salto"] .xi-t { display: inline-block; }
.xray[data-mode="salto"] .xi-s { display: block; }

/* online journey + comparison */
.journey { padding: 22px; margin-top: 24px; position: relative; --p: 0; }
.journey-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); position: relative; margin: 6px 4px 18px; }
.jt-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--grad); border-radius: 6px; transition: width 600ms var(--ease); }
.jt-pkt { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 18px var(--lime); transition: left 600ms var(--ease); }
.jsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.jstep { width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, 0.25); color: var(--muted); padding: 10px; cursor: pointer; font: 600 14px var(--sans); display: grid; gap: 4px; transition: border-color var(--t), background var(--t), color var(--t); }
.jstep .jn { font: 600 11px var(--mono); color: var(--dim); }
.jstep.is-done { border-color: rgba(120, 221, 225, 0.35); color: var(--ink); }
.jstep.is-on { border-color: var(--lime); background: rgba(206, 255, 84, 0.08); color: var(--ink); box-shadow: 0 0 0 3px rgba(206, 255, 84, 0.12); }
.jpanel { margin: 18px 0 14px; min-height: 120px; }
.jp-item h3 { margin: 0 0 6px; font-size: 22px; }
.jp-item p { margin: 0 0 8px; max-width: 760px; }
.jp-tech { font: 600 13px var(--mono); color: var(--cyan); }
.compare { padding: 22px; margin-top: 18px; }
.compare h3 { margin: 0 0 12px; }
.compare-scroll { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14px; }
.cmp th, .cmp td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { font: 600 12px var(--mono); color: var(--muted); text-transform: uppercase; }
.cmp thead th.me { color: var(--lime); }
.cmp tbody th { font-weight: 500; }
.cv.y { color: var(--lime); font-weight: 700; } .cv.n { color: var(--muted); } .cv.p { color: var(--amber); }
.cmp td:nth-child(2) { background: rgba(206, 255, 84, 0.05); }

/* terms spotlight */
.terms-spot .ts-legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
.marquee { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-in { display: flex; gap: 10px; width: max-content; animation: marquee 70s linear infinite; }
.mq-b .mq-in { animation-direction: reverse; animation-duration: 80s; }
.mq-c .mq-in { animation-duration: 55s; }
.marquee:hover .mq-in, .marquee:focus-within .mq-in { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ts-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* encrypt it yourself */
.enc-grid { padding: 22px; margin-top: 24px; }
.enc-form label { font: 600 13px var(--mono); color: var(--muted); text-transform: uppercase; }
.enc-steps { list-style: none; padding: 0; margin: 18px 0 10px; display: grid; gap: 8px; }
.es { display: grid; grid-template-columns: 34px minmax(170px, 0.35fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; opacity: 0.45; transition: opacity var(--t), border-color var(--t); }
.es.is-on { opacity: 1; border-color: rgba(120, 221, 225, 0.4); }
.es[data-es="tamper"].is-on { border-color: rgba(244, 188, 114, 0.6); }
.es-n { font: 700 12px var(--mono); color: var(--lime); }
.es-v { font: 12.5px var(--mono); color: var(--cyan); overflow-wrap: anywhere; }
.es[data-es="tamper"] .es-v { color: var(--amber); }

/* cryptography map */
.cmap-grid { display: grid; grid-template-columns: minmax(200px, 0.32fr) minmax(0, 1fr); gap: 20px; padding: 20px; margin-top: 24px; }
.cmap-layers { display: grid; gap: 6px; align-content: start; }
.cmap-layers button { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, 0.25); color: var(--ink); padding: 10px 12px; font: 600 15px var(--sans); cursor: pointer; }
.cmap-layers button i { margin-left: auto; font: 600 12px var(--mono); color: var(--dim); font-style: normal; }
.cml-n { font: 600 11px var(--mono); color: var(--dim); }
.cmap-layers button[aria-selected="true"] { border-color: var(--lime); background: rgba(206, 255, 84, 0.08); }
.cmap-panels .mono-h { margin: 4px 0 0; }

/* onion demo */
.onion { padding: 22px; margin-top: 24px; }
.onion-svg { width: 100%; height: auto; max-width: 860px; display: block; margin: 0 auto; overflow: visible; }
.on-line { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 6 6; }
.on-node circle { fill: #0d1416; stroke: var(--cyan); stroke-width: 1.6; }
.on-node.me circle { stroke: var(--lime); } .on-node.dest circle { stroke: var(--violet); }
.on-node text { fill: var(--muted); font: 600 12px var(--mono); }
.on-pkt { transition: transform 700ms var(--ease); }
.on-pkt circle { stroke-width: 2; transition: opacity 400ms, r 400ms; }
.ol3 { fill: rgba(192, 178, 255, 0.18); stroke: var(--violet); } .ol2 { fill: rgba(120, 221, 225, 0.2); stroke: var(--cyan); } .ol1 { fill: rgba(206, 255, 84, 0.22); stroke: var(--lime); } .ol0 { fill: var(--ink); stroke: none; }
.on-pkt.peel1 .ol3, .on-pkt.peel2 .ol2, .on-pkt.peel3 .ol1 { opacity: 0; }
.on-pkt.peel2 .ol3, .on-pkt.peel3 .ol3, .on-pkt.peel3 .ol2 { opacity: 0; }
.on-cover { opacity: 0; transition: opacity var(--t); }
.onion-sec.is-hard .on-cover { opacity: 1; }
.cov { fill: var(--dim); animation: blinkbit 1.6s ease-in-out infinite; animation-delay: var(--d); }
.onion-ctl { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.chk { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; }
.onion-log { min-height: 48px; margin: 12px 0 0; color: var(--ink); font-size: 16px; }

/* erasure demo */
.era { padding: 22px; margin-top: 24px; }
.era-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.era-doc { width: 28px; height: 34px; border-radius: 4px; background: var(--grad); box-shadow: 0 0 18px rgba(206, 255, 84, 0.4); transition: filter var(--t), opacity var(--t); }
.era.is-lost .era-doc { filter: grayscale(1); opacity: 0.35; box-shadow: none; }
.era-state { font: 600 13px var(--mono); color: var(--lime); }
.era.is-lost .era-state { color: var(--amber); }
.era-devs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.era-dev { border: 1px solid rgba(120, 221, 225, 0.4); border-radius: 14px; background: rgba(0, 0, 0, 0.25); color: var(--ink); padding: 12px 10px; cursor: pointer; display: grid; gap: 10px; font: 600 14px var(--sans); text-align: left; }
.era-dev[aria-pressed="false"] { opacity: 0.35; border-style: dashed; }
.frags { display: flex; gap: 4px; }
.frag { width: 12px; height: 16px; border-radius: 3px; background: var(--cyan); }
.era-dev[aria-pressed="false"] .frag { background: var(--dim); }

/* Salto Pass demo */
.pdemo { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 22px; margin-top: 24px; align-items: center; }
.pd-phone { display: block; width: 110px; height: 190px; margin: 0 auto; border: 2px solid var(--violet); border-radius: 22px; position: relative; box-shadow: 0 0 30px rgba(192, 178, 255, 0.25); }
.pd-phone i { position: absolute; inset: 60px 22px; border-radius: 10px; background: rgba(192, 178, 255, 0.2); border: 1px solid var(--violet); }
.pd-out { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 16px 0 10px; }
.pd-out dt { color: var(--muted); font-size: 14px; } .pd-out dd { margin: 0; }
.pd-out code { font: 600 15px var(--mono); color: var(--lime); }
.pdemo.flash code { animation: blinkbit 600ms ease-out 1; }

/* Atlas threshold demo */
.adem { padding: 22px; margin-top: 24px; }
.adem-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
.ac { aspect-ratio: 1.15; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: rgba(255, 255, 255, 0.05); transition: background var(--t); }
.ac.on { background: rgba(206, 255, 84, 0.6); }
.adem-ctl { display: block; font-size: 15px; } .adem-ctl b { color: var(--lime); font-family: var(--mono); }
#ademRange { width: 100%; max-width: 520px; accent-color: var(--lime); margin: 10px 0; }
.adem-out { font: 600 13px var(--mono); color: var(--cyan); margin: 0; }

@media (max-width: 1080px) {
  .xray-grid { grid-template-columns: minmax(0, 1fr); }
  .xray-left { position: static; }
  .jsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .era-devs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .page-hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero-art { max-width: 240px; justify-self: start; }
  .cmap-grid { grid-template-columns: minmax(0, 1fr); }
  .pdemo { grid-template-columns: minmax(0, 1fr); }
  .es { grid-template-columns: 26px minmax(0, 1fr); }
  .es .es-v { grid-column: 2; }
}
@media (max-width: 560px) {
  .jsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .era-devs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adem-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .hero-art { max-width: 180px; }
}
/* Before the script runs, views below the first are skipped by layout (they are hidden as soon as the router starts). */
.no-js .view:not(#home) { display: none; }

/* ================= v6: addendum (connected mode, Salto AI, contribute, why) ================= */
.hero-actions { flex-wrap: wrap; }
.hero-actions-2 { margin-top: 10px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.quick > span { font: 600 12px var(--mono); color: var(--muted); text-transform: uppercase; margin-right: 4px; }
.qchip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); text-decoration: none; font: 600 14px var(--sans); transition: border-color var(--t), transform var(--t); }
.qchip:hover { border-color: var(--lime); transform: translateY(-2px); }
.instrument { position: relative; }
.salto-pop { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0.6); font: 800 clamp(28px, 4vw, 54px) var(--sans); color: var(--lime); text-shadow: 0 0 30px rgba(206, 255, 84, 0.7); opacity: 0; pointer-events: none; z-index: 3; white-space: nowrap; }
.salto-pop.go { animation: saltopop 1.6s var(--ease) 1; }
@keyframes saltopop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%) scale(1); } }

.conn-grid { padding: 22px; margin-top: 24px; display: grid; gap: 16px; }
.conn-ctl { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.conn-svg { width: 100%; max-width: 860px; height: auto; margin: 0 auto; display: block; overflow: visible; }
.conn-svg text { fill: var(--muted); font: 600 12px var(--mono); }
.cn circle { fill: #0d1416; stroke: var(--cyan); stroke-width: 1.6; }
.cr { fill: none; stroke-width: 2.4; stroke-dasharray: 7 7; opacity: 0; transition: opacity var(--t); animation: dash 1s linear infinite; }
.cr-off { stroke: var(--dim); opacity: 0.6; }
.cr-private { stroke: var(--violet); } .cr-hardened { stroke: var(--amber); } .cr-fast { stroke: var(--cyan); }
.conn[data-on="true"] .cr-off { opacity: 0.1; }
.conn[data-on="true"][data-route="private"] .cr-private, .conn[data-on="true"][data-route="hardened"] .cr-hardened, .conn[data-on="true"][data-route="fast"] .cr-fast { opacity: 1; }
.cmix { opacity: 0; transition: opacity var(--t); }
.conn[data-on="true"][data-route="hardened"] .cmix { opacity: 1; }
.cdot { fill: var(--amber); animation: blinkbit 1.4s ease-in-out infinite; animation-delay: var(--d); }
.cfail { opacity: 0; transition: opacity var(--t); } .cfail circle { fill: rgba(244, 188, 114, 0.18); stroke: var(--amber); stroke-width: 2; } .cfail path { stroke: var(--amber); stroke-width: 3; }
.conn[data-cut="true"] .cfail { opacity: 1; }
.conn[data-cut="true"] .cr { animation: none; stroke-dasharray: 2 10; }
.cpkt { fill: var(--lime); filter: drop-shadow(0 0 8px var(--lime)); opacity: 0; }
.conn[data-on="true"]:not([data-cut="true"]) .cpkt { opacity: 1; animation: cpkt 2.6s linear infinite; }
.conn[data-route="private"] .cpkt { offset-path: path("M88 110 C170 30 250 190 320 110 S470 30 552 110"); }
.conn[data-route="hardened"] .cpkt { offset-path: path("M88 110 C140 180 200 40 260 110 S330 180 380 110 S470 40 552 110"); animation-duration: 5s; }
.conn[data-route="fast"] .cpkt { offset-path: path("M88 110 C250 70 390 70 552 110"); animation-duration: 1.4s; }
.cpkt { cx: 0; cy: 0; }
@keyframes cpkt { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.conn-state { margin: 0; font-size: 16px; min-height: 48px; }
.conn[data-cut="true"] .conn-state { color: var(--amber); }
.conn-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.conn-facts dt { font: 600 12px var(--mono); color: var(--muted); text-transform: uppercase; } .conn-facts dd { margin: 4px 0 0; }
.conn-layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cl { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .cl p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.cl-content b { color: var(--lime); } .cl-transport b { color: var(--violet); } .cl-meta b { color: var(--amber); }

.teasers6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 10px; }
.t6 { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--ink); text-decoration: none; transition: border-color var(--t), transform var(--t); }
.t6:hover { border-color: var(--lime); transform: translateY(-3px); }
.t6 b { font-size: 20px; } .t6 span { color: var(--muted); font-size: 15px; } .t6 em { font-style: normal; color: var(--lime); font-weight: 600; }

.h-sm { font-size: clamp(26px, 3vw, 38px); margin: 0 0 18px; }
.uses4, .tech4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.use { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.use-n { font: 600 12px var(--mono); color: var(--lime); } .use h3 { margin: 8px 0; font-size: 18px; } .use p { margin: 0 0 8px; color: var(--muted); font-size: 14.5px; }
.use-try { color: var(--cyan) !important; }
.ftd-grid { padding: 22px; margin-top: 24px; display: grid; gap: 16px; }
.ftd-svg { width: 100%; max-width: 760px; height: auto; margin: 0 auto; display: block; }
.fz rect, .fz circle, .fz path { fill: rgba(0, 0, 0, 0.3); stroke: var(--line-2); stroke-width: 1.6; transition: stroke var(--t), fill var(--t); }
.fl { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 6 6; opacity: 0.3; transition: opacity var(--t), stroke var(--t); }
.ftd[data-mode="phone"] .fz-phone rect { stroke: var(--lime); fill: rgba(206, 255, 84, 0.08); }
.ftd[data-mode="computer"] .fz-computer rect, .ftd[data-mode="computer"] .fz-computer path { stroke: var(--cyan); fill: rgba(120, 221, 225, 0.08); }
.ftd[data-mode="computer"] .fl-computer { stroke: var(--cyan); opacity: 1; animation: dash 1s linear infinite; }
.ftd[data-mode="remote"] .fz-remote circle { stroke: var(--violet); fill: rgba(192, 178, 255, 0.08); }
.ftd[data-mode="remote"] .fl-remote { stroke: var(--violet); opacity: 1; animation: dash 1s linear infinite; }
.ftd.refused .fl-remote { stroke: var(--amber); animation: none; opacity: 0.6; }
.fpkt { fill: var(--lime); }
.ftd[data-mode="computer"] .fpkt { animation: fpkt1 2s ease-in-out infinite; }
.ftd[data-mode="remote"].capsule .fpkt { offset-path: path("M140 85 C300 -10 420 -10 508 85"); animation: cpkt 2.4s linear infinite; }
@keyframes fpkt1 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(240px); } }
.ftd-msg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ftd-msg > div { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .ftd-msg p { margin: 6px 0 0; font-size: 17px; }
.ai-out { color: var(--lime); min-height: 26px; }
.ftd-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ftd-table { margin: 0; display: grid; gap: 6px; }
.ftd-table > div { display: grid; grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr); gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.ftd-table dt { color: var(--muted); font-size: 14px; } .ftd-table dd { margin: 0; display: none; }
.ftd[data-mode="phone"] dd[data-for="phone"], .ftd[data-mode="computer"] dd[data-for="computer"], .ftd[data-mode="remote"] dd[data-for="remote"] { display: block; }
.ftd:not([data-mode="phone"]) [data-for-note="phone"] { display: none; }
.mission { display: none; border: 1px solid rgba(192, 178, 255, 0.4); border-radius: 14px; padding: 14px 16px; gap: 10px; }
.ftd[data-mode="remote"] .mission { display: grid; }
.mission legend { font: 600 12px var(--mono); color: var(--violet); text-transform: uppercase; padding: 0 6px; }
.mis-dest select { margin-left: 8px; background: var(--panel-solid); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; font: inherit; }
.mis-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ai-state { margin: 0; min-height: 24px; color: var(--ink); }
.help-grid { padding: 22px; display: grid; gap: 14px; }
.help-a { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 16px; }
.ai-rule { margin-top: 16px; border-left: 3px solid var(--lime); }

.share-grid { display: grid; grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr); gap: 22px; padding: 22px; margin-top: 24px; }
.share-ctl { display: grid; gap: 12px; align-content: start; }
.sq b { color: var(--lime); font-family: var(--mono); }
#shareQuota { width: 100%; accent-color: var(--lime); }
.scen { display: flex; flex-wrap: wrap; gap: 8px; }
.gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gauge { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.gauge span { font: 600 11px var(--mono); color: var(--muted); text-transform: uppercase; } .gauge b { font-size: 20px; }
.gauge i { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); overflow: hidden; display: block; }
.gauge s { display: block; height: 100%; width: 0; text-decoration: none; transition: width 500ms var(--ease); }
.g-offered s { background: var(--dim); } .g-reserved s { background: var(--violet); } .g-used s { background: var(--cyan); } .g-verified s { background: var(--lime); }
.frag-grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; margin: 14px 0; }
.frag-grid i { aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, 0.04); transition: background var(--t); }
.frag-grid i.free { background: rgba(255, 255, 255, 0.09); } .frag-grid i.stored { background: var(--cyan); } .frag-grid i.moved { background: var(--amber); opacity: 0.6; }
.share-state { margin: 0; min-height: 48px; } .share.is-down .share-state { color: var(--amber); }
.share-elig { margin: 8px 0 0; color: var(--lime); font-weight: 700; }
.how3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.why-stage { padding: 22px; margin-top: 24px; display: grid; gap: 16px; }
.why-svg { width: 100%; max-width: 860px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.wo path { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 2 8; transition: stroke var(--t); }
.wdev rect { fill: #0d1416; stroke: var(--cyan); stroke-width: 1.6; transition: stroke var(--t); }
.wl { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 6 6; transition: stroke var(--t); }
.wa circle { fill: none; stroke: var(--amber); stroke-width: 2; opacity: 0.6; transition: opacity var(--t); }
.wenv rect { fill: var(--lime); } .wenv path { fill: none; stroke: var(--lime-ink); stroke-width: 1.6; }
.ws circle { fill: var(--violet); stroke: #0d1416; stroke-width: 2; }
.wenv { offset-path: path("M90 110 Q205 10 320 110 Q435 10 550 110"); offset-distance: 0%; offset-rotate: 0deg; }
.why-stage.play .wenv { animation: whyhop 4s var(--ease) 1 forwards; }
@keyframes whyhop { 0%, 10% { offset-distance: 0%; } 45%, 55% { offset-distance: 50%; } 90%, 100% { offset-distance: 100%; } }
.wpop { font: 800 30px var(--sans); fill: var(--lime); opacity: 0; }
.why-stage.play .wp1 { animation: wpop 1.4s ease-out 1.1s 1; } .why-stage.play .wp2 { animation: wpop 1.4s ease-out 2.9s 1; }
@keyframes wpop { 0% { opacity: 0; transform: translateY(14px); } 30%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
.why-stage[data-hl="s"] .ws circle { stroke: var(--lime); r: 8; }
.why-stage[data-hl="a"] .wa circle { opacity: 1; stroke-width: 3; }
.why-stage[data-hl="l"] .wl { stroke: var(--lime); }
.why-stage[data-hl="t"] .wt rect { stroke: var(--lime); stroke-width: 3; }
.why-stage[data-hl="o"] .wo path { stroke: var(--lime); }
.why-words { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ww { border: 1px solid var(--line); border-radius: 14px; padding: 12px; cursor: default; transition: border-color var(--t); }
.ww:hover, .ww:focus { border-color: var(--lime); outline: none; }
.ww dt { font-weight: 700; } .ww dt b { color: var(--lime); font-size: 26px; margin-right: 4px; } .ww dd { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.term-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.prim { margin-top: -6px; }

@media (max-width: 1080px) {
  .uses4, .tech4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .share-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .teasers6, .how3, .conn-layers, .ftd-msg { grid-template-columns: minmax(0, 1fr); }
  .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftd-table > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 520px) {
  .uses4, .tech4, .why-words { grid-template-columns: minmax(0, 1fr); }
  .frag-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.qchip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px currentColor; }
.q-vpn::before { background: var(--violet); } .q-node::before { background: var(--cyan); } .q-pay::before { background: var(--amber); } .q-vault::before { background: #8ff0b6; } .q-atlas::before { background: var(--cyan); }

@media (max-width: 760px) {
  .hero-actions { gap: 8px; }
  .hero-actions .btn { min-height: 42px; padding: 0 14px; font-size: 14px; }
  #heroTry { flex: 1 1 100%; justify-content: center; }
  #heroExplore, #heroContribute { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .hero-actions-2 { display: none; }
}
.offscreen, .offscreen * { animation-play-state: paused !important; }

/* ================= v7: SALTO Atlas control centre ================= */
.a-shell { padding: 18px; margin-top: 24px; display: grid; gap: 14px; background: radial-gradient(120% 90% at 50% 0%, rgba(120, 221, 225, 0.06), transparent 60%), #070b0d; }
.a-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.a-layers { display: flex; flex-wrap: wrap; gap: 6px; }
.a-layers button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(0, 0, 0, 0.35); color: var(--muted); font: 600 13px var(--sans); padding: 8px 12px; cursor: pointer; }
.a-layers button i { width: 14px; height: 10px; border-radius: 2px; }
.al-relays i { background: repeating-linear-gradient(90deg, var(--lime) 0 3px, transparent 3px 6px); }
.al-storage i { background: conic-gradient(var(--cyan) 0 60%, rgba(120, 221, 225, 0.25) 0); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.al-nodes i { background: radial-gradient(circle, var(--violet) 40%, transparent 42%); }
.al-compute i { background: linear-gradient(var(--amber) 0 0) 0 0 / 4px 4px, linear-gradient(var(--amber) 0 0) 5px 0 / 4px 4px, linear-gradient(var(--amber) 0 0) 0 5px / 4px 4px; background-repeat: no-repeat; }
.al-services i { background: #8ff0b6; transform: rotate(45deg) scale(0.7); }
.a-layers button[aria-checked="true"] { color: var(--ink); border-color: var(--lime); background: rgba(206, 255, 84, 0.08); box-shadow: 0 0 0 3px rgba(206, 255, 84, 0.1); }
.a-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.32fr); gap: 14px; align-items: start; }
.a-cc .a-body { grid-template-columns: minmax(150px, 0.18fr) minmax(0, 1fr) minmax(250px, 0.3fr); }
.a-map { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: radial-gradient(80% 70% at 50% 45%, #0e1619 0%, #06090b 100%); }
.a-svg { display: block; width: 100%; height: auto; }
.a-cam { transition: transform 700ms var(--ease); }
.wb-grid path { stroke: rgba(120, 221, 225, 0.06); stroke-width: 0.6; fill: none; }
.wb-land { fill: rgba(120, 221, 225, 0.03); stroke: rgba(160, 200, 190, 0.28); stroke-width: 0.6; }
.wb-dots { stroke: rgba(160, 200, 190, 0.32); stroke-width: 2.3; stroke-linecap: round; fill: none; }
.halo { color: var(--lime); transition: r 600ms var(--ease), opacity 600ms; animation: halo 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
[data-layer="storage"] .halo { color: var(--cyan); } [data-layer="nodes"] .halo { color: var(--violet); } [data-layer="compute"] .halo { color: var(--amber); } [data-layer="services"] .halo { color: #8ff0b6; }
.halo.st-privacy, .halo.st-none { fill: none !important; stroke: var(--dim); stroke-dasharray: 3 4; animation: none; }
.halo.st-none { stroke-dasharray: none; stroke-opacity: 0.5; }
.halo.st-stale { color: var(--amber); }
.halo.sel { stroke: var(--ink); stroke-width: 1.2; }
@keyframes halo { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1.06); } }
.arc { fill: none; stroke: rgba(206, 255, 84, 0.55); stroke-dasharray: 5 4; transition: opacity var(--t), stroke var(--t); }
.has-region .arc.dim { opacity: 0.08; }
.arc.sel { stroke: var(--ink); stroke-dasharray: none; filter: drop-shadow(0 0 4px var(--lime)); }
.arc-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; pointer-events: stroke; }
.pulse { fill: var(--lime); filter: drop-shadow(0 0 4px var(--lime)); animation: apulse 5s linear infinite; offset-rotate: 0deg; }
@keyframes apulse { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.a-paused .pulse, .a-paused .halo, .a-paused .arc { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .pulse { offset-distance: 50%; } }
.cellx { stroke: rgba(120, 221, 225, 0.7); stroke-width: 0.6; }
.cellx.off { fill: rgba(120, 221, 225, 0.08); } .cellx.used { fill: rgba(120, 221, 225, 0.55); } .cellx.ver { fill: var(--lime); }
.pu { fill: rgba(244, 188, 114, 0.12); stroke: rgba(244, 188, 114, 0.5); stroke-width: 0.5; } .pu.on { fill: var(--amber); }
.svc-d { fill: #8ff0b6; opacity: 0.85; }
.pin circle:first-child { fill: #0b1013; stroke: var(--ink); stroke-width: 1.4; }
.pin.st-privacy circle:first-child, .pin.st-none circle:first-child { stroke: var(--dim); }
.pin.sel circle:first-child { fill: var(--lime); stroke: var(--lime); }
.pin .hit { fill: transparent; cursor: pointer; }
.pin:focus { outline: none; } .pin:focus-visible circle:first-child { stroke: var(--lime); stroke-width: 3; }
.a-credit { position: absolute; left: 10px; bottom: 6px; margin: 0; font: 400 10.5px var(--mono); color: var(--dim); letter-spacing: 0.02em; }
.a-about-btn { font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.a-about { position: absolute; left: 10px; right: 10px; bottom: 28px; padding: 12px 14px; font-size: 13px; z-index: 2; }
.a-about p { margin: 0 0 8px; } .a-about dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; font: 12px var(--mono); }
.a-about dd { margin: 0; }
.a-panel { padding: 14px 16px; min-height: 160px; }
.a-empty { margin: 0; color: var(--muted); }
.a-detail h3 { margin: 0 0 4px; font-size: 18px; } .a-sub { margin: 0 0 10px; font: 12px var(--mono); color: var(--muted); }
.a-dl { margin: 0 0 12px; display: grid; gap: 2px; } .a-dl > div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 6px 0; font-size: 14px; } .a-dl dt { color: var(--muted); } .a-dl dd { margin: 0; text-align: right; }
.a-state { margin: 0 0 10px; font-weight: 700; } .a-state.st-privacy { color: var(--violet); } .a-state.st-none { color: var(--muted); } .a-state.st-stale { color: var(--amber); }
.a-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.a-links button, .a-rlist button { border: 1px solid var(--line-2); border-radius: 999px; background: rgba(0, 0, 0, 0.3); color: var(--ink); font: 600 12.5px var(--sans); padding: 6px 10px; cursor: pointer; }
.a-rlist { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.a-rlist button { border-radius: 10px; text-align: left; }
.a-rlist button[aria-pressed="true"] { border-color: var(--lime); background: rgba(206, 255, 84, 0.08); }
.a-list-wrap summary { cursor: pointer; font: 600 13px var(--mono); color: var(--muted); }
.a-list-wrap .a-rlist { flex-direction: row; flex-wrap: wrap; margin-top: 10px; }
.a-close { margin-top: 10px; display: block; }
.a-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 14px; align-items: start; }
.a-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.a-legend li { display: flex; gap: 8px; align-items: center; }
.atlas7 .a-legend li[data-for]:not([data-for="all"]) { display: none; }
.atlas7[data-layer="relays"] .a-legend li[data-for="relays"], .atlas7[data-layer="storage"] .a-legend li[data-for="storage"], .atlas7[data-layer="nodes"] .a-legend li[data-for="nodes"], .atlas7[data-layer="compute"] .a-legend li[data-for="compute"], .atlas7[data-layer="services"] .a-legend li[data-for="services"] { display: flex; }
.lg-cadence i { background: radial-gradient(circle at 20% 50%, var(--lime) 2px, transparent 3px), radial-gradient(circle at 55% 50%, var(--lime) 2px, transparent 3px), radial-gradient(circle at 85% 50%, var(--lime) 2px, transparent 3px); }
.lg-svc i { flex-basis: 10px; height: 10px; background: #8ff0b6; transform: rotate(45deg); margin: 0 6px; }
.lg-nodes i { flex-basis: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--dim); margin: 0 6px; }
.a-legend i { flex: 0 0 22px; height: 10px; border-radius: 2px; }
.lg-arcs i { border-top: 2px dashed var(--lime); height: 0; } .lg-pulse i { background: radial-gradient(circle, var(--lime) 30%, transparent 35%); }
.lg-halo i { background: radial-gradient(circle, rgba(206, 255, 84, 0.7), transparent 70%); } .lg-cells i { background: var(--cyan); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.lg-units i { background: linear-gradient(90deg, var(--amber) 0 30%, transparent 30% 35%, var(--amber) 35% 65%, transparent 65% 70%, var(--amber) 70%); }
.lg-hidden i { border: 1.5px dashed var(--dim); border-radius: 50%; height: 14px; flex-basis: 14px; } .lg-none i { border: 1.5px solid var(--dim); border-radius: 50%; height: 14px; flex-basis: 14px; } .lg-stale i { background: var(--amber); border-radius: 50%; height: 12px; flex-basis: 12px; }
.a-why { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.a-why summary { cursor: pointer; font-weight: 700; color: var(--ink); } .a-why p { margin: 8px 0 0; color: var(--muted); }
.a-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.a-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.a-kpis > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(0, 0, 0, 0.3); }
.a-kpis dt { font: 600 11px var(--mono); color: var(--muted); text-transform: uppercase; } .a-kpis dd { margin: 4px 0 0; font: 700 16px var(--sans); }
.a-timeline { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 14px; align-items: center; }
.a-timeline input { width: 100%; accent-color: var(--lime); } .a-plabel { color: var(--lime); font-family: var(--mono); }
.a-privacy { margin-top: 18px; } .a-priv-ctl { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.a-priv-ctl select { margin-left: 8px; background: var(--panel-solid); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; font: inherit; }
.a-priv-out { min-height: 24px; margin: 10px 0; } .a-priv-out.hidden-msg { color: var(--violet); font-weight: 700; }
.a-cc { padding-top: 24px; }
@media (max-width: 1080px) {
  .a-cc .a-body { grid-template-columns: minmax(0, 1fr); }
  .a-cc .a-rlist { flex-direction: row; flex-wrap: wrap; }
  .a-body { grid-template-columns: minmax(0, 1fr); }
  .a-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .a-legend { grid-template-columns: minmax(0, 1fr); }
  .a-timeline { grid-template-columns: minmax(0, 1fr); }
  .a-panel { position: sticky; bottom: 0; z-index: 5; }
  .sheet-open .a-panel { box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.6); border-color: var(--lime); }
  .a-layers button { padding: 9px 11px; }
}
.a-cc .a-rlist { max-height: 560px; overflow-y: auto; padding-right: 4px; }
@media (max-width: 760px) {
  .a-panel { position: static; }
  [data-atlas] .a-panel { display: none; }
  [data-atlas].sheet-open .a-panel { display: block; position: fixed; left: 8px; right: 8px; bottom: 8px; max-height: 46vh; overflow-y: auto; z-index: 30; border-color: var(--lime); box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.7); background: #0b1114; }
  .a-cc .a-rlist { max-height: none; }
}

select { background-color: #10181b; color: #f2f4ed; }
.a-detail .btn { margin: 4px 6px 0 0; }
@media (max-width: 760px) { [data-atlas].sheet-open { padding-bottom: 50vh; } }

.a-min { display: none; float: right; }
@media (max-width: 760px) {
  .a-min { display: inline; }
  [data-atlas].sheet-open.sheet-min .a-panel { max-height: 64px; overflow: hidden; }
  [data-atlas].sheet-min { padding-bottom: 80px; }
}
@media (max-width: 1080px) { .a-cc .a-map { order: 1; } .a-cc .a-panel { order: 2; } .a-cc .a-rlist { order: 3; } }

/* ================= v8: animated service cards ("One app. Many ways in.") ================= */
.hub-art { position: relative; }
.hub-art > img { transition: opacity var(--t); }
.hub-art .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-art:has(.scene) > img { opacity: 0.32; }
.scene * { vector-effect: non-scaling-stroke; }
.scene text { fill: var(--muted); font: 700 18px var(--mono); }
.scene .sc-l, .scene .sc-tun, .scene .sc-track, .scene .sc-bar, .scene .sc-field { fill: none; stroke: rgba(160, 200, 190, 0.35); stroke-width: 2; }
.scene .sc-l { stroke-dasharray: 6 8; }
.scene .sc-node circle, .scene .sc-dev, .scene .sc-phone, .scene .sc-cold, .scene .sc-form, .scene .sc-cardb, .scene .sc-id, .scene .sc-pill, .scene .sc-mail, .scene .sc-tog { fill: rgba(6, 9, 11, 0.85); stroke: var(--cyan); stroke-width: 2; }
.scene .sc-cold { stroke: var(--violet); }
.scene .sc-ok circle { fill: var(--lime); } .scene .sc-ok path { fill: none; stroke: var(--lime-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scene .sc-env rect { fill: var(--lime); } .scene .sc-env path { fill: none; stroke: var(--lime-ink); stroke-width: 2; }
.scene .sc-env { transform: translate(400px, 150px); }
.scene .sc-wait { fill: none; stroke: var(--amber); stroke-width: 2; stroke-dasharray: 4 5; opacity: 0; }
.scene .sc-route { fill: none; stroke: rgba(206, 255, 84, 0.35); stroke-width: 2; stroke-dasharray: 3 7; }
.scene .sc-dot { fill: var(--lime); offset-path: path("M40 150 C160 150 200 120 300 140 S420 170 450 150"); offset-distance: var(--od); }
.scene .sc-break path { fill: none; stroke: var(--amber); stroke-width: 4; stroke-linecap: round; }
.scene .sc-pause rect { fill: var(--amber); }
.scene .sc-fill, .scene .sc-tfill, .scene .sc-ffill, .scene .sc-pfill { fill: var(--lime); transform-box: fill-box; transform-origin: left center; }
.scene .sc-frag { fill: var(--cyan); }
.scene .sc-chip { fill: rgba(192, 178, 255, 0.25); stroke: var(--violet); stroke-width: 2; }
.scene .sc-spin { fill: none; stroke: var(--lime); stroke-width: 3; stroke-dasharray: 60 160; transform-box: fill-box; transform-origin: center; }
.scene .sc-branch { fill: none; stroke: var(--violet); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 0; }
.scene .sc-lock rect, .scene .sc-lock path { fill: none; stroke: var(--lime); stroke-width: 2.5; }
.scene .sc-cloud { fill: rgba(192, 178, 255, 0.18); stroke: var(--violet); stroke-width: 2; }
.scene .sc-req { fill: var(--lime); }
.scene .sc-ripple { fill: none; stroke: rgba(120, 221, 225, 0.5); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.scene .sc-tx { fill: var(--lime); }
.scene .sc-nowifi { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linecap: round; }
.scene .sc-qr { transform: translate(100px, 155px); } .scene .sc-qr rect { fill: var(--ink); } .scene .sc-qr path { fill: #0b1013; }
.scene .sc-pen { fill: var(--violet); }
.scene .sc-chipc { fill: rgba(206, 255, 84, 0.6); }
.scene .sc-knob { fill: var(--ink); stroke: var(--lime); stroke-width: 3; }
.scene .sc-tog { fill: rgba(206, 255, 84, 0.25); stroke: var(--lime); } .scene .sc-togk { fill: var(--lime); }
.scene .sc-frost path { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-linecap: round; }
.scene .sc-ring { fill: none; stroke: rgba(160, 200, 190, 0.3); stroke-width: 4; }
.scene .sc-ringv { fill: none; stroke: var(--amber); stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.scene .sc-strike { stroke: var(--amber); stroke-width: 3; }
.scene .sc-x path { stroke: var(--amber); stroke-width: 4; stroke-linecap: round; }
.scene .sc-mailf { fill: none; stroke: var(--cyan); stroke-width: 2; }
.scene .sc-blur { fill: rgba(160, 200, 190, 0.35); filter: blur(4px); }
.scene .sc-proof rect { fill: rgba(206, 255, 84, 0.1); stroke: var(--lime); stroke-width: 2; } .scene .sc-proof circle { fill: var(--lime); } .scene .sc-proof path { fill: none; stroke: var(--lime-ink); stroke-width: 2.5; }
.scene .sc-reg { fill: rgba(206, 255, 84, 0.18); stroke: rgba(206, 255, 84, 0.5); opacity: 0.9; }
.scene .sc-pin { fill: var(--ink); }
.scene .sc-arc { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 0; }
.scene .sc-pulse { fill: var(--lime); filter: drop-shadow(0 0 6px var(--lime)); offset-path: path("M110 180 Q240 40 370 120"); offset-distance: 55%; }

/* sequences: only while the card has .play (enter view, hover, focus, tap) */
.hub.play .sc-env { animation: sEnv 3.6s var(--ease) both; }
.hub.play .sc-wait { animation: sWait 3.6s linear both; }
.hub.play .sc-ok { animation: sOk 3.6s var(--ease) both; }
@keyframes sEnv { 0% { transform: translate(80px, 150px); } 30%, 60% { transform: translate(240px, 150px); } 85%, 100% { transform: translate(400px, 150px); } }
@keyframes sWait { 0%, 28% { opacity: 0; } 32%, 58% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes sOk { 0%, 82% { opacity: 0; transform: scale(0.4); } 100% { opacity: 1; } }
.scene .sc-ok { transform-box: fill-box; transform-origin: center; }
.hub.play .sc-dot { animation: sDot 3.4s var(--ease) both; animation-delay: var(--d); }
.hub.play .sc-break, .hub.play .sc-pause { animation: sLate 3.6s linear both; }
@keyframes sDot { 0% { offset-distance: calc(var(--od) - 20%); opacity: 0; } 15% { opacity: 1; } 100% { offset-distance: var(--od); } }
@keyframes sLate { 0%, 60% { opacity: 0; } 72%, 100% { opacity: 1; } }
.hub.play .sc-fill { animation: sGrow 3.6s var(--ease) both; }
.hub.play .sc-frag { animation: sFrag 3.6s var(--ease) both; animation-delay: var(--d); }
@keyframes sGrow { 0% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
@keyframes sFrag { 0%, 28% { transform: translate(var(--dx), -116px); opacity: 0; } 34% { opacity: 1; } 70%, 100% { transform: translate(0, 0); opacity: 1; } }
.hub.play .sc-spin { animation: sSpin 3.6s linear both; }
.hub.play .sc-lock rect, .hub.play .sc-lock path { animation: sLock 3.6s linear both; }
.hub.play .sc-branch { animation: sDraw 3.6s var(--ease) both; }
.hub.play .sc-cloud { animation: sLate 3.6s linear both; }
.hub.play .sc-req { animation: sReq 3.6s var(--ease) both; }
@keyframes sSpin { 0% { transform: rotate(0); opacity: 1; } 40% { transform: rotate(540deg); } 100% { transform: rotate(720deg); } }
@keyframes sLock { 0%, 45% { stroke: var(--amber); } 55%, 100% { stroke: var(--lime); } }
@keyframes sDraw { 0%, 55% { stroke-dashoffset: 100; } 85%, 100% { stroke-dashoffset: 0; } }
@keyframes sReq { 0% { transform: translate(-90px, 0); opacity: 0; } 20% { transform: translate(0, 0); opacity: 1; } 40%, 100% { opacity: 0; } }
.hub.play .sc-ffill { animation: sGrow 3.6s var(--ease) both; }
.hub.play .ff1 { animation-delay: 0.3s; } .hub.play .ff2 { animation-delay: 0.6s; }
.hub.play .sc-sign { animation: sMid 3.6s var(--ease) both; }
.hub.play .sc-ripple { animation: sRip 3.6s ease-out both; }
.hub.play .r1 { animation-delay: 0.2s; } .hub.play .r2 { animation-delay: 0.4s; }
@keyframes sMid { 0%, 45% { opacity: 0; transform: scale(0.4); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes sRip { 0%, 58% { opacity: 0; transform: scale(0.3); } 75% { opacity: 1; } 100% { opacity: 0.6; transform: none; } }
.hub.play .sc-qr { animation: sQr 3.6s var(--ease) both; }
.hub.play .sc-pen { animation: sPen 3.6s var(--ease) both; }
@keyframes sQr { 0% { transform: translate(100px, 155px); } 32%, 58% { transform: translate(380px, 155px); } 85%, 100% { transform: translate(100px, 155px); } }
@keyframes sPen { 0%, 34% { opacity: 0; transform: translate(0, 0); } 42% { opacity: 1; } 48% { transform: translate(-12px, 10px); } 56% { transform: translate(0, 0); } 62%, 100% { opacity: 0.5; } }
.hub.play .sc-knob { animation: sKnob 3.6s var(--ease) both; }
.hub.play .sc-tfill { animation: sShrink 3.6s var(--ease) both; }
.hub.play .sc-togk { animation: sTog 3.6s var(--ease) both; }
.hub.play .sc-frost { animation: sLate2 3.6s linear both; }
@keyframes sKnob { 0% { transform: translateX(160px); } 45%, 100% { transform: translateX(0); } }
@keyframes sShrink { 0% { transform: scaleX(2.33); } 45%, 100% { transform: scaleX(1); } }
@keyframes sTog { 0%, 50% { transform: translateX(-36px); fill: var(--dim); } 70%, 100% { transform: translateX(0); fill: var(--lime); } }
@keyframes sLate2 { 0%, 72% { opacity: 0; } 90%, 100% { opacity: 1; } }
.hub.play .sc-pfill { animation: sGrow 3.6s var(--ease) both; }
.hub.play .sc-ringv { animation: sRing 3.6s linear both; }
.hub.play .sc-strike, .hub.play .sc-x { animation: sLate2 3.6s linear both; }
@keyframes sRing { 0%, 25% { stroke-dashoffset: 0; } 82%, 100% { stroke-dashoffset: 100; } }
.hub.play .sc-proof { animation: sProof 3.6s var(--ease) both; }
.hub.play .p1 { animation-delay: 0.5s; } .hub.play .p2 { animation-delay: 1s; }
@keyframes sProof { 0%, 20% { opacity: 0; transform: translateX(20px); } 40%, 100% { opacity: 1; transform: none; } }
.hub.play .sc-reg { animation: sReg 3.6s ease-out both; }
.hub.play .sc-arc { animation: sArc 3.6s var(--ease) both; }
.hub.play .sc-pulse { animation: sPulse 3.6s linear both; }
@keyframes sReg { 0% { opacity: 0.1; } 30%, 100% { opacity: 0.9; } }
@keyframes sArc { 0%, 30% { stroke-dashoffset: 100; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes sPulse { 0%, 60% { offset-distance: 0%; opacity: 0; } 62% { opacity: 1; } 100% { offset-distance: 100%; } }

.hub-replay { position: absolute; right: 10px; bottom: 10px; z-index: 2; font: 600 11px var(--mono); color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 9px; background: rgba(6, 9, 11, 0.8); opacity: 0.6; transition: opacity var(--t), color var(--t); }
.hub:hover .hub-replay, .hub:focus-within .hub-replay, .hub-replay:focus-visible { opacity: 1; color: var(--lime); }
.hub-seen { margin: 0; max-height: 0; overflow: hidden; opacity: 0; font-size: 14px; color: var(--ink); transition: max-height 400ms var(--ease), opacity 300ms, margin 300ms; }
.hub-seen .mono-h { color: var(--lime); margin-right: 6px; }
.hub:hover .hub-seen, .hub:focus-within .hub-seen, .hub.detail .hub-seen { max-height: 120px; opacity: 1; margin: 10px 0 2px; }
@media (hover: none) { .hub-replay { opacity: 1; } }

/* ================= v8: Pay, Vault, Shield, Card, Identity tools ================= */
.pay-grid, .shield-grid, .card-grid, .alias-grid { display: grid; gap: 20px; padding: 22px; margin-top: 24px; }
.pay-grid { grid-template-columns: minmax(240px, 0.4fr) minmax(0, 1fr); }
.pay-ctl, .shield-ctl, .alias-ctl, .card-ctl { display: grid; gap: 10px; align-content: start; }
.pay-dl { margin: 6px 0; display: grid; gap: 6px; } .pay-dl > div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 6px 0; } .pay-dl dt { color: var(--muted); } .pay-dl dd { margin: 0; text-align: right; }
.pay-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pay-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ps { display: grid; grid-template-columns: 30px 120px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; opacity: 0.5; transition: opacity var(--t), border-color var(--t), background var(--t); }
.ps span:last-child { color: var(--muted); font-size: 14px; }
.ps-n { font: 700 12px var(--mono); color: var(--lime); }
.ps.on { opacity: 1; border-color: rgba(120, 221, 225, 0.5); }
.ps.done { border-color: rgba(206, 255, 84, 0.5); background: rgba(206, 255, 84, 0.05); }
.ps.done .ps-n::after { content: " ✓"; }
.ps.stuck { border-color: var(--amber); background: rgba(244, 188, 114, 0.08); }
.pay-state { margin: 10px 0 0; min-height: 24px; }
.vault-grid { padding: 22px; margin-top: 24px; display: grid; gap: 10px; }
.vault-svg { width: 100%; max-width: 760px; height: auto; margin: 0 auto; display: block; }
.vd { fill: rgba(6, 9, 11, 0.85); stroke: var(--cyan); stroke-width: 2; } .vd.cold { stroke: var(--violet); }
.vq-path { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 6 6; }
.vq { transform: translate(95px, 110px); transition: transform 1.2s var(--ease); } .vq rect { fill: var(--ink); } .vq path { fill: #0b1013; }
.vault7[data-vstate="toCold"] .vq { transform: translate(545px, 110px); }
.vault7[data-vstate="signed"] .vq, .vault7[data-vstate="invalid"] .vq { transform: translate(95px, 160px); }
.v-ok, .v-bad { opacity: 0; transition: opacity var(--t); } .v-ok circle { fill: var(--lime); } .v-ok path { fill: none; stroke: var(--lime-ink); stroke-width: 3; } .v-bad circle { fill: var(--amber); } .v-bad path { stroke: #10140a; stroke-width: 3; }
.vault7[data-vstate="signed"] .v-ok { opacity: 1; } .vault7[data-vstate="invalid"] .v-bad { opacity: 1; }
.vault7[data-vstate="invalid"] .pay-state { color: var(--amber); }
.vault-labels { display: flex; justify-content: space-between; max-width: 760px; width: 100%; margin: 0 auto; font: 600 12px var(--mono); color: var(--muted); text-transform: uppercase; }
.shield-grid { grid-template-columns: minmax(240px, 0.38fr) minmax(0, 1fr); }
.shield-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shield-layers li { display: grid; grid-template-columns: 150px 130px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; transition: border-color var(--t), background var(--t); }
.sl-state { font: 700 12px var(--mono); text-transform: uppercase; } .sl-why { color: var(--muted); font-size: 14px; }
.shield-layers li[data-state="hidden"] { border-color: rgba(206, 255, 84, 0.45); } .shield-layers li[data-state="hidden"] .sl-state { color: var(--lime); }
.shield-layers li[data-state="partial"] { border-color: rgba(192, 178, 255, 0.45); } .shield-layers li[data-state="partial"] .sl-state { color: var(--violet); }
.shield-layers li[data-state="visible"] { border-color: rgba(244, 188, 114, 0.55); background: rgba(244, 188, 114, 0.05); } .shield-layers li[data-state="visible"] .sl-state { color: var(--amber); }
.shield-layers li[data-state="na"] { opacity: 0.45; }
.shield-sum { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.shield-sum > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; } .shield-sum dt { font: 600 11px var(--mono); color: var(--muted); text-transform: uppercase; } .shield-sum dd { margin: 4px 0 0; font-weight: 700; }
.shield-grid > .fine { grid-column: 1 / -1; }
.card-grid { grid-template-columns: minmax(240px, 0.36fr) minmax(0, 0.34fr) minmax(0, 0.3fr); align-items: start; }
.vcard { position: relative; aspect-ratio: 1.586; border-radius: 18px; background: linear-gradient(135deg, #1a2a14 0%, #0d1416 60%, #121a2a 100%); border: 1px solid rgba(206, 255, 84, 0.4); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); overflow: hidden; transition: filter var(--t); }
.vc-chip { position: absolute; left: 22px; top: 40%; width: 44px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #d9f99d, #9ad146); }
.vc-num { position: absolute; left: 22px; bottom: 22px; font: 600 15px var(--mono); color: var(--ink); letter-spacing: 0.08em; }
.vc-brand { position: absolute; right: 18px; top: 16px; }
.vc-frost { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(120, 221, 225, 0.18) 0 6px, transparent 6px 14px); opacity: 0; transition: opacity var(--t); }
.card7[data-frozen="true"] .vc-frost { opacity: 1; } .card7[data-frozen="true"] .vcard { filter: saturate(0.3); }
#cardLimit { width: 100%; accent-color: var(--lime); }
.card-sees h3 { margin: 0 0 8px; }
.alias-grid { grid-template-columns: minmax(240px, 0.4fr) minmax(0, 1fr); }
.alias-card { display: flex; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.alias-ring { width: 60px; height: 60px; flex: none; } .alias-ring circle { fill: none; stroke: rgba(160, 200, 190, 0.25); stroke-width: 5; }
.alias-ring .ar-v { stroke: var(--lime); stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 30px 30px; transition: stroke-dashoffset 900ms var(--ease), stroke var(--t); }
.id7[data-astate="active"] .ar-v { stroke-dashoffset: 0; } .id7[data-astate="expired"] .ar-v { stroke: var(--amber); stroke-dashoffset: 100; }
.alias-card dl { margin: 0; display: grid; gap: 4px; } .alias-card dt { font: 600 11px var(--mono); color: var(--muted); text-transform: uppercase; } .alias-card dd { margin: 0; }
.id7[data-astate="expired"] #aliasAddr { text-decoration: line-through; color: var(--amber); }
.alias-grid > .pay-state, .num-row { grid-column: 1 / -1; }
.num-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; } .num-row h3 { margin: 0; font-size: 18px; } .num-row .fine { flex-basis: 100%; margin: 0; }
.access-list { list-style: none; padding: 12px 16px; margin: 24px 0 0; display: grid; gap: 8px; }
.access-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr) max-content max-content; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.ac-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.ac-state { display: none; font: 700 12px var(--mono); color: var(--amber); text-transform: uppercase; }
.access-list li.revoked .ac-dot { background: var(--dim); box-shadow: none; } .access-list li.revoked b { text-decoration: line-through; color: var(--muted); } .access-list li.revoked .ac-state { display: inline; }
.file-row { margin-top: 16px; } .file-row h3 { margin: 0 0 10px; }
@media (max-width: 1080px) { .pay-grid, .shield-grid, .alias-grid { grid-template-columns: minmax(0, 1fr); } .card-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .card-sees { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .ps { grid-template-columns: 26px minmax(0, 1fr); } .ps span:last-child { grid-column: 2; }
  .shield-layers li { grid-template-columns: minmax(0, 1fr) max-content; } .shield-layers li .sl-why { grid-column: 1 / -1; }
  .shield-sum { grid-template-columns: minmax(0, 1fr); }
  .access-list li { grid-template-columns: 14px minmax(0, 1fr) max-content; } .access-list li .ac-state { grid-column: 2; }
}

/* ---------------- v9: Survival, Internet Relay, Atlas layers ---------------- */
.al-packs i { background: linear-gradient(#ffd27a 0 0) 0 0 / 10px 3px, linear-gradient(#ffd27a 0 0) 0 4px / 10px 3px, linear-gradient(#ffd27a 0 0) 0 8px / 10px 3px; background-repeat: no-repeat; }
.al-relay i { border: 2px solid #ff9fd0; border-radius: 50%; }
[data-layer="packs"] .halo { color: #ffd27a; } [data-layer="relay"] .halo { color: #ff9fd0; }
.atlas7[data-layer="packs"] .a-legend li[data-for="packs"], .atlas7[data-layer="relay"] .a-legend li[data-for="relay"] { display: flex; }
.pk { fill: #ffd27a; opacity: 0.85; } .rring { fill: none; stroke: #ff9fd0; stroke-width: 1.6; opacity: 0.8; }
.lg-packs i { background: linear-gradient(#ffd27a 0 0) 0 0 / 14px 3px, linear-gradient(#ffd27a 0 0) 0 4px / 14px 3px; background-repeat: no-repeat; flex-basis: 14px; }
.lg-relayring i { border: 2px solid #ff9fd0; border-radius: 50%; height: 14px; flex-basis: 14px; }
.lg-private i { background: repeating-linear-gradient(45deg, var(--dim) 0 2px, transparent 2px 5px); border-radius: 2px; }

/* switches (Survival / Relay) */
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 14px 4px 6px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(0, 0, 0, 0.25); color: var(--ink); font-size: 14px; cursor: pointer; }
.switch .sw-k { width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; transition: background var(--t); }
.switch .sw-k::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform var(--t); }
.switch[aria-checked="true"] .sw-k { background: var(--lime); } .switch[aria-checked="true"] .sw-k::after { transform: translateX(16px); background: var(--lime-ink); }
.switch:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.fg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rw-rule { margin: 8px 0 40px; padding: 14px 18px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); }
.rw-rule .mono-h { color: var(--lime); margin-right: 8px; }

/* Find a guide */
.fg-grid, .sa-grid, .rl-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; padding: 24px; border-radius: var(--r); }
.fg-ctl, .sa-ctl, .rl-side { display: grid; gap: 12px; align-content: start; }
.fg-search { display: flex; gap: 8px; } .fg-search input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); color: var(--ink); font: inherit; }
.fg-svg, .rl-svg { width: 100%; height: auto; display: block; margin: 0 auto; } .fg-svg { max-width: 560px; } .rl-svg { max-width: 720px; }
.fg-svg text, .rl-svg text { fill: var(--muted); font: 600 12px var(--mono); }
.fg-dev { fill: rgba(6, 9, 11, 0.85); stroke: var(--cyan); stroke-width: 2; } .fg-dev.nas { stroke: var(--violet); }
.fg-nasled { stroke: var(--violet); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 6; }
.fg-link { fill: none; stroke: rgba(160, 200, 190, 0.3); stroke-width: 2; stroke-dasharray: 5 7; }
.fg-cloud path { fill: none; stroke: var(--cyan); stroke-width: 2; } .fg-cloud .fg-cloudx { stroke: var(--amber); opacity: 0; transition: opacity var(--t); }
.sv9[data-net="off"] .fg-cloudx { opacity: 1; } .sv9[data-net="off"] .fg-cloud path:first-child { opacity: 0.35; }
.fg-frag { fill: transparent; stroke: rgba(160, 200, 190, 0.35); stroke-width: 1.5; transition: fill 200ms, stroke 200ms; }
.fg-frag.got { fill: var(--lime); stroke: var(--lime); } .fg-frag.bad { fill: var(--amber); stroke: var(--amber); }
.fg-ok, .fg-bad { opacity: 0; transition: opacity var(--t); } .fg-ok circle { fill: var(--lime); } .fg-ok path { fill: none; stroke: var(--lime-ink); stroke-width: 2.5; } .fg-bad circle { fill: var(--amber); } .fg-bad path { stroke: #1b1206; stroke-width: 2.5; }
.sv9[data-sv="stored"] .fg-ok, .sv9[data-sv="open"] .fg-ok, .sv9[data-sv="gone"] .fg-ok { opacity: 1; } .sv9[data-sv="failed"] .fg-bad { opacity: 1; }
.sv9[data-sv="transfer"] .fg-link { stroke: var(--lime); animation: fgFlow 0.8s linear infinite; }
.sv9[data-sv="gone"] .fg-dev.nas, .sv9[data-sv="gone"] .fg-nasled, .sv9[data-sv="interrupted"] .fg-dev.nas { opacity: 0.3; } .sv9[data-sv="gone"] .fg-link, .sv9[data-sv="interrupted"] .fg-link { opacity: 0.2; }
.sv9[data-scen="none"][data-sv="none"] .fg-dev.nas { opacity: 0.2; }
@keyframes fgFlow { to { stroke-dashoffset: -24; } }
.fg-offer { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; margin: 10px 0; background: rgba(0, 0, 0, 0.2); }
.fg-offer h3 { margin: 0 0 8px; font-size: 16px; }
.fg-meter { font: 600 13px var(--mono); color: var(--muted); margin: 8px 0; } .fg-bar, .rl-bar2 { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin-bottom: 6px; }
.fg-bar i, .rl-bar2 i { display: block; height: 100%; width: 0; background: var(--lime); transition: width 200ms linear; }
.fg-doc { margin-top: 12px; border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; background: rgba(0, 0, 0, 0.25); }
.fg-doc header { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; } .fg-doc h3 { margin: 0; font-size: 17px; }
.fg-lines { padding-left: 20px; color: var(--muted); } .fg-lines li { margin: 6px 0; } .fg-src.hl { color: var(--ink); background: rgba(206, 255, 84, 0.12); outline: 1px solid rgba(206, 255, 84, 0.45); border-radius: 6px; padding: 2px 6px; }
.sv-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .sv-case h3 { margin: 6px 0; font-size: 17px; } .sv-case p { color: var(--muted); }
.sv-device { margin-top: 16px; } .cmp.packs td, .cmp.packs th { font-size: 13.5px; }
.sa-perms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .sa-perm h3 { margin: 0; font-size: 16px; } .sa-perm p { color: var(--muted); margin: 8px 0 0; }
.sa-grid { margin-top: 16px; } .sa-consent { border: 1px solid var(--violet); border-radius: 12px; padding: 14px 16px; background: rgba(160, 130, 255, 0.06); }
.sa-consent h3 { margin: 0 0 8px; font-size: 16px; } .sa-answer { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; }
.sa9[data-sa="risk"] .pay-state { color: var(--amber); }

/* Internet Relay */
.rl-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .rl-act h3 { margin: 6px 0; font-size: 18px; }
.rl-need { font: 600 12px var(--mono); text-transform: uppercase; color: var(--lime); } .rl-internet .rl-need { color: #ff9fd0; }
.rl-ic { display: block; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: radial-gradient(circle, var(--lime) 18%, transparent 22%); }
.rl-document .rl-ic { background: linear-gradient(#ffd27a 0 0) 50% 35% / 16px 3px, linear-gradient(#ffd27a 0 0) 50% 55% / 16px 3px, linear-gradient(#ffd27a 0 0) 50% 75% / 10px 3px; background-repeat: no-repeat; } .rl-internet .rl-ic { background: radial-gradient(circle, transparent 30%, #ff9fd0 32% 38%, transparent 40%); }
.rl-ctl { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; } .rl-side input[type="range"] { width: 100%; accent-color: var(--lime); }
.rl-n rect, .rl-n circle { fill: rgba(6, 9, 11, 0.85); stroke: var(--line-2); stroke-width: 2; } .rl-n path { fill: none; stroke: var(--line-2); stroke-width: 2; }
.rl-path { stroke: var(--line-2); stroke-width: 3; stroke-dasharray: 4 6; fill: none; }
.rl9[data-rl="active"] .rl-path { stroke: var(--lime); animation: fgFlow 0.8s linear infinite; }
.rl9[data-rl="active"] .rl-n rect, .rl9[data-rl="active"] .rl-n circle, .rl9[data-rl="active"] .rl-n path { stroke: var(--cyan); }
.rl9[data-rl="paused"] .rl-path.p1, .rl9[data-rl="paused"] .rl-path.p2 { stroke: var(--cyan); } .rl9[data-rl="paused"] .rl-path.p3, .rl9[data-rl="paused"] .rl-path.p4 { stroke: var(--amber); opacity: 0.4; }
.rl-pkt { fill: var(--lime); offset-path: path("M50 70 H580"); offset-distance: 0%; opacity: 0; }
.rl9[data-rl="active"] .rl-pkt { opacity: 1; animation: rlPkt 1.8s linear infinite; animation-delay: var(--d); }
@keyframes rlPkt { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.rl-cut { opacity: 0; } .rl-cut path { fill: none; stroke: var(--amber); stroke-width: 4; stroke-linecap: round; } .rl9[data-rl="paused"] .rl-cut { opacity: 1; }
.rl-meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0; } .rl-meters div { border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; }
.rl-meters dt { font: 600 11px var(--mono); text-transform: uppercase; color: var(--muted); } .rl-meters dd { margin: 4px 0 0; } .rl-meters .ok { color: var(--lime); }
.rl-kill:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.rl-who { margin-top: 16px; } .rl-who h3 { margin-top: 0; }
.rl9[data-rl="active"] .rl-who tr[data-who="ben"], .rl9[data-rl="active"] .rl-who tr[data-who="gw"] { background: rgba(206, 255, 84, 0.04); }
.ticks.cols2 { columns: 2; column-gap: 28px; } .ticks.cols2 li { break-inside: avoid; }
@media (max-width: 860px) { .fg-grid, .sa-grid, .rl-grid { grid-template-columns: minmax(0, 1fr); padding: 16px; } .rl-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ticks.cols2 { columns: 1; } }

/* card scenes: Survival and Relay (rest = final frame) */
.scene .sv-wifi path, .scene .sv-wifi circle { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; } .scene .sv-wifi circle { fill: var(--cyan); }
.scene .sv-wifi { opacity: 0.35; } .scene .sv-cut { stroke: var(--amber) !important; }
.scene .sv-book { fill: rgba(255, 210, 122, 0.25); stroke: #ffd27a; stroke-width: 2; } .scene .sv-shelf path { stroke: #ffd27a; stroke-width: 2; }
.scene .sv-peer { fill: rgba(6, 9, 11, 0.85); stroke: var(--violet); stroke-width: 2; } .scene .sv-peerled { stroke: var(--violet); stroke-width: 3; stroke-dasharray: 4 6; }
.scene .sv-link { fill: none; stroke: rgba(206, 255, 84, 0.45); stroke-width: 2; stroke-dasharray: 4 6; }
.scene .sv-pack { transform: translate(214px, 205px); } .scene .sv-pack rect { fill: var(--lime); } .scene .sv-pack path { stroke: var(--lime-ink); stroke-width: 2; }
.scene .sv-doc rect:first-child { fill: rgba(6, 9, 11, 0.9); stroke: var(--cyan); stroke-width: 2; } .scene .sv-ln { fill: rgba(160, 200, 190, 0.35); } .scene .sv-hl { fill: var(--lime); }
:is(.hub, .hero-scene).play .sv-wifi { animation: svWifi 3.6s var(--ease) both; } :is(.hub, .hero-scene).play .sv-cut { animation: svCut 3.6s var(--ease) both; }
:is(.hub, .hero-scene).play .sv-book { animation: svBook 3.6s var(--ease) both; }
:is(.hub, .hero-scene).play .sv-pack { animation: svPack 3.6s var(--ease) both; } :is(.hub, .hero-scene).play .sv-doc { animation: svDoc 3.6s var(--ease) both; } :is(.hub, .hero-scene).play .sv-hl { animation: svHl 3.6s var(--ease) both; }
@keyframes svWifi { 0% { opacity: 1; } 25%, 100% { opacity: 0.35; } }
@keyframes svCut { 0%, 12% { opacity: 0; } 25%, 100% { opacity: 1; } }
@keyframes svBook { 0%, 20% { fill: rgba(255, 210, 122, 0.05); } 35%, 100% { fill: rgba(255, 210, 122, 0.25); } }
@keyframes svPack { 0%, 30% { transform: translate(400px, 205px); opacity: 0; } 35% { opacity: 1; } 62%, 100% { transform: translate(214px, 205px); opacity: 1; } }
@keyframes svDoc { 0%, 62% { opacity: 0; transform: translate(250px, 84px); } 78%, 100% { opacity: 1; transform: translate(250px, 64px); } }
@keyframes svHl { 0%, 80% { fill: rgba(160, 200, 190, 0.35); } 92%, 100% { fill: var(--lime); } }
.scene .rl-pair { fill: none; stroke: var(--lime); stroke-width: 3; stroke-dasharray: 4 6; }
.scene .rl-tun { fill: none; stroke: var(--cyan); stroke-width: 5; stroke-linecap: round; opacity: 0.85; }
.scene .rl-gw rect { fill: rgba(6, 9, 11, 0.85); stroke: var(--cyan); stroke-width: 2; } .scene .rl-gw path { stroke: var(--cyan); stroke-width: 2; }
.scene .rl-bar { fill: none; stroke: rgba(160, 200, 190, 0.35); stroke-width: 2; } .scene .rl-fill { fill: #ff9fd0; }
.scene .rl-stop circle { fill: var(--amber); } .scene .rl-stop rect { fill: #1b1206; }
:is(.hub, .hero-scene).play .rl-pair { animation: rlPair 3.8s var(--ease) both; } :is(.hub, .hero-scene).play .rl-tun { animation: rlTun 3.8s var(--ease) both; }
:is(.hub, .hero-scene).play .rl-fill { animation: rlFill 3.8s linear both; transform-origin: 40px 257px; } :is(.hub, .hero-scene).play .rl-stop { animation: rlStop 3.8s var(--ease) both; }
@keyframes rlPair { 0% { stroke-dashoffset: 0; opacity: 0; } 15%, 100% { opacity: 1; } }
@keyframes rlTun { 0%, 18% { stroke-dasharray: 0 100; opacity: 0.2; } 45%, 100% { stroke-dasharray: 100 0; opacity: 0.85; } }
@keyframes rlFill { 0%, 40% { transform: scaleX(0); } 85%, 100% { transform: scaleX(1); } }
@keyframes rlStop { 0%, 82% { opacity: 0; transform: translate(330px, 200px) scale(0.6); } 92%, 100% { opacity: 1; transform: translate(330px, 200px) scale(1); } }
.hero-scene { position: relative; aspect-ratio: 480 / 300; } .hero-scene .scene { width: 100%; height: 100%; }

/* ---------------- v10: Prove it, relay view, verification, Guest & Dispatch, local tools, tracks ---------------- */
.prove-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: -8px 0 28px; }
.rs-grid, .vf-grid, .rc-grid, .gd-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; padding: 24px; border-radius: var(--r); }
.rs-ctl, .rc-ctl, .gd-ctl { display: grid; gap: 12px; align-content: start; }
.rs-ctl textarea { width: 100%; min-height: 72px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); color: var(--ink); font: inherit; resize: vertical; }
.rs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rs-steps .btn { width: 100%; justify-content: flex-start; }
.rs-svg, .gd-svg { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto; }
.rs-svg text, .gd-svg text { fill: var(--muted); font: 600 12px var(--mono); }
.rs-n circle { fill: rgba(6, 9, 11, 0.85); stroke: var(--line-2); stroke-width: 2; } .rs-A circle { stroke: var(--cyan); }
.rs-l { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 4 6; fill: none; }
.rs-halo { fill: none; stroke: var(--lime); stroke-width: 2; opacity: 0; }
.rs-env { transform: translate(60px, 62px); transition: transform 700ms var(--ease); } .rs-env rect { fill: var(--lime); } .rs-env path { fill: none; stroke: var(--lime-ink); stroke-width: 2; }
.rs10[data-rs="moving"] .rs-env, .rs10[data-rs="accepted"] .rs-env { transform: translate(280px, 62px); } .rs10[data-rs="moving2"] .rs-env, .rs10[data-rs="received"] .rs-env { transform: translate(500px, 62px); }
.rs10[data-rs="accepted"] .rs-B circle, .rs10[data-rs="received"] .rs-B circle { stroke: var(--lime); } .rs10[data-rs="received"] .rs-C circle { stroke: var(--lime); }
.rs10[data-rs="accepted"] .rs-l.l1, .rs10[data-rs="received"] .rs-l { stroke: var(--lime); }
.rs10[data-rs="accepted"] .h1, .rs10[data-rs="received"] .h2 { animation: rsHalo 1.6s var(--ease) 1 both; }
.rs10[data-rs="unavailable"] .rs-B { opacity: 0.25; } .rs10[data-rs="unavailable"] .rs-l.l1 { stroke: var(--amber); }
@keyframes rsHalo { 0% { opacity: 0.9; r: 26; } 100% { opacity: 0; r: 60; } }
.rs-status { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rs-status li { border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font-size: 13px; color: var(--muted); } .rs-status li.on { color: var(--ink); border-color: var(--lime); }
.rs-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .rs-col { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; } .rs-col h3 { margin: 0 0 8px; font-size: 15px; } .rs-col.see h3 { color: var(--amber); } .rs-col.hide h3 { color: var(--lime); }
.vf-pre { white-space: pre-wrap; font: 13px/1.5 var(--mono); background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.vf-bytes { font: 13px var(--mono); color: var(--muted); word-break: break-all; margin-bottom: 12px; } .vf-bytes .flip { color: #1b1206; background: var(--amber); border-radius: 3px; padding: 0 2px; }
.vf-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vf-checks li { display: grid; grid-template-columns: 150px 150px minmax(0, 1fr); gap: 10px; align-items: baseline; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px; }
.vf-checks .vc-state { font: 700 12px var(--mono); text-transform: uppercase; } .vf-checks .vc-prop { color: var(--muted); font-size: 13px; }
.vf-checks li[data-state="ok"] { border-color: var(--lime); } .vf-checks li[data-state="ok"] .vc-state { color: var(--lime); }
.vf-checks li[data-state="fail"] { border-color: var(--amber); } .vf-checks li[data-state="fail"] .vc-state { color: var(--amber); }
.vf-checks li[data-state="offline"] .vc-state, .vf-checks li[data-state="unsupported"] .vc-state { color: var(--violet); }
.vf-meta code { word-break: break-all; font-size: 12px; } .vf-explain { margin-top: 10px; }
.rc-where { display: block; font: 600 11px var(--mono); color: var(--cyan); text-transform: uppercase; font-style: normal; }
.ch-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .ch-lane h3 { margin: 0 0 8px; } .ch-salto h3 { color: var(--lime); } .ch-chain h3 { color: #ffd27a; } .ch-device h3 { color: var(--cyan); }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .bs-card h3 { margin: 6px 0; } .bs-flow { padding-left: 20px; color: var(--muted); } .bs-flow li { margin: 6px 0; }
.bs-chal { display: block; font-size: 12px; margin: 8px 0; word-break: break-all; } .bs-signers { list-style: none; padding: 0; display: grid; gap: 6px; } .bs-signers li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bs-signers button[aria-pressed="true"] { border-color: var(--lime); color: var(--lime); }
.cmp.truth td { font-size: 13px; } .cmp.truth td[data-c="2"] { color: var(--lime); }
.gd-n rect { fill: rgba(6, 9, 11, 0.85); stroke: var(--line-2); stroke-width: 2; } .gd-l { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 4 6; fill: none; }
.gd10[data-gd="joined"] .gd-kiosk rect, .gd10[data-gd="joined"] .gd-phone rect, .gd10[data-gd="requested"] .gd-kiosk rect, .gd10[data-gd="requested"] .gd-phone rect { stroke: var(--cyan); }
.gd10[data-gd="joined"] .l1, .gd10[data-gd="requested"] .l1 { stroke: var(--cyan); }
.gd10[data-gd="relaying"] .l2, .gd10[data-gd="relaying"] .l3, .gd10[data-gd="relayed"] .l2, .gd10[data-gd="relayed"] .l3 { stroke: var(--lime); animation: fgFlow 0.8s linear infinite; }
.gd10[data-gd="relayed"] .gd-relay rect, .gd10[data-gd="relayed"] .gd-source rect { stroke: var(--lime); }
.gd10[data-gd="left"] .gd-phone, .gd10[data-gd="relaying"] .gd-phone, .gd10[data-gd="relayed"] .gd-phone { opacity: 0.3; }
.gd10[data-gd="delivered"] .gd-phone rect, .gd10[data-gd="delivered"] .gd-kiosk rect { stroke: var(--lime); }
.gd10[data-gd="fake"] .gd-kiosk rect, .gd10[data-gd="altered"] .gd-phone rect, .gd10[data-gd="expired"] .gd-phone rect { stroke: var(--amber); }
.gd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; } .gd-card { border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 14px; } .gd-card h3 { margin: 0 0 6px; font-size: 15px; }
.bl-grid, .fd-grid, .op-grid, .cs-grid, .pw-grid, .mk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bl-card { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; } .bl-card header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .bl10[data-bl="unknown"] .bl-card, .bl10[data-bl="clock"] .bl-card { border-color: var(--amber); } .bl10[data-bl="cancel"] .bl-card { opacity: 0.75; border-style: dashed; }
.fd-form { display: grid; gap: 10px; } .fd-form label { display: grid; gap: 4px; font-size: 14px; } .fd-form input[type="text"] { min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); color: var(--ink); font: inherit; }
.op-frames { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .op-f { width: 100%; height: auto; background: #e8efe9; border-radius: 6px; padding: 4px; opacity: 0.18; transition: opacity 120ms; } .op-f rect { fill: #0b0f10; } .op-f .op-fi { fill: none; stroke: #0b0f10; stroke-width: 1.4; }
.op-f.seen { opacity: 1; } .op-f.lost { opacity: 1; background: var(--amber); }
.mk-text { font: 14px/1.6 var(--mono); background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; } .mk-text.out { border-color: var(--violet); }
.mk-toggles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .tk-card header { display: flex; gap: 10px; align-items: baseline; } .tk-card h3 { margin: 0; font-size: 17px; } .tk-card dl { font-size: 13.5px; } .tk-surface a { font-weight: 600; }
.track-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 32px; } .track-chips .chip { font-size: 13px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; }
.share[data-paused="true"] .share-bars { opacity: 0.6; }
.scene .gd-kiosk { fill: rgba(6, 9, 11, 0.85); stroke: var(--violet); stroke-width: 2; } .scene .gd-wave { fill: none; stroke: var(--violet); stroke-width: 3; stroke-linecap: round; }
.scene .gd-doc { fill: rgba(255, 210, 122, 0.3); stroke: #ffd27a; stroke-width: 2; } .scene .gd-ticket rect { fill: none; stroke: var(--lime); stroke-width: 2; stroke-dasharray: 4 3; } .scene .gd-ticket path { stroke: var(--lime); stroke-width: 2; }
.scene .vf-file { fill: rgba(6, 9, 11, 0.85); stroke: var(--cyan); stroke-width: 2; } .scene .vf-ln { fill: rgba(160, 200, 190, 0.35); } .scene .vf-arrow { fill: none; stroke: var(--lime); stroke-width: 3; }
.scene .vf-hash rect { fill: rgba(6, 9, 11, 0.85); stroke: var(--line-2); stroke-width: 2; } .scene .vf-hash text { fill: var(--ink); font-size: 16px; }
.scene .vf-seal circle { fill: var(--lime); } .scene .vf-seal path { fill: none; stroke: var(--lime-ink); stroke-width: 3; } .scene .vf-bad { opacity: 0; } .scene .vf-bad circle { fill: var(--amber); } .scene .vf-bad path { stroke: #1b1206; stroke-width: 3; }
:is(.hub, .hero-scene).play .gd-wave { animation: gdWave 3.6s var(--ease) both; } :is(.hub, .hero-scene).play .gd-doc { animation: gdTicket 3.6s var(--ease) both; } :is(.hub, .hero-scene).play .gd-ticket { animation: gdTicket 3.6s var(--ease) both; } :is(.hub, .hero-scene).play .gd-ok { animation: gdOk 3.6s var(--ease) both; }
:is(.hub, .hero-scene).play .vf-arrow { animation: rlTun 3.8s var(--ease) both; } :is(.hub, .hero-scene).play .vf-seal { animation: vfSeal 3.8s var(--ease) both; } :is(.hub, .hero-scene).play .vf-bad { animation: vfBad 3.8s var(--ease) both; } :is(.hub, .hero-scene).play .vf-ln:nth-child(3) { animation: vfLn 3.8s var(--ease) both; }
@keyframes gdWave { 0% { opacity: 0; } 20%, 100% { opacity: 1; } } @keyframes gdTicket { 0%, 40% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes vfSeal { 0%, 30% { opacity: 0; } 40%, 55% { opacity: 1; } 62%, 80% { opacity: 0; } 90%, 100% { opacity: 1; } } @keyframes vfBad { 0%, 58% { opacity: 0; } 64%, 80% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes vfLn { 0%, 55% { fill: rgba(160, 200, 190, 0.35); } 60%, 80% { fill: var(--amber); } 86%, 100% { fill: rgba(160, 200, 190, 0.35); } }
@media (max-width: 860px) { .rs-grid, .vf-grid, .rc-grid, .gd-grid, .bl-grid, .fd-grid, .op-grid, .cs-grid, .pw-grid, .mk-grid { grid-template-columns: minmax(0, 1fr); padding: 16px; } .rs-cols, .ch-lanes, .rs-status { grid-template-columns: minmax(0, 1fr); } .vf-checks li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
@keyframes gdOk { 0%, 80% { opacity: 0; } 92%, 100% { opacity: 1; } }
/* chat: two successive halos (relay accepts, recipient confirms); node: one refused fragment */
.scene .sc-halo { fill: none; stroke: var(--lime); stroke-width: 2; opacity: 0; }
.hub.play .sc-halo.h1 { animation: scHalo 3.6s var(--ease) both; } .hub.play .sc-halo.h2 { animation: scHalo2 3.6s var(--ease) both; }
@keyframes scHalo { 0%, 38% { opacity: 0; r: 22; } 45% { opacity: 0.9; } 62% { opacity: 0; r: 52; } 100% { opacity: 0; } }
@keyframes scHalo2 { 0%, 72% { opacity: 0; r: 22; } 79% { opacity: 0.9; } 96%, 100% { opacity: 0; r: 52; } }
.scene .sc-refused rect { fill: var(--amber); } .scene .sc-refused path { stroke: #1b1206; stroke-width: 2.5; }
.hub.play .sc-refused { animation: scRef 3.6s var(--ease) both; } @keyframes scRef { 0%, 55% { opacity: 0; } 65%, 100% { opacity: 1; } }

.track-chips .chip { white-space: normal; min-height: 32px; display: inline-flex; align-items: center; max-width: 100%; }