@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap');
:root{--navy:#071827;--ink:#172b37;--paper:#eef0eb;--card:#f8f8f3;--line:#c7cfcb;--teal:#087e83;--orange:#cb7135;--muted:#596a70;--blue:#315f7b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans Thai',sans-serif;line-height:1.68}.sitebar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;padding:14px max(4vw,20px);background:rgba(7,24,39,.97)}.sitebar a{color:#dce9e8;text-decoration:none;font-size:11px}main{max-width:1240px;margin:auto}.hero{margin:30px 20px 0;padding:clamp(45px,7vw,90px);background:radial-gradient(circle at 90% 0,#245268,#0c293a 42%,#061722 80%);color:white;display:grid;grid-template-columns:1fr 190px;gap:50px}.eyebrow{font-size:10px;letter-spacing:.16em;color:#63d7ce;font-weight:700}.eyebrow.dark{color:var(--teal)}h1,h2{font-family:'Source Serif 4','Noto Sans Thai',serif;line-height:1.08}.hero h1{font-size:clamp(42px,6.5vw,78px);margin:15px 0}.hero p{color:#c8d7d9;max-width:900px}.hero aside{border-left:1px solid #567381;padding-left:25px}.hero aside b,.hero aside strong{display:block;font:700 58px/1 'Source Serif 4',serif}.hero aside b{color:#63d7ce}.hero aside strong{color:#e8aa67;margin-top:20px}.hero aside span{font-size:9px;letter-spacing:.15em}.definition{margin:0 20px 90px;display:grid;grid-template-columns:1fr 1fr}.definition article{padding:35px;background:#dce8e4}.definition article+article{background:#e9dfd1}.definition article>b{font-size:9px;letter-spacing:.14em;color:var(--teal)}.definition h2{font-size:28px;margin:7px 0}.definition code{display:block;background:var(--card);padding:12px;font-size:12px}.definition p{font-size:12px;color:var(--muted)}.section{margin:0 20px 90px;border-top:6px solid var(--teal);padding-top:24px}.section>header h2{font-size:clamp(30px,4.5vw,50px);margin:5px 0}.section>header>p:last-child{color:var(--muted)}.dag{display:grid;grid-template-columns:1.1fr auto 1.3fr auto 1.3fr auto .8fr auto 1fr;gap:8px;align-items:center;margin-top:30px}.dag>div{padding:22px 14px;background:var(--card);border-top:5px solid var(--blue);min-height:115px}.dag .shared{border-color:var(--teal);background:#dfeae6}.dag .composite{border-color:var(--orange);background:#efe1d4}.dag span,.formula small,.family-body span{display:block;font-size:9px;letter-spacing:.12em;color:var(--teal);font-weight:700}.dag b{display:block;font-size:11px;margin-top:8px}.dag .fan b{display:inline-block;margin-right:4px}.dag>i{color:var(--orange);font-size:20px}.rule{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:18px 23px;background:var(--navy);color:white}.rule strong{color:#65d7ce}.rule p{margin:0;font-size:12px;color:#cbdadd}.formula{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-top:30px}.formula>div{flex:1;min-width:185px;padding:20px;background:var(--card);border:1px solid var(--line)}.formula>span,.formula>strong{align-self:center;color:var(--orange);font-size:24px}.formula b,.formula code{display:block}.formula b{font-size:12px;margin:7px 0}.formula code{font-size:11px}.formula .result{background:#dceae5;border-color:var(--teal)}.checks{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}.checks article,.patterns article,.anti-grid article{padding:20px;background:var(--card);border-top:4px solid var(--teal)}.checks b,.patterns b,.anti-grid b{font-size:11px;color:var(--teal)}.checks p,.patterns p,.anti-grid p{font-size:11px;color:var(--muted)}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;background:#dfe8e4;padding:25px;margin-top:25px}.controls label{font-size:11px;font-weight:600}.controls output{float:right;color:var(--orange);font-size:16px}.controls input{display:block;width:100%;margin-top:12px;accent-color:var(--teal)}.cost-view{display:grid;grid-template-columns:1fr 1fr .8fr;gap:12px;margin-top:12px}.cost-view>div,.cost-view>aside{padding:25px;background:var(--card);border:1px solid var(--line)}.cost-view>div>b,.cost-view span{display:block;font-size:9px;letter-spacing:.1em}.cost-view strong,.cost-view aside>b{font:700 48px/1 'Source Serif 4',serif;color:var(--orange)}.cost-view>div:nth-child(2) strong,.cost-view aside>b{color:var(--teal)}.cost-view i{display:block;height:15px;background:#d9ddda;margin:14px 0}.cost-view em{display:block;height:100%;background:var(--orange);transition:.25s}.cost-view>div:nth-child(2) em{background:var(--teal)}.cost-view code{font-size:11px}.cost-view aside{background:var(--navy);color:white}.cost-view aside p{font-size:11px;color:#c8d7d9}.families{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.families details{background:var(--card);border:1px solid var(--line)}.families summary{display:grid;grid-template-columns:35px 1fr 25px;gap:10px;padding:18px;cursor:pointer;list-style:none}.families summary::-webkit-details-marker{display:none}.families summary>b{color:var(--orange);font-size:10px}.families h3{font-size:16px;margin:0}.families summary code{font-size:10px}.families summary i{font-style:normal;color:var(--teal);font-size:20px;transition:.2s}.families details[open]{grid-column:1/-1}.families details[open] summary{background:#e0eae6}.families details[open] summary i{transform:rotate(45deg)}.family-body{display:grid;grid-template-columns:1.3fr 1fr 1fr;border-top:1px solid var(--line)}.family-body>div{padding:20px;border-right:1px solid var(--line)}.family-body code{display:inline-block;padding:5px 7px;margin:5px 3px 0 0;background:#e4e9e5;font-size:10px}.family-body p{font-size:11px;color:var(--muted)}.patterns{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.patterns code{font-size:10px}.anti-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.anti-grid article{border-color:var(--orange)}.anti-grid b{color:#a75226}.checklist ol{list-style:none;padding:0;counter-reset:item}.checklist li{counter-increment:item;display:grid;grid-template-columns:55px 230px 1fr;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}.checklist li:before{content:counter(item,decimal-leading-zero);color:var(--orange);font-weight:700}.checklist span{color:var(--muted);font-size:12px}.final{margin:0 20px 80px;padding:clamp(40px,7vw,85px);background:var(--navy);color:white}.final h2{font-size:clamp(38px,5.5vw,68px)}.final em{color:#64d6cd}.final p{color:#c8d7d9;max-width:800px}footer{background:var(--navy);color:#afc1c4;padding:28px max(calc((100vw - 1200px)/2),20px);display:flex;justify-content:space-between;font-size:11px}footer a{color:white;text-decoration:none}@media(max-width:950px){.dag{grid-template-columns:1fr}.dag>i{transform:rotate(90deg);justify-self:center}.checks,.patterns{grid-template-columns:1fr 1fr}.families{grid-template-columns:1fr}.families details[open]{grid-column:auto}.cost-view{grid-template-columns:1fr 1fr}.cost-view aside{grid-column:1/-1}}@media(max-width:650px){.hero,.definition,.cost-view,.controls,.checks,.patterns,.anti-grid{grid-template-columns:1fr}.hero aside{border-left:0;border-top:1px solid #567381;padding:20px 0 0}.family-body{grid-template-columns:1fr}.family-body>div{border-right:0;border-bottom:1px solid var(--line)}.rule{grid-template-columns:1fr}.checklist li{grid-template-columns:35px 1fr}.checklist li span{grid-column:2}.cost-view aside{grid-column:auto}footer{flex-direction:column;gap:8px}}
.reuse-lens{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:25px 0 14px}.reuse-lens article{padding:18px;background:#dfe9e5;border-top:4px solid var(--teal)}.reuse-lens b{font-size:9px;color:var(--teal);letter-spacing:.1em}.reuse-lens p{font-size:11px;color:var(--muted);margin-bottom:0}.families summary span{display:block;margin-top:7px;font-size:10px;color:var(--muted)}.family-flow{display:grid;grid-template-columns:1fr auto 1.6fr auto 1.3fr auto .7fr;gap:7px;align-items:stretch;padding:18px;background:#e2e9e5;border-top:1px solid var(--line)}.family-flow>div{padding:15px;background:var(--card);border-top:4px solid var(--blue)}.family-flow .expensive{border-color:var(--orange);background:#f0e2d7}.family-flow small{display:block;font-size:8px;letter-spacing:.1em;color:var(--teal);font-weight:700}.family-flow b{display:block;font-size:10px;margin-top:5px}.family-flow>i{align-self:center;color:var(--orange);font-size:18px}.family-features{padding:15px 20px;border-top:1px solid var(--line)}.family-features>span{display:block;font-size:9px;color:var(--teal);font-weight:700}.family-features code{display:inline-block;padding:6px 8px;margin:6px 4px 0 0;background:#e3e9e5;font-size:10px}.family-dossier{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line)}.family-dossier article{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.family-dossier span{display:block;font-size:9px;color:var(--teal);letter-spacing:.1em;font-weight:700}.family-dossier p,.family-dossier code{font-size:11px;color:var(--muted)}.family-dossier code{display:block;margin-top:7px;background:#e3e9e5;padding:8px;overflow-wrap:anywhere}.family-dossier .invalidate{grid-column:2/-1;background:#f1e2d7}.family-dossier .invalidate span{color:#a65329}@media(max-width:950px){.reuse-lens{grid-template-columns:1fr 1fr}.family-flow{grid-template-columns:1fr}.family-flow>i{transform:rotate(90deg);justify-self:center}.family-dossier{grid-template-columns:1fr 1fr}.family-dossier .invalidate{grid-column:1/-1}}@media(max-width:650px){.reuse-lens,.family-dossier{grid-template-columns:1fr}.family-dossier .invalidate{grid-column:auto}}