* {
    box-sizing:border-box
}
html {
    min-height:100%
}
/* Keep long previews scrollable without drawing a scrollbar inside the card. */
html.greeting-preview-document {
    scrollbar-width:none
}
html.greeting-preview-document::-webkit-scrollbar {
    display:none
}
body {
    margin:0;
    min-height:100svh;
    font-family:Arial,sans-serif;
    color:var(--ink);
    --ink:#273a49;
    --accent:#946d37;
    --paper:#fffcf2;
    --light:#fbf5df;
    --outer:#21506b;
    background:#bcefff
}
button,a {
    -webkit-tap-highlight-color:transparent
}
button {
    font:inherit;
    cursor:pointer
}
a {
    color:inherit
}
button:focus-visible,a:focus-visible {
    outline:3px solid #dbad60;
    outline-offset:5px
}
[hidden] {
    display:none!important
}
.theme-newyear {
    --ink:#18526b;
    --accent:#aa6811;
    --paper:#fffef5;
    --outer:#15506c;
    background:#bcefff
}
.theme-defender {
    --ink:#19467a;
    --accent:#9d600c;
    --paper:#fffdf3;
    --outer:#164779;
    background:#a5ddff
}
.theme-womensday {
    --ink:#7d3050;
    --accent:#bd3067;
    --paper:#fff8f7;
    --outer:#7d3050;
    background:#ffd6e6
}
.theme-mayday {
    --ink:#22644e;
    --accent:#16815b;
    --paper:#fffdf0;
    --outer:#22644e;
    background:#c4f6d9
}
.theme-victory {
    --ink:#7d3036;
    --accent:#b23343;
    --paper:#fffdf3;
    --outer:#7d3036;
    background:#fff0c2
}
.theme-children {
    --ink:#51419a;
    --accent:#b93278;
    --paper:#fffcef;
    --outer:#51419a;
    background:#bfefff
}
.theme-school {
    --ink:#6f431d;
    --accent:#ac5519;
    --paper:#fffdf0;
    --outer:#6f431d;
    background:#ffedb0
}
.theme-teacher {
    --ink:#22644d;
    --accent:#a46916;
    --paper:#fffdf1;
    --outer:#22644d;
    background:#d6f6db
}
.theme-unity {
    --ink:#28528c;
    --accent:#c13b57;
    --paper:#fffdf4;
    --outer:#28528c;
    background:#b5e7ff
}
.greeting-scenery {
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden
}
.greeting-scenery>img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center
}
.greeting-scenery:after {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 50% 25%,#ffffff26,transparent 65%)
}
.greeting-topline {
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    max-width:1440px;
    padding:28px 42px;
    margin:auto;
    color:var(--outer)
}
.greeting-brand {
    text-decoration:none;
    font-weight:700;
    font-size:20px;
    letter-spacing:-.04em
}
.greeting-brand>span {
    display:block;
    font-weight:400;
    font-size:8px;
    letter-spacing:.13em;
    text-transform:uppercase;
    margin:5px 0 0 23px
}
.greeting-controls {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end
}
.greeting-controls button {
    font-size:10px;
    color:inherit;
    padding:10px 14px;
    border:1px solid currentColor;
    border-radius:30px;
    background:#ffffffb3;
    backdrop-filter:blur(12px)
}
.greeting-reveal {
    position:relative;
    max-width:700px;
    margin:22px auto 0;
    padding:0 24px 25px;
    animation:card-arrive 1.1s cubic-bezier(.2,.7,.3,1) both
}
.greeting-paper {
    position:relative;
    text-align:center;
    background:var(--paper);
    padding:42px 54px 28px;
    border:1px solid #fff9;
    border-radius:160px 160px 15px 15px;
    box-shadow:0 30px 100px #10233530,0 0 0 7px #ffffff15;
    overflow:hidden;
    isolation:isolate
}
.greeting-paper:before {
    content:'';
    position:absolute;
    inset:12px;
    border:1px solid var(--accent);
    opacity:.3;
    border-radius:150px 150px 8px 8px;
    pointer-events:none;
    z-index:-1
}
.greeting-paper:after {
    content:'';
    position:absolute;
    inset:0;
    z-index:-2;
    opacity:.45;
    background-image:radial-gradient(#b39d7d33 .65px,transparent .65px);
    background-size:5px 5px
}
.greeting-occasion {
    display:block;
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    max-width:85%;
    margin:5px auto 15px;
    line-height:1.7
}
.greeting-emblem {
    display:block;
    font:46px/1.2 Georgia,serif;
    color:var(--accent);
    margin-bottom:12px;
    filter:drop-shadow(0 3px 10px #b3884133)
}
.greeting-dedication {
    font:italic 13px Georgia,serif;
    color:var(--accent);
    margin:12px 0
}
.greeting-paper h1 {
    font:italic 60px/1.1 Georgia,'Times New Roman',serif;
    letter-spacing:-.04em;
    margin:10px 0 17px;
    overflow-wrap:anywhere;
    text-wrap:balance
}
.greeting-paper h2 {
    font:400 23px/1.3 Georgia,serif;
    margin:0 auto;
    text-wrap:balance
}
.greeting-rule {
    height:33px;
    display:flex;
    align-items:center;
    gap:15px;
    justify-content:center;
    color:var(--accent);
    font-size:12px;
    margin:12px auto;
    width:55%;
    opacity:.6
}
.greeting-rule:before,.greeting-rule:after {
    content:'';
    height:1px;
    width:70px;
    background:var(--accent)
}
.greeting-wish {
    font:17px/1.85 Georgia,serif;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    margin:8px auto 22px;
    max-width:490px
}
.greeting-signature {
    font:italic 22px/1.5 Georgia,serif;
    color:var(--accent);
    margin:24px 0 26px;
    white-space:pre-wrap;
    overflow-wrap:anywhere
}
.greeting-paper-bottom {
    font-size:8px;
    letter-spacing:.16em;
    opacity:.55;
    margin-top:22px;
    color:var(--accent)
}
.greeting-paper-corner {
    position:absolute;
    right:22px;
    bottom:20px;
    width:25px;
    height:25px;
    border-bottom:1px solid var(--accent);
    border-right:1px solid var(--accent);
    opacity:.3
}
.greeting-game {
    display:flex;
    gap:16px;
    align-items:center;
    background:var(--paper);
    border-radius:15px;
    padding:20px 24px;
    margin-top:20px;
    box-shadow:0 10px 40px #0001
}
.greeting-game>span {
    font-size:30px;
    color:var(--accent)
}
.greeting-game>div {
    flex:1
}
.greeting-game h2 {
    font:18px Georgia,serif;
    margin:0 0 7px
}
.greeting-game p {
    font-size:10px;
    line-height:1.6;
    margin:0;
    opacity:.75
}
.greeting-game>a {
    font-size:11px;
    white-space:nowrap;
    border:1px solid var(--accent);
    padding:10px 14px;
    border-radius:25px;
    text-decoration:none
}
.greeting-bottomline {
    text-align:center;
    font-size:9px;
    line-height:1.8;
    color:var(--outer);
    margin-top:27px
}
.greeting-bottomline a {
    text-underline-offset:4px
}
.greeting-bottomline span {
    margin:0 7px
}
.greeting-opening {
    position:relative;
    min-height:calc(100svh - 110px);
    padding:35px 24px 60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:var(--outer);
    text-align:center
}
.greeting-opening-kicker {
    font-size:9px;
    letter-spacing:.2em;
    margin-bottom:45px
}
.greeting-sealed-envelope {
    position:relative;
    width:260px;
    height:170px;
    border-radius:9px;
    background:var(--paper);
    filter:drop-shadow(0 18px 30px #0002);
    transform:rotate(-7deg);
    margin:0 0 33px;
    animation:envelope-float 6s ease-in-out infinite
}
.greeting-sealed-envelope:before {
    content:'';
    position:absolute;
    inset:0;
    border-radius:9px;
    background:linear-gradient(33deg,transparent 49.5%,#ad996d20 50%,transparent 50.8%) left/50% 100% no-repeat,linear-gradient(-33deg,transparent 49.5%,#ad996d20 50%,transparent 50.8%) right/50% 100% no-repeat
}
.greeting-sealed-envelope>div {
    position:absolute;
    inset:0;
    background:linear-gradient(160deg,var(--paper),#dfd1b9);
    clip-path:polygon(0 0,100% 0,50% 60%)
}
.greeting-sealed-envelope>b {
    position:absolute;
    left:calc(50% - 24px);
    top:72px;
    border-radius:50%;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    background:var(--accent);
    color:var(--paper);
    border:4px double #ffffff55;
    box-shadow:0 3px 8px #0002;
    font:26px Georgia,serif
}
.greeting-opening h2 {
    font:italic 48px/1.15 Georgia,serif;
    max-width:680px;
    overflow-wrap:anywhere;
    margin:0 0 17px
}
.greeting-opening>p:not(.greeting-opening-kicker) {
    font:15px/1.6 Georgia,serif;
    opacity:.85;
    margin:0 0 25px
}
.greeting-opening>button {
    border:1px solid var(--paper);
    background:var(--paper);
    color:var(--ink);
    padding:15px 28px;
    border-radius:30px;
    font-size:13px;
    box-shadow:0 5px 30px #0001
}
.greeting-opening>button.greeting-open-silent {
    padding:14px 18px;
    background:transparent;
    color:inherit;
    border:0;
    font-size:10px;
    box-shadow:none;
    text-decoration:underline;
    text-underline-offset:4px
}
.greeting-particles {
    position:absolute;
    inset:0
}
.greeting-particles i {
    position:absolute;
    top:-10%;
    width:5px;
    height:5px;
    background:#fff8;
    border-radius:50%;
    animation:greeting-drift 15s linear infinite
}
.theme-womensday .greeting-particles i,.theme-mayday .greeting-particles i {
    border-radius:80% 0;
    background:#e7b3c3aa;
    width:8px;
    height:12px
}
.theme-school .greeting-particles i,.theme-teacher .greeting-particles i {
    border-radius:80% 0;
    background:#bc8a4766;
    width:9px;
    height:14px
}
.theme-victory .greeting-particles i {
    background:#e2b46366;
    width:3px;
    height:3px
}
.greeting-audio-status {
    position:fixed;
    left:16px;
    bottom:8px;
    max-width:300px;
    font-size:11px;
    background:var(--paper);
    color:var(--ink);
    border-radius:12px;
    margin:0;
    z-index:5
}
.greeting-audio-status:not(:empty) {
    padding:12px 17px
}
.greeting-error {
    max-width:600px;
    margin:12vh auto;
    padding:65px 40px
}
.greeting-error h1 {
    font-size:38px
}
.greeting-error p {
    line-height:1.7
}
.greeting-error a {
    display:inline-block;
    margin-top:20px
}
.is-preview .greeting-topline {
    padding:16px 20px
}
.is-preview .greeting-brand {
    font-size:14px
}
.is-preview .greeting-brand span {
    font-size:6px
}
.is-preview .greeting-controls button {
    padding:8px;
    font-size:9px
}
.is-preview .greeting-reveal {
    margin-top:8px
}
.is-preview .greeting-bottomline {
    font-size:8px
}
.is-paused * {
    animation-play-state:paused!important
}
.theme-victory .greeting-sealed-envelope {
    animation:none
}
@keyframes greeting-drift {
    from {
        transform:translate3d(0,-30px,0) rotate(0deg);
        opacity:0
    }
    10% {
        opacity:.8
    }
    to {
        transform:translate3d(80px,115vh,0) rotate(210deg);
        opacity:0
    }
}
@keyframes envelope-float {
    0%,100% {
        transform:translateY(0) rotate(-7deg)
    }
    50% {
        transform:translateY(-9px) rotate(-4deg)
    }
}
@keyframes card-arrive {
    from {
        opacity:0;
        transform:translateY(28px) scale(.97)
    }
    to {
        opacity:1;
        transform:none
    }
}
@media(min-width:1600px) {
    .greeting-scenery>img {
        object-fit:fill
    }
}
@media(max-width:600px) {
    .greeting-topline {
        padding:20px 16px;
        align-items:flex-start;
        gap:12px
    }
    .greeting-brand {
        font-size:16px;
        white-space:nowrap
    }
    .greeting-brand>span {
        font-size:6px;
        margin-left:17px
    }
    .greeting-controls {
        gap:5px
    }
    .greeting-controls button {
        font-size:9px;
        padding:8px
    }
    .greeting-reveal {
        padding:0 16px 20px;
        margin-top:16px
    }
    .greeting-paper {
        padding:35px 28px 27px;
        border-radius:110px 110px 13px 13px
    }
    .greeting-paper:before {
        inset:10px;
        border-radius:100px 100px 6px 6px
    }
    .greeting-paper h1 {
        font-size:44px
    }
    .greeting-paper h2 {
        font-size:21px
    }
    .greeting-wish {
        font-size:16px;
        line-height:1.75
    }
    .greeting-occasion {
        font-size:8px;
        max-width:78%;
        margin-top:4px
    }
    .greeting-signature {
        font-size:21px
    }
    .greeting-bottomline span {
        display:none
    }
    .greeting-bottomline a {
        display:block
    }
    .greeting-game {
        flex-wrap:wrap;
        padding:20px
    }
    .greeting-game>div {
        min-width:180px
    }
    .greeting-game>a {
        margin-left:45px
    }
    .greeting-opening h2 {
        font-size:40px
    }
    .greeting-opening-kicker {
        font-size:8px
    }
    .greeting-error {
        margin:10vh 16px
    }
    .greeting-error h1 {
        font-size:30px
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation:none!important;
        scroll-behavior:auto!important
    }
    .greeting-particles {
        display:none
    }
}
.greeting-particles .particle-0 {
    left:7%;
    animation-delay:-0s;
    animation-duration:14s
}
.greeting-particles .particle-1 {
    left:50%;
    animation-delay:-1.7s;
    animation-duration:15s
}
.greeting-particles .particle-2 {
    left:93%;
    animation-delay:-3.4s;
    animation-duration:16s
}
.greeting-particles .particle-3 {
    left:36%;
    animation-delay:-5.1s;
    animation-duration:17s
}
.greeting-particles .particle-4 {
    left:79%;
    animation-delay:-6.8s;
    animation-duration:18s
}
.greeting-particles .particle-5 {
    left:22%;
    animation-delay:-8.5s;
    animation-duration:19s
}
.greeting-particles .particle-6 {
    left:65%;
    animation-delay:-10.2s;
    animation-duration:20s
}
.greeting-particles .particle-7 {
    left:8%;
    animation-delay:-11.9s;
    animation-duration:21s
}
.greeting-particles .particle-8 {
    left:51%;
    animation-delay:-13.6s;
    animation-duration:22s
}
.greeting-particles .particle-9 {
    left:94%;
    animation-delay:-15.3s;
    animation-duration:14s
}
.greeting-particles .particle-10 {
    left:37%;
    animation-delay:-17s;
    animation-duration:15s
}
.greeting-particles .particle-11 {
    left:80%;
    animation-delay:-18.7s;
    animation-duration:16s
}
.greeting-particles .particle-12 {
    left:23%;
    animation-delay:-20.4s;
    animation-duration:17s
}
.greeting-particles .particle-13 {
    left:66%;
    animation-delay:-22.1s;
    animation-duration:18s
}
.greeting-particles .particle-14 {
    left:9%;
    animation-delay:-23.8s;
    animation-duration:19s
}
.greeting-particles .particle-15 {
    left:52%;
    animation-delay:-25.5s;
    animation-duration:20s
}
.greeting-particles .particle-16 {
    left:95%;
    animation-delay:-27.2s;
    animation-duration:21s
}
.greeting-particles .particle-17 {
    left:38%;
    animation-delay:-28.9s;
    animation-duration:22s
}
.greeting-particles .particle-18 {
    left:81%;
    animation-delay:-30.6s;
    animation-duration:14s
}
.greeting-particles .particle-19 {
    left:24%;
    animation-delay:-32.3s;
    animation-duration:15s
}
.greeting-particles .particle-20 {
    left:67%;
    animation-delay:-34s;
    animation-duration:16s
}
.greeting-particles .particle-21 {
    left:10%;
    animation-delay:-35.7s;
    animation-duration:17s
}
.greeting-particles .particle-22 {
    left:53%;
    animation-delay:-37.4s;
    animation-duration:18s
}
.greeting-particles .particle-23 {
    left:96%;
    animation-delay:-39.1s;
    animation-duration:19s
}