:root{--so-added:#93B8F2}
.sg-card .mini .so-mini{display:block;animation:none}
.sg-card .mini .so-mini path{stroke:#1F2933;stroke-width:1.2}
.sg-card .mini .so-mini .t{fill:#F2F5FB}
.sg-card .mini .so-mini .l{fill:#E2E8F3}
.sg-card .mini .so-mini .r{fill:#CED9EA}
.sg-card .mini .so-mini text{font:800 16px "MW Nunito",Nunito,sans-serif;fill:#2F6FEB}
.so-hero,.so-stage svg{display:block;width:100%;max-width:480px;height:auto;margin-inline:auto;font-family:"MW Nunito",Nunito,sans-serif;font-variant-numeric:tabular-nums;fill:#1F2933}
.so-hero{max-width:420px}
.so-caption{font-size:14px;font-weight:700;text-anchor:middle}
.so-tile{opacity:1;transition:opacity 300ms}
.so-hero.so-wait .so-tile:not(:first-child){opacity:0}
.so-hero.so-wait .so-tile.so-shown{opacity:1}
.so-stage-caption{font-size:15px;color:#67757F;line-height:1.5;margin:0 0 12px}
.so-stage .sg-read,.so-stage p,.so-work,.so-controls .sg-btn,.so-cubes .sg-btn,.so-grid-controls .sg-btn,.so-grid-reset{font-size:15px}
.so-stage [role=button]{cursor:pointer;outline:none}
.so-stage [role=button]:focus-visible rect{outline:3px solid #2F6FEB;outline-offset:3px}
.so-stage .sg-btn:focus-visible,.so-grid:focus-visible{outline:3px solid #2F6FEB;outline-offset:3px}
.so-controls{display:flex;flex-wrap:wrap;gap:8px}
.so-controls .sg-btn,.so-cubes .sg-btn,.so-grid-controls .sg-btn,.so-grid-reset{box-sizing:border-box;min-width:44px;min-height:44px;text-align:center}
.so-controls [hidden],.so-grid-reset[hidden],.so-grid-controls[hidden]{display:none}
.so-edge.so-draw{stroke-dasharray:1;animation:so-draw 250ms linear}
.so-net .so-pulse rect{animation:so-pulse 300ms}
.so-tally,.so-found3{font-weight:700}
.so-cols [data-so-col] rect{transition:fill 200ms}
.so-cols [data-so-col].so-added rect{fill:var(--so-added);stroke:#2F6FEB;stroke-width:2}
.so-cols.so-full [data-so-col].so-added rect{stroke:#4A7A1E;stroke-width:2}
.so-cols .so-blocked>rect:first-child{stroke:#D64545;stroke-width:3}
.so-work{list-style:none;padding:0;margin:14px 0 0;line-height:1.5}
.so-work:empty{margin:0}
.so-work li{opacity:0;transition:opacity 250ms}
.so-work li.so-in{opacity:1}
.so-work li.so-final{color:#4A7A1E;font-weight:800}
.so-cubes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.so-cubes .sg-btn{display:flex;align-items:center;justify-content:center;gap:6px}
.so-cubes .sg-btn.on::before{content:"";display:block;width:10px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);flex:none}
.so-solid [data-so-cube]{transition:opacity 150ms}
.so-solid.so-isolating [data-so-cube]{opacity:.3}
.so-solid.so-isolating [data-so-cube].so-chosen{opacity:1}
.so-solid [data-so-cube].so-chosen polygon{stroke:#2F6FEB;stroke-width:3}
.so-solid [data-so-cube].so-found-cube polygon{stroke:#4A7A1E;stroke-width:2.5}
.so-grid-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.so-grid-controls .sg-btn{padding:9px 10px}
.so-grid-controls [data-so-action=place]{background:var(--u-navy);color:#fff;box-shadow:none}
.so-grid-controls .sg-btn:disabled{opacity:.5;cursor:default}
.so-pen-dot{transition:cx 120ms,cy 120ms}
.so-by.so-draw,.so-yc.so-draw{stroke-dasharray:1;animation:so-draw 400ms linear}
.so-height-table{width:max-content;margin-bottom:14px;text-align:center}
.so-ht{border-collapse:collapse;font-size:15px;font-weight:700}
.so-ht td{width:44px;height:44px;box-sizing:border-box;border:1.5px solid #CED9EA;padding:0;text-align:center}
.so-height-table p{font-size:14px;color:#67757F;margin:6px 0 0}
.sg-layout:has(.so-hero) .sg-btn,.sg-layout:has(.so-hero) .sg-fb,.sg-layout:has(.so-hero) .sg-read,.sg-layout:has(.so-hero) ul,.sg-layout:has(.so-hero) ol,.sg-layout:has(.so-hero) .steps li{font-size:15px}
.sg-layout:has(.so-hero) .sg-opts button{box-sizing:border-box;min-height:44px;font-size:15px}
.sg-layout:has(.so-hero) .sg-btn,.sg-layout:has(.so-hero) .sg-links a,.sg-layout:has(.so-hero) .sg-next a,.sg-layout:has(.so-hero) .sg-rail a{box-sizing:border-box;min-height:44px}
.sg-layout:has(.so-hero) .sg-btn:focus-visible,.sg-layout:has(.so-hero) .sg-opts button:focus-visible{outline:3px solid #2F6FEB;outline-offset:2px}
@keyframes so-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes so-pulse{50%{stroke-opacity:.3}}
@media(max-width:900px){.so-cubes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){
.so-tile,.so-cols [data-so-col] rect,.so-work li,.so-solid [data-so-cube],.so-pen-dot{transition:none}
.so-hero.so-wait .so-tile:not(:first-child){opacity:1}
.so-edge.so-draw,.so-by.so-draw,.so-yc.so-draw,.so-net .so-pulse rect{animation:none}
.sg-layout:has(.so-hero) *, .sg-layout:has(.so-hero) *::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}