/* ===== 交互式教程 / 精读笔记 共用样式（沿用系列米黄纸质风） ===== */
:root{
  --xy-bg:#f5eddb; --xy-ink:#232a31; --xy-dim:#6b6255; --xy-line:#ddd2ba;
  --xy-accent:#C0481E; --xy-blue:#3E6B8F; --xy-card:#fffaf0; --xy-green:#2f7d5d;
}
body{margin:0;background:var(--xy-bg);color:var(--xy-ink);
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--xy-blue)}
.xy-topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;
  padding:10px 22px;background:rgba(28,28,28,.96);color:#f7f2e6;
  border-bottom:1px solid rgba(255,255,255,.12);font-size:13px;flex-wrap:wrap}
.xy-topbar a{color:#f7f2e6;text-decoration:none}
.xy-topbar a:hover{color:#FAC94A}
.xy-brand{font-weight:700;color:#FAC94A;margin-right:auto}
.study-wrap{max-width:1080px;margin:0 auto;padding:0 22px 90px}
.study-hero{padding:46px 0 22px}
.study-hero h1{font-size:clamp(28px,4.5vw,44px);margin:0 0 12px;line-height:1.25}
.study-hero p{font-size:16px;line-height:1.85;color:var(--xy-dim);margin:0;max-width:820px}
.study-hero .xy-kicker{color:var(--xy-accent);font-weight:800;letter-spacing:.16em;font-size:12px;margin-bottom:10px}
.study-nav{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 8px;position:sticky;top:44px;z-index:50;
  background:var(--xy-bg);padding:10px 0;border-bottom:1px solid var(--xy-line)}
.study-nav button{border:1px solid var(--xy-line);background:var(--xy-card);color:var(--xy-ink);
  padding:9px 15px;border-radius:999px;cursor:pointer;font-size:13px;font-family:inherit;transition:.15s}
.study-nav button:hover{border-color:var(--xy-accent)}
.study-nav button.active{background:#1c1c1c;color:#fff;border-color:#1c1c1c}
.study-view{display:none;padding-top:24px}
.study-view.active{display:block}
.vol-block{margin:28px 0 40px}
.vol-title{display:flex;align-items:baseline;gap:10px;border-bottom:2px solid var(--xy-ink);
  padding-bottom:9px;margin-bottom:16px}
.vol-title b{font-size:22px;color:var(--xy-accent)}
.vol-title h2{font-size:20px;margin:0}
.vol-title small{margin-left:auto;color:var(--xy-dim);font-size:12px}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.demo-card{background:var(--xy-card);border:1px solid var(--xy-line);border-radius:12px;
  padding:16px 18px;min-width:0}
.demo-card h3{margin:0 0 4px;font-size:16px;line-height:1.4}
.demo-card .demo-meta{font-size:11px;color:var(--xy-accent);font-weight:800;letter-spacing:.06em;margin-bottom:8px}
.demo-card .demo-desc{font-size:12.5px;color:var(--xy-dim);line-height:1.6;margin:0 0 12px}
.demo-body{font-size:13px;line-height:1.7}
.demo-body svg{max-width:100%;height:auto;display:block;background:#fffdf7;border-radius:8px;border:1px solid var(--xy-line)}
.demo-row{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}
.demo-row label{font-size:12px;min-width:76px;color:var(--xy-dim)}
.demo-row input[type=range]{flex:1;min-width:110px;accent-color:var(--xy-accent)}
.demo-row .val{font-family:ui-monospace,Consolas,monospace;font-size:12px;min-width:46px;text-align:right}
.demo-out{background:#f2eee1;border-radius:8px;padding:10px 12px;margin-top:10px;
  font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.demo-btn{border:1px solid var(--xy-line);background:#fff;color:var(--xy-ink);border-radius:7px;
  padding:6px 11px;cursor:pointer;font-size:12px;font-family:inherit;margin:4px 5px 0 0}
.demo-btn:hover{border-color:var(--xy-accent);color:var(--xy-accent)}
.demo-bars{display:flex;align-items:flex-end;gap:6px;height:96px;margin:10px 0 4px}
.demo-bars .bar{flex:1;background:var(--xy-blue);border-radius:4px 4px 0 0;min-height:2px;
  display:flex;align-items:flex-end;justify-content:center;font-size:10px;color:#fff;transition:height .2s}
.demo-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--xy-dim);margin-top:6px}
.demo-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px}
.demo-links{margin-top:12px;padding-top:10px;border-top:1px dashed var(--xy-line);font-size:12px}
.demo-links a{margin-right:12px;text-decoration:none}
/* 自测 */
.quiz-head{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.quiz-head select,.quiz-head button{border:1px solid var(--xy-line);background:var(--xy-card);
  border-radius:8px;padding:8px 12px;font-size:13px;font-family:inherit;cursor:pointer;color:var(--xy-ink)}
.quiz-head button:hover{border-color:var(--xy-accent)}
.qcard{background:var(--xy-card);border:1px solid var(--xy-line);border-radius:12px;padding:16px 18px;margin-bottom:12px}
.qcard .qtag{font-size:11px;color:var(--xy-accent);font-weight:800;letter-spacing:.06em}
.qcard .qtext{font-size:15px;margin:6px 0 12px;line-height:1.7}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qopts button{text-align:left;border:1px solid var(--xy-line);background:#fff;border-radius:8px;
  padding:9px 12px;cursor:pointer;font-size:13px;font-family:inherit;color:var(--xy-ink);line-height:1.5}
.qopts button:hover{border-color:var(--xy-blue)}
.qopts button.sel{background:#e8f1f7;border-color:var(--xy-blue)}
.qopts button.ok{background:#e4f5ec;border-color:var(--xy-green);font-weight:700}
.qopts button.bad{background:#fbe9e3;border-color:var(--xy-accent)}
.qexplain{display:none;margin-top:10px;padding:10px 12px;background:#eef4f8;border-left:3px solid var(--xy-blue);
  border-radius:0 8px 8px 0;font-size:13px;line-height:1.75}
.qexplain.show{display:block}
/* 闪卡 */
.cards-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.cards-tools button,.cards-tools select{border:1px solid var(--xy-line);background:var(--xy-card);
  border-radius:8px;padding:8px 12px;font-size:13px;font-family:inherit;cursor:pointer;color:var(--xy-ink)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.flashcard{perspective:900px;height:170px;cursor:pointer}
.flashcard .inner{position:relative;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}
.flashcard.flipped .inner{transform:rotateY(180deg)}
.flashcard .face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--xy-line);
  border-radius:12px;padding:16px;background:var(--xy-card);font-size:13.5px;line-height:1.7;
  display:flex;flex-direction:column;justify-content:center;overflow:auto}
.flashcard .back{transform:rotateY(180deg);background:#eef4f8}
.flashcard .ctag{position:absolute;top:9px;left:12px;font-size:10px;color:var(--xy-accent);font-weight:800}
.flashcard.known .face.front{border-color:var(--xy-green)}
.flashcard .know{position:absolute;bottom:8px;right:10px;font-size:11px;color:var(--xy-green)}
/* 词典 */
.gloss-search{width:100%;box-sizing:border-box;border:1px solid var(--xy-line);border-radius:9px;
  padding:10px 13px;font-size:14px;font-family:inherit;background:var(--xy-card);color:var(--xy-ink);margin-bottom:14px}
.gloss-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.gloss-item{background:var(--xy-card);border:1px solid var(--xy-line);border-radius:10px;padding:13px 15px}
.gloss-item b{font-size:14px}
.gloss-item .en{font-size:11px;color:var(--xy-dim);margin-left:6px;font-weight:400}
.gloss-item p{font-size:12.5px;line-height:1.7;color:var(--xy-dim);margin:7px 0 0}
.gloss-item a{font-size:11px;text-decoration:none}
/* 仪表盘 */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.dash-stat{background:var(--xy-card);border:1px solid var(--xy-line);border-radius:12px;padding:18px;text-align:center}
.dash-stat b{display:block;font-size:30px;color:var(--xy-accent)}
.dash-stat span{font-size:12px;color:var(--xy-dim)}
.dash-ring{width:150px;height:150px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;
  justify-content:center;background:conic-gradient(var(--xy-accent) calc(var(--p)*1%),#e6dcc4 0);
  font-size:22px;font-weight:800}
.dash-ring>div{width:118px;height:118px;border-radius:50%;background:var(--xy-bg);display:flex;
  align-items:center;justify-content:center;flex-direction:column;font-size:12px;color:var(--xy-dim)}
.dash-ring>div b{font-size:26px;color:var(--xy-ink)}
.dash-tip{background:var(--xy-card);border:1px solid var(--xy-line);border-radius:10px;
  padding:12px 15px;margin-bottom:9px;font-size:13px;line-height:1.7}
/* 精读笔记 */
.notes-toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px;margin:18px 0 30px}
.notes-toc a{display:block;padding:8px 11px;background:var(--xy-card);border:1px solid var(--xy-line);
  border-radius:8px;text-decoration:none;font-size:12.5px;line-height:1.4}
.notes-toc a:hover{border-color:var(--xy-accent)}
.notes-toc a b{color:var(--xy-accent);margin-right:6px}
.note-sec{background:var(--xy-card);border:1px solid var(--xy-line);border-radius:14px;
  padding:24px 28px;margin-bottom:22px;scroll-margin-top:110px}
.note-sec h2{font-size:23px;margin:0 0 8px;line-height:1.35}
.note-sec .note-meta{font-size:12px;color:var(--xy-dim);margin-bottom:14px}
.note-links{margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--xy-line)}
.note-links a{display:inline-block;margin-right:10px;padding:6px 11px;border:1px solid var(--xy-line);
  border-radius:7px;text-decoration:none;font-size:12px;background:#fff}
.note-links a:hover{border-color:var(--xy-accent)}
.note-body{font-size:15px;line-height:1.9}
.note-body h3{font-size:18px;margin:26px 0 10px;padding-left:10px;border-left:3px solid var(--xy-accent)}
.note-body h4{font-size:15.5px;margin:18px 0 8px}
.note-body p{margin:10px 0}
.note-body ul,.note-body ol{padding-left:22px;margin:10px 0}
.note-body li{margin:5px 0}
.note-body blockquote{margin:12px 0;padding:9px 15px;background:#f2eee1;
  border-left:3px solid var(--xy-blue);border-radius:0 8px 8px 0;font-size:13.5px}
.note-body blockquote p{margin:3px 0}
.note-body code{background:#efe7d5;padding:1px 5px;border-radius:4px;font-size:13px}
.note-body pre{background:#1f2429;color:#e9e4d8;border-radius:9px;padding:14px 16px;overflow-x:auto;
  font-size:12.5px;line-height:1.65}
.note-body pre code{background:none;color:inherit;padding:0}
.note-body .table-wrap{display:block;overflow-x:auto;margin:14px 0}
.note-body table{border-collapse:collapse;width:100%;font-size:13px}
.note-body th,.note-body td{border:1px solid var(--xy-line);padding:7px 10px;text-align:left}
.note-body th{background:#efe7d5}
.note-body strong{color:#1b1b1b}
.study-footer{border-top:1px solid var(--xy-line);padding:22px 0;font-size:12.5px;
  color:var(--xy-dim);line-height:1.9}
@media (max-width:720px){
  .study-wrap{padding:0 14px 60px}
  .demo-grid,.qopts,.cards-grid,.gloss-list,.notes-toc{grid-template-columns:1fr}
  .note-sec{padding:18px 16px}
  .study-nav{top:40px}
}