:root{
    --cream:#FBF5E9;
    --cream-2:#F3EBDA;
    --brown-900:#2B2013;
    --brown-800:#3B2A18;
    --brown-700:#5A4028;
    --gold:#C68A2E;
    --gold-dark:#8B5A1F;
    --gold-light:#F1C778;
    --green:#5C7A45;
    --green-dark:#3F5730;
    --green-light:#C9DDB0;
    --violet:#7A5FA0;
    --violet-dark:#4E3B6B;
    --violet-light:#DCD0EA;
    --line:#E7DBC2;
    --shadow:0 6px 18px rgba(59,42,24,0.08);
    --radius-lg:22px;
    --radius-md:14px;
    --page-bg:var(--cream);
    --surface:#fff;
    --surface-2:var(--cream-2);
    --text-main:var(--brown-900);
    --text-muted:var(--brown-700);
    --text-strong:var(--brown-800);
  }
  html[data-theme="dark"]{
    --page-bg:#15110C;
    --surface:#241D16;
    --surface-2:#2C2419;
    --line:#3A2F22;
    --text-main:#EDE3D2;
    --text-muted:#B9A98C;
    --text-strong:#F1E7D6;
    --shadow:0 6px 20px rgba(0,0,0,0.55);
  }
  html[data-theme="dark"] .hint code{color:var(--text-strong);}
  *{box-sizing:border-box;}
  body{margin:0;background:var(--page-bg);color:var(--text-main);font-family:'Noto Sans Sinhala',sans-serif;transition:background .3s ease, color .3s ease;}
  .app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:94px;background:var(--page-bg);transition:background .3s ease;}

  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

  @keyframes heroFade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(241,199,120,0.45);}50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(241,199,120,0);}}
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}

  /* hero (real photo, header stays real HTML on top) */
  .hero{position:relative;margin:16px 16px 0;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);
    background:url('assets/hero.jpg') right center / cover no-repeat, #3a2a1c;
    padding:18px 20px 100px;min-height:320px;}
  .hero::before{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(20,14,8,0.42) 0%, rgba(20,14,8,0.06) 22%, rgba(20,14,8,0) 46%, rgba(20,14,8,0.62) 100%);pointer-events:none;}
  .hero-topbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;animation:heroFade .7s ease both;}
  .hero-brand{display:flex;align-items:center;gap:10px;}
  .hero-wheel{width:38px;height:38px;border-radius:50%;border:2px solid var(--gold-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(43,32,19,0.25);animation:breathe 4s ease-in-out infinite;}
  .hero-wheel svg{width:22px;height:22px;}
  .hero-brand-text .name{font-family:'Noto Serif Sinhala',serif;font-weight:700;font-size:17px;color:var(--gold-light);line-height:1.1;text-shadow:0 1px 6px rgba(0,0,0,0.35);}
  .hero-brand-text .tag{font-size:9px;letter-spacing:.14em;color:#F3E9D6;text-transform:uppercase;font-weight:600;margin-top:2px;}
  .hero-actions{display:flex;align-items:center;gap:8px;}
  .theme-toggle-btn{width:38px;height:38px;border-radius:50%;background:rgba(43,32,19,0.55);border:1.5px solid rgba(241,199,120,0.6);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s ease;color:var(--gold-light);}
  .theme-toggle-btn:active{transform:scale(.88);}
  .theme-toggle-btn:focus-visible{box-shadow:0 0 0 3px rgba(241,199,120,0.85);}
  .theme-toggle-btn svg{width:17px;height:17px;}
  .theme-toggle-btn .icon-moon{display:none;}
  html[data-theme="dark"] .theme-toggle-btn .icon-sun{display:none;}
  html[data-theme="dark"] .theme-toggle-btn .icon-moon{display:block;}
  .hero-menu-btn{width:38px;height:38px;border-radius:50%;background:rgba(43,32,19,0.55);border:1.5px solid rgba(241,199,120,0.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;flex-shrink:0;transition:transform .15s ease;}
  .hero-menu-btn:active{transform:scale(.88) rotate(90deg);}
  .hero-menu-btn:focus-visible{box-shadow:0 0 0 3px rgba(241,199,120,0.85);}
  .hero-menu-btn span{display:block;width:15px;height:2px;background:#fff;border-radius:2px;}

  .hero-title{position:relative;z-index:3;font-family:'Noto Serif Sinhala',serif;font-weight:700;font-size:30px;line-height:1.18;color:#fff;margin:22px 0 0;text-shadow:0 2px 10px rgba(0,0,0,0.3);max-width:70%;animation:heroFade .8s .15s ease both;}
  .hero-title .accent{color:var(--gold-light);display:block;}
  .hero-sub{position:relative;z-index:3;font-size:12.5px;color:#F3E9D6;max-width:78%;line-height:1.6;margin-top:10px;animation:heroFade .8s .3s ease both;}

  .quick-actions{display:flex;justify-content:space-around;margin:-64px 20px 22px;position:relative;z-index:3;}
  .qa{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;cursor:pointer;color:var(--text-strong);animation:heroFade .6s ease both;}
  .qa:nth-child(1){animation-delay:.35s;}
  .qa:nth-child(2){animation-delay:.45s;}
  .qa:nth-child(3){animation-delay:.55s;}
  .qa .circ{width:56px;height:56px;border-radius:50%;background:var(--brown-900);border:2px solid var(--gold-light);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .15s ease;}
  .qa:active .circ{transform:scale(.9);}
  .qa .circ svg{width:24px;height:24px;stroke:var(--gold-light);}
  .qa span.label{font-size:11.5px;font-weight:500;}

  /* sections */
  .section{margin:0 16px 22px;}
  .section-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 18px 9px 14px;border-radius:0 20px 20px 0;font-family:'Noto Serif Sinhala',serif;font-weight:600;font-size:16px;color:#fff;position:relative;left:-16px;box-shadow:var(--shadow);}
  .section-badge.samatha{background:linear-gradient(135deg,var(--gold),var(--gold-dark));}
  .section-badge.vipassana{background:linear-gradient(135deg,var(--green),var(--green-dark));}
  .section-badge.sapta{background:linear-gradient(135deg,var(--violet),var(--violet-dark));}
  .section-badge svg{width:16px;height:16px;}
  .card-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:10px;box-shadow:var(--shadow);margin-top:-4px;transition:background .3s ease;}

  .track{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:var(--radius-md);cursor:pointer;transition:background .15s ease, transform .12s ease;}
  .track:hover{background:var(--surface-2);}
  .track:active{transform:scale(.985);}
  .track.playing{background:var(--surface-2);}
  .badge-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0;}
  .samatha .badge-num{background:linear-gradient(135deg,var(--gold),var(--gold-dark));}
  .vipassana .badge-num{background:linear-gradient(135deg,var(--green),var(--green-dark));}
  .sapta .badge-num{background:linear-gradient(135deg,var(--violet),var(--violet-dark));}
  .track-title{flex:1;font-size:14.5px;font-weight:500;color:var(--text-main);line-height:1.35;}
  .track-wave{display:flex;align-items:flex-end;gap:2px;height:16px;opacity:.4;flex-shrink:0;}
  .track-wave span{width:2.5px;background:var(--text-muted);border-radius:2px;}
  .track.playing .track-wave{opacity:1;}
  .track.playing .track-wave span{background:var(--gold-dark);animation:bar 1s ease-in-out infinite;}
  .vipassana .track.playing .track-wave span{background:var(--green-dark);}
  .sapta .track.playing .track-wave span{background:var(--violet-dark);}
  .track-wave span:nth-child(1){height:5px;animation-delay:0s;}
  .track-wave span:nth-child(2){height:12px;animation-delay:.15s;}
  .track-wave span:nth-child(3){height:8px;animation-delay:.3s;}
  .track-wave span:nth-child(4){height:14px;animation-delay:.45s;}
  @keyframes bar{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}
  .play-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--brown-800);background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .samatha .play-btn{border-color:var(--gold-dark);color:var(--gold-dark);}
  .vipassana .play-btn{border-color:var(--green-dark);color:var(--green-dark);}
  .sapta .play-btn{border-color:var(--violet-dark);color:var(--violet-dark);}
  .play-btn svg{width:13px;height:13px;}
  .track.playing .play-btn{background:var(--brown-900);color:#fff;border-color:var(--brown-900);}
  .divider{height:1px;background:var(--line);margin:2px 12px;}

  .parent-row{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:var(--radius-md);cursor:pointer;transition:background .15s ease, transform .12s ease;}
  .parent-row:hover{background:var(--surface-2);}
  .parent-row:active{transform:scale(.985);}
  .chevron{width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:transform .2s ease;flex-shrink:0;cursor:pointer;}
  .chevron svg{width:18px;height:18px;flex-shrink:0;display:block;}
  .chevron.open{transform:rotate(180deg);}
  .children{overflow:hidden;max-height:0;transition:max-height .25s ease;padding-left:10px;}
  .children.open{max-height:260px;}
  .child-track{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 4px;border-radius:12px;cursor:pointer;transition:background .15s ease, transform .12s ease;}
  .child-track:hover{background:var(--surface-2);}
  .child-track:active{transform:scale(.98);}
  .child-badge{width:24px;height:24px;border-radius:50%;background:var(--green-light);color:var(--green-dark);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
  .child-title{flex:1;font-size:13.5px;color:var(--text-main);}
  .child-play{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--green-dark);color:var(--green-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--surface);}
  .child-play svg{width:11px;height:11px;}
  .child-track.playing .child-play{background:var(--green-dark);color:#fff;}

  .hint{margin:18px 16px 0;font-size:11.5px;color:var(--text-muted);background:var(--surface-2);border:1px dashed var(--line);border-radius:12px;padding:10px 14px;line-height:1.6;text-align: center;}
  .hint code{background:var(--surface);padding:1px 5px;border-radius:5px;}

  .site-footer{background:var(--brown-900);color:var(--cream);text-align:center;padding:15px 24px 20px;margin-top:28px;}
  .site-footer .footer-lotus{width:26px;height:26px;color:var(--gold-light);margin:0 auto 5px;display:block;}
  .site-footer .footer-tagline{font-family:'Noto Serif Sinhala',serif;font-weight:600;font-size:14.5px;color:var(--gold-light);margin-bottom:5px;letter-spacing:.01em;}
  .site-footer .footer-copy{font-size:10.5px;color:#C9BFA6;opacity:.85;letter-spacing:.02em;}

  .quote-card{position:relative;margin:24px 16px 0;padding:34px 24px 26px;border-radius:22px;overflow:hidden;
    background:linear-gradient(155deg,var(--surface) 0%,var(--surface-2) 100%);
    border:1px solid var(--line);box-shadow:var(--shadow);transition:background .3s ease;}
  .quote-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
    background:linear-gradient(180deg,var(--gold-light),var(--gold-dark));}
  .quote-glyph{position:absolute;top:7px;left:18px;font-family:'Noto Serif Sinhala',serif;font-size:84px;
    line-height:1;color:var(--gold-light);opacity:.55;user-select:none;}
  .quote-lotus{position:absolute;right:16px;bottom:14px;width:34px;height:34px;opacity:.16;}
  .quote-text{position:relative;z-index:1;font-family:'Noto Serif Sinhala',serif;font-weight:600;
    font-size:15.5px;line-height:1.95;color:var(--text-strong);text-align: justify;}
  .quote-shimmer{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,0.55) 48%,transparent 66%);
    transform:translateX(-120%);animation:shimmer 4.5s ease-in-out 1.2s infinite;pointer-events:none;}
  @keyframes shimmer{0%,60%,100%{transform:translateX(-120%);}80%{transform:translateX(120%);}}

  /* player */
  @keyframes playerUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
  .player{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;background:var(--brown-900);color:var(--cream);padding:12px 16px 14px;display:flex;flex-direction:column;gap:8px;z-index:50;animation:playerUp .6s .4s cubic-bezier(.2,.8,.2,1) both;}
  .player-top{display:flex;align-items:center;gap:12px;}
  .player-art{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--brown-800));flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .player-art svg{width:22px;height:22px;color:var(--gold-light);}
  .player-info{flex:1;min-width:0;}
  .player-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .player-cat{font-size:11.5px;color:#C9BFA6;}
  .player-controls{display:flex;align-items:center;gap:18px;flex-shrink:0;}
  .player-controls button{background:none;border:none;color:var(--cream);cursor:pointer;padding:6px;display:flex;transition:transform .12s ease;}
  .player-controls button:active{transform:scale(.88);}
  .player-controls svg{width:21px;height:21px;}
  .player-controls .play-pause{position:relative;width:62px;height:62px;margin-top:-16px;border:2.5px solid var(--gold-light);border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));box-shadow:0 8px 20px rgba(0,0,0,0.4), inset 0 0 0 3px rgba(255,255,255,0.15);flex-shrink:0;}
  .player-controls .play-pause:active{transform:scale(.9);}
  .player-controls .play-pause svg{width:26px;height:26px;color:var(--brown-900);}
  .player-controls .play-pause.is-playing::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold-light);opacity:.7;animation:ring 1.8s ease-out infinite;}
  @keyframes ring{0%{transform:scale(.85);opacity:.7;}100%{transform:scale(1.35);opacity:0;}}
  .player-progress{display:flex;align-items:center;gap:10px;font-size:10.5px;color:#C9BFA6;}
  .player-progress input[type=range]{flex:1;height:3px;-webkit-appearance:none;background:rgba(255,255,255,0.22);border-radius:4px;outline:none;}
  .player-progress input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold-light);cursor:pointer;}
  .player-progress input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--gold-light);border:none;cursor:pointer;}

  input[type=file]{display:none;}

/* falling bo leaf animation */
.falling-leaf{position:fixed;top:-28px;pointer-events:none;z-index:999;color:#5C7A45;opacity:.95;animation-name:leafFall;animation-timing-function:ease-in-out;animation-fill-mode:forwards;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.15));}
.falling-leaf svg{width:100%;height:100%;display:block;}
@keyframes leafFall{
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:1;}
  15%{transform:translateY(15vh) translateX(calc(var(--amp,30px) * 1)) rotate(calc(var(--rot,320deg) * 0.15)) rotateY(0deg);}
  30%{transform:translateY(30vh) translateX(calc(var(--amp,30px) * -1)) rotate(calc(var(--rot,320deg) * 0.3));}
  45%{transform:translateY(45vh) translateX(calc(var(--amp,30px) * 0.9)) rotate(calc(var(--rot,320deg) * 0.45));}
  60%{transform:translateY(60vh) translateX(calc(var(--amp,30px) * -0.9)) rotate(calc(var(--rot,320deg) * 0.6));}
  75%{transform:translateY(75vh) translateX(calc(var(--amp,30px) * 0.7)) rotate(calc(var(--rot,320deg) * 0.75));opacity:.9;}
  90%{transform:translateY(90vh) translateX(calc(var(--amp,30px) * -0.5)) rotate(calc(var(--rot,320deg) * 0.9));opacity:.55;}
  100%{transform:translateY(108vh) translateX(0) rotate(var(--rot,320deg));opacity:0;}
}