.fraction-dock{max-width:1100px;margin:auto;color:#18383b;letter-spacing:0}
.fraction-status,.fraction-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0;padding:14px 0;border-block:1px solid #a3b9ba}.fraction-actions{justify-content:flex-start}
.fraction-dock h2{font-size:25px;line-height:1.3}.fraction-dock p{line-height:1.65}.fraction-dock button,.fraction-dock select,.fraction-dock input{font:600 16px Arial,sans-serif;min-height:44px;border:1px solid #587a7c;border-radius:5px;padding:10px 12px;color:#18383b;background:#fff;max-width:100%}.fraction-dock button{cursor:pointer;white-space:normal}.fraction-dock button:hover{background:#ebf7f5}.fraction-dock button.primary-action{background:#086c72;border-color:#086c72;color:#fff;width:auto}.fraction-dock button:disabled{opacity:.5;cursor:default}.fraction-dock :focus-visible{outline:3px solid #a33b28;outline-offset:3px}
.fraction-cover{display:block;width:100%;aspect-ratio:5/2;object-fit:contain;max-height:320px}.fraction-teach{padding:14px 18px;background:#eaf5fa;border-left:4px solid #226d8c}
.fraction-workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(265px,1fr);gap:24px;align-items:start}.fraction-board{margin:0;min-width:0}.fraction-board svg{display:block;width:100%;aspect-ratio:24/19;background:#f1faf7;max-height:470px}.fraction-board figcaption{font-size:15px;line-height:1.55;margin-top:12px;overflow-wrap:anywhere}
.fraction-controls{min-width:0}.fraction-controls fieldset{border:0;border-block:1px solid #b8c9c5;margin:16px 0;padding:12px 0}.fraction-controls legend,.fraction-controls label{font-weight:700}.fraction-controls select{display:block;width:100%;margin:8px 0 14px}.fraction-counter{display:grid;grid-template-columns:44px minmax(70px,1fr) 44px;gap:8px;margin:8px 0}.fraction-counter label{grid-column:1/-1}.fraction-counter input{width:100%;min-width:0;text-align:center}.fraction-counter button{padding:0;font-size:24px}
.fraction-store-pieces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.fraction-store-pieces button{padding:10px 2px;border-bottom:6px solid #087e89}.fraction-store-pieces button:nth-child(2){border-color:#bd4c35}.fraction-store-pieces button:nth-child(3){border-color:#786315}.fraction-store-pieces button:nth-child(4){border-color:#5753a1}#fraction-piece-list{min-height:56px;overflow-wrap:anywhere}#fraction-undo{width:44px;padding:0;font-size:24px}
#fraction-feedback{padding:14px 18px;background:#e3f3eb;border-left:4px solid #26724d;min-height:70px;font-weight:600}#fraction-feedback[data-error=true]{background:#fff0eb;border-color:#ad3b24;color:#842816}#fraction-equivalents{line-height:1.6}#fraction-hint-text{border:1px dashed #587a7c;padding:12px}.fraction-dock [hidden]{display:none!important}
@media(max-width:680px){.fraction-workspace{grid-template-columns:minmax(0,1fr);gap:14px}.fraction-board svg{max-height:380px}.fraction-dock h2{font-size:23px}}
@media print{.fraction-controls,.fraction-actions,.fraction-status button,#fraction-start,#fraction-again{display:none}.fraction-workspace{display:block}.fraction-board{max-width:440px}}