.vm-bistable-demo, .vm-bistable-practice { margin: 1.75rem 0 2rem; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.prose .vm-bistable-demo h3, .prose .vm-bistable-practice h3 { margin: 0 0 1rem; font-size: 1.3rem; line-height: 1.4; }
.vm-bistable-controls { min-width: 0; margin: 0; padding: 0; border: 0; }
.vm-bistable-controls legend { margin: 0 0 .5rem; padding: 0; font-size: 1rem; font-weight: 750; }
.vm-bistable-controls > input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.vm-bistable-controls > label { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 44px; margin: .25rem .25rem .25rem 0; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-weight: 750; font-size: 1rem; cursor: pointer; }
.vm-bistable-controls > input:checked + label { color: var(--white); background: var(--ink); border-color: var(--ink); }
.vm-bistable-controls > input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 4px; }
.vm-bistable-cube { display: block; width: 100%; max-width: 420px; height: auto; margin: 1rem auto; background: #fffefa; }
.vm-bistable-face { display: none; opacity: .3; }
.vm-bistable-upper { fill: #ff6f4f; }
.vm-bistable-lower { fill: #3db299; }
.vm-bistable-edges { fill: none; stroke: #111033; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.vm-bistable-none-text, .vm-bistable-upper-text, .vm-bistable-lower-text { display: none; }
#cara-neutra:checked ~ .vm-bistable-state .vm-bistable-none-text, #cara-alta:checked ~ .vm-bistable-state .vm-bistable-upper-text, #cara-baja:checked ~ .vm-bistable-state .vm-bistable-lower-text { display: inline; }
#cara-alta:checked ~ .vm-bistable-cube .vm-bistable-upper, #cara-baja:checked ~ .vm-bistable-cube .vm-bistable-lower { display: block; }
.prose .vm-bistable-state { margin: .75rem 0 1rem; font-size: 1rem; }
.prose .vm-bistable-note { margin-bottom: 0; font-size: 1rem; }
.vm-bistable-kicker { display: inline-block; margin-bottom: .75rem; color: var(--ink); background: var(--mint); border-radius: 6px; padding: .25rem .6rem; font-size: .9rem; font-weight: 800; }
.vm-bistable-practice .button { max-width: 100%; white-space: normal; text-align: center; }
.vm-bistable-practice details { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.vm-bistable-practice summary { cursor: pointer; min-height: 44px; padding: 1rem 0; font-weight: 750; font-size: 1rem; }
.vm-bistable-practice summary:focus-visible, .vm-bistable-return a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.vm-bistable-return { margin: 1rem 0 0; font-size: 1rem; }
.vm-bistable-return a { display: inline-block; min-height: 44px; padding: .5rem 0; font-weight: 700; }
#comparacion-biestable, #practica-rubin, #practica-necker, #rubin-stage-title, #necker-stage-title { scroll-margin-top: 120px; }