:root{
    --bg:#faf9f7; --card:#ffffff; --ink:#26241f; --sub:#8a8478; --line:#e8e4dc;
    --cur:#4f46e5;  --cur-bg:#eef2ff;  --cur-line:#c7d2fe;
    --v1:#059669;   --v1-bg:#ecfdf5;   --v1-line:#a7f3d0;
    --v2:#d97706;   --v2-bg:#fffbeb;   --v2-line:#fde68a;
    --arrow:#8b85d6;
    --jp-font:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Songti SC",serif;
    --ui-font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans","Microsoft YaHei",sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--ink);font-family:var(--ui-font);line-height:1.7;}

  ruby rt{font-size:53%;color:#a39b8b;letter-spacing:0;font-family:var(--ui-font);}
  body.hide-furi rt{display:none;}

  header.top{position:sticky;top:0;z-index:50;background:rgba(250,249,247,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
  .top-inner{max-width:1120px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .crumb{font-size:12px;color:var(--sub);letter-spacing:.05em;}
  .lesson-no{font-size:13px;color:var(--cur);font-weight:600;}
  nav.tabs{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;align-items:center;}
  nav.tabs a{font-size:13px;color:var(--sub);text-decoration:none;padding:4px 10px;border-radius:6px;}
  nav.tabs a:hover{color:var(--ink);background:#f0ede7;}
  button.ghost{font-size:12px;color:var(--sub);background:none;border:1px solid var(--line);border-radius:6px;padding:3px 10px;cursor:pointer;font-family:var(--ui-font);}
  button.ghost:hover{color:var(--ink);border-color:#cfc9bd;}
  button.ghost.on{color:var(--cur);border-color:var(--cur-line);background:var(--cur-bg);}
  #vv-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#d4d0c8;margin-right:4px;vertical-align:1px;}
  #vv-dot.ok{background:#10b981;}

  .hero{max-width:1120px;margin:0 auto;padding:36px 20px 8px;}
  .hero h1{font-family:var(--jp-font);font-size:30px;font-weight:600;letter-spacing:.02em;}
  .hero h1 .no{color:var(--cur);font-size:20px;margin-right:12px;}
  .hero p{color:var(--sub);font-size:13px;margin-top:6px;}

  .wrap{max-width:1120px;margin:0 auto;padding:16px 20px 80px;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start;}
  main{min-width:0;}

  section{margin-bottom:44px;scroll-margin-top:70px;}
  .sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:8px;}
  .sec-head h2{font-size:17px;font-weight:700;letter-spacing:.04em;}
  .sec-head .en{font-size:12px;color:var(--sub);}

  .hint{font-size:12.5px;color:var(--sub);background:var(--cur-bg);border:1px solid var(--cur-line);border-radius:8px;padding:8px 12px;margin-bottom:16px;}
  .hint b{color:var(--cur);font-weight:600;}

  .sent-block{margin-bottom:4px;}
  .sent{display:inline;font-family:var(--jp-font);font-size:19px;line-height:2.3;cursor:pointer;border-radius:4px;padding:2px 4px;border-bottom:1px dashed #d6d0c4;transition:background .15s;}
  .sent:hover{background:#f3f0e9;}
  .sent.active{background:var(--cur-bg);border-bottom:1px solid var(--cur);}
  .num{color:var(--cur);font-weight:700;font-size:14px;margin-right:8px;font-family:var(--ui-font);}
  .speak{display:inline-block;vertical-align:middle;margin-left:6px;width:22px;height:22px;line-height:20px;text-align:center;font-size:11px;color:var(--sub);background:none;border:1px solid var(--line);border-radius:50%;cursor:pointer;}
  .speak:hover{color:var(--cur);border-color:var(--cur-line);background:var(--cur-bg);}
  .cn{display:block;font-size:13px;color:var(--sub);margin:2px 0 12px 24px;}
  body.hide-cn .cn{display:none;}

  .dlg-group{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:12px;}
  .dlg-label{font-size:12px;font-weight:700;color:var(--cur);margin-bottom:6px;letter-spacing:.1em;}
  .line{display:flex;gap:10px;margin-bottom:2px;}
  .line .sp{flex:none;width:44px;font-size:13px;color:var(--sub);padding-top:8px;text-align:right;}
  .line .body{min-width:0;}
  .scene{font-size:12.5px;color:var(--sub);margin:18px 0 8px;}
  .scene::before{content:"▪ ";color:var(--v2);}

  .g-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:12px;scroll-margin-top:80px;}
  .g-card.flash{animation:flash 1.2s ease;}
  @keyframes flash{0%{background:var(--cur-bg);}100%{background:var(--card);}}
  .g-card h3{font-size:15.5px;font-weight:700;margin-bottom:6px;}
  .g-card h3 .gn{display:inline-block;background:var(--cur);color:#fff;font-size:12px;border-radius:5px;padding:1px 7px;margin-right:8px;vertical-align:2px;}
  .g-card .exp{font-size:13.5px;color:#4b463d;margin-bottom:10px;}
  .g-ex{border-left:3px solid var(--cur-line);padding:2px 0 2px 12px;margin-bottom:8px;}
  .g-ex .jp{font-family:var(--jp-font);font-size:16px;line-height:2;}
  .g-ex .cn2{font-size:12.5px;color:var(--sub);}
  .exjp{cursor:pointer;border-radius:4px;padding:1px 4px;margin-left:-4px;transition:background .15s;}
  .exjp:hover{background:#f3f0e9;}
  .exjp.active{background:var(--cur-bg);}
  td.bform{white-space:nowrap;}
  td.bform b{font-family:var(--jp-font);font-weight:600;}
  td.bform .vr{display:block;font-size:10.5px;color:var(--v1);line-height:1.4;}
  .g-note{font-size:12.5px;color:#92400e;background:var(--v2-bg);border:1px solid var(--v2-line);border-radius:8px;padding:8px 12px;margin-top:6px;}

  .learned-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;}
  details.mini{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;scroll-margin-top:80px;}
  details.mini summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;}
  details.mini summary::-webkit-details-marker{display:none;}
  details.mini .src-tag{margin-left:auto;}
  details.mini .mini-body{margin-top:8px;color:#4b463d;font-size:12.5px;}
  details.mini .mini-body .jp{font-family:var(--jp-font);display:block;margin-top:4px;color:var(--ink);font-size:14.5px;line-height:1.9;}

  .src-tag{flex:none;font-size:11px;border-radius:4px;padding:0 6px;line-height:18px;white-space:nowrap;}
  .src-cur{color:var(--cur);background:var(--cur-bg);border:1px solid var(--cur-line);}
  .src-v1{color:var(--v1);background:var(--v1-bg);border:1px solid var(--v1-line);}
  .src-v2{color:var(--v2);background:var(--v2-bg);border:1px solid var(--v2-line);}

  table.vocab{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:14px;}
  table.vocab th{background:#f4f1ea;font-size:12px;color:var(--sub);font-weight:600;text-align:left;padding:8px 14px;letter-spacing:.08em;}
  table.vocab td{padding:7px 14px;border-top:1px solid #f0ece4;}
  table.vocab td.w{font-family:var(--jp-font);font-size:16px;white-space:nowrap;}
  table.vocab td.k{color:#6b6557;font-size:13px;}
  table.vocab td.p{color:var(--sub);font-size:12px;white-space:nowrap;}
  .vocab-tools{display:flex;gap:10px;margin-bottom:12px;}
  .vocab-tools input{flex:1;max-width:280px;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:13px;background:var(--card);outline:none;font-family:var(--ui-font);}
  .vocab-tools input:focus{border-color:var(--cur-line);}

  aside.panel{position:sticky;top:64px;background:var(--card);border:1px solid var(--line);border-radius:12px;max-height:calc(100vh - 90px);display:flex;flex-direction:column;overflow:hidden;}
  .panel-head{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;}
  .panel-head .t{font-size:13px;font-weight:700;letter-spacing:.06em;}
  .panel-head .close{margin-left:auto;display:none;background:none;border:none;font-size:18px;color:var(--sub);cursor:pointer;line-height:1;}
  .panel-body{padding:14px 16px;overflow-y:auto;}
  .panel-empty{font-size:13px;color:var(--sub);text-align:center;padding:30px 10px;}
  .panel-empty .big{font-size:26px;display:block;margin-bottom:8px;font-family:var(--jp-font);color:var(--cur);}
  .sel-jp{font-family:var(--jp-font);font-size:16.5px;line-height:2.1;background:#f7f5f0;border-radius:8px;padding:10px 12px;}
  .sel-cn{font-size:12.5px;color:var(--sub);margin:6px 2px 10px;}

  .panel-sub{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:.1em;margin:14px 0 8px;display:flex;align-items:center;gap:8px;}
  .panel-sub::after{content:"";flex:1;height:1px;background:var(--line);}

  .inline-ana{background:var(--card);border:1px solid var(--cur-line);border-radius:10px;padding:12px 14px 10px;margin:8px 0 16px;box-shadow:0 2px 10px rgba(79,70,229,.06);animation:anaIn .2s ease;}
  @keyframes anaIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
  .ana-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
  .ana-head .t{font-size:12px;font-weight:700;color:var(--cur);letter-spacing:.08em;}
  .ana-head .x{margin-left:auto;background:none;border:none;color:var(--sub);font-size:15px;cursor:pointer;line-height:1;padding:2px 4px;}
  .ana-head .x:hover{color:var(--ink);}
  .ana-cols{display:grid;grid-template-columns:1fr;gap:10px;}
  .dep-scroll{background:#fcfbf9;border:1px solid var(--line);border-radius:8px;padding:8px 8px 6px;}
  .dep-inner{position:relative;display:flex;flex-wrap:wrap;column-gap:4px;align-items:flex-start;}
  .dep-svg{position:absolute;top:0;left:0;pointer-events:none;}
  .dep-svg g{transition:opacity .12s;}
  .tok2{cursor:default;}
  .tok2{flex:none;text-align:center;padding:3px 6px 4px;border-radius:6px;}
  .tok2:hover{background:#f0ede7;}
  .tok2 .tok-t{display:block;font-family:var(--jp-font);font-size:15.5px;line-height:1.9;white-space:nowrap;}
  .tok2 .tok-p{display:inline-block;font-size:10px;border-radius:3px;padding:0 4px;line-height:15px;margin-top:1px;white-space:nowrap;}
  .dep-hint{font-size:10.5px;color:var(--sub);margin-top:4px;}
  .pos-n{color:#1d4ed8;background:#eff6ff;}
  .pos-p{color:#be123c;background:#fff1f2;}
  .pos-v{color:#047857;background:#ecfdf5;}
  .pos-a{color:#b45309;background:#fffbeb;}
  .pos-d{color:#7c3aed;background:#f5f3ff;}
  .pos-o{color:#57534e;background:#f5f5f4;}
  .pos-legend{font-size:10.5px;color:var(--sub);margin:6px 0 2px;display:flex;flex-wrap:wrap;gap:4px;}
  .pos-legend span{border-radius:3px;padding:0 5px;line-height:16px;}

  .note-list{font-size:12px;color:#4b463d;}
  .note-list .nl{padding:4px 0;border-bottom:1px dashed #f0ece4;}
  .note-list .nl:last-child{border-bottom:none;}
  .note-list .nt{font-family:var(--jp-font);font-weight:600;color:var(--ink);}
  .vbase{display:block;margin-top:2px;font-size:11.5px;color:var(--v1);background:var(--v1-bg);border:1px solid var(--v1-line);border-radius:5px;padding:2px 8px;}
  .vbase b{font-family:var(--jp-font);}

  .ref-card{border:1px solid var(--line);border-radius:9px;margin-bottom:10px;overflow:hidden;}
  .ref-card.cur{border-color:var(--cur-line);}
  .ref-card.v1{border-color:var(--v1-line);}
  .ref-card.v2{border-color:var(--v2-line);}
  .ref-head{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px;font-weight:600;}
  .ref-card.cur .ref-head{background:var(--cur-bg);}
  .ref-card.v1 .ref-head{background:var(--v1-bg);}
  .ref-card.v2 .ref-head{background:var(--v2-bg);}
  .ref-head .arrow{margin-left:auto;color:var(--sub);font-size:11px;transition:transform .15s;}
  .ref-card.open .arrow{transform:rotate(90deg);}
  .ref-body{display:none;padding:10px 12px;font-size:12.5px;color:#4b463d;border-top:1px solid var(--line);}
  .ref-card.open .ref-body{display:block;}
  .ref-body .jp{font-family:var(--jp-font);font-size:15px;line-height:2;color:var(--ink);display:block;margin-top:6px;}
  .ref-body .cn3{color:var(--sub);display:block;margin-bottom:2px;}
  .ref-body a.jump{display:inline-block;margin-top:8px;font-size:12px;color:var(--cur);text-decoration:none;}
  .ref-body a.jump:hover{text-decoration:underline;}
  .legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;padding:10px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--sub);}

  .expr-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:12px;}
  .expr-card h3{font-size:14.5px;margin-bottom:4px;}
  .expr-card .exp{font-size:13px;color:#4b463d;margin-bottom:6px;}

  footer{max-width:1120px;margin:0 auto;padding:0 20px 40px;font-size:11.5px;color:var(--sub);}
  .beian{margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
  .beian a{color:var(--sub);text-decoration:none;}
  .beian a:hover{color:var(--cur);text-decoration:underline;}
  .beian .gongan{display:inline-flex;align-items:center;gap:4px;}
  .beian img{width:16px;height:18px;object-fit:contain;}

  @media (max-width:900px){
    .wrap{grid-template-columns:1fr;}
    aside.panel{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:16px 16px 0 0;max-height:70vh;box-shadow:0 -8px 30px rgba(0,0,0,.12);transform:translateY(105%);transition:transform .25s ease;z-index:60;}
    aside.panel.show{transform:translateY(0);}
    .panel-head .close{display:block;}
    nav.tabs{margin-left:0;}
  }

@media (max-width:700px){
  table.vocab, table.vocab tbody{display:block;width:100%;}
  table.vocab thead{display:none;}
  table.vocab tr{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"w k p btn" "bf bf bf btn" "m m m btn";align-items:baseline;column-gap:8px;padding:8px 12px;border-top:1px solid #f0ece4;}
  table.vocab td{display:block;padding:0;border:none;}
  table.vocab td.w{grid-area:w;}
  table.vocab td.k{grid-area:k;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  table.vocab td.p{grid-area:p;}
  table.vocab td.bform{grid-area:bf;white-space:normal;}
  table.vocab td.bform .vr{display:inline;margin-left:6px;}
  table.vocab td:nth-child(5){grid-area:m;font-size:13px;color:#4b463d;}
  table.vocab td:last-child{grid-area:btn;align-self:center;}
}