@font-face{font-family:FilmSans;src:url('/experiments/layerzero/assets/roboto-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:FilmMono;src:url('/experiments/layerzero/assets/roboto-mono-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:light;font-family:FilmSans,Arial,sans-serif;background:#ddd;color:#151515}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}
#experience{width:100%;height:100%;height:100svh;background:#ddd}
#stage{width:100%;height:100%;position:relative;overflow:hidden;background:#ddd;isolation:isolate}
#film{display:block;width:100%;height:100%;outline:none;touch-action:none}
#film:focus-visible{outline:1px solid #777;outline-offset:-4px}
#film.interactive{cursor:grab}#film.dragging{cursor:grabbing}
#sound{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffff30;border-radius:50%;background:#eeeeee96;backdrop-filter:blur(12px);color:#333;cursor:pointer;opacity:0;transition:opacity .25s,background .2s}
html[data-ready=true] #sound{opacity:.65}html[data-ready=true] #sound:hover,#sound:focus-visible{opacity:1;background:#f2f2f2d9}#sound svg{width:18px;height:18px}#sound[hidden]{display:none}#sound:focus-visible{outline:2px solid #555;outline-offset:3px}#sound .sound-on,#sound[data-sound=on] .sound-off{display:none}#sound[data-sound=on] .sound-on{display:block}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:#ddd;transition:opacity .45s;pointer-events:none}
#loading span{font:9px FilmMono,monospace;letter-spacing:.12em;text-transform:uppercase;color:#777}
#loading.loaded{opacity:0;visibility:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#fallback{position:absolute;inset:0;background:#e7e7e7;padding:10%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}#fallback[hidden]{display:none}#fallback h1{font-weight:400;font-size:clamp(24px,6vw,90px);letter-spacing:-.06em}#fallback p{font-size:12px;max-width:35em;line-height:1.5}.noscript{position:fixed;inset:50% 0 auto;text-align:center;font-size:13px}
@media(max-width:600px){#loading img{width:19px;height:32px}#loading{gap:12px}}
@media(prefers-reduced-motion:reduce){#loading{transition:none}}

#restart{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 15px;border:1px solid #ffffff60;border-radius:24px;background:#edededb8;backdrop-filter:blur(14px);color:#333;font:11px FilmMono,monospace;cursor:pointer;transition:background .2s}
#restart[hidden]{display:none}#restart svg{width:17px;height:17px}#restart:hover{background:#f2f2f2e6}#restart:focus-visible{outline:2px solid #555;outline-offset:3px}

.study-bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;gap:16px;padding:14px 18px;background:#dddddded;color:#333;font:10px FilmMono,monospace;line-height:1.5}.study-bar a{color:inherit;text-decoration:none;min-height:24px;display:flex;align-items:center}.study-bar a:focus-visible{outline:2px solid #333;outline-offset:4px}.study-bar span{max-width:65%;text-align:right}@media(max-width:600px){.study-bar{font-size:9px;padding:10px 12px}}