.tin{--_font:var(--tin-font,var(--tdp-font,inherit));--_brand:var(--tin-brand,var(--tdp-brand,#298bec));--_surface:var(--tin-surface,var(--tdp-surface,#fff));--_surface-muted:var(--tin-surface-muted,var(--tdp-surface-muted,#f8fafc));--_border-strong:var(--tin-border-strong,var(--tdp-border-strong,#cfd7e2));--_text:var(--tin-text,var(--tdp-text,#0f1b2d));--_text-muted:var(--tin-text-muted,var(--tdp-text-muted,#64748b));--_text-subtle:var(--tin-text-subtle,var(--tdp-text-subtle,#94a3b8));--_success:var(--tin-success,#16a34a);--_danger:var(--tin-danger,#dc2626);--_focus-ring:var(--tin-focus-ring,var(--tdp-focus-ring,0 0 0 3px #298bec33));font-family:var(--_font);flex-direction:column;gap:5px;display:flex}.tin-input{box-sizing:border-box;border:1px solid var(--_border-strong);background:var(--_surface);width:100%;height:40px;color:var(--_text);font-variant-numeric:tabular-nums;letter-spacing:.02em;border-radius:10px;padding:0 12px;font-family:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s}.tin-input::placeholder{color:var(--_text-subtle);letter-spacing:0}.tin-input:hover:not(:disabled){border-color:var(--_brand)}.tin-input:focus{border-color:var(--_brand);box-shadow:var(--_focus-ring);outline:none}.tin-input:disabled{background:var(--_surface-muted);color:var(--_text-subtle)}.tin-input--ok,.tin-input--ok:hover:not(:disabled){border-color:var(--_success)}.tin-input--error,.tin-input--error:hover:not(:disabled),.tin-input--error:focus{border-color:var(--_danger)}.tin-status{font-size:12.5px}.tin-status--hint{color:var(--_text-subtle)}.tin-status--ok{color:var(--_success)}.tin-status--ok:before{content:"✓ "}.tin-status--error{color:var(--_danger)}.tin-status--warn{color:var(--tin-warning,#b45309)}.tin-status--warn:before{content:"⚠ "}.tin-money-box{position:relative}.tin-input--money{text-align:right}.tin-input--unit{padding-right:48px}.tin-unit{color:var(--_text-muted);pointer-events:none;font-size:14px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.tin-baht{color:var(--_text-muted);text-align:right;font-size:13px}.tin-label-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;display:flex}.tin-label{color:var(--_text);font-size:14px;font-weight:600}.tin-required{color:var(--_danger)}.tin-doc-toggle{border:1px solid var(--_border-strong);background:var(--_surface-muted);border-radius:8px;margin-left:auto;padding:2px;display:inline-flex}.tin-doc-toggle button{height:26px;color:var(--_text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:0 10px;font-family:inherit;font-size:13px}.tin-doc-toggle button[aria-pressed=true]{background:var(--_surface);color:var(--_text);font-weight:600;box-shadow:0 1px 2px #0f1b2d1f}.tin-doc-toggle button:focus-visible,.tin-eye:focus-visible{box-shadow:var(--_focus-ring);outline:none}.tin-input-box{position:relative}.tin-input--eye{padding-right:44px}.tin-input--masked{-webkit-text-security:disc}.tin-eye{width:32px;height:32px;color:var(--_text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;place-items:center;padding:0;font-size:18px;display:grid;position:absolute;top:50%;right:6px;transform:translateY(-50%)}.tin-eye:hover{background:var(--_surface-muted);color:var(--_text)}:root{--bg:#f6f8fb;--surface:#fff;--border:#e4e9f0;--text:#0f1b2d;--muted:#5b6b80;--accent:#298bec;--code-bg:#0f1b2d;--code-text:#e2e8f0}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font-family:IBM Plex Sans Thai,system-ui,sans-serif;font-size:15px;line-height:1.65}a{color:var(--accent)}code,pre{font-family:JetBrains Mono,ui-monospace,monospace}.wrap{max-width:960px;margin:0 auto;padding:0 16px}.hero{background:var(--surface);border-bottom:1px solid var(--border);padding:56px 0 40px}.hero-grid{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px;display:grid}.hero-demo{background:linear-gradient(145deg,#eef6fe,#f5f3ff);border-radius:20px;padding:18px}@media (width<=760px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}.hero-demo{justify-self:start}}.eyebrow{color:var(--muted);letter-spacing:.02em;margin:0 0 8px;font-size:13px}.hero h1{letter-spacing:-.01em;margin:0;font-size:clamp(30px,6vw,44px);line-height:1.2}.be{color:var(--accent)}.lead{max-width:620px;color:var(--muted);margin:14px 0 24px;font-size:17px}.lead code{background:var(--bg);color:var(--text);border-radius:6px;padding:1px 6px;font-size:.9em}.install{background:var(--code-bg);width:fit-content;max-width:100%;color:var(--code-text);border-radius:10px;align-items:center;gap:8px;padding:8px 8px 8px 16px;display:flex}.install code{white-space:nowrap;font-size:13.5px;overflow-x:auto}.links{gap:18px;margin-top:18px;font-weight:600;display:flex}.links a{text-decoration:none}.links a:hover{text-decoration:underline}main.wrap{padding-top:32px;padding-bottom:32px}.example{border:1px solid var(--border);background:var(--surface);border-radius:14px;margin-bottom:20px;padding:24px;scroll-margin-top:64px}.example-head h2{margin:0;font-size:19px}.example-head p{color:var(--muted);margin:4px 0 0}.example-body{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;gap:20px;margin-top:18px;display:grid}.example-body:has(>.code:only-child){grid-template-columns:minmax(0,1fr)}@media (width<=760px){.example{padding:18px}.example-body{grid-template-columns:minmax(0,1fr)}}.preview{flex-direction:column;align-items:flex-start;gap:14px;min-width:0;display:flex}.row{flex-wrap:wrap;gap:12px;display:flex}.field{color:var(--muted);flex-direction:column;gap:4px;font-size:13px;font-weight:600;display:flex}.note{color:var(--muted);margin:0}.readout{background:var(--bg);border-radius:10px;flex-wrap:wrap;gap:8px 24px;margin:0;padding:10px 14px;font-size:13px;display:flex}.readout dt{color:var(--muted)}.readout dd{margin:0;font-family:JetBrains Mono,ui-monospace,monospace;font-weight:500}.segmented,.swatches{flex-wrap:wrap;gap:6px;display:flex}.segmented button,.swatches button{border:1px solid var(--border);background:var(--surface);height:32px;color:var(--text);font:inherit;cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:0 12px;font-size:13px;display:inline-flex}.segmented button[aria-pressed=true],.swatches button[aria-pressed=true]{border-color:var(--text);font-weight:600}.swatches span{border-radius:50%;width:12px;height:12px}.submit{background:var(--text);color:#fff;height:40px;font:inherit;cursor:pointer;border:none;border-radius:10px;align-self:flex-end;padding:0 16px;font-size:14px;font-weight:600}.check{cursor:pointer;align-items:center;gap:8px;font-size:14px;display:inline-flex}.check input{width:16px;height:16px;accent-color:var(--accent);margin:0}.code{background:var(--code-bg);border-radius:10px;min-width:0;position:relative}.code pre{color:var(--code-text);margin:0;padding:44px 16px 16px;font-size:13px;line-height:1.6;overflow-x:auto}.code .copy{position:absolute;top:8px;right:8px}.copy{height:28px;color:var(--code-text);font:inherit;cursor:pointer;background:#ffffff14;border:1px solid #ffffff2e;border-radius:6px;flex:none;padding:0 10px;font-size:12px}.copy:hover{background:#ffffff29}.footer{color:var(--muted);padding-top:8px;padding-bottom:40px;font-size:13px}.code-tabs{background:#ffffff0f;border-radius:7px;gap:2px;padding:2px;display:flex;position:absolute;top:8px;left:8px}.code-tabs button,.pm-tabs button{color:#94a3b8;height:24px;font:inherit;cursor:pointer;background:0 0;border:none;border-radius:5px;padding:0 10px;font-size:12px}.code-tabs button[aria-pressed=true]{color:var(--code-text);background:#ffffff24;font-weight:600}.code-tabs button:focus-visible,.pm-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.install-wrap{flex-direction:column;align-items:flex-start;gap:6px;max-width:100%;display:flex}.pm-tabs{gap:2px;display:flex}.pm-tabs button{color:var(--muted);font-family:JetBrains Mono,ui-monospace,monospace}.pm-tabs button:hover{color:var(--text)}.pm-tabs button[aria-pressed=true]{background:var(--code-bg);color:var(--code-text);font-weight:500}.hero-form{flex-direction:column;gap:6px;width:360px;max-width:100%;padding:22px;display:flex}.hero-form .lbl{margin-top:6px}.fill{width:100%}.lbl{color:var(--muted);font-size:13px;font-weight:600}.stack{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.json{background:var(--bg);border-radius:10px;width:100%;margin:0;padding:12px 14px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px;overflow:auto}.hero-clock{text-align:center;font-variant-numeric:tabular-nums;width:300px;max-width:100%;padding:26px 24px}.clock-day{color:var(--muted);font-size:15px}.clock-date{font-size:34px;font-weight:700;line-height:1.2}.clock-year{color:var(--accent);font-size:18px;font-weight:600}.clock-time{margin-top:10px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:22px}.plain{border:1px solid var(--border);background:var(--surface);width:240px;max-width:100%;height:40px;color:var(--text);font:inherit;border-radius:10px;padding:0 12px}.plain:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #298bec33}.wide-input{width:100%}.field .plain{color:var(--text);font-weight:400}.formats{border:1px solid var(--border);border-radius:10px;width:100%;margin:0;overflow:hidden}.formats div{border-top:1px solid var(--border);grid-template-columns:160px minmax(0,1fr);gap:12px;padding:8px 12px;font-size:14px;display:grid}.formats div:first-child{border-top:none}.formats dt{min-width:0;color:var(--muted);overflow-wrap:anywhere;padding-top:2px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px}.formats dd{overflow-wrap:anywhere;margin:0;font-weight:500}.formats.compact div{padding:5px 12px;font-size:13px}@media (width<=480px){.formats div{grid-template-columns:minmax(0,1fr);gap:0}}.result{margin:0;font-size:18px;font-weight:600}.chips{flex-wrap:wrap;gap:6px;display:flex}.chips button{border:1px dashed var(--border);background:var(--surface);height:28px;color:var(--text);font:inherit;cursor:pointer;border-radius:999px;padding:0 10px;font-size:13px}.chips button:hover{border-color:var(--accent);color:var(--accent)}.topbar{z-index:10;border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--surface) 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0}.topbar-inner{justify-content:space-between;align-items:center;gap:12px;height:48px;display:flex}.topbar-home{border:1px solid var(--border);height:32px;color:var(--text);border-radius:8px;align-items:center;gap:6px;padding:0 12px 0 10px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.topbar-home:hover{border-color:var(--accent);color:var(--accent)}.topbar-pkg{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-family:JetBrains Mono,ui-monospace,monospace;font-size:12.5px;overflow:hidden}