.cts {
  --cts-quote: clamp(2.1rem, 1.3rem + 3.8vw, 4.5rem);
  --cts-big: clamp(1.9rem, 1.35rem + 2.9vw, 3.75rem);
  --cts-law: min(var(--fs-h1), 8.4vw);
  --cts-light: 56px;
}
@supports (height: 1svh) {
  .cts {
    --cts-quote: clamp(2rem, min(1.3rem + 3.8vw, 7.6svh), 4.5rem);
    --cts-big: clamp(1.75rem, min(1.35rem + 2.9vw, 7svh), 3.75rem);
  }
}
@media (max-width: 759px) { .cts { --cts-light: 44px; } }

.cts-sky { display: none; }
.js .cts-sky { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease-out); }
.js .cts-sky.is-on { opacity: 1; }
.cts-canvas { display: block; width: 100%; height: 100vh; height: 100lvh; }

.cts-beat {
  display: grid; align-content: center;
  min-height: calc(100vh - var(--head-h)); min-height: calc(100svh - var(--head-h));
  padding-block: var(--space-8);
}

.cts-beat > .ra-wrap, .cts-law__stage > .ra-wrap { width: 100%; }
.cts-lines { display: grid; gap: var(--space-5); justify-items: start; }
.cts-lines > * { margin: 0; }

.cts-big {
  width: fit-content; max-width: 21ch;
  font: 600 var(--cts-big)/1.12 var(--font-display); letter-spacing: var(--tracking-display);
  color: var(--text); text-wrap: balance;
}

.cts-next {
  width: fit-content; max-width: 30ch;
  font: 500 var(--fs-h2)/1.3 var(--font-display); letter-spacing: var(--tracking-display);
  color: var(--text-muted); text-wrap: balance;
}
.cts-next--strong { color: var(--text); }

.cts-beat--open { align-content: stretch; padding-block: var(--space-4) var(--space-6); }
.cts-open { display: grid; grid-template-rows: auto 1fr auto; row-gap: var(--space-6); }
.cts-head { display: grid; gap: var(--space-2); justify-items: start; }
.cts-head > * { margin: 0; }
.cts-back {
  display: inline-flex; align-items: center; gap: 1ch; min-height: 44px; margin-block-end: var(--space-2);
  color: var(--link); text-decoration: none; font: 500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing: var(--tracking-mono);
}
.cts-back__a { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
[dir="rtl"] .cts-back__a { transform: scaleX(-1); }
@media (hover: hover) {
  .cts-back:hover .cts-back__t { text-decoration: underline; text-underline-offset: 3px; }
  .cts-back:hover .cts-back__a { transform: translateX(-3px); }
  [dir="rtl"] .cts-back:hover .cts-back__a { transform: scaleX(-1) translateX(-3px); }
}
.cts-kicker { color: var(--text-muted); }
.cts-title {
  max-width: 44ch; font: 600 var(--fs-h3)/1.35 var(--font-display); letter-spacing: var(--tracking-display);
  color: var(--text); text-wrap: balance;
}
.cts-friend { align-self: center; margin: 0; display: grid; gap: var(--space-6); justify-items: start; }
.cts-quote { margin: 0; }
.cts-quote p {
  margin: 0; width: fit-content; max-width: 17ch;
  font: 600 var(--cts-quote)/1.08 var(--font-display); letter-spacing: var(--tracking-display);
  color: var(--text); text-wrap: balance;
}

@media (min-width: 760px) { .cts-quote p { text-indent: -.42em; } }
.cts-friend figcaption { margin: 0; }

.cts-cue { justify-self: start; }
.cts-cue__in { margin: 0; display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.cts-cue__in::after { content: ""; width: 1px; height: 32px; background: var(--border); }

.cts-chat {
  margin: 0; width: 100%; max-width: 440px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-tint), var(--surface); box-shadow: var(--elevation-2);
}
.cts-chat__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border);
}
.cts-chat__face { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); }
.cts-chat__face::after { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--link); }
.cts-chat__who { display: grid; gap: 2px; }
.cts-chat__name { font: 600 var(--fs-body)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--text); }
.cts-chat__on { display: inline-flex; align-items: center; gap: 6px; }
.cts-chat__on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--link); }
.cts-chat__log { display: grid; gap: var(--space-3); padding: var(--space-4); }
.cts-turn { position: relative; display: grid; }
.cts-msg {
  margin: 0; max-width: 88%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  font-size: var(--fs-body); line-height: 1.5; text-wrap: pretty;
}

.cts-msg--me { justify-self: end; background: var(--link); color: var(--bg-deep); border-end-end-radius: var(--radius-sm); }
.cts-msg--agent { justify-self: start; background: var(--surface-2); color: var(--text); border-end-start-radius: var(--radius-sm); }

@media (max-width: 400px) {
  .cts-chat__head { padding-block: var(--space-2); }
  .cts-chat__log { gap: var(--space-2); padding: var(--space-3); }
  .cts-msg { max-width: 92%; padding: var(--space-2) var(--space-3); font-size: .9375rem; line-height: 1.45; }
}

.cts-typing { display: none; }

.cts-law__stage { display: grid; align-content: center; min-height: calc(100vh - var(--head-h)); min-height: calc(100svh - var(--head-h)); padding-block: var(--space-8); }
.cts-law__line {
  margin: var(--space-5) 0 0; max-width: 20ch;
  font: 600 var(--cts-law)/var(--lh-head) var(--font-display); letter-spacing: var(--tracking-display);
  color: var(--text); text-wrap: balance;
}

.cts-law__grey { color: var(--text-muted); }

.cts-law__end {
  padding-block-end: .06em;
  background-image: linear-gradient(90deg, var(--ra-g-magenta) 0%, var(--ra-g-violet) 16%, var(--ra-g-indigo) 32%, var(--ra-g-blue) 50%, transparent 50%);
  background-repeat: no-repeat; background-size: 200% max(2px, .05em); background-position: 0 100%;
  transition: background-position 900ms var(--ease-out);
}
.cts-law.is-live:not(.is-done) .cts-law__end { background-position: 102% 100%; }

.cts-slot { display: inline-grid; justify-items: start; }
.cts-slot > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out); }
.cts-slot > .is-before { opacity: 0; transform: translateY(-.34em); }
.cts-slot > .is-after { opacity: 0; transform: translateY(.34em); }
.cts-law.is-live .cts-law__l1 { display: block; }
.cts-law.no-trans .cts-law__end, .cts-law.no-trans .cts-slot > span { transition: none; }

@media (min-height: 560px) {
  .motion-ok .cts-law__track { height: 220vh; height: 220svh; }
  .motion-ok .cts-law__stage {
    position: sticky; top: var(--head-h);
    height: calc(100vh - var(--head-h)); height: calc(100svh - var(--head-h)); min-height: 0; padding-block: 0;
  }
}
@media (min-height: 560px) and (max-width: 759px) { .motion-ok .cts-law__track { height: 200vh; height: 200svh; } }

.cts-three { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.cts-three li { display: grid; grid-template-columns: var(--cts-light) minmax(0, 1fr); align-items: center; column-gap: var(--space-4); }
.cts-three__light { position: relative; width: var(--cts-light); height: var(--cts-light); }
.cts-three__light::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%;
  background: var(--link); box-shadow: 0 0 0 6px var(--accent-soft);
}
.cts-lights .cts-three__light::before { opacity: 0; }
.cts-three__txt { display: grid; gap: var(--space-1); }
.cts-three__no { color: var(--link); }
.cts-three__t { font: 600 var(--cts-big)/1.12 var(--font-display); letter-spacing: var(--tracking-display); color: var(--text); }

.cts-kit { margin-block-start: var(--space-3); }
.cts-lead { width: fit-content; max-width: 40ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }

.cts-end { padding-block: var(--space-9) var(--space-8); }
.cts-end .hairline { margin-block-end: var(--space-8); }

.cts-end__in { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "video" "cta"; }
.cts-end__head { grid-area: head; display: grid; gap: var(--space-4); justify-items: start; }
.cts-end__head > * { margin: 0; }
.cts-end__head .ra-h2 { text-wrap: balance; }
.cts-end__head .ra-lead { max-width: 40ch; text-wrap: pretty; }
.cts-end .video { grid-area: video; }
.cts-end__wa { grid-area: cta; margin: var(--space-2) 0 0; }
@media (min-width: 900px) {
  .cts-end__in { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-areas: "head video" "cta video"; column-gap: var(--space-8); row-gap: var(--space-6); }
  .cts-end__head { align-self: end; }
  .cts-end__wa { align-self: start; margin: 0; }
}
@media (max-width: 519px) { .cts-end__wa .ra-btn-wrap, .cts-end__wa .ra-btn { width: 100%; } }
@media (max-width: 759px) { .cts-end { padding-block: var(--space-8) var(--space-7); } }

@keyframes cts-show { to { opacity: 1; transform: none; } }
.motion-ok .cts [data-in], .motion-ok .cts [data-words] { opacity: 0; transform: translateY(.3em); animation: cts-show 1ms linear 3.5s forwards; }
.cts-live .cts [data-in], .cts-live .cts [data-words] { animation: none; }
.cts-live .cts [data-in] { transition: opacity 640ms var(--ease-out), transform 760ms var(--ease-out); transition-delay: var(--at, 0ms); }
.cts-live .cts .is-on [data-in] { opacity: 1; transform: none; }
.cts-live .cts [data-words].is-split { opacity: 1; transform: none; }

.cts-w { display: inline-block; text-indent: 0; }
.cts-live .cts-w {
  opacity: 0; transform: translateY(.32em);
  transition: opacity 560ms var(--ease-out), transform 720ms var(--ease-out);
  transition-delay: calc(var(--at, 0ms) + var(--k, 0) * var(--step, 90ms));
}
.cts-live .is-on .cts-w { opacity: 1; transform: none; }

.cts-live .is-now [data-in], .cts-live .is-now .cts-w { transition-delay: 0ms; }

.cts-live .cts-cue { transition: opacity 400ms var(--ease-out); }
.cts-live.cts-moved .cts-cue { opacity: 0; }

.cts-live .cts-typing {
  display: inline-flex; gap: 5px; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  padding: 14px var(--space-4); border-radius: var(--radius-md); border-end-start-radius: var(--radius-sm);
  background: var(--surface-2); opacity: 0;
}
.cts-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.cts-live .is-on .cts-typing { animation: cts-type var(--for, 900ms) linear var(--at, 0ms) both; }
.cts-live .is-on .cts-typing i { animation: cts-dot 450ms ease-in-out var(--at, 0ms) 2 alternate both; }
.cts-live .is-on .cts-typing i:nth-child(2) { animation-delay: calc(var(--at, 0ms) + 150ms); }
.cts-live .is-on .cts-typing i:nth-child(3) { animation-delay: calc(var(--at, 0ms) + 300ms); }
.cts-live .is-now .cts-typing { animation: none; }
@keyframes cts-type { 0% { opacity: 0; transform: translateY(6px); } 16%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes cts-dot { from { opacity: .3; } to { opacity: 1; } }

.cts-progress { display: none; }

.motion-ok .cts-progress { display: block; position: fixed; z-index: 61; inset-inline: 0; top: calc(var(--head-h) - 1px); height: 1px; pointer-events: none; }
.cts-progress span { display: block; height: 100%; background: var(--link); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .cts-progress span { transform-origin: 100% 50%; }
html.is-menu .cts-progress { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .cts-back__a, .js .cts-sky { transition: none; } }