:root { color-scheme: dark; font-family: "Times New Roman", Times, serif; font-style: italic; color: #fffdf5; background: #020c1b; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
main { position: relative; width: 100%; height: 100%; height: 100dvh; overflow: hidden; }
#experience { display: block; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #020c1b; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
#experience:focus-visible { outline: 1px solid #fffdf5; outline-offset: -8px; }
#frame { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; pointer-events: none; user-select: none; }
header { position: absolute; top: max(30px, env(safe-area-inset-top)); left: 18px; right: 18px; text-align: center; pointer-events: none; text-shadow: 0 1px 14px #02091788; }
h1 { margin: 0; font-size: clamp(20px, 2.2vw, 29px); font-weight: 400; letter-spacing: .035em; line-height: 1.1; }
#count { margin: 9px 0 0; font-size: clamp(16px, 1.5vw, 20px); font-variant-numeric: tabular-nums; letter-spacing: .09em; line-height: 1.2; }
#hint, #status { position: absolute; left: 20px; right: 20px; bottom: max(24px, env(safe-area-inset-bottom)); margin: 0; text-align: center; pointer-events: none; font-size: 12px; letter-spacing: .12em; text-shadow: 0 1px 12px #000; }
#hint { transition: opacity .4s ease; }
#hint.hidden { opacity: 0; }
#status:empty { display: none; }
@media (min-aspect-ratio: 1/1) { #frame { object-position: 50% 65%; } }
@media (prefers-reduced-motion: reduce) { #hint { transition: none; } }