#scene-01-slice {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          overflow: hidden;
          isolation: isolate;
          container-type: size;
          color: #0f2b22;
          background-color: #fffaf0;
          background-image:
            radial-gradient(ellipse at 14% 14%, rgba(183, 215, 198, 0.14), transparent 34%),
            radial-gradient(ellipse at 88% 78%, rgba(243, 180, 151, 0.12), transparent 34%);
          font-family: sans-serif;
        }

        #scene-01-slice::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 0;
          pointer-events: none;
          opacity: 0.16;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
          background-size: 160px 160px;
        }

        #scene-01-slice [id="f01-slice-stage"] {
          position: relative;
          z-index: 1;
          display: flex;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          flex-direction: column;
          align-items: center;
          padding-top: 1.6667cqh;
          will-change: transform;
        }

        #scene-01-slice [id="f01-slice-photo"] {
          display: block;
          width: 88.8889cqw;
          height: 66.6667cqh;
          box-sizing: border-box;
          border: 0.2cqw solid #361506;
          object-fit: contain;
          object-position: center;
          box-shadow: 0.4cqw 0.4cqw 0 rgba(26, 26, 26, 0.08);
          transform-origin: 50% 50%;
          will-change: transform, opacity;
        }

        #scene-01-slice [id="f01-slice-title-card"] {
          display: flex;
          width: 91.1111cqw;
          height: 12.5cqh;
          box-sizing: border-box;
          flex: 0 0 auto;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-top: 0.78cqh;
          padding: 0.6944cqh 1cqw;
          border: 0.2cqw solid #361506;
          border-radius: 2rem;
          background: #fffaf0;
          box-shadow: 0.4cqw 0.4cqw 0 rgba(26, 26, 26, 0.08);
        }

        #scene-01-slice [id="f01-slice-title-line-one"],
        #scene-01-slice [id="f01-slice-title-line-two"] {
          display: block;
          width: 78cqw;
          color: #0f2b22;
          font-family: sans-serif;
          font-size: 7.2222cqw;
          font-weight: 700;
          line-height: 1;
          letter-spacing: -0.01em;
          text-align: center;
          white-space: pre-line;
          opacity: 0;
          will-change: transform, opacity;
        }

        #scene-01-slice [id="f01-slice-underline"] {
          display: block;
          width: 22.2222cqw;
          height: 2.0833cqh;
          flex: 0 0 auto;
          overflow: visible;
        }

        #scene-01-slice [id="f01-slice-underline"] path {
          fill: none;
          stroke: #c84f18;
          stroke-width: 6;
          stroke-linecap: round;
          stroke-linejoin: round;
        }


        #scene-02-nana,
        #scene-02-nana * {
          box-sizing: border-box;
        }

        #scene-02-nana {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
          container-type: size;
          color: #0f2b22;
          font-family: sans-serif;
          background-color: #fffaf0;
          background-image:
            radial-gradient(circle at 15% 18%, rgba(183, 215, 198, 0.14), transparent 32%),
            radial-gradient(circle at 88% 72%, rgba(243, 180, 151, 0.1), transparent 36%);
        }

        #scene-02-nana #f02-nana-grain {
          position: absolute;
          z-index: 0;
          inset: 0;
          pointer-events: none;
          opacity: 0.45;
          background-image: radial-gradient(rgba(15, 43, 34, 0.08) 0.55px, transparent 0.8px);
          background-size: 9px 9px;
        }

        #scene-02-nana [id="f02-nana-canvas"] {
          position: relative;
          z-index: 1;
          display: flex;
          width: 100%;
          min-height: 100%;
          flex-direction: column;
          align-items: center;
          padding: 30px 32px 24px;
        }

        #scene-02-nana [id="f02-nana-brand"] {
          display: flex;
          min-height: 50px;
          align-items: center;
          justify-content: center;
          margin-bottom: 14px;
          padding: 5px 30px 7px;
          border: 3px solid #0f2b22;
          border-radius: 9999px;
          background: #b7d7c6;
          box-shadow: 6px 6px 0 rgba(26, 26, 26, 0.08);
          color: #0f2b22;
          font-size: 34px;
          font-weight: 700;
          letter-spacing: 0.035em;
          line-height: 1;
        }

        #scene-02-nana .photo-card {
          display: block;
          flex: 0 0 auto;
          padding: 6px;
          border: 5px solid #0f2b22;
          background: #ffffff;
          box-shadow: 8px 8px 0 rgba(26, 26, 26, 0.08);
          transform-origin: 50% 50%;
        }

        #scene-02-nana [id="f02-nana-hero"] {
          width: 520px;
        }

        #scene-02-nana [id="f02-nana-support-grid"] {
          display: grid;
          width: 100%;
          grid-template-columns: 390px 390px;
          justify-content: center;
          gap: 72px;
          margin-top: 16px;
        }

        #scene-02-nana [id="f02-nana-sesame"],
        #scene-02-nana [id="f02-nana-rabbit"] {
          width: 390px;
          opacity: 0;
        }

        #scene-02-nana [id="f02-nana-milk-image"],
        #scene-02-nana [id="f02-nana-sesame-image"],
        #scene-02-nana [id="f02-nana-rabbit-image"] {
          display: block;
          width: 100%;
          height: auto;
          object-fit: contain;
        }

        #scene-02-nana [id="f02-nana-author"] {
          max-width: 900px;
          margin: 18px 0 0;
          color: #0f2b22;
          font-size: 78px;
          font-weight: 700;
          line-height: 1.05;
          text-align: center;
          white-space: pre-line;
          opacity: 0;
        }

        #scene-02-nana [id="f02-nana-accent"] {
          display: block;
          width: 320px;
          height: 18px;
          flex: 0 0 auto;
          margin-top: 12px;
          overflow: visible;
        }

        #scene-02-nana [id="f02-nana-accent-path"] {
          fill: none;
          stroke: #c84f18;
          stroke-width: 9px;
          stroke-linecap: round;
          stroke-linejoin: round;
        }


    #scene-03-hello,
    #scene-03-hello * {
      box-sizing: border-box;
    }

    #scene-03-hello {
      position: relative;
      width: 100%;
      height: 100%;
      container-type: size;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 3.5cqh 5cqw 0;
      color: #0F2B22;
      font-family: sans-serif;
      background:
        radial-gradient(ellipse at 16% 24%, rgba(117, 178, 145, 0.11), transparent 32%),
        radial-gradient(ellipse at 82% 68%, rgba(200, 79, 24, 0.06), transparent 28%),
        #FFFAF0;
    }

    #scene-03-hello .feature-note {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      padding: 0.8cqh 2cqw;
      border: 2px solid #361506;
      border-radius: 9999px;
      background: #FFFFFF;
      box-shadow: 0.3cqw 0.3cqw 0 rgba(26, 26, 26, 0.08);
      color: #0F2B22;
      font-size: 28px;
      font-weight: 600;
      line-height: 1.2;
      white-space: pre-line;
    }

    #scene-03-hello .mascot-stage {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: none;
      width: 36cqw;
      height: 36cqw;
      max-width: 389px;
      max-height: 389px;
      margin-top: 1cqh;
    }

    #scene-03-hello .mascot-image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      transform-origin: 50% 50%;
      will-change: transform;
    }

    #scene-03-hello .headline-group {
      position: relative;
      z-index: 1;
      display: flex;
      flex: none;
      flex-direction: column;
      align-items: center;
      width: 90cqw;
      max-width: 972px;
      margin-top: 0.8cqh;
      text-align: center;
    }

    #scene-03-hello .headline {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin: 0;
      color: #0F2B22;
      font-size: 72px;
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.015em;
      white-space: pre-line;
    }

    #scene-03-hello .headline-fragment {
      display: block;
      width: 100%;
      max-width: 100%;
      opacity: 0;
      text-align: center;
      white-space: pre-line;
      will-change: transform;
    }

    #scene-03-hello .accent-line {
      display: block;
      flex: none;
      width: 60px;
      height: 4px;
      margin-top: 0.4cqh;
      border-radius: 9999px;
      background: #C84F18;
      opacity: 0;
      will-change: transform, opacity;
    }

    #scene-03-hello .connection {
      position: absolute;
      z-index: 0;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    #scene-03-hello .connection path {
      fill: none;
      stroke: #C84F18;
      stroke-width: 6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #scene-03-hello .photo-shell {
      position: relative;
      z-index: 1;
      display: flex;
      flex: none;
      align-items: center;
      justify-content: center;
      width: 49cqw;
      max-width: 560px;
      margin-top: 2.3cqh;
      padding: 12px;
      border: 2px solid #361506;
      border-radius: 2rem;
      background: #FFFFFF;
      box-shadow: 0.4cqw 0.4cqw 0 rgba(26, 26, 26, 0.08);
    }

    #scene-03-hello .photo-image {
      display: block;
      width: 100%;
      height: auto;
      max-width: 100%;
    }


        #scene-04-focus {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          overflow: hidden;
          isolation: isolate;
          container-type: size;
          color: #0f2b22;
          background-color: #fffaf0;
          background-image:
            radial-gradient(ellipse at 12% 12%, rgba(183, 215, 198, 0.14), transparent 34%),
            radial-gradient(ellipse at 88% 78%, rgba(243, 180, 151, 0.12), transparent 34%);
          font-family: sans-serif;
        }

        #scene-04-focus [id="f04-focus-stage"] {
          position: relative;
          z-index: 1;
          display: flex;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          flex-direction: column;
          align-items: center;
          padding-top: 3.2cqh;
          will-change: transform;
        }

        #scene-04-focus [id="f04-focus-text-band"] {
          display: flex;
          width: 90cqw;
          height: 20.8333cqh;
          box-sizing: border-box;
          flex: 0 0 auto;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 0.8cqh 1cqw;
          border: 0.2cqw solid #361506;
          border-radius: 2rem;
          background: #fffaf0;
          box-shadow: 0.4cqw 0.4cqw 0 rgba(26, 26, 26, 0.08);
        }

        #scene-04-focus [id="f04-focus-phrase-one"],
        #scene-04-focus [id="f04-focus-phrase-two"],
        #scene-04-focus [id="f04-focus-phrase-three"] {
          display: block;
          width: 78cqw;
          color: #0f2b22;
          font-family: sans-serif;
          font-size: 7.2222cqw;
          font-weight: 700;
          line-height: 1.04;
          letter-spacing: -0.01em;
          text-align: center;
          white-space: pre-line;
          opacity: 0;
          will-change: transform, opacity;
        }

        #scene-04-focus [id="f04-focus-underline"] {
          display: block;
          width: 25cqw;
          height: 1.4583cqh;
          flex: 0 0 auto;
          margin-top: 0.25cqh;
          overflow: visible;
        }

        #scene-04-focus [id="f04-focus-underline"] path {
          fill: none;
          stroke: #c84f18;
          stroke-width: 6;
          stroke-linecap: round;
          stroke-linejoin: round;
        }

        #scene-04-focus [id="f04-focus-photo"] {
          display: block;
          width: 72.2222cqw;
          height: 54.1667cqh;
          box-sizing: border-box;
          flex: 0 0 auto;
          margin-top: 1.25cqh;
          border: 0.2cqw solid #361506;
          object-fit: contain;
          object-position: center;
          box-shadow: 0.4cqw 0.4cqw 0 rgba(26, 26, 26, 0.08);
          transform-origin: 50% 50%;
          will-change: transform, opacity;
        }


        #scene-05-journal,
        #scene-05-journal * {
          box-sizing: border-box;
        }

        #scene-05-journal {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
          container-type: size;
          color: #0f2b22;
          font-family: sans-serif;
          background-color: #fffaf0;
          background-image:
            radial-gradient(circle at 15% 18%, rgba(183, 215, 198, 0.14), transparent 32%),
            radial-gradient(circle at 88% 72%, rgba(243, 180, 151, 0.1), transparent 36%);
        }

        #scene-05-journal #f05-journal-grain {
          position: absolute;
          z-index: 0;
          inset: 0;
          pointer-events: none;
          opacity: 0.45;
          background-image: radial-gradient(rgba(15, 43, 34, 0.08) 0.55px, transparent 0.8px);
          background-size: 9px 9px;
        }

        #scene-05-journal [id="f05-journal-content"] {
          position: relative;
          z-index: 1;
          display: flex;
          width: 100%;
          min-height: 100%;
          flex-direction: column;
          align-items: center;
          padding: 30px 32px 24px;
          transform-origin: 50% 50%;
        }

        #scene-05-journal [id="f05-journal-function-note"] {
          display: flex;
          min-height: 48px;
          align-items: center;
          justify-content: center;
          margin-bottom: 10px;
          padding: 7px 24px 9px;
          border: 3px solid #0f2b22;
          border-radius: 9999px;
          background: #ffffff;
          box-shadow: 6px 6px 0 rgba(26, 26, 26, 0.08);
          color: #0f2b22;
          font-size: 28px;
          font-weight: 600;
          letter-spacing: 0.06em;
          line-height: 1;
          white-space: pre-line;
        }

        #scene-05-journal [id="f05-journal-mascot"] {
          display: block;
          width: 300px;
          height: 300px;
          margin-bottom: 10px;
          object-fit: contain;
          transform-origin: 50% 50%;
        }

        #scene-05-journal [id="f05-journal-photo-card"] {
          display: block;
          width: 580px;
          margin-bottom: 20px;
          padding: 6px;
          border: 5px solid #0f2b22;
          background: #ffffff;
          box-shadow: 8px 8px 0 rgba(26, 26, 26, 0.08);
          transform-origin: 50% 50%;
        }

        #scene-05-journal [id="f05-journal-photo"] {
          display: block;
          width: 100%;
          height: auto;
          object-fit: contain;
        }

        #scene-05-journal [id="f05-journal-headline"] {
          max-width: 1016px;
          margin: 0;
          color: #0f2b22;
          font-size: 78px;
          font-weight: 700;
          line-height: 1.05;
          text-align: center;
          white-space: pre-line;
          opacity: 0;
        }

        #scene-05-journal [id="f05-journal-detail-row"] {
          display: grid;
          width: 100%;
          max-width: 880px;
          grid-template-columns: minmax(0, 1fr) 170px;
          align-items: center;
          gap: 22px;
          margin-top: 18px;
        }

        #scene-05-journal [id="f05-journal-secondary"] {
          margin: 0;
          color: #0f2b22;
          font-size: 42px;
          font-weight: 500;
          line-height: 1.3;
          white-space: pre-line;
          opacity: 0;
        }

        #scene-05-journal [id="f05-journal-stamp"] {
          display: flex;
          width: 170px;
          height: 170px;
          flex: 0 0 auto;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 2px;
          padding: 10px;
          border: 4px solid #0f2b22;
          border-radius: 50%;
          background: #b7d7c6;
          box-shadow: 6px 6px 0 rgba(26, 26, 26, 0.08);
          color: #0f2b22;
          opacity: 0;
          transform-origin: 50% 50%;
        }

        #scene-05-journal [id="f05-journal-check"] {
          display: block;
          width: 76px;
          height: 76px;
          flex: 0 0 auto;
          overflow: visible;
        }

        #scene-05-journal [id="f05-journal-check-path"] {
          fill: none;
          stroke: #c84f18;
          stroke-width: 8px;
          stroke-linecap: round;
          stroke-linejoin: round;
        }

        #scene-05-journal [id="f05-journal-stamp-name"] {
          color: #0f2b22;
          font-size: 20px;
          font-weight: 700;
          letter-spacing: 0.02em;
          line-height: 1;
          white-space: nowrap;
        }


        #scene-06-next-bake {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          overflow: hidden;
          isolation: isolate;
          container-type: size;
          color: #0f2b22;
          background-color: #fffaf0;
          background-image:
            radial-gradient(ellipse at 14% 16%, rgba(183, 215, 198, 0.15), transparent 34%),
            radial-gradient(ellipse at 86% 83%, rgba(243, 180, 151, 0.12), transparent 36%);
          font-family: sans-serif;
        }

        #scene-06-next-bake [id="f06-next-bake-stage"] {
          position: relative;
          z-index: 1;
          display: flex;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          flex-direction: column;
          align-items: center;
          padding: 2.0833cqh 6.6667cqw 0;
          will-change: transform;
        }

        #scene-06-next-bake [id="f06-next-bake-photo-card"] {
          display: block;
          width: 86.6667cqw;
          max-width: 100%;
          box-sizing: border-box;
          flex: 0 0 auto;
          padding: 1.25cqw;
          border: 0.28cqw solid #361506;
          border-radius: 2rem;
          background: #ffffff;
          box-shadow: 0.4cqw 0.4cqw 0 rgba(26, 26, 26, 0.08);
          transform-origin: 50% 50%;
          will-change: transform, opacity;
        }

        #scene-06-next-bake [id="f06-next-bake-photo"] {
          display: block;
          width: 100%;
          height: auto;
          object-fit: contain;
          object-position: center;
        }

        #scene-06-next-bake [id="f06-next-bake-brand-row"] {
          display: flex;
          width: 88cqw;
          box-sizing: border-box;
          flex: 0 0 auto;
          align-items: center;
          justify-content: center;
          gap: 1.8cqw;
          margin-top: 0.65cqh;
        }

        #scene-06-next-bake [id="f06-next-bake-mascot"] {
          display: block;
          width: 7.6cqw;
          height: 7.6cqw;
          flex: 0 0 auto;
          object-fit: contain;
          transform-origin: 50% 50%;
          will-change: transform, opacity;
        }

        #scene-06-next-bake [id="f06-next-bake-wordmark"] {
          display: block;
          max-width: 100%;
          color: #0f2b22;
          font-family: sans-serif;
          font-size: 4cqw;
          font-weight: 700;
          line-height: 1.08;
          letter-spacing: -0.015em;
          text-align: left;
          white-space: pre-line;
          opacity: 0;
          will-change: transform, opacity;
        }

        #scene-06-next-bake [id="f06-next-bake-tagline"] {
          display: block;
          width: 90cqw;
          max-width: 100%;
          margin-top: 0.35cqh;
          color: #0f2b22;
          font-family: sans-serif;
          font-size: 4.9cqw;
          font-weight: 700;
          line-height: 1.08;
          letter-spacing: -0.01em;
          text-align: center;
          white-space: pre-line;
          opacity: 0;
          will-change: transform, opacity;
        }

        #scene-06-next-bake [id="f06-next-bake-accent"] {
          display: block;
          width: 25cqw;
          height: 1.25cqh;
          flex: 0 0 auto;
          margin-top: 0.1cqh;
          overflow: visible;
        }

        #scene-06-next-bake [id="f06-next-bake-accent"] path {
          fill: none;
          stroke: #c84f18;
          stroke-width: 6;
          stroke-linecap: round;
          stroke-linejoin: round;
        }

        #scene-06-next-bake [id="f06-next-bake-boundary"] {
          display: block;
          width: 90cqw;
          max-width: 100%;
          margin-top: 0.2cqh;
          color: #0f2b22;
          font-family: sans-serif;
          font-size: 2.75cqw;
          font-weight: 500;
          line-height: 1.2;
          text-align: center;
          white-space: pre-line;
          opacity: 0;
          will-change: transform, opacity;
        }