@layer theme,base;@layer components{.ui-code-frame{max-width:calc(var(--code-length) * 64px);position:relative}.ui-code-boxes{grid-template-columns:repeat(var(--code-length), minmax(0, 1fr));gap:var(--space-2);display:grid}.ui-code-box{border:1.5px solid var(--control-edge);border-radius:var(--radius-field);background:var(--bg-surface);height:56px;color:var(--text-strong);font:650 var(--type-title-sm) / 1 var(--font-ui);font-variant-numeric:tabular-nums;transition:border-color var(--dur-1) var(--ease-enter), box-shadow var(--dur-1) var(--ease-enter);place-items:center;display:grid}.ui-code-input{z-index:1;color:#0000;caret-color:#0000;width:100%;height:100%;font-size:var(--type-lg);letter-spacing:2em;cursor:text;background:0 0;border:0;padding:0;position:absolute;inset:0}.ui-code-input::selection{background:0 0}.ui-code-input:focus{outline:none}.ui-code-input:hover:not(:disabled,:focus)+.ui-code-boxes .ui-code-box{border-color:var(--control-edge-hover)}.ui-code-input:focus+.ui-code-boxes .ui-code-box[data-next]{border-color:var(--ring-focus);box-shadow:0 0 0 4px var(--focus-halo)}.ui-code-input[aria-invalid=true]+.ui-code-boxes .ui-code-box{border-color:var(--danger)}.ui-code-input[aria-invalid=true]:focus+.ui-code-boxes .ui-code-box[data-next]{box-shadow:0 0 0 4px var(--danger-halo)}.ui-code-input:disabled{cursor:not-allowed}.ui-code-input:disabled+.ui-code-boxes .ui-code-box{border-color:var(--control-off);background:var(--bg-sunken);color:var(--text-subtle)}@media (forced-colors:active){.ui-code-box{border-color:canvastext}.ui-code-input:focus+.ui-code-boxes .ui-code-box[data-next]{outline:2px solid highlight}}}@layer utilities;