[hidden] { display: none !important; }
.shape-picker { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 24px; }
.shape-picker button { padding: 9px 16px; font-size: 15px; }
.shape-picker button[aria-pressed="true"] { background: #dce2ff; border-color: #5369d7; }
#fig { width: 100%; height: auto; aspect-ratio: 5 / 3; }
#fig .figure { fill: #dce9fa; stroke: #477b8f; stroke-width: 2; }
#fig .guide { stroke: #477b8f; stroke-width: 2; stroke-dasharray: 6 5; }
#fig .dim { fill: #214b72; font: bold 16px Arial, sans-serif; }
#formula { background: #e9edff; padding: 12px; border-radius: 14px; font-weight: bold; }
.answer-field { margin: 12px 0; }
.answer-field input { max-width: 160px; width: 100%; }
.answer-field .result { display: block; margin-top: 6px; }
input.correct + .result { color: #187858; }
#steps li { overflow-wrap: anywhere; }
#canvas { display: block; margin: 20px auto; max-width: 100%; height: auto; }
#options { display: grid; gap: 12px; }
#options button { width: 100%; background: #e9edff; }
#options button.is-correct { background: #bce8cb; border-color: #27834a; color: #185d32; opacity: 1; }
#options button.is-wrong { background: #f5c5c5; border-color: #bd3838; color: #842222; opacity: 1; }
#answer { margin-top: 20px; font-weight: bold; }
#celebration h2 { font-size: clamp(30px, 5vw, 48px); }
#celebration p { font-size: 18px; }
#celebration button { font-size: 18px; }