/* ================================================================ BASE v3 ================================================================ */
/* Typography */
.t-display{font-family:var(--font-d);font-size:clamp(72px,20vw,96px);font-weight:900;line-height:.95;letter-spacing:-3px}
.t-headline{font-family:var(--font-d);font-size:clamp(24px,7vw,30px);font-weight:800;letter-spacing:.3px;line-height:1.1}
.t-title{font-size:16px;font-weight:600}
.t-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt-2)}
.t-body{font-size:14px;font-weight:400;color:var(--txt-2);line-height:1.6}
.t-mono{font-family:var(--font-m)}
.t-muted{color:var(--txt-2)}.t-hint{color:var(--txt-3);font-size:13px}
.t-lime{color:var(--lime)}.t-blue{color:var(--blue)}.t-amber{color:var(--amber)}.t-red{color:var(--red)}.t-green{color:var(--green)}

/* Layout utils */
.flex{display:flex}.flex-center{display:flex;align-items:center}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-col{display:flex;flex-direction:column}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.gap-sm{gap:6px}.gap{gap:var(--gap)}.gap-lg{gap:var(--gap-lg)}
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:20px}.mt-4{margin-top:28px}
.w-full{width:100%}.text-center{text-align:center}
.hidden{display:none!important}.invisible{visibility:hidden}.opacity-0{opacity:0}
.scroll-x{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.scroll-x::-webkit-scrollbar{display:none}

.skip-link{
  position:absolute;
  left:16px;
  top:-48px;
  z-index:1001;
  padding:10px 14px;
  border-radius:10px;
  background:var(--lime);
  color:var(--txt-inv);
  font-size:13px;
  font-weight:700;
  transition:top .18s ease;
}
.skip-link:focus-visible{top:16px}

:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline:2px solid var(--lime);
  outline-offset:2px;
}

.t-headline,
.modal-title,
.starter-guide-title,
.level-guide-summary-title{
  text-wrap:balance;
}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes barLoad{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes bounce{0%,100%{transform:scale(1)}40%{transform:scale(1.08)}70%{transform:scale(.96)}}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}

.anim-fade-up{animation:fadeUp .24s ease both}
.anim-fade-in{animation:fadeIn .2s ease both}
.anim-bounce{animation:bounce .4s ease}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,var(--bg-3) 25%,var(--bg-4) 50%,var(--bg-3) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)}
.spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--lime);border-radius:50%;animation:spin .8s linear infinite}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}