/* Homepage capacity section: one bowl grows to 30,611,220 (zh). Final frame is the default (no-JS / reduced motion). */
.cf{--pad:48px;--cz:56px;--cs:24px;position:relative;background:#fff;color:#171A1C;font-family:"Noto Sans TC","Source Han Sans TC","PingFang TC",sans-serif;-webkit-font-smoothing:antialiased}
.cf-stage{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1100px;overflow:hidden;background:#fff}
.cf canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.cf-capt{position:absolute;left:0;right:0;bottom:11%;text-align:center;pointer-events:none;display:none}
.cf-capt::before{content:'';position:absolute;left:50%;top:50%;width:min(520px,90vw);height:150px;transform:translate(-50%,-30%);background:radial-gradient(closest-side,#fff 40%,rgba(255,255,255,0));opacity:var(--cb,0)}
.cf-capt span{position:absolute;left:0;right:0;font-weight:200;font-size:var(--cz);letter-spacing:.12em;color:#171A1C;opacity:0;will-change:opacity,transform}
.cf-top{color:#171A1C;position:absolute;left:0;right:0;padding:0 var(--pad);top:72px;margin:0;font-weight:inherit}
.cf-num{display:inline-block;transform-origin:0 0;font-weight:200;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;font-size:calc((100vw - 2*var(--pad))*.09)}
.cf-sub .cf-cap{display:block;font-size:var(--cs);font-weight:300;letter-spacing:.08em;color:#3a3f42;margin-top:14px}
.cf-hair{width:min(360px,60vw);height:1px;margin-top:16px;background:linear-gradient(90deg,rgba(2,72,62,0),rgba(2,72,62,.55) 30%,rgba(2,72,62,.55) 70%,rgba(2,72,62,0))}
.cf-ph{position:absolute;left:var(--pad);right:var(--pad);bottom:48px;top:calc(72px + (100vw - 2*var(--pad))*.09 + 110px);overflow:hidden;border-radius:6px;margin:0}
.cf-ph img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 22%);filter:brightness(1.06) saturate(.9);display:block}
.cf.is-js canvas,.cf.is-js .cf-capt{display:block}
.cf.is-js .cf-top,.cf.is-js .cf-ph{will-change:transform,opacity}
.cf.is-js .cf-ph{top:auto}
@media(max-width:600px){.cf{--pad:20px;--cz:34px;--cs:16px}.cf-num{font-size:calc((100vw - 2*var(--pad))*.18)}.cf-ph{left:0;right:0;border-radius:0;bottom:32px;top:calc(72px + (100vw - 2*var(--pad))*.18 + 90px);bottom:auto;aspect-ratio:37/36;--op:50% 0%}.cf.is-js .cf-ph{aspect-ratio:auto}}
@media (prefers-reduced-motion:reduce){.cf canvas,.cf-capt{display:none!important}}
#system.cf .cf-top,#system.cf .cf-num{color:#171A1C}
#system.cf .cf-top{margin:0!important;padding:0 var(--pad);font-size:16px;line-height:1.2;max-width:none;width:auto;text-wrap:initial}
#system.cf .cf-num{transform-origin:0 0;display:block;width:max-content;line-height:1}
#system.cf .cf-sub,#system.cf .cf-hair,#system.cf .cf-cap{display:block}
#system.cf.is-js .cf-top{top:48px}
/* scroll-linked (JS + motion allowed only) */
#system.cf.is-js{height:650vh}
#system.cf.is-js .cf-stage{position:sticky;top:0;height:100vh;max-height:none}
.cf-ph picture{display:block;width:100%;height:100%}
#system.cf{padding:0!important;margin:0 auto!important;max-width:none!important}
#system.cf{display:block!important}#system.cf .cf-stage{width:100%!important}
#system.cf{width:100%!important;align-self:stretch!important}
@media(max-width:600px){#system.cf:not(.is-js) .cf-stage{display:flex;flex-direction:column;justify-content:center}
#system.cf:not(.is-js) .cf-top,#system.cf:not(.is-js) .cf-ph{position:relative;top:auto;bottom:auto}
#system.cf:not(.is-js) .cf-ph{margin-top:28px!important;flex:none}}