@import url('https://api.fontshare.com/v2/css?f[]=clash-grotesk@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* =====================================================================
   MUSY — Citron design kit (styles). API and class list: header of
   citron-kit.js. Everything is scoped under .ck; classes ck-, keyframes
   ck-, custom properties --ck-*. No layout here: screens own their grid.
   ===================================================================== */

.ck {
  /* Colour */
  --ck-yellow: #FCFF4B;
  --ck-cream: #FDFFD2;
  --ck-ink: #1B1B1B;
  --ck-ink-2: #4D4D45;
  --ck-white: #FFFFFF;
  --ck-well: #F7F7EF;
  --ck-violet: #6D3CF0;
  --ck-violet-deep: #1E0B4B;
  --ck-pink: #FF3FA4;
  --ck-pink-soft: #FF9BD0;
  --ck-blue: #3D6BFF;
  --ck-blue-btn: #5B8CFF;
  --ck-blue-soft: #B3C8FF;
  --ck-mint: #2ED3A0;
  --ck-mint-soft: #7EE8C6;
  --ck-red: #C2102E;
  --ck-red-btn: #FF4D5A;
  --ck-green: #0B7A3E;
  --ck-focus: #6D3CF0;
  /* Shape */
  --ck-r-pill: 999px;
  --ck-r-card: 30px;
  --ck-r-pop: 24px;
  --ck-r-row: 22px;
  --ck-r-field: 18px;
  --ck-r-tile: 16px;
  /* Hard offset shadows for CSS-drawn elements (inked ones draw their own). */
  --ck-shadow-sm: 2px 3px 0 var(--ck-ink);
  --ck-shadow-md: 3px 4px 0 var(--ck-ink);
  --ck-shadow-card: 7px 9px 0 var(--ck-ink);
  /* Motion and type */
  --ck-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ck-font: 'Clash Grotesk', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  position: relative;
  min-height: 100%;
  isolation: isolate;
  background: var(--ck-yellow);
  color: var(--ck-ink);
  font-family: var(--ck-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
.ck *,
.ck *::before,
.ck *::after { box-sizing: border-box; }
.ck :where(h1, h2, h3, p, ul, ol, li) { margin: 0; padding: 0; }
.ck :where(ul, ol) { list-style: none; }
.ck :where(button, input) { font: inherit; color: inherit; margin: 0; }
.ck svg { display: block; }
.ck [hidden] { display: none !important; }

/* Focus: violet ring, visible on yellow and on white, distinct from the ink. */
.ck :focus-visible { outline: 3px solid var(--ck-focus); outline-offset: 3px; }

.ck .ck-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   Background (background()): turning rings, breathing rays, drifting stars
   ===================================================================== */
.ck .ck-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--ck-yellow);
}
.ck .ck-bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170vmax;
  height: 170vmax;
  margin: -85vmax 0 0 -85vmax;
  will-change: transform;
}
.ck .ck-bg-layer svg { width: 100%; height: 100%; }
.ck .ck-bg-rings { animation: ck-spin 60s linear infinite; }
.ck .ck-bg-rays { animation: ck-rays 44s linear infinite; }
.ck .ck-bg-calm {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 44% 42% at 50% 52%, rgba(252, 255, 75, .9) 0%, rgba(252, 255, 75, .6) 60%, rgba(252, 255, 75, 0) 100%);
}
.ck .ck-bg-grain {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .88  0 0 0 0 .8  0 0 0 0 .12  1.6 0 0 0 -.7'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
.ck .ck-bg-stars { position: absolute; inset: 0; }

/* Stars (star()): white, ink-outlined, 4 branches. */
.ck .ck-star {
  display: block;
  width: var(--ck-star-size, 16px);
  height: var(--ck-star-size, 16px);
  overflow: visible;
}
.ck .ck-star--at { position: absolute; left: var(--x); top: var(--y); }
.ck .ck-star--drift { opacity: 0; animation: ck-drift var(--ck-star-dur, 12s) ease-in-out var(--ck-star-delay, 0s) infinite; }
.ck .ck-star--twinkle { animation: ck-twinkle 1.8s ease-in-out var(--ck-star-delay, 0s) infinite; }

/* Logo and mark (logo(), icon()). Size them with height; width follows. */
.ck .ck-logo,
.ck .ck-mark { width: auto; height: 56px; color: inherit; }
.ck .ck-mark-tile { width: 100%; height: 100%; overflow: visible; transform: rotate(var(--rot, 0deg)); }
.ck .ck-glyph { width: 24px; height: 24px; flex: none; }

/* =====================================================================
   Ink (ink()): wobbly outline + hard shadow + soft shading, drawn in JS
   ===================================================================== */
.ck [data-ink] { position: relative; isolation: isolate; }
.ck [data-ink] > svg.ck-ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}
.ck .ck-ink-shadow { fill: var(--ck-ink-shadow, var(--ck-ink)); }
.ck .ck-ink-body {
  fill: var(--ck-ink-fill, #fff);
  stroke: var(--ck-ink-stroke, var(--ck-ink));
  stroke-width: var(--ck-ink-width, 2.6);
  stroke-linejoin: round;
}
.ck .ck-ink-shade { stroke: none; opacity: var(--ck-ink-shade, 1); }

/* Cards: large white surfaces keep only a hint of shading, or the white turns grey. */
.ck .ck-card { position: relative; min-width: 0; --ck-ink-fill: #fff; --ck-ink-width: 3.6; --ck-ink-shade: .28; }

/* =====================================================================
   Buttons: glossy pill (Bonbon) × ink outline + hard shadow (Vinyle)
   ===================================================================== */
.ck .ck-btn {
  --ck-btn-h: 58px;
  --ck-ink-fill: #fff;
  --ck-ink-width: 2.6;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ck-btn-h);
  padding: 0 22px 5px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ck-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.ck .ck-btn[data-ink="cta"] { padding-bottom: 6px; }
.ck .ck-btn-gloss {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 5px;
  height: calc((100% - 6px) * .32);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.ck .ck-btn-label { position: relative; display: inline-flex; align-items: center; gap: 9px; }
.ck .ck-btn-text { display: inline-flex; align-items: center; gap: 9px; }
.ck .ck-btn-label .ck-glyph { width: 20px; height: 20px; }

/* Press: the body sinks into its shadow. Hover (fine pointer only): it lifts off. */
.ck .ck-ink-body,
.ck .ck-ink-shade,
.ck .ck-btn-gloss,
.ck .ck-btn-label { transition: transform 140ms var(--ck-ease); }
.ck .ck-btn:not(:disabled):not([aria-disabled="true"]):active :is(.ck-ink-body, .ck-ink-shade, .ck-btn-gloss, .ck-btn-label) {
  transform: translateY(var(--ck-ink-dy, 4px));
  transition-duration: 60ms;
}
@media (hover: hover) and (pointer: fine) {
  .ck .ck-btn:not(:disabled):not([aria-disabled="true"]):hover:not(:active) :is(.ck-ink-body, .ck-ink-shade, .ck-btn-gloss, .ck-btn-label) {
    transform: translateY(-1.5px);
  }
}

.ck .ck-btn--primary {
  --ck-btn-h: 66px;
  --ck-ink-fill: var(--ck-yellow);
  --ck-ink-width: 3;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .07em;
}
.ck .ck-btn--pink { --ck-ink-fill: var(--ck-pink); }
.ck .ck-btn--blue { --ck-ink-fill: var(--ck-blue-btn); }
/* Destructive confirm. Ink text like every coloured button: --ck-red stays for text and states. */
.ck .ck-btn--red { --ck-ink-fill: var(--ck-red-btn); }
.ck .ck-btn--white { --ck-btn-h: 54px; --ck-ink-fill: #fff; --ck-ink-shade: .5; font-size: 15px; }
.ck .ck-btn--white .ck-btn-gloss { opacity: 0; }
.ck .ck-btn--sm { --ck-btn-h: 48px; font-size: 13.5px; letter-spacing: .05em; }

/* Auto-width pill (room rows: « Rejoindre », « Regarder », « Complet »). */
.ck .ck-btn--pill { --ck-btn-h: 48px; width: auto; min-width: 132px; padding: 0 18px 5px; font-size: 14px; letter-spacing: .05em; }
.ck .ck-btn--pill .ck-btn-gloss { left: 14px; right: 14px; }
.ck .ck-btn--pill .ck-btn-label .ck-glyph { width: 18px; height: 18px; }
.ck .ck-btn--pill.is-loading { font-size: 13px; padding: 0 12px 5px; }

/* Icon tile: 50×52 white ink tile, no gloss. */
.ck .ck-btn--icon {
  --ck-btn-h: 52px;
  --ck-ink-width: 2.4;
  display: block;
  flex: none;
  width: 50px;
  height: 52px;
  min-height: 0;
  padding: 0 0 4px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
}
.ck .ck-btn--icon .ck-btn-label { display: grid; place-items: center; width: 100%; height: 48px; }
.ck .ck-btn--icon .ck-btn-label .ck-glyph { width: 24px; height: 24px; }
.ck .ck-btn--icon[aria-pressed="true"] { --ck-ink-fill: var(--ck-mint-soft); }
.ck [aria-pressed="false"] .ck-if-off,
.ck [aria-pressed="true"] .ck-if-on { display: block; }
.ck [aria-pressed="false"] .ck-if-on,
.ck [aria-pressed="true"] .ck-if-off { display: none; }

/* Off: looks disabled. With [disabled] it is; without, it stays reachable (to explain why). */
.ck .ck-btn:disabled,
.ck .ck-btn--off:not(.is-loading) {
  --ck-ink-fill: #EDEDE5;
  --ck-ink-stroke: #8C8C82;
  --ck-ink-shadow: #BDBDB3;
  --ck-ink-shade: 0;
  color: #66665E;
}
.ck .ck-btn--off:not(:disabled):not(.is-loading) { color: #5E5E56; }
.ck .ck-btn:disabled { cursor: not-allowed; }
.ck .ck-btn:disabled .ck-btn-gloss,
.ck .ck-btn--off:not(.is-loading) .ck-btn-gloss { opacity: .35; }

/* Loading (busy()). */
.ck .ck-btn.is-loading { cursor: progress; }
.ck .ck-btn.is-loading .ck-btn-text { letter-spacing: .03em; }
.ck .ck-btn.is-loading .ck-btn-label .ck-glyph { display: none; }
.ck .ck-spinner {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 3px solid currentColor;
  border-right-color: transparent;
  animation: ck-spin 700ms linear infinite;
}
.ck .ck-btn:not(.is-loading) .ck-spinner { display: none; }

/* =====================================================================
   Tooltips (inside a button or any positioned control)
   ===================================================================== */
.ck .ck-tip {
  --ck-tip-dx: -50%;
  --ck-tip-dy: -4px;
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 60;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--ck-ink);
  color: var(--ck-yellow);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--ck-tip-dx), var(--ck-tip-dy)) scale(.96);
  transition: opacity 150ms var(--ck-ease), transform 150ms var(--ck-ease);
  pointer-events: none;
}
.ck .ck-tip--up { --ck-tip-dy: 4px; top: auto; bottom: calc(100% + 8px); }
.ck .ck-tip--start { --ck-tip-dx: 0; left: 0; }
.ck .ck-tip--end { --ck-tip-dx: 0; left: auto; right: 0; }
.ck :focus-visible > .ck-tip { opacity: 1; transform: translate(var(--ck-tip-dx), 0); }
@media (hover: hover) and (pointer: fine) {
  .ck :hover > .ck-tip { opacity: 1; transform: translate(var(--ck-tip-dx), 0); transition-delay: 220ms; }
}

/* =====================================================================
   Chips: Violet's badges (genre/decade, players, live round, counter)
   ===================================================================== */
.ck .ck-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: #F0EBFF;
  color: #4A1FC2;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.ck .ck-chip-emoji { font-size: 14px; line-height: 1; font-family: var(--ck-font), 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.ck .ck-chip .ck-glyph { width: 15px; height: 15px; }
.ck .ck-chip--count { background: #E6EDFF; color: #2140CC; padding-left: 8px; }
.ck .ck-chip--live { background: #D91E3C; color: #fff; box-shadow: 0 2px 0 #8E0B22; padding-left: 9px; }
.ck .ck-chip--dark { flex: none; gap: 7px; height: 32px; padding: 0 13px; background: var(--ck-violet-deep); color: #fff; font-size: 13px; line-height: 1.4; }
.ck .ck-dot {
  display: block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #3DFF8A;
  box-shadow: 0 0 0 3px rgba(61, 255, 138, .25);
  animation: ck-blip 1.6s ease-in-out infinite;
}
.ck .ck-chip--live .ck-dot { width: 7px; height: 7px; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }

/* =====================================================================
   Field label pill, inked text field, marker highlight
   ===================================================================== */
.ck .ck-label {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ck-violet);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 0 #3A119E;
}
.ck .ck-label--float { position: absolute; top: -11px; left: 16px; z-index: 3; }
.ck .ck-label--error,
.ck .ck-field.is-invalid > .ck-label { background: #C8102E; color: #fff; box-shadow: 0 2px 0 #7E0A1C; }
.ck .ck-label--ok { background: #0B7A36; color: #fff; box-shadow: 0 2px 0 #064A20; }

.ck .ck-field { position: relative; --ck-ink-fill: var(--ck-well); --ck-ink-width: 2.4; --ck-ink-shade: .28; }
.ck .ck-field:focus-within { --ck-ink-fill: #fff; --ck-ink-width: 3; outline: 3px solid var(--ck-focus); outline-offset: 3px; border-radius: 18px; }
.ck .ck-field.is-invalid { --ck-ink-fill: #FFEFF4; --ck-ink-stroke: var(--ck-red); }
.ck .ck-input {
  display: block;
  width: 100%;
  height: 58px;
  padding: 6px 18px 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ck-ink);
  font-size: 19px;
  font-weight: 600;
  outline: none;
}
.ck .ck-input:focus-visible { outline: none; }

/* Marker highlight (Vinyle): a tilted, uneven felt-pen band behind the lower half. */
.ck .ck-hl {
  position: relative;
  z-index: 0;
  padding: 0 0.06em;
  background: none;
  color: inherit;
  white-space: nowrap;
}
.ck .ck-hl::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -0.1em;
  right: -0.12em;
  top: 0.46em;
  bottom: 0.02em;
  border-radius: 0.18em 0.5em 0.24em 0.6em;
  background: var(--ck-hl, var(--ck-yellow));
  transform: rotate(-1.6deg);
}
.ck .ck-hl--pink { --ck-hl: var(--ck-pink-soft); }
.ck .ck-hl--yellow { --ck-hl: var(--ck-yellow); }
.ck .ck-hl--mint { --ck-hl: var(--ck-mint-soft); }
.ck .ck-hl--blue { --ck-hl: var(--ck-blue-soft); }

/* =====================================================================
   Avatars (avatar()) and stacks
   ===================================================================== */
.ck .ck-av {
  position: relative;
  display: block;
  flex: none;
  width: var(--ck-av-size, 40px);
  height: var(--ck-av-size, 40px);
  border-radius: 50%;
}
.ck .ck-av .ck-av-art { width: 100%; height: 100%; }
.ck .ck-av--me { box-shadow: 0 0 0 3px var(--ck-yellow), 0 0 0 5.5px var(--ck-ink); }
.ck .ck-av--host { box-shadow: 0 0 0 3px var(--ck-pink), 0 0 0 5.5px var(--ck-ink); }
.ck .ck-av-tag {
  position: absolute;
  left: 50%;
  bottom: -11px;
  translate: -50% 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ck-ink);
  color: var(--ck-yellow);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ck .ck-av-fig { display: inline-grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; }
.ck .ck-av-name {
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ck-ink-2);
  text-align: center;
}
.ck .ck-av-fig > .ck-av--me + .ck-av-name,
.ck .ck-av-fig > .ck-av--host + .ck-av-name { margin-top: 4px; color: var(--ck-ink); }
.ck .ck-av-fig > .ck-av--tagged + .ck-av-name { margin-top: 10px; }

.ck .ck-stack { display: flex; align-items: center; --ck-av-size: 32px; }
.ck .ck-stack > * + * { margin-left: var(--ck-stack-overlap, -9px); }
.ck .ck-stack > .ck-av:not(.ck-av--me):not(.ck-av--host) { box-shadow: 0 0 0 var(--ck-stack-ring, 2.5px) #fff; }
.ck .ck-stack-more {
  position: relative;
  display: grid;
  place-items: center;
  min-width: var(--ck-av-size);
  height: var(--ck-av-size);
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ck-yellow);
  color: var(--ck-ink);
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.3px var(--ck-ink);
  font-size: 12.5px;
  font-weight: 600;
}

/* =====================================================================
   Dialogs (dialog()): full-screen <dialog>, dimmed backdrop, inked panel
   ===================================================================== */
.ck .ck-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 72px 20px 36px;
  border: 0;
  background: transparent;
  color: var(--ck-ink);
  font-family: var(--ck-font);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.ck .ck-dialog[open] { display: grid; place-items: center; }
.ck .ck-dialog::backdrop {
  background: rgba(27, 27, 27, .74);
  -webkit-backdrop-filter: saturate(.3);
  backdrop-filter: saturate(.3);
  animation: ck-fade 200ms ease-out both;
}
.ck .ck-dialog.is-closing::backdrop { animation: ck-fade-out 170ms ease-out both; }
.ck .ck-dialog-panel {
  position: relative;
  width: min(560px, 100%);
  padding: 28px 28px 26px;
  text-align: center;
  --ck-ink-fill: #fff;
  --ck-ink-width: 3.6;
  --ck-ink-shade: .28;
  animation: ck-pop-in 260ms var(--ck-ease) both;
}
.ck .ck-dialog.is-closing .ck-dialog-panel { animation: ck-pop-out 170ms var(--ck-ease) both; }
.ck .ck-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2.4px solid var(--ck-ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ck-ink);
  box-shadow: var(--ck-shadow-sm);
  cursor: pointer;
  transition: transform 120ms var(--ck-ease);
}
.ck .ck-dialog-close .ck-glyph { width: 20px; height: 20px; }
.ck .ck-dialog-close:active { transform: translate(1px, 2px) scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .ck .ck-dialog-close:hover { background: var(--ck-yellow); }
}
@media (max-width: 699px) {
  .ck .ck-dialog { padding: 72px 16px 32px; }
  .ck .ck-dialog-panel { padding: 26px 18px 22px; }
}

/* =====================================================================
   Toast, entrance, nudge
   ===================================================================== */
/* Sized to its content (max-content): centred with left:50%, an auto width would only get
   half the viewport and wrap short messages. Wraps only past the page gutters (20 px each
   side; 16 px on phones). */
.ck .ck-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 70;
  width: max-content;
  max-width: calc(100vw - 40px);
  padding: 12px 20px;
  overflow-wrap: break-word;
  border-radius: 999px;
  background: var(--ck-ink);
  color: var(--ck-yellow);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 0 0 3px #fff, 4px 5px 0 3px var(--ck-ink);
  opacity: 0;
  transform: translate(-50%, 10px) scale(.96);
  transition: opacity 180ms var(--ck-ease), transform 220ms var(--ck-ease);
  pointer-events: none;
}
.ck .ck-toast:empty { visibility: hidden; }
.ck .ck-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 699px) {
  .ck .ck-toast { max-width: calc(100vw - 32px); }
}

/* Entrance: rise + fade, ease-out, 300 ms, from scale .97. */
.ck .ck-in { animation: ck-rise 300ms var(--ck-ease) both; animation-delay: var(--ck-delay, 0ms); }
.ck .ck-shake { animation: ck-shake 280ms var(--ck-ease) both; }

/* =====================================================================
   Keyframes
   ===================================================================== */
@keyframes ck-spin { to { transform: rotate(360deg); } }
@keyframes ck-rays {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-180deg) scale(1.08); }
  100% { transform: rotate(-360deg) scale(1); }
}
@keyframes ck-drift {
  0% { opacity: 0; transform: translateY(14px) scale(.5) rotate(0deg); }
  25% { opacity: .9; }
  50% { opacity: 1; transform: translateY(-10px) scale(1) rotate(45deg); }
  80% { opacity: .7; }
  100% { opacity: 0; transform: translateY(-34px) scale(.5) rotate(90deg); }
}
@keyframes ck-twinkle {
  0%, 100% { opacity: .55; transform: scale(.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.1) rotate(25deg); }
}
@keyframes ck-rise { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ck-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ck-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ck-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ck-pop-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ck-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.95); } }
@keyframes ck-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
@keyframes ck-blip { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes ck-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* =====================================================================
   Reduced motion: still background, fades only
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ck .ck-bg-rings,
  .ck .ck-bg-rays,
  .ck .ck-star--twinkle,
  .ck .ck-dot,
  .ck .ck-shake { animation: none; }
  .ck .ck-star--drift { animation: none; opacity: .55; }
  .ck .ck-in,
  .ck .ck-dialog-panel { animation-name: ck-fade; animation-timing-function: ease-out; }
  .ck .ck-dialog.is-closing .ck-dialog-panel { animation-name: ck-fade-out; }
  .ck .ck-spinner { animation: ck-pulse 1s ease-in-out infinite; border-right-color: currentColor; }
  .ck .ck-btn:not(:disabled):not([aria-disabled="true"]):active :is(.ck-ink-body, .ck-ink-shade, .ck-btn-gloss, .ck-btn-label) { transform: none; }
  .ck .ck-btn:not(:disabled):not([aria-disabled="true"]):active { opacity: .82; }
  .ck .ck-tip,
  .ck :focus-visible > .ck-tip { transform: translate(var(--ck-tip-dx), 0); }
  .ck .ck-toast { transform: translate(-50%, 0); }
  .ck .ck-dialog-close:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .ck .ck-btn:not(:disabled):not([aria-disabled="true"]):hover:not(:active) :is(.ck-ink-body, .ck-ink-shade, .ck-btn-gloss, .ck-btn-label) { transform: none; }
}