.phoneme-grid{grid-gap:var(--button-spacing);align-content:start;box-sizing:border-box;contain:layout style;display:grid;gap:var(--button-spacing);grid-template-columns:repeat(auto-fit,minmax(var(--min-button-size),var(--max-button-size)));height:100%;justify-content:center;overflow-y:auto;padding:8px;place-items:stretch;width:100%}:root{--base-button-size:60px;--mobile-button-size:50px;--large-button-size:70px}.phoneme-grid.fixed-layout{grid-template-columns:repeat(var(--fixed-columns),minmax(var(--min-button-size),var(--max-button-size)));justify-content:center}.phoneme-grid.list-layout{align-content:start;gap:calc(var(--button-spacing)/2);grid-template-columns:1fr;justify-items:stretch}.phoneme-grid.list-layout .MuiButton-root{aspect-ratio:unset!important;border-radius:8px;height:50px!important;justify-content:flex-start;padding-left:16px;width:100%!important}@media (max-width:480px){.phoneme-grid:not(.list-layout){gap:calc(var(--button-spacing)*.75);grid-template-columns:repeat(auto-fit,minmax(var(--min-button-size),var(--max-button-size)));padding:4px}}@media (min-width:481px) and (max-width:768px){.phoneme-grid{grid-template-columns:repeat(auto-fit,minmax(var(--min-button-size),var(--max-button-size)));padding:6px}}@media (min-width:769px) and (max-width:1024px){.phoneme-grid{grid-template-columns:repeat(auto-fit,minmax(var(--min-button-size),var(--max-button-size)));padding:8px}}@media (min-width:1025px){.phoneme-grid{grid-template-columns:repeat(auto-fit,minmax(var(--min-button-size),var(--max-button-size)));padding:10px}}.phoneme-grid .MuiButton-root{aspect-ratio:1;box-sizing:border-box;height:100%!important;min-width:0!important;min-width:auto!important;width:100%!important}.phoneme-grid .blank-cell{aspect-ratio:1;height:100%;visibility:hidden;width:100%}@media (max-width:480px){.phoneme-grid .MuiButton-root{min-height:44px;min-width:44px}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.phoneme-grid{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (max-width:768px) and (orientation:landscape){.phoneme-grid:not(.list-layout){grid-template-columns:repeat(auto-fit,minmax(calc(var(--min-button-size)*.8),var(--max-button-size)))}}@media (min-width:1920px){.phoneme-grid{margin:0 auto;max-width:1600px}}@media (prefers-reduced-motion:reduce){.phoneme-grid{transition:none}}
/*# sourceMappingURL=main.cc0edd18.css.map*/