/* 每個特效的樣式：class 一律用 .x-<編號> 開頭，避免互相影響 */
.st{--b:#61D0DF;--d:#278EA0;--k:#183E4C;--p:#EAF9FA;font-family:"Noto Sans TC",system-ui,sans-serif}
.st .c{display:inline-block;white-space:pre}
.st .serif{font-family:"Noto Serif TC",serif;font-weight:900}
.st .ctr{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
@keyframes up{from{opacity:0;transform:translateY(30%)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
/* S01 */
.x-FX038 .c{opacity:0;animation:s01 .9s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.07s) forwards}
@keyframes s01{0%{opacity:0;transform:translateY(60%) scale(1.6);filter:blur(10px)}100%{opacity:1;transform:none;filter:none}}
.x-FX038 .ln{height:.6cqw;background:var(--b);width:60%;margin:2cqw auto 0;transform-origin:left;transform:scaleX(0);animation:grow 1s cubic-bezier(.7,0,.2,1) 1.6s forwards}
/* S14 */
.x-FX016 .m{display:inline-block;overflow:hidden;vertical-align:bottom}
.x-FX016 .m>span{display:inline-block;transform:translateY(110%);animation:s14 .7s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.06s) forwards}
@keyframes s14{to{transform:none}}
/* S15 */
.x-FX055 .hl{background:linear-gradient(transparent 58%,#61D0DFaa 58%) no-repeat left bottom/0% 42%;animation:s15 .9s ease-out forwards}
@keyframes s15{to{background-size:100% 42%}}
/* S16 */
.x-FX108 .cd{width:24%;aspect-ratio:3/4;border:.3cqw solid #D6EEF2;border-radius:2cqw;background:#fff;display:grid;place-items:center;font-size:3.4cqw;font-weight:700;position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s,border-color .25s;cursor:pointer}
.x-FX108 .cd:hover,.x-FX108 .cd.on{transform:translateY(-6%) scale(1.04);box-shadow:0 0 4cqw #61D0DF99;border-color:var(--b)}
.x-FX108 .cd i{position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,transparent,#fff,transparent);animation:s16 3s ease-in-out infinite}
@keyframes s16{from{transform:translateX(-200%) skewX(-20deg)}to{transform:translateX(450%) skewX(-20deg)}}
/* S03 翻牌 */
.x-FX103 .w{perspective:80cqw;width:26%;aspect-ratio:3/4;cursor:pointer}
.x-FX103 .in{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.x-FX103 .w.f .in{transform:rotateY(180deg)}
.x-FX103 .fa{position:absolute;inset:0;border-radius:1.6cqw;display:grid;place-items:center;backface-visibility:hidden;font-size:2.6cqw;font-weight:700;padding:1cqw;text-align:center}
.x-FX103 .fr{background:var(--p);color:var(--k)}.x-FX103 .bk{background:var(--b);color:#fff;transform:rotateY(180deg)}
/* 001 閃電砸落 */
.x-FX014{background:#0f2a33;color:#fff}
.x-FX014 .t{font-size:12cqw;animation:x001 2.4s cubic-bezier(.2,.9,.3,1) forwards;text-shadow:0 0 3cqw #61D0DF}
@keyframes x001{0%,30%{opacity:0;transform:scale(2.2)}40%{opacity:1;transform:scale(.92)}44%{transform:translate(1%,-1%)}48%{transform:translate(-1%,1%)}52%,100%{opacity:1;transform:none}}
.x-FX014 .fl{position:absolute;inset:0;background:#fff;opacity:0;animation:x001f 2.4s forwards}
@keyframes x001f{0%{opacity:0}8%{opacity:.9}12%{opacity:0}20%{opacity:.7}26%,100%{opacity:0}}
.x-FX014 svg{position:absolute;left:55%;top:0;height:100%;opacity:0;animation:x001b 2.4s forwards}
@keyframes x001b{0%,6%{opacity:0}8%,26%{opacity:1}30%,100%{opacity:0}}
/* 036 墨水暈開 */
.x-FX042 .t{font-size:11cqw;animation:x036 2.6s ease-out forwards}
@keyframes x036{0%{opacity:0;filter:blur(3cqw);letter-spacing:4cqw}100%{opacity:1;filter:none;letter-spacing:.5cqw}}
.x-FX042 .ink{position:absolute;width:10%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#61D0DF55,transparent 70%);animation:x036i 2.6s ease-out forwards}
@keyframes x036i{from{transform:scale(0)}to{transform:scale(9);opacity:.6}}
/* 037 文字聚集 */
.x-FX013 .c{font-size:10cqw;animation:x037 1.4s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.06s) both}
@keyframes x037{from{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.4)}to{opacity:1;transform:none}}
/* 292 手寫描繪 */
@keyframes x292{to{fill:var(--k);stroke-width:0}}
/* 192 Logo 組合 */
.x-FX026 .s{position:absolute;width:9%;aspect-ratio:1;background:var(--b);animation:x192 1s cubic-bezier(.3,1.4,.5,1) calc(var(--i)*.15s) both}
@keyframes x192{from{opacity:0;transform:translate(var(--x),var(--y)) rotate(200deg) scale(.2)}}
.x-FX026 .wm{position:absolute;top:66%;font-size:5cqw;font-weight:900;letter-spacing:1.5cqw;opacity:0;animation:up .8s 1s forwards}
/* 301 多語問候 */
.x-FX030 .box{height:14cqw;overflow:hidden;font-size:10cqw;line-height:14cqw;font-weight:900}
.x-FX030 .rail{animation:x301 7.5s cubic-bezier(.7,0,.2,1) infinite}
@keyframes x301{0%,15%{transform:none}20%,35%{transform:translateY(-14cqw)}40%,55%{transform:translateY(-28cqw)}60%,75%{transform:translateY(-42cqw)}80%,95%{transform:translateY(-56cqw)}100%{transform:translateY(-70cqw)}}
/* 297 劃掉改寫 */
.x-FX062 .o{position:relative;color:#9aa;font-size:7cqw}
.x-FX062 .o::after{content:"";position:absolute;left:-3%;right:-3%;top:52%;height:.6cqw;background:#E0605A;transform:scaleX(0);transform-origin:left;animation:grow .6s .6s forwards}
.x-FX062 .n{font-size:8cqw;font-weight:900;color:var(--d)}
/* 163 空心字填滿 */
.x-FX047 .t{font-size:14cqw;font-weight:900;color:transparent;-webkit-text-stroke:.25cqw var(--d);background:linear-gradient(var(--b),var(--b)) no-repeat left/0% 100%;-webkit-background-clip:text;background-clip:text;animation:x163 1.8s .4s cubic-bezier(.7,0,.2,1) forwards}
@keyframes x163{to{background-size:100% 100%}}
/* 088 手繪圈 */
/* 043 印章 */
.x-FX070 .sp{border:.7cqw solid var(--d);color:var(--d);padding:1cqw 3cqw;border-radius:1cqw;font-size:8cqw;font-weight:900;animation:x043 .6s .3s cubic-bezier(.3,1.4,.5,1) both}
@keyframes x043{0%{opacity:0;transform:scale(2.4) rotate(-12deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
/* 006 心跳 */
.x-FX064 .t{font-size:13cqw;font-weight:900;color:var(--d);animation:x006 1.2s ease-in-out infinite}
@keyframes x006{0%,40%,100%{transform:scale(1)}10%{transform:scale(1.18)}25%{transform:scale(1.08)}}
/* 025 卡拉OK */
.x-FX051 .row{position:relative;font-size:8cqw;font-weight:900;color:#c9d6da}
.x-FX051 .c{transition:color .2s}.x-FX051 .c.on{color:var(--d)}
.x-FX051 .ball{position:absolute;top:-4cqw;width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--b);transform:translateX(-50%)}
/* 012 放大鏡 */
.x-FX049 .t{font-size:7cqw;font-weight:900;white-space:nowrap}
.x-FX049 .lens{position:absolute;width:24cqw;height:24cqw;border-radius:50%;border:.5cqw solid var(--b);overflow:hidden;box-shadow:0 1cqw 3cqw #183E4C33;background:#fff}
.x-FX049 .lens .t{position:absolute;transform-origin:0 0}
/* 327 徽章 */
.x-FX050 .ray{position:absolute;width:60cqw;height:60cqw;background:repeating-conic-gradient(#61D0DF33 0 10deg,transparent 10deg 20deg);border-radius:50%;animation:x327r 8s linear infinite,fade .6s .4s both}
@keyframes x327r{to{transform:rotate(360deg)}}
.x-FX050 .bd{position:relative;width:26cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9ff0f9,#278EA0);display:grid;place-items:center;color:#fff;font-size:10cqw;box-shadow:0 0 0 1.2cqw #fff,0 0 0 2cqw var(--b);animation:pop .8s .2s both}
.x-FX050 .lb{position:absolute;bottom:8%;font-size:3.6cqw;font-weight:700;color:var(--k);animation:up .6s 1s both}
/* 197 198 199 139 */
.x-FX082 .bar{width:10%;background:linear-gradient(var(--b),var(--d));border-radius:1cqw 1cqw 0 0;transform-origin:bottom;animation:x198 1s cubic-bezier(.3,1.4,.5,1) both;position:relative}
.x-FX082 .bar b{position:absolute;top:-5cqw;left:50%;transform:translateX(-50%);font-size:3cqw;color:var(--k)}
@keyframes x198{from{transform:scaleY(0)}}
.x-FX085 circle.sg{fill:none;stroke-width:6;transition:stroke-dasharray .8s ease-out}
.x-FX083 circle.pr{fill:none;stroke:var(--b);stroke-width:4;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;stroke-dasharray:0 100}
/* 065 拉霸 */
.x-FX081 .rl{width:14cqw;height:18cqw;overflow:hidden;border-radius:2cqw;background:var(--p);margin:0 .8cqw;box-shadow:inset 0 0 2cqw #183E4C22}
.x-FX081 .rl div{font-size:12cqw;line-height:18cqw;font-weight:900;color:var(--d);text-align:center}
/* 062 翻牌看板 */
.x-FX089 .fp{position:relative;width:11cqw;height:16cqw;margin:0 .5cqw;perspective:40cqw;font-size:12cqw;font-weight:900;color:#fff}
.x-FX089 .fp span{position:absolute;inset:0;background:var(--k);border-radius:1.2cqw;display:grid;place-items:center;backface-visibility:hidden}
.x-FX089 .fp span.flip{animation:x062 .5s ease-in forwards;transform-origin:center}
@keyframes x062{from{transform:rotateX(0)}to{transform:rotateX(-90deg)}}
.x-FX089 .fp::after{content:"";position:absolute;left:0;right:0;top:50%;height:.25cqw;background:#0008;z-index:3}
/* 308 儀表 */
.x-FX076 .nd{transform-origin:50px 50px;transition:transform 1.6s cubic-bezier(.3,1.3,.5,1)}
/* 129 步驟 */
.x-FX084 .dt{width:8cqw;height:8cqw;border-radius:50%;border:.5cqw solid #D6EEF2;display:grid;place-items:center;font-weight:900;font-size:3.4cqw;color:#9bb;background:#fff;transition:.3s;z-index:1}
.x-FX084 .dt.on{border-color:var(--b);background:var(--b);color:#fff;transform:scale(1.1)}
.x-FX084 .ln{flex:1;height:.6cqw;background:#D6EEF2;position:relative}
.x-FX084 .ln i{position:absolute;inset:0;background:var(--b);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.x-FX084 .ln.on i{transform:scaleX(1)}
.x-FX084 .lb{position:absolute;top:120%;font-size:2.6cqw;white-space:nowrap;color:var(--k)}
/* 137 流程流動 */
.x-FX088 .fl{fill:none;stroke:var(--b);stroke-width:1.4;stroke-dasharray:4 4;animation:x137 .8s linear infinite}
@keyframes x137{to{stroke-dashoffset:-16}}
.x-FX088 .nd rect{fill:#fff;stroke:var(--d);stroke-width:.8}
/* 140 打勾 */
.x-FX071 circle,.x-FX071 path{fill:none;stroke:var(--b);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.x-FX071 circle{stroke-dasharray:252;stroke-dashoffset:252;animation:draw .8s ease-out forwards;transform:rotate(-90deg);transform-origin:center}
.x-FX071 path{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .4s .75s ease-out forwards}
.x-FX071 .lb{font-size:4cqw;font-weight:700;color:var(--d);animation:up .5s 1.1s both}
/* 264 低飽和喚醒 */
.x-FX097 .sc{position:absolute;inset:8%;border-radius:2cqw;overflow:hidden;filter:grayscale(1) brightness(1.05);transition:filter 1s;cursor:pointer;background:linear-gradient(#bfeef5,#fff6e0 60%,#a8e2b0 60%)}
.x-FX097 .sc:hover,.x-FX097 .sc.on{filter:none}
/* 263 滑過放大 */
.x-FX109 .pd{position:absolute;inset:10% 25%;border-radius:2cqw;cursor:zoom-in;background:radial-gradient(circle at 30% 30%,#fff 0 6%,transparent 7%),repeating-linear-gradient(45deg,#61D0DF 0 4%,#278EA0 4% 8%);background-size:100% 100%;transition:background-size .1s}
/* 136 圖示描邊 */
.x-FX095 svg{width:18cqw;margin:0 2cqw;cursor:pointer}
.x-FX095 path,.x-FX095 circle,.x-FX095 rect{fill:none;stroke:#c9d6da;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.x-FX095 .ov{stroke:var(--d);stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .9s ease-out}
.x-FX095 svg:hover .ov,.x-FX095 svg.on .ov{stroke-dashoffset:0}
/* 106 流動光暈 */
@keyframes x106a{50%{transform:translate(40%,25%) scale(1.2)}}
@keyframes x106b{50%{transform:translate(-35%,20%) scale(.85)}}
/* 224 散景 */
@keyframes x224{to{transform:translate(var(--x),var(--y));opacity:.3}}
/* 326 有機色塊 */
.x-FX163 .bb{width:38cqw;aspect-ratio:1;background:linear-gradient(135deg,#61D0DF,#a8f0d8);animation:x326 8s ease-in-out infinite;box-shadow:0 3cqw 6cqw #61D0DF55}
@keyframes x326{0%,100%{border-radius:42% 58% 63% 37%/45% 38% 62% 55%}33%{border-radius:68% 32% 41% 59%/56% 63% 37% 44%;transform:rotate(60deg)}66%{border-radius:35% 65% 55% 45%/66% 40% 60% 34%;transform:rotate(-30deg)}}
/* 202 簾幕 */
.x-FX214 .pn{position:absolute;top:0;bottom:0;width:25%;background:var(--b);transform:scaleY(0);transform-origin:bottom}
.x-FX214.go .pn{animation:x202 1.6s cubic-bezier(.7,0,.2,1) calc(var(--i)*.08s) both}
@keyframes x202{0%{transform:scaleY(0);transform-origin:bottom}45%{transform:scaleY(1);transform-origin:bottom}55%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:top}}
/* 281 對開門 */
.x-FX196 .dr{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(135deg,#278EA0,#61D0DF);display:grid;place-items:center;color:#fff;font-size:5cqw;font-weight:900;transition:transform 1.2s cubic-bezier(.7,0,.2,1)}
.x-FX196 .l{left:0;justify-items:end}.x-FX196 .r{right:0;justify-items:start}
.x-FX196.op .l{transform:translateX(-100%)}.x-FX196.op .r{transform:translateX(100%)}
/* 027 像素溶解 */
/* 070 故障 */
.x-FX181{background:#0f2a33;color:#fff}
.x-FX181 .g{position:relative;font-size:12cqw;font-weight:900}
.x-FX181 .g::before,.x-FX181 .g::after{content:attr(data-t);position:absolute;inset:0}
.x-FX181 .g::before{color:#61D0DF;animation:x070a 1.8s steps(1) infinite}
.x-FX181 .g::after{color:#ff6b8a;animation:x070b 1.8s steps(1) infinite}
@keyframes x070a{0%,100%{clip-path:inset(0 0 100% 0)}10%{clip-path:inset(10% 0 60% 0);transform:translate(-3%)}20%{clip-path:inset(60% 0 10% 0);transform:translate(3%)}30%{clip-path:inset(0 0 100% 0)}}
@keyframes x070b{0%,100%{clip-path:inset(0 0 100% 0)}12%{clip-path:inset(40% 0 40% 0);transform:translate(4%)}22%{clip-path:inset(80% 0 0 0);transform:translate(-2%)}32%{clip-path:inset(0 0 100% 0)}}
/* 274 穿越大字 */
@keyframes x274{to{transform:scale(40);opacity:0}}
/* S09 */
.x-FX061 .av{width:13cqw;height:13cqw;border-radius:50%;display:grid;place-items:center;font-size:6cqw;background:#ffffff1a;transition:.3s;opacity:.45}
.x-FX061 .av.on{opacity:1;transform:scale(1.15);box-shadow:0 0 0 1cqw #61D0DF55,0 0 4cqw #61D0DF}
.x-FX061 .bub{position:absolute;bottom:12%;left:10%;right:10%;background:#fff;color:var(--k);border-radius:2cqw;padding:2cqw;font-size:3.4cqw;animation:up .4s both}
/* S10 */
.x-FX048 .ms{align-self:flex-end;background:var(--b);color:#fff;border-radius:1.6cqw;padding:1cqw 2cqw;font-size:2.8cqw;margin:.6cqw 0;animation:up .35s both;transition:.4s}
.x-FX048 .ms.old{opacity:.35;text-decoration:line-through;background:#c9d6da}
/* S11 */
.x-FX079 .nd{width:3cqw;height:3cqw;border-radius:50%;background:#D6EEF2;transition:.4s;position:relative}
.x-FX079 .nd.on{background:var(--b);transform:scale(1.6);box-shadow:0 0 0 1cqw #61D0DF44}
.x-FX079 .nd b{position:absolute;top:-6cqw;left:50%;transform:translateX(-50%);font-size:4cqw;color:#9bb;transition:.4s}
.x-FX079 .nd.on b{color:var(--k);font-size:5cqw}
/* S12 */
.x-FX115 .op{position:relative;height:13%;margin:1.4% 0;border-radius:1.2cqw;background:var(--p);cursor:pointer;overflow:hidden;font-size:3cqw;display:flex;align-items:center;justify-content:space-between;padding:0 2cqw}
.x-FX115 .op i{position:absolute;left:0;top:0;bottom:0;background:var(--b);transition:width .5s;z-index:0}
.x-FX115 .op span{position:relative;z-index:1}
/* S13 */
.x-FX192 .nx{position:absolute;inset:0;background:linear-gradient(135deg,#278EA0,#61D0DF);color:#fff;display:grid;place-items:center;font-size:7cqw;font-weight:900;clip-path:circle(0% at 50% 50%);transition:clip-path .9s cubic-bezier(.7,0,.2,1)}