* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; color: #fff; background: #000; }
body { margin: 0; }
#launcher { width: min(860px, 100%); margin: auto; padding: clamp(28px, 7vw, 88px) 24px; }
.eyebrow { color: #8db5ff; font-size: 14px; letter-spacing: .15em; margin: 0 0 32px; }
#launcher h1 { font-size: clamp(32px, 6vw, 52px); margin: 0 0 16px; }
.description { color: #bac2d0; font-size: 18px; line-height: 1.7; }
.screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 40px 0 28px; }
.screens a { display: flex; flex-direction: column; gap: 26px; padding: 32px; background: #10151e; border: 1px solid #303c50; border-radius: 12px; color: #fff; text-decoration: none; }
.screens a:hover { background: #192439; border-color: #8db5ff; }
.screens span { font-size: 16px; color: #8db5ff; }
.screens strong { font-size: 36px; }
.screens small, .hint { font-size: 14px; color: #bac2d0; line-height: 1.7; }
#display { width: 100%; height: 100vh; height: 100dvh; display: grid; place-items: center; overflow: hidden; background: #000; }
#screen-label { margin: 0; font-size: clamp(64px, 15vmin, 260px); font-weight: 700; line-height: 1.2; white-space: nowrap; }
#controls { position: fixed; bottom: 28px; left: 16px; right: 16px; text-align: center; }
button { font: inherit; font-size: 18px; padding: 14px 24px; border: 1px solid #789de2; border-radius: 8px; background: #193864; color: #fff; cursor: pointer; }
button:hover { background: #254d86; }
:focus-visible { outline: 3px solid #aacaff; outline-offset: 5px; }
#status { font-size: 14px; color: #aeb8c8; line-height: 1.6; }
:fullscreen #controls, .kiosk #controls { display: none; }
:fullscreen { cursor: none; }
@media (max-width: 540px) { .screens { grid-template-columns: 1fr; } .screens a { gap: 18px; padding: 24px; } }