/* A handful rests near the reader, not in the sky. No hard panel edge. */
.beach .beach-heading{inset:auto 116px max(18px,env(safe-area-inset-bottom)) 116px;display:flex;justify-content:center}
.beach .beach-heading .pocket-stones{position:relative;isolation:isolate;flex:0 1 auto;width:auto;max-width:560px;justify-content:center;gap:3px 8px;padding:10px 18px}
.beach-heading .pocket-stones:before{content:'';position:absolute;inset:-14px -22px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,#ffffffed 8%,#ffffffe0 45%,#ffffff85 65%,#fff0 85%)}
.beach .pocket-stones:hover .pocket-slot{transform:none}
.beach .shore-arrival{animation:none;background:var(--paper-ground,#f8f8f3);opacity:1;gap:25px;z-index:5}
.beach .shore-arrival .shore-poem,.beach .shore-arrival>span{animation:shore-verse-in-v23 1.4s ease both}
.shore-pending .beach-scroll{opacity:0}
.beach .shore-pending .shore-arrival :is(.shore-poem,span){opacity:0;animation:none}
.shore-pending :is(.beach-heading,.beach-controls,.beach-directions){opacity:0;pointer-events:none}
.beach .is-arriving .shore-arrival{animation:shore-unveil-v23 8.4s linear both}
.beach .is-arriving .shore-arrival :is(.shore-poem,span){animation:shore-verse-v23 8.4s linear both}
.beach .is-arriving .beach-scroll{animation:none;opacity:1;transform:none}
.is-arriving :is(.beach-heading,.beach-controls,.beach-directions){animation:shore-tools-v23 8.4s ease both}
@keyframes shore-verse-in-v23{from{opacity:0}to{opacity:1}}
@keyframes shore-unveil-v23{0%,27%{background-color:var(--paper-ground,#f8f8f3)}57%{background-color:color-mix(in srgb,var(--paper-ground,#f8f8f3) 88%,transparent)}80%{background-color:color-mix(in srgb,var(--paper-ground,#f8f8f3) 34%,transparent)}100%{background-color:transparent}}
@keyframes shore-verse-v23{0%{opacity:0}16%,48%{opacity:1}72%,100%{opacity:0}}
@keyframes shore-tools-v23{0%,76%{opacity:0}100%{opacity:1}}
.shore-flock{position:absolute;inset:0 auto auto 0;width:1672px;height:210px;pointer-events:none;z-index:2}
@media(max-width:700px){.beach .beach-heading{inset:auto 18px max(76px,calc(env(safe-area-inset-bottom) + 60px)) 18px}.beach .beach-heading .pocket-stones{gap:2px 3px;padding:10px 9px}.beach .beach-heading .pocket-slot{width:28px;height:31px;flex-basis:28px}.beach .beach-heading .pocket-slot .stone-object{width:28px;height:31px}.beach-heading .pocket-stones:before{inset:-10px -18px}}
@media(prefers-reduced-motion:reduce){.shore-flock{display:none}.beach .shore-arrival,.beach .shore-arrival *,.is-arriving :is(.beach-scroll,.beach-heading,.beach-controls,.beach-directions){animation:none!important}}
html[data-motion=reduce] .shore-flock{display:none}
html[data-contrast=high] .beach-heading .pocket-stones:before{background:#fff;border-radius:18px}