.mx-icon{display:inline-block;width:24px;height:24px;flex:0 0 auto;vertical-align:middle;
  color:var(--mx-color,#cdd6da);fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.mx-icon path,.mx-icon circle,.mx-icon rect,.mx-icon ellipse{vector-effect:non-scaling-stroke}
.mx-icon .mx-i-fill{fill:currentColor;stroke:none}
.mx-icon .mx-i-accent{stroke:var(--mx-accent,currentColor)}
.mx-icon .mx-i-accent-fill{fill:var(--mx-accent,currentColor);stroke:none}
.mx-icon--sm{width:20px;height:20px}
.mx-icon--md{width:24px;height:24px}
.mx-icon--lg{width:32px;height:32px;stroke-width:2}
.mx-icon--display{width:48px;height:48px;stroke-width:1.8}
.mx-icon--hub{color:#cdd6da}
.mx-icon--canon{color:#95d6e8}
.mx-icon--rotation{color:#7ee5b1}
.mx-icon--ledger{color:#ffe14d}
.mx-icon--records{color:#f0c674}
.mx-icon--rankings{color:#aee0ec}
.mx-icon--archive{color:#c3ccd2}
.mx-icon--observatory{color:#34d2c4;--mx-accent:#8af3e8}
.mx-icon--atlas{color:#34d2c4;--mx-accent:#8af3e8}
/* YOUTUBE is permanently neutral (M3b): the signal-wave accent inherits the
   silver glyph colour, never a fixed red. Red is reserved for genuine
   live/premiere states, which a surface opts into locally. */
.mx-icon--youtube{color:#e7edf0;--mx-accent:currentColor}
.mx-icon--annual{color:#5865f2;--mx-accent:#8d98ff}
.mx-icon--live{color:#ff668f}
.mx-icon--pulse{color:#81e8f5}
.mx-icon--you{color:#cdd6da}
.mx-icon--centurion{color:#4f7fd6}
.mx-icon--vault{color:#d6b86b}
.mx-icon--muted{color:rgba(255,255,255,0.6)}
.mx-icon--inherit{color:inherit}
.mx-icon--glow{filter:drop-shadow(0 0 4px currentColor)}