:root{
--bg:#eef1f7;
--ink:#0f1522;
--muted:#6f7a8b;
--line:#e4e9f2;
--card:#ffffff;
--blue:#2f5bff; --blue-t:rgba(47,91,255,.07);
--violet:#7c4dff; --violet-t:rgba(124,77,255,.07);
--teal:#0f9b8e; --teal-t:rgba(15,155,142,.07);
--amber:#d97706; --amber-t:rgba(217,119,6,.07);
--indigo:#4f46e5; --indigo-t:rgba(79,70,229,.07);
--pink:#db2777; --pink-t:rgba(219,39,119,.07);
--rose:#e11d48; --rose-t:rgba(225,29,72,.07);
--orange:#ea580c; --orange-t:rgba(234,88,12,.07);
--lime:#65a30d; --lime-t:rgba(101,163,13,.07);
--green:#059669; --green-t:rgba(5,150,105,.07);
--cyan:#0891b2; --cyan-t:rgba(8,145,178,.07);
--slate:#475569; --slate-t:rgba(71,85,105,.07);
--r-lg:22px; --r-md:15px;
--shadow-s:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
--shadow-m:0 2px 4px rgba(16,24,40,.04), 0 12px 28px -8px rgba(16,24,40,.12);
--shadow-l:0 8px 40px -12px rgba(16,24,40,.22);
}
html.dark{
--bg:#0b0e14; --ink:#e9eef7; --muted:#9aa6b8; --line:#232b3a; --card:#151a23;
--blue-t:rgba(88,124,255,.12); --violet-t:rgba(150,110,255,.12);
--teal-t:rgba(40,190,175,.12); --amber-t:rgba(240,160,50,.12);
--shadow-s:0 1px 2px rgba(0,0,0,.4);
--shadow-m:0 2px 4px rgba(0,0,0,.35), 0 14px 32px -10px rgba(0,0,0,.55);
--shadow-l:0 10px 44px -12px rgba(0,0,0,.7);
}
html.dark .tool .tag{color:#aeb9cb;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}
html.dark .lcard a{border-top-color:#26303f}
html.dark .lcard h4{color:#8d99ab}
html.dark .band-h .more{color:#8d99ab}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
background:
radial-gradient(900px 420px at 12% -8%, rgba(47,91,255,.10), transparent 62%),
radial-gradient(760px 380px at 92% 2%, rgba(124,77,255,.10), transparent 60%),
var(--bg);
background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
/* ===== 顶栏 ===== */
.topbar{
position:sticky;top:0;z-index:50;
background:color-mix(in srgb,var(--bg) 82%, transparent);
backdrop-filter:blur(16px) saturate(160%);
border-bottom:1px solid color-mix(in srgb,var(--line) 70%, transparent);
}
.topbar-in{max-width:var(--shell);margin:0 auto;padding:11px clamp(18px,2.2vw,44px);display:flex;align-items:center;gap:16px}
.logo{width:32px;height:32px;cursor:pointer;text-decoration:none;border-radius:9px;flex:none;display:block;overflow:hidden;
box-shadow:0 4px 10px -7px rgba(139,56,48,.6)}
.logo img{display:block;width:100%;height:100%}
.bname{font-size:0.9062rem;font-weight:700;white-space:nowrap}
.bname small{display:block;font-size:0.8125rem;color:var(--muted);font-weight:400;letter-spacing:.3px}
.nav{display:flex;gap:4px;margin-left:8px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
font-size:0.8125rem;color:var(--muted);padding:7px 12px;border-radius:9px;white-space:nowrap;
border:1px solid transparent;transition:.18s;
}
.nav a:hover{color:var(--ink);background:var(--card);box-shadow:var(--shadow-s)}
.nav a.on{color:#fff;background:var(--ink);box-shadow:var(--shadow-m)}
html.dark .nav a.on{background:#e6dcc2;color:#1d1a15}
.tbtn{margin-left:auto;width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--line);
background:var(--card);color:var(--ink);font-size:0.9375rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:var(--shadow-s);transition:.18s}
.tbtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-m)}
.sw{position:relative;display:flex;align-items:center;margin-left:8px;width:230px;flex:none}
.search{width:100%;margin:0;box-sizing:border-box;padding:8px 32px 8px 13px;border-radius:10px;border:1px solid var(--line);
background:var(--card);color:var(--ink);font-size:0.8125rem;font-family:inherit;outline:none;transition:.2s}
.qclear{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:20px;height:20px;padding:0;
border:0;border-radius:50%;background:rgba(0,0,0,.09);color:var(--ink);font-size:13px;line-height:18px;
text-align:center;cursor:pointer;display:none}
.qclear.show{display:block}
.qclear:active{background:rgba(0,0,0,.16)}
html.dark .qclear{background:rgba(255,255,255,.16)}
.nores{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:18px 0 0;padding:16px 18px;
border:1px dashed var(--line);border-radius:14px;background:var(--card);color:var(--muted);font-size:0.875rem}
.nores[hidden]{display:none}
.nores b{color:var(--ink);font-weight:600}
.nores button{margin-left:2px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);
background:transparent;color:var(--blue);font:inherit;font-size:0.8125rem;cursor:pointer}
.nores button:hover{background:var(--blue-t)}
.search:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-t)}
/* ===== 容器 ===== */
:root{--shell:1680px;color-scheme:light dark}
@media (min-width:1024px){ :root{--shell:min(1680px, calc(100vw - 88px))} }
.wrap{max-width:var(--shell);margin:0 auto;padding:26px clamp(18px,2.2vw,44px) 60px}
/* ===== 问候 ===== */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;padding:0 4px}
.hello h1{font-size:clamp(1.25rem,2.4vw,1.6875rem);font-weight:800;letter-spacing:-.4px}
.hello p{font-size:0.8125rem;color:var(--muted);margin-top:4px}
.pill{font-size:0.6875rem;color:var(--muted);background:var(--card);border:1px solid var(--line);
padding:6px 11px;border-radius:999px;box-shadow:var(--shadow-s);white-space:nowrap}
/* ===== 主推 ===== */
.hero{
position:relative;overflow:hidden;border-radius:var(--r-lg);padding:26px 28px;margin-bottom:22px;
background:linear-gradient(115deg,#111a2d 0%,#22335a 45%,#3b4f86 100%);
color:#fff;box-shadow:var(--shadow-l);
display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hero::before{content:"";position:absolute;inset:0;background:
radial-gradient(400px 180px at 88% 10%, rgba(124,161,255,.35), transparent 70%),
radial-gradient(320px 200px at 20% 110%, rgba(124,77,255,.30), transparent 70%)}
.hero::after{content:"";position:absolute;right:-70px;bottom:-90px;width:280px;height:280px;border-radius:50%;
border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 40px rgba(255,255,255,.04)}
.hero>*{position:relative;z-index:1}
.hero .kicker{display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;letter-spacing:1px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);padding:4px 10px;border-radius:999px;margin-bottom:10px}
.hero h2{font-size:clamp(1.1875rem,2.3vw,1.5625rem);font-weight:800;letter-spacing:-.3px;margin-bottom:6px}
.hero .sub{font-size:0.8125rem;color:#c3cfe4;max-width:520px}
.stats{display:flex;gap:22px;margin-top:16px}
.stats div{font-size:0.8125rem;color:#9fb0cc}
.stats b{display:block;font-size:1.1875rem;color:#fff;font-weight:750;letter-spacing:-.3px}
.hero .cta{flex:none;background:#fff;color:#101a2d;font-weight:700;font-size:0.8125rem;padding:12px 20px;border-radius:12px;
box-shadow:0 10px 24px -10px rgba(0,0,0,.6);white-space:nowrap;transition:.18s}
.hero .cta:hover{transform:translateY(-1px)}
/* ===== 区块底板 ===== */
.band{
border-radius:var(--r-lg);padding:18px;margin-bottom:18px;
border:1px solid color-mix(in srgb,var(--accent) 22%, var(--line));
background:
linear-gradient(180deg, color-mix(in srgb,var(--accent) 10%, transparent), color-mix(in srgb,var(--accent) 3%, transparent) 130px, transparent 260px),
var(--card);
box-shadow:var(--shadow-s);
}
section.band{scroll-margin-top:calc(var(--bar-h, 64px) + 18px)}
.band.blue{--accent:var(--blue)}
.band.violet{--accent:var(--violet)}
.band.teal{--accent:var(--teal)}
.band.amber{--accent:var(--amber)}
.band.indigo{--accent:var(--indigo)}
.band.pink{--accent:var(--pink)}
.band.rose{--accent:var(--rose)}
.band.orange{--accent:var(--orange)}
.band.lime{--accent:var(--lime)}
.band.green{--accent:var(--green)}
.band.cyan{--accent:var(--cyan)}
.band.slate{--accent:var(--slate)}
.band-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.band-h .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:0.9375rem;
background:color-mix(in srgb,var(--accent) 12%, transparent);
border:1px solid color-mix(in srgb,var(--accent) 22%, transparent)}
.band-h h3{font-size:0.9062rem;font-weight:750;letter-spacing:-.2px}
.band-h .ic{background:#fff !important;border:1px solid var(--line) !important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(30,26,20,.12)}
.band-h .cnt{font-size:0.8125rem;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%, transparent);
padding:2px 8px;border-radius:999px;font-weight:600}
.band-h .more{margin-left:auto;font-size:0.75rem;color:var(--muted);display:inline-flex;align-items:center;
padding:5px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;
font-family:inherit;line-height:1.35;transition:background .15s ease,color .15s ease,border-color .15s ease}
.band-h .more:hover{color:var(--accent);border-color:var(--accent);background:rgba(0,0,0,.03)}
/* ===== 工具卡 ===== */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.tool{
position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
padding:15px;display:flex;flex-direction:column;gap:8px;min-height:112px;
box-shadow:var(--shadow-s);transition:transform .18s, box-shadow .18s, border-color .18s;overflow:hidden;
}
.tool::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.85}
@media (hover:hover){
.tool:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:color-mix(in srgb,var(--accent) 35%, var(--line))}
}
.tool .ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.0625rem;
background:color-mix(in srgb,var(--accent) 10%, transparent);
border:1px solid color-mix(in srgb,var(--accent) 18%, transparent)}
.tool.cover{justify-content:flex-end;min-height:150px;border:none;color:#fff;
background-size:cover;background-position:center;position:relative;overflow:hidden}
.tool.cover::before{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(6,10,18,.96) 0%,rgba(6,10,18,.86) 45%,rgba(6,10,18,.30) 100%)}
.tool.cover>*{position:relative;z-index:1}
.tool.cover .ic{display:none}
.tool.cover .t{color:#fff;font-size:15px}
.tool.cover .d{color:rgba(255,255,255,.88)}
.tool.cover .tag{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.26);color:#fff}
.tool.cover .prog{height:3px;border-radius:2px;background:rgba(255,255,255,.25);margin-top:6px}
.tool.cover .prog i{display:block;height:100%;border-radius:2px;background:#fff;width:var(--p,0%)}
.tool .ic img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.lcard a .ico img{width:18px;height:18px;border-radius:0;object-fit:contain;vertical-align:middle;display:inline-block}
.lcard a .ico img[src*="scu-logo"]{filter:invert(1)}
html.dark .lcard a .ico img[src*="scu-logo"]{filter:none}
html.dark .lcard a .ico img[src*="fav-nature"]{filter:invert(1)}
html.dark .lcard a .ico img[src*="fav-github"]{filter:invert(1)}
html.dark .lcard a .ico img[src*="fav-geogebra"]{filter:brightness(1.4) saturate(1.15)}
.lcard a .nt{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;font-size:0.6875rem;line-height:1.5;
color:var(--muted);border:1px solid currentColor;opacity:.85;vertical-align:1px}
html.dark .lcard a .nt{color:#9aa6b6}
.band-h .ic img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.tool .t{font-size:0.8438rem;font-weight:700;letter-spacing:-.1px}
.tool .d{font-size:0.8125rem;color:var(--muted)}
.tool .tag{margin-top:auto;font-size:0.6875rem;color:var(--muted);background:color-mix(in srgb,var(--line) 60%, transparent);
border-radius:5px;padding:2px 7px;align-self:flex-start}
/* ===== 书签卡 ===== */
.links{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-s)}
.lcard h4{font-size:0.8125rem;letter-spacing:1.1px;color:var(--muted);padding:12px 14px 7px;font-weight:700;text-transform:uppercase}
.lcard a{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:0.8125rem;
border-top:1px solid color-mix(in srgb,var(--line) 75%, transparent);transition:.15s;min-height:44px}
@media (hover:hover){ .lcard a:hover{background:color-mix(in srgb,var(--accent) 6%, transparent)} }
.lcard a .ico{width:22px;text-align:center;flex:none;font-size:0.875rem}
.lcard a .tx{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lcard a .ar{color:var(--muted);font-size:0.8125rem;opacity:.7}
footer{text-align:center;font-size:0.7812rem;color:var(--muted);padding:26px 0 0;line-height:1.9}
/* ===== 平板 ===== */
@media (max-width:1023px){
.topbar-in{padding:8px 14px;gap:8px;flex-wrap:wrap}
.sw{order:3;width:100%;margin-left:0}
.wrap{padding:18px 16px 44px}
.hero{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
.hero .cta{width:100%;text-align:center}
.grid{grid-template-columns:repeat(2,1fr)}
}
/* ===== 手机 ===== */
@media (max-width:639px){
.hello{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:14px}
.hello h1{font-size:1.1875rem;line-height:1.35}
.pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.6562rem}
.bname{display:none}
/* 导航整体换到第二行，四项等宽铺满，不再需要横滑 */
.topbar-in{flex-wrap:wrap;padding:8px 12px;gap:8px}
.nav{order:4;flex:0 0 100%;width:100%;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;overflow:visible}
/* 搜索框收进第一行，顶栏保持两行、别占太高 */
.sw{order:2;flex:1 1 auto;width:auto;min-width:0;margin-left:0}
.nav a{padding:8px 2px;text-align:center;font-size:0.75rem;white-space:nowrap}
.tbtn{margin-left:0}
.hello h1{font-size:1.25rem}
.band{padding:14px;border-radius:18px}
.grid{grid-template-columns:1fr 1fr;gap:10px}
.tool{min-height:0;padding:13px}
.tool .d{font-size:0.8125rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.links{grid-template-columns:1fr}
.hero{padding:20px;border-radius:18px}
.stats{gap:18px}
.stats b{font-size:1.0625rem}
.search{padding:10px 34px 10px 13px;font-size:0.8125rem}
}
@media (max-width:359px){ .grid{grid-template-columns:1fr} .hello h1{font-size:1.0938rem} .pill{display:none} }
/* 手动深色（用于预览/切换） */
html.dark{
--bg:#0b0e14; --ink:#e9eef7; --muted:#9aa6b8; --line:#232b3a; --card:#151a23;
--blue-t:rgba(88,124,255,.12); --violet-t:rgba(150,110,255,.12);
--teal-t:rgba(40,190,175,.12); --amber-t:rgba(240,160,50,.12);
--shadow-s:0 1px 2px rgba(0,0,0,.4);
--shadow-m:0 2px 4px rgba(0,0,0,.35), 0 14px 32px -10px rgba(0,0,0,.55);
--shadow-l:0 10px 44px -12px rgba(0,0,0,.7);
}
html.dark .tool .tag{color:#aeb9cb;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}
html.dark .lcard a{border-top-color:#26303f}
html.dark .nav a.on{background:#e9eef7;color:#0b0e14}
/* 手动亮色（用于切换与覆盖系统） */
html.light{
--bg:#eef1f7; --ink:#0f1522; --muted:#6f7a8b; --line:#e4e9f2; --card:#fff;
--blue-t:rgba(47,91,255,.07); --violet-t:rgba(124,77,255,.07);
--teal-t:rgba(15,155,142,.07); --amber-t:rgba(217,119,6,.07);
--shadow-s:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
--shadow-m:0 2px 4px rgba(16,24,40,.04), 0 12px 28px -8px rgba(16,24,40,.12);
--shadow-l:0 8px 40px -12px rgba(16,24,40,.22);
}
html.light .nav a.on{background:#0f1522;color:#fff}
/* ================= 纸本皮肤（H 骨架 + taste 配色材质） ================= */
:root{
--bg:#f2ede4;
--ink:#15171b;
--muted:#5f656d;
--line:#d9d2c3;
--card:#fffdf9;
--blue:#1d3f7a; --violet:#5b4a86; --teal:#3f6f5f; --amber:#a8612f;
--indigo:#33456e; --pink:#9c4a5f; --rose:#a8493f; --orange:#a8612f;
--lime:#6b7f3e; --green:#3f6f4a; --cyan:#3c6a72; --slate:#4a5058;
--r-lg:14px; --r-md:11px;
--shadow-s:0 1px 2px rgba(30,26,20,.16), 0 1px 1px rgba(30,26,20,.08);
--shadow-m:0 2px 4px rgba(30,26,20,.10), 0 14px 28px -18px rgba(30,26,20,.45);
--shadow-l:0 4px 8px rgba(30,26,20,.10), 0 26px 50px -26px rgba(30,26,20,.50);
--seal:#b03a33;
}
body{
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
background:var(--bg) fixed;
color:var(--ink);
padding-top:0;
}
body::before{
content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
background-image:url("data:image/svg+xml;utf8,");
}
h1,h2,h3,.hero .t,.band-h h3,.bname{font-family:"Songti SC","Noto Serif SC","Source Han Serif SC",serif}
/* 顶栏：压在纸上的木牌 */
.topbar{
background:linear-gradient(180deg,rgba(246,242,234,.97),rgba(242,237,228,.92)) !important;
border-bottom:1px solid var(--line) !important;
box-shadow:0 1px 0 rgba(255,255,255,.65), 0 8px 18px -18px rgba(30,26,20,.7) !important;
backdrop-filter:blur(6px) saturate(1.05);
}
.topbar .bname{font-size:1.0625rem;font-weight:700;letter-spacing:.4px}
.topbar .bname{cursor:pointer;border-radius:8px}
.topbar .bname:focus-visible,.topbar .logo:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.topbar nav a{border-radius:8px}
.topbar nav a:hover{background:var(--card);border-color:var(--line);box-shadow:var(--shadow-s)}
[aria-current="page"],.topbar nav a.active{
background:var(--card) !important;color:#1d3f7a !important;font-weight:600;
border:1px solid #cbbfa9 !important;
box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(30,26,20,.16) !important;
}
.searchbox,.topbar input[type=search]{
background:var(--card) !important;border:1px solid #c4bba8 !important;
box-shadow:inset 0 1px 3px rgba(30,26,20,.10) !important;
}
/* 问候与推荐 */
.hello h1{letter-spacing:.6px;font-weight:700}
.pill{
background:var(--card) !important;border:1px solid #cbbfa9 !important;color:#3f444b !important;
box-shadow:var(--shadow-s);border-radius:999px;
}
/* 主推卡：像一块深色布面精装书 */
.hero{
background:
radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.10), transparent 58%),
linear-gradient(158deg,#1b2432 0%,#223141 48%,#2c4257 100%) !important;
border:1px solid #10161f !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 8px rgba(20,18,14,.22), 0 30px 60px -30px rgba(20,18,14,.75) !important;
}
.hero .cta{
background:linear-gradient(180deg,#fdfbf6,#efe9dc) !important;color:#15171b !important;
box-shadow:inset 0 1px 0 #fff,0 2px 5px rgba(0,0,0,.3) !important;border-radius:9px !important;
}
.hero .cta:active{transform:translateY(1px)}
/* 分区托盘 */
.band{
background:linear-gradient(180deg,#fdfaf4,#f9f4e9) !important;
border:1px solid var(--line) !important;border-bottom-color:#c9c0ae !important;
box-shadow:0 2px 3px rgba(30,26,20,.08),0 22px 44px -26px rgba(30,26,20,.5),
inset 0 1px 0 rgba(255,255,255,.45), inset 0 3px 10px rgba(30,26,20,.045) !important;
}
.band-h .ic{background:#fff !important;border:1px solid var(--line) !important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(30,26,20,.12)}
.band-h .cnt{background:#fff !important;border:1px solid var(--line) !important;color:var(--accent) !important}
.band-h h3{letter-spacing:.4px}
.band-h .more{color:#5f656d}
.band-h .more:hover{color:var(--accent)}
/* 封面卡：纸卡 + 接触阴影 */
.tool{
background-color:var(--card) !important;
border:1px solid #ded7c8 !important;
box-shadow:0 2px 3px rgba(30,26,20,.16),0 14px 26px -18px rgba(30,26,20,.6),inset 0 1px 0 rgba(255,255,255,.38) !important;
}
.tool:hover{transform:translateY(-2px);box-shadow:0 4px 7px rgba(30,26,20,.16),0 26px 46px -26px rgba(30,26,20,.62),inset 0 1px 0 #fff !important}
.tool.cover{border:0 !important;
box-shadow:0 0 0 1px rgba(30,26,20,.13),0 2px 3px rgba(30,26,20,.16),0 14px 26px -18px rgba(30,26,20,.6) !important}
.tool.cover:hover{box-shadow:0 0 0 1px rgba(30,26,20,.16),0 4px 7px rgba(30,26,20,.16),0 26px 46px -26px rgba(30,26,20,.62) !important}
.tool.cover .tag{background:rgba(18,22,28,.42) !important;border:1px solid rgba(255,255,255,.18) !important;color:#fdfbf6 !important;font-weight:500;backdrop-filter:blur(2px)}
.tool.cover .d{color:rgba(255,253,249,.86) !important}
/* 链接卡 */
.lcard{
background:var(--card) !important;border:1px solid #ded7c8 !important;
box-shadow:0 1px 2px rgba(30,26,20,.12),0 10px 20px -16px rgba(30,26,20,.5),inset 0 1px 0 rgba(255,255,255,.38) !important;
border-radius:var(--r-md) !important;
}
.lcard h4{color:#6d6a60;letter-spacing:.9px}
.lcard a{border-top:1px solid #efeade !important}
.lcard a:hover{background:#faf7f0}
.lcard a .ico{filter:saturate(.85)}
/* 方块图标自带底色，深浅色都不用反相 */
.lcard a .ico img[src^="data:image"]{filter:none}
html.dark .lcard a .ico img[src^="data:image"]{filter:brightness(1.5) saturate(1.05)}
footer{color:#6f6a5f;border-top:1px solid #d4cbb9}
/* 深色模式保持同一套纸感 */
html.dark{
--bg:#141312; --ink:#f2eee6; --muted:#a9a49a; --line:#2c2a26; --card:#1c1a17;
--shadow-s:0 1px 2px rgba(0,0,0,.5); --shadow-m:0 2px 4px rgba(0,0,0,.4),0 16px 30px -18px rgba(0,0,0,.7);
--shadow-l:0 6px 44px -18px rgba(0,0,0,.85);
}
html.dark body{background:#141312 fixed}
html.dark .band{background:linear-gradient(180deg,#1f1d19,#1a1815) !important;border-color:#302d28 !important}
html.dark .tool,html.dark .lcard{background-color:#211f1b !important;border-color:#332f29 !important}
html.dark .lcard a{border-top-color:#2b2823 !important}
html.dark .lcard a:hover{background:#26231e}
html.dark .topbar{background:linear-gradient(180deg,rgba(20,19,18,.97),rgba(20,19,18,.92)) !important}
/* 主推卡改为布面精装书：去掉光晕与圆环，用织纹 */
.hero::before{
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px),
repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 4px) !important;
opacity:1 !important;
}
.hero::after{display:none !important}
.hero{
background:linear-gradient(155deg,#1e2a38 0%,#233245 55%,#2a3d52 100%) !important;
}
/* 封面卡文字：手机上两行截断，避免切字 */
.tool.cover .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tool.cover .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
@media (max-width:640px){
.topbar-in{gap:12px} /* 飞燕方块与主题按钮之间留点呼吸 */
.tool.cover{min-height:132px}
.tool.cover .t{font-size:.9375rem}
}
/* 覆盖主题脚本的 html.light / html.dark（优先级高于 :root） */
html.light{
--bg:#f2ede4; --ink:#15171b; --muted:#5f656d; --line:#d9d2c3; --card:#fffdf9;
--blue:#1d3f7a; --violet:#5b4a86; --teal:#3f6f5f; --amber:#a8612f;
--indigo:#33456e; --pink:#9c4a5f; --rose:#a8493f; --orange:#a8612f;
--lime:#6b7f3e; --green:#3f6f4a; --cyan:#3c6a72; --slate:#4a5058;
--blue-t:rgba(29,63,122,.06); --violet-t:rgba(91,74,134,.06);
--teal-t:rgba(63,111,95,.06); --amber-t:rgba(168,97,47,.06);
--shadow-s:0 1px 2px rgba(30,26,20,.16),0 1px 1px rgba(30,26,20,.08);
--shadow-m:0 2px 4px rgba(30,26,20,.10),0 14px 28px -18px rgba(30,26,20,.45);
--shadow-l:0 4px 8px rgba(30,26,20,.10),0 26px 50px -26px rgba(30,26,20,.50);
}
html.dark{
--bg:#141312; --ink:#f2eee6; --muted:#a9a49a; --line:#2c2a26; --card:#1c1a17;
--blue:#7f9ecb; --violet:#a795c4; --teal:#8fb8a8; --amber:#c99566;
}
html.light body{background:#f2ede4 !important}
html.dark body{background:#141312 !important}
/* 收尾：把纯白也调暖，压低刺眼图标 */
html.light{--card:#fffdf8;color-scheme:light}
.topbar input[type=search],.searchbox{
background:#fbf7ee !important;border-color:#c9bda6 !important;
}
.band{background:linear-gradient(180deg,#fdfaf4,#f9f4e9) !important}
.lcard,.tool{background-color:#fdfaf3 !important}
/* 卡片与纸底差 1/255 时会看起来“透明”，只留一根边线；提亮到接近纯白并把接触阴影加深一档 */
html.light .band .lcard,html.light .band .tool{box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(30,26,20,.10),0 6px 14px -8px rgba(30,26,20,.22) !important}
.tool.cover .tag{background:rgba(28,24,18,.46) !important;border:1px solid rgba(255,255,255,.30) !important;color:#fdfaf3 !important;backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px)}
.tool.cover .tag.live{background:rgba(47,107,69,.62) !important}
/* 主题按钮：去掉刺眼的亮黄 */
.theme-btn,.topbar .theme,.topbar button[aria-label*="主题"]{filter:sepia(.35) saturate(.65) brightness(.95)}
/* 导航选中改深藏蓝，与主推卡呼应 */
html.light [aria-current="page"],html.light .topbar nav a.active{
background:#1b2a3a !important;color:#f7f2e6 !important;border-color:#16222f !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 5px rgba(20,24,30,.3) !important;
}
/* ============ 深色模式：同一套纸感的夜间版本 ============ */
html.dark body{background:#141312 !important;color:#f2eee6}
html.dark .topbar{
background:linear-gradient(180deg,rgba(26,25,23,.98),rgba(22,21,19,.94)) !important;
border-bottom:1px solid #2e2b26 !important;
box-shadow:0 1px 0 rgba(255,255,255,.04),0 10px 24px -20px rgba(0,0,0,.9) !important;
}
html.dark .topbar .bname{color:#f2eee6}
html.dark .topbar nav a{color:#b8b2a6}
html.dark .topbar nav a:hover{background:#242220;border-color:#332f29;color:#f2eee6;box-shadow:none}
html.dark [aria-current="page"],html.dark .topbar nav a.active{
background:#2b3a4d !important;color:#e8eef8 !important;border:1px solid #3a4c63 !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.5) !important;
}
html.dark .searchbox,html.dark .topbar input[type=search]{
background:#221f1c !important;border-color:#3a352e !important;color:#f2eee6 !important;
box-shadow:inset 0 1px 3px rgba(0,0,0,.5) !important;
}
html.dark .pill{
background:#221f1c !important;border-color:#3a352e !important;color:#d8d2c6 !important;box-shadow:none;
}
html.dark .band{
background:linear-gradient(180deg,#1f1d1a,#1b1917) !important;
border-color:#302c26 !important;border-bottom-color:#3a352e !important;
box-shadow:0 2px 3px rgba(0,0,0,.5),0 22px 44px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html.dark .band-h .ic{background:#262320 !important;border-color:#3a352e !important;box-shadow:none}
html.dark .band-h .ic img{filter:invert(.85) sepia(.15) saturate(.6)}
html.dark .band-h .cnt{background:#262320 !important;border-color:#3a352e !important;color:#c8d6ea !important}
html.dark .band-h .more{color:#b6b0a4}
html.dark .tool,html.dark .lcard{
background-color:#2a2724 !important;border-color:#413b33 !important;
box-shadow:0 1px 2px rgba(0,0,0,.55),0 16px 30px -20px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html.dark .tool:not(.cover) .t{color:#f2eee6}
html.dark .tool:not(.cover) .d{color:#a9a49a}
/* 封面卡在深色下提亮，避免和托盘糊在一起 */
html.dark .tool.cover{
border-color:rgba(255,255,255,.16) !important;
filter:brightness(1.12) saturate(1.04);
box-shadow:0 0 0 1px rgba(0,0,0,.55),0 16px 30px -20px rgba(0,0,0,1) !important;
}
html.dark .tool.cover:hover{filter:brightness(1.2) saturate(1.08)}
html.dark .lcard{background-color:#2b2825 !important;border-color:#453f37 !important}
html.dark .lcard a{border-top:1px solid #3d372f !important;color:#e6e0d4}
html.dark .lcard a:hover{background:#282521}
html.dark .lcard h4{color:#a49d90}
html.dark footer{color:#a8a296;border-top:1px solid #332f29}
html.dark .hello h1{color:#f4f0e8}
html.dark .pill{color:#e6e0d4 !important;border-color:#3a352e !important}
/* 修正：H 用的是 .nav a.on，不是 aria-current */
html.light .nav a.on,html.light .topbar nav a.on{
background:#1b2a3a !important;color:#f7f2e6 !important;border:1px solid #16222f !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 5px rgba(20,24,30,.3) !important;
}
html.dark .nav a.on,html.dark .topbar nav a.on{
background:linear-gradient(180deg,#efe6cf,#e2d7ba) !important;color:#20180f !important;border:1px solid #f7efdb !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 8px rgba(0,0,0,.45) !important;font-weight:600 !important;
}
/* 深色下主推卡按钮不再纯白 */
html.dark .hero .cta{background:linear-gradient(180deg,#efe8d8,#dfd6c2) !important;color:#1a1d22 !important}
/* 深色下次级文字提亮 */
html.dark{--muted:#b3ada1;color-scheme:dark}
html.dark .tool.cover .d{color:rgba(250,246,236,.90) !important}
html.dark .tool.cover .tag{background:rgba(8,12,16,.66) !important;border-color:rgba(255,255,255,.26) !important;color:#fdfaf2 !important;font-weight:500}
html.dark .tool.cover .tag.live{background:rgba(40,92,62,.62) !important}
/* 搜索框加放大镜 */
.topbar input[type=search]{
padding-left:2.1rem !important;
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important;background-position:11px center !important;
}
html.dark .topbar input[type=search]{
background-image:url("data:image/svg+xml;utf8,") !important;
}
/* ===== 方案 A：学习资料 + 我的工具 左右并排（仅大屏且够高） ===== */
.tool.more{display:none;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;
border:1px dashed #c9bda6;background:transparent;box-shadow:none;color:#4a4f58}
.tool.more b{font-family:"Songti SC",serif;font-size:1.375rem;line-height:1.1}
.tool.more span{font-size:.75rem;color:#6f6a5f}
@media (min-width:1024px){
/* 宽屏下导航居中，避免左侧导航与右侧搜索之间出现大片真空 */
.nav{margin-left:auto;margin-right:auto}
.tbtn{margin-left:0}
.sw{width:clamp(200px,14vw,270px)}
}
@media (min-width:1100px) and (min-height:520px){
#sections{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
#sections > section{grid-column:1 / -1}
#sections > #study,#sections > #tools{grid-column:span 1;display:flex;flex-direction:column}
#study .grid,#tools .grid{grid-template-columns:repeat(2,minmax(0,1fr));flex:1}
#study [data-extra],#tools [data-extra]{display:none !important}
#study .tool.more,#tools .tool.more{display:flex}
#study .band-h .more,#tools .band-h .more{margin-left:auto}
}
html.dark .tool.more{border-color:#3f3a31;color:#cfc9bd}
html.dark .tool.more span{color:#a09a8e}
/* ===== 背景方格：大格与小格共用同一 256px 网格，保证线条咬合 ===== */
body::after{
content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
background-image:
linear-gradient(to right, rgba(69,45,26,.20) 1px, transparent 1px),
linear-gradient(to bottom, rgba(69,45,26,.20) 1px, transparent 1px),
repeating-linear-gradient(to right, rgba(69,45,26,.10) 0 1px, transparent 1px 64px),
repeating-linear-gradient(to bottom, rgba(69,45,26,.10) 0 1px, transparent 1px 64px);
background-size:256px 256px;
background-position:var(--gx,0) var(--gy,0);
}
html.dark body::after{
background-image:
linear-gradient(to right, rgba(196,150,104,.16) 1px, transparent 1px),
linear-gradient(to bottom, rgba(196,150,104,.16) 1px, transparent 1px),
repeating-linear-gradient(to right, rgba(196,150,104,.08) 0 1px, transparent 1px 64px),
repeating-linear-gradient(to bottom, rgba(196,150,104,.08) 0 1px, transparent 1px 64px);
background-size:256px 256px;
background-position:var(--gx,0) var(--gy,0);
}
/* 内容浮在格线之上 */
.hello,.hero,#sections,footer,.topbar-in,.wrap{position:relative; z-index:1}
.topbar{z-index:30}
/* ===== 全部：模态弹窗 ===== */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}
.modal-mask{position:absolute;inset:0;background:rgba(30,25,18,.5);opacity:0;transition:opacity .18s ease}
.modal-card{position:relative;width:min(920px,92vw);max-height:min(80vh,780px);display:flex;flex-direction:column;
background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
box-shadow:0 30px 70px -30px rgba(30,24,16,.45),0 2px 6px rgba(30,24,16,.12);
transform:translateY(10px) scale(.995);opacity:0;transition:transform .2s ease,opacity .18s ease}
.modal.on .modal-mask{opacity:1}
.modal.on .modal-card{transform:none;opacity:1}
.modal-h{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:14px 18px;
background:var(--card);border-bottom:1px solid var(--line)}
.modal-h h3{margin:0;font-size:1.0625rem;font-weight:600}
.m-ic{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:9px;background:rgba(20,18,14,.06)}
.m-ic img{width:100%;height:100%;object-fit:contain;display:block}
.m-cnt{font-size:.75rem;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.m-x{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;
color:var(--ink);font-size:.95rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.m-x:hover{background:rgba(20,18,14,.06)}
.modal-b{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:16px 18px 22px}
.m-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-links{grid-template-columns:repeat(2,minmax(0,1fr))}
html.dark .modal-mask{background:rgba(0,0,0,.62)}
html.dark .modal-card{background:#262320;border-color:#4a433a;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 30px 70px -30px #000}
html.dark .modal-h{background:#252220;border-bottom-color:#3b352d}
html.dark .m-ic{background:rgba(255,255,255,.07)}
html.dark .m-x:hover{background:rgba(255,255,255,.08)}
@media (max-width:1023px){ .m-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:639px){
.modal{align-items:flex-end}
.modal-card{width:100%;height:66vh;max-height:66vh;border-radius:20px 20px 0 0;transform:translateY(18px)}
.modal-h{padding:12px 14px}
.modal-b{padding:12px 14px calc(20px + env(safe-area-inset-bottom,0px))}
.m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.m-links{grid-template-columns:1fr}
/* 抽屉固定占下三分之二，内容少时让卡片撑满，不留大片空白 */
.modal-b{display:flex;flex-direction:column}
.m-grid,.m-links{flex:1 1 auto}
.m-grid{grid-auto-rows:minmax(112px,172px);align-content:center}
}
@media (prefers-reduced-motion: reduce){ .modal-card,.modal-mask{transition:none} }
/* ===== 横屏 / 窄屏平板：顶栏单行 + 搜索并入右侧 ===== */
@media (min-width:640px) and (max-width:1023px){
.topbar-in{flex-wrap:nowrap;gap:10px}
.topbar .logo{order:1;width:35px;height:35px;border-radius:10px;margin-right:2px;transform:translateY(-1.5px)}
.topbar .bname{order:2;font-size:1rem;line-height:1.25;margin-right:12px}
.topbar .bname small{font-size:.75rem;line-height:1.25;letter-spacing:.2px}
.topbar .nav{order:3;margin-left:0;gap:2px;min-width:0}
.topbar .sw{order:4;flex:1 1 150px;width:auto;min-width:110px;margin-left:6px}
.topbar .tbtn{order:5;margin-left:0}
}
/* ===== 标志与两行文字等高（宽屏） ===== */
@media (min-width:1024px){
.topbar .bname{line-height:1.25}
.topbar .bname small{line-height:1.25}
.topbar .logo{width:38px;height:38px;border-radius:11px;transform:translateY(-1.5px)}
}