@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#f5ecdf;background:#060710;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden;height:100svh;user-select:none}button{font:inherit;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #ffca83;outline-offset:4px}#sky{position:fixed;inset:0;width:100%;height:100%;touch-action:none;background:radial-gradient(ellipse at 50% 100%,#211329,#0b0b1c 42%,#05060e 85%)}header{position:absolute;top:0;left:0;width:100%;padding:30px 42px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}header>*{pointer-events:auto}.brand{font-size:29px;font-weight:600;letter-spacing:-1px;text-decoration:none;color:#f8ead5;display:flex;align-items:center}.brand b{font-size:38px;color:#efb96d;margin-right:12px}.brand span{color:#efb96d}.tools{display:flex;gap:10px;align-items:center}.tools small{font-size:9px;letter-spacing:2px;color:#99929c;margin-right:20px}.tools button{height:38px;width:38px;border:1px solid #ffffff19;background:#11121c99;border-radius:50%;font-size:20px}.off{opacity:.4}#intro{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);text-align:center;width:90%;pointer-events:none;transition:opacity .7s,filter .7s}#intro.dismissed{opacity:0;filter:blur(8px)}.eyebrow{font-size:10px;letter-spacing:3px;color:#e1b77e}h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(48px,6.4vw,88px);font-weight:500;letter-spacing:-2px;line-height:1.12;margin:23px 0 20px;text-shadow:0 2px 35px #05060e}h1 em{font-weight:500;color:#efbe7d}#intro p{font-size:14px;color:#b8aebc;letter-spacing:.4px;margin-bottom:28px}#start{pointer-events:auto;border:1px solid #ffd7a6;background:#edbd82;color:#231b16;border-radius:99px;padding:15px 25px;font-size:13px;font-weight:600}#start span{margin-left:24px}#intro small{display:block;font-size:8px;letter-spacing:1.8px;color:#8e8595;margin-top:19px}#playhint{position:absolute;top:115px;text-align:center;width:100%;font-size:12px;color:#d6c7dc9c;pointer-events:none}footer{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(700px,calc(100% - 32px))}.controls{display:flex;align-items:center;gap:16px;padding:10px 14px;background:#15141be8;backdrop-filter:blur(18px);border:1px solid #e6c7a124;border-radius:22px;box-shadow:0 15px 60px #0006}.styles{display:flex;flex:1;gap:6px}.style{flex:1;border:1px solid transparent;background:transparent;border-radius:13px;padding:9px 8px;white-space:nowrap;font-size:10px;color:#b0a9b4;display:flex;align-items:center;flex-direction:column;gap:5px}.style.selected{background:#ecb86e10;border-color:#e6b57545;color:#f5d3a0}.style b{font-size:30px;line-height:34px;font-weight:400}.divider{height:46px;width:1px;background:#ffffff14}#finale{background:#e6ba7d;border:0;color:#302217;padding:17px;border-radius:12px;font-size:12px;font-weight:600;white-space:nowrap}#finale span{margin-left:10px}#finale:disabled{opacity:.65;cursor:default}.footnote{display:flex;justify-content:space-between;font-size:8px;color:#918997;letter-spacing:1.6px;padding:14px 8px 0}.horizon{position:absolute;bottom:0;left:0;width:100%;height:22%;pointer-events:none}.horizon svg{width:100%;height:100%;fill:#04050ade}.diyas{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:space-around}.diyas i{width:25px;height:9px;border-radius:2px 2px 50% 50%;background:#793a22;position:relative}.diyas i:before{content:'';position:absolute;bottom:9px;left:10px;width:5px;height:12px;border-radius:80% 20% 60% 40%;background:#ffdb8d;box-shadow:0 0 10px #ffa64f,0 0 35px #fa912d;animation:flicker 2s infinite alternate}@keyframes flicker{to{transform:scale(.8) rotate(9deg);opacity:.7}}#toast{position:absolute;top:85px;left:50%;transform:translateX(-50%);border-radius:30px;background:#24202ee8;padding:10px 18px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap}#toast.show{opacity:1}#charge{position:absolute;display:none;width:54px;height:54px;border:1px solid #f4c68966;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 35px #f4c68922}#charge span{position:absolute;inset:7px;border-radius:50%;background:#f4c68955;transform:scale(.1)}@media(max-width:600px){header{padding:22px 21px}.tools small{display:none}.brand{font-size:25px}.brand b{font-size:30px}.tools button{width:34px;height:34px}.tools{gap:7px}#intro{top:40%}h1{font-size:54px;letter-spacing:-1.7px}.eyebrow{font-size:8px;letter-spacing:2px}.controls{flex-wrap:wrap;gap:9px;padding:8px;border-radius:19px}.styles{width:100%;flex-basis:100%;gap:3px}.style{padding:6px 3px;font-size:10px}.style b{font-size:27px}.divider{display:none}#finale{width:100%;padding:12px}footer{bottom:max(13px,env(safe-area-inset-bottom))}.footnote{font-size:6.5px;letter-spacing:1px}#playhint{top:93px;font-size:10px;padding:0 35px;line-height:1.8}}@media(max-height:580px){#intro{top:43%}h1{font-size:40px;margin:12px 0}#intro p{margin:10px}#intro small,.eyebrow{display:none}footer{width:min(700px,90%)}.controls{flex-wrap:nowrap}.styles{flex-basis:auto}#finale{width:auto}#playhint{top:75px}}@media(prefers-reduced-motion:reduce){.diyas i:before{animation:none}}

.tools .wish-open{width:auto;border-radius:30px;padding:0 13px;font-size:12px;color:#f1c68c;white-space:nowrap}dialog{color:#f5ecdf;background:#15131f;border:1px solid #e6c7a140;border-radius:24px;padding:32px;width:min(420px,calc(100% - 32px));box-shadow:0 25px 100px #000b}dialog::backdrop{background:#03040bbd;backdrop-filter:blur(8px)}dialog h2{font-family:'Playfair Display',Georgia,serif;font-size:34px;font-weight:500;margin:17px 0 24px}.close-dialog{position:absolute;top:10px;right:13px;border:0;background:none;color:#c3b4c8;font-size:26px}dialog label{display:block;font-size:13px;color:#d2c6d6;margin-bottom:10px}#name-input{width:100%;border:1px solid #dac3a43d;border-radius:12px;background:#090912;color:#fff3e0;font:inherit;font-size:18px;padding:15px;user-select:text;outline-color:#e6ba7d}.primary{width:100%;border:0;border-radius:12px;background:#e6ba7d;color:#302217;padding:15px;margin-top:18px;font-weight:600}.switch-row{display:flex;align-items:center;justify-content:space-between}#haptic-enabled{width:22px;height:22px;accent-color:#e6ba7d}#vibration-status{font-size:13px;line-height:1.5;color:#e6c99f}.help{font-size:12px;line-height:1.6;color:#ada1b7}#wish-display{position:absolute;pointer-events:none;left:50%;top:38%;transform:translate(-50%,-50%);width:90%;text-align:center;animation:wish-in 1s ease-out;color:#ffe1a6;text-shadow:0 0 12px #ffba5e88,0 0 40px #ef96494d}#wish-display span{display:block;font-family:Georgia,serif;font-style:italic;font-size:clamp(26px,4vw,48px)}#wish-display strong{display:block;font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(36px,7vw,80px);line-height:1.25;overflow-wrap:anywhere;margin:10px 0 18px}#wish-display i{font-size:12px;color:#dec6a6;font-style:normal;letter-spacing:1px}@keyframes wish-in{from{opacity:0;filter:blur(8px);transform:translate(-50%,-45%)}to{opacity:1;filter:blur(0);transform:translate(-50%,-50%)}}@media(max-width:600px){.tools .wish-open{padding:0 10px;font-size:11px}.tools{gap:6px}.brand b{margin-right:7px}.tools .wish-open span{font-size:10px}.tools small{display:none}dialog{padding:28px 24px}.eyebrow{letter-spacing:1.5px}}@media(max-width:370px){header{padding:20px 13px}.tools .wish-open span{display:none}}@media(prefers-reduced-motion:reduce){#wish-display{animation:none}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}footer{bottom:max(26px,env(safe-area-inset-bottom))}

.name-action{border-color:#e6b57545;background:#ecb86e0b;color:#f5d3a0}.name-action b{font-family:Georgia,serif;font-size:25px}.name-action.ready{box-shadow:inset 0 0 18px #e6b57510}@media(max-width:600px){.style{font-size:9px;padding:6px 2px}.styles{gap:2px}.name-action b{font-size:24px}}

footer{width:min(1060px,calc(100% - 28px))}.controls{gap:10px}.styles{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#8c6b42 #ffffff06;padding-bottom:5px;touch-action:pan-x;flex-basis:auto}.style[data-style]{flex:0 0 88px;font-size:10px;min-height:75px}.name-action{flex:0 0 70px;min-height:75px}.styles::-webkit-scrollbar{height:3px}.styles::-webkit-scrollbar-thumb{background:#8c6b42;border-radius:8px}.divider{display:none}@media(max-width:600px){.styles{flex:1 1 0;width:auto}.style[data-style]{flex-basis:80px;font-size:9px;padding:6px 2px}.name-action{flex:0 0 60px;font-size:9px}#finale{flex:1 0 100%}.controls{gap:7px}}@media(max-height:580px) and (min-width:601px){#finale{flex:0 0 auto}}

.tools #about-open{width:auto;padding:0 12px;border-radius:24px;font-size:11px;color:#d8c4a8}
#about-dialog{text-align:center;padding:38px 28px}

.credit-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#b9a9c2;margin:0 0 12px}
.creator-name{font-family:'Playfair Display',Georgia,serif;font-size:30px;line-height:1.35;color:#ffe0a5;margin:0;text-shadow:0 0 12px #ffc36b77,0 0 34px #ffad4938;animation:credit-glow 3s ease-in-out infinite alternate}
.credit-divider{height:1px;width:64px;background:#e6ba7d44;margin:28px auto}
.powered-name{font-size:24px;letter-spacing:2px;font-weight:600;color:#e6bbff;text-shadow:0 0 18px #bc7aff66;margin:0 0 5px}
@keyframes credit-glow{to{text-shadow:0 0 18px #ffc36b99,0 0 45px #ffad4955}}
@media(max-width:600px){header{padding:20px 14px}.brand{font-size:23px}.brand b{font-size:26px;margin-right:5px}.tools{gap:5px}.tools #about-open{font-size:10px;padding:0 9px}.tools .wish-open{padding:0 9px}.tools button{width:31px;height:33px}.tools .wish-open span{font-size:9px}}
@media(max-width:380px){.tools .wish-open span{display:none}.tools .wish-open{font-size:16px}header{padding:20px 12px}}
@media(prefers-reduced-motion:reduce){.creator-name{animation:none}}

#hide-controls{display:block;margin:0 2px 8px auto;padding:8px 12px;border:1px solid #ffffff20;border-radius:20px;background:#111019b8;color:#c8bdcc;font-size:11px;min-height:36px}
body.controls-hidden header,body.controls-hidden footer{visibility:hidden;pointer-events:none}
.secondary{width:100%;padding:13px;margin-top:12px;background:#e6ba7d0c;color:#f1cd9b;border:1px solid #e6ba7d55;border-radius:12px;font:inherit;font-size:13px}
#share-link{width:100%;padding:12px;border:1px solid #dac3a43d;border-radius:10px;background:#090912;color:#eee;font-size:13px;user-select:text}
#share-status:empty{display:none}
dialog{max-height:calc(100dvh - 32px);overflow-y:auto}

.brand-mark{width:38px;height:38px;flex-shrink:0;margin-right:9px;color:#efbd79;filter:drop-shadow(0 0 5px #eeb56533)}
.logo-sparks{animation:logo-shimmer 10s ease-in-out infinite}
@keyframes logo-shimmer{0%,85%,100%{opacity:.7}92%{opacity:1}}
@media(max-width:600px){.brand-mark{width:29px;height:32px;margin-right:6px}}
@media(prefers-reduced-motion:reduce){.logo-sparks{animation:none}}
body[data-quality="low"] .logo-sparks{animation:none}