:root{--paper:#f3efe5;--paper-deep:#e9e2d3;--paper-sage:#e5ece6;--paper-clay:#f2e6d9;--paper-gold:#f2ead2;--ink:#182c29;--ink-soft:#51605c;--accent:#e9623b;--accent-ink:#b43d20;--structure:#275f5a;--structure-soft:#2f6b64;--note:#835f1d;--danger:#9f3a24;--line:#c9c2b3;--cream:#fffdf7;--code-keyword:#ff9b7d;--code-type:#8ed8c4;--code-string:#f3d27e;--code-number:#b8c8ff;--code-comment:#93aaa4;--body-ink:#263633;--inline-code-paper:#f0e9dc;--code-surface:#142825;--code-caption-surface:#1b3430;--code-text:#e9f0ed;--code-caption-text:#c5d4cf;--link-rule:#7ca39c;--serif:"Newsreader", Georgia, serif;--sans:"Manrope", system-ui, sans-serif;--mono:"DM Mono", ui-monospace, monospace;--ease-drawer:cubic-bezier(.32, .72, 0, 1);--ease-out:cubic-bezier(.23, 1, .32, 1)}*{box-sizing:border-box;scrollbar-color:var(--structure-soft) var(--paper-deep)}html{scroll-behavior:auto;overflow-x:clip}body{color:var(--ink);background:var(--paper);font-family:var(--sans);margin:0;overflow-x:clip}body:before{content:"";pointer-events:none;opacity:.32;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");position:fixed;inset:0}::selection{color:var(--cream);background:var(--accent-ink)}a{color:inherit}button,input{font:inherit}.icon{stroke:currentColor;stroke-width:1.6px;stroke-linecap:square;stroke-linejoin:miter;flex:none;width:1.25em;height:1.25em}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:100;color:var(--paper);background:var(--ink);border:2px solid var(--paper);padding:11px 15px;text-decoration:none;position:fixed;top:12px;left:12px;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}:where(a,button,input,summary,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:3px}.site-header,.reader-header{height:calc(76px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(4vw, env(safe-area-inset-right)) 0 max(4vw, env(safe-area-inset-left));border-bottom:1px solid var(--line);z-index:10;justify-content:space-between;align-items:center;display:flex;position:relative}.brand{letter-spacing:-.02em;align-items:center;gap:12px;font-weight:700;text-decoration:none;display:inline-flex}.brand-mark{width:34px;height:34px;color:var(--paper);background:var(--ink);font:500 13px var(--mono);place-items:center;display:grid;transform:rotate(-3deg)}.hero{border-bottom:1px solid var(--line);background:linear-gradient(90deg, var(--paper) 0 68%, var(--paper-sage) 68% 100%);grid-template-columns:minmax(0,1.6fr) minmax(290px,.65fr);align-items:end;gap:9vw;min-height:600px;padding:86px 7vw 72px;display:grid}.eyebrow,.nav-label,.card-label{color:var(--accent-ink);font:500 11px var(--mono);letter-spacing:.12em;margin:0 0 24px}.hero h1{max-width:920px;font:500 clamp(3.3rem, 7vw, 7rem)/.91 var(--serif);letter-spacing:-.055em;margin:0}.hero h1 em{color:var(--accent-ink);font-weight:inherit}.hero-summary{max-width:650px;color:var(--ink-soft);margin:36px 0 0;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.7}.hero-card{color:var(--paper);background:var(--ink);box-shadow:14px 14px 0 var(--accent);padding:34px;position:relative}.hero-card:before{content:"";background:var(--accent);width:52px;height:5px;position:absolute;top:-1px;left:34px}.hero-card .card-label{color:var(--code-keyword)}.card-index{float:right;color:#98aaa5;font:12px var(--mono)}.hero-card ol{margin:36px 0;padding:0;list-style-position:inside}.hero-card li{font-family:var(--serif);border-top:1px solid #ffffff2b;padding:13px 0;font-size:1.17rem}.hero-card li:last-child{border-bottom:1px solid #ffffff2b}.hero-card a{color:#fff;justify-content:space-between;align-items:center;font-size:.88rem;text-decoration:none;display:flex}.hero-card a:hover{color:var(--code-keyword)}.library{padding:86px 7vw 110px}.library-heading{justify-content:space-between;align-items:end;gap:30px;margin-bottom:45px;display:flex}.library h2{font:500 clamp(2.4rem, 5vw, 4.4rem)/1 var(--serif);letter-spacing:-.045em;margin:0}.search{min-width:280px;color:var(--structure);border-bottom:1px solid var(--ink);align-items:center;gap:12px;padding:14px 0;display:flex}.search input{width:100%;color:var(--ink);caret-color:var(--accent);background:0 0;border:0;outline:0}.search input::-webkit-search-cancel-button{accent-color:var(--accent-ink);cursor:pointer}.search:focus-within{border-bottom-width:3px;border-bottom-color:var(--accent-ink)}.search input::placeholder{color:var(--ink-soft)}.pattern-collections{gap:76px;display:grid}.collection-heading{justify-content:space-between;align-items:end;gap:24px;margin-bottom:18px;display:flex}.collection-heading h3{font:500 clamp(1.7rem, 2.6vw, 2.45rem)/1 var(--serif);letter-spacing:-.025em;margin:0}.collection-heading span{color:var(--structure-soft);font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}.pattern-grid{border-top:1px solid var(--structure);border-left:1px solid var(--line);grid-template-columns:repeat(3,1fr);display:grid}.pattern-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fffdf747;grid-template-columns:1fr auto;align-content:space-between;min-height:210px;padding:25px;text-decoration:none;transition:background .2s,color .2s,transform .2s;display:grid}.pattern-card:focus-visible{color:var(--paper);background:var(--ink);outline-color:var(--accent);outline-offset:-4px;transition:none}.pattern-number{color:var(--accent-ink);font:11px var(--mono)}.pattern-meta{color:var(--structure-soft);font:11px var(--mono)}.pattern-card:focus-visible .pattern-number,.pattern-card:focus-visible .pattern-meta{color:#b8cbc5}.pattern-card h4{font:500 clamp(1.5rem, 2.1vw, 2.1rem)/1.05 var(--serif);letter-spacing:-.025em;grid-column:1/-1;margin:36px 0 28px}.pattern-arrow{color:var(--accent-ink);font-size:1.2rem;transition:transform .2s}.pattern-card:focus-visible .pattern-arrow{color:var(--code-keyword);transition:none}@media (hover:hover) and (pointer:fine){.pattern-card:hover{color:var(--paper);background:var(--ink)}.pattern-card:hover .pattern-number,.pattern-card:hover .pattern-meta{color:#b8cbc5}.pattern-card:hover .pattern-arrow{color:var(--code-keyword);transform:translate(5px)}}.pattern-card:active{transition-duration:60ms;transform:translateY(2px)}.empty-state{font-family:var(--serif);padding:50px 0;font-size:1.5rem}footer{color:#c9d8d3;border-top:1px solid var(--structure);background:var(--ink);min-height:100px;font:11px var(--mono);justify-content:space-between;align-items:center;padding:0 7vw;display:flex}.reader-shell{grid-template-columns:245px minmax(0,830px) 220px;grid-template-rows:calc(76px + env(safe-area-inset-top)) 1fr;justify-content:center;min-height:100vh;display:grid}.reader-header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#e5ece6f2;grid-column:1/-1;position:sticky;top:0}.reader-progress{font:11px var(--mono);align-items:center;gap:14px;display:flex}.progress-track{background:var(--line);width:130px;height:2px}.progress-track span{background:var(--accent);height:100%;display:block}.menu-button{border:1px solid var(--structure);color:var(--structure);cursor:pointer;background:0 0;padding:10px 14px;display:none}.contents-menu-icon{stroke:currentColor;stroke-width:1.6px;stroke-linecap:square;width:20px;height:20px;display:none}.menu-button:hover,.menu-button[aria-expanded=true]{color:var(--cream);background:var(--structure)}.menu-button:active{transform:translateY(1px)}.pattern-nav,.on-this-page{top:calc(76px + env(safe-area-inset-top));height:calc(100vh - 76px - env(safe-area-inset-top));align-self:start;padding:46px 26px 60px;position:sticky;overflow:auto}.pattern-nav{border-right:1px solid var(--line);background:var(--paper-deep)}.pattern-nav nav,.on-this-page nav{gap:3px;display:grid}.pattern-nav a{color:var(--ink-soft);border-left:2px solid #0000;grid-template-columns:28px 1fr;gap:6px;padding:8px 9px;font-size:11px;line-height:1.35;text-decoration:none;display:grid}.pattern-nav a span{font:10px var(--mono)}.pattern-nav a:hover,.pattern-nav a.active{color:var(--ink);background:var(--paper-clay);border-left-color:var(--accent)}.on-this-page{border-left:1px solid var(--line);background:var(--paper-sage)}.contents-heading .nav-label{margin-bottom:24px}.contents-close{display:none}.on-this-page a{color:var(--ink-soft);padding:6px 0;font-size:11px;line-height:1.35;text-decoration:none}.on-this-page a:hover{color:var(--structure);text-underline-offset:3px;text-decoration:underline}.reader-main{background:var(--cream);min-width:0;padding:70px clamp(34px,5vw,76px) 100px}.article-kicker{color:var(--accent-ink);font:500 11px var(--mono);letter-spacing:.12em;justify-content:space-between;display:flex}.reader-main article>h1{font:500 clamp(3.4rem, 6vw, 5.6rem)/.94 var(--serif);letter-spacing:-.05em;margin:30px 0 34px}.article-rule{background:var(--accent);width:64px;height:5px;margin-bottom:64px}.reader-main article{color:var(--body-ink);font-size:1rem;line-height:1.78}.reader-main article :where(h1,h2,h3,p,li,td,th),.hero h1{overflow-wrap:anywhere}.reader-main article h2{color:var(--ink);font:600 clamp(1.9rem, 3vw, 2.7rem)/1.08 var(--serif);letter-spacing:-.03em;margin:76px 0 22px;scroll-margin-top:110px}.reader-main article h3{color:var(--structure);margin:42px 0 14px;scroll-margin-top:110px;font-size:1.12rem;line-height:1.35}.reader-main article h4{color:var(--ink);overflow-wrap:anywhere;margin:28px 0 12px;font-size:1rem;font-weight:600;line-height:1.5}.reader-main article :where(h1,h2){text-wrap:balance}.reader-main article :where(h2,h3,h4) strong{font-weight:inherit}.reader-main article>:where(p,ul,ol){max-width:75ch}.reader-main article p{margin:0 0 18px}.reader-main article ul,.reader-main article ol{margin:0 0 26px;padding-left:1.4rem}.reader-main article li{margin:6px 0;padding-left:6px}.reader-main article a{color:var(--structure);-webkit-text-decoration-color:var(--link-rule);text-decoration-color:var(--link-rule);text-underline-offset:3px;text-decoration-thickness:1px}.reader-main article a:hover{color:var(--accent-ink);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}.reader-main article a.practice-question-link,.reader-main article a.practice-question-link:hover{color:inherit;text-decoration:none}.reader-main article a.practice-question-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.reader-main article blockquote{border:0;border-left:5px solid var(--note);color:var(--ink);background:var(--paper-gold);font-family:var(--serif);margin:30px 0;padding:22px 24px;font-size:1.16rem;line-height:1.55}.reader-main article blockquote :where(h2,h3){color:var(--note)}.reader-main article blockquote p:last-child{margin-bottom:0}.reader-main article code{color:var(--accent-ink);background:var(--inline-code-paper);font:.9em var(--mono);border-radius:3px;padding:.15em .35em}.reader-main article pre{color:var(--code-text);background:var(--code-surface);border-left:5px solid var(--accent);margin:0;padding:24px;line-height:1.6;overflow:auto}.reader-main article pre code{color:inherit;background:0 0;padding:0}.reader-main article pre:focus-visible{outline-color:var(--accent);outline-offset:-4px}.code-shell,.code-disclosure{background:var(--code-surface);min-width:0;max-width:100%;margin:26px 0 32px;box-shadow:0 10px 28px #182c2921}.code-caption,.code-disclosure summary{min-height:44px;color:var(--code-caption-text);background:var(--code-caption-surface);font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid #ffffff24;justify-content:space-between;align-items:center;gap:20px;padding:10px 18px;display:flex}.code-disclosure summary:focus-visible{outline-color:var(--code-keyword);outline-offset:-3px}.code-disclosure summary{cursor:pointer}.code-disclosure summary::marker{color:var(--code-string)}.code-disclosure[open] summary{border-bottom-color:#ffffff38}.syntax-keyword{color:var(--code-keyword)}.syntax-type{color:var(--code-type)}.syntax-string{color:var(--code-string)}.syntax-number{color:var(--code-number)}.syntax-comment{color:var(--code-comment);font-style:italic}.reader-main article table{border-collapse:collapse;width:100%;margin:30px 0;font-size:.9rem}.reader-main article th{color:var(--cream);background:var(--structure);text-align:left}.reader-main article th,.reader-main article td{border:1px solid var(--line);vertical-align:top;padding:12px}.reader-main article hr{border:0;border-top:1px solid var(--line);margin:64px 0}.article-pager{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;gap:22px;margin-top:90px;padding-top:35px;display:grid}.article-pager a{color:var(--structure-soft);flex-direction:column;gap:8px;text-decoration:none;display:flex}.article-pager a>span{align-items:center;gap:6px;display:inline-flex}.article-pager a:hover strong{color:var(--accent-ink)}.article-pager a strong{color:var(--ink);font:500 1.3rem var(--serif)}.article-pager .next{text-align:right;align-items:end}.route-state{background:var(--paper);min-height:100vh}.state-header{height:calc(76px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(4vw, env(safe-area-inset-right)) 0 max(4vw, env(safe-area-inset-left));border-bottom:1px solid var(--line);align-items:center;display:flex}.state-main{min-height:calc(100vh - 76px - env(safe-area-inset-top));place-items:center;padding:64px 7vw;display:grid}.state-copy{text-align:center;width:min(760px,100%)}.state-copy h1{font:500 clamp(3rem, 7vw, 5.8rem)/.96 var(--serif);letter-spacing:-.04em;text-wrap:balance;margin:10px auto 26px}.state-description{max-width:580px;color:var(--ink-soft);margin:0 auto 32px;line-height:1.7}.state-action{color:var(--structure);text-underline-offset:5px;align-items:center;gap:10px;font-weight:700;display:inline-flex}.state-action:hover{color:var(--accent-ink)}.route-state--loading{color:var(--structure);background:var(--paper-sage)}.route-state--loading .state-header{background:#fffdf757}.loading-rule{background:#275f5a33;width:150px;height:3px;margin:0 auto 28px;display:block;position:relative;overflow:hidden}.loading-rule:after{content:"";background:var(--accent);transform-origin:0;animation:1.4s cubic-bezier(.16,1,.3,1) infinite prepare-lesson;position:absolute;inset:0}.route-state--error{background:var(--paper-clay)}.route-state--error .eyebrow{color:var(--danger)}@keyframes prepare-lesson{0%{transform:scaleX(.12)translate(-100%)}55%{transform:scaleX(.72)translate(20%)}to{transform:scaleX(.12)translate(900%)}}@media (width<=1120px){.reader-shell{grid-template-columns:220px minmax(0,1fr)}.on-this-page{display:none}.reader-header>.menu-button,.on-this-page .contents-close{min-height:44px;display:block}.on-this-page.is-open{z-index:20;width:100%;height:100dvh;min-height:0;padding:0 max(26px, env(safe-area-inset-right)) max(46px, env(safe-area-inset-bottom)) max(26px, env(safe-area-inset-left));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;opacity:0;border-left:0;transition:none;display:block;position:fixed;inset:0;overflow-y:auto;transform:translateY(-8px)}.on-this-page.is-open[data-visible=true]{opacity:1;transform:translateY(0)}.on-this-page.is-open[data-motion=pointer]{transition:transform .22s var(--ease-drawer), opacity .22s var(--ease-drawer)}.on-this-page.is-open[data-motion=pointer][data-visible=false]{transition-duration:.16s}.on-this-page.is-open[data-closing=true]{pointer-events:none}.contents-heading{z-index:1;height:calc(56px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);background:var(--paper-sage);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px;display:flex;position:sticky;top:0}.contents-heading .nav-label{margin:0}.on-this-page nav{gap:0}.on-this-page nav a{border-bottom:1px solid #275f5a24;align-items:center;min-height:44px;padding:10px 8px;font-size:.875rem;display:flex}}@media (width<=900px){.hero{background:linear-gradient(180deg, var(--paper) 0 54%, var(--paper-sage) 54% 100%);grid-template-columns:1fr;padding-top:64px}.hero-card{max-width:480px}.pattern-grid{grid-template-columns:repeat(2,1fr)}.reader-shell{display:block}.reader-header{transition:transform .28s cubic-bezier(.16,1,.3,1);position:sticky}.reader-header.is-hidden{box-shadow:none;transform:translateY(-100%)}.reader-header.is-hidden:focus-within{transform:none}.reader-header.is-compact{pointer-events:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border-bottom-color:#0000}.reader-header.is-compact .brand{visibility:hidden;opacity:0}.reader-header.is-compact .menu-button{pointer-events:auto;width:44px;height:44px;color:var(--cream);background:var(--structure);place-items:center;padding:0;display:grid;box-shadow:0 8px 24px #182c292e}.reader-header.is-compact .menu-button-label{display:none}.reader-header.is-compact .contents-menu-icon{display:block}.reader-progress{display:none}.menu-button{display:block}.pattern-nav{display:none}.reader-main{min-height:calc(100vh - 76px - env(safe-area-inset-top))}}@media (width<=620px){.site-header,.reader-header,.state-header{height:calc(66px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left))}.contents-heading{height:calc(52px + env(safe-area-inset-top))}.hero{background:linear-gradient(180deg, var(--paper) 0 58%, var(--paper-sage) 58% 100%);min-height:0;padding:54px 22px 70px}.hero h1{font-size:clamp(3rem,15vw,4.7rem)}.hero-card{box-shadow:9px 9px 0 var(--accent);padding:27px}.library{padding:65px 22px 80px}.library-heading{display:grid}.pattern-collections{gap:60px}.collection-heading{align-items:baseline}.search{min-width:0}.pattern-grid{grid-template-columns:1fr}.pattern-card{min-height:170px}footer{gap:10px;padding:28px 22px;display:grid}.reader-main{min-height:calc(100vh - 66px - env(safe-area-inset-top));padding:52px 22px 80px}.reader-main article>h1{font-size:clamp(3rem,14vw,4.4rem)}.code-shell,.code-disclosure{width:calc(100% + 44px);max-width:none;margin-left:-22px;margin-right:-22px}.reader-main article pre{padding-right:max(24px, env(safe-area-inset-right));padding-left:max(24px, env(safe-area-inset-left));border-left-width:3px;border-radius:0}.code-caption,.code-disclosure summary{padding-right:max(18px, env(safe-area-inset-right));padding-left:max(18px, env(safe-area-inset-left))}.reader-main article table{max-width:100%;display:block;overflow-x:auto}.article-pager{grid-template-columns:1fr}.article-pager .next{text-align:left;align-items:start}.state-main{min-height:calc(100vh - 66px - env(safe-area-inset-top));padding:54px max(22px, env(safe-area-inset-right)) max(54px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left))}.state-copy h1{font-size:clamp(3rem,14vw,4.4rem)}}@media (height<=500px) and (orientation:landscape){.site-header,.reader-header,.state-header{height:calc(60px + env(safe-area-inset-top))}.reader-main{min-height:calc(100vh - 60px - env(safe-area-inset-top));padding-top:36px}.reader-main article>h1{margin-top:20px;margin-bottom:24px;font-size:clamp(2.8rem,7vw,4rem)}.article-rule{margin-bottom:40px}.reader-main article h2{margin-top:56px}.contents-heading{height:calc(50px + env(safe-area-inset-top))}}@media (width>=700px) and (width<=900px) and (orientation:landscape){.hero{background:linear-gradient(90deg, var(--paper) 0 64%, var(--paper-sage) 64% 100%);grid-template-columns:minmax(0,1.35fr) minmax(260px,.8fr);gap:5vw;min-height:500px;padding:42px 5vw 54px}.hero h1{font-size:clamp(3rem,6.5vw,4.3rem)}.hero-summary{margin-top:24px}.hero-card{max-width:none;padding:28px}}@media (pointer:coarse){.menu-button,.article-pager a,.pattern-nav a,.on-this-page a{min-height:44px}}@media (width<=400px){.brand>span:last-child{display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.loading-rule:after{animation:none;transform:scaleX(.6)}.reader-header{transition:none}.pattern-card{transition:background .2s,color .2s}.pattern-card:focus-visible,.pattern-arrow{transition:none}.pattern-card:hover .pattern-arrow,.pattern-card:active,.menu-button:active{transform:none}}@media (width<=1120px){.reader-header[data-drawer-switching=true]{transition:none}}@media (width<=1120px) and (prefers-reduced-motion:reduce){.on-this-page.is-open,.on-this-page.is-open[data-visible=true]{transform:none}.on-this-page.is-open[data-motion=pointer],.on-this-page.is-open[data-motion=pointer][data-visible=false]{transition:opacity .12s var(--ease-out)}}@media (forced-colors:active){.search:focus-within,.menu-button,.skip-link{border-color:canvastext}.pattern-card:focus-visible,.reader-main article pre:focus-visible{outline-color:highlight}}