@layer od-layout{.tp [hidden]:not([hidden="until-found" i]){ display: none !important; }.tp dialog:not([open]){ display: none !important; }.tp :where(.od-stack,.tp .od-row,.tp .od-row-top,.tp .od-cluster,.tp .od-grid,.tp .od-field,.tp .od-stat,.tp .od-cell,.tp .od-tile) > :where(*){ min-width: 0; }.tp .od-icon{ display: inline-block; inline-size: var(--od-icon-size, 1em); block-size: var(--od-icon-size, 1em); flex: none; }.tp .od-nowrap{ white-space: nowrap; }.tp .od-touch{ min-width: 44px; min-height: 44px; }}:root [hidden]:where(:not([hidden="until-found" i])){ display: none; }:root{
  --canvas: #fafafa;
  --card: #f1f5f3;
  --tint: #e8f8f3;
  --ink: #171717;
  --graphite: #4d4d4d;
  --muted: #666666;
  --fog: #c9c9c9;
  --mist: #b7d3cc;
  --line: #ebebeb;
  --sea: #0e8a72;
  --deep: #0f3d3a;
  --deep-hover: #0b2d2b;
  --accent-ink: #0f3d3a;
  --ok: #12804a;
  --warn: #1d4ed8;
  --bad: #c4281c;
  --code-text: #c3c7cf;
  --code-punct: #8a909b;
  --code-num: #25f4ee;
  --ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --max: 1200px;
  --gutter: 24px;
  --ring-deep: 0 1px 2px rgba(15, 61, 58, 0.8), 0 0 0 1px #0f3d3a;
  --lift: 0 0 0 1px #ebebeb, 0 24px 48px -32px rgba(15, 61, 58, 0.3);
  --t-fast: 160ms;
  --section: 128px;
  --section-head: 40px;
  --section-band: 96px;
}.tp *,.tp *::before,.tp *::after{ box-sizing: border-box; }html{ -webkit-text-size-adjust: 100%; }body.tp-body{
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 16px/1.6 var(--ui); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}.tp a{ color: var(--sea); }.tp code{ font-family: var(--mono); font-size: 0.88em; padding: 1px 6px; border-radius: 6px; background: var(--tint); }.tp :focus-visible{ outline: 2px solid var(--sea); outline-offset: 2px; }.tp .container{ max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }.tp .skip{ position: absolute; left: 16px; top: -48px; padding: 8px 16px; border-radius: 9999px; background: var(--deep); color: #fff; z-index: 10; }.tp .skip:focus{ top: 16px; }.tp .btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 0 32px; border: 0; border-radius: 9999px;
  background: var(--deep); color: #fff; box-shadow: var(--ring-deep);
  font: 500 16px var(--ui); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--t-fast) ease-out;
}.tp .btn:hover{ background: var(--deep-hover); }.tp .btn:disabled{ background: var(--tint); color: var(--muted); box-shadow: none; cursor: progress; }.tp .btn.sm{ min-height: 44px; padding: 0 22px; font-size: 15px; }.tp .btn.light{ background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }.tp .btn.light:hover{ box-shadow: 0 0 0 1px var(--ink); background: #fff; }.tp .btn.on-ink{ background: #fff; color: var(--ink); box-shadow: none; }.tp .btn.on-ink:hover{ background: var(--line); }.tp .site-header{ height: 88px; }.tp .site-header .container{ height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }.tp .brand{ display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 21px; font-weight: 500; letter-spacing: -0.02em; justify-self: start; }.tp .brand svg{ width: 34px; height: 34px; flex: none; }.tp .nav{ display: flex; gap: 28px; }.tp .nav a{ color: var(--graphite); text-decoration: none; font-size: 16px; font-weight: 500; }.tp .nav a:hover,.tp .nav a[aria-current]{ color: var(--ink); }.tp .header-cta{ justify-self: end; }.tp .crumbs{ position: relative; }.tp .crumbs ol{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); }.tp .crumbs li + li::before{ content: "/"; margin-right: 8px; color: var(--fog); }.tp .crumbs a{ color: var(--sea); font-weight: 500; text-decoration: none; }.tp .crumbs a:hover{ color: var(--deep); text-decoration: underline; }.tp .crumbs [aria-current]{ color: var(--deep); font-weight: 500; }.tp .page-head{ position: relative; isolation: isolate; text-align: center; padding: 56px 0 56px; display: flex; flex-direction: column; align-items: center; }.tp .page-head{ min-height: 440px; justify-content: center; }.tp .hv{ position: absolute; inset: 0; z-index: -1; pointer-events: none; }.tp .hv > *{ position: absolute; rotate: var(--r, 0deg); animation: bob 7s ease-in-out var(--d, 0s) infinite; }@keyframes bob { 50% { translate: 0 -7px; } }@media (prefers-reduced-motion: reduce){.tp .hv > *{ animation: none; }}.tp .hv-tile{ display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 18px; background: #ff0033; color: #fff; box-shadow: 0 18px 40px -14px rgba(255, 0, 51, 0.45); }.tp .hv-card{ background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 20px 44px -18px rgba(15, 61, 58, 0.35); }.tp .hv-lines{ display: grid; gap: 8px; padding: 14px 16px; width: 208px; text-align: left; }.tp .hv-lines span{ display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; font: 400 11px/1 var(--mono); color: var(--sea); font-variant-numeric: tabular-nums; }.tp .hv-lines i{ display: block; height: 7px; border-radius: 9999px; background: var(--card); }.tp .hv-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 9999px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 12px 28px -14px rgba(15, 61, 58, 0.3); font: 500 13px/1 var(--ui); color: var(--ink); white-space: nowrap; }.tp .hv-chip b{ display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 9999px; background: var(--tint); color: var(--accent-ink); font: 600 11px/1 var(--ui); }.tp .hv-chip.ok b{ background: var(--deep); color: #fff; }.tp .hv-file{ display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; text-align: left; }.tp .hv-file .ic{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 38px; border-radius: 6px; background: var(--tint); color: var(--sea); font: 600 10px/1 var(--mono); }.tp .hv-file strong{ display: block; font-size: 13px; font-weight: 500; }.tp .hv-file small{ display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }@media (max-width: 1100px){.tp .hv{ display: none; }.tp .page-head{ min-height: 0; }}.tp .yt-mark{ width: 18px; height: 12px; border-radius: 4px; background: #ff0033; position: relative; display: inline-block; flex: none; }.tp .yt-mark::after{ content: ""; position: absolute; left: 7px; top: 3px; border-left: 5px solid #fff; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }.tp h1{
  margin: 24px 0 0; font-weight: 500; font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance;
}.tp .lead{ margin: 20px auto 0; max-width: 640px; font-size: 20px; line-height: 1.4; font-weight: 500; color: var(--graphite); }.tp .tool{ position: relative; max-width: 920px; margin: 0 auto; border-radius: 32px; border: 1px solid var(--line); background: #fff; }.tp .tool-in{ border-radius: 31px; background: #fff; padding: 24px 28px 28px; }.tp .mode-tabs{ display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 20px; border-radius: 9999px; background: var(--card); }.tp .mode-tab{
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 18px;
  border: 0; border-radius: 9999px; background: transparent; color: var(--graphite);
  font: 500 14px var(--ui); cursor: pointer;
}.tp .mode-tab[aria-selected="true"]{ background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }.tp .mode-tab:disabled{ cursor: not-allowed; color: var(--muted); }.tp .soon{ padding: 1px 8px; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--fog); font-size: 11px; font-weight: 600; color: var(--graphite); }.tp .banner{ display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 14px 18px; border-radius: 16px; background: var(--tint); font-size: 14px; line-height: 1.5; color: var(--ink); }.tp .chip{
  display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 9999px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px; font-weight: 600; color: var(--graphite); white-space: nowrap;
}.tp .banner .chip{ background: var(--sea); color: #fff; box-shadow: none; flex: none; }.tp .banner code{ background: #fff; }.tp .tf-row{ display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }.tp .tf-field{ flex: 1 1 280px; min-width: 0; display: block; }.tp .vh{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }.tp .tf-field input{
  width: 100%; height: 56px; padding: 0 22px; border: 0; border-radius: 9999px;
  box-shadow: inset 0 0 0 1px var(--fog); background: #fff; color: var(--ink);
  font: 400 15px var(--mono);
}.tp .tf-field input::placeholder{ color: var(--muted); }.tp .tf-field input[aria-invalid="true"]{ box-shadow: inset 0 0 0 1px var(--bad); }.tp .field-error{ display: block; margin: 8px 0 0 22px; font-size: 13px; font-weight: 500; color: var(--bad); }.tp .hint-row{ display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--muted); }.tp .hint-row > span{ display: inline-flex; align-items: center; gap: 8px; }.tp .dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--ok); display: inline-block; flex: none; }.tp .status{ margin: 12px 0 0; font-size: 14px; font-weight: 500; color: var(--graphite); }.tp .status:empty{ display: none; }.tp .out{ margin-top: 20px; border-top: 1px solid var(--line); }.tp .out:empty{ display: none; }.tp .res-bar{ display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 0; }.tp .res-title{ display: grid; gap: 2px; min-width: 0; }.tp .res-title strong{ display: block; font-size: 16px; font-weight: 500; line-height: 1.35; }.tp .res-title span{ display: block; font-size: 13px; color: var(--muted); }.tp .res-meta{ display: flex; gap: 8px; flex-wrap: wrap; }.tp .segs{ list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--card); max-height: 360px; overflow-y: auto; }.tp .seg{ display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }.tp .seg:last-child{ border-bottom: 0; }.tp .seg time{ font: 400 13px/1.7 var(--mono); color: var(--sea); font-variant-numeric: tabular-nums; }.tp .seg p{ margin: 0; font-size: 15px; line-height: 1.6; }.tp .res-foot{ display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 0 0; font-size: 14px; color: var(--graphite); }.tp .hint-api a{ font-weight: 500; }.tp .res-actions{ display: flex; gap: 8px; flex-wrap: wrap; }.tp .note{ display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 16px 20px; border-radius: 16px; background: var(--card); font-size: 15px; }.tp .note.bad{ background: #fff; box-shadow: inset 0 0 0 1px var(--bad); }.tp .note p{ margin: 0; }.tp .note strong{ font-weight: 600; }.tp .skel{ display: grid; gap: 12px; padding: 20px 0 4px; }.tp .skel i{ display: block; height: 14px; border-radius: 9999px; background: var(--card); }.tp .skel i:nth-child(1){ width: 40%; height: 18px; }.tp .skel i:nth-child(2){ width: 92%; }.tp .skel i:nth-child(3){ width: 84%; }.tp .skel i:nth-child(4){ width: 88%; }@media (prefers-reduced-motion: no-preference){.tp .skel i{ animation: pulse 1.2s ease-in-out infinite alternate; }.tp .out > *{ animation: rise 240ms ease-out; }}@keyframes pulse { from { opacity: 1; } to { opacity: 0.45; } }@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }.tp section.block{ padding-top: var(--section); }.tp section.block.alt{
  margin-top: var(--section); padding: var(--section-band) 0;
  background: var(--card); box-shadow: 0 0 0 100vmax var(--card); clip-path: inset(0 -100vmax);
}.tp .sec-head{ max-width: 640px; margin-bottom: var(--section-head); }.tp h2{ margin: 0; font-weight: 500; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; }.tp .sec-head p{ margin: 12px 0 0; font-size: 18px; color: var(--graphite); }.tp .sec-head.center{ margin-inline: auto; text-align: center; }.tp h3{ margin: 0; font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; }.tp .grid3{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }.tp .grid4{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }.tp .card{ background: #fff; border: 1px solid var(--line); border-radius: 32px; padding: 32px 36px; }.tp .card.soft{ background: var(--card); border-color: transparent; }.tp .card p{ margin: 12px 0 0; color: var(--graphite); }.tp .num{ display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--tint); font-weight: 600; font-size: 14px; color: var(--accent-ink); margin-bottom: 20px; }.tp .why .card{ padding: 28px 32px; }.tp .why .card h3{ font-size: 20px; }.tp .why .card p{ margin-top: 8px; }.tp .why-ic{ --od-icon-size: 20px; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: var(--tint); color: var(--sea); margin-bottom: 20px; }.tp .uc{ display: grid; gap: 0; align-content: start; padding: 12px 12px 24px; border-radius: 28px; background: #fff; border: 1px solid var(--line); }.tp .uc h3{ font-size: 19px; padding: 20px 12px 0; }.tp .uc p{ margin: 8px 0 0; padding: 0 12px; font-size: 15px; line-height: 1.55; color: var(--graphite); }.tp .uc-vis{ position: relative; height: 148px; border-radius: 20px; background: var(--card); display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; }.tp .uv-card{ display: grid; gap: 7px; width: 112px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: var(--lift); }.tp .uv-line{ display: flex; align-items: center; gap: 6px; }.tp .uv-line b{ font: 600 9px/1 var(--ui); color: var(--graphite); font-variant-numeric: tabular-nums; }.tp .uv-line i{ flex: 1; height: 6px; border-radius: 3px; background: var(--line); }.tp .uv-line.hl i{ background: var(--sea); }.tp .uv-arrow{ --od-icon-size: 16px; color: var(--graphite); }.tp .uv-chip{ padding: 6px 10px; border-radius: 9999px; background: var(--ink); color: var(--code-text); font: 400 11px/1.2 var(--mono); }.tp .uv-frame{ position: relative; width: 168px; height: 96px; border-radius: 12px; background: #fff; box-shadow: var(--lift); display: flex; align-items: center; justify-content: center; }.tp .uv-play{ width: 32px; height: 22px; border-radius: 7px; background: #ff0033; display: flex; align-items: center; justify-content: center; }.tp .uv-play::after{ content: ""; border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; margin-left: 2px; }.tp .uv-cap{ position: absolute; left: 50%; bottom: 10px; translate: -50% 0; padding: 3px 8px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 10px/1.3 var(--ui); white-space: nowrap; }.tp .uv-doc{ display: grid; gap: 6px; width: 84px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: var(--lift); rotate: 3deg; }.tp .uv-doc i{ height: 6px; border-radius: 3px; background: var(--line); }.tp .uv-doc i:first-child{ width: 60%; height: 8px; background: var(--ink); }.tp .api-code{ max-width: 880px; margin: 0 auto; }.tp .api-code .code-tabs{ justify-content: center; }.tp .code-tabs{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }.tp .code-tab{ min-height: 36px; padding: 0 16px; border: 0; border-radius: 9999px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--graphite); font: 500 14px var(--ui); cursor: pointer; }.tp .code-tab[aria-selected="true"]{ background: var(--deep); color: #fff; box-shadow: none; }.tp .code-label{ margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--graphite); }.tp .code{ position: relative; background: var(--ink); border-radius: 20px; }.tp .code pre{ margin: 0; padding: 20px 24px; overflow-x: auto; font: 400 13px/1.6 var(--mono); color: var(--code-text); white-space: pre; }.tp .code .k{ color: var(--code-text); }.tp .code .p{ color: var(--code-punct); }.tp .code .n{ color: var(--code-num); }.tp .code .s{ color: #fff; }.tp .copy-code{ position: absolute; top: 12px; right: 12px; min-height: 32px; padding: 0 14px; border: 1px solid var(--deep-hover); border-radius: 9999px; background: var(--deep); color: #fff; font: 500 13px var(--ui); cursor: pointer; }.tp .copy-code:hover{ background: var(--deep-hover); }.tp .faq{ max-width: 760px; margin-inline: auto; }.tp .faq details{ border-top: 1px solid var(--line); }.tp .faq details:last-child{ border-bottom: 1px solid var(--line); }.tp .faq summary{ display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 20px; font-weight: 500; letter-spacing: -0.015em; }.tp .faq summary::-webkit-details-marker{ display: none; }.tp .faq summary svg{ color: var(--graphite); transition: transform 200ms ease-out; }.tp .faq details[open] summary svg{ transform: rotate(180deg); }.tp .faq details p{ margin: 0 0 20px; max-width: 65ch; color: var(--graphite); }.tp .tool-card{ display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }.tp .tool-card .mark{ width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }.tp .tool-card strong{ display: block; font-size: 17px; font-weight: 500; }.tp .tool-card span{ display: block; font-size: 14px; color: var(--graphite); line-height: 1.5; }.tp .m-yt{ background: #ff0033; }.tp .m-tt{ background: #0a0d12; }.tp .m-ig{ background: #e1306c; }.tp .m-yt::after{ content: ""; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }.tp .m-tt::after{ content: ""; width: 8px; height: 12px; border-right: 3px solid #25f4ee; border-top: 3px solid #fe2c55; border-radius: 0 4px 0 0; }.tp .m-ig::after{ content: ""; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 5px; }.tp footer.endcap{ background: var(--deep); color: var(--mist); margin-top: var(--section); padding: 0 0 32px; position: relative; overflow: hidden; }.tp main:has(section.block.alt:last-child) + footer.endcap{ margin-top: 0; }.tp .ec-cta{ position: relative; text-align: center; padding: 120px 0 112px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }.tp .ec-tiles{ position: absolute; inset: 0; pointer-events: none; }.tp .ef-t{ position: absolute; left: var(--x); top: var(--y); rotate: var(--r); display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.45); }.tp .ef-spring{ background: #fff; color: var(--deep); }.tp .ef-sea{ background: var(--sea); color: #fff; }.tp .ef-mint{ background: var(--tint); color: var(--sea); }.tp .ec-eyebrow{ display: block; margin: 0 0 18px; font: 600 14px/1.4 var(--ui); letter-spacing: -0.005em; color: var(--mist); }.tp .ec-h{ position: relative; margin: 0 auto; max-width: 760px; color: #fff; font-weight: 500; font-size: clamp(40px, 5.6vw, 76px); line-height: 1; letter-spacing: -0.05em; }.tp .ec-sub{ position: relative; margin: 20px 0 0; font-size: 18px; color: var(--mist); }.tp .ec-btns{ position: relative; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 36px; }.tp .btn.ec-primary{ background: #fff; color: var(--ink); box-shadow: none; }.tp .btn.ec-primary:hover{ background: var(--line); }.tp .btn.ec-ghost{ background: transparent; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }.tp .btn.ec-ghost:hover{ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }.tp .endcap .foot{ display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 64px; }.tp .endcap .foot h4{ margin: 0 0 12px; font: 500 13px/1.4 var(--ui); color: #fff; }.tp .endcap .foot a{ display: block; font-size: 14px; color: var(--mist); text-decoration: none; padding: 4px 0; }.tp .endcap .foot a:hover{ color: #fff; }.tp .endcap .foot a.brand{ display: flex; align-items: center; gap: 10px; color: #fff; padding: 0; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }.tp .endcap .foot p{ margin: 12px 0 0; font-size: 14px; color: var(--mist); }.tp .endcap .base{ margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; gap: 24px; flex-wrap: wrap; font: 400 13px/1.5 var(--ui); color: var(--mist); }.tp .endcap .base a{ color: var(--mist); text-decoration: none; }.tp .endcap .base a:hover{ color: #fff; }.tp .toast{ position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 18px; border-radius: 9999px; background: #fff; box-shadow: var(--lift); font-size: 14px; font-weight: 500; z-index: 20; }@media (hover: hover){.tp .tool-card{ transition: border-color var(--t-fast) ease-out; }}@media (max-width: 1100px){.tp .grid4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }.tp .why .grid3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}@media (max-width: 860px){:root{ --gutter: 16px; --section: 80px; --section-head: 32px; --section-band: 64px; }.tp .site-header{ height: 72px; }.tp .site-header .container{ grid-template-columns: 1fr auto; }.tp .nav{ display: none; }.tp .page-head{ padding: 32px 0 40px; }.tp h1 br{ display: none; }.tp .lead{ font-size: 18px; }.tp .tool{ border-radius: 24px; }.tp .tool-in{ border-radius: 23px; padding: 20px 16px 24px; }.tp .tf-row .btn{ width: 100%; }.tp .grid3,.tp .why .grid3{ grid-template-columns: 1fr; }.tp .card,.tp .why .card{ padding: 24px; }.tp .seg{ grid-template-columns: 52px 1fr; gap: 8px; padding: 12px 16px; }.tp .ec-cta{ padding: 88px 0 80px; }.tp .ef-t{ width: 40px; height: 40px; border-radius: 11px; }.tp .ef-t svg{ width: 16px; height: 16px; }.tp .ef-t:nth-child(n+5){ display: none; }.tp .endcap .foot{ grid-template-columns: repeat(2, minmax(0, 1fr)); }.tp .endcap .foot > :first-child{ grid-column: 1 / -1; }}@media (max-width: 560px){.tp .grid4{ grid-template-columns: 1fr; }.tp .header-cta{ padding: 0 16px; font-size: 14px; }.tp .res-foot{ flex-direction: column; align-items: stretch; }.tp .res-actions .btn{ flex: 1 1 auto; }}
.tp .page-head:not(:has(.hv)){min-height:0}
.tp .hv-lines.hv-compact{width:176px}
.tp .page-head:has(.hv-compact) h1{max-width:760px;text-wrap:balance}
.tp .hv-lines.hv-worded span{grid-template-columns:72px 1fr;font-family:inherit;font-size:12px}
@media (max-width:1279px){.tp .page-head .hv>:not(.hv-tile){display:none}}
@media (max-width:1100px){.tp .page-head .hv{display:block;position:static;z-index:auto;margin-bottom:16px}.tp .page-head .hv>:not(.hv-tile){display:none}.tp .page-head .hv-tile{position:static;width:56px;height:56px;border-radius:14px}.tp .page-head .hv-tile svg{width:26px;height:26px}}
.tp .tool{padding:0}
.tp form.tf{display:block}
.tp .tool-card{color:inherit;text-decoration:none}
.tp .tool-card:hover{border-color:var(--ink)}
.tp .faq summary::after{content:none}
.tp .faq .ans,.tp .faq details p{margin:0 0 20px;max-width:65ch;color:var(--graphite)}
.tp .how-copy{margin:0 0 28px;max-width:640px;font-size:18px;line-height:1.5;color:var(--graphite)}
.tp .sec-head .how-copy{margin:12px 0 0}
.tp .codetabs{max-width:880px;margin:0 auto}
.tp .tablist{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.tp .tab{min-height:36px;padding:0 16px;border:0;border-radius:9999px;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--graphite);font:500 14px var(--ui);cursor:pointer}
.tp .tab[aria-selected="true"]{background:var(--deep);color:#fff;box-shadow:none}
.tp .code-body{position:relative;background:var(--ink);border-radius:20px}
.tp .code-body pre{margin:0;padding:20px 24px;overflow-x:auto;color:#c3c7cf}
.tp .code-body .copy{position:absolute;top:12px;right:12px}
.tp .api-extra{max-width:640px;margin:20px auto 0}
.tp > footer.endcap{margin-top:0}
.tp .code .tk-k{color:var(--code-text)}
.tp .code .tk-p{color:var(--code-punct)}
.tp .code .tk-n{color:var(--code-num)}
.tp .code .tk-s{color:#fff}
.tp .tool-card .tile{display:inline-flex}
@media (max-width:560px){.tp .ec-tiles .ef-t:nth-child(2),.tp .ec-tiles .ef-t:nth-child(4){display:none}}
@media (min-width:861px){
  .tp .endcap .foot{grid-template-columns:minmax(180px,1.4fr) repeat(4,minmax(0,1fr))}
}


:root { --mono: var(--ui); --heading: "DM Sans", "Geist", ui-sans-serif, system-ui, sans-serif; --spring: #14c9a0; --spring-hover: #2ad8b0; }
.tp h1, .tp h2, .v-u h3, .v-dc h3, .ec-h { font-family: var(--heading); }
.nav .brand, .foot .brand { font-family: var(--heading); font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.tp .hv-tile { background: #ff0033; box-shadow: none; }
.tp .hv-card { box-shadow: 0 0 0 1px var(--line), 0 12px 28px -18px rgba(15, 61, 58, .3); }
.tp .sec-head { margin-bottom: 32px; }
.tp section.block { padding-top: 112px; }

.v-dcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v-dc { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.v-art { display: flex; align-items: center; justify-content: center; height: 176px; overflow: hidden; background: var(--tint); }
.v-art svg { display: block; width: 100%; height: 100%; max-width: 360px; }
.v-art text, .v-u text { font-family: var(--ui); }
.v-tx { display: flex; gap: 14px; padding: 20px 24px 24px; }
.v-num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--deep); color: #fff; font-size: 13px; font-weight: 500; }
.tp .v-dc h3 { font-size: 20px; font-weight: 550; line-height: 1.4; letter-spacing: -.012em; }
.v-dc p { margin: 6px 0 0; color: var(--graphite); font-size: 15px; line-height: 1.5; }

.v-whys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.v-w { flex-direction: row !important; align-items: center; }
.v-w .v-u-t { flex: 1 1 44%; min-width: 0; }
.v-w .v-u-d { flex: 1 1 56%; min-width: 0; }
.v-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.v-mini { display: flex; gap: 14px; padding: 18px 20px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.v-mini > div { display: grid; align-content: start; gap: 3px; min-width: 0; }
.v-mini b { color: var(--ink); font-weight: 500; line-height: 1.35; }
.v-mini div span { color: var(--graphite); font-size: 14px; line-height: 1.45; }
.v-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--tint); color: var(--sea); }
.v-ic svg { width: 18px; height: 18px; }

.v-us { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v-u { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-width: 0; padding: 24px; border-radius: 16px; overflow: hidden; }
.tp .v-u h3 { font-size: 22px; font-weight: 550; line-height: 1.2; letter-spacing: -.015em; }
.v-u p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
.v-deep { background: var(--deep); } .v-sea { background: var(--sea); } .v-mint { background: var(--tint); }
.v-u.v-deep, .v-u.v-sea, .v-u.v-deep h3, .v-u.v-sea h3 { color: #fff; }
.v-u.v-mint h3 { color: var(--deep); }
.v-u.v-mint p { color: var(--graphite); }
.tp .v-u code { background: #fff; color: var(--deep); }
.v-u-d svg { display: block; width: 100%; height: auto; overflow: visible; }
.v-wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 24px; }
.d-a, .d-b { transform-box: fill-box; transform-origin: center; transition: translate .35s ease-out, rotate .35s ease-out; }
.v-dc:hover .d-a, .v-u:hover .d-a { translate: 0 -5px; rotate: -1.5deg; }
.v-dc:hover .d-b, .v-u:hover .d-b { translate: 0 4px; rotate: 1.5deg; }
@media (prefers-reduced-motion: reduce) { .d-a, .d-b { transition: none; } .v-dc:hover .d-a, .v-u:hover .d-a, .v-dc:hover .d-b, .v-u:hover .d-b { translate: none; rotate: none; } }


.tp .tf-row .btn, .nav .btn-go { --edge: 4px; background: var(--spring); color: var(--deep); font-weight: 600; box-shadow: 0 var(--edge) 0 var(--deep); transition: transform .14s ease-out, box-shadow .14s ease-out, background-color .14s ease-out; }
.tp .tf-row .btn { border-radius: 12px; }
.tp .tf-row .btn:hover:not(:disabled), .nav .btn-go:hover { background: var(--spring-hover); color: var(--deep); transform: translateY(-2px); box-shadow: 0 calc(var(--edge) + 2px) 0 var(--deep); }
.tp .tf-row .btn:active:not(:disabled), .nav .btn-go:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--deep); transition-duration: .05s; }
.tp .tf-row .btn:disabled { background: var(--tint); color: var(--graphite); box-shadow: none; }
.tp .ec-btns .btn.ec-primary, .tp .ec-btns .btn.ec-primary:hover { color: var(--deep); }
.tp .ec-btns .btn.ec-primary { background: var(--spring); }
.tp .ec-btns .btn.ec-primary:hover { background: var(--spring-hover); }
@media (prefers-reduced-motion: reduce) { .tp .tf-row .btn, .nav .btn-go { transition: none; } .tp .tf-row .btn:hover:not(:disabled), .nav .btn-go:hover, .tp .tf-row .btn:active:not(:disabled), .nav .btn-go:active { transform: none; } }


.v-ex { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 40px; align-items: start; }
.v-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: v-step; }
.v-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; counter-increment: v-step; }
.v-steps li::before { content: counter(v-step); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--tint); color: var(--sea); font-size: 14px; font-weight: 600; }
.v-steps b { color: var(--ink); font-weight: 500; line-height: 1.4; }
.v-steps span { color: var(--graphite); font-size: 15px; line-height: 1.5; }
.v-ref { display: inline-block; margin: 28px 0 0 46px; font-size: 15px; font-weight: 500; text-decoration: none; }
.v-ref:hover { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; }
.ed { min-width: 0; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(15, 61, 58, .4); }
.ed-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 10px; border-bottom: 1px solid #edf2f0; }
.ed-tabs { display: flex; gap: 2px; min-width: 0; }
.ed-tabs button { padding: 7px 11px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 500 13px/1 var(--ui); cursor: pointer; }
.ed-tabs button:hover { color: var(--ink); }
.ed-tabs button[aria-selected="true"] { background: var(--tint); color: var(--sea); }
.ed-copy { flex: none; min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--deep); color: #fff; font: 500 13px/1 var(--ui); cursor: pointer; }
.ed-copy:hover { background: var(--deep-hover); }
.ed-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.ed-req { min-width: 0; padding: 14px 0; overflow-x: auto; }
.ed-res { min-width: 0; padding: 12px 16px; border-left: 1px solid #edf2f0; background: #f7fbf9; }
.ed-rh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.ok-pill { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--tint); color: var(--sea); font: 500 13px/1 var(--ui); }
.ed-code, .tp .json { margin: 0; color: var(--ink); font: 400 13px/1.75 var(--ui); white-space: pre; }
.ed-code code { padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
.ed-code .ln { display: block; padding-right: 16px; }
.ed-code .ln i { display: inline-block; width: 34px; padding-right: 12px; color: #b9cbc5; font-style: normal; text-align: right; user-select: none; }
.tp .json { max-height: 420px; overflow: auto; line-height: 1.6; }
.tk-k { color: #0b7285; } .tk-p { color: #5f736d; } .tk-n { color: #c4281c; } .tk-s { color: #1a7f4b; } .tk-c { color: #7a3fc4; }


.tp .tool-card { position: relative; gap: 10px; padding: 20px 20px 22px; border-radius: 16px; transition: box-shadow var(--t-fast) ease-out, translate var(--t-fast) ease-out; }
.tp .tool-card:hover { border-color: var(--sea); translate: 0 -2px; box-shadow: 0 12px 24px -18px rgba(15, 61, 58, .4); }
.tp .tool-card::after { content: "\2192"; position: absolute; top: 20px; right: 20px; color: var(--sea); opacity: 0; translate: -4px 0; transition: opacity var(--t-fast) ease-out, translate var(--t-fast) ease-out; }
.tp .tool-card:hover::after { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .tp .tool-card, .tp .tool-card::after { transition: none; } .tp .tool-card:hover { translate: none; } }


.tp section.v-q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.tp section.v-q { padding-bottom: 112px; }
.v-q .sec-head { margin: 0; }
.tp .v-q .faq { max-width: none; width: 100%; margin: 0; }
.tp .v-q .faq summary { padding: 18px 0; font-size: 18px; }

@media (max-width: 1100px) {
  .v-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-whys { grid-template-columns: minmax(0, 1fr); }
  .v-us { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-us .v-wide { grid-column: span 2; }
}
@media (max-width: 900px) {
  .v-dcs, .v-ex, .ed-body { grid-template-columns: minmax(0, 1fr); }
  .ed-res { border-left: 0; border-top: 1px solid #edf2f0; }
  .tp section.v-q { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .tp section.block { padding-top: 80px; }
  .v-minis, .v-us { grid-template-columns: minmax(0, 1fr); }
  .v-us .v-wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .v-w { flex-direction: column !important; align-items: stretch; }
  .v-w .v-u-d { flex: none; }
  .tp section.v-q { padding-bottom: 80px; }
}
@media (max-width: 480px) {
  .nav .brand { gap: 6px; font-size: 16px; }
  .nav-in { gap: 8px; }
  .nav .nav-cta, .nav-in > .btn, .nav-right .btn { padding-left: 12px; padding-right: 12px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .nav .brand { font-size: 15px; }
  .nav .brand svg { width: 26px; height: 26px; }
  .tp .ss-sum { margin-left: 4px; }
  .nav .btn { padding-left: 10px !important; padding-right: 10px !important; font-size: 14px; }
}