* {
      box-sizing: border-box;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      margin: 0;
      background: #08080a;
      color: #f7f7fa;
      font:
        16px/1.6 Arial,
        Helvetica,
        sans-serif;
    }
    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }
    a {
      color: inherit;
      text-decoration: none;
    }
    button {
      color: inherit;
      font: inherit;
      cursor: pointer;
    }
    a:focus-visible,
    button:focus-visible {
      outline: 2px solid #d8afff;
      outline-offset: 6px;
    }
    .skip {
      position: fixed;
      top: -100px;
      z-index: 99;
      padding: 15px;
      background: #352341;
    }
    .skip:focus {
      top: 0;
    }
    header {
      min-height: 100px;
      margin: 0 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 25px;
      border-bottom: 1px solid #ffffff20;
    }
    .logo {
      font-size: 16px;
      font-weight: 900;
      line-height: 1.15;
    }
    .logo span {
      color: #b68aff;
      margin-left: 8px;
    }
    header nav {
      display: flex;
      align-items: center;
      gap: 25px;
      font-size: 13px;
    }
    nav [aria-current] {
      color: #b68aff;
    }
    .talk {
      border: 1px solid #806492;
      border-radius: 30px;
      padding: 11px 22px;
    }
    .hero {
      position: relative;
      isolation: isolate;
      padding: 65px 6% 32px;
      overflow: hidden;
      min-height: 890px;
      background: radial-gradient(ellipse at 68% 61%, #37224780, transparent 50%);
    }
    .hero-top {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      letter-spacing: 2px;
      color: #b9a6c9;
    }
    .eyebrow {
      font-size: 10px;
      letter-spacing: 2px;
      color: #bba5d0;
    }
    .hero h1 {
      position: relative;
      z-index: 3;
      font-size: clamp(66px, 9.8vw, 150px);
      line-height: 0.9;
      letter-spacing: -0.07em;
      margin: 48px 0 0;
      max-width: 1000px;
      font-weight: 900;
    }
    .hero h1 em {
      font-family: Georgia, serif;
      font-weight: 400;
      color: #bd97e9;
    }
    .intro {
      position: relative;
      z-index: 4;
      margin-top: 36px;
      max-width: 310px;
      color: #bdb3c5;
      font-size: 14px;
    }
    .intro p {
      margin: 0 0 25px;
    }
    .button {
      display: inline-flex;
      align-items: center;
      gap: 30px;
      background: #c4a0ed;
      color: #160e20;
      border: 0;
      border-radius: 35px;
      padding: 14px 24px;
      font-size: 12px;
      font-weight: bold;
    }
    .fan {
      position: absolute;
      width: 62%;
      height: 420px;
      right: 1%;
      bottom: 100px;
      perspective: 1000px;
      z-index: 2;
    }
    .fan img {
      position: absolute;
      width: 60%;
      top: 20px;
      left: 20%;
      aspect-ratio: 4/3;
      object-fit: cover;
      box-shadow: 0 30px 80px #0009;
      border: 1px solid #c7a9dc33;
      transform: translateY(var(--fan-y, 0px)) rotate(var(--rot));
    }
    .fan img:nth-child(1) {
      left: -2%;
      top: 65px;
      --rot: -15deg;
      z-index: 1;
    }
    .fan img:nth-child(2) {
      left: 39%;
      top: 70px;
      --rot: 15deg;
      z-index: 2;
    }
    .fan img:nth-child(3) {
      --rot: -3deg;
      z-index: 3;
    }
    .hero-foot {
      position: absolute;
      bottom: 30px;
      left: 6%;
      right: 6%;
      display: flex;
      justify-content: space-between;
      color: #ac98ba;
      font-size: 9px;
      letter-spacing: 2px;
    }
    .seal {
      position: absolute;
      right: 8%;
      top: 80px;
      border: 1px solid #9575af60;
      width: 94px;
      height: 94px;
      border-radius: 50%;
      display: grid;
      place-content: center;
      text-align: center;
      font: italic 29px Georgia;
      color: #c4a0ed;
      transform: rotate(12deg);
    }
    .seal small {
      font: 8px Arial;
      letter-spacing: 2px;
      margin-top: 6px;
    }
    .ribbon {
      padding: 22px 6%;
      border-block: 1px solid #ffffff23;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      font-size: 10px;
      letter-spacing: 2px;
      color: #b1a4bd;
    }
    .ribbon span:before {
      content: "✳";
      color: #b68aff;
      margin-right: 16px;
    }
    .exhibition {
      position: relative;
    }
    .gallery-stage {
      padding: 65px 5%;
      background: radial-gradient(ellipse at 50% 48%, #48305a50, transparent 62%);
      overflow: hidden;
    }
    .gallery-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 20px;
      margin-bottom: 40px;
    }
    .gallery-head h2 {
      font-size: clamp(36px, 4vw, 60px);
      line-height: 1.05;
      letter-spacing: -0.055em;
      margin: 12px 0 0;
    }
    .gallery-head button {
      border: 1px solid #665271;
      border-radius: 25px;
      padding: 10px 16px;
      background: transparent;
      font-size: 11px;
    }
    .works {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px 22px;
    }
    .cover {
      border: 0;
      background: transparent;
      text-align: left;
      padding: 0;
      min-width: 0;
    }
    .cover img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 4/3;
      object-fit: cover;
      border-radius: 6px;
      box-shadow: 0 30px 60px #0005;
    }
    .cover .label {
      display: block;
      font-size: 15px;
      margin: 15px 0;
      color: #e7deef;
    }
    .cover .label small {
      display: block;
      font-size: 9px;
      letter-spacing: 2px;
      color: #a791b9;
      margin-top: 6px;
    }
    .cinematic .exhibition {
      height: 540vh;
    }
    .cinematic .gallery-stage {
      height: 100svh;
      min-height: 700px;
      position: sticky;
      top: 0;
      padding-top: 35px;
    }
    .cinematic .gallery-head {
      position: absolute;
      top: 35px;
      left: 5%;
      right: 5%;
      z-index: 5;
    }
    .cinematic .gallery-head h2 {
      font-size: 36px;
    }
    .cinematic .works {
      position: absolute;
      inset: 0;
      display: block;
      perspective: 1400px;
      transform-style: preserve-3d;
    }
    .cinematic .cover {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(56vw, 760px);
      transform: translate(-50%, -50%);
      will-change: transform, opacity;
    }
    .cinematic .cover .label {
      display: none;
    }
    .cinematic .cover img {
      border: 1px solid #d5b4ed40;
    }
    .floor-ring {
      display: none;
    }
    .cinematic .floor-ring {
      display: block;
      position: absolute;
      left: 10%;
      right: 10%;
      height: 26%;
      bottom: 13%;
      border: 1px solid #ae85cb25;
      border-radius: 50%;
      transform: rotateX(70deg);
      box-shadow: 0 0 75px #a366d112;
      pointer-events: none;
    }
    .gallery-controls {
      display: none;
    }
    .cinematic .gallery-controls {
      position: absolute;
      bottom: 27px;
      left: 5%;
      right: 5%;
      z-index: 6;
      display: block;
    }
    .now {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 20px;
    }
    .now h3 {
      font: italic clamp(23px, 3vw, 40px)/1.1 Georgia;
      margin: 5px 0 16px;
    }
    .now small {
      font-size: 9px;
      letter-spacing: 2px;
      color: #b09ac0;
    }
    .arrows {
      display: flex;
      gap: 8px;
    }
    .arrows button {
      border: 1px solid #796488;
      border-radius: 50%;
      width: 42px;
      height: 42px;
      background: #18111fc9;
    }
    .numbers {
      border-top: 1px solid #ffffff26;
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      padding-top: 12px;
    }
    .numbers button {
      border: 0;
      background: none;
      font-size: 10px;
      color: #8a7896;
      padding: 5px 9px;
    }
    .numbers button.active {
      color: #e8d2ff;
      border-bottom: 2px solid #bb91e9;
    }
    .hint {
      position: absolute;
      left: 5%;
      top: 50%;
      writing-mode: vertical-rl;
      font-size: 8px;
      letter-spacing: 2px;
      color: #967fac;
      display: none;
    }
    .cinematic .hint {
      display: block;
    }
    .editorial {
      background: #ece7ef;
      color: #1a1420;
      padding: 90px 7%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12%;
      position: relative;
    }
    .editorial .eyebrow {
      color: #78568b;
    }
    .editorial h2 {
      font-size: clamp(43px, 5.4vw, 79px);
      letter-spacing: -0.055em;
      line-height: 1;
      margin: 25px 0;
    }
    .editorial h2 em {
      font-family: Georgia, serif;
      font-weight: 400;
      color: #875ba8;
    }
    .editorial .note {
      font-size: 14px;
      color: #6e6076;
      max-width: 350px;
    }
    .services article {
      border-bottom: 1px solid #bfafc8;
      padding: 25px 0;
    }
    .services article:first-child {
      padding-top: 0;
    }
    .services small {
      font-size: 9px;
      letter-spacing: 2px;
      color: #936eaa;
    }
    .services h3 {
      font-size: 24px;
      letter-spacing: -0.8px;
      margin: 9px 0;
    }
    .services p {
      font-size: 14px;
      color: #6d5e75;
      margin: 0;
      line-height: 1.8;
    }
    .last {
      position: relative;
      text-align: center;
      overflow: hidden;
      padding: 110px 20px 100px;
      background: radial-gradient(ellipse at 50% 110%, #59367588, transparent 65%);
    }
    .last h2 {
      font-size: clamp(55px, 8vw, 115px);
      letter-spacing: -0.06em;
      line-height: 1;
      margin: 25px 0;
    }
    .last h2 em {
      font-family: Georgia, serif;
      color: #bd97e9;
      font-weight: 400;
    }
    .last p {
      font-size: 14px;
      color: #ad9dbb;
    }
    .last .button {
      margin-top: 25px;
    }
    .footer {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 25px 6%;
      border-top: 1px solid #ffffff26;
      color: #95819f;
      font-size: 10px;
    }
    .reel-line {
      height: 2px;
      background: #c099ec;
      transform-origin: left;
      transform: scaleX(var(--progress, 0));
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .last:before,
    .last:after {
      content: "";
      position: absolute;
      width: 180px;
      height: 250px;
      border: 1px solid #b28ccb30;
      border-radius: 5px;
      top: 80px;
      left: -100px;
      transform: rotate(-24deg);
    }
    .last:after {
      left: auto;
      right: -100px;
      transform: rotate(24deg);
    }
    dialog {
      width: min(1200px, 95vw);
      max-height: 94svh;
      background: #141019;
      border: 1px solid #846293;
      color: #fff;
      border-radius: 12px;
      padding: 20px;
    }
    dialog::backdrop {
      background: #030205ed;
      backdrop-filter: blur(12px);
    }
    .dialog-row {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
    }
    .dialog-row h2 {
      font-size: 18px;
      font-weight: 400;
    }
    .dialog-row button {
      background: none;
      border: 1px solid #7e608f;
      border-radius: 30px;
      padding: 9px 17px;
    }
    .dialog-row small {
      color: #b29ac4;
    }
    dialog img {
      display: block;
      max-width: 100%;
      max-height: 70svh;
      object-fit: contain;
      margin: 20px auto;
    }
    @media (max-width: 900px) {
      header {
        flex-wrap: wrap;
        padding: 22px 0;
      }
      header nav {
        gap: 17px;
      }
      .hero {
        min-height: 940px;
      }
      .hero h1 {
        font-size: 100px;
      }
      .fan {
        width: 85%;
        right: 5%;
        bottom: 100px;
        height: 350px;
      }
      .intro {
        max-width: 450px;
      }
      .seal {
        top: 200px;
        right: 7%;
      }
      .works {
        grid-template-columns: repeat(2, 1fr);
      }
      .cinematic .cover {
        width: 70vw;
      }
      .editorial {
        gap: 7%;
      }
    }
    @media (max-width: 600px) {
      header {
        min-height: 130px;
        gap: 20px;
      }
      .logo {
        font-size: 13px;
      }
      header nav {
        font-size: 11px;
        gap: 17px;
        flex-wrap: wrap;
      }
      header .talk {
        border: 0;
        padding: 0;
      }
      .hero {
        min-height: 800px;
        padding-top: 35px;
      }
      .hero-top {
        font-size: 8px;
        letter-spacing: 1px;
      }
      .hero h1 {
        font-size: clamp(60px, 14.5vw, 85px);
        margin-top: 35px;
      }
      .hero h1 em {
        font-size: 0.8em;
      }
      .intro {
        max-width: 290px;
        font-size: 13px;
        margin-top: 25px;
      }
      .fan {
        bottom: 90px;
        height: 240px;
        width: 100%;
        right: 0;
      }
      .fan img {
        top: 20px;
      }
      .fan img:nth-child(1) {
        top: 50px;
      }
      .fan img:nth-child(2) {
        top: 50px;
      }
      .seal {
        display: none;
      }
      .hero-foot {
        font-size: 7px;
        letter-spacing: 1px;
      }
      .ribbon {
        font-size: 8px;
        gap: 16px;
        justify-content: center;
      }
      .ribbon span:before {
        margin-right: 8px;
      }
      .cinematic .gallery-stage {
        min-height: 630px;
      }
      .cinematic .gallery-head {
        top: 30px;
      }
      .cinematic .gallery-head h2 {
        font-size: 30px;
      }
      .gallery-head button {
        padding: 8px 11px;
        font-size: 10px;
      }
      .cinematic .cover {
        width: 82vw;
      }
      .cinematic .cover img {
        border-radius: 4px;
      }
      .cinematic .gallery-controls {
        bottom: 20px;
      }
      .now h3 {
        font-size: 25px;
        max-width: 245px;
      }
      .now small {
        font-size: 8px;
      }
      .arrows button {
        width: 35px;
        height: 35px;
      }
      .numbers button {
        font-size: 8px;
        padding: 5px;
      }
      .hint {
        display: none !important;
      }
      .editorial {
        grid-template-columns: 1fr;
        padding: 65px 7%;
        gap: 40px;
      }
      .editorial h2 {
        font-size: 50px;
      }
      .services h3 {
        font-size: 23px;
      }
      .last {
        padding: 80px 6%;
      }
      .last h2 {
        font-size: 58px;
      }
      .footer {
        font-size: 8px;
      }
      .works {
        gap: 25px 14px;
      }
      .cover .label {
        font-size: 13px;
      }
      .cover .label small {
        font-size: 7px;
        letter-spacing: 1px;
      }
      .dialog-row h2 {
        font-size: 14px;
      }
      .dialog-row button {
        font-size: 12px;
        padding: 8px 12px;
      }
      .eyebrow {
        font-size: 9px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
      * {
        transition: none !important;
      }
    }

/* E-BOOK OVERFLOW SAFETY */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
body > main,
.hero,
.exhibition,
.gallery-stage,
.works,
.editorial,
.last {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.hero-top,
.hero-foot,
.gallery-head,
.now,
.editorial > *,
.services,
.cover,
.cover img {
  min-width: 0;
}
.numbers {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  gap: 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.numbers button {
  flex: 0 0 auto;
}
@media (max-width: 600px) {
  .hero-top,
  .hero-foot {
    gap: 12px;
  }
  .hero-top span,
  .hero-foot span {
    min-width: 0;
  }
  .gallery-head {
    gap: 14px;
  }
  .gallery-head > div {
    min-width: 0;
  }
  .cinematic .cover {
    max-width: calc(100vw - 28px);
  }
  .dialog-row {
    min-width: 0;
    flex-wrap: wrap;
  }
}