@font-face{font-family:Hanken Grotesk;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/HankenGrotesk-Variable.woff2) format("woff2"),url(/fonts/HankenGrotesk-VariableFont_wght.ttf) format("truetype")}@font-face{font-family:Hanken Grotesk;font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/HankenGrotesk-Italic-Variable.woff2) format("woff2"),url(/fonts/HankenGrotesk-Italic-VariableFont_wght.ttf) format("truetype")}@font-face{font-family:DM Sans;font-style:normal;font-weight:100 1000;font-display:swap;src:url(/fonts/DMSans-Variable.woff2) format("woff2"),url(/fonts/DMSans-VariableFont_opsz_wght.ttf) format("truetype")}@font-face{font-family:DM Sans;font-style:italic;font-weight:100 1000;font-display:swap;src:url(/fonts/DMSans-Italic-Variable.woff2) format("woff2"),url(/fonts/DMSans-Italic-VariableFont_opsz_wght.ttf) format("truetype")}:root{--ink:#0a0a0c;--panel:#121216;--panel-2:#17171d;--raise:#1e1e26;--gold:#c9a227;--gold-hi:#e8cb6b;--gold-dim:rgba(201,162,39,.16);--line:hsla(46,73%,66%,.14);--line-soft:hsla(0,0%,100%,.06);--tx:#f1eee6;--tx-mid:#a5a29b;--tx-dim:#6e6b66;--ok:#4fa97c;--warn:#d8873b;--lock:#8c5a5a;--r:10px;--disp:"Hanken Grotesk","Noto Sans Thai",system-ui,sans-serif;--font:"DM Sans","Noto Sans Thai",system-ui,sans-serif;--mono:"DM Sans","Noto Sans Thai",system-ui,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{background:var(--ink);color:var(--tx);font-family:var(--font);font-weight:400;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}.disp,h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.25;letter-spacing:-.01em}.mono{font-family:var(--mono);font-weight:400}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:none}a{color:inherit;text-decoration:none}::selection{background:var(--gold);color:#000}:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:4px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--ink)}::-webkit-scrollbar-thumb{background:#26262e;border-radius:8px;border:3px solid var(--ink)}.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:.85}.muted{color:var(--tx-mid)}.dim{color:var(--tx-dim)}#login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}.slate{position:relative;background:radial-gradient(120% 80% at 15% 0,rgba(201,162,39,.1),transparent 60%),linear-gradient(160deg,#0e0e12,#08080a);border-right:1px solid var(--line);padding:56px;justify-content:space-between;overflow:hidden}.perf,.slate{display:flex;flex-direction:column}.perf{position:absolute;top:0;bottom:0;width:26px;justify-content:space-around;padding:14px 0;opacity:.5}.perf.l{left:14px}.perf.r{right:14px}.perf i{display:block;height:26px;border:1px solid var(--line);border-radius:4px}.slate-mark{font-family:var(--disp);font-weight:700;font-size:clamp(38px,5vw,62px);letter-spacing:-.03em;line-height:1}.slate-mark span{color:var(--gold)}.slate-lines{margin-top:28px;border-top:1px solid var(--line)}.slate-row{display:grid;grid-template-columns:96px 1fr;grid-gap:16px;gap:16px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}.slate-row b{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.8}.login-side{padding:56px clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center;max-width:560px}.field{margin-bottom:14px}.field label{display:block;font-size:12px;color:var(--tx-mid);margin-bottom:6px}.inp{width:100%;background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);padding:11px 13px;color:var(--tx);transition:.15s}.inp:focus{border-color:var(--gold);outline:none;background:var(--panel-2)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);color:#0a0a0c;font-weight:600;font-family:var(--font);padding:11px 20px;border-radius:var(--r);transition:.15s}.btn:hover{background:var(--gold-hi)}.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line)}.btn.ghost:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(201,162,39,.06)}.btn.sm{padding:7px 13px;font-size:12.5px;border-radius:8px}.btn.block{width:100%}.demo-list{margin-top:22px;border-top:1px solid var(--line-soft);padding-top:18px}.demo{width:100%;text-align:left;display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r);margin-bottom:8px;transition:.15s}.demo:hover{border-color:var(--gold);background:rgba(201,162,39,.05)}.err{color:#e07070;font-size:12.5px;min-height:18px;margin-bottom:6px}#app{display:none;min-height:100vh;grid-template-columns:238px 1fr}#app.on{display:grid}.side{background:linear-gradient(180deg,#0d0d11,#0a0a0c);border-right:1px solid var(--line-soft);padding:18px 0;position:-webkit-sticky;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}.brand{padding:0 20px 18px;border-bottom:1px solid var(--line-soft);margin-bottom:14px;text-align:center}.brand .m{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.02em}.brand .m span{color:var(--gold)}.brand .s{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-dim);margin-top:3px}.navgrp{padding:0 12px;margin-bottom:6px}.navgrp>p{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-dim);padding:12px 8px 6px}.nav{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--tx-mid);font-size:13.5px;transition:.14s;text-align:left;border-left:2px solid transparent}.nav:hover{background:hsla(0,0%,100%,.04);color:var(--tx)}.nav.on{background:rgba(201,162,39,.1);color:var(--gold-hi);border-left-color:var(--gold)}.nav .ic{width:16px;text-align:center;font-size:13px;opacity:.9}.nav .ct{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--tx-dim)}.side-foot{margin-top:auto;padding:14px 20px 0;border-top:1px solid var(--line-soft);font-size:11.5px}.main{min-width:0;flex-direction:column}.main,.top{display:flex}.top{position:-webkit-sticky;position:sticky;top:0;z-index:20;background:rgba(10,10,12,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft);padding:12px 26px;align-items:center;gap:14px}.search{flex:1 1;max-width:620px;position:relative}.search input{width:100%;background:var(--panel);border:1px solid var(--line-soft);border-radius:999px;padding:10px 16px 10px 40px;font-size:13.5px}.search input:focus{border-color:var(--gold);outline:none}.search .sic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--tx-dim);font-size:13px}.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line-soft);color:var(--tx-mid);white-space:nowrap}.chip.g{border-color:var(--gold-dim);color:var(--gold);background:rgba(201,162,39,.07)}.chip.l{border-color:rgba(140,90,90,.4);color:#c88c8c;background:rgba(140,90,90,.1)}.chip.ok{border-color:rgba(79,169,124,.35);color:#6fbf97;background:rgba(79,169,124,.08)}.chip.w{border-color:rgba(216,135,59,.35);color:#e0a063;background:rgba(216,135,59,.08)}.who{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--line-soft)}.av{width:32px;height:32px;border-radius:8px;background:linear-gradient(140deg,var(--gold),#8a6e16);color:#0a0a0c;display:grid;place-items:center;font-family:var(--font);font-weight:700;font-size:12px;flex-shrink:0}.wrap{padding:26px 26px 60px;max-width:1320px;width:100%}.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:22px}.phead h1{font-size:clamp(21px,2.4vw,28px)}.phead p{color:var(--tx-mid);font-size:13px;margin-top:4px;max-width:620px}.grid{display:grid;grid-gap:14px;gap:14px}.g2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.g3{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.g4{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px;transition:.16s;position:relative}.card:hover{border-color:var(--gold-dim);background:var(--panel-2)}.card h3{font-size:15px;margin-bottom:3px}.card .sub{font-size:12.5px;color:var(--tx-mid)}.card .code{font-family:var(--mono);font-size:10.5px;color:var(--gold);opacity:.75;letter-spacing:.04em}.stat{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);padding:15px}.stat b{display:block;font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--gold-hi)}.stat span{font-size:11.5px;color:var(--tx-mid)}.bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}.tab{padding:6px 13px;border-radius:999px;border:1px solid var(--line-soft);font-size:12.5px;color:var(--tx-mid);transition:.14s}.tab:hover{border-color:var(--gold-dim);color:var(--tx)}.tab.on{background:var(--gold);border-color:var(--gold);color:#0a0a0c;font-weight:500}table{width:100%;border-collapse:collapse}th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dim);font-weight:400;padding:0 12px 9px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:13px}tr.row:hover td{background:hsla(0,0%,100%,.025)}tr.locked td{opacity:.55}.tw{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--panel);padding:14px 4px 4px}.swatch{height:76px;border-radius:8px;border:1px solid var(--line-soft);margin-bottom:8px;cursor:pointer;position:relative}.swatch:active{transform:scale(.99)}.logo-tile{height:104px;border-radius:8px;display:grid;place-items:center;margin-bottom:10px;border:1px solid var(--line-soft);font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.02em}.empty{text-align:center;padding:54px 20px;border:1px dashed var(--line);border-radius:var(--r);color:var(--tx-mid)}.empty b{display:block;font-family:var(--font);color:var(--tx);font-size:15px;margin-bottom:5px}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--raise);border:1px solid var(--gold-dim);color:var(--tx);padding:11px 18px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:.22s;z-index:99}.toast.on{opacity:1;transform:translate(-50%)}.mdl{position:fixed;inset:0;background:rgba(5,5,7,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:60;display:none;place-items:center;padding:20px}.mdl.on{display:grid}.mdl-box{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;max-width:520px;width:100%;padding:24px;max-height:86vh;overflow:auto}.acc{display:flex;gap:9px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}.acc i{font-style:normal;color:var(--gold);font-family:var(--mono);font-size:10.5px;padding-top:2px;min-width:22px}.hero{border:1px solid var(--line);border-radius:14px;padding:22px;background:radial-gradient(90% 140% at 100% 0,rgba(201,162,39,.1),transparent 55%),var(--panel);margin-bottom:22px;gap:24px;align-items:center}.hero,.hero .qa{display:flex;flex-wrap:wrap}.hero .qa{gap:8px;margin-top:12px}.lnk{color:inherit;border-bottom:1px solid transparent;transition:.14s;cursor:pointer}.lnk:hover{color:var(--gold-hi);border-bottom-color:var(--gold-dim)}.kv{grid-template-columns:190px 1fr;padding:10px 0;font-size:13px}.kv b{font-weight:500;color:var(--tx-mid);font-size:12.5px}.att{margin-bottom:8px;background:var(--ink)}.att .ic{width:30px;height:30px;border-radius:6px;background:var(--gold-dim);display:grid;place-items:center}.drop{border-radius:10px;padding:15px;transition:.14s}.drop:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(201,162,39,.04)}button.card{border:1px solid var(--line-soft);font:inherit;color:inherit}@media(max-width:820px){.kv{grid-template-columns:1fr;gap:2px}}@media(max-width:900px){#login{grid-template-columns:1fr}.slate{display:none}#app.on{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;z-index:50;width:238px;transform:translateX(-100%);transition:.2s}.side.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.7)}.wrap{padding:18px 16px 60px}.top{padding:10px 14px}.who .nm{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.mdl-box{max-width:700px}.att{display:flex;gap:10px;align-items:center;padding:9px 11px;border:1px solid var(--line-soft);border-radius:8px;margin-bottom:7px;background:var(--panel)}.att .ic{color:var(--gold);font-size:13px;flex-shrink:0}.drop{border:1px dashed var(--line);border-radius:9px;padding:15px 14px;text-align:center;font-size:12.5px;color:var(--tx-mid);transition:.15s;background:rgba(201,162,39,.03);cursor:pointer}.drop.over,.drop:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(201,162,39,.08)}.kv{display:grid;grid-template-columns:132px 1fr;grid-gap:12px;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px;align-items:start}.kv:last-child{border-bottom:none}.kv b{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);opacity:.85;padding-top:2px}@media(max-width:900px){.kv{grid-template-columns:1fr;gap:2px}}.brand .mark{display:block;height:30px;width:auto;margin:0 auto 3px;opacity:.96}.slate .mark-lg{display:block;height:58px;width:auto;margin-bottom:6px}.logo-tile{overflow:hidden;padding:14px}.logo-tile img{max-height:58px;max-width:72%;width:auto;height:auto;object-fit:contain;display:block}.ci-tile{height:170px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:24px;border:1px solid var(--line-soft);background:#0e0e12}.ci-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.ci-tile .lb{display:none}html[data-theme=light] .ci-tile{background:#f1eee6;border-color:rgba(0,0,0,.08)}html[data-theme=light] .ci-tile .lw{display:none}html[data-theme=light] .ci-tile .lb{display:block}.prefs{display:flex;align-items:center;gap:3px;padding-right:12px;border-right:1px solid var(--line-soft)}.pref{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:6px 9px;border-radius:7px;border:1px solid transparent;color:var(--tx-dim);transition:.14s;line-height:1;background:none;cursor:pointer}.pref:hover{color:var(--gold-hi);background:rgba(201,162,39,.09)}.pref.on{color:var(--gold);border-color:var(--gold-dim);background:rgba(201,162,39,.1)}.pref-sep{width:1px;height:14px;background:var(--line-soft);margin:0 4px;display:inline-block}@media(max-width:900px){.prefs{padding-right:6px}}html[data-theme=light]{--ink:#f4f1e9;--panel:#fff;--panel-2:#fbf9f3;--raise:#fff;--gold:#96760f;--gold-hi:#7a5f09;--gold-dim:rgba(150,118,15,.2);--line:rgba(150,118,15,.26);--line-soft:rgba(20,20,15,.11);--tx:#17170f;--tx-mid:#5b584e;--tx-dim:#8a867a}html[data-theme=light] body{background:var(--ink)}html[data-theme=light] .side{background:linear-gradient(180deg,#fff,#f8f5ed)}html[data-theme=light] .top{background:hsla(44,33%,94%,.9)}html[data-theme=light] .slate{background:linear-gradient(160deg,#fff,#f4f1e9)}html[data-theme=light] .btn{background:var(--gold);color:#fff9e9}html[data-theme=light] .btn:hover{background:#b08f1d}html[data-theme=light] .btn.ghost{background:transparent;color:var(--tx)}html[data-theme=light] .btn.ghost:hover{color:var(--gold-hi);background:rgba(150,118,15,.07)}html[data-theme=light] .tab.on{color:#fff9e9}html[data-theme=light] .av{background:linear-gradient(140deg,#c9a227,#96760f);color:#fff9e9}html[data-theme=light] .brand .mark{opacity:1}html[data-theme=light] ::-webkit-scrollbar-track{background:var(--ink)}html[data-theme=light] ::-webkit-scrollbar-thumb{background:#ded8c9;border-color:var(--ink)}html[data-theme=light] ::selection{background:var(--gold);color:#fff9e9}.card,.inp,.mdl-box,.side,.stat,.top,.tw,body{transition:background-color .18s,color .18s,border-color .18s}