@charset "UTF-8"; /* ============================================================ LLM Engineering — Hands-On Course Shared stylesheet · Professional LIGHT theme ============================================================ */ :root{ --bg:#f4f6fb; /* page background */ --bg-soft:#eef1f8; /* figure / inset background */ --panel:#ffffff; /* cards */ --panel-2:#f0f3fa; /* secondary panels / hovers */ --ink:#1f2733; /* primary text */ --ink-soft:#3f4859; /* body text */ --muted:#6b7386; /* secondary text */ --line:#dde3ee; /* borders */ --brand:#4f6bed; /* primary accent */ --brand-2:#7c53e0; /* secondary accent */ --accent:#0e9bb5; /* teal accent (darkened for light bg) */ --green:#1a9f6b; --amber:#b7791f; --red:#d6455f; --code-bg:#f6f8fc; /* code block background */ --code-line:#e3e8f2; /* code block border */ --code-ink:#2b3140; /* code base text */ --radius:14px; --maxw:1240px; --adrail:340px; /* reserved empty right rail for a future ad unit (wide screens) */ } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background: radial-gradient(1100px 700px at 82% -12%, #e7ecfb 0%, transparent 60%), radial-gradient(800px 500px at -5% 8%, #e6f4f6 0%, transparent 55%), var(--bg); background-attachment:fixed; color:var(--ink); line-height:1.7; font-size:16.5px; } a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} code,pre{font-family:"SF Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace} /* layout */ /* Foldable far-left sidebar. The sidebar is fixed to the extreme left; .wrap reserves its width via padding-left so the reading column centres in the remaining space. Collapsing slides the sidebar out and reclaims the space. */ .wrap{display:block;padding-left:290px;transition:padding-left .25s ease} nav.side{ position:fixed;left:0;top:0;width:290px;height:100vh;overflow-y:auto; padding:24px 16px 60px;border-right:1px solid var(--line);z-index:60; background:linear-gradient(180deg,#ffffff,#f5f7fc); transition:transform .25s ease; } body.nav-collapsed .wrap{padding-left:0} body.nav-collapsed nav.side{transform:translateX(-100%)} /* When collapsed, the content is flush-left and the corner button would sit over the header's eyebrow/title — indent the header text to clear it. */ body.nav-collapsed header.ch{padding-left:60px} html.nav-collapsed-init header.ch{padding-left:60px} /* Pre-paint collapse: set by the inline script from localStorage so a remembered "hidden" menu never flashes open when navigating (e.g. clicking Next). Mirrors the body.nav-collapsed rules but keyed on , which is available before renders. No transition here — must be instant. */ html.nav-collapsed-init nav.side{transform:translateX(-100%);transition:none} html.nav-collapsed-init .wrap{padding-left:0} /* floating toggle button — pinned to the top-left corner of the menu bar, in both open and collapsed states so it never moves. */ #navToggle{ position:fixed;top:8px;left:12px;z-index:70; width:34px;height:34px;border-radius:9px;cursor:pointer; border:1px solid var(--line);background:#fff;color:var(--brand); font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center; box-shadow:0 2px 8px rgba(20,26,36,.12);transition:background .15s; } #navToggle:hover{background:var(--panel-2)} /* Persistent brand badge, fixed top-right, always visible while scrolling. A pill with the logo mark + "AI Engineering / Zero to Production" text, a bit larger than the sidebar mark. Sits above the (currently hidden) ad-rail; links home. Hidden on narrow screens. */ #brandFixed{position:fixed;top:10px;right:16px;z-index:65; display:flex;flex-direction:column;align-items:flex-end;gap:2px; padding:6px 14px 7px;border-radius:12px;background:var(--panel);border:1px solid var(--line); box-shadow:0 2px 12px rgba(20,26,36,.16);transition:transform .15s,box-shadow .15s} #brandFixed:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(79,107,237,.35)} #brandFixed .bf-home{display:flex;align-items:center;gap:10px;text-decoration:none} #brandFixed .bf-home svg{display:block;width:32px;height:32px;border-radius:9px;flex:0 0 auto} #brandFixed .bf-txt{display:flex;flex-direction:column;line-height:1.15} #brandFixed .bf-txt b{font-size:14px;color:var(--ink);font-weight:700} #brandFixed .bf-txt span{font-size:11px;color:var(--muted)} #brandFixed .bf-links{font-size:11px} #brandFixed .bf-links a{color:var(--brand);text-decoration:none} #brandFixed .bf-links a:hover{text-decoration:underline} #brandFixed .bf-links .sep{color:var(--line);margin:0 5px} @media (max-width:1100px){#brandFixed .bf-txt,#brandFixed .bf-links{display:none} #brandFixed{padding:6px}} @media (max-width:940px){#brandFixed{display:none}} /* dim backdrop when the sidebar is open as an overlay (mobile) */ #navBackdrop{display:none;position:fixed;inset:0;background:rgba(15,20,35,.35);z-index:55} nav.side .brand{display:flex;gap:10px;align-items:center;margin-bottom:8px;padding-left:44px;min-height:34px} nav.side .brand .dot{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 4px 14px rgba(79,107,237,.35);flex:0 0 auto} /* inline SVG brand logo (replaces the old .dot square) — same box + shadow */ nav.side .brand .brand-logo{width:32px;height:32px;border-radius:9px;box-shadow:0 4px 14px rgba(79,107,237,.35);flex:0 0 auto;display:block} nav.side .brand b{font-size:14.5px} nav.side .brand span{display:block;font-size:11px;color:var(--muted)} /* small logo in the footer watermark */ .wm .wm-logo{width:18px;height:18px;border-radius:5px;vertical-align:-4px;margin-right:6px;display:inline-block} nav.side a.home{display:block;font-size:12.5px;color:var(--accent);margin:6px 0 14px} nav.side .part{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:16px 0 5px;padding-left:8px} /* group emoji, enlarged 20% and vertically centered with the label */ nav.side .part .gi{font-size:1.2em;line-height:1;vertical-align:-2px;letter-spacing:0} /* collapsible group headers: whole header is a click target with a +/- toggle on the LEFT */ nav.side .part.grp{cursor:pointer;user-select:none;display:flex;align-items:center;gap:7px;padding-right:8px;border-radius:6px} nav.side .part.grp:hover{color:var(--brand);background:var(--panel-2)} nav.side .part.grp .car{flex:0 0 auto;width:14px;height:14px;display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;line-height:1;color:var(--brand);border:1px solid var(--line);border-radius:4px;background:#fff} nav.side .part.grp:hover .car{border-color:var(--brand)} nav.side .part.grp.collapsed + ul{display:none} nav.side ul{list-style:none;margin:0;padding:0} /* tree structure: submenu items are indented under their group header, with a vertical spine and little branch ticks so they read as children, not peers. */ nav.side .part.grp + ul{position:relative;margin:2px 0 4px 16px;padding-left:12px} nav.side .part.grp + ul::before{content:"";position:absolute;left:0;top:2px;bottom:8px;width:1px;background:var(--line)} nav.side .part.grp + ul > li{position:relative} nav.side .part.grp + ul > li::before{content:"";position:absolute;left:-12px;top:15px;width:9px;height:1px;background:var(--line)} nav.side li a{display:block;padding:6px 10px;border-radius:8px;color:var(--ink-soft);font-size:13px;transition:.15s} nav.side li a:hover{background:var(--panel-2);color:var(--brand);text-decoration:none} nav.side li a.active{background:linear-gradient(135deg,rgba(79,107,237,.12),rgba(124,83,224,.12));color:var(--brand);border:1px solid #d3d9ee;font-weight:700} nav.side li a.active .n{color:var(--brand);font-weight:700} /* the two top quick-links (Course home / Complete Python) are utility links, not the page title — keep them understated so the "LLM Engineering" brand above stays the clear root header. A subtle underline marks the active one. */ nav.side a.home.active{font-weight:500;text-decoration:underline;text-underline-offset:3px} nav.side li a .n{color:var(--muted);font-variant-numeric:tabular-nums;margin-right:4px} main{max-width:var(--maxw);margin:0;width:100%;padding:0 44px 120px} /* Wide screens: reserve a right rail for a future ad unit. DISABLED while ads are off so the content uses the full width (no empty 340px gap). RE-ENABLE with the ads: uncomment. @media(min-width:1500px){ .wrap{padding-right:var(--adrail)} body.nav-collapsed .wrap{padding-right:var(--adrail)} } */ /* Right-rail ad slot. Sits in the reserved rail, fixed alongside the content, only on wide screens (>=1500px). Hidden everywhere else so laptops/mobile aren't cluttered. Paste your AdSense unit inside .adrail (see the placeholder in each page). */ /* ADS DISABLED until the site is live + AdSense-approved. The .adrail markup stays in every page; this single rule hides it everywhere. TO RE-ENABLE after approval: delete the "!important" hide below, paste your ad unit into each .adrail, and restore the .wrap padding-right (--adrail) rule further up. */ .adrail{display:none !important} /* --- Styling kept for when ads are re-enabled (currently inert because of the hide above) --- @media(min-width:1500px){ .adrail{display:block;position:fixed;top:84px;right:16px;width:300px;max-height:calc(100vh - 110px);overflow:hidden;z-index:5} .adrail .adlabel{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;text-align:center;user-select:none} .adrail .adbox{min-height:250px;background:var(--panel-2);border:1px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;text-align:center;padding:10px} .adrail ins.adsbygoogle{display:block;width:300px} } */ /* chapter header */ header.ch{margin:0 -44px 40px;padding:52px 44px 40px;border-bottom:1px solid var(--line); background:radial-gradient(700px 300px at 88% 0%,rgba(124,83,224,.12),transparent 60%), radial-gradient(500px 260px at 0% 20%,rgba(14,155,181,.10),transparent 55%), linear-gradient(180deg,#ffffff,#f3f6fc);} header.ch .eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-weight:600} header.ch h1{font-size:34px;line-height:1.15;margin:12px 0 10px;letter-spacing:-.4px;color:#141a24} header.ch p.lede{font-size:17px;color:var(--ink-soft);margin:0;max-width:680px} header.ch .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} header.ch .facts span{font-size:12px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);padding:5px 11px;border-radius:999px;box-shadow:0 1px 2px rgba(20,26,36,.04)} h2{font-size:24px;margin:44px 0 6px;letter-spacing:-.2px;padding-top:10px;border-top:1px solid var(--line);color:#141a24} h2:first-of-type{border-top:0} h3{font-size:18.5px;margin:26px 0 6px;color:#1a212d} h4{font-size:15px;margin:18px 0 4px;color:var(--accent);letter-spacing:.2px} p{margin:11px 0} ul,ol{margin:11px 0;padding-left:24px} li{margin:6px 0} hr.soft{border:0;border-top:1px solid var(--line);margin:32px 0} b,strong{color:#141a24} /* objectives box */ .objectives{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:16px 20px;margin:22px 0;box-shadow:0 1px 3px rgba(20,26,36,.05)} .objectives h4{margin:0 0 6px;color:var(--accent)} .objectives ul{margin:4px 0 0} /* ── Textbook-style diagrams (SVG figures) + pseudocode boxes ── */ .dgm{background:linear-gradient(180deg,#ffffff,#fafbff);border:1px solid var(--line);border-radius:12px; padding:16px 16px 10px;margin:16px 0;box-shadow:0 1px 3px rgba(20,26,36,.05);overflow-x:auto} .dgm svg{display:block;margin:0 auto;max-width:100%;height:auto} .dgm .cap{display:block;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line); font-size:12.5px;color:var(--muted);text-align:center} .dgm .cap b{color:var(--ink)} /* shared SVG primitives (use these classes on // etc.) */ .dgm .box{fill:#fff;stroke:var(--brand);stroke-width:1.5} .dgm .box2{fill:#eef1fd;stroke:var(--brand);stroke-width:1.5} .dgm .boxg{fill:#e9f8f0;stroke:var(--green);stroke-width:1.5} .dgm .boxa{fill:#fdf3e3;stroke:var(--amber);stroke-width:1.5} .dgm .boxr{fill:#fdECEF;stroke:var(--red);stroke-width:1.5} .dgm .boxm{fill:#f3ecfd;stroke:var(--brand-2);stroke-width:1.5} .dgm .lbl-t{fill:var(--ink);font:600 13px system-ui,sans-serif;text-anchor:middle} .dgm .sub-t{fill:var(--muted);font:11px system-ui,sans-serif;text-anchor:middle} .dgm .mono-t{fill:var(--code-ink);font:12px ui-monospace,Menlo,monospace;text-anchor:middle} .dgm .edge{stroke:var(--muted);stroke-width:1.4;fill:none} .dgm .edge-b{stroke:var(--brand);stroke-width:1.8;fill:none} .dgm .edge-d{stroke:var(--muted);stroke-width:1.4;fill:none;stroke-dasharray:4 3} /* pseudocode / algorithm box */ .algo{background:#fbfcff;border:1px solid var(--line);border-left:3px solid var(--brand-2);border-radius:10px; padding:12px 16px;margin:14px 0;font:13px ui-monospace,Menlo,Consolas,monospace;color:var(--code-ink);line-height:1.65} .algo .h{display:block;font:700 11px system-ui,sans-serif;letter-spacing:1.2px;text-transform:uppercase; color:var(--brand-2);margin-bottom:7px} .algo .kw{color:var(--brand);font-weight:600} .algo .cm{color:var(--muted)} .algo .in{padding-left:20px;display:block} .algo .in2{padding-left:40px;display:block} /* callouts */ .callout{border-radius:12px;padding:13px 16px;margin:18px 0;border:1px solid var(--line);font-size:14.5px} .callout .lbl{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;font-weight:700;display:block;margin-bottom:3px} .callout.tip{background:#e9f8f0;border-color:#bfe6d3} .tip .lbl{color:var(--green)} .callout.warn{background:#fdf4e3;border-color:#f0dcb0} .warn .lbl{color:var(--amber)} .callout.danger{background:#fdECEF;border-color:#f4c6cf} .danger .lbl{color:var(--red)} .callout.note{background:#eef1fd;border-color:#cfd8f5} .note .lbl{color:var(--brand)} /* steps / labs */ .lab{background:linear-gradient(180deg,#ffffff,#f6f8fd);border:1px solid var(--line);border-radius:14px;padding:6px 22px 18px;margin:22px 0;box-shadow:0 1px 3px rgba(20,26,36,.05)} .lab .tag{display:inline-block;margin:16px 0 2px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--accent),var(--green));padding:4px 12px;border-radius:999px;font-weight:700} ol.steps{counter-reset:step;list-style:none;margin:16px 0;padding:0} ol.steps>li{position:relative;padding:2px 0 20px 50px} ol.steps>li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 1px 2px rgba(20,26,36,.06)} ol.steps>li::after{content:"";position:absolute;left:15.5px;top:32px;bottom:0;width:1px;background:var(--line)} ol.steps>li:last-child::after{display:none} /* code */ pre{background:var(--code-bg);border:1px solid var(--code-line);border-radius:12px;padding:15px 18px;overflow-x:auto;font-size:13px;line-height:1.6;margin:12px 0;position:relative} pre .fname{position:absolute;top:0;right:0;font-size:10.5px;letter-spacing:.5px;color:var(--muted);background:#eaeef7;border-left:1px solid var(--code-line);border-bottom:1px solid var(--code-line);border-radius:0 12px 0 8px;padding:3px 10px} pre code{color:var(--code-ink)} code.inl{background:var(--code-bg);border:1px solid var(--code-line);border-radius:6px;padding:1px 6px;font-size:13px;color:#414b5e} /* syntax tokens — tuned for light background */ .tok-c{color:#8a919e;font-style:italic} .tok-k{color:#a020a0} .tok-s{color:#1a7f37} .tok-f{color:#0550ae} .tok-n{color:#b3560a} .tok-o{color:#0969da} /* console output block */ pre.out{background:#eef4ee;border-color:#cfe3d2} pre.out code{color:#1c6b3f} /* tables */ table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 1px 3px rgba(20,26,36,.05)} th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top} th{background:#eef1f8;color:#141a24;font-size:12px;text-transform:uppercase;letter-spacing:.5px} tr:last-child td{border-bottom:0} td code{font-size:12.5px} tbody tr:nth-child(even) td{background:#fafbfe} /* exercise */ .exercise{border:1px dashed var(--brand);border-radius:12px;padding:14px 18px;margin:20px 0;background:#f2f5fe} .exercise h4{margin-top:0;color:var(--brand)} details{margin:10px 0;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 14px} details summary{cursor:pointer;padding:11px 0;font-weight:600;color:var(--accent)} details[open]{padding-bottom:12px} /* checkpoint */ .checkpoint{background:#eefaf3;border:1px solid #c6e8d5;border-top:3px solid var(--green);border-radius:12px;padding:16px 20px;margin:26px 0} .checkpoint h4{margin:0 0 6px;color:var(--green)} /* prev/next */ .pager{display:flex;justify-content:space-between;gap:14px;margin:46px 0 0;border-top:1px solid var(--line);padding-top:22px} .pager a{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;transition:.15s;box-shadow:0 1px 3px rgba(20,26,36,.05)} .pager a:hover{background:var(--panel-2);text-decoration:none;transform:translateY(-2px);border-color:var(--brand)} .pager a.next{text-align:right} .pager .dir{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)} .pager .ttl{display:block;color:#141a24;font-size:15px;margin-top:3px} /* index page */ .hero{margin:0 auto;max-width:1100px;padding:70px 30px 30px;text-align:center} .hero .kick{display:inline-block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);padding:5px 14px;border-radius:999px;background:#fff;font-weight:600} .hero h1{font-size:46px;margin:20px 0 12px;letter-spacing:-.5px;color:#131a24} .hero p{font-size:19px;color:var(--ink-soft);max-width:720px;margin:0 auto} .curric{max-width:1100px;margin:0 auto;padding:20px 30px 100px} .part-block{margin:38px 0} .part-block h2{border:0;font-size:15px;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);margin:0 0 14px;padding:0} .mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px} .mod{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:.15s;box-shadow:0 1px 3px rgba(20,26,36,.05)} .mod:hover{background:var(--panel-2);text-decoration:none;transform:translateY(-3px);border-color:var(--brand);box-shadow:0 6px 18px rgba(79,107,237,.12)} .mod .mnum{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .mod h3{margin:4px 0 6px;color:#141a24;font-size:17px} .mod p{margin:0;font-size:13.5px;color:var(--ink-soft)} .mod .ready{display:inline-block;margin-top:10px;font-size:11px;padding:2px 9px;border-radius:999px;background:#e4f6ec;color:var(--green);border:1px solid #bfe6d3} .mod .soon{display:inline-block;margin-top:10px;font-size:11px;padding:2px 9px;border-radius:999px;background:#eef1f8;color:var(--muted);border:1px solid var(--line)} footer{border-top:1px solid var(--line);padding:26px 0 0;color:var(--muted);font-size:13px;margin-top:40px} kbd{background:#eef1f8;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-size:12.5px;font-family:inherit} @media(max-width:940px){ /* On small screens the sidebar overlays the content instead of pushing it. */ .wrap{padding-left:0} main{padding:0 20px 80px} header.ch{margin:0 -20px 30px;padding:38px 20px 30px} header.ch h1{font-size:27px} .hero h1{font-size:32px} #navToggle{left:14px} /* when open on mobile, show the dimming backdrop */ body:not(.nav-collapsed) #navBackdrop{display:block} } /* ---- Difficulty tier badges (.lvl) ------------------------------------ A small pill appended to a section heading marking its rung on the beginner -> tech-lead ladder. Color-graded so the climb is visible at a glance. Set by data-driven text: essential/intermediate/advanced/expert/ professional/production/tech-lead (matched case-insensitively via attribute-free class + text; we colour by an extra modifier class too). */ .lvl{display:inline-block;vertical-align:middle;margin-left:10px; font-size:10.5px;line-height:1;letter-spacing:1px;text-transform:uppercase; font-weight:700;color:#fff;padding:4px 10px;border-radius:999px; transform:translateY(-3px);white-space:nowrap; background:var(--muted)} /* default/fallback */ /* rung colours — cool (easy) to warm/bold (hard), then distinct pro tiers */ .lvl.l-essential {background:#1a9f6b} /* green */ .lvl.l-intermediate{background:#0e9bb5} /* teal */ .lvl.l-advanced {background:#4f6bed} /* blue */ .lvl.l-expert {background:#7c53e0} /* purple */ .lvl.l-professional{background:#b7791f} /* amber */ .lvl.l-production {background:#d6455f} /* red */ .lvl.l-techlead {background:linear-gradient(135deg,#141a24,#4f6bed)} /* dark→blue */ /* legacy badges without a modifier class still read (grey pill) */ /* ---- Walkthrough box (.walk) ----------------------------------------- A beginner-facing "how this works" explainer placed right after a code block or diagram. Plain language: the problem, a step-by-step reading of the code/flow, what the output means, and a "try this" nudge. Designed so a learner with zero prior knowledge can follow the code without confusion. */ .walk{background:linear-gradient(180deg,#fffdf7,#fff8ec); border:1px solid #f0e2c2;border-left:3px solid var(--amber,#b7791f); border-radius:12px;padding:14px 18px 15px;margin:14px 0 24px; font-size:14.5px;line-height:1.72;box-shadow:0 1px 3px rgba(20,26,36,.05)} .walk .wl{font-size:11px;text-transform:uppercase;letter-spacing:1.4px; font-weight:700;color:var(--amber,#b7791f);display:block;margin-bottom:7px} .walk p{margin:8px 0} .walk b{color:var(--ink)} .walk ol,.walk ul{margin:9px 0 9px 4px;padding-left:22px} .walk ol li,.walk ul li{margin:5px 0} .walk code{background:#f4ecd8;border:1px solid #eaddb8;border-radius:6px; padding:1px 6px;font-size:12.5px;color:#7a5a12; font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .walk .try{margin-top:10px;padding-top:9px;border-top:1px dashed #ecdcb4; font-size:13.5px;color:var(--ink-soft)} .walk .try b{color:var(--amber,#b7791f)} /* "How to read this diagram" narration — cooler tone to pair with .dgm */ .walk.read{background:linear-gradient(180deg,#fbfcff,#f2f5ff); border-color:#d3ddf6;border-left-color:var(--brand)} .walk.read .wl{color:var(--brand)} .walk.read code{background:#eaeffb;border-color:#d3ddf6;color:#3a4db0} .walk.read .try b{color:var(--brand)} /* ---- Capstone rubric (.rubric) ------------------------------------- A staff-level self-scoring grid attached to projects: dimensions a production build is judged on, with what "meets bar" looks like. */ .rubric{background:linear-gradient(180deg,#ffffff,#f7f9fc);border:1px solid var(--line); border-left:3px solid var(--brand-2,#7c53e0);border-radius:12px;padding:16px 20px;margin:22px 0; box-shadow:0 1px 3px rgba(20,26,36,.05)} .rubric .rl{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;font-weight:700; color:var(--brand-2,#7c53e0);display:block;margin-bottom:8px} .rubric table{margin:10px 0 4px} .rubric th{background:#f4f0fc} .rubric .score{font-size:13px;color:var(--ink-soft);margin-top:10px;padding-top:9px; border-top:1px dashed var(--line)} .rubric .score b{color:var(--brand-2,#7c53e0)} /* ---- Knowledge check (.quiz) --------------------------------------- A self-graded question with a hidden answer (uses

). Advanced learners test recall/understanding before moving on. */ .quiz{background:linear-gradient(180deg,#ffffff,#f6fbf8);border:1px solid #cfe6da; border-left:3px solid var(--green,#1a9f6b);border-radius:12px;padding:14px 18px;margin:18px 0; box-shadow:0 1px 3px rgba(20,26,36,.05)} .quiz .ql{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;font-weight:700; color:var(--green,#1a9f6b);display:block;margin-bottom:6px} .quiz p{margin:6px 0} .quiz details{margin-top:8px;border-top:1px dashed #cfe6da;padding-top:8px} .quiz summary{cursor:pointer;font-weight:600;color:var(--green,#1a9f6b);font-size:13.5px} .quiz details[open] summary{margin-bottom:6px} .quiz .ans{font-size:14px;color:var(--ink-soft)} /* ---- Exercise ladder (.exladder) ----------------------------------- A 6-rung practice ladder per lesson: beginner -> intermediate -> advanced -> expert -> professional -> industry scenario. Each rung is a task with a difficulty badge and a collapsible full worked solution. */ .exladder{margin:26px 0} .exladder > h2 .lvl{transform:translateY(-3px)} .exr{border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:12px; padding:14px 18px;margin:14px 0;background:#fff;box-shadow:0 1px 3px rgba(20,26,36,.05)} .exr .exhdr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .exr .exn{font-weight:700;color:var(--ink);font-size:15px} .exr p{margin:6px 0} .exr details{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:#fbfcff;padding:0 14px} .exr details summary{cursor:pointer;padding:10px 0;font-weight:600;color:var(--green)} .exr details[open] summary{border-bottom:1px solid var(--line);margin-bottom:8px} /* left-border tint per rung, matching the .lvl tier colors */ .exr.r-beginner {border-left-color:#1a9f6b} .exr.r-intermediate{border-left-color:#0e9bb5} .exr.r-advanced {border-left-color:#4f6bed} .exr.r-expert {border-left-color:#7c53e0} .exr.r-professional{border-left-color:#b7791f} .exr.r-industry {border-left-color:#d6455f} /* ---- Detailed exercise brief (.exbrief) ---------------------------- Structured ask: Context -> Your task -> Requirements -> Hint. Used inside .exr rungs and .exercise blocks; replaces the old one-liner. */ .exbrief{margin:6px 0} .exbrief .exb-ctx{margin:6px 0;color:var(--muted)} .exbrief .exb-task{margin:8px 0} .exbrief .exb-ctx b,.exbrief .exb-task b{color:var(--ink)} .exbrief ul.exb-req{margin:8px 0;padding-left:20px} .exbrief ul.exb-req li{margin:3px 0} .exbrief .exb-hint{margin:8px 0 2px;padding:8px 12px;border-radius:8px; background:#fff7e6;border:1px solid #f0d9a8;font-size:14px} .exbrief .exb-hint b{color:#8a5a00} .exercise .exbrief .exb-ctx{color:#4a5578} /* ---- Content protection (deterrent) -------------------------------- Disable text selection site-wide so casual select+copy doesn't work. Googlebot ignores this (it reads server HTML), so SEO is unaffected. NOTE: not real security — DevTools/View-Source/curl/screenshots still work. */ body{ -webkit-user-select:none; /* Safari/Chrome */ -moz-user-select:none; /* Firefox */ -ms-user-select:none; /* old Edge/IE */ user-select:none; } /* Re-allow selection where a reader legitimately needs it: form fields. */ input,textarea{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text} /* Kill the long-press callout / image drag on mobile. */ body{-webkit-touch-callout:none} img{-webkit-user-drag:none;user-drag:none;pointer-events:none} /* Copyright footer — an in-flow © line at the bottom of every page's content. Injected via CSS (main::after) so it appears on all pages without editing each file. */ main{position:relative} /* Copyright footer + corner watermark are REAL HTML elements (.copyftr / .wm) injected into each page — HTML entities render reliably where CSS content escapes were flaky. */ .copyftr{margin:56px 0 0;padding:18px 0 4px;border-top:1px solid var(--line); font-size:12.5px;color:var(--muted);text-align:center;letter-spacing:.2px;user-select:none} .wm{position:fixed;right:14px;bottom:10px;z-index:1; font-size:11px;color:rgba(90,107,140,.55);pointer-events:none;user-select:none;letter-spacing:.3px} /* Legal disclaimer footer line (below the copyright) + inline code caution. Educational "as-is / no warranty / test before production" notice to limit liability. */ .discftr{margin:6px 0 0;font-size:11.5px;color:var(--muted);text-align:center; line-height:1.5;max-width:760px;margin-left:auto;margin-right:auto;user-select:none} .discftr a{color:var(--muted);text-decoration:underline} .codewarn{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:8px 12px; border-left:3px solid var(--amber,#d99a00);background:rgba(217,154,0,.07);border-radius:0 6px 6px 0; font-size:12.5px;color:var(--ink-soft);line-height:1.5} .codewarn::before{content:"\26A0";color:var(--amber,#d99a00);font-size:13px;flex:0 0 auto;line-height:1.4} /* Print protection: hide everything and show a notice instead of the content. */ @media print{ body *{visibility:hidden !important} body::before{ content:"\A9 AI Engineering: Zero to Production \2014 printing is disabled. See the site online."; visibility:visible;position:fixed;top:40%;left:0;right:0;text-align:center; font:600 16px/1.5 system-ui,sans-serif;color:#333;padding:0 40px; } } /* ---- Topic-cluster internal links (.related) ----------------------- "More in this track" — links sibling lessons so search engines see topical depth, and readers can navigate within a subject. */ .related{margin:34px 0 8px;border-top:1px solid var(--line);padding-top:18px} .related h2{font-size:18px;margin:0 0 12px} .related .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px} .related a.rl{display:block;padding:10px 13px;border:1px solid var(--line);border-radius:10px; background:var(--panel-2);color:var(--ink-soft);font-size:13.5px;transition:.15s;text-decoration:none} .related a.rl:hover{border-color:var(--brand);color:var(--brand)} .related a.rl .rn{color:var(--muted);font-variant-numeric:tabular-nums;margin-right:6px} /* ---- Copy-to-clipboard button on code blocks (copybtn.js) ---------- A fixed, always-visible icon button top-right inside each code

, with a
   "Copy" tooltip on hover. Code stays copyable via this button even though prose
   copy is blocked by protect.js. */
pre.has-copy{position:relative}
pre.has-copy .copy-btn{
  position:absolute;top:6px;right:6px;z-index:3;
  width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);background:var(--panel);border:1px solid var(--line);
  border-radius:7px;cursor:pointer;opacity:1;                 /* ALWAYS visible */
  transition:color .15s,border-color .15s,background .15s;
  -webkit-user-select:none;user-select:none;
}
pre.has-copy .copy-btn svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:2}
pre.has-copy .copy-btn:hover{color:var(--brand);border-color:var(--brand)}
pre.has-copy .copy-btn.copied{color:#fff;background:var(--green);border-color:var(--green)}
/* tooltip: shows BELOW the button so it never covers the filename */
pre.has-copy .copy-btn::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 6px);right:0;
  white-space:nowrap;background:#1f2430;color:#fff;font:600 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  padding:5px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .12s;
}
pre.has-copy .copy-btn:hover::after,pre.has-copy .copy-btn:focus::after{opacity:1}
/* Filename sits to the LEFT of the copy button (side by side), not under it.
   Clears the 28px button + gaps; long names truncate with an ellipsis. */
pre.has-copy .fname{
  top:6px;right:42px;height:28px;display:flex;align-items:center;
  border-radius:6px;border:1px solid var(--code-line);
  max-width:calc(100% - 60px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}