#croix-fractions .case {max-width: 23rem; margin: 0 auto 12px}
#croix-fractions .diagram {position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; justify-items:center; width:min(100%, 290px); height:116px; margin:auto}
#croix-fractions .ratio {display:grid; min-width:48px; text-align:center; position:relative; z-index:1}
#croix-fractions .ratio span {padding:4px 8px}
#croix-fractions .ratio span:first-child {border-bottom:2px solid currentColor}
#croix-fractions .diagram svg {position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
#croix-fractions .diag {stroke-width:3; stroke-linecap:round; stroke-dasharray:1; animation:cross-reveal .5s ease-out both}
#croix-fractions .blue {color:var(--blue); stroke:var(--blue)}
#croix-fractions .gold {color:var(--orange); stroke:var(--orange)}
#croix-fractions .workline {text-align:center; margin:8px 0}
#croix-fractions .quotient {display:inline-flex; align-items:center; gap:.4em}
#croix-fractions .answer {max-width:10rem}
#croix-fractions .actions {margin-top:14px}
#croix-fractions details {margin-block:10px}
@keyframes cross-reveal {from {stroke-dashoffset:1} to {stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce) {#croix-fractions .diag {animation:none}}

#croix-fractions {--blue:#176493;--orange:#805a00;min-width:0}
#croix-fractions .viz-row {display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
#croix-fractions .form-label {display:grid;gap:5px}
#croix-fractions .form-control,#croix-fractions .form-select {max-width:100%;min-width:0;box-sizing:border-box}
#croix-fractions .form-control {width:100%}
#croix-fractions .diagram,#croix-fractions .workline {font-size:1.25rem}
#croix-fractions [data-work] {padding-block:12px}
#croix-fractions [data-mode][aria-pressed=true] {font-weight:750;text-decoration:underline}
#croix-fractions .btn-primary {font-weight:750}
#croix-fractions summary {cursor:pointer}
.cross-student {max-width:850px;margin:auto;padding:clamp(14px,4vw,28px);border:1px solid #d1e3d8;border-radius:20px;background:var(--card,#fff);color:var(--ink,#193b37)}
.cross-student button,.cross-student input,.cross-student select {font:inherit;color:inherit;background:transparent;border:1px solid #77958b;border-radius:9px;padding:8px 12px;min-height:44px}
.cross-student button {cursor:pointer}
.cross-student button.btn-primary {background:#14785e;color:white;border-color:#14785e}