:root{--ink:#2c2938;--muted:#716d7d;--line:#e8dfda;--purple:#51485f;--purple-deep:#383044;--pale:#f5efed;--gold:#b78a45}
html{scroll-behavior:smooth}
body{background:#fbf8f4;color:var(--ink)}
h1,h2,h3{font-family:"Noto Serif SC","Songti SC","SimSun",serif}
.site-header{height:72px;background:rgba(251,248,244,.96);border-color:#e4dbd5;backdrop-filter:blur(14px)}
.nav-wrap{gap:30px}
.brand{font-family:"Noto Serif SC","Songti SC","SimSun",serif;font-size:23px;font-weight:800;letter-spacing:.025em;color:#252334}
.brand-mark{background:#4b4359;color:#f1d49f;border-radius:8px;box-shadow:0 3px 9px #352c3d23}
.site-header nav{gap:27px}
.site-header nav a{font-size:13px;color:#5f596b}
.site-header nav a:hover,.site-header nav a.active{color:#423747;border-color:#51485f}
.site-header nav a.vip-link{color:#846128}
.site-header nav a.vip-link:hover,.site-header nav a.vip-link.active{color:#76521c;border-color:#b78a45}
.nav-action,.button-primary{border-radius:999px;background:#3e384a;box-shadow:0 5px 15px #3e384a1c}
.nav-action:hover,.button-primary:hover{background:#2d2838}
.eyebrow{color:#8f6d89;letter-spacing:.18em}
.hero{position:relative;display:flex;width:100%;max-width:none;min-height:570px;padding:0;overflow:hidden;align-items:center;background:#eee4da}
.hero-art{position:absolute;inset:0;z-index:0;width:100%;height:100%;border-radius:0;box-shadow:none;background:#eee4da}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(252,248,242,.78) 0%,rgba(252,248,242,.65) 24%,rgba(252,248,242,.18) 47%,transparent 68%)}
.hero-copy{position:relative;z-index:2;width:min(1180px,calc(100% - 40px));margin:auto;padding:68px 0;text-shadow:0 1px 10px #fff7}
.hero h1{max-width:590px;margin:19px 0 20px;font-size:clamp(48px,5.2vw,76px);line-height:1.28;letter-spacing:-.055em;color:#252333}
.hero h1 em{color:#514056}
.hero-copy>p{max-width:480px;color:#454255;font-size:15px;line-height:1.9}
.hero-actions{display:flex;align-items:center;gap:21px;margin-top:25px}
.hero-actions .button-primary{min-height:45px;padding:0 23px;font-size:13px}
.hero-actions .button-primary span{margin-left:9px}
.hero-secondary{color:#3c3547;font-size:13px;font-weight:750;border-bottom:1px solid #8a7a80;padding-bottom:4px}
.hero-secondary:hover{color:#9a6d37;border-color:#9a6d37}
.hero-meta{margin-top:30px;gap:8px}
.hero-meta span{border-color:#d9cfca;background:#fffaf1b8;color:#6c6470;font-size:11px}
.catalog{padding-top:74px;padding-bottom:82px}
.section-top h2,.discussion-heading h2{font-size:34px;color:#262333}
.section-top p{color:#817c88}
.count-badge{background:#eee6e3;color:#69536d}
.search-box{border-color:#e4dad7;background:#fffdfb;border-radius:999px}
.search-box:focus-within{border-color:#8c7c91;box-shadow:0 0 0 3px #51485f15}
.filters button{border-color:#e5dbd7;background:#fffdfb;color:#746d79}
.filters button:hover,.filters button.selected{border-color:#4d455c;background:#4d455c;color:#fff}
.resource-grid{gap:20px}
.resource-card{border-color:#e7ded8;border-radius:10px;background:#fffdfa;box-shadow:0 8px 28px #352c3d0b}
.resource-card:hover{border-color:#b69d8d;box-shadow:0 16px 36px #352c3d19}
.card-image{height:215px;background:#e9ddd7}
.featured{border-radius:5px;color:#5a4266}
.card-body{padding:22px 22px 20px}
.card-category{color:#926e81}
.card-body h3{font-size:19px;letter-spacing:-.02em}
.card-bottom strong{color:#705b76}
.card-bottom small{background:#f2eeec;color:#827983}
.resource-note{background:#f3efed;border-color:#b89670;color:#756d78}
.discussion-section.wrap{width:min(1180px,calc(100% - 40px));padding:42px 42px 48px;margin-bottom:74px;border:1px solid #e7dbd8;border-radius:18px;background:radial-gradient(circle at 0 100%,#eadde4 0,transparent 31%),linear-gradient(120deg,#f6efee,#f8f3ef)}
.discussion-heading h2{margin-top:10px}
.discussion-count{background:#ebe2e9;color:#66526c}
.discussion-form,.discussion-feed{border-color:#e6dcd9;border-radius:11px;background:#fffdfa;box-shadow:0 6px 20px #352c3d08}
.discussion-form input:not(.honeypot),.discussion-form select,.discussion-form textarea{border-color:#e2d9d6;background:#fff}
.discussion-form input:not(.honeypot):focus,.discussion-form select:focus,.discussion-form textarea:focus{border-color:#907f93;box-shadow:0 0 0 3px #51485f15}
.feed-title,.message-item{border-color:#eae2de}
.message-avatar{background:#eee6ea;color:#6a526f}
.load-more{background:#f8f2f1;border-color:#e6d9dd;color:#5e4c63}
.site-footer{background:#302c3c;border-color:#302c3c}
.site-footer .brand{color:#f8f1e8}
.site-footer .brand-mark{background:#574d67}
.footer-main p,.footer-links,.copyright{color:#c8bdc8}
.footer-links a:hover{color:#f0d19a}
.back-link{color:#796b79}
.detail-hero{border-color:#e5dcd7}
.detail-copy h1,.article-head h1{color:#262333}
.detail-tags span{background:#eee7e9;color:#715b72}
.detail-image{border-radius:10px}
.detail-main .discussion-section{padding:42px;border:1px solid #e7dbd8;border-radius:18px;background:#f6efee}
.detail-next{background:#eee8e8}
.article-body section{border-color:#e7ded8}
.auth-panel,.checkout-panel{border-color:#e7ddd8;background:#fffdfa;box-shadow:0 18px 48px #3a304016}
.auth-intro h1 em{color:#765f78}
.auth-intro img{border-radius:10px;filter:saturate(.8)}
.auth-tabs button.active{border-color:#51485f;color:#51485f}
.vip-heading h1{color:#282536}
.vip-plan{background:linear-gradient(145deg,#2a2637,#4a3b56);box-shadow:0 24px 55px #2d243a30}
.vip-plan .plan-label,.vip-plan .plan-price strong{color:#f2d49b}
.vip-plan .plan-clarify{color:#d9ccce}
.pay-methods label:has(input:checked){border-color:#bfa99e;background:#fbf7f4}
.order-summary strong{color:#765b6d}
.vip-faq article{background:#fffdfa;border-color:#e7ddd8}
@media(max-width:900px){.hero{min-height:500px}.hero h1{font-size:clamp(43px,6vw,65px)}.hero:after{background:linear-gradient(90deg,rgba(252,248,242,.86),rgba(252,248,242,.52) 48%,transparent 85%)}}
@media(max-width:650px){.site-header{height:auto}.nav-wrap{gap:0 10px}.site-header nav{gap:7px}.site-header nav a{font-size:11px}.hero{min-height:575px;align-items:flex-end}.hero-art img{object-position:67% center}.hero:after{background:linear-gradient(0deg,rgba(252,248,242,.96) 0%,rgba(252,248,242,.82) 37%,rgba(252,248,242,.12) 85%)}.hero-copy{width:min(100% - 32px,1180px);padding:38px 0 37px}.hero h1{font-size:42px;max-width:420px}.hero-copy>p{font-size:13px;max-width:400px}.hero-actions{gap:15px}.hero-actions .button-primary{padding:0 17px}.hero-secondary{font-size:12px}.hero-meta{margin-top:20px}.catalog{padding-top:54px}.section-top h2,.discussion-heading h2{font-size:28px}.discussion-section.wrap{width:min(100% - 32px,1180px);padding:28px 20px;margin-bottom:55px}.detail-main .discussion-section{padding:28px 20px}.card-image{height:205px}}

/* Keep the first useful catalog controls in view and make every form state readable. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:10px;left:10px;z-index:50;padding:11px 16px;border-radius:8px;background:#302c3c;color:#fff;transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid #b78a45;outline-offset:3px}
:where(#resources,#guestbook,#main-content){scroll-margin-top:116px}
.site-header nav a{font-size:14px}
.nav-action,.button-primary{min-height:44px;font-size:14px}
.hero{min-height:440px}
.hero-copy{padding:44px 0}
.hero h1{font-size:clamp(44px,4.8vw,67px)}
.hero-copy>p{font-size:16px;line-height:1.75}
.hero-actions .button-primary,.hero-secondary{font-size:14px}
.hero-meta{margin-top:20px}
.hero-meta span,.card-category,.featured,.detail-tags span,.section-number,.article-body section>span{font-size:12px}
.catalog{padding-top:42px}
.section-top p,.discussion-heading p,.card-body p,.resource-note,.detail-copy>p,.detail-sections p,.detail-sections li,.article-head p,.article-body p,.detail-next p,.auth-intro p,.vip-heading p,.vip-faq p,.checkout-panel>p{font-size:16px;line-height:1.75}
.search-box input,.discussion-form input:not(.honeypot),.discussion-form select,.discussion-form textarea,#auth-form input{font-size:16px}
.filters button{min-height:44px;font-size:14px}
.card-bottom small,.card-bottom strong,.count-badge,.discussion-count{font-size:12px}
.empty-state{font-size:16px;line-height:1.7}
.empty-state button,.feed-retry{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:12px 0 0;padding:8px 15px;border:1px solid #a89aaa;border-radius:8px;background:#fffdfb;color:#493e54;font-size:14px;font-weight:750}
.empty-state button{display:flex;margin:14px auto 0}
.empty-state button:hover,.feed-retry:hover{background:#f1e9ec;border-color:#51485f}
.discussion-form h3{margin-bottom:8px}
.discussion-form label,#auth-form label{font-size:14px}
.form-hint{margin:0 0 18px;color:#625b69;font-size:14px;line-height:1.65}
.form-bottom small,.form-feedback,.feed-state,.feed-title span{font-size:14px}
.discussion-form [aria-invalid="true"]{border-color:#b2434e!important;box-shadow:0 0 0 3px #b2434e20}
.message-author,.message-body{font-size:16px}
.message-time,.message-kind{font-size:12px}
.load-more{min-height:44px;font-size:14px}
.panel-subtitle,.form-note,.payment-note,.vip-plan li,.plan-clarify,.vip-faq h3{font-size:14px;line-height:1.7}
.social-login button,.pay-methods strong,.pay-methods small,.auth-back,.checkout-login,.order-summary small{font-size:14px}
.pay-methods label:has(input:disabled){background:#f8f5f2;color:#534c59}
.pay-methods small{color:#706977}
.auth-submit:disabled,.checkout-button:disabled{background:#6b6475;color:#fff}
#resource-grid{view-transition-name:resource-grid}
::view-transition-old(resource-grid){animation:160ms ease-out both fade-out}
::view-transition-new(resource-grid){animation:220ms ease-out both fade-in}
@keyframes fade-out{to{opacity:0;transform:translateY(5px)}}
@keyframes fade-in{from{opacity:0;transform:translateY(5px)}}
@media(max-width:900px){.hero{min-height:420px}}
@media(max-width:650px){
  .site-header nav a{min-height:44px;font-size:12px}
  .nav-action{min-height:40px;font-size:12px}
  .hero{min-height:490px}
  .hero-copy{padding:30px 0 28px}
  .hero h1{font-size:clamp(34px,9vw,42px);line-height:1.3}
  .hero-copy>p{font-size:16px;line-height:1.7}
  .hero-actions{flex-wrap:wrap;gap:16px}
  .hero-actions .button-primary{min-height:44px}
  .hero-secondary{min-height:44px;display:inline-flex;align-items:center;padding-bottom:0}
  .catalog{padding-top:38px}
  .section-top h2,.discussion-heading h2{font-size:28px}
  .discussion-section.wrap{padding:28px 20px}
  .form-bottom{align-items:flex-start}
  .form-bottom small{padding-top:11px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Home hero: user supplied night train illustration. */
.hero,.hero-art{background:#06162b}
.hero-art img{object-position:center 8%}
.hero:after{background:linear-gradient(90deg,rgba(3,14,33,.84) 0%,rgba(3,14,33,.68) 30%,rgba(3,14,33,.18) 57%,rgba(3,14,33,.02) 80%)}
.hero-copy{text-shadow:0 2px 12px rgba(0,8,20,.5)}
.hero .eyebrow{color:#a7e8f4}
.hero h1{color:#f8fcff}
.hero h1 em{color:#b9eff6}
.hero-copy>p{color:#e8f5fb}
.hero-actions .button-primary{background:#b9eff6;color:#0a2035;box-shadow:0 8px 22px rgba(0,10,28,.3)}
.hero-actions .button-primary:hover{background:#e0faff}
.hero-secondary{color:#f5fbff;border-color:#c0e7f0}
.hero-secondary:hover{color:#b9eff6;border-color:#b9eff6}
.hero-meta span{border-color:rgba(188,232,245,.5);background:rgba(4,25,49,.62);color:#ecf9ff}
@media(max-width:900px){.hero:after{background:linear-gradient(90deg,rgba(3,14,33,.87),rgba(3,14,33,.57) 52%,rgba(3,14,33,.15) 85%)}}
@media(max-width:650px){
  .hero-art img{object-position:37% center}
  .hero:after{background:linear-gradient(0deg,rgba(3,14,33,.98) 0%,rgba(3,14,33,.83) 37%,rgba(3,14,33,.14) 83%)}
  .hero-copy{text-shadow:0 2px 10px rgba(0,8,20,.65)}
}

.header-guestbook{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 14px;border:1px solid #ded3db;border-radius:999px;background:#fffaf8;color:#574a62;font-size:14px;font-weight:750;white-space:nowrap;transition:background .2s,border-color .2s}
.header-guestbook img{display:block;width:18px;height:18px}
.header-guestbook:hover{border-color:#a98daa;background:#f3ebf0}
@media(max-width:650px){
  .nav-wrap .brand{order:0}
  .header-guestbook{order:1;padding:0 10px;font-size:12px}
  .header-guestbook img{width:16px;height:16px}
  .nav-wrap .nav-action{order:2}
  .site-header nav{order:3}
}
@media(max-width:360px){
  .nav-wrap{column-gap:4px}
  .nav-wrap .brand{font-size:17px}
  .header-guestbook{gap:4px;padding:0 7px;font-size:12px}
  .nav-wrap .nav-action{padding:0 6px;font-size:12px}
}
/* Course purchase and detail gallery */
.purchase-panel{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px;padding:18px 20px;border:1px solid rgba(191,163,104,.45);border-radius:12px;background:rgba(238,226,199,.22)}
.purchase-panel strong{font-size:19px;color:#e5c888}.purchase-panel span{font-size:13px;line-height:1.6;color:#d2d9df}.purchase-button{margin-top:5px}.purchase-button:disabled{opacity:.5;cursor:not-allowed}.course-gallery{margin:35px 0}.course-gallery>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:15px}.course-gallery img{display:block;width:100%;height:auto;border-radius:10px}