:root{color-scheme:dark;font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:#f4eee1;background:#050914}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#sky{position:relative;height:100%;height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#152039 0%,#080e1e 45%,#030610 100%)}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}canvas:focus-visible{outline:2px solid #ddc68d;outline-offset:-4px}.title{position:absolute;top:max(26px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));pointer-events:none;transition:opacity 1.4s}.title>span{font-size:10px;letter-spacing:.3em;color:#ad9871}h1{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(19px,4.5vw,28px);font-weight:500;letter-spacing:.16em;margin:8px 0}h1 span{display:block;margin-top:3px}.settings{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));width:48px;height:48px;border:1px solid #c5b68a40;border-radius:50%;color:#cfbf9e;background:linear-gradient(to top,#a18d5555 var(--hold),#0d142577 var(--hold));touch-action:none}.settings svg{width:23px;height:23px}.settings:focus-visible{outline:2px solid #ddc68d;outline-offset:4px}.hint{position:absolute;bottom:max(54px,calc(env(safe-area-inset-bottom) + 30px));left:12px;right:12px;text-align:center;pointer-events:none;font-size:14px;letter-spacing:.13em;color:#e4d8bf;transition:opacity 1s}.hint small{display:block;margin-top:10px;font-size:11px;color:#a4a4ad}.playing .hint{opacity:0}.playing .title{opacity:.3}.horizon{position:absolute;bottom:-1px;width:100%;height:27px;pointer-events:none;background:#02050a;clip-path:polygon(0 65%,8% 45%,18% 61%,28% 40%,35% 56%,46% 38%,60% 64%,68% 45%,79% 60%,88% 36%,100% 55%,100% 100%,0 100%)}dialog{width:min(390px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:#101a2c;color:#f2ebdb;border:1px solid #bca16e55;border-radius:22px;padding:24px;box-shadow:0 24px 100px #0009}dialog::backdrop{background:#020610bb;backdrop-filter:blur(6px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}h2{font-size:18px;margin:0}.close{width:44px;height:44px;border:0;border-radius:50%;font-size:28px;background:#ffffff0b;color:inherit}.option{display:flex;justify-content:space-between;align-items:center;min-height:68px;border-bottom:1px solid #ffffff13;font-size:14px;gap:12px}.option input{width:23px;height:23px;accent-color:#d9b56c}.volume{display:flex;align-items:center;gap:20px;font-size:13px;margin:22px 0}.volume input{width:100%;min-height:36px;accent-color:#d9b56c}.note{font-size:12px;line-height:1.9;color:#aeb9c9;margin:24px 0}.done{width:100%;min-height:48px;border:1px solid #dab87e66;background:#b99a5430;color:#f6e5c2;border-radius:12px;font-size:15px}button,input{font:inherit}button{cursor:pointer}@media(orientation:landscape) and (max-height:500px){.title{top:max(14px,env(safe-area-inset-top))}h1{font-size:18px}h1 span{display:inline}.hint{bottom:max(25px,env(safe-area-inset-bottom))}}@media(prefers-reduced-motion:reduce){.title,.hint{transition:none}}

/* Separate title and play screens. */
[hidden]{display:none!important}
.home{position:absolute;inset:0;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));overflow:auto}
.home-card{position:relative;text-align:center;width:min(440px,100%);padding:26px 0}
.brand{font-size:11px;letter-spacing:.32em;color:#b5a17a;margin:0 0 20px}
.home h1{position:relative;font-size:clamp(30px,7.5vw,49px);letter-spacing:.16em;line-height:1.55;margin:12px 0 22px;text-shadow:0 0 35px #e9b85733}
.home h1 span{display:block;font-size:1.2em;letter-spacing:.2em;padding-left:.2em}
.intro{position:relative;font-size:14px;line-height:2.2;color:#ddd3bd;letter-spacing:.08em;margin:0 0 30px}.intro small{font-size:12px;color:#a5adbd}
.start{position:relative;min-width:220px;min-height:64px;border:1px solid #e3c68c88;border-radius:40px;background:linear-gradient(135deg,#d4b675,#aa8546);color:#111827;font-size:23px;font-weight:700;letter-spacing:.12em;box-shadow:0 8px 42px #a7863a22;touch-action:manipulation}.start span{font-size:14px;margin-left:16px}.start:active{transform:scale(.97)}.start:focus-visible{outline:3px solid #fff0c9;outline-offset:5px}
.title-flower{position:relative;height:105px;width:180px;margin:0 auto 12px;pointer-events:none}.title-flower i{position:absolute;left:36px;top:0;width:108px;height:108px;border-radius:50%;background:repeating-conic-gradient(from 3deg,#dfb96d 0deg 1deg,transparent 1deg 13deg);mask-image:radial-gradient(circle,transparent 10%,#000 12%,#000 17%,transparent 19%,transparent 30%,#000 32%,#000 37%,transparent 40%,transparent 54%,#000 56%,#000 61%,transparent 65%);opacity:.8}.title-flower i:nth-child(2){width:65px;height:65px;left:0;top:49px;opacity:.45;transform:rotate(15deg)}.title-flower i:nth-child(3){width:55px;height:55px;left:133px;top:25px;opacity:.5;transform:rotate(7deg)}
.menu-actions{display:grid;gap:12px}.return-title{min-height:48px;width:100%;border:1px solid #c7b58c55;border-radius:12px;background:transparent;color:#e5d5b8;font-size:14px}.return-title:focus-visible{outline:2px solid #e3c68c;outline-offset:3px}
#sky[data-screen="home"] canvas{pointer-events:none}
@media(orientation:landscape) and (max-height:500px){.home-card{padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:40px;width:min(650px,100%)}.brand{grid-column:1;margin:0}.title-flower{grid-column:1;grid-row:2;height:80px;margin:0 auto}.home h1{grid-column:1;grid-row:3;font-size:27px;margin:0}.home h1 span{display:block}.intro{grid-column:2;grid-row:1 / 3;align-self:end;margin:0 0 22px}.start{grid-column:2;grid-row:3;min-width:190px;align-self:start}}

/* Compact diagnostic selection, outside the canvas input target. */
.firework-types{position:absolute;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));display:flex;justify-content:center;gap:4px;pointer-events:none}
.firework-types button{pointer-events:auto;flex:0 1 32px;min-width:0;width:32px;height:32px;padding:0;border:1px solid #bda77c55;border-radius:8px;background:#0b1427e6;color:#d7cfbf;font-size:13px;line-height:1;touch-action:manipulation}
.firework-types button[aria-pressed="true"]{border:2px solid #e3c68c;background:#4b3d23ed;color:#fff0c9}
.firework-types button:focus-visible{outline:2px solid #fff0c9;outline-offset:2px}