.sq-panel{gap:10px;display:grid}@media (width>=1024px){.sq-panel{gap:14px}}.sq-screen{justify-content:center;align-items:center;padding:12px;display:flex}@media (width>=1024px){.sq-screen{padding:28px}}.sq-grid{aspect-ratio:1;direction:ltr;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:440px;display:grid}@media (width>=1024px){.sq-grid{gap:12px;max-width:480px}}.sq-cell{border-radius:var(--radius-sm);background:var(--screen-line);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;border:0;min-width:0;margin:0;padding:0;transition:background-color .18s,box-shadow .18s}.sq-screen:not([data-phase=play]) .sq-cell{cursor:default}@media (hover:hover){.sq-screen[data-phase=play] .sq-cell:hover{background:var(--screen-line-2)}}.sq-cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sq-cell--lit,.sq-screen .sq-cell--lit:hover{background:var(--accent);transition:none}.sq-cell--tap,.sq-screen .sq-cell--tap:hover{background:var(--screen-ink);transition:none}.sq-screen[data-phase=pass] .sq-cell{background:var(--screen-line-2)}.sq-cell--wrong{background:var(--screen-line-2);box-shadow:inset 0 0 0 3px var(--screen-ink)}.sq-cell--expected{background:var(--accent)}.sq-layer{z-index:2;text-align:center;background:#161616cc;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:20px;display:flex;position:absolute;inset:0}.sq-title{letter-spacing:-.01em;color:var(--screen-ink);font-size:24px;font-weight:700;line-height:1.15}.sq-act{min-width:168px}.sq-layer--result{gap:12px}.sq-sum{color:var(--screen-muted);font-size:15px}.sq-big{color:var(--screen-ink);direction:ltr;align-items:baseline;gap:10px;display:flex}.sq-big .num{font-size:72px;font-weight:200;line-height:1}.sq-big small{color:var(--screen-muted);font-size:18px}@media (width>=1024px){.sq-title{font-size:32px}.sq-big .num{font-size:104px}.sq-big small{font-size:22px}}@media (prefers-reduced-motion:no-preference){.sq-layer{animation:.24s ease-out sq-in}.sq-cell--wrong{animation:.32s ease-out sq-shake}}@keyframes sq-in{0%{opacity:0}to{opacity:1}}@keyframes sq-shake{0%,to{transform:none}25%{transform:translate(-5px)}50%{transform:translate(4px)}75%{transform:translate(-2px)}}
