.sy-start{grid-template-columns:minmax(0,1fr) 300px}
.sy-hero{width:300px;max-width:100%;color:#1F2933}
.sy-hero svg,.sy-card svg,.sy-fold-figure svg,.sy-board svg{display:block;width:100%;height:auto}
.sy-caption{display:grid;text-align:center}
.sy-caption span{grid-area:1/1}
.sy-caption span+span{opacity:0}
.sy-cards,.sy-folds,.sy-grid,.sy-complete,.sy-diag{color:#1F2933;background:#F1F3F6}
.sy-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sy-card{padding:8px;background:#fff;border:1px solid #D5DCE4;border-radius:12px;min-width:0}
.sy-card.sy-right{border:2px solid #4A7A1E;padding:7px}
.sy-letter{font-size:14px;color:#1F2933}
.sy-card .sg-btn{display:block;width:100%;box-sizing:border-box;text-align:center;margin-top:8px}
.sy-step .sg-play .sg-btn{min-height:44px;box-sizing:border-box;color:#1F2933;box-shadow:inset 0 0 0 1.5px #B9C2CB;line-height:1.3}
.sy-step .sg-play .sg-btn.on{background:#1F2933;color:#fff}
.sy-step .sg-play .sg-btn.sy-fits{background:#EAF2E1;color:#4A7A1E;box-shadow:inset 0 0 0 1.5px #4A7A1E}
.sy-step .sg-play .sg-btn.sy-no-fit{background:#F1F3F6;color:#5B6670}
.sy-step .sg-play .sg-btn:disabled{cursor:default}
.sy-step .sg-play .sg-btn:focus-visible{outline:3px solid #2F6FEB;outline-offset:2px}
.sy-two{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
.sy-fold-figure{width:360px;max-width:100%}
.sy-controls{min-width:0}
.sy-controls p{margin:12px 0 8px}
.sy-options{display:flex;flex-wrap:wrap;gap:8px}
.sy-fold-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sy-fold-buttons .sg-btn{text-align:center}
.sy-actions{display:grid;gap:8px}
.sy-tally{font-size:16px;font-weight:700}
.sy-board{position:relative;width:300px;max-width:100%}
.sy-hit{position:absolute;inset:3.0075188%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr))}
.sy-complete .sy-hit{inset:3.125%;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr))}
.sy-diag .sy-hit{inset:3.7037037%}
.sy-hit button{all:unset;box-sizing:border-box;cursor:pointer;min-width:0;min-height:0;position:relative}
.sy-hit button:focus-visible{outline:3px solid #2F6FEB;outline-offset:-3px}
.sy-board svg{pointer-events:none}
.sy-cells rect{transition:fill .2s}
.sy-axes line{transition:opacity .2s}
.sy-read-lines{white-space:pre-line}
.sy-example-wrap{max-width:200px;margin:0 auto 14px}
.sy-example-wrap svg{display:block;width:100%;height:auto}
.sy-ex .w.hl{background:var(--sg-blue-bg);border-radius:4px;padding:0 3px}
@media(max-width:900px){
.sy-start{grid-template-columns:1fr}
.sy-hero{width:100%;max-width:280px;justify-self:center}
.sy-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sy-two{grid-template-columns:minmax(0,1fr)}
.sy-board,.sy-fold-figure{justify-self:center}
.sy-fold-figure{width:100%;max-width:340px}
}
@media(prefers-reduced-motion:reduce){
.sy-hero *,.sy-step *,.sy-ex *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}