.tpp{--_font:var(--tpp-font,var(--tdp-font,inherit));--_brand:var(--tpp-brand,#113566);--_surface:var(--tpp-surface,#fff);--_border:var(--tpp-border,var(--tdp-border,#e2e8f0));--_text:var(--tpp-text,#0f1b2d);--_text-muted:var(--tpp-text-muted,#64748b);--_radius:var(--tpp-radius,16px);font-family:var(--_font);display:inline-flex}.tpp--card{border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);flex-direction:column;margin:0;overflow:hidden;box-shadow:0 8px 24px #0f1b2d14}.tpp-head{background:var(--_brand);color:#fff;letter-spacing:.02em;text-align:center;padding:10px 16px;font-weight:700}.tpp-body{text-align:center;flex-direction:column;align-items:center;gap:6px;padding:16px 20px 18px;display:flex}.tpp-qr{border-radius:4px;max-width:100%;height:auto;display:block}.tpp-name{margin-top:4px;font-weight:600}.tpp-detail{color:var(--_text-muted);font-variant-numeric:tabular-nums;font-size:.875em}.tpp-amount{font-size:.95em}.tpp-amount strong{font-variant-numeric:tabular-nums;font-size:1.45em}.tpp-any{color:var(--_text-muted)}.tpp-empty{border:1px dashed var(--_border);max-width:100%;color:var(--_text-muted);box-sizing:border-box;border-radius:8px;place-items:center;padding:16px;font-size:.875em;display:grid}: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)}.hero-wide{width:520px}.chips button.on{border-style:solid;border-color:var(--accent);background:var(--accent);color:#fff}.text-input{box-sizing:border-box;border:1px solid var(--border);background:var(--surface);width:100%;min-height:40px;color:var(--text);font:inherit;border-radius:10px;padding:8px 12px;font-size:15px;font-weight:400}.text-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #298bec33}.payload-input{word-break:break-all;resize:vertical;font-family:JetBrains Mono,ui-monospace,monospace;font-size:13px}.pp-layout{flex-wrap:wrap;align-items:flex-start;gap:20px;width:100%;display:flex}.pp-fields{flex-direction:column;flex:220px;gap:12px;min-width:0;display:flex}.pp-hero{box-sizing:border-box;flex-wrap:wrap;align-items:center;gap:18px;width:460px;max-width:100%;display:flex}.pp-hero .pp-fields{flex-basis:160px}.hint{font-size:12px;font-weight:500}.hint.ok{color:#16a34a}.hint.bad{color:#dc2626}.payload{word-break:break-all;font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px}.payload b{color:var(--accent)}.callout{color:#92400e;background:#fffbeb;border:1px solid #fcd34d;border-radius:12px;margin:0 0 20px;padding:12px 16px;font-size:14px}.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}