.cc-contrast-first-look {
  color: #e9f4f5;
  background: linear-gradient(150deg, #112b36, #20424a);
  border: 1px solid #678c91;
  border-radius: 16px;
  padding: clamp(.78rem, 2vw, 1.25rem);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 12px 30px rgba(0,20,27,.16);
  overflow: hidden;
}
.cc-contrast-first-look * { box-sizing: border-box; }
.cc-contrast-kicker { margin: 0 0 .3rem; color: #bce5e2; font: 800 .66rem/1.3 system-ui, sans-serif; letter-spacing: .15em; }
.cc-contrast-first-look h4 { margin: 0 0 .6rem; color: white; font-size: clamp(1.05rem, 2vw, 1.34rem); }
.cc-contrast-prompt { max-width: 75ch; margin: 0 0 .85rem; line-height: 1.44; }
.cc-contrast-button {
  appearance: none;
  background: #ecf6f4;
  color: #163c42;
  border: 1px solid #a8c5c8;
  border-radius: 9px;
  padding: .55rem .7rem;
  font: 750 .82rem/1.32 system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.cc-contrast-button:hover, .cc-contrast-button:focus-visible { background: white; border-color: #45c7bd; }
.cc-contrast-button:focus-visible { outline: 3px solid #ffdc84; outline-offset: 2px; }
.cc-contrast-button[aria-pressed="true"] { color: #06363a; background: #5bd8cc; border-color: #5bd8cc; }
.cc-contrast-leads, .cc-contrast-actions, .cc-contrast-references { display: flex; flex-wrap: wrap; gap: .5rem; margin: .62rem 0; }
.cc-contrast-leads .cc-contrast-button { min-width: 3.3rem; text-align: center; }
.cc-contrast-compare, .cc-contrast-clock, .cc-contrast-axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .62rem;
  margin: .72rem 0;
}
.cc-contrast-record, .cc-contrast-clock-lane, .cc-contrast-axis {
  min-width: 0;
  background: #eef7f6;
  color: #173d43;
  border: 1px solid #c0d9d9;
  border-radius: 11px;
  padding: .75rem;
}
.cc-contrast-record { border-top: 4px solid #80c2b9; }
.cc-contrast-record:first-child { border-top-color: #a6b8d1; }
.cc-contrast-record small, .cc-contrast-clock-lane > small, .cc-contrast-axis small {
  display: block; color: #436a70; font: 800 .66rem/1.3 system-ui, sans-serif; letter-spacing: .08em; margin-bottom: .4rem;
}
.cc-contrast-record strong, .cc-contrast-axis strong { display: block; font-size: .9rem; line-height: 1.38; }
.cc-contrast-record p, .cc-contrast-axis p { margin: .52rem 0 0; font-size: .8rem; line-height: 1.38; }
.cc-contrast-axis { display: flex; flex-direction: column; gap: .55rem; border-top: 4px solid #93c0ce; }
.cc-contrast-axis.is-circulation { border-top-color: #dca9a4; }
.cc-contrast-axis .cc-contrast-button { margin-top: auto; }
.cc-contrast-clock-card { background: white; border: 1px solid #ccdede; border-left: 4px solid #85bdb6; border-radius: 9px; padding: .62rem; margin-top: .5rem; }
.cc-contrast-clock-card span { display: block; color: #476b70; font-size: .7rem; font-weight: 800; }
.cc-contrast-clock-card strong { display: block; margin: .25rem 0 .5rem; font-size: .86rem; line-height: 1.34; }
.cc-contrast-clock-card p { font-size: .8rem; line-height: 1.38; margin: .55rem 0 0; }
.cc-contrast-feedback { background: #e1f1ee; color: #173a40; border: 1px solid #a4cfc9; border-radius: 10px; margin-top: .75rem; padding: .72rem; line-height: 1.43; }
.cc-contrast-feedback strong { display: block; margin-bottom: .3rem; }
.cc-contrast-feedback p { margin: .2rem 0; }
.cc-contrast-boundary { color: #c7dfde; font-size: .74rem; line-height: 1.4; margin: .72rem 0 0; }
@media (max-width: 420px) {
  .cc-contrast-first-look { padding: .72rem; border-radius: 12px; }
  .cc-contrast-compare, .cc-contrast-clock, .cc-contrast-axes { grid-template-columns: 1fr; }
  .cc-contrast-actions .cc-contrast-button { flex: 1 1 100%; }
}