@layer components{.hero-backdrop{z-index:-2;background-image:radial-gradient(var(--grid-line) 1.2px, transparent 1.3px);background-size:26px 26px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(80% 60% at 50% 26%,#000 25%,#0000 78%);mask-image:radial-gradient(80% 60% at 50% 26%,#000 25%,#0000 78%)}.hero-backdrop:before,.hero-backdrop:after{content:"";opacity:.5;border-radius:50%;animation:16s ease-in-out infinite alternate aurora;position:absolute}.hero-backdrop:before{aspect-ratio:1;background:radial-gradient(circle, color-mix(in oklab, var(--track-default) 40%, transparent), transparent 70%);width:min(70vw,620px);top:4%;left:50%;translate:-50%}.hero-backdrop:after{aspect-ratio:1;background:radial-gradient(circle, color-mix(in oklab, var(--caret) 30%, transparent), transparent 65%);width:min(46vw,420px);animation-delay:-8s;top:22%;left:58%}@media (min-width:1024px){.hero-backdrop{-webkit-mask-image:radial-gradient(60% 70% at 70% 47%,#000 25%,#0000 75%);mask-image:radial-gradient(60% 70% at 70% 47%,#000 25%,#0000 75%)}.hero-backdrop:before{top:12%;left:70%}.hero-backdrop:after{top:40%;left:72%}}.dark .hero-backdrop:before{opacity:.55}.light .hero-backdrop:before,.light .hero-backdrop:after{opacity:.32}@keyframes aurora{0%{transform:translate(0)scale(1)}to{transform:translate(-6%,8%)scale(1.15)}}.hero-in{animation:hero-rise 1s var(--ease-out-expo) both;animation-delay:calc(var(--d,0) * 90ms + 80ms)}@keyframes hero-rise{0%{opacity:0;translate:0 26px}to{opacity:1;translate:0}}.hero-title.hero-in{animation-name:hero-lift;animation-delay:0s}@keyframes hero-lift{0%{translate:0 14px}to{translate:0}}.hero-chip{border:1px solid var(--border);background:var(--glass);font-family:var(--font-mono);letter-spacing:.04em;color:var(--muted-foreground);border-radius:999px;align-items:center;gap:.6rem;padding:.4rem .9rem .4rem .7rem;font-size:.72rem;display:inline-flex}.hero-chip__dot{background:var(--caret);border-radius:50%;width:.45rem;height:.45rem;position:relative}.hero-chip__dot:after{content:"";border:1px solid var(--caret);animation:ping 2s var(--ease-out-expo) infinite;border-radius:50%;position:absolute;inset:-4px}@keyframes ping{0%{opacity:.8;scale:.6}to{opacity:0;scale:1.9}}.hero-title{font-family:var(--font-display);letter-spacing:-.04em;text-wrap:balance;font-size:clamp(2.6rem,9vw,4.6rem);font-weight:750;line-height:1.02}@media (min-width:1024px){.hero-title{font-size:clamp(3.2rem,5.3vw,5.5rem)}}.quiz-cta{border:1px solid var(--border);background:var(--glass);border-radius:999px;justify-content:space-between;align-items:center;gap:.75rem;height:3.25rem;padding:0 .5rem 0 1.4rem;font-weight:500;transition:border-color .3s,background-color .3s;display:inline-flex}.quiz-cta:hover{border-color:color-mix(in oklab, var(--foreground) 30%, transparent)}.quiz-cta__badge{background:var(--secondary);font-family:var(--font-mono);color:var(--muted-foreground);border-radius:999px;padding:.3rem .65rem;font-size:.68rem}.hero-skill{opacity:0;will-change:transform, opacity;position:absolute;top:0;left:0}.hero-skill>span{border:1px solid color-mix(in oklab, var(--track) 45%, transparent);background:color-mix(in oklab, var(--card) 86%, transparent);font-family:var(--font-mono);white-space:nowrap;color:var(--foreground);transition:scale .35s var(--ease-spring), border-color .3s ease, box-shadow .3s ease;border-radius:999px;align-items:center;gap:.4rem;padding:.28rem .65rem .28rem .5rem;font-size:.68rem;font-weight:500;display:inline-flex;translate:-50% calc(-100% - 12px)}.hero-skill>span:before{content:"";background:var(--track);border-radius:50%;width:.4rem;height:.4rem}.hero-skill[data-hot]>span{border-color:var(--track);box-shadow:0 0 0 4px color-mix(in oklab, var(--track) 18%, transparent);scale:1.12}.hero-hint{font-family:var(--font-mono);color:var(--muted-foreground);opacity:0;pointer-events:none;align-items:center;gap:.5rem;font-size:.7rem;transition:opacity .8s;display:none;position:absolute;top:calc(47% + min(21vw,340px) + 1.5rem);left:70%;translate:-50%}.hero-hint:before{content:"";background:var(--caret);border-radius:50%;width:.4rem;height:.4rem;animation:1.6s ease-in-out infinite ping-dot}@keyframes ping-dot{50%{opacity:.5;scale:1.6}}.hero-hint.is-visible{opacity:1}@media (min-width:1024px){.hero-hint{display:flex}}}