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 370px; }
#viewport canvas { display: block; }
.panel { position: absolute; z-index: 2; top: 16px; left: 16px; width: min(310px, calc(100vw - 64px)); padding: 16px; border: 1px solid #637389; border-radius: 12px; background: #182232ef; box-shadow: 0 12px 32px #0007; }
h1 { margin: 0 0 10px; font-size: 18px; }
label { display: block; margin-top: 12px; }
select, input[type='range'] { display: block; width: 100%; margin-top: 4px; }
.hint, .diagnostics { color: #c7d5e7; font-size: 12px; }
.diagnostics { border-top: 1px solid #637389; padding-top: 10px; white-space: pre-line; }
.comparison-label { position: absolute; z-index: 1; top: 12px; padding: 4px 8px; background: #10141ddd; border-radius: 4px; pointer-events: none; }
.comparison-label.left { left: 12px; }
.comparison-label.right { right: 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; margin: 8px; padding: 12px; }
  .comparison-label { font-size: 11px; }
}