.ob-code{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:408px;height:64px;display:grid;position:relative}.ob-code .cell{border:1px solid var(--smoke);background:var(--field-bg);font:400 30px / 1 var(--serif-ob);font-variant-numeric:tabular-nums;color:var(--off);border-radius:14px;place-items:center;transition:border-color .2s,box-shadow .2s,background-color .2s;display:grid}.ob-code .cell.on{border-color:var(--off);box-shadow:0 0 0 2px var(--parchment), 0 0 0 4px var(--lake)}.ob-code .cell.on:empty:after{content:"";background:var(--lake);width:1.5px;height:26px;animation:1s step-end infinite ob-caret}@keyframes ob-caret{50%{opacity:0}}.ob-code .cell.filled{background:var(--cell-filled)}.ob-code[data-bad] .cell{border-color:var(--err)}.ob-code[data-bad] .cell.on{box-shadow:0 0 0 2px var(--parchment), 0 0 0 4px var(--err)}.ob-code[data-busy] .cell{border-color:var(--lake);background:var(--peri)}.ob-code input{color:#0000;caret-color:#0000;letter-spacing:1em;opacity:.01;cursor:text;background:0 0;border:0;outline:none;width:100%;height:100%;margin:0;padding:0;font-size:30px;position:absolute;inset:0}.ob-code input::selection{background:0 0}.ob-code-field{gap:7px;margin:0 0 20px;display:grid}@media (prefers-reduced-motion:reduce){.ob-code .cell.on:empty:after{animation:none}}