/* JquanUI atomic-first shared residual CSS. Demo V3.54. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --ql-black: #030606;
  --dark: #0a1212;
  --raised: #0d1717;
  --green: #4a7c75;
  --green-hi: #76a59d;
  --gold: #b89865;
  --ql-white: #f5f5f5;
  --muted: rgba(245, 245, 245, .58);
  --faint: rgba(245, 245, 245, .32);
  --line: rgba(255, 255, 255, .09);
  --title: Cinzel, "Noto Serif SC", serif;
  --serif: "Playfair Display", "Noto Serif SC", serif;
  --sans: Montserrat, "Noto Sans SC", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(22px, 5vw, 96px);
  --section: clamp(90px, 11vw, 170px);
}

html { background: var(--ql-black); }
body {
  background: var(--ql-black);
  color: var(--ql-white);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

html:not([lang=en]) .en { display: none !important; }
html[lang=en] .zh { display: none !important; }
button, input, select, textarea { font: inherit; }
button, a { color: inherit; }
a { text-decoration: none; }
small { font-size: max(14px, .8em); }
sub, sup { font-size: max(14px, .75em); }
::selection { background: var(--green); color: #fff; }
:focus-visible { outline: 1px solid var(--green-hi); outline-offset: 4px; }

.sr-only { clip: rect(0, 0, 0, 0); border: 0; }
.skip-link { background: #fff; color: #000; }
.skip-link:focus { top: 16px; }
.placeholder { color: var(--faint) !important; }

/* Shared atmospheric surface. */
.site-bg {
  background-color: var(--ql-black);
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 50px 50px;
}
.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .035;
  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='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Shared component skins; layout and sizing live in HTML utilities. */
.kicker { color: var(--green-hi); }
.section-title { font: 400 clamp(34px, 4.7vw, 68px)/1.15 var(--title); }
.section-title.cn { font-family: "Noto Serif SC", serif; }
.eyelink { border-bottom: 1px solid var(--line); transition: .25s; }
.eyelink:hover { color: var(--green-hi); border-color: var(--green-hi); }

.primary-btn, .secondary-btn {
  border: 1px solid transparent;
  border-radius: 0;
  transition: .3s;
}
.primary-btn { background: var(--green); color: #fff; }
.primary-btn:hover { background: #fff; color: var(--ql-black); }
.secondary-btn { border-color: rgba(255, 255, 255, .24); background: transparent; }
.secondary-btn:hover { border-color: #fff; }
.icon-btn { border: 1px solid var(--line); border-radius: 0; background: transparent; }
.icon-btn:hover { border-color: var(--green-hi); color: var(--green-hi); }

/* Navigation keeps only material, language, and compound scroll states here. */
.global-nav {
  isolation: isolate;
  background: rgba(3, 6, 6, 0);
  -webkit-backdrop-filter: saturate(100%) blur(0);
  backdrop-filter: saturate(100%) blur(0);
  transition: height .45s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s var(--ease);
}
.global-nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, .055), transparent 25%, rgba(118, 165, 157, .09) 56%, transparent 80%);
  opacity: 0;
  transform: translate3d(-10%, -8px, 0);
  transition: opacity .55s ease, transform .7s var(--ease);
  pointer-events: none;
}
.global-nav.scrolled {
  height: 66px;
  background: rgba(2, 5, 5, .8);
  -webkit-backdrop-filter: saturate(145%) contrast(105%) blur(24px);
  backdrop-filter: saturate(145%) contrast(105%) blur(24px);
  box-shadow: 0 14px 42px rgba(0, 0, 0, .3), inset 0 -1px rgba(255, 255, 255, .035);
}
.global-nav.scrolled::before { opacity: 1; transform: translate3d(0, 0, 0); }
.nav-inner { position: relative; z-index: 1; }

.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: "Noto Serif SC", serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
.brand-mark--zh, .brand-mark--en {
  align-items: center;
  letter-spacing: .18em;
}
.brand-mark--zh { display: inline-flex; }
.brand-mark--en { display: none; font-family: var(--title); }
.wordmark b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  color: var(--green);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 20px;
  transform: translateY(-1px);
}
.wordmark small { display: inline-flex; align-items: center; color: var(--muted); line-height: 1; }
.brand-mark--zh small { font-size: 20px; }
.brand-mark--en small { font-size: 11px; }
html[lang=en] .brand-mark--zh { display: none; }
html[lang=en] .brand-mark--en { display: inline-flex; }
html[lang=en] .main-nav { gap: clamp(11px, 1.25vw, 21px); }
html[lang=en] .main-nav a { font-size: 12px; letter-spacing: .08em; }

.main-nav a { color: rgba(255, 255, 255, .72); }
.main-nav a:hover, .main-nav a[aria-current=page] { color: var(--green-hi); }
.locale-switch button { border: 0; background: none; color: var(--faint); }
.locale-switch button[aria-pressed=true] { color: #fff; }
.locale-switch i { background: var(--line); }
/* Nav action: left-to-right flowing-gold hover, shared by every page. */
.nav-ticket {
  border: 1px solid rgba(225, 201, 144, .34);
  background: linear-gradient(90deg, #b89865 0%, var(--green-hi) 52%, #e1c990 100%) left / 0% 100% no-repeat, rgba(184, 152, 101, .10) !important;
  color: #fff8e4;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 228, .035);
  transition: background-size .42s var(--ease), color .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
.nav-ticket:hover,
.nav-ticket:focus-visible {
  background-size: 100% 100%, auto !important;
  border-color: rgba(225, 201, 144, .62);
  color: #030303;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(184, 152, 101, .18), inset 0 0 0 1px rgba(255, 248, 228, .12);
}
.nav-ticket--enquiry {
  border-color: rgba(143, 230, 212, .36);
  background: linear-gradient(90deg, #e1c990 0%, var(--green-hi) 58%, #b89865 100%) left / 0% 100% no-repeat, rgba(143, 230, 212, .08) !important;
}
.mobile-nav { background: rgba(3, 6, 6, .985); }
.mobile-nav.open { display: block; }
.mobile-nav a { border-bottom: 1px solid var(--line); font: 400 20px var(--title); }
.mobile-nav a strong { font: inherit; }
.mobile-nav a[aria-current=page] { color: var(--green-hi); }
.mobile-nav a span { color: var(--green-hi); font: 14px var(--sans); }

/* Shared inner-page hero treatment. */
.page-hero { background: var(--dark); }
.page-hero.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 6, 6, .94), rgba(3, 6, 6, .22)),
    linear-gradient(0deg, var(--ql-black), transparent 65%);
}
.page-hero h1 { font: 400 clamp(52px, 7vw, 104px)/1.05 var(--title); }
.page-hero h1.cn { font-family: "Noto Serif SC", serif; }
.page-hero p { color: var(--muted); font: italic 300 18px/1.75 var(--serif); }
.page-meta span { color: var(--faint); }
.page-meta b { color: #fff; font: 400 19px var(--title); }

/* Footer content skin; responsive structure is expressed in markup. */
.site-footer { background: #020404; border-top: 1px solid var(--line); }
.footer-logo { font: 400 25px var(--title); }
.footer-logo p { color: var(--faint); font: 300 14px/1.9 var(--sans); }
.footer-col a { color: var(--muted); }
.follow { border-block: 1px solid var(--line); }
.follow a { color: var(--muted); }
.follow .soon { color: var(--faint); }
.follow .soon::after { content: " · 即将上线"; color: var(--gold); }
html[lang=en] .follow .soon::after { content: " · soon"; }
.repertoire { color: var(--muted); }
.legal { border-top: 1px solid var(--line); color: var(--faint); }

/* Runtime component compatibility and compound states. */
[jq-accordion] { gap: 0 !important; }
[jq-accordion-item] {
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
[jq-accordion-trigger] {
  padding: 22px 0 !important;
  color: #fff !important;
  font: 400 16px var(--title) !important;
}
[jq-accordion-panel] {
  padding: 0 0 22px !important;
  border: 0 !important;
  color: var(--muted) !important;
  font-size: 14px;
}
[jq-dialog] { padding: 20px !important; }
[jq-dialog-backdrop] { background: rgba(0, 0, 0, .9) !important; backdrop-filter: blur(8px); }
[jq-dialog-panel] {
  width: min(1100px, 100%) !important;
  max-width: none !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: #020404 !important;
}
[jq-dialog-panel] video { max-height: 82vh; }
[jq-dialog-close] { position: absolute; z-index: 3; right: 10px; top: 10px; }

@media (max-width: 760px) {
  :root { --section: 90px; --gutter: 20px; }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  :root { --gutter: clamp(24px, 3vw, 42px); }
  .main-nav { gap: 10px !important; }
  .nav-actions { gap: 12px !important; margin-left: 14px !important; }
  .nav-ticket { padding: 10px 14px !important; font-size: 12px !important; }
  .wordmark { font-size: 18px; }
  .brand-mark--zh small { font-size: 18px; }
  html[lang=en] .main-nav a { font-size: 11px; letter-spacing: .055em; }
}

@media (max-width: 430px) {
  .locale-switch { gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .global-nav, .global-nav::before { transition: none; }
}


/* Demo V3.60 global S10 industry-links hover sync from explore. */
#s10.industry-links {
  border-block: 1px solid rgba(225, 201, 144, .24) !important;
  background: #030303 !important;
}
#s10.industry-links a {
  min-width: 0;
  color: rgba(243, 236, 218, .78) !important;
  border-color: rgba(225, 201, 144, .24) !important;
  transition: color 280ms ease, background 280ms ease, border-color 280ms ease;
}
#s10.industry-links a:hover,
#s10.industry-links a:focus-visible {
  color: var(--green-hi) !important;
  border-color: rgba(225, 201, 144, .34) !important;
  background: linear-gradient(90deg, rgba(184, 152, 101, .10), rgba(143, 230, 212, .06)) !important;
}
#s10.industry-links i {
  color: var(--green-hi) !important;
}