[hidden]{display:none!important}
:root{
  --bg:#0D0E18; --bg2:#121323; --surface:#171829; --surface2:#1E1F33; --line:#2C2D45;
  --text:#ECE8DE; --muted:#A3A0B4; --faint:#6E6C82;
  --accent:#D0583F; --accent-ink:#0D0E18;
  --serif:'Gambetta',Georgia,serif; --sans:'Switzer','Segoe UI',system-ui,sans-serif;
  --r:18px; --r-sm:12px;
  --t-xs:.8125rem; --t-sm:.9375rem; --t-base:1rem; --t-lg:1.1875rem; --t-xl:1.5rem; --t-2xl:clamp(1.9rem,4.5vw,2.75rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--t-base);line-height:1.55;-webkit-font-smoothing:antialiased}
body{min-height:100dvh;background:
  radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb,var(--accent) 16%, transparent), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, #23215055, transparent 60%), var(--bg);
  transition:background .8s var(--ease)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;background-image:
  radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 72% 32%,#fff6 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 38% 72%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 88% 84%,#fff6 50%,transparent 51%),
  radial-gradient(1px 1px at 55% 12%,#fff5 50%,transparent 51%),radial-gradient(1.2px 1.2px at 22% 92%,#fff4 50%,transparent 51%)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0;letter-spacing:-.01em}
h1{font-size:var(--t-2xl)} h2{font-size:var(--t-xl)} h3{font-size:var(--t-lg);font-family:var(--sans);font-weight:600;letter-spacing:0}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:var(--t-sm)} .xs{font-size:var(--t-xs)}
.eyebrow{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}

/* shell */
.shell{display:grid;grid-template-columns:minmax(0,1fr);min-height:100dvh}
.view,.lockbox>div,.card,.grid>*{min-width:0}
html,body{overflow-x:hidden}
.rail{position:fixed;inset:auto 0 0 0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.brand,.rail-note{display:none}
.tabs{display:grid;grid-template-columns:repeat(6,1fr)}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;text-decoration:none;color:var(--faint);font-size:.6875rem;font-weight:500;letter-spacing:.02em}
.tabs a svg{width:22px;height:22px}
.tabs a.on{color:var(--text)} .tabs a.on svg{color:var(--accent)}
.view{padding:calc(20px + env(safe-area-inset-top)) 20px 120px;max-width:980px;width:100%;margin:0 auto;outline:none}
@media (min-width:900px){
  .shell{grid-template-columns:232px minmax(0,1fr)}
  .rail{position:sticky;top:0;inset:auto;height:100dvh;border-top:0;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:28px 16px;background:transparent}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-size:1.4rem;padding:0 10px 28px}
  .brand-mark{width:34px;height:34px;color:var(--accent)}
  .tabs{display:flex;flex-direction:column;gap:2px}
  .tabs a{flex-direction:row;gap:12px;font-size:var(--t-sm);padding:11px 12px;border-radius:12px}
  .tabs a:hover{background:var(--surface)} .tabs a.on{background:var(--surface2)}
  .rail-note{display:block;margin-top:auto;padding:0 12px;font-size:var(--t-xs);color:var(--faint)}
  .view{padding:44px 40px 80px}
}

/* header row */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.mobile-brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:1.15rem;margin-bottom:18px}
.mobile-brand svg{width:26px;height:26px;color:var(--accent)}
@media(min-width:900px){.mobile-brand{display:none}}
.tourbtn{flex:none;border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 13px;font-size:var(--t-xs);color:var(--muted);cursor:pointer}
.tourbtn:hover{color:var(--text);border-color:var(--muted)}

/* surfaces */
.card{background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.grid{display:grid;gap:14px}
@media(min-width:640px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
.stack>*+*{margin-top:12px}
.section{margin-top:32px}
.section>.eyebrow{margin-bottom:12px;display:block}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font-weight:600;font-size:var(--t-sm);cursor:pointer;text-decoration:none;background:var(--accent);color:var(--accent-ink);transition:transform .15s var(--ease),filter .2s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)} .btn.ghost:hover{border-color:var(--muted)}
.btn.sm{padding:8px 14px;font-size:var(--t-xs)}
.btn[disabled]{opacity:.45;pointer-events:none}
.chip{text-decoration:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:var(--t-xs);background:transparent;cursor:pointer;color:var(--muted);white-space:nowrap}
.chip.on{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.chip .dot{width:8px;height:8px;border-radius:50%}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}

/* hero */
.hero{display:grid;gap:20px;align-items:center}
.hero p.lead{font-size:var(--t-lg);color:var(--muted);max-width:52ch;margin-top:12px}
.stats{display:flex;gap:26px;margin-top:6px}
.stat b{display:block;font-family:var(--serif);font-size:1.9rem;font-weight:400;font-variant-numeric:tabular-nums}
.stat span{font-size:var(--t-xs);color:var(--muted)}

/* chakra column */
.column{display:grid;gap:10px}
.door{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);text-decoration:none;cursor:pointer;text-align:left;width:100%;transition:border-color .2s,transform .2s var(--ease)}
.door:hover{border-color:var(--c);transform:translateX(3px)}
.orb{flex:none;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 60%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 40%,#000));box-shadow:0 0 22px color-mix(in srgb,var(--c) 45%,transparent);display:grid;place-items:center;font-family:var(--serif);color:#0D0E18;font-size:1.05rem}
.door .meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.door .meta b{font-weight:600}
.door .meta span{font-size:var(--t-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.door .tag{font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.door .tag svg{width:15px;height:15px}
.door.locked{opacity:.62}

/* lesson detail */
.detail-head{display:flex;gap:20px;align-items:center}
.orb{--c:var(--accent)}
@media(max-width:520px){.detail-head{flex-direction:column;align-items:flex-start}.door .tag{display:none}}
.detail-head .orb{width:68px;height:68px;font-size:1.5rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:var(--t-sm)}
.kv dt{color:var(--muted)} .kv dd{margin:0}
blockquote{margin:0;padding:16px 18px;border-left:3px solid var(--accent);background:var(--surface2);border-radius:0 12px 12px 0;font-family:var(--serif);font-size:var(--t-lg)}
ol.steps{margin:0;padding-left:1.2em} ol.steps li+li{margin-top:8px}

/* meditate */
.pacer-wrap{display:grid;place-items:center;padding:26px 0 10px}
.pacer{position:relative;width:min(70vw,290px);aspect-ratio:1;display:grid;place-items:center}
.pacer .ring{position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
.pacer .ring.r2{inset:-14px;opacity:.35}
.pacer .core{width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--accent) 55%,#fff),var(--accent) 60%,color-mix(in srgb,var(--accent) 35%,#000));box-shadow:0 0 60px color-mix(in srgb,var(--accent) 55%,transparent);transform:scale(.62);transition:transform 4s ease-in-out}
.pacer .label{position:absolute;bottom:-40px;left:0;right:0;text-align:center;font-size:var(--t-sm);color:var(--muted);letter-spacing:.06em}
.pacer .time{position:absolute;font-family:var(--serif);font-size:1.6rem;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.cue{min-height:6.5em;text-align:center;max-width:46ch;margin:56px auto 0;font-size:var(--t-lg);transition:opacity .6s}
.cue .step{display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.progress{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:18px}
.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width 1s linear}
.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* affirmations */
.aff-card{position:relative;min-height:260px;display:grid;place-items:center;text-align:center;padding:36px 26px;border-radius:24px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));background:radial-gradient(500px 260px at 50% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),var(--surface)}
.aff-text{font-family:var(--serif);font-size:clamp(1.5rem,4.2vw,2.3rem);line-height:1.25;max-width:22ch;transition:opacity .45s,transform .45s var(--ease)}
.aff-text.out{opacity:0;transform:translateY(8px)}
.aff-count{position:absolute;top:16px;left:20px;font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.aff-speaking{position:absolute;top:16px;right:20px;display:flex;gap:3px;height:14px;align-items:flex-end}
.aff-speaking i{width:3px;background:var(--accent);border-radius:2px;height:4px}
.aff-speaking.on i{animation:eq .9s ease-in-out infinite}
.aff-speaking.on i:nth-child(2){animation-delay:.15s}.aff-speaking.on i:nth-child(3){animation-delay:.3s}
@keyframes eq{50%{height:14px}}
.iconbtn{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer}
.iconbtn svg{width:22px;height:22px}
.iconbtn.big{width:68px;height:68px;background:var(--accent);color:var(--accent-ink);border:0}
.iconbtn.big svg{width:28px;height:28px}
.toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 15px;background:transparent;cursor:pointer;font-size:var(--t-sm)}
.toggle svg{width:18px;height:18px}
.toggle[aria-pressed="false"]{color:var(--muted)}

/* sliders (generator) */
.gen{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.gen>*,.field{min-width:0}
.readout{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.readout .val{font-family:var(--serif);font-size:2.4rem;font-variant-numeric:tabular-nums;line-height:1}
.readout .val small{font-family:var(--sans);font-size:var(--t-sm);color:var(--muted);margin-left:4px}
.field label{display:flex;justify-content:space-between;font-size:var(--t-sm);margin-bottom:8px}
.field label span{color:var(--muted);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--accent) var(--p,50%),var(--line) var(--p,50%))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--line)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--text);margin-top:-9px;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 35%,transparent)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--text)}
.bandbar{display:grid;grid-template-columns:3fr 4fr 5fr 17fr 20fr;height:8px;border-radius:8px;overflow:hidden;margin-top:-2px}
.bandbar i{opacity:.35}.bandbar i.on{opacity:1}
.bandlabels{display:grid;grid-template-columns:3fr 4fr 5fr 17fr 20fr;font-size:.6875rem;color:var(--faint);margin-top:4px}
.bandlabels span{overflow:hidden;white-space:nowrap}
.bandlabels .full{display:none}@media(min-width:640px){.bandlabels .full{display:inline}.bandlabels .sym{display:none}}
.banddesc{padding:14px 16px;border-radius:12px;background:var(--surface2);font-size:var(--t-sm)}
.banddesc b{color:var(--text)}
.lr{display:flex;gap:18px;font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.wave{width:100%;height:64px;display:block}
select,input[type=text],input[type=search]{width:100%;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit}
.presetrow{display:flex;gap:8px;flex-wrap:wrap}

/* help */
.ask{display:flex;gap:8px}
.answer{border-left:3px solid var(--accent);padding:12px 16px;background:var(--surface2);border-radius:0 12px 12px 0}
details.faq{border-bottom:1px solid var(--line);padding:14px 2px}
details.faq summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::after{content:"+";color:var(--muted);font-size:1.2rem;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq p{margin-top:10px;color:var(--muted)}

/* now playing */
.nowplaying{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));z-index:25;display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 14px;font-size:var(--t-xs);box-shadow:0 10px 30px #0008}
.np-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.np-stop{border:0;background:var(--bg2);border-radius:999px;padding:5px 11px;cursor:pointer;font-size:var(--t-xs)}
@media(min-width:900px){.nowplaying{bottom:24px;left:auto;right:24px;transform:none}}

/* modal + tour */
.modal{position:fixed;inset:0;z-index:50;background:#05060cc4;display:grid;place-items:center;padding:20px}
.modal-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;max-width:460px;width:100%;padding:28px;max-height:90dvh;overflow:auto}
.onb-art{height:150px;display:grid;place-items:center;margin-bottom:18px}
.onb-art svg{width:110px;height:110px;color:var(--accent)}
.dots{display:flex;gap:6px;justify-content:center;margin:18px 0}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)} .dots i.on{background:var(--accent);width:20px;border-radius:7px}
.tour{position:fixed;inset:0;z-index:60}
.tour-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px #05060cd0,0 0 0 2px var(--accent);transition:all .35s var(--ease);pointer-events:none}
.tour-pop{position:fixed;max-width:320px;background:var(--surface2);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 18px 40px #000a;transition:top .35s var(--ease),left .35s var(--ease)}
.tour-pop .row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:8px}
.lockbox{display:flex;gap:14px;align-items:flex-start}
.lockbox svg{width:22px;height:22px;flex:none;color:var(--accent);margin-top:2px}
.notice{font-size:var(--t-xs);color:var(--faint);margin-top:28px;max-width:70ch}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* affirmation voices */
.row-between{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
#a-voices .label{font-size:var(--t-sm);font-weight:600}
.voicelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.voiceopt{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s,background .2s}
.voiceopt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.voicepick{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;text-align:left;gap:2px 8px;padding:10px 12px;background:none;border:0;color:inherit;cursor:pointer;font:inherit}
.voicepick b{font-size:var(--t-sm);font-weight:600}
.voicepick span{grid-column:1;font-size:.75rem;color:var(--muted)}
.voicepick svg{grid-column:2;grid-row:1/3;align-self:center;color:var(--muted)}
.voiceopt.locked .voicepick b{color:var(--muted)}
.voiceprev{width:44px;flex:none;display:grid;place-items:center;background:none;border:0;border-left:1px solid var(--line);color:var(--muted);cursor:pointer}
.voiceprev svg{width:16px;height:16px}
.voiceprev.on,.voiceprev:hover{color:var(--accent)}
.voicepick:focus-visible,.voiceprev:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit}