:root{color:#171515;font-synthesis:none;text-rendering:optimizelegibility;background:#f6f3ef;font-family:Inter,Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:#f6f3ef;min-width:320px;margin:0}button,input,select{font:inherit}a{color:inherit}main{min-height:100vh}.topbar{z-index:10;background:#f6f3efeb;border-bottom:1px solid #e9e5e0;justify-content:space-between;align-items:center;padding:1rem clamp(1rem,4vw,3rem);display:flex;position:sticky;top:0}.brand{font-weight:800;text-decoration:none}.brand span{color:#6f655b;font-weight:600}.nav-links{gap:1rem;display:flex}.nav-links a{color:#26252d;font-size:.92rem;text-decoration:none}.hero{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:2rem;padding:clamp(3rem,8vw,6rem) clamp(1rem,4vw,3rem) 2rem;display:grid}.hero h1{letter-spacing:0;max-width:980px;margin:0;font-size:clamp(2.4rem,6vw,5.5rem);line-height:.95}.hero-copy{color:#4e4944;max-width:650px;font-size:1.15rem;line-height:1.6}.eyebrow{color:#766d63;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .8rem;font-size:.78rem;font-weight:800}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-self:end;gap:.75rem;display:grid}.stat,.category-card,.pattern-card,.detail-panel,.source-card,.example-card,.skill-card,.flow-card,.flow-step{background:#fffdfa;border:1px solid #e9e5e0;border-radius:.75rem}.stat{padding:1.25rem}.stat strong{font-size:2rem;display:block}.stat span{color:#6f655b}.section{padding:2rem clamp(1rem,4vw,3rem)}.section-heading{justify-content:space-between;align-items:end;margin-bottom:1rem;display:flex}h2{letter-spacing:0;margin:0;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1}.category-grid,.example-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.category-card,.pattern-card{color:inherit;cursor:pointer;text-align:left}.category-card{min-height:180px;padding:1.25rem}.category-card span,.category-card strong{display:block}.category-card strong{margin:.75rem 0;font-size:2rem}.category-card p,.pattern-card p,.source-card p{color:#5c554d;margin:0;line-height:1.5}.active{border-color:#171515;box-shadow:inset 0 0 0 2px #171515}.filters{background:#f3f0eb;border:1px solid #e9e5e0;border-radius:.75rem;grid-template-columns:1.5fr repeat(4,1fr);gap:.85rem;margin-bottom:1rem;padding:1rem;display:grid}label{color:#4e4944;gap:.4rem;font-size:.85rem;font-weight:700;display:grid}input,select{color:#171515;background:#fffdfa;border:1px solid #d9d2cb;border-radius:.65rem;min-height:2.75rem;padding:0 .8rem}.workspace{grid-template-columns:minmax(280px,.42fr) minmax(0,.58fr);align-items:start;gap:1rem;display:grid}.pattern-list{gap:.75rem;display:grid}.pattern-card{padding:1rem}.pattern-card h3{margin:.75rem 0 .4rem;font-size:1.05rem}.pill{color:#fffdfa;background:#171515;border-radius:999px;padding:.32rem .6rem;font-size:.75rem;font-weight:800;display:inline-flex}.meta-row,.tag-row{flex-wrap:wrap;gap:.5rem;display:flex}.meta-row{color:#766d63;margin-top:.9rem;font-size:.82rem}.detail-panel{padding:clamp(1rem,3vw,2rem);position:sticky;top:5.5rem}.detail-head h2{margin-top:1rem}.detail-head p{color:#4e4944;font-size:1.05rem;line-height:1.6}.detail-block{border-top:1px solid #e9e5e0;padding-top:1rem}.detail-block h3,.skill-card h3,.linked-sources h3,.detail-examples h3{margin:0 0 .6rem;font-size:.95rem}.detail-block ul{margin:0;padding-left:1.1rem}.detail-block li{color:#4e4944;margin:.25rem 0;line-height:1.55}.skill-card{margin:1rem 0;padding:1rem}.tag-row span{color:#4e4944;background:#f3f0eb;border:1px solid #e9e5e0;border-radius:999px;padding:.35rem .6rem;font-size:.78rem;font-weight:700}.linked-sources{margin-top:1rem}.linked-sources a,.example-card a,.flow-head a,.flow-step a{margin-top:.35rem;font-weight:700;display:block}.detail-examples{border-top:1px solid #e9e5e0;margin-top:1rem;padding-top:1rem}.detail-example-grid{gap:.75rem;display:grid}.doc-link{color:#766d63;font-size:.82rem;font-weight:800}.flow-stack{gap:1.25rem;display:grid}.flow-card{gap:1rem;padding:clamp(1rem,3vw,1.5rem);display:grid}.flow-head{justify-content:space-between;align-items:start;gap:1rem;display:flex}.flow-head h3{margin:0;font-size:clamp(1.35rem,2vw,1.8rem)}.captured-path{color:#4e4944;margin:0;line-height:1.55}.flow-steps{gap:1rem;display:grid}.flow-step{grid-template-columns:minmax(0,.66fr) minmax(240px,.34fr);gap:0;margin:0;display:grid;overflow:hidden}.flow-step img{object-fit:contain;background:#f3f0eb;align-self:start;width:100%;height:auto;max-height:760px;display:block}.flow-step figcaption{border-left:1px solid #e9e5e0;align-content:start;gap:.5rem;padding:1rem;display:grid}.flow-step figcaption span{color:#766d63;text-transform:uppercase;font-size:.78rem;font-weight:800}.flow-step figcaption p{color:#4e4944;margin:0;line-height:1.45}.flow-notes{border-top:1px solid #e9e5e0;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding-top:1rem;display:grid}.split{grid-template-columns:.35fr .65fr;align-items:start;gap:2rem;display:grid}.source-list{gap:.75rem;display:grid}.source-card{gap:.35rem;padding:1rem;text-decoration:none;display:grid}.source-card span,.example-card span{color:#766d63;font-size:.9rem}.example-card{margin:0;overflow:hidden}.image-open-button{color:inherit;cursor:zoom-in;text-align:inherit;background:#f3f0eb;border:0;width:100%;margin:0;padding:0;display:block}.image-open-button:focus-visible,.image-viewer button:focus-visible{outline-offset:3px;outline:3px solid #171515}.example-card img{aspect-ratio:16/10;object-fit:contain;background:#f3f0eb;width:100%;display:block}.example-card figcaption{gap:.3rem;padding:1rem;display:grid}.example-card.compact img{aspect-ratio:16/9}.example-card.compact figcaption{padding:.8rem}.alert,.empty{margin:1rem clamp(1rem,4vw,3rem)}.alert{color:#fffdfa;background:#171515;border-radius:.75rem;padding:1rem}.empty{color:#766d63}.image-viewer{z-index:100;background:#171515eb;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(5rem,.12fr) minmax(0,1fr) minmax(5rem,.12fr);align-items:center;gap:1rem;padding:1rem;display:grid;position:fixed;inset:0}.image-viewer-toolbar{color:#fffdfa;grid-column:1/-1;justify-content:space-between;align-items:center;gap:1rem;display:flex}.image-viewer-toolbar div{gap:.15rem;display:grid}.image-viewer-toolbar span{color:#d9d2cb;text-transform:uppercase;font-size:.85rem;font-weight:800}.image-viewer-toolbar strong{font-size:clamp(1rem,2vw,1.35rem)}.image-viewer button{color:#171515;cursor:pointer;background:#fffdfa;border:1px solid #d9d2cb;border-radius:.65rem;min-height:2.75rem;padding:0 .9rem;font-weight:800}.image-viewer button:disabled{cursor:not-allowed;opacity:.45}.image-viewer img{object-fit:contain;background:#0f0e0d;grid-column:2;align-self:stretch;width:100%;height:100%;max-height:calc(100vh - 6rem);display:block}.viewer-nav{align-self:center}.viewer-nav.previous{grid-column:1}.viewer-nav.next{grid-column:3}@media (width<=980px){.hero,.workspace,.split,.filters,.flow-step,.flow-notes{grid-template-columns:1fr}.detail-panel{position:static}.category-grid,.example-grid{grid-template-columns:1fr}}@media (width<=640px){.topbar,.section-heading{flex-direction:column;align-items:flex-start;gap:.75rem}.nav-links{flex-wrap:wrap}.stats-grid{grid-template-columns:1fr}.flow-head{flex-direction:column}.flow-step figcaption{border-top:1px solid #e9e5e0;border-left:0}.image-viewer{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:1fr 1fr}.image-viewer img{grid-column:1/-1}.viewer-nav.previous{grid-column:1}.viewer-nav.next{grid-column:2}}