:root { color-scheme: dark; font: 14px/1.45 system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #10232c; color: #eef4f7; }
canvas { display: block; width: 100vw; height: 100vh; touch-action: none; }
#panel { position: absolute; top: 16px; left: 16px; max-width: min(650px, calc(100vw - 32px));
  padding: 14px 18px; border: 1px solid #76949d; border-radius: 8px; background: #10232ce8; }
h1 { font-size: 19px; margin: 0 0 8px; }
#panel > summary { font-size: 18px; font-weight: 650; cursor: pointer; }
p { margin: 8px 0; }
a { color: #9de2ff; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
button, select { font: inherit; padding: 5px 9px; }
label { display: flex; align-items: center; gap: 6px; }
input { width: 90px; }
.note { font-size: 12px; color: #b7cbd4; }
pre { max-height: 230px; overflow: auto; font-size: 12px; white-space: pre-wrap; }
body.error #status { color: #ffbfaf; font-weight: bold; }
.landing main { max-width: 760px; padding: 40px; margin: 40px auto; }
.choice { display: inline-block; padding: 14px; border: 1px solid #76949d; border-radius: 8px; }