:root {
  --bg: #e7e4da;

  --surface: #f6f5ef;

  --ink: #20251f;

  --muted: #737a72;

  --line:
    rgba(
      35,
      42,
      35,
      0.15
    );

  --olive:
    #607057;

  --olive-dark:
    #3f4d3c;

  --olive-soft:
    #dfe4da;

  --overlay:
    rgba(
      25,
      31,
      26,
      0.86
    );

  --safe-top:
    env(
      safe-area-inset-top,
      0px
    );

  --safe-bottom:
    env(
      safe-area-inset-bottom,
      0px
    );
}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing:
    border-box;
}


[hidden] {
  display:
    none !important;
}


html,
body {
  width:
    100%;

  min-height:
    100%;

  margin:
    0;
}


html {
  background:
    var(--bg);
}


body {
  min-width:
    320px;

  color:
    var(--ink);

  background:
    var(--bg);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


button,
input {
  font:
    inherit;
}


button {
  -webkit-tap-highlight-color:
    transparent;
}


h1,
h2,
p {
  margin-top:
    0;
}


h1,
h2 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
}


/* =========================================================
   APP
   ========================================================= */

.app-shell {
  width:
    min(
      100%,
      1200px
    );

  margin:
    0 auto;

  padding:
    calc(
      12px +
      var(--safe-top)
    )
    12px
    calc(
      24px +
      var(--safe-bottom)
    );
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  margin-bottom:
    12px;

  padding:
    11px 12px;

  border:
    1px solid
    var(--line);

  border-radius:
    18px;

  background:
    #faf9f4;
}


.brand-lockup {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.brand-mark {
  display:
    grid;

  width:
    44px;

  height:
    44px;

  place-content:
    center;

  border-radius:
    50%;

  color:
    white;

  background:
    var(--olive-dark);

  font-family:
    Georgia,
    serif;

  font-weight:
    700;
}


.eyebrow {
  margin:
    0 0 3px;

  color:
    var(--olive);

  font-size:
    0.57rem;

  font-weight:
    900;

  letter-spacing:
    0.12em;
}


.topbar h1 {
  margin:
    0;

  font-size:
    1.3rem;
}


.checkpoint-badge {
  display:
    flex;

  align-items:
    baseline;

  gap:
    5px;

  padding:
    8px 10px;

  border-left:
    1px solid
    var(--line);
}


.checkpoint-badge span {
  font-family:
    Georgia,
    serif;

  font-size:
    1.3rem;

  font-weight:
    700;
}


.checkpoint-badge small {
  color:
    var(--muted);
}


/* =========================================================
   LAYOUT
   ========================================================= */

.tour-layout {
  display:
    grid;

  gap:
    12px;
}


/* =========================================================
   VIEWER
   ========================================================= */

.viewer-card {
  position:
    relative;

  min-height:
    72vh;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      35,
      42,
      35,
      0.22
    );

  border-radius:
    24px;

  background:
    #293029;

  isolation:
    isolate;
}


.panorama {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  width:
    100%;

  height:
    100%;

  background:
    #293029;
}


.pnlm-container,
.pnlm-render-container,
.pnlm-container canvas {
  width:
    100% !important;

  height:
    100% !important;
}


.pnlm-container {
  background:
    #293029 !important;
}


.pnlm-load-box,
.pnlm-loading {
  display:
    none !important;
}


/* =========================================================
   PANORAMA TRANSITION
   ========================================================= */

.viewer-card.is-transitioning
.panorama {
  opacity:
    0.92;
}


.viewer-shade {
  position:
    absolute;

  inset:
    0;

  z-index:
    4;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(
        10,
        14,
        11,
        0.35
      ),
      transparent 24%
    ),

    linear-gradient(
      0deg,
      rgba(
        10,
        14,
        11,
        0.38
      ),
      transparent 25%
    );
}


/* =========================================================
   LOADING
   ========================================================= */

.loading-overlay {
  position:
    absolute;

  inset:
    0;

  z-index:
    30;

  display:
    grid;

  place-content:
    center;

  opacity:
    0;

  pointer-events:
    none;

  background:
    rgba(
      20,
      25,
      21,
      0.08
    );
}


.viewer-card.show-loading
.loading-overlay {
  opacity:
    1;
}


.loading-spinner {
  width:
    34px;

  height:
    34px;

  border:
    3px solid
    rgba(
      255,
      255,
      255,
      0.25
    );

  border-top-color:
    white;

  border-radius:
    50%;

  animation:
    loadingSpin
    0.7s
    linear
    infinite;
}


@keyframes loadingSpin {

  to {
    transform:
      rotate(
        360deg
      );
  }

}


/* =========================================================
   VIEWER OVERLAY
   ========================================================= */

.viewer-overlay {
  position:
    absolute;

  z-index:
    20;
}


/* =========================================================
   TOP LOCATION
   ========================================================= */

.top-overlay {
  top:
    13px;

  right:
    13px;

  left:
    13px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.location-pill {
  display:
    flex;

  align-items:
    center;

  min-width:
    0;

  gap:
    10px;

  padding:
    9px 13px 9px 10px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );

  border-radius:
    12px;

  color:
    white;

  background:
    var(--overlay);

  box-shadow:
    0 7px 20px
    rgba(
      0,
      0,
      0,
      0.18
    );
}


.location-pill small {
  display:
    block;

  margin-bottom:
    2px;

  color:
    rgba(
      255,
      255,
      255,
      0.58
    );

  font-size:
    0.54rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}


.location-pill strong {
  display:
    block;

  overflow:
    hidden;

  max-width:
    50vw;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-family:
    Georgia,
    serif;

  font-size:
    1rem;
}


.location-pin {
  position:
    relative;

  display:
    grid;

  width:
    27px;

  height:
    27px;

  flex:
    0 0 auto;

  place-content:
    center;

  border-radius:
    50% 50% 50% 8px;

  background:
    #e8e1ce;

  transform:
    rotate(
      -45deg
    );
}


.location-pin span {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--olive-dark);
}


/* =========================================================
   FULLSCREEN BUTTON
   ========================================================= */

.icon-button {
  display:
    grid;

  width:
    45px;

  height:
    45px;

  flex:
    0 0 auto;

  place-content:
    center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-radius:
    50%;

  color:
    white;

  background:
    var(--overlay);

  font-size:
    1.1rem;

  cursor:
    pointer;

  box-shadow:
    0 7px 20px
    rgba(
      0,
      0,
      0,
      0.18
    );
}


/* =========================================================
   RIGHT NAVBAR
   ========================================================= */

.side-actions {
  top:
    50%;

  right:
    11px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    7px;

  transform:
    translateY(
      -50%
    );
}


/* =========================================================
   ALL ROUND ACTION
   ========================================================= */

.round-action {
  display:
    flex;

  width:
    54px;

  height:
    54px;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    1px;

  padding:
    0;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-radius:
    50%;

  color:
    white;

  background:
    rgba(
      25,
      31,
      26,
      0.86
    );

  box-shadow:
    0 7px 20px
    rgba(
      0,
      0,
      0,
      0.20
    );

  cursor:
    pointer;

  transition:
    background 150ms ease,
    opacity 150ms ease,
    transform 150ms ease;
}


.round-action:hover,
.round-action:active {
  background:
    rgba(
      53,
      64,
      51,
      0.95
    );

  transform:
    scale(
      1.04
    );
}


.round-action > span {
  font-size:
    1rem;

  font-weight:
    900;

  line-height:
    1;
}


.round-action small {
  margin-top:
    3px;

  color:
    rgba(
      255,
      255,
      255,
      0.78
    );

  font-size:
    0.48rem;

  font-weight:
    700;

  letter-spacing:
    0;
}


/* =========================================================
   NEXT / BACK
   ========================================================= */

.route-action {
  border-color:
    rgba(
      255,
      255,
      255,
      0.24
    );

  background:
    rgba(
      38,
      46,
      38,
      0.92
    );
}


.route-action-primary {
  border-color:
    rgba(
      235,
      231,
      216,
      0.40
    );

  background:
    rgba(
      59,
      70,
      56,
      0.96
    );
}


.route-nav-icon {
  font-family:
    Arial,
    sans-serif;

  font-size:
    1.35rem !important;

  line-height:
    1 !important;
}


.route-action.is-disabled,
.route-action:disabled {
  opacity:
    0.32;

  cursor:
    default;

  transform:
    none;
}


.route-action:disabled:hover {
  background:
    rgba(
      38,
      46,
      38,
      0.92
    );
}


/* =========================================================
   DIVIDER
   ========================================================= */

.side-divider {
  display:
    block;

  width:
    28px;

  height:
    1px;

  margin:
    2px 0;

  background:
    rgba(
      255,
      255,
      255,
      0.28
    );
}


/* =========================================================
   AUDIO ACTIVE
   ========================================================= */

.round-action.active {
  color:
    #293029;

  background:
    #eee9da;
}


.round-action.active small {
  color:
    #3e493a;
}


/* =========================================================
   BOTTOM STATUS
   ========================================================= */

.route-hint {
  bottom:
    14px;

  left:
    14px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  max-width:
    calc(
      100% - 85px
    );

  padding:
    9px 11px 9px 8px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.17
    );

  border-radius:
    12px;

  color:
    white;

  background:
    rgba(
      23,
      28,
      24,
      0.83
    );
}


.route-hint-mark {
  position:
    relative;

  display:
    block;

  width:
    30px;

  height:
    30px;

  flex:
    0 0 auto;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.26
    );

  border-radius:
    50%;
}


.route-hint-mark::before {
  position:
    absolute;

  top:
    8px;

  left:
    8px;

  width:
    12px;

  height:
    12px;

  content:
    "";

  border-top:
    2px solid white;

  border-right:
    2px solid white;

  transform:
    rotate(
      45deg
    );
}


.route-hint strong {
  display:
    block;

  font-family:
    Georgia,
    serif;

  font-size:
    0.82rem;
}


.route-hint small {
  display:
    block;

  margin-top:
    2px;

  color:
    rgba(
      255,
      255,
      255,
      0.60
    );

  font-size:
    0.45rem;

  font-weight:
    900;

  letter-spacing:
    0.03em;
}


/* =========================================================
   MUSEUM NOTIFICATION
   ========================================================= */

.museum-notice {
  bottom:
    80px;

  left:
    14px;

  display:
    grid;

  grid-template-columns:
    36px minmax(0, 1fr) 16px;

  align-items:
    center;

  width:
    min(
      310px,
      calc(
        100% - 88px
      )
    );

  min-height:
    56px;

  gap:
    9px;

  padding:
    8px 9px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.34
    );

  border-radius:
    14px;

  color:
    var(--ink);

  background:
    rgba(
      248,
      246,
      237,
      0.95
    );

  box-shadow:
    0 12px 30px
    rgba(
      0,
      0,
      0,
      0.26
    );

  text-align:
    left;

  cursor:
    pointer;

  backdrop-filter:
    blur(
      12px
    );

  animation:
    museumNoticeIn
    0.46s
    0.65s
    ease-out
    both;

  transition:
    background 150ms ease,
    transform 150ms ease;
}


.museum-notice:hover,
.museum-notice:active,
.museum-notice[aria-expanded="true"] {
  background:
    white;

  transform:
    translateY(
      -2px
    );
}


.museum-notice-icon {
  position:
    relative;

  display:
    grid;

  width:
    36px;

  height:
    36px;

  place-content:
    center;

  border-radius:
    11px;

  color:
    white;

  background:
    var(--olive-dark);

  font-family:
    Georgia,
    serif;

  font-size:
    1rem;

  font-weight:
    800;
}


.museum-notice-dot {
  position:
    absolute;

  top:
    -3px;

  right:
    -3px;

  width:
    10px;

  height:
    10px;

  border:
    2px solid
    #f8f6ed;

  border-radius:
    50%;

  background:
    #d9853b;

  box-shadow:
    0 0 0 0
    rgba(
      217,
      133,
      59,
      0.5
    );

  animation:
    museumNoticePulse
    2s
    ease-out
    infinite;
}


.museum-notice-copy {
  min-width:
    0;
}


.museum-notice-copy small,
.museum-notice-copy strong {
  display:
    block;
}


.museum-notice-copy small {
  margin-bottom:
    2px;

  color:
    var(--olive);

  font-size:
    0.49rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}


.museum-notice-copy strong {
  display:
    -webkit-box;

  overflow:
    hidden;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;

  font-family:
    Georgia,
    serif;

  font-size:
    0.84rem;

  line-height:
    1.18;
}


.museum-notice-arrow {
  color:
    var(--olive-dark);

  font-size:
    1.5rem;

  line-height:
    1;
}


@keyframes museumNoticeIn {

  from {
    opacity:
      0;

    transform:
      translateY(
        12px
      )
      scale(
        0.97
      );
  }


  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }

}


@keyframes museumNoticePulse {

  70%,
  100% {
    box-shadow:
      0 0 0 8px
      rgba(
        217,
        133,
        59,
        0
      );
  }

}


/* =========================================================
   GUIDE / NORMAL CARDS
   ========================================================= */

.guide-card,
.checkpoint-strip,
.analog-card {
  border:
    1px solid
    var(--line);

  border-radius:
    18px;

  background:
    #f9f8f3;
}


/* =========================================================
   GUIDE
   ========================================================= */

.guide-card {
  display:
    grid;

  grid-template-columns:
    70px 1fr;

  gap:
    14px;

  padding:
    16px;
}


.guide-avatar-wrap {
  position:
    relative;

  width:
    70px;

  height:
    70px;
}


.guide-avatar-wrap img,
.guide-fallback {
  width:
    100%;

  height:
    100%;

  border:
    1px solid
    var(--line);

  border-radius:
    50%;

  background:
    var(--olive-soft);

  object-fit:
    cover;
}


.guide-fallback {
  display:
    none;

  place-content:
    center;

  font-family:
    Georgia,
    serif;
}


.guide-status {
  position:
    absolute;

  right:
    2px;

  bottom:
    2px;

  width:
    14px;

  height:
    14px;

  border:
    3px solid white;

  border-radius:
    50%;

  background:
    var(--olive);
}


.guide-heading {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;
}


.guide-heading small,
.strip-heading small,
.analog-card small,
.sheet-panel small {
  color:
    var(--muted);

  font-size:
    0.53rem;

  font-weight:
    900;

  letter-spacing:
    0.09em;
}


.guide-heading h2 {
  margin:
    2px 0 0;

  font-size:
    1.05rem;
}


.guide-copy p {
  margin:
    7px 0 0;

  color:
    #3d443d;

  font-size:
    0.85rem;

  line-height:
    1.5;
}


.text-button {
  border:
    0;

  color:
    var(--olive-dark);

  background:
    transparent;

  font-size:
    0.7rem;

  font-weight:
    800;

  cursor:
    pointer;
}


/* =========================================================
   CHECKPOINT
   ========================================================= */

.checkpoint-strip,
.analog-card {
  padding:
    17px;
}


.strip-heading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    13px;
}


.strip-heading h2 {
  margin:
    2px 0 0;

  font-size:
    1.05rem;
}


.score-label {
  padding:
    6px 9px;

  border:
    1px solid
    var(--line);

  border-radius:
    999px;

  color:
    var(--olive-dark);

  font-size:
    0.68rem;

  font-weight:
    800;
}


.checkpoint-list {
  display:
    grid;

  grid-auto-flow:
    column;

  grid-auto-columns:
    minmax(
      115px,
      1fr
    );

  gap:
    8px;

  overflow-x:
    auto;

  padding-bottom:
    5px;
}


.checkpoint-item {
  min-height:
    93px;

  padding:
    11px;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  color:
    var(--ink);

  background:
    white;

  text-align:
    left;

  cursor:
    pointer;
}


.checkpoint-item.active {
  border-color:
    var(--olive);

  background:
    var(--olive-soft);
}


.checkpoint-number {
  display:
    grid;

  width:
    28px;

  height:
    28px;

  margin-bottom:
    8px;

  place-content:
    center;

  border-radius:
    50%;

  background:
    #e5e1d5;

  font-family:
    Georgia,
    serif;

  font-weight:
    700;
}


.checkpoint-item.completed
.checkpoint-number {
  color:
    white;

  background:
    var(--olive);
}


.checkpoint-item strong {
  display:
    block;

  font-family:
    Georgia,
    serif;

  font-size:
    0.8rem;
}


.checkpoint-item small {
  display:
    block;

  margin-top:
    4px;

  color:
    var(--muted);

  font-size:
    0.46rem;
}


/* =========================================================
   ANALOG
   ========================================================= */

.analog-card {
  display:
    grid;

  grid-template-columns:
    1fr auto;

  align-items:
    center;

  gap:
    16px;
}


.analog-card h2 {
  margin:
    2px 0 0;
}


.analog-card p {
  margin:
    7px 0 0;

  color:
    var(--muted);

  font-size:
    0.78rem;

  line-height:
    1.5;
}


.joystick {
  display:
    grid;

  grid-template:
    repeat(
      3,
      36px
    )
    /
    repeat(
      3,
      36px
    );

  gap:
    3px;
}


.joystick-button,
.joystick-center {
  border:
    1px solid
    var(--line);

  border-radius:
    50%;

  background:
    white;

  cursor:
    pointer;
}


.joystick-button.up {
  grid-area:
    1 / 2;
}


.joystick-button.left {
  grid-area:
    2 / 1;
}


.joystick-center {
  grid-area:
    2 / 2;

  font-size:
    0.52rem;

  font-weight:
    900;
}


.joystick-button.right {
  grid-area:
    2 / 3;
}


.joystick-button.down {
  grid-area:
    3 / 2;
}


/* =========================================================
   MODAL / SHEET
   ========================================================= */

.sheet,
.modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    1000000;

  visibility:
    hidden;

  opacity:
    0;
}


.sheet.open,
.modal.open {
  visibility:
    visible;

  opacity:
    1;
}


.sheet-backdrop,
.modal-backdrop {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  border:
    0;

  background:
    rgba(
      15,
      19,
      16,
      0.62
    );
}


.sheet-panel {
  position:
    absolute;

  right:
    0;

  bottom:
    0;

  left:
    0;

  max-height:
    88vh;

  overflow-y:
    auto;

  padding:
    12px 17px
    calc(
      23px +
      var(--safe-bottom)
    );

  border-radius:
    24px 24px 0 0;

  background:
    #f4f2eb;
}


.sheet-handle {
  width:
    40px;

  height:
    4px;

  margin:
    0 auto 14px;

  border-radius:
    99px;

  background:
    #aaa99f;
}


.sheet-title-row,
.quiz-topline {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.close-button {
  display:
    grid;

  width:
    38px;

  height:
    38px;

  place-content:
    center;

  border:
    1px solid
    var(--line);

  border-radius:
    50%;

  background:
    white;

  cursor:
    pointer;
}


/* =========================================================
   MUSEUM INFO SHEET
   ========================================================= */

.museum-info-panel {
  width:
    min(
      100%,
      620px
    );

  max-height:
    min(
      88vh,
      780px
    );

  max-height:
    min(
      88dvh,
      780px
    );

  margin-inline:
    auto;

  color:
    var(--ink);

  box-shadow:
    0 -18px 50px
    rgba(
      0,
      0,
      0,
      0.22
    );

  overscroll-behavior:
    contain;
}


.museum-info-panel:focus {
  outline:
    none;
}


.museum-info-panel
.sheet-title-row h2 {
  margin:
    2px 0 0;

  font-size:
    1.32rem;

  overflow-wrap:
    anywhere;
}


.museum-info-panel
.sheet-title-row > div {
  min-width:
    0;
}


.museum-info-panel
.close-button {
  flex:
    0 0 38px;
}


.museum-intro {
  margin-top:
    16px;

  padding:
    16px;

  border:
    1px solid
    rgba(
      63,
      77,
      60,
      0.15
    );

  border-radius:
    16px;

  background:
    linear-gradient(
      135deg,
      #e3e6db,
      #f0ecdf
    );
}


.museum-intro > span {
  display:
    inline-flex;

  padding:
    5px 8px;

  border-radius:
    999px;

  color:
    white;

  background:
    var(--olive-dark);

  font-size:
    0.53rem;

  font-weight:
    900;

  letter-spacing:
    0.09em;
}


.museum-intro p {
  margin:
    11px 0 0;

  color:
    #3f463e;

  font-family:
    Georgia,
    serif;

  font-size:
    1rem;

  line-height:
    1.48;
}


.museum-topics {
  display:
    grid;

  gap:
    10px;

  margin-top:
    10px;
}


.museum-topic {
  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  border-radius:
    16px;

  background:
    white;
}


.museum-topic-summary {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr) 24px;

  align-items:
    center;

  min-height:
    58px;

  gap:
    10px;

  padding:
    11px 12px;

  cursor:
    pointer;

  list-style:
    none;
}


.museum-topic-summary::-webkit-details-marker {
  display:
    none;
}


.museum-topic-summary small,
.museum-topic-summary strong {
  display:
    block;
}


.museum-topic-summary small {
  margin-bottom:
    4px;

  color:
    var(--olive);

  font-size:
    0.56rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}


.museum-topic-summary strong {
  font-family:
    Georgia,
    serif;

  font-size:
    0.92rem;

  line-height:
    1.25;
}


.museum-topic-chevron {
  color:
    var(--olive-dark);

  font-size:
    1.55rem;

  line-height:
    1;

  text-align:
    center;

  transform:
    rotate(0deg);

  transition:
    transform 160ms ease;
}


.museum-topic[open]
.museum-topic-chevron {
  transform:
    rotate(90deg);
}


.museum-topic-body {
  padding:
    12px;

  border-top:
    1px solid
    var(--line);

  background:
    #faf9f5;
}


.museum-topic-body > p {
  margin:
    0;

  color:
    #4d554c;

  font-size:
    0.79rem;

  line-height:
    1.55;
}


.museum-document {
  margin:
    11px 0 0;

  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  border-radius:
    13px;

  background:
    #e8e6de;
}


.museum-document-link {
  display:
    block;

  background:
    #e8e6de;
}


.museum-document-image {
  display:
    block;

  width:
    100%;

  height:
    auto;

  object-fit:
    contain;
}


.museum-document figcaption {
  padding:
    9px 10px;

  color:
    #596057;

  background:
    white;

  font-size:
    0.72rem;

  line-height:
    1.4;
}


.museum-facts {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    8px;

  margin-top:
    10px;
}


.museum-fact {
  min-width:
    0;

  padding:
    13px 11px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    white;
}


.museum-fact strong {
  display:
    block;

  color:
    var(--olive-dark);

  font-family:
    Georgia,
    serif;

  font-size:
    1.15rem;
}


.museum-fact p {
  margin:
    6px 0 0;

  color:
    #596057;

  font-size:
    0.72rem;

  line-height:
    1.42;
}


.museum-quiz-cta {
  display:
    grid;

  grid-template-columns:
    40px minmax(0, 1fr) 18px;

  align-items:
    center;

  width:
    100%;

  min-height:
    62px;

  gap:
    10px;

  margin-top:
    10px;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(
      63,
      77,
      60,
      0.22
    );

  border-radius:
    14px;

  color:
    var(--ink);

  background:
    var(--olive-soft);

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background 150ms ease,
    transform 150ms ease;
}


.museum-quiz-cta:hover,
.museum-quiz-cta:active {
  background:
    #d4ddcf;

  transform:
    translateY(
      -1px
    );
}


.museum-quiz-icon {
  display:
    grid;

  width:
    40px;

  height:
    40px;

  place-content:
    center;

  border-radius:
    12px;

  color:
    white;

  background:
    var(--olive-dark);

  font-family:
    Georgia,
    serif;

  font-size:
    1.05rem;

  font-weight:
    800;
}


.museum-quiz-copy {
  min-width:
    0;
}


.museum-quiz-copy small,
.museum-quiz-copy strong {
  display:
    block;
}


.museum-quiz-copy small {
  margin-bottom:
    3px;

  color:
    var(--olive);

  font-size:
    0.5rem;

  font-weight:
    900;

  letter-spacing:
    0.07em;
}


.museum-quiz-copy strong {
  font-family:
    Georgia,
    serif;

  font-size:
    0.84rem;

  line-height:
    1.25;
}


.museum-quiz-arrow {
  color:
    var(--olive-dark);

  font-size:
    1.5rem;

  line-height:
    1;
}


.museum-visit-note {
  display:
    grid;

  grid-template-columns:
    34px minmax(0, 1fr);

  gap:
    10px;

  margin-top:
    10px;

  padding:
    12px;

  border:
    1px solid
    #decaa9;

  border-radius:
    14px;

  background:
    #f6ead6;
}


.museum-visit-note > span {
  display:
    grid;

  width:
    34px;

  height:
    34px;

  place-content:
    center;

  border-radius:
    50%;

  color:
    white;

  background:
    #956333;

  font-family:
    Georgia,
    serif;

  font-weight:
    800;
}


.museum-visit-note strong,
.museum-visit-note p,
.museum-visit-note small {
  display:
    block;
}


.museum-visit-note strong {
  font-size:
    0.78rem;
}


.museum-visit-note p {
  margin:
    3px 0;

  color:
    #5b5143;

  font-size:
    0.73rem;

  line-height:
    1.4;
}


.museum-visit-note a {
  color:
    #67411e;

  font-weight:
    850;
}


.museum-visit-note small {
  color:
    #766b5d;

  font-size:
    0.64rem;

  line-height:
    1.4;
}


.aira-assistant {
  display:
    grid;

  grid-template-columns:
    minmax(120px, 142px)
    minmax(0, 1fr);

  align-items:
    center;

  gap:
    14px;

  margin-top:
    10px;

  overflow:
    hidden;

  padding:
    10px 14px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius:
    18px;

  color:
    white;

  background:
    var(--olive-dark);
}


.aira-character-wrap {
  position:
    relative;

  display:
    grid;

  min-width:
    0;

  min-height:
    226px;

  padding-top:
    6px;

  overflow:
    hidden;

  place-items:
    end center;
}


.aira-character {
  display:
    block;

  width:
    auto;

  max-width:
    100%;

  height:
    auto;

  max-height:
    220px;

  object-fit:
    contain;

  object-position:
    center bottom;

  transform-origin:
    center bottom;
}


.aira-fallback {
  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-content:
    center;
}


.aira-fallback[hidden],
.aira-character[hidden] {
  display:
    none;
}


.aira-fallback strong {
  position:
    relative;

  z-index:
    1;

  display:
    grid;

  width:
    56px;

  height:
    56px;

  place-content:
    center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.25
    );

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      0.10
    );

  font-family:
    Georgia,
    serif;

  font-size:
    1.15rem;
}


.aira-copy {
  align-self:
    center;

  min-width:
    0;

  padding-right:
    7px;
}


.museum-info-panel
.aira-eyebrow {
  display:
    block;

  margin:
    0;

  color:
    #d9d2bd;

  font-size:
    0.65rem;

  font-weight:
    900;

  letter-spacing:
    0.09em;
}


.aira-name {
  margin:
    3px 0 7px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.28rem;
}


.aira-message {
  margin:
    0;

  color:
    rgba(
      255,
      255,
      255,
      0.82
    );

  font-size:
    0.82rem;

  line-height:
    1.5;

  overflow-wrap:
    anywhere;
}


.museum-info-sheet.open
.aira-assistant {
  animation:
    airaEnter
    380ms
    ease-out
    both;
}


.museum-info-sheet.open
.aira-character {
  animation:
    airaIdle
    4.5s
    ease-in-out
    infinite;
}


.museum-info-sheet.open
.aira-character.is-speaking {
  animation:
    airaSpeaking
    820ms
    ease-in-out
    infinite;
}


@keyframes airaEnter {
  from {
    opacity:
      0;

    transform:
      translateY(8px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }
}


@keyframes airaIdle {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(0deg)
      scale(1);
  }

  25% {
    transform:
      translateY(-2px)
      rotate(-0.4deg)
      scale(1.005);
  }

  50% {
    transform:
      translateY(-4px)
      rotate(0deg)
      scale(1.01);
  }

  75% {
    transform:
      translateY(-2px)
      rotate(0.4deg)
      scale(1.005);
  }
}


@keyframes airaSpeaking {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-0.35deg)
      scale(1);
  }

  45% {
    transform:
      translateY(-7px)
      rotate(0.45deg)
      scale(1.018);
  }

  70% {
    transform:
      translateY(-2px)
      rotate(-0.2deg)
      scale(1.006);
  }
}


.museum-source-link {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-top:
    10px;

  padding:
    11px 12px;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  color:
    var(--olive-dark);

  background:
    white;

  font-size:
    0.73rem;

  font-weight:
    800;

  text-decoration:
    none;
}


.museum-source-link
> span[aria-hidden="true"] {
  font-size:
    1.2rem;

  line-height:
    1;
}


#museumSourceLabel {
  min-width:
    0;

  font-size:
    inherit;

  line-height:
    1.35;
}


.museum-notice:focus-visible,
.museum-info-panel button:focus-visible,
.museum-info-panel a:focus-visible,
.museum-topic-summary:focus-visible {
  outline:
    3px solid
    #d7bd84;

  outline-offset:
    3px;
}


.museum-topic-summary:focus-visible,
.museum-document-link:focus-visible {
  outline-offset:
    -3px;
}


/* =========================================================
   MAP
   ========================================================= */

.route-map {
  position:
    relative;

  height:
    180px;

  margin-top:
    15px;

  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    #e6e1d5;
}


.map-road {
  position:
    absolute;

  background:
    #c5c1b5;
}


.map-road-main {
  top:
    -30px;

  left:
    45%;

  width:
    36px;

  height:
    250px;

  transform:
    rotate(
      25deg
    );
}


.map-road-side {
  top:
    75px;

  left:
    -20px;

  width:
    120%;

  height:
    23px;

  transform:
    rotate(
      -7deg
    );
}


.map-block {
  position:
    absolute;

  border:
    1px solid
    var(--line);

  background:
    rgba(
      255,
      255,
      255,
      0.55
    );
}


.block-one {
  top:
    20px;

  left:
    10%;

  width:
    70px;

  height:
    34px;
}


.block-two {
  right:
    8%;

  bottom:
    28px;

  width:
    80px;

  height:
    43px;
}


.block-three {
  top:
    20px;

  right:
    15%;

  width:
    48px;

  height:
    55px;
}


.map-start-pin,
.map-current-pin {
  position:
    absolute;

  z-index:
    2;

  display:
    grid;

  width:
    32px;

  height:
    32px;

  place-content:
    center;

  border:
    3px solid white;

  border-radius:
    50%;

  color:
    white;

  font-weight:
    900;
}


.map-start-pin {
  top:
    30px;

  left:
    38%;

  background:
    #aa9367;
}


.map-current-pin {
  top:
    92px;

  left:
    56%;

  background:
    var(--olive-dark);
}


.map-caption {
  position:
    absolute;

  right:
    9px;

  bottom:
    9px;

  left:
    9px;

  z-index:
    3;

  padding:
    9px;

  border-radius:
    9px;

  background:
    rgba(
      255,
      255,
      255,
      0.94
    );
}


.map-caption strong {
  display:
    block;

  font-family:
    Georgia,
    serif;
}


.map-checkpoint-list {
  display:
    grid;

  gap:
    7px;

  margin-top:
    14px;
}


.map-checkpoint-item {
  display:
    grid;

  grid-template-columns:
    40px 1fr;

  align-items:
    center;

  gap:
    10px;

  padding:
    9px;

  border:
    1px solid
    var(--line);

  border-radius:
    11px;

  background:
    white;

  text-align:
    left;

  cursor:
    pointer;
}


.map-checkpoint-item.active {
  border-color:
    var(--olive);

  background:
    var(--olive-soft);
}


.map-number {
  display:
    grid;

  width:
    38px;

  height:
    38px;

  place-content:
    center;

  border-radius:
    50%;

  color:
    white;

  background:
    var(--olive);
}


/* =========================================================
   QUIZ
   ========================================================= */

.quiz-card {
  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    min(
      calc(
        100% - 28px
      ),
      460px
    );

  max-height:
    calc(
      100vh - 34px
    );

  max-height:
    calc(
      100dvh - 34px
    );

  overflow-y:
    auto;

  padding:
    20px;

  border-radius:
    22px;

  background:
    #f8f6ef;

  transform:
    translate(
      -50%,
      -50%
    );
}


.flashcard-icon {
  display:
    grid;

  width:
    54px;

  height:
    54px;

  margin:
    14px 0;

  place-content:
    center;

  border-radius:
    50%;

  background:
    var(--olive-soft);

  font-family:
    Georgia,
    serif;

  font-size:
    1.3rem;
}


.answer-list {
  display:
    grid;

  gap:
    8px;

  margin:
    15px 0;
}


.answer-option {
  position:
    relative;
}


.answer-option input {
  position:
    absolute;

  opacity:
    0;
}


.answer-option input:focus-visible + label {
  outline:
    3px solid
    #d7bd84;

  outline-offset:
    2px;
}


.answer-option label {
  display:
    grid;

  grid-template-columns:
    34px 1fr;

  align-items:
    center;

  gap:
    10px;

  padding:
    9px;

  border:
    1px solid
    var(--line);

  border-radius:
    11px;

  background:
    white;

  cursor:
    pointer;
}


.answer-option label
span:first-child {
  display:
    grid;

  width:
    31px;

  height:
    31px;

  place-content:
    center;

  border-radius:
    50%;

  background:
    var(--olive-soft);
}


.answer-option
input:checked + label {
  border-color:
    var(--olive);

  background:
    var(--olive-soft);
}


.answer-option.correct label {
  border-color:
    #607858;
}


.answer-option.wrong label {
  border-color:
    #a45447;
}


.quiz-feedback {
  min-height:
    20px;

  font-size:
    0.8rem;

  font-weight:
    800;
}


.quiz-feedback.success {
  color:
    #4c6946;
}


.quiz-feedback.error {
  color:
    #984c40;
}


.submit-answer {
  width:
    100%;

  min-height:
    48px;

  border:
    0;

  border-radius:
    11px;

  color:
    white;

  background:
    var(--olive-dark);

  font-weight:
    800;

  cursor:
    pointer;
}


.submit-answer:disabled {
  opacity:
    0.55;
}


/* =========================================================
   TOAST
   ========================================================= */

.toast {
  position:
    fixed;

  right:
    14px;

  bottom:
    calc(
      16px +
      var(--safe-bottom)
    );

  left:
    14px;

  z-index:
    1000001;

  max-width:
    430px;

  margin:
    auto;

  padding:
    11px 13px;

  border-radius:
    10px;

  color:
    white;

  background:
    rgba(
      25,
      31,
      26,
      0.95
    );

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translateY(
      10px
    );

  transition:
    0.18s ease;
}


.toast.show {
  opacity:
    1;

  transform:
    translateY(
      0
    );
}


/* =========================================================
   AUTO FULLSCREEN
   ========================================================= */

html.viewer-fullscreen-open,
body.viewer-fullscreen-open {
  width:
    100% !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  overscroll-behavior:
    none !important;
}


.viewer-card.mobile-fullscreen {
  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    999999 !important;

  width:
    100vw !important;

  height:
    100vh !important;

  height:
    100dvh !important;

  min-height:
    100vh !important;

  min-height:
    100dvh !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    #202620 !important;
}


.viewer-card.mobile-fullscreen
.panorama {
  width:
    100% !important;

  height:
    100% !important;
}


.viewer-card.mobile-fullscreen
.top-overlay {
  top:
    calc(
      13px +
      env(
        safe-area-inset-top,
        0px
      )
    ) !important;

  right:
    calc(
      13px +
      env(
        safe-area-inset-right,
        0px
      )
    ) !important;

  left:
    calc(
      13px +
      env(
        safe-area-inset-left,
        0px
      )
    ) !important;
}


.viewer-card.mobile-fullscreen
.side-actions {
  right:
    calc(
      10px +
      env(
        safe-area-inset-right,
        0px
      )
    ) !important;
}


.viewer-card.mobile-fullscreen
.museum-notice {
  bottom:
    calc(
      80px +
      env(
        safe-area-inset-bottom,
        0px
      )
    );

  left:
    calc(
      12px +
      env(
        safe-area-inset-left,
        0px
      )
    );
}


.viewer-card.mobile-fullscreen
.route-hint {
  bottom:
    calc(
      14px +
      env(
        safe-area-inset-bottom,
        0px
      )
    ) !important;

  left:
    calc(
      12px +
      env(
        safe-area-inset-left,
        0px
      )
    ) !important;
}


/* =========================================================
   PHONE
   ========================================================= */

@media (
  max-width: 520px
) {

  .location-pill strong {
    max-width:
      43vw;
  }


  .museum-notice {
    width:
      min(
        292px,
        calc(
          100% - 76px
        )
      );
  }


  .museum-info-panel {
    padding-right:
      14px;

    padding-left:
      14px;
  }


  .museum-facts {
    grid-template-columns:
      none;

    grid-auto-flow:
      column;

    grid-auto-columns:
      minmax(
        132px,
        1fr
      );

    overflow-x:
      auto;

    padding-bottom:
      4px;

    scroll-snap-type:
      x mandatory;
  }


  .museum-fact {
    scroll-snap-align:
      start;
  }


  .aira-assistant {
    grid-template-columns:
      minmax(100px, 116px)
      minmax(0, 1fr);

    gap:
      11px;

    padding:
      10px;
  }


  .aira-character-wrap {
    min-height:
      186px;
  }


  .aira-character {
    max-height:
      180px;
  }


  .round-action {
    width:
      51px;

    height:
      51px;
  }


  .route-nav-icon {
    font-size:
      1.28rem !important;
  }


  .side-actions {
    gap:
      6px;
  }


  .route-hint {
    max-width:
      calc(
        100% - 72px
      );
  }


  .analog-card {
    grid-template-columns:
      1fr;
  }


  .joystick {
    justify-self:
      center;
  }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (
  max-width: 350px
) {

  .aira-assistant {
    grid-template-columns:
      1fr;
  }


  .aira-character-wrap {
    width:
      min(100%, 132px);

    min-height:
      161px;

    justify-self:
      center;
  }


  .aira-character {
    max-height:
      155px;
  }


  .aira-copy {
    padding-right:
      0;

    text-align:
      center;
  }

}


/* =========================================================
   PHONE PENDEK
   ========================================================= */

@media (
  max-height: 680px
) {

  .museum-notice {
    bottom:
      72px;

    min-height:
      51px;
  }


  .viewer-card.mobile-fullscreen
  .museum-notice {
    bottom:
      calc(
        72px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );
  }


  .round-action {
    width:
      46px;

    height:
      46px;
  }


  .round-action > span {
    font-size:
      0.9rem;
  }


  .route-nav-icon {
    font-size:
      1.15rem !important;
  }


  .round-action small {
    margin-top:
      1px;

    font-size:
      0.41rem;
  }


  .side-actions {
    gap:
      5px;
  }


  .side-divider {
    margin:
      0;
  }

}


/* =========================================================
   LANDSCAPE PHONE
   ========================================================= */

@media (
  orientation: landscape
)
and (
  max-height: 600px
) {

  .side-actions {
    right:
      8px;
  }


  .round-action {
    width:
      43px;

    height:
      43px;
  }


  .round-action small {
    display:
      none;
  }


  .route-hint {
    bottom:
      7px;
  }


  .museum-notice,
  .viewer-card.mobile-fullscreen
  .museum-notice {
    bottom:
      calc(
        65px +
        env(
          safe-area-inset-bottom,
          0px
        )
      );

    width:
      min(
        250px,
        calc(
          100% - 70px
        )
      );
  }


  .top-overlay {
    top:
      7px;
  }

}


@media (
  prefers-reduced-motion: reduce
) {

  .museum-notice,
  .museum-notice-dot,
  .museum-info-sheet.open
  .aira-assistant,
  .museum-info-sheet.open
  .aira-character {
    animation:
      none !important;
  }

}