:root{--bg:#0B1410;--bg2:#0E1A14;--moss:#2F5D4A;--sage:#7A9E8A;--sand:#D4C4A8;--gold:#C9A86A;--mist:#E8F0EA;
--display:"Cormorant Garamond",Georgia,serif;--body:"Outfit",system-ui,-apple-system,sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--mist);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 55% at 50% -10%,rgba(47,93,74,.35),transparent 70%),radial-gradient(ellipse 60% 40% at 85% 80%,rgba(201,168,106,.07),transparent 70%)}
.wrap{max-width:60rem;margin:0 auto;padding:clamp(1.25rem,4vw,2.5rem);padding-bottom:3rem}
.back{color:var(--sage);text-decoration:none;font-size:.95rem}
.back:hover{color:var(--gold)}
h1{font-family:var(--display);font-weight:500;font-size:clamp(2.1rem,7vw,3.4rem);line-height:1.1;margin:.8rem 0 .4rem;color:var(--mist)}
.sub{color:var(--sage);margin:0 0 1.8rem;font-size:1.05rem}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr);gap:1rem}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;min-height:6.5rem;padding:1rem;border-radius:1.1rem;border:1px solid rgba(47,93,74,.6);background:linear-gradient(160deg,rgba(14,26,20,.95),rgba(11,20,16,.95));color:var(--mist);font:500 1.35rem/1.2 var(--display);text-align:left;display:flex;align-items:flex-end;cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .15s;-webkit-tap-highlight-color:transparent}
.tile:hover{border-color:rgba(201,168,106,.55)}
.tile:active{transform:scale(.985)}
.tile[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 28px rgba(201,168,106,.18)}
.tile .state{position:absolute;top:.8rem;right:.9rem;width:.6rem;height:.6rem;border-radius:50%;background:transparent;border:1px solid rgba(122,158,138,.6)}
.tile[aria-pressed="true"] .state{background:var(--gold);border-color:var(--gold);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.tile[aria-pressed="true"] .state{animation:none}}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.controls{margin-top:2rem;padding:1.2rem;border:1px solid rgba(47,93,74,.45);border-radius:1.1rem;background:rgba(14,26,20,.6);display:grid;gap:1.1rem}
.ctl{display:grid;gap:.45rem;color:var(--sand);font-size:.95rem}
.ctl input[type=range]{width:100%;accent-color:var(--gold);height:2rem}
.seg{display:flex;flex-wrap:wrap;gap:.45rem}
.seg button{flex:1 1 auto;min-height:2.6rem;padding:.4rem .8rem;border-radius:999px;border:1px solid rgba(47,93,74,.7);background:transparent;color:var(--mist);font:400 .95rem var(--body);cursor:pointer}
.seg button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.check{display:flex;align-items:center;gap:.6rem}
.check input{width:1.2rem;height:1.2rem;accent-color:var(--gold)}
.status{margin:0;color:var(--sage);font-size:.95rem;min-height:1.5em}
.foot{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;color:var(--sage);font-size:.95rem}
.foot a{color:var(--sand);text-decoration:none;border-bottom:1px solid rgba(201,168,106,.35)}
.foot a:hover{color:var(--gold)}
.foot .coffee{color:var(--gold)}
.fine{flex-basis:100%;margin:.4rem 0 0;font-size:.85rem;color:var(--sage)}
/* Healing Frequencies */
.freq{margin-top:2.2rem}
.freq h2{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,5vw,2.3rem);margin:0 0 .4rem}
.freq h3{font-family:var(--display);font-weight:500;font-size:1.5rem;margin:1.8rem 0 .3rem}
.note{color:var(--sage);font-size:.95rem;margin:0 0 1rem}
.hp{color:var(--gold);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.tones{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}
@media(min-width:640px){.tones{grid-template-columns:repeat(4,1fr)}}
.tone{min-height:3.6rem;padding:.55rem .75rem;border-radius:.9rem;border:1px solid rgba(47,93,74,.6);background:rgba(14,26,20,.85);color:var(--mist);text-align:left;cursor:pointer;font:400 .9rem/1.25 var(--body)}
.tone b{display:block;font:500 1.15rem/1.15 var(--display);color:var(--mist)}
.tone small{color:var(--sage);font-size:.78rem}
.tone[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.tone[aria-pressed="true"] b{color:var(--gold)}
.tone-desc{color:var(--sand);font-size:.92rem;min-height:1.4em;margin:.7rem 0 .8rem}
.freq .ctl{margin-bottom:.8rem}
.folders{margin-bottom:.8rem}
.sets{display:grid;grid-template-columns:1fr;gap:.55rem}
@media(min-width:640px){.sets{grid-template-columns:repeat(2,1fr)}}
.set{padding:.8rem .95rem;border-radius:.9rem;border:1px solid rgba(47,93,74,.6);background:rgba(14,26,20,.85);color:var(--mist);text-align:left;cursor:pointer;font:400 .9rem/1.35 var(--body)}
.set b{display:block;font:500 1.2rem/1.2 var(--display)}
.set span{display:block;color:var(--sage);font-size:.85rem}
.set em{display:block;font-style:normal;color:var(--gold);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-top:.35rem}
.set[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.today{display:block;width:100%;margin:0 0 .8rem;padding:.8rem 1rem;border-radius:.9rem;border:1px solid var(--gold);background:rgba(201,168,106,.08);color:var(--mist);text-align:left;cursor:pointer;font:400 .9rem var(--body)}
.today b{font:500 1.25rem var(--display);color:var(--gold)}
.today small{display:block;color:var(--sage);font-size:.8rem;margin-top:.2rem}
.set-status{color:var(--sand);font-size:.92rem;min-height:1.4em;margin:.8rem 0}
.stop-all{min-height:2.6rem;padding:.4rem 1.1rem;border-radius:999px;border:1px solid rgba(201,168,106,.6);background:transparent;color:var(--gold);font:400 .95rem var(--body);cursor:pointer}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.tone:focus-visible,.set:focus-visible,.folders button:focus-visible,.stop-all:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* Hand Pan */
.handpan{margin-top:2.2rem}
.handpan h2{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,5vw,2.3rem);margin:0 0 .4rem}
.hp-tile{width:100%;min-height:5.2rem;margin-bottom:.2rem}
.hp-tile .name{display:flex;flex-direction:column}
.hp-tile small{font:400 .8rem var(--body);color:var(--sage);letter-spacing:.04em;margin-top:.2rem}
.hp-tile[aria-pressed="true"] small{color:var(--gold)}
@media(min-width:640px){.hp-tile{max-width:22rem}}
.hp-tile{position:relative;padding:1rem;border-radius:1.1rem;border:1px solid rgba(47,93,74,.6);background:linear-gradient(160deg,rgba(14,26,20,.95),rgba(11,20,16,.95));color:var(--mist);font:500 1.35rem/1.2 var(--display);text-align:left;display:flex;align-items:flex-end;cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .15s;-webkit-tap-highlight-color:transparent}
.hp-tile:hover{border-color:rgba(201,168,106,.55)}
.hp-tile:active{transform:scale(.985)}
.hp-tile[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 28px rgba(201,168,106,.18)}
.hp-tile .state{position:absolute;top:.8rem;right:.9rem;width:.6rem;height:.6rem;border-radius:50%;border:1px solid rgba(122,158,138,.6)}
.hp-tile[aria-pressed="true"] .state{background:var(--gold);border-color:var(--gold);animation:breathe 4s ease-in-out infinite}
.handpan .ctl{margin-bottom:.8rem}