:root{
    --bg:#f5f3ee; --paper:#fffefb; --ink:#2b2b2b; --muted:#6b6b6b;
    --line:#e3ddd0; --accent:#8a6d3b; --accent-soft:#f0e9db;
    --answer:#b5651d; --hl:#fff7e0; --green:#3d7a4e; --card:#fbf7ee;
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Georgia","Songti SC","STSong",serif; line-height:1.85;
    font-size:17px;
  }
  header.top{
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:22px 40px; position:sticky; top:0; z-index:50;
    display:flex; align-items:baseline; gap:24px; flex-wrap:wrap;
  }
  header.top h1{font-size:22px; margin:0; letter-spacing:1px}
  header.top .sub{color:var(--muted); font-size:14px}
  nav.years{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
  nav.years button{
    font-family:inherit; font-size:15px; cursor:pointer;
    border:1px solid var(--line); background:var(--paper); color:var(--ink);
    min-height:44px; padding:6px 16px; border-radius:22px; transition:.2s;
  }
  nav.years button:hover{background:var(--accent-soft)}
  nav.years button.active{background:var(--accent); color:#fff; border-color:var(--accent)}
  nav.years button:focus-visible,.answer-flip:focus-visible,.cloze-option:focus-visible,.reading-option:focus-visible,.flip:focus-visible{
    outline:3px solid rgba(138,109,59,.35); outline-offset:3px;
  }
  .wrap{max-width:1380px; margin:0 auto; padding:36px 28px 120px}
  .toolbar{
    display:flex; gap:16px; align-items:center; margin-bottom:28px;
    padding:14px 20px; background:var(--paper); border:1px solid var(--line);
    border-radius:10px; flex-wrap:wrap;
  }
  .toolbar label{font-size:15px; cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px}
  .section{
    background:var(--paper); border:1px solid var(--line); border-radius:12px;
    padding:30px 34px; margin-bottom:26px; box-shadow:0 1px 3px rgba(0,0,0,.03);
  }
  .section > h2{
    font-size:20px; margin:0 0 6px; color:var(--accent);
    border-bottom:2px solid var(--accent-soft); padding-bottom:10px;
  }
  .section .dir{color:var(--muted); font-size:14px; font-style:italic; margin:10px 0 22px}
  .section .dir.translation-inline{
    margin-top:-16px; color:#3a3a3a; font-family:"Songti SC","STSong",serif;
    font-style:normal;
  }
  .passage{margin:0 0 20px; text-align:justify}
  .passage p{margin:0 0 14px}
  .partb-options{
    margin:0 0 24px; padding:14px 18px; border:1px solid var(--line);
    border-radius:8px; background:var(--card);
  }
  .partb-options-title{margin-bottom:6px; color:var(--accent); font-size:14px; font-weight:bold}
  .partb-option{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:22px; padding:6px 0; border-top:1px solid rgba(227,221,208,.7);
  }
  .partb-option:first-of-type{border-top:0}
  .partb-option-cn{
    color:#3a3a3a; font-family:"Songti SC","STSong",serif;
    border-left:2px solid var(--line); padding-left:14px;
  }
  .partb-options.translation-hidden .partb-option{grid-template-columns:1fr}
  .bilingual-passage{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px;
    align-items:start; margin:0 0 26px;
  }
  .bilingual-passage.translation-hidden,.en-cn.translation-hidden{grid-template-columns:1fr}
  .article-panel{
    min-width:0; padding:20px 22px; border:1px solid var(--line); border-radius:10px;
    background:#fff; text-align:justify;
  }
  .article-panel.translation-panel{background:var(--card)}
  .article-panel .panel-label{
    display:block; margin:0 0 12px; color:var(--accent); font-size:13px;
    font-weight:bold; letter-spacing:1px; text-align:left;
  }
  .article-panel p{margin:0 0 14px}
  .article-panel p:last-child{margin-bottom:0}
  .sync-source,.sync-target{
    padding:4px 8px; margin-left:-8px; margin-right:-8px; border-radius:6px;
    transition:background-color .2s ease,box-shadow .2s ease;
  }
  .sync-source{cursor:default}
  .sync-source.source-highlight{background:rgba(240,233,219,.65)}
  .sync-source:focus-visible{outline:3px solid rgba(138,109,59,.3); outline-offset:2px}
  .sync-target.pair-highlight{
    background:var(--hl); box-shadow:inset 4px 0 0 var(--accent);
  }
  .questions-wrap{max-width:940px; margin:0 auto}
  .subhead{font-weight:bold; margin:24px 0 10px; font-size:17px; color:#4a4a4a}
  .blank{color:var(--accent); font-weight:bold; background:var(--hl); padding:0 3px; border-radius:3px}
  .q{margin:16px 0; padding-left:2px}
  .q .stem{font-weight:600}
  .cloze-q{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:12px 0; padding-top:12px}
  .cloze-options{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px}
  .cloze-option{
    position:relative; min-height:44px; padding:5px 8px; border:1px solid transparent;
    border-radius:7px; background:transparent; color:var(--ink); font:inherit; font-size:17px;
    line-height:1.45; cursor:pointer; touch-action:manipulation; transition:background .18s,border-color .18s;
  }
  .cloze-option:hover,.cloze-option.open{background:var(--accent-soft); border-color:var(--line)}
  .cloze-option.opt-corr.answer-visible{background:var(--hl)}
  .cloze-option .option-letter{font-weight:bold; color:var(--muted)}
  .cloze-option.opt-corr.answer-visible .option-letter{color:var(--answer)}
  .reading-option{
    position:relative; display:block; width:100%; min-height:44px; padding:6px 8px;
    border:1px solid transparent; border-radius:7px; background:transparent; color:var(--ink);
    font:inherit; line-height:1.55; text-align:left; cursor:pointer; touch-action:manipulation;
    transition:background .18s,border-color .18s;
  }
  .reading-option:hover,.reading-option.open{background:var(--accent-soft); border-color:var(--line)}
  .reading-option .option-letter{display:inline-block; width:26px; font-weight:bold; color:var(--muted)}
  .opts li.correct.answer-visible .reading-option .option-letter{color:var(--answer)}
  .option-translation{
    position:absolute; left:50%; bottom:calc(100% + 7px); z-index:20;
    max-width:min(240px,calc(100vw - 24px)); padding:5px 10px; border-radius:7px;
    background:var(--ink); color:#fff; font-family:"Songti SC","STSong",serif;
    font-size:14px; font-weight:normal; line-height:1.4; white-space:nowrap;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translate(-50%,4px); transition:opacity .18s ease,transform .18s ease,visibility .18s;
    box-shadow:0 5px 16px rgba(0,0,0,.16);
  }
  .option-translation::after{
    content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
    border:5px solid transparent; border-top-color:var(--ink);
  }
  .cloze-option.open .option-translation{opacity:1; visibility:visible; transform:translate(-50%,0)}
  .reading-option .option-translation{
    left:34px; width:max-content; max-width:min(420px,calc(100vw - 48px));
    white-space:normal; text-align:left; transform:translate(0,4px);
  }
  .reading-option .option-translation::after{left:17px}
  .reading-option.open .option-translation{opacity:1; visibility:visible; transform:translate(0,0)}
  .opts{list-style:none; padding:0; margin:8px 0 0}
  .opts li{padding:1px 0}
  .opts li.correct.answer-visible{background:var(--hl); border-radius:4px}
  .opts .ltr{display:inline-block; width:26px; font-weight:bold; color:var(--muted)}
  .opts li.correct.answer-visible .ltr{color:var(--answer)}
  .ans{
    color:var(--answer); font-weight:bold; margin-left:8px;
  }
  .ans.hidden{visibility:hidden}
  .cloze-answers{margin-top:20px; padding:14px 18px; background:var(--card);
    border-radius:8px; border:1px dashed var(--line); font-size:15px}
  .cloze-answers b{color:var(--answer)}
  .answer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-top:12px}
  .answer-flip{
    width:100%; padding:0; border:0; border-radius:9px; background:transparent;
    color:inherit; font:inherit; text-align:left; cursor:pointer; perspective:900px;
    touch-action:manipulation;
  }
  .answer-flip-inner{
    display:grid; min-height:64px; transform-style:preserve-3d;
    transition:transform .28s ease;
  }
  .answer-flip.flipped .answer-flip-inner{transform:rotateY(180deg)}
  .answer-face{
    grid-area:1/1; display:flex; flex-direction:column; justify-content:center;
    padding:10px 13px; border:1px solid var(--line); border-radius:9px;
    background:var(--paper); backface-visibility:hidden;
  }
  .answer-back{background:var(--accent-soft); transform:rotateY(180deg)}
  .answer-face strong{color:var(--answer); font-size:14px}
  .answer-text{font-size:14px; line-height:1.5; margin-top:2px}
  .answer-hint{font-size:11px; color:var(--muted); margin-top:3px}
  .q-answer{max-width:620px; margin:10px 0 0}
  .trans{
    margin-top:20px; padding:18px 22px; background:var(--card);
    border-left:4px solid var(--accent); border-radius:0 8px 8px 0;
    font-family:"Songti SC","STSong",serif; color:#3a3a3a; text-align:justify;
  }
  .trans .lbl{font-weight:bold; color:var(--accent); font-family:serif; display:block; margin-bottom:8px; font-size:15px}
  .trans.hidden{display:none}
  .en-cn{display:grid; grid-template-columns:1fr 1fr; gap:24px}
  .en-cn .col h4{margin:0 0 10px; color:var(--muted); font-size:14px; font-weight:normal; letter-spacing:1px}
  .writing-block{margin-bottom:22px}
  .writing-block .sample{margin-top:14px; padding:16px 20px; background:var(--card); border-radius:8px; white-space:pre-wrap; font-size:15.5px}
  .writing-block .sample.hidden{display:none}
  /* flashcards */
  .cards-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin-top:20px}
  .flip{perspective:1000px; min-height:170px; width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer}
  .flip-inner{display:grid; min-height:170px; transition:transform .5s; transform-style:preserve-3d}
  .flip.flipped .flip-inner{transform:rotateY(180deg)}
  .flip-face{grid-area:1/1; position:relative; backface-visibility:hidden; -webkit-backface-visibility:hidden;
    border-radius:12px; padding:16px 16px 30px; display:flex; flex-direction:column; justify-content:center;
    border:1px solid var(--line);}
  .flip-front{background:var(--accent-soft)}
  .flip-front .term{font-size:19px; font-weight:bold; color:var(--accent)}
  .flip-front .tag{font-size:12px; color:var(--muted); margin-top:8px}
  .flip-front .hint{font-size:12px; color:var(--muted); position:absolute; bottom:10px; right:14px}
  .flip-back{background:var(--paper); transform:rotateY(180deg); font-size:14.5px; line-height:1.6}
  .flip-back .cn{font-family:"Songti SC",serif; margin-bottom:8px; color:#333}
  .flip-back .eg{color:var(--muted); font-style:italic; font-size:13px}
  .cat-title{font-size:16px; margin:26px 0 4px; color:#4a4a4a; font-weight:bold}
  /* 单词板块 */
  .vocab-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-top:18px}
  .vocab-card{
    width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit;
    text-align:left; cursor:pointer; perspective:1200px; touch-action:manipulation;
  }
  .vocab-inner{
    display:grid; min-height:100%; transform-style:preserve-3d; transition:transform .4s ease;
  }
  .vocab-card.flipped .vocab-inner{transform:rotateY(180deg)}
  .vocab-face{
    grid-area:1/1; display:flex; flex-direction:column; gap:6px;
    border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:#fff;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }
  .vocab-back{
    background:var(--card); transform:rotateY(180deg);
    justify-content:center; font-family:"Songti SC","STSong",serif;
  }
  .vocab-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
  .vocab-word{font-size:19px; font-weight:bold; color:var(--accent)}
  .vocab-pos{font-size:13px; color:var(--muted); font-style:italic}
  .vocab-cn{font-family:"Songti SC","STSong",serif; color:#333; font-size:15.5px}
  .vocab-eg{
    font-size:14.5px; line-height:1.6; color:#4a4a4a; padding-top:6px;
    border-top:1px dashed var(--line); text-align:justify;
  }
  .vocab-eg b{color:var(--answer); font-weight:bold}
  .vocab-flip-hint{font-size:11px; color:var(--muted); margin-top:4px; text-align:right}
  .vocab-back-lbl{font-size:12px; color:var(--accent); font-weight:bold; margin-bottom:8px; letter-spacing:1px}
  .vocab-back-cn{font-size:15.5px; line-height:1.75; color:#3a3a3a; text-align:justify}
  /* 长短句板块 */
  .sentence-list{margin-top:18px; display:flex; flex-direction:column; gap:16px}
  .sentence-item{
    border:1px solid var(--line); border-radius:10px; padding:16px 20px; background:#fff;
  }
  .sentence-tags{display:flex; gap:8px; margin-bottom:10px}
  .s-type,.s-level{
    display:inline-block; font-size:12px; padding:2px 10px; border-radius:12px; letter-spacing:1px;
  }
  .s-type{color:#fff; background:var(--accent)}
  .s-level{color:var(--accent); background:var(--accent-soft); border:1px solid var(--line)}
  .s-level:empty{display:none}
  .sentence-en{font-size:16.5px; line-height:1.7; text-align:justify; color:var(--ink)}
  .sentence-cn{
    margin-top:10px; font-family:"Songti SC","STSong",serif; color:#3a3a3a;
    font-size:15.5px; line-height:1.7; text-align:justify;
  }
  .sentence-note{
    margin-top:10px; padding:10px 14px; background:var(--card); border-left:3px solid var(--accent);
    border-radius:0 6px 6px 0; font-family:"Songti SC","STSong",serif; color:#4a4a4a;
    font-size:14.5px; line-height:1.65; text-align:justify;
  }
  .sentence-note .note-lbl{font-weight:bold; color:var(--accent); margin-right:8px}
  .translation-block.trans-hidden{display:none}
  /* 点词释义 */
  .gw.has-gloss{
    cursor:pointer; border-bottom:1px dotted rgba(138,109,59,.55); border-radius:2px;
    transition:background .15s;
  }
  .gw.has-gloss:hover{background:var(--accent-soft)}
  .gw.has-gloss.gw-active{background:var(--hl); border-bottom-color:var(--accent)}
  .word-tip{
    position:fixed; z-index:200; max-width:min(260px,calc(100vw - 24px));
    padding:6px 12px; border-radius:8px; background:var(--ink); color:#fff;
    font-family:"Songti SC","STSong",serif; font-size:14.5px; line-height:1.5;
    box-shadow:0 6px 20px rgba(0,0,0,.22); opacity:0; visibility:hidden;
    transform:translateY(4px); transition:opacity .15s ease,transform .15s ease,visibility .15s;
    pointer-events:none;
  }
  .word-tip.show{opacity:1; visibility:visible; transform:translateY(0)}
  .word-tip::after{
    content:""; position:absolute; left:var(--arrow,50%); top:100%; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:var(--ink);
  }
  .word-tip.below::after{top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--ink)}
  footer{text-align:center; color:var(--muted); font-size:13px; padding:30px 20px 60px}
  .src{font-size:12px; color:#a99; margin-top:6px}
  @media(max-width:980px){
    .bilingual-passage,.en-cn{grid-template-columns:1fr}
  }
  @media(max-width:680px){
    .wrap{padding:24px 14px 100px} header.top{padding:16px 18px}
    .section{padding:24px 18px}
    .article-panel{padding:17px 16px}
    .answer-grid{grid-template-columns:1fr}
  }
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important}
  }