:root{--paper:#f5f0e8;--ink:#173b3d;--muted:#6d7771;--coral:#e66b52;--yellow:#f1b84b;--line:#d9d2c7;--card:#fbf9f4}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif}.grain{position:fixed;inset:0;opacity:.08;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}.topbar{max-width:1120px;margin:auto;padding:27px 34px;display:flex;justify-content:space-between;align-items:center}.brand{font-weight:900;letter-spacing:.08em;text-decoration:none;color:var(--ink);font-size:18px}.brand-mark{display:inline-grid;place-items:center;background:var(--coral);color:#fff;border-radius:50%;width:28px;height:28px;margin-right:9px;font-size:15px}.top-note{font:12px 'Space Mono',monospace;color:var(--muted)}main{max-width:1120px;margin:22px auto 70px;padding:0 34px}h1,h2,h3{font-family:'Noto Serif SC',serif;margin:0}button{border:0;cursor:pointer;font:inherit}.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center;padding:62px 0 75px}.eyebrow{font:12px 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--coral);margin-bottom:22px}.hero h1{font-size:clamp(40px,6vw,76px);line-height:1.1;letter-spacing:-.06em;max-width:500px}.hero p{color:var(--muted);line-height:1.9;max-width:420px;margin:25px 0}.scribble{font-family:'Noto Serif SC',serif;color:var(--coral);font-size:18px;transform:rotate(-4deg);display:inline-block}.surprise-card{background:#f8f2e8;border:1px solid #cfc3b3;min-height:410px;box-shadow:14px 14px 0 #dfd4c5;position:relative;overflow:hidden}.card-illustration{height:138px;background:linear-gradient(160deg,#244f50,#173b3d 68%,#102f31);position:relative;overflow:hidden}.moon{position:absolute;width:76px;height:76px;border-radius:50%;right:48px;top:22px;background:#f6d889;box-shadow:0 0 0 8px #f6d8891c,0 0 35px #f6d88999}.moon:after{content:'';position:absolute;width:76px;height:76px;border-radius:50%;background:#244f50;left:24px;top:-8px}.hill{position:absolute;bottom:-36px;border-radius:50% 50% 0 0;transform:rotate(-5deg)}.hill-back{width:330px;height:90px;left:-35px;background:#255d58}.hill-front{width:380px;height:80px;right:-50px;background:#153e40}.window-glow{position:absolute;bottom:12px;left:28px;width:29px;height:31px;background:#f4c967;box-shadow:0 0 18px #f4c967aa}.card-content{padding:25px 29px}.card-tag{font:11px 'Space Mono',monospace;color:var(--coral);letter-spacing:.1em}.surprise-card h2{font-size:30px;line-height:1.35;margin:22px 0 10px}.surprise-card .desc{color:var(--muted);line-height:1.8;max-width:450px}.meta{display:flex;gap:24px;border-top:1px solid var(--line);margin-top:19px;padding-top:14px;font:12px 'Space Mono',monospace;color:var(--muted)}.card-orbit{position:absolute;border:1px solid #f7d98b55;border-radius:50%;pointer-events:none}.orbit-one{width:190px;height:50px;right:-35px;top:65px;transform:rotate(-18deg)}.orbit-two{width:150px;height:38px;right:-10px;top:72px;transform:rotate(-18deg)}.card-spark{position:absolute;color:#f7d98b;font-family:serif;z-index:1}.spark-one{right:31px;top:23px;font-size:16px}.spark-two{right:137px;top:50px;font-size:28px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:27px}.btn{padding:13px 18px;border-radius:2px;background:var(--ink);color:white;font-weight:bold}.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--ink)}.btn.accent{background:var(--coral)}.btn.small{padding:9px 12px;font-size:13px}.section{border-top:1px solid var(--line);padding:38px 0}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.section h2{font-size:27px}.section p{color:var(--muted);line-height:1.8}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tile{border:1px solid var(--line);padding:22px;background:rgba(251,249,244,.5);min-height:135px}.tile b{font-family:'Noto Serif SC',serif;font-size:18px}.tile p{font-size:14px;margin:10px 0 0}.detail{max-width:760px;margin:60px auto}.detail h1{font-size:48px;line-height:1.25;margin:17px 0}.detail-box{background:var(--card);padding:34px;margin-top:30px;border:1px solid var(--line);line-height:2;font-family:'Noto Serif SC',serif;font-size:17px}.detail-box strong{color:var(--coral)}.back{color:var(--muted);text-decoration:none;font-size:14px}.share{background:#17484a;color:white;padding:48px 36px 38px;max-width:560px;margin:70px auto;text-align:center;box-shadow:12px 12px 0 #d8cfc3;position:relative;overflow:hidden}.share:before,.share:after{content:'✦';position:absolute;color:#f1b84b66;font-size:80px}.share:before{left:-12px;top:8px}.share:after{right:-18px;bottom:-26px}.share-seal{width:52px;height:52px;display:grid;place-items:center;border:1px solid #f1b84b99;border-radius:50%;margin:0 auto 25px;color:#f1b84b;font-size:22px}.share h1{font-size:38px;line-height:1.35}.share p{color:#d4e1dc;line-height:1.8}.share .dig{background:var(--yellow);color:var(--ink);padding:16px 28px;margin-top:18px;font-weight:bold}.share-copy{display:block;background:transparent;color:#d4e1dc;border:1px solid #d4e1dc66;padding:10px 14px;margin:12px auto 0;font-size:12px}.modal-bg{position:fixed;inset:0;background:#173b3dbb;display:grid;place-items:center;padding:20px;z-index:4}.modal{background:var(--paper);max-width:570px;width:100%;padding:30px;position:relative}.modal h2{font-size:28px;margin-bottom:18px}.close{position:absolute;right:15px;top:12px;background:none;font-size:24px;color:var(--muted)}textarea,input{width:100%;border:1px solid var(--line);background:#fffdf9;padding:13px;font:inherit;margin:8px 0 16px;resize:vertical}.guess-list{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.clue{background:#e7ded0;padding:9px 13px;color:var(--muted);font-size:13px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 17px;z-index:6}footer{border-top:1px solid var(--line);max-width:1120px;margin:auto;padding:25px 34px;display:flex;justify-content:space-between;color:var(--muted);font:11px 'Space Mono',monospace}.season-scene{max-width:1120px;margin:0 auto 55px;padding:0 34px}.scene-sky{height:310px;border:1px solid #cfc3b3;position:relative;overflow:hidden;background:linear-gradient(#d6e5df,#eef0dd 72%);transition:background 1s;background-image:linear-gradient(#d6e5df99,#eef0ddaa 72%),url('assets/hero-comic.png');background-size:cover;background-position:center 56%}.scene-sky:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f5f0e8aa 0%,transparent 33%,transparent 68%,#f5f0e822 100%);z-index:1;pointer-events:none}.scene-sky:after{content:'';position:absolute;inset:auto 0 0;height:52px;background:#d6c7ad66}.scene-label{position:absolute;z-index:5;left:22px;top:18px;font:11px 'Space Mono',monospace;letter-spacing:.08em;color:#57706a;background:#f8f2e8bb;padding:7px 10px;border:1px solid #cfc3b366}.scene-sky.night .scene-label{background:#173b3dbb}.scene-sun{position:absolute;width:55px;height:55px;border-radius:50%;right:72px;top:29px;background:#f3c76e;box-shadow:0 0 28px #f3c76e88}.scene-moon{position:absolute;width:44px;height:44px;border-radius:50%;right:80px;top:30px;background:#f1eee0;box-shadow:0 0 22px #e8e7d488}.tree,.couple{display:none}.trunk{position:absolute;bottom:0;left:61px;width:24px;height:105px;background:#725544;border-radius:10px 10px 3px 3px;transform:rotate(2deg)}.branch{position:absolute;background:#725544;height:13px;border-radius:10px;transform-origin:left}.branch-a{width:74px;left:72px;bottom:78px;transform:rotate(-36deg)}.branch-b{width:69px;left:45px;bottom:92px;transform:rotate(-145deg)}.branch-c{width:60px;left:75px;bottom:58px;transform:rotate(25deg)}.canopy{position:absolute;left:0;top:0;width:145px;height:104px;border-radius:48% 52% 45% 50%;background:#5c9270;box-shadow:30px 22px 0 -8px #6da07a,-24px 31px 0 -13px #4c8469;transition:background .8s}.leaf{position:absolute;z-index:1;width:8px;height:8px;border-radius:50%;background:#f0b75b;animation:fall 4s infinite ease-in-out}.leaf.l1{left:34%;top:45%;animation-delay:-1s}.leaf.l2{left:66%;top:30%;animation-delay:-2.2s}.leaf.l3{left:76%;top:65%;animation-delay:-3s}@keyframes fall{50%{transform:translate(15px,26px) rotate(80deg);opacity:.45}100%{transform:translate(7px,45px);opacity:0}}.couple{position:absolute;z-index:3;bottom:33px;left:48%;width:210px;height:115px}.person{position:absolute;bottom:0;width:65px;height:105px}.person.a{left:22px}.person.b{left:116px}.head{position:absolute;top:3px;left:19px;width:31px;height:31px;border-radius:50%;background:#c98e72}.hair{position:absolute;top:0;left:17px;width:35px;height:18px;border-radius:50% 50% 25% 25%;background:#3a3030}.body{position:absolute;top:32px;left:13px;width:43px;height:55px;background:#e66b52;border-radius:18px 18px 8px 8px}.person.b .body{background:#376b69}.leg{position:absolute;top:82px;width:10px;height:31px;background:#354b55;border-radius:6px}.leg.l{left:21px;transform:rotate(8deg)}.leg.r{left:38px;transform:rotate(-8deg)}.arm{position:absolute;z-index:2;top:43px;width:38px;height:9px;background:#c98e72;border-radius:8px;transform-origin:left}.person.a .arm{left:42px;transform:rotate(24deg)}.person.b .arm{left:-14px;transform:rotate(151deg)}.heart{position:absolute;left:101px;top:39px;color:#e66b52;font-size:22px;animation:pulse 1.8s infinite}.scene-caption{position:absolute;bottom:17px;right:20px;z-index:5;font-family:'Noto Serif SC',serif;color:#49635e;font-size:15px;background:#f8f2e8bb;padding:7px 11px}.scene-sky.night .scene-caption{background:#173b3dbb}@keyframes pulse{50%{transform:scale(1.22)}}.scene-sky.night{background:linear-gradient(#173b3d,#315a58 72%)}.scene-sky.night:after{background:#152f30aa}.scene-sky.night .scene-label,.scene-sky.night .scene-caption{color:#d9e1d5}.scene-sky.night .canopy{background:#315f57;box-shadow:30px 22px 0 -8px #3a7165,-24px 31px 0 -13px #284e4b}.scene-sky.autumn{background:linear-gradient(#e8c7a2,#f1dfc0 72%)}.scene-sky.autumn .canopy{background:#c8784d;box-shadow:30px 22px 0 -8px #df9b4f,-24px 31px 0 -13px #a85d45}.scene-sky.winter{background:linear-gradient(#d8e1e4,#f2efe7 72%)}.scene-sky.winter .canopy{background:#72918e;box-shadow:30px 22px 0 -8px #e5ebea,-24px 31px 0 -13px #63827f}.scene-sky.winter .leaf{background:#fff}.scene-sky.summer{background:linear-gradient(#b8dfdb,#e9e4c7 72%)}.scene-sky.summer .canopy{background:#3f966d;box-shadow:30px 22px 0 -8px #62aa76,-24px 31px 0 -13px #358b68}.season-scene .person.a .body{background:var(--outfit-a,#e66b52)}.season-scene .person.b .body{background:var(--outfit-b,#376b69)}.scene-sky.spring .person.a .body{background:#e98672}.scene-sky.spring .person.b .body{background:#78a895}.scene-sky.summer .person.a .body{background:#f0a44d}.scene-sky.summer .person.b .body{background:#4b8f9b}.scene-sky.autumn .person.a .body{background:#c9664d}.scene-sky.autumn .person.b .body{background:#7b5b4b}.scene-sky.winter .person.a .body{background:#b86675}.scene-sky.winter .person.b .body{background:#526f91}.couple.action-two .person.a .arm{transform:rotate(8deg)}.couple.action-two .person.b .arm{transform:rotate(172deg)}.couple.action-two .heart{top:30px}.couple.action-three .person.a{transform:translateY(4px) rotate(-5deg)}.couple.action-three .person.b{transform:translateY(-2px) rotate(5deg)}.couple.action-three .heart{top:24px}@media(max-width:760px){.topbar{padding:20px}.top-note{display:none}main{padding:0 20px}.hero{display:block;padding:45px 0 55px}.hero h1{font-size:48px}.surprise-card{margin-top:45px;box-shadow:7px 7px 0 #e6ded2}.card-content{padding:22px}.surprise-card h2{font-size:27px}.tiles{grid-template-columns:1fr}.detail{margin:35px auto}.detail h1{font-size:37px}.season-scene{padding:0 20px;margin-top:0}.scene-sky{height:235px;background-position:center 56%}.tree{left:5%;transform:scale(.82);transform-origin:bottom left}.couple{left:39%;transform:scale(.77);transform-origin:bottom center}.scene-caption{font-size:12px;right:12px}footer{padding:20px;display:block;line-height:2}.share{margin:38px auto}.share h1{font-size:30px}}
/* day-cycle details */
.scene-sky.dawn{background:linear-gradient(#e5a77c,#f5d3a1 55%,#edf0d8 72%)}
.scene-sky.sunset{background:linear-gradient(#b8635c,#edaa76 50%,#e9ddbb 72%)}
.scene-sky.dawn .scene-sun{background:#f5c76b;box-shadow:0 0 42px #f5a15ecc;top:112px;right:47%}
.scene-sky.sunset .scene-sun{background:#f29b61;box-shadow:0 0 35px #f29b61cc;top:102px;right:43%}
.scene-sky.night{background:linear-gradient(#101f3b,#244b58 72%)}
.bird-pair{position:absolute;z-index:4;left:50%;top:36px;width:120px;height:62px;border:0;background:transparent;cursor:pointer}
.bird{position:absolute;width:22px;height:13px;border-top:4px solid #294f54;border-radius:50%;transform:rotate(-12deg)}
.bird:after{content:'';position:absolute;left:10px;top:-3px;width:7px;height:7px;border-radius:50%;background:#294f54}
.bird-a{left:13px;top:13px}.bird-b{left:55px;top:29px;transform:rotate(12deg)}
.bird-note{position:absolute;top:49px;left:13px;color:#52706c;font-size:10px;opacity:0;transition:.2s}.bird-pair:hover .bird-note{opacity:1}
.bird-pair.fly-away{animation:flyaway 4.2s ease-in forwards}.bird-pair.fly-away .bird-note{display:none}
@keyframes flyaway{0%{transform:translate(0,0) scale(1);opacity:1}25%{transform:translate(35px,-22px) scale(1.1)}100%{transform:translate(360px,-120px) scale(.55);opacity:0}}
.meteor{position:absolute;z-index:1;width:78px;height:2px;background:linear-gradient(90deg,transparent,#f4d786);transform:rotate(-28deg);opacity:0;animation:shoot 5.5s infinite}
.meteor-a{top:55px;right:27%;animation-delay:1s}.meteor-b{top:92px;right:52%;animation-delay:3.4s;transform:rotate(-35deg) scale(.7)}.meteor-c{top:30px;right:12%;animation-delay:4.5s;transform:rotate(-25deg) scale(.55)}
@keyframes shoot{0%,65%{opacity:0;transform:translate(-20px,-20px) rotate(-28deg)}72%{opacity:1}100%{opacity:0;transform:translate(85px,70px) rotate(-28deg)}}
/* keep the comic plate visible while the live CSS atmosphere changes */
.scene-sky.spring,.scene-sky.summer,.scene-sky.autumn,.scene-sky.dawn,.scene-sky.sunset,.scene-sky.night{background-image:linear-gradient(90deg,#f5f0e822,transparent 38%,#173b3d08),url('assets/hero-comic.png');background-size:cover;background-position:center 56%}
.scene-sky.night{background-image:linear-gradient(#101f3b55,#173b3d55),url('assets/hero-comic.png')}