@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,750&display=swap');
.deck-callout{display:grid;grid-template-columns:1.45fr .55fr;gap:42px;padding:38px;background:var(--card);border:1px solid var(--line);border-top:5px solid var(--orange);box-shadow:var(--shadow)}.deck-callout>div>p:not(.eyebrow){max-width:760px;color:var(--muted)}.deck-topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.deck-topics span{padding:6px 9px;background:#dfe9e4;color:var(--teal);font-size:11px;font-weight:700}.deck-callout aside{display:flex;flex-direction:column;justify-content:center;padding-left:30px;border-left:1px solid var(--line)}.deck-callout aside strong{font:700 38px/1 'Source Serif 4','Noto Sans Thai',serif}.deck-callout aside span{margin:12px 0 22px;color:var(--muted);font-size:12px}.deck-callout aside a{padding:12px 15px;background:var(--navy);color:#fff;text-decoration:none;font-weight:700;text-align:center}@media(max-width:850px){.deck-callout{grid-template-columns:1fr;padding:26px}.deck-callout aside{padding:22px 0 0;border-left:0;border-top:1px solid var(--line)}}
.lab-guide{display:grid;grid-template-columns:.75fr 1.25fr;gap:24px}.guide-question,.guide-steps{padding:28px;background:var(--card);border:1px solid var(--line)}.guide-question h2{font-size:clamp(28px,3vw,42px)}.guide-steps h3{margin-top:0}.guide-steps ol{margin:0;padding:0;list-style:none;counter-reset:labstep}.guide-steps li{position:relative;padding:13px 0 13px 44px;border-bottom:1px solid var(--line);counter-increment:labstep}.guide-steps li:before{content:counter(labstep,decimal-leading-zero);position:absolute;left:0;top:13px;color:var(--orange);font-weight:800;font-size:12px}.guide-steps li:last-child{border-bottom:0}.ivm-boundary{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;padding:24px;background:var(--navy);color:#fff}.ivm-boundary>div{padding:20px;border:1px solid #365661}.ivm-boundary>div span,.ivm-boundary>div strong{display:block}.ivm-boundary>div span{color:#79d9cb;font-size:11px;font-weight:800;letter-spacing:.1em}.ivm-boundary>div strong{margin:6px 0;font:700 28px/1.1 'Source Serif 4','Noto Sans Thai',serif}.ivm-boundary>div p{margin:0;color:#bfd0d0;font-size:13px}.ivm-boundary>b{align-self:center;color:var(--orange);font-size:30px}.ivm-boundary .ivm-answer{grid-column:1/-1;margin:0;padding:17px 20px;background:#f2e5d8;color:var(--ink);border-left:5px solid var(--orange)}.scope-note,.measurement-note{grid-column:1/-1;padding:18px 22px}.scope-note{border-left:5px solid var(--orange);background:#f2e5d8}.scope-note strong{color:#9a471c}.scope-note p,.measurement-note p{margin:5px 0 0}.measurement-note{border-left:5px solid var(--teal);background:#dfe9e4}.measurement-note strong{color:var(--teal)}.measurement-note p{color:var(--muted);font-size:13px}.timing-caution{padding:16px 20px;background:#f2e5d8;border-left:5px solid var(--orange);color:var(--muted);font-size:13px}@media(max-width:850px){.lab-guide,.ivm-boundary{grid-template-columns:1fr}.scope-note,.measurement-note,.ivm-boundary,.ivm-boundary .ivm-answer{grid-column:auto}.ivm-boundary>b{display:none}}
.er-section{margin-top:58px}.er-heading{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:end;margin-bottom:30px}.er-heading p{color:var(--muted)}.er-diagram{position:relative;display:grid;grid-template-columns:1fr 1.18fr 1fr;grid-template-rows:auto auto auto;gap:44px 110px;padding:34px;background:#e6ece8;border:1px solid var(--line);overflow:hidden}.er-entity{position:relative;z-index:2;min-width:0;background:var(--card);border:1px solid #afbeb8;box-shadow:0 10px 24px rgba(14,43,48,.08)}.er-entity header{padding:7px 13px;background:#d7e3de;color:var(--teal);font-size:10px;font-weight:700;letter-spacing:.08em}.er-entity h3{margin:0;padding:12px 13px 8px;font:700 20px/1.2 'Source Serif 4','Noto Sans Thai',serif}.er-entity code{display:block;padding:4px 13px;font-size:11px}.er-entity code:last-of-type{padding-bottom:14px}.er-entity>span{position:absolute;z-index:3;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--orange);color:#fff;font-size:11px;font-weight:700}.er-time{grid-column:1;grid-row:1}.er-product{grid-column:1;grid-row:3}.er-customer{grid-column:3;grid-row:1}.er-geography{grid-column:3;grid-row:2}.er-channel{grid-column:3;grid-row:3}.er-fact{grid-column:2;grid-row:1/4;align-self:center;border:2px solid var(--teal)}.er-fact header{background:var(--teal);color:#fff}.er-time>span,.er-product>span{right:-13px;top:calc(50% - 13px)}.er-customer>span,.er-geography>span,.er-channel>span{left:-13px;top:calc(50% - 13px)}.er-fact>span{left:-13px;top:calc(50% - 13px);background:var(--navy)}.er-line{position:absolute;z-index:1;border-top:2px dashed #7b9691;transform-origin:left center}.line-time{left:28%;top:24%;width:27%;transform:rotate(20deg)}.line-product{left:28%;top:76%;width:27%;transform:rotate(-20deg)}.line-customer{left:51%;top:31%;width:27%;transform:rotate(-18deg)}.line-geography{left:51%;top:50%;width:27%}.line-channel{left:51%;top:69%;width:27%;transform:rotate(18deg)}.er-legend{display:flex;flex-wrap:wrap;gap:20px;margin-top:14px;color:var(--muted);font-size:12px}.er-legend span{display:flex;align-items:center;gap:8px}.er-legend i{display:inline-block;width:28px}.legend-concept{border-top:2px dashed #7b9691}.legend-physical{height:8px;background:var(--teal)}@media(max-width:850px){.er-heading{grid-template-columns:1fr;gap:4px}.er-diagram{grid-template-columns:1fr;grid-template-rows:auto;gap:16px;padding:18px}.er-time,.er-product,.er-customer,.er-geography,.er-channel,.er-fact{grid-column:1;grid-row:auto}.er-fact{order:-1}.er-line{display:none}.er-entity>span{right:12px!important;left:auto!important;top:12px!important}.er-fact>span{background:var(--navy)}}
.lab-intent .cards{width:100%;margin:28px 0 0}.lab-intent .cards a{min-height:540px}.lab-intent .cards span{font-size:11px;letter-spacing:.08em}.lab-intent .cards h3{min-height:82px;font-size:16px}.lab-intent dl{margin:22px 0}.lab-intent dl div{padding:11px 0;border-top:1px solid var(--line)}.lab-intent dt{font-size:11px;font-weight:700;color:var(--teal);text-transform:uppercase}.lab-intent dd{margin:3px 0 0;color:var(--muted);font-size:13px}.contract-lead{max-width:920px;color:var(--muted)}.grain{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:30px 0}.grain div{padding:18px;background:#dfe9e4;border-top:4px solid var(--teal)}.grain small,.grain strong,.grain span{display:block}.grain small{font-size:10px;letter-spacing:.08em;color:var(--teal)}.grain strong{margin:7px 0;font-size:18px}.grain span{font-size:12px;color:var(--muted)}.schema-map{display:grid;grid-template-columns:1.8fr .8fr;gap:18px}.fact-box,.formula-box{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}.fact-box header{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:18px 22px;background:var(--navy);color:#fff}.fact-box header span{padding:3px 7px;background:var(--orange);font-size:10px;font-weight:700}.fact-box header small{color:#afc7c8}.field-groups{display:grid;grid-template-columns:repeat(2,1fr)}.field-groups section{padding:20px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.field-groups h3{margin-top:0;font-size:14px;color:var(--teal)}.field-groups code{display:block;margin:7px 0;font-size:12px}.formula-box{padding:22px}.formula-box h3{font-size:14px;color:var(--teal)}.formula-box p{margin:8px 0;font-size:13px}.formula-box hr{border:0;border-top:1px solid var(--line);margin:22px 0}.contract-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.contract-rules article{padding:20px;border-left:4px solid var(--orange);background:#e7ece7}.contract-rules b{color:var(--orange)}.contract-rules h3{margin:5px 0}.contract-rules p{margin:0;color:var(--muted);font-size:13px}@media(max-width:850px){.lab-intent .cards a{min-height:0}.lab-intent .cards h3{min-height:0}.grain,.contract-rules,.schema-map{grid-template-columns:1fr}}@media(max-width:480px){.field-groups{grid-template-columns:1fr}.fact-box header{grid-template-columns:auto 1fr}.fact-box header small{grid-column:1/-1}}
:root{--ink:#102b31;--muted:#51676b;--paper:#f1f0e9;--card:#faf9f4;--line:#cdd5d1;--teal:#087d78;--mint:#bce3d7;--orange:#e97732;--navy:#071c29;--shadow:0 16px 40px rgba(14,43,48,.09)}*{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.72}.top{position:sticky;top:0;z-index:20;height:68px;padding:0 max(24px,calc((100% - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:rgba(7,28,41,.96);backdrop-filter:blur(12px);color:#fff}.brand{color:#7fe0d1;text-decoration:none;font-weight:800;font-size:20px}.brand span{color:#fff;font-size:13px;margin-left:8px}.top nav{display:flex;gap:22px}.top nav a{color:#d7e3e3;text-decoration:none;font-size:13px}.top nav a:hover{color:#75dfd0}.menu{display:none}main{min-height:80vh}.hero{min-height:470px;padding:82px max(24px,calc((100% - 1180px)/2));display:grid;grid-template-columns:1.8fr .7fr;gap:70px;align-items:center;background:linear-gradient(125deg,#071b29 0%,#0b3340 62%,#0b6d69 160%);color:#edf5f2}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:700;color:#73d7c8}.eyebrow.dark{color:var(--teal)}h1,h2{font-family:'Source Serif 4','Noto Sans Thai',serif;line-height:1.12;margin:.25em 0}h1{font-size:clamp(38px,5.2vw,72px);max-width:900px}h2{font-size:clamp(28px,3.4vw,46px)}h3{line-height:1.3}.hero p{max-width:760px;color:#bed0d0}.health{display:inline-block;margin-top:18px;padding:8px 12px;border:1px solid #35727a;border-radius:99px;font-size:12px}.hero-mark{border-left:1px solid #3b646b;padding-left:30px}.hero-mark span,.hero-mark small{display:block;color:#9eb8bb}.hero-mark strong{display:block;font:700 48px/1.05 'Source Serif 4';color:#fff;margin:12px 0}.section,.architecture,.lesson,.lab,.cards{width:min(1180px,calc(100% - 48px));margin:74px auto}.architecture{display:grid;grid-template-columns:1fr 1.7fr;gap:60px;align-items:end}.arch-flow{display:flex;align-items:center;gap:14px}.arch-flow div{flex:1;padding:24px;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--teal);box-shadow:var(--shadow)}.arch-flow b,.arch-flow span{display:block}.arch-flow span{font-size:13px;color:var(--muted);margin-top:8px}.arch-flow i{color:var(--orange);font-style:normal}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cards a{min-height:250px;padding:30px;background:var(--card);border:1px solid var(--line);border-bottom:5px solid var(--teal);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:.2s transform}.cards a:hover{transform:translateY(-5px)}.cards span{color:var(--orange);font-weight:700}.cards p{color:var(--muted)}.schema{display:flex;flex-wrap:wrap;gap:8px}.schema code{background:#dfe7e2;padding:7px 10px;border-radius:4px}.note,.guard{color:var(--muted);font-size:13px}.table-wrap{overflow:auto;background:var(--card);border:1px solid var(--line)}table{border-collapse:collapse;width:100%;min-width:780px}th,td{text-align:left;padding:16px;border-bottom:1px solid var(--line);vertical-align:top}th{background:#dce5df;font-size:14px}.lesson{display:grid;grid-template-columns:1.25fr .9fr;gap:50px;align-items:center}.diagram{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:center;padding:24px;background:var(--navy);color:#fff}.diagram span,.diagram b{padding:12px 8px;text-align:center;border:1px solid #42626a;font-size:12px}.diagram i{color:#80decf}.lab{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}.controls,.output{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);padding:26px}.controls{position:sticky;top:92px}.controls label,.controls select{display:block;width:100%}.controls select{margin:8px 0 20px;padding:11px;background:#fff;border:1px solid #aebdb8}.experiments{display:grid;gap:7px;margin:12px 0}.experiments label{padding:9px;border:1px solid var(--line);cursor:pointer}.experiments input{margin-right:8px}button{font:inherit}#run,.secondary{width:100%;padding:12px;border:0;background:var(--teal);color:#fff;font-weight:700;cursor:pointer}.secondary{background:transparent;color:var(--ink);border:1px solid var(--line);margin-top:8px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.metric-grid div{padding:14px;background:#e4ebe6;border-top:3px solid var(--teal)}.metric-grid b,.metric-grid span{display:block}.metric-grid b{font-size:21px}.metric-grid span{font-size:11px;color:var(--muted)}pre{overflow:auto;background:#071c29;color:#d8f0eb;padding:18px;max-height:360px;font-size:12px;white-space:pre-wrap}.result{overflow:auto;max-height:420px}.result table{min-width:580px;font-size:12px}.result.empty{padding:18px;background:#e7e9e3;color:var(--muted)}.what{margin-top:20px;padding:20px;border-left:5px solid var(--orange);background:#f2e5d8}.columns{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.columns>div{padding:24px;background:var(--card);border:1px solid var(--line)}.related{display:inline-block;margin-top:20px;color:var(--teal);font-weight:700}footer{padding:38px max(24px,calc((100% - 1180px)/2));display:flex;justify-content:space-between;background:#061621;color:#b9c9c9;font-size:13px}footer a{color:#71d5c7}@media(max-width:850px){.top{height:auto;min-height:62px;flex-wrap:wrap;padding:12px 20px}.menu{display:block;background:transparent;color:white;border:1px solid #49636b;padding:6px 10px}.top nav{display:none;width:100%;flex-direction:column;gap:0;padding-top:10px}.top nav.open{display:flex}.top nav a{padding:10px 0;border-top:1px solid #28414a}.hero{grid-template-columns:1fr;padding-top:58px}.hero-mark{display:none}.architecture,.lesson,.lab{grid-template-columns:1fr}.arch-flow{flex-direction:column;align-items:stretch}.arch-flow i{text-align:center}.cards,.columns{grid-template-columns:1fr}.controls{position:static}.metric-grid{grid-template-columns:1fr 1fr}.diagram{grid-template-columns:1fr}.diagram i{transform:rotate(90deg);text-align:center}footer{gap:18px;flex-direction:column}}@media(max-width:480px){.section,.architecture,.lesson,.lab,.cards{width:min(100% - 28px,1180px);margin:48px auto}.hero{padding-left:18px;padding-right:18px;min-height:420px}.controls,.output{padding:17px}.metric-grid{grid-template-columns:1fr}.comparison th,.comparison td{padding:11px}}
