/* FreeBody: engineering computation pad + textbook typography */
:root{--paper:#eef2e6;--paper2:#f6f8f1;--grid:rgba(70,110,80,.13);--grid2:rgba(70,110,80,.06);--ink:#17201b;--ink2:#3c4741;--mut:#6b766f;--rule:#c9d3c3;--acc:#1f5fbf;--acc2:#1f5fbf;--pen:#c8322a;--ok:#1d7a46;--no:#c8322a;
  --s:'Source Serif 4','Iowan Old Style',Georgia,serif;--m:'IBM Plex Mono',ui-monospace,monospace;--h:'Caveat',cursive}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--s);font-size:18px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px}
a{color:inherit}
::selection{background:color-mix(in srgb,var(--acc) 25%,transparent)}
.wrap{max-width:1100px;margin:0 auto;padding:0 28px}
.kick{font-family:var(--m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.muted{color:var(--mut)}
/* nav */
nav.top{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 28px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--s);font-weight:700;font-size:1.15rem;text-decoration:none;letter-spacing:-.01em}
.fbd{width:20px;height:20px;border:2px solid var(--ink);position:relative;display:inline-block}
.fbd::before,.fbd::after{content:"";position:absolute;background:var(--pen)}
.fbd::before{width:2px;height:10px;left:7px;top:-11px}.fbd::after{width:10px;height:2px;left:17px;top:7px}
.crs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.crs a{font-family:var(--m);font-size:.7rem;text-decoration:none;color:var(--ink2);padding:7px 11px;white-space:nowrap;border-bottom:2px solid transparent}
.crs a:hover,.crs a.on{color:var(--ink);border-color:var(--acc)}
/* course header */
.chero{position:relative;padding:72px 0 34px;border-bottom:1px solid var(--rule);overflow:hidden}
#bgfx{position:absolute;inset:0;width:100%;height:100%}
.chero .wrap{position:relative}
.chero .kick{display:flex;gap:14px;flex-wrap:wrap}
.chero h1{font-family:var(--s);font-weight:700;font-size:clamp(3rem,8vw,6.2rem);line-height:.95;letter-spacing:-.025em;margin:14px 0 18px;max-width:780px;color:var(--ink)}
.chero h1::after{content:"";display:block;width:90px;height:5px;background:var(--acc);margin-top:22px}
.chero p{max-width:600px;color:var(--ink2);font-size:1.12rem}
.hstats{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;font-family:var(--m);font-size:.74rem;color:var(--mut);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);max-width:760px}
.hstats div{padding:12px 22px 12px 0;margin-right:22px;border-right:1px solid var(--rule)}
.hstats div:last-child{border-right:0}
.hstats b{font-family:var(--s);font-size:1.5rem;color:var(--ink);font-weight:700;margin-right:6px}
.labbtn{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-family:var(--m);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--paper2);background:var(--ink);padding:12px 18px;transition:.2s}
.labbtn:hover{background:var(--acc)}
/* tabs */
.tabs{position:sticky;top:51px;z-index:20;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.tabs .wrap{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}
.tabs button{background:none;border:0;color:var(--mut);font-family:var(--s);font-size:1.02rem;padding:14px 0 12px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--ink);border-color:var(--acc);font-weight:600}
main{padding:40px 28px 90px}
.pane{display:none}.pane.on{display:block;animation:fin .35s}
@keyframes fin{from{opacity:0;transform:translateY(8px)}}
/* LEARN: chapters as textbook pages */
.chap{background:var(--paper2);border:1px solid var(--rule);margin-bottom:14px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.chap>header{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:18px;padding:18px 24px;cursor:pointer}
.chap .num{font-family:var(--m);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.chap h3{font-family:var(--s);font-weight:600;font-size:1.32rem;letter-spacing:-.01em;line-height:1.2}
.chap .prog{display:flex;align-items:center;gap:10px;font-family:var(--m);font-size:.66rem;color:var(--mut);white-space:nowrap}
.chap .prog i{display:block;width:70px;height:4px;background:var(--rule);position:relative}.chap .prog i b{position:absolute;inset:0 auto 0 0;background:var(--acc)}
.chap .tog{font-family:var(--m);font-size:.7rem;color:var(--ink2);border:1px solid var(--rule);padding:4px 9px;margin-left:10px}
.chap.open .tog{background:var(--ink);color:var(--paper2);border-color:var(--ink)}
@media(max-width:700px){.chap>header{grid-template-columns:1fr auto}.chap .num{grid-column:1/-1}.chap .prog{display:none}}
.chap .body{display:none;border-top:1px solid var(--rule);padding:26px 24px 30px}.chap.open .body{display:block;animation:fin .3s}
.page{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:40px}
@media(max-width:900px){.page{grid-template-columns:1fr}}
.lede{font-size:1.18rem;line-height:1.6;color:var(--ink);margin-bottom:22px;max-width:680px}
.lede::first-letter{font-size:3.1em;float:left;line-height:.85;padding:6px 8px 0 0;font-weight:700;color:var(--acc)}
.sec{font-family:var(--m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:28px 0 12px;display:flex;align-items:center;gap:10px}
.sec::after{content:"";flex:1;height:1px;background:var(--rule)}
.ideas{list-style:none;counter-reset:idea}
.ideas li{position:relative;padding:0 0 14px 54px;color:var(--ink2);max-width:680px}
.ideas li .n{position:absolute;left:0;top:2px;font-family:var(--m);font-size:.74rem;color:var(--acc);font-weight:600}
.eqs{display:grid;gap:10px;max-width:700px}
.eq{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 18px;background:#fff;border:1px solid var(--rule);border-left:3px solid var(--acc);overflow-x:auto}
.eq .tex{font-size:1.04rem}
.eq .eqn{font-family:var(--m);font-size:.72rem;color:var(--mut);white-space:nowrap}
.method{counter-reset:st;list-style:none;max-width:680px;border:1px solid var(--rule);background:#fff;padding:16px 20px}
.method li{counter-increment:st;position:relative;padding:4px 0 4px 34px;color:var(--ink2)}
.method li::before{content:counter(st);position:absolute;left:0;top:6px;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:50%;font-family:var(--m);font-size:.7rem;display:grid;place-items:center;color:var(--ink)}
.margin{border-left:1px dashed rgba(200,50,42,.4);padding-left:20px;align-self:start;position:sticky;top:120px}
.margin .ttl{font-family:var(--h);font-size:1.6rem;color:var(--pen);line-height:1;margin-bottom:10px;transform:rotate(-2deg)}
.margin p{font-family:var(--h);font-size:1.32rem;line-height:1.2;color:var(--pen);margin-bottom:16px}
.margin p:nth-child(odd){transform:rotate(-.6deg)}.margin p:nth-child(even){transform:rotate(.5deg)}
@media(max-width:900px){.margin{position:static;border-left:0;border-top:1px dashed rgba(200,50,42,.4);padding:16px 0 0}}
.go{margin-top:26px;display:inline-flex;align-items:center;gap:10px;font-family:var(--m);font-size:.78rem;letter-spacing:.04em;background:none;border:0;border-bottom:2px solid var(--acc);color:var(--ink);padding:4px 0;cursor:pointer}
.go:hover{color:var(--acc)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper2);font-family:var(--m);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.15s}
.btn:hover{background:var(--acc);border-color:var(--acc)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper2)}
.btn.big{padding:15px 24px;font-size:.84rem}
.btn:disabled{opacity:.35;pointer-events:none}
/* PRACTICE: exam sheet */
.pbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
select{background:#fff;color:var(--ink);border:1.5px solid var(--ink);padding:10px 12px;font-family:var(--s);font-size:.98rem;max-width:100%;border-radius:0}
.card{background:#fff;border:1px solid var(--rule);box-shadow:0 18px 40px -30px rgba(20,40,30,.4);padding:34px 40px;position:relative}
@media(max-width:640px){.card{padding:22px 20px}}
.card::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:1px;background:rgba(200,50,42,.25)}
@media(max-width:640px){.card::before{display:none}}
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:18px;flex-wrap:wrap}
.shead b{font-family:var(--s);font-size:1.5rem;font-weight:700}
.shead span{font-family:var(--m);font-size:.7rem;color:var(--mut);letter-spacing:.06em;text-transform:uppercase}
.q{font-size:1.14rem;line-height:1.7;color:var(--ink);max-width:760px}
.fig{margin:20px 0;display:flex;justify-content:center;background:var(--paper2);border:1px solid var(--rule);padding:14px}
.fig svg{max-width:100%;height:auto;max-height:230px}
.ans{display:grid;gap:14px;margin:26px 0 8px;max-width:640px}
.blank{display:grid;grid-template-columns:130px 1fr auto 22px;align-items:end;gap:10px}
.blank .var{font-family:var(--m);font-size:.86rem;color:var(--ink2);text-align:right;padding-bottom:6px}
.blank .var::after{content:" ="}
.blank input{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--ink);font-family:var(--m);font-size:1.1rem;color:var(--ink);padding:6px 4px;outline:none;border-radius:0}
.blank input:focus{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 6%,transparent)}
.blank .unit{font-family:var(--m);font-size:.8rem;color:var(--mut);padding-bottom:7px;min-width:40px}
.blank .mark{font-family:var(--h);font-size:1.7rem;line-height:1;padding-bottom:2px}
.blank.ok input{border-color:var(--ok)}.blank.ok .mark{color:var(--ok)}
.blank.no input{border-color:var(--no)}.blank.no .mark{color:var(--no)}
@media(max-width:560px){.blank{grid-template-columns:90px 1fr auto 18px}}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.feedback{margin-top:16px;min-height:1.5em;font-family:var(--h);font-size:1.6rem;line-height:1.1}
.feedback.ok{color:var(--ok)}.feedback.no{color:var(--no)}.feedback.hint{font-family:var(--s);font-size:1rem;color:var(--ink2);font-style:italic}
.sol{display:none;margin-top:22px;border-top:1px solid var(--rule);padding-top:18px}.sol.on{display:block;animation:fin .3s}
.sol h4,.rev h4{font-family:var(--m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:8px 0 8px 44px;border-bottom:1px dotted var(--rule);color:var(--ink2);line-height:1.7}
.steps li::before{content:counter(s,lower-roman)'.';position:absolute;left:0;top:9px;font-family:var(--m);font-size:.74rem;color:var(--acc)}
.final{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--m);font-size:.86rem}
.final span b{color:var(--ink);border-bottom:3px double var(--ink);padding:0 2px}
.note{font-family:var(--m);font-size:.68rem;color:var(--mut);margin-top:16px}
/* EXAM */
.card h3{font-family:var(--s);font-size:1.9rem;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.exopts{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin:22px 0}
.exopts label{display:grid;gap:6px;font-family:var(--m);font-size:.66rem;color:var(--mut);text-transform:uppercase;letter-spacing:.1em}
.ckgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0;border-top:1px solid var(--rule);margin-bottom:22px}
.ck{display:flex;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--rule);cursor:pointer;font-size:.98rem}
.ck input{accent-color:var(--acc);width:16px;height:16px}
.exhead{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--m);font-size:.76rem;color:var(--mut);margin-bottom:10px}
.clock{font-family:var(--m);font-size:1.4rem;color:var(--ink);font-weight:600}.clock.low{color:var(--no)}
.exbar{height:3px;background:var(--rule);margin-bottom:26px}.exbar i{display:block;height:100%;background:var(--acc);transition:width .4s}
.score{display:flex;gap:26px;align-items:center;margin-bottom:6px}
.grade{font-family:var(--h);font-size:6rem;line-height:.8;color:var(--pen);width:110px;height:110px;border:3px solid var(--pen);border-radius:50%;display:grid;place-items:center;transform:rotate(-8deg)}
.grade.gA,.grade.gB{color:var(--ok);border-color:var(--ok)}
.score b{font-family:var(--s);font-size:2.6rem;font-weight:700;display:block;line-height:1}.score span{color:var(--mut);font-family:var(--m);font-size:.8rem}
.weak{margin:16px 0 22px;color:var(--ink2)}
.rev{border-bottom:1px solid var(--rule);padding:14px 0}
.rev summary{cursor:pointer;font-weight:600;list-style:none;display:flex;gap:12px;align-items:baseline}
.rev summary::-webkit-details-marker{display:none}
.rev summary .mk{font-family:var(--h);font-size:1.6rem;line-height:.8;width:20px}
.rev.ok .mk{color:var(--ok)}.rev.no .mk{color:var(--no)}
.rev .q{font-size:1rem;margin:12px 0}
/* SHEET */
.sheet{columns:2 380px;column-gap:40px;background:#fff;border:1px solid var(--rule);padding:30px 34px}
.sheet section{break-inside:avoid;margin-bottom:24px}
.sheet h4{font-family:var(--m);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.sheet .eqc{padding:5px 0;font-size:.98rem;overflow-x:auto}
.foot{border-top:1px solid var(--rule);padding:26px 28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--m);font-size:.66rem;color:var(--mut)}
.conf{position:fixed;width:7px;height:7px;z-index:99;pointer-events:none;animation:cf .9s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes cf{to{transform:translate(var(--dx),var(--dy)) rotate(400deg);opacity:0}}
@media print{nav,.tabs,.chero,.foot,.pbar{display:none!important}body{background:#fff}.pane{display:none!important}#p-sheet{display:block!important}.sheet{border:0}}

/* diagrams */
.dg{margin:6px 0 24px;background:#fff;border:1px solid var(--rule);padding:16px 18px 12px;max-width:700px}
.dg svg{width:100%;height:auto;max-height:240px;display:block;overflow:visible}
.dg figcaption{font-family:var(--s);font-size:.92rem;color:var(--ink2);margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.dg figcaption b{font-family:var(--m);font-size:.72rem;color:var(--acc);margin-right:8px;font-weight:600}
.dg .k{stroke:var(--ink);fill:none;stroke-width:2}.dg .a{stroke:var(--acc);fill:none;stroke-width:2}.dg .p{stroke:var(--pen);fill:none;stroke-width:2}.dg .m{stroke:#9aa59e;fill:none;stroke-width:1.2}
.dg .fk{fill:var(--ink)}.dg .fa{fill:var(--acc)}.dg .fp{fill:var(--pen)}.dg .fw{fill:#fff}.dg .fw2{fill:#f4f1ea}.dg .fa2{fill:color-mix(in srgb,var(--acc) 14%,transparent)}.dg .fp2{fill:color-mix(in srgb,var(--pen) 14%,#fff)}
.dg text{font-family:var(--m);font-size:13px;font-weight:500;stroke:none}.dg .tk{fill:var(--ink)}.dg .ta{fill:var(--acc)}.dg .tp{fill:var(--pen)}.dg .tm{fill:var(--mut)}.dg .tc{fill:#1f5fbf}.dg .sub{font-size:.75em}
.fig.dg{max-width:none}

.rvhead{border:1.5px solid var(--ink);background:var(--paper2);padding:22px 26px;margin:34px 0 8px;position:relative}
.rvhead .ttl{font-family:var(--m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.rvhead p{font-size:1.06rem;line-height:1.6;max-width:760px}
.rvhead p+p{margin-top:8px}
#reviewList .chap .num{color:var(--pen)}
.labbtn.alt{background:transparent;color:var(--ink);border:1.5px solid var(--ink);margin-left:10px}.labbtn.alt:hover{color:#fff;border-color:var(--acc)}

.stoc{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 26px;max-width:700px}
.stoc a{font-family:var(--m);font-size:.7rem;text-decoration:none;border:1px solid var(--rule);background:#fff;padding:5px 9px;color:var(--ink2)}
.stoc a b{color:var(--acc);margin-right:6px}.stoc a:hover{border-color:var(--acc);color:var(--ink)}
.ssec{max-width:700px;padding:22px 0 26px;border-top:1px solid var(--rule);scroll-margin-top:130px}
.ssec .shd{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.ssec .snum{font-family:var(--m);font-size:.8rem;color:#fff;background:var(--acc);padding:2px 8px}
.ssec h4{font-family:var(--s);font-size:1.28rem;font-weight:700;letter-spacing:-.01em}
.ssec>p{color:var(--ink2);margin:0 0 12px}
.ssec .eqs{margin:14px 0}
.exb{border:1px solid var(--rule);border-left:3px solid var(--pen);background:#fff;padding:16px 20px;margin:16px 0 6px}
.exb .exl{font-family:var(--m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pen);margin-bottom:6px}
.exb>p{margin-bottom:6px}
.ssec .go{margin-top:14px}