/* ═══════════════════════════════════════════════════════════════════════════
   MATURATION RAMP — page-local accents, layered over theme.css tokens.
   Slate-teal → brass → ochre → violet ash: an OXIDATION ramp, not a siren
   ramp. Deliberately ends COOL: a winner that has changed character is no
   longer hot, and the loudest colour on this page must never be the worst
   state — the honest stance is "worth a review", not "panic".
   The ramp is health/wear, NOT price direction, so it does NOT participate in
   红涨绿跌 (same reasoning theme.css applies to --ok/--warn/--act).
   Measured: every rung ≥4.5:1 as text on --panel/--panel2/--bg in BOTH themes,
   and ≥4.69:1 in the hard case (the rung printed on a tint of its own hue).
   This :root block IS the dark plane — never html[data-theme="dark"], which
   matches nothing on a first visit (no attribute is set until a theme is saved).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --m1:#6ba2b2;   /* Still running     — clear slate-teal */
  --m2:#c1954f;   /* Showing wear      — brass            */
  --m3:#c47a45;   /* Thinning out      — ochre            */
  --m4:#9a8cb8;   /* Character changed — violet ash       */
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display',Inter,system-ui,'Segoe UI',Roboto,sans-serif;
  --hair:color-mix(in srgb,var(--text) 8%,transparent);
  /* sentence-level secondary copy; --muted stays reserved for short labels */
  --muted-strong:color-mix(in srgb,var(--text) 55%,var(--muted));
}
html[data-theme="light"]{
  --m1:#3a6d7e; --m2:#83601f; --m3:#8a4c1f; --m4:#645786;
}
/* Light is a design target, not a translation (doctrine §5.8). Three things a
   token swap gets wrong here and this block fixes:
   · panel ≈ canvas is the flatness bug — white cards need a soft shadow to sit
     on #f7f8fa at all;
   · a 15% tint that reads on near-black vanishes on white, so every tinted
     surface (underwater fill, wear-mark outline, theme segments) is lifted;
   · a hairline that works on dark is invisible under white. */
html[data-theme="light"] .hero,
html[data-theme="light"] .nullhero{box-shadow:0 1px 2px rgba(20,32,64,.05),0 10px 26px -18px rgba(20,32,64,.28)}
html[data-theme="light"] .sp-uw{opacity:.23}
html[data-theme="light"] .wear i{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 24%,transparent)}
html[data-theme="light"] .bar{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 15%,transparent)}
html[data-theme="light"] .leg{border-bottom-color:color-mix(in srgb,var(--text) 34%,transparent)}
*,*::before,*::after{box-sizing:border-box}
html:not([data-lang="zh"]) .l-zh{display:none}
html[data-lang="zh"] .l-en{display:none}
html[data-lang="zh"] body{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",Inter,sans-serif}
html body{margin:0;padding-top:24px;background:var(--bg);color:var(--text);
  font:14px/1.55 var(--font-display);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
.wrap{max-width:1260px;margin:0 auto;padding:0 26px 96px}
@media(max-width:640px){.wrap{padding:0 14px 72px}}

/* per-state accent binding — one class, four hues, everything downstream
   reads var(--mc). Also gives every state its RULE STYLE (see .rule). */
.m1{--mc:var(--m1)} .m2{--mc:var(--m2)} .m3{--mc:var(--m3)} .m4{--mc:var(--m4)}
/* NOT a fifth rung on the ramp — it is the ABSENCE of a rung, and it must never
   be given a hue. "Not enough to compare" is not a stage of wear. */
.m0{--mc:var(--muted)}

/* ── page header ─────────────────────────────────────────────────────────── */
.pghead{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;
  flex-wrap:wrap;margin:6px 0 2px}
.kick{font-size:10.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);margin:0 0 7px}
.pghead h1{margin:0;font-size:27px;font-weight:800;letter-spacing:-.028em;line-height:1.14;
  color:var(--text);font-family:var(--font-display)}
.pghead .sub{margin:7px 0 0;font-size:13.5px;color:var(--muted-strong);max-width:50ch}
.asof{font-size:11.5px;color:var(--muted);text-align:right;white-space:nowrap;padding-top:4px}
.asof b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.asof .l2{display:block;margin-top:3px}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — THE WEAR LADDER (signature, at page scale)
   Four rungs. Each rung is one continuous typographic rule running from the
   state's name to its count, and the rule's STROKE decays down the ladder:
   solid → dashed → dotted → broken. The structure encodes the content — these
   states are a sequence of wear, so the line that carries them wears out.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero{margin:22px 0 0;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 94%,transparent),var(--panel2));
  padding:22px 26px 20px}
.hero-lede{font-size:15.5px;line-height:1.5;color:var(--text);margin:0 0 20px;max-width:76ch}
.hero-lede b{font-weight:750;font-variant-numeric:tabular-nums}
.hero-lede .q{color:var(--muted-strong)}
.ladder{display:grid;gap:2px}
.rung{display:flex;align-items:center;gap:14px;padding:9px 2px;text-decoration:none;color:inherit;
  border-radius:9px;transition:background .16s}
.rung:hover{background:color-mix(in srgb,var(--mc) 8%,transparent)}
.rung:focus-visible{outline:2px solid color-mix(in srgb,var(--mc) 70%,transparent);outline-offset:2px}
.rung .n{flex:0 0 auto;min-width:2.6ch;text-align:right;font-size:23px;font-weight:700;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--mc)}
.rung .nm2{flex:0 0 auto;font-size:14.5px;font-weight:700;letter-spacing:-.012em;color:var(--text)}
.rung .rule{flex:1 1 auto;min-width:24px;height:1px;background:var(--mc);opacity:.62}
.rung .stance{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--mc)}
.rung.m2 .rule{background:none;
  background-image:repeating-linear-gradient(90deg,var(--mc) 0 5px,transparent 5px 9px)}
.rung.m3 .rule{background:none;
  background-image:repeating-linear-gradient(90deg,var(--mc) 0 2px,transparent 2px 7px)}
.rung.m4 .rule{background:none;
  background-image:repeating-linear-gradient(90deg,var(--mc) 0 13px,transparent 13px 21px,
    var(--mc) 21px 26px,transparent 26px 41px)}
.rung.off{opacity:.42}
.rung.off .n{color:var(--muted)}
@media(max-width:620px){
  .rung{flex-wrap:wrap;gap:6px 10px}
  .rung .rule{order:9;flex-basis:100%;min-width:0}
  .rung .stance{margin-left:auto}
}

/* ── the honest-null hero: the signature blown up. One long high-water rule,
      price sitting on it, no gap to tint. The same picture the rows use, at
      the size of the page — a quiet night is a finding, and it gets a design. */
.nullhero{margin:22px 0 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 94%,transparent),var(--panel2));
  padding:30px 28px 26px}
.nullhero .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--m1);margin:0 0 10px}
.nullhero h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.028em;line-height:1.2;
  color:var(--text);max-width:22ch}
.nullhero p{margin:11px 0 0;font-size:14px;line-height:1.6;color:var(--muted-strong);max-width:56ch}
.nullhero p b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.flatline{margin:24px 0 2px;height:34px;position:relative}
.flatline svg{display:block;width:100%;height:34px}
.flatline .fl-hw{stroke:var(--m1);stroke-width:1;stroke-dasharray:3 4;opacity:.75}
.flatline .fl-ln{fill:none;stroke:var(--muted-strong);stroke-width:1.5;stroke-linejoin:round}
.flatline .fl-dot{fill:var(--m1)}
.flatline .fl-cap{font:700 9px/1 var(--font-display);letter-spacing:.14em;fill:var(--m1);opacity:.85}
/* Law 1 — a panel with nothing on it still owes the reader a stance. */
.nullhero p.nullstance{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:20px 0 0;
  max-width:none;font-size:13px;font-weight:650;color:var(--m1);line-height:1.5}
.nullstance::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  flex:none;align-self:center}
.nullstance b{font-weight:650;color:inherit;white-space:nowrap}
.nullstance span.q{font-weight:450;color:var(--muted-strong)}

/* ── backdrop strip: one quiet line. Small, never a hero. ─────────────────── */
.backdrop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:14px 2px 0;
  font-size:12.5px;color:var(--muted-strong)}
.backdrop .bk{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted)}
.backdrop b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.backdrop .sep{color:var(--line)}

/* ── theme tomography ────────────────────────────────────────────────────── */
.sec{margin:38px 0 0}
.sec-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.sec-hd h2{margin:0;font-size:16px;font-weight:750;letter-spacing:-.018em;color:var(--text)}
.sec-hd .note{font-size:12.5px;color:var(--muted-strong)}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:9px 22px;
  margin-top:14px}
.thm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--hair)}
.thm .tname{font-size:13px;font-weight:650;color:var(--text);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.thm .tcount{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* honest shared scale: bar WIDTH is proportional to the largest theme, so a
   3-name theme can never look like a 30-name theme. 1px gaps + a track border
   keep the segments visible on white (light-parity law). */
.bar{grid-column:1 / -1;height:7px;border-radius:2px;display:flex;gap:1px;overflow:hidden;
  background:color-mix(in srgb,var(--text) 6%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 9%,transparent);margin-top:3px}
.bar i{display:block;height:100%}
.bar .b1{background:var(--m1)} .bar .b2{background:var(--m2)}
.bar .b3{background:var(--m3)} .bar .b4{background:var(--m4)}
.thm .tmat{font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums}
.thm .tmat.on{color:var(--m3)} .thm .tmat.off{color:var(--muted)}

/* ── THE SHELF — three kinds of winner, compared honestly ─────────────────── */
.shelf{display:grid;margin:20px 0 0}
.sh-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 20px;
  align-items:baseline;padding:14px 6px 16px;border-top:1px solid var(--hair);
  text-decoration:none;color:inherit;border-radius:10px;transition:background .16s}
.sh-row:first-child{border-top:none;padding-top:4px}
.sh-row:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.sh-row:focus-visible{outline:2px solid color-mix(in srgb,var(--link) 70%,transparent);
  outline-offset:2px}
.sh-nm{font-size:15px;font-weight:750;letter-spacing:-.016em;color:var(--text)}
.sh-n{font-size:12px;font-weight:700;color:var(--muted-strong);white-space:nowrap}
.sh-n b{font-variant-numeric:tabular-nums}
.sh-def{font-size:12.5px;color:var(--muted-strong);min-width:0}
.sh-sum{font-size:12px;color:var(--muted);white-space:nowrap}
.sh-sum b{font-variant-numeric:tabular-nums;color:var(--muted-strong);font-weight:650}
.sh-bar{grid-column:1 / -1;margin-top:10px}
.sh-bar .bar{height:10px;border-radius:3px}
@media(max-width:620px){
  .sh-row{grid-template-columns:minmax(0,1fr) auto}
  .sh-sum{grid-column:1;justify-self:start;margin-top:2px}
}

/* ── TIER SECTION — position, name and size distinguish a tier. Never a hue:
      on this page colour means wear, and a tier is not a severity. ────────── */
.tier{margin:48px 0 0;scroll-margin-top:12px}
.tier-hd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:20px}
.tier-hd h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.026em;color:var(--text)}
.tier-def{margin:6px 0 0;font-size:13px;color:var(--muted-strong);max-width:64ch}
.tier .ladder{margin-top:18px}
/* the OFF-LADDER line. The ramp is a wear sequence; "not enough to compare" sits
   outside it, so it takes no ramp hue and no decaying rule — a neutral hairline. */
.rung.m0{--mc:var(--muted);margin-top:8px;padding-top:12px;border-top:1px solid var(--hair);
  border-radius:0 0 9px 9px}
.rung.m0 .rule{background:var(--hair);opacity:1;background-image:none}
/* the mixed-cohort disclosure: quiet inset, NO state tint — a tinted banner reads
   as an alarm, and this is a disclosure. */
.mixnote{margin:16px 0 0;padding:12px 15px;border-radius:11px;max-width:80ch;
  border:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  background:color-mix(in srgb,var(--text) 3.5%,transparent);
  font-size:12.5px;line-height:1.58;color:var(--muted-strong)}
.mixnote b{color:var(--text);font-weight:750}
html[data-theme="light"] .mixnote{background:color-mix(in srgb,var(--text) 4.5%,transparent);
  border-color:color-mix(in srgb,var(--text) 14%,transparent)}
/* tier-level null band — quieter than the page hero, which outranks it */
.tnull{margin:18px 0 0;border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  background:color-mix(in srgb,var(--panel) 72%,transparent)}
.tnull h3{margin:0;font-size:17px;font-weight:750;letter-spacing:-.02em;color:var(--text)}
.tnull p{margin:9px 0 0;font-size:13px;line-height:1.6;color:var(--muted-strong);max-width:62ch}
.tnull p b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.tnull .nullstance{color:var(--m1)}
html[data-theme="light"] .tnull{background:var(--panel);
  box-shadow:0 1px 2px rgba(20,32,64,.05),0 10px 26px -18px rgba(20,32,64,.28)}

/* ═══════════════════════════════════════════════════════════════════════════
   THE BOARD
   ═══════════════════════════════════════════════════════════════════════════ */
.grp{margin:34px 0 0;scroll-margin-top:12px}
/* the group rule-line: the state is carried ONCE here, sticky, instead of
   being repeated as a chip on every row (Law 4 — a constant belongs in one
   place). Sticky is what lets the rows stay chip-free. */
.grp-hd{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;
  padding:11px 0 9px;background:var(--bg);
  border-bottom:1px solid color-mix(in srgb,var(--mc) 34%,var(--line))}
.grp-hd h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.024em;color:var(--text);
  white-space:nowrap}
.grp-hd .rule{flex:1 1 auto;min-width:20px;height:1px;background:var(--mc);opacity:.55}
.grp.m2 .grp-hd .rule{background:none;
  background-image:repeating-linear-gradient(90deg,var(--mc) 0 5px,transparent 5px 9px)}
.grp.m3 .grp-hd .rule{background:none;
  background-image:repeating-linear-gradient(90deg,var(--mc) 0 2px,transparent 2px 7px)}
.grp.m4 .grp-hd .rule{background:none;
  background-image:repeating-linear-gradient(90deg,var(--mc) 0 13px,transparent 13px 21px,
    var(--mc) 21px 26px,transparent 26px 41px)}
.grp-hd .cnt{font-size:12px;font-weight:700;color:var(--mc);font-variant-numeric:tabular-nums;
  white-space:nowrap}
/* Twelve sticky group headers stack down a three-tier page, so each carries the
   tier it belongs to. ONE token per group header, never a per-row badge. */
.grp-hd .tkick{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.grp-hd .tkick::after{content:"·";margin-left:9px;color:var(--line)}
/* the m0 group's rule is a neutral hairline — it is NOT a fifth rung on the ramp.
   Without this it inherits the --mc-tinted border and reads as a wear stage. */
.grp.m0 .grp-hd{border-bottom-color:var(--line)}
.grp.m0 .grp-hd .rule{background:var(--hair);opacity:1;background-image:none}
/* REQUIRED (measured — §14.2): the tier kicker overflows the sticky header at
   390px. It takes its own line there, and drops its separator with it. Without
   this block the page side-scrolls on a phone. */
@media(max-width:620px){
  .grp-hd{flex-wrap:wrap;gap:5px 12px;padding-bottom:8px}
  .grp-hd .tkick{flex:0 0 100%;order:-1}
  .grp-hd .tkick::after{content:none}
  .grp-hd h2{white-space:normal;font-size:16px}
  .grp-hd .cnt{margin-left:auto}
}
.rollup{margin:8px 0 0;padding:13px 6px 15px;font-size:12.5px;line-height:1.5;
  color:var(--muted);border-bottom:1px solid var(--hair)}
/* compact rows: the sparkline cell is the only thing that leaves. Words, wear
   marks, hovers and the library card all stay — the picture is what gets dropped
   under load, never the reading. */
.grp.compact .row{grid-template-columns:minmax(150px,1.15fr) 92px minmax(220px,2.1fr) auto}
@media(max-width:820px){.grp.compact .row{grid-template-columns:minmax(0,1fr) auto}}
/* the trend distance is a DISTANCE, not a direction — permanent green (permanent
   red in ZH) would be a false directional cue. */
.c-gain .fig.neutral{color:var(--text)}
/* stale tape */
.asof .lag{display:block;margin-top:4px;color:var(--muted);cursor:help;
  border-bottom:1px dotted color-mix(in srgb,var(--text) 22%,transparent)}
.asof .lag b{color:var(--muted-strong);font-weight:650}
.grp-sub{margin:8px 0 2px;font-size:12.5px;color:var(--muted-strong);display:flex;gap:10px;
  align-items:baseline;flex-wrap:wrap}
.grp-sub .stance{font-size:12px;font-weight:700;color:var(--mc);white-space:nowrap}
.grp-sub .stance::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;margin-right:6px;transform:translateY(-1px)}

.rows{margin-top:4px}
.row{display:grid;grid-template-columns:minmax(150px,1.15fr) 92px 104px minmax(220px,2.1fr) auto;
  gap:16px;align-items:center;padding:11px 6px;border-bottom:1px solid var(--hair)}
.row:hover{background:color-mix(in srgb,var(--mc) 5%,transparent)}
.c-tk{min-width:0}
.tk{font-size:14px;font-weight:750;letter-spacing:-.012em;color:var(--text)}
a.tk:hover{color:var(--link)}
.nm{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;margin-top:1px}
.c-gain .fig{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink-up,var(--up))}
.c-gain .fig.dn{color:var(--ink-down,var(--down))}
.c-gain .cap{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:2px}
.c-sp{color:var(--mc)}
.sp{display:block;width:104px;height:30px;overflow:visible}
.sp-uw{fill:currentColor;opacity:.15;stroke:none}
.sp-hw{stroke:currentColor;stroke-width:1;stroke-dasharray:3 3;opacity:.85}
.sp-ln{fill:none;stroke:var(--muted-strong);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.sp-dot{fill:currentColor}
.sp-null{font-size:11px;color:var(--muted)}
.c-legs{display:flex;align-items:center;gap:11px;min-width:0}
/* wear marks: how many things have slipped, 0-3, in the state's own hue.
   The empty slot keeps its outline so an all-clear row still reads as
   "measured and clear" rather than as a cell that failed to render. */
.wear{flex:0 0 auto;display:inline-flex;gap:2.5px}
.wear i{display:block;width:5px;height:13px;border-radius:1.5px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 17%,transparent)}
.wear i.on{background:var(--mc);box-shadow:none}
.legs{min-width:0;font-size:12.5px;color:var(--muted-strong);line-height:1.45}
.legs.clean{color:var(--muted)}
.leg{cursor:help;border-bottom:1px dotted color-mix(in srgb,var(--text) 20%,transparent)}
.leg:hover,.leg:focus-visible{color:var(--text);border-bottom-color:var(--mc)}
.leg + .leg::before{content:"·";margin:0 7px;color:var(--line);border:none;cursor:auto}
.c-lib{text-align:right;white-space:nowrap}
.lib{font-size:11.5px;font-weight:650;color:var(--muted-strong);font-variant-numeric:tabular-nums}
.lib-null{font-size:11.5px;color:var(--muted);cursor:help;
  border-bottom:1px dotted color-mix(in srgb,var(--text) 22%,transparent)}

/* mobile: the board becomes cards. Ticker + gain on one line, spark beside the
   wear marks, legs underneath — nothing truncated, nothing side-scrolling. */
@media(max-width:820px){
  .row{grid-template-columns:minmax(0,1fr) auto;gap:5px 14px;padding:13px 4px;align-items:baseline}
  .c-tk{grid-column:1;grid-row:1}
  .c-gain{grid-column:2;grid-row:1;text-align:right}
  .c-gain .cap{margin-top:0}
  .c-sp{grid-column:2;grid-row:2;justify-self:end}
  .c-legs{grid-column:1;grid-row:2;align-items:flex-start;padding-top:3px}
  .c-lib{grid-column:1 / -1;grid-row:3;text-align:left;margin-top:2px}
  .legs{white-space:normal}
}

/* ── footer small print: ONE line, merged. ───────────────────────────────── */
.smallprint{margin:40px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.65;color:var(--muted);max-width:88ch}
.smallprint b{color:var(--muted-strong);font-weight:650;font-variant-numeric:tabular-nums}

/* ── entrance: one short stagger, no ambient loop (settled data never pulses).
      The kill block names every animated selector AND the pseudo-elements that
      carry the wear rules, so reduce truly means still. */
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.rise{animation:rise .46s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.05s}.rise.d2{animation-delay:.12s}.rise.d3{animation-delay:.19s}
@media(prefers-reduced-motion:reduce){
  .rise,.rise.d1,.rise.d2,.rise.d3,
  .rise::before,.rise::after,
  .rung,.rung::before,.rung::after,
  .sh-row,.sh-row::before,.sh-row::after,
  .row,.row::before,.row::after,
  .grp-hd::before,.grp-hd::after,
  .tier-hd::before,.tier-hd::after,
  .mixnote::before,.mixnote::after,
  .rollup::before,.rollup::after,
  .tnull::before,.tnull::after,
  .thm::before,.thm::after{animation:none!important;transition:none!important}
}