*{box-sizing:border-box}[hidden]{display:none!important}:root{color-scheme:dark}body{margin:0;background:#0d0d10;color:#faf8fc;font-family:"Microsoft YaHei","PingFang SC",sans-serif;min-height:100svh;background-image:radial-gradient(ellipse at 50% 85%,#29203655,transparent 60%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #ddbcff;outline-offset:6px}header{max-width:1340px;margin:auto;padding:30px 45px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px;color:#faf8fc;text-decoration:none;font-size:31px}.brand span{font-size:11px;letter-spacing:3px}.nav-note{color:#a9a3b2;font-size:11px;border:1px solid #ffffff12;background:#ffffff06;padding:12px 30px;border-radius:30px;letter-spacing:2px}.pill{border:0;border-radius:30px;background:#faf8fc;color:#26232d;padding:12px 22px;font-size:11px;font-weight:600;transition:transform .2s}.pill:hover{transform:translateY(-2px)}main{max-width:1250px;margin:auto;padding-top:40px}.intro{text-align:center;padding:0 20px}.eyebrow{font-size:9px;letter-spacing:2px;color:#c5bdcf}.eyebrow i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#cffc83;margin-right:8px}h1{font-size:clamp(40px,5.2vw,68px);line-height:1.18;letter-spacing:-2px;margin:23px 0;font-weight:700}.subtitle{font-size:12px;color:#918b9b;line-height:1.9;margin:0}.deck-wrap{overflow:hidden;padding:55px 10px 35px;min-height:430px}.deck{position:relative;height:340px;width:100%;perspective:1200px}.card{position:absolute;left:calc(50% - 115px);bottom:10px;width:230px;height:300px;border:1px solid #ffffff4d;border-radius:20px;text-align:left;padding:22px 19px;color:#fff;transform:translate(var(--x),var(--y)) rotate(var(--angle)) scale(var(--scale));transform-origin:50% 85%;transition:transform .38s cubic-bezier(.2,.75,.25,1),box-shadow .38s;box-shadow:0 20px 40px #0005;isolation:isolate}.card:before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#ffffff30,transparent 50%,#00000018);pointer-events:none}.violet{--accent:#c6a6ff;background:linear-gradient(145deg,#a68ded,#8064ce)}.pink{--accent:#ffd3e3;background:linear-gradient(145deg,#f88eab,#df678e)}.blue{--accent:#b7ddff;background:linear-gradient(145deg,#64d9df,#4799db)}.green{--accent:#f1ec68;background:linear-gradient(145deg,#b5ed6c,#82c649)}.indigo{--accent:#ffaed5;background:linear-gradient(145deg,#87a3f6,#646fd6)}.card-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.card-top b{font-size:17px;letter-spacing:-.3px;white-space:nowrap}.read-tag{font-size:8px;color:#423c4c;background:#ffffffdf;border-radius:20px;padding:7px 9px;opacity:0;transform:translateX(5px);transition:opacity .3s,transform .3s}.card.active .read-tag{opacity:1;transform:none}.card-sub{font-size:7px;letter-spacing:1px;display:block;margin-top:10px;color:#ffffffa3}.sculpture{position:absolute;left:14px;right:14px;top:80px;height:180px;color:var(--accent);filter:drop-shadow(0 15px 7px #39314e40);transform:rotate(-8deg);transition:transform .4s}.sculpture svg{width:100%;height:100%;overflow:visible}.card.active .sculpture{transform:rotate(1deg) translateY(-5px)}.card-bottom{position:absolute;left:19px;right:19px;bottom:21px;display:flex;justify-content:space-between;color:#ffffffae;font-size:8px;letter-spacing:1px}.hint{text-align:center;font-size:10px;color:#898291;letter-spacing:1px;margin:0 0 45px}.hint span{margin-left:10px;color:#d4bbfa}footer{display:flex;justify-content:space-between;padding:22px 45px;max-width:1340px;margin:auto;border-top:1px solid #ffffff0c;font-size:9px;letter-spacing:1px;color:#696472}dialog{color:#fff;border:1px solid #ffffff50;border-radius:24px;width:min(520px,calc(100% - 36px));padding:42px 35px 34px;max-height:calc(100svh - 40px);box-shadow:0 35px 110px #0008;overflow:auto}dialog::backdrop{background:#09080be0;backdrop-filter:blur(12px)}dialog[open]{animation:open .35s ease-out}.close{position:absolute;right:16px;top:10px;font-size:27px;border:0;background:transparent;color:#fff9;padding:4px 9px}dialog .eyebrow{color:#ffffffa0;font-size:8px}dialog h2{font-size:32px;margin:24px 0}#letter-copy{font-size:14px;line-height:2;white-space:pre-line;color:#ffffffe0;margin-bottom:30px}@keyframes open{from{opacity:0;transform:translateY(15px) scale(.96)}to{opacity:1;transform:none}}@media(max-width:700px){header{padding:22px 22px}.nav-note{display:none}.brand{font-size:25px}.brand span{font-size:9px}.pill{font-size:10px;padding:10px 17px}main{padding-top:45px}h1{font-size:44px;letter-spacing:-1px}.subtitle{font-size:11px}.deck-wrap{padding:55px 0 20px;min-height:390px}.deck{height:310px}.card{width:180px;height:254px;left:calc(50% - 90px);padding:19px 15px}.card-top b{font-size:14px}.read-tag{font-size:7px;padding:5px 7px}.card-sub{font-size:6px;letter-spacing:.5px}.sculpture{top:65px;height:156px;left:6px;right:6px}.card-bottom{left:15px;right:15px;font-size:7px;bottom:17px}.hint{margin-bottom:35px;font-size:9px}footer{padding:22px;font-size:8px;gap:15px}dialog{padding:35px 25px 28px}dialog h2{font-size:27px}#letter-copy{font-size:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.toy-art{display:block;width:100%;height:100%;background-image:url('assets/glossy-toys.png');background-repeat:no-repeat;background-size:500% auto;background-position:0 50%;filter:drop-shadow(0 14px 12px #39304b33)}.toy-1{background-position:25% 50%}.toy-2{background-position:50% 50%}.toy-3{background-position:75% 50%}.toy-4{background-position:100% 50%}.sculpture{top:78px;left:-6px;right:-6px;height:200px;transform:rotate(-5deg)}.card.active .sculpture{transform:rotate(3deg) translateY(-6px)}.card-top{display:block}.card-top b{display:block}.read-tag{position:absolute;right:0;top:33px}.card-sub{margin-top:9px}.card{overflow:visible}.drag-tip{font-size:9px;letter-spacing:1px;color:#ffffffa0;margin:0 0 18px}dialog{touch-action:pan-y;transform-origin:50% 65%;transition:transform .2s,opacity .2s;backface-visibility:hidden}dialog.dragging{transition:none;cursor:grabbing}dialog.turn-left{animation:flip-away-left .3s ease-in both}dialog.turn-right{animation:flip-away-right .3s ease-in both}dialog.enter-right{animation:flip-in-right .38s cubic-bezier(.2,.7,.2,1) both}dialog.enter-left{animation:flip-in-left .38s cubic-bezier(.2,.7,.2,1) both}@keyframes flip-away-left{to{opacity:0;transform:perspective(900px) translateX(-120px) rotateY(-55deg) rotateZ(-7deg) scale(.9)}}@keyframes flip-away-right{to{opacity:0;transform:perspective(900px) translateX(120px) rotateY(55deg) rotateZ(7deg) scale(.9)}}@keyframes flip-in-right{from{opacity:0;transform:perspective(900px) translateX(120px) rotateY(45deg) rotateZ(5deg) scale(.9)}to{opacity:1;transform:none}}@keyframes flip-in-left{from{opacity:0;transform:perspective(900px) translateX(-120px) rotateY(-45deg) rotateZ(-5deg) scale(.9)}to{opacity:1;transform:none}}@media(max-width:700px){.sculpture{top:61px;height:176px;left:-5px;right:-5px}.read-tag{top:28px}.deck{touch-action:pan-y}}@media(prefers-reduced-motion:reduce){dialog{animation:none!important;transition:none!important}}
/* Candy-colored studio, with collectible mascots and floating accents. */
:root{color-scheme:light}body{background:#fff7f3;color:#625270;background-image:radial-gradient(ellipse at 12% 20%,#f8d9eaa6,transparent 45%),radial-gradient(ellipse at 87% 65%,#ddd7fc99,transparent 47%),linear-gradient(140deg,#fff9f2,#fff2f6)}.brand{color:#80638f}.nav-note{color:#a08baf;background:#ffffff66;border-color:#d4c5e33b}.pill{background:#8e75ae;color:#fff;box-shadow:0 5px 15px #9376b220}.eyebrow{color:#a68bb0}.eyebrow i{background:#c292b6}.subtitle{color:#a391ad}h1{color:#665174;text-shadow:0 5px 20px #ffffffaa}.hint{color:#a591ad}.hint span{color:#a475b8}footer{color:#b39db9;border-color:#bca1c422}.card{box-shadow:0 18px 35px #a087ba33;border-color:#fff8}.card.active{box-shadow:0 25px 48px #9d7aaf44}.toy-art,.tiny-toy{background-image:url('assets/candy-mascots.png')}.sculpture{height:190px;top:83px;left:0;right:0;filter:drop-shadow(0 12px 8px #63507b26)}.card.active .sculpture{animation:mascot-hover 4s ease-in-out infinite}.card-top b{font-size:16px}.read-tag{color:#826191}dialog{color:#fff}dialog::backdrop{background:#69557280;backdrop-filter:blur(12px)}main{position:relative}.floating-world{position:absolute;inset:0;pointer-events:none;z-index:10;overflow:visible}.floater{position:absolute;width:68px;height:68px;filter:drop-shadow(0 9px 8px #8d76a729);animation:float-toy 6s ease-in-out infinite}.floater svg{width:100%;height:100%}.f-headphones{left:10%;top:47%;--tilt:-14deg}.f-camera{right:8%;top:54%;--tilt:14deg;animation-delay:-2s}.f-planet{left:6%;top:12%;width:57px;height:57px;--tilt:-10deg;animation-delay:-3s}.f-heart{right:12%;top:16%;width:63px;height:63px;--tilt:12deg;animation-delay:-1s}.tiny-toy{display:block;width:100%;height:100%;background-repeat:no-repeat;background-size:500% auto;background-position:50% 50%}.tiny-toy.toy-4{background-position:100% 50%}.floating-tag{position:absolute;border-radius:20px;padding:8px 13px;font-size:8px;letter-spacing:1px;box-shadow:0 5px 15px #ab86a615;animation:float-toy 8s ease-in-out infinite}.tag-one{left:16%;top:28%;background:#c6eef0;color:#599697;--tilt:-6deg}.tag-two{right:17%;top:36%;background:#f6d1e3;color:#bb7b9b;--tilt:6deg;animation-delay:-4s}.twinkle{position:absolute;color:#b19acd;font-style:normal;animation:twinkle 3s ease-in-out infinite}.t-one{left:27%;top:10%;font-size:19px}.t-two{right:25%;top:47%;font-size:13px;animation-delay:-1s}@keyframes float-toy{0%,100%{transform:translateY(0) rotate(var(--tilt,0deg))}50%{transform:translateY(-11px) rotate(calc(var(--tilt,0deg) + 6deg))}}@keyframes mascot-hover{0%,100%{transform:rotate(1deg) translateY(-4px)}50%{transform:rotate(-3deg) translateY(-11px)}}@keyframes twinkle{50%{opacity:.35;transform:scale(.7)}}@media(max-width:700px){.floating-world{z-index:0}.floater{width:42px;height:42px}.f-headphones{left:4%;top:37%}.f-camera{right:3%;top:35%}.f-planet{left:3%;top:3%;width:36px;height:36px}.f-heart{right:3%;top:10%;width:40px;height:40px}.tag-one{left:7%;top:29%;font-size:7px;padding:6px 9px}.tag-two{right:6%;top:26%;font-size:7px;padding:6px 9px}.t-one{left:17%;top:12%}.t-two{right:18%;top:32%}.intro,.deck-wrap,.hint{position:relative;z-index:1}.sculpture{height:163px;top:73px;left:0;right:0}.card-top b{font-size:14px}}@media(prefers-reduced-motion:reduce){.floating-world *,.card.active .sculpture{animation:none!important}}
/* Every opened card keeps its mascot and a quiet romantic atmosphere. */
dialog{isolation:isolate;position:relative}.letter-mascot-backdrop{position:absolute;inset:60px -38px 40px;z-index:-1;pointer-events:none;background-image:url('assets/candy-mascots.png');background-repeat:no-repeat;background-size:500% auto;background-position:var(--mascot-position,50%) 50%;opacity:.14;filter:saturate(.75);transform:rotate(-12deg)}.letter-mascot-badge{position:absolute;right:29px;top:51px;width:74px;height:74px;background-image:url('assets/candy-mascots.png');background-size:500% auto;background-repeat:no-repeat;background-position:var(--mascot-position,50%) 50%;opacity:.95;filter:drop-shadow(0 5px 6px #4a365e26);pointer-events:none;animation:badge-float 5s ease-in-out infinite}dialog #letter-title{padding-right:62px}dialog #letter-copy{position:relative;text-shadow:0 1px 5px #48325b28;color:#fff;max-width:100%}.romance-particles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}.romance-particles i{position:absolute;left:var(--left);top:-30px;width:var(--size);height:var(--size);animation:romantic-fall var(--duration) linear infinite;animation-delay:var(--delay)}.rose-petal{height:calc(var(--size)*1.5)!important;border-radius:85% 5% 85% 5%;background:linear-gradient(135deg,#f3bdceaa,#d78dab88);box-shadow:inset 1px 1px 2px #fff5;opacity:.65}.star-point{border-radius:50%;background:#fff;box-shadow:0 0 7px 2px #dfbee56b;opacity:.8}.star-point:after{content:'';position:absolute;inset:-3px;background:linear-gradient(transparent 45%,#dca9d866 50%,transparent 55%);transform:rotate(90deg)}header,main,footer{position:relative;z-index:1}.letter-sparkles{position:absolute;inset:0;pointer-events:none;z-index:-1}.letter-sparkles i{position:absolute;color:#fff7;font-style:normal;font-size:16px;animation:letter-glimmer 4s ease-in-out infinite}.green #letter-copy{color:#fff; text-shadow:0 1px 5px #36620a60}.green #letter-title{ text-shadow:0 1px 7px #48711730}@keyframes romantic-fall{0%{transform:translate(0,-5vh) rotate(0);opacity:0}12%,85%{opacity:.65}100%{transform:translate(var(--drift),110vh) rotate(240deg);opacity:0}}@keyframes badge-float{50%{transform:translateY(-5px) rotate(5deg)}}@keyframes letter-glimmer{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.8;transform:scale(1.15)}}@media(max-width:700px){.letter-mascot-badge{width:57px;height:57px;top:54px;right:22px}dialog #letter-title{padding-right:45px}.letter-mascot-backdrop{inset:70px -20px 40px;opacity:.12}.letter-sparkles i{font-size:13px}}@media(prefers-reduced-motion:reduce){.romance-particles i,.letter-sparkles i,.letter-mascot-badge{animation:none!important}.romance-particles{display:none}}
/* Snow and roses must live inside the modal top layer to remain visible. */
.visible-weather,.modal-weather{position:fixed;inset:0;pointer-events:none;overflow:hidden}.visible-weather{z-index:12}.modal-weather{position:absolute;z-index:3;border-radius:inherit;opacity:.85}.falling-decoration{position:absolute;left:var(--left);top:-45px;display:block;font-size:21px;line-height:1;animation:visible-snowfall var(--duration) linear infinite;animation-delay:var(--delay);filter:drop-shadow(0 2px 4px #af759033)}.falling-snow{color:#fff;font-size:23px;text-shadow:0 0 5px #ad91c6,0 0 9px #eadcf7}.falling-rose{font-size:22px}.falling-petal i{display:block;width:13px;height:20px;background:linear-gradient(135deg,#ffd3df,#e89caf);border-radius:85% 0 85% 0;box-shadow:inset 1px 1px 2px #fff8}.modal-weather .falling-decoration{font-size:16px;opacity:.65}.modal-weather .falling-snow{font-size:19px}.modal-weather .falling-petal i{width:9px;height:14px}.modal-weather~#letter-copy{position:relative;z-index:4}dialog #letter-copy,dialog h2,dialog .eyebrow,dialog .pill,dialog .close,dialog .drag-tip{position:relative;z-index:4}dialog .close{position:absolute}.romance-particles{display:none}.modal-weather .falling-decoration:nth-child(3n){left:3%!important}.modal-weather .falling-decoration:nth-child(3n + 1){left:94%!important}.modal-weather .falling-decoration:nth-child(3n + 2){opacity:.28}@keyframes visible-snowfall{0%{transform:translate(0,-20px) rotate(0);opacity:0}8%{opacity:.85}50%{transform:translate(var(--sway),350px) rotate(calc(var(--spin)*.5))}92%{opacity:.85}100%{transform:translate(0,850px) rotate(var(--spin));opacity:0}}@media(prefers-reduced-motion:reduce){.visible-weather,.modal-weather{display:none}}
/* Clip decorative overflow; long letters only scroll vertically. */
#letter{overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
#letter::-webkit-scrollbar{display:none}
#letter .letter-mascot-backdrop{inset:60px 0 40px;transform:none;background-size:500% auto;contain:paint}
#letter .modal-weather,#letter .letter-sparkles{overflow:hidden;contain:paint}
#letter .letter-mascot-badge{max-width:calc(100% - 40px)}