.code-boxes{align-items:center;gap:10px;display:flex}.code-boxes-prefix{font-family:var(--font-mono);color:var(--text-tertiary);white-space:nowrap;padding-right:6px;font-size:22px;line-height:28px}.code-boxes-row{gap:var(--space-2);flex:1;min-width:0;display:flex;position:relative}.code-boxes-fixed .code-boxes-row{flex:none;gap:10px}.code-box{border:1px solid var(--border-control);min-width:0;height:56px;font-family:var(--font-mono);font-size:24px;font-weight:var(--font-weight-semibold);color:var(--text-primary);border-radius:10px;flex:1 1 0;justify-content:center;align-items:center;line-height:30px;display:flex}.code-boxes-fixed .code-box{flex:none;width:52px;height:60px;font-size:26px;line-height:32px}.code-box.is-filled{border:1.5px solid var(--text-primary)}.code-box.is-active{border:1.5px solid var(--focus-ring);box-shadow:0 0 0 3px color-mix(in srgb, var(--focus-ring) 15%, transparent)}:is(.code-boxes-input[aria-invalid=true]~.code-box,.code-boxes-row:has(.code-boxes-input[aria-invalid=true]) .code-box.is-filled){border-color:var(--danger-text)}.code-boxes-input{color:#0000;caret-color:#0000;width:100%;height:100%;min-height:0;font-size:var(--text-md);cursor:text;background:0 0;border:0;padding:0;position:absolute;inset:0}.code-boxes-input::selection{background:0 0}.code-boxes-input:focus-visible{outline:none}@media (max-width:360px){.code-boxes-fixed .code-box{width:44px;height:52px}.code-boxes-prefix{font-size:var(--text-md)}}@media (forced-colors:active){.code-box{border-color:canvastext}.code-box.is-active{outline-offset:2px;outline:3px solid highlight}}