*{box-sizing:border-box}
html{height:100%;background:#030303;color-scheme:dark}
body{margin:0;height:100%;overflow:hidden;background:#030303;color:#eee;font-family:Arial,Helvetica,sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid #fff;outline-offset:6px}
.locked{overflow:hidden}
.entrance{position:fixed;z-index:10;inset:0;display:grid;place-items:center;background:#030303;transition:opacity .65s ease,visibility .65s;isolation:isolate}
.entrance:before{content:"";position:absolute;inset:0;background:linear-gradient(#000b,#000d),url('assets/ocean.png') center/cover;opacity:.3;z-index:-1}
.entrance-inner{width:min(86vw,460px);text-align:center}
.enter-button{display:block;width:100%;border:1px solid #777;background:#090909cc;padding:23px 22px;font-size:16px;letter-spacing:5px;transition:background .2s,border-color .2s}
.enter-button:hover{background:#1b1b1b;border-color:#ddd}
.entered .entrance{opacity:0;visibility:hidden;pointer-events:none}
main{height:100vh;height:100dvh;width:100%;display:grid;grid-template-rows:minmax(0,1fr);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);opacity:0;visibility:hidden;transition:opacity .8s ease}
main:focus{outline:none}
.entered main{opacity:1;visibility:visible}
.poster-space{min-width:0;min-height:0;display:grid;place-items:center;container-type:size}
.poster{position:relative;width:min(100cqw,62.31214cqh);aspect-ratio:1078/1730;container-type:inline-size;overflow:hidden;background:#050505}
.ocean-fallback,#ocean,.artwork{position:absolute;inset:0;width:100%;height:100%;display:block}
.ocean-fallback{object-fit:fill}
#ocean{opacity:0}
#ocean.ready{opacity:1}
.artwork{height:84.624278%;overflow:hidden}
.reveal{position:absolute;top:84.624278%;bottom:0;left:0;width:100%;margin:0;display:grid;justify-items:center;align-content:center;gap:min(8px,1.45cqw);text-align:center;padding:min(12px,2cqw) min(16px,3cqw);background:#030303}
.reveal p{width:100%;margin:0;font-size:min(12px,2.05cqw);letter-spacing:min(2px,.35cqw);line-height:1.45;text-align:center;text-wrap:balance}
.clock{margin:0;text-align:center;white-space:nowrap;font-size:min(34px,6.4cqw);line-height:1.2;letter-spacing:min(3px,.5cqw);font-variant-numeric:tabular-nums}
.reveal .note{opacity:.6;font-size:min(11px,1.8cqw);letter-spacing:min(1px,.2cqw)}
@media(max-width:500px){.entrance-inner{width:82vw}.enter-button{font-size:14px;letter-spacing:4px}}
@media(prefers-reduced-motion:reduce){.entrance,main{transition:none}}