.drgn-code-wrap {
  --code-step: clamp(2.25rem, 9vw, 2.9rem);
  position: relative; display: block; width: calc(6 * var(--code-step)); max-width: 100%;
  margin: .4rem 0; isolation: isolate;
}
.drgn-code-cells { position:absolute; inset:0; display:grid; grid-template-columns:repeat(6,1fr); gap:.3rem; pointer-events:none; }
.drgn-code-cells > span { border:1px solid currentColor; border-radius:.35rem; opacity:.55; }
input.drgn-code-input {
  position:relative; display:block; box-sizing:border-box; width:100%; min-width:0; height:3.3rem;
  font-family:monospace !important; font-size:1.5rem !important; font-weight:400; line-height:normal;
  letter-spacing:calc(var(--code-step) - 1ch); text-align:left; direction:ltr;
  padding: .5rem 0 .5rem calc((var(--code-step) - 1ch - .3rem) / 2) !important;
  border:0 !important; border-radius:.35rem; background:transparent !important; color:inherit;
  margin:0 !important; box-shadow:none;
}
input.drgn-code-input:focus { outline:2px solid currentColor; outline-offset:3px; }
.drgn-code-help { display:block; font-size:.85rem; line-height:1.4; margin:.5rem 0; }
button.drgn-code-toggle { display:block; width:fit-content; color:inherit; background:transparent; border:1px solid currentColor; border-radius:.35rem; padding:.5rem .7rem; margin:.35rem 0 .75rem; font:inherit; cursor:pointer; }
button.drgn-code-toggle:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.drgn-code-recovery { width:100%; }
.drgn-code-recovery .drgn-code-cells { display:none; }
.drgn-code-recovery input.drgn-code-input { letter-spacing:normal; font:inherit !important; padding:.65rem !important; border:1px solid currentColor !important; }
@media (forced-colors: active) { .drgn-code-cells > span { opacity:1; border-color:CanvasText; } }
/* Reserve the trailing letter-spacing inside the input so browsers do not
   horizontally scroll away the first digit when the caret reaches the end. */
.drgn-code-wrap { overflow:hidden; overflow:clip; border-radius:.35rem; }
.drgn-code-wrap:focus-within { outline:2px solid currentColor; outline-offset:3px; }
input.drgn-code-input { width:calc(100% + var(--code-step)); max-width:none; }
input.drgn-code-input:focus { outline:none; }
.drgn-code-recovery input.drgn-code-input { width:100%; }