:root {
      --bg: #071019;
      --bg-2: #0d1620;
      --bg-3: #121d28;
      --text: #f5efe8;
      --muted: rgba(245, 239, 232, 0.78);
      --soft: rgba(245, 239, 232, 0.56);
      --line: rgba(255,255,255,0.11);
      --glass: rgba(255,255,255,0.055);
      --shadow: 0 30px 80px rgba(0,0,0,.35);
      --scene-a: rgba(126, 148, 168, 0.18);
      --scene-b: rgba(161, 147, 178, 0.16);
      --scene-c: rgba(118, 145, 128, 0.18);
      --accent: #efe5d6;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; }
    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 14% 18%, rgba(125,145,160,.16), transparent 24%),
        radial-gradient(circle at 82% 16%, rgba(139,123,171,.13), transparent 24%),
        radial-gradient(circle at 68% 78%, rgba(116,145,127,.16), transparent 24%),
        linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 52%, #0a1119 100%);
      overflow-x: hidden;
      letter-spacing: .01em;
    }

    body::before,
    body::after,
    .grain,
    .ambient-lights,
    .ambient-lights::before,
    .ambient-lights::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    body::before {
      background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.07), transparent 14%),
        radial-gradient(circle at 26% 64%, rgba(255,255,255,.04), transparent 18%),
        radial-gradient(circle at 76% 62%, rgba(255,255,255,.04), transparent 16%);
      filter: blur(22px);
      animation: shimmer 9s ease-in-out infinite alternate;
    }

    body::after {
      background:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
      background-size: 36px 36px;
      mask-image: radial-gradient(circle at center, black 38%, transparent 82%);
      opacity: .22;
      animation: gridDrift 14s linear infinite;
    }

    .ambient-lights {
      background:
        radial-gradient(circle at 10% 18%, rgba(99, 150, 175, .08), transparent 22%),
        radial-gradient(circle at 88% 26%, rgba(153, 117, 180, .07), transparent 21%),
        radial-gradient(circle at 38% 82%, rgba(132, 163, 125, .08), transparent 20%);
      filter: blur(18px);
      animation: hazeFloat 10s ease-in-out infinite alternate;
    }
    .ambient-lights::before {
      background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.03), transparent 38%);
      filter: blur(34px);
      animation: pulseHalo 6s ease-in-out infinite;
    }
    .ambient-lights::after {
      background: radial-gradient(circle at 58% 34%, rgba(195,220,233,.04), transparent 30%);
      filter: blur(30px);
      animation: hazeFloat 8s ease-in-out infinite alternate-reverse;
    }

    .grain {
      opacity: .08;
      background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.2) .6px, transparent .7px),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,.16) .6px, transparent .7px),
        radial-gradient(circle at 42% 78%, rgba(255,255,255,.12) .6px, transparent .7px);
      background-size: 150px 150px, 190px 190px, 170px 170px;
      animation: grainShift 8s linear infinite;
    }

    .wrap {
      position: relative;
      z-index: 1;
      width: min(1220px, calc(100% - 28px));
      margin: 0 auto;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 22px 0 12px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      color: var(--accent);
      letter-spacing: .28em;
      text-transform: uppercase;
      font-size: .9rem;
    }

    .mark {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.15);
      position: relative;
      background: radial-gradient(circle at 36% 36%, rgba(255,255,255,.26), rgba(255,255,255,.04) 44%, transparent 72%);
      box-shadow: inset 0 0 26px rgba(255,255,255,.06), 0 0 24px rgba(255,255,255,.06);
      animation: markSpin 9s linear infinite;
    }
    .mark::before,
    .mark::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.13);
    }
    .mark::before { inset: 7px; }
    .mark::after { inset: 14px; }

    .sound-toggle {
      appearance: none;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.05);
      color: var(--muted);
      border-radius: 999px;
      padding: 11px 15px;
      cursor: pointer;
      backdrop-filter: blur(14px);
      transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    }
    .sound-toggle:hover { transform: translateY(-2px) scale(1.01); }
    .sound-toggle.active {
      background: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.18);
      color: var(--text);
    }

    .hero {
      min-height: calc(100vh - 78px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: center;
      padding: 10px 0 54px;
    }

    .left { padding: 16px 0 28px 2px; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 11px 15px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.045);
      color: rgba(239,227,209,.9);
      font-size: .82rem;
      letter-spacing: .11em;
      margin-bottom: 22px;
      backdrop-filter: blur(14px);
    }
    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: radial-gradient(circle, #f6efe6 0%, #bfd0dd 58%, rgba(191,208,221,.1) 100%);
      box-shadow: 0 0 14px rgba(191,208,221,.55);
      animation: blinkDot 2.6s ease-in-out infinite;
    }

    h1 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(3.6rem, 8vw, 7.2rem);
      line-height: .92;
      letter-spacing: -.055em;
      font-weight: 500;
      max-width: 9ch;
    }

    .lead {
      margin: 24px 0 0;
      max-width: 41rem;
      font-size: clamp(1.12rem, 2vw, 1.36rem);
      line-height: 1.82;
      color: var(--muted);
    }

    .support-line {
      margin: 24px 0 30px;
      font-size: 1rem;
      color: var(--soft);
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .support-line::before,
    .support-line::after {
      content: "";
      height: 1px;
      flex: 1;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    }

    .actions {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 194px;
      padding: 17px 30px;
      border-radius: 999px;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,.1);
      background: linear-gradient(180deg, #f3ebdf, #d9cdbd);
      color: #171c24;
      font-weight: 650;
      box-shadow: 0 16px 34px rgba(239,228,214,.16);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .cta:hover {
      transform: translateY(-2px) scale(1.015);
      box-shadow: 0 20px 44px rgba(239,228,214,.22);
    }
    .note {
      color: var(--soft);
      font-size: .95rem;
      max-width: 21rem;
      line-height: 1.6;
    }

    .viewer {
      position: relative;
      min-height: 700px;
      border-radius: 34px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.11);
      background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
      backdrop-filter: blur(26px);
      box-shadow: var(--shadow), inset 0 0 90px rgba(255,255,255,.03);
      isolation: isolate;
    }

    .slides {
      position: absolute;
      inset: 0;
    }

    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity .9s ease;
    }
    .slide.active { opacity: 1; pointer-events: auto; }

    .slide::before,
    .slide::after {
      content: "";
      position: absolute;
      inset: -8%;
      pointer-events: none;
    }

    .slide[data-scene="mist"] {
      background:
        radial-gradient(circle at 20% 16%, rgba(230,236,242,.30), transparent 22%),
        radial-gradient(circle at 80% 20%, rgba(170,180,194,.24), transparent 24%),
        radial-gradient(circle at 52% 82%, rgba(120,132,146,.26), transparent 26%),
        linear-gradient(180deg, rgba(92,104,118,.24), rgba(20,24,32,.34));
    }
    .slide[data-scene="mist"]::before {
      background:
        radial-gradient(circle at 50% 76%, rgba(255,255,255,.14), rgba(255,255,255,.02) 46%, transparent 66%),
        radial-gradient(circle at 26% 62%, rgba(255,255,255,.08), transparent 18%),
        radial-gradient(circle at 72% 56%, rgba(255,255,255,.07), transparent 18%);
      filter: blur(18px);
      animation: mistShift 6s ease-in-out infinite alternate;
    }
    .slide[data-scene="mist"]::after {
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.07) 50%, transparent 100%);
      top: auto; bottom: 14%; height: 14px;
      left: 10%; right: 10%;
      border-radius: 999px;
      filter: blur(.4px);
      animation: riverFlow 3.8s ease-in-out infinite;
    }

    .slide[data-scene="forest"] {
      background:
        radial-gradient(circle at 48% 90%, rgba(58, 175, 102, .34), transparent 30%),
        radial-gradient(circle at 26% 24%, rgba(176, 233, 146, .16), transparent 22%),
        radial-gradient(circle at 78% 30%, rgba(76, 138, 92, .20), transparent 24%),
        linear-gradient(180deg, rgba(20,62,44,.30), rgba(6,24,16,.34));
    }
    .slide[data-scene="forest"]::before {
      background:
        repeating-linear-gradient(90deg,
          rgba(17, 27, 24, .0) 0 6%,
          rgba(14, 22, 20, .52) 6.8% 8.4%,
          rgba(17, 27, 24, .0) 9.6% 16%),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 38%);
      opacity: .75;
      transform-origin: bottom center;
      animation: forestSway 4.2s ease-in-out infinite alternate;
    }
    .slide[data-scene="forest"]::after {
      background:
        radial-gradient(circle at 30% 30%, rgba(211,227,193,.08), transparent 3%),
        radial-gradient(circle at 60% 34%, rgba(211,227,193,.06), transparent 2.5%),
        radial-gradient(circle at 74% 26%, rgba(211,227,193,.06), transparent 2.5%);
      filter: blur(2px);
      animation: leafDrift 5s linear infinite;
    }

    .slide[data-scene="river"] {
      background:
        radial-gradient(circle at 50% 22%, rgba(210, 236, 255, .26), transparent 18%),
        radial-gradient(circle at 18% 76%, rgba(48, 136, 255, .28), transparent 24%),
        radial-gradient(circle at 82% 64%, rgba(74, 177, 223, .18), transparent 22%),
        linear-gradient(180deg, rgba(10,54,112,.30), rgba(6,20,44,.34));
    }
    .slide[data-scene="river"]::before {
      background:
        radial-gradient(ellipse at 50% 86%, rgba(132, 172, 198, .22), transparent 46%),
        linear-gradient(180deg, transparent 0%, rgba(255,255,255,.02) 20%, transparent 56%);
      animation: waterGlow 3.4s ease-in-out infinite;
    }
    .slide[data-scene="river"]::after {
      background:
        repeating-linear-gradient(180deg,
          rgba(255,255,255,.07) 0 2px,
          rgba(255,255,255,0) 2px 18px);
      left: 18%; right: 18%; top: 22%; bottom: 14%;
      mask-image: linear-gradient(180deg, transparent, black 12%, black 88%, transparent);
      transform: perspective(700px) rotateX(70deg);
      opacity: .55;
      animation: riverFlow 2.6s linear infinite;
    }

    .slide[data-scene="space"] {
      background:
        radial-gradient(circle at 50% 44%, rgba(147, 91, 255, .34), transparent 18%),
        radial-gradient(circle at 34% 68%, rgba(84, 104, 255, .24), transparent 20%),
        radial-gradient(circle at 70% 20%, rgba(255,255,255,.10), transparent 12%),
        radial-gradient(circle at 16% 16%, rgba(118, 56, 210, .18), transparent 18%),
        linear-gradient(180deg, rgba(18,10,42,.34), rgba(2,2,10,.42));
    }
    .slide[data-scene="space"]::before {
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), rgba(255,255,255,.05) 16%, transparent 34%),
        radial-gradient(circle at 8% 18%, rgba(255,255,255,.95) .12%, transparent .22%),
        radial-gradient(circle at 14% 64%, rgba(255,255,255,.88) .11%, transparent .21%),
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.95) .14%, transparent .24%),
        radial-gradient(circle at 26% 58%, rgba(255,255,255,.85) .12%, transparent .22%),
        radial-gradient(circle at 32% 34%, rgba(255,255,255,.76) .10%, transparent .2%),
        radial-gradient(circle at 44% 18%, rgba(255,255,255,.8) .1%, transparent .2%),
        radial-gradient(circle at 52% 76%, rgba(255,255,255,.7) .1%, transparent .2%),
        radial-gradient(circle at 64% 14%, rgba(255,255,255,.9) .1%, transparent .2%),
        radial-gradient(circle at 76% 28%, rgba(255,255,255,.95) .14%, transparent .24%),
        radial-gradient(circle at 68% 72%, rgba(255,255,255,.82) .12%, transparent .22%),
        radial-gradient(circle at 82% 62%, rgba(255,255,255,.8) .11%, transparent .21%),
        radial-gradient(circle at 86% 44%, rgba(255,255,255,.76) .1%, transparent .2%),
        radial-gradient(circle at 92% 22%, rgba(255,255,255,.92) .12%, transparent .22%),
        radial-gradient(circle at 12% 44%, rgba(255,255,255,.82) .11%, transparent .21%),
        radial-gradient(circle at 22% 82%, rgba(255,255,255,.90) .13%, transparent .23%),
        radial-gradient(circle at 38% 10%, rgba(255,255,255,.76) .10%, transparent .20%),
        radial-gradient(circle at 48% 60%, rgba(255,255,255,.95) .12%, transparent .22%),
        radial-gradient(circle at 58% 24%, rgba(255,255,255,.88) .11%, transparent .21%),
        radial-gradient(circle at 72% 84%, rgba(255,255,255,.78) .10%, transparent .20%),
        radial-gradient(circle at 88% 74%, rgba(255,255,255,.96) .13%, transparent .23%);
      animation: starPulse 3.6s ease-in-out infinite;
    }
    .slide[data-scene="space"]::after {
      background: conic-gradient(from 90deg, transparent, rgba(255,255,255,.1), transparent 62%);
      inset: 18%;
      border-radius: 50%;
      filter: blur(1px);
      animation: orbit 7.2s linear infinite;
      opacity: .42;
    }

    .slide-ui {
      position: absolute;
      inset: 0;
      padding: 26px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .top-ui {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
    }

    .capsule,
    .status {
      padding: 11px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.11);
      background: rgba(8,12,17,.24);
      color: var(--muted);
      backdrop-filter: blur(14px);
      font-size: .9rem;
    }

    .status {
      font-size: .84rem;
      color: rgba(245,239,232,.7);
    }

    .scene-card {
      max-width: 26rem;
      padding: 24px 24px 22px;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.11);
      background: linear-gradient(180deg, rgba(9,13,18,.38), rgba(9,13,18,.18));
      backdrop-filter: blur(18px);
      box-shadow: 0 18px 40px rgba(0,0,0,.18);
      margin-bottom: 50px;
    }
    .scene-card small {
      display: block;
      margin-bottom: 10px;
      color: var(--soft);
      letter-spacing: .14em;
      font-size: .76rem;
    }
    .scene-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.78;
      font-size: 1.02rem;
    }


    .slide[data-scene="mist"] .capsule,
    .slide[data-scene="mist"] .status,
    .slide[data-scene="mist"] .scene-card {
      background: linear-gradient(180deg, rgba(118,128,140,.28), rgba(20,24,30,.18));
      border-color: rgba(220,228,236,.18);
      box-shadow: 0 0 24px rgba(214,222,230,.10);
    }
    .slide[data-scene="forest"] .capsule,
    .slide[data-scene="forest"] .status,
    .slide[data-scene="forest"] .scene-card {
      background: linear-gradient(180deg, rgba(44,98,66,.34), rgba(10,20,14,.18));
      border-color: rgba(126,210,146,.20);
      box-shadow: 0 0 28px rgba(96,186,118,.12);
    }
    .slide[data-scene="river"] .capsule,
    .slide[data-scene="river"] .status,
    .slide[data-scene="river"] .scene-card {
      background: linear-gradient(180deg, rgba(34,86,156,.34), rgba(8,18,38,.18));
      border-color: rgba(132,198,255,.22);
      box-shadow: 0 0 28px rgba(92,162,255,.14);
    }
    .slide[data-scene="space"] .capsule,
    .slide[data-scene="space"] .status,
    .slide[data-scene="space"] .scene-card {
      background: linear-gradient(180deg, rgba(62,26,118,.36), rgba(8,8,20,.18));
      border-color: rgba(176,132,255,.22);
      box-shadow: 0 0 32px rgba(150,94,255,.14);
    }

    .slider-nav {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      z-index: 5;
    }

    .dots {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .dot {
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(245,239,232,.78);
      min-height: 36px;
      border-radius: 999px;
      padding: 8px 14px;
      cursor: pointer;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .dot:hover { transform: translateY(-1px); }
    .dot.active {
      background: rgba(255,255,255,.18);
      border-color: rgba(255,255,255,.30);
      color: var(--text);
      box-shadow: 0 0 22px rgba(255,255,255,.10);
    }

    .progress {
      flex: 1;
      max-width: 160px;
      height: 2px;
      background: rgba(255,255,255,.12);
      border-radius: 999px;
      overflow: hidden;
      position: relative;
    }
    .progress span {
      position: absolute;
      inset: 0;
      width: 25%;
      background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.72), rgba(255,255,255,.18));
      box-shadow: 0 0 18px rgba(255,255,255,.24);
      animation: progressRun 24s linear infinite;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      padding: 0 0 46px;
    }

    .feature {
      border-radius: 28px;
      padding: 28px 26px;
      border: 1px solid rgba(255,255,255,.09);
      background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
      backdrop-filter: blur(16px);
      box-shadow: var(--shadow);
      min-height: 270px;
      position: relative;
      overflow: hidden;
    }
    .feature::before {
      content: "";
      position: absolute;
      inset: auto -12% -20% auto;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.08), transparent 62%);
      filter: blur(10px);
      animation: featurePulse 5s ease-in-out infinite;
    }
    .feature h3 {
      margin: 0 0 16px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.5rem, 2.2vw, 2rem);
      line-height: 1.24;
      font-weight: 500;
      position: relative;
      z-index: 1;
    }
    .feature p {
      margin: 0;
      color: var(--muted);
      line-height: 1.82;
      font-size: 1rem;
      position: relative;
      z-index: 1;
    }


    
    footer {
      padding: 0 0 34px;
      color: var(--soft);
      font-size: .95rem;
    }
    .foot {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: 18px;
    }

    @keyframes shimmer {
      from { transform: translate3d(-1%, 0, 0) scale(1); }
      to { transform: translate3d(1.2%, 1%, 0) scale(1.03); }
    }
    @keyframes gridDrift {
      from { transform: translate3d(0,0,0); }
      to { transform: translate3d(-18px, 14px, 0); }
    }
    @keyframes hazeFloat {
      from { transform: translate3d(-1.2%, 0, 0); }
      to { transform: translate3d(1.8%, -1.2%, 0); }
    }
    @keyframes pulseHalo {
      0%,100% { opacity: .7; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.06); }
    }
    @keyframes grainShift {
      from { transform: translate(0,0); }
      to { transform: translate(-18px, 14px); }
    }
    @keyframes markSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes blinkDot {
      0%,100% { transform: scale(1); opacity: .85; }
      50% { transform: scale(1.3); opacity: 1; }
    }
    @keyframes mistShift {
      from { transform: translate3d(-1.6%, 0, 0) scale(1); }
      to { transform: translate3d(1.8%, -1.2%, 0) scale(1.04); }
    }
    @keyframes riverFlow {
      0% { transform: translateX(-2.5%) scaleX(1); }
      50% { transform: translateX(2.5%) scaleX(1.03); }
      100% { transform: translateX(-2.5%) scaleX(1); }
    }
    @keyframes forestSway {
      from { transform: skewX(-1.2deg) translateX(-5px); }
      to { transform: skewX(1.2deg) translateX(5px); }
    }
    @keyframes leafDrift {
      0% { transform: translateY(-6%) translateX(-1%); opacity: .2; }
      50% { opacity: .42; }
      100% { transform: translateY(6%) translateX(1%); opacity: .18; }
    }
    @keyframes waterGlow {
      0%,100% { opacity: .72; transform: translateY(0) scaleX(1); }
      50% { opacity: 1; transform: translateY(-1.5%) scaleX(1.04); }
    }
    @keyframes starPulse {
      0%,100% { opacity: .72; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.05); }
    }
    @keyframes orbit {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes progressRun {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(420%); }
    }
    @keyframes featurePulse {
      0%,100% { transform: scale(1); opacity: .7; }
      50% { transform: scale(1.08); opacity: 1; }
    }

    @media (max-width: 1024px) {
      .hero { grid-template-columns: 1fr; }
      .viewer { min-height: 560px; }
      .features { grid-template-columns: 1fr; }
    }

    @media (max-width: 720px) {
      .wrap { width: min(1220px, calc(100% - 18px)); }
      .hero { min-height: auto; padding-bottom: 36px; }
      .viewer { min-height: 470px; }
  
    .slide[data-scene="mist"] .capsule,
    .slide[data-scene="mist"] .status,
    .slide[data-scene="mist"] .scene-card {
      background: linear-gradient(180deg, rgba(118,128,140,.28), rgba(20,24,30,.18));
      border-color: rgba(220,228,236,.18);
      box-shadow: 0 0 24px rgba(214,222,230,.10);
    }
    .slide[data-scene="forest"] .capsule,
    .slide[data-scene="forest"] .status,
    .slide[data-scene="forest"] .scene-card {
      background: linear-gradient(180deg, rgba(44,98,66,.34), rgba(10,20,14,.18));
      border-color: rgba(126,210,146,.20);
      box-shadow: 0 0 28px rgba(96,186,118,.12);
    }
    .slide[data-scene="river"] .capsule,
    .slide[data-scene="river"] .status,
    .slide[data-scene="river"] .scene-card {
      background: linear-gradient(180deg, rgba(34,86,156,.34), rgba(8,18,38,.18));
      border-color: rgba(132,198,255,.22);
      box-shadow: 0 0 28px rgba(92,162,255,.14);
    }
    .slide[data-scene="space"] .capsule,
    .slide[data-scene="space"] .status,
    .slide[data-scene="space"] .scene-card {
      background: linear-gradient(180deg, rgba(62,26,118,.36), rgba(8,8,20,.18));
      border-color: rgba(176,132,255,.22);
      box-shadow: 0 0 32px rgba(150,94,255,.14);
    }

    .slider-nav { flex-direction: column; align-items: flex-start; }
      .progress { max-width: none; width: 100%; }
      .foot, header, .actions { flex-direction: column; align-items: flex-start; }
      .feature { min-height: auto; }
    }