:root{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4f2ec;background:#10141c;font-synthesis:none;--green:#b7eb91;--muted:#b8c2cf;--line:#354052;--panel:#19202d;--accent:#b7eb91;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:#10141c}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:4px}button,a{touch-action:manipulation}button{min-height:46px}h1,h2,h3,p,figure{margin:0}[hidden]{display:none!important}.skip-link{position:absolute;top:-100px;left:20px;padding:12px;z-index:5;background:var(--green);color:#152019}.skip-link:focus{top:12px}
.mate-header,.mate-app,.mate-footer{width:min(1180px,calc(100% - 48px));margin:auto}.mate-header{min-height:98px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:16px 0}.mate-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-family:Georgia,serif;font-size:1.35rem;font-weight:700}.mate-brand img{object-fit:contain;border-radius:8px}.mate-brand small{display:block;font-family:system-ui;font-size:.875rem;color:var(--muted);font-weight:400;margin-top:2px}.mate-header-actions{display:flex;align-items:center;gap:20px}.menu-link{color:#d8e1ef;font-size:.875rem;text-underline-offset:4px}.language-control{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}.language-control button{border:0;color:var(--muted);background:transparent;font-size:.875rem;padding:9px 13px}.language-control button[aria-pressed=true]{color:#172719;background:var(--green)}
.mate-app{padding:28px 0 34px}.mate-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.eyebrow{color:var(--green);font-size:.875rem;letter-spacing:.08em;font-weight:700;margin-bottom:6px}h1{font-family:Georgia,serif;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:500}.mate-total{font-size:1rem;color:#d1e9c2;white-space:nowrap;padding:9px 13px;border:1px solid #91b97955;border-radius:30px}.mate-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0}.mate-categories button{display:flex;align-items:center;gap:12px;min-width:0;padding:13px 15px;color:#e4e8ee;background:#1b2432;border:1px solid var(--line);border-radius:12px;text-align:left;font-size:1rem;font-weight:600}.mate-categories button[aria-pressed=true]{background:#b7eb91;color:#162a1b;border-color:#b7eb91}.category-symbol{font-size:1.9rem;font-weight:500;min-width:30px;text-align:center}.mate-categories small{font-size:.875rem;display:block;margin-top:4px;opacity:.8;font-weight:400}
.mate-layout{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:24px;align-items:start}.mate-play{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:16px;min-width:0}.question-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}h2{font-size:1.125rem;line-height:1.4;font-weight:600}.question-status{font-size:.875rem;color:var(--green);flex:none}.mate-instruction{font-size:1rem;line-height:1.55;color:var(--muted);margin-top:9px}.mate-equation{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,24px);padding:20px 0;min-height:220px}.mate-operand{margin:0;width:clamp(86px,14vw,140px);min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.mate-operand img{height:180px;width:100%;object-fit:contain}.mate-operand figcaption{font-size:1rem;color:#f1f3f7;font-weight:500}.mate-number{height:180px;display:flex;align-items:center;justify-content:center;font-size:clamp(2.8rem,6vw,4.5rem);color:#e0f5ca;font-weight:700;font-variant-numeric:tabular-nums}.mate-symbol{font-size:clamp(1.7rem,3.5vw,2.6rem);color:#d1dcf0;font-weight:500}.mate-question-mark{font-size:clamp(2.2rem,5vw,3.5rem);color:var(--green);font-weight:600}.mate-equation-help{font-size:1.1rem;line-height:1.5;padding:10px 15px;margin-bottom:14px;text-align:center;color:#def3cc;background:#263427;border:1px solid #52714c;border-radius:8px}.mate-answer-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mate-answer{min-height:70px;background:#273448;color:#fff;border:2px solid #455673;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:12px;position:relative}.mate-answer:hover:not(:disabled){background:#334561;border-color:#8599b8}.answer-value{font-size:1.9rem;font-weight:650;line-height:1.2}.mate-answer small{font-size:.875rem;position:absolute;right:9px;top:7px;color:#bfd0e9}.mate-answer.correct{background:#b7eb91;color:#152619;border-color:#b7eb91}.mate-answer.correct small{color:#1b4023}.mate-answer.incorrect{background:#542d3a;color:#ffe1e8;border-color:#e691a5}.mate-answer:disabled:not(.correct){opacity:.55}.mate-feedback{font-size:1rem;line-height:1.5;min-height:65px;padding:15px 0 12px;color:#b8c2cf}.mate-feedback.good{color:#c9f1b2}.mate-feedback.retry{color:#ffbdcd}.mate-toolbar{display:flex;gap:9px;justify-content:space-between;flex-wrap:wrap}.mate-primary,.mate-secondary{border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:.875rem;font-weight:600}.mate-primary{background:var(--green);color:#1b2d20;border-color:var(--green)}.mate-secondary{background:#232e40;color:#e4ebf6}.mate-primary:disabled,.mate-secondary:disabled{opacity:.5}.mate-lesson-progress{display:flex;align-items:center;gap:16px;margin-top:24px;color:var(--muted);font-size:.875rem;flex-wrap:wrap}.mate-lesson-progress progress{flex:1;min-width:80px;height:8px;border:0;border-radius:10px;overflow:hidden;background:#32415a;accent-color:var(--green)}progress::-webkit-progress-bar{background:#32415a;border-radius:10px}progress::-webkit-progress-value{background:var(--green);border-radius:10px}progress::-moz-progress-bar{background:var(--green);border-radius:10px}.mate-exercise-picker{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px;margin-top:14px}.mate-exercise-picker button{background:#273449;color:#d8e2f0;border:1px solid #43516b;border-radius:8px;padding:7px 0;font-size:1rem;font-weight:600;position:relative}.mate-exercise-picker button[aria-pressed=true]{border:2px solid #d6e3f6;background:#3a4a65}.mate-exercise-picker button.solved{background:#334a32;color:#d5f4bd;border-color:#7aa06a}.mate-exercise-picker button.solved::after{content:'✓';display:block;position:absolute;top:0;right:2px;font-size:.75rem}.mate-repeat{border:0;color:#c1cbda;background:transparent;font-size:.875rem;text-decoration:underline;text-underline-offset:4px;margin-top:12px;padding:8px 0}.mate-completion{background:#263a29;border:1px solid #6b9060;padding:18px;border-radius:12px;margin-top:20px}.mate-completion h3{font-size:1.125rem;color:#d5f8bf}.mate-completion p{font-size:1rem;line-height:1.5;margin:8px 0 14px}
.mate-guide{background:#f3f7ed;color:#192819;border:1px solid #d7e1cd;border-radius:16px;padding:20px;min-width:0}.mate-guide>p{font-size:1rem;color:#42513e;line-height:1.5;margin-top:7px}.mate-piece-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 7px;margin:22px 0}.mate-piece-gallery figure{text-align:center;min-width:0}.mate-piece-gallery img{width:100%;height:93px;object-fit:contain;display:block}.mate-piece-gallery figcaption{font-size:.875rem;margin-top:7px;line-height:1.45}.mate-piece-gallery strong{display:block;font-size:1.3rem;color:#254a21}.mate-rules{border-top:1px solid #cdd8c6;padding-top:15px;font-size:1rem;line-height:1.55}.mate-rules summary{font-weight:650;cursor:pointer;font-size:1rem}.mate-rules ol{padding-left:21px;margin:12px 0}.mate-rules li+li{margin-top:8px}.mate-rules>p{font-size:.875rem;color:#45533d}.mate-guide>p.mate-book-note{font-size:.875rem;border-top:1px solid #cdd8c6;padding-top:14px;margin-top:18px}.mate-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 0 25px;border-top:1px solid var(--line);font-size:.875rem;color:var(--muted)}
@media(max-width:950px){.mate-layout{grid-template-columns:minmax(0,1fr) 250px;gap:16px}.mate-categories{gap:8px}.mate-categories button{padding:12px 10px;gap:7px;font-size:.875rem}.mate-play{padding:20px}.mate-operand img,.mate-number{height:150px}.mate-guide{padding:17px}.mate-equation{gap:12px;min-height:200px}.mate-toolbar button{flex:1}.mate-toolbar .mate-primary{flex:1.2}}
@media(max-width:740px){.mate-header,.mate-app,.mate-footer{width:calc(100% - 32px)}.mate-layout{grid-template-columns:1fr}.mate-guide{margin-top:2px}.mate-piece-gallery{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:17px 0}.mate-piece-gallery img{height:90px}.mate-header-actions{flex-direction:column;align-items:flex-end;gap:8px}.mate-header{min-height:96px}.mate-categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mate-heading{align-items:flex-start}.mate-total{font-size:.875rem;white-space:normal;text-align:center;max-width:130px}.mate-app{padding-top:22px}.mate-categories button{font-size:1rem}.mate-operand{width:110px}.mate-operand img,.mate-number{height:160px}.mate-guide h2{font-size:1.125rem}.mate-book-note{max-width:600px}}
@media(max-width:420px){.mate-header,.mate-app,.mate-footer{width:calc(100% - 24px)}.mate-brand{font-size:1.125rem;gap:8px}.mate-brand img{width:46px;height:46px}.mate-brand small{font-size:.875rem}.language-control button{padding:8px;min-height:40px}.mate-header{gap:9px}.mate-heading{gap:10px}.eyebrow{font-size:.875rem;letter-spacing:0}.mate-total{padding:8px;max-width:99px}.mate-play{padding:17px 13px}.question-heading{align-items:flex-start}.question-status{font-size:.875rem}.mate-operand{width:83px}.mate-operand img,.mate-number{height:127px}.mate-operand figcaption{font-size:.875rem}.mate-equation{gap:8px;min-height:181px}.mate-answer{min-height:64px;gap:7px}.mate-answer-group{gap:8px}.mate-toolbar{gap:7px}.mate-toolbar button{font-size:.875rem;padding:10px 8px}.mate-toolbar .mate-primary{flex-basis:100%}.mate-exercise-picker{gap:4px}.mate-exercise-picker button{min-height:41px}.mate-piece-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.mate-piece-gallery img{height:103px}.mate-categories button{font-size:.875rem}.category-symbol{min-width:26px}.mate-instruction{font-size:1rem}}
.mate-header,.mate-heading{flex-wrap:wrap}.mate-header-actions{margin-left:auto}.mate-categories button>span:last-child{min-width:0;overflow-wrap:anywhere}.mate-operand{flex-shrink:1}.mate-symbol,.mate-question-mark{flex-shrink:0}.mate-operand figcaption{max-width:100%;overflow-wrap:anywhere}
@media(max-width:420px){.mate-operand{width:72px}.mate-equation{gap:6px}.mate-symbol{font-size:1.4rem}.mate-question-mark{font-size:1.75rem}.mate-categories button{padding:11px 7px;gap:5px}.category-symbol{min-width:20px;font-size:1.5rem}.mate-number{font-size:2.4rem}.mate-total{margin-left:auto}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}