/* ===== QUINE ===== */

:root {
  --void: #080616;
  --deep: #100c28;
  --panel: rgba(24, 19, 56, 0.66);
  --panel-solid: #161236;
  --line: rgba(170, 160, 255, 0.16);
  --line-strong: rgba(190, 180, 255, 0.3);
  --ink: #f2f0ff;
  --soft: #aaa5d8;
  --faint: #7a75a8;

  --red: #f25022;
  --green: #7fba00;
  --blue: #00a4ef;
  --yellow: #ffb900;

  --classical: #2fc7ff;
  --basal: #ff6a2b;
  --third: #b067ff;

  --spectrum: linear-gradient(90deg, #ff4d2e, #ff9f1c 18%, #ffd60a 34%, #3ddc84 50%, #19c3f5 66%, #4d7cff 82%, #a259ff);

  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --max: 1180px;
  --nav-h: 64px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(255, 120, 40, 0.14), transparent 60%),
    radial-gradient(900px 600px at 0% 20%, rgba(90, 70, 255, 0.16), transparent 60%),
    radial-gradient(900px 700px at 100% 70%, rgba(170, 70, 255, 0.1), transparent 60%),
    var(--void);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid #19c3f5;
  outline-offset: 3px;
  border-radius: 6px;
}

.defs { position: absolute; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ===== Buttons ===== */

.btn {
  --h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--h);
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-small { --h: 40px; padding: 0 16px; font-size: 14px; }
.btn-wide { width: 100%; }

.btn-light { background: var(--ink); color: #120e2e; }
.btn-light:hover { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); }

.btn-ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(220, 215, 255, 0.5); }

.btn-spectrum {
  position: relative;
  color: #fff;
  background:
    linear-gradient(var(--deep), var(--deep)) padding-box,
    var(--spectrum) border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 24px rgba(120, 90, 255, 0.28);
}
.btn-spectrum:hover { box-shadow: 0 0 34px rgba(255, 140, 60, 0.3), 0 0 22px rgba(80, 160, 255, 0.3); }

.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ===== Nav ===== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(8, 6, 22, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--max);
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.04em;
}
.brand img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; box-shadow: 0 0 0 1px var(--line-strong); }
.nav-links { display: flex; gap: 6px; margin-left: auto; }
.nav-links a {
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--soft);
  font-weight: 600;
  font-size: 15px;
  transition: color 0.2s, background-color 0.2s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }

/* ===== Hero / details ===== */

.hero { padding: 24px 20px 8px; }
.hero-inner { max-width: var(--max); margin: 0 auto; }

.banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1278 / 426;
  background: var(--deep);
  box-shadow: 0 30px 80px -30px rgba(120, 60, 255, 0.45), 0 0 0 1px var(--line);
}
.banner img { width: 100%; height: 100%; object-fit: cover; }
.banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--spectrum);
}

.profile {
  --overlap: 64px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 0 24px;
  margin-top: calc(var(--overlap) * -1);
  position: relative;
}
.avatar {
  width: 148px;
  height: 148px;
  border-radius: 28px;
  object-fit: cover;
  border: 4px solid var(--void);
  box-shadow: 0 0 0 1px var(--line-strong), 0 18px 40px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  background: var(--deep);
}
.identity { flex: 1; min-width: 0; padding-top: calc(var(--overlap) + 14px); }

.wordmark { margin: 0; line-height: 0; }
.wordmark svg { width: min(360px, 100%); height: auto; overflow: visible; }
.wordmark text {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 118px;
  letter-spacing: 4px;
  fill: none;
}
.wm-line {
  stroke: url(#spectrum);
  stroke-width: 4;
  stroke-dasharray: 26 6;
  stroke-linejoin: round;
  animation: march 6s linear infinite;
}
.wm-glow {
  stroke: url(#spectrum);
  stroke-width: 10;
  opacity: 0.28;
  filter: blur(6px);
}
@keyframes march { to { stroke-dashoffset: -320; } }

.ticker {
  margin: 8px 0 0;
  color: var(--soft);
  font-weight: 600;
  font-size: 15px;
}
.ticker span { color: var(--ink); }

.socials { display: flex; gap: 10px; }
.profile .socials { padding-top: calc(var(--overlap) + 22px); }
.social {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #000;
  border: 1px solid var(--line-strong);
  color: #fff;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.social svg { width: 20px; height: 20px; }
.social-img img { width: 100%; height: 100%; object-fit: cover; }
.social[data-link="pons"] { background: #1a1f1b; }
.social[data-link="pons"] img { object-fit: contain; padding: 6px; }
.social:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 22px rgba(90, 120, 255, 0.35);
}

.hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin-top: 28px;
  padding: 0 24px;
}
.lede {
  margin: 0 0 22px;
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.65;
  color: #d9d6f6;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ca-card {
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ca-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ca-label { font-weight: 700; font-size: 14px; }
.ca-chain {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  color: #cfeee0;
  background: rgba(61, 220, 132, 0.12);
  border: 1px solid rgba(61, 220, 132, 0.3);
}
.ca-copy {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  text-align: left;
  transition: border-color 0.2s;
}
.ca-copy:hover { border-color: var(--line-strong); }
.ca-copy code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: #e6e3ff;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.ca-state {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #120e2e;
  font-size: 13px;
  font-weight: 800;
  transition: background-color 0.2s, color 0.2s;
}
.ca-copy.copied .ca-state { background: #3ddc84; color: #06240f; }

.brief {
  list-style: none;
  margin: 32px 0 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.brief li {
  padding: 18px 20px 6px 0;
  color: var(--soft);
  font-size: 14.5px;
  line-height: 1.55;
}
.brief li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.brief strong { color: var(--ink); font-weight: 700; }

/* ===== Sections ===== */

.section { padding: 72px 20px; }
.section-inner { max-width: var(--max); margin: 0 auto; }
.section-title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.section-sub { margin: 0 0 28px; color: var(--soft); max-width: 62ch; font-size: 16.5px; }

/* ===== PFP ===== */

.pfp { padding-top: 56px; }
.pfp-head { margin-bottom: 28px; }
.pfp-head .section-sub { margin-bottom: 0; }
.pfp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.pfp-stage { position: relative; }
#pfpCanvas {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: var(--radius-lg);
  background: var(--deep);
  box-shadow: 0 0 0 1px var(--line), 0 30px 70px -20px rgba(110, 70, 255, 0.45);
  touch-action: none;
  cursor: grab;
}
#pfpCanvas.dragging { cursor: grabbing; }
.pfp-hint { text-align: center; margin: 12px 0 0; font-size: 13.5px; color: var(--faint); }

.pfp-panel {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
}
.pfp-source { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 2px solid #19c3f5; outline-offset: 3px; }

.control { margin: 0 0 20px; padding: 0; border: 0; }
.control legend { font-weight: 700; font-size: 14px; margin-bottom: 10px; padding: 0; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.swatches button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--soft);
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.swatches button[aria-checked="true"] { border-color: rgba(255, 255, 255, 0.7); color: var(--ink); background: rgba(255, 255, 255, 0.07); }
.sw { width: 30px; height: 30px; border-radius: 50%; display: block; }
.sw-spectrum { background: conic-gradient(#ff4d2e, #ffd60a, #3ddc84, #19c3f5, #4d7cff, #a259ff, #ff4d2e); }
.sw-classical { background: radial-gradient(circle at 35% 35%, #bff2ff, #2fc7ff 45%, #102a7a); }
.sw-basal { background: radial-gradient(circle at 35% 35%, #ffe0b0, #ff6a2b 45%, #6a0f1c); }
.sw-third { background: radial-gradient(circle at 35% 35%, #d6ffe8, #b067ff 50%, #2a0c5e); }

.sliders { display: grid; gap: 14px; }
.sliders label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  outline-offset: 6px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #5b4dff;
  box-shadow: 0 0 12px rgba(120, 100, 255, 0.6);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #5b4dff;
}

.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle { position: relative; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--soft);
  cursor: pointer;
  transition: all 0.2s;
}
.toggle span::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--faint);
  transition: all 0.2s;
}
.toggle input:checked + span { color: var(--ink); border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); }
.toggle input:checked + span::before { background: #3ddc84; border-color: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.toggle input:focus-visible + span { outline: 2px solid #19c3f5; outline-offset: 3px; }

/* ===== Explorer ===== */

.tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 1 0 auto;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--soft);
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--ink); color: #120e2e; }

.panel {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
}
.panel[hidden] { display: none; }
.panel h3 { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; margin: 0 0 10px; }
.panel p { color: #d3d0f0; }

.ask-link {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 700;
  font-size: 14px;
  transition: background-color 0.2s, border-color 0.2s;
}
.ask-link::before {
  content: "";
  width: 22px; height: 22px;
  border-radius: 6px;
  background: url("/public/images/logo-mark.jpg") center / cover;
}
.ask-link:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.5); }

/* The system */
.loop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.loop-figure svg { width: 100%; max-width: 480px; margin: 0 auto; display: block; overflow: visible; }
.loop-track { fill: none; stroke: var(--line); stroke-width: 2; }
.loop-flow {
  fill: none;
  stroke-width: 4;
  stroke-dasharray: 120 822;
  stroke-linecap: round;
  transform-origin: 200px 200px;
  animation: orbit 8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(120, 160, 255, 0.8));
}
@keyframes orbit { to { transform: rotate(360deg); } }
.loop-core { fill: #1a1540; stroke: var(--line-strong); }
.loop-core-title { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 26px; fill: var(--ink); text-anchor: middle; }
.loop-core-sub { font-size: 13px; fill: var(--soft); text-anchor: middle; font-family: var(--body); font-weight: 600; }
.loop-node { cursor: pointer; }
.loop-node circle { fill: #120e2e; stroke: var(--line-strong); stroke-width: 2; transition: all 0.25s; }
.loop-node text { font-family: var(--display); font-weight: 700; font-size: 20px; text-anchor: middle; dominant-baseline: central; fill: var(--soft); pointer-events: none; }
.loop-node .node-label { font-family: var(--body); font-size: 19px; font-weight: 700; fill: var(--soft); }
.loop-node:hover circle { stroke: #fff; }
.loop-node.active circle { fill: var(--ink); stroke: #fff; filter: drop-shadow(0 0 10px rgba(160, 140, 255, 0.9)); }
.loop-node.active text:not(.node-label) { fill: #120e2e; }
.loop-node.active .node-label { fill: var(--ink); }
.loop-node:focus-visible { outline: none; }
.loop-node:focus-visible circle { stroke: #19c3f5; stroke-width: 3; }

.step-count { margin: 0 0 6px; color: var(--faint) !important; font-weight: 700; font-size: 14px; }
.loop-detail h3 { font-size: 26px; }
#loopText { min-height: 5.5em; }
.loop-nav { display: flex; gap: 10px; flex-wrap: wrap; }

.parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.parts article { padding-left: 16px; border-left: 3px solid; }
.parts article:nth-child(1) { border-color: var(--red); }
.parts article:nth-child(2) { border-color: var(--green); }
.parts article:nth-child(3) { border-color: var(--blue); }
.parts h3 { font-size: 18px; margin-bottom: 6px; }
.parts p { margin: 0; font-size: 15px; color: var(--soft); }

/* World model */
#panel-model:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; }
.scale-head, .scale-row { display: grid; grid-template-columns: 150px repeat(4, 1fr); align-items: center; }
.scale-head span { font-size: 12.5px; font-weight: 700; color: var(--faint); text-align: center; padding-bottom: 10px; }
.scale-rows { display: grid; gap: 6px; }
.scale-row {
  width: 100%;
  padding: 6px 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  position: relative;
  background-image: linear-gradient(90deg, transparent 150px, rgba(255,255,255,0.03) 150px);
  transition: background-color 0.2s;
}
.scale-row:hover { background-color: rgba(255, 255, 255, 0.04); }
.scale-row .row-name { font-weight: 700; font-size: 14.5px; color: var(--soft); padding-left: 10px; }
.scale-row .bar {
  height: 26px;
  border-radius: 999px;
  margin: 0 6px;
  opacity: 0.55;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: opacity 0.25s, box-shadow 0.25s;
}
.scale-row[aria-pressed="true"] { background-color: rgba(255, 255, 255, 0.06); }
.scale-row[aria-pressed="true"] .row-name { color: var(--ink); }
.scale-row[aria-pressed="true"] .bar { opacity: 1; box-shadow: 0 0 18px var(--glow), inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.scale-note { font-size: 13.5px; color: var(--faint) !important; margin: 16px 0 0; }

.modality-detail {
  padding: 22px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  align-self: start;
}
.modality-detail h3 { display: flex; align-items: center; gap: 10px; }
.modality-detail h3 i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.modality-detail h4 { margin: 18px 0 8px; font-size: 14px; color: var(--soft); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags a, .tags span {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.tags a:hover { background: rgba(255, 255, 255, 0.08); }

/* Cancer study */
.cancer-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
#simCanvas {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  border-radius: var(--radius-md);
  background: radial-gradient(ellipse at 50% 40%, #1b1545, #0b0920);
  border: 1px solid var(--line);
}
.sim-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0; font-size: 14px; font-weight: 600; color: var(--soft); }
.sim-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sim-legend b { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 3ch; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-classical { background: var(--classical); box-shadow: 0 0 8px var(--classical); }
.dot-basal { background: var(--basal); box-shadow: 0 0 8px var(--basal); }
.dot-third { background: var(--third); box-shadow: 0 0 8px var(--third); }
.sim-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-status { margin: 14px 0 4px; font-weight: 600; min-height: 3.2em; }
.sim-note { margin: 0; font-size: 12.5px; color: var(--faint) !important; }

.findings p { margin-top: 0; }
.timeline { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: step; }
.timeline li {
  counter-increment: step;
  position: relative;
  padding: 0 0 16px 40px;
  color: var(--soft);
  font-size: 15px;
}
.timeline li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12.5px; top: 28px; bottom: 2px;
  width: 1px;
  background: var(--line-strong);
}
.timeline strong { color: var(--ink); }

/* Journey */
.years { display: grid; grid-template-columns: 220px repeat(6, 1fr); align-items: center; }
.j-bar-row { display: grid; grid-template-columns: 220px 1fr; align-items: center; }
.j-span-wrap { display: grid; grid-template-columns: repeat(6, 1fr); }
.j-years { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--faint); padding-left: 8px; }
.years span { font-size: 12.5px; color: var(--faint); font-weight: 700; text-align: center; padding-bottom: 10px; }
.j-item { border-top: 1px solid var(--line); }
.j-item:last-child { border-bottom: 1px solid var(--line); }
.j-toggle {
  width: 100%;
  padding: 14px 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.j-name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15.5px; padding-right: 10px; }
.j-name::before {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--soft);
  border-bottom: 2px solid var(--soft);
  transform: rotate(-45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.j-toggle[aria-expanded="true"] .j-name::before { transform: rotate(45deg); }
.j-span { height: 12px; border-radius: 999px; background: var(--spectrum); background-size: 600% 100%; margin: 0 4px; }
.j-body { padding: 4px 0 24px 20px; max-width: 900px; }
.j-body[hidden] { display: none; }
.j-body p { margin: 0 0 12px; }
.j-body ul { margin: 0 0 14px; padding-left: 20px; color: var(--soft); }
.j-body li { margin-bottom: 6px; }
.j-body .tags { margin-bottom: 4px; }

/* Papers */
.paper-tools { display: grid; gap: 14px; margin-bottom: 8px; }
.search input {
  width: 100%;
  height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, 0.3);
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
}
.search input:focus { border-color: #19c3f5; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--soft);
}
.chips button[aria-pressed="true"] { background: var(--ink); color: #120e2e; border-color: var(--ink); }
.paper-count { font-size: 13.5px; color: var(--faint) !important; margin: 8px 0; }
.papers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.paper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
}
.paper-line { font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; color: var(--soft); }
.paper-line i { width: 8px; height: 8px; border-radius: 2px; }
.paper h4 { margin: 0; font-size: 16px; line-height: 1.35; }
.paper p { margin: 0; font-size: 14px; color: var(--soft); }
.paper-actions { display: flex; gap: 8px; margin-top: auto; }
.paper-actions a, .paper-actions button {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.paper-actions a:hover, .paper-actions button:hover { background: rgba(255, 255, 255, 0.08); }
.papers-empty { color: var(--soft); padding: 20px 0; }

/* Fellows */
.fellows { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; }
.dates { margin: 20px 0 24px; display: grid; gap: 12px; }
.dates div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dates dt { font-weight: 700; color: var(--soft); font-size: 14px; }
.dates dd { margin: 0; font-weight: 600; }
.fellows-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fellows-areas { padding: 22px; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); align-self: start; }
.fellows-areas h4 { margin: 0 0 12px; font-size: 15px; }
.fellows-areas ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fellows-areas li { padding-left: 22px; position: relative; color: #d3d0f0; font-size: 15px; }
.fellows-areas li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 3px; }
.fellows-areas li:nth-child(4n+1)::before { background: var(--red); }
.fellows-areas li:nth-child(4n+2)::before { background: var(--green); }
.fellows-areas li:nth-child(4n+3)::before { background: var(--blue); }
.fellows-areas li:nth-child(4n+4)::before { background: var(--yellow); }

/* ===== Chat ===== */

.ask { padding-bottom: 96px; }
.chat {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 26px;
  padding: 2px;
  background: var(--spectrum);
  box-shadow: 0 40px 100px -40px rgba(120, 80, 255, 0.6);
}
.chat > * { background: var(--panel-solid); }
.chat-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 24px 24px 0 0;
  border-bottom: 1px solid var(--line);
}
.chat-head img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.chat-head div { flex: 1; min-width: 0; }
.chat-head h2 { margin: 0; font-family: var(--display); font-style: italic; font-size: 24px; line-height: 1.1; }
.chat-head p { margin: 2px 0 0; font-size: 13.5px; color: var(--soft); display: flex; align-items: center; gap: 8px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; flex-shrink: 0; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

.chat-log {
  height: min(62vh, 560px);
  min-height: 340px;
  overflow-y: auto;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.msg { display: flex; gap: 10px; max-width: 100%; }
.msg-user { justify-content: flex-end; }
.msg-avatar { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; object-fit: cover; margin-top: 2px; }
.bubble {
  max-width: min(88%, 680px);
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 15.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.msg-user .bubble { background: var(--ink); color: #120e2e; border-bottom-right-radius: 6px; white-space: pre-wrap; font-weight: 500; }
.msg-ai .bubble { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-top-left-radius: 6px; }
.msg-error .bubble { border-color: rgba(255, 90, 60, 0.5); background: rgba(255, 90, 60, 0.08); }

.bubble > :first-child { margin-top: 0; }
.bubble > :last-child { margin-bottom: 0; }
.bubble p { margin: 0 0 10px; }
.bubble h3, .bubble h4, .bubble h5 { font-family: var(--display); margin: 14px 0 6px; line-height: 1.25; }
.bubble h3 { font-size: 19px; }
.bubble h4 { font-size: 17px; }
.bubble h5 { font-size: 15.5px; }
.bubble ul, .bubble ol { margin: 0 0 10px; padding-left: 22px; }
.bubble li { margin-bottom: 4px; }
.bubble a { color: #7fd3ff; text-underline-offset: 3px; }
.bubble code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.4); }
.bubble pre { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.45); overflow-x: auto; }
.bubble pre code { padding: 0; background: none; font-size: 13.5px; }
.bubble blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--soft); }
.bubble hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.table-wrap { overflow-x: auto; margin: 0 0 10px; }
.bubble table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.bubble th, .bubble td { border: 1px solid var(--line-strong); padding: 6px 10px; text-align: left; vertical-align: top; }
.bubble th { background: rgba(255, 255, 255, 0.06); }

.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.sources a {
  max-width: 220px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sources a:hover { color: var(--ink); }

.msg-tools { display: flex; gap: 6px; margin-top: 8px; }
.msg-tools button {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--faint);
  font-size: 12.5px;
  font-weight: 700;
}
.msg-tools button:hover { color: var(--ink); border-color: var(--line-strong); }

.typing { display: inline-flex; gap: 5px; padding: 6px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; animation: bounce 1.2s infinite ease-in-out; }
.typing i:nth-child(1) { background: var(--red); }
.typing i:nth-child(2) { background: var(--green); animation-delay: 0.15s; }
.typing i:nth-child(3) { background: var(--blue); animation-delay: 0.3s; }
.typing i:nth-child(4) { background: var(--yellow); animation-delay: 0.45s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-6px); opacity: 1; } }

.suggestions {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--line);
}
.suggestions::-webkit-scrollbar { display: none; }
@media (min-width: 761px) {
  .suggestions { flex-wrap: wrap; overflow: visible; }
}
.suggestions[hidden] { display: none; }
.suggestions button {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s;
}
.suggestions button:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.5); }

.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px 16px;
  border-radius: 0 0 24px 24px;
  border-top: 1px solid var(--line);
}
.chat-form textarea {
  flex: 1;
  min-height: 50px;
  max-height: 180px;
  padding: 13px 16px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: rgba(0, 0, 0, 0.35);
  resize: none;
  font-size: 16px;
  line-height: 1.45;
  outline: none;
  transition: border-color 0.2s;
}
.chat-form textarea:focus { border-color: #19c3f5; }
.send {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 16px;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #120e2e;
  transition: transform 0.15s, opacity 0.2s;
}
.send svg { width: 22px; height: 22px; }
.send:active { transform: scale(0.95); }
.send[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ===== Footer ===== */

.footer { border-top: 1px solid var(--line); padding: 32px 20px calc(32px + env(safe-area-inset-bottom, 0px)); }
.footer-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: auto; }
.footer-links a { color: var(--soft); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.footer-links a:hover { color: var(--ink); }
.socials-small { padding: 0; }
.socials-small .social { width: 38px; height: 38px; }
.socials-small .social svg { width: 17px; height: 17px; }

/* ===== Floating AI button ===== */

.fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: var(--ink);
  color: #120e2e;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(120, 100, 255, 0.35);
  transition: opacity 0.25s, transform 0.25s;
}
.fab img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.fab.hide { opacity: 0; transform: translateY(20px); pointer-events: none; }

/* ===== Responsive ===== */

@media (max-width: 1020px) {
  .hero-body { grid-template-columns: 1fr; }
  .pfp-grid { grid-template-columns: 1fr; gap: 24px; }
  .loop-grid { grid-template-columns: 1fr; }
  #panel-model:not([hidden]) { grid-template-columns: 1fr; }
  .cancer-grid { grid-template-columns: 1fr; }
  .fellows { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --nav-h: 58px; }
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; padding: 0 16px; }
  .hero { padding: 14px 14px 0; }
  .banner { border-radius: 16px; }
  .profile { --overlap: 26px; flex-wrap: wrap; gap: 12px 16px; padding: 0 12px; }
  .avatar { width: 86px; height: 86px; border-radius: 20px; border-width: 3px; }
  .identity { flex: 1 1 160px; padding-top: calc(var(--overlap) + 6px); }
  .profile .socials { padding-top: 0; }
  .wordmark svg { width: min(230px, 100%); }
  .ticker { font-size: 13.5px; margin-top: 4px; }
  .socials { width: 100%; }
  .hero-body { padding: 0 12px; margin-top: 22px; gap: 22px; }
  .lede { font-size: 16.5px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .brief { grid-template-columns: 1fr; padding: 0 12px; margin-top: 24px; }
  .brief li, .brief li + li { padding: 14px 0; border-left: 0; }
  .brief li + li { border-top: 1px solid var(--line); }
  .section { padding: 56px 14px; }
  .pfp { padding-top: 44px; }
  .pfp-panel, .panel { padding: 20px; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
  .parts { grid-template-columns: 1fr; }
  .scale-head, .scale-row { grid-template-columns: 104px repeat(4, 1fr); }
  .scale-head span { font-size: 11px; }
  .scale-row { background-image: linear-gradient(90deg, transparent 104px, rgba(255,255,255,0.03) 104px); }
  .scale-row .row-name { font-size: 13px; padding-left: 6px; }
  .scale-row .bar { height: 22px; margin: 0 3px; }
  .years { display: none; }
  .j-bar-row { grid-template-columns: 1fr; gap: 10px; }
  .j-body { padding-left: 0; }
  .papers { grid-template-columns: 1fr; }
  .dates div { grid-template-columns: 1fr; gap: 2px; }
  .fellows-actions .btn { flex: 1 1 100%; }
  .chat { border-radius: 22px; }
  .chat-head { padding: 14px; border-radius: 20px 20px 0 0; }
  .chat-head h2 { font-size: 21px; }
  .chat-log { height: 64vh; padding: 16px 12px; }
  .bubble { max-width: 92%; font-size: 15px; }
  .msg-avatar { display: none; }
  .suggestions { padding: 10px 12px; }
  .chat-form { padding: 12px; border-radius: 0 0 20px 20px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-links { margin-left: 0; }
  .fab { display: inline-flex; }
}

@media (min-width: 761px) {
  .j-years { display: none; }
}

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