/* A playful extension of the existing math mark. */
.brand-mark {width:52px;height:52px;background:transparent;border-radius:0;transition:transform .22s ease}
.brand-mark img {display:block;width:100%;height:100%}
.brand:hover .brand-mark,.brand:focus-visible .brand-mark {transform:rotate(-8deg) scale(1.06)}
.extra-credit-trigger {border:0;background:transparent;padding:0;text-align:left;position:relative;border-radius:4px}
.hero-credentials.extra-credit-trigger {min-height:44px;margin-top:9px;font-weight:600}
.extra-credit-trigger:hover {color:var(--blue)}
.credit-score {display:inline-flex;align-items:center;gap:5px;color:var(--ink)!important}
.credit-question {display:inline-grid;place-items:center;flex:none;width:16px;height:16px;border:1px solid currentColor;border-radius:50%;font-family:var(--body);font-size:11px;line-height:1;font-weight:700;color:var(--blue);letter-spacing:0}
.extra-credit-trigger:hover .credit-question {background:var(--blue);color:white}
.achievement-credit {font:inherit;line-height:inherit;letter-spacing:inherit;display:inline-flex;align-items:center;gap:6px;color:inherit;min-height:44px}
.achievement-grid .credit-question {display:inline-grid;margin:0;font-size:11px;line-height:1}
.extra-credit-tooltip {position:fixed;z-index:102;background:var(--ink);color:var(--lime);font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.5px;padding:15px 18px;border-radius:10px;box-shadow:0 5px 20px #17264c25;width:300px;max-width:calc(100vw - 24px);pointer-events:auto}
.extra-credit-tooltip strong {display:block;font-size:17px;line-height:1.3}
.extra-credit-tooltip p {font-family:var(--body);font-size:14px;font-weight:400;letter-spacing:0;line-height:1.55;color:white;margin:8px 0 0}
.extra-credit-tooltip::after {content:'';position:absolute;left:var(--pointer-x,50%);width:10px;height:10px;background:var(--ink);transform:translateX(-50%) rotate(45deg)}
.extra-credit-tooltip[data-side="above"]::after {bottom:-5px}
.extra-credit-tooltip[data-side="below"]::after {top:-5px}
.confetti {position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:101;contain:strict}
.confetti-piece {position:absolute;display:block;width:9px;height:6px;will-change:transform,opacity}
.rey-greeting {position:fixed;bottom:18px;right:22px;z-index:30;width:188px;pointer-events:none;filter:drop-shadow(0 4px 7px #17264c16)}
.greeting-bubble {display:block;position:relative;background:white;border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:10px 13px;font-family:var(--display);font-weight:700;font-size:18px;line-height:1.3;text-align:center;transform:rotate(-3deg)}
.greeting-bubble span {display:block;font-family:var(--body);font-weight:500;color:var(--muted);font-size:12px;margin-top:3px}
.rey-character {position:relative;width:188px;height:144.72px;overflow:visible}
.character-halo {position:absolute;width:126px;height:126px;border-radius:50%;background:var(--lime);bottom:2px;left:13px}
.rey-body,.rey-hand {position:absolute;display:block;width:100%;height:100%;left:0;top:0}
/* Both layers use the same complete pose. Only the hand turns at its wrist;
   overlapping a little cuff keeps the join continuous throughout the wave. */
.rey-body {clip-path:polygon(0 0,67.5% 0,67.5% 38.6%,100% 38.6%,100% 100%,0 100%);mask-image:linear-gradient(#000 95%,transparent 100%)}
.rey-hand {clip-path:inset(0 0 59.8% 67.5%);transform-origin:75.6% 37.6%;transform:rotate(-6deg)}
.is-waving .rey-hand {animation:rey-wave .7s ease-in-out 5}
@keyframes rey-wave {0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
@media(max-width:760px) {
  .brand-mark {width:42px;height:42px}
  .rey-greeting {right:12px;bottom:12px;width:156px}
  .rey-character {transform:scale(.83);transform-origin:top left;margin-bottom:-25px}
  .greeting-bubble {font-size:16px;padding:8px 10px}
  .greeting-bubble span {font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
  .brand-mark {transition:none}
  .is-waving .rey-hand {animation:none}
}