@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600;700&family=Nunito:wght@400;600;700;800&family=Noto+Sans+SC:wght@400;600;700&family=Fira+Code:wght@400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Sarabun','Nunito',sans-serif;line-height:1.7;background:linear-gradient(135deg,#022c22 0%,#0f172a 100%);min-height:100vh;padding:10px;color:#e2e8f0;}
.container{max-width:1180px;margin:0 auto 30px;background:#fff;color:#222;border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,0.45);overflow:hidden;}
header{background:linear-gradient(135deg,#10b981 0%,#06b6d4 50%,#6366f1 100%);color:#fff;padding:46px 30px 38px;text-align:center;position:relative;overflow:hidden;}
header::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.12) 0%,transparent 60%);pointer-events:none;}
header .crumb{font-size:0.85em;opacity:0.9;margin-bottom:8px;position:relative;}
header .crumb a{color:#ecfeff;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,0.4);}
header .crumb a:hover{opacity:0.85;}
header h1{font-size:2em;font-weight:800;text-shadow:2px 3px 6px rgba(0,0,0,0.3);margin-bottom:10px;position:relative;}
header .tagline{font-size:1.02em;opacity:0.95;position:relative;max-width:760px;margin:0 auto;}
header .badges{margin-top:16px;position:relative;}
header .badge{display:inline-block;padding:5px 13px;background:rgba(255,255,255,0.18);border-radius:16px;font-size:0.84em;margin:3px;font-weight:600;backdrop-filter:blur(4px);}

.content{padding:34px;}
.section{margin-bottom:40px;}
.section h2{font-size:1.5em;font-weight:800;color:#0f172a;margin-bottom:14px;padding-bottom:10px;border-bottom:3px solid #10b981;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.section h2 .icon{font-size:1.2em;}
.section h3{font-size:1.15em;color:#334155;margin:22px 0 10px;font-weight:700;}
.section p{margin:10px 0;color:#334155;}
.intro-lede{font-size:1.02em;color:#475569;}

.trilingual-box{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:18px 0;}
.lang-thai{background:#fff7ed;border-left:5px solid #f97316;border-radius:12px;padding:16px;}
.lang-thai h3{color:#9a3412;margin-bottom:6px;font-size:0.9em;font-weight:700;}
.lang-thai p{color:#7c2d12;margin:6px 0;font-size:0.95em;}
.lang-thai ul{margin:6px 0 6px 18px;color:#7c2d12;font-size:0.95em;}
.lang-english{background:#ecfeff;border-left:5px solid #06b6d4;border-radius:12px;padding:16px;}
.lang-english h3{color:#155e75;margin-bottom:6px;font-size:0.9em;font-weight:700;}
.lang-english p{color:#164e63;margin:6px 0;font-size:0.95em;}
.lang-english ul{margin:6px 0 6px 18px;color:#164e63;font-size:0.95em;}
.lang-chinese{background:#fef2f2;border-left:5px solid #dc2626;border-radius:12px;padding:16px;}
.lang-chinese h3{color:#991b1b;margin-bottom:6px;font-size:0.9em;font-weight:700;}
.lang-chinese p{color:#991b1b;margin:6px 0;font-family:'Noto Sans SC','Sarabun',sans-serif;font-size:0.95em;}
.lang-chinese ul{margin:6px 0 6px 18px;color:#991b1b;font-family:'Noto Sans SC','Sarabun',sans-serif;font-size:0.95em;}

body.hide-en .lang-english{display:none;}
body.hide-th .lang-thai{display:none;}
body.hide-zh .lang-chinese{display:none;}
body.hide-en .trilingual-box{grid-template-columns:1fr 1fr;}
body.hide-th .trilingual-box{grid-template-columns:1fr 1fr;}
body.hide-zh .trilingual-box{grid-template-columns:1fr 1fr;}
body.hide-en.hide-th .trilingual-box{grid-template-columns:1fr;}
body.hide-en.hide-zh .trilingual-box{grid-template-columns:1fr;}
body.hide-th.hide-zh .trilingual-box{grid-template-columns:1fr;}
body.hide-en .lang-english-inline{display:none;}
body.hide-th .lang-thai-inline{display:none;}
body.hide-zh .lang-chinese-inline{display:none;}
.lang-chinese-inline{font-family:'Noto Sans SC','Sarabun',sans-serif;}

.lang-toggle-bar{position:sticky;top:0;z-index:1000;background:#0f172a;padding:10px 16px;display:flex;gap:10px;justify-content:center;align-items:center;border-bottom:1px solid #334155;flex-wrap:wrap;}
.lang-toggle-bar .lang-toggle-label{color:#94a3b8;font-size:0.85em;margin-right:8px;font-weight:600;}
.lang-toggle{padding:6px 16px;border-radius:20px;background:#1e293b;color:#94a3b8;border:1px solid #475569;cursor:pointer;font-weight:700;font-size:0.9em;transition:all 0.2s;font-family:inherit;}
.lang-toggle:hover{transform:translateY(-1px);}
.lang-toggle.active{background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(16,185,129,0.4);}
.lang-toggle.active[data-lang="th"]{background:linear-gradient(135deg,#f97316,#ea580c);}
.lang-toggle.active[data-lang="zh"]{background:linear-gradient(135deg,#dc2626,#991b1b);}

.objectives-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:18px 0;}
.obj-card{background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:16px;transition:all 0.2s;}
.obj-card:hover{border-color:#10b981;transform:translateY(-2px);}
.obj-card .obj-num{display:inline-flex;width:28px;height:28px;background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;border-radius:50%;align-items:center;justify-content:center;font-weight:800;font-size:0.9em;margin-right:8px;}
.obj-card h4{display:inline;font-size:0.98em;color:#0f172a;font-weight:800;}
.obj-card p{margin-top:8px;color:#475569;font-size:0.9em;line-height:1.55;}

.diagram-wrap{background:#0f172a;border-radius:14px;padding:24px;margin:18px 0;overflow-x:auto;}
.diagram-wrap svg{display:block;margin:0 auto;max-width:100%;height:auto;}
.diagram-caption{text-align:center;font-size:0.85em;color:#94a3b8;margin-top:12px;font-style:italic;}
.diagram-caption span{display:block;margin-top:2px;}

.lab-step{background:#fff;border:1px solid #e2e8f0;border-left:6px solid #10b981;border-radius:12px;padding:18px 22px;margin:14px 0;}
.lab-step .lab-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.lab-num{display:inline-flex;width:36px;height:36px;background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;border-radius:10px;align-items:center;justify-content:center;font-weight:800;font-size:1.05em;flex-shrink:0;}
.lab-step h4{font-size:1.05em;color:#0f172a;font-weight:800;margin:0;}

.code-block{background:#0f172a;color:#e2e8f0;padding:16px 18px;border-radius:10px;font-family:'Fira Code',monospace;font-size:0.84em;overflow-x:auto;margin:12px 0;line-height:1.6;white-space:pre;}
.code-block .comment{color:#64748b;}
.code-block .keyword{color:#c084fc;}
.code-block .string{color:#86efac;}
.code-block .builtin{color:#f472b6;}
.code-block .function{color:#60a5fa;}
.code-block .number{color:#fbbf24;}
.code-block .prompt{color:#34d399;}
.code-inline{background:#1e293b;color:#5eead4;padding:1px 6px;border-radius:4px;font-family:'Fira Code',monospace;font-size:0.86em;}

/* code block with copy button */
.code-wrap{position:relative;}
.code-wrap .copy-btn{position:absolute;top:8px;right:8px;background:#1e293b;color:#5eead4;border:1px solid #334155;border-radius:6px;font-family:inherit;font-size:0.78em;padding:4px 10px;cursor:pointer;opacity:0.6;transition:all 0.2s;}
.code-wrap:hover .copy-btn{opacity:1;}
.code-wrap .copy-btn:hover{background:#10b981;color:#fff;border-color:#10b981;}
.code-wrap .copy-btn.copied{background:#059669;color:#fff;border-color:#059669;}

/* progress dots for multi-step labs */
.step-progress{display:flex;justify-content:center;gap:8px;margin:18px 0;flex-wrap:wrap;}
.step-dot{width:32px;height:32px;border-radius:50%;background:#e2e8f0;color:#64748b;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.85em;cursor:pointer;transition:all 0.25s;border:2px solid transparent;}
.step-dot:hover{transform:scale(1.1);}
.step-dot.active{background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;border-color:#fff;box-shadow:0 4px 12px rgba(16,185,129,0.35);}
.step-dot.done{background:#059669;color:#fff;}

/* interactive state machine (Week 4) */
.state-machine{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0;padding:22px;background:#f0fdfa;border-radius:14px;}
.state-node{padding:10px 18px;background:#fff;border:2px solid #94a3b8;border-radius:24px;font-weight:700;color:#475569;cursor:pointer;transition:all 0.25s;font-size:0.95em;}
.state-node:hover{border-color:#10b981;}
.state-node.active{background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(16,185,129,0.35);}
.state-arrow{color:#10b981;font-size:1.4em;font-weight:700;}
.state-arrow.invalid{color:#dc2626;text-decoration:line-through;}
.state-info{margin-top:14px;padding:12px 16px;background:#fff;border-radius:10px;border-left:4px solid #10b981;font-size:0.92em;color:#0f766e;min-height:46px;}
.state-info.invalid{border-left-color:#dc2626;color:#991b1b;background:#fef2f2;}

/* timezone interactive clocks (Week 3) */
.tz-clocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0;}
.tz-clock{background:#fff;border:2px solid #e2e8f0;border-radius:14px;padding:18px;text-align:center;transition:all 0.2s;}
.tz-clock:hover{border-color:#10b981;transform:translateY(-2px);}
.tz-clock .tz-name{font-size:0.85em;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px;}
.tz-clock .tz-time{font-family:'Fira Code',monospace;font-size:1.45em;color:#0f172a;font-weight:700;margin-bottom:2px;}
.tz-clock .tz-offset{font-size:0.8em;color:#94a3b8;font-family:'Fira Code',monospace;}
.tz-controls{display:flex;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap;}
.tz-controls input{padding:6px 10px;border:2px solid #e2e8f0;border-radius:8px;font-family:'Fira Code',monospace;font-size:0.92em;}
.tz-controls input:focus{outline:none;border-color:#10b981;}
.tz-controls button{padding:6px 14px;background:#10b981;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-family:inherit;font-size:0.9em;}
.tz-controls button:hover{background:#059669;}

/* 3-agent pipeline simulator (Week 5) */
.pipeline-sim{background:#f8fafc;border-radius:14px;padding:22px;margin:18px 0;}
.pipeline-sim .pipe-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;}
.pipe-agent{background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:12px 18px;min-width:130px;text-align:center;transition:all 0.3s;}
.pipe-agent.active{border-color:#10b981;background:#f0fdfa;box-shadow:0 4px 14px rgba(16,185,129,0.25);}
.pipe-agent.halt{border-color:#dc2626;background:#fef2f2;}
.pipe-agent .pipe-icon{font-size:1.8em;}
.pipe-agent .pipe-name{font-weight:800;color:#0f172a;font-size:0.92em;margin-top:4px;}
.pipe-agent .pipe-status{font-size:0.75em;color:#64748b;margin-top:2px;font-family:'Fira Code',monospace;}
.pipe-agent.halt .pipe-status{color:#991b1b;font-weight:700;}
.pipe-arrow{color:#10b981;font-size:1.5em;font-weight:700;}
.pipe-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
.pipe-controls button{padding:8px 18px;background:#10b981;color:#fff;border:none;border-radius:10px;font-weight:700;cursor:pointer;font-family:inherit;font-size:0.92em;transition:all 0.2s;}
.pipe-controls button:hover{transform:translateY(-1px);background:#059669;}
.pipe-controls button.danger{background:#dc2626;}
.pipe-controls button.danger:hover{background:#991b1b;}
.pipe-output{margin-top:14px;background:#0f172a;color:#e2e8f0;padding:14px 16px;border-radius:10px;font-family:'Fira Code',monospace;font-size:0.85em;min-height:60px;white-space:pre-wrap;}
.pipe-output .ok{color:#5eead4;}
.pipe-output .warn{color:#fbbf24;}
.pipe-output .err{color:#fca5a5;}

/* capstone flow (Week 6) */
.capstone-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:18px 0;}
.cap-step{background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:all 0.25s;position:relative;}
.cap-step:hover{border-color:#10b981;transform:translateY(-2px);}
.cap-step.active{border-color:#10b981;background:#f0fdfa;box-shadow:0 4px 14px rgba(16,185,129,0.3);}
.cap-step .cap-icon{font-size:1.8em;}
.cap-step .cap-label{font-size:0.85em;font-weight:700;color:#0f172a;margin-top:4px;}
.cap-step .cap-tool{font-family:'Fira Code',monospace;font-size:0.74em;color:#64748b;margin-top:2px;}
.cap-detail{margin-top:14px;padding:14px 18px;background:#f0fdfa;border-left:4px solid #10b981;border-radius:10px;color:#064e3b;min-height:50px;}
.cap-detail code{background:#1e293b;color:#5eead4;padding:1px 6px;border-radius:4px;font-family:'Fira Code',monospace;font-size:0.86em;}

/* OAuth interactive walkthrough (Week 1) */
.oauth-flow{background:#f8fafc;border-radius:14px;padding:22px;margin:18px 0;}
.oauth-actor{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px;padding:12px;border-radius:10px;background:#fff;border:2px solid #e2e8f0;transition:all 0.3s;}
.oauth-actor.lit{border-color:#10b981;background:#f0fdfa;}
.oauth-actor .oauth-icon{font-size:1.7em;flex-shrink:0;}
.oauth-actor .oauth-name{font-weight:800;color:#0f172a;min-width:100px;}
.oauth-actor .oauth-line{flex:1;color:#475569;font-size:0.95em;font-family:'Fira Code',monospace;}
.oauth-controls{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap;}
.oauth-controls button{padding:8px 16px;background:#10b981;color:#fff;border:none;border-radius:10px;font-weight:700;cursor:pointer;font-family:inherit;font-size:0.92em;}
.oauth-controls button:hover{background:#059669;}
.oauth-controls button:disabled{background:#cbd5e1;cursor:not-allowed;}

/* email triage simulator (Week 2) */
.inbox-sim{background:#f8fafc;border-radius:14px;padding:18px;margin:18px 0;}
.inbox-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:10px;}
.inbox-controls button{padding:8px 14px;background:#10b981;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-family:inherit;font-size:0.9em;}
.inbox-controls button:hover{background:#059669;}
.inbox-row{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:10px 14px;margin:6px 0;display:flex;align-items:center;gap:10px;font-size:0.92em;}
.inbox-row .ix-tag{padding:2px 8px;border-radius:10px;font-size:0.74em;font-weight:700;}
.inbox-row .ix-tag.handle{background:#d1fae5;color:#065f46;}
.inbox-row .ix-tag.skip{background:#fee2e2;color:#991b1b;}
.inbox-row .ix-subj{flex:1;color:#334155;}
.inbox-row .ix-action{font-family:'Fira Code',monospace;font-size:0.82em;color:#64748b;}
.inbox-row.drafted{background:#f0fdfa;border-color:#10b981;}
.inbox-row.drafted .ix-action{color:#0f766e;font-weight:700;}


.tip-box{background:#ecfdf5;border-left:5px solid #10b981;border-radius:12px;padding:16px;margin:14px 0;}
.tip-box h4{color:#065f46;margin-bottom:6px;font-weight:700;}
.tip-box p{color:#065f46;font-size:0.95em;}
.warning-box{background:#fef3c7;border-left:5px solid #f59e0b;border-radius:12px;padding:16px;margin:14px 0;}
.warning-box h4{color:#92400e;margin-bottom:6px;font-weight:700;}
.warning-box p{color:#92400e;font-size:0.95em;}
.warning-box code{background:#fde68a;color:#78350f;padding:1px 5px;border-radius:3px;font-family:'Fira Code',monospace;font-size:0.88em;}

.gotchas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:18px 0;}
.gotcha-card{background:#fff7ed;border-left:5px solid #f97316;border-radius:12px;padding:16px;}
.gotcha-card h4{color:#9a3412;font-size:0.98em;margin-bottom:6px;font-weight:800;}
.gotcha-card p{color:#7c2d12;font-size:0.92em;}

.assess-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0;}
.assess-card{background:#f0fdfa;border:2px solid #10b981;border-radius:12px;padding:16px;}
.assess-card h4{color:#064e3b;font-size:1em;font-weight:800;margin-bottom:8px;}
.assess-card p{color:#064e3b;font-size:0.93em;}

.nav-footer{display:flex;gap:14px;justify-content:space-between;padding:24px;flex-wrap:wrap;background:#f8fafc;border-top:1px solid #e2e8f0;}
.nav-btn{background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff;padding:12px 22px;border:none;border-radius:24px;font-size:0.95em;cursor:pointer;text-decoration:none;font-weight:700;transition:all 0.3s;display:inline-block;}
.nav-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,185,129,0.35);}
.nav-btn.secondary{background:#fff;color:#0f172a;border:2px solid #e2e8f0;}
.nav-btn.secondary:hover{border-color:#10b981;color:#0f766e;}
.nav-btn.disabled{background:#e2e8f0;color:#94a3b8;cursor:not-allowed;pointer-events:none;}
footer{background:#0f172a;color:rgba(255,255,255,0.75);text-align:center;padding:22px;font-size:0.86em;}
footer a{color:#5eead4;text-decoration:none;}

@media (max-width:720px){
  header h1{font-size:1.55em;}
  .content{padding:22px 16px;}
  .trilingual-box{grid-template-columns:1fr;}
  .assess-grid{grid-template-columns:1fr;}
  .nav-footer{flex-direction:column;}
}