.learning-route { max-width:1120px; margin:auto; padding:42px 24px 72px; color:#294b65; font:17px/1.65 system-ui,sans-serif; }
.learning-route h1 { font:500 clamp(38px,5vw,64px)/1.08 Georgia,serif; max-width:830px; margin:14px 0 22px; }
.learning-route h2 { font:500 clamp(27px,3.6vw,39px)/1.2 Georgia,serif; margin:0 0 14px; }
.learning-route h3 { font:500 25px/1.25 Georgia,serif; margin:7px 0 10px; }
.learning-route a,.learning-related a { color:#294b65; text-underline-offset:4px; }
.route-intro { max-width:780px; }
.route-kicker { text-transform:uppercase; letter-spacing:.15em; font-size:12px; font-weight:700; color:#805340; }
.route-toolbar { display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin:26px 0; }
.route-section { margin:46px 0; scroll-margin-top:30px; }
.route-topics { list-style:none; padding:0; counter-reset:topic; display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
.route-topic { counter-increment:topic; position:relative; padding:25px; background:#fffdf8; border:1px solid #d9cabb; border-radius:3px 16px 16px 3px; box-shadow:0 5px 0 #e8d8c6,0 16px 30px #634c3512; transition:box-shadow .2s,border-color .2s; }
.route-topic::before { content:counter(topic,decimal-leading-zero); display:block; font:500 24px Georgia,serif; color:#805340; }
.route-topic[data-learning-state="in_progress"] { border-left:5px solid #487fa8; }
.route-topic[data-learning-state="explored"] { border-left:5px solid #805340; }
.route-topic p { margin:12px 0; }
.route-topic .topic-zh { font-size:14px; color:#665f59; margin:0; }
.topic-link { display:inline-block; font-weight:700; padding:10px 0; }
.topic-status { font-size:13px; font-weight:700; margin-top:15px; }
.topic-marks { display:flex; gap:7px; flex-wrap:wrap; }
.topic-marks button,.route-toolbar button,.route-confirm button,.learning-related button { font:inherit; font-size:13px; padding:9px 12px; color:#294b65; border:1px solid #a99a8c; background:#fff9f0; border-radius:5px; cursor:pointer; }
.topic-marks button[aria-pressed="true"] { background:#294b65; color:#fff; border-color:#294b65; }
.topic-marks button:disabled { opacity:.55; cursor:default; }
.route-support { border-left:4px solid #f4a38b; padding:20px 25px; background:#f6ebdf; }
.route-resume,[data-learning-resume] { padding:22px 25px; background:#fff7e9; border:1px solid #d9cabb; border-left:4px solid #487fa8; border-radius:4px; }
[data-learning-resume] p { margin:0 0 7px; font-size:13px; color:#665f59; }
[data-learning-resume] a { font-weight:700; color:#294b65; display:block; }
[data-learning-resume] small { display:block; margin-top:8px; color:#665f59; font-size:12px; }
.route-media { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:25px 0; }
.route-media article { padding:22px; background:#fffdf8; border:1px solid #d9cabb; }
.route-media h3 { font-size:24px; }
.route-note { font-size:14px; color:#665f59; max-width:820px; }
.route-confirm { padding:18px; border:1px solid #a99a8c; background:#fffdf8; }
.learning-related { clear:both; margin:35px auto; padding:24px; border:1px solid #d9cabb; border-left:4px solid #487fa8; border-radius:8px; background:#fff8ec; color:#294b65; font:16px/1.6 system-ui,sans-serif; max-width:100%; }
.learning-related h2 { font:500 26px/1.3 Georgia,serif; margin:0 0 10px; }
.learning-related p { margin:10px 0; }
.learning-related .topic-marks { margin:12px 0; }
.learning-related .related-next { display:block; margin:15px 0 0; font-weight:700; }
.route-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.learning-route :focus-visible,.learning-related :focus-visible { outline:3px solid #805340; outline-offset:4px; }
[data-learning-reset-confirm][hidden] { display:none; }
@media(max-width:680px) { .learning-route { padding:28px 18px 50px; } .route-topics,.route-media { grid-template-columns:1fr; gap:20px; } .route-topic { padding:22px; } .learning-route h1 { font-size:42px; } .route-support { padding:18px; } }
@media(prefers-reduced-motion:reduce) { .route-topic { transition:none; } }