:root {
  --navy:#0E1E3F; --blue:#1A6FFF; --blue-bg:rgba(26,111,255,.1); --ink:#1c2540;
  --muted:#5e6a85; --rule:#d8dde8; --faint:#e9ecf1; --paper:#fff; --soft:#f6f8fb;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:'DM Sans',sans-serif;background:var(--paper);color:var(--ink);}
a{color:inherit;text-decoration:none;}

/* Header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--faint);padding:0 24px;height:52px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;}
.hdr-l{display:flex;align-items:baseline;gap:14px;min-width:0;}
.brand{font-family:'Lora',serif;font-style:italic;font-weight:600;color:var(--blue);font-size:17px;}
.hdr-tag{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hdr-r{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.btn{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:6px 11px;border-radius:4px;border:1px solid var(--rule);background:#fff;color:var(--muted);cursor:pointer;}
.btn:hover{color:var(--navy);border-color:var(--muted);}
.btn.on{background:var(--blue);color:#fff;border-color:var(--blue);}

/* Section tabs */
.tabs{display:flex;gap:6px;padding:12px 24px;overflow-x:auto;border-bottom:1px solid var(--faint);scrollbar-width:thin;}
.tab{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.06em;padding:6px 10px;border-radius:4px;
  border:1px solid var(--rule);color:var(--muted);background:#fff;}
.tab:hover{background:var(--faint);color:var(--navy);}
.tab.active{background:var(--navy);border-color:var(--navy);color:#fff;}

/* Main */
.wrap{max-width:1180px;margin:0 auto;padding:28px 24px 120px;}
.sec-header{margin-bottom:10px;}
.sec-tag{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:4px;}
.sec-title{font-family:'Lora',serif;font-style:italic;font-weight:700;color:var(--navy);font-size:24px;line-height:1.25;}
.howto{font-size:13px;color:var(--muted);line-height:1.6;margin:10px 0 22px;padding-bottom:18px;border-bottom:2px solid var(--faint);}
.howto b{color:var(--navy);font-weight:600;}

.cols-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:6px;}
.cols-head div{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted);}
.cols-head div:first-child{padding-left:44px;}

.chunk{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:18px 0;border-bottom:1px solid var(--faint);}
.latin .line{display:flex;align-items:baseline;}
.lnum{font-family:'Lora',serif;font-style:italic;font-weight:700;color:var(--blue);font-size:12px;
  width:44px;flex-shrink:0;text-align:right;padding-right:14px;opacity:.85;}
.ltext{font-family:'Lora',serif;font-size:20px;color:var(--navy);line-height:1.7;}
.english{font-family:'Lora',serif;font-size:16px;color:var(--ink);line-height:1.75;padding-top:3px;}

/* Linkable words */
.w,.e{border-radius:3px;cursor:pointer;transition:background .1s,color .1s;}
.w{padding:1px 1px;margin:0 -1px;}
.w:hover{background:var(--blue-bg);}
.e{padding:1px 0;}
.e:hover{background:var(--blue-bg);}
.w.sel,.e.sel{background:var(--blue);color:#fff;box-shadow:0 0 0 2px var(--blue);}

/* Hide English mode */
.hide-en .english{color:transparent;text-shadow:0 0 9px rgba(28,37,64,.45);user-select:none;}
.hide-en .english .e.sel{color:#fff;text-shadow:none;}

/* Tooltip */
.tip{position:fixed;z-index:100;max-width:320px;background:var(--navy);color:#fff;border-radius:8px;
  padding:10px 13px 11px;box-shadow:0 8px 28px rgba(14,30,63,.28);pointer-events:none;
  opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;}
.tip.on{opacity:1;transform:none;}
.tip-form{font-family:'Lora',serif;font-style:italic;font-size:13px;color:rgba(255,255,255,.6);margin-bottom:2px;}
.tip-vocab{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:6px;}
.tip-parse{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#8fb6ff;line-height:1.5;}

/* Prev / next */
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:34px;}
.pager a{display:block;flex:1;max-width:48%;border:1px solid var(--rule);border-radius:8px;padding:12px 14px;}
.pager a:hover{border-color:var(--blue);}
.pager .dir{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-bottom:3px;}
.pager .nm{font-family:'Lora',serif;font-style:italic;font-size:14px;color:var(--navy);}
.pager .next{text-align:right;margin-left:auto;}

@media (max-width:760px){
  .hdr{padding:0 16px;}
  .hdr-tag{display:none;}
  .tabs{padding:10px 16px;}
  .wrap{padding:22px 16px 100px;}
  .cols-head{display:none;}
  .chunk{grid-template-columns:1fr;gap:12px;}
  .lnum{width:32px;padding-right:10px;}
  .ltext{font-size:18px;}
  .english{font-size:15px;padding:10px 12px;background:var(--soft);border-radius:8px;}
}

/* Words the translator added (no Latin equivalent): yellow, with a note */
.sup{cursor:pointer;border-radius:3px;text-decoration:underline dotted #d9a900;text-underline-offset:4px;transition:background .1s;}
.sup:hover{background:#fdf3cf;}
.sup.sel-sup{background:#f5c842;color:var(--navy);box-shadow:0 0 0 2px #f5c842;text-decoration:none;}
.hide-en .english .sup.sel-sup{color:var(--navy);text-shadow:none;}
.tip.note .tip-parse{color:#f5c842;margin-bottom:4px;}
.tip-note{font-size:13.5px;line-height:1.5;}