/* The visual kit: material beads, the 30-bead ladder, seals (big and medium), the seal press and stamp, small wins,
   exercise icons, charts
   (js/ui/materials.js, ladder.js, sealsvg.js, exicons.js, charts.js). Colours come from css/bead.css; the kit's own tokens below carry light and
   dark values in the same two blocks bead.css uses. Vermilion marks only the step you're on and the seals. */

:root {
  --seal: #B5382A;
  --seal-blend: multiply;
  --st-accent: #E05A44;                         /* vermilion on the dark stage */
  --ghost: rgba(28, 27, 26, 0.035);             /* the face of a blank seal */
  --emboss: rgba(255, 255, 255, 0.85);          /* its blind-pressed lower edge */
  --mt-shadow: rgba(28, 27, 26, 0.28);
  --mt-glass-edge: #fff;
  --mt-chip: rgba(251, 250, 247, 0.74);
  --halo-tint: rgba(194, 64, 44, 0.08);
  --seal-glow: rgba(226, 104, 70, 0.3);         /* the warm light under a big seal */
  --seal-glow-2: rgba(240, 170, 110, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --seal: #C9472F; --seal-blend: normal;
    --ghost: rgba(236, 232, 225, 0.025); --emboss: rgba(255, 255, 255, 0.05);
    --mt-shadow: rgba(0, 0, 0, 0.6); --mt-glass-edge: rgba(255, 255, 255, 0.55); --mt-chip: rgba(31, 30, 28, 0.78);
    --halo-tint: rgba(224, 90, 68, 0.1);
    --seal-glow: rgba(224, 92, 62, 0.34); --seal-glow-2: rgba(232, 150, 96, 0.12);
  }
}
:root[data-theme='dark'] {
  --seal: #C9472F; --seal-blend: normal;
  --ghost: rgba(236, 232, 225, 0.025); --emboss: rgba(255, 255, 255, 0.05);
  --mt-shadow: rgba(0, 0, 0, 0.6); --mt-glass-edge: rgba(255, 255, 255, 0.55); --mt-chip: rgba(31, 30, 28, 0.78);
  --halo-tint: rgba(224, 90, 68, 0.1);
  --seal-glow: rgba(224, 92, 62, 0.34); --seal-glow-2: rgba(232, 150, 96, 0.12);
}

/* ================================================================ material beads */

.mat-bead { display: inline-block; vertical-align: middle; flex: none; overflow: visible; }
.mat-bead.is-solid, .mat-bead.is-smoke { filter: drop-shadow(0 var(--mb-y, 1px) var(--mb-b, 1.3px) var(--mt-shadow)); }
.mat-bead.is-ghost { opacity: 0.32; filter: blur(0.4px) saturate(0.5); }
.mat-bead.is-smoke { opacity: 0.9; }
/* ink pearl is dark itself: on dark paper (and the stage) its ghost is lifted so it doesn't vanish */
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .mat-bead.is-ghost.mat-pearl { opacity: 0.6; filter: blur(0.4px) brightness(2.1) saturate(0.7); } }
:root[data-theme='dark'] .mat-bead.is-ghost.mat-pearl, .on-stage .mat-bead.is-ghost.mat-pearl { opacity: 0.6; filter: blur(0.4px) brightness(2.1) saturate(0.7); }

/* a ghost step on a ladder: its material's flat tint (--gt), a lighter one on dark paper where needed (--gtd) */
.kl-ghost, .kh-ghost { fill: var(--gt, #A6A29B); stroke: var(--gt, #A6A29B); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) :is(.kl-ghost, .kh-ghost) { fill: var(--gtd, var(--gt)); stroke: var(--gtd, var(--gt)); } }
:root[data-theme='dark'] :is(.kl-ghost, .kh-ghost), .on-stage :is(.kl-ghost, .kh-ghost) { fill: var(--gtd, var(--gt)); stroke: var(--gtd, var(--gt)); }

/* frosted glass: the next material waiting (inside any SVG) */
.mt-fr-shadow { fill: rgba(28, 27, 26, 0.12); }
.mt-fr-bead { opacity: 1; }
.mt-fr-glass { fill: url(#mt-fr-glass); stroke: var(--mt-glass-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mt-fr-hi { fill: #fff; opacity: 0.62; }
.mt-fr-sweep { animation: mt-sweep 3.8s ease-in-out infinite; transform: translateX(calc(var(--fr) * -1)); }
@keyframes mt-sweep { 0%, 52% { transform: translateX(calc(var(--fr) * -1)); } 100% { transform: translateX(var(--fr)); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mt-fr-glass { fill: url(#mt-fr-glass-dk); }
  :root:not([data-theme='light']) .mt-fr-shadow { fill: rgba(0, 0, 0, 0.5); }
  :root:not([data-theme='light']) .mt-fr-hi { opacity: 0.45; }
  :root:not([data-theme='light']) .mt-fr-bead { opacity: 0.85; }
}
:root[data-theme='dark'] .mt-fr-glass, .on-stage .mt-fr-glass { fill: url(#mt-fr-glass-dk); }
:root[data-theme='dark'] .mt-fr-shadow, .on-stage .mt-fr-shadow { fill: rgba(0, 0, 0, 0.5); }
:root[data-theme='dark'] .mt-fr-hi, .on-stage .mt-fr-hi { opacity: 0.45; }
:root[data-theme='dark'] .mt-fr-bead, .on-stage .mt-fr-bead { opacity: 0.85; }
.on-stage .mt-fr-glass { stroke: rgba(255, 255, 255, 0.55); }

/* the step you're on */
.mt-halo-glow { fill: var(--accent); opacity: 0.28; }
.mt-halo-ring { fill: none; stroke: var(--accent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.mt-halo-ring.breathe, .kl-halo-ring.breathe, .kc-halo.breathe { animation: mt-breathe 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mt-breathe { 50% { opacity: 0.35; transform: scale(1.18); } }
.on-stage .mt-halo-glow { fill: var(--st-accent); opacity: 0.36; }
.on-stage .mt-halo-ring { stroke: var(--st-accent); }

/* a level name with its material: [wood bead] Wood · Medium 3 */
.mt-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 7px; border-radius: 16px; background: var(--mt-chip); border: 1px solid var(--line); font-size: 14px; color: var(--ink); white-space: nowrap; align-self: flex-start; }
.mt-chip.on-stage { background: rgba(255, 255, 255, 0.05); border-color: #34322E; color: var(--stage-ink); }
.mt-inline { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.mt-bandrow { display: inline-flex; align-items: center; }

/* ================================================================ the ladder */

.k-ladder { position: relative; flex: none; }
.k-ladder svg { display: block; overflow: visible; }
.kl-bead, .kl-halo, .kh-bead, .kh-now, .kc-now, .kc-dot, .kc-start { transform-box: fill-box; transform-origin: center; }
.k-ladder.pre .kl-bead, .k-ladder.pre .kl-halo, .k-ladder.pre .kh-bead, .k-ladder.pre .kh-now { opacity: 0; }
.kl-thread { fill: none; stroke: var(--slot); stroke-width: 1; }
.kl-thread.on { stroke: var(--ink); stroke-width: 1.4; }
.k-ladder.pre .kl-thread.on { stroke-dashoffset: 1; }
.kl-hair { stroke: var(--line); stroke-width: 1; stroke-dasharray: 1 3; }
.kl-hair.far { stroke-dasharray: 1 5; }
.kl-ghost { fill-opacity: 0.16; stroke-opacity: 0.4; stroke-width: 0.8; }
.kl-ghost.far { fill-opacity: 0.1; stroke-opacity: 0.26; }
.kl-target { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 1.6 1.6; }
/* where the first check-in measured the skill: a thin solid ring (the next seal's ring is dashed) */
.kl-measured { fill: none; stroke: var(--ink-2); stroke-width: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .kl-ghost.far { fill-opacity: 0.16; stroke-opacity: 0.42; } }
:root[data-theme='dark'] .kl-ghost.far { fill-opacity: 0.16; stroke-opacity: 0.42; }
.kl-lbl { font-family: var(--serif); font-size: 15px; fill: var(--ink-3); }
.kl-lbl.past { fill: var(--ink-2); }
.kl-lbl.cur { fill: var(--ink); }
.kl-lbl.far { opacity: 0.7; }
.kl-lbead { opacity: 0.55; }
.kl-lbead.cur, .kl-lbead.past { opacity: 1; }
.kl-lbead.far { opacity: 0.4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .kl-lbead.m-pearl { filter: brightness(2.1); } }
:root[data-theme='dark'] .kl-lbead.m-pearl, .on-stage .kl-lbead.m-pearl { filter: brightness(2.1); }
.kl-mark { font-family: var(--sans); font-size: 11px; fill: var(--ink-2); letter-spacing: 0.3px; }
.kl-mark.now { fill: var(--accent); font-weight: 600; }
.kl-tick { stroke: var(--ink-3); stroke-width: 1; }
.kl-tick.now { stroke: var(--accent); }
.kl-halo-glow { fill: var(--accent); opacity: 0.28; }
.kl-halo-ring { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.kl-bead.smoke { opacity: 0.85; }
/* on the dark stage */
.k-ladder.on-stage .kl-thread { stroke: var(--stage-line); }
.k-ladder.on-stage .kl-thread.on { stroke: rgba(238, 235, 229, 0.55); }
.k-ladder.on-stage .kl-hair { stroke: #2A2826; }
.k-ladder.on-stage .kl-ghost { fill-opacity: 0.24; stroke-opacity: 0.5; }
.k-ladder.on-stage .kl-ghost.far { fill-opacity: 0.14; stroke-opacity: 0.32; }
.k-ladder.on-stage .kl-lbl { fill: #4F4C47; }
.k-ladder.on-stage .kl-lbl.past { fill: var(--stage-dim); }
.k-ladder.on-stage .kl-lbl.cur { fill: var(--stage-ink); }
.k-ladder.on-stage .kl-lbl.far { fill: #4A4743; opacity: 1; }
.k-ladder.on-stage .kl-mark { fill: var(--stage-dim); }
.k-ladder.on-stage .kl-mark.now { fill: var(--st-accent); }
.k-ladder.on-stage .kl-tick { stroke: #4F4C47; }
.k-ladder.on-stage .kl-tick.now { stroke: var(--st-accent); }
.k-ladder.on-stage .kl-halo-glow { fill: var(--st-accent); opacity: 0.36; }
.k-ladder.on-stage .kl-halo-ring { stroke: var(--st-accent); }
.k-ladder.on-stage .kl-bead.smoke { opacity: 0.7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .kl-bead.smoke, :root:not([data-theme='light']) .kh-bead.smoke { opacity: 0.62; } }
:root[data-theme='dark'] .kl-bead.smoke, :root[data-theme='dark'] .kh-bead.smoke { opacity: 0.62; }
.k-ladder.on-stage .kl-target { stroke: var(--stage-dim); }

/* compact, horizontal */
.kh-thread { stroke: var(--line); stroke-width: 1; }
.kh-ghost { fill-opacity: 0.14; stroke-opacity: 0.34; stroke-width: 0.8; }
.kh-now { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.kh-tick { fill: var(--ink-2); }
.kh-target { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 1.6 1.6; }
.kh-ghost.at-measured { fill-opacity: 0.5; stroke-opacity: 0.8; }
.kh-measured { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.kh-measured-tick { fill: none; stroke: var(--ink-2); stroke-width: 0.9; stroke-linejoin: round; }
.k-ladder.on-stage .kh-measured, .k-ladder.on-stage .kh-measured-tick, .k-ladder.on-stage .kl-measured { stroke: var(--stage-dim); }
.k-ladder.on-stage .kh-thread { stroke: #34322E; }
.k-ladder.on-stage .kh-ghost { fill-opacity: 0.2; stroke-opacity: 0.45; }
.k-ladder.on-stage .kh-now { stroke: var(--st-accent); }
.k-ladder.on-stage .kh-tick { fill: var(--stage-dim); }
.kh-marks { position: relative; height: 30px; margin-top: 3px; }
.kh-mark { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 11px; line-height: 1.3; white-space: nowrap; color: var(--ink-2); }
.kh-mark b { font-weight: 500; color: var(--ink); }
.kh-step { display: inline-flex; align-items: center; gap: 4px; }
.kh-mark.now, .kh-mark.now b { color: var(--accent); }
.kh-mark.at-start { transform: translateX(-8px); align-items: flex-start; }
.kh-mark.at-end { transform: translateX(calc(-100% + 8px)); align-items: flex-end; }
.kh-mark.end { flex-direction: row-reverse; gap: 5px; transform: translateX(-100%); align-items: center; padding-top: 2px; }
.k-ladder.on-stage .kh-mark { color: var(--stage-dim); }
.k-ladder.on-stage .kh-mark b { color: var(--stage-ink); }
.k-ladder.on-stage .kh-mark.now, .k-ladder.on-stage .kh-mark.now b { color: var(--st-accent); }

/* ================================================================ seals */

.k-seal { display: block; overflow: visible; flex: none; }
.k-seal .seal-fill { fill: var(--seal); }
.k-seal.earned .seal-ink { mix-blend-mode: var(--seal-blend); }
.k-seal .seal-emboss { fill: none; stroke: var(--emboss); }
.k-seal .seal-blank { fill: var(--ghost); stroke: var(--ink-3); }
.k-seal .seal-txt { font-family: var(--sans); font-weight: 650; }
.k-seal .seal-serif { font-family: var(--serif); }
/* a level seal not yet earned: its band's bead, a faint ghost in the carved well */
.k-seal .seal-ghost { opacity: 0.34; filter: saturate(0.55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .k-seal .seal-ghost { opacity: 0.4; } :root:not([data-theme='light']) .k-seal .seal-ghost.mat-pearl { opacity: 0.42; filter: brightness(1.7) saturate(0.6); } }
:root[data-theme='dark'] .k-seal .seal-ghost { opacity: 0.4; }
:root[data-theme='dark'] .k-seal .seal-ghost.mat-pearl, .on-stage .k-seal .seal-ghost.mat-pearl { opacity: 0.42; filter: brightness(1.7) saturate(0.6); }
.on-stage .k-seal { --seal-line: #6F6B65; }
.on-stage .k-seal .seal-blank { stroke: var(--stage-faint); }
/* a big seal not yet earned: its ink drop a faint ghost; its jewels turn and grow from their own centre */
.k-seal .ink-ghost { opacity: 0.3; filter: saturate(0.4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .k-seal .ink-ghost { opacity: 0.42; filter: brightness(1.6) saturate(0.4); } }
:root[data-theme='dark'] .k-seal .ink-ghost, .on-stage .k-seal .ink-ghost { opacity: 0.42; filter: brightness(1.6) saturate(0.4); }
.k-seal .sl-drop-in, .k-seal .sl-white, .k-seal .sl-pearl { transform-box: fill-box; transform-origin: center; }

/* the press */
.k-press { position: relative; width: 100%; flex: none; }
.k-press > div { position: absolute; left: 50%; top: 50%; }
.kp-imp { width: var(--kp-w); height: var(--kp-size); margin: calc(var(--kp-size) / -2) 0 0 calc(var(--kp-w) / -2); }
.kp-imp .k-seal { width: var(--kp-w); height: var(--kp-size); }
.kp-spread { width: calc(var(--kp-w) * 1.34); height: calc(var(--kp-size) * 1.34); margin: calc(var(--kp-size) * -0.67) 0 0 calc(var(--kp-w) * -0.67); border-radius: 20%;
  background: radial-gradient(closest-side, rgba(179, 54, 42, 0.4), rgba(179, 54, 42, 0.22) 72%, rgba(179, 54, 42, 0) 100%); filter: blur(8px); opacity: 0; }
.kp-ring { width: calc(var(--kp-w) * 1.18); height: calc(var(--kp-size) * 1.18); margin: calc(var(--kp-size) * -0.59) 0 0 calc(var(--kp-w) * -0.59); border-radius: 16%; border: 1px solid var(--seal); opacity: 0; }
.k-press.round .kp-spread, .k-press.round .kp-ring { border-radius: 50%; }
.kp-sheen { width: var(--kp-w); height: var(--kp-size); margin: calc(var(--kp-size) / -2) 0 0 calc(var(--kp-w) / -2); border-radius: 6%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.42) 46%, rgba(255, 255, 255, 0) 60%); mix-blend-mode: soft-light; opacity: 0; pointer-events: none; }
.k-press.round .kp-sheen { border-radius: 50%; }
.kp-bead { display: flex; align-items: center; justify-content: center; }
.kp-bead > svg { display: block; }
.kp-block {
  width: var(--kp-w); height: var(--kp-size); margin: calc(var(--kp-size) / -2) 0 0 calc(var(--kp-w) / -2); border-radius: 8.5%; opacity: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 28% 22%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 50% at 75% 80%, rgba(90, 55, 30, 0.28), rgba(90, 55, 30, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='196' height='196'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .035' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .18 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='196' height='196' filter='url(%23m)'/%3E%3C/svg%3E"),
    linear-gradient(155deg, #EFE5D6 0%, #D9C7AE 40%, #B89C7C 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), inset 0 -14px 24px rgba(90, 55, 30, 0.28), inset 0 0 0 1px rgba(90, 55, 30, 0.25), 0 0 0 3px rgba(179, 54, 42, 0.85), 0 40px 50px -20px rgba(28, 27, 26, 0.5);
}
.kp-block::after { content: ''; position: absolute; left: 50%; top: 50%; width: 24%; height: 24%; margin: -12% 0 0 -12%; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%), radial-gradient(circle, rgba(90, 55, 30, 0.08), rgba(90, 55, 30, 0.3));
  box-shadow: inset 0 2px 4px rgba(90, 55, 30, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6); }
.kp-block.round { border-radius: 50%; }
.kp-block.tall { border-radius: 14% / 9%; }
.kp-block.tall::after { width: 26%; height: 16%; margin: -8% 0 0 -13%; }
.k-press.done .kp-imp, .k-press.done .kp-bead { opacity: 1; }
/* a big seal's press: a warm glow that blooms and stays under it, a second wider ring */
.kp-glow { width: calc(var(--kp-w) * 2); height: calc(var(--kp-size) * 2); margin: calc(var(--kp-size) * -1) 0 0 calc(var(--kp-w) * -1); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--seal-glow), var(--seal-glow-2) 52%, rgba(240, 170, 110, 0) 100%); }
.kp-ring.r2 { width: calc(var(--kp-w) * 1.3); height: calc(var(--kp-size) * 1.3); margin: calc(var(--kp-size) * -0.65) 0 0 calc(var(--kp-w) * -0.65); border-radius: 18%; border-width: 0.75px; }
.k-press.round .kp-ring.r2 { border-radius: 50%; }
.k-press.done .kp-glow { opacity: 0.55; }

/* the medium stamp (and the "Also today" row): the seal, a quick press, a line under it */
.k-stamp { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.ks-seal { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--ks-size); min-height: var(--ks-size); }
.ks-seal > .k-seal { position: relative; }
.ks-spread, .ks-glow { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; opacity: 0; }
.ks-spread { width: calc(var(--ks-size) * 1.2); height: calc(var(--ks-size) * 1.2); margin: calc(var(--ks-size) * -0.6) 0 0 calc(var(--ks-size) * -0.6);
  background: radial-gradient(closest-side, rgba(179, 54, 42, 0.32), rgba(179, 54, 42, 0) 100%); filter: blur(3px); }
.ks-glow { width: calc(var(--ks-size) * 1.75); height: calc(var(--ks-size) * 1.75); margin: calc(var(--ks-size) * -0.875) 0 0 calc(var(--ks-size) * -0.875);
  background: radial-gradient(closest-side, var(--seal-glow), var(--seal-glow-2) 55%, rgba(240, 170, 110, 0) 100%); }
.k-stamp.done .ks-glow { opacity: 0.6; }
.ks-line { font-size: 13px; line-height: 1.35; color: var(--ink); text-align: center; max-width: 16em; }

/* a small win: a tick and a plain line, quiet ink */
.k-win { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.k-win .kw-tick { flex: none; margin-top: 3px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.k-win .kw-text { min-width: 0; }
.k-win.fresh .kw-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: kw-draw 0.42s 0.12s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes kw-draw { to { stroke-dashoffset: 0; } }
.k-win.on-stage, .on-stage .k-win { color: var(--stage-ink); }
.k-win.on-stage .kw-tick, .on-stage .k-win .kw-tick { stroke: var(--stage-ink); }

/* ================================================================ exercise icons */

.ex-icon { display: inline-block; vertical-align: middle; flex: none; overflow: visible; }

/* ================================================================ charts */

.k-chart { display: block; overflow: visible; }
.k-chart.pre .kc-line { stroke-dashoffset: 1; }
.k-chart.pre .kc-area, .k-chart.pre .kc-dot, .k-chart.pre .kc-start, .k-chart.pre .kc-now { opacity: 0; }
.kc-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 1 3; }
.kc-axis { stroke: var(--line); stroke-width: 1; }
.kc-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-chart.spark .kc-line { stroke-width: 1.8; }
.kc-start { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.5; }
.kc-dot { fill: var(--ink); }
.kc-end { fill: var(--accent); }
.kc-halo { fill: var(--halo-tint); stroke: var(--accent); stroke-width: 1.2; }
.kc-val { font-family: var(--serif); font-size: 14px; fill: var(--ink-2); }
.kc-val.now { fill: var(--accent); }
.kc-x { font-family: var(--sans); font-size: 10.5px; fill: var(--ink-2); }
.kc-x.now { fill: var(--accent); font-weight: 600; }
.kc-mark { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.kc-mark-t { font-family: var(--sans); font-size: 10.5px; fill: var(--ink-2); }
.kc-up { font-family: var(--sans); font-size: 10.5px; fill: var(--ink-2); letter-spacing: 0.2px; }
.k-chart.on-stage .kc-axis, .k-chart.on-stage .kc-grid { stroke: #2E2C29; }
.k-chart.on-stage .kc-line { stroke: var(--stage-ink); stroke-width: 2.2; }
.k-chart.on-stage .kc-start { fill: var(--stage); stroke: var(--stage-dim); }
.k-chart.on-stage .kc-dot { fill: var(--stage-ink); }
.k-chart.on-stage .kc-end { fill: var(--st-accent); }
.k-chart.on-stage .kc-halo { fill: rgba(224, 90, 68, 0.14); stroke: var(--st-accent); }
.k-chart.on-stage .kc-val, .k-chart.on-stage .kc-x, .k-chart.on-stage .kc-up, .k-chart.on-stage .kc-mark-t { fill: var(--stage-dim); }
.k-chart.on-stage .kc-val.now, .k-chart.on-stage .kc-x.now { fill: var(--st-accent); }

/* the strand's beads (beadsvg.js) take their shadow from the shared filter; nothing else needed here */

@media (prefers-reduced-motion: reduce) {
  .mt-halo-ring.breathe, .kl-halo-ring.breathe, .kc-halo.breathe, .mt-fr-sweep, .k-win.fresh .kw-tick path { animation: none !important; }
  .k-win.fresh .kw-tick path { stroke-dashoffset: 0; }
  .k-ladder.pre .kl-bead, .k-ladder.pre .kl-halo, .k-ladder.pre .kh-bead, .k-ladder.pre .kh-now,
  .k-chart.pre .kc-area, .k-chart.pre .kc-dot, .k-chart.pre .kc-start, .k-chart.pre .kc-now { opacity: 1; }
  .k-ladder.pre .kl-thread.on, .k-chart.pre .kc-line { stroke-dashoffset: 0; }
}