:root {
    --ink: #263c3a;
    --green: #5d7663;
    --green-deep: #3f5e54;
    --sage: #a9baa3;
    --cream: #f8f3e9;
    --warm: #e9b75d;
    --red: #c83b31;
    --red-dark: #99251f;
    --white: #fffdf8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 16% 10%, rgba(255,255,255,.95), transparent 28%),
        linear-gradient(135deg, #faf7ef 0%, #edf2e8 52%, #dce8dc 100%);
    font-family: ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

button, a { font: inherit; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.mzl-ten-overlay { position: fixed; inset: 0; z-index: 35; display: grid; place-content: center; justify-items: center; color: var(--ink); background: radial-gradient(circle, rgba(255,253,248,.72), rgba(232,239,228,.9)); backdrop-filter: blur(10px); }
.mzl-ten-overlay span { display: block; min-width: 1.2em; color: var(--red); font-family: Georgia, "Times New Roman", serif; font-size: clamp(170px, 35vw, 430px); font-weight: 500; line-height: .8; letter-spacing: -.08em; text-align: center; text-shadow: 0 18px 60px rgba(153,37,31,.16); }
.mzl-ten-overlay span.is-popping { animation: countdown-pop .7s cubic-bezier(.2,.8,.2,1) both; }
.mzl-ten-overlay small { margin-top: 38px; color: var(--green-deep); font-size: clamp(15px, 2vw, 22px); font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.mzl-armed-screen { position: fixed; inset: 0; z-index: 36; display: grid; place-content: center; justify-items: center; padding: clamp(20px,4vw,48px); overflow: auto; color: var(--ink); background: radial-gradient(circle at 50% 42%,#fffdf8 0,#f5f3e9 46%,#dce8dc 100%); text-align: center; }
.mzl-armed-screen::before { content:""; position:absolute; width:min(70vw,720px); aspect-ratio:1; border:1px solid rgba(93,118,99,.18); border-radius:50%; box-shadow:0 0 0 70px rgba(93,118,99,.035),0 0 0 140px rgba(93,118,99,.025); pointer-events:none; }
.mzl-armed-eyebrow { position:relative; z-index:1; margin:0 0 8px; color:var(--green-deep); font-size:clamp(11px,1.3vw,15px); font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.mzl-armed-screen h2 { position:relative; z-index:1; margin:0 0 clamp(20px,3vh,34px); color:var(--ink); font-family:Georgia,"Times New Roman",serif; font-size:clamp(38px,5vw,72px); font-weight:500; line-height:1; letter-spacing:-.045em; }
.mzl-physical-button { position:relative; z-index:1; width:clamp(210px,min(32vw,40vh),390px); padding-top:27%; filter:drop-shadow(0 28px 28px rgba(31,31,29,.28)); animation:buzzer-ready 2.2s ease-in-out infinite; }
.mzl-dome { position:absolute; z-index:3; top:0; left:11%; width:78%; height:37%; border:2px solid rgba(108,10,12,.45); border-radius:50% 50% 16% 16% / 70% 70% 26% 26%; background:radial-gradient(ellipse at 34% 18%,rgba(255,255,255,.72) 0 4%,rgba(255,255,255,.18) 5% 17%,transparent 19%),linear-gradient(155deg,#ef514a 0,#ca2428 48%,#8e1019 100%); box-shadow:inset -18px -20px 30px rgba(104,0,12,.28),inset 12px 10px 24px rgba(255,139,129,.36),0 10px 8px rgba(81,7,10,.28); }
.mzl-dome i { position:absolute; left:28%; top:14%; width:32%; height:8%; border-radius:50%; background:rgba(255,255,255,.36); filter:blur(2px); transform:rotate(-7deg); }
.mzl-button-collar { position:relative; z-index:2; width:88%; height:30px; margin:0 auto -10px; border-radius:50%; background:linear-gradient(#4c4a46,#121311 65%,#030403); box-shadow:inset 0 4px 4px rgba(255,255,255,.2),0 6px 8px rgba(0,0,0,.35); }
.mzl-button-base { position:relative; z-index:1; display:grid; place-items:center; width:100%; aspect-ratio:1.08; border:3px solid #050605; border-radius:16% 16% 11% 11%; background:linear-gradient(145deg,#343631 0,#111310 24%,#030403 100%); box-shadow:inset 0 0 0 14px #171916,inset 0 0 0 17px #2a2b27; }
.mzl-button-base span { color:#eef1ed; font-family:Arial,sans-serif; font-size:clamp(150px,25vw,310px); font-weight:200; line-height:.65; text-shadow:0 4px 0 #9da29e,0 8px 12px rgba(0,0,0,.6); transform:translateY(2%); }
.mzl-glow { position: fixed; border-radius: 999px; filter: blur(2px); opacity: .6; pointer-events: none; }
.mzl-glow-one { width: 360px; height: 360px; right: -100px; top: -120px; background: rgba(235,183,89,.22); }
.mzl-glow-two { width: 460px; height: 460px; left: -220px; bottom: -220px; background: rgba(85,120,105,.16); }

.mzl-shell { min-height: 100vh; width: min(1240px, calc(100% - 48px)); margin: 0 auto; display: flex; flex-direction: column; position: relative; z-index: 2; }
.mzl-brand { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(54,82,75,.14); }
.mzl-brand img { width: min(260px, 58vw); height: auto; display: block; }
.mzl-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid rgba(63,94,84,.18); border-radius: 999px; background: rgba(255,255,255,.58); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mzl-pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 6px rgba(233,183,93,.18); animation: pulse 1.8s ease-in-out infinite; }

.mzl-stage { flex: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr); align-items: center; gap: 24px; padding: 54px 0 34px; }
.mzl-copy { position: relative; z-index: 4; padding: 18px 0 42px; }
.mzl-eyebrow { margin: 0 0 22px; color: var(--green); font-size: 14px; line-height: 1.3; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; max-width: 720px; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(48px, 6.2vw, 88px); font-weight: 500; line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
h1 em { color: var(--green); font-weight: 500; text-decoration: none; }
.mzl-intro { max-width: 650px; margin: 28px 0 34px; color: #526461; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.62; }

.mzl-countdown { display: flex; align-items: flex-start; gap: clamp(8px, 1.4vw, 20px); }
.mzl-countdown div { min-width: clamp(64px, 7vw, 90px); }
.mzl-countdown strong { display: block; color: var(--green-deep); font-family: Georgia, serif; font-size: clamp(36px, 4.4vw, 60px); font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1; }
.mzl-countdown span { display: block; margin-top: 10px; color: #73827e; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mzl-countdown b { padding-top: 4px; color: var(--sage); font-family: Georgia, serif; font-size: clamp(30px, 4vw, 54px); font-weight: 400; line-height: 1; }
.mzl-date { min-height: 24px; margin: 24px 0 0; color: var(--green-deep); font-size: 15px; font-weight: 700; }

.mzl-sophie-wrap { align-self: end; position: relative; min-height: min(72vh, 720px); display: flex; justify-content: center; align-items: flex-end; isolation: isolate; }
.mzl-sophie-wrap::before { content: ""; position: absolute; z-index: -2; width: min(35vw, 470px); aspect-ratio: 1; left: 50%; bottom: 13%; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(201,219,197,.72)); box-shadow: 0 30px 90px rgba(49,79,69,.16), inset 0 0 0 1px rgba(255,255,255,.7); }
.mzl-sophie { position: relative; z-index: 3; display: block; max-width: 100%; width: auto; height: min(78vh, 770px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 28px 28px rgba(39,67,59,.2)); transform-origin: 50% 100%; animation: breathe 4s ease-in-out infinite; }
.mzl-orbit { position: absolute; left: 50%; bottom: 14%; border: 1px solid rgba(85,117,96,.2); border-radius: 50%; transform: translateX(-50%) rotate(-12deg); z-index: -1; }
.orbit-one { width: min(41vw, 560px); aspect-ratio: 1; }
.orbit-two { width: min(47vw, 650px); aspect-ratio: 1; opacity: .55; }
.mzl-spark { position: absolute; color: var(--warm); font-size: 34px; animation: twinkle 2.2s ease-in-out infinite; }
.spark-one { top: 20%; left: 4%; }
.spark-two { right: 3%; top: 36%; animation-delay: .6s; font-size: 23px; }

.mzl-launch-zone { margin-top: 26px; }
.mzl-launch-button { position: relative; min-width: 260px; min-height: 68px; padding: 17px 30px; border: 0; border-radius: 999px; overflow: hidden; color: white; background: linear-gradient(145deg, #dc4b40, var(--red)); box-shadow: 0 13px 0 var(--red-dark), 0 22px 42px rgba(165,43,34,.28), inset 0 2px 0 rgba(255,255,255,.35); cursor: pointer; font-weight: 850; font-size: 18px; letter-spacing: .01em; transform: translateY(0); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.mzl-launch-button:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 15px 0 var(--red-dark), 0 26px 46px rgba(165,43,34,.32), inset 0 2px 0 rgba(255,255,255,.4); }
.mzl-launch-button:not(:disabled):active { transform: translateY(9px); box-shadow: 0 4px 0 var(--red-dark), 0 11px 24px rgba(165,43,34,.25); }
.mzl-launch-button:disabled { cursor: default; opacity: .88; }
.mzl-button-icon { margin-right: 9px; }
.mzl-button-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.25) 46%, transparent 68%); transform: translateX(-120%); animation: shine 2.8s ease-in-out infinite; }
.mzl-enter { display: inline-flex; align-items: center; gap: 14px; margin-top: 32px; padding: 15px 24px; border: 1px solid rgba(63,94,84,.25); border-radius: 999px; color: var(--green-deep); background: rgba(255,255,255,.68); text-decoration: none; font-weight: 800; }
.mzl-enter span { font-size: 24px; transition: transform .2s ease; }
.mzl-enter:hover span { transform: translateX(4px); }

footer { min-height: 72px; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 12px; border-top: 1px solid rgba(54,82,75,.14); color: #6e7d78; font-size: 13px; line-height: 1.45; letter-spacing: .05em; text-align: center; }
footer strong { color: var(--green-deep); font-weight: 850; }

.mzl-page.is-ready .mzl-pill { color: var(--red); }
.mzl-page.is-ready .mzl-pill i { background: var(--red); box-shadow: 0 0 0 6px rgba(200,59,49,.15); }
.mzl-page.is-ready .mzl-sophie { animation: ready-bounce 1.6s ease-in-out infinite; }
.mzl-page.is-counting .mzl-shell { filter: saturate(.75); transform: scale(.985); }
.mzl-page.is-counting, .mzl-page.is-armed, .mzl-page.is-live, .mzl-page.is-revealing { overflow: hidden; }
.mzl-page.is-counting .mzl-demo-control, .mzl-page.is-armed .mzl-demo-control, .mzl-page.is-launching .mzl-demo-control, .mzl-page.is-live .mzl-demo-control, .mzl-page.is-revealing .mzl-demo-control { display: none !important; }
.mzl-demo-launch { display:none; }
.mzl-page.is-armed .mzl-demo-launch { display:block; }
.mzl-page.is-launching .mzl-shell { animation: shell-celebrate 1s ease both; }
.mzl-page.is-launching .mzl-sophie { animation: sophie-party .9s cubic-bezier(.2,.8,.2,1) both; }
.mzl-page.is-launching .mzl-countdown, .mzl-page.is-launching .mzl-date, .mzl-page.is-launching .mzl-launch-zone { display: none !important; }
.mzl-page.is-live h1 em { color: var(--red); }
.mzl-page.is-live .mzl-pill { color: var(--green-deep); }
.mzl-page.is-live .mzl-pill i { background: #54a46f; }
.mzl-page.is-revealing .mzl-shell { animation: page-away 1s cubic-bezier(.7,0,.3,1) forwards; pointer-events: none; }
.mzl-page.is-revealing .mzl-glow { animation: fade-away .65s ease forwards; }

@keyframes pulse { 0%,100%{transform:scale(.85);opacity:.7} 50%{transform:scale(1.15);opacity:1} }
@keyframes breathe { 0%,100%{transform:translateY(0) rotate(-.3deg)} 50%{transform:translateY(-7px) rotate(.35deg)} }
@keyframes ready-bounce { 0%,100%{transform:translateY(0) rotate(-.4deg)} 50%{transform:translateY(-12px) rotate(.8deg)} }
@keyframes twinkle { 0%,100%{transform:scale(.7) rotate(0);opacity:.45} 50%{transform:scale(1.2) rotate(22deg);opacity:1} }
@keyframes shine { 0%,30%{transform:translateX(-120%)} 65%,100%{transform:translateX(120%)} }
@keyframes shell-celebrate { 0%{transform:scale(1)} 38%{transform:scale(.985)} 100%{transform:scale(1)} }
@keyframes sophie-party { 0%{transform:scale(1) translateY(0)} 45%{transform:scale(.92) translateY(12px)} 100%{transform:scale(1.05) translateY(-4px)} }
@keyframes countdown-pop { 0%{opacity:0;transform:scale(.5) rotate(-5deg)} 42%{opacity:1;transform:scale(1.12) rotate(1deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes page-away { 0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} 100%{opacity:0;transform:translateY(-42px) scale(.9);filter:blur(13px)} }
@keyframes fade-away { to{opacity:0} }
@keyframes buzzer-ready { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-5px) scale(1.008)} }

@media (max-width: 900px) {
    .mzl-shell { width: min(100% - 32px, 760px); }
    .mzl-brand { min-height: 92px; }
    .mzl-stage { grid-template-columns: 1fr; padding-top: 38px; text-align: center; }
    .mzl-copy { padding-bottom: 0; }
    .mzl-eyebrow, .mzl-intro { margin-left: auto; margin-right: auto; }
    .mzl-countdown { justify-content: center; }
    .mzl-sophie-wrap { min-height: 440px; }
    .mzl-sophie { height: min(58vh, 560px); }
    .mzl-sophie-wrap::before { width: min(76vw, 440px); }
    .orbit-one { width: min(84vw, 520px); }
    .orbit-two { width: min(94vw, 590px); }
}

@media (max-width: 560px) {
    .mzl-shell { width: min(100% - 24px, 520px); }
    .mzl-brand { align-items: center; }
    .mzl-brand img { width: 190px; }
    .mzl-pill { padding: 8px 11px; font-size: 10px; }
    .mzl-stage { padding-top: 30px; }
    h1 { font-size: clamp(43px, 14vw, 64px); }
    .mzl-intro { font-size: 17px; margin-top: 22px; }
    .mzl-countdown { gap: 5px; }
    .mzl-countdown div { min-width: 57px; }
    .mzl-countdown strong { font-size: 34px; }
    .mzl-countdown b { font-size: 28px; }
    .mzl-countdown span { font-size: 9px; letter-spacing: .05em; }
    .mzl-sophie-wrap { min-height: 380px; }
    .mzl-sophie { height: 430px; max-width: 116%; }
    footer { min-height: 62px; }
    .mzl-armed-screen { align-content:center; padding:18px 14px; }
    .mzl-armed-screen h2 { margin-bottom:18px; font-size:clamp(34px,12vw,50px); }
    .mzl-physical-button { width:min(64vw,250px); }
    .mzl-button-collar { height:22px; }
    .mzl-button-base { box-shadow:inset 0 0 0 10px #171916,inset 0 0 0 13px #2a2b27; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}