:root {
  --layout-scale: 1;
  --catalog-left: 92px;
  --catalog-top: 74px;
  --catalog-width: 510px;
  --tools-left: 92px;
  --gold: #dca852;
  --paper: #efe6cf;
  --accent: #61b89f;
  --background: #101917;
  --muted: rgba(239, 230, 207, 0.68);
  --faint: rgba(239, 230, 207, 0.38);
}

* { box-sizing: border-box; }

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

body {
  color: var(--paper);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

button { font: inherit; }

#showcase {
  position: relative;
  width: 100vw;
  height: 100vh;
  isolation: isolate;
  overflow: hidden;
  background: var(--background);
}

#stage, #stage canvas, .atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#stage canvas { display: block; }

.atmosphere {
  z-index: 1;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(97, 184, 159, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(97, 184, 159, 0.02) 1px, transparent 1px),
    radial-gradient(ellipse at center, transparent 44%, rgba(3, 8, 7, 0.48) 100%);
  background-size: calc(46px * var(--layout-scale)) calc(46px * var(--layout-scale)), calc(46px * var(--layout-scale)) calc(46px * var(--layout-scale)), 100% 100%;
}

.catalog {
  position: absolute;
  z-index: 3;
  left: calc(var(--catalog-left) * var(--layout-scale));
  top: calc(var(--catalog-top) * var(--layout-scale));
  width: calc(var(--catalog-width) * var(--layout-scale));
  color: var(--paper);
  pointer-events: none;
}

.catalog p, .catalog h1, .catalog h2 { margin: 0; }

.category {
  color: var(--gold);
  font: 600 calc(18px * var(--layout-scale))/1.15 Arial, sans-serif;
  letter-spacing: calc(2px * var(--layout-scale));
}

.title {
  margin-top: calc(38px * var(--layout-scale)) !important;
  color: var(--gold);
  font: 400 calc(48px * var(--layout-scale))/1.08 "STSong", "SimSun", serif;
  letter-spacing: 0;
  text-shadow: 0 calc(2px * var(--layout-scale)) calc(8px * var(--layout-scale)) rgba(0,0,0,.35);
}

.alias {
  margin-top: calc(3px * var(--layout-scale)) !important;
  color: rgba(239,230,207,.93);
  font: 600 calc(22px * var(--layout-scale))/1.18 Georgia, "Times New Roman", serif;
  letter-spacing: calc(1.4px * var(--layout-scale));
}

.intro {
  margin-top: calc(52px * var(--layout-scale)) !important;
  color: rgba(239,230,207,.9);
  font: 400 calc(27px * var(--layout-scale))/1.35 "STSong", "SimSun", serif;
  letter-spacing: 0;
}

.body-copy {
  width: calc(500px * var(--layout-scale));
  min-height: calc(54px * var(--layout-scale));
  margin-top: calc(28px * var(--layout-scale)) !important;
  color: rgba(239,230,207,.82);
  font-size: calc(14px * var(--layout-scale));
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0;
}

.cursor {
  display: inline-block;
  width: max(1px, calc(1px * var(--layout-scale)));
  height: calc(15px * var(--layout-scale));
  margin-left: calc(3px * var(--layout-scale));
  vertical-align: calc(-2px * var(--layout-scale));
  background: var(--gold);
  animation: blink 650ms steps(1) infinite;
}

.features {
  display: flex;
  align-items: center;
  min-height: calc(28px * var(--layout-scale));
  margin-top: calc(18px * var(--layout-scale));
  color: rgba(239,230,207,.9);
  font-size: calc(18px * var(--layout-scale));
  font-weight: 600;
}

.feature { opacity: 0; transform: translateY(calc(6px * var(--layout-scale))); transition: opacity .5s ease, transform .5s ease; }
.feature.visible { opacity: 1; transform: none; }
.feature + .feature::before { content: "|"; margin: 0 calc(12px * var(--layout-scale)); color: var(--faint); }

.metadata {
  display: grid;
  grid-template-columns: calc(225px * var(--layout-scale)) 1fr;
  gap: calc(32px * var(--layout-scale));
  margin-top: calc(28px * var(--layout-scale));
  opacity: 0;
  transform: translateY(calc(8px * var(--layout-scale)));
  transition: opacity .6s ease, transform .6s ease;
}
.metadata.visible { opacity: 1; transform: none; }

.meta-group h2 {
  color: rgba(239,230,207,.94);
  font-size: calc(15px * var(--layout-scale));
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: calc(2px * var(--layout-scale)) calc(3px * var(--layout-scale)) 0 rgba(0,0,0,.78);
}
.meta-group h2 small {
  display: block;
  margin-top: calc(2px * var(--layout-scale));
  color: rgba(239,230,207,.68);
  font: 600 calc(8px * var(--layout-scale))/1 Georgia, serif;
  text-transform: uppercase;
}

.palette, .structure-tags { display: flex; align-items: center; margin-top: calc(22px * var(--layout-scale)); }
.palette { gap: calc(10px * var(--layout-scale)); }
.swatch {
  width: calc(22px * var(--layout-scale));
  height: calc(22px * var(--layout-scale));
  flex: 0 0 auto;
  border: max(1px, calc(1px * var(--layout-scale))) solid rgba(239,230,207,.45);
  border-radius: 50%;
}
.structure-tags { gap: calc(8px * var(--layout-scale)); white-space: nowrap; }
.structure-tag {
  padding: calc(6px * var(--layout-scale)) calc(9px * var(--layout-scale));
  border: max(1px, calc(1px * var(--layout-scale))) solid rgba(239,230,207,.46);
  color: rgba(239,230,207,.9);
  font-size: calc(12px * var(--layout-scale));
  line-height: 1;
}

.reveal-item { opacity: 0; transform: translateY(calc(18px * var(--layout-scale))); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
.reveal-item.visible { opacity: 1; transform: none; }

.loading, .error-state {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0;
}
.loading { display: flex; align-items: center; gap: 12px; }
.loading[hidden], .error-state[hidden] { display: none; }
.loading-line { width: 36px; height: 1px; overflow: hidden; background: rgba(239,230,207,.16); }
.loading-line::after { content: ""; display: block; width: 55%; height: 100%; background: var(--gold); animation: load 1.2s ease-in-out infinite; }
.error-state { max-width: 520px; color: #efe6cf; text-align: center; line-height: 1.7; }

.timeline {
  position: absolute;
  z-index: 4;
  left: calc(76px * var(--layout-scale));
  right: calc(76px * var(--layout-scale));
  bottom: calc(34px * var(--layout-scale));
  display: grid;
  grid-template-columns: calc(58px * var(--layout-scale)) calc(52px * var(--layout-scale)) 1fr calc(52px * var(--layout-scale));
  align-items: center;
  gap: calc(18px * var(--layout-scale));
  color: var(--faint);
  font-size: calc(9px * var(--layout-scale));
  letter-spacing: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.timeline.ready { opacity: 1; }
.progress-track { height: max(1px, calc(1px * var(--layout-scale))); background: rgba(239,230,207,.18); overflow: hidden; }
.progress-fill { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--gold), var(--accent)); }
.restart, .pause-toggle {
  height: calc(25px * var(--layout-scale));
  border: max(1px, calc(1px * var(--layout-scale))) solid rgba(239,230,207,.28);
  border-radius: 0;
  color: rgba(239,230,207,.58);
  background: transparent;
  cursor: pointer;
  font-size: calc(10px * var(--layout-scale));
}
.restart:hover, .restart:focus-visible, .pause-toggle:hover, .pause-toggle:focus-visible { color: var(--paper); border-color: var(--gold); outline: none; }

.viewer-tools {
  position: absolute;
  z-index: 6;
  top: calc(28px * var(--layout-scale));
  left: calc(var(--tools-left) * var(--layout-scale));
  right: auto;
  display: flex;
  gap: calc(8px * var(--layout-scale));
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(1120px * var(--layout-scale));
}
.artifact-selector { display: flex; gap: calc(6px * var(--layout-scale)); }
.mode-switch { display: flex; border: 1px solid rgba(239,230,207,.26); }
.mode-button, .tool-button, .artifact-button {
  height: calc(28px * var(--layout-scale)); border: 0; border-radius: 0;
  color: rgba(239,230,207,.58); background: rgba(16,25,23,.72);
  cursor: pointer; font-size: calc(10px * var(--layout-scale));
}
.mode-button, .artifact-button { padding: 0 calc(11px * var(--layout-scale)); }
.artifact-button { white-space: nowrap; }
.mode-button + .mode-button { border-left: 1px solid rgba(239,230,207,.2); }
.mode-button.active, .artifact-button.active { color: var(--background); background: var(--gold); }
.tool-button { width: calc(28px * var(--layout-scale)); border: 1px solid rgba(239,230,207,.26); font-size: calc(17px * var(--layout-scale)); }
.mode-button:focus-visible, .tool-button:focus-visible, .artifact-button:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.bgm-toggle {
  position: relative;
  display: grid;
  place-items: center;
}
.bgm-toggle.active {
  color: var(--background);
  background: var(--gold);
  border-color: var(--gold);
}
.speaker-icon {
  position: relative;
  width: calc(14px * var(--layout-scale));
  height: calc(12px * var(--layout-scale));
  display: inline-block;
}
.speaker-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(3px * var(--layout-scale));
  width: calc(5px * var(--layout-scale));
  height: calc(6px * var(--layout-scale));
  background: currentColor;
  clip-path: polygon(0 22%, 45% 22%, 100% 0, 100% 100%, 45% 78%, 0 78%);
}
.speaker-icon::after {
  content: "";
  position: absolute;
  left: calc(8px * var(--layout-scale));
  top: calc(2px * var(--layout-scale));
  width: calc(6px * var(--layout-scale));
  height: calc(8px * var(--layout-scale));
  border: max(1px, calc(1px * var(--layout-scale))) solid currentColor;
  border-left: 0;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}
.bgm-toggle:not(.active) .speaker-icon {
  opacity: 0.72;
}
.bgm-toggle:not(.active) .speaker-icon::after {
  width: calc(8px * var(--layout-scale));
  height: max(1px, calc(1px * var(--layout-scale)));
  left: calc(7px * var(--layout-scale));
  top: calc(6px * var(--layout-scale));
  border: 0;
  border-radius: 0;
  background: currentColor;
  transform: rotate(-42deg);
}
.hotspots { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hotspot { position: absolute; width: 0; height: 0; pointer-events: auto; opacity: 0; transition: opacity .3s ease; }
.hotspot.visible { opacity: 1; }
.hotspot-trigger {
  position: absolute; left: calc(-8px * var(--layout-scale)); top: calc(-8px * var(--layout-scale));
  width: calc(16px * var(--layout-scale)); height: calc(16px * var(--layout-scale)); padding: 0;
  border: 1px solid var(--gold); border-radius: 50%; background: rgba(16,25,23,.84);
  box-shadow: 0 0 0 calc(4px * var(--layout-scale)) rgba(220,168,82,.12); cursor: pointer;
}
.hotspot-trigger::after { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: var(--gold); }
.hotspot-label {
  position: absolute; left: calc(14px * var(--layout-scale)); top: calc(-11px * var(--layout-scale));
  padding: calc(4px * var(--layout-scale)) calc(7px * var(--layout-scale)); border-left: 1px solid var(--gold);
  color: var(--paper); background: rgba(16,25,23,.88); font-size: calc(10px * var(--layout-scale));
  white-space: nowrap; opacity: 0; transform: translateX(calc(-4px * var(--layout-scale)));
  transition: opacity .2s ease, transform .2s ease;
}
.hotspot.open .hotspot-label, .hotspot:focus-within .hotspot-label { opacity: 1; transform: none; }

.credits {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  background: #050807;
  color: var(--paper);
}

.credits[hidden] { display: none; }

.credits-roll {
  position: absolute;
  left: 50%;
  top: 100%;
  width: min(760px, 82vw);
  transform: translateX(-50%);
  white-space: pre-wrap;
  text-align: center;
  font: 400 clamp(18px, 2vw, 28px)/2.1 "Microsoft YaHei", "PingFang SC", sans-serif;
  animation: rollCredits 42s linear forwards;
}

.credits-replay, .credits-bgm-toggle {
  position: absolute;
  bottom: calc(34px * var(--layout-scale));
  z-index: 2;
  height: calc(34px * var(--layout-scale));
  border: max(1px, calc(1px * var(--layout-scale))) solid rgba(239,230,207,.42);
  color: rgba(239,230,207,.82);
  background: rgba(16,25,23,.72);
  cursor: pointer;
  font-size: calc(12px * var(--layout-scale));
}

.credits-replay {
  right: calc(42px * var(--layout-scale));
  min-width: calc(72px * var(--layout-scale));
}

.credits-bgm-toggle {
  right: calc(124px * var(--layout-scale));
  width: calc(34px * var(--layout-scale));
  display: grid;
  place-items: center;
}

.credits-bgm-toggle.active {
  color: var(--background);
  border-color: var(--gold);
  background: var(--gold);
}

.credits-replay:hover, .credits-replay:focus-visible, .credits-bgm-toggle:hover, .credits-bgm-toggle:focus-visible {
  color: var(--background);
  border-color: var(--gold);
  background: var(--gold);
  outline: none;
}

@keyframes blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes load { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
@keyframes rollCredits {
  from { transform: translate(-50%, 0); }
  to { transform: translate(-50%, calc(-100% - 110vh)); }
}

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