:root{--bg:#f4f3ee;--panel:#fffefb;--ink:#20362f;--muted:#53695e;--line:#d4ded2;--accent:#245c49;--soft:#e8eee6;--focus:#946626;--radius:14px;--shadow:0 10px 28px #12352609}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
body.dark{--bg:#101b19;--panel:#192722;--ink:#e6ede4;--muted:#b7c7ba;--line:#42584b;--accent:#afd0b6;--soft:#233a2e;--focus:#e0bf86;--shadow:none}
a{color:inherit;text-underline-offset:4px}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button,a,input,select,summary{outline-offset:3px}:is(button,a,input,select,summary):focus-visible{outline:3px solid var(--focus)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.35}h1,h2{font-family:"Songti SC","STSong",Georgia,serif}h1{font-size:clamp(36px,4.5vw,58px);letter-spacing:-1.5px}h1 em{font-style:normal;color:var(--accent)}h2{font-size:clamp(25px,3vw,32px)}h3{font-size:22px}
.wrap{max-width:1210px;padding:0 34px;margin:auto}.topbar{background:var(--bg);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}.nav{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:15px;font-weight:750;white-space:nowrap}.brand img{width:37px;height:37px}.brand small{display:block;font:10px/1.5 ui-monospace,monospace;letter-spacing:1.4px;color:var(--muted)}.nav-actions{display:flex;align-items:center;gap:23px;font-size:13px}.nav-actions a{text-decoration:none;color:var(--muted)}.nav-actions a:hover{color:var(--accent)}.theme{border:1px solid var(--line);background:var(--panel);border-radius:50%;width:38px;height:38px}
.skip{position:absolute;top:-90px;left:15px;background:var(--accent);color:var(--bg);padding:8px 16px;z-index:100}.skip:focus{top:8px}.eyebrow{font:11px/1.4 ui-monospace,monospace;letter-spacing:1.3px;color:var(--accent)}.hero{padding:34px 0 25px;display:flex;justify-content:space-between;align-items:end;gap:28px}.hero .eyebrow{margin-bottom:8px}.hero .lead{font-size:15px;color:var(--muted);margin-top:12px;max-width:520px}.hero-count{color:var(--muted);font-size:12px;white-space:nowrap;padding-bottom:5px}.hero-count strong{font-size:16px;color:var(--ink)}.hero-count span{padding:0 5px}
.section-heading{border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:15px}.section-heading p{font-size:13px;color:var(--muted)}.catalog-tools{margin-bottom:17px}.searchbox{display:block;font-size:13px;color:var(--muted);max-width:500px;font-weight:600}.searchbox input{display:block;width:100%;height:46px;margin-top:5px;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:8px 13px;font-size:15px}.searchbox input::placeholder{color:var(--muted);opacity:.85}.filters{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.filter{border:1px solid var(--line);border-radius:99px;min-height:36px;padding:4px 13px;font-size:12px;background:var(--panel);color:var(--muted)}.filter[aria-pressed=true]{background:var(--soft);border-color:var(--accent);color:var(--accent);font-weight:700}.favorite-filter{margin-left:auto}.sort-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:12px}.sort-tools select{border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:6px 10px}.sort-tools #visibleCount{margin-left:auto}.sort-tools button{border:0;background:none;text-decoration:underline;color:var(--accent);padding:7px}.storage-message{font-size:12px;color:var(--muted);margin-top:8px}.empty,.noscript{border:1px dashed var(--line);padding:17px;border-radius:var(--radius);color:var(--muted);margin-bottom:15px}
.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.course{min-width:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}.course-visual{height:142px;overflow:hidden;background:var(--soft);border-bottom:1px solid var(--line);padding:12px 12px 0}.course-visual img{display:block;width:100%;height:auto;min-height:150px;object-fit:cover;object-position:top left;border:1px solid var(--line);border-radius:7px 7px 0 0;box-shadow:0 7px 22px #0002}.course-content{display:flex;flex-direction:column;flex:1;padding:15px 17px}.course-kicker{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px;min-height:28px}.favorite{border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--accent);padding:3px 7px;font-size:12px;white-space:nowrap}.favorite[aria-pressed=true]{background:var(--soft)}.favorite span:first-child{font-size:18px;line-height:1;margin-right:3px}.course h3{font-size:19px;margin:8px 0 6px}.subtitle{color:var(--accent);font-size:13px;line-height:1.6}.course-stats{font-size:12px;color:var(--muted);margin:12px 0}.course-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:auto}.cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:7px 13px;min-height:39px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:var(--bg);text-decoration:none;font-size:12px;font-weight:700}.cta:hover{filter:brightness(1.1)}.save-course{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:7px 9px;min-height:39px;font-size:12px}.offline-status{font-size:11px;color:var(--muted)}.course-details{border-top:1px solid var(--line);margin-top:14px;padding-top:9px;font-size:12px}.course-details summary{cursor:pointer;color:var(--accent);font-weight:650}.course-more{color:var(--muted);padding-top:10px}.course-more p{margin:8px 0}.tags{display:flex;gap:5px;flex-wrap:wrap}.tag{border:1px solid var(--line);padding:2px 7px;border-radius:5px}.download-links{display:flex;gap:15px;flex-wrap:wrap;margin:10px 0}.download-links a{color:var(--accent)}
.recent{padding-bottom:17px}.recent-list{display:flex;gap:9px;flex-wrap:wrap}.recent-item{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:9px 12px;flex:1 1 220px;font-size:13px}.recent-item small{font-size:11px;color:var(--muted)}.recent-item a{color:var(--accent);font-weight:700}.routes,.offline,.usage{padding-top:36px}.routes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.route{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:19px}.route p,.offline p,.usage p{font-size:13px;color:var(--muted);margin-top:8px}.route ol{display:flex;gap:22px;flex-wrap:wrap;padding-left:21px;margin:12px 0 0;font-size:13px;color:var(--accent)}.offline{padding-bottom:8px}.usage{padding-bottom:38px}.usage p{max-width:850px}footer{border-top:1px solid var(--line);color:var(--muted);font-size:12px;padding:20px 0}.footer-row{display:flex;justify-content:space-between}.footer-row a{color:var(--accent)}
@media(max-width:1000px){.course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{display:block}.hero-count{margin-top:13px}}
@media(max-width:680px){html{scroll-padding-top:75px}.wrap{padding:0 18px}.nav{min-height:62px}.nav-actions{gap:10px}.nav-actions a[href="#routes"]{display:none}.brand{font-size:13px;gap:7px}.brand img{width:32px;height:32px}.brand small{font-size:8px;letter-spacing:.7px}.hero{padding:19px 0 17px}.hero h1{font-size:34px}.hero .lead{font-size:13px;margin-top:6px}.hero-count{font-size:11px;white-space:normal}.hero-count strong{font-size:13px}.section-heading{padding-top:15px;margin-bottom:12px;display:block}.section-heading p{margin-top:4px}.searchbox{max-width:none}.filters{margin-top:10px}.favorite-filter{margin-left:0}.course-grid{grid-template-columns:1fr;gap:14px}.course-visual{height:150px}.course-content{padding:16px}.routes-grid{grid-template-columns:1fr}.routes,.offline,.usage{padding-top:28px}}
@media(max-width:350px){.wrap{padding:0 13px}.brand small{display:none}.nav-actions{font-size:12px}.filter{padding:4px 10px}.hero h1{font-size:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* Cover shelf: zero-dependency cover flow above the catalog grid. */
.shelf{margin:0 0 22px}.shelf-head{margin-bottom:6px}.shelf-flow{position:relative}.shelf-side{position:absolute;top:50%;transform:translateY(-50%);z-index:150;display:grid;place-items:center;width:54px;height:68px;padding:0;border:0;background:transparent;color:var(--ink);opacity:.75}.shelf-side:hover:not(:disabled){opacity:1;color:var(--accent)}.shelf-side:disabled{opacity:.18;cursor:default}.shelf-side[data-shelf-prev]{left:0}.shelf-side[data-shelf-next]{right:0}.shelf-tri{display:block;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent}.shelf-tri-l{border-right:24px solid currentColor}.shelf-tri-r{border-left:24px solid currentColor}
.shelf-track{--cover-w:300px;display:flex;gap:0;margin:0;padding:16px calc(50% - var(--cover-w)/2) 30px;list-style:none;position:relative;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;perspective:1200px;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none}.shelf-track::-webkit-scrollbar{display:none}.shelf-track.dragging{cursor:grabbing}
.shelf-item{position:relative;flex:0 0 var(--cover-w);min-width:0;scroll-snap-align:center;margin-inline:calc(var(--cover-w)*-.18);list-style:none;transform-style:preserve-3d;z-index:var(--zi,1)}.shelf-item.shelf-start{margin-left:0}.shelf-item.shelf-end{margin-right:0}
/* Receding covers stay fully opaque; --dim (0 at centre, up to .35 at the edges) drives an overlay
   so neighbouring cover titles never bleed through each other. */
.cover::before{content:"";position:absolute;inset:0;background:#151310;opacity:var(--dim,0);pointer-events:none;z-index:3}body.dark .cover::before{background:#000;opacity:calc(var(--dim,0)*1.45)}
/* The 3D transform lives on the cover, not on the snapping list item: scroll-snap areas follow an
   element's transformed box, so transforming the item itself shifted every snap point outward and
   made programmatic and touch scrolls land on the wrong cover. */
.cover{display:block;position:relative;height:calc(var(--cover-w)*4/3);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;background:var(--cover-bg,var(--soft));box-shadow:0 10px 24px #0002;transform:translateX(var(--tx,0px)) translateZ(var(--tz,0px)) rotateY(var(--rot,0deg))}.shelf-item[aria-current] .cover{border-color:var(--accent);box-shadow:0 24px 48px #0004}body.dark .cover{box-shadow:0 10px 24px #0006}body.dark .shelf-item[aria-current] .cover{box-shadow:0 24px 48px #0008}
.cover-mat{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;padding:22px 20px 0;color:var(--cover-ink,var(--ink))}.cover-mat[data-tone=gold]{box-shadow:inset 0 3px 0 var(--focus)}.cover-mat[data-tone=green]{box-shadow:inset 0 3px 0 var(--accent)}
.cover-category{font:11px/1.6 ui-monospace,monospace;text-transform:uppercase;letter-spacing:1px;color:var(--accent)}.cover-title{font-family:"Songti SC","STSong",Georgia,serif;font-size:22px;line-height:1.4;letter-spacing:-.4px;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.cover-meta{font:12px/1.7 ui-monospace,monospace;color:var(--muted)}
.cover-thumb{position:absolute;left:0;bottom:0;width:100%;height:40%;display:block;object-fit:cover;object-position:top left;border-top:1px solid var(--line);-webkit-user-drag:none}.cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;background:linear-gradient(180deg,var(--cover-bg,var(--soft)),transparent 45%,rgba(0,0,0,.08))}
.shelf-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:0}.shelf-dot{width:9px;height:9px;min-height:0;padding:0;border-radius:50%;border:1px solid var(--line);background:transparent}.shelf-dot[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}
.shelf-count{display:none;text-align:center;font:12px/1.7 ui-monospace,monospace;color:var(--muted);margin:4px 0 0}.shelf-countonly .shelf-count{display:block}.shelf-countonly .shelf-dots{display:none}
.shelf-detail{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);padding:17px 19px;margin-top:12px}.shelf-detail h3{margin:8px 0 6px;font-size:21px}.shelf-detail .description{font-size:13px;color:var(--muted);line-height:1.8;margin-top:8px}.shelf-detail .tags{margin-top:12px}.shelf-detail .course-stats{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0}.shelf-detail .download-links{margin:0}.shelf-detail .course-tip{font-size:12px;color:var(--muted);margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.shelf-item[data-category="策略与风险"]{--cover-bg:#e8dcc4;--cover-ink:var(--ink)}.shelf-item[data-category="投资与决策"]{--cover-bg:#d5e1d8;--cover-ink:var(--ink)}.shelf-item[data-category="产业与基础设施"]{--cover-bg:#d9dfe6;--cover-ink:var(--ink)}.shelf-item[data-category="健康与科学"]{--cover-bg:#e3dfd0;--cover-ink:var(--ink)}.shelf-item[data-category="学习与成长"]{--cover-bg:#e6dad9;--cover-ink:var(--ink)}
body.dark .shelf-item[data-category="策略与风险"]{--cover-bg:#3a3222;--cover-ink:#f1e7d2}body.dark .shelf-item[data-category="投资与决策"]{--cover-bg:#213a2f;--cover-ink:#e2eee4}body.dark .shelf-item[data-category="产业与基础设施"]{--cover-bg:#26313d;--cover-ink:#e3e9f0}body.dark .shelf-item[data-category="健康与科学"]{--cover-bg:#33372c;--cover-ink:#eceadd}body.dark .shelf-item[data-category="学习与成长"]{--cover-bg:#3a2e2f;--cover-ink:#f0e4e3}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:1000px){.shelf-track{--cover-w:260px}}
/* Phones: a smaller cover plus a compact panel (category·version, title, subtitle, actions) so the
   shelf does not push the search box and grid a full screen down. */
@media(max-width:680px){.shelf-track{--cover-w:180px;padding:8px calc(50% - var(--cover-w)/2) 16px}.shelf-dots{display:none}.shelf-count{display:block;margin-top:0}.shelf-detail{padding:13px 15px;margin-top:8px}.shelf-detail h3{margin:6px 0 4px;font-size:18px}.shelf-detail .description,.shelf-detail .tags,.shelf-detail .course-stats,.shelf-detail .course-tip{display:none}.shelf-detail .course-actions{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.shelf-track{scroll-behavior:auto}.cover{transform:none!important}.cover::before{opacity:0!important}}