@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap";:root{font-family:Noto Sans TC,sans-serif;color:#303d39;font-synthesis:none;--accent: #477d76;--flavor: #8bdde4}*{box-sizing:border-box}body{margin:0;background:#f5f4ef;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 var(--accent);outline-offset:5px}#app{position:relative;height:100svh;min-height:640px;overflow:hidden}#scene{position:absolute;top:0;right:0;bottom:0;left:0}#scene canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#scene canvas.dragging{cursor:grabbing}.topbar{position:absolute;top:38px;left:48px;right:48px;display:flex;align-items:center;justify-content:space-between;z-index:2}.brand{text-decoration:none;color:#34433e;font-weight:700;font-size:19px;letter-spacing:.07em;display:flex;align-items:center;gap:13px}.brand-dot{align-self:flex-start;font-size:11px;margin:4px 0 0 -9px;font-weight:400}.brand-mark{display:flex;align-items:center;justify-content:center;gap:6px;width:32px;height:29px;background:#719c8c;border-radius:48% 48% 36% 36%;transform:rotate(-9deg);box-shadow:inset 0 3px 4px #ffffff40}.brand-mark i{width:3px;height:5px;background:#fff;border-radius:50%}.top-controls{display:flex;align-items:center;gap:15px}.counter{display:flex;align-items:center;gap:11px;padding:12px 20px;font-size:12px;background:#ffffff85;border:1px solid #ffffffb0;border-radius:40px;box-shadow:0 3px 12px #5a625504;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.counter-icon{font-size:22px;color:#7a998c;transform:rotate(-20deg)}.counter strong{font-variant-numeric:tabular-nums;font-size:20px;font-weight:500;letter-spacing:.05em;min-width:42px}.counter strong.pop{animation:count-pop .3s ease}.icon-button{background:transparent;border:0;width:34px;height:34px;display:grid;place-items:center;font-size:17px;border-radius:50%}.icon-button:hover{background:#ffffff80}.icon-button svg{width:21px;height:21px}#help{border:1px solid #aeb9ad;width:23px;height:23px;font-size:13px}.control-divider{width:1px;height:20px;background:#c8cdc3}.scene-note{position:absolute;top:125px;left:52px;display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.08em;color:#8b958a}.live-dot{background:#8aa28e;width:5px;height:5px;border-radius:50%}.intro{position:absolute;bottom:120px;left:52px;pointer-events:none}.eyebrow{font-size:11px;font-weight:500;letter-spacing:.16em;color:#798d7e;margin:0 0 20px;display:flex;align-items:center;gap:9px}.eyebrow>span{width:19px;height:1px;background:#8ba495}h1{position:relative;font-size:clamp(44px,4.5vw,68px);line-height:1.24;letter-spacing:-.06em;margin:0;font-weight:700}h1>span:not(.title-spark){color:#659282}.title-spark{position:absolute;font-size:40px;font-weight:400;color:#abb8a0;transform:rotate(15deg);right:-46px;top:10px}.intro-copy{font-size:12px;line-height:2.1;color:#7b8579;margin:22px 0 24px;letter-spacing:.03em}.mini-guide{display:flex;gap:17px;color:#8c9487;font-size:10px}.mini-guide span{display:flex;align-items:center;gap:6px}.mini-guide b{font-weight:400;font-size:15px}.play-hint{position:absolute;top:66%;left:53%;transform:translate(-50%);color:#8a9a8e;font-size:12px;letter-spacing:.03em;white-space:nowrap;pointer-events:none;transition:opacity .6s}.play-hint>span{padding:0 8px;font-size:17px}.flavor-panel{position:absolute;right:48px;bottom:120px;width:330px;background:#fffffff0;border:1px solid #fff;border-radius:20px;padding:25px 25px 16px;box-shadow:0 12px 50px #60634e0b;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.flavor-heading{display:flex;justify-content:space-between;align-items:center}.small-label{font-size:10px;color:#9ba08f;letter-spacing:.05em}h2{font-size:19px;margin:7px 0 0;font-weight:600;letter-spacing:.015em}.flavor-index{color:#b5b9ab;font-size:10px;font-variant-numeric:tabular-nums}.flavor-index>span{color:#7e9482}.flavors{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:23px -7px 20px}.flavor{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;border:0;background:transparent;font-size:10px;color:#90978b;white-space:nowrap}.swatch{position:relative;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 -4px 6px #4b575513,inset 0 3px 6px #ffffff80;transition:transform .22s}.swatch:before{content:"";position:absolute;width:6px;height:4px;top:7px;left:8px;background:#ffffff9c;border-radius:50%;transform:rotate(-30deg)}.swatch:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border:1px solid transparent;border-radius:50%;transition:border-color .2s}.flavor.active .swatch:after{border-color:#80978a}.flavor.active{color:#46675a;font-weight:600}.flavor:hover .swatch{transform:translateY(-3px)}.soda{background:#9ddde0}.strawberry{background:#f1a8b5}.apple{background:#bfd991}.mango{background:#f0cc76}.grape{background:#c0a5df}.aurora{background:conic-gradient(from 30deg,#b4c5ef,#c7a7dd,#eeaec7,#f4e8ab,#b4e1cb,#b4c5ef)}.flavor-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:14px;border-top:1px solid #eceee6;font-size:9px;color:#a0a392}.flavor-status{display:flex;align-items:center;gap:5px;color:#7c9484;white-space:nowrap}.flavor-status i{width:4px;height:4px;background:var(--flavor);border-radius:50%}.page-footer{position:absolute;bottom:27px;left:52px;right:48px;border-top:1px solid #a6ad9c40;padding-top:18px;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.04em;color:#939b8b}.page-footer button{border:0;background:transparent;color:#829483;font-size:10px;padding:3px 8px}.page-footer button:hover{color:#345b4e}.footer-star{font-size:15px;margin-left:8px}.speech{position:absolute;padding:9px 17px;background:#ffffffe0;border:1px solid white;border-radius:25px 25px 25px 3px;color:#779087;font-size:11px;opacity:0;transform:translate(-50%,-100%) scale(.9);transition:opacity .18s,scale .18s;pointer-events:none;box-shadow:0 5px 18px #39514a08}.speech.show{opacity:1;scale:1}.loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:9;background:#f5f4ef;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s;font-size:12px;color:#7f9486}.loading.done{opacity:0;pointer-events:none}.loading-blob{width:45px;height:38px;border-radius:50% 50% 35% 35%;background:#9ddde0;animation:breathe 1s infinite alternate}.error{position:absolute;z-index:10;top:20%;right:20%;bottom:20%;left:20%;padding:40px;background:#fff;border-radius:20px;text-align:center}.error[hidden]{display:none}.error p{font-size:13px;line-height:2}.error button{padding:10px 25px;border-radius:20px;border:0;background:#d6e8df}dialog{max-width:420px;width:calc(100% - 36px);background:#fcfcf7;border:1px solid white;border-radius:24px;padding:36px;box-shadow:0 25px 100px #3d4e3e20}dialog::backdrop{background:#55665430;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:24px;color:#8c9a8d}dialog .eyebrow{margin-bottom:12px;font-size:10px}dialog h2{font-size:25px}dialog ul{padding:0;list-style:none;margin:25px 0}dialog li{display:flex;flex-direction:column;gap:5px;margin:17px 0;font-size:12px}dialog li b{font-weight:600}dialog li span,.help-tip{color:#8b9588;font-size:11px;line-height:1.9}.primary-button{width:100%;background:#709a86;border:0;color:#fff;border-radius:12px;padding:13px;margin-top:10px}@keyframes breathe{to{transform:scale(1.15,.8)}}@keyframes count-pop{50%{transform:scale(1.2);color:#659282}}@media(min-width:1600px){.intro{bottom:150px}.flavor-panel{bottom:150px;right:70px;width:360px}.topbar{left:65px;right:65px}.intro,.page-footer,.scene-note{left:65px}}@media(max-width:1050px){.intro{left:30px;bottom:110px}h1{font-size:46px}.flavor-panel{right:30px;width:305px;bottom:110px;padding:22px 20px 16px}.topbar{left:30px;right:30px}.scene-note{left:32px}.intro-copy{font-size:11px}.title-spark{font-size:28px;right:-28px}.mini-guide{gap:11px}.page-footer{left:30px;right:30px}.play-hint{top:61%}}@media(max-width:700px){#app{min-height:620px;height:100svh}.topbar{top:max(22px,env(safe-area-inset-top));left:22px;right:22px}.brand{font-size:15px;gap:9px}.brand-mark{width:27px;height:25px}.top-controls{gap:8px}.counter{padding:7px 12px;gap:7px;font-size:9px}.counter-icon{display:none}.counter strong{font-size:16px;min-width:32px}.control-divider,#help{display:none}.scene-note{top:81px;left:24px;font-size:9px}.intro{left:25px;bottom:260px}.eyebrow{font-size:9px;margin-bottom:10px;letter-spacing:.07em}h1{font-size:33px;line-height:1.23}h1 br{display:none}h1>span:not(.title-spark){display:block}.title-spark{right:-34px;top:24px;font-size:28px}.intro-copy{font-size:10px;line-height:1.8;margin:12px 0 0}.mini-guide{display:none}.flavor-panel{left:20px;right:20px;bottom:64px;width:auto;padding:15px 19px 12px;border-radius:18px}.small-label{font-size:9px}.flavor-heading h2{font-size:15px;margin:4px 0 0}.flavors{margin:17px -4px 13px;gap:10px}.swatch{width:28px;height:28px}.flavor{font-size:9px;gap:7px}.flavor-footer{padding-top:10px;font-size:8px}.page-footer{left:25px;right:25px;bottom:max(17px,env(safe-area-inset-bottom));padding-top:10px;font-size:8px}.page-footer>span:last-child{display:none}.play-hint{top:45%;left:56%;font-size:9px}.play-hint>span{font-size:13px;padding:0 3px}}@media(max-width:700px){.control-divider{display:none}#help{display:grid;width:20px;height:20px;font-size:11px}}@media(max-width:360px){.counter>span:not(.counter-icon){display:none}}@media(max-width:700px)and (max-height:700px){#app{min-height:0}.intro{bottom:255px}h1{font-size:27px}.intro-copy{display:none}.eyebrow{margin-bottom:8px}.play-hint{top:43%;font-size:8px}.scene-note{display:none}}@media(min-width:701px)and (max-height:600px){#app{min-height:0}.topbar{top:16px}.scene-note{display:none}.intro{bottom:65px}h1{font-size:30px}.eyebrow{font-size:9px;margin-bottom:10px}.intro-copy,.mini-guide{display:none}.flavor-panel{bottom:60px;width:280px;padding:14px 17px}.flavor-heading h2{font-size:15px}.flavors{margin:18px -3px 12px}.swatch{width:27px;height:27px}.page-footer{bottom:13px;padding-top:10px}.play-hint{top:74%;font-size:9px}}@media(max-height:730px)and (min-width:701px){.intro{bottom:94px}h1{font-size:48px}.intro-copy{margin:14px 0 16px}.flavor-panel{bottom:94px}.scene-note{top:103px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01s!important}}