/* Aye & Aye - the look. Night by default; "light" via the Aa button.
   Colours from "Aye and Aye - Style Guide.md". Fonts are local files. */

@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#0a0f1c; --bg2:#101a33; --card:#16223c; --card2:#20304f;
  --ink:#f4f8ff; --soft:#c3d2ef; --line:rgba(150,190,255,.22);
  --link:#8fd4ff; --cyan:#8fd4ff; --indigo:#b4c0ff; --green:#57e0b8; --warm:#f3d9a4;
  --on-stone:#0a0f1c; --focus:#8fd4ff;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --fs:18px; --lh:1.7;
  color-scheme:dark;
}
html.light{
  --bg:#f5f2eb; --bg2:#ebe6db; --card:#fffdf8; --card2:#ece7dc;
  --ink:#141a2e; --soft:#454e6b; --line:#d6cfbf;
  --link:#1d5a86; --cyan:#7cc8f5; --indigo:#a9b5fb; --green:#4fd1aa; --warm:#efcf8f;
  --focus:#1d5a86;
  color-scheme:light;
}
html.size-l{--fs:21px}
html.size-xl{--fs:24px}
html.spaced{--lh:2;letter-spacing:.03em;word-spacing:.12em}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs)/var(--lh) var(--sans)}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em}
.skip{position:absolute;left:-999px}

/* ---------- front page ---------- */
body.front{min-height:100vh;background:
  radial-gradient(1100px 600px at 85% -10%,rgba(87,224,184,.10),transparent 60%),
  radial-gradient(900px 600px at 10% 110%,rgba(138,162,255,.12),transparent 60%),var(--bg)}
html.light body.front{background:radial-gradient(1100px 600px at 85% -10%,rgba(79,209,170,.18),transparent 60%),radial-gradient(900px 600px at 10% 110%,rgba(169,181,251,.25),transparent 60%),var(--bg)}
.page{min-height:100vh;display:flex;flex-direction:column;padding:32px 40px;max-width:1280px;margin:0 auto}
.top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.mark{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.mark i{color:var(--cyan);font-style:italic;font-weight:400}
html.light .mark i{color:var(--link)}
.top nav{display:flex;gap:22px;flex-wrap:wrap}
.top nav a{color:var(--soft);text-decoration:none;font-size:16px}
.top nav a:hover{color:var(--ink)}
.hero{flex:1;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:48px;padding:40px 0}
.hero h1{font-size:clamp(56px,8.6vw,124px);line-height:.98;margin:0 0 22px;letter-spacing:-.025em}
.hero h1 span{color:var(--ink)}
.hero h1 em{font-style:italic;font-weight:400;color:var(--cyan)}
html.light .hero h1 em{color:var(--link)}
.wink{font-size:20px;color:var(--soft);margin:0 0 26px}
.pick{display:inline-block;font-size:19px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--cyan);padding-bottom:3px}
.pick b{color:var(--cyan);font-weight:600;white-space:nowrap}
html.light .pick b{color:var(--link)}
.page>footer{color:var(--soft);font-size:14px}

/* the cairn: three stones, small on top */
.cairn{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 0}
.stone{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--on-stone);text-decoration:none;
  border-radius:999px/80%;padding:0 34px;box-shadow:0 14px 30px rgba(0,0,0,.35),inset 0 -8px 0 rgba(0,0,0,.08);
  transition:transform .25s ease}
.stone strong{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.01em}
.stone small{font-size:14px;font-weight:600;opacity:.8;text-align:right}
.s1{background:var(--cyan);width:min(78%,360px);height:92px;transform:rotate(-2deg)}
.s2{background:var(--indigo);width:min(90%,440px);height:104px;transform:rotate(1.5deg)}
.s3{background:var(--green);width:100%;max-width:520px;height:118px;transform:rotate(-.8deg)}
.stone:hover{transform:rotate(0) translateY(-3px)}
html.light .stone{box-shadow:0 10px 22px rgba(20,26,46,.16),inset 0 -8px 0 rgba(0,0,0,.06)}

@media (max-width:860px){
  .page{padding:22px 18px}
  .hero{grid-template-columns:1fr;gap:18px;padding:30px 0 20px}
  .top nav{gap:16px}
  .s1,.s2,.s3{width:100%;max-width:none;height:80px}
  .s1{width:84%}.s2{width:93%}
}

/* ---------- inner pages ---------- */
.bar{display:flex;align-items:center;gap:20px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--bg);flex-wrap:wrap;position:relative}
.bar nav{display:flex;gap:4px 20px;flex-wrap:wrap;flex:1}
.bar nav a{color:var(--soft);text-decoration:none;font-size:16px;padding:6px 0}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--ink)}
.bar nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--cyan)}
.aa{margin-left:auto;min-width:48px;min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-family:var(--serif);font-weight:600;font-size:19px;cursor:pointer}
.aa:hover{background:var(--card2)}
@media (max-width:760px){
  .bar{padding:14px 16px;gap:8px}
  .bar nav{order:3;flex-basis:100%}
  .bar .mark{flex:1}
}

.read{max-width:760px;margin:0 auto;padding:40px 24px 80px}
.read.wide{max-width:980px}
.read h1{font-size:clamp(38px,6vw,56px);margin:6px 0 14px}
.read h2{font-size:28px;margin:44px 0 10px}
.read h2.group{font-size:15px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--soft);margin:40px 0 12px}
.intro{font-size:1.15em;color:var(--soft);margin:0 0 26px}
.crumb{margin:0;font-size:15px}
.crumb a{color:var(--soft)}
.crumb a::before{content:"← "}
.read ul,.read ol{padding-left:1.3em}
.read li{margin:0 0 8px}
.small-list{font-size:.88em;color:var(--soft)}
.next{margin-top:44px;padding-top:18px;border-top:1px solid var(--line)}
.care{background:var(--bg2);border-left:4px solid var(--warm);padding:14px 18px;border-radius:0 12px 12px 0;color:var(--ink);font-size:.95em}
.sources{font-size:.92em}
.sources li{color:var(--soft)}

.foot{max-width:760px;margin:0 auto;padding:30px 24px 60px;border-top:1px solid var(--line);color:var(--soft);font-size:15px}
.foot .small{font-size:14px}

/* cards */
.cards{display:grid;gap:12px;margin:12px 0 24px}
.wide .cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;color:var(--ink);text-decoration:none;transition:background .2s}
.card:hover{background:var(--card2)}
.card b{display:block;font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.2;margin-bottom:4px}
.card span{display:block;color:var(--soft);font-size:.92em;line-height:1.55}
.card em{display:block;font-style:normal;font-size:14px;color:var(--soft);margin-top:10px;letter-spacing:.02em;opacity:.9}
.card i.s{font-family:var(--sans);font-style:normal;font-size:12px;font-weight:600;vertical-align:middle;background:var(--warm);color:var(--on-stone);border-radius:99px;padding:2px 9px;margin-left:6px}

.btn{display:inline-block;background:var(--cyan);color:var(--on-stone);border:0;border-radius:14px;padding:14px 24px;font-weight:600;text-decoration:none;cursor:pointer;min-height:52px}
.btn:hover{filter:brightness(1.08)}
.btn.big{font-size:20px;padding:16px 28px}

/* labels and tags */
.labels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0 0 24px}
.labels div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.labels small{display:block;font-size:13px;color:var(--soft)}
.labels b{font-weight:600}
.tags{margin:14px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-block;font-size:14px;font-weight:600;border-radius:99px;padding:4px 12px;background:var(--card2);color:var(--ink)}
.tag.sample{background:var(--warm);color:var(--on-stone)}
.first{background:var(--card2);border-radius:16px;padding:18px 22px;margin:0 0 20px}
.first small{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:600;color:var(--green)}
html.light .first small{color:#0d6a4e}
.first p{margin:4px 0 0;font-family:var(--serif);font-size:23px;line-height:1.35}
.go-row{margin:0 0 10px}

ol.steps{padding:0;list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:14px 0 14px 54px;border-bottom:1px solid var(--line);margin:0}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:12px;width:38px;height:38px;border-radius:50%;background:var(--card2);display:flex;align-items:center;justify-content:center;font-weight:600}
.stay{display:block;font-size:14px;color:var(--soft);margin-top:4px}

/* chips and rows of buttons */
.filters{display:grid;gap:10px;margin:0 0 14px}
.chips,.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips-l{font-size:14px;color:var(--soft);min-width:100px}
.chip,.row button{min-height:48px;padding:8px 16px;border-radius:99px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:16px}
.chip:hover,.row button:hover{background:var(--card2)}
.chip.on,.row button.on,.row button[aria-pressed="true"]{background:var(--cyan);color:var(--on-stone);border-color:var(--cyan);font-weight:600}
.clear{justify-self:start;background:none;border:0;color:var(--link);text-decoration:underline;cursor:pointer;min-height:44px}
.count{color:var(--soft);font-size:15px}
.none{color:var(--soft)}
.unit{color:var(--soft);font-size:15px}

/* the breath pacer */
.pacer{background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:22px;margin:0 0 22px;display:grid;gap:14px}
.stage{position:relative;height:300px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.orb{position:absolute;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(143,212,255,.55),rgba(138,162,255,.28) 55%,rgba(87,224,184,.10) 75%,transparent 76%);
  box-shadow:0 0 60px rgba(143,212,255,.25);transform:scale(.45);transition-property:transform;transition-timing-function:ease-in-out}
html.light .orb{background:radial-gradient(circle at 50% 45%,rgba(29,90,134,.35),rgba(120,140,240,.25) 55%,rgba(79,209,170,.12) 75%,transparent 76%);box-shadow:none}
.word{position:relative;font-family:var(--serif);font-size:42px;margin:0;font-weight:600}
.pacer .count{position:relative;font-size:22px;margin:0;color:var(--soft);min-height:1.4em}
.bar-track{height:6px;border-radius:6px;background:var(--card2);overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--green)}
.go{background:var(--green)!important;color:var(--on-stone)!important;border-color:var(--green)!important;font-weight:600;font-size:19px!important;padding:10px 34px!important}
.pacer .opts button{font-size:15px}
.left{margin:0;color:var(--soft);font-size:15px;min-height:1.4em}
html.calm .orb{display:none}
html.calm .stage{height:200px}
@media (max-width:560px){.stage{height:270px}.orb{width:250px;height:250px}}
.breath .labels{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.breath .labels{grid-template-columns:1fr 1fr}}

/* what do I need */
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:0 0 18px}
.states button{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;min-height:84px}
.states button:hover{background:var(--card2)}
.states button.on{background:var(--cyan);color:var(--on-stone);border-color:var(--cyan)}
.states b{display:block;font-family:var(--serif);font-size:22px;font-weight:600}
.states small{display:block;font-size:14px;opacity:.85}
.now .len{margin-bottom:22px}
.answer{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;margin-top:8px}
.answer .kind{text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:600;color:var(--green)}
html.light .answer .kind{color:#0d6a4e}
.answer h2{margin:6px 0 6px;font-size:34px}
.answer p{color:var(--soft);margin:0 0 14px}
.answer .start{color:var(--ink);font-family:var(--serif);font-size:21px}
.answer .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.answer .again{background:none;border:1px solid var(--line);border-radius:14px;padding:12px 20px;min-height:52px;cursor:pointer}

/* timer */
.clock{font-family:var(--serif);font-size:clamp(80px,16vw,140px);text-align:center;font-variant-numeric:tabular-nums;margin:10px 0 18px;line-height:1}
.timer .row{justify-content:center;margin-bottom:14px}
.timer .row .chips-l{min-width:0;flex-basis:100%;text-align:center}
.timer.running .len,.timer.running .row[aria-label]{opacity:.35;pointer-events:none}

/* help */
.help{display:grid;gap:12px}
.help div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 20px}
.help b{font-family:var(--serif);font-size:21px}
.help p{margin:4px 0 0}

/* practice mode overlay */
.pm{position:fixed;inset:0;z-index:50;background:var(--bg);display:none;flex-direction:column;padding:18px 20px calc(20px + env(safe-area-inset-bottom))}
.pm.on{display:flex}
.pm-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pm-top .n{color:var(--soft);font-size:16px}
.pm-top button{min-height:48px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:15px}
.pm-top button[aria-pressed="true"]{background:var(--cyan);color:var(--on-stone)}
.pm-nav button{min-height:52px;padding:10px 18px;border-radius:14px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:17px}
.pm-body{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:820px;margin:0 auto;width:100%}
.pm-text{font-family:var(--serif);font-size:clamp(30px,5vw,46px);line-height:1.3;margin:0 0 20px}
.pm-stay{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pm-stay .t{font-family:var(--serif);font-size:44px;font-variant-numeric:tabular-nums}
.pm-nav{display:flex;justify-content:space-between;gap:10px;max-width:820px;margin:0 auto;width:100%}
.pm-nav .fwd{background:var(--cyan);color:var(--on-stone);border-color:var(--cyan);font-weight:600;flex:1}
.pm-auto{color:var(--soft);font-size:15px;display:flex;gap:8px;align-items:center}

/* comfort panel */
.comfort{position:fixed;z-index:60;right:16px;top:76px;width:min(92vw,360px);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.4);display:none}
.comfort.on{display:block}
.comfort h2{margin:0 0 10px;font-size:22px}
.comfort .row{margin:0 0 12px}
.comfort .chips-l{min-width:0;flex-basis:100%}
.comfort .done{width:100%}

/* stillness: nothing moves */
html.calm *{transition:none!important;animation:none!important;scroll-behavior:auto!important}

@media print{.bar,.foot,.aa,.go-row,.pacer{display:none}body{background:#fff;color:#000}}

/* the Mandala */
.hero-btn{margin:0 0 22px;display:inline-block}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.forms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:12px 0 28px}
.form{display:block;background:#05070d;border:1px solid var(--line);border-radius:16px;overflow:hidden;color:#f4f8ff;text-decoration:none;padding-bottom:12px}
.form img{display:block;width:100%;height:auto;aspect-ratio:1}
.form b{display:block;font-family:var(--serif);font-size:20px;padding:8px 14px 0}
.form span{display:block;font-size:14px;color:#c3d2ef;padding:0 14px}
.form:hover{border-color:var(--cyan)}
.hero-card{display:flex;gap:18px;align-items:center}
.hero-card img{width:120px;height:120px;border-radius:12px;flex:0 0 auto;background:#05070d}
.hero-card .t{display:block}
@media (max-width:520px){.hero-card img{width:84px;height:84px}}

/* breathing together now */
.live{display:flex;align-items:center;gap:12px;margin:0 0 20px;color:var(--ink);text-decoration:none;font-size:18px;width:fit-content;padding:8px 16px 8px 10px;border:1px solid var(--line);border-radius:99px;background:rgba(87,224,184,.07)}
.live b{color:var(--green);font-weight:600;white-space:nowrap}
html.light .live b{color:#0d6a4e}
.live .dot{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,var(--green) 0 35%,rgba(87,224,184,.25) 60%,transparent 70%);transform:scale(.5);flex:0 0 auto}
.live:hover{border-color:var(--green)}