/* ============================================================
   SOURCE LABS — 2-page terminal aesthetic
   Brand tokens retained from getsourceai.com build:
   bg 220 13% 5% · primary 217 91% 60% · accent 263 83% 68%
   ============================================================ */

:root {
  --bg: hsl(220 13% 5%);
  --panel: hsl(240 20% 7%);
  --border: hsl(235 16% 16%);
  --border-bright: hsl(235 16% 25%);
  --fg: hsl(210 40% 98%);
  --muted: hsl(215 20% 65%);
  --dim: hsl(215 15% 42%);
  --primary: hsl(217 91% 60%);
  --accent: hsl(263 83% 68%);
  --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%) 0%, hsl(270 80% 65%) 50%, hsl(217 91% 60%) 100%);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  /* original getsourceai.com cosmic gradient background */
  background:
    linear-gradient(135deg, hsl(220 13% 5%) 0%, hsl(240 20% 8%) 25%, hsl(260 30% 12%) 50%, hsl(280 25% 10%) 75%, hsl(220 13% 5%) 100%)
    fixed var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* CRT scanlines + vignette overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, hsl(220 13% 2% / .12) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, hsl(220 13% 2% / .55) 100%);
}

.grad-text {
  background: var(--gradient-primary);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-pan 6s linear infinite;
}
@keyframes grad-pan { to { background-position: 200% center; } }

.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ============ cosmic layer — stars + floating orbs (original site shapes) ============ */
#stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}
.orb-1 {
  width: 620px; height: 620px;
  left: -160px; top: -140px;
  background: radial-gradient(circle, hsl(217 91% 60% / .25) 0%, transparent 70%);
  animation: float1 26s ease-in-out infinite alternate;
}
.orb-2 {
  width: 520px; height: 520px;
  right: -120px; top: 30%;
  background: radial-gradient(circle, hsl(270 80% 65% / .15) 0%, transparent 70%);
  animation: float2 34s ease-in-out infinite alternate;
}
.orb-3 {
  width: 460px; height: 460px;
  left: 28%; bottom: -180px;
  background: radial-gradient(circle, hsl(300 70% 70% / .10) 0%, transparent 70%);
  animation: float3 42s ease-in-out infinite alternate;
}
/* directional drift — everything glides left→right / top→down */
@keyframes float1 { to { transform: translate(140px, 90px) scale(1.08); } }
@keyframes float2 { to { transform: translate(120px, 70px) scale(1.12); } }
@keyframes float3 { to { transform: translate(150px, 50px) scale(0.96); } }

/* ============ nav (both pages) ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  mix-blend-mode: screen;
}
.nav-logo img { height: 22px; width: auto; }
.nav-right {
  display: flex;
  gap: 26px;
  font-size: 11.5px;
  letter-spacing: .18em;
}
.nav-right a { color: var(--muted); transition: color .2s, text-shadow .2s; }
.nav-right a:hover, .nav-right a.active {
  color: var(--fg);
  text-shadow: 0 0 14px hsl(217 91% 60% / .9);
}

/* ============ LANDING — recursive.com structure ============ */
body.landing {
  /* clean black frame around the panel — no lines */
  background: #050508;
  overflow: hidden;
}
body.landing::after { content: none; } /* no vignette on the frame */

.hero-panel {
  position: relative;
  margin: 48px;
  height: calc(100svh - 96px);
  min-height: 540px;
  overflow: hidden;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff; /* sides carried by the fixed vertical lines */
  /* live-site palette: bright core bloom at left + long gradual blue→black sweep
     (still clearly blue at half-width, black only wins on the right third) */
  background:
    radial-gradient(820px 820px at 6% 50%,
      hsl(233 86% 48% / .8) 0%,
      hsl(232 79% 40% / .45) 30%,
      transparent 55%),
    linear-gradient(100deg,
      hsl(229 72% 22%) 0%,
      hsl(227 62% 13%) 35%,
      hsl(225 48% 8%) 55%,
      hsl(224 28% 3%) 75%,
      #020203 100%);
}
/* film grain — the granular texture from the live site */
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
  opacity: .7;
  mix-blend-mode: overlay;
}
/* second grain pass — visible speckle in the dark regions too */
.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 190px 190px;
  opacity: .17;
}
#hero-subdiv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* four vertical lines — none touch the top; all run to the bottom of the screen */
.vline {
  position: fixed;
  top: 48px; /* start at the panel's top edge */
  bottom: 0;
  width: 2px;
  background: #fff;
  z-index: 2;
  pointer-events: none;
}
.vl-ol { left: 48px; }                                /* panel left edge */
.vl-l { left: calc(48px + (100vw - 96px) * 0.095); }  /* left column */
.vl-r { right: calc(48px + (100vw - 96px) * 0.095); } /* right column */
.vl-or { right: 48px; }                               /* panel right edge */

.hp-logo {
  position: absolute;
  top: 56px;
  left: calc(9.5% + 46px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  pointer-events: none;
}
.hp-logo svg {
  width: 79px;
  height: 79px;
  filter: drop-shadow(0 0 18px hsl(233 86% 53% / .55));
}
.hp-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 79px;
  letter-spacing: -.03em;
  line-height: 1;
}

/* white block buttons docked on the right column line, bottom right (GI-style) */
.hp-links {
  position: absolute;
  right: calc(9.5% + 26px);
  bottom: 48px;
  z-index: 3;
  display: flex;
  gap: 12px;
}
.hp-links a {
  background: #fff;
  color: #14151d;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 500;
  padding: 13px 24px;
  transition: background .2s, transform .2s;
}
.hp-links a:hover {
  background: #e4e4ea;
  transform: translateY(-1px);
}

/* footer line on the black frame, bottom centre */
.lfoot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  font-size: 10.5px;
  letter-spacing: .14em;
  color: hsl(0 0% 100% / .65);
}

/* white content box docked on the left column line, floating above the bottom */
.hp-card {
  position: absolute;
  left: 9.5%;
  bottom: 48px;
  z-index: 3;
  background: #fff;
  padding: 46px 54px 44px 50px;
  max-width: 600px;
}
.hp-card h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: #14151d;
}
.hp-sub {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 15.5px;
  color: #4a4b57;
}
.hp-cta {
  display: inline-block;
  margin-top: 24px;
  font-size: 11px;
  letter-spacing: .22em;
  color: #14151d;
  border-bottom: 1px solid hsl(233 86% 48%);
  padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}
.hp-cta:hover {
  color: hsl(233 86% 45%);
  border-color: hsl(233 86% 53%);
}

@media (max-width: 760px) {
  .hero-panel { margin: 10px; height: calc(100svh - 20px); }
  .vline { display: none; }
  .hp-logo { top: 26px; left: 22px; gap: 10px; }
  .hp-logo svg { width: 54px; height: 54px; }
  .hp-word { font-size: 54px; }
  .hp-links { top: 22px; right: 10px; bottom: auto; gap: 8px; }
  .hp-links a { font-size: 13px; padding: 9px 14px; }
  .hp-card { left: 10px; right: 10px; bottom: 24px; padding: 26px 24px; max-width: none; }
}

/* ============ viewport line box (GI-style frame) ============ */
.viewframe {
  position: fixed;
  inset: 13px;
  border: 1px solid hsl(220 30% 90% / .13);
  z-index: 80;
  pointer-events: none;
}
.viewframe i {
  position: absolute;
  width: 13px;
  height: 13px;
}
.viewframe i::before, .viewframe i::after {
  content: "";
  position: absolute;
  background: hsl(220 30% 92% / .55);
}
.viewframe i::before { left: 0; right: 0; top: 6px; height: 1px; }
.viewframe i::after { top: 0; bottom: 0; left: 6px; width: 1px; }
.viewframe .c-tl { top: -7px; left: -7px; }
.viewframe .c-tr { top: -7px; right: -7px; }
.viewframe .c-bl { bottom: -7px; left: -7px; }
.viewframe .c-br { bottom: -7px; right: -7px; }

/* ============ PAGE 1 — block ascii rain ============ */
#rain {
  position: fixed;
  inset: 0;
  z-index: 1;
}

/* big brand logo */
.biglogo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 40px);
  margin-bottom: clamp(28px, 4vh, 48px);
}
.biglogo svg {
  width: clamp(68px, 9vw, 128px);
  height: clamp(68px, 9vw, 128px);
  color: var(--fg);
  filter: drop-shadow(0 0 34px hsl(217 91% 60% / .65));
  animation: astspin 40s linear infinite;
}
@keyframes astspin { to { transform: rotate(360deg); } }
.biglogo .bigword {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(84px, 13vw, 190px);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--fg);
  text-shadow: 0 0 60px hsl(217 91% 60% / .5), 0 0 140px hsl(263 83% 68% / .35);
}
.tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 32px);
  letter-spacing: -.01em;
  color: var(--muted);
}
.tagline .grad-text { font-weight: 600; }

.stage {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 6vw;
  pointer-events: none; /* let the field feel the mouse; re-enable on interactives */
}
.stage a, .stage button { pointer-events: auto; }

.kicker {
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--muted);
  margin-bottom: 30px;
}
.kicker .dot {
  color: var(--primary);
  text-shadow: 0 0 12px var(--primary);
}

.typed-line {
  margin-top: 34px;
  font-size: clamp(12px, 1.3vw, 15px);
  color: var(--muted);
  letter-spacing: .06em;
  min-height: 1.6em;
}
.typed-line .caret {
  display: inline-block;
  width: .6em; height: 1.1em;
  background: var(--primary);
  vertical-align: -0.15em;
  box-shadow: 0 0 10px var(--primary);
  animation: blink 1s steps(1) infinite;
}

.stage-actions {
  margin-top: 52px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.tbtn {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .22em;
  padding: 15px 26px;
  border: 1px solid var(--border-bright);
  color: var(--fg);
  background: hsl(220 13% 5% / .55);
  transition: all .22s ease;
  position: relative;
}
.tbtn:hover {
  border-color: var(--primary);
  box-shadow: 0 0 30px hsl(217 91% 60% / .35), inset 0 0 20px hsl(217 91% 60% / .08);
  transform: translateY(-2px);
}
.tbtn-solid {
  /* original brand gradient button */
  background: linear-gradient(135deg, hsl(217 91% 60%), hsl(263 83% 65%));
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 0 26px hsl(217 91% 60% / .4);
}
.tbtn-solid:hover {
  box-shadow: 0 0 48px hsl(217 91% 60% / .7);
  border-color: transparent;
}

/* HUD corners */
.hud {
  position: fixed;
  z-index: 40;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--dim);
  line-height: 2;
  pointer-events: none;
}
.hud b { color: var(--muted); font-weight: 400; }
.hud .on { color: hsl(140 70% 55%); text-shadow: 0 0 8px hsl(140 70% 45% / .8); }
.hud-bl { left: 28px; bottom: 24px; }

/* settings panel (GI homage) */
.panel {
  position: fixed;
  right: 28px;
  bottom: 24px;
  z-index: 50;
  width: 218px;
  border: 1px solid var(--border);
  background: hsl(220 13% 5% / .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--muted);
}
.panel-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.panel-head:hover { color: var(--fg); }
.panel-body { padding: 12px 12px 14px; display: grid; gap: 12px; }
.panel.closed .panel-body { display: none; }
.panel.closed .panel-head { border-bottom: none; }
.ctl { display: grid; gap: 5px; }
.ctl-row { display: flex; justify-content: space-between; }
.ctl-row output { color: var(--fg); }
.ctl input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
  height: 3px;
  cursor: pointer;
}

/* ============ PAGE 2 — the system ============ */
.page-system {
  position: relative;
  z-index: 1;
  padding: 120px 0 0;
}
.wrap { width: min(1180px, 93vw); margin: 0 auto; }

.sys-head { margin-bottom: 70px; }
.sys-head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 62px);
  letter-spacing: -.02em;
  line-height: 1.05;
}
.sys-head p {
  margin-top: 14px;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: .22em;
}

.frame {
  border: 1px solid var(--border);
  background: hsl(220 13% 6% / .8);
  margin-bottom: 90px;
  position: relative;
}
.frame-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--muted);
}
.frame-head .status { color: var(--dim); }
.frame-head .status .on { color: hsl(140 70% 55%); }
.frame-body { position: relative; }

#mesh {
  display: block;
  width: 100%;
  height: min(72vh, 680px);
  cursor: crosshair;
}
.tooltip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  border: 1px solid var(--border-bright);
  background: hsl(220 13% 4% / .92);
  padding: 10px 14px;
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--muted);
  opacity: 0;
  transition: opacity .15s;
  white-space: nowrap;
}
.tooltip b { color: var(--fg); font-weight: 500; display: block; letter-spacing: .2em; }
.tooltip .tp { color: var(--primary); }
.tooltip.show { opacity: 1; }

.frame-foot {
  border-top: 1px solid var(--border);
  padding: 10px 18px;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--dim);
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.frame-foot .k { color: var(--primary); }

/* ---- recursive issue tree (subdivision) ---- */
#subdiv {
  display: block;
  width: 100%;
  height: min(72vh, 680px);
  cursor: crosshair;
}

/* ---- stats + cta ---- */
.statline {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 6vw, 90px);
  flex-wrap: wrap;
  padding: 30px 0 90px;
  text-align: center;
}
.statline .s b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 700;
  line-height: 1;
}
.statline .s span {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--dim);
}

.cta-sys {
  text-align: center;
  padding: 40px 0 130px;
}
.cta-sys .ast {
  font-size: 42px;
  color: var(--fg);
  text-shadow: 0 0 30px hsl(217 91% 60% / .8);
  display: inline-block;
  animation: spin 22s linear infinite;
  margin-bottom: 26px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cta-sys h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -.015em;
  margin-bottom: 34px;
}
.cta-sys .mail {
  display: block;
  margin-top: 24px;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--dim);
}

/* footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 26px 28px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--dim);
  position: relative;
  z-index: 1;
  background: hsl(220 13% 4% / .8);
}
.footer a:hover { color: var(--fg); }
.footer .links { display: flex; gap: 22px; }

/* reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* responsive */
@media (max-width: 860px) {
  .panel { display: none; }
  .hud-bl { display: none; }
  #mesh { height: 60vh; }
  #subdiv { height: 58vh; }
  .biglogo { flex-direction: column; gap: 14px; }
}

/* ============ v6 — slide-up login ============ */
.slider {
  transition: transform .85s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
body.show-login .slider { transform: translateY(-50%); } /* half of the 2-page slider = one viewport */

.page {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
/* inside the slider the fixed chrome becomes page-scoped */
.slider .vline, .slider .lfoot { position: absolute; }

.login-back {
  position: absolute;
  top: 64px;
  right: calc(9.5% + 46px);
  z-index: 3;
  font-size: 11.5px;
  letter-spacing: .2em;
  color: hsl(215 20% 75%);
  transition: color .2s, text-shadow .2s;
}
.login-back:hover { color: #fff; text-shadow: 0 0 14px hsl(233 86% 53% / .9); }

.login-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: #fff;
  width: min(420px, 88%);
  padding: 46px 52px 42px;
}
.login-card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  color: #14151d;
  margin-bottom: 28px;
}
.login-card label {
  display: block;
  font-size: 10px;
  letter-spacing: .22em;
  color: #4a4b57;
  margin-bottom: 7px;
}
.login-card input {
  width: 100%;
  border: 1px solid #c9c9d2;
  background: #fff;
  padding: 12px 14px;
  font-family: var(--font-display);
  font-size: 15px;
  color: #14151d;
  margin-bottom: 20px;
  outline: none;
  transition: border-color .2s;
}
.login-card input:focus { border-color: hsl(233 86% 48%); }
.login-submit {
  width: 100%;
  background: #050508;
  color: #fff;
  border: none;
  padding: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background .2s;
}
.login-submit:hover { background: hsl(233 86% 40%); }
.login-msg {
  margin-top: 18px;
  font-size: 10.5px;
  letter-spacing: .06em;
  line-height: 1.7;
  color: #4a4b57;
}
.login-msg a { color: hsl(233 86% 42%); text-decoration: underline; }
.login-msg.ok { color: hsl(150 55% 30%); }
.login-msg.err { color: hsl(352 70% 45%); }
.login-alt { margin-top: 20px; font-size: 11px; letter-spacing: .06em; color: #4a4b57; }
.login-alt a { color: hsl(233 86% 42%); text-decoration: underline; }

@media (max-width: 760px) {
  .login-back { top: 26px; right: 22px; }
  .login-card { padding: 30px 26px; }
}

/* ============ v6 — workbench (app.html) ============ */
body.app::after { content: none; } /* no dark-theme scanlines/vignette on the light workbench */
body.app {
  /* v7 workbench — warm paper over a faint grid (Source design system) */
  background-color: #FBF6F1;
  background-image:
    linear-gradient(#EDE6DC 1px, transparent 1px),
    linear-gradient(90deg, #EDE6DC 1px, transparent 1px);
  background-size: 56px 56px; /* same cell size as the landing lattice */
  color: #14151d;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "tnum"; /* tabular numerals — columns of figures align */
  overflow: auto;
}

/* sidebar */
.sb {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 104px; /* wider to fit the larger labels */
  background: #F5EFE9;
  border-right: 1px solid #EAE3DA;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(10px, 1.8vh, 20px) 0 clamp(10px, 1.8vh, 22px);
  z-index: 10;
  overflow: hidden;              /* the nav (below) handles its own overflow */
}
.sb-top { display: grid; justify-items: center; gap: 8px; flex: 0 0 auto; }
.sb-mark {
  width: clamp(34px, 4.6vh, 46px); height: clamp(34px, 4.6vh, 46px);
  border-radius: 50%;
  border: 2.5px solid #14151d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14151d;
  background: #fff;
  box-shadow: 0 0 0 5px hsl(217 90% 56% / .18);
  transition: box-shadow .2s;
}
.sb-mark:hover { box-shadow: 0 0 0 7px hsl(217 90% 56% / .3); }
.sb-mark svg { width: clamp(17px, 2.4vh, 24px); height: clamp(17px, 2.4vh, 24px); }
.sb-word { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 700; font-size: clamp(14px, 2vh, 20px); letter-spacing: -.03em; }

.sb-nav {
  margin-top: clamp(6px, 1.4vh, 40px);
  display: grid; gap: clamp(4px, 1.05vh, 28px); justify-items: center;
  align-content: start;
  flex: 1 1 auto; min-height: 0; width: 100%;   /* take the middle space; scroll only if it truly can't fit */
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.sb-nav::-webkit-scrollbar { width: 0; height: 0; }
.sb-nav a {
  display: grid;
  justify-items: center;
  gap: clamp(2px, 0.45vh, 6px);
  color: #4a4e5c;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: .01em;
  transition: color .2s, background .2s;
}
.sb-nav a svg { width: clamp(15px, 2.0vh, 22px); height: clamp(15px, 2.0vh, 22px); }
/* long labels (e.g. "Intelligence Team") wrap to two centered lines; short ones stay single */
.sb-nav a span { white-space: normal; text-align: center; line-height: 1.1; font-size: clamp(9px, 1.25vh, 12px); letter-spacing: -.005em; }
.sb-nav a:focus { outline: none; }
.sb-nav a:focus-visible { outline: 2px solid hsl(218 88% 48% / .35); outline-offset: 2px; }
.sb-nav a:hover { color: hsl(218 88% 45%); }

.sb-bottom { margin-top: clamp(8px, 1.5vh, 14px); display: grid; justify-items: center; gap: 7px; flex: 0 0 auto; }
.sb-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: hsl(218 88% 48%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}
.sb-user { font-size: 13px; font-weight: 550; color: #4a4e5c; }
.sb-signout {
  font-size: 12px;
  color: #8a8b96;
  transition: color .2s;
}
.sb-signout:hover { color: hsl(218 88% 45%); }

/* workbench centre */
.wb {
  margin-left: 104px;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.wb-center { text-align: center; }
.wb-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.wb-badge {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 3px solid #14151d;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14151d;
  box-shadow: 0 0 0 10px hsl(217 90% 56% / .22);
}
.wb-badge svg { width: 46px; height: 46px; }
.wb-word {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 6vw, 68px);
  letter-spacing: -.045em;
  color: #14151d;
}
.wb-sub {
  margin-top: 26px;
  font-size: 19px;
  color: #4a4e5c;
}
.wb-actions {
  margin-top: 46px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.wb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0b0b10;
  color: #fff;
  padding: 15px 26px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15.5px;
  transition: background .2s, transform .2s;
}
.wb-btn svg { width: 17px; height: 17px; }
.wb-btn .arr { margin-left: 2px; transition: transform .2s; }
.wb-btn:hover { background: #2b2b34; transform: translateY(-1px); }
.wb-btn:hover .arr { transform: translateX(4px); }

@media (max-width: 760px) {
  .sb { width: 64px; }
  .wb { margin-left: 64px; }
  .wb-lockup { gap: 14px; }
  .wb-badge { width: 62px; height: 62px; }
  .wb-badge svg { width: 32px; height: 32px; }
  .wb-actions { flex-direction: column; align-items: center; }
}

/* v6 — ambient engine + texture on the workbench */
#wb-subdiv {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: .55;
  pointer-events: none;
}
body.app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: .1;
  mix-blend-mode: multiply;
}
body.app {
  /* flat warm ivory surface (no blue radial wash — blue is identity-only) over a warm-neutral fine grid */
  background-color: #FBF6F1;
  background-image:
    linear-gradient(#F5F1EB 1px, transparent 1px),
    linear-gradient(90deg, #F5F1EB 1px, transparent 1px);
  background-size: 27px 27px, 27px 27px; /* same fine grid as the module heroes, warm engineering paper */
}
.sb { z-index: 10; }
.wb { position: relative; z-index: 1; }

/* v6 — embedded module panel: ribbon stays constant, modules open beside it */
.modframe {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  left: 104px;
  width: calc(100vw - 104px);
  height: 100vh;
  border: 0;
  background: #f6f6f8;
  z-index: 5;
  display: none;
}
.modframe.on { display: block; }
body.mod-open .wb { visibility: hidden; }
.sb-nav a { width: 88px; padding: clamp(2px, 0.5vh, 9px) 4px clamp(2px, 0.4vh, 7px); border-radius: 8px; }

/* very short screens: reclaim the wordmark's height too (icons/labels already scale via clamp) */
@media (max-height: 640px) { .sb-word { display: none; } }
.sb-nav a.active { background: #eceef4; color: #14151d; font-weight: 600; }
@media (max-width: 760px) {
  .modframe { left: 64px; width: calc(100vw - 64px); }
}

/* v6 — Projects navigation lives in the module's own left sidebar (like Search/Analysis).
   The old rail hover-flyout was removed to avoid a duplicate project list. */