/*
PLANET XO / JINGLE JAM 2026 - STYLES

QUICK EDITS
- Colours: :root variables (base palette, then Christmas overrides).
- Layout: .wrap, .hero, .section and .charity-grid.
- Small screens: @media rules alongside each component group.
- Tiltify panel: section 12.
- Snow: section 13; JavaScript behaviour is in app.js.

Rules are ordered: base layout, responsive rules, then festive overrides.
Keep later overrides below the base rules so the current design is preserved.
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root {
    color-scheme:dark;
    --paper:#0b0d17;
    --ink:#111321;
    --surface:#181c2c;
    --text:#f1f3fb;
    --muted:#b8c0d4;
    --lime:#d8ff36;
    --purple:#b3a4ff;
    --line:#34394e;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:30px;
}

body {
    margin:0;
    background:var(--paper);
    color:var(--text);
    font:16px/1.65 'DM Sans',Arial,sans-serif;
}

a {
    color:inherit;
    text-decoration:none;
}

button {
    font:inherit;
    cursor:pointer;
}

a,button {
    transition:background .2s,color .2s,transform .2s;
}

a:focus-visible,button:focus-visible {
    outline:3px solid var(--purple);
    outline-offset:6px;
}

h1,h2,h3,p {
    margin:0;
}

h1,h2,h3 {
    font-family:Manrope,Arial,sans-serif;
    letter-spacing:-.05em;
    line-height:1.12;
}

p {
    color:var(--muted);
}

.wrap {
    width:90%;
    max-width:1320px;
    margin:auto;
}

.skip {
    position:absolute;
    top:-90px;
    background:var(--lime);
    color:var(--ink);
    padding:14px;
    z-index:5;
}

.skip:focus {
    top:10px;
}

header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:110px;
}

.brand img {
    width:150px;
    height:75px;
    object-fit:contain;
}

nav {
    display:flex;
    gap:30px;
    font-size:14px;
    font-weight:600;
}

nav a:hover,.text-link:hover {
    color:var(--lime);
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 24px;
    background:var(--lime);
    color:var(--ink);
    border-radius:40px;
    font-weight:800;
    font-size:14px;
    line-height:1.4;
}

.button:hover {
    background:#e7ff89;
    transform:translateY(-2px);
}

.button.small {
    padding:12px 21px;
}

.hero {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    background:var(--ink);
    border-radius:24px;
    overflow:hidden;
}

.hero-copy {
    padding:55px 9%;
    background:radial-gradient(ellipse at 0 110%,#312d5c,transparent 65%);
}

.eyebrow {
    display:block;
    font-size:11px;
    letter-spacing:.14em;
    font-weight:800;
}

.dot {
    display:inline-block;
    background:var(--lime);
    width:7px;
    height:7px;
    border-radius:50%;
    margin-right:7px;
}

h1 {
    font-size:clamp(48px,5.6vw,80px);
    font-weight:800;
    line-height:1.08;
    margin:26px 0;
}

h1 em {
    color:var(--lime);
    font-style:normal;
}

.hero-copy>p {
    max-width:450px;
    font-size:17px;
}

.hero-copy strong {
    color:var(--text);
    font-weight:500;
}

.actions {
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    margin:30px 0;
}

.text-link {
    font-size:14px;
    font-weight:700;
    border-bottom:1px solid #64667b;
    padding-bottom:5px;
}

.date {
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:36px;
}

.date>span {
    font-size:35px;
    color:var(--lime);
    font-weight:700;
    letter-spacing:-.06em;
}

.date>div {
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    border-left:1px solid var(--line);
    padding-left:20px;
}

.date small {
    font-size:11px;
    color:var(--muted);
    font-weight:400;
    letter-spacing:0;
}

.poster {
    position:relative;
    background:#b3a4ff;
    color:#15152a;
    overflow:hidden;
    padding:28px 34px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:610px;
    background-image:radial-gradient(circle at 100% 0,#d0c5ff,transparent 55%);
}

.poster-top,.poster-bottom {
    display:flex;
    justify-content:space-between;
    font-size:10px;
    letter-spacing:.1em;
    font-weight:800;
    position:relative;
    z-index:1;
}

.poster-title {
    font-family:Manrope,Arial,sans-serif;
    font-size:clamp(64px,7.5vw,108px);
    font-weight:800;
    line-height:.87;
    letter-spacing:-.08em;
    transform:rotate(-7deg);
    margin:55px 0 25px 14px;
    position:relative;
    z-index:1;
}

.poster-title span {
    font-size:1.47em;
}

.poster-title sup {
    font-size:34px;
    position:relative;
    top:-55px;
    left:10px;
    letter-spacing:-.05em;
}

.poster-line {
    height:1px;
    background:#15152a;
    transform:rotate(-7deg);
    margin:0 -60px;
}

.poster>p {
    color:#15152a;
    font-family:Manrope,Arial,sans-serif;
    font-size:37px;
    line-height:1.04;
    font-weight:800;
    letter-spacing:-.055em;
    margin:30px 0 35px 14px;
}

.poster>p i {
    font-style:normal;
    background:var(--lime);
    padding:0 7px;
}

.star {
    position:absolute;
    line-height:1;
}

.star-one {
    font-size:190px;
    right:-28px;
    top:30px;
    color:var(--lime);
}

.star-two {
    font-size:180px;
    right:25px;
    bottom:70px;
}

.ribbon {
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin-top:50px;
}

.ribbon>div {
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    padding:20px 0;
    font-size:11px;
    font-weight:700;
    letter-spacing:.13em;
}

.ribbon b {
    color:var(--lime);
    font-size:23px;
}

.section {
    padding-top:90px;
    padding-bottom:90px;
}

h2 {
    font-size:clamp(34px,3.5vw,49px);
    margin:15px 0 25px;
}

.intro {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
}

.intro p {
    margin-bottom:20px;
}

.intro .lead {
    color:var(--text);
    font-size:23px;
    line-height:1.5;
}

.watch-section {
    background:#121626;
    padding:65px 0;
}

.watch-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.stream-art {
    min-height:350px;
    border:1px solid #494262;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:repeating-linear-gradient(0deg,transparent,transparent 39px,#ffffff04 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,#ffffff04 40px),radial-gradient(ellipse,#3e3264,#1b1b30);
    position:relative;
    padding:32px;
}

.stream-art .eyebrow {
    color:var(--purple);
}

.play {
    width:75px;
    height:75px;
    border-radius:22px;
    border:2px solid var(--purple);
    color:var(--lime);
    display:grid;
    place-items:center;
    font-size:25px;
    margin:30px 0 22px;
    padding-left:4px;
    transform:rotate(-7deg);
}

.stream-art h3 {
    font-size:32px;
}

.stream-art p {
    font-size:14px;
    margin:8px 0 25px;
}

.stream-label {
    font-size:10px;
    letter-spacing:.1em;
    color:var(--purple);
}

.watch-grid>div>p {
    margin-bottom:25px;
}

.notice {
    border-top:1px solid var(--line);
    margin-top:30px;
    padding-top:20px;
    font-size:13px;
}

.notice b {
    font-weight:500;
}

.notice p {
    margin-top:6px;
}

.section-heading {
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:end;
    margin-bottom:25px;
}

.section-heading>p {
    font-size:14px;
    padding-bottom:25px;
}

.charity-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
}

.charity-grid article {
    padding:26px 23px 30px;
    min-height:205px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:#111421;
}

.charity-number {
    font-size:9px;
    letter-spacing:.06em;
    color:var(--purple);
    font-weight:700;
}

.charity-grid h3 {
    font-size:25px;
    margin:23px 0 13px;
}

.charity-grid p {
    font-size:13px;
    line-height:1.6;
}

.charity-more {
    display:table;
    margin-top:25px;
}

.support {
    border-radius:22px;
    background:var(--surface);
    padding:45px;
}

.support-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px;
    margin-top:35px;
}

.support-grid b {
    color:var(--lime);
    font-size:13px;
}

.support-grid h3 {
    font-size:25px;
    margin:18px 0 13px;
}

.support-grid p {
    font-size:14px;
}

.support button {
    color:var(--text);
    background:none;
    border:0;
    border-bottom:1px solid #64667b;
    padding:0 0 5px;
    margin-top:15px;
}

.support [role=status] {
    display:block;
    font-size:12px;
    color:var(--lime);
}

.final-cta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding-top:75px;
    padding-bottom:70px;
}

.final-cta h2 {
    font-size:60px;
    margin-bottom:0;
}

footer {
    display:flex;
    justify-content:space-between;
    gap:30px;
    border-top:1px solid var(--line);
    padding-top:35px;
    padding-bottom:35px;
}

.footer-brand {
    font-weight:800;
    font-size:23px;
    letter-spacing:-.05em;
}

footer p {
    font-size:11px;
    margin-top:14px;
}

footer>div:last-child>a {
    font-size:12px;
    margin-right:20px;
}

@media(max-width:1000px) {
    nav {
        gap:18px;
    }

    .hero-copy {
        padding:40px 8%;
    }

    .poster {
        padding:25px;
        min-height:580px;
    }

    .poster-title sup {
        left:4px;
        font-size:24px;
        top:-35px;
    }

    .poster>p {
        font-size:32px;
    }

    .intro,.watch-grid {
        gap:40px;
    }

    .charity-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .charity-grid article {
        min-height:180px;
    }

    .star-two {
        right:8px;
        font-size:140px;
    }

    .support-grid {
        gap:25px;
    }

}

@media(max-width:680px) {
    header {
        min-height:90px;
    }

    .brand img {
        width:120px;
        height:60px;
    }

    nav {
        display:none;
    }

    .hero {
        grid-template-columns:1fr;
    }

    .hero-copy {
        padding:35px 25px 40px;
    }

    h1 {
        font-size:53px;
    }

    .poster {
        min-height:480px;
    }

    .poster-title {
        font-size:85px;
        margin-top:35px;
    }

    .poster>p {
        font-size:33px;
    }

    .poster-title sup {
        top:-44px;
    }

    .star-one {
        font-size:170px;
    }

    .star-two {
        font-size:150px;
        right:25px;
        bottom:70px;
    }

    .ribbon {
        margin-top:30px;
    }

    .ribbon>div {
        flex-wrap:wrap;
        justify-content:center;
        font-size:9px;
        gap:8px 16px;
    }

    .ribbon b {
        font-size:17px;
    }

    .ribbon span:last-child {
        display:none;
    }

    .ribbon b:last-of-type {
        display:none;
    }

    .section {
        padding-top:55px;
        padding-bottom:55px;
    }

    .intro,.watch-grid {
        grid-template-columns:1fr;
        gap:22px;
    }

    .watch-section {
        padding:40px 0;
    }

    .section-heading {
        display:block;
    }

    .section-heading>p {
        padding-bottom:0;
    }

    .charity-grid article {
        padding:20px 16px;
    }

    .charity-grid h3 {
        font-size:22px;
    }

    .charity-number {
        font-size:8px;
    }

    .support {
        padding:30px 24px;
    }

    .support-grid {
        grid-template-columns:1fr;
        gap:28px;
    }

    .support-grid h3 {
        margin-top:8px;
    }

    .final-cta {
        align-items:start;
        flex-direction:column;
        padding:50px 0;
    }

    .final-cta h2 {
        font-size:44px;
    }

    footer {
        flex-direction:column;
    }

    .actions {
        gap:20px;
    }

    .stream-art h3 {
        font-size:29px;
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }

    a,button {
        transition:none;
    }

}


/* 10. FESTIVE COLOUR AND DECORATION OVERRIDES. These deliberately override the base rules above. */
/* Christmas edition: evergreen, cranberry, warm cream and candlelight gold. */
:root {
    --paper:#0b201b;
    --ink:#102b24;
    --surface:#15362d;
    --text:#fff6e5;
    --muted:#c2cfc3;
    --lime:#f3cf81;
    --purple:#f1c3a5;
    --line:#365046;
}

body {
    background-image:radial-gradient(circle at 8% 12%,#204b343f,transparent 30%),radial-gradient(circle at 95% 65%,#67422c22,transparent 25%);
}

header {
    padding-top:12px;
}

.christmas-lights {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:22px;
    border-top:2px solid #46614b;
    display:flex;
    justify-content:space-around;
    pointer-events:none;
    overflow:hidden;
}

.christmas-lights i {
    display:block;
    width:7px;
    height:11px;
    border-radius:3px 3px 7px 7px;
    background:#f3cf81;
    box-shadow:0 0 14px #f3cf81a6;
    margin-top:3px;
    transform:rotate(12deg);
}

.christmas-lights i:nth-child(3n) {
    background:#d9746a;
    box-shadow:0 0 14px #f1867288;
    transform:rotate(-12deg);
}

.christmas-lights i:nth-child(3n+1) {
    background:#b9d4a0;
    box-shadow:0 0 14px #a5d08f88;
}

.hero {
    border:1px solid #43604a;
    box-shadow:0 20px 80px #0003;
}

.hero-copy {
    background:radial-gradient(ellipse at 0 100%,#31523c,transparent 70%);
    padding:55px 8%;
}

h1 {
    font-size:clamp(43px,4.6vw,67px);
    line-height:1.13;
    letter-spacing:-.055em;
}

h1 em {
    color:#f3cf81;
}

.button {
    background:#f3cf81;
    color:#233327;
}

.button:hover {
    background:#ffe3aa;
}

.poster {
    background:#9d2839;
    background-image:radial-gradient(ellipse at 100% 0,#c7544b77,transparent 70%);
    color:#fff3d7;
    padding:30px 35px;
    min-height:640px;
}

.poster-title {
    font-size:clamp(64px,7.2vw,105px);
    text-shadow:3px 4px 0 #561f2c;
    transform:rotate(-5deg);
    margin-top:65px;
}

.poster-title sup {
    font-size:28px;
}

.poster-line {
    background:#f3cf8180;
}

.poster>p {
    color:#fff3d7;
    font-size:29px;
    position:relative;
    z-index:2;
    margin-left:0;
    max-width:290px;
    line-height:1.15;
}

.poster>p i {
    display:inline-block;
    background:#f3cf81;
    color:#532332;
    transform:rotate(-3deg);
    padding:2px 7px;
    margin-top:4px;
}

.star-one {
    font-size:115px;
    top:75px;
    right:-12px;
    color:#f3cf81;
    opacity:.85;
}

.poster-bottom {
    color:#f9dca4;
}

.snow-dots {
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:radial-gradient(circle,#fff5 1px,transparent 2px),radial-gradient(circle,#fff3 1.5px,transparent 2.5px);
    background-size:43px 57px,83px 91px;
    background-position:0 10px,23px 45px;
}

.bauble {
    position:absolute;
    border-radius:50%;
    width:43px;
    height:43px;
    background:radial-gradient(circle at 30% 28%,#fff0bc,#d6a04b 65%,#aa682d);
    right:70px;
    top:61px;
    box-shadow:inset -4px -5px 0 #9b572744,0 5px 12px #43102244;
}

.bauble:before {
    content:'';
    position:absolute;
    width:1px;
    height:66px;
    background:#f3cf81;
    bottom:100%;
    left:50%;
}

.bauble:after {
    content:'';
    position:absolute;
    top:-5px;
    left:16px;
    width:12px;
    height:6px;
    background:#d5a65e;
    border-radius:2px;
}

.bauble-two {
    right:140px;
    top:30px;
    width:29px;
    height:29px;
    background:radial-gradient(circle at 30% 28%,#bdd4a5,#3f7651 65%);
}

.bauble-two:after {
    left:9px;
}

.festive-tree {
    position:absolute;
    right:28px;
    bottom:65px;
    width:126px;
    height:200px;
    transform:rotate(6deg);
}

.festive-tree>span {
    position:absolute;
    top:-8px;
    left:48px;
    font-size:32px;
    z-index:3;
    color:#f8d992;
}

.festive-tree i {
    position:absolute;
    left:13px;
    top:57px;
    width:100px;
    height:95px;
    background:#1e5742;
    clip-path:polygon(50% 0,100% 100%,0 100%);
    filter:drop-shadow(2px 2px 0 #123426);
}

.festive-tree i:nth-of-type(1) {
    width:72px;
    height:75px;
    left:27px;
    top:28px;
    z-index:2;
    background:#37795a;
}

.festive-tree i:nth-of-type(3) {
    width:126px;
    height:108px;
    left:0;
    top:83px;
    background:#163e32;
}

.festive-tree b {
    position:absolute;
    bottom:0;
    left:55px;
    width:17px;
    height:20px;
    background:#dfaa65;
}

.ribbon {
    background:#7d2333;
    border-color:#b75f5b;
}

.ribbon b {
    color:#f3cf81;
}

.watch-section {
    background:#102b24;
    border-top:1px solid #365046;
    border-bottom:1px solid #365046;
}

.stream-art {
    border-color:#58715a;
    background:radial-gradient(circle at 15% 20%,#edc47022 1px,transparent 3px),radial-gradient(circle at 80% 65%,#edc47033 1px,transparent 3px),radial-gradient(ellipse,#315640,#16372e);
    background-size:35px 57px,67px 83px,auto;
}

.play {
    border-color:#edc470;
    background:#f3cf8110;
    color:#f3cf81;
}

.charity-grid {
    gap:14px;
    border:0;
}

.charity-grid article {
    border:1px solid #365046;
    border-top:3px solid #9d4350;
    background:#102b24;
    border-radius:10px;
}

.charity-grid article:nth-child(2n) {
    border-top-color:#cfad6b;
}

.charity-number {
    color:#dfbc85;
}

.support {
    border:1px solid #43604a;
    background:linear-gradient(120deg,#193d30,#102b24);
    position:relative;
}

.final-cta {
    position:relative;
}

.final-cta h2 {
    font-size:clamp(34px,4vw,55px);
}

.final-cta:before {
    content:'✧';
    font-size:95px;
    position:absolute;
    right:35%;
    top:30px;
    color:#f3cf8125;
    pointer-events:none;
}

.text-link {
    border-color:#a89a6b;
}

@media(max-width:1000px) {
    .poster>p {
        font-size:25px;
        max-width:230px;
    }

    .festive-tree {
        right:8px;
        transform:scale(.85) rotate(6deg);
        transform-origin:bottom right;
    }

    .hero-copy {
        padding:42px 7%;
    }

}

@media(max-width:680px) {
    h1 {
        font-size:46px;
    }

    .hero-copy {
        padding:35px 25px 40px;
    }

    .poster {
        min-height:530px;
        padding:25px;
    }

    .poster-title {
        font-size:85px;
        margin-top:60px;
    }

    .poster>p {
        font-size:25px;
        margin-bottom:35px;
    }

    .poster-title sup {
        top:-42px;
    }

    .star-one {
        top:55px;
        font-size:100px;
    }

    .bauble-one {
        right:55px;
    }

    .bauble-two {
        right:115px;
    }

    .festive-tree {
        right:22px;
        bottom:65px;
        transform:scale(.8) rotate(6deg);
    }

    .charity-grid {
        gap:10px;
    }

    .charity-grid article {
        padding:18px 13px;
    }

    .charity-grid p {
        font-size:12px;
    }

    .final-cta:before {
        right:5%;
        top:25px;
    }

}


/* 11. EVENT LOGO PANEL */
/* Official event and fundraiser branding, kept at their original proportions. */
.event-logos {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:60px 0 30px;
    padding:25px 20px;
    background:#fff6e5;
    border:1px solid #f3cf81;
    border-radius:14px;
    transform:rotate(-3deg);
    box-shadow:0 8px 0 #641c2b33;
}

.event-logo {
    display:block;
    width:100%;
    height:auto;
    max-width:450px;
}

.logo-times {
    font-size:24px;
    line-height:1;
    color:#825a42;
}

.event-planet-logo {
    width:190px;
    max-width:65%;
    height:auto;
}

.poster .star-one {
    z-index:0;
}

.poster>p {
    margin-top:20px;
}

.poster-line {
    flex-shrink:0;
}

@media(max-width:680px) {
    .event-logos {
        margin-top:65px;
        padding:22px 16px;
        gap:10px;
    }

    .event-planet-logo {
        width:160px;
    }

    .poster {
        min-height:570px;
    }

    .poster>p {
        font-size:23px;
    }

}


/* 12. TILTIFY FUNDRAISING PANEL: appearance only; connection notes are in TILTIFY_SETUP.md. */
/* Campaign launch state: totals remain unpublished until Tiltify is connected. */
.fundraising {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:65px;
    padding:45px;
    margin-top:65px;
    background:linear-gradient(120deg,#193d30,#102b24);
    border:1px solid #6d704c;
    border-radius:22px;
    align-items:center;
}

.fundraising h2 {
    margin-bottom:20px;
}

.fundraising-copy>p {
    max-width:490px;
    font-size:15px;
}

.campaign-status {
    display:inline-block;
    margin-top:22px;
    padding:7px 13px;
    background:#f3cf8115;
    border:1px solid #f3cf8144;
    border-radius:30px;
    color:#f3cf81;
    font-size:12px;
}

.fundraising-total {
    padding:30px;
    background:#0b201b;
    border:1px solid #365046;
    border-radius:15px;
}

.fundraising-total .amount {
    font-family:Manrope,Arial,sans-serif;
    font-size:clamp(30px,3.4vw,48px);
    font-weight:800;
    letter-spacing:-.05em;
    line-height:1.2;
    margin:20px 0 8px;
    color:#fff6e5;
}

.goal {
    font-size:14px;
}

.pending-progress {
    height:12px;
    background:repeating-linear-gradient(135deg,#365046,#365046 8px,#294237 8px,#294237 16px);
    border-radius:20px;
    margin:22px 0 15px;
}

.fundraising-note {
    font-size:12px;
}

.donation-pending {
    border-top:1px solid #365046;
    padding-top:18px;
    margin-top:20px;
    font-size:13px;
    color:#f3cf81;
}

@media(max-width:1000px) {
    nav {
        gap:16px;
    }

    .fundraising {
        gap:30px;
        padding:30px;
    }

}

@media(max-width:680px) {
    .fundraising {
        grid-template-columns:1fr;
        padding:25px;
        gap:25px;
        margin-top:40px;
    }

    .fundraising-total {
        padding:24px;
    }

    .fundraising-total .amount {
        font-size:36px;
    }

}


/* 13. SNOW CONTROLS AND ANIMATION */
/* Optional decorative snow never intercepts clicks or enters the accessibility tree. */
.top-controls {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding-top:30px;
}

.back-button,.snow-toggle {
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:8px 15px;
    border:1px solid #60725b;
    border-radius:24px;
    background:#102b24;
    color:#fff6e5;
    font-size:12px;
    font-weight:700;
}

.back-button:hover,.snow-toggle:hover {
    background:#294b39;
}

.snow-toggle[hidden] {
    display:none;
}

header {
    padding-top:0;
    min-height:95px;
}

#falling-snow {
    position:fixed;
    inset:0;
    z-index:10;
    pointer-events:none;
    overflow:hidden;
    contain:strict;
}

#falling-snow[hidden] {
    display:none;
}

.snowflake {
    position:absolute;
    top:-15px;
    width:var(--size);
    height:var(--size);
    border-radius:50%;
    background:#fffaf0;
    opacity:var(--opacity);
    animation:snowfall var(--duration) linear var(--delay) infinite;
    will-change:transform;
}

@keyframes snowfall {
    from {
        transform:translate3d(0,-20px,0);
    }

    to {
        transform:translate3d(var(--drift),calc(100vh + 30px),0);
    }

}

@media(max-width:680px) {
    .top-controls {
        padding-top:28px;
        gap:8px;
    }

    .back-button,.snow-toggle {
        font-size:11px;
        padding:8px 12px;
    }

    header {
        min-height:85px;
    }

}

.charity-logo {
    height:105px;
    margin:20px 0 15px;
    padding:14px;
    background:#fff;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.charity-logo img {
    display:block;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.charity-grid h3 {
    margin-top:15px;
}

@media(max-width:680px) {
    .charity-logo {
        height:90px;
        padding:12px;
    }

}


/* Hidden launch elements must stay hidden until configured. */
[hidden] {
    display: none !important;
}