/* ==========================================================
   Champagne Skies — a winter's night at the chalet
   Alpine night blue, rose gold and snow; Playfair, Pinyon Script and Lora.
   ========================================================== */
.cs {
  --g-bg: #0e1730; --g-bg2: #16213f; --g-ink: #f7f1ea; --g-muted: rgba(247, 241, 234, 0.76);
  --g-accent: #e7b7a0; --g-accent2: #ffe2c8; --g-card: #fffaf4; --g-card-ink: #2a2230;
  --g-display: 'Playfair Display', serif; --g-script: 'Pinyon Script', cursive;
  --g-body: 'Lora', serif; --g-label: 'Josefin Sans', 'Sora', sans-serif;
}
.cs .vx-loader { background: linear-gradient(180deg, #0e1730, #2b2a4a 70%, #6b4a5a); }
.cs .gr-dear, .cs .gr-to { font-style: normal; font-size: 1.6rem; }
.cs .gr-hot { overflow: visible; }
.cs-up { inset: -70% 0 auto 0; height: 70%; }
.cs-kicker { margin: 0 0 10px; font: 600 0.66rem var(--g-label); letter-spacing: 0.3em; text-transform: uppercase; color: var(--g-accent); }
.cs-h2 { margin: 0 0 22px; font: 400 clamp(2rem, 9vw, 2.6rem)/1.08 var(--g-display); color: var(--g-ink); }
.cs-sub { margin: -10px 0 26px; font: italic 400 0.95rem var(--g-body); color: var(--g-muted); }
.cs-link { margin-top: 16px; padding: 10px 4px; border: 0; background: none; color: var(--g-accent2); font: 600 0.7rem var(--g-label); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }

/* ---------- frosted window ---------- */
.cs-window-sec { padding: 86px 16px 70px; text-align: center; background: linear-gradient(180deg, #0e1730, #2a1f1a 30%, #3a2a20); }
.cs-window { position: relative; max-width: 380px; aspect-ratio: 0.72; margin: 0 auto; border: 14px solid #5a3b26; border-radius: 120px 120px 6px 6px; overflow: hidden; background: #0b1226; box-shadow: inset 0 0 0 3px #3e2717, 0 40px 60px -30px rgba(0, 0, 0, 0.9); }
.cs-window-view { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(0.45) saturate(1.2); }
.cs-letter { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 27% 24px 34px; text-align: left; color: #fff8ef; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
.cs-letter p { margin: 0 0 12px; font: 400 0.95rem/1.62 var(--g-body); }
.cs-letter-to { font: 400 1.9rem/1.1 var(--g-script) !important; color: var(--g-accent2); }
.cs-letter-sign { margin-top: 6px !important; font-style: italic !important; }
.cs-letter-from { font: 600 0.66rem var(--g-label) !important; letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-accent2); }
.cs-frost { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.cs-mullion { position: absolute; background: #5a3b26; pointer-events: none; box-shadow: 0 0 0 1px #3e2717; }
.cs-mullion--v { left: 50%; top: 0; height: 19%; width: 8px; margin-left: -4px; }
.cs-mullion--h { left: 0; right: 0; top: 19%; height: 8px; }
.cs-sill { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(#fff, #dfe8f2); border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; opacity: 0.95; }
.cs-wipe-hint { position: absolute; left: 50%; top: 52%; margin: 0; padding: 9px 16px; transform: translateX(-50%); border-radius: 30px; background: rgba(14, 23, 48, 0.75); color: #fff; font: 600 0.62rem var(--g-label); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.cs-wipe-hint i { display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -5px; border-radius: 50%; background: #fff; animation: cs-wipe 1.6s ease-in-out infinite; }
@keyframes cs-wipe { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }

/* ---------- ski lift ---------- */
.cs-lift-sec { background: #0e1730; }
.cs-lift { position: relative; height: 100svh; overflow: hidden; background: linear-gradient(180deg, #0b1430 0%, #2b2f5c 55%, #e7b7a0 100%); }
.cs-peaks { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; }
.cs-peak-far { fill: #3c4170; }
.cs-peak-near { fill: #f2f4fb; }
.cs-lift-head { position: absolute; top: 9%; left: 0; right: 0; text-align: center; z-index: 2; }
.cs-cable-track { position: absolute; top: 34%; left: 0; display: flex; gap: 80px; padding: 0 60px 0 40px; transform-origin: 0 0; }
.cs-cable { position: absolute; left: -40px; right: -200px; top: 0; height: 2px; background: #c9cfdf; box-shadow: 0 0 0 0.5px #222; transform: rotate(-4deg); transform-origin: 0 0; }
.cs-gondola { position: relative; flex: 0 0 auto; width: 214px; margin: 0; display: grid; justify-items: center; transform-origin: 50% 0; top: calc(var(--i) * -15px); }
.cs-arm { width: 3px; height: 54px; background: #c9cfdf; position: relative; }
.cs-arm::before { content: ''; position: absolute; top: -6px; left: -9px; width: 21px; height: 12px; border-radius: 6px; background: #8a90a6; }
.cs-cabin { position: relative; width: 200px; height: 182px; padding: 26px 14px 14px; border-radius: 26px 26px 18px 18px; background: linear-gradient(180deg, #c8323d, #8f1f2a); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.15), 0 24px 30px -18px rgba(0, 0, 0, 0.7); }
.cs-cabin-roof { position: absolute; left: 20px; right: 20px; top: -8px; height: 14px; border-radius: 10px 10px 0 0; background: #f2f4fb; }
.cs-cabin-window { display: block; height: 118px; border-radius: 12px; overflow: hidden; border: 4px solid #3a1418; background: #000; }
.cs-cabin-window img { width: 100%; height: 100%; object-fit: cover; }
.cs-cabin-no { position: absolute; right: 14px; bottom: 6px; font: 700 0.8rem var(--g-label); color: #ffe2c8; }
.cs-gondola figcaption { width: 190px; margin-top: 14px; padding: 10px 12px; border-radius: 6px; background: #fffaf4; color: #2a2230; font: italic 400 0.85rem/1.4 var(--g-body); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.6); }
.cs-gondola strong { display: block; font: 400 1.5rem/1 var(--g-script); color: #b8323a; }
.cs-lift-note { position: absolute; bottom: 5%; left: 0; right: 0; margin: 0; text-align: center; font: 600 0.62rem var(--g-label); letter-spacing: 0.24em; text-transform: uppercase; color: #2a2230; }

/* ---------- crackers ---------- */
.cs-crackers-sec { padding: 86px 14px; text-align: center; background: radial-gradient(circle at 50% 0%, #2b2f5c, var(--g-bg) 70%); }
.cs-crackers { display: grid; gap: 26px; max-width: 380px; margin: 0 auto; }
.cs-cracker { position: relative; height: 70px; display: flex; justify-content: center; cursor: grab; touch-action: pan-y; outline: none; }
.cs-cr-half { position: relative; z-index: 2; display: flex; align-items: center; }
.cs-cr-body { display: block; width: 92px; height: 54px; background: repeating-linear-gradient(115deg, hsl(var(--hue) 55% 42%) 0 14px, hsl(var(--hue) 50% 52%) 14px 22px, #f0c98a 22px 25px); box-shadow: inset 0 6px 8px rgba(255, 255, 255, 0.25), inset 0 -8px 10px rgba(0, 0, 0, 0.25); }
.cs-cr-end { display: block; width: 56px; height: 54px; background: hsl(var(--hue) 55% 42%); clip-path: polygon(0 0, 100% 22%, 100% 78%, 0 100%, 26% 50%); }
.cs-cr-half--l .cs-cr-end { transform: scaleX(-1); }
.cs-cr-half--l .cs-cr-body { border-radius: 4px 0 0 4px; }
.cs-cr-half--r .cs-cr-body { border-radius: 0 4px 4px 0; border-left: 2px dashed rgba(255, 255, 255, 0.6); }
.cs-slip { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; justify-items: center; gap: 4px; width: 250px; margin-left: -125px; padding: 22px 16px 14px; border-radius: 4px; background: #fffaf4; color: #2a2230; transform: translateY(-50%) scale(0.2); opacity: 0; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.7); }
.cs-slip strong { font: 400 1.6rem/1 var(--g-script); color: hsl(var(--hue) 55% 40%); }
.cs-slip em { font: italic 400 0.95rem/1.45 var(--g-body); }
.cs-crown { position: absolute; top: -18px; width: 54px; height: 26px; background: hsl(var(--hue) 70% 62%); clip-path: polygon(0 100%, 0 20%, 20% 60%, 35% 0, 50% 55%, 65% 0, 80% 60%, 100% 20%, 100% 100%); }
.cs-cracker.is-pulled { height: 150px; }

/* ---------- clock tower ---------- */
.cs-tower-sec { padding: 86px 18px 90px; text-align: center; background: linear-gradient(180deg, var(--g-bg), #1a1a33); }
.cs-tower { position: relative; width: 270px; margin: 0 auto 28px; padding: 70px 26px 26px; border-radius: 135px 135px 10px 10px; background: linear-gradient(90deg, #b3a58f, #d8ccb4 50%, #b3a58f); box-shadow: inset 0 0 0 6px #9c8e77, 0 30px 50px -30px rgba(0, 0, 0, 0.9); }
.cs-bell { position: absolute; left: 50%; top: 12px; width: 52px; height: 52px; margin-left: -26px; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 10%; }
.cs-bell svg { width: 100%; height: 100%; fill: #c9a14a; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4)); }
.cs-clock svg { display: block; width: 100%; }
.cs-clock-rim { fill: #2a2230; stroke: #c9a14a; stroke-width: 4; }
.cs-clock-face { fill: #f8f2e4; }
.cs-clock text { fill: #2a2230; font: 600 14px var(--g-display); text-anchor: middle; }
.cs-hand { fill: #2a2230; }
.cs-sec { stroke: #b8323a; stroke-width: 1.4; }
.cs-pin { fill: #c9a14a; }
.cs-clock-city { margin: 12px 0 0; font: 600 0.66rem var(--g-label); letter-spacing: 0.2em; text-transform: uppercase; color: #2a2230; }
.cs .vx-countdown b { font-family: var(--g-display); color: var(--g-accent2); }

/* ---------- snowfall of wishes ---------- */
.cs-snow-sec { position: relative; padding: 86px 16px; text-align: center; background: linear-gradient(180deg, #1a1a33, #2b2f5c 70%, #e9eef8); overflow: hidden; }
.cs-drift { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 12px; max-width: 400px; margin: 0 auto 40px; }
.cs-flake { position: relative; padding: 18px 12px 12px; border-radius: 10px; background: #fffaf4; color: #2a2230; text-align: left; transform: rotate(var(--r)); box-shadow: 0 16px 24px -14px rgba(0, 0, 0, 0.6); }
.cs-flake::before { content: ''; position: absolute; left: -6px; right: -6px; top: -12px; height: 22px; border-radius: 20px 24px 12px 14px; background: #fff; box-shadow: 0 2px 0 #dfe8f2; }
.cs-flake p { margin: 0 0 8px; font: italic 400 0.9rem/1.45 var(--g-body); }
.cs-flake strong { font: 600 0.6rem var(--g-label); letter-spacing: 0.16em; text-transform: uppercase; color: #b8323a; }
.cs-form { position: relative; z-index: 1; max-width: 380px; margin: 0 auto; padding: 22px 18px; border-radius: 18px; background: rgba(255, 250, 244, 0.97); color: #2a2230; --vx-ink: #2a2230; text-align: left; }

/* ---------- fireworks sky ---------- */
.cs-sky-sec { background: #070b18; }
.cs-sky { position: relative; height: 100svh; overflow: hidden; cursor: crosshair; touch-action: pan-y; }
.cs-sky-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.cs-sky-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-sky-words { position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; pointer-events: none; }
.cs-sky-big { margin: 0; font: 400 clamp(3rem, 15vw, 4.2rem)/1 var(--g-display); color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); }
.cs-sky-big em { font: 400 1.15em var(--g-script); color: var(--g-accent2); }
.cs-sky-names { margin: 10px 0 0; font: 400 1.5rem var(--g-script); color: #fff; }
.cs-share { padding: 40px 20px 130px; text-align: center; }

@media (prefers-reduced-motion: reduce) { .cs-wipe-hint i { animation: none; } }

/* ---------- Readable for every guest: labels from 13.5px, text from 15px ---------- */
:root .cs-clock-city { font-size: 0.844rem; letter-spacing: 0.14em; }
:root .cs-clock-city > span { font-size: 0.844rem; letter-spacing: 0.14em; }
:root .cs-flake > p { font-size: 0.938rem; }
:root .cs-flake > strong { font-size: 0.844rem; }
:root .cs-gondola > figcaption { font-size: 0.938rem; }
:root .cs-kicker { font-size: 0.844rem; letter-spacing: 0.14em; }
:root .cs-letter-from { font-size: 0.844rem; letter-spacing: 0.14em; }
:root .cs-lift-note { font-size: 0.844rem; letter-spacing: 0.14em; }
:root .cs-link { font-size: 0.844rem; letter-spacing: 0.14em; }
:root .cs-wipe-hint { font-size: 0.844rem; letter-spacing: 0.14em; }
:root .gr-stage-bottom > small { font-size: 0.938rem; }
/* ---------- end readable ---------- */