:root {
      --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9; --ink:#0f172a; --muted:#475569; --line:#cbd5e1;
      --accent:#0284c7; --accent-soft:#e0f2fe; --accent-ink:#0369a1;
      --purple:#7c3aed; --purple-soft:#ede9fe; --purple-ink:#6d28d9;
      --good:#059669; --good-soft:#d1fae5; --good-ink:#047857;
      --warn:#d97706; --warn-soft:#fef3c7; --anom:#dc2626; --anom-soft:#fee2e2;
      --chip:#e2e8f0; --code-bg:#f1f5f9; --on-accent:#ffffff; --canvas-bg:#0b1120; --grid:#1e293b;
      --shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 14px rgba(0,0,0,0.05);
      --shadow-lg:0 10px 25px -5px rgba(0,0,0,0.08),0 8px 10px -6px rgba(0,0,0,0.05);
    }
    @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
      --bg:#0b1120; --surface:#131d31; --surface-2:#1e293b; --ink:#f1f5f9; --muted:#94a3b8; --line:#2e3e5c;
      --accent:#38bdf8; --accent-soft:#082f49; --accent-ink:#7dd3fc; --purple:#a78bfa; --purple-soft:#2e1065; --purple-ink:#c4b5fd;
      --good:#34d399; --good-soft:#064e3b; --good-ink:#6ee7b7; --warn:#fbbf24; --warn-soft:#451a03; --anom:#f87171; --anom-soft:#450a0a;
      --chip:#1e293b; --code-bg:#1e293b; --on-accent:#0b1120; --canvas-bg:#060b16; --grid:#1e293b;
      --shadow:0 1px 3px rgba(0,0,0,0.4),0 4px 16px rgba(0,0,0,0.3); --shadow-lg:0 10px 25px -5px rgba(0,0,0,0.6),0 8px 10px -6px rgba(0,0,0,0.4);
    } }
    :root[data-theme="dark"] {
      --bg:#0b1120; --surface:#131d31; --surface-2:#1e293b; --ink:#f1f5f9; --muted:#94a3b8; --line:#2e3e5c;
      --accent:#38bdf8; --accent-soft:#082f49; --accent-ink:#7dd3fc; --purple:#a78bfa; --purple-soft:#2e1065; --purple-ink:#c4b5fd;
      --good:#34d399; --good-soft:#064e3b; --good-ink:#6ee7b7; --warn:#fbbf24; --warn-soft:#451a03; --anom:#f87171; --anom-soft:#450a0a;
      --chip:#1e293b; --code-bg:#1e293b; --on-accent:#0b1120; --canvas-bg:#060b16; --grid:#1e293b;
      --shadow:0 1px 3px rgba(0,0,0,0.4),0 4px 16px rgba(0,0,0,0.3); --shadow-lg:0 10px 25px -5px rgba(0,0,0,0.6),0 8px 10px -6px rgba(0,0,0,0.4);
    }
    :root[data-theme="light"] {
      --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9; --ink:#0f172a; --muted:#475569; --line:#cbd5e1;
      --accent:#0284c7; --accent-soft:#e0f2fe; --accent-ink:#0369a1; --purple:#7c3aed; --purple-soft:#ede9fe; --purple-ink:#6d28d9;
      --good:#059669; --good-soft:#d1fae5; --good-ink:#047857; --warn:#d97706; --warn-soft:#fef3c7; --anom:#dc2626; --anom-soft:#fee2e2;
      --chip:#e2e8f0; --code-bg:#f1f5f9; --on-accent:#ffffff; --canvas-bg:#0b1120; --grid:#1e293b;
      --shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 14px rgba(0,0,0,0.05); --shadow-lg:0 10px 25px -5px rgba(0,0,0,0.08),0 8px 10px -6px rgba(0,0,0,0.05);
    }

    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .25s ease,color .25s ease; }
    a { color:var(--accent-ink); }
    img { max-width:100%; }
    .katex { font-size:1.06em; }
    .katex-display { margin:.6em 0; overflow-x:auto; overflow-y:hidden; }

    /* Sticky nav */
    #top-nav { position:sticky; top:0; z-index:1000; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding:8px 16px; }
    .nav-container { max-width:none; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .nav-brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; color:var(--ink); text-decoration:none; white-space:nowrap; }
    .nav-brand .badge { background:var(--accent); color:var(--on-accent); padding:3px 8px; border-radius:6px; font-size:11px; font-weight:800; letter-spacing:.5px; }
    .nav-pills { display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:none; padding:2px 0; }
    .nav-pills::-webkit-scrollbar { display:none; }
    .nav-pill { font-size:14px; font-weight:500; color:var(--muted); text-decoration:none; padding:4px 9px; border-radius:6px; white-space:nowrap; transition:all .15s ease; }
    .nav-pill:hover, .nav-pill.active { color:var(--ink); background:var(--surface-2); }
    .nav-pill.primer-pill { color:var(--purple); }
    .nav-pill.primer-pill:hover, .nav-pill.primer-pill.active { background:var(--purple-soft); }
    .theme-toggle-btn { background:var(--surface-2); border:1px solid var(--line); color:var(--ink); width:32px; height:32px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }

    .main-wrapper { max-width:1900px; width:100%; margin:0 auto; padding:32px clamp(16px,3vw,56px) 80px; }

    /* Hero */
    .hero { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:40px 44px; margin-bottom:36px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
    .hero::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--accent) 0%,var(--purple) 50%,var(--good) 100%); }
    .hero-kicker { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
    .hero h1 { font-size:42px; font-weight:800; line-height:1.22; margin:0 0 14px; letter-spacing:-.5px; }
    .hero p { font-size:19px; color:var(--muted); margin:0 0 18px; max-width:1100px; }
    .teaching-capsule { background:var(--surface-2); border:1px dashed var(--line); border-radius:10px; padding:16px 20px; font-size:16.5px; color:var(--ink); }
    .teaching-capsule b { color:var(--accent-ink); }

    /* Section cards */
    .q { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:36px 40px; margin-bottom:36px; box-shadow:var(--shadow); scroll-margin-top:64px; }
    .qhead { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
    .qn { background:var(--accent-soft); color:var(--accent-ink); font-weight:800; font-size:14px; padding:4px 10px; border-radius:6px; letter-spacing:.5px; text-transform:uppercase; }
    .qn.primer { background:var(--purple-soft); color:var(--purple-ink); }
    .qhead h2 { margin:0; font-size:28px; font-weight:700; letter-spacing:-.3px; }
    .qask { font-size:19px; font-weight:500; color:var(--muted); margin:0 0 18px; line-height:1.5; }
    h3.sub { font-size:17px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--accent); margin:26px 0 10px; display:flex; align-items:center; gap:8px; }
    h3.sub .n { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:12.5px; }
    h3.sub.purple { color:var(--purple); } h3.sub.purple .n { background:var(--purple); }

    /* Remember capsule */
    .remember { background:var(--warn-soft); border-left:4px solid var(--warn); border-radius:0 10px 10px 0; padding:14px 18px; margin:14px 0 20px; color:var(--ink); }
    .remember .lbl { font-size:13px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--warn); margin-bottom:6px; }
    .remember p { margin:0 0 6px; font-size:17px; line-height:1.55; }
    .remember p:last-child { margin-bottom:0; }

    /* Step flow (numbered cards) */
    .flow { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin:14px 0; counter-reset:step; }
    .flow .step { position:relative; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:18px 18px 14px; font-size:16px; line-height:1.5; }
    .flow .step::before { counter-increment:step; content:counter(step); position:absolute; top:-10px; left:12px; width:22px; height:22px; border-radius:50%; background:var(--purple); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
    .flow .step.acc::before { background:var(--accent); }
    .flow .step .t { font-weight:700; margin:4px 0 8px; color:var(--ink); font-size:17px; }
    .flow .step .eq { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:6px 8px; margin:8px 0 6px; overflow-x:auto; }
    .flow .step .eq .katex-display { margin:.2em 0; }
    .flow .step .fig { display:block; width:100%; border-radius:8px; border:1px solid var(--line); margin:6px 0; }
    .flow .step .why { color:var(--muted); font-size:14.5px; margin-top:6px; }
    .flow .step svg { display:block; width:100%; height:auto; margin:6px 0; }

    /* Panels */
    .panel { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:24px; margin:20px 0; }
    .panel.tight { padding:14px; }
    .plbl { font-size:15px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--accent); margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
    .btnrow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0; }
    button.btn { background:var(--surface); border:1px solid var(--line); color:var(--ink); font-family:inherit; font-size:15px; font-weight:600; padding:9px 16px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s ease; }
    button.btn:hover { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
    button.btn.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
    button.btn.good { border-color:var(--good); color:var(--good-ink); }
    button.btn.good.on { background:var(--good); color:#fff; }
    button.btn:disabled { opacity:.45; cursor:not-allowed; }
    .ctl { display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--muted); font-weight:500; flex-wrap:wrap; }
    input[type="range"] { -webkit-appearance:none; appearance:none; height:8px; border-radius:3px; background:var(--line); outline:none; cursor:pointer; }
    input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.25); }
    select.sel { padding:8px 10px; border-radius:6px; border:1px solid var(--line); font-family:inherit; font-size:15px; background:var(--surface); color:var(--ink); }
    .fx { font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:600; color:var(--ink); background:var(--chip); padding:2px 6px; border-radius:4px; white-space:nowrap; }
    .slider-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; font-size:15.5px; margin:8px 0; }
    .slider-row label { color:var(--muted); font-weight:600; white-space:nowrap; }

    /* stats */
    .statrow { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:12px 0; }
    .stat { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px; text-align:center; }
    .stat .v { display:block; font-size:26px; font-weight:800; color:var(--accent-ink); font-family:'JetBrains Mono',monospace; line-height:1.2; }
    .stat .v.good { color:var(--good-ink); } .stat .v.bad { color:var(--anom); } .stat .v.warn { color:var(--warn); }
    .stat .l { font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:3px; line-height:1.25; }

    /* grids */
    .duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
    .trio { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:start; }
    .duo.w32 { grid-template-columns:3fr 2fr; } .duo.w23 { grid-template-columns:2fr 3fr; }
    .quad { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:start; }
    .duo > *, .trio > *, .quad > *, .flow > * { min-width:0; }
    p code, li code, td code, .remember code { overflow-wrap:anywhere; }
    @media (max-width:1250px) { .quad { grid-template-columns:1fr 1fr; } }
    @media (max-width:820px) { .quad { grid-template-columns:1fr; } }
    @media (max-width:1250px) { .trio { grid-template-columns:1fr 1fr; } }
    @media (max-width:820px) { .duo, .trio, .duo.w32, .duo.w23 { grid-template-columns:1fr; } body { font-size:16px; } .main-wrapper { padding:20px 12px 60px; } .q { padding:22px 18px; } .hero { padding:26px 20px; } .hero h1 { font-size:30px; } }
    .card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px; }
    .card .ct { font-weight:700; font-size:16px; margin-bottom:8px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
    .card canvas { display:block; width:100%; height:auto; border-radius:6px; background:var(--canvas-bg); }
    .cap { font-size:15px; color:var(--muted); margin-top:8px; line-height:1.45; }
    .fig { background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
    .fig img { display:block; width:100%; }
    .fig .cap { padding:8px 12px; margin:0; border-top:1px solid var(--line); background:var(--surface-2); }
    .strip { display:flex; gap:10px; overflow-x:auto; padding:6px 2px 10px; scroll-snap-type:x proximity; }
    .strip .it { flex:0 0 300px; scroll-snap-align:start; text-align:center; }
    .strip .it img { width:100%; border-radius:8px; border:1px solid var(--line); display:block; }
    .strip .it .lab { font-size:15px; margin-top:6px; color:var(--ink); line-height:1.35; }
    .strip .arrow { flex:0 0 auto; align-self:center; color:var(--muted); font-size:20px; padding:0 2px; }

    /* legend */
    .legend { display:flex; flex-wrap:wrap; align-items:center; gap:16px; font-size:15px; color:var(--muted); margin:8px 0 0; }
    .legend span { display:inline-flex; align-items:center; gap:6px; }
    .dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
    .sq { width:14px; height:5px; border-radius:2px; display:inline-block; }

    /* notes */
    .note { border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 8px 8px 0; padding:12px 16px; font-size:16px; margin:12px 0; }
    .note.purple { border-color:var(--purple); background:var(--purple-soft); }
    .note.good { border-color:var(--good); background:var(--good-soft); }
    .note.warn { border-color:var(--warn); background:var(--warn-soft); }
    .note.anom { border-color:var(--anom); background:var(--anom-soft); }
    .note b:first-child { display:block; margin-bottom:2px; }

    /* answer accordion */
    .answer { margin-top:20px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
    .answer-toggle { width:100%; text-align:left; background:var(--surface-2); border:none; padding:14px 20px; font-family:inherit; font-size:17px; font-weight:700; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
    .answer-toggle:hover { background:var(--chip); }
    .answer-toggle .chevron { transition:transform .2s ease; font-size:12px; color:var(--muted); }
    .answer.open .answer-toggle .chevron { transform:rotate(180deg); }
    .answer-body { display:none; padding:20px 24px; background:var(--surface); border-top:1px solid var(--line); font-size:17px; line-height:1.6; }
    .answer.open .answer-body { display:block; }
    .verbatim { background:var(--code-bg); border-left:3px solid var(--accent); padding:10px 14px; border-radius:0 8px 8px 0; font-style:italic; margin:0 0 12px; }
    .answer-body ul { margin:6px 0 0; padding-left:20px; } .answer-body li { margin-bottom:6px; }

    /* tables */
    .comp-table { width:100%; border-collapse:collapse; margin:12px 0; font-size:16px; }
    .comp-table th, .comp-table td { border:1px solid var(--line); padding:8px 12px; text-align:left; vertical-align:top; }
    .comp-table th { background:var(--surface-2); font-weight:700; }
    .comp-table tr:nth-child(even) td { background:var(--surface-2); }
    .tbl-wrap { overflow-x:auto; }

    code, pre { font-family:'JetBrains Mono',monospace; font-size:15px; }
    pre { background:var(--code-bg); border:1px solid var(--line); border-radius:8px; padding:12px 14px; overflow-x:auto; color:var(--ink); line-height:1.5; }
    p code, li code, td code { background:var(--chip); padding:1px 5px; border-radius:4px; }
    .mono { font-family:'JetBrains Mono',monospace; }
    .matrix { font-family:'JetBrains Mono',monospace; font-size:15.5px; background:var(--code-bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px; white-space:pre; overflow-x:auto; }
    .kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:15.5px; }
    .kv .k { color:var(--muted); font-weight:600; }
    .badge-cls { display:inline-block; padding:6px 14px; border-radius:6px; font-weight:800; font-size:17px; letter-spacing:.3px; }
    .roadmap { max-width:1300px; margin:0 auto; } .roadmap svg { width:100%; height:auto; display:block; }
    .svgfig { max-width:1200px; margin-left:auto; margin-right:auto; }
    .roadmap text { font-family:'Inter',sans-serif; }
    .svgfig svg { width:100%; height:auto; display:block; }
    .hidden { display:none !important; }
    .small { font-size:15.5px; color:var(--muted); }
    .log { font-family:'JetBrains Mono',monospace; font-size:14px; background:var(--code-bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; max-height:170px; overflow:auto; white-space:pre-wrap; }
    .pill { display:inline-block; font-size:13px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--chip); color:var(--muted); }
    .steps-nav { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
    .steps-nav button { font-size:15px; }
  /* Guided workbook layout */
:root{--accent:#007caa;--accent-ink:#006c95;--accent-soft:#e1f4fa;--bg:#f5f7fa;--surface:#fff;--surface-2:#f2f5f9;--ink:#172639;--muted:#53657a;--line:#d8e0ea;--shadow:none;font-size:16px}
:root[data-theme=dark]{--bg:#0c1420;--surface:#131f2f;--surface-2:#19283b;--line:#304158;--ink:#eef4fc;--muted:#afbed0;--accent:#56cbea;--accent-ink:#8ce2f5;--accent-soft:#11394a}
*{min-width:0}body{font-size:16px;line-height:1.55;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;transition:none}html{scroll-behavior:auto}button,input,select{font:inherit}a{text-underline-offset:3px}img{height:auto;object-fit:contain}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:4px}input[type=range]{min-width:60px;max-width:100%;height:8px}input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--accent)}input[type=range]:focus-visible{outline:3px solid var(--accent)}[hidden]{display:none!important}
.workbook-header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:14px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:30}.workbook-brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:17px;font-weight:750}.brand-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--ink);color:var(--bg);font-size:16px;letter-spacing:-1px}.brand-sub{display:block;color:var(--muted);font-size:12px;font-weight:500;margin-top:2px}.header-actions{display:flex;gap:20px;align-items:center;font-size:13px;color:var(--muted)}.theme-toggle-btn{width:40px;height:40px;font-size:18px}.workbook-shell{max-width:1600px;margin:auto;display:grid;grid-template-columns:236px minmax(0,1fr)}.sidebar{height:calc(100dvh - 78px);position:sticky;top:78px;padding:28px 14px 16px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:15px;overflow:auto}.sidebar-label{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--muted);padding-left:10px}.chapter-nav{display:flex;flex-direction:column;gap:5px}.chapter-link{display:flex;gap:12px;align-items:center;padding:10px;border-radius:9px;text-decoration:none;color:var(--muted);font-size:14px;font-weight:650;line-height:1.35}.chapter-link small{display:block;margin-top:3px;font-size:11px;font-weight:450;line-height:1.4}.chapter-num{font:12px ui-monospace,monospace;opacity:.85}.chapter-link:hover{background:var(--surface-2);color:var(--ink)}.chapter-link[aria-current=page]{background:var(--accent-soft);color:var(--accent-ink)}.chapter-link[aria-current=page] .chapter-num{color:var(--accent);font-weight:800}.sidebar-footer{padding:18px 10px 0;border-top:1px solid var(--line);font-size:12px;color:var(--ink);margin-top:auto}.sidebar-footer span{font-size:11px;color:var(--muted)}.lesson-content{padding:26px clamp(20px,3vw,48px) 32px;max-width:1240px;width:100%;margin:auto}.chapter-heading{display:flex;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted);margin-bottom:18px}.chapter-heading>span:first-child{font-weight:700;color:var(--accent-ink)}.lesson-steps{display:flex;align-items:stretch;gap:8px;margin:0 0 28px;padding-bottom:12px;border-bottom:1px solid var(--line)}.step-link{display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:6px;text-decoration:none;color:var(--muted);font-size:12px;line-height:1.35;flex:1}.step-link span{display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;border:1px solid var(--line);border-radius:50%;font-size:12px;font-weight:650}.step-link[aria-current=step]{color:var(--accent-ink);background:var(--accent-soft);font-weight:650}.step-link[aria-current=step] span{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.lesson-title{margin-bottom:20px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.1px;font-weight:700;color:var(--accent-ink)}.lesson-title h1{font-size:clamp(25px,2.6vw,36px);letter-spacing:-1px;line-height:1.2;margin:7px 0 9px;font-weight:750}.lesson-title p{color:var(--muted);margin:0;font-size:16px;max-width:800px}.primer-equation{padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:9px;font-size:20px;text-align:center;overflow-x:auto;margin:15px 0 8px}.symbol-key{font-size:13px;color:var(--muted);text-align:center;margin:6px 0 20px}.symbol-key:empty{display:none}.primer-visual{max-width:650px;padding:22px 40px;margin:18px auto;border:1px solid var(--line);background:var(--surface);border-radius:12px}.primer-visual svg{width:100%;height:auto;max-height:310px}.insight-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 25px;color:var(--accent-ink);font-size:14px;margin:18px 0}.insight-row>span{background:var(--accent-soft);padding:9px 14px;border-radius:7px}.try{display:flex;align-items:baseline;gap:10px;font-size:14px;color:var(--muted);margin:16px 0}.try>span{flex-shrink:0;color:var(--accent-ink);font-size:11px;text-transform:uppercase;letter-spacing:.7px;font-weight:750}.panel{background:var(--surface);padding:18px;border:1px solid var(--line);border-radius:12px;margin:16px 0;box-shadow:none}.plbl{font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:12px}.plbl>.ctl{font-size:13px}.btnrow{gap:7px;margin:12px 0}.btnrow .ctl{margin-left:0!important}.ctl{font-size:13px;gap:7px}.btn,button.btn{font-size:13px;padding:9px 12px;min-height:40px;font-weight:600;border-radius:7px}.btn.on{box-shadow:none}.slider-row{grid-template-columns:minmax(110px,auto) minmax(60px,1fr) auto;gap:15px;font-size:14px;margin:14px 0}.slider-row label{white-space:normal}.fx{font-family:ui-monospace,monospace;font-size:13px;background:var(--surface-2)}.card,.fig{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface);padding:0}.ct{font-size:13px;padding:10px 12px;background:var(--surface-2);color:var(--ink);font-weight:650;line-height:1.4;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}.cap{font-size:13px;line-height:1.5;padding:10px 12px;color:var(--muted)}.note{font-size:14px;line-height:1.5;margin:12px 0;padding:12px;background:var(--surface-2);border-radius:7px;color:var(--muted)}canvas{display:block;width:100%;height:auto!important;max-width:100%;border-radius:0;touch-action:pan-y}#hd-img,#hg-canvas{touch-action:none}.card canvas{width:100%}.statrow{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:12px 0}.stat{padding:9px 10px;border-radius:7px}.stat .v{font-size:23px;overflow-wrap:anywhere;font-family:ui-monospace,monospace}.stat .l{display:block;font-size:11px;letter-spacing:.25px;line-height:1.4;margin-top:5px}.secondary-stat{display:none}.legend{display:flex;flex-wrap:wrap;gap:6px 15px;padding:10px 12px;font-size:12px;line-height:1.4}.legend span{display:flex;align-items:center;gap:5px}.legend .dot{display:inline-block;width:8px;height:8px;border-radius:50%}.legend .sq{display:inline-block;width:14px;height:3px}.deeper{margin:16px 0;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.deeper>summary{padding:13px 16px;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer;list-style-position:inside;min-height:44px}.deeper>summary:hover{color:var(--accent-ink);background:var(--surface-2)}.deeper[open]>summary{border-bottom:1px solid var(--line);color:var(--ink)}.detail-body{padding:16px}.deeper>.ctl{padding:12px 16px;display:flex}.compact{margin:10px 0}.compact>summary{padding:9px 12px;font-size:13px}.deeper .panel{margin:8px 0}.deeper .flow{grid-template-columns:repeat(2,minmax(0,1fr))}.flow .step{font-size:14px}.flow .step::before{display:none}.flow .step .t{font-size:15px}.flow .step .eq{font-size:14px}.duo,.duo.w32,.duo.w23{grid-template-columns:repeat(2,minmax(0,1fr))}.trio{grid-template-columns:repeat(3,minmax(0,1fr))}.quad{grid-template-columns:repeat(2,minmax(0,1fr))}.matrix{font:13px/1.6 ui-monospace,monospace;margin:10px;max-width:100%}.small{font-size:13px}.log{font-size:12px}.kv{font-size:13px;padding:12px;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.kv>*{overflow-wrap:anywhere}.phase-track{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.phase-track span{flex:1;text-align:center;padding:8px;border-radius:6px;font-size:12px;background:var(--surface-2);color:var(--muted)}.phase-track span.active{background:var(--accent-soft);color:var(--accent-ink);outline:1px solid var(--accent);font-weight:700}.phase-track span.done{color:var(--good-ink)}.loop-primer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0}.loop-primer>div{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px}.loop-primer b{display:block;font-size:13px;color:var(--accent);margin-bottom:15px}.loop-primer strong{display:block;font-size:19px}.loop-primer span{font-size:12px;color:var(--muted)}.loop-primer svg{width:100%;height:auto;margin-top:10px}.loop-primer text,.ratio-examples text{fill:var(--ink);font-size:14px}.ratio-examples svg{width:100%;height:auto}.recap-path{display:flex;align-items:center;gap:16px;justify-content:space-between;margin:26px 0}.recap-path span{background:var(--surface);border:1px solid var(--line);padding:18px 14px;border-radius:10px;text-align:center;flex:1;font-size:15px}.recap-path small{font-size:12px;color:var(--muted)}.lesson-footer{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr minmax(60px,120px) 1fr;align-items:center;gap:18px}.lesson-footer .button{justify-self:start}.lesson-footer .primary{justify-self:end}.button{display:inline-block;padding:11px 16px;border-radius:8px;border:1px solid var(--line);font-size:14px;text-decoration:none;font-weight:650;color:var(--ink)}.button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.button[aria-disabled=true]{opacity:.35;pointer-events:none}.lesson-footer>div{text-align:center;font-size:12px;color:var(--muted)}progress{display:block;width:100%;height:4px;margin-top:7px;accent-color:var(--accent)}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;padding:12px;background:var(--surface)}.skip-link:focus{top:10px}#r3-canvas{aspect-ratio:760/560}#sk-desc{min-width:620px}.card:has(#sk-desc){overflow:auto}#hx-plane{max-width:560px}.svgfig{overflow:auto}.svgfig svg{min-width:580px}.lesson-title h1:focus{outline:none}.katex-display{margin:.35em 0}.katex-error{white-space:normal}
@media(min-width:1450px){.lesson-content{padding-left:48px;padding-right:48px}.sidebar{padding-left:24px}.workbook-shell{grid-template-columns:252px minmax(0,1fr)}}
@media(max-width:1050px){.workbook-shell{grid-template-columns:190px minmax(0,1fr)}.sidebar{padding-left:10px;padding-right:10px}.chapter-link small{display:none}.chapter-link{min-height:44px}.lesson-content{padding:22px}.step-link{font-size:11px;padding:7px 4px}.chapter-heading>span:last-child{display:none}.loop-primer{grid-template-columns:repeat(2,minmax(0,1fr))}.trio{grid-template-columns:1fr}.primer-equation{font-size:17px}.duo.w32,.duo.w23{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.workbook-header{padding:0 16px;height:66px}.brand-sub{font-size:10px}.workbook-brand{font-size:15px}.header-actions{gap:12px}.header-actions>span{font-size:11px}.workbook-shell{display:block}.sidebar{position:sticky;top:66px;z-index:20;height:auto;display:block;padding:8px 12px;background:var(--bg);border-right:0;border-bottom:1px solid var(--line);overflow:auto}.sidebar-label,.sidebar-footer{display:none}.chapter-nav{flex-direction:row;gap:6px;width:max-content}.chapter-link{font-size:12px;gap:7px;padding:8px 10px;min-height:38px}.chapter-num{font-size:10px}.lesson-content{padding:20px 16px}.chapter-heading{display:none}.lesson-steps{margin-bottom:23px;gap:4px;overflow-x:auto}.step-link{font-size:11px;display:flex;flex-direction:column;align-items:flex-start;min-width:96px;flex:1}.step-link span{width:21px;height:21px}.lesson-title h1{font-size:28px;letter-spacing:-.6px}.lesson-title p{font-size:15px}.primer-equation{font-size:16px;padding:12px 8px}.symbol-key{font-size:12px}.primer-visual{padding:12px}.duo,.duo.w32,.duo.w23,.trio,.quad,.deeper .flow{grid-template-columns:1fr}.panel{padding:12px}.plbl{gap:10px}.plbl>span{width:100%}.slider-row{grid-template-columns:1fr auto;gap:8px}.slider-row label{grid-column:1/-1}.slider-row input{width:100%}.try{font-size:13px}.statrow{grid-template-columns:repeat(2,minmax(0,1fr))}.stat .v{font-size:22px}.loop-primer{gap:9px}.loop-primer>div{padding:12px}.recap-path{display:grid;grid-template-columns:1fr}.recap-path>b{text-align:center;transform:rotate(90deg)}.lesson-footer{grid-template-columns:1fr 50px 1fr;gap:8px}.button{font-size:12px;padding:10px}.detail-body{padding:12px}.matrix{font-size:12px}.flow{grid-template-columns:1fr}.insight-row{gap:8px;font-size:12px}#hd-img,#hx-img,#hg-canvas{scroll-margin-top:130px}.kv{font-size:12px}.comp-table{font-size:13px}.lesson-title{scroll-margin-top:130px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.sidebar,.workbook-header,.lesson-footer,.lesson-steps,.try,button{display:none!important}.workbook-shell{display:block}.lesson[hidden]{display:block!important}.lesson{break-before:page}.lesson-content{max-width:none;padding:0}.deeper{display:none}.panel{break-inside:avoid}body{background:white;color:black}}
.primer-visual{padding:14px 20px;max-width:650px}.primer-visual svg{max-height:235px}.sidebar{scrollbar-width:thin}.chapter-link{padding-top:9px;padding-bottom:9px}.sidebar-footer{padding-top:12px}.sidebar{padding-top:22px}.sidebar small{white-space:nowrap}.chapter-nav{gap:3px}@media(max-height:820px) and (min-width:761px){.sidebar-footer{display:none}}
.sidebar,.lesson-steps{scrollbar-width:none}.sidebar::-webkit-scrollbar,.lesson-steps::-webkit-scrollbar{display:none}.patch-primer svg{display:block;max-height:175px;width:100%}.patch-primer .cap{text-align:center}.patch-primer .cap>div{margin-top:8px;color:var(--accent-ink)}@media(max-width:760px){.patch-primer .card{display:grid;grid-template-columns:100px minmax(0,1fr)}.patch-primer .ct{grid-column:1/-1}.patch-primer svg{height:105px}.patch-primer .cap{text-align:left;align-self:center}}
.circle-comparison{padding:12px 14px;background:var(--surface-2);border-bottom:1px solid var(--line);display:grid;gap:4px}.circle-comparison strong{font-size:14px;color:var(--ink)}.circle-comparison span{font-size:12px;color:var(--muted)}.circle-comparison[data-state=different]{border-left:4px solid var(--warn)}.circle-comparison[data-state=different] strong{color:var(--warn)}.circle-comparison[data-state=close]{border-left:4px solid var(--good)}.circle-model-key{background:var(--surface-2);border-bottom:1px solid var(--line)}

/* Hough: keep the same numerical example visible through each teaching action. */
.hough-example { margin: 22px 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.example-prompt { padding: 20px 22px 14px; }
.example-prompt h2 { margin: 5px 0 6px; font-size: 22px; line-height: 1.3; letter-spacing: -.4px; }
.example-prompt p { margin: 0; color: var(--muted); font-size: 14px; max-width: 800px; }
.angle-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 22px 18px; }
.angle-choices .btn { padding: 9px 8px; display: flex; flex-direction: column; gap: 1px; }
.angle-choices small { display: block; font-weight: 400; font-size: 12px; margin-top: 2px; }
.hough-pair { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.hough-pair > * { min-width: 0; }
.hough-pair > :nth-child(2) { border-left: 1px solid var(--line); }
.example-figure { margin: 0; display: flex; flex-direction: column; }
.example-plot-title { font-size: 13px; font-weight: 650; padding: 12px 16px 6px; }
.hough-plot { width: 100%; min-width: 0; height: auto; display: block; margin: auto; max-height: 365px; overflow: visible; }
.hough-plot text { font-family: inherit; font-size: 13px; }
.example-grid { stroke: var(--line); stroke-width: .7; }
.example-axis { stroke: var(--muted); stroke-width: 1.2; }
.example-axis-text { fill: var(--muted); font-size: 12px !important; }
.example-candidate { stroke: var(--ink); stroke-width: 2.6; }
.example-normal { stroke: var(--warn); stroke-width: 2.5; stroke-dasharray: 6 4; }
.example-right-angle { stroke: var(--muted); stroke-width: 1.4; fill: none; }
.example-angle { stroke: var(--warn); stroke-width: 1.8; fill: none; }
.normal-label { fill: var(--warn); font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4; stroke-linejoin: round; }
.example-point-label { font-weight: 650; paint-order: stroke; stroke: var(--surface); stroke-width: 4; stroke-linejoin: round; }
.example-vote-label { fill: var(--ink); font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4; stroke-linejoin: round; }
.vote-guides { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; opacity: .65; }
.example-figure figcaption { font-size: 12px; line-height: 1.5; color: var(--muted); padding: 10px 16px 14px; margin-top: auto; }
.line-key,.normal-key { width: 18px; display: inline-block; vertical-align: middle; border-top: 2px solid var(--ink); margin-right: 3px; }
.normal-key { border-top: 2px dashed var(--warn); margin-left: 10px; }
.example-calculation { padding: 16px 22px; }
.example-calculation h3 { font-size: 13px; margin: 0 0 12px; font-weight: 650; }
.example-math { margin: 8px 0; padding: 3px 0; font-size: clamp(16px, 1.6vw, 20px); }
.example-result { color: var(--accent-ink); font-weight: 650; }
.example-answer { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.example-answer > span { font-size: 12px; color: var(--muted); }
.example-answer .example-math { margin: 3px 0; }
.example-answer p,.vote-collection p { font-size: 13px; color: var(--muted); margin: 3px 0 0; }
.example-vote { display: grid; gap: 3px; background: var(--accent-soft); border-radius: 8px; padding: 11px 14px; margin-top: 16px; }
.example-vote strong { font-size: 17px; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.example-vote > span:last-child { font-size: 12px; color: var(--muted); }
.hough-takeaway { font-size: 14px; color: var(--muted); margin: 16px 4px; }
.hough-takeaway b { color: var(--ink); }
.slope-bridge p { font-size: 14px; margin: 4px 0 12px; }
.vote-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.vote-stages button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 9px 8px; border: 0; border-right: 1px solid var(--line); border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.vote-stages button:last-child { border-right: 0; }
.vote-stages button.on { background: var(--surface); color: var(--accent-ink); border-bottom-color: var(--accent); }
.vote-stages button:hover { color: var(--accent-ink); }
.vote-stages button span { border: 1px solid currentColor; border-radius: 50%; width: 21px; height: 21px; display: grid; place-items: center; font-size: 11px; flex-shrink: 0; }
.hough-plots { grid-template-columns: 1fr 1.08fr; }
.example-angle-control { display: grid; grid-template-columns: auto minmax(90px, 1fr) 42px; gap: 15px; align-items: center; background: var(--surface-2); padding: 12px 20px; font-size: 13px; }
.example-angle-control[hidden] { display: none; }
.example-angle-control input { width: 100%; accent-color: var(--accent); }
.example-angle-control output { font-variant-numeric: tabular-nums; color: var(--accent-ink); font-weight: 700; text-align: right; }
.vote-working { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 20px; padding: 16px 22px; border-top: 1px solid var(--line); }
.vote-working > * { min-width: 0; }
.vote-working .example-math { font-size: 16px; }
.vote-summary { font-size: 19px; color: var(--accent-ink); text-align: right; font-weight: 650; }
.vote-table { font-size: 13px; width: 100%; border-collapse: collapse; white-space: nowrap; }
.vote-table caption { text-align: left; font-weight: 700; font-size: 13px; padding-bottom: 8px; color: var(--ink); }
.vote-table th,.vote-table td { padding: 7px 6px; text-align: left; border-bottom: 1px solid var(--line); }
.vote-table thead th { font-size: 11px; font-weight: 500; color: var(--muted); }
.vote-table td:last-child { font-size: 11px; }
.vote-collection { text-align: center; }
.vote-cell { border: 1px solid var(--accent); border-radius: 8px; padding: 8px 12px; background: var(--accent-soft); display: grid; gap: 1px; margin: 7px 0 12px; }
.vote-cell > span { font-size: 13px; }
.vote-cell strong { font-size: 23px; color: var(--accent-ink); }
.vote-cell small { font-size: 12px; color: var(--muted); }
.example-controls { border-top: 1px solid var(--line); padding: 14px 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; }
.example-controls > span { text-align: center; font-size: 12px; color: var(--muted); max-width: 350px; justify-self: center; }
.example-controls button:disabled { opacity: .35; cursor: default; }
.projection-open { margin: 8px 0 5px; color: var(--accent-ink); max-width: 100%; white-space: normal; }
.lesson-title .projection-open { margin-top: 14px; }
.projection-dialog { width: min(1040px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); overflow: auto; }
.projection-dialog::backdrop { background: rgb(8 15 28 / .65); }
.projection-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 22px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.projection-header h2 { font-size: 24px; line-height: 1.2; margin: 5px 0 0; letter-spacing: -.4px; }
.projection-header button { flex-shrink: 0; }
.projection-intro { font-size: 14px; color: var(--muted); margin: 16px 22px 12px; }
.projection-x { color: var(--accent-ink); }
.projection-y { color: var(--purple-ink); }
.projection-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 22px 16px; }
.projection-stages .btn { justify-content: center; }
.projection-layout { display: grid; grid-template-columns: 1.45fr 1fr; border-top: 1px solid var(--line); }
.projection-layout > * { min-width: 0; }
.projection-layout figure { margin: 0; padding: 12px 0 0; }
#projection-plot { display: block; width: 100%; height: auto; max-height: 350px; scroll-margin-top: 110px; }
#projection-plot text { font-family: inherit; font-size: 14px; }
#projection-plot .proof-part-label { font-size: 20px; font-style: italic; font-weight: 700; }
.projection-layout figcaption { font-size: 13px; line-height: 1.5; color: var(--muted); padding: 0 22px 18px; min-height: 58px; }
.proof-x { stroke: var(--accent-ink); }
.proof-y { stroke: var(--purple-ink); }
.proof-x-text { fill: var(--accent-ink); }
.proof-y-text { fill: var(--purple-ink); }
.proof-x-text,.proof-y-text { font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 4; stroke-linejoin: round; }
.proof-guide { stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 5 5; }
.proof-normal { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 6 4; }
.proof-candidate { stroke: var(--ink); stroke-width: 2.5; }
.proof-corner { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.proof-slide { transform: translate(var(--slide-x), var(--slide-y)); animation: slide-projection .9s ease-in-out; }
@keyframes slide-projection { from { transform: translate(0,0); } to { transform: translate(var(--slide-x), var(--slide-y)); } }
.projection-explanation { padding: 24px 22px; border-left: 1px solid var(--line); align-self: stretch; }
.projection-explanation h3 { font-size: 20px; line-height: 1.3; margin: 6px 0 14px; }
.projection-explanation p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 20px; }
.projection-equation { margin: 14px 0; padding: 5px 0; font-size: 19px; }
#projection-ratio { font-size: 16px; color: var(--muted); }
#projection-number { font-size: 23px; }
.projection-dialog[data-stage="0"] #projection-equation,.projection-dialog[data-stage="0"] #projection-number { color: var(--accent-ink); }
.projection-dialog[data-stage="1"] #projection-equation,.projection-dialog[data-stage="1"] #projection-number { color: var(--purple-ink); }
.projection-dialog[data-stage="2"] #projection-number { color: var(--warn); }
.projection-lengths { display: flex; height: 32px; border-radius: 5px; overflow: hidden; margin: 22px 0 15px; font-size: 14px; }
.projection-lengths span { display: grid; place-items: center; color: var(--surface); background: var(--accent-ink); flex: 4; }
.projection-lengths span + span { background: var(--purple-ink); flex: 3; }
.projection-general { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 18px; }
.projection-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--line); }
.projection-footer span { font-size: 12px; color: var(--muted); }
#projection-step-title:focus { outline: none; }
@media(max-width:760px) {
  .projection-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .projection-header { padding: 14px; }
  .projection-header h2 { font-size: 20px; }
  .projection-header .eyebrow { font-size: 9px; letter-spacing: .4px; }
  .projection-header button { font-size: 12px; padding: 7px 8px; }
  .projection-intro { margin: 14px; font-size: 13px; }
  .projection-stages { padding: 0 12px 12px; gap: 4px; }
  .projection-stages .btn { font-size: 11px; padding: 9px 2px; }
  .projection-layout { grid-template-columns: 1fr; }
  .projection-layout figcaption { padding: 0 14px 14px; min-height: 0; }
  .projection-explanation { border-left: 0; border-top: 1px solid var(--line); padding: 18px; }
  .projection-explanation p { margin-bottom: 14px; }
  .projection-footer { flex-direction: column; align-items: stretch; padding: 14px; gap: 9px; }
  .projection-footer .btn { justify-content: center; }
}
/* Keep the free explorer sharp at any display density or browser zoom. */
.hd-plot { display: block; width: 100%; height: auto; aspect-ratio: 1; background: var(--canvas-bg); }
.hd-plot text { font-family: inherit; }
.hd-grid { fill: none; stroke: #293649; stroke-width: 1; }
.hd-axis-text { fill: #cbd5e1; font-size: 20px; }
.hd-point-label { fill: #f8fafc; font-size: 21px; font-weight: 550; paint-order: stroke; stroke: var(--canvas-bg); stroke-width: 5; stroke-linejoin: round; }
.hd-fitted-line { fill: none; stroke: #fbbf24; stroke-width: 3.5; }
.hd-normal { fill: none; stroke: #f87171; stroke-width: 2; opacity: .8; }
.hd-point { stroke: #fff; stroke-width: 2; }
.hd-peak { fill: none; stroke: #fbbf24; stroke-width: 3; }
.hd-bin-cell { fill: none; stroke: #fff; stroke-width: 1.5; }
#hd-img { cursor: crosshair; user-select: none; -webkit-user-select: none; }
#hd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hd-plots .ct { min-height: 76px; align-content: center; }
.hd-plots .cap { margin: 0; min-height: 66px; }
@media (max-width:1100px) { .hd-plots { grid-template-columns: 1fr; } .hd-plots .ct { min-height: 0; } }
@media (max-width:760px) {
  .hd-axis-text { font-size: 24px; }
  .hd-point-label { font-size: 24px; }
  #hd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.example-prompt { scroll-margin-top: 90px; }
#hv-title:focus { outline: none; }
@media (max-width:1050px) and (min-width:761px) {
  .example-prompt { padding: 16px; }
  .example-calculation { padding: 14px; }
  .example-math { font-size: 15px; }
  .vote-working { padding: 16px 12px; gap: 12px; }
  .vote-working .example-math { font-size: 13px; }
  .vote-table { font-size: 11px; }
  .vote-table th,.vote-table td { padding: 6px 3px; }
}
@media (max-width:760px) {
  .example-prompt { padding: 16px 14px; }
  .example-prompt { scroll-margin-top: 134px; }
  .example-prompt h2 { font-size: 21px; }
  .example-prompt p { font-size: 13px; }
  .angle-choices { padding: 0 12px 14px; gap: 5px; }
  .angle-choices .btn { font-size: 13px; padding: 8px 2px; }
  .angle-choices small { font-size: 10px; }
  .hough-pair,.hough-plots { grid-template-columns: 1fr; }
  .hough-pair > :nth-child(2) { border-left: 0; border-top: 1px solid var(--line); }
  .hough-plot { max-height: 350px; }
  .example-calculation { padding: 16px; }
  .example-math { font-size: 17px; }
  .vote-stages button { flex-direction: column; gap: 5px; font-size: 11px; padding: 10px 3px; }
  .example-angle-control { grid-template-columns: 1fr 42px; gap: 8px; padding: 12px 14px; }
  .example-angle-control label { grid-column: 1 / -1; }
  .vote-working { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .vote-working .example-math { font-size: 14px; }
  .vote-summary { text-align: left; font-size: 17px; }
  .vote-collection { padding-top: 5px; }
  .example-controls { grid-template-columns: auto 1fr; gap: 12px; padding: 14px; }
  .example-controls > span { grid-column: 1/-1; grid-row: 1; max-width: none; text-align: left; justify-self: start; }
  .example-controls > :last-child { justify-self: end; }
  .vote-table { font-size: 12px; }
  .vote-table th,.vote-table td { padding: 7px 4px; }
}

/* Focused prerequisites: one experiment, then the next mathematical step. */
.concept { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; margin: 18px 0; scroll-margin-top: 92px; }
.concept-stages { display: grid; grid-template-columns: repeat(var(--stages, 4), minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--surface-2); }
#canny-pipeline .concept-stages { --stages: 5; }
#edges-4 .concept-stages { --stages: 3; }
.concept-stages button { border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); min-height: 48px; padding: 10px 5px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.concept-stages button:last-child { border-right: 0; }
.concept-stages button.on { color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 0 -3px var(--accent); }
.concept-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.concept-split > * { min-width: 0; }
.concept-split > :nth-child(2) { border-left: 1px solid var(--line); }
.concept-figure { margin: 0; padding: 16px 12px 0; }
.concept-figure img { display: block; width: 100%; height: auto; border-radius: 5px; }
.concept-figure .pixel-image { image-rendering: pixelated; }
.concept-figure figcaption { padding: 12px 4px 16px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.concept-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.concept-svg text { fill: var(--ink); font-family: inherit; font-size: 14px; }
.concept-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.concept-blue { stroke: var(--accent-ink); }
.concept-purple { stroke: var(--purple-ink); }
.concept-gold { stroke: var(--warn); }
.svg-math { font-size: 15px; color: var(--ink); }
.svg-math > div { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.svg-math .katex { font-size: 1em; }
.svg-math.blue { color: var(--accent-ink); }
.svg-math.purple { color: var(--purple-ink); }
.svg-math.gold { color: var(--warn); }
.svg-math.white { color: #fff; }
.svg-math.on-plot-blue { color: #38bdf8; }
.svg-math.on-plot-purple { color: #c4b5fd; }
.concept-explanation { padding: 24px 20px; align-self: stretch; }
.concept h2 { font-size: 23px; line-height: 1.25; margin: 8px 0 14px; letter-spacing: -.4px; }
.concept p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 10px 0 16px; }
.concept-math { margin: 17px 0; font-size: 17px; text-align: center; min-width: 0; }
.concept-math .katex-display { margin: .4em 0; }
.concept-answer { padding: 12px 4px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 7px; }
.concept-metric { font-size: 22px; font-weight: 700; color: var(--accent-ink); margin: 18px 0; }
.concept-footer { display: flex; gap: 16px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 15px 18px; }
.concept-footer > span { font-size: 12px; line-height: 1.5; color: var(--muted); max-width: 330px; text-align: center; }
.concept-footer .btn { flex-shrink: 0; }
.concept-footer .btn:disabled { opacity: .35; cursor: default; }
.concept-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; background: var(--surface-2); font-size: 13px; }
.concept-toolbar input { min-width: 80px; flex: 1; accent-color: var(--accent); }
.concept-toolbar output { min-width: 50px; color: var(--accent-ink); }
.concept-toolbar .btnrow { margin: 0; }
.concept-divider { border-top: 1px solid var(--line); }
.concept-plot-title { font-size: 13px; font-weight: 650; padding: 0 4px 12px; }
.concept .concept-footnote,.concept-footnote { padding: 0 16px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.concept-source { font-size: 11px; margin: 20px 0 0; }
.concept-source a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.code-primer { padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.code-primer pre { margin: 12px 0; padding: 0; background: transparent; font-size: 13px; }
.primer-links { display: flex; gap: 10px 22px; flex-wrap: wrap; font-size: 13px; }
.primer-links a { color: var(--accent-ink); }
.kernel-math[data-size="5"] { font-size: 17px; }
.kernel-math[data-size="7"] { font-size: 14px; }
#sobel-definition { font-size: 14px; }
.norm-card { padding: 14px 12px 2px; margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; }
.norm-card code { font-size: 13px; }
.norm-card:first-of-type { border-color: var(--accent); }
.norm-card .concept-math { font-size: 22px; }
.nms-primer { padding: 20px; }
.nms-row { display: grid; grid-template-columns: 60px minmax(0,1fr); align-items: center; gap: 10px; font-size: 13px; }
.hyst-key { display: grid; grid-template-columns: 14px minmax(0,1fr); align-items: center; gap: 14px 10px; font-size: 14px; margin: 24px 0; }
.hyst-swatch { width: 14px; height: 14px; border-radius: 3px; }
.hyst-swatch.strong { background: #0369a1; }
.hyst-swatch.weak { background: #7c3aed; }
.hyst-swatch.discarded { background: var(--surface-2); border: 1px solid var(--line); }
.threshold-controls,.shift-controls { display: grid; grid-template-columns: auto minmax(60px,1fr) 74px; }
.threshold-controls input,.shift-controls input { width: 100%; }
#hyst-bridge { grid-column: 1/-1; justify-self: start; }
.toy-gradients,.eigen-reading { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--line); }
.toy-gradients > div,.eigen-reading > div { padding: 18px; min-width: 0; }
.toy-gradients > div + div,.eigen-reading > div + div { border-left: 1px solid var(--line); }
.toy-gradients > div > span { font-size: 12px; color: var(--muted); }
.toy-gradients .concept-math { font-size: 15px; }
#hm-equation { font-size: 15px; }
#hm-answer { font-size: 15px; }
#hm-title:focus { outline: none; }
#harris-eigen .concept-split { grid-template-columns: repeat(2,minmax(0,1fr)); }
.latex-matrix { font-family: inherit; white-space: normal; text-align: center; overflow: auto; font-size: 15px; padding: 16px 8px; }
#hx-M { font-size: 15px; }
#hx-explain .katex { font-size: 1em; }
@media(max-width:1100px) and (min-width:761px) {
  .concept-explanation { padding: 18px 12px; }
  .concept h2 { font-size: 21px; }
  #harris-matrix .concept-split { grid-template-columns: 1fr; }
  #harris-matrix .concept-split > :nth-child(2) { border-left: 0; border-top: 1px solid var(--line); }
  #hm-surface { max-height: 320px; }
  .kernel-math[data-size="7"] { font-size: 12px; }
  #sobel-definition { font-size: 12px; }
}
@media(max-width:760px) {
  .concept { scroll-margin-top: 134px; }
  .concept-split,#harris-eigen .concept-split,.toy-gradients,.eigen-reading { grid-template-columns: 1fr; }
  .concept-split > :nth-child(2),.toy-gradients > div + div,.eigen-reading > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .concept-explanation { padding: 18px 14px; }
  .concept h2 { font-size: 22px; }
  .concept-stages button { font-size: 11px; padding: 10px 3px; }
  .concept-footer { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .concept-footer > span { order: -1; width: 100%; max-width: none; text-align: left; }
  .concept-toolbar { padding: 12px; gap: 9px; }
  .concept-toolbar > label { width: 100%; }
  .threshold-controls,.shift-controls { grid-template-columns: minmax(80px,1fr) 75px; }
  .threshold-controls label,.shift-controls label { grid-column: 1/-1; }
  .concept-math { font-size: 16px; }
  #hm-equation { font-size: 12px; }
  #hm-working,#hm-answer { font-size: 13px; }
  #he-takeaway { font-size: 12px; }
  .nms-primer { padding: 16px 10px; }
  .nms-row { grid-template-columns: 45px minmax(0,1fr); gap: 3px; }
  .nms-row .concept-math { font-size: 14px; }
  .code-primer { padding: 14px 10px; }
  .code-primer pre { font-size: 11px; }
  .concept-svg .svg-math { font-size: 17px; }
  #he-cuts .svg-math { font-size: 15px; }
}
.math-plot-wrap { position: relative; }
.plot-formula { position: absolute; color: #e2e8f0; pointer-events: none; font-size: 12px; line-height: 1; padding: 3px; background: rgb(6 11 22 / .55); border-radius: 3px; }
.plot-formula .katex { font-size: 1em; }
.axis-left { left: 0; top: 50%; transform: translateY(-100%); }
.axis-right { right: 0; top: 50%; transform: translateY(-100%); }
.axis-top { top: 0; left: 50%; }
.axis-bottom { bottom: 0; left: 50%; }
.axis-lambda-x { right: 2%; bottom: 2%; }
.axis-lambda-y { left: 1%; top: 2%; }
.axis-corner { left: 48%; top: 18%; color: #86efac; font-size: 11px; }
.plot-equation { text-align: center; padding: 9px; font-size: 13px; color: var(--muted); }
#hx-R { font-size: 18px; }
@media(max-width:760px) {
  #hx-M { font-size: 14px; }
  #hx-l1,#hx-l2,#hx-R { font-size: 18px; }
}