@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/manrope-latin-wght-normal-DHIcAJRg.woff2) format("woff2")}@font-face{font-family:IBM Plex Sans Thai;font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/ibm-plex-sans-thai-thai-400-normal-Bt1rR4gi.woff2) format("woff2")}@font-face{font-family:IBM Plex Sans Thai;font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/ibm-plex-sans-thai-thai-600-normal-DvfsyWAn.woff2) format("woff2")}:root{font-family:Manrope,IBM Plex Sans Thai,system-ui,sans-serif;font-synthesis:none;font-weight:500;color:#c0c2c5;background:#1b1c1e;color-scheme:dark;--ink: #c0c2c5;--bright: #eceef1;--muted: #787b80;--line: #303234;--surface: #202124;--glass: rgba(27, 28, 31, .9);--brand: #2e6fd3;--brand-soft: #6d9ee6;--running: #0bbdc4;--warn: #e0a13a;--danger: #e5534b;--rail: 400px;--gap: 16px}*{box-sizing:border-box}body{margin:0;background:#1b1c1e}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #5986c9;outline-offset:3px}svg{width:18px;height:18px;flex-shrink:0}.kicker{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--brand-soft)}.stage-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;z-index:0}.stage-canvas.fixed{position:fixed;width:100vw;height:100vh;pointer-events:none}.home{--edge: 28px;--col-gap: 20px;position:relative;min-height:100svh;padding:36px var(--edge) 24px;display:flex;flex-direction:column;gap:26px}.home>:not(.stage-canvas){position:relative;z-index:1}.home-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.home-head h1{margin:8px 0 0;font-size:clamp(26px,3vw,38px);font-weight:800;color:var(--bright);letter-spacing:-.01em}.home-head p{margin:0;max-width:440px;font-size:14px;line-height:1.7;color:var(--muted);text-align:right}.timeline{flex:1;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--col-gap);width:100%}.era{display:grid;grid-template-rows:minmax(160px,.85fr) 58px minmax(200px,1fr);gap:14px;cursor:pointer}.era-card{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:border-color .2s,box-shadow .2s}.era-view{position:absolute;top:0;right:0;bottom:0;left:0}.era-caption{position:absolute;left:12px;bottom:10px;font-size:12px;font-weight:700;color:var(--ink);background:#141517cc;padding:4px 9px;border-radius:6px;pointer-events:none}.era:hover .era-card,.era:focus-visible .era-card{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}.era{--track: color-mix(in srgb, var(--brand) calc(var(--i) * 30%), #3a3d42)}.era-node{position:relative;display:flex;align-items:center;gap:12px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:#1f2023;transition:border-color .2s,background .2s}.era-node:before{content:"";position:absolute;top:50%;right:100%;width:calc(var(--col-gap) + 1px);height:2px;translate:0 -50%;background:var(--track)}.era:first-of-type .era-node:before{width:calc(var(--edge) + 1px);background:linear-gradient(90deg,transparent,var(--track))}.era:last-of-type .era-node:after{content:"";position:absolute;top:50%;left:100%;width:var(--edge);height:2px;translate:0 -50%;background:linear-gradient(90deg,var(--brand),transparent)}.era:hover .era-node,.era:focus-visible .era-node{border-color:var(--brand-soft)}.era:last-of-type .era-node{border-color:var(--brand);background:linear-gradient(90deg,#2e6fd329,#1f2023 70%)}.era-dot{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--track);background:#1b1c1e}.era:last-of-type .era-dot{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 5px #2e6fd338}.era-label{display:grid;min-width:0;line-height:1.25}.era-label b{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-soft)}.era-label strong{font-size:14px;color:var(--bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.era-kwpt{margin-left:auto;display:flex;align-items:baseline;gap:4px;font-size:20px;font-weight:800;color:var(--bright);font-variant-numeric:tabular-nums;white-space:nowrap}.era-kwpt small{font-size:10px;color:var(--muted);font-weight:700}.home-hint{margin:0;text-align:center;font-size:12px;color:var(--muted)}.gen{position:relative}.gen-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#1b1c1e}.stage-car,.stage-plant{position:absolute;left:calc(var(--rail) + var(--gap));right:var(--gap);border:1px solid var(--line);border-radius:8px;overflow:hidden}.stage-car{top:68px;height:calc((100% - 68px - 3 * var(--gap)) * .34)}.stage-plant{top:calc(68px + (100% - 68px - 3 * var(--gap)) * .34 + var(--gap));bottom:var(--gap)}.band-label{position:absolute;left:14px;top:12px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--ink);background:#141517cc;padding:5px 10px;border-radius:6px}.gen-bar{position:absolute;top:0;left:0;right:0;height:68px;display:flex;align-items:center;gap:14px;padding:0 var(--gap);z-index:3;background:#18191beb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back{display:grid;place-items:center;width:40px;height:40px;border-radius:6px;border:1px solid var(--line);background:var(--surface)}.back:hover{border-color:var(--brand)}.gen-title{display:grid;line-height:1.2}.gen-title b{font-size:11px;letter-spacing:.12em;color:var(--brand-soft)}.gen-title strong{font-size:17px;color:var(--bright)}.gen-dots{display:flex;gap:6px;margin:0 0 0 auto;padding:0;list-style:none}.gen-dots button{display:block;width:18px;height:4px;padding:0;border:0;border-radius:2px;background:var(--line);cursor:pointer;transition:background .3s;box-shadow:0 0 0 8px transparent}.gen-dots li.done button{background:var(--brand)}.gen-dots button:hover{background:var(--brand-soft)}.hud{position:absolute;z-index:3;right:calc(var(--gap) + 14px);top:calc(68px + (100% - 68px - 3 * var(--gap)) * .34 + var(--gap) + 12px);display:grid;justify-items:end;gap:6px;pointer-events:none}.hud-kwpt{display:flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:7px;background:#141517d9;border:1px solid var(--line)}.hud-kwpt strong{font-size:34px;font-weight:800;color:var(--bright);font-variant-numeric:tabular-nums;min-width:3.4ch;text-align:right}.hud-kwpt small{font-size:12px;color:var(--muted);font-weight:700}.hud-time,.hud-delta,.hud-role{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 10px;border-radius:6px;background:#141517d9;border:1px solid var(--line)}.hud-time{font-variant-numeric:tabular-nums;color:var(--bright)}.hud-delta{color:#7fe0b0;border-color:#2b5a45}.hud-role svg{width:14px;height:14px;color:var(--brand-soft)}.hud [hidden]{display:none}.gen-steps{position:relative;z-index:2;margin:-100svh 0 0;padding:0;list-style:none;pointer-events:none}.step{min-height:100svh;display:flex;align-items:center;padding:68px var(--gap) 0}html:has(.gen:not(.overlay)){scroll-snap-type:y mandatory}.step,.gen-end{scroll-snap-align:start;scroll-snap-stop:always}.step-card{pointer-events:auto;width:calc(var(--rail) - var(--gap));padding:22px 22px 20px;border-radius:8px;background:var(--glass);border:1px solid var(--line);opacity:.35;transform:translateY(12px);transition:opacity .45s,transform .45s,border-color .45s}.step.active .step-card{opacity:1;transform:none;border-color:#3a4a66}.step-meta{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--brand-soft);font-variant-numeric:tabular-nums}.step-card h2{margin:8px 0;font-size:21px;line-height:1.35;color:var(--bright)}.step-card p{margin:0;font-size:14px;line-height:1.75;color:var(--ink)}.step-car{margin-top:14px!important;padding-top:12px;border-top:1px solid var(--line);color:var(--muted)!important;font-size:13px!important}.step-car span{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--warn);text-transform:uppercase;margin-bottom:2px}.gen-end{position:relative;z-index:2;min-height:100svh;display:grid;place-items:center;padding:40px var(--gap);background:linear-gradient(to bottom,#1b1c1e00,#1b1c1ee6 38%,#1b1c1ef0)}.end-card{width:min(560px,100%);text-align:center;display:grid;gap:10px}.end-card h2{margin:0;font-size:44px;font-weight:800;color:var(--bright);font-variant-numeric:tabular-nums}.end-card p{margin:0;color:var(--muted);line-height:1.7}.end-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}.end-actions a{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:6px;font-weight:700;font-size:14px}.end-actions .primary{background:var(--brand);color:#fff}.end-actions .primary:hover{background:#3a7ce0}.end-actions .secondary{border:1px solid var(--line);background:var(--surface)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;opacity:0;pointer-events:none;overflow:hidden;transition:opacity .32s ease}.home.overlay{overflow-y:auto}.overlay.shown{opacity:1}.flying{position:fixed!important;z-index:30;margin:0;right:auto!important;bottom:auto!important;transition:left .75s cubic-bezier(.65,0,.35,1),top .75s cubic-bezier(.65,0,.35,1),width .75s cubic-bezier(.65,0,.35,1),height .75s cubic-bezier(.65,0,.35,1)}.home.leaving .home-head,.home.leaving .home-hint,.home.leaving .era:not(.chosen),.home.leaving .era.chosen .era-node,.home.leaving .era-caption,.gen.leaving .gen-bar,.gen.leaving .hud,.gen.leaving .gen-steps,.gen.leaving .gen-end,.gen.leaving .band-label,.gen.leaving .stage-pins,.gen.leaving .panel{opacity:0!important;transition:opacity .3s ease}.home.leaving .era.chosen .era-card{border-color:var(--line);box-shadow:none}.home,.gen{transition:opacity .26s ease}.fading{opacity:0}.stage-pins{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:1}.pin{position:absolute;left:0;top:0;translate:-50% calc(-100% - 6px);white-space:nowrap;font-size:12px;font-weight:700;color:var(--bright);background:#141517e6;border:1px solid var(--line);border-radius:6px;padding:5px 10px;display:inline-flex;align-items:center;gap:6px;opacity:0;transition:opacity .35s}.pin.show{opacity:1}.pin.value{font-variant-numeric:tabular-nums;color:var(--running)}.pin.call{border-color:var(--warn);color:#ffd79a}.pin.alarm{border-color:var(--danger);color:#ffb3ad}.pin.ai{border-color:var(--brand);color:#cfe0fb;background:#16243ceb}.pin.good{border-color:#2b5a45;color:#7fe0b0}.panel{position:absolute;z-index:2;width:min(300px,46%);padding:14px;border-radius:7px;background:var(--glass);border:1px solid var(--line);font-size:12px;line-height:1.6;opacity:0;translate:0 8px;transition:opacity .4s,translate .4s;pointer-events:none}.panel.show{opacity:1;translate:0 0}.panel.tl{left:14px;top:48px}.panel.tr{right:14px;top:48px}.panel.bl{left:14px;bottom:14px}.panel.br{right:14px;bottom:14px}.panel h3{margin:0 0 6px;font-size:11px;letter-spacing:.1em;color:var(--brand-soft)}.panel.paper{background:#e9e4d6;color:#3a3630;border-color:#c9c2ae;font-family:IBM Plex Sans Thai,monospace}.panel.paper h3{color:#7a6a4a}.chat{display:grid;gap:8px}.msg{padding:8px 11px;border-radius:6px;max-width:92%;font-size:12px;line-height:1.55}.msg.user{justify-self:end;background:#2a2c30;color:var(--bright)}.msg.ai{justify-self:start;background:#2e6fd32e;border:1px solid rgba(46,111,211,.5);color:#dbe7fb}@media(max-width:780px){:root{--rail: 0px;--gap: 10px}.home{--edge: 14px;padding:24px var(--edge) 20px;gap:20px}.home-head{display:block}.home-head h1{font-size:26px}.home-head p{margin-top:8px;font-size:13px;text-align:left}.timeline{grid-template-columns:1fr;row-gap:22px}.era{grid-template-columns:1fr 1fr;grid-template-rows:52px 150px;grid-template-areas:"node node" "car plant";gap:8px}.car-card{grid-area:car}.plant-card{grid-area:plant}.era-node{grid-area:node;padding:0 14px}.era-node:before{top:auto;bottom:100%;right:auto;left:21px;width:2px;height:23px;translate:none}.era:first-of-type .era-node:before,.era:last-of-type .era-node:after{display:none}.era-kwpt{font-size:18px}.era-caption{font-size:10px;left:8px;bottom:7px}.gen-bar{height:56px}.gen-title strong{font-size:14px}.gen-dots button{width:10px}.gen{--car-h: calc((100svh - 56px)/5) ;--text-h: calc((100svh - 56px)*.33) }.stage-car{top:56px;height:var(--car-h)}.stage-plant{top:calc(56px + var(--car-h) + var(--gap));bottom:calc(var(--text-h) + var(--gap))}.band-label{font-size:9px;padding:3px 7px;top:8px;left:8px}.hud{top:calc(56px + var(--car-h) + var(--gap) + 7px);right:calc(var(--gap) + 7px);grid-auto-flow:column;align-items:center;gap:4px}.hud-kwpt{padding:3px 8px;border-radius:6px}.hud-kwpt strong{font-size:17px;min-width:0}.hud-kwpt small{font-size:9px}.hud-time,.hud-delta{font-size:10px;padding:3px 6px}.hud-role{display:none}.step{align-items:flex-end;padding:0 var(--gap) var(--gap)}.step-card{width:100%;height:var(--text-h);overflow-y:auto;padding:12px 14px;background:#1f2023}.step-card h2{font-size:16px;margin:4px 0 5px}.step-card p{font-size:12.5px;line-height:1.6}.step-car{margin-top:8px!important;padding-top:8px;font-size:11.5px!important}.panel{width:min(210px,54%);font-size:11px;padding:11px}.panel.tl,.panel.tr{top:34px}.panel.bl,.panel.br{bottom:8px}.stage-car .band-label{display:none}.stage-car .stage-pins{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;padding:8px}.stage-car .pin{position:static;transform:none!important;translate:none;font-size:10.5px;padding:3px 8px}.stage-car .pin:not(.show){display:none}}@media(prefers-reduced-motion:reduce){.step-card,.pin,.panel{transition:none}}