/* Layout: one ruled notebook page; each problem follows the same 9-step study template so a beginner always knows where they are */
:root{
  --paper:#fbfaf4; --rule:#dfe7f1; --margin:#e7a3a3;
  --ink:#1f2a44; --ink-soft:#56617d; --pen:#1d4fbf; --red:#c2362f; --green:#1f7a4a; --pencil:#6a6a6a;
  --hl:#fff1a8; --note:#fff6c9; --note-edge:#e3d27f; --cell:#ffffff;
  --code-bg:#f2f4f8; --code-fg:#1f2a44; --code-cm:#66768c; --code-kw:#a3368f; --code-fn:#1d4fbf;
  --hand:"Patrick Hand","Comic Sans MS","Segoe Print",cursive;
  --title:"Caveat","Segoe Script","Segoe Print",cursive;
  --mono:"JetBrains Mono",Consolas,"Courier New",monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#1b2230; --rule:#273146; --margin:#7a3b45;
  --ink:#e6e9f0; --ink-soft:#a9b2c6; --pen:#8fb4ff; --red:#ff8a80; --green:#7fd6a4; --pencil:#b8b8b8;
  --hl:#5a4d12; --note:#3a3420; --note-edge:#6b5d2a; --cell:#232c3d;
  --code-bg:#121825; --code-fg:#e6e9f0; --code-cm:#8a97ad; --code-kw:#e59ad6; --code-fn:#8fb4ff;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#1b2230; --rule:#273146; --margin:#7a3b45;
  --ink:#e6e9f0; --ink-soft:#a9b2c6; --pen:#8fb4ff; --red:#ff8a80; --green:#7fd6a4; --pencil:#b8b8b8;
  --hl:#5a4d12; --note:#3a3420; --note-edge:#6b5d2a; --cell:#232c3d;
  --code-bg:#121825; --code-fg:#e6e9f0; --code-cm:#8a97ad; --code-kw:#e59ad6; --code-fn:#8fb4ff;
  color-scheme:dark}

body{background:var(--paper);color:var(--ink);font-family:var(--hand);font-size:1.2rem;line-height:1.8rem;padding-inline:16px;padding-block:24px 64px}
.page{max-width:860px;margin:0 auto;position:relative;padding-left:clamp(14px,5vw,56px);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px);background-size:100% 1.8rem}
.page::before{content:"";position:absolute;top:0;bottom:0;left:clamp(4px,2.4vw,30px);width:2px;background:var(--margin)}
h1,h2,h3,h4{font-family:var(--title);text-wrap:balance;margin:0;line-height:1.15}
h1{font-size:clamp(2.4rem,7vw,3.4rem);color:var(--pen)}
h2{font-size:clamp(2rem,5.5vw,2.6rem);color:var(--pen);margin-top:3rem;padding:4px 14px;border:3px solid var(--pen);border-radius:14px 4px 16px 6px;display:inline-block}
h3{font-size:1.75rem;color:var(--ink);margin-top:2rem}
h3 .no{display:inline-block;min-width:1.9rem;height:1.9rem;line-height:1.75rem;text-align:center;border:2px solid var(--red);border-radius:50%;color:var(--red);font-size:1.3rem;margin-right:6px}
h4{font-size:1.45rem;color:var(--pen);margin-top:1.2rem}
p,li{max-width:70ch}
p{margin:.55rem 0}
ul,ol{margin:.35rem 0;padding-left:1.4rem}
li{margin:.2rem 0}
.sub{color:var(--ink-soft)}
.hl{background:linear-gradient(transparent 35%,var(--hl) 35%,var(--hl) 88%,transparent 88%);padding:0 3px}
.red{color:var(--red)} .green{color:var(--green)} .pen{color:var(--pen)}
.ok{color:var(--green);font-weight:700} .bad{color:var(--red);font-weight:700}
.circle{border:2px solid var(--red);border-radius:50% 45% 55% 48%;padding:0 6px}
code{font-family:var(--mono);font-size:.8em;background:var(--code-bg);padding:1px 5px;border-radius:4px}
.toc{display:grid;gap:4px;margin:1rem 0;padding:0;list-style:none}
.toc a{color:var(--pen);text-decoration:underline wavy 1px;text-underline-offset:5px}
.template{font-family:var(--title);font-size:1.35rem;color:var(--ink-soft);line-height:1.5rem}

.note{background:var(--note);border:1px solid var(--note-edge);padding:10px 16px;margin:1.1rem 0;transform:rotate(-.35deg);box-shadow:2px 3px 0 var(--note-edge);max-width:68ch}
.note.r{transform:rotate(.35deg)}
.note .t{font-family:var(--title);font-size:1.5rem;color:var(--red);display:block;line-height:1.3;font-weight:700}
.doubt{font-family:var(--title);font-size:1.42rem;line-height:1.65rem;color:var(--pencil);margin:1rem 0 1rem .4rem;padding-left:12px;border-left:2px dotted var(--pencil);max-width:66ch}
.doubt .q{color:var(--red);font-weight:700}
.doubt .a{color:var(--ink)}

.code{background:var(--code-bg);color:var(--code-fg);border-radius:6px;margin:1rem 0;overflow-x:auto;border:1px dashed var(--ink-soft)}
.code .lbl{font-family:var(--title);font-size:1.35rem;color:var(--ink-soft);padding:6px 14px 0}
.code pre{margin:0;padding:8px 14px 14px;font-family:var(--mono);font-size:.84rem;line-height:1.45rem}
.cm{color:var(--code-cm);font-style:italic} .kw{color:var(--code-kw);font-weight:600} .fn{color:var(--code-fn)}

.tree{font-family:var(--mono);font-size:.85rem;line-height:1.3rem;margin:.5rem 0;overflow-x:auto;color:var(--ink)}
.trees{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:flex-start}
.trees>div{min-width:0}
.cap{font-family:var(--title);font-size:1.35rem;color:var(--ink-soft)}

.tbl{overflow-x:auto;margin:1rem 0}
table{border-collapse:collapse;min-width:560px;font-size:1.1rem}
th,td{border:1.5px solid var(--ink-soft);padding:4px 10px;text-align:left;vertical-align:top}
th{font-family:var(--title);font-size:1.35rem;color:var(--pen)}
td.c{font-family:var(--mono);font-size:.8rem;white-space:pre;background:var(--code-bg)}
td.n{font-family:var(--title);font-size:1.3rem;color:var(--pencil);text-align:center}
td.back{color:var(--ink-soft);font-style:italic}

.walk{list-style:none;padding-left:0;counter-reset:w}
.walk>li{counter-increment:w;padding-left:2.4rem;position:relative;margin:.45rem 0}
.walk>li::before{content:counter(w);position:absolute;left:0;top:.1rem;width:1.6rem;height:1.6rem;border:2px solid var(--pen);border-radius:50%;
  font-family:var(--title);font-weight:700;color:var(--pen);text-align:center;line-height:1.4rem;font-size:1.15rem}

.stackrow{display:flex;flex-wrap:wrap;gap:16px 34px;align-items:flex-end;margin:.6rem 0}
.stackrow>div{min-width:0}
.stackpic{display:flex;flex-direction:column-reverse;gap:4px;width:max-content;padding:6px;border:2px solid var(--ink);border-top:0;border-radius:0 0 6px 6px}
.stackpic span{font-family:var(--mono);font-size:.8rem;background:var(--cell);border:1.5px solid var(--ink-soft);padding:2px 12px;text-align:center}
.stackpic span.top{border-color:var(--red);color:var(--red)}

.qrows{display:grid;gap:8px;margin:1rem 0;overflow-x:auto}
.qrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qrow .lab{font-family:var(--title);font-size:1.3rem;color:var(--pencil);min-width:5.2rem}
.q{display:inline-flex;border:2px solid var(--ink);border-left-style:dashed;border-right-style:dashed}
.q i{font-style:normal;font-family:var(--mono);font-size:.8rem;min-width:2rem;padding:2px 6px;text-align:center;border-right:1px solid var(--ink-soft);background:var(--cell)}
.q i:last-child{border-right:0}
.q i.pop{background:var(--hl);font-weight:600}
.q i.nn{color:var(--pencil)}
.qrow .act{font-size:1.08rem}
.src{margin-top:3rem;color:var(--ink-soft);font-size:1rem}
.src a{color:var(--pen)}
a:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
hr{border:0;border-top:2px dashed var(--ink-soft);margin:2.8rem 0;opacity:.5}

/* page nav (added for multi-page notebook) */
.nav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;font-family:var(--title);font-size:1.35rem;margin-bottom:.6rem}
.nav a{color:var(--pen);text-decoration:underline wavy 1px;text-underline-offset:5px}
/* index cards */
.idx{list-style:none;padding:0;margin:1rem 0;display:grid;gap:10px}
.idx li{max-width:none}
.idx a{display:flex;gap:14px;align-items:baseline;color:var(--ink);text-decoration:none;padding:8px 12px;border:1.5px solid var(--ink-soft);border-radius:10px 4px 12px 6px;background:var(--cell)}
.idx a:hover,.idx a:focus-visible{border-color:var(--pen);color:var(--pen)}
.idx .num{font-family:var(--title);font-size:1.6rem;color:var(--red);min-width:2rem;text-align:right}
.idx .nm{font-size:1.2rem}
.idx .tg{font-family:var(--title);font-size:1.2rem;color:var(--ink-soft);margin-left:auto;white-space:nowrap}
.idx a>span{min-width:0}