*{box-sizing:border-box}
:root{--ink:#f5eee4;--muted:#b9ada6;--gold:#d8b985;--rose:#a76d70;--bg:#17151b}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{font-family:"DM Sans",sans-serif;background:radial-gradient(ellipse at 50% 38%,#30232a 0%,#1d1920 44%,#121116 100%);overflow-x:hidden}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.09;z-index:5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.shell{width:min(100% - 36px,760px);min-height:100svh;margin:auto;display:flex;flex-direction:column;position:relative}
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff17;position:relative}
.monogram{font-family:"Cormorant Garamond",serif;color:var(--gold);font-size:30px}
.top-label,.progress-wrap,footer,.eyebrow,.ticket-top,.ticket-bottom{font-size:9px;letter-spacing:.22em;color:#b9a99b}
.progress-wrap{display:flex;align-items:center;gap:12px;letter-spacing:.12em}
.progress{width:76px;height:2px;background:#ffffff20}.progress span{display:block;width:20%;height:100%;background:var(--gold);transition:width .5s}
.screen{display:none;flex:1;min-height:calc(100svh - 132px);padding:70px 0 48px;text-align:center;align-items:center;flex-direction:column;animation:arrive .75s ease both}
.screen.active{display:flex}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.eyebrow{margin-bottom:28px;color:var(--gold)}
.tiny-star{font-size:13px;margin-right:8px}
h1,h2{font-family:"Cormorant Garamond",serif;font-weight:400;line-height:.98;margin:0 0 28px;letter-spacing:-.025em}
h1{font-size:clamp(54px,9vw,88px)}
h2{font-size:clamp(43px,7vw,66px)}
h1 em,h2 em{color:var(--gold);font-weight:400}
.lead{font-family:"Cormorant Garamond",serif;font-size:clamp(22px,3.4vw,29px);line-height:1.32;color:#e9dfd5;margin:0 0 18px}
.soft{font-size:12px;line-height:1.7;color:var(--muted);letter-spacing:.04em;margin:8px 0 30px}
.primary{border:1px solid #c6a879;background:transparent;color:var(--ink);padding:15px 23px;min-width:210px;font:500 10px "DM Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:.25s}
.primary span{color:var(--gold);font-size:16px;margin-left:15px}
.primary:hover{background:#c6a879;color:#211a1c;transform:translateY(-2px)}
.ornament{display:flex;align-items:center;gap:13px;margin-top:50px;color:var(--gold);font-size:16px}.ornament i{height:1px;width:54px;background:#b99b6b55}
.moon-scene{height:170px;width:min(100%,460px);position:relative;margin:0 auto 32px;overflow:hidden;background:linear-gradient(180deg,#282331,#503b42 76%,#85645a);border-radius:2px}
.moon{position:absolute;width:74px;height:74px;border-radius:50%;background:#ead9b6;top:30px;left:calc(50% - 37px);box-shadow:0 0 48px #e5c99c66}
.horizon{position:absolute;bottom:0;left:0;right:0;height:42px;background:linear-gradient(160deg,transparent 0 28%,#29232a 29% 44%,transparent 45%),linear-gradient(10deg,#211e25 0 55%,transparent 56%)}
.star{position:absolute;color:#f3dfbc}.s1{top:28px;left:20%}.s2{top:60px;left:34%;font-size:24px}.s3{top:20px;right:20%}.s4{top:82px;right:30%;font-size:20px}.s5{top:45px;right:12%}
.quote-mark{font:100px/0.7 "Cormorant Garamond",serif;color:#bd9871;margin:12px 0 24px}
.choice-card{width:min(100%,470px);border:1px solid #ffffff20;padding:22px 22px 16px;margin:12px 0 26px;background:#ffffff06}
.choice-title{font-size:9px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;margin:0 0 12px}
.question{font:22px "Cormorant Garamond",serif;margin:0 0 16px}
.choices{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.choice{border:1px solid #ffffff2b;background:transparent;color:#e9dfd5;padding:10px 13px;font:11px "DM Sans",sans-serif;cursor:pointer;transition:.2s}
.choice:hover,.choice.selected{border-color:var(--gold);color:var(--gold);background:#d8b98512}
.choice-note{font-size:10px;color:#9d8e88;margin:14px 0 0;min-height:14px}
.curtain-art{width:min(100%,460px);height:150px;position:relative;margin:0 auto 36px;overflow:hidden;background:#1c171c;border-bottom:2px solid #b18b62}
.curtain{position:absolute;top:0;bottom:12px;width:48%;background:repeating-linear-gradient(90deg,#542b35 0 13px,#713c45 14px 25px,#4b2630 26px 35px);box-shadow:inset 0 0 28px #160e14}
.curtain.left{left:0;border-right:2px solid #b78b62}.curtain.right{right:0;border-left:2px solid #b78b62}
.stage-light{position:absolute;top:-30px;left:34%;width:32%;height:180px;background:linear-gradient(180deg,#e5c68b55,transparent);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);filter:blur(5px)}
.stage-floor{position:absolute;bottom:0;left:15%;right:15%;height:12px;background:#b18b62;opacity:.65}
.glint{position:absolute;top:25px;left:50%;transform:translateX(-50%);color:#f4d7a2;font-size:22px}
.final-screen{padding-top:45px}
.final-intro{font:italic 22px "Cormorant Garamond",serif;color:#d9c9ba;margin:0 0 18px}
.reveal-title{margin:0 0 28px;display:flex;flex-direction:column;align-items:center;color:#f0d7a7;text-shadow:0 2px 20px #c58d4b55}
.the{font-size:11px;letter-spacing:.6em;margin:0 0 4px 8px}
.lion{font:600 clamp(42px,8vw,68px)/.9 "Cormorant Garamond",serif;letter-spacing:.08em}
.subtitle{font-size:8px;letter-spacing:.35em;margin-top:10px;color:#d7b98b}
.ticket{width:min(100%,490px);text-align:left;background-image: url('/assets/affiche.png');background-size:contain;background-repeat:no-repeat;height:300px;color:#30252a;position:relative;box-shadow:0 14px 40px #0005;margin-bottom:24px}
.ticket:before,.ticket:after{content:"";position:absolute;width:18px;height:18px;background:#211b22;border-radius:50%;top:50%;transform:translateY(-50%)}.ticket:before{left:-9px}.ticket:after{right:-9px}
.ticket-top,.ticket-bottom{display:flex;justify-content:space-between;padding:13px 22px;color:#765b50;border-bottom:1px dashed #bda998;font-size:8px}
.ticket-main{padding:18px 24px 20px}
.ticket-name{font:600 33px "Cormorant Garamond",serif;color:#68414a;margin-bottom:15px}
.ticket-details{display:grid;grid-template-columns:1.5fr 1fr;gap:16px 20px}
.ticket-details div{display:flex;flex-direction:column;gap:5px}
.ticket-details small{font-size:8px;letter-spacing:.18em;color:#987b6c}
.ticket-details strong{font-size:12px;font-weight:500;color:#33282a}
.ticket-bottom{border-top:1px dashed #bda998;border-bottom:0;align-items:center}
.ticket-heart{font-size:19px;color:#9a5d61}
.love-note{font:19px/1.35 "Cormorant Garamond",serif;color:#e8ddd2;margin:0 0 10px}
.love-note em{color:var(--gold)}
.signature{font:italic 18px "Cormorant Garamond",serif;color:#d8b985;margin:0 0 22px}
.replay{background:none;border:0;color:#9f918c;text-decoration:underline;text-underline-offset:4px;font:10px "DM Sans",sans-serif;cursor:pointer;margin-bottom:15px}
footer{height:50px;border-top:1px solid #ffffff17;display:flex;justify-content:center;align-items:center;gap:16px;font-size:8px;letter-spacing:.2em;color:#82746f}
@media(max-width:520px){.shell{width:min(100% - 30px,760px)}.topbar{height:68px}.top-label{font-size:7px}.progress{width:48px}.screen{padding-top:55px;min-height:calc(100svh - 118px)}.final-screen{padding-top:35px}.ticket-details{gap:13px 10px}.ticket-main{padding:16px 18px}.ticket-details strong{font-size:11px}.ticket-name{font-size:29px}.choice{flex:1 1 42%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}