* { box-sizing: border-box; }
:root { color-scheme: light; background: #1b2d5c; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100svh; margin: 0; background: linear-gradient(180deg, #1b2d5c 0%, #1b2d5c 45%, #294974 66%, #507fa7 84%, #83b2d7 100%); }
.grid { z-index: 2; }
.brand-backdrop { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; user-select: none; }
.sky-layer { position: fixed; inset: 0 0 50%; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; }
.shooting-star { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.shooting-star-trail { position: absolute; right: 0; top: -1px; width: var(--trail-length); height: 2px; border-radius: 100%; background: linear-gradient(90deg, #ffffff00, #fff3dc99); }
.shooting-star-head { position: absolute; width: var(--star-size); height: var(--star-size); left: calc(var(--star-size) / -2); top: calc(var(--star-size) / -2); }
.brand-lockup { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 3vw, 36px); text-align: center; }
.brand-wordmark { display: flex; justify-content: center; }
.brand-description { margin: 0; max-width: calc(100vw - 40px); color: #fff; font-family: "grenadine-mvb", sans-serif; font-weight: 400; font-style: normal; font-size: clamp(16px, 4vw, 14pt); line-height: 1.55; }
.brand-logo { display: block; width: min(64vw, 1400px); height: auto; overflow: visible; }
.brand-logo--stacked { display: none; }
.logo-letter { transform-box: fill-box; transform-origin: center; animation: logo-wiggle var(--wiggle-duration) ease-in-out var(--wiggle-delay) infinite; }
@keyframes logo-wiggle { 0%, 100% { transform: rotate(-0.8deg); } 50% { transform: rotate(0.8deg); } }
.character { position: relative; width: 100%; aspect-ratio: 1; min-width: 0; min-height: 0; }
.character { padding: 10px; border: 0; margin: 0; appearance: none; display: block; cursor: pointer; font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.character svg, .character svg * { -webkit-tap-highlight-color: transparent; }
.character:focus-visible { outline: 3px solid #fff; outline-offset: -5px; z-index: 1; }
.character .expression { display: none; }
.character .expression-art { transform-box: fill-box; transform-origin: center; }
.shine-layer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
.click-shine { position: absolute; display: block; pointer-events: none; user-select: none; opacity: 0; transform-origin: center; }
.sleep-layer { position: fixed; inset: 0; z-index: 999; overflow: hidden; pointer-events: none; }
.sleep-anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
/* Particles sit on a zero-width mouth anchor, so responsive image constraints
   must not cap their explicitly calculated width to their parent's width. */
.sleep-z { position: absolute; display: block; max-width: none; opacity: 0; pointer-events: none; user-select: none; transform-origin: center; }
.character.reacting .default-face { visibility: hidden; }
.character.reacting .expression.is-active { display: inline; }
.character svg { position: absolute; inset: 10px; display: block; width: calc(100% - 20px); height: calc(100% - 20px); overflow: hidden; transform: scale(1); transform-origin: center; transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1); }
@media (hover: hover) and (pointer: fine) {
  .character:hover svg { transform: scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .character svg { transition: none; }
  .logo-letter { animation: none; }
}
.view-controls { position: fixed; top: max(20px, env(safe-area-inset-top)); right: 20px; z-index: 1001; display: flex; gap: 4px; padding: 5px; border: 1px solid #ffffff45; border-radius: 999px; background: #1b2d5c88; backdrop-filter: blur(12px); }
.view-controls[hidden] { display: none; }
.view-controls button { appearance: none; border: 0; border-radius: 999px; padding: 10px 15px; font: 500 14px/1.2 system-ui, sans-serif; color: #fff; background: transparent; cursor: pointer; }
.view-controls button:focus-visible { outline: 3px solid #ffb902; outline-offset: 2px; }
body.physics-view { display: block; padding: 0; height: 100dvh; overflow: hidden; }
.physics-view .grid { position: fixed; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.physics-view .character { position: absolute; top: 0; left: 0; background: transparent; pointer-events: none; will-change: transform; }
.physics-view .character svg { pointer-events: none; }
.physics-view .character svg path, .physics-view .character svg circle { pointer-events: visiblePainted; }
.physics-view .character:focus-visible { outline: 3px dashed #ffffffaa; outline-offset: -8px; border-radius: 18px; }
@media (max-width: 600px) {
  .brand-logo--inline { display: none; }
  .brand-logo--stacked { display: block; width: min(54vw, 440px); }
}