/* =============================================================
   UTKARSH — PORTFOLIO WEBSITE
   Standalone stylesheet. No build step, no framework.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  --bg: #08080a;
  --surface: #0c0c0f;
  --surface-2: #101015;
  --surface-3: #16161c;
  --ink: #e8e6e1;
  --ink-dim: #8e8e95;
  --muted: #5c5c63;
  --faint: #3a3a40;
  --line: #17171b;
  --line-strong: #232329;
  --line-bright: #2e2e36;
  --cyan: #00f0ff;
  --cyan-dim: #0a9aa6;
  --orange: #ff5c00;
  --orange-dim: #b34200;
  --cyan-wash: rgba(0,240,255,0.10);
  --cyan-line: rgba(0,240,255,0.40);
  --orange-wash: rgba(255,92,0,0.10);
  --orange-line: rgba(255,92,0,0.45);
  --font-display: 'Archivo Black','Arial Black',sans-serif;
  --font-mono: 'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur-fast: 0.12s;
  --dur-med: 0.25s;
  --glow-cyan-sm: 0 0 12px -2px rgba(0,240,255,0.55);
  --glow-orange-sm: 0 0 12px -2px rgba(255,92,0,0.6);
}

/* ---------- Reset / base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* hide native cursor on fine-pointer devices when custom cursor is active */
body.cursor-active { cursor: none; }
body.cursor-active a, body.cursor-active button, body.cursor-active [role="button"] { cursor: none; }
::selection { background: var(--cyan); color: #000; }
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--line-bright); }

/* ---------- Film grain ---------- */
.grain-overlay {
  position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px; mix-blend-mode: screen;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 20px; font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; border-radius: 2px; cursor: pointer;
  line-height: 1; white-space: nowrap; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink);
  transition: color var(--dur-fast) linear, background var(--dur-fast) linear,
              border-color var(--dur-fast) linear;
}
.btn--sm { padding: 7px 14px; font-size: 11px; }
.btn--ghost { border-color: transparent; color: var(--ink-dim); }
.btn--primary { color: #000; border-color: var(--cyan); background: var(--cyan); }
.btn--primary.is-orange { border-color: var(--orange); background: var(--orange); }
.btn--secondary:hover { color: var(--cyan); border-color: var(--cyan-line); }
.btn--secondary.is-orange:hover { color: var(--orange); border-color: var(--orange-line); }
.btn--ghost:hover { color: var(--cyan); }
.btn--primary:hover { box-shadow: var(--glow-cyan-sm); }
.btn--primary.is-orange:hover { box-shadow: var(--glow-orange-sm); }

/* ---------- Tags ---------- */
.tag {
  display: inline-flex; align-items: center; padding: 5px 10px;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line-strong);
  border-radius: 2px; line-height: 1; white-space: nowrap;
}
.tag--cyan { color: var(--cyan); border-color: var(--cyan-line); background: var(--cyan-wash); }
.tag--orange { color: var(--orange); border-color: var(--orange-line); background: var(--orange-wash); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5vw; height: 52px; background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) ease, border-color var(--dur-med) ease,
              transform 0.3s ease;
}
.nav.is-scrolled {
  background: rgba(8,8,10,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav.nav--hidden { transform: translateY(-100%); }
.nav-mark { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; color: var(--ink-dim); }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-dim); transition: color var(--dur-fast) linear;
  position: relative;
}
.nav-links a:hover { color: var(--ink); }

/* ---------- Section head ---------- */
.sec-head {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 26px; align-items: baseline;
  margin-bottom: 56px;
}
.sec-index { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--orange); }
.sec-title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(40px,7vw,96px);
  line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink);
  word-break: break-word;
}
.sec-sub {
  grid-column: 2; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--ink-dim); text-transform: uppercase;
}

/* ---------- Kicker ---------- */
.kicker {
  display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-mono);
  font-weight: 500; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted);
}
.kicker .plus { color: var(--orange); letter-spacing: 0; }

/* ---------- Layout root ---------- */
.pf-root { position: relative; min-height: 100vh; }

/* ---------- Preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
}
.pre-inner {
  display: flex; align-items: flex-start; gap: 48px;
  font-family: var(--font-mono); color: var(--ink-dim);
}
.pre-counter {
  font-family: var(--font-display); font-size: clamp(64px, 12vw, 140px);
  line-height: 1; letter-spacing: -0.04em; color: var(--ink);
  font-weight: 400;
}
.pre-lines {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 12px; font-size: 11px; letter-spacing: 0.14em;
}
.pre-line { opacity: 0.35; color: var(--cyan-dim); transition: opacity 0.2s ease; }
.pre-line.is-active { opacity: 1; color: var(--cyan); }

/* ---------- Hero ---------- */
.pf-hero {
  position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden;
}
.pf-hero-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; touch-action: pan-y; }
.hero-3d-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; opacity: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 65%);
  mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 65%);
}

/* Hologlobe overlay labels */
.holo-label {
  position: absolute;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(160,235,255,0.65); white-space: nowrap;
  transform: translate(-50%, -100%); pointer-events: none;
  transition: opacity 0.15s ease;
  text-shadow: 0 0 8px rgba(0,240,255,0.45);
}

/* Hologlobe info panel */
.holo-panel {
  position: absolute; pointer-events: none; z-index: 10;
  background: rgba(0,8,18,0.92);
  border: 1px solid rgba(0,240,255,0.22);
  border-radius: 2px; padding: 14px 18px;
  min-width: 215px; max-width: 260px;
  font-family: var(--font-mono);
  transition: opacity 0.18s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.holo-panel .hp-name { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.holo-panel .hp-lvl  { font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0,240,255,0.42); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(0,240,255,0.12); }
.holo-panel .hp-line { font-size: 9px; letter-spacing: 0.06em; color: rgba(180,240,255,0.7); margin-bottom: 5px; }
.holo-panel .hp-sig  { font-size: 7.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,240,255,0.38); margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0,240,255,0.12); }
.pf-hero-copy { position: relative; z-index: 2; width: 100%; padding: 0 5vw 9vh; }

/* Hero corner metadata */
.hero-corner {
  position: absolute; top: 80px; left: 5vw; z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}

/* Hero status bar */
.pf-hero-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: 26px; padding-bottom: 16px; border-bottom: 1px solid var(--line-strong);
}
.pf-hero-avail { display: inline-flex; align-items: center; gap: 9px; color: var(--cyan); }
.pf-avail-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pf-pulse 2s ease-in-out infinite; }
.pf-hero-sep { color: var(--faint); }
@keyframes pf-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Blinking block cursor */
.hero-cursor { margin-left: 2px; color: var(--cyan); animation: cursor-blink 1.1s step-end infinite; }
@keyframes cursor-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* Kicker line */
.pf-kicker-line {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.32em;
  color: var(--ink-dim); margin-bottom: 20px; text-transform: uppercase;
}

/* Hero name — dominant display */
.pf-hero-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(80px, 16.5vw, 235px);
  line-height: 0.9; letter-spacing: -0.015em; color: var(--ink); text-transform: uppercase;
  display: flex; flex-wrap: nowrap; overflow: hidden;
}

/* Char split helpers */
.pf-char-mask {
  display: inline-block; overflow: hidden;
  line-height: inherit; vertical-align: top;
}
.pf-char { display: inline-block; }
/* Word-level no-break container (contact title) */
.pf-word-block { display: inline-block; white-space: nowrap; vertical-align: top; }
/* Space between word blocks */
.pf-char-space { display: inline; }
/* Space chars are not wrapped in overflow:hidden masks */
.pf-char-space { display: inline-block; white-space: pre; }

/* Hero meta role lines */
.pf-hero-meta {
  display: flex; flex-wrap: wrap; gap: 14px 32px;
  margin-top: 28px; font-size: 12px; letter-spacing: 0.14em; color: var(--ink-dim); text-transform: uppercase;
}
.pf-hero-meta span { }
.pf-hero-meta span::before { content: '+ '; color: var(--orange); }

/* Scroll cue */
.scroll-cue {
  position: absolute; right: 5vw; bottom: 56px; z-index: 2;
  width: 1px; height: 56px;
}
.scroll-cue-line {
  width: 100%; height: 100%;
  background: var(--muted);
}

/* Hero marquee strip */
.hero-marquee {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
}

/* ---------- Marquee ---------- */
.marquee-strip {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  background: var(--bg);
}
.marquee-track {
  display: inline-flex;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
  padding: 11px 0;
  animation: marquee-left 28s linear infinite;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Sections ---------- */
.pf-section { padding: 13vh 5vw; border-top: 1px solid var(--line-strong); position: relative; }
.pf-work { background: radial-gradient(120% 80% at 80% 0%, rgba(0,240,255,0.05), transparent 55%), radial-gradient(120% 80% at 0% 100%, rgba(255,92,0,0.05), transparent 55%), var(--surface); }
.pf-oss { background: linear-gradient(180deg, var(--surface) 0%, #0a0a0d 100%), var(--surface); }
.pf-research { background: var(--surface); }
.pf-prose { font-family: var(--font-mono); font-size: 13px; line-height: 1.75; letter-spacing: 0.03em; color: var(--ink-dim); max-width: 64ch; }
.pf-prose--wide { max-width: 80ch; }

/* Summary + stats */
.pf-summary { display: flex; flex-direction: column; gap: 64px; }
.pf-summary-grid { display: flex; flex-direction: column; gap: 26px; }
.pf-lead { font-family: var(--font-mono); font-size: clamp(17px,2.3vw,26px); line-height: 1.55; letter-spacing: 0.01em; color: var(--ink); max-width: 70ch; }
.pf-stats { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line-strong); border-radius: 2px; overflow: hidden; background: var(--surface); }
.pf-bigstat { display: flex; flex-direction: column; gap: 10px; padding: 30px 26px; border-right: 1px solid var(--line-strong); }
.pf-bigstat:last-child { border-right: none; }
.pf-bigstat-n { font-family: var(--font-display); font-size: clamp(34px,4.4vw,58px); line-height: 0.9; letter-spacing: -0.02em; }
.pf-bigstat:nth-child(odd) .pf-bigstat-n { color: var(--cyan); }
.pf-bigstat:nth-child(even) .pf-bigstat-n { color: var(--orange); }
.pf-bigstat-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* Shared */
.pf-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Project showcase */
.pf-show-stack { display: flex; flex-direction: column; gap: 40px; }
.pf-show { display: grid; grid-template-columns: 1.05fr 0.95fr; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.pf-show.is-cyan { --pa: var(--cyan); --pa-line: var(--cyan-line); --pa-wash: var(--cyan-wash); }
.pf-show.is-orange { --pa: var(--orange); --pa-line: var(--orange-line); --pa-wash: var(--orange-wash); }
.pf-show-copy { display: flex; flex-direction: column; gap: 20px; padding: 40px 44px; min-width: 0; }
.pf-show-head { display: flex; align-items: center; justify-content: space-between; }
.pf-show-num { font-family: var(--font-display); font-size: 18px; color: var(--pa); letter-spacing: 0.04em; }
.pf-show-status { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pa); border: 1px solid var(--pa); border-radius: 999px; padding: 4px 11px; }
.pf-show-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px,4.6vw,60px); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); }
.pf-show-kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-top: -8px; }
.pf-show-role { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink); margin-top: 4px; }
.pf-show-role span { font-size: 9px; letter-spacing: 0.2em; color: var(--muted); border: 1px solid var(--line-strong); padding: 3px 7px; border-radius: 2px; }
.pf-show-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); border-radius: 2px; }
.pf-stat { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--surface); }
.pf-stat-n { font-family: var(--font-mono); font-weight: 600; font-size: 22px; color: var(--pa); letter-spacing: -0.01em; }
.pf-stat-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pf-show-viz { position: relative; overflow: hidden; background: radial-gradient(130% 110% at 80% 10%, var(--pa-wash), transparent 60%), #060608; border-left: 1px solid var(--line-strong); min-height: 340px; }
.pf-show--flip .pf-show-copy { order: 2; }
.pf-show--flip .pf-show-viz { order: 1; border-left: none; border-right: 1px solid var(--line-strong); }
.pf-viz-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--pa-line) 1px, transparent 1px), linear-gradient(90deg, var(--pa-line) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.22; -webkit-mask-image: radial-gradient(120% 100% at 80% 20%, #000 30%, transparent 80%); mask-image: radial-gradient(120% 100% at 80% 20%, #000 30%, transparent 80%); }
.pf-viz-glow { position: absolute; width: 240px; height: 240px; right: -40px; top: -40px; background: radial-gradient(ellipse at center, var(--pa) 0%, transparent 70%); opacity: 0.5; border-radius: 999px; }
.pf-viz-num { position: absolute; left: 36px; bottom: 22px; z-index: 2; font-family: var(--font-display); font-size: clamp(90px,13vw,168px); line-height: 0.8; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px var(--pa-line); opacity: 0.85; }
.pf-viz-mark { position: absolute; right: 34px; top: 30px; z-index: 2; font-family: var(--font-display); font-size: 30px; color: var(--pa); letter-spacing: 0.04em; text-shadow: 0 0 22px var(--pa); }
.pf-viz-foot { position: absolute; right: 34px; bottom: 26px; z-index: 2; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); }
.pf-viz-dot { width: 7px; height: 7px; background: var(--pa); box-shadow: 0 0 10px var(--pa); }

/* Open source */
.pf-oss-lead { color: var(--ink); }
.pf-oss-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 48px; }
.pf-oss-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 2px; transition: border-color var(--dur-fast) linear; }
.pf-oss-card.is-cyan { --pa: var(--cyan); --pa-line: var(--cyan-line); }
.pf-oss-card.is-orange { --pa: var(--orange); --pa-line: var(--orange-line); }
.pf-oss-card:hover { border-color: var(--pa-line); box-shadow: 0 0 12px -2px var(--pa-line); }
.pf-oss-top { display: flex; align-items: center; justify-content: space-between; }
.pf-oss-org { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.8vw, 42px); letter-spacing: -0.02em; text-transform: uppercase; color: var(--pa); line-height: 1; }
.pf-oss-status { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid var(--pa); color: var(--pa); border-radius: 999px; padding: 3px 9px; flex-shrink: 0; align-self: flex-start; margin-top: 6px; }
.pf-oss-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin-top: 8px; }
.pf-oss-repo { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--pa); }
.pf-oss-impact { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; letter-spacing: 0.02em; color: var(--ink-dim); margin-top: 4px; }
.pf-oss-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pf-oss-index { margin-top: 56px; }

/* Project table */
.ptable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ptable { width: 100%; border-collapse: collapse; font-size: 12px; letter-spacing: 0.06em; }
.ptable thead th { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--muted); text-align: left; padding: 0 24px 12px 0; font-weight: 400; border-bottom: 1px solid var(--line-strong); text-transform: uppercase; white-space: nowrap; }
.ptable thead th:first-child { padding-left: 20px; }
.ptable thead th:last-child { text-align: right; padding-right: 20px; }
.ptable tbody tr { border-bottom: 1px solid var(--line); transition: background var(--dur-fast) linear; }
.ptable tbody tr:hover { background: var(--surface); }
.ptable td { padding: 14px 24px 14px 0; font-family: var(--font-mono); }
.ptable .c-num { padding: 14px 16px 14px 20px; font-size: 11px; width: 3.5ch; white-space: nowrap; color: var(--orange); border-left: 2px solid transparent; transition: border-left-color var(--dur-fast) linear, color var(--dur-fast) linear; }
.ptable tbody tr:hover .c-num { color: var(--cyan); border-left-color: var(--cyan); }
.ptable .c-name { color: var(--ink); }
.ptable .c-cat { color: var(--ink-dim); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.ptable .c-org { color: var(--orange); font-size: 11.5px; letter-spacing: 0.08em; }
.ptable .c-note { color: var(--muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.ptable .c-year { padding: 14px 20px 14px 0; color: var(--muted); font-size: 10px; letter-spacing: 0.1em; text-align: right; white-space: nowrap; }

/* OSS index — section dividers */
.c-section-divider td { padding: 26px 20px 9px 20px; border-bottom: 1px solid var(--line-strong); background: none; }
.c-section-divider:first-child td { padding-top: 2px; }
.c-section-divider--issues td { padding-top: 36px; }
.c-section-label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cyan); }
.c-section-label--issues { color: var(--orange); }
.c-section-count { float: right; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* "filed & fixed" pill badge */
.c-badge { display: inline-block; font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); border: 1px solid var(--cyan-line); border-radius: 999px; padding: 1px 7px; margin-left: 8px; vertical-align: middle; white-space: nowrap; }
/* Issue rows — muted number, muted org */
.c-num--issue { color: var(--muted); }
.ptable tbody tr:hover .c-num--issue { color: var(--orange); border-left-color: var(--orange); }
.c-org--issue { color: var(--muted); }

/* Research */
.pf-research-grid { display: flex; flex-direction: column; gap: 0; }
.pf-research-paper { padding: 36px 0; }
.pf-research-paper-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 16px; }
.pf-research-idx { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-dim); }
.pf-research-title { font-family: var(--font-display); font-size: clamp(18px, 2vw, 26px); letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.pf-research-year { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--cyan); margin-left: auto; }
.pf-research-foot { display: flex; align-items: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.pf-research-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.pf-research-divider { height: 1px; background: var(--rule); }
.pf-research-q {
  font-family: var(--font-mono); font-style: italic;
  font-size: clamp(13px, 1.4vw, 15px); line-height: 1.5;
  color: var(--cyan); letter-spacing: 0.01em;
  margin-bottom: 14px;
}

/* ---------- Signature ---------- */
.pf-signature { text-align: center; }
.pf-signature-line {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 40px); line-height: 1.05;
  letter-spacing: -0.01em; color: var(--ink);
}

/* Contact */
.pf-contact {
  position: relative; overflow: hidden;
  min-height: 560px; background: #0a0a0a;
  /* all children are absolutely positioned */
}
.contact-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none; /* events captured on section */
}
.contact-copy {
  position: absolute; top: 52px; left: 0; right: 0; text-align: center;
  z-index: 3; pointer-events: none; padding: 0 5vw;
}
.contact-heading {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3.8vw, 52px); letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 12px; line-height: 1.05;
}
.contact-sub {
  font-family: var(--font-mono); font-size: clamp(11px, 1.2vw, 13px);
  line-height: 1.7; letter-spacing: 0.03em; color: var(--ink-dim);
  max-width: 56ch; margin: 0 auto;
}
.pf-contact-links {
  position: absolute; bottom: 48px; left: 0; right: 0;
  display: flex; gap: 14px; justify-content: center;
  z-index: 3; flex-wrap: wrap;
}

/* ── SSRF Widget ────────────────────────────────────────────────────── */

/* Screen-reader only utility (no other use on this site) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Full-width featured card */
.pf-oss-card.is-featured { grid-column: 1 / -1; }

/* Split diff panel */
.oss-diff {
  margin-top: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
  font-family: var(--font-mono);
}
.oss-diff-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line-strong);
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
}
.oss-diff-path { color: var(--ink-dim); }
.oss-diff-stat { font-size: 10px; letter-spacing: 0.06em; }
.oss-diff-stat--add { color: #4ade80; }
.oss-diff-stat--del { color: #f87171; }
.oss-diff-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.oss-diff-panel {
  padding: 18px 20px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.oss-diff-panel--before {
  border-right: 1px solid var(--line-strong);
  border-left: 3px solid rgba(248,113,113,0.45);
}
.oss-diff-panel--after {
  border-left: 3px solid rgba(0,240,255,0.38);
}
.oss-diff-plabel {
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  margin-bottom: 14px; font-weight: 700;
}
.oss-diff-panel--before .oss-diff-plabel { color: rgba(248,113,113,0.65); }
.oss-diff-panel--after  .oss-diff-plabel { color: rgba(0,240,255,0.55); }
.oss-diff-code {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.85;
  letter-spacing: 0.02em; color: var(--ink-dim);
  white-space: pre; margin: 0; min-width: max-content;
}
.oss-diff-code .dc-dim { display: block; opacity: 0.5; }
.oss-diff-del {
  display: block;
  color: #fca5a5;
  background: rgba(248,113,113,0.07);
}
.oss-diff-add {
  display: block;
  color: var(--cyan);
  background: rgba(0,240,255,0.05);
}
mark.dc-bug {
  background: rgba(248,113,113,0.28);
  color: #ff7070;
  border-radius: 2px;
  padding: 0 2px;
  text-decoration: none;
}
mark.dc-fix {
  background: rgba(0,240,255,0.18);
  color: var(--cyan);
  border-radius: 2px;
  padding: 0 2px;
  text-decoration: none;
}
.oss-diff-note {
  margin-top: 16px; padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 10.5px; letter-spacing: 0.02em; line-height: 1.55;
}
.oss-diff-note code {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--surface-3); padding: 1px 5px; border-radius: 2px;
}
.oss-diff-note--vuln { color: #f87171; }
.oss-diff-note--safe { color: var(--cyan); }

/* Foot link */
.pf-oss-foot-link {
  color: var(--ink-dim);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur-fast) linear;
}
.pf-oss-foot-link:hover { color: var(--cyan); }

/* Stack panels on narrow screens */
@media (max-width: 640px) {
  .oss-diff-panels { grid-template-columns: 1fr; }
  .oss-diff-panel--before { border-right: none; border-bottom: 1px solid var(--line-strong); }
  .oss-diff-code { font-size: 10.5px; }
}

/* ========== CodeAttack widget ========== */
.ca-widget {
  --ca-bg:#0a0b0d; --ca-panel:#101216; --ca-panel2:#0d0f12;
  --ca-line:rgba(236,233,223,.10); --ca-line2:rgba(236,233,223,.20);
  --ca-ink:#ece9e3; --ca-dim:#7c828b; --ca-dim2:#6b7280;
  --ca-cyan:#4fe3ff; --ca-cyan-dim:rgba(79,227,255,.12);
  --ca-orange:#ff6a3a; --ca-orange-dim:rgba(255,106,58,.12);
  --ca-kw:#ff6a3a; --ca-str:#a9e8b4; --ca-fn:#4fe3ff; --ca-com:#565b62;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  color:var(--ca-ink); background:var(--ca-bg);
  border:1px solid var(--ca-line2);
  margin-top:20px; position:relative; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.ca-widget *{ box-sizing:border-box; }
.ca-grain{ position:absolute; inset:0; pointer-events:none; z-index:6; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ca-head{ padding:26px 28px 0; }
.ca-eyebrow{ display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.18em; color:var(--ca-dim); text-transform:uppercase; }
.ca-eyebrow .ca-plus{ color:var(--ca-orange); }
.ca-eyebrow b{ color:var(--ca-cyan); font-weight:600; text-transform:none; letter-spacing:0; }
.ca-title{ font-family:'Archivo Black',sans-serif; font-weight:400; font-size:clamp(24px,4vw,40px); line-height:.98; letter-spacing:-.01em; margin:16px 0 0; text-transform:uppercase; }
.ca-deck{ margin:12px 0 0; max-width:64ch; font-size:13.5px; line-height:1.6; color:var(--ca-dim); }
.ca-deck em{ color:var(--ca-ink); font-style:normal; }
.ca-presets{ padding:22px 28px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ca-presets-l{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ca-dim2); margin-right:4px; }
.ca-chip{ font-family:inherit; font-size:12px; color:var(--ca-dim); background:transparent; border:1px solid var(--ca-line2); padding:7px 12px; cursor:pointer; transition:.15s; letter-spacing:.02em; }
.ca-chip:hover{ color:var(--ca-ink); border-color:var(--ca-ink); }
.ca-chip.is-active{ color:var(--ca-cyan); border-color:var(--ca-cyan); background:var(--ca-cyan-dim); }
.ca-chip:focus-visible{ outline:2px solid var(--ca-cyan); outline-offset:2px; }
.ca-stage{ padding:22px 28px 0; display:grid; grid-template-columns:minmax(0,0.9fr) auto minmax(0,1.1fr); gap:0; align-items:stretch; }
.ca-col-head{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ca-dim); margin:0 0 10px; display:flex; align-items:center; gap:8px; }
.ca-col-head .ca-sq{ width:7px; height:7px; transform:rotate(45deg); flex:none; }
.ca-prompt-col .ca-sq{ background:var(--ca-dim); }
.ca-payload-col .ca-sq{ background:var(--ca-orange); box-shadow:0 0 10px var(--ca-orange); }
.ca-prompt{ border:1px solid var(--ca-line2); background:var(--ca-panel); padding:20px 18px; min-height:150px; font-size:15px; line-height:1.7; color:var(--ca-ink); display:flex; align-items:center; }
.ca-prompt .ca-w{ transition:color .2s, background .2s; padding:0 1px; }
.ca-prompt.is-moving .ca-w{ color:var(--ca-orange); }
.ca-arrow{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 18px; gap:8px; color:var(--ca-dim2); }
.ca-arrow-glyph{ font-size:22px; color:var(--ca-orange); transition:transform .3s; }
.ca-arrow-txt{ font-size:9px; letter-spacing:.12em; writing-mode:horizontal-tb; text-transform:uppercase; }
.ca-payload{ border:1px solid var(--ca-line2); background:var(--ca-panel2); position:relative; overflow:hidden; min-width:0; min-height:150px; }
.ca-payload-col{ min-width:0; }
.ca-locked{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ca-dim2); font-size:12px; letter-spacing:.06em; text-align:center; padding:20px; }
.ca-code{ margin:0; padding:18px 18px; font-size:12px; line-height:1.6; overflow-x:auto; white-space:pre; tab-size:2; }
.ca-code .ca-ln{ display:block; opacity:0; transform:translateY(8px); }
.ca-code.is-on .ca-ln{ opacity:1; transform:none; transition:opacity .34s ease, transform .34s ease; }
.ca-kw{ color:var(--ca-kw); } .ca-str{ color:var(--ca-str); } .ca-fn{ color:var(--ca-fn); } .ca-com{ color:var(--ca-com); } .ca-pun{ color:var(--ca-dim); }
.ca-tok{ display:inline-block; opacity:0; transform:translateY(-6px) scale(.85); }
.ca-code.is-on .ca-tok{ opacity:1; transform:none; transition:opacity .3s cubic-bezier(.2,.9,.3,1.3), transform .3s cubic-bezier(.2,.9,.3,1.3); }
.ca-hole{ background:var(--ca-orange-dim); border-left:2px solid var(--ca-orange); padding-left:6px; margin-left:-8px; }
.ca-code.is-on .ca-hole{ animation:ca-pulse 1.1s ease 2; animation-delay:1.1s; }
@keyframes ca-pulse{ 0%,100%{ background:var(--ca-orange-dim);} 50%{ background:rgba(255,106,58,.28);} }
.ca-sweep{ position:absolute; left:0; right:0; top:0; height:40px; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, rgba(79,227,255,.16), transparent); }
.ca-payload.is-running .ca-sweep{ animation:ca-sweep 1.1s ease forwards; }
@keyframes ca-sweep{ 0%{ opacity:1; transform:translateY(-40px);} 100%{ opacity:0; transform:translateY(420px);} }
.ca-action{ padding:20px 28px 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ca-btn{ font-family:inherit; font-size:13px; letter-spacing:.04em; color:var(--ca-bg); background:var(--ca-cyan); border:1px solid var(--ca-cyan); padding:11px 20px; cursor:pointer; font-weight:600; transition:.15s; }
.ca-btn:hover{ background:#7eecff; border-color:#7eecff; }
.ca-btn:focus-visible{ outline:2px solid var(--ca-cyan); outline-offset:3px; }
.ca-btn--ghost{ background:transparent; color:var(--ca-ink); border-color:var(--ca-line2); }
.ca-btn--ghost:hover{ background:transparent; border-color:var(--ca-ink); }
.ca-status{ font-size:11px; color:var(--ca-dim); letter-spacing:.03em; }
.ca-status b{ color:var(--ca-orange); font-weight:500; }
.ca-note{ margin:22px 0 0; padding:18px 28px 26px; border-top:1px solid var(--ca-line); display:flex; gap:14px; align-items:flex-start; }
.ca-note-mark{ color:var(--ca-cyan); font-size:13px; flex:none; line-height:1.5; }
.ca-note p{ margin:0; font-size:12.5px; line-height:1.65; color:var(--ca-dim); }
.ca-note b{ color:var(--ca-ink); font-weight:500; }
.ca-note a{ color:var(--ca-cyan); text-decoration:none; border-bottom:1px solid transparent; transition:.15s; }
.ca-note a:hover{ border-bottom-color:var(--ca-cyan); }
@media (max-width:680px){
  .ca-stage{ grid-template-columns:1fr; gap:14px; }
  .ca-arrow{ flex-direction:row; padding:0; }
  .ca-arrow-glyph{ transform:rotate(90deg); }
  .ca-head,.ca-presets,.ca-stage,.ca-action,.ca-note{ padding-left:20px; padding-right:20px; }
}
@media (prefers-reduced-motion:reduce){
  .ca-code .ca-ln,.ca-code .ca-tok{ opacity:1 !important; transform:none !important; transition:none !important; }
  .ca-code.is-on .ca-hole{ animation:none; }
  .ca-payload.is-running .ca-sweep{ animation:none; }
}

/* ========== Self-Consistency widget ========== */
.sc-widget {
  --sc-bg:#0a0b0d; --sc-panel:#101216; --sc-panel2:#14171c;
  --sc-line:rgba(236,233,223,.10); --sc-line2:rgba(236,233,223,.20);
  --sc-ink:#ece9e3; --sc-dim:#7c828b;
  --sc-cyan:#4fe3ff; --sc-cyan-dim:rgba(79,227,255,.13);
  --sc-orange:#ff6a3a; --sc-orange-dim:rgba(255,106,58,.13);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  color:var(--sc-ink); background:var(--sc-bg);
  border:1px solid var(--sc-line2);
  margin-top:24px; position:relative; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.sc-widget *{ box-sizing:border-box; }
.sc-grain{ position:absolute; inset:0; pointer-events:none; z-index:6; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sc-head{ padding:26px 28px 0; }
.sc-eyebrow{ display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.18em; color:var(--sc-dim); text-transform:uppercase; }
.sc-eyebrow .sc-plus{ color:var(--sc-orange); }
.sc-eyebrow b{ color:var(--sc-cyan); font-weight:600; }
.sc-title{ font-family:'Archivo Black',sans-serif; font-weight:400; font-size:clamp(24px,4vw,40px); line-height:.98; letter-spacing:-.01em; margin:16px 0 0; text-transform:uppercase; }
.sc-deck{ margin:12px 0 0; max-width:60ch; font-size:13.5px; line-height:1.6; color:var(--sc-dim); }
.sc-deck em{ color:var(--sc-ink); font-style:normal; }
.sc-control{ padding:24px 28px 6px; }
.sc-control-top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.sc-control-label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sc-dim); }
.sc-k{ font-family:'Archivo Black',sans-serif; font-size:clamp(22px,4vw,30px); letter-spacing:-.01em; }
.sc-k span{ color:var(--sc-cyan); }
.sc-slider-wrap{ margin-top:16px; position:relative; }
.sc-range{ -webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--sc-line2); outline:none; margin:18px 0; cursor:pointer; }
.sc-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; background:var(--sc-ink); border:none; cursor:pointer; transform:rotate(45deg); transition:background .15s,box-shadow .15s; box-shadow:0 0 0 1px var(--sc-bg),0 0 0 4px transparent; }
.sc-range::-webkit-slider-thumb:hover{ background:var(--sc-cyan); box-shadow:0 0 0 1px var(--sc-bg),0 0 0 6px var(--sc-cyan-dim); }
.sc-range::-moz-range-thumb{ width:18px; height:18px; background:var(--sc-ink); border:none; cursor:pointer; }
.sc-range:focus-visible::-webkit-slider-thumb{ background:var(--sc-cyan); box-shadow:0 0 0 1px var(--sc-bg),0 0 0 6px var(--sc-cyan-dim); }
.sc-ticks{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--sc-dim); letter-spacing:.05em; margin-top:-6px; }
.sc-ticks span{ width:30px; text-align:center; }
.sc-ticks span:first-child{ text-align:left; } .sc-ticks span:last-child{ text-align:right; }
.sc-tick-on{ color:var(--sc-cyan); }
.sc-panels{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--sc-line); margin:22px 0 0; border-top:1px solid var(--sc-line); border-bottom:1px solid var(--sc-line); }
.sc-panel{ background:var(--sc-panel); padding:22px 28px 26px; position:relative; }
.sc-panel--exp{ background:var(--sc-panel2); }
.sc-panel-tag{ display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.sc-dot{ width:7px; height:7px; flex:none; transform:rotate(45deg); }
.sc-panel--std .sc-dot{ background:var(--sc-cyan); box-shadow:0 0 10px var(--sc-cyan); }
.sc-panel--exp .sc-dot{ background:var(--sc-orange); box-shadow:0 0 10px var(--sc-orange); }
.sc-panel--std .sc-panel-tag{ color:var(--sc-cyan); }
.sc-panel--exp .sc-panel-tag{ color:var(--sc-orange); }
.sc-panel-q{ font-size:11px; color:var(--sc-dim); margin:4px 0 0; letter-spacing:.02em; }
.sc-ballots{ display:flex; flex-wrap:wrap; gap:5px; margin:20px 0 0; min-height:62px; align-content:flex-start; }
.sc-ballot{ width:26px; height:30px; border:1px solid var(--sc-line2); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--sc-dim); background:var(--sc-bg); position:relative; animation:sc-pop .28s cubic-bezier(.2,.9,.3,1.3) backwards; }
@keyframes sc-pop{ from{ opacity:0; transform:translateY(6px) scale(.7);} to{ opacity:1; transform:none;} }
.sc-ballot.is-correct{ color:var(--sc-cyan); border-color:var(--sc-cyan); background:var(--sc-cyan-dim); }
.sc-ballot.is-trap{ color:var(--sc-orange); border-color:var(--sc-orange); background:var(--sc-orange-dim); }
.sc-ballot.is-win::after{ content:""; position:absolute; inset:-4px; border:1px solid currentColor; opacity:.5; }
.sc-readout{ margin:22px 0 0; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.sc-acc{ font-family:'Archivo Black',sans-serif; font-size:clamp(40px,9vw,62px); line-height:.85; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sc-panel--std .sc-acc{ color:var(--sc-cyan); }
.sc-panel--exp .sc-acc{ color:var(--sc-orange); }
.sc-acc-l{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--sc-dim); text-align:right; line-height:1.5; padding-bottom:6px; }
.sc-trend{ display:inline-block; }
.sc-chart-wrap{ padding:24px 28px 10px; }
.sc-chart-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.sc-chart-title{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sc-dim); }
.sc-legend{ display:flex; gap:18px; font-size:11px; }
.sc-legend i{ display:inline-block; width:14px; height:0; border-top:2px solid; vertical-align:middle; margin-right:7px; }
.sc-legend .l-std{ color:var(--sc-cyan); } .sc-legend .l-std i{ border-color:var(--sc-cyan); }
.sc-legend .l-exp{ color:var(--sc-orange); } .sc-legend .l-exp i{ border-color:var(--sc-orange); border-top-style:dashed; }
.sc-chart{ width:100%; height:auto; display:block; }
.sc-grid-line{ stroke:var(--sc-line); stroke-width:1; }
.sc-axis-txt{ fill:var(--sc-dim); font-size:10px; font-family:'IBM Plex Mono',monospace; }
.sc-line-std{ fill:none; stroke:var(--sc-cyan); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(79,227,255,.4)); }
.sc-line-exp{ fill:none; stroke:var(--sc-orange); stroke-width:2; stroke-dasharray:5 4; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(255,106,58,.4)); }
.sc-marker-line{ stroke:var(--sc-line2); stroke-width:1; stroke-dasharray:2 3; }
.sc-mk{ stroke:var(--sc-bg); stroke-width:2; }
.sc-takeaway{ padding:18px 28px 26px; border-top:1px solid var(--sc-line); display:flex; gap:14px; align-items:flex-start; }
.sc-takeaway-mark{ color:var(--sc-orange); font-size:13px; line-height:1.5; flex:none; }
.sc-takeaway p{ margin:0; font-size:13px; line-height:1.6; color:var(--sc-ink); }
.sc-takeaway b{ color:var(--sc-cyan); font-weight:600; }
.sc-foot{ padding:0 28px 22px; font-size:10.5px; color:var(--sc-dim); letter-spacing:.04em; line-height:1.6; }
@media (max-width:640px){
  .sc-panels{ grid-template-columns:1fr; }
  .sc-head,.sc-control,.sc-chart-wrap,.sc-takeaway,.sc-foot{ padding-left:20px; padding-right:20px; }
  .sc-panel{ padding-left:20px; padding-right:20px; }
}
@media (prefers-reduced-motion:reduce){
  .sc-ballot{ animation:none; }
  .sc-line-std,.sc-line-exp,.sc-acc,.sc-mk{ transition:none !important; }
}

/* ========== Reading the Judges widget ========== */
.rj-widget{
  --rj-bg:#0a0b0d; --rj-panel:#101216; --rj-panel2:#14171c;
  --rj-line:rgba(236,233,223,.10); --rj-line2:rgba(236,233,223,.20);
  --rj-ink:#ece9e3; --rj-dim:#7c828b; --rj-dim2:#6b7280;
  --rj-cyan:#4fe3ff; --rj-cyan-dim:rgba(79,227,255,.12);
  --rj-orange:#ff6a3a; --rj-orange-dim:rgba(255,106,58,.12);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  color:var(--rj-ink); background:var(--rj-bg); border:1px solid var(--rj-line2);
  margin-top:24px; position:relative; overflow:hidden; -webkit-font-smoothing:antialiased;
}
.rj-widget *{ box-sizing:border-box; }
.rj-grain{ position:absolute; inset:0; pointer-events:none; z-index:6; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.rj-head{ padding:26px 28px 0; }
.rj-eyebrow{ display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.18em; color:var(--rj-dim); text-transform:uppercase; }
.rj-eyebrow .rj-plus{ color:var(--rj-orange); }
.rj-eyebrow b{ color:var(--rj-cyan); font-weight:600; }
.rj-title{ font-family:'Archivo Black',sans-serif; font-weight:400; font-size:clamp(24px,4vw,40px); line-height:.98; letter-spacing:-.01em; margin:16px 0 0; text-transform:uppercase; }
.rj-deck{ margin:12px 0 0; max-width:64ch; font-size:13.5px; line-height:1.6; color:var(--rj-dim); }
.rj-deck em{ color:var(--rj-ink); font-style:normal; }
.rj-q{ margin:22px 28px 0; border:1px solid var(--rj-line); background:var(--rj-panel2); padding:14px 16px; font-size:13px; }
.rj-q span{ color:var(--rj-dim); letter-spacing:.1em; text-transform:uppercase; font-size:10px; margin-right:10px; }
.rj-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rj-line); margin:20px 0 0; border-top:1px solid var(--rj-line); border-bottom:1px solid var(--rj-line); }
.rj-card{ background:var(--rj-panel); padding:20px 22px 22px; position:relative; transition:background .25s; }
.rj-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.rj-card-name{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--rj-dim); }
.rj-truth{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border:1px solid; display:inline-flex; align-items:center; gap:5px; }
.rj-truth--ok{ color:var(--rj-cyan); border-color:rgba(79,227,255,.4); }
.rj-truth--no{ color:var(--rj-orange); border-color:rgba(255,106,58,.4); }
.rj-ans{ font-size:12.5px; line-height:1.6; color:var(--rj-ink); min-height:128px; transition:opacity .16s; }
.rj-ans .rj-h{ display:block; color:var(--rj-cyan); font-weight:600; margin-bottom:4px; }
.rj-ans .rj-bullet{ display:block; padding-left:14px; position:relative; }
.rj-ans .rj-bullet::before{ content:"\2022"; position:absolute; left:2px; color:var(--rj-dim); }
.rj-ans .rj-cite{ color:var(--rj-dim2); }
.rj-ans.is-fade{ opacity:0; }
.rj-score{ margin-top:18px; }
.rj-score-row{ display:flex; align-items:baseline; justify-content:space-between; }
.rj-score-l{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--rj-dim); }
.rj-score-n{ font-family:'Archivo Black',sans-serif; font-size:38px; line-height:.8; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--rj-ink); }
.rj-score-n small{ font-size:15px; color:var(--rj-dim); }
.rj-bar{ height:4px; background:var(--rj-line2); margin-top:12px; position:relative; overflow:hidden; }
.rj-bar-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--rj-dim); transition:background .35s ease; }
.rj-card--pick-bad{ box-shadow:inset 0 0 0 1px var(--rj-orange); background:var(--rj-panel2); }
.rj-card--pick-bad .rj-score-n{ color:var(--rj-orange); }
.rj-card--pick-bad .rj-bar-fill{ background:var(--rj-orange); }
.rj-card--pick-good{ box-shadow:inset 0 0 0 1px var(--rj-cyan); background:var(--rj-panel2); }
.rj-card--pick-good .rj-score-n{ color:var(--rj-cyan); }
.rj-card--pick-good .rj-bar-fill{ background:var(--rj-cyan); }
.rj-pick-tag{ position:absolute; top:0; right:0; color:var(--rj-bg); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; font-weight:600; opacity:0; transform:translateY(-3px); transition:.2s; }
.rj-card--pick-bad .rj-pick-tag{ background:var(--rj-orange); opacity:1; transform:none; }
.rj-card--pick-good .rj-pick-tag{ background:var(--rj-cyan); opacity:1; transform:none; }
.rj-ctrl{ padding:22px 28px 0; }
.rj-ctrl-l{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--rj-dim); margin-bottom:12px; }
.rj-ctrl-l b{ color:var(--rj-orange); font-weight:500; }
.rj-toggles{ display:flex; flex-wrap:wrap; gap:8px; }
.rj-tog{ font-family:inherit; font-size:12px; color:var(--rj-dim); background:transparent; border:1px solid var(--rj-line2); padding:8px 13px; cursor:pointer; transition:.15s; letter-spacing:.02em; display:inline-flex; align-items:center; gap:8px; }
.rj-tog::before{ content:"+"; color:var(--rj-dim2); font-weight:600; }
.rj-tog:hover{ color:var(--rj-ink); border-color:var(--rj-ink); }
.rj-tog.is-on{ color:var(--rj-cyan); border-color:var(--rj-cyan); background:var(--rj-cyan-dim); }
.rj-tog.is-on::before{ content:"\2713"; color:var(--rj-cyan); }
.rj-tog:focus-visible{ outline:2px solid var(--rj-cyan); outline-offset:2px; }
.rj-verdict{ margin:22px 28px 0; border:1px solid var(--rj-line2); overflow:hidden; transition:border-color .3s; }
.rj-verdict-in{ padding:16px 18px; display:flex; align-items:center; gap:14px; font-size:13px; }
.rj-verdict.is-fooled{ border-color:var(--rj-orange); background:var(--rj-orange-dim); }
.rj-verdict.is-fair{ border-color:rgba(79,227,255,.4); background:var(--rj-cyan-dim); }
.rj-verdict-mark{ flex:none; font-size:16px; }
.rj-verdict.is-fooled .rj-verdict-mark{ color:var(--rj-orange); }
.rj-verdict.is-fair .rj-verdict-mark{ color:var(--rj-cyan); }
.rj-verdict p{ margin:0; line-height:1.5; }
.rj-verdict b{ color:var(--rj-ink); }
.rj-verdict .hl-bad{ color:var(--rj-orange); font-weight:600; }
.rj-foot{ padding:18px 28px 26px; font-size:10.5px; color:var(--rj-dim2); letter-spacing:.04em; line-height:1.6; display:flex; gap:14px; align-items:flex-start; }
.rj-foot a{ color:var(--rj-cyan); text-decoration:none; border-bottom:1px solid transparent; }
.rj-foot a:hover{ border-bottom-color:var(--rj-cyan); }
@media (max-width:680px){
  .rj-cards{ grid-template-columns:1fr; }
  .rj-head,.rj-ctrl,.rj-foot{ padding-left:20px; padding-right:20px; }
  .rj-q,.rj-verdict{ margin-left:20px; margin-right:20px; }
  .rj-card{ padding-left:20px; padding-right:20px; }
  .rj-ans{ min-height:0; }
}
@media (prefers-reduced-motion:reduce){
  .rj-bar-fill,.rj-ans,.rj-pick-tag,.rj-verdict{ transition:none; }
}

/* Footer */
.pf-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 32px 5vw; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pf-footer-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.pf-footer-links a { color: var(--muted); transition: color var(--dur-fast) linear; }
.pf-footer-links a:hover { color: var(--ink); }

/* Scroll reveal — initial state; GSAP animates to visible */
.reveal { opacity: 0; transform: translateY(26px); }

/* ---------- Custom cursor ---------- */
.cursor-dot {
  position: fixed; z-index: 9998; pointer-events: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink); transform: translate(-50%, -50%);
  top: 0; left: 0;
}
.cursor-ring {
  position: fixed; z-index: 9997; pointer-events: none;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--ink); transform: translate(-50%, -50%);
  top: 0; left: 0; mix-blend-mode: difference;
  display: flex; align-items: center; justify-content: center;
  transition: scale 0.2s var(--ease-out), border-color 0.15s ease;
}
.cursor-ring.is-expand {
  scale: 1.857; border-color: var(--cursor-accent, var(--cyan));
}
.cursor-ring.is-link {
  scale: 1.5;
}
.cursor-label {
  font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink); opacity: 0;
  transition: opacity 0.15s ease;
}
.cursor-ring.is-expand .cursor-label,
.cursor-ring.is-link .cursor-label { opacity: 1; }

/* ---------- Link underline draw (pointer: fine only) ---------- */
@media (pointer: fine) {
  .nav-links a::after,
  .pf-footer-links a::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    width: 0; height: 1px; background: currentColor;
    transition: width 0.2s ease;
  }
  .nav-links a:hover::after,
  .pf-footer-links a:hover::after { width: 100%; }
  .pf-footer-links a { position: relative; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links { gap: 18px; }
  .pf-show { grid-template-columns: 1fr; }
  .pf-show--flip .pf-show-copy { order: 1; }
  .pf-show--flip .pf-show-viz { order: 2; border-right: none; border-top: 1px solid var(--line-strong); }
  .pf-show-viz { border-left: none; border-top: 1px solid var(--line-strong); min-height: 240px; }
  .pf-show-copy { padding: 30px 26px; }
  .pf-oss-grid { grid-template-columns: 1fr; }
  .pf-stats { grid-template-columns: repeat(2,1fr); }
  .pf-bigstat:nth-child(2) { border-right: none; }
  .pf-bigstat:nth-child(1), .pf-bigstat:nth-child(2) { border-bottom: 1px solid var(--line-strong); }
  .hero-corner { display: none; }
  .scroll-cue { display: none; }
}
@media (max-width: 560px) {
  .nav-links { display: none; }
  .pf-stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Kill all transitions and animations globally */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Hero elements immediately visible */
  .pf-hero-name, .pf-hero-status, .pf-kicker-line,
  .hero-corner, .pf-hero-meta span,
  .pf-contact-title { opacity: 1 !important; transform: none !important; }
  /* All reveals visible */
  .reveal { opacity: 1 !important; transform: none !important; }
  .pf-show, .pf-oss-card, .ptable tbody tr, .pf-stat { opacity: 1 !important; transform: none !important; }
  /* Pulse animations off */
  .pf-avail-dot { animation: none; }
  .hero-cursor { animation: none; }
  /* Marquee paused */
  .marquee-track { animation-play-state: paused; }
  /* Scroll cue hidden */
  .scroll-cue { display: none; }
  /* Cursor ring off */
  .cursor-dot, .cursor-ring { display: none; }
  /* WebGL canvases hidden -- static gradient background takes over */
  .pf-hero-canvas, .hero-3d-canvas, .contact-canvas { display: none !important; }
}

/* ---------- Hover-only effects (touch devices get no sticky states) ---------- */
@media (hover: none) {
  .pf-oss-card:hover { border-color: var(--line-strong); }
  .st-photo-wrap:hover .st-photo { filter: grayscale(0.8) contrast(1.05); transform: none; }
  .st-photo-wrap:hover .st-corner { transform: none; }
}

/* ========== Who I Am (Story) section ========== */
.pf-story {
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 65% 0%, rgba(255,92,0,0.05), transparent 55%),
    radial-gradient(60% 50% at 0% 100%, rgba(0,240,255,0.04), transparent 50%),
    var(--surface);
}

/* Faint background "06" watermark */
.st-bg-glyph {
  position: absolute;
  right: -0.04em;
  bottom: -0.12em;
  font-family: var(--font-display);
  font-size: clamp(200px, 30vw, 440px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-bright);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Vertical accent rail in left margin */
.st-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(2.5vw - 0.5px);
  width: 1px;
  background: var(--line-bright);
  z-index: 1;
  pointer-events: none;
}
.st-rail-label {
  position: absolute;
  top: 13vh;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}

/* Asymmetric editorial two-column grid */
.st-grid {
  display: grid;
  grid-template-columns: 1fr 44%;
  gap: 0 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ---- Left cluster ---- */
.st-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Eyebrow */
.st-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}
.st-tick {
  display: inline-block;
  width: 3px;
  height: 20px;
  background: var(--orange);
  flex-shrink: 0;
}
.st-ey-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--orange);
}
.st-ey-sep {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.st-ey-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Headline: two-part, tight leading, accent on second part */
.st-head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.8vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 40px;
}
.st-head-main {
  display: block;
  color: var(--ink);
}
.st-head-accent {
  display: block;
  color: var(--cyan);
  margin-top: 0.06em;
}

/* Terminal subcopy: prompt glyph + blinking cursor */
.st-sub {
  display: flex;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  margin-bottom: 48px;
}
.st-prompt { color: var(--cyan); flex-shrink: 0; }
.st-cursor {
  color: var(--cyan);
  animation: cursor-blink 1.1s step-end infinite;
  margin-left: 2px;
}

/* CTA: sweep fill from left, arrow slides right */
.pf-story-btn {
  position: relative;
  overflow: hidden;
  color: var(--cyan);
  border-color: var(--cyan);
  background: transparent;
  padding: 14px 32px;
  font-size: 12px;
  letter-spacing: 0.22em;
  transition: color 0.28s var(--ease-out);
}
.pf-story-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--ease-out);
  z-index: 0;
}
.pf-story-btn:hover,
.pf-story-btn:focus-visible {
  color: #000;
  box-shadow: 0 0 28px -4px rgba(0,240,255,0.55);
}
.pf-story-btn:hover::before,
.pf-story-btn:focus-visible::before { transform: scaleX(1); }
.pf-story-btn-text,
.pf-story-btn-arrow { position: relative; z-index: 1; }
.pf-story-btn-arrow {
  display: inline-block;
  transition: transform 0.28s var(--ease-out);
}
.pf-story-btn:hover .pf-story-btn-arrow,
.pf-story-btn:focus-visible .pf-story-btn-arrow { transform: translateX(7px); }

/* ---- Right: photo panel ---- */
.st-right { align-self: center; }

.st-figure { display: flex; flex-direction: column; gap: 14px; margin: 0; }

.st-photo-wrap {
  position: relative;
  border: 1px solid var(--cyan-line);
  border-radius: 2px;
  overflow: hidden;
}

.st-photo-link { display: block; overflow: hidden; }

.st-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(0.8) contrast(1.05);
  transition: transform 0.55s ease;
}
.st-photo-wrap:hover .st-photo,
.st-photo-wrap:focus-within .st-photo {
  filter: grayscale(0) contrast(1);
  transform: scale(1.04);
}

/* Corner brackets */
.st-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--cyan);
  border-style: solid;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.3s var(--ease-out);
}
.st-corner--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; transform-origin: top left; }
.st-corner--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; transform-origin: top right; }
.st-corner--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; transform-origin: bottom left; }
.st-corner--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; transform-origin: bottom right; }
.st-photo-wrap:hover .st-corner,
.st-photo-wrap:focus-within .st-corner {
  transform: scale(1.571);
}

/* Figure caption */
.st-caption {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-cap-label { color: var(--cyan); }
.st-cap-sep { color: var(--faint); }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .st-grid {
    grid-template-columns: 1fr;
    gap: 52px 0;
  }
  .st-right { order: -1; }
  .st-bg-glyph { display: none; }
  .st-rail { display: none; }
}
@media (max-width: 560px) {
  .st-head { font-size: clamp(30px, 7.5vw, 48px); }
  .st-sub { font-size: 12px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .pf-story-btn::before { transition: none; }
  .pf-story-btn-arrow { transition: none; }
  .st-photo { transition: none; filter: grayscale(0); }
  .st-corner { transition: none; }
  .st-cursor { animation: none; }
}

/* ---------- Focus visible ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #4fe3ff;
  outline-offset: 3px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ── GARAK BEDROCK WIDGET ──────────────────────────────────────── */
.ga-widget {
  --ga-bg: #08080b; --ga-panel: #0b0b0f; --ga-ink: #e8e6e1;
  --ga-dim: #8e8e95; --ga-dim2: #5c5c63;
  --ga-line: #17171b; --ga-line2: #232329;
  --ga-cyan: #00f0ff; --ga-cyan-dim: rgba(0,240,255,.07);
  --ga-orange: #ff5c00;
  --ga-err: #f87171; --ga-err-dim: rgba(248,113,113,.1);
  --ga-ok: #4ade80; --ga-ok-dim: rgba(74,222,128,.1);
  --ga-k: #7dffc8; --ga-s: #7ec8ff; --ga-n: #ffd07a; --ga-p: #8e8e95; --ga-ann: #00f0ff;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ga-ink); background: var(--ga-bg);
  border: 1px solid var(--ga-line2);
  margin-top: 20px; position: relative; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.ga-widget * { box-sizing: border-box; }
.ga-grain { position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Head */
.ga-head { padding: 26px 28px 0; }
.ga-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 11px; letter-spacing: .18em; color: var(--ga-dim); text-transform: uppercase; margin-bottom: 0; }
.ga-plus { color: var(--ga-orange); }
.ga-eyebrow b { color: var(--ga-cyan); font-weight: 600; text-transform: none; letter-spacing: 0; }
.ga-pill { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ga-dim); border: 1px solid var(--ga-line2); padding: 2px 9px; border-radius: 999px; }
.ga-pill--accent { color: var(--ga-cyan); border-color: var(--ga-cyan); background: var(--ga-cyan-dim); }
.ga-title { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: clamp(20px, 3vw, 34px); line-height: .97; letter-spacing: -.01em; margin: 16px 0 0; text-transform: uppercase; color: var(--ga-ink); }
.ga-deck { margin: 12px 0 0; max-width: 74ch; font-size: 13px; line-height: 1.65; color: var(--ga-dim); }
.ga-deck code { color: var(--ga-cyan); background: var(--ga-cyan-dim); padding: 1px 5px; border-radius: 2px; font-family: inherit; font-size: inherit; }

/* Stage — two panels side by side */
.ga-stage { padding: 22px 28px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.ga-pane { display: flex; flex-direction: column; gap: 10px; }
.ga-pane-head { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ga-dim2); display: flex; align-items: center; gap: 8px; }
.ga-pane-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; transition: background .35s ease; }
.ga-pane-dot--err { background: var(--ga-err); }
.ga-pane-dot--ok  { background: var(--ga-ok); }

/* Request JSON panel */
.ga-req { margin: 0; padding: 18px; background: var(--ga-panel); border: 1px solid var(--ga-line2); font-size: 12px; line-height: 1.65; overflow-x: auto; white-space: pre; }
.ga-ln { display: block; }
.ga-ln--topp { overflow: hidden; max-height: 1.65em; opacity: 1; transition: opacity .25s ease; }
.ga-ln--ann  { overflow: hidden; max-height: 0; opacity: 0; transition: opacity .28s ease .06s; }
.ga-req.is-applied .ga-ln--topp { max-height: 0; opacity: 0; }
.ga-req.is-applied .ga-ln--ann  { max-height: 1.65em; opacity: 1; }
/* Syntax tokens */
.ga-k { color: var(--ga-k); }
.ga-s { color: var(--ga-s); }
.ga-n { color: var(--ga-n); }
.ga-p { color: var(--ga-p); }
.ga-ann { color: var(--ga-ann); }

/* Response panel */
.ga-res { position: relative; overflow: hidden; background: var(--ga-panel); border: 1px solid var(--ga-line2); padding: 18px; min-height: 130px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ga-res-sweep { position: absolute; left: 0; right: 0; top: 0; height: 52px; pointer-events: none; z-index: 3; opacity: 0;
  background: linear-gradient(180deg, rgba(0,240,255,.3), rgba(0,240,255,.04) 60%, transparent); }
.ga-res.is-scanning .ga-res-sweep { animation: ga-scan .65s ease-out forwards; }
@keyframes ga-scan { 0% { opacity: 1; transform: translateY(-52px); } 100% { opacity: 0; transform: translateY(300px); } }
.ga-res-err { display: flex; flex-direction: column; gap: 10px; transition: opacity .22s ease; }
.ga-res-ok  { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .38s ease .18s; }
.ga-res.is-ok .ga-res-err { opacity: 0; pointer-events: none; }
.ga-res.is-ok .ga-res-ok  { opacity: 1; pointer-events: auto; }
.ga-status { display: inline-block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; padding: 3px 10px; border-radius: 2px; }
.ga-status--err { color: var(--ga-err); background: var(--ga-err-dim); border: 1px solid rgba(248,113,113,.25); }
.ga-status--ok  { color: var(--ga-ok);  background: var(--ga-ok-dim);  border: 1px solid rgba(74,222,128,.25); }
.ga-err-msg  { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ga-dim); max-width: 40ch; }
.ga-res-body { margin: 0; font-size: 12px; line-height: 1.65; color: var(--ga-ink); white-space: pre; }

/* Action row */
.ga-action { padding: 20px 28px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ga-btn { font-family: inherit; font-size: 13px; letter-spacing: .04em; padding: 10px 20px; cursor: pointer; font-weight: 600; border: 1px solid; transition: .15s; }
.ga-btn--apply { color: #0c0c0f; background: var(--ga-orange); border-color: var(--ga-orange); }
.ga-btn--apply:hover { background: #ff7733; border-color: #ff7733; }
.ga-btn--reset { color: var(--ga-cyan); background: transparent; border-color: var(--ga-cyan); }
.ga-btn--reset:hover { background: var(--ga-cyan-dim); }
.ga-btn:focus-visible { outline: 2px solid var(--ga-cyan); outline-offset: 3px; }
.ga-note { font-size: 11px; color: var(--ga-dim); letter-spacing: .02em; }

/* Footer note */
.ga-footer { margin: 22px 0 0; padding: 18px 28px 26px; border-top: 1px solid var(--ga-line); display: flex; gap: 14px; align-items: flex-start; }
.ga-footer-mark { color: var(--ga-cyan); font-size: 13px; flex: none; line-height: 1.5; }
.ga-footer p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--ga-dim); }
.ga-footer b { color: var(--ga-ink); font-weight: 500; }
.ga-footer a { color: var(--ga-cyan); text-decoration: none; border-bottom: 1px solid transparent; transition: .15s; }
.ga-footer a:hover { border-bottom-color: var(--ga-cyan); }

/* Responsive */
@media (max-width: 660px) {
  .ga-stage { grid-template-columns: 1fr; }
  .ga-head, .ga-stage, .ga-action, .ga-footer { padding-left: 20px; padding-right: 20px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ga-ln--topp, .ga-ln--ann, .ga-res-err, .ga-res-ok, .ga-pane-dot { transition: none; }
  .ga-res.is-scanning .ga-res-sweep { animation: none; }
}

/* ── CONTRIBUTION TABLE FIXES ──────────────────────────────────── */
.ptable { table-layout: fixed; }
.ptable-col--num  { width: 3.2rem; }
.ptable-col--cat  { width: 260px; }
.ptable-col--ref  { width: 160px; }
.ptable .c-note   { text-align: right; padding-right: 20px; white-space: nowrap; }
.ptable thead th:last-child { text-align: right; padding-right: 20px; }

/* ── PER-CARD ACCENT: extend --pa to title, role chip, tags, CTA ─ */
.pf-show .pf-show-title { color: var(--pa); }
.pf-show .pf-show-role span { color: var(--pa); border-color: var(--pa-line); }
.pf-show .tag { color: var(--pa); border-color: var(--pa-line); }
.pf-show .btn--primary { background: var(--pa); border-color: var(--pa); color: #0c0c0f; }
.pf-show .btn--primary:hover { background: var(--pa); border-color: var(--pa); box-shadow: 0 0 14px -2px var(--pa); }
.pf-show .btn--secondary { color: var(--pa); border-color: var(--pa-line); }
.pf-show .btn--secondary:hover { color: var(--pa); border-color: var(--pa); box-shadow: 0 0 10px -2px var(--pa); }