@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{color-scheme:light;--ink:#18243b;--muted:#60708a;--line:#dce3ef;--paper:#fff;--bg:#f4f6fb;--blue:#314db5;--blue-soft:#edf0ff;--teal:#087e73;--teal-soft:#e8f7f3;--gold:#9a6411;--gold-soft:#fff6e6;--red-soft:#fff0ef;font-family:"DM Sans",Arial,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 10% 0%,#e9efff 0,transparent 33rem),var(--bg)}button,input{font:inherit}.shell{width:min(100% - 32px,950px);margin:32px auto 60px}.hero,.workspace{background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 36px #2639640a}.hero{padding:clamp(24px,5vw,46px);background:linear-gradient(130deg,#fff 62%,#f0f4ff)}.eyebrow{margin:0 0 8px;color:var(--blue);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.hero h1,h2,h3{font-family:Manrope,"DM Sans",sans-serif}.hero h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.04em;margin:0 0 12px}.hero>p:not(.eyebrow){max-width:650px;color:var(--muted);line-height:1.6;margin:0}.bags{display:flex;align-items:center;gap:16px;margin-top:28px}.bag{border:1px solid var(--line);border-radius:15px;padding:14px 16px;background:#fff}.bag-label{display:block;font-size:.66rem;font-weight:700;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}.digits{display:flex;gap:8px}.digits b{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--blue-soft);color:var(--blue);font-size:1.12rem}.times{font-size:1.3rem;color:#9aa8bd}.sample-summary{display:flex;gap:12px;align-items:center;margin-top:17px;font-size:.9rem}.sample-summary strong{font-family:Manrope,sans-serif;font-size:1.1rem;color:var(--blue)}.sample-summary span{color:var(--muted)}.workspace{margin-top:20px;padding:clamp(20px,4vw,32px)}.section-head{display:flex;gap:12px;justify-content:space-between;align-items:center}.section-head h2{font-size:1.45rem;letter-spacing:-.03em;margin:0}.text-button{border:0;background:none;color:var(--blue);font-weight:700;cursor:pointer;padding:10px}.helper{color:var(--muted);line-height:1.55;font-size:.91rem;margin:12px 0 18px}.event-switch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.event-button,.progress-pill{border:1px solid var(--line);border-radius:99px;padding:9px 14px;background:#fff;color:var(--ink);font-weight:600;font-size:.83rem}.event-button{cursor:pointer}.event-button.selected{background:var(--blue);color:white;border-color:var(--blue)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:13px}.table-wrap table{border-collapse:collapse;width:100%;min-width:380px;text-align:center}.table-wrap th,.table-wrap td{padding:12px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}.table-wrap th{background:#f7f8fc;color:var(--muted);font-size:.79rem}.table-wrap th:first-child{min-width:125px}.table-wrap tbody tr:last-child td{border-bottom:0}.table-wrap td{font-family:Manrope,sans-serif;font-weight:700}.table-wrap td.hit{background:var(--teal-soft);color:var(--teal);box-shadow:inset 0 0 0 2px #8bd6c4}.legend{display:flex;gap:8px;align-items:center;margin-top:12px;color:var(--muted);font-size:.8rem}.swatch{width:14px;height:14px;background:var(--teal-soft);border:2px solid #8bd6c4;border-radius:4px}.legend-count{margin-left:auto;font-weight:700;color:var(--teal)}.rule-note{padding:12px 14px;background:#f7f8fc;border-left:3px solid var(--blue);border-radius:5px;color:#465570;font-size:.88rem;line-height:1.5;margin:16px 0 0}.questions .section-head{align-items:flex-end}.progress-pill{white-space:nowrap;color:var(--muted)}.question-card{display:grid;grid-template-columns:40px 1fr;gap:15px;padding:19px 0;border-top:1px solid var(--line)}.q-number{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--blue-soft);color:var(--blue);font-weight:800}.q-content h3{font-size:1.08rem;margin:0 0 5px}.q-content>p{margin:0;color:#495874;line-height:1.45}.fraction-input{display:grid;width:88px;gap:6px;margin:15px 0 9px}.fraction-input input{width:100%;height:40px;border:1px solid #cbd5e3;border-radius:8px;text-align:center;font-size:1.05rem;color:var(--ink);outline:none}.fraction-input input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #314db526}.fraction-line{height:2px;background:var(--ink)}.answer-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.hint-button{border:0;padding:0;background:none;color:var(--blue);font-size:.83rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.hint-text{color:var(--gold);background:var(--gold-soft);padding:7px 10px;border-radius:7px;font-size:.82rem;line-height:1.4}.item-feedback{min-height:0;margin-top:8px;font-size:.87rem;line-height:1.5}.item-feedback:not(:empty){padding:10px 12px;border-radius:8px}.item-feedback.correct{color:#09665d;background:var(--teal-soft)}.item-feedback.incorrect{color:#7c3f0c;background:var(--gold-soft)}.item-feedback.incomplete{color:#7e3937;background:var(--red-soft)}.submit-row{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:19px}.submit-button,.reset-button{border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer}.submit-button{border:1px solid var(--blue);background:var(--blue);color:#fff}.reset-button{border:1px solid var(--line);background:#fff;color:var(--ink)}.results{margin-top:18px;padding:17px;border:1px solid #cdd5fa;background:#f3f5ff;border-radius:12px}.results h3{margin:0 0 6px}.results p{margin:0;color:#495874;line-height:1.5}.results strong{color:var(--blue)}footer{padding:20px 8px;color:var(--muted);font-size:.82rem;line-height:1.55}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(max-width:550px){.shell{width:min(100% - 20px,950px);margin:10px auto 35px}.hero,.workspace{border-radius:16px}.bags{gap:8px}.bag{padding:12px 10px}.digits{gap:5px}.digits b{width:32px;height:34px}.section-head{align-items:flex-start}.section-head h2{font-size:1.22rem}.text-button{font-size:.78rem;padding:5px}.questions .section-head{align-items:flex-start;flex-direction:column}.progress-pill{font-size:.76rem}.question-card{grid-template-columns:34px 1fr;gap:10px}.q-number{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}