/* ===== web pages (notes + videos) ===== */
:root{
  --ink:#1d2433; --muted:#5b6478; --line:#dfe4ee; --bg:#ffffff; --soft:#f4f6fb; --panel:#fafbfd;
  --blue:#1f5fd6; --red:#d12a2a; --green:#1a8a3a; --amber:#b86e00; --violet:#6d3fc0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.page{margin:0;background:var(--bg);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;line-height:1.55}
.page a{color:var(--blue)}
.top{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:10px 24px}
.top .home{font-weight:700;text-decoration:none;color:var(--ink)}
.top .nav{margin-left:auto;display:flex;gap:10px}
.top .nav a{text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:4px 12px;font-size:15px}
.wrap{max-width:1060px;margin:0 auto;padding:28px 24px 80px}
.page h1{font-size:34px;line-height:1.15;margin:6px 0 6px}
.page h2{font-size:26px;margin:44px 0 14px;padding-top:12px;border-top:2px solid var(--line)}
.page h3{font-size:21px;margin:30px 0 10px}
.page h4{font-size:18px;margin:22px 0 8px;color:var(--muted)}
.kicker{color:var(--muted);font-size:15px;text-transform:uppercase;letter-spacing:1px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.toc a{font-size:14px;text-decoration:none;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:3px 12px}
.box{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--panel);margin:12px 0}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.twocol{grid-template-columns:1fr}}

/* video player */
.player{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
@media (max-width:900px){.player{grid-template-columns:1fr}}
.player video{width:100%;border-radius:10px;background:#000;aspect-ratio:16/9}
.clips{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.clips li{border-bottom:1px solid var(--line)}
.clips li:last-child{border-bottom:0}
.clips button{all:unset;cursor:pointer;display:flex;gap:10px;width:100%;padding:9px 12px;font-size:15px;line-height:1.3;box-sizing:border-box}
.clips button:hover{background:var(--soft)}
.clips li.on button{background:#eef3ff;font-weight:600}
.clips .n{color:var(--muted);min-width:34px}
.clips .d{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.tag{font-size:11px;font-weight:700;color:#fff;border-radius:6px;padding:1px 6px;align-self:center}
.tag.elm{background:var(--blue)} .tag.fel{background:var(--green)} .tag.bev{background:var(--violet)} .tag.ism{background:var(--amber)}
.pbar{display:flex;gap:10px;margin-top:8px;align-items:center}
.pbar button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 14px;font-size:15px;cursor:pointer}
.pbar label{font-size:14px;color:var(--muted);margin-left:auto}

/* note content (shares classes with slides) */
.page .tx{margin:8px 0}
.page .big{font-size:20px;font-weight:600;margin:8px 0}
.page .bl,.page .nl{margin:6px 0;padding-left:26px}
.page .eq{font-size:26px;margin:6px 0;overflow-x:auto}
.page .key,.page .res{margin:8px 0}
.page .key .lab,.page .res .lab,.page .rem .lab{font-size:12px}
.page .key{padding:6px 16px;border-width:2px}
.page .res{padding:6px 16px;border-width:2px;gap:16px}
.page .def{font-size:18px;padding:8px 14px;margin:8px 0;border-left-width:5px}
.page .note{font-size:17px;padding:8px 12px;margin:8px 0;gap:10px}
.page .rem{padding:8px 16px;margin:10px 0;border-width:2px}
.page .rem ul{margin:4px 0 0;padding-left:24px}
.page .given span{font-size:20px;padding:1px 10px}
.page .given{margin:8px 0}
.page .tb{font-size:16px;margin:8px 0}
.page .fig{display:block;max-width:100%;width:auto;max-height:420px;margin:10px auto}
.page .row{gap:18px}
.page .row > div{min-width:0}
.page .figs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.page .figs .fig{max-width:min(100%,480px)}
details{border:1px solid var(--line);border-radius:10px;padding:8px 14px;margin:10px 0;background:#fff}
details > summary{cursor:pointer;font-weight:600;color:var(--blue)}
details[open] > summary{margin-bottom:6px}
.q{border:1px solid var(--line);border-radius:12px;padding:10px 16px;margin:10px 0}
.q .qn{font-weight:700;color:var(--muted);margin-right:6px}
.q .zh{font-size:12px;font-weight:700;color:#fff;background:var(--red);border-radius:6px;padding:1px 7px;margin-left:6px}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:12px 0}
.mods a{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--panel)}
.mods a:hover{border-color:var(--blue)}
.mods .mn{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.mods .mt{font-size:19px;font-weight:700;margin:2px 0 4px}
.mods .ms{font-size:15px;color:var(--muted)}
.ftab{width:100%;border-collapse:collapse;font-size:16px}
.ftab td{border-top:1px solid var(--line);padding:6px 8px;vertical-align:middle}
.ftab td:first-child{color:var(--muted);width:34%}
.ftab .eq{font-size:22px;margin:0}
.srcnote{font-size:14px;color:var(--muted)}

/* print */
@media print{
  .top,.player,.pbar,.toc,.noprint{display:none !important}
  body.page{font-size:12pt}
  .wrap{max-width:none;padding:0}
  details{border:0;padding:0}
  details > summary{display:none}
  h2{break-before:auto}
  .q,.box,figure,.fig,.key,.res{break-inside:avoid}
}

/* narrow screens */
.page .im{white-space:normal}
.page .eq{max-width:100%}
.ftab .eq{white-space:normal}
@media (max-width:760px){
  .ftab td{display:block;width:auto !important;border-top:0}
  .ftab tr{display:block;border-top:1px solid var(--line);padding:4px 0}
  .page .tb{display:block;overflow-x:auto}
  .page .eq{font-size:20px}
}

/* shared with slides */





.eq{font-family:"Times New Roman",Times,serif;font-size:50px;line-height:1.5;white-space:nowrap}

.key{max-width:100%;border:3px solid var(--blue);background:#eef3ff;border-radius:16px;padding:10px 26px;display:inline-block;align-self:flex-start}
.key .lab,.res .lab,.rem .lab{font-family:"Helvetica Neue",Arial,sans-serif;font-size:24px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:1px}
.res{max-width:100%;border:3px solid var(--green);background:#ecf8ef;border-radius:16px;padding:10px 26px;display:inline-flex;align-items:center;gap:26px;align-self:flex-start}
.res .lab{color:var(--green)}
.def{font-size:36px;line-height:1.35;border-left:8px solid var(--violet);background:#f5f0ff;padding:12px 20px;border-radius:8px}
.note{display:flex;gap:16px;font-size:34px;line-height:1.35;padding:14px 20px;border-radius:12px;background:var(--soft);border:2px solid var(--line)}
.note .ic{font-weight:700}
.note.warn{background:#fff5e6;border-color:#f3c27a} .note.warn .ic{color:var(--amber)}
.note.zh{background:#fff0f0;border-color:#f2a7a7} .note.zh .ic{color:var(--red)}
.note.fix{background:#fffbe6;border-color:#e8d27a} .note.fix .ic{color:#9a7b00}
.rem{border:3px solid var(--amber);background:#fff8ec;border-radius:16px;padding:14px 26px}
.rem .lab{color:var(--amber)}

.pause{font-size:44px;font-weight:700;color:#fff;background:var(--violet);border-radius:18px;padding:26px 34px;text-align:center}
.given{display:flex;flex-wrap:wrap;gap:12px 18px}
.given span{font-family:"Times New Roman",serif;font-size:40px;background:var(--soft);border:2px solid var(--line);border-radius:10px;padding:2px 16px}
.row{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.tb{border-collapse:collapse;font-size:32px}
.tb th,.tb td{border:2px solid var(--line);padding:8px 16px;text-align:left}
.tb th{background:var(--soft)}
.im{font-family:"Times New Roman",Times,serif;font-size:1.08em;white-space:nowrap}

/* fractions, roots, overline */
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 .12em}
.fr > .nu{border-bottom:2px solid currentColor;padding:0 .15em;line-height:1.15}
.fr > .de{padding:0 .15em;line-height:1.15}
.eq .fr{font-size:.86em}
.sq{white-space:nowrap}
.sqb{border-top:2px solid currentColor;padding:0 .08em}
.ol{text-decoration:overline}
sub,sup{font-size:.62em;line-height:0}

/* title clip */



.sm{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;margin:0 .1em}
.sm .smt,.sm .smb{font-size:.45em}
.sm .smm{font-size:1.25em;line-height:1}








.par{font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700;padding:0 .14em;letter-spacing:-.04em}