/* c0vibe.app/vision: the third front page (founder, 2026-11-08). A star map of the modules (every star a module, every
   branch its next ten years), one card per module that opens into its branch and slides, and the network principles.
   Loaded after shell.css, lab-shell.css, lab-sections.css and flip.css; the facts are drawn by js/vision.js. */

  /* ── the sky ── */
  body.vision { background: #07080c; }
  body.vision .ambient { background: radial-gradient(60% 50% at 10% 0%, rgba(58,42,122,.3), transparent 70%), radial-gradient(50% 45% at 100% 100%, rgba(18,78,118,.24), transparent 70%); }
  body.vision .topfade { background: #07080c; }
  .sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .3;
    background-image:
      radial-gradient(1.2px 1.2px at 12px 18px, rgba(255,255,255,.95) 50%, transparent 55%),
      radial-gradient(1px 1px at 70px 50px, rgba(255,255,255,.75) 50%, transparent 55%),
      radial-gradient(.8px .8px at 130px 92px, rgba(255,255,255,.6) 50%, transparent 55%),
      radial-gradient(1.5px 1.5px at 184px 142px, rgba(205,222,255,.85) 50%, transparent 55%),
      radial-gradient(.9px .9px at 40px 160px, rgba(255,255,255,.55) 50%, transparent 55%);
    background-size: 220px 220px, 260px 260px, 300px 300px, 340px 340px, 280px 280px; }
  .vstar { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; flex: none; vertical-align: -1px; }
  .vstar.lit { background: var(--p-ok); box-shadow: 0 0 8px var(--p-ok); }
  .vstar.rooted { background: radial-gradient(circle, var(--p-ember) 0 2px, #141820 2.5px); border: 2px solid var(--p-ember); }
  .vstar.charted { border: 1.5px dashed var(--p-dust); background: transparent; }

  /* ── the hero: title left, the compass right ── */
  .vhero { position: relative; display: grid; gap: 34px; padding-block: calc(var(--hdr) + 120px) 72px; align-items: start; grid-template-areas: "t" "c" "r"; }
  .vhero > h1 { grid-area: t; margin: 0; font-size: var(--h1); line-height: 1; font-weight: 700; white-space: nowrap; text-wrap: nowrap; }
  .vhero h1 [data-noun] { background: linear-gradient(92deg, #c4b5fd, #2fd6f2 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .vhero h1 .row2 { display: block; font-size: .44em; font-weight: 700; letter-spacing: -.012em; line-height: 1.12; margin-top: .22em; white-space: normal; text-wrap: balance; color: var(--bone); }
  .hero-copy { grid-area: c; } .vhero .right { grid-area: r; min-width: 0; }
  .vhero .lede { margin: 0; max-width: 52ch; color: var(--bone); opacity: .92; }
  .vhero .cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .vhero .fine { margin-top: 16px; color: var(--dust); font-size: .95rem; max-width: 52ch; }
  @media (min-width: 980px) { .vhero { grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); grid-template-areas: "t t" "c r"; gap: 30px 48px; } }
  @media (min-width: 1100px) { .vhero { padding-top: calc(119.5px - var(--h1) * 0.505); } }
  @media (max-width: 979px) { :root { --h1: clamp(2.05rem, 7.6vw, 3.4rem); } .vhero > h1 { white-space: normal; text-wrap: balance; } .vhero h1 .row2 { font-size: .7em; } }
  .vlegend { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
  .vlegend li { display: grid; grid-template-columns: 18px auto 1fr; gap: 0 10px; align-items: baseline; font-size: .9rem; color: var(--dust); }
  .vlegend li .vstar { align-self: center; }
  .vlegend li b { color: var(--bone); font-weight: 600; }
  @media (max-width: 559px) { .vlegend li { grid-template-columns: 18px 1fr; } .vlegend li span:last-child { grid-column: 2; } }
  .vcompass { margin: 0; padding: 18px 18px 16px; display: grid; gap: 12px; }
  .vcompass svg { width: 100%; height: auto; display: block; }
  .vcompass .c-branch { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.6; }
  .vcompass .c-star { fill: #f7a51c; }
  .vcompass .c-stop { fill: #141820; stroke: rgba(255,255,255,.7); stroke-width: 1.4; }
  .vcompass .c-far { fill: none; stroke: var(--p-vibe); stroke-width: 1.6; stroke-linejoin: round; }
  .vcompass .c-lab { fill: var(--p-dust); font: 500 13px var(--mono); }
  .vcompass figcaption { font-size: .9rem; color: var(--p-dust); line-height: 1.45; }
  .vcompass figcaption b { color: var(--p-bone); }
  .vcompass .c-states { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--p-bone); font-size: .84rem; }
  .vcompass .c-states span { display: inline-flex; align-items: center; gap: 7px; }

  /* ── the two front pages, as pills where the coin sits on the other two pages ── */
  .realms { display: inline-flex; gap: 8px; }
  .realms .fs-now { display: inline; }
  .realms .flipsw[data-flip="network"] { --flip-accent: #2fd6f2; }
  .realms .flipsw[data-flip="toolbox"] { --flip-accent: #ff8a33; }
  @media (max-width: 760px) { .realms { position: fixed; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; gap: 8px; } .realms .flipsw { position: static; background: rgba(12,18,30,.94); box-shadow: 0 10px 28px -10px rgba(0,0,0,.8); } }

  /* ── shared small parts: state pill, chips, section heads ── */
  .vstate { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--p-dust); white-space: nowrap; }
  .vstate::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; flex: none; }
  .vstate.lit { color: #dff9e9; border-color: rgba(76,209,138,.5); } .vstate.lit::before { background: var(--p-ok); box-shadow: 0 0 8px var(--p-ok); }
  .vstate.rooted { color: #ffd9bf; border-color: rgba(255,138,51,.45); } .vstate.rooted::before { background: #141820; border: 2px solid var(--p-ember); }
  .vstate.charted::before { border: 1.5px dashed var(--p-dust); background: transparent; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chips button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--dust); font: 600 .84rem var(--body); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
  .chips button:hover { color: var(--bone); border-color: var(--line-2); background: rgba(255,255,255,.08); }
  .chips button[aria-selected="true"], .chips button.on { color: var(--night); background: var(--bone); border-color: var(--bone); }
  .chips button[style*="--tint"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 6px var(--tint); flex: none; }
  #map, #modules, #network { scroll-margin-top: calc(var(--hdr) + 16px); }

  /* ── the star map ── */
  .vmap { margin-top: 30px; padding: 14px; display: grid; gap: 12px; }
  .vmap-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; align-items: center; }
  .vmap-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
  .zoom { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
  .zoom button { width: 38px; height: 32px; border: 0; background: rgba(255,255,255,.04); color: var(--bone); font: 600 1.05rem var(--body); cursor: pointer; }
  .zoom button + button { border-left: 1px solid var(--line-2); }
  .zoom button:hover { background: rgba(255,255,255,.1); }
  .zoom [data-zoom="fit"] { width: auto; padding: 0 12px; font-size: .84rem; }
  .vmap-stage { position: relative; width: 100%; aspect-ratio: 2200 / 1900; max-height: 82vh; overflow: hidden; border-radius: 12px; outline: none; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
    background: radial-gradient(70% 60% at 50% 46%, rgba(44,50,96,.42), rgba(7,8,12,.15) 70%), rgba(7,8,12,.5); }
  .vmap-stage.engaged { touch-action: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-signal) 55%, transparent); }
  .vmap-stage.dragging { cursor: grabbing; }
  .vmap-stage:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  @media (max-width: 760px) { .vmap { padding: 10px; } .vmap-stage { aspect-ratio: 1 / 1.1; max-height: 70vh; } .vmap-bar .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 2px; } .vmap-bar .chips::-webkit-scrollbar { display: none; } .vmap-bar .chips button { flex: none; } }
  #vmapSvg { width: 100%; height: 100%; display: block; font-family: var(--body); }
  #vmapSvg text { fill: var(--p-dust); font-size: 16px; paint-order: stroke; stroke: rgba(7,8,12,.9); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
  .sunspoke { stroke: rgba(255,255,255,.12); stroke-width: 1.5; stroke-dasharray: 3 9; stroke-linecap: round; }
  .spoke { stroke: rgba(255,255,255,.07); stroke-width: 1.2; }
  .branch { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 1.4; }
  .branch.lit { stroke: color-mix(in srgb, var(--tint) 40%, transparent); }
  .stop { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.38); stroke-width: 1.2; transition: fill .3s, stroke .3s, opacity .3s; }
  .stop.far { fill: rgba(7,8,12,.6); stroke: var(--p-vibe); stroke-width: 1.3; stroke-linejoin: round; }
  .stop.hl { fill: var(--tint); stroke: #fff; filter: drop-shadow(0 0 5px var(--tint)); }
  .vmap-stage[data-h]:not([data-h="now"]) .stop:not(.hl) { opacity: .55; }
  .hub .core { fill: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,.8)); }
  .hub .name { font: 700 26px var(--display); fill: var(--tint); letter-spacing: .04em; text-transform: uppercase; }
  .hub .line { font-size: 14px; }
  .sun .name { font: 700 20px var(--display); fill: var(--p-bone); text-anchor: middle; }
  .sun .line { font-size: 14px; text-anchor: middle; }
  .star { cursor: pointer; outline: none; }
  .star .glow { fill: url(#vglow); opacity: 0; transition: opacity .35s; }
  .star.lit .glow { opacity: .55; }
  .star .pin { transition: transform .3s var(--ease); transform-box: fill-box; transform-origin: center; }
  .star:hover .pin, .star:focus-visible .pin, .star.on .pin { transform: scale(1.35); }
  .star .core { fill: var(--tint); }
  .star.rooted .core { fill: #141820; stroke: var(--tint); stroke-width: 2.5; }
  .star.rooted .seed { fill: var(--tint); }
  .star.charted .core { fill: rgba(20,24,32,.7); stroke: var(--tint); stroke-width: 1.6; stroke-dasharray: 3 3; }
  .star .label { font-weight: 600; fill: var(--p-bone); font-size: 19px; transition: fill .2s; }
  .star:hover .label, .star:focus-visible .label, .star.on .label { fill: #fff; }
  .star.on .core, .star.hl .core { filter: drop-shadow(0 0 8px var(--tint)); }
  .star:focus-visible .core { stroke: #fff; stroke-width: 2; }
  .vmap-stage.live .star.lit .core { animation: vtwinkle 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
  @keyframes vtwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .58; } }
  .join { fill: none; stroke: var(--tint); stroke-width: 1.6; opacity: .6; stroke-dasharray: 7 6; }
  .vtip { position: absolute; z-index: 5; pointer-events: none; max-width: 290px; padding: 10px 12px; border-radius: 12px; background: rgba(12,16,24,.96); border: 1px solid var(--line-2); box-shadow: 0 16px 32px -16px rgba(0,0,0,.8); font-size: .86rem; color: var(--p-dust); line-height: 1.4; }
  .vtip b { display: block; font: 700 1rem var(--display); color: var(--p-bone); margin-bottom: 2px; }
  .vtip .vstate { margin-top: 8px; }
  .vhint { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; margin: 0; padding: 7px 12px; border-radius: 999px; background: rgba(12,16,24,.92); border: 1px solid var(--line-2); color: var(--p-bone); font-size: .8rem; pointer-events: none; }
  .vmap-noscript { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--p-dust); }
  .vhorizon { display: grid; gap: 10px; padding: 6px 4px 2px; }
  .vhorizon h3 { margin: 0; font: 700 1.15rem var(--display); color: var(--p-bone); }
  .vhorizon h3 span { color: var(--p-dust); font-weight: 500; font-size: .9rem; margin-left: 10px; }
  #vhList { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 20px; font-size: .9rem; color: var(--p-dust); }
  #vhList li { padding-left: 12px; border-left: 2px solid var(--tint, var(--line-2)); line-height: 1.4; }
  #vhList li b { color: var(--p-bone); font-weight: 600; margin-right: 6px; }
  #vhList li.vh-con { grid-column: 1 / -1; border: 0; padding: 10px 0 0; font: 700 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tint); }

  /* ── the cards ── */
  .fchips { margin-top: 24px; }
  .con-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 40px 0 0; font: 700 1.5rem var(--display); color: var(--p-bone); }
  .con-head .vstar { background: var(--tint); box-shadow: 0 0 10px var(--tint); border: 0; align-self: center; }
  .con-head > span:last-child { font: 400 .95rem var(--body); color: var(--p-dust); }
  .con-head.hidden, .vgrid.hidden, .vcard.hidden { display: none; }
  .vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; margin-top: 16px; }
  @media (min-width: 1500px) { .vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .vcard { position: relative; display: grid; align-content: start; gap: 11px; padding: 18px 18px 16px; overflow: hidden; scroll-margin-top: calc(var(--hdr) + 20px); border-color: color-mix(in srgb, var(--tint) 22%, var(--line)); transition: transform .35s var(--ease), border-color .35s; }
  .vcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tint) 45%, var(--line)); }
  .vcard:focus { outline: none; }
  .vcard.open { grid-column: 1 / -1; transform: none; border-color: color-mix(in srgb, var(--tint) 55%, var(--line)); }
  .vcard[data-state="charted"] { border-style: dashed; }
  .vc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .vcard .disc { width: 46px; height: 46px; background: #232c3f; box-shadow: 0 1px 2px rgba(0,0,0,.55), 0 10px 20px -6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1); }
  .vcard .disc svg { width: 31px; height: 31px; }
  /* the app's 3D icon on the card's disc, as on the toolbox signs (css/rail3d.css puts the picture at inset 0 of a positioned disc) */
  html[data-rail="3d"] .vcard .disc[data-i3d] { position: relative; width: 62px; height: 62px; margin: -6px -6px -6px 0; border-radius: 0; background: none; box-shadow: none; }
  html[data-rail="3d"] .vcard .disc[data-i3d] svg { display: none; }
  .vcard .wm { height: 20px; width: auto; }
  .vcard .wm-text { font: 700 1.3rem/1 var(--display); letter-spacing: .01em; color: var(--tint); }
  .vcard h3 { margin: 0; font-size: 1.2rem; line-height: 1.15; }
  .vcard p { margin: 0; color: var(--p-dust); font-size: .92rem; line-height: 1.45; }
  .vcard p b, .vd-branch b.k { display: inline-block; color: var(--p-bone); font: 600 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
  .vbar { display: flex; gap: 3px; height: 6px; margin-top: 2px; }
  .vbar i { flex: 1; border-radius: 3px; background: rgba(255,255,255,.1); box-sizing: border-box; }
  .vbar i.live { background: var(--p-ok); } .vbar i.beta { background: linear-gradient(90deg, var(--p-vibe) 50%, rgba(255,255,255,.1) 50%); }
  .vbar i.alpha { background: transparent; box-shadow: inset 0 0 0 1.5px var(--p-signal); } .vbar i.soon { background: rgba(127,137,150,.5); } .vbar i.tbc { border: 1px dashed var(--p-dust); }
  .vbar-words { font-size: .78rem; margin-top: -4px; }
  .vc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--p-line); }
  .vopen { background: none; border: 0; padding: 0; color: var(--p-signal); font: 600 .9rem var(--body); cursor: pointer; }
  .vopen:hover { text-decoration: underline; }
  .vst { color: var(--p-dust); font-size: .84rem; text-decoration: none; }
  .vst:hover { color: var(--p-bone); text-decoration: underline; }

  /* the card, opened: the branch left, the slides right */
  .vdetail { display: grid; gap: 24px; padding-top: 14px; border-top: 1px solid var(--p-line); animation: vfade .5s var(--ease) both; }
  @keyframes vfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @media (min-width: 980px) { .vdetail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .vd-branch { display: grid; gap: 16px; align-content: start; }
  .stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .stops li { position: relative; padding-left: 26px; }
  .stops li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
  .stops li.here::before { background: var(--tint); border-color: var(--tint); box-shadow: 0 0 10px var(--tint); }
  .stops li.far::before { border-radius: 2px; transform: rotate(45deg); border-color: var(--p-vibe); background: transparent; }
  .stops li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 18px; bottom: -15px; width: 1.5px; background: rgba(255,255,255,.14); }
  .stops .h { display: block; font: 600 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--p-dust); margin-bottom: 3px; }
  .stops li.here .h { color: var(--tint); }
  .stops p { color: var(--p-bone) !important; font-size: .95rem !important; }
  .vdone { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--p-line); color: var(--p-bone) !important; font-size: .95rem !important; }
  .vchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .vchips b { width: 100%; }
  .vchips span, .vchips a { font-size: .82rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--p-line); color: var(--p-bone); text-decoration: none; }
  .vchips.not span { text-decoration: line-through; text-decoration-color: var(--p-ember); text-decoration-thickness: 1.5px; }
  .vchips a:hover { border-color: var(--tint); }
  .vd-media { display: grid; gap: 10px; align-content: start; min-width: 0; }
  .slides { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; border-radius: var(--shot-r); }
  .slides::-webkit-scrollbar { display: none; }
  .slides:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
  .slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; display: grid; gap: 8px; min-width: 0; }
  .slide .pic { position: relative; aspect-ratio: 16 / 10; border-radius: var(--shot-r); overflow: hidden; background: #0d1118; }
  .slide .pic img, .slide .pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .slide .pic video { opacity: 0; transition: opacity .3s; } .slide .pic video.on { opacity: 1; }
  .slide .slot { position: absolute; inset: 0; aspect-ratio: auto; min-height: 0; }
  .slide figcaption { font-size: .88rem; color: var(--p-dust); }
  .slide figcaption b { color: var(--p-bone); font-weight: 600; }
  .slnav { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .slnav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--bone); cursor: pointer; font: 600 1rem var(--body); }
  .slnav button:hover { background: rgba(255,255,255,.1); }
  .dots { display: flex; gap: 6px; }
  .dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.25); cursor: pointer; }
  .dots button.on { background: var(--tint); }
  .vd-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .86rem !important; }
  .vd-foot a { color: var(--p-signal); text-decoration: none; } .vd-foot a:hover { text-decoration: underline; }

  /* ── the network principles ── */
  #network .sec-head .lede.sub { font-size: 1rem; color: var(--p-dust); }
  #network .sec-head .lede.sub b { color: var(--p-bone); font-weight: 600; }
  .principles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 30px; }
  .vprin { padding: 20px 20px 18px; display: grid; gap: 12px; align-content: start; }
  .vprin[data-state="charted"] { border-style: dashed; }
  .vprin header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .vwhen { font: 600 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--p-dust); }
  .vprin h3 { margin: 0; font-size: 1.25rem; line-height: 1.15; }
  .vprin .line { margin: 0; color: var(--p-bone); font-size: .95rem; line-height: 1.45; }
  .vprin dl { margin: 2px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: .88rem; color: var(--p-dust); line-height: 1.45; }
  .vprin dt { font: 600 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
  .vprin dd { margin: 0; }