:root { --paper:#fcfaf4; --ink:#202522; --muted:#69716c; --accent:#126f6a; --line:#d9ddd5; --soft:#eef4ef; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; } .page-shell,.index-shell { width:min(100% - 40px,760px); margin:0 auto; padding:48px 0 64px; } .index-shell { width:min(100% - 40px,900px); } .brand { color:var(--accent); text-decoration:none; font-weight:700; } .eyebrow { color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.13em; margin:30px 0 8px; } h1 { font-family:Georgia,"Times New Roman","Songti SC",serif; font-size:clamp(2rem,6vw,3.25rem); line-height:1.12; margin:0; } .index-header { border-bottom:1px solid var(--line); padding-bottom:30px; margin-bottom:24px; } .index-header > p:last-child { color:var(--muted); margin:14px 0 0; } .player { align-items:center; background:var(--soft); border:1px solid #d9e7dc; border-radius:14px; display:flex; flex-wrap:wrap; gap:10px; margin:30px 0 22px; padding:12px; } button { background:white; border:1px solid var(--line); border-radius:9px; color:var(--ink); cursor:pointer; font:inherit; min-height:42px; padding:0 13px; } button:hover { border-color:var(--accent); color:var(--accent); } .accent-switch { display:flex; gap:6px; } .accent-switch button { min-height:34px; padding:0 10px; } .accent-switch button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:white; } .player .accent-switch { flex-basis:100%; } .play-toggle { background:var(--accent); border-color:var(--accent); color:white; font-size:1.05rem; width:44px; padding:0; } .progress { accent-color:var(--accent); flex:1; min-width:60px; } .time { color:var(--muted); font-size:.82rem; min-width:76px; text-align:right; } .question { border-left:3px solid var(--accent); color:#3d4943; line-height:1.7; margin:0 0 36px; padding:4px 0 4px 16px; } .question span { color:var(--accent); display:block; font-size:.78rem; font-weight:700; letter-spacing:.07em; } .original,.translation { border-top:1px solid var(--line); padding:28px 0; } h2 { font-size:1rem; letter-spacing:.08em; margin:0 0 18px; } .translation h2 { color:var(--accent); } .prose { font-size:1.06rem; line-height:2; } .english { font-family:Georgia,"Times New Roman",serif; font-size:1.12rem; } .prose p { margin:0 0 1.15em; } .lesson-nav { border-top:1px solid var(--line); display:grid; gap:8px; grid-template-columns:1fr auto 1fr; padding-top:24px; } .lesson-nav a { color:var(--accent); text-decoration:none; } .lesson-nav a:last-child { text-align:right; } .lesson-grid { display:grid; gap:10px; grid-template-columns:repeat(3,1fr); } .lesson-card { align-items:center; background:white; border:1px solid var(--line); border-radius:10px; color:var(--ink); display:flex; gap:12px; min-height:70px; padding:12px; text-decoration:none; } .lesson-card:hover { border-color:var(--accent); transform:translateY(-1px); } .lesson-card b { color:var(--accent); font-family:Georgia,serif; font-size:1.2rem; } .lesson-card span { font-size:.9rem; line-height:1.35; }
@media (max-width:600px) { .page-shell,.index-shell { width:min(100% - 28px,760px); padding-top:28px; } .player { flex-wrap:wrap; } .progress { order:3; width:100%; flex-basis:100%; } .time { margin-left:auto; } .lesson-grid { grid-template-columns:1fr; } .lesson-nav { grid-template-columns:1fr 1fr; } .lesson-nav a:nth-child(2) { text-align:right; } .lesson-nav a:last-child { grid-column:1 / -1; text-align:left; } }