/* 108 Counter: warm grainy saffron, a dark still centre, one thing to touch. */
:root{--bg:#160503;--ink:#fff8f0;--soft:#d9b9a6;--acc:#ffb066;--line:rgba(255,220,190,.14);--orb:min(84vw,47svh,430px);--glow:rgba(255,190,110,.5)}
.stage{background:#b92a08;color:#fff;align-items:center;text-align:center}
.mesh{position:absolute;inset:-12%;z-index:-2;background:radial-gradient(38% 30% at 50% 44%,#4c0a02 0,#8f1605 46%,transparent 100%),radial-gradient(40% 30% at 6% 42%,rgba(255,226,150,.95) 0,rgba(255,176,77,.62) 42%,rgba(255,130,40,0) 100%),radial-gradient(70% 40% at 60% 104%,#ff8a1f 0,#f0641a 55%,transparent 100%),radial-gradient(70% 34% at 90% -2%,#e8481a 0,transparent 100%),linear-gradient(180deg,#c9320c,#de4a12 60%,#ef6a1c);filter:saturate(1.08);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(2%,-1.6%,0) scale(1.05)}}
.stage::after{content:'';position:absolute;inset:auto 0 0;height:90px;z-index:-1;background:linear-gradient(180deg,transparent,var(--bg))}
.grain{opacity:.36}
.in{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;padding:max(66px,calc(env(safe-area-inset-top) + 56px)) 20px max(30px,env(safe-area-inset-bottom))}
h1{font-size:22px}
#tool{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.2svh,22px);padding-top:clamp(8px,2svh,20px)}
.orb{position:relative;width:var(--orb);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;touch-action:manipulation;user-select:none;-webkit-user-select:none;color:#fff}
.orb svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orb circle{fill:rgba(255,255,255,.2);transition:fill .25s}
.orb circle.on{fill:#fff4e2;filter:drop-shadow(0 0 4px #fff)}
.orb circle.head{fill:#fff}
.rings{position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,rgba(46,6,1,.92) 0,rgba(72,10,2,.86) 44%,rgba(140,28,6,.5) 62%,rgba(255,170,90,.2) 74%,rgba(255,220,170,.26) 84%,rgba(255,240,215,.05) 100%);box-shadow:0 0 70px rgba(70,8,0,.5),inset 0 0 0 1px rgba(255,235,210,.2)}
.rings::before,.rings::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(255,225,190,.2)}
.rings::before{inset:13%}
.rings::after{inset:26%;border-color:rgba(255,225,190,.11)}
.orb.on .rings{animation:hum 4.05s ease-in-out infinite}
@keyframes hum{0%,100%{box-shadow:0 0 70px rgba(70,8,0,.5),inset 0 0 0 1px rgba(255,235,210,.2)}22%{box-shadow:0 0 110px rgba(255,190,110,.5),inset 0 0 0 1px rgba(255,235,210,.42)}}
.ripple{position:absolute;inset:9%;border-radius:50%;border:2px solid rgba(255,235,205,.8);pointer-events:none;animation:ripple .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes ripple{from{transform:scale(.62);opacity:.9}to{transform:scale(1.09);opacity:0}}
.count{position:relative;display:grid;justify-items:center;gap:2px;pointer-events:none}
.count b{font-size:calc(var(--orb)*.27);line-height:1;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.count span{font-size:16px;line-height:1.3;color:#ffdcc0;font-weight:500}
.tally{font-size:16px;font-weight:500;color:#fff;min-height:24px;text-shadow:0 1px 10px rgba(90,14,0,.55)}
.ctrl{margin-top:auto}
.ctrl .go{--glow:rgba(255,235,190,.55)}
.ctrl .lab{display:block}
.golabel{font-size:16px;font-weight:600;color:#fff;margin-top:-6px;text-shadow:0 1px 10px rgba(90,14,0,.55)}
.pills{background:rgba(70,10,0,.34);border-color:rgba(255,235,210,.2)}
.pills button{color:#fff;opacity:1}
.pills button[aria-pressed=true]{color:#6a1305}
.mini{background:rgba(70,10,0,.34);border-color:rgba(255,235,210,.2)}
/* Which mantra: tall soft cards, each one a sound you can try */
.lede{color:var(--soft);margin-bottom:28px}
.shelf{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc((100vw - min(100vw - 40px,640px))/-2);padding-inline:calc((100vw - min(100vw - 40px,640px))/2);padding-block:4px 14px;scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}
.card{flex:none;scroll-snap-align:center;position:relative;overflow:hidden;width:min(70vw,258px);height:372px;border-radius:26px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.card>*{position:relative}
.card h3{font-size:22px;letter-spacing:-.018em}
.card p{font-size:16px;line-height:1.35;margin-top:6px;color:rgba(255,255,255,.88)}
.motif{position:absolute!important;inset:0;pointer-events:none;mix-blend-mode:screen}
.card .use{margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 12px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:16px;font-weight:600}
.card .use svg{width:18px;height:18px;fill:currentColor}
.card.on{box-shadow:inset 0 0 0 2px #fff}
.card.on .motif{animation:cardhum 3.4s ease-in-out infinite}
@keyframes cardhum{50%{transform:scale(1.07);opacity:.85}}
.m-rings{background:radial-gradient(circle at 50% 56%,#fff5 0 5%,transparent 5.5%,#fff4 5.5% 6%,transparent 6.5% 11%,#fff3 11% 11.8%,transparent 12.3% 18%,#fff3 18% 18.8%,transparent 19.3% 26%,#fff2 26% 27%,transparent 27.5% 36%,#ffffff18 36% 37%,transparent 37.5%)}
.m-flame{background:radial-gradient(9% 21% at 50% 54%,#fff 0,#fff9 40%,transparent 100%),radial-gradient(48% 30% at 50% 84%,#ffb35a99,transparent 100%)}
.m-moon{background:radial-gradient(circle at 50% 54%,transparent 0 11%,#ffffff55 12%,#ffffff22 23%,transparent 34%)}
.m-two{background:radial-gradient(circle at 50% 44%,transparent 0 10%,#ffffff60 11%,transparent 21%),radial-gradient(circle at 50% 66%,transparent 0 10%,#ffffff60 11%,transparent 21%)}
.m-sun{background:radial-gradient(circle at 50% 58%,#fff 0 4%,#ffe6a8aa 9%,#ffb86a55 22%,transparent 42%)}
.m-breath{background:radial-gradient(ellipse 34% 22% at 50% 56%,#ffffff55,transparent 100%),radial-gradient(ellipse 42% 12% at 50% 56%,#ffffff33,transparent 100%)}
.how{display:grid;gap:18px}
@media (max-height:680px){:root{--orb:min(76vw,40svh,330px)}.go{width:72px;height:72px}.mini{width:50px;height:50px}.pills button{min-height:40px}.in{padding-top:58px}}