.repl{display:grid;grid-gap:36px;gap:36px;max-width:680px}.repl-hero{padding:4px 0}.repl-badge{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:color-mix(in srgb,var(--color-primary) 12%,#fff);color:var(--color-primary);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.repl-title{margin:14px 0 12px;font-size:clamp(26px,4.2vw,36px);font-weight:800;letter-spacing:-.035em;line-height:1.12;color:#0f172a}.repl-title__accent{display:inline;color:var(--color-primary)}.repl-lead{margin:0 0 22px;max-width:540px;font-size:15px;font-weight:600;line-height:1.5;color:#64748b}.repl-cta-row{display:flex;flex-wrap:wrap;gap:10px}.repl-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:12px;background:#229ed9;color:#fff;font-size:15px;font-weight:800;text-decoration:none;box-shadow:0 10px 24px rgba(34,158,217,.28);transition:filter .15s ease,transform .15s ease}.repl-cta--site{background:#db2777;box-shadow:0 10px 24px rgba(219,39,119,.28)}.repl-cta svg{width:22px;height:22px;flex-shrink:0}.repl-cta:hover{filter:brightness(1.04);color:#fff;transform:translateY(-1px)}.repl-section{padding-top:4px}.repl-section__head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}.repl-kicker{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--color-primary);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.repl-h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;color:#0f172a}.repl-steps{list-style:none;margin:0;display:grid;grid-gap:0;gap:0;border-left:2px solid color-mix(in srgb,var(--color-primary) 28%,#e2e8f0);padding:0 0 0 18px}.repl-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);grid-gap:12px;gap:12px;align-items:start;padding:12px 0;position:relative}.repl-steps li+li{border-top:1px solid #f1f5f9}.repl-step-num{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--color-primary);color:#fff;font-size:13px;font-weight:800;box-shadow:0 6px 14px color-mix(in srgb,var(--color-primary) 28%,transparent)}.repl-steps strong{display:block;font-size:15px;font-weight:800;color:#0f172a;margin-bottom:4px}.repl-steps p{margin:0;font-size:13px;font-weight:600;line-height:1.45;color:#64748b}.repl-steps em{font-style:normal;color:var(--color-primary);font-weight:800}.repl-example{display:grid;grid-gap:0;gap:0;padding:4px 0 4px 16px;border-left:3px solid var(--color-primary)}.repl-example__row{display:grid;grid-template-columns:96px minmax(0,1fr);grid-gap:12px;gap:12px;align-items:baseline;padding:10px 0}.repl-example__row+.repl-example__row{border-top:1px dashed #e2e8f0}.repl-example__row span{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8}.repl-example__row code{display:block;padding:0;border:0;background:transparent;font-size:14px;font-weight:700;color:#0f172a;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.repl-text{margin:0 0 14px;font-size:14px;font-weight:600;line-height:1.5;color:#475569}.repl-list{margin:0 0 16px;padding:0;list-style:none;display:grid;grid-gap:10px;gap:10px}.repl-list li{position:relative;padding-left:18px;font-size:14px;font-weight:600;line-height:1.45;color:#334155}.repl-list li:before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--color-primary)}.repl-text--foot a{color:var(--color-primary);font-weight:800;text-decoration:none}.repl-text--foot a:hover{text-decoration:underline}@media screen and (max-width:600px){.repl-example__row{grid-template-columns:1fr;gap:4px}.repl-steps{padding-left:14px}}