/* Product showcases on the Halo landing.
 *
 * THESIS: every animation on the page is the product doing a job. The hero
 *   shows a course being assembled; each feature block replays one workflow
 *   in its own app window.
 * OWN-WORLD: window chrome and block copy are Halo (pearl canvas, white ring
 *   card, black type). Everything inside a screen is the app's own world:
 *   Golos Text, hairlines, indigo accent.
 * STORY: the visitor watches a course get built, edited, launched and
 *   followed through, one block at a time, then books a demo.
 * FIRST VIEWPORT: headline, lead and demo action left; one card right in
 *   which a recording turns into a course. Nothing else moves.
 * FORM: scripted coded replicas. Without JS or with reduced motion every
 *   window rests in its finished state.
 */

.ps-frame, .hx {
  --ps-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --a-ink: #1a1a2e;
  --a-slate: #525866;
  --a-quiet: #6b7080;
  --a-line: #e1e4e8;
  --a-line-soft: #eef0f2;
  --a-canvas: #fafbfc;
  --a-hover: #f4f5f7;
  --a-indigo: #4f46e5;
  --a-indigo-soft: #eef2ff;
  --a-ok: #047857;
  --a-ok-soft: #ecfdf5;
  --a-ok-line: #a7f3d0;
}

.ps-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Hero: copy left, one card right ── */
.hh { display: grid; gap: 2.5rem; padding: 2.5rem 1.5rem 1.5rem; }
.hx { min-width: 0; font-family: "Golos Text", system-ui, sans-serif; color: var(--a-ink); }
.hx * { font-family: inherit; }
.hx-card {
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(43, 38, 68, 0.06), 0 30px 60px -32px rgba(43, 38, 68, 0.45);
}
.hx-file { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: 0.875rem; background: var(--a-hover); }
.hx-play { display: grid; flex-shrink: 0; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--a-ink); color: #fff; }
.hx-play svg { width: 1.1rem; height: 1.1rem; }
.hx-file-text { min-width: 0; }
.hx-file-text b { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-file-text small { display: block; color: var(--a-slate); font-size: 0.9375rem; }
.hx-status { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.25rem; color: var(--a-slate); font-size: 0.9375rem; }
.hx-status-ico { display: grid; flex-shrink: 0; place-items: center; width: 1.25rem; height: 1.25rem; }
.hx-status-ico svg { display: none; width: 1.1rem; height: 1.1rem; color: var(--a-ok); }
.hx-status.is-done { color: var(--a-ok); font-weight: 600; }
.hx-status.is-done .bd-spin { display: none; }
.hx-status.is-done .hx-status-ico svg { display: block; }
.hx-label { flex: 1; min-width: 0; }
.hx-count { flex-shrink: 0; color: var(--a-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-spin {
  width: 1rem;
  height: 1rem;
  border: 2px solid #d5d9e0;
  border-top-color: var(--a-indigo);
  border-radius: 9999px;
  animation: ps-spin 900ms linear infinite;
}
@keyframes ps-spin { to { transform: rotate(360deg); } }
.hx-track { height: 0.25rem; margin-top: 0.7rem; border-radius: 9999px; background: var(--a-line-soft); overflow: hidden; }
.hx-track i { display: block; height: 100%; border-radius: inherit; background: var(--a-indigo); transform-origin: left center; transition: transform 1200ms cubic-bezier(0.3, 0.1, 0.2, 1), background-color 400ms ease; }
.hx-status.is-done + .hx-track i { background: #10b981; }
.hx-mods { display: grid; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.hx-mods li { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 0; border-top: 1px solid var(--a-line-soft); }
.hx-mods li:first-child { border-top: 0; }
.hx-num { display: grid; flex-shrink: 0; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--a-indigo-soft); color: #4338ca; font-size: 0.8125rem; font-weight: 600; }
.hx-mods b { flex: 1; min-width: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.hx-mods small { flex-shrink: 0; color: var(--a-slate); font-size: 0.9375rem; }
.hx-sum { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--a-line); color: var(--a-slate); font-size: 0.9375rem; line-height: 1.45; }
.hx-sum svg { flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; color: var(--a-ok); }
.hx-toggle { margin: 0.6rem 0 0 auto; }
.hx.is-live .hx-toggle { display: flex; width: max-content; }
@media (min-width: 1024px) {
  .hh {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 4rem;
    min-height: min(calc(100svh - 6.5rem), 46rem);
    padding: 3.5rem 3.5rem 3rem;
  }
  .hx { justify-self: end; width: min(100%, 33rem); }
  .hx-card { padding: 1.75rem; }
}

/* ── Feature blocks: copy beside its own window ── */
.fb-list { display: grid; gap: 4rem; }
.fb {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding-top: 3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.fb-copy { position: sticky; top: 6rem; }
.fb-index { display: block; margin-bottom: 0.75rem; color: #5D51B4; font-size: 0.875rem; font-weight: 500; }
.fb-copy h3 { color: #000; font-size: 1.75rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; text-wrap: balance; }
.fb-copy p { margin-top: 0.9rem; color: rgba(0, 0, 0, 0.62); font-size: 1rem; line-height: 1.6; }

/* ── App window ── */
.ps-frame {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 32px 64px -40px rgba(43, 38, 68, 0.35);
  overflow: hidden;
}
.ps-chrome {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: 0 0.75rem 0 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ps-dots { display: flex; gap: 0.375rem; }
.ps-dots i { width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: rgba(0, 0, 0, 0.08); }
.ps-url {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0, 0, 0, 0.55);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.ps-toggle {
  display: none;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: rgba(0, 0, 0, 0.62);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.is-live .ps-toggle { display: inline-flex; }
.ps-toggle:hover { background: rgba(0, 0, 0, 0.05); color: #000; }
.ps-toggle:focus-visible { outline: 2px solid #5D51B4; outline-offset: 2px; }
.ps-toggle svg { width: 0.875rem; height: 0.875rem; }
.ps-toggle .ps-ico-play { display: none; }
.ps-toggle[aria-pressed="true"] .ps-ico-play { display: block; }
.ps-toggle[aria-pressed="true"] .ps-ico-pause { display: none; }

.ps-screen {
  position: relative;
  height: 36rem;
  background: var(--a-canvas);
  color: var(--a-ink);
  font-family: "Golos Text", system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  container-type: inline-size;
  overflow: hidden;
}
.ps-screen * { font-family: inherit; }
.ps-screen i { font-style: normal; }
.ps-screen--short { height: 28rem; }
.ps-view { position: absolute; inset: 0; }

/* Staged items rest visible; the script hides them only while it plays. */
.is-live [data-reveal] {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 420ms var(--ps-ease), transform 520ms var(--ps-ease);
}
.is-live [data-reveal].is-in { opacity: 1; transform: none; }

/* Pointer that performs the clicks. */
.ps-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: none;
  width: 1.375rem;
  height: 1.375rem;
  opacity: 0;
  pointer-events: none;
  transition: transform 640ms var(--ps-ease), opacity 240ms ease;
}
.is-live .ps-cursor { display: block; }
.ps-cursor.is-on { opacity: 1; }
.ps-cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 3px rgba(26, 26, 46, 0.28));
  transition: transform 140ms ease;
  transform-origin: 20% 15%;
}
.ps-cursor.is-down svg { transform: scale(0.82); }

/* ── Shared app pieces ── */
.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 0.5rem;
  background: var(--a-ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  transition: transform 140ms ease, background-color 140ms ease;
}
.ps-btn svg { width: 0.9rem; height: 0.9rem; }
.ps-btn--indigo { background: var(--a-indigo); }
.is-pressed { transform: scale(0.97); }
.ps-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 0.3rem;
  font-size: 0.6875rem;
  line-height: 1;
}

/* ── Scene 1: course plan wizard ── */
.pl { display: grid; grid-template-columns: 15rem minmax(0, 1fr); height: 100%; background: #fff; }
.pl-rail { padding: 1.5rem 1rem; border-right: 1px solid var(--a-line-soft); background: var(--a-canvas); }
.pl-brand { padding: 0 0.5rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em; }
.pl-course { margin: 1.25rem 0 1.5rem; padding: 0 0.5rem; }
.pl-course small { display: block; color: var(--a-quiet); font-size: 0.75rem; }
.pl-course b { display: block; font-size: 0.8125rem; font-weight: 500; }
.pl-steps { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.pl-step {
  position: relative;
  display: flex;
  gap: 0.75rem;
  padding: 0.55rem 0.5rem;
  border-radius: 0.625rem;
  transition: background-color 320ms ease;
}
.pl-step-mark {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--a-line);
  border-radius: 9999px;
  background: #fff;
  color: var(--a-slate);
  font-size: 0.75rem;
  font-weight: 600;
  transition: background-color 320ms ease, border-color 320ms ease, color 320ms ease;
}
.pl-step-mark svg {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  color: var(--a-ink);
  opacity: 0;
  transition: opacity 240ms ease;
}
.pl-step-mark span { transition: opacity 200ms ease; }
.pl-step-text { min-width: 0; }
.pl-step-text b { display: block; font-size: 0.8125rem; font-weight: 500; line-height: 1.35; }
.pl-step-text small { display: block; color: var(--a-quiet); font-size: 0.75rem; line-height: 1.35; }
.pl-step.is-done .pl-step-mark svg { opacity: 1; }
.pl-step.is-done .pl-step-mark span { opacity: 0; }
.pl-step.is-current { background: var(--a-indigo-soft); }
.pl-step.is-current .pl-step-mark { border-color: var(--a-indigo); background: var(--a-indigo); color: #fff; }

.pl-main { position: relative; min-width: 0; }
.pl-pane {
  position: absolute;
  inset: 0;
  padding: 2rem 2.25rem 5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.pl-pane.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 420ms var(--ps-ease) 120ms, transform 520ms var(--ps-ease) 120ms, visibility 0s;
}
.pl-h { font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.pl-lead { max-width: 34rem; margin-top: 0.5rem; color: var(--a-slate); font-size: 0.875rem; }
.pl-list { display: grid; gap: 0.5rem; max-width: 36rem; margin-top: 1.25rem; }
.pl-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--a-line);
  border-radius: 0.75rem;
  background: #fff;
  transition: border-color 240ms ease, background-color 240ms ease, transform 140ms ease;
}
.pl-opt-ico {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--a-hover);
  color: var(--a-slate);
}
.pl-opt-ico svg { width: 1rem; height: 1rem; }
.pl-opt-text { flex: 1; min-width: 0; }
.pl-opt-text b { display: block; font-weight: 500; }
.pl-opt-text small { display: block; color: var(--a-quiet); font-size: 0.75rem; }
.pl-radio {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1.5px var(--a-line);
  transition: box-shadow 200ms ease;
}
.pl-opt.is-on { border-color: var(--a-indigo); background: var(--a-indigo-soft); }
.pl-opt.is-on .pl-opt-ico { background: #fff; color: var(--a-indigo); }
.pl-opt.is-on .pl-radio { box-shadow: inset 0 0 0 5px var(--a-indigo); }
.pl-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 36rem;
  margin-top: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px dashed #c9cdd4;
  border-radius: 0.75rem;
}
.pl-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pl-file-name small { margin-left: 0.4rem; color: var(--a-quiet); font-size: 0.75rem; font-weight: 400; }
.pl-file-track { flex-shrink: 0; width: 6rem; height: 0.3rem; border-radius: 9999px; background: var(--a-line-soft); overflow: hidden; }
.pl-file-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--a-indigo);
  transform-origin: left center;
}
.is-live .pl-file-track i { transform: scaleX(0); transition: transform 1500ms cubic-bezier(0.3, 0.1, 0.2, 1); }
.is-live .pl-file.is-sent .pl-file-track i { transform: scaleX(1); }

.pl-outcome {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--a-line);
  border-radius: 0.75rem;
  background: #fff;
}
.pl-num {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--a-hover);
  font-size: 0.75rem;
  font-weight: 600;
}
.pl-outcome p { flex: 1; min-width: 0; }
.pl-grip { flex-shrink: 0; width: 0.9rem; height: 0.9rem; margin-top: 0.2rem; color: #a3a8b4; }
.pl-add {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px dashed #c9cdd4;
  border-radius: 0.75rem;
  color: var(--a-slate);
}
.pl-add svg { width: 0.9rem; height: 0.9rem; }

.pl-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
.pl-mod { padding: 0.9rem; border: 1px solid var(--a-line); border-radius: 0.75rem; background: #fff; }
.pl-mod-head { display: flex; gap: 0.6rem; align-items: flex-start; }
.pl-mod-head b { display: block; font-weight: 600; line-height: 1.35; }
.pl-lessons { display: grid; gap: 0.4rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.pl-lesson { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.8125rem; }
.pl-lesson span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-kind {
  flex-shrink: 0;
  padding: 0.05rem 0.5rem;
  border-radius: 9999px;
  background: var(--a-hover);
  color: var(--a-slate);
  font-size: 0.6875rem;
  font-weight: 500;
}
.pl-kind--practice { background: var(--a-indigo-soft); color: #4338ca; }
.pl-kind--verify { background: var(--a-ok-soft); color: var(--a-ok); }
.pl-foot {
  position: absolute;
  right: 2.25rem;
  bottom: 1.5rem;
  z-index: 2;
}

/* ── Scene 2: lesson editor ── */
.ed { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); height: 100%; }
.ed-side { padding: 1rem 0.75rem; overflow: hidden; border-right: 1px solid var(--a-line); background: var(--a-canvas); font-size: 0.8125rem; }
.ed-back { display: flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem; color: var(--a-quiet); font-size: 0.75rem; }
.ed-back svg { width: 0.75rem; height: 0.75rem; }
.ed-course { margin: 1rem 0 0.9rem; padding: 0 0.5rem; }
.ed-course b { display: block; font-weight: 600; line-height: 1.35; }
.ed-course small { display: block; color: var(--a-quiet); font-size: 0.75rem; }
.ed-mod { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.5rem; font-weight: 500; }
.ed-mod span { color: var(--a-quiet); font-size: 0.75rem; font-weight: 400; }
.ed-mod.is-open { color: var(--a-indigo); }
.ed-les {
  margin-left: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  color: var(--a-slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ed-les.is-open { background: var(--a-indigo-soft); color: var(--a-indigo); font-weight: 500; }
.ed-total {
  display: flex;
  justify-content: space-between;
  margin-top: 0.9rem;
  padding: 0.75rem 0.5rem 0;
  border-top: 1px solid var(--a-line-soft);
  color: var(--a-quiet);
  font-size: 0.75rem;
}
.ed-main { display: flex; min-width: 0; flex-direction: column; background: #fff; }
.ed-top { padding: 0.9rem 1.5rem 0; border-bottom: 1px solid var(--a-line); }
.ed-crumbs { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.ed-crumbs span { overflow: hidden; text-overflow: ellipsis; }
.ed-crumbs i { flex-shrink: 0; color: #a3a8b4; font-style: normal; font-weight: 400; }
.ed-crumbs .is-leaf { color: var(--a-slate); font-weight: 400; }
.ed-tabs { display: flex; gap: 1.25rem; margin-top: 0.75rem; color: var(--a-slate); font-size: 0.8125rem; }
.ed-tabs span { padding-bottom: 0.6rem; border-bottom: 2px solid transparent; }
.ed-tabs .is-on { border-color: var(--a-ink); color: var(--a-ink); }
.ed-doc { position: relative; flex: 1; min-height: 0; padding: 1.5rem 2rem 0; overflow: hidden; }
.ed-h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.ed-chips { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.6rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--a-line-soft); color: var(--a-slate); font-size: 0.75rem; }
.ed-chips span { display: inline-flex; align-items: center; gap: 0.35rem; }
.ed-chips svg { width: 0.8rem; height: 0.8rem; }
.ed-h2 { margin-top: 1rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; }
.ed-p { max-width: 40rem; margin-top: 0.4rem; min-height: 1.5em; }
.ed-ul { max-width: 40rem; margin: 0.4rem 0 0; padding-left: 1.25rem; list-style: disc; }
.ed-ul li { min-height: 1.5em; }
.is-live .ed-ul:not(.is-in) { display: none; }
.is-live .ed-slash:not(.is-in) { display: none; }
.ps-frame:not(.is-live) .ed-slash { display: none; }
.ed-slash { position: relative; margin-top: 0.4rem; }
.is-typing::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 1px;
  background: var(--a-ink);
  vertical-align: -0.15em;
  animation: ps-caret 1s steps(1) infinite;
}
@keyframes ps-caret { 50% { opacity: 0; } }
.ed-menu {
  position: absolute;
  left: 0;
  top: 1.75rem;
  z-index: 3;
  width: 15rem;
  padding: 0.3rem;
  border: 1px solid var(--a-line);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 4px 16px rgba(26, 26, 46, 0.1);
  opacity: 0;
  transform: translateY(-0.25rem) scale(0.98);
  transform-origin: top left;
  transition: opacity 160ms ease, transform 220ms var(--ps-ease);
}
.ed-menu.is-in { opacity: 1; transform: none; }
.ed-cmd { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; border-radius: 0.5rem; }
.ed-cmd.is-on { background: var(--a-hover); }
.ed-cmd-ico {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--a-line);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--a-slate);
  font-size: 0.6875rem;
  font-weight: 600;
}
.ed-cmd-ico svg { width: 0.85rem; height: 0.85rem; }
.ed-cmd b { display: block; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; }
.ed-cmd small { display: block; color: var(--a-quiet); font-size: 0.6875rem; line-height: 1.3; }
.ed-foot {
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 1.25rem;
  display: grid;
  gap: 0.6rem;
}
.ed-quiz {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--a-line);
  border-radius: 0.625rem;
  background: #fff;
  font-weight: 500;
}
.ed-quiz svg { flex-shrink: 0; width: 0.9rem; height: 0.9rem; color: var(--a-slate); }
.ed-quiz small { color: var(--a-quiet); font-size: 0.75rem; font-weight: 400; }
.ed-addrow { display: flex; align-items: center; gap: 0.6rem; color: var(--a-quiet); font-size: 0.8125rem; }
.ed-add {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--a-line);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--a-slate);
  transition: transform 140ms ease, background-color 140ms ease;
}
.ed-add svg { width: 0.8rem; height: 0.8rem; }

/* ── Scene 3: practice session ── */
.pr { display: flex; height: 100%; flex-direction: column; align-items: center; padding: 1.25rem 1.25rem 1rem; }
.pr-title { font-weight: 500; text-align: center; }
.pr-sub { color: var(--a-quiet); font-size: 0.75rem; text-align: center; }
.pr-bar { display: flex; align-items: center; gap: 0.9rem; width: min(100%, 31rem); margin-top: 0.9rem; color: var(--a-quiet); }
.pr-bar svg { flex-shrink: 0; width: 0.9rem; height: 0.9rem; }
.pr-track { flex: 1; height: 0.5rem; border-radius: 9999px; background: #e2e5ec; overflow: hidden; }
.pr-track i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--a-indigo);
  transform: scaleX(0.2);
  transform-origin: left center;
  transition: transform 700ms var(--ps-ease);
}
.pr-streak { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 2rem; color: #c2410c; font-size: 0.9375rem; font-weight: 600; transition: color 240ms ease; }
.pr-streak svg { width: 1rem; height: 1rem; }
.pr-streak.is-zero { color: #a3a8b4; }
.pr-streak.is-bump svg { animation: ps-bump 520ms var(--ps-ease); }
@keyframes ps-bump { 40% { transform: scale(1.35) rotate(-6deg); } }
.pr-stack { position: relative; width: min(100%, 31rem); margin-top: 1rem; flex: 1; min-height: 0; }
.pr-card {
  position: absolute;
  inset: 0 0 auto 0;
  padding: 1.25rem;
  border: 1px solid var(--a-line);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateX(1.5rem);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.pr-card.is-current {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 420ms var(--ps-ease), transform 520ms var(--ps-ease), visibility 0s;
}
.pr-card.is-gone { transform: translateX(-1.5rem); }
.pr-q { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; text-wrap: balance; }
.pr-opts { display: grid; gap: 0.4rem; margin-top: 0.85rem; }
.pr-opt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--a-line);
  border-radius: 0.75rem;
  box-shadow: 0 2px 0 var(--a-line);
  line-height: 1.35;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 140ms ease;
}
.pr-key {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--a-line);
  border-radius: 0.375rem;
  color: var(--a-slate);
  font-size: 0.75rem;
}
.pr-opt.is-picked { border-color: var(--a-indigo); background: var(--a-indigo-soft); box-shadow: 0 2px 0 #c7d2fe; }
.pr-opt.is-right { border-color: var(--a-ok-line); background: var(--a-ok-soft); box-shadow: 0 2px 0 var(--a-ok-line); }
.pr-opt.is-right .pr-key { border-color: var(--a-ok-line); color: var(--a-ok); }
.pr-verdict { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 420ms var(--ps-ease); }
.pr-verdict > div { min-height: 0; overflow: hidden; }
.is-live .pr-verdict:not(.is-in) { grid-template-rows: 0fr; }
.pr-verdict-title { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.9rem; color: var(--a-ok); font-weight: 600; }
.pr-verdict-title svg { width: 1.4rem; height: 1.4rem; }
.pr-why { margin-top: 0.3rem; color: var(--a-slate); font-size: 0.8125rem; }
.pr-why b { color: var(--a-ink); font-weight: 500; }
.pr-go { width: 100%; margin-top: 0.9rem; padding-block: 0.7rem; }
.pr-go [data-label-next] { display: inline; }
.pr-go [data-label-check] { display: none; }
.is-live .pr-go:not(.is-next) [data-label-next] { display: none; }
.is-live .pr-go:not(.is-next) [data-label-check] { display: inline; }

/* ── Shared icons and small parts ── */
.pi { flex-shrink: 0; width: 0.9rem; height: 0.9rem; color: var(--a-quiet); }
.pi--grip { width: 0.7rem; color: #a3a8b4; }
.is-bump { animation: ps-bump 520ms var(--ps-ease); }
.ps-badge {
  flex-shrink: 0;
  padding: 0 0.4rem;
  border-radius: 9999px;
  background: var(--a-hover);
  color: var(--a-slate);
  font-size: 0.6875rem;
  line-height: 1.5;
}
.ps-switch {
  position: relative;
  flex-shrink: 0;
  width: 2rem;
  height: 1.15rem;
  border-radius: 9999px;
  background: #d5d9e0;
  transition: background-color 240ms ease;
}
.ps-switch::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 9999px;
  background: #fff;
  transition: transform 280ms var(--ps-ease);
}
.ps-switch.is-on { background: var(--a-indigo); }
.ps-switch.is-on::after { transform: translateX(0.85rem); }
.ps-dim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(26, 26, 46, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.ps-dim.is-in { opacity: 1; visibility: visible; transition: opacity 240ms ease, visibility 0s; }
/* A row that folds away without animating height. */
.ps-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 420ms var(--ps-ease), opacity 260ms ease; }
.ps-fold > * { min-height: 0; overflow: hidden; }
.ps-fold.is-out { grid-template-rows: 0fr; opacity: 0; }

/* ── Run shell shared by the run scenes ── */
.rs { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); height: 100%; }
.rs-run {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.25rem 0.75rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--a-line);
  border-radius: 0.5rem;
  background: #fff;
}
.rs-run::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: #10b981; }
.rs-main { position: relative; display: flex; min-width: 0; flex-direction: column; background: #fff; }
.rs-top { padding: 0.85rem 1.25rem 0.6rem; border-bottom: 1px solid var(--a-line); }
.rs-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 1.75rem; }
.rs-action { flex-shrink: 0; padding: 0.3rem 0.75rem; font-size: 0.8125rem; }
.rs-tabs { display: flex; gap: 0.15rem; margin: 0.55rem -0.5rem 0; color: var(--a-slate); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; }
.rs-tabs span { padding: 0.15rem 0.65rem; border: 1px solid transparent; border-radius: 9999px; transition: border-color 240ms ease, color 240ms ease; }
.rs-tabs .is-on { border-color: var(--a-line); color: var(--a-ink); font-weight: 500; box-shadow: 0 1px 2px rgba(26, 26, 46, 0.05); }
.rs-body { position: relative; flex: 1; min-height: 0; padding: 1.1rem 1.25rem 0; overflow: hidden; }
.rs-ava {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: var(--a-indigo-soft);
  color: #4338ca;
  font-size: 0.625rem;
  font-weight: 600;
}
.rs-ava--b { background: #ecfdf5; color: #047857; }
.rs-ava--c { background: #fff7ed; color: #c2410c; }
.rs-who { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.rs-who span { min-width: 0; }
.rs-who b { display: block; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-who small { display: block; color: var(--a-quiet); font-size: 0.75rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-table { border: 1px solid var(--a-line); border-radius: 0.75rem; overflow: hidden; }
.rs-row { display: grid; align-items: center; gap: 0.75rem; padding: 0.5rem 0.9rem; border-top: 1px solid var(--a-line-soft); }
.rs-row--head { border-top: 0; color: var(--a-quiet); font-size: 0.75rem; }
.rs-tag { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 9999px; background: var(--a-hover); color: var(--a-slate); font-size: 0.6875rem; font-weight: 500; white-space: nowrap; }
.rs-tag--role { background: var(--a-indigo-soft); color: #4338ca; }

/* ── Run scene: invite students ── */
.iv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.iv-stat { padding: 0.55rem 0.75rem; border: 1px solid var(--a-line); border-radius: 0.625rem; }
.iv-stat small { display: block; color: var(--a-slate); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-stat b { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.iv-stat.is-on { border-color: var(--a-indigo); }
.iv-stat.is-on b { color: var(--a-indigo); }
.iv .rs-table { margin-top: 0.9rem; }
.iv .rs-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 5.5rem; }
.iv-state { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--a-ok); font-size: 0.8125rem; }
.iv-state::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: #10b981; }
.iv-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(22rem, calc(100% - 2rem));
  padding: 1.1rem 1.25rem;
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: 0 4px 16px rgba(26, 26, 46, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -46%) scale(0.98);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
.iv-dialog.is-in { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity 320ms var(--ps-ease), transform 420ms var(--ps-ease), visibility 0s; }
.iv-dialog > b { display: block; font-size: 1rem; font-weight: 600; }
.iv-label { display: block; margin: 0.8rem 0 0.3rem; font-size: 0.75rem; font-weight: 500; }
.iv-input, .iv-select { display: flex; align-items: center; min-height: 2.1rem; padding: 0 0.7rem; border: 1px solid var(--a-line); border-radius: 0.5rem; }
.iv-input + .ps-fold .iv-input { margin-top: 0.4rem; }
.iv-input.is-focus { border-color: var(--a-indigo); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
.iv-select { justify-content: space-between; }
.iv-more { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; padding: 0.25rem 0.6rem; border-radius: 0.5rem; background: var(--a-indigo-soft); color: #4338ca; font-size: 0.8125rem; font-weight: 500; transition: transform 140ms ease; }
.iv-more .pi { color: inherit; }
.iv-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--a-line-soft); font-size: 0.8125rem; }
.iv-actions .ps-btn { padding: 0.45rem 0.9rem; font-size: 0.8125rem; }

/* ── Run scene: lesson opens on a date ── */
.bd-body { position: relative; flex: 1; min-height: 0; padding: 1.5rem 2rem 0; overflow: hidden; }
.bd-mods { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.bd-mod-head, .bd-les { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.bd-mod-head { font-weight: 600; }
.bd-les { margin-top: 0.55rem; padding-left: 1.4rem; }
.bd-les > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-note { padding: 0.5rem 0.75rem; border: 1px solid var(--a-line-soft); border-radius: 0.5rem; background: var(--a-canvas); color: var(--a-slate); font-size: 0.75rem; }
.pc .bd-body { padding-top: 1rem; }
.pc .bd-mods { margin-top: 1rem; }
.pc-chip { flex-shrink: 0; margin-left: auto; padding: 0.05rem 0.5rem; border-radius: 9999px; background: var(--a-hover); color: var(--a-slate); font-size: 0.6875rem; white-space: nowrap; }
.pc-chip + .pc-more { margin-left: 0; }
.pc-more { display: grid; flex-shrink: 0; place-items: center; width: 1.5rem; height: 1.5rem; margin-left: auto; border-radius: 0.375rem; transition: background-color 140ms ease, transform 140ms ease; }
.bd-les.is-target { margin-inline: -0.5rem; padding-block: 0.3rem; margin-top: 0.25rem; margin-bottom: -0.3rem; padding-right: 0.5rem; padding-left: 1.9rem; border-radius: 0.5rem; background: var(--a-indigo-soft); }
.pc-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: min(19rem, 100%);
  padding: 1.25rem;
  background: #fff;
  box-shadow: -8px 0 24px -12px rgba(26, 26, 46, 0.25);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 260ms ease, visibility 0s linear 260ms;
}
.pc-drawer.is-in { transform: none; visibility: visible; transition: transform 460ms var(--ps-ease), visibility 0s; }
.pc-drawer > b { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.pc-drawer > small { display: block; margin-top: 0.2rem; color: var(--a-quiet); font-size: 0.8125rem; }
.pc-set { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; }
.pc-set b { display: block; font-size: 0.8125rem; font-weight: 500; }
.pc-set small { display: block; color: var(--a-quiet); font-size: 0.75rem; line-height: 1.4; }
.pc-prop { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.5rem; margin-top: 0.8rem; font-size: 0.8125rem; }
.pc-prop span:first-child { color: var(--a-quiet); }
.pc-drawer .ps-btn { margin-top: 1rem; padding: 0.4rem 0.9rem; font-size: 0.8125rem; }
.pc-rule { margin-top: 1.1rem; border-top: 1px solid var(--a-line-soft); }

/* ── Run scene: review queue ── */
.rv-pane {
  position: absolute;
  inset: 1.1rem 1.25rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
.rv-pane.is-current { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms var(--ps-ease) 100ms, transform 520ms var(--ps-ease) 100ms, visibility 0s; }
.rv-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.rv-live { padding: 0.05rem 0.5rem; border-radius: 9999px; background: var(--a-ok-soft); color: var(--a-ok); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0; }
.rv-meta { margin-top: 0.25rem; color: var(--a-slate); font-size: 0.8125rem; }
.rv-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0.75rem; margin-top: 1rem; }
.rv-card { padding: 0.9rem 1rem; border: 1px solid var(--a-line); border-radius: 0.75rem; }
.rv-card > b { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.rv-big { margin-top: 0.5rem; font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.rv-big small { color: var(--a-quiet); font-size: 0.9375rem; font-weight: 600; }
.rv-card p { margin-top: 0.3rem; color: var(--a-slate); font-size: 0.8125rem; }
.rv-count { display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 9999px; background: #dc2626; color: #fff; font-size: 0.6875rem; font-weight: 700; }
.rv-queue { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; padding: 0.55rem 0.7rem; border: 1px solid var(--a-line-soft); border-radius: 0.625rem; transition: background-color 140ms ease, transform 140ms ease; }
.rv-queue span { flex: 1; min-width: 0; }
.rv-queue.is-pressed { background: var(--a-hover); }
.rv-sub { display: flex; gap: 0.25rem; color: var(--a-slate); font-size: 0.75rem; }
.rv-sub span { padding: 0.1rem 0.6rem; border: 1px solid transparent; border-radius: 9999px; }
.rv-sub .is-on { border-color: var(--a-indigo); background: var(--a-indigo-soft); color: #4338ca; }
.rv-list { margin-top: 0.9rem; border: 1px solid var(--a-line); border-radius: 0.75rem; }
.rv-item { padding: 0.75rem 1rem; }
.rv-item + .rv-item { border-top: 1px solid var(--a-line-soft); }
.rv-item b { display: block; font-weight: 600; }
.rv-item small { display: block; margin-top: 0.15rem; color: var(--a-slate); font-size: 0.8125rem; }

/* ── Run scene: completion table ── */
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cp-head > b { font-size: 1.0625rem; font-weight: 600; }
.cp-filters { position: relative; display: flex; gap: 0.5rem; font-size: 0.8125rem; }
.cp-select { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.7rem; border: 1px solid var(--a-line); border-radius: 0.5rem; background: #fff; white-space: nowrap; transition: transform 140ms ease, border-color 200ms ease; }
.cp-select.is-open { border-color: var(--a-indigo); }
.cp-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.3rem);
  z-index: 3;
  min-width: 11rem;
  padding: 0.3rem;
  border: 1px solid var(--a-line);
  border-radius: 0.625rem;
  background: #fff;
  box-shadow: 0 4px 16px rgba(26, 26, 46, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.cp-menu.is-in { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms ease, transform 220ms var(--ps-ease), visibility 0s; }
.cp-menu span { display: block; padding: 0.35rem 0.55rem; border-radius: 0.375rem; }
.cp-menu span.is-on { background: var(--a-hover); }
.cp .rs-table { margin-top: 0.9rem; }
.cp .rs-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.9fr); }
.cp .ps-fold + .ps-fold .rs-row, .cp .rs-row--head + .ps-fold .rs-row { border-top: 1px solid var(--a-line-soft); }
.cp-prog { display: flex; align-items: center; gap: 0.6rem; min-width: 0; color: var(--a-slate); font-size: 0.8125rem; white-space: nowrap; }
.cp-bar { flex: 1; min-width: 1.5rem; height: 0.25rem; border-radius: 9999px; background: var(--a-line-soft); overflow: hidden; }
.cp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--a-indigo); transform-origin: left center; transform: scaleX(var(--v)); }
.is-live .cp-bar i { transform: scaleX(0); transition: transform 900ms var(--ps-ease); }
.is-live .is-drawn .cp-bar i { transform: scaleX(var(--v)); }
.cp-when { color: var(--a-quiet); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@container (max-width: 700px) {
  .rs { grid-template-columns: minmax(0, 1fr); }
  .rs > .ed-side { display: none; }
  .rs-top { padding-inline: 1rem; }
  .rs-body { padding: 0.9rem 1rem 0; }
  .rv-pane { inset: 0.9rem 1rem 0; }
  .rv-grid { grid-template-columns: minmax(0, 1fr); }
  .iv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv .rs-row { grid-template-columns: minmax(0, 1fr) auto; }
  .iv .rs-row > :nth-child(3) { display: none; }
  .cp .rs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cp .rs-row > :nth-child(3), .cp-sort { display: none; }
  .cp .rs-who b { white-space: normal; }
  .rs-tabs span:nth-child(4), .rs-tabs span:nth-child(5) { display: none; }
  .bd-body { padding: 1rem 1rem 0; }
}

@container (max-width: 820px) {
  .pl-add { display: none; }
}
@container (max-width: 640px) {
  .pl, .ed { grid-template-columns: minmax(0, 1fr); }
  .pl-rail, .ed-side { display: none; }
  .pl-pane { padding: 1.25rem 1rem 4.5rem; }
  .pl-h { font-size: 1.25rem; }
  .pl-mods { grid-template-columns: minmax(0, 1fr); }
  .pl-mod:nth-child(n + 3) { display: none; }
  .pl-add { display: none; }
  .pl-opt-text small { display: none; }
  .pl-file-track { width: 3.5rem; }
  .pl-foot { right: 1rem; bottom: 1rem; }
  .ed-top { padding-inline: 1rem; }
  .ed-doc { padding: 1rem 1rem 0; }
  .ed-h1 { font-size: 1.25rem; }
  .ed-foot { left: 1rem; right: 1rem; bottom: 1rem; }
  .ed-addrow > span:first-child, .ed-wide { display: none; }
  .pr { padding: 1.25rem 0.75rem; }
  .pr-card { padding: 1rem; }
  .pr-q { font-size: 0.9375rem; }
  .pr-title, .pr-sub, .pr-opt:nth-child(4) { display: none; }
  .pr-bar { margin-top: 0; }
}

@media (max-width: 1023px) {
  .fb { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 2.5rem; }
  .fb-copy { position: static; }
  .fb-copy h3 { font-size: 1.5rem; }
  .fb-list { gap: 3rem; }
  .ps-screen { height: 33rem; }
  .ps-screen--short { height: 27rem; }
}
@media (max-width: 640px) {
  .ps-url { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-toggle { transition: none; }
  .is-typing::after, .pr-streak.is-bump svg, .bd-spin, .is-bump { animation: none; }
}

/* ── Course scene: reorder lessons by dragging ── */
.ps-btn .pi { color: inherit; }
.sb .bd-body { padding-top: 1.25rem; }
.sb-title { font-size: 1.375rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.sb-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.sb-actions .ps-btn, .sb-ghost { padding: 0.4rem 0.8rem; font-size: 0.8125rem; }
.sb-ghost { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--a-line); border-radius: 0.5rem; font-weight: 500; }
.sb .bd-mods { gap: 0.8rem; margin-top: 1.25rem; }
.sb-rows { margin-top: 0.25rem; }
.sb-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.1rem;
  margin-inline: -0.5rem;
  padding: 0 0.5rem 0 1.9rem;
  border-radius: 0.5rem;
  background: #fff;
  transition: transform 640ms var(--ps-ease), box-shadow 200ms ease;
}
.sb-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-row.is-drag { position: relative; z-index: 2; box-shadow: 0 0 0 1px var(--a-line), 0 10px 24px -10px rgba(26, 26, 46, 0.35); }
.sb-row.is-down { transform: translateY(2.1rem); }
.sb-row.is-up { transform: translateY(-2.1rem); }

/* ── Course scene: quiz editor ── */
.qz .bd-body { padding-top: 1.1rem; }
.qz-scroll { transition: transform 620ms var(--ps-ease); }
.qz-h { font-weight: 600; }
.qz-h span { color: var(--a-slate); font-weight: 400; }
.qz-card { margin-top: 0.6rem; border: 1px solid var(--a-line); border-radius: 0.75rem; background: #fff; }
.qz-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--a-line-soft); }
.qz-head b { flex-shrink: 0; font-weight: 600; }
.qz-head span { flex: 1; min-width: 0; }
.qz-head small { flex-shrink: 0; color: var(--a-slate); font-size: 0.75rem; }
.qz-body { padding: 0.6rem 0.9rem 0.7rem; }
.qz-opts { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; }
.qz-opts i { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.05rem 0.55rem; border-radius: 9999px; background: var(--a-hover); font-size: 0.75rem; }
.qz-opts i.is-right { background: var(--a-ok-soft); color: var(--a-ok); }
.qz-opts .pi { width: 0.7rem; height: 0.7rem; color: inherit; }
.qz-body p { margin-top: 0.4rem; color: var(--a-slate); font-size: 0.8125rem; }
.qz-form { padding: 0.1rem 0.9rem 0.9rem; }
.qz-form .iv-label { margin-top: 0.7rem; }
.iv-input > span { min-width: 0; overflow: hidden; white-space: nowrap; }
.qz-var { display: flex; align-items: center; gap: 0.75rem; }
.qz-var + .qz-var { margin-top: 0.35rem; }
.qz-var .iv-input { flex: 1; min-width: 0; }
.qz-ok { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.4rem; font-size: 0.8125rem; transition: transform 140ms ease; }
.qz-ok i { width: 0.95rem; height: 0.95rem; border-radius: 9999px; box-shadow: inset 0 0 0 1.5px var(--a-indigo); transition: box-shadow 200ms ease; }
.qz-ok.is-on i { box-shadow: inset 0 0 0 0.3rem var(--a-indigo); }
.qz-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.8rem; font-size: 0.8125rem; }
.qz-actions .ps-btn { padding: 0.4rem 0.9rem; font-size: 0.8125rem; }
.qz-add {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--a-line);
  border-radius: 0.75rem;
  background: #fff;
  font-weight: 500;
  transition: transform 140ms ease;
}

/* ── Course scene: the lesson as a student sees it ── */
/* The lesson is taller than the screen: pin the row so the body can scroll. */
.ls { grid-template-rows: minmax(0, 1fr); }
.ls .ed-main { min-height: 0; }
.ls-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.5rem; margin: 0 0.5rem 0.8rem; color: var(--a-quiet); font-size: 0.6875rem; }
.ls-prog i { grid-column: 1 / -1; height: 2px; border-radius: 9999px; background: var(--a-line); overflow: hidden; }
.ls-prog b { display: block; height: 100%; background: var(--a-indigo); transform: scaleX(var(--v)); transform-origin: left center; transition: transform 700ms var(--ps-ease); }
.ls-nav { padding: 0.35rem 0.6rem; border-radius: 0.5rem; color: var(--a-slate); }
.ls-nav.is-on { background: #e9ebf0; color: var(--a-ink); font-weight: 500; }
.ls-nav + .ls-mod { margin-top: 0.7rem; }
.ls-les {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: var(--a-slate);
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}
.ls-les span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-les i {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1.5px #c9cdd4;
  color: #fff;
  transition: background-color 300ms ease, box-shadow 300ms ease;
}
.ls-les i svg { width: 0.6rem; height: 0.6rem; opacity: 0; transition: opacity 300ms ease; }
.ls-les.is-now { background: var(--a-indigo-soft); color: var(--a-indigo); font-weight: 500; }
.ls-les.is-now i { box-shadow: inset 0 0 0 0.3rem var(--a-indigo-soft); background: var(--a-indigo); }
.ls-les.is-done { border-color: var(--a-ok-line); background: var(--a-ok-soft); color: #065f46; }
.ls-les.is-done i { box-shadow: none; background: #10b981; }
.ls-les.is-done i svg { opacity: 1; }
.ls-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.1rem; padding: 0 1.5rem; border-bottom: 1px solid var(--a-line); }
.ls-top .ed-crumbs { min-width: 0; }
.ls-step { flex-shrink: 0; color: var(--a-quiet); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.ls-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ls-scroll { position: relative; max-width: 44rem; margin-inline: auto; padding: 1.25rem 2rem 1.5rem; transition: transform 900ms var(--ps-ease); }
.ls-meta { color: var(--a-slate); font-size: 0.75rem; }
.ls .ed-h1 { margin-top: 0.25rem; }
.ls-video { position: relative; aspect-ratio: 16 / 9; margin-top: 0.9rem; border-radius: 0.75rem; background: #14142a; color: #fff; overflow: hidden; }
.ls-slide {
  position: absolute;
  inset: 16% 14% 22%;
  display: grid;
  align-content: center;
  gap: 0.4rem;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  background: #f4f5f7;
  color: var(--a-slate);
  font-size: 0.8125rem;
}
.ls-slide b { color: var(--a-ink); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; }
.ls-slide span::before { content: ""; display: inline-block; width: 0.3rem; height: 0.3rem; margin-right: 0.5rem; border-radius: 9999px; background: var(--a-indigo); vertical-align: 0.15em; }
.ls-video-title { position: absolute; left: 1rem; top: 0.7rem; font-size: 0.875rem; font-weight: 600; transition: opacity 300ms ease; }
.ls-mod { gap: 0.5rem; }
.ls-mod b { min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-mod span { flex-shrink: 0; }
.ls-ctl { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.55rem; display: flex; flex-wrap: wrap; gap: 0 0.9rem; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.ls-seek { flex-basis: 100%; height: 3px; margin-bottom: 0.4rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.ls-seek b { display: block; height: 100%; background: #fff; transform: scaleX(0.33); transform-origin: left center; }
.ls-play { display: grid; place-items: center; width: 1rem; height: 1rem; transition: transform 140ms ease; }
.ls-play .pi { width: 1rem; height: 1rem; color: inherit; }
.ls-ctl { align-items: center; }
.ls-video.is-playing .ls-play .pi { display: none; }
.ls-video.is-playing .ls-play::before { content: ""; width: 0.6rem; height: 0.7rem; border-inline: 0.2rem solid #fff; box-sizing: border-box; }
.ls-video.is-playing .ls-video-title { opacity: 0; }
.ls-ul { max-width: 40rem; margin: 0.4rem 0 0; padding-left: 1.25rem; list-style: disc; }
.ls-card { margin-top: 1.4rem; padding: 1rem 1.25rem 1.1rem; border: 1px solid var(--a-line); border-radius: 0.875rem; }
.ls-card small { display: block; color: var(--a-quiet); font-size: 0.75rem; }
.ls-card > b { display: block; margin-top: 0.15rem; font-size: 1.0625rem; font-weight: 600; }
.ls-card p { margin-top: 0.2rem; color: var(--a-slate); font-size: 0.8125rem; }
.ls-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 0.8rem; }
.ls-actions .ps-btn { padding: 0.5rem 0.9rem; font-size: 0.8125rem; }
.ls-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border: 1px solid var(--a-ok-line); border-radius: 0.5rem; background: var(--a-ok-soft); color: #065f46; font-size: 0.8125rem; font-weight: 500; }
.ls-chip .pi { color: inherit; }
.ls-skip { color: var(--a-slate); font-size: 0.8125rem; }
.ls-card.is-open [data-when="done"], .ls-card:not(.is-open) [data-when="open"] { display: none; }

/* ── Organization scene: a new run from an existing programme ── */
.rn .ed-main, .og .ed-main, .cl .ed-main { position: relative; }
.rn .bd-body { padding-top: 1.25rem; }
.rn .rs-row { grid-template-columns: minmax(0, 1.5fr) 5.5rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); font-size: 0.8125rem; }
.rn-name { min-width: 0; }
.rn-name b { display: block; font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rn-name small, .rn-num small { display: block; color: var(--a-quiet); font-size: 0.75rem; white-space: nowrap; }
.rn-dim { color: var(--a-quiet); }
.rn-num { text-align: right; font-variant-numeric: tabular-nums; }
.rn .rs-row--head > :last-child { text-align: right; }
.rn-arch { margin-top: 0.9rem; color: var(--a-slate); font-size: 0.8125rem; }
.rn-note { margin-top: 0.3rem; color: var(--a-slate); font-size: 0.75rem; line-height: 1.45; }

/* ── Organization scene: overview and products ── */
.og-org { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; font-weight: 600; }
.og-org i { display: grid; flex-shrink: 0; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 0.35rem; background: var(--a-indigo); color: #fff; font-size: 0.6875rem; font-weight: 700; }
.og-cap { margin: 1rem 0.5rem 0.3rem; color: var(--a-quiet); font-size: 0.6875rem; font-weight: 600; }
.og-course { padding: 0.35rem 0.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-run { display: flex; align-items: center; gap: 0.5rem; margin-left: 1rem; padding: 0.3rem 0.75rem; border-left: 1px solid var(--a-line); color: var(--a-slate); }
.og-run::before { content: ""; flex-shrink: 0; width: 0.35rem; height: 0.35rem; border-radius: 9999px; background: #d5d9e0; }
.og-run.is-live::before { background: #10b981; }
.og-all { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.4rem 0.5rem; border-radius: 0.5rem; color: var(--a-slate); transition: background-color 240ms ease, color 240ms ease; }
.og-all.is-on { background: #e9ebf0; color: var(--a-ink); font-weight: 500; }
.og-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.1rem; padding: 0 1.25rem; border-bottom: 1px solid var(--a-line); }
.og-top .ed-crumbs span:first-child { color: var(--a-slate); font-weight: 400; }
.og-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.og-card { min-width: 0; padding: 0.8rem 0.9rem; border: 1px solid var(--a-line); border-radius: 0.75rem; }
.og-card-top { display: flex; align-items: center; justify-content: space-between; }
.og-card-top b { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.og-ico { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; background: var(--a-hover); }
.og-card > b { display: block; margin-top: 0.5rem; font-weight: 600; }
.og-link { display: inline-block; margin-top: 0.15rem; color: var(--a-indigo); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; transition: transform 140ms ease; }
.og-sum-h { display: block; margin-top: 1.25rem; font-weight: 600; }
.og-sum-note { display: block; color: var(--a-quiet); font-size: 0.75rem; }
.og-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.7rem; padding: 0.9rem 0; border: 1px solid var(--a-line); border-radius: 0.75rem; }
.og-sum > div { min-width: 0; padding: 0 1.1rem; }
.og-sum > div + div { border-left: 1px solid var(--a-line-soft); }
.og-sum b { display: block; font-size: 1.375rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.og-sum b i { color: var(--a-quiet); font-size: 0.8125rem; }
.og-sum small { display: block; color: var(--a-slate); font-size: 0.75rem; }
.og .rs-row { grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 0.7fr)); }
.og .rs-row > :nth-child(n + 2) { text-align: right; font-variant-numeric: tabular-nums; }
.og .rs-row:not(.rs-row--head) { padding-block: 0.7rem; }
.og-name { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.og-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-name .pi { color: var(--a-indigo); }

/* ── Organization scene: one calendar for every course ── */
.cl-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.1rem; padding: 0 1.25rem; border-bottom: 1px solid var(--a-line); }
.cl-top > b { font-size: 1.0625rem; font-weight: 600; }
.cl .cp-menu { left: auto; right: 0; min-width: 13rem; }
.cl-body { flex: 1; min-height: 0; padding: 0.9rem 1.25rem 0; overflow: hidden; }
.cl-month { display: flex; align-items: center; gap: 0.75rem; }
.cl-month b { font-size: 1.0625rem; font-weight: 600; }
.cl-month small { margin-left: auto; color: var(--a-quiet); font-size: 0.75rem; }
.cl-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 0.7rem; border: 1px solid var(--a-line); border-bottom: 0; border-radius: 0.75rem 0.75rem 0 0; overflow: hidden; }
.cl-dow { padding: 0.35rem 0; border-bottom: 1px solid var(--a-line); background: var(--a-canvas); color: var(--a-slate); font-size: 0.6875rem; text-align: center; }
.cl-day { min-width: 0; min-height: 6.5rem; padding: 0.4rem 0.3rem; border-top: 1px solid var(--a-line-soft); border-left: 1px solid var(--a-line-soft); font-size: 0.6875rem; }
.cl-day:nth-child(7n + 1) { border-left: 0; }
.cl-day.is-out { background: var(--a-canvas); color: var(--a-quiet); }
.cl-day > span { display: block; padding: 0 0.2rem; }
.cl-ev {
  margin-top: 0.3rem;
  padding: 0.25rem 0.35rem;
  border-left: 2px solid #0d9488;
  border-radius: 0.3rem;
  background: #f0fdfa;
  line-height: 1.3;
  transition: opacity 360ms ease, transform 420ms var(--ps-ease);
}
.cl-ev small { display: block; color: var(--a-slate); font-size: 0.625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ev b { display: block; font-size: 0.6875rem; font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
.cl-ev.is-off { opacity: 0; transform: scale(0.96); }

@container (max-width: 700px) {
  .rn .rs-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rn .rs-row > :nth-child(n + 3) { display: none; }
  .og-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .og-sum > div { padding: 0 0.7rem; }
  .og-sum b { font-size: 1.125rem; }
  .og .rs-row { grid-template-columns: minmax(0, 1fr) repeat(2, 3.5rem); }
  .og .rs-row > :nth-child(2), .og .rs-row > :nth-child(5) { display: none; }
}
@container (max-width: 640px) {
  .sb .bd-body, .qz .bd-body, .rn .bd-body { padding: 1rem 1rem 0; }
  .qz-head small, .cl-month small { display: none; }
  .ls-top, .og-top, .cl-top { padding-inline: 1rem; }
  .ls-scroll { padding: 1rem 1rem 1.25rem; }
  .ls-slide { inset: 18% 8% 24%; padding: 0.6rem 0.9rem; font-size: 0.6875rem; }
  .ls-slide b { font-size: 0.875rem; }
  .cl-body { padding: 0.75rem 0.75rem 0; }
  .cl-day { padding: 0.3rem 0.15rem; }
  .cl-ev { padding: 0.2rem 0.25rem; }
  .cl-ev small:last-child { display: none; }
}