/* Layout and controls inherit the original viewer's stylesheet. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
#viewport { position: fixed; inset: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#info { pointer-events: auto; z-index: 5; max-width: calc(100vw - 380px); }
a { color: #9fcce8; text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font: bold 13px/1.6 monospace; margin: 3px 0 0; color: #eee; }
small { font-size: 11px; color: #8ab; }
#fit { grid-column: 1 / -1; }
#stage-menu { top: 102px; max-height: calc(100dvh - 210px); }
.stage-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
select { min-width: 0; width: 100%; font: 11px monospace; background: #1b1b20; color: #ccc; border: 1px solid #353540; border-radius: 4px; padding: 6px; }
h2 { font-size: 12px; color: #d8f0ff; margin: 16px 0 6px; }
p { margin: 5px 0; line-height: 1.6; }
.subtle { color: #888; font-size: 11px; }
.scope-note { color: #888; margin-top: 12px; }
summary { cursor: pointer; }
button:disabled, select:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid #9fcce8; outline-offset: 2px; }
#loading { position: absolute; top: 45%; width: 100%; text-align: center; color: #ccc; font: 13px monospace; }
@media (max-width: 700px) {
  #info { top: 104px; max-width: calc(100vw - 24px); }
  #stage-menu { top: auto; bottom: 126px; max-height: 200px; }
}