*{box-sizing:border-box}html,body{margin:0;background:#050e1b;color:#eef2f6;font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif}body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #c4dcff;outline-offset:5px}a{color:inherit;text-decoration:none}button{border:0;background:transparent}button:disabled{cursor:wait;opacity:.5}.stage{position:relative;flex:1;min-height:0;isolation:isolate;overflow:hidden;container-type:size;background:#07162c}.sky{position:absolute;inset:0;background:radial-gradient(ellipse at 48% 53%,#1c335a 0%,#0a1c36 44%,#030d20 100%)}.sky:after{content:"";position:absolute;inset:0;opacity:.6;background-image:radial-gradient(1px 1px at 8% 20%,white,transparent),radial-gradient(1px 1px at 31% 13%,white,transparent),radial-gradient(1px 1px at 68% 37%,white,transparent),radial-gradient(1px 1px at 84% 17%,white,transparent);background-size:211px 163px}.landscape{position:absolute;inset:-1.5%;will-change:transform,opacity}.landscape img{width:100%;height:100%;object-fit:cover;object-position:center 59%;display:block}#flowers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#030c2080 0%,transparent 23%,transparent 75%,#030c2060 100%)}header{position:absolute;inset:32px 40px auto;display:flex;align-items:center;justify-content:space-between;z-index:5;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-family:"Songti TC","Noto Serif TC",serif;letter-spacing:.19em;font-size:17px;text-shadow:0 2px 10px #0008}.brand-mark{display:grid;place-items:center;border:1px solid #d9e6fa80;width:38px;height:43px;font-size:22px}.brand small{display:block;font-family:Arial,sans-serif;font-size:8px;letter-spacing:.18em;margin-top:6px}.edition{font-size:9px;letter-spacing:.3em;opacity:.65}.skip{font-size:12px;letter-spacing:.12em;white-space:nowrap}.skip span{padding-left:10px}.heading{position:absolute;z-index:2;top:20%;width:100%;text-align:center;pointer-events:none;transition:opacity .8s,transform 1.2s;text-shadow:0 2px 22px #051126}.heading p{font-size:9px;letter-spacing:.32em;color:#d0d9e9;margin:0 0 21px}.heading h1{font-family:"Songti TC","Noto Serif TC",serif;font-size:clamp(28px,3.1vw,51px);font-weight:400;letter-spacing:.2em;margin:0 0 19px;line-height:1.4}.heading>span{font-size:12px;letter-spacing:.23em;color:#c9d5e8}.center{position:absolute;z-index:4;top:53%;left:50%;transform:translate(-50%,-12%);display:flex;align-items:center;flex-direction:column}.bloom{width:110px;height:110px;border-radius:50%;border:1px solid #eee5d8a0;background:radial-gradient(circle,#11223caa,#07172b55);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 0 0 9px #f0e8d807,0 0 0 10px #eee5d828;transition:background .4s,transform .4s,box-shadow .4s}.bloom:hover{background:#18385acc;transform:scale(1.06);box-shadow:0 0 0 13px #f0e8d807,0 0 0 14px #eee5d84a}.spark{font-size:23px;line-height:1;margin-bottom:4px;color:#e2d9c9}.bloom strong{font:23px Georgia,serif;letter-spacing:.025em;font-weight:400}.bloom>span:last-child{font-size:9px;letter-spacing:.2em;margin-top:7px}.center p{font-size:10px;letter-spacing:.13em;white-space:nowrap;color:#e0e5ee;margin-top:25px;text-shadow:0 1px 12px #030c20}.stage[data-phase=unfolding] .heading,.stage[data-phase=cloud] .heading{opacity:0;transform:translateY(-20px)}.stage[data-phase=cloud] .bloom{background:#122542cc}.stage[data-phase=leaving]{opacity:0;transition:opacity .6s}footer{position:absolute;z-index:5;inset:auto 40px 24px;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.15em;text-shadow:0 1px 8px #07162c}footer>div{display:flex;gap:20px}footer button{font-size:11px;padding:8px 0}.review{height:100px;flex-shrink:0;display:flex;align-items:center;gap:24px;padding:12px 34px;background:#081321;border-top:1px solid #ffffff15;z-index:10}.review-title{min-width:110px}.review-title>span{font:18px "Songti TC",serif;letter-spacing:.16em}.review-title small{display:block;font-size:10px;letter-spacing:.14em;color:#91a2b8;margin-top:8px}.variants{display:flex;gap:12px;flex:1;justify-content:center}.variant{display:flex;align-items:center;gap:12px;padding:5px 14px 5px 5px;border:1px solid #ffffff15;border-radius:6px;background:#0c1b2d;opacity:.7;transition:border-color .2s,opacity .2s}.variant.active{opacity:1;border-color:#94b7e4;background:#122840}.variant:hover{opacity:1}.variant img{height:53px;width:84px;object-fit:cover;border-radius:3px}.variant span{font-size:11px;white-space:nowrap}.variant b{font:11px Georgia,serif;color:#a9b9cf;margin-right:7px}.review-actions{display:flex;gap:9px}.review-actions button{font-size:11px;border:1px solid #ffffff24;padding:10px 12px;border-radius:4px;white-space:nowrap}.review-actions button[aria-pressed=true]{border-color:#94b7e4;background:#122840}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{width:min(1250px,94vw);border:1px solid #486181;background:#0c1a2c;color:#eef2f6;padding:28px;border-radius:14px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#020812d9;backdrop-filter:blur(8px)}.dialog-top{display:flex;justify-content:space-between;margin-bottom:25px}.dialog-top p{font:25px "Songti TC",serif;margin:0 0 10px}.dialog-top span{font-size:12px;color:#a9b9cf}.dialog-top button{width:42px;height:42px;border:1px solid #ffffff30;border-radius:50%}.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.compare-grid button{text-align:left;padding:0}.compare-grid button>div{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:5px;border:1px solid #ffffff30}.compare-grid img{width:100%;height:100%;object-fit:cover}.compare-grid button>div span{position:absolute;top:22%;left:0;width:100%;text-align:center;font:14px "Songti TC",serif;text-shadow:0 2px 5px #000}.compare-grid b{display:block;font-size:13px;letter-spacing:.08em;margin:16px 0 7px}.compare-grid small{font-size:11px;color:#a9b9cf}.mobile-preview .stage{width:min(390px,100vw);align-self:center;border-left:1px solid #ffffff30;border-right:1px solid #ffffff30}.mobile-preview{background:#02070e}
@container (max-width:600px){header{inset:22px 20px auto}.brand{font-size:14px;gap:8px}.brand-mark{width:30px;height:36px;font-size:18px}.brand small{font-size:7px}.edition{display:none}.skip{font-size:10px}.heading{top:22%;padding:0 20px}.heading h1{font-size:29px;letter-spacing:.12em;max-width:290px;margin:0 auto 15px}.heading p{font-size:7px;letter-spacing:.2em;margin-bottom:17px}.heading>span{font-size:10px;letter-spacing:.12em}.center{top:51%}.bloom{width:96px;height:96px}.bloom strong{font-size:22px}.center p{font-size:9px}footer{inset:auto 20px 18px;font-size:9px;letter-spacing:.03em}footer>div{gap:14px}footer button{font-size:10px}.landscape img{object-position:center center;object-fit:cover}.landscape{inset:0;/* Keep both flower banks on narrow screens without enlarging the central path. */}.landscape img{width:100%;height:100%;object-fit:cover}}
@media(max-width:950px){.review{padding:10px 16px;gap:14px}.review-title{display:none}.variant{padding-right:8px;gap:7px}.variant img{width:65px;height:46px}.review-actions{flex-direction:column;gap:4px}.review-actions button{padding:6px 10px}}
@media(max-width:600px){.review{height:108px;flex-wrap:wrap;justify-content:center;gap:7px;padding:8px 10px}.variants{flex:0 0 100%;gap:7px}.variant{padding:3px 7px 3px 3px;gap:5px;flex:1}.variant img{width:37px;height:30px}.variant span{font-size:9px}.variant b{font-size:9px;margin-right:3px}.review-actions{flex-direction:row}.review-actions button{font-size:10px;padding:6px 14px}.compare-grid{grid-template-columns:1fr}.compare-grid button>div{aspect-ratio:16/9}.compare-grid b{margin-top:8px}.compare-grid small{display:none}dialog{max-height:90dvh;padding:18px}.dialog-top p{font-size:20px}.dialog-top span{font-size:10px}.dialog-top{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.stage[data-phase=cloud] .bloom strong{font-size:20px;white-space:nowrap}
@container (max-width:600px){.heading h1{max-width:265px;font-size:30px;line-height:1.5}.heading{top:18%}.center{top:55%}}

@container (max-width:600px){.heading h1 span{display:block;white-space:nowrap}.heading h1{letter-spacing:.12em;max-width:none}}

/* The left corner is reserved for the single music control. */
footer{justify-content:flex-end;padding-left:52px}
