@font-face {
  font-family: Inter;
  src: url("./assets/fonts/inter.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans CJK SC";
  src: url("./assets/fonts/noto-sc.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f8f7f4;
  --panel: #efede8;
  --text: #111111;
  --muted: #686763;
  --accent: #ff6a00;
  --line: rgba(17, 17, 17, .16);
  font-family: Inter, "Noto Sans CJK SC", "PingFang SC", sans-serif;
  font-synthesis: none;
}

body {
  background: var(--bg);
  color: var(--text);
}

.header {
  height: 82px;
  padding-inline: 5vw;
  background: rgba(248, 247, 244, .9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  gap: 14px;
  color: var(--text);
  letter-spacing: .08em;
}

.brand img {
  display: block;
  width: 82px;
  height: auto;
}

.brand-divider {
  width: 1px;
  height: 20px;
  background: var(--line);
}

.brand-product {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .16em;
}

.header nav {
  color: var(--muted);
}

.header nav a.active,
.header nav a:hover {
  color: var(--text);
}

.header nav a.active:after {
  height: 2px;
  background: var(--accent);
}

.tour-button {
  border-color: var(--line);
  color: var(--text);
}

.tour-button:hover {
  background: rgba(17, 17, 17, .05);
}

.play-icon,
.section-number,
.text-button,
.round-link:hover {
  color: var(--accent);
}

.stage {
  background: var(--bg);
}

.ambient {
  background:
    radial-gradient(ellipse at 65% 42%, rgba(255, 106, 0, .10), transparent 32%),
    radial-gradient(ellipse at 61% 50%, rgba(17, 17, 17, .08), transparent 65%);
}

.fallback {
  mix-blend-mode: lighten;
}

.stage-caption {
  color: var(--muted);
}

.load-status {
  color: var(--muted);
}

.view-controls {
  border-color: var(--line);
  background: rgba(248, 247, 244, .88);
  box-shadow: 0 12px 36px rgba(17, 17, 17, .08);
}

.view-controls button {
  color: var(--muted);
}

.view-controls button[aria-pressed=true] {
  background: var(--text);
  color: var(--bg);
}

.reset {
  border-color: var(--line);
  background: rgba(248, 247, 244, .92);
  color: var(--text);
  box-shadow: 0 12px 36px rgba(17, 17, 17, .08);
}

.reset:hover {
  color: var(--accent);
}

.explosion-control {
  color: var(--muted);
}

.explosion-control input {
  accent-color: var(--accent);
}

.stage-rule {
  border-color: var(--line);
}

.eyebrow {
  color: var(--muted);
}

.mini-rule {
  background: var(--accent);
}

h1 span,
h2 span {
  color: var(--accent);
}

.lead {
  color: #4d4b46;
}

.primary-link {
  background: var(--text);
  color: var(--bg);
  border-radius: 2px;
  transition: background .2s, transform .2s;
}

.primary-link:hover {
  background: var(--accent);
  color: var(--text);
  transform: translateY(-2px);
}

.edition,
.quiet,
.measurements dt,
.measurements dd span,
.single-measure span {
  color: var(--muted);
}

.chapter-foot {
  color: var(--muted);
}

.section-number {
  border-color: var(--line);
}

.text-button {
  border-color: rgba(255, 106, 0, .4);
}

.text-button:hover {
  border-color: var(--accent);
}

.craft {
  background: var(--panel);
  border-top-color: var(--line);
}

.craft-title .eyebrow {
  color: var(--muted);
}

.craft-title p:last-child {
  color: var(--muted);
}

.render-detail img {
  background: #e7e4de;
  border-radius: 2px;
}

.render-detail figcaption,
footer {
  color: var(--muted);
}

.closing {
  border-bottom: 1px solid var(--line);
}

.closing p span {
  color: var(--muted);
}

.round-link {
  border-color: var(--line);
}

.round-link:hover {
  border-color: var(--accent);
}

footer {
  border-top-color: var(--line);
}

footer .brand {
  color: var(--text);
}

.skip {
  background: var(--text);
  color: var(--bg);
}

@media (max-width: 900px) {
  .header {
    height: 72px;
  }

  .ambient {
    background:
      radial-gradient(ellipse at 62% 51%, rgba(255, 106, 0, .10), transparent 38%),
      radial-gradient(ellipse at 60% 53%, rgba(17, 17, 17, .08), transparent 65%);
  }
}