.sy{max-width:800px;margin:0 auto}.sy-intro{font-size:15px;color:var(--color-text-soft);text-align:center;margin:0 0 18px}.sy-solved{display:grid;gap:10px;margin:0 0 10px}.sy-group{padding:16px;border-radius:14px;text-align:center;color:#1a1a1c;animation:sy-in .5s var(--ease-spring) both}@keyframes sy-in{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}.sy-group--1{background:#f2c94c}.sy-group--2{background:#8fcf8f}.sy-group--3{background:#9fbff0}.sy-group--4{background:#c9a4e6}.sy-group__t{margin:0 0 4px;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.sy-group__w{margin:0;font-size:16px;font-weight:700}.sy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.sy-grid.is-shake{animation:lx-shake .4s}.sy-tile{min-height:clamp(64px,9vw,90px);padding:8px;border:0;border-radius:14px;background:var(--g-key);box-shadow:var(--g-key-shadow);color:var(--color-ink);font:900 clamp(13px,1.6vw,18px)/1.15 var(--font-sans);cursor:pointer;overflow-wrap:anywhere;transition:background .2s var(--ease),color .2s var(--ease),transform .25s var(--ease-spring),box-shadow .2s var(--ease)}.sy-tile:hover{background:var(--g-key-hover);transform:translateY(-2px)}.sy-tile:active{transform:scale(.95)}.sy-tile.is-sel{background:var(--color-ink);color:var(--color-bg);transform:scale(.96);box-shadow:none}.sy-tile.is-long{font-size:clamp(11px,1.3vw,15px);overflow-wrap:normal;word-break:normal;hyphens:manual}.sy-mist{text-align:center;font-size:14px;color:var(--color-text-soft);margin:18px 0}.sy-dots{display:inline-flex;gap:6px;vertical-align:middle;margin-left:6px}.sy-dot{width:12px;height:12px;border-radius:50%;background:var(--color-border-strong);transition:background .3s var(--ease),transform .3s var(--ease-spring)}.sy-dot.is-on{background:var(--color-ink)}.sy-dot:not(.is-on){transform:scale(.7)}.sy-tools{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.sy.is-done .sy-tools,.sy.is-done .sy-mist{display:none}.sy-sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:middle}.sy-sw--1{background:#f2c94c}.sy-sw--4{background:#c9a4e6}@media (max-width:760px){.sy-grid{gap:7px}.sy-tile{min-height:62px;border-radius:12px}}