:root{--paper:#f6f3e9;--ink:#283e3b;--mint:#337d70;--light:#d9e9de;--orange:#e49557;--line:#ccd0c1;--serif:'STKaiti','Kaiti SC','KaiTi','Songti SC',serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft Yahei',sans-serif;font-size:14px;background-image:radial-gradient(#80928115 .7px,transparent .7px);background-size:5px 5px}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #d7843c;outline-offset:5px}button{border:0;background:none}button:disabled{opacity:.5;cursor:not-allowed}button,a{transition:background .2s,transform .2s}button:hover,.button:hover{transform:translateY(-2px)}[hidden]{display:none!important}.header{height:105px;margin:auto;max-width:1320px;padding:0 56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-size:21px;font-weight:750;letter-spacing:2px}.brand-mark{height:40px;width:40px;border:1.5px solid var(--mint);color:var(--mint);display:grid;place-items:center;border-radius:50% 45% 50% 40%;font:italic 23px Georgia}.brand small{display:block;font-size:8px;letter-spacing:2px;margin-top:5px;font-weight:500}.header nav{display:flex;gap:38px;font-size:14px}.header nav a{padding:10px 0}.header nav a:hover{color:var(--mint)}.header nav a.active:after{content:'';display:block;height:4px;background:#7eaa92;border-radius:50%;transform:rotate(-3deg);margin-top:6px}.date-tag{font-size:10px;letter-spacing:1.5px}.date-tag span{color:var(--orange);margin:0 8px}.hero{max-width:1208px;margin:0 auto;min-height:675px;padding:67px 20px 62px;display:grid;grid-template-columns:1.06fr 1fr;align-items:center;gap:65px}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:600}.tiny-star{color:var(--orange);font-size:23px;vertical-align:middle;margin-right:10px}.hand-note{font-family:var(--serif);font-size:20px;margin-top:30px;color:#857861;transform:rotate(-3deg);width:max-content}.hand-note span{font-size:40px;position:absolute;right:-55px;top:0}.hero h1{font-size:clamp(36px,4.4vw,59px);line-height:1.5;letter-spacing:-1px;margin:15px 0 17px;font-family:var(--serif);font-weight:700;position:relative;white-space:nowrap}.mint-word{color:var(--mint);position:relative}.mint-word:after{content:'';height:9px;background:#91b99a66;bottom:0;left:1%;width:99%;position:absolute;border-radius:50%;transform:rotate(-2deg)}.spark{font-size:45px;color:var(--orange);position:absolute;right:-18px;top:40px}.hero-description{font-size:15px;line-height:2.2;color:#6d766a}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:26px}.button{display:inline-flex;align-items:center;justify-content:center;padding:16px 23px;gap:26px;border-radius:5px;font-size:14px;font-weight:600}.primary{background:var(--mint);color:#fffdf5;box-shadow:3px 3px 0 #245e5124}.primary:hover{background:#266759}.wish-link{font-size:13px;padding:8px 0;border-bottom:1px dashed #8b9f88}.postscript{font-size:11px;color:#8b8b79;margin-top:27px;letter-spacing:.4px}.postscript span{font-size:20px;margin-right:6px;color:#b2856f}.hero-art{position:relative;margin:10px 6px 0 0}.witch-photo{padding:15px 15px 0;margin:0;background:#fffdf6;box-shadow:2px 7px 19px #293e3b16;border:1px solid #dddccc;transform:rotate(4deg);position:relative}.witch-photo img{width:100%;display:block;aspect-ratio:1;object-fit:contain}.witch-photo figcaption{display:flex;justify-content:space-between;gap:10px;padding:20px 2px;font-family:var(--serif);font-size:18px}.witch-photo figcaption span:last-child{font-size:10px;align-self:center;font-family:monospace;letter-spacing:1px}.photo-tape{position:absolute;width:128px;height:38px;background:#d6dcc2b3;top:-15px;left:39%;transform:rotate(-9deg);z-index:2;clip-path:polygon(2% 0,100% 3%,96% 100%,0 96%)}.stamp{position:absolute;right:-32px;top:-29px;z-index:3;width:98px;height:98px;border:2px dashed #b27b59;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(15deg);font-size:10px;line-height:1.6;letter-spacing:1px;color:#a86c4e;background:#f6f3e9d9}.stamp b{font-size:18px}.art-note{position:absolute;bottom:8px;left:-45px;z-index:3;background:#f3dfad;padding:17px 25px;font-family:var(--serif);font-size:19px;line-height:1.6;transform:rotate(-7deg);box-shadow:2px 4px 0 #0000000c}.doodle-star{position:absolute;bottom:-20px;right:-34px;font-size:70px;color:var(--mint);transform:rotate(15deg)}.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-evenly;gap:25px;padding:17px 24px;font-size:11px;letter-spacing:1.5px;color:#6c776a;white-space:nowrap;overflow:hidden;background:#e8eddf7a}.ticker i{color:#bd9969}.section{max-width:1168px;margin:auto;padding:76px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:34px}.section-index{font:10px monospace;letter-spacing:2px;color:#848d7a}.section-heading h2{font-family:var(--serif);font-size:32px;margin:12px 0 0}.section-heading h2 span{color:#b79362;font-size:26px;margin-left:15px}.section-heading>p{font-size:12px;color:#828677;margin-bottom:3px}.letter-layout{display:grid;grid-template-columns:270px 1fr;gap:30px}.stamp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.blessing-tab{border:1px dashed #bcc6b7;background:#f0f1e6;min-height:112px;border-radius:3px;padding:12px 6px;color:#768474}.blessing-tab .stamp-icon{display:block;font-size:27px;font-family:var(--serif);margin-bottom:10px}.blessing-tab span:last-child{font-size:12px}.blessing-tab.active{background:#dbe8dc;color:#2e7466;border:1.5px solid #6e9d7b;box-shadow:3px 3px 0 #dce0ce;transform:rotate(-2deg)}.letter-paper{padding:25px 30px 15px;background:#fffdf6;border:1px solid #dedfcf;box-shadow:4px 5px 0 #e6e7db;position:relative}.paper-top,.paper-bottom{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#959381}.paper-top{border-bottom:1px solid #e5e4d7;padding-bottom:17px}.paper-top span:last-child{font-size:11px;letter-spacing:2px}.letter-body{display:grid;grid-template-columns:1fr 150px;gap:20px;align-items:center;padding:27px 0}.letter-kicker{font-size:10px;color:#a1845c;letter-spacing:1.5px}.letter-body h3{font-size:26px;font-family:var(--serif);margin:12px 0 16px}.letter-body p{font-family:var(--serif);font-size:19px;line-height:1.9;margin:0;min-height:108px}.letter-body img{width:100%;border:7px solid white;transform:rotate(6deg);box-shadow:1px 2px 7px #0000000d}.signature{font-family:var(--serif);font-size:15px;line-height:1.8;margin-top:19px;color:#8b8976}.signature span{display:block;text-align:right}.paper-bottom{border-top:1px solid #e5e4d7;padding-top:12px}.paper-bottom span:last-child{font-size:17px;color:#bc947f}.music-section{border-top:1px solid var(--line)}.music-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;align-items:center}.record-sleeve{position:relative;min-height:390px;background:#dfded0;border:1px solid #c9c9b7;display:grid;place-items:center;padding:28px;background-image:repeating-linear-gradient(0deg,transparent,transparent 4px,#97a68e0c 4px,#97a68e0c 5px)}.vinyl{height:290px;width:290px;max-width:100%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#233b36 0 2px,#314941 3px 4px);display:grid;place-items:center;box-shadow:8px 12px 20px #28433726;border:8px solid #253d36}.vinyl img{width:125px;height:125px;border-radius:50%;border:7px solid #a2bba2}.vinyl.playing{animation:spin 15s linear infinite}.record-label{position:absolute;left:18px;bottom:16px;font:10px monospace;letter-spacing:2px;line-height:1.8}.record-label b{font-size:9px;font-weight:400}.record-star{position:absolute;right:20px;top:12px;font-size:50px;color:#a68357}.song-label{display:flex;justify-content:space-between;letter-spacing:2px;font-size:10px;color:#85957e}.song-label span{color:#ae9f88}.player h3{font-family:var(--serif);font-size:31px;margin:19px 0 9px}.song-original{font-size:12px;color:#7f8877;letter-spacing:1px;margin:0}.song-artist{font-size:12px;margin-top:14px;color:#89907d}.wave{display:flex;align-items:center;gap:3px;height:53px;margin-top:23px}.wave i{flex:1;background:#78a48e;opacity:.6;min-width:2px;border-radius:3px}.player-hint{font-family:var(--serif);font-size:16px;color:#818674;margin-bottom:24px}.player-buttons{display:flex;gap:26px;align-items:center}.text-link{font-size:12px;border-bottom:1px solid #b7bda9;padding:6px 0}.local-audio{border-top:1px solid var(--line);margin-top:24px;padding-top:17px;font-size:11px;color:#7e8975}.local-audio summary{cursor:pointer}.local-audio p{line-height:1.8}.local-audio audio{width:100%;margin-top:12px}.file-button{display:inline-block;background:#e1e8d8;padding:9px 14px;cursor:pointer;border-radius:4px}.file-button input{width:1px;height:1px;opacity:0;position:absolute}.file-button:focus-within{outline:2px solid var(--mint)}.mv-host{margin-top:20px}.mv-host iframe{width:100%;aspect-ratio:16/10;border:0;border-radius:5px;background:#152d29}.embed-note{font-size:11px;line-height:1.6;color:#7a8874}.study-section{padding-top:30px}.study-room{position:relative;overflow:hidden;min-height:580px;background:#598b83;border-radius:9px;color:#fffdf4;display:flex;flex-direction:column}.room-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 43%}.room-shade{position:absolute;inset:0;background:linear-gradient(90deg,#133e4b91,#164c5060 60%,#195c443d)}.room-top,.room-bottom{position:relative;display:flex;align-items:center;justify-content:space-between;padding:25px 30px;letter-spacing:1px;font-size:12px}.room-bottom{margin-top:auto;font-size:10px;opacity:.8}.glass-button{padding:10px 15px;border:1px solid #ffffff70;border-radius:5px;background:#ffffff0c;color:inherit}.timer-content{position:relative;text-align:center;margin:12px auto 18px;z-index:1}.timer-tabs{display:inline-flex;padding:5px;background:#22434366;border:1px solid #ffffff40;border-radius:7px;gap:6px}.timer-tabs button{padding:9px 22px;color:#fffdf4;font-size:12px;border-radius:4px}.timer-tabs button.active{background:#e2f4df;color:#345e51}.timer-value{font-family:Georgia,'Times New Roman',serif;font-size:104px;line-height:1.15;margin:20px 0 8px;font-variant-numeric:tabular-nums;letter-spacing:3px}.timer-content>p{font-size:13px;letter-spacing:1px;opacity:.9}.timer-actions{display:flex;justify-content:center;gap:12px;margin-top:22px}.timer-start{padding:14px 35px;border-radius:5px;background:#fffced;color:#325f51;font-weight:600}.timer-settings{margin-top:20px;font-size:11px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.timer-settings select,.timer-settings input{padding:7px;background:#204d4bd1;color:#fff;border:1px solid #ffffff66;border-radius:4px;font-size:11px}.timer-settings input{width:57px}.timer-settings button{color:white;border:1px solid white;padding:6px}.study-stats{display:flex;gap:28px;justify-content:center;font-size:11px;margin-top:24px;opacity:.8}.study-stats b{font-size:15px;font-weight:500}.study-note{font-size:11px;color:#86917d;text-align:center;margin-top:17px}.study-room.immersive{position:fixed;inset:0;z-index:30;border-radius:0;min-height:100dvh;justify-content:space-between}.immersive .timer-content{margin:auto}.immersive .timer-value{font-size:clamp(90px,15vw,170px)}body.focus-on{overflow:hidden}.closing{text-align:center;padding:20px 20px 82px}.closing>span{font-size:45px;color:#b39163}.closing p{font:25px/1.9 var(--serif)}.closing em{font-style:normal;color:var(--mint)}.closing .wish-link{color:#8a8c77;font-size:12px}.closing small{display:block;margin-top:28px;font:9px monospace;letter-spacing:3px;color:#999b87}footer{border-top:1px solid var(--line);max-width:1208px;margin:auto;padding:24px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8a917c;font-size:11px}.footer-brand{font-size:14px;font-weight:500}.footer-brand .brand-mark{width:29px;height:29px;font-size:17px}dialog{border:1px solid #ced4bf;border-radius:8px;padding:42px;max-width:520px;width:calc(100% - 32px);color:var(--ink);background:var(--paper);box-shadow:12px 18px 0 #1a3a3420}dialog::backdrop{background:#172f2ab5;backdrop-filter:blur(4px)}dialog h2{font:27px var(--serif)}dialog p{font-size:14px;line-height:1.9;color:#6d7d6c}dialog a{text-decoration:underline;color:var(--mint)}.dialog-close{position:absolute;right:12px;top:7px;font-size:28px}.modal-star{font-size:50px;color:#b59160}dialog label{font-size:12px}textarea{display:block;width:100%;margin:10px 0 20px;min-height:100px;padding:14px;resize:vertical;border:1px solid #c7cfb9;background:#fffef6;border-radius:4px;color:var(--ink)}dialog .small-note{font-size:11px}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:80;background:#2c6758;color:#fff;padding:15px 25px;border-radius:8px;max-width:90%;width:max-content;transition:.3s;font-size:13px}.toast.visible{opacity:1;transform:translate(-50%,0)}#meteor-layer{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}.meteor{position:absolute;top:-40px;left:var(--x);font-size:30px;color:#d8ad6a;animation:fall 1.7s ease-in forwards;animation-delay:var(--delay)}@keyframes fall{to{transform:translate(-35vw,110vh) rotate(140deg);opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1450px){.hero{min-height:730px}}@media(max-width:1240px){.section{margin:0 5%;}.hero{margin:0 5%;gap:45px}.header{padding:0 5%}.hero h1{font-size:46px}.hero-art{margin-right:20px}.hero-actions{gap:16px}.hero-actions .button{padding:15px 20px}.date-tag{font-size:9px}}@media(max-width:900px){.date-tag{display:none}.hero{gap:35px;padding:60px 0;min-height:590px}.hero h1{font-size:36px}.spark{display:none}.hand-note{font-size:17px}.hero-actions{flex-wrap:wrap;gap:15px}.hero-description{font-size:13px}.witch-photo figcaption{font-size:14px;padding:18px 0}.witch-photo figcaption span:last-child{display:none}.art-note{font-size:16px;left:-15px;bottom:-25px}.stamp{width:77px;height:77px;right:-25px;font-size:8px}.section-heading{display:block}.section-heading>p{margin-top:13px}.letter-layout{grid-template-columns:190px 1fr;gap:20px}.letter-paper{padding:23px}.letter-body{grid-template-columns:1fr}.letter-body img{display:none}.letter-body h3{font-size:23px}.letter-body p{font-size:18px}.music-layout{gap:30px;grid-template-columns:.85fr 1fr}.vinyl{width:235px;height:235px}.record-sleeve{min-height:340px}.player h3{font-size:26px}.player-buttons{gap:15px}.player-buttons .button{padding:14px 18px}}@media(max-width:620px){html{scroll-padding-top:20px}.header{height:85px;padding:0 6%;gap:16px}.brand{font-size:17px;gap:8px;letter-spacing:1px}.brand-mark{width:32px;height:32px;font-size:19px}.brand small{font-size:6px;letter-spacing:1px}.header nav{gap:16px;font-size:11px}.header nav a{white-space:nowrap}.hero{display:flex;flex-direction:column;gap:38px;margin:0;padding:35px 7% 57px;align-items:stretch}.eyebrow{font-size:8px;letter-spacing:2px}.hand-note{margin-top:18px}.hero h1{font-size:40px;line-height:1.45;margin:15px 0}.hero-description{font-size:14px;line-height:2}.hero-actions{gap:22px}.postscript{font-size:10px;margin-top:22px}.hero-art{width:83%;align-self:center;margin:0 0 5px}.witch-photo{padding:10px 10px 0}.witch-photo figcaption{font-size:16px}.witch-photo figcaption span:last-child{display:block;font-size:8px}.photo-tape{height:30px;width:100px;top:-11px}.stamp{right:-22px;top:-15px}.art-note{font-size:17px;left:-26px;bottom:-17px;padding:12px 18px}.doodle-star{font-size:45px;right:-25px}.ticker{justify-content:flex-start;gap:25px;font-size:10px;padding:14px 20px}.section{margin:0;padding:48px 6%}.section-heading{margin-bottom:26px}.section-heading h2{font-size:27px;line-height:1.4}.section-heading h2 span{font-size:22px;margin-left:10px}.section-heading>p{font-size:11px}.section-index{font-size:9px}.letter-layout{display:block}.stamp-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}.blessing-tab{min-height:87px;padding:10px 5px}.blessing-tab .stamp-icon{font-size:23px;margin-bottom:6px}.blessing-tab span:last-child{font-size:11px}.letter-paper{padding:20px 22px 13px}.letter-body{padding:24px 0}.letter-body h3{font-size:25px}.letter-body p{font-size:19px;min-height:140px;line-height:2}.signature{font-size:15px}.paper-top{font-size:8px}.paper-top span:last-child{font-size:10px}.paper-bottom{font-size:7px;letter-spacing:1px}.music-section{margin:0 6%;padding:46px 0}.music-layout{display:block}.record-sleeve{min-height:310px;margin-bottom:30px}.vinyl{height:240px;width:240px}.player h3{font-size:29px}.song-artist{font-size:11px}.song-label{font-size:9px}.wave{margin-top:18px}.player-buttons{gap:25px}.player-buttons .button{padding:15px 23px}.study-section{padding-top:20px}.study-room{min-height:545px}.room-top{padding:20px 16px;font-size:10px}.room-top .glass-button{font-size:10px;padding:8px 10px}.timer-content{margin-top:22px;width:100%}.timer-value{font-size:88px;margin-top:30px}.timer-content>p{font-size:10px;letter-spacing:.4px}.timer-tabs button{padding:9px 18px}.timer-actions{gap:9px}.timer-start{padding:14px 25px}.timer-settings{font-size:10px}.study-stats{gap:20px;font-size:10px}.room-bottom{padding:20px 15px;font-size:9px}.room-bottom span:last-child{display:none}.study-note{font-size:10px;line-height:1.7;padding:0 5px}.closing{padding:0 20px 55px}.closing p{font-size:21px}.closing .wish-link{font-size:11px}footer{padding:22px;flex-wrap:wrap;justify-content:center;gap:15px}footer>span{font-size:9px}footer .text-link{font-size:10px}.footer-brand{font-size:12px}dialog{padding:32px 25px}dialog h2{font-size:25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.meteor{display:none}}

/* Small-screen refinements: preserve readable copy and comfortable touch areas. */
.hero-copy,.hero-art,.player,.letter-paper{min-width:0}
.hero{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}
.music-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
#audio-name{overflow-wrap:anywhere}
.study-room.immersive .timer-content{max-width:100%;padding:0 12px}
@media(max-width:620px){.hero h1{font-size:clamp(30px,9.5vw,40px)}.header nav a{padding:12px 0}.wish-link{min-height:42px}.dialog-close{width:44px;height:44px}.timer-tabs button{min-height:39px}.letter-body p{min-height:0}.signature{margin-top:24px}}
@media(max-width:380px){.header{padding:0 5%;gap:12px}.header .brand{font-size:15px}.header .brand small{display:none}.header .brand-mark{width:29px;height:29px}.header nav{gap:12px;font-size:10px}.hero-actions{gap:13px}.hero-actions .button{padding:14px 17px;font-size:13px}.wish-link{font-size:11px}.section-heading h2{font-size:24px}.section-heading h2 span{margin-left:7px}.timer-tabs button{padding:9px 14px}.timer-value{font-size:78px}.player h3{font-size:26px}}