*{box-sizing:border-box}body{margin:0;background:#f6f4eb;color:#263e36;font:17px/1.5 'Avenir Next',system-ui,sans-serif}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c5ccc0;padding:18px 6vw;color:#506454;font-size:14px}.brand{font:26px Georgia,serif;color:#244638}main{max-width:880px;margin:5vh auto;padding:0 22px 44px}.scene{border-radius:18px;overflow:hidden;background:#adc4b8}.scene > svg,canvas{display:block;width:100%;height:auto}.introcopy{text-align:center}.label{font-size:11px;font-weight:700;letter-spacing:.18em;margin:26px 0 8px}h1{font:normal clamp(42px,7vw,74px)/1.08 Georgia,serif;letter-spacing:-.045em;margin:8px 0 20px}button{font:inherit;border:0;background:#254c3d;color:white;border-radius:32px;padding:12px 21px;cursor:pointer}button b{margin-left:15px}.plain{background:transparent;color:#354e40;text-decoration:underline}.paper{background:#fffdf6;border:1px solid #c9cebd;border-radius:14px;overflow:hidden;margin:22px 0}.tools{border-top:1px solid #dde0d4;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:14px}textarea{width:100%;min-height:112px;border:0;padding:22px;font:21px Georgia,serif;background:transparent;color:inherit;resize:vertical}#pad{touch-action:none;cursor:crosshair;background-image:radial-gradient(#c7cdbc 1px,transparent 1px);background-size:16px 16px}.hint{font-size:14px}.received{padding:26px;font:26px/1.45 Georgia,serif;white-space:pre-wrap;overflow-wrap:anywhere}[hidden]{display:none!important}#ring{opacity:0}
.scene{background:#f6f4eb}


#rain path{opacity:.15}
.playing #rain path{animation:rain var(--drift) linear infinite}
.playing #ring{animation:ripple 3.5s 8s ease-out forwards;transform-origin:373px 299px}
.playing #land{animation:story 14s ease-in-out forwards;transform-origin:373px 280px}
.playing .introcopy{animation:soften 14s forwards}
#editor:not([hidden]){animation:arrive 1.1s ease-out}
@keyframes arrive{from{opacity:0}to{opacity:1}}
@keyframes walk{to{transform:translateX(0)}}
@keyframes step{to{transform:translateY(-1.8px) rotate(1deg)}}
@keyframes look{to{transform:rotate(5deg)}}
@keyframes rain{0%,100%{opacity:0}22%,72%{opacity:.24}100%{transform:translate(-9px,32px)}}
@keyframes ripple{from{opacity:.9;transform:scale(.08)}to{opacity:0;transform:scale(1.9)}}
@keyframes story{0%{transform:scale(1)}45%{transform:scale(1.04)}70%{transform:scale(1.22);opacity:1}100%{transform:scale(1.55);opacity:0}}
@keyframes soften{0%,82%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.playing *{animation:none!important}#editor:not([hidden]){animation:none}}

main{width:min(100%,1440px);max-width:none;margin:0 auto;padding:0 clamp(16px,4vw,66px) 36px}
header{padding:7px 4vw}#screen{position:relative;z-index:6;font-size:14px}
#intro{position:relative;margin-top:16px}
.scene{position:relative;height:clamp(290px,63svh,780px)}
.scene > svg,.closeup{width:100%;height:100%;display:block}
.closeup{position:absolute;inset:0;object-fit:cover;object-position:50% 62%;opacity:0}
#editor,#result{max-width:1180px;margin:auto;padding-top:12px}
#editor:focus{outline:none}
#pad{max-height:34svh}
body:has(.playing){overflow:hidden}
#intro.playing{position:fixed;inset:0;margin:0;z-index:3}
.playing .scene{height:100%;border-radius:0}
.playing .introcopy{position:absolute;bottom:15px;right:16px;animation:none}
.playing .introcopy>*:not(#skip){display:none}
.playing #skip,body:has(.playing) #screen{background:#f6f4ebe6}
body:has(.playing) #screen{position:fixed;right:16px;top:12px}
.playing #land{animation:none}
.playing .closeup{animation:notice 4.7s 4.8s ease-in-out forwards}
.drop,.wave{position:absolute;top:50%;left:50%;pointer-events:none;opacity:0}
.drop{width:13px;height:22px;background:#819da6;border:2px solid #f3edda;border-radius:75% 35% 70% 55%;margin:-22px 0 0 -6px;box-shadow:inset 3px -3px 3px #52717e}
.playing .drop{animation:fall .85s 10.55s ease-in forwards}
.wave{width:2vmax;height:2vmax;border:1px solid #eee7cd;border-radius:50%;box-shadow:0 0 0 .23vmax #9cafb477,inset 0 0 0 .1vmax #ebe6ce}
.playing .wave{animation:spread 4.5s 11.4s ease-out forwards}
.revealing #question{position:fixed;inset:0;z-index:4;max-width:none;overflow:auto;padding:clamp(28px,5vw,84px);background:#f6f4eb;animation:reveal 4.5s ease-out both}
.revealing #skip,body:has(#intro.playing) #open-editor{visibility:hidden}
.immersive main{width:100%;max-width:none;padding-inline:12px}
.immersive .scene{height:73svh}
.immersive .playing .scene{height:100%}
@keyframes notice{0%{opacity:0;transform:scale(1)}18%{opacity:1}100%{opacity:1;transform:scale(1.045)}}
@keyframes fall{0%{opacity:0;transform:translateY(calc(-50dvh - 28px))}24%{opacity:1}98%{opacity:1}100%{opacity:0;transform:translateY(0)}}
@keyframes spread{0%{opacity:.85;transform:translate(-50%,-50%) scale(1)}100%{opacity:.18;transform:translate(-50%,-50%) scale(80)}}
@keyframes reveal{from{clip-path:circle(0 at 50% 50%)}to{clip-path:circle(75vmax at 50% 50%)}}
@media(max-aspect-ratio:3/4){.scene{height:58svh}.scene > svg{transform:translateX(0)}.closeup{object-position:49% center}#pad{height:auto}.introcopy h1{margin-bottom:12px}.introcopy .label{margin-top:16px}}
@keyframes walkPortrait{from{transform:translateX(-36px)}to{transform:translateX(34px)}}
#screen{position:fixed;right:12px;top:8px;background:#f6f4ebed;padding:6px 12px;font-size:13px}
#editor,#result{padding-top:46px}
.tools{gap:10px 22px;flex-wrap:wrap;padding:8px 16px}.tools label{display:flex;align-items:center;gap:8px}.tools select{font:inherit;color:inherit;background:#fffdf6;padding:5px;border:1px solid #c9cebd;border-radius:6px}.tools input{width:100px;accent-color:#365947}.tools output{min-width:2ch;font-variant-numeric:tabular-nums}.tools #undo{margin-left:auto;padding:7px}

.water{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}.playing .water{animation:arrive 1s 8s ease-in-out forwards}




#question{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px}
#question h1{font-size:clamp(52px,8vw,116px);max-width:14ch;margin:0;text-wrap:balance;outline:none}
#open-editor{font-size:clamp(15px,2vw,19px)}
body:has(#editor:not([hidden])) #screen{display:none}
body:has(#question:not([hidden])) main{padding-bottom:0}
#editor{position:fixed;inset:0;z-index:5;max-width:none;padding:0;background:#fffdf6;display:flex;flex-direction:column;height:100dvh;overflow:auto}
#editor .paper{margin:0;flex:1 0 auto;display:flex;flex-direction:column;border:0;border-radius:0}
#words{flex:1 0 22vh;min-height:110px;padding:clamp(22px,4vw,56px);resize:none;font-size:clamp(21px,2vw,30px)}
#pad{align-self:center;width:min(100%,145vh);max-height:none}
#editor .tools{justify-content:center;background:#fffdf6}
#editor .tools #undo{margin-left:0}
#share{align-self:center;margin:8px 0 max(14px,env(safe-area-inset-bottom))}
#status{margin:0;text-align:center}
#status:not(:empty){padding:0 12px 12px}
#waiting.pond-end,#result.pond-end,#thanks.pond-end{position:fixed;inset:0;z-index:7;display:grid;align-items:center;justify-items:center;max-width:none;margin:0;padding:clamp(18px,5vw,64px);overflow:auto;background:#b5c4b9 url('/pond.jpg') center/cover no-repeat}
#received,.thanks-card{width:min(100%,660px);padding:clamp(22px,4vw,52px);background:rgba(255,253,246,.93);border-radius:16px;color:#263e36}
#received{animation:pond-fade var(--fade-duration,15s) linear forwards;overflow-wrap:anywhere;white-space:pre-wrap;outline:none}
#note{font:clamp(22px,3vw,34px)/1.45 Georgia,serif;margin:0}#art{margin-top:12px}
@keyframes pond-fade{0%,12%{opacity:1}100%{opacity:0}}
.thanks-card{text-align:center}.thanks-card h1{outline:none}.thanks-card form{margin-top:32px}.thanks-card label{display:block;margin-bottom:10px}.thanks-card form div{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.thanks-card input{min-width:0;max-width:100%;font:inherit;padding:10px 14px;border:1px solid #aab6a8;border-radius:9px}
#result.pond-end{padding:8px;background-image:url('/pond-surface.jpg')}
#received{width:100%;padding:0;background:transparent;text-align:center}
#note{width:min(100%,62ch);margin:auto;font-size:var(--text-size,clamp(21px,2vw,30px));text-shadow:0 1px 4px #f5f2e5,0 0 12px #f5f2e5}
#art{width:min(100%,var(--drawing-width,1000px));height:auto;margin:12px auto 0}

#time-left{position:fixed;inset:0 0 auto;width:100%;height:5px;border:0;appearance:none;background:#cce4ec;accent-color:#355965}
#time-left::-webkit-progress-bar{background:#cce4ec}
#time-left::-webkit-progress-value{background:#355965}
#time-left::-moz-progress-bar{background:#355965}