.milestone-item{transition:transform .22s var(--ease-premium),border-color .22s var(--ease-premium),box-shadow .22s var(--ease-premium),background .22s var(--ease-premium)}.milestone-item.unlocked{cursor:pointer}.milestone-item.unlocked:hover,.milestone-item.unlocked:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 34%,var(--border));box-shadow:0 22px 56px #0000001a;outline:none}.milestone-item.locked{cursor:default}.milestone-item.locked:hover{transform:none}.milestone-open-hint{display:inline-flex;justify-self:start;align-items:center;margin-top:4px;padding:7px 11px;border-radius:999px;color:var(--accent-2);font-size:.78rem;font-weight:900;background:color-mix(in srgb,var(--accent) 10%,transparent)}.milestone-item.locked .milestone-open-hint{color:var(--muted);background:color-mix(in srgb,var(--text) 7%,transparent)}.milestone-modal-open{overflow:hidden}.milestone-modal-root.hidden{display:none}.milestone-modal-root{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}.milestone-modal-backdrop{position:absolute;inset:0;background:#030712a3;backdrop-filter:blur(14px)}.milestone-modal{position:relative;z-index:1;width:min(920px,100%);max-height:min(92vh,840px);overflow:auto;display:grid;grid-template-columns:minmax(280px,.95fr) minmax(300px,1.05fr);border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border));border-radius:34px;background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 22rem),color-mix(in srgb,var(--surface-strong) 94%,transparent);box-shadow:0 42px 120px #00000057;animation:milestoneModalIn .24s var(--ease-premium) both}@keyframes milestoneModalIn{0%{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.milestone-modal-close{position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;border:1px solid var(--line-soft);border-radius:999px;color:var(--text);font-size:1.45rem;line-height:1;cursor:pointer;background:color-mix(in srgb,var(--surface-strong) 82%,transparent)}.milestone-modal-media{min-height:340px;display:grid;place-items:center;padding:clamp(18px,2vw,26px);border-right:1px solid var(--line-soft)}.milestone-modal-gif,.milestone-modal-gif-fallback{width:100%;max-width:540px;aspect-ratio:16 / 9;object-fit:cover;border-radius:26px;border:1px solid rgba(255,255,255,.14);box-shadow:0 28px 70px #0000003d}.milestone-modal-gif-fallback{display:grid;place-items:center;padding:20px;color:#fff;font-size:clamp(1.6rem,5vw,3rem);font-weight:950;text-align:center;background:linear-gradient(135deg,var(--accent),var(--accent-2))}.milestone-modal-gif.hidden,.milestone-modal-gif-fallback.hidden{display:none}.milestone-modal-content{display:grid;align-content:center;gap:16px;padding:clamp(24px,4vw,46px)}.milestone-modal-kicker{color:var(--accent-2);font-size:.8rem;font-weight:950;text-transform:uppercase;letter-spacing:.12em}.milestone-modal h3{margin:0;font-size:clamp(2rem,4vw,3.45rem);line-height:.94;letter-spacing:-.055em}.milestone-modal-description{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.66}.milestone-modal-motivation-card,.milestone-modal-action-card{display:grid;gap:8px;padding:16px 18px;border:1px solid var(--line-soft);border-radius:22px;background:color-mix(in srgb,var(--surface-strong) 68%,transparent)}.milestone-modal-motivation-card{background:radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 12rem),color-mix(in srgb,var(--surface-strong) 72%,transparent)}.milestone-modal-motivation{margin:0;color:var(--text);line-height:1.68;font-weight:650}.milestone-modal-label{color:var(--muted);font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.11em}.milestone-modal-action-card strong{line-height:1.42}.milestone-modal-status{justify-self:start;margin:0;padding:9px 13px;border-radius:999px;color:#fff;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent-2))}@media(max-width:820px){.milestone-modal{grid-template-columns:1fr;border-radius:28px}.milestone-modal-media{min-height:auto;border-right:0;border-bottom:1px solid var(--line-soft);padding-top:62px}.milestone-modal-content{padding:22px}}.milestone-surprise-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}.milestone-confetti-piece{position:absolute;top:-10%;left:calc((var(--i) * 5.5%) + 2%);width:12px;height:28px;border-radius:999px;opacity:0;transform:translateY(-10px) rotate(0)}.milestone-confetti-piece.piece-1{background:linear-gradient(180deg,#f59e0b,#fb7185)}.milestone-confetti-piece.piece-2{background:linear-gradient(180deg,#60a5fa,#2563eb)}.milestone-confetti-piece.piece-3{background:linear-gradient(180deg,#34d399,#059669)}.milestone-confetti-piece.piece-4{background:linear-gradient(180deg,#f472b6,#ec4899)}.milestone-confetti-piece.piece-5{background:linear-gradient(180deg,#facc15,#f97316)}.milestone-confetti-piece.piece-6{background:linear-gradient(180deg,#a78bfa,#6366f1)}.milestone-modal-root.is-celebration .milestone-confetti-piece{animation:milestoneConfetti 1.45s ease-out forwards;animation-delay:calc(var(--i) * 34ms)}@keyframes milestoneConfetti{0%{opacity:0;transform:translateY(-10px) rotate(0) scale(.75)}12%{opacity:1}to{opacity:.92;transform:translateY(115vh) rotate(calc(220deg + var(--i) * 9deg)) scale(1)}}.milestone-celebration-chip{position:absolute;inset-inline-start:20px;inset-block-start:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#fff;font-weight:900;font-size:.8rem;background:linear-gradient(135deg,#f59e0bf2,#2563ebf2);box-shadow:0 10px 32px #0000003d}.milestone-celebration-chip.hidden{display:none}.milestone-modal-root.is-celebration .milestone-modal{box-shadow:0 48px 136px #0000005c,0 0 0 1px #f59e0b2e}.milestone-modal-root.is-celebration .milestone-modal-kicker{color:#fbbf24}.milestone-modal-root.is-celebration .milestone-modal-gif,.milestone-modal-root.is-celebration .milestone-modal-gif-fallback{animation:milestonePulse 1.4s ease-in-out infinite}@keyframes milestonePulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}
