:root {
  --bg:         #f3f5f7;
  --surface:    #ffffff;
  --surface-2:  #eaecf0;
  --hdr-bg:     #ffffff;
  --border:     #ccd2db;
  --text:       #1a2028;
  --muted:      #5a6472;
  --accent:     #1a6bce;
  --accent-bg:  #ddeeff;
  --connector:  #9daab8;
  --mono: ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace;
  --sans: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --r: 8px;

  --m-neutral: #647587; --m-happy: #c98900; --m-sad: #2268cc;
  --m-excited: #d8590c; --m-sleepy: #7b62d4; --m-angry: #cc2828;
  --m-love: #cc2f74;   --m-nervous:#b87a00; --m-bored: #4e8f12;
  --m-evil: #7a1fa8;   --m-surprised:#c4a90a; --m-confused:#0886a0;
}
@media (prefers-color-scheme: dark) { :root {
  --bg:         #0d1117;
  --surface:    #141b22;
  --surface-2:  #1c2430;
  --hdr-bg:     #212e3d;
  --border:     #27333f;
  --text:       #c8d1da;
  --muted:      #6b7888;
  --accent:     #4d9ef7;
  --accent-bg:  #0c1e36;
  --connector:  #2d3c4e;
  --m-neutral: #7e8fa0; --m-happy: #f0a820; --m-sad: #4a90f5;
  --m-excited: #f07530; --m-sleepy: #9f88f5; --m-angry: #f04848;
  --m-love: #f04888;   --m-nervous:#e0a018; --m-bored: #78cc18;
  --m-evil: #b060f0;   --m-surprised:#f0d020; --m-confused:#10c0d8;
}}
:root[data-theme="light"] {
  --bg:#f3f5f7; --surface:#fff; --surface-2:#eaecf0; --hdr-bg:#ffffff; --border:#ccd2db;
  --text:#1a2028; --muted:#5a6472; --accent:#1a6bce; --accent-bg:#ddeeff; --connector:#9daab8;
  --m-neutral:#647587; --m-happy:#c98900; --m-sad:#2268cc; --m-excited:#d8590c;
  --m-sleepy:#7b62d4; --m-angry:#cc2828; --m-love:#cc2f74; --m-nervous:#b87a00;
  --m-bored:#4e8f12; --m-evil:#7a1fa8; --m-surprised:#c4a90a; --m-confused:#0886a0;
}
:root[data-theme="dark"] {
  --bg:#0d1117; --surface:#141b22; --surface-2:#1c2430; --hdr-bg:#212e3d; --border:#27333f;
  --text:#c8d1da; --muted:#6b7888; --accent:#4d9ef7; --accent-bg:#0c1e36; --connector:#2d3c4e;
  --m-neutral:#7e8fa0; --m-happy:#f0a820; --m-sad:#4a90f5; --m-excited:#f07530;
  --m-sleepy:#9f88f5; --m-angry:#f04848; --m-love:#f04888; --m-nervous:#e0a018;
  --m-bored:#78cc18; --m-evil:#b060f0; --m-surprised:#f0d020; --m-confused:#10c0d8;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family: var(--sans);
  background-color: var(--bg);
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  padding: 32px 16px 64px;
}
.page { max-width: 900px; margin: 0 auto; }
a { color: var(--accent); }

/* ── header ── */
.hdr {
  background: var(--hdr-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px 24px 20px;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px;
  position: sticky;
  top: 0;
  z-index: 20;
  overflow: hidden;
}
.hdr-copy { flex: 1; min-width: 0; }
.eyebrow {
  font-family: var(--mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 5px;
}
h1 {
  font-family: var(--mono);
  font-size: 30px; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
  text-wrap: balance;
  display: flex; align-items: center; gap: 10px;
}
.tagline { font-size: 12px; color: var(--muted); margin-top: 6px; max-width: 46ch; }
.hdr-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.theme-btn {
  font-family: var(--mono);
  font-size: 10px; color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  text-decoration: none;
  width: 108px;
  text-align: center;
}
.theme-btn:hover { filter: brightness(1.05); }
.upgrade-btn {
  color: var(--accent);
  background: var(--accent-bg);
  border-color: var(--accent);
}
.status-chip {
  font-family: var(--mono);
  font-size: 9px; color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ── firmware install (upgrade page) ── */
.install-row { display: flex; align-items: center; gap: 10px; }
.install-btn {
  font-size: 12px; padding: 8px 16px; width: auto;
  color: var(--accent); background: var(--accent-bg); border-color: var(--accent);
}
.build-select {
  font-family: var(--mono);
  font-size: 11px; color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
}

/* 3D mascot — lives in the title's flex row, to the right of "ROCAT", where it
   roams the blank space; js/cat3d.js bobs it up/down and spins it once
   (front → back → front) across the full page scroll range */
.cat3d {
  width: 60px; height: 60px;
  flex-shrink: 0;
  margin-left: auto;
  pointer-events: none;
  will-change: transform;
  position: relative;
  overflow: visible; /* canvas grows past this box's layout size near the bottom of the page */
}
.cat3d canvas { display: block; position: absolute; }
@media (max-width: 600px) { .cat3d { width: 44px; height: 44px; } }

/* ── connector ── */
.conn {
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 0; gap: 0;
}
.conn-line { width: 2px; height: 18px; background: var(--connector); }
.conn-label {
  font-family: var(--mono);
  font-size: 9px; color: var(--muted);
  background: var(--bg);
  padding: 0 5px; margin: 1px 0;
  letter-spacing: 0.08em; text-transform: uppercase;
  position: relative; z-index: 1;
}
.conn-arrowhead {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--connector);
}

/* ── cards ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
}
.clabel {
  font-family: var(--mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.clabel-name { color: var(--text); }
.clabel-sub { font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:9px; }

/* ── quick facts chips ── */
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 4px; padding: 3px 8px;
  font-family: var(--mono);
  font-size: 10px; color: var(--text);
  white-space: nowrap;
}
.chip b { color: var(--accent); font-weight: 700; }

/* ── feature grid ── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 760px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .feature-grid { grid-template-columns: 1fr; } }

.feature {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fc, var(--accent));
  border-radius: 6px;
  padding: 10px 12px;
  transition: transform .12s ease, box-shadow .12s ease;
  text-decoration: none;
  display: block;
  color: var(--text);
}
.feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.feature-head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fc, var(--accent));
  margin-bottom: 5px;
}
.fdot { width: 7px; height: 7px; border-radius: 1px; background: var(--fc, var(--accent)); flex-shrink: 0; }
.feature-desc { font-size: 11px; color: var(--muted); line-height: 1.55; }

/* ── system diagram ── */
.diagram {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 10px;
  align-items: center;
}
@media (max-width: 700px) { .diagram { grid-template-columns: 1fr; } }
.dcol { display: flex; flex-direction: column; gap: 8px; }
.dcol-head {
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; color: var(--muted);
  padding-bottom: 4px;
}
.dbox {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 10px;
  text-align: center;
  color: var(--text);
}
.dbox.core {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
  padding: 16px 10px;
}
.darrows { display: flex; align-items: center; justify-content: center; color: var(--connector); font-size: 16px; }
@media (max-width: 700px) { .darrows { transform: rotate(90deg); } }

/* ── docs list ── */
.doclist { display: flex; flex-direction: column; }
.docrow {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px; align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.docrow:last-child { border-bottom: none; }
.docrow:hover .docname { color: var(--accent); }
.docname { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text); }
.docdesc { font-size: 11px; color: var(--muted); }
.docdesc code {
  font-family: var(--mono); font-size: 10px; color: var(--accent);
  background: var(--accent-bg); padding: 0 3px; border-radius: 2px;
}

/* ── notes / footer ── */
.sfooter { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.note {
  border-left: 3px solid var(--border);
  border-radius: 0 4px 4px 0;
  padding: 6px 10px;
  font-size: 11px; color: var(--muted);
  background: var(--surface-2);
  line-height: 1.6;
}
.note.a { border-left-color: var(--accent); color: var(--text); }
.note code {
  font-family: var(--mono); font-size: 10px; color: var(--accent);
  background: var(--accent-bg); padding: 0 3px; border-radius: 2px;
}
footer.page-footer {
  margin-top: 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.04em;
}