:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #112a25; color: #fffaef; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
main { display: flex; flex-direction: column; min-width: 760px; width: 100%; min-height: 640px; height: 100svh; }
nav { display: flex; align-items: center; gap: 10px; padding: 6px 24px; background: #0a1e1a; border-bottom: 1px solid #28423a; }
nav span { font-size: 11px; color: #e1c47e; }
button { font: inherit; font-size: 14px; color: #fffaef; background: #234438; border: 1px solid transparent; border-radius: 3px; padding: 8px 12px; cursor: pointer; }
nav button { background: transparent; }
button:hover, nav button[aria-pressed="true"] { background: #336048; }
button:focus-visible { outline: 2px solid #e1c47e; outline-offset: 1px; }
#stage { position: relative; flex: 1; min-height: 0; }
canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
canvas[hidden], button[hidden] { display: none; }
#startup { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; padding: 32px; background: #112a25; text-align: center; }
#startup[hidden] { display: none; }
h1 { font-weight: 500; letter-spacing: 0.03em; }
p { max-width: 480px; line-height: 1.6; color: #97b7a7; }
noscript { position: fixed; top: 24px; left: 24px; }