.opt { position: relative; display: block; cursor: pointer; height: 100%; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-body { height: 100%; border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; padding: 1rem; transition: border-color .15s, box-shadow .15s, background .15s; }
.opt:hover .opt-body { border-color: #bcd4ff; }
.opt input:checked + .opt-body { border-color: #0b57f0; background: #f5f9ff; box-shadow: 0 0 0 3px rgba(31,107,255,.14); }
.opt input:focus-visible + .opt-body { outline: 2px solid #1f6bff; outline-offset: 2px; }
.opt-tick { opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.opt input:checked + .opt-body .opt-tick { opacity: 1; transform: scale(1); }
.grp-invalid .opt-body { border-color: #fca5a5; }
.field.is-invalid { border-color: #ef4444; }
.field.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.js [data-step]:not(.is-active) { display: none; }
.step-dot { transition: background .2s, color .2s, border-color .2s; }
#bar { transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { #bar, .opt-body, .opt-tick, .step-dot { transition: none; } }