:root{
  --bg:#EFF2EE;
  --surface:#FFFFFF;
  --surface-2:#E6EBE4;
  --ink:#16232A;
  --muted:#5C6B6E;
  --line:#D4DBD2;
  --teal:#1F6F76;
  --teal-dark:#124349;
  --gold:#C08A2E;
  --gold-soft:#F4E7CC;
  --alert:#B33F32;
  --alert-soft:#F6E1DD;
  --radius:14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Noto Sans SC',sans-serif;
  line-height:1.7;
}
h1,h2,h3,.serif{font-family:'Noto Serif SC',serif;}
.mono{font-family:'IBM Plex Mono',monospace;letter-spacing:0.02em;}
a{color:inherit;}

/* ---------- Layout shell ---------- */
.shell{display:flex; min-height:100vh;}
.sidebar{
  width:270px; flex-shrink:0;
  background:var(--teal-dark);
  color:#EAF3F2;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:28px 0 40px;
}
.sidebar-brand{padding:0 22px 20px; border-bottom:1px solid rgba(255,255,255,0.12); margin-bottom:14px;}
.sidebar-brand .eyemark{width:34px;height:34px;display:block;margin-bottom:10px;}
.sidebar-brand h1{font-size:19px; margin:0 0 4px; color:#fff; font-weight:700;}
.sidebar-brand p{font-size:12.5px; color:#9FC3C0; margin:0;}
.nav-group-label{
  font-size:11px; text-transform:uppercase; letter-spacing:0.12em;
  color:#7BAAA6; padding:16px 22px 6px; font-family:'IBM Plex Mono',monospace;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 22px; font-size:14px; color:#D6E7E5;
  cursor:pointer; border-left:3px solid transparent;
  text-decoration:none;
}
.nav-item .num{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#7BAAA6; width:20px; flex-shrink:0;}
.nav-item.active{background:rgba(255,255,255,0.08); border-left-color:var(--gold); color:#fff;}
.nav-item.disabled{color:#5A7C79; cursor:default; pointer-events:none;}
.nav-item.disabled .num{color:#4C6D6A;}
.nav-item:not(.disabled):hover{background:rgba(255,255,255,0.06);}
.soon-tag{font-size:10px; margin-left:auto; background:rgba(255,255,255,0.08); padding:2px 6px; border-radius:20px; color:#8FB6B3;}

.main{flex:1; min-width:0;}
.topbar{
  position:sticky; top:0; z-index:5;
  background:rgba(239,242,238,0.9); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  padding:12px 40px; display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--muted);
}
.topbar a.home-link{color:var(--teal-dark); font-weight:600; text-decoration:none;}
.menu-btn{display:none;}

/* ---------- Hero (homepage) ---------- */
.hero{padding:80px 60px 60px; max-width:980px;}
.hero .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--teal); letter-spacing:0.1em; text-transform:uppercase;}
.hero h1{font-size:44px; line-height:1.25; margin:14px 0 18px; font-weight:900;}
.hero h1 span{color:var(--teal);}
.hero p.lead{font-size:16.5px; color:var(--muted); max-width:640px; margin:0 0 30px;}
.hero-stats{display:flex; gap:28px; flex-wrap:wrap; margin-top:10px;}
.hero-stat{border-left:2px solid var(--gold); padding-left:12px;}
.hero-stat .n{font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; color:var(--teal-dark);}
.hero-stat .l{font-size:12.5px; color:var(--muted);}

/* ---------- Eye diagram ---------- */
.eye-hero{margin:44px 60px 10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; display:flex; gap:36px; align-items:center; flex-wrap:wrap;}
.eye-hero svg{width:340px; height:auto; flex-shrink:0;}
.eye-hero .legend{flex:1; min-width:260px;}
.eye-hero .legend h3{margin:0 0 10px; font-size:16px;}
.legend-row{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13.5px; cursor:pointer;}
.legend-row .dot{width:11px;height:11px;border-radius:50%; flex-shrink:0;}
.legend-row:hover{color:var(--teal-dark);}
.eye-part{transition:opacity .2s;}
.eye-diagram.dim .eye-part{opacity:0.25;}
.eye-diagram.dim .eye-part.active{opacity:1;}

/* ---------- Chapter grid (homepage) ---------- */
.chapter-grid-wrap{padding:10px 60px 60px;}
.chapter-grid-wrap h2{font-size:22px; margin:20px 0 18px;}
.chapter-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px;}
.chapter-card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px;
  text-decoration:none; color:var(--ink); display:block; position:relative; transition:transform .15s, box-shadow .15s;
}
.chapter-card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(18,67,73,0.12); border-color:var(--teal);}
.chapter-card .cnum{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold); font-weight:600;}
.chapter-card h4{margin:8px 0 6px; font-size:16px;}
.chapter-card p{margin:0; font-size:12.5px; color:var(--muted);}
.chapter-card.locked{background:var(--surface-2); border-style:dashed; cursor:default; color:var(--muted);}
.chapter-card.locked:hover{transform:none; box-shadow:none; border-color:var(--line);}
.chapter-card .badge{position:absolute; top:14px; right:14px; font-size:10px; padding:2px 8px; border-radius:20px; background:var(--gold-soft); color:#7A5A1E; font-family:'IBM Plex Mono',monospace;}
.chapter-card.locked .badge{background:rgba(0,0,0,0.06); color:var(--muted);}

/* ---------- Chapters (content pages) ---------- */
.chapter{padding:50px 60px 20px; max-width:980px; scroll-margin-top:70px;}
.chapter-head{border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:30px; display:flex; align-items:baseline; gap:14px;}
.chapter-head .chnum{font-family:'IBM Plex Mono',monospace; font-size:15px; color:var(--gold); font-weight:600;}
.chapter-head h2{font-size:30px; margin:0;}
.section{margin-bottom:36px;}
.section h3{font-size:19px; margin:0 0 12px; color:var(--teal-dark); display:flex; align-items:center; gap:8px;}
.section h3::before{content:""; width:6px; height:6px; background:var(--gold); border-radius:50%; display:inline-block;}
.section p{margin:0 0 12px; font-size:15px;}
.section ul{margin:0 0 12px; padding-left:20px; font-size:15px;}
.section li{margin-bottom:6px;}

.figure{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin:20px 0; text-align:center;}
.figure svg{max-width:100%; height:auto;}
.figure figcaption{font-size:12.5px; color:var(--muted); margin-top:10px; font-family:'IBM Plex Mono',monospace;}

.key-point{background:var(--gold-soft); border-left:4px solid var(--gold); border-radius:0 10px 10px 0; padding:14px 18px; margin:16px 0; font-size:14.5px;}
.key-point .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:5px; font-weight:600;}
.alert-box{background:var(--alert-soft); border-left:4px solid var(--alert); border-radius:0 10px 10px 0; padding:14px 18px; margin:16px 0; font-size:14.5px;}
.alert-box .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--alert); text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:5px; font-weight:600;}

.compare-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:16px 0;}
.compare-card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px;}
.compare-card h4{margin:0 0 8px; font-size:14.5px; color:var(--teal-dark);}
.compare-card p{font-size:13.5px; margin:0; color:var(--muted);}

/* ---------- Quiz ---------- */
.quiz{background:var(--teal-dark); color:#EAF3F2; border-radius:var(--radius); padding:30px 34px; margin:30px 0 10px;}
.quiz-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.quiz-head h3{color:#fff; margin:0; font-size:18px;}
.quiz-progress{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#9FC3C0;}
.q-block{display:none;}
.q-block.active{display:block;}
.q-text{font-size:15.5px; margin-bottom:14px; font-weight:600;}
.q-opt{display:block; width:100%; text-align:left; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); color:#EAF3F2; padding:11px 14px; border-radius:8px; margin-bottom:9px; font-size:14px; cursor:pointer; font-family:inherit;}
.q-opt:hover{background:rgba(255,255,255,0.12);}
.q-opt.correct{background:rgba(105,200,150,0.25); border-color:#69C896;}
.q-opt.wrong{background:rgba(200,105,105,0.25); border-color:#C86969;}
.q-explain{display:none; margin-top:12px; font-size:13.5px; background:rgba(255,255,255,0.08); border-radius:8px; padding:12px 14px; color:#D6E7E5;}
.q-explain.show{display:block;}
.quiz-nav{display:flex; justify-content:space-between; margin-top:20px;}
.quiz-nav button{background:var(--gold); border:none; color:#2A1E08; font-weight:600; padding:9px 18px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:13.5px;}
.quiz-nav button:disabled{opacity:0.35; cursor:default;}
.quiz-nav button.ghost{background:transparent; border:1px solid rgba(255,255,255,0.3); color:#EAF3F2;}
.quiz-result{display:none; text-align:center; padding:10px 0;}
.quiz-result.show{display:block;}
.quiz-result .score{font-family:'IBM Plex Mono',monospace; font-size:34px; color:var(--gold); font-weight:600;}

/* ---------- Chapter footer nav ---------- */
.chapter-footer-nav{display:flex; justify-content:space-between; gap:16px; margin:40px 0; flex-wrap:wrap;}
.chapter-footer-nav a{
  flex:1; min-width:200px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:14px 18px; text-decoration:none; color:var(--ink); font-size:13.5px;
}
.chapter-footer-nav a .lbl{display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); margin-bottom:4px;}
.chapter-footer-nav a:hover{border-color:var(--teal);}
.chapter-footer-nav a.next{text-align:right;}

footer.site-footer{padding:30px 60px 60px; font-size:12.5px; color:var(--muted); max-width:980px;}

@media (max-width: 860px){
  .sidebar{position:fixed; left:-280px; z-index:20; transition:left .25s; box-shadow:6px 0 20px rgba(0,0,0,0.2);}
  .sidebar.open{left:0;}
  .menu-btn{display:inline-flex; align-items:center; gap:8px; background:var(--teal-dark); color:#fff; border:none; padding:8px 14px; border-radius:8px; font-size:13px; cursor:pointer;}
  .hero, .chapter, .chapter-grid-wrap, footer.site-footer{padding-left:24px; padding-right:24px;}
  .eye-hero{margin:30px 24px 10px; flex-direction:column;}
  .hero h1{font-size:30px;}
}