* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #161920; color: #e7eaf0; }
body { margin: 0; }
main { padding: 20px 12px 8px; }
.device { width: min(402px, 100%); height: min(860px, calc(100dvh - 114px)); min-height: 360px; margin: auto; background: #0e0e0e; overflow: hidden; box-shadow: 0 16px 60px #0008; display: flex; flex-direction: column; }
#screen { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; outline: none; overscroll-behavior: contain; }
#screen::-webkit-scrollbar { display: none; }
#artwork, #bottom-nav { position: relative; width: 100%; }
#artwork { overflow: hidden; }
#artwork > img, #bottom-nav > img { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
#bottom-nav { flex: none; aspect-ratio: 804 / 240; }
#bottom-nav[hidden] { display: none; }
.hotspot { position: absolute; display: block; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: #7be9ff33; }
.hotspot:focus-visible { outline: 2px solid #8ee8ff; outline-offset: -2px; background: #8ee8ff22; }
.review-note { max-width: 650px; margin: 14px auto 0; color: #aab3c3; font-size: 12px; line-height: 1.6; text-align: center; }
@media (max-width: 520px) { main { padding: 0 0 8px; } .device { height: calc(100dvh - 44px); } .review-note { padding: 0 12px; } }

.back-to-plan { display: block; width: fit-content; margin: 0 auto; padding: 12px 16px; color: #b8d6ff; text-decoration: none; font-size: 14px; line-height: 20px; }
.back-to-plan:focus-visible { outline: 2px solid #8ee8ff; outline-offset: -3px; }