:root {
  --page-bg: #eef5f7;
  --panel: #f8fbfc;
  --panel-2: #edf5f7;
  --border: #d8e4e8;
  --text: #1f2933;
  --muted: #6a6b74;
  --soft: #7f6b58;
  --link: #0f5f70;
  --link-hover: #0b4855;
  --accent: #bf6d47;
  --blue: #2563eb;
  --shadow: 0 18px 55px rgba(61, 50, 38, 0.13);
  /* Tab-switcher pill. Mirrors the home page's .unified-page-tabs palette so the
     nav looks the same on every page; keep in sync with style.css if it changes. */
  --nav-pill-bg: rgba(255, 250, 243, 0.82);
  --nav-pill-shadow: 0 8px 24px rgba(61, 50, 38, 0.08);
  --nav-pill-active-text: #fff;
  --display: "Source Serif 4", Georgia, serif;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font);
  background:
    radial-gradient(circle at top left, rgba(219, 236, 235, 0.72), transparent 30%),
    linear-gradient(180deg, #f7fbfc, var(--page-bg));
}

body[data-page="writing"] {
  background:
    radial-gradient(circle at top left, rgba(219, 236, 235, 0.72), transparent 30%),
    linear-gradient(180deg, #f7fbfc, var(--page-bg));
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

.site-topbar {
  width: min(1180px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 20px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: grid;
  gap: 2px;
  color: var(--text);
  font-weight: 900;
  line-height: 1.05;
}

.brand-name {
  font-family: var(--display);
  font-size: 1.08rem;
}

.brand-title {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand-orb,
.chat-launcher-orb,
.chat-orb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--blue));
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  animation: breathe 2.1s ease-in-out infinite;
}

.site-nav {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--nav-pill-bg);
  box-shadow: var(--nav-pill-shadow);
}

.site-nav a {
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 900;
}

body[data-page="home"] .site-nav [data-nav="home"],
body[data-page="contact"] .site-nav [data-nav="contact"],
body[data-page="portfolio"] .site-nav [data-nav="portfolio"],
body[data-page="case-studies"] .site-nav [data-nav="case-studies"],
body[data-page="pepper"] .site-nav [data-nav="portfolio"],
body[data-page="overthinker"] .site-nav [data-nav="portfolio"],
body[data-page="writing"] .site-nav [data-nav="writing"] {
  background: var(--link);
  color: var(--nav-pill-active-text);
}

#app {
  width: min(1180px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 22px 0 58px;
}

.home-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
}

.profile-rail,
.content-panel,
.form-card,
.portfolio-panel {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(248, 251, 252, 0.94);
  box-shadow: var(--shadow);
}

.profile-rail {
  padding: 24px 22px;
  align-self: start;
}

.avatar {
  width: 160px;
  height: 160px;
  margin: 0 auto 18px;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 34px rgba(61, 50, 38, 0.14);
}

.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.profile-rail h1,
.hero h1 {
  font-family: var(--display);
  letter-spacing: 0;
}

.profile-rail h1 {
  margin: 0;
  font-size: 1.72rem;
  line-height: 1.08;
  text-align: center;
}

.headline,
.degree,
.meta-list,
.hero p,
.section p,
.legal-footer,
.card-copy,
.submit-row span {
  color: var(--muted);
  line-height: 1.65;
}

.headline,
.degree { text-align: center; }
.headline { margin: 12px 0 0; }
.degree { margin: 10px 0 18px; font-size: 0.9rem; }

.meta-list,
.rail-links {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}

.rail-links { margin-top: 18px; }

.rail-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffdf9, var(--panel-2));
  border: 1px solid var(--border);
  font-weight: 800;
}

.home-pepper-card {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.home-pepper-card h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1.08rem;
}

.inline-chat {
  height: 360px;
  border: 1px solid rgba(15, 95, 112, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel-2), #eef7f6);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.inline-chat-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  background: linear-gradient(135deg, #0f5f70, #bf6d47);
  color: #fff;
  border-bottom: 1px solid rgba(15, 95, 112, 0.18);
}

.inline-chat-header span:last-child {
  display: grid;
  gap: 1px;
}

.inline-chat-header small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
}

.inline-chat-messages {
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inline-chat-form {
  display: flex;
  gap: 7px;
  padding: 9px;
  background: var(--panel);
  border-top: 1px solid rgba(15, 95, 112, 0.14);
}

.inline-chat-form textarea {
  min-height: 38px;
  border-radius: 999px;
  padding: 9px 11px;
  resize: none;
}

.inline-chat-form button {
  padding: 0 12px;
}

.content-panel { padding: 28px; }

.section {
  margin-bottom: 28px;
}

.section:last-child { margin-bottom: 0; }

.section h2,
.portfolio-card h2,
.form-card h2,
.roadmap h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  letter-spacing: 0;
}

.skill-list {
  margin: 0;
  padding-left: 20px;
}

.skill-list li {
  margin-bottom: 9px;
  line-height: 1.62;
}

.project-list {
  display: grid;
  gap: 14px;
}

.project-mini,
.portfolio-card,
.metric,
.roadmap-item {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf9, var(--panel-2));
  box-shadow: 0 6px 18px rgba(61, 50, 38, 0.06);
}

.project-mini { padding: 16px; }
.project-mini h3 { margin: 0 0 7px; }

.project-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  gap: 7px;
  z-index: 2;
}

.project-action {
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(15, 95, 112, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 18px rgba(31, 41, 51, 0.08);
}

.project-action:hover {
  border-color: rgba(15, 95, 112, 0.34);
  background: #fffdf9;
}

.project-action svg {
  width: 16px;
  height: 16px;
  fill: var(--link);
}

.project-mini h3,
.portfolio-card h2 {
  padding-right: 78px;
}

.hero {
  padding: 22px 0 24px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero h1 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(2.55rem, 5vw, 5.15rem);
  line-height: 0.97;
}

.hero p { max-width: 820px; font-size: 1.07rem; }

.form-card,
.portfolio-panel,
.writing-panel {
  max-width: 900px;
  padding: 24px;
}

body[data-page="contact"] .form-card {
  max-width: 1120px;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.25fr);
  gap: 20px;
  align-items: stretch;
}

body[data-page="contact"] .assistant-heading {
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}

body[data-page="contact"] .assistant-bubble {
  width: 100%;
}

body[data-page="contact"] #contact-form {
  min-width: 0;
  height: 100%;
  border-left: 1px solid rgba(14, 111, 164, 0.14);
  padding-left: 20px;
}

.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turnstile-wrap {
  display: flex;
  justify-content: center;
  min-height: 82px;
  padding: 12px;
  border: 1px solid rgba(14, 111, 164, 0.14);
  border-radius: 14px;
  background: rgba(248, 251, 252, 0.86);
}

.contact-success-panel {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 32px 20px;
  border: 1px solid rgba(22, 163, 74, 0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.11), rgba(22, 163, 74, 0.04));
  text-align: center;
}

.contact-success-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 18px 38px rgba(22, 163, 74, 0.26);
}

.contact-success-panel h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.contact-success-panel p {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
}

.contact-reference {
  font-weight: 900;
  color: var(--text) !important;
}

.message-field {
  position: relative;
}

.message-hint-popout {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  max-width: min(360px, calc(100% - 28px));
  padding: 9px 12px;
  border: 1px solid rgba(14, 111, 164, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.message-hint-popout.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.writing-panel {
  max-width: none;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(248, 251, 252, 0.94);
  box-shadow: var(--shadow);
}

.assistant-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.assistant-bubble {
  position: relative;
  border: 1px solid rgba(15, 95, 112, 0.16);
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  padding: 12px 14px;
  box-shadow: 0 12px 34px rgba(31, 41, 51, 0.08);
}

.assistant-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 16px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 1px solid rgba(15, 95, 112, 0.16);
  border-bottom: 1px solid rgba(15, 95, 112, 0.16);
  transform: rotate(45deg);
}

.assistant-name {
  display: block;
  margin-bottom: 4px;
  color: var(--link);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.assistant-bubble p { margin: 0; line-height: 1.5; }

.assistant-copy {
  display: grid;
  gap: 9px;
}

.pepper-contact-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.48;
}

.pepper-contact-list a,
.contact-text-button {
  color: var(--link);
  font-weight: 900;
}

.contact-text-button {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--link);
  box-shadow: none;
  text-align: left;
}

.pepper-contact-list span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
}

.contact-live-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  padding: 24px;
  background: rgba(15, 23, 42, 0.44);
  display: grid;
  place-items: center;
}

.contact-live-overlay[hidden] {
  display: none;
}

.contact-live-panel {
  width: min(760px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 32px));
  border: 1px solid rgba(15, 95, 112, 0.22);
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 30px 85px rgba(15, 23, 42, 0.34);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.contact-live-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: linear-gradient(135deg, #0f5f70, #bf6d47);
  color: #fff;
}

.contact-live-header strong {
  margin-right: auto;
}

.contact-live-header button {
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.contact-live-panel iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--page-bg);
}

form {
  display: grid;
  gap: 16px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fffdf9;
  color: var(--text);
  font: inherit;
  padding: 13px 14px;
}

input[readonly] {
  background: #f3f4f6;
  color: #4b5563;
}

textarea { resize: vertical; }

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 4px rgba(15, 95, 112, 0.12);
}

.field-note {
  color: var(--link);
  font-size: 0.76rem;
  font-weight: 900;
}

.submit-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

button,
.button-link {
  border: 0;
  border-radius: 999px;
  background: var(--link);
  color: #fff;
  font: inherit;
  font-weight: 900;
  padding: 12px 23px;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.pending-mode:disabled {
  background: #8aa0a7;
  animation: buttonPending 2.4s ease-in-out infinite;
}

.deny-mode:disabled {
  background: #9f4c4c;
  animation: buttonNope 0.42s ease-in-out 1;
}

.ready-mode {
  background: var(--blue);
  animation: buttonReady 1.8s ease-in-out infinite;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.metric {
  padding: 15px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

button.metric {
  appearance: none;
}

.metric.active,
.metric:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 22px rgba(14, 111, 164, 0.16);
}

.metric strong {
  display: block;
  font-size: 1.6rem;
}

.metric span {
  color: var(--muted);
  font-size: 0.85rem;
}

.portfolio-card.hidden {
  display: none;
}

.tech-filter-panel {
  display: grid;
  grid-template-columns: minmax(170px, 0.28fr) 1fr;
  gap: 18px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.56);
}

.filter-help {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.tech-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-filter {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.tech-filter .stack-badge {
  margin: 0;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.tech-filter.active .stack-badge,
.tech-filter:hover .stack-badge {
  border-color: var(--blue);
  box-shadow: 0 8px 20px rgba(14, 111, 164, 0.18);
  transform: translateY(-1px);
}

.tag-pill {
  border-color: rgba(14, 111, 164, 0.24);
  background: rgba(14, 111, 164, 0.08);
  color: var(--blue-strong);
}

.case-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body[data-page="portfolio"] .case-list {
  grid-template-columns: 1fr;
}

.case-list.single-visible .portfolio-card:not(.hidden) {
  grid-column: 1 / -1;
}

.portfolio-card {
  padding: 18px;
}

.portfolio-card.featured {
  grid-column: 1 / -1;
}

.research-list {
  grid-template-columns: 1fr;
}

.research-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr);
  column-gap: 22px;
  align-items: start;
}

.research-card .project-actions,
.research-card .card-meta,
.research-card h2,
.research-card > p,
.research-card .card-copy,
.research-card .stack {
  grid-column: 1;
}

.thought-cloud {
  grid-column: 2;
  grid-row: 2 / span 5;
  position: relative;
  border: 1px solid rgba(14, 111, 164, 0.18);
  border-radius: 22px;
  padding: 17px 18px;
  background: rgba(245, 251, 253, 0.88);
  box-shadow: 0 18px 32px rgba(35, 58, 66, 0.09);
}

.thought-cloud::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 30px;
  width: 24px;
  height: 24px;
  border-left: 1px solid rgba(14, 111, 164, 0.18);
  border-bottom: 1px solid rgba(14, 111, 164, 0.18);
  background: rgba(245, 251, 253, 0.88);
  transform: rotate(45deg);
}

.thought-cloud p {
  position: relative;
  margin: 0;
  color: var(--soft);
  line-height: 1.65;
}

.card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-right: 86px;
}

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.62);
  color: var(--soft);
  font-size: 0.75rem;
  font-weight: 900;
}

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.compact-stack {
  margin-top: 8px;
}

.stack-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px 5px 7px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 900;
}

.stack-badge img,
.stack-fallback {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.stack-badge img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(71%) saturate(631%) hue-rotate(145deg) brightness(86%) contrast(91%);
}

.stack-fallback {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(15, 95, 112, 0.12);
  color: var(--link);
  font-size: 0.63rem;
}

.roadmap {
  margin-top: 20px;
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.roadmap-item {
  padding: 14px;
}

.roadmap-item b {
  display: block;
  margin-bottom: 6px;
}

.roadmap-item span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.pepper-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 14px;
  align-items: stretch;
}

.pepper-chat-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.pepper-chat-card .inline-chat {
  height: 560px;
}

.overthinker-panel {
  max-width: none;
  margin-bottom: 18px;
}

.overthinker-console {
  display: grid;
  gap: 18px;
}

.overthinker-tabs {
  display: inline-flex;
  width: fit-content;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
}

.overthinker-tab {
  padding: 10px 18px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--link);
  box-shadow: none;
}

.overthinker-tab.active {
  background: var(--link);
  color: #fff;
  border-color: rgba(15, 95, 112, 0.22);
}

.overthinker-tab-panel {
  display: none;
}

.overthinker-tab-panel.active {
  display: grid;
  gap: 18px;
}

.overthinker-demo-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.08fr);
  gap: 14px;
  align-items: stretch;
}

.vcas-intro-grid,
.vcas-demo-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: 14px;
  align-items: stretch;
}

.vcas-embed-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.vcas-iframe {
  width: 100%;
  height: 1120px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #050712;
}

.vcas-embed-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.vcas-actions {
  margin: 14px 0 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.vcas-kpi {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vcas-kpi .rail-label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.vcas-kpi strong {
  font-size: 0.98rem;
}

.vcas-docs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.vcas-table-wrap {
  overflow: auto;
}

.vcas-table code {
  font-size: 0.86rem;
}

@media (max-width: 980px) {
  .vcas-demo-grid {
    grid-template-columns: 1fr;
  }
  .vcas-intro-grid {
    grid-template-columns: 1fr;
  }
  .vcas-docs-grid {
    grid-template-columns: 1fr;
  }
  .vcas-iframe {
    height: 1020px;
  }
}

.overthinker-task-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.overthinker-task {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 1px solid rgba(15, 95, 112, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  padding: 13px 14px;
  text-align: left;
  box-shadow: none;
}

.overthinker-task.active,
.overthinker-task:hover {
  border-color: rgba(15, 95, 112, 0.42);
  background: linear-gradient(180deg, #fffdf9, #e8f3f4);
}

.overthinker-task span,
.overthinker-feedback span,
.overthinker-controls span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.overthinker-feedback,
.overthinker-output {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  padding: 13px 14px;
  margin-top: 12px;
}

.overthinker-output {
  display: grid;
  gap: 8px;
}

.overthinker-output p,
.overthinker-feedback p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

.overthinker-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.overthinker-controls button {
  padding: 9px 16px;
}

.overthinker-controls button:disabled {
  opacity: 0.42;
}

.overthinker-subsection {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

.overthinker-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
}

.overthinker-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.overthinker-table th,
.overthinker-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.overthinker-table th {
  color: var(--link);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.overthinker-table td {
  color: var(--text);
  line-height: 1.45;
}

.overthinker-code-grid,
.overthinker-knowledge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.overthinker-code-card pre {
  max-height: 340px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 14px;
  border: 1px solid rgba(15, 95, 112, 0.16);
  border-radius: 12px;
  background: #132a28;
  color: #fff7ea;
  font-size: 0.78rem;
  line-height: 1.48;
}

.overthinker-code-card code,
.overthinker-table code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.article-list {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.article-preview {
  max-height: 620px;
  overflow: hidden;
  position: relative;
  color: var(--text);
}

.article-preview-text {
  color: var(--text);
  line-height: 1.72;
  font-size: 1rem;
}

.article-preview::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(248, 251, 252, 0), var(--panel));
  pointer-events: none;
}

.recent-article-grid,
.older-article-strip,
.article-next-panel,
.article-archive {
  min-width: 0;
}

.recent-article-grid,
.older-article-strip {
  display: grid;
  gap: 12px;
}

.section-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.section-heading-row strong {
  font-family: var(--display);
  font-size: 1.35rem;
}

.recent-article-cards,
.article-next-panel,
.older-article-strip > div {
  display: grid;
  gap: 12px;
}

.recent-article-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.article-link-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(61, 50, 38, 0.06);
}

.article-link-card:hover {
  background: var(--panel-2);
}

.article-link-card span,
.article-link-card em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 850;
}

.article-link-card strong {
  line-height: 1.28;
}

.article-link-card.compact {
  padding: 12px;
}

.article-link-card.primary-next {
  border-color: rgba(15, 95, 112, 0.3);
}

.article-archive {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(61, 50, 38, 0.06);
}

.article-archive summary {
  cursor: pointer;
  padding: 14px 16px;
  color: var(--text);
  font-weight: 900;
}

.article-archive .article-timeline,
.article-archive .recent-article-cards {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.archive-wide {
  display: block;
}

.writing-rail {
  position: sticky;
  top: 18px;
  align-self: start;
  display: grid;
  gap: 12px;
}

.writing-rail-card,
.article-timeline {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(61, 50, 38, 0.06);
}

.writing-rail-card {
  padding: 16px;
}

.writing-rail-card strong {
  display: block;
  margin: 3px 0 6px;
  font-family: var(--display);
  font-size: 1.35rem;
}

.writing-rail-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.88rem;
}

.rail-label {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.article-timeline {
  display: grid;
  padding: 8px;
}

.article-timeline a {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 11px 10px 11px 18px;
  border-radius: 10px;
  color: var(--text);
}

.article-timeline a::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--link);
}

.article-timeline a:hover {
  background: rgba(15, 95, 112, 0.08);
}

.article-timeline span,
.article-timeline em {
  color: var(--muted);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 850;
}

.article-timeline strong {
  font-size: 0.88rem;
  line-height: 1.35;
}

.article-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(61, 50, 38, 0.06);
  padding: 24px;
}

.article-body .post-wrap,
.article-body .toc,
.article-body .table-wrap,
.article-body .kicker,
.article-body table,
.article-body thead,
.article-body tbody,
.article-body tr,
.article-body th,
.article-body td {
  background: transparent !important;
}

.article-body .toc,
.article-body .table-wrap {
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.article-card h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  letter-spacing: 0;
}

.article-body {
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  line-height: 1.68;
  overflow-wrap: anywhere;
}

.article-body h1,
.article-body h2,
.article-body h3 {
  margin: 1.35em 0 0.55em;
  line-height: 1.25;
}

.article-body p {
  color: var(--text);
  margin: 0.85em 0;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.article-body ul,
.article-body ol {
  padding-left: 1.25rem;
}

.article-body li {
  margin: 0.35em 0;
}

.article-body table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  table-layout: auto;
}

.article-body img,
.article-body iframe,
.article-body video {
  max-width: 100%;
  height: auto;
}

.article-body th,
.article-body td {
  border: 1px solid var(--border);
  padding: 0.62rem;
  vertical-align: top;
  text-align: left;
}

.article-body pre {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff6ea;
  padding: 14px;
}

body[data-page="writing"] .article-card,
body[data-page="writing"] .writing-panel,
body[data-page="writing"] .writing-rail-card,
body[data-page="writing"] .article-timeline {
  background-color: var(--panel);
}

.legal-footer {
  width: min(1180px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 0 0 28px;
  display: grid;
  gap: 5px;
  font-size: 0.78rem;
}

.chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: none;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(15, 95, 112, 0.2);
  box-shadow: 0 16px 40px rgba(31, 41, 51, 0.18);
}

body[data-page="portfolio"] .chat-launcher,
body[data-page="case-studies"] .chat-launcher,
body[data-page="overthinker"] .chat-launcher,
body[data-page="writing"] .chat-launcher {
  display: inline-flex;
}

.chat-panel {
  position: fixed;
  right: 24px;
  top: 0;
  bottom: 0;
  z-index: 31;
  width: min(390px, calc(100vw - 32px));
  height: auto;
  max-height: var(--viewport-height, 100vh);
  border: 1px solid rgba(15, 95, 112, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--panel-2), #eef7f6);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  display: none;
  overflow: hidden;
}

.chat-panel.open {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #0f5f70, #bf6d47);
  color: #fff;
  border-bottom: 1px solid rgba(15, 95, 112, 0.18);
}

.chat-header-title {
  display: grid;
  gap: 1px;
  margin-right: auto;
}

.chat-header-title strong { font-size: 0.95rem; }
.chat-header-title span { color: rgba(255, 255, 255, 0.78); font-size: 0.78rem; }

.chat-close {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 6px 10px;
}

.chat-messages {
  min-height: 0;
  padding: 13px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background:
    radial-gradient(circle at top right, rgba(219, 236, 235, 0.68), transparent 38%),
    linear-gradient(180deg, var(--panel), var(--page-bg));
}

.message-row {
  display: flex;
}

.message-row.user { justify-content: flex-end; }

/* Leaving/entering transitions render as a centered system pill (matching the home chat), not a chat
   bubble - the middle pages only load site.css so these styles must live here too. */
.message-row.event { justify-content: center; }
.message-event {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: center;
  max-width: 82%;
}

.message-bubble {
  max-width: 78%;
  padding: 9px 12px;
  border-radius: 16px;
  line-height: 1.42;
  font-size: 0.9rem;
}

.message-bubble.assistant {
  background: #ffffff;
  color: var(--text);
  border: 1px solid rgba(15, 95, 112, 0.12);
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 13px rgba(61, 50, 38, 0.06);
}

.message-bubble.user {
  background: #dbeceb;
  color: #16363d;
  border: 1px solid rgba(15, 95, 112, 0.13);
  border-bottom-right-radius: 4px;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 11px;
  background: var(--panel);
  border-top: 1px solid rgba(15, 95, 112, 0.14);
}

.chat-form textarea {
  min-height: 42px;
  max-height: 82px;
  border-radius: 999px;
  padding: 10px 13px;
  resize: none;
}

.chat-form button {
  padding: 0 16px;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(37, 99, 235, 0.18); }
}

@keyframes buttonReady {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.28); transform: translateY(0) scale(1); }
  35% { transform: translateY(-2px) scale(1.02); }
  50% { box-shadow: 0 0 0 9px rgba(37, 99, 235, 0); }
}

@keyframes buttonPending {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 95, 112, 0.14); transform: translateY(0); }
  50% { box-shadow: 0 0 0 7px rgba(15, 95, 112, 0); transform: translateY(-1px); }
}

@keyframes buttonNope {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@media (max-width: 900px) {
  .site-topbar,
  .home-layout,
  .contact-layout,
  .split,
  .metrics,
  .tech-filter-panel,
  .case-list,
  .research-card,
  .pepper-demo-grid,
  .overthinker-demo-grid,
  .overthinker-code-grid,
  .overthinker-knowledge-grid,
  .roadmap-grid,
  .writing-panel,
  .recent-article-cards {
    grid-template-columns: 1fr;
  }

  .thought-cloud,
  .research-card .project-actions,
  .research-card .card-meta,
  .research-card h2,
  .research-card > p,
  .research-card .card-copy,
  .research-card .stack {
    grid-column: 1;
  }

  .thought-cloud {
    grid-row: auto;
    margin: 8px 0 4px;
  }

  .thought-cloud::before {
    left: 32px;
    top: -12px;
    border-left: 1px solid rgba(14, 111, 164, 0.18);
    border-top: 1px solid rgba(14, 111, 164, 0.18);
    border-bottom: 0;
  }

  .site-topbar {
    display: grid;
    align-items: start;
    width: min(100%, calc(100vw - 24px));
    gap: 12px;
  }

  .home-layout {
    display: grid;
  }

  .site-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
    border-radius: 18px;
  }

  .site-nav a {
    padding: 8px 7px;
    text-align: center;
    font-size: 0.78rem;
    white-space: normal;
    line-height: 1.15;
  }

  .writing-rail {
    position: static;
  }

  .form-card,
  .portfolio-panel,
  .writing-panel {
    max-width: 100%;
    padding: 18px;
  }

  .assistant-heading {
    position: sticky;
    top: 0;
    z-index: 12;
    margin: -18px -18px 16px;
    padding: 12px 18px;
    background: rgba(248, 251, 252, 0.97);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
  }

  body[data-page="contact"] .assistant-heading {
    position: sticky;
    top: 0;
    margin: -18px -18px 16px;
    padding: 12px 18px;
    background: rgba(248, 251, 252, 0.97);
    border-bottom: 1px solid var(--border);
  }

  body[data-page="contact"] #contact-form {
    border-left: 0;
    padding-left: 0;
  }

  .assistant-bubble {
    max-height: 42vh;
    overflow-y: auto;
  }

  .contact-live-overlay {
    padding: 0;
    align-items: stretch;
    justify-items: stretch;
  }

  .contact-live-panel {
    width: var(--viewport-width, 100vw);
    height: var(--viewport-height, 100vh);
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .contact-live-header {
    padding-top: max(11px, env(safe-area-inset-top));
  }

  .article-body .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .article-body p {
    text-align: left;
    hyphens: manual;
  }

  body.pepper-floating-open {
    overflow: hidden;
  }

  .chat-launcher {
    right: 14px;
    bottom: 14px;
  }

  .chat-panel.open {
    top: var(--viewport-offset-top, 0px);
    left: var(--viewport-offset-left, 0px);
    right: auto;
    bottom: auto;
    width: var(--viewport-width, 100vw);
    max-width: var(--viewport-width, 100vw);
    height: var(--viewport-height, 100dvh);
    max-height: var(--viewport-height, 100dvh);
    border: 0;
    border-radius: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .chat-panel.open .chat-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .chat-panel.open .chat-messages {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .chat-panel.open .chat-form {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-bottom: max(11px, env(safe-area-inset-bottom));
  }

  .chat-panel.open .chat-form textarea {
    font-size: 16px;
  }
}

/* =============================================================
   Article reading experience (writing/<slug> pages only)
   - Single-column wide layout: drop the side rail, center the body
   - Floating reading bar: slides in when the article hero scrolls out
   ============================================================= */

/* C: Single-column wide layout for article pages.
   Overrides .writing-panel grid behavior when used together with
   .writing-article-panel (which is only set on /writing/<slug> pages).
   Width matches the site topbar convention (1180px max, 40px gutters)
   so the article body uses the full page width like every other page. */
.writing-article-panel {
  display: block;
  width: min(1180px, calc(100vw - 40px));
  max-width: none;
  margin: 0 auto;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.writing-article-panel .article-list {
  display: block;
}

.writing-article-panel .article-card-full {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 40px;
  margin-bottom: 24px;
}

.writing-article-panel .article-next-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

/* A: Floating reading bar — fixed at top, slides in once the article hero
   has scrolled past the viewport top. Backdrop-blur for legibility over
   text content below it. Pointer-events disabled while hidden so it can't
   block clicks during transition. */
.article-floating-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  background: rgba(248, 251, 252, 0.94);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(61, 50, 38, 0.10);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  transform: translateY(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.article-floating-bar.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.article-floating-back {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--link);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
}

.article-floating-back:hover {
  background: rgba(15, 95, 112, 0.08);
}

.article-floating-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text);
}

.article-floating-next {
  color: var(--link);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.86rem;
  white-space: nowrap;
}

.article-floating-next:hover {
  background: rgba(15, 95, 112, 0.08);
}

@media (max-width: 720px) {
  .article-floating-bar {
    padding: 8px 12px;
    gap: 10px;
  }
  .article-floating-title {
    font-size: 0.82rem;
  }
  .article-floating-next {
    font-size: 0.78rem;
    padding: 4px 8px;
  }
  .writing-article-panel {
    width: calc(100vw - 24px);
  }
  .writing-article-panel .article-card-full {
    padding: 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-floating-bar {
    transition: none;
  }
}

/* ============================================================================
   Dark theme. Activated by [data-theme="dark"] on <html> (set before paint by an
   inline head script from localStorage / prefers-color-scheme). Light styling above
   is untouched, so the default light look stays pixel-identical. Palette derived from
   the existing teal/warm tokens; text/background pairs meet WCAG AA contrast.
   ============================================================================ */
[data-theme="dark"] {
  --page-bg: #0f1a1d;
  --panel: #16242a;
  --panel-2: #16242a;
  --border: #2b3f46;
  --text: #e7eff1;
  --muted: #a3b5bb;
  --soft: #cbb49c;
  --link: #5cc0d1;
  --link-hover: #8ad8e4;
  --accent: #e0946e;
  --blue: #3b82f6;
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
  --nav-pill-bg: rgba(22, 36, 42, 0.9);
  --nav-pill-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --nav-pill-active-text: #08181c;
  color-scheme: dark;
}
[data-theme="dark"] body,
[data-theme="dark"] body[data-page="writing"] {
  background:
    radial-gradient(circle at top left, rgba(34, 60, 66, 0.55), transparent 30%),
    linear-gradient(180deg, #12211f, var(--page-bg));
}
[data-theme="dark"] .rail-links a,
[data-theme="dark"] .project-mini,
[data-theme="dark"] .portfolio-card,
[data-theme="dark"] .metric,
[data-theme="dark"] .roadmap-item {
  background: linear-gradient(180deg, #192b31, #14242a);
}
[data-theme="dark"] .inline-chat,
[data-theme="dark"] .chat-panel {
  background: linear-gradient(180deg, #16262c, #12232a);
}
[data-theme="dark"] .project-action { background: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .project-action:hover { background: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .message-hint-popout { background: #1b2c33; }
[data-theme="dark"] .assistant-bubble,
[data-theme="dark"] .message-bubble.assistant { background: #1b2c33; color: var(--text); }
[data-theme="dark"] input,
[data-theme="dark"] textarea { background: #14242a; color: var(--text); }
[data-theme="dark"] .tech-filter-panel { background: rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .pill { background: rgba(255, 255, 255, 0.07); color: var(--text); }
[data-theme="dark"] .stack-badge { background: rgba(255, 255, 255, 0.08); color: var(--text); }
[data-theme="dark"] .overthinker-tabs,
[data-theme="dark"] .overthinker-task,
[data-theme="dark"] .overthinker-feedback,
[data-theme="dark"] .overthinker-output,
[data-theme="dark"] .overthinker-table-wrap { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .overthinker-task.active,
[data-theme="dark"] .overthinker-task:hover { background: linear-gradient(180deg, #1b2c33, #16343a); }
[data-theme="dark"] .article-body pre { background: #0e1a1e; }
[data-theme="dark"] .overthinker-table th { background: rgba(255, 255, 255, 0.05); }

/* Theme toggle button (topbar). Small, unobtrusive; matches both themes. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.theme-toggle:hover { background: rgba(127, 127, 127, 0.14); }
.theme-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.theme-toggle-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset -4px -3px 0 0 var(--text);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
[data-theme="dark"] .theme-toggle-icon {
  background: var(--text);
  box-shadow: 0 0 0 2px transparent, 0 -7px 0 -5px var(--text), 0 7px 0 -5px var(--text),
    -7px 0 0 -5px var(--text), 7px 0 0 -5px var(--text);
}

/* Dark theme: large content panels that hold section text (were flat light before). */
[data-theme="dark"] .profile-rail,
[data-theme="dark"] .content-panel,
[data-theme="dark"] .form-card,
[data-theme="dark"] .portfolio-panel,
[data-theme="dark"] .writing-panel,
[data-theme="dark"] .assistant-heading,
[data-theme="dark"] .article-floating-bar { background: rgba(22, 36, 42, 0.94); }
[data-theme="dark"] .article-preview::after {
  background: linear-gradient(180deg, rgba(22, 36, 42, 0), var(--panel));
}

/* ----------------------------------------------------------------------------
   Dark theme: the research "personal motivation" callout. The light rule paints
   a near-white translucent panel, which stayed white here and left the pointer
   overlapping the card as a visible diamond (two translucent fills stacking).
   Both the panel and its pointer now use the same opaque raised surface the dark
   theme already uses for popouts and chat bubbles, so the overlap disappears and
   the pointer reads as a single tail.
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .thought-cloud {
  border-color: var(--border);
  background: #1b2c33;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .thought-cloud::before {
  border-color: var(--border);
  background: #1b2c33;
}