:root{--color-bg-main:#f8fafc;--color-surface:#fff;--color-surface-subtle:#f1f5f9;--color-border:#cbd5e1;--color-border-subtle:#e2e8f0;--color-primary:#047857;--color-primary-hover:#065f46;--color-primary-soft:#ecfdf5;--color-primary-border:#6ee7b7;--color-accent:#1d4ed8;--color-accent-soft:#eff6ff;--color-accent-border:#93c5fd;--color-text-primary:#0f172a;--color-text-secondary:#334155;--color-text-muted:#475569;--color-warning-bg:#fffbeb;--color-warning-border:#f59e0b;--color-warning-text:#92400e;--color-error-bg:#fef2f2;--color-error-border:#ef4444;--color-error-text:#991b1b;--color-success-bg:#ecfdf5;--color-success-border:#10b981;--color-success-text:#065f46;--space-ad-separation:2rem;--radius-card:.75rem;--radius-btn:.5rem;--shadow-card:0 1px 3px 0 #0f172a14, 0 1px 2px -1px #0f172a0f}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;font-size:100%}body{background-color:var(--color-bg-main);color:var(--color-text-primary);font-size-adjust:from-font;margin:0;font-family:Noto Sans Thai,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:1rem;line-height:1.6}h1,h2,h3,h4{color:var(--color-text-primary);text-wrap:balance;margin-block-start:0;line-height:1.3}p,li,blockquote{text-wrap:pretty}a{color:var(--color-accent);text-underline-offset:.2em;text-decoration:underline}a:hover{color:var(--color-primary-hover)}:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.container{max-inline-size:1200px;margin-inline:auto;padding-inline:1.25rem}.site-header{background:var(--color-surface);border-block-end:1px solid var(--color-border-subtle);padding-block:.875rem}.site-header-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.brand-link{color:var(--color-text-primary);align-items:center;gap:.625rem;font-size:1.15rem;font-weight:700;text-decoration:none;display:inline-flex}.brand-badge{background:var(--color-primary-soft);color:var(--color-primary);border:1px solid var(--color-primary-border);border-radius:999px;padding:.15rem .5rem;font-size:.75rem;font-weight:600}.nav-links{align-items:center;gap:1.25rem;margin:0;padding:0;list-style:none;display:flex}.nav-links a{color:var(--color-text-secondary);font-weight:500;text-decoration:none}.nav-links a:hover{color:var(--color-primary)}.language-switch{border:1px solid var(--color-primary-border);background:var(--color-primary-soft);min-block-size:2.25rem;min-inline-size:2.5rem;color:var(--color-primary);border-radius:999px;justify-content:center;align-items:center;padding-inline:.65rem;font-weight:700;display:inline-flex}.content-card{border:1px solid var(--color-border-subtle);border-radius:var(--radius-card);background:var(--color-surface);max-inline-size:820px;margin-inline:auto;padding:2rem}.privacy-badge{border-radius:999px;align-items:center;gap:.375rem;padding:.25rem .65rem;font-size:.8125rem;font-weight:600;line-height:1.4;display:inline-flex}.privacy-badge--browser{background-color:var(--color-primary-soft);color:var(--color-primary);border:1px solid var(--color-primary-border)}.privacy-badge--container{background-color:var(--color-accent-soft);color:var(--color-accent);border:1px solid var(--color-accent-border)}.tool-page-grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:2rem;margin-block:1.5rem;display:grid}@media (width>=1024px){.tool-page-grid{grid-template-columns:minmax(0,1fr) 320px}}.workspace-card{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-card);content-visibility:auto;contain-intrinsic-size:auto 760px auto 420px;padding:1.75rem}@supports not (content-visibility:auto){.workspace-card{contain:layout style paint}}.dropzone-area{border:2px dashed var(--color-border);border-radius:var(--radius-card);background:var(--color-bg-main);text-align:center;padding:2.25rem 1.5rem;transition:border-color .15s,background-color .15s;position:relative}.dropzone-area--active{border-color:var(--color-primary);background:var(--color-primary-soft)}.file-input-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.file-input-visually-hidden:focus-visible+.btn-primary{outline:3px solid var(--color-accent);outline-offset:3px}.btn-primary{background-color:var(--color-primary);color:#fff;border-radius:var(--radius-btn);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.4rem;font-size:1rem;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-hover);color:#fff}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background-color:var(--color-surface);color:var(--color-text-secondary);border-radius:var(--radius-btn);border:1px solid var(--color-border);cursor:pointer;justify-content:center;align-items:center;gap:.4rem;padding:.6rem 1.1rem;font-size:.9375rem;font-weight:500;display:inline-flex}.btn-secondary:hover:not(:disabled){background-color:var(--color-surface-subtle)}.table-wrapper{border:1px solid var(--color-border-subtle);background:var(--color-surface);border-radius:.5rem;max-block-size:min(420px,75vh);max-inline-size:100%;margin-block:1rem;overflow:auto;container-type:inline-size}.preview-table{border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;inline-size:100%;font-size:.875rem}.preview-table caption{text-align:start;color:var(--color-text-secondary);background:var(--color-surface-subtle);border-block-end:1px solid var(--color-border-subtle);padding:.625rem .875rem;font-weight:600}.preview-table thead{z-index:1;position:sticky;inset-block-start:0}.preview-table th,.preview-table td{border-block-end:1px solid var(--color-border-subtle);border-inline-end:1px solid var(--color-border-subtle);text-align:start;white-space:nowrap;padding:.55rem .75rem}.preview-table thead th{background:var(--color-surface-subtle);color:var(--color-text-primary);font-weight:600}.preview-table tbody th{background:var(--color-surface);color:var(--color-text-secondary);font-weight:600;position:sticky;inset-inline-start:0}@container (width<600px){.preview-table,.preview-table thead,.preview-table tbody,.preview-table tr,.preview-table th,.preview-table td{white-space:normal;display:block}.preview-table thead{display:none}.preview-table tr{border:1px solid var(--color-border);border-radius:.375rem;margin-block-end:1rem}.preview-table tbody th{z-index:2;background:var(--color-surface-subtle);position:sticky;inset-block-start:0}.preview-table td:before{content:attr(data-col-label) ": ";color:var(--color-text-secondary);font-weight:600}}.bento-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.25rem;margin-block:1.5rem;display:grid}.tool-card{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-card);color:inherit;flex-direction:column;justify-content:space-between;padding:1.35rem;text-decoration:none;transition:transform .15s,border-color .15s;display:flex}.tool-card:hover{border-color:var(--color-primary);transform:translateY(-2px)}.ad-boundary-section{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-btn);text-align:center;margin-block-start:var(--space-ad-separation);margin-block-end:var(--space-ad-separation);padding:.75rem}.ad-boundary-section--below-fold{content-visibility:auto;contain-intrinsic-size:auto none auto 148px}.below-fold-guide-section{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-card);content-visibility:auto;contain-intrinsic-size:auto none auto 520px;margin-block-start:2.5rem;padding:1.75rem}@supports not (content-visibility:auto){.ad-boundary-section--below-fold,.below-fold-guide-section{contain:layout style paint}}.ad-label{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);margin-block-end:.5rem;font-size:.75rem;font-weight:600;display:block}.ad-slot-frame--sidebar{border:1px dashed var(--color-border);min-block-size:250px;inline-size:100%;max-inline-size:300px;color:var(--color-text-muted);border-radius:.375rem;justify-content:center;align-items:center;margin-inline:auto;font-size:.8125rem;display:flex}.ad-slot-frame--banner{border:1px dashed var(--color-border);min-block-size:100px;inline-size:100%;max-inline-size:728px;color:var(--color-text-muted);border-radius:.375rem;justify-content:center;align-items:center;margin-inline:auto;font-size:.8125rem;display:flex}@media (width<=1023px){.ad-boundary-section--desktop-only{display:none}}.status-alert{border-radius:var(--radius-btn);margin-block:1rem;padding:.875rem 1rem;font-size:.9375rem}.status-alert--error{background:var(--color-error-bg);border:1px solid var(--color-error-border);color:var(--color-error-text)}.status-alert--warning{background:var(--color-warning-bg);border:1px solid var(--color-warning-border);color:var(--color-warning-text)}.status-alert--success{background:var(--color-success-bg);border:1px solid var(--color-success-border);color:var(--color-success-text)}