*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:65px;background:#050505;color:#fff}body{margin:0;font-family:Arial,"PingFang SC",sans-serif}a{color:inherit;text-decoration:none}header{height:58px;position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;padding:0 28px;background:rgba(5,5,5,.96);border-bottom:1px solid #242424}.brand{font-weight:700;white-space:nowrap;font-size:17px}.brand span{color:#ff3535;margin-left:8px;font-size:10px}nav{display:flex;gap:26px;flex:1;justify-content:center;overflow:auto;white-space:nowrap}nav a{color:#aaa;font-size:12px;padding:15px 0}nav a:hover,nav a.active{color:white}button{font:inherit;cursor:pointer}#zoom{background:none;border:1px solid #444;color:#ddd;border-radius:4px;padding:5px 9px;font-size:12px;white-space:nowrap}main{max-width:1600px;margin:auto}.page{position:relative;aspect-ratio:16/9;width:100%;background:#050505;scroll-margin-top:5px}.art{display:block;width:100%;height:100%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:pre-line}.video-box{position:absolute;background:#000}.video-box video{display:block;width:100%;height:100%;object-fit:contain}.play{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;border:0;color:white;background:rgba(0,0,0,.08);gap:8px}.play span{display:grid;place-items:center;background:rgba(0,0,0,.65);border:1px solid #aaa;border-radius:50%;width:48px;height:48px;padding-left:3px;font-size:19px}.play small{font-size:11px;text-shadow:0 1px 4px black}.play:hover span{background:#e73232;border-color:#e73232}.error{position:absolute;bottom:25%;left:0;right:0;text-align:center;background:#111;padding:10px;font-size:12px}.hotlink{position:absolute}.hotlink:hover{outline:1px solid #f6d75b}footer{position:fixed;bottom:15px;right:18px;display:flex;gap:15px;align-items:center;background:#181818d9;border:1px solid #333;padding:7px 12px;border-radius:30px;font-size:11px;color:#aaa;z-index:9}footer a{font-size:19px;color:white}.skip{position:fixed;top:-60px}.skip:focus{top:60px;z-index:99;background:#222;padding:10px}:focus-visible{outline:2px solid #f6d75b;outline-offset:3px}body.zoom main{max-width:none;width:2000px}body.zoom .page{width:2000px}@media(max-width:700px){header{gap:12px;padding:0 12px;height:52px}.brand{font-size:14px}nav{justify-content:flex-start;gap:18px}nav a{font-size:11px}.page{margin-bottom:12px}.play span{width:28px;height:28px;font-size:12px}.play small{display:none}footer{bottom:9px;right:9px}body.zoom main,body.zoom .page{width:1100px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Keep each original slide comfortably inside a desktop viewport. */
main{width:calc(100% - 64px);max-width:min(1200px,calc((100svh - 150px)*16/9));margin:32px auto 60px}.page{margin-bottom:64px}body.zoom main{margin-left:auto;margin-right:auto}body.zoom .page{margin-bottom:64px}@media(max-width:700px){main{width:100%;max-width:none;margin:20px auto 40px}.page{margin-bottom:24px}}

/* Preserve the original portrait proportions with breathing room. */
#page-2>.art{clip-path:inset(0 0 0 54%)}
.portrait{position:absolute;inset:0 auto 0 0;width:52%;height:100%;overflow:hidden;transform:scale(.8);transform-origin:center}
.portrait img{display:block;width:192.307692%;height:100%;max-width:none}
/* Show one designed play control until playback starts. */
.video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.video-box:not(.started) video{opacity:0}
.video-box.started .video-poster{display:none}
.play span{padding:0}
.play span::before{content:"";width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid white;margin-left:3px}
@media(max-width:700px){.play span::before{border-top-width:5px;border-bottom-width:5px;border-left-width:8px}}

/* Remove the obsolete link line below the project collage. */
#page-26>.art{clip-path:inset(0 0 12.5% 0)}
