:root {
  color-scheme: dark;
  --ink: #f1ede3;
  --muted: #aaa9a3;
  --accent: #b99a59;
  --accent-rgb: 185, 154, 89;
  --accent-secondary: #526f72;
  --gold: #b99a59;
  --detail-left: 36vw;
  --summary-top: 27vh;
  --panel: rgba(7, 9, 11, .82);
  --hairline: rgba(240, 231, 213, .16);
  --ease-stage: cubic-bezier(.2, .75, .2, 1);
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #080a0c;
  color: var(--ink);
}

.exhibition-entry {
  position: fixed;
  z-index: 90;
  inset: 0;
  overflow: hidden;
  padding: clamp(26px, 4.5vw, 68px);
  background:
    linear-gradient(90deg, rgba(5,7,9,.985) 0%, rgba(5,7,9,.92) 48%, rgba(5,7,9,.42) 100%),
    radial-gradient(circle at 76% 48%, rgba(var(--accent-rgb), .1), transparent 42%);
  backdrop-filter: none;
  transition: opacity .7s var(--ease-stage), visibility .7s, transform .7s var(--ease-stage);
}

.exhibition-entry.is-entered {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-18px) scale(1.01);
}

.exhibition-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 1px), rgba(255,255,255,.025) 20%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 18%, transparent 82%, rgba(255,255,255,.02));
  -webkit-mask-image: linear-gradient(90deg, transparent, black 18%, black 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 18%, black 86%, transparent);
}

.entry-topline,
.entry-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  color: rgba(236,229,214,.42);
  font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .2em;
}

.entry-topline::before {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(-1 * clamp(26px, 4.5vw, 68px));
  width: clamp(18px, 3vw, 48px);
  height: 1px;
  background: var(--accent);
}

.entry-layout {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(100% - 36px);
  display: grid;
  grid-template-columns: minmax(520px, .92fr) minmax(220px, 1.08fr);
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
  padding: clamp(62px, 8vh, 94px) clamp(8px, 3vw, 46px) clamp(56px, 7vh, 82px);
}

.entry-card {
  width: min(650px, 100%);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

.entry-kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 clamp(20px, 3vh, 32px);
  color: var(--accent);
  font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .24em;
}

.entry-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}

.entry-card h1 {
  margin: 0;
  color: rgba(247, 241, 230, .94);
  font: 500 clamp(50px, 5.35vw, 78px)/1.02 "Songti SC", "Noto Serif CJK SC", serif;
  letter-spacing: .06em;
  text-wrap: balance;
}

.entry-card h1 span,
.entry-card h1 em {
  display: block;
  font-style: normal;
}

.entry-card h1 em {
  margin-top: .16em;
  margin-left: clamp(38px, 5vw, 78px);
  color: rgba(247,241,230,.78);
}

.entry-card > .entry-intro {
  max-width: 520px;
  margin: clamp(22px, 3.2vh, 34px) 0 0;
  padding-left: clamp(38px, 5vw, 78px);
  color: rgba(239, 233, 221, .58);
  font: 13px/2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .035em;
}

.entry-meta {
  display: flex;
  gap: clamp(22px, 3.5vw, 52px);
  margin-top: 24px;
  padding-left: clamp(38px, 5vw, 78px);
  color: rgba(239,233,221,.4);
  font: 10px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .1em;
}

.entry-meta span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.entry-meta b {
  color: rgba(var(--accent-rgb),.8);
  font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

.entry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  margin-top: clamp(28px, 4vh, 40px);
  padding-left: clamp(38px, 5vw, 78px);
}

.entry-actions button {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(242, 236, 224, .58);
  cursor: pointer;
  font: 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .11em;
}

.entry-actions .entry-primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  min-width: 188px;
  min-height: 58px;
  padding: 0 13px 0 24px;
  border: 1px solid rgba(var(--accent-rgb), .52);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),.035));
  color: rgba(249, 244, 233, .94);
}

.entry-actions .entry-primary svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid rgba(var(--accent-rgb),.36);
  border-radius: 50%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
}

.entry-actions button:hover,
.entry-actions button:focus-visible {
  outline: none;
  color: var(--accent);
}

.entry-actions .entry-primary:hover,
.entry-actions .entry-primary:focus-visible {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),.18);
}

.entry-card > small {
  display: block;
  margin-top: 17px;
  padding-left: clamp(38px, 5vw, 78px);
  color: rgba(235, 229, 218, .32);
  font: 10px/1.5 ui-sans-serif, system-ui, sans-serif;
}

.entry-visual-note {
  justify-self: end;
  align-self: center;
  display: flex;
  gap: 28px;
  padding-right: clamp(4px, 4vw, 60px);
  color: rgba(239,233,222,.23);
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .35em;
  writing-mode: vertical-rl;
}

.entry-footer {
  position: absolute;
  left: clamp(26px, 4.5vw, 68px);
  right: clamp(26px, 4.5vw, 68px);
  bottom: clamp(22px, 3.2vh, 38px);
}

.entry-orbit {
  display: none;
}

button { font: inherit; }
button:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

#stage {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#experience {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.page-slide {
  position: fixed;
  z-index: 65;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(105%);
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(var(--accent-rgb),.035) 18%,
      rgba(7,9,11,.96) 46%,
      rgba(7,9,11,.995) 64%,
      rgba(var(--accent-rgb),.06) 84%,
      transparent 100%);
}

#experience.is-auto-transition .page-slide {
  animation: auto-page-sweep .92s cubic-bezier(.48,.08,.18,1) both;
}

@keyframes auto-page-sweep {
  0% { opacity: 0; transform: translateX(102%); }
  16% { opacity: 1; }
  54% { opacity: 1; transform: translateX(0); }
  86% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-102%); }
}

#story-panel {
  position: fixed;
  z-index: 8;
  left: 0;
  top: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  transition: width .55s var(--ease-stage), height .55s var(--ease-stage);
}

#experience[data-page-type="artifact"] #story-panel {
  width: var(--detail-left);
  height: 100%;
  padding: 30px clamp(24px, 2vw, 38px) 78px clamp(64px, 5.2vw, 96px);
  background:
    radial-gradient(circle at 18% 24%, rgba(var(--accent-rgb), .11), transparent 32%),
    linear-gradient(90deg, rgba(8,10,12,.985) 0%, rgba(8,10,12,.94) 72%, rgba(8,10,12,.2) 100%);
}

#experience[data-page-type="summary"] #story-panel {
  width: 100%;
  height: var(--summary-top);
  padding: 28px clamp(38px, 5vw, 76px) 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(var(--accent-rgb), .13), transparent 26%),
    linear-gradient(180deg, rgba(8,10,12,.99) 0%, rgba(8,10,12,.93) 70%, rgba(8,10,12,0) 100%);
}

.brand-bar {
  display: flex;
  align-items: center;
  color: rgba(235,227,210,.58);
  font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .18em;
}

.brand-mark::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin: 0 10px 3px 0;
  background: var(--accent);
}

.story-mask {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), .38) transparent;
}

#experience[data-page-type="artifact"] .story-mask {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 6%, black 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 6%, black 91%, transparent 100%);
}

.story-content {
  transition: opacity .28s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}

#experience[data-page-type="artifact"] .story-content {
  width: min(100%, 520px);
  min-height: 100%;
  padding: clamp(68px, 10vh, 106px) 0 100px;
}

#experience[data-page-type="summary"] .story-content {
  width: 100%;
  max-width: 1160px;
  height: 100%;
  margin: 0 auto;
  padding: clamp(18px, 3vh, 34px) 0 18px;
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(520px, 1.18fr);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(46px, 7vw, 110px);
  align-content: center;
}

.story-content.is-exiting {
  opacity: 0;
  transform: translateY(-10px);
}

.story-content.is-auto-exiting {
  opacity: 0;
  transform: translateX(-28px);
}

.story-content.is-auto-entering {
  animation: auto-story-enter .72s var(--ease-stage) both;
}

@keyframes auto-story-enter {
  from { opacity: 0; transform: translateX(34px); }
  to { opacity: 1; transform: translateX(0); }
}

.story-label {
  min-height: 15px;
  margin: 0 0 18px;
  color: var(--accent);
  font: 600 11px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: .4s ease;
}

.story-label.is-visible { opacity: 1; transform: none; }

#story-title {
  min-height: 42px;
  margin: 0;
  max-width: 510px;
  color: #f3eee2;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .055em;
  text-wrap: balance;
}

.story-subtitle {
  min-height: 34px;
  margin: 10px 0 24px;
  max-width: 470px;
  color: rgba(241,237,227,.7);
  font: 400 14px/1.55 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .015em;
}

.story-meta {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 9px 18px;
  margin: 0 0 26px;
}

.story-meta dt {
  color: rgba(235,227,210,.58);
  font: 600 11px/1.6 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
  opacity: 0;
  transition: opacity .3s ease;
}

.story-meta dd {
  min-height: 22px;
  margin: 0;
  color: rgba(245,241,232,.84);
  font-size: 14px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .24s ease, transform .24s ease;
}

.story-meta dt.is-visible { opacity: 1; }
.story-meta dd.is-visible { opacity: 1; transform: none; }

.story-body {
  max-width: 520px;
  min-height: 90px;
  margin: 0;
  color: rgba(236,232,222,.8);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .032em;
  white-space: pre-wrap;
}

#experience[data-page-type="summary"] .story-label {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 12px;
}

#experience[data-page-type="summary"] #story-title {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

#experience[data-page-type="summary"] .story-subtitle {
  grid-column: 1;
  grid-row: 3;
  margin-bottom: 0;
}

#experience[data-page-type="summary"] .story-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  grid-template-columns: repeat(3, max-content minmax(70px, auto));
  align-self: end;
  gap: 8px 14px;
  margin: 0 0 12px;
}

#experience[data-page-type="summary"] .story-body {
  grid-column: 2;
  grid-row: 3;
  max-width: 680px;
  min-height: 0;
  line-height: 1.78;
}

#visual-panel {
  position: fixed;
  z-index: 7;
  inset: 0;
  pointer-events: none;
}

#right-interaction {
  position: absolute;
  pointer-events: auto;
  cursor: grab;
  transition: left .55s cubic-bezier(.2,.75,.2,1), top .55s cubic-bezier(.2,.75,.2,1);
}

#experience[data-page-type="artifact"] #right-interaction {
  left: var(--detail-left);
  right: 0;
  top: 0;
  bottom: 0;
}

#experience[data-page-type="summary"] #right-interaction {
  left: 0;
  right: 0;
  top: var(--summary-top);
  bottom: 0;
}

#right-interaction.is-dragging { cursor: grabbing; }

.summary-artifact-nav {
  position: fixed;
  z-index: 18;
  left: clamp(42px, 5vw, 76px);
  right: clamp(42px, 5vw, 76px);
  top: calc(var(--summary-top) + 8px);
  bottom: 76px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 20px);
  pointer-events: auto;
}

.summary-artifact-link {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
  padding: 0 10px 10px;
  border: 0;
  background: transparent;
  color: rgba(241, 235, 223, .78);
  text-align: left;
  cursor: pointer;
}

.summary-artifact-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% -8% 4%;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 48%, rgba(var(--artifact-rgb), .16), transparent 62%);
  transition: opacity .35s ease;
}

.summary-artifact-link > span:first-child {
  color: var(--artifact-accent);
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .24s ease, transform .3s var(--ease-stage);
}

.summary-artifact-link > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .24s ease, transform .3s var(--ease-stage);
}

.summary-artifact-link strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-artifact-link small {
  color: rgba(235, 228, 215, .56);
  font: 10px/1.3 ui-sans-serif, system-ui, sans-serif;
}

.summary-artifact-link:hover::before,
.summary-artifact-link:focus-visible::before { opacity: 1; }

.summary-artifact-link:hover > span,
.summary-artifact-link:focus-visible > span { opacity: 1; transform: none; }

.artifact-overlay {
  position: fixed;
  z-index: 9;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.artifact-insights {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .18s linear;
}

.insight-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.insight-lines line,
.insight-lines path {
  fill: none;
  stroke: var(--accent);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
}

.height-measure { opacity: .58; }
.height-measure line:first-child { stroke-dasharray: 2 5; }

.feature-line { opacity: .66; transition: opacity .2s ease; }
.feature-anchor {
  fill: var(--accent);
  stroke: rgba(8,10,12,.82);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: opacity .2s ease;
}

.height-label,
.feature-label {
  position: absolute;
  color: rgba(242,237,226,.84);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
  white-space: nowrap;
  transition: opacity .2s ease;
}

.height-label {
  color: var(--accent);
  font: 600 11px/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .1em;
  transform: translateY(-50%);
}

.feature-label {
  display: grid;
  min-width: 96px;
  gap: 4px;
  transform: translateY(-50%);
}

.feature-kind {
  color: rgba(var(--accent-rgb),.68);
  font: 9px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .18em;
}

.feature-name {
  color: rgba(244, 239, 229, .86);
  font: 500 12px/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .08em;
}

.structure-caption {
  position: fixed;
  width: 286px;
  display: grid;
  gap: 11px;
  padding: 12px 14px 11px;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .16s ease, transform .18s ease, left .18s var(--ease-stage), top .18s var(--ease-stage);
  color: rgba(242,237,226,.84);
  background: linear-gradient(90deg, rgba(8, 10, 12, .78), rgba(8, 10, 12, .28));
  border-left: 1px solid rgba(var(--accent-rgb), .66);
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 14px rgba(0,0,0,.72);
  pointer-events: none;
}

.structure-caption.is-visible { opacity: 1; transform: none; }
.structure-caption.is-persistent {
  width: 310px;
  gap: 13px;
  padding: 16px 17px 15px;
  background: linear-gradient(105deg, rgba(8, 10, 12, .9), rgba(8, 10, 12, .62));
  border-left-color: rgba(var(--accent-rgb), .82);
  box-shadow: 0 18px 50px rgba(0,0,0,.2);
}
.structure-copy { display: grid; gap: 5px; }

#structure-index {
  color: var(--accent);
  font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .18em;
}

#structure-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
}

#structure-part {
  color: rgba(239, 233, 221, .54);
  font: 10px/1.45 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .08em;
}

#structure-detail {
  margin: 4px 0 0;
  color: rgba(239, 233, 221, .7);
  font: 11px/1.75 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .045em;
}

.structure-caption.is-persistent #structure-label {
  font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  font-size: 15px;
  letter-spacing: .08em;
}

.structure-sequence {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 11px 0 0;
  border-top: 1px solid rgba(var(--accent-rgb), .2);
  list-style: none;
}

.structure-sequence li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: baseline;
  color: rgba(238, 232, 220, .58);
  font: 10px/1.45 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .045em;
}

.structure-sequence li > span:first-child {
  color: rgba(var(--accent-rgb), .66);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  letter-spacing: .12em;
}

.structure-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.structure-progress i { height: 1px; background: rgba(241, 234, 220, .18); transition: background .16s, box-shadow .16s; }
.structure-progress i.is-complete { background: rgba(var(--accent-rgb), .54); }
.structure-progress i.is-current { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .5); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon-control {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
}

.icon-control svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-control::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 3;
  width: max-content;
  max-width: 120px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 5px;
  background: rgba(7,9,11,.92);
  color: rgba(244,239,229,.76);
  font: 10px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.icon-control:hover::after,
.icon-control:focus-visible::after { opacity: 1; transform: none; }
.icon-control:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.icon-control[data-state="pause"] .icon-play,
.icon-control[data-state="play"] .icon-pause,
.sound-toggle[data-state="on"] .icon-sound-off,
.sound-toggle[data-state="off"] .icon-sound-on { display: none; }

.presentation-controls {
  position: fixed;
  z-index: 22;
  top: 26px;
  right: 28px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.presentation-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(var(--accent-rgb),.24);
  border-radius: 999px;
  background: rgba(8,10,12,.62);
  color: rgba(242,236,223,.72);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font: 11px/1 ui-sans-serif, system-ui, sans-serif;
  transition: border-color .2s, color .2s, background .2s;
}

.presentation-controls .icon-control::after { top: calc(100% + 8px); bottom: auto; }

.presentation-controls button:hover,
.presentation-controls button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb),.1);
}

.loading-panel {
  position: fixed;
  z-index: 21;
  width: min(280px, 72vw);
  transform: translate(-50%, -50%);
  padding: 18px 19px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(7,9,11,.8);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  font: 11px/1.45 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em;
  color: rgba(240,233,220,.64);
}

#experience[data-page-type="artifact"] .loading-panel { left: 68%; top: 50%; }
#experience[data-page-type="summary"] .loading-panel { left: 50%; top: 64%; }
.loading-track { height: 2px; margin: 13px 0 9px; background: rgba(255,255,255,.1); }
.loading-track i { display:block; width:0; height:100%; background: linear-gradient(90deg,var(--accent),var(--accent-secondary)); transition:width .18s; }
.loading-panel button { margin-top: 14px; padding: 6px 12px; }
#loading-percent { float: right; }

.page-nav {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 44px auto 44px;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.nav-arrow,
.interaction-help button,
.sound-toggle,
.loading-panel button {
  border: 1px solid rgba(240,231,213,.17);
  border-radius: 999px;
  background: rgba(8,10,12,.56);
  color: rgba(242,236,223,.76);
  cursor: pointer;
  transition: background .2s, border-color .2s, opacity .2s, transform .2s;
  backdrop-filter: blur(10px);
}

.nav-arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  font: 15px/42px ui-sans-serif, system-ui, sans-serif;
}

.nav-arrow:hover:not(:disabled),
.interaction-help button:hover,
.sound-toggle:hover,
.loading-panel button:hover {
  background: rgba(var(--accent-rgb),.14);
  border-color: var(--accent);
}

.nav-arrow:disabled { cursor: default; opacity: .2; }
.page-dots { display:flex; align-items:center; justify-content:center; gap:2px; }

.page-dot {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.page-dot::after {
  content: "";
  position: absolute;
  inset: 21px 14px;
  border-radius: 4px;
  background: rgba(235,227,210,.24);
  transition: inset .25s, background .25s, box-shadow .25s;
}

.page-dot.is-active::after {
  inset: 20px 9px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.34);
}

.interaction-help {
  position: fixed;
  z-index: 35;
  right: 24px;
  bottom: 22px;
  pointer-events: auto;
  font: 11px/1.5 ui-sans-serif, system-ui, sans-serif;
}

.sound-toggle {
  position: fixed;
  z-index: 35;
  right: 76px;
  bottom: 22px;
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  pointer-events: auto;
  font: 11px/1 ui-sans-serif, system-ui, sans-serif;
}

.sound-toggle[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb), .62);
  color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
}

.interaction-help-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
}

.interaction-help-toggle .help-status-dot {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 5px;
  height: 5px;
}

.interaction-help-toggle[aria-expanded="true"] { border-color: rgba(var(--accent-rgb),.68); }

.interaction-help-panel {
  position: absolute;
  right: 0;
  bottom: 56px;
  width: 326px;
  padding: 19px;
  border: 1px solid var(--hairline);
  background: rgba(7,9,11,.92);
  box-shadow: 0 24px 64px rgba(0,0,0,.46);
  backdrop-filter: blur(16px);
  color: rgba(240,233,220,.76);
  max-height: calc(100vh - 104px);
  overflow: auto;
}

.gesture-heading { display:flex; align-items:center; gap:11px; margin-bottom: 18px; }
.gesture-heading > div { display:grid; gap:3px; }
.gesture-heading small { color:rgba(var(--accent-rgb),.7); font:9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; }
#gesture-status { color:rgba(245,239,228,.84); font-size:12px; }
.gesture-dot { width:6px; height:6px; flex:none; border-radius:50%; background:#625e56; box-shadow:0 0 0 3px rgba(255,255,255,.025); }
.gesture-dot.is-live { background:#8d9f77; box-shadow:0 0 12px rgba(141,159,119,.8); }
.gesture-dot.is-tracking { background:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),.8); }

.interaction-group + .interaction-group { margin-top:17px; padding-top:16px; border-top:1px solid rgba(255,255,255,.065); }
.interaction-group h2 { margin:0 0 7px; color:rgba(242,236,225,.58); font:600 10px/1.2 ui-sans-serif,system-ui,sans-serif; letter-spacing:.16em; }
.interaction-list { margin:0; padding:0; }
.interaction-list > div { display:grid; grid-template-columns:52px 1fr; gap:12px; padding:5px 0; }
.interaction-list dt { color:rgba(241,235,223,.88); letter-spacing:.08em; }
.interaction-list dd { margin:0; color:rgba(235,229,218,.62); }
.gesture-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.gesture-actions button { min-height:38px; padding:0 12px; font-size:10px; }
.gesture-actions .primary-action { width:100%; min-height:42px; border-color:rgba(var(--accent-rgb),.55); background:rgba(var(--accent-rgb),.12); color:rgba(247,241,229,.9); }

.music-credit {
  margin: 15px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .055);
  color: rgba(235, 229, 218, .42);
  font: 9px/1.6 ui-sans-serif, system-ui, sans-serif;
}

.music-credit a { color: rgba(var(--accent-rgb), .76); text-decoration: none; }
.music-credit a:hover { text-decoration: underline; }

.camera-preview {
  position: fixed;
  z-index: 34;
  right: 24px;
  bottom: 344px;
  width: 220px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),.34);
  background:#050607;
  pointer-events:none;
}

.camera-preview video,
.camera-preview canvas { position:absolute; inset:0; width:100%; height:100%; transform:scaleX(-1); object-fit:cover; }

.toast {
  position:fixed;
  z-index:40;
  left:50%;
  bottom:70px;
  transform:translate(-50%,10px);
  opacity:0;
  padding:8px 13px;
  background:rgba(8,10,12,.84);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(242,236,223,.75);
  font:11px/1.4 ui-sans-serif,system-ui,sans-serif;
  pointer-events:none;
  transition:.25s ease;
}

.toast.is-visible { opacity:1; transform:translate(-50%,0); }

.fatal-warning {
  position:fixed;
  z-index:100;
  inset:0;
  display:grid;
  place-items:center;
  padding:30px;
  background:#080a0c;
}

.fatal-warning > div { max-width:650px; }
.fatal-warning h1 { font-weight:500; }
.fatal-warning p { color:#aaa9a3; line-height:1.8; }
.fatal-warning .eyebrow { color:var(--accent); font:10px ui-monospace,monospace; letter-spacing:.22em; }
code { color:#d6bd88; }

@media (max-width: 900px) {
  :root { --detail-left: 42vw; --summary-top: 35vh; }
  #experience[data-page-type="artifact"] #story-panel { padding-inline:24px; }
  #story-title { font-size:26px; }
  #experience[data-page-type="summary"] #story-panel { padding-inline:30px; }
  #experience[data-page-type="summary"] .story-content {
    grid-template-columns: .8fr 1.2fr;
    column-gap:30px;
  }
  #experience[data-page-type="summary"] .story-meta { grid-template-columns:max-content 1fr; }
  .summary-artifact-nav { left:20px; right:20px; top:calc(var(--summary-top) + 4px); gap:2px; }
  .summary-artifact-link { padding-inline:4px; }
  .summary-artifact-link > span:first-child { display:none; }
  .summary-artifact-link strong { font-size:10px; }
  .interaction-help { right:14px; bottom:16px; }
  .sound-toggle { right:66px; bottom:16px; }
  .interaction-help-panel { width:min(326px, calc(100vw - 28px)); }
  .camera-preview { right:14px; bottom:336px; width:190px; }
  .page-nav { bottom:16px; }
  .feature-label:nth-child(n+2) { display:none; }
  #feature-lines > :nth-child(n+3) { display:none; }
  .structure-caption { width:240px; }
  .structure-caption.is-persistent { width:260px; }
  .structure-sequence li:nth-child(n+5) { display:none; }
  .presentation-controls { top:18px; right:18px; }
  .presentation-controls button { min-height:40px; width:40px; min-width:40px; height:40px; padding:0; }
  .exhibition-entry { padding:24px; }
  .entry-topline span:last-child,
  .entry-visual-note { display:none; }
  .entry-layout {
    height:calc(100% - 24px);
    grid-template-columns:1fr;
    align-items:center;
    padding:70px 4px 74px;
  }
  .entry-card { width:100%; }
  .entry-card h1 { font-size:clamp(44px, 12vw, 72px); }
  .entry-card h1 em { margin-left:clamp(24px, 10vw, 72px); }
  .entry-card > .entry-intro,
  .entry-meta,
  .entry-actions,
  .entry-card > small { padding-left:clamp(24px, 10vw, 72px); }
  .entry-card > .entry-intro { max-width:560px; }
  .entry-meta { flex-wrap:wrap; row-gap:10px; }
  .entry-actions { flex-wrap:wrap; }
  .entry-footer { left:24px; right:24px; }
  .entry-footer span:first-child { display:none; }
  .entry-footer { justify-content:flex-end; }
  .entry-orbit { right:-45vw; width:100vw; opacity:.7; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}