/* Warm paper, graphite and restrained brass frame the film without tinting the interface. */
:root {
  --paper: #f6f4ef;
  --paper-bright: #fffdfa;
  --surface: #eeebe5;
  --ink: #1b1b1d;
  --gray: #68645e;
  --blue: #715e42;
  --graphite: #1b1b1d;
  --bronze: #9b815c;
  --line: #d8d3c9;
}
body { background: var(--paper); color: var(--ink); }
.cinema-intro.sixarts-intro { background: #171719; color: #f4f1ea; }
.sixarts-intro .sixarts-topline { border-color: #ffffff18;  background: #171719;  color: #b8b4ad; }
.sixarts-intro .sixarts-total-progress i { background: #b9a17d; }
.sixarts-intro #intro-finale { gap: 20px; perspective: none; padding: 24px clamp(20px,3.7vw,64px) 36px; }
.cinema-final-still { width: min(1060px,92vw,calc((100svh - 210px) * 16 / 9)); aspect-ratio: 16/9; opacity: 0; transition: opacity .45s ease; }
.cinema-final-still img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sixarts-intro #intro-finale.is-open .cinema-final-still { opacity: 1; }
.sixarts-intro #intro-finale > p { font-family: var(--font); font-size: clamp(14px,1.8vw,22px); font-weight: 400; letter-spacing: .04em; color: #d3cec5; transition: opacity .5s .15s ease, transform .5s .15s ease; }
@media(prefers-reduced-motion:reduce) { .cinema-final-still { transition: none; } }
::selection { background: #ddd0b9; color: #1b1b1d; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline-color: #a0855c; }
.button, .service-table thead button { background: var(--graphite); color: #fffdfa; }
.button:hover, .service-table thead button:hover { background: #3a3937; }
.text-link, .hint-button, .syllabus summary, .featured-course-link>b { color: #6f5a3b; }
.eyebrow { color: #7b6c55; font-size: 15px; font-weight: 500; letter-spacing: 1px; }
header { background: #f6f4eff0; border-bottom-color: #d8d3c980; backdrop-filter: blur(22px); }
.nav { max-width: 1280px; height: 70px; }
.brand { font-size: 23px; font-weight: 600; letter-spacing: 2px; }
.nav nav { color: #696660; }
.nav nav a:hover { color: #1b1b1d; }
.nav .button.small { border-radius: 5px; padding: 10px 17px; }
.nav-toggle { color: var(--ink); }
.button { border-radius: 6px; font-weight: 500; padding: 14px 23px; }
.skip { background: var(--graphite); }

/* A complete movie frame remains visible, including its source corner mark. */
.cinema-hero { background: var(--paper); color: var(--ink); padding: 82px 0 0; text-align: left; }
.hero-layout { max-width: 1280px; display: grid; grid-template-columns: .82fr 1.22fr; gap: 66px; align-items: center; }
.cinema-hero .hero-intro { padding: 0; margin: 0; max-width: none; }
.cinema-hero .hero-brand { margin: 0 0 26px; color: #82735b; font-size: 12px; font-weight: 400; letter-spacing: 2px; line-height: 1.6; }
.cinema-hero h1 { font-size: clamp(42px, 4.8vw, 68px); line-height: 1.22; letter-spacing: -2.5px; font-weight: 600; margin: 0 0 25px; }
.cinema-hero h1 span { display: block; color: #6f6b64; }
.cinema-hero .hero-lead { font-size: 17px; font-weight: 400; line-height: 1.9; color: #6d6962; }
.cinema-hero .hero-actions { justify-content: flex-start; gap: 24px; margin-top: 31px; }
.cinema-hero .hero-actions .button { background: #1b1b1d; color: #fffdfa; font-size: 14px; }
.cinema-hero .hero-actions .button:hover { background: #3a3937; }
.cinema-hero .hero-actions .text-link { color: #6f5a3b; font-size: 15px; }
.hero-film-still { margin: 0; min-width: 0; }
.hero-film-still img, .course-film-still img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 0; }
.hero-film-still figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #76716a; font-size: 10px; line-height: 1.7; padding-top: 17px; }
.hero-film-still figcaption b { font-family: 'Songti SC','SimSun',serif; font-size: 18px; font-weight: 400; color: #6f5a3b; margin-right: 9px; }
.hero-film-still figcaption button { background: none; padding: 5px 0; font-size: 11px; color: #56514a; white-space: nowrap; }
.hero-film-still figcaption button span { margin-left: 8px; }
.cinema-hero .hero-specs { max-width: 1200px; margin-top: 65px; padding-top: 27px; padding-bottom: 30px; border-top: 1px solid #d8d3c9; justify-content: flex-start; gap: 0; font-size: 11px; color: #79736a; }
.cinema-hero .hero-specs>span { flex: 1; border-left: 1px solid #d8d3c9; padding-left: 34px; }
.cinema-hero .hero-specs>span:first-child { border: 0; padding-left: 0; }
.cinema-hero .hero-specs b { color: #3c3934; font-weight: 500; font-size: 16px; margin-bottom: 5px; }

.learning-arts { background: #1b1b1d; padding-top: 95px; padding-bottom: 70px; }
.learning-arts .arts-head { text-align: left; display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 35px; }
.learning-arts .arts-head .eyebrow { color: #b9a17d; font-size: 12px; margin-bottom: 20px; font-weight: 400; }
.learning-arts h2 { font-size: 52px; font-weight: 500; line-height: 1.25; letter-spacing: -1.8px; color: #f4f1ea; }
.learning-arts h2 span { color: #aaa49a; }
.learning-arts .arts-head>p { color: #aaa49a; font-size: 15px; line-height: 1.9; margin: 0 0 3px; }
.learning-arts .arts-learning-footer .art-note { color: #a6a097; }
.learning-arts .arts-original { border-color: #ffffff1f; }
.learning-arts .arts-original>summary { color: #b9b3a8; }
.learning-arts .arts-original .arts-image { filter: none; }
.learning-arts .af-stage { background: transparent; }

/* Neutral cinema chrome keeps the moving frames as the source of color. */
.af-stage { --af-ink: #eeeae3; --af-muted: #9b968d; --af-line: #ffffff1d; background: #1b1b1d; }
.af-stage button:focus-visible { outline-color: #b9a17d; }
.af-frame, .af-poster, .af-video { background: #141416; }
.af-notice { background: linear-gradient(0deg,#171719eb,#17171999); }
.af-notice-relation { color: #eeeae3; }
.af-notice-status { color: #aaa49a; }
.af-loading i { border-top-color: #c7b08c; }
.af-chapter { color: #969087; }
.af-chapter:before { background: #b9a17d; }
.af-chapter[aria-pressed=true] { color: #f3ede1; }
.af-chapter:hover { color: #d2c5b1; }
.af-play { color: #c6bdb0; }
.af-progress i { background: #b9a17d; }
.af-fullscreen, .af-overlay-play { background: #171719b3; color: #eeeae3; }
.af-frame:fullscreen { background: #141416; }
.learning-arts .arts-learning-footer .intro-replay { color: #c9c0b2; }
.learning-arts .arts-learning-footer .intro-replay span,
.learning-arts .arts-original>summary span { color: #a89d8a; }
.learning-arts .arts-original .arts-scroll { scrollbar-color: #8b827344 transparent; }

.method-section { background: var(--paper); padding-top: 115px; padding-bottom: 110px; }
.method-section h2 { font-size: 56px; font-weight: 550; color: #1b1b1d; }
.method-section h2 span { color: #82796a; }
.method-lead { color: var(--gray); font-size: 19px; font-weight: 400; }
.learning-five { margin-top: 55px; }
.learning-five>div { border-color: #d6d0c5; }
.learning-five b { color: #756449; font-weight: 400; }
.learning-five span, .method-signature { color: var(--gray); }
.section { padding-top: 100px; padding-bottom: 100px; }
.section-heading h2, .faq-section h2 { font-weight: 550; }
.section-intro { color: var(--gray); font-weight: 400; }
.app-section { background: #eeebe5; }
.app-story>p, .app-detail p { color: #6d6962; font-weight: 400; }
.roadmap-note { color: #6d6962; }
.practice { background: #fffdfa; border-radius: 9px; border: 1px solid #d9d4c9; box-shadow: 0 18px 45px #1b1b1d08; }
.practice-top { background: #eeebe4; border-color: #d9d4c9; color: #69635a; }
.practice-top small, .question-category { color: #6d6962; }
.practice h3 { font-weight: 500; color: #1b1b1d; }
.answer { border-color: #d8d3c9; background: #fffdfa; border-radius: 5px; }
.answer span { color: #6d6962; }
.answer:has(input:checked) { border-color: #8e7650; background: #f0e9dc; box-shadow: inset 0 0 0 1px #8e7650; }
.answer:has(input:checked) span { color: #6a5636; }
.answer:has(input:focus-visible) { outline-color: #a0855c; }
.hint-button { color: #56534e; }
.hint-button:disabled { color: #6d6962; }
.feedback { background: #f0e5d4; color: #75573c; }
.feedback.success { background: #ece6da; color: #635239; }
.hint-box { background: #eeebe4; color: #60584c; }
.reason>span { color: #6a573b; }
.caption, .practice .caption, .reason { color: #6d6962; }
select { background: #fffdfa; border-color: #d2cbbe; color: #4d4942; }
.curriculum-bg { background: var(--paper); }
.subject-tabs { border-color: #d6d0c5; gap: 8px; }
.subject-tabs button { color: #6d6962; border-radius: 4px; }
.subject-tabs button[data-subject] { --c: #887455; }
.subject-tabs button[aria-pressed=true] { background: #272628; }
.subject-tabs button[aria-pressed=true] .subject-art { color: #c9b18a; }
.subject-tabs button[aria-pressed=true] .subject-name, .subject-tabs button[aria-pressed=true] .subject-name small { color: #f0ece3; }
.subject-tabs button:hover { background: #eae5dc; }
.subject-tabs button[aria-pressed=true]:hover { background: #272628; }
.subject-name, .course-toolbar p, .course-toolbar h3 span, .select-label { color: #6d6962; }
.subject-name small { color: #6d6962; }
.select-label select { background: #ebe7de; border-color: #d6d0c5; border-radius: 5px; }
.season { background: #ebe7de; border-radius: 5px; }
.season>span, .season p { color: #6d6962; }
.featured-course-link { border-radius: 5px; background: #ebe7de; border: 1px solid #d6d0c5; }
.featured-course-link strong { color: #1b1b1d; }
.featured-course-link small { color: #6d6962; }
.syllabus { border-color: #d6d0c5; }
.syllabus li { color: #6d6962; border-color: #ebe7de; }
.syllabus li::marker { color: #8b857a; }
.coming { background: #ebe7de; border-radius: 6px; }
.coming-mark { color: #8b857a; }
.chip { color: #6d6962; }
.coming p { color: #6d6962; }
.plans-bg { background: #ebe7de; }
.service-scroll { scrollbar-color: #8b857a transparent; }
.table-intro, .tier-label, .service-table thead p, .price small, .service-foot>span { color: #6d6962; }
.service-table thead button { border-radius: 5px; }
.service-table td, .service-table tbody th { border-color: #d6d0c5; color: #6d6962; }
.service-table tbody th { color: #1b1b1d; }
.faq-section { background: var(--paper); }
.faq-list details { border-color: #d6d0c5; }
.faq-list summary span, .faq-list p { color: #6d6962; }
.closing { background: #ebe7de; border: 1px solid #d6d0c5; border-radius: 7px; }
.closing>div:last-child p { color: #56534e; }
footer { border-color: #d6d0c5; }
footer p, footer>a:last-child { color: #6d6962; }

/* The same neutral palette continues through controls and dialogs. */
dialog { background: var(--paper-bright); color: #1b1b1d; border: 1px solid #d8d3c9; border-radius: 10px; box-shadow: 0 20px 100px #1b1b1d45; }
dialog::backdrop { background: #1b1b1dcc; backdrop-filter: blur(6px); }
.dialog-close { background: #ebe7de; color: #56534e; }
.dialog-close:hover { background: #d6d0c5; }
dialog .eyebrow { color: #6d6962; }
dialog>p, .dialog-note { color: #6d6962; }
.dialog-note { background: #ebe7de; border-color: #ebe7de; }
.wechat-contact { background: #ebe7de; border-color: #d6d0c5; }
.wechat-contact>span, .wechat-contact small { color: #6d6962; }
.wechat-contact code { color: #3b3327; }
.wechat-contact button { color: #fffdfa; background: #343230; border-radius: 5px; }
.dialog-back { color: #56534e; }

/* Course page: the bamboo object from the film becomes its visual starting point. */
.course-breadcrumb, .course-breadcrumb a { color: #6d6962; }
.course-breadcrumb a:hover { color: #56534e; }
.course-detail { background: var(--paper); padding-top: 43px; }
.course-cinema-heading { display: grid; grid-template-columns: 1fr 1.08fr; align-items: center; gap: 56px; max-width: none; margin-bottom: 55px; text-align: left; }
.course-heading-copy { min-width: 0; }
.course-cinema-heading .eyebrow { color: #6d6962; font-size: 15px; margin-bottom: 22px; letter-spacing: 1.8px; }
.course-cinema-heading h1 { font-size: 46px; line-height: 1.32; letter-spacing: -1.8px; font-weight: 550; }
.course-cinema-heading h1 span { color: #867355; }
.course-cinema-heading .course-detail-lead { font-size: 19px; font-weight: 500; margin-top: 24px; margin-bottom: 15px; }
.course-cinema-heading .course-detail-intro { font-size: 15px; font-weight: 400; line-height: 1.9; color: #6d6962; }
.course-cinema-heading .course-detail-intro br { display: none; }
.course-cinema-heading .course-detail-actions { justify-content: flex-start; gap: 24px; margin-top: 26px; }
.course-cinema-heading .course-detail-actions .button { font-size: 14px; }
.course-cinema-heading .course-detail-actions .text-link { font-size: 14px; }
.course-film-still { min-width: 0; margin: 0; }
.course-film-still figcaption { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-top: 14px; color: #6d6962; font-size: 10px; line-height: 1.8; }
.course-film-still figcaption a { color: #56534e; }
.course-film-still figcaption a span { margin-left: 8px; }
.course-detail-facts { background: #ebe7de; border: 1px solid #d6d0c5; border-radius: 6px; }
.course-detail-facts>div { border-color: #d6d0c5; }
.course-detail-facts dt, .course-detail-facts dd span { color: #6d6962; }
.course-detail-fit-copy p, .course-detail-outcomes p, .course-detail-subheading>p:last-child { color: #6d6962; }
.course-detail-outcomes article, .course-unit-list, .course-unit { border-color: #d6d0c5; }
.course-detail-outcomes article>span, .course-time, .course-sample-thinking article>span { color: #6d6962; }
.course-unit-number, .course-unit summary small, .course-unit-toggle, .course-lesson-list li>span { color: #6d6962; }
.course-lesson-list p, .course-detail-note { color: #6d6962; }
.course-plan-label { background: #ebe7de; color: #6d6962; }
.course-timeline li { border-color: #d6d0c5; }
.course-timeline li:last-child { border-color: #d6d0c5; }
.course-timeline p, .course-timeline-break h4, .course-timeline-break .course-time { color: #6d6962; }
.course-sample { background: #ebe7de; border: 1px solid #d6d0c5; border-radius: 7px; }
.course-sample-problem { background: var(--paper-bright); border-radius: 6px; }
.course-sample-label, .course-domain, .course-sample-result dt, .course-sample-result dd span { color: #6d6962; }
.course-sample-problem>p:not([class]), .course-sample-thinking p { color: #6d6962; }
.course-sample-result, .course-sample-question { border-color: #d6d0c5; }
.course-sample-question { color: #1b1b1d!important; }
.course-sample-answer summary { color: #56534e; }
.course-plot-grid { stroke: #e4ded2; }
.course-plot-axes { stroke: #b9b0a1; }
.course-plot-curve { stroke: #8d7350; }
.course-plot-labels { fill: #8b8273; }
.course-plot-end { fill: #fffdfa; stroke: #9b815c; }
#course-plot-point { fill: #8d7350; stroke: #fffdfa; filter: drop-shadow(0 2px 4px #8d735033); }
.course-function-visual label { color: #6d6962; }
.course-function-visual input { accent-color: #8d7350; }
.course-function-visual output { color: #715a39; }
.course-practice-details { border-color: #d6d0c5; border-radius: 6px; }
.course-practice-details summary { color: #56534e; }
.course-practice-content>p, .course-practice-questions li { color: #6d6962; }
.course-practice-questions li::marker { color: #8b857a; }
.course-detail-enrol { background: #ebe7de; border: 1px solid #d6d0c5; border-radius: 6px; }
.course-detail-enrol>div>p:last-child, .course-detail-enrol-actions p { color: #6d6962!important; }
.practice-top small, .question-category, .roadmap-note,
.caption, .practice .caption, .reason, .reason label,
.subject-name, .course-toolbar p, .course-toolbar h3 span, .select-label,
.course-detail-facts dt, .course-detail-facts dd span,
.course-detail-note, .course-lesson-list p, .course-unit-number,
.course-unit summary small, .course-unit-toggle, .course-lesson-list li>span,
.course-sample-label, .course-domain, .course-sample-result dt, .course-sample-result dd span,
.course-function-visual label, .course-film-still figcaption { color: #56534e; }

@media (max-width: 1050px) {
  .hero-layout { grid-template-columns: .86fr 1.14fr; gap: 36px; }
  .cinema-hero { padding-top: 66px; }
  .cinema-hero h1 { font-size: 51px; }
  .cinema-hero .hero-lead { font-size: 15px; }
  .hero-film-still figcaption { align-items: flex-start; }
  .hero-film-still figcaption>span { max-width: 150px; }
  .course-cinema-heading { gap: 32px; }
  .course-cinema-heading h1 { font-size: 39px; }
  .course-cinema-heading .course-detail-actions { gap: 18px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .course-cinema-heading { grid-template-columns: 1fr; gap: 36px; }
  .course-cinema-heading h1 { font-size: 49px; }
  .course-cinema-heading .course-detail-intro { max-width: 590px; font-size: 17px; }
  .course-film-still { max-width: 680px; }
}
@media (max-width: 760px) {
  .nav { height: 62px; gap: 13px; }
  header.nav-open { background: #f6f4ef; }
  .nav nav { background: #f6f4ef; border-color: #d6d0c5; }
  .nav nav a { color: #56534e; border-color: #ebe7de; }
  .nav .button.small { font-size: 11px; padding: 9px 13px; }
  .brand { font-size: 21px; }
  .hero-layout { display: flex; flex-direction: column; align-items: stretch; gap: 41px; padding-left: 24px; padding-right: 24px; }
  .cinema-hero { padding-top: 49px; }
  .cinema-hero .hero-brand { font-size: 10px; margin-bottom: 22px; letter-spacing: 1.5px; }
  .cinema-hero h1 { font-size: 50px; line-height: 1.23; letter-spacing: -1.9px; margin-bottom: 23px; }
  .cinema-hero .hero-lead { font-size: 15px; line-height: 1.9; }
  .cinema-hero .hero-actions { margin-top: 25px; gap: 25px; }
  .cinema-hero .hero-actions .button { font-size: 13px; padding: 12px 18px; }
  .cinema-hero .hero-actions .text-link { font-size: 13px; }
  .hero-film-still figcaption { padding-top: 12px; font-size: 9px; gap: 10px; align-items: center; }
  .hero-film-still figcaption>span { max-width: none; }
  .hero-film-still figcaption b { font-size: 16px; margin-right: 5px; }
  .hero-film-still figcaption button { font-size: 10px; }
  .cinema-hero .hero-specs { margin: 30px 24px 0; padding: 23px 0 25px; gap: 0; font-size: 9px; }
  .cinema-hero .hero-specs>span { padding-left: 13px; }
  .cinema-hero .hero-specs b { font-size: 13px; letter-spacing: -.3px; margin-bottom: 5px; }
  .learning-arts { padding-top: 51px; padding-bottom: 47px; }
  .learning-arts .arts-head { display: block; margin-bottom: 27px; }
  .learning-arts .arts-head .eyebrow { font-size: 10px; margin-bottom: 20px; }
  .learning-arts h2 { font-size: 40px; line-height: 1.28; letter-spacing: -1.5px; }
  .learning-arts .arts-head>p { margin-top: 24px; font-size: 13px; line-height: 1.9; }
  .learning-arts .arts-head>p br { display: none; }
  .method-section { padding-top: 68px; padding-bottom: 65px; }
  .method-section h2 { font-size: 40px; }
  .method-lead { font-size: 16px; }
  .learning-five { gap: 24px 0; margin-top: 37px; }
  .learning-five b { font-size: 23px; }
  .learning-five span { font-size: 9px; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .section-heading h2, .faq-section h2 { font-size: 35px; }
  .eyebrow { font-size: 12px; }
  .app-section .section-heading>.text-link { font-size: 14px; }
  .practice { border-radius: 7px; }
  .practice-top { padding: 17px 20px; }
  .practice-body { padding: 24px 20px; }
  .subject-tabs { gap: 3px; }
  .subject-tabs button { padding-left: 4px; padding-right: 4px; }
  .subject-art { font-size: 30px; }
  .subject-name { font-size: 11px; }
  .subject-name small { font-size: 8px; }
  .season, .featured-course-link, .coming { border-radius: 5px; }
  .course-detail { padding-top: 22px; }
  .course-cinema-heading { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
  .course-cinema-heading .eyebrow { font-size: 12px; margin-bottom: 22px; }
  .course-cinema-heading h1 { font-size: 36px; line-height: 1.32; letter-spacing: -1.4px; }
  .course-cinema-heading .course-detail-lead { font-size: 18px; margin-top: 21px; }
  .course-cinema-heading .course-detail-intro { font-size: 15px; }
  .course-cinema-heading .course-detail-actions { gap: 20px; margin-top: 24px; }
  .course-cinema-heading .course-detail-actions .button, .course-cinema-heading .course-detail-actions .text-link { font-size: 13px; }
  .course-film-still figcaption { padding-top: 12px; font-size: 9px; }
  .course-detail-facts, .course-sample, .course-sample-problem, .course-detail-enrol, .course-practice-details { border-radius: 6px; }
}
@media (max-width: 360px) {
  .cinema-hero h1 { font-size: 44px; }
  .hero-layout { padding-left: 20px; padding-right: 20px; }
  .hero-film-still figcaption { flex-wrap: wrap; gap: 6px 16px; }
  .cinema-hero .hero-specs { margin-left: 20px; margin-right: 20px; }
  .cinema-hero .hero-specs>span { padding-left: 9px; }
  .cinema-hero .hero-specs b { font-size: 12px; }
  .course-cinema-heading h1 { font-size: 32px; }
}

/* Film music attribution is local text; external links load only on click. */
.learning-arts .film-music-credit { margin: 14px 0 0; color: #a6a097; font-size: 11px; line-height: 1.85; }
.learning-arts .film-music-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.learning-arts .film-music-credit a:hover { color: #e1d4bd; }