:root{
    --ink:#241811;
    --ink-deep:#160F0A;
    --midnight:#3B2A1C;
    --midnight-deep:#2A1D13;
    --ivory:#F6E9CE;
    --ivory-dim: rgba(246,233,206,0.82);
    --ivory-faint: rgba(246,233,206,0.54);
    --gold:#C08A3E;
    --gold-bright:#E0AE64;
    --gold-soft: rgba(192,138,62,0.5);
    --candle: #FFB463;
    --line: rgba(241,227,198,0.16);
    --line-soft: rgba(241,227,198,0.09);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --breeze: 0;
    --jitter: 0;
    --diya-glow: 0.5;
  }
  /* ---------- theme variants: same tokens, three different lights ----------
     "Dusk" is the default palette above (no attribute needed). Night and dawn
     re-value the same custom properties, so every surface that already reads
     from var(--ink)/var(--gold)/etc. repaints automatically — no new selectors. */
  body[data-theme="night"]{
    --ink:#0E0C12; --ink-deep:#07060A; --midnight:#181330; --midnight-deep:#100C22;
    --ivory:#E8E4F4; --ivory-dim: rgba(232,228,244,0.82); --ivory-faint: rgba(232,228,244,0.52);
    --gold:#8D7BC4; --gold-bright:#B2A2EA; --gold-soft: rgba(141,123,196,0.5);
    --candle:#8B79E0; --line: rgba(232,228,244,0.14); --line-soft: rgba(232,228,244,0.08);
  }
  body[data-theme="dawn"]{
    --ink:#3D2C22; --ink-deep:#2C1F17; --midnight:#5C4630; --midnight-deep:#43321F;
    --ivory:#FFF4E4; --ivory-dim: rgba(255,244,228,0.86); --ivory-faint: rgba(255,244,228,0.6);
    --gold:#E28B4E; --gold-bright:#F6B274; --gold-soft: rgba(226,139,78,0.5);
    --candle:#FFCB8E; --line: rgba(255,244,228,0.18); --line-soft: rgba(255,244,228,0.1);
  }
  *{box-sizing:border-box;}
  html{
    scroll-behavior:smooth;
    /* Guarantees the viewport canvas itself is never white: normally the
       body's background paints the canvas too (CSS background propagation),
       but that propagation is exactly what a scroll-triggered repaint of the
       fixed decorative layers below can outrun for a frame. Setting this
       explicitly removes any dependency on propagation timing. */
    background-color:var(--ink-deep);
  }
  body{
    margin:0;
    min-height:100vh;
    background:
      radial-gradient(ellipse 70% 45% at 50% -8%, rgba(192,138,62,0.08), transparent),
      radial-gradient(ellipse 55% 42% at 88% 102%, rgba(255,180,99,0.06), transparent),
      linear-gradient(170deg, var(--ink-deep), var(--ink) 55%, var(--midnight-deep) 100%);
    color:var(--ivory);
    font-family:'EB Garamond', Georgia, serif;
    font-weight:400;
    font-size:18.5px;
    overflow-x:hidden;
    /* Prevents iOS/Android rubber-band overscroll from momentarily
       revealing the area beyond the document — the other half of the
       same white-flash symptom, distinct from the fixed-layer repaint
       fixed below. Vertical scrolling itself is untouched. */
    overscroll-behavior-y:none;
    position:relative;
    transition: background 1.1s ease, color 1.1s ease;
  }
  /* theme transition — the same surfaces just repaint gently instead of snapping */
  header, .card, .chapter-row, .verse-section, .verse-frontispiece, .journal-entry,
  .stat-card, .setting-row, textarea.journal-input, .search-bar input, #soundToggle,
  .breath-circle, .emotion-item, nav button, p, h1, h2, h3, h4, .eyebrow{
    transition: background-color 1.1s ease, border-color 1.1s ease, color 0.6s ease, box-shadow 1.1s ease;
  }
  h1,h2,h3,h4,.display{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    letter-spacing:0.01em;
  }
  a{color:inherit;}
  button{font-family:inherit;}
  p{ line-height:1.9; }
  p + p{ margin-top:1.15em; }

  .eyebrow{
    font-family:'EB Garamond', serif;
    font-size:0.74rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
  }

  a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
    outline:1px solid var(--gold);
    outline-offset:4px;
    border-radius:1px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  /* the header is the only surface relying on backdrop blur for legibility over
     moving content behind it — solidify it instead when transparency effects
     are unwanted, everything else on the page is already opaque or flat */
  @media (prefers-reduced-transparency: reduce){
    header{ background:var(--ink-deep); backdrop-filter:none; }
    #soundPanel{ background:#E9D9AE; }
  }
  body.motion-reduced .star,
  body.motion-reduced .firefly,
  body.motion-reduced .petal,
  body.motion-reduced .fog,
  body.motion-reduced #shadowDrift,
  body.motion-reduced .insect,
  body.motion-reduced .single-leaf,
  body.motion-reduced #diya .flame{
    animation:none !important;
  }

  /* ================= ARRIVAL RITUAL ================= */
  #arrival{
    position:fixed; inset:0; z-index:200;
    background:
      radial-gradient(ellipse 80% 55% at 50% 32%, rgba(224,174,100,0.10), transparent),
      linear-gradient(180deg,#170F09,#2A1C11 55%,#34240F);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    overflow:hidden;
    transition: opacity 1.7s ease;
    cursor:pointer;
  }
  #arrival.arrival-done{ opacity:0; pointer-events:none; transition: opacity 2.3s ease; }
  #arrival.quick.arrival-done{ transition: opacity 0.7s ease; }
  body.arrival-active header, body.arrival-active main{ pointer-events:none; }

  #arrivalDiya{ position:relative; width:52px; height:36px; opacity:0; transition:opacity 1.5s ease, transform 2.6s cubic-bezier(0.22,1,0.36,1); transform:translate(0,0) scale(1); z-index:2; }
  #arrivalDiya.a-lit{ opacity:1; }
  /* as the ritual ends, the same flame travels toward where it already waits in Kanha Ji's corner,
     so the transition reads as one continuous diya rather than a fade-out-fade-in of two separate ones */
  #arrivalDiya.a-lit.a-finishing{ transform: translate(calc(50vw - 78px), calc(50vh - 40px)) scale(0.68); }
  .a-glow{
    position:absolute; left:50%; top:38%; width:8px; height:8px; transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(224,174,100,0.85), transparent 72%);
    border-radius:50%; opacity:0;
    transition:width 2.6s ease, height 2.6s ease, opacity 2.6s ease;
  }
  #arrivalDiya.a-lit .a-glow{ width:380px; height:380px; opacity:1; }
  #arrivalDiya.a-lit.a-finishing .a-glow{ transition:width 2.6s cubic-bezier(0.22,1,0.36,1), height 2.6s cubic-bezier(0.22,1,0.36,1), opacity 2.6s ease; width:260vw; height:260vw; opacity:0.85; }
  .a-flame{
    position:absolute; left:50%; bottom:15px; width:7px; height:15px; margin-left:-3.5px;
    background: radial-gradient(ellipse at 50% 80%, #FDF3DD, var(--gold) 60%, transparent 82%);
    border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
    opacity:0; transition:opacity 1s ease 0.3s;
  }
  #arrivalDiya.a-lit .a-flame{ opacity:1; animation: arrivalFlicker 2.7s ease-in-out infinite; }
  @keyframes arrivalFlicker{
    0%,100%{ transform:scaleY(1) rotate(-1deg); opacity:0.9; }
    30%{ transform:scaleY(1.07) rotate(2deg); opacity:0.82; }
    55%{ transform:scaleY(0.93) rotate(-2deg); opacity:0.95; }
    80%{ transform:scaleY(1.03) rotate(1deg); opacity:0.8; }
  }
  .a-bowl{ position:absolute; bottom:0; left:0; right:0; height:18px; background:linear-gradient(180deg,#3A2A18,#1C130C); border-radius:0 0 50% 50% / 0 0 60% 60%; }

  #arrivalDust{ position:absolute; inset:0; opacity:0; transition:opacity 2.2s ease; z-index:1; }
  #arrivalDust.a-visible{ opacity:1; }
  .a-mote{ position:absolute; width:2px; height:2px; background:var(--gold-bright); border-radius:50%; opacity:0; animation:motefloat linear infinite; }
  @keyframes motefloat{
    0%{ transform:translateY(0); opacity:0; }
    18%{ opacity:0.5; }
    82%{ opacity:0.25; }
    100%{ transform:translateY(-130px); opacity:0; }
  }

  #arrivalMist{
    position:absolute; left:-10%; right:-10%; bottom:-6%; height:32%;
    background:radial-gradient(ellipse at center, rgba(241,227,198,0.05), transparent 70%);
    opacity:0; transition:opacity 2.6s ease;
  }
  #arrivalMist.a-visible{ opacity:1; }

  #arrivalFeather{ position:absolute; top:36%; left:-60px; width:44px; height:16px; opacity:0; z-index:2; }
  #arrivalFeather svg{ width:100%; height:100%; opacity:0.55; }
  #arrivalFeather.a-fly{ animation: featherfly 4.6s ease-in-out forwards; }
  @keyframes featherfly{
    0%{ opacity:0; transform:translate(0,0) rotate(-10deg); }
    12%{ opacity:0.6; }
    50%{ transform:translate(48vw,-46px) rotate(8deg); }
    88%{ opacity:0.4; }
    100%{ transform:translate(120vw,14px) rotate(-6deg); opacity:0; }
  }

  #arrivalTitle{ margin-top:48px; text-align:center; opacity:0; transform:translateY(6px); transition:opacity 1.7s var(--ease), transform 1.7s var(--ease); z-index:2; padding:0 24px; }
  #arrivalTitle.a-visible{ opacity:1; transform:translateY(0); }
  #arrivalTitle h1{ font-style:italic; font-weight:500; font-size:clamp(1.7rem,4.2vw,2.5rem); color:var(--ivory); letter-spacing:0.02em; margin:0 0 16px; }
  #arrivalTitle p{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--ivory-faint); font-size:1.02rem; opacity:0; transition:opacity 1.8s ease; margin:0; }
  #arrivalTitle.a-tagline p{ opacity:1; }

  /* ================= LIVING BACKGROUND ================= */
  /* These four layers (#stars, #courtyard, #atmosphere, #ambient) are each
     position:fixed, inset:0, and stay mounted for the whole session — they
     are the "Courtyard" itself. Without an explicit GPU layer, browsers may
     repaint them on the main thread in sync with scroll instead of just
     recompositing, and that repaint can lag a frame behind the scroll itself.
     In that gap, whatever's underneath (the plain canvas, or a lower layer
     mid-repaint) is briefly visible — the reported white flash. Promoting
     each to its own compositor layer removes that dependency on repaint
     timing; visually nothing changes, since translateZ(0) is a null
     transform. */
  #stars, #courtyard, #atmosphere, #ambient{
    transform:translateZ(0);
    backface-visibility:hidden;
  }
  /* Floating dust, lit by unseen candlelight — replaces the old star field */
  #stars{ position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.55; transition:opacity 1.6s ease; }
  .star{ position:absolute; background:var(--gold-bright); border-radius:50%; opacity:0; filter:blur(0.3px); box-shadow:0 0 3px 1px rgba(224,174,100,0.3); animation:dustglow ease-in-out infinite; }
  @keyframes dustglow{ 0%{ opacity:0.1; transform:translateY(0) translateX(calc(var(--breeze,0) * -1.5px)); } 50%{ opacity:0.5; transform:translateY(-6px) translateX(calc(var(--breeze,0) * 1.5px)); } 100%{ opacity:0.1; transform:translateY(0) translateX(calc(var(--breeze,0) * -1.5px)); } }

  #courtyard{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
  #courtyard::before, #courtyard::after{
    content:''; position:absolute; top:0; bottom:0; width:76px;
  }
  #courtyard::before{ left:0; background:linear-gradient(180deg, transparent, rgba(22,15,10,0.5) 55%, rgba(22,15,10,0.72)); }
  #courtyard::after{ right:0; background:linear-gradient(180deg, transparent, rgba(22,15,10,0.5) 55%, rgba(22,15,10,0.72)); }
  #courtyard .floor{ position:absolute; left:0; right:0; bottom:0; height:20%; background:linear-gradient(0deg, rgba(28,19,12,0.55), transparent); }
  /* stone floor texture — a barely-there grain, discovered not displayed */
  #courtyard .floor::before{
    content:''; position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(90deg, rgba(241,227,198,0.025) 0 1px, transparent 1px 140px),
      repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 70px);
    opacity:0.6;
  }
  /* carved sandstone pillars, disappearing into darkness at either edge */
  .pillar{ position:absolute; bottom:0; width:64px; height:78%; opacity:0.05; pointer-events:none; }
  .pillar.left{ left:2%; background:linear-gradient(180deg, transparent, rgba(241,227,198,0.5) 8%, rgba(241,227,198,0.5) 85%, transparent); mask-image:linear-gradient(180deg, transparent, black 22%, black 80%, transparent); }
  .pillar.right{ right:2%; background:linear-gradient(180deg, transparent, rgba(241,227,198,0.5) 8%, rgba(241,227,198,0.5) 85%, transparent); mask-image:linear-gradient(180deg, transparent, black 22%, black 80%, transparent); }
  .pillar::before, .pillar::after{ content:''; position:absolute; left:0; right:0; height:2px; background:rgba(241,227,198,0.6); }
  .pillar::before{ top:14%; }
  .pillar::after{ top:30%; }
  /* distant temple wall, felt more than seen */
  #templeWall{ position:absolute; left:0; right:0; top:0; height:46%; opacity:0.035; pointer-events:none;
    background:
      radial-gradient(ellipse 40% 90% at 50% 0%, rgba(241,227,198,0.5), transparent 70%);
    mask-image:linear-gradient(180deg, black, transparent);
  }
  /* faint carved mandala, glimpsed high on the wall */
  #mandala{ position:absolute; top:6%; left:50%; width:220px; height:220px; margin-left:-110px; opacity:0.045; pointer-events:none; }
  #mandala svg{ width:100%; height:100%; }
  /* hanging bells, motionless until a breath of air finds them */
  .hbell{ position:absolute; top:0; width:10px; height:34px; opacity:0.16; transform-origin:top center; pointer-events:none; animation:bellsway 11s ease-in-out infinite; }
  .hbell svg{ width:100%; height:100%; display:block; }
  @keyframes bellsway{ 0%,100%{ transform:rotate(calc(-1.4deg + var(--breeze,0) * 0.8deg)); } 50%{ transform:rotate(calc(1.6deg + var(--breeze,0) * 0.8deg)); } }
  body.motion-reduced .hbell{ animation:none !important; }
  /* Warm brass lamp glow — replaces the old cold moonlight */
  #moon{
    position:fixed; top:8%; right:11%; width:120px; height:120px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,180,99,0.14), transparent 70%);
    filter:blur(1px); z-index:0; pointer-events:none;
  }

  /* ---------- per-page atmosphere ----------
     Same courtyard, same design system — each section just gets a whisper
     of its own tint, so it reads as another place inside the same evening. */
  #atmosphere{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background-color: rgba(0,0,0,0);
    mix-blend-mode:soft-light;
    transition: background-color 1.4s ease;
  }
  body[data-view="chapters"] #atmosphere,
  body[data-view="verses"] #atmosphere,
  body[data-view="verse"] #atmosphere{ background-color: rgba(196,178,140,0.10); }
  body[data-view="search"] #atmosphere{ background-color: rgba(150,140,120,0.10); }
  body[data-view="journal"] #atmosphere{ background-color: rgba(224,174,100,0.09); }
  body[data-view="collections"] #atmosphere{ background-color: rgba(120,86,48,0.10); }
  body[data-view="meditation"] #atmosphere{ background-color: rgba(90,110,150,0.08); }
  body[data-view="stats"] #atmosphere{ background-color: rgba(140,140,150,0.08); }
  body[data-view="settings"] #atmosphere{ background-color: rgba(110,80,50,0.09); }
  #banyan{ position:absolute; left:-26px; bottom:0; width:210px; height:auto; opacity:0.22; }

  #ambient{ position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
  .firefly{
    position:absolute; width:3px; height:3px; background:var(--gold-bright); border-radius:50%;
    filter: blur(0.4px); box-shadow:0 0 6px 1.5px rgba(192,138,62,0.35);
    opacity:0; animation: drift linear infinite, glow 4s ease-in-out infinite;
  }
  @keyframes drift{
    0%{ transform: translate(0,0); opacity:0; }
    12%{ opacity:0.45; }
    88%{ opacity:0.3; }
    100%{ transform: translate(var(--dx), var(--dy)); opacity:0; }
  }
  @keyframes glow{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.4); } }
  .petal{
    position:absolute; width:5px; height:8px;
    background: rgba(150,110,60,0.42);
    border-radius: 60% 40% 60% 40%;
    opacity:0.3; animation: leafFall linear infinite;
  }
  @keyframes leafFall{
    0%{ transform: translateY(-5vh) translateX(0) rotate(0deg); }
    100%{ transform: translateY(105vh) translateX(var(--sway)) rotate(200deg); }
  }
  .fog{
    position:absolute; bottom:-10%; left:-10%; width:120%; height:40%;
    background: radial-gradient(ellipse at center, rgba(241,227,198,0.04), transparent 70%);
    animation: fogdrift 26s ease-in-out infinite alternate;
  }
  @keyframes fogdrift{ 0%{ transform: translateX(calc(-3% + var(--breeze,0) * 1.5%)); } 100%{ transform: translateX(calc(3% + var(--breeze,0) * 1.5%)); } }

  /* soft moving shadows — as if a lamp somewhere is breathing */
  #shadowDrift{
    position:absolute; inset:-10%; opacity:0.5;
    background: radial-gradient(ellipse 55% 35% at 30% 70%, rgba(0,0,0,0.16), transparent 60%);
    animation: shadowbreathe 37s ease-in-out infinite alternate;
  }
  @keyframes shadowbreathe{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(4%, -2%) scale(1.06); } }

  /* an occasional insect, drawn as a tiny irregular zigzag rather than a looping sprite */
  .insect{ position:absolute; width:2px; height:2px; background:rgba(241,227,198,0.55); border-radius:50%; opacity:0; animation:insectpath 6s ease-in-out forwards; }
  @keyframes insectpath{
    0%{ opacity:0; transform:translate(0,0); }
    10%{ opacity:0.6; }
    30%{ transform:translate(14px,-9px); }
    50%{ transform:translate(6px,-22px); }
    70%{ transform:translate(20px,-14px); }
    90%{ opacity:0.4; }
    100%{ opacity:0; transform:translate(10px,-30px); }
  }

  /* a single bird, glimpsed only at dawn */
  .bird-fly{ position:absolute; top:8vh; left:-60px; width:40px; height:14px; animation:birdcross 12s linear forwards; }
  @keyframes birdcross{ 0%{ transform:translateX(0); opacity:0; } 8%{ opacity:0.6; } 92%{ opacity:0.4; } 100%{ transform:translateX(116vw); opacity:0; } }

  /* a gentle whisper — never a notification, never in the way */
  #whisper{
    position:fixed; left:50%; bottom:96px; transform:translate(-50%,6px);
    z-index:45; pointer-events:none;
    font-family:'Cormorant Garamond', serif; font-style:italic; font-size:0.98rem;
    color:var(--ivory-faint); text-align:center; letter-spacing:0.01em;
    opacity:0; transition:opacity 1.8s ease, transform 1.8s ease;
    max-width:280px; padding:0 16px;
  }
  #whisper.show{ opacity:1; transform:translate(-50%,0); }

  /* a single leaf, distinct from the ambient petal drift — falls once, rarely */
  .single-leaf{ position:absolute; top:-4vh; width:7px; height:10px; background:rgba(168,120,58,0.4); border-radius:60% 40% 60% 40%; opacity:0; animation:singleLeafFall linear forwards; }
  @keyframes singleLeafFall{
    0%{ opacity:0; transform:translateY(0) translateX(0) rotate(0deg); }
    6%{ opacity:0.5; }
    94%{ opacity:0.35; }
    100%{ opacity:0; transform:translateY(70vh) translateX(var(--leaf-sway,30px)) rotate(140deg); }
  }

  #feather-wander{ position:absolute; top:0; left:-70px; width:46px; height:16px; opacity:0; z-index:3; }
  #feather-wander svg{ width:100%; height:100%; opacity:0.4; }
  /* Its journey is no longer a fixed keyframe — position, pauses, rises and
     rotation are computed procedurally in JS (see flyFeatherProcedural) so the
     path itself differs every time, not just which of a few presets plays.
     Left/top/transform are driven inline; only the crossfade between legs uses
     a plain CSS transition, so each leg eases naturally without a keyframe table. */

  /* a barely-there trail of dust, lit as if catching the diya's glow, left behind
     the feather as it moves — never glitter, just a few motes that quietly dissolve */
  .feather-trail-mote{
    position:fixed; width:2px; height:2px; border-radius:50%; pointer-events:none; z-index:3;
    background:radial-gradient(circle, rgba(224,174,100,0.5), transparent 70%);
    opacity:0; animation:featherTrailFade 1.7s ease-out forwards;
  }
  @keyframes featherTrailFade{
    0%{ opacity:0.5; transform:translate(0,0) scale(1); }
    100%{ opacity:0; transform:translate(var(--tx,0), var(--ty,10px)) scale(0.5); }
  }
  body.motion-reduced .feather-trail-mote{ display:none; }

  /* ---------- Kanha Ji's corner (signature element) ---------- */
  #krishna-corner{ position:fixed; bottom:20px; right:22px; z-index:40; display:flex; flex-direction:column; align-items:center; gap:8px; }
  .kj-platform{
    position:relative; width:108px; height:52px;
    background:linear-gradient(180deg, #4A3320, #241708);
    border-radius:3px 3px 7px 7px;
    box-shadow:0 8px 16px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,200,140,0.09);
  }
  .kj-platform::before{
    content:''; position:absolute; top:0; left:2px; right:2px; height:3px;
    background:linear-gradient(90deg, transparent, rgba(224,174,100,0.4), transparent);
  }
  /* a tiny ripple of reflected light on the wood, breathing with the flame */
  .kj-platform::after{
    content:''; position:absolute; left:50%; bottom:-2px; width:60px; height:10px; margin-left:-30px;
    background:radial-gradient(ellipse at center, rgba(224,174,100,0.16), transparent 75%);
    animation:kjripple 5.2s ease-in-out infinite;
  }
  @keyframes kjripple{ 0%,100%{ opacity:calc(0.5 + var(--diya-glow,0.5) * 0.14); transform:scaleX(1); } 50%{ opacity:calc(0.85 + var(--diya-glow,0.5) * 0.14); transform:scaleX(1.12); } }
  body.motion-reduced .kj-platform::after{ animation:none !important; }
  #diya{ width:36px; height:25px; position:absolute; bottom:11px; left:50%; transform:translateX(-50%); }
  .kj-feather{ position:absolute; bottom:8px; left:9px; width:18px; height:38px; opacity:0.6; transform-origin:bottom center; transform:rotate(-20deg); animation:featherSettle 9s ease-in-out infinite; filter:brightness(calc(1 + (var(--diya-glow,0.5) - 0.5) * 0.1)); }
  .kj-feather svg{ width:100%; height:100%; display:block; }
  @keyframes featherSettle{ 0%,100%{ transform:rotate(calc(-20deg + var(--breeze,0) * 2deg + var(--jitter,0) * 1deg)); } 50%{ transform:rotate(calc(-17deg + var(--breeze,0) * 2deg + var(--jitter,0) * 1deg)); } }
  .kj-flute{ position:absolute; bottom:9px; right:7px; width:32px; height:8px; opacity:0.55; transform:rotate(-5deg); filter:brightness(calc(1 + (var(--diya-glow,0.5) - 0.5) * 0.1)); }
  .kj-flute svg{ width:100%; height:100%; display:block; }
  body.motion-reduced .kj-feather{ animation:none !important; }
  body.motion-reduced #feather-wander{ transition:none !important; opacity:0 !important; }
  #diya .bowl{
    position:absolute; bottom:0; left:0; right:0; height:16px;
    background: linear-gradient(180deg, #3A2A18, #1C130C);
    border-radius: 0 0 50% 50% / 0 0 60% 60%;
    box-shadow: 0 0 14px 2px rgba(192,138,62,0.2);
  }
  #diya .flame{
    position:absolute; left:50%; bottom:13px; width:6px; height:13px; margin-left:-3px;
    background: radial-gradient(ellipse at 50% 80%, #FDF3DD, var(--gold) 60%, transparent 82%);
    border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
    transform-origin:bottom center;
    animation: flicker 3s ease-in-out infinite;
    transition: transform 0.6s ease, filter 0.6s ease;
  }
  #diya .flame.flame-strong{ transform:scale(1.18); filter:brightness(1.2); }
  @keyframes flicker{
    0%,100%{ transform: scaleY(calc(1 + var(--jitter,0) * 0.04)) rotate(calc(-1deg + var(--breeze,0) * 1.4deg + var(--jitter,0) * 1.1deg)); opacity:0.92; }
    25%{ transform: scaleY(calc(1.05 + var(--jitter,0) * 0.04)) rotate(calc(1.5deg + var(--breeze,0) * 1.4deg + var(--jitter,0) * 1.1deg)); opacity:0.85; }
    50%{ transform: scaleY(calc(0.95 + var(--jitter,0) * 0.04)) rotate(calc(-1.5deg + var(--breeze,0) * 1.4deg + var(--jitter,0) * 1.1deg)); opacity:0.95; }
    75%{ transform: scaleY(calc(1.02 + var(--jitter,0) * 0.04)) rotate(calc(1deg + var(--breeze,0) * 1.4deg + var(--jitter,0) * 1.1deg)); opacity:0.82; }
  }
  /* ---------- ambient sound control ---------- */
  #soundControl{ position:fixed; bottom:26px; left:24px; z-index:41; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  #soundToggle{
    width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
    background:rgba(21,22,28,0.5); cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:border-color 0.3s var(--ease);
  }
  #soundToggle:hover{ border-color:var(--gold-soft); }
  #soundToggle svg{ width:15px; height:15px; opacity:0.7; }
  /* floating parchment menu */
  #soundPanel{
    position:absolute; bottom:44px; left:0;
    background:linear-gradient(155deg, #F1E3C6, #E3CE9F);
    border:1px solid rgba(59,42,28,0.22);
    border-radius:2px;
    box-shadow:0 16px 34px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.18);
    padding:8px 0; min-width:190px;
    display:flex; flex-direction:column;
    transform:rotate(-0.6deg) translateY(8px); transform-origin:bottom left;
    opacity:0; pointer-events:none;
    transition:opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  #soundPanel.open{ opacity:1; pointer-events:auto; transform:rotate(-0.6deg) translateY(0); }
  #soundPanel.switching button[data-sound], #soundPanel.switching #soundOff{ pointer-events:none; opacity:0.55; transition:opacity 0.3s ease; }
  #soundPanel button{
    background:none; border:none; text-align:left; color:#4A3320;
    font-family:'Cormorant Garamond', serif; font-style:italic;
    font-size:0.86rem; letter-spacing:0.03em;
    padding:10px 18px; cursor:pointer; transition:color 0.25s var(--ease);
  }
  #soundPanel button:hover{ color:#2A1D13; }
  #soundPanel button.active{ color:#9A5B1E; }
  #soundPanel button#soundOff{ border-top:1px solid rgba(59,42,28,0.18); margin-top:4px; color:rgba(74,51,32,0.6); font-style:normal; text-transform:uppercase; font-size:0.72rem; letter-spacing:0.08em; font-family:'EB Garamond',serif; }

  /* ---------- nav ---------- */
  header{
    position:sticky; top:0; z-index:30;
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 30px;
    background:linear-gradient(180deg, rgba(13,14,19,0.94), rgba(13,14,19,0.8));
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line-soft);
  }
  .brand{ display:flex; align-items:center; gap:12px; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.2rem; letter-spacing:0.02em; }
  .brand-mark{ width:18px; height:18px; border:1px solid var(--gold-soft); transform:rotate(45deg); }
  nav{ display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:22px; }
  nav button{
    background:none; border:none; color:var(--ivory-dim);
    font-family:'EB Garamond', serif; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
    padding:6px 2px; cursor:pointer; position:relative; transition:color 0.35s var(--ease);
  }
  nav button:hover{ color:var(--ivory); }
  nav button.active{ color:var(--gold-bright); }
  nav button.active::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold); }
  #nav-toggle{ display:none; }

  main{ position:relative; z-index:10; min-height:calc(100vh - 70px); }
  .view{ display:none; opacity:0; animation: viewIn 0.9s var(--ease) forwards; }
  .view.active{ display:block; }
  @keyframes viewIn{ from{ opacity:0; } to{ opacity:1; } }

  /* ---------- home ---------- */
  .hero{ max-width:600px; margin:0 auto; padding:112px 24px 20px; text-align:center; }
  .hero .eyebrow{ color:var(--gold); opacity:0.8; margin-bottom:20px; }
  .hero h1{ font-size:clamp(1.8rem, 4vw, 2.35rem); font-weight:500; font-style:italic; margin:0 0 20px; }
  .hero p{ color:var(--ivory-dim); font-size:1.08rem; line-height:1.8; margin:0 auto; max-width:440px; }

  .emotion-list{ max-width:440px; margin:60px auto 0; padding:0 24px; display:flex; flex-direction:column; }
  .emotion-item{
    padding:17px 4px; text-align:center; cursor:pointer;
    border-bottom:1px solid var(--line-soft);
    font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.15rem; color:var(--ivory-dim);
    position:relative; transition:color 0.4s var(--ease);
  }
  .emotion-list .emotion-item:first-child{ border-top:1px solid var(--line-soft); }
  .emotion-item::after{
    content:''; position:absolute; left:50%; bottom:7px; width:0; height:1px; background:var(--gold);
    transition:width 0.5s var(--ease); transform:translateX(-50%);
  }
  .emotion-item:hover, .emotion-item:focus-visible{ color:var(--ivory); }
  .emotion-item:hover::after, .emotion-item:focus-visible::after, .emotion-item.selected::after{ width:38px; }
  .emotion-item.selected{ color:var(--gold-bright); }

  .home-response{
    max-width:540px; margin:48px auto 0; padding:0 24px; text-align:center;
    color:var(--ivory-dim); font-family:'Cormorant Garamond', serif; font-style:italic;
    font-size:1.2rem; line-height:1.85; min-height:1.4em;
  }
  .home-response:not(:empty)::before{ content:'“'; color:var(--gold-soft); margin-right:2px; }
  .home-response:not(:empty)::after{ content:'”'; color:var(--gold-soft); margin-left:2px; }

  .quick-links{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px; max-width:760px; margin:70px auto 0; padding:0 24px 110px; }
  .quick-links button{
    background:none; border:none; color:var(--ivory-faint);
    font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer;
    padding:2px 0; border-bottom:1px solid transparent; transition:all 0.3s var(--ease);
  }
  .quick-links button:hover{ color:var(--gold-bright); border-color:var(--gold-soft); }
  .ql-sep{ color:var(--line); font-size:0.8rem; }

  /* ---------- "continue your journey" (Session 15/16, reading resume) ----------
     Sits on Home, above the emotion picker, only shown when a previous
     reading exists. Matches .card's border language and .hero's centered
     max-width so it reads as part of the same page rather than a bolted-on
     widget — quiet enough to skip past for anyone who just wants the
     emotion picker, present enough to notice if it's what they came for. */
  .continue-card{
    max-width:600px; margin:0 auto 44px; padding:26px 24px;
    border:1px solid var(--line-soft); border-top:1px solid var(--line);
    text-align:center; transition:border-color 0.35s var(--ease);
  }
  .continue-card .eyebrow{ color:var(--gold); opacity:0.8; margin-bottom:10px; }
  .continue-detail{
    color:var(--ivory-dim); font-family:'Cormorant Garamond', serif; font-style:italic;
    font-size:1.08rem; margin:0 0 22px;
  }
  .continue-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .continue-btn{
    background:transparent; color:var(--ivory-dim); border:1px solid var(--line);
    padding:9px 18px; border-radius:0; cursor:pointer;
    font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
    transition:all 0.3s var(--ease);
  }
  .continue-btn:hover, .continue-btn:focus-visible{ border-color:var(--gold-soft); color:var(--gold-bright); }
  .continue-btn-primary{ color:var(--gold-bright); border-color:var(--gold-soft); }
  .continue-btn-primary:hover, .continue-btn-primary:focus-visible{ background:rgba(192,138,62,0.09); border-color:var(--gold); }

  /* ---------- reading journey indicator ----------
     A thin line living at the sticky header's bottom edge, so it stays fixed
     near the top without any new positioning of its own. Only visible while
     viewing a chapter's verse list or an individual verse — everywhere else
     it's present but invisible (opacity, not display:none, so its width
     transition never has to restart from zero on the next chapter/verse view). */
  .reading-journey{
    position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:var(--line-soft);
    opacity:0; pointer-events:none;
    transition:opacity 0.4s var(--ease);
  }
  body[data-view="verses"] .reading-journey,
  body[data-view="verse"] .reading-journey{ opacity:1; }
  .reading-journey-fill{
    height:100%; width:0%;
    background:linear-gradient(90deg, var(--gold), var(--gold-bright));
    box-shadow:0 0 5px 0.5px rgba(224,174,100,0.4);
    transition:width 0.3s var(--ease), box-shadow 0.6s ease;
  }
  .reading-journey-fill.at-final{
    box-shadow:0 0 11px 1.5px rgba(224,174,100,0.75);
  }

  .reading-progress-label{
    text-align:center; color:var(--gold); opacity:0.75;
    font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase;
    margin:-6px 0 20px;
  }

  /* ---------- chapter completion reflection ----------
     Appears only after the final verse of a chapter, and only once the
     journey line's brief glow has already settled back down. Handwritten
     in tone rather than a checklist — no percentages, no celebration. */
  .chapter-completion{
    max-width:520px; margin:48px auto 0; padding-top:36px; text-align:center;
    border-top:1px solid var(--line-soft);
    opacity:0; transform:translateY(6px);
    transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
  }
  .chapter-completion.visible{ opacity:1; transform:translateY(0); }
  .chapter-completion-text{
    font-family:'Cormorant Garamond', serif; font-style:italic;
    font-size:1.15rem; color:var(--ivory-dim); margin:0 0 22px;
  }
  .chapter-completion-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

  /* ---------- generic section shell ---------- */
  .section-shell{ max-width:840px; margin:0 auto; padding:56px 24px 90px; }
  .section-shell h2{ font-size:1.7rem; font-style:italic; font-weight:500; margin-bottom:8px; }
  .section-sub{ color:var(--ivory-faint); margin-bottom:44px; font-size:0.95rem; font-style:italic; }

  .card{ background:transparent; border:1px solid var(--line-soft); border-radius:0; padding:28px 30px; border-top:1px solid var(--line); transition:border-color 0.35s var(--ease); }
  .card + .card{ border-top:none; }

  .empty-state{ text-align:center; padding:64px 24px; color:var(--ivory-faint); }
  .empty-state .glyph{ font-family:'Cormorant Garamond', serif; font-size:1.6rem; display:block; margin-bottom:16px; color:var(--gold-soft); }
  .empty-state p{ margin:0 0 20px; font-style:italic; }
  .empty-state button{
    background:transparent; color:var(--gold-bright); border:1px solid var(--gold-soft);
    padding:10px 22px; border-radius:0; font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
    transition:all 0.3s var(--ease);
  }
  .empty-state button:hover{ background:rgba(192,138,62,0.09); }

  /* ---------- verse ---------- */
  .verse-frontispiece{ text-align:center; padding:8px 0 44px; margin-bottom:20px; border-bottom:1px solid var(--line); }
  .verse-index{ font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); }
  .verse-title{ margin:12px 0 26px; font-size:1.5rem; font-style:italic; }
  .verse-sanskrit{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.25rem; color:var(--ivory); margin:0 0 10px; }
  .verse-translit{ color:var(--ivory-faint); font-size:0.92rem; margin:0 0 22px; }
  .verse-translation{ color:var(--ivory-dim); font-size:1.15rem; line-height:1.95; max-width:560px; margin:0 auto; }

  .verse-section{ padding:32px 0; border-top:1px solid var(--line-soft); }
  .verse-section h4{ font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; font-family:'EB Garamond',serif; font-style:normal; color:var(--gold); margin:0 0 14px; }
  .verse-section p, .verse-section li{ color:var(--ivory-dim); font-size:1.08rem; line-height:1.95; max-width:600px; }
  .verse-section ul{ margin:0; padding-left:20px; }
  .verse-section li{ margin-bottom:8px; }

  .verse-tags{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
  .tag{ font-size:0.7rem; letter-spacing:0.06em; padding:5px 12px; border-radius:0; background:transparent; color:var(--gold-bright); border:1px solid var(--gold-soft); }

  .back-link{
    border:1px solid var(--line); background:transparent; color:var(--ivory-dim);
    padding:9px 18px; border-radius:0; cursor:pointer; margin-bottom:32px;
    font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; transition:all 0.3s var(--ease);
  }
  .back-link:hover{ border-color:var(--gold-soft); color:var(--gold-bright); }

  /* ---------- chapters (table of contents) ---------- */
  .chapter-row{
    display:flex; align-items:baseline; gap:22px; padding:20px 4px; border-bottom:1px solid var(--line-soft);
    cursor:pointer; transition:all 0.3s var(--ease); border-left:1px solid transparent;
  }
  .chapter-row:hover, .chapter-row:focus-visible{ border-left:1px solid var(--gold); padding-left:16px; background:rgba(192,138,62,0.04); }
  .chapter-num{ font-family:'Cormorant Garamond', serif; font-style:italic; color:var(--gold-soft); font-size:1rem; min-width:28px; }
  .chapter-info{ flex:1; }
  .chapter-title{ display:block; font-family:'Cormorant Garamond', serif; font-size:1.12rem; font-style:italic; color:var(--ivory); }
  .chapter-sub{ display:block; font-size:0.82rem; color:var(--ivory-faint); margin-top:3px; }
  .chapter-count{ font-size:0.76rem; color:var(--ivory-faint); letter-spacing:0.04em; white-space:nowrap; }

  /* ---------- search ---------- */
  .search-bar{ margin-bottom:36px; }
  .search-bar input{
    width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
    color:var(--ivory); padding:12px 2px; border-radius:0;
    font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.15rem;
  }
  .search-bar input::placeholder{ color:var(--ivory-faint); }
  .search-bar input:focus{ outline:none; border-color:var(--gold); }

  /* ---------- journal ---------- */
  textarea.journal-input{
    width:100%; min-height:130px; background:transparent; border:1px solid var(--line);
    color:var(--ivory); padding:18px; border-radius:0;
    font-family:'EB Garamond',serif; font-size:1rem; line-height:1.7; resize:vertical;
  }
  textarea.journal-input:focus{ outline:none; border-color:var(--gold-soft); }
  .journal-actions{ display:flex; justify-content:flex-end; margin-top:16px; margin-bottom:52px; }
  .btn-primary{
    background:transparent; color:var(--gold-bright); border:1px solid var(--gold-soft);
    padding:11px 24px; border-radius:0; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
    transition:all 0.3s var(--ease);
  }
  .btn-primary:hover{ background:rgba(192,138,62,0.09); border-color:var(--gold); }
  .journal-entry{ padding:26px 0; border-top:1px solid var(--line-soft); }
  .journal-entry:last-child{ border-bottom:1px solid var(--line-soft); }
  .journal-entry-date{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
  .journal-entry p{ color:var(--ivory-dim); font-size:1.05rem; line-height:1.9; }

  /* ---------- stats ---------- */
  .stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft); }
  .stat-card{ text-align:center; padding:34px 12px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
  .stat-number{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:2rem; color:var(--gold-bright); display:block; }
  .stat-number.stat-word{ font-size:1.15rem; letter-spacing:0.01em; }
  .stat-label{ font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ivory-faint); margin-top:10px; }

  /* ---------- settings ---------- */
  .setting-row{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; border-bottom:1px solid var(--line-soft); }
  .setting-row:last-child{ border-bottom:none; }
  .setting-label{ font-size:0.98rem; font-family:'Cormorant Garamond',serif; font-style:italic; }
  .setting-desc{ font-size:0.8rem; color:var(--ivory-faint); margin-top:4px; }
  .switch{ width:38px; height:20px; border-radius:0; background:transparent; border:1px solid var(--line); position:relative; cursor:pointer; transition:border-color 0.3s var(--ease); }
  .switch.on{ border-color:var(--gold-soft); }
  .switch::after{ content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:0; background:var(--ivory-faint); transition:transform 0.3s var(--ease), background 0.3s var(--ease); }
  .switch.on::after{ transform:translateX(17px); background:var(--gold); }

  .theme-options{ display:flex; gap:12px; }
  .theme-dot{ width:22px; height:22px; border-radius:50%; cursor:pointer; border:1px solid var(--line); }
  .theme-dot.active{ border-color:var(--ivory); box-shadow:0 0 0 3px rgba(241,227,198,0.08); }

  /* ---------- meditation ---------- */
  .breath-circle{
    width:170px; height:170px; margin:30px auto; border-radius:50%;
    background: radial-gradient(circle at 42% 38%, rgba(192,138,62,0.18), rgba(58,42,24,0.25) 72%);
    border:1px solid var(--gold-soft);
    display:flex; align-items:center; justify-content:center;
    font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.92rem; color:var(--ivory-dim);
    animation: breathe 9s ease-in-out infinite;
  }
  @keyframes breathe{ 0%,100%{ transform:scale(0.92); } 50%{ transform:scale(1.05); } }

  footer{ text-align:center; padding:32px; font-size:0.76rem; font-style:italic; font-family:'Cormorant Garamond',serif; color:var(--ivory-faint); }

  /* ---------- reading mode: opening a sacred book ----------
     When a verse is open, the sound control recedes so nothing but the
     back button and the verse itself compete for attention. The header
     (and its nav) used to fade out here too, but readers move between
     Chapters/Journal/Search/etc. often enough mid-read that hiding the
     only way back was more friction than atmosphere — so the header now
     stays put, same as every other view. */
  body.reading-mode #soundControl{
    opacity:0; pointer-events:none; transition:opacity 0.6s ease;
  }
  header, #soundControl{ transition:opacity 0.6s ease; }
  #view-verse.active{ animation-duration:1.1s; }

  /* ---------- performance: pause everything decorative when the tab is hidden ---------- */
  body.page-hidden .star, body.page-hidden .firefly, body.page-hidden .petal,
  body.page-hidden .fog, body.page-hidden #shadowDrift, body.page-hidden .insect,
  body.page-hidden .single-leaf, body.page-hidden #diya .flame, body.page-hidden .hbell,
  body.page-hidden .kj-feather, body.page-hidden .kj-platform::after, body.page-hidden .breath-circle{
    animation-play-state:paused !important;
  }

  /* ---------- ambient sound: volume slider ---------- */
  .sound-volume-row{ padding:10px 18px 4px; display:flex; align-items:center; gap:10px; }
  .sound-volume-row label{ font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(74,51,32,0.65); font-family:'EB Garamond',serif; white-space:nowrap; }
  .sound-volume-row input[type="range"]{
    -webkit-appearance:none; appearance:none; flex:1; height:3px; border-radius:2px;
    background:rgba(74,51,32,0.25); outline:none; cursor:pointer;
  }
  .sound-volume-row input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
    background:#9A5B1E; cursor:pointer; border:none;
  }
  .sound-volume-row input[type="range"]::-moz-range-thumb{
    width:13px; height:13px; border-radius:50%; background:#9A5B1E; cursor:pointer; border:none;
  }

  /* ---------- tiny random life: a firefly landing near the diya, a rising spark ---------- */
  .diya-firefly{ z-index:2; }
  .diya-spark{
    position:absolute; left:50%; bottom:16px; width:2px; height:2px; margin-left:-1px;
    background:var(--gold-bright); border-radius:50%; opacity:0.9;
    box-shadow:0 0 4px 1px rgba(224,174,100,0.6);
    animation: sparkRise 1.7s ease-out forwards;
  }
  @keyframes sparkRise{
    0%{ transform:translateY(0) scale(1); opacity:0.9; }
    100%{ transform:translateY(-34px) scale(0.4); opacity:0; }
  }

  @media (max-width: 720px){
    nav{ justify-content:flex-start; overflow-x:auto; gap:16px; }
    nav button{ font-size:0.66rem; padding:10px 4px; }
    .brand span.brand-text{ display:none; }
    .section-shell{ padding:44px 20px 70px; }
    #banyan{ opacity:0.15; width:150px; }
    /* larger, easier-to-tap touch targets and roomier spacing */
    .emotion-item{ padding:20px 6px; font-size:1.22rem; }
    .quick-links{ gap:20px; }
    .quick-links button{ padding:8px 2px; }
    #soundToggle{ width:38px; height:38px; }
    #soundPanel button{ padding:14px 18px; font-size:0.95rem; }
    .switch{ width:46px; height:27px; }
    .switch::after{ width:19px; height:19px; }
    .switch.on::after{ transform:translateX(19px); }
    .theme-dot{ width:28px; height:28px; }
    .setting-row{ padding:24px 0; gap:14px; }
    .chapter-row{ padding:22px 4px; }
    .back-link{ padding:12px 20px; }
    #krishna-corner{ transform:scale(0.82); transform-origin:bottom right; bottom:14px; right:14px; }
  }
  /* small/budget Android phones — spacing only, same type scale */
  @media (max-width: 360px){
    .section-shell{ padding:36px 16px 64px; }
    .hero{ padding:96px 16px 16px; }
    .emotion-list{ padding:0 16px; }
    #soundPanel{ min-width:168px; }
    nav{ gap:12px; }
  }

/* ---------------- PWA banners (offline / update) ----------------
   Added for the PWA conversion only. Purely additive — nothing above
   this line was changed. Both banners share the same quiet, bottom-fixed
   treatment as the rest of the courtyard's palette and never block
   reading; they're dismissible or self-hiding. */
.pwa-banner{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translate(-50%, 14px);
  z-index:400;
  max-width:min(92vw, 460px);
  padding:14px 18px;
  border-radius:2px;
  background:linear-gradient(170deg, var(--midnight), var(--midnight-deep));
  border:1px solid var(--line);
  color:var(--ivory-dim);
  font-family:'EB Garamond', Georgia, serif;
  font-size:0.92rem;
  line-height:1.4;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.4s var(--ease), transform 0.4s var(--ease);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  justify-content:space-between;
}
.pwa-banner.visible{
  opacity:1;
  transform:translate(-50%, 0);
  pointer-events:auto;
}
.pwa-banner span{ flex:1 1 auto; }
.pwa-banner-actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
.pwa-banner-btn{
  border-radius:0;
  padding:7px 14px;
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ivory-dim);
  background:transparent;
  border:1px solid var(--line);
  cursor:pointer;
  font-family:'EB Garamond', Georgia, serif;
}
.pwa-banner-btn-primary{
  color:var(--ink-deep);
  background:var(--gold);
  border-color:var(--gold);
}
.pwa-offline-banner{ text-align:left; }

@media (max-width: 520px){
  .pwa-banner{ bottom:12px; padding:12px 14px; font-size:0.85rem; }
}

/* ---------- verse navigation (Previous/Next verse) ----------
   Appended without touching any rule above. Reuses the existing
   .continue-btn / .continue-btn-primary look from the chapter-completion
   card so this reads as part of the original design. Sits between the
   verse content and the chapter-completion reflection card, so the
   completion ritual still lands as the last, unhurried thing on the page. */
.verse-nav{
  max-width:520px; margin:48px auto 0; padding-top:36px;
  border-top:1px solid var(--line-soft);
}
.verse-nav-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- About page ----------
   Appended without touching any rule above. Reuses .section-shell,
   .verse-frontispiece, and .verse-section wholesale — the same
   scaffolding the verse-detail page already uses to read like sections
   of a printed page — so the About page needs almost no styling of its
   own. Only the intro line and the closing signoff get dedicated rules,
   since those two moments are meant to feel like the opening and closing
   page of a book rather than another settings-style list. */
.about-intro p{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:1.15rem; line-height:1.85; color:var(--ivory-dim);
  max-width:520px; margin:0 auto;
}
.verse-section .about-note{
  font-style:italic; color:var(--ivory-faint); font-size:0.98rem;
}
.about-close{
  border-bottom:none; border-top:1px solid var(--line);
  padding:44px 0 8px; margin-top:8px;
}
.about-close-line{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:1.2rem; line-height:1.8; color:var(--ivory);
  max-width:480px; margin:0 auto;
}
.about-close-sub{
  color:var(--ivory-faint); font-size:0.98rem; margin-top:18px;
}
.about-signature{
  color:var(--ivory-faint); font-size:0.78rem; letter-spacing:0.05em;
  margin-top:34px;
}
.about-farewell{
  color:var(--ivory-faint); font-size:0.72rem; font-style:italic;
  opacity:0.75; margin-top:10px;
}