@font-face{font-family:OldEnglish;src:url("assets/UnifrakturCook-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html{height:100%;background:#030303;color-scheme:dark}
body{margin:0;height:100%;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);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:var(--banner-height,120px) 0 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{min-height:0;height:100%;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}}

.rain-banner{position:relative;z-index:20;background:#be1727;color:#fff4e8;border-bottom:1px solid #f55b5b;box-shadow:0 4px 28px #0008;padding:0 20px;padding-top:env(safe-area-inset-top,0px)}
.rain-banner-inner{min-height:108px;max-width:860px;margin:0 auto;display:flex;gap:22px;align-items:center;justify-content:center}
.rain-banner img{width:104px;height:104px;object-fit:contain;flex:none;align-self:flex-end}
.rain-banner p{margin:12px 0;max-width:650px;font-family:OldEnglish,"Old English Text MT",serif;font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1.12;letter-spacing:.15px;text-wrap:balance}
.status-kicker{color:#e02a3c;font-weight:bold}
.tears{opacity:0;transition:opacity .35s ease}
.crying .tears{opacity:1}
.tear-trail{stroke-dasharray:60;stroke-dashoffset:60}
.crying .tear-trail{animation:tear-flow 1.1s ease-out forwards}
.crying .tear-bead{animation:tear-fall 2.5s 1s ease-in infinite}
.crying .right-tear{animation-delay:1.8s}
@keyframes tear-flow{to{stroke-dashoffset:0}}
@keyframes tear-fall{0%,15%{transform:translateY(0);opacity:1}85%,100%{transform:translateY(30px);opacity:0}}
@media(max-width:500px){.rain-banner{padding-left:12px;padding-right:12px}.rain-banner-inner{min-height:100px;gap:12px}.rain-banner img{width:78px;height:90px}.rain-banner p{font-size:22px;line-height:1.12;letter-spacing:.1px}}
@media(max-height:500px){.rain-banner-inner{min-height:68px}.rain-banner img{width:65px;height:65px}.rain-banner p{font-size:20px;margin:8px 0}}
@media(prefers-reduced-motion:reduce){.crying .tear-trail{animation:none;stroke-dashoffset:0}.crying .tear-bead{animation:none}.tears{transition:none}}