:root {
      --rx: 0deg;
      --ry: 0deg;
      --holo-x: 0%;
      --holo-a: 112deg;
      --holo-o: .42;
    }
    * {
      box-sizing: border-box;
    }
    html,
    body {
      margin: 0;
      width: 100%;
      min-height: 100%;
      background: var(--site-page-background-base);
      color: #f1f1ee;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }
    body {
      min-height: 100svh;
      overflow: hidden;
      background: var(--site-page-background);
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .20;
      background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.030) 1px, transparent 1px);
      background-size: 96px 96px;
      mask-image: radial-gradient(ellipse at center, #000 0%, #000 40%, transparent 78%);
    }
    html.site-page {
      background-color: #222222;
    }
    body.site-page {
      background-color: #222222;
      background-image: none;
    }
    .page {
      --hero-stack-gap: 40px;
      --language-panel-background: rgba(12, 14, 18, .26);
      position: relative;
      width: 100%;
      min-height: 100svh;
      display: grid;
      grid-template-rows: auto 1fr;
      padding: clamp(20px, 3vw, 34px) clamp(18px, 3vw, 42px);
      overflow: hidden;
    }
    .page::before {
      content: "";
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      background:
        radial-gradient(
          ellipse 28% 46% at 50% 48%,
          rgba(255, 255, 255, .96) 0%,
          rgba(255, 255, 255, .90) 14%,
          rgba(255, 255, 255, .70) 28%,
          rgba(255, 255, 255, .42) 46%,
          rgba(255, 255, 255, .18) 65%,
          rgba(255, 255, 255, .06) 80%,
          rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
          ellipse 68% 92% at 50% 50%,
          rgba(215, 217, 218, .74) 0%,
          rgba(194, 197, 198, .62) 30%,
          rgba(164, 168, 170, .46) 52%,
          rgba(126, 131, 134, .28) 70%,
          rgba(83, 89, 92, .10) 88%,
          rgba(52, 57, 61, 0) 100%
        ),
        radial-gradient(
          ellipse at center,
          rgba(34, 34, 34, 0) 30%,
          rgba(34, 34, 34, .06) 45%,
          rgba(34, 34, 34, .18) 62%,
          rgba(34, 34, 34, .36) 80%,
          rgba(34, 34, 34, .58) 100%
        );
      animation: heroBackgroundReveal 5600ms cubic-bezier(.22, .61, .36, 1) forwards;
    }
    .nav {
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 24px;
      min-height: 32px;
      text-transform: none;
      letter-spacing: .18em;
      font-size: clamp(10px, .85vw, 13px);
      color: rgba(255,255,255,.72);
    }
    .brand {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(16px, 1.2vw, 18px);
      letter-spacing: .12em;
      color: rgba(255,255,255,.86);
    }
    .menu {
      display: flex;
      justify-content: center;
      gap: clamp(20px, 3.6vw, 58px);
      white-space: nowrap;
    }
    .lang {
      white-space: nowrap;
    }
    .hero {
      position: relative;
      isolation: isolate;
      z-index: 3;
      display: grid;
      place-items: center;
      min-height: 0;
      padding: clamp(56px, 8vh, 86px) 0 clamp(48px, 8vh, 82px);
      perspective: 1500px;
    }
    .hero-shadow-video {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      z-index: 1;
      object-fit: cover;
      object-position: center;
      display: block;
      margin: 0;
      border: 0;
      border-radius: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 5s ease-in-out;
    }
    .hero-shadow-video.is-visible {
      opacity: .4;
    }
    .tech {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: .28;
    }
    .tech svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .floor-light {
      position: absolute;
      left: 50%;
      bottom: clamp(52px, 7.1vh, 86px);
      width: min(520px, 46vw);
      height: clamp(90px, 13vh, 126px);
      transform: translateX(-50%);
      border-radius: 50%;
      background:
        radial-gradient(ellipse at center,
          rgba(255,255,255,.48) 0%,
          rgba(248,249,249,.34) 28%,
          rgba(224,228,230,.18) 52%,
          rgba(180,187,191,.08) 68%,
          transparent 82%);
      filter: blur(28px);
      opacity: .98;
      z-index: 1;
      pointer-events: none;
    }
    .floor-shadow {
      position: absolute;
      left: 50%;
      bottom: clamp(62px, 9vh, 98px);
      width: min(540px, 52vw);
      height: clamp(52px, 7vh, 74px);
      transform: translateX(-50%);
      border-radius: 50%;
      background:
        radial-gradient(ellipse at center,
          rgba(0,0,0,.50) 0%,
          rgba(0,0,0,.32) 32%,
          rgba(0,0,0,.12) 58%,
          transparent 78%);
      filter: blur(22px);
      opacity: .75;
      z-index: 2;
      pointer-events: none;
    }
    /*
      Главный принцип адаптации.
      Вся книга — один блок.
      Размер считается от ширины и высоты экрана.
      Все шрифты внутри завязаны на этот блок через em.
    */
    .book {
      --book-w: min(390px, 48vw, calc((100svh - 190px) * .675));
      position: relative;
      z-index: 4;
      width: var(--book-w);
      min-width: 250px;
      aspect-ratio: .675;
      transform-style: preserve-3d;
      transform: rotateX(var(--rx)) rotateY(var(--ry));
      transition: transform .28s ease-out;
      filter: drop-shadow(0 44px 42px rgba(0,0,0,.43));
      font-size: calc(var(--book-w) / 390 * 16);
    }
    .book-core {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
    }
    .spine { display: none; }
    .pages { display: none; }
    .bottom-pages { display: none; }
    .frame { display: none; }
    .author-top,
    .title,
    .en,
    .sub,
    .hint {
      position: fixed;
      left: 50%;
      bottom: clamp(24px, 3.8vh, 38px);
      z-index: 6;
      transform: translateX(-50%);
      text-align: center;
      text-transform: none;
      letter-spacing: .22em;
      font-size: clamp(10px, .9vw, 12px);
      color: rgba(255,255,255,.62);
      white-space: nowrap;
      pointer-events: none;
    }
    .side {
      position: fixed;
      right: clamp(22px, 3vw, 36px);
      top: 42%;
      height: 190px;
      width: 28px;
      border-right: 1px solid rgba(255,255,255,.13);
      opacity: .52;
      z-index: 2;
      pointer-events: none;
    }
    .side span {
      position: absolute;
      right: 14px;
      top: 8px;
      writing-mode: vertical-rl;
      text-transform: none;
      letter-spacing: .16em;
      font-size: 10px;
      color: rgba(255,255,255,.31);
    }
    /* PREMIUM REACTIVE HOLOGRAPHIC COVER MATERIAL WITHOUT SEPARATE GLARE */
    .book {
      --hx: 46%;
      --hy: 44%;
      --h2x: 66%;
      --h2y: 34%;
      --angle: 128deg;
      --sat: 1.02;
      --light: 1.00;
    }
    .cover {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-radius: inherit;
      background:
        radial-gradient(circle at var(--hx) var(--hy), rgba(70,140,180,.34), transparent 34%),
        radial-gradient(circle at var(--h2x) var(--h2y), rgba(125,105,175,.25), transparent 38%),
        radial-gradient(circle at calc(100% - var(--hx)) calc(100% - var(--hy)), rgba(175,112,54,.22), transparent 42%),
        linear-gradient(var(--angle),
          #0b0d12 0%,
          #142033 18%,
          #12304a 34%,
          #1b3436 48%,
          #332e20 63%,
          #351b10 80%,
          #100d0c 100%);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.045),
        inset 0 0 56px rgba(190,230,255,.04),
        inset 0 -90px 130px rgba(0,0,0,.56),
        inset 0 90px 120px rgba(255,255,255,.028);
      isolation: isolate;
      filter: brightness(var(--light)) saturate(var(--sat));
      transition:
        background .42s cubic-bezier(.22, .61, .36, 1),
        filter .42s cubic-bezier(.22, .61, .36, 1);
    }
    .cover::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          calc(var(--angle) - 10deg),
          rgba(255,255,255,.030) 0px,
          rgba(255,255,255,.030) 1px,
          transparent 2px,
          transparent 11px
        );
      opacity: .28;
      mix-blend-mode: screen;
      filter: blur(.25px);
      transition: opacity .42s cubic-bezier(.22, .61, .36, 1), background .42s cubic-bezier(.22, .61, .36, 1);
    }
    .cover::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background:
        radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.09), transparent 34%),
        linear-gradient(calc(var(--angle) + 90deg),
          rgba(255,255,255,.04),
          rgba(95,170,225,.055) 22%,
          rgba(0,0,0,.16) 45%,
          rgba(255,255,255,.045) 60%,
          rgba(180,115,55,.052) 80%,
          rgba(255,255,255,.035));
      opacity: .30;
      mix-blend-mode: overlay;
      transition: background .42s cubic-bezier(.22, .61, .36, 1), opacity .42s cubic-bezier(.22, .61, .36, 1);
    }
    .grain {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      opacity: .23;
      mix-blend-mode: overlay;
      background-image:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.26) 0 1px, transparent 1.6px),
        radial-gradient(circle at 44% 68%, rgba(0,0,0,.38) 0 1px, transparent 1.8px),
        radial-gradient(circle at 76% 28%, rgba(255,255,255,.14) 0 1px, transparent 1.5px);
      background-size: 3px 3px, 4px 4px, 5px 5px;
      filter: url(#noise);
    }
    .book:hover .cover::before {
      opacity: .34;
    }
    
    .copy {
      position: absolute;
      z-index: 5;
      inset: 0;
      color: #AFAEA8;
      text-align: center;
      text-shadow: none;
    }
    .author-top,
    .title,
    .en,
    .sub,
    .edition {
      position: absolute;
      left: 50%;
      margin: 0;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      text-align: center;
      color: #AFAEA8;
      opacity: .82;
    }
    .author-top {
      top: 8.79%;
      transform: translateX(-50%);
      width: 74%;
      font-size: .667em;
      line-height: 1.2;
      font-weight: 400;
      letter-spacing: .055em;
      text-transform: none;
      white-space: nowrap;
    }
    .title {
      top: 18.88%;
      transform: translateX(-50%);
      width: 88%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      font-size: 2em;
      line-height: 1.13;
      font-weight: 700;
      letter-spacing: -.025em;
      text-transform: none;
      white-space: nowrap;
    }
    .title-line {
      display: block;
      width: 100%;
      text-align: center;
    }
    .en {
      top: 44.90%;
      transform: translateX(-50%);
      width: 78%;
      font-size: 1.19em;
      line-height: 1.2;
      font-weight: 400;
      letter-spacing: -.01em;
      white-space: nowrap;
    }
    .sub-group {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .sub {
      transform: translateX(-50%);
      width: 85.35%;
      max-width: none;
      font-size: .714em;
      line-height: 1.2;
      font-weight: 400;
      letter-spacing: -.005em;
    }
    .sub-1 {
      top: 57.94%;
    }
    .sub-2 {
      top: 66.99%;
    }
    .sub-3 {
      top: 76.04%;
    }
    .edition {
      top: 88.99%;
      transform: translateX(-50%);
      width: 40%;
      font-size: .667em;
      line-height: 1.2;
      font-weight: 400;
      letter-spacing: .02em;
      white-space: nowrap;
    }
    @media (min-width: 1440px) {
      .book {
        --book-w: min(420px, 44vw, calc((100svh - 205px) * .675));
      }
    }
    @media (max-width: 900px) {
      .menu {
        gap: 22px;
      }
      .book {
        --book-w: min(360px, 58vw, calc((100svh - 185px) * .675));
      }
    }
    @media (max-width: 760px) {
      body {
        overflow: hidden;
      }
      .page {
        padding: 22px 20px;
      }
      .menu {
        display: none;
      }
      .hero {
        padding-top: 58px;
        padding-bottom: 42px;
      }
      .book {
        --book-w: min(430px, 88vw, calc((100svh - 150px) * .675));
        min-width: 260px;
      }
      
      
      
      
      
      .floor-light {
        width: 66vw;
        height: 92px;
        bottom: 54px;
      }
      .floor-shadow {
        width: 78vw;
        height: 56px;
        bottom: 56px;
      }
      .hint,
      .side {
        display: none;
      }
    }
    @media (max-width: 430px) {
      .book {
        --book-w: min(312px, 84vw, calc((100svh - 142px) * .675));
      }
      
      
      
    }
    @media (max-height: 720px) and (min-width: 761px) {
      .hero {
        padding-top: 50px;
        padding-bottom: 50px;
      }
      .book {
        --book-w: min(360px, 45vw, calc((100svh - 150px) * .675));
      }
    }
      .book {
        --book-w: min(360px, 45vw, calc((100svh - 150px) * .675));
      }
    @media (hover: none), (pointer: coarse) {
      :root {
        --rx: 0deg;
        --ry: 0deg;
        --holo-x: 0%;
        --holo-a: 112deg;
        --holo-o: .40;
      }
      .hint {
        display: none;
      }
    }
    .buy-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s ease;
    }
    .buy-modal.is-open {
      opacity: 1;
      pointer-events: auto;
    }
    .buy-modal__backdrop {
      position: absolute;
      inset: 0;
      background: transparent;
      backdrop-filter: none;
    }
    .buy-modal__panel {
      position: relative;
      z-index: 1;
      width: min(500px, calc(100vw - 40px));
      min-height: 320px;
      padding: 38px 38px 34px;
      background: rgba(255, 255, 255, .96);
      color: #171717;
      border-radius: 18px;
      box-shadow:
        0 30px 90px rgba(0,0,0,.38),
        0 1px 0 rgba(255,255,255,.7) inset;
      transform: translateY(10px) scale(.985);
      transition: transform .28s ease;
    }
    .buy-modal.is-open .buy-modal__panel {
      transform: translateY(0) scale(1);
    }
    .buy-modal__close {
      position: absolute;
      z-index: 30;
      top: 14px;
      right: 16px;
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 50%;
      background: rgba(0,0,0,.055);
      color: #222;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
    }
    .buy-modal__close:hover {
      background: rgba(0,0,0,.10);
    }
    .buy-modal h2 {
      margin: 0 0 14px;
      font-size: 34px;
      line-height: 1.15;
      font-weight: 500;
      letter-spacing: -.02em;
    }
    .buy-modal p {
      margin: 0 0 24px;
      color: rgba(0,0,0,.62);
      font-size: 15px;
      line-height: 1.55;
    }
    .buy-modal__placeholder {
      display: grid;
      place-items: center;
      min-height: 150px;
      border: 1px dashed rgba(0,0,0,.18);
      border-radius: 14px;
      color: rgba(0,0,0,.48);
      font-size: 14px;
      text-align: center;
      padding: 20px;
      background: rgba(0,0,0,.025);
    }
    /* BOOK CTA MATCHES LANGUAGE BUTTONS */
    /* BOOK CTA LIKE ACTIVE LANGUAGE BUTTON */
    /* BOOK CTA PASSIVE, ACTIVE ON HOVER */
    /* BOOK CTA DARK PASSIVE, ACTIVE ON HOVER */
    .book-cta {
      appearance: none;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(45,49,51,.72);
      color: rgba(235,235,230,.55);
      min-width: 150px;
      height: 34px;
      padding: 0 18px;
      border-radius: 999px;
      font: inherit;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: none;
      cursor: pointer;
      position: relative;
      top: -62px;
      z-index: 20;
      pointer-events: auto;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.035),
        0 8px 22px rgba(0,0,0,.10);
      text-decoration: none;
      transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
    }
    .book-cta:hover {
      color: rgba(255,255,250,.96);
      border-color: rgba(255,255,255,.36);
      background: rgba(255,255,255,.08);
      transform: translateY(-1px);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 0 18px rgba(255,255,255,.06);
    }
    .book-cta:focus-visible {
      outline: 1px solid rgba(255,255,255,.42);
      outline-offset: 8px;
    }
    /* BUY MODAL START */
    .buy-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      padding: 24px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity .28s ease,
        visibility .28s ease;
    }
    .buy-modal.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .buy-modal__backdrop {
      position: absolute;
      inset: 0;
      background: transparent;
      backdrop-filter: none;
    }
    .buy-modal__panel {
      position: relative;
      z-index: 1;
      width: min(500px, calc(100vw - 40px));
      min-height: 320px;
      padding: 38px 38px 34px;
      background: rgba(255, 255, 255, .97);
      color: #171717;
      border-radius: 18px;
      box-shadow:
        0 30px 90px rgba(0,0,0,.38),
        0 1px 0 rgba(255,255,255,.7) inset;
      transform: translateY(10px) scale(.985);
      transition: transform .28s ease;
    }
    .buy-modal.is-open .buy-modal__panel {
      transform: translateY(0) scale(1);
    }
    .buy-modal__close {
      position: absolute;
      z-index: 30;
      top: 14px;
      right: 16px;
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 50%;
      background: rgba(0,0,0,.055);
      color: #222;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
    }
    .buy-modal__close:hover {
      background: rgba(0,0,0,.10);
    }
    .buy-modal h2 {
      margin: 0 0 14px;
      font-size: 34px;
      line-height: 1.15;
      font-weight: 500;
      letter-spacing: -.02em;
    }
    .buy-modal p {
      margin: 0 0 24px;
      color: rgba(0,0,0,.62);
      font-size: 15px;
      line-height: 1.55;
    }
    .buy-modal__placeholder {
      display: grid;
      place-items: center;
      min-height: 150px;
      border: 1px dashed rgba(0,0,0,.18);
      border-radius: 14px;
      color: rgba(0,0,0,.48);
      font-size: 14px;
      text-align: center;
      padding: 20px;
      background: rgba(0,0,0,.025);
    }
    /* BUY MODAL END */
    /* LANGUAGE HEADER */
    .language-header {
      position: relative;
      z-index: 60;
      display: flex;
      height: 40px;
      justify-content: center;
      align-items: center;
      padding: 0;
      pointer-events: none;
      background: transparent;
    }
    .language-panel {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      height: 40px;
      min-height: 40px;
      padding: 1px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      background: var(--language-panel-background);
      backdrop-filter: blur(14px);
      box-shadow:
        0 12px 40px rgba(0,0,0,.16),
        0 1px 0 rgba(255,255,255,.06) inset;
      pointer-events: auto;
    }
    .lang-switch__button {
      appearance: none;
      border: 1px solid transparent;
      background: transparent;
      color: rgba(235,235,230,.55);
      min-width: 36px;
      height: 36px;
      padding: 0 8px;
      border-radius: 999px;
      font: inherit;
      font-size: 12px;
      letter-spacing: .08em;
      cursor: pointer;
      transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        transform .22s ease;
    }
    .lang-switch__button:hover {
      color: rgba(245,245,240,.88);
      background: rgba(255,255,255,.055);
      transform: translateY(-1px);
    }
    .lang-switch__button.is-active {
      color: rgba(245,245,240,.94);
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
    }
    /* BOOK ORDER FORM */
    .buy-modal__panel {
      width: min(620px, calc(100vw - 40px));
      height: min(86svh, 980px);
      max-height: calc(100svh - 48px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .buy-modal__panel::-webkit-scrollbar {
      display: none;
    }
    .buy-modal .buy-modal__intro {
      margin-bottom: 0;
      font-size: 18px;
      line-height: 1.5;
    }
    .buy-modal__view[hidden] {
      display: none;
    }
    .buy-modal__view {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .buy-modal__view::-webkit-scrollbar {
      display: none;
    }
    .buy-modal__view--privacy {
      display: flex;
      flex-direction: column;
      background: transparent;
    }
    .privacy-back {
      position: sticky;
      top: 0;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      margin: 0 0 14px;
      padding: 8px 0;
      border: 0;
      background: transparent;
      color: rgba(20,20,20,.72);
      font: inherit;
      font-size: 14px;
      line-height: 1.3;
      cursor: pointer;
    }
    .privacy-back:hover {
      color: rgba(20,20,20,.94);
    }
    .privacy-frame {
      display: block;
      width: 100%;
      flex: 1;
      min-height: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    .book-options {
      display: grid;
      gap: 10px;
      margin: 22px 0 18px;
    }
    .book-option {
      display: block;
      cursor: pointer;
    }
    .book-option.is-hidden {
      display: none !important;
    }
    .book-option input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .book-option__body {
      display: block;
      padding: 14px 15px;
      border-radius: 16px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.035);
      transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
    }
    .book-option input:checked + .book-option__body {
      border-color: rgba(45,112,255,.72);
      background: rgba(45,112,255,.075);
      box-shadow: none;
    }
    .book-option__title {
      display: block;
      font-size: 18px;
      line-height: 1.3;
      letter-spacing: .04em;
      color: rgba(20,20,20,.88);
      margin-bottom: 4px;
    }
    .book-option__text {
      display: block;
      font-size: 14px;
      line-height: 1.5;
      color: rgba(20,20,20,.56);
    }
    .book-order-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 4px;
    }
    .form-honeypot {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .book-field {
      display: grid;
      gap: 6px;
      font-size: 14px;
      line-height: 1.4;
      color: rgba(20,20,20,.62);
    }
    .book-field--full {
      grid-column: 1 / -1;
    }
    .book-field input,
    .book-field textarea {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid rgba(0,0,0,.12);
      border-radius: 12px;
      background: rgba(255,255,255,.78);
      color: rgba(20,20,20,.86);
      font: inherit;
      font-size: 16px;
      line-height: 1.4;
      padding: 11px 12px;
      outline: none;
      resize: vertical;
      transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
    }
    .book-field input::placeholder,
    .book-field textarea::placeholder {
      font-size: 16px;
      opacity: 1;
    }
    .book-field input:focus,
    .book-field textarea:focus {
      border-color: rgba(0,0,0,.32);
      background: rgba(255,255,255,.95);
      box-shadow: 0 0 0 3px rgba(0,0,0,.05);
    }
    .book-order-summary,
    .book-payment {
      grid-column: 1 / -1;
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 14px;
      background: rgba(255,255,255,.48);
      padding: 12px;
      color: rgba(20,20,20,.74);
    }
    .book-order-summary h3,
    .book-payment legend {
      margin: 0 0 9px;
      padding: 0;
      color: rgba(20,20,20,.82);
      font-size: 16px;
      line-height: 1.3;
      font-weight: 600;
    }
    .buy-modal .book-summary-format {
      margin: 0 0 8px;
      color: rgba(20,20,20,.86);
      font-size: 17px;
      line-height: 1.35;
      font-weight: 600;
    }
    .book-order-summary dl {
      display: grid;
      gap: 5px;
      margin: 0;
      font-size: 14px;
      line-height: 1.45;
    }
    .book-order-summary dl div {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }
    .book-order-summary dt,
    .book-order-summary dd {
      margin: 0;
    }
    .book-order-summary dd {
      color: rgba(20,20,20,.86);
      text-align: right;
    }
    .book-summary-discount {
      color: rgba(20,20,20,.78);
    }
    .book-summary-discount[hidden] {
      display: none;
    }
    .book-summary-rate[hidden],
    .book-summary-payment-note[hidden] {
      display: none;
    }
    .book-summary-discount dd {
      color: rgba(20,20,20,.92);
      font-weight: 600;
    }
    .book-promo-message {
      display: block;
      min-height: 18px;
      color: rgba(20,20,20,.60);
      font-size: 14px;
      line-height: 1.35;
    }
    .book-promo-message.is-error {
      color: #9d3030;
    }
    .book-promo-message.is-ok {
      color: #28713d;
    }
    .book-order-summary .order-total {
      align-items: baseline;
      margin-top: 4px;
      padding-top: 7px;
      border-top: 1px solid rgba(0,0,0,.10);
    }
    .order-total-label {
      color: rgba(20,20,20,.88);
      font-size: 19px;
      line-height: 1.2;
      font-weight: 700;
    }
    .book-order-summary .order-total-price {
      color: rgba(20,20,20,.94);
      font-size: 22px;
      line-height: 1.15;
      font-weight: 800;
    }
    .buy-modal .book-summary-payment-note {
      margin: 9px 0 0;
      color: rgba(20,20,20,.60);
      font-size: 12px;
      line-height: 1.4;
    }
    .book-payment {
      display: grid;
      gap: 8px;
      margin: 0;
    }
    .book-payment label {
      display: flex;
      gap: 9px;
      align-items: center;
      font-size: 14px;
      line-height: 1.45;
    }
    .book-payment input {
      margin: 0;
    }
    .book-payment p {
      margin: 2px 0 0;
      color: rgba(20,20,20,.52);
      font-size: 14px;
      line-height: 1.45;
    }
    .book-consent {
      grid-column: 1 / -1;
      display: flex;
      gap: 9px;
      align-items: flex-start;
      font-size: 14px;
      line-height: 1.45;
      color: rgba(20,20,20,.52);
      margin-top: 2px;
    }
    .book-consent input {
      margin-top: 2px;
    }
    .privacy-link {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .privacy-link:hover {
      opacity: 0.75;
    }
    .book-submit {
      grid-column: 1 / -1;
      appearance: none;
      border: 1px solid rgba(0,0,0,.16);
      background: rgba(24,26,28,.88);
      color: rgba(255,255,250,.92);
      height: 42px;
      border-radius: 999px;
      font: inherit;
      font-size: 17px;
      letter-spacing: .08em;
      cursor: pointer;
      transition: background .22s ease, border-color .22s ease, transform .22s ease;
    }
    .book-submit:hover {
      background: rgba(0,0,0,.92);
      border-color: rgba(0,0,0,.28);
      transform: translateY(-1px);
    }
    .book-form-message {
      grid-column: 1 / -1;
      min-height: 16px;
      margin: 0;
      font-size: 14px;
      line-height: 1.45;
      color: rgba(20,20,20,.62);
      text-align: center;
    }
    .book-form-message.is-error {
      color: rgba(120,28,28,.82);
    }
    .book-form-message.is-ok {
      color: rgba(28,90,52,.82);
    }
    .book-order-note {
      grid-column: 1 / -1;
      margin: 0;
      font-size: 14px;
      line-height: 1.45;
      color: rgba(20,20,20,.48);
      text-align: center;
    }
    /* ORDER FORM — FIGMA 333:3372 */
    .buy-modal .buy-modal__panel {
      width: 620px;
      max-width: calc(100vw - 32px);
      height: auto;
      min-height: 0;
      max-height: calc(100svh - 48px);
      padding: 60px 46px 48px;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;
      background: #000;
      color: #fff;
      border-radius: 30px;
      box-shadow: 0 30px 90px rgba(0,0,0,.48);
    }
    .buy-modal .buy-modal__view[data-order-view] {
      flex: 0 0 auto;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: auto;
      overflow: visible;
      font-family: Inter, sans-serif;
    }
    .buy-modal .buy-modal__close {
      top: 24px;
      right: 24px;
      width: 25px;
      height: 25px;
      padding: 0;
      background: #f5f5f5;
      color: #171717;
      font-size: 18px;
    }
    .buy-modal .buy-modal__close:hover {
      background: #fff;
    }
    .buy-modal__view[data-order-view] h2 {
      margin: 0;
      color: #fff;
      font-family: Inter, sans-serif;
      font-size: 24px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: 0;
    }
    .buy-modal__view[data-order-view] .buy-modal__intro {
      width: 100%;
      max-width: 100%;
      margin: 40px 0 0;
      color: #fff;
      font-family: Inter, sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: normal;
    }
    .buy-modal__view[data-order-view] .book-options {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      gap: 12px;
      margin: 30px 0 36px;
    }
    .buy-modal__view[data-order-view] .book-option__body {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: 90px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      padding: 14px 24px 14px 30px;
      border: 1px solid #3a3a3a;
      border-radius: 15px;
      background: #111;
    }
    .buy-modal__view[data-order-view] .book-option input:checked + .book-option__body {
      border-color: #5485ff;
      background: #071333;
      box-shadow: none;
    }
    .buy-modal__view[data-order-view] .book-option input:focus-visible + .book-option__body {
      outline: 2px solid #5485ff;
      outline-offset: 2px;
    }
    .buy-modal__view[data-order-view] .book-option__title {
      margin: 0;
      color: #fff;
      font-family: Inter, sans-serif;
      font-size: 18px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: 0;
    }
    .buy-modal__view[data-order-view] .book-option__text {
      min-width: 0;
      margin: 0;
      color: rgba(255,255,255,.6);
      font-family: Inter, sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: normal;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .buy-modal__view[data-order-view] .book-order-form {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 0;
    }
    .buy-modal__view[data-order-view] .book-field {
      min-width: 0;
      gap: 8px;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.25;
    }
    .buy-modal__view[data-order-view] #orderForm > .book-field {
      margin: 0 0 18px;
    }
    .buy-modal__view[data-order-view] .book-field input,
    .buy-modal__view[data-order-view] .book-field textarea {
      max-width: 100%;
      min-width: 0;
      border: 1px solid #3a3a3a;
      border-radius: 10px;
      background: #111;
      color: #fff;
      font-size: 16px;
      line-height: 1.4;
      padding: 10px 14px;
      box-shadow: none;
    }
    .buy-modal__view[data-order-view] .book-field input {
      height: 44px;
    }
    .buy-modal__view[data-order-view] .book-field textarea {
      min-height: 120px;
    }
    .buy-modal__view[data-order-view] .book-field input::placeholder,
    .buy-modal__view[data-order-view] .book-field textarea::placeholder {
      color: rgba(255,255,255,.45);
    }
    .buy-modal__view[data-order-view] .book-field input:focus,
    .buy-modal__view[data-order-view] .book-field textarea:focus {
      border-color: #5485ff;
      background: #111;
      box-shadow: 0 0 0 2px rgba(84,133,255,.18);
    }
    .buy-modal__view[data-order-view] input:required:invalid,
    .buy-modal__view[data-order-view] textarea:required:invalid {
      border-color: #820101;
    }
    .buy-modal__view[data-order-view] .book-order-form input[name="promoCode"] {
      border-color: #108532;
    }
    .buy-modal__view[data-order-view] #shippingAddressFields {
      grid-template-columns: 1fr;
      gap: 18px;
      margin: 0 0 18px;
    }
    .buy-modal__view[data-order-view] .book-order-form > .book-field:has(input[name="promoCode"]) {
      margin-bottom: 40px;
    }
    .buy-modal__view[data-order-view] .book-order-summary {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      border: 1px solid #fff;
      border-radius: 10px;
      background: #111;
      padding: 30px;
      color: rgba(255,255,255,.6);
      margin: 0 0 45px;
    }
    .buy-modal__view[data-order-view] .book-order-summary h3 {
      margin-bottom: 20px;
      color: rgba(255,255,255,.6);
      font-size: 20px;
      font-weight: 400;
    }
    .buy-modal__view[data-order-view] .book-summary-format {
      margin-bottom: 28px;
      color: #fff;
      font-size: 24px;
      font-weight: 500;
      line-height: 1.25;
    }
    .buy-modal__view[data-order-view] .book-order-summary dl {
      gap: 12px;
      color: rgba(255,255,255,.6);
      font-size: 20px;
      line-height: 1.35;
    }
    .buy-modal__view[data-order-view] .book-order-summary dd {
      min-width: 0;
      color: rgba(255,255,255,.6);
      overflow-wrap: anywhere;
    }
    .buy-modal__view[data-order-view] .book-order-summary .order-total {
      margin-top: 16px;
      padding-top: 18px;
      border-top-color: rgba(255,255,255,.25);
    }
    .buy-modal__view[data-order-view] .order-total-label,
    .buy-modal__view[data-order-view] .book-order-summary .order-total-price {
      color: #fff;
      font-size: 24px;
      font-weight: 500;
    }
    .buy-modal__view[data-order-view] .book-summary-payment-note {
      color: rgba(255,255,255,.6);
    }
    .buy-modal__view[data-order-view] .book-promo-message {
      color: rgba(255,255,255,.6);
    }
    .buy-modal__view[data-order-view] .book-payment {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      display: grid;
      gap: 0;
      padding: 0;
      margin: 0 0 50px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #fff;
    }
    .buy-modal__view[data-order-view] .book-payment legend {
      margin: 0 0 20px;
      color: #fff;
      font-size: 20px;
      font-weight: 400;
    }
    .buy-modal__view[data-order-view] .book-payment label {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      position: relative;
      min-height: 90px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 0;
      padding: 14px 31px;
      border: 1px solid #3a3a3a;
      border-radius: 15px;
      background: #111;
      color: #fff;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.25;
      cursor: pointer;
    }
    .buy-modal__view[data-order-view] .book-payment label + label {
      margin-top: 12px;
    }
    .buy-modal__view[data-order-view] .book-payment-option__text {
      display: block;
      max-width: 100%;
      margin-top: 6px;
      color: rgba(255, 255, 255, 0.6);
      font-family: Inter, sans-serif;
      font-size: 12px;
      font-weight: 400;
      line-height: normal;
      overflow-wrap: anywhere;
    }
    .buy-modal__view[data-order-view] .book-payment input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .buy-modal__view[data-order-view] .book-payment label:has(input:checked) {
      border-color: #5485ff;
      background: #071333;
    }
    .buy-modal__view[data-order-view] .book-payment label:has(input:focus-visible) {
      outline: 2px solid #5485ff;
      outline-offset: 2px;
    }
    .buy-modal__view[data-order-view] .book-payment p {
      margin: 0;
      color: rgba(255,255,255,.6);
      font-size: 14px;
      line-height: 1.35;
    }
    .buy-modal__view[data-order-view] .book-consent {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      gap: 12px;
      margin: 0 0 50px;
      color: rgba(255,255,255,.4);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.45;
    }
    .buy-modal__view[data-order-view] .book-consent input {
      appearance: none;
      width: 50px;
      height: 22px;
      margin: 0;
      border: 0;
      border-radius: 20px;
      background: #2a2a2a;
      cursor: pointer;
      position: relative;
    }
    .buy-modal__view[data-order-view] .book-consent input::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #000;
      transition: transform .2s ease, background .2s ease;
    }
    .buy-modal__view[data-order-view] .book-consent input:checked {
      background: #5485ff;
    }
    .buy-modal__view[data-order-view] .book-consent input:checked::after {
      transform: translateX(28px);
      background: #fff;
    }
    .buy-modal__view[data-order-view] .book-consent input:focus-visible {
      outline: 2px solid #5485ff;
      outline-offset: 2px;
    }
    .buy-modal__view[data-order-view] .book-consent input {
      flex: 0 0 auto;
    }
    .buy-modal__view[data-order-view] .book-submit {
      width: 100%;
      max-width: 100%;
      height: 40px;
      margin-bottom: 18px;
      border: 1px solid #fff;
      border-radius: 40px;
      background: transparent;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0;
    }
    .buy-modal__view[data-order-view] .book-submit:hover,
    .buy-modal__view[data-order-view] .book-submit:focus-visible {
      border-color: #5485ff;
      background: rgba(84,133,255,.12);
      transform: none;
    }
    .buy-modal__view[data-order-view] .book-form-message,
    .buy-modal__view[data-order-view] .book-order-note {
      color: rgba(255,255,255,.6);
    }
    .buy-modal__view[data-order-view] .book-form-message:empty {
      display: none;
    }
    @media (max-width: 560px) {
      .buy-modal {
        padding: 12px;
      }
      .buy-modal__view[data-order-view] .book-order-form {
        grid-template-columns: 1fr;
      }
      .buy-modal .buy-modal__panel {
        width: min(620px, calc(100vw - 24px));
        height: auto;
        max-height: calc(100svh - 24px);
        padding: 38px 24px 32px;
        border-radius: 22px;
      }
      .buy-modal__view[data-order-view] .book-option__body,
      .buy-modal__view[data-order-view] .book-payment label {
        min-height: 84px;
        padding-right: 22px;
        padding-left: 22px;
      }
      .buy-modal__view[data-order-view] .book-order-summary {
        padding: 24px;
      }
      .buy-modal .privacy-frame {
        min-height: 0;
      }
    }
.book-cta {
        top: 0;
      }
    /* MOBILE BOTTOM LIGHT FIX */
    @media (max-width: 760px) {
      .floor-light,
      .floor-shadow {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
      }
    }
    /* MOBILE CTA NEAR BOOK FIX */
    @media (max-width: 760px) {
      .hero {
        padding-bottom: 0;
      }
      .hint {
        display: flex !important;
        position: relative;
        z-index: 60;
        justify-content: center;
        align-items: center;
        margin-top: -220px;
        pointer-events: auto;
      }
      .side {
        display: none;
      }
      .book-cta {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        top: 0;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
      }
    }
    @media (hover: none), (pointer: coarse) {
      .hint {
        display: flex !important;
      }
    }
    @media (max-width: 420px) {
      .hint {
        margin-top: -200px;
      }
    }
    /* FINAL MOBILE BOOK SCALE AND CTA DISTANCE FIX */
    @media (max-width: 760px) {
      body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
      }
      .hero {
        padding-bottom: 0 !important;
      }
      .book {
        --book-w: min(430px, 88vw, calc((100svh - 260px) * .675)) !important;
        min-width: 260px !important;
        font-size: calc(var(--book-w) / 390 * 16) !important;
      }
      .hint {
        display: flex !important;
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        z-index: 60 !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 60px !important;
        pointer-events: auto !important;
      }
      .book-cta {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        top: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
      }
    }
    @media (max-width: 430px) {
      .book {
        --book-w: min(390px, 90vw, calc((100svh - 260px) * .675)) !important;
        min-width: 270px !important;
        font-size: calc(var(--book-w) / 390 * 16) !important;
      }
      .hint {
        margin-top: 60px !important;
      }
    }
    @media (hover: none), (pointer: coarse) {
      .hint {
        display: flex !important;
      }
    }
    /* GLOBAL CTA STRICTLY UNDER BOOK FIX */
    .hint {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      top: auto !important;
      transform: none !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      width: 100% !important;
      margin-top: 60px !important;
      z-index: 60 !important;
      pointer-events: auto !important;
      text-align: center;
    }
    .book-cta {
      position: relative !important;
      top: 0 !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      transform: none !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    .book-cta:hover {
      transform: translateY(-1px) !important;
    }
    @media (max-width: 760px) {
      .hint {
        margin-top: 60px !important;
      }
      .book-cta {
        top: 0 !important;
      }
    }
    @media (max-width: 430px) {
      .hint {
        margin-top: 60px !important;
      }
    }
    @media (hover: none), (pointer: coarse) {
      .hint {
        display: flex !important;
      }
    }
    /* TRUE CTA UNDER BOOK LAYOUT FIX */
    .hero {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      padding: var(--hero-stack-gap) 0 0;
    }
    .hero > .hint {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      transform: none !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      width: 100% !important;
      margin-top: var(--hero-stack-gap) !important;
      z-index: 60 !important;
      pointer-events: auto !important;
      text-align: center !important;
    }
    .hero > .hint .book-cta {
      position: relative !important;
      top: 0 !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      height: 40px;
      background: var(--language-panel-background);
    }
    .hero > .hint .book-cta:hover {
      transform: translateY(-1px) !important;
    }
    @media (max-width: 760px) {
      .hero > .hint {
        margin-top: var(--hero-stack-gap) !important;
      }
    }
    @media (hover: none), (pointer: coarse) {
      .hero > .hint {
        display: flex !important;
      }
    }
    /* GLOBAL BOTTOM LIGHT REMOVED */
    .floor-light,
    .floor-shadow {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }
    @keyframes heroBackgroundReveal {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    .book {
      z-index: 4;
    }
    @media (max-width: 760px) {
      .page::before {
        background:
          radial-gradient(
            ellipse 82% 64% at 50% 46%,
            rgba(255, 255, 255, .96) 0%,
            rgba(255, 255, 255, .90) 14%,
            rgba(255, 255, 255, .70) 28%,
            rgba(255, 255, 255, .42) 46%,
            rgba(255, 255, 255, .18) 65%,
            rgba(255, 255, 255, .06) 80%,
            rgba(255, 255, 255, 0) 100%
          ),
          radial-gradient(
            ellipse 118% 96% at 50% 48%,
            rgba(215, 217, 218, .74) 0%,
            rgba(194, 197, 198, .62) 30%,
            rgba(164, 168, 170, .46) 52%,
            rgba(126, 131, 134, .28) 70%,
            rgba(83, 89, 92, .10) 88%,
            rgba(52, 57, 61, 0) 100%
          ),
          radial-gradient(
            ellipse at center,
            rgba(34, 34, 34, 0) 30%,
            rgba(34, 34, 34, .06) 45%,
            rgba(34, 34, 34, .18) 62%,
            rgba(34, 34, 34, .36) 80%,
            rgba(34, 34, 34, .58) 100%
          );
        opacity: 0;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .page::before {
        animation: none;
        opacity: 1;
      }
      .hero-shadow-video {
        display: none;
      }
    }