@import url("/interior-design.css?v=6");
@import url("/image-motion.css?v=5");

/* Panda Junyu — shared visual language, September 2026.
   Official typefaces, original artwork, one consistent reading rhythm. */
@font-face{font-family:"Alibaba PuHuiTi";src:url("/fonts/alibaba-puhuiti-regular-site.woff2?v=20260917-products") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alibaba PuHuiTi";src:url("/fonts/alibaba-puhuiti-medium-site.woff2?v=20260917-products") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Alibaba PuHuiTi";src:url("/fonts/alibaba-puhuiti-semibold-site.woff2?v=20260917-products") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"QianTu HouHei";src:url("/fonts/qiantu-houhei-site.woff2?v=20260917-products") format("woff2");font-weight:800;font-style:normal;font-display:swap}
:root {
  --ink:#101820; --ink-soft:#37414a; --muted:#59636b; --quiet:#59636b;
  --line:#dce0e3; --soft:#f5f6f6; --white:#fff;
  --sans:"Alibaba PuHuiTi","PingFang SC","Microsoft YaHei",sans-serif;
  --display:"QianTu HouHei","Alibaba PuHuiTi",sans-serif;
  --gutter:clamp(24px,5vw,88px);
  --pad:max(var(--gutter),calc((100vw - 1320px)/2));
  --page-pad:var(--pad);
  --space:clamp(72px,8vw,128px);
  --ease:cubic-bezier(.16,1,.3,1);
}
html {scroll-padding-top:0; -webkit-text-size-adjust:100%;}
/* Each destination owns its clearance; do not add a second root scroll offset. */
:where(main[id],main [id]) {scroll-margin-top:100px;}
html body {font-family:var(--sans);font-synthesis:none;}
html body :is(h1,h2,h3,h4,h5,h6),
html body :is(.season-intro-title,.solar-hero-art figcaption strong,.festival-hero-gallery figcaption strong,.solar-grid figcaption strong,.festival-grid figcaption strong,.games-category-covers figcaption strong,.concept-category-status strong,.tea-counter-heading strong,.character-name,.hero-word,.category-link strong,.goods-category-link strong,.goods-item strong,.home-concept-status,.nav-sublabel,.book-hook,.belief blockquote,.book-intro blockquote,.world-principle blockquote) {
  font-family:var(--display)!important;font-weight:800!important;font-style:normal;
  letter-spacing:0; text-wrap:balance; overflow-wrap:break-word;
}
html body :is(p,li,figcaption,label,input,select,textarea,button,.page-breadcrumb,.series-breadcrumb) {font-family:var(--sans);}
html body :is(.partners-chapter,.partner-intro) {font-family:var(--sans);}
html body :is(.partner-profile p,.partner-profile small,.partner-roster-note) {font-family:var(--sans);}
html body :is(h2,h3,h4) {line-height:1.3;}
p {text-wrap:pretty;}
html body :is(button,a,input,select,textarea):focus-visible {outline:2px solid var(--ink);outline-offset:5px;}
html body .skip-link {z-index:220;}

/* Keep the established navigation behavior; simplify its visual furniture. */
@media(min-width:1081px) {
  header:is(.site-header,.story-header,.world-header,.goods-header,.about-header) {padding-inline:var(--gutter);gap:20px;}
  /* Equal visible gaps: 13px inset + 6px layout gap + 13px inset = 32px.
     A rotated 6px chevron spans 6 * sqrt(2); its button keeps the same insets. */
  header > nav[aria-label="网站主导航"] {--nav-link-inset:13px;--nav-toggle-width:calc(2 * var(--nav-link-inset) + 6px * 1.41421356237);gap:6px;padding:0;border-radius:0;background:transparent;}
  header > nav[aria-label="网站主导航"] .nav-link {position:relative;padding:0 var(--nav-link-inset);border-radius:0;font-size:15px;}
  header > nav[aria-label="网站主导航"] > .nav-link:is([aria-current],[data-active]),
  header > nav[aria-label="网站主导航"] .nav-group-heading:has(.nav-link:is([aria-current],[data-active])) {color:var(--ink);background:transparent;}
  header > nav[aria-label="网站主导航"] :is(.nav-link[aria-current],.nav-link[data-active])::after {content:"";position:absolute;bottom:4px;left:var(--nav-link-inset);right:var(--nav-link-inset);height:2px;background:var(--ink);transform:none;}
  header > nav[aria-label="网站主导航"] .nav-group-heading .nav-link::after {right:0;}
  header > nav[aria-label="网站主导航"] .nav-group-heading {border-radius:4px;}
  header > nav[aria-label="网站主导航"] .nav-submenu-toggle {width:var(--nav-toggle-width);flex-basis:var(--nav-toggle-width);}
  header > nav[aria-label="网站主导航"] .nav-submenu-toggle span {transform:translateY(-2px) rotate(45deg);}
  header > nav[aria-label="网站主导航"] .nav-submenu-toggle[aria-expanded="true"] span {transform:translateY(2px) rotate(225deg);}
  header > nav[aria-label="网站主导航"] > .nav-link:not([aria-current],[data-active]):hover,
  header > nav[aria-label="网站主导航"] .nav-group-heading:not(:has(.nav-link:is([aria-current],[data-active]))):is(:hover,:has([aria-expanded="true"])) {background:#f3f5f6;}
  header > nav[aria-label="网站主导航"] .nav-submenu {top:calc(100% + 16px);width:560px;padding:14px;border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 48px #10182012;}
  header > nav[aria-label="网站主导航"] .nav-submenu a {min-height:112px;border-radius:4px;gap:12px;}
  header > nav[aria-label="网站主导航"] .nav-submenu small {font-size:13px;line-height:1.6;}
}
header > :is(.header-action,.header-read) {border-radius:5px;gap:18px;}
html .mobile-nav-toggle {border-radius:5px;}
@media(max-width:1080px) {
  header > nav[aria-label="网站主导航"] .nav-link {font-family:var(--sans);font-weight:500;}
  header > nav[aria-label="网站主导航"] .nav-submenu a {border-radius:4px;}
  header > nav[aria-label="网站主导航"] {gap:10px!important;}
}
@media(max-width:700px) {
  :root {--gutter:20px;--pad:20px;--page-pad:20px;--space:72px;}
  html body :is(h2,h3,h4) {letter-spacing:0;}
  header > :is(.header-action,.header-read) {gap:8px;}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto!important;}
  html body *,html body *::before,html body *::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}
@media(forced-colors:active) {
  header > nav[aria-label="网站主导航"] :is(.nav-link[aria-current],.nav-link[data-active])::after {background:CanvasText;}
}

/* The reader has an extended Alibaba subset for all 36 pages of transcripts. */
@font-face {font-family:"Junyu Reader Text";src:url("/fonts/alibaba-puhuiti-reader-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
html body .transcript-content p {font-family:"Junyu Reader Text",var(--sans);font-weight:400;}
html body .skip-link {position:fixed;top:12px;left:16px;padding:14px 20px;background:#101820;color:#fff;font:500 15px var(--sans);text-decoration:none;transform:translateY(-180%);}
html body .skip-link:focus {transform:none;}

html body .character-name small {font-family:var(--sans);font-weight:400;}

/* Fit all five stack-game controls inside the narrowest supported phone. */
@media(max-width:360px) {
  html body .game-controls {grid-template-columns:44px 44px minmax(0,1fr) 44px 44px;gap:4px;}
  html body .game-controls button {padding-inline:0;font-size:12px;}
}