@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;src:url(/inter.woff2) format("woff2")}
/* What all three tool sites share. Each site's own stage and tool are in its site.css. */
:root{color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 18px/1.6 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button,select{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

/* The first screen */
.stage{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;flex-direction:column}
.logo{position:absolute;z-index:5;top:max(18px,env(safe-area-inset-top));left:20px}
.logo img{width:118px;height:auto}
.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.13;mix-blend-mode:overlay}
h1{font-weight:600;letter-spacing:-.022em;line-height:1.15}
h1 span{opacity:.68}

/* The big round button and its two small companions, as on a good meditation player */
.ctrl{display:flex;align-items:center;justify-content:center;gap:22px}
.go{width:84px;height:84px;border-radius:50%;background:#fffaf0;color:#14060a;display:grid;place-items:center;box-shadow:0 10px 44px var(--glow,rgba(255,255,255,.28)),inset 0 -3px 8px rgba(120,70,20,.14);transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.go:active{transform:scale(.94)}
.go svg{width:34px;height:34px;fill:currentColor}
.mini{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .16s,background .2s,opacity .2s}
.mini:active{transform:scale(.92)}
.mini svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mini[aria-pressed=true]{background:#fffaf0;color:#14060a}
.pills{display:inline-flex;padding:4px;gap:2px;border-radius:999px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pills button{min-height:44px;min-width:60px;padding:0 16px;border-radius:999px;font-size:17px;font-weight:500;font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.pills button[aria-pressed=true]{background:#fffaf0;color:#14060a}

/* Below the first screen */
.more,.read,.faq,.proof-in,.plat-in{width:min(100% - 40px,640px);margin-inline:auto}
.more{padding-top:72px;display:grid;grid-template-columns:minmax(0,1fr);gap:72px}
.kick{font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--acc);margin-bottom:10px}
h2{font-size:clamp(30px,6.4vw,40px);line-height:1.12;font-weight:600;letter-spacing:-.028em;margin-bottom:16px}
h3{font-size:21px;line-height:1.25;font-weight:600;letter-spacing:-.014em}
.soft{color:var(--soft)}
.sm{font-size:16px;line-height:1.5;color:var(--soft)}
.read{padding-top:88px}
.read h2{margin-top:56px}
.read h2:first-child{margin-top:0}
.read p{color:var(--soft);margin-bottom:16px}
.read a,.faq a,.sm a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--acc)}
.read ol{list-style:none;counter-reset:n;margin:20px 0 8px;display:grid;gap:14px}
.read ol li{counter-increment:n;position:relative;padding-left:44px;color:var(--soft)}
.read ol li::before{content:counter(n);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.08)}
.proof{margin-top:88px}
.proof-in>p{font-size:clamp(24px,5vw,30px);line-height:1.25;font-weight:600;letter-spacing:-.022em;margin-bottom:28px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.num b{display:block;font-size:clamp(30px,8vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.05;background:linear-gradient(180deg,#fff,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.num span{display:block;margin-top:8px;font-size:15px;line-height:1.3;color:var(--soft)}
.faq{padding-top:88px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;padding:20px 0;font-size:19px;font-weight:500;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:26px;line-height:1;font-weight:400;color:var(--soft);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--soft);padding-bottom:22px}
.help{margin-top:24px;font-size:16px;color:var(--soft)}

/* Platinum: purple, always */
.plat{position:relative;overflow:hidden;margin-top:96px;padding:96px 0 88px;background:radial-gradient(90% 70% at 50% 0,rgba(138,74,255,.42),transparent 72%),#0c0616;color:#fff}
.plat .kick{color:#c9a8ff}
.ticks{list-style:none;display:grid;gap:12px;margin:24px 0 32px}
.ticks li{position:relative;padding-left:32px;color:#d9d0ea}
.ticks li::before{content:'';position:absolute;left:2px;top:7px;width:15px;height:8px;border-left:2px solid #c9a8ff;border-bottom:2px solid #c9a8ff;transform:rotate(-45deg)}
.shine{position:relative;overflow:hidden;display:block;text-align:center;text-decoration:none;font-size:19px;line-height:1.3;font-weight:600;color:#fff;padding:20px 24px;border-radius:999px;background:linear-gradient(135deg,#7b3df0,#a65cff 55%,#7b3df0);box-shadow:0 14px 50px rgba(138,74,255,.55),inset 0 1px 0 rgba(255,255,255,.3);animation:breathe 3.6s ease-in-out infinite}
.shine::after{content:'';position:absolute;inset:-40% auto -40% -35%;width:32%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);animation:sweep 3.6s ease-in-out infinite}
@keyframes sweep{0%,35%{left:-35%}75%,100%{left:110%}}
@keyframes breathe{50%{box-shadow:0 14px 66px rgba(138,74,255,.82),inset 0 1px 0 rgba(255,255,255,.3)}}
.plat .sm{text-align:center;margin-top:18px;color:#b9aecf}
.plat .sm a{color:#fff;text-decoration-color:#c9a8ff}
footer{padding:48px 20px 56px;text-align:center;font-size:15px;color:#b9aecf;background:#0c0616;display:grid;gap:6px;justify-items:center}
footer img{width:108px;height:auto;margin-bottom:10px}

/* A mantra in its place: play, title, words */
.mant{display:grid;gap:16px;padding:22px;border-radius:24px;background:rgba(255,255,255,.055);border:1px solid var(--line)}
.mant .row{display:flex;gap:16px;align-items:center}
.pl{flex:none;width:56px;height:56px;border-radius:50%;background:#fffaf0;color:#14060a;display:grid;place-items:center}
.pl svg{width:24px;height:24px;fill:currentColor}
.mant .ti{font-size:19px;font-weight:600;letter-spacing:-.012em;line-height:1.25}
.mant .wy{font-size:16px;line-height:1.4;color:var(--soft);margin-top:2px}
.mant .ls{font-size:19px;line-height:1.6;font-weight:500}
.mant .mean{font-size:16px;line-height:1.5;color:var(--soft)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}