:root{--paper:#fbfaf7;--ink:#1b2a4a;--ink2:#4b5563;--line:#e2e4ea;--hair:#eceae4;--or:#f7941d;--or2:#e07a0d;--or-head:#d4700c;--card:#fff;--or-t:#b45309;--bl:#2f6bff;--bl-t:#1f4fd1;--ok:#16a34a;--ok-t:#15803d;--wn:#e3a21a;--wn-t:#8a5a00;--cr:#e4383a;--cr-t:#c0262d;--gx:clamp(16px,4vw,56px);--ease:cubic-bezier(.16,1,.3,1);--disp:var(--font-ui);--mono:var(--font-mono);color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--font-ui);overflow-x:hidden;font-synthesis:none;-webkit-font-smoothing:antialiased}a{color:inherit}button{font:inherit;color:inherit}svg{display:block}::selection{background:#fde3c0;color:var(--ink)}:focus-visible{outline:2px solid var(--bl-t);outline-offset:3px;border-radius:6px}.mono{font-family:var(--mono)}.skip{position:absolute;left:16px;top:-100px;z-index:50;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none}.skip:focus{top:12px}.top{position:absolute;inset:0 0 auto;z-index:20;height:76px;display:flex;align-items:center;gap:28px;padding:0 var(--gx)}.brand{display:flex;align-items:center;gap:9px;font:600 25px/1 var(--disp);letter-spacing:-.025em;text-decoration:none}.brand svg{width:34px;height:34px}.top nav{margin-left:auto;display:flex;gap:6px}.top nav a{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:999px;font-size:14px;text-decoration:none;transition:background .2s}.top nav a:hover{background:rgba(27,42,74,.06)}.top nav svg,.cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.lang{display:flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line)}.lang button{border:0;background:none;padding:5px 11px;border-radius:999px;cursor:pointer;font:500 13px/1.2 var(--disp);color:var(--ink2);transition:background .2s,color .2s}.lang button[aria-pressed=true]{background:var(--ink);color:#fff}.lang button:not([aria-pressed=true]):hover{color:var(--ink)}.hero{position:relative;min-height:max(760px,100svh);overflow:hidden;isolation:isolate}.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0%,rgba(251,250,247,.9) 26%,rgba(251,250,247,0) 50%),linear-gradient(180deg,var(--paper) 0,rgba(251,250,247,0) 120px),linear-gradient(0deg,var(--paper) 0,rgba(251,250,247,0) 140px)}.hero-copy{position:relative;z-index:2;padding:calc(76px + clamp(28px,7vh,88px)) var(--gx) 0;max-width:min(820px,56vw)}h1{margin:0;font:800 clamp(40px,min(6vw,9.4vh),88px)/1.04 var(--disp);letter-spacing:-.035em;text-wrap:balance}h1 span{display:block}h1 .hl{color:var(--or2);background:linear-gradient(100deg,var(--or) 10%,var(--or2) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}@media (forced-colors:active){h1 .hl{-webkit-text-fill-color:currentColor;background:none}}:lang(th) h1{line-height:1.2;letter-spacing:-.015em}:lang(en) h1{font-size:clamp(38px,min(4.6vw,8vh),72px)}.lead{margin:clamp(18px,3vh,28px) 0 0;max-width:30em;font-size:clamp(16px,1.25vw,18px);color:var(--ink2);line-height:1.7}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(22px,3.6vh,34px)}.cta{display:inline-flex;align-items:center;gap:14px;padding:7px 7px 7px 24px;border-radius:999px;background:var(--or);color:var(--ink);font-weight:600;text-decoration:none;font:500 16px/1.3 var(--font-ui);box-shadow:0 14px 30px -14px rgba(247,148,29,.65);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}.cta i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;transition:transform .25s var(--ease)}.cta i svg{width:16px;height:16px;stroke-width:2}.cta:hover{transform:translateY(-1px);background:#ffa23a;box-shadow:0 18px 34px -14px rgba(247,148,29,.75)}.cta:hover i{transform:translate(2px,-2px)}.cta:active{transform:translateY(0)}.textlink{font-weight:500;text-decoration:underline;text-decoration-color:var(--or);text-decoration-thickness:2px;text-underline-offset:6px;transition:text-underline-offset .2s}.textlink:hover{text-underline-offset:9px}.scene{position:absolute;inset:0;z-index:0;margin:0}.stage{position:absolute;right:-5vw;top:calc(50% + 6px);transform:translateY(-50%);aspect-ratio:1.7831;width:min(70vw,calc((max(760px,100svh) - 160px) * 1.7831))}.plant{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.scene-note{position:absolute;z-index:3;right:var(--gx);top:84px;display:flex;align-items:center;gap:8px;max-width:min(420px,40vw);font-size:13px;line-height:1.45;color:var(--ink2);text-align:right}.scene-note i{flex:none;width:8px;height:8px;border-radius:2px;background:var(--wn)}.gshadow{fill:var(--ink);opacity:.13}.pad{fill:#ffffff}.grid{fill:none;stroke:#ece9e2;stroke-width:.7}.fence{fill:none;stroke:#9aa3b5;stroke-width:1;stroke-dasharray:2 5}.road{fill:none;stroke:#cfd3dc;stroke-width:1}.cab{fill:none;stroke:#3d4a66;stroke-width:1;stroke-linejoin:round}.dat{fill:none;stroke:var(--bl);stroke-width:1;stroke-dasharray:2 4;opacity:.75}.rsh{fill:var(--ink);opacity:.07}.leg{fill:none;stroke:var(--ink);stroke-width:1}.face{fill:#f8f9fc;stroke:var(--ink);stroke-width:1.15;stroke-linejoin:round}.cell{fill:none;stroke:#97a3bb;stroke-width:.55}.sdiv{fill:none;stroke:var(--ink);stroke-width:.9}.bt{fill:#fff;stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}.bs{fill:#e7eaf1;stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}.tx .bs{fill:#dde2ec}.vent{fill:none;stroke:#6b7590;stroke-width:.8}.mast{fill:none;stroke:var(--ink);stroke-width:1.4}.ant{fill:#fff;stroke:var(--bl);stroke-width:1.6}.waves{fill:none;stroke:var(--bl);stroke-width:1.3;stroke-linecap:round;opacity:.8}.uplink{fill:none;stroke:var(--bl);stroke-width:1;stroke-dasharray:2 4}.node circle{fill:#fff;stroke:var(--bl);stroke-width:1.6}.node path{fill:none;stroke:var(--bl);stroke-width:1.4;stroke-linejoin:round}.led{fill:var(--ok);stroke:#fff;stroke-width:1}.fl-e{fill:none;stroke:var(--or);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.1 16.9}.fl-d{fill:none;stroke:var(--bl);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.1 27.9}.str09{transition:opacity .4s}.t{opacity:0;transition:opacity .45s var(--ease)}.hl-row{fill:rgba(227,162,26,.1);stroke:var(--wn);stroke-width:1.6;stroke-linejoin:round}.hot{fill:var(--wn);stroke:#8a5a00;stroke-width:.8}.hl-str{fill:rgba(228,56,58,.14);stroke:var(--cr);stroke-width:1.8;stroke-linejoin:round}.pulse{fill:none;stroke-width:1.6;opacity:.55;transform-box:fill-box;transform-origin:center}.pulse.wn{stroke:var(--wn)}.pulse.cr{stroke:var(--cr)}.pulse.bl{stroke:var(--bl)}.route{fill:none;stroke:var(--cr);stroke-width:2;stroke-dasharray:6 5;stroke-linecap:round}.walk{fill:none;stroke:var(--cr);stroke-width:1.2;stroke-dasharray:2 3}.truck .bt{fill:#fff4f3;stroke:var(--cr-t)}.truck .bs{fill:#f7d9d7;stroke:var(--cr-t)}.cone{fill:rgba(227,162,26,.13);stroke:none}.foot{fill:rgba(227,162,26,.16);stroke:var(--wn);stroke-width:1.2;stroke-dasharray:3 3}.drone path{fill:none;stroke:var(--ink);stroke-width:1.4}.drone ellipse{fill:rgba(255,255,255,.85);stroke:var(--ink);stroke-width:1}.drone rect{fill:var(--ink)}#scene[data-topic=inspect] .t-inspect,#scene[data-topic=maintain] .t-maintain,#scene[data-topic=connect] .t-connect{opacity:1}#scene[data-topic=maintain] .str09{opacity:0}#scene[data-topic=maintain] .led3{fill:var(--wn)}#scene[data-topic=connect] .dat,#scene[data-topic=connect] .uplink{opacity:.35}#scene[data-topic=inspect] .row[data-row="2"] .face{fill:#f5efe0}.labels,.tags{position:absolute;inset:0;pointer-events:none}.lbl{position:absolute;transform:translate(-50%,-100%);font:500 11px/1 var(--mono);color:var(--ink2);white-space:nowrap;padding:3px 5px;border-radius:5px;background:rgba(255,255,255,.78)}.lbl.l{transform:translate(-100%,-50%)}#scene[data-topic=maintain] .inv-l3{color:var(--wn-t)}.tag{position:absolute;display:flex;flex-direction:column;gap:2px;padding:7px 11px 8px;border-radius:12px;white-space:nowrap;background:rgba(255,255,255,.8);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 12px 28px -14px rgba(27,42,74,.45),0 1px 2px rgba(27,42,74,.08);--ty:calc(-100% - 22px);transform:translate(calc(var(--ax,50%) * -1),var(--ty)) translateY(6px);opacity:0;transition:opacity .35s var(--ease),transform .45s var(--ease)}.tag::after{content:"";position:absolute;left:var(--ax,50%);top:100%;width:1px;height:18px;background:var(--ink)}.tag::before{content:"";position:absolute;left:var(--ax,50%);top:calc(100% + 22px);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px rgba(255,255,255,.9)}.tag.below{--ty:22px;transform:translate(calc(var(--ax,50%) * -1),var(--ty)) translateY(-6px)}.tag.below::after{top:auto;bottom:100%}.tag.below::before{top:auto;bottom:calc(100% + 22px);margin:0 0 -3.5px -3.5px}#scene[data-topic=inspect] .tag[data-t=inspect],#scene[data-topic=maintain] .tag[data-t=maintain],#scene[data-topic=connect] .tag[data-t=connect],.tag.node-tag{opacity:1;transform:translate(calc(var(--ax,50%) * -1),var(--ty))}.tid{display:flex;align-items:center;gap:8px;font:500 11.5px/1.3 var(--mono);color:var(--ink2)}.sev{font:600 11px/1 var(--font-ui);padding:3px 6px;border-radius:5px}.tm{display:flex;align-items:baseline;gap:8px;font:500 13.5px/1.35 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums}.dm{font:500 10.5px/1 var(--mono);color:var(--ink2);padding:2px 4px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}.tag.wn .sev{background:#fbefd3;color:var(--wn-t)}.tag.cr .sev{background:#fbe3e2;color:var(--cr-t)}.tag.wo .sev{background:#efeee9;color:var(--ink)}.tag.bl .sev{background:#e6edff;color:var(--bl-t)}.tag.wn::before{background:var(--wn)}.tag.cr::before{background:var(--cr)}.tag.bl::before{background:var(--bl)}.tag.wo::before{background:var(--cr)}.tag.node-tag{background:var(--ink)}.tag.node-tag .tid{color:#fff;font-weight:500;letter-spacing:.02em}.tag.node-tag .tm{color:#d6dae3;font-size:12.5px;font-weight:400}.tag.node-tag::before{background:var(--bl)}.console{position:absolute;z-index:3;left:var(--gx);right:var(--gx);bottom:clamp(20px,3.4vh,36px);display:flex;align-items:flex-end;gap:16px;pointer-events:none}.console>*{pointer-events:auto}.dock{display:flex;align-items:center;gap:6px;padding:6px;border-radius:20px;background:rgba(255,255,255,.74);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 16px 36px -18px rgba(27,42,74,.45),0 1px 2px rgba(27,42,74,.06)}.no-js .dock{display:none}.tabs{display:flex;gap:4px}[role=tab]{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 18px 0 14px;border:0;border-radius:14px;background:none;cursor:pointer;font:500 15px/1.2 var(--font-ui);color:var(--ink2);transition:background .2s,color .2s}[role=tab] svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}[role=tab]:hover{background:rgba(27,42,74,.06);color:var(--ink)}[role=tab]:hover svg{transform:scale(1.08)}[role=tab][aria-selected=true]{background:var(--ink);color:#fff}[role=tab][aria-selected=true].k-in svg{color:#fdb95b}[role=tab][aria-selected=true].k-mt svg{color:#ff9a95}[role=tab][aria-selected=true].k-cn svg{color:#9db8ff}.motion{display:grid;place-items:center;width:48px;height:48px;margin-left:2px;border:0;border-radius:14px;background:none;cursor:pointer;color:var(--ink2);box-shadow:inset 1px 0 0 var(--hair);transition:background .2s,color .2s}.motion:hover{background:rgba(27,42,74,.06);color:var(--ink)}.motion svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.motion .i-play,.motion[aria-pressed=true] .i-pause{display:none}.motion[aria-pressed=true] .i-play{display:block}.no-js .motion{display:none}.hud{width:min(460px,100%);padding:16px 20px 18px;border-radius:16px;background:rgba(255,255,255,.8);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 18px 40px -18px rgba(27,42,74,.5),0 1px 2px rgba(27,42,74,.06)}.js .hud:not([hidden]){animation:hudin .4s var(--ease)}@keyframes hudin{from{opacity:0;transform:translateY(6px)}}.hud[hidden]{display:none}.hud-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--ink2)}.hud-head .mono{font-size:12px;letter-spacing:.01em}.demo{flex:none;font:500 12px/1 var(--font-ui);padding:5px 8px;border-radius:6px;background:#fbefd3;color:var(--wn-t)}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 10px}.metrics div{min-width:0}.metrics dt{font-size:14px;line-height:1.35;color:var(--ink2)}.metrics dd{margin:2px 0 0;font:600 26px/1.15 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}.metrics dd small{font:500 14px/1 var(--disp);color:var(--ink2);margin-left:2px;letter-spacing:0}.metrics .mono-v{font:500 18px/1.6 var(--mono);letter-spacing:0}.v-wn{color:var(--wn-t)}.v-cr{color:var(--cr-t)}.v-ok{color:var(--ok-t)}.hud p{margin:0;padding-top:10px;box-shadow:inset 0 1px 0 var(--hair);font-size:14.5px;line-height:1.6;color:var(--ink)}.js .fl-e{animation:flow-e 5s linear infinite}.js .fl-d{animation:flow-d 3.4s linear infinite}.js .route{animation:march 1s linear infinite}.js .pulse{animation:pulse 2.4s var(--ease) infinite}.js .drone-mv{animation:sweep 7s ease-in-out infinite alternate}@keyframes flow-e{to{stroke-dashoffset:-170}}@keyframes flow-d{to{stroke-dashoffset:-280}}@keyframes march{to{stroke-dashoffset:-11}}@keyframes pulse{from{transform:scale(.5);opacity:.9}to{transform:scale(1.9);opacity:0}}@keyframes sweep{from{transform:translate(-117px,-67.5px)}to{transform:translate(52px,30px)}}.intro .dr{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s cubic-bezier(.6,0,.2,1) var(--d,0s) both}.intro .face,.intro .bt,.intro .bs{animation:draw 1.2s cubic-bezier(.6,0,.2,1) var(--d,0s) both,fill-in .5s ease calc(var(--d,0s) + .7s) both}.intro .rsh,.intro .gshadow,.intro .pad{animation:fade .8s ease both}.intro .flows,.intro .t,.intro .labels,.intro .tags,.intro .uplink,.intro .node,.intro .dat,.intro .waves,.intro .ant,.intro .led{animation:fade .6s ease 1.25s backwards}@keyframes draw{to{stroke-dashoffset:0}}@keyframes fill-in{from{fill-opacity:0}}@keyframes fade{from{opacity:0}}#scene.paused *,#scene.paused *::before,#scene.paused *::after{animation-play-state:paused!important}@media (prefers-reduced-motion:reduce){.js .fl-e,.js .fl-d,.js .route,.js .pulse,.js .drone-mv,.js .hud:not([hidden]){animation:none}.tag,.t{transition:opacity .2s linear}.motion{display:none}}.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gx)}.family h2,.band h2{margin:0;font:800 clamp(30px,3.6vw,48px)/1.12 var(--disp);letter-spacing:-.025em;text-wrap:balance}:lang(th) .family h2,:lang(th) .band h2{line-height:1.3;letter-spacing:-.005em}.sub{margin:14px 0 0;max-width:40em;font-size:17px;color:var(--ink2)}.band{background:#0f1a2e;color:#f5f3ee;padding:clamp(56px,8vw,96px) 0}.band p{margin:12px 0 0;max-width:36em;color:#ced3dd;font-size:17px}.cta-or{box-shadow:none}.cta-or i{background:var(--ink);color:#fff}.cta-or:hover{box-shadow:0 14px 30px -14px rgba(247,148,29,.6)}.band :focus-visible{outline-color:#9db8ff}@media (max-width:1100px){.hero-copy{max-width:min(600px,56vw)}.hud{width:min(400px,100%)}.metrics dd{font-size:22px}[role=tab]{padding:0 14px 0 12px}}@media (max-width:860px){.top{position:relative;height:64px;gap:12px}.brand{font-size:22px}.brand svg{width:30px;height:30px}.top nav a:first-child{display:none}.top nav a{padding:8px 8px;font-size:14px}.hero{min-height:0;display:flex;flex-direction:column;overflow:hidden}.hero::after{display:none}.hero-copy{max-width:none;padding:clamp(20px,5vw,40px) var(--gx) 0}h1,:lang(en) h1{font-size:clamp(34px,10vw,60px)}:lang(en) h1{font-size:clamp(28px,7.8vw,56px)}.scene{position:relative;inset:auto;margin:20px 0 0}.stage{position:relative;right:auto;top:auto;transform:none;width:calc(100% + 24px);margin-left:-12px}.scene-note{position:static;max-width:none;margin:8px var(--gx) 0;text-align:left;font-size:13px}.console{position:relative;left:auto;right:auto;bottom:auto;flex-direction:column;align-items:stretch;gap:12px;padding:16px var(--gx) 8px}.dock{width:100%}.tabs{flex:1}[role=tab]{flex:1;flex-direction:column;justify-content:center;gap:3px;min-height:58px;padding:6px 4px;font-size:14px}.hud{width:100%}.lbl{display:none}.tag{padding:5px 8px 6px;border-radius:9px}.tid{font-size:10.5px;gap:6px}.sev{font-size:10.5px;padding:2px 5px}.tm{font-size:12px;gap:6px}.dm{font-size:10px}.tag{--ty:calc(-100% - 15px)}.tag.below{--ty:15px}.tag::after{height:12px}.tag::before{top:calc(100% + 15px)}.tag.below::before{bottom:calc(100% + 15px)}.tag.node-tag .tm{display:none}}@media (max-width:420px){.metrics{gap:8px}.metrics dt{font-size:14px}.metrics dd{font-size:20px}.metrics dd small{font-size:12px}.metrics .mono-v{font-size:14px}.cta{font-size:15px}}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:700 12.5px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--or-t)}.eyebrow::before{content:"";width:22px;height:2px;background:var(--or)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(27,42,74,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(27,42,74,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 60% 45%,#000 30%,transparent 80%)}
.hero-glow{position:absolute;z-index:0;pointer-events:none;width:560px;height:560px;right:8%;top:6%;border-radius:50%;background:radial-gradient(circle,rgba(253,185,91,.28),rgba(253,185,91,0) 65%)}
@media (min-width:861px){.tag.wo{--ty:calc(-100% - 50px)}.tag.wo::after{height:46px}.tag.wo::before{top:calc(100% + 50px)}}

footer.site-foot{background:#0f1a2e;color:#c9cfdb;font-size:15px;border-top:1px solid rgba(255,255,255,.08);padding:clamp(48px,7vw,80px) 0 calc(24px + env(safe-area-inset-bottom))}
footer.site-foot a{color:#fff;text-decoration:none}
footer.site-foot a:hover{color:var(--or3)}
footer.site-foot :focus-visible{outline-color:#9db8ff}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) auto;gap:40px 56px;padding-bottom:clamp(36px,5vw,56px)}
.foot-brand{display:inline-flex;align-items:center;gap:10px;font:800 24px/1 var(--disp);letter-spacing:-.03em}
.foot-brand svg{width:32px;height:32px}
.foot-id p{margin:16px 0 0;max-width:30em;line-height:1.7}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
footer.site-foot h3{margin:0 0 14px;font:700 12.5px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--or3)}
footer.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer.site-foot .ext{display:inline-flex;align-items:center;gap:6px}
footer.site-foot .ext svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lang-dark{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.lang-dark button{color:#c9cfdb;padding:7px 14px;font-size:14px}
.lang-dark button[aria-pressed=true]{background:var(--or);color:var(--ink)}
.lang-dark button:not([aria-pressed=true]):hover{color:#fff}
.foot-bottom{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;color:#a7afc0}
.foot-bottom>span:first-child{color:#fff;font-weight:500}
@media (max-width:860px){.foot-top{grid-template-columns:1fr;gap:32px}.foot-bottom{flex-direction:column}}
:lang(th) footer.site-foot h3{letter-spacing:.02em;font-size:14px;text-transform:none}


/* One team: Solar O&M featured, three sibling systems, shared skills */
.family{padding:clamp(72px,10vw,128px) 0 clamp(64px,9vw,112px)}
.family-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px 56px;align-items:end}
.family-head .sub{margin:0}
.sys-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;margin-top:clamp(36px,5vw,56px)}
.sys:not(.sys-main){display:grid;grid-template-columns:136px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:20px;row-gap:6px;align-content:start}
.sys:not(.sys-main) .sys-art{grid-row:1/-1;height:auto;min-height:150px;margin:0}
.sys{display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px;border-radius:20px;background:var(--card);box-shadow:0 22px 44px -32px rgba(27,42,74,.45),inset 0 0 0 1px var(--hair);position:relative}
.sys-art{display:grid;place-items:center;height:150px;margin:-4px -6px 8px;border-radius:14px;background:#f8f7f3;background-image:linear-gradient(rgba(27,42,74,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(27,42,74,.04) 1px,transparent 1px);background-size:20px 20px}
.art{width:auto;height:100%;max-width:100%;padding:10px 0}
.sys h3{margin:0;font:700 19px/1.3 var(--disp);letter-spacing:-.01em}
.sys p{margin:0;font-size:15px;line-height:1.6;color:var(--ink2)}
.sys .who{font-size:13.5px;color:var(--ink)}
.sys .who > span:first-child{display:inline-block;margin-right:4px;padding:1px 7px;border-radius:999px;background:#f1efe9;color:var(--ink2);font-size:12.5px}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ink)}
.more svg{width:14px;height:14px;fill:none;stroke:var(--or-t);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.more:hover svg{transform:translate(2px,-2px)}
.more::after{content:"";position:absolute;inset:0;border-radius:20px}
.sys:has(.more:hover){box-shadow:0 26px 50px -30px rgba(27,42,74,.55),inset 0 0 0 1px #d6dae3}
.sys-main{grid-row:span 3;padding:26px 28px 24px;background:linear-gradient(160deg,#fff 40%,#fff6ea)}
.sys-main .sys-art{height:230px}
.sys-main h3{font-size:24px}
.badge{align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--or);color:var(--ink);font:700 12px/1.2 var(--disp);letter-spacing:.02em}
.steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.steps li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding-top:10px;box-shadow:inset 0 1px 0 var(--hair);font-size:14.5px;line-height:1.55;color:var(--ink2)}
.steps b{color:var(--ink);font-weight:700}
.sys-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:auto;padding-top:16px}
.cta-sm{font-size:15px;padding:5px 5px 5px 18px;gap:12px}
.cta-sm i{width:32px;height:32px}
.skills{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:20px;padding:16px 22px;border-radius:16px;background:#f1efe9}
.skills-t{margin:0;font-weight:600;font-size:15px}
.skills ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px}
.skills li{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--ink)}
.skills svg{width:20px;height:20px;fill:none;stroke:var(--or-t);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pv-face{fill:#f8f9fc;stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.pv-cell{fill:none;stroke:#97a3bb;stroke-width:.6}
.pv-hot{fill:rgba(247,148,29,.35);stroke:var(--or);stroke-width:1}
.pv-dc{fill:none;stroke:var(--or);stroke-width:1.4;stroke-linecap:round}
.b-ok{fill:var(--ok)}
.b-link.on{fill:none;stroke:var(--bl);stroke-width:1.4;stroke-dasharray:3 5;stroke-linecap:round}
.hub-dot{fill:var(--ink)}
.b-wv-bl{stroke:var(--bl)}
.bx-t{fill:#fff;stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.bx-f{fill:#f1f3f8;stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.bx-s{fill:#e4e8f0;stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.b-sh{fill:var(--ink);opacity:.07}
.b-ln,.b-lead{fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.b-lead{stroke-dasharray:2 3;opacity:.6}
.b-pole{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.b-pole2{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.b-win{fill:#e6edff;stroke:var(--ink);stroke-width:1}
.b-card{fill:#fff;stroke:var(--ink);stroke-width:1.1}
.b-wave{fill:none;stroke:var(--or);stroke-width:1.8;stroke-linejoin:round}
.b-hit{fill:rgba(228,56,58,.12);stroke:var(--cr);stroke-width:1}
.b-dot{fill:var(--cr)}
.b-dot2{fill:var(--bl)}
.b-chip{font:700 10px var(--mono);fill:var(--ink2);letter-spacing:.06em}
.b-horn{fill:#fff;stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.b-wv{fill:none;stroke:var(--or);stroke-width:1.4;stroke-linecap:round;opacity:.85}
.hub-ic{fill:none;stroke:#9db8ff;stroke-width:1.5}
@media (max-width:1000px){.sys-grid{grid-template-columns:1fr}.sys-main{grid-row:auto}}
@media (max-width:860px){.family-head{grid-template-columns:1fr}.steps li{grid-template-columns:1fr;gap:2px}}
@media (max-width:520px){.sys:not(.sys-main){display:flex}.sys:not(.sys-main) .sys-art{height:140px;min-height:0;margin:-4px -6px 8px}.sys-main .sys-art{height:180px}}
.sys:not(.sys-main) .sys-art{height:150px;min-height:0;align-self:start}
.sys:not(.sys-main) .art{padding:8px 0}
/* Plant console: tabs and the selected panel read as one card attached to the hero */
@media (min-width:861px){.hero{min-height:max(800px,100svh)}}
.console{right:auto;width:min(560px,calc(100% - 2 * var(--gx)));flex-direction:column;align-items:stretch;gap:0;pointer-events:auto;border-radius:22px;overflow:hidden;background:rgba(255,255,255,.88);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 26px 52px -26px rgba(27,42,74,.5),inset 0 0 0 1px var(--hair)}
.console .dock{width:100%;padding:8px;border-radius:0;background:rgba(27,42,74,.03);box-shadow:inset 0 -1px 0 var(--hair);backdrop-filter:none;-webkit-backdrop-filter:none}
.console .tabs{flex:1}
.console .hud{width:100%;padding:16px 22px 20px;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
@media (max-width:860px){.console{width:auto;margin:16px var(--gx) 0;padding:0}}
/* hero edges line up with the centred .wrap column used by every later section */
@media (min-width:861px){
.top{padding-left:max(var(--gx),calc((100% - 1240px) / 2 + var(--gx)));padding-right:max(var(--gx),calc((100% - 1240px) / 2 + var(--gx)))}
.hero-copy{padding-left:max(var(--gx),calc((100% - 1240px) / 2 + var(--gx)))}
.hero-copy{max-width:calc(max(var(--gx),(100% - 1240px) / 2 + var(--gx)) + 680px)}
.hero{padding-bottom:clamp(28px,4.5vh,48px)}
.console{position:relative;left:auto;bottom:auto;z-index:3;margin:clamp(28px,4.5vh,44px) 0 0 max(var(--gx),calc((100% - 1240px) / 2 + var(--gx)))}
.scene-note{right:max(var(--gx),calc((100% - 1240px) / 2 + var(--gx)))}
}
@media (min-width:861px){
.stage{right:auto;left:calc(max(var(--gx),(100% - 1240px) / 2 + var(--gx)) + 470px);width:min(calc(100% - max(var(--gx),(100% - 1240px) / 2 + var(--gx)) - 400px),1100px,calc((max(800px,100svh) - 160px) * 1.7831))}
.hero::after{background:linear-gradient(90deg,var(--paper) 0,rgba(251,250,247,.92) calc(max(var(--gx),(100% - 1240px) / 2 + var(--gx)) + 400px),rgba(251,250,247,0) calc(max(var(--gx),(100% - 1240px) / 2 + var(--gx)) + 600px)),linear-gradient(180deg,var(--paper) 0,rgba(251,250,247,0) 120px),linear-gradient(0deg,var(--paper) 0,rgba(251,250,247,0) 140px)}
}
@media (min-width:861px){.lead{max-width:27em}}
.family{padding-top:clamp(48px,6vw,88px)}
/* faster topic switches */
.t{transition:opacity .2s var(--ease)}
.tag{transition:opacity .18s var(--ease),transform .22s var(--ease)}
.str09{transition:opacity .2s}
.js .hud:not([hidden]){animation-duration:.22s}
/* autoplay: a progress line fills under the active topic, then the next topic opens */
.console [role=tab]{position:relative}
.tprog{position:absolute;left:14px;right:14px;bottom:5px;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden;opacity:0;transition:opacity .2s}
.tprog::after{content:"";position:absolute;inset:0;background:var(--or);transform-origin:left;transform:scaleX(0)}
.console.autoplay [aria-selected=true] .tprog{opacity:1}
.console.autoplay [aria-selected=true] .tprog::after{animation:tfill var(--dwell,5s) linear forwards}
.console.autoplay:hover [aria-selected=true] .tprog::after,.console.autoplay:has(:focus-visible) [aria-selected=true] .tprog::after,.console.autoplay.paused [aria-selected=true] .tprog::after{animation-play-state:paused}
@keyframes tfill{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.tprog{display:none}}
/* headline lines stay whole on desktop in both languages */
@media (min-width:861px){h1 span{white-space:nowrap}:lang(en) h1{font-size:clamp(36px,min(4.3vw,7.8vh),68px)}}
@media (min-width:861px){.steps li{grid-template-columns:132px 1fr}}
:lang(th) .eyebrow{letter-spacing:.03em;font-size:14px}
@media (min-width:861px){:lang(th) h1{font-size:clamp(40px,min(5vw,8.4vh),76px)}}
h1 .hl{width:max-content;max-width:100%}
@media (min-width:861px){h1 .hl{max-width:none}}

/* ---- theme.json hooks: app.js sets these variables; the values here are the defaults if theme.json cannot load ---- */
:root{--font-th:"Inter","IBM Plex Sans Thai",system-ui,sans-serif;--font-en:"Inter","IBM Plex Sans Thai",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;--font-ui:var(--font-th);
--h1-th:62px;--h1-en:68px;--lead-th:18px;--lead-en:18px;--h2-th:46px;--h2-en:48px;--body-th:16px;--body-en:16px}
html:lang(en){--font-ui:var(--font-en)}
:lang(th) body{font-size:var(--body-th)}:lang(en) body{font-size:var(--body-en)}
@media (min-width:861px){
:lang(th) h1{font-size:clamp(34px,min(5vw,8.4vh),var(--h1-th))}
:lang(en) h1{font-size:clamp(34px,min(4.3vw,7.8vh),var(--h1-en))}
:lang(th) .lead{font-size:var(--lead-th)}:lang(en) .lead{font-size:var(--lead-en)}
:lang(th) .family h2,:lang(th) .band h2{font-size:clamp(28px,3.6vw,var(--h2-th))}
:lang(en) .family h2,:lang(en) .band h2{font-size:clamp(28px,3.6vw,var(--h2-en))}
}
/* ---- boot check screen ---- */
.boot{display:none}
.js.loading .boot,.js .boot.leaving{display:grid}
.boot{position:fixed;inset:0;z-index:100;place-items:center;padding:24px;background:var(--paper);background-image:linear-gradient(rgba(27,42,74,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(27,42,74,.04) 1px,transparent 1px);background-size:40px 40px;transition:opacity .3s ease,visibility .3s}
.boot.leaving{opacity:0;visibility:hidden}
.js.loading body{overflow:hidden}
.boot-card{width:min(380px,100%);padding:26px 26px 22px;border-radius:22px;background:#fff;box-shadow:0 30px 60px -30px rgba(27,42,74,.45),inset 0 0 0 1px var(--hair)}
.boot-brand{display:flex;align-items:center;gap:9px;font:800 22px/1 var(--disp);letter-spacing:-.03em;color:var(--ink)}
.boot-brand svg{width:30px;height:30px}
.boot-t{margin:16px 0 14px;font-weight:600;font-size:15px}
.boot-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.boot-list li{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;font-size:14px;color:var(--ink2)}
.boot-list i{width:14px;height:14px;border-radius:50%;border:2px solid #d6dae3;border-top-color:var(--or);animation:bspin .8s linear infinite}
.boot-list li[data-state=ok] i{animation:none;border:0;background:var(--ok);box-shadow:inset 0 0 0 4px #e8f6ee}
.boot-list li[data-state=warn] i{animation:none;border:0;background:var(--wn)}
.boot-list li[data-state=ok]{color:var(--ink)}
.boot-list .st{font:500 12px/1 var(--mono);color:var(--ink2)}
.boot-bar{height:4px;margin-top:18px;border-radius:4px;background:#efeee9;overflow:hidden}
.boot-bar span{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--or),var(--or2));transition:width .25s ease}
@keyframes bspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.boot-list i{animation:none}.boot{transition:none}}
/* the boot screen must never catch clicks once it starts leaving, and is fully removed when hidden */
.boot.leaving{pointer-events:none}
.boot[hidden]{display:none!important}
.lead,.sub,.sys p,.hud p{text-wrap:pretty}
.sos-btn{fill:var(--cr)}.sos-lamp{fill:var(--cr);opacity:.85}.sos-t{font:700 6.5px var(--mono);fill:var(--ink)}
.family h2,.band h2{white-space:pre-line}
@media (min-width:861px){.family-head{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}}

/* ---- primary CTA: every colour derived from the brand orange (text 5.9:1, arrow 5.0:1) ---- */
:root{--cta-text:#4a2506;--cta-chip:#fff7ec;--cta-arrow:#b45309}
.cta{color:var(--cta-text);font-weight:600}
.cta i,.cta-or i{background:var(--cta-chip);color:var(--cta-arrow);box-shadow:inset 0 0 0 1px rgba(74,37,6,.08)}
.cta i svg{stroke-width:2.2}
.cta:hover{color:var(--cta-text)}
.cta:focus-visible{outline:2px solid var(--cta-text);outline-offset:3px}
/* ---- main menu ---- */
.top nav{align-items:center;gap:4px}
.top nav .nav-link{color:var(--ink)}
.top nav .nav-cta{margin-left:8px;padding:8px 14px 8px 16px;background:var(--ink);color:#fff;font-weight:600}
.top nav .nav-cta:hover{background:#2d4a7a}
.top nav .nav-cta svg{color:var(--or)}
@media (max-width:860px){.top nav .nav-link{display:none}.top nav .nav-cta{margin-left:0;padding:7px 12px}}

/* ---- demo caption sits inside the drawing, under the plant ---- */
.stage .scene-note{position:absolute;top:auto;right:7%;bottom:9%;left:auto;max-width:none;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px var(--hair),0 8px 18px -12px rgba(27,42,74,.4);font-size:12.5px;white-space:nowrap;z-index:3}
@media (max-width:860px){.stage .scene-note{right:auto;left:50%;bottom:2%;transform:translateX(-50%)}}
/* ---- about Synkolab + what COMM-LINK is ---- */
.about-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.about .eyebrow{color:#fdb95b}.about .eyebrow::before{background:#fdb95b}
.about-copy p{margin:16px 0 0;max-width:34em;color:#ced3dd;font-size:17px;line-height:1.7}
.about-copy .about-why{padding-left:16px;box-shadow:inset 2px 0 0 var(--or);color:#fff;font-weight:500}
.about-values{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.about-values li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.about-values i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(253,185,91,.12)}
.about-values svg{width:20px;height:20px;fill:none;stroke:#fdb95b;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.about-values b{display:block;color:#fff;font-weight:700;font-size:16px}
.about-values span{display:block;color:#b7bfcd;font-size:15px;line-height:1.55}
.cl-card{padding:clamp(24px,3vw,36px);border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.cl-mark{margin:0;font:800 clamp(34px,3.6vw,48px)/1 var(--disp);letter-spacing:-.03em;color:#fff}
.cl-mark b{color:var(--or)}
.cl-expand{margin:10px 0 0;font:500 14px/1.5 var(--mono);color:#9db8ff}
.cl-expand b{color:#fff;font-weight:600}
.cl-what{margin:16px 0 0;color:#ced3dd;font-size:16px;line-height:1.7}
.cl-map{margin-top:24px}
.cl-nodes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cl-nodes li{padding:10px 6px;border-radius:12px;text-align:center;font-size:13.5px;color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.cl-fan{display:block;width:100%;height:44px;overflow:visible}
.cl-fan path{fill:none;stroke:#9db8ff;stroke-width:1.4;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;opacity:.75}
.js .cl-fan path{animation:clflow 1.2s linear infinite}
@keyframes clflow{to{stroke-dashoffset:-16}}
@media (prefers-reduced-motion:reduce){.js .cl-fan path{animation:none}}
.cl-hub{display:flex;justify-content:center}
.cl-hub span{padding:9px 18px;border-radius:999px;background:var(--or);color:var(--cta-text);font:700 14px/1 var(--mono);letter-spacing:.04em;box-shadow:0 10px 26px -10px rgba(247,148,29,.6)}
.cl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.about .textlink{color:#fff}
@media (max-width:860px){.about-in{grid-template-columns:1fr}.cl-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-fan{display:none}.cl-hub{margin-top:14px}}
@media (min-width:861px){.stage .scene-note{right:auto;left:56%;bottom:11%;transform:translateX(-50%)}}
.about .cl-mark{margin:0;font:800 clamp(34px,3.6vw,48px)/1 var(--disp);letter-spacing:-.03em;color:#fff}
.about .cl-expand{margin:10px 0 0;font:500 14px/1.5 var(--mono);color:#9db8ff}
.about .cl-what{margin:16px 0 0;font-size:16px;line-height:1.7;color:#ced3dd;max-width:none}

/* ---- 2026-10-15 production fixes ---- */
.brand .lab,.foot-brand .lab,.boot-brand .lab{color:var(--or)}
.nw{white-space:nowrap}
/* headline orange: accessible gradient (3.1-3.8:1 on paper) */
h1 .hl{background:linear-gradient(100deg,#d9730a 10%,#c96506 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.top nav .nav-cta{white-space:nowrap}
.menu-btn{display:none}
@media (max-width:860px){
.menu-btn{display:grid;place-content:center;gap:4px;width:42px;height:42px;margin-left:auto;border:0;border-radius:12px;background:rgba(27,42,74,.06);cursor:pointer}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.top.open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.top.open .menu-btn span:nth-child(2){opacity:0}
.top.open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.top nav{display:none;position:absolute;top:100%;left:var(--gx);right:var(--gx);z-index:30;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:8px;border-radius:16px;background:#fff;box-shadow:0 24px 48px -20px rgba(27,42,74,.45),inset 0 0 0 1px var(--hair)}
.top.open nav{display:flex}
.top nav a,.top nav a:first-child,.top nav .nav-link{display:flex;padding:12px 14px;font-size:16px}
.top nav .nav-cta{justify-content:center;margin:6px 0 0}
.lang{margin-left:8px}
}
@media (prefers-reduced-motion:reduce){.menu-btn span{transition:none}}
.wm{white-space:nowrap}

/* ---- mobile pass 2026-10-15 (phones and small tablets only; desktop rules above are untouched) ---- */
@media (max-width:860px){
/* landscape phones: keep content clear of the notch */
:root{--gx:max(clamp(16px,4vw,56px),env(safe-area-inset-left),env(safe-area-inset-right))}
/* touch targets: 44px without making the controls look bigger */
.menu-btn{width:44px;height:44px}
.top .lang button{position:relative}
.top .lang button::after{content:"";position:absolute;inset:-9px -2px}
.textlink{display:inline-block;padding-block:9px}
.cta-sm{padding-block:6px}
/* metric values line up even when a Thai label wraps to two lines */
.metrics div{display:flex;flex-direction:column}
.metrics dt{flex:1 0 auto}
/* drawing callouts: a little larger, and the work-order callout (also shown in the panel as WO-0142) is dropped so it no longer covers STR-09 */
.tid{font-size:11px}.sev{font-size:11px}.dm{font-size:10.5px}
.tag.wo{display:none}
/* gateway callout hangs below its antenna so it stays clear of the COMM-LINK cloud marker */
.tag.bl{--ty:15px}
.tag.bl::after{top:auto;bottom:100%}
.tag.bl::before{top:auto;bottom:calc(100% + 15px);margin:0 0 -3.5px -3.5px}
.stage .scene-note{bottom:-6px}
/* about: "COMMunity LINK · ชื่อมาจาก ..." breaks between phrases, not inside them */
.cl-expand{display:flex;flex-wrap:wrap;column-gap:.5ch}
.cl-expand>span{white-space:nowrap}
/* footer: taller link rows, compact language switch */
footer.site-foot ul{gap:0}
footer.site-foot li a{display:inline-block;padding-block:9px}
footer.site-foot li a.ext{display:inline-flex;min-height:44px}
footer.site-foot h3{margin-bottom:4px}
.foot-lang .lang-dark{display:inline-flex;margin-left:0}
.lang-dark button{min-height:44px;padding:0 18px}
}
@media (max-width:520px){
/* sibling products: small drawing beside the title instead of a narrow tile above a tall empty card */
.sys:not(.sys-main){display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:6px;align-items:center;padding:18px 18px 16px}
.sys:not(.sys-main) .sys-art{grid-row:1/3;grid-column:1;width:88px;height:88px;min-height:0;margin:0;align-self:start}
.sys:not(.sys-main) .art{padding:6px 0}
.sys:not(.sys-main) h3{grid-column:2;align-self:end;font-size:17.5px}
.sys:not(.sys-main) .who{grid-column:2;align-self:start}
.sys:not(.sys-main)>p:not(.who),.sys:not(.sys-main) .more{grid-column:1/-1}
.sys:not(.sys-main)>p:not(.who){margin-top:6px}
.sys:not(.sys-main) .more{min-height:44px;padding-top:2px}
}
@media (max-width:400px){
/* three topic tabs + pause fit on one row at 360px */
[role=tab]{padding:6px 2px;font-size:13px;line-height:1.2}
.motion{width:44px}
.dock{gap:4px}
}
/* ---- about / COMM-LINK card, mobile (2026-10-15) ---- */
@media (max-width:860px){
.about .cl-expand{font-size:13px}
.cl-map{position:relative;margin-top:22px;padding-left:24px}
.cl-map::before{content:"";position:absolute;left:7px;top:22px;bottom:17px;border-left:1.5px dashed rgba(157,184,255,.55)}
.cl-nodes{grid-template-columns:1fr;gap:6px}
.cl-nodes li{position:relative;padding:11px 14px;text-align:left;font-size:15px}
.cl-nodes li::before,.cl-hub::before{content:"";position:absolute;left:-17px;top:50%;width:17px;border-top:1.5px dashed rgba(157,184,255,.55)}
.cl-nodes li::after{content:"";position:absolute;left:-20.5px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#9db8ff}
.cl-hub{position:relative;justify-content:flex-start;margin-top:12px}
.cl-hub::before{border-top-style:solid;border-color:var(--or)}
.cl-hub span{background:rgba(247,148,29,.12);color:#fdb95b;box-shadow:inset 0 0 0 1.5px var(--or)}
.cl-actions{flex-direction:column;align-items:stretch;gap:6px;margin-top:26px}
.cl-actions .cta{justify-content:space-between}
.cl-actions .textlink{align-self:center}
}
/* kept-whole Thai words stay inline even inside rules like ".x span{display:block}" */
.nw{all:unset!important;white-space:nowrap!important}