.sm{position:relative;max-width:24rem;margin-inline:auto}.sm-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}.sm-head-right{display:flex;align-items:center;gap:.6rem}.sm .score-box{display:flex;flex-direction:column;align-items:center;min-width:4.4rem;padding:.4rem .7rem;border-radius:.6rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);font-family:var(--font-mono);font-weight:800;font-size:1.2rem;color:#fff}.sm .score-label{font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-blue)}.sm-status{flex:1;text-align:center;font-size:.85rem;color:#e7e7f399;min-height:1.25rem;font-family:var(--font-mono)}.sm-mute{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:.6rem;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:var(--color-cyan);font-size:1.1rem;cursor:pointer;transition:color .18s ease,border-color .18s ease,background-color .18s ease}.sm-mute:hover{border-color:var(--color-cyan);background:#22d3ee14}.sm-mute.is-muted{color:#e7e7f366}.sm-mute.is-muted .glyph{position:relative}.sm-mute.is-muted .glyph:after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1.5px;background:currentColor;transform:rotate(-30deg)}.sm-pad-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.7rem;aspect-ratio:1;max-width:20rem;margin-inline:auto}.sm-pad{position:relative;display:grid;place-items:center;border:1px solid color-mix(in srgb,currentColor 26%,transparent);background:color-mix(in srgb,currentColor 9%,#0b0b16);cursor:pointer;min-width:0;min-height:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation;transition:transform .1s ease,background-color .16s ease,box-shadow .18s ease,border-color .16s ease}.sm-glyph{font-size:clamp(1.7rem,9vw,2.7rem);line-height:1;color:currentColor;opacity:.42;transition:opacity .14s ease,text-shadow .18s ease}.sm-c{color:var(--color-cyan);border-radius:100% 0 0}.sm-m{color:var(--color-magenta);border-radius:0 100% 0 0}.sm-l{color:var(--color-lime);border-radius:0 0 0 100%}.sm-a{color:var(--color-amber);border-radius:0 0 100%}.sm-c .sm-glyph{transform:translate(-26%,-26%)}.sm-m .sm-glyph{transform:translate(26%,-26%)}.sm-l .sm-glyph{transform:translate(-26%,26%)}.sm-a .sm-glyph{transform:translate(26%,26%)}.sm-pad:hover{border-color:color-mix(in srgb,currentColor 55%,transparent)}.sm-pad.lit{background:color-mix(in srgb,currentColor 34%,#0b0b16);border-color:currentColor;box-shadow:0 0 34px -4px currentColor,inset 0 0 26px -8px currentColor;transform:scale(1.03)}.sm-pad.lit .sm-glyph{opacity:1;text-shadow:0 0 16px currentColor,0 0 30px currentColor}.sm-hub{position:absolute;inset:0;margin:auto;width:33%;height:33%;border-radius:50%;background:radial-gradient(circle at 50% 38%,#15152a,#0a0a14);border:2px solid rgba(255,255,255,.12);display:grid;place-items:center;color:var(--color-blue);font-size:1.4rem;pointer-events:none;box-shadow:inset 0 0 14px -4px #000000e6,0 0 0 6px #0b0b16b3;transition:color .2s ease,border-color .2s ease}.sm-pad-grid.turn .sm-hub{animation:sm-breathe 1.5s ease-in-out infinite;border-color:color-mix(in srgb,var(--color-blue) 50%,transparent)}@keyframes sm-breathe{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}.sm.shake{animation:sm-shake .4s ease}@keyframes sm-shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}}.sm-hint{margin-top:.7rem;font-size:.72rem;color:#e7e7f366;font-family:var(--font-mono);display:flex;align-items:center;justify-content:center;gap:.35rem;flex-wrap:wrap}.sm-hint kbd{display:inline-grid;place-items:center;min-width:1.25rem;padding:.05rem .3rem;border-radius:.3rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.12);color:#e7e7f3b3;font-size:.68rem}.sm-overlay{position:absolute;inset:0;border-radius:1rem;background:#07070ee6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:5}@media(prefers-reduced-motion:reduce){.sm-pad,.sm-pad.lit{transition:opacity .1s ease,background-color .1s ease;transform:none}.sm-pad.lit{transform:none}.sm-pad-grid.turn .sm-hub,.sm.shake{animation:none}}