:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #091018; color: #e8f2ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at top, #172a3d, #070b10 65%); }
main { width: min(94vw, 920px); padding: 2rem; }
header h1 { margin-bottom: .35rem; font-size: clamp(1.5rem, 4vw, 2.6rem); }
header p { color: #9cb2c9; }
.controls { color: #bcd0e4; }
kbd { display: inline-block; min-width: 1.7em; padding: .12rem .3rem; border: 1px solid #52718d; border-bottom-width: 2px; border-radius: .3rem; background: #102030; text-align: center; }
nav { display: flex; gap: .65rem; flex-wrap: wrap; margin: 1.2rem 0; }
button { border: 1px solid #3c6688; border-radius: .45rem; padding: .65rem .9rem; color: #d9edff; background: #10263a; font: inherit; cursor: pointer; }
button:hover, button:focus-visible { background: #19466a; outline: 2px solid #62c7ff; outline-offset: 2px; }
.file-panel { display: grid; grid-template-columns: 1fr auto; gap: .6rem 1rem; align-items: center; margin: 1rem 0; padding: 1rem; border: 1px solid #31516c; border-radius: .55rem; background: #0c1824; }
.file-panel label { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.file-panel input { max-width: 100%; font: inherit; }
.file-panel small, .file-panel span { color: #9cb2c9; }
.file-panel span { text-align: right; }
.map-panel { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin: 1rem 0; padding: .8rem 1rem; border: 1px solid #31516c; border-radius: .55rem; background: #0c1824; }
.map-panel label { display: flex; gap: .8rem; align-items: center; }
.map-panel select { min-width: 9rem; padding: .45rem .6rem; border: 1px solid #52718d; border-radius: .35rem; color: #e8f2ff; background: #102030; font: inherit; }
.map-panel .music-toggle { white-space: nowrap; }
.map-panel input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: #62c7ff; }
.map-panel small { color: #9cb2c9; }
canvas { width: 100%; image-rendering: pixelated; border: 1px solid #31516c; border-radius: .55rem; box-shadow: 0 1.5rem 5rem #000a; background: #000; touch-action: none; }
.status { color: #7ee2a8; }
pre { min-height: 2.5rem; white-space: pre-wrap; color: #a9bdd1; }