@font-face{font-family:CardX;src:url(/assets/CardX-Regular-CRWBVvQK.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:CardX;src:url(/assets/CardX-SemiBold-5QIexeZY.otf) format("opentype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:CardX;src:url(/assets/CardX-Bold-COgeCQLA.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:CardX;src:url(/assets/CardX-Italic-Bfq6EAfM.otf) format("opentype");font-weight:400;font-style:italic;font-display:swap}:root{--color-cardx-sierra: #5c88da;--color-cardx-dark-blue: #1d428a;--color-cardx-aqua: #05c3de;--color-background-page: #ffffff;--color-background-surface: #f7fafe;--color-background-soft: #eef4fd;--color-border: #e3eaf7;--color-border-strong: #c6d3ec;--color-text-primary: var(--color-cardx-dark-blue);--color-text-muted: #637381;--color-text-inverse: #ffffff;--color-action-primary: var(--color-cardx-dark-blue);--color-action-primary-hover: #17376f;--color-focus-ring: var(--color-cardx-sierra);--color-status-success: #16a34a;--color-status-success-text: #166534;--color-status-danger: #dc2626;--font-display: "CardX", "Sarabun", "Noto Sans Thai", system-ui, sans-serif;--font-body: "Sarabun", "CardX", "Noto Sans Thai", system-ui, sans-serif;--radius-sm: 8px;--radius-card: 24px;--radius-pill: 999px}:root{font-family:var(--font-body);font-size:15px;color:var(--color-text-primary);background:var(--color-background-surface);font-synthesis:none;line-height:1.65}*{box-sizing:border-box}body{margin:0;min-width:320px}button,a{-webkit-tap-highlight-color:transparent}.shell{width:min(100% - 48px,900px);margin:0 auto;padding:36px 0}header{display:flex;justify-content:space-between;align-items:center;gap:20px}.wordmark{display:inline-flex;text-decoration:none;flex-shrink:0}.wordmark img{display:block;width:160px;height:auto}.environment{color:var(--color-text-muted);font-size:12px}.intro{margin:76px 0 36px}.eyebrow{font-family:var(--font-display);color:var(--color-text-muted);font-size:12px;font-weight:700;letter-spacing:.06em}h1{margin:12px 0;font-family:var(--font-display);font-weight:700;font-size:clamp(28px,5vw,38px);line-height:1.4;letter-spacing:-.02em;text-wrap:balance}.description{margin:0;color:var(--color-text-muted);text-wrap:pretty}.panel{max-width:620px;padding:30px;background:var(--color-background-page);border:1px solid var(--color-border);border-radius:var(--radius-card)}.panel-heading{display:flex;gap:16px;align-items:flex-start}.step{border:1px solid var(--color-border);padding:6px 10px;border-radius:var(--radius-sm);font-size:12px;color:var(--color-text-muted)}h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:17px}.panel-heading p{margin:4px 0 0;color:var(--color-text-muted);font-size:14px}.setup-list{margin:24px 0;font-size:14px}.setup-list div{display:flex;gap:20px;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--color-border)}dt{color:var(--color-text-muted)}dd{margin:0;text-align:right}.connection{font-size:14px}.connected{color:var(--color-status-success-text)}.failed{color:var(--color-status-danger)}button{width:100%;min-height:44px;border:1px solid transparent;border-radius:var(--radius-pill);padding:13px 20px;background:var(--color-action-primary);color:var(--color-text-inverse);font:inherit;font-family:var(--font-display);font-size:14px;font-weight:600;cursor:pointer}button:hover:not(:disabled),button:active:not(:disabled){background:var(--color-action-primary-hover)}button:disabled{background:var(--color-background-surface);color:var(--color-text-muted);border-color:var(--color-border-strong);cursor:wait}:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:4px}::selection{background:var(--color-background-soft);color:var(--color-text-primary)}footer{margin-top:28px;color:var(--color-text-muted);font-size:13px}@media(max-width:540px){.shell{width:calc(100% - 32px);padding-top:24px}header{align-items:flex-start;flex-direction:column;gap:12px}.intro{margin-top:40px}.panel{padding:22px}.setup-list div{flex-direction:column;gap:4px}dd{text-align:left}}