:root{
  --bg:#f7f7fb; --card:#ffffff; --ink:#1e293b; --muted:#64748b;
  --accent:#4f46e5; --accent2:#e11d48; --line:#e2e8f0;
  --sidebar:#0f172a; --sidebar-ink:#cbd5e1;
  --radius:14px; --shadow:0 1px 3px rgba(15,23,42,.08), 0 8px 24px rgba(15,23,42,.06);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.65;
}
#app{display:flex; min-height:100vh;}

/* sidebar */
#sidebar{
  width:288px; background:var(--sidebar); color:var(--sidebar-ink);
  position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:40;
  padding:20px 0 40px; transition:transform .25s ease;
}
#sidebar .brand{padding:0 20px 16px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
#sidebar .brand h1{font-size:20px; margin:0; color:#fff; letter-spacing:.5px;}
#sidebar .brand p{margin:4px 0 0; font-size:12px; color:#94a3b8;}
#sbCollapse{background:rgba(255,255,255,.08); color:#cbd5e1; border:none; border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:14px; line-height:1; flex:none; margin-top:2px; font-family:inherit;}
#sbCollapse:hover{background:rgba(255,255,255,.18); color:#fff;}
.home-link{display:block; margin:0 20px 6px; padding:8px 12px; font-size:12.5px; color:#7dd3fc; text-decoration:none; background:rgba(255,255,255,.05); border-radius:8px;}
.home-link:hover{color:#fff; background:rgba(255,255,255,.12);}
.unit{margin-top:2px;}
.unit-label{
  display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left;
  padding:14px 20px 6px; font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:#7dd3fc; font-weight:700; background:none; border:none; cursor:pointer; font-family:inherit;
}
.unit-label:hover{color:#fff;}
.unit-label .caret{font-size:10px; color:#94a3b8; transition:transform .2s;}
.unit.collapsed .caret{transform:rotate(-90deg);}
.unit.collapsed .unit-body{display:none;}
#nav a{
  display:block; padding:7px 20px; color:var(--sidebar-ink); text-decoration:none;
  font-size:13.5px; border-left:3px solid transparent;
}
#nav a:hover{background:rgba(255,255,255,.05); color:#fff;}
#nav a.active{background:rgba(99,102,241,.18); color:#fff; border-left-color:var(--accent);}

/* main */
#main{flex:1; margin-left:288px; padding:0 0 120px; min-width:0;}
#topbar{display:none;}

section.sec{display:none; max-width:1000px; margin:0 auto; padding:0 28px;}
section.sec.active{display:block; animation:fade .3s ease;}
section.sec.active:has(.demo){display:flex; flex-direction:column; gap:16px;}
section.sec.active:has(.demo) .demo{order:1; margin-top:0;}
section.sec.active:has(.demo) .prose{order:2;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

.hero{
  padding:60px 28px 20px; max-width:1000px; margin:0 auto;
}
.hero h1{font-size:34px; margin:0 0 8px; line-height:1.2;}
.hero h1 .grad{background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{color:var(--muted); max-width:640px; margin:8px 0 4px;}

.sec-head{margin:36px 0 12px;}
section.sec.active:has(.demo) .sec-head{margin-bottom:0;}
.badge{
  display:inline-block; font-size:12px; font-weight:700; color:var(--accent);
  background:var(--accent-soft,#eef2ff); padding:3px 12px; border-radius:999px; letter-spacing:.5px;
}
.sec-head h2{font-size:26px; margin:8px 0 0;}
.sec-head .sub{color:var(--muted); font-size:14px;}

.prose{display:flex; flex-direction:column; gap:12px;}
.prose p:not(.why){background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; box-shadow:var(--shadow); margin:0;}
.prose p:not(.why):first-child{border-left:4px solid var(--accent);}
.prose p:not(.why):has(.katex-display){text-align:center;}
.prose .katex{font-size:1.08em;}
.prose .example, .prose .why{margin:0;}
.example{
  background:#fef3c7; border:1px solid #fde68a; border-left:4px solid #f59e0b;
  border-radius:10px; padding:12px 16px;
}
.example b{color:#92400e;}
.why{
  background:#ecfdf5; border:1px solid #a7f3d0; border-left:4px solid #10b981;
  border-radius:10px; padding:10px 16px; font-size:14px; color:#065f46;
}
.key{color:var(--accent); font-weight:700;}

.demo{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 22px; margin-top:16px; box-shadow:var(--shadow);}
.demo h3{margin:0 0 4px; font-size:15px; color:#334155;}
.demo .hint{color:var(--muted); font-size:12.5px; margin:0 0 12px;}
canvas.plot{width:100%; height:380px; display:block; background:#fff; border:1px solid var(--line); border-radius:10px; cursor:grab; touch-action:none;}
canvas.plot.square{width:100%; max-width:440px; height:auto; aspect-ratio:1/1; margin:0 auto;}
.controls{display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:14px; align-items:center;}
.ctl{display:flex; flex-direction:column; font-size:12.5px; color:#475569; gap:4px; min-width:140px;}
.ctl .val{font-weight:700; color:var(--accent);}
input[type=range]{width:100%; accent-color:var(--accent); cursor:pointer;}
select{font-size:13px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:#fff;}
.readout{font-size:14px; color:#334155; margin-top:12px; min-height:22px;}
.readout .katex{font-size:1.05em;}
.eq-line{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px; font-size:15px;}

.roadmap{display:flex; flex-direction:column; gap:0; padding:8px 0;}
.rm-unit{margin-top:18px;}
.rm-unit h3{margin:0 0 8px; font-size:15px; color:var(--accent);}
.rm-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px;}
.rm-item{
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  cursor:pointer; font-size:13.5px; transition:.15s; display:flex; gap:8px; align-items:baseline;
}
.rm-item:hover{border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-1px);}
.rm-item .n{color:var(--accent); font-weight:700; font-size:12px;}

#pager{position:fixed; bottom:0; left:288px; right:0; background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px); border-top:1px solid var(--line); padding:10px 28px; display:flex;
  justify-content:space-between; align-items:center; z-index:30;}
#pager button{
  background:var(--accent); color:#fff; border:none; border-radius:10px; padding:8px 18px;
  font-size:14px; cursor:pointer; font-weight:600;
}
#pager button:disabled{opacity:.35; cursor:not-allowed;}
#pager button.ghost{background:var(--accent-soft,#eef2ff); color:var(--accent);}
#pos{font-size:13px; color:var(--muted);}

#menuBtn{position:fixed; top:14px; left:14px; z-index:50; background:var(--accent); color:#fff;
  border:none; border-radius:8px; width:40px; height:40px; font-size:18px; cursor:pointer; display:none;}
body.sb-collapsed #menuBtn{display:block;}
body.sb-collapsed #sidebar{transform:translateX(-100%);}
body.sb-collapsed #main{margin-left:0;}
body.sb-collapsed #pager{left:0;}

/* 悬浮搜索框 */
#searchBox{position:fixed; top:14px; right:26px; z-index:60; display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  box-shadow:0 2px 12px rgba(15,23,42,.14); width:280px; color:#64748b;}
#searchBox svg{flex:none;}
#searchInput{flex:1; border:none; outline:none; font-size:13.5px; color:var(--ink); background:transparent; min-width:0;}
#searchInput::placeholder{color:#94a3b8;}
#searchResults{position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 10px 30px rgba(15,23,42,.2); overflow:hidden; max-height:440px; overflow-y:auto; display:none;}
#searchResults.show{display:block;}
#searchResults .sr{display:block; width:100%; text-align:left; padding:10px 14px; border:none; background:none;
  cursor:pointer; font-size:13px; border-bottom:1px solid var(--line); font-family:inherit;}
#searchResults .sr:last-child{border-bottom:none;}
#searchResults .sr:hover,#searchResults .sr.sel{background:var(--accent-soft,#eef2ff);}
#searchResults .sr .t{font-weight:700; color:var(--ink);}
#searchResults .sr .u{font-size:11px; color:var(--accent); margin-left:8px; font-weight:600;}
#searchResults .sr .sn{color:var(--muted); font-size:12px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#searchResults .empty{padding:12px 14px; color:var(--muted); font-size:13px;}

/* 总首页 landing */
body.landing{background:linear-gradient(160deg,#f5f7fb 0%,#eef2ff 60%,#fdf2f8 100%); min-height:100vh;}
.landing-wrap{max-width:1080px; margin:0 auto; padding:64px 28px 80px;}
.landing-hero{text-align:center; margin-bottom:12px;}
.landing-hero .kicker{display:inline-block; font-size:13px; letter-spacing:2px; color:var(--muted); margin-bottom:10px;}
.landing-hero h1{font-size:42px; margin:0 0 14px; line-height:1.2;}
.landing-hero h1 .grad{background:linear-gradient(90deg,#4f46e5,#e11d48,#f59e0b,#059669); -webkit-background-clip:text; background-clip:text; color:transparent;}
.landing-hero p{color:var(--muted); max-width:640px; margin:0 auto; font-size:16px;}
.subject-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; margin-top:40px;}
.subject-card{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:26px 22px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow);
  transition:.18s; position:relative; overflow:hidden;
}
.subject-card:hover{transform:translateY(-4px); box-shadow:0 12px 32px rgba(15,23,42,.14);}
.subject-card .emoji{font-size:34px; line-height:1; display:block; margin-bottom:14px;}
.subject-card h2{margin:0 0 6px; font-size:21px;}
.subject-card .tag{font-size:12px; color:#fff; border-radius:999px; padding:3px 11px; display:inline-block; margin-bottom:10px;}
.subject-card p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.6;}
.subject-card .bar{position:absolute; left:0; top:0; bottom:0; width:4px;}
.landing-foot{text-align:center; color:var(--muted); font-size:13px; margin-top:44px;}

@media (max-width:820px){
  #sidebar{transform:translateX(-100%);}
  #sidebar.open{transform:none;}
  body.sb-collapsed #sidebar{transform:translateX(-100%);}
  #main{margin-left:0;}
  #pager{left:0;}
  #menuBtn{display:block;}
  .hero h1{font-size:26px;}
  canvas.plot{height:300px;}
  #searchBox{width:210px; right:12px; padding:7px 12px; top:14px;}
  .landing-hero h1{font-size:30px;}
}