@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
@import url('assets/subject-art.css');

:root {
  --paper:#fcf8f8; --pink:#f5e6ed; --ink:#49333f; --rose:#9b496c;
  --muted:#79636f; --line:#e6d5de; --display:'Noto Serif SC','Songti SC','SimSun',serif;
  --body:'DM Sans','Microsoft YaHei',sans-serif; --ease:cubic-bezier(.22,.75,.25,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;min-height:100svh;color:var(--ink);font-family:var(--body);background:var(--paper);-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 16% 18%,#eadce875,transparent 50%),radial-gradient(ellipse at 86% 58%,#f4e4db90,transparent 45%),radial-gradient(ellipse at 54% 0%,#f4e3ec,transparent 65%)}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #ad7894;outline-offset:5px}
.letter-panel:focus{outline:none}
::selection{background:#ecd2df;color:#523646}
#particle-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.masthead{height:88px;max-width:1180px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dbc7d44d}
.brand{font:600 22px var(--display);letter-spacing:2px;display:flex;align-items:center;gap:10px}
.brand-flower{font:35px var(--body);color:var(--rose);transition:transform .7s var(--ease)}
.brand:hover .brand-flower{transform:rotate(90deg)}
.date{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:2px;color:#836b79}
.date i{width:1px;height:12px;background:#bea4b3}
.hero{max-width:1050px;margin:auto;text-align:center;padding:48px 30px 38px}
.hero-copy{position:relative}
.occasion{display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;padding:8px 15px;border:1px solid #dec7d571;background:#fff9fc9e;border-radius:25px;font-size:11px;letter-spacing:1.2px;color:#95617c;box-shadow:0 4px 20px #ad7e9408}
.occasion svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.3}
.hero h1{position:relative;font:500 48px/1.43 var(--display);letter-spacing:0;margin:0 auto;width:fit-content}
.hero h1 span{color:var(--rose)}
.underline{position:absolute;bottom:-2px;right:0;width:61%;height:15px;stroke:#c48ba8;stroke-width:1.4;fill:none}
.intro{font-size:13px;line-height:2;color:var(--muted);margin:25px 0 0}
.hero-postmark{position:absolute;right:9%;top:45px;width:94px;height:94px;border:1px solid #b57f9638;border-radius:50%;outline:1px solid #b57f9625;outline-offset:6px;transform:rotate(16deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#b28399}
.hero-postmark b{font:26px Georgia,serif;font-weight:400}.hero-postmark span{font-size:7px;letter-spacing:2px}
.letters{max-width:1100px;margin:0 auto;padding:0 40px 50px}
.choosing .letters{max-width:1040px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}
.section-heading h2{font:500 23px/1.5 var(--display);margin:0}
.eyebrow{font-size:9px;letter-spacing:2.3px;color:#95677e;margin:0 0 9px}
.choosing .section-heading .eyebrow{display:none}
.heading-note{font-size:11px;color:var(--muted);display:flex;gap:16px;align-items:center}
.heading-note>span{font-size:22px;color:#a6748d}
.teacher-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.teacher-tab{--card-tint:#f7eaf0;--card-ink:#995e7a;position:relative;isolation:isolate;overflow:hidden;min-width:0;border:1px solid #fff;border-radius:18px;background:linear-gradient(145deg,#fffdfcf2,var(--card-tint));color:var(--card-ink);min-height:184px;padding:23px 22px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:23px;box-shadow:0 1px 2px #75466008,0 10px 24px -16px #7546603d,inset 0 0 0 1px #bba1b014;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.teacher-tab::before{content:'';position:absolute;z-index:-1;right:-30px;bottom:-60px;width:180px;height:120px;border:1px solid #b69aaf20;border-radius:50%;transform:rotate(-25deg)}
.teacher-tab::after{content:'';position:absolute;z-index:-1;right:-40px;bottom:-50px;width:180px;height:120px;border:1px solid #b69aaf20;border-radius:50%;transform:rotate(-25deg)}
.subject-icon{width:45px;height:49px;display:grid;place-items:center;background:#fffafab5;border:1px solid #ffffff;border-radius:3px;outline:1px dashed #b490a06e;outline-offset:3px;font:29px var(--display);box-shadow:2px 3px 8px #57384808;transform:rotate(-5deg);transition:transform .45s var(--ease)}
.code-icon{font:21px monospace}
.card-copy{display:block}.card-kicker{display:block;font-size:9px;letter-spacing:1.3px;margin-bottom:8px;opacity:.85}
.teacher-tab b{display:block;font:600 16px var(--display);white-space:nowrap;letter-spacing:.2px}
.teacher-tab small{display:block;font-size:11px;margin-top:9px;color:#7d6b74}
.tab-arrow{position:absolute;right:18px;top:19px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#ffffff85;font:18px var(--body);transition:transform .4s var(--ease),background .3s}
.head-teacher{grid-column:1/-1;flex-direction:row;justify-content:flex-start;align-items:center;min-height:106px;gap:25px;padding:22px 29px;--card-tint:#f1e6ce;--card-ink:#8e6a35;background:linear-gradient(110deg,#f7edda,#fffaf0 70%,#f0e0be)}
.head-teacher .subject-icon{width:53px;height:56px;font-size:36px;outline-color:#b9945f6e}
.head-teacher .card-kicker{font-size:10px}.head-teacher b{font-size:18px}.head-teacher small{margin-top:7px}
.head-teacher .tab-arrow{top:calc(50% - 16px);right:23px;width:32px;height:32px}
.head-teacher::before{content:'陪伴，是最长情的教诲。';border:0;border-radius:0;transform:none;width:auto;height:auto;right:80px;bottom:auto;top:44%;font:14px var(--display);color:#a18b65;letter-spacing:2px}
.head-teacher::after{right:60px;width:250px;height:150px;bottom:-116px;border-color:#bfaa762d}
#tab-chinese{--card-tint:#f5e9dc;--card-ink:#9a6b4e}#tab-math{--card-tint:#e3eee8;--card-ink:#4e7b6d}#tab-english{--card-tint:#f3e1eb;--card-ink:#a25378}#tab-it{--card-tint:#eae3f4;--card-ink:#7e679e}
@media(hover:hover) and (pointer:fine){.teacher-tab:hover{transform:translateY(-6px);box-shadow:0 16px 30px -12px #86587529,0 3px 10px #8658750b;border-color:#d5b7c9}.teacher-tab:hover .subject-icon{transform:rotate(4deg) translateY(-2px)}.teacher-tab:hover .tab-arrow{transform:translate(2px,-2px);background:white}}
.teacher-tab:active{transform:scale(.975);transition-duration:.12s}
body:not(.choosing) .letters{padding-top:0}
body:not(.choosing) .section-heading{position:sticky;top:0;z-index:7;padding:22px 0 18px;margin:0;background:#fcf8f8ed;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body:not(.choosing) .section-heading h2{font-size:22px}
.choose-again{flex-shrink:0;min-height:44px;border:1px solid #dec8d6;border-radius:24px;background:#fffafbe6;padding:10px 18px;font-size:12px;color:var(--rose);box-shadow:0 4px 12px #905c7508;transition:background .25s,transform .25s}
.choose-again:hover{background:#f2e0e9}.choose-again:active{transform:scale(.96)}
.letter-stage{overflow:hidden;background:#fffdfb;border:1px solid #eddee6;border-radius:21px;box-shadow:0 14px 50px -25px #65405235}
.letter-panel{--accent:var(--rose);display:grid;grid-template-columns:1.15fr 1fr}
.letter-panel.math{--accent:#487771}.letter-panel.chinese{--accent:#9b6750}.letter-panel.politics{--accent:#9a7139}.letter-panel.it{--accent:#786498}
.letter-panel.physics{--accent:#597f9b}
.physics .subject-art{background:#eaf1f6}
.prism-paper{width:100%;max-width:340px;padding:30px 16px;background:#fafdff;border:1px solid #d8e6ef;box-shadow:7px 8px 0 #dfe9f0;transform:rotate(-2deg);text-align:center;color:#718ea4}
.prism-paper>span{font:16px var(--display);letter-spacing:2px}
.prism-paper svg{display:block;width:100%;height:auto;margin:10px 0;stroke-width:2}
.prism-paper p{font:12px/2 var(--display);margin:0}
#tab-physics{--card-tint:#e1edf6;--card-ink:#5b7f9c}
.teacher-tab#tab-it{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;min-height:110px;gap:24px}
.teacher-tab#tab-it .tab-arrow{top:calc(50% - 14px)}
.teacher-tab:nth-child(6){--i:5}
.letter-main{padding:44px 42px 36px}
.letter-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:1.7px;color:var(--accent);margin-bottom:25px}
.letter-heart{font-size:29px;line-height:1}
.letter-panel h3{font:500 37px/1.4 var(--display);color:var(--accent);letter-spacing:-.5px;margin:0 0 14px}
.english h3{font-family:Georgia,var(--display);font-size:36px}
.title-translation{font:14px/1.9 var(--display);color:var(--muted);margin:0 0 30px}
.blessing{font-size:15px;line-height:2.1;color:#594a52;overflow-wrap:break-word}
.blessing p{margin:0 0 21px}.blessing p[lang=en]{font-size:15px;line-height:1.95}.blessing .salutation{font-weight:600;margin-bottom:23px;color:var(--ink)}
.translation{margin-top:29px;padding-top:24px;border-top:1px dashed #e1c9d6;font-size:14px;color:#79656f}
.translation-label{display:inline-block;color:#9c6d85;font-size:10px;letter-spacing:1px;padding:5px 10px;background:#faf0f4;border-radius:4px;margin-bottom:18px}
.signature{font:italic 16px/2 Georgia,var(--display);color:var(--accent);margin:30px 0 0}.signature span{font:12px var(--body);color:var(--muted)}
.memory-side{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 20% 40%,#fcf5f6,#f3e2ea);padding:42px 34px}
.photo-print{position:relative;background:#fffdfa;padding:12px 12px 20px;width:100%;max-width:365px;transform:rotate(2deg);box-shadow:0 12px 28px -12px #7c4d6a36,0 2px 4px #6448510a}
.photo-print img{display:block;width:100%;height:auto;aspect-ratio:1566/1279;object-fit:contain;border:1px solid #ece3e4}
.photo-print p{font:11px/1.8 var(--display);text-align:center;color:#8e7080;margin:18px 0 2px}
.photo-tape{position:absolute;top:-13px;left:calc(50% - 44px);height:27px;width:88px;transform:rotate(-5deg);background:linear-gradient(90deg,#d8c7a86e,#e7d6bdb0,#d8c7a86e);z-index:1}
.photo-heart{position:absolute;bottom:-24px;right:13px;font:50px var(--display);color:#b86f90;transform:rotate(-13deg)}
.memory-caption{text-align:center;margin-top:42px}.tiny-star{font-size:25px;color:#b788a0}.memory-caption p{font:italic 17px/1.8 Georgia,serif;color:#a06e89;margin:12px 0}.memory-caption small{font-size:10px;line-height:1.8;color:#927585}
.side-word{font:italic 42px Georgia,var(--display);color:#b17d951f;margin-top:33px;transform:rotate(-6deg)}
.subject-art{padding:36px 30px}.subject-art .side-word{font-size:30px}
.teacher-video{grid-column:1/-1;margin:0;padding:25px 28px 20px;background:linear-gradient(145deg,#eee7f5,#f6f3fa);border-bottom:1px solid #e5dbee}
.teacher-video video{display:block;width:100%;max-height:450px;aspect-ratio:16/9;object-fit:contain;background:#211b29;border-radius:12px;box-shadow:0 9px 28px -15px #32204350}
.teacher-video figcaption{font:12px/1.8 var(--display);text-align:center;color:#827190;margin-top:16px}
.letter-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 30px;background:#fcf6f8;border-top:1px solid #ecdde5}
.action-note{font-size:11px;line-height:1.8;color:#907683}
.letter-actions>div{display:flex;align-items:center;gap:10px}
.text-button,.next-button{min-height:44px;border:1px solid #e4cbd8;border-radius:25px;padding:10px 17px;font-size:12px;background:#fffafa;color:var(--rose);transition:background .25s,transform .25s;white-space:nowrap}
.next-button{background:#98506f;color:white;border-color:#98506f;box-shadow:0 4px 12px #98506f20}
.text-button span,.next-button span{font-size:16px;margin-left:9px}.text-button:hover{background:#f4e4eb}.next-button:hover{background:#86425f}.text-button:active,.next-button:active{transform:scale(.96)}
.closing{text-align:center;max-width:960px;margin:0 auto 20px;padding:8px 24px 28px}
.closing-flower{font-size:33px;color:#b47593}.closing>p{font:14px/2 var(--display);color:#866c7b;margin:15px 0}.closing h2{font:500 25px/1.6 var(--display);margin:19px 0 24px}
.bloom-button{border:1px solid #d4acbf;border-radius:28px;padding:12px 24px;background:#fbf0f5;color:#995775;font-size:12px;min-height:46px;transition:transform .3s var(--ease),box-shadow .3s}
.bloom-button span{margin-left:12px;font-size:19px}.bloom-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #a867851a}.bloom-button:active{transform:scale(.96)}
.bloom-message{display:block;font-size:12px;line-height:1.8;color:var(--rose);min-height:23px;margin-top:16px}
footer{max-width:1180px;margin:auto;padding:24px 40px 30px;display:flex;justify-content:space-between;gap:15px;font-size:10px;line-height:1.8;letter-spacing:.5px;color:#9a8390}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);width:max-content;transform:translate(-50%,15px) scale(.96);opacity:0;pointer-events:none;background:#513546ed;color:white;padding:14px 23px;border:1px solid #ffffff20;border-radius:14px;box-shadow:0 8px 30px #50324325;font-size:12px;text-align:center;z-index:20;transition:opacity .3s,transform .4s var(--ease)}
.toast.show{transform:translate(-50%,0) scale(1);opacity:1}
#petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:15}.petal{position:absolute;top:-45px;color:#bf7897;font-size:24px;animation:fall 3s ease-in forwards}
@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(280deg);opacity:0}}
.cursor{animation:blink 1.2s steps(2,start) infinite}@keyframes blink{to{opacity:0}}
@keyframes welcome{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
body:not(.has-interacted) .hero-copy{animation:welcome .75s var(--ease) both}
body:not(.has-interacted) .teacher-tab{animation:welcome .6s var(--ease) both;animation-delay:calc(.12s + var(--i,0)*.06s)}
.teacher-tab:nth-child(2){--i:1}.teacher-tab:nth-child(3){--i:2}.teacher-tab:nth-child(4){--i:3}.teacher-tab:nth-child(5){--i:4}
@media(max-width:1000px){.hero-postmark{right:3%;width:80px;height:80px}.letter-main{padding:34px 30px}.letter-panel h3{font-size:31px}.teacher-tab{padding:22px 18px}.teacher-tab b{font-size:15px}.teacher-tab small{font-size:10px}.head-teacher b{font-size:18px}.letter-actions{padding:18px 23px}.action-note{font-size:10px}}
@media(max-width:760px){
 .masthead{height:70px;padding:0 23px}.brand{font-size:19px;letter-spacing:1.5px;gap:8px}.brand-flower{font-size:29px}.date{font-size:9px;gap:10px;letter-spacing:1px}
 .hero{padding:30px 22px 30px}.occasion{font-size:9px;letter-spacing:.7px;padding:7px 12px;margin-bottom:18px}.occasion svg{width:15px;height:15px}.hero h1{font-size:36px;line-height:1.43;letter-spacing:-.7px}.intro{font-size:12px;line-height:1.95;margin-top:21px}.hero-postmark{display:none}
 .letters{padding:0 18px 35px}.section-heading{margin-bottom:16px;gap:8px;align-items:flex-end}.section-heading h2{font-size:20px}.heading-note{font-size:10px;display:none}.teacher-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .teacher-tab{padding:18px 18px 19px;min-height:175px;border-radius:16px;gap:19px}.subject-icon{width:36px;height:39px;font-size:26px}.code-icon{font-size:18px}.teacher-tab b{font-size:15px}.teacher-tab small{font-size:10px;margin-top:8px}.card-kicker{font-size:8px;letter-spacing:.6px;margin-bottom:7px}.tab-arrow{right:14px;top:15px;font-size:16px;width:25px;height:25px}
 .head-teacher{min-height:100px;gap:20px;padding:21px 22px}.head-teacher .subject-icon{width:43px;height:47px;font-size:31px}.head-teacher .card-kicker{font-size:9px;letter-spacing:.5px}.head-teacher b{font-size:17px}.head-teacher small{font-size:10px}.head-teacher::before{display:none}.head-teacher .tab-arrow{right:17px;width:27px;height:27px;top:calc(50% - 14px)}
 body:not(.choosing) .section-heading{padding:16px 0;align-items:center;gap:12px}.eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:7px}body:not(.choosing) .section-heading h2{font-size:17px}.choose-again{font-size:11px;padding:10px 13px;min-height:42px}
 .letter-stage{border-radius:17px}.letter-panel{grid-template-columns:1fr}.letter-main{padding:29px 25px 32px}.letter-meta{font-size:9px;letter-spacing:1.3px;margin-bottom:22px}.letter-panel h3{font-size:31px;line-height:1.45}.english h3{font-size:31px}.title-translation{font-size:13px;margin-bottom:26px}.blessing,.blessing p[lang=en]{font-size:14px;line-height:2.05}.blessing p{margin-bottom:20px}.translation{font-size:13px;padding-top:23px}.translation-label{font-size:9px}.signature{font-size:14px;margin-top:26px}.signature span{font-size:11px}
 .english .memory-side{order:-1;padding:33px 28px 23px}.photo-print{max-width:365px;padding:10px 10px 18px;transform:rotate(1.5deg)}.photo-print p{font-size:10px;margin-top:15px}.photo-heart{font-size:44px;bottom:-22px}.memory-caption{margin-top:24px}.memory-caption .tiny-star{display:none}.memory-caption p{font-size:14px;line-height:1.7;margin:10px 0 7px}.memory-caption small{font-size:9px}.english .side-word{display:none}
 .subject-art{padding:35px 28px}.subject-art .side-word{font-size:28px}.graph-paper{max-width:340px}.poetry-paper{padding:28px;max-width:290px;width:90%}.poetry-paper p{font-size:23px}.code-window{max-width:340px}.code-window pre{font-size:12px}.teacher-video{padding:18px 17px 16px}.teacher-video video{max-height:none;border-radius:8px}.teacher-video figcaption{font-size:11px;margin-top:12px}
 .letter-actions{display:block;padding:15px 20px 18px}.action-note{display:block;font-size:10px;margin-bottom:12px;text-align:center}.letter-actions>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}.text-button,.next-button{font-size:12px;padding:10px 12px;min-height:45px}
 .closing{padding:0 22px 20px}.closing>p{font-size:12px;line-height:2.1}.closing h2{font-size:21px}.closing-flower{font-size:30px}.bloom-message{font-size:11px}
 footer{padding:8px 22px 25px;flex-direction:column;text-align:center;gap:6px;font-size:9px;letter-spacing:.4px}.choosing footer{padding-top:0}
}
@media(max-width:360px){.hero{padding:25px 20px}.hero h1{font-size:32px}.occasion{font-size:8px}.teacher-tab{padding:16px 13px;min-height:166px}.teacher-tab b{font-size:14px}.teacher-tab small{font-size:9px}.head-teacher{padding:20px;gap:17px;min-height:98px}.head-teacher b{font-size:16px}.head-teacher .card-kicker{font-size:8px}.head-teacher .tab-arrow{right:12px}.letter-main{padding:27px 21px}.letter-panel h3,.english h3{font-size:27px}.section-heading h2{font-size:19px}body:not(.choosing) .section-heading h2{font-size:15px}.choose-again{font-size:10px;padding:9px 11px}.code-window pre{font-size:11px;padding:22px 14px}.english .memory-side{padding:30px 23px 22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}#particle-canvas{display:none}}