:root{background-color:#fff;--bright-blue: oklch(51.01% .274 263.83);--indigo-blue: oklch(51.64% .229 281.65);--electric-violet: oklch(53.18% .28 296.97);--french-violet: oklch(47.66% .246 305.88);--vivid-pink: oklch(69.02% .277 332.77);--hot-pink: oklch(59.91% .239 8.14);--hot-red: oklch(61.42% .238 15.34);--orange-red: oklch(63.32% .24 31.68);--super-green: oklch(79.12% .257 155.13);--subtle-purple: color-mix(in srgb, var(--bright-blue) 5%, white 10%);--light-blue: color-mix(in srgb, var(--bright-blue), white 50%);--light-violet: color-mix(in srgb, var(--electric-violet), white 65%);--light-orange: color-mix(in srgb, var(--orange-red), white 50%);--light-pink: color-mix(in srgb, var(--vivid-pink) 10%, white 80%);--symbolic-purple: oklch(42.86% .29 266.4);--symbolic-gray: oklch(66.98% 0 0);--symbolic-blue: oklch(42.45% .223 263.38);--symbolic-pink: oklch(63.67% .254 13.47);--symbolic-orange: oklch(64.73% .23769984683784018 33.18328352127882);--symbolic-yellow: oklch(78.09% .163 65.69);--symbolic-green: oklch(67.83% .229 142.73);--symbolic-cyan: oklch(67.05% .1205924489987394 181.34025902203868);--symbolic-magenta: oklch(51.74% .25453048882711515 315.26261625862725);--symbolic-teal: oklch(57.59% .083 230.58);--symbolic-brown: oklch(49.06% .128 46.41);--symbolic-lime: oklch(70.33% .2078857836035299 135.66843631046476);--gray-1000: oklch(16.93% .004 285.95);--gray-900: oklch(19.37% .006 300.98);--gray-800: oklch(25.16% .008 308.11);--gray-700: oklch(36.98% .014 302.71);--gray-600: oklch(44% .019 306.08);--gray-500: oklch(54.84% .023 304.99);--gray-400: oklch(70.9% .015 304.04);--gray-300: oklch(84.01% .009 308.34);--gray-200: oklch(91.75% .004 301.42);--gray-100: oklch(97.12% .002 325.59);--gray-50: oklch(98.81% 0 0);--red-to-pink-horizontal-gradient: linear-gradient( 90deg, var(--hot-pink) 11.42%, var(--hot-red) 34.83%, var(--vivid-pink) 60.69% );--red-to-pink-to-purple-horizontal-gradient: linear-gradient( 90deg, var(--orange-red) 0%, var(--vivid-pink) 50%, var(--electric-violet) 100% );--pink-to-highlight-to-purple-to-blue-horizontal-gradient: linear-gradient( 140deg, var(--vivid-pink) 0%, var(--vivid-pink) 15%, color-mix(in srgb, var(--vivid-pink), var(--electric-violet) 50%) 25%, color-mix(in srgb, var(--vivid-pink), var(--electric-violet) 10%) 35%, color-mix(in srgb, var(--vivid-pink), var(--orange-red) 50%) 42%, color-mix(in srgb, var(--vivid-pink), var(--orange-red) 50%) 44%, color-mix(in srgb, var(--vivid-pink), var(--page-background) 70%) 47%, var(--electric-violet) 48%, var(--bright-blue) 60% );--purple-to-blue-horizontal-gradient: linear-gradient( 90deg, var(--electric-violet) 0%, var(--bright-blue) 100% );--purple-to-blue-vertical-gradient: linear-gradient( 0deg, var(--electric-violet) 0%, var(--bright-blue) 100% );--red-to-orange-horizontal-gradient: linear-gradient( 90deg, var(--hot-pink) 0%, var(--orange-red) 100% );--red-to-orange-vertical-gradient: linear-gradient( 0deg, var(--hot-pink) 0%, var(--orange-red) 100% );--pink-to-purple-horizontal-gradient: linear-gradient( 90deg, var(--vivid-pink) 0%, var(--electric-violet) 100% );--pink-to-purple-vertical-gradient: linear-gradient( 0deg, var(--electric-violet) 0%, var(--vivid-pink) 100% );--purple-to-light-purple-vertical-gradient: linear-gradient( 0deg, var(--french-violet) 0%, var(--light-violet) 100% );--green-to-cyan-vertical-gradient: linear-gradient( 0deg, var(--symbolic-cyan) 0%, var(--super-green) 100% );--blue-to-teal-vertical-gradient: linear-gradient( 0deg, var(--bright-blue) 0%, var(--light-blue) 100% );--blue-to-cyan-vertical-gradient: linear-gradient( 0deg, var(--bright-blue) 0%, var(--symbolic-cyan) 100% );--black-to-gray-vertical-gradient: linear-gradient( 0deg, var(--primary-contrast) 0%, var(--gray-400) 100% );--red-to-pink-vertical-gradient: linear-gradient( 0deg, var(--hot-red) 0%, var(--vivid-pink) 100% );--orange-to-pink-vertical-gradient: linear-gradient( 0deg, var(--vivid-pink) 0%, var(--light-orange) 100% );--page-bg-radial-gradient: radial-gradient(circle, white 0%, white 100%);--soft-pink-radial-gradient: radial-gradient( circle at center bottom, var(--light-pink) 0%, white 80% );--full-contrast: black;--primary-contrast: var(--gray-900);--secondary-contrast: var(--gray-800);--tertiary-contrast: var(--gray-700);--quaternary-contrast: var(--gray-500);--quinary-contrast: var(--gray-300);--senary-contrast: var(--gray-200);--septenary-contrast: var(--gray-100);--octonary-contrast: var(--gray-50);--page-background: white;--gray-unfilled: var(--gray-400);--webgl-page-background: #ffffff;--webgl-gray-unfilled: #a39fa9;--mdc-snackbar-container-shape: .25rem;--mdc-snackbar-container-color: var(--page-background);--mdc-snackbar-supporting-text-color: var(--primary-contrast)}body{font-family:Arial,sans-serif;box-sizing:border-box}app-comp-1{width:calc(100% - 40px)}app-comp-1>div.component>div.children{justify-content:center}button.emphasize{background-color:#dfc;border-color:#260;color:#260}.card{display:flex;flex-direction:column;border:1px solid var(--senary-contrast);border-radius:.25rem;position:relative;transition:border .3s ease;box-shadow:10px 4px 40px #00000003}.card:before{content:"";inset:-1px;position:absolute;background:transparent;border-radius:.25rem;z-index:0}.card:hover:before{background:var(--red-to-pink-to-purple-horizontal-gradient)}.card:has(nav,h3,article,ul) header{flex:1;border-radius:.25rem .25rem 0 0;border-bottom:1px solid var(--senary-contrast)}.card header{display:flex;flex-direction:column;justify-content:center;padding:.7rem 1rem;border-radius:.25rem;background-color:var(--octonary-contrast);position:relative;z-index:10;transition:border .3s ease}.card header h3{display:inline-block;font-family:var(--code-font);font-size:1rem;letter-spacing:-.025rem;margin:0}.card header code,.card header span{font-size:.875rem}.card>nav,.card>article,.card>ul{position:relative;background:var(--septenary-contrast);border-radius:0 0 .25rem .25rem;border-bottom:1px solid var(--senary-contrast)}.card>ul{margin:0;padding:1em;padding-inline-start:40px}.card>p{padding-inline:1.25rem;margin-block-end:0}button,select{cursor:pointer;border:none;outline:none;position:relative;border-radius:.25rem;padding:.25rem .5rem;width:max-content;--angle: 90deg;background:linear-gradient(var(--angle),var(--orange-red) 0%,var(--vivid-pink) 50%,var(--electric-violet) 100%)}button:before,select:before{content:attr(text);position:absolute;inset:1px;background:var(--page-bg-radial-gradient);border-radius:.25rem;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease,background .3s ease;color:var(--primary-contrast)}button:after,select:after{content:attr(text);position:absolute;inset:1px;background:var(--page-background);border-radius:.25rem;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease,background .3s ease;color:var(--primary-contrast)}button:hover:not([disabled]):before,select:hover:not([disabled]):before{background-color:var(--page-background);background:var(--soft-pink-radial-gradient);opacity:.9}button:hover:not([disabled]):after,select:hover:not([disabled]):after{opacity:0}button:active:before,select:active:before{opacity:.8}button:disabled,select:disabled{opacity:.7;background:var(--quinary-contrast);color:var(--primary-contrast)}button:disabled:before,select:disabled:before{background-color:var(--page-background);background:var(--page-bg-radial-gradient)}button:disabled:after,select:disabled:after{background:var(--quinary-contrast)}