*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%}
body{font-family:Arial,"Tahoma",sans-serif;background:#071523;color:white;overflow-x:hidden}
.page{min-height:100vh;width:100%;display:none;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:25px}
.page.active{display:flex;animation:pageIn .8s ease}
.water-bg,.final-water{position:absolute;width:100%;height:100%;inset:0;overflow:hidden;pointer-events:none}
.water-bg:before,.final-water:before{content:"";position:absolute;width:160%;height:55%;left:-30%;bottom:-15%;background:rgba(65,151,190,.14);border-radius:50%;animation:wave 7s infinite ease-in-out}
.water-bg:after,.final-water:after{content:"";position:absolute;width:140%;height:45%;left:-20%;bottom:-20%;background:rgba(100,190,220,.08);border-radius:50%;animation:wave 9s infinite ease-in-out reverse}
#welcome{background:radial-gradient(circle at 50% 25%,#214c6c 0%,#0c2336 42%,#071523 100%)}
.welcome-content{width:100%;max-width:460px;text-align:center;z-index:2}
.giyu-wrapper{width:220px;height:190px;margin:0 auto 10px;position:relative;display:flex;align-items:center;justify-content:center}
.giyu-wrapper:before{content:"";position:absolute;width:210px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(82,176,210,.25),transparent 70%);animation:waterGlow 3s infinite ease-in-out}
.giyu-image{width:210px;height:180px;object-fit:cover;object-position:center top;border-radius:24px;position:relative;z-index:2;filter:drop-shadow(0 12px 20px rgba(0,0,0,.35));animation:floating 4s infinite ease-in-out}
.water-symbol{font-size:55px;margin-bottom:12px;animation:floating 4s infinite ease-in-out}
.tiny-text{color:#aebfcb;font-size:14px;margin-bottom:18px}
.welcome-content h1{font-size:42px;margin-bottom:8px}
.welcome-content h2{font-size:25px;line-height:1.7;font-weight:500;margin-bottom:18px}
.intro{color:#c2d0d8;line-height:2;margin-bottom:30px}
button{border:none;cursor:pointer;font-family:inherit;transition:.3s}
.main-button{padding:15px 30px;border-radius:50px;color:white;background:linear-gradient(135deg,#3d8fac,#245d7b);box-shadow:0 8px 25px rgba(20,100,130,.3);font-size:16px}
.main-button:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,100,130,.45)}
#letter{background:linear-gradient(135deg,#dbeaf0,#f1f7f8);color:#263945}
.letter-card{position:relative;z-index:2;width:100%;max-width:500px;text-align:center;padding:30px 25px;background:rgba(255,255,255,.9);border-radius:28px;box-shadow:0 20px 60px rgba(30,70,90,.18)}
.small-water{font-size:50px;margin-bottom:10px;animation:floating 3s infinite ease-in-out}
.letter-card h2{font-size:30px;margin-bottom:25px}
.letter-text p{line-height:2;margin-bottom:17px}.bold{font-weight:bold}.special{color:#28718c;font-weight:bold}
#feelings{background:linear-gradient(180deg,#d9edf3,#f5f9fa);color:#263945}
.feelings-container{width:100%;max-width:480px;text-align:center;z-index:2}
.feelings-container .water-symbol{font-size:48px}.feelings-container h2{font-size:28px;margin-bottom:12px}
.subtitle{color:#71828b;line-height:1.7;margin-bottom:30px}
.feeling-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.feeling-grid button{min-height:120px;padding:15px;border-radius:22px;background:rgba(255,255,255,.9);color:#344b58;box-shadow:0 8px 25px rgba(50,100,120,.1)}
.feeling-grid button:hover{transform:translateY(-5px);background:#fff}.emoji{display:block;font-size:35px;margin-bottom:10px}
#message{background:radial-gradient(circle at center,#214a62,#0a1b2b);text-align:center}
.message-container{width:100%;max-width:460px;z-index:2}.big-emoji{font-size:75px;margin-bottom:20px;animation:floating 3s infinite ease-in-out}
.message-container h2{font-size:30px;margin-bottom:20px}.water-line{width:70px;height:2px;background:#68bdd6;margin:0 auto 25px;border-radius:20px}
.message-container p{color:#d6e2e8;line-height:2;font-size:18px;margin-bottom:30px}
.outline-button{display:block;margin:15px auto 0;padding:13px 24px;border-radius:50px;color:white;background:transparent;border:1px solid rgba(255,255,255,.35)}
#final{background:radial-gradient(circle at 50% 15%,#1d405b,#081523 65%);text-align:center}
.final-container{width:100%;max-width:500px;z-index:2}.moon{font-size:65px;margin-bottom:10px;animation:floating 4s infinite ease-in-out}
.final-container h1{font-size:29px;line-height:1.5;margin-bottom:25px}.final-card{padding:27px 22px;border-radius:25px;background:rgba(255,255,255,.07);border:1px solid rgba(150,210,230,.15);backdrop-filter:blur(5px)}
.final-card p{color:#d6e3e9;line-height:2;margin-bottom:18px}.final-card .special{color:white;font-size:18px}
.ending{color:#b8cad3;line-height:2;margin-top:25px}.from{margin-top:20px;color:#80bfd2;font-size:14px}
@keyframes pageIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes floating{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wave{0%,100%{transform:translateX(-2%) rotate(0deg)}50%{transform:translateX(2%) rotate(3deg)}}
@keyframes waterGlow{0%,100%{transform:scale(.95);opacity:.6}50%{transform:scale(1.08);opacity:1}}
@media(max-width:420px){.page{padding:18px}.giyu-wrapper{width:190px;height:165px}.giyu-image{width:185px;height:160px}.welcome-content h1{font-size:36px}.welcome-content h2{font-size:21px}.letter-card{padding:25px 20px}.letter-text p{font-size:14px}.feeling-grid{gap:10px}.feeling-grid button{min-height:110px}.final-card{padding:22px 18px}}