.demo-scorm {
  --text: #241c2c;
  --muted: #4e4458;
  --line: #dcd0ea;
  --surface: #fff;
  --surface-2: #f6efff;
  --accent: #5708ad;
  --accent-2: #3e167d;
  --ok: #157348;
  --warn: #8d4806;
  --danger: #a61b36;
  --mono: ui-monospace, Consolas, monospace;
  color: var(--text);
}
.demo-scorm.hc {
  --text: #fff;
  --muted: #fff;
  --line: #fff;
  --surface: #000;
  --surface-2: #121212;
  --accent: #ffe500;
  --accent-2: #83f3ff;
  --ok: #76ff9b;
  --warn: #ffd580;
  --danger: #ffa6b2;
  background: var(--surface);
  padding: 15px;
  border-radius: 12px;
}
.demo-scorm :is(h1,h2,h3) { color: var(--text); }
.demo-scorm.hc :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.demo-scorm .demo-intro { margin-bottom: 22px; }
.demo-scorm .pitch { max-width: 73ch; margin-top: 12px; color: var(--muted); }
.demo-scorm .hd__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.demo-scorm .btn {
  padding: 8px 13px;
  min-height: 40px;
  font-size: .88rem;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 7px;
  white-space: normal;
}
.demo-scorm .btn:hover,
.demo-scorm .btn[aria-pressed="true"] { background: var(--surface-2); }
.demo-scorm .stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 32%);
  gap: 16px;
  align-items: start;
}
.demo-scorm :is(.stage__player,.stage__panel) {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
}
.demo-scorm .stage__panel { padding: 14px; }
.demo-scorm :is(.player__chrome,.panel__head,.panel__bar,.modal__head) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.demo-scorm .player__chrome {
  background: var(--surface-2);
  padding: 9px 12px;
  font-size: .82rem;
  border-bottom: 1px solid var(--line);
}
.demo-scorm .player__badge { color: var(--ok); font-weight: 650; }
.demo-scorm .player__badge[data-off="1"] { color: var(--muted); }
.demo-scorm #sco-frame {
  display: block;
  width: 100%;
  height: min(75vh, 690px);
  min-height: 390px;
  background: #fff;
  border: 0;
  border-radius: 0;
}
.demo-scorm :is(.panel__title,.modal__head h2) { font-size: 1.13rem; }
.demo-scorm .panel__live { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.demo-scorm .panel__live.on { background: var(--ok); }
.demo-scorm .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-block: 14px; }
.demo-scorm .kpi { padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; }
.demo-scorm .kpi dt { color: var(--muted); font-size: .75rem; }
.demo-scorm .kpi dd { font-family: var(--mono); font-weight: 650; }
.demo-scorm #kpi-status:is([data-state="completed"],[data-state="passed"]) { color: var(--ok); }
.demo-scorm #kpi-status[data-state="incomplete"] { color: var(--warn); }
.demo-scorm #kpi-status[data-state="failed"] { color: var(--danger); }
.demo-scorm .panel__sub { font-size: .94rem; }
.demo-scorm .log {
  list-style: none;
  height: clamp(220px, 34vh, 340px);
  overflow-y: auto;
  margin-top: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: .76rem;
}
.demo-scorm .log li { padding: 3px 0; border-bottom: 1px solid var(--line); }
.demo-scorm .log li:last-child { border-bottom: 0; }
.demo-scorm .log :is(.t,.arrow,.log__empty) { color: var(--muted); }
.demo-scorm .log .fn { color: var(--accent-2); font-weight: 650; }
.demo-scorm .log .val { color: var(--ok); }
.demo-scorm .log li[data-kind="commit"] .fn { color: var(--warn); }
.demo-scorm .panel__foot { margin-top: 10px; color: var(--muted); font-size: .81rem; }
.demo-scorm dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(720px, 92vw);
  max-height: 85vh;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
}
.demo-scorm dialog::backdrop { background: #160729b3; }
.demo-scorm .modal { padding: 18px; }
.demo-scorm .modal__note { margin-block: 10px; color: var(--muted); font-size: .9rem; }
.demo-scorm .dmtable { font-size: .77rem; font-family: var(--mono); }
.demo-scorm .dmtable :is(th,td) { color: var(--text); background: var(--surface); border-color: var(--line); }
.demo-scorm .dmtable th { background: var(--surface-2); }
.demo-scorm .dmtable td:last-child { color: var(--ok); }
.demo-scorm .visually-hidden { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.demo-scorm .ft { max-width: 78ch; margin-top: 18px; color: var(--muted); font-size: .89rem; }

@media (max-width: 940px) {
  .demo-scorm .stage { grid-template-columns: 1fr; }
  .demo-scorm .stage__panel:not(.open) { display: none; }
  .demo-scorm #sco-frame { height: min(70vh, 620px); }
}
@media (min-width: 941px) {
  .demo-scorm #btn-console { display: none; }
}