:root{color-scheme:light;--ink:#493832;--muted:#756258;--coral:#aa493e;--coral-dark:#923e34;--paper:#fffdf8;--cream:#fbf5e9;--border:#e9ded0;--mint:#dcefe6;--shadow:0 14px 35px rgba(112,75,44,.08)}
*{box-sizing:border-box}html{background:#fbf7ef}body{margin:0;color:var(--ink);font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:16px;line-height:1.6}[hidden]{display:none!important}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:200;background:white;padding:.7rem}.topbar{height:64px;display:flex;align-items:center;gap:.8rem;padding:0 max(24px,calc((100vw - 1280px)/2));border-bottom:1px solid #eee6db;background:#fffefa;color:#b8a99b;font-size:14px}.brand{color:#3c7767;font-weight:850}.product-name{font-weight:750;color:var(--ink)}.page{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:48px 0 80px}.narrow{max-width:760px}.eyebrow{margin:0 0 8px;color:#b36252;font-size:.78rem;letter-spacing:.08em;font-weight:850}.muted{color:var(--muted)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(2rem,4vw,3rem);line-height:1.2;letter-spacing:-.045em}h2{font-size:1.25rem;line-height:1.35;letter-spacing:-.025em}p{margin-bottom:1rem}.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.7rem 1.15rem;border:1px solid transparent;border-radius:12px;font-weight:800;text-align:center;transition:transform .18s,background .18s}.button:hover:not(:disabled){transform:translateY(-2px)}.button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #6cae9b;outline-offset:3px}.primary{background:var(--coral);color:white;box-shadow:0 7px 15px rgba(177,79,65,.18)}.primary:hover:not(:disabled){background:var(--coral-dark)}.secondary{background:#fffdfa;color:var(--ink);border-color:#e6d9cb}.large{min-height:54px;padding:.9rem 1.4rem}.small{min-height:38px;padding:.45rem .8rem;font-size:.85rem}.panel{background:var(--paper);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);padding:28px}.page-heading{margin-bottom:26px}.page-heading h1{margin-bottom:.5rem}.page-heading p:not(.eyebrow){color:var(--muted)}.messages{max-width:900px;margin:16px auto;padding:0 20px}.messages p,.form-error{color:#9e4037;background:#fff0e9;border:1px solid #f0cfc1;border-radius:10px;padding:.7rem 1rem}.errorlist{color:#9e4037;padding-left:1.2rem;margin:.3rem 0}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}.field label,.join-form>label{font-weight:800}input:not([type=checkbox]):not([type=radio]),textarea,select{width:100%;border:1px solid #dcccc0;border-radius:11px;background:white;padding:.8rem .9rem;color:var(--ink)}textarea{resize:vertical;min-height:150px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.create-form>.button,.join-form>.button{width:100%}.join-form{display:grid;gap:14px}.room-list{margin-top:42px}.room-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:white;border:1px solid var(--border);border-radius:15px;padding:18px;margin-top:12px}.room-card small{display:block;color:var(--muted)}
.welcome-hero{position:relative;width:min(1360px,calc(100% - 48px));margin:30px auto 0;border-radius:26px;overflow:hidden;background:#fbf1dd;min-height:490px;display:flex;align-items:center}.welcome-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.welcome-copy{position:relative;z-index:1;width:51%;padding:60px 0 60px clamp(32px,6vw,90px)}.welcome-copy h1{font-size:clamp(2.2rem,4.3vw,4rem);margin:10px 0 18px}.welcome-copy h1 em{font-style:normal;color:#b3594e}.welcome-copy>p:not(.eyebrow){font-size:1.06rem;color:#6c594d}.welcome-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.welcome-bottom{width:min(1280px,calc(100% - 64px));margin:24px auto;display:flex;align-items:center;gap:14px;color:#988476}.welcome-bottom p{margin:0}.postmark{font-size:.7rem;letter-spacing:.14em;font-weight:850;color:#bc806b}
.host-page{max-width:1180px}.host-heading,.section-title,.finish-panel{display:flex;align-items:center;justify-content:space-between;gap:20px}.host-heading{margin-bottom:28px}.host-heading h1{margin-bottom:8px}.host-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:20px}.share-content{display:flex;justify-content:space-between;gap:16px;align-items:center}.room-code{display:block;font-size:2.05rem;letter-spacing:.14em;color:#b35449}.share-url{font-size:.78rem;overflow-wrap:anywhere;color:var(--muted)}.qr{width:132px;height:132px;padding:6px;border:1px solid var(--border);border-radius:10px;background:white}.pill,.topic-pill{display:inline-block;border-radius:999px;background:#e7f3e9;padding:.35rem .75rem;color:#54775c;font-size:.78rem;font-weight:800}.pill.neutral{background:#f4eee7;color:#816d60}.progress-number{font-size:2rem;margin:12px 0 8px}.progress-number strong{color:var(--coral)}.progress-number small{font-size:.9rem;color:var(--muted);margin-left:.5rem}.progress-track{height:9px;background:#f1e8df;border-radius:99px;overflow:hidden;margin-bottom:22px}.progress-track span{display:block;width:0;height:100%;background:#8bbca0;transition:width .3s}.progress-panel form>.button{width:100%}.hint{font-size:.85rem;color:var(--muted);margin:12px 0 0}.participants-panel{margin-top:20px}.participants{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0}.participant{border:1px solid #eadfd1;border-radius:12px;padding:.5rem .7rem;background:#faf5ed;font-size:.84rem}.participant.done{background:#eaf4e9;border-color:#d7e9d8}.letters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.letter-preview{border:1px solid var(--border);background:white;border-radius:14px;padding:14px}.letter-preview summary{font-weight:800;cursor:pointer}.letter-preview p{white-space:pre-wrap;overflow-wrap:anywhere;margin:.7rem 0}.letter-preview small{color:var(--muted)}.finish-panel{margin-top:28px;padding:22px 4px}.finish-panel h2,.finish-panel p{margin:0}.finish-panel p{color:var(--muted);font-size:.9rem}
.student-page{max-width:1000px}.student-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}.student-heading h1{font-size:2rem;margin:0}.write-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:32px;align-items:start}.letter-intro{padding:30px 8px;position:sticky;top:calc(var(--classroom-play-height, 84px) + 20px)}.letter-intro h2{font-size:2rem}.letter-intro>p:last-child{color:var(--muted)}.letter-form{padding:32px}.field-number{display:inline-grid;place-items:center;background:#f6e5d7;color:#a75a4d;border-radius:50%;width:25px;height:25px;font-size:.8rem;margin-right:5px}.self-check,.gift-select{border:0;padding:0;margin:30px 0}.self-check legend,.gift-select legend{font-weight:850;margin-bottom:12px}.self-check label{display:flex;align-items:center;gap:10px;padding:.45rem 0}.self-check input{width:19px;height:19px;accent-color:#83b394}.gift-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.gift-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:12px 4px;border:2px solid #eee5dc;border-radius:15px;background:#fff;font-size:.95rem;font-weight:750;cursor:pointer}.gift-card:has(input:checked){border-color:#e88978;background:#fff5ef}.gift-card input{position:absolute;top:8px;left:8px;accent-color:#ce6d5d}.gift-picture{display:block;width:64px;height:64px}.privacy-hint{color:var(--muted);font-size:.84rem}.letter-form>.button{width:100%}.student-state,.delivered-view{text-align:center;max-width:600px;margin:40px auto;padding:50px 28px}.student-state p,.delivered-view>p:not(.eyebrow){color:var(--muted)}.center-illustration,.arrival-envelope{font-size:5rem;color:#db8d78;line-height:1.2;margin-bottom:16px}.arrival-envelope{position:relative}.arrival-envelope span{font-size:1.7rem;color:#efbb55;position:absolute}.received-letter{text-align:left;background:#fffaf0;border:1px solid #eee0c8;border-radius:16px;padding:28px;margin-top:25px;white-space:pre-wrap;overflow-wrap:anywhere}.received-from{font-size:.85rem;color:#ad6558;font-weight:800}.received-body{min-height:100px}.received-gift{display:flex;gap:12px;align-items:center;border-top:1px dashed #e6d3bb;margin-top:25px;padding-top:15px}.received-gift small,.received-gift strong{display:block}.received-gift small{color:var(--muted)}
.display-page{min-height:calc(100vh - 64px);text-align:center;padding:5vh 20px;background:linear-gradient(#fffaf0,#f5ede0)}.display-page h1{font-size:clamp(2.7rem,6vw,5rem)}.display-topic{color:var(--muted);font-size:1.25rem}.display-count{margin:40px auto;font-size:3rem}.display-count strong{color:var(--coral)}.display-count p{font-size:1.1rem;color:var(--muted)}.envelope-stage{display:flex;justify-content:center;gap:4vw;font-size:clamp(2rem,6vw,5rem);color:#dd8d78}.envelope-stage.moving span{animation:fly 2s ease-in-out infinite alternate}.envelope-stage.moving span:nth-child(even){animation-delay:.35s}.delivery-overlay{position:fixed;inset:0;z-index:1600;display:grid;place-content:center;text-align:center;color:#865443;background:rgba(255,247,229,.96);font-size:1.3rem;font-weight:850}.delivery-animation{display:flex;gap:1rem;font-size:3rem;color:#e47e6c}.delivery-animation span{animation:fly 1s ease-in-out infinite alternate}.delivery-animation span:nth-child(even){animation-delay:.2s}@keyframes fly{from{transform:translate(-20px,15px) rotate(-12deg)}to{transform:translate(20px,-18px) rotate(12deg)}}
@media(max-width:760px){.topbar{height:58px;padding:0 18px}.page{width:calc(100% - 32px);padding:32px 0 60px}.panel{padding:22px}.welcome-hero{width:calc(100% - 24px);display:flex;flex-direction:column;align-items:stretch;min-height:0;margin-top:12px}.welcome-art{position:static;width:100%;height:auto;object-fit:contain}.welcome-copy{width:auto;padding:24px 22px 28px}.welcome-copy h1{font-size:2.25rem}.welcome-actions{display:grid}.welcome-bottom{width:calc(100% - 40px);font-size:.8rem;flex-wrap:wrap}.host-layout,.write-layout{grid-template-columns:1fr}.host-heading{align-items:flex-start;flex-direction:column}.share-content{align-items:start}.qr{width:100px;height:100px}.letter-intro{position:static;padding:0}.letter-intro h2{font-size:1.7rem}.student-heading{align-items:flex-start;flex-direction:column}.student-heading h1{font-size:1.8rem}.letters{grid-template-columns:1fr}.finish-panel{align-items:flex-start;flex-direction:column}.display-page{min-height:calc(100vh - 58px)}}
@media(max-width:400px){.form-grid{grid-template-columns:1fr;gap:0}.gift-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.share-content{flex-wrap:wrap}.welcome-copy h1{font-size:2rem}.progress-number small{display:block;margin-left:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Delivery is a shared moment: envelopes travel across the classroom post office. */
.delivery-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 18% 15%,#ffe7bf 0,transparent 36%),radial-gradient(circle at 85% 75%,#cceee0 0,transparent 38%),#fff7e9}
.delivery-kicker{margin:0 0 12px;color:#ad6656;font-size:.82rem;letter-spacing:.12em;font-weight:850}
.delivery-title{margin:18px 0 2px;color:#805046;font-size:clamp(1.5rem,4vw,2.3rem);font-weight:900}
.delivery-subtitle{margin:0;color:#9b7769;font-size:1rem}
.delivery-scene,.envelope-stage.delivery-scene{position:relative;display:block;width:min(720px,90vw);aspect-ratio:16/9;margin:0 auto;overflow:hidden;border:8px solid #fff9ee;border-radius:28px;background:#f4e0c1 url("hero.8f23c8449763.webp") center/cover no-repeat;box-shadow:0 22px 60px #b6846840}
.flying-envelope{position:absolute;display:block;width:clamp(43px,9vw,82px);height:clamp(30px,6.3vw,58px);border:2px solid #dda89c;border-radius:7px;background:#fff5e6;box-shadow:0 5px 10px #8e5a4c35;z-index:2}
.flying-envelope::before{content:"";position:absolute;inset:0 0 33%;background:#f4c0b0;clip-path:polygon(0 0,100% 0,50% 100%)}
.flying-envelope::after{content:"✦";position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e88075;color:#fff5de;font-size:12px;line-height:1}
.mail-one{left:12%;top:52%;transform:rotate(-12deg)}.mail-two{left:38%;top:32%;transform:rotate(8deg);background:#e5f3e9}.mail-three{left:65%;top:61%;transform:rotate(-4deg);background:#fff0c8}
.sparkle{position:absolute;color:#fff7ce;text-shadow:0 2px 8px #df9d3b;font-size:clamp(26px,5vw,48px);z-index:3}.sparkle-one{left:12%;top:17%}.sparkle-two{left:51%;top:14%}.sparkle-three{right:10%;top:65%}
.moving .mail-one{animation:mail-one 2.8s ease-in-out infinite}.moving .mail-two{animation:mail-two 3s ease-in-out .2s infinite}.moving .mail-three{animation:mail-three 3.2s ease-in-out .4s infinite}.moving .sparkle{animation:twinkle .9s ease-in-out infinite alternate}.moving .sparkle-two{animation-delay:.3s}
.confetti{position:absolute;inset:0;z-index:4;pointer-events:none}.confetti i{position:absolute;top:-10%;width:9px;height:15px;background:#ef9a83;border-radius:4px;animation:confetti-fall 2.6s linear infinite}.confetti i:nth-child(4n+2){background:#82bfaa;animation-delay:.5s}.confetti i:nth-child(4n+3){background:#f6cb70;animation-delay:1s}.confetti i:nth-child(4n){background:#bca4d4;animation-delay:1.5s}.confetti i:nth-child(1){left:8%}.confetti i:nth-child(2){left:16%}.confetti i:nth-child(3){left:24%}.confetti i:nth-child(4){left:32%}.confetti i:nth-child(5){left:40%}.confetti i:nth-child(6){left:48%}.confetti i:nth-child(7){left:56%}.confetti i:nth-child(8){left:64%}.confetti i:nth-child(9){left:72%}.confetti i:nth-child(10){left:80%}.confetti i:nth-child(11){left:88%}.confetti i:nth-child(12){left:95%}
@keyframes mail-one{0%,100%{transform:translate(0,0) rotate(-12deg)}50%{transform:translate(80px,-50px) rotate(12deg)}}
@keyframes mail-two{0%,100%{transform:translate(0,0) rotate(8deg)}50%{transform:translate(65px,38px) rotate(-12deg)}}
@keyframes mail-three{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(-55px,-50px) rotate(12deg)}}
@keyframes twinkle{from{opacity:.4;transform:scale(.65) rotate(-12deg)}to{opacity:1;transform:scale(1.2) rotate(12deg)}}
@keyframes confetti-fall{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(55vh) rotate(550deg);opacity:0}}
.delivered-view[data-game-result-style]{max-height:none!important;overflow:visible!important}
.delivered-view [data-open-letter][hidden]{display:none!important}

/* A letter is a little journey: write, choose a gift, seal, and receive. */
.student-page .letter-intro{padding:0;top:calc(var(--classroom-play-height,84px) + 20px)}
.intro-postcard{position:relative;display:flex;align-items:flex-end;justify-content:space-between;aspect-ratio:16/10;margin-bottom:25px;padding:18px;border:6px solid #fffaf0;border-radius:24px;background:#f4e2c5 url("hero.8f23c8449763.webp") 72% center/cover no-repeat;box-shadow:0 12px 30px #ad826d30;color:#fff9eb;font-weight:850;text-shadow:0 2px 8px #745a4a}
.intro-postcard span:first-child{font-size:1.7rem;color:#fff5c6}
.intro-postcard span:last-child{font-size:.72rem;letter-spacing:.08em;background:#815c4e88;border-radius:99px;padding:.25rem .6rem}
.letter-journey{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:22px 0 0}
.letter-journey li{display:flex;align-items:center;gap:5px;padding:5px 8px;color:#918175;background:#f3ede4;border-radius:99px;font-size:.75rem;font-weight:800}
.letter-journey li span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e7ded2}
.letter-journey li[aria-current=step]{background:#f6e0d4;color:#9f5043}
.letter-journey li[aria-current=step] span{background:#c96657;color:#fff}
.letter-form{position:relative;overflow:hidden;background:#fffdf8;border:1px solid #e8d9ca;box-shadow:0 18px 45px #9e715a18}
.letter-form:before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:repeating-linear-gradient(125deg,#e39582 0 14px,#fff8eb 14px 25px,#99c4b1 25px 39px,#fff8eb 39px 50px)}
.step-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.step-heading h2{font-size:clamp(1.35rem,2vw,1.7rem);margin:0;outline:none}
.step-kicker{margin:0 0 5px;color:#b66654;font-size:.76rem;font-weight:900;letter-spacing:.08em}
.step-copy{color:#78675b}
.postage-mark{flex:none;display:grid;place-items:center;width:54px;height:54px;line-height:1;color:#bd705d;background:#fae5d9;border:2px dashed #dda895;border-radius:10px;font-size:1.5rem;transform:rotate(6deg)}
.postage-mark small{font-size:.48rem;letter-spacing:.1em}
.postage-mark.mint{background:#e4f1e8;color:#6d9c80;border-color:#a6c8b1}
.writing-paper{position:relative;padding:22px 20px 3px;background:repeating-linear-gradient(#fffefa 0 37px,#f6eee2 38px 39px);border:1px solid #eee0ce;border-radius:14px;box-shadow:0 6px 15px #b88a6b12}
.writing-paper:before{content:"";position:absolute;left:9px;top:0;bottom:0;width:1px;background:#f2d1c3}
.writing-paper .field{position:relative}
.writing-paper input,.writing-paper textarea{background:#ffffffdb!important;border-color:#e6d7c8!important}
.writing-paper textarea{line-height:1.8;min-height:170px}
.step-primary{width:100%}
.step-actions{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:stretch;margin-top:24px}
.step-actions .button{min-width:0}
.student-page .self-check{padding:20px;background:#f5f6ed;border-radius:16px}
.student-page .self-check legend{padding:0 5px}
.student-page .gift-select{margin-top:22px}
.gift-card{transition:transform .18s,border-color .18s,box-shadow .18s}
.gift-card:hover{transform:translateY(-3px);box-shadow:0 7px 14px #a5786030}
.gift-card:has(input:focus-visible){outline:3px solid #6cae9b;outline-offset:3px}
.review-letter{padding:24px;background:#fffaf0;border:1px solid #ecdcc6;border-radius:15px;box-shadow:0 8px 20px #a7775915;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere}
.review-letter p{margin:0 0 1.2rem}.review-letter p:nth-child(2){min-height:84px}
.review-gift,.received-gift{display:flex;align-items:center;gap:12px;border-top:1px dashed #dfcbb8;padding-top:14px}
.review-gift .gift-picture,.received-gift .gift-picture{width:60px;height:60px;flex:none}
.review-gift small,.review-gift strong{display:block}.review-gift small{color:var(--muted)}
.text-button{display:block;margin:12px auto 0;padding:.6rem;border:0;background:transparent;color:#9b4f43;text-decoration:underline;font-weight:800}
.edit-letter{margin-top:12px}
.waiting-illustration{position:relative;display:grid;place-items:center;max-width:440px;aspect-ratio:16/8;margin:0 auto 24px;border:6px solid #fff8ec;border-radius:20px;background:#f7e5cc url("hero.8f23c8449763.webp") center/cover;box-shadow:0 10px 24px #aa80682b}
.waiting-mail{display:grid;place-items:center;width:74px;height:62px;background:#fff7ea;border-radius:12px;color:#d86f60;font-size:2.8rem;box-shadow:0 8px 16px #87654e44;animation:waiting-bob 2.4s ease-in-out infinite}
.waiting-sparkle{position:absolute;left:calc(50% + 44px);top:24%;font-size:2rem;color:#fff6c4;text-shadow:0 2px 6px #ad8453;animation:twinkle 1s ease-in-out infinite alternate}
@keyframes waiting-bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(5deg)}}
.arrival-envelope{position:relative;width:190px;height:150px;margin:0 auto 24px;font-size:inherit;color:inherit}
.received-letter:not([hidden]){animation:letter-arrives .55s ease both}
@keyframes letter-arrives{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.send-overlay{position:fixed;inset:0;z-index:1601;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;background:radial-gradient(circle at 15% 18%,#ffe7c5 0,transparent 35%),radial-gradient(circle at 85% 80%,#d2eee3 0,transparent 38%),#fff7e9}
.seal-scene{position:relative;width:min(1000px,88vw,105vh);aspect-ratio:16/9;overflow:hidden;border:8px solid #fff9ee;border-radius:26px;background:#f4e0c1 url("hero.8f23c8449763.webp") center/cover;box-shadow:0 22px 55px #a76e4b35}
.seal-scene:after{content:"";position:absolute;inset:0;background:#fff7e859}
.seal-gift{position:absolute;z-index:3;left:60%;top:18%;width:clamp(45px,8vw,70px);height:clamp(45px,8vw,70px);filter:drop-shadow(0 4px 4px #805b4e35)}
.seal-star{position:absolute;z-index:5;color:#fff6be;text-shadow:0 2px 7px #a7743e;font-size:2.2rem}
.seal-star-one{left:20%;top:23%}.seal-star-two{right:20%;top:40%}
.send-overlay.is-playing .seal-letter{animation:seal-paper 2.3s ease forwards}
.send-overlay.is-playing .seal-gift{animation:seal-gift 2.1s ease forwards}
.send-overlay.is-playing .seal-star{animation:twinkle 1s ease-in-out infinite alternate}
.animation-skip{margin-top:18px;padding:.65rem 1rem;min-height:44px;border:1px solid #dfc5b6;border-radius:99px;background:#fffdf6;color:#805d50;font-weight:800}
@media(max-width:760px){
  .intro-postcard{aspect-ratio:16/5;margin-bottom:16px;border-width:4px;padding:10px}
  .student-page .letter-intro h2{font-size:1.55rem}.student-page .letter-intro>p:last-of-type{margin-bottom:10px}
  .letter-journey{margin:10px 0 0}.write-layout{gap:20px}.letter-form{padding:24px}
  .writing-paper{padding:18px 14px 1px}.writing-paper textarea{min-height:145px}
}
@media(max-width:400px){
  .letter-form{padding:20px}.step-actions{grid-template-columns:1fr}
  .step-actions .secondary{order:2}.step-actions .primary{order:1}
  .student-page .self-check{padding:16px}.self-check label{gap:8px;font-size:.9rem}
  .student-state,.delivered-view{padding:32px 20px}
}

/* Envelopes cross the classroom; a new one lands before the child opens it. */
.delivery-scene{--mail-flight:min(68vw,510px)}
.delivery-scene .mail-one{left:0;top:53%}
.delivery-scene .mail-two{left:-8%;top:30%}
.delivery-scene .mail-three{left:-16%;top:66%}
.moving .mail-one{animation:post-flight 3.3s ease-in-out infinite}
.moving .mail-two{animation:post-flight 3.5s ease-in-out .35s infinite}
.moving .mail-three{animation:post-flight 3.7s ease-in-out .7s infinite}
@keyframes post-flight{
  0%{opacity:0;transform:translate(-10px,30px) scale(.65) rotate(-16deg)}
  12%{opacity:1}
  55%{opacity:1;transform:translate(calc(var(--mail-flight) * .55),-30px) scale(1) rotate(10deg)}
  85%{opacity:1}
  100%{opacity:0;transform:translate(var(--mail-flight),15px) scale(.68) rotate(-8deg)}
}
.delivered-view{scroll-margin-top:calc(var(--classroom-play-height,84px) + 12px)}
.arrival-envelope{height:170px}
.arrival-envelope.is-arriving{animation:post-arrival 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes post-arrival{0%{opacity:0;transform:translate(calc(-1 * min(55vw,430px)),-120px) rotate(-22deg) scale(.5)}35%{opacity:1}75%{transform:translate(12px,-6px) rotate(4deg) scale(1.03)}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}

/* The opening uses the shared activity-worlds poster and accessible controls. */

/* Keep the shared delivery scene inside the classroom projection. */
.display-page{padding:clamp(12px,2vh,22px) 20px 24px}
.display-page h1{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:.35rem}
.display-topic{font-size:1rem;margin-bottom:.5rem}
.display-count{margin:12px auto 16px;font-size:2.4rem;line-height:1.15}
.display-count p{margin:.45rem 0 0}
.display-page .envelope-stage.delivery-scene{width:min(640px,90vw)}
.display-page>.button{margin-top:16px}
.envelope-stage.moving .mail-one{animation:post-flight 3.3s ease-in-out infinite}
.envelope-stage.moving .mail-two{animation:post-flight 3.5s ease-in-out .35s infinite}
.envelope-stage.moving .mail-three{animation:post-flight 3.7s ease-in-out .7s infinite}
.envelope-stage.moving .sparkle{animation:twinkle 1s ease-in-out infinite alternate}
@media(max-height:750px){
  .display-page h1{font-size:2.4rem}
  .display-page .envelope-stage.delivery-scene{width:min(520px,82vw)}
}

/* A child's desk: the chosen stationery stays with the letter. */
.student-mode .student-page{width:min(1320px,calc(100% - 48px));max-width:none}
.student-mode .write-layout{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)}
.paper-picker{border:0;padding:0;margin:0 0 18px}
.paper-picker legend{font-weight:850;margin-bottom:10px;font-size:.9rem}
.paper-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.paper-option{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 3px;border:2px solid #f0e7dc;border-radius:12px;background:#fff;font-size:.8rem;font-weight:800;text-align:center;line-height:1.3;cursor:pointer}
.paper-option input{position:absolute;opacity:0}
.paper-option:has(input:checked){border-color:#ce7463;background:#fff4eb;box-shadow:0 3px 10px #b97e5d20}
.paper-option:has(input:focus-visible){outline:3px solid #6cae9b;outline-offset:3px}
.paper-swatch{display:block;width:100%;max-width:62px;height:33px;border:1px solid #e3d5c7;border-radius:4px;box-shadow:0 2px 4px #9f867725}
.swatch-cream{background:repeating-linear-gradient(#fff9e8 0 9px,#f0dec7 10px 11px)}
.swatch-sky{background:repeating-linear-gradient(#e6f6fa 0 9px,#c9e4ed 10px 11px)}
.swatch-peach{background:repeating-linear-gradient(#fff0eb 0 9px,#f1d4ce 10px 11px)}
.swatch-lavender{background:repeating-linear-gradient(#f2efff 0 9px,#ded8f5 10px 11px)}
.writing-paper,.review-letter,.received-letter{--paper-bg:#fffaf0;--paper-line:#e9d9c5;--paper-accent:#d99a77}
[data-paper=sky]{--paper-bg:#edf9fb;--paper-line:#c8e4eb;--paper-accent:#8bbfc9}
[data-paper=peach]{--paper-bg:#fff2ec;--paper-line:#f0d4ca;--paper-accent:#e8a194}
[data-paper=lavender]{--paper-bg:#f5f1ff;--paper-line:#dfd7f0;--paper-accent:#aea1d4}
.writing-paper{background:var(--paper-bg);border:1px solid var(--paper-line);border-radius:8px;padding:24px 24px 12px;box-shadow:0 9px 22px #95735320}
.writing-paper:before{left:14px;background:var(--paper-accent);opacity:.38}
.paper-topline{display:flex;justify-content:space-between;align-items:center;color:var(--paper-accent);font-family:Georgia,serif;font-weight:800;letter-spacing:.03em;margin:0 0 18px}
.paper-topline span:last-child{font-size:1.8rem;line-height:1}
.writing-paper .field{margin-bottom:20px}
.writing-paper .field label{font-size:.88rem;color:#795e50}
.writing-paper input:not([type=checkbox]):not([type=radio]),.writing-paper textarea{border:0!important;border-bottom:1px dashed var(--paper-accent)!important;border-radius:0!important;padding:.55rem .3rem!important;background:transparent!important;box-shadow:none;color:#3e302b;line-height:1.9}
.writing-paper textarea{min-height:190px;line-height:2rem;background:repeating-linear-gradient(transparent 0 31px,var(--paper-line) 31px 32px)!important;background-position:0 9px!important}
.writing-paper input:focus-visible,.writing-paper textarea:focus-visible{outline:2px solid #6cae9b;outline-offset:4px;background-color:#ffffff70!important}
.review-letter,.received-letter{background-color:var(--paper-bg);border-color:var(--paper-line)}
.gift-group{margin:22px 0 28px}
.gift-group h3{font-size:1rem;margin:0 0 12px;color:#745c50}
.gift-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.gift-card{padding:12px 4px 10px;background:linear-gradient(#fff,#fffaf4);border-radius:16px;min-width:0}
.gift-card .gift-picture{width:74px;height:74px;filter:drop-shadow(0 3px 3px #b7958540)}
.gift-card span{line-height:1.3;word-break:keep-all}
.gift-card:has(input:checked) .gift-picture{animation:gift-pop .4s ease}
@keyframes gift-pop{0%{transform:scale(.8) rotate(-8deg)}70%{transform:scale(1.15) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
.post-friend{display:block;position:absolute;aspect-ratio:687/572;background-image:url("post-friends.214c1eb05105.webp");background-size:200% 200%;background-repeat:no-repeat;filter:drop-shadow(0 10px 9px #62432455)}
.post-friend-fox{background-position:0 0}.post-friend-rabbit{background-position:100% 0}.post-friend-bear{background-position:0 100%}.post-friend-bird{background-position:100% 100%}
.intro-friend{width:36%;right:2%;bottom:-3%;z-index:1;animation:intro-friend 2.8s ease-in-out infinite}
@keyframes intro-friend{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(4deg)}}
.student-entry{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);align-items:center;gap:clamp(24px,4vw,58px);width:min(1200px,calc(100% - 48px));max-width:none;min-height:calc(100vh - 64px)}
.student-entry .page-heading h1{font-size:clamp(2rem,3vw,2.7rem)}
.join-art{position:relative;overflow:hidden;aspect-ratio:16/10;border:7px solid #fff8ec;border-radius:26px;background:#f6e6ce;box-shadow:0 16px 35px #9d72512a}
.join-art>img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.join-friend{width:38%;right:1%;bottom:-4%;animation:intro-friend 2.8s ease-in-out infinite}
@media(max-width:760px){.student-entry{display:flex;flex-direction:column;align-items:stretch;gap:14px;width:calc(100% - 32px);min-height:0;padding:18px 0 40px}.student-entry .page-heading{margin-bottom:14px}.student-entry .page-heading h1{font-size:1.85rem;margin:.1rem 0 .35rem}.student-entry .page-heading p{margin-bottom:.45rem}.student-entry .panel{padding:18px}.join-art{height:104px;aspect-ratio:auto;border-width:4px;border-radius:17px}.join-friend{width:105px;bottom:-10px}}

/* The mailroom is a full-screen stage, with an animated fallback for video failures. */
.display-mode{overflow:hidden;background:#edcda3}
.display-mode .topbar{display:none}
.display-page{position:relative;width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden;padding:0;text-align:left;background:#e9c69f}
.cinema-world,.cinema-live,.cinema-film{position:absolute;inset:0;width:100%;height:100%}
.cinema-world{overflow:hidden;background:#e9c69f url("mailroom-stage.5e6db70360f9.webp") center/cover no-repeat}
.cinema-film{z-index:3;display:none;object-fit:cover}
.cinema-world.film-playing .cinema-film{display:block}
.cinema-world.film-playing .cinema-live{visibility:hidden}
.cinema-live{overflow:hidden;transform:translateZ(0)}
.cinema-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 45% 25%,#fff6b740,transparent 53%),linear-gradient(0deg,#84552d30,transparent 42%)}
.scene-fox{left:3%;bottom:2%;width:26%;z-index:4;transform-origin:50% 90%}
.scene-rabbit{left:30%;bottom:2%;width:24%;z-index:4;transform-origin:50% 90%}
.scene-bear{right:13%;bottom:2%;width:24%;z-index:4;transform-origin:50% 90%}
.scene-bird{right:2%;top:18%;width:18%;z-index:5;transform-origin:50% 50%}
.moving .scene-fox{animation:actor-fox 2.1s ease-in-out infinite}
.moving .scene-rabbit{animation:actor-rabbit 1.8s ease-in-out .2s infinite}
.moving .scene-bear{animation:actor-bear 2.5s ease-in-out .4s infinite}
.moving .scene-bird{animation:actor-bird 3.2s ease-in-out infinite}
@keyframes actor-fox{0%,100%{transform:translate(0,0) rotate(-4deg)}35%{transform:translate(2%,-4%) rotate(5deg)}70%{transform:translate(-1%,0) rotate(-3deg)}}
@keyframes actor-rabbit{0%,100%{transform:translate(0,0) rotate(3deg)}35%{transform:translate(-3%,-9%) rotate(-6deg)}70%{transform:translate(1%,0) rotate(4deg)}}
@keyframes actor-bear{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(3%,-5%) rotate(6deg)}}
@keyframes actor-bird{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(-12%,-12%) rotate(8deg)}}
.motion-mail{position:absolute;left:-14%;top:38%;z-index:6;display:none;width:clamp(38px,7vw,104px);aspect-ratio:1.45;border:2px solid #d9a398;border-radius:8px;background:#fff9ea;box-shadow:0 6px 15px #825f5060}
.moving .motion-mail{display:block;animation:mail-journey 4.8s cubic-bezier(.25,.5,.4,1) infinite}
.motion-mail-two{top:20%;background:#e7f7ed}.motion-mail-three{top:51%;background:#fff0bd}.motion-mail-four{top:31%;background:#ebf2ff}.motion-mail-five{top:60%;background:#ffebed}
.moving .motion-mail-two{animation-delay:1s;animation-duration:5.2s}.moving .motion-mail-three{animation-delay:1.9s;animation-duration:4.5s}.moving .motion-mail-four{animation-delay:3s;animation-duration:4.9s}.moving .motion-mail-five{animation-delay:3.8s;animation-duration:5.4s}
@keyframes mail-journey{0%{left:-15%;opacity:0;transform:translateY(25px) rotate(-20deg) scale(.65)}8%{opacity:1}50%{transform:translateY(-45px) rotate(11deg) scale(1.1)}92%{opacity:1}100%{left:110%;opacity:0;transform:translateY(10px) rotate(-9deg) scale(.7)}}
.motion-star{position:absolute;z-index:5;font:normal 800 clamp(28px,4vw,60px)/1 system-ui;color:#fff7bd;text-shadow:0 2px 12px #efb342;opacity:.7}
.motion-star-one{left:18%;top:16%}.motion-star-two{left:48%;top:9%}.motion-star-three{right:26%;top:14%}.motion-star-four{right:8%;top:51%}
.moving .motion-star{animation:twinkle 1s ease-in-out infinite alternate}.moving .motion-star-two{animation-delay:.25s}.moving .motion-star-three{animation-delay:.5s}.moving .motion-star-four{animation-delay:.75s}
.motion-confetti{position:absolute;inset:0;z-index:7;overflow:hidden;pointer-events:none}
.motion-confetti i{position:absolute;top:-8%;left:calc((var(--n) * 6%) + 1%);width:clamp(5px,.7vw,10px);height:clamp(9px,1.1vw,17px);background:#ffca64;border-radius:4px;opacity:0}
.motion-confetti i:nth-child(4n+1){background:#f58d91}.motion-confetti i:nth-child(4n+2){background:#96d3bb}.motion-confetti i:nth-child(4n+3){background:#a6b7ea}
.motion-confetti i:nth-child(1){--n:1}.motion-confetti i:nth-child(2){--n:2}.motion-confetti i:nth-child(3){--n:3}.motion-confetti i:nth-child(4){--n:4}.motion-confetti i:nth-child(5){--n:5}.motion-confetti i:nth-child(6){--n:6}.motion-confetti i:nth-child(7){--n:7}.motion-confetti i:nth-child(8){--n:8}.motion-confetti i:nth-child(9){--n:9}.motion-confetti i:nth-child(10){--n:10}.motion-confetti i:nth-child(11){--n:11}.motion-confetti i:nth-child(12){--n:12}.motion-confetti i:nth-child(13){--n:13}.motion-confetti i:nth-child(14){--n:14}.motion-confetti i:nth-child(15){--n:15}.motion-confetti i:nth-child(16){--n:16}
.moving .motion-confetti i{animation:cinema-confetti 3.8s linear infinite;animation-delay:calc(var(--n) * -.21s)}
@keyframes cinema-confetti{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:.95}90%{opacity:.95}100%{transform:translate(35px,105vh) rotate(650deg);opacity:0}}
.display-info{position:absolute;z-index:10;top:clamp(18px,3vw,48px);left:clamp(18px,3vw,48px);max-width:min(500px,47vw);padding:clamp(16px,2vw,30px) clamp(20px,2.5vw,36px);border:2px solid #fff9e8d9;border-radius:24px;background:#fffaf0e8;box-shadow:0 12px 38px #74502c35;backdrop-filter:blur(8px)}
.display-info .eyebrow{margin:0 0 7px}.display-info h1{font-size:clamp(2rem,3.3vw,3.4rem);margin:0 0 10px;line-height:1.17}
.display-info .display-topic{font-size:clamp(.9rem,1.3vw,1.2rem);margin:0;overflow-wrap:anywhere}
.display-info .display-count{margin:14px 0 0;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1}
.display-info .display-count p{font-size:clamp(.9rem,1.2vw,1.15rem);margin:8px 0 0}
.display-page .display-return{position:absolute;z-index:11;right:clamp(16px,3vw,42px);top:clamp(16px,3vw,42px);margin:0;background:#fffaf2ed}
.delivery-overlay{display:block;padding:0;background:#e9c69f;overflow:hidden}
body:has([data-delivery-overlay]:not([hidden])){overflow:hidden}
.student-cinema{position:absolute;inset:0}
.delivery-caption{position:absolute;z-index:10;bottom:clamp(16px,4vh,42px);left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 32px));padding:16px 20px 18px;border:2px solid #fff9e8d9;border-radius:22px;background:#fffaf0eb;box-shadow:0 12px 38px #74502c35;backdrop-filter:blur(8px)}
.delivery-caption .delivery-kicker{margin:0}.delivery-caption .delivery-title{margin:4px 0;font-size:clamp(1.35rem,4vw,2rem)}.delivery-caption .delivery-subtitle{font-size:.94rem}.delivery-caption .animation-skip{margin-top:10px;min-height:44px;padding:.45rem 1rem;font-size:.95rem}
@media(max-width:760px){
  .student-mode .student-page{width:calc(100% - 32px)}
  .student-mode .write-layout{grid-template-columns:1fr}
  .paper-options{gap:5px}.paper-option{font-size:.76rem;word-break:keep-all}
  .gift-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gift-card .gift-picture{width:66px;height:66px}
  .scene-fox{left:9%;bottom:29%;width:32%}
  .scene-rabbit{left:34%;bottom:27%;width:32%}
  .scene-bear{right:9%;bottom:29%;width:32%}
  .scene-bird{right:10%;top:14%;width:25%}
  .display-info{max-width:72vw}.display-page .display-return{top:auto;bottom:14px;right:14px}
}
@media(max-width:400px){
  .paper-options{grid-template-columns:repeat(2,minmax(0,1fr))}.paper-option{flex-direction:row;justify-content:flex-start;gap:8px;padding:6px;font-size:.78rem}.paper-swatch{width:42px;height:27px;flex:none}
  .delivery-caption{padding:12px 16px}.delivery-caption .delivery-subtitle{display:none}.delivery-caption .delivery-title{font-size:1.2rem}
  .writing-paper{padding:18px 17px 9px}.writing-paper textarea{min-height:160px}
  .gift-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.gift-card{font-size:.76rem}.gift-card .gift-picture{width:58px;height:58px}
}
@media(prefers-reduced-motion:reduce){.cinema-film{display:none!important}.cinema-world.film-playing .cinema-live{visibility:visible}}

/* Generated felt-and-paper artwork is shared across selecting, sending and receiving. */
.gift-picture{background-size:200% 200%;background-repeat:no-repeat;aspect-ratio:687/572}
.gift-picture[data-gift=fox],.gift-picture[data-gift=rabbit],.gift-picture[data-gift=bear],.gift-picture[data-gift=cat]{background-image:url("gifts-animals-a.aec4f0b6a657.webp")}
.gift-picture[data-gift=dog],.gift-picture[data-gift=panda],.gift-picture[data-gift=penguin],.gift-picture[data-gift=chick]{background-image:url("gifts-animals-b.5eefc88404e2.webp")}
.gift-picture[data-gift=star],.gift-picture[data-gift=flower],.gift-picture[data-gift=heart],.gift-picture[data-gift=rainbow]{background-image:url("gifts-wishes-a.b3b5dac6be05.webp")}
.gift-picture[data-gift=clover],.gift-picture[data-gift=moon],.gift-picture[data-gift=cloud],.gift-picture[data-gift=sun]{background-image:url("gifts-wishes-b.a574eb356801.webp")}
.gift-picture[data-gift=cake],.gift-picture[data-gift=donut],.gift-picture[data-gift=icecream],.gift-picture[data-gift=candy]{background-image:url("gifts-treats.aad21bc28c51.webp")}
.gift-picture[data-gift=balloon],.gift-picture[data-gift=giftbox],.gift-picture[data-gift=rocket],.gift-picture[data-gift=music]{background-image:url("gifts-surprises.6dd9c2c489a6.webp")}
.gift-picture[data-gift=fox],.gift-picture[data-gift=dog],.gift-picture[data-gift=star],.gift-picture[data-gift=clover],.gift-picture[data-gift=cake],.gift-picture[data-gift=balloon]{background-position:0 0}
.gift-picture[data-gift=rabbit],.gift-picture[data-gift=panda],.gift-picture[data-gift=flower],.gift-picture[data-gift=moon],.gift-picture[data-gift=donut],.gift-picture[data-gift=giftbox]{background-position:100% 0}
.gift-picture[data-gift=bear],.gift-picture[data-gift=penguin],.gift-picture[data-gift=heart],.gift-picture[data-gift=cloud],.gift-picture[data-gift=icecream],.gift-picture[data-gift=rocket]{background-position:0 100%}
.gift-picture[data-gift=cat],.gift-picture[data-gift=chick],.gift-picture[data-gift=rainbow],.gift-picture[data-gift=sun],.gift-picture[data-gift=candy],.gift-picture[data-gift=music]{background-position:100% 100%}
.gift-picture[data-gift=clover]{background-image:url("gift-clover.4fe0b1eca64c.webp");background-size:contain;background-position:center}
.gift-card .gift-picture{width:min(82px,100%);height:auto}
.review-gift .gift-picture,.received-gift .gift-picture{width:72px;height:auto}
.gift-card:hover .gift-picture{animation:gift-wiggle .65s ease-in-out}
@keyframes gift-wiggle{0%,100%{transform:rotate(0)}30%{transform:translateY(-5px) rotate(-8deg)}70%{transform:translateY(-3px) rotate(7deg)}}
.post-prop{background-image:url("post-props.34bd9be1fe2b.webp");background-size:200% 200%;background-repeat:no-repeat;aspect-ratio:687/572}
.post-prop-closed{background-position:0 0;clip-path:inset(0 0 5% 0)}.post-prop-paper{background-position:0 100%}
.postage-mark.gift-picture,.postage-mark.post-prop{display:block;width:65px;height:auto;border:0;border-radius:0;background-color:transparent;filter:drop-shadow(0 3px 4px #a66e4b45)}
.waiting-mail{width:120px;height:auto;border:0;border-radius:0;box-shadow:none;background-color:transparent;color:transparent}
.student-mode .delivered-view[data-game-result-style]{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(250px,.95fr);align-items:center;column-gap:clamp(20px,5vw,70px);width:100%!important;max-width:none!important;min-height:480px!important;padding:clamp(24px,4vw,58px)!important;border:2px solid #fff8e6!important;border-radius:26px!important;background:linear-gradient(90deg,#fff9e4db,#fff9edf0),url("hero.8f23c8449763.webp") center/cover!important;box-shadow:0 18px 45px #9c6c4530!important}
.student-mode .delivered-view[data-game-result-style][hidden]{display:none!important}
.student-mode .delivered-view[data-game-result-style]>.eyebrow,.student-mode .delivered-view[data-game-result-style]>h2,.student-mode .delivered-view[data-game-result-style]>p:not(.eyebrow),.student-mode .delivered-view[data-game-result-style]>[data-result-part=actions]{grid-column:2}
.student-mode .delivered-view[data-game-result-style]>h2{font-size:clamp(1.7rem,3vw,2.7rem)!important;color:#704c48!important}
.student-mode .delivered-view[data-game-result-style]>p:not(.eyebrow){font-size:1rem!important}
.student-mode .delivered-view[data-game-result-style]>[data-result-part=actions]{max-width:440px;justify-self:center}
.student-mode .delivered-view[data-game-result-style]>.received-letter{grid-column:1/-1;width:min(760px,100%);justify-self:center}
.arrival-stage{position:relative;display:grid;place-items:center;grid-column:1;grid-row:1/5;width:min(520px,100%);margin:0 auto;isolation:isolate}
.arrival-glow{position:absolute;inset:4% 8%;z-index:-1;border-radius:50%;background:radial-gradient(circle,#ffe6a9bb,transparent 67%);animation:arrival-glow 2.1s ease-in-out infinite alternate}
.arrival-envelope{position:relative;width:min(440px,100%);height:auto;margin:0;filter:drop-shadow(0 14px 12px #aa796a50)}
.arrival-envelope.is-open{background-position:100% 0;clip-path:inset(0 0 0 5%);animation:arrival-open .7s cubic-bezier(.2,.8,.2,1) both}
.arrival-sparkle{position:absolute;z-index:2;color:#edb84e;text-shadow:0 2px 8px #fff9e0;font-size:2rem;animation:twinkle 1.1s ease-in-out infinite alternate}
.arrival-sparkle-one{top:15%;right:7%}.arrival-sparkle-two{top:53%;left:7%;animation-delay:.35s}
@keyframes arrival-open{0%{transform:scale(.94) rotate(-4deg)}60%{transform:scale(1.08) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes arrival-glow{from{transform:scale(.85);opacity:.55}to{transform:scale(1.16);opacity:1}}
.seal-scene{isolation:isolate}
.seal-envelope{position:absolute;z-index:4;left:50%;top:60%;width:43%;height:auto;border:0;border-radius:0;box-shadow:none;background-color:transparent;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 12px #76534366)}
.seal-letter{position:absolute;z-index:2;left:50%;top:14%;width:30%;height:auto;padding:0;border:0;border-radius:0;box-shadow:none;background-color:transparent;transform:translate(-50%,-20%);filter:drop-shadow(0 6px 5px #76534350)}
.seal-gift{left:61%;top:19%;width:clamp(52px,12vw,92px);height:auto}
.seal-fox{z-index:3;left:1%;bottom:-5%;width:28%;transform-origin:50% 85%}
.seal-bird{z-index:3;right:3%;top:8%;width:24%;transform-origin:50% 85%}
.seal-star-three{left:53%;top:3%;font-size:1.5rem;animation-delay:.3s!important}
.send-overlay.is-playing .seal-envelope{animation:seal-envelope-bounce 2.8s ease both}
.send-overlay.is-playing .seal-fox{animation:actor-fox 1.1s ease-in-out infinite}
.send-overlay.is-playing .seal-bird{animation:actor-bird 1.7s ease-in-out infinite}
.send-overlay.is-playing .seal-letter{animation:seal-generated-paper 2.4s ease forwards}
.send-overlay.is-playing .seal-gift{animation:seal-generated-gift 2.2s ease forwards}
@keyframes seal-envelope-bounce{0%,35%{transform:translate(-50%,-50%) rotate(-5deg)}55%{transform:translate(-50%,-55%) rotate(5deg)}80%{transform:translate(-50%,-50%) scale(1.15)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes seal-generated-paper{0%,18%{transform:translate(-50%,-20%) rotate(-8deg);opacity:1}65%,100%{transform:translate(-50%,60%) rotate(2deg) scale(.65);opacity:0}}
@keyframes seal-generated-gift{0%,18%{transform:translate(0,0) rotate(8deg) scale(1);opacity:1}65%,100%{transform:translate(-60px,65px) rotate(-14deg) scale(.25);opacity:0}}
.motion-mail,.motion-mail-two,.motion-mail-three,.motion-mail-four,.motion-mail-five{width:clamp(70px,12vw,170px);height:auto;aspect-ratio:687/572;border:0;border-radius:0;box-shadow:none;background-color:transparent;background-image:url("post-props.34bd9be1fe2b.webp");background-size:200% 200%;background-position:0 0;filter:drop-shadow(0 8px 7px #79534275)}
.motion-mail:before{content:none}
/* The picture guide uses the same generated world as the game, including practice. */
dialog[data-game-guide-style] #pg-board .pg-board.pg-letter_postbox{--pg-cell:min(100px,calc((100vw - 105px)/3))}
#pg-board .pg-letter_postbox .pg-cell[data-letter-art]{font-size:0}
#pg-board .pg-letter_postbox .pg-cell[data-letter-art]:before{content:"";display:block;position:absolute;left:2%;top:50%;width:96%;aspect-ratio:687/572;transform:translateY(-50%);background-repeat:no-repeat;background-size:200% 200%;animation:guide-art-pop .55s ease both}
#pg-board .pg-letter_postbox .pg-cell[data-letter-art=key]:before,#pg-board .pg-letter_postbox .pg-cell[data-letter-art=pencil]:before,#pg-board .pg-letter_postbox .pg-cell[data-letter-art=envelope]:before,#pg-board .pg-letter_postbox .pg-cell[data-letter-art=gift]:before{background-image:url("guide-props.909d9a15fda0.webp")}
#pg-board .pg-letter_postbox .pg-cell[data-letter-art=fox]:before,#pg-board .pg-letter_postbox .pg-cell[data-letter-art=rabbit]:before,#pg-board .pg-letter_postbox .pg-cell[data-letter-art=bear]:before{background-image:url("gifts-animals-a.aec4f0b6a657.webp")}
#pg-board .pg-letter_postbox .pg-cell[data-letter-art=star]:before{background-image:url("gifts-wishes-a.b3b5dac6be05.webp")}
#pg-board .pg-letter_postbox .pg-cell[data-letter-art=key]:before,#pg-board .pg-letter_postbox .pg-cell[data-letter-art=fox]:before,#pg-board .pg-letter_postbox .pg-cell[data-letter-art=star]:before{background-position:0 0}
#pg-board .pg-letter_postbox .pg-cell[data-letter-art=pencil]:before,#pg-board .pg-letter_postbox .pg-cell[data-letter-art=rabbit]:before{background-position:100% 0}
#pg-board .pg-letter_postbox .pg-cell[data-letter-art=envelope]:before,#pg-board .pg-letter_postbox .pg-cell[data-letter-art=bear]:before{background-position:0 100%}
#pg-board .pg-letter_postbox .pg-cell[data-letter-art=gift]:before{background-position:100% 100%}
@keyframes guide-art-pop{from{transform:translateY(-50%) scale(.72) rotate(-9deg);opacity:.3}to{transform:translateY(-50%) scale(1) rotate(0);opacity:1}}
@media(max-width:760px){
  .student-mode .delivered-view[data-game-result-style]{grid-template-columns:1fr;min-height:0!important;padding:24px 18px!important}
  .student-mode .delivered-view[data-game-result-style]>.eyebrow,.student-mode .delivered-view[data-game-result-style]>h2,.student-mode .delivered-view[data-game-result-style]>p:not(.eyebrow),.student-mode .delivered-view[data-game-result-style]>[data-result-part=actions],.student-mode .delivered-view[data-game-result-style]>.received-letter{grid-column:1}
  .arrival-stage{grid-column:1;grid-row:auto;width:min(340px,100%);margin:0 auto 8px}
}
@media(prefers-reduced-motion:reduce){.arrival-glow,.arrival-sparkle,.gift-card:hover .gift-picture,.send-overlay.is-playing .seal-fox,.send-overlay.is-playing .seal-bird,.send-overlay.is-playing .seal-envelope,.send-overlay.is-playing .seal-letter,.send-overlay.is-playing .seal-gift,.arrival-envelope.is-open{animation:none!important}}

/* Preserve readable role, progress and action labels in the native app. */
.eyebrow,.step-kicker{color:#994c3e}
.share-url,.button.small,.hint,.pill,.topic-pill,.participant,.step-kicker,[data-sender]{font-size:14px}
.pill,.topic-pill{color:#42624a}
.pill.neutral{color:#705a4c}
.letter-journey li{color:#6f5b4f;font-size:14px}
.letter-journey li span{font-size:14px}
.letter-journey li[aria-current=step] span{background:#a64c40}