[CSS] Break Perseus styling into its own Cascade Layers

.changeset/wet-llamas-join.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/math-input": minor
+"@khanacademy/perseus": minor
+---
+
+Break Perseus styling into its own Cascade Layers

.storybook/main.ts

@@ -1,3 +1,3 @@
 import {mergeConfig} from "vite";
 import {configureSort} from "storybook-multilevel-sort";
 import type {StorybookConfig} from "@storybook/react-vite";
@@ -14,8 +14,12 @@
         if (pathname.endsWith(".css")) {
             // Exclude the CSS files that are not part of the shared layer.
             if (!excludedCssFiles.some((file) => pathname.endsWith(file))) {
-                // Exclude any CSS file that already has a layer statement.
-                if (!code.includes("@layer")) {
+                // Exclude any CSS file that already has a layer statement,
+                //    unless it is specifying a sub-layer.
+                if (
+                    !code.includes("@layer") ||
+                    /(?=.*@layer)(?=.*\bperseus-legacy\b)/s.test(code)
+                ) {
                     const layerStatements =
                         "@layer reset, shared, legacy;\n@layer shared";
                     return {

packages/math-input/styles/main.css

@@ -1,4 +1,7 @@
-@import "mathquill/build/mathquill.css";
+@layer libraries, perseus-legacy;
+
+@import "mathquill/build/mathquill.css" layer(libraries);
+
 .keypad-input {
     outline: none !important;
 }