.cf-code{--cf-line: var(--hf-line-2, #d1d5db);--cf-surface: var(--hf-surface, #ffffff);--cf-filled: var(--hf-surface-2, #f8fafc);--cf-ink: var(--hf-ink, #111827);--cf-focus: var(--hf-purple, #8b5cf6);--cf-ring: var(--hf-focus, 0 0 0 3px rgba(139, 92, 246, .22));--cf-error: var(--hf-error, #b91c1c);position:relative;width:100%;max-width:344px;margin-inline:auto}.cf-code__input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;font-size:16px;cursor:text}.cf-code__input::selection{background:transparent}.cf-code .cf-code__input:focus-visible{outline:none}.cf-code__cells{display:flex;align-items:center;gap:8px}.cf-code__cell{position:relative;flex:1 1 0;min-width:0;height:56px;display:grid;place-items:center;border:1px solid var(--cf-line);border-radius:12px;background:var(--cf-surface);color:var(--cf-ink);font-family:var(--hf-font-display, var(--font-display, inherit));font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;transition:border-color .15s ease,box-shadow .15s ease}.cf-code__cell.is-filled{background:var(--cf-filled)}.cf-code__cell.is-active{border-color:var(--cf-focus);background:var(--cf-surface);box-shadow:var(--cf-ring)}.cf-code__gap{flex:0 0 10px;height:2px;border-radius:1px;background:var(--cf-line)}.cf-code__caret{position:absolute;width:2px;height:26px;border-radius:1px;background:var(--cf-ink)}@media(prefers-reduced-motion:no-preference){.cf-code__caret{animation:cf-blink 1.1s steps(1) infinite}}@keyframes cf-blink{50%{opacity:0}}.cf-code--invalid .cf-code__cell{border-color:var(--cf-error)}.cf-code--busy .cf-code__cell,.cf-code--disabled .cf-code__cell{opacity:.6}@media(max-width:380px){.cf-code__cells{gap:6px}.cf-code__cell{height:50px;font-size:22px}}