.ck-banner {
  position: fixed;
  z-index: 300;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(545px, calc(100vw - 32px));
  transform: translateY(14px);
  opacity: 0;
  transition: opacity .28s var(--ease-out), transform .32s var(--ease-out);

  background: var(--colors-bg-container);
  border: 1px solid var(--colors-border-default);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 32px rgba(11, 10, 16, .16);
}
.ck-banner.is-in { opacity: 1; transform: none; }

.ck-banner-in {
  display: flex; align-items: center; gap: 18px;
  padding: 9px 10px 9px 22px;
}

.ck-banner-copy {
  margin: 0;
  flex: 1 1 auto;
  font-size: 13.5px; line-height: 1.35;
  color: var(--colors-text-default);
  
  text-wrap: balance;
}

.ck-banner-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }

.ck-link {
  font-size: 13px; font-weight: 700;
  color: var(--colors-quiet-link);
  text-decoration: underline; text-underline-offset: 2px;
  white-space: nowrap;
}
.ck-link:hover { color: var(--sl-violet-800); }

.ck-btn {
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out);
}

.ck-btn--go { background: var(--sl-cyan-700); color: #FFF; }
.ck-btn--go:hover { background: var(--sl-cyan-800); }

.ck-btn--quiet { background: transparent; border-color: var(--colors-border-default); color: var(--colors-text-default); }
.ck-btn--quiet:hover { border-color: var(--sl-ink); }

.ck-btn--ghost { background: transparent; color: var(--colors-text-subtle); padding-inline: 12px; }
.ck-btn--ghost:hover { color: var(--colors-text-default); }

.ck-btn--sm { padding: 8px 20px; font-size: 13.5px; }

.ck-btn:focus-visible,
.ck-sw input:focus-visible + .ck-sw-track { outline: 3px solid var(--sl-cyan-500); outline-offset: 2px; }

@media (max-width: 620px) {
  
  .ck-banner {
    left: 10px; right: 10px; width: auto; border-radius: 20px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }
  .ck-banner-in { flex-direction: column; align-items: stretch; gap: 13px; padding: 16px 16px 14px; }
  .ck-banner-copy { font-size: 15px; line-height: 1.4; text-wrap: pretty; }

  .ck-banner-acts { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .ck-banner-acts .ck-btn {
    width: 100%; min-height: 46px; padding: 12px 20px; font-size: 15px;
  }
  .ck-banner-acts .ck-link {
    text-align: center; font-size: 13px; padding: 2px 0;
    color: var(--colors-text-subtle);
  }
}

.ck-modal { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 18px; }
.ck-scrim {
  position: absolute; inset: 0; background: rgba(11, 10, 16, .5);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.ck-modal.is-in .ck-scrim { opacity: 1; }

.ck-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  padding: clamp(24px, 3vw, 34px);
  background: var(--colors-bg-container);
  border-radius: var(--radius-panel);
  box-shadow: 0 26px 70px rgba(11, 10, 16, .3);
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .3s var(--ease-out), transform .32s var(--ease-out);
}
.ck-modal.is-in .ck-panel { opacity: 1; transform: none; }

.ck-title {
  margin: 0;
  font-family: var(--font-body);          
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--colors-text-default);
}
.ck-lede { margin: 9px 0 0; font-size: var(--text-small); line-height: 1.6; color: var(--colors-text-subtle); }

.ck-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--colors-border-subtle);
}
.ck-row:first-of-type { margin-top: 12px; border-top: 1px solid var(--colors-border-subtle); }
.ck-row-txt { flex: 1 1 auto; }
.ck-row-name { display: block; font-size: 15px; font-weight: 800; color: var(--colors-text-default); }
.ck-row-blurb { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--colors-text-subtle); }

.ck-always {
  flex: 0 0 auto; align-self: center;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--colors-text-muted);
}

.ck-sw { flex: 0 0 auto; align-self: center; position: relative; display: inline-block; cursor: pointer; }
.ck-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ck-sw-track {
  display: block; width: 46px; height: 27px; border-radius: 999px;
  background: var(--sl-neutral-300);
  transition: background .22s var(--ease-out);
}
.ck-sw-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: #FFF;
  box-shadow: 0 1px 3px rgba(11, 10, 16, .3);
  transition: transform .24s var(--ease-out);
}
.ck-sw input:checked + .ck-sw-track { background: var(--sl-cyan-600); }
.ck-sw input:checked + .ck-sw-track::after { transform: translateX(19px); }

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

.ck-acts { display: flex; gap: 10px; margin-top: 22px; }
.ck-acts .ck-btn { flex: 1 1 0; text-align: center; }

.ck-x {
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  font-size: 24px; line-height: 1; color: var(--colors-text-muted);
  cursor: pointer;
}
.ck-x:hover { background: var(--colors-bg-subtle); color: var(--colors-text-default); }

body.ck-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ck-banner, .ck-scrim, .ck-panel, .ck-sw-track, .ck-sw-track::after { transition: none; }
}

.ck-table-wrap { overflow-x: auto; margin-top: 18px; }
.ck-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 540px; }
.ck-table th, .ck-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--colors-border-subtle); vertical-align: top; }
.ck-table th { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--colors-text-muted); }
.ck-table td { color: var(--colors-text-subtle); line-height: 1.5; }
.ck-table td:first-child { color: var(--colors-text-default); font-weight: 700; }

.ck-todo {
  display: inline-block;
  padding: 1px 8px; border-radius: 5px;
  background: #FDECEC; color: var(--sl-error-on-paper);
  font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
}

.ck-page-panel {
  margin: 26px 0 0;
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 28px);
  background: var(--colors-bg-container);
  border: 1px solid var(--colors-border-default);
  border-radius: var(--radius-panel);
}

.ck-page-panel .ck-row:first-of-type { margin-top: 0; border-top: 0; }
.ck-page-panel .ck-row:last-of-type { border-bottom: 0; }

.ck-page-panel .ck-acts { margin-top: 20px; }
@media (max-width: 560px) { .ck-page-panel .ck-acts { flex-direction: column; } }

.ck-saved {
  margin: 12px 0 0;
  font-size: 13px; font-weight: 700;
  color: var(--sl-cyan-800);
}

.ck-noscript {
  margin: 0; font-size: var(--text-small); line-height: 1.6;
  color: var(--colors-text-subtle);
}