/* Adapted from the mathematics home catalog's design tokens and layout. */
:root{color-scheme:dark;--paper:#000;--bg:#000;--panel:#000;--ink:#eef6f6;--muted:#a6bec8;--line:#29434e;--accent:#9ae5cd;--mint:#9ae5cd;--blue:#8bd9ed}
body{background:var(--bg);color:var(--ink);font-family:"Microsoft JhengHei",system-ui,sans-serif;font-size:16px;line-height:1.7}
.shell{width:min(1180px,calc(100% - 2rem));max-width:1180px;padding:0 32px;margin:auto}
a{color:var(--blue)}a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.top{position:sticky;top:0;z-index:4;background:#000;border-bottom:1px solid var(--line)}
.top .shell{min-height:68px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:center}
.brand{grid-column:1;grid-row:1;color:var(--mint);font-weight:750;font-size:14px;letter-spacing:1px;gap:12px;white-space:nowrap}
.brand-icon{width:36px;height:36px}
.account-links{display:contents}
.account-links a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:7px 14px;font-size:13px;line-height:1.4;text-decoration:none;white-space:nowrap;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:#000}
.account-links a:first-child{grid-column:2;grid-row:1;justify-self:center;border-color:#557079}
.donate-link{gap:.4rem}.donate-link span{font-size:20px;line-height:1}
.account-links .login-link{grid-column:3;grid-row:1;justify-self:end;border-color:var(--line)}
.account-links a:hover{background:#000;border-color:var(--mint);color:var(--mint)}
.hero{max-width:none;padding:48px 0 24px}
h1{font:750 clamp(29px,4vw,43px)/1.35 "Microsoft JhengHei",system-ui,sans-serif;letter-spacing:1px;margin:12px 0 16px}
main>nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 32px}
main>nav a{display:flex;align-items:center;min-width:0;min-height:104px;padding:20px 18px;border:1px solid var(--line);border-radius:13px;background:#000;color:var(--muted);font-size:18px;font-weight:700;line-height:1.5;text-decoration:none}
main>nav a:hover,main>nav a:focus-visible{background:#000;color:var(--mint);border-color:var(--mint)}
section{padding-bottom:40px;scroll-margin-top:100px}
.section-heading{border-top:0;padding:18px 0 20px;align-items:center}
h2{font-size:24px;line-height:1.4;margin:0}
.section-heading>span{font-size:12px;color:var(--muted)}
.courses{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.course{min-width:0;border:1px solid var(--line);border-radius:15px;background:var(--panel);color:var(--ink)}
.course:hover{border-color:#72a395}.course[open]{border-color:var(--mint)}
summary{padding:24px 20px;gap:16px;min-height:104px}
summary strong{font-size:19px;font-weight:700;line-height:1.5}
.count{font-size:12px;color:var(--muted)}.count b{color:var(--mint)}
ol{padding:0 20px 16px}li{border-color:#203845;color:var(--muted);font-size:14px;line-height:1.8}
.skip:focus{z-index:10;background:#000;color:var(--ink)}
@media(max-width:850px){main>nav{grid-template-columns:repeat(2,minmax(0,1fr))}.shell{padding:0 24px}}
@media(max-width:600px){.shell{padding:0 18px}.top .shell{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-top:12px;padding-bottom:12px}.brand{grid-column:1;grid-row:1;font-size:13px;gap:8px}.brand-icon{width:32px;height:32px}.account-links .login-link{grid-column:2;grid-row:1;padding:7px 10px}.account-links a:first-child{grid-column:1/-1;grid-row:2;justify-self:center}.hero{padding:28px 0 18px}main>nav{gap:10px;margin-bottom:24px}main>nav a{padding:16px 13px;min-height:88px;font-size:16px}.courses{grid-template-columns:1fr}summary{padding:20px 17px;min-height:100px}summary strong{font-size:18px}h2{font-size:22px}.section-heading{gap:12px}.section-heading>span{font-size:11px}section{scroll-margin-top:145px}}
@media(max-width:380px){.brand{font-size:12px;gap:6px}.brand-icon{width:30px;height:30px}.account-links .login-link{font-size:12px;padding-inline:8px}}