.greeting-studio {
    padding-top:38px;
    padding-bottom:80px;
    color:#292438
}
.greeting-hero {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    align-items:center;
    min-height:350px;
    padding:40px 54px 42px;
    background:linear-gradient(120deg,#fff3c4 0%,#ffe9e8 56%,#e3f7ff 100%);
    border-radius:28px;
    overflow:hidden;
    position:relative;
    margin-bottom:54px
}
.greeting-eyebrow {
    font-size:10px;
    letter-spacing:.18em;
    font-weight:800;
    color:#74628e;
    margin:0 0 14px
}
.greeting-hero h1 {
    font-size:clamp(32px,3.5vw,52px);
    line-height:1.12;
    letter-spacing:-.045em;
    margin:0 0 20px
}
.greeting-hero h1 em {
    font-family:Georgia,serif;
    font-weight:400;
    color:#c74267
}
.greeting-hero p:not(.greeting-eyebrow) {
    color:#726b7b;
    font-size:15px;
    line-height:1.7
}
.greeting-tags {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:25px
}
.greeting-tags span {
    border:1px solid #dcd3e7;
    border-radius:30px;
    padding:7px 12px;
    font-size:11px;
    background:#ffffff70
}
.greeting-hero-envelope {
    position:relative;
    isolation:isolate;
    width:280px;
    height:220px;
    justify-self:center;
    transform:rotate(8deg);
    margin-top:35px
}
.greeting-letter {
    position:absolute;
    inset:-35px 20px 20px;
    padding:22px;
    text-align:center;
    background:#fffaf1;
    border:1px solid #e7d7bc;
    box-shadow:0 4px 25px #65517d15;
    border-radius:9px;
    transform:rotate(-13deg)
}
.greeting-letter span {
    font-size:10px;
    color:#938270
}
.greeting-letter strong {
    display:block;
    font:italic 25px/1.25 Georgia,serif;
    margin-top:15px;
    color:#766184
}
.greeting-letter b {
    font-size:40px;
    color:#dd997f
}
.greeting-envelope-front {
    position:absolute;
    inset:50px 0 0;
    border-radius:8px 8px 16px 16px;
    background:linear-gradient(148deg,transparent 49.7%,#ffb990 50%) top left/51% 100% no-repeat,linear-gradient(212deg,transparent 49.7%,#ffcdb1 50%) top right/51% 100% no-repeat,linear-gradient(30deg,#ff9b83,#ffdbba);
    box-shadow:0 20px 40px #69518425;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:20px;
    color:#944528;
    font:italic 16px Georgia,serif
}
.greeting-orbit {
    position:absolute;
    right:-44px;
    top:-40px;
    font:48px Georgia,serif;
    color:#d1a05c
}
.greeting-orbit--second {
    left:-46px;
    top:140px;
    color:#9981b3;
    font-size:35px
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    .greeting-letter,
    .greeting-envelope-front,
    .greeting-orbit {
        transition:transform .65s cubic-bezier(.22,.68,0,1)
    }
    .greeting-hero-envelope:hover .greeting-envelope-front {
        transform:translateY(10px)
    }
    .greeting-hero-envelope:hover .greeting-letter {
        transform:translateY(-24px) rotate(-13deg)
    }
    .greeting-hero-envelope:hover .greeting-orbit {
        transform:translate(12px,-5px) rotate(22deg)
    }
    .greeting-hero-envelope:hover .greeting-orbit--second {
        transform:translate(-12px,5px) rotate(-25deg)
    }
}
.greeting-section-heading {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    margin-bottom:24px
}
.greeting-section-heading h2 {
    font-size:27px;
    letter-spacing:-.03em;
    margin:0
}
.greeting-section-heading .greeting-eyebrow {
    margin-bottom:9px
}
.greeting-section-heading>span {
    font-size:12px;
    color:#8a8192;
    flex-shrink:0
}
.greeting-theme-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:17px;
    margin-bottom:52px
}
.greeting-theme {
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    height:100%;
    padding:0;
    border:2px solid #fff;
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    text-align:left;
    background:#fffdf8;
    box-shadow:0 4px 18px #4938540a;
    isolation:isolate;
    transition:transform .2s,box-shadow .2s,border-color .2s
}
.greeting-theme-art {
    display:block;
    width:100%;
    aspect-ratio:8/5;
    flex-shrink:0;
    overflow:hidden;
    border-radius:15px 15px 0 0
}
.greeting-theme-art img {
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    transition:transform .6s
}
@media (hover:hover) and (pointer:fine) {
    .greeting-theme:hover img {
        transform:scale(1.025)
    }
    .greeting-theme:hover {
        box-shadow:0 8px 24px #49385418
    }
}
.greeting-theme[aria-pressed=true] {
    border-color:#f3ad17;
    box-shadow:0 0 0 4px #fff0bb;
    transform:translateY(-2px)
}
.greeting-theme-caption {
    width:100%;
    padding:18px 19px 20px;
    color:#273b54;
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow-wrap:anywhere
}
.greeting-theme-caption small {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.13em;
    line-height:1.5;
    color:#4a5b70
}
.greeting-theme-caption strong {
    font-size:19px;
    line-height:1.25;
    font-weight:650
}
.greeting-theme-caption>span {
    font:italic 14px/1.4 Georgia,serif;
    color:#536075
}
.greeting-theme-check {
    position:absolute;
    top:12px;
    right:12px;
    background:#ffcf43;
    color:#4f3b16;
    border-radius:50%;
    height:30px;
    width:30px;
    text-align:center;
    line-height:30px;
    box-shadow:0 2px 8px #59431520;
    opacity:0
}
.greeting-theme[aria-pressed=true] .greeting-theme-check {
    opacity:1
}
.greeting-editor {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
    gap:36px;
    align-items:start
}
.greeting-form {
    display:grid;
    gap:20px
}
.greeting-form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
.greeting-form .field {
    display:flex;
    flex-direction:column;
    gap:9px
}
.greeting-form .field__input {
    width:100%;
    border:1px solid #ded9e3;
    border-radius:12px;
    background:#fff;
    min-width:0;
    font-size:14px;
    padding:13px 14px
}
.greeting-form textarea {
    resize:vertical;
    line-height:1.7;
    min-height:190px
}
.greeting-form .field__label {
    font-size:12px;
    color:#463e50;
    font-weight:650
}
.greeting-form .field__label small {
    font-size:10px;
    font-weight:400;
    color:#8e8598
}
.greeting-field-meta {
    display:flex;
    justify-content:space-between;
    font-size:10px;
    color:#8e8598;
    gap:8px
}
.greeting-presets {
    margin:0;
    border:1px solid var(--section-line,#efc3d5);
    border-radius:20px;
    padding:20px;
    min-width:0;
    background:linear-gradient(135deg,#fff 20%,#fff4f8);
    box-shadow:0 5px 20px #8c385407,inset 0 1px 0 #fff
}
.greeting-preset-heading {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px
}
.greeting-preset-icon {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    flex-shrink:0;
    border-radius:13px;
    color:var(--section-accent,#bd3d71);
    background:var(--section-soft,#fce6ef)
}
.greeting-preset-icon svg {
    width:23px;
    height:23px
}
.greeting-preset-heading strong {
    display:block;
    color:#572d43;
    font-size:15px;
    font-weight:650;
    line-height:1.4
}
.greeting-preset-heading p {
    margin:4px 0 0;
    font-size:12px;
    line-height:1.5;
    color:#806573
}
.greeting-presets button {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:0;
    background:#fff;
    color:var(--section-deep,#9e2e5b);
    border:1px solid var(--section-line,#efc3d5);
    border-radius:13px;
    padding:10px;
    min-height:48px;
    font:inherit;
    font-size:13px;
    font-weight:650;
    line-height:1.4;
    cursor:pointer;
    transition:background .2s,border-color .2s,box-shadow .2s,transform .2s
}
.greeting-presets button svg {
    width:20px;
    height:20px;
    flex-shrink:0;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round
}
.greeting-presets .greeting-preset-next {
    color:#fff;
    background:linear-gradient(120deg,var(--section-accent,#bd3d71),var(--section-deep,#9e2e5b));
    border-color:transparent;
    box-shadow:0 4px 10px #9e2e5b20
}
.greeting-presets button:focus-visible {
    outline:3px solid var(--section-accent,#bd3d71);
    outline-offset:3px
}
.greeting-presets button:active {
    transform:translateY(1px)
}
@media (hover:hover) and (pointer:fine) {
    .greeting-presets .greeting-preset-arrow:hover {
        background:var(--section-soft,#fce6ef);
        border-color:var(--section-accent,#bd3d71)
    }
    .greeting-presets .greeting-preset-next:hover {
        background:var(--section-deep,#9e2e5b);
        box-shadow:0 6px 16px #9e2e5b30
    }
}
.greeting-preset-controls {
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 48px;
    gap:8px;
    width:100%
}
.greeting-presets .greeting-preset-arrow {
    padding:0
}
.greeting-preset-position {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:14px 0 0;
    font-size:11px;
    line-height:1.5;
    font-variant-numeric:tabular-nums;
    text-align:center;
    color:#806573
}
.greeting-preset-position:before,.greeting-preset-position:after {
    content:'';
    flex:1;
    height:1px;
    background:var(--section-line,#efc3d5);
    opacity:.65
}
@media(max-width:380px) {
    .greeting-presets {
        padding:16px
    }
    .greeting-preset-controls {
        grid-template-columns:44px minmax(0,1fr) 44px
    }
    .greeting-preset-next svg {
        display:none
    }
}
.greeting-extras {
    padding:19px;
    border:1px solid #e6e1eb;
    border-radius:16px;
    background:#faf8fc
}
.greeting-music-option {
    display:flex;
    gap:12px;
    align-items:center;
    cursor:pointer
}
.greeting-music-option input {
    accent-color:#80609c;
    width:19px;
    height:19px
}
.greeting-music-option>span:first-of-type {
    display:flex;
    flex-direction:column;
    gap:3px;
    flex:1
}
.greeting-music-option strong {
    font-size:13px
}
.greeting-music-option small,.greeting-extras>small {
    font-size:11px;
    color:#83788f
}
.greeting-music-option>span:last-child {
    font-size:24px;
    color:#9a81ac
}
.greeting-extras>p {
    font-size:10px;
    color:#83788f;
    margin:7px 0 19px 31px
}
.greeting-extras>.field {
    margin-bottom:8px
}
.greeting-checkout {
    border-top:1px solid #e7e1eb;
    padding-top:22px
}
.greeting-checkout>div {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center
}
.greeting-checkout strong {
    font-size:16px
}
.greeting-checkout span {
    font-size:11px;
    color:#8b7a9a
}
.greeting-checkout p {
    font-size:11px;
    line-height:1.65;
    color:#84788f
}
.greeting-checkout .button {
    width:100%;
    background:#785495;
    color:white;
    border-color:#785495;
    justify-content:space-between;
    min-height:52px;
    margin-top:8px
}
.greeting-checkout .button span {
    color:inherit;
    font-size:18px
}
.greeting-checkout .button:disabled {
    opacity:.5;
    cursor:not-allowed
}
.greeting-shortage a {
    color:#75548f;
    text-decoration:underline
}
#greeting-message {
    color:#9b4351;
    font-size:13px;
    margin:0
}
.greeting-preview-panel {
    border-radius:20px;
    border:1px solid #e5dfeb;
    overflow:hidden;
    position:sticky;
    top:100px;
    background:#fff;
    box-shadow:0 20px 50px #2f1a4d09
}
.greeting-preview-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:17px;
    font-size:10px;
    color:#80748b
}
.greeting-preview-heading i {
    display:inline-block;
    width:6px;
    height:6px;
    background:#8aa28b;
    border-radius:50%;
    margin-right:6px
}
.greeting-preview-heading button {
    border:0;
    background:none;
    cursor:pointer;
    font:inherit;
    color:#71548c;
    padding:5px
}
.greeting-preview-panel iframe {
    display:block;
    border:0;
    width:100%;
    height:650px;
    background:#dff6ff
}
.greeting-preview-footer {
    display:flex;
    align-items:center;
    gap:13px;
    justify-content:center;
    padding:4px 18px;
    color:#9583a4
}
.greeting-preview-footer>span {
    font-size:28px;
    color:#b4a2c5
}
.greeting-preview-footer p {
    font-size:11px;
    line-height:1.6
}
.greeting-full-preview {
    position:fixed;
    inset:14px;
    width:calc(100% - 28px);
    height:calc(100% - 28px);
    max-width:1600px;
    max-height:none;
    border:0;
    padding:0;
    border-radius:20px;
    background:#f5f1f7;
    color:#6c567c;
    box-shadow:0 24px 90px #0005
}
.greeting-full-preview::backdrop {
    background:#181223b8
}
.greeting-full-preview>div {
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:48px;
    padding:0 20px;
    font-size:12px
}
.greeting-full-preview button {
    background:none;
    border:0;
    padding:10px;
    color:inherit;
    cursor:pointer
}
.greeting-full-preview iframe {
    display:block;
    border:0;
    width:100%;
    height:calc(100% - 48px)
}
.greeting-success {
    max-width:700px;
    margin:50px auto;
    text-align:center;
    padding:44px;
    background:#f4eff9;
    border-radius:24px;
    outline:none
}
.greeting-success>span {
    font-size:55px;
    color:#8c6a9d
}
.greeting-success h2 {
    font-size:32px
}
.greeting-success>p {
    color:#887595;
    font-size:14px
}
.greeting-success .field {
    display:grid;
    text-align:left;
    gap:8px;
    margin:24px 0
}
.greeting-success .field__input {
    width:100%;
    font-size:13px
}
.greeting-success .contest-actions {
    justify-content:center
}
.greeting-success>a {
    font-size:13px;
    color:#72518c
}
.greeting-library>p {
    font-size:13px;
    color:#84788f
}
.greeting-library-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    margin-top:24px
}
.greeting-library-card {
    border:1px solid #e5dfea;
    border-radius:17px;
    overflow:hidden;
    background:white
}
.greeting-library-art {
    height:190px;
    display:grid;
    place-items:center;
    position:relative;
    isolation:isolate
}
.greeting-library-art:after {
    content:'';
    position:absolute;
    inset:0;
    background:#fff5;
    z-index:-1
}
.greeting-library-art img {
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2
}
.greeting-library-art strong {
    font:italic 30px Georgia,serif;
    color:#383044;
    background:#fff9;
    padding:12px 20px;
    border-radius:8px;
    max-width:90%;
    overflow-wrap:anywhere
}
.greeting-library-card>div {
    padding:18px
}
.greeting-library-card small {
    font-size:10px;
    color:#877b91
}
.greeting-library-card h3 {
    margin:8px 0 18px;
    font-size:20px;
    overflow-wrap:anywhere
}
.greeting-library-actions {
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:11px;
    color:#785394
}
.greeting-library-actions button {
    border:0;
    background:none;
    color:inherit;
    cursor:pointer;
    padding:0;
    text-align:left
}
.greeting-library-empty {
    text-align:center;
    padding:50px 25px;
    background:#f4eff8;
    border-radius:20px;
    margin-top:24px
}
.greeting-library-empty>span {
    font-size:55px;
    color:#9c85ac
}
.greeting-library-empty p {
    font-size:13px;
    color:#84788f
}
.greeting-library-empty a {
    color:#785495
}
.greeting-studio [hidden],.greeting-library [hidden] {
    display:none!important
}
.greeting-studio :focus-visible,.greeting-library :focus-visible {
    outline:3px solid #a381c4;
    outline-offset:4px
}
@media(min-width:1100px) {
    .page-greetings .container {
        max-width:1200px
    }
}
@media(max-width:1000px) {
    .greeting-theme-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .greeting-hero {
        padding:35px
    }
    .greeting-hero-envelope {
        transform:rotate(8deg) scale(.85)
    }
    .greeting-editor {
        gap:23px
    }
    .greeting-form-row {
        grid-template-columns:1fr
    }
    .greeting-preview-panel iframe {
        height:710px
    }
    .greeting-section-heading h2 {
        font-size:24px
    }
    .greeting-library .greeting-section-heading {
        align-items:flex-start;
        flex-direction:column
    }
}
@media(max-width:700px) {
    .greeting-studio {
        padding-top:18px
    }
    .greeting-hero {
        grid-template-columns:1fr;
        padding:30px 25px 20px;
        margin-bottom:35px
    }
    .greeting-hero h1 {
        font-size:35px
    }
    .greeting-hero-envelope {
        height:195px;
        transform:rotate(8deg) scale(.8);
        margin-top:48px
    }
    .greeting-hero p:not(.greeting-eyebrow) {
        font-size:13px
    }
    .greeting-tags {
        gap:5px
    }
    .greeting-tags span {
        padding:6px 8px;
        font-size:9px
    }
    .greeting-section-heading {
        display:block
    }
    .greeting-section-heading>span {
        display:block;
        margin-top:12px
    }
    .greeting-section-heading h2 {
        font-size:25px
    }
    .greeting-theme-grid {
        gap:12px
    }
    .greeting-theme-caption {
        padding:15px 16px 18px
    }
    .greeting-theme-caption strong {
        font-size:18px
    }
    .greeting-editor {
        grid-template-columns:1fr;
        gap:28px
    }
    .greeting-preview-panel {
        position:static
    }
    .greeting-preview-panel iframe {
        height:700px
    }
    .greeting-checkout>div {
        align-items:flex-start;
        flex-direction:column;
        gap:6px
    }
    .greeting-success {
        padding:28px 18px
    }
    .greeting-library-grid {
        grid-template-columns:1fr
    }
    .greeting-full-preview {
        inset:6px;
        width:calc(100% - 12px);
        height:calc(100% - 12px);
        border-radius:12px
    }
}
@media(max-width:560px) {
    .greeting-theme-grid {
        grid-template-columns:minmax(0,1fr)
    }
}
@media(prefers-reduced-motion:reduce) {
    .greeting-theme,.greeting-theme img {
        transition:none
    }
}
.greeting-wallet-offer {
    display:flex;
    align-items:center;
    gap:18px;
    background:#f3edf8;
    border:1px solid #e2d7ed;
    border-radius:18px;
    padding:22px;
    margin-bottom:26px;
    color:#665078
}
.greeting-wallet-offer>span {
    font-size:38px
}
.greeting-wallet-offer>div {
    flex:1
}
.greeting-wallet-offer strong {
    font-size:16px
}
.greeting-wallet-offer p {
    font-size:12px;
    margin:7px 0 0
}
.greeting-wallet-offer a {
    font-size:12px;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:4px
}
@media(max-width:700px) {
    .greeting-wallet-offer {
        flex-wrap:wrap
    }
    .greeting-wallet-offer a {
        margin-left:55px
    }
}