.card-app{max-width:1440px;min-height:100svh;color:var(--ink);margin:auto;padding:0 24px 20px}.card-scene{isolation:isolate;aspect-ratio:3/2;width:min(100%,150svh - 448.5px);box-shadow:0 5px 0 var(--color-border);background:url(/art/laurka-room.avif) 50%/cover;border-radius:28px;margin:auto;position:relative;overflow:hidden;container-type:inline-size}.card-scene button{touch-action:manipulation;cursor:pointer;background:0 0;border:0;padding:0;position:absolute}.card-window{border-radius:16px;width:29%;height:29%;top:2%;left:66%}.card-window-glint{border:5px solid var(--surface);border-radius:30%;animation:.5s ease-out both card-glint;position:absolute;inset:8%}.card-paper{width:37%;height:29%;top:43%;left:7%;transform:rotate(-5deg)}.card-paper-sheet{background:var(--surface);border:2px solid #e8d0a6;border-radius:5px 9px 7px 4px;display:block;position:absolute;inset:0;box-shadow:0 5px #b7804580}.card-design{border-radius:inherit;pointer-events:none;position:absolute;inset:0;overflow:hidden;container-type:inline-size}.card-motif{pointer-events:none;background:url(/art/laurka-stickers.avif) 0 0/200% 200% no-repeat;display:block}.motif-flower{background-position:100% 0}.motif-sun{background-position:0 100%}.motif-star{background-position:100% 100%}.card-mark{aspect-ratio:1;width:22%;transform:translate(-50%, -50%) rotate(var(--mark-angle));animation:.26s ease-out card-sticker-pop;position:absolute}.card-grandma{aspect-ratio:1;border-radius:10px;width:25%;transition:width .6s,top .6s,right .6s;top:35%;right:5%;overflow:hidden;box-shadow:0 5px #865527;background:var(--surface)!important;border:8px solid #ba814b!important}.card-grandma-art{pointer-events:none;background:url(/art/laurka-babcia.avif) 0 0/200% 200% no-repeat;position:absolute;inset:0}.card-grandma-art.pose-wave{background-position:100% 0}.card-grandma-art.pose-holding{background-position:0 100%}.card-grandma-art.pose-raised{background-position:100% 100%}.is-received .card-grandma{width:44%;top:6%;right:28%;border-width:10px!important}.card-held-design{pointer-events:none;width:45.8%;height:25.5%;position:absolute;top:65.2%;left:33.5%}.card-held-design.is-raised{width:45%;height:26.5%;top:54.6%;left:27.4%}.card-held-design .card-mark{animation:none}.card-envelope{width:15%;height:19%;top:50%;left:49%}.card-envelope-art{background:#f6e5bc;border:2px solid #c8b28a;border-radius:6px;height:70%;position:absolute;top:15%;left:0;right:0;box-shadow:0 4px #b78045}.card-envelope-art:after{content:"";clip-path:polygon(0 0,50% 65%,100% 0);background:var(--surface-warm);position:absolute;inset:0}.card-envelope-art i{aspect-ratio:1;z-index:1;background:#db7964;border-radius:50%;width:18%;position:absolute;top:51%;left:41%}.card-folded{background:var(--surface);border:1px solid #c8b28a;width:80%;height:90%;position:absolute;top:-60%;left:10%}.phase-sent .card-envelope{z-index:3;transition:left .65s,top .65s,transform .65s}.phase-sent.flight-0 .card-envelope{top:47%;left:22%;transform:rotate(-8deg)scale(1.3)}.phase-sent.flight-1 .card-envelope{top:38%;left:48%;transform:rotate(12deg)}.phase-sent.flight-2 .card-envelope{top:10%;left:75%;transform:rotate(-16deg)scale(.65)}.card-stamps{justify-content:space-between;gap:24px;height:18%;display:flex;position:absolute;bottom:4%;left:8%;right:8%}.card-stamps button{aspect-ratio:1;width:16%;min-width:64px;min-height:64px;position:relative}.card-stamp{background:#f9e7c1;border:5px solid #c7955e;border-radius:35%;position:absolute;inset:5%;box-shadow:0 6px #a16d3c}.card-stamp .card-motif{position:absolute;inset:4%}.is-tapped{animation:.28s ease-out card-press}.is-helped .card-stamp{outline-offset:4px;outline:4px solid #df992c}.card-controls{--play-slots:4;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:12px;display:flex}@media (min-width:1000px) and (min-height:721px) and (orientation:landscape){.card-scene{container-type:size}.card-scene .card-window{height:24%;top:4%}.card-scene .card-grandma{width:min(25%,38cqh)}.card-scene.is-received .card-grandma{width:min(44%,64cqh);right:38%}}@media (min-width:1000px){.card-controls>.play-control{grid-row:1}.card-controls .card-listen{grid-column:1}.card-controls .card-help{grid-column:2}.card-controls .card-next{grid-column:3}.card-controls .card-home{grid-column:4}}.card-controls :is(button,a){border:2px solid var(--color-border);background:var(--surface-warm);min-height:64px;color:var(--ink);font-size:var(--text-action);box-shadow:0 4px 0 var(--color-border);border-radius:22px;justify-content:center;align-items:center;gap:10px;padding:12px 20px;font-weight:700;text-decoration:none;display:inline-flex}.card-controls svg{width:24px;height:24px}.card-controls .card-primary{color:var(--surface);background:#206f70;border-color:#206f70;box-shadow:0 4px #174f50}.card-controls .card-replay-hint{outline:4px solid #df992c}.card-app :is(button,a):focus-visible{outline:4px solid var(--focus);outline-offset:4px}.card-audio-error{text-align:center;margin:10px 0 0;font-size:14px}@keyframes card-press{35%{transform:translateY(6px)rotate(-4deg)}}@keyframes card-sticker-pop{0%{opacity:.6;scale:1.4}to{opacity:1;scale:1}}@keyframes card-glint{0%{opacity:1}to{opacity:0}}@media (max-width:700px){.card-app{padding:0 12px 16px}.card-controls{grid-template-columns:1fr 1fr;gap:24px;display:grid}.card-controls :is(button,a){padding:10px;font-size:16px}.card-scene{min-height:340px}.card-stamps{gap:16px;left:4%;right:4%}.card-grandma{width:28%;right:3%}}@media (prefers-reduced-motion:reduce){.card-grandma,.phase-sent .card-envelope{transition:none}.card-mark{animation:none}.is-tapped{animation:none;transform:translateY(3px)}.card-window-glint{animation:none}.card-paper{transform:none}}.card-sticker-area{position:absolute;inset:26% 10% 24%}.card-dedication,.card-signature{color:var(--ink);text-align:center;font:italic 500 7cqw/1 Georgia,serif;position:absolute;left:0;right:0}.card-dedication{top:5%}.card-signature{font-size:6.5cqw;bottom:5%}.card-signature>span{color:#be4d43}