*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f7f6f3;--surface:#fff;--border:#00000012;--text:#18181b;--text-muted:#71717a;--accent:#4f46e5;--accent-hover:#4338ca;--accent-faint:#eef2ff;--card-bg:#f4f4f5;--card-hover:#ede9fe;--radius-lg:16px;--radius-md:10px;--radius-sm:8px;--shadow-panel:0 1px 3px #00000012, 0 1px 2px #0000000a;--shadow-card:0 1px 2px #0000000f;--ui-font:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;--thai-font:ui-sans-serif, -apple-system, system-ui, "Segoe UI", Arial, sans-serif}body{font-family:var(--ui-font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;padding-bottom:64px}.site-nav{background:var(--surface);border-bottom:1px solid var(--border);z-index:100;justify-content:space-between;align-items:center;gap:16px;height:60px;padding:0 24px;display:flex;position:sticky;top:0}.nav-logo{flex-shrink:0;align-items:center;gap:10px;text-decoration:none;display:flex}.logo-mark{background:var(--accent);color:#fff;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:1.15rem;font-weight:700;display:flex;box-shadow:0 2px 6px #4f46e54d}.nav-site-name{color:var(--text);letter-spacing:-.02em;font-size:.95rem;font-weight:700}.nav-links{align-items:center;gap:4px;display:flex}.nav-link{border-radius:var(--radius-sm);color:var(--text-muted);padding:5px 11px;font-size:.85rem;font-weight:500;text-decoration:none;transition:background .15s,color .15s}.nav-link:hover,.nav-link.active{background:var(--accent-faint);color:var(--accent)}.nav-badge{color:var(--text-muted);white-space:nowrap;background:#f4f4f5;border-radius:20px;margin-left:8px;padding:4px 10px;font-size:.75rem;font-weight:600}@media (width<=640px){.nav-site-name,.nav-badge{display:none}.site-nav{padding:0 16px}}.container{flex-direction:column;gap:24px;max-width:1020px;margin:0 auto;padding:28px 16px 0;display:flex}.tool-intro p{color:var(--text-muted);font-size:.9rem}.page-content{flex-direction:column;gap:40px;max-width:700px;padding-bottom:40px;display:flex}.page-hero h2{letter-spacing:-.03em;margin-bottom:12px;font-size:1.9rem;font-weight:700;line-height:1.2}.page-hero p{color:var(--text-muted);font-size:.95rem}.page-section{flex-direction:column;gap:12px;display:flex}.page-section h3{letter-spacing:-.02em;font-size:1.05rem;font-weight:700}.page-section p{color:#3f3f46;font-size:.925rem;line-height:1.75}.page-section a{color:var(--accent);font-weight:500;text-decoration:none}.page-section a:hover{text-decoration:underline}.example-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);flex-direction:column;gap:12px;padding:20px 24px;display:flex}.example-row{align-items:baseline;gap:16px;display:flex}.example-label{text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);flex-shrink:0;min-width:58px;font-size:.72rem;font-weight:700}.example-thai{font-family:var(--thai-font);color:var(--text);font-size:1.05rem;line-height:1.7}.example-thai.split{color:var(--accent);font-weight:500}.example-translation{color:var(--text-muted);font-size:.9rem;font-style:italic}.card-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=560px){.card-grid{grid-template-columns:1fr}}.info-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);flex-direction:column;gap:8px;padding:20px;display:flex}.info-card-icon{font-size:1.5rem}.info-card h4{font-size:.95rem;font-weight:700}.info-card p{color:#52525b;font-size:.875rem;line-height:1.7}.support-box{border-radius:var(--radius-lg);background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);flex-direction:column;gap:20px;padding:28px 28px 24px;display:flex;box-shadow:0 4px 20px #4f46e54d}.support-content{align-items:flex-start;gap:16px;display:flex}.support-icon{flex-shrink:0;font-size:2rem;line-height:1}.support-box h3{color:#fff;margin-bottom:6px;font-size:1.1rem;font-weight:700}.support-box p{color:#ffffffd1;font-size:.875rem;line-height:1.65}.btn-support{color:var(--accent);border-radius:var(--radius-sm);font-size:.9rem;font-family:var(--ui-font);background:#fff;justify-content:center;align-self:flex-start;align-items:center;padding:10px 24px;font-weight:700;text-decoration:none;transition:opacity .15s,transform .1s;display:inline-flex;box-shadow:0 2px 8px #00000026}.btn-support:hover{opacity:.92;transform:translateY(-1px)}.panels{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=640px){.panels{grid-template-columns:1fr}}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);flex-direction:column;display:flex;overflow:hidden}.panel-top{justify-content:space-between;align-items:center;padding:12px 16px 10px;display:flex}.panel-label{letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);font-size:.78rem;font-weight:600}.panel-bottom{border-top:1px solid var(--border);padding:8px 16px}.panel-bottom span{color:var(--text-muted);font-size:.75rem;font-weight:500}.btn-ghost{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);font-size:.78rem;font-family:var(--ui-font);cursor:pointer;background:0 0;padding:4px 12px;font-weight:500;transition:background .15s,color .15s,border-color .15s}.btn-ghost:hover{background:var(--card-bg);color:var(--text);border-color:#0000001f}.btn-primary{border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-size:.78rem;font-family:var(--ui-font);cursor:pointer;border:none;padding:4px 14px;font-weight:600;transition:background .15s,box-shadow .15s;box-shadow:0 1px 3px #4f46e54d}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 2px 6px #4f46e566}textarea{font-family:var(--thai-font);resize:vertical;width:100%;min-height:300px;color:var(--text);background:0 0;border:none;outline:none;flex:1;padding:4px 16px 12px;font-size:1.1rem;line-height:1.85}textarea::placeholder{color:#c4c4c7;font-family:var(--thai-font)}.output-box{background:#fafaf9;flex-direction:column;flex:1;gap:10px;min-height:300px;padding:4px 16px 12px;display:flex;overflow-y:auto}.line-block{flex-direction:column;gap:8px;display:flex}.word-line{flex-wrap:wrap;align-items:flex-start;gap:6px;display:flex}.line-divider{border:none;border-top:1px solid var(--border);margin:2px 0}.word-card{background:var(--card-bg);border-radius:var(--radius-sm);box-shadow:var(--shadow-card);cursor:default;align-items:center;padding:5px 12px;transition:background .15s,box-shadow .15s,transform .1s;display:inline-flex}.word-card:hover{background:var(--card-hover);transform:translateY(-1px);box-shadow:0 2px 8px #4f46e526}.word-thai{font-family:var(--thai-font);color:var(--text);font-size:1.1rem;font-weight:500;line-height:1.6}.line-translation{background:var(--accent-faint);color:#4338ca;border-radius:var(--radius-sm);align-self:flex-start;padding:5px 12px;font-size:.83rem;font-style:italic;font-weight:500;line-height:1.5;display:inline-block}.samples{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.samples-label{color:var(--text-muted);margin-right:2px;font-size:.8rem;font-weight:600}.sample-btn{border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:.8rem;font-family:var(--ui-font);cursor:pointer;box-shadow:var(--shadow-card);border-radius:20px;padding:5px 14px;font-weight:500;transition:border-color .15s,color .15s,background .15s}.sample-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-faint)}.ext-hero-badge{background:var(--accent-faint);color:var(--accent);letter-spacing:.05em;text-transform:uppercase;border-radius:20px;margin-bottom:14px;padding:4px 12px;font-size:.75rem;font-weight:700;display:inline-block}.btn-download{background:var(--accent);color:#fff;border-radius:var(--radius-md);align-items:center;margin-top:16px;padding:10px 22px;font-size:.9rem;font-weight:600;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;display:inline-flex;box-shadow:0 2px 8px #4f46e54d}.btn-download:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 14px #4f46e566}.hero-note{color:var(--text-muted);margin-top:10px;font-size:.8rem!important}.btn-inline{color:var(--accent);font-size:.9rem;font-weight:600;text-decoration:none;transition:opacity .15s;display:inline-block}.btn-inline:hover{opacity:.75}.mockup-section{flex-direction:column;gap:10px;display:flex}.mockup-label{text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);font-size:.78rem;font-weight:600}.browser-mockup{border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);overflow:hidden}.browser-bar{border-bottom:1px solid var(--border);background:#f4f4f5;align-items:center;gap:12px;padding:10px 14px;display:flex}.browser-dots{gap:5px;display:flex}.browser-dots span{background:#d1d5db;border-radius:50%;width:10px;height:10px}.browser-dots span:first-child{background:#f87171}.browser-dots span:nth-child(2){background:#fbbf24}.browser-dots span:nth-child(3){background:#34d399}.browser-url{color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:3px 12px;font-size:.78rem}.browser-content{background:var(--surface);min-height:140px;font-family:var(--thai-font);padding:24px 20px 20px;position:relative}.mock-page-text{color:#52525b;font-size:1rem;line-height:1.9;font-family:var(--thai-font)}.mock-selection{background:#bfdbfe;border-radius:2px;padding:1px 0}.mock-overlay{width:300px;font-family:var(--ui-font);background:#fff;border:1px solid #00000014;border-radius:10px;position:absolute;top:56px;left:180px;overflow:hidden;box-shadow:0 8px 28px #00000024,0 2px 6px #00000012}.mock-overlay-header{background:#fff;border-bottom:1px solid #00000012;justify-content:space-between;align-items:center;padding:8px 10px;display:flex}.mock-overlay-logo{color:var(--text);align-items:center;gap:6px;font-size:.78rem;font-weight:700;display:flex}.mock-logo-mark{background:var(--accent);color:#fff;border-radius:5px;justify-content:center;align-items:center;width:20px;height:20px;font-size:.72rem;font-weight:700;display:inline-flex}.mock-close{color:#a1a1aa;cursor:default;font-size:1rem}.mock-overlay-body{background:#fafaf9;flex-direction:column;gap:7px;padding:10px;display:flex}.mock-word-line{flex-wrap:wrap;gap:4px;display:flex}.mock-word{font-size:.9rem;font-family:var(--thai-font);color:var(--text);background:#f4f4f5;border-radius:6px;padding:3px 8px;font-weight:500}.mock-translation{background:var(--accent-faint);color:#4338ca;border-radius:6px;padding:4px 10px;font-size:.75rem;font-style:italic;font-weight:500}.method-list{flex-direction:column;gap:16px;display:flex}.method-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);gap:16px;padding:20px;display:flex}.method-number{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:.85rem;font-weight:700;display:flex}.method-body{flex-direction:column;flex:1;gap:8px;display:flex}.method-body h4{font-size:.95rem;font-weight:700}.method-body p{color:#52525b;font-size:.875rem;line-height:1.7}.method-steps{flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;display:flex}.step-pill{background:var(--card-bg);color:var(--text);border-radius:20px;padding:3px 10px;font-size:.75rem;font-weight:500}.step-pill--accent{background:var(--accent-faint);color:var(--accent)}.step-arrow{color:var(--text-muted);font-size:.8rem}.method-note{color:var(--text-muted)!important;font-size:.78rem!important}.shortcut-row{flex-wrap:wrap;gap:24px;margin-top:4px;display:flex}.shortcut-group{flex-direction:column;gap:5px;display:flex}.shortcut-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:.72rem;font-weight:600}.shortcut-keys{color:var(--text-muted);align-items:center;gap:4px;font-size:.82rem;display:flex}kbd{background:var(--surface);border:1px solid var(--border);font-size:.82rem;font-family:var(--ui-font);color:var(--text);border-bottom-width:2px;border-radius:5px;justify-content:center;align-items:center;padding:3px 8px;font-weight:600;display:inline-flex;box-shadow:0 1px 2px #0000000f}.inline-logo-mark{background:var(--accent);color:#fff;vertical-align:middle;border-radius:5px;justify-content:center;align-items:center;width:20px;height:20px;margin:0 2px;font-size:.75rem;font-weight:700;display:inline-flex}.install-steps{flex-direction:column;gap:0;padding-left:20px;display:flex;position:relative}.install-steps:before{content:"";background:var(--border);width:2px;position:absolute;top:20px;bottom:20px;left:15px}.install-step{gap:16px;padding-bottom:24px;display:flex;position:relative}.install-step:last-child{padding-bottom:0}.install-step-num{background:var(--accent);color:#fff;z-index:1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:.82rem;font-weight:700;display:flex;position:relative}.install-step-body{flex-direction:column;flex:1;gap:7px;padding-top:4px;display:flex}.install-step-body h4{font-size:.95rem;font-weight:700}.install-step-body p{color:#52525b;font-size:.875rem;line-height:1.7}.install-step-body a{color:var(--accent);font-weight:500;text-decoration:none}.install-step-body a:hover{text-decoration:underline}.code-block{border-radius:var(--radius-sm);background:#18181b;padding:10px 14px;font-family:Menlo,Monaco,Consolas,monospace;font-size:.82rem}.code-block code{color:#a5f3fc}.req-list{flex-direction:column;gap:10px;display:flex}.req-item{color:#3f3f46;align-items:baseline;gap:10px;font-size:.875rem;display:flex}.req-item code{background:var(--card-bg);border-radius:4px;padding:1px 6px;font-family:Menlo,Monaco,monospace;font-size:.82rem}.req-check{color:#22c55e;flex-shrink:0;font-weight:700}.req-x{color:#ef4444;flex-shrink:0;font-weight:700}.req-item--muted{color:var(--text-muted)}.project-credit{color:var(--text-muted);font-size:.85rem}.project-credit a{color:var(--text-muted);text-underline-offset:3px;text-decoration:underline}.project-credit a:hover{color:var(--accent)}