:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #223a43;
  background: #f4f2eb;
}
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(140deg, #f8f5ed, #eaf2ef 80%); min-height: 100vh; }
main { width: min(960px, calc(100% - 2.5rem)); margin: auto; padding: 2.5rem 0 1.2rem; }
.studio-label { display: flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 750; letter-spacing: .15em; }
.intro h1 { margin: .5rem 0 .35rem; font: 500 clamp(2.4rem, 7vw, 4rem)/1.03 Georgia, serif; }
.intro p { margin: 0 0 1.2rem; color: #476069; font-size: .96rem; line-height: 1.5; }
.player { padding: .9rem 1rem; border: 1px solid #cad9d7; border-radius: 1.2rem; background: #fffdfa; box-shadow: 0 10px 28px #173c4211; }
#joy-host .joy3d-panel { margin: 0; }
#joy-host .joy3d-stage { height: clamp(278px, 53svh, 530px); }
#joy-host .joy3d-views { margin-top: .65rem; }
#joy-host .joy3d-views button { color: #244453; background: #fff; border-color: #a7bec5; min-height: 36px; }
#joy-host .joy3d-views [aria-pressed="true"] { background: #244651; color: white; border-color: #244651; }
#joy-host .joy3d-picker { margin-top: .8rem; }
#joy-host .joy3d-picker label { font-size: .84rem; font-weight: 700; }
#joy-host .joy3d-picker select {
  min-width: min(14rem, 100%);
  max-width: 100%;
  min-height: 40px;
  border: 1px solid #a7bec5;
  border-radius: .55rem;
  padding: .4rem .6rem;
  background: white;
  color: #223a43;
  font: inherit;
}
.footnote { margin: .85rem 0 0; color: #476069; font-size: .78rem; }
@media (max-width: 520px) {
  main { width: calc(100% - 1rem); padding-top: 1.1rem; }
  .player { padding: .65rem; }
  .intro p { margin-bottom: .75rem; }
  #joy-host .joy3d-stage { height: clamp(250px, 44svh, 390px); }
  #joy-host .joy3d-picker label { flex-basis: 100%; }
  #joy-host .joy3d-picker select { flex: 1; min-width: 0; }
}