/* Portal-only stylesheet. This file is never imported by either learning app. */
@font-face { font-family: "Yusheng Portal Kai"; src: url("./yp-portal-kai-headings-v1-c9dcc25d2bde.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
.yp-page { margin: 0; color: #123741; background: #fffdfa; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.yp-page *, .yp-page *::before, .yp-page *::after { box-sizing: border-box; }
.yp-page a { color: inherit; text-decoration: none; }
.yp-page button { font: inherit; cursor: pointer; }
.yp-page button, .yp-page a { -webkit-tap-highlight-color: transparent; }
.yp-page :focus-visible { outline: 3px solid #c17a29; outline-offset: 5px; }
.yp-page h1, .yp-page h2, .yp-page h3, .yp-page p { margin: 0; }
.yp-page h1, .yp-page h2, .yp-brand { font-family: "Songti SC", "STSong", "SimSun", serif; }
.yp-page h1, .yp-page h2 { font-weight: 700; }
.yp-hero h1, .yp-product-copy h2 { font-family: "Yusheng Portal Kai", "KaiTi", "楷体", "STKaiti", serif; font-weight: 700; -webkit-text-stroke: .25px currentColor; }
.yp-page img { display: block; max-width: 100%; }
.yp-container { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.yp-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.yp-skip { position: fixed; z-index: 30; top: -80px; left: 12px; padding: 12px 18px; background: white; border: 2px solid #397756; border-radius: 6px; }
.yp-skip:focus { top: 8px; }
.yp-header { background: linear-gradient(100deg, #f5fcfc, #fffcf5 50%, #f3faf5); border-bottom: 1px solid #e3eee5; }
.yp-header-inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.yp-brand { display: inline-flex; align-items: center; gap: 13px; font-size: 29px; font-weight: 700; white-space: nowrap; }
.yp-brand svg { flex: 0 0 37px; width: 37px; height: 40px; }
.yp-nav { display: flex; align-items: center; gap: 36px; font-size: 15px; letter-spacing: 1px; }
.yp-nav a { padding-block: 16px; }
.yp-nav a:hover { color: #2f7753; }
.yp-hero { background: linear-gradient(180deg, #fffdf4f5 0%, #fffdf4d9 29%, #fffdf46b 53%, #fffdf400 82%), #fbf5e8; background-image: linear-gradient(180deg, #fffdf4f5 0%, #fffdf4d9 29%, #fffdf46b 53%, #fffdf400 82%), url("./yp-hero-desk-v1-1ce755c45b52.webp"); background-position: center bottom; background-size: cover; background-repeat: no-repeat; }
.yp-hero-inner { display: grid; grid-template-columns: .42fr .58fr; gap: 36px; padding-block: 46px; align-items: start; }
.yp-hero-copy { padding-top: 40px; }
.yp-eyebrow { font-size: 13px; letter-spacing: 2px; color: #506a61; }
.yp-hero h1 { margin-top: 16px; font-size: clamp(38px, 3.9vw, 58px); line-height: 1.35; letter-spacing: -1.5px; white-space: nowrap; }
.yp-stroke { display: block; width: 65px; height: 5px; margin: 13px 0 20px; border-radius: 80% 30% 55% 35%; background: linear-gradient(90deg, #ffad6d, #ffe8b7); transform: rotate(-1.5deg); }
.yp-hero .yp-stroke { width: 145px; }
.yp-hero-subtitle { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.8; letter-spacing: 1px; }
.yp-handwritten { width: 280px; max-width: calc(100% - 60px); margin: 44px 0 116px 60px; font-family: "KaiTi", "STKaiti", serif; font-size: 25px; line-height: 1.8; letter-spacing: 3px; transform: rotate(-12deg); }
.yp-handwritten span { padding-left: 30px; }
.yp-handwritten svg { width: 250px; max-width: 100%; display: block; opacity: .6; }
.yp-products { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; scroll-margin-top: 20px; }
.yp-product { min-width: 0; display: flex; flex-direction: column; padding: 18px 20px 20px; border: 1px solid #fff; border-radius: 22px; background: rgba(255, 255, 255, .96); box-shadow: 0 12px 24px #70563813; }
.yp-book-link { display: block; overflow: hidden; border-radius: 13px; background: #fdfbf6; }
.yp-book-link img { width: 100%; height: clamp(285px, 26vw, 365px); object-fit: contain; transition: transform .25s ease; }
.yp-book-link:hover img { transform: scale(1.025); }
.yp-product-copy { padding: 17px 5px 20px; }
.yp-product-copy h2 { font-size: 31px; line-height: 1.35; }
.yp-product-copy p { margin-top: 9px; color: #68717d; font-size: 14px; line-height: 1.85; }
.yp-button { border: 0; border-radius: 999px; padding: 14px 19px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: linear-gradient(130deg, #4a8360, #357957); color: white !important; font-size: 18px; font-weight: 700; line-height: 1.45; box-shadow: inset 0 1px 0 #ffffff15; transition: transform .18s ease, box-shadow .18s ease; }
.yp-button svg { width: 22px; height: 22px; flex: 0 0 22px; }
.yp-button:hover { transform: translateY(-2px); box-shadow: 0 7px 15px #35654822; }
.yp-product > .yp-button { width: 100%; margin-top: auto; padding-inline: 10px; white-space: nowrap; }
.yp-content { padding-top: 38px; }
.yp-miniapp { display: grid; grid-template-columns: 1fr 330px; gap: 28px; align-items: center; padding: 34px 42px; border-radius: 22px; background: radial-gradient(ellipse at 20% 95%, #fff9df77, transparent 50%), linear-gradient(105deg, #f2faf6, #f3f9f4); scroll-margin-top: 20px; }
.yp-miniapp-copy h2 { font-size: clamp(29px, 3.05vw, 43px); line-height: 1.4; }
.yp-miniapp-copy .yp-stroke { margin-top: 10px; margin-bottom: 13px; }
.yp-miniapp-description { font-size: 18px; line-height: 1.8; }
.yp-features { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; list-style: none; padding: 0; margin: 30px 0 0; gap: 18px; }
.yp-features li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.yp-feature-icon { display: grid; place-items: center; border-radius: 50%; width: 56px; height: 56px; background: #e4f2e9; }
.yp-feature-icon svg { width: 28px; height: 28px; }
.yp-miniapp-action { border-left: 2px solid #e0eee5; text-align: center; padding-left: 30px; }
.yp-miniapp-action .yp-button { width: 100%; }
.yp-miniapp-action > p { margin-top: 12px; font-size: 15px; }
.yp-phone-art { position: relative; width: 180px; height: 135px; margin: -5px auto 10px; }
.yp-phone { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 82px; height: 128px; margin: auto; border: 5px solid #b9ded1; border-radius: 18px; background: #fcfffaff; transform: rotate(8deg); box-shadow: 6px 5px 12px #55877316; }
.yp-phone-notch { position: absolute; top: 2px; width: 28px; height: 4px; background: #b9ded1; border-radius: 5px; }
.yp-phone svg { width: 31px; height: 31px; color: #438e78; }
.yp-phone > span:last-child { font-size: 10px; color: #43816f; }
.yp-phone-leaf { position: absolute; display: block; width: 40px; height: 75px; border-radius: 4% 100% 5% 100%; background: linear-gradient(40deg, #cfe0b8, #9abb97); opacity: .7; top: 55px; }
.yp-leaf-left { left: 19px; transform: rotate(-23deg); }
.yp-leaf-right { right: 15px; transform: rotate(90deg); }
.yp-contact { margin-top: 48px; padding: 0 8px 42px; scroll-margin-top: 20px; }
.yp-contact > h2 { font-size: 36px; }
.yp-contact > .yp-stroke { margin: 8px 0 23px; }
.yp-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.yp-contact-card { border: 1px solid #deebe2; border-radius: 16px; padding: 28px 31px 24px; background: linear-gradient(115deg, #f5fbf7, #fcfcf7); }
.yp-contact-heading { display: flex; gap: 15px; justify-content: space-between; align-items: center; }
.yp-contact-heading h3 { font-size: clamp(16px, 1.38vw, 20px); line-height: 1.65; font-weight: 600; }
.yp-contact-heading h3 span { padding-inline: 5px; font-weight: 400; }
.yp-contact-icon { display: grid; place-items: center; width: 67px; height: 67px; flex: 0 0 67px; border: 1px solid #d8eadd; border-radius: 50%; background: #fff; color: #438763; }
.yp-contact-icon svg { width: 36px; height: 36px; }
.yp-contact-card > p { color: #647078; font-size: 17px; line-height: 1.85; margin: 6px 0 0; }
.yp-contact-button { margin-top: 17px; display: flex; margin-left: auto; font-size: 16px; min-height: 47px; }
.yp-xiaohongshu { background: linear-gradient(115deg, #fff8f5, #fdf4f4); border-color: #f3ded9; }
.yp-xiaohongshu .yp-contact-icon { color: #ec8b77; border-color: #f4dcd5; }
.yp-xiaohongshu .yp-button { background: linear-gradient(110deg, #b85e4c, #aa4e40); }
.yp-footer { min-height: 300px; padding: 80px 0 120px; background: #f5f8eb url("./yp-footer-meadow-v1-0f678f9fae87.webp") center 67% / cover no-repeat; }
.yp-footer-inner { display: flex; justify-content: space-between; gap: 30px; align-items: center; padding-inline: 55px; }
.yp-footer .yp-brand { font-size: 27px; }
.yp-footer p { margin: 10px 0 0 50px; color: #4c645d; font-size: 15px; }
.yp-filing { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; gap: 10px; color: #455c54; }
.yp-filing a:hover { text-decoration: underline; }
.yp-qr-dialog { max-width: min(480px, calc(100vw - 30px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #dae5dd; border-radius: 20px; background: white; color: #123741; overflow: auto; box-shadow: 0 30px 100px #163d3840; }
.yp-qr-dialog::backdrop { background: #122e28aa; backdrop-filter: blur(3px); }
.yp-qr-panel { position: relative; padding: 30px 28px 25px; text-align: center; }
.yp-qr-panel h2 { font-size: 26px; margin: 9px 0 16px; }
.yp-qr-close { position: absolute; top: 8px; right: 10px; border: none; width: 40px; height: 40px; background: transparent; color: #425c50; font-size: 30px !important; border-radius: 50%; }
.yp-qr-close:hover { background: #f0f5ee; }
.yp-qr-image { display: block; max-width: 100%; width: 330px; height: auto; max-height: 54dvh; object-fit: contain; margin: auto; }
.yp-qr-panel > p:last-of-type { font-size: 14px; line-height: 1.85; margin-top: 16px; color: #4c645c; }
.yp-qr-save { display: inline-block; margin-top: 12px; font-size: 14px; text-decoration: underline !important; text-underline-offset: 4px; color: #347553 !important; }
.yp-page.yp-dialog-open { overflow: hidden; }
@media (max-width: 1150px) {
  .yp-container { width: calc(100% - 64px); }
  .yp-hero-inner { grid-template-columns: .4fr .6fr; gap: 20px; }
  .yp-hero h1 { font-size: 42px; }
  .yp-hero-subtitle { font-size: 19px; letter-spacing: 0; }
  .yp-product { padding: 13px 15px 17px; }
  .yp-product > .yp-button { font-size: 16px; }
  .yp-product-copy h2 { font-size: 28px; }
  .yp-miniapp { padding: 28px 30px; grid-template-columns: 1fr 280px; gap: 24px; }
  .yp-miniapp-copy h2 { font-size: 34px; }
  .yp-miniapp-description { font-size: 17px; }
  .yp-features { gap: 14px; }
  .yp-features li { gap: 8px; font-size: 13px; }
  .yp-feature-icon { width: 44px; height: 44px; }
  .yp-contact-card { padding: 23px; }
  .yp-contact-icon { flex-basis: 52px; width: 52px; height: 52px; }
  .yp-contact-card > p { font-size: 15px; }
}
@media (max-width: 900px) {
  .yp-container { width: calc(100% - 40px); }
  .yp-header-inner { min-height: 77px; }
  .yp-brand { font-size: 25px; gap: 8px; }
  .yp-nav { gap: 18px; font-size: 14px; letter-spacing: 0; }
  .yp-hero-inner { grid-template-columns: 1fr; padding: 32px 0 36px; }
  .yp-hero-copy { padding: 0 8px 10px; }
  .yp-hero h1 { font-size: 46px; }
  .yp-handwritten { display: none; }
  .yp-hero .yp-stroke { margin-bottom: 12px; }
  .yp-hero { background-position: left bottom; }
  .yp-book-link img { height: 325px; }
  .yp-product { background: #ffffffed; padding: 18px; }
  .yp-miniapp { grid-template-columns: 1fr 220px; padding: 28px; }
  .yp-miniapp-copy h2 { font-size: 29px; }
  .yp-miniapp-description { font-size: 15px; }
  .yp-features { margin-top: 20px; justify-content: flex-start; }
  .yp-miniapp-action { padding-left: 20px; }
  .yp-miniapp-action .yp-button { font-size: 16px; }
  .yp-contact-grid { gap: 16px; }
  .yp-contact-heading h3 { font-size: 16px; }
  .yp-contact-icon { display: none; }
  .yp-footer-inner { padding-inline: 15px; align-items: flex-start; }
}
@media (max-width: 600px) {
  .yp-container { width: calc(100% - 32px); }
  .yp-header-inner { min-height: 100px; flex-direction: column; gap: 0; padding-top: 12px; }
  .yp-brand { font-size: 25px; }
  .yp-brand svg { width: 30px; height: 34px; flex-basis: 30px; }
  .yp-nav { gap: 32px; font-size: 13px; }
  .yp-nav a { padding: 13px 0; }
  .yp-hero-inner { padding: 26px 0; gap: 15px; }
  .yp-hero-copy { padding: 0 3px 10px; }
  .yp-eyebrow { font-size: 11px; letter-spacing: 1px; }
  .yp-hero h1 { font-size: clamp(29px, 8vw, 44px); letter-spacing: 0; margin-top: 12px; }
  .yp-hero-subtitle { font-size: 16px; }
  .yp-hero .yp-stroke { margin: 9px 0 12px; height: 4px; width: 94px; }
  .yp-products { gap: 11px; }
  .yp-product { padding: 8px 8px 13px; border-radius: 15px; }
  .yp-book-link { border-radius: 10px; }
  .yp-book-link img { height: auto; aspect-ratio: 2 / 3; }
  .yp-product-copy { padding: 10px 3px 12px; }
  .yp-product-copy h2 { font-size: 23px; }
  .yp-product-copy p { font-size: 11px; margin-top: 6px; line-height: 1.85; }
  .yp-product > .yp-button { font-size: 11px; padding: 11px 4px; gap: 2px; min-height: 42px; }
  .yp-product > .yp-button svg { width: 15px; height: 15px; flex-basis: 15px; }
  .yp-content { padding-top: 21px; }
  .yp-miniapp { display: block; padding: 24px 19px; border-radius: 17px; }
  .yp-miniapp-copy h2 { font-size: 25px; line-height: 1.6; }
  .yp-miniapp-description { font-size: 14px; }
  .yp-features { gap: 12px; margin-top: 18px; }
  .yp-features li { gap: 6px; font-size: 11px; }
  .yp-feature-icon { width: 31px; height: 31px; }
  .yp-feature-icon svg { width: 19px; height: 19px; }
  .yp-miniapp-action { border-left: 0; border-top: 1px solid #dcebdc; padding: 20px 0 0; margin-top: 22px; }
  .yp-phone-art { display: none; }
  .yp-miniapp-action .yp-button { width: min(270px, 100%); font-size: 16px; min-height: 48px; }
  .yp-miniapp-action > p { font-size: 13px; }
  .yp-contact { margin-top: 29px; padding: 0 0 20px; }
  .yp-contact > h2 { font-size: 28px; }
  .yp-contact-grid { grid-template-columns: 1fr; gap: 14px; }
  .yp-contact-card { padding: 23px; }
  .yp-contact-heading h3 { font-size: 15px; }
  .yp-contact-icon { display: grid; flex-basis: 45px; width: 45px; height: 45px; }
  .yp-contact-icon svg { width: 27px; height: 27px; }
  .yp-contact-card > p { font-size: 14px; }
  .yp-contact-button { font-size: 14px; min-height: 43px; margin-top: 15px; }
  .yp-footer { padding: 52px 0 110px; min-height: 270px; background-position: center 74%; }
  .yp-footer-inner { flex-direction: column; gap: 24px; padding-inline: 11px; }
  .yp-footer .yp-brand { font-size: 24px; }
  .yp-footer p { font-size: 13px; margin-left: 39px; }
  .yp-filing { align-items: flex-start; padding-left: 39px; font-size: 10px; gap: 6px; }
  .yp-qr-panel { padding: 28px 19px 23px; }
  .yp-qr-panel h2 { font-size: 24px; }
}
@media (max-width: 360px) {
  .yp-products { grid-template-columns: 1fr; }
  .yp-book-link img { height: 290px; aspect-ratio: auto; }
  .yp-product-copy p { font-size: 13px; }
  .yp-product > .yp-button { font-size: 15px; }
  .yp-contact-icon { display: none; }
  .yp-nav { gap: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .yp-page *, .yp-page *::before, .yp-page *::after { transition: none !important; }
}