*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--demo-background,#f5f7fa);color:#192335;font:13px Inter,ui-sans-serif,system-ui,sans-serif}
body{display:flex;flex-direction:column;overflow:hidden}
.study-reference[hidden]{display:none}
iframe{flex:1;display:block;width:100%;border:0;min-height:0;background:#fff}
.demo-error{padding:20px 24px;margin:0;color:#972b32;background:#fff0f0}
.demo-error[hidden],.lesson-nav[hidden]{display:none}
.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:28px;padding:5px 16px;background:var(--demo-background,#f5f7fa);border-top:1px solid #dde3ee;color:#64748b;font-size:9px;flex:none}
.demo-footer a{color:var(--demo-primary,#274b6c);text-decoration:none;white-space:nowrap}
.demo-footer a:hover{text-decoration:underline}
.demo-footer a:focus-visible{outline:2px solid var(--demo-primary,#274b6c);outline-offset:3px}
@media(max-width:1100px){.demo-footer>span:last-child{display:none}}
@media(max-width:800px){.demo-footer{font-size:8px;padding:5px 8px;gap:6px}.demo-footer>span:first-child{max-width:255px}}

#case-sequence {
  flex: none;
  background: #0d1718;
  color: #eff6ed;
  border-top: 1px solid #304541;
  padding: 8px 15px 9px;
}
#case-sequence[hidden] { display: none; }
#case-sequence ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  list-style: none;
  counter-reset: sequence;
  padding: 0;
  margin: 0;
}
#case-sequence li {
  --step: #c6e86b;
  counter-increment: sequence;
  display: grid;
  gap: 0;
  position: relative;
  padding: 5px 9px 6px 32px;
  min-width: 0;
  background: #162222;
  border: 1px solid #304541;
  border-radius: 5px;
}
#case-sequence li[data-tone="probe"] { --step: #f3a68c; }
#case-sequence li[data-tone="confirm"] { --step: #d5afef; }
#case-sequence li[data-tone="floor"] { --step: #5bc0cc; }
#case-sequence li::before {
  content: counter(sequence, decimal-leading-zero);
  position: absolute;
  top: 7px;
  left: 8px;
  color: var(--step);
  font: 700 10px/1.4 ui-monospace, monospace;
}
#case-sequence .case-step-label {
  color: var(--step);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .07em;
}
#case-sequence strong { font-size: 13px; line-height: 1.35; }
#case-sequence li span:last-child { color: #bfd0cb; font-size: 10px; }
@media (max-width: 730px) {
  #case-sequence { padding: 6px 8px; }
  #case-sequence ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  #case-sequence li { padding-block: 3px; }
}