:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #e9e6df; background: #17191b; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #3d4247; }
h1 { font-size: 1.15rem; font-weight: 550; margin: 0; }
h2 { font-size: 1rem; font-weight: 550; margin: 0; }
p { line-height: 1.55; margin: 0; }
header p { color: #b9babc; font-size: .8rem; margin-top: .3rem; }
a { color: #e1bd76; text-underline-offset: .2em; overflow-wrap: anywhere; font-size: .85rem; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; min-height: 37rem; }
.stage { position: relative; min-width: 0; min-height: 37rem; }
#viewport { position: absolute; inset: 0; touch-action: none; }
canvas { display: block; width: 100%; height: 100%; }
#status, .hint { position: absolute; left: 1.25rem; right: 1.25rem; pointer-events: none; font-size: .8rem; color: #c3c5c6; }
#status { top: 1rem; }
.hint { bottom: 1rem; }
aside { display: flex; flex-direction: column; align-items: stretch; gap: .8rem; min-width: 0; padding: 1.25rem; background: #222528; border-left: 1px solid #3d4247; }
.buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
button, select { font: inherit; font-size: .8rem; background: #30353a; color: #f2f0eb; border: 1px solid #555d64; border-radius: .25rem; padding: .55rem .65rem; min-height: 2.5rem; }
button { cursor: pointer; }
button:hover { background: #41484e; }
:focus-visible { outline: 2px solid #e1bd76; outline-offset: 3px; }
label { font-size: .85rem; }
label output { float: right; color: #c4c6c8; }
input[type="range"] { width: 100%; margin: 0; accent-color: #ddb66b; }
.check { display: flex; align-items: center; gap: .5rem; min-height: 1.6rem; }
input[type="checkbox"] { accent-color: #ddb66b; }
#part-note, .notice { font-size: .78rem; color: #c4c6c8; }
.notice { padding-top: .8rem; border-top: 1px solid #484d51; }
@media (max-width: 42rem) {
  main { grid-template-columns: minmax(0, 1fr); }
  .stage { min-height: 25rem; }
  aside { border-left: 0; border-top: 1px solid #3d4247; }
}