:root{color-scheme:light;--ink:#19202d;--muted:#737c8a;--line:#e6e9ee;--blue:#2b52e9;--soft:#f6f7fa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:#fff;color:var(--ink);font:16px/1.7 'Noto Sans Thai',sans-serif}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #668aff;outline-offset:4px}input:focus,textarea:focus{outline:2px solid #96acff;outline-offset:1px;border-color:var(--blue)}.wrap{width:min(1080px,calc(100% - 48px));margin-inline:auto}.header{height:100px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}.brand{display:inline-flex;align-items:center;gap:7px;font:800 19px Inter,Arial,sans-serif;letter-spacing:-.5px;white-space:nowrap}.brand-light{font-weight:400}.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--blue);color:#fff;font-size:25px;margin-right:6px}.header nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:500}.nav-cta{border:1px solid var(--line);padding:9px 16px;border-radius:8px;display:flex;gap:20px}.nav-cta:hover{border-color:var(--blue);color:var(--blue)}.intro{text-align:center;padding:66px 0 48px}.eyebrow{font:600 11px/1.5 Inter,Arial,sans-serif;color:var(--blue);letter-spacing:2px;margin:0 0 16px}.intro h1{font-size:clamp(36px,4.5vw,56px);line-height:1.35;letter-spacing:-1.8px;font-weight:600;margin:0 0 18px}.intro h1 span{color:var(--blue)}.intro-copy{color:var(--muted);margin:0;font-size:16px;line-height:1.9}.intro-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;font-size:12px;color:#6d7684;margin:24px 0 0}.intro-meta span:before{content:'✓';color:var(--blue);margin-right:7px}.workspace{max-width:960px;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 18px 55px #19202d05}.workspace-heading{padding:23px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.workspace-heading .eyebrow{font-size:10px;margin-bottom:5px}.workspace-heading h2{font-size:21px;margin:0;font-weight:600}.workspace-note{font-size:12px;color:var(--muted)}.builder-grid{display:grid;grid-template-columns:1.1fr 1fr}.editor{padding:30px;border-right:1px solid var(--line);min-width:0}.field-heading{display:flex;align-items:center;gap:10px;margin-bottom:18px}.field-heading h3{font-size:15px;font-weight:600;margin:0}.step{font:500 11px Inter,sans-serif;color:#8994a6;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);width:24px;height:24px;border-radius:6px}.editor>label{display:block;margin:14px 0 7px;font-size:13px;color:#586170}.editor input:not([type=radio]),.editor textarea{display:block;width:100%;border:1px solid #dfe3ea;border-radius:8px;background:white;color:var(--ink);padding:11px 13px;font-size:14px;min-width:0}.editor textarea{resize:vertical;min-height:80px}.editor input::placeholder,.editor textarea::placeholder{color:#9199a6}.theme-field{border:0;padding:0;margin:25px 0}.theme-field legend{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:600;margin-bottom:14px}.themes{display:flex;gap:8px;flex-wrap:wrap}.themes label{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line);border-radius:8px;font-size:13px;cursor:pointer}.themes label:has(input:checked){border-color:var(--blue);background:#f2f5ff}.themes input{accent-color:var(--blue);margin:0}.theme-dot{width:13px;height:13px;border:1px solid #d5dbe7;border-radius:50%}.theme-dot.light{background:white}.theme-dot.dark{background:#1d2532}.theme-dot.blue{background:#2b52e9}.links-heading{gap:8px;margin-bottom:10px}.links-heading h3{flex:1}.text-button{background:none;border:0;color:var(--blue);font-size:13px;padding:5px 0}.link-row{position:relative;margin-bottom:14px;padding:13px 36px 13px 12px;background:var(--soft);border-radius:9px}.link-row label{font-size:12px;color:#687180;display:block;margin-bottom:4px}.link-row input{margin-bottom:8px}.link-row input:last-of-type{margin-bottom:0}.remove-link{position:absolute;right:7px;top:10px;border:0;background:none;color:#748095;font-size:23px;padding:3px}.primary{border:0;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 17px;border-radius:8px;font-size:15px;font-weight:500;margin-top:18px}.primary:hover{background:var(--blue)}.editor-note{font-size:11px;line-height:1.8;text-align:center;color:var(--muted);margin:12px 0 0}.error{font-size:13px;color:#b5223f;margin:8px 0}.error:empty{display:none}.preview-panel{background:#f6f7fa;padding:27px 35px;min-width:0}.preview-top{display:flex;align-items:center;justify-content:space-between;color:#7e8795;font-size:12px;margin-bottom:22px}.preview-dots{letter-spacing:3px}.bio-preview{--bg:#fff;--fg:#1e2532;--button:#202938;--button-text:#fff;background:var(--bg);color:var(--fg);width:100%;max-width:305px;margin:auto;padding:36px 22px 24px;border-radius:20px;min-height:440px;text-align:center;box-shadow:0 12px 35px #19202d08;overflow-wrap:anywhere;border:1px solid #e6e9ee}.bio-preview.dark{--bg:#202733;--fg:#fff;--button:#353f50}.bio-preview.blue{--bg:#eaf0ff;--fg:#1c3384;--button:#2b52e9}.avatar{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 19px;background:var(--button);color:white;border-radius:50%;font:600 25px Inter,sans-serif}.bio-preview h2{font-size:21px;font-weight:600;margin:0 0 8px;line-height:1.5}.bio-preview>p{font-size:13px;line-height:1.7;margin:0 0 24px;opacity:.72;white-space:pre-wrap}.bio-preview a,.empty-link{display:flex;align-items:center;justify-content:center;min-height:47px;border-radius:8px;margin-bottom:10px;padding:12px 10px;background:var(--button);color:var(--button-text);font-size:13px}.empty-link{opacity:.36}.preview-brand{font:10px Inter,sans-serif;opacity:.5;margin-top:40px;letter-spacing:.1px}.preview-brand strong{margin-left:4px}.preview-footnote{font-size:11px;color:#8c94a1;text-align:center;margin:21px 0 0}.how{padding:84px 0}.section-heading{text-align:center}.section-heading .eyebrow{margin-bottom:10px}.section-heading h2{font-size:29px;font-weight:600;margin:0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:42px}.steps article{border-top:1px solid var(--line);padding-top:23px}.steps article>span{font:500 12px Inter,sans-serif;color:var(--blue)}.steps h3{font-size:19px;font-weight:500;margin:17px 0 10px}.steps p{font-size:14px;color:var(--muted);margin:0;line-height:1.9}.contact{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0;display:flex;justify-content:space-between;align-items:center;gap:35px}.contact .eyebrow{margin-bottom:10px}.contact h2{font-size:25px;font-weight:600;margin:0 0 7px}.contact p{font-size:14px;color:var(--muted);margin:0}.contact-methods{display:grid;gap:12px;min-width:280px}.contact-methods>a{display:grid;grid-template-columns:1fr auto;gap:4px 22px;padding:15px 20px;background:var(--soft);border:1px solid var(--line);border-radius:10px}.contact-methods>a:hover{border-color:var(--blue)}.contact-label{font-size:12px;color:var(--muted);grid-column:1}.contact-methods strong{font:500 17px Inter,sans-serif;overflow-wrap:anywhere;min-width:0;grid-column:1}.contact-arrow{grid-column:2;grid-row:1/3;align-self:center;color:var(--blue);font-size:22px}.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px 0}.footer>.brand{font-size:15px}.footer>span{font:12px Inter,sans-serif;color:#8c94a1}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;border-radius:10px;padding:13px 22px;font-size:14px;max-width:calc(100% - 30px);z-index:10}.skip-link{position:absolute;left:15px;top:-100px;background:white;padding:10px;z-index:20}.skip-link:focus{top:10px}@media(max-width:760px){.wrap{width:calc(100% - 32px)}.header{height:78px;gap:14px}.brand{font-size:16px;gap:5px}.mark{width:29px;height:29px;font-size:22px;margin-right:3px}.header nav{gap:10px}.header nav>a:not(.nav-cta){display:none}.nav-cta{font-size:13px;gap:12px;padding:8px 12px}.intro{padding:45px 0 35px}.intro h1{font-size:38px;letter-spacing:-1.2px}.intro-copy{font-size:14px}.intro-meta{gap:15px;font-size:11px}.desktop{display:none}.workspace-heading{padding:21px}.workspace-heading h2{font-size:19px}.workspace-note{display:none}.builder-grid{grid-template-columns:1fr}.editor{padding:23px;border-right:0}.preview-panel{border-top:1px solid var(--line);padding:25px}.how{padding:55px 0}.section-heading h2{font-size:25px}.steps{grid-template-columns:1fr;gap:25px;margin-top:28px}.steps article{padding-top:16px}.steps h3{margin:9px 0}.contact{flex-direction:column;align-items:stretch;padding:32px 0;gap:25px}.contact h2{font-size:23px}.contact-methods{min-width:0}.footer{flex-wrap:wrap;gap:15px}.footer>span{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
