/* Tool hero: the navy LootDrop band with the tool's own art bleeding in from the right.
   Usage: <section class="app-head hero" style="--art:url(/assets/thumbs/x.jpg?v=2)"> ... <div class="hero-art" aria-hidden="true"></div></section>
   The thumbnail's left third carries its title lettering, so the art is anchored right and masked so only the illustration shows. */
.app-head.hero{padding-block:0;position:relative;overflow:hidden;background:#071326;color:#F5F9FF;border-bottom:0;isolation:isolate}
.app-head.hero .wrap{position:relative;z-index:2;min-height:236px;padding-block:24px 26px;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:18px}
/* the art is laid out at its true 16:9 size against the right edge; the mask drops the thumbnail's own title lettering (its left half) */
.app-head.hero .hero-art{position:absolute;z-index:1;top:0;bottom:0;right:max(0px,calc((100vw - 1500px) / 2));aspect-ratio:16/9;height:100%;
  background:var(--art) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent var(--fade-a,57%),#000 var(--fade-b,71%));mask-image:linear-gradient(90deg,transparent var(--fade-a,57%),#000 var(--fade-b,71%))}
.app-head.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;z-index:3;background:linear-gradient(90deg,var(--yellow) 0 62%,var(--blue) 62% 100%)}
.app-head.hero .app-title{max-width:min(560px,100%)}
.app-head.hero .app-title .badge-ic{display:none}
.app-head.hero .app-title h1{font-size:clamp(40px,5.6vw,68px);font-weight:900;letter-spacing:-.035em;line-height:.95;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 28px rgba(53,184,245,.35)}
.app-head.hero .app-title p{font-size:15.5px;color:#C4D3E6;max-width:46ch;margin-top:10px;line-height:1.45}
.app-head.hero .crumb-t{color:#8FA6C2}
.app-head.hero .actions{position:relative;z-index:2;margin-left:0}
@media (max-width:760px){
  .app-head.hero .wrap{min-height:0;padding-block:26px 24px}
  .app-head.hero .hero-art{right:-38%;opacity:.42}
  .app-head.hero .app-title h1{font-size:clamp(36px,11vw,48px)}
}
/* students and projector views stay compact */
.student .app-head.hero .wrap,.boardmode .app-head.hero .wrap{min-height:0;padding-block:18px 16px}
.student .app-head.hero .app-title h1{font-size:clamp(28px,4vw,38px)}
@media print{.app-head.hero .hero-art,.app-head.hero::after{display:none}}