[
  {
    "path": ".gitignore",
    "content": "node_modules\n.DS_Store\ndeploy"
  },
  {
    "path": "Gruntfile.js",
    "content": "module.exports = function(grunt) {\n\n  grunt.loadNpmTasks('grunt-postcss');\n  grunt.loadNpmTasks('grunt-dart-sass');\n  grunt.loadNpmTasks('grunt-contrib-watch');\n\n  grunt.initConfig({\n    'dart-sass': {\n      options: {\n        sourceMap: true\n      },\n      dist: {\n        files: {\n          'main.css': 'scss/main.scss'\n        }\n      }\n    },\n    postcss: {\n      options: {\n        procesors: [\n          require('autoprefixer')({\n            browsers: ['last 3 versions', 'Firefox 30']\n          })\n        ]\n      },\n      dist: {\n        src: 'main.css'\n      }\n    },\n    watch: {\n      sass: {\n        files: 'scss/{,buttons/}*.scss',\n        tasks: ['styles']\n      }\n    }\n  });\n\n  // `grunt styles` Build styles\n  grunt.registerTask(\n    'styles',\n    'Compile stylesheets, and add vendor prefixes',\n    ['dart-sass', 'postcss']\n  );\n\n\n  // `grunt dev` Watch for style changes\n  grunt.registerTask(\n    'dev',\n    'Watch and rebuild on file changes',\n    ['styles', 'watch']\n  );\n\n  // Default task (by running `grunt`): just build the stylesheet\n  grunt.registerTask(\n    'default',\n    'Compile stylesheets, and add vendor prefixes',\n    ['styles']\n  );\n};"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2019 Louis-Olivier Brassard\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Buttons\n\nA collection of CSS buttons.\n\n[Live demo](https://labs.loupbrun.ca/buttons/).\n\n## About This Project\n\nMy goal was to create a variety of stylish buttons for the web, using minimal markup while taking advantage of the HTML5/CSS3 technologies.\n\nThe collection includes 26 different button styles.\n\n## Technical Details\n\nEach style has been generated via a component-based system, using [SASS](http://sass-lang.com/) (a CSS preprocessor). The process is designed to make it easy and simple to create a new set of button styles in a modular fashion.\n\nUltimately, the **markup** is the same for each set of button style:\n\n```html\n<button class=\"btn btn-primary\">Button</button>\n```\n\nwhere class `.btn` is the **generic component class** and `.btn-primary` is the **style-specific class**.\n\nLeveraging the power of [SASS mixins](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins), each style is generated simply by taking a color as an input. For the `alpha` style, it looks like this:\n\n```scss\n// Assuming the color variable has been declared, like so:\n// $color-primary: #7AD84E\n.btn-primary { @include btn-alpha($color-primary); }\n```\n\n## How To DIY _(Develop It Yourself)_\n\nThe project comes with a simple Grunt setup to compile the `SCSS` to the `main.css` found in root (but feel free to use your own tools). Requires [Node.js](https://nodejs.org) and the [`grunt-cli`](https://gruntjs.com/). Pretty standard these days.\n\n### Setup\n\n```bash\nnpm i -g grunt-cli # install the grunt-cli\nnpm i # install local packages\n```\n\n### Build\n\n```bash\ngrunt # build those stylesheets\n```\n\n### Development: Watch & Rebuild\n\n```bash\ngrunt dev\n```\n\n## Final Thoughts\n\nLike any bit of UI, buttons should never be dull. Attention to detail is key in a design with sensibiilty.\n\nSay hello, share your ideas or send me your thoughts to `louis` at `loupbrun` dot `ca`.\n\n## Elsewhere On The Web\n\nI’m trying to backtrack articles on the web that refer to this project.\n\n- Codrops - [Collective #313](https://tympanus.net/codrops/collective/collective-313/)  \n  > A collection of interesting button styles by Louis-Olivier Brassard.\n- Speckyboy Web Design Magazine - [10 Amazing CSS Button Libraries & Collections](https://speckyboy.com/css-button-libraries/) \n  > The title may be simple, but Buttons is a library with over 20 collections of styles to choose from. Standouts include the slightly-glassy Delta, the fun and sassy Theta, the roomy and minimal Mu and keyboard-like Phi. Be sure to check out the ultra-cool click effects in the demo.\n- Ric’s Website - [Best Free CSS Tools](https://ric.website/best-free-css-tools/)  \n  > Get outstanding CSS buttons [here](https://labs.loupbrun.ca/buttons/) _\\[points to my website\\]_\n- WPMU Dev - [9 Stunning CSS Button Libraries and Collections for WordPress](https://premium.wpmudev.org/blog/css-button-libraries-collections/)  \n  > This collection of CSS buttons is so chockfull of personality, you might not be able to pull your gaze away (or your visitors’!). They’ve included such a diverse range of button styles and animations that you could realistically use this pack of buttons for use across multiple client sites and no one would be the wiser. This collection would also come in handy for A/B testing CTAs as well as tackling future rebrand projects that don’t need to deviate too far from the baseline design.\n- Coliss - [Summary of HTML5 and CSS3 techniques for implementing buttons of various designs with minimal HTML](https://coliss.com/articles/build-websites/operation/css/collection-of-css-button.html)\n- WHIZ Lists - [Web Design (Index)](http://whiz-lab.com/index.php/front_end/index/1)\n- SeleQt - [CSSボタンのコレクション８選 (#2)](https://www.seleqt.net/design/awesomecssbuttonlibrariesandcollections/)\n- roocket.ir - [50 tools, frameworks and CSS libraries in 2019](https://roocket.ir/articles/50-tools-frameworks-and-csas-library-in-2019)\n- design.webclips.jp - [CSSで実装するボタンデザインとホバーエフェクトのアイデア](https://design.webclips.jp/css-button/)\n- Anatomy - [A Japanese questionnaire crediting these Buttons](https://anatomy.med.gunma-u.ac.jp/?page_id=3327)\n\n## License\n\n[MIT](LICENSE)\n"
  },
  {
    "path": "index.html",
    "content": "<!doctype html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <title>Buttons</title>\n    <meta name=\"description\" content=\"A collection of CSS buttons.\">\n    <meta name=\"viewport\" content=\"width=device-width\">\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"main.css\" />\n    <link rel=\"shortcut icon\" href=\"favicon.ico\" />\n    <link rel=\"apple-touch-icon\" href=\"apple-touch-icon.png\" />\n    <script src=\"libs/FastActive/FastActive.min.js\" defer></script>\n  </head>\n  <body>\n    <header class=\"main-header\">\n      <div class=\"container\">\n        <h1>Buttons</h1>\n\n        <p>A collection of CSS buttons.</p>\n      </div>\n    </header>\n\n    <main>\n      <section class=\"alpha\">\n        <div class=\"container\">\n\n          <h2>Alpha</h2>\n\n          <p class=\"description\">Flat design gone gossip.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n        </div>\n      </section>\n\n      <section class=\"beta\">\n        <div class=\"container\">\n          <h2>Beta</h2>\n\n          <p class=\"description\">CSS3's first steps.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"gamma\">\n        <div class=\"container\">\n          <h2>Gamma</h2>\n\n          <p class=\"description\">Hard solid candy.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"delta\">\n        <div class=\"container\">\n          <h2>Delta</h2>\n\n          <p class=\"description\">Shallow, a little glossy. Not yet flat.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"epsilon\">\n        <div class=\"container\">\n          <h2>Epsilon</h2>\n\n          <p class=\"description\">Skeuomorphism wins again!</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"zeta\">\n        <div class=\"container\">\n          <h2>Zeta</h2>\n\n          <p class=\"description\">Inspired by some F.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"eta\">\n        <div class=\"container\">\n          <h2>Eta</h2>\n\n          <p class=\"description\">Did anyone say glossy?</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"theta\">\n        <div class=\"container\">\n          <h2>Theta</h2>\n\n          <p class=\"description\">Think outside the box.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"iota\">\n        <div class=\"container\">\n          <h2>Iota</h2>\n\n          <p class=\"description\">Not your average flat pilly button.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"kappa\">\n        <div class=\"container\">\n          <h2>Kappa</h2>\n\n          <p class=\"description\">Mushy buttons.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"lambda\">\n        <div class=\"container\">\n          <h2>Lambda</h2>\n\n          <p class=\"description\">Mold into the page.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"mu\">\n        <div class=\"container\">\n          <h2>Mu</h2>\n\n          <p class=\"description\">No hype. Breath, relax and look around.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"nu\">\n        <div class=\"container\">\n          <h2>Nu</h2>\n\n          <p class=\"description\">Nervous, reactive jello bomb pushing others around.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"xi\">\n        <div class=\"container\">\n          <h2>Xi</h2>\n\n          <p class=\"description\">Depth added to improve pushing experience.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"omicron\">\n        <div class=\"container\">\n          <h2>Omicron</h2>\n\n          <p class=\"description\">Good ol'-fashion orbs.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"pi\">\n        <div class=\"container\">\n          <h2>Pi</h2>\n\n          <p class=\"description\">Ghostly marshmallow buttons.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"rho\">\n        <div class=\"container\">\n          <h2>Rho</h2>\n\n          <p class=\"description\">Button nested inside its own coloured well.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"sigma\">\n        <div class=\"container\">\n          <h2>Sigma</h2>\n\n          <p class=\"description\">Simple, solid, subtle.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"tau\">\n        <div class=\"container\">\n          <h2>Tau</h2>\n\n          <p class=\"description\">100% flat design.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"upsilon\">\n        <div class=\"container\">\n          <h2>Upsilon</h2>\n\n          <p class=\"description\">Flat vertical buttons with a little affordance.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"phi\">\n        <div class=\"container\">\n          <h2>Phi</h2>\n\n          <p class=\"description\">Flat goes nuts.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"chi\">\n        <div class=\"container\">\n          <h2>Chi</h2>\n\n          <p class=\"description\">Curtains down!</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"psi\">\n        <div class=\"container\">\n          <h2>Psi</h2>\n\n          <p class=\"description\">For dark UIs.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"omega\">\n        <div class=\"container\">\n          <h2>Omega</h2>\n\n          <p class=\"description\">Fun, flat, lined.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-black\">Button</button>\n          <button class=\"btn btn-dark\">Button</button>\n          <button class=\"btn btn-gray\">Button</button>\n          <button class=\"btn btn-light\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n          <button class=\"btn btn-light btn-disabled\" disabled>Disabled </button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-sm\">Small</button>\n          <button class=\"btn btn-primary\">Regular</button>\n          <button class=\"btn btn-primary btn-md\">Medium</button>\n          <button class=\"btn btn-primary btn-lg\">Large</button>\n\n        </div>\n      </section>\n\n      <section class=\"stock\">\n        <div class=\"container\">\n          <h2>Stock</h2>\n\n          <p class=\"description\">And, finally, the best of them all: your browser's stock buttons.</p>\n\n          <button class=\"btn btn-primary\">Button</button>\n          <button class=\"btn btn-secondary\">Button</button>\n          <button class=\"btn btn-tertiary\">Button</button>\n          <button class=\"btn btn-tetrary\">Button</button>\n\n          <hr />\n\n          <button class=\"btn btn-primary btn-disabled\" disabled>Disabled </button>\n\n        </div>\n      </section>\n\n      <footer class=\"main-footer\" role=\"contentinfo\">\n        <div class=\"container\">\n          <h2>About this project</h2>\n\n          <article class=\"columns\">\n            <p>My goal was to create a nice collection of different buttons made purely out of <abbr title=\"Cascading Style Sheets\">CSS</abbr> and <abbr title=\"HyperText Markup Language\">HTML</abbr>, without any additional markup.</p>\n\n            <p>Aside from designing a variety of buttons, I also wanted to demonstrate the features of CSS and how it is now possible to accomplish a beautiful result without the need for raster images or complex client-side scripting.</p>\n            \n            <p>Finally, remember that there are so many more possible ways to design a button &mdash; these are merely just a few of them. I stuck with the same color inputs and worked with the same typography all along, but those could be changed as well! A <abbr title=\"User Interface\">UI</abbr> does not need to be dull nor the same in every project. Diversity always wins!</p>\n            \n            <p>Made by <a href=\"https://github.com/loup-brun\">@loup-brun</a> (<a href=\"https://github.com/loup-brun/buttons\">Github repo</a>).</p>\n            <p><a href=\"mailto:louis@loupbrun.ca\">Get in touch</a>.</p>\n            \n          </article>\n        </div>\n      </footer>\n\n    </main>\n  </body>\n</html>\n"
  },
  {
    "path": "libs/.bower.json",
    "content": "{\n  \"name\": \"FastActive\",\n  \"homepage\": \"https://github.com/jonathanstark/FastActive\",\n  \"version\": \"1.0.1\",\n  \"_release\": \"1.0.1\",\n  \"_resolution\": {\n    \"type\": \"version\",\n    \"tag\": \"v1.0.1\",\n    \"commit\": \"57cf6aef99a4014af4906da8c0aba2a5e6b2281d\"\n  },\n  \"_source\": \"https://github.com/jonathanstark/FastActive.git\",\n  \"_target\": \"^1.0.1\",\n  \"_originalSource\": \"https://github.com/jonathanstark/FastActive.git\",\n  \"_direct\": true\n}"
  },
  {
    "path": "libs/FastActive/FastActive.js",
    "content": "(function (d, w, activeClass) {\n    var hasTouch = (('ontouchstart' in w) || w.DocumentTouch && d instanceof DocumentTouch);\n    if (!hasTouch) {\n        d.documentElement.className += ' no-touch';\n    } else {\n        var activeElement = null,\n            clearActive = function() {\n                if (activeElement) {\n                    activeElement.classList.remove(activeClass);\n                    activeElement = null;\n                }\n            },\n            setActive = function(e) {\n                clearActive();\n                if (e.target.tagName == 'A') {\n                    activeElement = e.target;\n                    activeElement.classList.add(activeClass);\n                }\n            };\n        d.documentElement.classList.add('touch');\n        d.documentElement.classList.remove('no-touch');\n        d.body.addEventListener('touchstart', setActive, false);\n        d.body.addEventListener('touchmove', clearActive, false);\n    }\n})(document, window, 'active');\n"
  },
  {
    "path": "libs/FastActive/LICENSE",
    "content": "The MIT License\n\nCopyright (c) 2013 Jonathan Stark\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n"
  },
  {
    "path": "libs/FastActive/README.md",
    "content": "FastActive\n==========\n\nFastActive is a javascript snippet that makes websites and web apps feel as responsive as native apps on touch devices.\n\n## Project Goals\n\nThe goal of FastActive is to make it simple for web developers to add instantaneous visual feedback for touch interactions to their websites and web apps with a minuscule amount of javascript. \n\n## Features\n\n* Paste and done: you don't write any javascript!\n* Ultra-lightweight: __516 bytes minified (280 bytes gzipped)!__\n* MIT license: use it _wherever you want_.\n* Responsive design friendly: safe for use in cross-device development.\n* Framework-independent: use with any JS library, or none at all!\n\n## Usage\n\nFor best results, paste the FastActive source into a script tag at the bottom of your HTML page right before the closing body tag. View source at the bottom of [this page](http://jonathanstark.com/) for an example.\n\nOnce you have added FastActive to your site, all it does is add and remove class names. It's up to you to create CSS rules that style the active links appropriately. Here are some suggestions:\n\n* Disable default touch browser tap highlights, like so:\n\n    ```\n    a {\n        -webkit-tap-highlight-color: rgba(0,0,0,0);\n    }\n    ```\n\n* Define some default styles for links, like so:\n\n    ```\n    a {\n        background-color: white;\n        color: darkmagenta;\n    }\n    ```\n\n* Add distinct visual styles for any `a.active` elements, like so:\n\n    ```\n    a.active {\n        background-color: darkmagenta;\n        color: white;\n    }\n    ```\n    \n* The `:hover` and `:active` pseudo class selectors are extremely unpredictable in touch browsers. To limit your `:hover` and `:active` style rules to desktop browsers, prepend the selectors with the `.no-touch` class selector, like so:\n\n    ```\n    .no-touch a:hover {\n        background-color: magenta;\n        color: white;\n    }\n    .no-touch a:active {\n        background-color: darkmagenta;\n        color: white;\n    }\n    ```\n\n__NOTE:__ You can change the class name from the default of `active` to whatever you like by editing the third param passed into the immediately invoked function expression (see the last line of the unminified snippet).\n\n## Discussion \n\nIn my experience, the main reason that web apps feel slower than native is *not* that web based interfaces actually take longer to respond to user interaction, but that *they don't provide instant and predictable visual feedback to touch interactions.* \n\nIf you watch for it, you'll see that it's not uncommon to wait for a second or two for an action to complete in a native iOS app (e.g., tapping a list item in the Settings app, for example, can take a while to actually complete the navigation to the target screen). The difference, however, is that in a native app, the UI *instantly* lets the user know that the tap was registered by providing visual feedback. This has the effect of reassuring the user that \"Yes, we received your request and are working on it as fast as we can.\" \n\nWeb developers can remove the lag on touch interactions in web apps by listening for touch events, but trying to actually respond to touch events as if they were clicks is a huge amount of work and fraught with xplat gotchas. I wanted to make a simple snippet that any n00b could slap into their markup that would create a native-like touch responsiveness without adding the complexity of jettisoning click events entirely. \n\nHence, FastActive. FastActive basically does one thing and one thing only: it toggles an active class name on whatever links the user touches. With that single hook, devs can write simple CSS that will provide instantaneous visual feedback to the user. \n\nTo date, FastActive has been tested in two simple websites, one simple web app, and one complex web app, and the effect has been pretty dramatic. That said, I'd love to get your feedback, so please give it a try and log issues or send pull requests. \n\nCheers!\n\n[Jonathan Stark](http://jonathanstark.com)\n\n## Caveats\n\n[@RickByers](https://twitter.com/RickByers) (Google dev working on Chrome and ChromeOS) pointed out on Twitter that listening to touch events can impose a performance penalty on page scrolling. It's pretty complicated but he does a great job explaining it [here](https://plus.google.com/app/basic/stream/z12oxpsjztabz1wip04cepebireehbbaltc0k). \n\nI haven't experienced any scroll jankiness myself but YMMV. PLMK if you do notice performance problems and I'll take a look at your page to see if there's something I can to do optimize the FastActive code. \n\n## More Info\n\nFor more info about the reasoning behind FastActive, please listen to [Episode 76 of the Nitch Podcast](http://nitch.cc/podcast/episode-76-tickle-class).\n\nThanks to [@paul_irish](https://twitter.com/paul_irish) for pointing me at [this excellent post](http://www.gauntface.co.uk/blog/2013/06/25/touch-feedback-for-mobile-sites/) by [@gauntface](https://twitter.com/gauntface) who deconstructs the issues involved using videos, demos, and interactive code examples. Great stuff!\n\n"
  },
  {
    "path": "main.css",
    "content": "@import \"https://assets.loupbrun.ca/fonts/booster/stylesheet.css\";\nbody {\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  line-height: 1.42;\n  padding: 0;\n  margin: 0;\n}\n\nbutton, a {\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na {\n  text-decoration: none;\n  padding-bottom: 2px;\n  border-bottom: 1px solid #52C11F;\n  color: #52C11F;\n  transition: border-color 0.2s;\n}\na:hover {\n  border-color: transparent;\n}\n\nsection {\n  padding: 10% 1%;\n  color: #6D6F7F;\n}\n\n.container {\n  padding-left: 2%;\n  padding-right: 2%;\n  max-width: 700px;\n  margin: 0 auto;\n}\n\nhr {\n  border-top: 1px solid rgba(0, 0, 0, 0.2);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n  border-left: 0;\n  border-right: 0;\n  margin-top: 25px;\n  margin-bottom: 25px;\n}\n\n.main-header {\n  text-align: center;\n  color: #aab;\n  margin: 0;\n  padding: 40px 0;\n  background-image: linear-gradient(20deg, rgba(0, 0, 0, 0) 84%, rgba(11, 68, 239, 0.9) 84.1%), linear-gradient(120deg, rgba(0, 0, 0, 0) 85%, rgba(82, 193, 31, 0.9) 85.1%), linear-gradient(-75deg, rgba(0, 0, 0, 0) 88%, rgba(255, 0, 106, 0.9) 88.1%), linear-gradient(-140deg, rgba(0, 0, 0, 0) 87%, rgba(153, 27, 226, 0.9) 87.1%);\n  background-blend-mode: multiply;\n}\n\n.main-footer {\n  background-color: #0B44EF;\n  background-image: linear-gradient(-45deg, #0B44EF, #1a8bf4);\n  padding-top: 16%;\n  padding-bottom: 16%;\n  color: #c9d6fd;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  margin: 0.3em 0 0.1em;\n  font-weight: 100;\n}\n\nh1 {\n  font-size: 4em;\n  font-weight: 100;\n}\n\nh2 {\n  font-size: 3em;\n}\n\nh3 {\n  font-size: 2.2em;\n}\n\nh4 {\n  font-size: 1.8em;\n}\n\nh5 {\n  font-size: 1.3em;\n}\n\nh6 {\n  font-size: 1em;\n}\n\n.description {\n  margin: 0 0 1em;\n}\n\n.alpha .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.8em 1.6em;\n  font-weight: normal;\n  border-width: 0;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0.2666666667em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  transition: box-shadow 0.2s, transform 0.2s, color 0.2s;\n}\n.alpha .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.alpha .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.alpha .btn:hover {\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);\n}\n.alpha .btn:active {\n  transform: translateY(3px);\n}\n.alpha .btn-primary {\n  box-shadow: 0 3px 0 0 #367f14, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  background-color: #52C11F;\n  background-image: linear-gradient(-45deg, #52C11F, #7ccc14);\n  color: #E6EAEF;\n}\n.alpha .btn-primary:hover {\n  box-shadow: 0 3px 0 0 #367f14, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;\n}\n.alpha .btn-primary:active {\n  box-shadow: 0 0px 0 0 #2d6911, 0 3px 0 0 rgba(0, 0, 0, 0), 0 4px 16px rgba(0, 0, 0, 0), 0 1px 2px 1px rgba(0, 0, 0, 0.5) inset, 0 -18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  transition: 0s;\n  color: #367f14;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n.alpha .btn-secondary {\n  box-shadow: 0 3px 0 0 #082fa6, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  background-color: #0B44EF;\n  background-image: linear-gradient(-45deg, #0B44EF, #007dfa);\n  color: #E6EAEF;\n}\n.alpha .btn-secondary:hover {\n  box-shadow: 0 3px 0 0 #082fa6, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;\n}\n.alpha .btn-secondary:active {\n  box-shadow: 0 0px 0 0 #07288d, 0 3px 0 0 rgba(0, 0, 0, 0), 0 4px 16px rgba(0, 0, 0, 0), 0 1px 2px 1px rgba(0, 0, 0, 0.5) inset, 0 -18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  transition: 0s;\n  color: #082fa6;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n.alpha .btn-tertiary {\n  box-shadow: 0 3px 0 0 #b3004a, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  background-color: #FF006A;\n  background-image: linear-gradient(-45deg, #FF006A, #ff00aa);\n  color: #E6EAEF;\n}\n.alpha .btn-tertiary:hover {\n  box-shadow: 0 3px 0 0 #b3004a, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;\n}\n.alpha .btn-tertiary:active {\n  box-shadow: 0 0px 0 0 #990040, 0 3px 0 0 rgba(0, 0, 0, 0), 0 4px 16px rgba(0, 0, 0, 0), 0 1px 2px 1px rgba(0, 0, 0, 0.5) inset, 0 -18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  transition: 0s;\n  color: #b3004a;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n.alpha .btn-tetrary {\n  box-shadow: 0 3px 0 0 #6b139e, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  background-color: #991BE2;\n  background-image: linear-gradient(-45deg, #991BE2, #640eef);\n  color: #E6EAEF;\n}\n.alpha .btn-tetrary:hover {\n  box-shadow: 0 3px 0 0 #6b139e, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;\n}\n.alpha .btn-tetrary:active {\n  box-shadow: 0 0px 0 0 #5b1087, 0 3px 0 0 rgba(0, 0, 0, 0), 0 4px 16px rgba(0, 0, 0, 0), 0 1px 2px 1px rgba(0, 0, 0, 0.5) inset, 0 -18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  transition: 0s;\n  color: #6b139e;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n.alpha .btn-black {\n  box-shadow: 0 3px 0 0 #040405, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  background-color: #252730;\n  background-image: linear-gradient(-45deg, #252730, #212934);\n  color: #E6EAEF;\n}\n.alpha .btn-black:hover {\n  box-shadow: 0 3px 0 0 #040405, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;\n}\n.alpha .btn-black:active {\n  box-shadow: 0 0px 0 0 black, 0 3px 0 0 rgba(0, 0, 0, 0), 0 4px 16px rgba(0, 0, 0, 0), 0 1px 2px 1px rgba(0, 0, 0, 0.5) inset, 0 -18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  transition: 0s;\n  color: #040405;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n.alpha .btn-dark {\n  box-shadow: 0 3px 0 0 #1e1f26, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  background-color: #3F4351;\n  background-image: linear-gradient(-45deg, #3F4351, #384758);\n  color: #E6EAEF;\n}\n.alpha .btn-dark:hover {\n  box-shadow: 0 3px 0 0 #1e1f26, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;\n}\n.alpha .btn-dark:active {\n  box-shadow: 0 0px 0 0 #121418, 0 3px 0 0 rgba(0, 0, 0, 0), 0 4px 16px rgba(0, 0, 0, 0), 0 1px 2px 1px rgba(0, 0, 0, 0.5) inset, 0 -18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  transition: 0s;\n  color: #1e1f26;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n.alpha .btn-gray {\n  box-shadow: 0 3px 0 0 #4a4b56, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  background-color: #6D6F7F;\n  background-image: linear-gradient(-45deg, #6D6F7F, #61708b);\n  color: #E6EAEF;\n}\n.alpha .btn-gray:hover {\n  box-shadow: 0 3px 0 0 #4a4b56, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;\n}\n.alpha .btn-gray:active {\n  box-shadow: 0 0px 0 0 #3e3f48, 0 3px 0 0 rgba(0, 0, 0, 0), 0 4px 16px rgba(0, 0, 0, 0), 0 1px 2px 1px rgba(0, 0, 0, 0.5) inset, 0 -18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  transition: 0s;\n  color: #4a4b56;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n.alpha .btn-light {\n  box-shadow: 0 3px 0 0 #b7c3d1, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  background-color: #E6EAEF;\n  background-image: linear-gradient(-45deg, #E6EAEF, #e4edf1);\n  color: #252730;\n}\n.alpha .btn-light:hover {\n  box-shadow: 0 3px 0 0 #b7c3d1, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;\n}\n.alpha .btn-light:active {\n  box-shadow: 0 0px 0 0 #a8b6c7, 0 3px 0 0 rgba(0, 0, 0, 0), 0 4px 16px rgba(0, 0, 0, 0), 0 1px 2px 1px rgba(0, 0, 0, 0.5) inset, 0 -18px 32px -2px rgba(255, 255, 255, 0.1) inset;\n  transition: 0s;\n  color: #b7c3d1;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);\n}\n\n.beta .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.35em 0.8em;\n  font-weight: normal;\n  border-width: 1px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0.2em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  border-style: solid;\n}\n.beta .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.beta .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.beta .btn-primary {\n  background-color: #52C11F;\n  background-image: linear-gradient(0deg, #3f9518, #6ade35);\n  color: #E6EAEF;\n  border-color: #3f9518;\n  text-shadow: 0 1px 1px #2d6911;\n}\n.beta .btn-primary:hover {\n  background-image: linear-gradient(0deg, #3f9518, #52C11F);\n}\n.beta .btn-primary:active {\n  background-color: #49ab1b;\n  background-image: linear-gradient(180deg, #3c8c17, #3f9518);\n  color: #23530d;\n  text-shadow: 0 1px 1px #6ade35;\n  transition: 0s;\n}\n.beta .btn-primary:focus {\n  border-color: #2d6911;\n}\n.beta .btn-secondary {\n  background-color: #0B44EF;\n  background-image: linear-gradient(0deg, #0936be, #3767f6);\n  color: #E6EAEF;\n  border-color: #0936be;\n  text-shadow: 0 1px 1px #07288d;\n}\n.beta .btn-secondary:hover {\n  background-image: linear-gradient(0deg, #0936be, #0B44EF);\n}\n.beta .btn-secondary:active {\n  background-color: #0a3dd7;\n  background-image: linear-gradient(180deg, #0833b4, #0936be);\n  color: #052175;\n  text-shadow: 0 1px 1px #3767f6;\n  transition: 0s;\n}\n.beta .btn-secondary:focus {\n  border-color: #07288d;\n}\n.beta .btn-tertiary {\n  background-color: #FF006A;\n  background-image: linear-gradient(0deg, #cc0055, #ff3388);\n  color: #E6EAEF;\n  border-color: #cc0055;\n  text-shadow: 0 1px 1px #990040;\n}\n.beta .btn-tertiary:hover {\n  background-image: linear-gradient(0deg, #cc0055, #FF006A);\n}\n.beta .btn-tertiary:active {\n  background-color: #e6005f;\n  background-image: linear-gradient(180deg, #c20051, #cc0055);\n  color: #800035;\n  text-shadow: 0 1px 1px #ff3388;\n  transition: 0s;\n}\n.beta .btn-tertiary:focus {\n  border-color: #990040;\n}\n.beta .btn-tetrary {\n  background-color: #991BE2;\n  background-image: linear-gradient(0deg, #7a16b4, #ae47e9);\n  color: #E6EAEF;\n  border-color: #7a16b4;\n  text-shadow: 0 1px 1px #5b1087;\n}\n.beta .btn-tetrary:hover {\n  background-image: linear-gradient(0deg, #7a16b4, #991BE2);\n}\n.beta .btn-tetrary:active {\n  background-color: #8a18cb;\n  background-image: linear-gradient(180deg, #7414ab, #7a16b4);\n  color: #4c0d70;\n  text-shadow: 0 1px 1px #ae47e9;\n  transition: 0s;\n}\n.beta .btn-tetrary:focus {\n  border-color: #5b1087;\n}\n.beta .btn-black {\n  background-color: #252730;\n  background-image: linear-gradient(0deg, #0f1013, #3b3e4d);\n  color: #E6EAEF;\n  border-color: #0f1013;\n  text-shadow: 0 1px 1px black;\n}\n.beta .btn-black:hover {\n  background-image: linear-gradient(0deg, #0f1013, #252730);\n}\n.beta .btn-black:active {\n  background-color: #1a1b22;\n  background-image: linear-gradient(180deg, #0a0b0d, #0f1013);\n  color: black;\n  text-shadow: 0 1px 1px #3b3e4d;\n  transition: 0s;\n}\n.beta .btn-black:focus {\n  border-color: black;\n}\n.beta .btn-dark {\n  background-color: #3F4351;\n  background-image: linear-gradient(0deg, #292b34, #555b6e);\n  color: #E6EAEF;\n  border-color: #292b34;\n  text-shadow: 0 1px 1px #121418;\n}\n.beta .btn-dark:hover {\n  background-image: linear-gradient(0deg, #292b34, #3F4351);\n}\n.beta .btn-dark:active {\n  background-color: #343743;\n  background-image: linear-gradient(180deg, #24272f, #292b34);\n  color: #070809;\n  text-shadow: 0 1px 1px #555b6e;\n  transition: 0s;\n}\n.beta .btn-dark:focus {\n  border-color: #121418;\n}\n.beta .btn-gray {\n  background-color: #6D6F7F;\n  background-image: linear-gradient(0deg, #555764, #878998);\n  color: #E6EAEF;\n  border-color: #555764;\n  text-shadow: 0 1px 1px #3e3f48;\n}\n.beta .btn-gray:hover {\n  background-image: linear-gradient(0deg, #555764, #6D6F7F);\n}\n.beta .btn-gray:active {\n  background-color: #616371;\n  background-image: linear-gradient(180deg, #51525e, #555764);\n  color: #32333a;\n  text-shadow: 0 1px 1px #878998;\n  transition: 0s;\n}\n.beta .btn-gray:focus {\n  border-color: #3e3f48;\n}\n.beta .btn-light {\n  background-color: #E6EAEF;\n  background-image: linear-gradient(0deg, #c7d0db, white);\n  color: #252730;\n  border-color: #c7d0db;\n  text-shadow: 0 1px 1px #a8b6c7;\n}\n.beta .btn-light:hover {\n  background-image: linear-gradient(0deg, #c7d0db, #E6EAEF);\n}\n.beta .btn-light:active {\n  background-color: #d6dde5;\n  background-image: linear-gradient(180deg, #c1cbd7, #c7d0db);\n  color: #98a9bd;\n  text-shadow: 0 1px 1px white;\n  transition: 0s;\n}\n.beta .btn-light:focus {\n  border-color: #a8b6c7;\n}\n\n.gamma .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.3em 1.1em;\n  font-weight: normal;\n  border-width: 1px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 1.01em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.2) inset;\n}\n.gamma .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.gamma .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.gamma .btn-primary {\n  color: #E6EAEF;\n  background-color: #52C11F;\n  background-image: linear-gradient(0deg, #52C11F, #59d322);\n  border-color: #3f9518;\n}\n.gamma .btn-primary:hover {\n  background-color: #4baf1c;\n  background-image: linear-gradient(0deg, #4baf1c, #52C11F);\n}\n.gamma .btn-primary:active {\n  background-color: #47a71b;\n  background-image: linear-gradient(0deg, #45a21a, #4cb41d);\n  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4) inset;\n}\n.gamma .btn-secondary {\n  color: #E6EAEF;\n  background-color: #0B44EF;\n  background-image: linear-gradient(0deg, #0B44EF, #1a51f4);\n  border-color: #0936be;\n}\n.gamma .btn-secondary:hover {\n  background-color: #0a3edb;\n  background-image: linear-gradient(0deg, #0a3edb, #0B44EF);\n}\n.gamma .btn-secondary:active {\n  background-color: #0a3cd2;\n  background-image: linear-gradient(0deg, #093acd, #0a40e0);\n  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4) inset;\n}\n.gamma .btn-tertiary {\n  color: #E6EAEF;\n  background-color: #FF006A;\n  background-image: linear-gradient(0deg, #FF006A, #ff1476);\n  border-color: #cc0055;\n}\n.gamma .btn-tertiary:hover {\n  background-color: #eb0062;\n  background-image: linear-gradient(0deg, #eb0062, #FF006A);\n}\n.gamma .btn-tertiary:active {\n  background-color: #e0005d;\n  background-image: linear-gradient(0deg, #db005b, #f00064);\n  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4) inset;\n}\n.gamma .btn-tetrary {\n  color: #E6EAEF;\n  background-color: #991BE2;\n  background-image: linear-gradient(0deg, #991BE2, #a12ce6);\n  border-color: #7a16b4;\n}\n.gamma .btn-tetrary:hover {\n  background-color: #8d19d0;\n  background-image: linear-gradient(0deg, #8d19d0, #991BE2);\n}\n.gamma .btn-tetrary:active {\n  background-color: #8618c7;\n  background-image: linear-gradient(0deg, #8317c2, #9019d4);\n  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4) inset;\n}\n.gamma .btn-black {\n  color: #E6EAEF;\n  background-color: #252730;\n  background-image: linear-gradient(0deg, #252730, #2e303c);\n  border-color: #0f1013;\n}\n.gamma .btn-black:hover {\n  background-color: #1c1e24;\n  background-image: linear-gradient(0deg, #1c1e24, #252730);\n}\n.gamma .btn-black:active {\n  background-color: #18191f;\n  background-image: linear-gradient(0deg, #15171c, #1e2027);\n  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4) inset;\n}\n.gamma .btn-dark {\n  color: #E6EAEF;\n  background-color: #3F4351;\n  background-image: linear-gradient(0deg, #3F4351, #484c5c);\n  border-color: #292b34;\n}\n.gamma .btn-dark:hover {\n  background-color: #363a46;\n  background-image: linear-gradient(0deg, #363a46, #3F4351);\n}\n.gamma .btn-dark:active {\n  background-color: #323540;\n  background-image: linear-gradient(0deg, #2f323d, #383c48);\n  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4) inset;\n}\n.gamma .btn-gray {\n  color: #E6EAEF;\n  background-color: #6D6F7F;\n  background-image: linear-gradient(0deg, #6D6F7F, #77798a);\n  border-color: #555764;\n}\n.gamma .btn-gray:hover {\n  background-color: #646574;\n  background-image: linear-gradient(0deg, #646574, #6D6F7F);\n}\n.gamma .btn-gray:active {\n  background-color: #5f616f;\n  background-image: linear-gradient(0deg, #5d5e6c, #666877);\n  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4) inset;\n}\n.gamma .btn-light {\n  color: #252730;\n  background-color: #E6EAEF;\n  background-image: linear-gradient(0deg, #E6EAEF, #f2f4f7);\n  border-color: #c7d0db;\n}\n.gamma .btn-light:hover {\n  background-color: #dae0e7;\n  background-image: linear-gradient(0deg, #dae0e7, #E6EAEF);\n}\n.gamma .btn-light:active {\n  background-color: #d3dae3;\n  background-image: linear-gradient(0deg, #d0d8e1, #dde2e9);\n  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4) inset;\n}\n\n.delta .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.6em 1.6em;\n  font-weight: normal;\n  border-width: 1px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0.25em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  background-color: transparent;\n  border-width: 1px;\n  border-style: solid;\n  box-shadow: 0 1.31em 0 0 rgba(255, 255, 255, 0.1) inset;\n  transition: box-shadow 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), border-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n.delta .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.delta .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.delta .btn:active {\n  box-shadow: 0 1.31em 0.2em 0 rgba(0, 0, 0, 0.08) inset;\n  transition: box-shadow 0.1s;\n}\n.delta .btn-primary {\n  background-color: #52C11F;\n  background-image: linear-gradient(-45deg, #52C11F, #7ccc14);\n  color: #E6EAEF;\n  border-top-color: #8ae660;\n  border-left-color: #5ddb23;\n  border-right-color: #5ddb23;\n  border-bottom-color: #2d6911;\n}\n.delta .btn-primary:hover {\n  background-image: linear-gradient(-45deg, #56ca20, #82d515);\n}\n.delta .btn-primary:active {\n  color: #2d6911;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n  background-color: #4eb81e;\n  background-image: linear-gradient(-45deg, #4eb81e, #76c313);\n  border-top-color: #2d6911;\n  border-left-color: #47a71b;\n  border-right-color: #47a71b;\n  border-bottom-color: #47a71b;\n}\n.delta .btn-secondary {\n  background-color: #0B44EF;\n  background-image: linear-gradient(-45deg, #0B44EF, #007dfa);\n  color: #E6EAEF;\n  border-top-color: #688cf8;\n  border-left-color: #2458f5;\n  border-right-color: #2458f5;\n  border-bottom-color: #07288d;\n}\n.delta .btn-secondary:hover {\n  background-image: linear-gradient(-45deg, #1049f4, #0582ff);\n}\n.delta .btn-secondary:active {\n  color: #07288d;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n  background-color: #0b41e5;\n  background-image: linear-gradient(-45deg, #0b41e5, #0078f0);\n  border-top-color: #07288d;\n  border-left-color: #0a3cd2;\n  border-right-color: #0a3cd2;\n  border-bottom-color: #0a3cd2;\n}\n.delta .btn-tertiary {\n  background-color: #FF006A;\n  background-image: linear-gradient(-45deg, #FF006A, #ff00aa);\n  color: #E6EAEF;\n  border-top-color: #ff66a6;\n  border-left-color: #ff1f7c;\n  border-right-color: #ff1f7c;\n  border-bottom-color: #990040;\n}\n.delta .btn-tertiary:hover {\n  background-image: linear-gradient(-45deg, #ff0a70, #ff0aad);\n}\n.delta .btn-tertiary:active {\n  color: #990040;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n  background-color: #f50066;\n  background-image: linear-gradient(-45deg, #f50066, #f500a3);\n  border-top-color: #990040;\n  border-left-color: #e0005d;\n  border-right-color: #e0005d;\n  border-bottom-color: #e0005d;\n}\n.delta .btn-tetrary {\n  background-color: #991BE2;\n  background-image: linear-gradient(-45deg, #991BE2, #640eef);\n  color: #E6EAEF;\n  border-top-color: #c275ee;\n  border-left-color: #a635e7;\n  border-right-color: #a635e7;\n  border-bottom-color: #5b1087;\n}\n.delta .btn-tetrary:hover {\n  background-image: linear-gradient(-45deg, #9d23e5, #6a16f1);\n}\n.delta .btn-tetrary:active {\n  color: #5b1087;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n  background-color: #931ad9;\n  background-image: linear-gradient(-45deg, #931ad9, #600ee5);\n  border-top-color: #5b1087;\n  border-left-color: #8618c7;\n  border-right-color: #8618c7;\n  border-bottom-color: #8618c7;\n}\n.delta .btn-black {\n  background-color: #252730;\n  background-image: linear-gradient(-45deg, #252730, #212934);\n  color: #E6EAEF;\n  border-top-color: #51566a;\n  border-left-color: #323541;\n  border-right-color: #323541;\n  border-bottom-color: black;\n}\n.delta .btn-black:hover {\n  background-image: linear-gradient(-45deg, #292c36, #252e3b);\n}\n.delta .btn-black:active {\n  color: black;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n  background-color: #21222a;\n  background-image: linear-gradient(-45deg, #21222a, #1d242e);\n  border-top-color: black;\n  border-left-color: #18191f;\n  border-right-color: #18191f;\n  border-bottom-color: #18191f;\n}\n.delta .btn-dark {\n  background-color: #3F4351;\n  background-image: linear-gradient(-45deg, #3F4351, #384758);\n  color: #E6EAEF;\n  border-top-color: #6c728a;\n  border-left-color: #4c5162;\n  border-right-color: #4c5162;\n  border-bottom-color: #121418;\n}\n.delta .btn-dark:hover {\n  background-image: linear-gradient(-45deg, #434857, #3c4c5e);\n}\n.delta .btn-dark:active {\n  color: #121418;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n  background-color: #3b3e4b;\n  background-image: linear-gradient(-45deg, #3b3e4b, #344252);\n  border-top-color: #121418;\n  border-left-color: #323540;\n  border-right-color: #323540;\n  border-bottom-color: #323540;\n}\n.delta .btn-gray {\n  background-color: #6D6F7F;\n  background-image: linear-gradient(-45deg, #6D6F7F, #61708b);\n  color: #E6EAEF;\n  border-top-color: #a2a4b0;\n  border-left-color: #7c7e8f;\n  border-right-color: #7c7e8f;\n  border-bottom-color: #3e3f48;\n}\n.delta .btn-gray:hover {\n  background-image: linear-gradient(-45deg, #727484, #657591);\n}\n.delta .btn-gray:active {\n  color: #3e3f48;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n  background-color: #686a7a;\n  background-image: linear-gradient(-45deg, #686a7a, #5d6b85);\n  border-top-color: #3e3f48;\n  border-left-color: #5f616f;\n  border-right-color: #5f616f;\n  border-bottom-color: #5f616f;\n}\n.delta .btn-light {\n  background-color: #E6EAEF;\n  background-image: linear-gradient(-45deg, #E6EAEF, #e4edf1);\n  color: #252730;\n  border-top-color: white;\n  border-left-color: #f9fafb;\n  border-right-color: #f9fafb;\n  border-bottom-color: #a8b6c7;\n}\n.delta .btn-light:hover {\n  background-image: linear-gradient(-45deg, #eceff3, #ebf2f5);\n}\n.delta .btn-light:active {\n  color: #a8b6c7;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n  background-color: #e0e5eb;\n  background-image: linear-gradient(-45deg, #e0e5eb, #dde9ee);\n  border-top-color: #a8b6c7;\n  border-left-color: #d3dae3;\n  border-right-color: #d3dae3;\n  border-bottom-color: #d3dae3;\n}\n\n.epsilon .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.6em 2.5em;\n  font-weight: normal;\n  border-width: 0;\n  border-style: solid;\n  background: transparent;\n  border-radius: 1.31em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  transition: box-shadow 0.15s, transform 0.15s, color 0.15s;\n}\n.epsilon .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.epsilon .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.epsilon .btn:active {\n  transform: translateY(2px);\n}\n.epsilon .btn-primary {\n  background-color: #52C11F;\n  background-image: linear-gradient(0deg, #439e19, #52C11F, #5bd723);\n  color: #E6EAEF;\n  box-shadow: 0 2px 0 0 #2d6911, 0 1.31em 2em 0 rgba(255, 255, 255, 0) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.4), 0 0 12px 1px rgba(82, 193, 31, 0.5), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-primary:hover {\n  box-shadow: 0 2px 0 0 #2d6911, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.6), 0 0 10px 1px rgba(82, 193, 31, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-primary:active {\n  background-color: #49ab1b;\n  background-image: linear-gradient(180deg, #3f9518, #4baf1c);\n  color: #2d6911;\n  transition: 0s;\n  box-shadow: 0 0px 0 0 #23530d, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 2px 0 rgba(255, 255, 255, 0) inset, 0 1px 4px 0px rgba(0, 0, 0, 0), 0 0 10px 1px rgba(82, 193, 31, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.7) inset;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n.epsilon .btn-secondary {\n  background-color: #0B44EF;\n  background-image: linear-gradient(0deg, #0939c8, #0B44EF, #1f54f5);\n  color: #E6EAEF;\n  box-shadow: 0 2px 0 0 #07288d, 0 1.31em 2em 0 rgba(255, 255, 255, 0) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.4), 0 0 12px 1px rgba(11, 68, 239, 0.5), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-secondary:hover {\n  box-shadow: 0 2px 0 0 #07288d, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.6), 0 0 10px 1px rgba(11, 68, 239, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-secondary:active {\n  background-color: #0a3dd7;\n  background-image: linear-gradient(180deg, #0936be, #0a3edb);\n  color: #07288d;\n  transition: 0s;\n  box-shadow: 0 0px 0 0 #052175, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 2px 0 rgba(255, 255, 255, 0) inset, 0 1px 4px 0px rgba(0, 0, 0, 0), 0 0 10px 1px rgba(11, 68, 239, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.7) inset;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n.epsilon .btn-tertiary {\n  background-color: #FF006A;\n  background-image: linear-gradient(0deg, #d60059, #FF006A, #ff1a79);\n  color: #E6EAEF;\n  box-shadow: 0 2px 0 0 #990040, 0 1.31em 2em 0 rgba(255, 255, 255, 0) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.4), 0 0 12px 1px rgba(255, 0, 106, 0.5), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-tertiary:hover {\n  box-shadow: 0 2px 0 0 #990040, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.6), 0 0 10px 1px rgba(255, 0, 106, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-tertiary:active {\n  background-color: #e6005f;\n  background-image: linear-gradient(180deg, #cc0055, #eb0062);\n  color: #990040;\n  transition: 0s;\n  box-shadow: 0 0px 0 0 #800035, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 2px 0 rgba(255, 255, 255, 0) inset, 0 1px 4px 0px rgba(0, 0, 0, 0), 0 0 10px 1px rgba(255, 0, 106, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.7) inset;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n.epsilon .btn-tetrary {\n  background-color: #991BE2;\n  background-image: linear-gradient(0deg, #8017be, #991BE2, #a330e6);\n  color: #E6EAEF;\n  box-shadow: 0 2px 0 0 #5b1087, 0 1.31em 2em 0 rgba(255, 255, 255, 0) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.4), 0 0 12px 1px rgba(153, 27, 226, 0.5), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-tetrary:hover {\n  box-shadow: 0 2px 0 0 #5b1087, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.6), 0 0 10px 1px rgba(153, 27, 226, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-tetrary:active {\n  background-color: #8a18cb;\n  background-image: linear-gradient(180deg, #7a16b4, #8d19d0);\n  color: #5b1087;\n  transition: 0s;\n  box-shadow: 0 0px 0 0 #4c0d70, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 2px 0 rgba(255, 255, 255, 0) inset, 0 1px 4px 0px rgba(0, 0, 0, 0), 0 0 10px 1px rgba(153, 27, 226, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.7) inset;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n.epsilon .btn-black {\n  background-color: #252730;\n  background-image: linear-gradient(0deg, #131419, #252730, #30333e);\n  color: #E6EAEF;\n  box-shadow: 0 2px 0 0 black, 0 1.31em 2em 0 rgba(255, 255, 255, 0) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.4), 0 0 12px 1px rgba(37, 39, 48, 0.5), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-black:hover {\n  box-shadow: 0 2px 0 0 black, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.6), 0 0 10px 1px rgba(37, 39, 48, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-black:active {\n  background-color: #1a1b22;\n  background-image: linear-gradient(180deg, #0f1013, #1c1e24);\n  color: black;\n  transition: 0s;\n  box-shadow: 0 0px 0 0 black, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 2px 0 rgba(255, 255, 255, 0) inset, 0 1px 4px 0px rgba(0, 0, 0, 0), 0 0 10px 1px rgba(37, 39, 48, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.7) inset;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n.epsilon .btn-dark {\n  background-color: #3F4351;\n  background-image: linear-gradient(0deg, #2d303a, #3F4351, #4a4f5f);\n  color: #E6EAEF;\n  box-shadow: 0 2px 0 0 #121418, 0 1.31em 2em 0 rgba(255, 255, 255, 0) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.4), 0 0 12px 1px rgba(63, 67, 81, 0.5), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-dark:hover {\n  box-shadow: 0 2px 0 0 #121418, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.6), 0 0 10px 1px rgba(63, 67, 81, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-dark:active {\n  background-color: #343743;\n  background-image: linear-gradient(180deg, #292b34, #363a46);\n  color: #121418;\n  transition: 0s;\n  box-shadow: 0 0px 0 0 #070809, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 2px 0 rgba(255, 255, 255, 0) inset, 0 1px 4px 0px rgba(0, 0, 0, 0), 0 0 10px 1px rgba(63, 67, 81, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.7) inset;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n.epsilon .btn-gray {\n  background-color: #6D6F7F;\n  background-image: linear-gradient(0deg, #5a5c69, #6D6F7F, #797b8c);\n  color: #E6EAEF;\n  box-shadow: 0 2px 0 0 #3e3f48, 0 1.31em 2em 0 rgba(255, 255, 255, 0) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.4), 0 0 12px 1px rgba(109, 111, 127, 0.5), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-gray:hover {\n  box-shadow: 0 2px 0 0 #3e3f48, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.6), 0 0 10px 1px rgba(109, 111, 127, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-gray:active {\n  background-color: #616371;\n  background-image: linear-gradient(180deg, #555764, #646574);\n  color: #3e3f48;\n  transition: 0s;\n  box-shadow: 0 0px 0 0 #32333a, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 2px 0 rgba(255, 255, 255, 0) inset, 0 1px 4px 0px rgba(0, 0, 0, 0), 0 0 10px 1px rgba(109, 111, 127, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.7) inset;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n.epsilon .btn-light {\n  background-color: #E6EAEF;\n  background-image: linear-gradient(0deg, #cdd5df, #E6EAEF, #f6f7f9);\n  color: #252730;\n  box-shadow: 0 2px 0 0 #a8b6c7, 0 1.31em 2em 0 rgba(255, 255, 255, 0) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.1) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.4), 0 0 12px 1px rgba(230, 234, 239, 0.5), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-light:hover {\n  box-shadow: 0 2px 0 0 #a8b6c7, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 3px 1px rgba(0, 0, 0, 0.6), 0 0 10px 1px rgba(230, 234, 239, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0) inset;\n}\n.epsilon .btn-light:active {\n  background-color: #d6dde5;\n  background-image: linear-gradient(180deg, #c7d0db, #dae0e7);\n  color: #a8b6c7;\n  transition: 0s;\n  box-shadow: 0 0px 0 0 #98a9bd, 0 1.31em 1em 0 rgba(255, 255, 255, 0.05) inset, 0 2px 2px 0 rgba(255, 255, 255, 0) inset, 0 1px 4px 0px rgba(0, 0, 0, 0), 0 0 10px 1px rgba(230, 234, 239, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.7) inset;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n\n.zeta .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.2em 0.6em;\n  font-weight: normal;\n  border-width: 1px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 1px 3px 0 rgba(0, 0, 0, 0.4);\n}\n.zeta .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.zeta .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.zeta .btn:active {\n  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2) inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n}\n.zeta .btn-primary {\n  color: #E6EAEF;\n  background-color: #52C11F;\n  background-image: linear-gradient(0deg, #3f9518, #56ca20);\n  border-color: #2d6911;\n}\n.zeta .btn-primary:active {\n  background-image: linear-gradient(0deg, #3f9518, #47a71b);\n}\n.zeta .btn-secondary {\n  color: #E6EAEF;\n  background-color: #0B44EF;\n  background-image: linear-gradient(0deg, #0936be, #1049f4);\n  border-color: #07288d;\n}\n.zeta .btn-secondary:active {\n  background-image: linear-gradient(0deg, #0936be, #0a3cd2);\n}\n.zeta .btn-tertiary {\n  color: #E6EAEF;\n  background-color: #FF006A;\n  background-image: linear-gradient(0deg, #cc0055, #ff0a70);\n  border-color: #990040;\n}\n.zeta .btn-tertiary:active {\n  background-image: linear-gradient(0deg, #cc0055, #e0005d);\n}\n.zeta .btn-tetrary {\n  color: #E6EAEF;\n  background-color: #991BE2;\n  background-image: linear-gradient(0deg, #7a16b4, #9d23e5);\n  border-color: #5b1087;\n}\n.zeta .btn-tetrary:active {\n  background-image: linear-gradient(0deg, #7a16b4, #8618c7);\n}\n.zeta .btn-black {\n  color: #E6EAEF;\n  background-color: #252730;\n  background-image: linear-gradient(0deg, #0f1013, #292c36);\n  border-color: black;\n}\n.zeta .btn-black:active {\n  background-image: linear-gradient(0deg, #0f1013, #18191f);\n}\n.zeta .btn-dark {\n  color: #E6EAEF;\n  background-color: #3F4351;\n  background-image: linear-gradient(0deg, #292b34, #434857);\n  border-color: #121418;\n}\n.zeta .btn-dark:active {\n  background-image: linear-gradient(0deg, #292b34, #323540);\n}\n.zeta .btn-gray {\n  color: #E6EAEF;\n  background-color: #6D6F7F;\n  background-image: linear-gradient(0deg, #555764, #727484);\n  border-color: #3e3f48;\n}\n.zeta .btn-gray:active {\n  background-image: linear-gradient(0deg, #555764, #5f616f);\n}\n.zeta .btn-light {\n  color: #252730;\n  background-color: #E6EAEF;\n  background-image: linear-gradient(0deg, #c7d0db, #eceff3);\n  border-color: #a8b6c7;\n}\n.zeta .btn-light:active {\n  background-image: linear-gradient(0deg, #c7d0db, #d3dae3);\n}\n\n.eta .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.5em 1.8em;\n  font-weight: normal;\n  border-width: 2px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0.2em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  position: relative;\n  overflow: hidden;\n  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);\n  transition: box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n}\n.eta .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.eta .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.eta .btn:active {\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);\n  transition-duration: 0.2s;\n}\n.eta .btn:active:after {\n  background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.02) 20%, rgba(255, 255, 255, 0));\n}\n.eta .btn:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  transform: rotate(-19deg) translateY(-1.3em) scale(1.05);\n  filter: blur(1px);\n  background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0));\n}\n.eta .btn-primary {\n  background-color: #52C11F;\n  color: #E6EAEF;\n  border-color: #439e19;\n  border-bottom-color: #347b14;\n  box-shadow: 0 1px 1px -1px rgba(255, 255, 255, 0.9) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 9px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.3), 7px 7px 8px -4px rgba(0, 0, 0, 0.1), -7px 7px 8px -4px rgba(0, 0, 0, 0.1), 0 -4px 12px 2px rgba(91, 215, 35, 0.2);\n}\n.eta .btn-primary:hover {\n  background-color: #59d322;\n}\n.eta .btn-primary:active {\n  box-shadow: 0 -1px 1px -1px rgba(255, 255, 255, 0.4) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.1) inset, 0 1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 7px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 7px 7px 8px -4px rgba(0, 0, 0, 0.05), -7px 7px 8px -4px rgba(0, 0, 0, 0.05), 0 -4px 12px 2px rgba(91, 215, 35, 0.1);\n  background-color: #4baf1c;\n  color: #307212;\n}\n.eta .btn-secondary {\n  background-color: #0B44EF;\n  color: #E6EAEF;\n  border-color: #0939c8;\n  border-bottom-color: #072ea1;\n  box-shadow: 0 1px 1px -1px rgba(255, 255, 255, 0.9) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 9px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.3), 7px 7px 8px -4px rgba(0, 0, 0, 0.1), -7px 7px 8px -4px rgba(0, 0, 0, 0.1), 0 -4px 12px 2px rgba(31, 84, 245, 0.2);\n}\n.eta .btn-secondary:hover {\n  background-color: #1a51f4;\n}\n.eta .btn-secondary:active {\n  box-shadow: 0 -1px 1px -1px rgba(255, 255, 255, 0.4) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.1) inset, 0 1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 7px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 7px 7px 8px -4px rgba(0, 0, 0, 0.05), -7px 7px 8px -4px rgba(0, 0, 0, 0.05), 0 -4px 12px 2px rgba(31, 84, 245, 0.1);\n  background-color: #0a3edb;\n  color: #072b97;\n}\n.eta .btn-tertiary {\n  background-color: #FF006A;\n  color: #E6EAEF;\n  border-color: #d60059;\n  border-bottom-color: #ad0048;\n  box-shadow: 0 1px 1px -1px rgba(255, 255, 255, 0.9) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 9px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.3), 7px 7px 8px -4px rgba(0, 0, 0, 0.1), -7px 7px 8px -4px rgba(0, 0, 0, 0.1), 0 -4px 12px 2px rgba(255, 26, 121, 0.2);\n}\n.eta .btn-tertiary:hover {\n  background-color: #ff1476;\n}\n.eta .btn-tertiary:active {\n  box-shadow: 0 -1px 1px -1px rgba(255, 255, 255, 0.4) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.1) inset, 0 1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 7px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 7px 7px 8px -4px rgba(0, 0, 0, 0.05), -7px 7px 8px -4px rgba(0, 0, 0, 0.05), 0 -4px 12px 2px rgba(255, 26, 121, 0.1);\n  background-color: #eb0062;\n  color: #a30044;\n}\n.eta .btn-tetrary {\n  background-color: #991BE2;\n  color: #E6EAEF;\n  border-color: #8017be;\n  border-bottom-color: #681299;\n  box-shadow: 0 1px 1px -1px rgba(255, 255, 255, 0.9) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 9px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.3), 7px 7px 8px -4px rgba(0, 0, 0, 0.1), -7px 7px 8px -4px rgba(0, 0, 0, 0.1), 0 -4px 12px 2px rgba(163, 48, 230, 0.2);\n}\n.eta .btn-tetrary:hover {\n  background-color: #a12ce6;\n}\n.eta .btn-tetrary:active {\n  box-shadow: 0 -1px 1px -1px rgba(255, 255, 255, 0.4) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.1) inset, 0 1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 7px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 7px 7px 8px -4px rgba(0, 0, 0, 0.05), -7px 7px 8px -4px rgba(0, 0, 0, 0.05), 0 -4px 12px 2px rgba(163, 48, 230, 0.1);\n  background-color: #8d19d0;\n  color: #611190;\n}\n.eta .btn-black {\n  background-color: #252730;\n  color: #E6EAEF;\n  border-color: #131419;\n  border-bottom-color: #010202;\n  box-shadow: 0 1px 1px -1px rgba(255, 255, 255, 0.9) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 9px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.3), 7px 7px 8px -4px rgba(0, 0, 0, 0.1), -7px 7px 8px -4px rgba(0, 0, 0, 0.1), 0 -4px 12px 2px rgba(48, 51, 62, 0.2);\n}\n.eta .btn-black:hover {\n  background-color: #2e303c;\n}\n.eta .btn-black:active {\n  box-shadow: 0 -1px 1px -1px rgba(255, 255, 255, 0.4) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.1) inset, 0 1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 7px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 7px 7px 8px -4px rgba(0, 0, 0, 0.05), -7px 7px 8px -4px rgba(0, 0, 0, 0.05), 0 -4px 12px 2px rgba(48, 51, 62, 0.1);\n  background-color: #1c1e24;\n  color: black;\n}\n.eta .btn-dark {\n  background-color: #3F4351;\n  color: #E6EAEF;\n  border-color: #2d303a;\n  border-bottom-color: #1b1d23;\n  box-shadow: 0 1px 1px -1px rgba(255, 255, 255, 0.9) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 9px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.3), 7px 7px 8px -4px rgba(0, 0, 0, 0.1), -7px 7px 8px -4px rgba(0, 0, 0, 0.1), 0 -4px 12px 2px rgba(74, 79, 95, 0.2);\n}\n.eta .btn-dark:hover {\n  background-color: #484c5c;\n}\n.eta .btn-dark:active {\n  box-shadow: 0 -1px 1px -1px rgba(255, 255, 255, 0.4) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.1) inset, 0 1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 7px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 7px 7px 8px -4px rgba(0, 0, 0, 0.05), -7px 7px 8px -4px rgba(0, 0, 0, 0.05), 0 -4px 12px 2px rgba(74, 79, 95, 0.1);\n  background-color: #363a46;\n  color: #17181d;\n}\n.eta .btn-gray {\n  background-color: #6D6F7F;\n  color: #E6EAEF;\n  border-color: #5a5c69;\n  border-bottom-color: #474953;\n  box-shadow: 0 1px 1px -1px rgba(255, 255, 255, 0.9) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 9px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.3), 7px 7px 8px -4px rgba(0, 0, 0, 0.1), -7px 7px 8px -4px rgba(0, 0, 0, 0.1), 0 -4px 12px 2px rgba(121, 123, 140, 0.2);\n}\n.eta .btn-gray:hover {\n  background-color: #77798a;\n}\n.eta .btn-gray:active {\n  box-shadow: 0 -1px 1px -1px rgba(255, 255, 255, 0.4) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.1) inset, 0 1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 7px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 7px 7px 8px -4px rgba(0, 0, 0, 0.05), -7px 7px 8px -4px rgba(0, 0, 0, 0.05), 0 -4px 12px 2px rgba(121, 123, 140, 0.1);\n  background-color: #646574;\n  color: #43444e;\n}\n.eta .btn-light {\n  background-color: #E6EAEF;\n  color: #252730;\n  border-color: #cdd5df;\n  border-bottom-color: #b4c0cf;\n  box-shadow: 0 1px 1px -1px rgba(255, 255, 255, 0.9) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.15) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 9px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.3), 7px 7px 8px -4px rgba(0, 0, 0, 0.1), -7px 7px 8px -4px rgba(0, 0, 0, 0.1), 0 -4px 12px 2px rgba(246, 247, 249, 0.2);\n}\n.eta .btn-light:hover {\n  background-color: #f2f4f7;\n}\n.eta .btn-light:active {\n  box-shadow: 0 -1px 1px -1px rgba(255, 255, 255, 0.4) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.1) inset, 0 1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 7px 8px -4px rgba(0, 0, 0, 0.4), 0 2px 1px -1px rgba(0, 0, 0, 0.2), 7px 7px 8px -4px rgba(0, 0, 0, 0.05), -7px 7px 8px -4px rgba(0, 0, 0, 0.05), 0 -4px 12px 2px rgba(246, 247, 249, 0.1);\n  background-color: #dae0e7;\n  color: #aebbcb;\n}\n\n.theta .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.7em 1.4em;\n  font-weight: normal;\n  border-width: 3px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  position: relative;\n  transform: translate(0.5em -0.4em);\n  transition: transform 0.2s;\n}\n.theta .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.theta .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.theta .btn:before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: -1;\n  transform: translate(0.6em, -0.3em);\n  transition: transform 0.2s, background-color 0.2s;\n}\n.theta .btn-primary {\n  color: #52C11F;\n  border-color: #52C11F;\n}\n.theta .btn-primary:hover {\n  transform: translate(0.2em, -0.1em);\n}\n.theta .btn-primary:hover:before {\n  transform: translate(-0.4em, 0.4em);\n}\n.theta .btn-primary:active {\n  transform: translate(0, 0);\n  transition-duration: 0.1s;\n}\n.theta .btn-primary:active:before {\n  transition-duration: 0.1s;\n  transform: translate(0, 0);\n  background-color: rgba(31, 193, 142, 0.5);\n}\n.theta .btn-primary:before {\n  background-color: rgba(31, 193, 142, 0.4);\n}\n.theta .btn-secondary {\n  color: #0B44EF;\n  border-color: #0B44EF;\n}\n.theta .btn-secondary:hover {\n  transform: translate(0.2em, -0.1em);\n}\n.theta .btn-secondary:hover:before {\n  transform: translate(-0.4em, 0.4em);\n}\n.theta .btn-secondary:active {\n  transform: translate(0, 0);\n  transition-duration: 0.1s;\n}\n.theta .btn-secondary:active:before {\n  transition-duration: 0.1s;\n  transform: translate(0, 0);\n  background-color: rgba(182, 11, 239, 0.5);\n}\n.theta .btn-secondary:before {\n  background-color: rgba(182, 11, 239, 0.4);\n}\n.theta .btn-tertiary {\n  color: #FF006A;\n  border-color: #FF006A;\n}\n.theta .btn-tertiary:hover {\n  transform: translate(0.2em, -0.1em);\n}\n.theta .btn-tertiary:hover:before {\n  transform: translate(-0.4em, 0.4em);\n}\n.theta .btn-tertiary:active {\n  transform: translate(0, 0);\n  transition-duration: 0.1s;\n}\n.theta .btn-tertiary:active:before {\n  transition-duration: 0.1s;\n  transform: translate(0, 0);\n  background-color: rgba(255, 149, 0, 0.5);\n}\n.theta .btn-tertiary:before {\n  background-color: rgba(255, 149, 0, 0.4);\n}\n.theta .btn-tetrary {\n  color: #991BE2;\n  border-color: #991BE2;\n}\n.theta .btn-tetrary:hover {\n  transform: translate(0.2em, -0.1em);\n}\n.theta .btn-tetrary:hover:before {\n  transform: translate(-0.4em, 0.4em);\n}\n.theta .btn-tetrary:active {\n  transform: translate(0, 0);\n  transition-duration: 0.1s;\n}\n.theta .btn-tetrary:active:before {\n  transition-duration: 0.1s;\n  transform: translate(0, 0);\n  background-color: rgba(226, 27, 100, 0.5);\n}\n.theta .btn-tetrary:before {\n  background-color: rgba(226, 27, 100, 0.4);\n}\n.theta .btn-black {\n  color: #252730;\n  border-color: #252730;\n}\n.theta .btn-black:hover {\n  transform: translate(0.2em, -0.1em);\n}\n.theta .btn-black:hover:before {\n  transform: translate(-0.4em, 0.4em);\n}\n.theta .btn-black:active {\n  transform: translate(0, 0);\n  transition-duration: 0.1s;\n}\n.theta .btn-black:active:before {\n  transition-duration: 0.1s;\n  transform: translate(0, 0);\n  background-color: rgba(46, 37, 48, 0.5);\n}\n.theta .btn-black:before {\n  background-color: rgba(46, 37, 48, 0.4);\n}\n.theta .btn-dark {\n  color: #3F4351;\n  border-color: #3F4351;\n}\n.theta .btn-dark:hover {\n  transform: translate(0.2em, -0.1em);\n}\n.theta .btn-dark:hover:before {\n  transform: translate(-0.4em, 0.4em);\n}\n.theta .btn-dark:active {\n  transform: translate(0, 0);\n  transition-duration: 0.1s;\n}\n.theta .btn-dark:active:before {\n  transition-duration: 0.1s;\n  transform: translate(0, 0);\n  background-color: rgba(77, 63, 81, 0.5);\n}\n.theta .btn-dark:before {\n  background-color: rgba(77, 63, 81, 0.4);\n}\n.theta .btn-gray {\n  color: #6D6F7F;\n  border-color: #6D6F7F;\n}\n.theta .btn-gray:hover {\n  transform: translate(0.2em, -0.1em);\n}\n.theta .btn-gray:hover:before {\n  transform: translate(-0.4em, 0.4em);\n}\n.theta .btn-gray:active {\n  transform: translate(0, 0);\n  transition-duration: 0.1s;\n}\n.theta .btn-gray:active:before {\n  transition-duration: 0.1s;\n  transform: translate(0, 0);\n  background-color: rgba(125, 109, 127, 0.5);\n}\n.theta .btn-gray:before {\n  background-color: rgba(125, 109, 127, 0.4);\n}\n.theta .btn-light {\n  color: #3F4351;\n  border-color: #E6EAEF;\n}\n.theta .btn-light:hover {\n  transform: translate(0.2em, -0.1em);\n}\n.theta .btn-light:hover:before {\n  transform: translate(-0.4em, 0.4em);\n}\n.theta .btn-light:active {\n  transform: translate(0, 0);\n  transition-duration: 0.1s;\n}\n.theta .btn-light:active:before {\n  transition-duration: 0.1s;\n  transform: translate(0, 0);\n  background-color: rgba(235, 230, 239, 0.5);\n}\n.theta .btn-light:before {\n  background-color: rgba(235, 230, 239, 0.4);\n}\n\n.iota .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.6em 1.6em;\n  font-weight: normal;\n  border-width: 2px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 1.46em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  position: relative;\n  border-style: solid;\n  overflow: hidden;\n  transition: background-color 0.3s, color 0.3s;\n}\n.iota .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.iota .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.iota .btn:hover:after {\n  transform: scaleX(1);\n  opacity: 1;\n  transition: transform 0.3s, opacity 0.3s;\n}\n.iota .btn:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: -1;\n  border-radius: 1.46em;\n  transform: scaleX(0.7);\n  opacity: 0;\n  transition: transform 0.8s, opacity 0.3s;\n}\n.iota .btn-primary {\n  color: #52C11F;\n  border-color: #52C11F;\n}\n.iota .btn-primary:hover {\n  color: #E6EAEF;\n  background-color: #52C11F;\n}\n.iota .btn-primary:active {\n  background-color: #4cb41d;\n}\n.iota .btn-primary:active:after {\n  background-color: #4cb41d;\n}\n.iota .btn-primary:after {\n  background-color: #52C11F;\n}\n.iota .btn-secondary {\n  color: #0B44EF;\n  border-color: #0B44EF;\n}\n.iota .btn-secondary:hover {\n  color: #E6EAEF;\n  background-color: #0B44EF;\n}\n.iota .btn-secondary:active {\n  background-color: #0a40e0;\n}\n.iota .btn-secondary:active:after {\n  background-color: #0a40e0;\n}\n.iota .btn-secondary:after {\n  background-color: #0B44EF;\n}\n.iota .btn-tertiary {\n  color: #FF006A;\n  border-color: #FF006A;\n}\n.iota .btn-tertiary:hover {\n  color: #E6EAEF;\n  background-color: #FF006A;\n}\n.iota .btn-tertiary:active {\n  background-color: #f00064;\n}\n.iota .btn-tertiary:active:after {\n  background-color: #f00064;\n}\n.iota .btn-tertiary:after {\n  background-color: #FF006A;\n}\n.iota .btn-tetrary {\n  color: #991BE2;\n  border-color: #991BE2;\n}\n.iota .btn-tetrary:hover {\n  color: #E6EAEF;\n  background-color: #991BE2;\n}\n.iota .btn-tetrary:active {\n  background-color: #9019d4;\n}\n.iota .btn-tetrary:active:after {\n  background-color: #9019d4;\n}\n.iota .btn-tetrary:after {\n  background-color: #991BE2;\n}\n.iota .btn-black {\n  color: #252730;\n  border-color: #252730;\n}\n.iota .btn-black:hover {\n  color: #E6EAEF;\n  background-color: #252730;\n}\n.iota .btn-black:active {\n  background-color: #1e2027;\n}\n.iota .btn-black:active:after {\n  background-color: #1e2027;\n}\n.iota .btn-black:after {\n  background-color: #252730;\n}\n.iota .btn-dark {\n  color: #3F4351;\n  border-color: #3F4351;\n}\n.iota .btn-dark:hover {\n  color: #E6EAEF;\n  background-color: #3F4351;\n}\n.iota .btn-dark:active {\n  background-color: #383c48;\n}\n.iota .btn-dark:active:after {\n  background-color: #383c48;\n}\n.iota .btn-dark:after {\n  background-color: #3F4351;\n}\n.iota .btn-gray {\n  color: #6D6F7F;\n  border-color: #6D6F7F;\n}\n.iota .btn-gray:hover {\n  color: #E6EAEF;\n  background-color: #6D6F7F;\n}\n.iota .btn-gray:active {\n  background-color: #666877;\n}\n.iota .btn-gray:active:after {\n  background-color: #666877;\n}\n.iota .btn-gray:after {\n  background-color: #6D6F7F;\n}\n.iota .btn-light {\n  color: #E6EAEF;\n  border-color: #E6EAEF;\n}\n.iota .btn-light:hover {\n  color: #252730;\n  background-color: #E6EAEF;\n}\n.iota .btn-light:active {\n  background-color: #dde2e9;\n}\n.iota .btn-light:active:after {\n  background-color: #dde2e9;\n}\n.iota .btn-light:after {\n  background-color: #E6EAEF;\n}\n\n.kappa .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.8em 1.4em;\n  font-weight: normal;\n  border-width: 0;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0.6em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);\n  transition: box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n}\n.kappa .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.kappa .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.kappa .btn:active {\n  transition-duration: 0.2s;\n  transform: scale(0.98);\n}\n.kappa .btn-primary {\n  background-color: #52C11F;\n  color: #307212;\n  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.5), inset 0 -2px 5px -1px rgba(54, 127, 20, 0.6), 0 -3px 12px -1px rgba(122, 226, 74, 0.6), inset 0 3px 4px -1px rgba(122, 226, 74, 0.3), inset 0 0 4px 1px rgba(138, 230, 96, 0.8), inset 0 1.1em 1.4em 0 rgba(122, 226, 74, 0.5);\n}\n.kappa .btn-primary:active {\n  color: #25580e;\n  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -4px 16px 0 rgba(122, 226, 74, 0.9), 0 -3px 12px -1px rgba(122, 226, 74, 0.6), inset 0 4px 12px 0 rgba(54, 127, 20, 0.5), inset 0 0 4px 1px rgba(138, 230, 96, 0.8);\n}\n.kappa .btn-secondary {\n  background-color: #0B44EF;\n  color: #072b97;\n  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.5), inset 0 -2px 5px -1px rgba(8, 47, 166, 0.6), 0 -3px 12px -1px rgba(80, 121, 247, 0.6), inset 0 3px 4px -1px rgba(80, 121, 247, 0.3), inset 0 0 4px 1px rgba(104, 140, 248, 0.8), inset 0 1.1em 1.4em 0 rgba(80, 121, 247, 0.5);\n}\n.kappa .btn-secondary:active {\n  color: #06237a;\n  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -4px 16px 0 rgba(80, 121, 247, 0.9), 0 -3px 12px -1px rgba(80, 121, 247, 0.6), inset 0 4px 12px 0 rgba(8, 47, 166, 0.5), inset 0 0 4px 1px rgba(104, 140, 248, 0.8);\n}\n.kappa .btn-tertiary {\n  background-color: #FF006A;\n  color: #a30044;\n  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.5), inset 0 -2px 5px -1px rgba(179, 0, 74, 0.6), 0 -3px 12px -1px rgba(255, 77, 151, 0.6), inset 0 3px 4px -1px rgba(255, 77, 151, 0.3), inset 0 0 4px 1px rgba(255, 102, 166, 0.8), inset 0 1.1em 1.4em 0 rgba(255, 77, 151, 0.5);\n}\n.kappa .btn-tertiary:active {\n  color: #850037;\n  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -4px 16px 0 rgba(255, 77, 151, 0.9), 0 -3px 12px -1px rgba(255, 77, 151, 0.6), inset 0 4px 12px 0 rgba(179, 0, 74, 0.5), inset 0 0 4px 1px rgba(255, 102, 166, 0.8);\n}\n.kappa .btn-tetrary {\n  background-color: #991BE2;\n  color: #611190;\n  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.5), inset 0 -2px 5px -1px rgba(107, 19, 158, 0.6), 0 -3px 12px -1px rgba(184, 94, 236, 0.6), inset 0 3px 4px -1px rgba(184, 94, 236, 0.3), inset 0 0 4px 1px rgba(194, 117, 238, 0.8), inset 0 1.1em 1.4em 0 rgba(184, 94, 236, 0.5);\n}\n.kappa .btn-tetrary:active {\n  color: #4f0e75;\n  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -4px 16px 0 rgba(184, 94, 236, 0.9), 0 -3px 12px -1px rgba(184, 94, 236, 0.6), inset 0 4px 12px 0 rgba(107, 19, 158, 0.5), inset 0 0 4px 1px rgba(194, 117, 238, 0.8);\n}\n.kappa .btn-black {\n  background-color: #252730;\n  color: black;\n  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.5), inset 0 -2px 5px -1px rgba(4, 4, 5, 0.6), 0 -3px 12px -1px rgba(70, 74, 91, 0.6), inset 0 3px 4px -1px rgba(70, 74, 91, 0.3), inset 0 0 4px 1px rgba(81, 86, 106, 0.8), inset 0 1.1em 1.4em 0 rgba(70, 74, 91, 0.5);\n}\n.kappa .btn-black:active {\n  color: black;\n  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -4px 16px 0 rgba(70, 74, 91, 0.9), 0 -3px 12px -1px rgba(70, 74, 91, 0.6), inset 0 4px 12px 0 rgba(4, 4, 5, 0.5), inset 0 0 4px 1px rgba(81, 86, 106, 0.8);\n}\n.kappa .btn-dark {\n  background-color: #3F4351;\n  color: #17181d;\n  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.5), inset 0 -2px 5px -1px rgba(30, 31, 38, 0.6), 0 -3px 12px -1px rgba(96, 103, 124, 0.6), inset 0 3px 4px -1px rgba(96, 103, 124, 0.3), inset 0 0 4px 1px rgba(108, 114, 138, 0.8), inset 0 1.1em 1.4em 0 rgba(96, 103, 124, 0.5);\n}\n.kappa .btn-dark:active {\n  color: #090a0c;\n  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -4px 16px 0 rgba(96, 103, 124, 0.9), 0 -3px 12px -1px rgba(96, 103, 124, 0.6), inset 0 4px 12px 0 rgba(30, 31, 38, 0.5), inset 0 0 4px 1px rgba(108, 114, 138, 0.8);\n}\n.kappa .btn-gray {\n  background-color: #6D6F7F;\n  color: #43444e;\n  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.5), inset 0 -2px 5px -1px rgba(74, 75, 86, 0.6), 0 -3px 12px -1px rgba(149, 150, 164, 0.6), inset 0 3px 4px -1px rgba(149, 150, 164, 0.3), inset 0 0 4px 1px rgba(162, 164, 176, 0.8), inset 0 1.1em 1.4em 0 rgba(149, 150, 164, 0.5);\n}\n.kappa .btn-gray:active {\n  color: #34353d;\n  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -4px 16px 0 rgba(149, 150, 164, 0.9), 0 -3px 12px -1px rgba(149, 150, 164, 0.6), inset 0 4px 12px 0 rgba(74, 75, 86, 0.5), inset 0 0 4px 1px rgba(162, 164, 176, 0.8);\n}\n.kappa .btn-light {\n  background-color: #E6EAEF;\n  color: #aebbcb;\n  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.5), inset 0 -2px 5px -1px rgba(183, 195, 209, 0.6), 0 -3px 12px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.3), inset 0 0 4px 1px rgba(255, 255, 255, 0.8), inset 0 1.1em 1.4em 0 rgba(255, 255, 255, 0.5);\n}\n.kappa .btn-light:active {\n  color: #9babbf;\n  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -4px 16px 0 rgba(255, 255, 255, 0.9), 0 -3px 12px -1px rgba(255, 255, 255, 0.6), inset 0 4px 12px 0 rgba(183, 195, 209, 0.5), inset 0 0 4px 1px rgba(255, 255, 255, 0.8);\n}\n\n.lambda .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.5em 1.8em;\n  font-weight: normal;\n  border-width: 1px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 1.21em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);\n  box-shadow: 0 1px 4px -1px rgba(255, 255, 255, 0.4) inset, 0 6px 12px 1px rgba(0, 0, 0, 0.15), 0 6px 2px 1px rgba(0, 0, 0, 0.1), 6px 6px 12px 1px rgba(0, 0, 0, 0.05), -6px 6px 12px 1px rgba(0, 0, 0, 0.05), 4px 4px 2px 1px rgba(0, 0, 0, 0.07), -4px 4px 2px 1px rgba(0, 0, 0, 0.07), 6px 0 2px 1px rgba(255, 255, 255, 0.4), -6px 0 2px 1px rgba(255, 255, 255, 0.4), 6px 0 2px 1px rgba(0, 0, 0, 0.1), -6px 0 2px 1px rgba(0, 0, 0, 0.1), 4px -4px 2px 1px rgba(255, 255, 255, 0.8), -4px -4px 2px 1px rgba(255, 255, 255, 0.8), 0 -6px 12px 1px rgba(255, 255, 255, 0.9), 0 -6px 2px 1px rgba(255, 255, 255, 0.9), 0 0.6em 1em 0 rgba(0, 0, 0, 0.08) inset, 0 -0.6em 1em rgba(255, 255, 255, 0.08) inset;\n  transition: box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);\n}\n.lambda .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.lambda .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.lambda .btn:active {\n  box-shadow: 0 1px 4px -1px rgba(255, 255, 255, 0.1) inset, 0 6px 12px 1px rgba(0, 0, 0, 0.2), 0 6px 2px 1px rgba(0, 0, 0, 0.1), 6px 6px 12px 1px rgba(0, 0, 0, 0.05), -6px 6px 12px 1px rgba(0, 0, 0, 0.05), 4px 4px 2px 1px rgba(0, 0, 0, 0.07), -4px 4px 2px 1px rgba(0, 0, 0, 0.07), 6px 0 2px 1px rgba(255, 255, 255, 0.4), -6px 0 2px 1px rgba(255, 255, 255, 0.4), 6px 0 2px 1px rgba(0, 0, 0, 0.1), -6px 0 2px 1px rgba(0, 0, 0, 0.1), 4px -4px 2px 1px rgba(255, 255, 255, 0.8), -4px -4px 2px 1px rgba(255, 255, 255, 0.8), 0 -6px 12px 1px rgba(255, 255, 255, 0.9), 0 -6px 2px 1px rgba(255, 255, 255, 0.9), 0 0.6em 1em 0 rgba(0, 0, 0, 0.15) inset, 0 -0.6em 1em rgba(255, 255, 255, 0.15) inset;\n}\n.lambda .btn-primary {\n  background-color: #52C11F;\n  color: #E6EAEF;\n  border-color: #439e19;\n}\n.lambda .btn-primary:hover {\n  background-color: #54c520;\n}\n.lambda .btn-primary:active {\n  background-color: #4eb81e;\n}\n.lambda .btn-secondary {\n  background-color: #0B44EF;\n  color: #E6EAEF;\n  border-color: #0939c8;\n}\n.lambda .btn-secondary:hover {\n  background-color: #0b45f4;\n}\n.lambda .btn-secondary:active {\n  background-color: #0b41e5;\n}\n.lambda .btn-tertiary {\n  background-color: #FF006A;\n  color: #E6EAEF;\n  border-color: #d60059;\n}\n.lambda .btn-tertiary:hover {\n  background-color: #ff056d;\n}\n.lambda .btn-tertiary:active {\n  background-color: #f50066;\n}\n.lambda .btn-tetrary {\n  background-color: #991BE2;\n  color: #E6EAEF;\n  border-color: #8017be;\n}\n.lambda .btn-tetrary:hover {\n  background-color: #9b1ee4;\n}\n.lambda .btn-tetrary:active {\n  background-color: #931ad9;\n}\n.lambda .btn-black {\n  background-color: #252730;\n  color: #E6EAEF;\n  border-color: #131419;\n}\n.lambda .btn-black:hover {\n  background-color: #272933;\n}\n.lambda .btn-black:active {\n  background-color: #21222a;\n}\n.lambda .btn-dark {\n  background-color: #3F4351;\n  color: #E6EAEF;\n  border-color: #2d303a;\n}\n.lambda .btn-dark:hover {\n  background-color: #414554;\n}\n.lambda .btn-dark:active {\n  background-color: #3b3e4b;\n}\n.lambda .btn-gray {\n  background-color: #6D6F7F;\n  color: #E6EAEF;\n  border-color: #5a5c69;\n}\n.lambda .btn-gray:hover {\n  background-color: #6f7182;\n}\n.lambda .btn-gray:active {\n  background-color: #686a7a;\n}\n.lambda .btn-light {\n  background-color: #E6EAEF;\n  color: #252730;\n  border-color: #cdd5df;\n}\n.lambda .btn-light:hover {\n  background-color: #e9edf1;\n}\n.lambda .btn-light:active {\n  background-color: #e0e5eb;\n}\n\n.mu .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.7em 1.4em;\n  font-weight: normal;\n  border-width: 1px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 1.41em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n}\n.mu .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.mu .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.mu .btn-primary {\n  color: #52C11F;\n  border-color: #52C11F;\n}\n.mu .btn-secondary {\n  color: #0B44EF;\n  border-color: #0B44EF;\n}\n.mu .btn-tertiary {\n  color: #FF006A;\n  border-color: #FF006A;\n}\n.mu .btn-tetrary {\n  color: #991BE2;\n  border-color: #991BE2;\n}\n.mu .btn-black {\n  color: #252730;\n  border-color: #252730;\n}\n.mu .btn-dark {\n  color: #3F4351;\n  border-color: #3F4351;\n}\n.mu .btn-gray {\n  color: #6D6F7F;\n  border-color: #6D6F7F;\n}\n.mu .btn-light {\n  color: #E6EAEF;\n  border-color: #E6EAEF;\n}\n\n.nu .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.8em 2.5em;\n  font-weight: normal;\n  border-width: 3px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  transition: background-color 0.2s, color 0.2s, padding 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-radius 0.2s;\n}\n.nu .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.nu .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.nu .btn-primary {\n  color: #52C11F;\n  border-color: #52C11F;\n}\n.nu .btn-primary:hover {\n  background-color: #52C11F;\n  color: #E6EAEF;\n  padding-left: 3.5em;\n  padding-right: 3.5em;\n  border-radius: 0.4em;\n}\n.nu .btn-primary:active {\n  background-color: #4cb41d;\n  border-color: #4cb41d;\n}\n.nu .btn-secondary {\n  color: #0B44EF;\n  border-color: #0B44EF;\n}\n.nu .btn-secondary:hover {\n  background-color: #0B44EF;\n  color: #E6EAEF;\n  padding-left: 3.5em;\n  padding-right: 3.5em;\n  border-radius: 0.4em;\n}\n.nu .btn-secondary:active {\n  background-color: #0a40e0;\n  border-color: #0a40e0;\n}\n.nu .btn-tertiary {\n  color: #FF006A;\n  border-color: #FF006A;\n}\n.nu .btn-tertiary:hover {\n  background-color: #FF006A;\n  color: #E6EAEF;\n  padding-left: 3.5em;\n  padding-right: 3.5em;\n  border-radius: 0.4em;\n}\n.nu .btn-tertiary:active {\n  background-color: #f00064;\n  border-color: #f00064;\n}\n.nu .btn-tetrary {\n  color: #991BE2;\n  border-color: #991BE2;\n}\n.nu .btn-tetrary:hover {\n  background-color: #991BE2;\n  color: #E6EAEF;\n  padding-left: 3.5em;\n  padding-right: 3.5em;\n  border-radius: 0.4em;\n}\n.nu .btn-tetrary:active {\n  background-color: #9019d4;\n  border-color: #9019d4;\n}\n.nu .btn-black {\n  color: #252730;\n  border-color: #252730;\n}\n.nu .btn-black:hover {\n  background-color: #252730;\n  color: #E6EAEF;\n  padding-left: 3.5em;\n  padding-right: 3.5em;\n  border-radius: 0.4em;\n}\n.nu .btn-black:active {\n  background-color: #1e2027;\n  border-color: #1e2027;\n}\n.nu .btn-dark {\n  color: #3F4351;\n  border-color: #3F4351;\n}\n.nu .btn-dark:hover {\n  background-color: #3F4351;\n  color: #E6EAEF;\n  padding-left: 3.5em;\n  padding-right: 3.5em;\n  border-radius: 0.4em;\n}\n.nu .btn-dark:active {\n  background-color: #383c48;\n  border-color: #383c48;\n}\n.nu .btn-gray {\n  color: #6D6F7F;\n  border-color: #6D6F7F;\n}\n.nu .btn-gray:hover {\n  background-color: #6D6F7F;\n  color: #E6EAEF;\n  padding-left: 3.5em;\n  padding-right: 3.5em;\n  border-radius: 0.4em;\n}\n.nu .btn-gray:active {\n  background-color: #666877;\n  border-color: #666877;\n}\n.nu .btn-light {\n  color: #E6EAEF;\n  border-color: #E6EAEF;\n}\n.nu .btn-light:hover {\n  background-color: #E6EAEF;\n  color: #252730;\n  padding-left: 3.5em;\n  padding-right: 3.5em;\n  border-radius: 0.4em;\n}\n.nu .btn-light:active {\n  background-color: #dde2e9;\n  border-color: #dde2e9;\n}\n\n.xi .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.6em 1.8em;\n  font-weight: normal;\n  border-width: 0;\n  border-style: solid;\n  background: transparent;\n  border-radius: 1.31em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n  position: relative;\n  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -1.31em 1.31em -1.31em rgba(0, 0, 0, 0.3) inset, 0 0 1px 0 rgba(0, 0, 0, 0.1);\n}\n.xi .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.xi .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.xi .btn:active {\n  transition-duration: 0.05s;\n  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);\n  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0), 0 -2px 4px 0 rgba(0, 0, 0, 0), 0 -1px 0 0 rgba(0, 0, 0, 0) inset, 0 1.31em 1.31em -1.31em rgba(0, 0, 0, 0.3) inset, 0 0 4px 0 rgba(0, 0, 0, 0.1);\n  transform: scale(0.99);\n}\n.xi .btn:active:before {\n  transform: translateY(1.01);\n}\n.xi .btn:before {\n  content: \"\";\n  position: absolute;\n  top: -7px;\n  left: -7px;\n  right: -7px;\n  bottom: -7px;\n  border-radius: 1.71em;\n  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.1));\n  z-index: -1;\n}\n.xi .btn-primary {\n  background-color: #52C11F;\n  color: #bbf0a2;\n}\n.xi .btn-primary:hover {\n  background-color: #58ce21;\n}\n.xi .btn-primary:active {\n  background-color: #4cb41d;\n  color: #2d6911;\n}\n.xi .btn-secondary {\n  background-color: #0B44EF;\n  color: #b1c4fb;\n}\n.xi .btn-secondary:hover {\n  background-color: #154df4;\n}\n.xi .btn-secondary:active {\n  background-color: #0a40e0;\n  color: #07288d;\n}\n.xi .btn-tertiary {\n  background-color: #FF006A;\n  color: #ffb3d2;\n}\n.xi .btn-tertiary:hover {\n  background-color: #ff0f73;\n}\n.xi .btn-tertiary:active {\n  background-color: #f00064;\n  color: #990040;\n}\n.xi .btn-tetrary {\n  background-color: #991BE2;\n  color: #e0b9f7;\n}\n.xi .btn-tetrary:hover {\n  background-color: #9f27e5;\n}\n.xi .btn-tetrary:active {\n  background-color: #9019d4;\n  color: #5b1087;\n}\n.xi .btn-black {\n  background-color: #252730;\n  color: #747a94;\n}\n.xi .btn-black:hover {\n  background-color: #2c2e39;\n}\n.xi .btn-black:active {\n  background-color: #1e2027;\n  color: black;\n}\n.xi .btn-dark {\n  background-color: #3F4351;\n  color: #969bad;\n}\n.xi .btn-dark:hover {\n  background-color: #464a5a;\n}\n.xi .btn-dark:active {\n  background-color: #383c48;\n  color: #121418;\n}\n.xi .btn-gray {\n  background-color: #6D6F7F;\n  color: #ccccd3;\n}\n.xi .btn-gray:hover {\n  background-color: #747687;\n}\n.xi .btn-gray:active {\n  background-color: #666877;\n  color: #3e3f48;\n}\n.xi .btn-light {\n  background-color: #E6EAEF;\n  color: #a8b6c7;\n}\n.xi .btn-light:hover {\n  background-color: #eff2f5;\n}\n.xi .btn-light:active {\n  background-color: #dde2e9;\n  color: #a8b6c7;\n}\n\n.omicron .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.8em 2.2em;\n  font-weight: normal;\n  border-width: 2px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 1.66em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  transition: box-shadow 0.15s, background-color 0.15s;\n  box-shadow: 0 0 1em 0 rgba(255, 255, 255, 0.1) inset, 0 2.2em 0 -1em rgba(255, 255, 255, 0.2) inset, 0 1.5em 1em -1em rgba(255, 255, 255, 0.3) inset, 0 0 4px 1px rgba(0, 0, 0, 0.2) inset;\n}\n.omicron .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.omicron .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.omicron .btn:active {\n  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.1) inset, 0 2.2em 1em -1em rgba(255, 255, 255, 0.05) inset, 0 1.5em 1em -1em rgba(255, 255, 255, 0) inset, 0 0 4px 1px rgba(0, 0, 0, 0.2) inset;\n}\n.omicron .btn-primary {\n  background-image: radial-gradient(ellipse at bottom center, #4ffa00, #52C11F);\n  background-color: #52C11F;\n  color: rgba(35, 83, 13, 0.8);\n  border-color: #3f9518;\n}\n.omicron .btn-primary:hover {\n  background-image: radial-gradient(ellipse at bottom center, #65ff1e, #52C11F);\n}\n.omicron .btn-primary:active {\n  background-image: radial-gradient(ellipse at bottom center, #3ec700, #52C11F);\n}\n.omicron .btn-secondary {\n  background-image: radial-gradient(ellipse at bottom center, #154fff, #0B44EF);\n  background-color: #0B44EF;\n  color: rgba(5, 33, 117, 0.8);\n  border-color: #0936be;\n}\n.omicron .btn-secondary:hover {\n  background-image: radial-gradient(ellipse at bottom center, #386aff, #0B44EF);\n}\n.omicron .btn-secondary:active {\n  background-image: radial-gradient(ellipse at bottom center, #0038e1, #0B44EF);\n}\n.omicron .btn-tertiary {\n  background-image: radial-gradient(ellipse at bottom center, #ff1a79, #FF006A);\n  background-color: #FF006A;\n  color: rgba(128, 0, 53, 0.8);\n  border-color: #cc0055;\n}\n.omicron .btn-tertiary:hover {\n  background-image: radial-gradient(ellipse at bottom center, #ff3d8e, #FF006A);\n}\n.omicron .btn-tertiary:active {\n  background-image: radial-gradient(ellipse at bottom center, #e6005f, #FF006A);\n}\n.omicron .btn-tetrary {\n  background-image: radial-gradient(ellipse at bottom center, #aa18ff, #991BE2);\n  background-color: #991BE2;\n  color: rgba(76, 13, 112, 0.8);\n  border-color: #7a16b4;\n}\n.omicron .btn-tetrary:hover {\n  background-image: radial-gradient(ellipse at bottom center, #b73bff, #991BE2);\n}\n.omicron .btn-tetrary:active {\n  background-image: radial-gradient(ellipse at bottom center, #9000e4, #991BE2);\n}\n.omicron .btn-black {\n  background-image: radial-gradient(ellipse at bottom center, #20284f, #252730);\n  background-color: #252730;\n  color: rgba(0, 0, 0, 0.8);\n  border-color: #0f1013;\n}\n.omicron .btn-black:hover {\n  background-image: radial-gradient(ellipse at bottom center, #2a3568, #252730);\n}\n.omicron .btn-black:active {\n  background-image: radial-gradient(ellipse at bottom center, #0e142e, #252730);\n}\n.omicron .btn-dark {\n  background-image: radial-gradient(ellipse at bottom center, #314179, #3F4351);\n  background-color: #3F4351;\n  color: rgba(7, 8, 9, 0.8);\n  border-color: #292b34;\n}\n.omicron .btn-dark:hover {\n  background-image: radial-gradient(ellipse at bottom center, #3b4e92, #3F4351);\n}\n.omicron .btn-dark:active {\n  background-image: radial-gradient(ellipse at bottom center, #1c2a5a, #3F4351);\n}\n.omicron .btn-gray {\n  background-image: radial-gradient(ellipse at bottom center, #545eb2, #6D6F7F);\n  background-color: #6D6F7F;\n  color: rgba(50, 51, 58, 0.8);\n  border-color: #555764;\n}\n.omicron .btn-gray:hover {\n  background-image: radial-gradient(ellipse at bottom center, #6d75bd, #6D6F7F);\n}\n.omicron .btn-gray:active {\n  background-image: radial-gradient(ellipse at bottom center, #37429b, #6D6F7F);\n}\n.omicron .btn-light {\n  background-image: radial-gradient(ellipse at bottom center, #f3f7fb, #E6EAEF);\n  background-color: #E6EAEF;\n  color: #5d7592;\n  border-color: #c7d0db;\n}\n.omicron .btn-light:hover {\n  background-image: radial-gradient(ellipse at bottom center, white, #E6EAEF);\n}\n.omicron .btn-light:active {\n  background-image: radial-gradient(ellipse at bottom center, #c9dbf2, #E6EAEF);\n}\n\n.pi .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.6em 1.6em;\n  font-weight: normal;\n  border-width: 0;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0.5em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  transition: box-shadow 0.2s, transform 0.2s;\n  border-radius: 12%/50%;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.pi .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.pi .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.pi .btn:hover {\n  transform: scale(1.02);\n  box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.2);\n}\n.pi .btn:active {\n  transform: scale(0.99);\n  box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.15) inset;\n  transition-duration: 0.05s;\n}\n.pi .btn-primary {\n  color: #52C11F;\n}\n.pi .btn-secondary {\n  color: #0B44EF;\n}\n.pi .btn-tertiary {\n  color: #FF006A;\n}\n.pi .btn-tetrary {\n  color: #991BE2;\n}\n.pi .btn-black {\n  color: #252730;\n}\n.pi .btn-dark {\n  color: #3F4351;\n}\n.pi .btn-gray {\n  color: #6D6F7F;\n}\n.pi .btn-light {\n  color: #5d7592;\n}\n\n.rho .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.6em 2.2em;\n  font-weight: normal;\n  border-width: 0;\n  border-style: solid;\n  background: transparent;\n  border-radius: 1.46em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  transition: box-shadow 0.2s, background-color 0.2s;\n  position: relative;\n  background-color: #CED0DB;\n  background-image: linear-gradient(0deg, #CED0DB, #E6EAEF);\n  color: #3F4351;\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.3), 0 2px 7px rgba(0, 0, 0, 0.4);\n}\n.rho .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.rho .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.rho .btn:before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  padding: 0.35em;\n  text-shadow: none;\n  top: -0.35em;\n  left: -0.35em;\n  right: -0.35em;\n  bottom: -0.35em;\n  border-radius: 1.81em;\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2) inset, 0 3px 3px -2px rgba(0, 0, 0, 0.2) inset;\n  z-index: -1;\n}\n.rho .btn-primary:active {\n  background-color: #bfc2d0;\n  background-image: linear-gradient(0deg, #CED0DB, #d6dde5);\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 7px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) inset;\n}\n.rho .btn-primary:before {\n  background-color: #52C11F;\n}\n.rho .btn-secondary:active {\n  background-color: #bfc2d0;\n  background-image: linear-gradient(0deg, #CED0DB, #d6dde5);\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 7px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) inset;\n}\n.rho .btn-secondary:before {\n  background-color: #0B44EF;\n}\n.rho .btn-tertiary:active {\n  background-color: #bfc2d0;\n  background-image: linear-gradient(0deg, #CED0DB, #d6dde5);\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 7px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) inset;\n}\n.rho .btn-tertiary:before {\n  background-color: #FF006A;\n}\n.rho .btn-tetrary:active {\n  background-color: #bfc2d0;\n  background-image: linear-gradient(0deg, #CED0DB, #d6dde5);\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 7px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) inset;\n}\n.rho .btn-tetrary:before {\n  background-color: #991BE2;\n}\n.rho .btn-black:active {\n  background-color: #bfc2d0;\n  background-image: linear-gradient(0deg, #CED0DB, #d6dde5);\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 7px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) inset;\n}\n.rho .btn-black:before {\n  background-color: #252730;\n}\n.rho .btn-dark:active {\n  background-color: #bfc2d0;\n  background-image: linear-gradient(0deg, #CED0DB, #d6dde5);\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 7px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) inset;\n}\n.rho .btn-dark:before {\n  background-color: #3F4351;\n}\n.rho .btn-gray:active {\n  background-color: #bfc2d0;\n  background-image: linear-gradient(0deg, #CED0DB, #d6dde5);\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 7px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) inset;\n}\n.rho .btn-gray:before {\n  background-color: #6D6F7F;\n}\n.rho .btn-light:active {\n  background-color: #bfc2d0;\n  background-image: linear-gradient(0deg, #CED0DB, #d6dde5);\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 7px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) inset;\n}\n.rho .btn-light:before {\n  background-color: #E6EAEF;\n}\n\n.sigma .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.45em 2.5em;\n  font-weight: normal;\n  border-width: 1px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0.2em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  transition: box-shadow 0.3s, background-color 0.3s;\n  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n.sigma .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.sigma .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.sigma .btn:active {\n  transition-duration: 0.1s;\n  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.1);\n}\n.sigma .btn-primary {\n  background-color: #52C11F;\n  color: #307212;\n  border-color: #3c8c17;\n  box-shadow: 0 -4px 12px -1px rgba(82, 193, 31, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.35), 0 2px 6px 1px rgba(0, 0, 0, 0.3), 0 10px 6px -2px rgba(0, 0, 0, 0.25), 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 -2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-primary:hover {\n  background-color: #56ca20;\n}\n.sigma .btn-primary:active {\n  background-color: #49ab1b;\n  box-shadow: 0 -4px 12px -1px rgba(82, 193, 31, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 1px rgba(0, 0, 0, 0.2), 0 8px 6px -2px rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(255, 255, 255, 0.1) inset, 0 2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-secondary {\n  background-color: #0B44EF;\n  color: #072b97;\n  border-color: #0833b4;\n  box-shadow: 0 -4px 12px -1px rgba(11, 68, 239, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.35), 0 2px 6px 1px rgba(0, 0, 0, 0.3), 0 10px 6px -2px rgba(0, 0, 0, 0.25), 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 -2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-secondary:hover {\n  background-color: #1049f4;\n}\n.sigma .btn-secondary:active {\n  background-color: #0a3dd7;\n  box-shadow: 0 -4px 12px -1px rgba(11, 68, 239, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 1px rgba(0, 0, 0, 0.2), 0 8px 6px -2px rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(255, 255, 255, 0.1) inset, 0 2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-tertiary {\n  background-color: #FF006A;\n  color: #a30044;\n  border-color: #c20051;\n  box-shadow: 0 -4px 12px -1px rgba(255, 0, 106, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.35), 0 2px 6px 1px rgba(0, 0, 0, 0.3), 0 10px 6px -2px rgba(0, 0, 0, 0.25), 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 -2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-tertiary:hover {\n  background-color: #ff0a70;\n}\n.sigma .btn-tertiary:active {\n  background-color: #e6005f;\n  box-shadow: 0 -4px 12px -1px rgba(255, 0, 106, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 1px rgba(0, 0, 0, 0.2), 0 8px 6px -2px rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(255, 255, 255, 0.1) inset, 0 2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-tetrary {\n  background-color: #991BE2;\n  color: #611190;\n  border-color: #7414ab;\n  box-shadow: 0 -4px 12px -1px rgba(153, 27, 226, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.35), 0 2px 6px 1px rgba(0, 0, 0, 0.3), 0 10px 6px -2px rgba(0, 0, 0, 0.25), 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 -2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-tetrary:hover {\n  background-color: #9d23e5;\n}\n.sigma .btn-tetrary:active {\n  background-color: #8a18cb;\n  box-shadow: 0 -4px 12px -1px rgba(153, 27, 226, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 1px rgba(0, 0, 0, 0.2), 0 8px 6px -2px rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(255, 255, 255, 0.1) inset, 0 2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-black {\n  background-color: #252730;\n  color: black;\n  border-color: #0a0b0d;\n  box-shadow: 0 -4px 12px -1px rgba(37, 39, 48, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.35), 0 2px 6px 1px rgba(0, 0, 0, 0.3), 0 10px 6px -2px rgba(0, 0, 0, 0.25), 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 -2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-black:hover {\n  background-color: #292c36;\n}\n.sigma .btn-black:active {\n  background-color: #1a1b22;\n  box-shadow: 0 -4px 12px -1px rgba(37, 39, 48, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 1px rgba(0, 0, 0, 0.2), 0 8px 6px -2px rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(255, 255, 255, 0.1) inset, 0 2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-dark {\n  background-color: #3F4351;\n  color: #17181d;\n  border-color: #24272f;\n  box-shadow: 0 -4px 12px -1px rgba(63, 67, 81, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.35), 0 2px 6px 1px rgba(0, 0, 0, 0.3), 0 10px 6px -2px rgba(0, 0, 0, 0.25), 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 -2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-dark:hover {\n  background-color: #434857;\n}\n.sigma .btn-dark:active {\n  background-color: #343743;\n  box-shadow: 0 -4px 12px -1px rgba(63, 67, 81, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 1px rgba(0, 0, 0, 0.2), 0 8px 6px -2px rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(255, 255, 255, 0.1) inset, 0 2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-gray {\n  background-color: #6D6F7F;\n  color: #43444e;\n  border-color: #51525e;\n  box-shadow: 0 -4px 12px -1px rgba(109, 111, 127, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.35), 0 2px 6px 1px rgba(0, 0, 0, 0.3), 0 10px 6px -2px rgba(0, 0, 0, 0.25), 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 -2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-gray:hover {\n  background-color: #727484;\n}\n.sigma .btn-gray:active {\n  background-color: #616371;\n  box-shadow: 0 -4px 12px -1px rgba(109, 111, 127, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 1px rgba(0, 0, 0, 0.2), 0 8px 6px -2px rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(255, 255, 255, 0.1) inset, 0 2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-light {\n  background-color: #E6EAEF;\n  color: #5d7592;\n  border-color: #c1cbd7;\n  box-shadow: 0 -4px 12px -1px rgba(230, 234, 239, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.35), 0 2px 6px 1px rgba(0, 0, 0, 0.3), 0 10px 6px -2px rgba(0, 0, 0, 0.25), 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 -2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n.sigma .btn-light:hover {\n  background-color: #eceff3;\n}\n.sigma .btn-light:active {\n  background-color: #d6dde5;\n  box-shadow: 0 -4px 12px -1px rgba(230, 234, 239, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 1px rgba(0, 0, 0, 0.2), 0 8px 6px -2px rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(255, 255, 255, 0.1) inset, 0 2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset;\n}\n\n.tau .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 1.2em 2.4em;\n  font-weight: normal;\n  border-width: 0;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  transition: background-color 0.3s;\n}\n.tau .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.tau .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.tau .btn:active {\n  transition-duration: 0.1s;\n}\n.tau .btn-primary {\n  background-color: #52C11F;\n  color: #E6EAEF;\n}\n.tau .btn-primary:hover {\n  background-color: #59d322;\n}\n.tau .btn-primary:active {\n  background-color: #4baf1c;\n}\n.tau .btn-secondary {\n  background-color: #0B44EF;\n  color: #E6EAEF;\n}\n.tau .btn-secondary:hover {\n  background-color: #1a51f4;\n}\n.tau .btn-secondary:active {\n  background-color: #0a3edb;\n}\n.tau .btn-tertiary {\n  background-color: #FF006A;\n  color: #E6EAEF;\n}\n.tau .btn-tertiary:hover {\n  background-color: #ff1476;\n}\n.tau .btn-tertiary:active {\n  background-color: #eb0062;\n}\n.tau .btn-tetrary {\n  background-color: #991BE2;\n  color: #E6EAEF;\n}\n.tau .btn-tetrary:hover {\n  background-color: #a12ce6;\n}\n.tau .btn-tetrary:active {\n  background-color: #8d19d0;\n}\n.tau .btn-black {\n  background-color: #252730;\n  color: #E6EAEF;\n}\n.tau .btn-black:hover {\n  background-color: #2e303c;\n}\n.tau .btn-black:active {\n  background-color: #1c1e24;\n}\n.tau .btn-dark {\n  background-color: #3F4351;\n  color: #E6EAEF;\n}\n.tau .btn-dark:hover {\n  background-color: #484c5c;\n}\n.tau .btn-dark:active {\n  background-color: #363a46;\n}\n.tau .btn-gray {\n  background-color: #6D6F7F;\n  color: #E6EAEF;\n}\n.tau .btn-gray:hover {\n  background-color: #77798a;\n}\n.tau .btn-gray:active {\n  background-color: #646574;\n}\n.tau .btn-light {\n  background-color: #E6EAEF;\n  color: #5d7592;\n}\n.tau .btn-light:hover {\n  background-color: #f2f4f7;\n}\n.tau .btn-light:active {\n  background-color: #dae0e7;\n}\n\n.upsilon .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 1.2em 1.6em;\n  font-weight: normal;\n  border-width: 0;\n  border-style: solid;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;\n  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.3) inset;\n}\n.upsilon .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.upsilon .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.upsilon .btn:active {\n  transition-duration: 0.1s;\n  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3) inset;\n  transform: translateY(1px);\n}\n.upsilon .btn-primary {\n  background-color: #52C11F;\n  color: #E6EAEF;\n}\n.upsilon .btn-primary:hover {\n  background-color: #59d322;\n}\n.upsilon .btn-primary:active {\n  background-color: #4baf1c;\n}\n.upsilon .btn-secondary {\n  background-color: #0B44EF;\n  color: #E6EAEF;\n}\n.upsilon .btn-secondary:hover {\n  background-color: #1a51f4;\n}\n.upsilon .btn-secondary:active {\n  background-color: #0a3edb;\n}\n.upsilon .btn-tertiary {\n  background-color: #FF006A;\n  color: #E6EAEF;\n}\n.upsilon .btn-tertiary:hover {\n  background-color: #ff1476;\n}\n.upsilon .btn-tertiary:active {\n  background-color: #eb0062;\n}\n.upsilon .btn-tetrary {\n  background-color: #991BE2;\n  color: #E6EAEF;\n}\n.upsilon .btn-tetrary:hover {\n  background-color: #a12ce6;\n}\n.upsilon .btn-tetrary:active {\n  background-color: #8d19d0;\n}\n.upsilon .btn-black {\n  background-color: #252730;\n  color: #E6EAEF;\n}\n.upsilon .btn-black:hover {\n  background-color: #2e303c;\n}\n.upsilon .btn-black:active {\n  background-color: #1c1e24;\n}\n.upsilon .btn-dark {\n  background-color: #3F4351;\n  color: #E6EAEF;\n}\n.upsilon .btn-dark:hover {\n  background-color: #484c5c;\n}\n.upsilon .btn-dark:active {\n  background-color: #363a46;\n}\n.upsilon .btn-gray {\n  background-color: #6D6F7F;\n  color: #E6EAEF;\n}\n.upsilon .btn-gray:hover {\n  background-color: #77798a;\n}\n.upsilon .btn-gray:active {\n  background-color: #646574;\n}\n.upsilon .btn-light {\n  background-color: #E6EAEF;\n  color: #5d7592;\n}\n.upsilon .btn-light:hover {\n  background-color: #f2f4f7;\n}\n.upsilon .btn-light:active {\n  background-color: #dae0e7;\n}\n\n.phi .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 1.2em 1.6em;\n  font-weight: normal;\n  border-width: 3px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0.4em;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s, background-color 0.3s;\n  border-radius: 0.5em 0.6em/0.6em 1em 3em 1em;\n}\n.phi .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.phi .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.phi .btn:hover {\n  transform: translate(-2px, -2px);\n}\n.phi .btn:active {\n  transition-duration: 0.1s;\n  transform: translate(4px, 4px);\n}\n.phi .btn-primary {\n  color: #52C11F;\n  border-color: #52C11F;\n  box-shadow: 6px 0 0 0 #52C11F, 6px 6px 0 0 #52C11F, 0 6px 0 0 #52C11F;\n}\n.phi .btn-primary:hover {\n  box-shadow: 8px 0 0 0 #52C11F, 8px 8px 0 0 #52C11F, 0 8px 0 0 #52C11F;\n}\n.phi .btn-primary:active {\n  background-color: #52C11F;\n  color: #E6EAEF;\n  box-shadow: 2px 0 0 0 #52C11F, 2px 2px 0 0 #52C11F, 0 2px 0 0 #52C11F;\n}\n.phi .btn-secondary {\n  color: #0B44EF;\n  border-color: #0B44EF;\n  box-shadow: 6px 0 0 0 #0B44EF, 6px 6px 0 0 #0B44EF, 0 6px 0 0 #0B44EF;\n}\n.phi .btn-secondary:hover {\n  box-shadow: 8px 0 0 0 #0B44EF, 8px 8px 0 0 #0B44EF, 0 8px 0 0 #0B44EF;\n}\n.phi .btn-secondary:active {\n  background-color: #0B44EF;\n  color: #E6EAEF;\n  box-shadow: 2px 0 0 0 #0B44EF, 2px 2px 0 0 #0B44EF, 0 2px 0 0 #0B44EF;\n}\n.phi .btn-tertiary {\n  color: #FF006A;\n  border-color: #FF006A;\n  box-shadow: 6px 0 0 0 #FF006A, 6px 6px 0 0 #FF006A, 0 6px 0 0 #FF006A;\n}\n.phi .btn-tertiary:hover {\n  box-shadow: 8px 0 0 0 #FF006A, 8px 8px 0 0 #FF006A, 0 8px 0 0 #FF006A;\n}\n.phi .btn-tertiary:active {\n  background-color: #FF006A;\n  color: #E6EAEF;\n  box-shadow: 2px 0 0 0 #FF006A, 2px 2px 0 0 #FF006A, 0 2px 0 0 #FF006A;\n}\n.phi .btn-tetrary {\n  color: #991BE2;\n  border-color: #991BE2;\n  box-shadow: 6px 0 0 0 #991BE2, 6px 6px 0 0 #991BE2, 0 6px 0 0 #991BE2;\n}\n.phi .btn-tetrary:hover {\n  box-shadow: 8px 0 0 0 #991BE2, 8px 8px 0 0 #991BE2, 0 8px 0 0 #991BE2;\n}\n.phi .btn-tetrary:active {\n  background-color: #991BE2;\n  color: #E6EAEF;\n  box-shadow: 2px 0 0 0 #991BE2, 2px 2px 0 0 #991BE2, 0 2px 0 0 #991BE2;\n}\n.phi .btn-black {\n  color: #252730;\n  border-color: #252730;\n  box-shadow: 6px 0 0 0 #252730, 6px 6px 0 0 #252730, 0 6px 0 0 #252730;\n}\n.phi .btn-black:hover {\n  box-shadow: 8px 0 0 0 #252730, 8px 8px 0 0 #252730, 0 8px 0 0 #252730;\n}\n.phi .btn-black:active {\n  background-color: #252730;\n  color: #E6EAEF;\n  box-shadow: 2px 0 0 0 #252730, 2px 2px 0 0 #252730, 0 2px 0 0 #252730;\n}\n.phi .btn-dark {\n  color: #3F4351;\n  border-color: #3F4351;\n  box-shadow: 6px 0 0 0 #3F4351, 6px 6px 0 0 #3F4351, 0 6px 0 0 #3F4351;\n}\n.phi .btn-dark:hover {\n  box-shadow: 8px 0 0 0 #3F4351, 8px 8px 0 0 #3F4351, 0 8px 0 0 #3F4351;\n}\n.phi .btn-dark:active {\n  background-color: #3F4351;\n  color: #E6EAEF;\n  box-shadow: 2px 0 0 0 #3F4351, 2px 2px 0 0 #3F4351, 0 2px 0 0 #3F4351;\n}\n.phi .btn-gray {\n  color: #6D6F7F;\n  border-color: #6D6F7F;\n  box-shadow: 6px 0 0 0 #6D6F7F, 6px 6px 0 0 #6D6F7F, 0 6px 0 0 #6D6F7F;\n}\n.phi .btn-gray:hover {\n  box-shadow: 8px 0 0 0 #6D6F7F, 8px 8px 0 0 #6D6F7F, 0 8px 0 0 #6D6F7F;\n}\n.phi .btn-gray:active {\n  background-color: #6D6F7F;\n  color: #E6EAEF;\n  box-shadow: 2px 0 0 0 #6D6F7F, 2px 2px 0 0 #6D6F7F, 0 2px 0 0 #6D6F7F;\n}\n.phi .btn-light {\n  color: #E6EAEF;\n  border-color: #E6EAEF;\n  box-shadow: 6px 0 0 0 #E6EAEF, 6px 6px 0 0 #E6EAEF, 0 6px 0 0 #E6EAEF;\n}\n.phi .btn-light:hover {\n  box-shadow: 8px 0 0 0 #E6EAEF, 8px 8px 0 0 #E6EAEF, 0 8px 0 0 #E6EAEF;\n}\n.phi .btn-light:active {\n  background-color: #E6EAEF;\n  color: #5d7592;\n  box-shadow: 2px 0 0 0 #E6EAEF, 2px 2px 0 0 #E6EAEF, 0 2px 0 0 #E6EAEF;\n}\n\n.chi .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.6em 1.8em;\n  font-weight: normal;\n  border-width: 3px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  position: relative;\n  transition: color 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);\n  box-sizing: border-box;\n}\n.chi .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.chi .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.chi .btn:hover:before {\n  transform: scaleY(1);\n}\n.chi .btn:hover:after {\n  transform: translate(6px, 6px);\n}\n.chi .btn:active {\n  transition-duration: 0.05s;\n  transform: translate(6px, 6px);\n}\n.chi .btn:active:after {\n  transition-duration: 0.05s;\n  transform: translate(0, 0);\n}\n.chi .btn:before, .chi .btn:after {\n  content: \"\";\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: -1;\n}\n.chi .btn:before {\n  transform-origin: top center;\n  transform: scaleY(0);\n  transition: transform cubic-bezier(1, 0, 0, 1) 0.4s;\n}\n.chi .btn:after {\n  top: -3px;\n  left: -3px;\n  border-width: 3px;\n  border-style: solid;\n  transition: transform cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;\n}\n.chi .btn-primary {\n  color: #52C11F;\n  border-color: #52C11F;\n}\n.chi .btn-primary:hover {\n  color: #E6EAEF;\n}\n.chi .btn-primary:before {\n  background-color: #52C11F;\n}\n.chi .btn-primary:after {\n  border-color: #52C11F;\n}\n.chi .btn-secondary {\n  color: #0B44EF;\n  border-color: #0B44EF;\n}\n.chi .btn-secondary:hover {\n  color: #E6EAEF;\n}\n.chi .btn-secondary:before {\n  background-color: #0B44EF;\n}\n.chi .btn-secondary:after {\n  border-color: #0B44EF;\n}\n.chi .btn-tertiary {\n  color: #FF006A;\n  border-color: #FF006A;\n}\n.chi .btn-tertiary:hover {\n  color: #E6EAEF;\n}\n.chi .btn-tertiary:before {\n  background-color: #FF006A;\n}\n.chi .btn-tertiary:after {\n  border-color: #FF006A;\n}\n.chi .btn-tetrary {\n  color: #991BE2;\n  border-color: #991BE2;\n}\n.chi .btn-tetrary:hover {\n  color: #E6EAEF;\n}\n.chi .btn-tetrary:before {\n  background-color: #991BE2;\n}\n.chi .btn-tetrary:after {\n  border-color: #991BE2;\n}\n.chi .btn-black {\n  color: #252730;\n  border-color: #252730;\n}\n.chi .btn-black:hover {\n  color: #E6EAEF;\n}\n.chi .btn-black:before {\n  background-color: #252730;\n}\n.chi .btn-black:after {\n  border-color: #252730;\n}\n.chi .btn-dark {\n  color: #3F4351;\n  border-color: #3F4351;\n}\n.chi .btn-dark:hover {\n  color: #E6EAEF;\n}\n.chi .btn-dark:before {\n  background-color: #3F4351;\n}\n.chi .btn-dark:after {\n  border-color: #3F4351;\n}\n.chi .btn-gray {\n  color: #6D6F7F;\n  border-color: #6D6F7F;\n}\n.chi .btn-gray:hover {\n  color: #E6EAEF;\n}\n.chi .btn-gray:before {\n  background-color: #6D6F7F;\n}\n.chi .btn-gray:after {\n  border-color: #6D6F7F;\n}\n.chi .btn-light {\n  color: #E6EAEF;\n  border-color: #E6EAEF;\n}\n.chi .btn-light:hover {\n  color: #5d7592;\n}\n.chi .btn-light:before {\n  background-color: #E6EAEF;\n}\n.chi .btn-light:after {\n  border-color: #E6EAEF;\n}\n\n.psi .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.5em 1.5em;\n  font-weight: normal;\n  border-width: 2px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 2px;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  position: relative;\n  background-color: #252730;\n  transition: color 0.25s, box-shadow 0.25s;\n  overflow: hidden;\n  box-shadow: 0 1px 1px -1px rgba(255, 255, 255, 0.8) inset, 0 40px 20px -20px rgba(255, 255, 255, 0.08) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 -40px 20px -20px rgba(0, 0, 0, 0.06) inset, 0 11px 8px -3px rgba(0, 0, 0, 0.4), 0 4px 2px -2px rgba(0, 0, 0, 0.3), 0 1px 6px 1px rgba(0, 0, 0, 0.5);\n}\n.psi .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.psi .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.psi .btn:hover:after {\n  opacity: 1;\n}\n.psi .btn:active {\n  transition-duration: 0.1s;\n  box-shadow: 0 -1px 1px -1px rgba(255, 255, 255, 0.3) inset, 0 -40px 20px -20px rgba(255, 255, 255, 0.05) inset, 0 -1px 1px -1px rgba(0, 0, 0, 0.7) inset, 0 40px 20px -20px rgba(0, 0, 0, 0.05) inset, 0 11px 8px -3px rgba(0, 0, 0, 0.25), 0 4px 2px -2px rgba(0, 0, 0, 0.2), 0 1px 6px 1px rgba(0, 0, 0, 0.4);\n}\n.psi .btn:active:after {\n  transition-duration: 0.1s;\n  opacity: 0.2;\n}\n.psi .btn:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  transform: rotate(-19deg) translateY(-1.3em) scale(1.08);\n  filter: blur(1px);\n  -webkit-filter: blur(1px);\n  background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.18) 10%, rgba(255, 255, 255, 0) 45%);\n  opacity: 0.6;\n  transition: opacity 0.25s;\n}\n.psi .btn-primary {\n  color: #52C11F;\n  border-color: #0f1013;\n  text-shadow: 0 0 16px rgba(82, 193, 31, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-primary:hover {\n  text-shadow: 0 0 16px rgba(82, 193, 31, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-primary:active {\n  text-shadow: 0 0 16px rgba(82, 193, 31, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1);\n  color: #3f9518;\n}\n.psi .btn-secondary {\n  color: #0B44EF;\n  border-color: #0f1013;\n  text-shadow: 0 0 16px rgba(11, 68, 239, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-secondary:hover {\n  text-shadow: 0 0 16px rgba(11, 68, 239, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-secondary:active {\n  text-shadow: 0 0 16px rgba(11, 68, 239, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1);\n  color: #0936be;\n}\n.psi .btn-tertiary {\n  color: #FF006A;\n  border-color: #0f1013;\n  text-shadow: 0 0 16px rgba(255, 0, 106, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-tertiary:hover {\n  text-shadow: 0 0 16px rgba(255, 0, 106, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-tertiary:active {\n  text-shadow: 0 0 16px rgba(255, 0, 106, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1);\n  color: #cc0055;\n}\n.psi .btn-tetrary {\n  color: #991BE2;\n  border-color: #0f1013;\n  text-shadow: 0 0 16px rgba(153, 27, 226, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-tetrary:hover {\n  text-shadow: 0 0 16px rgba(153, 27, 226, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-tetrary:active {\n  text-shadow: 0 0 16px rgba(153, 27, 226, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1);\n  color: #7a16b4;\n}\n.psi .btn-black {\n  color: #6D6F7F;\n  border-color: #0f1013;\n  text-shadow: 0 0 16px rgba(37, 39, 48, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-black:hover {\n  text-shadow: 0 0 16px rgba(37, 39, 48, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-black:active {\n  text-shadow: 0 0 16px rgba(37, 39, 48, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1);\n  color: #555764;\n}\n.psi .btn-dark {\n  color: #6D6F7F;\n  border-color: #0f1013;\n  text-shadow: 0 0 16px rgba(63, 67, 81, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-dark:hover {\n  text-shadow: 0 0 16px rgba(63, 67, 81, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-dark:active {\n  text-shadow: 0 0 16px rgba(63, 67, 81, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1);\n  color: #555764;\n}\n.psi .btn-gray {\n  color: #CED0DB;\n  border-color: #0f1013;\n  text-shadow: 0 0 16px rgba(109, 111, 127, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-gray:hover {\n  text-shadow: 0 0 16px rgba(109, 111, 127, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-gray:active {\n  text-shadow: 0 0 16px rgba(109, 111, 127, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1);\n  color: #b1b4c5;\n}\n.psi .btn-light {\n  color: #E6EAEF;\n  border-color: #0f1013;\n  text-shadow: 0 0 16px rgba(230, 234, 239, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-light:hover {\n  text-shadow: 0 0 16px rgba(230, 234, 239, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.9);\n}\n.psi .btn-light:active {\n  text-shadow: 0 0 16px rgba(230, 234, 239, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1);\n  color: #c7d0db;\n}\n\n.omega .btn {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: 1.42;\n  padding: 0.8em 1.6em;\n  font-weight: normal;\n  border-width: 2px;\n  border-style: solid;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  font-family: \"Booster Next FY\", \"Avenir Next\", Avenir, sans-serif;\n  user-select: none;\n  vertical-align: bottom;\n  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n  color: #3F4351;\n  border-color: #3F4351;\n  position: relative;\n}\n.omega .btn.btn-disabled {\n  cursor: not-allowed;\n  opacity: 0.8;\n}\n.omega .btn.btn-disabled:active {\n  opacity: 0.6;\n}\n.omega .btn:hover:before {\n  transform: scale(0.85, 1.1) translate(8%, -15%);\n}\n.omega .btn:active:before {\n  transition-duration: 0.15s;\n  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  transform: scale(1.04, 1.1) translate(6%, 3%);\n}\n.omega .btn:before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  transform: scale(0.4, 0.15) translate(12%, -20%);\n  transform-origin: -5% -5%;\n  transition: transform 0.3s, background-color 0.3s;\n  z-index: -1;\n}\n.omega .btn-primary:hover {\n  color: #E6EAEF;\n}\n.omega .btn-primary:before {\n  background-color: #52C11F;\n}\n.omega .btn-secondary:hover {\n  color: #E6EAEF;\n}\n.omega .btn-secondary:before {\n  background-color: #0B44EF;\n}\n.omega .btn-tertiary:hover {\n  color: #E6EAEF;\n}\n.omega .btn-tertiary:before {\n  background-color: #FF006A;\n}\n.omega .btn-tetrary:hover {\n  color: #E6EAEF;\n}\n.omega .btn-tetrary:before {\n  background-color: #991BE2;\n}\n.omega .btn-black:hover {\n  color: #E6EAEF;\n}\n.omega .btn-black:before {\n  background-color: #252730;\n}\n.omega .btn-dark:hover {\n  color: #E6EAEF;\n}\n.omega .btn-dark:before {\n  background-color: #3F4351;\n}\n.omega .btn-gray:hover {\n  color: #E6EAEF;\n}\n.omega .btn-gray:before {\n  background-color: #6D6F7F;\n}\n.omega .btn-light:hover {\n  color: #252730;\n}\n.omega .btn-light:before {\n  background-color: #E6EAEF;\n}\n\n.btn-sm {\n  font-size: 0.85em !important;\n}\n\n.btn-md {\n  font-size: 1.2em !important;\n}\n\n.btn-lg {\n  font-size: 1.6em !important;\n}"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"buttons\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Collection of CSS buttons\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"dev\": \"grunt dev\",\n    \"build\": \"grunt\",\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"keywords\": [\n    \"buttons\",\n    \"css\"\n  ],\n  \"author\": \"loup-brun\",\n  \"license\": \"MIT\",\n  \"devDependencies\": {\n    \"autoprefixer\": \"^6.3.6\",\n    \"grunt\": \"^1.0.3\",\n    \"grunt-contrib-watch\": \"^1.1.0\",\n    \"grunt-dart-sass\": \"^1.1.3\",\n    \"grunt-postcss\": \"^0.9.0\"\n  }\n}\n"
  },
  {
    "path": "scss/_buttons.scss",
    "content": "// Buttons\n// --------------------------------------------------------------------\n\n@import 'buttons/variables.buttons';\n\n// Collection alpha\n.alpha {\n  @import 'buttons/alpha';\n}\n\n// Collection beta\n.beta {\n  @import 'buttons/beta';\n}\n\n// Collection gamma\n.gamma {\n  @import 'buttons/gamma';\n}\n\n// Collection delta\n.delta {\n  @import 'buttons/delta';\n}\n\n// Collection epsilon\n.epsilon {\n  @import 'buttons/epsilon';\n}\n\n// Collection zeta\n.zeta {\n  @import 'buttons/zeta';\n}\n\n// Collection eta\n.eta {\n  @import 'buttons/eta';\n}\n\n// Collection theta\n.theta {\n  @import 'buttons/theta';\n}\n\n// Collection iota\n.iota {\n  @import 'buttons/iota';\n}\n\n// Collection kappa\n.kappa {\n  @import 'buttons/kappa';\n}\n\n// Collection lambda\n.lambda {\n  @import 'buttons/lambda';\n}\n\n// Collection mu\n.mu {\n  @import 'buttons/mu';\n}\n\n// Collection nu\n.nu {\n  @import 'buttons/nu';\n}\n\n// Collection xi\n.xi {\n  @import 'buttons/xi';\n}\n\n// Collection omicron\n.omicron {\n  @import 'buttons/omicron';\n}\n\n// Collection pi\n.pi {\n  @import 'buttons/pi';\n}\n\n// Collection rho\n.rho {\n  @import 'buttons/rho';\n}\n\n// Collection sigma\n.sigma {\n  @import 'buttons/sigma';\n}\n\n// Collection tau\n.tau {\n  @import 'buttons/tau';\n}\n\n// Collection upsilon\n.upsilon {\n  @import 'buttons/upsilon';\n}\n\n// Collection phi\n.phi {\n  @import 'buttons/phi';\n}\n\n// Collection chi\n.chi {\n  @import 'buttons/chi';\n}\n\n// Collection psi\n.psi {\n  @import 'buttons/psi';\n}\n\n// Collection omega\n.omega {\n  @import 'buttons/omega';\n}\n\n\n\n// - - -\n\n// Additional button modifiers\n.btn-sm {\n  font-size: 0.85em !important;\n}\n\n.btn-md {\n  font-size: 1.2em !important;\n}\n\n.btn-lg {\n  font-size: 1.6em !important;\n}"
  },
  {
    "path": "scss/_fonts.scss",
    "content": "@import \"https://assets.loupbrun.ca/fonts/booster/stylesheet.css\"\n"
  },
  {
    "path": "scss/_global.scss",
    "content": "// Global styles\n// --------------------------------------------------------------------\n\nbody {\n  font-family: $font-family;\n  line-height: $line-height;\n  padding: 0;\n  margin: 0;\n  //background-color: $gray-lighter;\n}\n\nbutton, a {\n  outline: none;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na {\n  text-decoration: none;\n  padding-bottom: 2px;\n  border-bottom: 1px solid $color-primary;\n  color: $color-primary;\n  transition: border-color 0.2s;\n  \n  &:hover {\n    border-color: transparent;\n  }\n}\n\nsection {\n  padding: 10% 1%;\n  color: $gray;\n}\n\n.container {\n  @include h-padding(2%);\n  max-width: 700px;\n  margin: 0 auto;\n}\n\nhr {\n  border-top: 1px solid rgba(0,0,0,0.2);\n  border-bottom: 1px solid rgba(255,255,255,0.2);\n  border-left: 0;\n  border-right: 0;\n  margin-top: 25px;\n  margin-bottom: 25px;\n}\n\n.main-header {\n  text-align: center;\n  color: #aab;\n  margin: 0;\n  padding: 40px 0;\n  background-image:\n    linear-gradient(20deg, rgba(0,0,0,0) 84%, rgba($color-secondary, 0.9) 84.1%),\n    linear-gradient(120deg, rgba(0,0,0,0) 85%, rgba($color-primary, 0.9) 85.1%),\n    linear-gradient(-75deg, rgba(0,0,0,0) 88%, rgba($color-tertiary, 0.9) 88.1%),\n    linear-gradient(-140deg, rgba(0,0,0,0) 87%, rgba($color-tetrary, 0.9) 87.1%)\n    \n    ;\n  \n  background-blend-mode: multiply;\n}\n\n.main-footer {\n  background-color: $color-secondary;\n  background-image: linear-gradient(-45deg, $color-secondary, lighten(adjust-hue($color-secondary, -16%), 4%));\n  @include v-padding(16%);\n  \n  color: lighten($color-secondary, 40%);\n}\n\n\n// Headings\n\nh1, h2, h3, h4, h5, h6 {\n  font-family: $font-family-heading;\n  margin: 0.3em 0 0.1em;\n  font-weight: 100;\n}\n\nh1 {\n  font-size: 4em;\n  font-weight: 100;\n}\n\nh2 {\n  font-size: 3em;\n}\n\nh3 {\n  font-size: 2.2em;\n}\n\nh4 {\n  font-size: 1.8em;\n}\n\nh5 {\n  font-size: 1.3em;\n}\n\nh6 {\n  font-size: 1em;\n}\n\n.description {\n  margin: 0 0 1em;\n}"
  },
  {
    "path": "scss/_mixins.scss",
    "content": "// Mixins\n// --------------------------------------------------------------------\n\n// Functions\n@function check-background($color) {\n  @if (lightness($color) > 66) {\n    @return $gray-darker; // Lighter background, return dark color\n  } @else {\n    @return $gray-lighter; // Darker background, return light color\n  }\n}\n\n@mixin v-padding($padding-top, $padding-bottom: $padding-top) {\n  padding-top: $padding-top;\n  padding-bottom: $padding-bottom;\n}\n\n@mixin h-padding($padding-left, $padding-right: $padding-left) {\n  padding-left: $padding-left;\n  padding-right: $padding-right;\n}\n\n@mixin btn-common($v-spacing, $h-spacing: $v-spacing, $border-radius: 0, $border-width: 0) {\n  display: inline-block;\n  margin: 6px;\n  font-size: inherit;\n  line-height: $line-height;\n  padding: $v-spacing $h-spacing;\n  font-weight: normal;\n  border-width: $border-width;\n  border-style: solid;\n  background: transparent;\n  border-radius: $border-radius;\n  cursor: pointer;\n  font-family: $font-family;\n  user-select: none;\n  vertical-align: bottom;\n\n  &.btn-disabled {\n    cursor: not-allowed;\n    opacity: 0.8;\n    \n    &:active {\n      opacity: 0.6;\n    }\n  }\n}"
  },
  {
    "path": "scss/_variables.scss",
    "content": "// Variables\n// --------------------------------------------------------------------\n\n// Colors\n$color-primary:                   #52C11F;\n$color-secondary:                 #0B44EF;\n$color-tertiary:                  #FF006A;\n$color-tetrary:                   #991BE2;\n\n$gray-lighter:                    #E6EAEF;\n$gray-light:                      #CED0DB;\n$gray:                            #6D6F7F;\n$gray-dark:                       #3F4351;\n$gray-darker:                     #252730;\n\n$font-size:                       16px;\n$font-family:                     'Booster Next FY', 'Avenir Next', Avenir, sans-serif;\n$font-family-heading:             $font-family;\n$line-height:                     1.42;\n\n// Easings\n$ease-in-cubic:                   cubic-bezier(0.55, 0.055, 0.675, 0.19);\n$ease-out-cubic:                  cubic-bezier(0.215, 0.61, 0.355, 1);\n$ease-in-out-cubic:               cubic-bezier(0.645, 0.045, 0.355, 1);\n$ease-in-out-expo:                cubic-bezier(1, 0, 0, 1);\n$ease-out-back:                   cubic-bezier(0.175, 0.885, 0.32, 1.275);\n$ease-out-quint:                  cubic-bezier(.23,1,.32,1);"
  },
  {
    "path": "scss/buttons/_alpha.scss",
    "content": "// Buttons - ALPHA\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-alpha($color, $text-color: check-background($color)) {\n  box-shadow:\n    0 3px 0 0 darken($color, 15%), // primary 3d effect\n    0 4px 4px -1px rgba(0,0,0,0.6), // mellow drop shadow\n    0 4px 6px 1px rgba(0,0,0,0.3), // drop shadow spread\n    0 1px 2px 1px rgba(0,0,0,0) inset, // dark inner shadow\n    0 18px 32px -2px rgba(255,255,255,0.1) inset; // bright inner shadow\n  background-color: $color;\n  background-image: linear-gradient(-45deg, $color, saturate(adjust-hue($color, -15%), 10%));\n  color: $text-color;\n\n  &:hover {\n    box-shadow:\n      0 3px 0 0 darken($color, 15%), // primary 3d effect\n      0 6px 4px -1px rgba(0,0,0,0.3), // mellow drop shadow\n      0 4px 16px rgba(0,0,0,0.5),// drop shadow spread\n      0 1px 2px 1px rgba(0,0,0,0) inset, // dark inner shadow\n      0 18px 32px -2px rgba(255,255,255,0.14) inset; // bright inner shadow\n  }\n\n  &:active { \n    box-shadow:\n      0 0px 0 0 darken($color, 20%), // primary 3d effect\n      0 3px 0 0 rgba(0,0,0,0), // mellow drop shadow\n      0 4px 16px rgba(0,0,0,0.0),// drop shadow spread\n      0 1px 2px 1px rgba(0,0,0,0.5) inset, // dark inner shadow\n      0 -18px 32px -2px rgba(255,255,255,0.1) inset; // bright inner shadow\n    ;\n    transition: 0s;\n\n    color: darken($color, 15%);\n    text-shadow:\n      0 1px 0 rgba(255,255,255,0.3);\n  }\n}\n\n.btn {\n  @include btn-common($alpha-v-spacing, $alpha-h-spacing, $alpha-border-radius);\n  transition: box-shadow 0.2s, transform 0.2s, color 0.2s;\n\n  &:hover {\n    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);\n  }\n\n  &:active {\n    transform: translateY(3px);\n  }\n}\n\n.btn-primary { @include btn-alpha($color-primary); }\n.btn-secondary { @include btn-alpha($color-secondary); }\n.btn-tertiary { @include btn-alpha($color-tertiary); }\n.btn-tetrary { @include btn-alpha($color-tetrary); }\n\n.btn-black { @include btn-alpha($gray-darker); }\n.btn-dark { @include btn-alpha($gray-dark); }\n.btn-gray { @include btn-alpha($gray); }\n.btn-light { @include btn-alpha($gray-lighter); }"
  },
  {
    "path": "scss/buttons/_beta.scss",
    "content": "// Buttons - BETA\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-beta($color, $text-color: check-background($color)) {\n  background-color: $color;\n  background-image: linear-gradient(0deg, darken($color, 10%), lighten($color, 10%));\n  color: $text-color;\n  border-color: darken($color, 10%);\n  text-shadow: 0 1px 1px darken($color, 20%);\n\n  &:hover {\n    background-image: linear-gradient(0deg, darken($color, 10%), $color);\n  }\n\n  &:active {\n    background-color: darken($color, 5%);\n    background-image: linear-gradient(180deg, darken($color, 12%), darken($color, 10%));\n    color: darken($color, 25%);\n    text-shadow: 0 1px 1px lighten($color, 10%);\n    transition: 0s;\n  }\n\n  &:focus {\n    border-color: darken($color, 20%);\n  }\n}\n\n.btn {\n  @include btn-common($beta-v-spacing, $beta-h-spacing, $beta-border-radius, $beta-border-width);\n  border-style: solid;\n}\n\n\n.btn-primary { @include btn-beta($color-primary); }\n.btn-secondary { @include btn-beta($color-secondary); }\n.btn-tertiary { @include btn-beta($color-tertiary); }\n.btn-tetrary { @include btn-beta($color-tetrary); }\n\n.btn-black { @include btn-beta($gray-darker); }\n.btn-dark { @include btn-beta($gray-dark); }\n.btn-gray { @include btn-beta($gray); }\n.btn-light { @include btn-beta($gray-lighter); }"
  },
  {
    "path": "scss/buttons/_chi.scss",
    "content": "// Buttons - CHI\n// --------------------------------------------------------------------\n\n// Michin\n@mixin btn-chi($color, $text-color: check-background($color)) {\n  color: $color;\n  border-color: $color;\n\n\n  &:hover {\n    color: $text-color;\n  }\n\n  &:active {\n\n  }\n\n  &:before {\n    background-color: $color;\n  }\n\n  &:after {\n    border-color: $color;\n  }\n\n}\n\n.btn {\n  $offset: 6px;\n  @include btn-common($chi-v-spacing, $chi-h-spacing, $chi-border-radius, $chi-border-width);\n  position: relative;\n  transition: color 0.4s, transform 0.4s $ease-in-out-cubic;\n  box-sizing: border-box;\n\n  &:hover {\n\n    &:before {\n      transform: scaleY(1);\n    }\n\n    &:after {\n      transform: translate($offset, $offset);\n    }\n  }\n\n  &:active {\n    transition-duration: 0.05s;\n    transform: translate($offset, $offset);\n\n    &:after {\n      transition-duration: 0.05s;\n      transform: translate(0, 0);\n    }\n  }\n\n  &:before, &:after {\n    content: '';\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    z-index: -1;\n  }\n\n  &:before {\n    transform-origin: top center;\n    transform: scaleY(0);\n    transition: transform $ease-in-out-expo 0.4s;\n  }\n\n  &:after {\n    top: 0-$chi-border-width;\n    left: 0-$chi-border-width;\n    border-width: $chi-border-width;\n    border-style: solid;\n    transition: transform $ease-in-out-cubic 0.4s;\n  }\n\n}\n\n.btn-primary { @include btn-chi($color-primary); }\n.btn-secondary { @include btn-chi($color-secondary); }\n.btn-tertiary { @include btn-chi($color-tertiary); }\n.btn-tetrary { @include btn-chi($color-tetrary); }\n\n.btn-black { @include btn-chi($gray-darker); }\n.btn-dark { @include btn-chi($gray-dark); }\n.btn-gray { @include btn-chi($gray); }\n.btn-light { @include btn-chi($gray-lighter, darken($gray-lighter, 45%)); }"
  },
  {
    "path": "scss/buttons/_delta.scss",
    "content": "// Buttons - delta\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-delta($color, $text-color: check-background($color)) {\n  background-color: $color;\n  background-image: linear-gradient(-45deg, $color, saturate(adjust-hue($color, -15%), 10%));\n  color: $text-color;\n  border-top-color: lighten($color, 20%);\n  border-left-color: lighten($color, 6%);\n  border-right-color: lighten($color, 6%);\n  border-bottom-color: darken($color, 20%);\n\n  &:hover {\n    background-image: linear-gradient(-45deg, lighten($color, 2%), lighten(saturate(adjust-hue($color, -15%), 10%), 2%));\n  }\n\n  &:active {\n    color: darken($color, 20%);\n    text-shadow: 0 1px 0 rgba(255,255,255,0.2);\n    background-color: darken($color, 2%);\n    background-image: linear-gradient(-45deg, darken($color, 2%), darken(saturate(adjust-hue($color, -15%), 10%), 2%));\n\n    border-top-color: darken($color, 20%);\n    border-left-color: darken($color, 6%);\n    border-right-color: darken($color, 6%);\n    border-bottom-color: darken($color, 6%);\n  }\n}\n\n.btn {\n  @include btn-common($delta-v-spacing, $delta-h-spacing, $delta-border-radius, $delta-border-width);\n  background-color: transparent;\n  border-width: $delta-border-width;\n  border-style: solid;\n  box-shadow:\n    0 ((1em * $line-height ) /2 + $delta-v-spacing)  0 0 rgba(255,255,255,0.1) inset;\n  transition: box-shadow 0.3s $ease-out-cubic, border-color 0.3s $ease-out-cubic;\n\n  &:active {\n    box-shadow:\n      0 ((1em * $line-height ) /2 + $delta-v-spacing) 0.2em 0 rgba(0,0,0,0.08) inset;\n    transition: box-shadow 0.1s;\n  }\n}\n\n.btn-primary { @include btn-delta($color-primary); }\n.btn-secondary { @include btn-delta($color-secondary); }\n.btn-tertiary { @include btn-delta($color-tertiary); }\n.btn-tetrary { @include btn-delta($color-tetrary); }\n\n.btn-black { @include btn-delta($gray-darker); }\n.btn-dark { @include btn-delta($gray-dark); }\n.btn-gray { @include btn-delta($gray); }\n.btn-light { @include btn-delta($gray-lighter); }"
  },
  {
    "path": "scss/buttons/_epsilon.scss",
    "content": "// Buttons - EPSILON\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-epsilon($color, $text-color: check-background($color)) {\n  background-color: $color;\n  background-image: linear-gradient(0deg, darken($color, 8%), $color, lighten($color, 5%));\n  color: $text-color;\n  box-shadow:\n    0 2px 0 0 darken($color, 20%), // 3d effect\n    0 ((1em * $line-height) / 2 + $epsilon-v-spacing) 2em 0 rgba(255,255,255,0) inset, // top glow\n      0 2px 1px 0 rgba(255,255,255,0.1) inset, // top light accent\n    0 2px 3px 1px rgba(0,0,0,0.4), // drop shadow spread\n    0 0 12px 1px rgba($color, 0.5), // color glow\n    0 2px 1px -1px rgba(0,0,0,0) inset; // inner dark shadow\n\n  &:hover {\n    box-shadow:\n      0 2px 0 0 darken($color, 20%), // 3d effect\n      0 ((1em * $line-height) / 2 + $epsilon-v-spacing) 1em 0 rgba(255,255,255,0.05) inset, // top glow\n      0 2px 1px 0 rgba(255,255,255,0.15) inset, // top light accent\n      0 2px 3px 1px rgba(0,0,0,0.6), // drop shadow spread\n      0 0 10px 1px rgba($color, 0.4), // color glow\n      0 2px 1px -1px rgba(0,0,0,0) inset; // inner dark shadow\n  }\n\n  &:active {\n    background-color: darken($color, 5%);\n    background-image: linear-gradient(180deg, darken($color, 10%), darken($color, 4%));\n    color: darken($color, 20%);\n    transition: 0s;\n    box-shadow:\n      0 0px 0 0 darken($color, 25%), // 3d effect\n      0 ((1em * $line-height) / 2 + $epsilon-v-spacing) 1em 0 rgba(255,255,255,0.05) inset, // top glow\n      0 2px 2px 0 rgba(255,255,255,0.0) inset, // top light accent\n      0 1px 4px 0px rgba(0,0,0,0), // drop shadow spread\n      0 0 10px 1px rgba($color, 0.1), // color glow\n      0 2px 2px -1px rgba(0,0,0,0.7) inset; // inner dark shadow\n    text-shadow: 0 1px 0 rgba(255,255,255,0.2);\n  }\n}\n\n.btn {\n  @include btn-common($epsilon-v-spacing, $epsilon-h-spacing, $epsilon-border-radius);\n  transition: box-shadow 0.15s, transform 0.15s, color 0.15s;\n\n  &:active {\n    transform: translateY(2px);\n  }\n}\n\n\n.btn-primary { @include btn-epsilon($color-primary); }\n.btn-secondary { @include btn-epsilon($color-secondary); }\n.btn-tertiary { @include btn-epsilon($color-tertiary); }\n.btn-tetrary { @include btn-epsilon($color-tetrary); }\n\n.btn-black { @include btn-epsilon($gray-darker); }\n.btn-dark { @include btn-epsilon($gray-dark); }\n.btn-gray { @include btn-epsilon($gray); }\n.btn-light { @include btn-epsilon($gray-lighter); }\n"
  },
  {
    "path": "scss/buttons/_eta.scss",
    "content": "// Buttons - ETA\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-eta($color, $text-color: check-background($color)) {\n  background-color: $color;\n  color: $text-color;\n  border-color: darken($color, 8%);\n  border-bottom-color: darken($color, 16%);\n\n  box-shadow:\n    0 1px 1px -1px rgba(255,255,255,0.9) inset, // top light accent\n    0 40px 20px -20px rgba(255,255,255,0.15) inset, // top inner light\n    0 -1px 1px -1px rgba(0,0,0,0.7) inset, // bottom shade accent\n    0 -40px 20px -20px rgba(0,0,0,0.06) inset, // top inner light\n    0 9px 8px -4px rgba(0,0,0,0.4), // bottom drop shadow\n    0 2px 1px -1px rgba(0,0,0,0.3), // bottom drop shadow hard\n    7px 7px 8px -4px rgba(0,0,0,0.1), // bottom right drop shadow\n    -7px 7px 8px -4px rgba(0,0,0,0.1), // bottom left drop shadow\n    0 -4px 12px 2px rgba(lighten($color, 5%), 0.2) // outer glow\n    ;\n\n  &:hover {\n    background-color: lighten($color, 4%);\n  }\n\n  &:active {\n\n    box-shadow:\n      0 -1px 1px -1px rgba(255,255,255,0.4) inset, // top light accent\n      0 -40px 20px -20px rgba(255,255,255,0.1) inset, // top inner light\n      0 1px 1px -1px rgba(0,0,0,0.7) inset, // bottom shade accent\n      0 40px 20px -20px rgba(0,0,0,0.06) inset, // top inner light\n      0 7px 8px -4px rgba(0,0,0,0.4), // bottom drop shadow\n      0 2px 1px -1px rgba(0,0,0,0.2), // bottom drop shadow hard\n      7px 7px 8px -4px rgba(0,0,0,0.05), // bottom right drop shadow\n      -7px 7px 8px -4px rgba(0,0,0,0.05), // bottom left drop shadow\n      0 -4px 12px 2px rgba(lighten($color, 5%), 0.1) // outer glow\n      ;\n\n    background-color: darken($color, 4%);\n    color: darken($color, 18%);\n  }\n}\n\n.btn {\n  @include btn-common($eta-v-spacing, $eta-h-spacing, $eta-border-radius, $eta-border-width);\n  position: relative;\n  overflow: hidden;\n  text-shadow: 0 -1px 0 rgba(0,0,0,0.2);\n  transition: box-shadow 0.4s $ease-out-quint;\n\n  &:active {\n  text-shadow: 0 1px 0 rgba(255,255,255,0.2);\n  transition-duration: 0.2s;\n\n    &:after {\n      background-image: linear-gradient(-90deg, rgba(255,255,255,0.02) 20%, rgba(255,255,255,0.0));\n    }\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    transform: rotate(-19deg) translateY(-1.3em) scale(1.05);\n    filter: blur(1px);\n    background-image: linear-gradient(-90deg, rgba(255,255,255,0.12) 20%, rgba(255,255,255,0.0));\n  }\n}\n\n.btn-primary { @include btn-eta($color-primary); }\n.btn-secondary { @include btn-eta($color-secondary); }\n.btn-tertiary { @include btn-eta($color-tertiary); }\n.btn-tetrary { @include btn-eta($color-tetrary); }\n\n.btn-black { @include btn-eta($gray-darker); }\n.btn-dark { @include btn-eta($gray-dark); }\n.btn-gray { @include btn-eta($gray); }\n.btn-light { @include btn-eta($gray-lighter); }"
  },
  {
    "path": "scss/buttons/_gamma.scss",
    "content": "// Buttons - GAMMA\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-gamma($color, $text-color: check-background($color)) {\n  color: $text-color;\n  background-color: $color;\n  background-image: linear-gradient(0deg, $color, lighten($color, 4%));\n  border-color: darken($color, 10%);\n\n  &:hover {\n    background-color: darken($color, 4%);\n    background-image: linear-gradient(0deg, darken($color, 4%), $color);\n  }\n\n  &:active {\n    background-color: darken($color, 6%);\n    background-image: linear-gradient(0deg, darken($color, 7%), darken($color, 3%));\n    box-shadow:\n      0 1px 3px -1px rgba(0,0,0,0.4) inset\n      ;\n  }\n}\n\n.btn {\n  @include btn-common($gamma-v-spacing, $gamma-h-spacing, $gamma-border-radius, $gamma-border-width);\n  box-shadow:\n    0 1px 1px 0 rgba(255,255,255,0.2) inset\n    ;\n}\n\n.btn-primary { @include btn-gamma($color-primary); }\n.btn-secondary { @include btn-gamma($color-secondary); }\n.btn-tertiary { @include btn-gamma($color-tertiary); }\n.btn-tetrary { @include btn-gamma($color-tetrary); }\n\n.btn-black { @include btn-gamma($gray-darker); }\n.btn-dark { @include btn-gamma($gray-dark); }\n.btn-gray { @include btn-gamma($gray); }\n.btn-light { @include btn-gamma($gray-lighter); }"
  },
  {
    "path": "scss/buttons/_iota.scss",
    "content": "// Buttons - IOTA\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-iota($color, $text-color: $color) {\n  color: $text-color;\n  border-color: $color;\n  &:hover {\n    color: check-background($color);\n    background-color: $color;\n  }\n\n  &:active {\n    background-color: darken($color, 3%);\n    \n    &:after {\n      background-color: darken($color, 3%);\n    }\n  }\n\n  &:after {\n    background-color: $color;\n  }\n}\n\n.btn {\n  @include btn-common($iota-v-spacing, $iota-h-spacing, $iota-border-radius, $iota-border-width);\n  position: relative;\n  border-style: solid;\n  overflow: hidden;\n  transition: background-color 0.3s, color 0.3s;\n\n\n  &:hover {\n    &:after {\n      transform: scaleX(1);\n      opacity: 1;\n      transition: transform 0.3s, opacity 0.3s;\n    }\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    z-index: -1;\n    border-radius: $iota-border-radius;\n    transform: scaleX(0.7);\n    opacity: 0;\n    transition: transform 0.8s, opacity 0.3s;\n  }\n}\n\n.btn-primary { @include btn-iota($color-primary); }\n.btn-secondary { @include btn-iota($color-secondary); }\n.btn-tertiary { @include btn-iota($color-tertiary); }\n.btn-tetrary { @include btn-iota($color-tetrary); }\n\n.btn-black { @include btn-iota($gray-darker); }\n.btn-dark { @include btn-iota($gray-dark); }\n.btn-gray { @include btn-iota($gray); }\n.btn-light { @include btn-iota($gray-lighter); }"
  },
  {
    "path": "scss/buttons/_kappa.scss",
    "content": "// Buttons - KAPPA\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-kappa($color, $text-color: check-background($color)) {\n  background-color: $color;\n  color: darken($color, 18%);\n\n  box-shadow:\n    0 4px 8px -1px rgba(0, 0, 0, 0.5), // lower shadow\n    inset 0 -2px 5px -1px rgba(darken($color, 15%), 0.6), // bottom 3d effect\n    0 -3px 12px -1px rgba(lighten($color, 15%), 0.6), // top outer glow\n    inset 0 3px 4px -1px rgba(lighten($color, 15%), 0.3), // top inner light\n    inset 0 0 4px 1px rgba(lighten($color, 20%), 0.8), // all-around bevel\n    inset 0 1.1em 1.4em 0 rgba(lighten($color, 15%), 0.5); // bigger top glow\n\n  &:active {\n    color: darken($color, 24%);\n    box-shadow:\n      0 3px 6px -1px rgba(0, 0, 0, 0.4), // lower shadow\n      inset 0 -4px 16px 0 rgba(lighten($color, 15%), 0.9), // bottom 3d effect\n      0 -3px 12px -1px rgba(lighten($color, 15%), 0.6), // top outer glow\n      inset 0 4px 12px 0 rgba(darken($color, 15%), 0.5), // top inner light\n      inset 0 0 4px 1px rgba(lighten($color, 20%), 0.8); // all-around bevel\n  }\n}\n\n.btn {\n  @include btn-common($kappa-v-spacing, $kappa-h-spacing, $kappa-border-radius, $kappa-border-width);\n  text-shadow: 0 1px 0 rgba(255,255,255,0.1);\n\n  transition: box-shadow 0.4s $ease-out-quint, transform 0.4s $ease-out-quint;\n  &:active { \n    transition-duration: 0.2s;\n    transform: scale(0.98);\n  }\n}\n\n.btn-primary { @include btn-kappa($color-primary); }\n.btn-secondary { @include btn-kappa($color-secondary); }\n.btn-tertiary { @include btn-kappa($color-tertiary); }\n.btn-tetrary { @include btn-kappa($color-tetrary); }\n\n.btn-black { @include btn-kappa($gray-darker); }\n.btn-dark { @include btn-kappa($gray-dark); }\n.btn-gray { @include btn-kappa($gray); }\n.btn-light { @include btn-kappa($gray-lighter); }"
  },
  {
    "path": "scss/buttons/_lambda.scss",
    "content": "// Buttons - LAMBDA\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-lambda($color, $text-color: check-background($color)) {\n  background-color: $color;\n  color: $text-color;\n  border-color: darken($color, 8%);\n\n  &:hover {\n    background-color: lighten($color, 1%);\n  }\n\n  &:active {\n    background-color: darken($color, 2%);\n\n  }\n}\n\n.btn {\n  @include btn-common($lambda-v-spacing, $lambda-h-spacing, $lambda-border-radius, $lambda-border-width);\n  text-shadow: 0 1px 0 rgba(255,255,255,0.1);\n  box-shadow:\n    0 1px 4px -1px rgba(255,255,255,0.4) inset, // top protrusion\n\n    0 6px 12px 1px rgba(0,0,0,0.15), // bottom large spread\n    0 6px 2px 1px rgba(0,0,0,0.1), // bottom solid shade\n    6px 6px 12px 1px rgba(0,0,0,0.05), // right large spread\n    -6px 6px 12px 1px rgba(0,0,0,0.05), // left large spread\n    4px 4px 2px 1px rgba(0,0,0,0.07), // bottom right solid shade\n    -4px 4px 2px 1px rgba(0,0,0,0.07), // bottom left solid shade\n    6px 0 2px 1px rgba(255,255,255,0.4), // right solid shade\n    -6px 0 2px 1px rgba(255,255,255,0.4), // left solid shade\n    6px 0 2px 1px rgba(0,0,0,0.1), // right solid shade\n    -6px 0 2px 1px rgba(0,0,0,0.1), // left solid shade\n    4px -4px 2px 1px rgba(255,255,255,0.8), // top left solid shade\n    -4px -4px 2px 1px rgba(255,255,255,0.8), // top left solid shade\n    0 -6px 12px 1px rgba(255,255,255,0.9), // top large spread\n    0 -6px 2px 1px rgba(255,255,255,0.9), // top solid shade\n\n\n    0 0.6em 1em 0 rgba(0,0,0,0.08) inset,\n    0 -0.6em 1em rgba(255,255,255,0.08) inset\n    ;\n\n  transition: box-shadow 0.2s $ease-out-quint, transform 0.35s $ease-out-quint;\n  &:active {\n    box-shadow:\n      0 1px 4px -1px rgba(255,255,255,0.1) inset, // top protrusion\n\n      0 6px 12px 1px rgba(0,0,0,0.2), // bottom large spread\n      0 6px 2px 1px rgba(0,0,0,0.1), // bottom solid shade\n      6px 6px 12px 1px rgba(0,0,0,0.05), // right large spread\n      -6px 6px 12px 1px rgba(0,0,0,0.05), // left large spread\n      4px 4px 2px 1px rgba(0,0,0,0.07), // bottom right solid shade\n      -4px 4px 2px 1px rgba(0,0,0,0.07), // bottom left solid shade\n      6px 0 2px 1px rgba(255,255,255,0.4), // right solid shade\n      -6px 0 2px 1px rgba(255,255,255,0.4), // left solid shade\n      6px 0 2px 1px rgba(0,0,0,0.1), // right solid shade\n      -6px 0 2px 1px rgba(0,0,0,0.1), // left solid shade\n      4px -4px 2px 1px rgba(255,255,255,0.8), // top left solid shade\n      -4px -4px 2px 1px rgba(255,255,255,0.8), // top left solid shade\n      0 -6px 12px 1px rgba(255,255,255,0.9), // top large spread\n      0 -6px 2px 1px rgba(255,255,255,0.9), // top solid shade\n\n      0 0.6em 1em 0 rgba(0,0,0,0.15) inset,\n      0 -0.6em 1em rgba(255,255,255,0.15) inset\n  }\n}\n\n.btn-primary { @include btn-lambda($color-primary); }\n.btn-secondary { @include btn-lambda($color-secondary); }\n.btn-tertiary { @include btn-lambda($color-tertiary); }\n.btn-tetrary { @include btn-lambda($color-tetrary); }\n\n.btn-black { @include btn-lambda($gray-darker); }\n.btn-dark { @include btn-lambda($gray-dark); }\n.btn-gray { @include btn-lambda($gray); }\n.btn-light { @include btn-lambda($gray-lighter); }"
  },
  {
    "path": "scss/buttons/_mu.scss",
    "content": "// Buttons - MU\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-mu($color, $text-color: check-background($color)) {\n  color: $color;\n  border-color: $color;\n}\n\n.btn {\n  @include btn-common($mu-v-spacing, $mu-h-spacing, $mu-border-radius, $mu-border-width);\n}\n\n.btn-primary { @include btn-mu($color-primary); }\n.btn-secondary { @include btn-mu($color-secondary); }\n.btn-tertiary { @include btn-mu($color-tertiary); }\n.btn-tetrary { @include btn-mu($color-tetrary); }\n\n.btn-black { @include btn-mu($gray-darker); }\n.btn-dark { @include btn-mu($gray-dark); }\n.btn-gray { @include btn-mu($gray); }\n.btn-light { @include btn-mu($gray-lighter); }"
  },
  {
    "path": "scss/buttons/_nu.scss",
    "content": "// Buttons - NU\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-nu($color, $text-color: check-background($color)) {\n  color: $color;\n  border-color: $color;\n  &:hover {\n    background-color: $color;\n    color: $text-color;\n    @include h-padding($nu-h-spacing * 1.4);\n    border-radius: $nu-v-spacing / 2;\n  }\n\n  &:active {\n    background-color: darken($color, 3%);\n    border-color: darken($color, 3%);\n  }\n}\n\n.btn {\n  @include btn-common($nu-v-spacing, $nu-h-spacing, $nu-border-radius, $nu-border-width);\n  transition: background-color 0.2s, color 0.2s, padding 0.2s $ease-out-back, border-radius 0.2s;\n}\n\n.btn-primary { @include btn-nu($color-primary); }\n.btn-secondary { @include btn-nu($color-secondary); }\n.btn-tertiary { @include btn-nu($color-tertiary); }\n.btn-tetrary { @include btn-nu($color-tetrary); }\n\n.btn-black { @include btn-nu($gray-darker); }\n.btn-dark { @include btn-nu($gray-dark); }\n.btn-gray { @include btn-nu($gray); }\n.btn-light { @include btn-nu($gray-lighter); }"
  },
  {
    "path": "scss/buttons/_omega.scss",
    "content": "// Buttons - omega\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-omega($color, $text-color: check-background($color)) {\n\n  &:hover {\n    color: $text-color;\n  }\n  \n  &:before {\n    background-color: $color;\n  }\n}\n\n.btn {\n  $default-color: $gray-dark;\n  @include btn-common($omega-v-spacing, $omega-h-spacing, $omega-border-radius, $omega-border-width);\n  transition: transform 0.3s $ease-in-out-cubic;\n  color: $default-color;\n  border-color: $default-color;\n  position: relative;\n  \n  &:hover {\n    \n    &:before {\n      transform: scale(0.85, 1.1) translate(8%, -15%);\n    }\n  }\n\n  &:active {\n    \n    &:before {\n      transition-duration: 0.15s;\n      transition-timing-function: $ease-out-back;\n      transform: scale(1.04, 1.1) translate(6%, 3%);\n    }\n  }\n  \n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    transform: scale(0.4, 0.15) translate(12%, -20%);\n    transform-origin: -5% -5%;\n    transition: transform 0.3s, background-color 0.3s;\n    z-index: -1;\n  }\n}\n\n.btn-primary { @include btn-omega($color-primary); }\n.btn-secondary { @include btn-omega($color-secondary); }\n.btn-tertiary { @include btn-omega($color-tertiary); }\n.btn-tetrary { @include btn-omega($color-tetrary); }\n\n.btn-black { @include btn-omega($gray-darker); }\n.btn-dark { @include btn-omega($gray-dark); }\n.btn-gray { @include btn-omega($gray); }\n.btn-light { @include btn-omega($gray-lighter); }"
  },
  {
    "path": "scss/buttons/_omicron.scss",
    "content": "// Buttons - OMICRON\n// --------------------------------------------------------------------\n\n// Miomicronn\n@mixin btn-omicron($color, $text-color: rgba(darken($color, 25%), 0.8)) {\n\n  background-image: radial-gradient(ellipse at bottom center, lighten(saturate($color, 30%), 5%), $color);\n  background-color: $color;\n  color: $text-color;\n  border-color: darken($color, 10%);\n\n  &:hover {\n    background-image: radial-gradient(ellipse at bottom center, lighten(saturate($color, 30%), 12%), $color);\n  }\n\n  &:active {\n    background-image: radial-gradient(ellipse at bottom center, darken(saturate($color, 40%), 5%), $color);\n  }\n}\n\n.btn {\n  @include btn-common($omicron-v-spacing, $omicron-h-spacing, $omicron-border-radius, $omicron-border-width);\n  transition: box-shadow 0.15s, background-color 0.15s;\n\n  box-shadow:\n    0 0 1em 0 rgba(255,255,255,0.1) inset, // large inner shadow\n    0 2.2em 0 -1em rgba(255,255,255,0.2) inset, // \n    0 1.5em 1em -1em rgba(255,255,255,0.3) inset, // \n    0 0 4px 1px rgba(0,0,0,0.2) inset\n    ;\n\n  &:active {\n\n    box-shadow:\n      0 0 1em 0 rgba(0, 0, 0, 0.1) inset, // large inner shadow\n      0 2.2em 1em -1em rgba(255,255,255,0.05) inset, // \n      0 1.5em 1em -1em rgba(255,255,255,0.0) inset, //  \n      0 0 4px 1px rgba(0,0,0,0.2) inset\n      ;\n  }\n}\n\n.btn-primary { @include btn-omicron($color-primary); }\n.btn-secondary { @include btn-omicron($color-secondary); }\n.btn-tertiary { @include btn-omicron($color-tertiary); }\n.btn-tetrary { @include btn-omicron($color-tetrary); }\n\n.btn-black { @include btn-omicron($gray-darker); }\n.btn-dark { @include btn-omicron($gray-dark); }\n.btn-gray { @include btn-omicron($gray); }\n.btn-light { @include btn-omicron($gray-lighter, darken($gray-lighter, 45%)); }"
  },
  {
    "path": "scss/buttons/_phi.scss",
    "content": "// Buttons - PHI\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-phi($color, $text-color: check-background($color)) {\n  color: $color;\n  border-color: $color;\n\n  box-shadow:\n    6px 0 0 0 $color,\n    6px 6px 0 0 $color,\n    0 6px 0 0 $color\n    ;\n\n  &:hover {\n    box-shadow:\n      8px 0 0 0 $color,\n      8px 8px 0 0 $color,\n      0 8px 0 0 $color\n      ;\n  }\n\n  &:active {\n    background-color: $color;\n    color: $text-color;\n    box-shadow:\n      2px 0 0 0 $color,\n      2px 2px 0 0 $color,\n      0 2px 0 0 $color\n      ;\n  }\n}\n\n.btn {\n  @include btn-common($phi-v-spacing, $phi-h-spacing, $phi-border-radius, $phi-border-width);\n  transition: transform 0.3s $ease-out-back, box-shadow 0.3s, background-color 0.3s;\n  border-radius: 0.5em 0.6em / 0.6em 1em 3em 1em;\n  \n  &:hover {\n    transform: translate(-2px, -2px);\n  }\n\n  &:active {\n    transition-duration: 0.1s;\n    transform: translate(4px, 4px);\n  }\n\n}\n\n.btn-primary { @include btn-phi($color-primary); }\n.btn-secondary { @include btn-phi($color-secondary); }\n.btn-tertiary { @include btn-phi($color-tertiary); }\n.btn-tetrary { @include btn-phi($color-tetrary); }\n\n.btn-black { @include btn-phi($gray-darker); }\n.btn-dark { @include btn-phi($gray-dark); }\n.btn-gray { @include btn-phi($gray); }\n.btn-light { @include btn-phi($gray-lighter, darken($gray-lighter, 45%)); }"
  },
  {
    "path": "scss/buttons/_pi.scss",
    "content": "// Buttons - PI\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-pi($color, $text-color: $color) {\n\n  color: $text-color;\n}\n\n.btn {\n  @include btn-common($pi-v-spacing, $pi-h-spacing, $pi-border-radius, $pi-border-width);\n  transition: box-shadow 0.2s, transform 0.2s;\n  border-radius: 12% / 50%;\n\n  box-shadow:\n    0 0 0 1px rgba(0,0,0,0.1)\n    ;\n\n  &:hover {\n    transform: scale(1.02);\n    box-shadow:\n      0 1px 10px 1px rgba(0,0,0,0.2)\n      ;\n  }\n\n  &:active {\n    transform: scale(0.99);\n    box-shadow:\n      0 2px 6px 1px rgba(0,0,0,0.15) inset\n      ;\n    transition-duration: 0.05s;\n  }\n}\n\n.btn-primary { @include btn-pi($color-primary); }\n.btn-secondary { @include btn-pi($color-secondary); }\n.btn-tertiary { @include btn-pi($color-tertiary); }\n.btn-tetrary { @include btn-pi($color-tetrary); }\n\n.btn-black { @include btn-pi($gray-darker); }\n.btn-dark { @include btn-pi($gray-dark); }\n.btn-gray { @include btn-pi($gray); }\n.btn-light { @include btn-pi($gray-lighter, darken($gray-lighter, 45%)); }"
  },
  {
    "path": "scss/buttons/_psi.scss",
    "content": "// Buttons - PSI\n// --------------------------------------------------------------------\n\n$psi-box-distance: 6px;\n\n// Mixin\n@mixin btn-psi($color, $text-color: $color) {\n  color: $text-color;\n  border-color: darken($gray-darker, 10%);\n  text-shadow:\n    0 0 16px rgba($color, 0.5), // large color glow\n    0 -1px 0 rgba(0, 0, 0, 0.9) // 3d effect\n    ;\n\n  &:hover {\n    text-shadow:\n      0 0 16px rgba($color, 0.75), // large color glow\n      0 -1px 0 rgba(0, 0, 0, 0.9) // 3d effect\n      ;\n  }\n\n  &:active {\n    text-shadow: \n      0 0 16px rgba($color, 0.3), // large color glow\n      0 1px 0 rgba(255, 255, 255, 0.1) // 3d effect\n      ;\n    color: darken($text-color, 10%);\n  }\n\n}\n\n.btn {\n  @include btn-common($psi-v-spacing, $psi-h-spacing, $psi-border-radius, $psi-border-width);\n  position: relative;\n  background-color: $gray-darker;\n  transition: color 0.25s, box-shadow 0.25s;\n  overflow: hidden;\n\n  box-shadow:\n    0 1px 1px -1px rgba(255,255,255,0.8) inset, // top light accent\n    0 40px 20px -20px rgba(255,255,255,0.08) inset, // top inner light\n    0 -1px 1px -1px rgba(0,0,0,0.7) inset, // bottom shade accent\n    0 -40px 20px -20px rgba(0,0,0,0.06) inset, // bottom inner shadow\n    0 11px 8px -3px rgba(0,0,0,0.4), // bottom drop shadow\n    0 4px 2px -2px rgba(0,0,0,0.3), // bottom drop shadow hard\n    0 1px 6px 1px rgba(0,0,0,0.5), // all around\n    ;\n  &:hover {\n\n    &:after {\n      opacity: 1;\n    }\n  }\n\n  &:active {\n    transition-duration: 0.1s;\n    box-shadow:\n      0 -1px 1px -1px rgba(255,255,255,0.3) inset, // top light accent\n      0 -40px 20px -20px rgba(255,255,255,0.05) inset, // top inner light\n      0 -1px 1px -1px rgba(0,0,0,0.7) inset, // bottom shade accent\n      0 40px 20px -20px rgba(0,0,0,0.05) inset, // bottom inner shadow\n      0 11px 8px -3px rgba(0,0,0,0.25), // bottom drop shadow\n      0 4px 2px -2px rgba(0,0,0,0.2), // bottom drop shadow hard\n      0 1px 6px 1px rgba(0,0,0,0.4), // all around\n      ;\n\n    &:after {\n      transition-duration: 0.1s;\n      opacity: 0.2;\n    }\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    transform: rotate(-19deg) translateY(-1.3em) scale(1.08);\n    filter: blur(1px);\n    -webkit-filter: blur(1px);\n    background-image: linear-gradient(-90deg, rgba(255,255,255,0.18) 10%, rgba(255,255,255,0.0) 45%);\n    opacity: 0.6;\n    transition: opacity 0.25s\n  }\n}\n\n.btn-primary { @include btn-psi($color-primary); }\n.btn-secondary { @include btn-psi($color-secondary); }\n.btn-tertiary { @include btn-psi($color-tertiary); }\n.btn-tetrary { @include btn-psi($color-tetrary); }\n\n.btn-black { @include btn-psi($gray-darker, $gray); }\n.btn-dark { @include btn-psi($gray-dark, $gray); }\n.btn-gray { @include btn-psi($gray, $gray-light); }\n.btn-light { @include btn-psi($gray-lighter); }"
  },
  {
    "path": "scss/buttons/_rho.scss",
    "content": "// Buttons - RHO\n// --------------------------------------------------------------------\n\n// Mirhon\n@mixin btn-rho($color, $text-color: check-background($color)) {\n\n  &:active {\n    background-color: darken($gray-light, 5%);\n    background-image: linear-gradient(0deg, $gray-light, darken($gray-lighter, 5%));\n\n    box-shadow:\n      0 1px 1px rgba(0,0,0,0.1),\n      0 1px 4px rgba(0,0,0,0.1),\n      0 2px 7px rgba(0,0,0,0.2),\n      0 2px 4px rgba(0,0,0,0.1) inset\n      ;\n  }\n\n  &:before {\n    background-color: $color;\n  }\n}\n\n.btn {\n  @include btn-common($rho-v-spacing, $rho-h-spacing, $rho-border-radius, $rho-border-width);\n  transition: box-shadow 0.2s, background-color 0.2s;\n  position: relative;\n\n  background-color: $gray-light;\n  background-image: linear-gradient(0deg, $gray-light, $gray-lighter);\n  color: $gray-dark;\n\n  box-shadow:\n    0 1px 1px rgba(0,0,0,0.3),\n    0 1px 4px rgba(0,0,0,0.3),\n    0 2px 7px rgba(0,0,0,0.4)\n    ;\n\n  &:before {\n    $space: 0.35em;\n    content: '';\n    display: block;\n    position: absolute;\n    padding: $space;\n    text-shadow: none;\n    top: -$space;\n    left: -$space;\n    right: 0-($space);\n    bottom: -$space;\n    border-radius: $rho-border-radius + $space;\n\n    box-shadow:\n      0 1px 1px 0 rgba(0, 0, 0, 0.2) inset,\n      0 3px 3px -2px rgba(0, 0, 0, 0.2) inset\n      ;\n    z-index: -1;\n  }\n}\n\n.btn-primary { @include btn-rho($color-primary); }\n.btn-secondary { @include btn-rho($color-secondary); }\n.btn-tertiary { @include btn-rho($color-tertiary); }\n.btn-tetrary { @include btn-rho($color-tetrary); }\n\n.btn-black { @include btn-rho($gray-darker); }\n.btn-dark { @include btn-rho($gray-dark); }\n.btn-gray { @include btn-rho($gray); }\n.btn-light { @include btn-rho($gray-lighter, darken($gray-lighter, 45%)); }"
  },
  {
    "path": "scss/buttons/_sigma.scss",
    "content": "// Buttons - SIGMA\n// --------------------------------------------------------------------\n\n// Misigman\n@mixin btn-sigma($color, $text-color: darken($color, 18%)) {\n\n  background-color: $color;\n  color: $text-color;\n  border-color: darken($color, 12%);\n\n  box-shadow:\n    0 -4px 12px -1px rgba($color, 0.3), // outer glow\n    0 1px 1px 0 rgba(0,0,0,0.35), // bottom close shadow\n    0 2px 6px 1px rgba(0,0,0,0.3), // blur all around\n    0 10px 6px -2px rgba(0,0,0,0.25), // bottom shadow spread\n    0 1px 0 0 rgba(255,255,255, 0.2) inset, // top light accent\n    0 -2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset // large inner bottom shade\n    ;\n\n  &:hover {\n    background-color: lighten($color, 2%);\n  }\n\n  &:active {\n    background-color: darken($color, 5%);\n\n    box-shadow:\n      0 -4px 12px -1px rgba($color, 0.2), // outer glow\n      0 1px 1px 0 rgba(0,0,0,0.3), // bottom close shadow\n      0 2px 6px 1px rgba(0,0,0,0.2), // blur all around\n      0 8px 6px -2px rgba(0,0,0,0.2), // bottom shadow spread\n      0 -1px 0 0 rgba(255,255,255, 0.1) inset, // top light accent\n      0 2.5em 2em -1.5em rgba(0, 0, 0, 0.12) inset // large inner bottom shade\n      ;\n  }\n\n}\n\n.btn {\n  @include btn-common($sigma-v-spacing, $sigma-h-spacing, $sigma-border-radius, $sigma-border-width);\n  transition: box-shadow 0.3s, background-color 0.3s;\n  text-shadow:\n    0 -1px 0 rgba(0,0,0,0.2),\n    0 1px 0 rgba(255,255,255,0.2)\n    ;\n\n  &:active {\n    transition-duration: 0.1s;\n    text-shadow:\n      0 1px 0 rgba(0,0,0,0.1),\n      0 -1px 0 rgba(255,255,255,0.1)\n      ;\n  }\n\n}\n\n.btn-primary { @include btn-sigma($color-primary); }\n.btn-secondary { @include btn-sigma($color-secondary); }\n.btn-tertiary { @include btn-sigma($color-tertiary); }\n.btn-tetrary { @include btn-sigma($color-tetrary); }\n\n.btn-black { @include btn-sigma($gray-darker); }\n.btn-dark { @include btn-sigma($gray-dark); }\n.btn-gray { @include btn-sigma($gray); }\n.btn-light { @include btn-sigma($gray-lighter, darken($gray-lighter, 45%)); }"
  },
  {
    "path": "scss/buttons/_tau.scss",
    "content": "// Buttons - TAU\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-tau($color, $text-color: check-background($color)) {\n  background-color: $color;\n  color: $text-color;\n\n\n  &:hover {\n    background-color: lighten($color, 4%);\n  }\n\n  &:active {\n    background-color: darken($color, 4%);\n  }\n\n}\n\n.btn {\n  @include btn-common($tau-v-spacing, $tau-h-spacing, $tau-border-radius, $tau-border-width);\n  transition: background-color 0.3s;\n  &:active {\n    transition-duration: 0.1s;\n  }\n\n}\n\n.btn-primary { @include btn-tau($color-primary); }\n.btn-secondary { @include btn-tau($color-secondary); }\n.btn-tertiary { @include btn-tau($color-tertiary); }\n.btn-tetrary { @include btn-tau($color-tetrary); }\n\n.btn-black { @include btn-tau($gray-darker); }\n.btn-dark { @include btn-tau($gray-dark); }\n.btn-gray { @include btn-tau($gray); }\n.btn-light { @include btn-tau($gray-lighter, darken($gray-lighter, 45%)); }"
  },
  {
    "path": "scss/buttons/_theta.scss",
    "content": "// Buttons - THETA\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-theta($color, $text-color: $color) {\n  color: $text-color;\n  border-color: $color;\n  &:hover {\n    transform: translate(0.2em, -0.1em);\n\n    &:before {\n      transform: translate(-0.4em, 0.4em);\n    }\n  }\n\n  &:active {\n    transform: translate(0, 0);\n    transition-duration: 0.1s;\n    \n    &:before {\n    transition-duration: 0.1s;\n      transform: translate(0, 0);\n      background-color: rgba(adjust-hue($color, 60%), 0.5);\n    }\n  }\n  &:before {\n    background-color: rgba(adjust-hue($color, 60%), 0.4);\n  }\n}\n\n.btn {\n  @include btn-common($theta-v-spacing, $theta-h-spacing, $theta-border-radius, $theta-border-width);\n  position: relative;\n  transform: translate(0.5em -0.4em);\n  transition: transform 0.2s;\n\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    z-index: -1;\n    transform: translate(0.6em, -0.3em);\n    transition: transform 0.2s, background-color 0.2s;\n  }\n}\n\n.btn-primary { @include btn-theta($color-primary); }\n.btn-secondary { @include btn-theta($color-secondary); }\n.btn-tertiary { @include btn-theta($color-tertiary); }\n.btn-tetrary { @include btn-theta($color-tetrary); }\n\n.btn-black { @include btn-theta($gray-darker); }\n.btn-dark { @include btn-theta($gray-dark); }\n.btn-gray { @include btn-theta($gray); }\n.btn-light { @include btn-theta($gray-lighter, $gray-dark); }"
  },
  {
    "path": "scss/buttons/_upsilon.scss",
    "content": "// Buttons - UPSILON\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-upsilon($color, $text-color: check-background($color)) {\n  background-color: $color;\n  color: $text-color;\n\n\n  &:hover {\n    background-color: lighten($color, 4%);\n  }\n\n  &:active {\n    background-color: darken($color, 4%);\n  }\n}\n\n.btn {\n  @include btn-common($upsilon-v-spacing, $upsilon-h-spacing, $upsilon-border-radius, $upsilon-border-width);\n  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;\n  box-shadow:\n    0 -2px 0 0 rgba(0, 0, 0, 0.3) inset\n    ;\n  &:active {\n    transition-duration: 0.1s;\n  box-shadow:\n    0 0 0 0 rgba(0, 0, 0, 0.3) inset\n    ;\n    transform: translateY(1px);\n  }\n}\n\n.btn-primary { @include btn-upsilon($color-primary); }\n.btn-secondary { @include btn-upsilon($color-secondary); }\n.btn-tertiary { @include btn-upsilon($color-tertiary); }\n.btn-tetrary { @include btn-upsilon($color-tetrary); }\n\n.btn-black { @include btn-upsilon($gray-darker); }\n.btn-dark { @include btn-upsilon($gray-dark); }\n.btn-gray { @include btn-upsilon($gray); }\n.btn-light { @include btn-upsilon($gray-lighter, darken($gray-lighter, 45%)); }"
  },
  {
    "path": "scss/buttons/_variables.buttons.scss",
    "content": "// Buttons - Variables\n// --------------------------------------------------------------------\n\n// alpha\n$alpha-v-spacing:                 0.8em;\n$alpha-h-spacing:                 1.6em;\n$alpha-border-radius:             $alpha-v-spacing / 3;\n\n// beta\n$beta-v-spacing:                  0.35em;\n$beta-h-spacing:                  0.8em;\n$beta-border-radius:              0.2em;\n$beta-border-width:               1px;\n\n// gamma\n$gamma-v-spacing:                 0.3em;\n$gamma-h-spacing:                 1.1em;\n$gamma-border-radius:             (1em * $line-height) / 2 + $gamma-v-spacing;\n$gamma-border-width:              1px;\n// delta\n$delta-v-spacing:                 0.6em;\n$delta-h-spacing:                 1.6em;\n$delta-border-radius:             0.25em;\n$delta-border-width:              1px;\n\n// epsilon\n$epsilon-v-spacing:               0.6em;\n$epsilon-h-spacing:               2.5em;\n$epsilon-border-radius:           (1em * $line-height) / 2 + $epsilon-v-spacing;\n\n// zeta\n$zeta-v-spacing:                  0.2em;\n$zeta-h-spacing:                  0.6em;\n$zeta-border-radius:              0;\n$zeta-border-width:               1px;\n\n// eta\n$eta-v-spacing:                   0.5em;\n$eta-h-spacing:                   1.8em;\n$eta-border-radius:               0.2em;\n$eta-border-width:                2px;\n\n// theta\n$theta-v-spacing:                 0.7em;\n$theta-h-spacing:                 1.4em;\n$theta-border-radius:             0;\n$theta-border-width:              3px;\n\n// kappa\n$kappa-v-spacing:                 0.8em;\n$kappa-h-spacing:                 1.4em;\n$kappa-border-radius:             0.6em;\n$kappa-border-width:              0;\n\n// iota\n$iota-v-spacing:                 0.6em;\n$iota-h-spacing:                 1.6em;\n$iota-border-radius:             (1em * $line-height) / 2 + $iota-v-spacing + 0.15em;\n$iota-border-width:              2px;\n\n// lambda\n$lambda-v-spacing:                0.5em;\n$lambda-h-spacing:                1.8em;\n$lambda-border-radius:            (1em * $line-height) / 2 + $lambda-v-spacing;\n$lambda-border-width:             1px;\n\n// mu\n$mu-v-spacing:                    0.7em;\n$mu-h-spacing:                    1.4em;\n$mu-border-radius:                (1em * $line-height) / 2 + $mu-v-spacing;\n$mu-border-width:                 1px;\n\n// nu\n$nu-v-spacing:                    0.8em;\n$nu-h-spacing:                    2.5em;\n$nu-border-radius:                0;\n$nu-border-width:                 3px;\n\n// xi\n$xi-v-spacing:                    0.6em;\n$xi-h-spacing:                    1.8em;\n$xi-border-radius:                (1em * $line-height) / 2 + $xi-v-spacing;\n$xi-border-width:                 0;\n\n// omicron\n$omicron-v-spacing:               0.8em;\n$omicron-h-spacing:               2.2em;\n$omicron-border-radius:           (1em * $line-height) / 2 + $omicron-v-spacing + 0.15em;\n$omicron-border-width:            2px;\n\n// pi\n$pi-v-spacing:                    0.6em;\n$pi-h-spacing:                    1.6em;\n$pi-border-radius:                0.5em;\n$pi-border-width:                 0;\n\n// rho\n$rho-v-spacing:                   0.6em;\n$rho-h-spacing:                   2.2em;\n$rho-border-radius:               (1em * $line-height) / 2 + $pi-v-spacing + 0.15em;\n$rho-border-width:                0;\n\n// sigma\n$sigma-v-spacing:                 0.45em;\n$sigma-h-spacing:                 2.5em;\n$sigma-border-radius:             0.2em;\n$sigma-border-width:              1px;\n\n// tau\n$tau-v-spacing:                   1.2em;\n$tau-h-spacing:                   2.4em;\n$tau-border-radius:               0;\n$tau-border-width:                0;\n\n// upsilon\n$upsilon-v-spacing:               1.2em;\n$upsilon-h-spacing:               1.6em;\n$upsilon-border-radius:           6px;\n$upsilon-border-width:            0;\n\n// phi\n$phi-v-spacing:                   1.2em;\n$phi-h-spacing:                   1.6em;\n$phi-border-radius:               0.4em;\n$phi-border-width:                3px;\n\n// chi\n$chi-v-spacing:                   0.6em;\n$chi-h-spacing:                   1.8em;\n$chi-border-radius:               0;\n$chi-border-width:                3px;\n\n// psi\n$psi-v-spacing:                   0.5em;\n$psi-h-spacing:                   1.5em;\n$psi-border-radius:               2px;\n$psi-border-width:                2px;\n\n// omega\n$omega-v-spacing:                 0.8em;\n$omega-h-spacing:                 1.6em;\n$omega-border-radius:             0;\n$omega-border-width:              2px;\n"
  },
  {
    "path": "scss/buttons/_xi.scss",
    "content": "// Buttons - XI\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-xi($color, $text-color: lighten($color, 35%)) {\n  background-color: $color;\n  color: $text-color;\n\n  &:hover {\n    background-color: lighten($color, 3%);\n  }\n\n  &:active {\n    background-color: darken($color, 3%);\n    color: darken($color, 20%);\n  }\n}\n\n.btn {\n  $half-shade-height: ($xi-v-spacing + 0.5em * $line-height);\n  @include btn-common($xi-v-spacing, $xi-h-spacing, $xi-border-radius, $xi-border-width);\n  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n  position: relative;\n  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);\n  box-shadow:\n    0 1px 1px 0 rgba(0,0,0, 0.2), // bottom hard\n    0 2px 4px 0 rgba(0,0,0, 0.2), // bottom spread\n    0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, // inner 3d shadow\n    0 0-$half-shade-height $half-shade-height 0-$half-shade-height rgba(0, 0, 0, 0.3) inset,\n    0 0 1px 0 rgba(0, 0, 0, 0.1)\n    ;\n\n\n  &:active {\n    transition-duration: 0.05s;\n    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);\n    box-shadow:\n      0 -1px 1px 0 rgba(0,0,0, 0.0), // bottom hard\n      0 -2px 4px 0 rgba(0,0,0, 0.0), // bottom spread\n      0 -1px 0 0 rgba(0, 0, 0, 0.0) inset, // inner 3d shadow\n      0 $half-shade-height $half-shade-height 0-$half-shade-height rgba(0, 0, 0, 0.3) inset,\n      0 0 4px 0 rgba(0, 0, 0, 0.1)\n      ;\n    transform: scale(0.99);\n    \n    &:before { \n      transform: translateY(1.01);\n    }\n  }\n\n  &:before {\n    $well-width: 7px;\n    content: '';\n    position: absolute;\n    top: -$well-width;\n    left: -$well-width;\n    right: -$well-width;\n    bottom: -$well-width;\n    border-radius: $xi-border-radius + 0.4em;\n    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.1));\n    z-index: -1;\n  }\n}\n\n.btn-primary { @include btn-xi($color-primary); }\n.btn-secondary { @include btn-xi($color-secondary); }\n.btn-tertiary { @include btn-xi($color-tertiary); }\n.btn-tetrary { @include btn-xi($color-tetrary); }\n\n.btn-black { @include btn-xi($gray-darker); }\n.btn-dark { @include btn-xi($gray-dark); }\n.btn-gray { @include btn-xi($gray); }\n.btn-light { @include btn-xi($gray-lighter, darken($gray-lighter, 20%)); }"
  },
  {
    "path": "scss/buttons/_zeta.scss",
    "content": "// Buttons - ZETA\n// --------------------------------------------------------------------\n\n// Mixin\n@mixin btn-zeta($color, $text-color: check-background($color)) {\n  color: $text-color;\n  background-color: $color;\n  background-image: linear-gradient(0deg, darken($color, 10%), lighten($color, 2%));\n  border-color: darken($color, 20%);\n  \n  &:active { \n    background-image: linear-gradient(0deg, darken($color, 10%), darken($color, 6%));\n  }\n}\n\n.btn {\n  @include btn-common($zeta-v-spacing, $zeta-h-spacing, $zeta-border-radius, $zeta-border-width);\n  box-shadow:\n    0 1px 0 0 rgba(255,255,255,0.2) inset,\n    0 1px 3px 0 rgba(0,0,0,0.4)\n    ;\n\n  &:active {\n\n    box-shadow:\n      0 2px 4px -2px rgba(0,0,0,0.2) inset,\n      0 1px 3px 0 rgba(0,0,0,0.1)\n      ;\n  }\n}\n\n.btn-primary { @include btn-zeta($color-primary); }\n.btn-secondary { @include btn-zeta($color-secondary); }\n.btn-tertiary { @include btn-zeta($color-tertiary); }\n.btn-tetrary { @include btn-zeta($color-tetrary); }\n\n.btn-black { @include btn-zeta($gray-darker); }\n.btn-dark { @include btn-zeta($gray-dark); }\n.btn-gray { @include btn-zeta($gray); }\n.btn-light { @include btn-zeta($gray-lighter); }"
  },
  {
    "path": "scss/main.scss",
    "content": "@import\n  'variables',\n  'mixins',\n  'global',\n  'buttons',\n  'fonts'\n  ;"
  },
  {
    "path": "webfonts/README.md",
    "content": "# A note on webfonts\n\nWebfonts are now hosted on my assets server.\n\nPlease don't copy or redistribute webfonts without ~~explicit permission~~ a license.\n"
  }
]