@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--brand-1:#6366f1;--brand-2:#22d3ee;--brand-3:#a855f7;--brand-grad:linear-gradient(135deg, var(--brand-1), var(--brand-2));--font-body:"IBM Plex Sans Thai", system-ui, -apple-system, sans-serif;--font-head:"Space Grotesk", "IBM Plex Sans Thai", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--radius-sm:8px;--radius:14px;--radius-lg:22px;--shadow-sm:0 1px 2px #0000000f;--shadow:0 8px 30px #02061714;--shadow-lg:0 24px 60px #0206172e;--maxw:1160px;--header-h:68px;--ease:cubic-bezier(.22, 1, .36, 1)}:root,:root[data-theme=light]{--bg:#f7f8fc;--bg-elev:#fff;--bg-soft:#eef1f8;--surface:#ffffffb8;--border:#e4e8f2;--border-strong:#d4dae8;--text:#10152b;--text-soft:#4a5270;--text-mute:#7b849e;--glow:#6366f124;--code-bg:#f2f4fb}:root[data-theme=dark]{--bg:#080b16;--bg-elev:#0f1424;--bg-soft:#141a2e;--surface:#141a2e99;--border:#222a44;--border-strong:#303a5c;--text:#eef1fb;--text-soft:#b3bcd8;--text-mute:#7c86a6;--glow:#6366f147;--code-bg:#0d1220}*,:before,:after{box-sizing:border-box}*{margin:0}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%;touch-action:manipulation}body{font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100vh;transition:background .3s var(--ease), color .3s var(--ease);line-height:1.65;overflow-x:hidden}img,picture,svg,video{max-width:100%;display:block}.lucide{vertical-align:-.14em;flex-shrink:0;display:inline-block}:where(.a-btn,.navi,.cmdk-trigger)>.lucide{vertical-align:middle}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:-.02em;font-weight:700;line-height:1.15}code,pre,kbd{font-family:var(--font-mono)}::selection{background:var(--brand-1);color:#fff}.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}.section{padding-block:clamp(48px,8vw,96px)}.eyebrow{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-1);align-items:center;gap:8px;font-size:.8rem;font-weight:500;display:inline-flex}:root[data-theme=dark] .eyebrow{color:var(--brand-2)}.section-title{margin-top:10px;font-size:clamp(1.7rem,4vw,2.6rem)}.section-sub{color:var(--text-soft);max-width:60ch;margin-top:12px}.gradient-text{background:var(--brand-grad);color:#0000;background-clip:text}.btn{transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s;white-space:nowrap;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:12px 22px;font-weight:600;display:inline-flex}.btn:active{transform:translateY(1px)scale(.99)}.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:0 8px 24px var(--glow)}.btn-primary:hover{box-shadow:0 14px 34px var(--glow);transform:translateY(-2px)}.btn-ghost{background:var(--bg-elev);color:var(--text);border-color:var(--border-strong)}.btn-ghost:hover{border-color:var(--brand-1);color:var(--brand-1)}.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}.reveal{opacity:0;transition:opacity .7s var(--ease), transform .7s var(--ease);transform:translateY(22px)}.reveal.in{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition-duration:.001ms!important;animation-duration:.001ms!important}.reveal{opacity:1;transform:none}}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip:focus{z-index:1000;clip:auto;background:var(--brand-1);color:#fff;width:auto;height:auto;box-shadow:var(--shadow-lg);border-radius:8px;margin:0;padding:10px 18px;font-weight:600;position:fixed;top:10px;left:10px;overflow:visible}.site-announce{text-align:center;padding:10px 16px;font-size:.9rem;font-weight:500}.site-announce.info{background:color-mix(in srgb, var(--brand-1) 16%, var(--bg-elev));color:var(--text);border-bottom:1px solid var(--brand-1)}.site-announce.warning{color:#d97706;background:#f59e0b29;border-bottom:1px solid #f59e0b66}:root[data-theme=dark] .site-announce.warning{color:#fbbf24}.site-announce.success{color:#10b981;background:#10b98124;border-bottom:1px solid #10b98166}.a-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:22px}.a-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.a-between{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;display:flex}.a-grid{gap:16px;display:grid}.a-muted{color:var(--text-mute);font-size:.9rem}.a-field{flex-direction:column;gap:6px;margin-bottom:16px;display:flex}.a-field>label{color:var(--text-soft);font-size:.86rem;font-weight:600}.a-field .hint{color:var(--text-mute);font-size:.78rem;font-weight:400}.a-input,.a-textarea,.a-select{font:inherit;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg);color:var(--text);width:100%;padding:10px 13px}.a-textarea{resize:vertical;min-height:120px;line-height:1.6;font-family:var(--font-mono);font-size:.9rem}.a-input:focus,.a-textarea:focus,.a-select:focus{border-color:var(--brand-1);outline:none}a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px;border-radius:4px}.a-cols{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=640px){.a-cols{grid-template-columns:1fr}}.a-btn{cursor:pointer;transition:transform .15s var(--ease), box-shadow .15s, border-color .15s, color .15s;border:1px solid #0000;border-radius:999px;align-items:center;gap:7px;padding:10px 18px;font-size:.9rem;font-weight:600;display:inline-flex}.a-btn:active{transform:translateY(1px)}.a-btn.primary{background:var(--brand-grad);color:#fff;box-shadow:0 6px 18px var(--glow)}.a-btn.ghost{background:var(--bg-elev);color:var(--text);border-color:var(--border-strong)}.a-btn.ghost:hover{border-color:var(--brand-1);color:var(--brand-1)}.a-btn.danger{background:var(--bg-elev);color:#ef4444;border-color:var(--border-strong)}.a-btn.danger:hover{background:#ef444414;border-color:#ef4444}.a-btn.sm{padding:6px 13px;font-size:.82rem}.a-table{border-collapse:collapse;width:100%}.a-table th{text-align:left;text-transform:uppercase;letter-spacing:.04em;color:var(--text-mute);border-bottom:1px solid var(--border);padding:10px 12px;font-size:.78rem}.a-table td{border-bottom:1px solid var(--border);vertical-align:middle;padding:12px}.a-table tr:hover td{background:var(--bg-soft)}.a-table .t-title{font-weight:600}.a-tablewrap{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-elev);overflow-x:auto}.a-badge{font-family:var(--font-mono);white-space:nowrap;border-radius:999px;padding:3px 9px;font-size:.72rem;font-weight:600}.a-badge.green{color:#10b981;background:#10b98126}.a-badge.gray{background:var(--bg-soft);color:var(--text-mute)}.a-badge.indigo{color:#6366f1;background:#6366f126}.a-badge.amber{color:#d97706;background:#f59e0b29}.a-stat{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.a-stat .n{font-family:var(--font-head);font-size:2rem;font-weight:700}.a-stat .l{color:var(--text-mute);margin-top:2px;font-size:.86rem}.a-note{color:#b45309;border-radius:var(--radius-sm);background:#f59e0b1a;border:1px solid #f59e0b4d;padding:12px 16px;font-size:.88rem}:root[data-theme=dark] .a-note{color:#fbbf24}.a-ok{color:#10b981;border-radius:var(--radius-sm);background:#10b9811f;border:1px solid #10b9814d;padding:12px 16px;font-size:.88rem}.as-bar{border-radius:var(--radius-sm);color:var(--text);background:#f59e0b1a;border:1px solid #f59e0b59;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;padding:12px 16px;font-size:.9rem;display:flex}.as-acts{gap:8px;display:flex}.as-msg{align-items:center;gap:7px;display:inline-flex}
