:root{color-scheme:light;--paper:#f4f3ed;--surface:#fffefa;--ink:#20221f;--muted:#777a72;--line:#dedfd5;--acid:#c8f169;--acid-dark:#91b53e;--violet:#ded4ff;--soft-green:#edf3dc;--code:#232720;--code-ink:#e9efd9;--rose:#f6e7e1;--shadow:0 16px 38px rgba(38,42,29,.07);--sans:'DM Sans',Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--display:Manrope,'DM Sans',sans-serif;--mono:'DM Mono',ui-monospace,SFMono-Regular,monospace}
:root[data-theme="dark"]{color-scheme:dark;--paper:#1b1e1b;--surface:#242824;--ink:#edf0e6;--muted:#a5aa9c;--line:#393f38;--acid:#c8f169;--acid-dark:#b5e350;--violet:#443d5d;--soft-green:#303a28;--code:#111511;--code-ink:#e9efd9;--rose:#49322c;--shadow:0 16px 38px rgba(0,0,0,.2)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:94px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}a{color:inherit}.skip-link{position:fixed;z-index:100;left:1rem;top:-5rem;padding:.7rem 1rem;background:var(--acid);color:#20221f;font-weight:700;border-radius:.5rem}.skip-link:focus{top:1rem}.reading-progress{position:fixed;z-index:50;top:0;left:0;right:0;height:3px;background:transparent}.reading-progress span{display:block;height:100%;width:0;background:var(--acid-dark);transition:width .12s linear}.site-shell{max-width:1500px;margin:0 auto;min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr)}
.sidebar{height:100vh;position:sticky;top:0;padding:30px 22px 23px 27px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--paper);z-index:10}.brand{text-decoration:none;display:flex;align-items:center;gap:11px;margin:3px 0 44px 2px}.brand-mark{width:31px;height:31px;border-radius:10px;background:var(--acid);display:flex;align-items:flex-end;gap:3px;padding:8px 7px}.brand-mark i{display:block;width:4px;border-radius:4px;background:#20221f}.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:14px}.brand-mark i:nth-child(3){height:10px}.brand-name{font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.9px}.brand-name span{font-weight:500;color:var(--muted)}.sidebar-label,.eyebrow,.hero-kicker,.breadcrumb,.hero-index,.command-label,.compare-label,.prompt-heading,.debug-title,.site-footer,.code-topline,.progress-copy,.final-checklist b{font-family:var(--mono);letter-spacing:.08em}.sidebar-label{font-size:9px;color:var(--muted);margin:0 0 13px 9px}.step-nav{display:grid;gap:4px}.nav-link{min-height:39px;padding:8px 10px;display:flex;align-items:center;gap:12px;border-radius:7px;text-decoration:none;color:var(--muted);font-size:12px;transition:background .18s,color .18s}.nav-link:hover{color:var(--ink);background:var(--surface)}.nav-link.is-active{color:var(--ink);background:var(--surface);font-weight:700;box-shadow:inset 2px 0 0 var(--acid-dark)}.nav-link.is-complete .nav-number{background:var(--acid);border-color:var(--acid);color:#20221f}.nav-number{font-size:10px;color:var(--muted);width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;flex:none}.sidebar-bottom{margin-top:auto}.progress-copy{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin:0 1px 8px}.progress-copy strong{color:var(--ink);font-weight:500}.progress-track{height:4px;background:var(--line);border-radius:99px;overflow:hidden}.progress-track span{display:block;width:0;height:100%;background:var(--acid-dark);transition:width .35s ease}.text-button{border:0;background:none;padding:0;color:var(--muted);font:inherit;cursor:pointer}.text-button:hover{color:var(--ink)}.reset-button{font-size:10px;margin-top:11px}.sidebar-note{border-top:1px solid var(--line);margin-top:25px;padding-top:16px;font-size:10px;color:var(--ink);line-height:1.7}.sidebar-note span{color:var(--muted)}
#main-content{min-width:0}.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,6vw,90px);position:sticky;top:0;z-index:8;background:color-mix(in srgb,var(--paper) 91%,transparent);backdrop-filter:blur(14px)}.breadcrumb{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:10px}.breadcrumb-dot{color:var(--acid-dark)}.theme-toggle{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:99px;padding:7px 12px;display:flex;gap:7px;align-items:center;font:500 11px var(--sans);cursor:pointer}.theme-toggle:hover{border-color:var(--acid-dark)}.theme-icon{font-size:15px;line-height:1}.lesson{max-width:1050px;margin:0 auto;padding:0 clamp(24px,6vw,90px)}
.hero{position:relative;padding:79px 0 33px;min-height:490px;overflow:hidden;border-bottom:1px solid var(--line);scroll-margin-top:90px}.hero::after{content:"";position:absolute;right:-80px;top:72px;width:240px;height:240px;border-radius:48% 52% 61% 39%;background:var(--violet);opacity:.72;transform:rotate(-26deg);z-index:-1}.hero::before{content:"";position:absolute;right:70px;top:118px;width:98px;height:98px;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:50%;z-index:0}.hero-kicker{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:9px;margin:0 0 18px}.live-dot{width:7px;height:7px;background:#9fc94d;border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--acid) 35%,transparent)}h1,h2,p{margin-top:0}.hero h1{font-family:var(--display);font-size:clamp(48px,7.5vw,88px);line-height:.98;letter-spacing:-.075em;margin:0;max-width:720px;font-weight:700}.hero h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.07em}.hero-lede{max-width:525px;font-size:16px;color:var(--muted);line-height:1.75;margin:24px 0 22px}.hero-actions,.closing-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.button{min-height:42px;padding:10px 16px;display:inline-flex;align-items:center;gap:13px;border-radius:7px;text-decoration:none;font-size:12px;font-weight:700;transition:transform .18s,box-shadow .18s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--ink);color:var(--paper)}.button-primary:hover{box-shadow:0 8px 22px rgba(0,0,0,.14)}.button-quiet{color:var(--muted);padding-left:8px}.button-quiet:hover{color:var(--ink)}.hero-stamp{position:absolute;right:4px;bottom:82px;display:flex;gap:9px;align-items:center;color:var(--muted);font:9px var(--mono);letter-spacing:.1em;transform:rotate(-8deg)}.hero-stamp b{font-weight:400;color:var(--acid-dark)}.hero-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:15px;padding:14px 0;color:var(--muted);font-size:10px}.hero-index{color:var(--ink);font-size:9px}
.intro-card{display:grid;grid-template-columns:47px 1fr;gap:17px;padding:25px 0 30px;border-bottom:1px solid var(--line)}.intro-icon{width:42px;height:42px;border-radius:13px;background:var(--acid);display:grid;place-items:center;font-size:23px;color:#22251d}.intro-card .eyebrow{margin:0 0 7px}.eyebrow{font-size:9px;color:var(--muted);margin:0 0 8px}.intro-card h2{font-family:var(--display);font-size:19px;letter-spacing:-.04em;line-height:1.35;margin:0 0 7px;max-width:660px}.intro-card p:last-child{color:var(--muted);font-size:12px;margin:0}
.lesson-section{padding:48px 0 46px;border-bottom:1px solid var(--line);scroll-margin-top:85px}.section-heading{display:flex;align-items:flex-start;gap:15px;margin:0 0 21px}.section-number{width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;font:10px var(--mono);color:var(--muted);flex:none}.section-heading .eyebrow{margin:0 0 4px}.section-heading h2{font-family:var(--display);font-size:clamp(25px,3vw,35px);letter-spacing:-.06em;line-height:1.12;margin:0}.lesson-section>p{max-width:690px;font-size:14px;color:var(--muted);line-height:1.82;margin:0 0 16px}.lesson-section strong{color:var(--ink)}.lesson-section code:not(pre code),.tip-box code{background:var(--soft-green);color:var(--ink);padding:2px 5px;border-radius:4px;font:12px var(--mono)}
.code-card{margin:15px 0 17px;background:var(--code);border-radius:9px;overflow:hidden;color:var(--code-ink);box-shadow:var(--shadow)}.code-topline{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px 7px 15px;color:#adb6a6;font-size:9px;border-bottom:1px solid rgba(255,255,255,.09)}.code-topline>span{display:flex;align-items:center;gap:8px}.language-dot{width:7px;height:7px;background:var(--acid);border-radius:50%;display:inline-block}.copy-button{border:1px solid rgba(255,255,255,.17);color:#e4e9dc;background:rgba(255,255,255,.04);border-radius:5px;padding:5px 8px;font:10px var(--sans);cursor:pointer;white-space:nowrap}.copy-button:hover,.copy-button.is-copied{background:var(--acid);border-color:var(--acid);color:#1f241b}.code-card pre{margin:0;padding:15px 17px;overflow:auto;font:12px/1.8 var(--mono);white-space:pre}.code-card pre code{color:inherit}.code-caption{font-size:10px!important;margin-top:-8px!important}.full-source{margin:17px 0}.full-source summary{cursor:pointer;color:var(--ink);font-size:12px;font-weight:700;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:7px;list-style:none}.full-source summary::-webkit-details-marker{display:none}.full-source summary::after{content:"＋";float:right;color:var(--acid-dark)}.full-source[open] summary{border-radius:7px 7px 0 0}.full-source[open] summary::after{content:"−"}.full-source .code-card{margin-top:0;border-radius:0 0 8px 8px}.full-code{max-height:490px}.command-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0}.command-list>div{border:1px solid var(--line);background:var(--surface);padding:12px;border-radius:7px;display:grid;gap:8px;min-width:0}.command-label{font-size:8px;color:var(--muted)}.command-list code{font:10px/1.5 var(--mono);overflow-wrap:anywhere}
.tip-box{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;margin:20px 0;border:1px solid color-mix(in srgb,var(--acid-dark) 30%,var(--line));background:var(--soft-green);border-radius:8px}.tip-icon{color:var(--acid-dark);font-size:16px;font-weight:700}.tip-box p{font-size:12px;color:var(--muted);margin:0;flex:1}.tip-box p strong{color:var(--ink)}.download-link{font-size:11px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}.download-link:hover{text-decoration:underline;text-decoration-color:var(--acid-dark);text-underline-offset:3px}.step-check{display:flex;align-items:center;gap:10px;margin-top:22px;padding:12px 14px;border-radius:7px;background:var(--surface);border:1px solid var(--line);font-size:11px;color:var(--muted);cursor:pointer}.step-check:has(input:checked){border-color:var(--acid-dark);color:var(--ink)}.step-check input,.final-checklist input{accent-color:#8eaf42;width:16px;height:16px;margin:0;flex:none;cursor:pointer}.step-check span{flex:1}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:20px 0}.compare-card{padding:17px;border:1px solid var(--line);background:var(--surface);border-radius:8px}.compare-good{background:var(--soft-green);border-color:color-mix(in srgb,var(--acid-dark) 35%,var(--line))}.compare-label{font-size:8px;color:var(--muted);display:flex;align-items:center;gap:7px}.compare-label span{font:14px var(--sans)}.compare-good .compare-label span{color:#75943c}.compare-card p{font-size:14px;line-height:1.6;color:var(--ink);margin:14px 0 11px}.compare-card small{display:block;color:var(--muted);font-size:10px;line-height:1.6}.prompt-box{background:#22251f;color:#f1f1e9;border-radius:9px;padding:14px 16px;margin:19px 0}.prompt-box-soft{background:#2c2935}.prompt-heading{display:flex;align-items:center;gap:8px;color:#c5c9bb;font-size:8px}.prompt-symbol{width:18px;height:18px;display:grid;place-items:center;border-radius:5px;background:var(--acid);color:#232720;font:12px var(--sans)}.prompt-heading .copy-button{margin-left:auto}.prompt-text{font-size:12px;line-height:1.8;color:#f0f1e9;margin:12px 0 1px}.debug-card{padding:16px 18px;border-left:3px solid #d6ab93;background:var(--rose);border-radius:0 8px 8px 0;margin:19px 0}.debug-title{font-size:9px;color:var(--ink);font-weight:500}.debug-title span{font-size:14px}.debug-card p{font-size:11px;color:var(--muted);margin:9px 0}.debug-card blockquote{margin:0;color:var(--ink);font-size:12px;line-height:1.7}
.acceptance-list{margin:18px 0 17px;padding:0;list-style:none;border-top:1px solid var(--line)}.acceptance-list li{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:12px 4px;font-size:12px;color:var(--ink)}.acceptance-mark{font:9px var(--mono);color:var(--acid-dark)}.tip-box-warning{background:var(--rose);border-color:color-mix(in srgb,#c28b72 30%,var(--line))}.tip-box-warning .tip-icon{color:#ba795e}
.closing-section{padding-bottom:42px}.final-checklist{margin:20px 0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}.final-checklist label{min-height:49px;padding:12px 15px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);cursor:pointer}.final-checklist label:last-child{border-bottom:0}.final-checklist label:has(input:checked){color:var(--ink);background:var(--soft-green)}.final-checklist b{color:var(--acid-dark);font-size:9px;font-weight:400}.finish-note{display:flex;gap:13px;align-items:flex-start;margin:23px 0;padding:17px;background:var(--soft-green);border-radius:8px}.finish-note>span{font-size:20px;color:#7c9b3d}.finish-note p{margin:0;color:var(--muted);font-size:12px;line-height:1.75}.finish-note strong{color:var(--ink)}.closing-actions{margin:20px 0 3px}.final-step-check{margin-top:28px}.site-footer{border-top:1px solid var(--line);padding:18px 0 25px;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:8px}.site-footer i{font-style:normal;color:var(--acid-dark);font-size:12px}.toast{position:fixed;z-index:60;bottom:22px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);padding:9px 14px;border-radius:6px;font-size:11px;transition:opacity .2s,transform .2s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1280px){.lesson{padding-left:88px;padding-right:88px}.hero{min-height:520px}.hero-stamp{right:23px}}
@media(max-width:900px){.site-shell{grid-template-columns:205px minmax(0,1fr)}.sidebar{padding:25px 15px}.lesson{padding:0 clamp(22px,4vw,44px)}.topbar{padding:0 clamp(22px,4vw,44px)}.hero-stamp{right:0;bottom:69px;gap:6px;font-size:7px}.command-list{grid-template-columns:1fr}.command-list>div{grid-template-columns:140px 1fr;align-items:center}}
@media(max-width:680px){.site-shell{display:block}.sidebar{height:auto;position:sticky;top:3px;padding:10px 16px 9px;border-right:0;border-bottom:1px solid var(--line);display:block;background:var(--paper)}.brand{margin:0 0 9px}.brand-mark{width:26px;height:26px;border-radius:8px;padding:6px}.brand-name{font-size:16px}.sidebar-label,.sidebar-bottom{display:none}.step-nav{display:flex;gap:5px;overflow-x:auto;padding:1px 0 2px;scrollbar-width:none}.step-nav::-webkit-scrollbar{display:none}.nav-link{flex:none;min-height:30px;padding:5px 8px;gap:6px;border:1px solid transparent;font-size:10px;white-space:nowrap}.nav-link.is-active{box-shadow:none;border-color:var(--line)}.nav-number{width:18px;height:18px;font-size:8px}.topbar{height:48px;padding:0 17px;position:relative}.breadcrumb{font-size:7px;gap:6px}.theme-toggle{padding:5px 9px;font-size:10px}.theme-label{display:none}.lesson{padding:0 19px}.hero{padding:52px 0 48px;min-height:410px}.hero h1{font-size:clamp(47px,14vw,72px)}.hero-lede{font-size:14px;max-width:440px}.hero::after{width:160px;height:160px;right:-90px;top:70px}.hero::before{width:65px;height:65px;right:23px;top:101px}.hero-stamp{position:relative;right:auto;bottom:auto;transform:none;margin:29px 0 12px;font-size:8px}.hero-bottom{font-size:8px}.intro-card{grid-template-columns:37px 1fr;gap:12px;padding:21px 0}.intro-icon{width:35px;height:35px;border-radius:10px}.intro-card h2{font-size:16px}.intro-card p:last-child{font-size:11px}.lesson-section{padding:36px 0}.section-heading{gap:11px}.section-heading h2{font-size:26px}.lesson-section>p{font-size:13px}.compare-grid{grid-template-columns:1fr}.compare-card{padding:14px}.compare-card p{margin:9px 0}.command-list>div{grid-template-columns:1fr}.code-card pre{font-size:10px;padding:13px;white-space:pre-wrap;overflow-wrap:anywhere}.code-topline{font-size:8px}.prompt-box{padding:12px}.prompt-heading{font-size:7px}.prompt-text{font-size:11px}.site-footer{font-size:7px}.tip-box{flex-wrap:wrap}.tip-box p{flex-basis:calc(100% - 30px)}.tip-box .download-link{margin-left:26px}.hero-bottom{gap:7px}.hero-bottom span:last-child{text-align:right}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.honest-card{margin:22px 0 5px;padding:21px 22px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--acid-dark);border-radius:0 10px 10px 0}.honest-heading{display:flex;align-items:flex-start;gap:12px}.honest-mark{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:7px;background:var(--violet);color:var(--ink);font-size:16px}.honest-heading .eyebrow{margin:0 0 4px}.honest-heading h2{margin:0;font:700 17px/1.35 var(--display);letter-spacing:-.04em}.honest-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:18px 0 14px}.honest-grid h3{font:700 11px var(--sans);margin:0 0 6px}.honest-grid p{font-size:11px;line-height:1.75;color:var(--muted);margin:0}.honest-note{border-top:1px solid var(--line);padding-top:12px;margin:0;color:var(--muted);font-size:10px;line-height:1.75}.honest-note::before{content:'PRINCIPIO  ';font:9px var(--mono);letter-spacing:.08em;color:var(--acid-dark)}
@media(max-width:680px){.honest-card{padding:17px 15px}.honest-grid{grid-template-columns:1fr;gap:14px;margin-top:15px}.honest-heading h2{font-size:15px}}

.platform-note{display:flex;gap:11px;align-items:flex-start;margin:20px 0 0;padding:13px 15px;background:var(--violet);border-radius:8px}.platform-note>span{font-size:15px;color:var(--ink);line-height:1.5}.platform-note p{margin:0;color:var(--ink);font-size:11px;line-height:1.7}.platform-note strong{font-weight:700}
@media(max-width:680px){.platform-note{padding:11px 12px}}