@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;600&display=swap');
:root{--navy:#071a2b;--navy2:#0b2a3d;--ink:#183346;--muted:#607582;--paper:#eef2f1;--card:#f8faf8;--line:#cbd8d5;--teal:#0b7a75;--aqua:#8fe0d5;--orange:#dd8a35;--shadow:0 18px 45px #0b2a3d12}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 'Noto Sans Thai',sans-serif}.top{position:sticky;top:0;z-index:50;height:72px;padding:0 max(24px,5vw);display:flex;align-items:center;justify-content:space-between;background:#071a2bf2;color:#fff;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff18}.brand{display:flex;gap:12px;align-items:center;color:white;text-decoration:none}.brand b{color:#72c8ff;font-size:1.3rem}.brand span{font-weight:700}.top nav{display:flex;gap:24px}.top nav a{color:#cad8e1;text-decoration:none;font-size:.88rem}.top nav a:hover{color:white}main{overflow:hidden}.hero{min-height:620px;padding:100px max(24px,8vw);display:grid;grid-template-columns:1.4fr .6fr;gap:7vw;align-items:center;background:radial-gradient(circle at 70% 20%,#0f51624d,transparent 35%),linear-gradient(135deg,#061421,#0a2437);color:white}.eyebrow{color:var(--orange);font-size:.74rem;font-weight:800;letter-spacing:.14em}.hero h1{font-size:clamp(3.4rem,8vw,7.7rem);line-height:.93;letter-spacing:-.06em;margin:.2em 0}.lead{max-width:790px;font-size:1.18rem;color:#c8d9e2}.hero aside{border:1px solid #ffffff24;border-radius:4px;padding:32px;background:#ffffff09}.hero aside strong{font:600 1.35rem/1.45 'Source Code Pro',monospace;color:var(--aqua)}.hero aside p{color:#bdd0da}.status{display:flex;gap:16px;margin-top:30px;font:600 .78rem 'Source Code Pro';color:#a7beca}.status span{border-left:3px solid var(--teal);padding-left:10px}.concept{display:grid;grid-template-columns:1fr 80px 1fr;max-width:1200px;margin:-45px auto 80px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}.concept>div{padding:35px}.concept .inside{background:#0b2a3d;color:white}.step{font-size:.72rem;letter-spacing:.15em;font-weight:800;color:var(--orange)}.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0}.flow b{border:1px solid var(--line);padding:8px 12px;background:#fff;color:var(--ink)}.inside .flow b{background:#123c50;color:white;border-color:#396073}.flow i{font-size:.78rem;color:var(--muted)}.versus{display:grid;place-items:center;font-weight:800;color:var(--orange);border-left:1px solid var(--line);border-right:1px solid var(--line)}.section{max-width:1200px;margin:0 auto 85px;padding:0 24px}.heading{max-width:800px;margin-bottom:28px}.heading h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.15;margin:.25em 0}.heading>p:last-child{color:var(--muted)}.dataset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.dataset-card{background:var(--card);border:1px solid var(--line);padding:24px;box-shadow:var(--shadow);position:relative}.dataset-card.active{border:2px solid var(--teal)}.dataset-card h3{font-size:1.35rem;margin:.4em 0}.dataset-card .meta{display:flex;gap:16px;color:var(--muted);font-size:.83rem}.tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}.tags span{background:#e1ece9;padding:3px 8px;font-size:.74rem}.dataset-card button,.control-panel button,.sql-panel button,.prediction button,.size-buttons button{border:0;background:var(--teal);color:white;padding:11px 16px;font:700 .85rem 'Noto Sans Thai';cursor:pointer}.sample-panel{margin-top:18px;background:var(--card);border:1px solid var(--line);padding:20px;overflow:auto}.sample-panel table{border-collapse:collapse;width:100%;font-size:.8rem}.sample-panel th,.sample-panel td{padding:8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.sample-panel th{font-size:.72rem;color:var(--teal)}.builder-grid{display:grid;grid-template-columns:390px 1fr;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}.control-panel{padding:28px;display:grid;gap:18px;border-right:1px solid var(--line)}label,.label,legend{font-size:.77rem;font-weight:800;color:var(--muted);letter-spacing:.04em}select,input[type=number]{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #aabdb8;background:white;font:inherit;color:var(--ink)}fieldset{border:1px solid var(--line);padding:14px}.feature{display:block;margin:7px 0;font-weight:500;color:var(--ink);letter-spacing:0}.feature input{width:auto;margin-right:8px}.check{color:var(--ink)}.sql-panel{background:var(--navy);color:white;padding:28px;min-width:0}.panel-title{display:flex;justify-content:space-between;color:var(--aqua);font:600 .78rem 'Source Code Pro'}.sql-panel pre,.prediction pre,.compare pre{background:#03111d;padding:20px;border-left:3px solid var(--orange);overflow:auto;min-height:220px;color:#c7ede8;font:13px/1.65 'Source Code Pro',monospace}.sql-panel p{color:#9fb6c1}.sql-panel button{margin-right:8px;background:var(--orange);color:#102838}.sql-panel .ghost{background:transparent;color:white;border:1px solid #ffffff4d}.sql-panel button:disabled{opacity:.45;cursor:not-allowed}#message{margin-top:18px;color:#b9d0da}.empty{border:1px dashed #9db2ad;padding:42px;text-align:center;color:var(--muted)}.result-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.result-summary div,.coefficient{background:var(--card);border:1px solid var(--line);padding:16px}.result-summary b{display:block;font-size:1.35rem;color:var(--teal)}.result-summary span{font-size:.75rem;color:var(--muted)}.coef-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.coefficient b{font:600 .8rem 'Source Code Pro';display:block}.bar{height:7px;background:#dce6e3;margin-top:10px}.bar i{display:block;height:100%;background:var(--teal)}.prediction{background:#dce9e7;max-width:none;padding:70px max(24px,calc((100vw - 1152px)/2))}.prediction-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:30px}.prediction form{display:grid;gap:12px}.prediction pre{min-height:150px}.prediction-result{background:white;border:1px solid var(--line);padding:22px;font-size:1.4rem;font-weight:800}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.three article{background:var(--card);border-top:4px solid var(--teal);padding:22px}.note{border-left:4px solid var(--orange);padding:15px 20px;background:#f4e8d8}.size-buttons{display:flex;gap:10px;flex-wrap:wrap}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.metrics div{background:var(--navy2);color:white;padding:22px}.metrics b{display:block;font:700 1.35rem 'Source Code Pro';color:var(--aqua)}.metrics span{font-size:.72rem;color:#adc1ca}.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}.compare>div{border:1px solid var(--line);padding:25px;background:var(--card)}.compare pre{min-height:auto}.compare>div:last-child{border-top:5px solid var(--teal)}footer{background:var(--navy);color:#9fb6c1;padding:45px max(24px,8vw);display:flex;justify-content:space-between;font-size:.8rem}@media(max-width:850px){.top nav a:not(:last-child){display:none}.hero{grid-template-columns:1fr;padding-top:75px;min-height:auto}.hero aside{margin-bottom:40px}.concept{margin:0 20px 65px;grid-template-columns:1fr}.versus{padding:10px;border:0}.dataset-grid,.three{grid-template-columns:1fr}.builder-grid,.prediction-grid,.compare{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid var(--line)}.result-summary,.metrics{grid-template-columns:1fr 1fr}.section{margin-bottom:60px}.hero h1{font-size:clamp(3rem,15vw,5rem)}footer{display:block}.sql-panel pre{font-size:11px}}@media(max-width:470px){.result-summary,.metrics{grid-template-columns:1fr}.concept{margin-left:12px;margin-right:12px}.section{padding:0 14px}.prediction{padding-left:14px;padding-right:14px}}