@charset "UTF-8";
@font-face{font-family:"Teacher Hand";src:url('./assets/teacher-hand.ttf') format('truetype');font-display:swap;font-weight:400}
:root{color-scheme:light;--paper:#fff9e9;--ink:#3e4637;--muted:#717665;--pink:#d56980;--green:#708d47;--blue:#7096ba;--hand:"Teacher Hand","KaiTi","Kaiti SC","STKaiti","FangSong",cursive;--sans:"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper)}body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px dashed #7295bb;outline-offset:5px}button:disabled{cursor:default}a{color:inherit;text-decoration:none}
/* Layers: paper 0, letter and flowers 1, drifting petals 2, controls 3, intro 4. */
.experience{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;background-color:var(--paper);background-image:linear-gradient(#a7b28b0e 1px,transparent 1px),linear-gradient(90deg,#a7b28b0e 1px,transparent 1px);background-size:28px 28px;border:12px solid #e8eed6}
.ambient-light{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 73% 45%,#ffedb13b,transparent 53%)}.film-grain{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.045;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='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.topbar{z-index:3;position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 4vw}.school-brand{display:flex;align-items:center;gap:11px;min-width:0}.school-logo{width:58px;height:58px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 1px #64863b24)}.dedication{font-family:var(--hand);font-size:23px;letter-spacing:.02em;transform:rotate(-3deg);color:#63804b}.dedication>span{display:block;font-family:var(--sans);font-size:11px;margin-top:5px;letter-spacing:.12em;color:#727969}.controls{display:flex;align-items:center;gap:22px}.quiet-button,.sound-button,.replay{background:transparent;min-height:44px;padding:10px 0;color:#66715c;font-size:12px;transition:transform .2s,color .2s}.quiet-button:hover,.sound-button:hover{color:#b7586e}.sound-button{display:flex;align-items:center;gap:8px;min-width:81px}.equalizer{display:flex;align-items:center;gap:3px;height:18px}.equalizer i{display:block;width:3px;height:5px;border-radius:2px;background:#6e8caa}.equalizer i:nth-child(2){height:12px}.equalizer i:nth-child(3){height:8px}.equalizer i:nth-child(4){height:15px}.sound-button[aria-pressed=true] .equalizer i{animation:equalize .9s ease-in-out infinite alternate}.equalizer i:nth-child(2){animation-delay:-.2s!important}.equalizer i:nth-child(3){animation-delay:-.6s!important}.equalizer i:nth-child(4){animation-delay:-.4s!important}
.composition{position:relative;z-index:1;width:min(1280px,100%);margin:auto;flex:1;display:grid;grid-template-columns:45% 55%;grid-template-rows:1fr auto;align-items:center;padding:0 5vw 20px;min-height:580px;column-gap:12px}.message{grid-column:1;grid-row:1;position:relative;z-index:1;padding-top:26px;align-self:end;transform:rotate(-2deg)}.salutation{font-family:var(--hand);font-size:20px;letter-spacing:.03em;color:#738652;margin:0 0 20px}.salutation:before{content:'TO: ';color:#86a3c0;font-family:var(--hand);font-size:19px}h1{margin:0;font-family:var(--hand);font-weight:400;font-size:clamp(40px,4.65vw,72px);letter-spacing:.015em;line-height:1.38}.line{display:block}.line>span{display:inline-block}.accent{color:#d66a80;position:relative}.accent:after{content:'';position:absolute;bottom:4px;left:0;right:0;height:9px;z-index:-1;background:#f5d46d77;transform:rotate(-1deg);border-radius:40% 30% 50% 20%}.blessing{font-family:var(--hand);font-size:22px;color:#748064;line-height:1.85;margin:22px 0 0;letter-spacing:.015em}.gift-actions{grid-column:1;grid-row:2;padding-top:32px;padding-bottom:50px;transform:rotate(-2deg)}.accept-button{position:relative;display:flex;align-items:center;justify-content:center;gap:28px;padding:15px 26px;min-height:60px;min-width:227px;border:2px solid #4d6640;border-radius:13px 17px 14px 11px;color:#fffef5;background:#789651;box-shadow:3px 5px 0 #4d6640;font-family:var(--hand);font-size:24px;transition:transform .2s,box-shadow .2s,background .2s}.accept-button:hover{background:#87a35e;transform:translateY(-2px);box-shadow:3px 7px 0 #4d6640}.accept-button:active{transform:translate(2px,4px);box-shadow:1px 1px 0 #4d6640}.accept-button:disabled{background:#d88a94;border-color:#a4576b;box-shadow:3px 5px 0 #a4576b}.button-star{font:28px Georgia,serif;line-height:1}.signature{font-family:var(--hand);font-size:18px;color:#8a8b72;margin:24px 0 0;padding-left:3px}
.flower-stage{grid-column:2;grid-row:1/3;align-self:stretch;position:relative;min-height:580px;display:flex;align-items:center;justify-content:center;margin-left:-3%;margin-right:-5%}.flower-halo{position:absolute;inset:8% -3% 10%;border-radius:50%;background:radial-gradient(ellipse,#ffeca345,transparent 68%);opacity:0}.bouquet-wrap{position:relative;width:100%;height:100%;max-height:750px;aspect-ratio:3/4;transform-origin:50% 85%;will-change:transform}.bouquet,#bloom{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.bouquet{opacity:1}#bloom{opacity:0}.webgl-ready #bloom{opacity:1}.webgl-ready .bouquet{opacity:0}.flower-touch{position:absolute;inset:4% 4% 9%;background:none;border-radius:40%;cursor:pointer}.flower-touch:focus-visible{outline:2px dashed #789651}.flower-caption{position:absolute;bottom:0;right:14%;font-family:var(--hand);font-size:18px;color:#827959;transform:rotate(-5deg);pointer-events:none;margin:0}.flower-caption:before{content:'↑';position:absolute;top:-30px;left:45%;font-size:27px;color:#cc977e;transform:rotate(15deg)}
#petals{position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;height:100%}.footer{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:10px 4vw 0;padding:19px 0 23px;border-top:2px dashed #b9c29e64}.occasion{display:flex;align-items:center;gap:12px;margin:0}.date{font-family:var(--hand);font-size:28px;color:#ae7787;transform:rotate(-5deg);border:2px solid #d7a5b0;border-radius:5px;padding:0 9px;line-height:1.3}.occasion-name{font-family:var(--hand);font-size:20px;color:#748258}#interaction-hint{font-family:var(--hand);font-size:18px;color:#849070;margin:0}.replay{display:flex;align-items:center;gap:10px;font-family:var(--hand);font-size:18px;white-space:nowrap}.replay>span{font-family:Georgia,serif;font-size:24px;transition:transform .5s}.replay:hover>span{transform:rotate(-70deg)}
.opening{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--paper);background-image:linear-gradient(#9eaf8b12 1px,transparent 1px);background-size:100% 35px;pointer-events:none;visibility:visible;opacity:1}.opening p{font-family:var(--hand);font-size:clamp(32px,4vw,50px);letter-spacing:.07em;line-height:1.7;margin:0;opacity:0;transform:rotate(-3deg)}.opening p:nth-child(2){color:var(--pink)}.opening span{font-family:var(--hand);font-size:18px;color:#8c9976;margin-top:24px;opacity:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.is-paused *{animation-play-state:paused!important}
@keyframes equalize{to{transform:scaleY(.3)}}
.opening p:first-child{opacity:1}
@media(min-width:1600px){.composition{padding-inline:30px}.flower-stage{margin-right:0;min-height:670px}}
@media(min-width:769px) and (max-height:800px){.composition{min-height:490px}.flower-stage{min-height:490px}.topbar{padding-block:20px}h1{font-size:clamp(39px,4.4vw,62px)}.salutation{margin-bottom:10px}.blessing{font-size:20px;margin-top:17px}.gift-actions{padding-top:23px;padding-bottom:34px}.signature{margin-top:18px}.footer{padding-block:12px 14px}.accept-button{min-height:55px;font-size:22px}}
/* A vertical mobile composition keeps actions in normal document flow. */
@media(max-width:768px){.experience{border-width:7px}.topbar{padding:12px 5vw 7px;gap:12px;align-items:center}.school-brand{gap:7px}.school-logo{width:43px;height:43px}.dedication{font-size:19px;white-space:nowrap}.dedication>span{font-size:9px;letter-spacing:.03em;margin-top:3px}.controls{gap:12px}.quiet-button{font-size:10px}.sound-button{font-size:10px;min-width:65px;gap:6px}.equalizer{gap:2px}.equalizer i{width:2px}.composition{width:100%;display:flex;flex-direction:column;min-height:0;padding:0 5vw 13px;gap:0;flex:1;justify-content:center}.message{width:100%;padding:16px 0 0;align-self:center;text-align:center;transform:rotate(-2deg)}.salutation{font-size:16px;margin:0 0 6px}.salutation:before{font-size:14px}h1{font-size:clamp(34px,8.7vw,49px);line-height:1.22}.line{display:inline}.line+.line{margin-left:3px}.accent:after{height:6px;bottom:1px}.blessing{font-size:17px;line-height:1.65;margin:12px 0 0}.flower-stage{width:100%;height:clamp(255px,41svh,390px);min-height:0;flex:none;margin:0;align-self:center}.bouquet-wrap{width:100%;height:100%;max-width:440px}.flower-caption{font-size:14px;bottom:0;right:8%;transform:rotate(-6deg)}.flower-caption:before{top:-24px;font-size:22px;left:64%}.flower-touch{inset:0 3% 8%}.gift-actions{width:100%;padding:17px 0 2px;display:flex;flex-direction:column;align-items:center;transform:rotate(-2deg)}.accept-button{min-width:211px;min-height:52px;padding:10px 23px;font-size:22px;gap:22px}.signature{font-size:15px;margin:16px 0 0}.footer{margin:7px 5vw 0;padding:10px 0 13px;gap:10px}.occasion{gap:9px}.date{font-size:21px;padding:0 5px}.occasion-name{font-size:16px}#interaction-hint{display:none}.replay{font-size:16px;gap:7px;min-height:36px}.replay>span{font-size:21px}}
@media(max-width:390px){.topbar{padding-inline:4vw}.school-brand{gap:5px}.school-logo{width:38px;height:38px}.dedication{font-size:17px}.controls{gap:10px}.quiet-button{font-size:10px}.sound-button{min-width:60px}h1{font-size:33px}.blessing{font-size:16px}.flower-stage{height:clamp(235px,39svh,340px)}.flower-caption{font-size:13px;right:3%}.footer{margin-inline:4vw}.signature{font-size:14px}}
@media(max-width:768px) and (max-height:700px){.topbar{padding-top:10px}.message{padding-top:10px}.salutation{font-size:14px}h1{font-size:33px}.blessing{font-size:15px;margin-top:8px}.flower-stage{height:235px}.gift-actions{padding-top:14px}.signature{margin-top:12px;font-size:14px}.footer{padding-block:7px 9px;margin-top:3px}}
@media(min-width:769px){.flower-stage{height:clamp(490px,68svh,730px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.opening{display:none!important}.bouquet-wrap{will-change:auto}}