:root {
      --ink: #f6f8fb;
      --muted: #8e99a8;
      --faint: #566170;
      --night: #05070a;
      --night-soft: #0a0e14;
      --glass: rgba(219, 239, 255, .12);
      --line: rgba(211, 231, 246, .17);
      --cyan: #a9e9ff;
      --ice: #e8f8ff;
      --silver: #c8d0d8;
      --mx: 0;
      --my: 0;
      --hero-exit: 0;
      --chapter-progress: 0;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { background: var(--night); scroll-behavior: smooth; overflow-x: clip; }
    body {
      margin: 0;
      overflow-x: clip;
      background:
        radial-gradient(circle at 78% 8%, rgba(92, 143, 174, .08), transparent 29rem),
        var(--night);
      color: var(--ink);
      font-family: "Manrope", "Noto Sans JP", sans-serif;
      font-weight: 300;
      line-height: 1.7;
    }
    body.is-locked { overflow: hidden; }
    img { display: block; max-width: 100%; }
    button, a { color: inherit; font: inherit; }
    a { text-decoration: none; }
    button { border: 0; }
    ::selection { color: #041018; background: var(--cyan); }

    .noise {
      position: fixed;
      z-index: 50;
      inset: 0;
      opacity: .035;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
      mix-blend-mode: soft-light;
    }

    .reload-cover {
      position: fixed;
      z-index: 200;
      inset: 0;
      display: grid;
      place-items: center;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      background: #f5f7f8;
      color: #071018;
      font: 400 clamp(2rem, 5vw, 4.8rem) "Space Grotesk", sans-serif;
      letter-spacing: .38em;
      transition: opacity .12s linear;
    }
    body.is-leaving .reload-cover { visibility: visible; opacity: 1; }

    .entry {
      position: fixed;
      z-index: 100;
      inset: 0;
      display: grid;
      place-items: center;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 69% 48%, rgba(255,255,255,1) 0 12%, rgba(232,241,245,.78) 33%, transparent 63%),
        linear-gradient(112deg, #f8fafb, #edf2f4 58%, #f7f9fa);
      color: #071018;
      animation: entry-leave .82s .66s cubic-bezier(.4, 0, .2, 1) forwards;
      pointer-events: none;
    }
    .entry::before {
      content: "";
      position: absolute;
      left: 50%;
      top: calc(50% + 3.2rem);
      width: min(42vw, 560px);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(44, 84, 104, .38) 22%, rgba(164, 218, 237, .82) 50%, rgba(44, 84, 104, .38) 78%, transparent);
      box-shadow: 0 0 24px rgba(126, 199, 224, .24);
      transform: translateX(-50%) scaleX(.18);
      animation: entry-ring 1.3s cubic-bezier(.16, 1, .3, 1) both;
    }
    .entry::after {
      content: "";
      position: absolute;
      z-index: 4;
      inset: -15%;
      background: linear-gradient(104deg, transparent 30%, rgba(255,255,255,.2) 43%, rgba(255,255,255,.98) 50%, rgba(205,229,238,.18) 57%, transparent 70%);
      filter: blur(24px);
      opacity: 0;
      transform: translateX(-22%);
      animation: entry-iris .84s .42s cubic-bezier(.16, 1, .3, 1) forwards;
    }
    .entry-mark {
      position: relative;
      z-index: 5;
      display: flex;
      align-items: baseline;
      gap: .34em;
      font-family: "Space Grotesk", sans-serif;
      letter-spacing: .38em;
      color: #10202a;
      text-shadow: 0 1px 0 rgba(255,255,255,.9);
      animation: entry-mark-leave .44s .54s cubic-bezier(.4,0,.2,1) forwards;
    }
    .entry-mark strong { font-size: clamp(2.4rem, 7vw, 6.6rem); font-weight: 400; }
    .entry-mark span { color: #67808f; font-size: clamp(.68rem, 1vw, .9rem); letter-spacing: .3em; }

    .site-header {
      position: absolute;
      z-index: 20;
      top: 0;
      left: 0;
      width: 100%;
      padding: 26px clamp(22px, 4vw, 72px);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .logo {
      display: flex;
      align-items: baseline;
      gap: .7rem;
      font-family: "Space Grotesk", sans-serif;
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: .34em;
    }
    .logo span { color: var(--muted); font-size: .56rem; letter-spacing: .2em; }
    .header-nav { display: flex; align-items: center; gap: clamp(18px, 2.8vw, 44px); }
    .header-nav a {
      position: relative;
      color: #b9c2cc;
      font-size: .68rem;
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    .header-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -.5rem;
      width: 100%;
      height: 1px;
      background: var(--cyan);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .45s cubic-bezier(.16, 1, .3, 1);
    }
    .header-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
    .menu-button { display: none; background: transparent; }

    .hero {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      isolation: isolate;
      border-bottom: 1px solid var(--line);
      background: #05070a url("images/sona-h1-spatial-field-master-desktop.jpg") center / cover no-repeat;
    }
    .hero-media {
      position: absolute;
      z-index: -6;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      animation: hero-media-arrive 1.8s .18s cubic-bezier(.16, 1, .3, 1) both;
    }
    .hero-media video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 55% center;
      opacity: calc(.62 - var(--hero-exit) * .16);
      filter: none;
      transform: translateX(2.5%) scale(calc(1.045 + var(--hero-exit) * .045));
      transition: opacity .12s linear;
    }
    .hero-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(5,7,10,.66), rgba(5,7,10,.2) 43%, transparent 62%, rgba(5,7,10,.08)),
        linear-gradient(180deg, rgba(5,7,10,.14), transparent 54%, rgba(5,7,10,.48));
    }
    .hero-spectrum { position: absolute; z-index: -3; inset: 0; overflow: hidden; opacity: .18; pointer-events: none; }
    .hero-spectrum i {
      position: absolute;
      border-radius: 50%;
      filter: blur(70px);
      mix-blend-mode: screen;
      opacity: .52;
      animation: spectrum-drift 10s ease-in-out infinite alternate;
    }
    .hero-spectrum i:nth-child(1) { width: 34vw; height: 34vw; right: 17%; top: 14%; background: rgba(0,183,255,.32); }
    .hero-spectrum i:nth-child(2) { width: 28vw; height: 28vw; right: -4%; bottom: 1%; background: rgba(107,70,255,.28); animation-delay: -3.4s; }
    .hero-spectrum i:nth-child(3) { width: 22vw; height: 22vw; left: 34%; bottom: -8%; background: rgba(255,164,99,.16); animation-delay: -6.2s; }
    .hero-spectrum::after {
      content: "";
      position: absolute;
      right: 4%;
      top: 4%;
      width: min(73vw, 1050px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: conic-gradient(from 205deg, transparent 0 35%, rgba(123,226,255,.12) 42%, rgba(151,104,255,.1) 51%, transparent 61% 100%);
      filter: blur(2px);
      transform: rotate(calc(var(--mx) * 5deg));
    }
    #sound-field { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; opacity: .25; mix-blend-mode: screen; }
    .hero::before {
      content: "";
      position: absolute;
      z-index: -3;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(5,7,10,.96) 0%, rgba(5,7,10,.8) 36%, rgba(5,7,10,.06) 69%, rgba(5,7,10,.4) 100%),
        radial-gradient(ellipse at 72% 47%, rgba(139, 211, 237, .09), transparent 30%),
        linear-gradient(180deg, transparent 58%, rgba(5,7,10,.76));
    }
    .hero::after {
      content: "";
      position: absolute;
      z-index: -2;
      top: 8%;
      right: 5%;
      width: min(66vw, 980px);
      aspect-ratio: 1;
      border: 1px solid rgba(185,231,248,.14);
      border-radius: 50%;
      box-shadow:
        inset 0 0 90px rgba(130, 210, 241, .05),
        0 0 0 7vw rgba(115, 190, 220, .018),
        0 0 0 calc(7vw + 1px) rgba(185,231,248,.05);
      transform: translate(calc(var(--mx) * -12px), calc(var(--my) * -12px));
      transition: transform .3s ease-out;
      opacity: .08;
    }
    .hero-grid {
      position: relative;
      width: min(1520px, calc(100% - clamp(44px, 8vw, 144px)));
      height: 100vh;
      min-height: 720px;
      margin: 0 auto;
      padding-top: 78px;
    }
    .hero-copy {
      position: absolute;
      z-index: 5;
      top: 50%;
      left: 0;
      width: 48%;
      padding-bottom: 2vh;
      transform: translateY(-50%);
      opacity: calc(1 - var(--hero-exit) * 1.75);
      filter: blur(calc(var(--hero-exit) * 8px));
      transition: opacity .08s linear, filter .08s linear;
    }
    .hero-copy > * { animation: hero-copy-arrive .95s cubic-bezier(.16,1,.3,1) both; }
    .hero-copy > .kicker { animation-delay: .78s; }
    .hero-copy > h1 { animation-delay: .88s; }
    .hero-copy > .hero-lead { animation-delay: 1.02s; }
    .hero-copy > .hero-actions { animation-delay: 1.12s; }
    .kicker {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 28px;
      color: var(--cyan);
      font-size: .62rem;
      font-weight: 500;
      letter-spacing: .28em;
      text-transform: uppercase;
    }
    .kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; }
    .hero h1 {
      margin: 0;
      font-family: "Space Grotesk", "Noto Sans JP", sans-serif;
      font-size: clamp(3.8rem, 7.3vw, 8.9rem);
      font-weight: 400;
      letter-spacing: -.065em;
      line-height: .84;
      text-transform: uppercase;
    }
    .hero h1 span { display: block; }
    .hero h1 .outline {
      margin-left: .5em;
      color: transparent;
      -webkit-text-stroke: 1px rgba(224,244,252,.56);
    }
    .hero-lead {
      max-width: 540px;
      margin: 38px 0 0;
      color: #bdc7d1;
      font-size: clamp(.86rem, 1.05vw, 1rem);
      line-height: 2.1;
      letter-spacing: .08em;
    }
    .hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 38px; }
    .primary-button {
      position: relative;
      min-width: 230px;
      padding: 17px 54px 16px 25px;
      overflow: hidden;
      border: 1px solid rgba(202, 238, 250, .4);
      background: linear-gradient(110deg, rgba(220,243,251,.13), rgba(220,243,251,.045));
      backdrop-filter: blur(12px);
      color: var(--ice);
      cursor: pointer;
      font-size: .7rem;
      font-weight: 500;
      letter-spacing: .18em;
      text-align: left;
      text-transform: uppercase;
      transition: color .4s, border-color .4s, transform .4s;
    }
    .primary-button::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 10%, rgba(223,248,255,.88) 48%, transparent 75%);
      transform: translateX(-120%);
      transition: transform .8s cubic-bezier(.16, 1, .3, 1);
    }
    .primary-button span { display: block; }
    .primary-button small { display: block; margin-top: 5px; color: #82909d; font-size: .52rem; font-weight: 400; letter-spacing: .12em; }
    .primary-button::after { content: "↘"; position: absolute; top: 50%; right: 20px; font-size: 1rem; transform: translateY(-50%); }
    .primary-button:hover { color: #fff; border-color: rgba(211,242,252,.85); transform: translateY(-2px); }
    .primary-button:hover::before { transform: translateX(120%); }
    .edition { color: #c3d3dc; font-size: .68rem; letter-spacing: .12em; line-height: 1.8; }
    .edition strong { display: block; color: var(--ice); font: 400 1rem "Space Grotesk", sans-serif; letter-spacing: .04em; }

    .hero-product {
      position: absolute;
      z-index: 3;
      inset: 0 1.5% 0 38%;
      display: grid;
      place-items: center;
      perspective: 1300px;
      opacity: calc(1 - var(--hero-exit) * 1.7);
      filter: blur(calc(var(--hero-exit) * 6px));
      transition: opacity .06s linear, filter .06s linear;
      color: inherit;
      cursor: pointer;
      pointer-events: auto;
      text-decoration: none;
    }
    .hero-product:focus-visible { outline: 1px solid rgba(212,244,255,.9); outline-offset: -18px; }
    .hero-product .hero-rig { transition: filter .65s ease, transform .75s cubic-bezier(.16,1,.3,1); }
    .hero-product:hover .hero-rig { filter: brightness(1.08) drop-shadow(0 26px 55px rgba(105,211,246,.2)); transform: translate3d(0,-5px,34px) scale(1.018); }
    .hero-product::before {
      content: "";
      position: absolute;
      width: 58%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(218,246,255,.17), rgba(106,197,229,.05) 42%, transparent 68%);
      filter: blur(12px);
    }
    .hero-refraction {
      position: absolute;
      z-index: 4;
      inset: 8% -5% 2% 34%;
      overflow: hidden;
      pointer-events: none;
      opacity: calc(.42 - var(--hero-exit) * .55);
      mix-blend-mode: screen;
      transform: translate3d(calc(var(--mx) * -18px), calc(var(--my) * -10px), 90px);
      transition: transform .28s ease-out;
    }
    .hero-refraction i {
      position: absolute;
      width: 18%;
      height: 120%;
      top: -10%;
      border: 1px solid rgba(218,246,255,.11);
      background: linear-gradient(104deg, transparent 5%, rgba(204,240,252,.02) 28%, rgba(221,248,255,.13) 50%, rgba(136,206,235,.03) 72%, transparent 96%);
      filter: blur(.2px);
      transform: skewX(-11deg) rotate(7deg);
    }
    .hero-refraction i:first-child { right: 6%; }
    .hero-refraction i:last-child { right: 27%; width: 8%; opacity: .48; transform: skewX(-11deg) rotate(7deg) translateY(8%); }
    .hero-orbit {
      position: absolute;
      width: min(58vw, 840px);
      aspect-ratio: 1;
      pointer-events: none;
      transform: translate(calc(var(--mx) * -9px), calc(var(--my) * -7px));
      opacity: .08;
    }
    .hero-orbit i {
      position: absolute;
      inset: calc(var(--i) * 7.5%);
      border: 1px solid rgba(174,229,247,calc(.19 - var(--i) * .032));
      border-radius: 50%;
      transform: rotateX(calc(68deg + var(--i) * 3deg)) rotateZ(calc(var(--i) * 17deg));
      animation: orbit-breathe calc(7s + var(--i) * 1.4s) ease-in-out infinite alternate;
    }
    .hero-orbit::before,
    .hero-orbit::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 3%;
      right: 3%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(179,232,250,.2) 22%, rgba(235,250,255,.82) 50%, rgba(179,232,250,.2) 78%, transparent);
      transform: scaleX(.72);
      animation: field-line 5.4s ease-in-out infinite;
    }
    .hero-orbit::after { transform: rotate(90deg) scaleX(.52); opacity: .28; animation-delay: -2.2s; }
    .hero-rig {
      position: relative;
      width: min(41vw, 620px);
      max-width: 620px;
      height: min(76vh, 700px);
      transform-style: preserve-3d;
      transform:
        translate3d(calc(var(--mx) * 10px), calc(var(--my) * 7px), 0)
        translate3d(var(--ambient-x, 0px), var(--ambient-y, 0px), 0)
        translateZ(calc(var(--hero-exit) * 72px))
        scale(calc(1 + var(--hero-exit) * .035))
        rotateX(calc(var(--my) * -2.5deg)) rotateY(calc(var(--mx) * 4.5deg)) rotateZ(var(--ambient-rz, 0deg));
      opacity: calc(1 - var(--hero-exit) * 2.1);
      filter: blur(calc(var(--hero-exit) * 7px));
      transition: transform .22s ease-out;
      animation: product-arrive 1.38s .92s cubic-bezier(.16, 1, .3, 1) both;
    }
    .hero-rig img {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 42px 62px rgba(0,0,0,.62)) drop-shadow(0 0 22px rgba(170,225,245,.08));
    }
    .hero-rig::before {
      content: "";
      position: absolute;
      z-index: 3;
      inset: 0;
      background: linear-gradient(112deg, transparent 31%, rgba(255,255,255,.18) 42%, rgba(255,255,255,.68) 48%, rgba(198,239,255,.12) 53%, transparent 64%);
      background-size: 260% 100%;
      background-position: 150% 0;
      mix-blend-mode: screen;
      -webkit-mask: url("images/sona-h1-master.png") center / contain no-repeat;
      mask: url("images/sona-h1-master.png") center / contain no-repeat;
      animation: product-sheen 5.8s 2.35s cubic-bezier(.4,0,.2,1) infinite;
      pointer-events: none;
    }
    .hero-rig::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: 17%;
      right: 17%;
      bottom: 7%;
      height: 12%;
      border-radius: 50%;
      background: rgba(126, 210, 240, .16);
      filter: blur(38px);
      transform: rotateX(72deg);
    }
    .product-index {
      position: absolute;
      z-index: 4;
      right: 2%;
      top: 22%;
      color: rgba(218,239,247,.62);
      font-size: .54rem;
      letter-spacing: .22em;
      writing-mode: vertical-rl;
      text-transform: uppercase;
    }
    .product-index::before { content: ""; display: inline-block; width: 1px; height: 58px; margin-bottom: 12px; background: var(--cyan); }
    .scroll-cue {
      position: absolute;
      z-index: 6;
      left: 50%;
      bottom: 20px;
      display: grid;
      justify-items: center;
      gap: 10px;
      color: var(--faint);
      font-size: .52rem;
      letter-spacing: .3em;
      text-transform: uppercase;
    }
    .scroll-cue::after { content: ""; width: 1px; height: 42px; background: linear-gradient(var(--cyan), transparent); animation: cue 2s ease-in-out infinite; }

    .chapters {
      position: relative;
      height: 100svh;
      min-height: 680px;
      background: #06090e;
    }
    .chapters::before {
      content: "";
      position: absolute;
      z-index: 8;
      top: -18vh;
      left: 0;
      width: 100%;
      height: 20vh;
      pointer-events: none;
      background: linear-gradient(180deg, transparent, rgba(6,9,14,.76) 66%, #06090e);
    }
    .chapter-pin {
      position: relative;
      height: 100%;
      overflow: hidden;
      isolation: isolate;
      border-bottom: 1px solid var(--line);
      perspective: 1100px;
      --scene-cyan: 101, 220, 255;
      --scene-violet: 104, 76, 255;
    }
    #depth-field { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; opacity: .72; }
    .depth-tunnel { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; perspective: 900px; }
    .depth-gate {
      position: absolute;
      left: 68%;
      top: 50%;
      width: min(68vw, 1020px);
      aspect-ratio: 1;
      border: 1px solid rgba(var(--scene-cyan), .22);
      border-radius: 50%;
      box-shadow: inset 0 0 70px rgba(var(--scene-cyan), .025), 0 0 38px rgba(var(--scene-violet), .035);
      will-change: transform, opacity;
    }
    .depth-shard {
      position: absolute;
      z-index: 7;
      width: clamp(90px, 12vw, 220px);
      height: 58vh;
      top: 17%;
      opacity: .18;
      border: 1px solid rgba(207,241,252,.18);
      background: linear-gradient(118deg, rgba(var(--scene-cyan), .02), rgba(var(--scene-cyan), .16) 46%, rgba(var(--scene-violet), .04));
      backdrop-filter: blur(3px);
      transform: skewX(-11deg);
      pointer-events: none;
      will-change: transform, opacity;
    }
    .depth-shard--a { left: -4%; }
    .depth-shard--b { right: -3%; top: 7%; height: 76vh; }
    .chapter-pin::before {
      content: "";
      position: absolute;
      z-index: -5;
      inset: 0;
      background:
        radial-gradient(circle at var(--focus-x, 66%) 50%, rgba(var(--scene-cyan), .28), transparent 29%),
        radial-gradient(circle at 82% 24%, rgba(var(--scene-violet), .2), transparent 32%),
        linear-gradient(105deg, #03060b 0%, #07101a 48%, #020408 100%);
      transition: background 1.2s ease;
    }
    .chapter-pin[data-active="1"] { --scene-cyan: 84, 175, 255; --scene-violet: 143, 72, 255; }
    .chapter-pin[data-active="2"] { --scene-cyan: 255, 179, 103; --scene-violet: 47, 160, 255; }
    .chapter-pin[data-active="3"] { --scene-cyan: 205, 245, 255; --scene-violet: 125, 205, 255; }
    .chapter-pin::after {
      content: "";
      position: absolute;
      z-index: -4;
      inset: 0;
      opacity: .6;
      background-image:
        linear-gradient(rgba(193,226,239,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(193,226,239,.055) 1px, transparent 1px);
      background-size: 9vw 9vw;
      mask-image: linear-gradient(90deg, transparent 2%, #000 50%, transparent 98%);
    }
    .chapter-shell {
      position: relative;
      width: min(1480px, calc(100% - clamp(44px, 8vw, 144px)));
      height: 100%;
      margin: auto;
      transform: translateX(var(--drag-shift, 0px));
      transition: transform .38s cubic-bezier(.16,1,.3,1);
    }
    .chapter-pin.is-dragging .chapter-shell { transition: none; }
    .chapter-copy {
      position: absolute;
      z-index: 5;
      top: 50%;
      left: 0;
      width: 45%;
      height: min(62vh, 540px);
      min-height: 430px;
      overflow: visible;
      transform: translateY(-50%);
      transition:
        top 1.15s cubic-bezier(.16,1,.3,1),
        left 1.15s cubic-bezier(.16,1,.3,1),
        width 1.15s cubic-bezier(.16,1,.3,1);
    }
    .chapter-pin[data-active="1"] .chapter-copy { left: 57%; width: 40%; }
    .chapter-pin[data-active="1"] .chapter-panel { text-align: right; align-items: flex-end; }
    .chapter-pin[data-active="1"] .chapter-metric { justify-content: flex-end; }
    .chapter-pin[data-active="1"] .chapter-visual { inset: 0 42% 0 0; }
    .chapter-pin[data-active="2"] .chapter-copy { top: 55%; left: 5%; width: 39%; }
    .chapter-pin[data-active="2"] .chapter-visual { inset: -6% -3% 14% 49%; }
    .chapter-pin[data-active="3"] .chapter-visual { inset: 0 -7% 0 45%; }
    .chapter-panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      opacity: var(--panel-opacity, 0);
      visibility: var(--panel-visibility, hidden);
      filter: none;
      overflow: visible;
      transform: translate3d(0, var(--panel-y, 24px), 0);
      pointer-events: none;
      transition:
        opacity .42s cubic-bezier(.22,.61,.36,1),
        transform .58s cubic-bezier(.16,1,.3,1),
        visibility 0s linear .44s;
    }
    .chapter-panel.is-active {
      --panel-opacity: 1;
      --panel-visibility: visible;
      --panel-blur: 0px;
      --panel-y: 0px;
      pointer-events: auto;
      transition-duration: .48s, .64s, 0s;
      transition-delay: 0s;
    }
    .chapter-number { color: var(--cyan); font: 500 .63rem "Space Grotesk", sans-serif; letter-spacing: .26em; }
    .chapter-panel h2 {
      max-width: 620px;
      margin: 20px 0 23px;
      font-family: "Noto Sans JP", sans-serif;
      font-size: clamp(2.25rem, 3.65vw, 4.45rem);
      font-weight: 300;
      letter-spacing: -.05em;
      line-height: 1.08;
    }
    .chapter-panel h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(218,239,247,.55); }
    .chapter-panel p { max-width: 480px; margin: 0; color: #a2aeba; font-size: .9rem; line-height: 2.05; }
    .chapter-metric { display: flex; gap: 40px; margin-top: 34px; }
    .chapter-metric strong { display: block; color: var(--ice); font: 300 clamp(1.7rem, 2.6vw, 2.8rem) "Space Grotesk"; letter-spacing: -.04em; }
    .chapter-metric span { color: var(--faint); font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; }
    .chapter-visual {
      position: absolute;
      inset: 0 0 0 40%;
      display: grid;
      place-items: center;
      perspective: 1400px;
      transition: inset 1.15s cubic-bezier(.16,1,.3,1);
    }
    .stage-rings { position: absolute; width: min(48vw, 720px); aspect-ratio: 1; }
    .stage-rings i {
      position: absolute;
      inset: calc(var(--i) * 7%);
      border: 1px solid rgba(167,224,245, calc(.2 - var(--i) * .035));
      border-top-color: rgba(var(--scene-violet), .04);
      border-right-color: rgba(var(--scene-cyan), .34);
      border-radius: 50%;
      transform: rotateX(calc(62deg + var(--i) * 4deg)) rotateZ(calc(var(--chapter-progress) * 120deg + var(--i) * 19deg));
      transition: border-color .6s;
      rotate: var(--ambient-ring, 0deg);
    }
    .stage-product {
      position: relative;
      z-index: 2;
      width: min(43vw, 650px);
      max-width: 650px;
      height: min(70vh, 680px);
      transform-style: preserve-3d;
      transform:
        translate3d(var(--stage-x, 0), var(--stage-y, 0), var(--camera-z, 0px))
        translate3d(var(--ambient-stage-x, 0px), var(--ambient-stage-y, 0px), 0)
        rotateX(calc(var(--my) * -2deg)) rotateY(calc(var(--mx) * 4deg - 5deg))
        rotateZ(calc(var(--ambient-stage-rz, 0deg) + var(--scene-tilt, 0deg)))
        scale(var(--stage-scale, .94));
      transition: transform 1.15s cubic-bezier(.16,1,.3,1), filter .8s ease, opacity .8s ease;
      will-change: transform;
    }
    .stage-asset {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: var(--asset-opacity, 0);
      visibility: visible;
      transform: translate3d(var(--asset-x, 0), var(--asset-y, 18px), var(--asset-z, -120px)) scale(var(--asset-scale, .94));
      filter: drop-shadow(0 50px 70px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(174,229,247,.09));
      will-change: opacity, transform, filter;
      transition:
        opacity .48s cubic-bezier(.22,.61,.36,1),
        transform .68s cubic-bezier(.16,1,.3,1);
    }
    .stage-asset.is-active {
      --asset-opacity: 1;
      --asset-y: 0px;
      --asset-z: 0px;
      --asset-blur: 0px;
      --asset-brightness: 1;
      filter: drop-shadow(0 50px 70px rgba(0,0,0,.7)) drop-shadow(0 0 28px rgba(174,229,247,.14));
      transition-delay: 0s;
    }
    /* --asset-* はJSが毎フレーム書き換えるため、画枠補正は別変数で持つ */
    .stage-asset--detail {
      transform:
        translate3d(var(--asset-frame-x, 0), var(--asset-frame-y, 0), 0)
        translate3d(var(--asset-x, 0), var(--asset-y, 0), var(--asset-z, -120px))
        scale(var(--asset-scale, .94));
    }
    /* 詳細カットは被写体が原画の縁で切れているため、四辺を減衰させて断面を出さない */
    .chapter-pin[data-active="2"] .stage-product,
    .chapter-pin[data-active="3"] .stage-product { width: min(46vw, 620px); max-width: 620px; height: min(46vw, 620px); }
    .stage-asset--detail {
      -webkit-mask-image:
        linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%),
        linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%),
        linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
      mask-composite: intersect;
    }
    .stage-product::after {
      content: "";
      position: absolute;
      inset: 13%;
      background: linear-gradient(108deg, transparent 30%, rgba(228,250,255,.08) 39%, rgba(239,253,255,.62) 49%, rgba(174,229,247,.12) 57%, transparent 68%);
      mix-blend-mode: screen;
      opacity: calc(.04 + var(--transition-intensity, 0) * .38);
      transform: translateX(calc(-135% + var(--transition-phase, 0) * 270%));
      mask-image: radial-gradient(ellipse at center, #000 0 42%, transparent 74%);
      pointer-events: none;
    }
    .stage-product::before {
      content: "";
      position: absolute;
      z-index: 4;
      top: 5%;
      bottom: 5%;
      left: calc(8% + var(--chapter-progress) * 76%);
      width: 1px;
      background: linear-gradient(transparent, rgba(221,247,255,.9) 38%, rgba(153,226,250,.35) 62%, transparent);
      box-shadow: 0 0 24px rgba(176,232,251,.38);
      opacity: calc(.12 + var(--transition-intensity, 0) * .34);
      pointer-events: none;
    }
    .chapter-pin.is-transitioning .stage-product::after {
      animation: auto-stage-sheen 1.15s cubic-bezier(.4,0,.2,1) both;
    }
    .chapter-pin[data-active="0"] { --stage-scale: .98; --stage-x: 0; --stage-y: 0; }
    .chapter-pin[data-active="1"] { --stage-scale: 1; --stage-x: 1%; --stage-y: 0; }
    .chapter-pin[data-active="2"] { --stage-scale: .96; --stage-x: 3%; --stage-y: -2%; --scene-tilt: -4deg; }
    .chapter-pin[data-active="3"] { --stage-scale: 1; --stage-x: 0; --stage-y: 0; }
    .chapter-pin[data-active="1"] .stage-rings { transform: scaleX(1.12) rotate(8deg); }
    .chapter-pin[data-active="2"] .stage-rings { transform: scale(.72) rotate(-12deg); opacity: .55; }
    .chapter-pin[data-active="3"] .stage-rings { transform: scale(1.18); opacity: .32; }
    .stage-rings { transition: transform 1.1s cubic-bezier(.16,1,.3,1), opacity .8s ease; }
    .stage-readout {
      position: absolute;
      z-index: 5;
      right: 0;
      bottom: clamp(146px, 17vh, 190px);
      display: grid;
      grid-template-columns: auto 74px auto;
      align-items: center;
      gap: 10px;
      color: rgba(205,236,247,.52);
      font: 500 .5rem "Space Grotesk", sans-serif;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    .stage-readout i { position: relative; width: 74px; height: 1px; overflow: hidden; background: rgba(205,236,247,.18); }
    .stage-readout i::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--cyan);
      transform: scaleX(var(--chapter-progress));
      transform-origin: left;
    }
    .chapter-pin { touch-action: pan-y; }
    .chapter-pin:focus-visible { outline: 1px solid rgba(162,232,255,.52); outline-offset: -2px; }
    .chapter-navigator {
      position: absolute;
      z-index: 12;
      left: 50%;
      bottom: clamp(18px, 3.2vh, 34px);
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) 58px;
      gap: 10px;
      width: min(1100px, calc(100% - 48px));
      transform: translateX(-50%);
    }
    .chapter-navigator::before {
      content: "DRAG / SWIPE / SELECT";
      position: absolute;
      left: 68px;
      bottom: calc(100% + 11px);
      color: rgba(199,232,244,.58);
      font: 500 .5rem "Space Grotesk", sans-serif;
      letter-spacing: .22em;
      pointer-events: none;
    }
    .chapter-direction {
      position: relative;
      display: grid;
      place-items: center;
      min-width: 48px;
      border: 1px solid rgba(176,220,237,.2);
      background: rgba(4,10,16,.64);
      color: rgba(219,243,251,.78);
      cursor: pointer;
      font: 300 1.25rem "Space Grotesk", sans-serif;
      backdrop-filter: blur(16px);
      transition: border-color .3s ease, background .3s ease, color .3s ease, transform .3s ease;
    }
    .chapter-direction:hover,
    .chapter-direction:focus-visible {
      border-color: rgba(162,232,255,.7);
      background: rgba(83,166,196,.14);
      color: #fff;
      outline: none;
      transform: translateY(-2px);
    }
    .chapter-selector {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      min-width: 0;
      border: 1px solid rgba(176,220,237,.2);
      background: rgba(4,10,16,.7);
      box-shadow: 0 22px 70px rgba(0,0,0,.28);
      backdrop-filter: blur(18px);
    }
    .chapter-select {
      position: relative;
      display: grid;
      align-content: center;
      gap: 5px;
      min-width: 0;
      height: 78px;
      padding: 0 20px;
      overflow: hidden;
      border: 0;
      border-right: 1px solid rgba(176,220,237,.13);
      background: transparent;
      color: rgba(203,231,241,.46);
      cursor: pointer;
      text-align: left;
      transition: color .35s ease, background .45s ease;
    }
    .chapter-select:last-child { border-right: 0; }
    .chapter-select::before {
      content: attr(data-number);
      color: rgba(162,232,255,.62);
      font: 500 .58rem "Space Grotesk", sans-serif;
      letter-spacing: .18em;
    }
    .chapter-select::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--cyan), transparent);
      box-shadow: 0 0 18px rgba(162,232,255,.65);
      transform: scaleX(0);
      transition: transform .45s cubic-bezier(.16,1,.3,1);
    }
    .chapter-select span {
      overflow: hidden;
      font: 500 .72rem "Space Grotesk", sans-serif;
      letter-spacing: .16em;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .chapter-select b {
      overflow: hidden;
      color: rgba(219,238,246,.62);
      font-size: .58rem;
      font-weight: 400;
      letter-spacing: .08em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .chapter-select:hover,
    .chapter-select:focus-visible {
      background: rgba(121,211,242,.07);
      color: rgba(231,248,255,.86);
      outline: none;
    }
    .chapter-select.is-active {
      background: linear-gradient(180deg, rgba(128,215,244,.12), rgba(128,215,244,.025));
      color: #f1fbff;
    }
    .chapter-select.is-active::after { transform: scaleX(1); }
    .chapter-select.is-active::before { color: var(--cyan); text-shadow: 0 0 14px rgba(162,232,255,.5); }
    .chapter-select.is-active b { color: rgba(236,249,254,.88); }
    .chapter-pin.is-dragging { cursor: grabbing; }
    .chapter-pin.is-dragging .chapter-navigator { pointer-events: none; }
    .chapter-triggers { display: none; }

    .signal-band {
      position: relative;
      overflow: hidden;
      padding: 0;
      border-top: 1px solid rgba(169,233,255,.13);
      border-bottom: 1px solid var(--line);
      background:
        linear-gradient(90deg, rgba(5,9,14,.98), rgba(12,24,33,.96) 48%, rgba(5,9,14,.98)),
        #05080c;
      color: rgba(226,246,252,.78);
      box-shadow: inset 0 1px rgba(255,255,255,.025), 0 22px 80px rgba(69,165,198,.055);
    }
    .signal-band::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, #05080c 0, transparent 12%, transparent 88%, #05080c 100%);
    }
    .signal-console {
      position: relative;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: stretch;
      min-height: 66px;
    }
    .signal-console__id,
    .signal-console__status {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      padding: 0 clamp(22px, 3vw, 52px);
      background: rgba(4,8,12,.94);
      color: rgba(186,219,231,.56);
      font: 500 .5rem "Space Grotesk", sans-serif;
      letter-spacing: .22em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .signal-console__id { border-right: 1px solid rgba(169,233,255,.12); }
    .signal-console__status { border-left: 1px solid rgba(169,233,255,.12); }
    .signal-console__status::before {
      content: "";
      width: 5px;
      height: 5px;
      margin-right: 11px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 14px rgba(169,233,255,.78);
      animation: signal-pulse 2.8s ease-in-out infinite;
    }
    .signal-viewport {
      position: relative;
      min-width: 0;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    }
    .signal-track {
      display: flex;
      width: max-content;
      gap: 0;
      align-items: center;
      min-height: 66px;
      font: 400 clamp(.72rem, .95vw, .92rem)/1 "Space Grotesk";
      letter-spacing: .11em;
      text-transform: uppercase;
      animation: marquee 64s linear infinite;
    }
    .signal-track span { display: flex; align-items: center; gap: clamp(22px, 2.8vw, 48px); padding-right: clamp(22px, 2.8vw, 48px); color: rgba(221,241,248,.68); white-space: nowrap; }
    .signal-track span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 13px rgba(169,233,255,.55); opacity: .7; }
    .signal-track span:nth-child(even) { color: rgba(142,188,205,.46); }

    .editorial {
      --editorial-progress: 0;
      position: relative;
      min-height: 110vh;
      overflow: hidden;
      isolation: isolate;
      display: grid;
      align-items: center;
      border-bottom: 1px solid var(--line);
      background: #05070a;
    }
    .editorial::before {
      content: "";
      position: absolute;
      z-index: -1;
      top: -18%;
      right: -8%;
      width: min(58vw, 880px);
      aspect-ratio: 1;
      border: 1px solid rgba(188,234,250,.16);
      border-radius: 50%;
      background: conic-gradient(from 215deg, transparent 0 46%, rgba(127,216,246,.12) 52%, rgba(132,92,255,.1) 58%, transparent 66%);
      filter: blur(1px);
      animation: editorial-orbit 18s ease-in-out infinite alternate;
      pointer-events: none;
    }
    .editorial-media {
      position: absolute;
      z-index: -3;
      inset: 0;
      overflow: hidden;
    }
    .editorial-media picture {
      position: absolute;
      inset: 0;
      display: block;
    }
    .editorial-media img,
    .editorial-media video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: translate3d(0, calc((var(--editorial-progress) - .5) * -.8%), 0) scale(1.005);
      will-change: transform;
      animation: editorial-breathe 16s ease-in-out infinite alternate;
    }
    .editorial-media img { z-index: 0; filter: saturate(.82) contrast(1.08) brightness(.72); }
    /* The still is only a loading/fallback layer. Blending two different
       portrait frames creates a visible double face instead of depth. */
    .editorial-media video { z-index: 1; opacity: 1; filter: none; background: #030508; }
    .editorial-media::before {
      content: "";
      position: absolute;
      z-index: 2;
      inset: -8%;
      pointer-events: none;
      opacity: .76;
      background:
        radial-gradient(circle at 72% 42%, transparent 0 13%, rgba(169,232,255,.12) 13.15% 13.35%, transparent 13.55% 22%, rgba(132,94,255,.08) 22.15% 22.35%, transparent 22.55%),
        radial-gradient(circle at 83% 54%, rgba(199,241,255,.17) 0 1px, transparent 2px),
        radial-gradient(circle at 61% 30%, rgba(124,210,243,.13) 0 1px, transparent 2px),
        linear-gradient(112deg, transparent 42%, rgba(195,239,255,.08) 49%, transparent 56%);
      background-size: auto, 92px 92px, 137px 137px, auto;
      mix-blend-mode: screen;
      filter: blur(.15px);
      animation: editorial-refraction 17s ease-in-out infinite alternate;
    }
    .editorial-media::after {
      content: "";
      position: absolute;
      z-index: 3;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(3,5,8,.995) 0%, rgba(3,5,8,.985) 23%, rgba(3,5,8,.86) 36%, rgba(3,5,8,.35) 53%, rgba(3,5,8,.08) 75%),
        linear-gradient(180deg, rgba(3,5,8,.86) 0%, rgba(3,5,8,.18) 15%, transparent 34%, transparent 68%, rgba(3,5,8,.82) 100%);
      pointer-events: none;
    }
    .editorial-inner {
      width: min(1420px, calc(100% - clamp(44px, 9vw, 170px)));
      margin: auto;
      padding: 140px 0;
    }
    .editorial-copy { position: relative; z-index: 2; width: min(38%, 520px); }
    .editorial h2 {
      margin: 0;
      font: 300 clamp(2.8rem, 4.6vw, 5.35rem)/1.02 "Space Grotesk", "Noto Sans JP", sans-serif;
      letter-spacing: -.058em;
      text-transform: uppercase;
    }
    .editorial h2 span {
      display: block;
      color: transparent;
      -webkit-text-stroke: 1px rgba(235,248,253,.58);
    }
    .editorial-lead {
      max-width: 470px;
      margin: 38px 0 0;
      color: rgba(220,229,235,.67);
      font-size: .84rem;
      line-height: 2.1;
      letter-spacing: .06em;
    }
    .editorial-data {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      max-width: 520px;
      margin-top: 52px;
      background: rgba(208,233,243,.18);
      border: 1px solid rgba(208,233,243,.18);
    }
    .editorial-data div { padding: 17px 16px; background: rgba(5,8,12,.58); backdrop-filter: blur(12px); }
    .editorial-data strong { display: block; color: var(--ice); font: 400 .72rem "Space Grotesk"; letter-spacing: .12em; }
    .editorial-data span { color: #72808c; font-size: .49rem; letter-spacing: .16em; text-transform: uppercase; }
    .editorial-index {
      position: absolute;
      right: clamp(18px, 3vw, 52px);
      bottom: 42px;
      color: rgba(226,241,247,.48);
      font: 500 .5rem "Space Grotesk";
      letter-spacing: .24em;
      text-transform: uppercase;
      writing-mode: vertical-rl;
    }
    .editorial-index::before { content: ""; display: inline-block; width: 1px; height: 52px; margin-bottom: 13px; background: var(--cyan); }

    .engineering {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      display: grid;
      align-items: center;
      padding: 110px clamp(24px, 7vw, 120px);
      background:
        radial-gradient(circle at 28% 55%, rgba(142,218,244,.11), transparent 25%),
        #070a0f;
      align-content: center;
      gap: clamp(34px, 5vh, 62px);
      animation: engineering-aurora 15s ease-in-out infinite alternate;
    }
    .engineering::after {
      content: "";
      position: absolute;
      z-index: 3;
      left: 0;
      right: 0;
      bottom: 0;
      height: clamp(110px, 15vh, 170px);
      background: linear-gradient(180deg, transparent 0%, rgba(22,42,55,.2) 46%, rgba(5,8,13,.96) 100%);
      box-shadow: 0 -34px 90px rgba(91,180,213,.08);
      pointer-events: none;
    }
    .engineering::before {
      content: "H1";
      position: absolute;
      right: -2vw;
      bottom: -16vw;
      color: rgba(206,235,246,.025);
      font: 500 min(60vw, 850px)/1 "Space Grotesk";
      letter-spacing: -.12em;
    }
    .engineering-grid {
      position: relative;
      z-index: 2;
      width: min(1360px, 100%);
      margin: auto;
      display: grid;
      grid-template-columns: .92fr 1.08fr;
      gap: clamp(45px, 9vw, 150px);
      align-items: end;
    }
    .engineering-grid::before {
      content: "03 / MATERIAL INTELLIGENCE";
      position: absolute;
      top: -42px;
      right: 0;
      color: rgba(169,233,255,.38);
      font: 500 .5rem "Space Grotesk", sans-serif;
      letter-spacing: .24em;
    }
    .engineering h2 {
      margin: 0;
      font: 300 clamp(2.8rem, 5.4vw, 6.2rem)/1.02 "Space Grotesk";
      letter-spacing: -.065em;
      text-transform: uppercase;
    }
    .engineering h2 span { display: block; color: transparent; -webkit-text-stroke: 1px rgba(228,246,253,.5); }
    .spec-list { border-top: 1px solid var(--line); }
    .spec {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 20px;
      padding: 23px 0;
      border-bottom: 1px solid var(--line);
      transition: padding .4s, border-color .4s;
    }
    .spec:hover { padding-left: 12px; border-color: rgba(169,233,255,.52); }
    .spec strong { font-size: .78rem; font-weight: 400; letter-spacing: .12em; }
    .spec span { color: var(--cyan); font: 400 .7rem "Space Grotesk"; letter-spacing: .12em; text-align: right; }
    .engineering-details {
      position: relative;
      z-index: 2;
      width: min(1360px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.06fr .88fr 1.06fr;
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }
    .exploded-lab {
      position: relative;
      z-index: 2;
      width: min(1360px, 100%);
      min-height: clamp(430px, 54vw, 690px);
      margin: 0 auto;
      overflow: hidden;
      border: 1px solid var(--line);
      background:
        linear-gradient(rgba(193,226,239,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(193,226,239,.04) 1px, transparent 1px),
        radial-gradient(circle at 70% 54%, rgba(125,211,240,.1), transparent 36%),
        #05080c;
      background-size: 7.5% 14%, 7.5% 14%, auto, auto;
      transform: perspective(1600px) rotateX(calc(var(--my) * -1deg)) rotateY(calc(var(--mx) * 1deg));
      transform-style: preserve-3d;
      transition: transform .45s cubic-bezier(.16,1,.3,1), border-color .45s ease;
    }
    .exploded-lab:hover { border-color: rgba(169,233,255,.34); }
    .exploded-lab::before {
      content: "";
      position: absolute;
      z-index: 3;
      top: 9%;
      bottom: 9%;
      left: 50%;
      width: 1px;
      background: linear-gradient(transparent, rgba(210,241,251,.75), transparent);
      box-shadow: 0 0 30px rgba(169,233,255,.25);
      transform: scaleY(0);
      transform-origin: center;
      transition: transform 1.4s .25s cubic-bezier(.16,1,.3,1);
    }
    .exploded-lab.is-visible::before { transform: scaleY(1); }
    .exploded-lab img {
      position: absolute;
      z-index: 1;
      inset: 5% 0 0;
      width: 100%;
      height: 95%;
      object-fit: contain;
      filter: drop-shadow(0 42px 40px rgba(0,0,0,.62)) drop-shadow(0 0 24px rgba(182,230,246,.06));
      transform: translateY(32px) scale(.94);
      opacity: 0;
      transition: opacity 1.1s .12s ease, transform 1.35s .12s cubic-bezier(.16,1,.3,1);
    }
    .exploded-lab.is-visible img { opacity: 1; transform: translateZ(22px); animation: exploded-float 11s 1.45s ease-in-out infinite alternate; }
    .exploded-lab::after {
      content: "";
      position: absolute;
      z-index: 2;
      inset: 8% 4%;
      background: linear-gradient(105deg, transparent 34%, rgba(215,246,255,.12) 47%, rgba(120,211,243,.04) 52%, transparent 64%);
      mix-blend-mode: screen;
      transform: translateX(-130%);
      animation: exploded-sheen 9s 2.8s cubic-bezier(.4,0,.2,1) infinite;
      pointer-events: none;
    }
    .exploded-label {
      position: absolute;
      z-index: 4;
      top: 26px;
      left: 28px;
      color: rgba(224,242,249,.74);
      font: 500 .58rem "Space Grotesk";
      letter-spacing: .22em;
      text-transform: uppercase;
    }
    .exploded-label span { display: block; margin-top: 8px; color: #61717d; font-size: .48rem; letter-spacing: .16em; }
    .exploded-count {
      position: absolute;
      z-index: 4;
      right: 28px;
      bottom: 24px;
      color: rgba(222,240,247,.7);
      font: 400 .52rem "Space Grotesk";
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .part-hotspot {
      position: absolute;
      z-index: 6;
      left: var(--x);
      top: var(--y);
      width: 34px;
      height: 34px;
      padding: 0;
      border: 1px solid rgba(181,235,252,.65);
      border-radius: 50%;
      background: rgba(5,12,18,.78);
      box-shadow: 0 0 0 7px rgba(155,226,249,.07), 0 0 24px rgba(142,222,248,.18);
      color: var(--ice);
      cursor: pointer;
      font: 500 .56rem "Space Grotesk", sans-serif;
      transform: translate(-50%, -50%);
      transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
    }
    .part-hotspot::after {
      content: "";
      position: absolute;
      inset: 50%;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 12px var(--cyan);
      transform: translate(-50%, -50%);
    }
    .part-hotspot > i { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; font-style: normal; }
    /* 7つのホットスポットが一度に並ぶと情報量が多く感じられるため、表示直後に
       01→07の順で軽くパルスさせ、見る順番をそれとなく誘導する */
    .exploded-lab.is-visible .part-hotspot { animation: hotspotIntro .6s ease-out both; }
    .exploded-lab.is-visible .part-hotspot:nth-of-type(1) { animation-delay: .5s; }
    .exploded-lab.is-visible .part-hotspot:nth-of-type(2) { animation-delay: .68s; }
    .exploded-lab.is-visible .part-hotspot:nth-of-type(3) { animation-delay: .86s; }
    .exploded-lab.is-visible .part-hotspot:nth-of-type(4) { animation-delay: 1.04s; }
    .exploded-lab.is-visible .part-hotspot:nth-of-type(5) { animation-delay: 1.22s; }
    .exploded-lab.is-visible .part-hotspot:nth-of-type(6) { animation-delay: 1.4s; }
    .exploded-lab.is-visible .part-hotspot:nth-of-type(7) { animation-delay: 1.58s; }
    @keyframes hotspotIntro {
      0% { box-shadow: 0 0 0 7px rgba(155,226,249,.07), 0 0 24px rgba(142,222,248,.18); }
      40% { transform: translate(-50%, -50%) scale(1.32); box-shadow: 0 0 0 10px rgba(155,226,249,.16), 0 0 34px rgba(142,222,248,.42); }
      100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 7px rgba(155,226,249,.07), 0 0 24px rgba(142,222,248,.18); }
    }
    .part-hotspot:hover,
    .part-hotspot:focus-visible,
    .part-hotspot.is-open {
      z-index: 10;
      border-color: #dff8ff;
      background: rgba(20,48,61,.92);
      box-shadow: 0 0 0 10px rgba(155,226,249,.1), 0 0 38px rgba(142,222,248,.32);
      outline: none;
      transform: translate(-50%, -50%) scale(1.12);
    }
    .part-card {
      position: absolute;
      left: 25px;
      bottom: 25px;
      width: min(270px, 34vw);
      padding: 16px 18px;
      border: 1px solid rgba(180,230,246,.24);
      background: rgba(3,8,13,.92);
      box-shadow: 0 24px 60px rgba(0,0,0,.4);
      color: #8e9ca7;
      opacity: 0;
      pointer-events: none;
      text-align: left;
      transform: translateY(8px) scale(.96);
      transform-origin: left bottom;
      transition: opacity .3s ease, transform .38s cubic-bezier(.16,1,.3,1);
      backdrop-filter: blur(15px);
    }
    .part-hotspot.is-right .part-card { right: 25px; left: auto; transform-origin: right bottom; }
    .part-card strong { display: block; margin-bottom: 6px; color: var(--ice); font-size: .72rem; font-weight: 500; letter-spacing: .08em; }
    .part-card span { display: block; font-size: .64rem; line-height: 1.75; }
    .part-hotspot:hover .part-card,
    .part-hotspot:focus-visible .part-card,
    .part-hotspot.is-open .part-card { opacity: 1; transform: none; }
    .engineering-detail {
      position: relative;
      min-height: 190px;
      margin: 0;
      overflow: hidden;
      background: #070b10;
    }
    .engineering-detail img {
      width: 100%;
      height: 100%;
      min-height: 190px;
      object-fit: cover;
      opacity: .74;
      filter: saturate(.72) contrast(1.08);
      transform: scale(1.025);
      transition: opacity .55s ease, transform 1s cubic-bezier(.16,1,.3,1), filter .55s ease;
      animation: detail-breathe 12s ease-in-out infinite alternate;
    }
    .engineering-detail:nth-child(2) img { animation-delay: -4s; }
    .engineering-detail:nth-child(3) img { animation-delay: -8s; }
    .engineering-detail:nth-child(2) { transform: translateY(18px); }
    .engineering-detail:hover img { opacity: 1; filter: saturate(.9) contrast(1.04); transform: scale(1.075); }
    .engineering-detail figcaption {
      position: absolute;
      right: 14px;
      bottom: 14px;
      left: 14px;
      padding: 14px 16px;
      color: rgba(235,248,252,.86);
      background: rgba(4,8,12,.82);
      border-left: 1px solid var(--cyan);
      opacity: .86;
      transform: translateY(calc(100% - 42px));
      transition: opacity .35s ease, transform .55s cubic-bezier(.16,1,.3,1);
      backdrop-filter: blur(12px);
    }
    .engineering-detail figcaption strong { display: block; font: 500 .6rem "Space Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
    .engineering-detail figcaption span { display: block; margin-top: 9px; color: #a3b0ba; font-size: .65rem; line-height: 1.75; }
    .engineering-detail:hover figcaption,
    .engineering-detail:focus-within figcaption,
    .engineering-detail:focus figcaption { opacity: 1; transform: none; }

    .decision-stream {
      position: relative;
      min-height: 92vh;
      overflow: hidden;
      padding: clamp(90px, 12vh, 150px) 0;
      background:
        radial-gradient(circle at 20% 32%, rgba(111,205,237,.13), transparent 30%),
        radial-gradient(circle at 82% 72%, rgba(117,111,255,.12), transparent 30%),
        #05080d;
    }
    .decision-stream::before {
      content: "LISTENING, REDEFINED";
      position: absolute;
      top: 48%;
      left: 50%;
      color: rgba(210,238,248,.025);
      font: 400 clamp(5rem, 14vw, 15rem)/.8 "Space Grotesk", sans-serif;
      letter-spacing: -.07em;
      white-space: nowrap;
      transform: translate(-50%, -50%);
    }
    .decision-stream::after {
      content: "";
      position: absolute;
      z-index: 0;
      right: 0;
      bottom: 0;
      left: 0;
      height: clamp(68px, 9vh, 104px);
      pointer-events: none;
      background: linear-gradient(180deg, transparent, rgba(151,190,205,.14) 54%, #aebfc8 100%);
    }
    .decision-heading {
      position: relative;
      z-index: 2;
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto clamp(58px, 8vh, 90px);
    }
    .decision-heading h2 { max-width: 920px; margin: 0; font: 300 clamp(2.45rem, 4.7vw, 5.4rem)/1.12 "Noto Sans JP", sans-serif; letter-spacing: -.05em; }
    .decision-heading h2 span { color: var(--cyan); }
    .decision-heading > p:last-child { max-width: 650px; margin: 26px 0 0 auto; color: #93a2ae; font-size: .86rem; line-height: 2.15; }
    .decision-lanes { position: relative; z-index: 1; display: grid; gap: 12px; margin: 0 0 clamp(65px, 9vh, 100px); transform: rotate(-1.4deg) scale(1.02); }
    .decision-lane { overflow: hidden; border-top: 1px solid rgba(177,224,240,.14); border-bottom: 1px solid rgba(177,224,240,.14); background: rgba(7,17,25,.55); }
    .decision-track { display: flex; width: max-content; animation: decision-flow 52s linear infinite; }
    .decision-lane:nth-child(2) .decision-track { animation-direction: reverse; animation-duration: 61s; }
    .decision-track span { position: relative; padding: 17px 38px; color: rgba(216,239,247,.7); font: 400 clamp(.72rem, 1vw, .92rem) "Noto Sans JP", sans-serif; letter-spacing: .09em; white-space: nowrap; }
    .decision-track span::after { content: "/"; position: absolute; right: -3px; color: rgba(169,233,255,.32); }
    .decision-journey {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: min(1180px, calc(100% - 48px));
      margin: auto;
      counter-reset: decision;
    }
    .decision-journey::before {
      content: "";
      position: absolute;
      top: 39px;
      right: 5%;
      left: 5%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(169,233,255,.48) 14%, rgba(169,233,255,.18) 50%, rgba(169,233,255,.48) 86%, transparent);
      box-shadow: 0 0 24px rgba(126,217,247,.18);
    }
    .decision-phase {
      position: relative;
      min-height: 330px;
      padding: 84px clamp(24px, 3vw, 46px) 34px;
      counter-increment: decision;
    }
    .decision-phase + .decision-phase { border-left: 1px solid rgba(176,224,240,.12); }
    .decision-phase::before {
      content: "0" counter(decision);
      position: absolute;
      z-index: 2;
      top: 25px;
      left: clamp(24px, 3vw, 46px);
      display: grid;
      width: 29px;
      height: 29px;
      place-items: center;
      border: 1px solid rgba(169,233,255,.56);
      border-radius: 50%;
      background: #071018;
      color: #dff7ff;
      box-shadow: 0 0 0 8px rgba(8,18,27,.88), 0 0 34px rgba(111,205,237,.18);
      font: 500 .53rem "Space Grotesk", sans-serif;
      letter-spacing: .08em;
    }
    .decision-phase small { color: var(--cyan); font: 500 .55rem "Space Grotesk", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
    .decision-phase h3 { max-width: 300px; margin: 20px 0 14px; font: 350 clamp(1.35rem, 2vw, 2rem)/1.45 "Noto Sans JP", sans-serif; letter-spacing: -.03em; }
    .decision-phase > p { max-width: 330px; margin: 0; color: #93a2ae; font-size: .75rem; line-height: 2; }
    .decision-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
    .decision-proof span { padding-top: 12px; border-top: 1px solid rgba(169,233,255,.15); color: rgba(224,242,248,.84); font-size: .67rem; line-height: 1.6; }
    .decision-proof b { display: block; margin-bottom: 4px; color: #fff; font: 400 1.15rem "Space Grotesk", sans-serif; letter-spacing: -.02em; }
    .decision-phase:hover::before { background: #dff8ff; color: #061019; box-shadow: 0 0 0 8px rgba(8,18,27,.88), 0 0 42px rgba(111,205,237,.42); }

    .finale {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      display: grid;
      place-items: center;
      isolation: isolate;
      background:
        radial-gradient(circle at 70% 54%, rgba(250,254,255,.9), transparent 28%),
        radial-gradient(circle at 18% 72%, rgba(73,160,191,.16), transparent 34%),
        linear-gradient(118deg, #aebfc8 0%, #dce7eb 46%, #b8ccd5 100%);
      color: #071018;
      margin-top: -1px;
    }
    .finale::before {
      content: "";
      position: absolute;
      z-index: -2;
      width: min(82vw, 1120px);
      aspect-ratio: 1;
      border: 1px solid rgba(52,89,106,.14);
      border-radius: 50%;
      box-shadow: 0 0 0 9vw rgba(255,255,255,.14), 0 0 0 calc(9vw + 1px) rgba(52,89,106,.1);
      animation: finale-orbit-breathe 8.5s ease-in-out infinite alternate;
    }
    .finale::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background:
        repeating-linear-gradient(90deg, transparent 0 119px, rgba(41,83,100,.035) 120px),
        radial-gradient(circle at 50% 54%, transparent 18%, rgba(176,195,204,.62) 76%);
    }
    .finale-field {
      position: absolute;
      z-index: -1;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      opacity: 0;
      transition: opacity 1.6s ease;
    }
    .finale.is-live .finale-field { opacity: 1; }
    .finale-field__video {
      position: absolute;
      inset: -6%;
      width: 112%;
      height: 112%;
      object-fit: cover;
      filter: invert(1) saturate(.24) brightness(1.16) contrast(.82);
      transform: scale(1.04);
    }
    .finale-field__wash {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 68% 50%, rgba(252,255,255,.9) 0%, rgba(244,250,252,.62) 34%, transparent 68%),
        linear-gradient(118deg, rgba(174,191,200,.86) 0%, rgba(220,231,235,.78) 46%, rgba(184,204,213,.88) 100%);
    }
    @media (prefers-reduced-motion: reduce) {
      .finale-field__video { display: none; }
    }
    .finale-threshold {
      position: absolute;
      z-index: 0;
      top: 0;
      right: 0;
      left: 0;
      height: clamp(96px, 14vh, 148px);
      overflow: hidden;
      pointer-events: none;
      background: #05080d;
      mask-image: linear-gradient(#000 0 12%, rgba(0,0,0,.9) 38%, transparent 100%);
    }
    .finale-threshold::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -18%;
      width: min(92vw, 1380px);
      aspect-ratio: 2.8 / 1;
      border: 1px solid rgba(192,239,255,.32);
      border-radius: 50%;
      box-shadow: 0 0 0 7vw rgba(129,214,244,.035), 0 0 90px rgba(177,232,251,.18), inset 0 -45px 90px rgba(225,249,255,.08);
      opacity: .28;
      transform: translate(-50%, -64%) scale(.72);
      transition: opacity 1.1s ease, transform 1.7s cubic-bezier(.16,1,.3,1);
    }
    .finale-threshold::after {
      content: "";
      position: absolute;
      top: -24%;
      bottom: -20%;
      left: 50%;
      width: min(38vw, 560px);
      background: linear-gradient(90deg, transparent, rgba(218,248,255,.16) 24%, rgba(255,255,255,.96) 50%, rgba(218,248,255,.16) 76%, transparent);
      filter: blur(18px);
      opacity: 0;
      transform: translateX(-50%) scaleX(.08);
      transition: opacity .7s ease .12s, transform 1.35s cubic-bezier(.16,1,.3,1) .12s;
    }
    .finale-threshold span {
      position: absolute;
      top: 38px;
      left: 50%;
      color: rgba(216,242,251,.55);
      font: 500 .48rem "Space Grotesk", sans-serif;
      letter-spacing: .34em;
      text-transform: uppercase;
      transform: translateX(-50%);
    }
    .finale.is-live .finale-threshold::before { opacity: .9; transform: translate(-50%, -64%) scale(1); }
    .finale.is-live .finale-threshold::after { opacity: .92; transform: translateX(-50%) scaleX(1); }
    .finale-inner { position: relative; z-index: 1; width: min(1180px, calc(100% - 44px)); padding: 112px 0 48px; text-align: left; }
    .finale-inner::before {
      content: "PRIVATE LISTENING / TOKYO 01";
      position: absolute;
      top: 50%;
      right: -52px;
      color: rgba(32,74,91,.34);
      font: 500 .48rem "Space Grotesk", sans-serif;
      letter-spacing: .24em;
      writing-mode: vertical-rl;
      transform: translateY(-50%);
    }
    .finale-product {
      position: absolute;
      z-index: 0;
      top: 50%;
      right: 0;
      width: min(39vw, 520px);
      height: auto;
      max-height: 76vh;
      aspect-ratio: 1;
      object-fit: contain;
      margin: 0;
      opacity: .9;
      transform: translateY(-50%);
      transform-origin: center;
      filter: drop-shadow(0 32px 32px rgba(22,42,52,.14));
      animation: finale-float 9s ease-in-out infinite alternate;
    }
    .finale-inner > :not(.finale-product) { position: relative; z-index: 1; }
    .finale .kicker { justify-content: flex-start; color: #3e6778; }
    .finale h2 { max-width: 680px; margin: 0; font: 400 clamp(3rem, 5.2vw, 5.8rem)/.96 "Space Grotesk"; letter-spacing: -.06em; text-transform: uppercase; }
    .finale h2 span { display: block; color: transparent; -webkit-text-stroke: 1px rgba(7,16,24,.42); }
    .finale p { max-width: 520px; margin: 32px 0; color: #52616a; font-size: .8rem; letter-spacing: .12em; }
    .finale .primary-button { min-width: 270px; background: #071018; color: #f2fbff; border-color: #071018; text-align: center; }
    .finale-purchase { display: flex; align-items: end; gap: 18px; margin: 28px 0 24px; }
    .finale-price { font: 400 clamp(2.8rem, 5vw, 5.4rem)/.85 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
    .finale-price small { margin-left: 5px; font-size: .85rem; letter-spacing: .02em; }
    .finale-meta { padding-bottom: 4px; color: #63727b; font-size: .66rem; line-height: 1.8; }
    .finale-note { display: grid; grid-template-columns: repeat(3, max-content); gap: 18px; margin: 0 0 26px; color: #4e626c; font-size: .62rem; }
    .finale-note span::before { content: "○"; margin-right: 7px; color: #5a94a9; }

    @keyframes decision-flow { to { transform: translateX(-50%); } }
    @keyframes signal-pulse { 0%, 100% { opacity: .35; transform: scale(.72); } 50% { opacity: 1; transform: scale(1); } }

    footer {
      display: flex;
      justify-content: space-between;
      padding: 24px clamp(22px, 4vw, 72px);
      background: #05070a;
      color: #5d6873;
      font-size: .52rem;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); }
    .reveal.is-visible { opacity: 1; transform: none; }
    body.motion-managed section:not(.is-live),
    body.motion-managed section:not(.is-live) *,
    body.motion-managed section:not(.is-live)::before,
    body.motion-managed section:not(.is-live)::after,
    body.motion-managed section:not(.is-live) *::before,
    body.motion-managed section:not(.is-live) *::after { animation-play-state: paused !important; }

    .concept-dialog {
      width: min(560px, calc(100% - 32px));
      padding: 0;
      border: 1px solid rgba(190,226,239,.32);
      background: rgba(7,12,18,.94);
      color: var(--ink);
      box-shadow: 0 34px 90px rgba(0,0,0,.62);
      backdrop-filter: blur(24px);
    }
    .concept-dialog::backdrop { background: rgba(1,3,5,.76); backdrop-filter: blur(8px); }
    .dialog-inner { position: relative; padding: 55px; }
    .dialog-inner h3 { margin: 16px 0; font: 400 2.2rem "Space Grotesk"; letter-spacing: -.04em; }
    .dialog-inner p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.9; }
    .dialog-close { position: absolute; top: 20px; right: 20px; width: 38px; aspect-ratio: 1; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.3rem; }

    @keyframes entry-ring { from { opacity: 0; transform: translateX(-50%) scaleX(.18); } to { opacity: .82; transform: translateX(-50%) scaleX(1); } }
    @keyframes entry-mark-leave { to { opacity: 0; filter: blur(7px); transform: translateY(-7px) scale(.99); } }
    @keyframes entry-iris {
      0% { opacity: 0; transform: translateX(-28%); }
      38% { opacity: .88; }
      100% { opacity: 0; transform: translateX(38%); }
    }
    @keyframes entry-leave {
      0%, 22% { opacity: 1; filter: brightness(1) blur(0); transform: scale(1); }
      68% { opacity: .62; filter: brightness(1.18) blur(4px); }
      100% { opacity: 0; filter: brightness(1.28) blur(18px); transform: scale(1.025); visibility: hidden; }
    }
    @keyframes hero-media-arrive { from { opacity: 0; filter: blur(14px); transform: scale(1.025); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
    @keyframes hero-copy-arrive { from { opacity: 0; filter: blur(8px); transform: translateY(22px); } to { opacity: 1; filter: blur(0); transform: none; } }
    @keyframes product-arrive { from { opacity: 0; transform: translate3d(60px, 25px, -140px) rotateY(-12deg) scale(.84); filter: blur(13px); } to { opacity: 1; filter: blur(0); } }
    @keyframes optical-scan { 0%, 22% { transform: translateX(-135%); opacity: 0; } 37% { opacity: 1; } 58%, 100% { transform: translateX(135%); opacity: 0; } }
    @keyframes product-sheen { 0%, 22% { background-position: 150% 0; opacity: 0; } 37% { opacity: .72; } 58%, 100% { background-position: -55% 0; opacity: 0; } }
    @keyframes orbit-breathe { from { opacity: .32; transform: rotateX(68deg) rotateZ(-4deg) scale(.94); } to { opacity: .72; transform: rotateX(74deg) rotateZ(5deg) scale(1.04); } }
    @keyframes field-line { 0%, 100% { opacity: .16; transform: scaleX(.58); } 48% { opacity: .72; transform: scaleX(.92); } }
    @keyframes spectrum-drift { from { transform: translate3d(-3%, -2%, 0) scale(.92); } to { transform: translate3d(5%, 4%, 0) scale(1.08); } }
    @keyframes editorial-orbit { from { transform: translate3d(-3%, -2%, 0) rotate(-5deg) scale(.94); opacity: .45; } to { transform: translate3d(4%, 3%, 0) rotate(6deg) scale(1.06); opacity: .78; } }
    @keyframes editorial-breathe { from { translate: -.45% -.3%; scale: 1; } to { translate: .55% .45%; scale: 1.018; } }
    @keyframes editorial-refraction {
      from { transform: translate3d(-1.4%, -.8%, 0) rotate(-1.5deg) scale(.985); opacity: .48; }
      to { transform: translate3d(1.8%, 1.1%, 0) rotate(1.2deg) scale(1.025); opacity: .82; }
    }
    @keyframes auto-stage-sheen {
      0% { opacity: 0; transform: translateX(-135%); }
      28% { opacity: .6; }
      100% { opacity: 0; transform: translateX(135%); }
    }
    @keyframes engineering-aurora { from { background-position: 0 0; } to { background-position: 5vw -3vw; } }
    @keyframes exploded-float { from { translate: -5px 4px; scale: .995; } to { translate: 7px -6px; scale: 1.012; } }
    @keyframes exploded-sheen { 0%, 28% { transform: translateX(-130%); opacity: 0; } 43% { opacity: .7; } 62%, 100% { transform: translateX(130%); opacity: 0; } }
    @keyframes detail-breathe { from { scale: 1; translate: -1px 0; } to { scale: 1.025; translate: 2px -2px; } }
    @keyframes finale-float {
      from { translate: 0 7px; rotate: -.45deg; scale: .995; filter: drop-shadow(0 28px 30px rgba(22,42,52,.12)) brightness(.985); }
      to { translate: 0 -8px; rotate: .45deg; scale: 1.012; filter: drop-shadow(0 38px 38px rgba(64,116,139,.18)) brightness(1.025); }
    }
    @keyframes finale-orbit-breathe {
      from { opacity: .68; transform: scale(.975); filter: blur(0); }
      to { opacity: 1; transform: scale(1.025); filter: blur(.35px); }
    }
    @keyframes cue { 0%, 100% { opacity: .25; transform: scaleY(.45); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
    @keyframes marquee { to { transform: translateX(-50%); } }

    @media (max-width: 900px) {
      .site-header { padding: 19px 20px; }
      .header-nav a:not(.header-cta) { display: none; }
      .hero { background-position: 72% center; }
      .hero-media video { object-position: 72% center; opacity: .62; filter: brightness(.56) contrast(1.08) saturate(.74); transform: translateX(4%) scale(calc(1.06 + var(--hero-exit) * .035)); }
      .hero-media::after { background: linear-gradient(180deg, rgba(5,7,10,.66) 0%, rgba(5,7,10,.34) 42%, rgba(5,7,10,.12) 67%, rgba(5,7,10,.78) 100%); }
      .hero-grid {
        width: min(100% - 36px, 620px);
        height: 100vh;
        min-height: 660px;
        padding-top: 112px;
      }
      .hero-copy { position: relative; z-index: 7; top: auto; left: auto; width: 100%; transform: none; }
      .kicker { margin-bottom: 18px; }
      .hero h1 { font-size: clamp(3.35rem, 17vw, 5.5rem); line-height: .88; }
      .hero h1 .outline { margin-left: .16em; }
      .hero-lead { max-width: 350px; margin-top: 24px; font-size: .73rem; line-height: 1.85; }
      /* PC版はボタンの右隣に短い列でeditionを置けるが、モバイル幅ではその列が99px程度しか
         取れず、コンセプトプロトタイプ表記を足すと右端の縦書きラベルと衝突していた。
         横並びをやめて縦積みにし、editionへ全幅を与えることで両方を安全に両立させる */
      .hero-actions { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 24px; }
      .edition { display: block; font-size: .5rem; line-height: 1.55; }
      .edition strong { font-size: .76rem; }
      .hero-product { position: absolute; z-index: 3; inset: 55% 0 2%; align-items: end; justify-items: center; }
      .hero-rig { width: 220px; max-width: 220px; height: 270px; }
      .hero-orbit { width: 118vw; }
      .hero-refraction { inset: 45% -25% 0 28%; opacity: .2; }
      .hero::before { background: linear-gradient(180deg, rgba(5,7,10,.98) 0%, rgba(5,7,10,.84) 42%, rgba(5,7,10,.15) 70%, rgba(5,7,10,.8) 100%), radial-gradient(circle at 55% 71%, rgba(119,201,230,.15), transparent 29%); }
      .hero::after { top: 42%; right: -35%; width: 130vw; }
      .hero-spectrum i:nth-child(1) { width: 84vw; height: 84vw; right: -12%; top: 38%; }
      .hero-spectrum i:nth-child(2) { width: 70vw; height: 70vw; }
      .product-index { right: 20px; top: 47%; }
      .scroll-cue { left: 22px; justify-items: start; }

      /* min-height:700px は667px前後の小型端末（iPhone SEなど）で100svhを上回り、
         テキストと製品画像が1画面に収まらず内部スクロールが発生していたため引き下げる */
      .chapters { height: 100svh; min-height: 560px; }
      .chapter-shell { width: min(100% - 36px, 620px); }
      .chapter-copy { top: 6vh; left: 0; width: 100%; height: 49vh; min-height: 360px; margin: 0; transform: none; }
      .chapter-pin[data-active="1"] .chapter-copy { left: 0; width: 100%; }
      .chapter-pin[data-active="2"] .chapter-copy { top: 6vh; left: 0; width: 100%; }
      .chapter-pin[data-active="1"] .chapter-panel { text-align: left; align-items: flex-start; }
      .chapter-pin[data-active="1"] .chapter-metric { justify-content: flex-start; }
      .chapter-panel { justify-content: flex-start; }
      .chapter-panel h2 { max-width: 360px; margin: 14px 0 16px; font-size: clamp(1.85rem, 7vw, 2.35rem); line-height: 1.14; letter-spacing: -.04em; }
      .chapter-panel p { max-width: 340px; font-size: .78rem; line-height: 1.9; }
      .chapter-metric { gap: 24px; margin-top: 20px; }
      .chapter-metric strong { font-size: 1.55rem; }
      .chapter-visual { position: absolute; inset: 46% 0 -2%; }
      .chapter-pin[data-active="1"] .chapter-visual,
      .chapter-pin[data-active="2"] .chapter-visual,
      .chapter-pin[data-active="3"] .chapter-visual { inset: 46% -7% -2%; }
      .chapter-pin[data-active="2"] .stage-product,
      .chapter-pin[data-active="3"] .stage-product { width: min(78vw, 310px); max-width: 310px; height: min(78vw, 310px); }
      .depth-gate { left: 50%; width: 145vw; }
      .depth-shard { width: 72px; opacity: .12; }
      .stage-rings { width: 118vw; }
      .stage-product { width: min(76vw, 300px); max-width: 300px; height: 310px; }
      /* マクロ写真の明部に重なるため、スマホでは指標に薄い下地を敷く */
      .stage-readout {
        right: 4px;
        bottom: 22px;
        grid-template-columns: auto 46px auto;
        padding: 5px 9px;
        border-radius: 2px;
        background: rgba(4,9,14,.62);
        backdrop-filter: blur(9px);
        color: rgba(219,242,251,.72);
      }
      .stage-readout i { width: 46px; }
      .chapter-pin[data-active="1"] { --stage-scale: 1.06; --stage-x: 2%; --stage-y: 1%; }
      .chapter-pin[data-active="2"] { --stage-scale: 1.18; --stage-x: 0; --stage-y: -2%; }
      .chapter-pin[data-active="3"] { --stage-scale: 1.06; --stage-x: -1%; --stage-y: -4%; }
      /* 詳細カットは被写体が原画の右下に寄っているため、狭い画面では画枠の中央へ寄せる */
      .stage-asset--detail[data-stage="2"] { --asset-frame-x: -24%; --asset-frame-y: -6%; }
      .stage-asset--detail[data-stage="3"] { --asset-frame-x: -11%; --asset-frame-y: -10%; }
      .chapter-navigator {
        bottom: 12px;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 5px;
        width: calc(100% - 20px);
      }
      .chapter-navigator::before { left: 50px; bottom: calc(100% + 7px); font-size: .4rem; letter-spacing: .16em; }
      .chapter-direction { min-width: 42px; font-size: 1rem; backdrop-filter: blur(12px); }
      .chapter-selector { backdrop-filter: blur(12px); }
      .chapter-select { height: 64px; padding: 0 7px; gap: 3px; }
      .chapter-select::before { font-size: .42rem; letter-spacing: .1em; }
      .chapter-select span { font-size: .43rem; letter-spacing: .08em; }
      .chapter-select b { font-size: .42rem; letter-spacing: .02em; }
      .stage-readout { bottom: 80px; }

      .signal-band { padding: 0; }
      .signal-console { grid-template-columns: minmax(0, 1fr); min-height: 54px; }
      .signal-console__id,
      .signal-console__status { display: none; }
      .signal-track { min-height: 54px; font-size: .66rem; letter-spacing: .09em; }
      .editorial { min-height: 100svh; }
      .editorial-media img,
      .editorial-media video {
        object-fit: cover;
        object-position: 55% 50%;
        transform: scale(1.01);
      }
      .editorial-media::after { background: linear-gradient(180deg, rgba(3,5,8,.12) 0%, rgba(3,5,8,.22) 37%, rgba(3,5,8,.94) 74%, #030508 100%); }
      .editorial-media::before { opacity: .42; background-size: auto, 78px 78px, 111px 111px, auto; }
      .editorial-inner { width: calc(100% - 40px); min-height: 100svh; padding: 68vh 0 54px; }
      .editorial-copy { width: 100%; }
      .editorial h2 { max-width: 360px; font-size: clamp(2.3rem, 10vw, 3.35rem); line-height: 1.04; }
      .editorial-lead { max-width: 340px; margin-top: 22px; font-size: .76rem; line-height: 1.9; }
      .editorial-data { max-width: 100%; margin-top: 28px; }
      .editorial-data div { padding: 13px 10px; }
      .editorial-data strong { font-size: .62rem; }
      .editorial-data span { font-size: .42rem; }
      .editorial-index { right: 12px; bottom: 38px; }
      .engineering { padding: 90px 22px; }
      .engineering-grid { grid-template-columns: 1fr; gap: 60px; }
      .exploded-lab { min-height: 330px; }
      .exploded-lab img { inset: 14% 0 7%; width: 100%; height: 79%; max-width: none; object-position: center; }
      .exploded-label { top: 18px; left: 17px; }
      .exploded-count { right: 16px; bottom: 14px; left: 16px; overflow-wrap: anywhere; font-size: .42rem; text-align: right; }
      .part-hotspot { display: none; }
      .engineering-details { grid-template-columns: 1fr; }
      .engineering-detail { min-height: 210px; }
      .engineering-detail:nth-child(2) { transform: none; }
      .engineering-detail img { min-height: 210px; aspect-ratio: 16 / 9; }
      .engineering-detail figcaption { opacity: 1; transform: none; }
      .engineering h2 { font-size: clamp(2.65rem, 13vw, 4.4rem); line-height: 1.04; }
      .decision-stream { min-height: auto; padding: 92px 0; }
      .decision-heading { width: calc(100% - 40px); margin-bottom: 48px; }
      .decision-heading h2 { font-size: clamp(2.05rem, 8.8vw, 3.1rem); line-height: 1.18; }
      .decision-heading > p:last-child { margin-top: 22px; font-size: .76rem; line-height: 2; }
      .decision-lanes { margin-bottom: 54px; transform: rotate(-1deg) scale(1.02); }
      .decision-track span { padding: 14px 24px; font-size: .66rem; }
      .decision-journey { grid-template-columns: 1fr; width: calc(100% - 40px); }
      .decision-journey::before { top: 0; bottom: 0; left: 14px; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(169,233,255,.45) 12%, rgba(169,233,255,.18) 50%, rgba(169,233,255,.45) 88%, transparent); }
      .decision-phase { min-height: 0; padding: 24px 12px 52px 58px; }
      .decision-phase + .decision-phase { border-left: 0; }
      .decision-phase::before { top: 22px; left: 0; }
      .spec { grid-template-columns: 1fr; gap: 7px; padding: 20px 0; }
      .spec strong,
      .spec span { min-width: 0; overflow-wrap: anywhere; text-align: left; }
      .decision-phase h3,
      .decision-phase p { overflow-wrap: anywhere; word-break: normal; }
      .decision-proof { margin-top: 22px; }

      .finale-threshold { height: 170px; }
      .finale-threshold span { top: 24px; font-size: .4rem; }
      .finale-inner { padding: 146px 0 46px; }
      .finale-inner { text-align: center; }
      .finale-inner::before { display: none; }
      .finale-product {
        position: relative;
        top: auto;
        right: auto;
        width: min(82vw, 340px);
        height: auto;
        max-height: none;
        aspect-ratio: 1;
        object-fit: contain;
        margin: 2vh auto 0;
        transform: none;
      }
      .finale .kicker { justify-content: center; }
      .finale h2 { font-size: clamp(2.35rem, 9.8vw, 3.45rem); line-height: 1; letter-spacing: -.065em; }
      .finale p { margin: 28px auto; font-size: .74rem; line-height: 1.9; }
      .finale-purchase { justify-content: center; margin-top: 22px; }
      .finale-price { font-size: 2.9rem; }
      .finale-meta { text-align: left; }
      .finale-note { grid-template-columns: 1fr; justify-content: center; gap: 6px; text-align: left; }
      footer { justify-content: center; gap: 20px; font-size: .45rem; text-align: center; }
      footer span:last-child { display: none; }
      .dialog-inner { padding: 48px 28px 34px; }
    }

    @media (max-width: 380px) {
      .hero-grid { width: calc(100% - 28px); }
      .hero h1 { font-size: 2.72rem; }
      .hero-lead { max-width: 284px; font-size: .7rem; }
      .hero-product { inset: 59% 0 2%; }
      .hero-rig { width: 198px; max-width: 198px; height: 232px; }
      .primary-button { min-width: 210px; padding: 14px 48px 14px 20px; }
      .chapter-shell { width: calc(100% - 28px); }
      .chapter-panel h2 { font-size: 1.82rem; }
      .chapter-panel p { max-width: 292px; font-size: .73rem; }
      .chapter-metric strong { font-size: 1.35rem; }
      .spec strong { font-size: .68rem; }
      .spec span { font-size: .6rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .entry { display: none; }
      .hero-media { display: none; }
      .editorial-media video { display: none; }
      .hero-copy > *, .hero-rig { animation-delay: 0s !important; }
      .hero-copy { opacity: 1; filter: none; }
      .hero-rig, .stage-product { transform: none; opacity: 1; }
      /* 4枚を一律にopacity:1へすると製品画像が重なるため、選択中の1枚だけを見せる */
      .stage-asset { transform: none; opacity: 0; }
      .stage-asset.is-active { opacity: 1; }
      .hero-refraction { display: none; }
    }

    /* 2026-07 sales-story rebuild: desire first, proof second. */
    main { display: flex; flex-direction: column; }
    .hero { order: 0; }
    .field-transit { order: 1; }
    .field-shift { order: 2; }
    .editorial { order: 3; }
    .chapters { order: 4; }
    .signal-band { order: 5; }
    .engineering { order: 6; }
    .decision-stream { order: 7; }
    .finale { order: 8; }

    .field-shift {
      position: relative;
      min-height: 100svh;
      overflow: hidden;
      isolation: isolate;
      display: grid;
      align-items: center;
      background:
        radial-gradient(circle at 67% 50%, rgba(89, 190, 255, .2), transparent 27%),
        radial-gradient(circle at 83% 30%, rgba(123, 72, 255, .16), transparent 32%),
        linear-gradient(103deg, #04070b 0 46%, #07101a 72%, #03050a 100%);
      border-bottom: 1px solid rgba(205, 235, 247, .14);
    }
    .field-shift::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background:
        linear-gradient(90deg, transparent 49.85%, rgba(202, 239, 255, .35) 50%, transparent 50.15%),
        repeating-linear-gradient(0deg, transparent 0 89px, rgba(204, 232, 245, .026) 90px),
        repeating-linear-gradient(90deg, transparent 0 89px, rgba(204, 232, 245, .026) 90px);
      mask-image: linear-gradient(90deg, transparent, #000 18% 82%, transparent);
    }
    .field-shift__inner {
      position: relative;
      width: min(1280px, calc(100% - 56px));
      min-height: 720px;
      margin: auto;
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
      align-items: center;
      gap: clamp(30px, 6vw, 110px);
    }
    .field-shift__copy { position: relative; z-index: 4; padding-left: clamp(0px, 3vw, 46px); }
    .field-shift__copy h2 {
      max-width: 670px;
      margin: 22px 0 0;
      font: 300 clamp(2.8rem, 4.6vw, 5.4rem)/1 "Noto Sans JP", sans-serif;
      letter-spacing: -.06em;
    }
    .field-shift__copy h2 span {
      display: block;
      color: transparent;
      -webkit-text-stroke: 1px rgba(221, 241, 250, .42);
    }
    .field-shift__copy h2 .solid { color: inherit; -webkit-text-stroke: 0; white-space: nowrap; }
    .field-shift__copy > p:last-child {
      max-width: 510px;
      margin: 34px 0 0;
      color: #9caab6;
      font-size: .83rem;
      line-height: 2;
      letter-spacing: .07em;
    }
    .field-shift__visual { position: relative; min-height: 650px; perspective: 1200px; }
    .field-shift__visual::before {
      content: "SPATIAL";
      position: absolute;
      z-index: 0;
      right: -7%;
      bottom: 4%;
      color: rgba(197,235,248,.035);
      font: 400 clamp(5rem, 11vw, 10rem)/.8 "Space Grotesk", sans-serif;
      letter-spacing: -.07em;
      pointer-events: none;
    }
    .field-shift__flat,
    .field-shift__space { position: absolute; inset: 0; overflow: hidden; }
    .field-shift__flat { right: 51%; opacity: .46; }
    .field-shift__space { left: 49%; overflow: visible; }
    .field-shift__label {
      position: absolute;
      z-index: 5;
      top: 16%;
      color: #74818d;
      font: 500 .58rem "Space Grotesk", sans-serif;
      letter-spacing: .28em;
      text-transform: uppercase;
    }
    .field-shift__label--before { right: calc(51% + 32px); }
    .field-shift__label--after { left: calc(49% + 34px); color: #bcefff; }
    .field-shift__wave {
      position: absolute;
      top: calc(50% + (var(--i) - 2) * 34px);
      right: -8%;
      width: 86%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(165, 183, 196, .62), transparent);
      transform: scaleX(calc(.58 + var(--i) * .08));
      animation: field-flat 5.5s ease-in-out calc(var(--i) * -.7s) infinite alternate;
    }
    .field-shift__ring {
      position: absolute;
      left: 42%;
      top: 50%;
      width: calc(210px + var(--i) * 112px);
      aspect-ratio: 1;
      border: 1px solid rgba(159, 225, 255, calc(.27 - var(--i) * .027));
      border-radius: 50%;
      box-shadow: inset 0 0 44px rgba(107, 199, 255, .025), 0 0 30px rgba(94, 102, 255, .035);
      transform: translate(-50%, -50%) rotateX(67deg) rotateZ(calc(var(--i) * 17deg));
      animation: field-orbit calc(11s + var(--i) * 1.8s) linear calc(var(--i) * -1s) infinite;
    }
    .field-shift__product {
      position: absolute;
      z-index: 3;
      left: 50%;
      top: 50%;
      width: min(31vw, 430px);
      height: auto;
      transform: translate(-48%, -48%) translateZ(90px) rotateY(-8deg);
      filter: drop-shadow(0 36px 54px rgba(0,0,0,.52)) drop-shadow(0 0 36px rgba(119,220,255,.12));
      animation: field-product 7.5s ease-in-out infinite alternate;
    }
    .field-shift__readouts {
      position: absolute;
      z-index: 4;
      right: -1%;
      bottom: 14%;
      display: grid;
      gap: 1px;
      width: clamp(132px, 13vw, 188px);
      transform: translateZ(80px);
    }
    .field-shift__readouts span { padding: 13px 15px; border: 1px solid rgba(188,232,248,.18); background: rgba(5,12,19,.62); color: #8195a2; font: 500 .45rem/1.5 "Space Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; backdrop-filter: blur(10px); }
    .field-shift__readouts b { display: block; margin-bottom: 3px; color: #d9f4fd; font: 400 1rem/1 "Space Grotesk", sans-serif; letter-spacing: -.03em; }
    .field-shift__axis {
      position: absolute;
      left: 49%;
      top: 11%;
      bottom: 11%;
      width: 1px;
      background: linear-gradient(transparent, rgba(187, 234, 250, .58), transparent);
      box-shadow: 0 0 30px rgba(120, 210, 255, .28);
    }
    .field-shift__axis::after {
      content: "STEREO / SPATIAL";
      position: absolute;
      left: 13px;
      top: 50%;
      color: #7c8f9c;
      font: .49rem "Space Grotesk", sans-serif;
      letter-spacing: .32em;
      writing-mode: vertical-rl;
      transform: translateY(-50%);
    }
    @keyframes field-flat { to { opacity: .28; transform: translateX(-16px) scaleX(.82); } }
    @keyframes field-orbit { to { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(360deg); } }
    @keyframes field-product { to { transform: translate(-45%, -51%) translateZ(125px) rotateY(5deg) rotateX(-2deg); } }

    @media (max-width: 760px) {
      .field-shift { min-height: 920px; }
      .field-shift__inner { width: calc(100% - 36px); min-height: 880px; grid-template-columns: 1fr; align-content: start; gap: 0; padding-top: 110px; }
      .field-shift__copy { padding: 0; }
      .field-shift__copy h2 { font-size: clamp(2.45rem, 11vw, 3.5rem); line-height: 1.04; letter-spacing: -.05em; }
      .field-shift__copy > p:last-child { margin-top: 22px; font-size: .73rem; line-height: 1.85; }
      .field-shift__visual { min-height: 470px; margin: 10px -18px 0; }
      .field-shift__flat { display: none; }
      .field-shift__space { left: 0; }
      .field-shift__axis { left: 10%; top: 5%; bottom: 8%; opacity: .5; }
      .field-shift__label--before { display: none; }
      .field-shift__label--after { left: 28px; top: 10%; }
      .field-shift__product { left: 50%; width: min(66vw, 300px); transform: translate(-50%, -46%) translateZ(60px); }
      .field-shift__readouts { right: 8px; bottom: 7%; width: 118px; }
      .field-shift__readouts span { padding: 9px 10px; font-size: .37rem; }
      .field-shift__readouts b { font-size: .78rem; }
      .field-shift__ring { width: calc(150px + var(--i) * 75px); }
      .field-shift__axis::after { display: none; }
    }

    /* FIELD TRANSIT — three-film signature sequence. */
    .field-transit {
      position: relative;
      height: 100svh;
      min-height: 720px;
      overflow: hidden;
      isolation: isolate;
      background: #010306;
      color: #eefaff;
    }
    .transit-stage,
    .transit-media,
    .transit-video,
    .transit-atmosphere { position: absolute; inset: 0; }
    .transit-media {
      z-index: 0;
      background: #010306 url("images/sona-h1-field-entry-v2-master.jpg") center / cover no-repeat;
    }
    .field-transit[data-phase="1"] .transit-media { background-image: url("images/sona-h1-field-core-master.jpg"); background-position: center; }
    .field-transit[data-phase="2"] .transit-media { background-image: url("images/sona-h1-field-release-master.jpg"); background-position: center; }
    .transit-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      filter: brightness(.7) saturate(.76) contrast(1.1);
      transform: scale(1.04);
      transition: opacity .95s cubic-bezier(.22,.61,.36,1), filter 1.1s ease;
      will-change: opacity, transform;
    }
    .transit-video.is-active { opacity: 1; }
    .transit-video--entry { object-position: center; }
    .transit-video--entry.is-active { animation: transit-entry-camera 4.15s cubic-bezier(.2,.62,.26,1) both; }
    .transit-video--core { object-position: center; filter: brightness(.64) saturate(.72) contrast(1.13); }
    .transit-video--core.is-active { animation: transit-core-camera 4.35s linear both; }
    .transit-video--release { object-position: center; filter: brightness(.72) saturate(.7) contrast(1.08); }
    .transit-video--release.is-active { animation: transit-release-camera 5.9s cubic-bezier(.22,.61,.36,1) both; }
    .transit-atmosphere {
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 50%, transparent 24%, rgba(0,3,7,.08) 52%, rgba(0,2,5,.78) 100%),
        linear-gradient(90deg, rgba(1,4,8,.76), transparent 38%, transparent 68%, rgba(1,4,8,.46));
    }
    .transit-atmosphere::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .2;
      background-image:
        linear-gradient(rgba(207,242,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(207,242,255,.08) 1px, transparent 1px);
      background-size: 8.333vw 8.333vw;
      mask-image: radial-gradient(circle at 50% 50%, #000, transparent 72%);
    }
    .transit-flash {
      position: absolute;
      z-index: 8;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      background: radial-gradient(circle at center, #fff 0, rgba(218,246,255,.94) 12%, rgba(156,226,255,.22) 38%, transparent 70%);
      mix-blend-mode: screen;
    }
    .field-transit.is-switching .transit-flash { animation: transit-flash 1.05s cubic-bezier(.4,0,.2,1); }
    .transit-interface {
      position: relative;
      z-index: 3;
      width: min(1500px, calc(100% - clamp(42px, 7vw, 132px)));
      height: 100%;
      margin: auto;
    }
    .transit-meta {
      position: absolute;
      top: clamp(84px, 10vh, 118px);
      left: 0;
      display: flex;
      align-items: center;
      gap: 14px;
      color: rgba(215,241,250,.64);
      font: 500 .58rem "Space Grotesk", sans-serif;
      letter-spacing: .25em;
      text-transform: uppercase;
    }
    .transit-meta::before { content: ""; width: 44px; height: 1px; background: #9fe9ff; box-shadow: 0 0 12px rgba(159,233,255,.7); }
    .transit-counter { color: #e8faff; }
    .transit-copy {
      position: absolute;
      top: 50%;
      left: 0;
      width: min(500px, 42vw);
      transform: translateY(-48%);
    }
    .transit-panel {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      transform: translate3d(0, 24px, 0);
      transition: opacity .55s ease, transform .72s cubic-bezier(.16,1,.3,1), visibility 0s linear .6s;
    }
    .transit-panel.is-active { opacity: 1; visibility: visible; transform: translate3d(0,-50%,0); transition-delay: .12s, .12s, 0s; }
    .transit-panel:not(.is-active) { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
    .transit-panel small {
      display: block;
      margin-bottom: 18px;
      color: #9fe9ff;
      font: 500 .6rem "Space Grotesk", sans-serif;
      letter-spacing: .3em;
      text-transform: uppercase;
    }
    .transit-panel h2 {
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      font-size: clamp(2.8rem, 5vw, 5.8rem);
      font-weight: 200;
      letter-spacing: -.07em;
      line-height: .98;
      text-wrap: balance;
      text-shadow: 0 12px 52px rgba(0,0,0,.72);
    }
    .transit-panel h2 span { display: block; color: transparent; -webkit-text-stroke: 1px rgba(220,245,252,.62); }
    .transit-panel p { max-width: 420px; margin: 27px 0 0; color: rgba(212,230,237,.7); font-size: .78rem; line-height: 2; }
    .transit-controls {
      position: absolute;
      right: 0;
      bottom: clamp(32px, 5vh, 62px);
      left: 0;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: end;
      gap: clamp(24px, 4vw, 68px);
    }
    .transit-action {
      display: grid;
      grid-template-columns: 38px auto;
      align-items: center;
      gap: 12px;
      padding: 0;
      background: transparent;
      color: #e8faff;
      cursor: pointer;
      font: 500 .58rem "Space Grotesk", sans-serif;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    .transit-action i { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border: 1px solid rgba(183,232,248,.48); border-radius: 50%; font-style: normal; transition: background .3s, transform .3s; }
    .transit-action:hover i { background: rgba(159,233,255,.16); transform: scale(1.08); }
    .transit-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
    .transit-step {
      position: relative;
      min-width: 0;
      padding: 16px 15px 13px;
      overflow: hidden;
      border-top: 1px solid rgba(193,233,247,.2);
      background: rgba(2,8,13,.46);
      color: rgba(201,228,238,.42);
      cursor: pointer;
      text-align: left;
      backdrop-filter: blur(14px);
      transition: color .35s, background .35s;
    }
    .transit-step::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg,#74d9ff,#eefcff); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 15px rgba(116,217,255,.7); }
    .transit-step.is-active::after { animation: transit-progress var(--phase-duration, 4s) linear forwards; }
    .transit-step b { display: block; font: 500 .62rem "Space Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
    .transit-step span { display: block; margin-top: 5px; overflow: hidden; font-size: .56rem; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
    .transit-step.is-active { color: #effbff; background: rgba(91,193,229,.12); }
    .field-transit[data-phase] .transit-step { color: rgba(201,228,238,.42); background: rgba(2,8,13,.46); }
    .field-transit[data-phase="0"] .transit-step[data-transit-target="0"],
    .field-transit[data-phase="1"] .transit-step[data-transit-target="1"],
    .field-transit[data-phase="2"] .transit-step[data-transit-target="2"] { color: #effbff; background: rgba(91,193,229,.12); }
    .field-transit[data-phase="0"] .transit-step[data-transit-target="0"]::after,
    .field-transit[data-phase="1"] .transit-step[data-transit-target="1"]::after,
    .field-transit[data-phase="2"] .transit-step[data-transit-target="2"]::after { animation: transit-progress var(--phase-duration, 4s) linear forwards; }
    .transit-status { color: rgba(207,237,247,.58); font: 500 .52rem "Space Grotesk", sans-serif; letter-spacing: .18em; text-align: right; text-transform: uppercase; }
    .transit-status strong { display: block; margin-bottom: 5px; color: #f0fbff; font-size: .62rem; }
    .field-transit.is-complete .transit-status strong { color: #9fe9ff; }
    .field-transit[data-phase="2"] .transit-atmosphere {
      background:
        linear-gradient(90deg, rgba(0,3,7,.88), rgba(0,3,7,.42) 35%, transparent 61%),
        radial-gradient(circle at 50% 50%, transparent 24%, rgba(0,3,7,.08) 52%, rgba(0,2,5,.72) 100%);
    }
    .field-transit[data-phase="2"] .transit-panel h2 { max-width: 520px; font-size: clamp(2.8rem, 4.6vw, 5.25rem); }

    @keyframes transit-entry-camera { from { transform: scale(1.02); } to { transform: scale(1.34); } }
    @keyframes transit-core-camera { from { transform: scale(1.02); } to { transform: scale(1.09); } }
    @keyframes transit-release-camera { from { transform: scale(1.04); } to { transform: scale(1.08); } }
    @keyframes transit-flash { 0% { opacity: 0; } 30% { opacity: .92; } 55% { opacity: .8; } 100% { opacity: 0; } }
    @keyframes transit-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    @media (max-width: 760px) {
      .field-transit { min-height: 680px; }
      .transit-interface { width: calc(100% - 34px); }
      .transit-atmosphere { background: linear-gradient(180deg,rgba(0,3,6,.55),transparent 34%,rgba(0,3,6,.22) 58%,#010306 100%); }
      .transit-video { object-fit: cover; }
      .transit-video--entry { object-position: center; }
      .transit-meta { top: 76px; font-size: .46rem; }
      .transit-copy { top: 27%; width: 100%; transform: none; }
      .transit-panel { top: 0; }
      .transit-panel.is-active { transform: none; }
      .transit-panel h2 { max-width: 350px; font-size: clamp(2.15rem, 9.4vw, 2.9rem); line-height: 1.08; letter-spacing: -.055em; }
      .transit-panel p { max-width: 310px; margin-top: 18px; font-size: .68rem; line-height: 1.85; }
      .transit-controls { bottom: 22px; grid-template-columns: 1fr; gap: 12px; }
      .transit-action { display: none; }
      .transit-step { padding: 13px 8px 11px; }
      .transit-step b { font-size: .51rem; }
      .transit-step span { font-size: .45rem; }
      .transit-status { display: none; }
      .transit-media { background-position: 68% center; }
    }

    @media (prefers-reduced-motion: reduce) {
      .transit-video { display: none; }
      .transit-video--release { display: block; opacity: 1; }
      .transit-panel { display: none; }
      .transit-panel:last-child { display: block; opacity: 1; visibility: visible; transform: translateY(-50%); }
    }

    /* 90+ art-direction pass: keep the cinematic peak alive through the final conversion. */
    @media (min-width: 761px) {
      .transit-copy { width: min(650px, 48vw); }
      .transit-panel h2 {
        max-width: 650px;
        font-size: clamp(2.75rem, 4.3vw, 5.15rem);
        line-height: 1.02;
      }
      .transit-panel h2 span { white-space: nowrap; }
      .transit-panel h2 .solid {
        color: #f0faff;
        -webkit-text-stroke: 0;
      }
      .transit-panel p {
        max-width: 470px;
        padding-left: 20px;
        border-left: 1px solid rgba(159,233,255,.38);
      }

      .chapter-copy::before {
        content: "LISTENING SCENE / 01—04";
        position: absolute;
        top: 7%;
        left: 0;
        color: rgba(189,231,246,.42);
        font: 500 .52rem "Space Grotesk", sans-serif;
        letter-spacing: .28em;
      }
      .chapter-pin[data-active="1"] .chapter-copy::before { right: 0; left: auto; }
      .chapter-panel h2 {
        max-width: 680px;
        font-size: clamp(2.4rem, 3.35vw, 4.05rem);
        line-height: 1.1;
        text-wrap: balance;
      }
      .chapter-panel p {
        padding-left: 20px;
        border-left: 1px solid rgba(var(--scene-cyan), .34);
      }
      .chapter-pin[data-active="1"] .chapter-panel p {
        padding-right: 20px;
        padding-left: 0;
        border-right: 1px solid rgba(var(--scene-cyan), .34);
        border-left: 0;
      }
      .chapter-metric {
        padding-top: 20px;
        border-top: 1px solid rgba(var(--scene-cyan), .13);
      }
    }

    .chapter-pin::after { opacity: .42; }
    .chapter-selector { border-color: rgba(176,220,237,.28); }
    .chapter-select { min-height: 78px; }
    .chapter-select b { font-size: .64rem; letter-spacing: .06em; }
    .chapter-select.is-active {
      background: linear-gradient(180deg, rgba(var(--scene-cyan),.17), rgba(var(--scene-violet),.035));
    }

    .decision-heading h2 { text-wrap: balance; }
    .decision-journey { gap: 12px; }
    .decision-phase {
      border: 1px solid rgba(176,224,240,.1);
      background: linear-gradient(145deg, rgba(180,229,246,.055), rgba(5,12,19,.12) 60%);
      transition: transform .65s cubic-bezier(.16,1,.3,1), border-color .45s ease, background .45s ease;
    }
    .decision-phase + .decision-phase { border-left: 1px solid rgba(176,224,240,.1); }
    .decision-phase:hover {
      z-index: 2;
      border-color: rgba(169,233,255,.3);
      background: linear-gradient(145deg, rgba(180,229,246,.1), rgba(5,12,19,.2) 62%);
      transform: translateY(-10px);
    }

    .finale {
      background:
        radial-gradient(circle at 74% 48%, rgba(255,255,255,.96), transparent 26%),
        radial-gradient(circle at 18% 72%, rgba(76,164,195,.18), transparent 33%),
        linear-gradient(118deg, #aebfc8 0%, #dfe9ed 44%, #bdcfd7 100%);
    }
    .finale::after {
      background:
        linear-gradient(90deg, rgba(6,17,25,.055) 1px, transparent 1px),
        linear-gradient(rgba(6,17,25,.035) 1px, transparent 1px),
        radial-gradient(circle at 50% 54%, transparent 18%, rgba(151,178,189,.5) 82%);
      background-size: 120px 100%, 100% 120px, auto;
    }
    .finale-product {
      right: -2%;
      width: min(43vw, 590px);
      opacity: .96;
      filter: drop-shadow(0 42px 42px rgba(22,42,52,.18)) drop-shadow(0 0 52px rgba(255,255,255,.3));
    }
    .finale h2 { max-width: 720px; font-size: clamp(3.1rem, 5.35vw, 6rem); }
    .finale .primary-button {
      box-shadow: 0 18px 44px rgba(5,16,24,.18);
      transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, background .35s ease;
    }
    .finale .primary-button:hover,
    .finale .primary-button:focus-visible {
      background: #102735;
      box-shadow: 0 24px 58px rgba(5,16,24,.26), 0 0 0 1px rgba(255,255,255,.3) inset;
      transform: translateY(-4px);
    }

    /* Recording QA pass: preserve Japanese phrases and add a deliberate
       light/depth beat between the dark cinematic chapters. */
    .editorial-copy { width: min(44%, 600px); }
    .editorial h2 { font-size: clamp(2.7rem, 4.25vw, 5.05rem); }
    .editorial h2 .editorial-line {
      display: block;
      white-space: nowrap;
    }
    .editorial h2 .editorial-line--solid {
      color: #f2f8fa;
      -webkit-text-stroke: 0;
    }

    .field-shift {
      background:
        radial-gradient(ellipse at 68% 48%, rgba(92,205,255,.26), transparent 24%),
        radial-gradient(ellipse at 86% 28%, rgba(126,80,255,.21), transparent 31%),
        radial-gradient(ellipse at 53% 83%, rgba(188,239,255,.08), transparent 26%),
        linear-gradient(103deg, #03060a 0 43%, #081522 71%, #03050a 100%);
      box-shadow: inset 0 1px rgba(198,237,250,.08), inset 0 -70px 100px rgba(2,5,9,.48);
    }
    .field-shift__visual::after {
      content: "";
      position: absolute;
      z-index: 1;
      left: 70%;
      top: 50%;
      width: min(39vw, 540px);
      aspect-ratio: 1;
      border: 1px solid rgba(176,233,255,.2);
      border-radius: 50%;
      box-shadow:
        0 0 0 5vw rgba(123,211,244,.018),
        0 0 0 calc(5vw + 1px) rgba(176,233,255,.08),
        0 0 90px rgba(102,194,255,.12),
        inset 0 0 70px rgba(149,218,255,.04);
      opacity: .58;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(.84);
      animation: spatial-breath 7.5s cubic-bezier(.45,0,.25,1) infinite alternate;
    }
    .field-shift__product {
      width: min(35vw, 470px);
      filter: drop-shadow(0 42px 62px rgba(0,0,0,.58)) drop-shadow(0 0 48px rgba(119,220,255,.17));
    }
    .field-shift__readouts span {
      border-color: rgba(188,232,248,.25);
      background: linear-gradient(115deg, rgba(7,18,28,.78), rgba(17,38,53,.45));
    }

    .engineering {
      box-shadow: inset 0 72px 110px rgba(30,76,96,.055), inset 0 -90px 120px rgba(2,5,9,.48);
    }
    .engineering-grid::after {
      content: "OBJECT / FIELD / LISTENER";
      position: absolute;
      top: 50%;
      left: -54px;
      color: rgba(169,233,255,.22);
      font: 500 .46rem "Space Grotesk", sans-serif;
      letter-spacing: .28em;
      writing-mode: vertical-rl;
      transform: translateY(-50%);
    }

    .concept-dialog {
      overflow: hidden;
      transform-origin: 50% 56%;
    }
    .concept-dialog[open] {
      animation: dialog-arrive .72s cubic-bezier(.16,1,.3,1) both;
    }
    .concept-dialog[open]::backdrop {
      animation: dialog-backdrop-arrive .58s ease both;
    }
    .dialog-inner::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(207,244,255,.85), transparent);
      box-shadow: 0 0 24px rgba(146,224,251,.45);
      transform: translateX(-110%);
    }
    .concept-dialog[open] .dialog-inner::before {
      animation: dialog-scan 1.15s cubic-bezier(.16,1,.3,1) .15s both;
    }

    @keyframes spatial-breath {
      from { opacity: .38; transform: translate(-50%, -50%) scale(.84) rotate(-3deg); }
      to { opacity: .76; transform: translate(-50%, -50%) scale(1.04) rotate(4deg); }
    }
    @keyframes dialog-arrive {
      from { opacity: 0; filter: blur(10px); transform: translateY(26px) scale(.965); }
      to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
    }
    @keyframes dialog-backdrop-arrive {
      from { background: rgba(1,3,5,0); backdrop-filter: blur(0); }
      to { background: rgba(1,3,5,.76); backdrop-filter: blur(8px); }
    }
    @keyframes dialog-scan {
      0% { opacity: 0; transform: translateX(-110%); }
      35% { opacity: 1; }
      100% { opacity: 0; transform: translateX(110%); }
    }

    @media (max-width: 760px) {
      .transit-panel h2 span { white-space: normal; }
      .transit-panel h2 .solid { color: #f0faff; -webkit-text-stroke: 0; }
      .chapter-copy::before { display: none; }
      .decision-phase + .decision-phase { border-left: 1px solid rgba(176,224,240,.1); }
      .decision-phase:hover { transform: none; }
      .finale-inner { padding-top: 92px; }
      .finale-product { right: -9%; width: min(84vw, 440px); }
      .editorial-copy { width: 100%; }
      .editorial h2 { font-size: clamp(2.1rem, 9.2vw, 3rem); }
      .editorial h2 .editorial-line { white-space: nowrap; }
      .field-shift__visual::after { left: 50%; width: min(92vw, 390px); }
      .field-shift__product { width: min(72vw, 320px); }
      .engineering-grid::after { display: none; }
    }

    @media (max-width: 340px) {
      .editorial h2 { font-size: 1.95rem; }
    }

    /* Final recording QA: readable microcopy and unmistakable manual controls. */
    @media (min-width: 761px) {
      .transit-meta { font-size: .64rem; }
      .transit-panel small { font-size: .66rem; }
      .transit-panel p { max-width: 470px; font-size: .88rem; line-height: 2.05; }
      .field-shift__copy > p:last-child { max-width: 540px; font-size: .91rem; }
      .field-shift__readouts span { font-size: .51rem; }
      .chapter-panel p { max-width: 510px; font-size: .96rem; line-height: 2; }
      .chapter-number { font-size: .69rem; }
      .chapter-navigator::before {
        content: "CLICK / DRAG / \2190  \2192";
        bottom: calc(100% + 13px);
        color: rgba(220,244,252,.82);
        font-size: .61rem;
        letter-spacing: .2em;
        text-shadow: 0 0 18px rgba(162,232,255,.28);
      }
      .chapter-select::before { font-size: .63rem; }
      .chapter-select span { font-size: .78rem; }
      .chapter-select b { font-size: .69rem; }
      .chapter-direction::after {
        content: "";
        position: absolute;
        inset: 7px;
        border: 1px solid rgba(162,232,255,.16);
        pointer-events: none;
        transition: border-color .3s ease, transform .3s ease;
      }
      .chapter-direction:hover::after,
      .chapter-direction:focus-visible::after { border-color: rgba(162,232,255,.62); transform: scale(.92); }
      .editorial-lead { font-size: .9rem; }
      .editorial-data strong { font-size: .91rem; }
      .editorial-data span { font-size: .55rem; }
      .spec strong { font-size: .84rem; }
      .engineering-detail figcaption span { font-size: .7rem; }
      .decision-heading > p:last-child { font-size: .91rem; }
      .decision-phase > p { font-size: .8rem; }
      .finale p { font-size: .88rem; line-height: 1.9; }
      .finale-meta { font-size: .72rem; }
      .finale-note { font-size: .68rem; }
    }

    .chapter-navigator {
      filter: drop-shadow(0 20px 36px rgba(0,0,0,.36));
    }
    .chapter-select.is-active {
      box-shadow: inset 0 0 34px rgba(var(--scene-cyan),.08);
    }
    .chapter-select.is-active span::after {
      content: "  /  ACTIVE";
      color: rgba(var(--scene-cyan),.7);
      font-size: .52rem;
      letter-spacing: .12em;
    }

    @media (max-width: 760px) {
      .chapter-navigator::before { content: "TAP / SWIPE"; color: rgba(220,244,252,.72); }
      .chapter-select.is-active span::after { content: ""; }
      .chapter-select { height: 60px; min-height: 60px; padding: 0 5px; }
      .chapter-select::before { font-size: .43rem; letter-spacing: .08em; }
      .chapter-select span { font-size: .5rem; letter-spacing: .07em; }
      .chapter-select b { display: none; }
      .transit-panel p { font-size: .72rem; }
    }