:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #040412; color: #fff; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: radial-gradient(circle at 55% 35%, #20103b 0, #070718 48%, #02020b 100%); }
.site-frame { width: min(1180px, 100%); min-height: 100vh; margin: auto; padding: 50px 42px 36px; overflow: visible; }
.masthead { position: relative; overflow: visible; border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #ff9c16, #ff2b70 52%, #bf1fee) 1; padding: 4px 0 23px; }
.header-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; color: #fff; font-size: clamp(.8rem, 1.55vw, 1.15rem); font-weight: 900; letter-spacing: .18em; }.header-kicker i { display: block; width: clamp(16px, 3vw, 42px); height: 4px; border-radius: 99px; background: linear-gradient(90deg, #ffab0d, #ff4274); }.header-kicker i:last-child { background: linear-gradient(90deg, #ff4274, #c400e8); }
.masthead h1 { display: flex; align-items: flex-end; flex-wrap: wrap; column-gap: clamp(14px, 2vw, 30px); row-gap: 0; width: 100%; margin: 0; font-style: italic; line-height: .82; overflow: visible; }
.title-word, .title-year { display: block; background: linear-gradient(108deg, #ffad0d 0%, #ff573d 47%, #f51292 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 7px 17px #f5258a25); }.title-word { font-size: clamp(3.2rem, 7.25vw, 7.25rem); font-weight: 900; letter-spacing: -.035em; }.title-year { position: relative; padding: .04em .04em .07em; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: clamp(2.9rem, 6.1vw, 6.2rem); font-weight: 400; letter-spacing: .005em; transform: rotate(-4deg); }
.header-energy { position: absolute; right: 3px; bottom: 31px; display: flex; align-items: flex-end; gap: 6px; }.header-energy i { display: block; width: 5px; border-radius: 99px; background: #ffaf0d; box-shadow: 0 0 12px #ff4c87; }.header-energy i:nth-child(1) { height: 11px; }.header-energy i:nth-child(2) { height: 22px; background: #ff3d78; }.header-energy i:nth-child(3) { height: 15px; background: #c600e7; }
/* The event title is intentionally stacked at every width: no text is ever forced into a constrained row. */
.masthead h1 { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; line-height: .9; }
.title-word { max-inline-size: 100%; font-size: clamp(2.7rem, 8.7vw, 6rem); white-space: normal; overflow-wrap: anywhere; }
.title-year { justify-self: start; max-inline-size: 100%; margin-left: clamp(8px, 6vw, 74px); font-size: clamp(2.5rem, 7.3vw, 5rem); transform: rotate(-3deg); }
.header-energy { display: none; }
@media (max-width: 1100px) { .masthead h1 { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; line-height: .9; }.title-word { font-size: clamp(3.1rem, 11vw, 6.4rem); }.title-year { justify-self: start; margin-left: 9%; font-size: clamp(2.8rem, 9vw, 5.4rem); }.header-energy { bottom: 25px; } }
.main-grid { display: grid; grid-template-columns: minmax(285px, .76fr) minmax(0, 1.24fr); min-height: 635px; gap: 26px; align-items: center; padding: 34px 0 26px; }
.region-card { border: 1px solid #ffffff2a; border-radius: 27px; padding: 30px 26px 24px; background: linear-gradient(145deg, #0d0c21d9, #06061493); box-shadow: inset 0 0 36px #7a1fc214; }
.region-card h2 { margin: 0; font-size: 1.34rem; letter-spacing: .02em; text-transform: none; }
.live-line { display: flex; align-items: center; gap: 9px; margin: 25px 0 35px; color: #c5c2d2; font-size: .72rem; white-space: nowrap; }
.live-line i { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; background: #ae13ec; box-shadow: 0 0 12px #ae13ec; }
.live-line time { margin-left: auto; color: #f0eef6; }
.region-card ol { display: grid; gap: 24px; padding: 0; margin: 0; list-style: none; }
.region-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.region-row b { font-size: 1rem; font-weight: 500; }.region-row strong { font-size: 1.05rem; }
.bar { grid-column: 1 / -1; height: 16px; overflow: hidden; border-radius: 99px; background: #26253d; }.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #be00e8, #ff3883 51%, #ffac0c); box-shadow: 0 0 16px #ed1acd66; }
.phoenix-stage { position: relative; height: 100%; min-height: 570px; display: grid; place-items: center; isolation: isolate; }
#phoenix-canvas { display: block; width: 100%; height: 100%; max-height: 670px; }
#loading-message { position: absolute; margin: 0; bottom: 12px; color: #d9d6e9; letter-spacing: .1em; font-size: .74rem; }
.progress-card { position: relative; display: grid; grid-template-columns: 1fr 1fr .9fr; align-items: center; gap: 0; padding: 26px 28px 63px; border: 1px solid #ffffff2a; border-radius: 30px; background: linear-gradient(130deg, #0a0a1bdf, #080715c7); box-shadow: inset 0 0 40px #b220e114; }
.metric { min-height: 116px; padding: 5px 50px; border-right: 1px solid #ffffff22; }.metric span { display: block; font-size: .82rem; font-weight: 800; letter-spacing: .12em; }.metric strong { display: block; margin-top: 14px; font-size: clamp(3.5rem, 7vw, 6.3rem); line-height: .75; }.metric strong.target { color: #ff8d17; }
.completion { display: grid; place-items: center; }.ring { position: relative; width: 174px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#ffac12 var(--progress), #ff357f calc(var(--progress) + 10%), #a216e8 calc(var(--progress) + 21%), #25223d 0); }.ring::before { content: ''; position: absolute; width: 145px; aspect-ratio: 1; border-radius: inherit; background: #09091a; }.ring > div { z-index: 1; text-align: center; }.ring strong { display: block; font-size: 2.4rem; }.ring span { font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
.progress-track { position: absolute; left: 28px; right: 28px; bottom: 25px; height: 22px; overflow: hidden; border-radius: 99px; background: #28263c; }.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b800ed, #f6237c 50%, #ffb00d); box-shadow: 0 0 20px #ef2fd777; transition: width .5s ease; }
@media (max-width: 760px) { .site-frame { padding: 32px 20px 22px; }.masthead { padding: 0 0 15px; }.header-kicker { font-size: .68rem; letter-spacing: .13em; }.masthead h1 { align-items: baseline; column-gap: 10px; }.title-word { font-size: clamp(2.75rem, 13vw, 5.1rem); }.title-year { margin-left: 5%; font-size: clamp(2.45rem, 11vw, 4.4rem); }.header-energy { display: none; }.main-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 24px; gap: 8px; }.region-card { order: 2; padding: 25px 21px; }.region-card ol { gap: 16px; }.phoenix-stage { order: 1; min-height: 450px; height: 56vh; }.progress-card { grid-template-columns: 1fr 1fr; padding: 23px 8px 58px; }.metric { min-height: 100px; padding: 5px 17px; }.metric strong { font-size: 3.7rem; }.completion { grid-column: 1 / -1; margin-top: 22px; }.ring { width: 135px; }.ring::before { width: 112px; }.ring strong { font-size: 1.8rem; } }

/* Final title lockup: both words always share one safely-sized, unclipped line. */
.masthead { overflow: visible; }
.masthead h1 { display: flex; flex-wrap: nowrap; align-items: baseline; gap: .24em; width: 100%; max-width: 100%; margin: 0; padding: .10em .12em .14em; overflow: visible; white-space: nowrap; font-size: clamp(2.15rem, 6.2vw, 5.8rem); line-height: 1.12; }
.title-word, .title-year { display: block; flex: 0 0 auto; max-inline-size: none; margin: 0; padding: 0; overflow: visible; white-space: nowrap; overflow-wrap: normal; font-family: Arial, Helvetica, sans-serif; font-size: inherit; font-weight: 900; letter-spacing: -.045em; line-height: inherit; transform: none; }
.title-year { margin-left: 0; }

/* Keep a deliberate right-side buffer so the final “6” can never touch a
   containing edge, even where a browser paints bold glyphs slightly wide. */
.masthead h1 {
  width: calc(100% - 18px);
  max-width: calc(100% - 18px);
  padding: .12em .28em .20em .12em;
  gap: .20em;
  font-size: clamp(2rem, 5.7vw, 5.2rem);
}

@media (max-width: 760px) {
  .masthead h1 {
    width: calc(100% - 12px);
    max-width: calc(100% - 12px);
    padding: .13em .25em .20em .08em;
    gap: .18em;
    font-size: clamp(2rem, 10.2vw, 3.2rem);
  }
}