/* Bench: technical datasheet. Warm paper, hairline rules, expanded grotesk headings, mono spec labels. Overrides base.css */
:root{--paper:#f3f1ec;--paper2:#fbfaf7;--ink:#121417;--ink2:#3a3d42;--mut:#77797d;--rule:#d3cfc5;--acc:#ff5a1f;--pen:#ff5a1f;--ok:#0f8a5f;--no:#d23a1e;
  --s:'IBM Plex Sans',system-ui,sans-serif;--d:'Archivo',system-ui,sans-serif;--m:'IBM Plex Mono',ui-monospace,monospace;--h:'IBM Plex Mono',monospace}
body{font-family:var(--s);font-size:17px;line-height:1.62;background:var(--paper);background-image:none}
::selection{background:color-mix(in srgb,var(--acc) 30%,transparent)}
nav.top{background:color-mix(in srgb,var(--paper) 94%,transparent);border-bottom:1px solid var(--ink)}
.logo{font-family:var(--d);font-weight:800;font-stretch:125%;font-size:1.2rem;letter-spacing:.02em;text-transform:uppercase}
.bmark{width:26px;height:26px;border:2px solid var(--ink);display:inline-grid;place-items:center;position:relative}
.bmark i{width:10px;height:10px;background:var(--acc);display:block}
.bmark::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:1px;background:var(--ink)}
.crs a{font-family:var(--m);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid transparent;padding:7px 12px}
.crs a:hover,.crs a.on{border-color:var(--acc);color:var(--ink)}
.chero{padding:80px 0 40px;border-bottom:1px solid var(--ink);background:var(--paper2)}
.chero::before,.chero::after{content:"";position:absolute;width:22px;height:22px;border:1px solid var(--ink);z-index:2}
.chero::before{left:18px;top:18px;border-right:0;border-bottom:0}.chero::after{right:18px;bottom:18px;border-left:0;border-top:0}
.chero .kick{color:var(--ink);font-family:var(--m)}
.chero .kick span:first-child{background:var(--acc);color:#fff;padding:3px 9px}
.chero h1{font-family:var(--d);font-weight:850;font-stretch:118%;font-size:clamp(2.6rem,5.6vw,4.9rem);letter-spacing:-.025em;line-height:.92;text-transform:uppercase}
@media(min-width:900px){.chero h1,.chero .kick,.chero p{max-width:min(620px,52vw)}.chero h1{display:block}}
.chero h1::after{content:"";display:block;width:90px;height:6px;background:var(--acc);margin-top:22px}
.chero p{color:var(--ink2);max-width:600px;font-size:1.08rem}
.hstats{border:1px solid var(--ink);background:var(--paper2);max-width:720px;border-radius:0}
.hstats div{border-right:1px solid var(--rule);font-family:var(--m);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em}
.hstats b{font-family:var(--d);font-stretch:110%;font-weight:800;font-size:1.6rem;letter-spacing:-.01em}
.labbtn{border-radius:0;background:var(--ink);color:#fff;border:1px solid var(--ink)}
.tabs{border-bottom:1px solid var(--ink);background:var(--paper)}
.tabs .wrap{gap:0;padding-top:14px;padding-bottom:14px}
.tabs button{font-family:var(--m);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;padding:9px 18px;border:1px solid var(--ink);margin-right:-1px;background:var(--paper2);color:var(--ink);border-radius:0}
.tabs button.on{background:var(--ink);color:#fff}
/* lessons */
.chap{background:var(--paper2);border:1px solid var(--ink);border-radius:0;margin-bottom:-1px;box-shadow:none}
.chap.open{margin:14px 0;border-left:5px solid var(--acc)}
.chap>header{grid-template-columns:110px 1fr auto;padding:18px 24px}
.chap .num{font-family:var(--m);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.chap h3{font-family:var(--d);font-weight:750;font-stretch:108%;font-size:1.32rem;letter-spacing:-.005em}
.chap .tog{border-radius:0;border:1px solid var(--ink);font-family:var(--m);font-size:.68rem;text-transform:uppercase}
.chap.open .tog{background:var(--ink);color:#fff}
.chap .body{border-top:1px solid var(--rule)}
.lede{font-size:1.14rem}.lede::first-letter{all:unset}
.sec{font-family:var(--m);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sec::after{background:var(--ink);height:1px}
.ideas li{padding-left:52px}
.ideas li .n{font-family:var(--m);font-weight:600;font-size:.72rem;color:var(--acc);top:4px}
.ideas li b{font-weight:600;box-shadow:inset 0 -.38em 0 color-mix(in srgb,var(--acc) 22%,transparent)}
code{font-family:var(--m);font-size:.86em;background:#e9e6de;padding:1px 5px;border:1px solid var(--rule)}
.eq{border:1px solid var(--ink);border-radius:0;background:#fff;box-shadow:none;border-top:3px solid var(--acc)}
.method{border:1px solid var(--ink);border-radius:0;background:#fff}
.method li::before{border-radius:0;border-color:var(--ink);background:var(--paper)}
.margin{border-left:3px solid var(--acc);background:#fff;padding:16px 18px;border-radius:0}
.margin .ttl{font-family:var(--m);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--acc);transform:none}
.margin p{font-family:var(--s);font-size:1rem;color:var(--ink);transform:none!important}
.go{border:1px solid var(--ink);border-radius:0;padding:8px 16px;font-family:var(--m);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}
.go:hover{background:var(--ink);color:#fff}
.btn{border-radius:0;border:1px solid var(--ink);font-family:var(--m);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.btn:not(.ghost){background:var(--acc);color:#fff;border-color:var(--acc)}
.btn.ghost{background:transparent}
select{border-radius:0;border:1px solid var(--ink);font-family:var(--m);background:#fff}
.card{border:1px solid var(--ink);border-radius:0;box-shadow:none;background:#fff}
.card::before{display:block;height:4px;background:var(--acc)}
.shead{border-bottom:1px solid var(--rule)}
.shead b{font-family:var(--d);font-weight:800;font-stretch:110%}
.blank input{font-family:var(--m);font-size:1.15rem;color:var(--ink);border-bottom:2px solid var(--acc);background:#faf8f3}
.feedback{font-family:var(--m);font-size:.9rem}
.steps li::before{font-family:var(--m);color:var(--acc)}
.final span b{box-shadow:inset 0 -.4em 0 color-mix(in srgb,var(--acc) 25%,transparent)}
.grade{border-radius:0;font-family:var(--d);font-stretch:120%;font-weight:900;border:3px solid var(--ink);transform:rotate(-4deg)}
.sheet{border:1px solid var(--ink);border-radius:0;background:#fff}
.sheet h4{font-family:var(--m);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--ink);display:inline-block;padding:3px 9px;border:0}
.dg{border:1px solid var(--ink);border-radius:0;background:#fff;box-shadow:none}
.dg .m{stroke:#c9c4b8}.dg .fw2{fill:#f4f1ea}
.dg figcaption{font-family:var(--s)}
.dg figcaption b{color:var(--acc)}
.rvhead{border-radius:0;background:var(--ink);color:#fff;border:0}
.rvhead .ttl{color:var(--acc);font-family:var(--m);letter-spacing:.12em}
.rvhead p{color:#e9e6de}
.foot{border-top:1px solid var(--ink);background:var(--paper2);font-family:var(--m);font-size:.7rem}
.ssec .snum{background:var(--ink);border-radius:0}.exb{border:1px solid var(--ink);border-left:4px solid var(--acc);border-radius:0}
body.t-lab{--acc:#ff5a1f;--pen:#2e6be6}body.t-draw{--acc:#2e6be6;--pen:#ff5a1f}body.t-num{--acc:#0f9d74;--pen:#ff5a1f}body.t-matlab{--acc:#7a4dd8;--pen:#ff5a1f}body.t-ard{--acc:#00979c;--pen:#ff5a1f}body.t-cpp{--acc:#00599c;--pen:#ff5a1f}
pre.mcode{font-family:var(--m);font-size:.84rem;line-height:1.55;background:#16181c;color:#e9e6de;padding:14px 16px;margin:12px 0;overflow-x:auto;border-left:3px solid var(--acc);white-space:pre}
pre.mcode .c{color:#8f9399}pre.mcode .o{color:#9fe0c0}
.ssec p code,.exb code,.steps code{white-space:nowrap}