:root { color-scheme: dark; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; color: #eee9ed; background: #10060b; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; min-width: 320px; min-height: 100svh; display: flex; flex-direction: column; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid #ffe6a6; outline-offset: 5px; }
button:disabled { cursor: wait; }
[hidden] { display: none !important; }
::selection { background: #922a47; color: white; }
.stage { position: fixed; inset: 0; overflow: hidden; pointer-events: none; isolation: isolate; }
.stage-art, .stage-art img, .stage-scrim, #stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-art img { object-fit: cover; object-position: 66% 30%; }
.stage-scrim { background: linear-gradient(90deg, #0b040bed 0%, #0b040b94 37%, #0b040b08 65%), linear-gradient(0deg, #0c050ee0, transparent 48%, #08040b35); }
.spotlight { position: absolute; top: -15%; left: 60%; width: 38%; height: 140%; transform-origin: 50% 0; background: linear-gradient(180deg, #fff5d824, #fff5d806 70%, transparent); clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%); mix-blend-mode: screen; animation: stage-sweep 19s ease-in-out infinite alternate; }
.spotlight-two { left: 22%; width: 25%; opacity: .35; animation-duration: 27s; animation-delay: -12s; }
@keyframes stage-sweep { from { transform: rotate(-17deg); opacity: .3; } to { transform: rotate(13deg); opacity: .8; } }
body[data-motion-state="paused"] .stage *, body[data-motion-state="hidden"] .stage * { animation-play-state: paused !important; }
.site-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; padding: 16px 36px; border-bottom: 1px solid #ad47602c; background: #0c060b77; }
.identity { display: flex; align-items: center; gap: 12px; }
.emblem { display: block; width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 50%; border: 1px solid #ce6980; box-shadow: 0 0 16px #be28424d; }
.identity-copy { display: flex; flex-direction: column; gap: 5px; }
.wordmark { font: 15px Georgia, "Times New Roman", serif; color: #e9cfb0; }
.identity-label { color: #efabbc; font-size: 11px; line-height: 1.4; }
.motion-toggle { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; padding: 11px; border: 1px solid #d6c7ce66; border-radius: 50%; background: #170a138c; }
.motion-toggle:hover { background: #68203b; border-color: #ebc58b; }
.motion-toggle svg { width: 18px; height: 18px; }
main { position: relative; z-index: 1; flex: 1; display: flex; align-items: flex-end; width: min(100%, 1280px); min-height: calc(100svh - 84px); margin-inline: auto; padding: 48px 48px 38px; }
.entry-composition { width: min(100%, 550px); }
.masthead { margin-bottom: 28px; }
.act-mark { display: flex; align-items: center; gap: 12px; color: #dd9b83; font: 19px Georgia, serif; margin-bottom: 12px; }
.act-line { height: 1px; width: 70px; background: #bd506a; }
h1 { margin: 0; color: #fff5f6; font-size: 56px; font-weight: 800; line-height: 1.2; text-shadow: 0 5px 25px #000; }
.tickets { display: grid; gap: 12px; }
.ticket { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr) 22px; align-items: center; gap: 20px; width: 100%; min-height: 62px; padding: 12px 20px; text-align: left; background: #10070de3; border: 1px solid #ad3e5e99; border-radius: 6px; transition: border-color .16s, background .16s, transform .16s; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: #11070e; border: 1px solid #793043; }
.ticket::before { left: -7px; border-left-color: transparent; }
.ticket::after { right: -7px; border-right-color: transparent; }
.ticket-number { display: flex; align-items: center; min-height: 30px; border-right: 1px dashed #ae849064; color: #bca192; font: 12px ui-monospace, Consolas, monospace; }
.ticket-label { font-size: 18px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.ticket-arrow { display: grid; place-items: center; color: #d77e93; }
.ticket-arrow svg { width: 20px; height: 20px; }
.ticket-featured { border-color: #d95b79; background: linear-gradient(100deg, #29101af0, #52152cec, #1b0b15e8); box-shadow: 0 0 22px #a32c4620; color: #ffe2b3; }
.ticket:hover:not(:disabled) { transform: translateY(-2px); border-color: #f1b783; background: #4e1429ec; }
.ticket:active:not(:disabled) { transform: translateY(0); }
.ticket:disabled { opacity: .7; }
.ticket[aria-busy="true"] { border-color: #ffe2b3; opacity: 1; }
#nav-status { min-height: 20px; margin: 12px 0 0; color: #ffe0bc; font-size: 12px; line-height: 20px; }
.no-script { font-size: 13px; color: #ffe0bc; }
@media (min-width: 1600px) { main { width: 100%; padding-left: 8%; padding-bottom: 6vh; } }
@media (max-width: 900px) { main { padding-inline: 30px; } .entry-composition { width: 470px; } h1 { font-size: 46px; } }
@media (max-width: 640px) {
  .site-header { min-height: 72px; padding: 12px 18px; }
  .emblem { width: 36px; height: 36px; }
  .wordmark { font-size: 13px; }
  .stage-art img { object-position: 72% top; }
  .stage-scrim { background: linear-gradient(0deg, #100710f5 0%, #100710d9 37%, #10071029 72%, #10071033); }
  main { min-height: calc(100svh - 72px); padding: 170px 20px 14px; }
  .entry-composition { width: 100%; }
  .masthead { margin-bottom: 18px; }
  .act-mark { margin-bottom: 8px; font-size: 15px; }
  h1 { font-size: 36px; }
  .tickets { gap: 9px; }
  .ticket { min-height: 52px; padding: 9px 15px; grid-template-columns: 55px minmax(0, 1fr) 18px; gap: 14px; }
  .ticket-label { font-size: 16px; }
  .ticket-number { font-size: 11px; }
  .spotlight { left: 30%; width: 65%; }
}
@media (max-width: 360px) { main { padding-inline: 16px; padding-top: 152px; } h1 { font-size: 32px; } .ticket { gap: 10px; } }
@media (max-height: 700px) and (min-width: 641px) { main { padding-top: 26px; padding-bottom: 12px; } .masthead { margin-bottom: 18px; } .tickets { gap: 9px; } .ticket { min-height: 52px; padding-block: 8px; } h1 { font-size: 44px; } }