[data-perspective-only][hidden], [data-open-entry][hidden] { display: none !important; }
.hero h1, .student-story h2, .student-story h3 { hyphens: none; }
.hero-note a { display: inline-block; min-height: 44px; padding-block: 12px; color: #a9e8de; text-underline-offset: 4px; }
.perspective-stories, #student-answer { scroll-margin-top: 14px; }
.perspective-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 27px; padding: 4px; border: 1px solid rgba(123,215,217,.25); border-radius: 10px; background: rgba(4,15,27,.78); }
.perspective-switch a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 12px; border-radius: 6px; color: #9cb6c7; font-size: .74rem; text-decoration: none; }
.perspective-switch a[aria-current] { background: #143742; color: #d6fff1; }
.perspective-switch a:hover { color: #caff8e; }
.perspective-switch a > span { font-size: .57rem; color: #a8bcca; }
.hero-bottom button { min-height: 44px; border: 0; background: none; color: #a7cbd3; font: inherit; cursor: pointer; }
.hero-bottom button:hover { color: #caff8e; }
/* A shared stage: the animation extends beyond the text container. */
/* Clip the artwork without creating an independently scrollable container. */
.hero { min-height: 0; background: #06121f; overflow: clip; display: flow-root; }
.hero .hero-inner { position: relative; z-index: 2; display: flex; align-items: center; min-height: 780px; padding-block: 58px 72px; }
.hero-copy { position: relative; z-index: 2; width: min(53%,620px); max-width: none; }
.hero h1 { font-size: clamp(2.8rem,4.3vw,4.8rem); line-height: 1.1; letter-spacing: -.025em; max-width: 660px; }
.hero .hero-lead { max-width: 540px; }
.hero::before { z-index: 1; background: linear-gradient(90deg,#06121f 0%,rgba(6,18,31,.96) 24%,rgba(6,18,31,.66) 43%,transparent 69%); }
.hero::after { z-index: 0; inset: -8%; width: auto; height: auto; background: radial-gradient(ellipse at 76% 48%,rgba(53,201,205,.09),transparent 43%),radial-gradient(ellipse at 88% 72%,rgba(143,104,230,.035),transparent 40%); box-shadow: none; animation: none; }
.hero-grid { z-index: 0; opacity: .35; mask-image: radial-gradient(ellipse at 74% 52%,#000,transparent 78%); }
.hero .hero-scene { position: absolute; z-index: 0; top: 50%; right: -160px; bottom: auto; left: auto; width: min(88vw,1160px); max-width: none; height: auto; aspect-ratio: 640/540; margin: 0; transform: translateY(-50%); pointer-events: none; }
.hero .hero-scene > svg, .hero .hero-scene > canvas { inset: 0; width: 100%; height: 100%; transform: none; }
.hero .scene-shadow { mask-image: linear-gradient(#000 64%,transparent 94%); }
.hero .scene-core { top: 50.93%; left: 50.3%; width: 22%; }
.hero .scene-core strong { font-size: clamp(.65rem,1vw,.88rem); }
.hero .scene-core small { display: block; font-size: clamp(.47rem,.65vw,.62rem); }
.hero .scene-cards { display: flex; top: auto; bottom: 7%; left: 18%; right: 18%; gap: 30px; height: auto; }
.hero .scene-card, .hero .scene-card-feedback { position: relative; inset: auto; flex: 1; width: auto; min-width: 0; max-width: none; min-height: 0; padding: 10px 0 10px 16px; border: 0; border-left: 1px solid rgba(144,232,229,.4); background: none; box-shadow: none; backdrop-filter: none; transform: none; animation: none; }
.hero .scene-card-rule { display: none; }
.hero .scene-card-index { font-size: .58rem; margin-bottom: 10px; }
.hero .scene-card-main { font-size: .84rem; }
.hero .scene-card-detail { font-size: .65rem; line-height: 1.5; }
.hero .scene-label { border: 0; background: none; backdrop-filter: none; text-shadow: 0 2px 12px #030b17; }
.hero .scene-label-local { top: 78.5%; bottom: auto; left: 38%; right: auto; font-size: .65rem; }
.hero .scene-label-external { top: 25%; right: 195px; font-size: .6rem; color: #e3d8ff; }
.hero .scene-label-external small { font-size: .57rem; }
.hero .scene-coordinate { display: none; }
.hero-actions { gap: 12px; }
.hero-actions > .button { white-space: normal; min-height: 56px; font-size: .84rem; padding-inline: 19px; }
.hero-explore { color: #c5e5e8; border-color: rgba(147,220,224,.35); background: rgba(12,34,47,.6); box-shadow: none; }
.hero-explore:hover { border-color: #a9eee4; background: #123342; color: #fff; }
.hero-vote { background: #caff8e; color: #112515; border-color: #d6ffac; box-shadow: 0 0 30px rgba(180,245,131,.16); }
.hero-vote:hover { background: #dcffb7; box-shadow: 0 0 38px rgba(180,245,131,.26); }
.header-cta { color: #d2ffac; border-color: rgba(191,252,144,.5); background: rgba(169,244,118,.08); }
.header-cta:hover { background: rgba(169,244,118,.16); color: #e4ffd2; }
.hero-bottom { position: relative; z-index: 2; gap: 18px; }
@media (min-width: 1051px) and (prefers-reduced-motion: no-preference) {
  .hero::after { animation: hero-atmosphere 36s ease-in-out infinite alternate; }
}
@keyframes hero-atmosphere { from { transform: translate3d(0,0,0); opacity: .86; } to { transform: translate3d(-1%,1%,0); opacity: 1; } }
@media (min-width: 761px) and (max-width: 1050px) {
  .hero .hero-inner { display: block; min-height: 0; padding-block: 52px 530px; }
  .hero-copy { width: 100%; max-width: 700px; }
  .hero h1 { font-size: clamp(2.8rem,5vw,3.4rem); }
  .hero .hero-lead { max-width: 600px; font-size: .97rem; }
  .hero .hero-scene { width: 960px; right: 50%; margin-right: -480px; top: auto; bottom: 40px; transform: none; }
  .hero::before { background: linear-gradient(#06121f 0%,rgba(6,18,31,.97) 20%,rgba(6,18,31,.87) 35%,transparent 63%); }
  .hero .scene-cards { bottom: 5%; left: 17%; right: 17%; gap: 40px; }
  .hero .scene-card-index { font-size: .56rem; }
  .hero .scene-card-main { font-size: .84rem; }
  .hero .scene-label-external { right: 15%; top: 32%; }
  .hero .scene-label-local { left: 43%; }
}
@media (max-width: 760px) {
  .hero .hero-inner { display: block; min-height: 0; padding-block: 28px 470px; }
  .hero-copy { width: 100%; max-width: 610px; }
  .hero h1 { max-width: 580px; font-size: clamp(2.25rem,7.8vw,3.7rem); }
  .hero .hero-lead { font-size: .95rem; }
  .hero::before { background: linear-gradient(#06121f 0%,rgba(6,18,31,.97) 25%,rgba(6,18,31,.85) 45%,transparent 70%); }
  .hero .hero-scene { width: 670px; aspect-ratio: 640/540; height: auto; top: auto; bottom: 70px; right: 50%; margin-right: -335px; transform: none; }
  .hero .scene-core { top: 50.93%; left: 50.3%; width: 22%; }
  .hero .scene-cards { bottom: 7%; left: calc(50% - min(44vw,280px)); right: calc(50% - min(44vw,280px)); gap: 20px; }
  .hero .scene-card, .hero .scene-card-feedback { padding: 8px 0 8px 10px; }
  .hero .scene-card-index { font-size: .46rem; margin-bottom: 8px; }
  .hero .scene-card-main { font-size: .74rem; }
  .hero .scene-card-detail { font-size: .6rem; }
  .hero .scene-label-local { top: 70%; left: 40%; font-size: .57rem; }
  .hero .scene-label-external { top: 31%; right: 25%; font-size: .6rem; max-width: none; }
  .hero .scene-label-external small { font-size: .54rem; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { width: 100%; }
  .hero-bottom { font-size: .57rem; gap: 15px; }
  .hero-bottom .scroll-line { display: none; }
  .perspective-switch { margin-bottom: 23px; }
  .perspective-switch a { font-size: .72rem; padding-inline: 12px; }
}
@media (max-width: 380px) {
  .hero .hero-scene { width: 590px; margin-right: -295px; }
  .hero .hero-inner { padding-bottom: 425px; }
  .hero .scene-card-main { font-size: .69rem; }
}

@media (max-width: 600px) {
  .js .showcase-tabs { overflow: visible; }
  .showcase-tab { flex: 1 1 0; min-width: 0; min-height: 82px; padding: 12px 10px; white-space: normal; line-height: 1.4; }
  .showcase-tab span { display: block; margin: 0 0 5px; }
}

.header-donate { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 13px; border: 1px solid rgba(230,191,126,.35); border-radius: 4px; color: #e7cca0; font-size: .79rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.header-donate:hover { color: #fff0d6; border-color: #ebcb98; background: rgba(230,191,126,.07); }
.header-donate:focus-visible { outline: 2px solid #edcd9a; outline-offset: 4px; }
.header-inner .header-cta { min-height: 44px; }
@media (max-width: 1100px) {
  .main-nav { display: none; }
  .header-donate { margin-left: auto; }
  .header-inner .header-cta { margin-left: 0; }
}
@media (max-width: 600px) {
  .header-inner { gap: 8px; }
  .header-donate { font-size: .7rem; padding: 10px; }
  .header-donate > span[aria-hidden] { display: none; }
}
@media (max-width: 380px) {
  .site-header .brand > span { display: none; }
  .header-donate { margin-left: auto; }
}