.kp{--kp-bg:#f3f3f1;--kp-fg:#121211;--kp-muted:#6e6d68;--kp-line:#dddcd7;--kp-panel:#ebebe8;--kp-stage:#fff;--kp-sans:"Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;--kp-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;background:var(--kp-bg);min-height:100vh;color:var(--kp-fg);font-family:var(--kp-sans);--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-size:15px;line-height:1.5}.kp .gutter{padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}.kp .label{font-family:var(--kp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--kp-muted);font-size:11px}.kp .top{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;padding-block:14px;display:flex}.kp .top strong{color:var(--kp-fg);font-weight:500}.kp .controls{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start;gap:18px 28px;max-width:1180px;margin-inline:auto;padding-block:8px 22px;display:grid}.kp .field{gap:10px;min-width:0;display:grid}.kp .field .label{justify-content:space-between;gap:8px;display:flex}.kp .field output{color:var(--kp-fg);font-variant-numeric:tabular-nums;letter-spacing:.04em}.kp input[type=range]{width:100%;accent-color:var(--kp-fg)}.kp input[type=range]:disabled{opacity:.4}.kp .check{cursor:pointer;align-items:center;gap:8px;font-size:14px;display:inline-flex}.kp .check input{accent-color:var(--kp-fg);width:16px;height:16px}.kp .seg{border:1px solid var(--kp-line);border-radius:999px;width:max-content;max-width:100%;padding:3px;display:inline-flex}.kp .seg button,.kp .btn{font:500 13px/1 var(--kp-sans);color:var(--kp-muted);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:9px 14px;transition:color .2s,background-color .2s}.kp .seg button[aria-pressed=true]{background:var(--kp-fg);color:var(--kp-bg)}.kp .seg button:hover:not([aria-pressed=true]),.kp .btn:hover{color:var(--kp-fg)}.kp .btn{border:1px solid var(--kp-line);color:var(--kp-fg);width:max-content}.kp button:focus-visible,.kp input:focus-visible{outline:1.5px solid var(--kp-fg);outline-offset:2px}.kp .stage{border-top:1px solid var(--kp-line);background:var(--kp-stage)}.kp .stage:last-of-type{border-bottom:1px solid var(--kp-line)}.kp .stage-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;max-width:1180px;margin-inline:auto;padding-block:14px 0;display:flex}.kp .stage-head h2{letter-spacing:-.01em;margin:0;font-size:17px;font-weight:600}.kp .stage-head p{color:var(--kp-muted);max-width:60ch;margin:2px 0 0;font-size:14px}.kp .stage-head .current{font-family:var(--kp-mono);color:var(--kp-fg);white-space:nowrap;font-size:12px}.kp .stage-inner{max-width:100%;margin-inline:auto;transition:max-width .35s}.kp .stages[data-mode=movil] .stage-inner{border-inline:1px solid var(--kp-line);max-width:390px}.kp .panel{max-width:1180px;margin-inline:auto;padding-block:28px 56px}.kp .code{border:1px solid var(--kp-line);background:var(--kp-panel);border-radius:6px;min-width:0}.kp .code-head{border-bottom:1px solid var(--kp-line);justify-content:space-between;align-items:center;gap:8px;padding:8px 8px 8px 14px;display:flex}.kp .code pre{font:13px/1.6 var(--kp-mono);color:var(--kp-fg);white-space:pre;margin:0;padding:14px;overflow-x:auto}.kp .code .c{color:var(--kp-muted)}.kp .copy{font:500 12px/1 var(--kp-sans);padding:7px 12px}@media (prefers-reduced-motion:reduce){.kp .stage-inner{transition:none}}