/* Appearance controls stay in the same place across every chapter. */
.site-controls { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.appearance-control { position: relative; }
.theme-toggle,.sound-toggle { display: inline-flex; justify-content: center; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid #c3d0da; border-radius: 6px; background: transparent; color: var(--muted); font: 12px/1 var(--sans); }
.theme-toggle svg,.sound-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.theme-toggle:hover,.sound-toggle:hover { background: var(--accent-soft); border-color: var(--accent); }
.sound-toggle[aria-pressed="true"] { color: var(--accent-dark); background: var(--accent-soft); }
.theme-options { position: absolute; top: calc(100% + 10px); right: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; width: 230px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); box-shadow: 0 12px 35px #172b4924; z-index: 50; }
.theme-options button { border: 0; border-radius: 7px; background: transparent; padding: 9px 8px; font-size: 13px; }
.theme-options button[aria-pressed="true"] { background: #426da5; color: #fff; }
.theme-options button:hover:not([aria-pressed="true"]) { background: var(--accent-soft); }
.theme-options p { grid-column: 1/-1; margin: 3px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
/* The same counter element stays mounted, with its original ID and source URL. */
.content-open .site-bottom > .flex.justify-center.mb-8 { display: none; }

:root { --garden-page: 245,247,252; }
body,.site-header,.site-bottom,.journey-route,.research-direction,.research-goal,.project-card { transition: background-color .9s ease,color .9s ease,border-color .9s ease; }
.scene-enhanced .guide-viewport::after { background: linear-gradient(90deg,rgba(var(--garden-page),1) 0%,rgba(var(--garden-page),.96) 23%,rgba(var(--garden-page),.85) 34%,rgba(var(--garden-page),.21) 48%,transparent 59%); }
.scene-enhanced.content-open .guide-viewport::after { background: linear-gradient(90deg,rgba(var(--garden-page),1) 0px,rgba(var(--garden-page),1) calc(var(--reader-edge,62.5vw) - 28px),rgba(var(--garden-page),.97) var(--reader-edge,62.5vw),rgba(var(--garden-page),.68) calc(var(--reader-edge,62.5vw) + 40px),rgba(var(--garden-page),.18) calc(var(--reader-edge,62.5vw) + 95px),rgba(var(--garden-page),0) calc(var(--reader-edge,62.5vw) + 145px)); }
.guide-backdrop { background: radial-gradient(ellipse at 80% 55%,var(--accent-soft),var(--page) 80%); }
html[data-theme="night"] { color-scheme: dark; --garden-page: 16,27,45; --page: #101b2d; --surface: #18263b; --ink: #e1e9f7; --muted: #a9bad2; --accent: #93b9ee; --accent-dark: #bad4f8; --accent-soft: #233653; --line: #314360; }
html[data-theme="night"] body { background: var(--page); color: var(--ink); }
html[data-theme="night"] .site-header { background: #101b2ded; border-color: #314360; }
html[data-theme="night"] .wordmark { color: #b2cff4; }
html[data-theme="night"] .profile-vision em { color: #a7c8f5; }
html[data-theme="night"] .bio,html[data-theme="night"] .research-interests span,html[data-theme="night"] .social-links a,html[data-theme="night"] .profile-updates li a,html[data-theme="night"] .profile-updates time,html[data-theme="night"] .profile-kicker { color: var(--muted); }
html[data-theme="night"] .bio strong,html[data-theme="night"] .profile-updates li a strong { color: var(--ink); }
html[data-theme="night"] .social-links img { filter: invert(.85); }
html[data-theme="night"] .primary-action,html[data-theme="night"] .chapter-navigation .next-stop { background: #4877b7; border-color: #4877b7; color: #fff; }
html[data-theme="night"] .secondary-action,html[data-theme="night"] .section-nav a,html[data-theme="night"] .chapter-counter { color: #b1caeb; }
html[data-theme="night"] .profile-updates,html[data-theme="night"] .chapter-navigation { border-color: var(--line); background: transparent; }
html[data-theme="night"] .scene-enhanced .journey-route { background: #132037; border-color: var(--line); }
html[data-theme="night"] .route-header strong,html[data-theme="night"] .route-track a { color: #a5bedf; }
html[data-theme="night"] .route-track a[aria-current] { color: #e0edff; }
html[data-theme="night"] .route-dot { background: #192b45; border-color: #819ec5; }
html[data-theme="night"] .route-track a[aria-current] .route-dot { background: #b3cef6; border-color: #c7dcfa; box-shadow: 0 0 0 4px #273e5c; }
html[data-theme="night"] .route-track a.is-visited:not([aria-current]) .route-dot { background: #607ea7; border-color: #88a6cd; }
html[data-theme="night"] .route-line { background: #3e5574; }
html[data-theme="night"] .route-robot { filter: drop-shadow(0 1px 3px #090f20) brightness(1.12); }
html[data-theme="night"] .tour-toggle,html[data-theme="night"] .motion-toggle,html[data-theme="night"] .theme-toggle,html[data-theme="night"] .sound-toggle { color: #c1d6f2; border-color: #4e688b; }
html[data-theme="night"] .tour-toggle { background: #1d304b; }
html[data-theme="night"] .tour-toggle[aria-pressed="true"] { background: #426ca5; color: #fff; }
html[data-theme="night"] .world-tip,html[data-theme="night"] .journey-status,html[data-theme="night"] .countdown-copy { color: #c1d4ee; }
html[data-theme="night"] .world-reset,html[data-theme="night"] .guide-play,html[data-theme="night"] .compact-guide-action { background: #182b45e8; border-color: #4a6386; color: #c6d9f4; }
html[data-theme="night"] .guide-play button { color: #c6d9f4; }
html[data-theme="night"] .guide-play button:hover { background: #2b4467; }
html[data-theme="night"] .world-marker { background: #19304e; border-color: #7395c0; color: #e4efff; }
html[data-theme="night"] .world-marker > span { color: #b6ccea; }
html[data-theme="night"] .world-marker:hover,html[data-theme="night"] .world-marker[aria-current] { background: #416da7; }
html[data-theme="night"] .research-goal { background: linear-gradient(115deg,#213853,#17273e); border-color: #405d82; }
html[data-theme="night"] .research-direction { background: #16263be8; border-color: #354c6c; }
html[data-theme="night"] .research-direction:hover { background: #203754; border-color: #739bcb; }
html[data-theme="night"] .direction-topline,html[data-theme="night"] .direction-art { color: #9ebfe9; }
html[data-theme="night"] .research-directions::before,html[data-theme="night"] .research-directions::after,html[data-theme="night"] .research-direction::before { background: #4e6d94; }
html[data-theme="night"] .publication:hover,html[data-theme="night"] .publication:target { background: #21375466; }
html[data-theme="night"] .venue-conference { background: #233b5a; border-color: #4b6b93; color: #c1d8f5; }
html[data-theme="night"] .year-filters button[aria-pressed="true"] { background: #4977b3; color: #fff; }
html[data-theme="night"] .paper-image { background: #fff; border-color: #5b7090; }
html[data-theme="night"] .content-open .reader .project-card { background: #1a2c44; border-color: #3b5273; }
html[data-theme="night"] .project-card > p,html[data-theme="night"] .project-card .project-detail,html[data-theme="night"] .modality-list span { color: #b7cae3; }
html[data-theme="night"] .project-card > p strong,html[data-theme="night"] .project-links a { color: #d8e8fd; }
html[data-theme="night"] .project-bottom,html[data-theme="night"] .modality-list span { border-color: #49617f; }
html[data-theme="night"] .chapter-navigation button { background: #1a2c44; border-color: #526c8f; color: #c9def7; }
html[data-theme="night"] .chapter-navigation .next-stop { background: #4877b7; color: #fff; }
html[data-theme="night"] .site-bottom,html[data-theme="night"] .content-open .site-bottom { background: var(--page); }
html[data-theme="night"] .asset-credits { border-color: var(--line); color: var(--muted); }
html[data-theme="night"] ::selection { background: #395d8b; color: #fff; }
@media (max-width: 1150px) { .site-header { gap: 18px; }.main-nav { gap: 17px; }.theme-toggle span,.sound-toggle span { display: none; }.theme-toggle,.sound-toggle { width: 34px; padding: 0; } }
@media (max-width: 960px) {
  .scene-enhanced .guide-viewport::after { display: none; }
  .scene-enhanced.content-open .guide-viewport::after {
    display: block;
    background: linear-gradient(180deg,rgba(var(--garden-page),.45) 0px,rgba(var(--garden-page),0) 14px,rgba(var(--garden-page),0) calc(100% - 42px),rgba(var(--garden-page),.15) calc(100% - 30px),rgba(var(--garden-page),.65) calc(100% - 14px),rgba(var(--garden-page),1) 100%);
  }
  .scene-enhanced.content-open .journey-main { background: var(--page); }
}
@media (max-width: 600px) {
  .site-controls { gap: 5px; }.site-controls button.motion-toggle { width: 34px; padding: 0; height: 34px; }.motion-toggle > span { display: none; }
  .theme-options { right: -76px; width: 224px; }
  .theme-toggle::after,.sound-toggle::after { content: ""; position: absolute; inset: -4px 0; }
  .theme-toggle,.sound-toggle { position: relative; }
  .scene-enhanced:not(.content-open) .guide-viewport::after { display: block; background: linear-gradient(180deg,rgba(var(--garden-page),1) 0%,rgba(var(--garden-page),0) 15%,rgba(var(--garden-page),0) 90%,rgba(var(--garden-page),1) 100%); }
  html[data-theme="night"] .scene-enhanced:not(.content-open) .guide-viewport { background: transparent; }
}
@media (min-width: 600px) and (max-width: 960px) and (max-height: 450px) {
  .scene-enhanced.content-open .journey-layout > .guide-stage { right: 150px; }
  .scene-enhanced.content-open .guide-viewport::after { background: linear-gradient(180deg,rgba(var(--garden-page),.2),rgba(var(--garden-page),0) 25%,rgba(var(--garden-page),0) 70%,rgba(var(--garden-page),.5)); }
}
@media (prefers-reduced-motion: reduce) { body,.site-header,.site-bottom,.journey-route,.research-direction,.research-goal,.project-card { transition: none; } }

/* A dedicated lane for the running guide, with labels below its feet. */
.scene-enhanced .journey-route { padding-top: 6px; padding-bottom: 9px; }
.route-track { height: 100%; }
.route-track a { min-height: 0; padding-top: 0; gap: 8px; line-height: 1.5; }
.route-traveler { width: 64px; height: 64px; }
.site-controls .tour-toggle { height: 34px; padding: 0 10px; gap: 6px; border-radius: 6px; font-size: 12px; }
.site-controls .tour-toggle > span:first-child { width: 14px; text-align: center; }
@media (max-width: 1150px) { .site-controls .tour-toggle { width: 34px; padding: 0; justify-content: center; }.site-controls .tour-toggle > span:last-child { display: none; } }
@media (max-width: 600px) {
  .scene-enhanced .site-header { padding-left: 18px; padding-right: 18px; gap: 8px; }
  .route-traveler { width: 52px; height: 52px; }
}
@media (min-width: 600px) and (max-width: 960px) and (max-height: 450px) {
  .scene-enhanced.content-open .journey-layout > .guide-stage { right: 194px; }
  .route-traveler { width: 44px; height: 44px; }
}

/* Let the research and project content sit in the page, without card outlines. */
.research-goal,
html[data-theme="night"] .research-goal {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
}
.research-direction,
html[data-theme="night"] .research-direction {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
}
.research-direction:hover,
html[data-theme="night"] .research-direction:hover {
  border-color: transparent;
  background: linear-gradient(90deg,var(--accent-soft),transparent);
  box-shadow: none;
}
.research-direction:hover h3 { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.research-direction,
.research-direction:hover { border-top-color: #c5d4e7; }
html[data-theme="night"] .research-direction,
html[data-theme="night"] .research-direction:hover { border-top-color: #435d7f; }
.content-open .reader .project-card,
html[data-theme="night"] .content-open .reader .project-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 0 0;
}
.project-card .modality-list span { border-color: transparent; padding-left: 0; padding-right: 10px; }
html[data-theme="night"] .project-card .modality-list span { border-color: transparent; }
