:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #030406; color: #d8dce4; }
* { box-sizing: border-box; }
body { margin: 0; }
.logo-stage { position: relative; isolation: isolate; width: 100%; height: 100svh; min-height: 300px; overflow: hidden; background: #030406; }
.poster, .viewport { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster { object-fit: contain; }
.viewport { opacity: 0; cursor: grab; touch-action: pan-y; }
.viewport:active { cursor: grabbing; }
.viewport canvas { display: block; width: 100%; height: 100%; }
.ready .viewport { opacity: 1; }
.ready .poster { opacity: 0; }
.controls { position: absolute; z-index: 2; bottom: max(28px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; white-space: nowrap; }
[hidden] { display: none !important; }
button { font: inherit; font-size: 12px; min-height: 44px; padding: 10px 16px; color: #c1c9d7; border: 1px solid #ffffff24; border-radius: 4px; background: #090d13dd; cursor: pointer; }
button:hover { color: #fff; border-color: #77d5e98c; }
button:focus-visible { outline: 2px solid #69dfff; outline-offset: 4px; }
.hint { position: absolute; bottom: 82px; left: 0; right: 0; margin: 0; text-align: center; font-size: 11px; color: #77818f; pointer-events: none; }
@media (max-width: 480px) { .controls { bottom: max(20px, env(safe-area-inset-bottom)); } button { padding-inline: 12px; } .hint { bottom: 74px; } }

/* Reserve a separate control strip so the gem never overlaps touch controls. */
.poster,.viewport{bottom:106px;height:auto}