/* The sample CT viewer on the home page. Every rule is under .ctdemo; fits 300 px to 560 px wide. */
.ctdemo { display: block; width: 100%; max-width: 560px; margin-inline: auto; font-family: var(--font, system-ui, sans-serif); color: var(--text, #2a3a4d); outline: none; }
.ctdemo:focus-visible { outline: 2px solid var(--primary, #1660c4); outline-offset: 4px; border-radius: 12px; }
.ctdemo__lightbox { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--lightbox, #05090e); border-radius: var(--radius-pic, 12px); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.ctdemo .ctdemo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ctdemo .ctdemo__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ctdemo .ctdemo__outline { fill: transparent; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: all; cursor: pointer; transition: fill 0.12s; }
.ctdemo .ctdemo__outline.is-active { fill: var(--line-dark); stroke-width: 2.25; }
.ctdemo .ctdemo__chip { position: absolute; transform: translate(-50%, -100%); padding: 4px 10px; border-radius: 999px; background: var(--chip-bg-strong); border: 1px solid var(--chip-line-strong); color: var(--on-dark-strong); font-size: 0.875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.ctdemo .ctdemo__chip.is-below { transform: translate(-50%, 0); }
.ctdemo .ctdemo__chip[hidden] { display: none; }
.ctdemo .ctdemo__bar { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.ctdemo .ctdemo__step { flex: none; width: 44px; height: 44px; padding: 0 0 4px; border: 1px solid var(--line-strong, #cdd6e0); border-radius: 10px; background: var(--card, #fff); color: var(--ink, #0f1b2a); font: 600 1.5rem/1 var(--font, system-ui, sans-serif); cursor: pointer; }
.ctdemo .ctdemo__step:hover { background: var(--primary-soft, #e8f0fb); }
.ctdemo .ctdemo__step:focus-visible { outline: 2px solid var(--primary, #1660c4); outline-offset: 2px; }
.ctdemo .ctdemo__range { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.ctdemo .ctdemo__range:focus-visible { outline: 2px solid var(--primary, #1660c4); outline-offset: 2px; border-radius: 8px; }
.ctdemo .ctdemo__range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line-strong, #cdd6e0); }
.ctdemo .ctdemo__range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line-strong, #cdd6e0); }
.ctdemo .ctdemo__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--primary, #1660c4); border: 3px solid var(--card); box-shadow: var(--shadow-thumb); }
.ctdemo .ctdemo__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--primary, #1660c4); border: 3px solid var(--card); box-shadow: var(--shadow-thumb); }
.ctdemo .ctdemo__foot { display: flex; justify-content: center; align-items: center; min-height: 22px; margin-top: 0; }
.ctdemo .ctdemo__count { margin: 0; font-size: 0.875rem; color: var(--muted, #5b6b7d); font-variant-numeric: tabular-nums; }
.ctdemo .ctdemo__credit { margin: 8px 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--muted, #5b6b7d); text-align: center; }
.ctdemo .ctdemo__link { color: var(--primary, #1660c4); font-weight: 600; white-space: nowrap; display: block; width: fit-content; margin: 0 auto; padding: 12px 0; }
.ctdemo .ctdemo__line { display: block; }
@media (max-width: 340px) { .ctdemo .ctdemo__step { width: 44px; } .ctdemo .ctdemo__chip { font-size: 0.8125rem; } }
@media (prefers-reduced-motion: reduce) { .ctdemo .ctdemo__outline { transition: none; } }

/* Loading: dark (the colour of the loaded picture) until the first frame paints, with a short line saying so.
   The sweep is the only motion; it stops for reduced motion. .is-failed keeps the dark box but stops the sweep. */
.ctdemo__loading { position: absolute; left: 10px; bottom: 10px; z-index: 2; margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--chip-line); color: var(--on-picture); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; pointer-events: none; }
.ctdemo .ctdemo__img:not([src]) { visibility: hidden; }
.ctdemo.is-loading .ctdemo__bar { position: relative; overflow: hidden; border-radius: 10px; background: var(--skeleton-fill); }
.ctdemo.is-loading .ctdemo__bar > *, .ctdemo.is-loading .ctdemo__foot, .ctdemo.is-loading .ctdemo__credit { visibility: hidden; }
.ctdemo .demo-ph::before, .ctdemo .demo-sk span::before, .ctdemo.is-loading .ctdemo__lightbox::before, .ctdemo.is-loading .ctdemo__bar::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, transparent 20%, var(--skeleton-sweep) 50%, transparent 80%); transform: translateX(-100%); animation: ctdemo-sweep 1.8s ease-in-out infinite; pointer-events: none; }
.ctdemo.is-failed *::before { animation: none; }
.ctdemo.is-failed .ctdemo__bar, .ctdemo.is-failed .ctdemo__foot { display: none; }
@keyframes ctdemo-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .ctdemo .demo-ph::before, .ctdemo .demo-sk span::before, .ctdemo.is-loading .ctdemo__lightbox::before, .ctdemo.is-loading .ctdemo__bar::before { animation: none; }
}