@font-face{font-family:Noto;src:url('./assets/NotoSansJP-300-subset.woff2') format('woff2');font-weight:300;font-display:swap}
:root{color-scheme:dark;font-family:Noto,'Helvetica Neue',sans-serif;font-weight:300;background:#050505;color:#efefef}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:1px solid #fff;outline-offset:7px}button:hover,a:hover{color:#fff}#cinema{height:100svh;min-height:460px;position:relative;overflow:hidden}#stage,#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}header{position:absolute;top:35px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{font-family:Arial,sans-serif;font-size:18px;letter-spacing:-.7px}.edition,.eyebrow{font-family:Arial,sans-serif;letter-spacing:.23em;font-size:9px;color:#777}.shot-label{position:absolute;left:43px;top:46%;display:flex;flex-direction:column;gap:14px;font-size:10px;letter-spacing:.2em;color:#777}#shot-number{font-family:Arial,sans-serif;font-size:11px;color:#ccc}#caption{position:absolute;bottom:20%;left:12%;width:76%;text-align:center;font-size:clamp(14px,1.45vw,20px);line-height:1.9;letter-spacing:.08em;margin:0;white-space:pre-line;pointer-events:none}footer{position:absolute;left:42px;right:42px;bottom:30px;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:10px;color:#858585}nav,.actions{display:flex;gap:25px}nav button{padding:9px 0;font-family:Arial,sans-serif;letter-spacing:.05em}nav span{font-family:Noto,sans-serif;margin-left:8px}nav button[aria-current=true]{color:#fff}#progress{position:absolute;bottom:0;left:0;right:0;height:1px;background:#202020}#progress i{display:block;height:100%;background:#aaa;transform-origin:left;transform:scaleX(0)}#loading{position:absolute;left:0;right:0;top:45%;text-align:center;font-size:13px;letter-spacing:.25em;transition:opacity .7s}#logo-link{position:absolute;left:32%;top:20%;width:36%;height:45%}dialog{background:#080808;color:#dedede;border:1px solid #292929;padding:50px;max-width:850px;width:90%;max-height:90svh}dialog::backdrop{background:#000c;backdrop-filter:blur(10px)}dialog #close{float:right;font-size:12px}article{padding:50px 15px 20px}h1{font-size:clamp(20px,3vw,30px);line-height:1.9;font-weight:300;margin:30px 0 55px}article p{font-size:14px;line-height:2.3;margin:25px 0}article img{margin-top:40px;display:block}body.text-only #cinema{visibility:hidden}body.text-only dialog{position:static;margin:0 auto;border:0;max-height:none}body.text-only #close{display:none}@media(max-width:700px){header{top:25px;left:23px;right:23px}.edition{font-size:7px}.shot-label{left:23px;top:35%;font-size:8px}footer{left:23px;right:23px;bottom:22px;align-items:flex-start;flex-direction:column;gap:12px}nav{gap:25px}.actions{gap:22px}#caption{left:8%;width:84%;bottom:25%;font-size:14px}dialog{padding:24px}#logo-link{left:20%;width:60%}}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#caption{max-width:24em;left:50%;transform:translateX(-50%);width:84%;text-wrap:balance}
@media(max-width:700px){.actions{gap:18px;font-size:9px}#caption{max-width:22em;left:50%}}

/* The final frame is the original blue-and-black artwork on pure white. */
#cinema{--ending:0;--ending-ink:239;color:rgb(var(--ending-ink),var(--ending-ink),var(--ending-ink))}
#ending{position:absolute;inset:0;background:#fff;opacity:var(--ending);pointer-events:none}
#ending-logo{position:absolute;display:block;object-fit:contain}
#cinema header,#cinema .shot-label{opacity:calc(1 - var(--ending))}
#cinema footer button:hover{color:rgb(var(--ending-ink),var(--ending-ink),var(--ending-ink))}
#cinema button:focus-visible,#cinema a:focus-visible{outline-color:rgb(var(--ending-ink),var(--ending-ink),var(--ending-ink))}
#cinema [hidden]{display:none!important}
#cinema[data-ended=true] footer{justify-content:flex-end}
#cinema[data-ended=true] #progress{background:#eee}
#cinema[data-ended=true] #progress i{background:#ddd}

#cinema footer,#cinema #progress{opacity:calc(1 - var(--ending))}