.sign-in-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100svh;
  color-scheme: light;
  background: #f7f8f8;
  color: #201b2b;
}
.sign-in-stage {
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 90px);
}
.sign-in-card { width: min(100%, 360px); }
.sign-in-card h1 {
  margin: 30px 0;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1;
  letter-spacing: -.06em;
}
.sign-in-card label { color: #585364; }
.sign-in-card input {
  min-height: 48px;
  border: 1px solid #d1d2db;
  border-radius: 13px;
  background: white;
  color: #201b2b;
  font-size: 16px;
}
.sign-in-card button {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  border-radius: 999px;
  color: #202719;
  background: #d9ff46;
}
.sign-in-error { color: #a51b31; margin-bottom: 14px; }
.workflow {
  display: grid;
  place-items: center;
  padding: clamp(26px, 5vw, 84px);
  background: radial-gradient(ellipse at 18% 12%, #daf6ee, transparent 60%),
    radial-gradient(ellipse at 92% 90%, #ded2fc, transparent 67%), #eeedf5;
}
.workflow-inner { width: min(100%, 520px); }
.workflow h2 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.5vw, 66px);
  line-height: .98;
  letter-spacing: -.06em;
}
.workflow-pause { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.workflow-pause input { width: auto; accent-color: #245d55; }
.workflow-steps { list-style: none; display: grid; gap: 10px; padding: 0; margin: 20px 0 0; }
.workflow-steps li {
  --phase: 0s;
  display: grid;
  grid-template-columns: minmax(75px, 27%) 1fr;
  align-content: center;
  column-gap: 15px;
  row-gap: 3px;
  min-height: 92px;
  border: 1px solid #fff;
  border-radius: 18px;
  padding: 12px;
  background: #ffffffad;
  box-shadow: 0 10px 24px #30254510;
  animation: active-step 9s var(--phase) infinite;
}
.workflow-steps li:nth-child(2) { --phase: -6s; }
.workflow-steps li:nth-child(3) { --phase: -3s; }
.workflow-steps strong { align-self: end; font-size: 16px; }
.workflow-steps p { margin: 0; color: #554f63; font-size: 13px; line-height: 1.35; }
.demo {
  grid-row: span 2;
  position: relative;
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 58px;
  padding: 8px;
  border-radius: 10px;
  overflow: hidden;
  background: #262338;
}
.demo i { display: block; border-radius: 4px; }
.brief-demo i {
  height: 4px;
  width: 85%;
  transform-origin: left;
  background: #b3e4d9;
  animation: write-line 9s var(--phase) infinite;
}
.brief-demo i:nth-child(2) { width: 100%; animation-delay: .25s; }
.brief-demo i:nth-child(3) { width: 55%; animation-delay: .5s; }
.frames-demo { grid-template-columns: repeat(3, 1fr); gap: 3px; }
.frames-demo i {
  height: 30px;
  background: linear-gradient(155deg,#c9b8f5 47%,#66528c 49%);
  animation: frame-in 9s var(--phase) infinite;
}
.frames-demo i:nth-child(2) { background: linear-gradient(25deg,#245e60 42%,#aee7dd 45%); animation-delay: -5.75s; }
.frames-demo i:nth-child(3) { background: linear-gradient(155deg,#dbeab4 36%,#64815b 39%); animation-delay: -5.5s; }
.timeline-demo > div { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 3px; }
.timeline-demo i { height: 15px; background: #afddcf; }
.timeline-demo i:nth-child(2) { background: #d9ff46; }
.timeline-demo i:nth-child(3) { background: #c9b8f5; }
.timeline-demo b {
  position: absolute;
  inset: 10px auto 10px 8px;
  width: 2px;
  background: white;
  animation: playhead 9s var(--phase) infinite;
}
@keyframes active-step {
  5%, 30% { background: #fff; border-color: #63887d; box-shadow: 0 12px 30px #30254524; }
  0%, 36%, 100% { background: #ffffffad; border-color: #fff; }
}
@keyframes write-line { 0% { transform: scaleX(.14); } 24%, 100% { transform: scaleX(1); } }
@keyframes frame-in { 0% { opacity: .45; transform: translateY(7px); } 23%, 100% { opacity: 1; transform: none; } }
@keyframes playhead { 0% { left: 8px; } 32%, 100% { left: calc(100% - 10px); } }
.workflow:has(.workflow-pause input:checked) * { animation-play-state: paused; }
@media (max-width: 720px) {
  .sign-in-shell { grid-template-columns: 1fr; }
  .sign-in-stage { padding-block: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow * { animation: none !important; }
  .workflow-pause { display: none; }
}