:root{
  --ms-bg:#02050d;
  --ms-bg2:#071a42;
  --ms-ink:#eef7ff;
  --ms-blue:#2e8cff;
  --ms-blue2:#6fc8ff;
  --ms-muted:#91a5bf;
  --ms-line:rgba(124,190,255,.20);
}
*{box-sizing:border-box}
html,body{margin:0;min-width:100%;min-height:100%;background:var(--ms-bg)}
body{
  min-height:100svh;
  overflow-x:hidden;
  color:var(--ms-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 50% 45%,rgba(20,101,255,.23),transparent 34rem),
    radial-gradient(circle at 50% 78%,rgba(15,83,213,.15),transparent 28rem),
    linear-gradient(180deg,#010307 0%,#06112a 48%,#010208 100%);
}
a{color:inherit}
button{font:inherit}
.missisup{
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  isolation:isolate;
  position:relative;
  overflow:hidden;
}
.missisup::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.24;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,transparent 4%,#000 30%,#000 82%,transparent 100%);
}
.missisup-header{
  width:min(1500px,calc(100% - 40px));
  margin-inline:auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:clamp(20px,3vw,38px) 0 8px;
}
.missisup-brand{
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
  font-weight:950;
  font-size:.78rem;
  letter-spacing:.32em;
  color:#7cc8ff;
  opacity:.86;
}
.missisup-title-block{text-align:right}
.missisup-name{
  margin:0;
  font-size:clamp(.9rem,1.4vw,1.05rem);
  font-weight:900;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#f8fcff;
}
.missisup-tagline{
  margin:5px 0 0;
  color:var(--ms-muted);
  font-size:clamp(.72rem,1.2vw,.88rem);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.missisup-stage{
  min-height:0;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  perspective:900px;
  padding:clamp(18px,4vh,52px) 10px clamp(6px,1.5vh,18px);
}
.missisup-aura{
  position:absolute;
  pointer-events:none;
  left:50%;
  top:50%;
  width:min(86vw,1300px);
  height:min(52vw,580px);
  transform:translate(-50%,-48%);
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(31,123,255,.24),rgba(19,71,177,.07) 44%,transparent 72%);
  filter:blur(12px);
  transition:opacity .25s ease,transform .4s ease;
}
.missisup-word{
  margin:0;
  pointer-events:none;
  width:100%;
  display:flex;
  align-items:baseline;
  justify-content:center;
  white-space:nowrap;
  color:#dcecff;
  font-family:"Arial Black","Segoe UI Black",Impact,Haettenschweiler,sans-serif;
  font-size:clamp(3.35rem,11.2vw,12.8rem);
  font-weight:950;
  line-height:.82;
  letter-spacing:-.06em;
  text-transform:uppercase;
  transform-style:preserve-3d;
  filter:drop-shadow(0 .08em .05em rgba(0,0,0,.58));
}
.missisup-group{
  display:inline-block;
  position:relative;
  transform-origin:50% 72%;
  transform-style:preserve-3d;
  will-change:transform,filter,color;
  color:#d8e8f9;
  -webkit-text-stroke:.008em rgba(255,255,255,.28);
  text-shadow:
    0 .018em 0 rgba(255,255,255,.46),
    0 .06em .025em rgba(0,0,0,.68),
    0 0 .10em rgba(59,140,255,.10);
  transition:color .16s ease,text-shadow .18s ease,filter .18s ease,opacity .18s ease;
}
.missisup-group.was-hit{color:#c8ddf3}
.missisup-group.is-current{
  color:#fff;
  filter:brightness(1.18);
  text-shadow:
    0 0 .045em rgba(255,255,255,.96),
    0 0 .14em rgba(111,200,255,.95),
    0 0 .30em rgba(46,140,255,.88),
    0 .09em .05em rgba(0,0,0,.72);
}
.missisup-group.is-hit{
  animation:missisup-hit .52s cubic-bezier(.16,.76,.22,1) both;
}
@keyframes missisup-hit{
  0%{transform:translate3d(0,0,0) scale3d(1,1,1)}
  24%{transform:translate3d(0,-.16em,145px) scale3d(1.38,1.48,1.38)}
  48%{transform:translate3d(0,-.08em,72px) scale3d(1.18,1.23,1.18)}
  76%{transform:translate3d(0,-.025em,20px) scale3d(1.055,1.07,1.055)}
  100%{transform:translate3d(0,0,0) scale3d(1,1,1)}
}
.missisup.is-playing .missisup-aura{
  opacity:1;
  transform:translate(-50%,-48%) scale(1.04);
}
.missisup.is-complete .missisup-group{
  color:#e9f5ff;
  text-shadow:0 0 .12em rgba(111,200,255,.45),0 .06em .03em rgba(0,0,0,.62);
}
.missisup-subline{
  margin:clamp(22px,4vh,44px) 0 0;
  color:#5da7ff;
  text-transform:uppercase;
  font-weight:800;
  font-size:clamp(.75rem,1.5vw,1rem);
  letter-spacing:.48em;
  text-align:center;
}
.missisup-controls{
  position:relative;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2px 20px clamp(18px,3vh,30px);
}
.missisup-voice{
  width:min(100%,760px);
  margin:0 0 16px;
  text-align:center;
}
.missisup-voice-heading{
  margin:0 0 9px;
  color:#a7d8ff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.20em;
  text-transform:uppercase;
}
.missisup-voice-options{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.missisup-voice-choice{
  appearance:none;
  border:1px solid rgba(124,190,255,.34);
  border-radius:999px;
  background:rgba(4,17,43,.70);
  color:#c9dcf0;
  min-height:40px;
  padding:0 16px;
  cursor:pointer;
  touch-action:manipulation;
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.05em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 8px 24px rgba(0,0,0,.20);
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.missisup-voice-choice:hover{
  transform:translateY(-1px);
  border-color:rgba(151,219,255,.68);
  color:#fff;
}
.missisup-voice-choice:focus-visible{outline:3px solid #fff;outline-offset:4px}
.missisup-voice-choice.is-selected{
  border-color:rgba(142,220,255,.92);
  background:linear-gradient(180deg,rgba(39,118,205,.66),rgba(7,33,82,.88));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 0 24px rgba(46,140,255,.28),0 9px 28px rgba(0,0,0,.28);
}
.missisup-play{
  appearance:none;
  position:relative;
  z-index:21;
  pointer-events:auto;
  touch-action:manipulation;
  border:1px solid rgba(102,190,255,.78);
  background:linear-gradient(180deg,rgba(18,62,126,.70),rgba(3,18,49,.92));
  color:#fff;
  min-width:142px;
  height:66px;
  padding:0 25px;
  border-radius:999px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 5px rgba(32,132,255,.08),
    0 0 34px rgba(37,128,255,.30),
    0 14px 34px rgba(0,0,0,.42);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.missisup-play:hover{
  transform:translateY(-2px);
  border-color:#9edaff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 6px rgba(32,132,255,.11),0 0 46px rgba(37,128,255,.42),0 16px 38px rgba(0,0,0,.45);
}
.missisup.is-playing .missisup-play{
  border-color:#c8edff;
  filter:brightness(1.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 0 0 7px rgba(32,132,255,.15),
    0 0 56px rgba(74,171,255,.58),
    0 16px 40px rgba(0,0,0,.46);
}
.missisup-play:disabled{
  cursor:wait;
  opacity:.68;
  transform:none;
}
.missisup-play:focus-visible{outline:3px solid #fff;outline-offset:5px}
.missisup-play-icon,
.missisup-play-label{pointer-events:none}
.missisup-play-icon{
  width:0;
  height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:15px solid #fff;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.55));
}
.missisup-play-label{font-size:.92rem;font-weight:950;letter-spacing:.13em}
.missisup-status{
  margin:15px 0 0;
  min-height:1.3em;
  color:var(--ms-muted);
  font-size:.82rem;
  text-align:center;
}
.missisup-footer{
  width:min(1500px,calc(100% - 40px));
  margin-inline:auto;
  min-height:52px;
  padding:14px 0 18px;
  border-top:1px solid var(--ms-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#64758d;
  font-size:.67rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.missisup-footer a{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;color:#3f9cff}
.missisup-footer a:hover{color:#a9dcff}
@media (max-width:720px){
  .missisup-header{width:calc(100% - 24px);padding-top:18px}
  .missisup-title-block{text-align:right}
  .missisup-tagline{display:none}
  .missisup-stage{padding-inline:3px}
  .missisup-word{font-size:clamp(2.65rem,11.5vw,5.4rem);letter-spacing:-.07em}
  .missisup-subline{letter-spacing:.28em}
  .missisup-voice{margin-bottom:14px}
  .missisup-voice-heading{font-size:.66rem;letter-spacing:.16em}
  .missisup-voice-options{gap:7px}
  .missisup-voice-choice{min-height:38px;padding:0 12px;font-size:.73rem}
  .missisup-footer{width:calc(100% - 24px);font-size:.58rem;letter-spacing:.14em}
}
@media (max-width:430px){
  .missisup-header{align-items:center}
  .missisup-name{font-size:.78rem;letter-spacing:.16em}
  .missisup-brand{font-size:.68rem;letter-spacing:.22em}
  .missisup-word{font-size:11.25vw}
  .missisup-voice{width:100%;padding-inline:2px}
  .missisup-voice-options{display:grid;grid-template-columns:1fr;gap:7px;width:min(100%,260px);margin-inline:auto}
  .missisup-voice-choice{width:100%}
  .missisup-play{min-width:128px;height:60px}
  .missisup-status{font-size:.76rem}
  .missisup-footer{justify-content:center;text-align:center}
  .missisup-footer span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .missisup-group,.missisup-play,.missisup-voice-choice,.missisup-aura,.missisup-state-figure{transition:none!important}
  .missisup-group.is-hit{animation:none!important}
  .missisup-group.is-current{filter:brightness(1.35)}
}

/* MissiSup V2: Mississippi itself becomes the stage backdrop. */
.missisup-state-wrap{
  position:absolute;
  left:50%;
  top:47%;
  width:min(36vw,430px);
  height:min(72vh,660px);
  transform:translate(-50%,-50%);
  z-index:-1;
  pointer-events:none;
  opacity:.72;
  transition:opacity .35s ease,transform .55s cubic-bezier(.2,.7,.2,1),filter .35s ease;
}
.missisup-state-figure{
  position:relative;
  width:100%;
  height:100%;
  transform:rotate(var(--ms-rock-angle,0deg));
  transform-origin:50% 72%;
  will-change:transform;
  transition:transform .48s cubic-bezier(.2,.7,.2,1);
}
.missisup-state{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.86;
  filter:drop-shadow(0 0 10px rgba(46,140,255,.38)) drop-shadow(0 0 28px rgba(12,80,220,.24));
}
.missisup-state-glow{
  position:absolute;
  inset:12% -20% 8%;
  border-radius:48%;
  background:radial-gradient(ellipse at center,rgba(34,124,255,.23),rgba(12,66,173,.08) 46%,transparent 72%);
  filter:blur(22px);
  z-index:-1;
}
.missisup-horizon{
  position:absolute;
  left:50%;
  bottom:11%;
  width:min(96vw,1500px);
  height:34%;
  transform:translateX(-50%);
  z-index:-2;
  pointer-events:none;
  opacity:.48;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(30,127,255,.28),transparent 54%),
    repeating-linear-gradient(180deg,rgba(74,158,255,.10) 0 1px,transparent 1px 14px);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.58) 42%,transparent 100%);
  filter:blur(.15px);
}
.missisup-stage::before,
.missisup-stage::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-2;
  left:50%;
  transform:translateX(-50%);
}
.missisup-stage::before{
  top:18%;
  width:min(96vw,1450px);
  height:46%;
  background:
    radial-gradient(ellipse at 22% 55%,rgba(30,122,255,.17),transparent 30%),
    radial-gradient(ellipse at 78% 55%,rgba(30,122,255,.17),transparent 30%);
  filter:blur(26px);
}
.missisup-stage::after{
  bottom:7%;
  width:min(92vw,1380px);
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(70,165,255,.12),rgba(98,195,255,.54),rgba(70,165,255,.12),transparent);
  box-shadow:0 0 32px rgba(46,140,255,.48),0 12px 46px rgba(46,140,255,.20);
}
.missisup.is-playing .missisup-state-wrap{
  opacity:.92;
  transform:translate(-50%,-50%) scale(1.025);
  filter:brightness(1.12);
}
.missisup.is-complete .missisup-state-wrap{
  opacity:.84;
  filter:brightness(1.08) saturate(1.1);
}
.missisup-word{position:relative;z-index:3}
.missisup-subline{position:relative;z-index:3;text-shadow:0 0 18px rgba(46,140,255,.28)}
@media (max-width:900px){
  .missisup-state-wrap{width:min(48vw,380px);height:min(65vh,600px);top:48%}
}
@media (max-width:720px){
  .missisup-state-wrap{width:min(64vw,330px);height:min(58vh,520px);opacity:.60}
  .missisup-horizon{bottom:13%;height:30%;opacity:.38}
}
@media (max-width:430px){
  .missisup-state-wrap{width:72vw;height:54vh;top:49%;opacity:.54}
  .missisup-subline{font-size:.64rem;letter-spacing:.19em}
}