.tcc{--_font:var(--tcc-font,var(--tdp-font,inherit));--_brand:var(--tcc-brand,var(--tdp-brand,#298bec));--_surface:var(--tcc-surface,var(--tdp-surface,#fff));--_border-strong:var(--tcc-border-strong,var(--tdp-border-strong,#cfd7e2));--_text:var(--tcc-text,var(--tdp-text,#0f1b2d));--_text-muted:var(--tcc-text-muted,var(--tdp-text-muted,#64748b));--_danger:var(--tcc-danger,#dc2626);--_focus-ring:var(--tcc-focus-ring,var(--tdp-focus-ring,0 0 0 3px #298bec33));color:var(--_text);font-family:var(--_font);gap:18px;display:grid}.tcc-stage{perspective:1200px;place-items:center;padding:4px 0;display:grid}.tcc-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.tcc-field--number,.tcc-field--name{grid-column:1/-1}.tcc-field{flex-direction:column;gap:5px;min-width:0;display:flex}.tcc-label{color:var(--_text-muted);font-size:13px;font-weight:600}.tcc-input{box-sizing:border-box;border:1px solid var(--_border-strong);background:var(--_surface);width:100%;height:42px;color:var(--_text);font:inherit;font-variant-numeric:tabular-nums;border-radius:10px;padding:0 12px;font-size:15px}.tcc-input:focus{border-color:var(--_brand);box-shadow:var(--_focus-ring);outline:none}.tcc-input--error{border-color:var(--_danger)}.tcc-input:disabled{opacity:.6}.tcc-input-box{position:relative}.tcc-input-box .tcc-input{letter-spacing:.04em;padding-right:130px}.tcc-brand-tag{color:var(--_text-muted);pointer-events:none;font-size:12px;font-weight:700;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.tcc-error,.tcc-hint{font-size:12.5px}.tcc-error{color:var(--_danger)}.tcc-hint{color:var(--_text-muted)}.tcc-card{--_card-width:var(--tcc-card-width,340px);width:var(--_card-width);aspect-ratio:85.6/54;max-width:100%;font-family:var(--tcc-card-font,ui-monospace, "SFMono-Regular", Menlo, monospace);position:relative;container-type:inline-size}.tcc-card-inner{transform-style:preserve-3d;position:absolute;inset:0}.tcc-face{box-sizing:border-box;background:var(--_card-bg,linear-gradient(135deg, #334155, #0f172a));color:#fff;backface-visibility:hidden;border-radius:4.7cqw;transition:transform .55s,opacity .45s,background .5s;position:absolute;inset:0;overflow:hidden;box-shadow:0 22px 40px -22px #000000a6}.tcc-face:after{content:"";pointer-events:none;background:radial-gradient(120% 80% at 90% 0,#ffffff38,#0000 55%);position:absolute;inset:0}.tcc-back{transform:rotateY(180deg)}.tcc-front{grid-template-rows:auto 1fr auto;padding:5.3cqw 5.9cqw;display:grid}.tcc-top{justify-content:space-between;align-items:center;display:flex}.tcc-chip{background:linear-gradient(135deg,#f3d98b,#b58d3c);border-radius:1.8cqw;width:12.4cqw;height:9.1cqw;box-shadow:inset 0 0 0 1px #0003}.tcc-brand{letter-spacing:.02em;text-shadow:0 1px 2px #00000040;font-family:system-ui,sans-serif;font-size:5.3cqw;font-style:italic;font-weight:800}.tcc-number{letter-spacing:.08em;white-space:nowrap;word-spacing:.2em;text-shadow:0 1px 2px #00000059;align-self:center;font-size:6.2cqw}.tcc-row{justify-content:space-between;align-items:end;gap:12px;font-size:3.8cqw;display:flex}.tcc-row small{letter-spacing:.06em;opacity:.75;font-family:system-ui,sans-serif;font-size:2.8cqw;display:block}.tcc-row>div{min-width:0}.tcc-name{text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;max-width:62cqw;display:block;overflow:hidden}.tcc-focus{outline-offset:3px;border-radius:4px;outline:1.5px solid #ffffffb3}.tcc-front-cvc{background:#ffffff2e;border-radius:4px;padding:1px 6px;font-size:3.5cqw;position:absolute;top:26cqw;right:6.5cqw}.tcc-stripe{background:#111;height:13cqw;margin-top:6.5cqw}.tcc-sign{align-items:center;gap:10px;margin:5.3cqw 5.9cqw 0;display:flex}.tcc-sign span:first-child{background:repeating-linear-gradient(-45deg,#f8fafc,#f8fafc 6px,#e2e8f0 6px 12px);border-radius:4px;flex:1;height:10.6cqw}.tcc-cvc{color:#0f1b2d;letter-spacing:.1em;background:#fff;border-radius:4px;place-items:center;min-width:17cqw;height:10.6cqw;padding:0 10px;font-style:italic;font-weight:600;display:grid}.tcc-back-note{opacity:.7;margin:3.5cqw 5.9cqw 0;font-family:system-ui,sans-serif;font-size:2.9cqw}.tcc-card[data-anim=flip] .tcc-card-inner{transition:transform .7s cubic-bezier(.3,.7,.2,1)}.tcc-card[data-anim=flip].tcc-card--flipped .tcc-card-inner,.tcc-card[data-anim=lift].tcc-card--flipped .tcc-card-inner{transform:rotateY(180deg)}.tcc-card[data-anim=lift].tcc-card--animated .tcc-card-inner{animation:.8s cubic-bezier(.3,.7,.2,1) both tcc-lift-front}.tcc-card[data-anim=lift].tcc-card--animated.tcc-card--flipped .tcc-card-inner{animation-name:tcc-lift-back}@keyframes tcc-lift-back{0%{transform:rotateY(0)scale(1)}50%{transform:rotateY(90deg)scale(1.12)translateZ(40px)}to{transform:rotateY(180deg)scale(1)}}@keyframes tcc-lift-front{0%{transform:rotateY(180deg)scale(1)}50%{transform:rotateY(90deg)scale(1.12)translateZ(40px)}to{transform:rotateY(0)scale(1)}}.tcc-card[data-anim=spin].tcc-card--flipped .tcc-card-inner{transform:rotateY(180deg)}.tcc-card[data-anim=spin].tcc-card--animated .tcc-card-inner{animation:1.1s cubic-bezier(.25,.8,.25,1) both tcc-spin-front}.tcc-card[data-anim=spin].tcc-card--animated.tcc-card--flipped .tcc-card-inner{animation-name:tcc-spin-back}@keyframes tcc-spin-back{0%{transform:rotateY(0)scale(1)}45%{transform:rotateY(300deg)scale(1.1)translateZ(40px)}to{transform:rotateY(540deg)scale(1)}}@keyframes tcc-spin-front{0%{transform:rotateY(540deg)scale(1)}45%{transform:rotateY(240deg)scale(1.1)translateZ(40px)}to{transform:rotateY(0)scale(1)}}.tcc-card[data-anim=vertical] .tcc-back{transform:rotateX(180deg)}.tcc-card[data-anim=vertical] .tcc-card-inner{transition:transform .7s cubic-bezier(.3,.7,.2,1)}.tcc-card[data-anim=vertical].tcc-card--flipped .tcc-card-inner{transform:rotateX(180deg)}.tcc-card[data-anim=slide] .tcc-face,.tcc-card[data-anim=fade] .tcc-face,.tcc-card[data-anim=none] .tcc-face{backface-visibility:visible}.tcc-card[data-anim=slide] .tcc-back{opacity:0;transform:translate(105%)}.tcc-card[data-anim=slide].tcc-card--flipped .tcc-front{opacity:0;transform:translate(-105%)}.tcc-card[data-anim=slide].tcc-card--flipped .tcc-back{opacity:1;transform:translate(0)}.tcc-card[data-anim=fade] .tcc-back,.tcc-card[data-anim=fade].tcc-card--flipped .tcc-front{opacity:0;transform:scale(.94)}.tcc-card[data-anim=fade].tcc-card--flipped .tcc-back{opacity:1;transform:scale(1)}.tcc-card[data-anim=none] .tcc-face{transition:none}.tcc-card[data-anim=none] .tcc-back{opacity:0;transform:none}.tcc-card[data-anim=none].tcc-card--flipped .tcc-front{opacity:0}.tcc-card[data-anim=none].tcc-card--flipped .tcc-back{opacity:1}.tcc-stage:has(.tcc-card[data-anim=slide]){overflow:hidden}.tcc-stripe-field{align-items:center;display:flex}.tcc-stripe-field>*{flex:1}.tcc-stripe-field.StripeElement--focus{border-color:var(--_brand);box-shadow:var(--_focus-ring)}.tcc-stripe-field.StripeElement--invalid{border-color:var(--_danger)}.tcc-field .tcc-label{cursor:default}: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}.try{border:1px dashed var(--border);background:var(--surface);height:30px;color:var(--text);font:inherit;cursor:pointer;border-radius:8px;padding:0 10px;font-size:13px}.try:hover{border-style:solid;border-color:var(--accent)}.zod-form{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;display:grid}.zod-form .row{grid-column:1/-1;align-items:center}.zod-form .submit{align-self:auto}.text-input.invalid{border-color:#dc2626}.hero-note{font-size:12px}.card-hero{width:400px}.anim-grid{perspective:1200px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px 16px;width:100%;display:grid}.anim-grid figure{justify-items:center;gap:8px;margin:0;display:grid}.anim-grid figcaption{color:var(--muted);font-size:13px}.motion-note{flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;display:flex}.anim-grid figure:has([data-anim=slide]){overflow:hidden}.example-body:has(.anim-grid){grid-template-columns:minmax(0,1fr)}.gw-note{border-radius:12px;margin:0;padding:12px 14px;font-size:14px;line-height:1.6}.gw-note--ok{color:#14532d;background:#ecfdf3}.gw-note--no{color:#7c2d12;background:#fff7ed}.gw-note a{color:inherit;font-weight:600}.gw-table{border-collapse:collapse;width:100%;font-size:13.5px}.gw-table th,.gw-table td{border-bottom:1px solid var(--border);text-align:left;padding:8px 10px}.gw-table th{color:var(--muted);font-weight:600}.example-body:has(.gw-table){grid-template-columns:minmax(0,1fr)}.stripe-key{flex:260px;min-width:0}.mono-input{font-family:JetBrains Mono,ui-monospace,monospace;font-size:13px}.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}