.anthem {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  scroll-margin-top: 24px;
  border-block: 1px solid rgba(135,210,255,.32);
  background: radial-gradient(circle at 8% 35%,rgba(41,141,236,.23),transparent 42%),radial-gradient(circle at 93% 9%,rgba(226,59,230,.19),transparent 40%),#090513;
}
.anthem::before { content: '♪'; position: absolute; z-index: -1; top: -130px; right: -35px; color: rgba(103,178,254,.07); font: 900 440px/1 var(--display); pointer-events: none; }
.anthem__inner { display: grid; grid-template-columns: minmax(0,.73fr) minmax(0,1.27fr); align-items: start; gap: clamp(30px,5vw,80px); max-width: 1240px; margin: auto; }
.anthem__intro { position: relative; }
.anthem__intro .eyebrow { color: var(--lime); }
.anthem__intro h2 { margin: 7px 0 23px; color: #fff; font: 900 clamp(61px,7.4vw,107px)/.82 var(--display); text-shadow: 0 0 24px rgba(90,171,255,.54); }
.anthem__intro h2 em { color: #ffc879; font-style: normal; text-shadow: 0 0 16px rgba(255,141,39,.86),0 0 30px rgba(255,94,18,.4); }
.anthem__intro > p:not(.eyebrow) { max-width: 405px; color: #efe0f7; font: 650 clamp(21px,2.3vw,27px)/1.13 var(--body); }
.anthem__disc { display: grid; place-items: center; width: clamp(145px,19vw,235px); aspect-ratio: 1; margin: 45px auto 0; border: 6px solid #11101c; border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 7px,rgba(210,218,244,.15) 8px 9px,transparent 10px 16px),conic-gradient(from 25deg,#11091c,#673c82,#171126,#254a7f,#11091c); box-shadow: 0 0 0 3px rgba(186,130,255,.78),0 0 24px rgba(133,72,233,.63),inset 0 0 26px rgba(0,0,0,.8); animation: anthem-disc-spin 16s linear infinite; }
.anthem__disc span { display: grid; place-items: center; width: 31%; aspect-ratio: 1; border: 2px solid #fff2ac; border-radius: 50%; color: #fff4b9; background: radial-gradient(circle,#fd9d41,#a2419d 75%); box-shadow: 0 0 15px #ffad56; font: 900 clamp(35px,5vw,57px)/1 var(--display); text-shadow: 0 0 9px #fff; }
@keyframes anthem-disc-spin { to { transform: rotate(360deg); } }
.anthem__panel { min-width: 0; padding: clamp(21px,3vw,37px); border: 2px solid #85cfff; border-radius: 24px; background: linear-gradient(145deg,rgba(23,30,63,.91),rgba(13,6,30,.97) 73%); box-shadow: 0 0 28px rgba(72,164,255,.33),inset 0 0 30px rgba(127,70,229,.17); }
.anthem__panel [hidden] { display: none !important; }
.anthem__form { display: grid; gap: 22px; }
.anthem__question { min-width: 0; margin: 0; padding: 0; border: 0; }
.anthem__question legend { width: 100%; margin-bottom: 10px; color: #fff; font: 900 clamp(22px,2.5vw,28px)/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.anthem__question legend span { margin-right: 8px; color: #b8ff88; }
.anthem__options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.anthem__options label { position: relative; cursor: pointer; }
.anthem__options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.anthem__options label span { display: flex; align-items: center; min-height: 47px; padding: 9px 13px; border: 1px solid rgba(193,170,229,.57); border-radius: 9px; color: #ede2f5; background: rgba(14,9,37,.7); font: 750 clamp(17px,2vw,20px)/1.06 var(--display); transition: border-color .18s,background .18s,box-shadow .18s; }
.anthem__options label:hover span { border-color: #eeb7ff; background: rgba(89,39,126,.46); }
.anthem__options input:checked + span { border-color: #ffca73; color: #fff; background: linear-gradient(100deg,rgba(162,70,174,.69),rgba(58,99,180,.7)); box-shadow: inset 0 0 11px rgba(255,192,112,.19),0 0 13px rgba(255,157,65,.32); }
.anthem__options input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 3px; }
.anthem__submit,.anthem__again,.anthem__catalog { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 52px; padding: 11px 20px; border: 2px solid #ffd57f; border-radius: 10px; color: #1d0d28; background: linear-gradient(#ffe291,#ff9b36); box-shadow: 0 0 18px rgba(255,151,37,.49); font: 900 20px/1 var(--display); letter-spacing: .05em; text-align: center; text-transform: uppercase; cursor: pointer; transition: transform .2s,box-shadow .2s; }
.anthem__submit { justify-self: start; margin-top: 4px; }
.anthem__submit:hover,.anthem__again:hover,.anthem__catalog:hover { transform: translateY(-2px); box-shadow: 0 0 25px rgba(255,175,49,.76); }
.anthem__submit:disabled { cursor: default; opacity: .65; }
.anthem__submit:disabled:hover { transform: none; }
.anthem__fallback { margin: 15px 0 0; color: #e6d2f0; font: 650 18px/1.25 var(--body); }
.anthem__fallback a { color: #b5f087; text-decoration: underline; text-underline-offset: 3px; }
.anthem.is-ready .anthem__fallback { display: none; }
.anthem__results { margin-top: 29px; padding-top: 25px; border-top: 2px solid rgba(179,122,250,.47); }
.anthem__results-kicker { margin: 0 0 6px; color: var(--lime); font: 900 15px/1 var(--display); letter-spacing: .16em; }
.anthem__results h3 { margin-bottom: 18px; color: #ffcd85; font: 900 clamp(30px,3.7vw,44px)/.96 var(--display); text-transform: uppercase; text-shadow: 0 0 14px rgba(255,152,33,.48); }
.anthem__results h3:focus { outline: none; }
.anthem__songs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.anthem__songs li { display: grid; grid-template-columns: 43px minmax(0,1fr); gap: 11px; align-items: center; min-width: 0; padding: 13px; border: 1px solid rgba(134,198,255,.56); border-radius: 11px; background: rgba(13,7,33,.73); box-shadow: inset 0 0 16px rgba(76,156,235,.1); }
.anthem__song-number { color: #baf68f; font: 900 25px/1 var(--display); }
.anthem__song-title { display: block; color: #fff; font: 900 clamp(22px,2.7vw,29px)/.98 var(--display); text-transform: uppercase; }
.anthem__song-meta { display: block; margin-top: 4px; color: #ddceeb; font: 650 17px/1.1 var(--body); }
.anthem__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 19px; }
.anthem__again,.anthem__catalog { min-height: 46px; padding: 9px 13px; font-size: 17px; }
.anthem__catalog { border-color: #a5e4ff; color: #fff; background: rgba(30,93,154,.58); box-shadow: 0 0 13px rgba(53,166,240,.28); }
.anthem__catalog:hover { box-shadow: 0 0 21px rgba(53,166,240,.67); }
.anthem__note { margin: 17px 0 0; color: #d2c6d6; font: 650 17px/1.18 var(--body); }
.anthem__status { min-height: 0; margin: 12px 0 0; color: #b8ff88; font: 700 17px/1.13 var(--display); }
.anthem__status:empty { display: none; }
@media (max-width: 850px) { .anthem__inner { grid-template-columns: 1fr; }.anthem__disc { display: none; }.anthem__intro > p:not(.eyebrow) { max-width: 660px; } }
@media (max-width: 520px) { .anthem__panel { padding: 20px 15px; }.anthem__options { gap: 7px; }.anthem__options label span { padding: 9px 10px; font-size: 17px; }.anthem__intro h2 { font-size: clamp(60px,15vw,83px); }.anthem__actions > * { flex: 1 1 150px; } }
@media (prefers-reduced-motion: reduce) { .anthem__disc { animation: none; }.anthem__options label span,.anthem__submit,.anthem__again,.anthem__catalog { transition: none; } }