/* The desk around the letter: layered ink, soft paper and a little Halloween. */
body{background-color:#f8f4e9}
.header{position:relative;z-index:5;background:#f9f6edbd;backdrop-filter:blur(12px)}
.hero{position:relative;margin-top:28px;margin-bottom:30px;padding:58px 38px 68px;gap:48px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:10px -14px 0;border-radius:42% 12% 40% 8% / 10% 30% 14% 20%;z-index:-1;background:radial-gradient(ellipse at 75% 20%,#d8cee994 0,transparent 53%),radial-gradient(ellipse at 10% 70%,#bedcce78 0,transparent 65%),#fbf7ea;border:1px solid #e4dfce;rotate:-1deg}
.hero::after{content:"✦ 31 OCT ✦";position:absolute;left:38px;bottom:25px;font:9px monospace;letter-spacing:3px;color:#8a9983}
.hero-copy{position:relative;z-index:1}.hero-description{display:table;background:#fffcf1ba;border:1px solid #d9e1ce;padding:16px 22px 16px 26px;box-shadow:5px 6px 0 #b7cbb328;position:relative;rotate:-1deg;line-height:2.1}
.hero-description::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;border-left:2px dotted #a3b9a1}.hero-description::after{content:"for you ♡";position:absolute;right:12px;bottom:-10px;padding:1px 9px;background:#e8dbc3;font:italic 12px Georgia;color:#7f7564;rotate:4deg}
.hero-tag{position:absolute;right:28px;bottom:-18px;z-index:4;padding:10px 19px;border:1px dashed #a491b7;border-radius:3px;background:#e8e0ef;color:#756289;font:16px var(--serif);rotate:6deg}.hero-tag b{margin-left:15px;color:#bb7e8f}
.ticker{padding:0;overflow:hidden;background:#e2ebdf;border-block:1px dashed #98ad96;rotate:-1deg;min-height:52px;contain:paint}.ticker-track{display:flex;gap:38px;align-items:center;width:max-content;white-space:nowrap;padding:18px 19px;font:12px var(--serif);letter-spacing:2px}.ticker-track i{font-size:12px;color:#bc8551}.motion-ready[data-motion=on] .ticker-track{animation:mail-ticker 45s linear infinite}.ticker:hover .ticker-track{animation-play-state:paused}.ticker-track>span:nth-of-type(2n){color:#71846b}@keyframes mail-ticker{to{transform:translateX(-50%)}}
.heading-aside{display:flex;align-items:center;gap:12px}.heading-aside .section-doodle{order:2;mix-blend-mode:multiply}.section-heading h2{position:relative;display:inline-block}.section-heading h2::after{content:"";position:absolute;left:0;right:28px;bottom:1px;height:9px;background:#d3dfbd7a;z-index:-1;rotate:-1deg}.section-index{padding:6px 9px;background:#e4e9da;border:1px solid #d2d8c8;border-radius:2px;display:table;rotate:-2deg}
.music-section{position:relative;padding:54px 38px 45px;background:linear-gradient(135deg,#eee8f3,#f7eee1);border:1px solid #d7cfdc;border-radius:6px 6px 36px 6px;box-shadow:7px 8px 0 #ddd4df33;margin-bottom:68px;isolation:isolate}.music-section::before{content:"";position:absolute;width:110px;height:26px;top:-13px;right:17%;background:#c5d3bd99;rotate:8deg;border-inline:2px dotted #f8f4e9}.music-section .section-index{background:#e4ddec;border-color:#d5c9df}.music-section .section-heading h2::after{background:#d5c3df72}.music-layout{gap:48px}.record-sleeve{background:#eee0bd;border:1px solid #cdbb9b;box-shadow:7px 8px 0 #c5b7cb45;transform:rotate(-3deg);min-height:330px}.record-sleeve::after{content:"";position:absolute;inset:14px;border:1px solid #9a886544;pointer-events:none}.player{padding:20px 24px;background:#fffcf5aa;border:1px solid #dacece;border-radius:7px;box-shadow:3px 3px 0 #b9adc815}.player h3{color:#51435b}.song-label{color:#81718b}.wave{padding:8px 10px;background:#e8e2ec85;border-radius:6px}.wave i{background:#8b7aa5}.player-hint{font-size:15px}.song-artist{color:#74756a}
.study-room{border:9px solid #fffcf2;outline:1px solid #cdd8c5;box-shadow:8px 9px 0 #b5cdb62e;border-radius:12px;min-height:605px}.room-background{transition:opacity .35s ease;object-position:center 45%}.room-shade{background:linear-gradient(90deg,#163f4b8a,#173d4f78 58%,#204e5659)}.room-top{gap:10px;flex-wrap:wrap}.scene-switcher{display:flex;padding:4px;background:#183c417d;border:1px solid #fff4;border-radius:20px;gap:2px}.scene-switcher button{font-size:10px;color:#fffcf1;padding:7px 12px;border-radius:17px;min-height:30px}.scene-switcher button[aria-pressed=true]{background:#fff8d9;color:#3d6153}.room-fireflies{position:absolute;inset:0;pointer-events:none}.room-fireflies i{position:absolute;left:15%;top:23%;width:4px;height:4px;border-radius:50%;background:#fff8bd;box-shadow:0 0 14px 3px #fff8bd77;opacity:.55}.room-fireflies i:nth-child(2){left:86%;top:31%;animation-delay:-3s!important}.room-fireflies i:nth-child(3){left:72%;top:74%;animation-delay:-6s!important}.room-fireflies i:nth-child(4){left:27%;top:78%;animation-delay:-2s!important}.room-fireflies i:nth-child(5){left:56%;top:10%;animation-delay:-8s!important}.motion-ready[data-motion=on] .room-fireflies i{animation:firefly 9s ease-in-out infinite}.timer-value{text-shadow:0 4px 24px #163b4166}.timer-content{padding:18px 32px;background:#153e432d;border:1px solid #ffffff25;border-radius:16px;backdrop-filter:blur(5px)}.timer-content>p{color:#fff9e8}.study-room.immersive{outline:0;border:0}.room-bottom{font-family:var(--serif);font-size:14px}.room-bottom span:last-child{font:9px monospace;letter-spacing:2px}
.closing{position:relative;max-width:1100px;margin:0 auto 50px;padding:55px 20px 45px;background:radial-gradient(ellipse at center,#dbe5d8aa,transparent 70%)}.closing p{display:table;margin:15px auto;padding:22px 38px;background:repeating-linear-gradient(0deg,transparent 0,transparent 46px,#a8bc9e30 46px,#a8bc9e30 47px),#fffdf4a8;border:1px dashed #a5b798;box-shadow:6px 6px 0 #d8dfcc45;rotate:-1deg}.closing-sticker{width:84px;height:84px;object-fit:cover;border:6px solid #fffdf5;border-radius:50%;position:absolute;left:calc(50% - 280px);top:5px;rotate:-12deg;box-shadow:2px 4px 8px #7c977522}.closing>span{position:absolute;right:18%;top:13px}.is-study-quiet .ticker-track,.is-study-quiet .room-fireflies i{animation-play-state:paused!important}.is-study-quiet .room-fireflies{opacity:.2}
@keyframes firefly{0%,100%{translate:0 0;opacity:.2}50%{translate:8px -18px;opacity:.75}}
@media(max-width:1240px){.hero{padding-inline:24px}.music-section{margin-bottom:60px;padding-inline:30px}.hero::before{inset:5px -6px}.music-layout{gap:32px}}
@media(max-width:900px){.hero{gap:28px}.hero h1{font-size:36px}.hero-description{padding:14px 18px 14px 22px}.music-section{padding:40px 25px}.music-layout{grid-template-columns:minmax(0,.75fr) minmax(0,1fr);gap:25px}.player{padding:17px}.player h3{font-size:24px}.record-sleeve{min-height:300px}.record-sleeve .vinyl{width:210px;height:210px}.room-top{padding:20px}.room-top>span{font-size:11px}.timer-content{margin-top:10px}.closing-sticker{left:15%}}
@media(max-width:620px){.header{height:80px}.hero{margin:14px 16px 26px;padding:28px 14px 58px;gap:48px}.hero::before{inset:0 -2px;border-radius:24px 24px 65px 24px;rotate:0deg}.hero::after{left:18px;bottom:16px;font-size:8px}.hero h1{font-size:clamp(29px,8.5vw,39px);white-space:normal}.hero .spark{display:none}.hero-copy{padding:0 6px}.hero-description{font-size:13px;line-height:2.1;padding:13px 17px 16px 22px}.hero-art{width:83%;margin:0 auto 15px}.hero-tag{font-size:12px;right:0;bottom:-20px;padding:8px 12px}.art-note{font-size:15px;left:-20px}.hand-note{font-size:16px}.hand-note span{font-size:27px;right:-30px}.hero-actions{gap:12px}.hero-actions .button{font-size:12px;padding:14px 17px}.hero-actions .wish-link{font-size:11px}.postscript{font-size:9px}.ticker-track{gap:28px;font-size:10px;padding:14px}.ticker{min-height:45px}.section-heading h2{font-size:26px}.section-heading{margin-bottom:26px}.heading-aside{font-size:11px}.heading-aside .section-doodle{width:40px;height:40px}.music-section{padding:35px 20px;margin:10px 5% 42px}.music-layout{display:block}.record-sleeve{min-height:260px;margin:12px 10px 32px}.record-sleeve .vinyl{width:210px;height:210px}.player h3{font-size:26px}.player{padding:19px 17px}.music-section h2{font-size:24px}.study-section{padding-top:20px}.study-room{border-width:5px;min-height:600px}.room-top{padding:15px 12px;gap:12px}.room-top>span{font-size:10px}.scene-switcher{order:3;width:max-content;margin:0 auto}.scene-switcher button{padding:6px 15px}.timer-content{padding:16px 7px;width:calc(100% - 26px);margin:10px auto 15px}.timer-value{font-size:80px;margin-top:20px}.room-bottom{font-size:11px}.closing{margin-bottom:20px;padding:50px 20px 30px}.closing p{font-size:19px;padding:22px 15px;background-size:auto}.closing-sticker{width:65px;height:65px;left:10%;top:2px}.closing>span{right:12%;top:3px}.closing .wish-link{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.source-label{display:flex;flex-direction:column;gap:5px;font-size:9px;letter-spacing:1px;color:#85728e}.source-label select{font:11px inherit;max-width:140px;background:#faf5fd;border:1px solid #c9bbd3;color:#6c5979;padding:9px 6px;border-radius:4px}.player-buttons{gap:15px;flex-wrap:wrap}