.site-milestones-tracker {
  position: relative;
  z-index: 24;
  border-bottom: 1px solid rgba(202, 150, 255, .23);
  color: #f8f0ff;
  background: linear-gradient(90deg, rgba(13, 6, 27, .98), rgba(33, 13, 58, .96) 52%, rgba(12, 6, 24, .98));
  box-shadow: 0 9px 28px rgba(42, 12, 74, .26), inset 0 -1px rgba(255, 255, 255, .03);
}
.site-milestones-inner { display: grid; grid-template-columns: minmax(168px, .8fr) minmax(220px, 2.8fr) auto; gap: clamp(.65rem, 1.6vw, 1.8rem); align-items: center; width: min(1440px, calc(100% - 2rem)); min-height: 52px; margin: 0 auto; }
.site-milestones-total { display: grid; gap: .08rem; }
.site-milestones-total span, .site-milestones-next { color: rgba(237, 218, 255, .58); font-family: var(--font-ui, system-ui); font-size: .57rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.site-milestones-total strong { color: #fff8ff; font-family: var(--font-ui, system-ui); font-size: clamp(.68rem, .9vw, .78rem); letter-spacing: .055em; }
.site-milestones-track-wrap { display: grid; grid-template-columns: minmax(100px, 1fr) auto; gap: .65rem; align-items: center; min-width: 0; }
.site-milestones-track { --milestone-progress: 0%; position: relative; overflow: hidden; height: 9px; border: 1px solid rgba(240, 207, 255, .3); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(33, 13, 53, .3)); box-shadow: inset 0 1px 5px rgba(0, 0, 0, .56), 0 0 12px rgba(182, 101, 255, .12); }
.site-milestones-track::before, .site-milestones-track i { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--milestone-progress); border-radius: inherit; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.site-milestones-track::before { z-index: 1; background-image: linear-gradient(90deg, #8246e8 0%, #c678ff 28%, #ffd0fb 61%, #fff7ff 82%, #eaa8ff 100%), repeating-linear-gradient(118deg, transparent 0 13px, rgba(255,255,255,.04) 14px, rgba(255,255,255,.38) 18px, rgba(255,239,255,.08) 22px, transparent 26px 38px); background-size: 100% 100%, 38px 100%; background-position: 0 0, 0 0; box-shadow: 0 0 8px #cc82ff, 0 0 20px rgba(204, 121, 255, .95), 0 0 34px rgba(168, 90, 255, .44); animation: milestoneCurrent 1.9s linear infinite; }
.site-milestones-track::after { content: ""; position: absolute; z-index: 2; inset: 0 auto 0 0; width: var(--milestone-progress); min-width: 2.2rem; overflow: hidden; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='8' viewBox='0 0 64 8'%3E%3Cpath fill='%23fff' d='M4 0l1.05 2.95L8 4 5.05 5.05 4 8 2.95 5.05 0 4l2.95-1.05z'/%3E%3Cpath fill='%23f4c9ff' d='M35 1l.7 2.3L38 4l-2.3.7L35 7l-.7-2.3L32 4l2.3-.7z'/%3E%3Ccircle cx='19' cy='4' r='.8' fill='%23fff'/%3E%3Ccircle cx='51' cy='4' r='.65' fill='%23fff'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: 0 50%; background-size: 64px 8px; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #e8a0ff); opacity: .9; animation: milestoneSparks 2.15s linear infinite; pointer-events: none; }
.site-milestones-track i { display: none; }
.site-milestones-link { display: inline-flex; gap: .4rem; align-items: center; padding: .5rem .7rem; border: 1px solid rgba(229, 185, 255, .28); border-radius: 999px; color: #fff4ff; font-family: var(--font-ui, system-ui); font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: .2s ease; white-space: nowrap; }
.site-milestones-link:hover, .site-milestones-link:focus-visible { border-color: #f0c2ff; background: rgba(216, 139, 255, .16); box-shadow: 0 0 18px rgba(215, 129, 255, .34); transform: translateY(-1px); }
@keyframes milestoneCurrent { to { background-position: 0 0, -38px 0; } }
@keyframes milestoneSparks { to { background-position: -64px 50%; } }
@media (prefers-reduced-motion: reduce) { .site-milestones-track::before, .site-milestones-track::after { animation: none; } }
@media (max-width: 680px) { .site-milestones-inner { grid-template-columns: 1fr auto; gap: .5rem .75rem; min-height: 62px; padding: .48rem 0; } .site-milestones-track-wrap { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 1fr auto; } .site-milestones-link { grid-column: 2; grid-row: 1; font-size: .56rem; padding: .42rem .55rem; } .site-milestones-next { font-size: .5rem; } }
@media (max-width: 390px) { .site-milestones-inner { width: min(100% - 1rem, 1440px); min-height: 58px; } .site-milestones-total strong { font-size: .65rem; } .site-milestones-next { display: none; } .site-milestones-track-wrap { grid-template-columns: 1fr; } .site-milestones-link span { display: none; } }

body[data-page="milestones"] { min-height: 100svh; background: radial-gradient(circle at 50% -15%, #5d317d 0%, #21102e 31%, #090610 72%); }
.milestones-main { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(1.1rem, 2.5vw, 2rem) 0 4rem; }
.milestones-hero { position: relative; overflow: hidden; display: grid; place-content: center; min-height: clamp(15rem, 28vw, 22rem); padding: 2rem; border: 1px solid rgba(231, 192, 255, .28); border-radius: 20px; text-align: center; isolation: isolate; background: linear-gradient(90deg, rgba(10, 4, 20, .72), rgba(39, 15, 62, .25), rgba(10, 4, 20, .72)), url("ouija-assets/milestones-banner.png") center / cover; box-shadow: 0 25px 68px rgba(0, 0, 0, .42); }
.milestones-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgba(206, 144, 255, .18), transparent 52%); }
.milestones-eyebrow { color: #ecd3ff; font-family: var(--font-ui, system-ui); font-size: .67rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.milestones-hero h1 { margin: .45rem 0 .6rem; color: white; font-family: var(--font-display, Georgia, serif); font-size: clamp(3rem, 8vw, 6.5rem); line-height: .88; letter-spacing: .045em; text-shadow: 0 0 28px rgba(237, 176, 255, .5); }
.milestones-hero p { max-width: 38rem; margin: 0 auto; color: rgba(255, 244, 255, .8); font-size: clamp(.86rem, 1.6vw, 1.05rem); line-height: 1.6; }
.milestones-board { display: grid; gap: 1.3rem; margin-top: 1.5rem; }
.milestones-live-card, .milestones-about, .milestone-reward { border: 1px solid rgba(230, 187, 255, .19); border-radius: 18px; background: linear-gradient(145deg, rgba(43, 20, 61, .76), rgba(12, 7, 21, .84)); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 18px 45px rgba(0,0,0,.22); }
.milestones-live-card { padding: clamp(1.1rem, 2.5vw, 1.7rem); }
.milestones-live-top { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.milestones-live-top span, .milestone-reward small { color: #d9aff9; font-family: var(--font-ui, system-ui); font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.milestones-live-top strong { display: block; margin-top: .25rem; color: #fff8ff; font-family: var(--font-ui, system-ui); font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1; }
.milestones-live-top p { margin: 0; color: rgba(255,255,255,.57); font-size: .8rem; text-align: right; }
.milestones-page-track { position: relative; overflow: hidden; height: 15px; margin-top: 1rem; border: 1px solid rgba(230, 187, 255, .22); border-radius: 999px; background: rgba(0,0,0,.34); }
.milestones-page-track i { position: absolute; inset: 0 auto 0 0; width: var(--milestone-page-progress, 0%); border-radius: inherit; background: linear-gradient(90deg,#9b62ff,#f1bbff,#fff4ff); box-shadow: 0 0 18px #cb86ff; transition: width 1.2s ease; }
.milestones-scale { display: flex; justify-content: space-between; margin-top: .55rem; color: rgba(237, 217, 255, .48); font-family: var(--font-ui, system-ui); font-size: .58rem; font-weight: 800; }
.milestones-rewards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .7rem; }
.milestone-reward { position: relative; min-height: 122px; padding: 1rem .7rem; text-align: center; }
.milestone-reward.is-unlocked { border-color: rgba(234, 188, 255, .62); background: linear-gradient(145deg, rgba(125, 61, 153, .72), rgba(25, 12, 39, .9)); box-shadow: 0 0 26px rgba(200, 112, 255, .22); }
.milestone-reward strong { display: block; margin: .4rem 0; color: #fff7ff; font-family: var(--font-display, Georgia, serif); font-size: clamp(1rem, 2.2vw, 1.35rem); }
.milestone-reward p { margin: 0; color: rgba(255,255,255,.62); font-size: .72rem; line-height: 1.35; }
.milestone-reward.is-mystery p { color: #e7bbff; font-family: monospace; letter-spacing: .14em; text-shadow: 1px 0 #ff87e8, -1px 0 #81d9ff; animation: mysteryGlitch 2.5s steps(2,end) infinite; }
.milestones-about { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); gap: 1.5rem; padding: clamp(1.2rem, 3vw, 2rem); }
.milestones-about h2 { margin: .2rem 0 .65rem; color: #fff8ff; font-family: var(--font-display, Georgia, serif); font-size: clamp(1.8rem, 3.5vw, 2.7rem); }
.milestones-about p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.7; }
.milestones-thrones { display: grid; align-content: center; gap: .65rem; }
.milestones-thrones a { display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding: .85rem 1rem; border: 1px solid rgba(229, 184, 255, .22); border-radius: 12px; color: #fff6ff; background: rgba(255,255,255,.04); font-family: var(--font-ui, system-ui); font-size: .76rem; font-weight: 900; text-decoration: none; transition: .2s ease; }
.milestones-thrones a:hover, .milestones-thrones a:focus-visible { border-color: #edc1ff; background: rgba(196, 105, 255, .16); box-shadow: 0 0 20px rgba(205, 120, 255, .22); }
@keyframes mysteryGlitch { 0%, 86%, 100% { transform: none; opacity: 1; } 88% { transform: translateX(2px) skewX(-7deg); opacity: .58; } 90% { transform: translateX(-2px) skewX(5deg); } }
@media (max-width: 850px) { .milestones-rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .milestones-about { grid-template-columns: 1fr; } .milestones-scale { display: none; } }
@media (max-width: 480px) { .milestones-main { width: min(100% - 1rem, 1180px); } .milestones-hero { min-height: 14rem; padding: 1.1rem; border-radius: 14px; } .milestones-live-top { align-items: start; flex-direction: column; } .milestones-live-top p { text-align: left; } .milestones-rewards { gap: .45rem; } .milestone-reward { min-height: 104px; padding: .7rem .4rem; } }