:root { color-scheme: dark; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; color: #e3efff; background: #040d1e; }
* { box-sizing: border-box; }
body { margin: 0; }
main { min-height: 100vh; display: flex; flex-direction: column; }
#stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #020916; }
#scene { position: relative; width: min(100vw, calc((100vh - 170px) * 1702 / 852)); aspect-ratio: 1702 / 852; overflow: hidden; isolation: isolate; }
.background, canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.background { display: block; }
canvas { pointer-events: none; }
#signature-shape { z-index: 1; }
#flight { z-index: 2; }
#announcement { position: absolute; z-index: 3; left: 50%; bottom: 10%; transform: translateX(-50%); color: #e9faff; font-size: clamp(13px, 1.5vw, 26px); letter-spacing: .12em; text-shadow: 0 2px 14px #001b42; white-space: nowrap; }
#controls { display: flex; align-items: end; justify-content: center; flex-wrap: wrap; gap: 16px; padding: 20px 28px 14px; border-top: 1px solid #19304d; }
.intro { margin-right: auto; align-self: center; }
.intro strong { display: block; font-size: 21px; font-weight: 500; letter-spacing: .1em; }
.intro span, .hint { color: #8ea8c9; font-size: 12px; }
.intro span { display: block; margin-top: 6px; }
label { display: grid; gap: 7px; font-size: 12px; color: #9eb4ce; }
input, select, button { min-height: 42px; border: 1px solid #2a4464; border-radius: 4px; color: #e3efff; background: #0b1a30; font: inherit; padding: 8px 12px; }
input { width: 130px; }
button { cursor: pointer; font-size: 14px; transition: background .2s; }
button:hover { background: #193555; }
button:disabled { opacity: .5; cursor: wait; }
#launch { background: #d9b76b; color: #101f36; border-color: #d9b76b; font-weight: bold; padding-inline: 24px; }
#launch:hover { background: #efd18b; }
:focus-visible { outline: 2px solid #e7c77f; outline-offset: 3px; }
#status { width: 100%; text-align: center; margin: 0; color: #a7c9e8; font-size: 12px; }
#sync-status { width: 100%; margin: 0; text-align: center; color: #d9c18f; font-size: 13px; }
#shape-status { width: 100%; margin: 0; text-align: center; color: #a7c9e8; font-size: 12px; }
#controls a { color: #d9c18f; font-size: 13px; }
.hint { margin: -7px 0 0; text-align: center; width: 100%; }
body.clean #controls { display: none; }
body.clean #scene, #stage:fullscreen #scene { width: min(100vw, calc(100vh * 1702 / 852)); }
#stage:fullscreen { display: grid; width: 100vw; height: 100vh; }
@media (max-width: 700px) { #controls { padding: 16px; gap: 12px; justify-content: start; } .intro { width: 100%; } #scene { width: 100vw; } #stage { min-height: 45vh; } input { width: 110px; } }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }