:root { --ink: #10213b; --paper: #fcfaf4; --gold: #b48332; --jade: #155d50; --coral: #c45442; --line: #dfd1b5; --muted: #5d6470; }
.learning-hero .hero-content { max-width: none; width: 93%; }.landing-content .container, .topics-strip .container { max-width: none; width: 93%; }.learning-stats div:nth-child(4) strong { font-size: .86rem; }
.archive-callout { background: linear-gradient(135deg, #10213b, #061429); color: #f2ead9; padding: 20px 0; }.archive-callout .container { align-items: center; display: flex; justify-content: center; }.archive-callout i { border: 1px solid #c89842; border-radius: 50%; color: #d0a44b; font-size: .85rem; margin: 0 20px; padding: 9px; }.archive-callout p { font: .88rem/1.35 var(--heading-font); letter-spacing: .035em; margin: 0; }
.learning-header { padding: 0; }.learning-header .nav { padding: 11px 0; }.mandarin-logo { align-items: center; border: 1.5px solid #e1bb61; border-radius: 50%; color: #edc86e; display: flex; font: 400 1.6rem 'Noto Serif SC', serif; height: 53px; justify-content: center; text-decoration: none; width: 53px; }.mandarin-logo:hover { color: #fff4cd; }.learning-hero { background: #fbf8f0 url('hero-ink-wash.png') center / cover no-repeat; color: var(--ink); min-height: 307px; padding: 28px 0 17px; position: relative; }.hero-content { position: relative; }.learning-hero h1 { color: var(--ink); font-size: clamp(2.8rem, 4.1vw, 4.15rem); letter-spacing: -.025em; line-height: 1; margin: 0; }.hero-subtitle { color: #a27530; font: italic clamp(1.5rem, 2.1vw, 2rem) var(--heading-font); margin: 3px 0 14px; }.hero-rule, .path-underline { background: #c39037; display: block; height: 2px; margin: 16px 0; width: 84px; }.lede { color: #29303b; font: 1rem/1.45 var(--heading-font); margin: 0; }.hero-hanzi { color: #b64537; font: 700 clamp(5rem, 7vw, 7.5rem)/.72 'Noto Serif SC', serif; letter-spacing: -.15em; position: absolute; right: 9.5%; text-shadow: 1px 1px 0 rgba(128,40,30,.12); top: 6px; writing-mode: vertical-rl; }.hero-seal { border: 2px solid #b64537; border-radius: 3px; color: #b64537; font: .7rem/1.1 'Noto Serif SC', serif; padding: 3px; position: absolute; right: 7.6%; top: 170px; writing-mode: vertical-rl; }.learning-stats { display: grid; gap: 17px; grid-template-columns: 214px 283px 220px 207px; margin-top: 18px; }.learning-stats div { align-items: center; background: rgba(255,254,250,.76); border: 1px solid #d9c9aa; border-radius: 9px; box-shadow: 0 2px 5px rgba(65,49,25,.06); display: flex; gap: 13px; min-height: 68px; padding: 11px 14px; }.learning-stats i { color: var(--jade); font-size: 1.5rem; width: 33px; }.learning-stats div:nth-child(2) i { color: #b68125; }.learning-stats div:nth-child(4) i { color: var(--coral); }.learning-stats span { color: #545050; display: grid; font: .76rem/1.2 var(--body-font); }.learning-stats strong { color: #22242a; font: 400 1rem var(--heading-font); }.learning-stats em { color: #72716c; font: .72rem 'Noto Serif SC', serif; }
.landing-content { background: var(--paper); padding: 14px 0 12px; }.study-system, .learning-path { align-items: center; background: rgba(255,253,248,.75); border: 1px solid var(--line); border-radius: 9px; display: flex; margin-bottom: 12px; min-height: 75px; padding: 10px 21px; }.panel-title { color: var(--ink); flex: 0 0 205px; }.panel-title h2 { font-size: 1.32rem; margin: 0; }.cloud-mark { color: #d2b06e; display: block; font: 2rem/1 var(--heading-font); margin-left: 25px; transform: scaleX(1.55); width: 45px; }.tool-chips { display: flex; flex: 1; gap: 23px; justify-content: space-between; }.tool-chips span { align-items: center; border: 1px solid #adc4b9; border-radius: 999px; color: #242629; display: flex; font: 1rem var(--heading-font); gap: 11px; justify-content: center; min-width: 153px; padding: 10px 17px; }.tool-chips i { font-size: 1.28rem; }.green { color: #3d9d5c; }.coral { color: #d6594a; }.blue { color: #299fd7; }.teal { color: #206d76; }.violet { color: #604396; }
.learning-path { align-items: stretch; min-height: 161px; padding-top: 13px; }.learning-path .panel-title { flex-basis: 185px; }.learning-path .path-underline { margin: 10px 0 0 39px; width: 53px; }.learning-path ol { display: grid; flex: 1; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0; padding: 0; }.learning-path li { padding: 26px 8px 0; position: relative; text-align: center; }.learning-path li:not(:last-child)::after { border-top: 2px dotted #d3a354; content: ''; left: 58%; position: absolute; right: -42%; top: 14px; }.learning-path li > span { align-items: center; background: var(--ink); border-radius: 50%; color: white; display: flex; font: .75rem var(--body-font); height: 27px; justify-content: center; left: calc(50% - 13px); position: absolute; top: 0; width: 27px; z-index: 1; }.learning-path li > i { color: var(--jade); font-size: 2rem; }.learning-path li:nth-child(2) > i, .learning-path li:nth-child(4) > i { color: #b47e25; }.learning-path li:nth-child(5) > i { color: var(--coral); }.learning-path h3 { color: #202b38; font-size: 1.05rem; margin: 3px 0 0; }.learning-path p { color: #555b62; font: .74rem/1.35 var(--heading-font); margin: 0; }
.focus-grid { display: grid; gap: 12px 19px; grid-template-columns: repeat(3, 1fr); }.focus-card { align-items: center; background: rgba(255,253,248,.75); border: 1px solid #e2d7c2; border-radius: 9px; color: var(--ink); display: grid; gap: 17px; grid-template-columns: 96px 1fr auto; min-height: 94px; padding: 9px 18px 9px 14px; }.focus-card:hover { border-color: #bd9957; color: var(--ink); transform: translateY(-1px); }.focus-card > i { align-items: center; background: #e4ebdf; border-radius: 8px; color: var(--jade); display: flex; font-size: 2rem; height: 73px; justify-content: center; }.focus-card.vocabulary > i { background: #f5ead0; color: #ad7824; }.focus-card.hanzi > i { background: #f7ded5; color: #bf4c3a; font: 2.1rem 'Noto Serif SC', serif; }.focus-card.lessons > i { background: #dfe7ed; color: #1c506d; }.focus-card.conversation > i { background: #dfeadf; color: #246a61; }.focus-card.tests > i { background: #e8e1f1; color: #65439a; }.focus-card h3 { color: #20242b; font-size: 1.05rem; margin: 0 0 2px; }.focus-card p { color: #61636a; font: .73rem/1.35 var(--body-font); margin: 0; }.focus-card b { color: #a68854; font: 2.25rem/1 var(--heading-font); font-weight: 400; }
.topics-strip { background: var(--paper); padding: 13px 0; }.topics-strip .container { border: 1px solid #cfb47e; border-radius: 8px; display: grid; grid-template-columns: 1.08fr repeat(4, 1fr); overflow: hidden; }.topics-strip span { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 68px; padding: 7px 14px; }.topics-strip span + span { border-left: 1px solid #dcc9a6; }.topics-title { align-items: flex-start !important; color: var(--ink); font: 1.3rem var(--heading-font); }.topics-title i { color: #cbae72; font-size: 1.7rem; line-height: .7; margin-left: 25px; transform: scaleX(1.5); }.topics-strip b { color: #292c32; font: 600 1.08rem 'Noto Serif SC', serif; }.topics-strip small { color: #6d6c68; font: .67rem var(--body-font); }.archive-section { background: #f0ede4; border-top: 1px solid #e1d8c4; padding: 54px 0; }.section-heading { margin: 0 auto 25px; max-width: 650px; text-align: center; }.eyebrow { color: #a2762d; font-size: .72rem; font-weight: 700; letter-spacing: .12em; margin-bottom: 7px; text-transform: uppercase; }.section-heading h2 { color: var(--ink); font-size: 2.35rem; margin: 0 0 7px; }.section-heading p:last-child { color: var(--muted); margin: 0; }
.archive-controls { align-items: end; display: flex; gap: 15px; justify-content: space-between; margin: 24px 0 10px; }.archive-controls label { color: var(--muted); font-size: .82rem; font-weight: 600; }.archive-controls input { background: #fffdf8; border: 1px solid #cfc3aa; border-radius: 7px; color: var(--ink); display: block; font: inherit; margin-top: 6px; padding: 10px 12px; width: min(370px, 85vw); }.archive-filters { display: flex; flex-wrap: wrap; gap: 8px; }.archive-filters button { background: transparent; border: 1px solid #b8a57d; border-radius: 99px; color: #5e5140; cursor: pointer; font: inherit; font-size: .8rem; padding: 7px 11px; }.archive-filters button.active { background: var(--jade); border-color: var(--jade); color: #fff; }.archive-count { color: var(--muted); font-size: .88rem; margin-bottom: 22px; }.archive-timeline { border-left: 2px solid #c2ac78; display: grid; gap: 16px; margin-left: 8px; padding-left: 28px; }.archive-entry { background: #fffdf8; border: 1px solid #ded5c4; border-radius: 10px; position: relative; }.archive-entry::before { background: var(--coral); border: 4px solid #f0ede4; border-radius: 50%; content: ''; height: 14px; left: -36px; position: absolute; top: 22px; width: 14px; }.archive-entry summary { cursor: pointer; list-style: none; padding: 19px 20px; }.archive-entry summary::-webkit-details-marker { display: none; }.entry-date { color: var(--coral); display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 5px; text-transform: uppercase; }.entry-title { font-family: var(--heading-font); font-size: 1.2rem; }.entry-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }.entry-tags span { background: rgba(27,77,67,.1); border-radius: 99px; color: var(--jade); font-size: .72rem; padding: 3px 8px; }.entry-content { border-top: 1px solid #ded5c4; font: .96rem/1.72 var(--body-font); margin: 0; max-height: 680px; overflow: auto; padding: 24px; }.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { margin: 1.35em 0 .55em; }.markdown-body h1:first-child, .markdown-body h2:first-child { margin-top: 0; }.markdown-body h1 { font-size: 1.8rem; }.markdown-body h2 { font-size: 1.5rem; }.markdown-body h3 { font-size: 1.25rem; }.markdown-body p { margin: 0 0 1em; }.markdown-body ul, .markdown-body ol { list-style: revert; margin: 0 0 1em 1.4em; }.markdown-body li { margin: .28em 0; }.markdown-body blockquote { border-left: 3px solid #b9964f; color: var(--muted); margin: 1em 0; padding: .25em 1em; }.markdown-body code { background: rgba(27,77,67,.1); border-radius: 4px; font: .85em ui-monospace, SFMono-Regular, Menlo, monospace; padding: .12em .3em; }.markdown-body pre { background: var(--ink); border-radius: 8px; color: #f7f2e8; margin: 1em 0; overflow: auto; padding: 16px; }.markdown-body pre code { background: transparent; padding: 0; }.markdown-body hr { border: 0; border-top: 1px solid #ded5c4; margin: 1.5em 0; }.markdown-body img { height: auto; max-width: 100%; }.markdown-body .wiki-link { color: var(--muted); font-style: italic; }.table-wrap { margin: 1em 0; overflow-x: auto; }.markdown-body table { border-collapse: collapse; min-width: 540px; width: 100%; }.markdown-body th, .markdown-body td { border: 1px solid #ded5c4; padding: 8px 10px; text-align: left; vertical-align: top; }.markdown-body th { background: rgba(27,77,67,.1); }.archive-library { margin-top: 54px; }.archive-library h2 { font-size: 1.8rem; }.archive-library .archive-entry { margin-top: 12px; }
.learning-footer { background: linear-gradient(135deg, #10213b, #061429); color: #f2ead9; padding: 22px 0; }.learning-footer .container { align-items: center; display: flex; justify-content: center; }.learning-footer i { border: 1px solid #c89842; border-radius: 50%; color: #d0a44b; font-size: .85rem; margin: 0 20px; padding: 9px; }.learning-footer p { font: .88rem/1.35 var(--heading-font); letter-spacing: .035em; margin: 0; }.footer-line { background: #bc954c; height: 1px; width: 68px; }
body.dark-theme .landing-content, body.dark-theme .topics-strip { background: #111b2c; } body.dark-theme .study-system, body.dark-theme .learning-path, body.dark-theme .focus-card { background: #172334; border-color: #34445a; } body.dark-theme .panel-title h2, body.dark-theme .focus-card h3, body.dark-theme .focus-card, body.dark-theme .topics-title, body.dark-theme .topics-strip b { color: #edf0e8; } body.dark-theme .focus-card p, body.dark-theme .learning-path p { color: #b8c2cc; } body.dark-theme .archive-section { background: #0e1828; } body.dark-theme .archive-entry { background: #172334; border-color: #34445a; } body.dark-theme .archive-entry::before { border-color: #0e1828; }
@media (max-width: 1100px) { .learning-stats { grid-template-columns: repeat(4, 1fr); }.learning-stats div { padding: 9px; }.tool-chips { gap: 9px; }.tool-chips span { min-width: 0; padding: 8px 10px; }.learning-path .panel-title { flex-basis: 150px; } }
@media (max-width: 760px) { .learning-hero { min-height: 0; padding: 36px 0 26px; }.learning-hero h1 { max-width: 480px; }.hero-hanzi { opacity: .18; right: 12%; top: 87px; }.hero-seal { display: none; }.learning-stats { grid-template-columns: repeat(2, 1fr); }.study-system, .learning-path { align-items: stretch; flex-direction: column; }.panel-title, .learning-path .panel-title { flex: auto; }.tool-chips { flex-wrap: wrap; justify-content: flex-start; }.tool-chips span { min-width: 145px; }.learning-path ol { grid-template-columns: repeat(3, 1fr); }.learning-path li:nth-child(3)::after { display: none; }.focus-grid { grid-template-columns: repeat(2, 1fr); }.topics-strip .container { grid-template-columns: repeat(2, 1fr); }.topics-title { grid-column: 1 / -1; }.topics-strip span + span { border-left: 0; }.topics-strip span:nth-child(3), .topics-strip span:nth-child(5) { border-left: 1px solid #dcc9a6; }.archive-controls { align-items: flex-start; flex-direction: column; } }
@media (max-width: 480px) { .learning-stats, .focus-grid { grid-template-columns: 1fr; }.learning-path ol { grid-template-columns: 1fr; }.learning-path li { padding-left: 58px; text-align: left; }.learning-path li:not(:last-child)::after { border-left: 2px dotted #d3a354; border-top: 0; bottom: -13px; left: 29px; right: auto; top: 36px; }.learning-path li > span { left: 16px; }.learning-path li > i { display: none; }.focus-card { grid-template-columns: 78px 1fr auto; }.focus-card > i { height: 68px; }.topics-strip .container { grid-template-columns: 1fr 1fr; }.learning-footer .container { text-align: center; }.learning-footer p { font-size: .76rem; }.footer-line { display: none; } }