.code-cell{position:relative;width:min(20cqw,7.2rem);aspect-ratio:1;height:var(--height);background:var(--clr-metal-50);border-radius:clamp(.6rem,3cqw,1.2rem);border:2px solid transparent;overflow:hidden;font-size:clamp(1.8rem,5cqw,2.6rem);transition:border-color .2s ease}.code-cell b{position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0;-webkit-user-select:none;user-select:none;display:grid;place-items:center;font-weight:600;text-transform:uppercase;color:var(--clr-metal-950);transition:margin-top .2s ease-out,opacity .2s ease-out}.code-cell.active{border-color:var(--clr-metal-950)}.code-cell.state-error:not(.active){border-color:var(--clr-destructive-400)}.code-cell:not(.filled) b:first-child{margin-top:-100%;opacity:0}.code-cell:not(.filled) b:last-child{margin-top:0;color:var(--clr-metal-300)}.code-cell.filled b:first-child{margin-top:0;opacity:1}.code-cell.filled b:last-child{margin-top:100%;opacity:0}.code-set{position:relative;border-radius:clamp(.6rem,3cqw,1.2rem);cursor:text;overflow:hidden}.code-set .code-cells{display:flex;justify-content:center;gap:clamp(.8rem,3.5cqw,1.6rem)}.code-set .model{width:auto;position:absolute;z-index:-1;pointer-events:none;top:0;right:0;bottom:0;width:100%;font-size:2rem;left:-50%}