@font-face {
      font-family: "Plus Jakarta Sans";
      src: url("../fonts/PlusJakartaSans-Variable.ttf") format("truetype");
      font-weight: 200 800;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Montserrat";
      src: url("../fonts/Montserrat-Variable.ttf") format("truetype");
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }

    @font-face { font-family: "MiSans"; src: url("../fonts/MISANS-THIN.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
    @font-face { font-family: "MiSans"; src: url("../fonts/MISANS-EXTRALIGHT.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
    @font-face { font-family: "MiSans"; src: url("../fonts/MISANS-LIGHT.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
    @font-face { font-family: "MiSans"; src: url("../fonts/MISANS-NORMAL.woff2") format("woff2"); font-weight: 350; font-style: normal; font-display: swap; }
    @font-face { font-family: "MiSans"; src: url("../fonts/MISANS-REGULAR.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: "MiSans"; src: url("../fonts/MISANS-MEDIUM.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
    @font-face { font-family: "MiSans"; src: url("../fonts/MISANS-DEMIBOLD.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
    @font-face { font-family: "MiSans"; src: url("../fonts/MISANS-SEMIBOLD.woff2") format("woff2"); font-weight: 650; font-style: normal; font-display: swap; }
    @font-face { font-family: "MiSans"; src: url("../fonts/MISANS-BOLD.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
    @font-face { font-family: "MiSans"; src: url("../fonts/MISANS-HEAVY.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

    :root {
      --ink: #08080b;
      --ink-soft: #101013;
      --panel: #141416;
      --text: #f7f6fa;
      --muted: #85858f;
      --line: rgba(255, 255, 255, .14);
      --line-soft: rgba(255, 255, 255, .07);
      --green: #16b73e;
      --blue: #444bbb;
      --orange: #cf4423;
      --violet: #913dff;
      --page-pad: clamp(24px, 4.2vw, 80px);
      --content: 1680px;
      --ease-out: cubic-bezier(.16, 1, .3, 1);
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--ink); }
    body {
      margin: 0;
      min-width: 720px;
      overflow-x: clip;
      background: var(--ink);
      color: var(--text);
      font-family: "MiSans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    img { display: block; max-width: 100%; }
    figure { margin: 0; }
    a { color: inherit; text-decoration: none; }
    button, a { -webkit-tap-highlight-color: transparent; }
    ::selection { background: #f5f3ff; color: #0a090d; }

    .skip-link {
      position: fixed;
      z-index: 1000;
      left: 16px;
      top: 16px;
      padding: 10px 14px;
      transform: translateY(-150%);
      background: var(--text);
      color: var(--ink);
      transition: transform .25s ease;
    }
    .skip-link:focus-visible { transform: translateY(0); }
    .visually-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .loader {
      position: fixed;
      z-index: 900;
      inset: 0;
      display: grid;
      align-content: space-between;
      padding: 28px var(--page-pad) 34px;
      background: #08080b;
      transition: opacity .4s var(--ease-out), visibility .4s;
    }
    .loader[hidden] { display: none; }
    .loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
    .loader__top, .loader__bottom { display: flex; align-items: center; justify-content: space-between; }
    .loader__brand { width: 138px; opacity: .55; }
    .loader__counter {
      font-family: "Montserrat", sans-serif;
      font-size: 12px;
      letter-spacing: .14em;
      color: var(--muted);
    }
    .loader__title {
      margin: 0;
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: clamp(52px, 11vw, 180px);
      font-weight: 720;
      letter-spacing: -.065em;
      line-height: .84;
    }
    .loader__line { flex: 1; height: 1px; margin-right: 24px; overflow: hidden; background: var(--line); }
    .loader__line::after {
      content: "";
      display: block;
      width: var(--load, 0%);
      height: 100%;
      background: var(--text);
      transition: width .2s ease-out;
    }

    .progress {
      position: fixed;
      z-index: 300;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: rgba(255, 255, 255, .06);
    }
    .progress__bar {
      width: 100%;
      height: 100%;
      transform: scaleX(0);
      transform-origin: left;
      background: var(--text);
      will-change: transform;
    }

    .site-header {
      position: fixed;
      z-index: 250;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 25px var(--page-pad);
      pointer-events: none;
      mix-blend-mode: difference;
    }
    .site-header > * { pointer-events: auto; }
    .chapter-status {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-family: "Montserrat", sans-serif;
      font-size: 11px;
      letter-spacing: .08em;
      color: rgba(255,255,255,.72);
    }
    .chapter-status strong { font-size: 15px; font-weight: 500; color: white; }

    .chapter-nav {
      position: fixed;
      z-index: 240;
      right: var(--page-pad);
      top: 50%;
      display: none;
      gap: 11px;
      transform: translateY(-50%);
      mix-blend-mode: difference;
    }
    .chapter-nav a {
      display: grid;
      width: 32px;
      height: 24px;
      place-items: center;
      color: rgba(255,255,255,.38);
      font-size: 0;
      transition: color .35s ease;
    }
    .chapter-nav a::after {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      transition: transform .35s var(--ease-out), background .35s ease;
    }
    .chapter-nav a[aria-current="true"] { color: white; }
    .chapter-nav a[aria-current="true"]::after { transform: scale(1.65); }
    .chapter-nav a:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; }

    main { position: relative; }
    .section {
      position: relative;
      min-height: 100svh;
      overflow: clip;
      border-bottom: 1px solid var(--line-soft);
      background: var(--ink);
      scroll-margin-top: 1px;
    }
    .section__inner {
      position: relative;
      width: min(100%, var(--content));
      min-height: inherit;
      margin: 0 auto;
      padding: clamp(92px, 10vh, 130px) var(--page-pad) clamp(80px, 10vh, 130px);
    }
    .section__meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: clamp(34px, 6vw, 86px);
      color: var(--muted);
      font-family: "Montserrat", sans-serif;
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .section__meta::after { content: ""; flex: 1; max-width: 140px; height: 1px; background: var(--line); }
    .section__title {
      margin: 0;
      font-family: "Plus Jakarta Sans", "MiSans", sans-serif;
      font-size: clamp(44px, 7.4vw, 132px);
      font-weight: 560;
      line-height: .95;
      letter-spacing: -.055em;
    }
    .section__lead {
      max-width: 520px;
      margin: 24px 0 0;
      color: var(--muted);
      font-size: clamp(14px, 1.25vw, 20px);
      line-height: 1.75;
    }
    .micro-label {
      font-family: "Montserrat", sans-serif;
      font-size: 9px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .js .reveal {
      opacity: 0;
      transform: translate3d(0, 44px, 0);
      filter: blur(8px);
      transition:
        opacity .9s var(--ease-out) var(--delay, 0ms),
        transform 1.05s var(--ease-out) var(--delay, 0ms),
        filter 1.05s var(--ease-out) var(--delay, 0ms);
    }
    .js .reveal.is-visible { opacity: 1; transform: none; filter: none; }
    .media-reveal { position: relative; overflow: hidden; }
    .js .media-reveal img {
      opacity: 0;
      filter: blur(7px);
      transform: translate3d(0, 26px, 0) scale(1.018);
      transition:
        opacity .9s var(--ease-out) var(--delay, 0ms),
        filter 1.05s var(--ease-out) var(--delay, 0ms),
        transform 1.15s var(--ease-out) var(--delay, 0ms);
    }
    .js .media-reveal.is-visible img { opacity: 1; filter: none; transform: none; }

    /* 01 */
    .hero { min-height: max(100svh, 760px); background: #000; }
    .hero::before {
      content: none;
    }
    .hero__inner { z-index: 1; isolation: isolate; padding-top: 84px; padding-bottom: 34px; }
    .hero__brand {
      position: absolute;
      z-index: 4;
      top: 25px;
      left: var(--page-pad);
      line-height: 0;
    }
    .hero__brand img { width: clamp(96px, 8vw, 140px); height: auto; opacity: .8; }
    .hero__skills {
      position: absolute;
      z-index: 4;
      top: 38px;
      right: var(--page-pad);
      display: flex;
      gap: clamp(10px, 1.5vw, 28px);
      color: #5f6068;
      font-family: "Montserrat", sans-serif;
      font-size: clamp(8px, .68vw, 12px);
    }
    .hero__title {
      position: relative;
      z-index: 3;
      margin: 0 auto;
      width: max-content;
      max-width: 100%;
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: clamp(82px, 13.7vw, 264px);
      font-weight: 780;
      line-height: .9;
      letter-spacing: -.065em;
      white-space: nowrap;
      transition: opacity .35s ease;
    }
    .hero__portrait {
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 12vh;
      width: min(52vw, 840px);
      height: min(88vh, 950px);
      transform: translate3d(-50%, var(--parallax-y, 0px), 0);
      object-fit: contain;
      object-position: center bottom;
      mix-blend-mode: screen;
      will-change: transform;
      transition: opacity .35s ease;
    }
    .hero__info {
      position: absolute;
      z-index: 3;
      left: var(--page-pad);
      right: var(--page-pad);
      bottom: 38px;
      display: grid;
      grid-template-columns: minmax(240px, 420px) minmax(280px, 460px);
      justify-content: space-between;
      align-items: end;
      gap: 40px;
    }
    .hero__identity { margin: 0 0 18px; color: #777882; font-size: 15px; line-height: 1.55; }
    .hero__statement { margin: 0; max-width: 380px; color: #858691; font-size: clamp(14px, 1.1vw, 19px); line-height: 1.65; }
    .hero__bio { margin: 0; color: #686972; font-size: clamp(13px, 1.05vw, 18px); line-height: 1.75; }

    /* 02 */
    .concept__copy { position: relative; z-index: 3; width: 46%; }
    .concept__subtitle { margin: 26px 0 12px; font-size: clamp(18px, 1.45vw, 28px); font-weight: 450; letter-spacing: -.02em; }
    .concept__visual {
      position: absolute;
      z-index: 1;
      left: 25%;
      right: -6%;
      top: 12%;
      bottom: 8%;
      display: flex;
      align-items: center;
    }
    .concept__visual picture { width: 100%; transform: translate3d(0, var(--parallax-y, 0px), 0); will-change: transform; }
    .concept__visual img { width: 100%; height: auto; }
    .concept__rectangle-225 {
      position: absolute;
      z-index: 2;
      top: -.83%;
      right: -.1%;
      bottom: 0;
      width: 17.5%;
      background: rgba(27, 26, 28, .08);
      -webkit-backdrop-filter: blur(45px);
      backdrop-filter: blur(45px);
      transform: rotate(180deg);
      pointer-events: none;
    }
    .concept__year { position: absolute; z-index: 3; right: var(--page-pad); bottom: 34px; }
    .concept__project { position: absolute; z-index: 3; left: var(--page-pad); bottom: 34px; }

    /* 03–04 */
    .strategy .section__inner { width: 100%; max-width: none; min-height: 100svh; padding: 0; }
    .strategy__intro { position: absolute; z-index: 10; left: var(--page-pad); top: 6.48%; margin: 0; }
    #section-03 .strategy__intro { left: calc(max(0px, (100% - var(--content)) / 2) + var(--page-pad)); }
    #section-04 .strategy__intro { left: 3.35%; }
    .strategy__intro .section__meta { display: none; }
    .strategy__intro .section__title { font-size: clamp(26px, 1.9vw, 36px); letter-spacing: -.025em; }
    .strategy__intro .section__lead { max-width: 680px; margin-top: 14px; font-size: clamp(12px, .84vw, 16px); line-height: 1.7; }
    .diagram-board { position: relative; width: 100%; height: 100svh; min-height: 720px; overflow: hidden; background: transparent; }
    .bridge-board { container-type: inline-size; }
    #section-04 .strategy__intro .section__lead { display: none; }
    .diagram-project { position: absolute; left: 3.35%; bottom: 8.5%; }

    .insight__axis-h { position: absolute; left: 12.4%; top: 50.37%; width: 75.03%; height: auto; }
    .insight__axis-v { position: absolute; top: 24.3%; width: 1px; height: 56.1%; opacity: .72; }
    .insight__axis-v:nth-of-type(2) { left: 25.68%; }
    .insight__axis-v:nth-of-type(3) { left: 38.65%; }
    .insight__axis-v:nth-of-type(4) { left: 54.27%; }
    .insight__axis-v:nth-of-type(5) { left: 70.05%; }
    .insight__role {
      position: absolute;
      display: grid;
      place-items: center;
      border-radius: 50%;
      text-align: center;
      isolation: isolate;
    }
    .insight__role::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--circle); }
    .insight__role--father { left: 17%; top: 34.45%; width: 17.5%; aspect-ratio: 1; --circle: #19ac40; }
    .insight__role--husband {
      left: 30.18%; top: 34.45%; width: 17.5%; aspect-ratio: 1; --circle: rgba(70, 77, 209, .8);
    }
    .insight__role--husband::before { -webkit-backdrop-filter: blur(24.3px); backdrop-filter: blur(24.3px); }
    .insight__role--worker { left: 45.08%; top: 33.15%; width: 18.96%; aspect-ratio: 1; --circle: #191a1e; }
    .insight__role--driver { left: 60.08%; top: 31.2%; width: 21.15%; aspect-ratio: 1; --circle: #202125; }
    .insight__role h3 { margin: 0 0 .45em; color: #fff; font-size: clamp(20px, 1.88vw, 36px); font-weight: 430; }
    .insight__role p { margin: 0; color: #7c7d87; font-size: clamp(9px, .84vw, 16px); white-space: nowrap; }
    .insight__role--father p, .insight__role--husband p { color: rgba(255, 255, 255, .8); }
    .insight__endpoint { position: absolute; left: 87.25%; top: 50.1%; width: 6px; height: 6px; }

    .bridge__outer { position: absolute; left: 26.46%; top: 8.15%; width: 47.08%; height: auto; }
    .bridge__shadow { position: absolute; left: 34.95%; top: 23.24%; width: 30.1%; height: auto; }
    .bridge__core { position: absolute; left: 36.72%; top: 26.3%; width: 26.61%; height: auto; }
    .bridge__node { position: absolute; width: 6.05%; height: auto; }
    .bridge__node--l1 { left: 27.1267%; top: 22.12%; top: calc(8.15% + 7.8589cqw); }
    .bridge__node--l2 { left: 23.8937%; top: 36.4%; top: calc(8.15% + 15.8904cqw); }
    .bridge__node--l3 { left: 23.8832%; top: 52.75%; top: calc(8.15% + 25.0864cqw); }
    .bridge__node--l4 { left: 27.1629%; top: 67.22%; top: calc(8.15% + 33.2277cqw); }
    .bridge__node--r1 { left: 66.8233%; top: 22.12%; top: calc(8.15% + 7.8589cqw); }
    .bridge__node--r2 { left: 70.0563%; top: 36.4%; top: calc(8.15% + 15.8904cqw); }
    .bridge__node--r3 { left: 70.0668%; top: 52.75%; top: calc(8.15% + 25.0864cqw); }
    .bridge__node--r4 { left: 66.7871%; top: 67.22%; top: calc(8.15% + 33.2277cqw); }
    .bridge__center, .bridge__side, .bridge__tag { position: absolute; text-align: center; }
    .bridge__center { left: 40%; top: 48.89%; width: 20%; transform: translateY(-50%); color: #cccdd4; font-size: clamp(24px, 2.08vw, 40px); line-height: 1.3; }
    .bridge__side { transform: translateY(-25%); color: #cccdd4; font-size: clamp(18px, 1.67vw, 32px); line-height: 1.25; }
    .js .bridge__center.reveal.is-visible { transform: translateY(-50%); }
    .js .bridge__side.reveal.is-visible { transform: translateY(-25%); }
    .bridge__side small { display: block; margin-top: .35em; color: #7c7d87; font-size: .62em; }
    .bridge__side--left { left: 30.31%; top: 47.78%; } .bridge__side--right { left: 66.35%; top: 46.48%; }
    .bridge__tag { width: 6.05%; transform: translateY(-50%); color: #7c7d87; font-size: clamp(10px, 1.04vw, 20px); }
    .js .bridge__tag.reveal.is-visible { transform: translateY(-50%); }
    .bridge__tag--l1 { left: 27.1267%; top: 27.5%; top: calc(8.15% + 10.8839cqw); } .bridge__tag--l2 { left: 23.8937%; top: 41.78%; top: calc(8.15% + 18.9154cqw); }
    .bridge__tag--l3 { left: 23.8832%; top: 58.13%; top: calc(8.15% + 28.1114cqw); } .bridge__tag--l4 { left: 27.1629%; top: 72.6%; top: calc(8.15% + 36.2527cqw); }
    .bridge__tag--r1 { left: 66.8233%; top: 27.5%; top: calc(8.15% + 10.8839cqw); } .bridge__tag--r2 { left: 70.0563%; top: 41.78%; top: calc(8.15% + 18.9154cqw); }
    .bridge__tag--r3 { left: 70.0668%; top: 58.13%; top: calc(8.15% + 28.1114cqw); } .bridge__tag--r4 { left: 66.7871%; top: 72.6%; top: calc(8.15% + 36.2527cqw); }

    /* 05 */
    .mood { min-height: auto; }
    .mood__heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 40px; margin-bottom: 70px; }
    .mood__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.25vw, 24px); }
    .mood__card { position: relative; aspect-ratio: 624 / 688; overflow: hidden; background: #0b0b0e; }
    .mood__card img { width: 100%; height: 100%; object-fit: cover; transition-duration: .9s; }
    .mood__card:nth-child(2), .mood__card:nth-child(5) { transform: translateY(7%); }
    @media (hover: hover) and (pointer: fine) {
      .js .mood__card.is-visible:hover img { transform: scale(1.065); }
    }

    /* 06 */
    .system { background: #121212; }
    .system__layout { position: relative; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; }
    .system__spec {
      position: absolute;
      z-index: 2;
      inset: 0 auto 0 0;
      width: 61.2%;
      display: grid;
      grid-template-rows: 18.2% 19.3% 20.8% 41.7%;
    }
    .system__row {
      display: grid;
      grid-template-columns: 28% 72%;
      gap: 0;
      min-height: 0;
      padding: clamp(10px, 1.15vw, 22px) 0;
      overflow: hidden;
      border-top: 1px solid var(--line);
    }
    .system__row:nth-child(1) { padding-top: clamp(24px, 2.45vw, 47px); }
    .system__row:nth-child(3) { padding-top: clamp(18px, 1.35vw, 26px); padding-bottom: clamp(22px, 1.82vw, 35px); }
    .system__name { color: #777880; font-family: "Montserrat", sans-serif; font-size: clamp(8px, .58vw, 11px); }
    .wordmark { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(48px, 5vw, 96px); line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
    .type-sample { font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(22px, 2vw, 40px); line-height: 1.02; white-space: nowrap; }
    .swatches { display: grid; grid-template-columns: repeat(4, 1fr); }
    .swatch { min-height: 0; padding: 10px 10px 0; display: flex; flex-direction: column; color: white; font-family: "MiSans", sans-serif; font-size: clamp(7px, .58vw, 12px); font-weight: 400; line-height: 1.06; }
    .swatch:nth-child(1) { background: #0a090d; border: 1px solid #242429; }
    .swatch:nth-child(2) { background: #1a1924; }
    .swatch:nth-child(3) { background: #4a4a52; }
    .swatch:nth-child(4) { background: #f5f3ff; color: #0a090d; }
    .swatch__name { margin-bottom: .7em; }
    .swatch__values { display: block; white-space: nowrap; }
    .swatch::after { content: ""; height: clamp(8px, .9vw, 17px); margin: auto -10px 0; background: var(--swatch-accent); }
    .marking { position: relative; min-height: 100%; overflow: hidden; font-family: "Plus Jakarta Sans", sans-serif; }
    .marking strong { position: relative; z-index: 2; display: block; padding-top: 3.8%; font-size: clamp(40px, 4vw, 80px); line-height: 1; font-weight: 450; letter-spacing: -.045em; white-space: nowrap; }
    .marking span { position: absolute; z-index: 2; left: 0; bottom: 0; display: block; font-size: clamp(26px, 2.67vw, 52px); line-height: 1.02; }
    .marking-lines { position: absolute; z-index: 1; inset: 5% 0 0; background: url("../vectors/marking-system-lines.svg") center top / 100% 100% no-repeat; }
    .marking__dash { position: absolute; z-index: 2; left: 0; top: 46%; width: 8.5%; height: clamp(3px, .25vw, 5px); background: #d9d9d9; }
    .system__car {
      position: absolute;
      z-index: 1;
      left: 45%;
      top: -10%;
      width: 100%;
      height: 120%;
      min-height: 0;
      overflow: visible;
      background: transparent;
      mix-blend-mode: lighten;
      pointer-events: none;
    }
    .system__car img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* 07 */
    .icons { background: #121212; }
    .icons .section__inner { display: grid; align-content: start; max-width: 1920px; padding-top: clamp(52px, 6vh, 82px); padding-bottom: clamp(280px, 24vw, 320px); }
    .icons__intro { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 12px; }
    .icons__intro > div { flex: 0 0 48%; }
    .icons__stage { position: relative; width: 100%; height: clamp(520px, 34vw, 650px); }
    .icons__preview { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 31.25%; max-width: 600px; aspect-ratio: 1; margin: 0; background: transparent; border: 0; }
    .icons__preview img { width: 100%; height: 100%; object-fit: contain; }
    .icons__grid { position: absolute; left: 32.92%; top: 40.83%; width: 62.08%; display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 2.01%; row-gap: clamp(10px, 1.2vw, 23px); }
    .icons__item { display: block; aspect-ratio: 1; }
    .icons__item img { width: 100%; height: 100%; object-fit: contain; }

    /* 08 */
    .finale { min-height: 115svh; background: #060609; }
    .finale__visual { position: absolute; inset: 0; }
    .finale__visual picture, .finale__visual img { width: 100%; height: 100%; }
    .finale__visual img { object-fit: cover; object-position: center; }
    .finale__veil { position: absolute; z-index: 2; inset: 0; background: rgba(5,5,8,.18); }
    .finale__copy {
      position: absolute;
      z-index: 3;
      left: var(--page-pad);
      right: var(--page-pad);
      bottom: clamp(62px, 9vh, 120px);
      display: flex;
      align-items: end;
      justify-content: flex-end;
      gap: 30px;
    }

    /* 09–10 */
    .instrument { min-height: 100svh; overflow: hidden; background: #05050c; }
    .instrument__fallback { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; background: #05050c; }
    /* Remove the title from the Chapter 09 poster without shifting the instrument. */
    #section-09 .instrument__fallback { clip-path: polygon(0 11%, 14% 11%, 14% 0, 100% 0, 100% 100%, 0 100%); }
    .instrument__frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #05050c; color-scheme: dark; }
    .finale__title { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(60px, 10vw, 180px); line-height: .83; letter-spacing: -.065em; }
    .finale__aside { max-width: 380px; color: rgba(255,255,255,.66); font-size: 15px; line-height: 1.75; }

    /* 11 */
    .chapter11 {
      min-height: 100svh;
      background: #0a090d;
      isolation: isolate;
    }
    .chapter11__background-mask,
    .chapter11__stage {
      position: absolute;
    }
    .chapter11__background-mask {
      z-index: 0;
      left: -.9375%;
      top: -10.108%;
      width: 101.875%;
      height: 102.254%;
      overflow: visible;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.72) 84%, transparent 100%);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: 0 0;
      -webkit-mask-size: 100% 100%;
      mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.72) 84%, transparent 100%);
      mask-repeat: no-repeat;
      mask-position: 0 0;
      mask-size: 100% 100%;
      mask-mode: alpha;
    }
    .chapter11__background {
      position: absolute;
      left: -.767%;
      top: -1.658%;
      width: 102.352%;
      height: 102.352%;
      object-fit: cover;
      object-position: center;
    }
    .chapter11__stage {
      --c11-u: min(1vw, 1.77778svh);
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      overflow: hidden;
      pointer-events: none;
    }
    .chapter11__profile {
      position: absolute;
      inset: 0;
      color: rgba(255,255,255,.85);
      font-size: calc(var(--c11-u) * 1.25);
      line-height: 1;
    }
    .chapter11__avatar {
      position: absolute;
      left: 2.5%;
      top: 3.52%;
      width: calc(var(--c11-u) * 2.29);
      height: calc(var(--c11-u) * 2.29);
      border-radius: 50%;
      object-fit: cover;
    }
    .chapter11__name {
      position: absolute;
      left: 5.83%;
      top: 4.07%;
      font-weight: 500;
      white-space: nowrap;
    }
    .chapter11__status-icon { display: block; object-fit: contain; }
    .chapter11__status-icon--bluetooth {
      position: absolute;
      left: 11.04%;
      top: 4.54%;
      width: calc(var(--c11-u) * .92);
      height: calc(var(--c11-u) * 1.25);
    }
    .chapter11__network {
      position: absolute;
      left: 13.59%;
      top: 4.35%;
      width: calc(var(--c11-u) * 1.52);
      height: calc(var(--c11-u) * 1.56);
    }
    .chapter11__network span {
      position: absolute;
      top: 0;
      left: 0;
      font-family: "Montserrat", sans-serif;
      font-size: calc(var(--c11-u) * .52);
      font-weight: 700;
      color: white;
    }
    .chapter11__network img {
      position: absolute;
      left: calc(var(--c11-u) * .23);
      bottom: 0;
      width: calc(var(--c11-u) * 1.04);
      height: auto;
    }
    .chapter11__clock {
      position: absolute;
      inset: 0;
      color: white;
    }
    .chapter11__time {
      position: absolute;
      left: 2.6%;
      top: 11.94%;
      font-size: calc(var(--c11-u) * 6.67);
      font-weight: 300;
      line-height: 1;
      letter-spacing: -.055em;
    }
    .chapter11__weekday,
    .chapter11__day {
      position: absolute;
      left: 16.15%;
      font-weight: 200;
      line-height: 1;
      white-space: nowrap;
    }
    .chapter11__weekday { top: 13.06%; font-size: calc(var(--c11-u) * 2.08); }
    .chapter11__day { top: 16.94%; font-size: calc(var(--c11-u) * 2.92); }
    .chapter11__corner-time {
      position: absolute;
      top: 2.13%;
      right: 2.5%;
      margin: 0;
      color: rgba(255,255,255,.85);
      font-size: calc(var(--c11-u) * .94);
      font-weight: 600;
      line-height: 1;
    }
    .chapter11__ip-gif {
      position: absolute;
      z-index: 2;
      left: 3.65%;
      top: 64.72%;
      width: 12.19%;
      height: auto;
      aspect-ratio: 1;
      object-fit: contain;
      object-position: center bottom;
      mix-blend-mode: normal;
      -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 90.5%, rgba(0,0,0,.82) 92%, transparent 96%);
      mask-image: linear-gradient(to bottom, #000 0, #000 90.5%, rgba(0,0,0,.82) 92%, transparent 96%);
    }
    .chapter11__dock {
      position: absolute;
      z-index: 3;
      left: 0;
      right: auto;
      bottom: 1.11%;
      width: 100%;
      height: auto;
      aspect-ratio: 1920 / 90;
      transform: translateY(calc(100% + 3px));
      will-change: transform;
      transition: transform 720ms cubic-bezier(.22, 1, .36, 1);
    }
    .chapter11__dock.is-active { transform: translateY(0); }
    .chapter11__dock-image { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }

    /* 12 */
    .chapter12 {
      min-height: 100svh;
      background: #0a090d;
      isolation: isolate;
    }
    .chapter12__stage {
      --c12-u: min(1vw, 1.77778svh);
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .chapter12__glow,
    .chapter12__glow img,
    .chapter12__dots,
    .chapter12__weather,
    .chapter12__movie,
    .chapter12__side-card,
    .chapter12__bottom {
      position: absolute;
    }
    .chapter12__glow { pointer-events: none; }
    .chapter12__glow img { max-width: none; }
    .chapter12__glow--left { left: -15.89%; top: 60.56%; width: 44.74%; aspect-ratio: 1; }
    .chapter12__glow--left img { inset: -40.6%; width: 181.2%; height: 181.2%; }
    .chapter12__glow--top { left: 23.91%; top: -80.19%; width: 56.41%; aspect-ratio: 1; }
    .chapter12__glow--top img { inset: -83.1%; width: 266.2%; height: 266.2%; }
    .chapter12__dots {
      z-index: 1;
      left: 3.125%;
      top: 41.85%;
      width: 96.3%;
      height: 54.63%;
      overflow: hidden;
      mix-blend-mode: lighten;
      opacity: .85;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 82%, transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 82%, transparent 100%);
    }
    .chapter12__dots img { width: 100%; height: 100%; object-fit: cover; }
    .chapter12__weather {
      z-index: 6;
      left: 10.73%;
      top: 29.45%;
      display: flex;
      align-items: flex-start;
      pointer-events: none;
    }
    .chapter12__cloud {
      position: absolute;
      z-index: 5;
      left: 7.94%;
      top: 33.81%;
      width: 24.5%;
      aspect-ratio: 1;
      max-width: none;
      mix-blend-mode: screen;
      object-fit: cover;
      pointer-events: none;
    }
    .chapter12__temp,
    .chapter12__degree,
    .chapter12__forecast {
      z-index: 2;
      margin: 0;
      color: #fff;
      white-space: nowrap;
    }
    .chapter12__temp { font-size: calc(var(--c12-u) * 4.58); font-weight: 300; line-height: 1; }
    .chapter12__weather-meta {
      position: relative;
      height: calc(var(--c12-u) * 4.58);
      margin-left: calc(var(--c12-u) * 1.25);
    }
    .chapter12__degree {
      position: absolute;
      top: calc(var(--c12-u) * .9);
      left: calc(var(--c12-u) * .06);
      font-size: calc(var(--c12-u) * 1.5);
      font-weight: 400;
      line-height: 1;
    }
    .chapter12__forecast {
      position: absolute;
      top: calc(var(--c12-u) * 3.56);
      left: 0;
      transform: translateY(calc(var(--c12-u) * -.64));
      font-size: calc(var(--c12-u) * 1.15);
      font-weight: 300;
      line-height: 1;
    }
    .chapter12__movie {
      z-index: 4;
      top: 25.56%;
      width: 18.23%;
      height: 48.15%;
      overflow: hidden;
      border-radius: calc(var(--c12-u) * .42);
      background: #111217;
    }
    .chapter12__movie--dune { left: 29.79%; }
    .chapter12__movie--expanse { left: 48.85%; }
    .chapter12__movie-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .chapter12__movie--expanse .chapter12__movie-poster { object-position: center; }
    .chapter12__movie::before,
    .chapter12__movie::after {
      content: "";
      position: absolute;
      z-index: 1;
      left: 0;
      width: 100%;
      height: 11.15%;
      pointer-events: none;
    }
    .chapter12__movie::before { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,.5), transparent); }
    .chapter12__movie::after { bottom: 0; background: linear-gradient(to top, rgba(0,0,0,.58), transparent); }
    .chapter12__vip {
      position: absolute;
      z-index: 3;
      right: 0;
      top: 0;
      width: 22.29%;
      height: 8.46%;
      display: grid;
      place-items: center;
      color: #76512a;
      font-size: calc(var(--c12-u) * 1.04);
      font-weight: 500;
    }
    .chapter12__vip img { position: absolute; inset: 0; width: 100%; height: 100%; }
    .chapter12__vip span { position: relative; z-index: 1; }
    .chapter12__movie-title {
      position: absolute;
      z-index: 3;
      left: 5.7%;
      bottom: 3.45%;
      margin: 0;
      color: #fff;
      font-size: calc(var(--c12-u) * 1.25);
      font-weight: 500;
      line-height: 1;
      white-space: nowrap;
    }
    .chapter12__side-card {
      z-index: 4;
      left: 67.97%;
      width: 18.23%;
      height: 23.15%;
      overflow: hidden;
      border-radius: calc(var(--c12-u) * .42);
      background: linear-gradient(131deg, rgba(56,46,41,.16), rgba(42,73,195,.12));
    }
    .chapter12__side-card--recommend { top: 25.56%; }
    .chapter12__side-card--ni { top: 50.56%; background: linear-gradient(131deg, rgba(56,46,41,.14), rgba(195,119,42,.12)); }
    .chapter12__card-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .chapter12__card-title,
    .chapter12__card-line,
    .chapter12__card-subline {
      position: absolute;
      z-index: 2;
      left: 6.3%;
      margin: 0;
      color: rgba(255,255,255,.85);
      line-height: 1;
      white-space: nowrap;
    }
    .chapter12__card-title { top: 9%; font-size: calc(var(--c12-u) * 1.56); font-weight: 700; }
    .chapter12__card-line { top: 26.8%; font-size: calc(var(--c12-u) * 1.25); font-weight: 700; }
    .chapter12__card-subline { top: 40%; color: rgba(255,255,255,.56); font-size: calc(var(--c12-u) * 1.04); }
    .chapter12__album {
      position: absolute;
      z-index: 2;
      right: 4%;
      bottom: 2.8%;
      width: 36.57%;
      aspect-ratio: 1;
    }
    .chapter12__album-ring { position: absolute; z-index: 1; left: 0; top: 0; width: 93.88%; height: 93.88%; }
    .chapter12__album-ring-inner,
    .chapter12__album-ring-highlight { position: absolute; z-index: 2; left: 3.52%; top: 3.52%; width: 86.84%; height: 86.84%; }
    .chapter12__album-photo { position: absolute; z-index: 3; left: 18%; top: 18%; width: 58%; height: 58%; border-radius: 50%; object-fit: cover; }
    .chapter12__recommend-app { position: absolute; z-index: 2; left: 7.14%; bottom: 7.2%; width: 12.57%; aspect-ratio: 1; }
    .chapter12__ni-copy .chapter12__card-line { top: 27.2%; font-family: "Plus Jakarta Sans", sans-serif; }
    .chapter12__ni-orb {
      position: absolute;
      z-index: 2;
      left: 3.7%;
      bottom: 4%;
      width: 18.3%;
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: var(--radius);
      mix-blend-mode: normal;
      pointer-events: none;
    }
    .chapter12__ni-orb-fallback,
    .chapter12__ni-orb-canvas {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: transparent;
    }
    .chapter12__ni-orb-fallback { z-index: 1; object-fit: cover; opacity: 1; }
    .chapter12__ni-orb-canvas { z-index: 2; image-rendering: auto; }
    .chapter12__ni-orb.is-ready .chapter12__ni-orb-fallback { opacity: 0; }
    .chapter12__ni-character {
      position: absolute;
      z-index: 2;
      right: 4%;
      bottom: 1%;
      width: 42%;
      height: auto;
      aspect-ratio: 147 / 179.047;
      overflow: hidden;
    }
    .chapter12__ni-character img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; image-rendering: auto; backface-visibility: hidden; }
    .chapter12__bottom {
      z-index: 6;
      left: 9.74%;
      top: auto;
      bottom: 1.85%;
      width: 75.42%;
      height: auto;
      aspect-ratio: 1448 / 74;
    }
    .chapter12__bottom img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
    .js .chapter12__glow {
      transform: scale(.96);
      opacity: 0;
      will-change: transform, opacity;
      transition: transform 900ms cubic-bezier(.16,1,.3,1), opacity 620ms ease-out;
    }
    .js .chapter12__glow--left { transition-delay: 40ms; }
    .js .chapter12__glow--top { transition-delay: 110ms; }
    .js .chapter12__glow.is-active { transform: scale(1); opacity: 1; }
    .js .chapter12__dots {
      transform: translateY(3%) scale(.985);
      opacity: 0;
      filter: blur(calc(var(--c12-u) * .42));
      will-change: transform, opacity, filter;
      transition: transform 900ms cubic-bezier(.16,1,.3,1) 160ms, opacity 600ms ease-out 160ms, filter 760ms ease-out 160ms;
    }
    .js .chapter12__dots.is-active { transform: translateY(0) scale(1); opacity: .85; filter: blur(0); }
    .js .chapter12__weather > * {
      transform: translateY(calc(var(--c12-u) * 1.1));
      opacity: 0;
      will-change: transform, opacity;
      transition: transform 620ms cubic-bezier(.16,1,.3,1), opacity 420ms ease-out;
    }
    .js .chapter12__weather.is-active .chapter12__temp { transform: translateY(0); opacity: 1; transition-delay: 360ms; }
    .js .chapter12__weather.is-active .chapter12__weather-meta { transform: translateY(0); opacity: 1; transition-delay: 420ms; }
    .js .chapter12__movie,
    .js .chapter12__side-card {
      opacity: 0;
      filter: blur(calc(var(--c12-u) * .48));
      will-change: transform, opacity, filter;
      transition: transform 760ms cubic-bezier(.16,1,.3,1), opacity 480ms ease-out, filter 620ms ease-out;
    }
    .js .chapter12__movie { transform: translateY(calc(var(--c12-u) * 2.1)); }
    .js .chapter12__side-card { transform: translateX(calc(var(--c12-u) * 1.8)); }
    .js .chapter12__movie--dune { transition-delay: 250ms; }
    .js .chapter12__movie--expanse { transition-delay: 350ms; }
    .js .chapter12__side-card--recommend { transition-delay: 500ms; }
    .js .chapter12__side-card--ni { transition-delay: 600ms; }
    .js .chapter12__movie.is-active,
    .js .chapter12__side-card.is-active { transform: none; opacity: 1; filter: none; }
    .js .chapter12__bottom {
      transform: translateY(145%);
      opacity: 0;
      will-change: transform, opacity;
      transition: transform 760ms cubic-bezier(.16,1,.3,1) 760ms, opacity 360ms ease-out 760ms;
    }
    .js .chapter12__bottom.is-active { transform: translateY(0); opacity: 1; }

    /* 13 */
    .chapter13 {
      min-height: 100svh;
      background: #07070e;
      isolation: isolate;
    }
    .chapter13__stage {
      --c13-u: min(1vw, 1.77778svh);
      position: absolute;
      left: 50%;
      top: 50%;
      width: calc(var(--c13-u) * 100);
      height: calc(var(--c13-u) * 56.25);
      overflow: hidden;
      transform: translate(-50%, -50%);
      background: #07070e;
    }
    .chapter13__phone,
    .chapter13__badge-pair,
    .chapter13__wordmark,
    .chapter13__copy,
    .chapter13__index,
    .chapter13__camera-subject {
      position: absolute;
    }
    .chapter13__phone {
      z-index: 2;
      left: 10.862%;
      top: 8.42593%;
      width: 23.77766%;
      height: 91.53167%;
      object-fit: fill;
    }
    .chapter13__badge-pair {
      z-index: 3;
      left: 2.23958%;
      top: 19.24722%;
      width: 41.4059%;
      height: 21.19204%;
      overflow: visible;
    }
    .chapter13__badge-pair img {
      position: absolute;
      top: 0;
      display: block;
      max-width: none;
      object-fit: fill;
    }
    .chapter13__badge-pair-left {
      left: 0;
      width: 30.62813%;
      height: 100%;
    }
    .chapter13__badge-pair-right {
      left: 69.37187%;
      width: 30.62813%;
      height: 99.681%;
    }
    .chapter13__wordmark {
      z-index: 1;
      left: 46.97917%;
      top: 40.46296%;
      width: 50.20833%;
      color: #fff;
      font-family: "Montserrat", "Plus Jakarta Sans", sans-serif;
      font-weight: 600;
      letter-spacing: -.055em;
      line-height: .88;
      white-space: nowrap;
    }
    .chapter13__year,
    .chapter13__play { display: block; }
    .chapter13__year { font-size: calc(var(--c13-u) * 10.5925); }
    .chapter13__play { font-size: calc(var(--c13-u) * 14.8932); }
    .chapter13__copy {
      z-index: 2;
      left: 47.5%;
      top: 83.24074%;
      width: 27.76042%;
      margin: 0;
      color: #fff;
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: calc(var(--c13-u) * .9375);
      font-weight: 400;
      line-height: 1.45;
      text-transform: uppercase;
    }
    .chapter13__index {
      z-index: 5;
      left: 95.83333%;
      top: 42.31481%;
      margin: 0;
      color: #fff;
      font-family: "Montserrat", sans-serif;
      font-size: calc(var(--c13-u) * 1.25);
      line-height: 1;
      transform: rotate(90deg);
      transform-origin: left top;
    }
    .chapter13__camera-subject {
      z-index: 4;
      left: 50.57292%;
      top: 23.98148%;
      width: 42.76042%;
      height: 79.35185%;
      overflow: hidden;
    }
    .chapter13__camera-subject img,
    .chapter13__camera-subject video {
      position: absolute;
      left: 0;
      top: -.04%;
      display: block;
      width: 100%;
      height: 105.52%;
      max-width: none;
      object-fit: cover;
      object-position: top center;
    }
    .chapter13__camera-subject video {
      background: transparent;
    }
    .chapter13__camera-subject .chapter13__camera-mobile-fallback { display: none; }
    .js .chapter13__enter {
      opacity: 0;
      will-change: transform, opacity, filter;
      transition: transform 760ms cubic-bezier(.16,1,.3,1) var(--enter-delay, 0ms), opacity 520ms ease-out var(--enter-delay, 0ms), filter 620ms ease-out var(--enter-delay, 0ms);
    }
    .js .chapter13__enter--rise { transform: translateY(calc(var(--c13-u) * 1.55)); }
    .js .chapter13__enter--soft { filter: blur(calc(var(--c13-u) * .35)); }
    .js .chapter13__camera-subject { transform: none; }
    .js .chapter13__enter.is-active { transform: none; opacity: 1; filter: none; }
    .js .chapter13__index.is-active { transform: rotate(90deg); }

    /* 14 */
    .chapter14 {
      min-height: 100svh;
      background: #07070e;
      isolation: isolate;
    }
    .chapter14__stage {
      --c14-u: min(1vw, 1.77778svh);
      position: absolute;
      left: 50%;
      top: 50%;
      width: calc(var(--c14-u) * 100);
      height: calc(var(--c14-u) * 56.25);
      overflow: hidden;
      transform: translate(-50%, -50%);
      background: #07070e;
    }
    .chapter14__media {
      position: absolute;
      margin: 0;
      overflow: hidden;
      background: #07070e;
    }
    .chapter14__media > img,
    .chapter14__media > video {
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: fill;
    }
    .chapter14__media--energy {
      z-index: 2;
      left: 8.23031%;
      top: 3.98148%;
      width: 19.64865%;
      height: auto;
      aspect-ratio: 1;
      background: transparent;
    }
    .chapter14__media--street > video {
      object-fit: cover;
      object-position: center;
    }
    .chapter14__media--hoverboard {
      z-index: 2;
      left: 8.23031%;
      top: 55.17963%;
      width: 19.64865%;
      height: auto;
      aspect-ratio: 1;
      background: transparent;
    }
    .chapter14__media--energy > video,
    .chapter14__media--hoverboard > video {
      position: absolute;
      inset: 0;
      mix-blend-mode: screen;
    }
    .chapter14__media--energy > video {
      object-fit: contain;
      transform: translateX(-20%) scale(1.65);
    }
    .chapter14__media--hoverboard > video { object-fit: contain; }
    .chapter14__key-output {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      opacity: 0;
      object-fit: contain;
      pointer-events: none;
    }
    .chapter14__media.is-keyed > video {
      opacity: 0;
      mix-blend-mode: normal;
    }
    .chapter14__media.is-keyed > .chapter14__key-output {
      opacity: 1;
    }
    .chapter14.is-video-mode .chapter14__key-output {
      display: none;
    }
    .chapter14__media--street {
      z-index: 1;
      left: 36.14583%;
      top: 0;
      width: 63.85417%;
      height: 100%;
    }
    .chapter14:is(.is-file-fallback, .is-video-mode) .chapter14__media--energy::after,
    .chapter14:is(.is-file-fallback, .is-video-mode) .chapter14__media--hoverboard::after {
      content: "";
      position: absolute;
      z-index: 3;
      inset: 0;
      pointer-events: none;
    }
    .chapter14:is(.is-file-fallback, .is-video-mode) .chapter14__stage::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0 auto 0 0;
      width: 36.14583%;
      background: #05060c;
      pointer-events: none;
    }
    .chapter14:is(.is-file-fallback, .is-video-mode) .chapter14__media--energy,
    .chapter14:is(.is-file-fallback, .is-video-mode) .chapter14__media--hoverboard {
      mix-blend-mode: lighten;
    }
    .chapter14:is(.is-file-fallback, .is-video-mode) .chapter14__media--energy > video,
    .chapter14:is(.is-file-fallback, .is-video-mode) .chapter14__media--hoverboard > video {
      filter: contrast(1.25) brightness(1.04);
      mix-blend-mode: normal;
    }
    .chapter14:is(.is-file-fallback, .is-video-mode) .chapter14__media--energy > video {
      -webkit-mask-image:
        radial-gradient(ellipse 31% 48% at 65% 50%, #000 0%, #000 72%, transparent 100%),
        linear-gradient(180deg, transparent 0%, transparent 44%, #000 48%, #000 55%, transparent 60%, transparent 100%);
      mask-image:
        radial-gradient(ellipse 31% 48% at 65% 50%, #000 0%, #000 72%, transparent 100%),
        linear-gradient(180deg, transparent 0%, transparent 44%, #000 48%, #000 55%, transparent 60%, transparent 100%);
    }
    .chapter14:is(.is-file-fallback, .is-video-mode) .chapter14__media--hoverboard > video {
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.72) 8%, #000 15%, #000 85%, rgba(0,0,0,.72) 92%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.72) 8%, #000 15%, #000 85%, rgba(0,0,0,.72) 92%, transparent 100%);
    }
    .chapter14:is(.is-file-fallback, .is-video-mode) .chapter14__media--energy::after {
      background: linear-gradient(180deg, #07070e 0%, rgba(7,7,14,.32) 10%, transparent 22%, transparent 78%, rgba(7,7,14,.42) 90%, #07070e 100%);
    }
    .chapter14:is(.is-file-fallback, .is-video-mode) .chapter14__media--hoverboard::after {
      background: linear-gradient(90deg, #07070e 0%, transparent 9%, transparent 91%, #07070e 100%);
    }

    /* 15 */
    .chapter15 {
      min-height: 100svh;
      background: #0a090d;
      isolation: isolate;
    }
    .chapter15__stage {
      --c15-u: min(1vw, 1.77778svh);
      position: absolute;
      left: 50%;
      top: 50%;
      width: calc(var(--c15-u) * 100);
      height: calc(var(--c15-u) * 56.25);
      overflow: hidden;
      transform: translate(-50%, -50%);
      background: #0a090d;
    }
    .chapter15__car {
      position: absolute;
      z-index: 1;
      left: 23.80208%;
      top: .23843%;
      width: 79.42708%;
      height: 95.07407%;
      overflow: hidden;
      pointer-events: none;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 68%, rgba(0,0,0,.82) 78%, rgba(0,0,0,.3) 91%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 68%, rgba(0,0,0,.82) 78%, rgba(0,0,0,.3) 91%, transparent 100%);
    }
    .chapter15__car > img,
    .chapter15__car > video {
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
    }
    .chapter15__car > img {
      object-fit: fill;
    }
    .chapter15__car > video {
      position: absolute;
      right: 4.25%;
      left: auto;
      top: 50%;
      width: 77%;
      height: auto;
      aspect-ratio: 1;
      object-fit: contain;
      transform: translateY(-50%);
      mix-blend-mode: screen;
      -webkit-mask-image: radial-gradient(ellipse 88% 72% at 58% 46%, #000 0 62%, rgba(0,0,0,.92) 74%, rgba(0,0,0,.38) 90%, transparent 100%);
      mask-image: radial-gradient(ellipse 88% 72% at 58% 46%, #000 0 62%, rgba(0,0,0,.92) 74%, rgba(0,0,0,.38) 90%, transparent 100%);
    }
    .chapter15__car::after {
      content: "";
      position: absolute;
      z-index: 2;
      inset: 0;
      background:
        linear-gradient(90deg, #0a090d 0%, #0a090d 18%, rgba(10,9,13,.9) 22%, rgba(10,9,13,.52) 28%, transparent 37%),
        linear-gradient(180deg, transparent 0%, transparent 62%, rgba(10,9,13,.28) 74%, rgba(10,9,13,.82) 90%, #0a090d 100%);
      pointer-events: none;
    }
    .chapter15__info {
      position: absolute;
      z-index: 3;
      inset: 0;
      pointer-events: none;
    }
    .chapter15__range {
      position: absolute;
      left: 8.33333%;
      top: 17.03704%;
      display: flex;
      align-items: flex-end;
      color: #fff;
      font-family: "Plus Jakarta Sans", "Microsoft YaHei", sans-serif;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .chapter15__range-main {
      font-size: calc(var(--c15-u) * 6.66667);
      font-weight: 300;
      line-height: .98;
      letter-spacing: -.045em;
    }
    .chapter15__range-decimal,
    .chapter15__range-unit {
      margin-bottom: calc(var(--c15-u) * .52);
      font-size: calc(var(--c15-u) * 2.5);
      font-weight: 300;
      line-height: 1;
    }
    .chapter15__range-decimal { margin-left: calc(var(--c15-u) * .35); }
    .chapter15__range-unit { margin-left: calc(var(--c15-u) * .68); }
    .chapter15__charge-visual {
      position: absolute;
      left: 8.33333%;
      top: 32.31481%;
      width: 23.80208%;
      height: 9.30556%;
      overflow: visible;
    }
    .chapter15__charge-visual > img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
    }
    .chapter15__charge-sweep {
      position: absolute;
      z-index: 2;
      left: 1.85989%;
      top: 20.89522%;
      width: 75.71138%;
      height: 59.06551%;
      overflow: hidden;
      mix-blend-mode: screen;
      pointer-events: none;
      opacity: 0;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 56%, transparent 72%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 56%, transparent 72%);
      -webkit-mask-size: 260% 100%;
      mask-size: 260% 100%;
      -webkit-mask-position: 135% 0;
      mask-position: 135% 0;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      will-change: mask-position, opacity;
    }
    .chapter15__charge-scan {
      position: absolute;
      left: 100%;
      top: 0;
      display: block;
      width: 17.156251%;
      height: 582.877926%;
      max-width: none;
      opacity: 1;
      transform: rotate(90deg);
      transform-origin: 0 0;
    }
    .chapter15.is-charging .chapter15__charge-sweep {
      animation: chapter15-charge-scan 3.4s cubic-bezier(.42,0,.25,1) infinite;
    }
    @keyframes chapter15-charge-scan {
      0% {
        opacity: 0;
        -webkit-mask-position: 135% 0;
        mask-position: 135% 0;
      }
      12% { opacity: 1; }
      86% { opacity: 1; }
      100% {
        opacity: 0;
        -webkit-mask-position: -45% 0;
        mask-position: -45% 0;
      }
    }
    .chapter15__charge-meta {
      position: absolute;
      left: 8.38542%;
      top: 43.05556%;
      display: flex;
      align-items: center;
      width: 21.09375%;
      justify-content: space-between;
      color: rgba(255,255,255,.65);
      font-family: "Plus Jakarta Sans", "Microsoft YaHei", sans-serif;
      font-size: calc(var(--c15-u) * 1.25);
      font-weight: 500;
      line-height: 1.35;
    }
    .chapter15__charge-percent { color: rgba(255,255,255,.8); }
    .chapter15__metrics {
      position: absolute;
      left: 8.22917%;
      top: 51.85185%;
      display: grid;
      grid-template-columns: repeat(3, calc(var(--c15-u) * 8.65));
      column-gap: 0;
      margin: 0;
    }
    .chapter15__metric { margin: 0; }
    .chapter15__metric dt {
      margin-top: calc(var(--c15-u) * .56);
      color: rgba(255,255,255,.65);
      font-size: calc(var(--c15-u) * 1.25);
      font-weight: 500;
      line-height: 1.35;
    }
    .chapter15__metric dd {
      margin: 0;
      color: rgba(255,255,255,.86);
      font-family: "Plus Jakarta Sans", "Microsoft YaHei", sans-serif;
      font-size: calc(var(--c15-u) * 1.875);
      font-weight: 300;
      line-height: 1.2;
      font-variant-numeric: tabular-nums;
    }
    .chapter15__stop {
      position: absolute;
      left: 8.125%;
      top: 76.85185%;
      display: grid;
      place-items: center;
      width: 14.42708%;
      height: 7.40741%;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: calc(var(--c15-u) * .21);
      background: rgba(67,61,74,.2);
      color: #fff;
      font: 500 calc(var(--c15-u) * 1.25)/1 "MiSans", "Microsoft YaHei", sans-serif;
      pointer-events: auto;
    }
    .chapter15__stop:focus-visible { outline: 1px solid #36ff6c; outline-offset: 3px; }

    /* 16 */
    .chapter16 {
      --music-progress-x: 51.89274%;
      min-height: 100svh;
      background: #0a090d;
      isolation: isolate;
    }
    .chapter16__stage {
      --c16-u: min(1vw, 1.77778svh);
      position: absolute;
      left: 50%;
      top: 50%;
      width: calc(var(--c16-u) * 100);
      height: calc(var(--c16-u) * 56.25);
      overflow: hidden;
      transform: translate(-50%, -50%);
      background: #0a090d;
    }
    .chapter16__scene {
      position: absolute;
      z-index: 0;
      inset: 0;
      overflow: hidden;
      background: #0a090d;
    }
    .chapter16__scene picture,
    .chapter16__scene img,
    .chapter16__scene video {
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      object-position: center;
    }
    .chapter16__scene::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,.24) 0, transparent 18%, transparent 100%);
      pointer-events: none;
    }
    .chapter16__music {
      position: absolute;
      z-index: 3;
      left: 0;
      top: 23.51852%;
      width: 33.02083%;
      height: 77.22222%;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: calc(var(--c16-u) * .42);
      background: linear-gradient(180deg, rgba(16,14,44,.8), rgba(47,45,80,.84));
      box-shadow: inset 0 0 calc(var(--c16-u) * 5.2) rgba(105,93,195,.12);
      -webkit-backdrop-filter: blur(calc(var(--c16-u) * 5.2));
      backdrop-filter: blur(calc(var(--c16-u) * 5.2));
    }
    .chapter16__music-progress {
      position: absolute;
      z-index: 0;
      left: 0;
      top: 0;
      width: var(--music-progress-x);
      height: 100%;
      opacity: .78;
    }
    .chapter16__album-glow,
    .chapter16__album {
      position: absolute;
      overflow: hidden;
      aspect-ratio: 1;
      border-radius: calc(var(--c16-u) * .42);
    }
    .chapter16__album-glow {
      z-index: 1;
      left: 28.07571%;
      top: 16.42686%;
      width: 43.84858%;
      opacity: .45;
      filter: blur(calc(var(--c16-u) * .55));
    }
    .chapter16__album {
      z-index: 2;
      left: 26.34069%;
      top: 10.67146%;
      width: 47.31861%;
    }
    .chapter16.is-playing .chapter16__album,
    .chapter16.is-playing .chapter16__album-glow {
      animation: chapter16-album-float 4.8s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes chapter16-album-float {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50% { transform: translate3d(0, calc(var(--c16-u) * -.34), 0); }
    }
    .chapter16__album-base,
    .chapter16__album-art {
      position: absolute;
      display: block;
      max-width: none;
    }
    .chapter16__album-base { inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .chapter16__album-art { left: -20%; top: -17.67%; width: 177.85%; height: 220.81%; object-fit: cover; }
    .chapter16__waveform {
      position: absolute;
      z-index: 3;
      left: 25.86751%;
      top: 51.55875%;
      width: 48.26498%;
      height: 3.59712%;
    }
    .chapter16__waveform-base,
    .chapter16__waveform-live {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .chapter16__waveform-base {
      display: block;
      opacity: .62;
    }
    .chapter16__waveform-live {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0;
    }
    .chapter16__waveform.has-live-waveform .chapter16__waveform-base {
      opacity: 0;
    }
    .chapter16__waveform-live i {
      display: block;
      flex: 0 0 1px;
      width: 1px;
      height: 100%;
      min-width: 1px;
      border-radius: 999px;
      background: rgba(255,255,255,.78);
      opacity: var(--wave-opacity, .78);
      transform: scaleY(var(--wave, .35));
      transform-origin: center;
      transition: transform 105ms linear, opacity 105ms linear;
      will-change: transform;
    }
    .chapter16__playhead-track {
      position: absolute;
      z-index: 4;
      inset: 0;
      pointer-events: none;
    }
    .chapter16__playhead {
      position: absolute;
      left: var(--music-progress-x);
      top: 53.35731%;
      width: 1px;
      height: 16.90647%;
      max-width: none;
      transform: translate(-.5px, -50%);
    }
    .chapter16__song {
      position: absolute;
      z-index: 3;
      left: 20.82019%;
      top: 61.15108%;
      width: 58.35962%;
      text-align: center;
    }
    .chapter16__song h3,
    .chapter16__song p { margin: 0; white-space: nowrap; }
    .chapter16__song h3 {
      color: rgba(255,255,255,.85);
      font-size: calc(var(--c16-u) * 2.08);
      font-weight: 600;
      line-height: 1.2;
    }
    .chapter16__song p {
      margin-top: calc(var(--c16-u) * .62);
      color: rgba(255,255,255,.45);
      font-size: calc(var(--c16-u) * 1.25);
      font-weight: 400;
    }
    .chapter16__controls {
      position: absolute;
      z-index: 4;
      left: 0;
      top: 85.13189%;
      width: 100%;
      height: 4.07674%;
    }
    .chapter16__control { position: absolute; top: 0; width: 5.04732%; height: 100%; object-fit: contain; }
    .chapter16__control--previous { left: 28.86435%; }
    .chapter16__control--next { left: 64.03785%; }
    .chapter16__control--heart { left: 79.96845%; }
    .chapter16__repeat {
      position: absolute;
      left: 15.77287%;
      top: 0;
      width: 5.04732%;
      height: 100%;
    }
    .chapter16__repeat img { position: absolute; height: 91%; width: 45.31%; }
    .chapter16__repeat img:first-child { left: 0; top: 0; transform: rotate(180deg); }
    .chapter16__repeat img:nth-child(2) { right: 0; bottom: 0; }
    .chapter16__repeat img:last-child { left: 48%; top: 31%; width: 6.25%; height: 34%; }
    .chapter16__pause {
      position: absolute;
      left: 48.58044%;
      top: 9.5%;
      width: 4.4164%;
      height: 81%;
    }
    .chapter16__pause img { position: absolute; top: 0; width: auto; height: 100%; }
    .chapter16__pause img:first-child { left: 0; }
    .chapter16__pause img:last-child { right: 0; }
    .chapter16__nav-card {
      position: absolute;
      z-index: 4;
      left: 33.85417%;
      top: 4.25926%;
      width: 22.91667%;
      height: 23.98148%;
      overflow: hidden;
      border-radius: calc(var(--c16-u) * .83);
      color: #fff;
      background: rgba(18,16,29,.82);
      box-shadow: 0 calc(var(--c16-u) * .5) calc(var(--c16-u) * 2) rgba(0,0,0,.16);
      -webkit-backdrop-filter: blur(calc(var(--c16-u) * 1.5));
      backdrop-filter: blur(calc(var(--c16-u) * 1.5));
    }
    .chapter16__nav-card > img:first-child { position: absolute; inset: 0; width: 100%; height: 63.70656%; object-fit: fill; opacity: .85; }
    .chapter16__turn-art {
      position: absolute;
      left: 11.36364%;
      top: 13.12741%;
      width: 17.95455%;
      height: 38.99614%;
      max-width: none;
      object-fit: contain;
    }
    .chapter16__nav-distance {
      position: absolute;
      left: 37.04545%;
      top: 5.79151%;
      margin: 0;
      font-size: calc(var(--c16-u) * 3.33);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -.04em;
    }
    .chapter16__nav-distance span { margin-left: calc(var(--c16-u) * .45); color: rgba(237,241,249,.65); font-size: .5em; font-weight: 500; letter-spacing: 0; }
    .chapter16__street {
      position: absolute;
      left: 37.5%;
      top: 36.29344%;
      margin: 0;
      color: rgba(237,241,249,.65);
      font-size: calc(var(--c16-u) * 1.67);
      font-weight: 500;
      line-height: 1;
      white-space: nowrap;
    }
    .chapter16__route {
      position: absolute;
      left: 0;
      top: 63.70656%;
      width: 100%;
      height: 1.5444%;
      background: linear-gradient(90deg, #2d2d3c 0 44.55%, #efc841 44.55% 50.45%, #0be462 50.45% 100%);
    }
    .chapter16__route::after {
      content: "";
      position: absolute;
      left: 43.64%;
      top: 50%;
      width: calc(var(--c16-u) * 1.04);
      aspect-ratio: 1;
      border: calc(var(--c16-u) * .16) solid #fff;
      border-radius: 50%;
      background: #4a4aff;
      box-shadow: 0 0 calc(var(--c16-u) * .42) rgba(84,83,255,.85);
      transform: translate(-50%, -50%);
    }
    .chapter16__trip {
      position: absolute;
      left: 0;
      top: 72.97297%;
      width: 100%;
      display: grid;
      grid-template-columns: 1.18fr 1fr 1fr;
      align-items: center;
      color: rgba(255,255,255,.65);
      font-size: calc(var(--c16-u) * 1.46);
      font-weight: 500;
    }
    .chapter16__trip span { text-align: center; white-space: nowrap; }
    .chapter16__trip span:first-child { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--c16-u) * .55); }
    .chapter16__trip img { width: calc(var(--c16-u) * 1.46); height: calc(var(--c16-u) * 1.46); }
    .chapter16__speed {
      position: absolute;
      z-index: 4;
      left: 58.125%;
      top: 4.53704%;
      width: 4.16667%;
      aspect-ratio: 1;
    }
    .chapter16__speed img { position: absolute; inset: 0; width: 100%; height: 100%; }
    .chapter16__speed span {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: #111;
      font-size: calc(var(--c16-u) * 1.88);
      font-weight: 650;
      line-height: 1;
    }
    .js .chapter16__music,
    .js .chapter16__nav-card,
    .js .chapter16__speed {
      opacity: 0;
      will-change: transform, opacity, filter;
    }
    .js .chapter16__music { transform: translateX(calc(var(--c16-u) * -2.2)); filter: blur(calc(var(--c16-u) * .38)); transition: transform 820ms var(--ease-out) 100ms, opacity 520ms ease-out 100ms, filter 650ms ease-out 100ms; }
    .js .chapter16__nav-card { transform: translateY(calc(var(--c16-u) * -1.2)); filter: blur(calc(var(--c16-u) * .3)); transition: transform 760ms var(--ease-out) 240ms, opacity 480ms ease-out 240ms, filter 600ms ease-out 240ms; }
    .js .chapter16__speed { transform: scale(.72); transition: transform 620ms var(--ease-out) 440ms, opacity 420ms ease-out 440ms; }
    .js .chapter16__music.is-visible,
    .js .chapter16__nav-card.is-visible,
    .js .chapter16__speed.is-visible { transform: none; opacity: 1; filter: none; }

    .chapter17 { min-height: 100svh; background: #0a090d; isolation: isolate; }
    .chapter17__stage {
      --c17-u: min(1vw, 1.77778svh);
      position: absolute;
      left: 50%; top: 50%;
      width: calc(var(--c17-u) * 100);
      height: calc(var(--c17-u) * 56.25);
      overflow: hidden;
      transform: translate(-50%, -50%);
      background: #0a090d;
      color: #f5f3ff;
      font-family: "MiSans", "Microsoft YaHei", sans-serif;
    }
    .chapter17__background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; }
    .chapter17__background img,
    .chapter17__background video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; max-width: none; opacity: .9; }
    .chapter17__veil {
      position: absolute; z-index: 1; inset: 0;
      background: linear-gradient(180deg, rgba(11,10,24,.03) 0 55%, rgba(10,9,13,.45) 72%, #0a090d 94%);
      pointer-events: none;
    }
    .chapter17__tabs {
      position: absolute; z-index: 8; left: 38.17708%; top: 9.44444%;
      display: flex; align-items: center; gap: calc(var(--c17-u) * 4.06);
      color: rgba(255,255,255,.4); font-size: calc(var(--c17-u) * 1.67); font-weight: 500; line-height: 1; white-space: nowrap;
    }
    .chapter17__tabs strong { color: #fff; font-weight: 600; }
    .chapter17__temp {
      position: absolute; z-index: 8; display: block; width: calc(var(--c17-u) * 5.55); height: calc(var(--c17-u) * 3.7); margin: 0;
      color: #f5f3ff; font-weight: 300; text-shadow: 0 0 calc(var(--c17-u) * 1.2) rgba(71,91,181,.18);
    }
    .chapter17__temp--left { left: 5.9375%; top: 46.38889%; }
    .chapter17__temp--right { left: 87.91667%; top: 46.01852%; }
    .chapter17__temp-main { position: absolute; left: 0; top: calc(var(--c17-u) * .26042); font-size: calc(var(--c17-u) * 3.33333); line-height: calc(var(--c17-u) * 2.08333); letter-spacing: 0; }
    .chapter17__temp-decimal { position: absolute; left: calc(var(--c17-u) * 3.80208); top: calc(var(--c17-u) * 1.14896); font-size: calc(var(--c17-u) * 2.08333); line-height: calc(var(--c17-u) * 1.25); }
    .chapter17__temp-degree { position: absolute; left: calc(var(--c17-u) * 4.375); top: 0; font-size: calc(var(--c17-u) * 1.25); line-height: calc(var(--c17-u) * 1.25); }
    .chapter17__side-group { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
    .chapter17__side-rect { position: absolute; top: 35.64815%; width: 4.432%; height: 27.77778%; }
    .chapter17__side-rect--left { left: .05208%; }
    .chapter17__side-rect--right { left: 95.2026%; transform: scaleX(-1); }
    .chapter17__side-vector { position: absolute; top: 34.44444%; width: .78125%; height: 35.74074%; }
    .chapter17__side-vector--left { left: 3.75%; }
    .chapter17__side-vector--right { left: 95.15625%; }
    .chapter17__side-vector img { position: absolute; left: 50%; top: 50%; width: calc(var(--c17-u) * 20.10417); height: calc(var(--c17-u) * .9375); max-width: none; transform: translate(-50%,-50%) rotate(-90deg); }
    .chapter17__side-vector--left img { transform: translate(-50%,-50%) rotate(-90deg) scaleY(-1); }
    .chapter17__side-mask { position: absolute; top: 25.09259%; width: 3.54167%; height: 52.68519%; }
    .chapter17__side-mask--left { left: .05208%; }
    .chapter17__side-mask--right { left: 95.9375%; }
    .chapter17__side-rect img,
    .chapter17__side-mask img { display: block; width: 100%; height: 100%; }
    .chapter17__modebar {
      position: absolute; z-index: 10; left: 7.03125%; top: 72.77778%; width: 86.92708%; height: 11.48148%;
      display: block; padding: 0;
      background: transparent;
    }
    .chapter17__mode-line { position: absolute; left: 0; width: 100%; height: calc(var(--c17-u) * .10417); pointer-events: none; }
    .chapter17__mode-line::before {
      content: none;
    }
    .chapter17__mode-line::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 23.5577%, rgba(255,255,255,.85) 75%, rgba(255,255,255,0) 100%);
    }
    .chapter17__mode-line--top { top: calc(var(--c17-u) * -.05208); }
    .chapter17__mode-line--bottom { bottom: calc(var(--c17-u) * -.05208); }
    .chapter17__mode-line--top::after {
      background: linear-gradient(90deg, rgba(26,26,44,0) 0%, rgba(26,26,44,.85) 23.5577%, rgba(26,26,44,.85) 75%, rgba(26,26,44,0) 100%);
      mix-blend-mode: normal; opacity: .95;
    }
    .chapter17__mode-line--bottom::after {
      background: linear-gradient(90deg, rgba(75,56,120,0) 0%, rgba(75,56,120,.85) 23.5577%, rgba(75,56,120,.85) 75%, rgba(75,56,120,0) 100%);
      mix-blend-mode: normal; opacity: .2;
    }
    .chapter17__mode { position: absolute; z-index: 2; top: 18.54839%; display: grid; place-items: center; width: 4.79329%; height: 64.51613%; color: #f5f3ff; opacity: .35; font-size: calc(var(--c17-u) * 1.46); font-weight: 400; }
    .chapter17__mode:nth-child(1) { left: 15.63811%; }
    .chapter17__mode:nth-child(2) { left: 23.0677%; }
    .chapter17__mode:nth-child(3) { left: 30.4973%; }
    .chapter17__mode:nth-child(4) { left: 37.9269%; }
    .chapter17__mode:nth-of-type(5) { left: 46.25524%; top: 14.51613%; width: 5.39245%; height: 72.58065%; }
    .chapter17__mode:nth-child(6) { left: 55.18274%; }
    .chapter17__mode:nth-child(7) { left: 62.61234%; }
    .chapter17__mode:nth-child(8) { left: 70.04194%; }
    .chapter17__mode:nth-child(9) { left: 77.47154%; }
    .chapter17__mode img { display: block; width: calc(var(--c17-u) * 4.17); height: calc(var(--c17-u) * 4.17); object-fit: contain; }
    .chapter17__mode--front img { width: calc(var(--c17-u) * 2.751); height: calc(var(--c17-u) * 2.264); }
    .chapter17__mode--rear img { width: 100%; height: 100%; }
    .chapter17__mode.is-active { opacity: 1; }
    .chapter17__mode--power img { width: 100%; height: 100%; }
    .js .chapter17__enter {
      opacity: 0;
      filter: blur(calc(var(--c17-u) * .45));
      transition: opacity 560ms ease-out var(--c17-delay, 0ms), transform 820ms var(--ease-out) var(--c17-delay, 0ms), filter 680ms ease-out var(--c17-delay, 0ms);
      will-change: opacity, transform, filter;
    }
    .js .chapter17__background.chapter17__enter { transform: scale(1.035); transform-origin: center; }
    .js .chapter17__tabs.chapter17__enter { transform: translateY(calc(var(--c17-u) * -1.2)); }
    .js .chapter17__temp--left.chapter17__enter,
    .js .chapter17__side-group--left.chapter17__enter { transform: translateX(calc(var(--c17-u) * -2.2)); }
    .js .chapter17__temp--right.chapter17__enter,
    .js .chapter17__side-group--right.chapter17__enter { transform: translateX(calc(var(--c17-u) * 2.2)); }
    .js .chapter17__modebar.chapter17__enter { transform: translateY(70%); }
    .js .chapter17__modebar.chapter17__enter { will-change: auto; }
    .js .chapter17.is-active .chapter17__enter { opacity: 1; filter: none; transform: none; }

    .chapter18 { min-height: 100svh; background: #0a090d; isolation: isolate; }
    .chapter18__stage {
      --c18-u: min(1vw, 1.77778svh);
      position: absolute;
      left: 50%; top: 50%;
      width: calc(var(--c18-u) * 100);
      height: calc(var(--c18-u) * 56.25);
      overflow: hidden;
      transform: translate(-50%, -50%);
      background: #0a090d;
      color: #fff;
      font-family: "MiSans", "Microsoft YaHei", sans-serif;
    }
    .chapter18__scene {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      transition: none;
      pointer-events: none;
    }
    .chapter18__scene.is-active {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }
    .chapter18__vehicle {
      position: absolute;
      overflow: visible;
      margin: 0;
      pointer-events: none;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-mode: alpha;
      mask-mode: alpha;
      mix-blend-mode: screen;
    }
    .chapter18__vehicle > img,
    .chapter18__vehicle > video {
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      background: transparent;
      mix-blend-mode: normal;
    }
    .chapter18__vehicle > video {
      filter: brightness(.9) contrast(1.22);
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.36) 9%, #000 24%, #000 100%);
      mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.36) 9%, #000 24%, #000 100%);
    }
    .chapter18__vehicle::after {
      content: none;
    }
    .chapter18__vehicle--sport {
      left: calc(var(--c18-u) * 12.60417);
      top: calc(var(--c18-u) * 1.5625);
      width: calc(var(--c18-u) * 88.87491);
      height: calc(var(--c18-u) * 50.17818);
      -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjIxOTEiIGhlaWdodD0iMTIzNyIgdmlld0JveD0iMCAwIDIxOTEgMTIzNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgaWQ9ImNob25nZGlhbnAgMSIgd2lkdGg9IjIxOTEiIGhlaWdodD0iMTIzNyIgZmlsbD0idXJsKCNwYWludDBfcmFkaWFsXzBfNykiLz4KPGRlZnM+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQwX3JhZGlhbF8wXzciIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtMTcyNS40MSAyMjEuODM0IC0yMTMuNDM4IC0xNjYwLjA1IDIwNTcuMzUgMjk3Ljk3KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBvZmZzZXQ9IjAuMDgxNzMwOCIgc3RvcC1vcGFjaXR5PSIwIi8+CjxzdG9wIG9mZnNldD0iMC4zNzc2NTYiIHN0b3AtY29sb3I9IndoaXRlIi8+CjxzdG9wIG9mZnNldD0iMC42OTI5MDciIHN0b3AtY29sb3I9IndoaXRlIi8+CjxzdG9wIG9mZnNldD0iMC45MTg4OTUiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=");
      mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjIxOTEiIGhlaWdodD0iMTIzNyIgdmlld0JveD0iMCAwIDIxOTEgMTIzNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgaWQ9ImNob25nZGlhbnAgMSIgd2lkdGg9IjIxOTEiIGhlaWdodD0iMTIzNyIgZmlsbD0idXJsKCNwYWludDBfcmFkaWFsXzBfNykiLz4KPGRlZnM+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQwX3JhZGlhbF8wXzciIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtMTcyNS40MSAyMjEuODM0IC0yMTMuNDM4IC0xNjYwLjA1IDIwNTcuMzUgMjk3Ljk3KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBvZmZzZXQ9IjAuMDgxNzMwOCIgc3RvcC1vcGFjaXR5PSIwIi8+CjxzdG9wIG9mZnNldD0iMC4zNzc2NTYiIHN0b3AtY29sb3I9IndoaXRlIi8+CjxzdG9wIG9mZnNldD0iMC42OTI5MDciIHN0b3AtY29sb3I9IndoaXRlIi8+CjxzdG9wIG9mZnNldD0iMC45MTg4OTUiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=");
      -webkit-mask-size: calc(var(--c18-u) * 114.11458) calc(var(--c18-u) * 64.42708);
      mask-size: calc(var(--c18-u) * 114.11458) calc(var(--c18-u) * 64.42708);
      -webkit-mask-position: calc(var(--c18-u) * -13.95833) calc(var(--c18-u) * -1.51042);
      mask-position: calc(var(--c18-u) * -13.95833) calc(var(--c18-u) * -1.51042);
    }
    .chapter18__vehicle--energy {
      left: calc(var(--c18-u) * 12.60417);
      top: calc(var(--c18-u) * 1.5625);
      width: calc(var(--c18-u) * 88.87491);
      height: calc(var(--c18-u) * 50.17818);
      -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjIxMzAiIGhlaWdodD0iMTEyOSIgdmlld0JveD0iMCAwIDIxMzAgMTEyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgaWQ9ImNob25nZGlhbnAgMSIgd2lkdGg9IjIxMzAiIGhlaWdodD0iMTEyOSIgZmlsbD0idXJsKCNwYWludDBfcmFkaWFsXzBfNCkiLz4KPGRlZnM+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQwX3JhZGlhbF8wXzQiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtMTY3Ny4zNyAyMDIuNDY2IC0yMDcuNDk2IC0xNTE1LjExIDIwMDAuMDcgMjcxLjk1NSkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agb2Zmc2V0PSIwLjA4MTczMDgiIHN0b3Atb3BhY2l0eT0iMCIvPgo8c3RvcCBvZmZzZXQ9IjAuMzc3NjU2IiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjAuNjkyOTA3IiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjAuOTE4ODk1IiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K");
      mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjIxMzAiIGhlaWdodD0iMTEyOSIgdmlld0JveD0iMCAwIDIxMzAgMTEyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgaWQ9ImNob25nZGlhbnAgMSIgd2lkdGg9IjIxMzAiIGhlaWdodD0iMTEyOSIgZmlsbD0idXJsKCNwYWludDBfcmFkaWFsXzBfNCkiLz4KPGRlZnM+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQwX3JhZGlhbF8wXzQiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtMTY3Ny4zNyAyMDIuNDY2IC0yMDcuNDk2IC0xNTE1LjExIDIwMDAuMDcgMjcxLjk1NSkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agb2Zmc2V0PSIwLjA4MTczMDgiIHN0b3Atb3BhY2l0eT0iMCIvPgo8c3RvcCBvZmZzZXQ9IjAuMzc3NjU2IiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjAuNjkyOTA3IiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjAuOTE4ODk1IiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9yYWRpYWxHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K");
      -webkit-mask-size: calc(var(--c18-u) * 114.11458) calc(var(--c18-u) * 64.42708);
      mask-size: calc(var(--c18-u) * 114.11458) calc(var(--c18-u) * 64.42708);
      -webkit-mask-position: calc(var(--c18-u) * -13.95833) calc(var(--c18-u) * -1.51042);
      mask-position: calc(var(--c18-u) * -13.95833) calc(var(--c18-u) * -1.51042);
    }
    .chapter18__selector {
      position: absolute;
      z-index: 5;
      left: calc(var(--c18-u) * 5.72917);
      top: calc(var(--c18-u) * 16.04167);
      width: calc(var(--c18-u) * 13.69792);
      height: calc(var(--c18-u) * 5.3125);
      transition: transform 520ms cubic-bezier(.16,1,.3,1);
      pointer-events: none;
    }
    .chapter18__stage[data-mode="energy"] .chapter18__selector { transform: translateY(calc(var(--c18-u) * 5.88542)); }
    .chapter18__modes { position: absolute; z-index: 6; inset: 0; }
    .chapter18__mode {
      position: absolute;
      left: calc(var(--c18-u) * 5.72917);
      width: calc(var(--c18-u) * 13.69792);
      height: calc(var(--c18-u) * 5.3125);
      padding: 0 0 0 calc(var(--c18-u) * 4.89583);
      border: 0;
      background: transparent;
      color: rgba(255,255,255,.45);
      font: 500 calc(var(--c18-u) * 1.66667)/1 "MiSans", "Microsoft YaHei", sans-serif;
      text-align: left;
      cursor: default;
    }
    .chapter18__mode[data-mode] { cursor: pointer; }
    .chapter18__mode:nth-of-type(1) { top: calc(var(--c18-u) * 10.20833); }
    .chapter18__mode:nth-of-type(2) { top: calc(var(--c18-u) * 16.04167); }
    .chapter18__mode:nth-of-type(3) { top: calc(var(--c18-u) * 21.875); }
    .chapter18__mode:nth-of-type(4) { top: calc(var(--c18-u) * 27.70833); }
    .chapter18__mode[aria-pressed="true"] { color: #fff; font-weight: 600; }
    .chapter18__mode[data-mode]:focus-visible { outline: none; }
    .js .chapter18__enter {
      opacity: 0;
      filter: blur(calc(var(--c18-u) * .38));
      transition: opacity 580ms ease-out var(--c18-delay, 0ms), transform 860ms var(--ease-out) var(--c18-delay, 0ms), filter 680ms ease-out var(--c18-delay, 0ms);
    }
    .js .chapter18__scene.chapter18__enter { transform: scale(1.025); }
    .js .chapter18__modes.chapter18__enter { transform: translateX(calc(var(--c18-u) * -1.7)); }
    .js .chapter18.is-active .chapter18__enter { opacity: 1; filter: none; transform: none; }
    .js .chapter18.is-active .chapter18__scene:not(.is-active) { opacity: 0; visibility: hidden; }
    .js .chapter18.is-active .chapter18__stage[data-mode="energy"] .chapter18__selector { transform: translateY(calc(var(--c18-u) * 5.88542)); }

    .chapter19 { min-height: 100svh; background: #0a090d; isolation: isolate; }
    .chapter19__stage {
      --c19-u: min(1vw, 1.77778svh);
      position: absolute;
      left: 50%; top: 50%;
      width: calc(var(--c19-u) * 100);
      height: calc(var(--c19-u) * 56.25);
      overflow: hidden;
      transform: translate(-50%, -50%);
      background: #0a090d;
    }
    .chapter19__ambient {
      position: absolute;
      z-index: 0;
      inset: 0;
      margin: 0;
      pointer-events: none;
    }
    .chapter19__ambient img {
      display: block;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .chapter19__flower,
    .chapter19__title {
      position: absolute;
      display: block;
      max-width: none;
      object-fit: cover;
      pointer-events: none;
    }
    .chapter19__flower {
      z-index: 1;
      left: calc(var(--c19-u) * 13.28125);
      top: calc(var(--c19-u) * 7.7375);
      width: calc(var(--c19-u) * 70.57292);
      height: calc(var(--c19-u) * 39.68005);
      object-position: center;
      background: transparent;
      mix-blend-mode: lighten;
      -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0 64%, rgba(0,0,0,.88) 76%, rgba(0,0,0,.4) 88%, transparent 100%);
      mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0 64%, rgba(0,0,0,.88) 76%, rgba(0,0,0,.4) 88%, transparent 100%);
    }
    .chapter19__title {
      z-index: 2;
      left: calc(var(--c19-u) * 13.80365);
      top: calc(var(--c19-u) * 5.49948);
      width: calc(var(--c19-u) * 69.94563);
      height: calc(var(--c19-u) * 31.50656);
    }
    .js .chapter19__title.reveal.is-visible {
      opacity: 0;
      transform: translateY(calc(var(--c19-u) * -1.35));
    }
    .js .chapter19.is-flower-complete .chapter19__title.reveal.is-visible {
      opacity: 1;
      transform: none;
    }
    .chapter19__tabs {
      position: absolute;
      z-index: 4;
      inset: 0;
      color: rgba(255,255,255,.35);
      font: 500 calc(var(--c19-u) * 1.66667)/1.2 "MiSans", "Microsoft YaHei", sans-serif;
      pointer-events: none;
    }
    .chapter19__tab { position: absolute; top: calc(var(--c19-u) * 5.52083); white-space: nowrap; }
    .chapter19__tab:nth-child(1) { left: calc(var(--c19-u) * 38.17708); }
    .chapter19__tab:nth-child(2) { left: calc(var(--c19-u) * 45.46875); }
    .chapter19__tab:nth-child(3) { left: calc(var(--c19-u) * 58.54167); color: #fff; }
    .chapter19__arrow {
      position: absolute;
      z-index: 4;
      top: calc(var(--c19-u) * 22.76042);
      width: calc(var(--c19-u) * 5.65776);
      height: calc(var(--c19-u) * 6.66667);
      padding: 0;
      border: 0;
      background: transparent;
      pointer-events: none;
    }
    .chapter19__arrow img { display: block; width: 100%; height: 100%; }
    .chapter19__arrow--left { left: calc(var(--c19-u) * 8.02083); }
    .chapter19__arrow--left img { transform: scaleX(-1); }
    .chapter19__arrow--right { left: calc(var(--c19-u) * 87.13542); }
    .chapter19__close {
      position: absolute;
      z-index: 4;
      left: calc(var(--c19-u) * 8.125);
      top: calc(var(--c19-u) * 44.58333);
      width: calc(var(--c19-u) * 14.42708);
      height: calc(var(--c19-u) * 4.16667);
      padding: 0;
      border: calc(var(--c19-u) * .05208) solid rgba(255,255,255,.12);
      border-radius: calc(var(--c19-u) * .20833);
      background: rgba(67,61,74,.2);
      color: #fff;
      font: 500 calc(var(--c19-u) * 1.25)/1 "MiSans", "Microsoft YaHei", sans-serif;
      pointer-events: none;
    }
    .chapter19__intensity {
      position: absolute;
      z-index: 4;
      inset: 0;
      color: rgba(255,255,255,.45);
      font: 500 calc(var(--c19-u) * 1.25)/1.2 "MiSans", "Microsoft YaHei", sans-serif;
      pointer-events: none;
    }
    .chapter19__selector {
      position: absolute;
      left: calc(var(--c19-u) * 47.1875);
      top: calc(var(--c19-u) * 43.48958);
      width: calc(var(--c19-u) * 5.3125);
      height: calc(var(--c19-u) * 8.125);
    }
    .chapter19__intensity-label { position: absolute; top: calc(var(--c19-u) * 46.71875); white-space: nowrap; }
    .chapter19__intensity-label:nth-of-type(2) { left: calc(var(--c19-u) * 42.91667); }
    .chapter19__intensity-label:nth-of-type(3) { left: calc(var(--c19-u) * 48.59375); color: #fff; }
    .chapter19__intensity-label:nth-of-type(4) { left: calc(var(--c19-u) * 54.42708); }
    .chapter19__selector img {
      position: absolute;
      left: 50%; top: 50%;
      display: block;
      width: calc(var(--c19-u) * 8.125);
      height: calc(var(--c19-u) * 5.3125);
      max-width: none;
      transform: translate(-50%, -50%) rotate(90deg);
    }
    .js .chapter19__tabs.reveal { transform: translateY(calc(var(--c19-u) * -1)); }
    .js .chapter19__arrow--left.reveal { transform: translateX(calc(var(--c19-u) * -1.5)); }
    .js .chapter19__arrow--right.reveal { transform: translateX(calc(var(--c19-u) * 1.5)); }
    .js .chapter19__close.reveal,
    .js .chapter19__intensity.reveal { transform: translateY(calc(var(--c19-u) * 1.4)); }
    }
    .js .chapter19__ambient.reveal { transform: scale(1.035); }
    .js .chapter19__flower.reveal { transform: translateY(calc(var(--c19-u) * 1.8)) scale(.975); }
    .js .chapter19__title.reveal { transform: translateY(calc(var(--c19-u) * -1.35)); }
    .js .chapter19 .reveal.is-visible { transform: none; }

    @media (prefers-reduced-motion: reduce) {
      .chapter11__dock { transform: translateY(0); }
      .js .chapter12__glow,
      .js .chapter12__dots,
      .js .chapter12__weather > *,
      .js .chapter12__movie,
      .js .chapter12__side-card { transform: none; opacity: 1; filter: none; transition: none; }
      .js .chapter12__dots { opacity: .85; }
      .js .chapter12__bottom { transform: translateY(0); opacity: 1; transition: none; }
      .js .chapter13__enter { transform: none; opacity: 1; filter: none; transition: none; }
      .js .chapter13__index { transform: rotate(90deg); }
      .chapter15__charge-sweep { display: none; }
      .chapter15__charge-scan { display: none; }
      .chapter16__album,
      .chapter16__album-glow { animation: none !important; transform: none !important; }
      .chapter16__waveform-live { display: none; }
      .chapter16__waveform.has-live-waveform .chapter16__waveform-base { opacity: .62; }
      .js .chapter17__enter { opacity: 1; filter: none; transform: none !important; transition: none; }
      .chapter18__scene { transition: none; }
      .chapter18__selector { transition: none; }
      .js .chapter18__enter { opacity: 1; filter: none; transform: none !important; transition: none; }
      .js .chapter18__stage[data-mode="energy"] .chapter18__selector {
        transform: translateY(calc(var(--c18-u) * 5.88542)) !important;
      }
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 32px var(--page-pad) 38px;
      color: #666771;
      font-family: "Montserrat", sans-serif;
      font-size: 10px;
      letter-spacing: .06em;
      background: #050508;
    }
    .footer__meta {
      display: flex;
      align-items: center;
      gap: 16px;
      min-width: 0;
    }
    .footer a { color: #b6b6bd; }
    .footer__icp:hover,
    .footer__icp:focus-visible { color: #fff; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .js .reveal { opacity: 1; transform: none; filter: none; }
      .media-reveal img, .hero__portrait, .concept__visual picture { transform: none !important; }
    }

    /* Layout-preserving polish */
    :root { --radius: 4px; }
    .skip-link,
    .mood__card,
    .diagram-board,
    .instrument__frame,
    .chapter12__movie,
    .chapter12__side-card,
    .chapter15__stop,
    .chapter16__music,
    .chapter16__album-glow,
    .chapter16__album,
    .chapter16__waveform i,
    .chapter16__nav-card,
    .chapter19__close {
      border-radius: var(--radius) !important;
    }

    /* 2026-08-30 wide-screen layout corrections */
    #section-03 .strategy__intro,
    #section-04 .strategy__intro {
      left: var(--page-pad);
    }

    .bridge__center {
      top: 50%;
    }
    .js .bridge__center.reveal,
    .js .bridge__center.reveal.is-visible {
      transform: translateY(-50%) !important;
    }
    .js .bridge__side.reveal,
    .js .bridge__side.reveal.is-visible {
      transform: translateY(-25%) !important;
    }
    .js .bridge__tag.reveal,
    .js .bridge__tag.reveal.is-visible {
      transform: translateY(-50%) !important;
    }

    .chapter11__stage::after {
      content: "";
      position: absolute;
      z-index: 2;
      right: 0;
      bottom: 0;
      left: 0;
      height: 26%;
      background: linear-gradient(180deg, rgba(8,8,11,0) 0%, rgba(8,8,11,.24) 30%, rgba(8,8,11,.72) 68%, #08080b 100%);
      pointer-events: none;
    }
    .chapter11__ip-gif { z-index: 3; }
    .chapter11__dock { z-index: 4; bottom: 0; }

    @media (min-width: 1200px) {
      #section-02,
      #section-03,
      #section-04,
      #section-05,
      #section-06,
      #section-07 {
        --chapter-u: min(1vw, 1.77778svh);
        --chapter-pad: calc(var(--chapter-u) * 4.16667);
      }

      .concept .section__inner,
      .mood .section__inner,
      .system .section__inner,
      .icons .section__inner {
        width: 100%;
        max-width: none;
        padding-right: var(--chapter-pad);
        padding-left: var(--chapter-pad);
      }

      .concept .section__inner {
        --c02-u: var(--chapter-u);
        min-height: 100svh;
        padding-top: calc(var(--c02-u) * 5.625);
        padding-bottom: calc(var(--c02-u) * 5.625);
      }
      .concept .section__meta {
        margin-bottom: calc(var(--c02-u) * 4.48);
        font-size: calc(var(--c02-u) * .52083);
      }
      .concept .section__title {
        font-size: calc(var(--c02-u) * 6.875);
      }
      .concept__subtitle {
        margin-top: calc(var(--c02-u) * 1.35417);
        margin-bottom: calc(var(--c02-u) * .625);
        font-size: calc(var(--c02-u) * 1.45833);
      }
      .concept .section__lead {
        max-width: calc(var(--c02-u) * 27.08333);
        margin-top: calc(var(--c02-u) * 1.25);
        font-size: calc(var(--c02-u) * 1.04167);
      }
      .concept__year,
      .concept__project {
        bottom: calc(var(--c02-u) * 1.77083);
      }
      .concept__year { right: var(--chapter-pad); }
      .concept__project { left: var(--chapter-pad); }

      #section-03 .strategy__intro,
      #section-04 .strategy__intro {
        left: var(--chapter-pad);
      }

      #section-03 .insight-board,
      #section-04 .bridge-board {
        position: absolute;
        left: 50%;
        top: 50%;
        width: calc(var(--chapter-u) * 100);
        height: calc(var(--chapter-u) * 56.25);
        min-height: 0;
        overflow: visible;
        transform: translate(-50%, -50%);
      }

      .icons__stage {
        height: clamp(650px, calc(var(--chapter-u) * 46), 1035px);
      }

      .system__layout {
        overflow: visible;
      }
    }

    @media (min-width: 1200px) and (min-aspect-ratio: 16 / 9) {
      .chapter14__stage,
      .chapter15__stage,
      .chapter16__stage,
      .chapter17__stage {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: none;
      }

      .chapter15__car > video {
        right: 0;
        object-position: right center;
      }
    }

    /* Tablet and narrow desktop: let each chapter follow its content ratio. */
    @media (min-width: 480px) and (max-width: 1199px) {
      .section,
      .section__inner {
        min-height: 0;
      }

      .hero,
      .concept,
      .finale {
        min-height: 0;
        aspect-ratio: 16 / 9;
      }
      .hero__inner,
      .concept .section__inner {
        min-height: 100%;
      }
      .hero__portrait {
        top: 7%;
        height: 88%;
      }

      .strategy,
      .strategy .section__inner,
      .mood,
      .system,
      .icons {
        min-height: 0;
      }
      .diagram-board {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
      }
      .icons .section__inner {
        padding-bottom: 72px;
      }

      .instrument,
      .chapter11,
      .chapter12,
      .chapter13,
      .chapter14,
      .chapter15,
      .chapter16,
      .chapter17,
      .chapter18,
      .chapter19 {
        width: 100%;
        height: auto;
        min-height: 0;
      }
      .instrument__frame,
      .chapter11__stage,
      .chapter12__stage {
        position: relative;
        left: 0;
        right: auto;
        top: auto;
        bottom: auto;
        display: block;
        width: 100%;
        height: 56.25vw;
        transform: none;
      }
      .chapter11__background-mask {
        left: 0;
        right: auto;
        top: 0;
        bottom: auto;
        width: 100%;
        height: 100%;
        transform: none;
      }
      .chapter13__stage,
      .chapter14__stage,
      .chapter15__stage,
      .chapter16__stage,
      .chapter17__stage,
      .chapter18__stage,
      .chapter19__stage {
        position: relative;
        left: 0;
        top: auto;
        width: 100%;
        height: 56.25vw;
        transform: none;
      }
    }

    /* iPhone 13 Pro Max portrait, 428 x 926 CSS px */
    @media (min-width: 414px) and (max-width: 479px) and (orientation: portrait) {
      :root { --page-pad: 20px; }
      html { overflow-x: hidden; }
      body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
      }
      .skip-link { display: none !important; }

      .loader {
        min-width: 0;
        padding: calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 24px);
      }
      .loader__brand { width: 96px; }
      .loader__counter { font-size: 10px; }
      .loader__title { font-size: 58px; }

      .site-header {
        padding: calc(env(safe-area-inset-top) + 16px) 18px 0;
      }
      .chapter-status { gap: 5px; font-size: 9px; }
      .chapter-status strong { font-size: 12px; }
      .chapter-nav { display: none; }

      .section {
        width: 100%;
        min-height: 0;
        scroll-margin-top: 0;
      }
      .section__inner {
        width: 100%;
        min-height: 0;
        padding: 72px 20px 48px;
      }
      .section__meta {
        gap: 12px;
        margin-bottom: 26px;
        font-size: 8px;
      }
      .section__meta::after { max-width: 64px; }
      .section__title { font-size: 48px; line-height: .96; }
      .section__lead { margin-top: 16px; font-size: 13px; line-height: 1.65; }
      .micro-label { font-size: 7px; }

      .hero { min-height: 0; }
      .hero__inner { padding: 70px 20px calc(env(safe-area-inset-bottom) + 24px); }
      .hero__brand { top: calc(env(safe-area-inset-top) + 19px); left: 20px; }
      .hero__brand img { width: 92px; }
      .hero__skills { display: none; }
      .hero__title {
        width: 100%;
        font-size: 58px;
        line-height: .9;
        text-align: left;
        white-space: nowrap;
      }
      .hero__portrait {
        position: relative;
        left: 50%;
        top: auto;
        display: block;
        width: 92vw;
        height: auto;
        max-height: none;
        margin: -6px 0 0;
        transform: translateX(-50%);
        object-position: center bottom;
      }
      .hero__info {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: -18px;
      }
      .hero__identity { margin-bottom: 8px; font-size: 11px; }
      .hero__statement { max-width: 320px; font-size: 12px; line-height: 1.55; }
      .hero__bio { max-width: 360px; font-size: 10px; line-height: 1.55; }

      .concept .section__inner { min-height: 0; }
      .concept__copy { width: 100%; }
      .concept .section__title { font-size: 52px; }
      .concept__subtitle { margin: 20px 0 8px; font-size: 18px; }
      .concept .section__lead { max-width: 340px; font-size: 13px; }
      .concept__visual {
        position: relative;
        left: -16%;
        right: auto;
        top: auto;
        bottom: auto;
        width: 144%;
        margin-top: 22px;
        align-items: center;
      }
      .concept__visual img { width: 100%; }
      .concept__rectangle-225 { display: none; }
      .concept__year,
      .concept__project { bottom: 18px; }
      .concept__year { right: 20px; }
      .concept__project { left: 20px; }

      .strategy .section__inner {
        min-height: 0;
        padding: 72px 20px 48px;
      }
      #section-03 .strategy__intro,
      #section-04 .strategy__intro {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
      }
      .strategy__intro .section__title { font-size: 25px; line-height: 1.18; }
      .strategy__intro .section__lead { max-width: 360px; margin-top: 10px; font-size: 12px; }
      #section-03 .diagram-board {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        margin-top: 30px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        overflow: visible;
      }
      .insight__axis-h,
      .insight__axis-v,
      .insight__endpoint { display: none; }
      .insight__role,
      .insight__role--father,
      .insight__role--husband,
      .insight__role--worker,
      .insight__role--driver {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        aspect-ratio: 1;
      }
      .insight__role h3 { margin-bottom: .35em; font-size: 20px; }
      .insight__role p { max-width: 125px; font-size: 9px; white-space: normal; }
      #section-03 .diagram-project {
        position: relative;
        left: auto;
        bottom: auto;
        grid-column: 1 / -1;
        margin-top: 2px;
      }

      #section-04 .strategy__intro .section__title { font-size: 20px; white-space: nowrap; }
      #section-04 .bridge-board {
        position: relative;
        left: -20%;
        top: auto;
        width: 140%;
        height: auto;
        min-height: 0;
        margin-top: 20px;
        aspect-ratio: 1.795 / 1;
        overflow: visible;
      }
      #section-04 .diagram-project { left: 28.5%; bottom: -30px; }
      .bridge__center { font-size: 17px; }
      .bridge__side { font-size: 13px; }
      .bridge__tag { font-size: 8px; }

      .mood { min-height: auto; }
      .mood .section__inner { padding-top: 72px; padding-bottom: 56px; }
      .mood__heading {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 14px;
        margin-bottom: 28px;
      }
      .mood__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .mood__card:nth-child(2),
      .mood__card:nth-child(5) { transform: none; }

      .system { min-height: auto; }
      .system .section__inner { padding-top: 72px; padding-bottom: 48px; }
      .system__layout { aspect-ratio: auto; min-height: 0; overflow: hidden; }
      .system__spec {
        position: relative;
        inset: auto;
        width: 100%;
        display: block;
      }
      .system__row {
        min-height: 0;
        grid-template-columns: 84px minmax(0, 1fr);
        padding: 16px 0;
      }
      .system__row:nth-child(1),
      .system__row:nth-child(3) { padding: 16px 0; }
      .system__name { font-size: 8px; }
      .wordmark { font-size: 40px; }
      .type-sample { font-size: 20px; white-space: normal; }
      .swatches { min-height: 112px; }
      .swatch { min-width: 0; padding: 8px 5px 0; overflow: hidden; font-size: 6px; }
      .swatch__values { white-space: normal; }
      .swatch::after { margin-right: -6px; margin-left: -6px; }
      .marking { min-height: 160px; }
      .marking strong { font-size: 37px; }
      .marking span { font-size: 24px; }
      .system__car {
        left: 6%;
        top: 61%;
        width: 128%;
        height: 39%;
      }

      .icons { min-height: auto; }
      .icons .section__inner { display: block; padding: 72px 20px 52px; }
      .icons__intro {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 12px;
        margin-bottom: 24px;
      }
      .icons__intro > div { width: 100%; }
      .icons__stage { height: auto; }
      .icons__preview {
        position: relative;
        width: 62%;
        max-width: none;
        margin: 0 auto 18px;
      }
      .icons__grid {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 9px;
      }

      .finale {
        min-height: 0;
        aspect-ratio: 3 / 4;
      }
      .finale__visual img { object-position: 54% center; }
      .finale__copy {
        left: 20px;
        right: 20px;
        bottom: calc(env(safe-area-inset-bottom) + 34px);
        display: block;
      }
      .finale__title { font-size: 58px; line-height: .86; }
      .finale__aside { max-width: 280px; margin-top: 18px; font-size: 12px; line-height: 1.55; }

      .instrument,
      .chapter11,
      .chapter12,
      .chapter13,
      .chapter14,
      .chapter15,
      .chapter16,
      .chapter17,
      .chapter18,
      .chapter19 {
        width: 100%;
        height: auto;
        min-height: 0;
      }
      .chapter11__stage,
      .chapter12__stage {
        display: block;
        position: relative;
        left: 0;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        height: 56.25vw;
        transform: none;
      }
      .instrument {
        position: relative;
        height: auto;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: #05050c;
      }
      .instrument__frame,
      .instrument__fallback {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .instrument__fallback {
        z-index: 0;
        display: block;
        opacity: 1;
        transition: opacity 120ms linear;
      }
      .instrument__frame {
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 120ms linear;
      }
      .instrument.is-live.is-frame-loaded .instrument__frame {
        opacity: 1;
        visibility: visible;
      }
      .instrument.is-live.is-frame-loaded .instrument__fallback { opacity: 0; }
      .chapter11__background-mask {
        left: 0;
        right: auto;
        top: 0;
        bottom: auto;
        width: 100%;
        height: 100%;
        transform: none;
      }
      .chapter13__stage,
      .chapter14__stage,
      .chapter15__stage,
      .chapter16__stage,
      .chapter17__stage,
      .chapter18__stage,
      .chapter19__stage {
        left: 0;
        top: auto;
        position: relative;
        width: 100%;
        height: 56.25vw;
        transform: none;
      }
      .chapter13__camera-subject video { display: none; }
      .chapter13__camera-subject .chapter13__camera-mobile-fallback {
        z-index: 1;
        display: block;
      }
      .chapter18__vehicle { mix-blend-mode: normal; }
      .chapter18__vehicle > video {
        mix-blend-mode: screen;
        filter: none;
        transform: translateZ(0);
      }

      .footer {
        padding: 22px 20px calc(env(safe-area-inset-bottom) + 24px);
        gap: 12px;
        font-size: 8px;
      }
      .footer__meta { gap: 8px; }
    }