:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #deece9; background: #07121b; }
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; display: grid; grid-template-rows: 52px minmax(0, 1fr) 48px; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; }
header { border-bottom: 1px solid #243a42; }
.brand { color: #e7f2ec; font-size: 17px; font-weight: 750; letter-spacing: .2em; text-decoration: none; }
.brand span { font-size: 10px; color: #86a4ac; letter-spacing: .13em; padding-left: 14px; }
button { border: 1px solid #597f85; background: #142d37; color: #e2f6ef; border-radius: 4px; padding: 9px 20px; cursor: pointer; font: inherit; font-size: 13px; }
button:hover:not(:disabled), button:focus-visible { background: #244952; outline: 2px solid #55f0d3; outline-offset: 3px; }
button:disabled { opacity: .35; cursor: default; }
#stage { position: relative; display: grid; place-items: center; overflow: hidden; background: #030a10; }
#stage:fullscreen { width: 100vw; height: 100vh; }
canvas { display: block; outline: none; background: #091523; }
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: radial-gradient(ellipse at 50% 45%, #183740 0%, #07121b 65%); }
#loading[hidden], [hidden] { display: none !important; }
.kicker { color: #55f0d3; font-size: 11px; letter-spacing: .25em; }
h1 { font-size: clamp(44px, 7vw, 84px); font-weight: 500; letter-spacing: .2em; margin: 14px 0 10px .2em; }
#loading p { line-height: 1.9; color: #a3bbc0; font-size: 14px; }
#start { margin: 20px 0 12px; background: #55f0d3; border-color: #55f0d3; color: #071c22; min-width: 230px; font-weight: 700; padding: 15px 30px; }
#progress { width: min(340px, 80vw); height: 8px; margin: 24px 0 10px; accent-color: #55f0d3; }
#status { max-width: 620px; overflow-wrap: anywhere; }
footer { font-size: 11px; color: #88a3aa; }
@media (max-width: 900px) { .brand span { display: none; } footer { justify-content: center; text-align: center; } footer span:last-child { display: none; } }