/* The letter treatment and peak animation are copied from current Spell.
   States' layout and geographic stage follow below. */
.states-word{
  --states-word-size:10rem;
  flex-shrink:0;
  position:relative;
  top:var(--states-word-offset,0px);
  margin:0;
  width:100%;
  max-width:calc(100vw - 24px);
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  row-gap:.55em;
  column-gap:.42em;
  color:#dcecff;
  font-family:"Arial Black","Segoe UI Black",Impact,Haettenschweiler,sans-serif;
  font-size:var(--states-word-size);
  font-weight:950;
  line-height:.86;
  letter-spacing:-.055em;
  text-transform:uppercase;
  text-align:center;
  transform-style:preserve-3d;
  filter:drop-shadow(0 .08em .05em rgba(0,0,0,.58));
}
.states-word-group{
  display:inline-flex;
  flex:0 0 auto;
  white-space:nowrap;
}
.states-letter,
.states-separator{
  display:inline-block;
  position:relative;
}
.states-letter{
  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;
}
.states-separator{width:.42em}
.states-word > .states-separator[data-separator=" "]{display:none}
.states-separator[data-separator="-"]{width:.34em}
.states-separator[data-separator="'"]{width:.16em}
.states-letter.was-hit{color:#c8ddf3}
.states-letter.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);
}
.states-letter.is-hit{
  animation:states-hit .52s cubic-bezier(.16,.76,.22,1) both;
}
@keyframes states-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)}
}
.states.is-playing .states-aura{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.04);
}

:root{color-scheme:dark;--st-ink:#eef7ff;--st-muted:#a0b4ce;--st-line:rgba(124,190,255,.22)}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;min-height:100%;background:#030916}
body{color:var(--st-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:radial-gradient(ellipse at 50% 32%,#0b2855 0,transparent 62%),linear-gradient(180deg,#030710,#071426 58%,#030711)}
a{color:inherit}
button,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.46}
button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #c5f0ff;outline-offset:5px}
[hidden]{display:none!important}
.states{min-height:100svh;display:grid;grid-template-rows:auto minmax(350px,1fr) auto auto;isolation:isolate;position:relative;padding-bottom:env(safe-area-inset-bottom);overflow-x:clip;overflow-y:visible}
.states::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:radial-gradient(circle,rgba(124,190,255,.13) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(transparent,#000 30%,transparent 85%)}
.states-header{width:min(1440px,calc(100% - 64px));margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:26px 0 14px}
.states-brand{width:max-content;color:#8bd3ff;font-size:.78rem;font-weight:900;letter-spacing:.26em;text-underline-offset:5px;padding-block:12px}
.states-title-block{text-align:center}
.states-name{margin:0;color:#fff;font-weight:950;font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:.36em;padding-left:.36em}
.states-tagline{margin:7px 0 0;color:#b0c8e5;font-size:.78rem;letter-spacing:.07em}
.states-edition{justify-self:end;color:#7494b9;font-size:.59rem;letter-spacing:.13em}
.states-stage{position:relative;z-index:1;min-width:0;min-height:350px;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:900px;padding:80px 24px 38px}
.states-state-wrap{position:absolute;left:50%;top:49%;width:min(78%,700px);height:calc(100% - 38px);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;opacity:.9;transition:filter .4s ease}
.states-state-figure{position:relative;width:100%;height:100%;transform:rotate(var(--states-rock-angle,0deg));transform-origin:50% 70%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.states-state{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px #2e8cff66) drop-shadow(0 0 30px #1476ff33)}
.states-state-glow{position:absolute;inset:4% -15%;border-radius:50%;background:radial-gradient(ellipse,#217fff30,transparent 68%);filter:blur(22px);z-index:-1}
.states-aura{position:absolute;left:50%;top:50%;width:min(95vw,1300px);height:80%;transform:translate(-50%,-50%);z-index:-2;pointer-events:none;background:radial-gradient(ellipse,#2379ff22,transparent 65%);transition:transform .5s,opacity .5s}
.states-horizon{position:absolute;left:50%;bottom:5%;width:min(94vw,1380px);height:24%;transform:translateX(-50%);z-index:-2;pointer-events:none;opacity:.6;background:radial-gradient(ellipse at 50% 0%,#1e7fff33,transparent 55%),repeating-linear-gradient(180deg,#4a9eff16 0 1px,transparent 1px 14px);mask-image:linear-gradient(#000,transparent)}
.states-stage::after{content:"";position:absolute;bottom:7%;left:10%;width:80%;height:1px;z-index:-1;background:linear-gradient(90deg,transparent,#62c3ff88,transparent);box-shadow:0 0 24px #2e8cff77}
.states-coordinate{position:absolute;left:32px;top:24px;display:flex;align-items:center;gap:10px;margin:0;color:#94b7dd;font-size:.61rem;letter-spacing:.18em}
[data-state-code]{color:#bbebff;font-size:.9rem;font-weight:800}
.states-coordinate-line{width:24px;height:1px;background:#568aba}
.states-word{max-width:min(82vw,1120px);z-index:3;row-gap:.5em}
.states-subline{position:relative;top:var(--states-word-offset,0px);z-index:3;flex-shrink:0;margin:30px 0 0;text-align:center;text-transform:uppercase;font-weight:800;font-size:.67rem;letter-spacing:.25em;color:#9fd0ff;text-shadow:0 2px 10px #030916}
.states.is-playing .states-state-wrap{filter:brightness(1.22)}
.states.is-playing .states-state{animation:states-breathe 4s ease-in-out infinite}
.states.is-complete .states-state-wrap{filter:brightness(1.15)}
@keyframes states-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
.states-controls{position:relative;z-index:5;width:min(760px,calc(100% - 40px));margin:0 auto;display:grid;grid-template-columns:minmax(180px,.85fr) minmax(0,1.7fr);gap:20px 28px;padding:14px 0 8px}
.states-control-heading{display:flex;justify-content:space-between;gap:10px;margin:0 0 10px;color:#a9c5e6;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
[data-state-position]{color:#91b2d6;font-variant-numeric:tabular-nums}
.states-select{width:100%;height:48px;padding:0 13px;border:1px solid #4384ba88;border-radius:10px;color:#fff;background:#0a1e3a;font-size:1rem;font-weight:700}
.states-select option{color:#eef7ff;background:#0a1e3a}
.states-voice-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.states-voice-choice{min-height:44px;padding:8px 10px;border:1px solid #5889b34d;border-radius:9px;color:#a9bfd8;background:linear-gradient(180deg,#112c4c99,#06152b);font-size:.78rem;font-weight:700;transition:background .2s,border-color .2s,box-shadow .2s}
.states-voice-choice:hover{color:#fff;border-color:#85caffbb}
.states-voice-choice.is-selected{color:#fff;border-color:#73c7ff;background:linear-gradient(180deg,#286ca66e,#0a294d);box-shadow:inset 0 0 12px #5ab7ff15,0 0 16px #2e8cff18}
.states-voice-choice.is-random-current{color:#fff;border-color:#caefff;box-shadow:0 0 17px #73c7ff88}
.states-playback{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:14px;margin-top:1px}
.states-play{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-width:196px;min-height:60px;padding:14px 26px;border:1px solid #92d8ff;border-radius:999px;background:linear-gradient(160deg,#43b0ff,#1765c7 60%,#164993);box-shadow:0 0 30px #2e8cff3d,inset 0 1px 0 #ffffff66;color:white;font-size:.9rem;font-weight:950;letter-spacing:.15em}
.states-play:hover:not(:disabled){filter:brightness(1.14)}
.states-play-icon{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid white}
.states-stop{min-height:44px;padding:0 15px;border:1px solid #6589b34d;border-radius:999px;background:#091a31;color:#bed3eb;font-size:.7rem;font-weight:800;letter-spacing:.08em}
.states-navigation{grid-column:1/-1;display:flex;justify-content:center;gap:14px;margin-top:-7px}
.states-navigation button{min-height:44px;border:0;background:transparent;color:#a8caee;font-size:.66rem;font-weight:800;letter-spacing:.09em;padding:10px 12px}
.states-navigation button:hover{color:white}
.states-navigation button span{margin-left:8px;color:#7bd4ff;font-size:1rem}
.states-status{grid-column:1/-1;margin:-12px 0 9px;min-height:1.5em;text-align:center;color:var(--st-muted);font-size:.75rem;line-height:1.5}
.states-footer{width:min(1440px,calc(100% - 64px));margin:0 auto;padding:17px 0;display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--st-line);color:#90a7c2;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase}
.states-footer a{color:#72bbff;text-underline-offset:4px}
noscript{grid-column:1/-1;text-align:center}
@media(min-height:850px) and (min-width:721px){.states-stage{min-height:460px}.states-controls{padding-bottom:20px}}

/* Compact desktop-height layout: keep the complete app visible at normal zoom
   on laptop-class viewports without weakening the mobile layout. */
@media (min-width:721px) and (max-height:849px){
  .states{
    height:100svh;
    min-height:0;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    overflow-y:auto;
  }
  .states-header{padding:14px 0 7px}
  .states-brand{padding-block:6px}
  .states-tagline{margin-top:4px}
  .states-stage{min-height:0;padding:44px 24px 22px}
  .states-coordinate{top:13px}
  .states-subline{margin-top:18px}
  .states-controls{gap:10px 28px;padding:7px 0 2px}
  .states-control-heading{margin-bottom:6px}
  .states-select{height:44px}
  .states-voice-choice{min-height:40px;padding:6px 10px}
  .states-play{min-height:52px;padding:10px 24px}
  .states-stop{min-height:40px}
  .states-navigation{margin-top:-5px}
  .states-navigation button{min-height:36px;padding:6px 12px}
  .states-status{margin:-8px 0 3px;line-height:1.25}
  .states-footer{padding:9px 0}
}

@media(max-width:720px){
  .states-header{width:calc(100% - 32px);grid-template-columns:1fr auto;padding:18px 0 10px}
  .states-title-block{text-align:right}.states-name{font-size:1.3rem}.states-tagline{font-size:.65rem}.states-edition{display:none}
  .states-stage{padding:65px 16px 38px;min-height:330px}.states-coordinate{left:18px;top:18px;font-size:.52rem}
  .states-state-wrap{width:88%;height:calc(100% - 28px)}.states-word{max-width:82vw}.states-subline{font-size:.55rem;letter-spacing:.16em;margin-top:26px}
  .states-controls{width:calc(100% - 36px);grid-template-columns:1fr;gap:20px;max-width:470px;padding-top:8px}
  .states-control-heading{font-size:.67rem}.states-voice-options{gap:8px}.states-voice-choice{min-height:46px;font-size:.8rem}
  .states-selection{width:100%}.states-footer{width:calc(100% - 32px);font-size:.52rem;letter-spacing:.08em}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .states-state-figure,.states-state{transform:none!important}
  .states-aura{transform:translate(-50%,-50%)!important}
  .states-letter.is-current{filter:brightness(1.2)}
}

/* Desktop voice controls: keep all four voices on one compact row. */
@media (min-width:721px){
  .states-voice-options{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
  }
  .states-voice-choice{
    min-height:38px;
    padding:5px 6px;
    font-size:.69rem;
    line-height:1.15;
  }
}

/* Phones retain the roomier two-by-two voice layout. */
@media (max-width:720px){
  .states-voice-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Master-only diagnostic controls, exposed only when /states/?d=1 renders them. */
.states-diagnose{
  min-height:44px;
  padding:0 16px;
  border:1px solid #73c7ff99;
  border-radius:999px;
  background:#0b2747;
  color:#d9efff;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.09em;
}
.states-diagnose:hover:not(:disabled){border-color:#a6e4ff;color:#fff;box-shadow:0 0 16px #2e8cff2e}
.states-diagnose:disabled{opacity:.42;cursor:not-allowed}
.states-diagnose-hint{
  grid-column:1/-1;
  margin:-4px 0 -2px;
  text-align:center;
  color:#9eb9d6;
  font-size:.68rem;
}
.states-reports{
  grid-column:1/-1;
  margin:-4px auto 6px;
  padding:8px 12px;
  border:1px solid #4e7da65c;
  border-radius:12px;
  background:#07172a;
  text-align:center;
  color:#bcd7ef;
  font-size:.68rem;
}
.states-reports p{margin:0 0 6px}
.states-reports a{
  display:inline-block;
  margin:0 6px;
  color:#7bd4ff;
  text-underline-offset:3px;
}
@media (min-width:721px) and (max-height:849px){
  .states-diagnose{min-height:40px;padding:0 13px}
  .states-reports{margin:-6px auto 2px;padding:6px 10px}
}
@media(max-width:720px){
  .states-playback{flex-wrap:wrap}
  .states-diagnose{min-height:44px}
}

/* STATES opening screen + Cities mode. */
.states.is-intro .states-state-wrap{width:min(82%,820px);opacity:.78}
.states.is-intro .states-state{filter:drop-shadow(0 0 10px #63c7ff66) drop-shadow(0 0 34px #1476ff3a)}
.states.is-intro .states-word{letter-spacing:.08em;padding-left:.08em}
.states-selection-heading{align-items:center}
.states-selection-meta{display:flex;align-items:center;justify-content:flex-end;gap:9px;white-space:nowrap}
.states-cities-toggle{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 7px 3px 5px;border:1px solid #4d7da866;border-radius:999px;background:#08172b;color:#8faecd;font-size:.56rem;font-weight:900;letter-spacing:.08em}
.states-cities-toggle>span{position:relative;width:22px;height:12px;border-radius:999px;background:#214565;box-shadow:inset 0 0 0 1px #6aa8d744;transition:background .2s}
.states-cities-toggle>span::after{content:"";position:absolute;width:8px;height:8px;left:2px;top:2px;border-radius:50%;background:#9abbd7;transition:transform .2s,background .2s}
.states-cities-toggle.is-on{color:#e9f8ff;border-color:#73c7ff;background:#0a294d;box-shadow:0 0 12px #2e8cff22}
.states-cities-toggle.is-on>span{background:#2586c9}
.states-cities-toggle.is-on>span::after{transform:translateX(10px);background:white}
.states-cities-toggle:disabled{opacity:.38}
.states-city-choices{position:relative;top:var(--states-word-offset,0px);z-index:4;display:flex;justify-content:center;align-items:stretch;gap:7px;flex-wrap:wrap;width:min(760px,88vw);margin:16px auto 0}
.states-city-choices button{min-width:0;max-width:230px;flex:1 1 170px;padding:6px 9px;border:1px solid #4e82aa6b;border-radius:10px;background:#06162a99;color:#a8c2dc;text-align:center;box-shadow:inset 0 0 18px #1765c711}
.states-city-choices button span{display:block;margin-bottom:2px;color:#739bc1;font-size:.48rem;font-weight:900;letter-spacing:.14em}
.states-city-choices button strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d7ebff;font-size:.66rem;letter-spacing:.02em}
.states-city-choices button:hover{border-color:#7bcfff;color:white}
.states-city-choices button.is-selected{border-color:#8edcff;background:#0b3156c7;box-shadow:0 0 16px #2e8cff25,inset 0 0 18px #4ea9ff18}
.states-city-choices button.is-selected strong{color:white}
.states.is-cities-mode .states-subline{margin-top:12px;font-size:.58rem;letter-spacing:.17em}
@media (min-width:721px) and (max-height:849px){
  .states-city-choices{margin-top:10px;gap:6px}
  .states-city-choices button{padding:4px 7px}
  .states.is-cities-mode .states-subline{margin-top:7px}
}
@media(max-width:720px){
  .states-selection-meta{gap:6px}
  .states-cities-toggle{font-size:.52rem}
  .states-city-choices{width:90vw;margin-top:13px;gap:6px}
  .states-city-choices button{flex:1 1 28%;padding:5px 5px}
  .states-city-choices button span{font-size:.42rem}
  .states-city-choices button strong{font-size:.58rem}
  .states.is-cities-mode .states-subline{margin-top:10px;font-size:.5rem}
}