/* c0vibe.app front page: the app shell, one to one with the app, plus the footer. Shared with wall.html. */

  :root {
    --night: #0a0d12; --raise: #11151c; --raise-2: #171c25; --slab-a: #111928; --slab-b: #0c121e;
    --plate: #232c3f; --plate-ink: #eef2fb; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
    --bone: #eef1f4; --dust: #98a2ae; --dust-2: #6b7581; --ember: #ff7a1a; --ember-ink: #1a0d03; --vibe: #ffd23f;
    --signal: #08dff7; --ok: #4cd18a; --tint: #ff7a1a;
    --display: "Funnel Display", "Funnel Sans", system-ui, sans-serif; --body: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --r-card: 18px; --r-field: 12px; --r-reg: 12px 4px 12px 4px; --ease: cubic-bezier(.22,.78,.24,1); --rail-pad: 0px; --h1: clamp(2.6rem, 5.1vw, 5.6rem); --card-w: 500px; --cz: 1;
    /* the app's frame geometry (TopBar.css, AppSidebarFrame.css, SidebarHeaderView.css) */
    --hdr: 56px; --c0link-live-underline: rgba(8, 223, 247, 0.78); --c0x-frame-stroke-width: 2px; --c0x-frame-outline-bed: rgba(2, 6, 23, 0.55);
    --c0x-topbar-slab-start: clamp(282px, max(30vw, min(352px, calc(-208px + 70vw))), 512px); --c0x-topbar-slab-radius: 24px;
    --c0x-sidebar-rail-width: 70px; --c0x-sidebar-cutout-center-x: 77px; --c0x-sidebar-cutout-paint-width: 79px; --c0x-sidebar-cutout-bottom: 127px;
    --c0x-sidebar-cutout-mask-radius: 64.5px; --c0x-sidebar-cutout-mask-center-y: 63.5px;
    --c0x-icon-plate-face: #232c3f; --c0x-icon-plate-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,.10);
    --c0x-command-halo-ring-speed: 6.8s;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--night); color: var(--bone); font-family: var(--body); font-size: 17px; line-height: 1.5; padding-inline: 16px; padding-block: 0 72px; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; }
  .ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 8% 0%, rgba(40,56,120,.35), transparent 70%), radial-gradient(55% 45% at 100% 100%, rgba(110,28,52,.32), transparent 70%); }
  /* content fades out as it scrolls up to the header line (founder: gradually, starting about 0.5cm before the line): a fixed layer under the header paints the page's own background (the same gradients, pinned to the viewport), solid above the line and gone 20px below it. It lives inside .site, under the header's z-index 50 and above the content. */
  .topfade { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--hdr) + 20px); z-index: 40; pointer-events: none; background: radial-gradient(60% 50% at 8% 0%, rgba(40,56,120,.35), transparent 70%) fixed, radial-gradient(55% 45% at 100% 100%, rgba(110,28,52,.32), transparent 70%) fixed, var(--night); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--hdr), rgba(0,0,0,.72) calc(var(--hdr) + 5px), rgba(0,0,0,.38) calc(var(--hdr) + 11px), rgba(0,0,0,.12) calc(var(--hdr) + 16px), transparent calc(var(--hdr) + 20px)); mask-image: linear-gradient(to bottom, #000 0, #000 var(--hdr), rgba(0,0,0,.72) calc(var(--hdr) + 5px), rgba(0,0,0,.38) calc(var(--hdr) + 11px), rgba(0,0,0,.12) calc(var(--hdr) + 16px), transparent calc(var(--hdr) + 20px)); }
  a { color: inherit; }
  img { max-width: 100%; display: block; }
  ::selection { background: var(--ember); color: var(--ember-ink); }
  :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
  .site { position: relative; z-index: 1; }
  .wrap { max-width: 1560px; margin: 0 auto; padding-left: var(--rail-pad); }
  /* left-anchored next to the rail (founder, 01:40: "make the body left aligned again"); the block runs up to 1760px so a wide screen is used, with a 40px gutter on the right */
  @media (min-width: 1100px) { :root { --rail-pad: 70px; } .wrap { margin: 0; box-sizing: border-box; padding-left: calc(var(--rail-pad) + 62px); padding-right: 40px; max-width: calc(1760px + var(--rail-pad) + 102px); } }
  h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; text-wrap: balance; margin: 0; }
  h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.02; font-weight: 700; }
  h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
  p { margin: 0; max-width: 60ch; }
  .lede { font-size: 1.2rem; color: var(--dust); }
  .btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 14px 22px; font: 600 1rem var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); white-space: nowrap; }
  .btn:active { transform: scale(.98); }
  /* the primary button wears the app's vibe gradient, orange into yellow, like the header seam */
  .btn-primary { background: linear-gradient(90deg, #ea7b2b, #f2a634 42%, #f6c538); color: var(--ember-ink); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset; }
  .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
  .btn-ghost { background: transparent; color: var(--bone); border-color: var(--line-2); }
  .btn-ghost:hover { border-color: var(--bone); }

  /* ───────── THE SHELL, one to one with the app ───────── */
  .shell { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 0; z-index: 50; overflow-x: clip; overflow-y: visible; } /* the 260-wide frame drawing must not widen a narrow page */
  .c0x-topbar-glass { position: absolute; top: 0; left: 0; right: 0; height: var(--hdr); background: transparent; isolation: isolate; }
  .c0x-topbar-glass::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: var(--c0x-topbar-slab-start); z-index: 2; pointer-events: none; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,.06); border-bottom-left-radius: var(--c0x-topbar-slab-radius); background: linear-gradient(180deg, rgb(17,25,40) 0%, rgb(12,18,30) 100%), linear-gradient(90deg, rgba(73,227,255,.045), rgba(0,138,255,.025)); box-shadow: -8px 0 16px -10px rgba(0,0,0,.55); }
  /* A + B in the app's vibe-gradient: the seam and the full under edge as one masked band, orange out of the corner into yellow */
  .c0x-topbar-glass::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--c0x-topbar-slab-start); right: 0; z-index: 3; pointer-events: none; box-sizing: border-box; padding: 0 0 var(--c0x-frame-stroke-width) var(--c0x-frame-stroke-width); border-bottom-left-radius: var(--c0x-topbar-slab-radius); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; background: linear-gradient(90deg, #ea7b2b 0%, #f2a634 26%, #f6c538 64%); animation: c0x-frame-seam-breathe 3.6s ease-in-out infinite; }
  @keyframes c0x-frame-seam-breathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
  /* the cloud dock (C0CAPCloudQuotaPill.chrome.ts) */
  .c0x-cloud-pill { position: absolute; top: 0; left: 0; z-index: 4; display: inline-flex; align-items: center; gap: 10px; height: var(--hdr); width: 236px; padding: 0 14px 0 12px; border-radius: 0 0 18px 0; overflow: hidden; font: 500 11px var(--body); color: var(--dust); white-space: nowrap; user-select: none; background: linear-gradient(180deg, color-mix(in srgb, rgb(17,25,40) 96%, rgba(255,255,255,.04)) 0%, color-mix(in srgb, rgb(16,24,39) 92%, rgba(0,0,0,.12)) 100%), linear-gradient(90deg, color-mix(in srgb, #49E3FF 7%, transparent) 0%, transparent 72%); background-blend-mode: normal, screen; -webkit-backdrop-filter: blur(6px) saturate(118%); backdrop-filter: blur(6px) saturate(118%); transform: translateZ(0); box-shadow: inset 0 0 0 1px color-mix(in srgb, rgb(16,24,39) 92%, rgba(0,0,0,.12)); }
  .c0x-cloud-pill b { color: var(--bone); font-weight: 600; }
  .c0x-cloud-pill .bar { width: 48px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; margin-left: auto; }
  .c0x-cloud-pill .bar i { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, #0392be, #1ac1c9); transition: width 1s var(--ease); }
  /* C + D as ONE stroke in the app's c0-gradient: dock right edge, dock under edge, the cutout's left arc, the rail line. One path, no seams. */
  /* the drawing is 260 wide by design; the clip box keeps it from widening a page narrower than that (230 was tested) */
  .frame-clip { position: absolute; top: 0; left: 0; width: min(260px, 100vw); height: 100vh; height: 100dvh; overflow: hidden; z-index: 6; pointer-events: none; }
  .frame-svg { position: absolute; top: 0; left: 0; width: 260px; height: 100%; pointer-events: none; overflow: visible; }
  .frame-svg .bed { fill: none; stroke: var(--c0x-frame-outline-bed); stroke-width: 4.4; }
  .frame-svg .line { fill: none; stroke: url(#cdgrad); stroke-width: 2; animation: c0x-frame-seam-breathe 3.6s ease-in-out infinite; }
  /* SLAB CUT (founder test, image 16): the header slab starts just left of the logo instead of at the app's clamp. Revert: delete this one rule. */
  @media (min-width: 1100px) { :root { --c0x-topbar-slab-start: calc(50vw - 120px); } }
  /* tablets: the same cut, so the centred mark sits inside the slab and clear of the dock */
  @media (min-width: 761px) and (max-width: 1099px) { :root { --c0x-topbar-slab-start: calc(50vw - 120px); } }
  /* the ticker: rolls in under the slab from the right and fades out at 55vw, the X the founder drew right of the logo (image 15); numbers baked from the repo at build, days and doors tick live */
  .ticker { position: absolute; top: var(--hdr); left: 55vw; right: 0; height: 32px; overflow: hidden; z-index: 4; display: flex; align-items: center; pointer-events: none; contain: layout style paint; isolation: isolate; transform: translateZ(0); mask-image: linear-gradient(90deg, transparent 0, #000 180px, #000 calc(100% - 70px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 180px, #000 calc(100% - 70px), transparent); }
  .ticker-track { display: inline-flex; white-space: nowrap; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dust); animation: tick 90s linear infinite; will-change: transform; backface-visibility: hidden; }
  .tk-set { display: inline-flex; gap: 44px; padding-right: 44px; }
  .ticker-track b { color: var(--bone); font-weight: 600; }
  @keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (max-width: 1099px) { .ticker { display: none; } }
  /* the brand, centred in the header like the app; SUITE at the app's size */
  .brand { position: absolute; left: 50%; top: 0; height: var(--hdr); transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 16px; text-decoration: none; }
  .brand img { height: 24px; width: auto; }
  .brand .suite { font: 500 1.05rem/1 var(--display); letter-spacing: .36em; color: #cbd5e1; padding-top: 2px; }
  .slab-content { position: absolute; top: 0; height: var(--hdr); left: var(--c0x-topbar-slab-start); right: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 22px; padding: 0 16px 0 22px; }
  .navwrap { display: none; align-items: center; gap: 22px; font-weight: 500; font-size: .95rem; color: var(--dust); }
  .navwrap a { text-decoration: none; white-space: nowrap; transition: color .3s var(--ease); }
  .navwrap a:hover { color: var(--bone); }
  .actions { display: flex; align-items: center; gap: 10px; }
  .xfollow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--bone); text-decoration: none; font: 600 .85rem var(--body); white-space: nowrap; transition: border-color .3s var(--ease); }
  .xfollow:hover { border-color: var(--bone); }
  .xfollow svg { width: 14px; height: 14px; fill: currentColor; }
  .cta { padding: 7px 14px; font-size: .9rem; }
  .cta .short { display: none; }
  @media (min-width: 1560px) { .navwrap { display: flex; } }
  @media (max-width: 1400px) { .xfollow span { display: none; } .xfollow { padding: 8px; } }
  @media (max-width: 999px) { .brand .suite { display: none; } }
  /* the dock holds two buttons: the sidebar toggle (narrow only) and the door text that opens its sentence */
  .doorbtn { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
  .doorbtn:focus-visible, .navtoggle:focus-visible { outline: 2px solid var(--live); outline-offset: -3px; border-radius: 10px; }
  .navtoggle { display: none; }
  /* narrow header (founder, 2026-09-18): the dock is toggle + countdown, 150 wide; the slab shrinks to the mark
     with a little air, so the two header pieces never meet. The frame stroke is generated from the dock
     width in shell.js, so the drawing and the dock cannot disagree. */
  @media (max-width: 760px) {
    /* fluid, so the two header pieces cannot meet at ANY width (founder tested 230): the dock is at most 150 and
       never more than 40% of the screen; the slab is the mark plus its padding, and the mark scales with the screen.
       Mark width = height x 5.316 (707:133). At 230 wide: dock 112, slab 94, 24 of air. At 390: 150 and 126, 114 of air. */
    :root {
      --c0x-mark-h: clamp(13px, 4.6vw, 18px); --c0x-slab-pad: clamp(9px, 4vw, 20px);
      --c0x-dock-w: clamp(104px, 40vw, 150px);
      --c0x-topbar-slab-start: calc(100vw - (var(--c0x-mark-h) * 5.316 + var(--c0x-slab-pad) * 2));
    }
    .c0x-cloud-pill { width: var(--c0x-dock-w); padding: 0 8px 0 4px; gap: 2px; }
    .c0x-cloud-pill .bar, .c0x-cloud-pill #doorDays { display: none; }
    .c0x-cloud-pill b { font-variant-numeric: tabular-nums; font-size: clamp(11px, 3.3vw, 12.5px); }
    .brand { left: auto; right: var(--c0x-slab-pad); transform: none; }
    .brand img { height: var(--c0x-mark-h); }
    .slab-content .actions { display: none; }
  }
  /* what the countdown pill opens: the sentence it stands for */
  .doorsheet { position: fixed; z-index: 60; left: 10px; top: calc(var(--hdr) + 8px); width: min(300px, calc(100vw - 20px));
    background: rgba(8,12,18,.92); border: 1px solid var(--line-2); border-radius: 18px; padding: 14px 16px; color: var(--dust);
    font-size: .88rem; line-height: 1.45; backdrop-filter: blur(16px); box-shadow: 0 24px 60px -30px rgba(0,0,0,.9);
    transform: translateY(-8px) scale(.98); opacity: 0; pointer-events: none; transition: transform .34s var(--ease), opacity .24s var(--ease); }
  .doorsheet b { color: var(--bone); }
  .doorsheet[data-open="1"] { transform: none; opacity: 1; pointer-events: auto; }
  @media (prefers-reduced-motion: reduce) { .doorsheet { transition: none; } }
  /* the sidebar under the header: rail paint with the circular cutout */
  .c0x-sidebar-root { position: absolute; top: var(--hdr); left: 0; width: var(--c0x-sidebar-cutout-paint-width); height: calc(100vh - var(--hdr)); height: calc(100dvh - var(--hdr)); }
  .c0x-sidebar-root::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; width: var(--c0x-sidebar-cutout-paint-width); background: linear-gradient(180deg, rgba(17,25,40,.88) 0%, rgba(12,18,30,.96) 100%); clip-path: polygon(0 0, 100% 0, 100% var(--c0x-sidebar-cutout-bottom), var(--c0x-sidebar-rail-width) var(--c0x-sidebar-cutout-bottom), var(--c0x-sidebar-rail-width) 100%, 0 100%); -webkit-mask-image: radial-gradient(circle at var(--c0x-sidebar-cutout-center-x) var(--c0x-sidebar-cutout-mask-center-y), transparent 0 var(--c0x-sidebar-cutout-mask-radius), #000 calc(var(--c0x-sidebar-cutout-mask-radius) + 1px)); mask-image: radial-gradient(circle at var(--c0x-sidebar-cutout-center-x) var(--c0x-sidebar-cutout-mask-center-y), transparent 0 var(--c0x-sidebar-cutout-mask-radius), #000 calc(var(--c0x-sidebar-cutout-mask-radius) + 1px)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  .halo-slot { position: absolute; left: var(--c0x-sidebar-cutout-center-x); top: var(--c0x-sidebar-cutout-mask-center-y); width: 0; height: 0; z-index: 3; }
  .c0x-sidebar-halo-fallback-ring { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; z-index: 4; width: 88px; height: 88px; border-radius: 9999px; overflow: visible; pointer-events: none; opacity: .58; transform: translate(-50%, -50%) rotate(90deg) scale(1); background: conic-gradient(from 90deg, rgba(34,211,238,.95) 0deg 60deg, rgba(251,146,60,.86) 82deg 132deg, rgba(52,211,153,.7) 158deg 214deg, rgba(34,211,238,.88) 238deg 360deg); -webkit-mask-image: radial-gradient(circle, transparent calc(50% - 3.5px), #000 calc(50% - 2.5px), #000 calc(50% + .5px), transparent calc(50% + 1.5px)); mask-image: radial-gradient(circle, transparent calc(50% - 3.5px), #000 calc(50% - 2.5px), #000 calc(50% + .5px), transparent calc(50% + 1.5px)); animation: c0x-sidebar-halo-css-idle var(--c0x-command-halo-ring-speed) ease-in-out infinite; }
  .c0x-sidebar-halo-fallback-ring::after { content: ""; position: absolute; inset: -7px; border-radius: inherit; opacity: .42; background: repeating-conic-gradient(from 90deg, rgba(34,211,238,.92) 0deg .95deg, transparent 1deg 5.1deg); -webkit-mask-image: radial-gradient(circle, transparent calc(50% - 10.5px), #000 calc(50% - 9.5px), #000 calc(50% - .5px), transparent calc(50% + .5px)); mask-image: radial-gradient(circle, transparent calc(50% - 10.5px), #000 calc(50% - 9.5px), #000 calc(50% - .5px), transparent calc(50% + .5px)); }
  @keyframes c0x-sidebar-halo-css-idle { 0%, 100% { opacity: .5; transform: translate(-50%, -50%) rotate(90deg) scale(.992); } 50% { opacity: .66; transform: translate(-50%, -50%) rotate(90deg) scale(1.012); } }
  .orb-visual { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 32%, #1d2b48, #0b1220 72%); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px -8px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
  .orb-visual img { width: 34px; height: auto; }
  .railnav { position: absolute; left: 0; top: calc(var(--hdr) + var(--c0x-sidebar-cutout-bottom) + 34px); width: var(--c0x-sidebar-rail-width); display: none; flex-direction: column; align-items: center; gap: 10px; padding: 0 9px; z-index: 3; }
  .railnav a { width: 42px; display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--dust); font-size: 9px; font-weight: 600; letter-spacing: .02em; }
  .disc { width: 38.4px; height: 38.4px; border-radius: 50%; background: var(--c0x-icon-plate-face); box-shadow: var(--c0x-icon-plate-shadow); display: grid; place-items: center; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
  .disc svg { width: 26px; height: 26px; overflow: visible; }
  .railnav a:hover .disc, .railnav a.on .disc { transform: translateY(-1px) scale(1.06); box-shadow: var(--c0x-icon-plate-shadow), 0 0 0 1px rgba(8,223,247,.35); }
  .railnav a.on { color: #08dff7; }
  .railnav a.on .disc svg, .railnav a:hover .disc svg { color: var(--full-tint) !important; }
  @media (min-width: 1100px) { .railnav { display: flex; } }


  /* no sideways page, at any width (230 was tested): grid and flex children may shrink below their content, a code
     block scrolls inside itself, and the root clips. Without this one wide <pre> in the Arcade made a 230 screen
     lay out at 331 and the phone zoomed the whole page out. */
  html { overflow-x: clip; }
  @media (max-width: 979px) { .wrap section > *, .wrap section > * > *, .wrap section > * > * > * { min-width: 0; } .wrap pre { max-width: 100%; } }
  /* ── narrow (founder, 2026-09-18): the SAME signature as the wide page. Same variables, same arc, same halo,
     same rail and discs; nothing is re-measured here, which is what broke the first attempt. The whole
     sidebar can fold away (toggle in the dock) and the page glides into the freed width. ── */
  @media (max-width: 1099px) {
    .navtoggle { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--bone); cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .navtoggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .5s var(--ease); }
    body:not(.sb-open) .navtoggle svg { transform: scaleX(-1); }
    .c0x-sidebar-root, .frame-svg, .frame-clip { display: block; }
    /* on a phone the page scrolls UNDER the cutout (on the wide page the content starts past the arc, so nothing ever
       does). A soft disc of the page's own ground sits in the ring, below the halo: text and the card fade as they
       near the orb instead of being sliced by it. */
    .c0x-sidebar-root::after { content: ""; position: absolute; left: var(--c0x-sidebar-cutout-center-x); top: var(--c0x-sidebar-cutout-mask-center-y); width: 140px; height: 140px; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, var(--night) 0 52px, color-mix(in srgb, var(--night) 70%, transparent) 61px, transparent 69px); } /* ends inside the arc (radius 63.5 plus the stroke): the title starts 8px past it and must stay at full strength */
    .c0x-cloud-pill { border: 0; }
    /* the discs sit a little tighter than on the wide page so all eight clear the foot actions on a phone */
    .railnav { display: flex; top: calc(var(--hdr) + var(--c0x-sidebar-cutout-bottom) + 10px); gap: 5px; max-height: calc(100dvh - var(--hdr) - var(--c0x-sidebar-cutout-bottom) - 10px - 118px); overflow-y: auto; scrollbar-width: none; padding-block: 8px 6px; } /* the padding keeps the active disc's lift and ring from being clipped by the scroll box */
    .railnav::-webkit-scrollbar { display: none; }
    /* when the rail has to scroll (short screens) its last item fades instead of being cut mid-label */
    @media (max-height: 700px) { .railnav { -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); } }
    body { padding-block-end: 28px; }
    /* fold: the rail, its discs, the arc and the actions leave to the left together; the dock-only stroke takes over */
    .c0x-sidebar-root, .railnav, .railactions { transition: transform .55s var(--ease), opacity .4s var(--ease); }
    .frame-svg .fp { transition: transform .55s var(--ease), opacity .4s var(--ease); }
    body:not(.sb-open) .c0x-sidebar-root, body:not(.sb-open) .railnav, body:not(.sb-open) .railactions { transform: translateX(-96px); opacity: 0; pointer-events: none; }
    body:not(.sb-open) .frame-svg .fp-open { transform: translateX(-96px); opacity: 0; }
    body:not(.sb-open) .frame-svg .fp-closed { opacity: 1; }
    /* the page keeps clear of the rail while it is there, and takes the width back when it folds. The width
       changes ONCE; what glides is a transform on the content blocks, so the fold costs no layout per frame.
       (.net is position: fixed inside the hero, so the hero itself is never transformed.) */
    body.sb-glide-open .hero > *:not(.net), body.sb-glide-open .wrap > *:not(.hero) { animation: c0x-sb-glide-open .55s var(--ease) both; }
    body.sb-glide-close .hero > *:not(.net), body.sb-glide-close .wrap > *:not(.hero) { animation: c0x-sb-glide-close .55s var(--ease) both; }
    body.sb-open .wrap { margin-left: calc(var(--c0x-sidebar-cutout-paint-width) + 9px - 16px); }
  }
  @keyframes c0x-sb-glide-open { from { transform: translateX(-72px); } to { transform: translateX(0); } }
  @keyframes c0x-sb-glide-close { from { transform: translateX(72px); } to { transform: translateX(0); } }
  .frame-svg .fp-closed { opacity: 0; }
  /* X and Join live at the foot of the rail on phones (founder): the header slab is the mark alone */
  .railactions { display: none; }
  @media (max-width: 760px) {
    .railactions { display: grid; justify-items: center; gap: 8px; position: fixed; left: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: var(--c0x-sidebar-rail-width); z-index: 3; padding-bottom: 2px; }
    .railactions .xfollow { padding: 9px; }
    .railactions .xfollow span { display: none; }
    .railactions .railjoin { box-sizing: border-box; width: 56px; min-width: 0; padding: 8px 0; justify-content: center; gap: 0; font-size: .8rem; line-height: 1; }
    /* shorter phones: smaller plates so all eight sections still show without scrolling the rail */
    @media (max-height: 800px) { .railnav { gap: 3px; } .railnav .disc { width: 33px; height: 33px; } .railnav .disc svg { width: 22px; height: 22px; } .railnav a { gap: 3px; font-size: 8.5px; } }
  }
  @media (prefers-reduced-motion: reduce) { .c0x-sidebar-root, .railnav, .railactions, .frame-svg .fp, .navtoggle svg { transition: none; } body.sb-glide-open *, body.sb-glide-close * { animation: none !important; } }

  /* the doors (js/doors.js): what only an open network shows, the pill's live dot, and the preview switch */
  .open-only { display: none !important; }
  body[data-doors="open"] .open-only { display: inline-flex !important; }
  body[data-doors="open"] .doorbtn b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(76,209,138,.22); vertical-align: 1px; }
  .doors-switch { position: fixed; z-index: 70; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 10px;
    min-height: 46px; padding: 0 16px 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(12,18,30,.94); color: var(--bone); font: 600 .84rem var(--body); cursor: pointer;
    box-shadow: 0 10px 28px -10px rgba(0,0,0,.8); transition: transform .18s var(--ease), border-color .18s var(--ease); }
  .doors-switch span { color: var(--dust); font-weight: 500; }
  .doors-switch i { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--plate); transition: background .2s var(--ease); }
  .doors-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--bone); transition: transform .2s var(--ease); }
  .doors-switch[aria-checked="true"] i { background: var(--ok); }
  .doors-switch[aria-checked="true"] i::after { transform: translateX(14px); }
  .doors-switch b { min-width: 3.6em; text-align: left; }
  /* wide screens: bottom left beside the rail, where the hero leaves room; the card owns the bottom right */
  @media (min-width: 761px) { .doors-switch { right: auto; left: calc(var(--c0x-sidebar-rail-width) + 22px); } }
  .doors-switch:hover { border-color: var(--bone); }
  .doors-switch:active { transform: scale(.97); }
  .doors-switch:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { .doors-switch, .doors-switch i, .doors-switch i::after { transition: none; } }