:root {
      --color-bg-cream: #f5ead8;
      --color-bg-gray: #d7c5ab;
      --color-text-main: #21170f;
      --color-text-muted: #6d5b46;
      --color-line: rgba(45, 31, 18, 0.18);
      --color-black-noodle: #111111;
      --color-clear-noodle: #f4efe6;
      --color-ivory-noodle: #d8b778;
      --color-accent-lime: #c6d85f;
      --color-accent-amber: #c97046;
      --color-accent-green: #9aaf7b;
      --shadow-soft: 0 28px 80px rgba(77, 48, 25, 0.18);
      --shadow-strong: 0 46px 120px rgba(77, 48, 25, 0.28);
      --bg-x: 0px;
      --bg-y: 0px;
      --copy-x: 0px;
      --copy-y: 0px;
      --active-x: 0px;
      --active-y: 0px;
      --inactive-x: 0px;
      --inactive-y: 0px;
      --konjac-cutout-image: url("../images/04.png");
      --konjac-photo-x: 50%;
      --konjac-photo-y: 42%;
      --konjac-photo-position: center 42%;
    }

    * {
      box-sizing: border-box;
    }

    html {
      min-height: 100%;
      color: var(--color-text-main);
      background: #f5ead8;
      scroll-behavior: smooth;
    }

    body {
      min-height: 100%;
      margin: 0;
      font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
      background:
        linear-gradient(180deg, #f8f0e2 0%, #f1e2ca 58%, #e2c9a8 100%);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font: inherit;
    }

    .tasteae-copy-phrase {
      display: inline-block;
    }

    .page-shell {
      min-height: 100svh;
      width: 100%;
      max-width: 100%;
    }

    .hero {
      --accent: #21170f;
      --accent-2: #c97046;
      --accent-3: #c6d85f;
      --headline: #21170f;
      --copy-strong: #2f2115;
      --copy-muted: rgba(70, 49, 31, 0.74);
      --surface: rgba(255, 249, 238, 0.64);
      --surface-strong: rgba(255, 247, 232, 0.82);
      --line-cream: rgba(52, 36, 22, 0.22);
      --bg-type-color: rgba(103, 74, 48, 0.15);
      --wash-a: rgba(201, 112, 64, 0.18);
      --wash-b: rgba(198, 216, 95, 0.12);
      --stage-shadow: rgba(80, 50, 25, 0.22);
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: calc(100svh - 42px);
      padding: 24px 36px 22px;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 78% 38%, rgba(226, 194, 145, 0.48), transparent 34%),
        radial-gradient(circle at 96% 22%, rgba(198, 216, 95, 0.16), transparent 24%),
        radial-gradient(circle at 10% 82%, rgba(201, 112, 64, 0.10), transparent 30%),
        linear-gradient(104deg, #fbf4e8 0%, #f5ead8 34%, #eedcc0 66%, #dfc5a0 100%);
    }

    .hero[data-active-noodle="clear"] {
      --accent: #21170f;
      --accent-2: #c6d85f;
      --accent-3: #9aaf7b;
      --headline: #21170f;
      --copy-strong: #2f2115;
      --copy-muted: rgba(70, 49, 31, 0.74);
      --bg-type-color: rgba(132, 146, 62, 0.18);
      --wash-a: rgba(198, 216, 95, 0.20);
      --wash-b: rgba(232, 215, 188, 0.18);
      --stage-shadow: rgba(76, 82, 36, 0.20);
    }

    .hero[data-active-noodle="ivory"] {
      --accent: #21170f;
      --accent-2: #d19a62;
      --accent-3: #c97046;
      --headline: #21170f;
      --copy-strong: #2f2115;
      --copy-muted: rgba(70, 49, 31, 0.74);
      --bg-type-color: rgba(169, 108, 55, 0.18);
      --wash-a: rgba(209, 154, 98, 0.24);
      --wash-b: rgba(201, 112, 70, 0.18);
      --stage-shadow: rgba(112, 72, 32, 0.20);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -3;
      background:
        linear-gradient(90deg, rgba(74, 45, 24, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(74, 45, 24, 0.030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 112, 64, 0.10), transparent 24%, rgba(255, 250, 238, 0.34) 58%, transparent 100%);
      background-size: 72px 72px, 72px 72px, 100% 100%;
      mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(circle at 73% 38%, var(--wash-a), transparent 31%),
        radial-gradient(circle at 18% 76%, var(--wash-b), transparent 36%),
        linear-gradient(90deg, rgba(255, 252, 246, 0.70) 0%, rgba(248, 236, 216, 0.44) 36%, rgba(230, 203, 162, 0.18) 72%, rgba(160, 107, 62, 0.10) 100%),
        linear-gradient(180deg, rgba(255, 252, 246, 0.34) 0%, rgba(92, 58, 29, 0.10) 100%);
      opacity: 1;
      transition: background 640ms ease, opacity 640ms ease;
      pointer-events: none;
    }

    .hero__grain {
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0.11;
      background-image:
        radial-gradient(rgba(85, 54, 30, 0.30) 0.6px, transparent 0.6px),
        radial-gradient(rgba(255, 255, 255, 0.58) 0.8px, transparent 0.8px);
      background-position: 0 0, 9px 12px;
      background-size: 7px 7px, 11px 11px;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .hero__header {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      width: min(100%, 1440px);
      margin: 0 auto;
    }

    .brand-lockup {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      width: clamp(148px, 15vw, 214px);
      min-height: 48px;
      padding: 6px 12px;
      border: 1px solid rgba(58, 39, 23, 0.14);
      border-radius: 6px;
      background: rgba(255, 249, 238, 0.56);
      box-shadow: 0 16px 34px rgba(93, 60, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.54);
      transition: transform 180ms ease, background 180ms ease;
    }

    .brand-lockup:hover,
    .brand-lockup:focus-visible {
      transform: translateY(-1px);
      background: rgba(255, 249, 238, 0.86);
    }

    .brand-wordmark {
      display: block;
      width: 100%;
      height: auto;
      max-height: 42px;
      object-fit: contain;
    }

    .hero__nav {
      display: flex;
      align-items: center;
      gap: 18px;
      color: rgba(35, 24, 15, 0.70);
      font-size: 13px;
      font-weight: 700;
    }

    .hero__nav a {
      padding: 6px 0;
      border-bottom: 1px solid transparent;
      transition: border-color 180ms ease, color 180ms ease;
    }

    .hero__nav a:hover,
    .hero__nav a:focus-visible {
      color: #21170f;
      border-bottom-color: rgba(35, 24, 15, 0.42);
    }

    .hero__content {
      position: relative;
      z-index: 5;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 26px;
      width: min(100%, 1440px);
      margin: 0 auto;
      padding: 14px 0 18px;
    }

    .hero__bg-type {
      position: absolute;
      top: 12%;
      left: 50%;
      z-index: 1;
      width: min(92%, 1320px);
      color: var(--bg-type-color);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: 10rem;
      font-weight: 700;
      line-height: 0.85;
      text-align: center;
      transform: translate3d(calc(-50% + var(--bg-x)), var(--bg-y), 0);
      user-select: none;
      pointer-events: none;
    }

    .hero__totem-watermark {
      position: absolute;
      right: clamp(34px, 8vw, 132px);
      top: 15%;
      z-index: 3;
      width: clamp(120px, 13vw, 190px);
      height: auto;
      opacity: 0.16;
      transform: rotate(-5deg);
      filter: drop-shadow(0 18px 36px rgba(93, 60, 32, 0.16));
      pointer-events: none;
      user-select: none;
    }

    .hero__copy {
      position: relative;
      z-index: 8;
      display: flex;
      flex: 1 1 360px;
      flex-direction: column;
      gap: 18px;
      max-width: 660px;
      transform: translate3d(var(--copy-x), var(--copy-y), 0);
      transition: opacity 220ms ease, transform 220ms ease;
    }

    .hero__copy.is-changing {
      opacity: 0;
      transform: translate3d(var(--copy-x), calc(var(--copy-y) + 10px), 0);
    }

    .hero__eyebrow {
      display: inline-flex;
      width: max-content;
      max-width: 100%;
      margin: 0;
      padding: 7px 11px;
      border: 1px solid var(--line-cream);
      border-radius: 6px;
      color: var(--copy-strong);
      background: var(--surface);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 10px 24px rgba(86, 54, 27, 0.08);
      backdrop-filter: blur(6px);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.2;
    }

    .hero__h1 {
      max-width: 760px;
      margin: 0;
      font-family: "Noto Serif TC", "Source Han Serif TC", serif;
      font-size: 4.7rem;
      font-weight: 900;
      line-height: 1.02;
      color: var(--headline);
      text-shadow: 0 1px 0 rgba(255, 252, 244, 0.70), 0 12px 34px rgba(92, 58, 29, 0.12);
      text-wrap: balance;
    }

    .hero__h2 {
      max-width: 620px;
      margin: 0;
      color: var(--copy-strong);
      font-size: 1.34rem;
      font-weight: 900;
      line-height: 1.45;
      text-wrap: balance;
    }

    .hero__h3 {
      max-width: 610px;
      margin: 0;
      color: var(--copy-muted);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.82;
    }

    .hero__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .hero__tags li {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 6px 10px;
      border: 1px solid rgba(52, 36, 22, 0.16);
      border-radius: 6px;
      background: rgba(255, 249, 238, 0.54);
      color: rgba(35, 24, 15, 0.78);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.2;
    }

    .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      padding-top: 6px;
    }

    .hero__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 12px 18px;
      border: 1px solid rgba(52, 36, 22, 0.24);
      border-radius: 6px;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.1;
      transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
    }

    .hero__btn:hover,
    .hero__btn:focus-visible {
      transform: translateY(-2px);
    }

    .hero__btn--primary {
      color: #130f0a;
      background: var(--accent-2);
      border-color: rgba(94, 54, 24, 0.18);
      box-shadow: 0 18px 46px rgba(117, 70, 36, 0.22), 0 0 0 1px rgba(255, 252, 244, 0.24);
    }

    .hero__btn--primary:hover,
    .hero__btn--primary:focus-visible {
      color: #130f0a;
      background: #fff5e6;
      border-color: rgba(94, 54, 24, 0.28);
    }

    .hero__btn--secondary {
      color: #21170f;
      background: rgba(255, 249, 238, 0.54);
    }

    .hero__btn--secondary:hover,
    .hero__btn--secondary:focus-visible {
      background: rgba(255, 252, 246, 0.86);
    }

    .hero__proof {
      display: none;
      flex-wrap: wrap;
      gap: 10px;
      max-width: 590px;
      padding-top: 8px;
    }

    .proof-item {
      min-width: 0;
      padding-top: 10px;
      border-top: 1px solid rgba(23, 21, 18, 0.28);
    }

    .proof-item span {
      display: block;
      color: #171512;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.2;
    }

    .proof-item small {
      display: block;
      margin-top: 4px;
      color: rgba(23, 21, 18, 0.56);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }

    .hero__stage {
      position: relative;
      z-index: 7;
      flex: 1 1 560px;
      min-width: 0;
      min-height: 540px;
      transform-style: preserve-3d;
      user-select: none;
    }

    .hero__stage::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 61%;
      width: min(82%, 760px);
      height: 38%;
      border-radius: 50%;
      background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.60) 0%, rgba(226, 190, 139, 0.20) 35%, transparent 68%),
        radial-gradient(ellipse at center, var(--stage-shadow) 0%, rgba(93, 60, 32, 0.12) 46%, transparent 72%);
      filter: blur(16px);
      transform: translate(-50%, -50%) rotate(-3deg);
      transition: background 620ms ease;
      pointer-events: none;
    }

    .hero__stage::after {
      content: "純麵體 · 低卡 · 自由搭配";
      position: absolute;
      right: 7%;
      bottom: 11%;
      z-index: 2;
      color: rgba(82, 57, 35, 0.20);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: 2.2rem;
      font-weight: 700;
      line-height: 0.95;
      writing-mode: vertical-rl;
      pointer-events: none;
    }

    .hero__noodle {
      --offset-x: 0px;
      --offset-y: 0px;
      --scale: 1;
      --rotate: 0deg;
      --stage-x: var(--active-x);
      --stage-y: var(--active-y);
      --motion-x: 0px;
      --motion-y: 0px;
      --motion-rotate: 0deg;
      position: absolute;
      left: 50%;
      top: 53%;
      z-index: 10;
      width: min(53vw, 690px);
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      opacity: 1;
      transform:
        translate3d(calc(-50% + var(--offset-x) + var(--stage-x) + var(--motion-x)), calc(-50% + var(--offset-y) + var(--stage-y) + var(--motion-y)), 0)
        rotate(calc(var(--rotate) + var(--motion-rotate)))
        scale(var(--scale));
      transform-origin: 50% 78%;
      transition:
        transform 920ms cubic-bezier(0.16, 1.04, 0.28, 1),
        opacity 520ms ease,
        filter 520ms ease;
      -webkit-tap-highlight-color: transparent;
    }

    .hero__noodle img {
      display: block;
      width: 100%;
      height: auto;
      pointer-events: none;
      filter:
        drop-shadow(0 28px 46px rgba(79, 49, 25, 0.24))
        drop-shadow(0 10px 18px rgba(79, 49, 25, 0.12));
      transition: filter 420ms ease, transform 420ms ease;
    }

    .hero__noodle-label {
      position: absolute;
      left: 50%;
      top: 62%;
      z-index: 3;
      display: inline-flex;
      width: max-content;
      max-width: 160px;
      padding: 6px 9px;
      border: 1px solid rgba(52, 36, 22, 0.20);
      border-radius: 6px;
      color: rgba(35, 24, 15, 0.86);
      background: rgba(255, 249, 238, 0.78);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.1;
      opacity: 0;
      transform: translateX(-50%) translateY(12px);
      transition: opacity 180ms ease, transform 180ms ease;
      pointer-events: none;
    }

    .hero__noodle.is-active {
      --offset-x: 0px;
      --offset-y: 0px;
      --scale: 1;
      --rotate: 0deg;
      --stage-x: var(--active-x);
      --stage-y: var(--active-y);
      z-index: 30;
      opacity: 1;
      filter: saturate(1.04) contrast(1.03);
    }

    .hero__noodle.is-active img {
      filter:
        drop-shadow(0 46px 76px rgba(79, 49, 25, 0.30))
        drop-shadow(0 18px 28px rgba(79, 49, 25, 0.16));
    }

    .hero__noodle.is-active:hover img,
    .hero__noodle.is-active:focus-visible img {
      transform: translateY(-4px) scale(1.03) rotate(1deg);
      filter:
        drop-shadow(0 54px 86px rgba(79, 49, 25, 0.34))
        drop-shadow(0 20px 30px rgba(79, 49, 25, 0.20));
    }

    .hero__noodle.is-left {
      --offset-x: -35%;
      --offset-y: -6%;
      --scale: 0.62;
      --rotate: -12deg;
      --stage-x: var(--inactive-x);
      --stage-y: var(--inactive-y);
      z-index: 20;
      opacity: 0.72;
      filter: saturate(0.78) contrast(0.92) sepia(0.06);
    }

    .hero__noodle.is-right {
      --offset-x: 36%;
      --offset-y: -7%;
      --scale: 0.60;
      --rotate: 12deg;
      --stage-x: var(--inactive-x);
      --stage-y: var(--inactive-y);
      z-index: 18;
      opacity: 0.68;
      filter: saturate(0.78) contrast(0.92) sepia(0.06);
    }

    .hero__noodle.is-left:hover,
    .hero__noodle.is-left:focus-visible,
    .hero__noodle.is-right:hover,
    .hero__noodle.is-right:focus-visible {
      opacity: 0.94;
      filter: saturate(1) contrast(1);
    }

    .hero__noodle.is-left:hover,
    .hero__noodle.is-left:focus-visible {
      --scale: 0.66;
    }

    .hero__noodle.is-right:hover,
    .hero__noodle.is-right:focus-visible {
      --scale: 0.64;
    }

    .hero__noodle.is-left:hover .hero__noodle-label,
    .hero__noodle.is-left:focus-visible .hero__noodle-label,
    .hero__noodle.is-right:hover .hero__noodle-label,
    .hero__noodle.is-right:focus-visible .hero__noodle-label {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .hero.is-orbiting .hero__stage::before {
      transform: translate(-50%, -50%) rotate(5deg) scale(1.04);
      transition: transform 520ms cubic-bezier(0.16, 1.04, 0.28, 1), background 620ms ease;
    }

    .hero.is-orbiting[data-orbit="prev"] .hero__stage::before {
      transform: translate(-50%, -50%) rotate(-5deg) scale(1.04);
    }

    .hero.is-orbiting .hero__noodle img {
      transform: translateY(-2px);
    }

    .hero.is-orbiting[data-orbit="next"] .hero__noodle.is-active {
      --motion-x: 34px;
      --motion-y: -18px;
      --motion-rotate: 9deg;
    }

    .hero.is-orbiting[data-orbit="next"] .hero__noodle.is-left {
      --motion-x: -46px;
      --motion-y: 22px;
      --motion-rotate: -16deg;
    }

    .hero.is-orbiting[data-orbit="next"] .hero__noodle.is-right {
      --motion-x: 48px;
      --motion-y: 20px;
      --motion-rotate: 18deg;
    }

    .hero.is-orbiting[data-orbit="prev"] .hero__noodle.is-active {
      --motion-x: -34px;
      --motion-y: -18px;
      --motion-rotate: -9deg;
    }

    .hero.is-orbiting[data-orbit="prev"] .hero__noodle.is-left {
      --motion-x: -48px;
      --motion-y: 20px;
      --motion-rotate: -18deg;
    }

    .hero.is-orbiting[data-orbit="prev"] .hero__noodle.is-right {
      --motion-x: 46px;
      --motion-y: 22px;
      --motion-rotate: 16deg;
    }

    .hero__arrow {
      position: absolute;
      top: 55%;
      z-index: 45;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(52, 36, 22, 0.22);
      border-radius: 50%;
      color: #21170f;
      background: rgba(255, 249, 238, 0.70);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 12px 28px rgba(93, 60, 32, 0.14);
      cursor: pointer;
      transition: transform 180ms ease, background 180ms ease, color 180ms ease;
      -webkit-tap-highlight-color: transparent;
    }

    .hero__arrow:hover,
    .hero__arrow:focus-visible {
      color: #130f0a;
      background: var(--accent-2);
      transform: translateY(-2px);
    }

    .hero__arrow--prev {
      left: 5%;
    }

    .hero__arrow--next {
      right: 5%;
    }

    .hero__dots {
      position: absolute;
      left: 50%;
      bottom: 7%;
      z-index: 46;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      transform: translateX(-50%);
    }

    .hero__dot {
      width: 38px;
      height: 8px;
      padding: 0;
      border: 1px solid rgba(52, 36, 22, 0.28);
      border-radius: 6px;
      background: rgba(255, 252, 246, 0.72);
      cursor: pointer;
      transition: width 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    .hero__dot.is-active {
      width: 54px;
      background: var(--accent-2);
      border-color: rgba(94, 54, 24, 0.30);
    }

    .hero__hint {
      position: absolute;
      left: 50%;
      bottom: 16%;
      z-index: 44;
      display: inline-flex;
      padding: 7px 10px;
      border-radius: 6px;
      color: #130f0a;
      background: var(--accent-2);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      opacity: 0;
      transform: translateX(-50%) translateY(8px);
      transition: opacity 180ms ease, transform 180ms ease;
      pointer-events: none;
      white-space: nowrap;
    }

    .hero__noodle.is-active:hover ~ .hero__hint,
    .hero__noodle.is-active:focus-visible ~ .hero__hint {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .cutout-section {
      --cutout-title-progress: 0;
      --cutout-slice-progress: 0;
      --cutout-photo-progress: 0;
      --cutout-reveal-progress: 0;
      --cutout-copy-progress: 0;
      --cutout-imprint-progress: 0;
      --cutout-text-lens-progress: 0;
      --cutout-text-glass-progress: 0;
      --cutout-grid-y: 0px;
      --cutout-mask-pan-x: 0px;
      --cutout-mask-pan-y: 0px;
      --cutout-photo-pan-x: 0px;
      --cutout-photo-pan-y: 0px;
      --cutout-lead-drop: clamp(104px, 8vw, 168px);
      position: relative;
      min-height: 112svh;
      overflow: hidden;
      color: #21170f;
      background:
        linear-gradient(180deg, #f5ead8 0%, #f8f0e2 42%, #ead6b7 100%);
      isolation: isolate;
    }

    .cutout-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 76% 16%, rgba(201, 112, 64, 0.10), transparent 24%),
        linear-gradient(90deg, rgba(82, 53, 29, 0.032) 1px, transparent 1px),
        linear-gradient(180deg, rgba(82, 53, 29, 0.026) 1px, transparent 1px);
      background-size: auto, 72px 72px, 72px 72px;
      opacity: calc(0.58 + var(--cutout-title-progress) * 0.42);
      transform: translate3d(0, var(--cutout-grid-y), 0);
      will-change: transform, opacity;
      pointer-events: none;
    }

    .cutout-section::after {
      content: "";
      position: absolute;
      left: -8%;
      right: -8%;
      top: 48%;
      z-index: 2;
      height: clamp(92px, 15vw, 210px);
      background:
        linear-gradient(180deg, transparent 0%, rgba(255, 252, 244, 0.78) 42%, rgba(255, 252, 244, 0.34) 58%, transparent 100%);
      mix-blend-mode: screen;
      opacity: calc(var(--cutout-reveal-progress) * (1 - var(--cutout-imprint-progress)));
      transform:
        translate3d(0, calc((1 - var(--cutout-reveal-progress)) * 120px), 0)
        scaleY(calc(0.18 + var(--cutout-reveal-progress) * 1.08));
      transform-origin: center;
      pointer-events: none;
      will-change: transform, opacity;
    }

    .cutout__inner {
      width: min(100%, 1440px);
      margin: 0 auto;
      padding: 38px 36px 54px;
    }

    .cutout__meta {
      display: flex;
      justify-content: center;
      gap: clamp(18px, 4vw, 72px);
      margin: 0 0 clamp(54px, 9vw, 126px);
      color: rgba(33, 23, 15, 0.64);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      opacity: calc(0.24 + var(--cutout-title-progress) * 0.76);
      transform: translate3d(0, calc((1 - var(--cutout-title-progress)) * 18px), 0);
      text-transform: lowercase;
      will-change: transform, opacity;
    }

    .cutout__meta span {
      white-space: nowrap;
    }

    .cutout__mask-panel {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding-bottom: clamp(18px, 3vw, 34px);
      text-align: center;
      transform:
        translate3d(0, calc((1 - var(--cutout-title-progress)) * 22px - var(--cutout-imprint-progress) * 18px), 0)
        scale(calc(1 - var(--cutout-imprint-progress) * 0.035));
      transform-origin: center top;
      will-change: transform;
    }

    .cutout__spell {
      display: flex;
      justify-content: space-between;
      width: min(100%, 980px);
      margin: 0 auto -6px;
      color: rgba(33, 23, 15, 0.84);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: clamp(14px, 2vw, 24px);
      letter-spacing: calc((1 - var(--cutout-title-progress)) * 0.08em);
      line-height: 1;
      opacity: calc(0.2 + var(--cutout-title-progress) * 0.8);
      transform: translate3d(0, calc((1 - var(--cutout-title-progress)) * 16px), 0);
      will-change: transform, opacity, letter-spacing;
    }

    .cutout__title {
      display: flex;
      flex-direction: column;
      gap: clamp(2px, 0.6vw, 8px);
      margin: 0;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-weight: 900;
      line-height: 0.82;
      letter-spacing: 0;
      opacity: calc(0.12 + var(--cutout-title-progress) * 0.88 - var(--cutout-imprint-progress) * 0.42);
      filter: blur(calc((1 - var(--cutout-title-progress)) * 10px));
      text-align: center;
      text-transform: none;
      transform: translate3d(0, calc((1 - var(--cutout-title-progress)) * 26px), 0) scale(calc(0.92 + var(--cutout-title-progress) * 0.08));
      transform-origin: center top;
      perspective: 920px;
      will-change: transform, filter, opacity;
    }

    .cutout__word {
      display: block;
      color: transparent;
      background-image:
        linear-gradient(
          118deg,
          rgba(255, 252, 244, calc(var(--cutout-text-glass-progress) * 0.40)) 0%,
          rgba(255, 252, 244, calc(var(--cutout-text-glass-progress) * 0.08)) 15%,
          transparent 34%,
          rgba(42, 28, 16, calc(var(--cutout-text-glass-progress) * 0.18)) 74%,
          rgba(42, 28, 16, calc(var(--cutout-text-glass-progress) * 0.30)) 100%
        ),
        var(--konjac-cutout-image),
        radial-gradient(circle at 46% 42%, rgba(255, 252, 244, calc(var(--cutout-text-glass-progress) * 0.22)), transparent 48%),
        linear-gradient(135deg, #4a3928 0%, #b88a5b 46%, #d7c09b 100%);
      background-size:
        cover,
        calc(112% + var(--cutout-text-lens-progress) * 56%) auto,
        cover,
        cover;
      background-position:
        center,
        calc(var(--konjac-photo-x) + var(--cutout-mask-pan-x)) calc(var(--konjac-photo-y) + var(--cutout-mask-pan-y)),
        center,
        center;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 1px rgba(33, 23, 15, calc(0.08 + var(--cutout-text-glass-progress) * 0.18));
      filter:
        saturate(calc(0.98 + var(--cutout-text-lens-progress) * 0.34))
        contrast(calc(1.06 + var(--cutout-text-glass-progress) * 0.28))
        brightness(calc(0.96 + var(--cutout-text-glass-progress) * 0.10))
        drop-shadow(0 12px 22px rgba(49, 32, 18, calc(var(--cutout-text-glass-progress) * 0.18)));
      will-change: transform, background-position, filter;
    }

    .cutout__word--han {
      font-size: clamp(112px, 21vw, 286px);
      transform:
        translate3d(
          0,
          calc((1 - var(--cutout-title-progress)) * 10px - var(--cutout-slice-progress) * 6px + var(--cutout-imprint-progress) * 10px),
          0
        )
        scale(calc(1 + var(--cutout-text-lens-progress) * 0.035));
    }

    .cutout__word--latin {
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: clamp(76px, 14vw, 190px);
      font-weight: 700;
      line-height: 0.84;
      transform:
        translate3d(
          0,
          calc((1 - var(--cutout-title-progress)) * 18px - var(--cutout-slice-progress) * 8px + var(--cutout-imprint-progress) * 15px),
          0
        )
        scale(calc(1 + var(--cutout-text-lens-progress) * 0.045));
    }

    .cutout__word--kana {
      font-size: clamp(54px, 9.2vw, 132px);
      line-height: 0.95;
      white-space: nowrap;
      transform:
        translate3d(
          0,
          calc((1 - var(--cutout-title-progress)) * 16px + var(--cutout-slice-progress) * 24px + var(--cutout-imprint-progress) * 20px),
          0
        )
        scale(calc(1 + var(--cutout-text-lens-progress) * 0.030));
    }

    .cutout__lead {
      position: relative;
      z-index: 4;
      width: min(100%, 980px);
      margin: clamp(-14px, -1vw, -4px) auto 0;
      color: rgba(255, 252, 244, 0.94);
      font-family: "Noto Serif TC", serif;
      font-size: clamp(16px, 2vw, 28px);
      font-weight: 700;
      line-height: 1.35;
      text-shadow: 0 2px 16px rgba(24, 15, 8, 0.36);
      opacity: calc(0.10 + var(--cutout-copy-progress) * 0.78 + var(--cutout-imprint-progress) * 0.12);
      transform: translate3d(0, calc((1 - var(--cutout-copy-progress)) * 42px - var(--cutout-imprint-progress) * 10px + var(--cutout-lead-drop)), 0);
      will-change: transform, opacity;
    }

    .cutout__photo-wrap {
      position: relative;
      z-index: 1;
      width: min(100%, 980px);
      min-height: clamp(420px, 58vw, 760px);
      margin: clamp(-80px, -6vw, -44px) auto 0;
      overflow: hidden;
      border-radius: 0;
      background:
        linear-gradient(180deg, rgba(245, 234, 216, 0.12) 0%, rgba(245, 234, 216, 0) 25%),
        var(--konjac-cutout-image),
        linear-gradient(135deg, #56402b 0%, #bb8b5c 45%, #e4c9a4 100%);
      background-size: cover, cover, cover;
      background-position:
        center,
        calc(var(--konjac-photo-x) + var(--cutout-photo-pan-x)) calc(var(--konjac-photo-y) + var(--cutout-photo-pan-y)),
        center;
      box-shadow: 0 32px 80px rgba(79, 49, 25, 0.22);
      clip-path: inset(calc((1 - var(--cutout-reveal-progress)) * 45%) 0 calc((1 - var(--cutout-reveal-progress)) * 45%) 0);
      opacity: calc(0.08 + var(--cutout-reveal-progress) * 0.92);
      transform: translate3d(0, calc((1 - var(--cutout-photo-progress)) * 136px - var(--cutout-imprint-progress) * 18px), 0) scale(calc(0.92 + var(--cutout-photo-progress) * 0.08));
      transform-origin: center top;
      filter:
        saturate(calc(0.76 + var(--cutout-reveal-progress) * 0.26))
        contrast(calc(0.88 + var(--cutout-reveal-progress) * 0.22));
      will-change: transform, opacity, filter, background-position, clip-path;
    }

    .cutout__photo-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(245, 234, 216, 0.64) 0%, rgba(245, 234, 216, 0.02) 23%, rgba(12, 9, 7, 0.10) 100%),
        radial-gradient(circle at 52% 18%, rgba(255, 255, 255, 0.22), transparent 24%);
      opacity: calc(0.98 - var(--cutout-reveal-progress) * 0.38);
      pointer-events: none;
    }

    .cutout__photo-wrap::after {
      content: "";
      position: absolute;
      left: -4%;
      right: -4%;
      top: calc(50% - clamp(42px, 7vw, 92px));
      z-index: 1;
      height: clamp(84px, 14vw, 184px);
      background:
        linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.42) 48%, rgba(245, 234, 216, 0.12) 58%, transparent 100%);
      opacity: calc(var(--cutout-reveal-progress) * (1 - var(--cutout-imprint-progress)));
      transform:
        translate3d(0, calc((0.5 - var(--cutout-reveal-progress)) * 160px), 0)
        scaleY(calc(0.32 + var(--cutout-reveal-progress) * 0.76));
      pointer-events: none;
      will-change: transform, opacity;
    }

    .cutout__caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 18px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: rgba(255, 252, 244, 0.92);
      font-size: 12px;
      font-weight: 700;
      text-shadow: 0 2px 10px rgba(8, 5, 3, 0.40);
      opacity: calc(0.08 + var(--cutout-imprint-progress) * 0.92);
      transform: translate3d(0, calc((1 - var(--cutout-imprint-progress)) * 28px), 0);
      will-change: transform, opacity;
    }

    .cutout__barcode {
      width: 128px;
      height: 32px;
      opacity: 0.92;
      background:
        repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px, currentColor 5px 6px, transparent 6px 10px);
    }

    .social-proof {
      position: relative;
      overflow: hidden;
      scroll-margin-top: 120px;
      padding: clamp(72px, 9vw, 124px) clamp(18px, 4vw, 56px);
      color: #21170f;
      background:
        linear-gradient(90deg, rgba(33, 23, 15, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, #f5ead8 0%, #fff9ee 54%, #e7d0ac 100%);
      background-size: 88px 88px, auto;
    }

    .social-proof__inner {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(32px, 5.4vw, 78px);
      align-items: center;
      width: min(1240px, 100%);
      margin: 0 auto;
    }

    .social-proof__copy {
      min-width: 0;
      flex: 1 1 320px;
    }

    .social-proof__copy h2 {
      --social-headline-size: clamp(2.82rem, 3.8vw, 4.7rem);
      margin: 0;
      color: #21170f;
      font-family: "Noto Serif TC", "Songti TC", serif;
      font-size: var(--social-headline-size);
      font-weight: 900;
      line-height: 1.04;
      letter-spacing: 0;
    }

    .social-proof__copy h2 span {
      display: block;
    }

    .social-proof__copy h2 span:nth-child(2) {
      color: #c66a3c;
    }

    .social-proof__copy p:not(.section-kicker) {
      max-width: 33rem;
      margin: 22px 0 0;
      color: rgba(33, 23, 15, 0.68);
      font-size: clamp(1rem, 1.2vw, 1.12rem);
      font-weight: 700;
      line-height: 1.9;
    }

    .social-proof__cta,
    .social-proof__empty {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      margin-top: 28px;
      padding: 0 18px;
      border: 1px solid rgba(33, 23, 15, 0.18);
      border-radius: 8px;
      background: #21170f;
      color: #fff9ee;
      font-weight: 900;
      line-height: 1.2;
      box-shadow: 0 18px 44px rgba(83, 54, 30, 0.16);
      transition: transform 180ms ease, background 180ms ease, color 180ms ease;
    }

    .social-proof__cta:hover,
    .social-proof__cta:focus-visible,
    .social-proof__empty:hover,
    .social-proof__empty:focus-visible {
      transform: translateY(-2px);
      background: #bdd457;
      color: #21170f;
    }

    .social-proof__grid {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(12px, 1.7vw, 22px);
      min-width: 0;
      flex: 1 1 560px;
    }

    .social-proof__card {
      display: flex;
      flex-direction: column;
      flex: 1 1 280px;
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(33, 23, 15, 0.16);
      border-radius: 8px;
      background: rgba(255, 249, 238, 0.78);
      box-shadow: 0 24px 66px rgba(83, 54, 30, 0.14);
      color: inherit;
      text-decoration: none;
      transform: translateY(calc(var(--social-index, 0) * 14px));
      transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    }

    .social-proof__card:hover,
    .social-proof__card:focus-visible {
      border-color: rgba(198, 106, 60, 0.44);
      box-shadow: 0 30px 78px rgba(83, 54, 30, 0.20);
      transform: translateY(calc(var(--social-index, 0) * 14px - 4px));
    }

    .social-proof__media {
      display: block;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background: #2b2017;
    }

    .social-proof__media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.96) contrast(1.04);
      transition: transform 280ms ease;
    }

    .social-proof__card:hover .social-proof__media img,
    .social-proof__card:focus-visible .social-proof__media img {
      transform: scale(1.035);
    }

    .social-proof__body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: clamp(16px, 2vw, 22px);
    }

    .social-proof__meta {
      color: #a45e38;
      font-size: 0.7rem;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .social-proof__body strong {
      color: #21170f;
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: clamp(1.1rem, 1.4vw, 1.34rem);
      line-height: 1.1;
    }

    .social-proof__body span:last-child {
      color: rgba(33, 23, 15, 0.68);
      font-size: 0.94rem;
      font-weight: 700;
      line-height: 1.72;
    }

    @media (max-width: 980px) {
      .social-proof__inner {
        flex-direction: column;
        align-items: stretch;
      }

      .social-proof__copy {
        max-width: 44rem;
      }

      .social-proof__grid {
        width: 100%;
      }

      .social-proof__card {
        transform: none;
      }

      .social-proof__card:hover,
      .social-proof__card:focus-visible {
        transform: translateY(-4px);
      }
    }

    @media (max-width: 767px) {
      .social-proof {
        padding-top: 64px;
        padding-bottom: 76px;
      }

      .social-proof__copy h2 {
        --social-headline-size: 2.54rem;
        line-height: 1.08;
      }

      .social-proof__grid {
        flex-direction: column;
      }

      .social-proof__card {
        flex-direction: column;
        align-items: stretch;
      }

      .social-proof__media {
        aspect-ratio: 16 / 11;
      }

      .social-proof__body {
        min-height: 178px;
        padding: 16px;
      }

      .social-proof__body span:last-child {
        font-size: 0.9rem;
        line-height: 1.62;
      }
    }

    @media (max-width: 430px) {
      .social-proof__copy h2 {
        --social-headline-size: 2.2rem;
      }

      .social-proof__card {
        flex-direction: column;
      }

      .social-proof__media {
        aspect-ratio: 16 / 11;
      }

      .social-proof__body {
        min-height: auto;
      }
    }

    .product-anchor {
      position: relative;
      min-height: 120px;
      padding: 44px 36px;
      background: #ead7bc;
    }

    .product-anchor__inner {
      width: min(100%, 1120px);
      margin: 0 auto;
      color: rgba(29, 19, 10, 0.76);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.7;
    }

    .builder-section {
      position: relative;
      overflow: hidden;
      padding: clamp(60px, 7vw, 96px) 36px;
      color: #21170f;
      background:
        radial-gradient(circle at 92% 18%, rgba(198, 216, 95, 0.22), transparent 24%),
        radial-gradient(circle at 8% 88%, rgba(201, 112, 64, 0.13), transparent 28%),
        linear-gradient(180deg, #f8f0e2 0%, #f3e4cc 52%, #ead1ad 100%);
      isolation: isolate;
    }

    .builder-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(82, 53, 29, 0.036) 1px, transparent 1px),
        linear-gradient(180deg, rgba(82, 53, 29, 0.028) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 88%, transparent 100%);
      pointer-events: none;
    }

    .builder-section::after {
      content: "7 大卡 / 100g";
      position: absolute;
      right: clamp(18px, 5vw, 78px);
      top: 36px;
      z-index: -1;
      color: rgba(117, 78, 46, 0.11);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: clamp(4.2rem, 11vw, 11rem);
      font-weight: 700;
      line-height: 0.88;
      pointer-events: none;
      user-select: none;
    }

    .builder__inner {
      width: min(100%, 1360px);
      margin: 0 auto;
    }

    .builder__top {
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      gap: 34px;
    }

    .builder__intro {
      flex: 1 1 560px;
      min-width: 0;
      max-width: 780px;
    }

    .builder__eyebrow {
      display: inline-flex;
      margin: 0 0 14px;
      padding: 7px 11px;
      border: 1px solid rgba(52, 36, 22, 0.18);
      border-radius: 6px;
      color: rgba(35, 24, 15, 0.76);
      background: rgba(255, 249, 238, 0.62);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.1;
    }

    .builder__intro h1,
    .builder__intro h2 {
      max-width: 760px;
      margin: 0;
      font-family: "Noto Serif TC", serif;
      font-size: clamp(2.35rem, 5vw, 4.9rem);
      font-weight: 900;
      line-height: 1.02;
      text-wrap: balance;
    }

    .builder__intro p:last-child {
      max-width: 680px;
      margin: 14px 0 0;
      color: rgba(70, 49, 31, 0.78);
      font-size: 1.04rem;
      font-weight: 600;
      line-height: 1.85;
    }

    .builder__deal {
      display: flex;
      flex: 1 1 320px;
      flex-direction: column;
      gap: 10px;
      padding: 18px;
      border: 1px solid rgba(52, 36, 22, 0.18);
      border-radius: 8px;
      background: rgba(255, 249, 238, 0.58);
      box-shadow: 0 18px 50px rgba(93, 60, 32, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.42);
    }

    .builder__deal-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      color: rgba(35, 24, 15, 0.72);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.35;
    }

    .builder__deal s {
      color: rgba(35, 24, 15, 0.48);
      font-size: 1.2rem;
      text-decoration-color: #c82830;
      text-decoration-thickness: 3px;
    }

    .builder__deal strong {
      color: #171512;
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: 2.4rem;
      line-height: 0.98;
    }

    .builder__deal small {
      color: rgba(70, 49, 31, 0.68);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.55;
    }

    .builder__layout {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(24px, 4vw, 54px);
      margin-top: clamp(34px, 5vw, 64px);
      align-items: start;
    }

    .builder__chooser {
      display: flex;
      flex: 1 1 660px;
      flex-direction: column;
      gap: 15px;
      min-width: 0;
    }

    .builder-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(52, 36, 22, 0.16);
    }

    .builder-group__head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
    }

    .builder-group__head h2,
    .builder-group__head h3 {
      margin: 0;
      color: #21170f;
      font-size: 1.08rem;
      font-weight: 900;
      line-height: 1.25;
    }

    .builder-group__head span {
      color: rgba(70, 49, 31, 0.62);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }

    .builder-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .builder-options--compact {
      gap: 10px;
    }

    .builder-options:not([data-builder-options="noodle"]) {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .builder-option {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 86px;
      width: auto;
      flex: 1 1 240px;
      padding: 10px;
      border: 1px solid rgba(52, 36, 22, 0.18);
      border-radius: 6px;
      color: #21170f;
      background: rgba(255, 249, 238, 0.54);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
      text-align: left;
      cursor: pointer;
      transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
    }

    .builder-option:hover,
    .builder-option:focus-visible {
      transform: translateY(-2px);
      background: rgba(255, 252, 246, 0.88);
    }

    .builder-option.is-selected {
      color: #fff8ef;
      background: #21170f;
      border-color: rgba(33, 23, 15, 0.86);
      box-shadow: 0 18px 36px rgba(58, 36, 19, 0.18);
    }

    .builder-option--chip {
      display: inline-flex;
      width: auto;
      min-height: 38px;
      gap: 8px;
      padding: 8px 11px;
      white-space: nowrap;
    }

    .builder-option--chip .builder-option__body {
      display: inline-flex;
      align-items: baseline;
      gap: 7px;
    }

    .builder-option--chip .builder-option__title {
      font-size: 13px;
    }

    .builder-option--chip .builder-option__meta {
      font-size: 11px;
      line-height: 1;
    }

    .builder-option__thumb {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 58px;
      height: 54px;
      overflow: hidden;
      border-radius: 6px;
      background: rgba(255, 252, 246, 0.72);
    }

    .builder-option__thumb img {
      display: block;
      width: 80px;
      height: auto;
      transform: rotate(-7deg);
      filter: drop-shadow(0 7px 10px rgba(48, 28, 12, 0.18));
    }

    .builder-option__swatch {
      width: 28px;
      height: 28px;
      border: 1px solid rgba(33, 23, 15, 0.18);
      border-radius: 50%;
      background: var(--swatch, #c97046);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
    }

    .builder-option__body {
      min-width: 0;
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      gap: 3px;
    }

    .builder-option__title {
      font-size: 14px;
      font-weight: 900;
      line-height: 1.25;
    }

    .builder-option__meta {
      color: currentColor;
      opacity: 0.68;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.45;
    }

    .builder-result {
      position: sticky;
      top: 20px;
      display: flex;
      flex: 1 1 390px;
      flex-direction: column;
      gap: 13px;
      padding: 18px;
      border: 1px solid rgba(52, 36, 22, 0.18);
      border-radius: 8px;
      background: rgba(255, 249, 238, 0.64);
      box-shadow: 0 32px 82px rgba(93, 60, 32, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.42);
      backdrop-filter: blur(10px);
    }

    .builder-result__top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      color: rgba(35, 24, 15, 0.72);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.2;
    }

    .builder-result__top strong {
      color: #c82830;
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: 2.1rem;
      line-height: 0.92;
    }

    .builder-preview {
      --builder-noodle: #171512;
      --builder-accent: #c97046;
      --builder-soup: #d4b37a;
      --protein-color: #da8d64;
      --veg-color: #6f8f55;
      --garnish-color: #d1bd64;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 314px;
      overflow: hidden;
      border: 1px solid rgba(52, 36, 22, 0.14);
      border-radius: 6px;
      background:
        radial-gradient(circle at 78% 24%, rgba(255, 252, 246, 0.58), transparent 22%),
        radial-gradient(circle at 24% 86%, rgba(198, 216, 95, 0.16), transparent 24%),
        linear-gradient(135deg, rgba(43, 28, 17, 0.08) 0%, rgba(255, 249, 238, 0.62) 58%, rgba(201, 112, 64, 0.13) 100%);
    }

    .builder-dish-image {
      display: block;
      width: min(96%, 520px);
      height: auto;
      max-height: 292px;
      object-fit: contain;
      filter: drop-shadow(0 24px 34px rgba(60, 36, 18, 0.20));
      transition: opacity 160ms ease, transform 260ms ease;
    }

    .builder-result h2,
    .builder-result h3 {
      margin: 0;
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1.58rem, 2.6vw, 2.08rem);
      font-weight: 900;
      line-height: 1.15;
      text-wrap: balance;
    }

    .builder-result__copy {
      margin: 0;
      color: rgba(70, 49, 31, 0.78);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.75;
    }

    .builder-calorie {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .builder-calorie__old,
    .builder-calorie__new {
      min-width: 0;
      flex: 1 1 180px;
      padding: 11px;
      border-radius: 6px;
      line-height: 1.25;
    }

    .builder-calorie__old {
      border: 1px dashed rgba(52, 36, 22, 0.24);
      color: rgba(70, 49, 31, 0.62);
      background: rgba(255, 252, 246, 0.42);
    }

    .builder-calorie__old span,
    .builder-calorie__new span {
      display: block;
      font-size: 12px;
      font-weight: 900;
    }

    .builder-calorie__old s {
      display: block;
      margin-top: 5px;
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: 1.58rem;
      font-weight: 700;
      text-decoration-color: #c82830;
      text-decoration-thickness: 3px;
    }

    .builder-calorie__new {
      position: relative;
      color: #fff8ef;
      background: #c82830;
      box-shadow: 0 14px 28px rgba(155, 42, 38, 0.18);
    }

    .builder-calorie__new strong {
      display: block;
      margin-top: 4px;
      color: #fff8ef;
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: 2.18rem;
      line-height: 0.98;
    }

    .builder-saving {
      display: inline-flex;
      align-items: center;
      width: max-content;
      max-width: 100%;
      padding: 7px 10px;
      border-radius: 6px;
      color: #171512;
      background: var(--color-accent-lime);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.2;
    }

    .builder-summary {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: rgba(35, 24, 15, 0.76);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.5;
    }

    .builder-summary li {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 7px;
      border-bottom: 1px solid rgba(52, 36, 22, 0.10);
    }

    .builder-summary strong {
      color: #21170f;
      text-align: right;
    }

    .builder-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }

    .builder-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 13px;
      border: 1px solid rgba(52, 36, 22, 0.20);
      border-radius: 6px;
      color: #21170f;
      background: rgba(255, 249, 238, 0.58);
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      transition: transform 180ms ease, background 180ms ease;
    }

    .builder-action:hover,
    .builder-action:focus-visible {
      transform: translateY(-2px);
      background: rgba(255, 252, 246, 0.88);
    }

    .builder-action--primary {
      color: #130f0a;
      background: #c97046;
      border-color: rgba(94, 54, 24, 0.20);
    }

    .builder__layout--recipes .builder__chooser {
      flex: 1 1 520px;
    }

    .builder-options--recipes {
      flex-direction: column;
      flex-wrap: nowrap;
    }

    .builder-option--recipe {
      align-items: stretch;
      min-height: 118px;
      flex: 1 1 auto;
      padding: 9px;
    }

    .builder-option__thumb--recipe {
      flex: 0 0 110px;
      width: 110px;
      height: auto;
      min-height: 98px;
      border-radius: 7px;
      background: rgba(255, 252, 246, 0.9);
    }

    .builder-option__thumb--recipe img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: none;
      filter: none;
    }

    .builder-option__tag {
      display: inline-flex;
      width: max-content;
      max-width: 100%;
      padding: 4px 7px;
      border-radius: 999px;
      color: #9d3e32;
      background: rgba(255, 252, 246, 0.78);
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
    }

    .builder-option.is-selected .builder-option__tag {
      color: #21170f;
      background: #fff8ef;
    }

    .builder-result--recipe {
      flex-basis: 500px;
    }

    .builder-preview--recipe {
      min-height: 0;
      aspect-ratio: 1 / 1;
      padding: 0;
      background:
        radial-gradient(circle at 80% 18%, rgba(255, 252, 246, 0.72), transparent 22%),
        linear-gradient(135deg, rgba(43, 28, 17, 0.08), rgba(255, 249, 238, 0.72));
    }

    .builder-preview--recipe .builder-dish-image {
      width: 100%;
      height: 100%;
      max-height: none;
      object-fit: cover;
      filter: none;
    }

    .builder-result__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .builder-result__meta span {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 5px 9px;
      border: 1px solid rgba(52, 36, 22, 0.14);
      border-radius: 999px;
      color: rgba(70, 49, 31, 0.78);
      background: rgba(255, 252, 246, 0.58);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.1;
    }

    .builder-recipe-flavor {
      margin: -5px 0 0;
      color: #9d3e32;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.55;
    }

    .builder-recipe-note {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 13px;
      border: 1px solid rgba(52, 36, 22, 0.14);
      border-radius: 7px;
      background: rgba(255, 252, 246, 0.5);
    }

    .builder-recipe-note span {
      color: #a85b39;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.08em;
      line-height: 1;
      text-transform: uppercase;
    }

    .builder-recipe-note p {
      margin: 0;
      color: rgba(70, 49, 31, 0.78);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.72;
    }

    .builder-recipe-steps {
      border: 1px solid rgba(52, 36, 22, 0.14);
      border-radius: 7px;
      background: rgba(255, 252, 246, 0.42);
      overflow: hidden;
    }

    .builder-recipe-steps summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 42px;
      padding: 10px 13px;
      color: #21170f;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }

    .builder-recipe-steps summary::after {
      content: "+";
      color: #9d3e32;
      font-size: 18px;
      line-height: 1;
    }

    .builder-recipe-steps[open] summary::after {
      content: "-";
    }

    .builder-recipe-steps ol {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 0;
      padding: 0 16px 14px 34px;
      color: rgba(70, 49, 31, 0.82);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.7;
    }

    .builder-summary--recipe strong {
      max-width: 60%;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    :focus-visible {
      outline: 3px solid rgba(198, 216, 95, 0.88);
      outline-offset: 4px;
    }

    @keyframes heroCopyIn {
      from {
        opacity: 0;
        transform: translateY(16px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes heroNoodleIn {
      from {
        opacity: 0;
        transform:
          translate3d(calc(-50% + var(--offset-x)), calc(-43% + var(--offset-y)), 0)
          rotate(var(--rotate))
          scale(calc(var(--scale) * 0.94));
      }
      to {
        opacity: 1;
      }
    }

    .hero__copy > * {
      animation: heroCopyIn 620ms ease both;
    }

    .hero__copy > *:nth-child(1) {
      animation-delay: 260ms;
    }

    .hero__copy > *:nth-child(2) {
      animation-delay: 420ms;
    }

    .hero__copy > *:nth-child(3),
    .hero__copy > *:nth-child(4) {
      animation-delay: 560ms;
    }

    .hero__copy > *:nth-child(5),
    .hero__copy > *:nth-child(6),
    .hero__copy > *:nth-child(7) {
      animation-delay: 720ms;
    }

    .hero__noodle {
      animation: heroNoodleIn 860ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .hero__noodle[data-noodle="black"] {
      animation-delay: 260ms;
    }

    .hero__noodle[data-noodle="clear"] {
      animation-delay: 480ms;
    }

    .hero__noodle[data-noodle="ivory"] {
      animation-delay: 560ms;
    }

    @media (min-width: 1440px) {
      .hero__h1 {
        font-size: 5.8rem;
      }

      .hero__bg-type {
        font-size: 12rem;
      }

      .hero__stage {
        min-height: 610px;
      }
    }

    @media (max-width: 1180px) {
      .hero {
        padding: 24px 26px 28px;
      }

      .hero__h1 {
        font-size: 4rem;
      }

      .hero__stage {
        min-height: 515px;
      }
    }

    @media (max-width: 940px) {
      .hero {
        min-height: auto;
      }

      .hero__copy {
        order: 2;
        max-width: 720px;
        margin: -26px auto 0;
        text-align: center;
        justify-items: center;
      }

      .hero__h1 {
        font-size: 3.9rem;
      }

      .hero__h2,
      .hero__h3 {
        max-width: 640px;
      }

      .hero__proof {
        width: min(100%, 620px);
      }

      .hero__stage {
        order: 1;
        min-height: 470px;
      }

      .hero__stage::after {
        right: 2%;
        bottom: 17%;
        font-size: 1.7rem;
      }

      .builder__top,
      .builder__layout {
        flex-direction: column;
      }

      .builder__intro,
      .builder__deal {
        flex: none;
        max-width: none;
      }

      .builder__deal {
        justify-self: start;
        width: min(100%, 460px);
      }

      .builder-result {
        position: relative;
        top: auto;
        width: min(100%, 720px);
        margin: 0 auto;
      }

      .hero__noodle {
        width: min(84vw, 650px);
        top: 52%;
      }

      .hero__noodle.is-left {
        --offset-x: -31%;
        --offset-y: -3%;
      }

      .hero__noodle.is-right {
        --offset-x: 31%;
        --offset-y: -4%;
      }
    }

    @media (max-width: 767px) {
      .hero {
        min-height: calc(100svh - 36px);
        padding: 18px 18px 22px;
      }

      .hero__header {
        gap: 12px;
      }

      .brand-lockup {
        width: 142px;
        min-height: 42px;
        padding: 5px 10px;
      }

      .brand-wordmark {
        max-height: 34px;
      }

      .hero__nav {
        gap: 10px;
        font-size: 12px;
      }

      .hero__nav a:nth-child(2) {
        display: none;
      }

      .hero__content {
        padding: 10px 0 0;
      }

      .hero__bg-type {
        top: 11%;
        width: 120%;
        font-size: 4.9rem;
        opacity: 0.58;
      }

      .hero__totem-watermark {
        right: 18px;
        top: 15%;
        width: 86px;
        opacity: 0.20;
      }

      .hero__stage {
        min-height: 38svh;
        max-height: 390px;
      }

      .hero__stage::before {
        top: 64%;
        width: 104%;
        height: 34%;
        filter: blur(12px);
      }

      .hero__stage::after {
        display: none;
      }

      .hero__noodle {
        width: min(116vw, 560px);
        top: 51%;
      }

      .hero__noodle.is-active {
        --offset-x: 0px;
        --offset-y: -3%;
        --scale: 0.92;
      }

      .hero__noodle.is-left {
        --offset-x: -40%;
        --offset-y: -5%;
        --scale: 0.48;
        opacity: 0.46;
      }

      .hero__noodle.is-right {
        --offset-x: 40%;
        --offset-y: -6%;
        --scale: 0.47;
        opacity: 0.44;
      }

      .hero__arrow {
        top: 51%;
        width: 42px;
        height: 42px;
        background: rgba(255, 249, 238, 0.76);
      }

      .hero__arrow--prev {
        left: 0;
      }

      .hero__arrow--next {
        right: 0;
      }

      .hero__dots {
        bottom: 4%;
      }

      .hero__dot {
        width: 28px;
      }

      .hero__dot.is-active {
        width: 44px;
      }

      .hero__hint {
        display: none;
      }

      .hero__copy {
        gap: 12px;
        margin-top: -12px;
      }

      .hero__eyebrow {
        font-size: 12px;
      }

      .hero__h1 {
        font-size: 2.65rem;
        line-height: 1.08;
      }

      .hero__h2 {
        font-size: 1.08rem;
        line-height: 1.45;
      }

      .hero__h3 {
        font-size: 0.92rem;
        line-height: 1.75;
      }

      .hero__tags {
        justify-content: center;
        gap: 7px;
      }

      .hero__tags li {
        min-height: 29px;
        padding: 5px 8px;
        font-size: 12px;
      }

      .hero__actions {
        justify-content: center;
        width: 100%;
        gap: 8px;
      }

      .hero__btn {
        flex: 1 1 142px;
        min-height: 44px;
        padding: 11px 12px;
        font-size: 14px;
      }

      .hero__proof {
        gap: 8px;
        width: 100%;
      }

      .proof-item {
        padding-top: 8px;
      }

      .proof-item span {
        font-size: 13px;
      }

      .proof-item small {
        display: none;
      }

      .cutout__inner {
        padding: 24px 14px 36px;
      }

      .cutout__meta {
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 58px;
        font-size: 11px;
      }

      .cutout__meta span:nth-child(2) {
        display: none;
      }

      .cutout__spell {
        width: 92%;
        font-size: 13px;
      }

      .cutout__mask-panel {
        padding-bottom: 0;
      }

      .cutout__title {
        position: relative;
        left: auto;
        align-self: center;
        width: min(116vw, 460px);
        max-width: none;
        gap: 4px;
        margin-right: 0;
        margin-left: 0;
        transform:
          translate3d(0, calc((1 - var(--cutout-title-progress)) * 26px), 0)
          scale(calc(0.92 + var(--cutout-title-progress) * 0.08));
      }

      .cutout__title .cutout__word {
        width: 100%;
        text-align: center;
      }

      .cutout__word--han {
        font-size: clamp(150px, 46vw, 188px);
      }

      .cutout__word--latin {
        font-size: clamp(100px, 31vw, 128px);
      }

      .cutout__word--kana {
        font-size: clamp(62px, 20vw, 86px);
      }

      .cutout__lead {
        width: min(94%, 360px);
        margin: 8px auto -128px;
        font-size: 18px;
        line-height: 1.35;
        transform: translate3d(0, 88px, 0);
      }

      .cutout__photo-wrap {
        width: calc(100% + 28px);
        min-height: 560px;
        margin-top: 0;
        margin-left: -14px;
        margin-right: -14px;
      }

      .cutout__caption {
        bottom: 14px;
      }

      .builder-section {
        padding: 56px 18px 72px;
      }

      .builder-section::after {
        top: 22px;
        right: 12px;
        font-size: 4.2rem;
      }

      .builder__top {
        align-items: stretch;
        gap: 22px;
      }

      .builder__intro,
      .builder__deal {
        flex: none;
        max-width: none;
      }

      .builder__intro h1,
      .builder__intro h2 {
        font-size: 2.72rem;
      }

      .builder__intro p:last-child {
        font-size: 0.95rem;
        line-height: 1.72;
      }

      .builder__deal {
        width: 100%;
        padding: 15px;
      }

      .builder__deal-row,
      .builder-result__top {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
      }

      .builder__deal strong {
        font-size: 1.84rem;
      }

      .builder__deal s {
        font-size: 1.12rem;
      }

      .builder__layout {
        margin-top: 34px;
      }

      .builder__layout--recipes {
        flex-direction: column;
        gap: 22px;
      }

      .builder__layout--recipes .builder__chooser,
      .builder__layout--recipes .builder-result--recipe {
        width: 100%;
        flex: none;
      }

      .builder__layout--recipes .builder-result--recipe {
        order: -1;
        position: relative;
        top: auto;
      }

      .builder-options,
      .builder-options--compact {
        flex-direction: column;
      }

      .builder-options--recipes {
        flex-direction: row;
        flex-wrap: nowrap;
        margin-inline: -18px;
        padding: 0 18px 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }

      .builder-group__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }

      .builder-group__head span {
        white-space: normal;
      }

      .builder-option {
        min-height: 78px;
      }

      .builder-option--chip {
        min-height: 38px;
        padding: 8px 10px;
      }

      .builder-option--recipe {
        flex: 0 0 min(82vw, 330px);
        min-height: 108px;
        scroll-snap-align: start;
      }

      .builder-option__thumb--recipe {
        flex-basis: 96px;
        width: 96px;
        min-height: 88px;
      }

      .builder-result {
        padding: 16px;
      }

      .builder-result--recipe h2 {
        font-size: 1.82rem;
        line-height: 1.16;
      }

      .builder-preview {
        min-height: 286px;
      }

      .builder-preview--recipe {
        min-height: 0;
      }

      .builder-dish-image {
        max-height: 270px;
      }

      .builder-calorie {
        flex-direction: column;
      }

      .builder-result__top strong,
      .builder-calorie__new strong {
        font-size: 1.72rem;
      }

      .builder-summary li {
        align-items: baseline;
      }
    }

    @media (max-width: 390px) {
      .hero {
        padding-inline: 14px;
      }

      .hero__h1 {
        font-size: 2.36rem;
      }

      .hero__stage {
        min-height: 35svh;
      }

      .hero__btn {
        flex-basis: 100%;
      }

      .hero__proof {
        gap: 6px;
      }

      .proof-item {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
      }

      .hero {
        --bg-x: 0px !important;
        --bg-y: 0px !important;
        --copy-x: 0px !important;
        --copy-y: 0px !important;
        --active-x: 0px !important;
        --active-y: 0px !important;
        --inactive-x: 0px !important;
        --inactive-y: 0px !important;
      }

      .hero__noodle {
        --motion-x: 0px !important;
        --motion-y: 0px !important;
        --motion-rotate: 0deg !important;
      }
    }

    .tasteae-page-header {
      position: relative;
      z-index: 100;
      width: min(100%, 1440px);
      margin: 0 auto;
      padding: 18px 36px 0;
      color: #21170f;
    }

    .tasteae-page-header__bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 62px;
      padding: 8px 10px 8px 8px;
      border: 1px solid rgba(58, 39, 23, 0.12);
      border-radius: 8px;
      background: rgba(255, 249, 238, 0.68);
      box-shadow: 0 18px 48px rgba(93, 60, 32, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.62);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .tasteae-page-header .brand-lockup {
      flex: 0 0 auto;
      width: clamp(150px, 13vw, 198px);
      min-height: 46px;
      background: rgba(255, 253, 247, 0.82);
      box-shadow: none;
    }

    .tasteae-page-nav {
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      justify-content: center;
      gap: clamp(12px, 2vw, 26px);
      min-width: 0;
      color: rgba(35, 24, 15, 0.72);
      font-size: 0.86rem;
      font-weight: 900;
    }

    .tasteae-page-nav__list {
      display: flex;
      flex: 1 1 auto;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: clamp(12px, 2vw, 26px);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .tasteae-page-nav__list .menu-item {
      display: inline-flex;
      align-items: center;
    }

    .tasteae-page-nav .sub-menu {
      display: none;
    }

    .tasteae-page-nav a,
    .tasteae-header-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      border-radius: 999px;
      color: rgba(35, 24, 15, 0.72);
      text-decoration: none;
      transition: color 180ms ease, background 180ms ease, transform 180ms ease;
      white-space: nowrap;
    }

    .tasteae-page-nav a {
      padding: 0 4px;
    }

    .tasteae-page-nav a:hover,
    .tasteae-page-nav a:focus-visible,
    .tasteae-header-action:hover,
    .tasteae-header-action:focus-visible {
      color: #21170f;
      outline: none;
      transform: translateY(-1px);
    }

    .tasteae-header-actions {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 8px;
    }

    .tasteae-header-action {
      padding: 0 13px;
      background: rgba(255, 253, 247, 0.62);
      font-size: 0.82rem;
      font-weight: 900;
    }

    .tasteae-header-action--cart {
      gap: 8px;
      color: #fff8ed;
      background: #2a1710;
    }

    .tasteae-header-action--cart:hover,
    .tasteae-header-action--cart:focus-visible {
      color: #fff8ed;
      background: #7a2e22;
    }

    .tasteae-header-action__count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-radius: 999px;
      color: #2a1710;
      background: #fff8ed;
      font-size: 0.72rem;
      line-height: 1;
    }

    .tasteae-menu-toggle {
      display: none;
      width: 46px;
      height: 46px;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 7px;
      border: 1px solid rgba(58, 39, 23, 0.14);
      border-radius: 50%;
      color: #21170f;
      background: rgba(255, 253, 247, 0.84);
      cursor: pointer;
    }

    .tasteae-menu-toggle span {
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform 180ms ease, opacity 180ms ease;
    }

    .tasteae-page-header.is-menu-open .tasteae-menu-toggle span:first-child {
      transform: translateY(4.5px) rotate(45deg);
    }

    .tasteae-page-header.is-menu-open .tasteae-menu-toggle span:last-child {
      transform: translateY(-4.5px) rotate(-45deg);
    }

    .tasteae-menu-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 36px;
      width: min(420px, calc(100vw - 32px));
      padding: 16px;
      border: 1px solid rgba(58, 39, 23, 0.14);
      border-radius: 8px;
      background: rgba(255, 249, 238, 0.96);
      box-shadow: 0 30px 90px rgba(58, 39, 23, 0.22);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .tasteae-menu-panel__top,
    .tasteae-menu-panel__utility,
    .tasteae-menu-panel__support,
    .tasteae-menu-panel__support-list,
    .tasteae-menu-search,
    .tasteae-menu-panel__primary,
    .tasteae-menu-panel__primary-list,
    .tasteae-menu-panel__primary a {
      display: flex;
    }

    .tasteae-menu-panel__top {
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .tasteae-menu-panel__top p {
      margin: 0;
      color: #21170f;
      font-family: "Noto Serif TC", serif;
      font-size: 1.28rem;
      font-weight: 900;
      line-height: 1.12;
    }

    .tasteae-menu-panel__top button,
    .tasteae-menu-search button {
      display: inline-flex;
      min-height: 38px;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 999px;
      color: #fff8ed;
      background: #2a1710;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
    }

    .tasteae-menu-panel__top button {
      padding: 0 13px;
      font-size: 0.82rem;
    }

    .tasteae-menu-search {
      gap: 8px;
      padding: 8px;
      border: 1px solid rgba(58, 39, 23, 0.13);
      border-radius: 999px;
      background: rgba(255, 253, 247, 0.78);
    }

    .tasteae-menu-search input[type="search"] {
      min-width: 0;
      flex: 1 1 auto;
      border: 0;
      outline: 0;
      background: transparent;
      color: #21170f;
      font: inherit;
      font-weight: 800;
    }

    .tasteae-menu-search button {
      padding: 0 16px;
      font-size: 0.86rem;
    }

    .tasteae-menu-panel__primary {
      flex-direction: column;
      gap: 8px;
      margin-top: 14px;
    }

    .tasteae-menu-panel__primary-list {
      flex-direction: column;
      gap: 8px;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .tasteae-menu-panel__primary-list .menu-item {
      display: flex;
    }

    .tasteae-menu-panel__primary a {
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      min-height: 62px;
      padding: 12px 14px;
      border: 1px solid rgba(58, 39, 23, 0.11);
      border-radius: 8px;
      color: #21170f;
      background: rgba(255, 253, 247, 0.66);
      text-decoration: none;
    }

    .tasteae-menu-panel__primary strong {
      font-family: "Noto Serif TC", serif;
      font-size: 1.22rem;
      font-weight: 900;
      line-height: 1;
    }

    .tasteae-menu-panel__primary span {
      color: rgba(33, 23, 15, 0.58);
      font-size: 0.82rem;
      font-weight: 900;
      text-align: right;
    }

    .tasteae-menu-panel__utility,
    .tasteae-menu-panel__support {
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .tasteae-menu-panel__support-list {
      flex-wrap: wrap;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .tasteae-menu-panel__support-list .menu-item {
      display: inline-flex;
    }

    .tasteae-menu-panel__utility a,
    .tasteae-menu-panel__support a {
      display: inline-flex;
      min-height: 36px;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      border-radius: 999px;
      color: rgba(33, 23, 15, 0.72);
      background: rgba(255, 253, 247, 0.66);
      font-size: 0.82rem;
      font-weight: 900;
      text-decoration: none;
    }

    .tasteae-menu-panel__utility a:first-child {
      color: #fff8ed;
      background: #7a2e22;
    }

    .tasteae-builder-page .builder-section {
      padding-top: clamp(48px, 6vw, 82px);
    }

    .tasteae-simple-page {
      min-height: 70svh;
      padding: 72px 36px;
      background: #f5ead8;
    }

    .tasteae-content {
      width: min(100%, 960px);
      margin: 0 auto;
      color: #21170f;
      font-size: 16px;
      line-height: 1.8;
    }

    .product-anchor__builder-link {
      display: inline-flex;
      margin-top: 8px;
      padding: 8px 11px;
      border: 1px solid rgba(52, 36, 22, 0.18);
      border-radius: 6px;
      background: rgba(255, 249, 238, 0.58);
      color: #21170f;
      font-weight: 900;
      line-height: 1.2;
    }

    .tasteae-footer {
      position: relative;
      overflow: hidden;
      padding: clamp(42px, 6vw, 84px) 36px 34px;
      color: rgba(33, 23, 15, 0.72);
      background:
        linear-gradient(90deg, rgba(82, 53, 29, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(82, 53, 29, 0.03) 1px, transparent 1px),
        linear-gradient(180deg, #ead7ba 0%, #ddbf91 100%);
      background-size: 72px 72px, 72px 72px, auto;
    }

    .tasteae-footer::before {
      content: "TASTE AT EASE";
      position: absolute;
      right: -0.04em;
      bottom: -0.32em;
      color: rgba(81, 45, 26, 0.07);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: clamp(5rem, 16vw, 18rem);
      font-weight: 700;
      line-height: 0.8;
      pointer-events: none;
      white-space: nowrap;
    }

    .tasteae-footer__inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: clamp(24px, 4vw, 42px);
      width: min(100%, 1180px);
      margin: 0 auto;
    }

    .tasteae-footer__lead,
    .tasteae-footer__columns,
    .tasteae-footer__proofs,
    .tasteae-footer__bottom {
      display: flex;
    }

    .tasteae-footer__lead {
      align-items: flex-start;
      justify-content: space-between;
      gap: clamp(20px, 5vw, 72px);
    }

    .tasteae-footer__logo {
      display: flex;
      flex: 0 0 clamp(176px, 18vw, 260px);
      align-items: center;
      justify-content: center;
      min-height: 74px;
      padding: 12px 18px;
      border: 1px solid rgba(58, 39, 23, 0.14);
      border-radius: 8px;
      background: rgba(255, 249, 238, 0.56);
      box-shadow: 0 18px 48px rgba(93, 60, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.54);
    }

    .tasteae-footer__logo img {
      display: block;
      width: 100%;
      max-height: 48px;
      object-fit: contain;
    }

    .tasteae-footer__copy {
      flex: 1 1 auto;
      max-width: 520px;
    }

    .tasteae-footer__copy .section-kicker {
      margin-bottom: 12px;
    }

    .tasteae-footer__copy strong {
      display: block;
      color: #21170f;
      font-family: "Noto Serif TC", serif;
      font-size: clamp(2rem, 4vw, 4.2rem);
      font-weight: 900;
      line-height: 0.98;
      letter-spacing: 0;
    }

    .tasteae-footer__copy span {
      display: block;
      max-width: 440px;
      margin-top: 16px;
      color: rgba(33, 23, 15, 0.68);
      font-size: 0.98rem;
      font-weight: 800;
      line-height: 1.8;
    }

    .tasteae-footer__cta {
      display: flex;
      flex: 0 0 auto;
      flex-direction: column;
      gap: 10px;
      min-width: 150px;
    }

    .tasteae-footer__cta a,
    .tasteae-footer__proofs span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      font-weight: 900;
      text-decoration: none;
      white-space: nowrap;
    }

    .tasteae-footer__cta a {
      min-height: 44px;
      padding: 0 18px;
      color: #fff8ed;
      background: #2a1710;
      transition: transform 180ms ease, background 180ms ease;
    }

    .tasteae-footer__cta a + a {
      color: #2a1710;
      background: rgba(255, 249, 238, 0.66);
    }

    .tasteae-footer__cta a:hover,
    .tasteae-footer__cta a:focus-visible {
      outline: none;
      transform: translateY(-2px);
      background: #7a2e22;
    }

    .tasteae-footer__proofs {
      flex-wrap: wrap;
      gap: 10px;
      padding-top: 4px;
    }

    .tasteae-footer__proofs span {
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid rgba(58, 39, 23, 0.12);
      color: #2a1710;
      background: rgba(255, 249, 238, 0.58);
      font-size: 0.85rem;
    }

    .tasteae-footer__columns {
      flex-wrap: wrap;
      gap: clamp(18px, 4vw, 56px);
      align-items: flex-start;
      justify-content: space-between;
      padding-top: clamp(16px, 3vw, 30px);
      border-top: 1px solid rgba(58, 39, 23, 0.14);
    }

    .tasteae-footer__column {
      flex: 1 1 170px;
      min-width: 150px;
    }

    .tasteae-footer__column > strong {
      display: block;
      margin-bottom: 12px;
      color: #21170f;
      font-size: 0.82rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .tasteae-footer__column ul {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .tasteae-footer__column a {
      color: rgba(33, 23, 15, 0.68);
      font-size: 0.94rem;
      font-weight: 800;
      text-decoration: none;
      transition: color 180ms ease;
    }

    .tasteae-footer__column a:hover,
    .tasteae-footer__column a:focus-visible {
      color: #21170f;
      outline: none;
    }

    .tasteae-footer__bottom {
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 10px 20px;
      padding-top: 18px;
      border-top: 1px solid rgba(58, 39, 23, 0.12);
      color: rgba(33, 23, 15, 0.58);
      font-size: 0.82rem;
      font-weight: 800;
    }

    .tasteae-footer__bottom p {
      margin: 0;
    }

    .tasteae-floating-shop {
      position: fixed;
      right: auto;
      bottom: max(18px, env(safe-area-inset-bottom));
      left: 50%;
      z-index: 90;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 52px;
      padding: 9px 18px 9px 12px;
      border: 1px solid rgba(166, 95, 91, 0.34);
      border-radius: 999px;
      background: rgba(255, 253, 250, 0.88);
      box-shadow: 0 18px 54px rgba(91, 51, 39, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.72);
      color: #7a3f35;
      font-weight: 900;
      line-height: 1;
      transform: translate3d(-50%, 0, 0);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
    }

    .tasteae-floating-shop:hover {
      border-color: rgba(166, 95, 91, 0.78);
      background: #a65f5b;
      box-shadow: 0 22px 62px rgba(91, 51, 39, 0.26);
      color: #fffdfa;
      transform: translate3d(-50%, -3px, 0);
    }

    .tasteae-floating-shop:focus-visible {
      outline: 3px solid rgba(166, 95, 91, 0.34);
      outline-offset: 4px;
    }

    .tasteae-floating-shop__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #a65f5b;
      color: #fffdfa;
      transition: background-color 180ms ease, color 180ms ease;
    }

    .tasteae-floating-shop:hover .tasteae-floating-shop__icon {
      background: #fffdfa;
      color: #a65f5b;
    }

    .tasteae-floating-shop__icon svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.9;
    }

    .tasteae-floating-shop__text {
      display: flex;
      flex-direction: column;
      gap: 3px;
      white-space: nowrap;
    }

    .tasteae-floating-shop__text strong {
      font-size: 0.95rem;
      letter-spacing: 0;
    }

    .tasteae-floating-shop__text small {
      color: currentColor;
      font-size: 0.62rem;
      font-weight: 900;
      letter-spacing: 0.16em;
      opacity: 0.62;
      text-transform: uppercase;
    }

    @media (max-width: 920px) {
      body.is-site-menu-open {
        overflow: hidden;
      }

      .tasteae-page-header {
        padding: 12px 14px 0;
      }

      .tasteae-page-header__bar {
        gap: 10px;
        min-height: 58px;
        padding: 7px;
      }

      .tasteae-page-nav,
      .tasteae-header-actions {
        display: none;
      }

      .tasteae-menu-toggle {
        display: inline-flex;
      }

      .tasteae-menu-panel {
        position: fixed;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 76px);
        right: 14px;
        left: 14px;
        width: auto;
        max-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 92px);
        overflow-y: auto;
      }
    }

    @media (max-width: 767px) {
      .tasteae-page-header {
        padding: 10px 10px 0;
      }

      .tasteae-page-header .brand-lockup {
        width: 154px;
        min-height: 44px;
        padding: 6px 10px;
      }

      .tasteae-menu-panel {
        right: 10px;
        left: 10px;
        padding: 14px;
      }

      .tasteae-menu-panel__top p {
        font-size: 1.12rem;
      }

      .tasteae-menu-panel__primary a {
        min-height: 58px;
        padding: 11px 12px;
      }

      .tasteae-menu-search {
        border-radius: 8px;
      }

      .tasteae-menu-panel__primary strong {
        font-size: 1.1rem;
      }

      .tasteae-footer {
        padding: 38px 18px 92px;
      }

      .tasteae-footer__lead {
        flex-direction: column;
        gap: 20px;
      }

      .tasteae-footer__logo {
        flex-basis: auto;
        width: min(100%, 260px);
      }

      .tasteae-footer__copy strong {
        font-size: clamp(2.1rem, 13vw, 3.5rem);
      }

      .tasteae-footer__cta {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
      }

      .tasteae-footer__cta a {
        flex: 1 1 140px;
      }

      .tasteae-footer__columns {
        gap: 24px 20px;
      }

      .tasteae-footer__column {
        flex-basis: calc(50% - 10px);
        min-width: 130px;
      }

      .tasteae-footer__bottom {
        flex-direction: column;
      }

      .tasteae-floating-shop {
        bottom: max(14px, env(safe-area-inset-bottom));
        min-height: 50px;
        padding: 8px 16px 8px 10px;
      }

      .tasteae-floating-shop__icon {
        width: 32px;
        height: 32px;
      }
    }

    .motion-hero {
      --motion-bg-a: #fff9ee;
      --motion-bg-b: #e5d1ad;
      --motion-accent: #c66a3c;
      --motion-accent-2: #111111;
      --motion-ink: #21170f;
      --motion-muted: rgba(33, 23, 15, 0.68);
      --motion-surface: rgba(255, 249, 238, 0.56);
      --motion-line: rgba(33, 23, 15, 0.14);
      --motion-shadow: rgba(53, 32, 18, 0.18);
      position: relative;
      min-height: 410svh;
      color: var(--motion-ink);
      background:
        radial-gradient(circle at 76% 20%, color-mix(in srgb, var(--motion-accent-2) 18%, transparent), transparent 26rem),
        radial-gradient(circle at 12% 72%, color-mix(in srgb, var(--motion-accent) 18%, transparent), transparent 26rem),
        linear-gradient(135deg, var(--motion-bg-a), var(--motion-bg-b));
      transition: background 520ms ease;
    }

    .motion-hero__pin {
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100svh;
      overflow: hidden;
      isolation: isolate;
      padding: clamp(88px, 10vh, 126px) clamp(18px, 4vw, 62px) clamp(34px, 5vw, 64px);
    }

    .admin-bar .motion-hero__pin {
      top: var(--wp-admin--admin-bar--height, 32px);
      min-height: calc(100svh - var(--wp-admin--admin-bar--height, 32px));
    }

    .motion-hero__pin::before {
      position: absolute;
      inset: 0;
      z-index: -6;
      content: "";
      background:
        linear-gradient(90deg, rgba(255, 249, 238, 0.82), rgba(255, 249, 238, 0.2) 44%, rgba(91, 64, 40, 0.05)),
        repeating-linear-gradient(90deg, rgba(33, 22, 15, 0.034) 0 1px, transparent 1px 112px);
    }

    .motion-hero__pin::after {
      position: absolute;
      inset: auto -10vw -20vh -10vw;
      z-index: -5;
      height: 42vh;
      content: "";
      background: radial-gradient(ellipse at center, rgba(68, 43, 25, 0.18), transparent 62%);
      filter: blur(18px);
    }

    .motion-hero__header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 20px clamp(18px, 4vw, 56px);
      color: rgba(33, 22, 15, 0.82);
    }

    .motion-hero__brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .motion-hero__brand img {
      display: block;
      width: 122px;
      height: auto;
      object-fit: contain;
    }

    .motion-hero__brand span {
      font-size: 0.72rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .motion-hero__nav {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .motion-hero__nav a {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 13px;
      border: 1px solid rgba(33, 22, 15, 0.14);
      border-radius: 999px;
      background: rgba(255, 249, 238, 0.44);
      backdrop-filter: blur(14px);
    }

    .motion-hero__giant-type {
      position: absolute;
      top: 7vh;
      left: 4vw;
      z-index: -4;
      width: 96vw;
      color: rgba(33, 22, 15, 0.055);
      font-family: "Playfair Display", Georgia, serif;
      font-size: clamp(5rem, 17vw, 17.5rem);
      font-style: italic;
      line-height: 0.78;
      white-space: nowrap;
      transform: translate3d(calc(var(--motion-type-x, 0) * 1px), calc(var(--motion-type-y, 0) * 1px), 0);
      pointer-events: none;
      user-select: none;
    }

    .motion-hero__liquid {
      position: absolute;
      inset: 0;
      z-index: -3;
      pointer-events: none;
      opacity: 0.88;
    }

    .motion-hero__liquid svg {
      position: absolute;
      right: -16vw;
      bottom: -14vh;
      width: min(70vw, 980px);
      height: auto;
      overflow: visible;
      filter: drop-shadow(0 26px 48px rgba(62, 38, 20, 0.12));
    }

    .motion-hero__liquid-path {
      fill: color-mix(in srgb, var(--motion-accent-2) 22%, rgba(255, 249, 238, 0.24));
      stroke: color-mix(in srgb, var(--motion-accent) 74%, #21170f 10%);
      stroke-width: 7;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: fill 520ms ease, stroke 520ms ease;
    }

    .motion-hero__liquid-path--ghost {
      fill: none;
      stroke: rgba(33, 22, 15, 0.11);
      stroke-width: 2;
      transform: translate(28px, -24px);
    }

    .motion-hero__grid {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: clamp(22px, 4vw, 76px);
      width: min(1440px, 100%);
      margin: 0 auto;
    }

    .motion-hero__copy {
      position: relative;
      flex: 1 1 320px;
      max-width: 640px;
      padding-top: 24px;
    }

    .motion-hero__kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 28px;
      padding: 8px 12px;
      border: 1px solid rgba(33, 22, 15, 0.15);
      border-radius: 999px;
      background: rgba(255, 249, 238, 0.56);
      color: rgba(33, 22, 15, 0.72);
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      backdrop-filter: blur(12px);
    }

    .motion-hero__kicker::before {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      content: "";
      background: var(--motion-accent);
      box-shadow: 0 0 0 7px color-mix(in srgb, var(--motion-accent) 18%, transparent);
    }

    .motion-hero__eyebrow {
      margin: 0 0 18px;
      color: color-mix(in srgb, var(--motion-accent) 78%, #21170f 20%);
      font-size: clamp(0.78rem, 1vw, 0.88rem);
      font-weight: 900;
      letter-spacing: 0.18em;
    }

    .motion-hero__title {
      margin: 0;
      color: var(--motion-ink);
      font-family: "Noto Serif TC", "Songti TC", serif;
      font-size: clamp(4rem, 7.6vw, 8.4rem);
      font-weight: 900;
      line-height: 0.94;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .motion-hero__title span {
      display: block;
      color: var(--motion-accent);
    }

    .motion-hero__summary {
      max-width: 35rem;
      margin: 24px 0 0;
      color: rgba(33, 22, 15, 0.74);
      font-size: clamp(1rem, 1.28vw, 1.16rem);
      font-weight: 500;
      line-height: 1.9;
    }

    .motion-hero__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 26px 0 0;
      padding: 0;
      list-style: none;
    }

    .motion-hero__tags li {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(33, 22, 15, 0.12);
      border-radius: 999px;
      background: rgba(255, 249, 238, 0.48);
      color: rgba(33, 22, 15, 0.78);
      font-size: 0.84rem;
      font-weight: 800;
    }

    .motion-hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .motion-hero__button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 18px;
      border: 1px solid rgba(33, 22, 15, 0.18);
      border-radius: 999px;
      background: rgba(255, 249, 238, 0.6);
      color: var(--motion-ink);
      font-size: 0.92rem;
      font-weight: 900;
      box-shadow: 0 16px 34px rgba(83, 54, 30, 0.08);
      transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    .motion-hero__button:hover,
    .motion-hero__button:focus-visible {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--motion-accent) 55%, transparent);
      background: rgba(255, 249, 238, 0.78);
    }

    .motion-hero__button--primary {
      background: var(--motion-ink);
      color: #fff9ee;
    }

    .motion-hero__button--primary:hover,
    .motion-hero__button--primary:focus-visible {
      background: color-mix(in srgb, var(--motion-accent) 76%, #21170f 24%);
    }

    .motion-hero__spec {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      max-width: 580px;
      margin-top: 30px;
    }

    .motion-hero__spec-card {
      flex: 1 1 180px;
      min-height: 86px;
      padding: 14px 14px 12px;
      border: 1px solid rgba(33, 22, 15, 0.12);
      background: rgba(255, 249, 238, 0.5);
      box-shadow: 0 18px 38px rgba(91, 64, 40, 0.08);
      backdrop-filter: blur(18px);
    }

    .motion-hero__spec-card b {
      display: block;
      color: rgba(33, 22, 15, 0.54);
      font-size: 0.7rem;
      font-weight: 900;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .motion-hero__spec-card strong {
      display: block;
      margin-top: 8px;
      color: var(--motion-accent);
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1.18rem, 2vw, 1.72rem);
      line-height: 1.05;
    }

    .motion-hero__stage {
      position: relative;
      flex: 1 1 420px;
      min-height: min(78vh, 780px);
      perspective: 1200px;
    }

    .motion-hero__stage::before {
      position: absolute;
      left: 50%;
      bottom: 5%;
      width: min(68vw, 700px);
      height: min(15vw, 150px);
      border-radius: 50%;
      content: "";
      background: radial-gradient(ellipse at center, var(--motion-shadow), transparent 70%);
      transform: translateX(-50%);
      filter: blur(10px);
      opacity: 0.9;
    }

    .motion-hero__orbit {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
    }

    .motion-hero__noodle {
      position: absolute;
      left: 50%;
      top: 52%;
      width: min(43vw, 620px);
      max-width: 86%;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      transform-style: preserve-3d;
      translate: -50% -50%;
      transition: filter 360ms ease;
      will-change: transform, opacity, filter;
    }

    .motion-hero__noodle img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 34px 34px rgba(35, 22, 12, 0.22));
      transform: translate3d(0, 0, 0);
      transition: filter 440ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }

    .motion-hero__stage.is-magnetic .motion-hero__noodle[aria-current="true"] img {
      transform:
        translate3d(
          calc(var(--magnet-x, 0) * 1px),
          calc(var(--magnet-y, 0) * 1px),
          0
        )
        rotate(calc(var(--magnet-x, 0) * 0.03deg));
    }

    .motion-hero__noodle:hover img,
    .motion-hero__noodle:focus-visible img {
      filter: drop-shadow(0 42px 42px rgba(35, 22, 12, 0.28)) saturate(1.06);
    }

    .motion-hero__noodle:focus-visible {
      outline: 2px solid var(--motion-accent);
      outline-offset: 8px;
    }

    .motion-hero__noodle-lines {
      position: absolute;
      inset: 0;
      z-index: 12;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
    }

    .motion-hero__line {
      fill: none;
      stroke: var(--motion-line-color, var(--motion-accent));
      stroke-width: var(--line-width, 5);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: var(--line-length, 260);
      stroke-dashoffset: var(--line-length, 260);
      opacity: 0;
      filter: drop-shadow(0 10px 12px rgba(53, 32, 18, 0.10));
      transform-box: fill-box;
      transform-origin: center;
      vector-effect: non-scaling-stroke;
    }

    .motion-hero__stage.is-lines-running .motion-hero__line {
      animation: motionNoodleLine 860ms cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-delay: var(--line-delay, 0ms);
    }

    @keyframes motionNoodleLine {
      0% {
        opacity: 0;
        stroke-dashoffset: var(--line-length, 260);
        transform: translate3d(var(--line-dx-start, 0px), var(--line-dy-start, 0px), 0) scaleX(0.78) rotate(var(--line-rotate-start, 0deg));
      }

      36% {
        opacity: 0.78;
        stroke-dashoffset: 0;
        transform: translate3d(var(--line-dx, 0px), var(--line-dy, 0px), 0) scaleX(1.08) rotate(var(--line-rotate, 0deg));
      }

      68% {
        opacity: 0.62;
        stroke-dashoffset: var(--line-tail, -32);
        transform: translate3d(var(--line-dx-recoil, 0px), var(--line-dy-recoil, 0px), 0) scaleX(0.96) rotate(var(--line-rotate-recoil, 0deg));
      }

      100% {
        opacity: 0;
        stroke-dashoffset: var(--line-end, -260);
        transform: translate3d(0, 0, 0) scaleX(0.9) rotate(0deg);
      }
    }

    .motion-hero__dial {
      position: absolute;
      right: min(3vw, 34px);
      bottom: clamp(28px, 7vh, 70px);
      z-index: 20;
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: min(320px, 44vw);
    }

    .motion-hero__dial-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 6px 8px 6px 10px;
      border: 1px solid rgba(33, 22, 15, 0.1);
      background: rgba(255, 249, 238, 0.5);
      color: rgba(33, 22, 15, 0.66);
      font: inherit;
      font-size: 0.74rem;
      font-weight: 800;
      text-align: left;
      backdrop-filter: blur(18px);
      cursor: pointer;
    }

    .motion-hero__dial-row i {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(33, 22, 15, 0.26);
    }

    .motion-hero__dial-row span {
      flex: 1 1 auto;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .motion-hero__dial-row b {
      color: rgba(33, 22, 15, 0.38);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
    }

    .motion-hero__dial-row.is-active {
      border-color: color-mix(in srgb, var(--motion-accent) 44%, transparent);
      background: color-mix(in srgb, var(--motion-accent-2) 20%, rgba(255, 249, 238, 0.58));
      color: rgba(33, 22, 15, 0.86);
    }

    .motion-hero__dial-row.is-active i {
      background: var(--motion-accent);
      box-shadow: 0 0 0 8px color-mix(in srgb, var(--motion-accent) 16%, transparent);
    }

    .motion-hero__mobile-controls {
      display: none;
    }

    .motion-hero__mobile-dot {
      min-width: 0;
      min-height: 42px;
      border: 1px solid rgba(33, 22, 15, 0.12);
      border-radius: 999px;
      background: rgba(255, 249, 238, 0.54);
      color: rgba(33, 22, 15, 0.68);
      font: inherit;
      font-size: 0.72rem;
      font-weight: 900;
      cursor: pointer;
    }

    .motion-hero__mobile-dot span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .motion-hero__mobile-dot.is-active {
      border-color: color-mix(in srgb, var(--motion-accent) 58%, transparent);
      background: color-mix(in srgb, var(--motion-accent-2) 20%, rgba(255, 249, 238, 0.74));
      color: rgba(33, 22, 15, 0.92);
    }

    .motion-hero__mobile-dot:focus-visible {
      outline: 2px solid var(--motion-accent);
      outline-offset: 3px;
    }

    .motion-hero__meter {
      position: absolute;
      left: clamp(16px, 3vw, 36px);
      bottom: clamp(16px, 3vw, 34px);
      z-index: 28;
      width: 146px;
      height: 2px;
      background: rgba(33, 22, 15, 0.16);
      transform-origin: left center;
    }

    .motion-hero__meter span {
      display: block;
      width: calc(var(--motion-scroll, 0) * 100%);
      height: 100%;
      background: var(--motion-accent);
      transition: background 300ms ease;
    }

    .tasteae-magnetic-cursor {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 9999;
      width: 54px;
      height: 54px;
      border: 1px solid rgba(33, 22, 15, 0.42);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      transform: translate3d(-50%, -50%, 0) scale(0.72);
      transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
      will-change: transform, opacity;
    }

    .tasteae-magnetic-cursor::after {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      content: "";
      background: var(--motion-accent, #c66a3c);
      transform: translate(-50%, -50%);
    }

    .tasteae-magnetic-cursor.is-visible {
      opacity: 1;
      transform: translate3d(-50%, -50%, 0) scale(1);
    }

    .tasteae-magnetic-cursor.is-strong {
      border-color: var(--motion-accent, #c66a3c);
      transform: translate3d(-50%, -50%, 0) scale(1.18);
    }

    .motion-hero__copy.is-changing .motion-hero__eyebrow,
    .motion-hero__copy.is-changing .motion-hero__title,
    .motion-hero__copy.is-changing .motion-hero__summary,
    .motion-hero__copy.is-changing .motion-hero__tags,
    .motion-hero__copy.is-changing .motion-hero__actions,
    .motion-hero__copy.is-changing .motion-hero__spec {
      animation: motionHeroCopyIn 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes motionHeroCopyIn {
      from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    @media (max-width: 980px) {
      .motion-hero__grid {
        flex-direction: column;
        align-content: center;
        gap: 16px;
      }

      .motion-hero__copy {
        max-width: none;
        padding-top: 0;
      }

      .motion-hero__title {
        font-size: clamp(3.2rem, 17vw, 5.8rem);
      }

      .motion-hero__stage {
        min-height: 44vh;
        order: -1;
      }

      .motion-hero__noodle {
        width: min(74vw, 480px);
      }

      .motion-hero__dial {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 14px;
      }

      .motion-hero__dial-row {
        flex: 1 1 0;
        min-height: 38px;
      }

      .motion-hero__dial-row b {
        display: none;
      }

      .motion-hero__spec {
        flex-direction: column;
      }

      .motion-hero__liquid svg {
        right: -34vw;
        bottom: -10vh;
        width: 118vw;
      }
    }

    @media (max-width: 640px) {
      .motion-hero__brand img {
        width: 98px;
      }

      .motion-hero__brand span,
      .motion-hero__nav,
      .motion-hero__kicker,
      .motion-hero__meter {
        display: none;
      }

      .motion-hero__pin {
        padding-top: 76px;
      }

      .motion-hero__spec {
        flex-direction: row;
      }

      .motion-hero__spec-card {
        min-height: 74px;
        padding: 11px 10px;
      }

      .motion-hero__spec-card strong {
        font-size: 1.08rem;
      }

      .motion-hero__spec-card b {
        font-size: 0.62rem;
      }

      .motion-hero__dial {
        display: none;
      }

      .motion-hero__mobile-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 14px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .motion-hero *,
      .motion-hero *::before,
      .motion-hero *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
      }

      .motion-hero__noodle-lines {
        display: none;
      }
    }

    .section-kicker {
      margin: 0 0 14px;
      color: #a45e38;
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .brand-anthem {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100svh;
      padding: clamp(72px, 9vw, 132px) clamp(18px, 4vw, 56px);
      background:
        radial-gradient(circle at 88% 18%, rgba(192, 83, 52, 0.10), transparent 24rem),
        linear-gradient(180deg, #fff9ee 0%, #f4e7d0 100%);
      color: #21170f;
    }

    .brand-anthem::before {
      position: absolute;
      inset: 0;
      pointer-events: none;
      content: "";
      background:
        repeating-linear-gradient(90deg, rgba(33, 23, 15, 0.035) 0 1px, transparent 1px 118px),
        linear-gradient(180deg, transparent 0%, rgba(168, 108, 58, 0.08) 100%);
    }

    .brand-anthem__inner {
      position: relative;
      width: min(1180px, 100%);
      margin: 0 auto;
    }

    .brand-anthem__eyebrow {
      margin: 0 0 22px;
      color: rgba(33, 23, 15, 0.52);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
    }

    .brand-anthem__headline {
      --headline-size: clamp(5.6rem, 8.2vw, 9.2rem);
      margin: 0;
      color: #21170f;
      font-family: "Noto Serif TC", "Songti TC", serif;
      font-size: var(--headline-size);
      font-weight: 900;
      line-height: 0.94;
      letter-spacing: 0;
      max-width: 100%;
    }

    .brand-anthem__line {
      display: flex;
      flex-wrap: nowrap;
      align-items: baseline;
      gap: clamp(2px, 0.55vw, 10px);
      overflow: visible;
      white-space: nowrap;
      font-size: 0;
    }

    .brand-anthem__line > span {
      display: inline-block;
      flex: 0 0 auto;
      font-size: var(--headline-size);
      opacity: var(--char-opacity, 0.16);
      filter: blur(var(--char-blur, 8px));
      transform:
        translate3d(0, var(--char-y, 0.36em), 0)
        scaleY(var(--char-scale-y, 1.08));
      transform-origin: top center;
      will-change: transform, filter, opacity;
    }

    .brand-anthem__line--accent {
      margin-top: -0.04em;
      color: #c66a3c;
    }

    .brand-anthem.is-visible .brand-anthem__line > span {
      --char-opacity: 1;
      --char-blur: 0px;
      --char-y: 0;
      --char-scale-y: 1;
    }

    @keyframes kineticDrop {
      0% {
        opacity: 0;
        filter: blur(16px);
        transform: translateY(-0.45em) scaleY(1.22);
      }

      58% {
        opacity: 1;
        filter: blur(1px);
        transform: translateY(0.08em) scaleY(0.92);
      }

      100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scaleY(1);
      }
    }

    .brand-anthem__copy {
      max-width: 42rem;
      margin: clamp(22px, 3vw, 34px) 0 0;
      color: rgba(33, 23, 15, 0.72);
      font-size: clamp(1rem, 1.45vw, 1.24rem);
      font-weight: 600;
      line-height: 1.9;
      opacity: var(--anthem-copy-opacity, 0.35);
      transform: translate3d(0, calc((1 - var(--anthem-progress, 0)) * 28px), 0);
      will-change: transform, opacity;
    }

    .flavor-freedom {
      padding: clamp(72px, 10vw, 132px) clamp(18px, 4vw, 56px);
      background: #f4e7d0;
      color: #21170f;
    }

    .flavor-freedom__inner {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(32px, 6vw, 94px);
      width: min(1240px, 100%);
      margin: 0 auto;
      align-items: flex-start;
    }

    .flavor-freedom__copy h2,
    .lifestyle-parallax__copy h2 {
      --section-headline-size: clamp(3.05rem, 3.9vw, 4.5rem);
      margin: 0;
      color: #21170f;
      font-family: "Noto Serif TC", "Songti TC", serif;
      font-size: var(--section-headline-size);
      font-weight: 900;
      line-height: 1.03;
      letter-spacing: 0;
      max-width: 100%;
      text-wrap: auto;
    }

    .flavor-freedom__copy h2 span,
    .lifestyle-parallax__copy h2 span {
      display: block;
      white-space: normal;
    }

    .flavor-freedom__copy,
    .lifestyle-parallax__copy {
      min-width: 0;
    }

    .flavor-freedom__list {
      display: flex;
      flex: 1 1 520px;
      flex-direction: column;
      gap: 1px;
      border-top: 1px solid rgba(33, 23, 15, 0.18);
    }

    .flavor-freedom__list article {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 18px;
      align-items: baseline;
      padding: 28px 0;
      border-bottom: 1px solid rgba(33, 23, 15, 0.18);
    }

    .flavor-freedom__list span {
      flex: 0 0 54px;
    }

    .flavor-freedom__list h3 {
      flex: 1 1 220px;
    }

    .flavor-freedom__list p {
      flex: 1 1 320px;
    }

    .flavor-freedom__list span {
      color: rgba(33, 23, 15, 0.38);
      font-family: "Playfair Display", serif;
      font-size: 1.1rem;
      font-weight: 700;
    }

    .flavor-freedom__list h3 {
      margin: 0;
      color: #21170f;
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1.28rem, 2.1vw, 2rem);
      line-height: 1.25;
    }

    .flavor-freedom__list p {
      margin: 0;
      color: rgba(33, 23, 15, 0.68);
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.8;
    }

    .calorie-story.calorie-drop {
      position: relative;
      height: 240svh;
      min-height: 1480px;
      padding: 0;
      overflow: visible;
      background: #fffdfa;
      color: #6a3d2f;
    }

    .calorie-drop__stage {
      --calorie-drop-progress: 0;
      --calorie-drop-impact: 0;
      position: sticky;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100svh;
      min-height: 100dvh;
      padding: clamp(72px, 8vw, 112px) clamp(18px, 4vw, 58px);
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 50% 49%, rgba(166, 95, 91, calc(var(--calorie-drop-impact) * 0.16)), transparent 28rem),
        radial-gradient(circle at 50% 56%, rgba(196, 164, 133, 0.20), transparent 34rem),
        linear-gradient(180deg, #fffefa 0%, #fff8f0 58%, #f8eee3 100%);
      color: color-mix(in srgb, #6a3d2f calc((1 - var(--calorie-drop-impact)) * 100%), #a65f5b calc(var(--calorie-drop-impact) * 100%));
    }

    .calorie-drop__stage::before,
    .calorie-drop__stage::after {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      content: "";
    }

    .calorie-drop__stage::before {
      opacity: calc(0.14 + var(--calorie-drop-impact) * 0.08);
      background:
        linear-gradient(90deg, rgba(125, 87, 67, 0.16) 1px, transparent 1px),
        linear-gradient(180deg, rgba(125, 87, 67, 0.12) 1px, transparent 1px);
      background-size: 92px 92px;
    }

    .calorie-drop__stage::after {
      opacity: calc(0.26 + var(--calorie-drop-impact) * 0.16);
      background:
        radial-gradient(circle at 50% 50%, transparent 0 18rem, rgba(166, 95, 91, 0.13) 18.1rem 18.22rem, transparent 18.32rem),
        radial-gradient(circle at 50% 50%, transparent 0 27rem, rgba(176, 138, 110, 0.12) 27.1rem 27.24rem, transparent 27.35rem);
    }

    .calorie-drop__noodle-scene {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: calc(0.58 + var(--calorie-drop-impact) * 0.20);
    }

    .calorie-drop__noodle-scene canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    .calorie-drop__before,
    .calorie-drop__after {
      position: absolute;
      z-index: 2;
      display: flex;
      flex-direction: column;
      max-width: min(48vw, 720px);
      transition: opacity 120ms linear, transform 120ms linear;
    }

    .calorie-drop__before {
      top: clamp(84px, 10vw, 132px);
      left: clamp(18px, 5vw, 72px);
      opacity: clamp(0, calc(1 - var(--calorie-drop-progress) * 1.7), 1);
      transform: translate3d(calc(var(--calorie-drop-progress) * -52px), 0, 0);
    }

    .calorie-drop__after {
      top: clamp(84px, 10vw, 132px);
      right: clamp(18px, 5vw, 72px);
      text-align: right;
      opacity: var(--calorie-drop-impact);
      transform: translate3d(calc((1 - var(--calorie-drop-impact)) * 52px), 0, 0);
    }

    .calorie-drop__before span,
    .calorie-drop__after span {
      color: rgba(106, 61, 47, 0.74);
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(2rem, 4.8vw, 5.7rem);
      font-weight: 900;
      line-height: 0.98;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .calorie-drop__stage.is-impact .calorie-drop__after span {
      color: #a65f5b;
    }

    .calorie-drop__core {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: min(980px, 100%);
      text-align: center;
    }

    .calorie-drop__core .section-kicker {
      color: color-mix(in srgb, #b76f4e calc((1 - var(--calorie-drop-impact)) * 100%), #a65f5b calc(var(--calorie-drop-impact) * 100%));
    }

    .calorie-drop__number-wrap {
      position: relative;
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: clamp(10px, 2vw, 24px);
      margin-top: clamp(18px, 2vw, 28px);
      margin-bottom: clamp(30px, 4vw, 64px);
      color: color-mix(in srgb, #7a422f calc((1 - var(--calorie-drop-impact)) * 100%), #a65f5b calc(var(--calorie-drop-impact) * 100%));
      text-shadow: 0 12px calc(var(--calorie-drop-impact) * 32px) rgba(166, 95, 91, 0.28);
      transform:
        translate3d(0, calc((1 - var(--calorie-drop-progress)) * 24px), 0)
        scale(calc(1 + var(--calorie-drop-impact) * 0.18));
      transform-origin: center;
    }

    .calorie-drop__number-wrap::before,
    .calorie-drop__number-wrap::after {
      position: absolute;
      inset: 50% auto auto 50%;
      width: clamp(220px, 38vw, 520px);
      aspect-ratio: 1;
      pointer-events: none;
      content: "";
      border: 1px solid rgba(166, 95, 91, calc(var(--calorie-drop-impact) * 0.38));
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(calc(0.76 + var(--calorie-drop-impact) * 0.48));
      opacity: var(--calorie-drop-impact);
    }

    .calorie-drop__number-wrap::after {
      width: clamp(290px, 50vw, 680px);
      border-color: rgba(184, 147, 119, calc(var(--calorie-drop-impact) * 0.20));
      transform: translate(-50%, -50%) scale(calc(0.70 + var(--calorie-drop-impact) * 0.55)) rotate(-8deg);
    }

    .calorie-drop__number-wrap.is-impact {
      animation: kcalImpact 620ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
    }

    .calorie-drop__number-wrap b {
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: clamp(8rem, 28vw, 24rem);
      font-weight: 700;
      line-height: 0.75;
      letter-spacing: 0;
    }

    .calorie-drop__number-wrap span {
      font-family: "Noto Serif TC", serif;
      font-size: clamp(2.6rem, 8vw, 7.2rem);
      font-weight: 900;
      line-height: 0.9;
      letter-spacing: 0;
    }

    .calorie-drop__unit,
    .calorie-drop__promise {
      max-width: 42rem;
      margin: 0;
      font-weight: 900;
      line-height: 1.7;
    }

    .calorie-drop__unit {
      margin-top: 0;
      color: rgba(106, 61, 47, 0.62);
      font-size: clamp(0.86rem, 1.2vw, 1rem);
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .calorie-drop__stage.is-impact .calorie-drop__unit {
      color: rgba(126, 74, 63, 0.70);
    }

    .calorie-drop__promise {
      margin-top: clamp(22px, 3vw, 36px);
      color: color-mix(in srgb, rgba(106, 61, 47, 0.70) calc((1 - var(--calorie-drop-impact)) * 100%), rgba(117, 66, 58, 0.92) calc(var(--calorie-drop-impact) * 100%));
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1.18rem, 2.2vw, 2.1rem);
      letter-spacing: 0;
      opacity: calc(0.5 + var(--calorie-drop-impact) * 0.5);
    }

    .calorie-drop__promise span {
      display: inline;
    }

    .calorie-drop__progress {
      position: absolute;
      left: clamp(18px, 5vw, 72px);
      right: clamp(18px, 5vw, 72px);
      bottom: clamp(24px, 5vw, 56px);
      z-index: 4;
      height: 3px;
      overflow: hidden;
      background: rgba(106, 61, 47, 0.14);
    }

    .calorie-drop__stage.is-impact .calorie-drop__progress {
      background: rgba(166, 95, 91, 0.18);
    }

    .calorie-drop__progress span {
      display: block;
      width: calc(var(--calorie-drop-progress) * 100%);
      height: 100%;
      background: linear-gradient(90deg, #c98258 0%, #a65f5b 100%);
    }

    @keyframes kcalImpact {
      0% {
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1.06);
      }

      18% {
        filter: blur(1px);
        transform: translate3d(-10px, 4px, 0) scale(1.28) rotate(-1.6deg);
      }

      36% {
        filter: blur(0);
        transform: translate3d(9px, -5px, 0) scale(1.18) rotate(1.3deg);
      }

      58% {
        transform: translate3d(-4px, 2px, 0) scale(1.24) rotate(-0.7deg);
      }

      100% {
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1.18);
      }
    }

    .calorie-story.low-calorie-audience {
      position: relative;
      overflow: hidden;
      padding: clamp(82px, 10vw, 138px) clamp(18px, 4vw, 56px);
      background:
        linear-gradient(90deg, rgba(33, 23, 15, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(33, 23, 15, 0.035) 1px, transparent 1px),
        linear-gradient(135deg, #fff9ee 0%, #f3eadc 52%, #e5d4ba 100%);
      background-size: 112px 112px, 112px 112px, auto;
      color: #21170f;
    }

    .low-calorie-audience__inner {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      width: min(1240px, 100%);
      margin: 0 auto;
      border-top: 1px solid rgba(33, 23, 15, 0.18);
      border-left: 1px solid rgba(33, 23, 15, 0.14);
      background: rgba(255, 252, 245, 0.46);
      box-shadow: 0 30px 90px rgba(83, 54, 30, 0.10);
    }

    .low-calorie-audience__inner--pain .low-calorie-audience__lead {
      flex: 1 1 420px;
    }

    .low-calorie-audience__inner--pain .low-calorie-audience__list {
      flex: 1 1 520px;
    }

    .low-calorie-audience__lead {
      min-width: 0;
      flex: 1 1 420px;
      padding: clamp(28px, 4vw, 46px);
      border-right: 1px solid rgba(33, 23, 15, 0.14);
      border-bottom: 1px solid rgba(33, 23, 15, 0.14);
    }

    .low-calorie-audience__lead h2 {
      margin: 0;
      color: #21170f;
      font-family: "Noto Serif TC", "Songti TC", serif;
      font-size: clamp(3.05rem, 5.2vw, 6.15rem);
      font-weight: 900;
      line-height: 0.98;
      letter-spacing: 0;
    }

    .low-calorie-audience__lead h2 span {
      display: block;
    }

    .low-calorie-audience__lead h2 span:last-child {
      color: #c66a3c;
    }

    .low-calorie-audience__lead p:not(.section-kicker) {
      max-width: 35rem;
      margin: clamp(22px, 3vw, 32px) 0 0;
      color: rgba(33, 23, 15, 0.72);
      font-size: clamp(1rem, 1.25vw, 1.12rem);
      font-weight: 700;
      line-height: 1.9;
    }

    .low-calorie-audience__meter {
      display: flex;
      flex: 0 0 220px;
      min-height: 100%;
      padding: 26px;
      border-right: 1px solid rgba(33, 23, 15, 0.14);
      border-bottom: 1px solid rgba(33, 23, 15, 0.14);
      background: #21170f;
      color: #fff9ee;
      flex-direction: column;
      justify-content: space-between;
      isolation: isolate;
    }

    .low-calorie-audience__meter::before {
      position: absolute;
      inset: 22px;
      pointer-events: none;
      content: "";
      border: 1px solid rgba(255, 249, 238, 0.17);
    }

    .low-calorie-audience__meter span,
    .low-calorie-audience__meter em,
    .low-calorie-audience__meter small {
      position: relative;
      z-index: 1;
      font-style: normal;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .low-calorie-audience__meter span,
    .low-calorie-audience__meter small {
      color: rgba(255, 249, 238, 0.66);
      font-size: 0.72rem;
      line-height: 1.5;
    }

    .low-calorie-audience__meter strong {
      position: relative;
      z-index: 1;
      color: #bdd457;
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: clamp(6.2rem, 11vw, 10.4rem);
      font-weight: 700;
      line-height: 0.72;
      letter-spacing: 0;
    }

    .low-calorie-audience__meter em {
      color: #fff9ee;
      font-size: clamp(1.7rem, 2.7vw, 2.6rem);
      line-height: 1;
    }

    .low-calorie-audience__list {
      display: flex;
      flex: 1 1 320px;
      flex-direction: column;
      min-width: 0;
    }

    .low-calorie-audience__list article {
      display: flex;
      gap: 18px;
      align-content: start;
      padding: clamp(20px, 2.6vw, 30px);
      border-right: 1px solid rgba(33, 23, 15, 0.14);
      border-bottom: 1px solid rgba(33, 23, 15, 0.14);
      background: rgba(255, 252, 245, 0.34);
    }

    .low-calorie-audience__list article span {
      flex: 0 0 54px;
    }

    .low-calorie-audience__list article > div,
    .low-calorie-audience__list article > p,
    .low-calorie-audience__list article > h3 {
      min-width: 0;
    }

    .low-calorie-audience__list article:first-child {
      background: rgba(189, 212, 87, 0.16);
    }

    .low-calorie-audience__list article span {
      color: rgba(33, 23, 15, 0.36);
      font-family: "Playfair Display", serif;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1;
    }

    .low-calorie-audience__list h3 {
      margin: 0;
      color: #21170f;
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1.32rem, 2vw, 1.9rem);
      font-weight: 900;
      line-height: 1.18;
      letter-spacing: 0;
    }

    .low-calorie-audience__list p {
      margin: 12px 0 0;
      color: rgba(33, 23, 15, 0.68);
      font-size: 0.96rem;
      font-weight: 700;
      line-height: 1.76;
    }

    .alkali-wave-section {
      --alkali-wave-progress: 0;
      --alkali-wave-rinse: 0;
      --alkali-mobile-bag-opacity: 1;
      --alkali-mobile-bag-scale: 1;
      --alkali-mobile-bag-y: 0px;
      --alkali-mobile-text-progress: 1;
      position: relative;
      overflow: hidden;
      padding: clamp(86px, 10vw, 148px) clamp(18px, 4vw, 56px);
      color: #21170f;
      background:
        linear-gradient(90deg, rgba(33, 23, 15, 0.032) 1px, transparent 1px),
        linear-gradient(180deg, rgba(33, 23, 15, 0.026) 1px, transparent 1px),
        linear-gradient(135deg, #fbf4e8 0%, #f1e5d2 48%, #eeeae0 100%);
      background-size: 104px 104px, 104px 104px, auto;
      isolation: isolate;
      scroll-margin-top: 72px;
    }

    .alkali-wave-section::before {
      content: "FOOD GRADE WATER";
      position: absolute;
      left: clamp(18px, 4vw, 56px);
      right: clamp(18px, 4vw, 56px);
      bottom: 28px;
      z-index: -1;
      color: rgba(33, 23, 15, 0.045);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: clamp(4rem, 11vw, 12rem);
      font-weight: 900;
      line-height: 0.8;
      text-align: center;
      text-transform: uppercase;
      pointer-events: none;
    }

    .alkali-wave__inner {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: clamp(28px, 5vw, 82px);
      width: min(1240px, 100%);
      min-height: min(760px, 86svh);
      margin: 0 auto;
    }

    .alkali-wave__copy {
      min-width: 0;
      flex: 1 1 420px;
      transform: translate3d(0, calc((1 - var(--alkali-wave-progress)) * 24px), 0);
      opacity: calc(0.18 + var(--alkali-wave-progress) * 0.82);
      will-change: transform, opacity;
    }

    .alkali-wave__copy h2 {
      margin: 0;
      color: #21170f;
      font-family: "Noto Serif TC", "Songti TC", serif;
      font-size: clamp(3rem, 5.8vw, 6.4rem);
      font-weight: 900;
      line-height: 0.98;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .alkali-wave__copy h2 span {
      display: block;
    }

    .alkali-wave__copy h2 span:last-child {
      color: #6f6a60;
    }

    .alkali-wave__copy p:not(.section-kicker) {
      max-width: 34rem;
      margin: clamp(20px, 2.6vw, 34px) 0 0;
      color: rgba(33, 23, 15, 0.72);
      font-size: clamp(1rem, 1.18vw, 1.12rem);
      font-weight: 700;
      line-height: 1.9;
    }

    .alkali-wave__punch {
      display: block;
      width: min(100%, 540px);
      margin: clamp(22px, 3vw, 36px) 0 0;
      padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px);
      border: 1px solid rgba(33, 23, 15, 0.16);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 252, 244, 0.86), rgba(235, 233, 226, 0.72));
      box-shadow: 0 24px 70px rgba(92, 86, 76, 0.12);
      color: #4f4a42;
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1.55rem, 2.4vw, 2.65rem);
      font-weight: 900;
      line-height: 1.2;
      text-wrap: balance;
    }

    .alkali-wave__badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: clamp(20px, 2.4vw, 30px);
    }

    .alkali-wave__badges span {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 7px 11px;
      border: 1px solid rgba(112, 106, 95, 0.22);
      border-radius: 999px;
      background: rgba(255, 252, 244, 0.72);
      color: rgba(33, 23, 15, 0.78);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
      font-size: 0.8rem;
      font-weight: 900;
      line-height: 1.1;
    }

    .alkali-wave__visual {
      position: relative;
      min-width: 0;
      flex: 1 1 520px;
      min-height: clamp(520px, 54vw, 720px);
      transform:
        translate3d(0, calc((1 - var(--alkali-wave-progress)) * 34px), 0)
        rotate(calc((1 - var(--alkali-wave-progress)) * -1.2deg));
      opacity: calc(0.10 + var(--alkali-wave-progress) * 0.90);
      will-change: transform, opacity;
    }

    .alkali-wave__visual::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 6%;
      width: min(88%, 640px);
      height: 22%;
      border-radius: 50%;
      background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.74) 0%, rgba(128, 122, 111, 0.16) 48%, transparent 74%);
      filter: blur(20px);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .alkali-wave__canvas {
      position: relative;
      z-index: 1;
      display: block;
      width: min(100%, 720px);
      height: auto;
      aspect-ratio: 1;
      margin: 0 auto;
      filter:
        drop-shadow(0 34px 72px rgba(83, 78, 69, 0.16))
        drop-shadow(0 12px 24px rgba(83, 54, 30, 0.10));
    }

    .alkali-wave__mode {
      position: absolute;
      left: 50%;
      top: clamp(8px, 3vw, 28px);
      z-index: 4;
      display: inline-flex;
      width: min(86%, 420px);
      padding: 5px;
      border: 1px solid rgba(33, 23, 15, 0.14);
      border-radius: 999px;
      background: rgba(255, 252, 244, 0.78);
      box-shadow: 0 18px 44px rgba(83, 78, 69, 0.10);
      transform: translateX(-50%);
      backdrop-filter: blur(14px);
    }

    .alkali-wave__mode span {
      display: inline-flex;
      flex: 1 1 0;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      border-radius: 999px;
      color: rgba(33, 23, 15, 0.58);
      font-size: 0.86rem;
      font-weight: 900;
      line-height: 1;
      transition: background 240ms ease, color 240ms ease, transform 240ms ease;
    }

    .alkali-wave__mode span:first-child {
      background: rgba(33, 23, 15, calc(0.88 * (1 - var(--alkali-wave-rinse))));
      color: #fffcf4;
      transform: scale(calc(1 - var(--alkali-wave-rinse) * 0.035));
    }

    .alkali-wave-section.is-rinsing .alkali-wave__mode span:first-child {
      color: rgba(33, 23, 15, 0.52);
    }

    .alkali-wave__mode span:last-child {
      background: rgba(112, 108, 100, calc(0.82 * var(--alkali-wave-rinse)));
      color: rgba(33, 23, 15, 0.58);
      transform: scale(calc(0.965 + var(--alkali-wave-rinse) * 0.035));
    }

    .alkali-wave-section.is-rinsing .alkali-wave__mode span:last-child {
      color: #fffcf4;
    }

    .alkali-wave__caption {
      position: absolute;
      left: 50%;
      bottom: clamp(8px, 2vw, 24px);
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: min(86%, 470px);
      padding: 14px 16px;
      border: 1px solid rgba(33, 23, 15, 0.13);
      border-radius: 8px;
      background: rgba(255, 252, 244, 0.78);
      box-shadow: 0 22px 64px rgba(83, 78, 69, 0.12);
      transform: translateX(-50%);
      backdrop-filter: blur(12px);
    }

    .alkali-wave__caption span {
      color: rgba(101, 96, 88, 0.74);
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .alkali-wave__caption strong {
      color: #21170f;
      font-size: clamp(0.98rem, 1.2vw, 1.12rem);
      font-weight: 900;
      line-height: 1.35;
    }

    @media (max-width: 980px) {
      .alkali-wave__inner {
        flex-direction: column;
        min-height: 0;
      }

      .alkali-wave__copy,
      .alkali-wave__visual {
        flex-basis: 100%;
      }

      .alkali-wave__copy {
        max-width: 720px;
      }

      .alkali-wave__visual {
        min-height: clamp(520px, 82vw, 720px);
      }
    }

    @media (max-width: 767px) {
      .alkali-wave-section {
        height: 230svh;
        min-height: 1480px;
        overflow: clip;
        padding: 0;
        background-size: 72px 72px, 72px 72px, auto;
      }

      .alkali-wave-section::before {
        bottom: 18px;
        font-size: 4rem;
        line-height: 0.88;
      }

      .alkali-wave__inner {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        height: 100svh;
        min-height: 760px;
        margin: 0;
        padding: clamp(28px, 7svh, 58px) 14px clamp(74px, 12svh, 112px);
        overflow: hidden;
      }

      .alkali-wave__copy {
        position: relative;
        z-index: 4;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: min(100%, 392px);
        max-width: none;
        min-height: min(640px, calc(100svh - 110px));
        margin: 0 auto;
        opacity: var(--alkali-mobile-text-progress);
        transform: translate3d(0, calc((1 - var(--alkali-mobile-text-progress)) * 24px), 0);
        will-change: transform, opacity;
      }

      .alkali-wave__copy h2 {
        font-size: clamp(3.1rem, 15vw, 4.5rem);
        line-height: 0.88;
      }

      .alkali-wave__copy p:not(.section-kicker) {
        max-width: none;
        margin-top: 22px;
        color: rgba(33, 23, 15, 0.78);
        font-size: 1rem;
        line-height: 1.78;
        text-shadow: 0 1px 0 rgba(255, 252, 244, 0.62);
      }

      .alkali-wave__punch {
        width: 100%;
        margin-top: 26px;
        padding: 16px;
        background:
          linear-gradient(135deg, rgba(255, 252, 244, 0.92), rgba(239, 236, 228, 0.82));
        box-shadow: 0 18px 52px rgba(70, 62, 52, 0.12);
        font-size: clamp(1.48rem, 7vw, 2.05rem);
      }

      .alkali-wave__badges {
        gap: 8px;
        margin-top: 22px;
      }

      .alkali-wave__badges span {
        min-height: 31px;
        padding: 6px 9px;
        font-size: 0.74rem;
      }

      .alkali-wave__visual {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 1;
        width: 100%;
        min-height: 100svh;
        opacity: var(--alkali-mobile-bag-opacity);
        pointer-events: none;
        transform:
          translate3d(-50%, calc(-50% + var(--alkali-mobile-bag-y)), 0)
          scale(var(--alkali-mobile-bag-scale));
        transform-origin: center center;
      }

      .alkali-wave__visual::before {
        bottom: 5%;
        width: 128vw;
        height: 28%;
        filter: blur(18px);
      }

      .alkali-wave__canvas {
        width: min(168vw, 720px);
        max-width: none;
        margin-left: 50%;
        transform: translateX(-50%);
        filter:
          drop-shadow(0 34px 64px rgba(83, 78, 69, 0.13))
          drop-shadow(0 10px 22px rgba(83, 54, 30, 0.09));
      }

      .alkali-wave__mode {
        display: none;
      }

      .alkali-wave__mode span {
        min-height: 34px;
        font-size: 0.78rem;
      }

      .alkali-wave__caption {
        bottom: clamp(22px, 7svh, 52px);
        width: min(88vw, 380px);
        padding: 12px 13px;
        background: rgba(255, 252, 244, 0.82);
        opacity: var(--alkali-mobile-text-progress);
        transform:
          translateX(-50%)
          translateY(calc((1 - var(--alkali-mobile-text-progress)) * 14px));
      }
    }

    .no-cook-section {
      --no-cook-title-progress: 0;
      --no-cook-stage-progress: 0;
      --no-cook-punch-progress: 0;
      position: relative;
      overflow: hidden;
      padding: clamp(92px, 11vw, 156px) clamp(18px, 4vw, 56px);
      color: #21170f;
      background: #eadcc8;
      isolation: isolate;
    }

    .no-cook-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image: url("../images/no-cook-methods-bg.webp");
      background-position: center 48%;
      background-size: cover;
      transform: scale(1.02);
      transform-origin: center;
      pointer-events: none;
    }

    .no-cook-section::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(255, 247, 233, 0.88) 0%, rgba(255, 247, 233, 0.70) 46%, rgba(46, 31, 18, 0.20) 100%),
        linear-gradient(180deg, rgba(255, 247, 233, 0.84) 0%, rgba(255, 247, 233, 0.46) 42%, rgba(232, 213, 184, 0.78) 100%);
      pointer-events: none;
    }

    .no-cook__inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: clamp(24px, 4vw, 64px);
      width: min(1240px, 100%);
      min-height: min(720px, 86svh);
      margin: 0 auto;
      align-items: center;
    }

    .no-cook__copy {
      min-width: 0;
      flex: 1 1 420px;
      opacity: var(--no-cook-title-progress);
      transform: translate3d(0, calc((1 - var(--no-cook-title-progress)) * 28px), 0);
      will-change: transform, opacity;
    }

    .no-cook__copy h2 {
      margin: 0;
      color: #21170f;
      font-family: "Noto Serif TC", "Songti TC", serif;
      font-size: clamp(3rem, 5.45vw, 6.1rem);
      font-weight: 900;
      line-height: 1.02;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .no-cook__copy h2 span {
      display: block;
    }

    .no-cook__copy h2 span:last-child {
      color: #6a6257;
    }

    .no-cook__copy p:not(.section-kicker) {
      max-width: 34rem;
      margin: clamp(20px, 2.4vw, 32px) 0 0;
      color: rgba(33, 23, 15, 0.72);
      font-size: clamp(1rem, 1.16vw, 1.12rem);
      font-weight: 700;
      line-height: 1.9;
    }

    .no-cook__stage {
      position: relative;
      flex: 1 1 520px;
      min-height: clamp(430px, 44vw, 600px);
      opacity: var(--no-cook-stage-progress);
      transform:
        translate3d(0, calc((1 - var(--no-cook-stage-progress)) * 32px), 0)
        scale(calc(0.96 + var(--no-cook-stage-progress) * 0.04));
      transform-origin: center;
      will-change: transform, opacity;
    }

    .no-cook__stage::before,
    .no-cook__stage::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(calc(0.88 + var(--no-cook-stage-progress) * 0.12));
      transform-origin: center;
      pointer-events: none;
    }

    .no-cook__stage::before {
      width: min(74%, 420px);
      aspect-ratio: 1;
      border: 1px solid rgba(255, 252, 244, 0.50);
      background: rgba(255, 252, 244, 0.18);
      box-shadow:
        inset 0 0 0 1px rgba(92, 67, 39, 0.10),
        0 28px 90px rgba(33, 23, 15, 0.16);
      backdrop-filter: blur(5px);
    }

    .no-cook__stage::after {
      width: min(38%, 206px);
      aspect-ratio: 1;
      border: 1px solid rgba(93, 56, 38, 0.16);
      background:
        radial-gradient(circle at center, rgba(255, 252, 244, 0.72), rgba(255, 252, 244, 0.22) 62%, transparent 70%);
      opacity: calc(0.28 + var(--no-cook-stage-progress) * 0.48);
    }

    .no-cook__stamps {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .no-cook__stamps span {
      --stamp-progress: 0;
      position: absolute;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: clamp(72px, 9vw, 116px);
      aspect-ratio: 1;
      border: 1.7px solid rgba(93, 56, 38, 0.58);
      border-radius: 50%;
      background:
        radial-gradient(circle at 34% 26%, rgba(255, 252, 244, 0.92), rgba(255, 252, 244, 0.70) 48%, rgba(230, 211, 184, 0.58) 100%);
      color: #5d3826;
      box-shadow:
        inset 0 0 0 6px rgba(93, 56, 38, 0.052),
        0 18px 38px rgba(33, 23, 15, 0.16);
      font-family: "Noto Serif TC", serif;
      font-size: clamp(2rem, 4vw, 4.4rem);
      font-weight: 900;
      line-height: 1;
      opacity: var(--stamp-progress);
      transform:
        translate3d(
          calc(var(--stamp-x, 0px) + (1 - var(--stamp-progress)) * 10px),
          calc(var(--stamp-y, 0px) + (1 - var(--stamp-progress)) * 26px),
          0
        )
        rotate(calc(var(--stamp-rotate, 0deg) + (1 - var(--stamp-progress)) * -8deg))
        scale(calc(0.72 + var(--stamp-progress) * 0.28));
      transform-origin: center;
      will-change: transform, opacity;
    }

    .no-cook__stamps span:nth-child(1) {
      --stamp-x: 0px;
      --stamp-y: -178px;
      --stamp-rotate: -4deg;
    }

    .no-cook__stamps span:nth-child(2) {
      --stamp-x: 170px;
      --stamp-y: -54px;
      --stamp-rotate: 6deg;
    }

    .no-cook__stamps span:nth-child(3) {
      --stamp-x: 104px;
      --stamp-y: 144px;
      --stamp-rotate: -5deg;
    }

    .no-cook__stamps span:nth-child(4) {
      --stamp-x: -104px;
      --stamp-y: 144px;
      --stamp-rotate: 7deg;
    }

    .no-cook__stamps span:nth-child(5) {
      --stamp-x: -170px;
      --stamp-y: -54px;
      --stamp-rotate: -6deg;
    }

    .no-cook__punch {
      flex: 0 0 100%;
      margin: clamp(12px, 2vw, 24px) 0 0;
      color: #5d3826;
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1.45rem, 2.3vw, 2.55rem);
      font-weight: 900;
      line-height: 1.2;
      text-align: center;
      opacity: var(--no-cook-punch-progress);
      transform: translate3d(0, calc((1 - var(--no-cook-punch-progress)) * 18px), 0);
      will-change: transform, opacity;
    }

    @media (max-width: 980px) {
      .no-cook__inner {
        flex-direction: column;
      }

      .no-cook__copy,
      .no-cook__stage,
      .no-cook__punch {
        flex-basis: 100%;
      }

      .no-cook__copy {
        max-width: 720px;
      }
    }

    @media (max-width: 767px) {
      .no-cook-section {
        height: 220svh;
        min-height: 1500px;
        overflow: clip;
        padding: 0;
      }

      .no-cook-section::before {
        inset: 0;
        width: auto;
        background-position: 51% 50%;
        transform: scale(1.04);
      }

      .no-cook-section::after {
        background:
          linear-gradient(180deg, rgba(255, 247, 233, 0.82) 0%, rgba(255, 247, 233, 0.32) 42%, rgba(34, 24, 16, 0.20) 100%),
          linear-gradient(90deg, rgba(255, 247, 233, 0.68) 0%, rgba(255, 247, 233, 0.32) 48%, rgba(255, 247, 233, 0.10) 100%);
      }

      .no-cook__inner {
        position: sticky;
        top: 0;
        display: block;
        width: 100%;
        height: 100svh;
        min-height: 760px;
        padding: clamp(50px, 7.6svh, 72px) 14px clamp(70px, 9svh, 96px);
        overflow: hidden;
      }

      .no-cook__copy {
        position: relative;
        z-index: 5;
        align-self: start;
        width: min(100%, 392px);
        margin: 0 auto;
      }

      .no-cook__copy h2 {
        font-size: clamp(2.5rem, 10.8vw, 3.28rem);
        line-height: 1;
      }

      .no-cook__copy p:not(.section-kicker) {
        max-width: none;
        margin-top: 14px;
        color: rgba(33, 23, 15, 0.72);
        font-size: 0.91rem;
        line-height: 1.66;
        text-shadow: 0 1px 0 rgba(255, 252, 244, 0.72);
      }

      .no-cook__stage {
        position: absolute;
        left: 50%;
        top: 58%;
        z-index: 2;
        width: min(104vw, 458px);
        min-height: auto;
        aspect-ratio: 1.02;
        transform:
          translate3d(-50%, calc(-50% + (1 - var(--no-cook-stage-progress)) * 34px), 0)
          scale(calc(0.88 + var(--no-cook-stage-progress) * 0.17));
      }

      .no-cook__stage::before {
        width: min(66vw, 252px);
        opacity: 0.74;
      }

      .no-cook__stamps span {
        width: clamp(58px, 18.5vw, 76px);
        border-width: 1.6px;
        font-size: clamp(1.72rem, 7.8vw, 2.42rem);
      }

      .no-cook__stamps span:nth-child(1) {
        --stamp-x: 0px;
        --stamp-y: -116px;
      }

      .no-cook__stamps span:nth-child(2) {
        --stamp-x: 112px;
        --stamp-y: -35px;
      }

      .no-cook__stamps span:nth-child(3) {
        --stamp-x: 68px;
        --stamp-y: 96px;
      }

      .no-cook__stamps span:nth-child(4) {
        --stamp-x: -68px;
        --stamp-y: 96px;
      }

      .no-cook__stamps span:nth-child(5) {
        --stamp-x: -112px;
        --stamp-y: -35px;
      }

      .no-cook__punch {
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: clamp(76px, 9svh, 104px);
        z-index: 5;
        width: min(calc(100% - 28px), 392px);
        margin: 0 auto;
        padding: 13px 14px;
        border: 1px solid rgba(93, 56, 38, 0.18);
        border-radius: 8px;
        background: rgba(255, 252, 244, 0.82);
        box-shadow: 0 18px 48px rgba(92, 67, 39, 0.11);
        font-size: clamp(1.26rem, 6vw, 1.72rem);
        text-align: left;
      }
    }

    .konjac-six-arts {
      position: relative;
      overflow: hidden;
      padding: 108px clamp(18px, 4vw, 56px);
      background:
        linear-gradient(90deg, rgba(33, 23, 15, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(33, 23, 15, 0.03) 1px, transparent 1px),
        linear-gradient(180deg, #f4e7d0 0%, #f9f4ea 54%, #fff9ee 100%);
      background-size: 96px 96px, 96px 96px, auto;
      color: #21170f;
      isolation: isolate;
    }

    .konjac-six-arts::before {
      position: absolute;
      inset: auto 0 0;
      height: 34%;
      pointer-events: none;
      content: "";
      background: linear-gradient(180deg, transparent 0%, rgba(127, 151, 88, 0.14) 100%);
      z-index: -1;
    }

    .konjac-six-arts__grid {
      --six-grid-progress: 0;
      --six-image-reveal: 0;
      --six-active-progress: 0;
      position: relative;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: repeat(6, minmax(116px, auto));
      width: min(1240px, 100%);
      min-height: 764px;
      margin: 0 auto;
      border: 1px solid rgba(33, 23, 15, 0.14);
      background: rgba(255, 252, 245, 0.58);
      box-shadow: 0 28px 88px rgba(83, 54, 30, 0.10);
    }

    .konjac-six-arts__grid::before {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      content: "";
      background:
        linear-gradient(90deg, rgba(33, 23, 15, 0.13) 1px, transparent 1px),
        linear-gradient(180deg, rgba(33, 23, 15, 0.13) 1px, transparent 1px);
      background-size: calc(100% / 12) 100%, 100% calc(100% / 6);
      clip-path: inset(0 calc((1 - var(--six-grid-progress)) * 100%) 0 0);
      transition: clip-path 240ms ease-out;
    }

    .konjac-six-arts__grid > * {
      position: relative;
      z-index: 2;
      min-width: 0;
    }

    .konjac-six-arts__rail {
      display: contents;
    }

    .konjac-six-arts__rail-progress {
      display: none;
    }

    .konjac-six-arts__masthead {
      grid-column: 1 / 6;
      grid-row: 1 / 4;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 34px;
    }

    .konjac-six-arts__kicker {
      margin: 0;
      color: rgba(33, 23, 15, 0.58);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .konjac-six-arts__masthead h2 {
      margin: 24px 0 0;
      color: #21170f;
      font-family: "Noto Serif TC", "Songti TC", serif;
      letter-spacing: 0;
      line-height: 0.9;
      transform: translateY(calc((1 - var(--six-grid-progress)) * 22px));
      opacity: calc(0.22 + var(--six-grid-progress) * 0.78);
    }

    .konjac-six-arts__masthead h2 span {
      display: block;
      font-size: 2.1rem;
      font-weight: 900;
      line-height: 1.1;
    }

    .konjac-six-arts__masthead h2 strong {
      display: block;
      margin-top: 10px;
      font-size: 7.2rem;
      font-weight: 900;
      line-height: 0.9;
    }

    .konjac-six-arts__masthead p:not(.konjac-six-arts__kicker) {
      max-width: 27rem;
      margin: 28px 0 0;
      color: rgba(33, 23, 15, 0.70);
      font-size: 0.98rem;
      font-weight: 700;
      line-height: 1.82;
    }

    .konjac-six-arts__image {
      grid-column: 1 / 6;
      grid-row: 4 / 7;
      align-self: stretch;
      min-height: 0;
      margin: 0;
      overflow: hidden;
      background: #ded4c3;
      clip-path: inset(0 calc((1 - var(--six-image-reveal)) * 100%) 0 0);
    }

    .konjac-six-arts__image img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 348px;
      object-fit: cover;
      filter: saturate(0.92) contrast(1.02);
      transform: scale(calc(1.08 - var(--six-image-reveal) * 0.04));
      transform-origin: center;
    }

    .konjac-six-arts__image figcaption {
      position: absolute;
      left: 18px;
      bottom: 16px;
      padding: 7px 10px;
      background: rgba(255, 249, 238, 0.82);
      color: rgba(33, 23, 15, 0.70);
      font-size: 0.68rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .konjac-six-arts__item {
      --six-item-progress: 0;
      appearance: none;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 18px;
      min-height: 232px;
      margin: 0;
      padding: 22px;
      border: 0;
      border-left: 1px solid rgba(33, 23, 15, 0.12);
      border-bottom: 1px solid rgba(33, 23, 15, 0.12);
      background: rgba(255, 252, 245, 0.42);
      color: #21170f;
      text-align: left;
      cursor: pointer;
      opacity: calc(0.36 + var(--six-item-progress) * 0.64);
      transform: translateY(calc((1 - var(--six-item-progress)) * 24px));
      transition:
        background 180ms ease,
        color 180ms ease,
        opacity 180ms ease,
        transform 240ms ease;
    }

    .konjac-six-arts__item:hover,
    .konjac-six-arts__item:focus-visible,
    .konjac-six-arts__item.is-active {
      background: #fffdf6;
      color: #21170f;
      outline: none;
      box-shadow: inset 0 -4px 0 #c66a3c;
    }

    .konjac-six-arts__item--1 {
      grid-column: 6 / 8;
      grid-row: 1 / 3;
    }

    .konjac-six-arts__item--2 {
      grid-column: 8 / 10;
      grid-row: 1 / 3;
    }

    .konjac-six-arts__item--3 {
      grid-column: 10 / 13;
      grid-row: 1 / 3;
    }

    .konjac-six-arts__item--4 {
      grid-column: 6 / 8;
      grid-row: 3 / 5;
    }

    .konjac-six-arts__item--5 {
      grid-column: 8 / 10;
      grid-row: 3 / 5;
    }

    .konjac-six-arts__item--6 {
      grid-column: 6 / 10;
      grid-row: 5 / 7;
    }

    .konjac-six-arts__item-meta {
      color: rgba(33, 23, 15, 0.48);
      font-family: "Playfair Display", serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .konjac-six-arts__item-title {
      display: block;
      margin-top: 8px;
      font-family: "Noto Serif TC", serif;
      font-size: 1.82rem;
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: 0;
    }

    .konjac-six-arts__item-brief {
      display: block;
      max-width: 13.2rem;
      margin-top: 12px;
      color: rgba(33, 23, 15, 0.66);
      font-size: 0.86rem;
      font-weight: 700;
      line-height: 1.55;
    }

    .konjac-six-arts__item-bottom {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin-top: auto;
    }

    .konjac-six-arts__icon {
      flex: 0 0 auto;
      width: 58px;
      height: 58px;
      overflow: visible;
    }

    .konjac-six-arts__icon path,
    .konjac-six-arts__icon circle {
      fill: none;
      stroke: currentColor;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1;
      stroke-dashoffset: calc(1 - var(--six-item-progress));
      opacity: 0.84;
    }

    .konjac-six-arts__item-number {
      color: rgba(33, 23, 15, 0.30);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: 3.5rem;
      font-weight: 700;
      line-height: 0.82;
    }

    .konjac-six-arts__active {
      grid-column: 10 / 13;
      grid-row: 3 / 7;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 26px;
      min-height: 0;
      padding: 28px;
      background: #3a2115;
      color: #fff9ee;
      overflow: hidden;
      transform:
        translateY(calc((1 - var(--six-active-progress)) * 28px))
        scale(calc(0.98 + var(--six-active-progress) * 0.02));
      opacity: calc(0.18 + var(--six-active-progress) * 0.82);
    }

    .konjac-six-arts__active::after {
      position: absolute;
      inset: auto -18% -28% 18%;
      height: 50%;
      pointer-events: none;
      content: "";
      border: 1px solid rgba(255, 249, 238, 0.18);
      border-radius: 999px;
      transform: rotate(-12deg);
    }

    .konjac-six-arts__active-head {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 16px;
    }

    .konjac-six-arts__active-head span {
      color: rgba(255, 249, 238, 0.62);
      font-family: "Playfair Display", serif;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .konjac-six-arts__active-head strong {
      font-family: "Noto Serif TC", serif;
      font-size: 3.7rem;
      font-weight: 900;
      line-height: 0.98;
      letter-spacing: 0;
    }

    .konjac-six-arts__active p {
      position: relative;
      z-index: 1;
      margin: 0;
      color: rgba(255, 249, 238, 0.76);
      font-size: 0.98rem;
      font-weight: 700;
      line-height: 1.9;
    }

    .konjac-six-arts__active a {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-height: 44px;
      padding: 0 16px;
      border: 1px solid rgba(255, 249, 238, 0.24);
      background: #fff9ee;
      color: #3a2115;
      font-size: 0.9rem;
      font-weight: 900;
      transition: transform 180ms ease, background 180ms ease;
    }

    .konjac-six-arts__active a:hover,
    .konjac-six-arts__active a:focus-visible {
      background: #bdd457;
      transform: translateY(-2px);
    }

    .lifestyle-parallax {
      position: relative;
      overflow: clip;
      min-height: 100svh;
      background: #120805;
      color: #fff7e8;
      isolation: isolate;
    }

    .lifestyle-parallax__pin {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 100svh;
      padding: clamp(82px, 8vw, 128px) clamp(20px, 6vw, 96px);
      overflow: hidden;
      isolation: isolate;
    }

    .lifestyle-parallax__media,
    .lifestyle-parallax__bg,
    .lifestyle-parallax__shade,
    .lifestyle-parallax__grain {
      position: absolute;
      inset: 0;
    }

    .lifestyle-parallax__media {
      z-index: -2;
      overflow: hidden;
      background: #140b07;
    }

    .lifestyle-parallax__bg {
      z-index: -4;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      object-position: 40% center;
      filter: saturate(1.04) contrast(1.06);
      transform: scale(1.04);
      will-change: transform, opacity;
    }

    .lifestyle-parallax__shade {
      z-index: -3;
      pointer-events: none;
      background:
        radial-gradient(circle at 68% 38%, rgba(206, 106, 60, 0.20), transparent 28%),
        linear-gradient(90deg, rgba(18, 8, 5, 0.86) 0%, rgba(18, 8, 5, 0.42) 38%, rgba(18, 8, 5, 0.12) 62%, rgba(18, 8, 5, 0.78) 100%),
        linear-gradient(180deg, rgba(18, 8, 5, 0.72) 0%, transparent 34%, rgba(18, 8, 5, 0.76) 100%);
      will-change: opacity;
    }

    .lifestyle-parallax__person {
      position: absolute;
      z-index: -1;
      right: clamp(10px, 5vw, 92px);
      bottom: clamp(-96px, -7vw, -54px);
      width: min(47vw, 680px);
      max-width: none;
      filter:
        drop-shadow(0 38px 42px rgba(0, 0, 0, 0.42))
        drop-shadow(0 8px 16px rgba(198, 106, 60, 0.22));
      transform-origin: 72% 88%;
      will-change: transform, opacity;
    }

    .lifestyle-parallax__grain {
      z-index: 2;
      pointer-events: none;
      opacity: 0.18;
      mix-blend-mode: screen;
      background-image:
        linear-gradient(rgba(255, 249, 238, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 249, 238, 0.05) 1px, transparent 1px);
      background-size: 11px 11px, 17px 17px;
    }

    .lifestyle-parallax__copy {
      position: relative;
      z-index: 4;
      display: flex;
      flex: 0 1 47rem;
      flex-direction: column;
      align-items: flex-start;
      max-width: min(47rem, 56vw);
      min-width: 0;
      padding-top: clamp(18px, 4vw, 56px);
      text-shadow: 0 16px 42px rgba(0, 0, 0, 0.45);
      will-change: transform, opacity;
    }

    .lifestyle-parallax__copy .section-kicker {
      color: #f1bd76;
      letter-spacing: 0.14em;
    }

    .lifestyle-parallax__copy h2 {
      --section-headline-size: clamp(4.4rem, 8.2vw, 10.8rem);
      max-width: 8.6em;
      color: #fff5e1;
      line-height: 0.88;
      text-wrap: auto;
    }

    .lifestyle-parallax__copy h2 span {
      display: block;
      white-space: nowrap;
      will-change: transform, opacity, filter;
    }

    .lifestyle-parallax__copy p:not(.section-kicker) {
      max-width: 34rem;
      margin: 24px 0 0;
      color: rgba(255, 247, 232, 0.82);
      font-size: clamp(1rem, 1.35vw, 1.22rem);
      font-weight: 800;
      line-height: 1.85;
      will-change: transform, opacity;
    }

    .lifestyle-parallax__chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      max-width: 35rem;
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
    }

    .lifestyle-parallax__chips li {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid rgba(255, 247, 232, 0.28);
      border-radius: 999px;
      background: rgba(255, 247, 232, 0.14);
      color: #fff7e8;
      font-size: 0.88rem;
      font-weight: 900;
      line-height: 1;
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      will-change: transform, opacity;
    }

    .lifestyle-parallax__copy a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      margin-top: 30px;
      padding: 0 20px;
      border: 1px solid rgba(255, 247, 232, 0.28);
      border-radius: 999px;
      background: #fff7e8;
      color: #2b150d;
      font-weight: 900;
      box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28);
      transition: transform 180ms ease, background 180ms ease;
      will-change: transform, opacity;
    }

    .lifestyle-parallax__copy a:hover,
    .lifestyle-parallax__copy a:focus-visible {
      transform: translateY(-2px);
      background: #bdd457;
    }

    .lifestyle-parallax__proof {
      position: absolute;
      right: clamp(22px, 6vw, 98px);
      bottom: clamp(22px, 5vw, 72px);
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      min-width: 148px;
      min-height: 148px;
      padding: 18px;
      border: 1px solid rgba(255, 247, 232, 0.22);
      border-radius: 28px;
      background: rgba(33, 15, 8, 0.56);
      color: #fff7e8;
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
      box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
      will-change: transform, opacity;
    }

    .lifestyle-parallax__proof span,
    .lifestyle-parallax__proof small {
      color: rgba(255, 247, 232, 0.72);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .lifestyle-parallax__proof strong {
      margin: 4px 0 0;
      color: #f1bd76;
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: 4.8rem;
      font-weight: 700;
      line-height: 0.86;
    }

    @media (max-width: 1180px) {
      .konjac-six-arts__masthead {
        padding: 28px;
      }

      .konjac-six-arts__masthead h2 strong {
        font-size: 6.1rem;
      }

      .konjac-six-arts__item {
        min-height: 214px;
        padding: 18px;
      }

      .konjac-six-arts__item-title {
        font-size: 1.58rem;
      }

      .konjac-six-arts__item-brief {
        font-size: 0.8rem;
      }

      .konjac-six-arts__active {
        padding: 24px;
      }

      .konjac-six-arts__active-head strong {
        font-size: 3.05rem;
      }
    }

    @media (max-width: 980px) {
      .brand-anthem__headline {
        --headline-size: 6.4rem;
      }

      .flavor-freedom__copy h2,
      .lifestyle-parallax__copy h2 {
        --section-headline-size: 4.1rem;
      }

      .flavor-freedom__inner {
        flex-direction: column;
      }

      .flavor-freedom__list article {
        flex-direction: row;
      }

      .flavor-freedom__list p {
        flex-basis: 100%;
        padding-left: 42px;
      }

      .low-calorie-audience__inner {
        flex-direction: column;
      }

      .low-calorie-audience__lead {
        flex-basis: auto;
      }

      .low-calorie-audience__inner--pain .low-calorie-audience__lead {
        flex-basis: auto;
      }

      .low-calorie-audience__meter {
        flex: 1 1 220px;
        min-height: 430px;
      }

      .low-calorie-audience__list {
        flex-basis: auto;
      }

      .low-calorie-audience__inner--pain .low-calorie-audience__list {
        flex-basis: auto;
      }

      .konjac-six-arts {
        padding-top: 84px;
        padding-bottom: 92px;
      }

      .konjac-six-arts__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: auto minmax(280px, auto) minmax(280px, auto) repeat(2, minmax(210px, auto));
        min-height: 0;
      }

      .konjac-six-arts__grid::before {
        background-size: calc(100% / 6) 100%, 100% 128px;
      }

      .konjac-six-arts__masthead {
        grid-column: 1 / 7;
        grid-row: 1;
      }

      .konjac-six-arts__masthead h2 strong {
        font-size: 6.7rem;
      }

      .konjac-six-arts__image {
        grid-column: 1 / 4;
        grid-row: 2 / 4;
      }

      .konjac-six-arts__item--1 {
        grid-column: 1 / 3;
        grid-row: 4;
      }

      .konjac-six-arts__item--2 {
        grid-column: 3 / 5;
        grid-row: 4;
      }

      .konjac-six-arts__item--3 {
        grid-column: 5 / 7;
        grid-row: 4;
      }

      .konjac-six-arts__item--4 {
        grid-column: 1 / 3;
        grid-row: 5;
      }

      .konjac-six-arts__item--5 {
        grid-column: 3 / 5;
        grid-row: 5;
      }

      .konjac-six-arts__item--6 {
        grid-column: 5 / 7;
        grid-row: 5;
      }

      .konjac-six-arts__active {
        grid-column: 4 / 7;
        grid-row: 2 / 4;
      }

      .lifestyle-parallax__pin {
        padding-right: clamp(18px, 4vw, 42px);
        padding-left: clamp(18px, 4vw, 42px);
      }

      .lifestyle-parallax__person {
        right: -8vw;
        width: min(66vw, 620px);
      }

      .lifestyle-parallax__copy {
        max-width: 64vw;
      }
    }

    @media (max-width: 640px) {
      .brand-anthem {
        min-height: auto;
        padding-top: 58px;
        padding-bottom: 86px;
      }

      .brand-anthem__headline {
        --headline-size: 3.35rem;
        line-height: 1.02;
      }

      .brand-anthem__line {
        gap: 2px;
      }

      .brand-anthem__copy {
        max-width: 24rem;
        line-height: 1.75;
      }

      .calorie-story.low-calorie-audience {
        padding: 64px 16px 72px;
      }

      .calorie-story.calorie-drop {
        height: 220svh;
        min-height: 1180px;
      }

      .calorie-drop__stage {
        align-items: center;
        padding: 76px 16px 62px;
      }

      .calorie-drop__before,
      .calorie-drop__after {
        right: 24px;
        left: 24px;
        max-width: none;
      }

      .calorie-drop__before {
        top: clamp(116px, 18vh, 174px);
        text-align: center;
        transform: translate3d(0, calc(var(--calorie-drop-progress) * -18px), 0);
      }

      .calorie-drop__after {
        top: auto;
        bottom: clamp(104px, 16vh, 158px);
        text-align: center;
        transform: translate3d(0, calc((1 - var(--calorie-drop-impact)) * 18px), 0);
      }

      .calorie-drop__before span,
      .calorie-drop__after span {
        display: block;
        font-size: clamp(2.15rem, 11vw, 3.4rem);
        line-height: 1.03;
      }

      .calorie-drop__number-wrap {
        gap: 10px;
      }

      .calorie-drop__number-wrap b {
        font-size: clamp(7rem, 34vw, 9.6rem);
      }

      .calorie-drop__number-wrap span {
        font-size: clamp(2.2rem, 12vw, 3.6rem);
      }

      .calorie-drop__promise {
        max-width: 22rem;
        font-size: 1.22rem;
        line-height: 1.62;
      }

      .calorie-drop__promise span {
        display: block;
      }

      .calorie-drop__progress {
        left: 16px;
        right: 16px;
        bottom: 22px;
      }

      .low-calorie-audience__inner {
        flex-direction: column;
      }

      .low-calorie-audience__lead,
      .low-calorie-audience__meter,
      .low-calorie-audience__list {
        width: 100%;
      }

      .low-calorie-audience__inner--pain .low-calorie-audience__lead,
      .low-calorie-audience__inner--pain .low-calorie-audience__list {
        width: 100%;
      }

      .low-calorie-audience__lead {
        padding: 24px;
        border-right: 1px solid rgba(33, 23, 15, 0.14);
      }

      .low-calorie-audience__lead h2 {
        font-size: 2.86rem;
        line-height: 1.03;
      }

      .low-calorie-audience__lead p:not(.section-kicker) {
        font-size: 0.94rem;
        line-height: 1.72;
      }

      .low-calorie-audience__meter {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        min-height: 0;
        gap: 10px 18px;
        padding: 22px 24px;
      }

      .low-calorie-audience__meter span {
        flex-basis: 100%;
      }

      .low-calorie-audience__meter strong {
        font-size: 5.9rem;
      }

      .low-calorie-audience__meter em {
        align-self: center;
        font-size: 2rem;
      }

      .low-calorie-audience__meter small {
        flex-basis: 100%;
      }

      .low-calorie-audience__list article {
        flex-wrap: wrap;
        padding: 20px 22px;
      }

      .low-calorie-audience__list article span {
        flex-basis: 44px;
        font-size: 1.26rem;
      }

      .low-calorie-audience__list h3 {
        font-size: 1.36rem;
      }

      .low-calorie-audience__list p {
        margin-top: 8px;
        font-size: 0.92rem;
        line-height: 1.66;
      }

      .konjac-six-arts {
        padding: 68px 16px 78px;
      }

      .konjac-six-arts__grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        background: rgba(255, 252, 245, 0.76);
      }

      .konjac-six-arts__grid::before {
        background-size: 100% 92px, 100% 92px;
      }

      .konjac-six-arts__masthead,
      .konjac-six-arts__image,
      .konjac-six-arts__active,
      .konjac-six-arts__rail {
        grid-column: 1 / -1;
        grid-row: auto;
      }

      .konjac-six-arts__masthead {
        order: 1;
        padding: 24px;
      }

      .konjac-six-arts__masthead h2 {
        margin-top: 18px;
        margin-bottom: 26px;
      }

      .konjac-six-arts__masthead h2 span {
        font-size: 1.42rem;
      }

      .konjac-six-arts__masthead h2 strong {
        font-size: 4.35rem;
      }

      .konjac-six-arts__masthead p:not(.konjac-six-arts__kicker) {
        margin-top: 0;
        font-size: 0.94rem;
        line-height: 1.72;
      }

      .konjac-six-arts__image {
        order: 2;
        aspect-ratio: 1.34;
      }

      .konjac-six-arts__image img {
        min-height: 0;
      }

      .konjac-six-arts__active {
        order: 3;
        min-height: 315px;
      }

      .konjac-six-arts__active-head strong {
        font-size: 2.8rem;
      }

      .konjac-six-arts__rail {
        --six-mobile-rail: 1;
        --six-rail-card-width: clamp(134px, 35vw, 144px);
        order: 4;
        position: relative;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--six-rail-card-width);
        gap: 10px;
        padding: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 12px;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
        border-top: 1px solid rgba(33, 23, 15, 0.12);
        background: rgba(255, 252, 245, 0.64);
        mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 48px), rgba(0, 0, 0, 0.38) calc(100% - 14px), transparent 100%);
      }

      .konjac-six-arts__rail::-webkit-scrollbar {
        display: none;
      }

      .konjac-six-arts__rail-progress {
        --six-rail-progress: 0;
        --six-rail-progress-x: 0%;
        order: 5;
        display: block;
        grid-column: 1 / -1;
        height: 22px;
        padding: 8px 12px 12px;
        background: rgba(255, 252, 245, 0.64);
      }

      .konjac-six-arts__rail-progress span {
        display: block;
        width: 42%;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, #21170f 0%, #c66a3c 100%);
        transform: translateX(var(--six-rail-progress-x));
        transform-origin: left center;
        transition: transform 120ms ease-out;
      }

      .konjac-six-arts__item {
        grid-column: auto;
        grid-row: auto;
        min-height: 148px;
        padding: 16px;
        border: 1px solid rgba(33, 23, 15, 0.12);
        scroll-snap-align: start;
      }

      .konjac-six-arts__item-title {
        font-size: 1.32rem;
      }

      .konjac-six-arts__item-brief {
        display: none;
        max-width: 100%;
      }

      .konjac-six-arts__item-bottom {
        align-items: center;
      }

      .konjac-six-arts__icon {
        width: 42px;
        height: 42px;
      }

      .konjac-six-arts__item-number {
        font-size: 2.52rem;
      }

      .flavor-freedom__copy h2 {
        --section-headline-size: 2.72rem;
        line-height: 1.08;
      }

      .lifestyle-parallax__pin {
        align-items: flex-start;
        justify-content: flex-start;
        min-height: 100svh;
        padding: 82px 18px 28px;
      }

      .lifestyle-parallax__bg {
        inset: 0;
        width: 100%;
        object-position: 33% center;
        filter: saturate(1.06) contrast(1.08) brightness(0.86);
      }

      .lifestyle-parallax__shade {
        background:
          radial-gradient(circle at 58% 58%, rgba(206, 106, 60, 0.22), transparent 32%),
          linear-gradient(180deg, rgba(18, 8, 5, 0.70) 0%, rgba(18, 8, 5, 0.26) 36%, rgba(18, 8, 5, 0.86) 100%),
          linear-gradient(90deg, rgba(18, 8, 5, 0.70) 0%, rgba(18, 8, 5, 0.28) 48%, rgba(18, 8, 5, 0.76) 100%);
      }

      .lifestyle-parallax__person {
        right: -72vw;
        bottom: -11vh;
        width: 154vw;
        opacity: 0.82;
      }

      .lifestyle-parallax__copy {
        max-width: min(100%, 26rem);
        padding-top: 0;
      }

      .lifestyle-parallax__copy h2 {
        --section-headline-size: clamp(3.5rem, 15.5vw, 4.72rem);
        max-width: 100%;
        line-height: 0.92;
      }

      .lifestyle-parallax__copy p:not(.section-kicker) {
        max-width: 18rem;
        margin-top: 18px;
        font-size: 0.98rem;
        line-height: 1.72;
      }

      .lifestyle-parallax__chips {
        gap: 8px;
        max-width: 18rem;
        margin-top: 20px;
      }

      .lifestyle-parallax__chips li {
        min-height: 34px;
        padding: 0 12px;
        font-size: 0.78rem;
      }

      .lifestyle-parallax__copy a {
        min-height: 44px;
        margin-top: 22px;
        padding: 0 16px;
        font-size: 0.9rem;
      }

      .lifestyle-parallax__proof {
        display: none;
      }
    }

    @media (min-width: 981px) and (max-width: 1180px) {
      .brand-anthem__headline {
        --headline-size: 7.8rem;
      }

      .flavor-freedom__copy h2,
      .lifestyle-parallax__copy h2 {
        --section-headline-size: 4.2rem;
      }
    }

    @media (max-width: 430px) {
      .brand-anthem__headline {
        --headline-size: 3rem;
      }

      .flavor-freedom__copy h2 {
        --section-headline-size: 2.36rem;
      }

      .brand-anthem__copy {
        font-size: 0.96rem;
      }

      .low-calorie-audience__lead h2 {
        font-size: 2.48rem;
      }

      .low-calorie-audience__meter strong {
        font-size: 5.2rem;
      }

      .konjac-six-arts__masthead h2 strong {
        font-size: 3.76rem;
      }

      .konjac-six-arts__active {
        padding: 22px;
      }

      .konjac-six-arts__active p {
        font-size: 0.94rem;
        line-height: 1.76;
      }
    }

    @media (max-width: 375px) {
      .brand-anthem__headline {
        --headline-size: 2.72rem;
      }

      .flavor-freedom__copy h2 {
        --section-headline-size: 2.14rem;
      }

      .konjac-six-arts__masthead h2 strong {
        font-size: 3.32rem;
      }

      .konjac-six-arts__item {
        padding: 18px;
      }

      .low-calorie-audience__lead h2 {
        font-size: 2.25rem;
      }

      .low-calorie-audience__list article {
        padding: 18px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .cutout-section {
        --cutout-title-progress: 1;
        --cutout-slice-progress: 1;
        --cutout-photo-progress: 1;
        --cutout-reveal-progress: 1;
        --cutout-copy-progress: 1;
        --cutout-imprint-progress: 1;
        --cutout-text-lens-progress: 0.48;
        --cutout-text-glass-progress: 1;
        --cutout-grid-y: 0px;
        --cutout-mask-pan-x: 0px;
        --cutout-mask-pan-y: 0px;
        --cutout-photo-pan-x: 0px;
        --cutout-photo-pan-y: 0px;
      }

      .cutout__meta,
      .cutout__mask-panel,
      .cutout__spell,
      .cutout__title,
      .cutout__lead,
      .cutout__photo-wrap,
      .cutout__caption {
        filter: none;
        transform: none;
      }

      .brand-anthem__line > span {
        opacity: 1;
        filter: none;
        transform: none;
      }

      .calorie-drop__stage {
        --calorie-drop-progress: 1;
        --calorie-drop-impact: 1;
      }

      .calorie-drop__number-wrap {
        animation: none !important;
        transform: none;
      }

      .konjac-six-arts__grid,
      .konjac-six-arts__item,
      .konjac-six-arts__active,
      .konjac-six-arts__image,
      .konjac-six-arts__masthead h2 {
        opacity: 1;
        clip-path: none;
        transform: none;
      }

      .konjac-six-arts__icon path,
      .konjac-six-arts__icon circle {
        stroke-dashoffset: 0;
      }

      .lifestyle-parallax__bg,
      .lifestyle-parallax__person,
      .lifestyle-parallax__copy,
      .lifestyle-parallax__copy h2 span,
      .lifestyle-parallax__copy p,
      .lifestyle-parallax__copy a,
      .lifestyle-parallax__chips li,
      .lifestyle-parallax__proof {
        opacity: 1;
        visibility: visible;
        transform: none !important;
      }
    }

    .ta04-hero {
      --ta04-paper: #f8faf1;
      --ta04-ink: #141711;
      --ta04-muted: rgba(20, 23, 17, 0.64);
      --ta04-line: rgba(20, 23, 17, 0.14);
      --ta04-accent: #83b83e;
      --ta04-signal: #ff6f3d;
      position: relative;
      overflow-x: clip;
      overflow-y: visible;
      min-height: 320svh;
      min-height: 320dvh;
      padding: 0 clamp(18px, 4vw, 58px);
      color: var(--ta04-ink);
      background:
        linear-gradient(90deg, rgba(20, 23, 17, 0.052) 1px, transparent 1px),
        linear-gradient(180deg, rgba(20, 23, 17, 0.044) 1px, transparent 1px),
        linear-gradient(180deg, #fbfcf7 0%, #f2f5e8 58%, #fff8ee 100%);
      background-size: 62px 62px, 62px 62px, auto;
      isolation: isolate;
    }

    .ta04-hero::before {
      position: absolute;
      top: clamp(96px, 11vh, 132px);
      right: -8vw;
      z-index: -1;
      width: min(58vw, 820px);
      aspect-ratio: 1;
      border: 1px solid rgba(20, 23, 17, 0.10);
      border-radius: 50%;
      box-shadow:
        inset 0 0 0 118px rgba(20, 23, 17, 0.018),
        inset 0 0 0 236px rgba(20, 23, 17, 0.024);
      content: "";
      transform: rotate(calc(var(--ta04-orbit, 0) * 1deg));
      transition: transform 620ms cubic-bezier(0.2, 0.9, 0.2, 1);
    }

    .ta04-hero__nav {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px clamp(18px, 4vw, 58px);
    }

    .ta04-hero__brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      color: var(--ta04-ink);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .ta04-hero__brand img {
      display: block;
      width: 118px;
      height: auto;
      object-fit: contain;
    }

    .ta04-hero__brand span {
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .ta04-hero__links {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.75rem;
      font-weight: 900;
      letter-spacing: 0.1em;
    }

    .ta04-hero__links a {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 14px;
      border: 1px solid var(--ta04-line);
      border-radius: 999px;
      background: rgba(248, 250, 241, 0.66);
      backdrop-filter: blur(14px);
    }

    .ta04-hero__poster {
      position: sticky;
      top: 0;
      width: min(1520px, 100%);
      min-height: 100svh;
      min-height: 100dvh;
      height: 100svh;
      height: 100dvh;
      overflow: hidden;
      margin: 0 auto;
      padding: clamp(82px, 9vh, 108px) 0 clamp(14px, 2.4vh, 24px);
    }

    .ta04-hero__note {
      position: absolute;
      top: clamp(118px, 15vh, 152px);
      z-index: 8;
      margin: 0;
      color: rgba(20, 23, 17, 0.78);
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1.18;
      letter-spacing: 0.01em;
    }

    .ta04-hero__note--left {
      left: 0;
    }

    .ta04-hero__note--center {
      left: 40%;
    }

    .ta04-hero__note--right {
      right: 0;
      text-align: right;
    }

    .ta04-hero__title {
      position: absolute;
      top: clamp(158px, 23vh, 214px);
      left: max(-4px, -0.4vw);
      z-index: 2;
      margin: 0;
      color: rgba(20, 23, 17, 0.94);
      font-family: "Noto Serif TC", "Songti TC", serif;
      font-size: clamp(7.6rem, 13.6vw, 14.2rem);
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
      pointer-events: none;
      white-space: nowrap;
    }

    .ta04-hero__title span {
      display: inline-block;
    }

    .ta04-hero__stage {
      position: absolute;
      top: 15%;
      right: 8%;
      bottom: 15%;
      left: 28%;
      z-index: 4;
      pointer-events: none;
    }

    .ta04-hero__sample-card {
      position: absolute;
      inset: 8% 4% 0 2%;
      border: 1px solid var(--ta04-line);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(238, 242, 226, 0.48)),
        repeating-linear-gradient(0deg, rgba(20, 23, 17, 0.03) 0 1px, transparent 1px 34px);
      box-shadow: 0 26px 72px rgba(20, 23, 17, 0.12);
    }

    .ta04-hero__sample-card::before,
    .ta04-hero__sample-card::after {
      position: absolute;
      content: "";
      pointer-events: none;
    }

    .ta04-hero__sample-card::before {
      inset: 9% 15% 12% 18%;
      z-index: 1;
      border: 1px dashed rgba(20, 23, 17, 0.18);
      border-radius: 50%;
    }

    .ta04-hero__sample-card::after {
      left: 50%;
      bottom: 11%;
      z-index: 2;
      width: 68%;
      height: 14%;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(20, 23, 17, 0.18), transparent 72%);
      filter: blur(12px);
      transform: translateX(-50%);
    }

    .ta04-hero__sample-meta {
      position: absolute;
      top: 18px;
      left: 18px;
      right: 18px;
      z-index: 7;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: rgba(20, 23, 17, 0.68);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .ta04-hero__sample-meta span {
      white-space: nowrap;
    }

    .ta04-hero__sample-meta strong {
      color: var(--ta04-ink);
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1rem, 1.45vw, 1.32rem);
      letter-spacing: 0;
      text-transform: none;
      white-space: nowrap;
    }

    .ta04-hero__plate {
      position: absolute;
      inset: -22% -24% -24% -22%;
      z-index: 5;
      overflow: visible;
    }

    .ta04-hero__noodle {
      position: absolute;
      left: 52%;
      top: 55%;
      width: min(84vw, 1180px);
      max-width: none;
      height: auto;
      opacity: 0;
      mix-blend-mode: multiply;
      object-fit: contain;
      transform: translate3d(-50%, -50%, 0) rotate(-4deg) scale(0.9);
      transform-origin: center;
      filter: drop-shadow(0 32px 28px rgba(20, 23, 17, 0.20));
      transition: opacity 360ms ease, transform 680ms cubic-bezier(0.2, 0.9, 0.2, 1), filter 420ms ease;
    }

    .ta04-hero__noodle.is-active {
      opacity: 1;
      transform: translate3d(-50%, -50%, 0) rotate(var(--ta04-noodle-rotate, -2deg)) scale(1.03);
      filter: drop-shadow(0 40px 34px rgba(20, 23, 17, 0.24));
    }

    .ta04-hero__plate-caption {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 14px;
      z-index: 7;
      display: flex;
      justify-content: center;
      min-height: 30px;
      padding: 7px 10px 0;
      border-top: 1px solid var(--ta04-line);
      color: rgba(20, 23, 17, 0.60);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-align: center;
    }

    .ta04-hero__copy {
      position: absolute;
      left: 0;
      bottom: clamp(92px, 12vh, 126px);
      z-index: 9;
      width: min(430px, 31vw);
    }

    .ta04-hero__eyebrow {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      margin: 0 0 12px;
      padding: 0 10px;
      border-left: 4px solid var(--ta04-accent);
      background: rgba(255, 255, 255, 0.58);
      color: rgba(20, 23, 17, 0.76);
      font-size: 0.74rem;
      font-weight: 900;
      letter-spacing: 0.13em;
    }

    .ta04-hero__statement {
      margin: 0;
      color: var(--ta04-ink);
      font-family: "Noto Serif TC", "Songti TC", serif;
      font-size: clamp(2.2rem, 3.15vw, 3.9rem);
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: 0;
    }

    .ta04-hero__summary {
      max-width: 31rem;
      margin: 14px 0 0;
      color: var(--ta04-muted);
      font-size: clamp(0.94rem, 1.02vw, 1.05rem);
      font-weight: 700;
      line-height: 1.74;
    }

    .ta04-hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }

    .ta04-hero__button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 17px;
      border: 1px solid var(--ta04-line);
      border-radius: 0;
      color: var(--ta04-ink);
      font-size: 0.88rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .ta04-hero__button--primary {
      border-color: var(--ta04-ink);
      background: var(--ta04-ink);
      color: var(--ta04-paper);
    }

    .ta04-hero__button--secondary {
      background: rgba(255, 255, 255, 0.50);
    }

    .ta04-hero__proof {
      position: absolute;
      top: clamp(232px, 32vh, 318px);
      right: 0;
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: clamp(142px, 13vw, 184px);
    }

    .ta04-hero__proof-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-height: 92px;
      padding: 12px;
      border: 1px solid var(--ta04-line);
      background: rgba(255, 255, 255, 0.62);
      backdrop-filter: blur(10px);
    }

    .ta04-hero__proof-card--dark {
      border-color: var(--ta04-ink);
      background: var(--ta04-ink);
      color: var(--ta04-paper);
    }

    .ta04-hero__proof-card span,
    .ta04-hero__proof-card b {
      display: block;
      color: currentColor;
      font-size: 0.62rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0.72;
    }

    .ta04-hero__proof-card span {
      align-self: flex-start;
    }

    .ta04-hero__proof-card strong {
      display: block;
      margin: 8px 0 0;
      font-family: "Playfair Display", Georgia, serif;
      font-size: clamp(3.1rem, 5vw, 4.7rem);
      line-height: 0.9;
    }

    .ta04-hero__proof-card b {
      align-self: end;
      padding-bottom: 0.28em;
      text-align: right;
    }

    .ta04-hero__proof-text {
      padding: 12px;
      border-left: 4px solid var(--ta04-signal);
      background: rgba(255, 255, 255, 0.58);
      color: var(--ta04-muted);
      font-size: 0.78rem;
      font-weight: 800;
      line-height: 1.62;
      backdrop-filter: blur(10px);
    }

    .ta04-hero__proof-text p {
      margin: 0;
    }

    .ta04-hero__selector {
      position: absolute;
      right: 6%;
      bottom: calc(clamp(20px, 3.5vh, 38px) + 66px);
      left: 34%;
      z-index: 12;
      display: flex;
      gap: 8px;
      max-width: 620px;
    }

    .ta04-hero__tab {
      position: relative;
      display: inline-flex;
      flex: 0 1 136px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
      padding: 0 13px;
      border: 1px solid rgba(20, 23, 17, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.52);
      color: rgba(20, 23, 17, 0.66);
      font: inherit;
      text-align: center;
      cursor: pointer;
      backdrop-filter: blur(12px);
      transition: flex-basis 260ms ease, border-color 260ms ease, background 260ms ease, color 260ms ease, transform 260ms ease;
    }

    .ta04-hero__tab::before {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ta04-signal);
      content: "";
      opacity: 0.62;
      transform: scale(0.86);
      transition: opacity 260ms ease, transform 260ms ease;
    }

    .ta04-hero__tab span {
      color: currentColor;
      font-family: "Playfair Display", Georgia, serif;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1;
    }

    .ta04-hero__tab strong {
      color: currentColor;
      font-size: 0.84rem;
      font-weight: 900;
      line-height: 1;
    }

    .ta04-hero__tab.is-active {
      flex-basis: 166px;
      border-color: var(--ta04-ink);
      background: var(--ta04-ink);
      color: var(--ta04-paper);
      transform: translateY(-2px);
    }

    .ta04-hero__tab.is-active::before {
      opacity: 1;
      transform: scale(1.18);
    }

    .ta04-hero__tab:focus-visible {
      outline: 2px solid var(--ta04-signal);
      outline-offset: 3px;
    }

    @media (max-width: 1180px) {
      .ta04-hero__note {
        display: none;
      }

      .ta04-hero__title {
        top: clamp(142px, 21vh, 190px);
        font-size: clamp(6.6rem, 13vw, 10.6rem);
      }

      .ta04-hero__stage {
        left: 26%;
        right: 8%;
        top: 16%;
        bottom: 18%;
      }

      .ta04-hero__copy {
        width: min(390px, 36vw);
      }

      .ta04-hero__proof {
        top: clamp(202px, 28vh, 282px);
        width: 132px;
      }

      .ta04-hero__proof-text {
        display: none;
      }

      .ta04-hero__selector {
        left: 36%;
        right: 2%;
      }
    }

    @media (max-width: 900px) {
      .ta04-hero__title {
        color: rgba(20, 23, 17, 0.82);
        font-size: clamp(5.4rem, 14vw, 8rem);
      }

      .ta04-hero__stage {
        left: 22%;
        right: 0;
      }

      .ta04-hero__copy {
        width: min(360px, 43vw);
      }

      .ta04-hero__summary {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
      }

      .ta04-hero__proof {
        right: -4px;
      }
    }

    @media (max-width: 760px) {
      .ta04-hero {
        min-height: 320svh;
        min-height: 320dvh;
        padding: 0 16px;
      }

      .ta04-hero::before {
        top: 76px;
        right: -42vw;
        width: 105vw;
      }

      .ta04-hero__nav {
        padding: 12px 16px;
      }

      .ta04-hero__brand img {
        width: 92px;
      }

      .ta04-hero__brand span,
      .ta04-hero__links {
        display: none;
      }

      .ta04-hero__poster {
        display: flex;
        flex-direction: column;
        min-height: 100svh;
        min-height: 100dvh;
        height: 100svh;
        height: 100dvh;
        padding: 62px 0 12px;
      }

      .ta04-hero__title {
        top: 76px;
        left: 0;
        z-index: 2;
        max-width: calc(100% - 156px);
        color: rgba(20, 23, 17, 0.86);
        font-size: clamp(4.45rem, 21vw, 5.45rem);
        line-height: 1;
      }

      .ta04-hero__stage {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        z-index: 5;
        flex: 0 0 auto;
        height: min(35dvh, 330px);
        min-height: 284px;
        margin: 104px -12px 0;
        order: 1;
      }

      .ta04-hero__sample-card {
        inset: 10% 4% 2% 3%;
      }

      .ta04-hero__sample-card::before {
        inset: 12% 8% 12% 8%;
      }

      .ta04-hero__sample-meta {
        top: 12px;
        left: 12px;
        right: 12px;
        font-size: 0.6rem;
        letter-spacing: 0.11em;
      }

      .ta04-hero__sample-meta strong {
        max-width: 8.2rem;
        overflow: hidden;
        font-size: 0.86rem;
        text-overflow: ellipsis;
      }

      .ta04-hero__plate {
        inset: -27% -38% -28% -36%;
      }

      .ta04-hero__noodle {
        left: 52%;
        top: 54%;
        width: min(176vw, 760px);
      }

      .ta04-hero__noodle.is-active {
        transform: translate3d(-50%, -50%, 0) rotate(var(--ta04-noodle-rotate, -2deg)) scale(1.04);
      }

      .ta04-hero__plate-caption {
        right: 12px;
        bottom: 8px;
        left: 12px;
        min-height: 24px;
        padding-top: 6px;
        font-size: 0.58rem;
        letter-spacing: 0.04em;
      }

      .ta04-hero__copy {
        position: relative;
        bottom: auto;
        left: auto;
        z-index: 9;
        width: 100%;
        margin-top: 4px;
        order: 2;
      }

      .ta04-hero__eyebrow {
        min-height: 28px;
        margin-bottom: 8px;
        padding: 0 8px;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
      }

      .ta04-hero__statement {
        font-size: clamp(2rem, 10.4vw, 2.8rem);
        line-height: 1.08;
      }

      .ta04-hero__summary {
        display: -webkit-box;
        overflow: hidden;
        margin-top: 8px;
        color: rgba(20, 23, 17, 0.68);
        font-size: 0.87rem;
        line-height: 1.58;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .ta04-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
      }

      .ta04-hero__button {
        min-height: 42px;
        padding: 0 9px;
        font-size: 0.76rem;
        letter-spacing: 0.02em;
      }

      .ta04-hero__proof {
        top: 78px;
        right: 0;
        z-index: 11;
        gap: 4px;
        width: 136px;
      }

      .ta04-hero__proof-card {
        min-height: 62px;
        padding: 7px;
      }

      .ta04-hero__proof-card span,
      .ta04-hero__proof-card b {
        font-size: 0.46rem;
        letter-spacing: 0.08em;
      }

      .ta04-hero__proof-card strong {
        margin: 5px 0 0;
        font-size: 2rem;
        line-height: 0.95;
      }

      .ta04-hero__proof-card b {
        padding-bottom: 0.18em;
      }

      .ta04-hero__proof-text {
        display: none;
      }

      .ta04-hero__selector {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        display: flex;
        flex-wrap: wrap;
        flex: 0 0 auto;
        gap: 6px;
        width: 100%;
        max-width: none;
        margin-top: 10px;
        order: 3;
      }

      .ta04-hero__tab,
      .ta04-hero__tab.is-active {
        flex: 1 1 0;
        min-width: 0;
        min-height: 38px;
        padding: 0 7px;
        transform: none;
      }

      .ta04-hero__tab {
        gap: 6px;
      }

      .ta04-hero__tab span {
        font-size: 0.88rem;
      }

      .ta04-hero__tab strong {
        font-size: 0.76rem;
      }
    }

    @media (max-width: 390px) {
      .ta04-hero__stage {
        height: 34dvh;
        min-height: 258px;
        margin-top: 94px;
      }

      .ta04-hero__statement {
        font-size: clamp(1.92rem, 10vw, 2.46rem);
      }

      .ta04-hero__summary {
        font-size: 0.83rem;
      }

      .ta04-hero__button {
        font-size: 0.7rem;
      }
    }

    @media (max-width: 760px) and (max-height: 740px) {
      .ta04-hero__stage {
        height: 33dvh;
        min-height: 232px;
        margin-top: 88px;
      }

      .ta04-hero__summary {
        -webkit-line-clamp: 2;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .ta04-hero,
      .ta04-hero *,
      .ta04-hero *::before,
      .ta04-hero *::after {
        animation: none !important;
        transition-duration: 1ms !important;
      }
    }

    .rice-hero {
      --rice-ink: #23150e;
      --rice-muted: #725d48;
      --rice-cream: #f4ead8;
      --rice-paper: rgba(255, 249, 238, 0.88);
      --rice-line: rgba(60, 38, 23, 0.16);
      --rice-red: #6f1e17;
      --rice-gold: #b9853c;
      position: relative;
      min-height: 100svh;
      overflow: hidden;
      isolation: isolate;
      color: var(--rice-ink);
      background:
        radial-gradient(circle at 82% 18%, rgba(111, 30, 23, 0.18), transparent 30%),
        linear-gradient(115deg, #f7eddc 0%, #ead4ad 48%, #1a1210 49%, #0a0908 100%);
    }

    .rice-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(90deg, rgba(58, 37, 21, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(58, 37, 21, 0.035) 1px, transparent 1px);
      background-size: 86px 86px;
      opacity: 0.72;
      pointer-events: none;
    }

    .rice-hero::after {
      content: "RICE";
      position: absolute;
      right: -0.08em;
      bottom: -0.18em;
      z-index: -1;
      color: rgba(255, 245, 226, 0.08);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: clamp(8rem, 28vw, 27rem);
      font-weight: 900;
      line-height: 0.78;
      pointer-events: none;
    }

    .rice-hero__nav {
      position: absolute;
      top: clamp(16px, 2.2vw, 30px);
      right: clamp(18px, 4vw, 64px);
      left: clamp(18px, 4vw, 64px);
      z-index: 8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .rice-hero__brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: inherit;
      text-decoration: none;
    }

    .rice-hero__brand img {
      width: clamp(104px, 9vw, 148px);
      height: auto;
      display: block;
      filter: drop-shadow(0 8px 16px rgba(65, 38, 18, 0.12));
    }

    .rice-hero__brand span,
    .rice-hero__links a,
    .rice-hero__eyebrow,
    .rice-hero__proof span,
    .rice-hero__variant-card p,
    .rice-hero__ingredient-copy span,
    .rice-hero__tab span {
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .rice-hero__brand span {
      color: rgba(35, 21, 14, 0.66);
    }

    .rice-hero__links {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(10px, 2vw, 24px);
    }

    .rice-hero__links a {
      color: rgba(255, 249, 238, 0.78);
      text-decoration: none;
    }

    .rice-hero__layout {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: clamp(38px, 5vw, 88px);
      width: min(1480px, calc(100vw - 48px));
      min-height: 100svh;
      margin: 0 auto;
      padding: clamp(92px, 10vh, 132px) 0 clamp(36px, 6vh, 70px);
    }

    .rice-hero__copy {
      flex: 1 1 560px;
      max-width: 650px;
      min-width: 0;
    }

    .rice-hero__eyebrow {
      margin: 0 0 14px;
      color: var(--rice-red);
    }

    .rice-hero__title {
      display: flex;
      flex-direction: column;
      gap: 0.02em;
      margin: 0;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(4.2rem, 7.5vw, 7.2rem);
      font-weight: 900;
      line-height: 0.86;
      letter-spacing: 0;
    }

    .rice-hero__title span {
      display: block;
      white-space: nowrap;
    }

    .rice-hero__lead {
      max-width: 540px;
      margin: clamp(18px, 2.4vw, 30px) 0 0;
      color: var(--rice-muted);
      font-size: clamp(1.02rem, 1.36vw, 1.24rem);
      font-weight: 800;
      line-height: 1.86;
    }

    .rice-hero__proofs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      max-width: 610px;
      margin-top: clamp(22px, 3vw, 38px);
    }

    .rice-hero__proof {
      flex: 1 1 160px;
      min-height: 92px;
      padding: 16px 18px;
      border: 1px solid var(--rice-line);
      border-radius: 8px;
      background: rgba(255, 249, 238, 0.62);
      box-shadow: 0 22px 70px rgba(83, 48, 20, 0.12);
    }

    .rice-hero__proof span {
      display: block;
      color: rgba(35, 21, 14, 0.48);
    }

    .rice-hero__proof strong {
      display: block;
      margin-top: 8px;
      color: var(--rice-ink);
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(1.28rem, 1.8vw, 1.76rem);
      line-height: 1.04;
      letter-spacing: 0;
    }

    .rice-hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: clamp(24px, 3.6vw, 42px);
    }

    .rice-hero__button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 0 22px;
      border: 1px solid rgba(35, 21, 14, 0.18);
      border-radius: 999px;
      font-size: 0.92rem;
      font-weight: 900;
      line-height: 1;
      text-decoration: none;
      transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
    }

    .rice-hero__button:hover,
    .rice-hero__button:focus-visible {
      transform: translateY(-2px);
    }

    .rice-hero__button--primary {
      color: #fff8ed;
      background: #27160f;
      border-color: #27160f;
      box-shadow: 0 18px 46px rgba(39, 22, 15, 0.24);
    }

    .rice-hero__button--secondary {
      color: var(--rice-ink);
      background: rgba(255, 249, 238, 0.54);
    }

    .rice-hero__visual {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      min-width: 0;
      padding: 0 clamp(0px, 2vw, 20px);
    }

    .rice-hero__photo-frame {
      position: relative;
      width: min(100%, 580px);
      aspect-ratio: 3 / 4;
      overflow: hidden;
      border: 1px solid rgba(255, 244, 224, 0.16);
      border-radius: 8px;
      background: #090807;
      box-shadow: 0 46px 120px rgba(0, 0, 0, 0.42);
    }

    .rice-hero__photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center bottom;
      opacity: 0;
      transform: scale(1.045);
      transition: opacity 420ms ease, transform 640ms ease;
    }

    .rice-hero__photo.is-active {
      opacity: 1;
      transform: scale(1);
    }

    .rice-hero__variant-card {
      position: absolute;
      right: 20px;
      bottom: 20px;
      left: 20px;
      z-index: 2;
      max-width: 360px;
      padding: 18px 20px;
      border: 1px solid rgba(255, 248, 236, 0.28);
      border-radius: 8px;
      color: #fff8ed;
      background: rgba(18, 12, 9, 0.62);
      backdrop-filter: blur(18px);
    }

    .rice-hero__variant-card p,
    .rice-hero__variant-card h2,
    .rice-hero__variant-card span {
      margin: 0;
    }

    .rice-hero__variant-card p {
      color: rgba(255, 232, 191, 0.74);
    }

    .rice-hero__variant-card h2 {
      margin-top: 8px;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(1.44rem, 2vw, 2rem);
      line-height: 1.08;
      letter-spacing: 0;
    }

    .rice-hero__variant-card span {
      display: block;
      margin-top: 10px;
      color: rgba(255, 248, 236, 0.76);
      font-size: 0.92rem;
      font-weight: 800;
      line-height: 1.5;
    }

    .rice-hero__ingredient {
      position: absolute;
      display: none;
      bottom: clamp(24px, 5vw, 56px);
      left: clamp(-80px, -5vw, -34px);
      z-index: 4;
      width: min(360px, 45%);
      overflow: hidden;
      border: 1px solid rgba(255, 248, 236, 0.32);
      border-radius: 8px;
      background: var(--rice-paper);
      box-shadow: 0 26px 72px rgba(0, 0, 0, 0.28);
    }

    .rice-hero__ingredient-image {
      width: 100%;
      height: 150px;
      display: none;
      object-fit: cover;
      object-position: center;
    }

    .rice-hero__ingredient-image.is-active {
      display: block;
    }

    .rice-hero__ingredient-copy {
      padding: 14px 16px 16px;
    }

    .rice-hero__ingredient-copy span {
      display: block;
      color: var(--rice-red);
    }

    .rice-hero__ingredient-copy p {
      margin: 8px 0 0;
      color: var(--rice-ink);
      font-size: 0.88rem;
      font-weight: 800;
      line-height: 1.62;
    }

    .rice-hero__switch {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      width: min(100%, 580px);
      margin-top: 14px;
    }

    .rice-hero__tab {
      display: flex;
      flex: 1 1 240px;
      align-items: center;
      gap: 10px;
      min-height: 58px;
      padding: 10px 14px;
      border: 1px solid rgba(255, 248, 236, 0.22);
      border-radius: 8px;
      color: rgba(255, 248, 236, 0.7);
      text-align: left;
      background: rgba(255, 248, 236, 0.08);
      cursor: pointer;
      transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
    }

    .rice-hero__tab:hover,
    .rice-hero__tab:focus-visible,
    .rice-hero__tab.is-active {
      color: #fff8ed;
      border-color: rgba(255, 232, 191, 0.5);
      background: rgba(111, 30, 23, 0.55);
      transform: translateY(-2px);
      outline: none;
    }

    .rice-hero__tab span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border: 1px solid currentColor;
      border-radius: 999px;
    }

    .rice-hero__tab strong {
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: 0.94rem;
      font-weight: 900;
      letter-spacing: 0;
      line-height: 1.25;
    }

    @media (max-width: 1080px) {
      .rice-hero {
        background:
          radial-gradient(circle at 78% 8%, rgba(111, 30, 23, 0.16), transparent 32%),
          linear-gradient(180deg, #f7eddc 0%, #edd9ba 52%, #120e0c 52%, #090807 100%);
      }

      .rice-hero__layout {
        flex-direction: column;
        gap: 32px;
        min-height: auto;
        padding-top: 104px;
      }

      .rice-hero__copy {
        max-width: 760px;
      }

      .rice-hero__visual {
        padding: 0;
      }

      .rice-hero__ingredient {
        left: 16px;
        width: min(330px, 44%);
      }
    }

    @media (max-width: 760px) {
      .rice-hero {
        min-height: auto;
        background:
          radial-gradient(circle at 80% 10%, rgba(111, 30, 23, 0.12), transparent 34%),
          linear-gradient(180deg, #f6ead7 0%, #eddbc0 54%, #130e0c 54%, #090807 100%);
      }

      .rice-hero::after {
        right: -0.16em;
        bottom: 28%;
        font-size: 10rem;
        color: rgba(35, 21, 14, 0.045);
      }

      .rice-hero__nav {
        top: 16px;
        right: 18px;
        left: 18px;
      }

      .rice-hero__brand img {
        width: 112px;
      }

      .rice-hero__brand span,
      .rice-hero__links {
        display: none;
      }

      .rice-hero__layout {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        padding: 84px 18px 28px;
      }

      .rice-hero__eyebrow {
        margin-bottom: 10px;
        font-size: 0.68rem;
      }

      .rice-hero__title {
        font-size: clamp(4rem, 18vw, 5.4rem);
        line-height: 0.9;
      }

      .rice-hero__lead {
        max-width: none;
        margin-top: 18px;
        font-size: 1rem;
        line-height: 1.72;
      }

      .rice-hero__proofs {
        gap: 8px;
        margin-top: 18px;
      }

      .rice-hero__proof {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 54px;
        padding: 12px 14px;
      }

      .rice-hero__proof strong {
        margin-top: 0;
        font-size: 1.12rem;
        text-align: right;
      }

      .rice-hero__actions {
        gap: 8px;
        margin-top: 18px;
      }

      .rice-hero__button {
        flex: 1 1 150px;
        min-height: 46px;
        padding: 0 16px;
        font-size: 0.84rem;
      }

      .rice-hero__photo-frame {
        width: 100%;
        max-width: 440px;
        aspect-ratio: 4 / 5;
      }

      .rice-hero__variant-card {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 14px 15px;
      }

      .rice-hero__variant-card h2 {
        font-size: 1.32rem;
      }

      .rice-hero__variant-card span {
        font-size: 0.82rem;
      }

      .rice-hero__ingredient {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        max-width: 440px;
        margin-top: 12px;
      }

      .rice-hero__ingredient-image {
        height: 112px;
      }

      .rice-hero__ingredient-copy p {
        font-size: 0.82rem;
      }

      .rice-hero__switch {
        flex-direction: column;
        width: 100%;
        max-width: 440px;
        gap: 8px;
        margin-top: 12px;
      }

      .rice-hero__tab {
        min-height: 50px;
        padding: 8px 10px;
      }
    }

    @media (max-width: 390px) {
      .rice-hero__layout {
        padding-right: 14px;
        padding-left: 14px;
      }

      .rice-hero__title {
        font-size: clamp(3.5rem, 17vw, 4.7rem);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .rice-hero,
      .rice-hero *,
      .rice-hero *::before,
      .rice-hero *::after {
        transition-duration: 1ms !important;
      }
    }

    @media (min-width: 768px) {
      body:has(.rice-hero) .tasteae-floating-shop {
        right: clamp(18px, 3vw, 48px);
        left: auto;
        transform: none;
      }

      body:has(.rice-hero) .tasteae-floating-shop:hover {
        transform: translate3d(0, -3px, 0);
      }
    }

    .rice-hero--fusion {
      --fusion-ink: #21130d;
      --fusion-red: #681b17;
      --fusion-gold: #b9863d;
      --fusion-glass: rgba(255, 255, 255, 0.58);
      min-height: 100svh;
      color: var(--fusion-ink);
      background:
        radial-gradient(circle at 64% 47%, rgba(255, 255, 255, 0.82) 0 8%, transparent 18%),
        radial-gradient(circle at 78% 22%, rgba(104, 27, 23, 0.16), transparent 31%),
        linear-gradient(90deg, rgba(62, 39, 21, 0.038) 1px, transparent 1px),
        linear-gradient(180deg, rgba(62, 39, 21, 0.03) 1px, transparent 1px),
        linear-gradient(135deg, #fff6e8 0%, #f1dfbd 52%, #e2c186 100%);
      background-size: auto, auto, 86px 86px, 86px 86px, auto;
    }

    .rice-hero--fusion::after {
      content: "CRYSTAL RICE";
      right: -0.18em;
      bottom: -0.08em;
      z-index: 0;
      color: rgba(104, 27, 23, 0.06);
      font-size: clamp(6.8rem, 20vw, 22rem);
      text-align: right;
    }

    .rice-hero__fusion-shell {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: clamp(28px, 4vw, 78px);
      width: min(1500px, calc(100vw - 48px));
      min-height: 100svh;
      margin: 0 auto;
      padding: clamp(104px, 12vh, 150px) 0 clamp(34px, 6vh, 72px);
    }

    .rice-hero--fusion .rice-hero__copy {
      position: relative;
      z-index: 8;
      flex: 1 1 560px;
      max-width: 690px;
      min-width: 0;
    }

    .rice-hero--fusion .rice-hero__eyebrow {
      margin-bottom: 12px;
      color: var(--fusion-red);
      animation: riceTextDrop 620ms cubic-bezier(.16, 1, .3, 1) both;
    }

    .rice-hero--fusion .rice-hero__title {
      gap: 0;
      font-size: clamp(4.7rem, 8.2vw, 8.9rem);
      line-height: 0.87;
      transform-origin: left center;
      animation: riceTitlePop 720ms 360ms cubic-bezier(.16, 1.2, .32, 1) both;
    }

    .rice-hero--fusion .rice-hero__title span:last-child {
      color: var(--fusion-red);
    }

    .rice-hero--fusion .rice-hero__lead {
      max-width: 560px;
      color: rgba(33, 19, 13, 0.72);
      animation: riceTextDrop 620ms 520ms cubic-bezier(.16, 1, .3, 1) both;
    }

    .rice-hero--fusion .rice-hero__proofs {
      display: flex;
      flex-wrap: wrap;
      max-width: 650px;
      animation: riceChipRise 680ms 720ms cubic-bezier(.16, 1, .3, 1) both;
    }

    .rice-hero--fusion .rice-hero__proof {
      flex: 1 1 180px;
      min-height: 86px;
      border-color: rgba(104, 27, 23, 0.14);
      background: rgba(255, 250, 242, 0.68);
      backdrop-filter: blur(10px);
    }

    .rice-hero--fusion .rice-hero__proof strong {
      color: var(--fusion-ink);
      font-size: clamp(1.22rem, 1.7vw, 1.7rem);
    }

    .rice-hero--fusion .rice-hero__actions {
      animation: riceChipRise 680ms 820ms cubic-bezier(.16, 1, .3, 1) both;
    }

    .rice-hero--fusion .rice-hero__button--primary {
      background: var(--fusion-red);
      border-color: var(--fusion-red);
      box-shadow: 0 20px 54px rgba(104, 27, 23, 0.24);
    }

    .rice-hero__collision {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }

    .rice-hero__beam {
      position: absolute;
      top: 47%;
      width: min(34vw, 460px);
      height: 2px;
      opacity: 0;
      filter: blur(0.2px);
      transform-origin: center;
    }

    .rice-hero__beam--crystal {
      left: 38%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
      animation: riceCrystalBeam 1100ms 160ms ease-out both;
    }

    .rice-hero__beam--thai {
      right: 18%;
      background: linear-gradient(90deg, transparent, rgba(104, 27, 23, 0.42), transparent);
      animation: riceThaiBeam 1100ms 220ms ease-out both;
    }

    .rice-hero__impact {
      position: absolute;
      top: 47%;
      left: 62%;
      width: clamp(92px, 14vw, 220px);
      aspect-ratio: 1;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 12%, rgba(255, 255, 255, 0.5) 13% 28%, rgba(236, 193, 105, 0.22) 29% 45%, transparent 60%);
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.2);
      animation: riceImpactPulse 1000ms 480ms cubic-bezier(.16, 1, .3, 1) both;
    }

    .rice-hero__fusion-label {
      position: absolute;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 13px;
      border: 1px solid rgba(45, 27, 14, 0.12);
      border-radius: 999px;
      background: rgba(255, 252, 246, 0.72);
      box-shadow: 0 14px 32px rgba(80, 45, 18, 0.12);
      color: rgba(33, 19, 13, 0.7);
      font-size: 0.82rem;
      font-weight: 900;
      backdrop-filter: blur(12px);
    }

    .rice-hero__fusion-label--crystal {
      top: 42%;
      left: 48%;
      animation: riceLabelInLeft 780ms 230ms cubic-bezier(.16, 1, .3, 1) both;
    }

    .rice-hero__fusion-label--thai {
      top: 51%;
      right: 15%;
      animation: riceLabelInRight 780ms 300ms cubic-bezier(.16, 1, .3, 1) both;
    }

    .rice-hero__grain {
      position: absolute;
      top: calc(39% + (var(--grain-index) % 6) * 3.1%);
      width: calc(8px + (var(--grain-index) % 4) * 2px);
      height: calc(14px + (var(--grain-index) % 5) * 2px);
      border-radius: 999px;
      opacity: 0;
      transform: rotate(calc((var(--grain-index) - 8) * 12deg));
    }

    .rice-hero__grain--crystal {
      left: calc(36% + (var(--grain-index) % 4) * 2.4%);
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(225, 236, 232, 0.45));
      border: 1px solid rgba(255, 255, 255, 0.74);
      box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.8);
      animation: riceCrystalGrain 980ms calc(120ms + var(--grain-index) * 22ms) cubic-bezier(.16, 1, .3, 1) both;
    }

    .rice-hero__grain--thai {
      right: calc(19% + (var(--grain-index) % 5) * 2.2%);
      background: linear-gradient(135deg, rgba(191, 143, 68, 0.9), rgba(104, 27, 23, 0.68));
      box-shadow: 0 2px 8px rgba(104, 27, 23, 0.2);
      animation: riceThaiGrain 980ms calc(160ms + var(--grain-index) * 20ms) cubic-bezier(.16, 1, .3, 1) both;
    }

    .rice-hero--fusion .rice-hero__visual {
      position: relative;
      z-index: 6;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      flex: 1 1 560px;
      padding: 0;
    }

    .rice-hero__pop-stage {
      position: relative;
      width: min(760px, 50vw);
      height: min(760px, 58vw);
      min-height: 560px;
      overflow: visible;
    }

    .rice-hero__shadow {
      position: absolute;
      right: 10%;
      bottom: 7%;
      left: 8%;
      height: 14%;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(63, 32, 16, 0.28), transparent 70%);
      filter: blur(10px);
      opacity: 0;
      transform: scale(0.6);
      animation: riceShadowPop 900ms 560ms cubic-bezier(.16, 1.2, .32, 1) both;
    }

    .rice-hero__pop-ring {
      position: absolute;
      left: 50%;
      bottom: 28%;
      z-index: 1;
      width: 44%;
      aspect-ratio: 1;
      border: 1px solid rgba(104, 27, 23, 0.18);
      border-radius: 50%;
      opacity: 0;
      transform: translate(-50%, 50%) scale(0.2);
      pointer-events: none;
    }

    .rice-hero__pop-ring--one {
      animation: riceRingPop 1000ms 540ms ease-out both;
    }

    .rice-hero__pop-ring--two {
      width: 62%;
      animation: riceRingPop 1120ms 600ms ease-out both;
    }

    .rice-hero__bowl {
      position: absolute;
      left: 50%;
      bottom: -18%;
      z-index: 2;
      width: min(760px, 58vw);
      max-width: none;
      height: auto;
      display: block;
      opacity: 0.24;
      filter: saturate(0.96) contrast(1.02);
      transform: translate3d(-50%, 6%, 0) scale(0.78) rotate(-3deg);
      transform-origin: 50% 74%;
      transition: opacity 260ms ease, filter 260ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1);
      will-change: transform, opacity;
    }

    .rice-hero__bowl--blackberry {
      transform: translate3d(-38%, -7%, 0) scale(0.68) rotate(4deg);
    }

    .rice-hero__bowl.is-active {
      z-index: 4;
      opacity: 1;
      filter: saturate(1.03) contrast(1.04) drop-shadow(0 34px 48px rgba(56, 31, 16, 0.2));
      animation: riceBowlPop 920ms 520ms cubic-bezier(.16, 1.2, .32, 1) both;
    }

    .rice-hero__bowl--blackberry.is-active {
      animation-name: riceBowlPopBlack;
    }

    .rice-hero--fusion.is-rice-impacting .rice-hero__impact {
      animation: riceImpactPulse 760ms cubic-bezier(.16, 1, .3, 1) both;
    }

    .rice-hero--fusion.is-rice-impacting .rice-hero__pop-ring--one,
    .rice-hero--fusion.is-rice-impacting .rice-hero__pop-ring--two {
      animation: riceRingPop 760ms ease-out both;
    }

    .rice-hero--fusion.is-rice-impacting .rice-hero__bowl.is-active {
      animation-delay: 0ms;
    }

    .rice-hero--fusion .rice-hero__variant-card {
      position: relative;
      right: auto;
      bottom: auto;
      left: auto;
      z-index: 8;
      width: min(100%, 560px);
      max-width: none;
      color: var(--fusion-ink);
      background: rgba(255, 250, 242, 0.76);
      border-color: rgba(104, 27, 23, 0.14);
      box-shadow: 0 24px 70px rgba(83, 48, 20, 0.13);
      backdrop-filter: blur(16px);
    }

    .rice-hero--fusion .rice-hero__variant-card p:first-child {
      color: var(--fusion-red);
    }

    .rice-hero--fusion .rice-hero__variant-card h2 {
      color: var(--fusion-ink);
    }

    .rice-hero--fusion .rice-hero__variant-card span,
    .rice-hero__variant-description {
      color: rgba(33, 19, 13, 0.68);
    }

    .rice-hero__variant-description {
      margin-top: 8px !important;
      font-size: 0.86rem;
      font-weight: 800;
      line-height: 1.55;
    }

    .rice-hero--fusion .rice-hero__switch {
      display: flex;
      flex-wrap: wrap;
      width: min(100%, 560px);
    }

    .rice-hero--fusion .rice-hero__tab {
      color: rgba(33, 19, 13, 0.68);
      border-color: rgba(104, 27, 23, 0.16);
      background: rgba(255, 250, 242, 0.58);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    .rice-hero--fusion .rice-hero__tab:hover,
    .rice-hero--fusion .rice-hero__tab:focus-visible,
    .rice-hero--fusion .rice-hero__tab.is-active {
      color: #fff8ed;
      background: var(--fusion-red);
      border-color: var(--fusion-red);
    }

    @media (max-width: 1080px) {
      .rice-hero__fusion-shell {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        min-height: auto;
        padding: 104px 18px 34px;
      }

      .rice-hero--fusion .rice-hero__copy {
        max-width: 780px;
      }

      .rice-hero__impact {
        left: 52%;
      }

      .rice-hero__pop-stage {
        width: min(760px, 92vw);
        height: min(710px, 84vw);
        min-height: 480px;
      }

      .rice-hero__bowl {
        width: min(780px, 98vw);
      }
    }

    @media (max-width: 760px) {
      .rice-hero--fusion {
        min-height: 100svh;
        background:
          radial-gradient(circle at 55% 52%, rgba(255, 255, 255, 0.92) 0 10%, transparent 28%),
          radial-gradient(circle at 82% 18%, rgba(104, 27, 23, 0.12), transparent 36%),
          linear-gradient(90deg, rgba(62, 39, 21, 0.034) 1px, transparent 1px),
          linear-gradient(180deg, rgba(62, 39, 21, 0.028) 1px, transparent 1px),
          linear-gradient(180deg, #fff5e5 0%, #eed8ae 68%, #d7aa62 100%);
        background-size: auto, auto, 64px 64px, 64px 64px, auto;
      }

      .rice-hero--fusion::after {
        bottom: 34%;
        font-size: 5.9rem;
        color: rgba(104, 27, 23, 0.055);
      }

      .rice-hero__fusion-shell {
        flex-direction: column;
        min-height: 100svh;
        padding: 82px 16px 24px;
      }

      .rice-hero--fusion .rice-hero__title {
        font-size: clamp(3.45rem, 16vw, 5.15rem);
        line-height: 0.9;
      }

      .rice-hero--fusion .rice-hero__title span {
        white-space: normal;
      }

      .rice-hero--fusion .rice-hero__lead {
        margin-top: 14px;
        font-size: 0.95rem;
        line-height: 1.68;
      }

      .rice-hero--fusion .rice-hero__proofs {
        flex-direction: column;
        gap: 7px;
        margin-top: 14px;
      }

      .rice-hero--fusion .rice-hero__proof {
        min-height: 64px;
        padding: 10px 8px;
        text-align: center;
      }

      .rice-hero--fusion .rice-hero__proof span {
        font-size: 0.62rem;
      }

      .rice-hero--fusion .rice-hero__proof strong {
        margin-top: 6px;
        font-size: 0.92rem;
        text-align: center;
      }

      .rice-hero--fusion .rice-hero__actions {
        margin-top: 14px;
      }

      .rice-hero--fusion .rice-hero__button {
        min-height: 42px;
        font-size: 0.8rem;
      }

      .rice-hero__collision {
        top: 35%;
        height: 40%;
      }

      .rice-hero__fusion-label {
        min-height: 29px;
        padding: 0 10px;
        font-size: 0.72rem;
      }

      .rice-hero__fusion-label--crystal {
        top: 20%;
        left: 8%;
      }

      .rice-hero__fusion-label--thai {
        top: 28%;
        right: 6%;
      }

      .rice-hero__impact {
        top: 38%;
        left: 50%;
        width: 138px;
      }

      .rice-hero__grain {
        top: calc(27% + (var(--grain-index) % 6) * 4%);
      }

      .rice-hero__grain--crystal {
        left: calc(8% + (var(--grain-index) % 4) * 4%);
      }

      .rice-hero__grain--thai {
        right: calc(6% + (var(--grain-index) % 5) * 3.2%);
      }

      .rice-hero--fusion .rice-hero__visual {
        gap: 10px;
        margin-top: -4px;
      }

      .rice-hero__pop-stage {
        width: 100vw;
        height: 48svh;
        min-height: 372px;
        margin-right: -16px;
        margin-left: -16px;
      }

      .rice-hero__bowl {
        bottom: -42%;
        width: 136vw;
        transform: translate3d(-50%, 11%, 0) scale(0.76) rotate(-4deg);
      }

      .rice-hero__bowl--blackberry {
        bottom: -39%;
        width: 128vw;
        transform: translate3d(-39%, -6%, 0) scale(0.62) rotate(5deg);
      }

      .rice-hero__bowl.is-active {
        filter: saturate(1.06) contrast(1.05) drop-shadow(0 26px 38px rgba(65, 34, 15, 0.25));
      }

      .rice-hero__shadow {
        bottom: 3%;
        left: 0;
        right: 0;
      }

      .rice-hero--fusion .rice-hero__variant-card {
        width: 100%;
        padding: 13px 14px;
      }

      .rice-hero--fusion .rice-hero__variant-card h2 {
        font-size: 1.24rem;
      }

      .rice-hero__variant-description {
        display: none;
      }

      .rice-hero--fusion .rice-hero__switch {
        flex-direction: column;
        width: 100%;
      }
    }

    @media (max-width: 390px) {
      .rice-hero__fusion-shell {
        padding-right: 14px;
        padding-left: 14px;
      }

      .rice-hero--fusion .rice-hero__title {
        font-size: clamp(3.2rem, 15vw, 4.5rem);
      }
    }

    @keyframes riceCrystalGrain {
      0% {
        opacity: 0;
        transform: translate3d(-180px, 20px, 0) scale(0.55) rotate(-40deg);
      }
      58% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translate3d(110px, -12px, 0) scale(1.08) rotate(42deg);
      }
    }

    @keyframes riceThaiGrain {
      0% {
        opacity: 0;
        transform: translate3d(180px, -18px, 0) scale(0.55) rotate(40deg);
      }
      58% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translate3d(-116px, 14px, 0) scale(1.08) rotate(-42deg);
      }
    }

    @keyframes riceCrystalBeam {
      0% {
        opacity: 0;
        transform: translateX(-110px) scaleX(0.2);
      }
      45% {
        opacity: 0.95;
      }
      100% {
        opacity: 0;
        transform: translateX(70px) scaleX(1);
      }
    }

    @keyframes riceThaiBeam {
      0% {
        opacity: 0;
        transform: translateX(110px) scaleX(0.2);
      }
      45% {
        opacity: 0.85;
      }
      100% {
        opacity: 0;
        transform: translateX(-70px) scaleX(1);
      }
    }

    @keyframes riceImpactPulse {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.14);
      }
      38% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.45);
      }
    }

    @keyframes riceRingPop {
      0% {
        opacity: 0;
        transform: translate(-50%, 50%) scale(0.2);
      }
      34% {
        opacity: 0.72;
      }
      100% {
        opacity: 0;
        transform: translate(-50%, 50%) scale(1.35);
      }
    }

    @keyframes riceBowlPop {
      0% {
        opacity: 0;
        transform: translate3d(-50%, 18%, 0) scale(0.62) rotate(-8deg);
      }
      58% {
        opacity: 1;
        transform: translate3d(-50%, -3%, 0) scale(1.08) rotate(2deg);
      }
      100% {
        opacity: 1;
        transform: translate3d(-50%, 0, 0) scale(1) rotate(0);
      }
    }

    @keyframes riceBowlPopBlack {
      0% {
        opacity: 0;
        transform: translate3d(-50%, 17%, 0) scale(0.58) rotate(9deg);
      }
      58% {
        opacity: 1;
        transform: translate3d(-50%, -3%, 0) scale(1.06) rotate(-2deg);
      }
      100% {
        opacity: 1;
        transform: translate3d(-50%, 0, 0) scale(1) rotate(0);
      }
    }

    @keyframes riceShadowPop {
      0% {
        opacity: 0;
        transform: scale(0.52);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes riceTitlePop {
      0% {
        opacity: 0;
        transform: translate3d(0, 24px, 0) scale(0.94);
      }
      60% {
        opacity: 1;
        transform: translate3d(0, -4px, 0) scale(1.025);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    @keyframes riceTextDrop {
      0% {
        opacity: 0;
        transform: translate3d(0, 16px, 0);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes riceChipRise {
      0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.98);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    @keyframes riceLabelInLeft {
      0% {
        opacity: 0;
        transform: translate3d(-52px, 0, 0);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes riceLabelInRight {
      0% {
        opacity: 0;
        transform: translate3d(52px, 0, 0);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    .family-switcher {
      position: fixed;
      top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px);
      left: 50%;
      z-index: 130;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px;
      border: 1px solid rgba(40, 24, 16, 0.14);
      border-radius: 999px;
      background: rgba(255, 250, 241, 0.76);
      box-shadow: 0 18px 58px rgba(55, 32, 18, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.72);
      transform: translateX(-50%);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .family-switcher__option {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 13px 0 7px;
      border-radius: 999px;
      color: rgba(35, 21, 14, 0.66);
      font-weight: 900;
      line-height: 1;
      text-decoration: none;
      transition: background 180ms ease, color 180ms ease, transform 180ms ease;
    }

    .family-switcher__option:hover,
    .family-switcher__option:focus-visible {
      color: #23150e;
      transform: translateY(-1px);
      outline: none;
    }

    .family-switcher__option.is-active {
      color: #fff8ed;
      background: #27160f;
      box-shadow: 0 10px 24px rgba(39, 22, 15, 0.22);
    }

    .family-switcher__option span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(35, 21, 14, 0.08);
      font-size: 0.82rem;
    }

    .family-switcher__option.is-active span {
      background: rgba(255, 248, 237, 0.18);
    }

    .family-switcher__option strong {
      font-size: 0.86rem;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .family-transition {
      position: fixed;
      inset: 0;
      z-index: 220;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 248, 237, 0.94), rgba(238, 216, 184, 0.96) 42%, rgba(25, 15, 11, 0.96) 100%);
      transform: scale(1.04);
      transition: opacity 320ms ease, transform 460ms ease;
    }

    .family-transition span {
      color: #23150e;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(2rem, 6vw, 5.4rem);
      font-weight: 900;
      letter-spacing: 0;
      line-height: 1;
    }

    body.is-family-switching {
      overflow: hidden;
    }

    body.is-family-switching .family-transition {
      pointer-events: auto;
      opacity: 1;
      transform: scale(1);
    }

    .rice-proof-section {
      position: relative;
      overflow: hidden;
      padding: clamp(84px, 10vw, 150px) clamp(18px, 4vw, 56px);
      color: #23150e;
      background:
        linear-gradient(90deg, rgba(58, 37, 21, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(58, 37, 21, 0.032) 1px, transparent 1px),
        linear-gradient(180deg, #f5ead8 0%, #f8f0e2 100%);
      background-size: 86px 86px, 86px 86px, auto;
    }

    .rice-proof-section__inner,
    .rice-product-anchor__inner {
      width: min(1180px, 100%);
      margin: 0 auto;
    }

    .rice-proof-section .section-kicker,
    .rice-family-scene .section-kicker,
    .rice-product-anchor .section-kicker {
      margin: 0 0 14px;
      color: #6f1e17;
      font-size: 0.74rem;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .rice-proof-section h2,
    .rice-family-scene h2,
    .rice-product-anchor h2 {
      margin: 0;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-weight: 900;
      letter-spacing: 0;
      line-height: 0.96;
    }

    .rice-proof-section h2 {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: clamp(3.2rem, 6.2vw, 7rem);
    }

    .rice-proof-section h2 span {
      display: block;
    }

    .rice-proof-section__inner > p:not(.section-kicker) {
      max-width: 720px;
      margin: clamp(20px, 2.6vw, 34px) 0 0;
      color: rgba(35, 21, 14, 0.72);
      font-size: clamp(1rem, 1.25vw, 1.18rem);
      font-weight: 800;
      line-height: 1.9;
    }

    .rice-proof-section__metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: clamp(28px, 4vw, 54px);
    }

    .rice-proof-section__metrics div {
      min-height: 170px;
      padding: 22px;
      border: 1px solid rgba(35, 21, 14, 0.14);
      border-radius: 8px;
      background: rgba(255, 250, 241, 0.62);
      box-shadow: 0 24px 70px rgba(83, 48, 20, 0.10);
      flex: 1 1 240px;
    }

    .rice-proof-section__metrics span,
    .rice-product-card span {
      display: block;
      color: rgba(35, 21, 14, 0.48);
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .rice-proof-section__metrics strong {
      display: block;
      margin-top: 12px;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(2.2rem, 4vw, 4.6rem);
      line-height: 0.96;
      letter-spacing: 0;
    }

    .rice-proof-section__metrics p,
    .rice-family-scene__grid p,
    .rice-product-card p {
      margin: 12px 0 0;
      color: rgba(35, 21, 14, 0.66);
      font-size: 0.95rem;
      font-weight: 800;
      line-height: 1.65;
    }

    .rice-family-scene {
      display: flex;
      flex-wrap: wrap;
      min-height: 760px;
      color: #fff8ed;
      background: #100c0a;
    }

    .rice-family-scene__image {
      min-height: 520px;
      overflow: hidden;
      flex: 1 1 420px;
    }

    .rice-family-scene__image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      filter: saturate(0.95) contrast(1.04);
    }

    .rice-family-scene__copy {
      align-self: center;
      flex: 1 1 520px;
      padding: clamp(48px, 7vw, 96px);
    }

    .rice-family-scene h2,
    .rice-product-anchor h2 {
      font-size: clamp(2.8rem, 5vw, 5.6rem);
    }

    .rice-family-scene__grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: clamp(28px, 4vw, 52px);
    }

    .rice-family-scene__grid article {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      padding: 20px;
      border: 1px solid rgba(255, 248, 237, 0.14);
      border-radius: 8px;
      background: rgba(255, 248, 237, 0.06);
    }

    .rice-family-scene__grid span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(255, 248, 237, 0.36);
      border-radius: 50%;
      color: rgba(255, 248, 237, 0.76);
      font-weight: 900;
    }

    .rice-family-scene__grid h3,
    .rice-product-card h3 {
      margin: 0;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(1.35rem, 2vw, 2rem);
      font-weight: 900;
      line-height: 1.12;
      letter-spacing: 0;
    }

    .rice-family-scene__grid p {
      color: rgba(255, 248, 237, 0.68);
    }

    .rice-product-anchor {
      padding: clamp(84px, 10vw, 150px) clamp(18px, 4vw, 56px);
      color: #23150e;
      background: linear-gradient(180deg, #100c0a 0%, #24150f 0%, #f3e6d1 0.1%, #ead4ad 100%);
    }

    .rice-product-anchor__cards {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: clamp(28px, 4vw, 54px);
    }

    .rice-product-card {
      display: flex;
      flex: 1 1 520px;
      gap: 20px;
      align-items: end;
      min-height: 360px;
      overflow: hidden;
      border: 1px solid rgba(35, 21, 14, 0.14);
      border-radius: 8px;
      background: rgba(255, 250, 241, 0.64);
      box-shadow: 0 24px 80px rgba(83, 48, 20, 0.12);
    }

    .rice-product-card img {
      width: 100%;
      height: 100%;
      flex: 0 0 min(46%, 320px);
      min-height: 360px;
      display: block;
      object-fit: cover;
      object-position: center bottom;
    }

    .rice-product-card div {
      flex: 1 1 auto;
      padding: 24px 24px 28px 0;
    }

    .rice-product-card h3 {
      margin-top: 10px;
    }

    .rice-product-anchor__cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      margin-top: 22px;
      padding: 0 22px;
      border-radius: 999px;
      color: #fff8ed;
      background: #27160f;
      font-weight: 900;
      text-decoration: none;
      box-shadow: 0 18px 46px rgba(39, 22, 15, 0.22);
    }

    @media (max-width: 900px) {
      .family-switcher {
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 10px);
      }

      .rice-proof-section__metrics,
      .rice-family-scene,
      .rice-product-anchor__cards,
      .rice-product-card {
        flex-direction: column;
      }

      .rice-family-scene__copy {
        padding: 48px 18px 64px;
      }

      .rice-product-card {
        min-height: 0;
      }

      .rice-product-card img {
        height: 360px;
        min-height: 0;
        flex-basis: auto;
        flex-grow: 0;
        flex-shrink: 0;
        width: 100%;
      }

      .rice-product-card div {
        padding: 0 22px 24px;
      }
    }

    @media (max-width: 520px) {
      .family-switcher {
        gap: 3px;
        padding: 3px;
      }

      .family-switcher__option {
        min-height: 34px;
        padding: 0 10px 0 5px;
      }

      .family-switcher__option span {
        width: 25px;
        height: 25px;
        font-size: 0.74rem;
      }

      .family-switcher__option strong {
        font-size: 0.78rem;
      }

      .rice-proof-section,
      .rice-product-anchor {
        padding-right: 18px;
        padding-left: 18px;
      }

      .rice-proof-section h2,
      .rice-family-scene h2,
      .rice-product-anchor h2 {
        font-size: clamp(2.55rem, 12vw, 4rem);
      }

      .rice-proof-section__metrics div {
        min-height: 124px;
        padding: 18px;
      }

      .rice-family-scene__grid article {
        flex-direction: column;
        padding: 16px;
      }
    }

    body:has(.rice-cinema) {
      overflow-x: hidden;
      background: #120d0b;
    }

    .rice-cinema {
      --rice-progress: 0;
      --rice-collision: 0;
      --rice-headline-progress: 0;
      --rice-proof-progress: 0;
      --rice-close-progress: 0;
      position: relative;
      color: #fff6e8;
      background:
        radial-gradient(circle at 50% 40%, rgba(164, 41, 38, 0.28), transparent 31%),
        radial-gradient(circle at 14% 16%, rgba(241, 188, 101, 0.22), transparent 28%),
        linear-gradient(180deg, #1b1210 0%, #0d0908 46%, #22130f 100%);
      isolation: isolate;
      overflow: clip;
    }

    .rice-cinema *,
    .rice-cinema *::before,
    .rice-cinema *::after,
    .rice-close *,
    .rice-close *::before,
    .rice-close *::after,
    .rice-products *,
    .rice-products *::before,
    .rice-products *::after {
      box-sizing: border-box;
    }

    .rice-cinema__nav {
      position: fixed;
      top: calc(var(--wp-admin--admin-bar--height, 0px) + 18px);
      right: clamp(18px, 4vw, 64px);
      left: clamp(18px, 4vw, 64px);
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      pointer-events: none;
    }

    .rice-cinema__brand,
    .rice-cinema__links {
      pointer-events: auto;
    }

    .rice-cinema__brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #fff8ef;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 0.72rem;
      font-weight: 900;
    }

    .rice-cinema__brand img {
      width: 88px;
      height: auto;
      filter: brightness(0) invert(1);
    }

    .rice-cinema__brand span,
    .rice-cinema__links a,
    .rice-cinema__copy p,
    .rice-cinema__rail-dot,
    .rice-products .section-kicker,
    .rice-close .section-kicker,
    .rice-products__card span,
    .rice-close__proofs span {
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .rice-cinema__links {
      display: flex;
      gap: 8px;
    }

    .rice-cinema__links a {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 15px;
      border: 1px solid rgba(255, 246, 232, 0.22);
      border-radius: 999px;
      color: #fff6e8;
      background: rgba(20, 13, 10, 0.42);
      font-size: 0.72rem;
      font-weight: 900;
      text-decoration: none;
      backdrop-filter: blur(14px);
    }

    .rice-cinema__scroll {
      position: relative;
      height: 620svh;
      min-height: 3600px;
    }

    .rice-cinema__sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      min-height: 680px;
      overflow: hidden;
    }

    .rice-cinema__sticky::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(255, 246, 232, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 246, 232, 0.045) 1px, transparent 1px);
      background-size: 96px 96px;
      transform: translate3d(0, calc(var(--rice-progress) * -72px), 0);
      opacity: 0.7;
      pointer-events: none;
    }

    .rice-cinema__sticky::after {
      content: "";
      position: absolute;
      inset: auto -10% -20% -10%;
      z-index: 7;
      height: 44%;
      background: linear-gradient(180deg, transparent 0%, rgba(13, 9, 8, 0.68) 46%, rgba(13, 9, 8, 0.94) 100%);
      pointer-events: none;
    }

    .rice-cinema__backdrop,
    .rice-cinema__headline,
    .rice-cinema__copy-stack,
    .rice-cinema__rail,
    .rice-cinema__shop {
      position: absolute;
    }

    .rice-cinema__backdrop {
      inset: 0;
      z-index: 2;
      overflow: hidden;
      pointer-events: none;
    }

    .rice-cinema__scan {
      position: absolute;
      left: -12%;
      width: 124%;
      height: 18vh;
      background: linear-gradient(180deg, transparent 0%, rgba(255, 246, 232, 0.11) 45%, transparent 100%);
      filter: blur(1px);
      mix-blend-mode: screen;
      transform: translate3d(0, calc((var(--rice-progress) - 0.5) * 52vh), 0) rotate(-4deg);
      opacity: calc(0.24 + var(--rice-collision) * 0.46);
    }

    .rice-cinema__scan--top {
      top: 8%;
    }

    .rice-cinema__scan--bottom {
      top: 54%;
      transform: translate3d(0, calc((0.5 - var(--rice-progress)) * 40vh), 0) rotate(5deg);
    }

    .rice-cinema__word {
      position: absolute;
      color: rgba(255, 246, 232, 0.095);
      font-family: "Playfair Display", "Noto Serif TC", serif;
      font-size: clamp(7rem, 16vw, 19rem);
      font-weight: 700;
      line-height: 0.78;
      white-space: nowrap;
      transform: translate3d(calc(var(--rice-progress) * -16vw), 0, 0);
      user-select: none;
    }

    .rice-cinema__word--one {
      top: 13%;
      left: -2vw;
    }

    .rice-cinema__word--two {
      right: -6vw;
      bottom: 13%;
      transform: translate3d(calc(var(--rice-progress) * 14vw), 0, 0);
    }

    .rice-cinema__word--three {
      top: 47%;
      left: 27%;
      font-size: clamp(4rem, 10vw, 11rem);
      opacity: calc(var(--rice-proof-progress) * 0.9);
    }

    .rice-cinema__headline {
      right: clamp(18px, 5vw, 78px);
      bottom: clamp(128px, 16vh, 170px);
      z-index: 6;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0;
      color: rgba(255, 246, 232, 0.13);
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(4.8rem, 12vw, 12.8rem);
      font-weight: 900;
      line-height: 0.82;
      text-align: right;
      transform: translate3d(calc((1 - var(--rice-headline-progress)) * 18vw), calc((1 - var(--rice-headline-progress)) * 24px), 0);
      opacity: calc(0.18 + var(--rice-headline-progress) * 0.72);
      pointer-events: none;
      user-select: none;
    }

    .rice-cinema__copy-stack {
      top: clamp(112px, 16vh, 168px);
      left: clamp(22px, 6vw, 96px);
      z-index: 12;
      width: min(560px, 44vw);
      pointer-events: none;
    }

    .rice-cinema__title {
      max-width: 10ch;
      margin: 0 0 clamp(26px, 4vh, 42px);
      color: #fff4e1;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(4.8rem, 9vw, 9.6rem);
      font-weight: 900;
      line-height: 0.86;
      letter-spacing: 0;
      text-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
      transform: translate3d(0, calc(var(--rice-proof-progress) * -20px), 0) scale(calc(1 - var(--rice-proof-progress) * 0.09));
      transform-origin: left top;
    }

    .rice-cinema__title span {
      display: block;
      white-space: nowrap;
    }

    .rice-cinema__copy {
      position: absolute;
      top: calc(clamp(4.8rem, 9vw, 9.6rem) * 1.78);
      left: 0;
      max-width: 460px;
      opacity: 0;
      transform: translate3d(0, 28px, 0);
      transition: opacity 360ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .rice-cinema__copy.is-active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .rice-cinema__copy p {
      margin: 0 0 12px;
      color: #d9ad6e;
      font-size: 0.78rem;
      font-weight: 900;
    }

    .rice-cinema__copy h2 {
      margin: 0;
      color: #fff8ef;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(1.85rem, 3.2vw, 3.55rem);
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: 0;
      text-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    }

    .rice-cinema__copy span {
      display: block;
      max-width: 32em;
      margin-top: 16px;
      color: rgba(255, 246, 232, 0.78);
      font-size: clamp(0.96rem, 1.2vw, 1.12rem);
      font-weight: 700;
      line-height: 1.85;
      text-shadow: 0 8px 26px rgba(0, 0, 0, 0.52);
    }

    .rice-cinema__rail {
      right: clamp(18px, 3vw, 42px);
      bottom: clamp(28px, 5vh, 50px);
      z-index: 15;
      display: flex;
      flex-direction: column;
      gap: 7px;
      width: min(290px, 24vw);
      pointer-events: none;
    }

    .rice-cinema__rail::before {
      content: "";
      position: absolute;
      top: 12px;
      bottom: 12px;
      left: 5px;
      width: 1px;
      background: rgba(255, 246, 232, 0.24);
    }

    .rice-cinema__rail-dot {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255, 246, 232, 0.48);
      font-size: 0.68rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .rice-cinema__rail-dot::before {
      content: "";
      position: relative;
      z-index: 1;
      width: 11px;
      height: 11px;
      border: 1px solid rgba(255, 246, 232, 0.44);
      border-radius: 999px;
      background: #120d0b;
      transition: background 180ms ease, transform 180ms ease;
    }

    .rice-cinema__rail-dot.is-active {
      color: #fff6e8;
    }

    .rice-cinema__rail-dot.is-active::before {
      background: #d9ad6e;
      transform: scale(1.22);
    }

    .rice-cinema__shop {
      right: clamp(20px, 5vw, 70px);
      bottom: clamp(76px, 11vh, 118px);
      z-index: 18;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 132px;
      min-height: 66px;
      padding: 10px 22px;
      border: 2px solid rgba(255, 246, 232, 0.9);
      border-radius: 999px;
      color: #27140f;
      background: #fff7ec;
      font-weight: 900;
      text-decoration: none;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
      transform: translate3d(0, calc((1 - var(--rice-close-progress)) * 22px), 0) scale(calc(0.9 + var(--rice-close-progress) * 0.1));
      opacity: calc(0.82 + var(--rice-close-progress) * 0.18);
    }

    .rice-cinema__shop span {
      font-size: 0.92rem;
      line-height: 1;
    }

    .rice-cinema__shop strong {
      color: #9b3c2b;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      line-height: 1;
    }

    .rice-close,
    .rice-products {
      position: relative;
      color: #261711;
      background: #f8efe0;
      overflow: clip;
    }

    .rice-close {
      padding: clamp(76px, 10vw, 140px) clamp(20px, 6vw, 92px) clamp(56px, 8vw, 96px);
    }

    .rice-close::before,
    .rice-products::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(60, 38, 25, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(60, 38, 25, 0.038) 1px, transparent 1px);
      background-size: 80px 80px;
      pointer-events: none;
    }

    .rice-origin-proof,
    .rice-usage,
    .rice-choice-guide,
    .rice-buying-questions {
      position: relative;
      color: #261711;
      background: #f8efe0;
      overflow: clip;
    }

    .rice-origin-proof::before,
    .rice-usage::before,
    .rice-choice-guide::before,
    .rice-buying-questions::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(60, 38, 25, 0.042) 1px, transparent 1px),
        linear-gradient(180deg, rgba(60, 38, 25, 0.036) 1px, transparent 1px);
      background-size: 80px 80px;
      pointer-events: none;
    }

    .rice-origin-proof__inner,
    .rice-usage__inner,
    .rice-choice-guide__inner,
    .rice-buying-questions__inner {
      position: relative;
      z-index: 1;
      max-width: 1180px;
      margin: 0 auto;
    }

    .rice-origin-proof .section-kicker,
    .rice-usage .section-kicker,
    .rice-choice-guide .section-kicker,
    .rice-buying-questions .section-kicker {
      margin: 0 0 14px;
      color: #9b3c2b;
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .rice-origin-proof h2,
    .rice-usage h2,
    .rice-choice-guide h2,
    .rice-buying-questions h2 {
      margin: 0;
      color: #261711;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(3rem, 6.6vw, 7rem);
      font-weight: 900;
      line-height: 0.96;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .rice-origin-proof {
      padding: clamp(104px, 11vw, 166px) clamp(20px, 6vw, 92px);
      color: #fff6e8;
      background:
        radial-gradient(circle at 82% 24%, rgba(155, 60, 43, 0.44), transparent 34%),
        linear-gradient(135deg, #2a1711 0%, #421914 52%, #1c100d 100%);
    }

    .rice-origin-proof::before {
      background:
        linear-gradient(90deg, rgba(255, 246, 232, 0.052) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 246, 232, 0.044) 1px, transparent 1px);
      background-size: 82px 82px;
    }

    .rice-origin-proof__inner {
      display: flex;
      flex-direction: column;
      gap: clamp(28px, 4vw, 52px);
      align-items: stretch;
    }

    .rice-origin-proof__headline {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 940px;
      min-width: 0;
    }

    .rice-origin-proof .section-kicker {
      color: rgba(255, 246, 232, 0.66);
    }

    .rice-origin-proof h2 {
      max-width: 920px;
      color: #fff6e8;
      font-size: clamp(3rem, 5.2vw, 5.65rem);
      line-height: 1.02;
      text-wrap: balance;
    }

    .rice-origin-proof__lead {
      max-width: 56rem;
      margin: 22px 0 0;
      color: rgba(255, 246, 232, 0.72);
      font-size: clamp(1rem, 1.2vw, 1.13rem);
      font-weight: 750;
      line-height: 1.85;
      text-wrap: pretty;
    }

    .rice-origin-proof__stack {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(12px, 1.4vw, 18px);
      min-width: 0;
      width: 100%;
    }

    .rice-origin-proof__stack article {
      display: flex;
      flex: 1 1 300px;
      flex-direction: column;
      gap: 12px;
      min-height: 260px;
      padding: clamp(18px, 2.2vw, 28px);
      border: 1px solid rgba(255, 246, 232, 0.14);
      border-radius: 8px;
      background: rgba(255, 246, 232, 0.075);
      box-shadow: 0 28px 88px rgba(0, 0, 0, 0.18);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .rice-origin-proof__stack span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255, 246, 232, 0.3);
      border-radius: 50%;
      color: rgba(255, 246, 232, 0.72);
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0;
    }

    .rice-origin-proof__stack h3 {
      margin: 0;
      color: #fff6e8;
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1.55rem, 2.35vw, 2.55rem);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: 0;
    }

    .rice-origin-proof__stack p {
      margin: 0;
      color: rgba(255, 246, 232, 0.68);
      font-size: 0.98rem;
      font-weight: 700;
      line-height: 1.75;
    }

    .rice-usage {
      padding: clamp(104px, 11vw, 164px) clamp(20px, 6vw, 92px);
    }

    .rice-usage__inner {
      display: flex;
      flex-direction: column;
      gap: clamp(38px, 6vw, 84px);
    }

    .rice-usage__intro {
      max-width: 860px;
    }

    .rice-usage__intro > p:not(.section-kicker) {
      max-width: 34em;
      margin: 24px 0 0;
      color: rgba(38, 23, 17, 0.72);
      font-size: clamp(1rem, 1.35vw, 1.15rem);
      font-weight: 700;
      line-height: 1.9;
    }

    .rice-usage__stage {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(18px, 4vw, 56px);
      align-items: start;
    }

    .rice-usage__visual {
      flex: 1 1 520px;
      min-width: 0;
    }

    .rice-usage__visual {
      position: sticky;
      top: calc(var(--wp-admin--admin-bar--height, 0px) + 86px);
      min-height: min(720px, calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 116px));
      margin: 0;
      overflow: hidden;
      border: 1px solid rgba(38, 23, 17, 0.13);
      border-radius: 8px;
      background: #23150e;
      box-shadow: 0 34px 100px rgba(77, 48, 25, 0.18);
      isolation: isolate;
    }

    .rice-usage__visual::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        linear-gradient(180deg, rgba(16, 10, 7, 0.04) 0%, rgba(16, 10, 7, 0.04) 35%, rgba(16, 10, 7, 0.56) 100%),
        linear-gradient(90deg, rgba(255, 246, 232, 0.12) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 246, 232, 0.10) 1px, transparent 1px);
      background-size: auto, 72px 72px, 72px 72px;
      pointer-events: none;
    }

    .rice-usage__image {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      opacity: 0;
      transform: scale(1.08) translate3d(0, 18px, 0);
      transition: opacity 420ms ease, transform 820ms ease;
      will-change: opacity, transform;
    }

    .rice-usage__image.is-active {
      opacity: 1;
      transform: scale(1) translate3d(0, 0, 0);
    }

    .rice-usage__plate-note {
      position: absolute;
      right: 22px;
      bottom: 22px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: min(260px, calc(100% - 44px));
      padding: 16px 18px;
      border: 1px solid rgba(255, 246, 232, 0.34);
      border-radius: 8px;
      background: rgba(255, 246, 232, 0.82);
      color: #261711;
      box-shadow: 0 20px 58px rgba(20, 12, 8, 0.20);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .rice-usage__plate-note span {
      color: #9b3c2b;
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .rice-usage__plate-note strong {
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1.25rem, 2vw, 1.9rem);
      font-weight: 900;
      line-height: 1;
    }

    .rice-usage__steps {
      display: flex;
      flex: 1 1 360px;
      flex-direction: column;
      gap: clamp(14px, 2vw, 22px);
      min-width: 0;
    }

    .rice-usage__steps article,
    .rice-buying-questions__list article {
      min-height: 246px;
      padding: clamp(18px, 2vw, 26px);
      border: 1px solid rgba(38, 23, 17, 0.12);
      border-radius: 8px;
      background: rgba(255, 252, 246, 0.72);
      box-shadow: 0 26px 80px rgba(77, 48, 25, 0.12);
    }

    .rice-usage__steps article {
      min-height: clamp(260px, 31vw, 380px);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      opacity: 0.58;
      transform: translate3d(0, 18px, 0);
      transition: opacity 240ms ease, transform 320ms ease, background 240ms ease, border-color 240ms ease;
    }

    .rice-usage__steps article.is-active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      border-color: rgba(155, 60, 43, 0.28);
      background: rgba(255, 250, 241, 0.94);
    }

    .rice-usage__steps span,
    .rice-choice-guide__panel span,
    .rice-buying-questions__list span {
      display: block;
      color: #9b3c2b;
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .rice-usage__steps h3,
    .rice-choice-guide__panel h3,
    .rice-buying-questions__list h3 {
      margin: 28px 0 0;
      color: #261711;
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1.6rem, 2.5vw, 2.65rem);
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: 0;
    }

    .rice-usage__steps p,
    .rice-choice-guide__panel p,
    .rice-buying-questions__list p {
      margin: 14px 0 0;
      color: rgba(38, 23, 17, 0.68);
      font-size: 0.96rem;
      font-weight: 700;
      line-height: 1.75;
    }

    .rice-usage__steps strong {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 34px;
      margin-top: 18px;
      padding: 0 13px;
      border-radius: 999px;
      color: #fff8ed;
      background: #261711;
      font-size: 0.86rem;
      font-weight: 900;
      line-height: 1.2;
    }

    .rice-choice-guide {
      padding: clamp(110px, 12vw, 172px) clamp(20px, 6vw, 92px);
      color: #fff6e8;
      background:
        radial-gradient(circle at 76% 38%, rgba(93, 13, 20, 0.52), transparent 34%),
        linear-gradient(180deg, #261711 0%, #150d0a 100%);
    }

    .rice-choice-guide::before {
      background:
        linear-gradient(90deg, rgba(255, 246, 232, 0.052) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 246, 232, 0.046) 1px, transparent 1px);
      background-size: 82px 82px;
    }

    .rice-choice-guide h2 {
      max-width: 10em;
      color: #fff6e8;
    }

    .rice-choice-guide__panels {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(14px, 2vw, 24px);
      margin-top: clamp(34px, 5vw, 70px);
    }

    .rice-choice-guide__panel {
      position: relative;
      min-height: clamp(480px, 46vw, 660px);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      flex: 1 1 420px;
      padding: clamp(22px, 3vw, 38px);
      border: 1px solid rgba(255, 246, 232, 0.16);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 246, 232, 0.88) 0%, rgba(255, 246, 232, 0.74) 100%);
      overflow: hidden;
      isolation: isolate;
    }

    .rice-choice-guide__panel::before {
      content: "";
      position: absolute;
      inset: auto 0 0;
      z-index: -1;
      height: 54%;
      background: linear-gradient(180deg, transparent 0%, rgba(255, 246, 232, 0.94) 68%);
    }

    .rice-choice-guide__panel img {
      position: absolute;
      top: -16%;
      left: 50%;
      z-index: -2;
      width: min(112%, 760px);
      max-width: none;
      transform: translateX(-50%) rotate(-5deg);
      filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.18));
    }

    .rice-choice-guide__panel--dark {
      background:
        radial-gradient(circle at 50% 24%, rgba(124, 31, 34, 0.46), transparent 42%),
        #2a120f;
    }

    .rice-choice-guide__panel--dark::before {
      background: linear-gradient(180deg, transparent 0%, rgba(42, 18, 15, 0.96) 72%);
    }

    .rice-choice-guide__panel--dark img {
      top: -12%;
      transform: translateX(-50%) rotate(6deg);
    }

    .rice-choice-guide__panel--dark h3,
    .rice-choice-guide__panel--dark p,
    .rice-choice-guide__panel--dark strong {
      color: #fff6e8;
    }

    .rice-choice-guide__panel strong {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      margin-top: 18px;
      padding: 0 14px;
      border-radius: 999px;
      color: #261711;
      background: rgba(255, 255, 255, 0.66);
      font-size: 0.86rem;
      font-weight: 900;
    }

    .rice-buying-questions {
      padding: clamp(104px, 11vw, 164px) clamp(20px, 6vw, 92px);
    }

    .rice-buying-questions__inner {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(30px, 6vw, 84px);
      align-items: start;
    }

    .rice-buying-questions__inner > div:first-child {
      flex: 1 1 320px;
      min-width: 0;
    }

    .rice-buying-questions__list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      min-width: 0;
      flex: 1 1 520px;
    }

    .rice-buying-questions__list article {
      min-height: 210px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      flex: 1 1 240px;
    }

    .rice-close__inner,
    .rice-products__inner {
      position: relative;
      z-index: 1;
      max-width: 1180px;
      margin: 0 auto;
    }

    .rice-close__inner {
      display: flex;
      flex-direction: column;
      gap: clamp(30px, 6vw, 82px);
      align-items: stretch;
    }

    .rice-close__copy {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      gap: 24px;
      min-width: 0;
      width: 100%;
      max-width: 980px;
    }

    .rice-close__headline {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .rice-close .section-kicker,
    .rice-products .section-kicker {
      margin: 0 0 14px;
      color: #9b3c2b;
      font-size: 0.78rem;
      font-weight: 900;
    }

    .rice-close h2,
    .rice-products h2 {
      margin: 0;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(3rem, 4.8vw, 5.6rem);
      font-weight: 900;
      line-height: 0.94;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .rice-close .rice-close__title {
      display: flex;
      flex-direction: column;
      gap: 0.04em;
      width: fit-content;
      max-width: none;
      text-wrap: balance;
      font-size: clamp(2.5rem, 4.1vw, 5rem);
    }

    .rice-close .rice-close__title span {
      display: block;
      white-space: nowrap;
    }

    .rice-close__lede {
      max-width: 38em;
      margin: 0;
      color: rgba(38, 23, 17, 0.72);
      font-size: clamp(1rem, 1.4vw, 1.18rem);
      font-weight: 700;
      line-height: 1.9;
    }

    .rice-close__proofs {
      display: flex;
      flex: 0 0 auto;
      flex-wrap: wrap;
      gap: 12px;
      min-width: 0;
      width: 100%;
    }

    .rice-close__proofs article,
    .rice-products__card {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      border: 1px solid rgba(38, 23, 17, 0.12);
      border-radius: 8px;
      background: rgba(255, 252, 246, 0.72);
      box-shadow: 0 26px 80px rgba(77, 48, 25, 0.12);
    }

    .rice-close__proofs article {
      min-height: 220px;
      padding: 22px;
      flex: 1 1 240px;
      justify-content: flex-start;
    }

    .rice-close__proofs span,
    .rice-products__card span {
      display: block;
      color: #9b3c2b;
      font-size: 0.7rem;
      font-weight: 900;
    }

    .rice-close__proofs strong {
      display: block;
      margin-top: 28px;
      color: #261711;
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1.85rem, 3vw, 3.1rem);
      font-weight: 900;
      line-height: 1;
    }

    .rice-close__proofs p,
    .rice-products__card p {
      margin: 14px 0 0;
      color: rgba(38, 23, 17, 0.68);
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.75;
    }

    .rice-products {
      padding: clamp(64px, 9vw, 124px) clamp(20px, 6vw, 92px) clamp(90px, 12vw, 156px);
    }

    .rice-products__inner {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .rice-products h2 {
      max-width: none;
      font-size: clamp(3rem, 4.25vw, 5.15rem);
      line-height: 1.02;
      text-wrap: balance;
    }

    .rice-products__cards {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(14px, 2vw, 24px);
      margin-top: clamp(28px, 4vw, 58px);
    }

    .rice-products__card {
      position: relative;
      min-height: clamp(420px, 42vw, 560px);
      overflow: hidden;
      padding: clamp(22px, 3vw, 38px);
      isolation: isolate;
      flex: 1 1 360px;
    }

    .rice-products__card::before {
      content: "";
      position: absolute;
      inset: auto 0 0;
      z-index: -1;
      height: 48%;
      background: linear-gradient(180deg, transparent 0%, rgba(255, 252, 246, 0.92) 72%);
    }

    .rice-products__card img {
      position: absolute;
      top: clamp(10px, 4vw, 42px);
      left: 50%;
      z-index: -2;
      width: min(78%, 520px);
      height: 70%;
      object-fit: contain;
      transform: translateX(-50%);
      filter: drop-shadow(0 32px 62px rgba(52, 28, 18, 0.2));
    }

    .rice-products__card--dark {
      color: #fff6e8;
      background:
        radial-gradient(circle at 52% 18%, rgba(142, 49, 48, 0.32), transparent 46%),
        #26120f;
    }

    .rice-products__card--dark::before {
      background: linear-gradient(180deg, transparent 0%, rgba(38, 18, 15, 0.94) 74%);
    }

    .rice-products__card--dark h3,
    .rice-products__card--dark p {
      color: #fff6e8;
    }

    .rice-products__card h3 {
      margin: 7px 0 0;
      color: #261711;
      font-family: "Noto Serif TC", serif;
      font-size: clamp(1.7rem, 3vw, 3rem);
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: 0;
    }

    .rice-products__card.rice-products__card--dark h3 {
      color: #fff6e8;
      text-shadow: 0 12px 36px rgba(0, 0, 0, 0.42);
    }

    .rice-products__card.rice-products__card--dark p {
      color: rgba(255, 246, 232, 0.86);
    }

    .rice-products__cta {
      justify-self: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 56px;
      margin-top: clamp(28px, 4vw, 48px);
      padding: 0 28px;
      border-radius: 999px;
      color: #fff6e8;
      background: #261711;
      font-size: 1rem;
      font-weight: 900;
      text-decoration: none;
      box-shadow: 0 22px 70px rgba(38, 23, 17, 0.2);
    }

    @media (max-width: 1100px) {
      .rice-cinema__copy-stack {
        width: min(520px, 54vw);
      }

      .rice-cinema__title {
        font-size: clamp(4.1rem, 10vw, 8rem);
      }

      .rice-cinema__copy {
        top: calc(clamp(4.1rem, 10vw, 8rem) * 1.82);
      }

    }

    @media (max-width: 760px) {
      body:has(.rice-cinema) {
        background: #120d0b;
      }

      .rice-cinema__nav {
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px);
        right: 14px;
        left: 14px;
      }

      .rice-cinema__brand img {
        width: 74px;
      }

      .rice-cinema__brand span,
      .rice-cinema__links {
        display: none;
      }

      .rice-cinema__scroll {
        height: 640svh;
        min-height: 4120px;
      }

      .rice-cinema__sticky {
        min-height: 100svh;
      }

      .rice-cinema__sticky::before {
        background-size: 58px 58px;
        opacity: 0.55;
      }

      .rice-cinema__word {
        font-size: clamp(4.8rem, 28vw, 9rem);
        opacity: 0.84;
      }

      .rice-cinema__word--one {
        top: 10%;
        left: -18vw;
      }

      .rice-cinema__word--two {
        right: -34vw;
        bottom: 20%;
      }

      .rice-cinema__word--three {
        top: 56%;
        left: -4vw;
        font-size: clamp(3.8rem, 19vw, 6rem);
      }

      .rice-cinema__headline {
        right: 10px;
        bottom: 16vh;
        width: 100%;
        font-size: clamp(4.7rem, 24vw, 7.4rem);
        opacity: calc(0.2 + var(--rice-headline-progress) * 0.44);
      }

      .rice-cinema__copy-stack {
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 64px);
        left: 18px;
        z-index: 14;
        width: calc(100vw - 36px);
      }

      .rice-cinema__title {
        max-width: none;
        margin-bottom: 20px;
        font-size: clamp(3.2rem, 14.2vw, 5.1rem);
        line-height: 0.9;
        opacity: calc(1 - var(--rice-collision) * 1.12);
        transform: translate3d(0, calc(var(--rice-collision) * -22px), 0) scale(calc(1 - var(--rice-collision) * 0.08));
      }

      .rice-cinema__copy {
        top: calc(clamp(3.2rem, 14.2vw, 5.1rem) * 2.34 - var(--rice-collision) * 72px);
        max-width: calc(100vw - 36px);
        padding: 14px 0 0;
      }

      .rice-cinema__copy p {
        margin-bottom: 8px;
        font-size: 0.68rem;
      }

      .rice-cinema__copy h2 {
        max-width: 100%;
        font-size: clamp(1.45rem, 6.2vw, 2.1rem);
        line-height: 1.08;
        text-wrap: balance;
        word-break: keep-all;
      }

      .rice-cinema__copy span {
        max-width: 28em;
        margin-top: 10px;
        font-size: 0.88rem;
        line-height: 1.62;
        text-wrap: balance;
      }

      .rice-cinema__rail {
        right: auto;
        bottom: 22px;
        left: 18px;
        z-index: 20;
        display: flex;
        flex-direction: row;
        gap: 5px;
        width: calc(100vw - 36px);
      }

      .rice-cinema__rail::before {
        top: 5px;
        right: 6px;
        bottom: auto;
        left: 6px;
        width: auto;
        height: 1px;
      }

      .rice-cinema__rail-dot {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        min-width: 0;
        overflow: hidden;
        font-size: 0;
      }

      .rice-cinema__rail-dot::before {
        width: 10px;
        height: 10px;
      }

      .rice-cinema__shop {
        right: 18px;
        bottom: 58px;
        min-width: 110px;
        min-height: 54px;
        padding: 8px 17px;
      }

      .rice-cinema__shop span {
        font-size: 0.82rem;
      }

      .rice-close,
      .rice-origin-proof,
      .rice-usage,
      .rice-choice-guide,
      .rice-buying-questions {
        padding: 108px 18px 58px;
      }

      .rice-close__inner,
      .rice-origin-proof__inner,
      .rice-usage__inner,
      .rice-usage__stage,
      .rice-choice-guide__panels,
      .rice-buying-questions__inner,
      .rice-buying-questions__list,
      .rice-close__proofs,
      .rice-products__cards {
        flex-direction: column;
        align-items: stretch;
      }

      .rice-origin-proof__stack article {
        min-height: 0;
      }

      .rice-origin-proof__stack p {
        margin-top: 2px;
      }

      .rice-usage__stage {
        gap: 18px;
      }

      .rice-usage__visual {
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 62px);
        min-height: min(64svh, 560px);
        margin: 0 -18px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
      }

      .rice-usage__image {
        object-position: center center;
      }

      .rice-usage__plate-note {
        right: 18px;
        bottom: 18px;
        left: 18px;
        min-width: 0;
      }

      .rice-usage__steps {
        position: relative;
        z-index: 3;
        gap: 24px;
        margin-top: -42px;
      }

      .rice-close .rice-close__title,
      .rice-origin-proof h2,
      .rice-usage h2,
      .rice-choice-guide h2,
      .rice-buying-questions h2,
      .rice-products h2 {
        font-size: clamp(2.2rem, 7.8vw, 3.45rem);
        line-height: 0.96;
      }

      .rice-close__copy {
        gap: 18px;
      }

      .rice-close__headline {
        gap: 16px;
      }

      .rice-close .rice-close__title {
        max-width: 100%;
        font-size: clamp(1.38rem, 5.8vw, 2.1rem);
        line-height: 0.98;
      }

      .rice-close .rice-close__title span {
        white-space: nowrap;
      }

      .rice-close__lede {
        max-width: 30rem;
        font-size: 0.96rem;
        line-height: 1.74;
      }

      .rice-close__proofs article,
      .rice-usage__steps article,
      .rice-buying-questions__list article {
        min-height: 0;
      }

      .rice-usage__steps article {
        min-height: min(58svh, 420px);
        padding: 24px 18px;
        background: rgba(255, 252, 246, 0.86);
        box-shadow: 0 26px 70px rgba(38, 23, 17, 0.16);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }

      .rice-usage__steps article:not(.is-active) {
        opacity: 0.32;
        transform: translate3d(0, 22px, 0) scale(0.97);
      }

      .rice-usage__steps article.is-active {
        background: rgba(255, 250, 241, 0.98);
        box-shadow: 0 30px 86px rgba(38, 23, 17, 0.22);
      }

      .rice-usage__steps strong {
        width: auto;
        min-height: 42px;
        padding: 8px 13px;
        border-radius: 8px;
      }

      .rice-choice-guide__panel {
        min-height: 480px;
        padding: 22px;
      }

      .rice-choice-guide__panel img {
        top: -6%;
        width: min(116%, 520px);
      }

      .rice-products {
        padding: 58px 18px 86px;
      }

      .rice-products__card {
        min-height: 450px;
        padding: 22px;
      }

      .rice-products__card img {
        width: min(92%, 410px);
        height: 68%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .rice-cinema__scroll {
        height: auto;
        min-height: 100svh;
      }

      .rice-cinema__sticky {
        position: relative;
      }

      .rice-cinema__copy:not(.is-active) {
        display: none;
      }

      .rice-cinema__headline,
      .rice-cinema__scan,
      .rice-cinema__word,
      .rice-cinema__plate {
        transition: none;
      }
    }

    .rice-cinema {
      --rice-blackberry-progress: 0;
      --rice-jasmine-exit: 0;
      --rice-bowl-zoom: 0;
      --rice-pointer-x: 0;
      --rice-pointer-y: 0;
      background:
        radial-gradient(circle at 28% 36%, rgba(217, 173, 110, 0.2), transparent 30%),
        radial-gradient(circle at 76% 52%, rgba(92, 10, 18, 0.32), transparent 34%),
        linear-gradient(180deg, #21140f 0%, #100b09 50%, #281510 100%);
    }

    .rice-cinema__plates {
      position: absolute;
      inset: 0;
      z-index: 5;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transition: opacity 420ms ease;
    }

    .rice-cinema.is-rice-image-ready .rice-cinema__plates {
      opacity: 1;
    }

    .rice-cinema__plates::before {
      content: "";
      position: absolute;
      inset: auto 10% 5% 10%;
      height: 24%;
      border-radius: 999px;
      background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42), transparent 68%);
      filter: blur(26px);
      opacity: calc(0.45 + var(--rice-bowl-zoom) * 0.24);
      transform: translate3d(calc(var(--rice-pointer-x) * 8px), 0, 0);
    }

    .rice-cinema__plate {
      position: absolute;
      display: block;
      height: auto;
      max-width: none;
      object-fit: contain;
      filter: drop-shadow(0 34px 90px rgba(0, 0, 0, 0.4));
      will-change: transform, opacity, filter;
      user-select: none;
    }

    .rice-cinema__plate--jasmine {
      top: calc(47% - var(--rice-bowl-zoom) * 5%);
      left: calc(48% - var(--rice-blackberry-progress) * 15%);
      width: clamp(620px, 58vw, 980px);
      opacity: calc(1 - var(--rice-jasmine-exit) * 0.82);
      transform:
        translate3d(calc(-50% + var(--rice-pointer-x) * 14px), calc(-50% + var(--rice-pointer-y) * -10px), 0)
        scale(calc(0.78 + var(--rice-bowl-zoom) * 0.28 - var(--rice-jasmine-exit) * 0.08))
        rotate(calc(-8deg + var(--rice-progress) * 9deg));
      transform-origin: center;
    }

    .rice-cinema__plate--blackberry {
      top: calc(50% + var(--rice-blackberry-progress) * -4%);
      left: calc(72% - var(--rice-blackberry-progress) * 25%);
      width: clamp(600px, 56vw, 930px);
      opacity: var(--rice-blackberry-progress);
      transform:
        translate3d(calc(-50% + var(--rice-pointer-x) * -12px), calc(-50% + var(--rice-pointer-y) * 12px), 0)
        scale(calc(0.58 + var(--rice-blackberry-progress) * 0.46 + var(--rice-close-progress) * 0.08))
        rotate(calc(12deg - var(--rice-progress) * 11deg));
      transform-origin: center;
    }

    .rice-cinema__plate-label,
    .rice-cinema__blend-mark {
      position: absolute;
      z-index: 7;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 17px;
      border: 1px solid rgba(255, 246, 232, 0.34);
      border-radius: 999px;
      color: #fff8ef;
      background: rgba(20, 12, 9, 0.54);
      font-size: 0.88rem;
      font-weight: 900;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
      backdrop-filter: blur(16px);
      opacity: var(--rice-proof-progress);
      transform: translate3d(0, calc((1 - var(--rice-proof-progress)) * 22px), 0);
    }

    .rice-cinema__plate-label--jasmine {
      right: 52%;
      bottom: 26%;
    }

    .rice-cinema__plate-label--blackberry {
      right: 20%;
      bottom: 34%;
    }

    .rice-cinema__blend-mark {
      right: 36%;
      bottom: 18%;
      color: #2a1510;
      background: rgba(255, 247, 236, 0.88);
    }

    .rice-cinema__impact-line {
      position: absolute;
      left: 50%;
      top: 50%;
      width: clamp(260px, 42vw, 620px);
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255, 246, 232, 0.72), transparent);
      opacity: calc(var(--rice-collision) * (1 - var(--rice-headline-progress)));
      transform: translate(-50%, -50%) rotate(var(--impact-rotation, 0deg)) scaleX(calc(0.2 + var(--rice-collision) * 1.4));
      transform-origin: center;
      mix-blend-mode: screen;
    }

    .rice-cinema__impact-line--one {
      --impact-rotation: -18deg;
    }

    .rice-cinema__impact-line--two {
      --impact-rotation: 24deg;
    }

    .rice-cinema__headline {
      z-index: 6;
      color: rgba(255, 246, 232, 0.11);
    }

    .rice-cinema__copy-stack {
      z-index: 12;
    }

    .rice-cinema__shop {
      z-index: 18;
    }

    @media (max-width: 760px) {
      .rice-cinema {
        background:
          radial-gradient(circle at 56% 52%, rgba(121, 20, 23, 0.36), transparent 34%),
          linear-gradient(180deg, #26150f 0%, #130d0b 58%, #26140f 100%);
      }

      .rice-cinema__plates::before {
        inset: auto -20% 5% -20%;
        height: 26%;
        opacity: 0.62;
      }

      .rice-cinema__plate--jasmine {
        top: calc(69% - var(--rice-bowl-zoom) * 10%);
        left: calc(50% - var(--rice-blackberry-progress) * 23%);
        width: clamp(540px, 154vw, 720px);
        opacity: calc(1 - var(--rice-jasmine-exit) * 0.86);
        transform:
          translate3d(calc(-50% + var(--rice-pointer-x) * 8px), calc(-50% + var(--rice-pointer-y) * -6px), 0)
          scale(calc(0.84 + var(--rice-bowl-zoom) * 0.24 - var(--rice-jasmine-exit) * 0.06))
          rotate(calc(-9deg + var(--rice-progress) * 8deg));
      }

      .rice-cinema__plate--blackberry {
        top: calc(66% - var(--rice-blackberry-progress) * 12%);
        left: calc(74% - var(--rice-blackberry-progress) * 24%);
        width: clamp(520px, 148vw, 700px);
        opacity: var(--rice-blackberry-progress);
        transform:
          translate3d(calc(-50% + var(--rice-pointer-x) * -8px), calc(-50% + var(--rice-pointer-y) * 6px), 0)
          scale(calc(0.64 + var(--rice-blackberry-progress) * 0.42))
          rotate(calc(11deg - var(--rice-progress) * 9deg));
      }

      .rice-cinema__plate-label,
      .rice-cinema__blend-mark {
        min-height: 34px;
        padding: 0 12px;
        font-size: 0.75rem;
      }

      .rice-cinema__plate-label--jasmine {
        right: auto;
        bottom: 30%;
        left: 20px;
      }

      .rice-cinema__plate-label--blackberry {
        right: 16px;
        bottom: 24%;
      }

      .rice-cinema__blend-mark {
        right: auto;
        bottom: 17%;
        left: 22px;
      }

      .rice-cinema__impact-line {
        width: 86vw;
      }
    }


    .noodle-persona-gallery {
      --persona-theme: #7f191a;
      position: relative;
      min-height: 184svh;
      overflow: clip;
      color: #fff8eb;
      background:
        radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--persona-theme) 56%, transparent), transparent 34%),
        linear-gradient(135deg, #120705 0%, #24120c 48%, #100604 100%);
      isolation: isolate;
      transition: background 420ms ease;
    }

    .noodle-persona-gallery__pin {
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100svh;
      padding: clamp(82px, 8vw, 124px) 0 clamp(72px, 7vw, 112px);
      overflow: hidden;
      isolation: isolate;
    }

    .noodle-persona-gallery__wash {
      position: absolute;
      inset: 0;
      z-index: -3;
      pointer-events: none;
      background:
        linear-gradient(rgba(255, 249, 238, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 249, 238, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 18% 74%, rgba(255, 248, 232, 0.10), transparent 28%);
      background-size: 82px 82px, 82px 82px, auto;
      opacity: 0.8;
    }

    .noodle-persona-gallery__marquee {
      position: absolute;
      left: -8vw;
      right: -8vw;
      z-index: -1;
      pointer-events: none;
      opacity: 0.16;
      transform: rotate(-4deg);
      mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    }

    .noodle-persona-gallery__marquee--top {
      top: clamp(28px, 7vh, 76px);
    }

    .noodle-persona-gallery__marquee-track {
      display: flex;
      align-items: center;
      width: max-content;
      gap: 14px;
      will-change: transform;
    }

    .noodle-persona-gallery__marquee img {
      display: block;
      width: clamp(82px, 8vw, 136px);
      aspect-ratio: 4 / 5;
      object-fit: cover;
      border: 1px solid rgba(255, 248, 232, 0.24);
      border-radius: 16px;
      filter: saturate(0.82) contrast(1.1);
    }

    .noodle-persona-gallery__intro {
      position: absolute;
      top: 50%;
      left: clamp(20px, 6vw, 92px);
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: min(28rem, 34vw);
      transform: translateY(-50%);
      text-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
      will-change: transform, opacity;
    }

    .noodle-persona-gallery__intro .section-kicker {
      color: #f0c27f;
      letter-spacing: 0.14em;
    }

    .noodle-persona-gallery__intro h2 {
      --section-headline-size: clamp(4.1rem, 7.2vw, 9.2rem);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 7.2em;
      margin: 0;
      color: #fff4df;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: var(--section-headline-size);
      font-weight: 900;
      line-height: 0.94;
      letter-spacing: 0;
    }

    .noodle-persona-gallery__intro h2 span {
      display: block;
      white-space: nowrap;
    }

    .noodle-persona-gallery__intro p:not(.section-kicker) {
      max-width: 25rem;
      margin: 22px 0 0;
      color: rgba(255, 248, 232, 0.82);
      font-size: clamp(0.98rem, 1.1vw, 1.1rem);
      font-weight: 800;
      line-height: 1.82;
    }

    .noodle-persona-gallery__intro a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      margin-top: 26px;
      padding: 0 18px;
      border: 1px solid rgba(255, 248, 232, 0.28);
      border-radius: 999px;
      background: #fff8eb;
      color: #2b150d;
      font-size: 0.92rem;
      font-weight: 900;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
      transition: transform 180ms ease, background 180ms ease;
    }

    .noodle-persona-gallery__intro a:hover,
    .noodle-persona-gallery__intro a:focus-visible {
      background: #bdd457;
      transform: translateY(-2px);
    }

    .noodle-persona-gallery__stage {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      width: 100%;
      min-height: min(78svh, 780px);
      overflow: visible;
      padding-left: clamp(520px, 44vw, 720px);
    }

    .noodle-persona-gallery__track {
      display: flex;
      align-items: center;
      width: max-content;
      gap: clamp(18px, 2.4vw, 34px);
      padding-right: clamp(80px, 12vw, 180px);
      will-change: transform;
    }

    .noodle-persona-card {
      position: relative;
      display: flex;
      flex: 0 0 clamp(270px, 25vw, 390px);
      aspect-ratio: 4 / 5;
      overflow: hidden;
      border: 1px solid rgba(255, 248, 232, 0.22);
      border-radius: clamp(20px, 2vw, 30px);
      background: #1d0d08;
      box-shadow:
        0 42px 90px rgba(0, 0, 0, 0.44),
        0 0 0 1px color-mix(in srgb, var(--persona-accent) 42%, transparent);
      opacity: 0.52;
      transform: scale(0.88) translateY(18px);
      transform-origin: center;
      transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
      will-change: transform, opacity;
    }

    .noodle-persona-card.is-active {
      opacity: 1;
      filter: saturate(1.05) contrast(1.03);
      transform: scale(1) translateY(0);
    }

    .noodle-persona-card__media,
    .noodle-persona-card__media img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
    }

    .noodle-persona-card__media img {
      object-fit: cover;
    }

    .noodle-persona-card__copy {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 52px 18px 18px;
      color: #fff8eb;
      background: linear-gradient(180deg, transparent 0%, rgba(14, 6, 4, 0.44) 26%, rgba(14, 6, 4, 0.92) 100%);
      text-shadow: 0 8px 24px rgba(0, 0, 0, 0.58);
    }

    .noodle-persona-card__copy span,
    .noodle-persona-card__copy small {
      color: #f0c27f;
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .noodle-persona-card__copy h3 {
      max-width: 10em;
      margin: 0;
      color: #fff4df;
      font-family: "Noto Serif TC", "Playfair Display", serif;
      font-size: clamp(1.28rem, 1.75vw, 1.8rem);
      font-weight: 900;
      line-height: 1.12;
      letter-spacing: 0;
    }

    .noodle-persona-card__copy p {
      max-width: 20em;
      margin: 0;
      color: rgba(255, 248, 232, 0.82);
      font-size: 0.84rem;
      font-weight: 800;
      line-height: 1.58;
    }

    .noodle-persona-gallery__progress {
      position: absolute;
      right: clamp(20px, 5vw, 84px);
      bottom: clamp(24px, 5vw, 74px);
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 12px;
      color: rgba(255, 248, 232, 0.78);
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .noodle-persona-gallery__progress i {
      position: relative;
      display: block;
      width: clamp(92px, 11vw, 160px);
      height: 2px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 248, 232, 0.28);
    }

    .noodle-persona-gallery__progress b {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: #f0c27f;
      transform: scaleX(0.1);
      transform-origin: left center;
      will-change: transform;
    }

    @media (max-width: 980px) {
      .noodle-persona-gallery__intro {
        width: min(26rem, 38vw);
      }

      .noodle-persona-gallery__intro h2 {
        --section-headline-size: clamp(3.5rem, 7.1vw, 6.4rem);
      }

      .noodle-persona-gallery__stage {
        padding-left: clamp(390px, 48vw, 520px);
      }
    }

    @media (max-width: 767px) {
      .noodle-persona-gallery {
        min-height: auto;
        overflow: hidden;
        background:
          radial-gradient(circle at 62% 8%, color-mix(in srgb, var(--persona-theme) 42%, transparent), transparent 34%),
          linear-gradient(180deg, #130705 0%, #24120d 48%, #110605 100%);
      }

      .noodle-persona-gallery__pin {
        position: relative;
        top: auto;
        min-height: auto;
        padding: 56px 18px 50px;
      }

      .noodle-persona-gallery__marquee,
      .noodle-persona-gallery__progress {
        display: none;
      }

      .noodle-persona-gallery__intro {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 22rem;
        transform: none;
      }

      .noodle-persona-gallery__intro h2 {
        --section-headline-size: clamp(3.02rem, 15vw, 4.4rem);
        max-width: 100%;
        line-height: 1;
      }

      .noodle-persona-gallery__intro p:not(.section-kicker) {
        max-width: 18rem;
        margin-top: 14px;
        font-size: 0.9rem;
        line-height: 1.64;
      }

      .noodle-persona-gallery__intro a {
        min-height: 44px;
        margin-top: 18px;
        padding: 0 16px;
        font-size: 0.88rem;
      }

      .noodle-persona-gallery__stage {
        min-height: 0;
        margin-top: 26px;
        padding-left: 0;
        overflow: visible;
      }

      .noodle-persona-gallery__track {
        flex-direction: row;
        align-items: stretch;
        width: calc(100vw - 36px);
        max-width: 100%;
        gap: 10px;
        padding: 0 28px 10px 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 0 28px;
        scroll-snap-type: inline proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 48px), rgba(0, 0, 0, 0.42) calc(100% - 16px), transparent 100%);
      }

      .noodle-persona-gallery__track::-webkit-scrollbar {
        display: none;
      }

      .noodle-persona-card {
        flex: 0 0 clamp(122px, 34vw, 154px);
        width: auto;
        max-width: none;
        margin: 0;
        border-radius: 16px;
        opacity: 0.66;
        scroll-snap-align: start;
        transform: scale(0.94) translateY(0);
      }

      .noodle-persona-card.is-active {
        opacity: 1;
        transform: scale(1) translateY(0);
      }

      .noodle-persona-card__copy {
        gap: 4px;
        padding: 46px 10px 12px;
      }

      .noodle-persona-card__copy h3 {
        max-width: 7.8em;
        font-size: 0.98rem;
        line-height: 1.12;
      }

      .noodle-persona-card__copy span {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
      }

      .noodle-persona-card__copy p,
      .noodle-persona-card__copy small {
        display: none;
      }
    }