#fraction-practice{--accent:#5b468c;width:min(calc(100% - 1rem),42rem);margin:1rem auto 2rem;color:var(--text-color);font-size:clamp(1rem,calc(.94rem + .2vw),1.15rem);line-height:1.45}#fraction-practice *,#fraction-practice *:before,#fraction-practice *:after{box-sizing:border-box}#fraction-practice h1,#fraction-practice h2,#fraction-practice p{margin-top:0}#fraction-practice .exercise-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.65rem}#fraction-practice .exercise-statement{display:flex;align-items:center;flex-wrap:wrap;gap:.4em;margin:0;font-size:1.1em;font-weight:750}#fraction-practice .counter{margin:0;color:var(--text-muted);font-size:.88em;white-space:nowrap}#fraction-practice .card{padding:clamp(.75rem,3vw,1.1rem);border:1px solid var(--border-color);border-radius:.85rem;background:var(--bg-card);box-shadow:0 4px 14px color-mix(in srgb,var(--shadow-color) 40%,transparent)}#fraction-practice .card h2{margin:0 0 .25rem;font-size:1.08em}#fraction-practice .mode-switch{display:flex;gap:.35rem;margin:0 0 .65rem}#fraction-practice .mode-button{min-height:2.1em;padding:.3em .7em;border:1px solid var(--border-color);border-radius:.45em;background:var(--bg-card);color:var(--text-color);font:inherit;font-size:.86em;font-weight:700;cursor:pointer}#fraction-practice .mode-button.active{border-color:var(--accent);background:var(--accent);color:#fff}#fraction-practice .hint{margin:0 0 .65rem;color:var(--text-muted);font-size:.9em}#fraction-practice .equation{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5em;min-height:3.5em;font-size:1.35em;font-weight:750}#fraction-practice #simplify-entry{display:contents}#fraction-practice .fraction{display:inline-grid;grid-template-rows:2em 2px 2em;align-items:center;justify-items:center;gap:.1em;min-width:2.9em;font-size:.8em}#fraction-practice .fraction input{width:2.75em;height:1.95em;padding:.15em;border:1px solid var(--border-color);border-radius:.35em;background:var(--bg-color);color:var(--text-color);text-align:center;font:inherit;font-size:1em}#fraction-practice .fraction input::placeholder{color:var(--text-muted);font-size:.7rem;opacity:1}#fraction-practice .fraction input.wrong-answer{border-color:#b42318;background:#fff0ef;color:#a01812;box-shadow:0 0 0 1px #b42318}#fraction-practice .fraction-rule{width:100%;height:2px;background:currentColor}#fraction-practice .integer-entry:not(.has-denominator) .fraction-rule{opacity:.18}#fraction-practice .fraction-display{display:inline-grid;grid-template-rows:auto 2px auto;justify-items:center;align-items:center;gap:.1em;min-width:2em;font-size:.8em}#fraction-practice .fraction-display .fraction-rule{min-width:2em}#fraction-practice .operator{color:var(--accent);font-size:1.25em}#fraction-practice .pies{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin:.3rem 0 .7rem}#fraction-practice .pie-item{display:grid;justify-items:center;gap:.1rem;min-width:0;color:var(--text-muted);font-size:.75rem}#fraction-practice .pie-stack{position:relative;width:max-content;max-width:100%}#fraction-practice .pie-run{display:flex;gap:.12rem}#fraction-practice .pie-run.pie-old{position:absolute;inset:0 auto auto 0;z-index:2;opacity:1;pointer-events:none}#fraction-practice .pie-unit{position:relative;display:block;flex:0 0 clamp(2.25rem,10vw,3rem);width:clamp(2.25rem,10vw,3rem);aspect-ratio:1}#fraction-practice .pie-unit svg{position:absolute;inset:0;width:100%;height:100%}#fraction-practice .button{min-height:2.4em;padding:.4em .75em;border:1px solid var(--accent);border-radius:.5em;background:var(--accent);color:#fff;font:inherit;font-size:.9em;font-weight:750;cursor:pointer}#fraction-practice #check-result,#fraction-practice #check-challenge{display:block;margin:.45em auto 0}#fraction-practice .button:hover{filter:brightness(1.08)}#fraction-practice .button.secondary{margin-top:.6rem;border-color:var(--border-color);background:var(--bg-color);color:var(--text-color)}#fraction-practice .feedback{display:flex;align-items:center;flex-wrap:wrap;gap:.2em .3em;min-height:1.65em;margin:.6em 0 0;padding:.5em .6em;border-radius:.45em;background:color-mix(in srgb,var(--accent) 8%,var(--bg-card));font-size:.87em;line-height:1.35}#fraction-practice .feedback .fraction-display{display:inline-flex;flex-direction:column;vertical-align:middle;align-self:center;font-size:1em;line-height:1.05}#fraction-practice .feedback .fraction-display .fraction-rule{align-self:stretch}#fraction-practice .feedback.good{color:#267450;background:#e8f5ed}#fraction-practice .feedback.bad{color:#a33232;background:#faeaea}#fraction-practice .hidden{display:none!important}@media(max-width:360px){#fraction-practice .equation{gap:.3rem;font-size:1.2rem}#fraction-practice .fraction{min-width:2.55rem}#fraction-practice .fraction input{width:2.4rem}}