:root{font-family:Trebuchet MS,Arial,sans-serif;color:#17324d;background:#102a42;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;font-weight:700;color:#17324d;border:2px solid #d0cebf;background:#fffbeb;border-radius:12px;padding:12px 20px;cursor:pointer;min-height:44px;touch-action:manipulation}button:hover:not(:disabled){border-color:var(--accent, #16796f);box-shadow:0 4px 14px #17324d26}button:focus-visible{outline:3px solid #17324d;outline-offset:4px}button:disabled{cursor:default}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:0}h2{font-size:clamp(1.5rem,3vw,2rem)}h2:focus{outline:none}.app{min-height:100dvh;padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:linear-gradient(#102a4273,#102a4299),var(--background) center / cover fixed}header{max-width:1080px;margin:0 auto 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#fff}.eyebrow{font-size:.75rem;letter-spacing:.15em;font-weight:700;margin-bottom:10px}.intro{max-width:1080px;margin:0 auto 24px;color:#fff;text-shadow:0 2px 8px #102a42}.stations{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:auto}.station{display:grid;grid-template-columns:54px 1fr;text-align:left;align-items:center;gap:16px;min-height:174px;background:#fffbebf5;border:3px solid var(--accent);padding:22px;box-shadow:0 8px 25px #102a4233}.station:disabled{filter:grayscale(1);opacity:.85}.badge{border-radius:50%;background:var(--accent);color:#fff;width:52px;height:52px;display:grid;place-items:center;font-size:1.5rem}.station strong{display:block;font-size:1.2rem}.station small{display:block;margin-top:8px;line-height:1.4;font-weight:400}.stars{color:#916500;font-size:2rem;grid-column:1 / -1;text-align:center;letter-spacing:.12em}.empty-stars{color:#777465}footer{max-width:1080px;margin:24px auto 0;color:#fff;display:flex;gap:20px;justify-content:space-between;align-items:center;font-size:.875rem}.panel{max-width:940px;margin:auto;border-top:6px solid var(--accent);background:#fffbebf7;border-radius:22px;padding:clamp(20px,4vw,40px);text-align:center;box-shadow:0 15px 60px #102a4255}.explanation{max-width:720px;margin:0 auto;line-height:1.75;font-size:1.15rem}.visuals{display:flex;justify-content:center;align-items:center;gap:clamp(12px,4vw,40px);margin:28px auto;min-height:160px}.visuals>div{flex:1;max-width:300px;min-width:0}.fraction-picture{display:block;width:100%;max-width:360px;margin:0 auto 16px}.fraction-picture.circle{max-width:190px}.fraction{display:inline-flex;vertical-align:middle;flex-direction:column;font-size:2.5rem;font-weight:700;line-height:1.3;min-width:1.5em}.fraction>span:first-child{border-bottom:3px solid currentColor}.symbol{font-size:2rem}.answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.answers button{font-size:1.6rem;background:#fff}.answers .fraction-picture{margin:0 auto}.answers .correct{border-color:#397b3d;background:#e7f5e8}.answers .incorrect{border-color:#af3831;background:#fbe9e7}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}progress{width:100%;height:10px;accent-color:var(--accent)}.feedback{margin-top:24px;background:#f4edcf;border-radius:12px;padding:20px}.feedback p{line-height:1.6}.result-score{font-size:4rem;font-weight:700;margin:30px auto 10px;color:var(--accent)}.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}.pwa-notice{position:sticky;bottom:16px;max-width:600px;padding:20px;background:#fff;border:2px solid #16796f;border-radius:14px;margin:24px auto 0;box-shadow:0 8px 32px #102a4266}.pwa-notice button{margin-right:8px}@media(max-width:850px){.stations{grid-template-columns:repeat(2,1fr);gap:16px}}@media(max-width:560px){.app{padding:18px 12px}header,footer{align-items:flex-start;flex-direction:column}.stations{grid-template-columns:1fr}.station{min-height:130px}.station .stars{grid-column:2;text-align:left}.answers{gap:8px}.answers button{padding:12px 6px;font-size:1.3rem}.fraction{font-size:2rem}}