@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Fredoka:wght@500;600;700&display=swap');
:root {font-family:'DM Sans',system-ui,sans-serif;color:#153b4d;background:#f3f3e9}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% 12%,#fbdca955,transparent 35%),radial-gradient(circle at 85% 90%,#a3dbca66,transparent 42%),#f3f3e9;min-height:100vh}.wrap{max-width:850px;margin:auto;padding:28px 20px 20px}.masthead{text-align:center}.eyebrow,.side-label{font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#277c78}.masthead h1{font-family:Fredoka,system-ui,sans-serif;font-size:clamp(2.4rem,7vw,4.2rem);margin:5px 0;line-height:1.08}.masthead h1 span{color:#ed9b52}.masthead p{font-size:1.1rem;margin:10px 0 25px}.toolbar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 auto 25px}.toolbar label{font-weight:700}select,button{font:inherit}select,.quiet{border:2px solid #b5c9bd;border-radius:12px;padding:11px 16px;background:#fffef9;color:#153b4d;font-weight:700;cursor:pointer}.quiet:hover,select:hover{border-color:#277c78}.progress-row{display:flex;justify-content:space-between;font-weight:700;font-size:.88rem;gap:12px}.progress-track{height:9px;background:#d7e2da;border-radius:30px;margin:9px 0 20px;overflow:hidden}#progress{height:100%;width:0;background:#e7a454;transition:width .2s}.study{perspective:1300px}.card{display:block;border:0;background:none;padding:0;width:100%;height:410px;text-align:center;cursor:pointer;color:inherit}.card-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.75,.3,1)}.card.flipped .card-inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid #c6d7c8;border-radius:26px;box-shadow:0 16px 0 #c6d7c8,0 23px 40px #153b4d20;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px;background:#fffefa}.front{background:linear-gradient(155deg,#fffefa,#eff7ee)}.back{transform:rotateY(180deg);background:linear-gradient(150deg,#e3f4eb,#fffefa)}.side-label{position:absolute;top:24px;left:30px}.shape{height:175px;width:min(85%,380px);display:flex;align-items:center;justify-content:center}.shape svg{max-height:100%;max-width:100%;overflow:visible;filter:drop-shadow(0 7px 3px #153b4d24)}.shape path{fill:#e99d5d;stroke:#153b4d;stroke-width:2.2;vector-effect:non-scaling-stroke}.shape.small{height:112px}.shape.small path{fill:#69b8a1}.face strong{font-family:Fredoka,system-ui,sans-serif;font-size:clamp(2rem,6vw,3.5rem);line-height:1.1}.prompt{font-size:1.18rem;margin-top:8px}.capital-label{font-size:1.1rem;margin:12px 0 4px}.back-note{font-size:.95rem;margin:14px 0}.flip-hint{position:absolute;bottom:20px;font-size:.88rem;color:#4c686b}.actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:34px 0 8px}.actions button{min-height:48px}.grade{display:flex;gap:9px}.grade button{border:0;border-radius:12px;padding:12px 16px;color:#133c49;font-weight:700;cursor:pointer}.again{background:#f7d7bb}.remembered{background:#a5debe}.grade button:hover{filter:brightness(.94)}.finish{text-align:center;font-family:Fredoka,system-ui,sans-serif;font-size:1.3rem;margin:14px}.wrap footer{text-align:center;color:#526e73;font-size:.78rem;padding:18px}.wrap footer a{color:#165e65}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #215fc5;outline-offset:4px}.shape svg{width:100%;height:100%;overflow:hidden}.shape .capital-halo{fill:#fff;stroke:#153b4d;stroke-width:7}.shape .capital-dot{fill:#c52249;stroke:#fff;stroke-width:4}.shape .capital-leader{stroke:#c52249;stroke-width:8;stroke-dasharray:12 8}.scale-note{font-size:.72rem;color:#526e73;margin:4px 0 9px}.shape.small+.scale-note{margin-bottom:2px}[hidden]{display:none!important}.play-panel{background:#fffefa;border:2px solid #c6d7c8;border-radius:26px;padding:24px;min-height:390px;box-shadow:0 12px 0 #c6d7c8}.play-panel h2{font-family:Fredoka,system-ui,sans-serif;font-size:clamp(1.45rem,4vw,2.1rem)}.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:26px auto;max-width:600px}.choice,.match-choice{font:inherit;background:#fff;border:2px solid #aacbc0;border-radius:12px;color:#153b4d;font-weight:700;cursor:pointer;padding:13px;min-height:48px}.choice:hover:not(:disabled),.match-choice:hover:not(:disabled){border-color:#277c78;background:#eff7ee}.choice.correct{background:#a5debe;border-color:#247351}.choice.incorrect{background:#f7d7bb;border-color:#b95139}.feedback{min-height:2.5em;font-weight:700;color:#245e60}.panel-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}.matching{max-width:100%}.match-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.match-board h3{margin:8px 0}.match-heading{display:block;font-weight:700;font-size:1.17em;margin:8px 0}.match-filter-spacer{display:block;height:43px}#match-filter{display:block;width:100%;height:43px;margin-bottom:6px;border:2px solid #b5c9bd;border-radius:10px;padding:7px;font:inherit;font-size:.9rem}#match-filter:focus-visible{outline:3px solid #215fc5}.match-list{height:min(55vh,500px);overflow-y:auto;border:1px solid #d1ded5;border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;scrollbar-gutter:stable}.match-choice{text-align:left;font-size:.92rem}.match-choice.selected{border-color:#215fc5;background:#dceafb}.match-choice.matched{opacity:.38;text-decoration:line-through}.match-choice:focus-visible,.choice:focus-visible{outline:3px solid #215fc5;outline-offset:2px}@media(max-width:610px){.play-panel{padding:16px}.quiz-options{grid-template-columns:1fr}.match-board{gap:6px}.match-choice{padding:8px;font-size:.78rem}.match-list{padding:4px}.matching .progress-row{flex-wrap:wrap}}@media(max-width:610px){.wrap{padding:22px 14px}.card{height:400px}.actions{flex-wrap:wrap;justify-content:center}.grade{order:-1;justify-content:center;width:100%}.shape{height:150px}.side-label{left:20px;top:18px}}@media(prefers-reduced-motion:reduce){.card-inner,#progress{transition:none}}