/* Shared color values used by the interactive canvases and theme switch. */
:root {
  --bg-rgb: 245, 250, 248;
  --accent-rgb: 17, 100, 102;
  --text-rgb: 44, 53, 49;
  --warm-rgb: 128, 80, 34;
  --peach-rgb: 255, 203, 154;
  --danger-rgb: 135, 80, 45;
  --goal: #345e52;
  --goal-rgb: 52, 94, 82;
  --robot-eye: #ffffff;
  --button-text: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121b19;
  --surface: #192622;
  --surface2: #20332e;
  --accent: #91d3c4;
  --accent2: #e3bd8b;
  --accent3: #e8a681;
  --text: #e1eae4;
  --muted: #b0c2b7;
  --mint: #243f37;
  --peach: #493a2c;
  --sand: #99795a;
  --ochre: #d4ab70;
  --border: rgba(145, 211, 196, .24);
  --border2: rgba(225, 234, 228, .17);
  --bg-rgb: 18, 27, 25;
  --accent-rgb: 145, 211, 196;
  --text-rgb: 225, 234, 228;
  --warm-rgb: 227, 189, 139;
  --peach-rgb: 227, 189, 139;
  --danger-rgb: 232, 166, 129;
  --goal: #b8d6c1;
  --goal-rgb: 184, 214, 193;
  --robot-eye: #152622;
  --button-text: #152622;
}

/* Explicit theme choices and a visible route to the creative portfolio. */
nav { gap: 1rem; }
.nav-actions { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.mode-switch { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.mode-option {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 38px; padding: .4rem .65rem; white-space: nowrap;
  border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted);
  font: .8rem/1.4 var(--font-tech); letter-spacing: .02em; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.mode-option:hover { color: var(--accent); background: var(--surface2); }
.mode-option[aria-pressed="true"] { background: var(--mint); border-color: var(--border); color: var(--accent); }
.mode-fun { color: var(--accent2); border-left-color: var(--border2); border-radius: 0 4px 4px 0; margin-left: 3px; }
.mode-fun:hover { background: var(--peach); color: var(--accent2); }
.mode-option:focus-visible, .section-index a:focus-visible, .section-rail-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A quiet index stays beside the page; the list itself scrolls on short screens. */
section[id] { scroll-margin-top: calc(var(--page-header-height, 100px) + 1rem); }
.section-rail {
  position: fixed; z-index: 90; top: 50%; left: 10px; transform: translateY(-50%);
  display: flex; flex-direction: column; width: 44px; max-height: calc(100dvh - 12rem);
  padding: .45rem 0; overflow: hidden; border: 1px solid var(--border2); border-radius: 8px;
  background: rgba(var(--bg-rgb), .96); transition: width .2s, box-shadow .2s;
}
.section-rail-heading { height: 1.5rem; padding-inline: .7rem; overflow: hidden; white-space: nowrap; color: var(--muted); font: .55rem/1.5rem var(--font-tech); letter-spacing: .07em; }
.section-rail-toggle { display: none; }
.section-index { position: relative; list-style: none; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.section-index a { display: flex; align-items: center; gap: .4rem; min-height: 36px; padding: .35rem .55rem; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; white-space: nowrap; font: .7rem/1.4 var(--font-tech); }
.section-number { flex: 0 0 22px; text-align: center; font-size: .6rem; opacity: .65; }
.section-name { min-width: 0; white-space: normal; opacity: 0; transition: opacity .15s; }
.section-index a:hover { color: var(--accent); background: var(--surface2); }
.section-index a[aria-current="location"] { color: var(--accent); border-left-color: var(--accent); background: var(--surface2); }
.section-index a[aria-current="location"] .section-number { opacity: 1; }
@media (min-width: 901px) and (max-width: 1399px) {
  .section-rail:hover, .section-rail:focus-within { width: 188px; box-shadow: 4px 8px 28px rgba(var(--text-rgb), .08); }
  .section-rail:hover .section-name, .section-rail:focus-within .section-name { opacity: 1; }
}
@media (min-width: 1400px) {
  body { padding-left: 168px; }
  section { padding-left: 3rem; }
  .section-rail { left: 9px; width: 156px; border-color: transparent; border-radius: 0; background: transparent; }
  .section-rail-heading { font-size: .6rem; margin-bottom: .4rem; }
  .section-index { border-left: 1px solid var(--border2); }
  .section-index a { padding-inline: .4rem; gap: .25rem; font-size: .68rem; }
  .section-name { opacity: 1; }
}
@media (max-width: 900px) {
  .section-rail { top: auto; bottom: 1rem; left: 1rem; transform: none; width: 112px; max-height: calc(100dvh - var(--page-header-height, 120px) - 3rem); padding: 0; box-shadow: 0 4px 20px rgba(var(--text-rgb), .1); }
  .section-rail-heading { display: none; }
  .section-rail-toggle { display: flex; align-items: center; justify-content: center; gap: .45rem; flex-shrink: 0; width: 100%; min-height: 44px; padding: .55rem .7rem; border: 0; background: transparent; color: var(--accent); font: .8rem/1.4 var(--font-tech); }
  .section-rail-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  .section-index { display: none; }
  .section-rail.is-open { width: 205px; }
  .section-rail.is-open .section-index { display: block; border-top: 1px solid var(--border); padding-block: .3rem; }
  .section-rail.is-open .section-name { opacity: 1; }
  .section-index a { min-height: 42px; padding-inline: .8rem; font-size: .8rem; }
}
.btn-primary { color: var(--button-text); }
[data-theme="dark"] .btn-primary:hover { background: #b3e5d8; }
[data-theme="dark"] ::selection { background: #e3bd8b; color: #152622; }
[data-theme="dark"] .reticle [stroke] { stroke: var(--accent); }
[data-theme="dark"] .reticle [fill]:not([fill="none"]) { fill: var(--accent); }

/* Match each pastel surface to a dark teal or warm brown counterpart. */
[data-theme="dark"] #hero { background-image: var(--grid), linear-gradient(125deg, #14211d 35%, #302a22 100%); }
[data-theme="dark"] #about,
[data-theme="dark"] #contact { background-color: #172620; }
[data-theme="dark"] #timeline { background-color: #28261f; }
[data-theme="dark"] #projects { background-color: #162720; }
[data-theme="dark"] .current-work { background-color: #19261f; }
[data-theme="dark"] .beyond-lab { background-color: #19251f; }
[data-theme="dark"] .research-horizon { background-color: #29271f; }
[data-theme="dark"] .hero-right .terminal > .terminal-bar,
[data-theme="dark"] .nav-status { background: #3a3025; }
[data-theme="dark"] .edu-card:nth-child(2) { background: #332c24; }
[data-theme="dark"] .edu-card:nth-child(3) { background: #34301f; }
[data-theme="dark"] .scholarship-card { background: #3b3221; }
[data-theme="dark"] .skill-group:nth-child(even),
[data-theme="dark"] .project-card:not(.hero-project):nth-child(3n) { background: #302b24; }
[data-theme="dark"] .hp-stat:nth-child(2) { background: #3a3125; }
[data-theme="dark"] .hp-stat:nth-child(3) { background: #413426; }
[data-theme="dark"] .blog-coming,
[data-theme="dark"] .horizon-feature { background: #242b23; }
[data-theme="dark"] .brain-panel { background-image: var(--grid), radial-gradient(ellipse at center, #51412b, #213b32 80%); }
[data-theme="dark"] .upcoming-card,
[data-theme="dark"] .lab-card,
[data-theme="dark"] .community-card { background: #292b23; }
[data-theme="dark"] .upcoming-card:nth-child(2),
[data-theme="dark"] .lab-card:nth-child(2),
[data-theme="dark"] .community-card:nth-child(2) { background: #22382e; }
[data-theme="dark"] .upcoming-card:nth-child(3),
[data-theme="dark"] .lab-card:nth-child(3),
[data-theme="dark"] .leadership-card { background: #382e23; }
[data-theme="dark"] .lab-pipeline > div:nth-of-type(2) { background: #302b24; }
[data-theme="dark"] .leadership-roles > div { background: rgba(18, 27, 25, .35); }
[data-theme="dark"] .game-overlay { background: rgba(4, 10, 8, .75); }
[data-theme="dark"] .terminal,
[data-theme="dark"] .game-window { box-shadow: 0 12px 36px rgba(0, 0, 0, .2); }

@media (max-width: 1600px) { .nav-status { display: none; } }
@media (max-width: 1380px) { .nav-links { display: none; } }
@media (max-width: 700px) {
  nav { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; }
  .nav-logo { grid-column: 1; grid-row: 1; font-size: .9rem; }
  .nav-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .nav-presence { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin-left: 0; gap: .6rem; font-size: .72rem; }
  .nav-presence .easter-egg { font-size: .7rem; }
  .mode-option { min-height: 36px; font-size: .75rem; padding: .4rem .45rem; gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) { .mode-option, .section-rail, .section-name { transition: none; } }