/* Demo-page chrome — not part of the shared component library */
.demo-section { border-top: 1px solid var(--border); padding: 2.5rem 0; }
.demo-label {
  font-size: calc(0.6rem * var(--scale)); letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.25rem; font-weight: 600;
}
.swatch-row { display: flex; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.swatch {
  width: 96px; height: 96px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  font-size: calc(0.65rem * var(--scale)); color: white; font-weight: 600; letter-spacing: 0.05em;
  text-align: center;
}
.swatch.light { color: var(--muted); border-color: rgba(0,0,0,0.18); }
.swatch-var {
  display: none; position: absolute; bottom: 6px; left: 0; right: 0;
  text-align: center; letter-spacing: 0; font-weight: 400;
  font-size: calc(0.42rem * var(--scale)); opacity: 0.6;
}
body.hide-en .swatch .zh-alt { display: block; font-size: 1.5em; }
body.hide-en .swatch-var { display: block; }

/* mnemonic-icon gallery — rendered from the live ICONS map */
.icon-grid { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.icon-tile {
  width: 96px; padding: 0.8rem 0.4rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--cream);
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
}
.icon-tile .sc-mnemonic { width: 46px; height: 46px; }
.icon-name { font-size: calc(0.58rem * var(--scale)); letter-spacing: 0.03em; color: var(--muted); font-family: ui-monospace, monospace; }