:root {
      --bg: #07080b;
      --bg-2: #0d0f16;
      --ink: #f6f0e7;
      --muted: rgba(246, 240, 231, .62);
      --faint: rgba(246, 240, 231, .38);
      --line: rgba(246, 240, 231, .14);
      --line-strong: rgba(246, 240, 231, .22);
      --panel: rgba(255, 255, 255, .072);
      --panel-2: rgba(255, 255, 255, .11);
      --white: #f4f1ea;
      --paper: #f7f3ea;
      --paper-2: #e7dfd2;
      --black: #0a0b0f;
      --red: #ef513f;
      --blue: #6aa7ff;
      --amber: #f3bd67;
      --green: #87d8bd;
      --shadow: 0 38px 120px rgba(0, 0, 0, .46);
      --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      --font-mono: "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
      --ease: cubic-bezier(.2, .8, .2, 1);
      --snap-offset: 0px;
    }

    * { box-sizing: border-box; }
    html {
      scroll-behavior: smooth;
      scroll-snap-type: y mandatory;
      overscroll-behavior-y: contain;
      scroll-padding-top: 0px;
      background: var(--bg);
    }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font-sans);
      color: var(--ink);
      background:
        radial-gradient(circle at 18% 8%, rgba(239, 81, 63, .24), transparent 30vw),
        radial-gradient(circle at 86% 12%, rgba(106, 167, 255, .22), transparent 32vw),
        radial-gradient(circle at 52% 100%, rgba(243, 189, 103, .12), transparent 40vw),
        linear-gradient(145deg, #050507 0%, #0c0e14 42%, #050609 100%);
      overflow-x: hidden;
      cursor: none;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .44;
      mix-blend-mode: overlay;
      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='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
    }
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent 0 49.7%, rgba(255,255,255,.027) 50%, transparent 50.3% 100%),
        linear-gradient(0deg, transparent 0 49.7%, rgba(255,255,255,.020) 50%, transparent 50.3% 100%);
      background-size: 88px 88px;
      mask-image: radial-gradient(circle at 50% 12%, black 0%, transparent 70%);
      opacity: .72;
    }

    a { color: inherit; text-decoration: none; cursor: none; }
    button { font: inherit; color: inherit; cursor: none; }
    ::selection { background: rgba(239,81,63,.35); }

    #water-cursor {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 10000;
    }
    .cursor-core {
      position: fixed;
      left: 0;
      top: 0;
      width: 9px;
      height: 9px;
      border-radius: 999px;
      transform: translate(-50%, -50%);
      background: rgba(255,255,255,.92);
      mix-blend-mode: difference;
      opacity: 0;
      pointer-events: none;
      z-index: 10001;
      transition: opacity .18s ease, width .22s var(--ease), height .22s var(--ease), background .22s ease;
    }
    .cursor-core.active { opacity: 1; }
    .cursor-core.mode {
      width: 64px;
      height: 64px;
      background: rgba(255,255,255,.82);
    }
    .cursor-label {
      position: fixed;
      left: 0;
      top: 0;
      transform: translate(-50%, -50%);
      color: #07080b;
      font: 800 10px/1 var(--font-mono);
      letter-spacing: .16em;
      pointer-events: none;
      z-index: 10002;
      opacity: 0;
      transition: opacity .16s ease;
    }
    .cursor-label.active { opacity: 1; }

    .page-wipe {
      position: fixed;
      inset: 0;
      z-index: 8500;
      pointer-events: none;
      background: var(--paper);
      clip-path: circle(0 at var(--wx, 50%) var(--wy, 50%));
    }
    .page-wipe.active { animation: wipe .92s var(--ease) both; }
    @keyframes wipe {
      0% { clip-path: circle(0 at var(--wx) var(--wy)); opacity: 1; }
      46% { clip-path: circle(150vmax at var(--wx) var(--wy)); opacity: 1; }
      100% { clip-path: circle(150vmax at var(--wx) var(--wy)); opacity: 0; }
    }

    .topbar {
      position: fixed;
      left: 50%;
      top: 22px;
      transform: translateX(-50%);
      width: min(1520px, calc(100vw - 56px));
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 2px;
      background: transparent;
      border: 0;
      box-shadow: none;
      pointer-events: none;
    }
    .brand, .nav { pointer-events: auto; }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -.02em;
      color: rgba(255,255,255,.88);
    }
    .brand-mark {
      width: 24px;
      height: 24px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
      transform: rotate(-11deg);
      filter: drop-shadow(0 18px 34px rgba(239,81,63,.24));
    }
    .brand-mark span { border-radius: 999px; display: block; }
    .brand-mark span:nth-child(1) { grid-row: span 2; background: var(--red); }
    .brand-mark span:nth-child(2) { background: var(--blue); }
    .brand-mark span:nth-child(3) { background: #111216; border: 1px solid rgba(255,255,255,.26); }
    .nav {
      display: flex;
      gap: 2px;
      padding: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.06);
      backdrop-filter: blur(12px);
    }
    .nav a {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      color: rgba(255,255,255,.58);
      font-size: 13px;
      transition: color .25s ease, background .25s ease;
    }
    .nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
    .page-dots {
      position: fixed;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1200;
      display: grid;
      gap: 12px;
      pointer-events: auto;
    }
    .page-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.34);
      background: rgba(255,255,255,.1);
      transition: width .35s var(--ease), border-color .35s ease, background .35s ease, transform .35s var(--ease);
    }
    .page-dot.active { width: 26px; border-radius: 999px; background: rgba(255,255,255,.76); border-color: rgba(255,255,255,.86); }
    .page-dot:hover { transform: scale(1.25); }

    .page-shell {
      position: relative;
      z-index: 1;
      width: min(1520px, calc(100vw - 56px));
      margin: 0 auto;
    }
    .snap-section {
      min-height: 100vh;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      display: grid;
      align-items: center;
      padding: 108px 0 74px;
      position: relative;
      isolation: isolate;
    }
    .snap-section::before {
      content: attr(data-section);
      position: absolute;
      right: max(-22px, -1vw);
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
      transform-origin: center;
      font: 900 clamp(68px, 10vw, 160px)/1 var(--font-mono);
      letter-spacing: -.12em;
      color: rgba(255,255,255,.035);
      pointer-events: none;
      z-index: -1;
      opacity: .3;
      transition: opacity .8s var(--ease), transform .8s var(--ease);
    }
    .snap-section.active-section::before { opacity: 1; transform: translateY(-50%) rotate(90deg) scale(1.04); }
    .snap-section::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.11), transparent);
      pointer-events: none;
    }
    .snap-section.compact { min-height: 92vh; }

    .reveal {
      opacity: 0;
      transform: translateY(34px);
      filter: blur(10px);
      transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
    }
    .reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); }
    .snap-section:not(.active-section) .reveal.in { opacity: .42; transform: translateY(18px) scale(.985); filter: blur(3px); }
    .snap-section.active-section .reveal.in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    .reveal .stagger { opacity: 0; transform: translateY(18px); transition: .75s var(--ease); }
    .reveal.in .stagger { opacity: 1; transform: translateY(0); }
    .reveal.in .stagger:nth-child(1) { transition-delay: .08s; }
    .reveal.in .stagger:nth-child(2) { transition-delay: .16s; }
    .reveal.in .stagger:nth-child(3) { transition-delay: .24s; }
    .reveal.in .stagger:nth-child(4) { transition-delay: .32s; }

    .hero-grid {
      display: grid;
      grid-template-columns: .92fr 1.08fr;
      gap: clamp(28px, 5vw, 64px);
      align-items: center;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      color: rgba(255,255,255,.67);
      font: 800 12px/1 var(--font-mono);
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 28px rgba(239,81,63,.92);
    }
    h1 {
      margin: 22px 0 0;
      font-size: clamp(48px, 8.3vw, 112px);
      line-height: .9;
      letter-spacing: -.08em;
      font-weight: 790;
      max-width: 860px;
    }
    h1 .dim { color: rgba(255,255,255,.36); }
    h1 .accent {
      background: linear-gradient(108deg, #fff 0%, #fee5da 30%, #fa604b 62%, #82b4ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .hero-copy {
      margin: 28px 0 0;
      max-width: 630px;
      color: rgba(255,255,255,.66);
      font-size: clamp(17px, 1.72vw, 22px);
      line-height: 1.78;
      letter-spacing: -.025em;
    }
    .hero-copy strong { color: rgba(255,255,255,.94); }
    .hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 13px; }
    .btn {
      min-height: 48px;
      padding: 0 18px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: rgba(255,255,255,.075);
      backdrop-filter: blur(16px);
      color: rgba(255,255,255,.88);
      transition: transform .25s var(--ease), border-color .25s ease, background .25s ease;
    }
    .btn:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); }
    .btn.primary { background: linear-gradient(135deg, rgba(239,81,63,.96), rgba(239,81,63,.58)); box-shadow: 0 20px 70px rgba(239,81,63,.22); }

    .hero-device {
      position: relative;
      min-height: 620px;
      border-radius: 38px;
      border: 1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
        rgba(255,255,255,.045);
      box-shadow: var(--shadow);
      backdrop-filter: blur(24px) saturate(135%);
      overflow: hidden;
      isolation: isolate;
    }
    .hero-device::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: 37px;
      background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 40%), rgba(255,255,255,.18), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,.1), transparent 34%);
      pointer-events: none;
      opacity: .9;
    }
    .hero-device::after {
      content: "";
      position: absolute;
      inset: -40%;
      z-index: -1;
      background: conic-gradient(from 210deg, transparent, rgba(106,167,255,.18), transparent, rgba(239,81,63,.16), transparent);
      filter: blur(32px);
      animation: slowSpin 20s linear infinite;
      opacity: .65;
    }
    @keyframes slowSpin { to { transform: rotate(360deg); } }

    .device-inner {
      position: absolute;
      inset: 36px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 24px;
    }
    .device-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: rgba(255,255,255,.45);
      font: 800 11px/1 var(--font-mono);
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .device-lights { display: flex; gap: 7px; }
    .device-lights span { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.22); }
    .device-lights span:nth-child(1) { background: var(--red); }
    .device-lights span:nth-child(2) { background: var(--amber); }
    .device-lights span:nth-child(3) { background: var(--blue); }

    .transformation-board {
      position: relative;
      min-height: 420px;
      border-radius: 30px;
      border: 1px solid rgba(255,255,255,.1);
      background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.026) 1px, transparent 1px),
        rgba(255,255,255,.025);
      background-size: 38px 38px;
      overflow: hidden;
    }
    .board-line {
      position: absolute;
      left: 12%;
      right: 12%;
      top: 52%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
    }
    .board-line::after {
      content: "";
      position: absolute;
      top: -2px;
      left: 0;
      width: 90px;
      height: 5px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, var(--red), var(--blue), transparent);
      filter: blur(.3px);
      animation: pulseLine 4.6s var(--ease) infinite;
    }
    @keyframes pulseLine { 0% { transform: translateX(0); opacity: 0; } 18% { opacity: 1; } 74% { opacity: 1; } 100% { transform: translateX(430px); opacity: 0; } }
    .symbol {
      position: absolute;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.07);
      backdrop-filter: blur(16px);
      border-radius: 28px;
      box-shadow: 0 24px 80px rgba(0,0,0,.24);
      transition: transform .35s var(--ease), background .35s ease, border-color .35s ease;
    }
    .symbol:hover { transform: translateY(-7px); background: rgba(255,255,255,.105); border-color: rgba(255,255,255,.26); }
    .symbol small { color: rgba(255,255,255,.44); font: 800 10px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
    .symbol b { display: block; margin-top: 12px; color: rgba(255,255,255,.9); font-size: 19px; letter-spacing: -.03em; }
    .s-human { left: 34px; top: 48px; width: 164px; padding: 18px; }
    .s-rule { left: 50%; top: 40%; width: 178px; padding: 18px; transform: translate(-50%, -50%); }
    .s-rule:hover { transform: translate(-50%, calc(-50% - 7px)); }
    .s-output { right: 34px; bottom: 50px; width: 190px; padding: 18px; }
    .big-a {
      position: absolute;
      left: 50%;
      bottom: 28px;
      transform: translateX(-50%);
      width: 112px;
      height: 142px;
      opacity: .9;
    }
    .big-a::before, .big-a::after {
      content: "";
      position: absolute;
      bottom: 0;
      border-radius: 999px;
      transform-origin: bottom center;
      box-shadow: 0 28px 80px rgba(0,0,0,.18);
    }
    .big-a::before { width: 38px; height: 138px; left: 20px; background: var(--red); transform: rotate(16deg); }
    .big-a::after { width: 32px; height: 106px; right: 22px; background: var(--blue); transform: rotate(-17deg); }
    .micro-caption {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      border-top: 1px solid rgba(255,255,255,.1);
      padding-top: 20px;
    }
    .micro-caption p { margin: 0; color: rgba(255,255,255,.61); max-width: 430px; line-height: 1.7; font-size: 14px; }
    .micro-caption code { color: rgba(255,255,255,.42); font-family: var(--font-mono); letter-spacing: .06em; font-size: 12px; }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 30px;
    }
    .kicker { color: var(--red); font: 900 12px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }
    h2 { margin: 0; font-size: clamp(36px, 5.4vw, 72px); line-height: .96; letter-spacing: -.065em; }
    .section-note { margin: 0; max-width: 420px; color: rgba(255,255,255,.55); line-height: 1.68; font-size: 15px; }

    .case-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
      perspective: 1000px;
    }
    .case-card {
      position: relative;
      min-height: 326px;
      grid-column: span 6;
      padding: 0;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 32px;
      background: rgba(255,255,255,.068);
      backdrop-filter: blur(22px) saturate(140%);
      overflow: hidden;
      color: var(--ink);
      transition: transform .52s var(--ease), border-color .42s ease, box-shadow .42s ease, background .52s var(--ease), color .45s ease, filter .52s ease;
      transform: translateY(0) rotateX(0deg);
      box-shadow: 0 24px 90px rgba(0,0,0,.22);
    }
    .case-card:nth-child(1) { grid-column: span 7; }
    .case-card:nth-child(2) { grid-column: span 5; }
    .case-card:nth-child(5) { grid-column: span 12; min-height: 260px; }
    .case-card::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .85;
      background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.16), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
      transition: opacity .35s ease;
    }
    .case-card::after {
      content: "";
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 22px;
      height: 1px;
      background: linear-gradient(90deg, rgba(239,81,63,.72), transparent 45%, rgba(106,167,255,.62));
      opacity: .34;
      transform: scaleX(.72);
      transform-origin: left;
      transition: transform .45s var(--ease), opacity .45s ease;
    }
    .case-card:hover {
      transform: translateY(-10px) rotateX(1.4deg);
      border-color: rgba(255,255,255,.26);
      box-shadow: 0 38px 130px rgba(0,0,0,.36);
      background: rgba(255,255,255,.095);
    }
    .case-card:hover::after { opacity: .8; transform: scaleX(1); }
    .case-card.is-opening {
      background: var(--paper);
      color: var(--black);
      transform: translateY(-14px) scale(1.018);
      border-color: rgba(255,255,255,.78);
      box-shadow: 0 44px 150px rgba(255,255,255,.12), 0 28px 110px rgba(0,0,0,.48);
      filter: saturate(1.08);
    }
    .case-card.is-opening::before { opacity: 0; }
    .case-card.is-opening .case-kicker,
    .case-card.is-opening .case-effect,
    .case-card.is-opening .case-tags span { color: rgba(10,11,15,.62); border-color: rgba(10,11,15,.13); background: rgba(10,11,15,.04); }
    .case-card.is-opening .case-top { border-color: rgba(10,11,15,.12); }
    .case-card.is-opening .case-title { color: #0a0b0f; }
    .case-card.is-opening .case-open { background: #0a0b0f; color: #fff; border-color: #0a0b0f; }
    .case-inner {
      position: relative;
      z-index: 2;
      min-height: inherit;
      display: grid;
      grid-template-rows: auto 1fr auto;
      padding: 24px;
    }
    .case-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255,255,255,.09);
      transition: border-color .45s ease;
    }
    .case-no { font: 900 13px/1 var(--font-mono); letter-spacing: .12em; color: rgba(255,255,255,.44); }
    .case-kicker { color: rgba(255,255,255,.48); font: 800 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; transition: color .45s ease; }
    .case-main { align-self: center; padding: 26px 0 22px; }
    .case-title { margin: 0; font-size: clamp(28px, 3.5vw, 48px); line-height: 1.02; letter-spacing: -.055em; max-width: 560px; transition: color .45s ease; }
    .case-effect { margin: 18px 0 0; max-width: 560px; color: rgba(255,255,255,.64); line-height: 1.72; font-size: 15px; transition: color .45s ease; }
    .case-foot { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
    .case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .case-tags span { display: inline-flex; padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: rgba(255,255,255,.48); background: rgba(255,255,255,.035); font-size: 12px; transition: .45s ease; }
    .case-open { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.78); background: rgba(255,255,255,.05); transition: transform .35s var(--ease), background .35s ease, color .35s ease, border-color .35s ease, width .35s var(--ease), border-radius .35s var(--ease); }
    .case-card:hover .case-open { transform: translateX(6px); background: rgba(255,255,255,.12); }

    .method-layout {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 18px;
    }
    .method-quote, .method-system {
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 34px;
      background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
      backdrop-filter: blur(22px);
      box-shadow: 0 24px 90px rgba(0,0,0,.22);
      padding: 32px;
      overflow: hidden;
    }
    .method-quote p { margin: 0; font-size: clamp(27px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.06em; }
    .method-quote span { display: block; margin-top: 24px; color: rgba(255,255,255,.56); line-height: 1.75; }
    .logic-row { display: grid; grid-template-columns: 86px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .logic-row:last-child { border-bottom: 0; }
    .logic-row b { color: rgba(255,255,255,.9); }
    .logic-row p { margin: 0; color: rgba(255,255,255,.58); line-height: 1.65; }

    .contact-card {
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 44px;
      background:
        radial-gradient(circle at 82% 22%, rgba(239,81,63,.16), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
      backdrop-filter: blur(22px);
      box-shadow: var(--shadow);
      padding: clamp(34px, 7vw, 76px);
    }
    .contact-card h2 { max-width: 860px; }
    .contact-card p { margin: 24px 0 0; max-width: 720px; color: rgba(255,255,255,.62); line-height: 1.82; }
    .contact-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 9000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 26px;
      background: rgba(2,3,6,.54);
      backdrop-filter: blur(22px);
      opacity: 0;
      transition: opacity .32s ease;
    }
    .modal.open { display: flex; opacity: 1; }
    .modal-card {
      width: min(1240px, 100%);
      max-height: min(88vh, 880px);
      overflow: hidden;
      border-radius: 36px;
      background: var(--paper);
      color: var(--black);
      box-shadow: 0 42px 170px rgba(0,0,0,.62);
      transform: translateY(28px) scale(.96);
      opacity: 0;
      transition: transform .45s var(--ease), opacity .45s ease;
    }
    .modal.open .modal-card { transform: translateY(0) scale(1); opacity: 1; }
    .modal-grid {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      min-height: 620px;
      max-height: min(88vh, 880px);
    }
    .video-panel {
      position: relative;
      background:
        radial-gradient(circle at 26% 20%, rgba(239,81,63,.18), transparent 28%),
        radial-gradient(circle at 78% 16%, rgba(106,167,255,.16), transparent 28%),
        #121318;
      display: grid;
      place-items: center;
      overflow: hidden;
      isolation: isolate;
    }
    .video-panel::before {
      content: "";
      position: absolute;
      inset: 20px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 26px;
      pointer-events: none;
    }
    .video-panel video { width: 100%; height: 100%; object-fit: contain; display: none; background: #06070a; }
    .video-panel.has-video video { display: block; }
    .video-placeholder { text-align: center; color: rgba(255,255,255,.65); padding: 28px; }
    .play-mark { width: 86px; height: 86px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); font-size: 30px; }
    .modal-content {
      position: relative;
      padding: 36px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 24px;
      background: var(--paper);
      color: #090a0e;
      overflow: hidden;
    }
    .modal-content::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 5px;
      background: linear-gradient(90deg, var(--red), var(--blue));
    }
    .close {
      position: absolute;
      right: 22px;
      top: 20px;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(10,11,15,.12);
      border-radius: 50%;
      background: rgba(10,11,15,.045);
      color: #0a0b0f;
      z-index: 4;
    }
    .modal-meta { color: rgba(10,11,15,.5); font: 900 12px/1 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; }
    .modal-title { margin: 18px 48px 0 0; font-size: clamp(34px, 4.8vw, 62px); line-height: .98; letter-spacing: -.065em; }
    .modal-lead { margin: 18px 0 0; color: rgba(10,11,15,.64); line-height: 1.76; font-size: 16px; }
    .result-list { display: grid; gap: 12px; align-content: start; }
    .result-item { border: 1px solid rgba(10,11,15,.1); background: rgba(10,11,15,.035); border-radius: 18px; padding: 15px 16px; line-height: 1.55; color: rgba(10,11,15,.68); }
    .result-item b { color: #090a0e; }
    .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .modal-actions .btn { color: #0a0b0f; border-color: rgba(10,11,15,.14); background: rgba(10,11,15,.04); backdrop-filter: none; }
    .modal-actions .btn.primary { color: #fff; background: #0a0b0f; box-shadow: none; }

    .deep-panel {
      position: absolute;
      top: 0;
      right: 0;
      width: min(430px, 92%);
      height: 100%;
      background: #0a0b0f;
      color: var(--ink);
      padding: 36px 32px;
      transform: translateX(105%);
      transition: transform .52s var(--ease);
      box-shadow: -30px 0 90px rgba(0,0,0,.35);
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 22px;
      z-index: 3;
    }
    .modal-card.deep .deep-panel { transform: translateX(0); }
    .deep-panel .k { color: var(--red); font: 900 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
    .deep-panel h4 { margin: 14px 0 0; font-size: 32px; line-height: 1.04; letter-spacing: -.05em; }
    .deep-panel p { margin: 0; color: rgba(255,255,255,.66); line-height: 1.8; }
    .deep-list { display: grid; gap: 14px; align-content: start; }
    .deep-chip { padding: 14px 15px; border-radius: 17px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.055); color: rgba(255,255,255,.68); line-height: 1.58; }
    .deep-chip b { color: #fff; }



    /* V7: interactive transformation atelier */
    .transformation-board.interactive-map {
      min-height: 460px;
      background:
        radial-gradient(circle at 24% 24%, rgba(239,81,63,.16), transparent 23%),
        radial-gradient(circle at 76% 70%, rgba(106,167,255,.16), transparent 24%),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
        rgba(255,255,255,.028);
      background-size: auto, auto, 42px 42px, 42px 42px, auto;
    }
    .map-orbit {
      position: absolute;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 50%;
      pointer-events: none;
    }
    .orbit-one { width: 440px; height: 440px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-15deg); }
    .orbit-two { width: 620px; height: 280px; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(12deg); border-color: rgba(255,255,255,.055); }
    .flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
    .flow-svg path {
      fill: none;
      stroke: url(#flowGradient);
      stroke-width: 1.4;
      stroke-dasharray: 8 16;
      opacity: .58;
      animation: dashMove 12s linear infinite;
    }
    @keyframes dashMove { to { stroke-dashoffset: -240; } }
    .map-node {
      position: absolute;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(8,9,13,.55);
      color: var(--ink);
      border-radius: 24px;
      padding: 16px 16px 15px;
      min-width: 142px;
      text-align: left;
      backdrop-filter: blur(18px) saturate(130%);
      box-shadow: 0 22px 80px rgba(0,0,0,.28);
      transition: transform .42s var(--ease), border-color .35s ease, background .35s ease, box-shadow .35s ease;
    }
    .map-node:hover, .map-node.active {
      transform: translateY(-8px) scale(1.02);
      border-color: rgba(255,255,255,.34);
      background: rgba(255,255,255,.105);
      box-shadow: 0 38px 110px rgba(0,0,0,.36);
    }
    .map-node small { display: block; margin-bottom: 10px; color: rgba(255,255,255,.42); font: 900 10px/1 var(--font-mono); letter-spacing: .15em; }
    .map-node b { display: block; font-size: 18px; letter-spacing: -.04em; }
    .node-human { left: 32px; top: 48px; }
    .node-ai { right: 42px; top: 52px; }
    .node-rule { left: 42%; top: 45%; transform: translate(-50%, -50%); }
    .node-rule:hover, .node-rule.active { transform: translate(-50%, calc(-50% - 8px)) scale(1.02); }
    .node-system { right: 44px; bottom: 48px; }
    .identity-mark {
      position: absolute;
      left: 50%;
      bottom: 34px;
      width: 210px;
      height: 142px;
      transform: translateX(-50%);
      filter: drop-shadow(0 34px 80px rgba(0,0,0,.36));
      pointer-events: none;
    }
    .identity-mark span { position: absolute; display: block; border-radius: 999px; }
    .identity-mark .ribbon-red { width: 42px; height: 142px; left: 44px; bottom: 0; background: linear-gradient(180deg, #ff6b56, #d7352d); transform: rotate(14deg); }
    .identity-mark .ribbon-blue { width: 34px; height: 104px; left: 108px; bottom: 3px; background: linear-gradient(180deg, #7db8ff, #3f7dff); transform: rotate(-17deg); }
    .identity-mark .dot { width: 28px; height: 28px; right: 34px; top: 8px; background: #f4f1ea; opacity: .92; }
    .identity-mark .bar { width: 30px; height: 98px; right: 33px; bottom: 4px; background: linear-gradient(180deg, #ff6b56, #e03c2f); }
    .thought-card {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 26px;
      border: 1px solid rgba(255,255,255,.11);
      background: rgba(255,255,255,.06);
      border-radius: 24px;
      padding: 18px 20px;
      color: rgba(255,255,255,.72);
      line-height: 1.65;
      backdrop-filter: blur(16px);
      transform: translateY(0);
      transition: opacity .3s ease, transform .3s var(--ease);
    }
    .thought-card.updating { opacity: .18; transform: translateY(10px); }
    .micro-caption { display: none; }

    /* V7: stronger case composition */
    .case-grid { gap: 18px; }
    .case-card { min-height: 344px; background: rgba(255,255,255,.058); }
    .case-card:nth-child(1) { grid-column: span 5; }
    .case-card:nth-child(2) { grid-column: span 7; }
    .case-card:nth-child(3), .case-card:nth-child(4), .case-card:nth-child(5) { grid-column: span 4; }
    .case-card::before {
      background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 25%),
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.016));
    }
    .case-visual {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 120px;
      height: 82px;
      opacity: .58;
      transition: opacity .35s ease, transform .45s var(--ease);
    }
    .case-visual i { position: absolute; display: block; border-radius: 999px; background: rgba(255,255,255,.2); }
    .case-visual i:nth-child(1) { width: 70px; height: 12px; left: 0; top: 12px; transform: rotate(-12deg); background: linear-gradient(90deg, rgba(239,81,63,.75), rgba(255,255,255,.18)); }
    .case-visual i:nth-child(2) { width: 96px; height: 12px; right: 0; top: 36px; transform: rotate(8deg); background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(106,167,255,.7)); }
    .case-visual i:nth-child(3) { width: 42px; height: 42px; right: 10px; bottom: 0; border: 1px solid rgba(255,255,255,.22); background: transparent; }
    .case-card:hover .case-visual { opacity: .92; transform: translateY(-6px) rotate(-2deg); }
    .case-card.is-opening .case-visual i:nth-child(1), .case-card.is-opening .case-visual i:nth-child(2) { background: rgba(10,11,15,.14); }
    .case-card.is-opening .case-visual i:nth-child(3) { border-color: rgba(10,11,15,.16); }
    .case-card .case-main { padding-right: min(130px, 18vw); }
    .case-card:hover .case-title { transform: translateY(-2px); }
    .case-title { transition: color .45s ease, transform .35s var(--ease); }
    .case-open { overflow: hidden; }
    .case-open::after { content: "OPEN"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 9px/1 var(--font-mono); letter-spacing: .08em; opacity: 0; transform: translateY(10px); transition: .28s var(--ease); }
    .case-open { position: relative; }
    .case-card:hover .case-open { width: 62px; border-radius: 999px; }
    .case-card:hover .case-open::after { opacity: 1; transform: translateY(0); }
    .case-card:hover .case-open { color: transparent; }

    .modal-card.deep .modal-content { padding-right: min(460px, 42%); transition: padding-right .52s var(--ease); }
    .modal.open .result-item { animation: resultIn .55s var(--ease) both; }
    .modal.open .result-item:nth-child(2) { animation-delay: .07s; }
    .modal.open .result-item:nth-child(3) { animation-delay: .14s; }
    @keyframes resultIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

    .method-system .logic-row { transition: transform .32s var(--ease), background .32s ease, border-color .32s ease; border-radius: 18px; padding-left: 14px; padding-right: 14px; }
    .method-system .logic-row:hover { transform: translateX(10px); background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.18); }

    /* V8: premium cursor, section transition, refined hero system lens */
    .section-flash {
      position: fixed;
      inset: -18vh -18vw;
      z-index: 7800;
      pointer-events: none;
      opacity: 0;
      transform: translateX(-120%) rotate(-10deg);
      background:
        linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.08) 20%, rgba(255,255,255,.46) 48%, rgba(239,81,63,.20) 57%, rgba(106,167,255,.16) 70%, transparent 86% 100%);
      filter: blur(1px);
      mix-blend-mode: screen;
    }
    .section-flash.go { animation: sectionSweep .78s var(--ease) both; }
    @keyframes sectionSweep {
      0% { opacity: 0; transform: translateX(-120%) rotate(-10deg); }
      20% { opacity: .9; }
      100% { opacity: 0; transform: translateX(120%) rotate(-10deg); }
    }

    h2 {
      position: relative;
      display: inline-block;
      background: linear-gradient(110deg, #fff 0%, #f7d6cc 32%, #ef513f 64%, #7fb1ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 30px 80px rgba(239,81,63,.09);
    }
    h2::after {
      content: "";
      display: block;
      width: 72px;
      height: 3px;
      margin-top: 18px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--red), var(--blue));
      transform-origin: left;
      transform: scaleX(.55);
      opacity: .76;
      transition: transform .75s var(--ease), opacity .75s ease;
    }
    .active-section h2::after { transform: scaleX(1); opacity: 1; }

    .cursor-core {
      width: 24px !important;
      height: 24px !important;
      opacity: 0;
      background: rgba(255,255,255,.78) !important;
      border: 1px solid rgba(255,255,255,.52);
      box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 10px 28px rgba(255,255,255,.12);
      mix-blend-mode: difference;
      transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) scaleX(var(--sx, 1)) scaleY(var(--sy, 1));
      transition: opacity .18s ease, width .2s var(--ease), height .2s var(--ease), background .22s ease, border-color .22s ease;
      will-change: left, top, transform;
    }
    .cursor-core::after {
      content: "";
      position: absolute;
      right: 58%;
      top: 50%;
      width: var(--tail, 0px);
      height: 12px;
      border-radius: 999px 0 0 999px;
      transform: translateY(-50%);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.64));
      opacity: var(--tailOpacity, 0);
      filter: blur(.25px);
      transition: width .08s linear, opacity .16s ease;
    }
    .cursor-core.active { opacity: 1; }
    .cursor-core.mode {
      width: 54px !important;
      height: 54px !important;
      background: rgba(255,255,255,.88) !important;
      border-color: rgba(255,255,255,.72);
      --tail: 0px !important;
      --tailOpacity: 0 !important;
    }
    .cursor-label { font-size: 9px; }

    .hero-device {
      background:
        radial-gradient(circle at 18% 8%, rgba(255,255,255,.12), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035)),
        rgba(255,255,255,.045);
    }
    .transformation-board.interactive-map {
      min-height: 460px;
      background:
        radial-gradient(circle at 28% 18%, rgba(239,81,63,.14), transparent 28%),
        radial-gradient(circle at 80% 72%, rgba(106,167,255,.13), transparent 30%),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.022) 1px, transparent 1px),
        rgba(255,255,255,.022);
      background-size: auto, auto, 44px 44px, 44px 44px, auto;
    }
    .map-node {
      background: rgba(9,10,14,.48);
      border-radius: 26px;
    }
    .map-node.active, .map-node:hover { background: rgba(255,255,255,.12); }
    .system-lens {
      position: absolute;
      left: 50%;
      top: 56%;
      width: 310px;
      height: 220px;
      transform: translate(-50%, -50%);
      pointer-events: auto;
    }
    .lens-ring {
      position: absolute;
      inset: 0;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 50%;
      transform: rotate(var(--r, 0deg)) scaleX(1.36);
      opacity: .8;
    }
    .lens-ring.r1 { --r: -12deg; animation: lensDrift 8s ease-in-out infinite; }
    .lens-ring.r2 { inset: 32px 18px; --r: 24deg; border-color: rgba(239,81,63,.18); animation: lensDrift 9s ease-in-out infinite reverse; }
    .lens-ring.r3 { inset: 52px 42px; --r: -34deg; border-color: rgba(106,167,255,.2); animation: lensDrift 10s ease-in-out infinite; }
    @keyframes lensDrift { 0%,100% { transform: rotate(var(--r)) scaleX(1.32); } 50% { transform: rotate(calc(var(--r) + 7deg)) scaleX(1.44); } }
    .lens-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 190px;
      padding: 22px 20px;
      border-radius: 28px;
      text-align: center;
      background: rgba(255,255,255,.075);
      border: 1px solid rgba(255,255,255,.16);
      backdrop-filter: blur(18px);
      box-shadow: 0 28px 90px rgba(0,0,0,.22);
    }
    .lens-center span { display:block; color: rgba(255,255,255,.42); font: 900 10px/1 var(--font-mono); letter-spacing:.16em; }
    .lens-center b { display:block; margin-top: 10px; color:#fff; font-size: 28px; letter-spacing:-.06em; }
    .lens-center em { display:block; margin-top: 12px; font-style: normal; color: rgba(255,255,255,.52); font-size: 13px; }
    .system-lens:hover .lens-center { background: rgba(255,255,255,.11); }
    .thought-card { left: 32px; right: 32px; bottom: 24px; }

    .case-card {
      background:
        linear-gradient(145deg, rgba(255,255,255,.066), rgba(255,255,255,.032)),
        rgba(255,255,255,.052);
    }
    .case-card:hover { transform: translateY(-12px); }
    .case-card .case-main { padding-right: 0; }
    .case-title { max-width: 640px; }
    .case-effect { max-width: 720px; }
    .case-visual {
      right: 22px;
      top: auto;
      bottom: 22px;
      width: 108px;
      height: 108px;
      opacity: .36;
    }
    .case-visual i:nth-child(1) {
      width: 86px; height: 86px; left: 10px; top: 10px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.22), rgba(255,255,255,.035) 60%, transparent 61%);
      border: 1px solid rgba(255,255,255,.12);
      transform: none;
    }
    .case-visual i:nth-child(2) {
      width: 80px; height: 1px; left: 14px; top: 54px;
      background: linear-gradient(90deg, transparent, rgba(239,81,63,.55), rgba(106,167,255,.55), transparent);
      transform: rotate(-18deg);
    }
    .case-visual i:nth-child(3) {
      width: 28px; height: 28px; right: 10px; bottom: 16px;
      border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.035);
    }
    .case-card:hover .case-visual { opacity: .82; transform: translateY(-4px) rotate(5deg); }
    .case-card:hover .case-visual i:nth-child(1) { animation: casePulse 1.6s var(--ease) infinite; }
    @keyframes casePulse { 0%,100% { transform: scale(1); opacity: .72; } 50% { transform: scale(1.08); opacity: 1; } }

    .easter-egg {
      position: fixed;
      right: 28px;
      bottom: 28px;
      z-index: 9400;
      width: min(420px, calc(100vw - 40px));
      padding: 26px;
      border-radius: 30px;
      background: rgba(246,240,231,.94);
      color: #0a0b0f;
      box-shadow: 0 34px 120px rgba(0,0,0,.42);
      transform: translateY(24px) scale(.96);
      opacity: 0;
      pointer-events: none;
      transition: opacity .38s ease, transform .38s var(--ease);
    }
    .easter-egg.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .easter-egg::before {
      content: "";
      position: absolute;
      left: 0; top: 0; right: 0; height: 4px;
      border-radius: 30px 30px 0 0;
      background: linear-gradient(90deg, var(--red), var(--blue));
    }
    .easter-kicker { color: rgba(10,11,15,.5); font: 900 11px/1 var(--font-mono); letter-spacing: .14em; }
    .easter-egg h3 { margin: 14px 34px 0 0; font-size: 26px; letter-spacing: -.04em; line-height: 1.08; }
    .easter-egg p { margin: 16px 0 0; color: rgba(10,11,15,.66); line-height: 1.75; }
    .easter-close { position:absolute; right:16px; top:14px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(10,11,15,.12); background:rgba(10,11,15,.04); color:#0a0b0f; }



    /* V9: Lusion-inspired interaction pass: liquid cursor, immersive loom hero, richer page/card motion */
    body {
      background:
        radial-gradient(circle at 12% 10%, rgba(239, 81, 63, .22), transparent 34vw),
        radial-gradient(circle at 88% 14%, rgba(106, 167, 255, .20), transparent 34vw),
        radial-gradient(circle at 50% 102%, rgba(246,240,231,.08), transparent 46vw),
        linear-gradient(145deg, #050507 0%, #0b0d13 52%, #040507 100%);
    }
    .snap-section {
      overflow: hidden;
      isolation: isolate;
    }
    .snap-section .reveal,
    .hero-grid.reveal {
      transition: opacity .92s var(--ease), transform .92s var(--ease), filter .92s var(--ease);
    }
    .snap-section:not(.active-section) .reveal.in,
    .snap-section:not(.active-section) .hero-grid.in {
      opacity: .36;
      transform: translateY(28px) scale(.978);
      filter: blur(6px) saturate(.82);
    }
    .active-section .stagger {
      animation: contentLift .78s var(--ease) both;
      animation-delay: calc(var(--i, 0) * 70ms);
    }
    @keyframes contentLift {
      from { opacity: 0; transform: translateY(28px); filter: blur(10px); }
      to { opacity: 1; transform: translateY(0); filter: blur(0); }
    }

    .cursor-core {
      width: 34px !important;
      height: 34px !important;
      border: 1px solid rgba(255,255,255,.42) !important;
      background: rgba(255,255,255,.07) !important;
      backdrop-filter: blur(8px) invert(1);
      box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 48px rgba(255,255,255,.10);
      mix-blend-mode: exclusion;
      border-radius: 50% 50% 50% 50%;
      transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) scaleX(var(--sx, 1)) scaleY(var(--sy, 1));
      transition: width .24s var(--ease), height .24s var(--ease), border-radius .22s ease, background .22s ease, border-color .22s ease, opacity .18s ease;
    }
    .cursor-core::after {
      right: 50%;
      height: 18px;
      border-radius: 999px 0 0 999px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), rgba(255,255,255,.70));
      filter: blur(1.2px);
    }
    .cursor-core.moving {
      border-radius: 62% 38% 44% 56% / 48% 54% 46% 52%;
    }
    .cursor-core.mode {
      width: 72px !important;
      height: 72px !important;
      border-color: rgba(255,255,255,.72) !important;
      background: rgba(255,255,255,.82) !important;
      backdrop-filter: blur(10px);
      mix-blend-mode: normal;
      box-shadow: 0 18px 60px rgba(255,255,255,.13), inset 0 0 0 1px rgba(0,0,0,.08);
    }
    .cursor-label.active { color: #06070a; font-weight: 950; }

    .hero-device {
      border-radius: 44px;
      transform: translate3d(calc(var(--hx, 0) * 10px), calc(var(--hy, 0) * 10px), 0);
      transition: transform .28s var(--ease), border-color .38s ease, background .38s ease;
    }
    .hero-device:hover { border-color: rgba(255,255,255,.22); }
    .transformation-board.hero-loom {
      position: relative;
      overflow: hidden;
      min-height: 486px;
      border-radius: 34px;
      background:
        radial-gradient(circle at calc(50% + var(--hx, 0) * 60px) calc(48% + var(--hy, 0) * 52px), rgba(255,255,255,.10), transparent 22%),
        radial-gradient(circle at 22% 26%, rgba(239,81,63,.13), transparent 28%),
        radial-gradient(circle at 80% 72%, rgba(106,167,255,.13), transparent 28%),
        linear-gradient(90deg, rgba(255,255,255,.040) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.026) 1px, transparent 1px),
        rgba(255,255,255,.025);
      background-size: auto, auto, auto, 42px 42px, 42px 42px, auto;
    }
    .loom-grain {
      position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
      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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
    }
    .loom-svg { position:absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); overflow: visible; }
    .loom-path {
      fill: none;
      stroke: url(#loomGradient);
      stroke-width: 1.2;
      stroke-linecap: round;
      opacity: .54;
      stroke-dasharray: 9 15;
      animation: loomFlow 12s linear infinite;
      filter: url(#softGlow);
    }
    .loom-path.p2 { animation-duration: 15s; opacity: .44; stroke-dasharray: 4 18; }
    .loom-path.p3 { animation-duration: 18s; opacity: .34; stroke-dasharray: 2 14; }
    @keyframes loomFlow { to { stroke-dashoffset: -320; } }
    .loom-core {
      position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) translate3d(calc(var(--hx, 0) * -18px), calc(var(--hy, 0) * -18px), 0);
      width: 232px; height: 232px; border-radius: 50%; display: grid; place-items: center; text-align: center;
      background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.24), rgba(255,255,255,.075) 38%, rgba(255,255,255,.026) 72%);
      border: 1px solid rgba(255,255,255,.13);
      box-shadow: inset 0 0 70px rgba(255,255,255,.05), 0 38px 140px rgba(0,0,0,.26);
      backdrop-filter: blur(18px);
      transition: transform .18s var(--ease), background .32s ease;
    }
    .loom-core::before,
    .loom-core::after {
      content:""; position:absolute; inset: 18px; border-radius:50%; border:1px solid rgba(255,255,255,.10); transform: rotate(16deg) scaleX(1.42);
    }
    .loom-core::after { inset: 44px; border-color: rgba(106,167,255,.20); transform: rotate(-24deg) scaleX(1.72); }
    .loom-core span { display:block; position: relative; color: rgba(255,255,255,.42); font: 950 10px/1 var(--font-mono); letter-spacing: .18em; }
    .loom-core b { display:block; position: relative; margin-top: 12px; font-size: 42px; letter-spacing: -.08em; background: linear-gradient(100deg,#fff,#f6c0b4,#7fb1ff); color: transparent; -webkit-background-clip:text; background-clip:text; }
    .signal-node {
      position: absolute; z-index: 4; min-width: 142px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.11); border-radius: 24px;
      background: rgba(8,9,13,.44); color: #fff; text-align: left; backdrop-filter: blur(18px);
      box-shadow: 0 22px 80px rgba(0,0,0,.18);
      transition: transform .38s var(--ease), background .32s ease, border-color .32s ease, box-shadow .32s ease;
    }
    .signal-node small { display:block; margin-bottom: 9px; color: rgba(255,255,255,.38); font: 950 10px/1 var(--font-mono); letter-spacing: .18em; }
    .signal-node b { font-size: 20px; letter-spacing: -.04em; }
    .signal-node:hover, .signal-node.active { transform: translateY(-8px) scale(1.025); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24); box-shadow: 0 34px 110px rgba(0,0,0,.28); }
    .node-human { left: 36px; top: 44px; }
    .node-ai { right: 42px; top: 58px; }
    .node-rule { left: 42%; top: 38%; }
    .node-system { right: 52px; bottom: 74px; }
    .loom-index {
      position: absolute; left: 38px; bottom: 112px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.38); font: 950 10px/1 var(--font-mono); letter-spacing: .16em;
    }
    .loom-index i { width: 42px; height: 1px; background: linear-gradient(90deg, rgba(239,81,63,.5), rgba(106,167,255,.5)); }
    .thought-card { border-radius: 22px; background: rgba(246,240,231,.13); border-color: rgba(255,255,255,.13); }

    .case-card {
      transform-style: preserve-3d;
      transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
      transition: transform .38s var(--ease), background .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease;
    }
    .case-card:hover { --lift: -12px; }
    .case-card::after { height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), rgba(239,81,63,.55), rgba(106,167,255,.65), transparent); }
    .case-visual { opacity: .26; width: 110px; height: 110px; right: 22px; bottom: 22px; }
    .case-visual i:nth-child(1) { width: 92px; height: 92px; inset: auto 0 0 auto; border: 1px solid rgba(255,255,255,.22); background: transparent; border-radius: 50%; }
    .case-visual i:nth-child(2) { width: 70px; height: 1px; right: 20px; top: 53px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.56), transparent); transform: rotate(0deg); }
    .case-visual i:nth-child(3) { width: 1px; height: 70px; right: 54px; bottom: 20px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.42), transparent); border: 0; }
    .case-card:hover .case-visual { opacity: .72; transform: translateY(-4px) rotate(0deg); }
    .case-card:hover .case-visual i:nth-child(1) { animation: radarRing 2.1s linear infinite; }
    @keyframes radarRing { to { transform: rotate(360deg); } }

    h1 .dim, h1 .accent, h2 {
      text-wrap: balance;
    }
    .active-section h2 { filter: drop-shadow(0 28px 70px rgba(239,81,63,.12)); }
    .active-section h2::before {
      content:""; position:absolute; left:-2px; top: .1em; width: .22em; height:.22em; border-radius:50%; background: var(--red); box-shadow: 0 0 32px rgba(239,81,63,.62);
      transform: translateX(-150%) scale(0); animation: titleDot .65s var(--ease) .2s both;
    }
    @keyframes titleDot { to { transform: translateX(-150%) scale(1); } }

    .fun-sparks {
      position: fixed; inset: 0; pointer-events:none; z-index: 7600; overflow:hidden;
    }
    .spark-bubble {
      position:absolute; width: var(--s); height: var(--s); border-radius:50%; border:1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.04); backdrop-filter: blur(2px);
      animation: bubbleUp var(--d) var(--ease) forwards;
    }
    @keyframes bubbleUp { to { transform: translateY(-180px) scale(.3); opacity:0; } }

    @media (max-width: 980px) {
      .hero-grid, .method-layout, .modal-grid { grid-template-columns: 1fr; }
      .hero-device { min-height: 520px; }
      .case-card, .case-card:nth-child(1), .case-card:nth-child(2), .case-card:nth-child(3), .case-card:nth-child(4), .case-card:nth-child(5) { grid-column: span 12; }
      .section-head { align-items: start; flex-direction: column; }
      .modal-card { max-height: 92vh; overflow: auto; }
      .modal-grid { min-height: auto; }
      .video-panel { min-height: 340px; }
      .deep-panel { position: relative; width: 100%; height: auto; transform: none; display: none; }
      .modal-card.deep .deep-panel { display: grid; transform: none; }
      .nav, .page-dots { display: none; }
    }
    @media (max-width: 640px) {
      body { cursor: auto; }
      #water-cursor, .cursor-core, .cursor-label { display: none; }
      .page-shell { width: min(100vw - 24px, 560px); }
      .topbar { width: min(100vw - 24px, 560px); top: 12px; }
      .snap-section { min-height: auto; scroll-snap-align: none; padding: 104px 0 54px; }
      html { scroll-snap-type: none; }
      .hero-device { min-height: 460px; }
      .device-inner { inset: 22px; }
      .symbol { padding: 14px; border-radius: 20px; }
      .symbol b { font-size: 15px; }
      .s-human { width: 132px; left: 18px; top: 36px; }
      .s-rule { width: 142px; }
      .s-output { width: 152px; right: 18px; }
      .big-a { width: 88px; height: 112px; }
      .case-card { min-height: 330px; }
      .case-inner { padding: 20px; }
      .case-foot { align-items: start; }
      .modal { padding: 12px; }
      .modal-content { padding: 28px 22px; }
      .close { right: 14px; top: 14px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
      #water-cursor, .cursor-core, .cursor-label { display: none; }
      body { cursor: auto; }
    }


    /* V10: softer page transition, unified hero panel, realistic water cursor, independent play-object */
    .section-flash {
      inset: 0;
      opacity: 0;
      transform: none;
      background:
        radial-gradient(ellipse 120% 52% at 50% 50%, rgba(246,240,231,.08), transparent 55%),
        radial-gradient(ellipse 74% 42% at 18% 40%, rgba(239,81,63,.12), transparent 62%),
        radial-gradient(ellipse 74% 42% at 82% 60%, rgba(106,167,255,.12), transparent 62%),
        linear-gradient(90deg, transparent, rgba(7,9,13,.45), transparent);
      filter: blur(0);
      mix-blend-mode: normal;
      backdrop-filter: blur(0px) saturate(1.08);
    }
    .section-flash.go { animation: sectionVeil 1.05s var(--ease) both; }
    @keyframes sectionVeil {
      0% { opacity: 0; clip-path: inset(50% 0 50% 0 round 50%); backdrop-filter: blur(0px) saturate(1); }
      34% { opacity: .82; clip-path: inset(0 0 0 0 round 0); backdrop-filter: blur(8px) saturate(1.12); }
      100% { opacity: 0; clip-path: inset(0 0 0 0 round 0); backdrop-filter: blur(0px) saturate(1); }
    }

    .page-wipe {
      background:
        radial-gradient(circle at var(--wx,50%) var(--wy,50%), rgba(246,240,231,.96) 0 12%, rgba(246,240,231,.82) 26%, rgba(239,81,63,.18) 47%, rgba(106,167,255,.16) 64%, transparent 74%);
      mix-blend-mode: normal;
    }
    .page-wipe.active { animation: softBloom .86s var(--ease) both; }
    @keyframes softBloom {
      0% { clip-path: circle(0 at var(--wx) var(--wy)); opacity: .92; filter: blur(0); }
      48% { clip-path: circle(72vmax at var(--wx) var(--wy)); opacity: .72; filter: blur(3px); }
      100% { clip-path: circle(96vmax at var(--wx) var(--wy)); opacity: 0; filter: blur(12px); }
    }

    .hero-device {
      border-radius: 42px;
      padding: 1px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.035) 42%, rgba(106,167,255,.10) 100%),
        rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 36px 140px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16);
    }
    .hero-device::before,
    .hero-device::after { opacity: .38; }
    .device-inner {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: 32px;
      min-height: 620px;
      display: flex;
      flex-direction: column;
    }
    .device-top { opacity: .72; margin-bottom: 22px; }
    .transformation-board.hero-loom {
      flex: 1;
      min-height: 508px;
      border-radius: 34px;
      border: 1px solid rgba(255,255,255,.105);
      background:
        radial-gradient(circle at calc(54% + var(--hx, 0) * 44px) calc(48% + var(--hy, 0) * 40px), rgba(246,240,231,.105), transparent 28%),
        radial-gradient(circle at 18% 24%, rgba(239,81,63,.12), transparent 32%),
        radial-gradient(circle at 82% 76%, rgba(106,167,255,.12), transparent 33%),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
        rgba(3,5,9,.18);
      background-size: auto, auto, auto, 38px 38px, 38px 38px, auto;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 -55px 120px rgba(0,0,0,.18);
    }
    .transformation-board.hero-loom::before,
    .transformation-board.hero-loom::after { display: none !important; }
    .loom-grain { opacity: .12; }
    .loom-svg { inset: 8px 12px 16px; width: calc(100% - 24px); height: calc(100% - 24px); opacity: .72; }
    .loom-core {
      width: 218px; height: 218px;
      background:
        radial-gradient(circle at 38% 28%, rgba(255,255,255,.28), rgba(255,255,255,.09) 38%, rgba(255,255,255,.03) 74%),
        rgba(255,255,255,.018);
      box-shadow: inset 0 0 76px rgba(255,255,255,.05), 0 30px 110px rgba(0,0,0,.24);
    }
    .loom-core b { font-size: 40px; }
    .signal-node {
      background: rgba(8,10,15,.42);
      border-color: rgba(255,255,255,.10);
      box-shadow: 0 18px 70px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .signal-node:hover, .signal-node.active {
      background: rgba(246,240,231,.145);
      border-color: rgba(255,255,255,.26);
    }
    .thought-card {
      left: 38px; right: 38px; bottom: 34px;
      background: rgba(246,240,231,.105);
      border: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(18px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }

    .cursor-core {
      width: 28px !important;
      height: 28px !important;
      background: rgba(246,240,231,.095) !important;
      border: 1px solid rgba(246,240,231,.55) !important;
      box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 14px 42px rgba(255,255,255,.07);
      backdrop-filter: blur(6px) invert(.18);
    }
    .cursor-core::after { display: none !important; }
    .cursor-core.moving {
      border-radius: 58% 42% 44% 56% / 50% 54% 46% 50%;
      background: rgba(246,240,231,.135) !important;
    }
    .cursor-core.mode {
      width: 54px !important;
      height: 54px !important;
      background: rgba(246,240,231,.88) !important;
      border-color: rgba(246,240,231,.92) !important;
      box-shadow: 0 18px 72px rgba(246,240,231,.10), inset 0 0 0 1px rgba(0,0,0,.08);
    }
    .cursor-label.active { font-size: 8px; letter-spacing: .15em; }

    .play-object {
      position: fixed;
      right: clamp(22px, 4vw, 64px);
      bottom: clamp(22px, 5vw, 70px);
      width: 74px;
      height: 74px;
      z-index: 2200;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 28px 50% 38px 50%;
      background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,.22), transparent 34%),
        linear-gradient(135deg, rgba(239,81,63,.92), rgba(106,167,255,.80));
      box-shadow: 0 26px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.24);
      color: #fff;
      display: grid;
      place-items: center;
      font: 950 9px/1 var(--font-mono);
      letter-spacing: .16em;
      cursor: none;
      user-select: none;
      transition: transform .36s var(--ease), filter .36s ease, opacity .36s ease;
      animation: floatObject 5.8s ease-in-out infinite;
    }
    .play-object::before {
      content:"";
      position:absolute;
      inset:-14px;
      border:1px dashed rgba(255,255,255,.14);
      border-radius: 50%;
      animation: objectOrbit 9s linear infinite;
    }
    .play-object::after {
      content:"PULL";
      position:absolute;
      right: calc(100% + 12px);
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255,255,255,.46);
      font: 950 10px/1 var(--font-mono);
      letter-spacing:.18em;
      opacity:.6;
      white-space: nowrap;
    }
    .play-object.dragging { animation: none; filter: saturate(1.28) brightness(1.08); transform: scale(1.08) rotate(8deg); }
    @keyframes floatObject { 0%,100%{ transform: translate3d(0,0,0) rotate(-5deg);} 50%{ transform: translate3d(0,-13px,0) rotate(7deg);} }
    @keyframes objectOrbit { to { transform: rotate(360deg); } }
    .play-thread {
      position: fixed;
      left: 0; top: 0;
      width: 100vw; height: 100vh;
      z-index: 2199;
      pointer-events: none;
      opacity: 0;
      transition: opacity .2s ease;
    }
    .play-thread.active { opacity: 1; }
    .play-thread line { stroke: rgba(246,240,231,.38); stroke-width: 1; stroke-dasharray: 6 10; }
    .artifact-card {
      position: fixed;
      right: clamp(20px, 4vw, 70px);
      bottom: 168px;
      width: min(360px, calc(100vw - 40px));
      z-index: 2300;
      padding: 22px;
      border-radius: 26px;
      background: rgba(246,240,231,.92);
      color: #08090d;
      box-shadow: 0 30px 110px rgba(0,0,0,.38);
      transform: translateY(18px) scale(.96);
      opacity: 0;
      pointer-events: none;
      transition: .42s var(--ease);
    }
    .artifact-card.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .artifact-card small { font: 950 10px/1 var(--font-mono); letter-spacing:.16em; color: rgba(8,9,13,.42); }
    .artifact-card h3 { margin: 12px 0 0; font-size: 24px; letter-spacing: -.05em; }
    .artifact-card p { margin: 12px 0 0; color: rgba(8,9,13,.62); line-height: 1.72; }


    /* V11: refined right-side workflow panel + moon-player hidden page */
    .section-flash {
      background:
        radial-gradient(ellipse 120% 80% at 50% 50%, rgba(0,0,0,.54), transparent 64%),
        radial-gradient(ellipse 70% 42% at 20% 48%, rgba(239,81,63,.10), transparent 66%),
        radial-gradient(ellipse 70% 42% at 82% 52%, rgba(106,167,255,.12), transparent 68%);
      mix-blend-mode: normal;
    }
    .section-flash.go { animation: inkVeil 1.04s var(--ease) both; }
    @keyframes inkVeil {
      0% { opacity:0; clip-path: circle(0 at 50% 50%); filter: blur(0); }
      38% { opacity:.74; clip-path: circle(82vmax at 50% 50%); filter: blur(6px); }
      100% { opacity:0; clip-path: circle(115vmax at 50% 50%); filter: blur(16px); }
    }

    .hero-device {
      background:
        linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 52%, rgba(106,167,255,.08)),
        rgba(255,255,255,.028) !important;
      border-color: rgba(255,255,255,.105) !important;
    }
    .device-inner { min-height: 610px; }
    .transformation-board.hero-loom {
      border: 0 !important;
      border-radius: 30px;
      background:
        radial-gradient(circle at calc(48% + var(--hx, 0) * 36px) calc(50% + var(--hy, 0) * 30px), rgba(255,255,255,.085), transparent 28%),
        radial-gradient(circle at 24% 26%, rgba(239,81,63,.105), transparent 34%),
        radial-gradient(circle at 78% 72%, rgba(106,167,255,.11), transparent 34%),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.018) 1px, transparent 1px),
        rgba(5,7,12,.16) !important;
      background-size: auto, auto, auto, 44px 44px, 44px 44px, auto;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.065), inset 0 -80px 140px rgba(0,0,0,.20) !important;
    }
    .loom-svg { opacity:.42 !important; inset: 42px 50px 70px !important; width: calc(100% - 100px) !important; height: calc(100% - 112px) !important; }
    .loom-path { stroke-width:.9 !important; opacity:.28 !important; stroke-dasharray: 1 18 !important; }
    .loom-path.p1 { d: path('M60,250 C180,84 292,300 386,205 C488,102 586,152 690,75'); }
    .loom-path.p2 { opacity:.22 !important; }
    .loom-path.p3 { opacity:.18 !important; }
    .loom-core {
      width: 260px !important;
      height: 156px !important;
      border-radius: 34px !important;
      left: 50% !important;
      top: 52% !important;
      background:
        linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.040)),
        rgba(6,8,13,.30) !important;
      border: 1px solid rgba(255,255,255,.12) !important;
      box-shadow: 0 30px 120px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12) !important;
    }
    .loom-core::before, .loom-core::after { display:none !important; }
    .loom-core span { color: rgba(255,255,255,.38) !important; }
    .loom-core b { font-size: 34px !important; margin-top: 10px !important; }
    .loom-core::selection { background: transparent; }
    .loom-core:before { content: ''; }

    .signal-node {
      min-width: 164px !important;
      border-radius: 22px !important;
      background:
        linear-gradient(135deg, rgba(255,255,255,.092), rgba(255,255,255,.030)),
        rgba(5,7,12,.25) !important;
      border: 1px solid rgba(255,255,255,.11) !important;
      box-shadow: 0 20px 80px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.07) !important;
    }
    .signal-node small { margin-bottom: 10px !important; opacity:.78; }
    .signal-node b { font-size: 19px !important; }
    .signal-node:hover, .signal-node.active {
      transform: translateY(-7px) scale(1.018) !important;
      background: linear-gradient(135deg, rgba(246,240,231,.18), rgba(246,240,231,.065)) !important;
      border-color: rgba(255,255,255,.24) !important;
    }
    .node-human { left: 44px !important; top: 48px !important; }
    .node-ai { right: 48px !important; top: 58px !important; }
    .node-rule { left: 44px !important; top: auto !important; bottom: 144px !important; }
    .node-system { right: 48px !important; bottom: 144px !important; }
    .loom-index { display:none !important; }
    .thought-card {
      left: 44px !important; right: 44px !important; bottom: 42px !important;
      min-height: 56px;
      display:flex; align-items:center;
      background: rgba(246,240,231,.10) !important;
      border-color: rgba(255,255,255,.105) !important;
    }
    .transformation-board.hero-loom::before {
      display:block !important;
      content:'FROM REAL WORK  →  REUSABLE SYSTEM';
      position:absolute; left:44px; top:50%; transform:translateY(-50%) rotate(-90deg); transform-origin:left center;
      color: rgba(255,255,255,.19); font:950 10px/1 var(--font-mono); letter-spacing:.2em;
      width: 310px; height:auto; border:0; background:transparent;
    }
    .transformation-board.hero-loom::after {
      display:block !important;
      content:''; position:absolute; right:52px; top:50%; width:86px; height:86px; border-radius:50%;
      transform:translateY(-50%);
      background: radial-gradient(circle, rgba(255,255,255,.12), transparent 66%);
      border:1px solid rgba(255,255,255,.07);
      opacity:.65;
    }

    .play-object {
      width: 64px; height: 64px; border-radius: 50%;
      background:
        radial-gradient(circle at 32% 26%, rgba(255,255,255,.45), rgba(255,255,255,.10) 38%, transparent 39%),
        radial-gradient(circle at 66% 65%, rgba(106,167,255,.28), transparent 46%),
        #e9e4d8 !important;
      color: #101115 !important;
      box-shadow: 0 22px 90px rgba(246,240,231,.18), 0 20px 70px rgba(0,0,0,.34), inset -12px -16px 30px rgba(0,0,0,.10) !important;
    }
    .play-object::after { content:'PULL THE MOON' !important; opacity:.72 !important; right: calc(100% + 14px); }
    .artifact-card { display:none !important; }

    .moon-overlay {
      position: fixed; inset: 0; z-index: 9600; display: grid; place-items: center;
      background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.18), transparent 20%),
        radial-gradient(circle at 18% 86%, rgba(106,167,255,.14), transparent 34%),
        linear-gradient(180deg, #070b14 0%, #0a1123 48%, #03040a 100%);
      opacity:0; pointer-events:none; transform: scale(1.025); filter: blur(12px);
      transition: opacity .72s var(--ease), transform .72s var(--ease), filter .72s var(--ease);
      overflow:hidden;
    }
    .moon-overlay.open { opacity:1; pointer-events:auto; transform:scale(1); filter:blur(0); }
    .moon-overlay::before {
      content:''; position:absolute; inset:0; opacity:.45; pointer-events:none;
      background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(circle at 50% 50%, black, transparent 78%);
    }
    .moon-bg-orbit { position:absolute; width:70vmin; height:70vmin; border-radius:50%; border:1px solid rgba(255,255,255,.08); animation: moonOrbit 18s linear infinite; }
    .moon-bg-orbit::before, .moon-bg-orbit::after { content:''; position:absolute; border-radius:50%; border:1px dashed rgba(255,255,255,.08); inset:8%; transform:rotate(22deg) scaleX(1.5); }
    .moon-bg-orbit::after { inset:22%; transform:rotate(-18deg) scaleX(1.75); opacity:.58; }
    @keyframes moonOrbit { to { transform: rotate(360deg); } }
    .moon-stage { position:relative; z-index:2; width:min(980px, calc(100vw - 44px)); display:grid; gap:38px; justify-items:center; }
    .moon-player {
      width:min(760px, 100%); padding:26px; border-radius:38px;
      background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); backdrop-filter: blur(22px);
      box-shadow: 0 34px 140px rgba(0,0,0,.45); display:flex; align-items:center; gap:26px;
    }
    .moon-record { width:148px; height:148px; border-radius:50%; background: radial-gradient(circle, #e9e2d1 0 13%, #10131d 14% 36%, #1d263b 37% 60%, #070a10 61%); position:relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 80px rgba(0,0,0,.44); }
    .moon-record.playing { animation: spinRecord 4.8s linear infinite; }
    .moon-record span { position:absolute; inset:18px; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
    .moon-record i { position:absolute; right:-24px; top:28px; width:80px; height:12px; border-radius:999px; background:rgba(255,255,255,.78); transform:rotate(28deg); transform-origin:left center; }
    @keyframes spinRecord { to { transform: rotate(360deg); } }
    .moon-player-info { flex:1; }
    .moon-player-info small { font:950 10px/1 var(--font-mono); letter-spacing:.2em; color:rgba(255,255,255,.45); }
    .moon-player-info h3 { margin:14px 0 8px; font-size:clamp(30px,4vw,54px); letter-spacing:-.07em; }
    .moon-player-info p { color:rgba(255,255,255,.60); line-height:1.7; margin:0 0 16px; }
    .moon-player-info code { color:#e9e2d1; }
    .moon-play, .moon-close {
      border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.10); color:#fff; border-radius:999px; padding:12px 18px; font-weight:900; letter-spacing:.12em;
    }
    .moon-close { position:absolute; right:30px; top:26px; width:46px; height:46px; padding:0; z-index:4; font-size:22px; }
    .moon-lyrics { width:min(860px,100%); min-height:210px; display:grid; place-items:center; text-align:center; }
    .lyric-line { position:absolute; max-width:min(760px, calc(100vw - 60px)); opacity:0; transform: translateY(24px) scale(.98); filter:blur(8px); font-size:clamp(22px,3.2vw,48px); line-height:1.32; letter-spacing:-.05em; color:rgba(255,255,255,.92); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }
    .lyric-line.active { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
    .lyric-line.fade { opacity:.12; transform:translateY(-22px) scale(.985); filter:blur(8px); }
    @media (max-width: 760px) { .moon-player { flex-direction:column; text-align:center; } .moon-record { width:118px; height:118px; } }

    @media (max-width: 760px) {
      .play-object, .play-thread { display: none; }
      .device-inner { min-height: auto; padding: 22px; }
      .transformation-board.hero-loom { min-height: 430px; }
    }

  

    /* V12: philosophy-led hero question board + fixed moon page */
    .hero-device {
      min-height: 620px;
      background:
        radial-gradient(circle at 30% 16%, rgba(239,81,63,.13), transparent 34%),
        radial-gradient(circle at 82% 76%, rgba(106,167,255,.13), transparent 36%),
        linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035)) !important;
    }
    .question-board {
      position: relative;
      min-height: 470px;
      height: 100%;
      border-radius: 32px;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at calc(50% + var(--hx, 0) * 42px) calc(48% + var(--hy, 0) * 34px), rgba(255,255,255,.13), transparent 24%),
        linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.022) 1px, transparent 1px),
        rgba(4,6,10,.20);
      background-size: auto, 42px 42px, 42px 42px, auto;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.075), inset 0 -90px 150px rgba(0,0,0,.26);
    }
    .question-board::before {
      content: "";
      position: absolute;
      inset: 34px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.075);
      background: linear-gradient(135deg, rgba(255,255,255,.030), transparent 48%);
      pointer-events: none;
    }
    .question-bg {
      position:absolute;
      inset:-18%;
      background:
        radial-gradient(circle at 26% 28%, rgba(239,81,63,.16), transparent 24%),
        radial-gradient(circle at 74% 68%, rgba(106,167,255,.15), transparent 24%),
        conic-gradient(from 90deg, transparent, rgba(255,255,255,.07), transparent, rgba(106,167,255,.06), transparent);
      filter: blur(14px);
      opacity:.72;
      transform: translate(calc(var(--hx, 0) * -12px), calc(var(--hy, 0) * -10px));
      transition: transform .22s ease;
    }
    .question-orbit {
      position:absolute;
      left:50%; top:49%;
      width: 430px; height: 260px;
      transform: translate(-50%, -50%) rotate(-8deg);
      border: 1px dashed rgba(255,255,255,.115);
      border-radius: 50%;
      opacity:.75;
    }
    .question-orbit::before,
    .question-orbit::after {
      content:""; position:absolute; inset:34px -42px;
      border:1px solid rgba(255,255,255,.06);
      border-radius:50%; transform:rotate(22deg);
    }
    .question-orbit::after { inset:78px -72px; transform:rotate(-18deg); opacity:.65; }
    .question-center {
      position:absolute;
      left:50%; top:50%;
      width: min(310px, 46%);
      min-height: 180px;
      transform: translate(-50%, -50%);
      display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
      padding: 24px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 34% 22%, rgba(255,255,255,.21), transparent 32%),
        linear-gradient(135deg, rgba(246,240,231,.18), rgba(246,240,231,.055));
      border:1px solid rgba(255,255,255,.16);
      box-shadow: 0 32px 130px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.16);
      backdrop-filter: blur(20px);
    }
    .question-center small { font:950 10px/1 var(--font-mono); letter-spacing:.22em; color:rgba(255,255,255,.42); }
    .question-center b { margin-top:12px; font-size:clamp(24px, 2.7vw, 40px); letter-spacing:-.07em; background:linear-gradient(105deg,#fff,#ffe0d6,#87b5ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .question-center span { margin-top:10px; max-width:240px; color:rgba(255,255,255,.58); line-height:1.6; font-size:14px; }
    .question-token {
      position:absolute;
      max-width: 250px;
      min-height: 74px;
      padding: 16px 18px;
      border:1px solid rgba(255,255,255,.12);
      border-radius: 24px;
      background: rgba(255,255,255,.075);
      color: rgba(255,255,255,.86);
      backdrop-filter: blur(18px);
      text-align:left;
      font-weight:900;
      font-size:clamp(14px,1.15vw,18px);
      line-height:1.38;
      letter-spacing:-.035em;
      box-shadow: 0 20px 80px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
      transition: transform .45s var(--ease), background .35s ease, border-color .35s ease, box-shadow .35s ease;
    }
    .question-token::before {
      content:"";
      position:absolute; inset:-1px; border-radius:inherit; padding:1px;
      background: linear-gradient(135deg, rgba(239,81,63,.48), transparent 42%, rgba(106,167,255,.46));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      opacity:0; transition: opacity .35s ease;
    }
    .question-token:hover { transform: translateY(-8px) scale(1.015); background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.22); box-shadow:0 28px 110px rgba(0,0,0,.28); }
    .question-token:hover::before { opacity:1; }
    .question-token.q1 { left:7%; top:11%; }
    .question-token.q2 { right:8%; top:16%; }
    .question-token.q3 { left:7%; bottom:20%; }
    .question-token.q4 { right:7%; bottom:18%; }
    .question-ribbon {
      position:absolute;
      left:42px; right:42px; bottom:42px;
      min-height: 62px;
      display:flex; align-items:center;
      padding: 0 24px;
      border-radius: 22px;
      border:1px solid rgba(255,255,255,.105);
      background: rgba(246,240,231,.105);
      color: rgba(255,255,255,.68);
      line-height:1.65;
      backdrop-filter: blur(18px);
      transition: opacity .24s ease, transform .24s ease, filter .24s ease;
    }
    .question-ribbon.updating { opacity:.18; transform:translateY(8px); filter:blur(8px); }
    .hero-copy { max-width: 700px; }
    .play-object {
      width: 70px !important; height:70px !important;
      border-radius: 50% !important;
      background:
        radial-gradient(circle at 34% 26%, rgba(255,255,255,.72), rgba(255,255,255,.18) 30%, transparent 31%),
        radial-gradient(circle at 70% 72%, rgba(106,167,255,.18), transparent 46%),
        #e7e0d0 !important;
      color:#12131a !important;
      font-size: 24px !important;
      letter-spacing:0 !important;
      box-shadow: 0 22px 90px rgba(246,240,231,.20), 0 20px 70px rgba(0,0,0,.34), inset -14px -18px 34px rgba(0,0,0,.12) !important;
    }
    .play-object::after { content:'拖开月亮背面' !important; font-family: var(--font-sans); font-weight:800; letter-spacing:.08em; opacity:.74 !important; }
    .play-object:hover { transform: translate3d(0,-8px,0) scale(1.06) !important; }
    .moon-overlay {
      background:
        radial-gradient(circle at 52% 22%, rgba(255,255,255,.20), transparent 18%),
        radial-gradient(circle at 18% 86%, rgba(106,167,255,.12), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(239,81,63,.08), transparent 30%),
        linear-gradient(180deg, #070b14 0%, #0a1123 48%, #03040a 100%) !important;
    }
    .moon-player { background: rgba(255,255,255,.075) !important; }
    .moon-player-info h3 { background:linear-gradient(100deg,#fff,#e9e2d1,#9fbfff); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .moon-lyrics { min-height: 260px !important; }
    .lyric-line { max-width:min(860px, calc(100vw - 60px)) !important; }
    @media (max-width: 900px) {
      .question-token { position:relative; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; max-width:none; }
      .question-board { display:grid; gap:12px; padding:82px 22px 110px; }
      .question-center { position:relative; left:auto; top:auto; transform:none; width:auto; min-height:130px; border-radius:30px; order:0; }
      .question-orbit { display:none; }
      .question-ribbon { left:22px; right:22px; bottom:22px; }
    }


    /* V13: refined UI direction — question constellation, healing moon page, real water cursor */
    .snap-section::before,
    .snap-section::after { display: none !important; }

    .topbar { background: transparent !important; box-shadow: none !important; }

    /* 首页右侧：从“窗口卡片”改为“问题星图 / 思考墙” */
    .hero-device {
      border-radius: 48px !important;
      background:
        radial-gradient(circle at 12% 15%, rgba(239,81,63,.16), transparent 30%),
        radial-gradient(circle at 90% 82%, rgba(106,167,255,.15), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 56%, rgba(255,255,255,.06)) !important;
      border: 1px solid rgba(255,255,255,.13) !important;
      box-shadow: 0 50px 160px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.16) !important;
      overflow: hidden;
    }
    .hero-device::before {
      content:"" !important;
      position:absolute !important;
      inset:-30% !important;
      background:
        radial-gradient(circle at calc(50% + var(--hx,0) * 80px) calc(50% + var(--hy,0) * 80px), rgba(255,255,255,.10), transparent 18%),
        conic-gradient(from 160deg, transparent, rgba(239,81,63,.10), transparent, rgba(106,167,255,.10), transparent) !important;
      opacity:.64 !important;
      filter: blur(14px) !important;
      pointer-events:none !important;
      transform: translate(calc(var(--hx,0) * -10px), calc(var(--hy,0) * -12px));
    }
    .device-inner {
      min-height: 620px !important;
      padding: 34px !important;
      position: relative;
      z-index: 1;
    }
    .device-top {
      margin-bottom: 24px !important;
      opacity: .62 !important;
    }
    .device-top span { letter-spacing: .18em !important; }

    .question-board {
      min-height: 508px !important;
      border-radius: 40px !important;
      background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 32% 24%, rgba(239,81,63,.16), transparent 29%),
        radial-gradient(circle at 74% 72%, rgba(106,167,255,.14), transparent 30%),
        linear-gradient(145deg, rgba(5,7,12,.34), rgba(255,255,255,.025)) !important;
      background-size: 46px 46px, 46px 46px, auto, auto, auto !important;
      border: 1px solid rgba(255,255,255,.09) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -70px 120px rgba(0,0,0,.24) !important;
      overflow: hidden;
    }
    .question-board::before {
      display: none !important;
    }
    .question-bg {
      inset:-12% !important;
      opacity:.78 !important;
      filter: blur(18px) saturate(1.15) !important;
      background:
        radial-gradient(circle at 18% 32%, rgba(239,81,63,.26), transparent 20%),
        radial-gradient(circle at 82% 72%, rgba(106,167,255,.22), transparent 22%),
        radial-gradient(circle at 48% 42%, rgba(255,255,255,.10), transparent 18%) !important;
    }
    .question-orbit {
      display:none !important;
    }
    .question-center {
      left: 8% !important;
      top: 48% !important;
      transform: translateY(-50%) !important;
      width: 42% !important;
      min-height: 300px !important;
      align-items: flex-start !important;
      text-align: left !important;
      border-radius: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }
    .question-center small {
      color: rgba(255,255,255,.40) !important;
      margin-bottom: 24px;
      display:block;
    }
    .question-center b {
      max-width: 360px;
      margin: 0 !important;
      font-size: clamp(48px, 6vw, 84px) !important;
      line-height: .92 !important;
      letter-spacing: -.09em !important;
      background: linear-gradient(110deg,#fff 0%,#ffe0d8 45%,#87b5ff 100%) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      color: transparent !important;
    }
    .question-center span {
      max-width: 360px !important;
      margin-top: 24px !important;
      color: rgba(255,255,255,.62) !important;
      font-size: 15px !important;
      line-height: 1.75 !important;
    }

    .question-token {
      max-width: 270px !important;
      min-height: auto !important;
      padding: 18px 20px !important;
      border-radius: 28px !important;
      font-size: clamp(14px, 1.05vw, 18px) !important;
      background:
        linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045)) !important;
      border: 1px solid rgba(255,255,255,.14) !important;
      box-shadow: 0 24px 90px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10) !important;
      backdrop-filter: blur(22px) saturate(1.1) !important;
    }
    .question-token::after {
      content:"";
      position:absolute;
      width:6px;
      height:6px;
      border-radius:50%;
      background: rgba(255,255,255,.52);
      left:18px;
      top:18px;
      box-shadow: 0 0 22px rgba(255,255,255,.30);
    }
    .question-token.q1 { left: auto !important; right: 9% !important; top: 12% !important; }
    .question-token.q2 { right: 6% !important; top: 34% !important; }
    .question-token.q3 { left: auto !important; right: 14% !important; bottom: 30% !important; }
    .question-token.q4 { right: 7% !important; bottom: 10% !important; }
    .question-token:hover {
      transform: translate3d(-10px,-8px,0) scale(1.02) !important;
      background: rgba(246,240,231,.16) !important;
    }
    .question-token:hover::before { opacity:1 !important; }
    .question-ribbon {
      left: 8% !important;
      right: auto !important;
      bottom: 36px !important;
      width: min(510px, 48%) !important;
      min-height: auto !important;
      padding: 18px 22px !important;
      border-radius: 24px !important;
      background: rgba(8,10,15,.28) !important;
      border: 1px solid rgba(255,255,255,.11) !important;
      color: rgba(255,255,255,.66) !important;
    }

    /* Cursor: stop big stuck disk, use liquid dot + real water ripples */
    .cursor-core {
      width: 24px !important;
      height: 24px !important;
      border-radius: 999px !important;
      background: rgba(246,240,231,.13) !important;
      border: 1px solid rgba(246,240,231,.50) !important;
      box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 12px 40px rgba(255,255,255,.055) !important;
      backdrop-filter: blur(4px) saturate(1.15) !important;
      mix-blend-mode: normal !important;
      transition: opacity .18s ease, width .18s var(--ease), height .18s var(--ease), border-radius .18s ease, background .18s ease !important;
    }
    .cursor-core.moving {
      width: calc(24px * var(--sx, 1)) !important;
      height: calc(24px * var(--sy, 1)) !important;
      transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) !important;
      border-radius: 70% 42% 45% 68% / 52% 44% 60% 46% !important;
      background: rgba(246,240,231,.18) !important;
    }
    .cursor-core.mode {
      width: 42px !important;
      height: 42px !important;
      background: rgba(246,240,231,.20) !important;
      border-color: rgba(246,240,231,.62) !important;
    }
    .cursor-label.active { color: rgba(246,240,231,.86) !important; text-shadow: 0 10px 26px rgba(0,0,0,.4); }

    /* 彩蛋入口：更像可探索的小月亮机关 */
    .play-object {
      width: 66px !important;
      height: 66px !important;
      border-radius: 50% !important;
      background:
        radial-gradient(circle at 32% 26%, rgba(255,255,255,.82), rgba(255,255,255,.26) 26%, transparent 27%),
        radial-gradient(circle at 62% 70%, rgba(8,16,30,.10), transparent 30%),
        linear-gradient(145deg, #f0eadc, #c9c0ad) !important;
      color: transparent !important;
      border-color: rgba(255,255,255,.20) !important;
      box-shadow: 0 20px 80px rgba(246,240,231,.16), 0 28px 110px rgba(0,0,0,.30), inset -14px -16px 34px rgba(0,0,0,.10) !important;
    }
    .play-object::before {
      border-color: rgba(246,240,231,.20) !important;
    }
    .play-object::after {
      content:"拖开月亮" !important;
      right: calc(100% + 14px) !important;
      color: rgba(246,240,231,.55) !important;
      font-family: var(--font-sans) !important;
      font-size: 12px !important;
      letter-spacing:.10em !important;
    }
    .artifact-card { display: none !important; }

    /* 隐藏页：去掉科技感，改成治愈系月夜播放器 */
    .moon-overlay {
      background:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,.18), transparent 13%),
        radial-gradient(circle at 22% 78%, rgba(255,212,170,.12), transparent 32%),
        radial-gradient(circle at 82% 76%, rgba(132,173,255,.12), transparent 34%),
        linear-gradient(180deg, #10192b 0%, #11192b 42%, #070a12 100%) !important;
    }
    .moon-overlay::before {
      opacity:.28 !important;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(255,255,255,.32) 0 1px, transparent 1.3px) !important;
      background-size: 120px 120px, 180px 180px !important;
      background-position: 0 0, 60px 80px !important;
      mask-image: linear-gradient(180deg, black, transparent 86%) !important;
    }
    .moon-bg-orbit {
      border-color: rgba(255,255,255,.07) !important;
      filter: blur(.2px);
    }
    .moon-player {
      width: min(780px, 100%) !important;
      padding: 24px 26px !important;
      border-radius: 34px !important;
      background: rgba(255,255,255,.10) !important;
      border: 1px solid rgba(255,255,255,.16) !important;
      box-shadow: 0 34px 150px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.16) !important;
      backdrop-filter: blur(24px) saturate(1.08) !important;
    }
    .moon-record {
      width: 132px !important;
      height: 132px !important;
      background:
        radial-gradient(circle at 34% 30%, rgba(255,255,255,.90), rgba(255,255,255,.34) 22%, transparent 23%),
        radial-gradient(circle at 62% 70%, rgba(10,18,32,.16), transparent 30%),
        linear-gradient(145deg, #f7efd8, #d8d0bd 62%, #aab5c9) !important;
      box-shadow: 0 22px 80px rgba(246,240,231,.16), inset -18px -20px 42px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.65) !important;
    }
    .moon-record span {
      inset: 22px !important;
      border: 1px solid rgba(255,255,255,.32) !important;
      opacity: .55;
    }
    .moon-record i {
      width: 96px !important;
      height: 2px !important;
      top: 64px !important;
      right: -74px !important;
      background: linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,255,255,.06)) !important;
      transform: rotate(-12deg) !important;
      box-shadow: 0 0 20px rgba(255,255,255,.14);
    }
    .moon-player-info h3 {
      color: #fff !important;
      background: linear-gradient(100deg, #fff, #f2dcc4 62%, #c9dbff) !important;
      -webkit-background-clip:text !important;
      background-clip:text !important;
      color: transparent !important;
    }
    .moon-player-info p { color: rgba(255,255,255,.66) !important; }
    .moon-play, .moon-close {
      background: rgba(255,255,255,.12) !important;
      border-color: rgba(255,255,255,.18) !important;
    }
    .lyric-line {
      color: rgba(255,255,255,.93) !important;
      text-shadow: 0 16px 70px rgba(0,0,0,.34) !important;
    }

    @media (max-width: 900px) {
      .question-board { display:block !important; padding: 28px !important; min-height: 560px !important; }
      .question-center { position:relative !important; left:auto !important; top:auto !important; transform:none !important; width:100% !important; min-height:auto !important; }
      .question-center b { font-size: 48px !important; }
      .question-token { position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; max-width:none !important; margin-top: 12px; width:100%; }
      .question-ribbon { position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; width:100% !important; margin-top: 16px; }
    }


    /* V15 minimal rollback patch: based on V13, only hero/cursor/moon-object/moon-page are touched */
    .hero-title-world {
      font-size: clamp(78px, 10vw, 176px) !important;
      line-height: .78 !important;
      letter-spacing: -.105em !important;
      text-transform: uppercase;
    }
    .hero-title-world .dim {
      color: rgba(255,255,255,.31) !important;
      -webkit-text-stroke: 1px rgba(255,255,255,.09);
      text-shadow: none !important;
    }
    .hero-title-world .accent {
      background: linear-gradient(100deg, #fffaf2 0%, #ff7567 45%, #c7b6ff 100%) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      color: transparent !important;
      text-shadow: 0 22px 90px rgba(239,81,63,.22) !important;
    }
    .hero-copy.small-hook {
      margin-top: 12px !important;
      color: rgba(246,240,231,.46) !important;
      font-size: clamp(16px, 1.2vw, 20px) !important;
    }

    /* 首页右侧改为“单问题舞台”，取消窗口卡片堆叠感 */
    .hero-device {
      min-height: 630px !important;
      border-radius: 54px !important;
      background:
        radial-gradient(circle at 22% 24%, rgba(239,81,63,.20), transparent 32%),
        radial-gradient(circle at 78% 70%, rgba(106,167,255,.18), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.032) 62%, rgba(255,255,255,.072)) !important;
      border: 1px solid rgba(255,255,255,.14) !important;
      box-shadow: 0 44px 160px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.18) !important;
      overflow: hidden !important;
    }
    .hero-device::after {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      opacity: .42 !important;
      pointer-events: none !important;
      background:
        linear-gradient(90deg, rgba(255,255,255,.034) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.024) 1px, transparent 1px) !important;
      background-size: 54px 54px !important;
      mask-image: radial-gradient(circle at 50% 48%, black, transparent 74%) !important;
    }
    .device-inner { min-height: 630px !important; padding: 38px !important; }
    .idea-stage {
      position: relative;
      min-height: 552px;
      border-radius: 42px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at calc(50% + var(--hx, 0) * 90px) calc(48% + var(--hy, 0) * 90px), rgba(255,255,255,.13), transparent 21%),
        radial-gradient(circle at 20% 84%, rgba(239,81,63,.12), transparent 27%),
        radial-gradient(circle at 88% 18%, rgba(106,167,255,.11), transparent 28%),
        rgba(6,8,14,.28);
      backdrop-filter: blur(22px);
      transform-style: preserve-3d;
    }
    .idea-stage::before {
      content: '';
      position: absolute;
      inset: -30%;
      background: conic-gradient(from 120deg, transparent, rgba(239,81,63,.13), transparent, rgba(106,167,255,.12), transparent);
      animation: ideaDrift 16s linear infinite;
      opacity: .54;
      filter: blur(22px);
    }
    @keyframes ideaDrift { to { transform: rotate(360deg); } }
    .idea-glow {
      position: absolute;
      left: 50%; top: 48%;
      width: 290px; height: 290px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,.055) 40%, transparent 68%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 100px rgba(106,167,255,.12);
      filter: blur(.2px);
    }
    .idea-ring {
      position: absolute;
      left: 50%; top: 48%;
      width: 560px; height: 240px;
      border-radius: 50%;
      transform: translate(-50%, -50%) rotate(-12deg);
      border: 1px solid rgba(255,255,255,.09);
      opacity: .8;
    }
    .idea-ring.r2 { width: 700px; height: 310px; transform: translate(-50%, -50%) rotate(22deg); opacity: .48; border-style: dashed; }
    .idea-cursor-line {
      position: absolute;
      left: 13%; right: 13%; top: 53%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(239,81,63,.55), rgba(255,255,255,.34), rgba(106,167,255,.55), transparent);
      transform: translateY(calc(var(--hy,0) * 18px)) rotate(calc(var(--hx,0) * 3deg));
      opacity: .56;
    }
    .idea-label {
      position: absolute;
      left: 34px; top: 30px;
      font: 950 10px/1 var(--font-mono);
      letter-spacing: .24em;
      color: rgba(255,255,255,.44);
    }
    .idea-question-wrap {
      position: absolute;
      left: 50%; top: 49%;
      width: min(560px, calc(100% - 78px));
      transform: translate(-50%, -50%) translate(calc(var(--hx,0) * -12px), calc(var(--hy,0) * -10px));
      text-align: center;
      z-index: 2;
      transition: filter .28s ease, transform .35s var(--ease);
    }
    .idea-count {
      margin: 0 auto 18px;
      width: max-content;
      padding: 9px 13px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.54);
      font: 900 10px/1 var(--font-mono);
      letter-spacing: .18em;
    }
    .idea-question {
      font-size: clamp(38px, 4.8vw, 82px);
      line-height: .96;
      letter-spacing: -.08em;
      font-weight: 950;
      background: linear-gradient(105deg, #fff, #ffd7cd 42%, #a9c8ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 20px 80px rgba(0,0,0,.26);
      transition: opacity .28s ease, filter .28s ease, transform .28s var(--ease);
    }
    .idea-sub {
      margin: 20px auto 0;
      max-width: 500px;
      color: rgba(255,255,255,.62);
      line-height: 1.75;
      font-size: 15px;
      transition: opacity .28s ease, filter .28s ease, transform .28s var(--ease);
    }
    .idea-stage.switching .idea-question,
    .idea-stage.switching .idea-sub { opacity: .08; filter: blur(10px); transform: translateY(10px); }
    .idea-dots {
      position: absolute;
      left: 50%; bottom: 46px;
      transform: translateX(-50%);
      display: flex; gap: 12px; z-index: 3;
    }
    .idea-dot {
      width: 10px; height: 10px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.26);
      background: rgba(255,255,255,.12);
      padding: 0;
      transition: width .35s var(--ease), background .35s ease, border-color .35s ease, transform .35s var(--ease);
    }
    .idea-dot.active { width: 42px; background: rgba(255,255,255,.75); border-color: rgba(255,255,255,.9); }
    .idea-dot:hover { transform: translateY(-3px); }
    .idea-enter {
      position: absolute;
      right: 34px; bottom: 31px;
      color: rgba(255,255,255,.45);
      font: 950 10px/1 var(--font-mono);
      letter-spacing: .2em;
      z-index: 3;
      transition: color .25s ease, transform .25s var(--ease);
    }
    .idea-enter:hover { color:#fff; transform: translateX(4px); }

    /* 月亮入口：默认隐藏，只在首次到达最后一页后出现 */
    .play-object {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translate3d(0, 16px, 0) scale(.82) !important;
      transition: opacity .85s var(--ease), transform .85s var(--ease), box-shadow .35s ease !important;
    }
    .play-object.revealed {
      opacity: 1 !important;
      pointer-events: auto !important;
      transform: translate3d(0, 0, 0) scale(1) !important;
      animation: moonFloat 4.8s ease-in-out infinite;
    }
    .play-object::after { content: '' !important; display: none !important; }
    @keyframes moonFloat { 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }

    /* 治愈隐藏页：只覆盖隐藏页，不碰其它页面 */
    .moon-overlay {
      background:
        radial-gradient(circle at 50% 24%, rgba(255,246,222,.50), transparent 12%),
        radial-gradient(circle at 28% 74%, rgba(186,210,255,.28), transparent 28%),
        radial-gradient(circle at 76% 82%, rgba(255,206,189,.28), transparent 30%),
        linear-gradient(180deg, #f5eadb 0%, #dfe9f6 42%, #b7c8dc 100%) !important;
      color: #243044 !important;
    }
    .moon-overlay::before {
      opacity: .28 !important;
      background-image: radial-gradient(circle, rgba(255,255,255,.62) 1px, transparent 1.6px) !important;
      background-size: 90px 90px !important;
    }
    .moon-bg-orbit {
      border-color: rgba(80,94,125,.13) !important;
      opacity: .58 !important;
    }
    .moon-bg-orbit::before, .moon-bg-orbit::after { border-color: rgba(80,94,125,.10) !important; }
    .moon-stage { gap: 42px !important; }
    .moon-player {
      background: rgba(255,255,255,.52) !important;
      border: 1px solid rgba(255,255,255,.65) !important;
      box-shadow: 0 34px 120px rgba(68,82,110,.22), inset 0 1px 0 rgba(255,255,255,.78) !important;
      backdrop-filter: blur(20px) !important;
      color: #263146 !important;
    }
    .moon-record {
      background:
        radial-gradient(circle at 50% 50%, #fff7df 0 16%, #ecdcae 17% 27%, rgba(255,255,255,.72) 28% 29%, #b6c9e4 30% 58%, #8fa7c7 59% 62%, #fff6e9 63%) !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.66), 0 22px 80px rgba(82,102,135,.22) !important;
    }
    .moon-record i { background: rgba(92,109,139,.32) !important; }
    .moon-player-info small { color: rgba(38,49,70,.42) !important; }
    .moon-player-info h3 {
      background: linear-gradient(105deg, #263146, #5d7192, #b98f73) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      color: transparent !important;
    }
    .moon-player-info p { color: rgba(38,49,70,.62) !important; }
    .moon-play, .moon-close {
      background: rgba(255,255,255,.46) !important;
      border-color: rgba(38,49,70,.16) !important;
      color: #263146 !important;
    }
    .moon-lyrics { min-height: 300px !important; }
    .lyric-line {
      color: rgba(38,49,70,.88) !important;
      font-weight: 700 !important;
      letter-spacing: -.045em !important;
      transition: opacity 1.35s var(--ease), transform 1.35s var(--ease), filter 1.35s var(--ease) !important;
    }
    .lyric-line.active { opacity: 1 !important; transform: translateY(0) scale(1) !important; filter: blur(0) !important; }
    .lyric-line.fade { opacity: .10 !important; transform: translateY(-26px) scale(.985) !important; filter: blur(12px) !important; }
    @media (max-width: 900px) {
      .hero-title-world { font-size: clamp(62px, 16vw, 112px) !important; }
      .idea-stage { min-height: 520px; }
      .idea-question { font-size: clamp(38px, 12vw, 64px); }
      .idea-enter { display:none; }
    }

  

    /* V16: homepage reboot — interactive question field + liquid cursor, no fake water rings */
    #water-cursor { display: none !important; }
    .cursor-core {
      width: 34px !important;
      height: 34px !important;
      border: 1px solid rgba(246,240,231,.42) !important;
      background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.30), rgba(255,255,255,.08) 62%, rgba(255,255,255,.02)) !important;
      box-shadow: 0 18px 58px rgba(246,240,231,.10), inset 0 1px 0 rgba(255,255,255,.25) !important;
      backdrop-filter: blur(6px) saturate(1.1) !important;
      mix-blend-mode: screen !important;
      transition: opacity .18s ease, width .22s var(--ease), height .22s var(--ease), border-radius .22s var(--ease), transform .08s linear !important;
    }
    .cursor-core.moving {
      width: calc(34px * var(--sx, 1)) !important;
      height: calc(34px * var(--sy, 1)) !important;
      border-radius: 68% 40% 48% 70% / 58% 46% 66% 48% !important;
      background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.38), rgba(239,81,63,.09) 48%, rgba(106,167,255,.10)) !important;
      transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) !important;
    }
    .cursor-core.mode {
      width: 58px !important;
      height: 58px !important;
      border-color: rgba(246,240,231,.56) !important;
      background: rgba(246,240,231,.16) !important;
    }
    .cursor-label.active { color: rgba(246,240,231,.9) !important; text-shadow: 0 18px 50px rgba(0,0,0,.55); }

    .hero-title-world {
      font-size: clamp(86px, 10.8vw, 192px) !important;
      line-height: .76 !important;
      letter-spacing: -.115em !important;
    }
    .hero-copy { max-width: 660px !important; }

    /* Replace right-side card with a full interactive background field */
    .hero-device {
      border-radius: 56px !important;
      min-height: 650px !important;
      border: 1px solid rgba(255,255,255,.12) !important;
      background:
        radial-gradient(circle at calc(50% + var(--hx,0) * 90px) calc(50% + var(--hy,0) * 90px), rgba(246,240,231,.10), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.028) 62%, rgba(255,255,255,.055)) !important;
      overflow: hidden !important;
      box-shadow: 0 52px 170px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.14) !important;
    }
    .hero-device::before {
      content:'' !important;
      position:absolute !important;
      inset:-28% !important;
      background:
        radial-gradient(circle at 22% 18%, rgba(239,81,63,.18), transparent 26%),
        radial-gradient(circle at 78% 76%, rgba(106,167,255,.16), transparent 30%),
        conic-gradient(from calc(160deg + var(--hx,0) * 18deg), transparent, rgba(255,255,255,.06), transparent, rgba(106,167,255,.08), transparent) !important;
      filter: blur(16px) saturate(1.1) !important;
      opacity: .82 !important;
      transform: translate(calc(var(--hx,0) * -18px), calc(var(--hy,0) * -18px)) rotate(calc(var(--hx,0) * 4deg)) !important;
    }
    .hero-device::after {
      content:'' !important;
      position:absolute !important;
      inset:0 !important;
      background-image:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.022) 1px, transparent 1px) !important;
      background-size: 52px 52px !important;
      mask-image: radial-gradient(circle at calc(50% + var(--hx,0) * 90px) calc(50% + var(--hy,0) * 70px), black, transparent 68%) !important;
      opacity: .55 !important;
      pointer-events: none;
    }
    .device-inner { min-height: 100% !important; padding: 0 !important; position: relative; }
    .idea-stage {
      position: relative !important;
      min-height: 650px !important;
      height: 100% !important;
      padding: 0 !important;
      border-radius: 56px !important;
      overflow: hidden !important;
      background: transparent !important;
      box-shadow: none !important;
      border: 0 !important;
      isolation: isolate;
    }
    .question-flow-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      opacity: .72;
    }
    .idea-glow, .idea-ring, .idea-cursor-line { display:none !important; }
    .idea-label {
      position:absolute !important;
      top: 42px !important;
      left: 46px !important;
      z-index: 3;
      font: 950 10px/1 var(--font-mono) !important;
      letter-spacing: .28em !important;
      color: rgba(246,240,231,.45) !important;
    }
    .idea-question-wrap {
      position:absolute !important;
      left: 46px !important;
      right: 46px !important;
      bottom: 112px !important;
      z-index: 3;
      width: auto !important;
      min-height: auto !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      text-align: left !important;
    }
    .idea-count {
      margin-bottom: 18px !important;
      font: 950 11px/1 var(--font-mono) !important;
      letter-spacing: .18em !important;
      color: rgba(246,240,231,.42) !important;
    }
    .idea-question {
      width: min(670px, 100%);
      font-size: clamp(42px, 5.4vw, 82px) !important;
      line-height: .92 !important;
      letter-spacing: -.085em !important;
      font-weight: 950 !important;
      color: transparent !important;
      background: linear-gradient(105deg, #fffaf2 0%, #ffd9ce 42%, #8fbaff 100%) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      text-wrap: balance;
    }
    .idea-sub {
      width: min(540px, 100%);
      margin-top: 22px !important;
      color: rgba(246,240,231,.62) !important;
      font-size: 15px !important;
      line-height: 1.75 !important;
    }
    .idea-dots {
      position:absolute !important;
      z-index: 4;
      right: 42px !important;
      top: 44px !important;
      display:flex !important;
      flex-direction: column !important;
      gap: 12px !important;
    }
    .idea-dot {
      width: 10px !important;
      height: 10px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(246,240,231,.38) !important;
      background: rgba(246,240,231,.08) !important;
      transition: height .35s var(--ease), background .35s ease, border-color .35s ease, transform .35s var(--ease) !important;
    }
    .idea-dot.active {
      height: 36px !important;
      background: rgba(246,240,231,.82) !important;
      border-color: rgba(246,240,231,.88) !important;
    }
    .idea-enter {
      position:absolute !important;
      z-index: 4;
      left: 46px !important;
      bottom: 42px !important;
      color: rgba(246,240,231,.52) !important;
      font: 900 10px/1 var(--font-mono) !important;
      letter-spacing: .22em !important;
      border: 1px solid rgba(246,240,231,.15) !important;
      border-radius: 999px !important;
      padding: 13px 16px !important;
      background: rgba(246,240,231,.055) !important;
      backdrop-filter: blur(14px) !important;
      transition: transform .35s var(--ease), background .35s ease, color .35s ease;
    }
    .idea-enter:hover { transform: translateX(8px); background: rgba(246,240,231,.11) !important; color: rgba(246,240,231,.92) !important; }
    .idea-stage.switching .idea-question,
    .idea-stage.switching .idea-sub,
    .idea-stage.switching .idea-count {
      filter: blur(12px);
      opacity: .12;
      transform: translateY(12px);
      transition: .18s ease;
    }
    .floating-question {
      position:absolute;
      z-index: 2;
      max-width: 260px;
      padding: 14px 16px;
      border-radius: 999px;
      border: 1px solid rgba(246,240,231,.10);
      background: rgba(246,240,231,.045);
      color: rgba(246,240,231,.54);
      font-size: 13px;
      line-height: 1.35;
      letter-spacing: -.02em;
      backdrop-filter: blur(14px);
      transition: transform .45s var(--ease), color .35s ease, background .35s ease, border-color .35s ease;
    }
    .floating-question:hover { color: rgba(246,240,231,.92); background: rgba(246,240,231,.095); border-color: rgba(246,240,231,.18); transform: translateY(-6px) scale(1.03); }
    .floating-question.fq1 { left: 9%; top: 18%; }
    .floating-question.fq2 { right: 14%; top: 22%; }
    .floating-question.fq3 { right: 9%; bottom: 28%; }
    .floating-question.fq4 { left: 16%; bottom: 44%; }
    @media (max-width: 900px) {
      .hero-device, .idea-stage { min-height: 540px !important; border-radius: 34px !important; }
      .idea-question-wrap { left: 24px !important; right:24px !important; bottom: 98px !important; }
      .idea-label { left:24px !important; top:28px !important; }
      .idea-question { font-size: clamp(38px, 12vw, 68px) !important; }
      .floating-question { display:none; }
      .idea-dots { right: 24px !important; top: 28px !important; }
      .idea-enter { left: 24px !important; bottom: 28px !important; }
    }


/* V17 focused rebuild: hero image-poster stage + local background ripples + healing moon page */
#water-cursor { display: none !important; }
.cursor-core {
  width: 30px !important;
  height: 30px !important;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.34), rgba(255,255,255,.08) 48%, rgba(106,167,255,.08)) !important;
  border: 1px solid rgba(246,240,231,.38) !important;
  box-shadow: 0 20px 70px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.24) !important;
  backdrop-filter: blur(7px) saturate(1.15) !important;
  mix-blend-mode: screen !important;
}
.cursor-core.mode { width: 48px !important; height: 48px !important; background: rgba(246,240,231,.14) !important; }
.cursor-label.active { color: rgba(246,240,231,.92) !important; text-shadow: 0 16px 48px rgba(0,0,0,.48); }

.hero-device {
  min-height: 650px !important;
  border-radius: 54px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(246,240,231,.12) !important;
  box-shadow: 0 52px 180px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.hero-device::before,
.hero-device::after { display: none !important; }
.device-inner { padding: 0 !important; min-height: 650px !important; }

.idea-stage.ink-poster-stage {
  position: relative !important;
  min-height: 650px !important;
  border-radius: 54px !important;
  overflow: hidden !important;
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(5,7,10,.1), rgba(5,7,10,.52)),
    url("assets/images/hero-ink-moon.png") center / cover no-repeat !important;
  isolation: isolate;
  transform-style: preserve-3d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 -160px 190px rgba(0,0,0,.48) !important;
}
.idea-stage.ink-poster-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at calc(50% + var(--hx,0) * 120px) calc(45% + var(--hy,0) * 90px), rgba(255,247,222,.20), transparent 22%),
    radial-gradient(circle at 18% 80%, rgba(18,24,36,.50), transparent 30%),
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.08) 42%, rgba(5,8,15,.32));
  mix-blend-mode: normal;
  pointer-events: none;
}
.idea-stage.ink-poster-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.10) 12.05%, transparent 12.5%, transparent 88%, rgba(255,255,255,.08) 88.08%, transparent 88.5%),
    linear-gradient(0deg, transparent 0 12%, rgba(255,255,255,.08) 12.05%, transparent 12.4%, transparent 88%, rgba(255,255,255,.07) 88.05%, transparent 88.3%);
  opacity: .28;
}
.ink-surface-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: .95;
  mix-blend-mode: screen;
}
.ink-poster-noise {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .28;
  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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.ink-poster-top {
  position: absolute;
  left: 44px;
  top: 40px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  font: 950 10px/1 var(--font-mono);
  letter-spacing: .28em;
  color: rgba(246,240,231,.62);
}
.ink-poster-top::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f2d49b;
  box-shadow: 0 0 28px rgba(242,212,155,.55);
}
.ink-question-layer {
  position: absolute;
  left: 46px;
  right: 46px;
  bottom: 78px;
  z-index: 6;
  display: grid;
  gap: 22px;
  transform: translate3d(calc(var(--hx,0) * -12px), calc(var(--hy,0) * -10px), 0);
  transition: transform .4s var(--ease);
}
.ink-question-kicker {
  width: max-content;
  padding: 10px 13px;
  border-radius: 999px;
  border: 1px solid rgba(246,240,231,.18);
  background: rgba(4,7,12,.24);
  backdrop-filter: blur(16px);
  font: 950 10px/1 var(--font-mono);
  letter-spacing: .18em;
  color: rgba(246,240,231,.62);
}
.ink-question-title {
  max-width: 660px;
  margin: 0;
  font-size: clamp(46px, 5.2vw, 86px);
  line-height: .92;
  letter-spacing: -.09em;
  font-weight: 950;
  color: transparent;
  background: linear-gradient(105deg, #fffaf0 0%, #f6d19f 38%, #dce8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 24px 90px rgba(0,0,0,.24);
  text-wrap: balance;
  transition: opacity .42s ease, filter .42s ease, transform .42s var(--ease);
}
.ink-question-sub {
  max-width: 560px;
  color: rgba(246,240,231,.76);
  font-size: 16px;
  line-height: 1.75;
  margin: -4px 0 0;
  transition: opacity .42s ease, filter .42s ease, transform .42s var(--ease);
}
.ink-poster-stage.switching .ink-question-title,
.ink-poster-stage.switching .ink-question-sub,
.ink-poster-stage.switching .ink-question-kicker {
  opacity: .08;
  filter: blur(12px);
  transform: translateY(12px);
}
.ink-question-nav {
  position: absolute;
  right: 42px;
  top: 42px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ink-question-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(246,240,231,.36);
  background: rgba(246,240,231,.10);
  transition: height .35s var(--ease), background .35s ease, transform .35s var(--ease), border-color .35s ease;
}
.ink-question-dot.active {
  height: 38px;
  background: rgba(246,240,231,.82);
  border-color: rgba(246,240,231,.9);
}
.ink-question-dot:hover { transform: translateX(-4px); }
.ink-enter-line {
  position: absolute;
  left: 46px;
  bottom: 36px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(246,240,231,.66);
  font: 950 10px/1 var(--font-mono);
  letter-spacing: .22em;
}
.ink-enter-line::after {
  content: '';
  width: 96px;
  height: 1px;
  background: linear-gradient(90deg, rgba(246,240,231,.66), transparent);
  transform-origin: left center;
  animation: inkLine 2.8s ease-in-out infinite;
}
@keyframes inkLine { 0%,100%{ transform: scaleX(.55); opacity:.42; } 50%{ transform: scaleX(1); opacity: .9; } }
.idea-glow, .idea-ring, .idea-cursor-line, .idea-label, .idea-question-wrap, .idea-dots, .idea-enter, .floating-question, .question-flow-canvas { display: none !important; }

/* Moon entrance: a quiet object, no label, but more designed */
.play-object {
  width: 68px !important;
  height: 68px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.92), rgba(255,255,255,.35) 23%, transparent 24%),
    radial-gradient(circle at 70% 72%, rgba(107,122,145,.18), transparent 32%),
    linear-gradient(145deg, #fff6dc, #e2d4ad 56%, #a5b7d4) !important;
  color: transparent !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  box-shadow: 0 18px 70px rgba(255,236,185,.18), 0 32px 110px rgba(0,0,0,.32), inset -18px -16px 36px rgba(65,76,100,.16), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.play-object::before {
  content: '' !important;
  position: absolute;
  inset: -15px !important;
  border-radius: 50%;
  border: 1px solid rgba(255,246,220,.20) !important;
  opacity: .9 !important;
  transform: rotate(22deg) scaleX(1.34);
  animation: moonGateOrbit 5.6s linear infinite;
}
.play-object::after {
  content: '' !important;
  position: absolute;
  right: -5px !important;
  top: 9px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #fff2c9 !important;
  box-shadow: 0 0 24px rgba(255,242,201,.72), -42px 52px 0 -3px rgba(255,255,255,.38), -70px 18px 0 -4px rgba(255,255,255,.28) !important;
  display: block !important;
  opacity: .9 !important;
}
.play-object.revealed { animation: moonFloat 4.8s ease-in-out infinite, moonGateGlow 3.4s ease-in-out infinite !important; }
.play-object:hover { filter: brightness(1.08) saturate(1.05); transform: translate3d(0,-8px,0) scale(1.06) !important; }
@keyframes moonGateOrbit { to { transform: rotate(382deg) scaleX(1.34); } }
@keyframes moonGateGlow { 0%,100%{ box-shadow: 0 18px 70px rgba(255,236,185,.16), 0 32px 110px rgba(0,0,0,.32), inset -18px -16px 36px rgba(65,76,100,.16), inset 0 1px 0 rgba(255,255,255,.82); } 50%{ box-shadow: 0 28px 110px rgba(255,236,185,.30), 0 32px 110px rgba(0,0,0,.32), inset -18px -16px 36px rgba(65,76,100,.16), inset 0 1px 0 rgba(255,255,255,.82); } }

/* Healing hidden page, image-backed and less tech */
.moon-overlay {
  background:
    linear-gradient(180deg, rgba(248,239,223,.28), rgba(211,226,242,.18)),
    url("assets/images/moon-healing-bg.png") center / cover no-repeat !important;
  color: #25324a !important;
}
.moon-overlay::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  opacity: .55 !important;
  background:
    radial-gradient(circle at 50% 21%, rgba(255,247,219,.42), transparent 12%),
    radial-gradient(circle at 23% 76%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02)) !important;
  mask-image: none !important;
}
.moon-bg-orbit { display: none !important; }
.moon-stage { gap: 44px !important; }
.moon-player {
  position: relative;
  width: min(820px, calc(100vw - 42px)) !important;
  padding: 24px 28px !important;
  border-radius: 38px !important;
  background: rgba(255,255,255,.54) !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  box-shadow: 0 34px 130px rgba(81,104,138,.24), inset 0 1px 0 rgba(255,255,255,.82) !important;
  backdrop-filter: blur(24px) saturate(1.08) !important;
  color: #25324a !important;
}
.moon-player::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -18px;
  height: 36px;
  border-radius: 50%;
  background: rgba(85,105,134,.16);
  filter: blur(20px);
  z-index: -1;
}
.moon-record {
  width: 138px !important;
  height: 138px !important;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.96), rgba(255,255,255,.32) 21%, transparent 22%),
    radial-gradient(circle at 52% 50%, #fff6d9 0 22%, #dec990 23% 29%, rgba(255,255,255,.78) 30% 31%, #cad9ef 32% 62%, #97afce 63% 66%, #fff7e9 67%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 24px 80px rgba(87,111,145,.24) !important;
}
.moon-record span {
  inset: 18px !important;
  border: 1px solid rgba(89,108,139,.14) !important;
  box-shadow: inset 0 0 0 18px rgba(255,255,255,.08), inset 0 0 0 36px rgba(89,108,139,.05);
}
.moon-record i {
  right: -92px !important;
  top: 63px !important;
  width: 112px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(75,91,120,.36), rgba(255,255,255,.74), rgba(75,91,120,.10)) !important;
  transform: rotate(-14deg) !important;
}
.moon-record i::after {
  content:'';
  position:absolute;
  right:-9px;
  top:-6px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff4da;
  box-shadow:0 0 22px rgba(255,244,218,.8);
}
.moon-player-info small { color: rgba(37,50,74,.48) !important; }
.moon-player-info h3 {
  background: linear-gradient(105deg, #263146, #647894, #b98f72) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.moon-player-info p { color: rgba(37,50,74,.66) !important; }
.moon-play, .moon-close {
  background: rgba(255,255,255,.52) !important;
  color: #25324a !important;
  border-color: rgba(37,50,74,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.moon-lyrics { min-height: 330px !important; }
.lyric-line {
  color: rgba(37,50,74,.90) !important;
  font-weight: 700 !important;
  letter-spacing: -.045em !important;
  text-shadow: 0 18px 60px rgba(255,255,255,.28) !important;
  transition: opacity 1.65s var(--ease), transform 1.65s var(--ease), filter 1.65s ease !important;
}
.lyric-line.active { opacity: 1 !important; transform: translateY(0) scale(1) !important; filter: blur(0) !important; }
.lyric-line.fade { opacity: 0 !important; transform: translateY(-18px) scale(.985) !important; filter: blur(8px) !important; }
@media (max-width: 900px) {
  .idea-stage.ink-poster-stage, .hero-device, .device-inner { min-height: 560px !important; border-radius: 36px !important; }
  .ink-question-layer { left: 26px; right: 26px; bottom: 70px; }
  .ink-question-title { font-size: clamp(38px, 12vw, 66px); }
  .ink-question-nav { right: 26px; top: 28px; }
  .ink-poster-top { left: 26px; top: 28px; }
}

.moon-dust {
  position: fixed;
  z-index: 9001;
  width: var(--s, 6px);
  height: var(--s, 6px);
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255,244,211,.86);
  box-shadow: 0 0 20px rgba(255,244,211,.78);
  animation: moonDust var(--d, 1200ms) var(--ease) forwards;
}
@keyframes moonDust { to { opacity: 0; transform: translate3d(var(--x, 0), var(--y, -70px), 0) scale(.2); filter: blur(4px); } }

  

/* V18 focused patch: hero as ink-water poster, add AI journey page, softer hidden world */
.hero-title-world {
  font-size: clamp(72px, 8.8vw, 148px) !important;
  line-height: .83 !important;
  letter-spacing: -.105em !important;
}
.hero-title-world .dim {
  opacity: .42 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.22));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.hero-title-world .accent {
  background: linear-gradient(105deg, #fffaf2 0%, #ff6d5f 46%, #d2b6ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.hero-copy {
  font-size: clamp(20px, 1.9vw, 30px) !important;
  line-height: 1.42 !important;
  color: rgba(255,255,255,.78) !important;
  max-width: 720px !important;
}
.hero-copy.small-hook {
  margin-top: 14px !important;
  font-size: 16px !important;
  line-height: 1.84 !important;
  color: rgba(255,255,255,.55) !important;
  max-width: 660px !important;
}
.memory-stage {
  position: relative !important;
  min-height: 650px !important;
  border-radius: 54px !important;
  overflow: hidden !important;
  border: 1px solid rgba(245,238,222,.14) !important;
  background: #090d13 !important;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -190px 220px rgba(0,0,0,.48), 0 60px 180px rgba(0,0,0,.42) !important;
}
.memory-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(5,7,11,.70) 0%, rgba(5,7,11,.28) 42%, rgba(5,8,13,.10) 100%),
    linear-gradient(180deg, rgba(4,6,10,.08) 0%, rgba(4,6,10,.18) 52%, rgba(4,6,10,.72) 100%),
    url("assets/images/hero-ink-moon.png") center / cover no-repeat;
  transform: scale(1.045) translate3d(calc(var(--hx,0) * -14px), calc(var(--hy,0) * -10px), 0);
  filter: saturate(.86) contrast(1.06) brightness(.86);
  transition: transform .55s var(--ease), filter .55s ease;
}
.memory-stage:hover .memory-image { filter: saturate(.94) contrast(1.08) brightness(.93); }
.memory-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(50% + var(--hx,0) * 180px) calc(48% + var(--hy,0) * 120px), rgba(255,244,214,.20), transparent 22%),
    radial-gradient(circle at 78% 18%, rgba(150,185,255,.18), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(255,118,92,.13), transparent 34%);
  mix-blend-mode: screen;
  opacity: .86;
}
.memory-water-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .98;
}
.memory-grain {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.memory-topline {
  position: absolute;
  left: 42px;
  top: 38px;
  z-index: 8;
  display: flex;
  gap: 12px;
  align-items: center;
  color: rgba(255,246,226,.68);
  font: 950 10px/1 var(--font-mono);
  letter-spacing: .28em;
  text-transform: uppercase;
}
.memory-topline::before {
  content: '';
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,246,226,.82), transparent);
}
.memory-question-panel {
  position: absolute;
  left: 42px;
  right: 38px;
  bottom: 52px;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
}
.memory-kicker {
  width: max-content;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,246,226,.18);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(14px);
  color: rgba(255,246,226,.72);
  font: 950 10px/1 var(--font-mono);
  letter-spacing: .18em;
}
.memory-question {
  margin: 0;
  max-width: 760px;
  font-size: clamp(42px, 5.1vw, 86px);
  line-height: .95;
  letter-spacing: -.085em;
  color: transparent;
  background: linear-gradient(100deg, #fff8e8 0%, #f2d2a3 32%, #dfeaff 76%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-wrap: balance;
  text-shadow: 0 22px 90px rgba(0,0,0,.28);
}
.memory-sub {
  margin: 18px 0 0;
  max-width: 620px;
  color: rgba(255,246,226,.74);
  line-height: 1.76;
  font-size: 15px;
}
.memory-question, .memory-sub, .memory-kicker {
  transition: opacity .42s ease, filter .42s ease, transform .42s var(--ease);
}
.memory-stage.switching .memory-question,
.memory-stage.switching .memory-sub,
.memory-stage.switching .memory-kicker {
  opacity: .08;
  filter: blur(12px);
  transform: translateY(12px);
}
.memory-switcher {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 999px;
  background: rgba(8,10,14,.22);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
}
.memory-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,246,226,.34);
  background: rgba(255,246,226,.08);
  transition: height .34s var(--ease), background .34s ease, transform .34s var(--ease);
}
.memory-dot.active {
  height: 34px;
  background: rgba(255,246,226,.82);
}
.memory-dot:hover { transform: translateX(-4px); }
.memory-enter {
  position: absolute;
  left: 42px;
  bottom: 24px;
  z-index: 9;
  color: rgba(255,246,226,.68);
  font: 950 10px/1 var(--font-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.memory-enter::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 118px;
  height: 1px;
  margin-left: 14px;
  background: linear-gradient(90deg, rgba(255,246,226,.70), transparent);
  transform-origin: left center;
  animation: memoryEnterLine 2.7s ease-in-out infinite;
}
@keyframes memoryEnterLine { 0%,100%{ transform: scaleX(.42); opacity:.38;} 50%{ transform: scaleX(1); opacity:.92;} }
.ink-poster-top, .ink-question-nav, .ink-question-layer, .ink-enter-line, .ink-surface-canvas, .ink-poster-noise { display: none !important; }

.journey-section { position: relative; }
.journey-layout {
  display: grid;
  grid-template-columns: minmax(320px, .75fr) minmax(520px, 1.25fr);
  gap: clamp(34px, 5vw, 90px);
  align-items: center;
}
.journey-left h2 {
  margin: 0;
  font-size: clamp(42px, 5.6vw, 96px);
  line-height: .95;
  letter-spacing: -.075em;
  color: transparent;
  background: linear-gradient(110deg, #fff 0%, rgba(255,255,255,.72) 52%, rgba(255,255,255,.28) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.journey-intro {
  margin: 24px 0 0;
  max-width: 560px;
  color: rgba(255,255,255,.60);
  line-height: 1.85;
  font-size: 16px;
}
.journey-track {
  position: relative;
  display: grid;
  gap: 18px;
}
.journey-track::before {
  content: '';
  position: absolute;
  left: 29px;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.34), rgba(255,255,255,.04));
}
.journey-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 28px 30px;
  min-height: 150px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .4s var(--ease), border-color .4s ease, background .4s ease;
  overflow: hidden;
}
.journey-card::before {
  content: '';
  position: absolute;
  inset: -60% -30%;
  background: radial-gradient(circle at 22% 38%, rgba(239,81,63,.16), transparent 25%), radial-gradient(circle at 80% 62%, rgba(106,167,255,.15), transparent 28%);
  opacity: 0;
  transition: opacity .35s ease;
}
.journey-card:hover { transform: translateX(12px); border-color: rgba(255,255,255,.20); background: rgba(255,255,255,.075); }
.journey-card:hover::before { opacity: 1; }
.journey-card span {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.62);
  font: 950 12px/1 var(--font-mono);
  letter-spacing: .12em;
}
.journey-card h3, .journey-card p { position: relative; z-index: 1; }
.journey-card h3 { margin: 2px 0 12px; font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -.04em; }
.journey-card p { margin: 0; color: rgba(255,255,255,.58); line-height: 1.72; }

.play-object {
  width: 92px !important;
  height: 72px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  overflow: visible !important;
  transform-origin: 50% 72% !important;
}
.play-object::before {
  content: '' !important;
  position: absolute !important;
  left: 11px !important;
  bottom: 12px !important;
  width: 68px !important;
  height: 34px !important;
  border-radius: 8px 8px 28px 28px !important;
  background: linear-gradient(135deg, rgba(255,248,229,.96), rgba(219,231,245,.92)) !important;
  clip-path: polygon(0 35%, 48% 0, 100% 35%, 78% 100%, 20% 100%) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.9) !important;
  transform: rotate(-3deg) !important;
  animation: boatFloat 4.6s ease-in-out infinite !important;
}
.play-object::after {
  content: '' !important;
  position: absolute !important;
  right: 7px !important;
  top: 1px !important;
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 28%, #fff8dd, #e8d19a 68%, #9fb1cc 100%) !important;
  box-shadow: 0 0 34px rgba(255,236,184,.68), -48px 38px 0 -12px rgba(255,255,255,.70), -26px -2px 0 -13px rgba(255,255,255,.56) !important;
  opacity: .96 !important;
  animation: tinyMoonPulse 3.6s ease-in-out infinite !important;
}
.play-object.revealed { animation: boatDrift 5.8s ease-in-out infinite !important; }
.play-object:hover { transform: translate3d(-4px,-10px,0) rotate(-4deg) scale(1.06) !important; }
.play-object.opening::before { animation: boatOpen .72s var(--ease) forwards !important; }
@keyframes boatFloat { 0%,100%{ transform: translateY(0) rotate(-3deg);} 50%{ transform: translateY(-7px) rotate(2deg);} }
@keyframes tinyMoonPulse { 0%,100%{ transform: scale(1); opacity:.9;} 50%{ transform: scale(1.12); opacity:1;} }
@keyframes boatDrift { 0%,100%{ translate:0 0;} 50%{ translate:0 -9px;} }
@keyframes boatOpen { to { transform: translateY(-16px) rotate(14deg) scale(1.18); opacity:.10;} }
.play-thread { display: none !important; }
.moon-dust {
  position: fixed;
  z-index: 10000;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,245,214,.86);
  box-shadow: 0 0 18px rgba(255,236,184,.65);
  animation: dustDrift var(--d) ease-out forwards;
}
@keyframes dustDrift { to { transform: translate3d(var(--x), var(--y), 0) scale(.12); opacity:0;} }

.moon-overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,244,207,.78), rgba(255,244,207,.24) 11%, transparent 24%),
    linear-gradient(180deg, #f6ead7 0%, #dae8ee 42%, #b8cedd 67%, #7f9ab4 100%) !important;
  color: #2a3545 !important;
  backdrop-filter: none !important;
}
.moon-overlay::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.06) 42%, rgba(84,111,137,.18)),
    url("assets/images/moon-healing-bg.png") center bottom / cover no-repeat !important;
  opacity: .9 !important;
  mask-image: none !important;
}
.moon-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 26%, rgba(255,255,255,.70) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 34%, rgba(255,255,255,.54) 0 1px, transparent 1.7px),
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.42) 0 1px, transparent 1.8px);
  background-size: 240px 180px, 310px 220px, 420px 260px;
  opacity: .55;
  animation: starBreathe 7s ease-in-out infinite;
}
@keyframes starBreathe { 0%,100%{opacity:.36;} 50%{opacity:.72;} }
.moon-stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid !important;
  grid-template-columns: minmax(320px, .85fr) minmax(420px, 1.15fr);
  align-items: center;
  gap: clamp(34px, 6vw, 92px) !important;
  padding: clamp(52px, 8vw, 110px) !important;
}
.moon-player {
  width: min(430px, 88vw) !important;
  min-height: 540px;
  border-radius: 48px !important;
  display: grid;
  place-items: center;
  padding: 34px !important;
  background: rgba(255,255,255,.42) !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  box-shadow: 0 40px 130px rgba(65,87,106,.22), inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter: blur(26px) saturate(1.04) !important;
}
.moon-player::before {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 36px;
  border: 1px solid rgba(255,255,255,.36);
  pointer-events: none;
}
.moon-record {
  width: 214px !important;
  height: 214px !important;
  border-radius: 50% !important;
  margin: 12px auto 32px !important;
  position: relative;
  background:
    radial-gradient(circle at 35% 30%, #fff7da 0 13%, transparent 14%),
    radial-gradient(circle, #fff1c7 0 24%, #d6e2ed 25% 43%, #90a8bd 44% 62%, #f1e5c8 63% 100%) !important;
  box-shadow: 0 28px 90px rgba(77,99,120,.22), inset -24px -22px 42px rgba(75,95,118,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
  animation: recordBreathe 5.8s ease-in-out infinite;
}
.moon-record::before {
  content: '';
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: inset 0 0 0 22px rgba(255,255,255,.09), inset 0 0 0 44px rgba(255,255,255,.055);
}
.moon-record::after {
  content: '';
  position: absolute;
  right: -42px;
  top: 34px;
  width: 98px;
  height: 2px;
  background: linear-gradient(90deg, rgba(84,102,119,.55), rgba(255,255,255,.12));
  transform: rotate(-35deg);
  transform-origin: right center;
  box-shadow: 0 0 16px rgba(255,255,255,.24);
}
.moon-record span {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: rgba(70,85,106,.42);
  box-shadow: 0 0 0 12px rgba(255,255,255,.18);
}
.moon-record i { display: none !important; }
.moon-record.playing { animation: moonSpin 8s linear infinite; }
@keyframes recordBreathe { 0%,100%{ transform: translateY(0) scale(1);} 50%{ transform: translateY(-6px) scale(1.015);} }
@keyframes moonSpin { to { transform: rotate(360deg); } }
.moon-player-info {
  text-align: center;
}
.moon-player-info small {
  color: rgba(42,53,69,.48) !important;
  letter-spacing: .2em !important;
}
.moon-player-info h3 {
  margin: 14px 0 10px !important;
  color: #2c3747 !important;
  font-size: 34px !important;
  letter-spacing: -.04em !important;
}
.moon-player-info p {
  max-width: 310px;
  margin: 0 auto 22px !important;
  color: rgba(42,53,69,.58) !important;
  line-height: 1.8 !important;
}
.moon-play {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 26px !important;
  background: #fff6df !important;
  color: #2b3544 !important;
  box-shadow: 0 14px 42px rgba(78,96,113,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
  font: 950 11px/1 var(--font-mono) !important;
  letter-spacing: .18em !important;
}
.moon-lyrics {
  max-width: 740px !important;
  min-height: 360px !important;
  display: grid !important;
  align-content: center !important;
  gap: 14px !important;
  color: #263345 !important;
}
.lyric-line {
  font-size: clamp(24px, 3vw, 48px) !important;
  line-height: 1.32 !important;
  letter-spacing: -.04em !important;
  color: rgba(38,51,69,.22) !important;
  opacity: .18 !important;
  transform: translateY(22px) scale(.985) !important;
  filter: blur(8px) !important;
  transition: opacity 1.5s ease, filter 1.5s ease, transform 1.5s var(--ease), color 1.5s ease !important;
}
.lyric-line.active {
  opacity: 1 !important;
  color: rgba(38,51,69,.88) !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
}
.lyric-line.fade {
  opacity: .30 !important;
  color: rgba(38,51,69,.36) !important;
  transform: translateY(-16px) scale(.992) !important;
  filter: blur(3px) !important;
}
.moon-close {
  background: rgba(255,255,255,.48) !important;
  border-color: rgba(255,255,255,.76) !important;
  color: #2a3545 !important;
}
@media (max-width: 980px) {
  .journey-layout, .moon-stage { grid-template-columns: 1fr; }
  .memory-question-panel { grid-template-columns: 1fr; }
  .memory-switcher { grid-auto-flow: column; width: max-content; }
  .memory-dot.active { width: 34px; height: 10px; }
}



/* =========================
   V19 focused polish: hero poster, AI journey page, page-wide water wake, healing moon page
   ========================= */
#globalWaterV19 {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 8700;
  mix-blend-mode: screen;
  opacity: .58;
}
#water-cursor { display: none !important; }
.cursor-core {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: rgba(246,240,231,.13) !important;
  border: 1px solid rgba(246,240,231,.50) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 12px 40px rgba(255,255,255,.055) !important;
  backdrop-filter: blur(4px) saturate(1.15) !important;
  mix-blend-mode: normal !important;
  transition: opacity .18s ease, width .18s var(--ease), height .18s var(--ease), border-radius .18s ease, background .18s ease !important;
}
.cursor-core.moving {
  width: calc(24px * var(--sx, 1)) !important;
  height: calc(24px * var(--sy, 1)) !important;
  transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) !important;
  border-radius: 70% 42% 45% 68% / 52% 44% 60% 46% !important;
  background: rgba(246,240,231,.18) !important;
}
.cursor-core.mode {
  width: 42px !important;
  height: 42px !important;
  background: rgba(246,240,231,.20) !important;
  border-color: rgba(246,240,231,.62) !important;
}
.cursor-label.active { color: rgba(246,240,231,.84) !important; text-shadow: 0 10px 26px rgba(0,0,0,.4); }

.hero-grid {
  grid-template-columns: minmax(430px, .84fr) minmax(620px, 1.16fr) !important;
  gap: clamp(40px, 5vw, 86px) !important;
  align-items: center !important;
}
.hero-title-world { font-size: clamp(72px, 8.2vw, 140px) !important; }
.hero-copy { max-width: 680px !important; }
.hero-device {
  position: relative !important;
  min-height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}
.device-inner { min-height: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
#heroMap.v19-hero-poster {
  position: relative !important;
  width: min(760px, 48vw) !important;
  min-height: clamp(560px, 43vw, 690px) !important;
  margin: 0 auto !important;
  border-radius: clamp(34px, 3.4vw, 58px) !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(4,7,12,.68) 0%, rgba(6,9,15,.26) 45%, rgba(6,9,15,.06) 100%),
    linear-gradient(180deg, rgba(6,8,12,.10) 0%, rgba(6,8,12,.10) 52%, rgba(4,5,8,.72) 100%),
    url("assets/images/hero-ink-moon.png") center / cover no-repeat !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), inset 0 -140px 180px rgba(0,0,0,.50), 0 52px 170px rgba(0,0,0,.45) !important;
  isolation: isolate !important;
  transform: translate3d(calc(var(--hx,0) * -8px), calc(var(--hy,0) * -7px), 0) !important;
  transition: transform .6s var(--ease), box-shadow .6s ease, filter .6s ease !important;
}
#heroMap.v19-hero-poster:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 -140px 180px rgba(0,0,0,.42), 0 64px 190px rgba(0,0,0,.50) !important; }
#heroMap.v19-hero-poster::before {
  content: '';
  position: absolute;
  inset: 26px;
  z-index: 2;
  border-radius: calc(clamp(34px, 3.4vw, 58px) - 16px);
  border: 1px solid rgba(255,246,226,.12);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
#heroMap.v19-hero-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(50% + var(--hx,0) * 130px) calc(44% + var(--hy,0) * 110px), rgba(255,241,205,.18), transparent 22%),
    linear-gradient(120deg, transparent 0 44%, rgba(255,255,255,.07) 49%, transparent 54%),
    radial-gradient(circle at 18% 78%, rgba(255,92,76,.13), transparent 34%),
    radial-gradient(circle at 83% 22%, rgba(118,170,255,.16), transparent 34%);
  mix-blend-mode: screen;
}
.v19-poster-grain {
  position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' 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='220' height='220' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.v19-poster-top {
  position:absolute; left:44px; top:42px; z-index:8;
  display:flex; align-items:center; gap:12px;
  color:rgba(255,247,228,.68); font:950 10px/1 var(--font-mono); letter-spacing:.28em; text-transform:uppercase;
}
.v19-poster-top::before { content:''; width:42px; height:1px; background:linear-gradient(90deg, rgba(255,247,228,.84), transparent); }
.v19-question-layer {
  position:absolute; left:44px; right:92px; bottom:70px; z-index:8;
}
.v19-question-kicker {
  width:max-content; margin-bottom:16px; padding:8px 13px; border-radius:999px;
  border:1px solid rgba(255,247,228,.16); background:rgba(0,0,0,.18); backdrop-filter:blur(16px);
  color:rgba(255,247,228,.74); font:950 10px/1 var(--font-mono); letter-spacing:.16em;
}
.v19-question-title {
  max-width: 720px; margin:0; font-size:clamp(48px, 5.15vw, 88px); line-height:.92; letter-spacing:-.09em;
  color:transparent; background:linear-gradient(103deg, #fff9ec 0%, #f2cf9d 34%, #dce8ff 80%, #fff 100%);
  -webkit-background-clip:text; background-clip:text; text-shadow:0 28px 90px rgba(0,0,0,.30); text-wrap:balance;
}
.v19-question-sub { max-width:560px; margin:18px 0 0; color:rgba(255,247,228,.76); line-height:1.72; font-size:15px; }
.v19-question-layer, .v19-question-title, .v19-question-sub, .v19-question-kicker { transition:opacity .52s ease, filter .52s ease, transform .52s var(--ease); }
.v19-hero-poster.switching .v19-question-title,
.v19-hero-poster.switching .v19-question-sub,
.v19-hero-poster.switching .v19-question-kicker { opacity:.08; filter:blur(14px); transform:translateY(16px); }
.v19-question-nav {
  position:absolute; right:42px; bottom:76px; z-index:10; display:grid; gap:11px; padding:12px;
  border:1px solid rgba(255,247,228,.11); background:rgba(4,7,12,.20); border-radius:999px; backdrop-filter:blur(18px);
}
.v19-question-dot { width:10px; height:10px; border-radius:999px; padding:0; border:1px solid rgba(255,247,228,.38); background:rgba(255,247,228,.08); transition:height .34s var(--ease), background .34s ease, transform .34s var(--ease); }
.v19-question-dot.active { height:36px; background:rgba(255,247,228,.84); }
.v19-question-dot:hover { transform:translateX(-4px); }
.v19-enter-line { position:absolute; left:44px; bottom:34px; z-index:9; color:rgba(255,247,228,.66); font:950 10px/1 var(--font-mono); letter-spacing:.22em; text-transform:uppercase; }
.v19-enter-line::after { content:''; display:inline-block; width:110px; height:1px; margin-left:14px; vertical-align:middle; background:linear-gradient(90deg, rgba(255,247,228,.68), transparent); animation:v19Line 2.8s ease-in-out infinite; transform-origin:left center; }
@keyframes v19Line { 0%,100%{transform:scaleX(.48); opacity:.44;} 50%{transform:scaleX(1); opacity:.95;} }
.idea-glow, .idea-ring, .idea-cursor-line, .idea-label, .idea-question-wrap, .idea-dots, .idea-enter, .floating-question, .question-flow-canvas, .memory-image, .memory-water-canvas, .memory-vignette, .memory-grain, .memory-topline, .memory-question-panel, .memory-enter { display:none !important; }

/* AI Journey page */
.journey-v19 .journey-layout {
  grid-template-columns: minmax(380px, .9fr) minmax(620px, 1.1fr) !important;
  gap: clamp(42px, 5.8vw, 96px) !important;
  align-items: center !important;
}
.journey-v19 .journey-left { position:relative; z-index:2; }
.journey-v19 .journey-left h2 {
  font-size: clamp(56px, 6.8vw, 116px) !important;
  line-height: .88 !important;
  letter-spacing: -.09em !important;
  background: linear-gradient(110deg, #fff 0%, rgba(255,255,255,.84) 44%, rgba(255,255,255,.25) 100%) !important;
  -webkit-background-clip: text !important; background-clip:text !important; color: transparent !important;
}
.journey-v19 .journey-intro { max-width:620px !important; color:rgba(255,255,255,.68) !important; line-height:1.82 !important; font-size:16px !important; }
.journey-v19 .journey-intro.sub { margin-top:14px !important; color:rgba(255,255,255,.50) !important; font-size:15px !important; }
.journey-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.journey-pills span { padding:9px 13px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11); color:rgba(255,255,255,.58); font:850 11px/1 var(--font-mono); letter-spacing:.08em; }
.journey-map {
  position: relative; min-height: 680px; border-radius: 46px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(246,240,231,.10), transparent 22%),
    radial-gradient(circle at 18% 72%, rgba(239,81,63,.12), transparent 36%),
    radial-gradient(circle at 82% 24%, rgba(106,167,255,.14), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 50px 160px rgba(0,0,0,.30);
}
.journey-map-bg { position:absolute; inset:0; opacity:.42; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(circle at 50% 50%, black, transparent 76%); }
.journey-map::before { content:''; position:absolute; inset:80px 70px; border-radius:50%; border:1px solid rgba(255,255,255,.10); transform:rotate(-12deg) scaleX(1.34); }
.journey-map::after { content:''; position:absolute; left:10%; right:10%; top:50%; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform:rotate(-13deg); }
.journey-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:220px; height:220px; border-radius:50%; display:grid; place-items:center; text-align:center; z-index:2; background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.26), transparent 28%), linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.045)); border:1px solid rgba(255,255,255,.16); box-shadow:0 28px 100px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter:blur(18px); }
.journey-core small { display:block; margin-bottom:12px; color:rgba(255,255,255,.44); font:950 10px/1 var(--font-mono); letter-spacing:.2em; }
.journey-core b { color:rgba(255,255,255,.92); font-size:28px; line-height:1.16; letter-spacing:-.04em; }
.journey-node { position:absolute; z-index:3; width:min(284px, 32%); padding:20px 20px 18px; border-radius:26px; background:rgba(9,12,18,.38); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(18px); transition:transform .42s var(--ease), background .42s ease, border-color .42s ease; }
.journey-node:hover { transform:translateY(-8px) scale(1.02); background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.22); }
.journey-node span { display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:14px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.62); font:950 10px/1 var(--font-mono); }
.journey-node h3 { margin:0 0 10px; font-size:21px; letter-spacing:-.04em; color:rgba(255,255,255,.90); }
.journey-node p { margin:0; color:rgba(255,255,255,.56); line-height:1.66; font-size:14px; }
.node-a { left:7%; top:8%; } .node-b { right:8%; top:10%; } .node-c { left:7%; bottom:12%; } .node-d { right:8%; bottom:12%; } .node-e { left:50%; top:8%; transform:translateX(-50%); width:300px; }
.node-e:hover { transform:translateX(-50%) translateY(-8px) scale(1.02); }

/* Easter gate: moon compass, appears only after contact */
.play-object {
  position: fixed !important; right: 34px !important; bottom: 34px !important; z-index: 9100 !important;
  width: 74px !important; height: 74px !important; border-radius: 28px !important;
  opacity: 0 !important; pointer-events: none !important;
  background: rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important;
  color: transparent !important; overflow: visible !important; backdrop-filter: blur(18px) !important;
  box-shadow: 0 24px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.13) !important;
  transition: opacity .7s ease, transform .7s var(--ease), filter .5s ease !important;
}
.play-object.revealed { opacity: 1 !important; pointer-events: auto !important; animation: v19GateFloat 4.8s ease-in-out infinite !important; }
.play-object::before { content:'' !important; position:absolute !important; inset:16px !important; border-radius:50% !important; background:radial-gradient(circle at 35% 28%, #fff9dd, #dbc996 54%, #aabbd8 100%) !important; box-shadow:0 0 34px rgba(255,239,190,.30), inset -8px -9px 18px rgba(52,65,89,.18) !important; clip-path: circle(50% at 50% 50%) !important; animation:v19MoonBreathe 3.8s ease-in-out infinite !important; }
.play-object::after { content:'' !important; position:absolute !important; inset:6px !important; border-radius:50% !important; border:1px solid rgba(255,246,218,.18) !important; transform:rotate(18deg) scaleX(1.38) !important; opacity:.9 !important; background:none !important; box-shadow:none !important; animation:v19GateOrbit 6s linear infinite !important; }
.play-object .gate-star { position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(255,246,218,.86); box-shadow:0 0 18px rgba(255,246,218,.72); opacity:0; transform:translate(-50%,-50%) scale(.4); transition:opacity .28s ease, transform .45s var(--ease); }
.play-object.revealed:hover { filter:brightness(1.12); transform:translateY(-8px) scale(1.04) !important; }
.play-object.revealed:hover .gate-star { opacity:1; transform:translate(-50%,-50%) scale(1); }
@keyframes v19GateFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@keyframes v19MoonBreathe { 0%,100%{ transform:scale(1); filter:brightness(1);} 50%{ transform:scale(1.08); filter:brightness(1.08);} }
@keyframes v19GateOrbit { to { transform:rotate(378deg) scaleX(1.38); } }

/* Healing hidden page: full-screen independent world */
body.moon-open { overflow:hidden; }
body.moon-open main, body.moon-open .topbar, body.moon-open .page-dots { filter: blur(18px) saturate(.8); opacity:.18; }
.moon-overlay {
  position:fixed !important; inset:0 !important; z-index:9600 !important;
  display:block !important; place-items:unset !important; overflow:hidden !important;
  background:
    radial-gradient(circle at 52% 16%, rgba(255,247,218,.82), rgba(255,247,218,.24) 9%, transparent 20%),
    radial-gradient(circle at 18% 78%, rgba(255,255,255,.42), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(189,213,229,.38), transparent 36%),
    linear-gradient(180deg, #f8ecdc 0%, #dcecf1 34%, #b9d4df 62%, #829eb8 100%) !important;
  color:#26364b !important;
  opacity:0; pointer-events:none; transform:translateY(22px) scale(1.015); filter:blur(14px);
  transition:opacity 1s ease, transform 1s var(--ease), filter 1s ease !important;
}
.moon-overlay.open { opacity:1 !important; pointer-events:auto !important; transform:translateY(0) scale(1) !important; filter:blur(0) !important; }
.moon-overlay::before { content:'' !important; position:absolute !important; inset:0 !important; opacity:.72 !important; background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 44%, rgba(67,93,120,.18)), url("assets/images/moon-healing-bg.png") center bottom / cover no-repeat !important; mask-image:none !important; }
.moon-overlay::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size:96px 96px; mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.8) 18%, transparent 86%); opacity:.22; }
.moon-bg-orbit { display:none !important; }
.moon-stage { position:relative !important; z-index:2 !important; min-height:100vh !important; width:min(1380px, calc(100vw - 80px)) !important; margin:0 auto !important; display:grid !important; grid-template-columns:minmax(360px,.78fr) minmax(520px,1.22fr) !important; align-items:center !important; gap:clamp(42px, 7vw, 120px) !important; padding:clamp(44px,6vw,90px) 0 !important; }
.moon-player { position:relative !important; width:min(420px, 90vw) !important; min-height:560px !important; display:grid !important; align-content:center !important; justify-items:center !important; border-radius:54px !important; padding:42px 34px !important; background:rgba(255,255,255,.48) !important; border:1px solid rgba(255,255,255,.68) !important; box-shadow:0 42px 140px rgba(76,103,132,.25), inset 0 1px 0 rgba(255,255,255,.92) !important; backdrop-filter:blur(28px) saturate(1.05) !important; color:#26364b !important; }
.moon-player::before { content:'MOON RADIO' !important; position:absolute; left:34px; top:30px; color:rgba(38,54,75,.42); font:950 10px/1 var(--font-mono); letter-spacing:.24em; }
.moon-player::after { content:''; position:absolute; left:34px; right:34px; bottom:32px; height:1px; background:linear-gradient(90deg, transparent, rgba(38,54,75,.18), transparent); }
.moon-record { position:relative !important; width:210px !important; height:210px !important; margin:24px auto 34px !important; border-radius:50% !important; background:radial-gradient(circle at 38% 30%, rgba(255,255,255,.95), rgba(255,255,255,.32) 18%, transparent 19%), radial-gradient(circle, #fff5d1 0 28%, #d7c08a 29% 31%, #dce9f4 32% 58%, #92aac6 59% 61%, #fff7e7 62% 100%) !important; box-shadow:0 34px 100px rgba(87,111,145,.26), inset -18px -20px 44px rgba(76,94,122,.16), inset 0 1px 0 rgba(255,255,255,.9) !important; animation:recordBreathe 5.8s ease-in-out infinite !important; }
.moon-record::before { content:'' !important; position:absolute; inset:34px !important; border-radius:50% !important; border:1px solid rgba(82,104,132,.14) !important; box-shadow:inset 0 0 0 23px rgba(255,255,255,.10), inset 0 0 0 48px rgba(80,102,130,.05) !important; }
.moon-record::after { content:'' !important; position:absolute; right:-74px !important; top:54px !important; width:124px !important; height:3px !important; border-radius:999px !important; background:linear-gradient(90deg, rgba(77,96,120,.44), rgba(255,255,255,.28)) !important; transform:rotate(-36deg) !important; transform-origin:right center !important; box-shadow:0 8px 28px rgba(84,105,132,.16) !important; }
.moon-record span { position:absolute !important; left:50% !important; top:50% !important; width:20px !important; height:20px !important; margin:-10px 0 0 -10px !important; border-radius:50% !important; background:rgba(62,80,106,.36) !important; box-shadow:0 0 0 14px rgba(255,255,255,.20) !important; }
.moon-record i { display:none !important; }
.moon-player-info { text-align:center !important; }
.moon-player-info small { color:rgba(38,54,75,.44) !important; font:950 10px/1 var(--font-mono) !important; letter-spacing:.22em !important; }
.moon-player-info h3 { margin:15px 0 10px !important; font-size:38px !important; letter-spacing:-.05em !important; color:#26364b !important; }
.moon-player-info p { max-width:310px !important; margin:0 auto 24px !important; color:rgba(38,54,75,.58) !important; line-height:1.84 !important; }
.moon-play { border:0 !important; border-radius:999px !important; padding:15px 28px !important; background:#fff5dc !important; color:#26364b !important; box-shadow:0 18px 50px rgba(86,111,139,.18), inset 0 1px 0 rgba(255,255,255,.9) !important; font:950 11px/1 var(--font-mono) !important; letter-spacing:.18em !important; }
.moon-lyrics { max-width:760px !important; min-height:420px !important; display:grid !important; align-content:center !important; gap:18px !important; }
.lyric-line { font-size:clamp(25px, 3.25vw, 52px) !important; line-height:1.32 !important; letter-spacing:-.045em !important; color:rgba(38,54,75,.16) !important; opacity:.15 !important; transform:translateY(30px) scale(.985) !important; filter:blur(10px) !important; transition:opacity 1.9s ease, transform 1.9s var(--ease), filter 1.9s ease, color 1.9s ease !important; }
.lyric-line.active { opacity:1 !important; color:rgba(38,54,75,.90) !important; transform:translateY(0) scale(1) !important; filter:blur(0) !important; }
.lyric-line.fade { opacity:.32 !important; color:rgba(38,54,75,.36) !important; transform:translateY(-22px) scale(.99) !important; filter:blur(3px) !important; }
.moon-close { right:34px !important; top:28px !important; width:48px !important; height:48px !important; border-radius:50% !important; background:rgba(255,255,255,.48) !important; border:1px solid rgba(255,255,255,.68) !important; color:#26364b !important; }
@media (max-width: 1120px) {
  .hero-grid, .journey-v19 .journey-layout, .moon-stage { grid-template-columns:1fr !important; }
  #heroMap.v19-hero-poster { width:min(760px, 100%) !important; }
  .journey-map { min-height:auto; display:grid; gap:16px; padding:24px; }
  .journey-core, .journey-node { position:relative; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; transform:none !important; width:auto !important; }
  .journey-map::before, .journey-map::after { display:none; }
}



/* =========================
   V20 targeted rebuild: cinematic hero, distinct AI journey map, page-wide water displacement, ritual moon world
   ========================= */
#globalWaterV19 { display: none !important; }
#globalWaterV20 {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 8800;
  mix-blend-mode: screen;
  opacity: .52;
}
.cursor-core {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: rgba(246,240,231,.13) !important;
  border: 1px solid rgba(246,240,231,.50) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 12px 40px rgba(255,255,255,.055) !important;
  backdrop-filter: blur(4px) saturate(1.15) !important;
  mix-blend-mode: normal !important;
}
.cursor-core.moving {
  width: calc(24px * var(--sx, 1)) !important;
  height: calc(24px * var(--sy, 1)) !important;
  transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) !important;
  border-radius: 70% 42% 45% 68% / 52% 44% 60% 46% !important;
  background: rgba(246,240,231,.18) !important;
}
.cursor-core.mode {
  width: 42px !important;
  height: 42px !important;
  background: rgba(246,240,231,.20) !important;
  border-color: rgba(246,240,231,.62) !important;
}
.hero-grid {
  grid-template-columns: minmax(390px, .78fr) minmax(720px, 1.22fr) !important;
  align-items: center !important;
  gap: clamp(52px, 6vw, 104px) !important;
}
.hero-title-world {
  font-size: clamp(76px, 8.6vw, 150px) !important;
  line-height: .82 !important;
  letter-spacing: -.105em !important;
}
.hero-title-world .dim { opacity:.46 !important; }
.hero-copy { max-width: 690px !important; }
.hero-device, .device-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
#heroMap.v20-hero-poster {
  position: relative !important;
  width: min(880px, 54vw) !important;
  min-height: clamp(560px, 41vw, 680px) !important;
  margin: 0 auto !important;
  border-radius: clamp(36px, 3.6vw, 62px) !important;
  overflow: hidden !important;
  background: #0b1119 !important;
  isolation: isolate !important;
  border: 1px solid rgba(255,246,226,.18) !important;
  box-shadow: 0 60px 180px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -130px 170px rgba(0,0,0,.55) !important;
  transform-style: preserve-3d !important;
  transform: perspective(1100px) rotateX(calc(var(--hy,0) * -3deg)) rotateY(calc(var(--hx,0) * 4deg)) translate3d(calc(var(--hx,0) * -8px), calc(var(--hy,0) * -8px), 0) !important;
  transition: transform .45s var(--ease), box-shadow .45s ease !important;
}
#heroMap.v20-hero-poster:hover {
  box-shadow: 0 72px 210px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -130px 170px rgba(0,0,0,.46) !important;
}
.v20-hero-bg {
  position:absolute; inset:-2%; z-index:0;
  background:
    linear-gradient(90deg, rgba(4,6,10,.72) 0%, rgba(4,7,12,.38) 45%, rgba(4,7,12,.10) 100%),
    linear-gradient(180deg, rgba(6,8,12,.08) 0%, rgba(6,8,12,.18) 54%, rgba(4,5,8,.76) 100%),
    url("assets/images/hero-ink-moon.png") center / cover no-repeat;
  filter: saturate(.9) contrast(1.08) brightness(.9);
  transform: translate3d(calc(var(--hx,0) * -18px), calc(var(--hy,0) * -12px), 0) scale(1.05);
  transition: transform .48s var(--ease), filter .48s ease;
}
.v20-hero-poster:hover .v20-hero-bg { filter: saturate(.98) contrast(1.1) brightness(.96); }
.v20-hero-fog,
.v20-hero-light,
.v20-hero-grain,
.v20-hero-frame,
.v20-hero-water { position:absolute; inset:0; pointer-events:none; }
.v20-hero-fog { z-index:1; opacity:.54; background: radial-gradient(ellipse at calc(30% + var(--hx,0) * 14%) calc(62% + var(--hy,0) * 8%), rgba(238,231,216,.22), transparent 29%), radial-gradient(ellipse at 58% 74%, rgba(128,151,170,.20), transparent 38%); mix-blend-mode: screen; filter: blur(8px); }
.v20-hero-light { z-index:2; background: radial-gradient(circle at calc(55% + var(--hx,0) * 18%) calc(45% + var(--hy,0) * 14%), rgba(255,240,200,.20), transparent 24%), linear-gradient(120deg, transparent 0 43%, rgba(255,255,255,.075) 48%, transparent 55%); mix-blend-mode: screen; }
.v20-hero-water { z-index:4; mix-blend-mode: screen; opacity:.72; }
.v20-hero-grain { z-index:6; opacity:.22; mix-blend-mode: soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' 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='220' height='220' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E"); }
.v20-hero-frame { z-index:7; inset:30px; border-radius:calc(clamp(36px, 3.6vw, 62px) - 18px); border:1px solid rgba(255,246,226,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.025); }
.v20-hero-top {
  position:absolute; left:48px; top:46px; z-index:8; display:flex; align-items:center; gap:12px;
  color:rgba(255,247,228,.68); font:950 10px/1 var(--font-mono); letter-spacing:.28em; text-transform:uppercase;
}
.v20-hero-top::before { content:''; width:48px; height:1px; background:linear-gradient(90deg, rgba(255,247,228,.86), transparent); }
.v20-question-layer { position:absolute; left:50px; right:112px; bottom:70px; z-index:8; transform:translateZ(32px); }
.v20-question-kicker { width:max-content; margin-bottom:16px; padding:8px 13px; border-radius:999px; border:1px solid rgba(255,247,228,.16); background:rgba(0,0,0,.20); backdrop-filter:blur(18px); color:rgba(255,247,228,.74); font:950 10px/1 var(--font-mono); letter-spacing:.16em; }
.v20-question-title { margin:0; max-width:730px; font-size:clamp(50px, 5vw, 88px); line-height:.92; letter-spacing:-.09em; color:transparent; background:linear-gradient(105deg,#fff8e8 0%,#f5d39d 34%,#dce9ff 78%,#fff 100%); -webkit-background-clip:text; background-clip:text; text-shadow:0 28px 90px rgba(0,0,0,.34); text-wrap:balance; }
.v20-question-sub { max-width:620px; margin:18px 0 0; color:rgba(255,247,228,.76); line-height:1.76; font-size:15px; }
.v20-question-layer, .v20-question-title, .v20-question-sub, .v20-question-kicker { transition: opacity .58s ease, filter .58s ease, transform .58s var(--ease); }
.v20-hero-poster.switching .v20-question-title, .v20-hero-poster.switching .v20-question-sub, .v20-hero-poster.switching .v20-question-kicker { opacity:.05; filter:blur(16px); transform:translateY(18px); }
.v20-question-nav { position:absolute; right:42px; bottom:78px; z-index:10; display:grid; gap:11px; padding:12px; border:1px solid rgba(255,247,228,.13); background:rgba(4,7,12,.22); border-radius:999px; backdrop-filter:blur(18px); }
.v20-question-dot { width:10px; height:10px; border-radius:999px; border:1px solid rgba(255,247,228,.38); background:rgba(255,247,228,.08); padding:0; transition:height .34s var(--ease), background .34s ease, transform .34s var(--ease); }
.v20-question-dot.active { height:36px; background:rgba(255,247,228,.84); }
.v20-question-dot:hover { transform:translateX(-4px); }
.v20-enter-line { position:absolute; left:50px; bottom:34px; z-index:9; color:rgba(255,247,228,.66); font:950 10px/1 var(--font-mono); letter-spacing:.22em; text-transform:uppercase; }
.v20-enter-line::after { content:''; display:inline-block; width:128px; height:1px; margin-left:14px; vertical-align:middle; background:linear-gradient(90deg, rgba(255,247,228,.68), transparent); animation:v20Line 2.8s ease-in-out infinite; transform-origin:left center; }
@keyframes v20Line { 0%,100%{transform:scaleX(.42); opacity:.42;} 50%{transform:scaleX(1); opacity:.96;} }
#heroMap.v20-hero-poster .idea-glow, #heroMap.v20-hero-poster .idea-ring, #heroMap.v20-hero-poster .idea-cursor-line, #heroMap.v20-hero-poster .idea-label, #heroMap.v20-hero-poster .idea-question-wrap, #heroMap.v20-hero-poster .idea-dots, #heroMap.v20-hero-poster .idea-enter, #heroMap.v20-hero-poster .v19-poster-grain, #heroMap.v20-hero-poster .v19-poster-top, #heroMap.v20-hero-poster .v19-question-layer, #heroMap.v20-hero-poster .v19-question-nav, #heroMap.v20-hero-poster .v19-enter-line { display:none !important; }

/* V20 AI journey: distinct system-evolution map */
.journey-section.v20-journey { isolation:isolate; }
.v20-journey-shell {
  display:grid;
  grid-template-columns:minmax(380px,.78fr) minmax(720px,1.22fr);
  gap:clamp(54px,6vw,110px);
  align-items:center;
  width:100%;
}
.v20-journey-copy .kicker { color:var(--red); }
.v20-journey-copy h2 {
  margin:0;
  font-size:clamp(54px,6.6vw,118px);
  line-height:.88;
  letter-spacing:-.09em;
  color:transparent;
  background:linear-gradient(110deg,#fff 0%,rgba(255,255,255,.82) 48%,rgba(255,255,255,.26) 100%);
  -webkit-background-clip:text;background-clip:text;
}
.v20-journey-copy p { max-width:650px; color:rgba(255,255,255,.64); line-height:1.86; font-size:16px; }
.v20-journey-copy strong { color:rgba(255,255,255,.92); font-weight:850; }
.v20-stance { margin-top:28px; display:grid; gap:10px; max-width:650px; }
.v20-stance span { display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border-radius:18px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.60); line-height:1.55; }
.v20-stance b { flex:0 0 auto; color:rgba(255,255,255,.86); font:900 11px/1.4 var(--font-mono); letter-spacing:.12em; }
.v20-journey-board {
  position:relative; min-height:720px; border-radius:46px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 54px 170px rgba(0,0,0,.34);
}
.v20-journey-board::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(circle at 52% 52%, black, transparent 78%); opacity:.72; }
.v20-journey-board::after { content:''; position:absolute; inset:8%; border:1px solid rgba(255,255,255,.09); border-radius:50%; transform:rotate(-18deg) scaleX(1.32); }
.v20-orbit { position:absolute; inset:0; z-index:1; pointer-events:none; }
.v20-orbit path { fill:none; stroke:rgba(255,255,255,.15); stroke-width:1; stroke-dasharray:8 12; }
.v20-orbit path:nth-child(2) { stroke:rgba(106,167,255,.18); }
.v20-orbit path:nth-child(3) { stroke:rgba(239,81,63,.16); }
.v20-core {
  position:absolute; left:50%; top:49%; transform:translate(-50%,-50%); z-index:4;
  width:250px; height:250px; border-radius:50%; display:grid; place-items:center; text-align:center; padding:30px;
  background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.26),rgba(255,255,255,.08) 42%,rgba(255,255,255,.035) 100%);
  border:1px solid rgba(255,255,255,.16); box-shadow:0 30px 100px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(22px);
}
.v20-core small { display:block; margin-bottom:10px; color:rgba(255,255,255,.48); font:950 10px/1 var(--font-mono); letter-spacing:.20em; }
.v20-core b { font-size:30px; line-height:1.08; letter-spacing:-.055em; }
.v20-step {
  position:absolute; z-index:5; width:260px; padding:20px 22px 22px; border-radius:26px;
  background:rgba(10,12,18,.48); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(18px);
  transition:transform .38s var(--ease), background .38s ease, border-color .38s ease;
}
.v20-step:hover { transform:translateY(-8px) scale(1.018); background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.22); }
.v20-step em { display:block; color:rgba(255,255,255,.42); font:950 10px/1 var(--font-mono); letter-spacing:.18em; font-style:normal; margin-bottom:12px; }
.v20-step h3 { margin:0 0 10px; font-size:24px; letter-spacing:-.035em; }
.v20-step p { margin:0; color:rgba(255,255,255,.58); line-height:1.65; font-size:14px; }
.v20-step.s1 { left:54px; top:74px; }
.v20-step.s2 { right:58px; top:88px; }
.v20-step.s3 { left:44px; bottom:112px; }
.v20-step.s4 { right:58px; bottom:94px; }
.v20-insight {
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:5; width:min(560px, calc(100% - 88px));
  padding:16px 18px; border-radius:20px; border:1px solid rgba(243,189,103,.18); background:rgba(243,189,103,.07); color:rgba(255,248,232,.70); line-height:1.64; font-size:14px;
}
.v20-insight b { color:#fff3d6; }

/* V20 ritual moon gate */
.play-thread, .artifact-card { display:none !important; }
.play-object {
  width:76px !important; height:76px !important; border-radius:50% !important;
  background:radial-gradient(circle at 34% 28%,#fff5d0,#d7c48f 54%,#7087a8 100%) !important;
  border:1px solid rgba(255,255,255,.72) !important; box-shadow:0 24px 80px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.08),inset -16px -15px 32px rgba(45,62,86,.24),inset 0 1px 0 rgba(255,255,255,.92) !important;
  overflow:visible !important; color:transparent !important;
  clip-path:none !important;
  opacity:0 !important; pointer-events:none !important; transform:translateY(18px) scale(.72) !important;
}
.play-object.revealed { opacity:1 !important; pointer-events:auto !important; animation:v20MoonIdle 4.8s ease-in-out infinite !important; transform:translateY(0) scale(1) !important; }
@keyframes v20MoonIdle { 0%,100%{ translate:0 0; filter:brightness(1); } 50%{ translate:0 -9px; filter:brightness(1.08); } }
.play-object::before { content:'' !important; position:absolute !important; inset:-15px !important; border-radius:50% !important; clip-path:none !important; background:conic-gradient(from -90deg, rgba(255,240,190,.96) calc(var(--hold,0) * 1turn), rgba(255,255,255,.10) 0) !important; mask:radial-gradient(circle, transparent 0 63%, #000 64% 70%, transparent 71%) !important; opacity:.86 !important; transform:none !important; animation:none !important; }
.play-object::after { content:'' !important; position:absolute !important; inset:-28px !important; border-radius:50% !important; background:radial-gradient(circle, rgba(255,238,186,.18), transparent 64%) !important; box-shadow:0 0 0 1px rgba(255,255,255,.08) !important; clip-path:none !important; animation:v20MoonPulse 3.2s ease-in-out infinite !important; }
@keyframes v20MoonPulse { 0%,100%{ transform:scale(.86); opacity:.32; } 50%{ transform:scale(1.1); opacity:.62; } }
.v20-star { position:fixed; z-index:10002; width:4px; height:4px; border-radius:50%; background:#fff1bf; pointer-events:none; box-shadow:0 0 16px rgba(255,241,191,.9); animation:v20Star 1200ms var(--ease) forwards; }
@keyframes v20Star { to { opacity:0; transform:translate3d(var(--dx),var(--dy),0) scale(.15); filter:blur(3px); } }

/* V20 independent healing page */
body.moon-open { overflow:hidden; }
body.moon-open .topbar, body.moon-open .page-dots, body.moon-open #globalWaterV20, body.moon-open .cursor-core, body.moon-open .cursor-label { opacity:0 !important; pointer-events:none !important; }
.moon-overlay {
  background:#101926 !important;
  transform:translateY(18px) scale(.985) !important;
  opacity:0 !important;
  transition:opacity 1.1s ease, transform 1.1s var(--ease), filter 1.1s ease !important;
}
.moon-overlay.open { opacity:1 !important; pointer-events:auto !important; transform:translateY(0) scale(1) !important; filter:none !important; }
.moon-overlay::before {
  content:'' !important; position:absolute !important; inset:0 !important; opacity:1 !important;
  background:linear-gradient(90deg,rgba(9,14,24,.72) 0%,rgba(9,14,24,.34) 45%,rgba(9,14,24,.08) 100%),linear-gradient(180deg,rgba(254,232,189,.18),rgba(58,83,113,.18) 45%,rgba(11,20,32,.46)),url("assets/images/moon-healing-v20.png") center / cover no-repeat !important;
  mask-image:none !important;
  animation:v20SceneBreath 9s ease-in-out infinite alternate;
}
@keyframes v20SceneBreath { from{ transform:scale(1); filter:saturate(.95) brightness(.96); } to{ transform:scale(1.035); filter:saturate(1.04) brightness(1.04); } }
.moon-overlay::after { content:'' !important; position:absolute !important; inset:0 !important; pointer-events:none !important; background:radial-gradient(ellipse at 50% 72%,rgba(232,236,233,.22),transparent 38%),radial-gradient(circle at 74% 22%,rgba(255,225,168,.22),transparent 24%); opacity:.86 !important; }
.moon-bg-orbit { display:none !important; }
.moon-stage {
  position:relative !important; z-index:2 !important; width:100vw !important; height:100vh !important;
  display:grid !important; grid-template-columns:minmax(330px, 440px) minmax(520px, 1fr) !important; align-items:end !important; gap:clamp(42px,7vw,120px) !important;
  padding:clamp(42px,6vw,90px) !important;
}
.moon-stage::before { content:''; position:absolute; left:50%; bottom:14%; width:66px; height:172px; transform:translateX(-50%); border-radius:50% 50% 34% 34%; background:linear-gradient(180deg,rgba(8,13,22,.24),rgba(8,13,22,.52)); filter:blur(2px); opacity:0; animation:v20PersonAppear 5.8s ease forwards .8s; }
@keyframes v20PersonAppear { 0%{ opacity:0; transform:translateX(-50%) translateY(30px) scale(.92); filter:blur(12px); } 55%{ opacity:.28; filter:blur(6px); } 100%{ opacity:.52; transform:translateX(-50%) translateY(0) scale(1); filter:blur(2px); } }
.moon-player {
  width:100% !important; min-width:0 !important; flex-direction:column !important; align-items:flex-start !important; gap:22px !important; padding:30px !important;
  border-radius:34px !important; background:rgba(255,248,229,.30) !important; border:1px solid rgba(255,255,255,.42) !important;
  color:#263448 !important; box-shadow:0 24px 100px rgba(15,30,48,.22),inset 0 1px 0 rgba(255,255,255,.58) !important; backdrop-filter:blur(24px) saturate(1.18) !important;
}
.moon-record {
  width:154px !important; height:154px !important; border-radius:50% !important; flex:0 0 auto !important;
  background:radial-gradient(circle at 34% 28%,#fff6cf 0 16%,#e8d099 17% 38%,#8298b4 39% 66%,#2d3d57 67% 100%) !important;
  box-shadow:inset -22px -18px 42px rgba(34,49,70,.28),inset 0 1px 0 rgba(255,255,255,.88),0 28px 90px rgba(17,31,49,.20) !important;
}
.moon-record::before { content:''; position:absolute; inset:-10px; border-radius:50%; border:1px dashed rgba(38,52,72,.20); animation:spinRecord 14s linear infinite; }
.moon-record span { inset:26px !important; border:1px solid rgba(255,255,255,.35) !important; box-shadow:inset 0 0 0 1px rgba(38,52,72,.08) !important; }
.moon-record i { right:-58px !important; top:50px !important; width:116px !important; height:5px !important; border-radius:999px !important; background:linear-gradient(90deg,rgba(67,82,104,.70),rgba(255,255,255,.55)) !important; transform:rotate(21deg) !important; box-shadow:0 8px 22px rgba(38,52,72,.14) !important; }
.moon-record i::after { content:''; position:absolute; right:-9px; top:-5px; width:14px; height:14px; border-radius:50%; background:#fff1c8; box-shadow:0 0 22px rgba(255,241,200,.8); }
.moon-player-info small { color:rgba(38,52,72,.46) !important; }
.moon-player-info h3 { color:#263448 !important; background:none !important; font-size:clamp(34px,4vw,58px) !important; letter-spacing:-.06em !important; }
.moon-player-info p { color:rgba(38,52,72,.66) !important; }
.moon-play, .moon-close { background:rgba(255,255,255,.44) !important; border:1px solid rgba(255,255,255,.62) !important; color:#263448 !important; }
.moon-lyrics { min-height:360px !important; align-self:center !important; justify-self:center !important; width:min(760px, 100%) !important; padding:30px !important; border-radius:40px !important; background:rgba(255,248,231,.18); border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(18px); }
.lyric-line { color:rgba(250,244,230,0) !important; font-size:clamp(26px,3vw,46px) !important; line-height:1.45 !important; letter-spacing:-.045em !important; text-shadow:0 22px 60px rgba(8,16,28,.25); transition:opacity 2.2s ease, transform 2.2s var(--ease), filter 2.2s ease, color 2.2s ease !important; }
.lyric-line.active { opacity:1 !important; color:rgba(255,251,236,.96) !important; transform:translateY(0) scale(1) !important; filter:blur(0) !important; }
.lyric-line.fade { opacity:.28 !important; color:rgba(255,251,236,.38) !important; transform:translateY(-28px) scale(.99) !important; filter:blur(4px) !important; }
.moon-close { right:34px !important; top:28px !important; width:48px !important; height:48px !important; border-radius:50% !important; }
@media (max-width: 1180px) {
  .hero-grid, .v20-journey-shell, .moon-stage { grid-template-columns:1fr !important; }
  #heroMap.v20-hero-poster { width:min(860px, 100%) !important; }
  .v20-journey-board { min-height: auto; padding: 28px; display:grid; gap:16px; }
  .v20-core, .v20-step, .v20-insight { position:relative; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; transform:none !important; width:auto !important; }
  .v20-journey-board::after, .v20-orbit { display:none; }
}
@media (max-width: 720px) {
  .v20-question-layer { left:30px; right:74px; bottom:64px; }
  .v20-question-title { font-size:44px; }
  .v20-question-nav { right:26px; }
  .moon-stage { padding:24px !important; }
}



/* =========================
   V21 FIX: hidden moon world image, cursor visibility, reliable moon gate
   ========================= */
body.moon-open { overflow: hidden !important; }
body.moon-open .topbar,
body.moon-open .page-dots,
body.moon-open #globalWaterV20,
body.moon-open #globalWaterV19,
body.moon-open #water-cursor { opacity: 0 !important; pointer-events: none !important; }
body.moon-open .cursor-core {
  display:block !important;
  opacity:1 !important;
  z-index: 13002 !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(255,250,232,.26) !important;
  border: 1px solid rgba(255,250,232,.72) !important;
  mix-blend-mode: normal !important;
  backdrop-filter: blur(8px) saturate(1.25) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 42px rgba(255,238,183,.32) !important;
}
body.moon-open .cursor-label { z-index:13003 !important; color:#fff7dc !important; text-shadow:0 8px 24px rgba(0,0,0,.35); }
body.moon-open .cursor-core.mode { width: 46px !important; height: 46px !important; background: rgba(255,250,232,.18) !important; }

.play-object {
  z-index: 10020 !important;
  display:grid !important;
  place-items:center !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,248,221,.54) !important;
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.92), rgba(255,248,218,.62) 20%, rgba(160,177,201,.34) 56%, rgba(53,68,92,.62) 100%) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.38), 0 0 42px rgba(255,230,176,.28), inset -14px -14px 30px rgba(40,53,72,.32), inset 0 1px 0 rgba(255,255,255,.88) !important;
  color: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(16px) scale(.76) !important;
  transition: opacity .7s ease, transform .7s var(--ease), filter .4s ease !important;
}
.play-object.revealed { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important; animation: v21GateFloat 4.4s ease-in-out infinite !important; }
.play-object.holding { animation: none !important; filter: brightness(1.12) saturate(1.12); }
@keyframes v21GateFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.play-object::before {
  content:'' !important;
  position:absolute !important;
  inset:-17px !important;
  border-radius:50% !important;
  background: conic-gradient(from -90deg, rgba(255,235,176,.94) calc(var(--hold,0) * 1turn), rgba(255,255,255,.13) 0) !important;
  mask: radial-gradient(circle, transparent 0 61%, #000 62% 70%, transparent 71%) !important;
  opacity:.88 !important;
  animation:none !important;
}
.play-object::after {
  content:'' !important;
  position:absolute !important;
  inset:-36px !important;
  border-radius:50% !important;
  background: radial-gradient(circle, rgba(255,232,176,.22), transparent 64%) !important;
  animation: v21GatePulse 2.8s ease-in-out infinite !important;
  clip-path:none !important;
}
@keyframes v21GatePulse { 0%,100% { transform:scale(.78); opacity:.32; } 50% { transform:scale(1.18); opacity:.68; } }
.v21-moon-dust { position:fixed; z-index:13004; width:4px; height:4px; border-radius:999px; pointer-events:none; background:#fff3c8; box-shadow:0 0 18px rgba(255,243,200,.9); animation:v21Dust 1.35s var(--ease) forwards; }
@keyframes v21Dust { to { opacity:0; transform:translate3d(var(--dx), var(--dy), 0) scale(.12); filter:blur(4px); } }

.moon-overlay {
  z-index: 12000 !important;
  display:block !important;
  place-items: initial !important;
  background:#0c121b !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform: translateY(24px) scale(.985) !important;
  filter: blur(8px) !important;
  transition: opacity 1.05s ease, transform 1.05s var(--ease), filter 1.05s ease !important;
  overflow:hidden !important;
}
.moon-overlay.open { opacity:1 !important; pointer-events:auto !important; transform:translateY(0) scale(1) !important; filter:none !important; }
.moon-overlay::before {
  content:'' !important;
  position:absolute !important;
  inset:-3% !important;
  opacity:1 !important;
  background:
    linear-gradient(90deg, rgba(6,10,16,.72) 0%, rgba(6,10,16,.30) 42%, rgba(6,10,16,.10) 100%),
    linear-gradient(180deg, rgba(250,196,130,.10) 0%, rgba(96,126,154,.08) 40%, rgba(8,16,28,.36) 100%),
    url("assets/images/moon-healing-v21.png") center / cover no-repeat !important;
  animation:v21SceneBreath 11s ease-in-out infinite alternate !important;
  mask-image:none !important;
}
@keyframes v21SceneBreath { from { transform:scale(1); filter:saturate(.96) brightness(.94); } to { transform:scale(1.035); filter:saturate(1.06) brightness(1.05); } }
.moon-overlay::after {
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(ellipse at 68% 16%, rgba(255,222,158,.24), transparent 25%),
    radial-gradient(ellipse at 52% 78%, rgba(235,241,238,.18), transparent 44%),
    linear-gradient(180deg, transparent 45%, rgba(5,9,15,.30));
  opacity:.95 !important;
}
.moon-bg-orbit { display:none !important; }
.moon-stage {
  position:relative !important;
  z-index:2 !important;
  width:100vw !important;
  height:100vh !important;
  display:grid !important;
  grid-template-columns: minmax(280px, 430px) minmax(420px, 1fr) !important;
  gap: clamp(32px, 7vw, 110px) !important;
  align-items:end !important;
  padding: clamp(32px, 6vw, 86px) !important;
}
.moon-stage::before {
  content:'' !important;
  position:absolute !important;
  left:52% !important;
  bottom:18% !important;
  width:74px !important;
  height:190px !important;
  border-radius:50% 50% 32% 32% !important;
  background: linear-gradient(180deg, rgba(8,13,22,.16), rgba(8,13,22,.50)) !important;
  filter: blur(7px) !important;
  opacity:0 !important;
  animation:v21PersonAppear 5.2s ease forwards .7s !important;
}
@keyframes v21PersonAppear { 0% { opacity:0; transform:translateY(38px) scale(.9); filter:blur(18px); } 60% { opacity:.22; filter:blur(10px); } 100% { opacity:.48; transform:translateY(0) scale(1); filter:blur(5px); } }
.moon-player {
  align-self:end !important;
  width: min(400px, 92vw) !important;
  min-height: auto !important;
  display:grid !important;
  grid-template-columns: 138px 1fr !important;
  gap: 26px !important;
  align-items:center !important;
  border-radius: 36px !important;
  padding: 26px !important;
  background: rgba(255,247,226,.27) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  color:#263448 !important;
  box-shadow: 0 32px 120px rgba(8,17,31,.30), inset 0 1px 0 rgba(255,255,255,.62) !important;
  backdrop-filter: blur(26px) saturate(1.15) !important;
}
.moon-player::before { content:'LUNAR PLAYER' !important; position:absolute !important; left:28px !important; top:22px !important; color:rgba(38,52,72,.42) !important; font:950 9px/1 var(--font-mono) !important; letter-spacing:.22em !important; }
.moon-player::after { display:none !important; }
.moon-record {
  width:128px !important; height:128px !important;
  border-radius:50% !important;
  position:relative !important;
  background:
    radial-gradient(circle at 34% 27%, #fff7d8 0 14%, #edd49c 15% 34%, #8096b1 35% 61%, #2a3a54 62% 100%) !important;
  box-shadow: inset -18px -16px 34px rgba(33,47,68,.26), inset 0 1px 0 rgba(255,255,255,.92), 0 24px 78px rgba(14,28,46,.22) !important;
}
.moon-record.playing { animation: spinRecord 7.6s linear infinite !important; }
.moon-record::before { content:'' !important; position:absolute !important; inset:-12px !important; border-radius:50% !important; border:1px dashed rgba(255,255,255,.40) !important; opacity:.78 !important; }
.moon-record span { position:absolute !important; inset:24px !important; border-radius:50% !important; border:1px solid rgba(255,255,255,.42) !important; }
.moon-record i { position:absolute !important; right:-48px !important; top:43px !important; width:98px !important; height:5px !important; border-radius:999px !important; background:linear-gradient(90deg,rgba(60,75,98,.74),rgba(255,255,255,.70)) !important; transform:rotate(22deg) !important; transform-origin:left center !important; box-shadow:0 10px 28px rgba(38,52,72,.18) !important; }
.moon-record i::after { content:'' !important; position:absolute !important; right:-10px !important; top:-5px !important; width:15px !important; height:15px !important; border-radius:50% !important; background:#fff0be !important; box-shadow:0 0 24px rgba(255,240,190,.86) !important; }
.moon-player-info { text-align:left !important; }
.moon-player-info small { color:rgba(38,52,72,.45) !important; font:950 9px/1 var(--font-mono) !important; letter-spacing:.18em !important; }
.moon-player-info h3 { margin:12px 0 8px !important; font-size:32px !important; line-height:.98 !important; color:#263448 !important; background:none !important; letter-spacing:-.06em !important; }
.moon-player-info p { margin:0 0 18px !important; max-width:240px !important; color:rgba(38,52,72,.66) !important; font-size:13px !important; line-height:1.78 !important; }
.moon-play { padding:12px 18px !important; border-radius:999px !important; border:1px solid rgba(255,255,255,.58) !important; background:rgba(255,255,255,.52) !important; color:#263448 !important; box-shadow:0 15px 45px rgba(15,30,48,.16) !important; }
.moon-close { z-index:13001 !important; right:34px !important; top:28px !important; width:48px !important; height:48px !important; border-radius:50% !important; border:1px solid rgba(255,255,255,.34) !important; background:rgba(255,248,229,.22) !important; color:#fff7dc !important; backdrop-filter: blur(16px) !important; }
.moon-lyrics {
  width:min(760px, 92vw) !important;
  min-height:340px !important;
  align-self:center !important;
  justify-self:center !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  padding:30px !important;
  border-radius:42px !important;
  background:rgba(255,248,231,.12) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter:blur(12px) !important;
}
.lyric-line { opacity:0 !important; color:rgba(255,251,236,0) !important; font-size:clamp(26px,3.2vw,52px) !important; line-height:1.42 !important; letter-spacing:-.045em !important; text-shadow:0 24px 70px rgba(5,12,22,.30); transform:translateY(34px) scale(.985) !important; filter:blur(12px) !important; transition:opacity 2.6s ease, transform 2.6s var(--ease), filter 2.6s ease, color 2.6s ease !important; }
.lyric-line.active { opacity:1 !important; color:rgba(255,251,236,.98) !important; transform:translateY(0) scale(1) !important; filter:blur(0) !important; }
.lyric-line.fade { opacity:.30 !important; color:rgba(255,251,236,.44) !important; transform:translateY(-34px) scale(.99) !important; filter:blur(5px) !important; }
@media (max-width: 980px) {
  .moon-stage { grid-template-columns:1fr !important; align-items:center !important; }
  .moon-player { justify-self:center !important; }
  .moon-lyrics { min-height:240px !important; }
}