:root { color-scheme: dark; font: 15px/1.5 system-ui, sans-serif; color: #eeeaf6; background: #100e1d; }
* { box-sizing: border-box; }
body { margin: 0; }
header { padding: 16px 24px 8px; }
h1 { margin: 6px 0; font-size: clamp(24px, 4vw, 36px); }
p { margin: 6px 0; }
a { color: #8de5d3; }
button, select, .file-button { font: inherit; color: inherit; background: #29233d; border: 1px solid #827497; border-radius: 6px; padding: 8px 12px; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
button:focus-visible, a:focus-visible, select:focus-visible, .file-button:focus-within { outline: 3px solid #8de5d3; outline-offset: 3px; }
.tools { padding: 8px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.file-button { position: relative; overflow: hidden; }
.file-button input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
#status, .help { margin: 8px 24px; }
#status { min-height: 24px; }
.help { max-width: 1000px; }
.help summary { cursor: pointer; }
#engine { height: max(540px, calc(100dvh - 260px)); margin-top: 12px; background: white; }
iframe { border: 0; width: 100%; height: 100%; }
.viewer { margin: 12px 24px; position: relative; height: max(420px, calc(100dvh - 350px)); overflow: hidden; border: 1px solid #827497; background: #29233d; touch-action: none; }
.viewer canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.viewer canvas:active { cursor: grabbing; }
.viewer canvas:focus-visible { outline: 3px solid #8de5d3; outline-offset: -4px; }
.viewer-note { padding: 0 24px; max-width: 1100px; }
@media (max-width: 600px) { header { padding: 12px; } .tools { padding: 8px 12px; } #status, .help, .viewer { margin: 8px 12px; } .viewer-note { padding: 0 12px; } }