:root {
  --paper: oklch(0.985 0.004 220);
  --ink: oklch(0.19 0.012 225);
  --muted: oklch(0.49 0.015 225);
  --line: oklch(0.89 0.008 225);
  --yellow: oklch(0.88 0.18 98);
  font-family: Arial, "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}
button {
  font: inherit;
  color: inherit;
}
.app {
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(330px, 38vw) 1fr;
  overflow: hidden;
}
.sidebar {
  position: relative;
  z-index: 5;
  padding: 36px clamp(28px, 4.8vw, 76px);
  background: var(--paper);
}
.wordmark {
  position: relative;
  border: 0;
  background: none;
  padding: 0 0 10px;
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  cursor: pointer;
}
.wordmark span {
  font-weight: 500;
}
.wordmark i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42%;
  height: 5px;
  background: var(--yellow);
}
.home-copy {
  position: absolute;
  left: clamp(28px, 4.8vw, 76px);
  right: clamp(28px, 4.8vw, 76px);
  top: 50%;
  transform: translateY(-45%);
  transition:
    opacity 0.2s ease-out,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.vote-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  border-bottom: 8px solid var(--yellow);
  background: none;
  padding: 0 0 14px;
  font-size: clamp(4.5rem, 8vw, 8.5rem);
  line-height: 0.82;
  font-weight: 900;
  letter-spacing: -0.085em;
  cursor: pointer;
}
.vote-hero span {
  font-size: 0.32em;
  letter-spacing: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.vote-hero:hover span,
.vote-hero:focus-visible span {
  transform: translateX(10px);
}
.vote-hero:focus-visible,
.stats-button:focus-visible,
.back:focus-visible,
.confirm-vote:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}
.home-copy > p {
  max-width: 34ch;
  margin: 26px 0 42px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.stats-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--ink);
  background: none;
  padding: 17px 18px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 0.18s;
}
.stats-button:hover {
  background: var(--yellow);
}
.scene-shell {
  position: relative;
  min-width: 0;
  background: var(--paper);
}
#scene {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
#scene:active {
  cursor: grabbing;
}
.drag-hint {
  position: absolute;
  right: 30px;
  bottom: 24px;
  margin: 0;
  color: var(--muted);
  font-size: 0.61rem;
  letter-spacing: 0.14em;
}
.loading {
  --load: 0%;
  --load-scale: 0;
  --dock-x: 78px;
  --dock-y: 47px;
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: oklch(0.12 0.008 225);
  color: var(--yellow);
  clip-path: inset(0 0 0 0 round 0);
}
.loader-brand {
  position: relative;
  width: max-content;
  font-size: clamp(3.2rem, 9vw, 9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.075em;
  transform-origin: center;
}
.loader-brand span,
.loader-brand b {
  display: block;
  white-space: nowrap;
}
.loader-brand span {
  color: transparent;
  -webkit-text-stroke: 1.5px oklch(0.72 0.01 225);
}
.loader-brand b {
  position: absolute;
  inset: 0;
  color: var(--yellow);
  clip-path: polygon(
    0 0,
    calc(var(--load) - 1.2%) 0,
    calc(var(--load) + 0.5%) 14%,
    calc(var(--load) - 0.7%) 29%,
    calc(var(--load) + 1.1%) 44%,
    calc(var(--load) - 0.4%) 60%,
    calc(var(--load) + 0.8%) 76%,
    calc(var(--load) - 1%) 90%,
    var(--load) 100%,
    0 100%
  );
}
.loading.is-complete {
  animation: loader-drain 1.25s 0.28s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.loading.is-complete .loader-brand {
  animation: loader-dock 0.76s 0.12s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.loading.has-error .loader-brand {
  opacity: 0.45;
}
.app:not(.is-loaded) .sidebar,
.app:not(.is-loaded) #scene,
.app:not(.is-loaded) .drag-hint {
  opacity: 0;
}
.sidebar,
#scene,
.drag-hint {
  transition: opacity 0.48s 0.62s ease-out;
}
@keyframes loader-dock {
  55% {
    transform: translate(
        calc(-50vw + var(--dock-x)),
        calc(-50vh + var(--dock-y))
      )
      scale(0.2);
  }
  100% {
    transform: translate(
        calc(-50vw + var(--dock-x)),
        calc(-50vh + var(--dock-y))
      )
      scale(0.2);
    opacity: 0;
  }
}
@keyframes loader-drain {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  28% {
    clip-path: polygon(
      0 25%,
      12% 27%,
      25% 24%,
      39% 28%,
      52% 24%,
      65% 27%,
      80% 23%,
      100% 26%,
      100% 100%,
      0 100%
    );
  }
  62% {
    clip-path: polygon(
      0 67%,
      14% 70%,
      29% 66%,
      44% 71%,
      58% 66%,
      73% 69%,
      88% 65%,
      100% 68%,
      100% 100%,
      0 100%
    );
  }
  84% {
    clip-path: polygon(
      20% 91%,
      35% 89%,
      46% 94%,
      50% 85%,
      54% 94%,
      66% 89%,
      82% 92%,
      57% 100%,
      43% 100%
    );
  }
  100% {
    clip-path: polygon(49.5% 100%, 50.5% 100%, 50% 100%);
    visibility: hidden;
  }
}
.study {
  position: absolute;
  left: clamp(28px, 4.8vw, 76px);
  right: clamp(28px, 4.8vw, 76px);
  top: 112px;
  bottom: 38px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-18px);
  transition:
    opacity 0.2s,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.back {
  border: 0;
  background: none;
  padding: 7px 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.eyebrow {
  margin: 72px 0 16px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.study h2 {
  margin: 0;
  font-size: 3.7rem;
  line-height: 0.88;
  letter-spacing: -0.07em;
}
.study mark {
  background: linear-gradient(transparent 61%, var(--yellow) 61%);
  color: inherit;
}
.study > p:not(.eyebrow) {
  max-width: 33ch;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.vote-readout {
  position: absolute;
  left: 0;
  bottom: 0;
}
.vote-readout > span {
  display: block;
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
}
.vote-readout strong {
  display: block;
  margin: 5px 0;
  font-size: 1.7rem;
}
.vote-readout small {
  display: block;
  color: var(--muted);
  font-size: 0.65rem;
}
.confirm-vote {
  margin-top: 18px;
  min-width: 230px;
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--ink);
  background: var(--yellow);
  padding: 14px 16px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition:
    opacity 0.18s,
    transform 0.18s;
}
.confirm-vote:disabled {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.legend {
  margin-top: 32px;
}
.legend-summary {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 700;
}
.legend-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.68rem;
}
.legend-row i {
  width: 9px;
  height: 9px;
  background: var(--country);
}
.legend-row b {
  font-variant-numeric: tabular-nums;
}
.app:not([data-view="home"]) .home-copy {
  opacity: 0;
  pointer-events: none;
  transform: translate(-18px, -45%);
}
.app:not([data-view="home"]) .study {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.app:not([data-view="vote"]) .vote-readout {
  display: none;
}
.chart-tooltip {
  position: fixed;
  z-index: 30;
  width: 210px;
  padding: 14px 15px;
  background: var(--ink);
  color: var(--paper);
  pointer-events: none;
  transform: translate(14px, 14px);
  box-shadow: 0 10px 28px oklch(0.15 0.01 225/0.18);
}
.chart-tooltip strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.tip-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
  font-size: 0.67rem;
}
.tip-row i {
  width: 7px;
  height: 7px;
  background: var(--country);
}
.toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 18px);
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 800px) {
  body {
    overflow: auto;
  }
  .app {
    height: auto;
    min-height: 100svh;
    display: block;
  }
  .sidebar {
    height: 48svh;
    min-height: 390px;
    padding: 25px 24px;
  }
  .home-copy,
  .study {
    left: 24px;
    right: 24px;
  }
  .home-copy {
    top: 55%;
  }
  .vote-hero {
    font-size: 4.5rem;
  }
  .scene-shell {
    height: 52svh;
    min-height: 420px;
  }
  .study {
    top: 78px;
    bottom: 20px;
  }
  .eyebrow {
    margin-top: 30px;
  }
  .study h2 {
    font-size: 2.7rem;
  }
  .legend {
    position: absolute;
    right: 0;
    top: 45px;
    width: 150px;
    margin: 0;
  }
  .drag-hint {
    right: 20px;
    bottom: 18px;
  }
}

/* Full viewport identity step, kept last to prevent legacy overrides. */
.identity-question {
  position: fixed;
  z-index: 90;
  inset: 0;
  width: 100vw;
  height: 100svh;
  margin: 0;
  padding: clamp(32px, 6vh, 72px) clamp(24px, 8vw, 120px);
  border: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow-y: auto;
}
.identity-question[hidden] {
  display: none;
}
.identity-question h3 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.5rem, 4.5vw, 4.8rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
}
.identity-question > p {
  margin: 18px 0 32px;
  color: var(--muted);
  font-size: 0.8rem;
}
.identity-options {
  width: min(940px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.identity-question .identity-options button {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  border: 1px solid var(--line);
  background: transparent;
  padding: 18px;
  text-align: left;
  cursor: pointer;
}
.identity-options button i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tone);
}
.identity-options button span {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}
.identity-options button[data-ethnicity="latino"] {
  --tone: #d6ae92;
}
.identity-options button[data-ethnicity="black"] {
  --tone: #9b7864;
}
.identity-options button[data-ethnicity="white"] {
  --tone: #ead5c3;
}
.identity-options button[data-ethnicity="asian"] {
  --tone: #dfc29d;
}
.identity-question .identity-options button:hover,
.identity-question .identity-options button.selected {
  border-color: var(--ink);
  background: oklch(0.96 0.025 92);
}
.identity-question .confirm-vote {
  width: min(940px, 100%);
  min-height: 58px;
  margin: 10px 0 0;
}
.modal-sector {
  margin-bottom: 18px;
}
.modal-close {
  top: 28px;
  right: 32px;
}
@media (max-width: 700px) {
  .identity-question {
    justify-content: flex-start;
    padding: 82px 18px 24px;
  }
  .identity-question h3 {
    font-size: 2.5rem;
  }
  .identity-question > p {
    margin: 14px 0 22px;
  }
  .identity-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .identity-question .identity-options button {
    min-height: 104px;
    padding: 14px;
  }
  .identity-question .confirm-vote {
    margin-top: 8px;
  }
  .modal-close {
    top: 18px;
    right: 18px;
  }
}
.personality-result {
  position: fixed;
  z-index: 95;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  overflow-y: auto;
  animation: identity-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.personality-result[hidden] {
  display: none;
}
.personality-result > p:first-child {
  margin: 0 0 14px;
  color: var(--yellow);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.personality-sector {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: oklch(0.72 0.01 225);
}
.personality-result h3 {
  margin: 24px 0 18px;
  max-width: 1000px;
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: 0.8;
  letter-spacing: -0.075em;
}
.personality-copy {
  max-width: 650px;
  margin: 0;
  color: oklch(0.82 0.008 225);
  font-size: 0.94rem;
  line-height: 1.6;
}
.personality-share {
  min-height: 1.2em;
  margin: 18px 0 28px;
  color: var(--yellow);
  font-size: 0.72rem;
  font-weight: 700;
}
.personality-result > div {
  width: min(650px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.personality-result > div button {
  min-height: 54px;
  border: 1px solid oklch(0.42 0.01 225);
  background: transparent;
  color: var(--paper);
  padding: 14px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.personality-result > div button:last-child {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
}
.personality-result > div button:hover,
.personality-result > div button:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}
@media (max-width: 620px) {
  .personality-result {
    justify-content: flex-start;
    padding: 72px 20px 24px;
  }
  .personality-result h3 {
    margin: 32px 0 22px;
    font-size: clamp(3.8rem, 18vw, 6rem);
  }
  .personality-copy {
    font-size: 0.86rem;
  }
  .personality-result > div {
    grid-template-columns: 1fr;
    margin-top: auto;
  }
  .personality-share {
    margin-bottom: 22px;
  }
}

/* Simple loading handoff */
.loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  background: transparent;
  clip-path: none;
}
.loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: oklch(0.12 0.008 225);
  opacity: 1;
  transition: opacity 0.62s ease-out;
}
.loader-brand {
  z-index: 1;
  padding-bottom: 12px;
  color: oklch(0.97 0.005 225);
  font-size: clamp(2.7rem, 6vw, 6rem);
  letter-spacing: -0.06em;
}
.loader-brand span {
  display: inline;
  color: inherit;
  font-weight: 500;
  -webkit-text-stroke: 0;
}
.loader-brand > i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42%;
  height: 6px;
  background: var(--yellow);
}
.loader-progress {
  position: relative;
  z-index: 1;
  width: min(360px, 62vw);
  height: 2px;
  background: oklch(0.33 0.008 225);
  overflow: hidden;
}
.loader-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--yellow);
  transform: scaleX(var(--load-scale));
  transform-origin: left;
  will-change: transform;
}
.loading.is-complete {
  animation: none;
  pointer-events: none;
}
.loading.is-complete::before {
  opacity: 0;
}
.loading.is-complete .loader-brand {
  animation: loader-dock-simple 0.86s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.loading.is-complete .loader-progress {
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
@keyframes loader-dock-simple {
  0% {
    color: oklch(0.97 0.005 225);
  }
  32% {
    color: var(--ink);
  }
  75% {
    opacity: 1;
  }
  100% {
    color: var(--ink);
    transform: translate(
        calc(-50vw + var(--dock-x)),
        calc(-50vh + var(--dock-y))
      )
      scale(0.22);
    opacity: 0;
  }
}

.identity-question {
  position: fixed;
  z-index: 80;
  inset: 0;
  width: auto;
  margin: 0;
  padding: clamp(72px, 10vh, 120px) clamp(28px, 12vw, 180px);
  border: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--paper);
  text-align: center;
  animation: identity-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.identity-question[hidden] {
  display: none;
}
.identity-question h3 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: -0.065em;
}
.identity-question > p {
  margin: 20px 0 34px;
  color: var(--muted);
  font-size: 0.84rem;
}
.identity-question > div {
  width: min(780px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.identity-question > div button {
  min-height: 64px;
  border: 1px solid var(--line);
  background: transparent;
  padding: 14px 18px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.18s,
    background 0.18s,
    transform 0.18s;
}
.identity-question > div button:hover,
.identity-question > div button.selected {
  border-color: var(--ink);
  background: var(--yellow);
}
.identity-question > div button:active {
  transform: scale(0.985);
}
.modal-close {
  position: absolute;
  top: 30px;
  right: 36px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
}
.modal-sector {
  margin-bottom: 20px;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.modal-sector b {
  color: var(--ink);
}
.identity-question .confirm-vote {
  width: min(780px, 100%);
  margin-top: 12px;
  min-height: 58px;
}
@keyframes identity-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 620px) {
  .identity-question {
    padding: 72px 20px 24px;
    justify-content: flex-start;
    overflow-y: auto;
  }
  .identity-question h3 {
    font-size: 2.65rem;
    margin-top: auto;
  }
  .identity-question > p {
    margin: 14px 0 22px;
  }
  .identity-question > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .identity-question > div button {
    min-height: 54px;
  }
  .identity-question .confirm-vote {
    margin-bottom: auto;
  }
  .modal-close {
    top: 18px;
    right: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}
@media (max-width: 800px) {
  .loading {
    --dock-x: 27px;
    --dock-y: 35px;
  }
}
.stat-switch {
  position: relative;
  display: flex;
  width: max-content;
  margin-top: 26px;
  gap: 24px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.stat-switch button {
  border: 0;
  background: none;
  padding: 0;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  cursor: pointer;
  color: var(--muted);
}
.stat-switch button[aria-selected="true"] {
  color: var(--ink);
}
.stat-switch i {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 94px;
  height: 3px;
  background: var(--yellow);
  transition:
    transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.stat-switch[data-active="ethnicity"] i {
  width: 96px;
  transform: translateX(118px);
}
.app[data-view="vote"] .stat-switch,
.app[data-view="home"] .stat-switch {
  display: none;
}
.identity-question {
  width: min(320px, 31vw);
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}
.identity-question legend {
  padding: 0;
  font-size: 0.75rem;
  font-weight: 800;
}
.identity-question p {
  margin: 5px 0 9px;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.35;
}
.identity-question div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.identity-question button {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 7px 8px;
  font-size: 0.62rem;
  cursor: pointer;
}
.identity-question button:hover,
.identity-question button.selected {
  border-color: var(--ink);
  background: var(--yellow);
}
.flat-panel {
  position: absolute;
  right: 24px;
  top: 24px;
  width: min(330px, 36%);
  padding: 14px;
  background: oklch(0.975 0.006 220/0.95);
  border: 1px solid var(--line);
}
.flat-panel header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.flat-panel header small {
  color: var(--muted);
  font-size: 0.58rem;
}
.flat-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(12, 14px);
  gap: 2px;
}
.flat-cell {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: stretch;
  background: oklch(0.93 0.008 220);
  overflow: hidden;
}
.flat-cell > i {
  display: block;
  width: 100%;
}
.flat-cell:hover {
  outline: 2px solid var(--ink);
  z-index: 2;
}
.app:not([data-view="country"]) .flat-panel {
  display: none;
}
.app[data-view="country"] .drag-hint {
  right: auto;
  left: 24px;
}
.app[data-view="vote"] .vote-readout {
  bottom: 0;
}
.app[data-view="vote"] .study {
  bottom: 24px;
}
.app[data-view="vote"] .eyebrow {
  margin-top: 42px;
}
.app[data-view="vote"] .study h2 {
  font-size: 3.2rem;
}
.app[data-view="vote"] .study > p:not(.eyebrow) {
  margin-bottom: 8px;
}
@media (max-width: 800px) {
  .identity-question {
    width: 100%;
  }
  .flat-panel {
    top: 14px;
    right: 14px;
    width: 45%;
    padding: 10px;
  }
  .flat-grid {
    grid-template-rows: repeat(12, 9px);
  }
  .stat-switch {
    margin-top: 15px;
  }
  .app[data-view="vote"] .study h2 {
    font-size: 2.25rem;
  }
}
.identity-question {
  position: fixed;
  z-index: 90;
  inset: 0;
  width: 100vw;
  height: 100svh;
  margin: 0;
  padding: clamp(32px, 6vh, 72px) clamp(24px, 8vw, 120px);
  border: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow-y: auto;
}
.identity-question[hidden] {
  display: none;
}
.identity-question h3 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.5rem, 4.5vw, 4.8rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
}
.identity-question > p {
  margin: 18px 0 32px;
  color: var(--muted);
  font-size: 0.8rem;
}
.identity-options {
  width: min(940px, 100%);
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.identity-question .identity-options button {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  border: 1px solid var(--line);
  background: transparent;
  padding: 18px;
  text-align: left;
  cursor: pointer;
}
.identity-options button i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tone);
}
.identity-options button span {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}
.identity-options button[data-ethnicity="latino"] {
  --tone: #d6ae92;
}
.identity-options button[data-ethnicity="black"] {
  --tone: #9b7864;
}
.identity-options button[data-ethnicity="white"] {
  --tone: #ead5c3;
}
.identity-options button[data-ethnicity="asian"] {
  --tone: #dfc29d;
}
.identity-question .identity-options button:hover,
.identity-question .identity-options button.selected {
  border-color: var(--ink);
  background: oklch(0.96 0.025 92);
}
.identity-question .confirm-vote {
  width: min(940px, 100%);
  min-height: 58px;
  margin: 10px 0 0;
}
.modal-sector {
  margin-bottom: 18px;
}
.modal-close {
  top: 28px;
  right: 32px;
}
@media (max-width: 700px) {
  .identity-question {
    justify-content: flex-start;
    padding: 82px 18px 24px;
  }
  .identity-question h3 {
    font-size: 2.5rem;
  }
  .identity-question > p {
    margin: 14px 0 22px;
  }
  .identity-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .identity-question .identity-options button {
    min-height: 104px;
    padding: 14px;
  }
  .identity-question .confirm-vote {
    margin-top: 8px;
  }
  .modal-close {
    top: 18px;
    right: 18px;
  }
}