/* 由 _build\make_assets.py 從 v4 index.html 抽出 */
@font-face{font-family:"XYGenSen";src:url("data/fonts/GenSen-H-subset.woff2") format("woff2");font-display:swap}
/* ===== 開場故事 ===== */
.sx{position:relative;background:var(--bg)}
.sx-track{position:relative;height:560vh}
.sx-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1000px;background:#f8efe4}
.sx-lay{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity}
.sx-lay svg,.sx-lay img{display:block;width:100%;height:auto}
#sxBlob{transform-origin:50% 60%}
#sxFloraL,#sxFloraR{transform-origin:50% 100%;z-index:1}
#sxFlyer{transform-origin:50% 98%;z-index:1}
.sx-warm{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(70% 45% at 50% 60%,rgba(255,214,160,.7) 0,rgba(255,190,160,.25) 50%,rgba(255,180,160,0) 78%)}
.sx-title{position:absolute;left:0;right:0;top:7.5vh;z-index:5;text-align:center;will-change:transform,opacity}
.sx-title .tag{display:inline-block;transform:rotate(-3deg);font-size:13px;padding:3px 13px;border-radius:999px;box-shadow:0 3px 0 #c49a3a}
.sx-title img{display:block;width:min(84vw,400px);height:auto;margin:8px auto 0}
.sx-say,.sx-pick{position:absolute;left:0;right:0;z-index:5;text-align:center;opacity:0;will-change:transform,opacity}
.sx-say{top:12vh}.sx-say img{display:block;width:min(86vw,420px);height:auto;margin:0 auto}
.sx-say small,.sx-pick p{display:block;margin-top:6px;font-size:14.5px;letter-spacing:.12em;color:var(--ink)}
.sx-pick{top:8.5vh}.sx-pick img{display:block;width:min(38vw,165px);height:auto;margin:0 auto}.sx-pick p{margin-top:2px;font-size:13.5px}
.sx-cards{position:absolute;inset:0;transform-style:preserve-3d;z-index:2}
.sx-card{position:absolute;left:0;top:0;transform-origin:50% 100%;will-change:transform,opacity;backface-visibility:hidden}
.sx-card img{display:block;width:100%;height:100%;border-radius:3px;box-shadow:0 2px 2px rgba(120,30,40,.16),6px 16px 22px -12px rgba(110,30,40,.5)}
.sx-props{position:absolute;inset:0;pointer-events:none}
.sx-prop{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity;z-index:3}
.sx-prop img{display:block;width:100%;height:auto}
.sx-coin img{position:absolute;left:0;bottom:0;width:100%;height:auto}.sx-coin .sh{bottom:-3%;height:16%}
.sx-prop .sh{position:absolute;left:8%;right:8%;bottom:-8%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(140,60,60,.32),rgba(140,60,60,0));z-index:-1}
#sxSheep{z-index:3}
.sx-sheepsh{position:absolute;left:12%;right:12%;bottom:-4%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(140,60,60,.3),rgba(140,60,60,0));z-index:-1}
#sxBunting{z-index:4;transform-origin:50% 0}
.sx-label{position:absolute;left:0;right:0;bottom:calc(11.5vh + min(11.9vw,63px) + 12px);z-index:6;text-align:center;opacity:0;will-change:opacity}
.sx-label b{display:block;font-family:"XYGenSen",sans-serif;font-size:clamp(22px,6.4vw,30px);letter-spacing:.08em;color:var(--ink)}
.sx-label span{display:inline-block;margin-top:4px;padding:3px 14px;border-radius:999px;background:rgba(255,250,243,.94);font-size:13.5px;color:var(--pri-d);letter-spacing:.04em}
.sx-go{display:block;margin:10px auto 0;height:44px;padding:0 22px;border-radius:999px;background:var(--pri);color:#fff;font-size:15.5px;letter-spacing:.08em;box-shadow:0 4px 0 var(--pri-d)}
.sx-dots{display:none;position:absolute;left:0;right:0;bottom:7.5vh;display:flex;justify-content:center;gap:8px;opacity:0;z-index:6}
.sx-dots i{width:7px;height:7px;border-radius:50%;background:rgba(74,69,67,.25);transition:transform .25s,background .25s}
.sx-dots i.on{background:var(--pri-d);transform:scale(1.35)}
.sx-hint{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:8;display:flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border-radius:999px;
  background:rgba(255,250,243,.95);color:#4a4543;font-size:15px;font-weight:500;letter-spacing:.08em;box-shadow:0 6px 16px -8px rgba(90,40,40,.45);
  transform:translate(-50%,10px);opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;white-space:nowrap}
.sx-hint.on{opacity:1;transform:translate(-50%,0)}
.sx-hint svg{width:22px;height:22px;flex:none;animation:sxbob 1.3s ease-in-out infinite}
@keyframes sxbob{50%{transform:translateY(4px)}}
.sx-loading{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#f8efe4;font-size:14px;letter-spacing:.2em;color:#4a4543;transition:opacity .5s}
.sx-loading.off{opacity:0;pointer-events:none}
.sx-join{position:relative;padding:28px 16px 6px;text-align:center;background:linear-gradient(180deg,#ecb7a8 0,var(--bg) 120px)}
.sx-join>img{display:block;width:min(78vw,340px);height:auto;margin:0 auto}
.sx-joinsheep{width:min(26vw,120px);margin:-6px auto 4px;position:relative;isolation:isolate}.sx-joinsheep img,.sx-joinsheep svg{display:block;width:100%;height:auto}
.sx-join p{margin:6px 0 0;font-size:13.5px;color:var(--ink2);letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){.sx-track{height:auto}.sx-stage{position:relative;height:100svh}.sx-hint svg{animation:none}}
.sx-title{top:5vh}.sx-title img{width:min(92vw,620px)}.sx-say{top:6vh}.sx-say img{width:min(92vw,700px)}.sx-pick{top:4.5vh}.sx-pick img{width:min(52vw,240px)}
@media (min-width:900px){.sx-label{bottom:calc(4vh + 40px)}}
@media (max-width:899px){.sx-say{top:8.5vh}.sx-pick{top:7vh}.sx-pick img{width:min(46vw,190px)}}