/* The supplied 2172 × 724 PNG is unchanged. Hide only its empty canvas margins.
   The visible artwork spans roughly y=245–455; controls use native x coordinates. */
.illustrated-header{display:flex;flex-direction:column;align-items:center;gap:0;min-height:0;width:100%;padding:0;border:0;border-image:none;background:none;box-shadow:none;filter:none}
.illustrated-header .brand-block{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:1520px;padding:0 28px}
.illustrated-header .brand{gap:16px;color:#07305a}
.illustrated-header .brand-logo{width:110px;height:68px;max-width:none;max-height:none;object-fit:contain}
.illustrated-header .brand-small{display:none}
.illustrated-header .brand strong{font-size:28px;text-shadow:0 1px 3px #fff6e5}
.illustrated-header .active-class{align-self:center;max-width:340px;margin:0;padding:8px 14px;min-height:44px;font-size:14px;border-radius:24px;background:#fff8e9ed}
.illustrated-header .mini-timer{position:static;margin-left:auto;min-height:44px;background:#fff8e9ed;font-size:18px}
.navigation-artboard{position:relative;width:100%;max-width:1520px;aspect-ratio:2172/250;container-type:inline-size;isolation:isolate}
.navigation-art-window{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.navigation-art{position:absolute;left:0;top:-90%;width:100%;height:auto;max-width:none}
.illustrated-header .header-nav,.illustrated-header .header-actions{position:absolute;inset:0;display:block;margin:0;padding:0;pointer-events:none}
.illustrated-header .nav-button,.illustrated-header #settings-button,.illustrated-header #present-button{position:absolute;top:50%;transform:translate(-50%,-50%);min-height:44px;padding:4px;pointer-events:auto;border:0;border-image:none;background:none;box-shadow:none;color:#12395d;font-size:clamp(16px,1.55cqw,24px);font-weight:600;white-space:nowrap;gap:8px;display:flex;align-items:center;justify-content:center;border-radius:18px;line-height:1.2}
.illustrated-header .nav-button .icon{width:clamp(19px,1.8cqw,28px);height:clamp(19px,1.8cqw,28px)}
.illustrated-header #nav-videos{left:calc(310 / 2172 * 100%);width:calc(350 / 2172 * 100%);height:58%}
.illustrated-header #nav-tools{left:calc(790 / 2172 * 100%);width:calc(370 / 2172 * 100%);height:60%;color:#fff7e5}
.illustrated-header #nav-students{left:calc(1210 / 2172 * 100%);width:calc(290 / 2172 * 100%);height:56%}
.illustrated-header #nav-backgrounds{left:calc(1540 / 2172 * 100%);width:calc(305 / 2172 * 100%);height:56%}
.illustrated-header #settings-button{left:calc(1840 / 2172 * 100%);width:calc(110 / 2172 * 100%);height:56%;color:white}
.illustrated-header #present-button{left:calc(1997 / 2172 * 100%);width:calc(110 / 2172 * 100%);height:56%;color:white;min-width:44px}
.illustrated-header #present-button>span:last-child{display:none}
.illustrated-header #settings-button .icon,.illustrated-header #present-button .icon{width:clamp(22px,2.2cqw,34px);height:clamp(22px,2.2cqw,34px)}
.illustrated-header .nav-button:hover{background:#fff7e524}
.illustrated-header .nav-button:focus-visible,.illustrated-header #settings-button:focus-visible,.illustrated-header #present-button:focus-visible{outline:3px solid #083965;outline-offset:1px;box-shadow:0 0 0 5px #fff7dc}
.illustrated-header #nav-tools:focus-visible{outline-color:#fff7dc;box-shadow:0 0 0 5px #083965}
.illustrated-header #support-link{position:absolute;right:0;top:0;pointer-events:auto}
.local-file-notice{margin:8px;padding:12px 18px;border-radius:12px;background:#fff7dc;color:#12395d;font:15px/1.5 system-ui}
.local-file-notice a{font-weight:700}
.icon-file{mask:none!important;-webkit-mask:none!important;background:none!important;object-fit:contain}
/* Tablet still uses the complete illustration. Phone controls wrap at readable sizes. */
@media(min-width:701px) and (max-width:1100px){
  .illustrated-header .brand-logo{width:94px;height:58px}
  .illustrated-header .brand strong{font-size:25px}
  .illustrated-header .nav-button{gap:5px;font-size:clamp(14px,1.9cqw,19px)}
  .illustrated-header #nav-backgrounds .icon{display:none}
  .illustrated-header #settings-button,.illustrated-header #present-button{width:max(44px,calc(110 / 2172 * 100%))}
}
@media(max-width:700px){
  .illustrated-header{gap:10px}
  .illustrated-header .brand-block{padding:4px 6px;gap:4px 12px;flex-wrap:wrap}
  .illustrated-header .brand{gap:10px}
  .illustrated-header .brand-logo{width:88px;height:55px}
  .illustrated-header .brand strong{font-size:24px}
  .illustrated-header .active-class{font-size:12px;max-width:100%;padding:6px 12px;margin-right:auto}
  .illustrated-header .mini-timer{font-size:16px;margin-left:0}
  .navigation-artboard{aspect-ratio:auto;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:22px;background:#fff7e5;border:2px solid #e6b54e;box-shadow:0 3px 0 #a97432}
  .navigation-art-window{display:none}
  .illustrated-header .header-nav{order:0;position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px;pointer-events:auto;width:100%}
  .illustrated-header .nav-button{position:static!important;transform:none!important;width:100%!important;height:auto!important;min-height:48px;font-size:17px;padding:8px;gap:8px;background:#f0e5cf}
  .illustrated-header #nav-tools{background:#0753a9;color:#fff7dc}
  .illustrated-header .nav-button .icon{display:inline-block;width:21px;height:21px}
  .illustrated-header .nav-button [data-icon]{display:inline-block}
  .illustrated-header .header-actions{order:1;position:static;display:flex;justify-content:flex-end;gap:10px;pointer-events:auto}
  .illustrated-header #settings-button,.illustrated-header #present-button{position:static;transform:none;width:auto;height:44px;min-width:44px;padding:9px 13px;border-radius:16px;background:#0962b6;color:white;font-size:16px}
  .illustrated-header #present-button{background:#c4314d}
  .illustrated-header #present-button>span:last-child{display:inline}
  .illustrated-header #settings-button .icon,.illustrated-header #present-button .icon{width:24px;height:24px}
}
/* A quiet cream backing keeps the supplied blue logo readable on every scene. */
.illustrated-header .brand{padding:6px 16px;border:1px solid #f0d291;border-radius:22px;background:#fff8e9f5;box-shadow:0 2px 5px #12395d18}
.illustrated-header .brand strong{text-shadow:none}
@media(max-width:700px){.illustrated-header .brand{padding:5px 10px;width:100%;justify-content:flex-start}.illustrated-header .brand-block{padding:0 2px}}
.illustrated-header .nav-button:not(:disabled):active{transform:translate(-50%,-50%) scale(.98)}