@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#202220;--muted:#6c7069;--paper:#fafaf7;--line:#dddfd7;--green:#d8eb73;--purple:#e6e1f5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.8 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:#fafaf7ef;position:sticky;top:0;z-index:5;backdrop-filter:blur(15px)}.brand{font:800 20px Manrope,sans-serif;letter-spacing:-1px}.brand span{color:var(--muted);font-weight:400}nav{display:flex;gap:28px;font-size:13px}nav a:hover,.toc a:hover{color:#657b12}.wrap{max-width:1360px;margin:auto;padding:0 5vw}.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:2px;font-weight:700;color:var(--muted)}h1,h2,h3{font-family:Manrope,sans-serif;line-height:1.18;letter-spacing:-.045em}h1{font-size:clamp(40px,5.8vw,82px);font-weight:500;max-width:1030px;margin:25px 0}h2{font-size:36px;font-weight:500;margin:0 0 24px}h3{font-size:27px;font-weight:500;margin:0 0 22px}p{margin:0 0 22px}.hero{padding:75px 0 60px}.hero .intro{font-size:20px;line-height:1.6;color:var(--muted);max-width:700px}.meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:45px;padding-top:24px;gap:25px;font-size:13px}.meta b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:7px;color:var(--muted)}.cover{background:#e9eddf;border-radius:5px;padding:55px;overflow:hidden}.cover.purple{background:var(--purple)}.mock{background:white;border:1px solid #cdd3c5;box-shadow:0 20px 50px #28301a12;border-radius:10px;overflow:hidden;transform:rotate(-1deg);max-width:1000px;margin:auto}.mockbar{border-bottom:1px solid #e6e8e0;padding:16px 22px;display:flex;justify-content:space-between;align-items:center}.mockbody{display:grid;grid-template-columns:145px 1fr}.side{background:#f6f7f2;padding:20px;font-size:12px;line-height:3}.side strong{background:#e2edc1;display:block;padding:0 10px;border-radius:4px}.tablearea{padding:25px;overflow:auto}.tablearea h3{font-size:20px;margin:0}.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:20px 0}.pill{font-size:11px;background:#f5f6f0;border:1px solid #dce1d3;padding:4px 10px;border-radius:5px}.action{background:var(--ink);color:white;border:0;border-radius:5px;padding:8px 15px;font-size:12px;margin-left:auto}table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.6}th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line)}th{font-size:11px;color:var(--muted);font-weight:500}input{accent-color:#6e851d}.status{font-size:10px;background:#edf3dc;padding:4px 9px;border-radius:20px;white-space:nowrap}.caption{color:var(--muted);font-size:11px;margin-top:14px}.contentgrid{display:grid;grid-template-columns:200px minmax(0,760px);gap:7vw;justify-content:center;margin:90px auto}.toc{position:sticky;top:115px;align-self:start;font-size:11px;border-top:1px solid var(--line);padding-top:18px}.toc a{display:block;line-height:1.5;margin:0 0 14px;color:var(--muted)}.toc a.active{color:var(--ink);font-weight:700}.chapter{padding-bottom:48px;margin-bottom:48px;border-bottom:1px solid var(--line);scroll-margin-top:110px}.chapter>p{font-size:16px;color:#51564e}.chapter strong{color:var(--ink)}.chapter table{margin:28px 0}.chapter li{color:#51564e;margin-bottom:10px}.num{font-size:10px;letter-spacing:2px;color:#82923c;display:block;margin-bottom:18px}.callout{background:#edf1df;padding:30px;margin:30px 0;border-left:3px solid #899b43;font-size:17px}.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0}.flow>div{padding:22px;background:#f0f1eb;border:1px solid var(--line);border-radius:5px;font-size:13px;line-height:1.5}.flow b{display:block;margin:10px 0}.flow small{color:var(--muted)}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:28px 0}.metrics>div{padding:28px;background:#eae5f5}.metrics strong{display:block;font:500 50px Manrope}.metrics small{color:var(--muted)}.cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:80px}.project{border-top:1px solid var(--line);padding-top:20px}.project h2{font-size:29px;margin:23px 0 13px}.project p{color:var(--muted);font-size:14px}.mini{height:300px;background:#e9eddf;display:flex;align-items:center;justify-content:center;padding:35px;overflow:hidden}.mini.purple{background:var(--purple)}.mini .mock{width:100%;font-size:10px}.mini .mockbody{grid-template-columns:70px 1fr}.mini .tablearea{padding:12px}.mini .side{padding:10px}.mini td,.mini th{padding:7px}.mini .tools{margin:10px 0}.mini .pill{font-size:8px}.link{border-bottom:1px solid;display:inline-block;font-size:13px}.next{padding:55px;background:var(--ink);color:white;display:block}.next span{font-size:12px;color:#b6bdb0}.next h2{margin:15px 0 0}footer{padding:35px 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.node{padding:16px 20px;border:1px solid #cec6e5;background:white;border-radius:8px;margin:14px auto;width:75%;text-align:center;font-size:13px}.connect{text-align:center;color:#8572b3}.entityboard{max-width:800px;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:auto}.entityboard>div{padding:25px;background:#ffffff80;border:1px solid #d1c8e4;border-radius:8px}.entityboard h3{font-size:20px}.entityboard .wide{grid-column:1/-1;text-align:center}.tag{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#726283}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:white;z-index:9}a:focus-visible,button:focus-visible{outline:3px solid #92a246;outline-offset:5px}@media(max-width:850px){.contentgrid{grid-template-columns:1fr;margin-top:50px}.toc{position:static;display:flex;overflow:auto;gap:18px}.toc a{min-width:120px}.meta{grid-template-columns:1fr 1fr}.cover{padding:25px}.cards{grid-template-columns:1fr}.flow{grid-template-columns:1fr}.mockbody{grid-template-columns:1fr}.side{display:none}h2{font-size:29px}.hero{padding-top:45px}nav{gap:15px}.entityboard{grid-template-columns:1fr}.entityboard .wide{grid-column:auto}.next{padding:30px}.mini{height:270px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.product-figure{margin:36px 0}.image-open{display:block;border:1px solid var(--line);border-radius:8px;padding:12px;background:#eef1f7;width:100%;cursor:zoom-in}.image-open img{display:block;width:100%;height:auto;border-radius:3px}.product-figure figcaption{font-size:11px;line-height:1.6;color:var(--muted);margin:12px 0}.product-figure figcaption span{display:block;color:#567013;margin-top:5px}.product-hero .product-figure{margin:0}.visual-pair{display:grid;gap:12px}.detail-pair{display:grid;grid-template-columns:230px 1fr;gap:36px;align-items:center}.detail-pair .image-open{padding:20px}.detail-pair h3{font-size:24px}.detail-pair p{color:var(--muted);font-size:14px}dialog{border:0;border-radius:10px;padding:55px 20px 20px;max-width:96vw;max-height:94vh;background:#f5f7fa;overflow:auto}dialog::backdrop{background:#10151cbb;backdrop-filter:blur(5px)}dialog img{display:block;max-width:none;width:min(1440px,86vw);height:auto}.image-close{position:sticky;top:0;display:block;margin:-38px 0 16px auto;padding:5px 14px;border:1px solid #bcc5d1;border-radius:5px;background:white}@media(max-width:650px){.detail-pair{grid-template-columns:1fr}.detail-pair .product-figure{max-width:280px;margin:auto}.image-open{padding:5px}.product-figure{margin:26px 0}dialog img{width:1200px}.product-hero{margin-bottom:20px}}
