.app--simon{grid-template-rows:auto 1fr auto auto}:root{--sm-ring:#0a1222;--sm-dim:.42}:root[data-theme=light]{--sm-ring:#26344f;--sm-dim:.5}.board{place-items:center;min-height:0;padding:8px 16px;display:grid;container-type:size}.board.is-loading .sm-frame{visibility:hidden}.sm-frame{isolation:isolate;aspect-ratio:1;background:var(--sm-ring);width:min(100cqw,100cqh,460px);box-shadow:0 14px 34px var(--shadow), inset 0 1px 0 var(--glass);border-radius:50%;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:3.2%;padding:4%;display:grid;position:relative}.sm-pad{background:var(--pad);box-shadow:inset 0 -6px 0 var(--pad-shade);opacity:var(--sm-dim);touch-action:manipulation;border:0;place-items:center;padding:0;transition:opacity .12s,filter .12s;display:grid;position:relative}.sm-pad--tl{border-radius:100% 10% 10%;grid-area:1/1}.sm-pad--tr{border-radius:10% 100% 10% 10%;grid-area:1/2}.sm-pad--br{border-radius:10% 10% 100%;grid-area:2/2}.sm-pad--bl{border-radius:10% 10% 10% 100%;grid-area:2/1}.sm-pad.is-lit{opacity:1;filter:brightness(1.18)saturate(1.1);box-shadow:inset 0 -6px 0 var(--pad-shade), 0 0 28px color-mix(in srgb, var(--pad) 70%, transparent);z-index:1;transition:none}.sm-pad:disabled{cursor:default}.sm-frame[data-phase=input] .sm-pad:not(.is-lit){opacity:calc(var(--sm-dim) + .14)}.sm-pad.is-wrong{opacity:1;filter:grayscale(.85)brightness(.7)}.sm-glyph{fill:#0a101e8c;pointer-events:none;width:32%;height:32%;display:none}.sm-frame.show-shapes .sm-glyph{display:block}.sm-hub{z-index:2;aspect-ratio:1;background:var(--sm-ring);width:36%;box-shadow:0 0 0 5px var(--sm-ring), inset 0 1px 0 var(--glass);color:#eef3fb;border:0;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:0;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sm-hub b{font-variant-numeric:tabular-nums;font-size:clamp(1.6rem,9cqmin,2.8rem);font-weight:800;line-height:1}.sm-hub b.sm-hub-go{font-size:clamp(1.1rem,6cqmin,1.6rem)}.sm-hub span{color:#93a4c4;font-size:.7rem;font-weight:600}.sm-hub:not(:disabled){cursor:pointer}.sm-frame[data-phase=ready] .sm-hub,.sm-frame[data-phase=over] .sm-hub{box-shadow:0 0 0 5px var(--sm-ring), inset 0 0 0 2px var(--accent)}.sm-hub:active:not(:disabled){transform:translate(-50%,-50%)scale(.96)}.sm-status{text-align:center;color:var(--text-dim);min-height:1.6em;margin:0;padding:6px 16px 0;font-size:.95rem;font-weight:700}
