/* mantra.css — Acult Mantra Counter (Digital Mala).
   Acult's "nova" design tokens (the same values as nova-app.css), so the
   page sits with the app in light and dark: Unbounded for display, Manrope
   for text, Noto Sans Devanagari for Hindi; crimson in dark, indigo in light. */

html.nova {
  --bg:#F3F2FA; --surface:#FFFFFF; --surface-2:#F7F6FC; --surface-3:#EEECF8;
  --ink:#16183A; --ink-body:#393C62; --muted:#686C95;
  --brand:#D72E47; --brand-deep:#B81F3C; --gold:#B87400; --gold-soft:rgba(244,184,96,.18);
  --brand-soft:rgba(215,46,71,.10); --sel:#1B1F4B; --on-sel:#fff; --ok:#1E9A6B;
  --line:rgba(22,24,58,.10); --line-strong:rgba(22,24,58,.20);
  --sh-2:0 4px 12px -4px rgba(22,24,58,.08),0 16px 36px -18px rgba(22,24,58,.18);
  --sh-3:0 12px 36px -12px rgba(22,24,58,.22),0 28px 60px -30px rgba(22,24,58,.25);
  --bead:#D9D6EA; --bead-on:#C9851A; --bead-glow:rgba(201,133,26,.55);
  --font-display:'Unbounded','Noto Sans Devanagari',sans-serif;
  --font-body:'Manrope','Noto Sans Devanagari',system-ui,sans-serif;
  --font-deva:'Noto Sans Devanagari','Manrope',sans-serif;
  color-scheme:light;
}
html.nova[data-theme="dark"] {
  --bg:#0A0E28; --surface:#141A3F; --surface-2:#1B2250; --surface-3:#232B62;
  --ink:#EEF0FF; --ink-body:#C9CDEE; --muted:#A0A8D2;
  --brand:#EF3D57; --brand-deep:#D42A48; --gold:#F4B860; --gold-soft:rgba(244,184,96,.16);
  --brand-soft:rgba(239,61,87,.16); --sel:#EF3D57; --ok:#4FD8C4;
  --line:rgba(160,170,235,.14); --line-strong:rgba(160,170,235,.26);
  --sh-2:0 14px 34px -18px rgba(0,0,0,.7); --sh-3:0 24px 60px -24px rgba(0,0,0,.8);
  --bead:#2C3570; --bead-on:#F4B860; --bead-glow:rgba(244,184,96,.65);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink-body);font:500 15px/1.5 var(--font-body);-webkit-font-smoothing:antialiased;
  min-height:100vh;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
html.nova[data-theme="dark"] body{background-image:
  radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 78% 62%,rgba(255,255,255,.4),transparent 60%),
  radial-gradient(1px 1px at 46% 88%,rgba(255,255,255,.35),transparent 60%),
  radial-gradient(900px 520px at 90% -10%,rgba(239,61,87,.14),transparent 62%),radial-gradient(800px 600px at 0% 110%,rgba(157,140,255,.13),transparent 62%);
  background-attachment:fixed}
button{font:inherit;color:inherit}
.mc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none !important}

.mc{max-width:1180px;margin:0 auto;padding:10px 16px 40px}
/* ---- top bar ---- */
.mc-top{display:flex;align-items:center;gap:12px;padding:6px 0 14px}
.mc-title{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
.mc-title h1{margin:0;font:600 19px/1.2 var(--font-display);color:var(--ink);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-logo{height:20px;width:auto;display:block}
html.nova[data-theme="dark"] .mc-logo.l, html.nova:not([data-theme="dark"]) .mc-logo.d{display:none}
.mc-iconbtn{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:13px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.mc-iconbtn:hover{border-color:var(--brand)}
.mc-iconbtn:focus-visible,.mc-btn:focus-visible,.mc-chip:focus-visible,.mc-ring:focus-visible,.mc-tap:focus-visible,.mc-seg button:focus-visible,.mc-targets button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- layout: phone stacks; desktop puts the camera beside the mala ---- */
.mc-main{display:grid;gap:18px;grid-template-columns:1fr;grid-template-areas:"stage" "count" "history"}
.mc-stage{grid-area:stage;min-width:0}
.mc-count{grid-area:count;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.mc-history{grid-area:history;min-width:0}
@media (min-width:900px){
  .mc{padding:18px 28px 48px}
  .mc-main{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-areas:"stage count" "history count";align-items:start;gap:26px 34px}
  .mc-count{position:sticky;top:18px;padding:22px 20px 18px;border-radius:26px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-2)}
  .mc-title h1{font-size:22px}
  .mc-logo{height:22px}
}

/* ---- camera ---- */
.mc-cam{position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--line);background:#05071A;aspect-ratio:4/3;
  max-height:44vh;width:100%;margin:0 auto;box-shadow:var(--sh-2);isolation:isolate}
@media (min-width:900px){.mc-cam{max-height:none}}
@media (max-width:899px) and (orientation:landscape){.mc-cam{max-height:62vh}}
.mc-cam video,.mc-cam canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.mc-cam video{opacity:0;transition:opacity .4s}
.mc-cam[data-state="on"] video{opacity:1}
.mc-cam canvas{pointer-events:none}
.mc-cam::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:box-shadow .25s;box-shadow:inset 0 0 0 0 transparent}
.mc-cam.flash::after{box-shadow:inset 0 0 0 4px var(--bead-on),inset 0 0 60px rgba(244,184,96,.35)}
.mc-camoff{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px;text-align:center;
  color:#EEF0FF;background:radial-gradient(600px 300px at 50% 0%,rgba(239,61,87,.18),transparent 70%),radial-gradient(500px 300px at 50% 120%,rgba(157,140,255,.18),transparent 70%),#0B0F2E}
.mc-cam[data-state="on"] .mc-camoff{display:none}
.mc-camoff-ico{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;color:#F4B860;background:rgba(244,184,96,.12);border:1px solid rgba(244,184,96,.3);margin-bottom:4px}
.mc-camoff-t{margin:0;font:600 17px var(--font-display);letter-spacing:-.01em}
.mc-camoff-s{margin:0;max-width:340px;font-size:13.5px;color:#C9CDEE}
.mc-camoff-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.mc-cam[data-state="loading"] .mc-camoff-acts{opacity:.6;pointer-events:none}
.mc-status{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);
  padding:8px 14px;border-radius:999px;font:700 13.5px/1.25 var(--font-body);color:#fff;background:rgba(8,10,30,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);white-space:nowrap;z-index:3}
.mc-status span{overflow:hidden;text-overflow:ellipsis}
.mc-status i{width:9px;height:9px;border-radius:50%;flex:none;background:#8F94BD}
.mc-status[data-tone="good"] i{background:#3FD1A0;box-shadow:0 0 10px #3FD1A0}
.mc-status[data-tone="warn"] i{background:#F4B860;box-shadow:0 0 10px #F4B860}
.mc-status[data-tone="bad"] i{background:#F2667D}
.mc-cam[data-state="off"] .mc-status{display:none}
.mc-camtools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}

/* ---- +1 ---- */
.mc-plus{position:absolute;pointer-events:none;font:700 22px var(--font-display);color:var(--bead-on);opacity:0;z-index:4;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.mc-cam .mc-plus{top:16px;right:18px}
.mc-ring .mc-plus{top:22%;left:50%;transform:translateX(-50%)}
.mc-plus.go{animation:plus .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes plus{0%{opacity:0;transform:translate(var(--px,0),8px) scale(.8)}20%{opacity:1;transform:translate(var(--px,0),0) scale(1.05)}100%{opacity:0;transform:translate(var(--px,0),-26px) scale(1)}}
.mc-ring .mc-plus{--px:-50%}

/* ---- segmented control and chips ---- */
.mc-seg{display:inline-flex;padding:3px;gap:2px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface)}
.mc-seg button{border:0;background:none;cursor:pointer;padding:7px 13px;border-radius:999px;font:700 13px var(--font-body);color:var(--ink-body);white-space:nowrap}
.mc-seg button[aria-checked="true"]{background:var(--sel);color:var(--on-sel);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mc-seg.wide{display:flex;flex-wrap:wrap;width:100%;border-radius:16px}
.mc-seg.wide button{flex:1 1 auto;border-radius:12px;padding:10px 12px}
.mc-chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:700 13px var(--font-body)}
.mc-chip:hover{border-color:var(--brand)}

/* ---- the mantra and the mala ---- */
.mc-mantra{display:flex;align-items:center;gap:10px;max-width:100%;padding:10px 16px;border-radius:16px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.05);color:var(--ink)}
.mc-mantra:hover{border-color:var(--brand)}
.mc-mantra-k{font:700 11.5px var(--font-body);color:var(--muted);letter-spacing:.02em}
.mc-mantra b{font:600 17px/1.3 var(--font-deva);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mc-mantra svg{flex:none;color:var(--muted)}
.mc-ringwrap{width:min(340px,82vw);aspect-ratio:1;position:relative}
@media (max-width:899px){.mc-ringwrap{width:min(300px,76vw)}}
@media (max-width:899px) and (max-height:720px){.mc-ringwrap{width:min(250px,64vw)}}
.mc-ring{position:absolute;inset:0;border-radius:50%;border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.mc-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mc-ring:active .mc-num b{transform:scale(.97)}
.mc-ring-mid{position:absolute;inset:16%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:radial-gradient(circle at 50% 38%,var(--surface-2),var(--surface) 70%);box-shadow:inset 0 0 0 1px var(--line),var(--sh-2)}
.mc-num{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.mc-num b{font:600 clamp(46px,13vw,68px)/1 var(--font-display);color:var(--ink);letter-spacing:-.04em;transition:transform .12s}
.mc-num em{font:600 15px var(--font-display);font-style:normal;color:var(--muted)}
.mc-num b.bump{animation:bump .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
.mc-ring-m{max-width:78%;font:600 14px/1.3 var(--font-deva);color:var(--ink-body);text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mc-ring-x{font:800 11.5px var(--font-body);padding:2px 9px;border-radius:999px;color:#2A1A00;background:var(--bead-on)}
/* beads */
.mc-bead{fill:var(--bead);transition:fill .25s,r .25s}
.mc-bead.on{fill:var(--bead-on)}
.mc-bead.now{fill:var(--bead-on);filter:drop-shadow(0 0 5px var(--bead-glow))}
.mc-sumeru{fill:var(--brand)}
.mc-arc-bg{fill:none;stroke:var(--bead);stroke-width:10}
.mc-arc{fill:none;stroke:var(--bead-on);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .35s}

.mc-tap{display:flex;align-items:center;justify-content:center;gap:8px;width:min(340px,100%);height:52px;border-radius:16px;border:0;cursor:pointer;
  color:#fff;font:800 15px var(--font-body);letter-spacing:.01em;background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  box-shadow:0 12px 28px -12px rgba(239,61,87,.75);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mc-tap:active{transform:scale(.985)}
.mc-targets{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.mc-lbl{font:700 12px var(--font-body);color:var(--muted);margin-right:4px}
.mc-targets button{min-width:48px;height:36px;padding:0 12px;border-radius:11px;cursor:pointer;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font:800 13.5px var(--font-body);font-variant-numeric:tabular-nums}
.mc-targets button[aria-checked="true"]{background:var(--sel);color:var(--on-sel);border-color:transparent}
.mc-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mc-time{margin:0;font:600 12.5px var(--font-body);color:var(--muted);min-height:1.2em;text-align:center}

/* ---- history ---- */
.mc-hhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:6px 2px 10px}
.mc-hhead h2{margin:0;font:600 17px var(--font-display);color:var(--ink);letter-spacing:-.01em}
.mc-hhead span{font:700 12.5px var(--font-body);color:var(--muted)}
.mc-day{margin-bottom:14px;border-radius:18px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.mc-day h3{display:flex;justify-content:space-between;margin:0;padding:11px 16px;font:700 12.5px var(--font-body);color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line)}
.mc-hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:11px 16px;border-top:1px solid var(--line)}
.mc-hrow:first-of-type{border-top:0}
.mc-hrow b{font:600 15px/1.35 var(--font-deva);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-hrow strong{font:600 16px var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.mc-hrow small{font-size:12px;color:var(--muted)}
.mc-hrow small:last-child{text-align:right}
.mc-empty{padding:18px;border-radius:18px;border:1px dashed var(--line-strong);color:var(--muted);font-size:13.5px;text-align:center}

/* ---- dialogs ---- */
.mc-scrim{position:fixed;inset:0;z-index:40;background:rgba(5,7,22,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mc-dlg{position:fixed;z-index:41;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 28px));max-height:calc(100vh - 40px);overflow:auto;
  padding:24px 22px 20px;border-radius:24px;background:var(--surface);color:var(--ink-body);border:1px solid var(--line-strong);box-shadow:var(--sh-3);
  animation:dlg .22s cubic-bezier(.22,1,.36,1)}
@keyframes dlg{from{opacity:0;transform:translate(-50%,-46%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%)}}
.mc-dlg h2{margin:0 0 8px;font:600 20px/1.25 var(--font-display);color:var(--ink);letter-spacing:-.015em}
.mc-dlg h3{margin:18px 0 8px;font:700 12.5px var(--font-body);color:var(--muted);letter-spacing:.02em}
.mc-dlg p{margin:0 0 10px}
.mc-fine{font-size:12.5px;color:var(--muted)}
.mc-dlg-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.mc-dlg-acts.col{flex-direction:column;align-items:stretch}
.mc-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;border-radius:14px;cursor:pointer;
  font:800 14.5px var(--font-body);border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink)}
.mc-btn.pri{border:0;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-deep));box-shadow:0 10px 24px -12px rgba(239,61,87,.7)}
.mc-btn.ghost{background:transparent}
.mc-btn.warn{background:linear-gradient(135deg,#E0465E,#B81F3C)}
.mc-camoff .mc-btn.ghost{color:#EEF0FF;border-color:rgba(255,255,255,.25)}
@media (max-width:640px){
  .mc-sheet{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:86vh;border-radius:24px 24px 0 0;
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));animation:sheet .26s cubic-bezier(.22,1,.36,1)}
  @keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}
.mc-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.mc-sheet-h h2{margin:0}
.mc-field{display:flex;flex-direction:column;gap:6px;margin:10px 0;font:700 12.5px var(--font-body);color:var(--muted)}
.mc-field textarea,.mc-field input{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface-2);
  color:var(--ink);font:600 16px/1.4 var(--font-deva);resize:vertical}
.mc-field textarea:focus,.mc-field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.mc-list{display:flex;flex-direction:column;gap:6px}
.mc-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:10px 13px;border-radius:13px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2)}
.mc-pick:hover,.mc-pick.cur{border-color:var(--brand)}
.mc-pick b{font:600 15px/1.35 var(--font-deva);color:var(--ink)}
.mc-pick small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mc-intro{text-align:center}
.mc-intro-art{font-size:46px;line-height:1;width:84px;height:84px;margin:4px auto 10px;display:grid;place-items:center;border-radius:26px;
  background:radial-gradient(circle at 50% 35%,var(--gold-soft),transparent 70%),var(--surface-2);border:1px solid var(--line)}
.mc-steps{text-align:left;margin:14px auto 8px;padding:0 0 0 4px;max-width:340px;list-style:none;counter-reset:s}
.mc-steps li{counter-increment:s;display:flex;gap:10px;align-items:center;padding:6px 0;font-weight:600;color:var(--ink)}
.mc-steps li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 12px var(--font-body);color:var(--on-sel);background:var(--sel)}
.mc-done{text-align:center;overflow:hidden}
.mc-done-glow{position:absolute;inset:-40% -20% auto;height:80%;background:radial-gradient(circle at 50% 70%,var(--gold-soft),transparent 60%);pointer-events:none}
.mc-done-k{position:relative;margin:4px 0 0 !important;font:600 54px/1 var(--font-display);color:var(--bead-on);letter-spacing:-.04em}
.mc-done h2{position:relative}
.mc-done-m{position:relative;font:600 18px/1.4 var(--font-deva);color:var(--ink)}
.mc-setrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid var(--line);cursor:default}
.mc-setrow b{display:block;font:700 14.5px var(--font-body);color:var(--ink)}
.mc-setrow small{display:block;font-size:12.5px;color:var(--muted)}
.mc-switch{appearance:none;-webkit-appearance:none;flex:none;width:48px;height:28px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;transition:background .2s}
.mc-switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.mc-switch:checked{background:var(--sel)}
.mc-switch:checked::after{transform:translateX(20px)}
.mc-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;padding:11px 18px;border-radius:999px;
  font:700 13.5px var(--font-body);color:var(--on-sel);background:var(--sel);box-shadow:var(--sh-3)}

@media (prefers-reduced-motion:reduce){
  .mc-plus.go,.mc-num b.bump,.mc-dlg,.mc-sheet{animation:none}
  .mc-bead,.mc-arc{transition:none}
}

/* ---- count with: hand | voice ---- */
.mc-source{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.mc-stage[data-src="voice"] .mc-cam,.mc-stage[data-src="voice"] .mc-camtools{display:none}
/* ---- the listening panel ---- */
.mc-voice{position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--line);aspect-ratio:4/3;max-height:44vh;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px 22px 58px;text-align:center;color:#EEF0FF;box-shadow:var(--sh-2);
  background:radial-gradient(520px 260px at 50% 0%,rgba(244,184,96,.16),transparent 70%),radial-gradient(500px 300px at 50% 120%,rgba(157,140,255,.18),transparent 70%),#0B0F2E}
@media (min-width:900px){.mc-voice{max-height:none}}
.mc-vo-ring{--lvl:0;width:96px;height:96px;flex:none;border-radius:50%;display:grid;place-items:center;color:#F4B860;margin-bottom:4px;
  background:radial-gradient(circle,rgba(244,184,96,.22),rgba(244,184,96,.06) 70%);border:1px solid rgba(244,184,96,.35);
  transform:scale(calc(1 + var(--lvl) * .22));box-shadow:0 0 calc(var(--lvl) * 46px) rgba(244,184,96,calc(.15 + var(--lvl) * .55));
  transition:transform .08s linear,box-shadow .08s linear}
.mc-voice[data-state="off"] .mc-vo-ring,.mc-voice[data-state="error"] .mc-vo-ring{--lvl:0 !important}
.mc-voice.flash .mc-vo-ring{background:radial-gradient(circle,rgba(244,184,96,.6),rgba(244,184,96,.15) 70%);color:#fff}
.mc-voice.flash{box-shadow:inset 0 0 0 4px var(--bead-on),var(--sh-2)}
.mc-vo-t{margin:0;font:600 17px var(--font-display);letter-spacing:-.01em}
.mc-vo-s{margin:0;max-width:380px;font-size:13.5px;color:#C9CDEE}
.mc-vo-steps{display:flex;gap:8px;margin:4px 0}
.mc-vo-steps i{width:30px;height:6px;border-radius:6px;background:rgba(255,255,255,.18)}
.mc-vo-steps i.on{background:#F4B860;box-shadow:0 0 10px rgba(244,184,96,.6)}
.mc-vo-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.mc-voice .mc-chip{background:rgba(255,255,255,.08);color:#EEF0FF;border-color:rgba(255,255,255,.22)}
.mc-voice .mc-plus{top:16px;right:18px}
.mc-voice .mc-status{bottom:12px}
@media (prefers-reduced-motion:reduce){.mc-vo-ring{transition:none}}
/* the listening panel sizes to its content (not the camera's 4:3), status in the flow */
.mc-voice{aspect-ratio:auto;max-height:none;min-height:300px;padding:26px 20px 20px}
.mc-voice .mc-status{position:static;transform:none;margin-top:10px;max-width:100%;white-space:normal;text-align:left}
@media (min-width:900px){.mc-voice{min-height:420px}}

/* =====================================================================
   Layout for every screen (phones · tablets · laptops · large monitors)
   ===================================================================== */

/* ---- phones: the counter always fits on the first screen ---- */
@media (max-width:719px){
  .mc{padding:6px 14px 32px}
  .mc-top{padding:4px 0 10px}
  .mc-main{gap:12px}
  .mc-source{margin-bottom:10px}
  .mc-source .mc-lbl{display:none}
  .mc-source .mc-seg{display:flex;width:100%}
  .mc-source .mc-seg button{flex:1;padding:9px 10px}
  /* camera off: a compact card, not an empty 4:3 box */
  .mc-cam[data-state="off"],.mc-cam[data-state="loading"]{aspect-ratio:auto;max-height:none}
  .mc-cam[data-state="off"] .mc-camoff,.mc-cam[data-state="loading"] .mc-camoff{position:relative;inset:auto;display:grid;
    grid-template-columns:auto 1fr;grid-template-areas:"ico t" "ico s" "acts acts";column-gap:14px;row-gap:2px;align-items:center;text-align:left;padding:16px}
  .mc-camoff-ico{grid-area:ico;width:52px;height:52px;border-radius:16px;margin:0}
  .mc-camoff-ico svg{width:30px;height:30px}
  .mc-camoff-t{grid-area:t;font-size:15.5px}
  .mc-camoff-s{grid-area:s;font-size:12.5px;line-height:1.4}
  .mc-camoff-acts{grid-area:acts;margin-top:12px;justify-content:stretch}
  .mc-camoff-acts .mc-btn{flex:1;height:44px}
  /* camera on: shorter, so the mala stays in view */
  .mc-cam[data-state="on"]{max-height:32vh;max-height:32svh}
  .mc-camtools{margin-top:8px}
  /* the voice panel: compact too */
  .mc-voice{min-height:0;padding:16px;gap:4px}
  .mc-vo-ring{width:64px;height:64px}
  .mc-vo-ring svg{width:28px;height:28px}
  .mc-vo-t{font-size:15.5px}
  .mc-vo-s{font-size:12.5px;line-height:1.4}
  .mc-vo-acts{margin-top:6px}
  .mc-vo-acts .mc-btn{height:44px}
  .mc-voice .mc-status{margin-top:6px}
  /* the mala takes the room that is left */
  .mc-count{gap:10px}
  .mc-mantra{padding:8px 14px}
  .mc-ringwrap{width:clamp(210px,min(78vw,calc(100svh - 500px)),330px)}
  html[data-cam="on"] .mc-ringwrap,html[data-voice="counting"] .mc-ringwrap,html[data-voice="setup"] .mc-ringwrap{width:clamp(200px,min(70vw,calc(100svh - 590px)),300px)}
  .mc-tap{height:50px;width:100%}
}
/* very narrow phones: the logo makes way for the title */
@media (max-width:419px){
  .mc-logo{display:none}
  .mc-title h1{font-size:18px}
}

/* ---- tablets upright and up: camera / voice beside the mala ---- */
@media (min-width:720px){
  .mc{padding:16px 24px 40px}
  .mc-main{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-areas:"stage count" "history count";align-items:start;gap:22px 26px}
  .mc-count{position:sticky;top:16px;padding:22px 18px 18px;border-radius:26px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-2);
    min-height:calc(100vh - 110px);min-height:calc(100svh - 110px);justify-content:center}
  .mc-cam,.mc-voice{max-height:none}
  .mc-voice{min-height:360px}
  .mc-ringwrap{width:clamp(260px,min(36vw,calc(100vh - 360px)),520px)}
  .mc-num b{font-size:clamp(52px,6.2vw,92px)}
  .mc-num em{font-size:clamp(15px,1.4vw,20px)}
  .mc-ring-m{font-size:clamp(14px,1.3vw,18px)}
  .mc-tap{width:min(380px,100%)}
}
/* tablets upright: a little tighter */
@media (min-width:720px) and (max-width:1023px){
  .mc-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mc-ringwrap{width:clamp(250px,min(40vw,calc(100vh - 380px)),400px)}
  .mc-camtools{flex-direction:column;align-items:stretch}
  .mc-camtools .mc-seg{justify-content:center}
}
/* laptops and monitors: the mala is the hero */
@media (min-width:1024px){
  .mc-ringwrap{width:clamp(300px,min(32vw,calc(100vh - 340px)),520px)}
}
@media (min-width:1500px){
  .mc{max-width:1440px;padding:24px 40px 48px}
  .mc-title h1{font-size:24px}
  .mc-logo{height:26px}
  .mc-main{gap:28px 40px}
}
/* short, wide screens (laptops at 768 px tall, tablets sideways) */
@media (min-width:720px) and (max-height:820px){
  .mc-count{padding-top:16px;padding-bottom:14px;gap:10px}
}
/* two columns: the left column's rows keep their own height (the tall mala panel must not stretch them) */
@media (min-width:720px){ .mc-main{grid-template-rows:auto 1fr} .mc-history{align-self:start} }
/* phones, camera running: one row of tools, the status may wrap, a touch more room for the mala */
@media (max-width:719px){
  .mc-camtools{flex-wrap:nowrap;gap:8px;margin-top:8px}
  .mc-camtools .mc-chip{flex:none;padding:0 12px;height:36px}
  .mc-camtools .mc-seg{flex:1;min-width:0}
  .mc-camtools .mc-seg button{flex:1;padding:7px 8px;font-size:12.5px}
  .mc-status{white-space:normal;text-align:center;border-radius:16px;line-height:1.3;width:max-content;max-width:calc(100% - 20px);bottom:10px}
  .mc-cam[data-state="on"]{max-height:30vh;max-height:30svh}
  html[data-cam="on"] .mc-ringwrap{width:clamp(190px,min(68vw,calc(100svh - 610px)),290px)}
}
/* phones held sideways (short and wide): everything fits the height */
@media (min-width:600px) and (max-height:520px){
  .mc{padding:6px 16px 20px}
  .mc-top{padding:2px 0 6px}
  .mc-iconbtn{width:36px;height:36px;border-radius:11px}
  .mc-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"stage count" "history count";grid-template-rows:auto 1fr;gap:12px 16px}
  .mc-source{margin-bottom:8px}
  .mc-cam{max-height:calc(100vh - 150px);max-height:calc(100svh - 150px)}
  .mc-cam[data-state="off"],.mc-cam[data-state="loading"]{aspect-ratio:auto}
  .mc-cam[data-state="off"] .mc-camoff,.mc-cam[data-state="loading"] .mc-camoff{position:relative;padding:14px}
  .mc-voice{min-height:0;padding:14px}
  .mc-vo-ring{width:56px;height:56px}
  .mc-count{position:sticky;top:6px;min-height:0;padding:10px 12px;gap:6px;justify-content:flex-start}
  .mc-mantra{padding:6px 12px}
  .mc-mantra b{font-size:15px}
  .mc-ringwrap{width:clamp(150px,calc(100vh - 190px),240px);width:clamp(150px,calc(100svh - 190px),240px)}
  .mc-num b{font-size:40px}
  .mc-ring-m{font-size:12.5px}
  .mc-tap{height:42px;width:100%}
  .mc-targets button{height:32px;min-width:42px}
  .mc-acts .mc-chip{height:32px}
  .mc-camtools{flex-direction:row;flex-wrap:nowrap;margin-top:8px}
  .mc-camtools .mc-seg{flex:1}
  .mc-camtools .mc-seg button{flex:1;padding:6px 8px}
}
@media (min-width:600px) and (max-height:520px){
  .mc-status{white-space:normal;text-align:center;border-radius:16px;line-height:1.3;width:max-content;max-width:calc(100% - 20px)}
}
@media (max-width:719px){ .mc-setrow{flex-wrap:wrap} .mc-setrow > .mc-chip{margin-left:auto} }

/* ---- the end of a round: a clear choice ---- */
.mc-done-ask{margin:14px 0 8px;font:700 14px var(--font-body,'Manrope',sans-serif);color:var(--ink)}
.mc-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 6px}
.mc-choice-b{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px 14px;border-radius:20px;cursor:pointer;text-align:center;
  border:1.5px solid var(--line-strong);background:var(--surface-2);color:var(--ink);transition:transform .12s ease,border-color .12s ease}
.mc-choice-b .ic{font-size:30px;line-height:1.1}
.mc-choice-b b{font:700 15px/1.25 var(--font-body,'Manrope',sans-serif)}
.mc-choice-b small{font:600 12.5px var(--font-body,'Manrope',sans-serif);color:var(--muted)}
.mc-choice-b.go{border-color:color-mix(in srgb,var(--gold,#F4B860) 70%,transparent);background:color-mix(in srgb,var(--gold,#F4B860) 14%,var(--surface-2))}
.mc-choice-b:hover{transform:translateY(-1px)}
.mc-choice-b.heard{animation:heard .5s ease}
@keyframes heard{40%{transform:scale(1.04);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold,#F4B860) 45%,transparent)}}
.mc-hear{min-height:20px;margin:6px 0 2px;font:600 13px var(--font-body,'Manrope',sans-serif);color:var(--muted);text-align:center}
.mc-hear[data-tone="ok"]::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--ok,#2BB673);animation:pulse 1.6s ease-in-out infinite;vertical-align:1px}
.mc-hear[data-tone="warn"]{color:var(--warn,#C98500)}
@keyframes pulse{50%{opacity:.35}}
@media (max-width:359px){.mc-choice{grid-template-columns:1fr}}
/* undo, after starting again */
.mc-undo{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:14px;
  padding:10px 10px 10px 18px;border-radius:999px;background:var(--sel,#1B1F4B);color:var(--on-sel,#fff);box-shadow:0 18px 40px -18px rgba(0,0,0,.6);font:700 13.5px var(--font-body,'Manrope',sans-serif)}
.mc-undo button{border:0;border-radius:999px;padding:8px 14px;cursor:pointer;font:800 13px var(--font-body,'Manrope',sans-serif);background:rgba(255,255,255,.16);color:inherit}
/* teaching */
.mc-teach-dots{display:flex;justify-content:center;gap:10px;margin:16px 0 8px}
.mc-teach-dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-strong);transition:background .2s ease,border-color .2s ease}
.mc-teach-dots i.on{background:var(--gold,#F4B860);border-color:var(--gold,#F4B860)}
@media (prefers-reduced-motion:reduce){.mc-choice-b.heard,.mc-hear[data-tone="ok"]::before{animation:none}}
.mc-done .mc-dlg-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mc-done .mc-dlg-acts .mc-btn{width:100%}

/* the pinch meter: the fingers' closeness, and the line where a count happens */
.mc-meter{position:absolute;left:12px;right:12px;top:12px;z-index:3;display:flex;flex-direction:column;gap:5px;pointer-events:none}
.mc-meter-lbl{align-self:flex-start;padding:3px 9px;border-radius:999px;background:rgba(10,14,40,.62);color:#fff;font:700 11.5px var(--font-body,'Manrope',sans-serif)}
.mc-meter-bar{position:relative;height:10px;border-radius:999px;background:rgba(10,14,40,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);overflow:hidden}
.mc-meter-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,#9db4ff,#F4B860);transition:width .06s linear}
.mc-meter-bar b{position:absolute;top:-3px;bottom:-3px;width:3px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.mc-meter.rearm .mc-meter-bar b{background:#7ee0b0}
.mc-meter.hit .mc-meter-bar i{background:#F4B860;box-shadow:0 0 12px #F4B860}