:root{--navy:#07152f;--navy2:#102a55;--blue:#1769e0;--sky:#e7f1ff;--ink:#14213a;--muted:#66758c;--line:#dce4ef;--bg:#f2f6fb;--white:#fff;--red:#d42d3f;--amber:#a85b00;--green:#13734b;--shadow:0 8px 24px rgba(10,32,69,.08);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans Thai","Segoe UI",sans-serif;color:var(--ink)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);min-height:100dvh;padding-bottom:calc(76px + env(safe-area-inset-bottom))}button,input{font:inherit}.hidden{visibility:hidden!important}.topbar{position:sticky;top:0;z-index:20;height:calc(62px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--navy),#0b2550);color:#fff;box-shadow:0 2px 14px rgba(4,18,42,.2)}
.brand{display:flex;align-items:center;gap:9px}.brand-logo{display:block;width:118px;height:auto;max-height:38px;object-fit:contain;background:#fff;border-radius:7px;padding:4px 6px}.brand small{display:block;line-height:1.05;font-size:.72rem;color:#a9caf8}.icon-btn{width:42px;height:42px;border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:13px;font-size:1.55rem}.app-shell{width:min(100%,760px);margin:auto;padding:18px 16px 30px}.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--blue)}h1{font-size:clamp(1.65rem,7vw,2.4rem);line-height:1.15;margin:6px 0 8px}h2{font-size:1.2rem;margin:26px 0 12px}p{line-height:1.62}.lead{color:var(--muted);margin:0 0 18px}.hero{background:radial-gradient(circle at 92% 0,#1e70df 0,transparent 38%),linear-gradient(145deg,#07152f,#11356c);color:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow);overflow:hidden}.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(230px,.9fr);gap:18px;align-items:center}.hero-copy{position:relative;z-index:1}.hero-product{min-height:250px;display:grid;place-items:center;position:relative}.hero-product:before{content:"";position:absolute;inset:12%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);filter:blur(8px)}.hero-product img{position:relative;z-index:1;width:100%;height:250px;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(0,0,0,.24))}.hero-product-label{position:absolute;z-index:2;right:0;bottom:0;background:rgba(5,20,46,.72);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:800;backdrop-filter:blur(8px)}.hero .eyebrow{color:#77baff}.hero .lead{color:#c4d7f1}.safety-chip{display:inline-flex;gap:7px;align-items:center;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);padding:8px 11px;border-radius:999px;font-size:.78rem}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:10px}.section-head a{color:var(--blue);font-size:.86rem;font-weight:700}.model-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.model-card{border:1px solid var(--line);background:var(--white);border-radius:18px;padding:15px;text-align:left;min-height:112px;box-shadow:0 4px 14px rgba(18,44,82,.05);color:var(--ink)}.model-card b{font-size:1.16rem;display:block;color:var(--navy)}.model-card span{display:block;color:var(--muted);font-size:.78rem;margin-top:6px;line-height:1.35}.model-card .arrow{color:var(--blue);font-size:1.25rem;margin-top:8px}.model-card.selected{border:2px solid var(--blue);background:var(--sky)}
.quick-grid{display:grid;gap:10px}.action-card{width:100%;display:flex;align-items:center;gap:13px;text-align:left;border:1px solid var(--line);background:var(--white);border-radius:17px;padding:14px;box-shadow:0 3px 12px rgba(18,44,82,.04)}.action-icon{width:42px;height:42px;border-radius:13px;background:var(--sky);color:var(--blue);display:grid;place-items:center;font-weight:900;font-size:1.1rem;flex:none}.action-card b{display:block}.action-card small{color:var(--muted);display:block;margin-top:3px;line-height:1.35}.action-card .chev{margin-left:auto;color:#8c9ab0;font-size:1.4rem}.notice{border-left:4px solid var(--amber);background:#fff7e9;color:#6d4600;border-radius:8px 14px 14px 8px;padding:13px 14px;font-size:.88rem;line-height:1.55;margin:16px 0}.notice.danger{border-color:var(--red);background:#fff0f2;color:#7c1724}.notice.good{border-color:var(--green);background:#ebfaf3;color:#155d40}.search-wrap{position:relative;margin:12px 0 16px}.search-wrap span{position:absolute;left:15px;top:13px;color:#728198}.search{width:100%;border:1px solid var(--line);background:#fff;border-radius:15px;padding:13px 14px 13px 42px;font-size:1rem;outline:none}.search:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,105,224,.12)}
.pill-row{display:flex;gap:8px;overflow:auto;padding-bottom:5px;scrollbar-width:none}.pill{white-space:nowrap;border:1px solid var(--line);background:#fff;color:var(--muted);padding:9px 13px;border-radius:999px;font-weight:700;font-size:.82rem}.pill.active{background:var(--navy);border-color:var(--navy);color:#fff}.detail-head{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:13px}.detail-head h1{font-size:1.55rem}.meta{display:flex;gap:8px;flex-wrap:wrap}.tag{font-size:.75rem;font-weight:800;color:#315377;background:#edf4fc;border-radius:999px;padding:6px 9px}.steps{counter-reset:step;display:grid;gap:11px}.step{counter-increment:step;position:relative;background:#fff;border:1px solid var(--line);border-radius:17px;padding:15px 14px 15px 56px;min-height:68px}.step:before{content:counter(step);position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:10px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:900}.step b{display:block;margin-bottom:4px}.step p{margin:0;color:#4f5e72;font-size:.91rem;line-height:1.55}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eef3f9;border-radius:6px;padding:2px 6px;color:#0b4aa3;font-weight:800}.visual-stack{display:grid;gap:14px}.visual-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}.visual-card img{display:block;width:100%;height:auto;max-height:68vh;object-fit:contain;background:#fff}.visual-card figcaption{padding:12px 14px;color:#42536a;font-weight:700;font-size:.9rem;border-top:1px solid var(--line)}.solar-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:7px;align-items:center;margin:14px 0}.solar-node{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;font-weight:800;font-size:.78rem}.solar-arrow{color:var(--blue);font-weight:900}.spec-table{width:100%;border-collapse:collapse;background:#fff;border-radius:15px;overflow:hidden;margin:12px 0}.spec-table th,.spec-table td{border-bottom:1px solid var(--line);padding:11px;text-align:left;font-size:.84rem}.spec-table th{background:#eaf3ff;color:#24476e}.param-list{display:grid;gap:9px}.param-card{border:1px solid var(--line);background:#fff;border-radius:15px;padding:14px}.param-top{display:flex;justify-content:space-between;gap:12px;align-items:start}.param-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--blue);font-weight:900;font-size:1rem}.param-model{font-size:.7rem;background:#edf2f8;color:#52647d;padding:5px 7px;border-radius:8px}.param-card h3{font-size:.95rem;margin:7px 0 5px}.param-card p{font-size:.84rem;color:var(--muted);margin:0;line-height:1.5}.param-value{margin-top:9px!important;color:var(--ink)!important}.empty{text-align:center;padding:40px 18px;color:var(--muted)}.contact-card{background:#0c2347;color:#fff;border-radius:20px;padding:18px;margin-top:20px}.contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.contact-actions a{text-decoration:none;text-align:center;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:11px;font-weight:800;font-size:.86rem}.bottom-nav{position:fixed;z-index:30;bottom:0;left:0;right:0;height:calc(66px + env(safe-area-inset-bottom));padding:7px max(8px,env(safe-area-inset-left)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-right));display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(14px)}.bottom-nav button{border:0;background:transparent;color:#75839a;font-size:.68rem;font-weight:700;display:grid;place-items:center;align-content:center;gap:3px}.bottom-nav span{font-size:1.2rem;line-height:1}.bottom-nav button.active{color:var(--blue)}.bottom-nav button.active span{transform:translateY(-1px)}
.button-guide{margin-top:28px}.setting-walkthrough{margin:11px 0;border:1px solid #bfd4f1;background:#fff;border-radius:16px;overflow:hidden}.setting-walkthrough summary{list-style:none;cursor:pointer;padding:14px;display:flex;justify-content:space-between;gap:10px;align-items:center;background:#edf5ff;color:var(--navy);font-size:.88rem}.setting-walkthrough summary::-webkit-details-marker{display:none}.setting-walkthrough summary span{font-weight:800}.setting-walkthrough summary b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--blue);white-space:nowrap}.setting-walkthrough ol{counter-reset:key-step;list-style:none;margin:0;padding:8px 14px 14px}.setting-walkthrough li{counter-increment:key-step;position:relative;padding:12px 0 12px 42px;border-bottom:1px dashed var(--line);min-height:44px}.setting-walkthrough li:last-child{border-bottom:0}.setting-walkthrough li:before{content:counter(key-step);position:absolute;left:0;top:10px;width:28px;height:28px;border-radius:9px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:900;font-size:.8rem}.setting-walkthrough li>b{display:block;font-size:.9rem;margin-bottom:5px}.setting-walkthrough li p{margin:0;color:#526177;font-size:.84rem;line-height:1.7}.button-key{display:inline-flex!important;align-items:center;justify-content:center;background:#182338!important;color:#fff!important;border:1px solid #34435b;border-bottom:3px solid #050a12;border-radius:7px;padding:2px 7px!important;margin:1px 2px!important;font:800 .74rem/1.5 -apple-system,BlinkMacSystemFont,"Noto Sans Thai",sans-serif!important;white-space:nowrap}.screen{display:inline-block;background:#1c231f;color:#ff463f;border-radius:5px;padding:2px 7px;font:800 .78rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}.param-card .setting-walkthrough{margin-top:13px}.param-card .setting-walkthrough:not([open]) summary{background:#f6f9fd}
@media(min-width:640px){.app-shell{padding:24px}.model-grid{grid-template-columns:repeat(4,1fr)}.quick-grid{grid-template-columns:1fr 1fr}.bottom-nav{left:50%;right:auto;transform:translateX(-50%);width:520px;border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0}.topbar{padding-left:max(18px,calc((100% - 760px)/2));padding-right:max(18px,calc((100% - 760px)/2))}}
@media(max-width:639px){.hero-grid{grid-template-columns:1fr}.hero-product{min-height:190px;margin-top:2px}.hero-product img{height:190px}.hero-product-label{right:4px}.hero{padding:20px}}
@media(max-width:350px){.app-shell{padding-left:11px;padding-right:11px}.model-card{padding:12px}.bottom-nav button{font-size:.62rem}.brand-logo{width:98px}.hero-product,.hero-product img{height:165px;min-height:165px}.solar-flow{grid-template-columns:1fr;}.solar-arrow{transform:rotate(90deg)}}
.terminal-sketch{display:grid;grid-template-columns:1fr;gap:8px;margin:14px 0;padding:14px;background:#071b38;color:#fff;border-radius:16px}.terminal-sketch div{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#102c57;border:1px solid #315d98;border-radius:11px;padding:10px 12px}.terminal-sketch div b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#72d9ff}.terminal-sketch div span{font-size:.8rem;color:#c9dbf3}.terminal-sketch i{text-align:center;color:#b8c9df;font-style:normal;font-size:.82rem}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mode-grid article{background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px}.mode-grid article b{color:var(--navy)}.mode-grid article p{margin:6px 0 0;color:var(--muted);font-size:.85rem;line-height:1.55}@media(max-width:430px){.mode-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){button{transition:transform .14s ease,background .14s ease}button:active{transform:scale(.97)}}

/* ─── AXION voice assistant (floating button + panel) ───────────────────
   Purely additive: lives outside #app, never touched by render(). */
.axion-fab{position:fixed;z-index:9000;right:16px;bottom:calc(90px + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:linear-gradient(135deg,#1769e0,#07152f);box-shadow:0 10px 26px rgba(7,21,47,.4),0 0 0 6px rgba(23,105,224,.14);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:auto}
.axion-fab:active{cursor:grabbing}
.axion-fab img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.axion-fab:before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(76,200,245,.55);animation:axionRing 2.6s ease-out infinite}
@keyframes axionRing{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@media(prefers-reduced-motion:reduce){.axion-fab:before{animation:none}}

.axion-panel{position:fixed;inset:0;z-index:9500;display:none;align-items:flex-end;justify-content:center;background:rgba(4,10,22,.55);backdrop-filter:blur(2px)}
.axion-panel.show{display:flex}
.axion-panel-inner{width:100%;max-width:520px;max-height:min(100%,720px);display:flex;flex-direction:column;background:linear-gradient(180deg,#0d1e38,#071226);color:#eaf2ff;border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.45);padding-bottom:env(safe-area-inset-bottom)}
.axion-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.axion-panel-title b{display:block;font-size:1.05rem;letter-spacing:.02em}
.axion-panel-title small{display:block;color:#9fb3cc;font-size:.78rem;margin-top:2px}
.axion-close{width:34px;height:34px;border-radius:11px;border:0;background:rgba(255,255,255,.09);color:#fff;font-size:1rem}
.axion-chat{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.axion-msg{max-width:86%;padding:10px 13px;border-radius:15px;font-size:.9rem;line-height:1.55}
.axion-msg.user{align-self:flex-end;background:#1769e0;color:#fff;border-bottom-right-radius:5px}
.axion-msg.bot{align-self:flex-start;background:rgba(255,255,255,.08);border:1px solid rgba(76,200,245,.25);border-bottom-left-radius:5px}
.axion-msg.bot b{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#4cc8f5;margin-bottom:3px}
.axion-controls{display:flex;align-items:center;gap:9px;padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.08)}
.axion-mic-wrap{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px}
.axion-mic{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:#1c2c4a;color:#fff;font-size:1.25rem;display:grid;place-items:center;touch-action:none;-webkit-user-select:none;user-select:none}
.axion-mic.listening{background:#1fae5c;box-shadow:0 0 0 0 rgba(31,174,92,.6);animation:axionPulse 1.3s ease-out infinite}
@keyframes axionPulse{0%{box-shadow:0 0 0 0 rgba(31,174,92,.55)}100%{box-shadow:0 0 0 14px rgba(31,174,92,0)}}
.axion-wave{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:18px;width:48px;opacity:0;transition:opacity .15s ease}
.axion-wave.show{opacity:1}
.axion-wave span{display:block;width:3px;height:18px;border-radius:2px;background:#1fae5c;transform:scaleY(.15);transform-origin:bottom;transition:transform .07s linear}
.axion-form{flex:1;display:flex;gap:8px}
.axion-form input{flex:1;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;border-radius:13px;padding:12px 13px;font-size:.92rem;outline:none}
.axion-form input::placeholder{color:#7f92ad}
.axion-form input:focus{border-color:#4cc8f5}
.axion-send{flex:none;width:44px;height:44px;border-radius:12px;border:0;background:#4cc8f5;color:#03101c;font-size:1.05rem;font-weight:900}
@media(min-width:640px){.axion-fab{right:calc((100% - 760px)/2 + 24px)}}