.cts-alp {
  --cts-alp-accent: #0c66e4;
  --cts-alp-accent-dark: #0747a6;
  --cts-alp-border: #dfe1e6;
  --cts-alp-surface: #ffffff;
  --cts-alp-soft: #e9f2ff;
  --cts-alp-text: #172b4d;
  --cts-alp-muted: #44546f;
  background: var(--cts-alp-surface);
  border: 1px solid var(--cts-alp-border);
  border-radius: .8rem;
  color: var(--cts-alp-text);
  font-family: inherit;
  max-width: 100%;
  overflow: hidden;
}

.cts-alp--green { --cts-alp-accent: #216e4e; --cts-alp-accent-dark: #164b35; --cts-alp-soft: #dcfff1; }
.cts-alp--charcoal { --cts-alp-accent: #3b4351; --cts-alp-accent-dark: #1d2125; --cts-alp-soft: #f1f2f4; }

.cts-alp__header { padding: clamp(1rem, 3vw, 1.75rem); }
.cts-alp__eyebrow { color: var(--cts-alp-accent-dark); font-size: .78rem; font-weight: 800; letter-spacing: .09em; margin: 0 0 .4rem; text-transform: uppercase; }
.cts-alp h2 { color: var(--cts-alp-text); font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.2; margin: 0 0 .6rem; }
.cts-alp__description { color: var(--cts-alp-muted); line-height: 1.6; }
.cts-alp__description > :first-child { margin-top: 0; }
.cts-alp__description > :last-child { margin-bottom: 0; }
.cts-alp__description a { color: var(--cts-alp-accent-dark); font-weight: 700; }

.cts-alp__viewer { background: #536784; height: var(--cts-alp-viewer-height, 640px); min-height: 360px; width: 100%; }
.cts-alp__object { border: 0; display: block; height: 100%; width: 100%; }
.cts-alp__object p { background: var(--cts-alp-soft); color: var(--cts-alp-text); margin: 0; padding: 1.25rem; }
.cts-alp__object a { color: var(--cts-alp-accent-dark); font-weight: 700; }
.cts-alp__card { align-items: center; background: var(--cts-alp-soft); display: flex; justify-content: center; min-height: 12rem; padding: 2rem; }
.cts-alp__card span { background: var(--cts-alp-accent); border-radius: .55rem; color: #fff; font-size: 1.25rem; font-weight: 800; letter-spacing: .06em; padding: 1.1rem .85rem; }

.cts-alp__actions { display: flex; flex-wrap: wrap; gap: .75rem; padding: clamp(1rem, 3vw, 1.5rem); }
.cts-alp__button { border: 2px solid var(--cts-alp-accent); border-radius: .45rem; display: inline-flex; font-weight: 700; justify-content: center; line-height: 1.25; min-height: 44px; padding: .7rem 1rem; text-decoration: none; }
.cts-alp__button--primary { background: var(--cts-alp-accent); color: #fff; }
.cts-alp__button--secondary { background: transparent; color: var(--cts-alp-accent-dark); }
.cts-alp__button--primary:hover { background: var(--cts-alp-accent-dark); border-color: var(--cts-alp-accent-dark); color: #fff; }
.cts-alp__button--secondary:hover { background: var(--cts-alp-soft); color: var(--cts-alp-accent-dark); }
.cts-alp__button:focus-visible,
.cts-alp__description a:focus-visible,
.cts-alp__object a:focus-visible { outline: 3px solid #ffab00; outline-offset: 3px; }
.cts-alp__note { border-top: 1px solid var(--cts-alp-border); color: var(--cts-alp-muted); font-size: .9rem; margin: 0; padding: 1rem clamp(1rem, 3vw, 1.5rem); }

@media (max-width: 480px) {
  .cts-alp__viewer { height: min(var(--cts-alp-viewer-height, 640px), 70vh); }
  .cts-alp__actions { flex-direction: column; }
  .cts-alp__button { width: 100%; }
}

@media (forced-colors: active) {
  .cts-alp,
  .cts-alp__button { border: 2px solid CanvasText; }
}