@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;--red:#a34c36}*{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,#284f64,#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{display:block;font:700 66px/1 'Source Serif 4',serif;color:#63d7ce}.hero aside strong{display:block;font-size:23px;color:#e9aa67;margin-top:24px}.hero aside span,.hero aside small{display:block;font-size:9px;letter-spacing:.13em}.boundary{margin:0 20px 90px;padding:25px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:10px;align-items:center;background:#dce7e3}.boundary>div{background:var(--card);padding:18px}.boundary b{display:block;color:var(--teal);font-size:9px;letter-spacing:.1em}.boundary code{display:block;font-size:17px;margin:7px 0}.boundary p{font-size:10px;color:var(--muted)}.boundary i{color:var(--orange);font-size:20px}.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)}.intent,.explain,.why-logit{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:25px}.intent article,.explain article,.why-logit article{padding:23px;background:var(--card);border-top:4px solid var(--teal)}.intent b,.explain b,.why-logit b{font-size:9px;color:var(--teal);letter-spacing:.1em}.intent h3{font-size:17px}.intent p,.explain p,.why-logit p{font-size:11px;color:var(--muted)}.methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.methods details{background:var(--card);border:1px solid var(--line)}.methods summary{list-style:none;display:grid;grid-template-columns:35px 1fr 25px;gap:10px;padding:20px;cursor:pointer}.methods summary::-webkit-details-marker{display:none}.methods summary>b{color:var(--orange);font-size:10px}.methods h3{font-size:18px;margin:0}.methods summary span{font-size:9px;color:var(--teal);font-weight:700}.methods summary p{font-size:11px;color:var(--muted);margin:5px 0 0}.methods summary i{font-style:normal;color:var(--teal);font-size:20px;transition:.2s}.methods details[open]{grid-column:1/-1}.methods details[open] summary{background:#dfeae6}.methods details[open] summary i{transform:rotate(45deg)}.method-body{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.method-body article{padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.method-body span{font-size:9px;color:var(--teal);font-weight:700;letter-spacing:.1em}.method-body p,.method-body code{font-size:11px;color:var(--muted)}.method-body code{display:block;background:#e4e9e5;padding:8px}.method-body .avoid{background:#f1e1d8}.method-body .avoid span{color:var(--red)}.matrix{display:grid;grid-template-columns:1.3fr auto 1fr auto 1fr;gap:12px;align-items:center;margin-top:25px}.matrix>div,.logit-flow>div{background:var(--card);padding:22px;border:1px solid var(--line)}.matrix>i,.logit-flow>i{font-size:24px;color:var(--orange)}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line);font-size:11px}.matrix b,.logit-flow span{display:block;font-size:9px;color:var(--teal);letter-spacing:.1em}.matrix code,.logit-flow code{font-size:12px}.logit-flow{display:grid;grid-template-columns:1fr auto 1.3fr auto 1fr auto 1.2fr;gap:9px;align-items:center;margin-top:25px}.bad-good{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}.bad-good article{padding:27px;background:var(--card);border-top:6px solid var(--red)}.bad-good .good{border-color:var(--teal)}.bad-good b{color:var(--red)}.bad-good .good b{color:var(--teal)}.bad-good code{display:block;background:#e4e9e5;padding:13px;font-size:11px}.bad-good p{font-size:11px;color:var(--muted)}.folds{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.folds span{background:#dfe8e4;padding:10px;font-size:11px}.folds strong{color:var(--teal)}.controls{display:grid;grid-template-columns:1fr 1fr;gap:15px;background:#dfe8e4;padding:25px;margin-top:25px}.controls label{font-size:11px;font-weight:600}.controls select{display:block;width:100%;padding:11px;margin-top:7px;background:var(--card)}#recommendation{padding:28px;background:var(--navy);color:white}#recommendation b{display:block;font:700 29px 'Source Serif 4',serif;color:#65d7ce}#recommendation p{font-size:12px;color:#c8d7d9}.table-wrap{overflow-x:auto}.comparison table{background:var(--card);min-width:790px}.comparison th{background:var(--navy);color:white}.comparison td:first-child{font-weight:600;color:var(--teal)}.final{margin:0 20px 80px;padding:clamp(40px,7vw,85px);background:var(--navy);color:white}.final h2{font-size:clamp(42px,6vw,72px);color:#65d7ce}.final p{max-width:900px;color:#c8d7d9}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){.boundary,.matrix,.logit-flow{grid-template-columns:1fr}.boundary>i,.matrix>i,.logit-flow>i{transform:rotate(90deg);justify-self:center}.method-body{grid-template-columns:1fr 1fr}}@media(max-width:650px){.hero,.intent,.explain,.why-logit,.methods,.method-body,.bad-good,.controls{grid-template-columns:1fr}.hero aside{border-left:0;border-top:1px solid #567381;padding:20px 0 0}.methods details[open]{grid-column:auto}footer{flex-direction:column;gap:8px}}
.method-body{grid-template-columns:repeat(3,1fr)}.python-example{border-top:1px solid var(--line);background:#0b2232;color:white}.python-example>header{display:grid;grid-template-columns:130px 1fr auto;gap:15px;align-items:center;padding:16px 22px;border-bottom:1px solid #2d4858}.python-example>header span{font-size:9px;letter-spacing:.12em;color:#64d7ce;font-weight:700}.python-example>header b{font-size:15px}.python-example>header small{color:#a9bdc1;font-size:10px}.python-example pre{margin:0;padding:24px;overflow:auto;background:#071827}.python-example pre code{font:12px/1.65 Consolas,'Courier New',monospace;color:#dce8e8;white-space:pre}.method-body article:nth-child(4),.method-body article:nth-child(5),.method-body article:nth-child(6){background:#edf0eb}.method-body article:nth-child(7),.method-body article:nth-child(8){background:#e0e9e5}@media(max-width:950px){.method-body{grid-template-columns:1fr 1fr}.python-example>header{grid-template-columns:1fr}}@media(max-width:650px){.method-body{grid-template-columns:1fr}.python-example pre{padding:18px}.python-example pre code{font-size:11px}}
.notebook-download{margin:0 20px 80px;padding:clamp(30px,5vw,60px);display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:center;background:#dce8e4;border-top:6px solid var(--teal)}.notebook-download h2{font-size:clamp(30px,4.5vw,50px);margin:8px 0}.notebook-download p,.notebook-download li{font-size:12px;color:var(--muted)}.notebook-download ul{display:grid;grid-template-columns:1fr 1fr;gap:7px 25px;padding-left:20px}.notebook-download>a{display:flex;min-height:180px;flex-direction:column;justify-content:center;background:var(--navy);color:white;text-decoration:none;padding:30px;font-size:18px}.notebook-download>a b{font-size:28px;color:#65d7ce}.notebook-download>a small{font-size:10px;color:#a9bdc1;margin-top:12px}@media(max-width:700px){.notebook-download{grid-template-columns:1fr}.notebook-download ul{grid-template-columns:1fr}}
.sitebar nav{display:flex;align-items:center;gap:22px}.sitebar .notebook-link{color:#79e2d8;font-weight:700}.quick-download{margin:0 20px;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:19px 28px;background:#dce8e4;border-bottom:1px solid var(--line)}.quick-download b,.quick-download span{display:block}.quick-download b{font-size:10px;color:var(--teal);letter-spacing:.12em}.quick-download span{font-size:11px;color:var(--muted)}.quick-download>a{background:var(--orange);color:white;text-decoration:none;padding:12px 18px;font-size:12px;font-weight:700}.quick-download>a strong{margin-left:12px;font-size:18px}@media(max-width:650px){.sitebar nav{gap:12px}.quick-download{align-items:stretch;flex-direction:column}.quick-download>a{text-align:center}}