/* Self-hosted Noto: real Chinese glyphs and weights on every device. */
@font-face{
  font-family:"Yi Sans";src:url("assets/fonts/yi-sans-v13.woff2") format("woff2");
  font-style:normal;font-weight:400 600;font-display:swap;
}
@font-face{
  font-family:"Yi Serif";src:url("assets/fonts/yi-serif-v13.woff2") format("woff2");
  font-style:normal;font-weight:400 600;font-display:swap;
}
body.cinematic-theme{
  --sans:"Yi Sans","PingFang SC","Microsoft YaHei",sans-serif;
  --serif:"Yi Serif","Songti SC",serif;
  font-family:var(--sans);font-size:18px;font-weight:400;line-height:1.8;
  letter-spacing:0;font-synthesis:none;text-rendering:optimizeLegibility;
}
body.cinematic-theme :is(button,input,select,textarea){font-family:var(--sans);letter-spacing:.01em}
body.cinematic-theme :is(button,.btn,.chip,.text-btn){font-weight:500}
body.cinematic-theme :is(b,strong){font-weight:600}
body.cinematic-theme :is(h1,h2,h3){font-family:var(--serif);font-weight:500;letter-spacing:.04em;line-height:1.5}
body.cinematic-theme h4{font-family:var(--sans);font-weight:500;letter-spacing:.01em}
body.cinematic-theme :is(p,li,small,label,summary,output){font-family:var(--sans);letter-spacing:.01em}
body.cinematic-theme :is(h1,h2,h3) small{font-weight:400;letter-spacing:.01em;line-height:1.7}
body.cinematic-theme svg text{font-family:var(--sans)}
body.cinematic-theme .sidebar .brand{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:.06em;line-height:1.4}
body.cinematic-theme .sidebar .brand small{font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.18em}
body.cinematic-theme .sidebar #navigation a{font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.015em}
body.cinematic-theme :is(.breadcrumbs,.edition,.checkin,.avatar,.eyebrow,.hero-tag){font-family:var(--sans)}
body.cinematic-theme .workspace .breadcrumbs{letter-spacing:.01em}
body.cinematic-theme .avatar{font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.1}
body.cinematic-theme .eyebrow{font-weight:500;letter-spacing:.08em}
body.cinematic-theme .workspace :is(.welcome h1,.page-heading h1){font-size:clamp(30px,2.6vw,38px);font-weight:500;letter-spacing:.05em}
body.cinematic-theme .workspace p{font-weight:400;letter-spacing:.01em;line-height:1.85}
body.cinematic-theme .section-head h2{font:500 29px/1.5 var(--serif);letter-spacing:.04em}
body.cinematic-theme .section-head h2 small{font-family:var(--sans);font-weight:400;letter-spacing:.01em}

/* Editorial titles have contrast; controls and explanations stay calm and clear. */
body.cinematic-theme .hero.cinematic-hero h1{font:500 clamp(48px,4.7vw,72px)/1.38 var(--serif);letter-spacing:.025em}
body.cinematic-theme .hero.cinematic-hero .hero-tag{font-family:var(--sans);font-weight:400;letter-spacing:.12em}
body.cinematic-theme .hero.cinematic-hero .hero-copy p{font-family:var(--sans);font-size:18px;letter-spacing:.01em;line-height:1.85}
body.cinematic-theme .hero.cinematic-hero .hero-foot{font:400 14px/1.7 var(--sans);letter-spacing:.05em}
body.cinematic-theme .hero.cinematic-hero .hero-foot a{font-family:var(--sans);letter-spacing:.02em}
body.cinematic-theme .cinematic-hero .cinematic-link{font-family:var(--sans);font-weight:500;letter-spacing:.02em}
body.cinematic-theme .cinematic-home>.cinematic-entry-heading h2{font:500 30px/1.5 var(--serif);letter-spacing:.04em}
body.cinematic-theme .cinematic-home>.cinematic-entry-heading :is(h2 small,.eyebrow){font-family:var(--sans);letter-spacing:.03em}
body.cinematic-theme .cinematic-home .cinematic-entry-row .module-card h3{font:500 25px/1.5 var(--serif);letter-spacing:.035em}
body.cinematic-theme .cinematic-home .cinematic-entry-row .module-card p{font-size:16px;line-height:1.8}
body.cinematic-theme .cinematic-home .cinematic-home-bottom .section-head h2{font:500 25px/1.5 var(--serif);letter-spacing:.035em}
body.cinematic-theme .cinematic-home .cinematic-home-bottom .companion-card h3{font:500 23px/1.6 var(--serif);letter-spacing:.025em}
body.cinematic-theme .cinematic-home :is(.module-number,.cinematic-progress .stat b){font-family:var(--sans);font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.015em}

body.cinematic-theme :is(.library-intro h2,.culture-intro h2){font:500 34px/1.5 var(--serif);letter-spacing:.04em}
body.cinematic-theme :is(.library-pattern-info h3,.pattern-card h3){font:500 25px/1.5 var(--serif);letter-spacing:.035em}
body.cinematic-theme .nc-topline h1{font:500 34px/1.5 var(--serif);letter-spacing:.04em}
body.cinematic-theme .nc-main .nc-step h2,
body.cinematic-theme :is(.nc-heading h2,.nc-lesson h3){font:500 24px/1.5 var(--sans);letter-spacing:.015em}
body.cinematic-theme .se-heading h1{font:500 36px/1.5 var(--serif);letter-spacing:.04em}
body.cinematic-theme :is(.se-panel-head h2,.se-inspector-title h3,.se-inspector-empty h3){font:500 20px/1.5 var(--sans);letter-spacing:.01em}
body.cinematic-theme .workspace #design-title{font:500 19px/1.5 var(--sans);letter-spacing:.01em}
body.cinematic-theme :is(.se-position input,.se-range-label output,.nc-progress,.energy-overview b){font-variant-numeric:tabular-nums}
body.cinematic-theme .workspace :is(.game-card h3,.journey-entry h3){font-family:var(--serif);font-weight:500;font-size:26px!important;letter-spacing:.035em;line-height:1.5}
body.cinematic-theme .journey-prologue h2{font:500 36px/1.5 var(--serif);letter-spacing:.04em}
body.cinematic-theme .chapter-card h3{font:500 21px/1.5 var(--serif);letter-spacing:.025em}
body.cinematic-theme :is(.chapter-prelude h2,.chapter-victory h2){font:500 28px/1.5 var(--serif);letter-spacing:.035em}
body.cinematic-theme :is(.journey-how b,.playing-caption>span,.yarn-solid-title b,.yarn-companions-heading>span){font-family:var(--sans);font-weight:500;letter-spacing:.015em}
body.cinematic-theme .yarn-solid-title b{font-size:23px}
body.cinematic-theme .yarn-playspace .yarn-spirit-info>span{font-family:var(--sans);font-weight:500;letter-spacing:0}
body.cinematic-theme :is(.yarn-spirit-info>b,.chapter-number,.chapter-stars){font-family:var(--sans);font-weight:500;font-variant-numeric:tabular-nums}
body.cinematic-theme .workspace .energy-overview b{font:500 17px/1.6 var(--sans);letter-spacing:0}
body.cinematic-theme #corner-companion :is(.corner-chat-head b,.orb-name,.corner-pet-picker span){font-family:var(--sans);font-weight:500;letter-spacing:.01em}
body.cinematic-theme #corner-companion .corner-chat-head b{font-size:20px}
body.cinematic-theme #corner-companion .message{font-family:var(--sans);font-weight:400;letter-spacing:.01em}
body.cinematic-theme dialog h2{font:500 30px/1.5 var(--serif);letter-spacing:.035em}
body.cinematic-theme dialog :is(.source-character-copy,.source-view-caption){font-family:var(--sans);letter-spacing:.01em}
body.cinematic-theme dialog .source-view-buttons button{font-family:var(--sans);font-weight:500}

@media(max-width:1100px){
  body.cinematic-theme .hero.cinematic-hero h1{font-size:54px}
}
@media(max-width:800px){
  body.cinematic-theme .hero.cinematic-hero h1{font-size:47px}
}
@media(max-width:600px){
  body.cinematic-theme{font-size:17px}
  body.cinematic-theme .sidebar .brand{font-size:22px;letter-spacing:.04em}
  body.cinematic-theme .sidebar #navigation a{font-size:14px;letter-spacing:0}
  body.cinematic-theme .workspace :is(.welcome h1,.page-heading h1){font-size:29px;letter-spacing:.035em}
  body.cinematic-theme .hero.cinematic-hero h1{font-size:41px;line-height:1.38;letter-spacing:.025em}
  body.cinematic-theme .hero.cinematic-hero .hero-copy p{font-size:17px}
  body.cinematic-theme .hero.cinematic-hero .hero-foot{font-size:12px}
  body.cinematic-theme .cinematic-home>.cinematic-entry-heading h2{font-size:26px}
  body.cinematic-theme .cinematic-home .cinematic-entry-row .module-card h3{font-size:22px}
  body.cinematic-theme .cinematic-home .cinematic-entry-row .module-card p{font-size:15px}
  body.cinematic-theme .cinematic-home .cinematic-home-bottom .section-head h2{font-size:23px}
  body.cinematic-theme .cinematic-home .cinematic-home-bottom .companion-card h3{font-size:20px}
  body.cinematic-theme .section-head h2{font-size:25px}
  body.cinematic-theme :is(.library-intro h2,.culture-intro h2,.nc-topline h1,.se-heading h1){font-size:29px}
  body.cinematic-theme .nc-main .nc-step h2{font-size:23px}
  body.cinematic-theme .workspace :is(.game-card h3,.journey-entry h3){font-size:25px!important}
  body.cinematic-theme .journey-prologue h2{font-size:29px}
  body.cinematic-theme .chapter-card h3{font-size:20px}
  body.cinematic-theme :is(.chapter-prelude h2,.chapter-victory h2){font-size:26px}
  body.cinematic-theme .yarn-solid-title b{font-size:22px}
  body.cinematic-theme .workspace .energy-overview b{font-size:14px;white-space:nowrap}
  body.cinematic-theme .workspace .energy-overview span{font-size:13px;line-height:1.6}
  body.cinematic-theme .workspace .energy-overview small{font-size:11px;line-height:1.6}
  body.cinematic-theme dialog h2{font-size:26px}
}
@media(max-width:380px){body.cinematic-theme .hero.cinematic-hero h1{font-size:38px}}