body { margin: 0; background: #111; overflow: hidden; }
    canvas { display: block; }
    #info {
      position: absolute; top: 12px; left: 12px;
      color: #ccc; font-family: monospace; font-size: 13px;
      pointer-events: none; line-height: 1.7;
    }
    #stage-menu {
      position: absolute; top: 64px; left: 12px;
      box-sizing: border-box;
      width: min(342px, calc(100vw - 24px));
      max-height: calc(100dvh - 164px);
      padding: 10px;
      background: rgba(18, 18, 22, 0.92);
      border: 1px solid #2f2f38;
      border-radius: 6px;
      overflow-y: auto;
      color: #ccc; font-family: monospace; font-size: 11px;
      z-index: 5;
    }
    #stage-menu .title {
      color: #8ab; font-size: 12px; margin-bottom: 8px;
    }
    #stage-menu .hint {
      color: #777; margin-bottom: 8px; line-height: 1.5;
    }
    #stage-menu.hidden {
      display: none;
    }
    .stage-jump {
      width: 100%;
      margin: 0 0 4px;
      padding: 6px 8px;
      text-align: left;
      background: #1b1b20;
      border: 1px solid #353540;
      color: #bbb;
      border-radius: 4px;
      font: 11px monospace;
      cursor: pointer;
    }
    .stage-jump:hover { background: #262630; }
    .stage-jump.active {
      background: #203645;
      border-color: #42708a;
      color: #d8f0ff;
    }
    .stage-jump:disabled {
      opacity: 0.45;
      cursor: default;
    }
    .label {
      position: absolute; text-align: center;
      pointer-events: none; transform: translate(-50%, 0);
      font-family: monospace;
    }
    .label .name  { color: #fff; font-size: 14px; font-weight: bold; }
    .label .faces { color: #aaa; font-size: 11px; margin-top: 3px; }
    .label .role  { color: #7bc; font-size: 11px; margin-top: 2px; }
    #playback-controls {
      position: fixed; top: 12px; right: 12px;
      display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px;
      width: min(340px, calc(100vw - 24px));
      z-index: 6;
    }
    #playback-controls button { padding-inline: 8px; white-space: nowrap; }
    .demo-menu {
      position: fixed; top: 56px; right: 12px;
      width: min(340px, calc(100vw - 24px)); z-index: 7;
      color: #ccd5dd; font: 12px/1.5 monospace;
      background: #191e25; border: 1px solid #38434f; border-radius: 4px;
    }
    .demo-menu summary { padding: 7px 10px; cursor: pointer; }
    .demo-menu nav { padding: 0 10px 8px; }
    .demo-menu a { display: block; padding: 6px 0; color: #9fcce8; text-decoration: none; }
    .demo-menu a:hover { text-decoration: underline; }
    .demo-menu :focus-visible { outline: 2px solid #9fcce8; outline-offset: 2px; }
    #controls {
      position: fixed; bottom: 20px; left: 50%;
      transform: translateX(-50%);
      width: min(960px, calc(100vw - 24px));
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
      z-index: 6;
    }
    #controls button { height: 60px; line-height: 1.4; }
    button {
      background: #333; color: #eee; border: 1px solid #555;
      padding: 8px 18px; font-family: monospace; font-size: 13px;
      cursor: pointer; border-radius: 4px;
    }
    button:hover { background: #444; }
    @media (max-width: 900px) {
      #controls button { height: 94px; padding: 8px; font-size: 12px; }
      #stage-menu { max-height: calc(100dvh - 188px); }
    }
    @media (max-width: 700px) {
      #info { top: 60px; font-size: 11px; }
      .demo-menu { top: 108px; }
      #stage-menu { top: 154px; max-height: calc(100dvh - 278px); }
    }

@media (max-width: 700px) {
  #playback-controls { top: max(8px, env(safe-area-inset-top)); right: 8px; width: calc(100vw - 16px); }
  #info { top: 54px; line-height: 1.35; }
  .demo-menu { top: 90px; right: 8px; width: calc(100vw - 16px); max-height: 35dvh; overflow-y: auto; }
  #stage-menu { top: 132px; max-height: 38dvh; }
  #controls { bottom: max(8px, env(safe-area-inset-bottom)); gap: 6px; }
  #controls button { height: auto; min-height: 44px; max-height: 72px; overflow-y: auto; font-size: 11px; }
}

@media (max-width: 700px) {
  .label { width: 100px; }
  .label .name { font-size: 10px; }
  .label .faces, .label .role { font-size: 9px; }
}

/* Camera controls belong to the original viewer; extension pages keep their own layout. */
body.original-viewer .demo-menu { top: 96px; }
body.original-viewer #viewer-status { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 10; max-width: 80vw; padding: 16px; background: #202733; color: white; font: 14px/1.5 monospace; }
body.original-viewer button:disabled { cursor: default; opacity: .55; }
body.original-viewer button:focus-visible { outline: 2px solid #9fcce8; outline-offset: 2px; }
@media (max-width: 700px) {
  body.original-viewer #info { top: 94px; }
  body.original-viewer .demo-menu { top: 130px; }
  body.original-viewer #stage-menu { top: 174px; max-height: calc(100dvh - 270px); }
}