:root {
  --bg: #0a0a0c;
  --bg-raised: #101014;
  --bg-card: #141419;
  --border: #27272e;
  --text: #ece9e2;
  --text-dim: #a8a8af;
  --accent: #c9a45c;
  --accent-2: #8ea3c4;
  --accent-3: #c0687b;
  --mono: "SFMono-Regular", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, nav .brand { font-family: var(--serif); letter-spacing: 0.01em; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 1.5rem; }

/* ---- nav ---- */
nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
nav .wrap { display: flex; align-items: center; gap: 1.5rem; height: 3.5rem; }
nav .brand { font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
nav a.link { color: var(--text-dim); font-size: 0.95rem; }
nav a.link:hover, nav a.link.active { color: var(--accent); text-decoration: none; }
nav .spacer { flex: 1; }

/* projects dropdown */
.nav-drop { position: relative; display: flex; align-items: center; }
nav button.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-dim); font-size: 0.95rem; font-family: inherit;
}
nav button.link:hover, nav button.link.active { color: var(--accent); }
.nav-drop .caret { font-size: 0.7em; opacity: 0.7; }
.drop-menu {
  position: absolute; right: 0; top: 100%; min-width: 14rem;
  display: none; flex-direction: column; gap: 0.15rem; padding: 0.4rem;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu { display: flex; }
.drop-menu a {
  padding: 0.5rem 0.7rem; border-radius: 7px;
  color: var(--text-dim); font-size: 0.9rem; text-decoration: none;
}
.drop-menu a:hover, .drop-menu a.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* One menu item leaves the site (the MHSRS abstract PDF) -- mark it so the jump
   to an external viewer isn't a surprise. */
.drop-menu a[target="_blank"]::after {
  content: "\2197"; display: inline-block;
  font: 0.8em/1 var(--mono); margin-left: 0.35em; vertical-align: 0.1em;
  color: color-mix(in srgb, currentColor 70%, transparent);
}

/* ---- split hero (landing) ---- */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100vh - 3.5rem);
}
.hero-photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 25%;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
}
.hero-copy {
  align-self: center; max-width: 42rem;
  padding: 4rem clamp(2rem, 5vw, 5rem);
}
.hero-copy h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.15;
  color: var(--text);
}
.hero-copy p { color: var(--text-dim); margin-top: 1.4rem; font-size: 1.08rem; }
.hero-copy a {
  color: var(--accent); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
  text-underline-offset: 4px;
}
.hero-copy a:hover { text-decoration-color: var(--accent); }
.tour-video {
  display: block; width: 100%; max-width: 40rem;
  margin-top: 0.75rem; border-radius: 8px;
}

/* chapter checkpoints under the tour player — one row per chapter, with
   smaller landmark stops after each chapter pill */
.tour-chapters {
  display: flex; flex-direction: column; gap: 0.35rem;
  margin-top: 0.6rem; max-width: 40rem;
}
.tour-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.tour-chapter, .tour-sub {
  cursor: pointer; font-family: var(--mono);
  color: var(--text-dim); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 999px;
  transition: color 0.15s, border-color 0.15s;
}
.tour-chapter { font-size: 0.78rem; padding: 0.25rem 0.7rem; }
.tour-sub {
  font-size: 0.7rem; padding: 0.14rem 0.55rem;
  background: transparent; border-color: transparent;
}
.tour-chapter:hover, .tour-sub:hover { color: var(--text); border-color: var(--accent); }
.tour-chapter.active, .tour-sub.active { color: var(--accent); border-color: var(--accent); }
.tour-chapter .tc-time, .tour-sub .tc-time { color: var(--accent); margin-right: 0.35rem; }
.tour-chapter.active .tc-time, .tour-sub.active .tc-time { color: inherit; }
@media (max-width: 820px) {
  .hero-copy .tour-chapters { margin-left: auto; margin-right: auto; }
  .hero-copy .tour-row { justify-content: center; }
}

/* project-page walkthrough player — wider than the hero clip so the
   screen-recording text stays legible */
.tutorial-video {
  display: block; width: 100%; max-width: 56rem;
  margin-top: 0.75rem; border-radius: 8px;
  border: 1px solid var(--line, #26262c);
}

/* Keep the portrait at a natural scale on ultra-wide displays and let the
   written/video side make use of the additional horizontal room. */
@media (min-width: 1440px) {
  nav .wrap { max-width: 90rem; }
  #about,
  #xia-shu {
    grid-template-columns: minmax(0, 42rem) minmax(0, 1fr);
    padding-left: clamp(1.5rem, 3vw, 4rem);
  }
  #about .hero-copy,
  #xia-shu .hero-copy { width: 100%; max-width: 72rem; }
  #about .tour-video { max-width: 52rem; }
}

@media (max-width: 820px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; }
  .hero-photo img {
    height: 55vh; object-position: 50% 20%;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
  .hero-copy {
    padding: 1.5rem 1.5rem 3rem;
    margin: 0 auto;
    text-align: center;
  }
  .hero-copy .tour-video { margin-left: auto; margin-right: auto; display: block; }
}

/* ---- cards ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; padding: 1rem 0 4rem; }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card h3 { font-size: 1.15rem; }
.card p { color: var(--text-dim); font-size: 0.93rem; flex: 1; }
.card .cta { font-size: 0.9rem; font-weight: 600; }
.badge {
  display: inline-block; align-self: flex-start;
  font: 600 0.72rem/1 var(--mono);
  color: var(--accent); border: 1px solid var(--border);
  padding: 0.3rem 0.55rem; border-radius: 999px;
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* ---- generic sections ---- */
section { padding: 2.5rem 0; }
section h2 { font-size: 1.5rem; margin-bottom: 1rem; }
section p.lead { color: var(--text-dim); max-width: 46rem; }
.panel {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.5rem; margin-top: 1.25rem;
}
code, pre { font-family: var(--mono); font-size: 0.87em; }
pre {
  background: #0e0e12; border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem; overflow-x: auto; line-height: 1.5;
}
kbd {
  font-family: var(--mono); font-size: 0.8em;
  background: var(--bg-card); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 5px; padding: 0.1em 0.45em;
}

/* ---- resume ---- */
.resume-layout { padding-top: 2.5rem; }
.resume-side { text-align: center; }
.portrait {
  width: min(400px, 100%); height: auto; aspect-ratio: 300 / 365; object-fit: cover;
  -webkit-mask-image: radial-gradient(62% 60% at 50% 40%, #000 35%, transparent 90%);
  mask-image: radial-gradient(62% 60% at 50% 40%, #000 35%, transparent 90%);
}
.resume-side h1 { font-size: clamp(2rem, 3vw, 2.6rem); margin-top: 0.5rem; line-height: 1.2; }
.resume-side .role { color: var(--accent); font-weight: 600; margin-top: 0.25rem; }
.resume-side .contact {
  display: flex; flex-direction: column; gap: 0.2rem;
  color: var(--text-dim); font-size: 0.92rem; margin-top: 0.75rem;
}
.print-btn {
  display: inline-block;
  font: 600 0.88rem system-ui; color: var(--bg);
  background: var(--accent); border: 0; border-radius: 8px;
  padding: 0.55rem 1.2rem; cursor: pointer; margin-top: 1rem;
}
.print-btn:hover { filter: brightness(1.1); text-decoration: none; }
.resume-main section:first-child { padding-top: 0.5rem; }

/* Resume document: rendered as HTML; the PDF is download-only. */
.resume-doc { margin-top: 0.5rem; }
.resume-doc section { padding: 1.6rem 0; border-top: 1px solid var(--border); }
.resume-doc section:first-child { border-top: 0; padding-top: 0.5rem; }
.resume-doc h2 {
  font-size: 0.82rem; font-family: var(--mono); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
}
.resume-doc .lede { color: var(--text-dim); margin-top: 0.6rem; }
.resume-doc .entry { margin-top: 1.35rem; }
.resume-doc .entry-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.25rem 1rem; justify-content: space-between;
}
.resume-doc .entry-head h3 { font-size: 1.12rem; line-height: 1.3; }
/* Entry headers are links to the org/award being cited. They sit in body-text
   color to keep the document readable, so the underline + ↗ carries the whole
   click affordance -- without it readers don't discover them. */
.resume-doc .entry-head h3 a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.resume-doc .entry-head h3 a::after {
  /* inline-block so the parent's underline doesn't run under the arrow */
  content: "\2197"; display: inline-block;
  font: 0.68em/1 var(--mono); color: var(--accent);
  margin-left: 0.3em; vertical-align: 0.12em;
}
.resume-doc .entry-head h3 a:hover,
.resume-doc .entry-head h3 a:focus-visible {
  color: var(--accent); text-decoration-color: var(--accent);
}
.resume-doc .entry-head h3 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.resume-doc .entry-role a, .resume-doc .lede a, .resume-doc ul li a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 2px;
}
.resume-doc .entry-role a:hover, .resume-doc .lede a:hover, .resume-doc ul li a:hover {
  text-decoration-color: currentColor;
}
/* Citation URL as its own sub-bullet under the claim it backs: the whole href,
   verbatim -- scheme, path and text fragment -- so nothing is elided and the
   link is still the link. It is also the only part that survives onto paper,
   where the print sheet strips every href. */
.resume-doc ul.src-list {
  margin-top: 0.25rem;
  gap: 0.25rem;
}
.resume-doc ul.src-list li {
  padding-left: 1.1rem;
  font: 0.78em var(--mono);
  overflow-wrap: anywhere;
}
.resume-doc ul.src-list li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.62em;
  width: 6px; height: 1px; border-radius: 0; background: var(--text-dim);
}
.resume-doc ul.src-list li a { color: var(--text-dim); }
.resume-doc ul.src-list li a:hover,
.resume-doc ul.src-list li a:focus-visible { color: var(--accent); }
.resume-doc .entry-head .when {
  font: 600 0.76rem var(--mono); color: var(--text-dim);
  letter-spacing: 0.04em; white-space: nowrap;
}
.resume-doc .entry-role { color: var(--accent-2); font-size: 0.95rem; margin-top: 0.1rem; }
.resume-doc ul { list-style: none; margin-top: 0.6rem; display: grid; gap: 0.4rem; }
.resume-doc ul li { position: relative; padding-left: 1.1rem; color: var(--text-dim); font-size: 0.95rem; }
.resume-doc ul li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.66em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.resume-doc .skills { display: grid; gap: 0.9rem; margin-top: 1rem; }
.resume-doc .skills dt {
  font: 600 0.76rem var(--mono); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.resume-doc .skills dd { margin-top: 0.4rem; }

@media (min-width: 1024px) {
  .resume-layout {
    display: grid; grid-template-columns: 400px 1fr;
    gap: 3.5rem; align-items: start;
    max-width: 1320px;
  }
  .resume-side { position: sticky; top: 5rem; }
}
.timeline { border-left: 2px solid var(--border); margin: 1rem 0 0 0.5rem; padding-left: 1.5rem; display: grid; gap: 1.5rem; }
.timeline .item { position: relative; }
.timeline .item::before {
  content: ""; position: absolute; left: calc(-1.5rem - 7px); top: 0.4rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
}
.timeline .when { font: 600 0.78rem var(--mono); color: var(--text-dim); letter-spacing: 0.04em; }
.timeline h3 { font-size: 1.05rem; }
.timeline p { color: var(--text-dim); font-size: 0.93rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.chips span {
  font: 500 0.8rem var(--mono); color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.3rem 0.75rem;
}

/* ---- drone sim ---- */
#sim-shell { position: relative; margin-top: 1.25rem; }
#sim-canvas {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  background: #070708; border: 1px solid var(--border); border-radius: 14px;
}
.hud {
  position: absolute; left: 1rem; top: 1rem;
  font: 12px/1.7 var(--mono); color: var(--accent);
  background: rgba(8, 8, 10, 0.7); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.6rem 0.85rem; pointer-events: none;
  white-space: pre;
}
.sim-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; align-items: center; }
.sim-controls button {
  font: 600 0.9rem system-ui; color: var(--bg);
  background: var(--accent); border: 0; border-radius: 8px;
  padding: 0.55rem 1.1rem; cursor: pointer;
}
.sim-controls button.secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }
.sim-controls .status { font: 0.85rem var(--mono); color: var(--text-dim); }
.sim-controls select {
  font: 600 0.88rem system-ui; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.5rem 0.7rem; cursor: pointer;
}
.sim-controls .ctl-label { font: 600 0.75rem var(--mono); color: var(--text-dim); letter-spacing: 0.06em; }
.sim-controls button.icon { padding: 0.5rem 0.65rem; font-size: 1rem; line-height: 1; }
.ctl-sep { width: 1px; align-self: stretch; margin: 0.1rem 0.15rem; background: var(--border); }
.ctl-spacer { flex: 1 1 0; min-width: 0; }

/* settings drawer — keeps the bar to what you touch while flying */
.sim-settings { position: relative; }
.sim-settings > summary {
  display: inline-flex; align-items: center; gap: 0.45rem; list-style: none; cursor: pointer;
  padding: 0.55rem 0.85rem; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  font: 600 0.9rem system-ui; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.sim-settings > summary::-webkit-details-marker { display: none; }
.sim-settings > summary:hover,
.sim-settings[open] > summary { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); color: var(--accent); }
.sim-settings > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sim-settings-chevron {
  width: 0.42rem; height: 0.42rem; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
  opacity: 0.7; transition: transform 0.18s;
}
.sim-settings[open] .sim-settings-chevron { transform: rotate(225deg) translate(-1px, -1px); }
.sim-settings-menu {
  position: absolute; z-index: 14; right: 0; top: calc(100% + 0.45rem);
  width: min(24rem, calc(100vw - 2.5rem));
  padding: 0.35rem 0.9rem 0.9rem;
  background: color-mix(in srgb, var(--bg-raised) 96%, black);
  border: 1px solid var(--border); border-radius: 11px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}
.set-group { padding-top: 0.85rem; border-top: 1px solid var(--border); }
.set-group:first-child { border-top: 0; }
.set-group h4 {
  margin: 0 0 0.5rem; font: 600 0.68rem var(--mono); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; padding: 0.28rem 0;
}
.set-row-wide { flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; }
.sim-settings-menu select { font: 500 0.82rem system-ui; padding: 0.35rem 0.5rem; max-width: 14rem; }
.sim-settings-menu button { font-size: 0.82rem; padding: 0.4rem 0.75rem; }
.sim-settings-menu .mini { margin: 0.4rem 0 0; font: 0.72rem var(--mono); color: var(--text-dim); }
.sim-settings-menu input[type="checkbox"] { accent-color: var(--accent); }

/* controls help — quick keymap up front, prose folded away */
.sim-help .keymap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.5rem 1.25rem; margin: 0.9rem 0 0.25rem;
}
.sim-help .keymap > div { display: flex; align-items: center; gap: 0.5rem; }
.sim-help .keymap dt { display: flex; gap: 0.2rem; }
.sim-help .keymap dd { margin: 0; font-size: 0.86rem; color: var(--text-dim); }
.help-sec { border-top: 1px solid var(--border); margin-top: 0.85rem; }
.help-sec > summary {
  list-style: none; cursor: pointer; padding: 0.7rem 0 0.1rem;
  font: 600 0.9rem system-ui; color: var(--text);
  display: flex; align-items: center; gap: 0.5rem;
}
.help-sec > summary::-webkit-details-marker { display: none; }
.help-sec > summary::before {
  content: ""; width: 0.4rem; height: 0.4rem; flex: none;
  border-right: 1.5px solid var(--text-dim); border-bottom: 1.5px solid var(--text-dim);
  transform: rotate(-45deg); transition: transform 0.18s;
}
.help-sec[open] > summary::before { transform: rotate(45deg); }
.help-sec > summary:hover { color: var(--accent); }
.help-sec p { color: var(--text-dim); font-size: 0.92rem; margin: 0.5rem 0 0.9rem; max-width: 52rem; }
@media (max-width: 620px) {
  .ctl-spacer { display: none; }
  .sim-settings { width: 100%; }
  .sim-settings > summary { width: 100%; justify-content: center; }
  .sim-settings-menu { left: 0; right: 0; width: auto; }
}
.crosshair {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px;
  transform: translate(-50%, -50%); pointer-events: none;
}
.crosshair::before, .crosshair::after {
  content: ""; position: absolute; background: color-mix(in srgb, var(--accent) 80%, transparent);
}
.crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
#cal-panel {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  width: min(34rem, 92%); background: rgba(8, 8, 10, 0.9);
  border: 1px solid var(--accent); border-radius: 12px;
  padding: 1rem 1.25rem; z-index: 5;
}
#cal-panel strong { color: var(--accent); font: 700 0.9rem var(--mono); }
#cal-panel p { color: var(--text); font-size: 0.95rem; margin: 0.45rem 0 0.75rem; }
#cal-axes {
  font: 11px/1.6 var(--mono); color: var(--text-dim);
  margin-bottom: 0.75rem; word-spacing: 0.15em; overflow-wrap: anywhere;
}
#cal-panel button {
  font: 600 0.85rem system-ui; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.4rem 0.9rem; cursor: pointer; margin-right: 0.5rem;
}
#https-warning {
  position: absolute; right: 1rem; top: 1rem; max-width: 22rem;
  font: 12px/1.5 var(--mono); color: #fbbf24;
  background: rgba(30, 20, 5, 0.8); border: 1px solid #7c5c14;
  border-radius: 8px; padding: 0.5rem 0.8rem;
}

/* ---- project hero ---- */
.hero { padding: 4rem 0 1.5rem; }
.hero .eyebrow {
  font: 600 0.75rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: 0.75rem;
}
.hero h1 {
  font-size: clamp(1.9rem, 3.5vw, 2.9rem); line-height: 1.15; max-width: 46rem;
  color: var(--text);
}
.hero .tag { color: var(--text-dim); max-width: 46rem; margin-top: 1.1rem; font-size: 1.05rem; }

/* ---- chart palette (validated for dark surface) ---- */
:root {
  --viz-1: #c9a45c;  /* gold   */
  --viz-2: #6366f1;  /* indigo */
  --viz-3: #db2777;  /* pink   */
  --viz-4: #4e937a;  /* sage   */
}

/* ---- stat tiles ---- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem; margin-top: 1.25rem;
}
.stat {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.1rem 1.25rem;
}
.stat .value { display: block; font-size: 1.85rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.stat .value small { font-size: 0.95rem; font-weight: 600; color: var(--text-dim); }
.stat .label { color: var(--text-dim); font-size: 0.83rem; margin-top: 0.2rem; display: block; }
.stats.anim .stat { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.stats.anim .stat:nth-child(2) { transition-delay: 0.08s; }
.stats.anim .stat:nth-child(3) { transition-delay: 0.16s; }
.stats.anim .stat:nth-child(4) { transition-delay: 0.24s; }
.stats.anim .stat:nth-child(5) { transition-delay: 0.32s; }
.stats.anim.in-view .stat { opacity: 1; transform: none; }

/* ---- bar charts ---- */
.chart {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.5rem; margin-top: 1.25rem;
}
.chart .ctitle { font-size: 0.95rem; font-weight: 650; margin-bottom: 0.25rem; }
.chart .csub { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 1rem; }
.crow {
  display: grid; grid-template-columns: minmax(9.5rem, 15rem) 1fr;
  gap: 0.9rem; align-items: center; padding: 0.28rem 0;
}
.crow .cname { font-size: 0.85rem; color: var(--text-dim); text-align: right; line-height: 1.3; }
.crow .cname b { color: var(--text); font-weight: 600; }
.chip {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  background: var(--c, var(--viz-1)); margin-left: 0.45rem; vertical-align: baseline;
}
.track { position: relative; height: 20px; margin-right: 3.4rem; }
.track.tall { height: 42px; }
.bar {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 16px; width: var(--w); max-width: 100%;
  background: var(--c, var(--viz-1)); border-radius: 0 4px 4px 0;
}
.track.tall .bar { transform: none; }
.track.tall .bar.b1 { top: 4px; }
.track.tall .bar.b2 { top: 23px; }
.bval {
  position: absolute; left: calc(var(--w) + 8px); top: 50%; transform: translateY(-50%);
  font: 600 0.76rem var(--mono); color: var(--text); white-space: nowrap;
}
.track.tall .bval { transform: none; line-height: 1; }
.track.tall .bval.b1 { top: 8px; }
.track.tall .bval.b2 { top: 27px; }
.bval .flag { color: var(--accent); font-weight: 700; }
.chart.anim .bar { width: 0; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.chart.anim .bval { opacity: 0; transition: opacity 0.4s ease 0.7s; }
.chart.anim.in-view .bar { width: var(--w); }
.chart.anim.in-view .bval { opacity: 1; }

/* reference / chance line: one per track, negative offsets bridge row gaps */
.refline {
  position: absolute; top: -10px; bottom: -10px; left: var(--x); width: 0;
  border-left: 1px solid color-mix(in srgb, var(--text-dim) 55%, transparent);
}
.refline i {
  position: absolute; bottom: -1.15rem; left: -0.4rem; font: 500 0.68rem var(--mono);
  font-style: normal; color: var(--text-dim); white-space: nowrap;
}
.refline.top i { bottom: auto; top: -1.15rem; }
.dtrack { margin-right: 3.4rem; }
.chart .legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  margin-top: 1.4rem; font-size: 0.8rem; color: var(--text-dim);
}
.chart .legend .chip { margin: 0 0.4rem 0 0; }
.chart .footnote { margin-top: 0.9rem; font-size: 0.78rem; color: var(--text-dim); }

/* ---- RATM 3-D flight visualizer ---- */
#rviz-shell { position: relative; margin-top: 0.25rem; }
#rviz-canvas {
  width: 100%; aspect-ratio: 16 / 9; display: block; touch-action: none;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  cursor: grab;
}
#rviz-canvas:active { cursor: grabbing; }
.rviz-legend {
  position: absolute; right: 0.9rem; top: 0.8rem;
  display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-end;
  font: 500 0.76rem var(--mono); color: var(--text-dim);
  pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.rviz-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.rchip {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  background: var(--c, var(--viz-1)); flex: none;
}
.rgrad {
  display: inline-block; width: 84px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--c0), var(--c1), var(--c2));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.rgrad-wrap { display: inline-flex; align-items: center; gap: 0.45rem; }
.rviz-controls { margin-top: 0.9rem; row-gap: 0.55rem; }
.rviz-controls button { padding: 0.35rem 0.8rem; min-width: 2.6rem; }
.rviz-controls input[type="range"] {
  flex: 1 1 8rem; min-width: 7rem; accent-color: var(--accent); cursor: pointer;
}
.rviz-controls input[type="checkbox"] { accent-color: var(--accent); }
.rviz-stats {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-top: 0.9rem;
  font: 500 0.78rem var(--mono); color: var(--text-dim);
}
.rviz-stats span { display: inline-flex; align-items: center; gap: 0.45rem; }
.rviz-stats b { color: var(--text); font-weight: 600; }
.rviz-stats .rchip { margin: 0; }

/* ---- diverging bars (reward weights) ---- */
.dtrack { position: relative; height: 34px; }
.dzero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border); }
.dbar { position: absolute; height: 11px; width: var(--w); background: var(--c); }
.dbar.h { top: 4px; }
.dbar.a { top: 19px; }
.dbar.pos { left: 50%; border-radius: 0 4px 4px 0; }
.dbar.neg { right: 50%; border-radius: 4px 0 0 4px; }
.dval {
  position: absolute; font: 600 0.72rem var(--mono); color: var(--text); line-height: 1;
  white-space: nowrap;
}
.dval.h { top: 7px; } .dval.a { top: 22px; }
.dval.pos { left: calc(50% + var(--w) + 7px); }
.dval.neg { right: calc(50% + var(--w) + 7px); }
.chart.anim .dbar { width: 0; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.chart.anim .dval { opacity: 0; transition: opacity 0.4s ease 0.7s; }
.chart.anim.in-view .dbar { width: var(--w); }
.chart.anim.in-view .dval { opacity: 1; }

@media (max-width: 640px) {
  .crow { grid-template-columns: 1fr; gap: 0.25rem; }
  .crow .cname { text-align: left; }
  .dval.neg { right: auto; left: calc(50% + 4px); }
}

@media (prefers-reduced-motion: reduce) {
  .chart.anim .bar, .chart.anim.in-view .bar,
  .chart.anim .dbar, .chart.anim.in-view .dbar { width: var(--w); transition: none; }
  .chart.anim .bval, .chart.anim .dval { opacity: 1; transition: none; }
  .stats.anim .stat { opacity: 1; transform: none; transition: none; }
}

/* ---- terminal panel ---- */
.term {
  background: #0b0b0e; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; margin-top: 1.25rem;
}
.term-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}
.term-bar i { width: 10px; height: 10px; border-radius: 50%; }
.term-bar i:nth-child(1) { background: #f8717199; }
.term-bar i:nth-child(2) { background: #fbbf2499; }
.term-bar i:nth-child(3) { background: #34d39999; }
.term-bar .tt { margin-left: 0.5rem; font: 500 0.75rem var(--mono); color: var(--text-dim); }
.term pre {
  background: transparent; border: 0; border-radius: 0; margin: 0;
  padding: 1rem 1.25rem; font-size: 0.8rem; line-height: 1.65; color: #a4a5ad;
}
.term .hl  { color: var(--accent); font-weight: 600; }
.term .hl2 { color: var(--accent-3); font-weight: 600; }
.term .dim { color: #63646e; }

/* ---- code tabs (pure CSS, radio-driven) ---- */
.codetabs { margin-top: 1.25rem; }
.codetabs > input { display: none; }
.tabbar { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tabbar label {
  font: 500 0.78rem var(--mono); color: var(--text-dim); cursor: pointer;
  padding: 0.5rem 0.95rem; background: var(--bg-raised);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 9px 9px 0 0;
}
.tabbar label:hover { color: var(--text); }
.tabpanes .pane { display: none; }
.tabpanes pre { margin: 0; border-radius: 0 10px 10px 10px; }
.pane .cap { font-size: 0.8rem; color: var(--text-dim); padding: 0.6rem 0.25rem 0; }
.codetabs > input:nth-of-type(1):checked ~ .tabbar label:nth-of-type(1),
.codetabs > input:nth-of-type(2):checked ~ .tabbar label:nth-of-type(2),
.codetabs > input:nth-of-type(3):checked ~ .tabbar label:nth-of-type(3),
.codetabs > input:nth-of-type(4):checked ~ .tabbar label:nth-of-type(4) {
  color: var(--accent); background: #0e0e12; border-color: var(--border);
  position: relative; z-index: 1; margin-bottom: -1px; padding-bottom: calc(0.5rem + 1px);
}
.codetabs > input:nth-of-type(1):checked ~ .tabpanes .pane:nth-of-type(1),
.codetabs > input:nth-of-type(2):checked ~ .tabpanes .pane:nth-of-type(2),
.codetabs > input:nth-of-type(3):checked ~ .tabpanes .pane:nth-of-type(3),
.codetabs > input:nth-of-type(4):checked ~ .tabpanes .pane:nth-of-type(4) { display: block; }

/* ---- code syntax accents ---- */
pre .k { color: #a5b4fc; }          /* keyword   */
pre .s { color: #d6bd8a; }          /* string    */
pre .c { color: #6d7280; font-style: italic; }  /* comment */
pre .n { color: #d49aae; }          /* number    */
pre .f { color: #c9a45c; }          /* def name  */

/* ---- notebook embed ---- */
.nb-frame { width: 100%; height: 75vh; border: 1px solid var(--border); border-radius: 14px; background: #fff; }

footer { border-top: 1px solid var(--border); padding: 2rem 0 3rem; color: var(--text-dim); font-size: 0.88rem; }

/* ---- print ---- */
@media print {
  :root {
    --bg: #fff; --bg-raised: #fff; --bg-card: #fff;
    --border: #ccc; --text: #111; --text-dim: #444;
    --accent: #8a6a24; --accent-2: #3b5a8a; --accent-3: #9c4a5e;
  }
  body { font-size: 12.5px; }
  nav, footer, .print-btn, .card .cta { display: none; }
  a { color: inherit; text-decoration: none; }
  .resume-layout { display: block; padding-top: 0; }
  .resume-side { position: static; text-align: left; }
  .portrait { width: 140px; -webkit-mask-image: none; mask-image: none; border-radius: 8px; }
  section { padding: 1rem 0; break-inside: avoid; }
  .resume-doc .entry { break-inside: avoid; }
  .resume-doc .entry-head h3 a, .resume-doc a { color: inherit; text-decoration: none; }
  .resume-doc .entry-head h3 a::after { content: none; }
  .timeline .item::before { box-shadow: none; }
  .card, .panel { box-shadow: none; }
}

/* ---- eeg-live: live SEED lab ---- */
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill {
  font: 0.78rem/1 var(--mono); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.4rem 0.75rem; background: var(--bg-raised);
}
.pill.ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
/* A pill the visitor can press — the opt-in that lets the page look for the
   local bridge. Nothing reaches 127.0.0.1 until this is clicked. */
.pill-btn { cursor: pointer; font-family: var(--mono); }
.pill-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--text); }
.pill-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.lab-grid .row, section .row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.lab-grid input, .lab-grid select, section select, section input[type="number"] {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.42rem 0.6rem; font: 0.85rem var(--mono); min-width: 0;
}
.lab-grid input { flex: 1 1 10rem; min-width: 10rem; }
.lab-grid button, section .row button, #proto-overlay button {
  background: var(--accent); color: #17130a; border: 0; border-radius: 8px;
  padding: 0.45rem 0.9rem; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.lab-grid button:disabled, section .row button:disabled { opacity: 0.4; cursor: not-allowed; }
.needs-click { animation: start-pulse 1s ease-in-out 3; }
@keyframes start-pulse {
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 28%, transparent); }
}
.lab-grid button.secondary, section .row button.secondary, #proto-overlay button.secondary {
  background: var(--bg-raised); color: var(--text); border: 1px solid var(--border);
}
canvas.scope {
  width: 100%; margin-top: 0.7rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg);
}

/* lab assistant chat */
.proto-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.session-card { max-width: none; }
.session-divider { height: 1px; margin: 1rem 0; background: var(--border); }
.asst-log {
  margin-top: 0.7rem; height: 17rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.5rem;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.6rem; background: var(--bg);
}
.asst-msg { max-width: 92%; padding: 0.45rem 0.65rem; border-radius: 10px; font-size: 0.86rem; line-height: 1.45; white-space: pre-wrap; }
.asst-msg.bot { align-self: flex-start; background: var(--bg-raised); border: 1px solid var(--border); }
.asst-msg.user { align-self: flex-end; background: color-mix(in srgb, var(--accent) 16%, var(--bg-raised)); }
.asst-msg.sys { align-self: center; color: var(--text-dim); font: 0.72rem var(--mono); background: none; }
/* Tutor mode: 汉字 | pinyin | English side-by-side, columns aligned across
   consecutive sentences (one grid per run of tutor lines). The bubble gets a
   definite width: fr columns inside a shrink-to-fit bubble can collapse to a
   single character and wrap the text letter-by-letter down the side. */
.asst-msg.bot:has(.tutor-grid) { width: 92%; }
.tutor-grid {
  display: grid;
  /* hanzi sized to its text (capped so a long sentence still shares the row);
     pinyin/English split the rest, never below a readable floor */
  grid-template-columns: fit-content(45%) minmax(5ch, 1fr) minmax(5ch, 1fr);
  gap: 0.15rem 0.7rem; margin: 0.3rem 0; align-items: baseline;
}
.tutor-grid.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tutor-cell { min-width: 0; overflow-wrap: break-word; }
.tutor-cell.tc-hanzi { color: var(--accent); font-size: 1.02rem; }
.tutor-cell.tc-lang { color: var(--accent); }
.tutor-cell.tc-pinyin { color: var(--text-dim); font-style: italic; }
.tutor-cell.tc-en { color: var(--text); }
.asst-quick button { font-size: 0.78rem; padding: 0.35rem 0.6rem; }
#asst-mic { flex: 0 0 auto; }
#asst-mic.rec { background: var(--accent-3); color: #17130a; border-color: var(--accent-3); }

/* Xia-Shu: nav icon + floating chat panel */
.xia-btn {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-raised);
  padding: 0; overflow: hidden; flex: 0 0 auto; position: relative;
}
.xia-btn img { width: 100%; height: 100%; display: block; object-fit: cover; }
.xia-btn:hover { border-color: var(--accent); }
/* gloss sweep, triggered by hovering the icon or the "top bar" hint text */
.xia-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 32%,
    rgba(255, 246, 224, 0.55) 50%, transparent 68%);
  transform: translateX(-110%); opacity: 0; pointer-events: none;
}
.xia-btn:hover::after, .xia-btn.shimmer::after {
  opacity: 1; animation: xia-shimmer 1.1s ease-in-out infinite;
}
.xia-btn.shimmer { border-color: var(--accent); }
@keyframes xia-shimmer { to { transform: translateX(110%); } }
/* inline "right portion of the top bar" hint that opens the chat */
.xia-hint {
  all: unset; color: var(--accent); cursor: pointer;
  border-bottom: 1px dashed var(--accent);
}
.xia-hint:hover { background: rgba(201, 164, 92, 0.14); }
.xia-hint:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.xia-avatar {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--border); object-fit: cover;
}
.xia-emblem {
  width: min(230px, 55vw); border-radius: 50%;
  border: 1px solid var(--border); display: block;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
/* Xiǎo Shǔ section reuses the hero-split shell: same 50/50 columns, same copy
   padding and type, so his text aligns with the portrait hero's. */
.xia-split { min-height: 0; border-top: 1px solid var(--border); }
.xia-figure {
  display: flex; align-items: center; justify-content: center;
  padding: 4rem 1.5rem 3rem;
}
.xia-figure .xia-emblem { width: min(420px, 80%); }
.xia-copy h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.15; }
.xia-copy .grid { grid-template-columns: 1fr; padding: 1.4rem 0 0; gap: 1rem; }
.xia-copy .card p { font-size: 0.93rem; margin-top: 0; }
@media (max-width: 820px) {
  .xia-figure { padding: 2rem 1.5rem 0; }
  .xia-figure .xia-emblem { width: min(300px, 70%); }
}

/* Architecture diagram: a full-width band under the two intro columns, so the
   drawing gets the whole content width instead of half of it — the type inside
   an SVG only grows with the box it is drawn in. The SVG is styled here (not
   via presentation attributes) so it can use the site's CSS variables.
   Cloud lane = --accent-2, local lane = --accent. */
.arch-figure {
  grid-column: 1 / -1;
  display: flex; align-self: start; align-items: flex-start; justify-content: center;
  padding: 0 1.5rem 3rem;
}
.arch-figure svg { width: min(860px, 100%); height: auto; }
.arch-figure .a-svgtitle {
  fill: var(--text); font-size: 24px; font-weight: 700; letter-spacing: 0.5px;
}

.arch-figure .a-box   { fill: var(--bg-card); stroke: var(--border); }
.arch-figure .a-title { fill: var(--text); font-size: 17px; font-weight: 600; }
.arch-figure .a-desc  { fill: var(--text-dim); font-size: 13px; }
.arch-figure .a-note  { fill: var(--text-dim); font-size: 13px; font-style: italic; }
.arch-figure .a-lane  { font: 700 12.5px var(--mono); letter-spacing: 2px; }
.arch-figure .a-lane-cloud { fill: var(--accent-2); }
.arch-figure .a-lane-local { fill: var(--accent); }
.arch-figure .a-tag   { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; }
.arch-figure .a-tag-cloud { fill: color-mix(in srgb, var(--accent-2) 80%, var(--text-dim)); }
.arch-figure .a-tag-local { fill: color-mix(in srgb, var(--accent) 80%, var(--text-dim)); }
.arch-figure .a-panel-cloud {
  fill: color-mix(in srgb, var(--accent-2) 5%, transparent);
  stroke: color-mix(in srgb, var(--accent-2) 32%, transparent);
}
.arch-figure .a-panel-local {
  fill: color-mix(in srgb, var(--accent) 5%, transparent);
  stroke: color-mix(in srgb, var(--accent) 32%, transparent);
}
.arch-figure .a-flow-cloud {
  fill: none; stroke-width: 1.5;
  stroke: color-mix(in srgb, var(--accent-2) 65%, transparent);
}
.arch-figure .a-flow-local {
  fill: none; stroke-width: 1.5;
  stroke: color-mix(in srgb, var(--accent) 65%, transparent);
}
.arch-figure .a-head-cloud { fill: color-mix(in srgb, var(--accent-2) 65%, transparent); }
.arch-figure .a-head-local { fill: color-mix(in srgb, var(--accent) 65%, transparent); }
.arch-figure .a-chips rect { fill: var(--bg-raised); stroke: var(--border); }
.arch-figure .a-chiptext text {
  fill: var(--text); font-family: var(--mono); font-size: 12px; text-anchor: middle;
}
.arch-figure .a-dash { stroke: var(--text-dim); stroke-dasharray: 4 4; opacity: 0.5; }
.arch-figure .a-pill { fill: var(--bg); stroke: var(--border); }
.arch-figure .a-pilltext { fill: var(--text-dim); font: 10.5px var(--mono); }
.arch-figure .a-crate rect { fill: var(--bg-raised); stroke: var(--text-dim); }
.arch-figure .a-crate line { stroke: var(--border); }
/* The fork icon reuses the lane colours on purpose: it is the same split the
   diagram opens with, drawn small. */
.arch-figure .a-forkdot { fill: var(--text-dim); }

@media (max-width: 820px) {
  .arch-figure { padding: 1rem 1rem 2rem; }
}
#xia-panel {
  position: fixed; right: 1rem; top: 4.2rem; bottom: 1rem; z-index: 40;
  width: min(24rem, 94vw);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 0.85rem 1rem 0.8rem; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
#xia-panel[hidden] { display: none; }
/* drag-to-resize grips (lab-assistant.js): left edge = width, top edge =
   height, corner = both. Inside the panel edge — overflow:hidden would clip
   anything hanging outside. Hidden on phones, where the panel is a sheet. */
.xia-resize { position: absolute; z-index: 2; touch-action: none; }
.xia-resize-l { left: 0; top: 20px; bottom: 0; width: 7px; cursor: ew-resize; }
.xia-resize-t { top: 0; left: 20px; right: 0; height: 7px; cursor: ns-resize; }
.xia-resize-lt { left: 0; top: 0; width: 20px; height: 20px; cursor: nwse-resize; }
.xia-resize:hover, .xia-resize.dragging { background: color-mix(in srgb, var(--accent) 25%, transparent); }
@media (max-width: 640px) { .xia-resize { display: none; } }
#xia-panel .xia-head {
  display: flex; align-items: center; gap: 0.45rem; flex: 0 0 auto;
  padding-bottom: 0.65rem; border-bottom: 1px solid var(--border);
}
#xia-panel .xia-head h3 { flex: 1; margin: 0; font-size: 1.05rem; white-space: nowrap; }
#xia-panel .xia-head .mini { margin-top: 0; }
/* header controls: quiet ghost buttons; toggles light up when active */
.hd-btn, .hd-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.25rem;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 0.3rem 0.45rem; cursor: pointer;
  font: 0.78rem var(--mono); color: var(--text-dim); user-select: none;
}
#xia-panel button.hd-btn { background: none; color: var(--text-dim); font-weight: 400; font-size: 0.85rem; }
.hd-btn:hover, .hd-toggle:hover { border-color: var(--border); color: var(--text); }
.hd-toggle input { display: none; }
.hd-toggle:has(input:checked) {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* settings drawer (gear) */
#asst-settings {
  flex: 0 0 auto; overflow-y: auto; max-height: 45%;
  padding: 0.7rem 0 0.75rem; border-bottom: 1px solid var(--border);
}
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.7rem; }
.set-grid label {
  display: flex; flex-direction: column; gap: 0.25rem;
  font: 0.72rem var(--mono); color: var(--text-dim);
}
.set-grid select { width: 100%; }
/* on phones the header toggles/buttons live here (lab-assistant.js moves them) */
.set-toggles { display: none; }
#xia-panel .asst-log { flex: 1 1 auto; height: auto; min-height: 6rem; }
#xia-panel .asst-quick { flex: 0 0 auto; }
#xia-panel .asst-inputrow { flex: 0 0 auto; flex-wrap: nowrap; }
#xia-panel .asst-foot {
  flex: 0 0 auto; margin-top: 0.45rem; font-size: 0.68rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#xia-panel .row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.55rem; }
#xia-panel .items-center { align-items: center; }
#xia-panel input, #xia-panel select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.42rem 0.6rem; font: 0.85rem var(--mono);
}
#xia-panel input:not([type="checkbox"]) { flex: 1 1 8rem; min-width: 0; }
#xia-panel button {
  background: var(--accent); color: #17130a; border: 0; border-radius: 8px;
  padding: 0.45rem 0.9rem; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
#xia-panel button.secondary { background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); }
.asst-key summary { cursor: pointer; font: 0.78rem var(--mono); color: var(--text-dim); margin-top: 0.7rem; }
.mini { font: 0.75rem/1.5 var(--mono); color: var(--text-dim); margin-top: 0.5rem; }
.mini.err, #engine-status.err { color: var(--accent-3); }
.probbars { margin-top: 1rem; display: grid; gap: 0.4rem; max-width: 560px; }
.pb { display: grid; grid-template-columns: 5.2rem 1fr 3rem; gap: 0.6rem; align-items: center; }
.pb .pl { font: 0.78rem var(--mono); color: var(--text-dim); text-align: right; }
.pb .pt { height: 12px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.pb .pt i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width 0.4s ease; }
.pb:nth-child(1) .pt i { background: #6366f1; }
.pb:nth-child(2) .pt i { background: #8f9099; }
.pb:nth-child(3) .pt i { background: #c9a45c; }
.pb .pv { font: 0.78rem var(--mono); color: var(--text); }
.ctl-label { font: 0.78rem var(--mono); color: var(--text-dim); display: inline-flex; align-items: center; gap: 0.4rem; }
#proto-overlay, #cal-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(6, 8, 12, 0.96);
  display: flex; align-items: center; justify-content: center;
}
#proto-overlay[hidden], #cal-overlay[hidden] { display: none; }
.proto-box { text-align: center; max-width: 620px; padding: 2rem; }
.proto-phase { font: 0.8rem var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; }
.proto-box h2 { margin: 0.4rem 0; }
.proto-target { color: var(--text-dim); }
.proto-count { font: 700 4rem/1.2 var(--mono); color: var(--text); margin: 1rem 0; }
#proto-video { width: 100%; max-height: 58vh; background: #000; border-radius: 8px; margin: 0.8rem 0 0.2rem; }
#proto-video[hidden] { display: none; }
#proto-audio-gate[hidden] { display: none; }
#proto-audio-gate { margin: 0.8rem auto; }
.proto-box.has-video { max-width: min(960px, 94vw); width: 94vw; }
.proto-box.has-video .proto-count { font-size: 1.5rem; margin: 0.3rem 0; }
#rec-s3 { width: 15rem; max-width: 60vw; }

/* sensor rig (guitar page) */
.rig-sensor-card { position: relative; z-index: 2; }
.rig-picker { position: relative; width: min(100%, 38rem); }
.rig-picker > summary {
  display: grid; grid-template-columns: 1fr auto 0.8rem; align-items: center; gap: 0.75rem;
  min-height: 2.7rem; padding: 0.55rem 0.8rem; list-style: none; cursor: pointer;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); font: 600 0.82rem var(--mono);
  transition: border-color 0.15s, background 0.15s;
}
.rig-picker > summary::-webkit-details-marker { display: none; }
.rig-picker > summary:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.rig-picker > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rig-picker-count {
  padding: 0.18rem 0.5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--text-dim) 12%, transparent);
  color: var(--text-dim); font: 500 0.68rem var(--mono); white-space: nowrap;
}
.rig-picker.has-selection .rig-picker-count {
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.rig-picker-chevron {
  width: 0.48rem; height: 0.48rem; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
  color: var(--text-dim); transition: transform 0.18s;
}
.rig-picker[open] .rig-picker-chevron { transform: rotate(225deg) translate(-1px, -1px); }
.rig-picker-menu {
  position: absolute; z-index: 12; left: 0; right: 0; top: calc(100% + 0.4rem);
  max-height: min(31rem, 68vh); overflow-y: auto; padding: 0.35rem 0.65rem;
  background: color-mix(in srgb, var(--bg-raised) 96%, black);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38); scrollbar-width: thin;
}
.rig-row {
  display: grid; grid-template-columns: minmax(10rem, 1fr) auto; align-items: center;
  gap: 0.4rem 0.8rem; padding: 0.58rem 0.15rem;
  border-top: 1px solid var(--line, #26262c);
}
.rig-row:first-child { border-top: 0; }
.rig-check { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.rig-check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.rig-ctl { display: none; align-items: center; justify-content: flex-end; gap: 0.45rem; flex-wrap: wrap; }
.rig-row .mini { display: none; grid-column: 1 / -1; margin: 0 0 0 1.55rem; }
.rig-row.is-selected .rig-ctl { display: inline-flex; }
.rig-row.is-selected .mini { display: block; }
.rig-picker-menu select {
  max-width: 15rem; padding: 0.25rem 0.4rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  font: 0.72rem var(--mono);
}
@media (max-width: 620px) {
  .rig-row { grid-template-columns: 1fr; }
  .rig-row.is-selected .rig-ctl { justify-content: flex-start; margin-left: 1.55rem; }
}
#rig-audio-meter { width: 120px; height: 10px; background: #1a1a1f;
                   border-radius: 3px; align-self: center; }
#rig-s3 { width: 15rem; max-width: 60vw; }
#rig-start.recording { background: #7a2b3a; border-color: #7a2b3a; }
.proto-sr { margin-bottom: 1.2rem; }
.proto-sr p { color: var(--text-dim); margin-bottom: 0.6rem; }
/* These must out-specify `#proto-overlay button` (1,0,1) or every choice
   renders in the solid accent fill and a click produces no visible change. */
#proto-overlay .proto-sr .sr-btn {
  margin: 0 0.3rem; background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border);
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
#proto-overlay .proto-sr .sr-btn:hover { border-color: var(--accent); }
#proto-overlay .proto-sr .sr-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#proto-overlay .proto-sr .sr-btn:active { transform: scale(0.96); }
#proto-overlay .proto-sr .sr-btn.sel {
  background: var(--accent); color: #17130a; border-color: var(--accent);
}
.proto-sr-ack { min-height: 1.1rem; margin-top: 0.6rem; font: 0.78rem var(--mono); color: var(--accent); }

/* post-session decode progress */
.decode-prog { margin: 0 0 1.1rem; }
.decode-prog[hidden] { display: none; }
.decode-prog-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.45rem;
}
.decode-prog-head .decode-label { font: 0.78rem var(--mono); color: var(--text-dim); }
.decode-prog-head button {
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.35rem 0.75rem; font: 700 0.78rem var(--mono); cursor: pointer;
  white-space: nowrap;
}
.decode-prog-head button:hover:not(:disabled) { border-color: var(--accent); }
.decode-prog-head button:disabled { opacity: 0.4; cursor: not-allowed; }
.decode-prog-head button[hidden] { display: none; }
.decode-bar {
  height: 10px; background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.decode-bar i {
  display: block; height: 100%; width: 0; border-radius: 6px;
  background: var(--accent); transition: width 0.15s linear;
}
.decode-bar.done i { background: var(--accent-2); }
.cal-msg { position: absolute; top: 42%; width: 100%; text-align: center; color: var(--text-dim); padding: 0 15%; }
#cal-done { position: absolute; top: 52%; left: 50%; transform: translateX(-50%); }
.cal-dot {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px solid var(--accent-3);
  background: var(--accent-3); opacity: 0.35; cursor: crosshair;
}
.cal-dot.done { background: var(--accent); border-color: var(--accent); opacity: 1; }
.rtable { width: 100%; border-collapse: collapse; margin: 1rem 0 0.6rem; font-size: 0.85rem; }
.rtable th, .rtable td { text-align: left; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--border); }
.rtable th { color: var(--text-dim); font: 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.rtable .mono { font: 0.78rem var(--mono); color: var(--text-dim); }
#webgazerVideoContainer { top: auto !important; bottom: 12px; left: 12px !important; border-radius: 10px; overflow: hidden; }

/* live amp + live transcription (guitar page) */
.live-card { margin-top: 1rem; }
.live-lead { color: var(--text-dim); font-size: 0.93rem; max-width: 74ch; }
.live-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem;
  margin-top: 0.8rem;
}
.live-controls button {
  background: var(--accent); color: #17130a; border: 0; border-radius: 8px;
  padding: 0.45rem 0.9rem; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.live-controls button.recording { background: #7a2b3a; color: var(--text); }
.live-controls select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.3rem 0.5rem; font: 0.78rem var(--mono);
}
.live-controls input[type="range"] { width: 6.5rem; accent-color: var(--accent); cursor: pointer; }
.live-controls input[type="checkbox"] { accent-color: var(--accent); }
.live-view {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 0.8rem; margin-top: 0.9rem;
}
.live-side { display: flex; flex-direction: column; min-width: 0; }
#gl-roll, #gl-fret {
  display: block; width: 100%; background: #0d0d11;
  border: 1px solid var(--border); border-radius: 10px;
}
#gl-roll { height: 230px; }
#gl-fret { height: 150px; }
.live-notes { font: 0.85rem/1.5 var(--mono); color: var(--text); letter-spacing: 0.05em; }
@media (max-width: 760px) { .live-view { grid-template-columns: 1fr; } }

/* ---- scarlet play-along (guitar page) ---- */
.sc-songswitch {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem;
}
.sc-songswitch label {
  color: var(--text-dim); font: 600 0.72rem var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.sc-songswitch select {
  width: min(100%, 24rem); padding: 0.55rem 0.75rem;
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font: 0.82rem var(--mono); cursor: pointer;
}
.sc-songswitch select:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); }
.sc-songswitch select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.scarlet-deck {
  display: grid; grid-template-columns: minmax(240px, 2fr) minmax(300px, 3fr);
  gap: 1.2rem; margin-top: 1.4rem; align-items: start;
}
@media (max-width: 760px) { .scarlet-deck { grid-template-columns: 1fr; } }

.scarlet-art {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); aspect-ratio: 1; max-width: 340px;
  /* --bass is set per-frame by scarlet-player.js from low-band energy */
  box-shadow: 0 0 calc(12px + var(--bass, 0) * 55px)
              color-mix(in srgb, var(--accent-3) calc(20% + var(--bass, 0) * 60%), transparent);
  transition: box-shadow 80ms linear;
}
.scarlet-art img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transform: scale(calc(1 + var(--bass, 0) * 0.045));
  will-change: transform;
}
.scarlet-art .sc-playbtn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 4.2rem; height: 4.2rem; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
  background: rgba(10, 10, 12, 0.55); backdrop-filter: blur(6px);
  color: var(--text); font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s, opacity 0.25s;
}
.scarlet-art .sc-playbtn:hover { background: rgba(10, 10, 12, 0.75); border-color: var(--accent); }
.scarlet-art.playing .sc-playbtn { opacity: 0; }
.scarlet-art.playing:hover .sc-playbtn { opacity: 1; }

.sc-transport { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; max-width: 340px; }
.sc-time { font: 0.78rem var(--mono); color: var(--text-dim); flex: 0 0 auto; min-width: 2.6rem; }
#sc-seek { flex: 1; accent-color: var(--accent); min-width: 0; }

#sc-strings {
  display: block; width: 100%; max-width: 340px; height: 130px; margin-top: 0.9rem;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px;
}

.scarlet-tabwrap { min-width: 0; }
.sc-tabbar {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.45rem 0.2rem 0.55rem;
}
.sc-tabtitle { margin: 0; flex: 1; }
.sc-tabbar select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.15rem 0.3rem; font: 0.78rem var(--mono);
}
.sc-tabbar input[type="checkbox"] { accent-color: var(--accent); }
.sc-tabbar input[type="range"] { width: 5rem; accent-color: var(--accent); cursor: pointer; }
#sc-align-ms { min-width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; }

.sc-tabview {
  position: relative; height: 560px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised);
  scrollbar-width: thin;
}
.sc-tabscroll { position: relative; cursor: pointer; }
.sc-cursor {
  position: absolute; width: 3px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--accent-3) 10%, var(--accent-3) 90%, transparent);
  border-radius: 2px; opacity: 0.85;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-3) 70%, transparent),
              0 0 22px color-mix(in srgb, var(--accent-3) 35%, transparent);
}
.sc-cursor[hidden] { display: none; }
.sc-tabscroll img { display: block; width: 100%; height: auto; }
/* invert the white Guitar Pro export so it reads as native to the dark page */
.sc-tabscroll.inverted img { filter: invert(0.92) hue-rotate(180deg) contrast(0.95); }
@media (max-width: 760px) { .sc-tabview { height: 440px; } }

/* video mode: the clip carries its own tab, so the tab pane drops out and the
   video takes the wide column on the left — art + string bands keep the narrow
   column on the right, mirroring the deck the other two pieces use. */
.scarlet-deck.video-mode { grid-template-columns: minmax(300px, 3fr) minmax(240px, 2fr); }
.scarlet-deck.video-mode .scarlet-video { order: 1; }
.scarlet-deck.video-mode .scarlet-side { order: 2; }
.scarlet-deck.video-mode .scarlet-tabwrap { display: none; }
/* the iframe owns its own transport; ours would be lying */
.scarlet-deck.video-mode .sc-transport,
.scarlet-deck.video-mode .sc-playbtn { display: none; }
.scarlet-deck.video-mode .scarlet-art,
.scarlet-deck.video-mode #sc-strings { max-width: 100%; }
@media (max-width: 760px) { .scarlet-deck.video-mode { grid-template-columns: 1fr; } }
.scarlet-video { min-width: 0; }
.scarlet-video[hidden] { display: none; }
.sc-taprow { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.7rem; }
.sc-taprow .mini { margin: 0; }
.sc-tapbtn {
  flex: 0 0 auto; padding: 0.4rem 0.85rem; cursor: pointer;
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font: 0.78rem var(--mono);
}
.sc-tapbtn:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); }
.sc-tapbtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.sc-videobox {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--bg-raised);
}
.sc-videobox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.scarlet-video .mini { margin: 0.7rem 0 0; max-width: 62ch; }

/* ---- signal-quality indicators (live lab) ---- */
:root {
  --q-good: #4e937a;
  --q-fair: #c9a45c;
  --q-poor: #c0687b;
}
.qbox {
  margin-top: 0.7rem; padding: 0.65rem 0.75rem;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px;
}
.qbox[hidden] { display: none; }
.qbox.gate { margin-top: 0.9rem; }
.qhead {
  display: flex; align-items: center; gap: 0.5rem;
  font: 0.75rem/1.4 var(--mono); color: var(--text-dim);
}
.qhead .ctl-label { margin-left: auto; font-size: 0.7rem; }
.qhead select { padding: 0.15rem 0.3rem; font-size: 0.7rem; }
/* The verdict line is the whole control: the per-channel table it opens is
   long enough on a 16-channel cap to bury the rest of the card, so it lives
   in a modal and only the one-line summary stays on the page. */
.qhead-row { display: flex; align-items: center; gap: 0.5rem; }
.qhead-row .qhead { flex: 1; min-width: 0; }
.qhead-row .ctl-label { font-size: 0.7rem; }
button.qtrigger {
  width: 100%; text-align: left; background: none; border: 0; padding: 0;
  cursor: pointer; color: var(--text-dim);
  /* stated, not inherited: .lab-grid button would otherwise make the verdict
     line bold accent-coloured chrome */
  font: 0.75rem/1.4 var(--mono); font-weight: 400;
}
button.qtrigger:hover, button.qtrigger:focus-visible { color: var(--text); }
button.qtrigger:hover .qmore { border-color: var(--accent); color: var(--text); }
.qmore {
  margin-left: auto; flex: none; font-size: 0.68rem; padding: 0.1rem 0.4rem;
  border: 1px solid var(--border); border-radius: 999px;
}
.qmore::after { content: " ▸"; }
/* Details render only inside the modal — never inline, at any width. */
.qbox .qdetail { display: none; }
#qmodal {
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
  color: var(--text); padding: 1rem 1.1rem; max-width: min(820px, 92vw);
  width: min(820px, 92vw); max-height: 82vh; overflow: auto;
}
#qmodal::backdrop { background: rgba(0, 0, 0, 0.55); }
.qmodal-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.4rem; }
.qmodal-head h3 { margin: 0; font-size: 0.95rem; flex: 1; }
.qmodal-head button {
  padding: 0.3rem 0.75rem; font: 0.75rem var(--mono); cursor: pointer;
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}
.qmodal-head button:hover { border-color: var(--accent); }
.qmodal-body .qdetail { display: block; }
.qmodal-body .qgrid { margin-top: 0.2rem; }
.qmodal-sum {
  font: 0.75rem/1.5 var(--mono); color: var(--text-dim);
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); margin: 0 0 0.7rem;
}
.qdot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--text-dim); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-dim) 18%, transparent);
}
.qdot.good { background: var(--q-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-good) 18%, transparent); }
.qdot.fair { background: var(--q-fair); box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-fair) 18%, transparent); }
.qdot.poor { background: var(--q-poor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-poor) 18%, transparent); }
.qgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 0.3rem; margin-top: 0.55rem;
}
.qch {
  border: 1px solid var(--border); border-radius: 7px; padding: 0.28rem 0.35rem;
  font: 0.68rem/1.25 var(--mono); background: var(--bg-card); cursor: help;
  border-left-width: 3px;
}
.qch.good { border-left-color: var(--q-good); }
.qch.fair { border-left-color: var(--q-fair); }
.qch.poor { border-left-color: var(--q-poor); }
.qch b { display: block; color: var(--text); font-weight: 600; letter-spacing: 0.02em; }
.qch span { color: var(--text-dim); }
.qch .qflag { color: var(--q-poor); }
.qch.fair .qflag { color: var(--q-fair); }
.qissues { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.qissues li {
  font: 0.73rem/1.5 var(--mono); color: var(--text-dim);
  padding: 0.25rem 0 0.25rem 0.7rem; border-left: 2px solid var(--border);
}
.qissues li.poor { border-left-color: var(--q-poor); }
.qissues li.fair { border-left-color: var(--q-fair); }
.qissues li i { display: block; color: color-mix(in srgb, var(--text-dim) 75%, transparent); font-style: normal; }
.qoverride { display: block; margin-top: 0.6rem; cursor: pointer; }
.qoverride input { margin-right: 0.35rem; vertical-align: -1px; }
.qbox.gate.accepted { border-color: color-mix(in srgb, var(--q-good) 45%, var(--border)); }
.qaccepted { margin: 0.4rem 0 0; color: color-mix(in srgb, var(--q-good) 80%, var(--text-dim)); }
.qaccepted[hidden] { display: none; }
.geom-row { gap: 0.6rem; }
.cal-sub {
  position: absolute; top: 47%; width: 100%; text-align: center;
  font: 0.78rem/1.6 var(--mono); color: var(--text-dim); padding: 0 15%;
}
#cal-next { position: absolute; top: 56%; left: 50%; transform: translateX(-50%); }
.cal-dot.val { background: transparent; border-color: var(--accent-2); opacity: 0.9; cursor: default; }
.cal-dot.val.active {
  background: var(--accent-2); opacity: 1;
  animation: calpulse 0.9s ease-in-out infinite;
}
@keyframes calpulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.35); } }
/* Pythia's signal-quality reminders */
.asst-msg.remind {
  border-left: 2px solid var(--q-fair);
  background: color-mix(in srgb, var(--q-fair) 8%, transparent);
}
.asst-msg.remind.poor { border-left-color: var(--q-poor); background: color-mix(in srgb, var(--q-poor) 8%, transparent); }
.asst-msg.remind .remind-mute {
  display: inline-block; margin-top: 0.35rem; font-size: 0.72rem;
  color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.1rem 0.4rem; background: none; cursor: pointer;
}
.asst-msg.remind .remind-mute:hover { border-color: var(--accent); color: var(--text); }
.asst-msg.remind .remind-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* =====================================================================
   mobile polish — phones (~360-640px)
   Appended last on purpose: these override the component styles above at
   equal specificity, so keep this block at the end of the file.
   ===================================================================== */
@media (max-width: 640px) {
  html { -webkit-text-size-adjust: 100%; }

  .wrap { padding: 0 1rem; }

  /* nav: everything stays on one 3.5rem line down to ~360px */
  nav .wrap { gap: 0.5rem; }
  nav .brand { font-size: 1rem; letter-spacing: 0; }
  nav a.link, nav button.link { font-size: 0.85rem; padding: 0.6rem 0.1rem; }
  .xia-btn { width: 2.1rem; height: 2.1rem; }
  /* dropdown becomes a full-width sheet under the sticky nav — roomier tap
     targets than a 14rem hover menu hanging off the right edge */
  .drop-menu {
    position: fixed; left: 0.75rem; right: 0.75rem; top: 3.5rem; min-width: 0;
  }
  .drop-menu a { padding: 0.7rem 0.85rem; font-size: 0.95rem; }

  /* rhythm: tighter vertical + inner padding so content owns the width */
  section { padding: 2rem 0; }
  .hero { padding: 2.25rem 0 1rem; }
  .hero .tag { font-size: 0.98rem; }
  .panel, .chart { padding: 1.1rem; }
  .card { padding: 1.15rem; }
  .grid { gap: 0.9rem; padding-bottom: 2.5rem; }

  /* landing hero: long paragraphs read left-aligned; headings stay centered */
  .hero-copy { padding: 1.25rem 1rem 2.5rem; }
  .hero-copy p { text-align: left; }

  /* stat tiles: two-up beats one long column */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .stat { padding: 0.85rem 0.95rem; }
  .stat .value { font-size: 1.5rem; }

  /* resume */
  .resume-doc section { padding: 1.25rem 0; }
  .portrait { width: min(280px, 80%); }
  .rtable { font-size: 0.78rem; }
  .rtable th, .rtable td { padding: 0.4rem 0.45rem; }

  /* drone sim: overlays shrink so they don't blanket a ~200px-tall canvas */
  .hud { font-size: 10px; line-height: 1.55; padding: 0.35rem 0.55rem; left: 0.6rem; top: 0.6rem; }
  #https-warning { right: 0.6rem; top: 0.6rem; max-width: min(18rem, 65%); font-size: 10px; }
  .sim-controls { gap: 0.55rem; }

  /* scarlet play-along: center the narrow column pieces */
  .scarlet-art, .sc-transport, #sc-strings { margin-left: auto; margin-right: auto; }

  /* protocol overlay */
  #proto-overlay .proto-box { padding: 1.25rem 1rem; }
  .proto-count { font-size: 3rem; }

  /* 16px stops iOS Safari from zooming the page when a field gets focus */
  .lab-grid input, .lab-grid select, section select, section input[type="number"],
  #xia-panel input:not([type="checkbox"]), #xia-panel select,
  .sim-controls select, .sim-settings-menu select, .sc-songswitch select,
  .sc-tabbar select, .live-controls select, .rig-picker-menu select {
    font-size: 16px;
  }

  /* Pythia chat: symmetric margins, near full-screen sheet */
  #xia-panel { left: 0.6rem; right: 0.6rem; top: 4rem; bottom: 0.6rem; width: auto; }
  /* header controls collapse behind the single ⚙ button on phones */
  .set-toggles {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
    padding-bottom: 0.65rem; margin-bottom: 0.65rem;
    border-bottom: 1px solid var(--border);
  }
  #xia-panel .set-toggles .hd-toggle,
  #xia-panel .set-toggles .hd-btn { border: 1px solid var(--border); }
  #xia-panel .set-toggles .hd-toggle:has(input:checked) { border-color: var(--accent); }
  #asst-settings { max-height: 60%; }

  footer { text-align: center; }
}

/* narrow phones (~320-385px, incl. 360px Androids): the nav needs every pixel */
@media (max-width: 385px) {
  nav .wrap { gap: 0.4rem; }
  nav .brand { font-size: 0.92rem; }
  nav a.link, nav button.link { font-size: 0.8rem; }
  .nav-drop .caret { display: none; }
  /* the brand already links home, so the About link is redundant here */
  nav > .wrap > a.link[href="/"] { display: none; }
  .stats { grid-template-columns: 1fr; }
}