/* Local EstyJS interface, 2026-09-09. GPL-2.0-or-later. */
* { box-sizing: border-box; }
body { margin: 0; background: #191816; color: #f1eadb; font: 16px/1.5 "Trebuchet MS", sans-serif; }
main { max-width: 900px; margin: auto; padding: 1rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.toolbar span, .help { font-size: .9rem; color: #ccc4b5; }
.credits a { color: #ffb4aa; text-underline-offset: 3px; }
button, input { font: inherit; }
button, input::file-selector-button { padding: .55rem .8rem; color: #fff; background: #a92f27; border: 1px solid #ed776c; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
button:hover:enabled { background: #7d251f; }
:focus-visible { outline: 3px solid #e3a43b; outline-offset: 3px; }
#status { min-height: 1.5em; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: #000; border: 2px solid #777; image-rendering: pixelated; }
canvas:fullscreen { width: 100vw; height: 100vh; object-fit: contain; background: #000; }
fieldset { margin: 1rem 0; padding: .75rem; border: 1px solid #777; min-width: 0; }
legend { padding-inline: .4rem; }
.disks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1rem; }
.disks label, .disks small { display: block; }
.disks input { display: block; width: 100%; margin-block: .4rem; }
.disks small { overflow-wrap: anywhere; }
@media (max-width: 550px) { .disks { grid-template-columns: 1fr; } main { padding: .75rem; } }