:root{color-scheme:light;--ink: #17211b;--muted: #65746d;--line: #dce5df;--paper: #fffdf7;--soft: #f4efe2;--mint: #d6eee4;--leaf: #2f7d5d;--clay: #bd6046;--gold: #dca52c;--blue: #3b75af;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}a{color:inherit}a,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}a:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb,var(--leaf),#ffffff 45%);outline-offset:3px}img{display:block;max-width:100%}.site-shell{min-height:100vh}.topbar{align-items:center;border-bottom:1px solid var(--line);display:flex;gap:24px;justify-content:space-between;padding:16px clamp(18px,5vw,64px)}.brand{font-size:18px;font-weight:800;letter-spacing:0;text-decoration:none}.nav{align-items:center;color:var(--muted);display:flex;flex-wrap:wrap;font-size:14px;gap:16px}.nav a{align-items:center;display:inline-flex;min-height:44px;text-decoration:none}.character-nav{position:relative}.character-nav summary{align-items:center;cursor:pointer;display:inline-flex;min-height:44px;list-style:none}.character-nav summary::-webkit-details-marker{display:none}.character-nav summary:after{content:"▾";font-size:11px;margin-left:6px}.character-nav[open] summary{color:var(--leaf)}.character-nav-panel{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 42px #17211b24;color:var(--ink);display:grid;gap:14px;max-height:min(72vh,620px);min-width:min(760px,calc(100vw - 36px));overflow:auto;padding:18px;position:absolute;right:0;top:calc(100% + 14px);z-index:20}.character-nav-group{border-top:1px solid var(--line);padding-top:14px}.character-nav-group:first-child{border-top:0;padding-top:0}.character-nav-group h2{color:var(--muted);font-size:13px;margin:0 0 10px;text-transform:uppercase}.character-nav-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(54px,1fr))}.character-nav-item{align-items:center;border:1px solid var(--line);border-radius:8px;display:grid;gap:2px;justify-items:center;min-height:58px;padding:7px 4px;text-decoration:none}.character-nav-item:hover,.character-nav-item.active{border-color:var(--leaf);color:var(--leaf)}.character-nav-item.active{background:var(--mint)}.character-nav-item span{font-family:"Noto Serif SC",Songti SC,SimSun,serif;font-size:24px;font-weight:800;line-height:1}.character-nav-item small{color:var(--muted);font-size:11px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero{display:grid;gap:36px;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);padding:clamp(36px,7vw,84px) clamp(18px,5vw,64px) 32px}.home-hero{align-items:center;min-height:calc(100vh - 69px);padding-bottom:clamp(36px,7vw,84px)}.hero h1{font-size:clamp(44px,7vw,92px);line-height:.94;margin:0 0 24px}.hero p,.lead{color:var(--muted);font-size:18px;line-height:1.7;margin:0;max-width:680px}.primary-action{align-items:center;background:var(--leaf);border-radius:8px;color:#fff;display:inline-flex;font-size:18px;font-weight:800;justify-content:center;margin-top:28px;min-height:52px;padding:0 24px;text-decoration:none}.primary-action:hover{background:#25684d}.hero-art{align-self:stretch;background:var(--mint);border:1px solid var(--line);border-radius:8px;min-height:360px;overflow:hidden;position:relative}.hero-art img{aspect-ratio:4 / 3;height:100%;object-fit:cover;width:100%}.section{padding:32px clamp(18px,5vw,64px)}.section-heading{align-items:end;display:flex;gap:18px;justify-content:space-between;margin-bottom:16px}.section-heading h2{font-size:clamp(26px,4vw,42px);margin:0}.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.character-card{background:#fff;border:1px solid var(--line);border-radius:8px;display:grid;gap:12px;min-height:286px;padding:12px;text-decoration:none}.character-card:hover{border-color:color-mix(in srgb,var(--leaf),var(--line) 30%);transform:translateY(-2px)}.character-card img{aspect-ratio:4 / 3;border-radius:6px;object-fit:cover;width:100%}.character-main{align-items:baseline;display:flex;gap:10px}.hanzi{font-family:"Noto Serif SC",Songti SC,SimSun,serif;font-size:46px;font-weight:800;line-height:1}.pinyin{color:var(--clay);font-size:16px;font-weight:700}.meta{color:var(--muted);font-size:14px;line-height:1.5;margin:0}.detail{display:grid;gap:28px;grid-template-columns:minmax(280px,.95fr) minmax(0,1fr)}.detail-media{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}.detail-media img{aspect-ratio:4 / 3;object-fit:cover;width:100%}.detail-copy h1{font-family:"Noto Serif SC",Songti SC,SimSun,serif;font-size:clamp(96px,15vw,180px);line-height:.9;margin:0}.facts{border-top:1px solid var(--line);display:grid;gap:14px;margin-top:28px;padding-top:22px}.fact{display:grid;gap:4px}.fact strong{font-size:13px;text-transform:uppercase}.fact span{color:var(--muted);line-height:1.6}.back-link{color:var(--leaf);display:inline-flex;font-weight:800;margin-bottom:20px;text-decoration:none}.learn-layout{display:block;padding:clamp(22px,5vw,64px)}.lesson-count{color:var(--leaf);font-size:14px;font-weight:800;margin:0 0 14px}.lesson-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:28px}.lesson-nav a,.lesson-nav span{align-items:center;border:1px solid var(--line);border-radius:8px;color:var(--leaf);display:inline-flex;font-weight:800;justify-content:center;min-height:46px;padding:12px 16px;text-decoration:none}.lesson-nav span{color:var(--muted)}@media (max-width: 820px){.topbar{align-items:flex-start;flex-direction:column;gap:8px}.hero,.detail{grid-template-columns:1fr}.hero-art{min-height:260px}.section-heading{align-items:start;flex-direction:column}.character-nav{position:static}.character-nav-panel{left:clamp(12px,5vw,24px);max-height:calc(100svh - 112px);min-width:calc(100vw - 36px);overscroll-behavior:contain;right:clamp(12px,5vw,24px);top:76px}}@media (max-width: 560px){.topbar{padding:12px 16px}.brand{font-size:16px;line-height:1.25}.nav{gap:6px 14px;width:100%}.hero{gap:24px;padding:28px 16px 24px}.home-hero{align-items:start;min-height:auto;padding-bottom:28px}.hero h1{font-size:clamp(40px,15vw,58px);line-height:1;margin-bottom:18px}.hero p,.lead{font-size:16px;line-height:1.65}.primary-action{font-size:16px;margin-top:22px;min-height:50px;width:100%}.hero-art{min-height:0}.section{padding:28px 16px}.grid{grid-template-columns:minmax(0,1fr)}.character-card{min-height:auto}.learn-layout{padding:18px 16px 28px}.detail{gap:20px}.detail-copy h1{font-size:clamp(88px,34vw,132px)}.facts{gap:12px;margin-top:22px;padding-top:18px}.character-nav-panel{border-radius:8px;left:10px;max-height:calc(100svh - 98px);min-width:auto;padding:14px;right:10px;top:92px}.character-nav-grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}.character-nav-item{min-height:54px}.lesson-nav{display:grid;grid-template-columns:1fr}.lesson-nav a,.lesson-nav span{width:100%}}