:root{--d1:#5ec8f2;--d2:#4aa8e8;--d3:#3a86d8;--d4:#2d66c0;--s1:#ffb36b;--s2:#ff8a5c;--s3:#d9588a;--s4:#6a4a9e;--sh:clamp(110px, 24vmin, 240px);--sw:calc(var(--sh) * 2 / 3);--sun:clamp(56px, 11vmin, 120px);--cafe:clamp(84px, 18vmin, 190px)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:#111;font-family:Courier New,monospace}#stage{width:100%;height:100dvh;image-rendering:pixelated;position:relative;overflow:hidden}.sky{position:absolute;inset:0 0 40%}.sky.day{background:linear-gradient(to bottom, var(--d4) 0 25%, var(--d3) 25% 50%, var(--d2) 50% 75%, var(--d1) 75% 100%)}.sky.dusk{background:linear-gradient(to bottom, var(--s4) 0 25%, var(--s3) 25% 50%, var(--s2) 50% 75%, var(--s1) 75% 100%);opacity:0;transition:opacity 2.4s steps(8,end)}#stage.sunset .sky.dusk{opacity:1}#sun{width:var(--sun);height:var(--sun);top:8%;right:12%}#stage.sunset #sun{background:#ff7a4a;top:40%;box-shadow:0 0 0 8px #ffb36b}@keyframes pulse{50%{box-shadow:0 0 0 12px #fff2a0b3}}.cloud{background:#fff;width:8em;height:2.5em;font-size:clamp(8px,1.6vmin,20px);animation:40s linear infinite drift;position:absolute;box-shadow:2em -1.25em #fff,4em 0 #fff,0 .75em #d6e8f7}.c1{top:12%;left:-80px}.c2{animation-duration:60s;animation-delay:-25s;top:24%;left:-80px;transform:scale(.7)}@keyframes drift{to{left:110%}}.hills{background:linear-gradient(#3f8a58,#3f8a58) bottom/100% 40% no-repeat,radial-gradient(22% 100% at 20% 100%,#5aa86a 0 98%,#0000 100%),radial-gradient(28% 100% at 65% 100%,#5aa86a 0 98%,#0000 100%);height:clamp(70px,16vmin,170px);position:absolute;bottom:40%;left:0;right:0}.ground{background:linear-gradient(#7ccf5a 0 22%,#c99a62 22% 100%);height:40%;position:absolute;bottom:0;left:0;right:0}.ground:before{content:"";background:#6a4a9e00;transition:background 2.4s;position:absolute;inset:0}#stage.sunset .ground:before{background:#6a4a9e40}#cafe{width:var(--cafe);height:var(--cafe);opacity:0;background:#c06a3a;border:4px solid #000;transition:opacity 1.5s steps(6,end);position:absolute;bottom:40%;right:6%}#cafe:before{content:"CAFE ☕";white-space:nowrap;color:#000;background:#fff;border:3px solid #000;padding:1px 5px;font-size:clamp(12px,2vmin,18px);font-weight:700;position:absolute;top:-1.9em;left:50%;transform:translate(-50%)}#cafe:after{content:"";background:#3a2a1a;border:3px solid #000;border-bottom:0;width:24%;height:42%;position:absolute;bottom:0;left:34%}#stage.sunset #cafe{opacity:1}.actor{width:var(--sw);height:var(--sh);transition:left 2.2s steps(14,end);position:absolute;bottom:calc(40% - 6px)}#him{left:calc(var(--sw) * -1.5)}#her{left:110%}#him.in{left:calc(50% - var(--sw) * 1.6)}#her.in{left:calc(50% + var(--sw) * .6)}#him.toCafe{left:calc(94% - var(--cafe) - var(--sw) * 2.3)}#her.toCafe{left:calc(94% - var(--cafe) - var(--sw) * 1.1)}.body{width:100%;height:100%;image-rendering:pixelated;background:bottom/contain no-repeat}#him .body{background-image:url(/assets/him.png)}#her .body{background-image:url(/assets/her.png)}.walking .body{animation:.4s steps(2,end) infinite bob}@keyframes bob{50%{transform:translateY(-4px)}}.body[data-mood=happy],.body[data-mood=excited],.body[data-mood=love]{animation:.5s steps(3,end) 2 hop}.body[data-mood=nervous],.body[data-mood=angry]{animation:.15s steps(2,end) 8 shake}.body[data-mood=shy]{animation:1s steps(4,end) 2 sway}@keyframes hop{50%{transform:translateY(-14px)}}@keyframes shake{50%{transform:translate(4px)}}@keyframes sway{50%{transform:rotate(6deg)}}#her.joy .body{animation:.6s steps(3,end) infinite hop}.fx{font-size:clamp(22px,4vmin,38px);top:-1.2em}.conf{font-size:clamp(20px,3vmin,34px)}@keyframes fall{to{transform:translateY(900px)rotate(360deg)}}.fade{animation:2.2s forwards fadeout}@keyframes fadeout{70%{opacity:1}to{opacity:0}}#ui{padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));justify-content:center;display:flex;position:absolute;bottom:0;left:0;right:0}#box{color:#222;background:#fff8e7;border:4px solid #000;width:100%;max-width:760px;min-height:84px;padding:12px;font-size:clamp(16px,2.2vmin,22px);line-height:1.4;box-shadow:4px 4px #0006}#opts button{font-size:clamp(15px,2vmin,20px)}.more{float:right;animation:1s steps(2,end) infinite blink}@media (width>=700px){#opts{flex-direction:row}#opts button{flex:1}}#name{color:#fff;background:#000;margin-bottom:6px;padding:2px 6px;font-size:11px;font-weight:700;display:inline-block}#opts{flex-direction:column;gap:8px;margin-top:10px;display:flex}#opts button{font:inherit;color:#222;cursor:pointer;background:#ffd84a;border:4px solid #000;padding:12px;font-size:15px;box-shadow:3px 3px #000}#opts button:active{box-shadow:none;transform:translate(3px,3px)}#confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}.conf{font-size:20px;animation:linear forwards fall;position:absolute;top:-20px}.flower{font-size:26px}.book-wrap{z-index:8;background:#0000008c;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.book{color:#2b1d0e;background:#e9d8a6;border:6px solid #4a2f17;flex-direction:column;gap:12px;width:100%;max-width:360px;padding:18px;display:flex;box-shadow:inset 0 0 0 4px #c9b27c,6px 6px #00000080}.book-title{text-align:right;font-size:12px}.book{max-width:min(560px,92vw)}.book-text{font-size:clamp(16px,2.2vmin,22px)}.book-text:after{content:"_";animation:1s steps(2,end) infinite blink}@keyframes blink{50%{opacity:0}}.book-nav{justify-content:space-between;display:flex}.book-nav button{font:inherit;cursor:pointer;color:#fff;background:#7a4b22;border:3px solid #000;padding:8px 14px;box-shadow:2px 2px #000}.book-nav button:disabled{opacity:.35;cursor:default}#ending{z-index:9;color:#fff;text-align:center;background:#1b1035;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;animation:1.2s steps(6,end) fadein;display:flex;position:absolute;inset:0}#ending .big{font-size:56px}#ending h1{color:#ffd84a;text-shadow:3px 3px #d9588a;font-size:28px}#ending p{font-size:16px;line-height:1.5}#ending button{font:inherit;cursor:pointer;color:#222;background:#ffd84a;border:4px solid #000;padding:12px 20px;font-size:16px;box-shadow:3px 3px #000}@keyframes fadein{0%{opacity:0}}#start{z-index:9;color:#fff;background:#2d66c0;flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:18px;display:flex;position:absolute;inset:0}#start button{font:inherit;cursor:pointer;background:#ffd84a;border:4px solid #000;padding:14px 22px;font-size:18px;box-shadow:4px 4px #000}@media (height<=520px){:root{--sh:84px}#box{min-height:0;padding:8px}.book-text{min-height:120px;max-height:45vh}}