/* Kru Ink · design system v2 — the shared block of specs/2026-10-18-solo-workout-app/mockups/*.html (round 2), ported
   from the 360×800 mockup frames to the real viewport. Components read only the semantic surface vars that ONE surface
   class sets per region: .paper (pre-workout screens) or a workout phase field (.ph-work .ph-rest .ph-reps .ph-glove
   .ph-pause). Screen rules: screens.css (Setup, Vorschau, Check, Geschafft, Einstellungen) and workout.css (workout,
   pause overlay, recovery).
   - CSP: no style attributes. Dynamic values arrive as CSSOM custom properties set by ui/: --p (progress 0–100),
     --tick, --v, --dial, --next.
   - Motion: transform/opacity only, no luminance change faster than 1 Hz; under prefers-reduced-motion decoration stops
     while pacing indicators keep stepping (ui/ sets --p once per second; nothing here tweens it).
   - Targets: 64 px (--tap) with 12 px gaps (wraps on); START 96 px (--start). */

/* 1 · TOKENS */
:root{
  color-scheme:light;
  --paper:#f3efe6; --paper-2:#e9e1d3; --rule:#dad0bf; --line:#857c6f;
  --ink:#1b1a17; --ink-2:#4a443c; --ink-3:#6b6358;
  --verm:#b8241c; --verm-2:#9a1b14; --on-verm:#fff8ee;
  --ok:#1d6a4e; --warn:#e3a83e; --crit:#a01d16; --sun:#f2c14e; --mint:#74c7a7;
  --work:#1d1c1a; --work-hi:#282623; --rest:#123f36; --rest-hi:#164a3e;
  --reps:#e3a83e; --reps-hi:#ecb956; --glove:#9dbdf0; --glove-hi:#b3ccf4; --pause:#3b3935; --pause-hi:#403e3a;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  --serif:"Noto Serif","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"DejaVu Serif",serif;
  --mono:ui-monospace,"DejaVu Sans Mono","Noto Sans Mono","Liberation Mono",Menlo,Consolas,monospace;
  --tap:64px; --start:96px; --gap:12px; --pad:24px;
  --brush:polygon(1.5% 14%,4% 6%,9% 3.5%,16% 5%,24% 2.5%,33% 4.5%,42% 2%,51% 4%,60% 2.5%,69% 5%,78% 3%,87% 4.5%,94% 2.5%,98% 7%,
    99.4% 22%,98.8% 40%,100% 58%,99% 78%,97.5% 92%,92% 97%,84% 95.5%,75% 98%,66% 96%,57% 98.5%,48% 96%,39% 98%,30% 95.5%,
    21% 98%,12% 96.5%,5% 97.5%,1.8% 90%,.4% 74%,1% 55%,0 36%);
  --pill:polygon(15.6% 1.5%,25.4% 1%,35.3% 2.5%,45.1% .7%,54.9% 2.1%,64.7% 1.6%,74.6% .7%,84.4% 2%,91.1% 5%,96.3% 19.5%,
    99.6% 38.9%,99.5% 61.1%,96.3% 80.5%,90.9% 93.2%,84.4% 99.1%,74.6% 98.8%,64.7% 97.6%,54.9% 96.6%,45.1% 97.8%,35.3% 98.3%,
    25.4% 96.6%,15.6% 99.4%,9.1% 93.1%,3.6% 80.7%,.5% 61%,.5% 38.9%,3.6% 19.3%,9.1% 6.8%);
  --taper:polygon(0 42%,.8% 20%,2.6% 8%,6% 2%,22% 4%,40% 3%,58% 7%,72% 14%,84% 24%,93% 32%,100% 40%,100% 52%,93% 60%,
    84% 68%,72% 78%,58% 88%,40% 95%,22% 97%,6% 98%,2.6% 92%,.8% 80%,0 60%);
}

/* 2 · SURFACES — text pairs measured ≥ 7:1 against --bg and --bg-hi in every phase (tests/unit/style.test.js) */
:root,.paper{--bg:var(--paper);--bg-hi:var(--paper);--fg:var(--ink);--fg-2:var(--ink-2);--accent:var(--verm);--accent-2:var(--verm-2);
  --track:rgba(27,26,23,.14);--fig:var(--ink);--strike:var(--verm);--alert:var(--verm);--knock:var(--bg)}
.ph-work{--bg:var(--work);--bg-hi:var(--work-hi);--fg:#f3efe6;--fg-2:#bdb3a5;--accent:#e0483e;--accent-2:#a8221b;--track:rgba(243,239,230,.16);
  --fig:#f3efe6;--strike:#e0483e;--alert:#ff7b6e;--knock:var(--work)}
.ph-rest{--bg:var(--rest);--bg-hi:var(--rest-hi);--fg:#fffbf2;--fg-2:#c3e0d4;--accent:var(--mint);--accent-2:#4f9c80;--track:rgba(116,199,167,.2);
  --fig:#f3efe6;--strike:#f25f50;--alert:#ff8a7d;--knock:var(--rest)}
.ph-reps{--bg:var(--reps);--bg-hi:var(--reps-hi);--fg:var(--ink);--fg-2:#2e2410;--accent:var(--ink);--accent-2:#000;--track:rgba(27,26,23,.28);
  --fig:var(--ink);--strike:#a3201a;--alert:#8f1a13;--knock:var(--reps)}
.ph-glove{--bg:var(--glove);--bg-hi:var(--glove-hi);--fg:var(--ink);--fg-2:#1b2840;--accent:var(--ink);--accent-2:#000;--track:rgba(27,26,23,.2);
  --fig:var(--ink);--strike:#a3201a;--alert:#8f1a13;--knock:var(--glove)}
.ph-pause,.ov{--bg:var(--pause);--bg-hi:var(--pause-hi);--fg:#f3efe6;--fg-2:#d8d1c5;--accent:var(--reps);--accent-2:#b98222;--track:rgba(243,239,230,.16);
  --fig:#f3efe6;--strike:#e0483e;--alert:#ff7b6e;--knock:var(--pause)}

/* 3 · PAGE */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--paper);color:var(--ink);font:16px/1.4 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,p,dl,dd,figure,ol,ul{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--fg);outline-offset:4px}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none} /* focus lands on the screen heading (FND-0039); no ring */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh,.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.screen{position:relative;min-height:100vh;min-height:100dvh;color:var(--fg);background:var(--bg)}

/* 4 · LAYOUT — paper: one column ≤ 430 px with safe-area insets; the foot (primary action) sticks to the bottom */
.pre{position:relative;width:100%;max-width:430px;min-height:100vh;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;
  padding:max(8px,env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-right)) max(24px,calc(env(safe-area-inset-bottom) + 12px))
  max(var(--pad),env(safe-area-inset-left))}
.topbar{height:64px;margin:0 -16px;display:flex;align-items:center;justify-content:space-between;flex:none}
.sec{margin-top:28px;flex:none}
.foot{position:sticky;bottom:0;z-index:3;margin-top:auto;padding:16px 0 4px;display:grid;gap:var(--gap);flex:none;background:var(--bg)}

/* 5 · TYPE — serif only for paper headings; sans for everything else; numbers tabular */
.t-display{margin:0;font:700 50px/1 var(--serif);letter-spacing:-.015em}
.t-title{margin:0;font:700 36px/1.05 var(--serif);letter-spacing:-.015em}
.t-q{margin:0 0 8px;font:700 16px/1.2 var(--sans);color:var(--fg-2)}
.t-body{margin:0;font:500 17px/1.45 var(--sans)}
.t-small{margin:0;font:600 14.5px/1.35 var(--sans);color:var(--fg-2)}
.t-caps{font:800 17px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.t-num{font:800 64px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.t-num small{margin-left:6px;font-size:21px;font-weight:700;letter-spacing:0;color:var(--fg-2)}

/* 6 · BUTTONS — the brushed shape lives on ::before/::after (clip-path), so focus rings are never clipped */
.btn{position:relative;isolation:isolate;min-height:var(--tap);min-width:var(--tap);padding:0 22px;display:inline-flex;align-items:center;
  justify-content:center;gap:12px;font:800 20px/1.1 var(--sans);color:var(--fg);text-align:center;text-decoration:none}
.btn::before,.btn::after{content:"";position:absolute;z-index:-1;inset:0;clip-path:var(--shape,var(--brush))}
.btn::before{background:var(--btn-bg,transparent)}
.btn::after{inset:2.5px;background:var(--btn-fill,transparent)}
.btn svg{width:28px;height:28px;flex:none}
.btn svg.lv{width:24px;height:16px}
.btn:focus-visible,.row:focus-visible,.switch-row:focus-visible{outline:3px solid var(--fg);outline-offset:4px}
.btn-primary{--btn-bg:var(--verm);color:var(--on-verm);min-height:80px;font-size:24px}
.btn-start{--btn-bg:var(--verm);color:var(--on-verm);width:100%;min-height:var(--start);font:900 36px/1 var(--sans);letter-spacing:.08em}
.btn-2{--btn-bg:var(--line);--btn-fill:var(--bg)}
.btn-ink,.btn[aria-pressed=true],.btn[aria-checked=true]{--btn-bg:var(--fg);--btn-fill:transparent;color:var(--bg)}
.btn-danger{--btn-bg:var(--crit);--btn-fill:transparent;color:var(--on-verm)}
.btn-ghost{color:var(--fg-2);font-weight:700}
.btn:disabled,.btn[aria-disabled=true]{--btn-bg:var(--rule);--btn-fill:transparent;color:var(--ink-2);cursor:default}
.btn-wide{width:100%}
.btn-sm{padding:0 18px;font-size:18px}
.btn-sm svg{width:24px;height:24px}
.chips{display:flex;flex-wrap:wrap;gap:var(--gap)}
.chip{padding:0 12px;font-variant-numeric:tabular-nums}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--gap)}
.seg>.btn{min-height:72px;padding:0 6px;flex-direction:column;gap:6px;font-size:18px}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:var(--gap)}
.round{position:relative;width:64px;height:64px;display:grid;place-items:center;flex:none;border:2.6px solid currentColor;
  border-radius:52% 48% 50% 50%/48% 52% 47% 53%}
.round svg{width:28px;height:28px}
.round:focus-visible{outline:3px solid var(--fg);outline-offset:4px}
.switch-row{width:100%;min-height:72px;display:flex;align-items:center;gap:14px;text-align:left;font:700 20px/1.2 var(--sans);
  border-block:1.5px solid var(--rule)}
.switch-row>svg{width:32px;height:32px;flex:none}
.switch{position:relative;margin-left:auto;width:64px;height:38px;border-radius:19px;background:var(--line);flex:none}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;background:var(--paper)}
[aria-checked=true]>.switch{background:var(--ink)}
[aria-checked=true]>.switch::after{transform:translateX(26px)}

/* 7 · LIST ROWS — status badge: ✓ ok (circle) · ! warn (triangle) · ✗ fail (square) · busy (turning ring); each badge
   carries visually hidden text ("in Ordnung", "Hinweis", "Fehler") from ui/ (FND-0041) */
.list{margin:0;padding:0;list-style:none;border-top:1.5px solid var(--rule)}
.row{width:100%;min-height:72px;display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1.5px solid var(--rule);text-align:left}
.row>svg{width:30px;height:30px;flex:none}
.row-t{flex:1;min-width:0}
.row-t b{display:block;font:800 19px/1.2 var(--sans)}
.row-t small{display:block;margin-top:3px;font:600 14.5px/1.35 var(--sans);color:var(--fg-2)}
.st{position:relative;width:34px;height:34px;flex:none;display:grid;place-items:center;font:900 19px/1 var(--sans);border-radius:50%}
.st svg{width:20px;height:20px}
.st-ok{background:var(--ok);color:#fff}
.st-warn{background:var(--warn);color:var(--ink);border-radius:0;clip-path:polygon(50% 3%,100% 95%,0 95%);padding-top:8px;font-size:17px}
.st-fail{background:var(--crit);color:var(--on-verm);border-radius:7px}
.st-busy{border:3.5px solid var(--track);border-top-color:var(--fg);animation:spin 1.1s linear infinite}
.row-bar{display:block;height:5px;margin-top:8px;border-radius:3px;background:var(--track);overflow:hidden}
.row-bar i{display:block;height:100%;background:var(--fg);transform-origin:0 50%;transform:scaleX(calc(var(--p,50) / 100))}

/* 8 · INLINE CONFIRM (destructive; replaces the row's action in place — no modal, no hold gesture) */
.confirm{--bg:var(--paper-2);--fg:var(--ink);--fg-2:var(--ink-2);color:var(--fg);margin-top:var(--gap);padding:16px;display:grid;gap:var(--gap);
  background:var(--bg);border-left:6px solid var(--crit);border-radius:4px 14px 14px 4px}
.confirm p{margin:0;font:800 18px/1.3 var(--sans)}
.confirm p small{display:block;margin-top:4px;font:600 15px/1.35 var(--sans);color:var(--fg-2)}
.confirm .acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.confirm .btn{padding:0 10px;font-size:18px}

/* 9 · BANNERS — mirror the spoken recovery messages: info paper · warn yellow · crit red · recovered mint */
.banner{position:relative;isolation:isolate;width:100%;min-height:64px;padding:12px 18px;display:flex;align-items:center;gap:12px;
  font:800 18px/1.25 var(--sans);text-align:left;color:var(--ink)}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--brush);background:var(--b-bg,var(--paper-2))}
.banner svg{width:30px;height:30px;flex:none}
.banner-warn{--b-bg:var(--sun);--knock:var(--sun)}
.banner-crit{--b-bg:var(--crit);--knock:var(--crit);color:var(--on-verm)}
.banner-ok{--b-bg:var(--mint);--knock:var(--mint)}
.banner-xl{min-height:136px;padding:18px 22px;font-size:28px;line-height:1.1}
.banner-xl svg{width:48px;height:48px}
/* halo only: the text/background pair never changes, so contrast never drops; 0.625 Hz */
.banner.pulse::after{content:"";position:absolute;inset:-8px;z-index:-2;clip-path:var(--brush);background:var(--b-bg);opacity:0;
  animation:pulse 1.6s ease-in-out infinite}

/* 10 · ICON INTERNALS — the sprite in index.html is inline, so these context-free selectors reach the <symbol> parts */
.ki-b{transform-box:fill-box;transform-origin:50% 50%;animation:bar 1.3s ease-in-out infinite}
.ki-b2{animation-delay:-.45s}.ki-b3{animation-delay:-.9s}.ki-b4{animation-delay:-.25s}
.ki-rays{animation:glow 2.8s ease-in-out infinite}

/* 11 · PICTOGRAMS — body = --fig (currentColor), striking limb = --strike: <svg class="picto"><use href="img/pictos.svg#p-ID"/> */
.picto{display:block;width:var(--ps,160px);height:var(--ps,160px);flex:none;overflow:visible;color:var(--fig)}
.stamp{position:relative;isolation:isolate;width:148px;height:148px;display:grid;place-items:center;rotate:-7deg;--fig:var(--paper)}
.stamp::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--verm);clip-path:var(--brush)}
.stamp::after{content:"";position:absolute;inset:12px;border:3px solid var(--paper);border-radius:6px 10px 5px 9px;opacity:.9}
.stamp .picto{--ps:108px}
.stamp.press{animation:press .9s cubic-bezier(.3,.1,.2,1) .15s both}

/* 12 · COMBO PICTOGRAMS — the workout playback is ui/combo-player.js (.cp root · .cp-picto · .cp-label · .cp-tag ·
   .cp-dots > .cp-dot.is-on · .cp-strip > .cp-cell · .is-faded feint). The mockups' CSS flipbook stays for markup that
   uses it: guard → move₁…moveₙ → guard as stacked frames (--i = slot, 8 slots × --step loop for decorative icons;
   .combo.once = ONE pass per call, frames/dots carry --t0 start + --dur, the last guard has .hold and stays);
   static strips (.cstrip) for Vorschau, glove-up and KdT; a playing .combo hides its strip until reduced motion. */
.combo{--step:.6s;--cycle:calc(var(--step) * 8);display:flex;flex-direction:column;align-items:center;gap:10px}
.cstack{position:relative;width:var(--cs,180px);height:var(--cs,180px);flex:none;color:var(--fig)}
.cstack>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;visibility:hidden;
  animation:cf1 var(--cycle) step-end infinite;animation-delay:calc(var(--i,0) * var(--step) - var(--cycle))}
.cstack>.w2{animation-name:cf2}.cstack>.w3{animation-name:cf3}.cstack>.w4{animation-name:cf4}
.cstack>.w5{animation-name:cf5}.cstack>.w6{animation-name:cf6}.cstack>.w7{animation-name:cf7}
.cstack .fake use{opacity:.45}
.csteps{display:flex;justify-content:center;gap:18px;margin:0;padding:0;list-style:none;font:800 13px/1 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-2)}
.csteps li{display:flex;flex-direction:column;align-items:center;gap:7px}
.csteps i{position:relative;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--fg-2)}
.csteps i::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--strike);opacity:0;visibility:hidden;
  animation:cf1 var(--cycle) step-end infinite;animation-delay:calc(var(--i,0) * var(--step) - var(--cycle))}
.combo.once .cstack>svg,.combo.once .csteps i::after{animation:cfonce var(--dur,.6s) step-end var(--t0,0s) 1 none}
.combo.once .cstack>.hold{animation:cfonce 1ms step-end var(--t0,0s) 1 forwards}
.combo:has(.cstack)>.cstrip,.combo.is-static .cstack,.combo.is-static .csteps{display:none}
.combo.is-static>.cstrip{display:flex}
.cstrip{display:flex;justify-content:center;align-items:flex-start;gap:6px;width:100%;margin:0;padding:0;list-style:none}
.cstrip li{flex:1 1 0;min-width:0;max-width:84px;display:flex;flex-direction:column;align-items:center;gap:6px;
  font:800 13px/1.15 var(--sans);color:var(--fg-2);text-align:center}
.cstrip svg{width:100%;height:auto;aspect-ratio:1;color:var(--fig)}
.cstrip .fake svg,.cp-picto.is-faded,.cp-cell.is-faded svg{opacity:.45}
.ctag,.cp-tag{position:absolute;top:0;right:-8px;padding:5px 8px;border-radius:4px;font:800 12px/1 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--bg);background:var(--fg-2)}
.cp{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--fig)}
.cp-picto{display:block;width:var(--cs,180px);height:var(--cs,180px);flex:none;overflow:visible;color:var(--fig)}
.cp-label{min-height:1em;font:800 15px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.cp-dots{display:flex;justify-content:center;gap:18px}
.cp-dot{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--fg-2)}
.cp-dot.is-on{background:var(--strike);box-shadow:none}
.cp-strip{flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:6px;width:100%}
.cp-cell{position:relative;flex:1 1 0;min-width:0;max-width:84px}
.cp-small{width:100%;height:auto;aspect-ratio:1}
.cp-strip .cp-tag{position:static;align-self:center;flex:none}

/* 13 · BOOT — the splash shows until app.js reveals a screen; the fallback only while no screen is visible (boot.js) */
.boot,.boot-fail{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:24px max(var(--pad),env(safe-area-inset-left));background:var(--paper);color:var(--ink);text-align:center}
.boot img{width:132px;height:132px;rotate:-7deg}
.boot p{font:700 22px/1.2 var(--serif)}
body:has(.screen:not([hidden])) :is(.boot,.boot-fail),body:has(.boot-fail:not([hidden])) .boot{display:none}
.boot-fail h1{max-width:320px;font:700 34px/1.1 var(--serif)}
.boot-fail p{max-width:320px;font:600 17px/1.4 var(--sans);color:var(--ink-2)}
.boot-fail a:not(.btn){font-weight:800;color:var(--verm);text-underline-offset:3px}
.boot-fail code{font:600 14px/1.4 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
/* diagnostics text: Einstellungen → Diagnose and diag.html (scrolls; ui/ gives it tabindex=0) */
.log{margin:12px 0 0;padding:12px 14px;max-height:60vh;overflow:auto;border-radius:6px 12px 10px 5px;background:var(--ink);color:#f3efe6;
  white-space:pre;font:500 12.5px/1.6 var(--mono)}
.log span{color:#bdb3a5}
.log b{font-weight:700;color:var(--mint)}
.ver{margin:8px 0 0;font:500 12px/1.5 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.diag .t-title{margin-top:8px}
.diag-lead{margin-top:10px}
.diag-acts{display:grid;gap:var(--gap);padding-bottom:12px}

/* 14 · MOTION — shared keyframes (screen ones live next to their screen) */
@keyframes bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes glow{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes pulse{0%,100%{opacity:0}50%{opacity:.5}}
@keyframes ask{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes press{0%{transform:scale(1.4);opacity:0}55%{transform:scale(.94);opacity:1}80%,100%{transform:scale(1);opacity:1}}
@keyframes cfonce{0%,to{opacity:1;visibility:visible}}
@keyframes cf1{0%{opacity:1;visibility:visible}12.5%,to{opacity:0;visibility:hidden}}
@keyframes cf2{0%{opacity:1;visibility:visible}25%,to{opacity:0;visibility:hidden}}
@keyframes cf3{0%{opacity:1;visibility:visible}37.5%,to{opacity:0;visibility:hidden}}
@keyframes cf4{0%{opacity:1;visibility:visible}50%,to{opacity:0;visibility:hidden}}
@keyframes cf5{0%{opacity:1;visibility:visible}62.5%,to{opacity:0;visibility:hidden}}
@keyframes cf6{0%{opacity:1;visibility:visible}75%,to{opacity:0;visibility:hidden}}
@keyframes cf7{0%{opacity:1;visibility:visible}87.5%,to{opacity:0;visibility:hidden}}

/* 15 · REDUCED MOTION — decoration stops; .rm-only content (e.g. the breathing count) appears instead */
.rm-only{display:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rm-only{display:revert}
  .motion-only,.cstack,.csteps{display:none}
  .combo:has(.cstack)>.cstrip{display:flex}
}