/* dial widget: the vault. Selectors are all under .w-dial. */
.w-dial{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;justify-items:center}
.w-dial-vault{position:relative;width:min(100%,340px);aspect-ratio:1}@media (max-width:520px){.w-dial-vault{width:min(100%,250px)}}
.w-dial-door{width:100%;height:100%;display:block;overflow:visible}
.w-bolt{transition:transform var(--t-story) var(--ease-snap)}
.w-bolt:nth-child(1){transform:translateY(-16px)}.w-bolt:nth-child(2){transform:translateY(16px)}.w-bolt:nth-child(3){transform:translateX(-16px)}.w-bolt:nth-child(4){transform:translateX(16px)}
.sealed .w-bolt{transform:none}
.w-dial-knob{position:absolute;left:20%;top:20%;width:60%;height:60%;border-radius:50%;touch-action:none;user-select:none}
.js-anim .w-dial-knob[role=slider]{cursor:grab}.w-dial-knob.grab{cursor:grabbing}
.w-dial-knob svg{width:100%;height:100%;display:block}
.w-dial-checks{list-style:none;margin:0;padding:0;width:100%;display:grid;border-top:1.5px solid var(--rule)}
.w-dial-checks li{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(23,35,46,.3);color:var(--ink2);transition:color var(--t-base)}
.w-dial-checks small{font:400 13px var(--sans)}
.w-pin{width:18px;height:18px;border:2px solid var(--ink);border-radius:50%;transition:background var(--t-base),transform var(--t-base) var(--ease-snap)}
.w-dial-checks li.in{color:var(--ink);font-weight:600}
.w-dial-checks li.in .w-pin{transform:scale(1.15);background:var(--water)}
.w-dial-checks li:nth-child(1).in .w-pin{background:var(--warm)}.w-dial-checks li:nth-child(2).in .w-pin{background:var(--spark)}.w-dial-checks li:nth-child(3).in .w-pin{background:var(--go)}
.w-dial-status{text-align:center}
@media (prefers-reduced-motion:reduce){.w-bolt,.w-pin{transition:none}.w-dial-knob{transition:none!important}}