@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');
:root{--bg:#100e0c;--gold:#d8b782;--cream:#f5eee4;--muted:#b9afa3}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0;background:var(--bg);color:var(--cream);font-family:'DM Sans',sans-serif}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.glow{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,#4a342366 0%,#241b1644 34%,transparent 72%)}main{position:absolute;inset:0 0 62px;display:grid;place-items:center;overflow:hidden}.screen{grid-area:1/1;display:grid;place-items:center;width:100%;height:100%;padding:20px 22px 0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s,transform .5s,visibility .5s;pointer-events:none;text-align:center}.screen.active{opacity:1;visibility:visible;transform:none;pointer-events:auto}.inner{width:min(100%,700px);max-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.1dvh,23px)}.kicker{font-size:clamp(9px,1.5dvh,12px);font-weight:700;letter-spacing:.19em;color:var(--gold)}.forty{position:relative;font:400 clamp(112px,24dvh,260px)/.9 Georgia,serif;letter-spacing:-.08em;color:var(--gold);padding-right:.1em;text-shadow:0 0 70px #bd8c4a33}.smallstar{position:absolute;top:0;right:-.1em;font-size:.23em;letter-spacing:normal}.star{font:400 clamp(88px,18dvh,175px)/1 Georgia,serif;color:var(--gold);text-shadow:0 0 55px #b58c4c55}.finalstar{font-size:clamp(55px,12dvh,110px)}.ring{width:clamp(95px,17dvh,165px);height:clamp(95px,17dvh,165px);border:1px solid #b68c55;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 12px #d8b7820c,0 0 0 26px #d8b78208}.ring span{font:400 clamp(66px,12dvh,118px)/1 Georgia,serif;color:var(--gold)}h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.045em;line-height:1.12;margin:0}h1{font-size:clamp(37px,7.6dvh,75px)}h2{font-size:clamp(35px,7dvh,73px)}em{color:var(--gold);font-weight:500}p{max-width:490px;margin:0;color:var(--muted);font-size:clamp(13px,2.1dvh,17px);line-height:1.6}.next{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-width:min(275px,100%);max-width:100%;padding:10px 11px 10px 22px;margin-top:clamp(2px,1.3dvh,12px);border:1px solid #9e8059;border-radius:999px;background:linear-gradient(120deg,#30251b,#211b16);color:var(--cream);font-weight:600;font-size:clamp(12px,1.8dvh,15px);letter-spacing:.01em;box-shadow:0 10px 28px #0003;transition:background .2s,transform .2s}.next:hover{background:#463324;transform:translateY(-2px)}.next:active{transform:scale(.98)}.arrow{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--gold);color:#24180e;font-size:21px}.secondary{background:transparent}.detail{display:flex;flex-direction:column;gap:6px;border-top:1px solid #7d6446;border-bottom:1px solid #7d6446;padding:12px 22px}.detail span{color:var(--gold);font-size:10px;letter-spacing:.17em}.detail strong{font-size:clamp(12px,1.9dvh,15px);font-weight:500}.finaltext{max-width:520px}.sign{color:var(--gold);font-family:'Playfair Display',Georgia,serif;font-style:italic}footer{position:absolute;bottom:0;left:0;right:0;height:62px;padding:0 clamp(20px,5vw,70px) max(4px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;z-index:8}.back{background:none;border:0;color:var(--gold);font-size:12px;letter-spacing:.06em;padding:12px 0;min-width:80px;text-align:left}.back:disabled{opacity:.22;cursor:default}.progress{display:flex;align-items:center;gap:12px;color:var(--gold);font-size:11px;letter-spacing:.1em}.track{width:70px;height:2px;background:#5a4735}.track div{width:20%;height:100%;background:var(--gold);transition:width .45s}.footspace{min-width:80px}.countdown{position:fixed;inset:0;display:none;place-items:center;background:var(--bg);z-index:20}.countdown.show{display:grid}.countdown span{font:400 min(40dvh,220px)/1 Georgia,serif;color:var(--gold)}#confetti{position:fixed;inset:0;pointer-events:none;z-index:21;width:100%;height:100%}@media(max-width:450px){main{bottom:56px}.screen{padding:12px 22px 0}.inner{gap:clamp(9px,1.9dvh,19px)}.next{min-width:min(260px,100%)}footer{height:56px}.footspace{min-width:60px}.back{min-width:60px}.track{width:58px}}@media(max-height:680px){.inner{gap:8px}.star{font-size:clamp(54px,12dvh,90px)}.forty{font-size:clamp(90px,20dvh,160px)}h1,h2{font-size:clamp(30px,6dvh,50px)}p{font-size:12px;line-height:1.4}.next{padding:6px 7px 6px 17px}.arrow{width:32px;height:32px;flex-basis:32px}.ring{width:75px;height:75px}.ring span{font-size:56px}.finalstar{font-size:50px}.detail{padding:7px 16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
