:root { color-scheme: light; --fade: 1000ms; }
* { box-sizing: border-box; }
html,body { margin:0; width:100%; height:100%; }
body { background:#fff; color:#171717; font-family:Arial,Helvetica,sans-serif; }
[hidden] { display:none !important; }
#home { position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; padding:clamp(40px,8vh,90px) 24px 40px; isolation:isolate; }
#home::before { content:""; position:absolute; inset:0; z-index:-1; background:url('assets/background.jpg') center/cover no-repeat; opacity:.055; }
.logo { width:min(360px,75vw); height:auto; }
.launch { margin:auto 0; display:flex; flex-direction:column; align-items:center; padding:40px 0; min-height:240px; }
button { font:inherit; cursor:pointer; }
.play-options { display:flex; justify-content:center; gap:clamp(22px,5vw,64px); }
.play-option { display:flex; flex-direction:column; align-items:center; gap:18px; padding:0; border:0; background:transparent; color:#151515; }
.play-circle { display:grid; place-items:center; width:clamp(72px,16vw,94px); height:clamp(72px,16vw,94px); border:1px solid #000; border-radius:50%; background:#000; color:#fff; box-shadow:0 8px 28px rgba(0,0,0,.1); transition:background .25s,transform .25s,box-shadow .25s; }
.play-option:hover .play-circle { background:#252525; transform:scale(1.045); box-shadow:0 12px 32px rgba(0,0,0,.16); }
.play-option:active .play-circle { transform:scale(.97); }
.play-circle svg { width:32px; height:32px; fill:currentColor; transform:translateX(2px); }
.play-label { font-size:14px; letter-spacing:1.5px; }
button:focus-visible { outline:3px solid #95733b; outline-offset:5px; }
#status { max-width:430px; text-align:center; font-size:14px; line-height:1.6; margin:20px 0 8px; }
#stage { position:fixed; inset:0; background:#000; z-index:10; width:100%; height:100%; }
#slides { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.slide { position:absolute; inset:0; width:100%; height:100%; background:#000; opacity:0; }
.slide img,.slide video { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
#controls { position:absolute; right:20px; top:max(20px,env(safe-area-inset-top)); z-index:100; display:flex; gap:8px; opacity:0; pointer-events:none; transition:opacity .25s; }
#stage.show-controls #controls { opacity:1; pointer-events:auto; }
#stage.keyboard-controls #controls { opacity:1; pointer-events:auto; }
#stage { cursor:default; }
#stage:not(.show-controls):not(.keyboard-controls) { cursor:none; }
#controls button { background:rgba(20,20,20,.75); color:#fff; border:1px solid #777; border-radius:5px; padding:10px 14px; font-size:14px; }