.pl-svg{display:block;width:100%;height:auto;margin-inline:auto;overflow:visible}
.pl-svg .pl-letter{font-family:"MW Nunito",Nunito,sans-serif;font-weight:700;fill:#20303D;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#fff;stroke-width:3;stroke-linejoin:round}
.pl-number{font-family:"MW Nunito",Nunito,sans-serif;font-weight:700;fill:#20303D;text-anchor:middle;dominant-baseline:central}
.pl-line{fill:none;stroke:#20303D;stroke-width:3;stroke-linecap:round}
.pl-mark{fill:none;stroke:#20303D;stroke-width:2;stroke-linejoin:round}
.pl-arrow{fill:none;stroke:#20303D;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.pl-grid{fill:none;stroke:#5E6B75;stroke-opacity:.35;stroke-width:1}
.pl-tool{fill:#E2E8F3;fill-opacity:.85;stroke:#5B6670;stroke-width:1.5;stroke-linejoin:round}
.pl-ruler{fill:#F1F3F6;stroke:#5B6670;stroke-width:1}
.pl-ticks{fill:none;stroke:#5B6670;stroke-width:1}
.pl-point{fill:#20303D}
.pl-stick{fill:none;stroke:#2F6FEB;stroke-width:4;stroke-linecap:round}
.pl-extra{stroke:#EFA02A}
.pl-wedge{fill:#EFA02A;fill-opacity:.55;stroke:none}
.pl-card-mark{fill:none;stroke:#20303D;stroke-width:1.5}
.pl-drawing-edge{fill:none;stroke:#4A7A1E;stroke-width:2.5}
.pl-new-line{fill:none;stroke:#2F6FEB;stroke-width:3;stroke-linecap:round}
.pl-overview{grid-template-columns:minmax(0,1fr) 320px}
.pl-hero{width:320px;max-width:100%}
.pl-hero-tool .pl-tool{fill-opacity:1}
.pl-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pl-card{box-sizing:border-box;background:#fff;border:1px solid #D5DCE4;border-radius:12px;padding:8px;min-width:0}
.pl-card.pl-correct{border:2px solid #4A7A1E;padding:7px}
.pl-card-letter{display:block;font-size:14px;font-weight:700;color:#20303D}
.pl-card .sg-btn{display:block;width:100%;box-sizing:border-box;min-height:44px;text-align:center;padding:9px 8px;margin-top:8px}
.pl-card .sg-btn:disabled{cursor:default}
.pl-card-tool{fill-opacity:1}
.pl-gap>.pl-svg,.pl-perp>.pl-svg,.pl-para>.pl-svg{max-width:440px}
.pl-controls,.pl-presets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-items:center}
.pl-controls{margin-top:12px}
.pl-presets{margin-bottom:12px}
.pl-controls .sg-btn,.pl-presets .sg-btn{box-sizing:border-box;min-height:44px}
.pl-controls .sg-btn:disabled{opacity:.5;cursor:default;transform:none}
.pl-counter{font-size:13px;color:#5B6670}
.pl-gap>.pl-svg:focus-visible{outline:2px solid #20303D;outline-offset:3px}
.pl-example-svg{max-width:200px;margin:0 auto 14px}
.pl-example-line{fill:none;stroke:#20303D;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pl-example-new{fill:none;stroke:#2F6FEB;stroke-width:2.5;stroke-linecap:round}
.pl-example-mark{fill:none;stroke:#20303D;stroke-width:1.5;stroke-linejoin:round}
.pl-example-arrows{fill:none;stroke:#20303D;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pl-mini{display:inline-flex;color:#20303D}
@media(max-width:900px){.pl-overview{grid-template-columns:1fr}.pl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.pl-hero{width:100%;max-width:320px}}
@media(max-width:480px){.pl-gap>.pl-svg,.pl-perp>.pl-svg,.pl-para>.pl-svg{max-width:340px}}
@media(prefers-reduced-motion:reduce){.pl-svg *,.pl-cards *,.pl-card-play .sg-hint::before,.pl-gap .sg-hint::before,.pl-perp .sg-hint::before,.pl-para .sg-hint::before,.pl-overview~.sg-ex .ans.in,.pl-overview~.sg-step .sg-opts button.yes{animation:none!important;transition:none!important}}