* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d0a14; color: #e9e4f2; font: 14px/1.4 system-ui, "Segoe UI", sans-serif; }
body { display: flex; flex-direction: column; overflow: hidden; }
.top { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: #17111f; border-bottom: 1px solid #2a2036; flex-wrap: wrap; }
.back { color: #b9a9d6; text-decoration: none; }
.back:hover { color: #fff; }
.brand { font-weight: 800; letter-spacing: .5px; }
.who { color: #d9c98f; font-size: 13px; text-decoration: none; }
a.who:hover { color: #fff; }
.keys { margin-left: auto; color: #9a8db0; font-size: 12px; }
.keys b { color: #e9e4f2; background: #2a2036; padding: 0 5px; border-radius: 3px; font-weight: 600; }
.stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
canvas { display: block; max-width: 100%; max-height: 100%; aspect-ratio: 16 / 9; width: 100%; height: auto; background: #000; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; }
@media (min-aspect-ratio: 16/9) { canvas { width: auto; height: 100%; } }
.rotate { display: none; position: absolute; inset: auto 0 16px 0; text-align: center; color: #d9c98f; font-weight: 600; }
@media (max-width: 700px) { .keys { display: none; } }
@media (max-width: 700px) and (orientation: portrait) { .rotate { display: block; } }
@media (max-height: 480px) { .top { display: none; } }