code-field{display:grid;gap:.45rem}code-field label{font-size:var(--label);font-weight:600;color:var(--on-surface-variant)}code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}code-field input{padding:.85rem 1rem;border:1px solid var(--outline-strong);border-radius:var(--shape-s);background:transparent;font-family:var(--face-mono);font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;transition:border-color var(--dur-fast) var(--ease-standard)}code-field input::placeholder{color:var(--on-surface-variant);opacity:.55;letter-spacing:.12em}code-field button{padding:.85rem 1.25rem;border:0;border-radius:var(--shape-s);background:color-mix(in srgb,var(--on-surface) 10%,transparent);color:var(--on-surface);font-size:var(--label);font-weight:600;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard)}code-field button:hover{background:color-mix(in srgb,var(--on-surface) 18%,transparent)}code-message{display:flex;align-items:center;gap:.35rem;min-height:1.4rem;font-size:var(--label);color:var(--on-surface-variant)}code-field[state=applied] input{border-color:var(--primary)}code-field[state=applied] code-message{color:var(--primary)}code-field[state=error] input{border-color:#e2725b}code-field[state=error] code-message{color:#e2725b}