/* Festive Card Studio. The card is the hero; the room around it takes the theme's night. */

.cs {
    --cs-bg1: #0e2a24; --cs-bg2: #07161a; --cs-accent: #e8b04a; --cs-ink: #f6efe2; --cs-dim: rgba(246, 239, 226, .74);
    --cs-line: rgba(232, 176, 74, .25); --cs-btn-ink: #2a1206;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    background: radial-gradient(120% 90% at 30% 20%, var(--cs-bg1) 0%, var(--cs-bg2) 100%);
    color: var(--cs-ink);
    overflow: hidden;
    isolation: isolate;
}
.cs--newyear {
    --cs-bg1: #141b33; --cs-bg2: #05060c; --cs-accent: #c9d3e0; --cs-ink: #eef2f7; --cs-dim: rgba(230, 236, 244, .72);
    --cs-line: rgba(201, 211, 224, .22);
}
.cs .fx-eyebrow { color: var(--cs-accent); }
.cs .fx-btn--primary { background: linear-gradient(180deg, #ffd27a, #e8b04a); color: var(--cs-btn-ink); }
.cs--newyear .fx-btn--primary, .cs--newyear a.fx-btn--primary, .cs--newyear a.fx-btn--primary:visited {
    background: linear-gradient(180deg, #ffffff 0%, #c4ccd8 48%, #8a94a6 52%, #e7ecf2 100%); color: #10131c;
}

.cs--studio { border-radius: 22px; margin: 0 0 22px; box-shadow: 0 30px 60px -30px rgba(10, 10, 30, .6); }
.cs--receive { min-height: 100vh; min-height: 100svh; }

.cs-stage { display: flex; align-items: center; justify-content: center; padding: 22px 16px 8px; }
.cs-frame {
    position: relative; width: 100%; max-width: 420px;
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 28px 50px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
    background: #0b0b14;
}
.cs-frame--portrait { aspect-ratio: 4 / 5; }
.cs-frame--square { aspect-ratio: 1 / 1; }
.cs-frame--story { aspect-ratio: 9 / 16; max-width: 300px; }
.cs-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cs--receive .cs-frame { max-width: min(460px, 86vw); }

.cs-panel { padding: 8px 20px 26px; }
.cs-panel-inner { max-width: 460px; margin: 0 auto; }
.cs-title { font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.08; font-weight: 520; margin: .5rem 0 .55rem; color: var(--cs-ink); }
.cs-title em { font-style: normal; color: var(--cs-accent); }
.cs-lede { color: var(--cs-dim); line-height: 1.5; margin: 0 0 1rem; }

.cs-form { display: grid; gap: .8rem; }
.cs-group { display: grid; gap: .4rem; }
.cs .fx-input { background: rgba(255, 255, 255, .06); color: var(--cs-ink); }
.cs-select { appearance: auto; }
.cs-select option { color: #111; }

.cs-seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.cs-seg button {
    flex: 1 1 auto; min-height: 40px; padding: .45rem .8rem; border-radius: 999px;
    border: 1px solid var(--cs-line); background: rgba(255, 255, 255, .04); color: var(--cs-ink);
    font: 600 .86rem/1 var(--fx-ui); cursor: pointer;
}
.cs-seg button[aria-checked="true"] { background: var(--cs-accent); color: #14100a; border-color: transparent; }
.cs-seg button:focus-visible, .cs-designs button:focus-visible, .cs-idea:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }

.cs-designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.cs-designs button {
    display: grid; gap: .35rem; justify-items: center; padding: .45rem .3rem .5rem;
    border-radius: 12px; border: 1px solid var(--cs-line); background: rgba(255, 255, 255, .03);
    color: var(--cs-ink); font: 600 .78rem/1.15 var(--fx-ui); cursor: pointer;
}
.cs-designs canvas { width: 72px; height: 90px; border-radius: 6px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7); }
.cs-designs button[aria-checked="true"] { border-color: var(--cs-accent); box-shadow: 0 0 0 2px var(--cs-accent) inset; }

.cs-ideas { display: grid; gap: .35rem; margin-top: -.35rem; }
.cs-idea {
    text-align: left; border: 1px dashed var(--cs-line); background: transparent; color: var(--cs-dim);
    border-radius: 10px; padding: .45rem .65rem; font: 400 .82rem/1.35 var(--fx-ui); cursor: pointer;
}
.cs-idea:hover { color: var(--cs-ink); border-style: solid; }

.cs-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.cs-actions .fx-btn { flex: 1 1 calc(50% - .5rem); }
.cs-actions .fx-btn--primary { flex-basis: 100%; }

.cs-share { animation: cs-rise .6s var(--fx-ease-out) both; }
.cs-share-title { font-size: 1.6rem; font-weight: 520; margin: 0 0 .3rem; outline: none; color: var(--cs-ink); }
.cs-share-lede { color: var(--cs-dim); margin: 0 0 .9rem; }
.cs-linkbox { display: flex; gap: .4rem; margin: .8rem 0 0; }
.cs-linkbox .fx-input { font-size: .8rem; padding: .6rem .8rem; }
.cs-again { margin-top: 1rem; background: none; border: 0; padding: 0; color: var(--cs-accent); font-weight: 600; border-bottom: 1px solid var(--cs-line); cursor: pointer; }

.cs-note { font-size: .76rem; line-height: 1.5; color: var(--cs-dim); opacity: .8; margin: 1.2rem 0 0; }
.cs-note a { color: inherit; }

.cs-brand { position: absolute; right: 14px; top: 12px; z-index: 2; font: 700 .78rem/1 var(--fx-ui); letter-spacing: .04em; color: var(--cs-dim); text-decoration: none; }

@keyframes cs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (min-width: 900px) {
    .cs { grid-template-columns: minmax(0, 1fr) 440px; align-items: center; }
    .cs-stage { padding: 36px; min-height: 620px; }
    .cs--studio { align-items: start; }
    .cs--studio .cs-stage { position: sticky; top: 64px; min-height: calc(100vh - 80px); max-height: 900px; }
    .cs--receive .cs-stage { min-height: 100vh; min-height: 100svh; }
    .cs-panel { padding: 36px 36px 36px 8px; }
    .cs-panel-inner { margin: 0; }
    .cs--receive .cs-frame { max-width: min(520px, 46vw); }
}

@media (max-width: 899.98px) {
    .cs--receive .cs-panel-inner { text-align: center; }
}