/* =========================================================
   Hunteenim Portfolio — Core styles
   Premium · themable · technical.

   COLOR SYSTEM — strict 60 / 30 / 10
   -------------------------------------
   60% BASE     — surface family (backgrounds, surfaces)
   30% SUPPORT  — neutral family (text, borders, structure)
   10% ACCENT   — single cyan (CTAs, active state, status, links)

   Each theme keeps the 60 / 30 / 10 discipline. Only these tokens
   change between modes — every component reads from the tokens, so
   component CSS never hard-codes a color.

   Tokens live in three blocks:
     :root                  → shape / motion / non-themed values
     [data-theme="dark"]    → dark palette   (default)
     [data-theme="light"]   → light palette
   ========================================================= */

:root {
  /* ---- shape / motion (non-themed) ---- */
  --radius:      12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --container:   1200px;
  --easing:      cubic-bezier(0.22, 1, 0.36, 1);

  /* Dark is the default fallback so the site still looks right
     if the boot script never runs (e.g. JS disabled). */
  color-scheme: dark;

  /* ---- 60% BASE ---- */
  --base-0:      #07090d;
  --base-1:      #0b0f15;
  --base-2:      #111722;
  --base-3:      #19212e;

  /* ---- 30% SUPPORT ---- */
  --support-0:   #e7ecf3;
  --support-1:   #a7b2c2;
  --support-2:   #6d798c;
  --support-3:   #404b5d;
  --line:        rgba(255,255,255,0.07);
  --line-2:      rgba(255,255,255,0.13);

  /* ---- 10% ACCENT ---- */
  --accent:      #38bdf8;
  --accent-deep: #0ea5e9;
  --accent-soft: rgba(56, 189, 248, 0.12);
  --accent-wash: rgba(56, 189, 248, 0.07);
  --accent-ring: rgba(56, 189, 248, 0.24);
  --accent-glow: rgba(56, 189, 248, 0.35);
  --accent-ink:  #041320;   /* text on top of accent surfaces */

  /* ---- feedback ---- */
  --ok:          #4ade80;
  --warn:        #fbbf24;
  --danger:      #f87171;

  /* ---- elevation ---- */
  --shadow-1:    0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 30px rgba(0,0,0,0.35);
  --shadow-2:    0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 80px -20px rgba(0,0,0,0.65);

  /* ---- soft surface tints (theme-aware) ---- */
  --tint-soft:   rgba(255,255,255,0.02);
  --tint:        rgba(255,255,255,0.03);
  --tint-strong: rgba(255,255,255,0.06);
  --tint-code:   rgba(255,255,255,0.04);

  /* ---- ambient glow values used by body, buttons ---- */
  --glow-1:      rgba(56, 189, 248, 0.08);
  --glow-2:      rgba(56, 189, 248, 0.05);

  /* ---- patterns used by .bg-grid ---- */
  --grid-line:   rgba(255,255,255,0.03);
  --grid-mask:   radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 80%);

  /* ---- nav blur surface ---- */
  --nav-bg:        rgba(7, 9, 13, 0.65);
  --nav-bg-solid:  rgba(7, 9, 13, 0.88);
}

/* -------- DARK THEME (explicit) ---------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --base-0:      #07090d;
  --base-1:      #0b0f15;
  --base-2:      #111722;
  --base-3:      #19212e;

  --support-0:   #e7ecf3;
  --support-1:   #a7b2c2;
  --support-2:   #6d798c;
  --support-3:   #404b5d;
  --line:        rgba(255,255,255,0.07);
  --line-2:      rgba(255,255,255,0.13);

  --accent:      #38bdf8;
  --accent-deep: #0ea5e9;
  --accent-soft: rgba(56, 189, 248, 0.12);
  --accent-wash: rgba(56, 189, 248, 0.07);
  --accent-ring: rgba(56, 189, 248, 0.24);
  --accent-glow: rgba(56, 189, 248, 0.35);
  --accent-ink:  #041320;

  --shadow-1:    0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 30px rgba(0,0,0,0.35);
  --shadow-2:    0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 80px -20px rgba(0,0,0,0.65);

  --tint-soft:   rgba(255,255,255,0.02);
  --tint:        rgba(255,255,255,0.03);
  --tint-strong: rgba(255,255,255,0.06);
  --tint-code:   rgba(255,255,255,0.04);

  --glow-1:      rgba(56, 189, 248, 0.08);
  --glow-2:      rgba(56, 189, 248, 0.05);
  --grid-line:   rgba(255,255,255,0.03);
  --nav-bg:        rgba(7, 9, 13, 0.65);
  --nav-bg-solid:  rgba(7, 9, 13, 0.88);
}

/* -------- LIGHT THEME -------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  /* 60% BASE — soft off-whites, no pure white */
  --base-0:      #f6f8fb;
  --base-1:      #eef2f7;
  --base-2:      #e3e9f1;
  --base-3:      #d6deea;

  /* 30% SUPPORT — deep ink ramp for readable text on light */
  --support-0:   #0c121c;
  --support-1:   #35405a;
  --support-2:   #5a6480;
  --support-3:   #8a95ad;
  --line:        rgba(12,18,28,0.08);
  --line-2:      rgba(12,18,28,0.16);

  /* 10% ACCENT — slightly deeper cyan so it reads on a light surface */
  --accent:      #0284c7;
  --accent-deep: #0369a1;
  --accent-soft: rgba(2, 132, 199, 0.12);
  --accent-wash: rgba(2, 132, 199, 0.07);
  --accent-ring: rgba(2, 132, 199, 0.28);
  --accent-glow: rgba(2, 132, 199, 0.28);
  --accent-ink:  #ffffff;  /* text on top of accent */

  --shadow-1:    0 1px 0 rgba(255,255,255,0.8) inset, 0 8px 26px rgba(24,36,60,0.08);
  --shadow-2:    0 1px 0 rgba(255,255,255,0.9) inset, 0 24px 60px -20px rgba(24,36,60,0.22);

  --tint-soft:   rgba(12,18,28,0.02);
  --tint:        rgba(12,18,28,0.04);
  --tint-strong: rgba(12,18,28,0.07);
  --tint-code:   rgba(12,18,28,0.05);

  --glow-1:      rgba(2, 132, 199, 0.07);
  --glow-2:      rgba(2, 132, 199, 0.04);
  --grid-line:   rgba(12,18,28,0.05);

  --nav-bg:        rgba(246, 248, 251, 0.72);
  --nav-bg-solid:  rgba(246, 248, 251, 0.92);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--base-0);
  color: var(--support-0);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  letter-spacing: -0.005em;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color .2s var(--easing);
}
a:hover { color: var(--accent-deep); }

code, kbd, samp {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--tint-code);
  padding: 0.1em 0.4em;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--accent);
}

.container {
  width: 100%;
  max-width: var(--container);
  padding: 0 28px;
  margin: 0 auto;
}

/* =========================================================
   Background ambience (kept subtle — accent used sparingly)
   ========================================================= */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 80%);
  pointer-events: none;
}
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(700px 460px at 15% 8%, var(--glow-1), transparent 60%),
    radial-gradient(900px 520px at 85% 100%, var(--glow-2), transparent 70%);
}

/* =========================================================
   Navigation
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: var(--nav-bg);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--easing), background .25s var(--easing);
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  background: var(--nav-bg-solid);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--support-0);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.nav__brand:hover { color: var(--support-0); }

.nav__logo {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-ring), var(--accent-wash));
  border: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav__logo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.nav__brand-text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav__links a {
  color: var(--support-1);
  font-size: 14px;
  font-weight: 500;
  position: relative;
}
.nav__links a:hover { color: var(--support-0); }
.nav__ext { font-size: 11px; opacity: 0.6; margin-left: 2px; }

.nav__cta { display: flex; align-items: center; gap: 10px; }

.nav__burger {
  display: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--base-2);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 16px; height: 2px;
  background: var(--support-0);
  border-radius: 2px;
  transition: transform .25s var(--easing), opacity .2s var(--easing);
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s var(--easing);
  white-space: nowrap;
  font-family: inherit;
}
.btn--sm { padding: 8px 12px; font-size: 13px; }
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover {
  background: var(--accent-deep);
  color: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -10px var(--accent-glow);
}
.btn--ghost {
  background: var(--tint);
  border-color: var(--line-2);
  color: var(--support-0);
}
.btn--ghost:hover {
  background: var(--tint-strong);
  border-color: var(--support-3);
  color: var(--support-0);
}
.btn--link {
  background: transparent;
  color: var(--support-1);
  padding: 12px 4px;
}
.btn--link:hover { color: var(--support-0); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  padding: 96px 0 72px;
  position: relative;
}
.hero__inner { max-width: 960px; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--tint);
  color: var(--support-1);
  font-size: 12.5px;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 28px;
}
.pulse {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}

.hero__title {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
}
.grad {
  color: var(--accent);
}

.hero__lead {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--support-1);
  max-width: 720px;
  margin: 0 0 36px;
}
.hero__lead strong { color: var(--support-0); font-weight: 600; }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 56px;
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
.hero__meta div { min-width: 0; }
.hero__meta dt {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--support-2);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 6px;
}
.hero__meta dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--support-0);
}

/* =========================================================
   Section primitives
   ========================================================= */
.section { padding: 88px 0; position: relative; }
.section__head { margin-bottom: 40px; max-width: 760px; }
.section__head--row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  max-width: none;
}
.section__head h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}
.section__sub {
  color: var(--support-1);
  max-width: 440px;
  font-size: 15px;
  margin: 0;
}
.eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 14px;
}

/* =========================================================
   Infrastructure section (above-the-fold architecture viz)
   ========================================================= */
.infra {
  padding: 32px 0 88px;
}
.infra__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.infra__head h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}
.infra__sub {
  color: var(--support-1);
  font-size: 15px;
  max-width: 520px;
  margin: 0;
}
.infra__legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--support-2);
}
.infra__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.infra__legend i {
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--support-3);
  border: 1px solid var(--line-2);
  display: inline-block;
}
.infra__legend i.is-accent { background: var(--accent); border-color: var(--accent); }
.infra__legend i.is-warn   { background: var(--warn);   border-color: var(--warn); }

.infra__panel {
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.infra__viz {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  min-height: 420px;
  display: block;
  background:
    radial-gradient(600px 300px at 20% 20%, var(--glow-1), transparent 60%),
    radial-gradient(500px 280px at 80% 80%, var(--glow-2), transparent 60%),
    var(--base-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

/* Viz element styles — driven by current mode via JS */
.viz-zone rect {
  fill: var(--tint-soft);
  stroke: var(--line-2);
  stroke-width: 1;
  rx: 10;
  transition: stroke .3s var(--easing), fill .3s var(--easing), opacity .3s var(--easing);
}
.viz-zone text.zone-label {
  fill: var(--support-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.viz-node rect, .viz-node circle {
  fill: var(--base-3);
  stroke: var(--support-3);
  stroke-width: 1;
  transition: all .3s var(--easing);
}
.viz-node text {
  fill: var(--support-0);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
}
.viz-node text.node-sub {
  fill: var(--support-2);
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
}
.viz-edge {
  fill: none;
  stroke: var(--support-3);
  stroke-width: 1.5;
  transition: all .3s var(--easing);
}
.viz-edge.is-dashed { stroke-dasharray: 4 4; }

/* mode: highlight accents */
.viz-highlight rect, .viz-highlight circle {
  stroke: var(--accent) !important;
  fill: var(--accent-wash) !important;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}
.viz-highlight text { fill: var(--support-0) !important; }
.viz-edge.is-active {
  stroke: var(--accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 4px var(--accent-glow));
}
.viz-edge.is-warn.is-active {
  stroke: var(--warn);
  filter: drop-shadow(0 0 4px rgba(251,191,36,0.35));
}
/* dim everything not active when in a focused mode */
.infra__viz.is-focused .viz-zone:not(.is-active) rect,
.infra__viz.is-focused .viz-node:not(.is-active) rect,
.infra__viz.is-focused .viz-node:not(.is-active) circle,
.infra__viz.is-focused .viz-node:not(.is-active) text,
.infra__viz.is-focused .viz-edge:not(.is-active) {
  opacity: 0.22;
}

/* moving packet dot along an edge */
.viz-packet {
  r: 3.5;
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
  opacity: 0;
}
.infra__viz.is-focused .viz-packet.is-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .viz-packet.is-active { animation: packet-move 2.4s linear infinite; }
}

/* =========================================================
   CLI / GUI split section
   ========================================================= */
.split {
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-1);
}
.split__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 0 8px;
}
.split__head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  letter-spacing: -0.02em;
  font-weight: 700;
}
.split__head p {
  margin: 0;
  font-size: 14px;
  color: var(--support-1);
  max-width: 460px;
}
.split__mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--support-2);
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--tint-soft);
}
.split__mode b {
  color: var(--accent);
  font-weight: 600;
}

.split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* CLI side
   Layout contract: cli is a flex-column that fills its grid cell.
     - .cli__bar   fixed at top
     - .cli__out   grows/shrinks to fill remaining height (flex:1)
     - .cli__prompt + .cli__hint   fixed at the bottom
   This keeps the prompt anchored to the very bottom of the panel
   regardless of how tall the panel grows (to match the GUI side or
   full-width on mobile). Output scrolls inside cli__out. */
.cli {
  background: var(--base-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  height: 100%;
}
.cli__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--base-1);
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--support-2);
  flex-shrink: 0;
}
.cli__dots { display: flex; gap: 6px; margin-right: 4px; }
.cli__dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line-2);
}
.cli__title { letter-spacing: 0.08em; }
.cli__out {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.55;
  color: var(--support-1);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.cli__out::-webkit-scrollbar { width: 6px; }
.cli__out::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.cli__line { white-space: pre-wrap; word-break: break-word; }
.cli__line.is-cmd { color: var(--support-0); }
.cli__line.is-ok  { color: var(--accent); }
.cli__line.is-err { color: var(--danger); }
.cli__line.is-dim { color: var(--support-2); }
.cli__line b { color: var(--accent); font-weight: 600; }
.cli__prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--base-1);
  flex-shrink: 0;
}
.cli__prompt::before {
  content: 'hunteenim@net:~$';
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.cli__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--support-0);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 2px 0;
  caret-color: var(--accent);
}
.cli__hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--support-2);
  padding: 8px 14px 12px;
  background: var(--base-1);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.cli__hint code { border: 0; background: transparent; color: var(--support-1); padding: 0 4px 0 0; }

/* GUI side */
.gui {
  background: linear-gradient(180deg, var(--base-2), var(--base-1));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 480px;
  height: 100%;
}
.gui__title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--support-2);
  text-transform: uppercase;
  margin: 0 0 4px;
}
.gui__btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--tint-soft);
  color: var(--support-0);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .2s var(--easing);
}
.gui__btn:hover {
  border-color: var(--line-2);
  background: var(--tint-strong);
  transform: translateY(-1px);
}
.gui__btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 6px 20px -10px var(--accent-glow);
}
.gui__btn-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--base-3);
  border: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.gui__btn-body { flex: 1; min-width: 0; }
.gui__btn-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.gui__btn-desc {
  display: block;
  font-size: 12.5px;
  color: var(--support-1);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}
.gui__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--support-2);
}
.gui__reset {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--support-1);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  transition: all .2s var(--easing);
}
.gui__reset:hover { color: var(--support-0); border-color: var(--support-3); }

/* =========================================================
   About
   ========================================================= */
.about__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}
.about__text p {
  font-size: 16.5px;
  color: var(--support-1);
  margin: 0 0 18px;
}
.about__text strong { color: var(--support-0); font-weight: 600; }
.about__text em     { color: var(--accent); font-style: normal; font-weight: 500; }

.about__card {
  background: linear-gradient(180deg, var(--base-2), var(--base-3));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-1);
}
.about__card h3 {
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--support-2);
  margin: 0 0 14px;
  font-weight: 500;
}
.about__card h3:not(:first-child) { margin-top: 24px; }

.tag-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-list li {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tint);
  border: 1px solid var(--line);
  color: var(--support-0);
}

.about__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about__list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  color: var(--support-1);
}
.about__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* =========================================================
   Filters
   ========================================================= */
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.filter {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--support-1);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s var(--easing);
  font-family: inherit;
}
.filter:hover { color: var(--support-0); border-color: var(--line-2); }
.filter.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* =========================================================
   Projects
   ========================================================= */
.projects { display: grid; gap: 22px; }

.project {
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--easing), border-color .25s var(--easing), box-shadow .3s var(--easing);
  position: relative;
  overflow: hidden;
}
.project::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 0% 0%, var(--accent-wash), transparent 60%);
  opacity: 0;
  transition: opacity .3s var(--easing);
  pointer-events: none;
}
.project:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
}
.project:hover::before { opacity: 1; }
.project.is-hidden { display: none; }

.project__head {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.project__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--support-2);
  padding-top: 4px;
}
.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-ring);
  color: var(--accent);
}
.project__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.project__sub {
  color: var(--support-1);
  margin: 0;
  font-size: 14.5px;
}

.project__body {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 32px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.project__case h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--support-2);
  margin: 18px 0 8px;
  font-weight: 500;
}
.project__case h4:first-child { margin-top: 0; }
.project__case p {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--support-1);
}
.project__case ul {
  margin: 0;
  padding-left: 18px;
  color: var(--support-1);
  font-size: 14.5px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.project__case ul li::marker { color: var(--accent); }
.project__case strong { color: var(--support-0); font-weight: 600; }

.project__aside {
  background: var(--tint-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: fit-content;
}
.kv {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  font-size: 13px;
  align-items: center;
}
.kv > span:first-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--support-2);
}
.kv > span:last-child { color: var(--support-0); }
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 500;
}
.status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.status--live     { color: var(--accent); }
.status--planned  { color: var(--warn); }
.status--planned::before { background: var(--warn); box-shadow: 0 0 8px rgba(251,191,36,0.45); }
.status--demo     { color: var(--support-2); }
.status--demo::before    { background: var(--support-2); box-shadow: none; }

.project__links {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
}

.projects__more {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

/* Compact project variant (CLI/GUI can switch to this via .projects--compact) */
.projects--compact .project { padding: 22px 26px; }
.projects--compact .project__body { display: none; }
.projects--compact .project__head { margin-bottom: 0; }

/* =========================================================
   Credentials / training
   ========================================================= */
.creds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.creds__col {
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .25s var(--easing), transform .25s var(--easing);
}
.creds__col:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.creds__col h3 {
  font-size: 12.5px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0;
  font-weight: 500;
}
.creds__item {
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.creds__item:first-of-type { border-top: 0; padding-top: 0; }
.creds__item h4 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--support-0);
}
.creds__item p {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--support-1);
}
.creds__item .creds__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--support-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.creds__note {
  color: var(--support-2);
  font-size: 13px;
  margin: 14px 0 0;
  text-align: center;
}

/* =========================================================
   Skills
   ========================================================= */
.skills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.skills__col {
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color .25s var(--easing), transform .25s var(--easing);
}
.skills__col:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.skills__col h3 {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin: 0 0 16px;
  font-weight: 500;
}
.skills__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skills__list li {
  font-size: 14px;
  color: var(--support-1);
  padding: 4px 0;
  transition: color .2s var(--easing);
}
.skills__list li:hover { color: var(--support-0); }

/* =========================================================
   Docs card
   ========================================================= */
.docs-card {
  background: linear-gradient(135deg, var(--accent-wash), transparent), var(--base-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  padding: 48px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.docs-card::after {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.docs-card__text { position: relative; z-index: 1; }
.docs-card__text h2 {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.docs-card__text p {
  color: var(--support-1);
  margin: 0 0 24px;
  font-size: 15.5px;
}
.docs-card__text strong { color: var(--accent); font-weight: 600; }
.docs-card__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.docs-card__preview {
  background: var(--base-0);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  position: relative;
  z-index: 1;
}
.docs-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--support-1);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.docs-card__row:last-child { border-bottom: none; }
.docs-card__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* =========================================================
   Timeline
   ========================================================= */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid var(--line);
  padding-left: 32px;
  margin-left: 8px;
}
.timeline__item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.timeline__item:last-child { border-bottom: none; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: -39px; top: 30px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--base-0);
  border: 2px solid var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.timeline__year {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 4px;
}
.timeline__body h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.timeline__body p {
  margin: 0 0 4px;
  color: var(--support-1);
  font-size: 14.5px;
}
.timeline__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px !important;
  color: var(--support-2) !important;
  margin-top: 4px !important;
}

/* =========================================================
   Contact
   ========================================================= */
.section--contact { padding-bottom: 120px; }
.contact { max-width: 760px; }
.contact__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.contact__lead {
  color: var(--support-1);
  font-size: 17px;
  margin: 0 0 36px;
}
.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.contact__card {
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--support-0);
  transition: all .2s var(--easing);
}
.contact__card:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--base-2), var(--base-1));
  transform: translateY(-2px);
  color: var(--support-0);
}
.contact__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--support-2);
}
.contact__value {
  font-size: 15px;
  font-weight: 500;
  word-break: break-all;
}

/* =========================================================
   Footer
   ========================================================= */
.footer {
  border-top: 1px solid var(--line);
  padding: 32px 0;
  background: var(--nav-bg);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--support-1);
}
.footer__meta {
  margin: 0;
  color: var(--support-2);
  font-size: 13px;
}
.footer__meta a { color: var(--support-1); }
.footer__meta a:hover { color: var(--accent); }

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--easing), transform .7s var(--easing);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Projects page
   ========================================================= */
.page-head {
  padding: 80px 0 40px;
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.page-head p {
  color: var(--support-1);
  font-size: 17px;
  max-width: 680px;
  margin: 0;
}
.section--archive h2 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}
.archive {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.archive__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tint-soft);
  transition: all .2s var(--easing);
  color: var(--support-0);
}
.archive__item:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
  color: var(--support-0);
}
.archive__item h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.archive__item p {
  margin: 0;
  color: var(--support-1);
  font-size: 14px;
}
.archive__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.archive__meta span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--tint);
  border: 1px solid var(--line);
  color: var(--support-2);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .split__grid, .ops { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav.is-menu-open .nav__links {
    display: flex;
    position: absolute;
    top: 68px;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--nav-bg-solid);
    border-bottom: 1px solid var(--line);
    padding: 12px 28px 24px;
    backdrop-filter: blur(14px);
  }
  .nav.is-menu-open .nav__links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }

  .about__grid { grid-template-columns: 1fr; }
  .project__body { grid-template-columns: 1fr; }
  .project__aside { order: -1; }
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-card { grid-template-columns: 1fr; padding: 32px; gap: 28px; }
  .contact__grid { grid-template-columns: 1fr; }
  .archive { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 48px; }
  .section { padding: 64px 0; }
  .hero__meta { grid-template-columns: 1fr; gap: 16px; }
  .timeline__item { grid-template-columns: 1fr; gap: 8px; }
  .section__head--row { flex-direction: column; align-items: flex-start; }
  .infra__head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 540px) {
  .container { padding: 0 20px; }
  .hero__title { font-size: 2.2rem; }
  .project { padding: 24px; }
  .project__head { flex-direction: column; gap: 12px; }
  .project__num { display: none; }
  .docs-card { padding: 24px; }
  .skills { grid-template-columns: 1fr; }
  .split { padding: 16px; }
  .cli, .gui { min-height: 320px; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

@keyframes packet-move {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

/* =========================================================
   Theme toggle (segmented control, lives in the nav)
   Three buttons: dark / light / system. The "is-active"
   state is set by js/modules/theme.js.
   ========================================================= */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--tint-soft);
  white-space: nowrap;
}
.theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 30px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--support-2);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color .2s var(--easing), background .2s var(--easing), box-shadow .2s var(--easing);
}
.theme-toggle__btn:hover { color: var(--support-0); }
.theme-toggle__btn.is-active {
  background: var(--base-0);
  color: var(--support-0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), inset 0 0 0 1px var(--line-2);
}
[data-theme="dark"] .theme-toggle__btn.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-ring);
}
.theme-toggle__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 540px) {
  .theme-toggle__btn { min-width: 48px; padding: 0 10px; font-size: 11.5px; }
}

/* mobile menu places the toggle as its own row */
.nav.is-menu-open .theme-toggle { align-self: flex-start; margin-top: 10px; }

/* =========================================================
   Hero portrait — rounded square (not circular). Reserves
   right-side space on wide viewports so the text does not
   collide with the image; becomes a stacked card on mobile.
   ========================================================= */
.hero__inner {
  position: relative;
}
@media (min-width: 960px) {
  .hero__inner { padding-right: 260px; max-width: 1080px; }
}
@media (min-width: 960px) and (max-width: 1080px) {
  .hero__inner { padding-right: 210px; }
}
.hero__portrait {
  position: absolute;
  top: 4px;
  right: 0;
  width: 220px;
  height: 264px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(closest-side at 30% 20%, var(--accent-wash), transparent 70%),
    linear-gradient(160deg, var(--base-2), var(--base-3));
  box-shadow: var(--shadow-1);
  isolation: isolate;
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: opacity .3s var(--easing);
}
.hero__portrait-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 24px var(--accent-glow);
}
.hero__portrait.is-fallback img { opacity: 0; }
.hero__portrait.is-fallback .hero__portrait-fallback { opacity: 1; }
.hero__portrait::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line-2);
  pointer-events: none;
}

@media (max-width: 1080px) {
  .hero__portrait { width: 186px; height: 222px; border-radius: 20px; }
}
@media (max-width: 959px) {
  .hero__inner { padding-right: 0; }
  .hero__portrait {
    position: static;
    width: 148px;
    height: 176px;
    border-radius: 18px;
    margin-bottom: 22px;
  }
  .hero__portrait-fallback { font-size: 2.6rem; }
}

/* =========================================================
   Visitor details widget
   Compact, honest, privacy-worded. Lives in its own section.
   ========================================================= */
.visitor {
  padding: 0 0 88px;
}
.visitor__panel {
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-1);
}
.visitor__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.visitor__head h2 {
  margin: 0;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.visitor__sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--support-1);
  max-width: 520px;
}
.visitor__privacy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--support-2);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--tint-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.visitor__privacy::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}
.visitor__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.visitor__cell {
  background: var(--tint-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.visitor__cell-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--support-2);
}
.visitor__cell-value {
  font-size: 14px;
  color: var(--support-0);
  font-family: 'JetBrains Mono', monospace;
  word-break: break-word;
  min-height: 1.2em;
}
.visitor__cell-value.is-pending {
  color: var(--support-2);
  font-style: italic;
}
.visitor__cell-value.is-error {
  color: var(--warn);
}
.visitor__cell-value .ok  { color: var(--ok);   }
.visitor__cell-value .bad { color: var(--warn); }

@media (max-width: 900px) {
  .visitor__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   Daily visits chart (reads data/visits.json)
   ========================================================= */
.visits {
  margin-top: 24px;
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 24px 18px;
}
.visits__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.visits__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--support-0);
}
.visits__title small {
  display: block;
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--support-2);
  text-transform: uppercase;
}
.visits__badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--support-2);
}
.visits__badge.is-sample   { color: var(--warn);  border-color: var(--warn); }
.visits__badge.is-live     { color: var(--accent); border-color: var(--accent); }
.visits__chart {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 120px;
  padding: 6px 0 10px;
  border-bottom: 1px dashed var(--line);
}
.visits__bar {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  position: relative;
  transition: opacity .2s var(--easing), transform .2s var(--easing);
  cursor: default;
}
.visits__bar:hover { opacity: 0.8; transform: translateY(-1px); }
.visits__bar[data-sample="true"] {
  background: repeating-linear-gradient(
    135deg,
    var(--accent-soft) 0 4px,
    transparent 4px 8px
  ), var(--accent-soft);
  border: 1px solid var(--accent-ring);
}
.visits__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--support-2);
}
.visits__summary {
  display: flex;
  gap: 28px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.visits__stat { display: inline-flex; flex-direction: column; gap: 2px; }
.visits__stat span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--support-2);
}
.visits__stat b {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--support-0);
}

/* =========================================================
   Cert cards (logo + metadata)
   ========================================================= */
.cert-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.cert {
  display: flex;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--base-1), var(--base-2));
  transition: border-color .25s var(--easing), transform .25s var(--easing);
}
.cert:hover {
  border-color: var(--accent-ring);
  transform: translateY(-2px);
}
.cert__logo {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: var(--tint-soft);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.cert__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cert__body { flex: 1; min-width: 0; }
.cert__name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--support-0);
}
.cert__issuer {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--support-1);
}
.cert__dates {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--support-2);
}
.cert__dates span b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--support-0);
  margin-top: 2px;
}
.cert__status {
  margin-top: 10px;
}

@media (max-width: 720px) {
  .cert-cards { grid-template-columns: 1fr; }
  .cert__logo { width: 60px; height: 60px; }
}

/* =========================================================
   Docs guest-access note
   Shown below the docs CTAs on index.html and inside
   projects.html where docs are referenced.
   ========================================================= */
.docs-guest {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px dashed var(--line-2);
  background: var(--tint-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--support-1);
}
.docs-guest strong {
  color: var(--accent);
  font-weight: 600;
}
.docs-guest kbd {
  font-family: 'JetBrains Mono', monospace;
  background: var(--base-0);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--support-0);
  font-size: 12px;
}

/* =========================================================
   GUI "apply / jump to topology" call-to-action
   Sits in the GUI footer. Keeps the instant GUI→viz updates,
   but gives users a clear "take me back to the diagram" button.
   ========================================================= */
.gui__apply {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all .2s var(--easing);
}
.gui__apply:hover {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px var(--accent-glow);
}
.gui__apply svg { stroke: currentColor; fill: none; stroke-width: 2; }

/* =========================================================
   Honesty note used on scaffolded features (visits chart etc.)
   ========================================================= */
.scaffold-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--support-2);
  margin-top: 12px;
}

/* =========================================================
   Responsive: visitor / visits tweaks
   ========================================================= */
@media (max-width: 540px) {
  .visitor__panel { padding: 20px; }
  .visits__chart { grid-template-columns: repeat(14, minmax(0, 1fr)); height: 100px; }
}