:root{
    --sky-top:#1A1730;
    --sky-mid:#5B3A57;
    --sky-bottom:#C9756B;
    --sand:#E8B783;
    --sun:#F6D9A0;
    --ink:#2A1E1A;
    --ink-soft:#6E5A4F;
    --accent:#C8964F;
    --accent-soft:#E9C893;
    --card:#FBF1E2;
    --card-border:#E4CBA8;

    --dune-back:#D49A66;
    --dune-mid:#BC7C46;
    --dune-front:#8E5C32;

    --prog:0;
    --maxw:660px;

    --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  *{ box-sizing:border-box; }
  [hidden]{ display:none !important; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family:var(--sans);
    color:var(--ink);
    background:var(--sky-top);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  /* ---------- atmosphere layers ---------- */
  .layer{ position:fixed; inset:0; pointer-events:none; }

  .sky{
    z-index:0;
    background:
      linear-gradient(to bottom,
        var(--sky-top) 0%,
        #3A2742 26%,
        var(--sky-mid) 48%,
        #9A5560 66%,
        var(--sky-bottom) 80%,
        var(--sand) 100%);
  }
  .nightfall{
    z-index:1;
    background:linear-gradient(to bottom, #0C0A1A 0%, #1A1730 40%, rgba(26,23,48,0) 72%);
    opacity:calc(var(--prog) * 0.6);
    transition:opacity 1.4s ease;
  }

  .stars{ z-index:1; }
  .star{
    position:absolute;
    width:2px;height:2px;border-radius:50%;
    background:#FBEFD8;
    opacity:0;
    animation:twinkle 6s ease-in-out infinite;
  }
  @keyframes twinkle{ 0%,100%{opacity:0;} 50%{opacity:var(--tw,.7);} }

  .sun-orbit{
    z-index:2;
    transform:translateY(calc(var(--prog) * 30vh));
    transition:transform 1.6s cubic-bezier(.22,.61,.36,1);
  }
  /* The bright central sun-glow sat directly behind the narration and washed the
     text out — removed for legibility. The sky, dunes and stars still set the mood. */
  .sun{ display:none; }
  @keyframes sunfloat{ from{ margin-top:-10px; } to{ margin-top:10px; } }

  canvas#sand{ z-index:5; }

  .dunes{ z-index:4; bottom:0; top:auto; height:52vh; }
  .dunes svg{ position:absolute; bottom:0; left:0; width:140%; height:100%; }
  .dunes .d-back{ z-index:1; }
  .dunes .d-mid{ z-index:2; }
  .dunes .d-front{ z-index:3; }

  .vignette{
    z-index:20;
    background:radial-gradient(120% 90% at 50% 38%,
      rgba(0,0,0,0) 42%, rgba(20,8,14,.16) 78%, rgba(12,5,10,.42) 100%);
  }
  .grain{
    z-index:21;
    opacity:.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ---------- progress rail ---------- */
  .progress{
    position:fixed; left:0; top:0; right:0; height:3px; z-index:15;
    background:rgba(255,255,255,.06);
  }
  .progress__bar{
    height:100%;
    width:calc(var(--prog) * 100%);
    background:linear-gradient(90deg, var(--accent), var(--accent-soft));
    box-shadow:0 0 14px rgba(233,200,147,.6);
    transition:width 1s cubic-bezier(.22,.61,.36,1);
  }
  .phase{
    position:fixed; top:18px; left:50%; transform:translateX(-50%);
    z-index:15;
    font-family:var(--sans); font-weight:500;
    font-size:11px; letter-spacing:.32em; text-transform:uppercase;
    color:rgba(251,239,216,.72);
    opacity:0; transition:opacity .8s ease;
    pointer-events:none; white-space:nowrap;
    text-shadow:0 1px 8px rgba(0,0,0,.4);
  }
  .phase.show{ opacity:1; }

  /* ---------- narrator control (top-right) ---------- */
  .narrator{
    position:fixed; top:14px; right:14px; z-index:16;
    display:flex; align-items:center; gap:8px;
    font-family:var(--sans);
  }
  .narrator button{
    font-family:var(--sans); cursor:pointer; color:#F3E4CC;
    background:rgba(26,18,30,.42); backdrop-filter:blur(8px);
    border:1px solid rgba(251,239,216,.2); border-radius:999px;
    padding:7px 12px; font-size:12px; letter-spacing:.02em;
    display:flex; align-items:center; gap:6px;
    transition:background .25s, border-color .25s, color .25s;
  }
  .narrator button:hover{ background:rgba(40,28,44,.6); border-color:rgba(251,239,216,.4); }
  .narrator svg{ width:15px; height:15px; display:block; }
  .narrator svg path, .narrator svg line{ stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .narrator .muted-x{ display:none; }
  .narrator.is-muted .muted-x{ display:block; }
  .narrator.is-muted .wave{ display:none; }
  .narrator .vname{ font-variant:small-caps; letter-spacing:.06em; }
  .narrator .play-tri{ display:none; }
  .narrator.is-paused .pause-bars{ display:none; }
  .narrator.is-paused .play-tri{ display:block; }

  /* ---------- stage ---------- */
  main#stage{
    position:relative; z-index:10;
    min-height:100svh;
    display:flex; align-items:center; justify-content:center;
    padding:72px 22px 92px;
  }
  .screen{ width:100%; max-width:var(--maxw); }
  .screen.wide{ max-width:720px; }
  .rise{ }

  /* ---------- typography ---------- */
  .eyebrow{
    font-family:var(--sans); font-weight:500;
    font-size:12px; letter-spacing:.34em; text-transform:uppercase;
    color:var(--accent-soft);
    margin:0 0 18px;
  }
  h1.title{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(54px, 11vw, 118px);
    line-height:.92; letter-spacing:.01em;
    margin:0 0 18px;
    color:#FBEFD8;
    text-shadow:0 2px 40px rgba(0,0,0,.45), 0 0 70px rgba(233,200,147,.25);
  }
  h2.head{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(32px, 6vw, 50px);
    line-height:1.04; letter-spacing:.005em;
    margin:0 0 20px; color:var(--ink);
  }
  .lede{
    font-family:var(--serif); font-style:italic; font-weight:400;
    font-size:clamp(18px, 2.3vw, 23px);
    line-height:1.55; color:#F3E4CC;
    text-shadow:0 1px 22px rgba(0,0,0,.5);
    margin:0 auto 26px; max-width:34em;
  }

  /* ---------- intro ---------- */
  .intro{ text-align:center; }
  .intro .glowpad{
    position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
    width:min(86vw,720px); height:min(86vw,720px);
    background:radial-gradient(circle, rgba(20,10,20,.42) 0%, rgba(20,10,20,0) 62%);
    z-index:-1; pointer-events:none; border-radius:50%;
  }

  .cube-scene{ perspective:1100px; width:160px; height:160px; margin:0 auto 6px; }
  .cube-rot{ width:100%; height:100%; transform-style:preserve-3d; transform:rotateX(-24deg) rotateY(0deg); }
  .cube{ position:relative; width:104px; height:104px; margin:28px auto; transform-style:preserve-3d; animation:spin 30s linear infinite; }
  .cube .face{
    position:absolute; width:104px; height:104px;
    border:1px solid rgba(233,200,147,.85);
    background:linear-gradient(135deg, rgba(246,217,160,.16), rgba(200,150,79,.06));
    box-shadow:inset 0 0 36px rgba(246,217,160,.18);
    backface-visibility:visible;
  }
  .cube .f1{ transform:translateZ(52px); }
  .cube .f2{ transform:rotateY(180deg) translateZ(52px); }
  .cube .f3{ transform:rotateY(90deg) translateZ(52px); }
  .cube .f4{ transform:rotateY(-90deg) translateZ(52px); }
  .cube .f5{ transform:rotateX(90deg) translateZ(52px); background:linear-gradient(135deg, rgba(246,217,160,.26), rgba(200,150,79,.1)); }
  .cube .f6{ transform:rotateX(-90deg) translateZ(52px); }
  @keyframes spin{ from{ transform:rotateY(0); } to{ transform:rotateY(360deg); } }

  /* ---------- card ---------- */
  .card{
    background:linear-gradient(180deg, #FFF8EC, var(--card));
    border:1px solid var(--card-border);
    border-radius:22px;
    padding:clamp(28px, 5vw, 52px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.7) inset,
      0 24px 60px -28px rgba(60,28,18,.55),
      0 0 70px -20px rgba(233,200,147,.35);
    text-align:left;
  }
  .card.center{ text-align:center; }

  .body p{
    font-size:clamp(15.5px, 1.9vw, 17.5px);
    line-height:1.75; color:var(--ink-soft);
    margin:0 0 17px;
  }
  .body p:last-child{ margin-bottom:0; }

  .pull{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(21px,3vw,27px); line-height:1.35;
    color:var(--ink); text-align:center;
    margin:8px auto 24px; max-width:24em;
  }

  .represents-label{
    font-family:var(--sans); font-weight:500; font-size:11px;
    letter-spacing:.3em; text-transform:uppercase; color:var(--accent);
    margin:0 0 10px;
  }
  .represents{
    font-family:var(--serif); font-weight:500;
    font-size:clamp(26px,4.4vw,38px); line-height:1.15;
    color:var(--ink); margin:0 0 22px;
  }

  /* ---------- emblem ---------- */
  .emblem{ width:78px; height:78px; margin:0 0 22px; display:block; }
  .card.center .emblem, .desert .emblem{ margin-left:auto; margin-right:auto; }
  .emblem svg{ width:100%; height:100%; overflow:visible; }
  .emblem path, .emblem line, .emblem circle, .emblem polyline{
    fill:none; stroke:var(--accent); stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }
  .desert .emblem path, .desert .emblem circle, .desert .emblem line, .desert .emblem polyline{ stroke:var(--accent-soft); }
  .emblem .fillpetal{ fill:rgba(200,150,79,.14); stroke:var(--accent); }
  .draw{ stroke-dasharray:var(--len,520); stroke-dashoffset:0; }

  /* ====================================================================
     PICTURING — over the open desert (no card), narrated word-by-word
     ==================================================================== */
  .desert{ text-align:center; }
  .desert .step-label{
    font-family:var(--sans); font-weight:500; font-size:11px;
    letter-spacing:.3em; text-transform:uppercase; color:var(--accent-soft);
    margin:2px 0 18px; text-shadow:0 1px 10px rgba(0,0,0,.5);
  }
  /* the spoken invitation, read first, sitting at the top of the scene */
  .settle{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(17px,2.3vw,22px); line-height:1.45;
    color:#F4E6CD; max-width:24em; margin:0 auto 22px;
    text-shadow:0 1px 2px rgba(0,0,0,.6), 0 1px 16px rgba(0,0,0,.6);
  }
  .scene{
    position:relative; z-index:0;
    font-family:var(--serif); font-weight:400; font-style:italic;
    font-size:clamp(21px, 3vw, 30px); line-height:1.5;
    color:#FCF3E2; max-width:22em; margin:0 auto 30px;
    text-shadow:0 1px 2px rgba(0,0,0,.65), 0 1px 20px rgba(0,0,0,.6), 0 0 46px rgba(0,0,0,.5);
  }
  /* soft dark scrim behind the words so they stay legible over the bright sun */
  .scene::before{
    content:""; position:absolute; left:50%; top:50%;
    width:120%; height:152%; transform:translate(-50%,-50%);
    background:radial-gradient(ellipse 64% 58% at 50% 50%,
      rgba(12,5,11,.72) 0%, rgba(12,5,11,.5) 48%, rgba(12,5,11,0) 80%);
    filter:blur(28px); z-index:-1; pointer-events:none;
  }
  .scene .w{
    opacity:.2; transition:opacity .55s ease, text-shadow .55s ease;
  }
  .scene .w.lit{ opacity:1; }
  .scene.alllit .w{ opacity:1; }

  /* frosted panel that lets the desert show through behind the choices */
  .panel{
    background:rgba(24,16,28,.34);
    backdrop-filter:blur(12px) saturate(1.05);
    -webkit-backdrop-filter:blur(12px) saturate(1.05);
    border:1px solid rgba(251,239,216,.16);
    border-radius:22px;
    padding:clamp(20px,3.5vw,30px) clamp(18px,3.5vw,32px);
    box-shadow:0 24px 60px -30px rgba(0,0,0,.6);
    text-align:left;
    opacity:0; transform:translateY(14px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .panel.show{ opacity:1; transform:none; }
  .panel-hint{
    font-family:var(--serif); font-style:italic; color:rgba(251,239,216,.78);
    font-size:clamp(16px,2vw,19px); margin:0 0 18px; text-align:center;
  }

  .picker{ margin:0 0 18px; }
  .picker:last-of-type{ margin-bottom:6px; }
  .picker .plabel{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(16px,2vw,19px); color:#F3E4CC; margin:0 0 10px;
  }
  .pills{ display:flex; flex-wrap:wrap; gap:9px; }
  .pill{
    font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:.01em;
    cursor:pointer; color:#F3E4CC;
    background:rgba(251,239,216,.07);
    border:1px solid rgba(251,239,216,.24);
    border-radius:999px; padding:9px 16px;
    transition:background .2s, border-color .2s, color .2s, transform .15s;
  }
  .pill:hover{ background:rgba(251,239,216,.14); border-color:rgba(251,239,216,.45); }
  .pill:active{ transform:scale(.97); }
  .pill.sel{
    color:#3A2410;
    background:linear-gradient(135deg, var(--accent-soft), var(--accent));
    border-color:transparent;
    box-shadow:0 8px 20px -10px rgba(200,150,79,.8);
  }
  select.drop{
    font-family:var(--sans); font-size:14px; color:#F3E4CC; cursor:pointer;
    background:rgba(24,16,28,.55);
    border:1px solid rgba(251,239,216,.28);
    border-radius:12px; padding:11px 38px 11px 14px;
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23E9C893' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right 14px center;
    min-width:200px; max-width:100%;
  }
  select.drop:focus{ outline:none; border-color:var(--accent); }
  select.drop option{ color:#2A1E1A; background:#FBF1E2; }
  .picker.is-drop .plabel{ margin-bottom:8px; }

  /* the quiet "imagine" beat while the narrator reads, before the questions appear */
  .imagine{
    font-family:var(--serif); font-style:italic;
    color:rgba(251,239,216,.72); font-size:clamp(16px,2vw,19px);
    margin:6px auto 20px; text-shadow:0 1px 16px rgba(0,0,0,.55);
  }
  .nav-right{ display:flex; align-items:center; gap:12px; }

  /* narrator chooser on the intro */
  .vchooser{ margin:2px auto 24px; }
  .vchooser-label{
    font-family:var(--sans); font-weight:500; font-size:11px;
    letter-spacing:.28em; text-transform:uppercase;
    color:rgba(251,239,216,.55); margin-bottom:11px;
  }
  .vpills{ display:inline-flex; gap:10px; }
  .vpill{
    font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.04em;
    cursor:pointer; color:#F3E4CC;
    background:rgba(251,239,216,.07);
    border:1px solid rgba(251,239,216,.28);
    border-radius:999px; padding:9px 24px;
    transition:background .2s, border-color .2s, color .2s, transform .15s;
  }
  .vpill:hover{ background:rgba(251,239,216,.14); border-color:rgba(251,239,216,.5); }
  .vpill:active{ transform:scale(.97); }
  .vpill.sel{
    color:#3A2410;
    background:linear-gradient(135deg, var(--accent-soft), var(--accent));
    border-color:transparent; box-shadow:0 8px 20px -10px rgba(200,150,79,.8);
  }

  /* ---------- echo / interpretations ---------- */
  .echo{
    margin:14px 0 26px; padding:18px 20px;
    background:rgba(200,150,79,.07);
    border-left:2px solid var(--accent-soft);
    border-radius:0 12px 12px 0;
  }
  .echo .row2{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-top:1px solid rgba(228,203,168,.55); }
  .echo .row2:first-child{ border-top:none; }
  .echo .q2{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:15.5px; }
  .echo .a2{ font-size:15px; color:var(--ink); font-weight:500; text-align:right; }
  .echo .a2.empty{ color:#A88E78; font-weight:400; font-style:italic; }

  .interp{ margin-top:6px; }
  .interp .row{ padding:15px 0; border-top:1px solid rgba(228,203,168,.7); }
  .interp .row:first-child{ border-top:none; }
  .interp .attr{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(17px,2.2vw,19px); color:var(--ink); margin:0 0 5px;
  }
  .interp .read{ font-size:15px; line-height:1.65; color:var(--ink-soft); margin:0; }

  /* ---------- recap (closing) ---------- */
  .recap{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:6px 0 28px; }
  .recap .chip{ width:48px; height:48px; opacity:.9; }
  .recap .chip svg{ width:100%; height:100%; }
  .recap .chip path, .recap .chip line, .recap .chip circle, .recap .chip polyline{
    fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  }

  /* ---------- buttons / nav ---------- */
  .nav{ display:flex; align-items:center; gap:18px; margin-top:34px; }
  .nav.center{ justify-content:center; }
  .nav.between{ justify-content:space-between; }
  .desert .nav{ margin-top:26px; }

  .btn{
    font-family:var(--sans); font-weight:500; font-size:15px; letter-spacing:.02em;
    border:none; cursor:pointer; border-radius:999px;
    padding:15px 32px; color:#3A2410;
    background:linear-gradient(135deg, var(--accent-soft), var(--accent));
    box-shadow:0 12px 26px -12px rgba(200,150,79,.85), 0 0 0 1px rgba(255,255,255,.25) inset;
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(200,150,79,.95); filter:brightness(1.04); }
  .btn:active{ transform:translateY(0); }
  .btn.ghost{
    background:transparent; color:#F3E4CC; box-shadow:none;
    padding:15px 10px; letter-spacing:.04em;
  }
  .btn.ghost:hover{ transform:none; color:#fff; filter:none; }
  .btn.ghost.dark{ color:var(--ink-soft); }
  .btn.ghost.dark:hover{ color:var(--ink); }
  .btn.big{ padding:17px 42px; font-size:16px; }

  .hint{ margin-top:18px; font-size:12.5px; color:#B49A82; font-style:italic; }
  .intro .hint{ color:rgba(251,239,216,.6); }
  .desert .hint{ color:rgba(251,239,216,.55); }

  /* tiny replay link under the scene */
  .replay{
    background:none; border:none; cursor:pointer;
    color:rgba(251,239,216,.6); font-family:var(--sans); font-size:12px;
    letter-spacing:.08em; text-transform:uppercase; padding:6px 10px;
    display:inline-flex; align-items:center; gap:6px; margin-bottom:6px;
    transition:color .2s;
  }
  .replay:hover{ color:#FBEFD8; }
  .replay svg{ width:13px; height:13px; }
  .replay svg path{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

  /* ---------- responsive ---------- */
  @media (max-width:560px){
    main#stage{ padding:62px 16px 80px; }
    .card{ border-radius:18px; }
    .nav{ gap:10px; }
    .btn{ padding:14px 24px; }
    .phase{ font-size:10px; letter-spacing:.26em; }
    .narrator button{ padding:6px 10px; font-size:11px; }
    .echo .row2{ flex-direction:column; gap:2px; }
    .echo .a2{ text-align:left; }
    select.drop{ min-width:100%; }
  }

  @media (prefers-reduced-motion: reduce){
    .cube{ animation:none; }
    .sun{ animation:none; }
    .star{ animation:none; opacity:.4; }
    .scene .w{ opacity:1 !important; transition:none; }
    .draw{ stroke-dashoffset:0 !important; }
  }

  /* ============================================================
     FOREST THEME — "A Walk in the Woods" (set <body data-theme="forest">)
     Re-tints the shared atmosphere; gold accents stay light for legibility.
     ============================================================ */
  body[data-theme="forest"]{
    --sky-top:#241B33; --sky-mid:#5A4658; --sky-bottom:#9A6A4A;
    --sand:#C98A4B; --sun:#E8C97A;
    --accent:#D9A94B; --accent-soft:#EBCB86;
    --dune-back:#3A4A30; --dune-mid:#243520; --dune-front:#14200E;
    --mote:230,214,140;
  }
  body[data-theme="forest"] .sky{
    background:linear-gradient(to bottom,
      #241B33 0%, #3A2E42 22%, #6E4F52 44%, #9A6A4A 64%, #C98A4B 80%, #25341E 100%);
  }
  body[data-theme="forest"] .dunes{ height:46vh; }

  /* ============================================================
     HEARTH THEME — "The Five Gifts" (set <body data-theme="hearth">)
     A warm, candlelit homecoming: ember palette + a flickering glow.
     ============================================================ */
  body[data-theme="hearth"]{
    --sky-top:#271726; --sky-mid:#6E3B43; --sky-bottom:#C76B4E;
    --sand:#E9A765; --sun:#F8D89A;
    --accent:#D98A4B; --accent-soft:#F0C079;
    --dune-back:#7A3E2C; --dune-mid:#572A22; --dune-front:#371A16;
    --mote:245,205,140;
  }
  body[data-theme="hearth"] .sky{
    background:linear-gradient(to bottom,
      #271726 0%, #43243A 22%, #7E4148 46%, #B85C48 66%, #D9824E 82%, #E9A765 100%);
  }
  body[data-theme="hearth"] .sun{
    background:radial-gradient(circle at 50% 50%,
      rgba(250,224,180,.9) 0%, rgba(246,190,120,.62) 24%, rgba(232,150,90,.4) 46%,
      rgba(232,150,90,.16) 62%, rgba(232,150,90,0) 76%);
    animation:sunfloat 22s ease-in-out infinite alternate, candle 4.5s ease-in-out infinite;
  }
  @keyframes candle{ 0%,100%{opacity:1;} 18%{opacity:.85;} 34%{opacity:.97;} 52%{opacity:.8;} 70%{opacity:.93;} 86%{opacity:.88;} }
  body[data-theme="hearth"] .hero-emblem{ animation:emberglow 4.5s ease-in-out infinite; }
  @keyframes emberglow{ 0%,100%{ filter:drop-shadow(0 0 5px rgba(240,192,121,.3)); } 50%{ filter:drop-shadow(0 0 15px rgba(240,192,121,.65)); } }
  body[data-theme="hearth"] .emblem svg{ filter:drop-shadow(0 0 7px rgba(240,192,121,.28)); }

  /* ============================================================
     SHORE THEME — "The Far Shore" (set <body data-theme="shore">)
     Dusk over still water: a cool sky above a warm horizon, a far bank
     with a single waiting light, and that light's reflection reaching
     back across the water toward you — the crossing made visible.
     ============================================================ */
  body[data-theme="shore"]{
    --sky-top:#0E1430; --sky-mid:#33304F; --sky-bottom:#A8707A;
    --accent:#9FB7D6; --accent-soft:#CFE0F0;     /* cool, moonlit accents */
    --mote:200,222,245;
  }
  body[data-theme="shore"] .sky{
    background:linear-gradient(to bottom,
      #0E1430 0%, #1B2247 22%, #393459 40%, #65496A 54%,
      #9E6770 63%, #C68B82 68%, #7A5E72 72%, #2C2D4C 100%);
  }
  body[data-theme="shore"] #sand{ display:none; }            /* no sand drift over water */

  body[data-theme="shore"] .shore-scene{
    z-index:4;
    transform:translateY(calc(var(--prog) * 20vh));
    transition:transform 1.6s cubic-bezier(.22,.61,.36,1);
  }
  body[data-theme="shore"] .far-bank{
    position:absolute; left:0; bottom:46vh; width:100%; height:7vh;
  }
  body[data-theme="shore"] .far-bank path{ fill:#14172E; }
  /* the single light on the far shore — what you are crossing toward */
  body[data-theme="shore"] .beacon{
    position:absolute; left:50%; bottom:46vh; transform:translate(-50%,40%);
    width:6px; height:6px; border-radius:50%;
    background:#FFE7C4;
    box-shadow:0 0 10px 3px rgba(255,214,150,.72), 0 0 26px 10px rgba(255,196,138,.34);
    animation:beaconPulse 4.5s ease-in-out infinite;
  }
  @keyframes beaconPulse{ 0%,100%{ opacity:.78; } 50%{ opacity:1; } }
  /* the dark, still water filling the lower screen */
  body[data-theme="shore"] .water{
    position:absolute; left:0; bottom:0; width:100%; height:46vh; overflow:hidden;
    background:linear-gradient(to bottom,
      #3A3152 0%, #272543 26%, #181A33 62%, #0D1124 100%);
  }
  body[data-theme="shore"] .water::after{                    /* faint surface ripples */
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(to bottom,
      rgba(207,224,240,.06) 0 1px, transparent 1px 15px);
    /* fade the ripples in below the waterline so text near the top stays clean */
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 26%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 26%);
  }
  /* the beacon's reflection — a broken, shimmering path reaching toward you */
  body[data-theme="shore"] .moonpath{
    position:absolute; left:50%; top:0; transform:translateX(-50%);
    width:30vw; height:100%;
    background:linear-gradient(to bottom,
      rgba(255,212,176,.42) 0%, rgba(228,168,156,.22) 32%,
      rgba(206,156,162,.09) 62%, rgba(206,156,162,0) 100%);
    -webkit-mask-image:repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 10px);
            mask-image:repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 10px);
    filter:blur(.5px);
    animation:moonShimmer 5.5s ease-in-out infinite alternate;
  }
  @keyframes moonShimmer{ from{ opacity:.78; width:27vw; } to{ opacity:1; width:33vw; } }

  /* generic intro hero emblem (non-cube journeys) */
  .hero-emblem{ width:118px; margin:0 auto 12px; position:relative; }
  .hero-emblem svg{ width:100%; height:auto; display:block; overflow:visible; }
  .hero-emblem path, .hero-emblem ellipse, .hero-emblem line, .hero-emblem circle, .hero-emblem polyline{
    fill:none; stroke:var(--accent-soft); stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  }
  .hero-emblem .lg-ln2{ opacity:.55; }
  .hero-emblem .lg-dot{ fill:var(--accent-soft); stroke:none; }

  /* scene actions row: Hear again + Skip to answer */
  .scene-actions{ display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap; }
  .desert[data-stage="answer"] [data-skip]{ display:none; }

  /* integration step — optional reflection notes (parchment textareas) */
  .reflect{ margin:22px 0 0; }
  .reflect label{ display:block; font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(17px,2.2vw,20px); color:var(--ink); margin-bottom:9px; line-height:1.4; }
  .reflect textarea{
    width:100%; resize:none; min-height:52px;
    font-family:var(--sans); font-size:15.5px; line-height:1.6; color:var(--ink);
    background:rgba(255,255,255,.55); border:none; border-bottom:1.5px solid var(--card-border);
    border-radius:8px 8px 0 0; padding:11px 12px;
    transition:border-color .3s, background .3s, box-shadow .3s; overflow:hidden;
  }
  .reflect textarea::placeholder{ color:#B49A82; font-style:italic; }
  .reflect textarea:focus{ outline:none; border-bottom-color:var(--accent); background:rgba(255,255,255,.85); box-shadow:0 8px 18px -14px rgba(200,150,79,.7); }

  /* typology result — five dials */
  .dials{ margin:8px 0 4px; }
  .dial{ padding:18px 0; border-top:1px solid rgba(228,203,168,.7); }
  .dial:first-child{ border-top:none; padding-top:6px; }
  .dial-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; }
  .dial-name{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(18px,2.4vw,23px); color:var(--ink); }
  .dial-band{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; white-space:nowrap; }
  .dial-bar{ display:flex; align-items:center; gap:10px; }
  .dial-end{ font-size:10.5px; color:var(--ink-soft); white-space:nowrap; flex:0 0 auto; max-width:30%; }
  .dial-track{ position:relative; flex:1 1 auto; height:6px; border-radius:999px; background:linear-gradient(90deg, rgba(200,150,79,.16), rgba(200,150,79,.5)); }
  .dial-marker{ position:absolute; top:50%; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%); background:linear-gradient(135deg,var(--accent-soft),var(--accent)); box-shadow:0 2px 8px rgba(200,150,79,.55), 0 0 0 3px #FBF1E2; }
  .dial-read{ font-size:14.5px; line-height:1.62; color:var(--ink-soft); margin:11px 0 0; }
  .dial-closing{ font-family:var(--serif); font-style:italic; text-align:center; color:var(--ink); font-size:clamp(17px,2.2vw,21px); line-height:1.4; margin:22px auto 0; max-width:26em; }

  /* typology result — named archetype (type) */
  .type-name{ text-align:center; }
  .type-code{ text-align:center; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:-2px 0 18px; }
  .type-portrait{ font-family:var(--serif); font-style:italic; font-size:clamp(17px,2.2vw,21px); line-height:1.55; }
  .axes{ margin:18px 0 4px; }
  .axis-row{ padding:13px 0; border-top:1px solid rgba(228,203,168,.6); }
  .axis-row:first-child{ border-top:none; }
  .axis-bar{ display:flex; align-items:center; gap:10px; }
  .axis-end{ font-size:12px; color:var(--ink-soft); white-space:nowrap; flex:0 0 auto; max-width:34%; opacity:.55; }
  .axis-end.on{ color:var(--ink); opacity:1; font-weight:600; }
  .axis-read{ font-size:13.5px; color:var(--ink-soft); margin:8px 0 0; text-align:center; }
  .axis-read strong{ color:var(--ink); font-weight:600; }

  /* typology result — ranked categories (buckets: Enneagram / Love Languages / Temperaments) */
  .dial-track.fillable{ flex:1 1 auto; height:7px; overflow:hidden; }
  .dial-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent-soft), var(--accent)); box-shadow:0 1px 4px rgba(200,150,79,.4);
    width:var(--w,0%); animation:fillbar 1.05s cubic-bezier(.2,.75,.25,1) both; }
  @keyframes fillbar{ from{ width:0%; } to{ width:var(--w,0%); } }
  @media (prefers-reduced-motion: reduce){ .dial-fill{ animation:none; } }

  /* ---------- narrated question sequence (the Cube) ---------- */
  .qseq{ display:flex; flex-direction:column; gap:28px; }
  .qline{ font-family:var(--serif); font-size:clamp(19px,2.6vw,24px); line-height:1.5; color:var(--ink); margin:0 0 16px; }
  .qline .w{ opacity:.26; transition:opacity .45s ease; }
  .qline .w.lit{ opacity:1; }
  .qskip{ margin-top:12px; }

  /* ---------- per-choice reveal (the Cube) ---------- */
  .read-toggle{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:12px; letter-spacing:.02em; color:var(--ink-soft);
    background:rgba(200,150,79,.08); border:1px solid rgba(200,150,79,.3); border-radius:999px; padding:8px 15px; cursor:pointer; margin:2px 0 20px; transition:background .2s; }
  .read-toggle:hover{ background:rgba(200,150,79,.16); }
  .read-toggle .rt-dot{ width:7px; height:7px; border-radius:50%; background:#b9a98c; }
  .read-toggle.on .rt-dot{ background:var(--accent); box-shadow:0 0 6px var(--accent); }
  .read-toggle em{ font-style:normal; font-weight:600; color:var(--ink); }
  .attrs{ display:flex; flex-direction:column; margin-top:4px; }
  .reveal-attr{ padding:18px 0; border-top:1px solid rgba(228,203,168,.65); }
  .reveal-attr:first-child{ border-top:none; padding-top:6px; }
  .ra-head{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 9px; }
  .ra-choice{ color:var(--ink); }
  .ra-read{ font-size:15.5px; line-height:1.64; color:var(--ink-soft); margin:0; }
  .ra-read .w{ opacity:.3; transition:opacity .45s ease; }
  .ra-read .w.lit{ opacity:1; }
  .ra-expand{ margin-top:13px; background:none; border:none; color:var(--accent); font-family:var(--sans); font-size:12.5px; font-weight:500; cursor:pointer; padding:4px 0; letter-spacing:.02em; }
  .ra-expand:hover{ color:var(--ink); }
  .ra-others{ margin-top:12px; padding-left:15px; border-left:2px solid rgba(200,150,79,.32); display:flex; flex-direction:column; gap:13px; }
  .other-opt{ display:block; font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink); }
  .other-read{ display:block; font-size:13.5px; line-height:1.56; color:var(--ink-soft); margin-top:3px; }

  /* ---------- the final picture (Cube closing) ---------- */
  .final-picture{ margin:0 auto 24px; max-width:560px; border-radius:18px; overflow:hidden;
    background:linear-gradient(to bottom, #34273F 0%, #6A4452 32%, #B0656A 58%, #DEA268 84%, #ECC183 100%);
    border:1px solid var(--card-border); box-shadow:0 10px 34px rgba(0,0,0,.24); }
  .fp-svg{ display:block; width:100%; height:auto; }
  .fp-cube path, .fp-ladder line, .fp-horse ellipse, .fp-horse line, .fp-horse path,
  .fp-flowers .stem, .fp-flowers .petal{ fill:none; stroke:#FBEFD8; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
  .fp-sun circle{ fill:rgba(250,230,194,.45); stroke:rgba(251,239,216,.85); stroke-width:1.5; }
  .fp-sand{ fill:rgba(150,98,54,.34); stroke:none; }
  .fp-dune{ fill:none; stroke:rgba(255,240,215,.28); stroke-width:1.5; vector-effect:non-scaling-stroke; }
  .fp-cube .face{ fill:rgba(251,239,216,.07); }
  .fp-cube .face.top{ fill:rgba(251,239,216,.16); }
  .fp-cube .face.right{ fill:rgba(20,12,24,.12); }
  .fp-cube.m-gold .face{ fill:rgba(246,201,144,.4); } .fp-cube.m-gold .face.top{ fill:rgba(246,201,144,.6); }
  .fp-cube.m-glass .face{ fill:rgba(200,230,240,.1); } .fp-cube.m-frost .face{ fill:rgba(230,235,240,.16); }
  .fp-cube.m-stone .face{ fill:rgba(120,110,100,.32); } .fp-cube.m-metal .face{ fill:rgba(175,180,185,.24); }
  .fp-cube.m-mirror .face{ fill:rgba(215,228,238,.2); } .fp-cube.m-ice .face{ fill:rgba(190,225,235,.22); }
  .fp-cube.m-wood .face{ fill:rgba(150,100,60,.3); }
  .fp-flowers .petal{ fill:rgba(251,239,216,.22); } .fp-flowers .bloom{ fill:#F6D9A0; stroke:none; }
  .fp-storm .cloud{ fill:rgba(72,62,78,.62); stroke:rgba(36,28,40,.5); stroke-width:1.5; vector-effect:non-scaling-stroke; }
  .fp-storm .rain{ stroke:rgba(185,205,225,.7); stroke-width:1.5; stroke-linecap:round; vector-effect:non-scaling-stroke; }
  .fp-storm.violent .cloud{ fill:rgba(46,40,56,.75); }
  .fp-cap{ text-align:center; font-family:var(--serif); font-style:italic; color:#5A3115; font-size:15.5px; padding:9px 16px 14px; margin:0; }

  /* ---------- AI "paint your desert" (Cube closing) ---------- */
  .paint-area{ margin:0 auto 24px; max-width:560px; }
  .paint-frame{ border-radius:18px; overflow:hidden; min-height:210px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:linear-gradient(155deg,#34273F,#6A4452 55%,#B0656A); border:1px solid var(--card-border); box-shadow:0 10px 34px rgba(0,0,0,.24); }
  .paint-cta{ text-align:center; padding:40px 26px; }
  .paint-note{ font-size:12.5px; color:#FBEFD8; opacity:.86; margin:14px auto 0; max-width:30em; line-height:1.5; text-shadow:0 1px 8px rgba(0,0,0,.4); }
  .paint-loading{ text-align:center; padding:54px 24px; color:#FBEFD8; }
  .paint-loading p{ font-family:var(--serif); font-style:italic; font-size:17px; margin:16px 0 0; text-shadow:0 1px 8px rgba(0,0,0,.4); }
  .paint-shimmer{ width:52px; height:52px; margin:0 auto; border-radius:50%; border:3px solid rgba(251,239,216,.25); border-top-color:#FBEFD8; animation:paintspin 1s linear infinite; }
  @keyframes paintspin{ to{ transform:rotate(360deg); } }
  .paint-img{ display:block; width:100%; height:auto; }
  .paint-save{ display:block; text-align:center; font-size:12.5px; letter-spacing:.04em; color:var(--accent); padding:11px; text-decoration:none; background:rgba(251,243,226,.6); }
  .paint-save:hover{ color:var(--ink); background:rgba(251,243,226,.9); }
  .paint-err{ text-align:center; font-size:13px; color:#9A4A2A; padding:12px 14px 4px; margin:0; }

  /* ---------- pre-painted desert image + "one last look" on the closing ---------- */
  .desert-pic{ margin:0 auto 22px; max-width:560px; border-radius:18px; overflow:hidden; border:1px solid var(--card-border); box-shadow:0 10px 34px rgba(0,0,0,.24); background:#2A1E2E; }
  .desert-img{ display:block; width:100%; height:auto; }
  .desert-pic .fp-cap{ color:#E9D4B2; background:#241A28; padding:9px 16px 12px; }
  .c-center{ text-align:center; }
  .lastlook{ margin:22px 0 6px; text-align:left; }
  .lastlook .represents-label{ margin-bottom:6px; }
  .lastlook-body{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 14px; }
  .lastlook .reflect{ margin:0 0 14px; }