:root {
  color-scheme: dark;
  font-family: "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
  color: #f8f1df;
  background: #0d1922;
}
* { box-sizing: border-box; }
body { margin: 0; }
.masthead, main { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.masthead { padding-block: 30px 22px; }
.masthead p { margin: 0; color: #d9bc82; letter-spacing: .12em; }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.75rem); margin: .2em 0; }
.masthead .tagline { color: #cfdbdc; letter-spacing: .035em; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 24%); gap: 12px; }
.view, .guide { border: 1px solid #38515a; border-radius: 16px; overflow: hidden; }
.view {
  display: grid;
  place-items: center;
  min-height: max(200px, min(50vw, 540px));
  background: radial-gradient(ellipse at bottom left, #25525a, #102630 65%, #08151e);
}
#player, #welcome { grid-area: 1 / 1; width: 100%; }
#player iframe { width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; display: block; }
#welcome { text-align: center; padding: 24px; }
#welcome h2 { font-size: clamp(1.4rem, 4vw, 2.4rem); }
.guide {
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  background: radial-gradient(ellipse at center, #426368, #172f3a);
}
.guide img { width: 100%; height: 100%; max-height: 480px; object-fit: contain; }
figcaption { text-align: center; padding: 10px; background: #0f2630; }
.details { padding: 18px 0; }
.destination { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: baseline; }
.destination h2 { margin: 0; font-size: 1.3rem; }
#status, .credit { color: #adc6cd; }
#caption { line-height: 1.8; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; }
button { border: 1px solid #58717c; border-radius: 8px; background: #183845; color: inherit; font: inherit; padding: 10px 14px; cursor: pointer; }
#start { background: #e1c38b; color: #17242a; font-weight: 700; }
button:disabled { opacity: .48; cursor: default; }
a { color: #f0d6a2; }
details { border-top: 1px solid #38515a; padding: 16px 0 30px; }
summary { cursor: pointer; }
li { margin-block: 8px; }
[hidden] { display: none !important; }
@media (max-width: 650px) {
  .masthead, main { width: calc(100% - 24px); }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .guide { grid-template-columns: 85px auto; grid-template-rows: 95px; align-items: center; justify-content: start; }
  .guide img { height: 95px; }
  figcaption { background: transparent; }
}