@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap");
:root{--ink:#142b2b;--green:#0b6755;--teal:#3ca88e;--orange:#f19b4b;--paper:#f3efe6;--white:#fffdf8;--line:#d4cbbb;--muted:#5b6b6b;--dark:#102b25}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans Thai","Segoe UI",sans-serif}a{color:inherit;text-decoration:none}.sitebar{display:flex;justify-content:space-between;padding:17px max(22px,calc((100vw - 1180px)/2));background:var(--white);border-bottom:1px solid var(--line);font-size:13px;font-weight:700}.hero,.section,.architecture,.safety,footer{max-width:1180px;margin:auto}.hero{display:grid;grid-template-columns:1.45fr .55fr;gap:70px;padding:84px 24px 72px}.eyebrow{margin:0 0 16px;color:#8ed8c4;font:700 11px/1.4 ui-monospace,monospace;letter-spacing:.14em}.eyebrow.dark{color:var(--green)}h1,h2{font-family:"Playfair Display","Noto Sans Thai",serif;letter-spacing:-.025em}.hero h1{max-width:820px;margin:0;font-size:clamp(48px,7vw,82px);line-height:1.02}.hero p{max-width:790px;color:var(--muted);font-size:17px;line-height:1.9}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.actions a,.download-panel a{padding:13px 18px;border:1px solid var(--green);border-radius:9px;color:var(--green);font-size:13px;font-weight:700}.actions .primary,.download-panel a{background:var(--green);color:white}.actions a:hover,.download-panel a:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}.hero aside{align-self:end;padding:28px 0 8px 30px;border-left:1px solid var(--line)}.hero aside span,.hero aside small{display:block;color:var(--muted);font-size:12px}.hero aside strong{display:block;margin:15px 0;color:var(--green);font:700 44px/1 ui-monospace,monospace}.concept-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--dark);color:white}.concept-strip div{padding:25px max(20px,calc((100vw - 1180px)/8));border-right:1px solid #36534d}.concept-strip b{color:#77d0ba;font:700 11px ui-monospace,monospace}.concept-strip span,.concept-strip small{display:block}.concept-strip span{margin-top:18px;font-weight:700}.concept-strip small{margin-top:4px;color:#a8c0ba}.section{padding:84px 24px}.section-head{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:end;margin-bottom:34px}.section h2,.architecture h2{margin:0;font-size:clamp(34px,4vw,52px);line-height:1.15}.section-head>p{margin:0;color:var(--muted);line-height:1.8}.sim-grid{display:grid;grid-template-columns:1.45fr .55fr;min-height:390px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--white)}.dag{display:flex;align-items:center;justify-content:center;gap:13px;padding:42px 30px;background-image:radial-gradient(#d7d0c4 1px,transparent 1px);background-size:22px 22px}.task{min-width:112px;padding:16px 13px;border:2px solid #a8b4b0;border-radius:12px;background:var(--white);text-align:center;box-shadow:0 5px 16px #182d2720;transition:.25s}.task i{display:block;width:9px;height:9px;margin:0 auto 9px;border-radius:50%;background:#a8b4b0}.task b,.task span{display:block}.task b{font:700 13px ui-monospace,monospace}.task span{margin-top:4px;color:var(--muted);font-size:10px}.task.queued{border-color:var(--orange)}.task.queued i{background:var(--orange)}.task.running{transform:translateY(-5px);border-color:#35749a;box-shadow:0 7px 22px #35749a38}.task.running i{background:#35749a;animation:pulse .7s infinite alternate}.task.success{border-color:var(--green);background:#e8f4ee}.task.success i{background:var(--green)}@keyframes pulse{to{transform:scale(1.7)}}.arrow,.fork,.join{color:var(--green);font-size:25px;font-weight:700}.fork,.join{display:grid;gap:55px}.parallel{display:grid;gap:18px}.console{display:flex;flex-direction:column;background:#102923;color:#d9e9e3}.console-head{display:flex;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #345048;font:700 11px ui-monospace,monospace}.console-head b{color:#7ad0b9}.console ol{height:310px;margin:0;padding:20px 24px 20px 42px;overflow:auto}.console li{margin-bottom:14px;color:#b8ccc5;font:12px/1.55 ui-monospace,monospace}.sim-controls{display:flex;align-items:center;gap:10px;padding-top:16px}.sim-controls button{padding:11px 15px;border:1px solid var(--green);border-radius:8px;background:var(--white);color:var(--green);font-weight:700;cursor:pointer}.sim-controls button:first-child{background:var(--green);color:white}.sim-controls button:disabled{opacity:.35;cursor:not-allowed}.legend{display:flex;gap:15px;margin-left:auto;color:var(--muted);font-size:11px}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:9px;height:9px;border-radius:50%}.pending{background:#a8b4b0}.running{background:#35749a}.success{background:var(--green)}.install{max-width:none;padding-left:max(24px,calc((100vw - 1132px)/2));padding-right:max(24px,calc((100vw - 1132px)/2));background:#e7e2d7}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.steps article{min-height:220px;padding:22px;border:1px solid var(--line);border-radius:13px;background:var(--white)}.steps article>b,.exercise-grid b{color:var(--orange);font:700 12px ui-monospace,monospace}.steps h3{margin:24px 0 12px;font-size:18px}.steps p{color:var(--muted);font-size:13px;line-height:1.65}.steps code{display:block;padding:10px;border-radius:6px;background:#15312b;color:#d8eee7;font-size:11px;overflow:auto}.download-panel{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:20px 22px;border-radius:13px;background:var(--dark);color:white}.download-panel strong,.download-panel span{display:block}.download-panel span{margin-top:5px;color:#a7c1b9;font-size:12px}.architecture{max-width:none;padding:80px max(24px,calc((100vw - 1132px)/2));background:var(--green);color:white}.architecture>div:first-child{max-width:850px}.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:42px;background:#5a9788}.arch-grid article{padding:26px;background:var(--green)}.arch-grid p{margin:11px 0 0;color:#d1e7e0;font-size:13px;line-height:1.75}.code-section pre{margin:0;padding:28px;border-radius:14px;background:var(--dark);color:#d7ece5;overflow:auto;font:13px/1.75 ui-monospace,monospace}.exercises{padding-top:30px}.exercise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.exercise-grid article{padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--white)}.exercise-grid p{margin:15px 0 0;line-height:1.7}.safety{margin-bottom:80px;padding:28px;border-left:5px solid var(--orange);background:#fff5df}.safety strong{font-size:18px}.safety p{margin:9px 0 0;color:var(--muted);line-height:1.75}footer{display:flex;justify-content:space-between;padding:26px 24px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
@media(max-width:900px){.hero,.section-head,.sim-grid{grid-template-columns:1fr}.hero{gap:36px}.hero aside{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}.console{min-height:260px}.steps{grid-template-columns:repeat(2,1fr)}.arch-grid,.exercise-grid{grid-template-columns:repeat(2,1fr)}.dag{min-height:370px;overflow:auto}.legend{display:none}}
@media(max-width:600px){.hero{padding-top:55px}.hero h1{font-size:46px}.concept-strip{grid-template-columns:repeat(2,1fr)}.dag{justify-content:flex-start;padding:30px 18px}.task{min-width:96px}.steps,.arch-grid,.exercise-grid{grid-template-columns:1fr}.download-panel{align-items:flex-start;gap:18px;flex-direction:column}.download-panel a{width:100%;text-align:center}.sim-controls{flex-wrap:wrap}.sim-controls button{flex:1 1 45%}.section{padding-top:62px;padding-bottom:62px}footer{gap:18px;flex-direction:column}}
.live-credentials{display:flex;align-items:center;gap:9px;width:max-content;margin-top:14px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--white);font-size:12px}.live-credentials span{color:var(--muted);font:700 10px ui-monospace,monospace;letter-spacing:.08em}.live-credentials code{font-weight:700}.live-credentials i{color:#99a5a3;font-style:normal}.panel-actions{display:flex;gap:9px}.panel-actions a{min-width:145px;text-align:center}@media(max-width:600px){.live-credentials{width:100%;flex-wrap:wrap}.panel-actions{width:100%;flex-direction:column}.panel-actions a{width:100%}}