.code-slots{--code-accent:var(--theme-primary,#8b7cff);--code-surface:var(--theme-background,#111118);--code-border:color-mix(in srgb, var(--theme-foreground,#fff) 12%, transparent);max-width:100%;display:inline-flex}.code-slots__row{gap:.5rem;max-width:100%;display:flex;position:relative}.code-slots__input{z-index:2;cursor:text;opacity:0;width:100%;height:100%;position:absolute;inset:0}.code-slots__slot{border:1px solid var(--code-border);background:color-mix(in srgb, var(--code-surface) 88%, white 12%);width:clamp(2.4rem,11vw,3.25rem);height:clamp(2.8rem,13vw,3.75rem);color:var(--theme-foreground,#fff);font-variant-numeric:tabular-nums;border-radius:.8rem;place-items:center;font-size:clamp(1.15rem,5vw,1.5rem);font-weight:800;transition:border-color .18s,background-color .18s,transform .18s,box-shadow .18s;display:grid}.code-slots__row:focus-within .code-slots__slot:not(.code-slots__slot--filled):first-of-type,.code-slots__row:hover .code-slots__slot:not(.code-slots__slot--filled){border-color:color-mix(in srgb, var(--code-accent) 65%, transparent)}.code-slots__slot--filled{border-color:color-mix(in srgb, var(--code-accent) 55%, transparent);background:color-mix(in srgb, var(--code-accent) 18%, var(--code-surface));color:var(--code-accent);animation:.22s cubic-bezier(.22,1,.36,1) code-slot-land}.code-slots[data-status=error] .code-slots__slot{background:color-mix(in srgb, #ef4444 12%, var(--code-surface));border-color:#ef4444a6}.code-slots[data-status=success] .code-slots__slot{background:color-mix(in srgb, #34d399 18%, var(--code-surface));color:#34d399;border-color:#34d39999}.code-slots[data-disabled]{opacity:.5}@keyframes code-slot-land{0%{opacity:.35;transform:translateY(5px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.code-slots__slot{transition:none;animation:none}}