:root{font-family:ui-rounded,'Trebuchet MS',Arial,sans-serif;color:#203e37;background:#f5f6ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}header{max-width:1160px;margin:auto;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{font-size:24px;font-weight:bold;color:#176b56;text-decoration:none}#connection{font-size:12px;color:#52695e}main{max-width:1100px;margin:auto;padding:18px 24px}.intro{text-align:center;margin:18px 0 32px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:bold;color:#63826d}h1{font-size:clamp(30px,5vw,46px);letter-spacing:-1.5px;margin:12px 0}h2{margin:6px 0 22px;font-size:25px}.intro>p:last-child{color:#6b7c70}nav{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}.section{border:1px solid #dce3d5;border-radius:18px;background:#fffdf7;padding:18px;color:#536958;display:grid;text-align:left;gap:6px;font-weight:bold}.section>span{font-size:27px}.section small{font-size:11px;font-weight:normal}.section.active{background:#176b56;color:white;border-color:#176b56;box-shadow:0 6px 16px #176b561c}.layout{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}.panel{background:#fffef9;border:1px solid #e0e5d9;border-radius:24px;padding:28px}.game-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.badge{background:#edf2df;border-radius:20px;font-size:11px;padding:9px;color:#5c7141}fieldset{border:0;padding:0;margin:0}legend{font-size:13px;margin-bottom:12px}.operations{display:flex;flex-wrap:wrap;gap:8px}.operations label{background:#f2f4ea;border:1px solid #dfe5d5;border-radius:10px;padding:11px 9px;font-size:13px;cursor:pointer}.operations label:has(input:checked){background:#e3efdd;border-color:#9abb89}input[type=checkbox]{accent-color:#176b56}.hint{font-size:11px;color:#778471;line-height:1.6}.question{font-size:clamp(42px,7vw,66px);font-weight:bold;text-align:center;margin:30px 0 24px;letter-spacing:3px}form{display:flex;gap:10px}#answer{width:0;min-width:0;flex:1;border:2px solid #ccd8c5;border-radius:12px;padding:15px;font-size:22px;text-align:center;background:white;color:#203e37}input:focus{outline:3px solid #bdd7a6;outline-offset:2px}.primary{border:0;border-radius:12px;padding:14px 20px;background:#176b56;color:white;font-weight:bold}.feedback{min-height:40px;text-align:center;font-size:14px;margin:16px 0 4px}.feedback.right{color:#287239}.feedback.wrong{color:#a04e39}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:330px;margin:auto}.keypad button{border:1px solid #e0e5d8;background:#f6f7ef;border-radius:11px;min-height:47px;font-size:20px;color:#304f40}.keypad button:active{background:#dceace}.center{text-align:center}.ring{width:166px;height:166px;margin:28px auto;background:conic-gradient(#dfe6d8 0% 100%);border-radius:50%;display:grid;place-items:center}.ring>div{width:133px;height:133px;border-radius:50%;background:#fffef9;display:flex;flex-direction:column;align-items:center;justify-content:center}.ring strong{font-size:34px}.ring span{font-size:12px;color:#7c8777}.score-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #edf0e6;font-size:14px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}.good{background:#63a17c}.bad{background:#df936d}.note{background:#f1f4e8;border-radius:13px;padding:16px;font-size:12px;line-height:1.8;margin-top:25px}.reset{display:block;margin:20px auto 0;background:none;border:0;color:#6d7c67;font-size:12px;text-decoration:underline}footer{text-align:center;color:#83917d;font-size:11px;margin:30px 0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}button:focus-visible{outline:3px solid #d8a442;outline-offset:3px}@media(max-width:780px){.layout{grid-template-columns:1fr}.scores{display:block}.game-head{flex-wrap:wrap}.badge{margin-bottom:15px}nav{gap:7px}.section{padding:12px 8px;font-size:12px}.section small{font-size:10px}header{padding:20px}.panel{padding:22px}form{flex-wrap:wrap}#answer{flex-basis:100%;width:100%}.primary{width:100%}#connection{max-width:140px;text-align:right}}

.settings{display:flex;flex-wrap:wrap;gap:16px;margin:20px 0}.settings label{font-size:13px;flex:1;min-width:180px}.settings select{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #ccd8c5;border-radius:10px;background:#fffef9;color:#203e37;font:inherit}.trial-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px;background:#edf2df;border-radius:12px}#timer{font-size:30px;min-width:65px;font-variant-numeric:tabular-nums}#trial-result{font-size:13px;line-height:1.6}button:disabled,input:disabled,select:disabled{opacity:.55;cursor:default}.question{font-size:clamp(26px,5vw,56px);letter-spacing:0;overflow-wrap:anywhere}#trial .primary{width:auto;font-size:13px}

.question.vertical{display:flex;justify-content:center;margin:24px 0;font-variant-numeric:tabular-nums}
.stack{display:grid;grid-template-columns:1em auto;column-gap:.45em;line-height:1.3;min-width:3.5ch;font-family:ui-monospace,Consolas,monospace}
.top-number{grid-column:2;text-align:right}
.operator{grid-column:1;grid-row:2;align-self:center}
.bottom-number{grid-column:2;grid-row:2;text-align:right}
.answer-line{grid-column:1 / -1;border-top:3px solid #63826d;text-align:right;margin-top:.12em;padding-top:.08em}

.fraction-menu{display:flex;flex-wrap:wrap;gap:10px}.fraction-choice{padding:13px 16px;border-radius:12px;border:1px solid #ccd8c5;background:#f2f4ea;color:#304f40;text-align:left}.fraction-choice.active{background:#176b56;color:white}.fraction-choice small{display:block;margin-top:5px;opacity:.75}.fraction-pies{display:grid;grid-template-columns:1fr 1fr;gap:30px;text-align:center}.fraction-pies h4{margin-bottom:10px}.fraction-number{font-size:36px;font-weight:bold;font-variant-numeric:tabular-nums}.pie{max-width:360px;margin:auto}.pie svg{display:block;width:100%;height:auto;overflow:visible}.pie-piece{fill:#eef1e4;stroke:#fffef9;stroke-width:1.5}.pie-piece.filled{fill:#63a17c}#selected-pie .pie-piece{cursor:pointer;touch-action:manipulation}#selected-pie .pie-piece:focus{outline:none;stroke:#203e37;stroke-width:3}.fraction-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.fraction-actions button{min-height:48px;border-radius:12px;padding:12px 18px;border:1px solid #ccd8c5}.fraction-actions button:not(.primary){background:#f2f4ea;color:#304f40}@media(max-width:600px){.fraction-pies{grid-template-columns:1fr;gap:8px}.pie{max-width:320px}.fraction-number{font-size:30px}.fraction-menu{display:grid;grid-template-columns:1fr}.fraction-actions .primary{width:auto}}

.fraction-pies{grid-template-columns:minmax(0,1fr) 45px minmax(0,1fr);align-items:start}.fraction-equals{font-size:46px;font-weight:bold;align-self:center}.stacked-fraction{display:flex;flex-direction:column;align-items:center;line-height:1.2;margin:12px auto;min-height:94px}.stacked-fraction>span:first-child,.stacked-fraction>input{border-bottom:3px solid #304f40;width:90px;text-align:center}.stacked-fraction>span:last-child{padding-top:5px}#fraction-numerator{font:inherit;color:inherit;padding:0 4px;border:2px solid #b3c7a5;border-bottom:3px solid #304f40;border-radius:8px 8px 0 0;background:#f1f7e8;width:90px;height:46px}.original-division{stroke:#304f40;stroke-width:3.5;pointer-events:none}@media(max-width:600px){.fraction-pies{grid-template-columns:1fr}.fraction-equals{font-size:36px;line-height:1;margin:0}.stacked-fraction{min-height:88px}}

.fraction-equation{display:grid;grid-template-columns:100px minmax(40px,120px) 100px;justify-content:center;align-items:center;max-width:420px;margin:28px auto 12px;row-gap:10px}.fraction-equation .stacked-fraction{margin:0;min-height:98px}.fraction-equation .fraction-equals{text-align:center;align-self:center}.factor-arrow{grid-column:1 / -1;position:relative;margin:0 45px;display:flex;flex-direction:column;align-items:center;gap:8px}.arrow-shaft{height:14px;width:100%;border-top:2px solid #63826d;position:relative}.arrow-shaft:after{content:'';position:absolute;right:0;top:-6px;width:9px;height:9px;border-top:2px solid #63826d;border-right:2px solid #63826d;transform:rotate(45deg)}.top-factor .arrow-shaft{border-left:2px solid #63826d;border-radius:8px 0 0 0}.bottom-factor .arrow-shaft{border-top:0;border-bottom:2px solid #63826d;border-left:2px solid #63826d;border-radius:0 0 0 8px}.bottom-factor .arrow-shaft:after{top:8px}.arrow-label{font-size:23px;font-weight:bold;color:#304f40;min-height:40px}.factor-controls{display:flex;gap:8px;align-items:center}.factor-controls select,.factor-controls input{font:inherit;color:inherit;background:#f1f7e8;border:2px solid #b3c7a5;border-radius:8px;min-height:44px;text-align:center}.factor-controls select{width:66px}.factor-controls input{width:70px}.fraction-pies{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media(max-width:600px){.fraction-pies{grid-template-columns:1fr}.fraction-equation{grid-template-columns:90px minmax(30px,70px) 90px}.fraction-equation .fraction-equals{margin:0}.factor-arrow{margin:0 40px}}

.fraction-game-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px;align-items:start}.fraction-scores{padding:20px}.fraction-scores h2{font-size:22px}.factor-arrow .arrow-shaft{height:24px;border:0;background:none}.top-factor .arrow-shaft{border-top:2px solid #63826d;border-left:2px solid #63826d;border-right:2px solid #63826d;border-radius:14px 14px 0 0}.bottom-factor .arrow-shaft{border-bottom:2px solid #63826d;border-left:2px solid #63826d;border-right:2px solid #63826d;border-radius:0 0 14px 14px}.top-factor .arrow-shaft:after{right:-6px;top:auto;bottom:0;transform:rotate(135deg)}.bottom-factor .arrow-shaft:after{right:-6px;top:0;bottom:auto;transform:rotate(-45deg)}.fraction-equation{row-gap:2px}.factor-arrow{gap:4px}@media(max-width:950px){.fraction-game-layout{grid-template-columns:1fr}.fraction-scores{max-width:420px;width:100%;margin:auto}}

.original-division.dashed-original{stroke:#63826d;stroke-width:1.8;stroke-dasharray:5 5;pointer-events:none}.answer-division{stroke:#304f40;stroke-width:3.5;pointer-events:none}.pie-piece.simplified-piece{stroke:#304f40;stroke-width:3.5}

.comparison-equation{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);align-items:center;text-align:center;gap:8px;margin:24px 0}.comparison-equation .pie{width:100%;max-width:300px}.comparison-equation .stacked-fraction{font-size:34px}.comparison-equation .stacked-fraction>span:first-child{width:65px}#compare-symbol{font-size:40px}.compare-choices{display:flex;justify-content:center;gap:12px}.compare-choice{font-size:36px;font-weight:bold;min-width:90px;min-height:90px;background:#edf2df;border:2px solid #ccd8c5;border-radius:16px;color:#304f40}.compare-choice small{display:block;font-size:11px;font-weight:normal;margin:6px}.compare-choice.chosen{border-color:#176b56;background:#dceace}.compare-choice:disabled{opacity:.8}@media(max-width:400px){.compare-choice{min-width:70px}.compare-choices{gap:6px}}

.arithmetic-skip{text-align:center;margin:12px 0}.arithmetic-skip button{min-height:44px;padding:10px 18px;border:1px solid #ccd8c5;border-radius:12px;color:#304f40;background:#f2f4ea}