/* Out of Ctrl: a broken pointer and a Ctrl key escaping its keyboard. */
.site-header{height:auto;min-height:130px;gap:28px;padding:22px 0 25px;position:relative}
.site-header:after{content:'';position:absolute;left:0;bottom:-1px;width:66px;height:3px;background:var(--orange)}
.site-header .brand{display:inline-flex;align-items:center;gap:13px;flex-shrink:0;max-width:100%;padding:3px 10px 4px 0;isolation:isolate}
.brand .brand-emblem{position:relative;display:grid;place-items:center;width:67px;height:76px;flex-shrink:0;color:var(--mint)}
.brand-emblem svg{width:67px;height:67px;transform:rotate(-9deg);filter:drop-shadow(3px 5px 0 #081510);--os-logo-cut:var(--bg);transition:transform .2s ease}
.brand-emblem:before{content:'';position:absolute;inset:9px 4px 5px;background:repeating-linear-gradient(0deg,transparent 0 6px,#bce8ba14 6px 7px);transform:skewY(-12deg)}
.brand-emblem>i{position:absolute;width:7px;height:7px;left:0;bottom:7px;background:var(--orange);transform:rotate(-16deg);box-shadow:8px 10px 0 -2px var(--mint)}
.brand .brand-copy{display:flex;flex-direction:column;gap:15px;min-width:0;font:inherit;letter-spacing:normal}
.brand .site-wordmark{display:flex;align-items:center;gap:12px;white-space:nowrap;color:var(--cream);font:900 clamp(30px,3.4vw,44px)/1 'Arial Black',Arial,sans-serif;letter-spacing:-1.8px}
.brand-out{font-style:italic;text-shadow:0 2px 0 #0006;transform:skewX(-3deg)}
.brand .brand-key{position:relative;display:inline-block;z-index:1;padding:8px 12px 10px;border:1px solid #fff4cc88;border-radius:7px;background:linear-gradient(150deg,#ffe5b936,var(--orange) 70%),var(--orange);box-shadow:inset 0 2px 0 #fff8,inset 0 -4px 0 #0002,0 5px 0 #7d4d32,2px 8px 0 #081510,4px 12px 16px #0004;transform:translateY(-3px) rotate(-7deg);transform-origin:45% 85%;transition:transform .2s ease,box-shadow .2s ease}
.brand .brand-key:before{content:'';position:absolute;inset:4px 5px 7px;border:1px solid #fff4c14d;border-radius:4px;pointer-events:none}
.brand .brand-key>b{position:relative;color:#253129;font:inherit;letter-spacing:-2px;text-shadow:0 1px 0 #fff6}
.brand-key>i{position:absolute;right:-9px;top:-10px;width:6px;height:6px;transform:rotate(18deg);background:var(--orange);box-shadow:10px 13px 0 -1px var(--mint)}
.brand .brand-tagline{display:block;padding-left:2px;color:var(--muted);font:700 9px/1.4 'Courier New',monospace;letter-spacing:1.7px;white-space:normal;text-wrap:balance}
.site-header .header-right{flex-shrink:0;gap:0}
.site-header .language-switch{background:#0b17121f}
.brand:is(:hover,:focus-visible) .brand-key{transform:translateY(-7px) rotate(-11deg);box-shadow:inset 0 2px 0 #fff8,inset 0 -4px 0 #0002,0 5px 0 #7d4d32,3px 11px 0 #081510,6px 16px 18px #0004}
.brand:is(:hover,:focus-visible) .brand-emblem svg{transform:translate(-2px,-2px) rotate(-13deg)}
.brand:active .brand-key{transform:translateY(1px) rotate(-4deg);box-shadow:inset 0 2px 0 #fff8,inset 0 -2px 0 #0002,0 2px 0 #7d4d32,2px 4px 0 #081510}
.mobile-playbar>.mobile-brand{font:900 12px/1 Arial,sans-serif;letter-spacing:-.2px;white-space:nowrap}
.mobile-brand>b{display:inline-block;margin-left:2px;padding:4px 5px;border-radius:3px;background:var(--orange);color:#253129;box-shadow:0 2px 0 #7d4d32;transform:rotate(-5deg);font:inherit}
@media(max-width:760px){
  .site-header{flex-wrap:wrap;gap:20px;min-height:0;padding:22px 0 18px}
  .site-header .brand{margin-right:auto}
  .site-header .header-right{width:100%;justify-content:flex-end}
  .site-header .language-switch{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-header .language-switch button{justify-content:center;padding:8px 7px;font-size:12px}
  .brand .site-wordmark{font-size:36px}
}
@media(max-width:420px){
  .site-header{gap:17px;padding-top:18px}
  .site-header .brand{gap:8px;padding-right:7px}
  .brand .brand-emblem{width:52px;height:64px}.brand-emblem svg{width:55px;height:55px}
  .brand .site-wordmark{font-size:31px;letter-spacing:-1.4px;gap:9px}
  .brand .brand-key{padding:7px 10px 9px}.brand .brand-key>b{letter-spacing:-1.4px}
  .brand .brand-copy{gap:13px}.brand .brand-tagline{font-size:8px;letter-spacing:1.1px}
}
@media(max-width:350px){
  .brand .brand-emblem{width:44px}.brand-emblem svg{width:48px;height:48px}
  .brand .site-wordmark{font-size:27px;gap:7px}.brand .brand-tagline{letter-spacing:.6px}
}
@media(prefers-reduced-motion:reduce){
  .brand .brand-key,.brand-emblem svg{transition:none}
  .brand:is(:hover,:focus-visible) .brand-key{transform:translateY(-3px) rotate(-7deg)}
  .brand:is(:hover,:focus-visible) .brand-emblem svg{transform:rotate(-9deg)}
}