html, body { margin: 0; height: 100%; overflow: hidden; background: #15161c; font: 500 12px/1.4 system-ui, sans-serif; }
html[data-theme="light"], html[data-theme="light"] body { background: #f3f6f9; }
#shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.banner { position: fixed; right: 16px; bottom: 14px; white-space: nowrap; border-radius: 8px; background: #20222b; color: #f2f4fb; padding: 5px 10px; font-size: 12px; font-weight: 500; pointer-events: none; }
#hotspots { position: fixed; top: 0; left: 0; width: 1440px; height: 900px; transform-origin: 0 0; }
.spot { position: absolute; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.spot:hover { background: rgb(82 102 235 / .12); box-shadow: 0 0 0 1.5px rgb(82 102 235 / .55); }
.spot:focus-visible { outline: 2px solid #8b9aff; outline-offset: 1px; }
.hinting .side { animation: pulse 2.4s ease-in-out infinite; }
/* Sits in the empty sidebar space under Tools (rects end at y 487), pointing up at the pages. */
.hint { position: absolute; left: 116px; top: 506px; translate: -50% 0; padding: 7px 14px 7px 12px; border-radius: 999px; background: #5266eb; color: #fff; font: 600 13px/18px system-ui, sans-serif; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 20px rgb(82 102 235 / .35); animation: nudge 1.6s ease-in-out infinite; }
.hint::before { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-bottom: 9px solid #5266eb; border-top: 0; }
@keyframes nudge { 50% { transform: translateY(-6px); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 1.5px rgb(82 102 235 / .5); background: rgb(82 102 235 / .08); } }
@media (prefers-reduced-motion: reduce) { .hint, .hinting .side { animation: none; } }