:root {
  --guide-sea:#176b70;
  --guide-ink:#143d43;
  --guide-muted:#50686b;
  --guide-paper:#fff;
  --guide-page:#f4f8f8;
  --guide-line:#d6e3e3;
  --guide-flower:#f2cb57;
  color-scheme: light;
}
header {
  top: 20px;
  left: 24px;
  right: 24px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto 44px 44px;
  align-items: center;
  gap: 10px;
}
.brand {
  gap: 11px;
  border-radius: 14px;
  box-shadow: 0 3px 20px #143d4310;
  background: #fffffff5;
  padding: 11px 16px 11px 11px;
  justify-self: start;
  color: var(--guide-ink);
}
.brand-icon {
  background: var(--guide-sea);
  border-radius: 10px;
  width: 42px;
  height: 42px;
}
.brand-icon > span {
  color: var(--guide-flower);
}
.brand strong {
  letter-spacing: -.03em;
  font-size: 22px;
}
.brand small {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--guide-muted);
}
.mode-switch {
  margin: 0;
  gap: 4px;
  padding: 5px;
  border: 1px solid #ffffffcc;
  border-radius: 13px;
  background: #fffffff5;
  box-shadow: 0 3px 20px #143d4310;
}
.mode-switch button,
.mode-switch .map-entry {
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
}
.mode-switch button {
  color: var(--guide-ink);
}
.mode-switch button[aria-pressed=true] {
  background: var(--guide-sea);
  color: white;
}
.mode-switch button:not([aria-pressed=true]):hover {
  background: #e6f1f1;
}
.mode-switch .map-entry {
  background: var(--guide-flower);
  color: var(--guide-ink);
}
.round {
  width: 44px;
  height: 44px;
  border: 1px solid #ffffffcc;
  color: var(--guide-ink);
  background: #fffffff5;
  flex: none;
  font-size: 20px;
}
.music-toggle.playing {
  background: var(--guide-sea);
  color: white;
  border-color: var(--guide-sea);
}
.intro {
  top: 130px;
  left: 36px;
  max-width: 340px;
}
.intro .eyebrow {
  letter-spacing: 0;
  font-size: 12px;
  color: var(--guide-sea);
}
.intro .research-title {
  font-size: clamp(25px, 2.3vw, 36px);
  letter-spacing: -.055em;
  color: var(--guide-ink);
}
.intro .research-title > span:first-child {
  font-size: .68em;
}
.intro p {
  font-size: 14px;
  line-height: 1.85;
  max-width: 280px;
  color: var(--guide-ink);
}
.intro .sample-tag {
  font-size: 12px;
  line-height: 1.7;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--guide-ink);
  background: #fffffff0;
}
.view-tools {
  right: 24px;
  top: 110px;
  gap: 8px;
}
.view-tools button {
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #ffffffcc;
  color: var(--guide-ink);
  border-radius: 9px;
}
.view-tools span {
  font-size: 13px;
}
body.download-mode {
  background: var(--guide-page);
  color: var(--guide-ink);
}
.download-mode header {
  grid-template-columns: minmax(190px, 1fr) auto 44px 44px;
  padding: 16px max(24px, calc((100vw - 1248px)/2));
  gap: 10px;
  background: #fffffff5;
  border-color: var(--guide-line);
}
.download-mode .brand {
  padding: 0;
}
.download-mode .brand small {
  font-size: 12px;
}
.download-mode .mode-switch {
  background: var(--guide-page);
  border-color: var(--guide-line);
  box-shadow: none;
}
.download-mode .round {
  margin: 0;
  border-color: var(--guide-line);
}
#download-library {
  padding-top: 40px;
}
.library-heading {
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}
.library-kicker {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--guide-sea);
  margin-bottom: 12px;
}
.library-heading h1 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.45;
  letter-spacing: -.055em;
  color: var(--guide-ink);
}
.library-heading .research-title > span:first-child {
  font-size: .64em;
}
.library-heading p:last-child {
  color: var(--guide-muted);
  line-height: 1.8;
  max-width: 600px;
}
.library-mark {
  border-color: var(--guide-flower);
  color: var(--guide-muted);
  font-size: 13px;
}
.library-notice {
  font-size: 14px;
  color: var(--guide-muted);
  margin-bottom: 20px;
}
.download-grid {
  gap: 20px;
}
.download-card {
  padding: 25px;
  border-color: var(--guide-line);
  border-radius: 16px;
  box-shadow: none;
}
.card-top {
  gap: 12px;
  margin-bottom: 16px;
}
.card-number {
  background: #e6f1f1;
  color: var(--guide-sea);
  border-radius: 10px;
  font-size: 20px;
  min-width: 44px;
  min-height: 44px;
}
.card-label {
  color: var(--guide-muted);
  font-size: 13px;
}
.download-card h2 {
  font-size: 21px;
  color: var(--guide-ink);
  line-height: 1.5;
}
.card-description {
  font-size: 15px;
  color: var(--guide-muted);
  line-height: 1.85;
}
.material-tags span {
  font-size: 12px;
  color: var(--guide-muted);
  background: var(--guide-page);
  padding: 5px 8px;
}
.card-actions {
  border-color: var(--guide-line);
  gap: 6px;
}
.download-action {
  background: var(--guide-sea);
  border-color: var(--guide-sea);
  min-height: 50px;
  border-radius: 9px;
  font-size: 14px;
}
.download-action:hover {
  background: var(--guide-ink);
  border-color: var(--guide-ink);
}
.detail-action {
  color: var(--guide-sea);
  font-size: 14px;
}
.category-cover {
  background: var(--guide-page);
  border: 1px solid var(--guide-line);
  border-radius: 10px;
}
.category-cover span {
  font-size: 13px;
  color: var(--guide-sea);
  padding: 12px;
}
.download-guide {
  background: #e6f1f1;
  border-color: var(--guide-line);
  border-radius: 14px;
}
.download-guide h2 {
  color: var(--guide-ink);
}
.download-guide p,
.download-guide ol {
  color: var(--guide-muted);
}
.feedback-process {
  border-color: var(--guide-line);
}
.download-footer {
  color: var(--guide-muted);
}
dialog {
  background: var(--guide-paper);
  color: var(--guide-ink);
  border: 1px solid var(--guide-line);
  border-radius: 20px;
}
dialog .close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: var(--guide-page);
  color: var(--guide-ink);
}
dialog .eyebrow {
  color: var(--guide-sea);
  letter-spacing: 0;
}
.folder-panel {
  background: var(--guide-page);
  border-color: var(--guide-line);
}
.dialog-tabs button.active {
  background: var(--guide-sea);
  border-color: var(--guide-sea);
}
.guide-row span,
dialog > p {
  color: var(--guide-muted);
}
@media (max-width: 1100px) {
  header {
    grid-template-columns: minmax(170px, 1fr) auto 44px 44px;
    left: 16px;
    right: 16px;
  }
  .brand small {
    display: none;
  }
  .brand {
    padding: 10px;
  }
  .brand strong {
    font-size: 20px;
  }
  .mode-switch button,
  .mode-switch .map-entry {
    padding-inline: 10px;
    font-size: 12px;
  }
  .download-mode header {
    grid-template-columns: minmax(170px, 1fr) auto 44px 44px;
    padding: 14px 20px;
  }
  .download-mode .brand small {
    display: none;
  }
  .intro {
    left: 26px;
  }
  .library-heading .research-title {
    font-size: 32px;
  }
}
@media (max-width: 780px) {
  header,
  .download-mode header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    gap: 8px;
  }
  .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 8px 11px;
    gap: 8px;
  }
  .brand-icon {
    width: 34px;
    height: 34px;
    font-size: 23px;
  }
  .brand strong {
    font-size: 20px;
  }
  .music-toggle {
    grid-column: 2;
    grid-row: 1;
  }
  #help {
    grid-column: 3;
    grid-row: 1;
  }
  .mode-switch,
  body:not(.download-mode) .mode-switch {
    grid-column: 1/-1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    max-width: none;
    gap: 3px;
    width: 100%;
    padding: 4px;
    order: 0;
  }
  .mode-switch button,
  .mode-switch .map-entry,
  body:not(.download-mode) .mode-switch button {
    white-space: normal;
    word-break: keep-all;
    min-height: 44px;
    margin: 0;
    padding: 8px 5px;
    font-size: 12px;
    line-height: 1.5;
  }
  .mode-switch .map-entry {
    order: 0;
    min-width: 0;
  }
  .download-mode .round {
    margin: 0;
  }
  .download-mode .brand {
    padding: 0;
  }
  .view-tools {
    top: 142px;
    right: 16px;
    display: flex;
    flex-direction: row;
    gap: 7px;
  }
  .view-tools button {
    padding: 9px 11px;
    font-size: 16px;
  }
  .view-tools span {
    font-size: 12px;
  }
  .intro {
    top: 148px;
    left: 24px;
    max-width: 250px;
  }
  .intro .research-title {
    font-size: 28px;
  }
  .intro p,
  .intro .sample-tag {
    display: none;
  }
  .download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .download-card {
    padding: 20px;
  }
  .library-heading .research-title {
    font-size: 30px;
  }
  .download-mode #download-library {
    padding: 28px 20px 32px;
  }
  .download-guide {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .library-heading {
    margin-bottom: 24px;
  }
  .library-mark {
    display: none;
  }
}
@media (max-width: 650px) {
  header {
    top: max(10px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
  }
  .download-mode header {
    top: 0;
    padding: 12px 16px;
    gap: 8px;
  }
  .download-grid {
    grid-template-columns: 1fr;
  }
  .download-card {
    padding: 22px;
  }
  .library-heading .research-title {
    font-size: 29px;
  }
  .library-heading p:last-child {
    font-size: 14px;
  }
  .library-notice {
    font-size: 13px;
  }
  .download-mode #download-library {
    padding: 26px 16px 32px;
  }
  .intro {
    display: none;
  }
  .view-tools {
    top: 138px;
  }
  .round {
    width: 44px;
    height: 44px;
  }
  .download-guide {
    padding: 22px;
  }
  .download-footer {
    font-size: 13px;
  }
  .category-cover img {
    height: 165px;
  }
  .card-description {
    font-size: 15px;
  }
}
@media (pointer: coarse) and (orientation: landscape) {
  header {
    top: 8px;
    grid-template-columns: minmax(130px, 1fr) auto 44px 44px;
  }
  .brand {
    grid-column: auto;
    grid-row: auto;
  }
  .mode-switch,
  body:not(.download-mode) .mode-switch {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    display: flex;
  }
  .music-toggle,
  #help {
    grid-column: auto;
    grid-row: auto;
  }
  .view-tools {
    top: 77px;
  }
  .download-mode header {
    grid-template-columns: minmax(130px, 1fr) auto 44px 44px;
  }
  .download-mode .mode-switch {
    grid-column: auto;
    grid-row: auto;
  }
  .brand small {
    display: none;
  }
  .mode-switch button,
  .mode-switch .map-entry {
    font-size: 11px;
    padding: 7px 8px;
  }
  .brand strong {
    font-size: 18px;
  }
  .brand-icon {
    width: 30px;
    height: 30px;
  }
  .brand {
    padding: 6px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
.download-card .category-cover {
  margin: 18px 0 0;
}
.download-card .category-cover img {
  height: 100px;
}
.download-card .category-cover span {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.download-card .material-tags {
  margin-top: auto;
}
.download-card .card-actions {
  padding-top: 16px;
}
/* The entrance is part of the scene; the skip action stays available above it. */
.entering-classroom .intro,.entering-classroom .view-tools,.entering-classroom .location,.entering-classroom .controls,.entering-classroom #joystick,.entering-classroom .game-actions,.entering-classroom #crosshair,.entering-classroom #look-hint{visibility:hidden}
#entrance-status{position:fixed;z-index:32;bottom:64px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(440px,calc(100% - 32px));padding:12px 12px 12px 20px;border:1px solid #d6e3e3;border-radius:14px;background:#ffffffed;box-shadow:0 8px 28px #143d4320;color:#143d43}
#entrance-status span{font-size:14px;font-weight:600;line-height:1.6}#entrance-status button{min-height:44px;flex:none;padding:10px 14px;border:0;border-radius:9px;background:#176b70;color:white;font-size:14px;font-weight:700}#entrance-status button:hover{background:#143d43}.download-mode #entrance-status{display:none!important}
@media(max-width:650px){#entrance-status{bottom:48px;gap:12px;padding-left:15px}#entrance-status span{font-size:13px}}