*{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}
.masthead{height:65px;padding:10px 24px;display:flex;align-items:center;gap:24px;background:var(--demo-primary,#162838);color:#fff;flex:none;border-bottom:2px solid var(--demo-accent,#8db5d6)}
.brand{display:flex;align-items:center;gap:24px;min-width:0}
.brand strong{font-size:22px;line-height:1.1;letter-spacing:-.035em;font-weight:780;white-space:nowrap}
.brand-logo{width:180px;height:42px;object-fit:contain;object-position:left center;flex:none}
.brand-logo[data-logo-style="compact"]{width:94px;height:44px}.brand-logo[data-logo-style="square"]{width:67px;height:47px}
.brand-logo[hidden],.brand strong[hidden]{display:none}
[data-brand-header="light"] .masthead{background:#fff;color:#192335}
[data-brand-header="light"] .brand>span{color:#57616e;border-color:#19233522}
[data-brand-header="light"] .sample-badge{color:#6c551f}
[data-educator="oliver-kell"] .brand strong{font-family:Georgia,"Times New Roman",serif;font-size:26px;font-weight:600;letter-spacing:-.045em}
[data-educator="stockbee"] .brand-logo{width:180px;height:44px}
.study-reference[hidden]{display:none}
.brand>span{border-left:1px solid #ffffff35;padding-left:22px;font-size:10px;font-weight:650;letter-spacing:.1em;color:#ffffffc9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sample-badge{flex:none;margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.1em;border:1px solid var(--demo-accent,#8db5d6);border-radius:4px;padding:6px 8px;color:#fff;white-space:nowrap}
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){.masthead{gap:16px;padding-inline:16px}.brand{gap:16px}.brand strong{font-size:19px}.brand>span{padding-left:16px;max-width:42vw}.sample-badge{font-size:8px}.demo-footer>span:last-child{display:none}}
@media(max-width:800px){.masthead{height:54px;padding:7px 12px;gap:14px}.brand{gap:12px}.brand strong{font-size:17px}.brand>span{display:none}.sample-badge{font-size:8px}.demo-footer{font-size:8px;padding:5px 8px;gap:6px}.demo-footer>span:first-child{max-width:255px}}