*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#080808;color:#fff;font-family:Helvetica,Arial,sans-serif}
main{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden}
#screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#screen iframe{width:100%;height:100%;border:0;pointer-events:none}
.biography{position:absolute;top:24px;left:28px;right:28px;bottom:88px;max-width:1220px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#aaa #222;padding:6px 18px 30px 6px;font-size:20pt;font-weight:400;line-height:1.4;letter-spacing:-.02em;z-index:2}
h1{font:inherit;letter-spacing:inherit;margin:0}p{margin:1em 0 0}header div{margin:0}
a{color:inherit;text-decoration:none}
/* Thin dark outline keeps the yellow letterforms distinct from the moving image. */
.ink,footer a{color:#ffff00;-webkit-text-stroke:1.5px #111;paint-order:stroke fill;padding:0}
.ink{overflow-wrap:anywhere}
a.ink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.13em}
a:hover{text-decoration:underline}a:focus-visible,button:focus-visible,.biography:focus-visible{outline:2px solid #ffff00;outline-offset:3px}
footer{position:absolute;bottom:24px;left:28px;right:28px;font-size:16px;line-height:1.4;z-index:3}footer a:empty{display:none}
#message{position:absolute;bottom:58px;left:28px;right:28px;width:fit-content;max-width:calc(100% - 56px);color:#fff;background:rgba(0,0,0,.85);padding:8px 12px;font-size:16px;z-index:4;pointer-events:none}
#play{position:absolute;bottom:100px;left:28px;background:#fff;color:#000;border:0;padding:14px 22px;font:16px Helvetica,Arial,sans-serif;cursor:pointer;z-index:5}
[hidden]{display:none!important}
@media(max-width:650px){.biography{top:14px;left:14px;right:14px;bottom:108px;padding-right:10px}footer{left:20px;right:20px;bottom:20px}#message{left:20px;right:20px;max-width:calc(100% - 40px)}#play{left:20px}}
.text-link{font:inherit;letter-spacing:inherit;line-height:inherit;border:0;background:transparent;padding:0;cursor:pointer;text-align:left}
a.ink,.text-link,footer a{text-decoration-line:underline;text-decoration-color:#ffff00;text-decoration-thickness:1px;text-underline-offset:.13em}
#bio-details:focus{outline:none}

/* Native system fallbacks provide glyphs for each camera language. */
html:lang(ja) .biography,html:lang(ko) .biography,html:lang(zh) .biography,html:lang(th) .biography,html:lang(hi) .biography{letter-spacing:normal}
