*{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; padding: 8px 14px; background: #eef2f4; color: #192335; border-top: 1px solid #d7dfe5; }
#case-sequence[hidden] { display: none; }
#case-sequence ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
#case-sequence li { display: grid; gap: 2px; min-width: 0; padding: 5px 8px; background: #fff; border: 1px solid #d7dfe5; border-radius: 5px; }
#case-sequence .case-step-label { color: #31485a; font-size: 10px; font-weight: 700; }
#case-sequence strong { font-size: 13px; }
#case-sequence li span:last-child { color: #4b5f70; font-size: 10px; }