/* LAUNCH ASDAN shared visual-teaching layer
   Progressive enhancement only: existing strand colours, wording and controls remain authoritative. */
:root {
  --vu-focus: var(--task-border, #D3A03C);
  --vu-primary: var(--lo-border, #4A6FA5);
  --vu-model: var(--ido-border, #C0784A);
  --vu-together: var(--wedo-border, #2E8F7B);
  --vu-surface: rgba(255,255,255,.96);
  --vu-ink: var(--text, #1f2937);
  --vu-shadow: 0 18px 42px rgba(15,23,42,.14);
  --vu-shadow-raised: 0 24px 60px rgba(15,23,42,.2);
  --vu-ease: cubic-bezier(.2,.7,.2,1);
}

html[data-visual-upgrade="ready"] {
  scroll-behavior: smooth;
}

html[data-visual-upgrade="ready"] body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.slide-container {
  background:
    radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--vu-primary) 8%, transparent), transparent 34%),
    radial-gradient(circle at 88% 86%, color-mix(in srgb, var(--vu-model) 7%, transparent), transparent 32%),
    var(--bg, #fff);
}

.slide {
  isolation: isolate;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  box-shadow: var(--vu-shadow);
  transition: box-shadow .28s var(--vu-ease), border-color .28s var(--vu-ease);
}

.slide.active {
  box-shadow: var(--vu-shadow-raised);
}

.slide.active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--vu-primary) 4%, transparent), transparent 38%);
}

.slide h1,
.slide h2 {
  text-wrap: balance;
}

.slide p,
.slide li,
.note,
.bank {
  text-wrap: pretty;
}

.li-box,
.ido-box,
.task-box,
.scaffold-box,
.aspire-box,
.sc-box,
.wedo-capture,
.compare-card,
.react-q,
.bio-block,
.lundy-box,
.card,
.note,
.bank {
  box-shadow: 0 7px 18px rgba(15,23,42,.07);
}

.controls,
.fact-nav,
.timer-btns,
.level-toggle,
.v5-step-controls {
  align-items: center;
}

.controls {
  max-width: calc(100vw - 32px);
  padding: 8px;
  border: 1px solid rgba(148,163,184,.55);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(15,23,42,.16);
  flex-wrap: wrap;
  touch-action: manipulation;
}

.controls button {
  flex: 0 0 auto;
}

:where(button, a, [role="button"], [tabindex]):focus-visible {
  outline: 4px solid var(--vu-focus) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 7px rgba(255,255,255,.94) !important;
}

:where(button, [role="button"], .match-pill, .match-target, .pres-card, .hl-sentence, .vu-checkpoint) {
  min-height: 44px;
}

:where(button, [role="button"], .match-pill, .match-target, .pres-card, .hl-sentence, .vu-checkpoint):active {
  transform: translateY(1px) scale(.99) !important;
}

.match-pill.selected,
.pres-card[aria-pressed="true"],
.hl-sentence[aria-pressed="true"],
.vu-checkpoint[aria-pressed="true"],
[aria-expanded="true"] {
  outline: 4px double currentColor;
  outline-offset: 3px;
}

.match-target {
  position: relative;
}

.match-target[data-vu-state] {
  padding-inline-end: 3.1rem;
}

.match-target[data-vu-state]::after {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  transform: translateY(-50%);
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 900;
}

.match-target[data-vu-state="correct"]::after {
  content: "✓";
}

.match-target[data-vu-state="incorrect"]::after {
  content: "×";
}

.match-target.correct {
  border-style: double !important;
  border-width: 4px !important;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.78), 0 0 0 2px currentColor;
}

.match-target.wrong {
  border-style: dashed !important;
  border-width: 4px !important;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.78);
}

.match-pill.selected {
  animation: vuSelectReady .32s var(--vu-ease) both;
}

.slide:has(.match-pill.selected) .match-target:not(.correct) {
  animation: vuTargetReady .7s var(--vu-ease) 1;
}

.pres-card,
.hl-sentence {
  position: relative;
}

.pres-card.done::after {
  content: "✓";
  position: absolute;
  inset-inline-end: 9px;
  top: 8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  font-weight: 900;
}

.hl-sentence[aria-pressed="true"] {
  text-decoration: underline double;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.fact-dot[aria-current="step"] {
  outline: 3px double currentColor;
  outline-offset: 3px;
  transform: scale(1.25);
}

.v5-step.revealed,
.answer[aria-hidden="false"],
.hint-box.show,
.wagoll-panel.visible {
  border-left-style: double;
  border-left-width: 7px;
}

/* Reveal movement is scoped to a one-off slide-entry state. If JavaScript fails,
   lesson content remains visible rather than becoming trapped at opacity: 0. */
html[data-visual-upgrade="ready"] .slide.vu-entering .vu-reveal {
  opacity: 0;
  transform: translateY(12px);
}

html[data-visual-upgrade="ready"] .slide.active.vu-entering.vu-ready .vu-reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity .38s var(--vu-ease),
    transform .38s var(--vu-ease);
  transition-delay: min(calc(var(--vu-order, 0) * 55ms), 440ms);
}

.slide:not(.active) *,
.slide:not(.active) *::before,
.slide:not(.active) *::after {
  animation-play-state: paused !important;
}

.slide.vu-motion-settled :where(.glow, .spin, .hand, .ride, .rip, .sweep, .title-dot) {
  animation-play-state: paused !important;
}

/* Purposeful diagram entrance: the original authored SVG motion remains in charge,
   while the shared layer gives it a short teaching spotlight and then settles it. */
.ilm {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ilm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-125%);
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.68) 49%, transparent 64%);
}

html[data-visual-upgrade="ready"] .slide.active.vu-entering .ilm::after {
  animation: vuDiagramSweep .95s var(--vu-ease) .18s 1 both;
}

html[data-visual-upgrade="ready"] .slide.active.vu-entering .ilm svg {
  animation: vuDiagramSettle .62s var(--vu-ease) 1 both;
}

.ilm svg :where(.draw) {
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ilm svg :where(.pop, .rise, .fill, .draw) {
  will-change: transform, opacity, stroke-dashoffset;
}

.ilm svg :where(.glow, .rip) {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--vu-primary) 35%, transparent));
}

/* We Do progress and teacher-controlled checkpoints. No lesson wording is added. */
.slide[data-vu-we-do="true"] .vu-we-do-meter {
  --vu-progress: 0%;
  position: relative;
  flex: 0 0 auto;
  height: 9px;
  margin: 2px 170px 12px 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--vu-together) 52%, #cbd5e1);
  border-radius: 999px;
  background: color-mix(in srgb, var(--vu-together) 12%, #fff);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.1);
}

.vu-we-do-meter__fill {
  display: block;
  width: var(--vu-progress);
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--vu-together) 78%, #fff),
      var(--vu-together));
  transition: width .36s var(--vu-ease);
}

.slide.vu-activity-complete .vu-we-do-meter__fill {
  animation: vuMeterComplete .58s var(--vu-ease) 1;
}

.vu-checkpoint {
  position: relative;
  cursor: pointer;
  padding-inline-end: 3.25rem !important;
  transition:
    transform .2s var(--vu-ease),
    box-shadow .2s var(--vu-ease),
    border-style .2s var(--vu-ease);
}

.vu-checkpoint::after {
  content: "";
  position: absolute;
  inset-inline-end: 10px;
  top: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid var(--vu-together);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--vu-together);
  font-size: 1rem;
  line-height: 1;
  font-weight: 900;
}

.vu-checkpoint[aria-pressed="true"] {
  border-style: double !important;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--vu-together) 25%, transparent),
    0 10px 24px rgba(15,23,42,.1);
}

.vu-checkpoint[aria-pressed="true"]::after {
  content: "✓";
  background: color-mix(in srgb, var(--vu-together) 12%, #fff);
}

.vu-checkpoint:hover,
.vu-checkpoint:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(15,23,42,.12);
}

.vu-live-region {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes vuSelectReady {
  0% { transform: scale(.98); }
  65% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@keyframes vuTargetReady {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vu-together) 20%, transparent); }
}

@keyframes vuDiagramSweep {
  0% { opacity: 0; transform: translateX(-125%); }
  22% { opacity: .8; }
  100% { opacity: 0; transform: translateX(125%); }
}

@keyframes vuDiagramSettle {
  0% { opacity: .72; transform: scale(.985); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes vuMeterComplete {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.22); }
}

@media (max-width: 900px) {
  .slide {
    width: 96%;
    height: 94%;
    padding: 28px;
    border-radius: 16px;
  }

  .controls {
    right: 10px;
    bottom: 14px;
    gap: 6px;
  }

  .controls button {
    padding: 9px 13px;
  }

  .content-grid,
  .arrival-grid,
  .compare-grid-3,
  .react-panel,
  .lundy-grid {
    gap: 14px;
  }

  .slide[data-vu-we-do="true"] .vu-we-do-meter {
    margin-right: 130px;
  }
}

@media (max-width: 640px) {
  .slide {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border-top-width: 7px;
    padding: 22px 18px 148px;
  }

  .slide h1 {
    font-size: clamp(1.65rem, 8vw, 2.15rem);
  }

  .slide h2 {
    margin-right: 0;
    font-size: clamp(1.35rem, 6.5vw, 1.8rem);
  }

  .content-grid,
  .arrival-grid,
  .compare-grid-3,
  .react-panel,
  .lundy-grid,
  .pres-wrap {
    grid-template-columns: 1fr !important;
  }

  .controls {
    left: 8px;
    right: 8px;
    bottom: 12px;
    max-width: none;
    justify-content: center;
    overflow: visible;
    flex-wrap: wrap;
  }

  .controls button {
    flex: 1 1 92px;
    min-width: 0;
  }

  .progress-label {
    left: 12px;
    right: 12px;
    bottom: 108px;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .xp-wrap {
    max-width: calc(100vw - 28px);
  }

  .slide[data-vu-we-do="true"] .vu-we-do-meter {
    margin: 2px 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-visual-upgrade="ready"] {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  html[data-visual-upgrade="ready"] .slide.vu-entering .vu-reveal,
  html[data-visual-upgrade="ready"] .slide.active.vu-entering.vu-ready .vu-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .ilm::after {
    display: none !important;
  }
}

@media print {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }

  .slide,
  .card,
  .note,
  .bank,
  .li-box,
  .ido-box,
  .task-box,
  .scaffold-box,
  .aspire-box,
  .sc-box,
  .wedo-capture {
    box-shadow: none !important;
  }

  .vu-live-region,
  .vu-we-do-meter,
  .vu-checkpoint::after,
  .match-target[data-vu-state]::after,
  .pres-card.done::after,
  .ilm::after {
    display: none !important;
  }

  .vu-checkpoint,
  .match-target[data-vu-state] {
    padding-inline-end: revert !important;
  }
}
/* ASDAN-VISUAL-LEARNING:CSS:BEGIN v1 */
/* ASDAN Visual Learning — progressive enhancement. Rehearsal only. */
.asvl-panel{
  --asvl-accent:var(--wedo-border,var(--btn-bg,var(--accent,#356f83)));
  /* Text-safe variant of whatever accent the host deck supplies. Mixing toward
     black scales every channel by the same factor, so the HUE ANGLE is preserved
     exactly and only lightness moves. 91% is the MINIMUM darkening that clears
     4.6:1 on white for all three pathway accents (BUILD #4E8093 -> 5.08,
     GROW #2E8F7B -> 4.63, LAUNCH #A76A9B -> 4.76); GROW is the binding case.
     This is a TOOLKIT token: the estate's strand colours are untouched, and
     --asvl-accent itself still drives borders, rings and fills unchanged. */
  /* The eyebrow is a CHIP: it brings its own solid background, so the contrast
     pair is KNOWN rather than inherited. Text darkening could never hold a floor
     here -- the header gradient's --wedo-bg tint moves per deck, so the pair
     itself was unstable. 74% is the minimum darkening that satisfies BOTH limbs
     across all nine measured (tint, accent) pairs in the estate: white-on-chip
     >= 4.6:1 (worst 4.68, the olive #8AA662) and chip-vs-header >= 3:1 (worst
     3.94). It supersedes the earlier 91%, which was fitted to three sampled
     accents and fails on the olive. SOLID, never translucent: translucency would
     re-import the moving background and walk the whole defect back in. */
  --asvl-accent-chip:color-mix(in srgb,var(--asvl-accent) 74%,#000);
  /* Same treatment for muted TEXT. Changing the --asvl-muted fallback was inert:
     the host decks define --muted themselves (#64748b), so the fallback never
     fired -- measured on a rendered specimen, not read off the token file. 96%
     is the minimum darkening that clears 4.6:1 on the panel's lightest and
     darkest tints (white 5.09, mint 4.86, cream 4.64). Host theming survives:
     whatever --muted the deck supplies is darkened, not replaced. */
  --asvl-muted-text:color-mix(in srgb,var(--asvl-muted) 96%,#000);
  --asvl-accent-soft:var(--wedo-bg,var(--scaffold-bg,#eef4f7));
  --asvl-ink:var(--text,var(--ink,#17212a));
  --asvl-muted:var(--muted,#64748b);
  --asvl-surface:var(--slide-bg,#fff);
  --asvl-line:color-mix(in srgb,var(--asvl-accent) 34%,transparent);
  --asvl-success:var(--success,#16784a);
  --asvl-error:var(--error,#b42318);
  --asvl-warning:var(--task-border,#a15c00);
  container-type:inline-size;
  position:relative;
  isolation:isolate;
  width:100%;
  margin:18px 0 88px;
  border:3px solid var(--asvl-accent);
  border-radius:18px;
  background:var(--asvl-surface);
  color:var(--asvl-ink);
  box-shadow:0 12px 28px rgb(15 23 42 / .12);
  overflow:hidden;
  font-family:inherit;
  line-height:1.45;
}
.asvl-panel *{box-sizing:border-box}
.asvl-panel h3,.asvl-panel h4,.asvl-panel h5,.asvl-panel p,.asvl-panel ul,.asvl-panel ol{max-width:none}
.asvl-panel h3,.asvl-panel h4,.asvl-panel h5{color:var(--asvl-ink);border:0;margin:0}
.asvl-panel h3{font-size:clamp(1.25rem,3cqi,1.8rem);line-height:1.15}
.asvl-panel h4{font-size:1.08rem;margin-bottom:6px}
.asvl-panel h5{font-size:.96rem;margin-bottom:6px}
.asvl-panel p,.asvl-panel li,.asvl-panel label{color:var(--asvl-ink);font-size:clamp(.92rem,2cqi,1.04rem);line-height:1.48}
.asvl-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px;background:linear-gradient(135deg,var(--asvl-accent-soft),var(--asvl-surface))}
.asvl-header-text{min-width:0}
.asvl-eyebrow{display:inline-block;margin:0 0 6px!important;background:var(--asvl-accent-chip)!important;color:#fff!important;padding:3px 10px!important;border-radius:999px;font-size:.76rem!important;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.asvl-purpose{margin:7px 0 0!important;color:var(--asvl-muted-text)!important}
.asvl-tools{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.asvl-button,.asvl-choice,.asvl-sort-item,.asvl-target-button,.asvl-evidence-card,.asvl-hotspot-button,.asvl-mini-button{
  min-height:44px;
  border:2px solid var(--asvl-accent-chip);
  border-radius:10px;
  background:var(--asvl-accent-chip);
  color:#fff;
  padding:9px 13px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:none;
  text-align:left;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease,opacity .16s ease;
}
.asvl-button:hover,.asvl-choice:hover,.asvl-sort-item:hover,.asvl-target-button:hover,.asvl-evidence-card:hover,.asvl-hotspot-button:hover,.asvl-mini-button:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgb(15 23 42 / .16)}
.asvl-button:focus-visible,.asvl-choice:focus-visible,.asvl-sort-item:focus-visible,.asvl-target-button:focus-visible,.asvl-evidence-card:focus-visible,.asvl-hotspot-button:focus-visible,.asvl-mini-button:focus-visible,.asvl-panel select:focus-visible,.asvl-radio-card input:focus-visible+span,.asvl-help-ladder summary:focus-visible{
  outline:4px solid color-mix(in srgb,var(--asvl-warning) 75%,white);
  outline-offset:3px;
}
.asvl-button[disabled],.asvl-choice[disabled],.asvl-sort-item[disabled],.asvl-target-button[disabled],.asvl-evidence-card[disabled],.asvl-hotspot-button[disabled],.asvl-mini-button[disabled],.asvl-panel select[disabled]{cursor:not-allowed;opacity:.52;transform:none;box-shadow:none}
.asvl-button-secondary{background:var(--asvl-surface);color:var(--asvl-ink);border-color:var(--asvl-line)}
.asvl-notice{margin:0!important;padding:10px 20px;background:color-mix(in srgb,var(--asvl-warning) 12%,var(--asvl-surface));border-block:1px solid color-mix(in srgb,var(--asvl-warning) 35%,transparent);font-size:.86rem!important;font-weight:700}
.asvl-cycle{list-style:none;margin:0!important;padding:12px 20px!important;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:color-mix(in srgb,var(--asvl-ink) 4%,var(--asvl-surface))}
.asvl-cycle li{position:relative;margin:0!important;padding:8px 10px 8px 32px;border:2px solid var(--asvl-line);border-radius:999px;background:var(--asvl-surface);font-size:.76rem!important;font-weight:900;text-align:center}
.asvl-cycle li::before{content:attr(data-stage);position:absolute;left:7px;top:50%;translate:0 -50%;width:20px;height:20px;display:grid;place-items:center;border:2px solid var(--asvl-line);border-radius:50%;font-size:.7rem}
.asvl-cycle li.is-current{border-color:var(--asvl-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--asvl-accent) 16%,transparent)}
.asvl-cycle li.is-current::before{content:"▶";border-color:var(--asvl-accent);color:var(--asvl-accent)}
.asvl-cycle li.is-complete::before{content:"✓";background:var(--asvl-success);border-color:var(--asvl-success);color:#fff}
.asvl-prediction,.asvl-activity,.asvl-locator,.asvl-explanation,.asvl-transfer,.asvl-route{padding:16px 20px;border-top:1px solid var(--asvl-line)}
.asvl-prediction{background:color-mix(in srgb,var(--asvl-accent) 5%,var(--asvl-surface))}
.asvl-choice-row{display:flex;gap:9px;flex-wrap:wrap}
.asvl-choice{flex:1 1 190px;background:var(--asvl-surface);color:var(--asvl-ink);border-color:var(--asvl-line)}
.asvl-choice[aria-pressed="true"]{border-color:var(--asvl-accent);background:var(--asvl-accent-soft);box-shadow:inset 0 0 0 2px var(--asvl-accent)}
.asvl-small{margin:3px 0 10px!important;color:var(--asvl-muted-text)!important;font-size:.86rem!important}
.asvl-prompt{margin:4px 0 13px!important;font-weight:700}
.asvl-activity{position:relative}
.asvl-activity-lock{margin:0 0 12px!important;padding:10px 12px;border:2px dashed var(--asvl-warning);border-radius:10px;background:color-mix(in srgb,var(--asvl-warning) 9%,var(--asvl-surface));font-weight:800}
.asvl-canvas{min-height:120px}
.asvl-feedback{margin-top:13px;padding:11px 13px;border-left:6px solid var(--asvl-accent);border-radius:8px;background:color-mix(in srgb,var(--asvl-accent) 8%,var(--asvl-surface));font-weight:800}
.asvl-feedback.is-success{border-color:var(--asvl-success);background:color-mix(in srgb,var(--asvl-success) 10%,var(--asvl-surface))}
.asvl-feedback.is-retry{border-color:var(--asvl-error);background:color-mix(in srgb,var(--asvl-error) 8%,var(--asvl-surface))}
.asvl-feedback.is-prompt{border-color:var(--asvl-warning);background:color-mix(in srgb,var(--asvl-warning) 9%,var(--asvl-surface))}
.asvl-sort-layout{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(360px,1.4fr);gap:14px}
.asvl-bank,.asvl-sort-target,.asvl-run-card,.asvl-hotspot-note,.asvl-locator-group,.asvl-success-checks{
  border:2px solid var(--asvl-line);border-radius:12px;background:color-mix(in srgb,var(--asvl-ink) 2%,var(--asvl-surface));padding:12px
}
.asvl-item-grid{display:grid;gap:8px}
.asvl-sort-item{width:100%;background:var(--asvl-surface);color:var(--asvl-ink);border-color:var(--asvl-line)}
.asvl-sort-item.is-selected{border-color:var(--asvl-accent);background:var(--asvl-accent-soft);box-shadow:inset 0 0 0 2px var(--asvl-accent)}
.asvl-target-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.asvl-sort-target{min-height:150px}
.asvl-target-button{width:100%;justify-content:center;text-align:center}
.asvl-placed-list{display:grid;gap:6px;margin-top:8px}
.asvl-placed-card{padding:7px 8px;border-left:4px solid var(--asvl-success);border-radius:6px;background:color-mix(in srgb,var(--asvl-success) 8%,var(--asvl-surface));font-size:.84rem;font-weight:700}
.asvl-sequence-list{list-style:none;margin:0 0 12px!important;padding:0!important;display:grid;gap:8px}
.asvl-sequence-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px;border:2px solid var(--asvl-line);border-radius:10px;background:var(--asvl-surface)}
.asvl-sequence-row.is-correct{border-color:var(--asvl-success);background:color-mix(in srgb,var(--asvl-success) 8%,var(--asvl-surface))}
.asvl-sequence-number{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--asvl-accent-chip);color:#fff;font-weight:900}
.asvl-sequence-text{font-weight:750}
.asvl-sequence-controls{display:flex;gap:5px}
.asvl-mini-button{min-height:36px;padding:6px 8px;background:var(--asvl-surface);color:var(--asvl-ink);border-color:var(--asvl-line);font-size:.76rem}
.asvl-evidence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px;margin-bottom:12px}
.asvl-evidence-card{position:relative;background:var(--asvl-surface);color:var(--asvl-ink);border-color:var(--asvl-line);padding-left:40px}
.asvl-evidence-card::before{content:"□";position:absolute;left:12px;top:50%;translate:0 -50%;font-size:1.2rem}
.asvl-evidence-card[aria-pressed="true"]{border-color:var(--asvl-accent);background:var(--asvl-accent-soft)}
.asvl-evidence-card[aria-pressed="true"]::before{content:"☑"}
.asvl-evidence-card.is-correct-choice{border-color:var(--asvl-success)}
.asvl-evidence-card.is-wrong-choice{border-color:var(--asvl-error);text-decoration:line-through 2px color-mix(in srgb,var(--asvl-error) 65%,transparent)}
.asvl-evidence-card.is-missed-choice{border-style:dashed;border-color:var(--asvl-warning)}
.asvl-hotspot-scene{position:relative;aspect-ratio:16/8.7;max-height:390px;border:2px solid var(--asvl-line);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--asvl-accent) 10%,var(--asvl-surface)),var(--asvl-surface))}
.asvl-hotspot-svg{width:100%;height:100%;display:block}
.asvl-scene-line{fill:none;stroke:var(--asvl-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.asvl-scene-shape{fill:var(--asvl-accent-soft);stroke:var(--asvl-accent);stroke-width:1.4}
.asvl-hotspot-button{position:absolute;translate:-50% -50%;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;padding:0;text-align:center;animation:asvl-attention 1.8s ease 2}
.asvl-hotspot-button.is-open{background:var(--asvl-success);border-color:var(--asvl-success)}
.asvl-hotspot-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:10px}
.asvl-hotspot-note p{margin:4px 0 0!important;font-size:.86rem!important}
.asvl-model-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:12px}
.asvl-model-control{display:grid;gap:5px;font-weight:800}
.asvl-panel select{width:100%;min-height:44px;border:2px solid var(--asvl-line);border-radius:9px;background:var(--asvl-surface);color:var(--asvl-ink);padding:8px;font:inherit}
.asvl-run-history{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px;margin-top:12px}
.asvl-run-card{border-left:7px solid var(--asvl-accent)}
.asvl-run-card p{margin:4px 0!important}
.asvl-run-card ul{margin:7px 0 0 18px!important;padding:0!important}
.asvl-run-card li{font-size:.84rem!important}
.asvl-locator{background:color-mix(in srgb,var(--asvl-accent) 5%,var(--asvl-surface))}
.asvl-locator.is-locked{opacity:.68}
.asvl-locator-group{margin:10px 0}
.asvl-locator-group legend{padding:0 5px;font-weight:900}
.asvl-radio-card{display:block;position:relative;margin:6px 0;cursor:pointer}
.asvl-radio-card input{position:absolute;opacity:0;pointer-events:none}
.asvl-radio-card span{display:block;padding:9px 10px 9px 38px;border:2px solid var(--asvl-line);border-radius:9px;background:var(--asvl-surface);font-weight:700}
.asvl-radio-card span::before{content:"○";position:absolute;left:12px;top:50%;translate:0 -50%;font-size:1.15rem}
.asvl-radio-card input:checked+span{border-color:var(--asvl-accent);background:var(--asvl-accent-soft);box-shadow:inset 0 0 0 1px var(--asvl-accent)}
.asvl-radio-card input:checked+span::before{content:"◉";color:var(--asvl-accent)}
.asvl-radio-card input:disabled+span{cursor:not-allowed;opacity:.6}
.asvl-caution{margin:10px 0 0!important;padding:9px 11px;border-left:5px solid var(--asvl-warning);background:color-mix(in srgb,var(--asvl-warning) 8%,var(--asvl-surface));font-size:.82rem!important;font-weight:750}
.asvl-explanation{background:color-mix(in srgb,var(--asvl-success) 4%,var(--asvl-surface))}
.asvl-explanation-body{margin-top:12px;padding:13px;border:2px solid var(--asvl-success);border-radius:12px;background:color-mix(in srgb,var(--asvl-success) 8%,var(--asvl-surface))}
.asvl-completion{font-size:1.05rem!important;font-weight:900}
.asvl-prediction-review{font-size:.86rem!important;color:var(--asvl-muted-text)!important}
.asvl-transfer{background:var(--asvl-surface)}
.asvl-independent-task{padding:13px;border-left:7px solid var(--asvl-accent);background:var(--asvl-accent-soft);font-weight:900}
.asvl-independence-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0!important;padding:0!important;counter-reset:step;list-style:none}
.asvl-independence-steps li{position:relative;min-height:110px;margin:0!important;padding:39px 10px 10px;border:2px solid var(--asvl-line);border-radius:10px;background:var(--asvl-surface);font-size:.86rem!important;font-weight:750}
.asvl-independence-steps li::before{counter-increment:step;content:counter(step);position:absolute;top:8px;left:9px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--asvl-accent-chip);color:#fff;font-weight:900}
.asvl-success-checks{margin:10px 0}
.asvl-success-checks ul{margin:6px 0 0 18px!important;padding:0!important}
.asvl-help-ladder{margin:10px 0;border:2px solid var(--asvl-line);border-radius:10px;background:var(--asvl-surface)}
.asvl-help-ladder summary{padding:10px 12px;cursor:pointer;font-weight:900}
.asvl-help-ladder ol{margin:0 0 12px 28px!important;padding-right:12px}
.asvl-route{background:color-mix(in srgb,var(--asvl-ink) 4%,var(--asvl-surface))}
.asvl-route p{margin:5px 0 0!important;font-size:.82rem!important;color:var(--asvl-muted-text)!important}
.asvl-live{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.asvl-panel.is-transfer-mode>.asvl-prediction,.asvl-panel.is-transfer-mode>.asvl-activity,.asvl-panel.is-transfer-mode>.asvl-locator,.asvl-panel.is-transfer-mode>.asvl-explanation{display:none}
.asvl-static *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@keyframes asvl-attention{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--asvl-accent) 30%,transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--asvl-accent) 0%,transparent)}}
@media (max-width:760px){
  .asvl-header{display:grid}
  .asvl-tools{justify-content:flex-start}
  .asvl-cycle{grid-template-columns:1fr 1fr}
  .asvl-sort-layout{grid-template-columns:1fr}
  .asvl-sequence-row{grid-template-columns:34px 1fr}
  .asvl-sequence-controls{grid-column:2;justify-content:flex-start}
  .asvl-independence-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:460px){
  .asvl-panel{border-radius:12px;margin-bottom:72px}
  .asvl-header,.asvl-prediction,.asvl-activity,.asvl-locator,.asvl-explanation,.asvl-transfer,.asvl-route{padding:14px}
  .asvl-notice,.asvl-cycle{padding-inline:14px!important}
  .asvl-cycle{grid-template-columns:1fr}
  .asvl-choice,.asvl-button{width:100%;text-align:center}
  .asvl-independence-steps{grid-template-columns:1fr}
  .asvl-independence-steps li{min-height:auto}
}
@media (prefers-reduced-motion:reduce){
  .asvl-panel *,.asvl-panel *::before,.asvl-panel *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  .asvl-panel{display:none!important}
}
/* ASDAN-VISUAL-LEARNING:CSS:END v1 */