/* How It Works: "QUIZ-WORLD in five steps". A scroll-driven walkthrough with a small animation per step.
   Uses the page's own variables (--surface, --guide-accent). Animations start when a step scrolls into view and are off for reduced motion. */
.hs { padding: 24px 0 56px; }
.hs-head { max-width: 640px; margin: 0 0 28px; }
.hs-head h2 { margin: 0 0 8px; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.03em; }
.hs-head p { margin: 0; opacity: .8; }
.hs-track { position: relative; }
.hs-list { position: relative; display: grid; gap: 18px; margin: 0; padding: 0 0 0 44px; list-style: none; }
.hs-line { position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: color-mix(in srgb, currentColor 14%, transparent); }
.hs-line i { display: block; width: 100%; height: 0; background: var(--guide-accent, #2dd4bf); transition: height .25s linear; }
.hs-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 16px; background: var(--surface, transparent); opacity: .55; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease, border-color .3s ease; }
.hs-step.in { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--guide-accent, #2dd4bf) 45%, transparent); }
.hs-num { position: absolute; left: -44px; top: 20px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; background: var(--surface, #111); border: 2px solid color-mix(in srgb, currentColor 25%, transparent); transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.hs-step.in .hs-num { background: var(--guide-accent, #2dd4bf); color: #04201d; border-color: var(--guide-accent, #2dd4bf); }
.hs-step h3 { margin: 0 0 6px; font-size: 1.25rem; }
.hs-step p { margin: 0; opacity: .82; line-height: 1.55; }
.hs-step a { color: var(--guide-accent, #2dd4bf); }
.hs-art { min-height: 150px; padding: 14px; border-radius: 12px; background: color-mix(in srgb, currentColor 6%, transparent); font-size: .85rem; overflow: hidden; display: grid; align-content: center; gap: 6px; }
/* 1 add: the lines type in, then the count appears */
.hs-code { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.6; }
.hs-code span { display: block; max-width: 0; overflow: hidden; white-space: nowrap; }
.hs-step.in .hs-code span { animation: hs-type .9s steps(34, end) forwards; animation-delay: calc(var(--i) * .35s); }
.hs-count { justify-self: start; padding: 2px 10px; border-radius:var(--radius-pill); border: 1px solid color-mix(in srgb, var(--guide-accent, #2dd4bf) 60%, transparent); color: var(--guide-accent, #2dd4bf); opacity: 0; font-weight: 600; }
.hs-step.in .hs-count { animation: hs-fade .4s ease 2.6s forwards; }
/* 2 mode: Practice is picked, then Exam */
.hs-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hs-mode { padding: 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); text-align: center; font-weight: 600; }
.hs-step.in .hs-mode:first-child { animation: hs-pick 4s ease .4s infinite; }
.hs-step.in .hs-mode:last-child { animation: hs-pick 4s ease 2.4s infinite; }
/* 3 share: the three choices light up, a plane flies */
.hs-vis { display: flex; gap: 8px; flex-wrap: wrap; }
.hs-chip { padding: 4px 12px; border-radius:var(--radius-pill); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.hs-step.in .hs-chip { animation: hs-chip .5s ease forwards; }
.hs-step.in .hs-chip:nth-child(1) { animation-delay: .3s; }
.hs-step.in .hs-chip:nth-child(2) { animation-delay: 1.1s; }
.hs-step.in .hs-chip:nth-child(3) { animation-delay: 1.9s; }
.hs-plane { width: 22px; height: 22px; fill: var(--guide-accent, #2dd4bf); opacity: 0; }
.hs-step.in .hs-plane { animation: hs-fly 2.4s ease-in-out 2.4s infinite; }
/* 4 take: an option is picked while the timer runs down */
.hs-q { display: grid; gap: 6px; }
.hs-opt { padding: 8px 12px; border-radius:var(--radius-input); border: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.hs-step.in .hs-opt:nth-child(2) { animation: hs-chip .5s ease 1s forwards; }
.hs-timer { height: 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 14%, transparent); overflow: hidden; }
.hs-timer i { display: block; height: 100%; width: 100%; background: var(--guide-accent, #2dd4bf); transform-origin: left; }
.hs-step.in .hs-timer i { animation: hs-run 6s linear infinite; }
/* 5 review: bars grow */
.hs-bars { display: grid; gap: 7px; }
.hs-bar { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; }
.hs-bar i { display: block; height: 10px; width: 0; border-radius: 6px; background: var(--guide-accent, #2dd4bf); }
.hs-bar:nth-child(2) i { background: #f59e0b; }
.hs-bar:nth-child(3) i { background: #94a3b8; }
.hs-bar:nth-child(4) i { background: #f87171; }
.hs-step.in .hs-bar i { animation: hs-grow 1.2s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: calc(var(--i) * .2s + .3s); }
.hs-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.hs-role { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 12px; text-decoration: none; color: inherit; transition: transform .25s ease, border-color .25s ease; }
.hs-role:hover { transform: translateY(-2px); border-color: var(--guide-accent, #2dd4bf); }
.hs-role b { font-size: 1.05rem; }
.hs-role span { opacity: .75; }
@keyframes hs-type { to { max-width: 36em; } }
@keyframes hs-fade { to { opacity: 1; } }
@keyframes hs-pick { 0%, 55% { background: color-mix(in srgb, var(--guide-accent, #2dd4bf) 22%, transparent); border-color: var(--guide-accent, #2dd4bf); } 56%, 100% { background: transparent; border-color: color-mix(in srgb, currentColor 20%, transparent); } }
@keyframes hs-chip { to { background: color-mix(in srgb, var(--guide-accent, #2dd4bf) 22%, transparent); border-color: var(--guide-accent, #2dd4bf); } }
@keyframes hs-fly { 0% { transform: translateX(-10px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(150px) translateY(-14px); opacity: 0; } }
@keyframes hs-run { to { transform: scaleX(0); } }
@keyframes hs-grow { to { width: var(--w); } }
@media (max-width: 760px) { .hs-step { grid-template-columns: 1fr; } .hs-roles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .hs-step { opacity: 1; transform: none; transition: none; }
  .hs-code span { max-width: 36em; animation: none !important; }
  .hs-count { opacity: 1; animation: none !important; }
  .hs-bar i { width: var(--w); animation: none !important; }
  .hs-plane, .hs-timer i { animation: none !important; opacity: 1; }
}