:root {
  --font-heading: "Noto Sans TC", sans-serif;
  --font-body: "Noto Sans TC", sans-serif;
  --font-number: "Inter", sans-serif;
  --font-reward-number: "Montserrat", sans-serif;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-ink: #04090d;
  --color-text-primary: #0b0d20;
  --color-text-nav: #090909;
  --color-text-secondary: #24304c;
  --color-title-shadow: #102c59;
  --color-language-border: #10171f;
  --color-marquee: #ff8a15;
  --color-section-blue: #29aff3;
  --color-section-ink: #090c1b;
  --color-window-yellow: #ffe000;
  --color-rule-yellow: #fff000;
  --color-label-green: #35cc9b;
  --color-label-red: #ed4866;
  --color-divider: #4e6380;
  --color-tracking-bg: #2c9df9;
  --color-tracking-ink: #080a20;
  --color-tracking-secondary: #35425c;
  --color-tracking-highlight: #c2ff98;
  --border-page: 2px;
  --border-section: 3.941606px;
  --radius-page: 15px;
  --radius-control: 15px;
  --radius-title-shadow: 30px;
  --title-shadow-offset: 7px;
  --hero-title-shadow-offset: 5.255px;
  --stat-bubble-scale: 1.08;
  --stat-copy-offset-y: -11px;
  --stat-character-scale: 1.3;
  --materials-card-art-scale: 1.25;
  --nav-height: 150px;
  --marquee-height: 80px;
  --hero-height: 853px;
  --site-height: 7552.339px;
  --faq-window-height: 886.339px;
  --faq-section-height: 1016.339px;
  --faq-main-height: 672.036px;
  --faq-divider-height: 609.256px;
  --faq-item-gap: 20px;
  --faq-illustration-top: 208px;
  --faq-illustration-left: 57.634px;
  --content-background-start: 1083px;
  --content-background-panel-height: 3109.6695px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: #d9efff;
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

.site-viewport {
  width: min(1440px, 100vw);
  height: calc(var(--site-height) * var(--site-scale, 1));
  margin: 0 auto;
  overflow: hidden;
}

.site-shell {
  width: 1440px;
  height: var(--site-height);
  margin: 0;
  overflow: hidden;
  border: var(--border-page) solid var(--color-ink);
  border-radius: var(--radius-page);
  background-color: var(--color-white);
  background-image: url("assets/images/content-background-top.png"), url("assets/images/content-background-bottom.png");
  background-position: center var(--content-background-start), center calc(var(--content-background-start) + var(--content-background-panel-height));
  background-size: 1440px var(--content-background-panel-height), 1440px var(--content-background-panel-height);
  background-repeat: no-repeat;
  transform: scale(var(--site-scale, 1));
  transform-origin: left top;
}

.instructions-section {
  position: relative;
  width: 1440px;
  height: 2869px;
  overflow: hidden;
  background: transparent;
  color: var(--color-section-ink);
}

.section-cloud { position: absolute; overflow: hidden; }
.section-cloud img { position: absolute; width: 1440px; height: 2081.994px; max-width: none; object-fit: cover; }
.cloud-top-left { left: 33.14px; top: 9.66px; width: 197.43px; height: 89.741px; }
.cloud-top-left img { left: -33.14px; top: -9.66px; }
.cloud-top-center { left: 559.16px; top: 33.14px; width: 147.728px; height: 67.651px; }
.cloud-top-center img { left: -559.16px; top: -33.14px; }
.cloud-top-right { left: 1212.2px; top: 12.43px; width: 187.766px; height: 91.122px; }
.cloud-top-right img { left: -1212.2px; top: -12.43px; }
.cloud-bottom-left { left: 13.81px; top: 1978.45px; width: 154.631px; height: 66.27px; }
.cloud-bottom-left img { left: -13.81px; top: -1978.45px; }
.cloud-bottom-right { left: 1245.33px; top: 1983.97px; width: 173.96px; height: 66.27px; }
.cloud-bottom-right img { left: -1245.33px; top: -1983.97px; }

.instructions-window-shadow,
.instructions-window-surface,
.instructions-window-titlebar,
.instructions-title-label,
.instructions-character,
.instructions-close,
.activity-rule-panel { position: absolute; display: block; }
.instructions-window-shadow { left: 66px; top: 172px; width: 1316px; height: 2634px; }
.instructions-window-surface { left: 66.25px; top: 210px; width: 1307px; height: 2587px; }
.instructions-window-titlebar { left: 64px; top: 159px; width: 1316px; height: 99px; }
.instructions-title-label { left: 144px; top: 102px; width: 354.822632px; height: 113.211891px; }
.instructions-character { left: 903px; top: 16px; width: 304px; height: 202px; object-fit: contain; }
.instructions-close { left: 1277.09px; top: 185px; width: 34.516px; height: 34.516px; }
.instructions-minimize { position: absolute; left: 1206.67px; top: 204.33px; width: 35.896px; height: 6.903px; background: var(--color-section-ink); }

#instructions-title { position: absolute; left: 198px; top: 118px; width: 256px; margin: 0; font-size: 57.986576px; font-weight: 900; line-height: 1.4; letter-spacing: 5.798658px; white-space: nowrap; }
.large-rule-heading { position: absolute; margin: 0; font-size: 75.934807px; font-weight: 900; line-height: 1.4; white-space: pre-line; }
.post-heading { left: 165px; top: 328px; width: 349.30011px; }
.activity-heading { left: 152px; top: 1235px; width: 349.30011px; }
.social-heading { left: 165px; top: 2050px; width: 183px; }

.post-rules { position: absolute; left: 381px; top: 305px; width: 936px; height: 179px; margin: 0; padding-left: 42px; font-size: 28px; font-weight: 700; line-height: 1.6; letter-spacing: .56px; }
.post-rules li { white-space: pre-line; }
.second-rule { top: 759px; width: 937px; height: 180px; }
.third-rule { top: 966px; width: 842px; height: 135px; }

.required-info-panel { position: absolute; left: 426px; top: 510px; width: 807px; height: 225px; border: 3px solid var(--color-black); border-radius: 20px; background: var(--color-white); }
.required-info-panel ul { margin: 16px 0 0; padding-left: 51px; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: .48px; }
.copy-info { position: absolute; left: 744.828px; top: 108.828px; width: 55px; height: 101px; padding: 0; border: 0; background: transparent; font: 700 20px/1.2 var(--font-body); white-space: pre-line; cursor: pointer; }
.copy-info span { position: absolute; left: 0; top: 0; width: 40px; text-align: center; }
.copy-info img { position: absolute; left: 0; top: 52px; width: 53px; height: 49px; object-fit: contain; }
.copy-info:hover { transform: translateY(-2px); }
.section-divider { position: absolute; left: 147px; top: 1155px; width: 1144px; height: 4px; background: var(--color-divider); }
.social-divider { top: 2014px; }

.activity-rule-panel { left: 382px; top: 1226px; width: 922px; height: 725px; }
.activity-rule-copy { position: absolute; inset: 0; }
.activity-rule-copy section { position: static; }
.activity-rule-copy span { position: absolute; font-size: 40px; font-weight: 900; line-height: 1.4; }
.activity-rule-copy p { position: absolute; margin: 0; font-size: 24px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; white-space: pre-line; }
.activity-rule-copy section:nth-child(1) span { left: 420px; top: 1272px; }
.activity-rule-copy section:nth-child(1) p { left: 474px; top: 1280px; width: 807px; height: 168px; }
.activity-rule-copy section:nth-child(2) span { left: 417px; top: 1470px; }
.activity-rule-copy section:nth-child(2) p { left: 474px; top: 1475px; width: 752px; height: 114px; }
.activity-rule-copy section:nth-child(3) span { left: 420px; top: 1629px; }
.activity-rule-copy section:nth-child(3) p { left: 471px; top: 1636px; width: 833px; height: 258px; line-height: 1.8; }

.reach-stat { position: absolute; left: 113px; top: 1557px; width: 246px; height: 356px; }
.stat-bubble { position: absolute; left: -7px; top: -58px; width: 256px; height: 247px; object-fit: contain; transform: scale(var(--stat-bubble-scale)); transform-origin: center; }
.stat-label { position: absolute; left: 35px; top: -2.275391px; width: 175.181824px; margin: 0; transform: translateY(var(--stat-copy-offset-y)); font-size: 32px; font-weight: 900; line-height: 1.35; letter-spacing: 1.6px; white-space: pre-line; }
.reach-stat strong { position: absolute; left: 41.5px; top: 78.874268px; transform: translateY(var(--stat-copy-offset-y)); color: #ff001b; font-size: 55px; font-weight: 900; line-height: 1.4; -webkit-text-stroke: 4.141898px #fcf9f1; paint-order: stroke fill; }
.stat-character { position: absolute; left: 50%; top: 162px; width: 214px; height: 165.193px; object-fit: contain; transform: translateX(-50%) scale(var(--stat-character-scale)); transform-origin: top center; }

.social-platforms { position: absolute; left: 386px; top: 2078px; display: flex; gap: 0; height: 137px; }
.social-platforms img { display: block; width: 150px; height: 137px; object-fit: contain; }
.ig-cursor-wrap { position: absolute; z-index: 2; left: 105px; top: calc(80px + var(--title-shadow-offset)); width: 65px; height: 65px; overflow: hidden; background: transparent; pointer-events: none; }
.ig-cursor-wrap img { position: absolute; left: -201px; top: -194px; width: 420px; height: 420px; max-width: none; object-fit: fill; }
.social-hint { position: absolute; left: 936px; top: 2096px; width: 421px; margin: 0; font-size: 28px; font-weight: 700; line-height: 1.6; letter-spacing: .56px; text-align: center; white-space: pre-line; }

.social-rule-card { position: absolute; top: 2281px; width: 350px; height: 450px; border: 5px solid var(--color-black); border-radius: 50px; background: rgba(217,217,217,0); text-align: center; overflow: hidden; }
.publish-card { left: 152px; backdrop-filter: blur(2px); }
.creative-card { left: 545px; }
.materials-card { left: 937px; }
.social-rule-card > img:first-child { position: absolute; display: block; object-fit: contain; }
.publish-card > img:first-child { left: 30px; top: 26px; width: 288px; height: 192px; }
.creative-card > img:first-child { left: 46px; top: 16px; width: 257px; height: 223px; }
.materials-card > img:first-child { left: 55px; top: 0; width: 250px; height: 222px; transform: scale(var(--materials-card-art-scale)); transform-origin: center; }
.card-label-image { position: absolute; left: 34px; top: 218px; width: 278px; height: 60px; }
.social-rule-card h4 { position: absolute; top: 218px; left: 34px; display: flex; align-items: center; justify-content: center; width: 278px; height: 60px; margin: 0; border-radius: 24.851391px; font-size: 30px; font-weight: 900; line-height: 1.55; white-space: nowrap; }
.publish-card h4 { font-size: 32px; }
.creative-card h4 { background: var(--color-label-green); }
.materials-card h4 { background: var(--color-window-yellow); }
.social-rule-card p { position: absolute; left: 12px; top: 278px; bottom: 0; display: flex; align-items: center; justify-content: center; width: calc(100% - 24px); margin: 0; font-size: 25px; font-weight: 700; line-height: 1.6; letter-spacing: .5px; white-space: pre-line; }

.tracking-section {
  position: relative;
  width: 1440px;
  height: 750px;
  overflow: hidden;
  background: transparent;
  color: var(--color-tracking-ink);
}

.tracking-window-shadow,
.tracking-window-surface,
.tracking-title-shadow,
.tracking-title-label {
  position: absolute;
  display: block;
}

.tracking-window-shadow { left: 94.89946px; top: 145.74327px; width: 1260.754028px; height: 558.420105px; }
.tracking-window-surface { left: 87.89946px; top: 138.74327px; width: 1260.754028px; height: 558.420105px; }
.tracking-title-shadow { left: 127.231567px; top: 97.227188px; width: 493px; height: 84px; }
.tracking-title-label { left: 123.231567px; top: 90.227188px; width: 491px; height: 86px; }
.tracking-title-highlight { position: absolute; left: 139.231567px; top: 96.227188px; width: 460px; height: 3px; background: var(--color-tracking-highlight); }

#tracking-title {
  position: absolute;
  left: 157px;
  top: 99px;
  width: 442px;
  height: 67px;
  margin: 0;
  color: var(--color-tracking-ink);
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 4.8px;
  white-space: nowrap;
}

.tracking-step { position: absolute; left: 134px; width: 535px; }
.tracking-step-1 { top: 205px; height: 82px; }
.tracking-step-2 { top: 326px; height: 83px; }
.tracking-step-3 { top: 446px; height: 83px; }
.tracking-step-4 { top: 568px; height: 82px; }
.step-circle { position: absolute; display: block; width: 80px; height: 80px; }
.tracking-step-1 .step-circle { left: 8px; top: 0; }
.tracking-step-2 .step-circle { left: 3px; top: -4.06px; }
.tracking-step-3 .step-circle { left: 3px; top: -4.4px; }
.tracking-step-4 .step-circle { left: 3px; top: -4.46px; }
.step-highlight { display: none; }
.tracking-step-1 .step-highlight { left: 42.532837px; top: 4.698242px; }
.tracking-step-2 .step-highlight { left: 37.078491px; top: .637207px; }
.tracking-step-3 .step-highlight { left: 36.532837px; top: .299805px; }
.tracking-step-4 .step-highlight { left: 36.532715px; top: .239258px; }
.step-number { position: absolute; width: 65.493713px; height: 62px; color: var(--color-tracking-ink); font-size: 44px; font-weight: 900; line-height: 1.4; text-align: center; }
.tracking-step-1 .step-number { left: 18.617554px; top: 6.203125px; }
.tracking-step-2 .step-number { left: 11.617554px; top: 4.202637px; }
.tracking-step-3 .step-number { left: 11.617554px; top: 3.202637px; }
.tracking-step-4 .step-number { left: 8.617554px; top: 4.202637px; }
.tracking-step-1 { --step-circle-left: 8px; --step-circle-top: 0px; }
.tracking-step-2 { --step-circle-left: 3px; --step-circle-top: -4.06px; }
.tracking-step-3 { --step-circle-left: 3px; --step-circle-top: -4.4px; }
.tracking-step-4 { --step-circle-left: 3px; --step-circle-top: -4.46px; }
.tracking-step .step-circle {
  left: var(--step-circle-left);
  top: var(--step-circle-top);
}
.tracking-step .step-number {
  left: var(--step-circle-left);
  top: var(--step-circle-top);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  line-height: 1;
  text-align: center;
}
.tracking-step h3 { position: absolute; left: 106.85817px; top: -4.308797px; width: 413.644531px; height: 50px; margin: 0; color: var(--color-tracking-ink); font-size: 36px; font-weight: 900; line-height: 1.4; letter-spacing: 3.6px; white-space: nowrap; }
.tracking-step p { position: absolute; left: 106.85817px; top: 48px; width: 413.644531px; height: 30px; margin: 0; color: var(--color-tracking-secondary); font-size: 20.682226px; font-weight: 500; line-height: 1.45; white-space: nowrap; }
.tracking-step-divider { position: absolute; left: 107.719925px; top: 96.517059px; width: 404.165161px; height: 2.154399px; background: var(--color-tracking-ink); }

.tracking-video { position: absolute; left: 680px; top: 179px; width: 627px; height: 476px; }
.tracking-video img { display: block; width: 627px; height: 476px; }

/* Section 4 — 推廣獎勵路線 */
.rewards-section {
  position: relative;
  width: 1440px;
  height: 850px;
  overflow: hidden;
  background: transparent;
  color: #080d22;
}

.rewards-title-shadow,
.rewards-title-label {
  position: absolute;
  display: block;
}
.rewards-title-shadow { left: 106px; top: 58px; width: 394px; height: 84px; }
.rewards-title-label { left: 107px; top: 51px; width: 385px; height: 86px; }
#rewards-title { position: absolute; z-index: 2; left: 107px; top: 51px; display: flex; align-items: center; justify-content: center; width: 385px; height: 86px; margin: 0; font-size: 48px; font-weight: 900; line-height: normal; letter-spacing: 4.8px; white-space: nowrap; }
.rewards-hero-shadow-svg { position: absolute; left: calc(109px + var(--hero-title-shadow-offset)); top: calc(177px + var(--hero-title-shadow-offset)); width: 644px; height: 140px; overflow: visible; fill: var(--color-black); stroke: var(--color-black); stroke-width: 5.255px; stroke-linecap: round; stroke-linejoin: round; paint-order: stroke fill; font-family: "Noto Sans", var(--font-heading); font-size: 48px; font-weight: 900; letter-spacing: 4.8px; }
.rewards-hero-shadow-svg text { dominant-baseline: text-before-edge; }
.rewards-hero-title { position: absolute; left: 109px; top: 177px; width: 644px; height: 134px; margin: 0; color: #fff; font-family: "Noto Sans", var(--font-heading); font-size: 48px; font-weight: 900; line-height: 1.4; letter-spacing: 4.8px; white-space: nowrap; -webkit-text-stroke: 4.130809px #080d22; paint-order: stroke fill; }

.reward-unlock-card { position: absolute; width: 600px; color: #000; }
.reward-card-red { left: 99px; top: 352px; height: 195px; }
.reward-card-yellow { left: 95px; top: 580px; height: 200px; }
.reward-card-shadow,
.reward-card-border,
.reward-card-inner { position: absolute; border-radius: 30px; }
.reward-card-red .reward-card-shadow { left: 6px; top: 10px; width: 593px; height: 185px; border: 3px solid #000; background: #000; }
.reward-card-red .reward-card-border { left: 6px; top: 9px; width: 587px; height: 180px; border: 3px solid #000; background: #ed4866; }
.reward-card-red .reward-card-inner { left: 16px; top: 20px; width: 569px; height: 160px; background: #fff; }
.reward-card-yellow .reward-card-shadow { left: 15px; top: 0; width: 594px; height: 200px; border: 3px solid #000; background: #000; }
.reward-card-yellow .reward-card-border { left: 15px; top: 0; width: 588px; height: 195px; border: 3px solid #000; background: #fdc404; }
.reward-card-yellow .reward-card-inner { left: 25px; top: 9px; width: 569px; height: 175px; background: #fff; }
.reward-unlock-card > img { position: absolute; z-index: 2; object-fit: contain; }
.reward-card-red > img { left: 35px; top: 38px; width: 117px; height: 113px; }
.reward-card-yellow > img { left: 31px; top: 36px; width: 129px; height: 118px; }
.reward-card-copy { position: absolute; z-index: 2; }
.reward-card-red .reward-card-copy { left: 132px; top: 36px; width: 480px; }
.reward-card-yellow .reward-card-copy { left: 135px; top: 29px; width: 475px; }
.reward-threshold { margin: 0; font-size: 30px; font-weight: 900; line-height: 1.2; }
.reward-number-blue { color: #037dfa; }
.reward-accent-red,
.milestone-accent-red { color: #ff0000; }
.reward-accent-green { color: #1cb583; }
.reward-card-red .reward-threshold { margin-left: 23px; }
.reward-card-yellow .reward-threshold { margin-left: 25px; }
.reward-card-copy h4 { margin: 7px 0 0; font-size: 40px; font-weight: 900; line-height: 1.2; letter-spacing: 2px; white-space: nowrap; }
.reward-card-yellow .reward-card-copy h4 { margin-top: 10px; letter-spacing: 4px; }
.reward-description { margin: 1px 0 0; color: #080d22; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: 1px; white-space: nowrap; }
.reward-card-red .reward-description { margin-top: 7px; margin-left: 20px; }
.reward-card-yellow .reward-description { margin-top: 11px; margin-left: 15px; }
.reward-upgrade-line { display: flex; align-items: center; gap: 0; }
.reward-upgrade-line strong { display: block; margin: 10px 0 0 var(--hero-title-shadow-offset); padding: 7px 9px 5px; border-radius: 10px; background: #fdc404; font-size: 20px; font-weight: 900; line-height: 1.2; letter-spacing: 1px; white-space: nowrap; }

.pixel-reward-window { position: absolute; left: 763px; top: 45.93px; width: 567px; height: 744px; }
.reward-window-shadow { position: absolute; left: 10px; top: 11px; display: block; width: 557px; height: 735px; }
.reward-window-surface { position: absolute; left: 3px; top: 4px; display: block; width: 557px; height: 735px; }
.reward-window-titlebar { position: absolute; left: 3px; top: 4px; display: block; width: 557px; height: 43px; }
.reward-window-dots { position: absolute; left: 23.11px; top: 15.83px; display: flex; gap: 10.74px; }
.reward-window-dots i { width: 17.35px; height: 17.35px; border: 2.478485px solid #080d22; border-radius: 2.478485px; background: #ffe500; }
.reward-window-dots i:nth-child(2) { background: #4ad918; }
.reward-window-dots i:nth-child(3) { background: #d6e91f; }
.reward-window-minimize { position: absolute; left: 472.54px; top: 23.26px; display: block; width: 16.52px; height: 3.3px; }
.reward-window-close { position: absolute; left: 521.29px; top: 15.83px; display: block; width: 16.52px; height: 17.35px; }
.reward-estimate-label { position: absolute; left: 54.51px; top: 69.05px; margin: 0; font-size: 28.0895px; font-weight: 900; line-height: 1.2; }
.reward-amount-row { position: absolute; left: 24px; top: 127px; display: flex; align-items: center; justify-content: center; gap: 12px; width: 516px; height: 100px; }
.reward-amount-row img { flex: 0 0 auto; display: block; object-fit: contain; }
.reward-amount-row img:first-child { width: 50.4px; height: 67.75px; }
.reward-amount-row img:last-child { width: 53.7px; height: 67.75px; }
.reward-amount { flex: 0 1 auto; display: block; min-width: 0; color: #030415; font-family: var(--font-reward-number); font-size: 82px; font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; }

.current-milestone-card { position: absolute; left: 54px; top: 259px; width: 458px; height: 198px; }
.milestone-shadow,
.milestone-body,
.milestone-titlebar { position: absolute; border: 3px solid #000; border-radius: 20px; }
.milestone-shadow { left: 4px; top: 2px; width: 454px; height: 196px; background: #000; }
.milestone-body { left: 0; top: 12.93px; width: 454px; height: 181px; background: #f1f0ef; }
.milestone-titlebar { left: 0; top: 0; width: 454px; height: 59px; background: #fdc404; }
.current-milestone-card h4 { position: absolute; left: 33px; top: 15px; margin: 0; font-size: 24px; font-weight: 900; line-height: 1.2; letter-spacing: 1.2px; white-space: nowrap; }
.milestone-status { position: absolute; left: 335px; top: 13px; min-width: 96px; height: 32px; padding: 3px 17px 0; border-radius: 14.04475px; background: #ff0000; color: #fff; font-size: 19px; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.current-milestone-card img { position: absolute; left: 19px; top: 58px; width: 137px; height: 125px; object-fit: contain; }
.current-milestone-card > p { position: absolute; left: 159px; top: 88px; width: 290px; margin: 0; font-size: 24px; font-weight: 900; line-height: 1.4; letter-spacing: 1.2px; }
.reward-route-caption { position: absolute; left: 36px; top: 478px; width: 499px; margin: 0; font-size: 28px; font-weight: 900; line-height: 1.55; letter-spacing: 1.4px; white-space: nowrap; }

.reward-slider-wrap { position: absolute; left: 26.89px; top: 525px; width: 518.89px; height: 138px; }
.reward-slider-wrap input[type="range"] { position: absolute; left: 4px; top: 68px; width: 504px; height: 33px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: grab; }
.reward-slider-wrap input[type="range"]:active { cursor: grabbing; }
.reward-slider-wrap input[type="range"]::-webkit-slider-runnable-track { height: 31px; border: 3px solid #000; border-radius: 30px; background: linear-gradient(to right, #037dfa 0 var(--slider-progress, 14.57%), #f1f0ef var(--slider-progress, 14.57%) 100%); }
.reward-slider-wrap input[type="range"]::-webkit-slider-thumb { width: 39px; height: 33px; margin-top: -4px; appearance: none; -webkit-appearance: none; border: 3px solid #000; border-radius: 50%; background: #037dfa; }
.reward-slider-wrap input[type="range"]::-moz-range-track { height: 31px; border: 3px solid #000; border-radius: 30px; background: linear-gradient(to right, #037dfa 0 var(--slider-progress, 14.57%), #f1f0ef var(--slider-progress, 14.57%) 100%); }
.reward-slider-wrap input[type="range"]::-moz-range-thumb { width: 33px; height: 27px; border: 3px solid #000; border-radius: 50%; background: #037dfa; }
.reward-slider-ticks { position: absolute; left: 0; top: 105px; width: 519px; height: 29px; font-size: 24px; font-weight: 900; line-height: 29px; }
.reward-slider-ticks span { position: absolute; top: 0; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.reward-slider-ticks .tick-arrow { left: 0; transform: none; font-size: 17.35px; text-align: left; }
.reward-slider-ticks .tick-30 { left: 87.3px; }
.reward-slider-ticks .tick-50 { left: 133.8px; }
.reward-slider-ticks .tick-100 { left: 250.7px; }
.reward-slider-ticks .tick-150 { left: 367.5px; }
.reward-slider-ticks .tick-200 { left: 484.5px; }
.slider-value-bubble { position: absolute; z-index: 5; left: var(--slider-thumb-left, 88px); top: 25px; min-width: 50px; height: 35px; padding: 2px 8px 0; transform: translateX(-50%); border: 3px solid #000; border-radius: 10px; background: #f20b20; color: #fff; font-family: var(--font-reward-number); font-size: 22px; font-weight: 800; line-height: 27px; text-align: center; pointer-events: none; }
.slider-value-bubble::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); border-right: 3px solid #000; border-bottom: 3px solid #000; background: #f20b20; }
.slider-value-bubble span { position: relative; z-index: 1; }
.slider-milestone-fires { position: absolute; inset: 0; pointer-events: none; }
.slider-milestone-fires img { position: absolute; z-index: 3; top: 17px; display: none; width: 50px; height: 50px; transform: translateX(-50%); object-fit: contain; }
.slider-milestone-fires img.is-reached { display: block; }
.slider-milestone-fires img[data-milestone="30"] { left: 87.3px; }
.slider-milestone-fires img[data-milestone="50"] { left: 133.8px; }
.slider-milestone-fires img[data-milestone="100"] { left: 250.7px; }
.slider-milestone-fires img[data-milestone="150"] { left: 367.5px; }
.slider-milestone-fires img[data-milestone="200"] { left: 484.5px; }
.reward-route-help { position: absolute; left: 43px; top: 684px; width: 490px; margin: 0; font-size: 20px; font-weight: 900; line-height: 1.55; letter-spacing: 1px; white-space: nowrap; }

/* Section 5 — 常見問題 */
.faq-section {
  position: relative;
  width: 1440px;
  height: var(--faq-section-height);
  overflow: hidden;
  background: transparent;
  color: #0c1535;
}
.faq-window-shadow {
  position: absolute;
  left: 97px;
  top: 72px;
  width: 1252px;
  height: var(--faq-window-height);
  border: 5.783133px solid #0c1535;
  border-radius: 18.176px;
  background: #0c1535;
}
.faq-window {
  position: absolute;
  left: 90px;
  top: 65px;
  width: 1252px;
  height: var(--faq-window-height);
  overflow: hidden;
  border: 5.783133px solid #0c1535;
  border-radius: 18.176px;
  background: #fff;
}
.faq-titlebar {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 11.566px;
  width: 100%;
  height: 55px;
  padding-left: 33.877px;
  background: #a295f9;
}
.faq-titlebar i {
  display: block;
  width: 23.959px;
  height: 23.959px;
  border: 3.304647px solid #0c1535;
  border-radius: 2.478px;
  background: #ffe500;
}
.faq-titlebar i:nth-child(2) { background: #a0e673; }
.faq-category-tabs { position: absolute; z-index: 2; left: 398.22px; top: 97.22px; display: flex; gap: 36px; }
.faq-category {
  width: 166px;
  height: 59px;
  padding: 0;
  border: 2.065404px solid #0c1535;
  border-radius: 14.871px;
  color: #0c1535;
  font-family: var(--font-body);
  font-size: 26.437178px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 2.643718px;
  cursor: pointer;
}
.faq-category-start { background: #fdc404; }
.faq-category-share { background: #35cc9b; }
.faq-category-other { background: #ed4866; }
.faq-category:hover,
.faq-category:focus-visible { transform: translateY(-2px); }
.faq-category.is-active { box-shadow: 0 4px 0 #0c1535; }
.faq-main-content { position: absolute; left: 0; top: 163.437px; width: 1241px; height: var(--faq-main-height); background: #fff; }
.faq-left-panel { position: absolute; left: 0; top: 0; width: 370.947px; height: var(--faq-main-height); background: #fff; }
#faq-title {
  position: absolute;
  left: 37.175px;
  top: -39.385px;
  width: 301.549px;
  height: 103.27px;
  margin: 0;
  color: #0c1535;
  font-size: 67.74527px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 6.774527px;
  text-align: center;
  white-space: nowrap;
}
.faq-divider { position: absolute; left: 370.12px; top: 31.39px; width: 1.652px; height: var(--faq-divider-height); background: #0c1535; }
.faq-list { position: absolute; left: 403.99px; top: 31.39px; display: flex; flex-direction: column; gap: var(--faq-item-gap); width: 799.725px; overflow: visible; }
.faq-item {
  flex: 0 0 auto;
  width: 100%;
  min-height: 58.657px;
  overflow: hidden;
  border: 3px solid #0c1535;
  border-radius: 14.871px;
  background: #fff;
}
.faq-item[open] { height: auto; }
.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54.526px;
  padding: 9px 70px 9px 28.5px;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { color: #0c1535; font-size: 26.437178px; font-weight: 900; line-height: 1.3; letter-spacing: 1.321859px; white-space: normal; }
.faq-item summary i,
.faq-item summary i::after {
  position: absolute;
  display: block;
  width: 19px;
  height: 2.5px;
  background: #0c1535;
  content: "";
}
.faq-item summary i { right: 27px; top: 50%; transform: translateY(-50%); }
.faq-item summary i::after { transform: rotate(90deg); }
.faq-item[open] summary i::after { transform: rotate(0); }
.faq-item[open] summary { border-bottom: 3px solid #0c1535; }
.faq-item p { margin: 0; padding: 18px 36px 22px 28.5px; color: #35425c; font-size: 22px; font-weight: 700; line-height: 1.7; letter-spacing: .75px; }
.faq-item p strong { color: #0c1535; font-weight: 900; }
.faq-illustration { position: absolute; left: var(--faq-illustration-left); top: var(--faq-illustration-top); width: 276.1px; height: 255.2px; overflow: hidden; }
.faq-question-bubble { position: absolute; left: 0; top: 0; width: 157.801px; height: 165.791px; }
.faq-q { position: absolute; left: 43.945px; top: 9.988px; color: #080d23; font-family: var(--font-number); font-size: 85.891552px; font-weight: 900; line-height: 1.45; }
.faq-answer-shadow { position: absolute; left: 97.878px; top: 79.904px; width: 157.801px; height: 159.798px; }
.faq-answer-bubble { position: absolute; left: 97.878px; top: 69.916px; width: 157.801px; height: 159.798px; }
.faq-a { position: absolute; left: 145.816px; top: 91.883px; color: #080d23; font-family: var(--font-number); font-size: 77.901639px; font-weight: 900; line-height: 1.45; }

.partners-section {
  position: relative;
  width: 1440px;
  height: 734px;
  overflow: hidden;
  background: transparent;
  color: #0c1535;
}

.partners-window,
.partners-title-label {
  position: absolute;
  display: block;
  max-width: none;
  filter: drop-shadow(7px 7px 0 #080a20);
}

.partners-window {
  left: 87px;
  top: 106px;
  width: 1243px;
  height: 574px;
}

.partners-title-label {
  left: 148.97px;
  top: 40px;
  width: 335px;
  height: 94px;
}

#partners-title {
  position: absolute;
  z-index: 2;
  left: 148.97px;
  top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 335px;
  height: 94px;
  margin: 0;
  color: #000;
  font-family: var(--font-heading);
  font-size: 53.701px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: 2px;
  white-space: nowrap;
}

.partners-logo-grid {
  position: absolute;
  z-index: 1;
  left: 101.97px;
  top: 163px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 107px);
  column-gap: 22px;
  row-gap: 15px;
  width: 1157.06px;
  height: 473px;
  padding: 0 12px;
}

.partner-logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 14px 12px;
}

.site-footer {
  position: relative;
  width: 1440px;
  height: 250px;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.footer-brand {
  position: absolute;
  left: 65px;
  top: 49px;
  width: 503.959px;
  height: 66.093px;
}

.footer-star {
  position: absolute;
  left: 0;
  top: 8.262px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41.308px;
  height: 46.265px;
  color: #ddd2ff;
  font-family: var(--font-number);
  font-size: 41.308px;
  font-weight: 400;
  line-height: normal;
}

.footer-brand-copy {
  position: absolute;
  left: 77.659px;
  top: 0;
  width: 437.866px;
  height: 66.093px;
  font-family: var(--font-number);
}

.footer-brand-copy strong,
.footer-brand-copy span {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  width: 437.866px;
  margin: 0;
  white-space: nowrap;
}

.footer-brand-copy strong {
  top: 0;
  height: 40.482px;
  color: #fff;
  font-size: 30.568px;
  font-weight: 900;
  letter-spacing: .8262px;
}

.footer-brand-copy span {
  top: 39.656px;
  height: 20.654px;
  color: #c4b5fd;
  font-size: 14.045px;
  font-weight: 400;
  letter-spacing: 3.3046px;
}

.footer-copyright {
  position: absolute;
  left: 65px;
  top: 164px;
  margin: 0;
  color: #fff;
  font-family: var(--font-reward-number);
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.footer-divider {
  position: absolute;
  left: 837px;
  top: 150px;
  width: 1.239px;
  height: 48.744px;
  background: #eee8ff;
}

.footer-links {
  position: absolute;
  left: 864.943px;
  top: 149.957px;
  display: flex;
  gap: 8.262px;
  width: 491.566px;
  height: 49.57px;
}

.footer-links a {
  position: relative;
  display: flex;
  flex: 0 0 165.232px;
  align-items: center;
  width: 165.232px;
  height: 49.57px;
  color: #fff;
  font-family: var(--font-number);
  font-size: 20.654px;
  font-weight: 900;
  line-height: normal;
  text-decoration: none;
}

.footer-links img {
  flex: 0 0 31.394px;
  width: 31.394px;
  height: 31.394px;
  margin-right: 13.219px;
}

.footer-links a:hover,
.footer-links a:focus-visible { color: #c4b5fd; }

.site-header { height: 230px; background: var(--color-white); }

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--nav-height);
  padding: 0 57.810219px 0 38.102192px;
  border-bottom: var(--border-section) solid var(--color-ink);
}

.brand-space { flex: 1; }

.nav-actions { display: flex; align-items: center; gap: 94.299194px; }

.nav-links { display: flex; align-items: center; gap: 47.299271px; white-space: nowrap; }

.nav-links a,
.language-toggle {
  color: var(--color-text-nav);
  font-family: var(--font-heading);
  font-size: 23.649635px;
  font-weight: 900;
  line-height: normal;
  text-decoration: none;
}

.nav-links a { transition: transform 120ms ease, color 120ms ease; }
.nav-links a:hover { color: var(--color-marquee); transform: translateY(-2px); }

.language-toggle {
  width: 110px;
  height: 53px;
  padding: 0;
  border: 3px solid var(--color-language-border);
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}

.language-toggle:hover { background: #ffe450; transform: translateY(-2px); }
.language-toggle span:not([aria-hidden]) { opacity: 0.45; }
.language-toggle span.is-active { opacity: 1; }

.marquee {
  width: 100%;
  height: var(--marquee-height);
  overflow: hidden;
  border-bottom: var(--border-section) solid var(--color-ink);
  background: var(--color-marquee);
}

.marquee-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: marquee-scroll 22s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-group { display: flex; align-items: center; gap: 115px; padding-right: 115px; }

.marquee span {
  flex: none;
  color: var(--color-black);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

@keyframes marquee-scroll { to { transform: translateX(-50%); } }

.hero {
  position: relative;
  width: 1440px;
  height: var(--hero-height);
  overflow: hidden;
  background: #49b4f6;
}

.hero-background {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1440px;
  height: auto;
  max-width: none;
}

.hero-title-wrap { position: absolute; left: 92px; top: 218.824829px; width: 709.489075px; }

.hero-title {
  position: absolute;
  inset: 0 auto auto 0;
  width: 709.489075px;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 74.890511px;
  font-weight: 900;
  line-height: 100px;
  letter-spacing: 3px;
  white-space: nowrap;
  -webkit-text-stroke: 3px var(--color-ink);
  paint-order: stroke fill;
}

.hero-title-shadow-svg { position: absolute; left: var(--hero-title-shadow-offset); top: var(--hero-title-shadow-offset); width: 710px; height: 210px; overflow: visible; fill: var(--color-black); stroke: var(--color-black); stroke-width: 5.255px; stroke-linecap: round; stroke-linejoin: round; paint-order: stroke fill; font-family: var(--font-heading); font-size: 74.890511px; font-weight: 900; letter-spacing: 3px; }
.hero-title-shadow-svg text { dominant-baseline: text-before-edge; }

.event-meta { position: absolute; inset: 0; font-family: var(--font-number); font-weight: 900; }
.event-date { position: absolute; left: 92px; top: 469px; font-size: 45.985401px; letter-spacing: 2.29927px; -webkit-text-stroke: 2px var(--color-text-primary); paint-order: stroke fill; }
.event-pin { position: absolute; left: 516px; top: 473px; font-family: var(--font-body); font-size: 48px; line-height: 1; }
.event-format { position: absolute; left: 564px; top: 476.175171px; font-size: 32.846718px; letter-spacing: 2.627737px; -webkit-text-stroke: 2px var(--color-black); paint-order: stroke fill; }

.pixel-window { position: absolute; overflow: hidden; }
.performance-window,
.materials-window,
.countdown-window { overflow: visible; }
.performance-window .window-shadow,
.materials-window .window-shadow,
.countdown-window .countdown-shadow { display: none; }
.performance-window .window-surface,
.materials-window .window-surface,
.countdown-window .countdown-surface { filter: drop-shadow(7px 7px 0 var(--color-ink)); }
.performance-window { left: 747px; top: 86px; width: 550px; height: 205px; }
.materials-window { left: 845px; top: 338.824829px; width: 523px; height: 213px; }
.materials-window { color: inherit; text-decoration: none; }
.window-layer, .countdown-layer { position: absolute; display: block; }

.performance-window .window-shadow { left: 9px; top: 4px; width: 533px; height: 196px; }
.performance-window .window-surface { left: 7px; top: 7px; width: 531px; height: 186px; }
.performance-window .window-titlebar { left: 7px; top: 4px; width: 529px; height: 46px; }
.materials-window .window-shadow { left: 9px; top: 9.175171px; width: 498px; height: 199px; }
.materials-window .window-surface { left: 1px; top: 1px; width: 501px; height: 202px; }
.materials-window .window-titlebar { left: 1.5px; top: 2px; width: 500.5px; height: 50px; }

.window-controls { position: absolute; display: flex; gap: 10.510951px; left: 22.335815px; top: 19.708029px; }
.window-controls img { width: 15.766423px; height: 15.766423px; }
.window-minimize, .window-close { position: absolute; display: block; }
.window-minimize { width: 19.708029px; height: 3.941606px; }
.window-close { width: 19.708029px; height: 19.708029px; }
.performance-window .window-minimize { left: 457.204346px; top: 26.532852px; }
.performance-window .window-close { left: 487.423401px; top: 18.080292px; }
.materials-window .window-minimize { left: 422.51828px; top: 25.532867px; }
.materials-window .window-close { left: 456.737244px; top: 17.080322px; }

.feature-media { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.feature-media img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.performance-window .feature-media { left: 15px; top: 70px; width: 150.146628px; height: 100px; }
.materials-window .feature-media { left: 34px; top: 57px; width: 125px; height: 122px; }

.feature-copy { position: absolute; }
.performance-window .feature-copy { left: 169px; top: 80px; }
.materials-window .feature-copy { left: 160px; top: 79px; }
.feature-copy h2 { margin: 0; color: var(--color-text-primary); font-size: 40px; font-weight: 900; line-height: 1.2; letter-spacing: 4px; white-space: nowrap; }
.feature-copy p { margin: 0; color: var(--color-text-secondary); font-size: 18px; font-weight: 700; line-height: normal; letter-spacing: 1px; white-space: nowrap; }
.performance-window .feature-copy p { margin-top: 9px; }
.materials-window .feature-copy p { margin-top: 12px; }
.performance-window .feature-copy p { font-size: 18.394161px; }
.feature-arrow { position: absolute; width: 43.357666px; height: 31.532846px; }
.performance-window .feature-arrow { left: 451.204437px; top: 91.109467px; }
.materials-window .feature-arrow { left: 409.51828px; top: 88.226318px; }

.countdown-window { position: absolute; left: 785px; top: 601px; width: 439px; height: 169px; overflow: visible; }
.countdown-shadow { left: 6px; top: 0; width: 435px; height: 166px; }
.countdown-surface { left: 1px; top: 1px; width: 435px; height: 161px; }
.countdown-titlebar { left: 4px; top: 0; width: 429px; height: 50px; }
.countdown-window h2 { position: absolute; left: 27.014648px; top: 13.802979px; margin: 0; font-size: 21.021898px; font-weight: 900; line-height: normal; }
.countdown-embed { position: absolute; left: 28.014648px; top: 56.802979px; display: flex; align-items: center; justify-content: space-between; width: 384px; height: 91px; overflow: hidden; }
.countdown-unit { --ring-progress: 0deg; position: relative; display: flex; flex: 0 0 82px; flex-direction: column; align-items: center; justify-content: center; width: 82px; height: 82px; border-radius: 50%; background: conic-gradient(#21a4b1 0 var(--ring-progress), #dceff1 var(--ring-progress) 360deg); color: #111827; font-family: var(--font-number); }
.countdown-unit::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.countdown-unit strong,
.countdown-unit span { position: relative; z-index: 1; }
.countdown-unit strong { font-size: 28px; font-weight: 900; line-height: 1; }
.countdown-unit span { margin-top: 2px; font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-play-state: paused; }
  html { scroll-behavior: auto; }
}