@font-face { font-family: 'DM Sans'; src: url('/demos/fonts/dm-sans.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/demos/fonts/fraunces.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('/demos/fonts/dm-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('/demos/fonts/dm-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/demos/fonts/manrope.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/demos/fonts/newsreader.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Archivo Black'; src: url('/demos/fonts/archivo-black.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/demos/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/demos/fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/demos/fonts/ibm-plex-mono-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/demos/fonts/inter.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

.ch-demo-disclosure {
  position: fixed;
  z-index: 10000;
  right: 18px;
  bottom: 18px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(19, 21, 23, .94);
  color: #fff;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .24);
  backdrop-filter: blur(12px);
  font: 600 10px/1.2 'DM Sans', Arial, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ch-demo-disclosure span { color: #bbc2d1; }
.ch-demo-disclosure a { padding-bottom: 2px; border-bottom: 1px solid #789dff; color: #fff; text-decoration: none; white-space: nowrap; }
.ch-demo-action-notice { position: fixed; z-index: 10001; right: 18px; bottom: 76px; max-width: 360px; margin: 0; padding: 12px 14px; background: #f4f2eb; color: #17191b; box-shadow: 0 10px 35px rgba(0, 0, 0, .24); font: 600 11px/1.45 'DM Sans', Arial, sans-serif; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.ch-demo-action-notice.is-visible { opacity: 1; transform: none; }

.ch-demo--taller .back-concepts { display: none !important; }
.ch-demo--pedal .switcher { justify-content: flex-start; }
.ch-demo--pedal .switcher__options, .ch-demo--pedal .notes-trigger { display: none !important; }
.ch-demo--firme { --switcher-h: 0px; }
.ch-demo--firme .concept-switcher { display: none !important; }

@media (max-width: 560px) {
  .ch-demo-disclosure { right: 10px; bottom: 10px; left: 10px; justify-content: space-between; gap: 10px; font-size: 8px; }
  .ch-demo-action-notice { right: 10px; bottom: 64px; left: 10px; max-width: none; }
}