html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #10141d; color: #f0f4fa; font: 14px/1.5 system-ui, sans-serif; }
#viewport { position: absolute; inset: 0 0 0 380px; }
#viewport canvas { display: block; }
.panel { position: absolute; z-index: 1; top: 16px; left: 16px; width: min(320px, calc(100vw - 64px)); max-height: calc(100vh - 64px); overflow: auto; padding: 16px; border: 1px solid #637389; border-radius: 12px; background: #182232ef; box-shadow: 0 12px 32px #0007; }
h1 { margin: 0 0 8px; font-size: 18px; }
nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
a { color: #8ddaff; }
label { display: block; margin-top: 11px; }
select, input[type='range'] { display: block; width: 100%; margin-top: 4px; }
.hint { color: #c7d5e7; font-size: 12px; }
@media (max-width: 720px) {
  body { display: flex; flex-direction: column; overflow: auto; }
  #viewport { position: relative; inset: auto; order: 2; flex: 1 0 320px; min-height: 320px; }
  .panel { position: relative; top: auto; left: auto; order: 1; width: auto; max-height: none; margin: 8px; padding: 12px; }
}