.learning-shell .shape-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch;margin:20px 0}.learning-shell .shape-properties{margin:0;padding:18px 22px 18px 38px;border:1px solid #c5e5e2;border-radius:11px;background:#f2fbfa;line-height:1.7}.learning-shell .shape-properties li+li{margin-top:8px}.learning-shell .shape-figure{display:grid;place-items:center;margin:0;padding:12px;border:1px solid #dbe5f3;border-radius:11px;background:#fbfcff}.learning-shell .shape-figure svg{display:block;width:min(100%,320px);height:auto}.learning-shell .shape-figure figcaption{text-align:center;font-size:13px;color:#526080;line-height:1.5}.learning-shell .shape-fill{fill:#e6f5f3;stroke:#142454;stroke-width:3;stroke-linejoin:round}.learning-shell .shape-diagonal{fill:none;stroke:#2453a9;stroke-width:2.6}.learning-shell .angle-arc{fill:none;stroke:#dd8436;stroke-width:2.4;stroke-linecap:round}.learning-shell .parallel-mark,.learning-shell .equal-mark{fill:none;stroke:#168b87;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.learning-shell .shape-figure text{font:800 19px 'DM Sans',sans-serif;fill:#142454}.learning-shell .shape-figure .angle-unknown{fill:#b55d16}.learning-shell .shape-figure .angle-known{fill:#2453a9}.learning-shell #triangle .shape-figure .angle-known{font-size:16px}.learning-shell .shape-figure .corner-mark{fill:none;stroke:#168b87;stroke-width:2.3}.learning-shell .angle-equation{display:block;font-size:clamp(19px,2.5vw,24px)}.learning-shell .angle-equation .equation-expression{display:block;line-height:1.5;overflow-wrap:anywhere}.learning-shell .angle-card .answer-line{font-size:19px;font-weight:700}.learning-shell .triangle-note{padding:13px 16px;border-radius:9px;background:#edf3fd;color:#142454;line-height:1.55}.learning-shell .shape-layout.is-animated-layout{display:block}.learning-shell .angle-demo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:start;margin-top:18px}.learning-shell .angle-demo .shape-figure{position:sticky;top:16px;align-self:start}.learning-shell .angle-demo .shape-figure figcaption{display:grid;align-content:start;min-height:76px;padding:8px 2px 0}.learning-shell .angle-demo .shape-figure figcaption.is-step-explanation{color:#0b615e;font-weight:700}.learning-shell .angle-working{min-width:0}.learning-shell .angle-working .step-controls{margin:0 0 12px}.learning-shell .angle-working .worked-equation{margin:0 0 12px}.learning-shell .shape-figure svg path.is-visual-focus{stroke:#ce671b;stroke-width:4;filter:drop-shadow(0 0 3px #efb270);animation:shape-focus-in .55s ease-out both}.learning-shell .shape-figure svg text.is-visual-focus{fill:#b55d16;animation:shape-label-in .55s ease-out both}.learning-shell .shape-figure svg .angle-arc.is-angle-active{stroke:#bd5710;stroke-width:4;filter:drop-shadow(0 0 3px #efb270);animation:shape-angle-in .55s ease-out both}.learning-shell .shape-figure svg text.is-solved{fill:#0b615e;font-size:20px;animation:shape-answer-in .45s ease-out both}.learning-shell #rhombus .shape-figure svg text.is-solved{font-size:13px}.learning-shell .angle-equation .equation-line.is-current{animation:shape-equation-in .3s ease-out both}@keyframes shape-focus-in{0%{opacity:.45;stroke-width:2}65%{stroke-width:5}100%{opacity:1;stroke-width:4}}@keyframes shape-label-in{0%{opacity:.4}100%{opacity:1}}@keyframes shape-angle-in{0%{opacity:.3;stroke-width:1}65%{stroke-width:5}100%{opacity:1;stroke-width:4}}@keyframes shape-answer-in{0%{opacity:0;transform:scale(.8)}75%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}@keyframes shape-equation-in{0%{opacity:.35;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}@media(max-width:650px){.learning-shell .shape-layout{grid-template-columns:1fr}.learning-shell .shape-properties{padding:14px 18px 14px 34px}.learning-shell .angle-demo{grid-template-columns:1fr}.learning-shell .angle-demo .shape-figure{position:static}.learning-shell .angle-working .step-controls{margin-top:0}}@media(prefers-reduced-motion:reduce){.learning-shell .shape-figure svg path.is-visual-focus,.learning-shell .shape-figure svg text.is-visual-focus,.learning-shell .shape-figure svg .angle-arc.is-angle-active,.learning-shell .shape-figure svg text.is-solved,.learning-shell .angle-equation .equation-line.is-current{animation:none}}