/* M06 fraction / decimal / percentage / ratios. Light, responsive, accessible. */
#play[data-oc-m06] .m06-note{font-size:.92rem!important;line-height:1.55;margin:12px 0!important;color:var(--ml-copy)!important}
#play[data-oc-m06] .m06-subtitle{font-size:1rem!important;margin:18px 0 8px;color:var(--ml-ink)!important}
#play[data-oc-m06] :is(input,select){min-width:0;max-width:100%;background:var(--ml-surface);color:var(--ml-ink);border:1px solid var(--ml-line);border-radius:9px;padding:10px;min-height:44px}
#play[data-oc-m06] :is(button,input,select):focus-visible{outline:3px solid var(--ml-focus);outline-offset:2px}
#play[data-oc-m06] .m06-frac{display:inline-grid;grid-template-rows:1fr 1fr;align-items:center;justify-items:center;vertical-align:middle;min-width:1.5rem;line-height:1.12;font-weight:750;font-variant-numeric:tabular-nums;font-size:1em}
#play[data-oc-m06] .m06-frac span:first-child{width:100%;border-bottom:2px solid currentColor;padding:2px;text-align:center}
#play[data-oc-m06] .m06-frac span:last-child{padding:2px}
#play[data-oc-m06] .m06-chain,#play[data-oc-m06] .m06-tiles{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:8px 0 18px}
#play[data-oc-m06] .m06-anchor{display:inline-flex;gap:7px;align-items:center;padding:10px;border-radius:9px;background:var(--ml-soft);border:1px solid var(--ml-line);font-weight:700;color:var(--ml-ink)}
#play[data-oc-m06] .m06-domino{position:relative;display:inline-flex;gap:7px;align-items:center;justify-content:center;padding:8px 10px;min-height:56px;background:var(--ml-surface);border:2px solid var(--ml-line);border-radius:10px;color:var(--ml-ink)}
#play[data-oc-m06] .m06-domino button,#play[data-oc-m06] button.m06-available{cursor:pointer}#play[data-oc-m06] .m06-domino button{border-radius:7px;padding:6px 8px;background:var(--ml-soft);color:var(--ml-ink);border:1px solid var(--ml-line);font-size:.82rem}
#play[data-oc-m06] .m06-domino.m06-available{background:var(--ml-soft);color:var(--ml-ink)}#play[data-oc-m06] .m06-domino small{font-size:.7rem;color:var(--ml-copy)}
#play[data-oc-m06] .m06-divider{font-weight:800;font-size:1.4rem;color:var(--ml-blue)}#play[data-oc-m06] .m06-step{font-size:.75rem;font-weight:750;position:absolute;left:3px;top:2px}
#play[data-oc-m06] .m06-questions{display:grid;gap:12px}
#play[data-oc-m06] .m06-question{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(145px,.8fr);gap:14px;align-items:center;border:1px solid var(--ml-line);border-radius:12px;background:var(--ml-surface);color:var(--ml-ink);padding:14px;min-width:0}
#play[data-oc-m06] .m06-question small{color:var(--ml-copy);font-weight:700;text-transform:uppercase;letter-spacing:.025em}
#play[data-oc-m06] .m06-question p{margin:5px 0!important;line-height:1.45}
#play[data-oc-m06] .m06-question label{display:grid;gap:6px;color:var(--ml-ink);font-weight:650}
#play[data-oc-m06] .m06-big-number{font-size:clamp(1.5rem,5vw,2.25rem);font-variant-numeric:tabular-nums;font-weight:850;letter-spacing:.03em;white-space:nowrap}
#play[data-oc-m06] .m06-big-number mark{border-radius:4px;background:var(--ml-blue);color:#fff;padding:2px 3px}
#play[data-oc-m06] .m06-equation{font-size:1.3rem!important;font-weight:780;font-variant-numeric:tabular-nums}
#play[data-oc-m06] .m06-digits{display:flex;align-items:center;gap:1px;flex-wrap:nowrap;justify-content:flex-start;max-width:100%;overflow-x:auto;padding:4px 0}
#play[data-oc-m06] .m06-digit{font-size:clamp(1.1rem,3vw,1.55rem);font-weight:830;font-variant-numeric:tabular-nums}
#play[data-oc-m06] .m06-dot{min-height:44px;min-width:28px;background:var(--ml-soft);border:1px solid var(--ml-line);border-radius:7px;color:var(--ml-ink);font-weight:900;cursor:pointer}
#play[data-oc-m06] .m06-dot.chosen{background:var(--ml-blue);color:white}
#play[data-oc-m06] .m06-percent-stack{display:grid;gap:5px;margin-top:7px}#play[data-oc-m06] .m06-percent-stack span{display:block;font-weight:700;padding:7px 10px;border-radius:8px;background:var(--ml-soft)}#play[data-oc-m06] .m06-percent-stack .m06-op{padding-left:24px}#play[data-oc-m06] .m06-percent-stack .m06-target{border:1px solid var(--ml-blue)}
#play[data-oc-m06] .m06-question.m06-ratio{grid-template-columns:1fr}#play[data-oc-m06] .m06-ratio-chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}#play[data-oc-m06] .m06-ratio-chips span{background:var(--ml-soft);padding:7px;border-radius:9px;font-weight:700;border:1px solid var(--ml-line)}
#play[data-oc-m06] .m06-ratio-bar{height:22px;display:flex;gap:3px;margin:9px 0;max-width:500px}#play[data-oc-m06] .m06-ratio-bar span{background:#2284bf;border-radius:4px}#play[data-oc-m06] .m06-ratio-bar span:nth-child(2){background:#df9323}#play[data-oc-m06] .m06-ratio-bar span:nth-child(3){background:#669d6c}
#play[data-oc-m06] .m06-ratio-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}#play[data-oc-m06] .m06-ratio-fields:has(label:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:540px){#play[data-oc-m06] .m06-question{grid-template-columns:minmax(0,1fr);gap:9px;padding:10px}#play[data-oc-m06] .m06-ratio-fields{gap:6px}#play[data-oc-m06] .m06-ratio-fields label{font-size:.87rem}#play[data-oc-m06] .m06-chain,#play[data-oc-m06] .m06-tiles{gap:4px}#play[data-oc-m06] .m06-domino{padding:6px;gap:3px}#play[data-oc-m06] .m06-dot{min-width:29px}}