.sg-card .mini svg{display:block}
.ap4-hero,.ap4-side,.ap4-cut,.ap4-slide,.ap4-same,.ap4-floor{color:#1F2933}
.ap4-hero{width:100%;max-width:300px;margin:0 auto}
.ap4-hero svg,.ap4-side svg,.ap4-cut svg,.ap4-slide svg,.ap4-same svg,.ap4-floor svg{display:block;width:100%;height:auto;margin:0 auto}
.ap4-side svg{max-width:420px}
.ap4-cut svg,.ap4-slide svg,.ap4-same svg,.ap4-floor svg{max-width:440px}
.ap4-hero text,.ap4-side text,.ap4-cut text,.ap4-slide text,.ap4-same text,.ap4-floor text{font-family:Nunito,var(--u-font),sans-serif;font-size:15px;font-weight:700;fill:#1F2933}
.ap4-outline,.ap4-side-edge{fill:none;stroke:#1F2933;stroke-width:2.5}
.ap4-side-edge{transition:stroke 250ms,stroke-width 250ms}
.ap4-side-edge.ap4-active{stroke:#2F6FEB;stroke-width:5}
.ap4-side-fill,.ap4-hero-fill{transition:opacity 400ms}
.ap4-hero .ap4-hero-line{font-weight:800;fill:#2F6FEB}
.ap4-hero.ap4-area .ap4-hero-line{fill:#1F2933}
.ap4-hero-trace{transition:opacity 300ms;opacity:1}
.ap4-hero.ap4-area .ap4-hero-trace{opacity:0}
.ap4-hero.ap4-area .ap4-hero-fill,.ap4-hero.ap4-reduced .ap4-hero-fill{opacity:.7}
.ap4-hero.ap4-reduced .ap4-hero-line{fill:#1F2933}
.ap4-draw-hero{animation:ap4-hero-draw 1200ms ease-in-out both}
@keyframes ap4-hero-draw{from{stroke-dashoffset:680}to{stroke-dashoffset:0}}
.ap4-pills,.ap4-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ap4-pills{margin-bottom:12px}
.ap4-controls{margin-top:12px}
.ap4-side .sg-btn,.ap4-cut .sg-btn,.ap4-slide .sg-btn,.ap4-same .sg-btn,.ap4-floor .sg-btn{box-sizing:border-box;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.ap4-controls .ap4-primary{background:var(--u-navy);color:#FFFFFF;box-shadow:none}
.ap4-side .sg-btn:focus-visible,.ap4-cut .sg-btn:focus-visible,.ap4-slide .sg-btn:focus-visible,.ap4-same .sg-btn:focus-visible,.ap4-floor .sg-btn:focus-visible{outline-color:#2F6FEB}
.ap4-cut .sg-btn:disabled{opacity:.5;cursor:default;transform:none}
.ap4-side [hidden],.ap4-cut [hidden],.ap4-slide [hidden],.ap4-same [hidden],.ap4-floor [hidden]{display:none!important}
.ap4-reveal{opacity:0;pointer-events:none;transition:opacity 200ms}
.ap4-reveal.ap4-show{opacity:1}
.ap4-cut .ap4-letter{font-size:14px;font-weight:800}
.ap4-cut .ap4-area-label{font-size:14px;font-weight:800}
.ap4-cut .ap4-grey{fill:#67757F}
.ap4-side .ap4-chip,.ap4-same .ap4-chip{font-size:14px;fill:#67757F}
.ap4-side .ap4-known,.ap4-cut .ap4-known,.ap4-slide .ap4-total,.ap4-floor .ap4-total{fill:#2F6FEB}
.ap4-label-swap{animation:ap4-label-in 150ms}
@keyframes ap4-label-in{from{opacity:0}to{opacity:1}}
.ap4-cut-under{stroke-dasharray:1;stroke-dashoffset:1}
.ap4-cut-line.ap4-show .ap4-cut-under{animation:ap4-cut-draw 400ms linear forwards,ap4-cut-hide 1ms 400ms forwards}
.ap4-cut-dash{opacity:0}
.ap4-cut-line.ap4-show .ap4-cut-dash{animation:ap4-cut-show 1ms 400ms forwards}
@keyframes ap4-cut-draw{to{stroke-dashoffset:0}}
@keyframes ap4-cut-hide{to{opacity:0}}
@keyframes ap4-cut-show{to{opacity:1}}
#ap4-cut-count{font-size:13px;color:#67757F}
#ap4-cut-count.ap4-complete{color:#4A7A1E}
.ap4-slide-trace{stroke-dasharray:1;stroke-dashoffset:1;transition:opacity 300ms}
.ap4-slide-trace.ap4-show{animation:ap4-trace 1400ms ease-in-out forwards}
.ap4-slide-trace.ap4-faint{opacity:.35}
@keyframes ap4-trace{to{stroke-dashoffset:0}}
.ap4-copy{stroke:#2F6FEB;stroke-width:4;stroke-linecap:round;transition:transform 600ms ease-in-out,opacity 200ms}
.ap4-depth{transition:stroke 250ms,stroke-width 250ms}
.ap4-depth.ap4-active{stroke:#2F6FEB;stroke-width:5}
.ap4-slide .ap4-depth-label.ap4-known{fill:#2F6FEB}
.ap4-piece{fill:#93B8F2;fill-opacity:.55;stroke:#1F2933;stroke-width:2}
.ap4-brackets{fill:none;stroke:#2F6FEB;stroke-width:2.5}
.ap4-same .ap4-bracket-label{font-size:14px;font-weight:800;fill:#2F6FEB;stroke:none}
.ap4-same .ap4-breadths{font-size:13px;font-weight:800;fill:#2F6FEB;stroke:none}
.ap4-same .ap4-piece-area{font-size:13px;font-weight:800}
.ap4-same .ap4-reveal{transition:opacity 300ms}
.ap4-floor .ap4-garden-label{font-size:14px}
.ap4-path{transition:x 300ms,y 300ms,width 300ms,height 300ms}
.ap4-path.ap4-worked{stroke:#2F6FEB;stroke-width:2}
.ap4-tile{fill:#93B8F2;stroke:#2F6FEB;stroke-width:1}
.ap4-tile.ap4-tile-in{animation:ap4-tile-in 150ms both}
@keyframes ap4-tile-in{from{opacity:0}to{opacity:1}}
:root:has(.ap4-hero) .sg-opts button{box-sizing:border-box;min-height:44px}
:root:has(.ap4-hero) .sg-opts button:focus-visible{outline:3px solid #2F6FEB;outline-offset:2px}
:root:has(.ap4-hero) .sg-opts button.not{background:#FFFFFF;box-shadow:inset 0 0 0 1.5px #67757F}
:root:has(.ap4-hero) .sg-btn:focus-visible{outline-color:#2F6FEB}
@media(prefers-reduced-motion:reduce){
.ap4-hero *,.ap4-side *,.ap4-cut *,.ap4-slide *,.ap4-same *,.ap4-floor *{animation:none!important;transition:none!important}
.ap4-hero .ap4-hero-fill{opacity:.7}
.ap4-cut-line.ap4-show .ap4-cut-under{opacity:0}
.ap4-cut-line.ap4-show .ap4-cut-dash{opacity:1}
.ap4-slide-trace.ap4-show{stroke-dashoffset:0}
:root:has(.ap4-hero) .sg-step,:root:has(.ap4-hero) .sg-ex *,:root:has(.ap4-hero) .sg-opts button,:root:has(.ap4-hero) .sg-hint::before,:root:has(.ap4-hero) .sg-btn{animation:none!important;transition:none!important;transform:none!important}
}