:root {
  --paper:#f7f7f2; --cream:#eee8d9; --ink:#191a17; --muted:#6e7069; --line:#c9c9bf;
  --bamboo:#c6f04a; --leaf:#1f9e4d; --fruit:#ff5c39; --sky:#4a7dff; --sun:#ffd84d;
  --lilac:#d8d3e8; --rose:#f2c6d2;
  --sans:"Noto Sans HK","Noto Sans SC",system-ui,sans-serif;
  --serif:"Noto Serif HK","Songti SC",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
* { box-sizing:border-box }
[hidden] { display:none!important }
html { scroll-behavior:smooth }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); overflow-x:hidden }
a { color:inherit }
button,select { font:inherit; color:inherit }
button { cursor:pointer }
a:focus-visible,button:focus-visible { outline:4px solid var(--fruit); outline-offset:3px }
.skip { position:fixed; left:10px; top:-60px; z-index:99; background:var(--ink); color:white; padding:10px }
.skip:focus { top:10px }
.grain { position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E") }
.topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(18px,4vw,64px); position:relative; z-index:30; border-bottom:1.5px solid var(--ink); background:rgba(247,247,242,.94); backdrop-filter:blur(12px) }
.brand { font:900 24px var(--serif); text-decoration:none }
.topnav { display:flex; gap:8px; align-items:center }
.navlink,.lang { border:1.5px solid var(--ink); border-radius:99px; background:var(--paper); padding:7px 12px; text-decoration:none; font-size:12px }
.navlink.primary { background:var(--bamboo); box-shadow:2px 2px 0 var(--ink) }
.lang { display:flex; padding:7px 5px }
.lang button { border:0; background:none; padding:0 7px; font:11px var(--mono) }
.lang button.active { text-decoration:underline; text-underline-offset:4px; font-weight:800 }
.mobile-lang { display:none }
.hero {
  min-height:calc(100svh - 72px);
  position:relative;
  overflow:hidden;
  display:grid;
  align-items:end;
  background:
    radial-gradient(ellipse 70% 55% at 72% 48%, rgba(255,216,77,.28), transparent 62%),
    linear-gradient(180deg, #5f8dff 0%, var(--sky) 48%, #3a68e8 100%);
}
.world-map {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.map-stage {
  position:absolute;
  left:58%;
  top:46%;
  width:min(1280px, 118vw);
  aspect-ratio:2 / 1;
  transform:translate(-38%, -52%);
  pointer-events:auto;
}
.map-land {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 16px 0 rgba(25,26,23,.1));
}
.map-land .ocean { fill:rgba(247,247,242,.08) }
.map-land .continents path {
  fill:rgba(247,247,242,.92);
  stroke:#191a17;
  stroke-width:1.5;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.hero-shade {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,216,77,.94) 0%, rgba(255,216,77,.82) 26%, rgba(255,216,77,.34) 48%, transparent 68%),
    linear-gradient(180deg, transparent 58%, rgba(25,26,23,.16) 100%);
}
.hero-copy {
  position:relative;
  z-index:2;
  width:min(720px, 100%);
  padding:clamp(36px,7vw,88px) clamp(22px,6vw,96px) clamp(40px,8vw,96px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.eyebrow { font:11px var(--mono); text-transform:uppercase; letter-spacing:.12em }
.hero h1 {
  font:900 clamp(42px,6.4vw,92px)/.98 var(--serif);
  letter-spacing:-.055em;
  white-space:pre-line;
  margin:16px 0 20px;
  max-width:14ch;
  text-wrap:balance;
}
.hero-lead {
  font-size:clamp(16px,1.7vw,22px);
  line-height:1.65;
  max-width:34em;
  margin:0;
}
.hero-mapnote {
  margin:16px 0 0;
  max-width:36em;
  font:11px/1.55 var(--mono);
  color:rgba(25,26,23,.78);
}
.hero-sign,.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px }
.ticket { display:inline-flex; align-items:center; padding:11px 16px; border:2px solid var(--ink); background:var(--paper); text-decoration:none; font-weight:750; box-shadow:3px 3px 0 var(--ink) }
.ticket.accent { background:var(--fruit) }
.map-panda {
  --size:clamp(22px,2.4vw,36px);
  position:absolute;
  z-index:3;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  padding:0;
  transform:translate(-50%,-50%);
  border:1.5px solid var(--ink);
  border-radius:50%;
  background:var(--paper);
  box-shadow:2px 3px 0 var(--ink);
  transition:transform .2s, z-index 0s;
  animation:pin-bob 4.8s ease-in-out infinite;
}
.map-panda:nth-child(3n) { animation-delay:.4s }
.map-panda:nth-child(4n) { animation-delay:1.1s }
.map-panda:nth-child(5n) { animation-delay:1.8s }
.map-panda:hover,.map-panda:focus-visible {
  z-index:10;
  transform:translate(-50%,-50%) scale(1.18);
  animation:none;
}
.map-panda img { width:100%; height:100%; object-fit:contain; border-radius:50% }
.map-panda span {
  display:none;
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  min-width:max-content;
  max-width:180px;
  transform:translateX(-50%);
  padding:6px 8px;
  border:1.5px solid var(--ink);
  background:var(--paper);
  box-shadow:2px 2px 0 var(--ink);
  text-align:left;
  font:10px/1.25 var(--sans);
}
.map-panda:hover span,.map-panda:focus-visible span { display:block }
.map-panda span b,.map-panda span small { display:block }
.map-panda span small { margin-top:2px; font:8px var(--mono); color:var(--muted) }
.map-panda-1 { background:var(--bamboo) }
.map-panda-2 { background:var(--sun) }
.map-panda-3 { background:var(--rose) }
.hero-panda { width:min(72%,520px); filter:drop-shadow(10px 12px 0 rgba(25,26,23,.9)); animation:float 4s ease-in-out infinite }
.orbit { position:absolute; inset:10%; border:2px dashed var(--ink); border-radius:50%; animation:spin 28s linear infinite }
.place-stamp { position:absolute; left:8%; bottom:8%; max-width:230px; background:var(--paper); border:2px solid var(--ink); padding:13px; transform:rotate(-3deg); font:12px/1.5 var(--mono); box-shadow:4px 4px 0 var(--ink) }
.marquee { border-block:2px solid var(--ink); background:var(--ink); color:var(--paper); overflow:hidden; padding:10px 0 }
.marquee-track { display:flex; width:max-content; gap:30px; animation:marquee 35s linear infinite; font:12px var(--mono); text-transform:uppercase }
.marquee-track span:after { content:"✳"; margin-left:30px; color:var(--bamboo) }
.theatre-wrap {
  padding:clamp(70px,9vw,130px) clamp(18px,5vw,72px);
  background:
    radial-gradient(ellipse 80% 50% at 80% 0%, rgba(198,240,74,.12), transparent 55%),
    linear-gradient(180deg, #141511 0%, #1c1d18 55%, #121310 100%);
  color:var(--paper);
}
.theatre-head {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr);
  gap:28px;
  margin-bottom:34px;
  align-items:end;
}
.theatre-head h2 {
  font:800 clamp(32px,4.6vw,64px)/1.05 var(--serif);
  letter-spacing:-.04em;
  margin:14px 0 0;
  max-width:14ch;
}
.theatre-head p {
  font:14px/1.7 var(--mono);
  color:rgba(247,247,242,.72);
  margin:0;
  max-width:34em;
}
.live-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(198,240,74,.55);
  background:rgba(198,240,74,.08);
  padding:6px 10px;
  font:11px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.live-pill i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--bamboo);
  box-shadow:0 0 0 0 rgba(198,240,74,.7);
  animation:live-pulse 1.6s ease-out infinite;
}
.theatre {
  display:grid;
  grid-template-columns:minmax(260px,.7fr) 1.3fr;
  border:1px solid rgba(247,247,242,.28);
  min-height:640px;
  background:rgba(10,11,9,.72);
  box-shadow:0 0 0 1px rgba(198,240,74,.08), 12px 14px 0 rgba(0,0,0,.35);
  overflow:hidden;
}
.stage-left {
  position:relative;
  display:grid;
  place-items:center;
  background:
    linear-gradient(160deg, rgba(198,240,74,.16), transparent 42%),
    radial-gradient(circle at 50% 40%, rgba(74,125,255,.28), transparent 58%),
    #0d0e0b;
  border-right:1px solid rgba(247,247,242,.18);
  overflow:hidden;
}
.hud-corners:before,.hud-corners:after {
  content:"";
  position:absolute;
  width:42px;
  height:42px;
  border:2px solid var(--bamboo);
  z-index:4;
  pointer-events:none;
}
.hud-corners:before { left:16px; top:16px; border-right:0; border-bottom:0 }
.hud-corners:after { right:16px; bottom:16px; border-left:0; border-top:0 }
.scanlines {
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(247,247,242,.035) 3px 4px);
  mix-blend-mode:screen;
}
.stage-panda {
  width:min(72%,280px);
  z-index:2;
  filter:drop-shadow(0 0 24px rgba(198,240,74,.25));
  animation:float 4.5s ease-in-out infinite;
}
.stage-label {
  position:absolute;
  left:18px;
  top:18px;
  z-index:5;
  background:rgba(10,11,9,.82);
  border:1px solid rgba(198,240,74,.55);
  color:var(--bamboo);
  padding:6px 9px;
  font:10px var(--mono);
  letter-spacing:.04em;
  max-width:70%;
}
.stage-signal {
  position:absolute;
  right:18px;
  top:18px;
  z-index:5;
  font:10px var(--mono);
  color:rgba(247,247,242,.55);
  letter-spacing:.12em;
}
.stage-meter {
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:5;
  display:flex;
  gap:4px;
  align-items:end;
  height:28px;
}
.stage-meter span {
  width:5px;
  background:var(--bamboo);
  animation:meter 1.1s ease-in-out infinite;
}
.stage-meter span:nth-child(1) { height:35%; animation-delay:0s }
.stage-meter span:nth-child(2) { height:70%; animation-delay:.1s }
.stage-meter span:nth-child(3) { height:48%; animation-delay:.2s }
.stage-meter span:nth-child(4) { height:90%; animation-delay:.15s }
.stage-meter span:nth-child(5) { height:55%; animation-delay:.25s }
.stage-right {
  padding:clamp(22px,4vw,48px);
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg, rgba(247,247,242,.03), transparent 30%);
}
.protocol-bar {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin-bottom:18px;
}
.protocol-bar span {
  border:1px solid rgba(247,247,242,.18);
  padding:8px 6px;
  text-align:center;
  font:10px var(--mono);
  letter-spacing:.08em;
  color:rgba(247,247,242,.45);
  transition:.25s;
}
.protocol-bar span.active {
  color:#0d0e0b;
  background:var(--bamboo);
  border-color:var(--bamboo);
  box-shadow:0 0 18px rgba(198,240,74,.35);
}
.protocol-bar span.done {
  color:var(--bamboo);
  border-color:rgba(198,240,74,.45);
}
.scene-title {
  font:800 clamp(24px,3vw,40px)/1.1 var(--serif);
  margin:0 0 20px;
  color:var(--paper);
}
.thread { display:grid; gap:10px; flex:1; align-content:start }
.bubble {
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  max-width:100%;
  padding:12px 14px;
  border:1px solid rgba(247,247,242,.16);
  border-radius:4px;
  background:rgba(247,247,242,.04);
  line-height:1.55;
  opacity:0;
  transform:translateY(8px);
  transition:.35s;
}
.bubble.show { opacity:1; transform:none }
.bubble em {
  font:700 11px var(--mono);
  color:var(--bamboo);
  font-style:normal;
  padding-top:2px;
}
.bubble.user { border-left:3px solid var(--sky) }
.bubble.panda { border-left:3px solid var(--bamboo) }
.bubble small,.quote-original,.hero-ticket-original {
  display:block;
  margin-top:7px;
  padding-top:7px;
  border-top:1px dashed rgba(247,247,242,.2);
  font:9px/1.5 var(--mono);
  opacity:.7;
}
.bubble small:empty,.quote-original:empty,.hero-ticket-original:empty { display:none }
.source-line {
  font:10px/1.5 var(--mono);
  color:rgba(247,247,242,.55);
  padding-left:12px;
  border-left:2px solid var(--fruit);
  opacity:0;
  transition:.35s;
}
.source-line.show { opacity:1 }
.stage-controls { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px }
.control,.filter { border:1.5px solid var(--ink); background:var(--paper); padding:8px 12px; border-radius:99px; color:var(--ink) }
.theatre .control { border-color:rgba(247,247,242,.35); background:transparent; color:var(--paper); border-radius:4px }
.theatre .control.primary { background:var(--bamboo); color:#0d0e0b; border-color:var(--bamboo) }
.stage-progress {
  height:3px;
  margin-top:22px;
  overflow:hidden;
  background:rgba(247,247,242,.12);
}
.stage-progress i {
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--bamboo), var(--fruit));
  box-shadow:0 0 12px rgba(198,240,74,.55);
  transition:width .25s linear;
}
.scene-rail {
  display:grid;
  grid-template-columns:repeat(8,minmax(120px,1fr));
  gap:0;
  margin-top:18px;
  border:1px solid rgba(247,247,242,.22);
  overflow:auto;
  background:rgba(0,0,0,.28);
}
.scene-rail button {
  min-width:120px;
  min-height:88px;
  border:0;
  border-right:1px solid rgba(247,247,242,.12);
  background:transparent;
  color:var(--paper);
  padding:12px;
  text-align:left;
  display:grid;
  grid-template-columns:36px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:4px;
  align-items:center;
}
.scene-rail button:last-child { border-right:0 }
.scene-rail button img {
  width:36px;
  height:36px;
  grid-row:1 / span 2;
  border:1px solid rgba(247,247,242,.2);
  border-radius:50%;
  background:var(--paper);
}
.scene-rail button span {
  margin:0;
  font:9px var(--mono);
  color:rgba(247,247,242,.45);
}
.scene-rail button b {
  font:700 11px/1.25 var(--sans);
}
.scene-rail button.active {
  background:rgba(198,240,74,.14);
  box-shadow:inset 0 -2px 0 var(--bamboo);
}
.act {
  min-height:auto;
  padding:clamp(70px,10vw,140px) clamp(20px,6vw,96px);
  border-bottom:2px solid var(--ink);
  overflow:hidden;
  display:block;
}
.act-strip { background:var(--cream) }
.act-stack { background:var(--lilac) }
.act-mosaic { background:var(--rose) }
.act-night { background:var(--sky); color:var(--paper) }
.act-night .mini-card { color:var(--ink) }
.act-night .eyebrow { color:rgba(247,247,242,.72) }
.act-chorus { background:var(--bamboo) }
.act-copy h2 {
  font:800 clamp(34px,4.8vw,68px)/1.05 var(--serif);
  letter-spacing:-.04em;
  margin:8px 0 14px;
  max-width:14ch;
}
.act-copy p { max-width:36em; font-size:18px; line-height:1.75; margin:0 }
.act-copy-row {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(18px,4vw,48px);
  align-items:end;
  margin-top:8px;
}
.act-copy-row h2 {
  margin:0;
  max-width:none;
}
.act-copy-row p {
  max-width:34em;
  padding-bottom:6px;
}

.mini-card {
  --accent:#C6F04A;
  position:relative;
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:5px 6px 0 var(--ink);
  display:flex;
  flex-direction:column;
  scroll-margin-top:88px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.mini-card:hover,
.mini-card:focus-within {
  transform:translateY(-4px);
  box-shadow:8px 9px 0 var(--ink);
  z-index:2;
}
.mini-no {
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
  font:9px var(--mono);
  padding:3px 6px;
  border:1px solid var(--ink);
  background:var(--paper);
}
.mini-face {
  display:grid;
  place-items:center;
  height:96px;
  flex:0 0 auto;
  padding:12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 50%, white) 0%, transparent 64%),
    var(--paper);
  border-bottom:2px solid var(--ink);
}
.mini-face img {
  width:68px;
  height:auto;
  filter:drop-shadow(3px 4px 0 rgba(25,26,23,.85));
}
.mini-copy {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px 16px;
  flex:1;
}
.mini-copy .mini-place { margin:0 }
.mini-name {
  font:800 20px/1.15 var(--serif);
  margin:0;
  letter-spacing:-.02em;
}
.mini-answer {
  font-size:13px;
  line-height:1.55;
  margin:0;
}
.mini-source {
  font:8px/1.45 var(--mono);
  color:var(--muted);
  margin-top:auto;
  padding-top:10px;
}
.native-name {
  display:block;
  font:9px/1.4 var(--mono);
  color:var(--muted);
}

.act-film {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(250px,270px);
  gap:16px;
  margin-top:36px;
  overflow-x:auto;
  padding:8px 2px 16px;
  align-items:stretch;
  scrollbar-width:thin;
}
.act-film::-webkit-scrollbar { height:8px }
.act-film::-webkit-scrollbar-thumb { background:var(--ink); border-radius:99px }
.act-film .mini-card { min-height:100% }

.act-grid {
  display:grid;
  gap:16px;
  margin-top:32px;
  align-items:stretch;
}
.act-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
.act-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)) }

.source,.mini-source { font:9px/1.5 var(--mono); color:var(--muted) }
.duality { display:grid; grid-template-columns:1fr 1fr; border-bottom:2px solid var(--ink) }
.door { padding:clamp(70px,10vw,150px) clamp(24px,7vw,100px); min-height:560px }
.door:first-child { background:var(--bamboo); border-right:2px solid var(--ink) }
.door:last-child { background:var(--sky); color:white }
.door h3 { font:800 clamp(38px,5vw,70px) var(--serif); margin:0 0 24px }
.door p { font-size:19px; line-height:1.7; max-width:530px }
.finale { min-height:85vh; background:var(--ink); color:var(--paper); display:grid; place-items:center; text-align:center; padding:80px 20px }
.finale h2 { white-space:pre-line; max-width:1000px }
.finale .actions { justify-content:center }
.finale .ticket { color:var(--ink) }
footer { display:flex; justify-content:space-between; gap:20px; padding:25px clamp(20px,5vw,70px); font:10px/1.6 var(--mono); background:var(--ink); color:var(--paper); border-top:1px solid #555 }
html[lang=en] .hero h1 { max-width:16ch; letter-spacing:-.04em }
html[lang=en] .act-copy h2,
html[lang=en] .theatre-head h2 { max-width:18ch }
html[lang^=zh] .hero-lead,
html[lang^=zh] .act-copy p { letter-spacing:.01em }
.noscript { padding:15px; background:var(--fruit); border-bottom:2px solid var(--ink); text-align:center }
.hero h1 span { display:block }
.hero h1 span:last-child { max-width:12ch }
html[lang=en] .hero h1 span:last-child { max-width:14ch }
.stage-progress { height:5px; margin-top:22px; overflow:hidden; background:var(--line) }
.stage-progress i { display:block; height:100%; width:0; background:var(--fruit); transition:width .25s linear }
.scene-rail { display:grid; grid-template-columns:repeat(8,1fr); gap:0; margin-top:20px; border:2px solid var(--ink); box-shadow:5px 6px 0 var(--ink); overflow:auto }
.scene-rail button { min-width:115px; min-height:70px; border:0; border-right:1px solid var(--ink); background:var(--paper); padding:10px; text-align:left; font:700 11px/1.3 var(--sans) }
.scene-rail button:last-child { border-right:0 }
.scene-rail button span { display:block; margin-bottom:7px; font:9px var(--mono); color:var(--muted) }
.scene-rail button.active { background:var(--bamboo) }
.finale h2 { font:800 clamp(35px,5vw,76px)/1.04 var(--serif); letter-spacing:-.04em; margin:8px 0 }
@keyframes float { 50% { transform:translateY(-12px) rotate(1deg) } }
@keyframes pin-bob { 50% { transform:translate(-50%, calc(-50% - 5px)) } }
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes marquee { to { transform:translateX(-50%) } }
@keyframes live-pulse {
  0% { box-shadow:0 0 0 0 rgba(198,240,74,.7) }
  70% { box-shadow:0 0 0 10px rgba(198,240,74,0) }
  100% { box-shadow:0 0 0 0 rgba(198,240,74,0) }
}
@keyframes meter {
  0%,100% { transform:scaleY(.55) }
  50% { transform:scaleY(1) }
}
@media (max-width:900px) {
  .hero {
    align-items:stretch;
    min-height:auto;
    display:flex;
    flex-direction:column;
  }
  .map-stage {
    left:50%;
    top:auto;
    bottom:-4%;
    width:min(980px, 156vw);
    transform:translate(-50%, 0);
  }
  .hero-shade {
    background:linear-gradient(180deg, rgba(255,216,77,.97) 0%, rgba(255,216,77,.9) 34%, rgba(255,216,77,.42) 52%, transparent 72%);
  }
  .hero-copy {
    width:100%;
    min-height:0;
    padding:clamp(28px,6vw,48px) clamp(18px,5vw,36px) 12px;
    flex:0 0 auto;
  }
  .hero::after {
    content:"";
    display:block;
    height:min(42vw, 280px);
    flex:0 0 auto;
  }
  .theatre-head,.act-copy-row { grid-template-columns:1fr }
  .theatre { grid-template-columns:1fr }
  .stage-left { min-height:340px; border-right:0; border-bottom:1px solid rgba(247,247,242,.18) }
  .act-grid-3,
  .act-grid-4 { grid-template-columns:1fr 1fr }
  .duality { grid-template-columns:1fr }
  .door:first-child { border-right:0; border-bottom:2px solid }
  .topnav .navlink:not(.primary) { display:none }
}
@media (max-width:580px) {
  .topbar { min-height:64px; padding:10px 14px }
  .brand { font-size:20px }
  .topnav .navlink.primary,.desktop-lang { display:none!important }
  .mobile-lang { display:flex!important; position:absolute; right:14px; top:13px }
  .lang button { padding-inline:6px }
  .hero { min-height:calc(100svh - 64px) }
  .hero h1 { font-size:40px; line-height:1.02; letter-spacing:-.045em; max-width:none }
  .hero h1 span:last-child,html[lang=en] .hero h1 span:last-child { max-width:none }
  .hero-copy { padding:24px 16px 8px }
  .hero-mapnote { font-size:10px }
  .hero::after { height:min(48vw, 260px) }
  .map-stage {
    bottom:-2%;
    width:175vw;
  }
  .map-panda { --size:28px }
  .map-panda span { font-size:9px }
  .scene-rail { margin-inline:-2px }
  .act-film { grid-auto-columns:minmax(220px,78vw) }
  .act-grid-3,
  .act-grid-4 { grid-template-columns:1fr }
  .bubble { max-width:94% }
  .finale .actions { display:grid }
  .section-head { gap:10px }
}
@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto!important; animation:none!important; transition:none!important }
  .bubble,.source-line { opacity:1; transform:none }
  .mini-card,.mini-card:hover,.mini-card:focus-within { transform:none }
  .marquee-track { width:auto; flex-wrap:wrap; justify-content:center }
  .orbit { display:none }
}