@charset 'UTF-8';@font-face{font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(/assets/KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(/assets/KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(/assets/KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(/assets/KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(/assets/KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(/assets/KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.22"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("/assets/material-symbols-rounded-D2wG73um.woff2") format("woff2");
}
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}
.text[data-variant='title-sm'] {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
/* ============================================
   PHOTON BUTTON COMPONENT
   Following Photon Component Token Specification
   ============================================ */

/* ============================================
   BASE BUTTON STYLES
   ============================================ */

.ph-button {
  /* Reset browser defaults */
  appearance: none;
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  
  /* Transitions */
  transition:
    box-shadow var(--ph-sys-motion-duration-medium, 250ms) var(--ph-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
    background-color var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.ph-button[data-full-width='true'] {
  width: 100%;
}

/* ============================================
   STATE LAYER
   ============================================ */

.ph-button__state-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.ph-button:hover:not([data-disabled='true']) .ph-button__state-layer {
  opacity: var(--ph-sys-state-hover-opacity, 0.08);
}

.ph-button:focus-visible:not([data-disabled='true']) .ph-button__state-layer {
  opacity: var(--ph-sys-state-focus-opacity, 0.10);
}

.ph-button:active:not([data-disabled='true']) .ph-button__state-layer {
  opacity: var(--ph-sys-state-active-opacity, 0.10);
}

/* ============================================
   CONTENT WRAPPER
   ============================================ */

.ph-button__content {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ph-button__label {
  white-space: nowrap;
}

.ph-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ph-button__icon svg {
  width: 100%;
  height: 100%;
}

/* Loading spinner animation */
.ph-button__spinner {
  animation: ph-button-spin 1s linear infinite;
}

.ph-button__spinner circle {
  stroke: currentColor;
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
  animation: ph-button-dash 1.5s ease-in-out infinite;
}

@keyframes ph-button-spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes ph-button-dash {
  0% {
    stroke-dashoffset: 60;
  }
  50% {
    stroke-dashoffset: 15;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 60;
    transform: rotate(450deg);
  }
}

/* ============================================
   FOCUS RING
   ============================================ */

.ph-button:focus-visible {
  outline: var(--ph-sys-focus-ring-width, 2px) solid var(--ph-sys-focus-ring-color, var(--ph-sys-color-primary));
  outline-offset: var(--ph-sys-focus-ring-offset, 2px);
}

/* ============================================
   DISABLED STATE (applies to all variants)
   ============================================ */

.ph-button[data-disabled='true'] {
  cursor: not-allowed;
  pointer-events: none;
}

.ph-button[data-disabled='true'] .ph-button__state-layer {
  display: none;
}

/* ============================================
   VARIANT: FILLED
   ============================================ */

.ph-button[data-variant='filled'] {
  background-color: var(--ph-comp-button-filled-container-color);
  border-radius: var(--ph-comp-button-filled-container-shape);
  box-shadow: var(--ph-comp-button-filled-container-elevation);
}

.ph-button[data-variant='filled'] .ph-button__label {
  font-family: var(--ph-comp-button-filled-label-font);
  font-size: var(--ph-comp-button-filled-label-size);
  font-weight: var(--ph-comp-button-filled-label-weight);
  letter-spacing: var(--ph-comp-button-filled-label-letter-spacing);
  color: var(--ph-comp-button-filled-label-color);
}

.ph-button[data-variant='filled'] .ph-button__icon {
  color: var(--ph-comp-button-filled-icon-color);
}

.ph-button[data-variant='filled'] .ph-button__state-layer {
  background-color: var(--ph-comp-button-filled-label-color);
}

/* Filled - Sizes */
.ph-button[data-variant='filled'][data-size='sm'] {
  height: var(--ph-comp-button-filled-container-height-sm);
  padding-inline: var(--ph-comp-button-filled-padding-inline-sm);
  gap: var(--ph-comp-button-filled-icon-gap-sm);
}

.ph-button[data-variant='filled'][data-size='md'] {
  height: var(--ph-comp-button-filled-container-height-md);
  padding-inline: var(--ph-comp-button-filled-padding-inline-md);
  gap: var(--ph-comp-button-filled-icon-gap-md);
}

.ph-button[data-variant='filled'][data-size='lg'] {
  height: var(--ph-comp-button-filled-container-height-lg);
  padding-inline: var(--ph-comp-button-filled-padding-inline-lg);
  gap: var(--ph-comp-button-filled-icon-gap-lg);
}

/* Filled - With leading icon (reduced padding) */
.ph-button[data-variant='filled'][data-size='sm'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-filled-padding-inline-icon-sm);
}

.ph-button[data-variant='filled'][data-size='md'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-filled-padding-inline-icon-md);
}

.ph-button[data-variant='filled'][data-size='lg'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-filled-padding-inline-icon-lg);
}

/* Filled - With trailing icon (reduced padding) */
.ph-button[data-variant='filled'][data-size='sm'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-filled-padding-inline-icon-sm);
}

.ph-button[data-variant='filled'][data-size='md'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-filled-padding-inline-icon-md);
}

.ph-button[data-variant='filled'][data-size='lg'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-filled-padding-inline-icon-lg);
}

/* Filled - Icon sizes */
.ph-button[data-variant='filled'][data-size='sm'] .ph-button__icon {
  width: 16px;
  height: 16px;
}

.ph-button[data-variant='filled'][data-size='md'] .ph-button__icon {
  width: var(--ph-comp-button-filled-icon-size-md);
  height: var(--ph-comp-button-filled-icon-size-md);
}

.ph-button[data-variant='filled'][data-size='lg'] .ph-button__icon {
  width: 20px;
  height: 20px;
}

/* Filled - Hover state (elevation) */
.ph-button[data-variant='filled']:hover:not([data-disabled='true']) {
  box-shadow: var(--ph-sys-elevation-1, 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15));
}

/* Filled - Disabled state */
.ph-button[data-variant='filled'][data-disabled='true'] {
  background-color: color-mix(in oklch, var(--ph-sys-color-on-surface, #1f1a1d) 12%, transparent);
  box-shadow: none;
}

.ph-button[data-variant='filled'][data-disabled='true'] .ph-button__label,
.ph-button[data-variant='filled'][data-disabled='true'] .ph-button__icon {
  color: color-mix(in oklch, var(--ph-sys-color-on-surface, #1f1a1d) 38%, transparent);
}

/* ============================================
   FILLED - COLOR VARIANTS
   ============================================ */

/* Secondary */
.ph-button[data-variant='filled'][data-color='secondary'] {
  background-color: var(--ph-sys-color-secondary);
}

.ph-button[data-variant='filled'][data-color='secondary'] .ph-button__label {
  color: var(--ph-sys-color-on-secondary);
}

.ph-button[data-variant='filled'][data-color='secondary'] .ph-button__icon {
  color: var(--ph-sys-color-on-secondary);
}

.ph-button[data-variant='filled'][data-color='secondary'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-on-secondary);
}

/* Tertiary */
.ph-button[data-variant='filled'][data-color='tertiary'] {
  background-color: var(--ph-sys-color-tertiary);
}

.ph-button[data-variant='filled'][data-color='tertiary'] .ph-button__label {
  color: var(--ph-sys-color-on-tertiary);
}

.ph-button[data-variant='filled'][data-color='tertiary'] .ph-button__icon {
  color: var(--ph-sys-color-on-tertiary);
}

.ph-button[data-variant='filled'][data-color='tertiary'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-on-tertiary);
}

/* Error */
.ph-button[data-variant='filled'][data-color='error'] {
  background-color: var(--ph-sys-color-error);
}

.ph-button[data-variant='filled'][data-color='error'] .ph-button__label {
  color: var(--ph-sys-color-on-error);
}

.ph-button[data-variant='filled'][data-color='error'] .ph-button__icon {
  color: var(--ph-sys-color-on-error);
}

.ph-button[data-variant='filled'][data-color='error'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-on-error);
}

/* ============================================
   VARIANT: TONAL
   ============================================ */

.ph-button[data-variant='tonal'] {
  background-color: var(--ph-comp-button-tonal-container-color);
  border-radius: var(--ph-comp-button-tonal-container-shape);
  box-shadow: var(--ph-comp-button-tonal-container-elevation);
}

.ph-button[data-variant='tonal'] .ph-button__label {
  font-family: var(--ph-comp-button-tonal-label-font);
  font-size: var(--ph-comp-button-tonal-label-size);
  font-weight: var(--ph-comp-button-tonal-label-weight);
  letter-spacing: var(--ph-comp-button-tonal-label-letter-spacing);
  color: var(--ph-comp-button-tonal-label-color);
}

.ph-button[data-variant='tonal'] .ph-button__icon {
  color: var(--ph-comp-button-tonal-icon-color);
}

.ph-button[data-variant='tonal'] .ph-button__state-layer {
  background-color: var(--ph-comp-button-tonal-label-color);
}

/* Tonal - Sizes */
.ph-button[data-variant='tonal'][data-size='sm'] {
  height: var(--ph-comp-button-tonal-container-height-sm);
  padding-inline: var(--ph-comp-button-tonal-padding-inline-sm);
  gap: var(--ph-comp-button-tonal-icon-gap-sm);
}

.ph-button[data-variant='tonal'][data-size='md'] {
  height: var(--ph-comp-button-tonal-container-height-md);
  padding-inline: var(--ph-comp-button-tonal-padding-inline-md);
  gap: var(--ph-comp-button-tonal-icon-gap-md);
}

.ph-button[data-variant='tonal'][data-size='lg'] {
  height: var(--ph-comp-button-tonal-container-height-lg);
  padding-inline: var(--ph-comp-button-tonal-padding-inline-lg);
  gap: var(--ph-comp-button-tonal-icon-gap-lg);
}

/* Tonal - With leading icon */
.ph-button[data-variant='tonal'][data-size='sm'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-tonal-padding-inline-icon-sm);
}

.ph-button[data-variant='tonal'][data-size='md'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-tonal-padding-inline-icon-md);
}

.ph-button[data-variant='tonal'][data-size='lg'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-tonal-padding-inline-icon-lg);
}

/* Tonal - With trailing icon */
.ph-button[data-variant='tonal'][data-size='sm'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-tonal-padding-inline-icon-sm);
}

.ph-button[data-variant='tonal'][data-size='md'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-tonal-padding-inline-icon-md);
}

.ph-button[data-variant='tonal'][data-size='lg'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-tonal-padding-inline-icon-lg);
}

/* Tonal - Icon sizes */
.ph-button[data-variant='tonal'][data-size='sm'] .ph-button__icon {
  width: 16px;
  height: 16px;
}

.ph-button[data-variant='tonal'][data-size='md'] .ph-button__icon {
  width: var(--ph-comp-button-tonal-icon-size-md);
  height: var(--ph-comp-button-tonal-icon-size-md);
}

.ph-button[data-variant='tonal'][data-size='lg'] .ph-button__icon {
  width: 20px;
  height: 20px;
}

/* Tonal - Hover state */
.ph-button[data-variant='tonal']:hover:not([data-disabled='true']) {
  box-shadow: var(--ph-sys-elevation-1, 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15));
}

/* Tonal - Disabled state */
.ph-button[data-variant='tonal'][data-disabled='true'] {
  background-color: color-mix(in oklch, var(--ph-sys-color-on-surface, #1f1a1d) 12%, transparent);
  box-shadow: none;
}

.ph-button[data-variant='tonal'][data-disabled='true'] .ph-button__label,
.ph-button[data-variant='tonal'][data-disabled='true'] .ph-button__icon {
  color: color-mix(in oklch, var(--ph-sys-color-on-surface, #1f1a1d) 38%, transparent);
}

/* ============================================
   TONAL - COLOR VARIANTS
   ============================================ */

/* Secondary */
.ph-button[data-variant='tonal'][data-color='secondary'] {
  background-color: var(--ph-sys-color-secondary-container);
}

.ph-button[data-variant='tonal'][data-color='secondary'] .ph-button__label {
  color: var(--ph-sys-color-on-secondary-container);
}

.ph-button[data-variant='tonal'][data-color='secondary'] .ph-button__icon {
  color: var(--ph-sys-color-on-secondary-container);
}

.ph-button[data-variant='tonal'][data-color='secondary'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-on-secondary-container);
}

/* Tertiary */
.ph-button[data-variant='tonal'][data-color='tertiary'] {
  background-color: var(--ph-sys-color-tertiary-container);
}

.ph-button[data-variant='tonal'][data-color='tertiary'] .ph-button__label {
  color: var(--ph-sys-color-on-tertiary-container);
}

.ph-button[data-variant='tonal'][data-color='tertiary'] .ph-button__icon {
  color: var(--ph-sys-color-on-tertiary-container);
}

.ph-button[data-variant='tonal'][data-color='tertiary'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-on-tertiary-container);
}

/* Error */
.ph-button[data-variant='tonal'][data-color='error'] {
  background-color: var(--ph-sys-color-error-container);
}

.ph-button[data-variant='tonal'][data-color='error'] .ph-button__label {
  color: var(--ph-sys-color-on-error-container);
}

.ph-button[data-variant='tonal'][data-color='error'] .ph-button__icon {
  color: var(--ph-sys-color-on-error-container);
}

.ph-button[data-variant='tonal'][data-color='error'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-on-error-container);
}

/* ============================================
   VARIANT: ELEVATED
   ============================================ */

.ph-button[data-variant='elevated'] {
  background-color: var(--ph-comp-button-elevated-container-color);
  border-radius: var(--ph-comp-button-elevated-container-shape);
  box-shadow: var(--ph-comp-button-elevated-container-elevation);
}

.ph-button[data-variant='elevated'] .ph-button__label {
  font-family: var(--ph-comp-button-elevated-label-font);
  font-size: var(--ph-comp-button-elevated-label-size);
  font-weight: var(--ph-comp-button-elevated-label-weight);
  letter-spacing: var(--ph-comp-button-elevated-label-letter-spacing);
  color: var(--ph-comp-button-elevated-label-color);
}

.ph-button[data-variant='elevated'] .ph-button__icon {
  color: var(--ph-comp-button-elevated-icon-color);
}

.ph-button[data-variant='elevated'] .ph-button__state-layer {
  background-color: var(--ph-comp-button-elevated-label-color);
}

/* Elevated - Sizes */
.ph-button[data-variant='elevated'][data-size='sm'] {
  height: var(--ph-comp-button-elevated-container-height-sm);
  padding-inline: var(--ph-comp-button-elevated-padding-inline-sm);
  gap: var(--ph-comp-button-elevated-icon-gap-sm);
}

.ph-button[data-variant='elevated'][data-size='md'] {
  height: var(--ph-comp-button-elevated-container-height-md);
  padding-inline: var(--ph-comp-button-elevated-padding-inline-md);
  gap: var(--ph-comp-button-elevated-icon-gap-md);
}

.ph-button[data-variant='elevated'][data-size='lg'] {
  height: var(--ph-comp-button-elevated-container-height-lg);
  padding-inline: var(--ph-comp-button-elevated-padding-inline-lg);
  gap: var(--ph-comp-button-elevated-icon-gap-lg);
}

/* Elevated - With leading icon */
.ph-button[data-variant='elevated'][data-size='sm'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-elevated-padding-inline-icon-sm);
}

.ph-button[data-variant='elevated'][data-size='md'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-elevated-padding-inline-icon-md);
}

.ph-button[data-variant='elevated'][data-size='lg'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-elevated-padding-inline-icon-lg);
}

/* Elevated - With trailing icon */
.ph-button[data-variant='elevated'][data-size='sm'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-elevated-padding-inline-icon-sm);
}

.ph-button[data-variant='elevated'][data-size='md'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-elevated-padding-inline-icon-md);
}

.ph-button[data-variant='elevated'][data-size='lg'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-elevated-padding-inline-icon-lg);
}

/* Elevated - Icon sizes */
.ph-button[data-variant='elevated'][data-size='sm'] .ph-button__icon {
  width: 16px;
  height: 16px;
}

.ph-button[data-variant='elevated'][data-size='md'] .ph-button__icon {
  width: var(--ph-comp-button-elevated-icon-size-md);
  height: var(--ph-comp-button-elevated-icon-size-md);
}

.ph-button[data-variant='elevated'][data-size='lg'] .ph-button__icon {
  width: 20px;
  height: 20px;
}

/* Elevated - Hover state (increased elevation) */
.ph-button[data-variant='elevated']:hover:not([data-disabled='true']) {
  box-shadow: var(--ph-sys-elevation-2, 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15));
}

/* Elevated - Disabled state */
.ph-button[data-variant='elevated'][data-disabled='true'] {
  background-color: color-mix(in oklch, var(--ph-sys-color-on-surface, #1f1a1d) 12%, transparent);
  box-shadow: none;
}

.ph-button[data-variant='elevated'][data-disabled='true'] .ph-button__label,
.ph-button[data-variant='elevated'][data-disabled='true'] .ph-button__icon {
  color: color-mix(in oklch, var(--ph-sys-color-on-surface, #1f1a1d) 38%, transparent);
}

/* ============================================
   ELEVATED - COLOR VARIANTS
   ============================================ */

/* Secondary */
.ph-button[data-variant='elevated'][data-color='secondary'] .ph-button__label {
  color: var(--ph-sys-color-secondary);
}

.ph-button[data-variant='elevated'][data-color='secondary'] .ph-button__icon {
  color: var(--ph-sys-color-secondary);
}

.ph-button[data-variant='elevated'][data-color='secondary'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-secondary);
}

/* Tertiary */
.ph-button[data-variant='elevated'][data-color='tertiary'] .ph-button__label {
  color: var(--ph-sys-color-tertiary);
}

.ph-button[data-variant='elevated'][data-color='tertiary'] .ph-button__icon {
  color: var(--ph-sys-color-tertiary);
}

.ph-button[data-variant='elevated'][data-color='tertiary'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-tertiary);
}

/* Error */
.ph-button[data-variant='elevated'][data-color='error'] .ph-button__label {
  color: var(--ph-sys-color-error);
}

.ph-button[data-variant='elevated'][data-color='error'] .ph-button__icon {
  color: var(--ph-sys-color-error);
}

.ph-button[data-variant='elevated'][data-color='error'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-error);
}

/* ============================================
   VARIANT: OUTLINED
   ============================================ */

.ph-button[data-variant='outlined'] {
  background-color: var(--ph-comp-button-outlined-container-color);
  border-radius: var(--ph-comp-button-outlined-container-shape);
  box-shadow: var(--ph-comp-button-outlined-container-elevation);
  border: var(--ph-comp-button-outlined-outline-width) solid var(--ph-comp-button-outlined-outline-color);
}

.ph-button[data-variant='outlined'] .ph-button__label {
  font-family: var(--ph-comp-button-outlined-label-font);
  font-size: var(--ph-comp-button-outlined-label-size);
  font-weight: var(--ph-comp-button-outlined-label-weight);
  letter-spacing: var(--ph-comp-button-outlined-label-letter-spacing);
  color: var(--ph-comp-button-outlined-label-color);
}

.ph-button[data-variant='outlined'] .ph-button__icon {
  color: var(--ph-comp-button-outlined-icon-color);
}

.ph-button[data-variant='outlined'] .ph-button__state-layer {
  background-color: var(--ph-comp-button-outlined-label-color);
}

/* Outlined - Sizes */
.ph-button[data-variant='outlined'][data-size='sm'] {
  height: var(--ph-comp-button-outlined-container-height-sm);
  padding-inline: var(--ph-comp-button-outlined-padding-inline-sm);
  gap: var(--ph-comp-button-outlined-icon-gap-sm);
}

.ph-button[data-variant='outlined'][data-size='md'] {
  height: var(--ph-comp-button-outlined-container-height-md);
  padding-inline: var(--ph-comp-button-outlined-padding-inline-md);
  gap: var(--ph-comp-button-outlined-icon-gap-md);
}

.ph-button[data-variant='outlined'][data-size='lg'] {
  height: var(--ph-comp-button-outlined-container-height-lg);
  padding-inline: var(--ph-comp-button-outlined-padding-inline-lg);
  gap: var(--ph-comp-button-outlined-icon-gap-lg);
}

/* Outlined - With leading icon */
.ph-button[data-variant='outlined'][data-size='sm'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-outlined-padding-inline-icon-sm);
}

.ph-button[data-variant='outlined'][data-size='md'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-outlined-padding-inline-icon-md);
}

.ph-button[data-variant='outlined'][data-size='lg'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-outlined-padding-inline-icon-lg);
}

/* Outlined - With trailing icon */
.ph-button[data-variant='outlined'][data-size='sm'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-outlined-padding-inline-icon-sm);
}

.ph-button[data-variant='outlined'][data-size='md'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-outlined-padding-inline-icon-md);
}

.ph-button[data-variant='outlined'][data-size='lg'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-outlined-padding-inline-icon-lg);
}

/* Outlined - Icon sizes */
.ph-button[data-variant='outlined'][data-size='sm'] .ph-button__icon {
  width: 16px;
  height: 16px;
}

.ph-button[data-variant='outlined'][data-size='md'] .ph-button__icon {
  width: var(--ph-comp-button-outlined-icon-size-md);
  height: var(--ph-comp-button-outlined-icon-size-md);
}

.ph-button[data-variant='outlined'][data-size='lg'] .ph-button__icon {
  width: 20px;
  height: 20px;
}

/* Outlined - Disabled state */
.ph-button[data-variant='outlined'][data-disabled='true'] {
  border-color: color-mix(in oklch, var(--ph-sys-color-on-surface, #1f1a1d) 12%, transparent);
}

.ph-button[data-variant='outlined'][data-disabled='true'] .ph-button__label,
.ph-button[data-variant='outlined'][data-disabled='true'] .ph-button__icon {
  color: color-mix(in oklch, var(--ph-sys-color-on-surface, #1f1a1d) 38%, transparent);
}

/* ============================================
   OUTLINED - COLOR VARIANTS
   ============================================ */

/* Secondary */
.ph-button[data-variant='outlined'][data-color='secondary'] {
  border-color: var(--ph-sys-color-outline);
}

.ph-button[data-variant='outlined'][data-color='secondary'] .ph-button__label {
  color: var(--ph-sys-color-secondary);
}

.ph-button[data-variant='outlined'][data-color='secondary'] .ph-button__icon {
  color: var(--ph-sys-color-secondary);
}

.ph-button[data-variant='outlined'][data-color='secondary'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-secondary);
}

/* Tertiary */
.ph-button[data-variant='outlined'][data-color='tertiary'] {
  border-color: var(--ph-sys-color-outline);
}

.ph-button[data-variant='outlined'][data-color='tertiary'] .ph-button__label {
  color: var(--ph-sys-color-tertiary);
}

.ph-button[data-variant='outlined'][data-color='tertiary'] .ph-button__icon {
  color: var(--ph-sys-color-tertiary);
}

.ph-button[data-variant='outlined'][data-color='tertiary'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-tertiary);
}

/* Error */
.ph-button[data-variant='outlined'][data-color='error'] {
  border-color: var(--ph-sys-color-outline);
}

.ph-button[data-variant='outlined'][data-color='error'] .ph-button__label {
  color: var(--ph-sys-color-error);
}

.ph-button[data-variant='outlined'][data-color='error'] .ph-button__icon {
  color: var(--ph-sys-color-error);
}

.ph-button[data-variant='outlined'][data-color='error'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-error);
}

/* ============================================
   VARIANT: TEXT
   ============================================ */

.ph-button[data-variant='text'] {
  background-color: var(--ph-comp-button-text-container-color);
  border-radius: var(--ph-comp-button-text-container-shape);
  box-shadow: var(--ph-comp-button-text-container-elevation);
}

.ph-button[data-variant='text'] .ph-button__label {
  font-family: var(--ph-comp-button-text-label-font);
  font-size: var(--ph-comp-button-text-label-size);
  font-weight: var(--ph-comp-button-text-label-weight);
  letter-spacing: var(--ph-comp-button-text-label-letter-spacing);
  color: var(--ph-comp-button-text-label-color);
}

.ph-button[data-variant='text'] .ph-button__icon {
  color: var(--ph-comp-button-text-icon-color);
}

.ph-button[data-variant='text'] .ph-button__state-layer {
  background-color: var(--ph-comp-button-text-label-color);
}

/* Text - Sizes */
.ph-button[data-variant='text'][data-size='sm'] {
  height: var(--ph-comp-button-text-container-height-sm);
  padding-inline: var(--ph-comp-button-text-padding-inline-sm);
  gap: var(--ph-comp-button-text-icon-gap-sm);
}

.ph-button[data-variant='text'][data-size='md'] {
  height: var(--ph-comp-button-text-container-height-md);
  padding-inline: var(--ph-comp-button-text-padding-inline-md);
  gap: var(--ph-comp-button-text-icon-gap-md);
}

.ph-button[data-variant='text'][data-size='lg'] {
  height: var(--ph-comp-button-text-container-height-lg);
  padding-inline: var(--ph-comp-button-text-padding-inline-lg);
  gap: var(--ph-comp-button-text-icon-gap-lg);
}

/* Text - With leading icon */
.ph-button[data-variant='text'][data-size='sm'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-text-padding-inline-icon-sm);
}

.ph-button[data-variant='text'][data-size='md'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-text-padding-inline-icon-md);
}

.ph-button[data-variant='text'][data-size='lg'][data-has-leading-icon='true'] {
  padding-inline-start: var(--ph-comp-button-text-padding-inline-icon-lg);
}

/* Text - With trailing icon */
.ph-button[data-variant='text'][data-size='sm'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-text-padding-inline-icon-sm);
}

.ph-button[data-variant='text'][data-size='md'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-text-padding-inline-icon-md);
}

.ph-button[data-variant='text'][data-size='lg'][data-has-trailing-icon='true'] {
  padding-inline-end: var(--ph-comp-button-text-padding-inline-icon-lg);
}

/* Text - Icon sizes */
.ph-button[data-variant='text'][data-size='sm'] .ph-button__icon {
  width: 16px;
  height: 16px;
}

.ph-button[data-variant='text'][data-size='md'] .ph-button__icon {
  width: var(--ph-comp-button-text-icon-size-md);
  height: var(--ph-comp-button-text-icon-size-md);
}

.ph-button[data-variant='text'][data-size='lg'] .ph-button__icon {
  width: 20px;
  height: 20px;
}

/* Text - Disabled state */
.ph-button[data-variant='text'][data-disabled='true'] .ph-button__label,
.ph-button[data-variant='text'][data-disabled='true'] .ph-button__icon {
  color: color-mix(in oklch, var(--ph-sys-color-on-surface, #1f1a1d) 38%, transparent);
}

/* ============================================
   TEXT - COLOR VARIANTS
   ============================================ */

/* Secondary */
.ph-button[data-variant='text'][data-color='secondary'] .ph-button__label {
  color: var(--ph-sys-color-secondary);
}

.ph-button[data-variant='text'][data-color='secondary'] .ph-button__icon {
  color: var(--ph-sys-color-secondary);
}

.ph-button[data-variant='text'][data-color='secondary'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-secondary);
}

/* Tertiary */
.ph-button[data-variant='text'][data-color='tertiary'] .ph-button__label {
  color: var(--ph-sys-color-tertiary);
}

.ph-button[data-variant='text'][data-color='tertiary'] .ph-button__icon {
  color: var(--ph-sys-color-tertiary);
}

.ph-button[data-variant='text'][data-color='tertiary'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-tertiary);
}

/* Error */
.ph-button[data-variant='text'][data-color='error'] .ph-button__label {
  color: var(--ph-sys-color-error);
}

.ph-button[data-variant='text'][data-color='error'] .ph-button__icon {
  color: var(--ph-sys-color-error);
}

.ph-button[data-variant='text'][data-color='error'] .ph-button__state-layer {
  background-color: var(--ph-sys-color-error);
}
/* ============================================
   PHOTON INPUT COMPONENT
   Following Photon Component Token Specification
   ============================================ */

/* ============================================
   BASE INPUT WRAPPER
   ============================================ */

.ph-input-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ============================================
   INPUT LABEL
   ============================================ */

.ph-input__label {
  display: block;
  margin-block-end: var(--ph-comp-input-label-gap, 4px);
  font-family: var(--ph-comp-input-outlined-label-font);
  font-size: var(--ph-comp-input-outlined-label-size);
  font-weight: var(--ph-comp-input-outlined-label-weight);
  color: var(--ph-comp-input-outlined-label-color);
}

/* Focus state - label color changes to primary */
.ph-input-container:focus-within + .ph-input__label,
.ph-input-wrapper:has(.ph-input-container:focus-within) .ph-input__label {
  color: var(--ph-sys-color-primary);
}

/* Error state - label color changes to error */
.ph-input-wrapper[data-error='true'] .ph-input__label {
  color: var(--ph-sys-color-error);
}

/* Disabled state */
.ph-input-wrapper[data-disabled='true'] .ph-input__label {
  color: color-mix(in oklch, var(--ph-sys-color-on-surface) 38%, transparent);
}

/* ============================================
   SUPPORTING TEXT (Helper / Error)
   ============================================ */

.ph-input__supporting-text {
  display: block;
  margin-block-start: var(--ph-comp-input-supporting-text-gap, 4px);
  font-family: var(--ph-comp-input-outlined-supporting-text-font);
  font-size: var(--ph-comp-input-outlined-supporting-text-size);
  color: var(--ph-comp-input-outlined-supporting-text-color);
}

/* Error state */
.ph-input-wrapper[data-error='true'] .ph-input__supporting-text {
  color: var(--ph-sys-color-error);
}

/* Disabled state */
.ph-input-wrapper[data-disabled='true'] .ph-input__supporting-text {
  color: color-mix(in oklch, var(--ph-sys-color-on-surface) 38%, transparent);
}

/* ============================================
   VARIANT: OUTLINED (Default)
   ============================================ */

.ph-input-container[data-variant='outlined'] {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  background-color: var(--ph-comp-input-outlined-container-color);
  border: var(--ph-comp-input-outlined-outline-width) solid var(--ph-comp-input-outlined-outline-color);
  border-radius: var(--ph-comp-input-outlined-container-shape);
  transition:
    border-color var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
    border-width var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, cubic-bezier(0.2, 0, 1));
}

/* Outlined - Sizes */
.ph-input-container[data-variant='outlined'][data-size='sm'] {
  height: var(--ph-comp-input-outlined-container-height-sm);
  padding-inline: var(--ph-comp-input-outlined-padding-inline-sm);
  gap: var(--ph-comp-input-outlined-icon-gap-sm);
}

.ph-input-container[data-variant='outlined'][data-size='md'] {
  height: var(--ph-comp-input-outlined-container-height-md);
  padding-inline: var(--ph-comp-input-outlined-padding-inline-md);
  gap: var(--ph-comp-input-outlined-icon-gap-md);
}

.ph-input-container[data-variant='outlined'][data-size='lg'] {
  height: var(--ph-comp-input-outlined-container-height-lg);
  padding-inline: var(--ph-comp-input-outlined-padding-inline-lg);
  gap: var(--ph-comp-input-outlined-icon-gap-lg);
}

/* Outlined - Hover state */
.ph-input-container[data-variant='outlined']:hover:not([data-disabled='true']) {
  border-color: var(--ph-sys-color-on-surface);
}

/* Outlined - Focus state */
.ph-input-container[data-variant='outlined']:focus-within:not([data-disabled='true']):not([data-error='true']) {
  border-color: var(--ph-sys-color-primary);
  border-width: 2px;
  /* Compensate for border width increase to prevent layout shift */
  padding-inline: calc(var(--ph-comp-input-outlined-padding-inline-md) - 1px);
}

.ph-input-container[data-variant='outlined'][data-size='sm']:focus-within:not([data-disabled='true']):not([data-error='true']) {
  padding-inline: calc(var(--ph-comp-input-outlined-padding-inline-sm) - 1px);
}

.ph-input-container[data-variant='outlined'][data-size='lg']:focus-within:not([data-disabled='true']):not([data-error='true']) {
  padding-inline: calc(var(--ph-comp-input-outlined-padding-inline-lg) - 1px);
}

/* Outlined - Error state */
.ph-input-container[data-variant='outlined'][data-error='true'] {
  border-color: var(--ph-sys-color-error);
  border-width: 2px;
  /* Compensate for border width increase */
  padding-inline: calc(var(--ph-comp-input-outlined-padding-inline-md) - 1px);
}

.ph-input-container[data-variant='outlined'][data-size='sm'][data-error='true'] {
  padding-inline: calc(var(--ph-comp-input-outlined-padding-inline-sm) - 1px);
}

.ph-input-container[data-variant='outlined'][data-size='lg'][data-error='true'] {
  padding-inline: calc(var(--ph-comp-input-outlined-padding-inline-lg) - 1px);
}

/* Outlined - Disabled state */
.ph-input-container[data-variant='outlined'][data-disabled='true'] {
  border-color: color-mix(in oklch, var(--ph-sys-color-on-surface) 12%, transparent);
  pointer-events: none;
}

/* ============================================
   VARIANT: FILLED
   ============================================ */

.ph-input-container[data-variant='filled'] {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  background-color: var(--ph-comp-input-filled-container-color);
  border-radius: var(--ph-comp-input-filled-container-shape) var(--ph-comp-input-filled-container-shape) 0 0;
  border-bottom: var(--ph-comp-input-filled-indicator-height) solid var(--ph-comp-input-filled-indicator-color);
  transition:
    border-bottom-color var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
    border-bottom-width var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Filled - State layer for hover */
.ph-input-container[data-variant='filled']::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--ph-sys-color-on-surface);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.ph-input-container[data-variant='filled']:hover:not([data-disabled='true'])::before {
  opacity: var(--ph-sys-state-hover-opacity, 0.08);
}

/* Filled - Sizes */
.ph-input-container[data-variant='filled'][data-size='sm'] {
  height: var(--ph-comp-input-filled-container-height-sm);
  padding-inline: var(--ph-comp-input-filled-padding-inline-sm);
  gap: var(--ph-comp-input-filled-icon-gap-sm);
}

.ph-input-container[data-variant='filled'][data-size='md'] {
  height: var(--ph-comp-input-filled-container-height-md);
  padding-inline: var(--ph-comp-input-filled-padding-inline-md);
  gap: var(--ph-comp-input-filled-icon-gap-md);
}

.ph-input-container[data-variant='filled'][data-size='lg'] {
  height: var(--ph-comp-input-filled-container-height-lg);
  padding-inline: var(--ph-comp-input-filled-padding-inline-lg);
  gap: var(--ph-comp-input-filled-icon-gap-lg);
}

/* Filled - Hover state */
.ph-input-container[data-variant='filled']:hover:not([data-disabled='true']) {
  border-bottom-color: var(--ph-sys-color-on-surface);
}

/* Filled - Focus state */
.ph-input-container[data-variant='filled']:focus-within:not([data-disabled='true']):not([data-error='true']) {
  border-bottom-color: var(--ph-sys-color-primary);
  border-bottom-width: 2px;
}

/* Filled - Error state */
.ph-input-container[data-variant='filled'][data-error='true'] {
  border-bottom-color: var(--ph-sys-color-error);
  border-bottom-width: 2px;
}

/* Filled - Disabled state */
.ph-input-container[data-variant='filled'][data-disabled='true'] {
  background-color: color-mix(in oklch, var(--ph-sys-color-on-surface) 4%, transparent);
  border-bottom-color: color-mix(in oklch, var(--ph-sys-color-on-surface) 12%, transparent);
  pointer-events: none;
}

/* ============================================
   INPUT ELEMENT (Both Variants)
   ============================================ */

.ph-input-element {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--ph-comp-input-outlined-input-text-font);
  font-size: var(--ph-comp-input-outlined-input-text-size-md);
  font-weight: var(--ph-comp-input-outlined-input-text-weight);
  color: var(--ph-comp-input-outlined-input-text-color);
  caret-color: var(--ph-comp-input-outlined-caret-color);
  position: relative;
  z-index: 1;
}

/* Placeholder */
.ph-input-element::placeholder {
  color: var(--ph-comp-input-outlined-placeholder-color);
}

/* Input text sizes */
.ph-input-container[data-size='sm'] .ph-input-element {
  font-size: var(--ph-comp-input-outlined-input-text-size-sm);
}

.ph-input-container[data-size='md'] .ph-input-element {
  font-size: var(--ph-comp-input-outlined-input-text-size-md);
}

.ph-input-container[data-size='lg'] .ph-input-element {
  font-size: var(--ph-comp-input-outlined-input-text-size-lg);
}

/* Disabled state */
.ph-input-container[data-disabled='true'] .ph-input-element {
  color: color-mix(in oklch, var(--ph-sys-color-on-surface) 38%, transparent);
  cursor: not-allowed;
}

.ph-input-container[data-disabled='true'] .ph-input-element::placeholder {
  color: color-mix(in oklch, var(--ph-sys-color-on-surface) 38%, transparent);
}

/* Error state - caret color */
.ph-input-container[data-error='true'] .ph-input-element {
  caret-color: var(--ph-sys-color-error);
}

/* Textarea specific */
textarea.ph-input-element {
  resize: vertical;
  min-height: 80px;
  padding-block: var(--ph-comp-input-outlined-padding-block-md);
}

.ph-input-container[data-size='sm'] textarea.ph-input-element {
  padding-block: var(--ph-comp-input-outlined-padding-block-sm);
}

.ph-input-container[data-size='lg'] textarea.ph-input-element {
  padding-block: var(--ph-comp-input-outlined-padding-block-lg);
}

/* ============================================
   ICONS (Leading & Trailing)
   ============================================ */

.ph-input__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ph-comp-input-outlined-icon-color);
  position: relative;
  z-index: 1;
}

.ph-input__icon svg,
.ph-input__icon img {
  width: 100%;
  height: 100%;
}

/* Icon sizes */
.ph-input-container[data-size='sm'] .ph-input__icon {
  width: var(--ph-comp-input-outlined-icon-size-sm);
  height: var(--ph-comp-input-outlined-icon-size-sm);
}

.ph-input-container[data-size='md'] .ph-input__icon {
  width: var(--ph-comp-input-outlined-icon-size-md);
  height: var(--ph-comp-input-outlined-icon-size-md);
}

.ph-input-container[data-size='lg'] .ph-input__icon {
  width: var(--ph-comp-input-outlined-icon-size-lg);
  height: var(--ph-comp-input-outlined-icon-size-lg);
}

/* Disabled state */
.ph-input-container[data-disabled='true'] .ph-input__icon {
  color: color-mix(in oklch, var(--ph-sys-color-on-surface) 38%, transparent);
}

/* Error icon */
.ph-input__icon--error {
  color: var(--ph-comp-input-error-icon-color);
}

/* ============================================
   FOCUS RING (Accessibility)
   ============================================ */

.ph-input-container:focus-within {
  outline: var(--ph-sys-focus-ring-width, 2px) solid transparent;
  outline-offset: var(--ph-sys-focus-ring-offset, 2px);
}

/* Only show focus ring for keyboard navigation */
.ph-input-container:focus-within:focus-visible {
  outline-color: var(--ph-sys-focus-ring-color, var(--ph-sys-color-primary));
}
.card {
}

.ph-card {
  /* background-image: linear-gradient(159deg, var(--ph-color-palette-neutral-100), var(--ph-color-palette-neutral-98)); */
}

.ph-card[data-gradient-background='true'] {
  background-image: linear-gradient(
    159deg,
    var(--ph-color-palette-neutral-100),
    var(--ph-color-palette-neutral-98)
  );
}

.ph-card[data-border='true'][data-border-style='solid'] {
  border: 1px solid var(--md-outline-variant);
}

.ph-card[data-border='true'][data-border-style='solid']:hover {
  border: 1px solid var(--md-outline-variant-hover);
}

.ph-card {
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--ph-border-color-1), var(--ph-border-color-2))
      border-box;
  border: var(--ph-border-width) var(--ph-border-style) var(--ph-border-color);
  --ph-border-color-1: var(--md-outline);
  --ph-border-color-2: var(--md-outline-variant);
  /* border: 1px solid
    linear-gradient(
      180deg,
      var(--ph-color-palette-primary-50),
      var(--ph-color-palette-secondary-50)
    ); */
}
.responsive-dialog {
}
.responsive-dialog__wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.responsive-dialog-action-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  min-height: 4rem;
  transition: transform 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Extra spacing for mobile rounded corners */
  /* background-color: var(--md-surface-container); */
  /* border-top: 1px solid var(--md-surface-container-variant); */
}

.dialog-content-wrapper {
  flex: 1;
}
/* settings for mobile */

@media (max-width: 768px) {
  .responsive-dialog__wrapper {
    max-height: calc(100svh - 80px);
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
  }
  .responsive-dialog__wrapper .dialog-content-wrapper {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
  }
  .responsive-dialog__wrapper[data-is-full-height='true'] {
    max-height: calc(100svh);
    height: 100svh;
  }

  .responsive-dialog__wrapper[data-is-full-height='true']
    .dialog-content-wrapper {
    height: 100%;
  }
}

/* Settings for desktop */
@media (min-width: 768px) {
  .responsive-dialog__wrapper {
    max-height: calc(100svh - 80px);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
}

/* Animation on mobile */
@media (max-width: 768px) {
  .responsive-dialog__wrapper[data-is-open='true'] {
    transform: translateY(0);
  }

  .responsive-dialog__wrapper[data-is-open='false'] {
    transform: translateY(100svh);
  }
}

/* Animation on desktop */
@media (min-width: 768px) {
  .responsive-dialog__wrapper[data-is-open='true'] {
    transform: translateX(0);
  }
  .responsive-dialog__wrapper[data-is-open='false'] {
    transform: translateX(100%);
  }
}
.dialog-content {
  flex: 1;
}
:root {
  --black-a1: rgba(0, 0, 0, 0.05);
  --black-a2: rgba(0, 0, 0, 0.1);
  --black-a3: rgba(0, 0, 0, 0.15);
  --black-a4: rgba(0, 0, 0, 0.2);
  --black-a5: rgba(0, 0, 0, 0.3);
  --black-a6: rgba(0, 0, 0, 0.4);
  --black-a7: rgba(0, 0, 0, 0.5);
  --black-a8: rgba(0, 0, 0, 0.6);
  --black-a9: rgba(0, 0, 0, 0.7);
  --black-a10: rgba(0, 0, 0, 0.8);
  --black-a11: rgba(0, 0, 0, 0.9);
  --black-a12: rgba(0, 0, 0, 0.95);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --black-a1: color(display-p3 0 0 0 / 0.05);
      --black-a2: color(display-p3 0 0 0 / 0.1);
      --black-a3: color(display-p3 0 0 0 / 0.15);
      --black-a4: color(display-p3 0 0 0 / 0.2);
      --black-a5: color(display-p3 0 0 0 / 0.3);
      --black-a6: color(display-p3 0 0 0 / 0.4);
      --black-a7: color(display-p3 0 0 0 / 0.5);
      --black-a8: color(display-p3 0 0 0 / 0.6);
      --black-a9: color(display-p3 0 0 0 / 0.7);
      --black-a10: color(display-p3 0 0 0 / 0.8);
      --black-a11: color(display-p3 0 0 0 / 0.9);
      --black-a12: color(display-p3 0 0 0 / 0.95);
    }
  }
}

:root, .light, .light-theme {
  --mauve-1: #fdfcfd;
  --mauve-2: #faf9fb;
  --mauve-3: #f2eff3;
  --mauve-4: #eae7ec;
  --mauve-5: #e3dfe6;
  --mauve-6: #dbd8e0;
  --mauve-7: #d0cdd7;
  --mauve-8: #bcbac7;
  --mauve-9: #8e8c99;
  --mauve-10: #84828e;
  --mauve-11: #65636d;
  --mauve-12: #211f26;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --mauve-1: color(display-p3 0.991 0.988 0.992);
      --mauve-2: color(display-p3 0.98 0.976 0.984);
      --mauve-3: color(display-p3 0.946 0.938 0.952);
      --mauve-4: color(display-p3 0.915 0.906 0.925);
      --mauve-5: color(display-p3 0.886 0.876 0.901);
      --mauve-6: color(display-p3 0.856 0.846 0.875);
      --mauve-7: color(display-p3 0.814 0.804 0.84);
      --mauve-8: color(display-p3 0.735 0.728 0.777);
      --mauve-9: color(display-p3 0.555 0.549 0.596);
      --mauve-10: color(display-p3 0.514 0.508 0.552);
      --mauve-11: color(display-p3 0.395 0.388 0.424);
      --mauve-12: color(display-p3 0.128 0.122 0.147);
    }
  }
}

:root, .light, .light-theme {
  --violet-1: #fdfcfe;
  --violet-2: #faf8ff;
  --violet-3: #f4f0fe;
  --violet-4: #ebe4ff;
  --violet-5: #e1d9ff;
  --violet-6: #d4cafe;
  --violet-7: #c2b5f5;
  --violet-8: #aa99ec;
  --violet-9: #6e56cf;
  --violet-10: #654dc4;
  --violet-11: #6550b9;
  --violet-12: #2f265f;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --violet-1: color(display-p3 0.991 0.988 0.995);
      --violet-2: color(display-p3 0.978 0.974 0.998);
      --violet-3: color(display-p3 0.953 0.943 0.993);
      --violet-4: color(display-p3 0.916 0.897 1);
      --violet-5: color(display-p3 0.876 0.851 1);
      --violet-6: color(display-p3 0.825 0.793 0.981);
      --violet-7: color(display-p3 0.752 0.712 0.943);
      --violet-8: color(display-p3 0.654 0.602 0.902);
      --violet-9: color(display-p3 0.417 0.341 0.784);
      --violet-10: color(display-p3 0.381 0.306 0.741);
      --violet-11: color(display-p3 0.383 0.317 0.702);
      --violet-12: color(display-p3 0.179 0.15 0.359);
    }
  }
}

.PopoverContent {
  border-radius: 4px;
  /* padding: 16px; */
  /* width: 260px; */
  width: var(--popover-width);
  background-color: var(--md-surface);
  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  z-index: 20;
}

/* .PopoverContent:focus {
   box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
    hsl(206 22% 7% / 20%) 0px 10px 20px -15px, 0 0 0 2px var(--violet-7); 
}*/

.PopoverContent[data-state='open'][data-side='top'] {
  animation-name: slideDownAndFade;
}

.PopoverContent[data-state='open'][data-side='right'] {
  animation-name: slideLeftAndFade;
}

.PopoverContent[data-state='open'][data-side='bottom'] {
  animation-name: slideUpAndFade;
}

.PopoverContent[data-state='open'][data-side='left'] {
  animation-name: slideRightAndFade;
}

.PopoverArrow {
  fill: white;
}

.PopoverClose {
  font-family: inherit;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--violet-11);
  position: absolute;
  top: 5px;
  right: 5px;
}

.PopoverClose:hover {
  background-color: var(--violet-4);
}

.PopoverClose:focus {
  box-shadow: 0 0 0 2px var(--violet-7);
}

.IconButton {
  font-family: inherit;
  border-radius: 100%;
  height: 35px;
  width: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--violet-11);
  background-color: white;
  box-shadow: 0 2px 10px var(--black-a7);
}

.IconButton:hover {
  background-color: var(--violet-3);
}

.IconButton:focus {
  box-shadow: 0 0 0 2px black;
}

@keyframes slideUpAndFade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRightAndFade {
  from {
    opacity: 0;
    transform: translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDownAndFade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeftAndFade {
  from {
    opacity: 0;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Slider Styles */
.SliderRoot {
  position: relative;
  display: flex;
  align-items: center;
  user-select: none;
  touch-action: none;
}

/* Horizontal Orientation (default) */
.SliderRoot[data-orientation='horizontal'] {
  width: 100%;
  height: 20px;
}

/* Vertical Orientation */
.SliderRoot[data-orientation='vertical'] {
  flex-direction: column;
  width: 20px;
  height: 100px;
}

/* Track */
.SliderTrack {
  position: relative;
  flex-grow: 1;
  background-color: #e2e8f0;
  border-radius: 4px;
}

.SliderTrack[data-orientation='horizontal'] {
  height: 8px;
}

.SliderTrack[data-orientation='vertical'] {
  width: 8px;
}

/* Range (filled portion) */
.SliderRange {
  position: absolute;
  background-color: #667eea;
  border-radius: 4px;
}

.SliderRange[data-orientation='horizontal'] {
  height: 100%;
}

.SliderRange[data-orientation='vertical'] {
  width: 100%;
}

/* Thumb */
.SliderThumb {
  display: block;
  width: 20px;
  height: 20px;
  background-color: #667eea;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  transition: all 0.2s;
  cursor: pointer;
}

.SliderThumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
}

.SliderThumb:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}
:root {
  --black-a1: rgba(0, 0, 0, 0.05);
  --black-a2: rgba(0, 0, 0, 0.1);
  --black-a3: rgba(0, 0, 0, 0.15);
  --black-a4: rgba(0, 0, 0, 0.2);
  --black-a5: rgba(0, 0, 0, 0.3);
  --black-a6: rgba(0, 0, 0, 0.4);
  --black-a7: rgba(0, 0, 0, 0.5);
  --black-a8: rgba(0, 0, 0, 0.6);
  --black-a9: rgba(0, 0, 0, 0.7);
  --black-a10: rgba(0, 0, 0, 0.8);
  --black-a11: rgba(0, 0, 0, 0.9);
  --black-a12: rgba(0, 0, 0, 0.95);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --black-a1: color(display-p3 0 0 0 / 0.05);
      --black-a2: color(display-p3 0 0 0 / 0.1);
      --black-a3: color(display-p3 0 0 0 / 0.15);
      --black-a4: color(display-p3 0 0 0 / 0.2);
      --black-a5: color(display-p3 0 0 0 / 0.3);
      --black-a6: color(display-p3 0 0 0 / 0.4);
      --black-a7: color(display-p3 0 0 0 / 0.5);
      --black-a8: color(display-p3 0 0 0 / 0.6);
      --black-a9: color(display-p3 0 0 0 / 0.7);
      --black-a10: color(display-p3 0 0 0 / 0.8);
      --black-a11: color(display-p3 0 0 0 / 0.9);
      --black-a12: color(display-p3 0 0 0 / 0.95);
    }
  }
}

.SwitchRoot {
  width: 42px;
  height: 25px;
  background-color: var(--md-surface-container-low);
  border-radius: 9999px;
  position: relative;
  box-shadow: 0 2px 10px var(--md-outline);
  -webkit-tap-highlight-color: var(--md-primary-container);
  &:focus {
    box-shadow: 0 0 0 2px var(--md-primary-container);
  }
  &[data-state='checked'] {
    background-color: var(--md-primary-container);
  }
}

.SwitchThumb {
  display: block;
  width: 21px;
  height: 21px;
  background-color: white;
  border-radius: 9999px;
  box-shadow: 0 2px 2px var(--black-a7);
  transition: transform 100ms;
  transform: translateX(2px);
  will-change: transform;
  &[data-state='checked'] {
    transform: translateX(19px);
  }
}

.Label {
  color: white;
  font-size: 15px;
  line-height: 1;
  user-select: none;
}
.ph-expandable-row {
  border: none;
  background: transparent;
  padding: 0.5rem 0.25rem;
  border-radius: 0.25rem;
  outline: none;
}

.ph-expandable-row:focus-visible {
  outline: 2px solid var(--md-primary-container, currentColor);
  outline-offset: 2px;
}

.ph-expandable-row-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* RadioCard - Theme-based colors with CSS color-mix */

/* Base RadioCard - Default state */
.radio-card {
  /* Colors only - layout handled by Tailwind */
  background-color: var(--md-sys-color-surface, var(--ph-color-surface-background));
  border-color: color-mix(in srgb, var(--md-sys-color-outline, var(--ph-color-outline-default)) 40%, transparent);
  
  /* Ensure min-width for proper grid sizing */
  min-width: 0;
}

/* Hover state - lighten border */
.radio-card:not([data-disabled="true"]):hover {
  border-color: var(--md-sys-color-outline, var(--ph-color-outline-default));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--md-sys-color-shadow, #000) 10%, transparent);
}

/* Selected state - Primary (default) */
.radio-card[data-selected="true"][data-color-scheme="primary"],
.radio-card[data-selected="true"]:not([data-color-scheme]) {
  background-color: var(--md-sys-color-primary-container, var(--ph-color-primary-container));
  border-color: var(--md-sys-color-primary, var(--ph-color-primary-default));
}

.radio-card[data-selected="true"][data-color-scheme="primary"]:not([data-disabled="true"]):hover,
.radio-card[data-selected="true"]:not([data-color-scheme]):not([data-disabled="true"]):hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--md-sys-color-primary, var(--ph-color-primary-default)) 20%, transparent);
}

/* Selected state - Secondary */
.radio-card[data-selected="true"][data-color-scheme="secondary"] {
  background-color: var(--md-sys-color-secondary-container, var(--ph-color-secondary-container));
  border-color: var(--md-sys-color-secondary, var(--ph-color-secondary-default));
}

.radio-card[data-selected="true"][data-color-scheme="secondary"]:not([data-disabled="true"]):hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--md-sys-color-secondary, var(--ph-color-secondary-default)) 20%, transparent);
}

/* Focus state - Primary */
.radio-card[data-color-scheme="primary"]:focus-visible,
.radio-card:not([data-color-scheme]):focus-visible {
  border-color: var(--md-sys-color-primary, var(--ph-color-primary-default));
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary, var(--ph-color-primary-default)) 20%, transparent);
}

/* Focus state - Secondary */
.radio-card[data-color-scheme="secondary"]:focus-visible {
  border-color: var(--md-sys-color-secondary, var(--ph-color-secondary-default));
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-secondary, var(--ph-color-secondary-default)) 20%, transparent);
}

/* Active/Pressed state - data attribute driven */
.radio-card:active:not([data-disabled="true"]) {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Disabled state */
.radio-card[data-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Checkmark badge - Primary */
.radio-card[data-color-scheme="primary"] .radio-card__check,
.radio-card:not([data-color-scheme]) .radio-card__check {
  background-color: var(--md-sys-color-primary, var(--ph-color-primary-default));
  color: var(--md-sys-color-on-primary, #ffffff);
}

/* Checkmark badge - Secondary */
.radio-card[data-color-scheme="secondary"] .radio-card__check {
  background-color: var(--md-sys-color-secondary, var(--ph-color-secondary-default));
  color: var(--md-sys-color-on-secondary, #ffffff);
}

/* Icon colors - Default */
.radio-card__icon {
  color: color-mix(in srgb, var(--md-sys-color-on-surface, var(--ph-color-on-surface)) 60%, transparent);
  transition: color 200ms;
}

/* Icon colors - Selected Primary */
.radio-card[data-selected="true"][data-color-scheme="primary"] .radio-card__icon,
.radio-card[data-selected="true"]:not([data-color-scheme]) .radio-card__icon {
  color: var(--md-sys-color-primary, var(--ph-color-primary-default));
}

/* Icon colors - Selected Secondary */
.radio-card[data-selected="true"][data-color-scheme="secondary"] .radio-card__icon {
  color: var(--md-sys-color-secondary, var(--ph-color-secondary-default));
}

/* Label colors - Default */
.radio-card__label {
  color: var(--md-sys-color-on-surface, var(--ph-color-on-surface));
  transition: color 200ms;
}

/* Label colors - Selected Primary */
.radio-card[data-selected="true"][data-color-scheme="primary"] .radio-card__label,
.radio-card[data-selected="true"]:not([data-color-scheme]) .radio-card__label {
  color: var(--md-sys-color-on-primary-container, var(--ph-color-on-primary-container));
  font-weight: 600;
}

/* Label colors - Selected Secondary */
.radio-card[data-selected="true"][data-color-scheme="secondary"] .radio-card__label {
  color: var(--md-sys-color-on-secondary-container, var(--ph-color-on-secondary-container));
  font-weight: 600;
}

/* Description colors - Default */
.radio-card__description {
  color: color-mix(in srgb, var(--md-sys-color-on-surface, var(--ph-color-on-surface)) 60%, transparent);
  transition: color 200ms;
}

/* Description colors - Selected Primary */
.radio-card[data-selected="true"][data-color-scheme="primary"] .radio-card__description,
.radio-card[data-selected="true"]:not([data-color-scheme]) .radio-card__description {
  color: color-mix(in srgb, var(--md-sys-color-on-primary-container, var(--ph-color-on-primary-container)) 80%, transparent);
}

/* Description colors - Selected Secondary */
.radio-card[data-selected="true"][data-color-scheme="secondary"] .radio-card__description {
  color: color-mix(in srgb, var(--md-sys-color-on-secondary-container, var(--ph-color-on-secondary-container)) 80%, transparent);
}

/* Checkmark animation */
@keyframes scale-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-scale-in {
  animation: scale-in 200ms cubic-bezier(0.2, 0, 0, 1);
}

/* Grid group - ensure proper layout */
.radio-card-group {
  /* Grid layout handled by Tailwind, just ensure no conflicts */
  display: grid;
}

/* Responsive mobile layout - single column with horizontal card layout */
@media (max-width: 640px) {
  .radio-card-group:not([data-columns]) {
    grid-template-columns: 1fr !important;
  }
  
  .radio-card {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }
  
  .radio-card[data-size="sm"] {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  
  .radio-card[data-size="md"] {
    padding: 12px 16px !important;
    gap: 12px !important;
  }
  
  .radio-card[data-size="lg"] {
    padding: 14px 18px !important;
    gap: 14px !important;
  }
  
  .radio-card[data-size="sm"] .radio-card__icon {
    width: 32px !important;
    height: 32px !important;
  }
  
  .radio-card[data-size="md"] .radio-card__icon {
    width: 40px !important;
    height: 40px !important;
  }
  
  .radio-card[data-size="lg"] .radio-card__icon {
    width: 48px !important;
    height: 48px !important;
  }
  
  .radio-card__content {
    align-items: flex-start !important;
    flex: 1;
  }
  
  .radio-card__label,
  .radio-card__description {
    text-align: left !important;
  }
}
:root {
  --black-a1: rgba(0, 0, 0, 0.05);
  --black-a2: rgba(0, 0, 0, 0.1);
  --black-a3: rgba(0, 0, 0, 0.15);
  --black-a4: rgba(0, 0, 0, 0.2);
  --black-a5: rgba(0, 0, 0, 0.3);
  --black-a6: rgba(0, 0, 0, 0.4);
  --black-a7: rgba(0, 0, 0, 0.5);
  --black-a8: rgba(0, 0, 0, 0.6);
  --black-a9: rgba(0, 0, 0, 0.7);
  --black-a10: rgba(0, 0, 0, 0.8);
  --black-a11: rgba(0, 0, 0, 0.9);
  --black-a12: rgba(0, 0, 0, 0.95);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --black-a1: color(display-p3 0 0 0 / 0.05);
      --black-a2: color(display-p3 0 0 0 / 0.1);
      --black-a3: color(display-p3 0 0 0 / 0.15);
      --black-a4: color(display-p3 0 0 0 / 0.2);
      --black-a5: color(display-p3 0 0 0 / 0.3);
      --black-a6: color(display-p3 0 0 0 / 0.4);
      --black-a7: color(display-p3 0 0 0 / 0.5);
      --black-a8: color(display-p3 0 0 0 / 0.6);
      --black-a9: color(display-p3 0 0 0 / 0.7);
      --black-a10: color(display-p3 0 0 0 / 0.8);
      --black-a11: color(display-p3 0 0 0 / 0.9);
      --black-a12: color(display-p3 0 0 0 / 0.95);
    }
  }
}

:root, .light, .light-theme {
  --green-1: #fbfefc;
  --green-2: #f4fbf6;
  --green-3: #e6f6eb;
  --green-4: #d6f1df;
  --green-5: #c4e8d1;
  --green-6: #adddc0;
  --green-7: #8eceaa;
  --green-8: #5bb98b;
  --green-9: #30a46c;
  --green-10: #2b9a66;
  --green-11: #218358;
  --green-12: #193b2d;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --green-1: color(display-p3 0.986 0.996 0.989);
      --green-2: color(display-p3 0.963 0.983 0.967);
      --green-3: color(display-p3 0.913 0.964 0.925);
      --green-4: color(display-p3 0.859 0.94 0.879);
      --green-5: color(display-p3 0.796 0.907 0.826);
      --green-6: color(display-p3 0.718 0.863 0.761);
      --green-7: color(display-p3 0.61 0.801 0.675);
      --green-8: color(display-p3 0.451 0.715 0.559);
      --green-9: color(display-p3 0.332 0.634 0.442);
      --green-10: color(display-p3 0.308 0.595 0.417);
      --green-11: color(display-p3 0.19 0.5 0.32);
      --green-12: color(display-p3 0.132 0.228 0.18);
    }
  }
}

:root, .light, .light-theme {
  --mauve-1: #fdfcfd;
  --mauve-2: #faf9fb;
  --mauve-3: #f2eff3;
  --mauve-4: #eae7ec;
  --mauve-5: #e3dfe6;
  --mauve-6: #dbd8e0;
  --mauve-7: #d0cdd7;
  --mauve-8: #bcbac7;
  --mauve-9: #8e8c99;
  --mauve-10: #84828e;
  --mauve-11: #65636d;
  --mauve-12: #211f26;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --mauve-1: color(display-p3 0.991 0.988 0.992);
      --mauve-2: color(display-p3 0.98 0.976 0.984);
      --mauve-3: color(display-p3 0.946 0.938 0.952);
      --mauve-4: color(display-p3 0.915 0.906 0.925);
      --mauve-5: color(display-p3 0.886 0.876 0.901);
      --mauve-6: color(display-p3 0.856 0.846 0.875);
      --mauve-7: color(display-p3 0.814 0.804 0.84);
      --mauve-8: color(display-p3 0.735 0.728 0.777);
      --mauve-9: color(display-p3 0.555 0.549 0.596);
      --mauve-10: color(display-p3 0.514 0.508 0.552);
      --mauve-11: color(display-p3 0.395 0.388 0.424);
      --mauve-12: color(display-p3 0.128 0.122 0.147);
    }
  }
}

:root, .light, .light-theme {
  --violet-1: #fdfcfe;
  --violet-2: #faf8ff;
  --violet-3: #f4f0fe;
  --violet-4: #ebe4ff;
  --violet-5: #e1d9ff;
  --violet-6: #d4cafe;
  --violet-7: #c2b5f5;
  --violet-8: #aa99ec;
  --violet-9: #6e56cf;
  --violet-10: #654dc4;
  --violet-11: #6550b9;
  --violet-12: #2f265f;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --violet-1: color(display-p3 0.991 0.988 0.995);
      --violet-2: color(display-p3 0.978 0.974 0.998);
      --violet-3: color(display-p3 0.953 0.943 0.993);
      --violet-4: color(display-p3 0.916 0.897 1);
      --violet-5: color(display-p3 0.876 0.851 1);
      --violet-6: color(display-p3 0.825 0.793 0.981);
      --violet-7: color(display-p3 0.752 0.712 0.943);
      --violet-8: color(display-p3 0.654 0.602 0.902);
      --violet-9: color(display-p3 0.417 0.341 0.784);
      --violet-10: color(display-p3 0.381 0.306 0.741);
      --violet-11: color(display-p3 0.383 0.317 0.702);
      --violet-12: color(display-p3 0.179 0.15 0.359);
    }
  }
}

.TabsRoot {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* width: 300px; */
  /* box-shadow: 0 2px 10px var(--black-a4); */
}

.TabsList {
  flex-shrink: 0;
  display: flex;
  /* border-bottom: 1px solid var(--mauve-6); */
  border-bottom: 1px solid var(--md-outline-variant);
}

.TabsTrigger {
  font-family: inherit;
  /* background-color: white; */
  padding: 12px 16px;
  height: 45px;
  /* flex: 1; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1.25;
  color: color-mix(in oklab, var(--md-on-surface-variant) 80%, #fff);
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
  font-weight: 500;
  /* // To cover bottom border */
  transform: translateY(1px);
  transition: all 0.3s ease;
}

.TabsTrigger:first-child {
  border-top-left-radius: 6px;
}

.TabsTrigger:last-child {
  border-top-right-radius: 6px;
}

.TabsTrigger:hover {
  color: var(--md-on-surface);
}

.TabsTrigger[data-state='active'] {
  color: #4b0164;
  font-weight: 600;
  border-bottom: 3px solid var(--md-primary-container);
  /* color: var(--violet-11); */
  /* box-shadow: inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor; */
}

.TabsTrigger:focus {
  position: relative;
  /* box-shadow: 0 0 0 2px black; */
}

.TabsContent {
  flex-grow: 1;
  padding: 20px;
  background-color: white;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  outline: none;
}

.TabsContent:focus {
  box-shadow: 0 0 0 2px black;
}

.Text {
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--mauve-11);
  font-size: 15px;
  line-height: 1.5;
}

.Fieldset {
  margin-bottom: 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.Label {
  font-size: 13px;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--violet-12);
  display: block;
  user-select: none;
}

.Input {
  flex: 1 0 auto;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 15px;
  line-height: 1;
  color: var(--violet-11);
  box-shadow: 0 0 0 1px var(--violet-7);
  height: 35px;
}

.Input:focus {
  box-shadow: 0 0 0 2px var(--violet-8);
}

.Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  height: 35px;
}

.Button.green {
  background-color: var(--green-4);
  color: var(--green-11);
}

.Button.green:hover {
  background-color: var(--green-5);
}

.Button.green:focus {
  box-shadow: 0 0 0 2px var(--green-7);
}
.quantity-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.quantity-select:hover {
}

.quantity-button[data-style='square'] {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--md-primary-container);
  color: var(--md-on-primary-container);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--md-primary-container-variant);
}

.quantity-button[data-style='round'] {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 0;
  /* border-color: var(--md-outline); */
  /* border-width: 1px; */
  /* background-color: var(--md-surface); */
  background-color: var(--md-surface-container-low);
  color: var(--md-on-surface-variant);
  opacity: 0.7;
  cursor: pointer;
  /* box-shadow: 0 0 0 1px var(--md-outline); */
}

/* Slider */
.slick-loading .slick-list
{
    background: #fff url('/assets/ajax-loader-BcnMEykj.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('data:application/vnd.ms-fontobject;base64,AAgAAGQHAAABAAIAAAAAAAIABQkAAAAAAAABAJABAAAAAExQAQAAgCAAAAAAAAAAAAAAAAEAAAAAAAAATxDE8AAAAAAAAAAAAAAAAAAAAAAAAAoAcwBsAGkAYwBrAAAADgBSAGUAZwB1AGwAYQByAAAAFgBWAGUAcgBzAGkAbwBuACAAMQAuADAAAAAKAHMAbABpAGMAawAAAAAAAAEAAAANAIAAAwBQRkZUTW3RyK8AAAdIAAAAHEdERUYANAAGAAAHKAAAACBPUy8yT/b9sgAAAVgAAABWY21hcCIPRb0AAAHIAAABYmdhc3D//wADAAAHIAAAAAhnbHlmP5u2YAAAAzwAAAIsaGVhZAABMfsAAADcAAAANmhoZWED5QIFAAABFAAAACRobXR4BkoASgAAAbAAAAAWbG9jYQD2AaIAAAMsAAAAEG1heHAASwBHAAABOAAAACBuYW1lBSeBwgAABWgAAAFucG9zdC+zMgMAAAbYAAAARQABAAAAAQAA8MQQT18PPPUACwIAAAAAAM9xeH8AAAAAz3F4fwAlACUB2wHbAAAACAACAAAAAAAAAAEAAAHbAAAALgIAAAAAAAHbAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAHAEQAAgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAACAAAABAAAAIAAAAAAAAAAAUGZFZABAAGEhkgHg/+AALgHb/9sAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAJQAlACUAJQAAAAAAAwAAAAMAAAAcAAEAAAAAAFwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAAAYSAiIZAhkv//AAAAAABhICIhkCGS//8AAP+l3+PedN5xAAEAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGAIwAsAEWAAIAJQAlAdsB2wAYACwAAD8BNjQvASYjIg8BBhUUHwEHBhUUHwEWMzI2FAcGBwYiJyYnJjQ3Njc2MhcWF/GCBgaCBQcIBR0GBldXBgYdBQgH7x0eMjB8MDIeHR0eMjB8MDIecYIGDgaCBQUeBQcJBFhYBAkHBR4F0nwwMh4dHR4yMHwwMh4dHR4yAAAAAgAlACUB2wHbABgALAAAJTc2NTQvATc2NTQvASYjIg8BBhQfARYzMjYUBwYHBiInJicmNDc2NzYyFxYXASgdBgZXVwYGHQUIBwWCBgaCBQcIuB0eMjB8MDIeHR0eMjB8MDIecR4FBwkEWFgECQcFHgUFggYOBoIF0nwwMh4dHR4yMHwwMh4dHR4yAAABACUAJQHbAdsAEwAAABQHBgcGIicmJyY0NzY3NjIXFhcB2x0eMjB8MDIeHR0eMjB8MDIeAT58MDIeHR0eMjB8MDIeHR0eMgABACUAJQHbAdsAQwAAARUUBisBIicmPwEmIyIHBgcGBwYUFxYXFhcWMzI3Njc2MzIfARYVFAcGBwYjIicmJyYnJjQ3Njc2NzYzMhcWFzc2FxYB2woIgAsGBQkoKjodHBwSFAwLCwwUEhwcHSIeIBMGAQQDJwMCISspNC8mLBobFBERFBsaLCYvKicpHSUIDAsBt4AICgsLCScnCwwUEhwcOhwcEhQMCw8OHAMDJwMDAgQnFBQRFBsaLCZeJiwaGxQRDxEcJQgEBgAAAAAAAAwAlgABAAAAAAABAAUADAABAAAAAAACAAcAIgABAAAAAAADACEAbgABAAAAAAAEAAUAnAABAAAAAAAFAAsAugABAAAAAAAGAAUA0gADAAEECQABAAoAAAADAAEECQACAA4AEgADAAEECQADAEIAKgADAAEECQAEAAoAkAADAAEECQAFABYAogADAAEECQAGAAoAxgBzAGwAaQBjAGsAAHNsaWNrAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAHMAbABpAGMAawAgADoAIAAxADQALQA0AC0AMgAwADEANAAARm9udEZvcmdlIDIuMCA6IHNsaWNrIDogMTQtNC0yMDE0AABzAGwAaQBjAGsAAHNsaWNrAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABzAGwAaQBjAGsAAHNsaWNrAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABwAAAAEAAgECAQMAhwBECmFycm93cmlnaHQJYXJyb3dsZWZ0AAAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAGAAEABAAAAAIAAAAAAAEAAAAAzu7XsAAAAADPcXh/AAAAAM9xeH8=');
    src: url('data:application/vnd.ms-fontobject;base64,AAgAAGQHAAABAAIAAAAAAAIABQkAAAAAAAABAJABAAAAAExQAQAAgCAAAAAAAAAAAAAAAAEAAAAAAAAATxDE8AAAAAAAAAAAAAAAAAAAAAAAAAoAcwBsAGkAYwBrAAAADgBSAGUAZwB1AGwAYQByAAAAFgBWAGUAcgBzAGkAbwBuACAAMQAuADAAAAAKAHMAbABpAGMAawAAAAAAAAEAAAANAIAAAwBQRkZUTW3RyK8AAAdIAAAAHEdERUYANAAGAAAHKAAAACBPUy8yT/b9sgAAAVgAAABWY21hcCIPRb0AAAHIAAABYmdhc3D//wADAAAHIAAAAAhnbHlmP5u2YAAAAzwAAAIsaGVhZAABMfsAAADcAAAANmhoZWED5QIFAAABFAAAACRobXR4BkoASgAAAbAAAAAWbG9jYQD2AaIAAAMsAAAAEG1heHAASwBHAAABOAAAACBuYW1lBSeBwgAABWgAAAFucG9zdC+zMgMAAAbYAAAARQABAAAAAQAA8MQQT18PPPUACwIAAAAAAM9xeH8AAAAAz3F4fwAlACUB2wHbAAAACAACAAAAAAAAAAEAAAHbAAAALgIAAAAAAAHbAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAHAEQAAgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAACAAAABAAAAIAAAAAAAAAAAUGZFZABAAGEhkgHg/+AALgHb/9sAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAJQAlACUAJQAAAAAAAwAAAAMAAAAcAAEAAAAAAFwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAAAYSAiIZAhkv//AAAAAABhICIhkCGS//8AAP+l3+PedN5xAAEAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGAIwAsAEWAAIAJQAlAdsB2wAYACwAAD8BNjQvASYjIg8BBhUUHwEHBhUUHwEWMzI2FAcGBwYiJyYnJjQ3Njc2MhcWF/GCBgaCBQcIBR0GBldXBgYdBQgH7x0eMjB8MDIeHR0eMjB8MDIecYIGDgaCBQUeBQcJBFhYBAkHBR4F0nwwMh4dHR4yMHwwMh4dHR4yAAAAAgAlACUB2wHbABgALAAAJTc2NTQvATc2NTQvASYjIg8BBhQfARYzMjYUBwYHBiInJicmNDc2NzYyFxYXASgdBgZXVwYGHQUIBwWCBgaCBQcIuB0eMjB8MDIeHR0eMjB8MDIecR4FBwkEWFgECQcFHgUFggYOBoIF0nwwMh4dHR4yMHwwMh4dHR4yAAABACUAJQHbAdsAEwAAABQHBgcGIicmJyY0NzY3NjIXFhcB2x0eMjB8MDIeHR0eMjB8MDIeAT58MDIeHR0eMjB8MDIeHR0eMgABACUAJQHbAdsAQwAAARUUBisBIicmPwEmIyIHBgcGBwYUFxYXFhcWMzI3Njc2MzIfARYVFAcGBwYjIicmJyYnJjQ3Njc2NzYzMhcWFzc2FxYB2woIgAsGBQkoKjodHBwSFAwLCwwUEhwcHSIeIBMGAQQDJwMCISspNC8mLBobFBERFBsaLCYvKicpHSUIDAsBt4AICgsLCScnCwwUEhwcOhwcEhQMCw8OHAMDJwMDAgQnFBQRFBsaLCZeJiwaGxQRDxEcJQgEBgAAAAAAAAwAlgABAAAAAAABAAUADAABAAAAAAACAAcAIgABAAAAAAADACEAbgABAAAAAAAEAAUAnAABAAAAAAAFAAsAugABAAAAAAAGAAUA0gADAAEECQABAAoAAAADAAEECQACAA4AEgADAAEECQADAEIAKgADAAEECQAEAAoAkAADAAEECQAFABYAogADAAEECQAGAAoAxgBzAGwAaQBjAGsAAHNsaWNrAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAHMAbABpAGMAawAgADoAIAAxADQALQA0AC0AMgAwADEANAAARm9udEZvcmdlIDIuMCA6IHNsaWNrIDogMTQtNC0yMDE0AABzAGwAaQBjAGsAAHNsaWNrAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABzAGwAaQBjAGsAAHNsaWNrAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABwAAAAEAAgECAQMAhwBECmFycm93cmlnaHQJYXJyb3dsZWZ0AAAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAGAAEABAAAAAIAAAAAAAEAAAAAzu7XsAAAAADPcXh/AAAAAM9xeH8=') format('embedded-opentype'), url('data:font/woff;base64,d09GRk9UVE8AAAVkAAsAAAAAB1wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAi4AAAKbH/pWDkZGVE0AAAM4AAAAGgAAABxt0civR0RFRgAAA1QAAAAcAAAAIAAyAARPUy8yAAADcAAAAFIAAABgUBj/rmNtYXAAAAPEAAAAUAAAAWIiC0SwaGVhZAAABBQAAAAuAAAANgABMftoaGVhAAAERAAAABwAAAAkA+UCA2htdHgAAARgAAAADgAAAA4ESgBKbWF4cAAABHAAAAAGAAAABgAFUABuYW1lAAAEeAAAANwAAAFuBSeBwnBvc3QAAAVUAAAAEAAAACAAAwABeJw9ks9vEkEUx2cpWyeUoFYgNkHi2Wt7N3rVm3cTs3UVLC4LxIWEQvi1P3i7O1tYLJDAmlgKGEhQrsajf0j7J3jYTXrQWUrMJG+++b55n5e8NwwKBhHDMLv5kxT3ATEBxKBn3qOAl9zxHgb1MAPhHQgHkyF08Gr/L8B/Eb6zWnmCJ7AJVLubQOheArXvJ1A4EXi6j4I+Zg9F0QFKvsnlBCmXeve+sFEnb/nCptdtQ4QYhVFRAT1HrF8UQK/RL/SbmUbclsvGVFXRZKDHUE38cc4qpkbAAsuwiImvro+ufcfaOIQ6szlrmjRJDaKZKnbjN3GWKIbiIzRFUfCffuxxKOL+3LDlDVvx2TdxN84qZEsnhNBa6pgm2dAsnzbLsETdsmRFxUeHV4e+I2/ptN8TyqV8T3Dt29t7EYOuajVIw2y1Wy3M86w0zg/Fz2IvawmQAUHOVrPVfLkoScVynsqsTG0MGUs4z55nh3mnOJa+li+rl9WpPIcFfDubDeaDC+fLBdYN3QADzLauGfj4B6sZmq6CCpqmtSvF0qlUl2qf5AJIUCSlTqlb7lUG+LRfGzZGzZEyBgccMu6MuqPecNDvD4Y9Kjtj4gD+DsvKVMTcMdtqtZtmkzQstQvYje7Syep0PDSAhSOeHYXYWThEF//A/0YvYV1fSQtpKU5STtrhbQ444OtpKSWJIg3pOg8cBs7maTY1EZf07aq+hjWs7IWzdCYTGhb2CtZ47x+Uhx28AAB4nGNgYGBkAIJz765vANHnCyvqYTQAWnkHswAAeJxjYGRgYOADYgkGEGBiYARCFjAG8RgABHYAN3icY2BmYmCcwMDKwMHow5jGwMDgDqW/MkgytDAwMDGwcjKAQQMDAyOQUmCAgoA01xQGB4ZExUmMD/4/YNBjvP3/NgNEDQPjbbBKBQZGADfLDgsAAHicY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQzMCQqKClOUJz0/z9YHRLv/+L7D+8V3cuHmgAHjGwM6ELUByxUMIOZCmbgAAA5LQ8XeJxjYGRgYABiO68w73h+m68M3EwMIHC+sKIeTqsyqDLeZrwN5HIwgKUB/aYJUgAAeJxjYGRgYLzNwMCgx8QAAkA2IwMqYAIAMGIB7QIAAAACAAAlACUAJQAlAAAAAFAAAAUAAHicbY49asNAEIU/2ZJDfkiRIvXapUFCEqpcptABUrg3ZhEiQoKVfY9UqVLlGDlADpAT5e16IUWysMz3hjfzBrjjjQT/EjKpCy+4YhN5yZoxcirPe+SMWz4jr6S+5UzSa3VuwpTnBfc8RF7yxDZyKs9r5IxHPiKv1P9iZqDnyAvMQ39UecbScVb/gJO03Xk4CFom3XYK1clhMdQUlKo7/d9NF13RkIdfy+MV7TSe2sl11tRFaXYmJKpWTd7kdVnJ8veevZKc+n3I93t9Jnvr5n4aTVWU/0z9AI2qMkV4nGNgZkAGjAxoAAAAjgAF') format('woff'), url('data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTW3RyK8AAAdIAAAAHEdERUYANAAGAAAHKAAAACBPUy8yT/b9sgAAAVgAAABWY21hcCIPRb0AAAHIAAABYmdhc3D//wADAAAHIAAAAAhnbHlmP5u2YAAAAzwAAAIsaGVhZAABMfsAAADcAAAANmhoZWED5QIFAAABFAAAACRobXR4BkoASgAAAbAAAAAWbG9jYQD2AaIAAAMsAAAAEG1heHAASwBHAAABOAAAACBuYW1lBSeBwgAABWgAAAFucG9zdC+zMgMAAAbYAAAARQABAAAAAQAA8MQQT18PPPUACwIAAAAAAM9xeH8AAAAAz3F4fwAlACUB2wHbAAAACAACAAAAAAAAAAEAAAHbAAAALgIAAAAAAAHbAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAHAEQAAgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAACAAAABAAAAIAAAAAAAAAAAUGZFZABAAGEhkgHg/+AALgHb/9sAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAJQAlACUAJQAAAAAAAwAAAAMAAAAcAAEAAAAAAFwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAAAYSAiIZAhkv//AAAAAABhICIhkCGS//8AAP+l3+PedN5xAAEAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGAIwAsAEWAAIAJQAlAdsB2wAYACwAAD8BNjQvASYjIg8BBhUUHwEHBhUUHwEWMzI2FAcGBwYiJyYnJjQ3Njc2MhcWF/GCBgaCBQcIBR0GBldXBgYdBQgH7x0eMjB8MDIeHR0eMjB8MDIecYIGDgaCBQUeBQcJBFhYBAkHBR4F0nwwMh4dHR4yMHwwMh4dHR4yAAAAAgAlACUB2wHbABgALAAAJTc2NTQvATc2NTQvASYjIg8BBhQfARYzMjYUBwYHBiInJicmNDc2NzYyFxYXASgdBgZXVwYGHQUIBwWCBgaCBQcIuB0eMjB8MDIeHR0eMjB8MDIecR4FBwkEWFgECQcFHgUFggYOBoIF0nwwMh4dHR4yMHwwMh4dHR4yAAABACUAJQHbAdsAEwAAABQHBgcGIicmJyY0NzY3NjIXFhcB2x0eMjB8MDIeHR0eMjB8MDIeAT58MDIeHR0eMjB8MDIeHR0eMgABACUAJQHbAdsAQwAAARUUBisBIicmPwEmIyIHBgcGBwYUFxYXFhcWMzI3Njc2MzIfARYVFAcGBwYjIicmJyYnJjQ3Njc2NzYzMhcWFzc2FxYB2woIgAsGBQkoKjodHBwSFAwLCwwUEhwcHSIeIBMGAQQDJwMCISspNC8mLBobFBERFBsaLCYvKicpHSUIDAsBt4AICgsLCScnCwwUEhwcOhwcEhQMCw8OHAMDJwMDAgQnFBQRFBsaLCZeJiwaGxQRDxEcJQgEBgAAAAAAAAwAlgABAAAAAAABAAUADAABAAAAAAACAAcAIgABAAAAAAADACEAbgABAAAAAAAEAAUAnAABAAAAAAAFAAsAugABAAAAAAAGAAUA0gADAAEECQABAAoAAAADAAEECQACAA4AEgADAAEECQADAEIAKgADAAEECQAEAAoAkAADAAEECQAFABYAogADAAEECQAGAAoAxgBzAGwAaQBjAGsAAHNsaWNrAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAHMAbABpAGMAawAgADoAIAAxADQALQA0AC0AMgAwADEANAAARm9udEZvcmdlIDIuMCA6IHNsaWNrIDogMTQtNC0yMDE0AABzAGwAaQBjAGsAAHNsaWNrAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABzAGwAaQBjAGsAAHNsaWNrAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABwAAAAEAAgECAQMAhwBECmFycm93cmlnaHQJYXJyb3dsZWZ0AAAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAGAAEABAAAAAIAAAAAAAEAAAAAzu7XsAAAAADPcXh/AAAAAM9xeH8=') format('truetype'), url('/assets/slick-BlzDm7g2.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.item-card {
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-property: --bg-color-1, --bg-color-2, --bg-color-3;
  background-image: radial-gradient(
      65% 110% at 50% 0,
      var(--bg-color-1) 0,
      rgba(103, 69, 69, 0) 100%
    ),
    radial-gradient(
      66% 135% at 77% 23%,
      var(--bg-color-2) 0,
      hsla(68, 15%, 59%, 0) 80%
    ),
    radial-gradient(
      125% 234% at 10% 142%,
      var(--bg-color-3) 0,
      hsla(0, 0%, 100%, 0) 37%
    );
  --bg-color-1: rgba(168, 92, 92, 0);
  --bg-color-2: rgba(4, 0, 255, 0);
  --bg-color-3: rgba(217, 126, 75, 0);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.item-card:hover {
  --bg-color-1: var(--md-surface-container-lowest);
  --bg-color-2: var(--md-surface-container-low);
  --bg-color-3: var(--md-surface-container-lowest);
  /* hide - was only for testing
   --bg-color-1: rgba(168, 92, 92, 0.1);
  --bg-color-2: rgba(4, 0, 255, 0.15);
  --bg-color-3: rgba(217, 126, 75, 0.15); */
  --tw-border-opacity: 0.15;
  /* --bg-color-1: var(--md-surface-container-lowest);
  --bg-color-2: var(--md-surface-container);
  --bg-color-3: var(--md-surface-container-high); */
}
.table-row {
  transition: background 0.25s ease-in-out;
}

.table-row:hover {
  background:    var(--md-surface-container-low) ;
}
.media-thumbnail-wrapper {
    position:relative;

}
.media-thumbnail-wrapper[data-view="card"] {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
}
.media-thumbnail-wrapper[data-view="card-small"] {
    width: 150px;
    height: 150px;
}
.media-thumbnail-wrapper[data-view="list"] {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    
}.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    justify-content: start;
}.generate-media-container {
  background: radial-gradient(circle, #f3f4f6 60%, #e5e7eb 100%);
  padding: 2rem;
  height: 100%;
}
.chat-container {
  margin-left: auto;
  margin-right: auto;
  width: 700px;
  padding: 0.5rem;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  display: flex;
}

trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}
trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: rgb(0, 0, 0);
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}
@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}
trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}
trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-dialogs {
  position: relative;
}
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}
trix-toolbar .trix-dialog--link {
  max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}
trix-editor .trix-button-group {
  display: inline-flex;
}
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
  background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}
trix-editor .attachment__metadata-container {
  position: relative;
}
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir=rtl] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " •";
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}/* Custom Trix Editor Styles for EditableText */

.trix-editor-wrapper {
  position: relative;
}

/* Hide the Trix toolbar by default for inline editing */
.trix-editor-wrapper trix-toolbar {
  display: none;
}

/* Style the editor container */
.trix-editor-wrapper trix-editor {
  background: transparent;
  border: none;
  padding: 0;
  min-height: auto;
  outline: none;
}

/* Remove default Trix borders and padding */
.trix-editor-wrapper trix-editor:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

/* Style content inside editor */
.trix-editor-wrapper trix-editor .trix-content {
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Ensure text inherits styles from parent */
.trix-editor-wrapper trix-editor div,
.trix-editor-wrapper trix-editor p {
  margin: 0;
  padding: 0;
}

/* Style placeholder text */
.trix-editor-wrapper trix-editor::placeholder {
  opacity: 0.5;
}

/* Hover state styling is handled by parent wrapper */
.trix-editor-wrapper:hover trix-editor {
  cursor: text;
}
.menu-sticky-menu {
  height: 64px;
  z-index: 1;
}

.menu-sticky-menu-normal {
  position: relative;
}

.menu-sticky-menu-sticky {
  position: sticky;
  top: 0;
}

/* settings for menu-sticky for mobile */
@media (max-width: 768px) {
  .menu-sticky-menu-sticky {
    inset-block-start: 0px;
  }
  .sticky-menu-content {
    display: grid;
    grid-template-columns: 100%;
  }
  .menu-sticky-menu .show-on-mobile {
    display: block;
  }
  .menu-sticky-menu .show-on-desktop {
    display: none;
  }
  /* Normal menu: visible when not stuck, hidden when stuck */
  .menu-sticky-menu-normal {
    display: block;
  }
  .menu-sticky-menu-normal-hidden {
    display: none;
  }
  /* Sticky menu: hidden when not stuck, visible when stuck */
  .menu-sticky-menu-sticky {
    display: none;
  }
  .menu-sticky-menu-sticky-visible {
    display: block;
  }
}

.sticky-menu-content {
  background-color: var(--menu-bg-color);
  width: 100%;
  position: relative;
}

/* for desktop */
@media (min-width: 768px) {
  .menu-sticky-menu-sticky {
    inset-block-start: 4rem;
  }
  .sticky-menu-content {
    display: grid;
    grid-template-columns: calc(100% - 19rem) 280px;
  }
  .menu-sticky-menu .show-on-mobile {
    display: none;
  }
  .menu-sticky-menu .show-on-desktop {
    display: block;
  }
  /* On desktop, normal menu is visible in flow, hidden when stuck to avoid duplication */
  .menu-sticky-menu-normal {
    display: block;
  }
  .menu-sticky-menu-normal-hidden {
    display: none;
  }
  /* On desktop, sticky menu is visible when stuck */
  .menu-sticky-menu-sticky {
    display: none;
  }
  .menu-sticky-menu-sticky-visible {
    display: block;
  }
}

.menu-sticky-menu[data-is-visible='true'] {
  box-shadow: var(--md-shadow-medium);
}

.menu-sticky-menu:before {
  content: '';
  top: -4px;
  border-block-end: 1px solid var(--cb-color-border);
  width: 100%;
  height: 4px;
  position: absolute;
  inset-inline-start: 0;
}

.menu-sticky-menu-content {
  background: var(--menu-bg-color);
  transition: background-color 0.15s linear;
  padding: 16px 8px;
}

.menu-sticky-submenu {
  background: var(--submenu-bg-color);
  transition: background-color 0.15s linear;
  padding: 16px 8px;
}
.MenuItem {
  display: flex;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  color: var(--md-on-surface-variant);
}

.MenuItem[data-is-open='true'] {
  background-color: var(--md-surface-container);
}

.MenuItem[data-is-active='true'] {
  background-color: var(--md-surface-container-lowest);
}

.MenuItem:hover {
  background-color: var(--md-surface-container);
}
/* Color Selector Section */
.color-selector-section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Color Input Group */
.color-input-group {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f7fafc;
  padding: 16px 20px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  transition: all 0.2s;
}

.color-input-group:hover {
  border-color: #cbd5e0;
}

/* Color Swatch */
.color-swatch {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.color-swatch:hover {
  transform: scale(1.05);
}

/* Color Details */
.color-details {
  flex: 1;
  min-width: 0;
}

.color-label {
  font-size: 13px;
  color: #718096;
  margin-bottom: 4px;
}

.color-value {
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  font-family: 'Courier New', monospace;
}

/* Color Picker Panel */
.color-picker-panel {
  width: 240px;
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 2px solid #e2e8f0;
}

.color-hex-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 15px;
  color: #2d3748;
  font-family: 'Courier New', monospace;
  transition: all 0.2s;
  outline: none;
}

.color-hex-input:hover {
  border-color: #cbd5e0;
}

.color-hex-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* Preview Card - Single color preview */
.preview-card {
  background: #f7fafc;
  padding: 20px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  transition: all 0.2s;
  flex: 1;
  min-width: 160px;
}

.preview-card:hover {
  border-color: #cbd5e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Preview Label */
.preview-label {
  font-size: 12px;
  font-weight: 600;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Preview Color Box */
.preview-color {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.preview-card:hover .preview-color {
  transform: scale(1.02);
}
/* src/css/colors.css */
:root {
  --copilot-kit-primary-color: rgb(28, 28, 28);
  --copilot-kit-contrast-color: rgb(255, 255, 255);
  --copilot-kit-background-color: rgb(255 255 255);
  --copilot-kit-input-background-color: #fbfbfb;
  --copilot-kit-secondary-color: rgb(255 255 255);
  --copilot-kit-secondary-contrast-color: rgb(28, 28, 28);
  --copilot-kit-separator-color: rgb(200 200 200);
  --copilot-kit-muted-color: rgb(200 200 200);
  --copilot-kit-error-background: #fef2f2;
  --copilot-kit-error-border: #fecaca;
  --copilot-kit-error-text: #dc2626;
  --copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --copilot-kit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --copilot-kit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --copilot-kit-dev-console-bg: #f8f8fa;
  --copilot-kit-dev-console-text: black;
}
.dark,
html.dark,
body.dark,
[data-theme=dark],
html[style*="color-scheme: dark"],
body[style*="color-scheme: dark"] :root {
  --copilot-kit-primary-color: rgb(255, 255, 255);
  --copilot-kit-contrast-color: rgb(28, 28, 28);
  --copilot-kit-background-color: rgb(17, 17, 17);
  --copilot-kit-input-background-color: #2c2c2c;
  --copilot-kit-secondary-color: rgb(28, 28, 28);
  --copilot-kit-secondary-contrast-color: rgb(255, 255, 255);
  --copilot-kit-separator-color: rgb(45, 45, 45);
  --copilot-kit-muted-color: rgb(45, 45, 45);
  --copilot-kit-error-background: #7f1d1d;
  --copilot-kit-error-border: #dc2626;
  --copilot-kit-error-text: #fca5a5;
  --copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --copilot-kit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --copilot-kit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* src/css/popup.css */
.copilotKitPopup {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 30;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  touch-action: manipulation;
}
.copilotKitPopup svg {
  display: inline-block;
  vertical-align: middle;
}

/* src/css/sidebar.css */
.copilotKitSidebar {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 30;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  touch-action: manipulation;
}
.copilotKitSidebar svg {
  display: inline-block;
  vertical-align: middle;
}
.copilotKitSidebarContentWrapper {
  overflow: visible;
  margin-right: 0px;
  transition: margin-right 0.3s ease;
}
@media (min-width: 640px) {
  .copilotKitSidebarContentWrapper.sidebarExpanded {
    margin-right: 28rem;
  }
}

/* src/css/button.css */
.copilotKitButton {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--copilot-kit-primary-color);
  outline: none;
  position: relative;
  transform: scale(1);
  transition: all 0.2s ease;
  background-color: var(--copilot-kit-primary-color);
  color: var(--copilot-kit-contrast-color);
  cursor: pointer;
  box-shadow: var(--copilot-kit-shadow-sm);
}
.copilotKitButton:hover {
  transform: scale(1.05);
  box-shadow: var(--copilot-kit-shadow-md);
}
.copilotKitButton:active {
  transform: scale(0.95);
  box-shadow: var(--copilot-kit-shadow-sm);
}
.copilotKitButtonIcon {
  transition: opacity 100ms, transform 300ms;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.copilotKitButtonIcon svg {
  width: 1.5rem;
  height: 1.5rem;
}
.copilotKitButton.open .copilotKitButtonIconOpen {
  transform: translate(-50%, -50%) scale(0) rotate(90deg);
  opacity: 0;
}
.copilotKitButton.open .copilotKitButtonIconClose {
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  opacity: 1;
}
.copilotKitButton:not(.open) .copilotKitButtonIconOpen {
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  opacity: 1;
}
.copilotKitButton:not(.open) .copilotKitButtonIconClose {
  transform: translate(-50%, -50%) scale(0) rotate(-90deg);
  opacity: 0;
}

/* src/css/header.css */
.copilotKitHeader {
  height: 56px;
  font-weight: 500;
  display: flex;
  align-items: center;
  position: relative;
  color: var(--copilot-kit-primary-color);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom: 1px solid var(--copilot-kit-separator-color);
  padding-left: 1.5rem;
  background-color: var(--copilot-kit-contrast-color);
  justify-content: space-between;
  z-index: 2;
}
.copilotKitSidebar .copilotKitHeader {
  border-radius: 0;
}
.copilotKitHeaderControls {
  display: flex;
}
.copilotKitHeaderCloseButton {
  background: none;
  border: none;
}
@media (min-width: 640px) {
  .copilotKitHeader {
    padding-left: 1.5rem;
    padding-right: 24px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}
.copilotKitHeader > button {
  border: 0;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  outline: none;
  color: var(--copilot-kit-muted-color);
  background-color: transparent;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  width: 35px;
  height: 35px;
}
.copilotKitHeader > button:hover {
  color: color-mix(in srgb, var(--copilot-kit-muted-color) 80%, black);
}
.copilotKitHeader > button:focus {
  outline: none;
}

/* src/css/input.css */
.copilotKitInput {
  cursor: text;
  position: relative;
  background-color: var(--copilot-kit-input-background-color);
  border-radius: 20px;
  border: 1px solid var(--copilot-kit-separator-color);
  padding: 12px 14px;
  min-height: 75px;
  margin: 0 auto;
  width: 95%;
}
.copilotKitInputContainer {
  width: 100%;
  padding: 0;
  padding-bottom: 15px;
  background: var(--copilot-kit-background-color);
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.copilotKitSidebar .copilotKitInputContainer {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.copilotKitInputControlButton {
  padding: 0;
  cursor: pointer;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transform: scale(1);
  color: rgba(0, 0, 0, 0.25);
  -webkit-appearance: button;
  appearance: button;
  background-color: transparent;
  background-image: none;
  text-transform: none;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  border: 0;
  margin: 0;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  width: 24px;
  height: 24px;
}
.copilotKitInputControlButton:not([disabled]) {
  color: var(--copilot-kit-primary-color);
}
.copilotKitInputControlButton:not([disabled]):hover {
  color: color-mix(in srgb, var(--copilot-kit-primary-color) 80%, black);
  transform: scale(1.05);
}
.copilotKitInputControlButton[disabled] {
  color: var(--copilot-kit-muted-color);
  cursor: default;
}
.copilotKitInputControls {
  display: flex;
  gap: 3px;
}
.copilotKitInput > textarea {
  flex: 1;
  outline: 2px solid transparent;
  outline-offset: 2px;
  resize: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: text;
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-weight: inherit;
  color: var(--copilot-kit-secondary-contrast-color);
  border: 0px;
  background-color: transparent;
  width: 100%;
}
.copilotKitInput > textarea::placeholder {
  color: #808080;
  opacity: 1;
}
.copilotKitInputControlButton.copilotKitPushToTalkRecording {
  background-color: #ec0000;
  color: white;
  border-radius: 50%;
  animation: copilotKitPulseAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.copilotKitInput textarea::-webkit-scrollbar {
  width: 9px;
}
.copilotKitInput textarea::-webkit-scrollbar-track {
  background: transparent;
}
.copilotKitInput textarea::-webkit-scrollbar-thumb {
  background-color: rgb(200 200 200);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
  cursor: pointer;
}
.copilotKitInput textarea::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, rgb(200 200 200) 80%, black);
}
.poweredByContainer {
  padding: 0;
}
.poweredBy {
  background: var(--copilot-kit-background-color) !important;
  visibility: visible !important;
  display: block !important;
  position: static !important;
  text-align: center !important;
  font-size: 12px !important;
  padding: 3px 0 !important;
  color: rgb(214, 214, 214) !important;
  margin: 0 !important;
}
.dark,
html.dark,
body.dark,
[data-theme=dark],
html[style*="color-scheme: dark"],
body[style*="color-scheme: dark"] .poweredBy {
  color: rgb(69, 69, 69) !important;
}

/* src/css/messages.css */
.copilotKitMessages {
  overflow-y: scroll;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--copilot-kit-background-color);
  color: var(--copilot-kit-secondary-contrast-color);
  justify-content: space-between;
  z-index: 1;
}
.copilotKitMessagesContainer {
  padding: 1rem 24px;
  display: flex;
  flex-direction: column;
}
.copilotKitMessagesFooter {
  display: flex;
  padding: 0.5rem 0.75rem;
  margin: 8px auto 0 auto;
  justify-content: flex-start;
  flex-direction: column;
  width: 97%;
}
.copilotKitMessages::-webkit-scrollbar {
  width: 6px;
}
.copilotKitMessages::-webkit-scrollbar-thumb {
  background-color: var(--copilot-kit-separator-color);
  border-radius: 10rem;
  border: 2px solid var(--copilot-kit-background-color);
}
.copilotKitMessages::-webkit-scrollbar-track-piece:start {
  background: transparent;
}
.copilotKitMessages::-webkit-scrollbar-track-piece:end {
  background: transparent;
}
.copilotKitMessage {
  border-radius: 15px;
  padding: 8px 12px;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
  max-width: 80%;
  margin-bottom: 0.5rem;
}
.copilotKitMessage.copilotKitUserMessage {
  background: var(--copilot-kit-primary-color);
  color: var(--copilot-kit-contrast-color);
  margin-left: auto;
  white-space: pre-wrap;
  line-height: 1.75;
  font-size: 1rem;
}
.copilotKitMessage.copilotKitAssistantMessage {
  background: transparent;
  margin-right: auto;
  padding-left: 0;
  position: relative;
  max-width: 100%;
  color: var(--copilot-kit-secondary-contrast-color);
}
.copilotKitMessage.copilotKitAssistantMessage .copilotKitMessageControls {
  position: absolute;
  left: 0;
  display: flex;
  gap: 1rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 5px 0 0 0;
}
.copilotKitMessageControls.currentMessage {
  opacity: 1 !important;
}
.copilotKitMessage.copilotKitAssistantMessage:hover .copilotKitMessageControls {
  opacity: 1;
}
@media (max-width: 768px) {
  .copilotKitMessage.copilotKitAssistantMessage .copilotKitMessageControls {
    opacity: 1;
  }
}
.copilotKitMessageControlButton {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  justify-content: center;
  color: var(--copilot-kit-primary-color);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  z-index: 10;
  margin: 0;
  background: transparent;
  border: none;
}
.copilotKitMessageControlButton:hover {
  color: color-mix(in srgb, var(--copilot-kit-primary-color) 80%, black);
  transform: scale(1.05);
}
.copilotKitMessageControlButton:active {
  color: color-mix(in srgb, var(--copilot-kit-primary-color) 80%, black);
  transform: scale(1.05);
}
.copilotKitMessageControlButton.active {
  background-color: var(--copilot-kit-primary-color);
  color: var(--copilot-kit-contrast-color);
}
.copilotKitMessageControlButton.active:hover {
  background-color: color-mix(in srgb, var(--copilot-kit-primary-color) 90%, black);
  color: var(--copilot-kit-contrast-color);
}
.copilotKitMessageControlButton svg {
  width: 1rem;
  height: 1rem;
  display: block;
  pointer-events: none;
}
.copilotKitMessage.copilotKitAssistantMessage + .copilotKitMessage.copilotKitUserMessage {
  margin-top: 1.5rem;
}
.copilotKitCustomAssistantMessage {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.copilotKitMessage .inProgressLabel {
  margin-left: 10px;
  opacity: 0.7;
}
@keyframes copilotKitSpinAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.copilotKitSpinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--copilot-kit-contrast-color);
  border-radius: 50%;
  border-top-color: var(--copilot-kit-primary-color);
  animation: copilotKitSpinAnimation 1s linear infinite;
}
@keyframes copilotKitActivityDotAnimation {
  0%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.copilotKitActivityDot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--copilot-kit-primary-color);
  animation: copilotKitActivityDotAnimation 1.4s infinite ease-in-out both;
}
.copilotKitImageRendering {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.copilotKitImageRenderingImage {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--copilot-kit-shadow-sm);
}
.copilotKitImageRenderingContent {
  margin-top: 8px;
  padding: 0 16px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--copilot-kit-secondary-contrast-color);
}
.copilotKitImageRenderingError {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--copilot-kit-separator-color);
  border-radius: 8px;
  background-color: var(--copilot-kit-input-background-color);
}
.copilotKitImageRenderingErrorMessage {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: var(--copilot-kit-error-background);
  border: 1px solid var(--copilot-kit-error-border);
  border-radius: 6px;
  color: var(--copilot-kit-error-text);
  font-size: 0.875rem;
  font-weight: 500;
}
.copilotKitImageRenderingErrorMessage::before {
  content: "\26a0\fe0f";
  font-size: 1rem;
}

/* src/css/window.css */
.copilotKitWindow {
  position: fixed;
  inset: 0px;
  transform-origin: bottom;
  border-color: rgb(229 231 235);
  background-color: var(--copilot-kit-background-color);
  border-radius: 0.75rem;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
  flex-direction: column;
  transition: opacity 100ms ease-out, transform 200ms ease-out;
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  display: flex;
  pointer-events: none;
}
.copilotKitSidebar .copilotKitWindow {
  border-radius: 0;
  opacity: 1;
  transform: translateX(100%);
}
.copilotKitWindow.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.copilotKitSidebar .copilotKitWindow.open {
  transform: translateX(0);
}
@media (min-width: 640px) {
  .copilotKitWindow {
    transform-origin: bottom right;
    bottom: 5rem;
    right: 1rem;
    top: auto;
    left: auto;
    border-width: 0px;
    margin-bottom: 1rem;
    width: 24rem;
    height: 600px;
    min-height: 200px;
    max-height: calc(100% - 6rem);
  }
  .copilotKitSidebar .copilotKitWindow {
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
    width: 28rem;
    min-height: 100%;
    margin-bottom: 0;
    max-height: none;
  }
}

/* src/css/animations.css */
.copilotKitActivityDot1 {
  animation: copilotKitActivityDotsAnimation 1.05s infinite;
}
.copilotKitActivityDot2 {
  animation-delay: 0.1s;
}
.copilotKitActivityDot3 {
  animation-delay: 0.2s;
}
@keyframes copilotKitActivityDotsAnimation {
  0%, 57.14% {
    animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
    transform: translate(0);
  }
  28.57% {
    animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
    transform: translateY(-6px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes copilotKitSpinAnimation {
  to {
    transform: rotate(360deg);
  }
}
@keyframes copilotKitPulseAnimation {
  50% {
    opacity: 0.5;
  }
}

/* src/css/markdown.css */
h1.copilotKitMarkdownElement,
h2.copilotKitMarkdownElement,
h3.copilotKitMarkdownElement,
h4.copilotKitMarkdownElement,
h5.copilotKitMarkdownElement,
h6.copilotKitMarkdownElement {
  font-weight: bold;
  line-height: 1.2;
}
h1.copilotKitMarkdownElement:not(:last-child),
h2.copilotKitMarkdownElement:not(:last-child),
h3.copilotKitMarkdownElement:not(:last-child),
h4.copilotKitMarkdownElement:not(:last-child),
h5.copilotKitMarkdownElement:not(:last-child),
h6.copilotKitMarkdownElement:not(:last-child) {
  margin-bottom: 1rem;
}
h1.copilotKitMarkdownElement {
  font-size: 1.5em;
}
h2.copilotKitMarkdownElement {
  font-size: 1.25em;
  font-weight: 600;
}
h3.copilotKitMarkdownElement {
  font-size: 1.1em;
}
h4.copilotKitMarkdownElement {
  font-size: 1em;
}
h5.copilotKitMarkdownElement {
  font-size: 0.9em;
}
h6.copilotKitMarkdownElement {
  font-size: 0.8em;
}
a.copilotKitMarkdownElement {
  color: blue;
  text-decoration: underline;
}
p.copilotKitMarkdownElement {
  padding: 0px;
  margin: 0px;
  line-height: 1.75;
  font-size: 1rem;
}
p.copilotKitMarkdownElement:not(:last-child),
pre.copilotKitMarkdownElement:not(:last-child),
ol.copilotKitMarkdownElement:not(:last-child),
ul.copilotKitMarkdownElement:not(:last-child),
blockquote.copilotKitMarkdownElement:not(:last-child) {
  margin-bottom: 1.25em;
}
blockquote.copilotKitMarkdownElement {
  border-color: rgb(142, 142, 160);
  border-left-width: 2px;
  border-left-style: solid;
  line-height: 1.2;
  padding-left: 10px;
}
blockquote.copilotKitMarkdownElement p {
  padding: 0.7em 0;
}
ul.copilotKitMarkdownElement {
  list-style-type: disc;
  padding-left: 20px;
  overflow: visible;
}
li.copilotKitMarkdownElement {
  list-style-type: inherit;
  list-style-position: outside;
  margin-left: 0;
  padding-left: 0;
  position: relative;
  overflow: visible;
}
.copilotKitCodeBlock {
  position: relative;
  width: 100%;
  background-color: rgb(9 9 11);
  border-radius: 0.375rem;
}
.copilotKitCodeBlockToolbar {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(39 39 42);
  padding-left: 1rem;
  padding-top: 0.09rem;
  padding-bottom: 0.09rem;
  color: rgb(228, 228, 228);
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  font-family: sans-serif;
}
.copilotKitCodeBlockToolbarLanguage {
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: lowercase;
}
.copilotKitCodeBlockToolbarButtons {
  display: flex;
  align-items: center;
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}
.copilotKitCodeBlockToolbarButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  height: 2.5rem;
  padding: 3px;
  margin: 2px;
}
.copilotKitCodeBlockToolbarButton:hover {
  background-color: rgb(55, 55, 58);
}
.copilotKitInlineCode {
  background-color: var(--copilot-kit-input-background-color);
  border: 1px solid var(--copilot-kit-separator-color);
  border-radius: 0.375rem;
  padding: 0.05rem 0.4rem;
  font-size: 15px;
}

/* src/css/suggestions.css */
.copilotKitMessages footer .suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.copilotKitMessages footer h6 {
  font-weight: 500;
  font-size: 0.7rem;
  margin-bottom: 8px;
}
.copilotKitMessages footer .suggestions .suggestion {
  padding: 6px 10px;
  font-size: 0.7rem;
  border-radius: 15px;
  border: 1px solid var(--copilot-kit-muted-color);
  color: var(--copilot-kit-secondary-contrast-color);
  box-shadow: 0 5px 5px 0px rgba(0, 0, 0, .01), 0 2px 3px 0px rgba(0, 0, 0, .02);
}
.copilotKitMessages footer .suggestions .suggestion.loading {
  padding: 0;
  font-size: 0.7rem;
  border: none;
  color: var(--copilot-kit-secondary-contrast-color);
}
.copilotKitMessages footer .suggestions button {
  transition: transform 0.3s ease;
}
.copilotKitMessages footer .suggestions button:not(:disabled):hover {
  transform: scale(1.03);
}
.copilotKitMessages footer .suggestions button:disabled {
  cursor: wait;
}
.copilotKitMessages footer .suggestions button svg {
  margin-right: 6px;
}

/* src/css/panel.css */
.copilotKitChat {
  z-index: 30;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  background: var(--copilot-kit-background-color);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  touch-action: manipulation;
  display: flex;
  flex-direction: column;
}
.copilotKitChat svg {
  display: inline-block;
  vertical-align: middle;
}
.copilotKitChat .copilotKitMessages {
  flex-grow: 1;
}

/* src/css/console.css */
.copilotKitDevConsole {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 15px;
}
.copilotKitDevConsole.copilotKitDevConsoleWarnOutdated {
  background-color: var(--copilot-kit-dev-console-bg);
}
.copilotKitDevConsole .copilotKitVersionInfo {
  display: flex;
  position: absolute;
  bottom: -25px;
  padding: 3px 5px;
  left: 0;
  width: 100%;
  justify-content: center;
  gap: 10px;
  font-size: 0.8rem;
  align-items: center;
  background: #ebb305;
}
.copilotKitDevConsole .copilotKitVersionInfo button {
  font-size: 11px;
  font-weight: normal;
  font-family: monospace;
  background-color: var(--copilot-kit-dev-console-bg);
  border: 1px solid #979797;
  padding: 1px 12px;
  padding-left: 5px;
  border-radius: 4px;
  display: inline-block;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  width: 260px;
  text-overflow: ellipsis;
}
.copilotKitDevConsole .copilotKitVersionInfo aside {
  display: inline;
  font-weight: normal;
  color: #7f7a7a;
  margin-left: 5px;
}
.copilotKitDevConsole .copilotKitVersionInfo svg {
  margin-left: 3px;
  margin-top: -3px;
}
.copilotKitDevConsole .copilotKitDebugMenuTriggerButton {
  font-size: 11px;
  font-weight: bold;
  display: flex;
  padding: 0 10px;
  height: 30px;
  background-color: transparent;
  border: 1px solid var(--copilot-kit-muted-color);
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  outline: none;
}
.copilotKitDebugMenuTriggerButton.compact {
  width: 35px;
  color: var(--copilot-kit-dev-console-bg);
  justify-content: center;
  outline: none;
  font-size: 8px;
}
.copilotKitDevConsole .copilotKitDebugMenuTriggerButton:hover {
  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 85%, black);
  color: var(--copilot-kit-dev-console-text);
}
.dark,
html.dark,
body.dark,
[data-theme=dark],
html[style*="color-scheme: dark"],
body[style*="color-scheme: dark"] .copilotKitDevConsole .copilotKitDebugMenuTriggerButton {
  color: white;
}
.dark,
html.dark,
body.dark,
[data-theme=dark],
html[style*="color-scheme: dark"],
body[style*="color-scheme: dark"] .copilotKitDevConsole .copilotKitDebugMenuTriggerButton:hover {
  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 20%, black);
}
.copilotKitDevConsole .copilotKitDebugMenuTriggerButton > svg {
  margin-left: 10px;
}
.copilotKitDebugMenu {
  --copilot-kit-dev-console-border: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 80%, black);
  margin-top: 2px;
  border-radius: 6px;
  background-color: var(--copilot-kit-dev-console-bg);
  border: 1px solid var(--copilot-kit-dev-console-border);
  padding: 0.25rem;
  outline: none;
  font-size: 13px;
}
.copilotKitDebugMenuItem {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--copilot-kit-dev-console-text);
}
.copilotKitDebugMenuItem:hover {
  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 95%, black);
  border-radius: 4px;
}
.copilotKitDebugMenu[data-closed] {
  transform: scale(0.95);
  opacity: 0;
}
.copilotKitDebugMenu hr {
  height: 1px;
  border: none;
  background-color: var(--copilot-kit-dev-console-border);
  margin: 0.25rem;
}
.copilotKitHelpModal {
  background-color: var(--copilot-kit-dev-console-bg);
  color: var(--copilot-kit-dev-console-text);
}
.copilotKitHelpItemButton {
  display: block;
  text-align: center;
  width: 100%;
  padding: 4px 6px;
  border-radius: 15px;
  font-size: 0.8rem;
  border: 1px solid var(--copilot-kit-muted-color);
  color: var(--copilot-kit-dev-console-text);
  box-shadow: 0 5px 5px 0px rgba(0, 0, 0, .01), 0 2px 3px 0px rgba(0, 0, 0, .02);
  background-color: var(--copilot-kit-dev-console-bg);
}
.copilotKitHelpItemButton:hover {
  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 95%, black);
}

/* src/css/crew.css */
.copilotkit-response {
  text-align: right;
}
.copilotkit-response-content {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: #4b5563;
  background-color: #f9fafb;
  padding: 0.5rem;
  border-radius: 0.25rem;
  text-align: left;
}
.copilotkit-response-actions {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}
.copilotkit-response-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
}
.copilotkit-toggle-button {
  margin-right: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.copilotkit-icon {
  height: 0.75rem;
  width: 0.75rem;
  color: #6b7280;
}
.copilotkit-response-buttons {
  display: flex;
  gap: 0.5rem;
}
.copilotkit-response-button {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background-color: #f3f4f6;
  color: #4b5563;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}
.copilotkit-response-button:hover {
  background-color: #e5e7eb;
}
.copilotkit-response-button:focus {
  outline: none;
}
.copilotkit-response-completed-feedback {
  background-color: #f9fafb;
  padding: 0.5rem;
  border-radius: 0.375rem;
  display: inline-flex;
  align-items: center;
}
.copilotkit-response-completed-feedback span {
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 500;
}
.copilotkit-state {
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.copilotkit-state-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0.25rem;
}
.copilotkit-state-label {
  color: #4b5563;
  font-size: 0.875rem;
}
.copilotkit-state-label-loading {
  display: inline-flex;
  align-items: center;
  animation: pulse 1.5s infinite;
}
.copilotkit-state-content {
  padding-left: 1rem;
  max-height: 250px;
  overflow: auto;
  padding-top: 0.375rem;
  border-left: 1px solid #e5e7eb;
  margin-left: 0.375rem;
}
.copilotkit-state-item {
  padding: 0.25rem 0;
  margin-bottom: 0.25rem;
  transition: all 0.3s ease;
}
.copilotkit-state-item-newest {
  animation: appear 0.5s ease-out;
}
.copilotkit-state-item-header {
  font-size: 0.75rem;
  opacity: 0.7;
}
.copilotkit-state-item-thought {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  opacity: 0.8;
}
.copilotkit-state-item-result {
  margin-top: 0.125rem;
  font-size: 0.75rem;
}
.copilotkit-state-item-description {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  opacity: 0.8;
}
.copilotkit-state-empty {
  padding: 0.25rem 0;
  font-size: 0.75rem;
  opacity: 0.7;
}
.copilotkit-skeleton {
  padding: 0.125rem 0;
  animation: pulse 1.5s infinite;
}
.copilotkit-skeleton-header {
  display: flex;
  justify-content: space-between;
}
.copilotkit-skeleton-title {
  height: 0.625rem;
  width: 4rem;
  background-color: #e5e7eb;
  border-radius: 0.25rem;
}
.copilotkit-skeleton-subtitle {
  height: 0.5rem;
  width: 2rem;
  background-color: #e5e7eb;
  border-radius: 0.25rem;
}
.copilotkit-skeleton-content {
  margin-top: 0.125rem;
  height: 1.5rem;
  background-color: #e5e7eb;
  border-radius: 0.25rem;
}
.copilotkit-loader {
  animation: spin 1.5s linear infinite;
}
.copilotkit-spinner {
  animation: spin 1.5s linear infinite;
}
@keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (prefers-color-scheme: dark) {
  .copilotkit-response-content {
    color: #9ca3af;
    background-color: #1f2937;
  }
  .copilotkit-response-label {
    color: #9ca3af;
  }
  .copilotkit-icon {
    color: #9ca3af;
  }
  .copilotkit-response-button {
    background-color: #1f2937;
    color: #d1d5db;
  }
  .copilotkit-response-button:hover {
    background-color: #374151;
  }
  .copilotkit-response-completed-feedback {
    background-color: #1f2937;
  }
  .copilotkit-response-completed-feedback span {
    color: #e5e7eb;
  }
  .copilotkit-state-label {
    color: #d1d5db;
  }
  .copilotkit-state-content {
    border-left-color: #374151;
  }
  .copilotkit-skeleton-title,
  .copilotkit-skeleton-subtitle,
  .copilotkit-skeleton-content {
    background-color: #374151;
  }
}

/* src/styles.css */
/*# sourceMappingURL=index.css.map *//* Custom scrollbar styling for ClapPageContainer26 */

/* CSS Variables */
:root {
  --ph-top-bar-height: 64px;
}

/* Container height management */
#clap-page-container-26 {
  /* Fill available space in flex parent */
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Ensure proper flex layout */
.clap-page-container-flex {
  display: flex;
  flex-direction: row; /* Row layout for main content + agent panel */
  height: 100%;
  min-height: 0; /* Important for flex children to respect scroll */
  overflow: hidden;
}

.clap-page-container-content {
  flex: 1;
  min-height: 0; /* Important for enabling scroll */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Border radius (12px) and background (bg-surface) applied via Tailwind classes */
}

/* Header variants with transitions */
.clap-page-header-flat {
  /* Flat header is part of scrollable content */
  position: relative;
}

.clap-page-header-sticky-wrapper {
  /* Wrapper for sticky header that slides in/out */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-radius: 12px 12px 0 0; /* Match parent rounded corners at top */
}

.clap-page-header-sticky {
  /* Sticky header styles */
  background: var(--color-surface);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: all 0.2s ease-in-out;
}

/* Main content area with custom scrollbar */
.clap-page-content-scroll {
  /* Enable scrolling */
  overflow-y: auto;
  overflow-x: hidden;
  
  /* Fill available space */
  flex: 1;
  min-height: 0;
  
  /* Smooth scrolling */
  scroll-behavior: smooth;
  
  /* Add subtle padding for scrollbar */
  padding-right: 4px;
  
  /* Respect parent's rounded corners */
  border-radius: 12px;
}

/* Webkit browsers (Chrome, Safari, Edge) - Custom scrollbar like Shopify */
.clap-page-content-scroll::-webkit-scrollbar {
  width: 12px;
}

.clap-page-content-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.clap-page-content-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}

.clap-page-content-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.18);
}

.clap-page-content-scroll::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.25);
}

/* Firefox - Custom scrollbar */
.clap-page-content-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .clap-page-header-sticky {
    background: transparent; /* Let parent bg-surface handle dark mode */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  }
  
  .clap-page-content-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
  }
  
  .clap-page-content-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.22);
  }
  
  .clap-page-content-scroll::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, 0.3);
  }
  
  .clap-page-content-scroll {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .clap-page-content-scroll::-webkit-scrollbar {
    width: 8px;
  }

  .clap-page-content-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
  }
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}
/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-800: oklch(44.4% .177 26.899);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-orange-100: oklch(95.4% .038 75.164);
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-600: oklch(64.6% .222 41.116);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-green-50: oklch(98.2% .018 155.826);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-200: oklch(92.5% .084 155.995);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-700: oklch(52.7% .154 150.069);
    --color-green-800: oklch(44.8% .119 151.328);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-blue-800: oklch(42.4% .199 265.638);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-indigo-50: oklch(96.2% .018 272.314);
    --color-indigo-100: oklch(93% .034 272.788);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-indigo-700: oklch(45.7% .24 277.023);
    --color-violet-50: oklch(96.9% .016 293.756);
    --color-violet-500: oklch(60.6% .25 292.717);
    --color-violet-600: oklch(54.1% .281 293.009);
    --color-purple-100: oklch(94.6% .033 307.174);
    --color-purple-600: oklch(55.8% .288 302.321);
    --color-purple-700: oklch(49.6% .265 301.924);
    --color-pink-50: oklch(97.1% .014 343.198);
    --color-pink-100: oklch(94.8% .028 342.258);
    --color-pink-500: oklch(65.6% .241 354.308);
    --color-pink-600: oklch(59.2% .249 .584);
    --color-slate-50: oklch(98.4% .003 247.858);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-gray-900: oklch(21% .034 264.665);
    --color-zinc-100: oklch(96.7% .001 286.375);
    --color-zinc-200: oklch(92% .004 286.32);
    --color-zinc-300: oklch(87.1% .006 286.286);
    --color-zinc-500: oklch(55.2% .016 285.938);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;
    --container-md: 28rem;
    --container-2xl: 42rem;
    --container-4xl: 56rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    --tracking-wider: .05em;
    --leading-tight: 1.25;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-3xl: 64px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-surface: var(--md-surface);
    --color-primary: var(--md-primaryXX);
    --color-outline: var(--md-outline);
    --font-plain: var(--md-ref-typeface-plain);
    --ph-shadow-xl: 0px 20px 25px -5px #0000001a, 0px 8px 10px -6px #0000001a;
    --color-palette-primary-10: var(--ph-ref-palette-primary10);
    --color-palette-primary-20: var(--ph-ref-palette-primary20);
    --md-surface-container-lowest-hover: oklab(98% 0 5.96046e-8);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --md-surface-container-lowest-hover: color-mix(in oklab, var(--md-surface-container-lowest) 98%, #000);
    }
  }

  :root, :host {
    --md-surface-container-low-hover: oklab(95.0748% 1.78814e-7 0);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :host {
      --md-surface-container-low-hover: color-mix(in oklab, var(--md-surface-container-low) 98%, #000);
    }
  }

  :root, :host {
    --md-primary: #fb5c00;
    --md-primary-container: #fb5c00;
    --md-on-primary: #fff;
    --md-on-primary-container: #fff;
    --md-secondary: #330045;
    --md-secondary-container: #330045;
    --md-on-secondary: #fff;
    --md-on-secondary-container: #fff;
    --md-on-surface: #000;
    --md-on-surface-variant: #1b1c1c;
    --md-surface: #f5f5f5;
    --md-surface-container-lowest: #fff;
    --md-surface-container-low: #f5f5f5;
    --md-surface-container: #f3f3f3;
    --md-surface-container-highest: #c7c6c6;
    --md-surface-container-high: #e3e2e2;
    --md-surface-container-variant: #ffedec;
    --md-outline: #c5c5c5;
    --md-outline-variant: #c9c9c9;
    --ph-color-on-surface: #000;
    --color-secondary-1: #330045;
    --color-secondary-2: #510a6a;
    --color-secondary-4: #85429c;
    --color-secondary-6: #bc75d3;
    --color-secondary-7: #d98ff0;
    --color-secondary-9: #fad7ff;
    --color-secondary-10: #ffebff;
    --color-neutral-1: #181818;
    --color-neutral-3: #494747;
    --color-neutral-4: #625f5e;
    --color-neutral-5: #7a7776;
    --color-neutral-6: #928f8e;
    --color-neutral-8: #c3bebd;
    --color-neutral-9: #dcd6d4;
    --color-neutral-10: #f4eeec;
    --color-neutral-11: #faf7f6;
    --color-grey-1: #f5f5f5;
    --color-grey-2: #ebebeb;
    --color-status-very-bad: #ea2c2c;
    --color-status-bad: #ff8e0a;
    --color-status-okay: #aaad00;
    --color-status-good: #59ca00;
    --color-status-preparing-for-order-1: #e1a200;
    --color-clap-orange-500: #fb5c00;
    --color-clap-orange-600: #fb5c00;
    --color-clap-orange-700: #c2410c;
    --color-primary-5: #d04b00;
    --color-primary-6: #fb5c00;
    --color-primary-7: #ff8c5d;
    --color-primary-9: #ffdbce;
    --color-primary-10: #ffede7;
    --color-primary-11: #fff5f1;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer mui, components;

@layer utilities {
  .\@container {
    container-type: inline-size;
  }

  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .\!fixed {
    position: fixed !important;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .\!top-0 {
    top: calc(var(--spacing) * 0) !important;
  }

  .\!top-14 {
    top: calc(var(--spacing) * 14) !important;
  }

  .\!top-20 {
    top: calc(var(--spacing) * 20) !important;
  }

  .\!top-\[5px\] {
    top: 5px !important;
  }

  .-top-\[2px\] {
    top: -2px;
  }

  .-top-\[10px\] {
    top: -10px;
  }

  .-top-\[18px\] {
    top: -18px;
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-1 {
    top: calc(var(--spacing) * 1);
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-5 {
    top: calc(var(--spacing) * 5);
  }

  .top-7 {
    top: calc(var(--spacing) * 7);
  }

  .top-9 {
    top: calc(var(--spacing) * 9);
  }

  .top-10 {
    top: calc(var(--spacing) * 10);
  }

  .top-12 {
    top: calc(var(--spacing) * 12);
  }

  .top-20 {
    top: calc(var(--spacing) * 20);
  }

  .top-\[-8px\] {
    top: -8px;
  }

  .top-\[-10px\] {
    top: -10px;
  }

  .top-\[-16px\] {
    top: -16px;
  }

  .top-\[-50px\] {
    top: -50px;
  }

  .top-\[1px\] {
    top: 1px;
  }

  .top-\[2px\] {
    top: 2px;
  }

  .top-\[3px\] {
    top: 3px;
  }

  .top-\[4px\] {
    top: 4px;
  }

  .top-\[5px\] {
    top: 5px;
  }

  .top-\[6px\] {
    top: 6px;
  }

  .top-\[7px\] {
    top: 7px;
  }

  .top-\[10px\] {
    top: 10px;
  }

  .top-\[16px\] {
    top: 16px;
  }

  .top-\[17px\] {
    top: 17px;
  }

  .top-\[42px\] {
    top: 42px;
  }

  .top-\[50px\] {
    top: 50px;
  }

  .top-\[58px\] {
    top: 58px;
  }

  .top-\[60px\] {
    top: 60px;
  }

  .top-\[64px\] {
    top: 64px;
  }

  .top-\[66px\] {
    top: 66px;
  }

  .top-\[69px\] {
    top: 69px;
  }

  .top-\[70px\] {
    top: 70px;
  }

  .top-\[88px\] {
    top: 88px;
  }

  .top-\[125px\] {
    top: 125px;
  }

  .-right-5 {
    right: calc(var(--spacing) * -5);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-8 {
    right: calc(var(--spacing) * 8);
  }

  .right-\[-8px\] {
    right: -8px;
  }

  .right-\[5px\] {
    right: 5px;
  }

  .right-\[6px\] {
    right: 6px;
  }

  .right-\[16px\] {
    right: 16px;
  }

  .right-\[20px\] {
    right: 20px;
  }

  .-bottom-6 {
    bottom: calc(var(--spacing) * -6);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-\[0\], .bottom-\[0px\] {
    bottom: 0;
  }

  .bottom-\[20px\] {
    bottom: 20px;
  }

  .\!left-0 {
    left: calc(var(--spacing) * 0) !important;
  }

  .-left-\[100px\] {
    left: -100px;
  }

  .-left-\[270px\] {
    left: -270px;
  }

  .-left-\[350px\] {
    left: -350px;
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-10 {
    left: calc(var(--spacing) * 10);
  }

  .left-\[-16px\] {
    left: -16px;
  }

  .left-\[0px\] {
    left: 0;
  }

  .left-\[8px\] {
    left: 8px;
  }

  .left-\[15px\] {
    left: 15px;
  }

  .left-\[50\%\] {
    left: 50%;
  }

  .left-\[98px\] {
    left: 98px;
  }

  .z-0 {
    z-index: 0;
  }

  .z-1 {
    z-index: 1;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-100 {
    z-index: 100;
  }

  .z-1000 {
    z-index: 1000;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .col-1 {
    grid-column: 1;
  }

  .col-2 {
    grid-column: 2;
  }

  .col-3 {
    grid-column: 3;
  }

  .col-4 {
    grid-column: 4;
  }

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .col-span-3 {
    grid-column: span 3 / span 3;
  }

  .col-span-4 {
    grid-column: span 4 / span 4;
  }

  .col-span-5 {
    grid-column: span 5 / span 5;
  }

  .col-span-6 {
    grid-column: span 6 / span 6;
  }

  .col-span-7 {
    grid-column: span 7 / span 7;
  }

  .col-span-8 {
    grid-column: span 8 / span 8;
  }

  .col-span-10 {
    grid-column: span 10 / span 10;
  }

  .col-span-12 {
    grid-column: span 12 / span 12;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .-m-4 {
    margin: calc(var(--spacing) * -4);
  }

  .m-2 {
    margin: calc(var(--spacing) * 2);
  }

  .m-3 {
    margin: calc(var(--spacing) * 3);
  }

  .m-\[8px\] {
    margin: 8px;
  }

  .m-auto {
    margin: auto;
  }

  .-mx-10 {
    margin-inline: calc(var(--spacing) * -10);
  }

  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-\[-1rem\] {
    margin-inline: -1rem;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }

  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }

  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }

  .my-auto {
    margin-block: auto;
  }

  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }

  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }

  .-mt-3 {
    margin-top: calc(var(--spacing) * -3);
  }

  .-mt-5 {
    margin-top: calc(var(--spacing) * -5);
  }

  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }

  .-mt-8 {
    margin-top: calc(var(--spacing) * -8);
  }

  .-mt-12 {
    margin-top: calc(var(--spacing) * -12);
  }

  .-mt-\[2px\] {
    margin-top: -2px;
  }

  .-mt-\[10px\] {
    margin-top: -10px;
  }

  .-mt-\[20px\] {
    margin-top: -20px;
  }

  .-mt-\[40px\] {
    margin-top: -40px;
  }

  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-\[-24px\] {
    margin-top: -24px;
  }

  .mt-\[-30px\] {
    margin-top: -30px;
  }

  .mt-\[0px\] {
    margin-top: 0;
  }

  .mt-\[6px\] {
    margin-top: 6px;
  }

  .mt-\[10px\] {
    margin-top: 10px;
  }

  .mt-\[32px\] {
    margin-top: 32px;
  }

  .mt-\[34px\] {
    margin-top: 34px;
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-5 {
    margin-right: calc(var(--spacing) * 5);
  }

  .mr-8 {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-10 {
    margin-right: calc(var(--spacing) * 10);
  }

  .mr-12 {
    margin-right: calc(var(--spacing) * 12);
  }

  .\!mb-0 {
    margin-bottom: calc(var(--spacing) * 0) !important;
  }

  .\!mb-1 {
    margin-bottom: calc(var(--spacing) * 1) !important;
  }

  .\!mb-\[5px\] {
    margin-bottom: 5px !important;
  }

  .-mb-3 {
    margin-bottom: calc(var(--spacing) * -3);
  }

  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-11 {
    margin-bottom: calc(var(--spacing) * 11);
  }

  .mb-\[8px\] {
    margin-bottom: 8px;
  }

  .mb-\[21px\] {
    margin-bottom: 21px;
  }

  .-ml-1 {
    margin-left: calc(var(--spacing) * -1);
  }

  .-ml-10 {
    margin-left: calc(var(--spacing) * -10);
  }

  .-ml-\[20px\] {
    margin-left: -20px;
  }

  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-8 {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-\[-15px\] {
    margin-left: -15px;
  }

  .ml-auto {
    margin-left: auto;
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-5 {
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .\!block {
    display: block !important;
  }

  .\!grid {
    display: grid !important;
  }

  .\!hidden {
    display: none !important;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .table-row {
    display: table-row;
  }

  .aspect-\[1\/1\] {
    aspect-ratio: 1;
  }

  .aspect-\[3\/2\] {
    aspect-ratio: 3 / 2;
  }

  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
  }

  .aspect-\[16\/9\] {
    aspect-ratio: 16 / 9;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .\!h-10 {
    height: calc(var(--spacing) * 10) !important;
  }

  .\!h-16 {
    height: calc(var(--spacing) * 16) !important;
  }

  .\!h-\[40px\] {
    height: 40px !important;
  }

  .\!h-\[52px\] {
    height: 52px !important;
  }

  .\!h-\[150px\] {
    height: 150px !important;
  }

  .\!h-auto {
    height: auto !important;
  }

  .h-0 {
    height: calc(var(--spacing) * 0);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-26 {
    height: calc(var(--spacing) * 26);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-56 {
    height: calc(var(--spacing) * 56);
  }

  .h-60 {
    height: calc(var(--spacing) * 60);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-96 {
    height: calc(var(--spacing) * 96);
  }

  .h-\[0px\] {
    height: 0;
  }

  .h-\[1\.2rem\] {
    height: 1.2rem;
  }

  .h-\[1\.5rem\] {
    height: 1.5rem;
  }

  .h-\[1px\] {
    height: 1px;
  }

  .h-\[2\.5rem\] {
    height: 2.5rem;
  }

  .h-\[4rem\] {
    height: 4rem;
  }

  .h-\[7rem\] {
    height: 7rem;
  }

  .h-\[15px\] {
    height: 15px;
  }

  .h-\[16px\] {
    height: 16px;
  }

  .h-\[18px\] {
    height: 18px;
  }

  .h-\[20px\] {
    height: 20px;
  }

  .h-\[22px\] {
    height: 22px;
  }

  .h-\[24px\] {
    height: 24px;
  }

  .h-\[25px\] {
    height: 25px;
  }

  .h-\[28px\] {
    height: 28px;
  }

  .h-\[30px\] {
    height: 30px;
  }

  .h-\[32px\] {
    height: 32px;
  }

  .h-\[33px\] {
    height: 33px;
  }

  .h-\[34px\] {
    height: 34px;
  }

  .h-\[40\.04px\] {
    height: 40.04px;
  }

  .h-\[40px\] {
    height: 40px;
  }

  .h-\[42px\] {
    height: 42px;
  }

  .h-\[44px\] {
    height: 44px;
  }

  .h-\[45px\] {
    height: 45px;
  }

  .h-\[46px\] {
    height: 46px;
  }

  .h-\[48px\] {
    height: 48px;
  }

  .h-\[50\%\] {
    height: 50%;
  }

  .h-\[50px\] {
    height: 50px;
  }

  .h-\[52px\] {
    height: 52px;
  }

  .h-\[53px\] {
    height: 53px;
  }

  .h-\[60px\] {
    height: 60px;
  }

  .h-\[63px\] {
    height: 63px;
  }

  .h-\[64px\] {
    height: 64px;
  }

  .h-\[68px\] {
    height: 68px;
  }

  .h-\[71\] {
    height: 71px;
  }

  .h-\[72px\] {
    height: 72px;
  }

  .h-\[80px\] {
    height: 80px;
  }

  .h-\[83px\] {
    height: 83px;
  }

  .h-\[100px\] {
    height: 100px;
  }

  .h-\[100vh\] {
    height: 100vh;
  }

  .h-\[120px\] {
    height: 120px;
  }

  .h-\[134px\] {
    height: 134px;
  }

  .h-\[178px\] {
    height: 178px;
  }

  .h-\[184px\] {
    height: 184px;
  }

  .h-\[200px\] {
    height: 200px;
  }

  .h-\[240px\] {
    height: 240px;
  }

  .h-\[250px\] {
    height: 250px;
  }

  .h-\[252\.11864px\] {
    height: 252.119px;
  }

  .h-\[260px\] {
    height: 260px;
  }

  .h-\[280px\] {
    height: 280px;
  }

  .h-\[300px\] {
    height: 300px;
  }

  .h-\[400px\] {
    height: 400px;
  }

  .h-\[480px\] {
    height: 480px;
  }

  .h-\[500\], .h-\[500px\] {
    height: 500px;
  }

  .h-\[570px\] {
    height: 570px;
  }

  .h-\[600px\] {
    height: 600px;
  }

  .h-\[715px\] {
    height: 715px;
  }

  .h-\[calc\(16px\+16px\)\] {
    height: 32px;
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-screen {
    height: 100vh;
  }

  .\!max-h-screen {
    max-height: 100vh !important;
  }

  .max-h-0 {
    max-height: calc(var(--spacing) * 0);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-\[64px\] {
    max-height: 64px;
  }

  .max-h-\[260px\] {
    max-height: 260px;
  }

  .max-h-\[350px\] {
    max-height: 350px;
  }

  .max-h-\[400px\] {
    max-height: 400px;
  }

  .max-h-\[800px\] {
    max-height: 800px;
  }

  .max-h-\[1000px\] {
    max-height: 1000px;
  }

  .max-h-full {
    max-height: 100%;
  }

  .max-h-screen {
    max-height: 100vh;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-36 {
    min-height: calc(var(--spacing) * 36);
  }

  .min-h-\[48px\] {
    min-height: 48px;
  }

  .min-h-\[56px\] {
    min-height: 56px;
  }

  .min-h-\[60px\] {
    min-height: 60px;
  }

  .min-h-\[64px\] {
    min-height: 64px;
  }

  .min-h-\[80px\] {
    min-height: 80px;
  }

  .min-h-\[200px\] {
    min-height: 200px;
  }

  .min-h-\[240px\] {
    min-height: 240px;
  }

  .min-h-\[300px\] {
    min-height: 300px;
  }

  .min-h-\[500px\] {
    min-height: 500px;
  }

  .min-h-\[514px\] {
    min-height: 514px;
  }

  .min-h-\[521px\] {
    min-height: 521px;
  }

  .min-h-\[583px\] {
    min-height: 583px;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .\!w-\[343px\] {
    width: 343px !important;
  }

  .\!w-\[422px\] {
    width: 422px !important;
  }

  .\!w-auto {
    width: auto !important;
  }

  .w-0 {
    width: calc(var(--spacing) * 0);
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-1\/3 {
    width: 33.3333%;
  }

  .w-1\/4 {
    width: 25%;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-26 {
    width: calc(var(--spacing) * 26);
  }

  .w-30 {
    width: calc(var(--spacing) * 30);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-46 {
    width: calc(var(--spacing) * 46);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-50 {
    width: calc(var(--spacing) * 50);
  }

  .w-52 {
    width: calc(var(--spacing) * 52);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-60 {
    width: calc(var(--spacing) * 60);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-96 {
    width: calc(var(--spacing) * 96);
  }

  .w-100 {
    width: calc(var(--spacing) * 100);
  }

  .w-\[0px\] {
    width: 0;
  }

  .w-\[2rem\] {
    width: 2rem;
  }

  .w-\[7rem\] {
    width: 7rem;
  }

  .w-\[16px\] {
    width: 16px;
  }

  .w-\[18px\] {
    width: 18px;
  }

  .w-\[20px\] {
    width: 20px;
  }

  .w-\[22px\] {
    width: 22px;
  }

  .w-\[24px\] {
    width: 24px;
  }

  .w-\[25px\] {
    width: 25px;
  }

  .w-\[28px\] {
    width: 28px;
  }

  .w-\[30\%\] {
    width: 30%;
  }

  .w-\[32px\] {
    width: 32px;
  }

  .w-\[33\%\] {
    width: 33%;
  }

  .w-\[34px\] {
    width: 34px;
  }

  .w-\[40\%\] {
    width: 40%;
  }

  .w-\[40\.1px\] {
    width: 40.1px;
  }

  .w-\[40px\] {
    width: 40px;
  }

  .w-\[44px\] {
    width: 44px;
  }

  .w-\[45px\] {
    width: 45px;
  }

  .w-\[48px\] {
    width: 48px;
  }

  .w-\[50px\] {
    width: 50px;
  }

  .w-\[51px\] {
    width: 51px;
  }

  .w-\[54\.24px\] {
    width: 54.24px;
  }

  .w-\[60\%\] {
    width: 60%;
  }

  .w-\[60px\] {
    width: 60px;
  }

  .w-\[68px\] {
    width: 68px;
  }

  .w-\[70\%\] {
    width: 70%;
  }

  .w-\[70px\] {
    width: 70px;
  }

  .w-\[71px\] {
    width: 71px;
  }

  .w-\[80px\] {
    width: 80px;
  }

  .w-\[80vw\] {
    width: 80vw;
  }

  .w-\[88px\] {
    width: 88px;
  }

  .w-\[90\%\] {
    width: 90%;
  }

  .w-\[100px\] {
    width: 100px;
  }

  .w-\[110px\] {
    width: 110px;
  }

  .w-\[118px\] {
    width: 118px;
  }

  .w-\[120px\] {
    width: 120px;
  }

  .w-\[121px\] {
    width: 121px;
  }

  .w-\[132px\] {
    width: 132px;
  }

  .w-\[144px\] {
    width: 144px;
  }

  .w-\[150px\] {
    width: 150px;
  }

  .w-\[178px\] {
    width: 178px;
  }

  .w-\[180px\] {
    width: 180px;
  }

  .w-\[195px\] {
    width: 195px;
  }

  .w-\[200px\] {
    width: 200px;
  }

  .w-\[208px\] {
    width: 208px;
  }

  .w-\[210px\] {
    width: 210px;
  }

  .w-\[220px\] {
    width: 220px;
  }

  .w-\[223px\] {
    width: 223px;
  }

  .w-\[240px\] {
    width: 240px;
  }

  .w-\[250px\] {
    width: 250px;
  }

  .w-\[254px\] {
    width: 254px;
  }

  .w-\[270px\] {
    width: 270px;
  }

  .w-\[280px\] {
    width: 280px;
  }

  .w-\[286px\] {
    width: 286px;
  }

  .w-\[300px\] {
    width: 300px;
  }

  .w-\[305px\] {
    width: 305px;
  }

  .w-\[340px\] {
    width: 340px;
  }

  .w-\[343px\] {
    width: 343px;
  }

  .w-\[345px\] {
    width: 345px;
  }

  .w-\[350px\] {
    width: 350px;
  }

  .w-\[370px\] {
    width: 370px;
  }

  .w-\[392px\] {
    width: 392px;
  }

  .w-\[422px\] {
    width: 422px;
  }

  .w-\[480px\] {
    width: 480px;
  }

  .w-\[500\], .w-\[500px\] {
    width: 500px;
  }

  .w-\[550px\] {
    width: 550px;
  }

  .w-\[600px\] {
    width: 600px;
  }

  .w-\[700px\] {
    width: 700px;
  }

  .w-\[750px\] {
    width: 750px;
  }

  .w-\[816px\] {
    width: 816px;
  }

  .w-\[1098px\] {
    width: 1098px;
  }

  .w-\[calc\(16px\+16px\)\] {
    width: 32px;
  }

  .w-\[calc\(50\%\+20px\)\] {
    width: calc(50% + 20px);
  }

  .w-\[calc\(100\%\+77px\)\] {
    width: calc(100% + 77px);
  }

  .w-\[calc\(100vw-32px-16px\)\] {
    width: calc(100vw - 48px);
  }

  .w-auto {
    width: auto;
  }

  .w-full {
    width: 100%;
  }

  .w-screen {
    width: 100vw;
  }

  .\!max-w-\[1536px\] {
    max-width: 1536px !important;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-120 {
    max-width: calc(var(--spacing) * 120);
  }

  .max-w-\[50\%\] {
    max-width: 50%;
  }

  .max-w-\[60px\] {
    max-width: 60px;
  }

  .max-w-\[80px\] {
    max-width: 80px;
  }

  .max-w-\[200px\] {
    max-width: 200px;
  }

  .max-w-\[400px\] {
    max-width: 400px;
  }

  .max-w-\[460px\] {
    max-width: 460px;
  }

  .max-w-\[600px\] {
    max-width: 600px;
  }

  .max-w-\[800px\] {
    max-width: 800px;
  }

  .max-w-\[900px\] {
    max-width: 900px;
  }

  .max-w-\[1024px\] {
    max-width: 1024px;
  }

  .max-w-\[1120px\] {
    max-width: 1120px;
  }

  .max-w-\[1400px\] {
    max-width: 1400px;
  }

  .max-w-\[1536px\] {
    max-width: 1536px;
  }

  .max-w-\[1600px\] {
    max-width: 1600px;
  }

  .max-w-\[calc\(100vw-50px\)\] {
    max-width: calc(100vw - 50px);
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-screen {
    max-width: 100vw;
  }

  .max-w-screen-2xl {
    max-width: var(--breakpoint-2xl);
  }

  .max-w-screen-lg {
    max-width: var(--breakpoint-lg);
  }

  .max-w-screen-md {
    max-width: var(--breakpoint-md);
  }

  .max-w-screen-xl {
    max-width: var(--breakpoint-xl);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-80 {
    min-width: calc(var(--spacing) * 80);
  }

  .min-w-\[80px\] {
    min-width: 80px;
  }

  .min-w-\[130px\] {
    min-width: 130px;
  }

  .min-w-\[200px\] {
    min-width: 200px;
  }

  .min-w-\[800px\] {
    min-width: 800px;
  }

  .min-w-full {
    min-width: 100%;
  }

  .min-w-screen {
    min-width: 100vw;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-1\/3 {
    flex: 33.3333%;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .flex-grow {
    flex-grow: 1;
  }

  .flex-grow-0 {
    flex-grow: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .table-auto {
    table-layout: auto;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1\/2 {
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-6 {
    --tw-translate-x: calc(var(--spacing) * 6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[-500px\] {
    --tw-translate-x: -500px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[-1000px\] {
    --tw-translate-x: -1000px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[0px\] {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[25px\] {
    --tw-translate-y: 25px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-75 {
    --tw-scale-x: 75%;
    --tw-scale-y: 75%;
    --tw-scale-z: 75%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-150 {
    --tw-scale-x: 150%;
    --tw-scale-y: 150%;
    --tw-scale-z: 150%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .-rotate-45 {
    rotate: -45deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .\!cursor-auto {
    cursor: auto !important;
  }

  .cursor-auto {
    cursor: auto;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-move {
    cursor: move;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-text {
    cursor: text;
  }

  .touch-none {
    touch-action: none;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .list-none {
    list-style-type: none;
  }

  .appearance-none {
    appearance: none;
  }

  .break-inside-avoid {
    break-inside: avoid;
  }

  .break-after-column {
    break-after: column;
  }

  .\!grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .\!flex-row {
    flex-direction: row !important;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-row-reverse {
    flex-direction: row-reverse;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .\!justify-between {
    justify-content: space-between !important;
  }

  .\!justify-end {
    justify-content: flex-end !important;
  }

  .\!justify-start {
    justify-content: flex-start !important;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-items-center {
    justify-items: center;
  }

  .\!gap-0 {
    gap: calc(var(--spacing) * 0) !important;
  }

  .\!gap-4 {
    gap: calc(var(--spacing) * 4) !important;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-9 {
    gap: calc(var(--spacing) * 9);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-32 {
    gap: calc(var(--spacing) * 32);
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  :where(.space-x-3 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-\[-4px\] > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(-4px * var(--tw-space-x-reverse));
    margin-inline-end: calc(-4px * calc(1 - var(--tw-space-x-reverse)));
  }

  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }

  :where(.divide-primary > :not(:last-child)) {
    border-color: var(--md-primaryXX);
  }

  :where(.divide-secondary > :not(:last-child)) {
    border-color: var(--md-secondary);
  }

  .self-center {
    align-self: center;
  }

  .self-stretch {
    align-self: stretch;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-x-scroll {
    overflow-x: scroll;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overflow-y-hidden {
    overflow-y: hidden;
  }

  .overflow-y-scroll {
    overflow-y: scroll;
  }

  .\!rounded-none {
    border-radius: 0 !important;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-\[2px\] {
    border-radius: 2px;
  }

  .rounded-\[2rem\] {
    border-radius: 2rem;
  }

  .rounded-\[3px\] {
    border-radius: 3px;
  }

  .rounded-\[4px\] {
    border-radius: 4px;
  }

  .rounded-\[24px\] {
    border-radius: 24px;
  }

  .rounded-\[50px\] {
    border-radius: 50px;
  }

  .rounded-\[106\.21px\] {
    border-radius: 106.21px;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }

  .rounded-t-none {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .rounded-l-md {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .\!rounded-tl-none {
    border-top-left-radius: 0 !important;
  }

  .rounded-tl-\[12px\] {
    border-top-left-radius: 12px;
  }

  .rounded-tl-none {
    border-top-left-radius: 0;
  }

  .rounded-r-md {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .rounded-r-xl {
    border-top-right-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
  }

  .rounded-tr-\[12px\] {
    border-top-right-radius: 12px;
  }

  .rounded-tr-lg {
    border-top-right-radius: var(--radius-lg);
  }

  .rounded-b-lg {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }

  .rounded-br-\[10px\] {
    border-bottom-right-radius: 10px;
  }

  .rounded-br-lg {
    border-bottom-right-radius: var(--radius-lg);
  }

  .rounded-bl-\[10px\] {
    border-bottom-left-radius: 10px;
  }

  .rounded-bl-lg {
    border-bottom-left-radius: var(--radius-lg);
  }

  .\!border-2 {
    border-style: var(--tw-border-style) !important;
    border-width: 2px !important;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-1 {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-\[1px\] {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-\[2px\] {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-\[3px\] {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }

  .border-\[5px\] {
    border-style: var(--tw-border-style);
    border-width: 5px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-r-0 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
  }

  .\!border-b-0 {
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 0 !important;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2, .border-b-\[2px\] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-0 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0;
  }

  .\!border-none {
    --tw-border-style: none !important;
    border-style: none !important;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }

  .\!border-blue-600 {
    border-color: var(--color-blue-600) !important;
  }

  .\!border-neutral-9 {
    border-color: var(--color-neutral-9) !important;
  }

  .\!border-primary-6 {
    border-color: var(--color-primary-6) !important;
  }

  .border-\[\#F4EEEC\] {
    border-color: #f4eeec;
  }

  .border-\[\#e7e7e7\] {
    border-color: #e7e7e7;
  }

  .border-\[\#f0f0f0\] {
    border-color: #f0f0f0;
  }

  .border-\[\#f4eeec\] {
    border-color: #f4eeec;
  }

  .border-\[\#fb5c00\] {
    border-color: #fb5c00;
  }

  .border-\[var\(--md-on-surface-variant\)\] {
    border-color: var(--md-on-surface-variant);
  }

  .border-\[var\(--md-outline\)\] {
    border-color: var(--md-outline);
  }

  .border-\[var\(--md-outline-variant\)\] {
    border-color: var(--md-outline-variant);
  }

  .border-\[var\(--md-surface-container\)\] {
    border-color: var(--md-surface-container);
  }

  .border-\[var\(--md-surface-container-highest\)\] {
    border-color: var(--md-surface-container-highest);
  }

  .border-gray-100 {
    border-color: var(--color-gray-100);
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .border-gray-400 {
    border-color: var(--color-gray-400);
  }

  .border-gray-500 {
    border-color: var(--color-gray-500);
  }

  .border-grey-2 {
    border-color: var(--color-grey-2);
  }

  .border-neutral-3 {
    border-color: var(--color-neutral-3);
  }

  .border-neutral-4 {
    border-color: var(--color-neutral-4);
  }

  .border-neutral-6 {
    border-color: var(--color-neutral-6);
  }

  .border-neutral-8 {
    border-color: var(--color-neutral-8);
  }

  .border-neutral-9 {
    border-color: var(--color-neutral-9);
  }

  .border-neutral-10 {
    border-color: var(--color-neutral-10);
  }

  .border-neutral-200 {
    border-color: var(--color-neutral-200);
  }

  .border-orange-400 {
    border-color: var(--color-orange-400);
  }

  .border-outline {
    border-color: var(--md-outline);
  }

  .border-outline-variant {
    border-color: var(--md-outline-variant);
  }

  .border-primary {
    border-color: var(--md-primaryXX);
  }

  .border-primary-5 {
    border-color: var(--color-primary-5);
  }

  .border-primary-6 {
    border-color: var(--color-primary-6);
  }

  .border-primary-7 {
    border-color: var(--color-primary-7);
  }

  .border-primary-9 {
    border-color: var(--color-primary-9);
  }

  .border-red-200 {
    border-color: var(--color-red-200);
  }

  .border-red-500 {
    border-color: var(--color-red-500);
  }

  .border-red-600 {
    border-color: var(--color-red-600);
  }

  .border-secondary-4 {
    border-color: var(--color-secondary-4);
  }

  .border-secondary-6 {
    border-color: var(--color-secondary-6);
  }

  .border-secondary-9 {
    border-color: var(--color-secondary-9);
  }

  .border-slate-100 {
    border-color: var(--color-slate-100);
  }

  .border-slate-300 {
    border-color: var(--color-slate-300);
  }

  .border-slate-400 {
    border-color: var(--color-slate-400);
  }

  .border-surface-container-low {
    border-color: var(--md-surface-container-low);
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-r-grey-1 {
    border-right-color: var(--color-grey-1);
  }

  .border-r-neutral-10 {
    border-right-color: var(--color-neutral-10);
  }

  .border-r-outline-variant {
    border-right-color: var(--md-outline-variant);
  }

  .border-b-neutral-9 {
    border-bottom-color: var(--color-neutral-9);
  }

  .border-b-neutral-10 {
    border-bottom-color: var(--color-neutral-10);
  }

  .\!bg-\[\#F5DED6\] {
    background-color: #f5ded6 !important;
  }

  .\!bg-neutral-6 {
    background-color: var(--color-neutral-6) !important;
  }

  .\!bg-neutral-10 {
    background-color: var(--color-neutral-10) !important;
  }

  .\!bg-slate-200 {
    background-color: var(--color-slate-200) !important;
  }

  .\!bg-transparent {
    background-color: #0000 !important;
  }

  .\!bg-white {
    background-color: var(--color-white) !important;
  }

  .bg-\[\#3CBF26\] {
    background-color: #3cbf26;
  }

  .bg-\[\#414b58d9\] {
    background-color: #414b58d9;
  }

  .bg-\[\#667eea\] {
    background-color: #667eea;
  }

  .bg-\[\#B3E4F4\] {
    background-color: #b3e4f4;
  }

  .bg-\[\#CCD8FF\] {
    background-color: #ccd8ff;
  }

  .bg-\[\#D8F2D4\] {
    background-color: #d8f2d4;
  }

  .bg-\[\#DE4794\] {
    background-color: #de4794;
  }

  .bg-\[\#DFDFDF\] {
    background-color: #dfdfdf;
  }

  .bg-\[\#EFEFEF\] {
    background-color: #efefef;
  }

  .bg-\[\#F3F6F5\] {
    background-color: #f3f6f5;
  }

  .bg-\[\#F4EEEC\] {
    background-color: #f4eeec;
  }

  .bg-\[\#F5DED6\] {
    background-color: #f5ded6;
  }

  .bg-\[\#FFD1EC\] {
    background-color: #ffd1ec;
  }

  .bg-\[\#f4eeec\] {
    background-color: #f4eeec;
  }

  .bg-\[\#f5f5f5\] {
    background-color: #f5f5f5;
  }

  .bg-\[\#faf7f6\] {
    background-color: #faf7f6;
  }

  .bg-\[color\:var\(--ch-background\)\] {
    background-color: var(--ch-background);
  }

  .bg-\[color\:var\(--ch-surface-brand-primary\)\] {
    background-color: var(--ch-surface-brand-primary);
  }

  .bg-\[var\(--color-surface\)\] {
    background-color: var(--color-surface);
  }

  .bg-\[var\(--cover-background-color\)\] {
    background-color: var(--cover-background-color);
  }

  .bg-\[var\(--md-primary-container\)\] {
    background-color: var(--md-primary-container);
  }

  .bg-\[var\(--md-surface\)\] {
    background-color: var(--md-surface);
  }

  .bg-\[var\(--md-surface-container\)\] {
    background-color: var(--md-surface-container);
  }

  .bg-\[var\(--md-surface-container-low\)\] {
    background-color: var(--md-surface-container-low);
  }

  .bg-\[var\(--md-surface-container-lowest\)\] {
    background-color: var(--md-surface-container-lowest);
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/30 {
    background-color: #0000004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/30 {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }

  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }

  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }

  .bg-blue-800 {
    background-color: var(--color-blue-800);
  }

  .bg-clap-orange-500 {
    background-color: var(--color-clap-orange-500);
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }

  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }

  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }

  .bg-green-50 {
    background-color: var(--color-green-50);
  }

  .bg-green-100 {
    background-color: var(--color-green-100);
  }

  .bg-green-200 {
    background-color: var(--color-green-200);
  }

  .bg-green-500 {
    background-color: var(--color-green-500);
  }

  .bg-green-600 {
    background-color: var(--color-green-600);
  }

  .bg-green-800 {
    background-color: var(--color-green-800);
  }

  .bg-grey-1 {
    background-color: var(--color-grey-1);
  }

  .bg-grey-2 {
    background-color: var(--color-grey-2);
  }

  .bg-indigo-50 {
    background-color: var(--color-indigo-50);
  }

  .bg-indigo-100 {
    background-color: var(--color-indigo-100);
  }

  .bg-indigo-600 {
    background-color: var(--color-indigo-600);
  }

  .bg-neutral-1 {
    background-color: var(--color-neutral-1);
  }

  .bg-neutral-9 {
    background-color: var(--color-neutral-9);
  }

  .bg-neutral-10 {
    background-color: var(--color-neutral-10);
  }

  .bg-neutral-11 {
    background-color: var(--color-neutral-11);
  }

  .bg-orange-100 {
    background-color: var(--color-orange-100);
  }

  .bg-orange-500 {
    background-color: var(--color-orange-500);
  }

  .bg-orange-600 {
    background-color: var(--color-orange-600);
  }

  .bg-palette-primary-10 {
    background-color: var(--color-palette-primary-10);
  }

  .bg-palette-primary-20 {
    background-color: var(--color-palette-primary-20);
  }

  .bg-pink-100 {
    background-color: var(--color-pink-100);
  }

  .bg-primary {
    background-color: var(--md-primaryXX);
  }

  .bg-primary-5 {
    background-color: var(--color-primary-5);
  }

  .bg-primary-6 {
    background-color: var(--color-primary-6);
  }

  .bg-primary-7 {
    background-color: var(--color-primary-7);
  }

  .bg-primary-9 {
    background-color: var(--color-primary-9);
  }

  .bg-primary-10 {
    background-color: var(--color-primary-10);
  }

  .bg-primary-11 {
    background-color: var(--color-primary-11);
  }

  .bg-primary-container {
    background-color: var(--md-primary-container);
  }

  .bg-purple-100 {
    background-color: var(--color-purple-100);
  }

  .bg-purple-600 {
    background-color: var(--color-purple-600);
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-100 {
    background-color: var(--color-red-100);
  }

  .bg-red-200 {
    background-color: var(--color-red-200);
  }

  .bg-red-300 {
    background-color: var(--color-red-300);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-red-600 {
    background-color: var(--color-red-600);
  }

  .bg-secondary {
    background-color: var(--md-secondary);
  }

  .bg-secondary-1 {
    background-color: var(--color-secondary-1);
  }

  .bg-secondary-2 {
    background-color: var(--color-secondary-2);
  }

  .bg-secondary-4 {
    background-color: var(--color-secondary-4);
  }

  .bg-secondary-7 {
    background-color: var(--color-secondary-7);
  }

  .bg-secondary-10 {
    background-color: var(--color-secondary-10);
  }

  .bg-secondary-container {
    background-color: var(--md-secondary-container);
  }

  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }

  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }

  .bg-slate-200 {
    background-color: var(--color-slate-200);
  }

  .bg-slate-300 {
    background-color: var(--color-slate-300);
  }

  .bg-slate-400 {
    background-color: var(--color-slate-400);
  }

  .bg-slate-600 {
    background-color: var(--color-slate-600);
  }

  .bg-status-bad {
    background-color: var(--color-status-bad);
  }

  .bg-status-good {
    background-color: var(--color-status-good);
  }

  .bg-status-okay {
    background-color: var(--color-status-okay);
  }

  .bg-status-very-bad {
    background-color: var(--color-status-very-bad);
  }

  .bg-surface {
    background-color: var(--md-surface);
  }

  .bg-surface-bright {
    background-color: var(--md-surface-bright);
  }

  .bg-surface-container {
    background-color: var(--md-surface-container);
  }

  .bg-surface-container-high {
    background-color: var(--md-surface-container-high);
  }

  .bg-surface-container-highest {
    background-color: var(--md-surface-container-highest);
  }

  .bg-surface-container-low {
    background-color: var(--md-surface-container-low);
  }

  .bg-surface-container-lowest {
    background-color: var(--md-surface-container-lowest);
  }

  .bg-surface-container-lowest\/50 {
    background-color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface-container-lowest\/50 {
      background-color: color-mix(in oklab, var(--md-surface-container-lowest) 50%, transparent);
    }
  }

  .bg-surface-container-variant {
    background-color: var(--md-surface-container-variant);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-zinc-100 {
    background-color: var(--color-zinc-100);
  }

  .bg-zinc-200 {
    background-color: var(--color-zinc-200);
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .\!bg-none {
    background-image: none !important;
  }

  .bg-\[url\(\'\/assets\/images\/login-bg-dark\.jpg\'\)\] {
    background-image: url("/assets/images/login-bg-dark.jpg");
  }

  .from-pink-50 {
    --tw-gradient-from: var(--color-pink-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-pink-500 {
    --tw-gradient-from: var(--color-pink-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-pink-600 {
    --tw-gradient-from: var(--color-pink-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-surface-container\/95 {
    --tw-gradient-from: #f3f3f3f2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-surface-container\/95 {
      --tw-gradient-from: color-mix(in oklab, var(--md-surface-container) 95%, transparent);
    }
  }

  .from-surface-container\/95 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-surface-container\/85 {
    --tw-gradient-to: #f3f3f3d9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-surface-container\/85 {
      --tw-gradient-to: color-mix(in oklab, var(--md-surface-container) 85%, transparent);
    }
  }

  .to-surface-container\/85 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-violet-50 {
    --tw-gradient-to: var(--color-violet-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-violet-500 {
    --tw-gradient-to: var(--color-violet-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-violet-600 {
    --tw-gradient-to: var(--color-violet-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .bg-cover {
    background-size: cover;
  }

  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }

  .bg-center {
    background-position: center;
  }

  .\!fill-neutral-1 {
    fill: var(--color-neutral-1) !important;
  }

  .\!fill-secondary-7 {
    fill: var(--color-secondary-7) !important;
  }

  .fill-clap-orange-500 {
    fill: var(--color-clap-orange-500);
  }

  .fill-current {
    fill: currentColor;
  }

  .fill-neutral-6 {
    fill: var(--color-neutral-6);
  }

  .fill-primary {
    fill: var(--md-primaryXX);
  }

  .fill-primary-6 {
    fill: var(--color-primary-6);
  }

  .fill-secondary {
    fill: var(--md-secondary);
  }

  .fill-secondary-7 {
    fill: var(--color-secondary-7);
  }

  .fill-white {
    fill: var(--color-white);
  }

  .fill-zinc-500 {
    fill: var(--color-zinc-500);
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .object-center {
    object-position: center;
  }

  .object-top {
    object-position: top;
  }

  .\!p-0 {
    padding: calc(var(--spacing) * 0) !important;
  }

  .\!p-4 {
    padding: calc(var(--spacing) * 4) !important;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .p-\[16px\] {
    padding: 16px;
  }

  .\!px-0 {
    padding-inline: calc(var(--spacing) * 0) !important;
  }

  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }

  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }

  .px-14 {
    padding-inline: calc(var(--spacing) * 14);
  }

  .px-\[1rem\] {
    padding-inline: 1rem;
  }

  .px-\[12px\] {
    padding-inline: 12px;
  }

  .px-\[16px\] {
    padding-inline: 16px;
  }

  .px-\[19px\] {
    padding-inline: 19px;
  }

  .px-\[24px\] {
    padding-inline: 24px;
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-\[5px\] {
    padding-block: 5px;
  }

  .py-\[6px\] {
    padding-block: 6px;
  }

  .py-\[8px\] {
    padding-block: 8px;
  }

  .py-\[26px\] {
    padding-block: 26px;
  }

  .py-\[72px\] {
    padding-block: 72px;
  }

  .\!pt-1 {
    padding-top: calc(var(--spacing) * 1) !important;
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-7 {
    padding-top: calc(var(--spacing) * 7);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }

  .pt-14 {
    padding-top: calc(var(--spacing) * 14);
  }

  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }

  .pt-\[29px\] {
    padding-top: 29px;
  }

  .pt-\[60px\] {
    padding-top: 60px;
  }

  .pt-\[80px\] {
    padding-top: 80px;
  }

  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }

  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-7 {
    padding-bottom: calc(var(--spacing) * 7);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-9 {
    padding-bottom: calc(var(--spacing) * 9);
  }

  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pb-14 {
    padding-bottom: calc(var(--spacing) * 14);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }

  .pb-\[5rem\] {
    padding-bottom: 5rem;
  }

  .pb-\[72px\] {
    padding-bottom: 72px;
  }

  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .align-middle {
    vertical-align: middle;
  }

  .align-top {
    vertical-align: top;
  }

  .font-body-large {
    font-family: var(--md-sys-typescale-body-large-font);
  }

  .font-body-medium {
    font-family: var(--md-sys-typescale-body-medium-font);
  }

  .font-body-small {
    font-family: var(--md-sys-typescale-body-small-font);
  }

  .font-brand {
    font-family: var(--md-ref-typeface-brand);
  }

  .font-display-large {
    font-family: var(--md-sys-typescale-display-large-font);
  }

  .font-display-medium {
    font-family: var(--md-sys-typescale-display-medium-font);
  }

  .font-display-small {
    font-family: var(--md-sys-typescale-display-small-font);
  }

  .font-headline-large {
    font-family: var(--md-sys-typescale-headline-large-font);
  }

  .font-headline-medium {
    font-family: var(--md-sys-typescale-headline-medium-font);
  }

  .font-headline-small {
    font-family: var(--md-sys-typescale-headline-small-font);
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-plain {
    font-family: var(--md-ref-typeface-plain);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .font-serif {
    font-family: var(--font-serif);
  }

  .font-title-large {
    font-family: var(--md-sys-typescale-title-large-font);
  }

  .font-title-medium {
    font-family: var(--md-sys-typescale-title-medium-font);
  }

  .font-title-small {
    font-family: var(--md-sys-typescale-title-small-font);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\!text-\[1rem\] {
    font-size: 1rem !important;
  }

  .\!text-\[16px\] {
    font-size: 16px !important;
  }

  .\!text-\[20px\] {
    font-size: 20px !important;
  }

  .\!text-\[24px\] {
    font-size: 24px !important;
  }

  .\!text-\[48px\] {
    font-size: 48px !important;
  }

  .text-\[0\.6rem\] {
    font-size: .6rem;
  }

  .text-\[0\.825rem\] {
    font-size: .825rem;
  }

  .text-\[1rem\] {
    font-size: 1rem;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[14px\] {
    font-size: 14px;
  }

  .text-\[16px\] {
    font-size: 16px;
  }

  .text-\[20px\] {
    font-size: 20px;
  }

  .text-\[22px\] {
    font-size: 22px;
  }

  .text-\[24px\] {
    font-size: 24px;
  }

  .text-\[26px\] {
    font-size: 26px;
  }

  .text-\[45px\] {
    font-size: 45px;
  }

  .text-\[52px\] {
    font-size: 52px;
  }

  .\!leading-9 {
    --tw-leading: calc(var(--spacing) * 9) !important;
    line-height: calc(var(--spacing) * 9) !important;
  }

  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-\[1\.1rem\] {
    --tw-leading: 1.1rem;
    line-height: 1.1rem;
  }

  .leading-\[12px\] {
    --tw-leading: 12px;
    line-height: 12px;
  }

  .leading-\[16px\] {
    --tw-leading: 16px;
    line-height: 16px;
  }

  .leading-\[18px\] {
    --tw-leading: 18px;
    line-height: 18px;
  }

  .leading-\[20px\] {
    --tw-leading: 20px;
    line-height: 20px;
  }

  .leading-\[24px\] {
    --tw-leading: 24px;
    line-height: 24px;
  }

  .leading-\[28px\] {
    --tw-leading: 28px;
    line-height: 28px;
  }

  .leading-\[30px\] {
    --tw-leading: 30px;
    line-height: 30px;
  }

  .leading-\[32px\] {
    --tw-leading: 32px;
    line-height: 32px;
  }

  .leading-\[52px\] {
    --tw-leading: 52px;
    line-height: 52px;
  }

  .leading-\[64px\] {
    --tw-leading: 64px;
    line-height: 64px;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .\!font-bold {
    --tw-font-weight: var(--font-weight-bold) !important;
    font-weight: var(--font-weight-bold) !important;
  }

  .font-\[20px\] {
    --tw-font-weight: 20px;
    font-weight: 20px;
  }

  .font-\[500\] {
    --tw-font-weight: 500;
    font-weight: 500;
  }

  .font-\[600\] {
    --tw-font-weight: 600;
    font-weight: 600;
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .break-normal {
    overflow-wrap: normal;
    word-break: normal;
  }

  .break-words {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

  .overflow-ellipsis, .text-ellipsis {
    text-overflow: ellipsis;
  }

  .\!whitespace-nowrap {
    white-space: nowrap !important;
  }

  .whitespace-normal {
    white-space: normal;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-line {
    white-space: pre-line;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .\!text-neutral-1 {
    color: var(--color-neutral-1) !important;
  }

  .\!text-neutral-3 {
    color: var(--color-neutral-3) !important;
  }

  .\!text-neutral-6 {
    color: var(--color-neutral-6) !important;
  }

  .\!text-neutral-9 {
    color: var(--color-neutral-9) !important;
  }

  .\!text-primary {
    color: var(--md-primaryXX) !important;
  }

  .\!text-primary-6 {
    color: var(--color-primary-6) !important;
  }

  .\!text-slate-900 {
    color: var(--color-slate-900) !important;
  }

  .\!text-status-preparing-for-order-1 {
    color: var(--color-status-preparing-for-order-1) !important;
  }

  .text-\[\#3CBF26\] {
    color: #3cbf26;
  }

  .text-\[\#005B77\] {
    color: #005b77;
  }

  .text-\[\#928F8E\] {
    color: #928f8e;
  }

  .text-\[\#5524D4\] {
    color: #5524d4;
  }

  .text-\[\#A40A59\] {
    color: #a40a59;
  }

  .text-\[\#D98FF0\] {
    color: #d98ff0;
  }

  .text-\[\#F00090\] {
    color: #f00090;
  }

  .text-\[\#FB5C00\] {
    color: #fb5c00;
  }

  .text-\[\#d3d3d3\] {
    color: #d3d3d3;
  }

  .text-\[color\:var\(--ch-on-background\)\] {
    color: var(--ch-on-background);
  }

  .text-\[color\:var\(--ch-text-brand-primary\)\] {
    color: var(--ch-text-brand-primary);
  }

  .text-\[color\:var\(--ch-text-on-brand-primary\)\] {
    color: var(--ch-text-on-brand-primary);
  }

  .text-\[color\:var\(--md-on-primary-container\)\] {
    color: var(--md-on-primary-container);
  }

  .text-\[color\:var\(--md-on-surface\)\] {
    color: var(--md-on-surface);
  }

  .text-\[var\(--ch-on\)\] {
    color: var(--ch-on);
  }

  .text-\[var\(--ch-on-1\)\] {
    color: var(--ch-on-1);
  }

  .text-\[var\(--ch-on-2\)\] {
    color: var(--ch-on-2);
  }

  .text-\[var\(--ch-on-3\)\] {
    color: var(--ch-on-3);
  }

  .text-\[var\(--ch-on-4\)\] {
    color: var(--ch-on-4);
  }

  .text-\[var\(--md-on-primary-container\)\] {
    color: var(--md-on-primary-container);
  }

  .text-\[var\(--md-on-surface\)\] {
    color: var(--md-on-surface);
  }

  .text-\[var\(--md-surface\)\] {
    color: var(--md-surface);
  }

  .text-\[var\(--text-color\)\] {
    color: var(--text-color);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-blue-700 {
    color: var(--color-blue-700);
  }

  .text-blue-800 {
    color: var(--color-blue-800);
  }

  .text-blue-900 {
    color: var(--color-blue-900);
  }

  .text-gray-100 {
    color: var(--color-gray-100);
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

  .text-gray-500 {
    color: var(--color-gray-500);
  }

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-gray-700 {
    color: var(--color-gray-700);
  }

  .text-gray-800 {
    color: var(--color-gray-800);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .text-green-400 {
    color: var(--color-green-400);
  }

  .text-green-500 {
    color: var(--color-green-500);
  }

  .text-green-700 {
    color: var(--color-green-700);
  }

  .text-green-800 {
    color: var(--color-green-800);
  }

  .text-indigo-600 {
    color: var(--color-indigo-600);
  }

  .text-indigo-700 {
    color: var(--color-indigo-700);
  }

  .text-neutral-1 {
    color: var(--color-neutral-1);
  }

  .text-neutral-3 {
    color: var(--color-neutral-3);
  }

  .text-neutral-4 {
    color: var(--color-neutral-4);
  }

  .text-neutral-5 {
    color: var(--color-neutral-5);
  }

  .text-neutral-6 {
    color: var(--color-neutral-6);
  }

  .text-neutral-8 {
    color: var(--color-neutral-8);
  }

  .text-neutral-9 {
    color: var(--color-neutral-9);
  }

  .text-on-primary {
    color: var(--md-on-primary);
  }

  .text-on-secondary {
    color: var(--md-on-secondary);
  }

  .text-on-secondary-container {
    color: var(--md-on-secondary-container);
  }

  .text-on-secondary-variant {
    color: var(--md-on-secondary-variant);
  }

  .text-on-surface {
    color: var(--md-on-surface);
  }

  .text-on-surface-variant {
    color: var(--md-on-surface-variant);
  }

  .text-on-surface\/80 {
    color: #000c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-on-surface\/80 {
      color: color-mix(in oklab, var(--md-on-surface) 80%, transparent);
    }
  }

  .text-primary {
    color: var(--md-primaryXX);
  }

  .text-primary-5 {
    color: var(--color-primary-5);
  }

  .text-primary-6 {
    color: var(--color-primary-6);
  }

  .text-primary-7 {
    color: var(--color-primary-7);
  }

  .text-primary-9 {
    color: var(--color-primary-9);
  }

  .text-primary-container {
    color: var(--md-primary-container);
  }

  .text-purple-600 {
    color: var(--color-purple-600);
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-red-700 {
    color: var(--color-red-700);
  }

  .text-red-800 {
    color: var(--color-red-800);
  }

  .text-red-900 {
    color: var(--color-red-900);
  }

  .text-secondary {
    color: var(--md-secondary);
  }

  .text-secondary-2 {
    color: var(--color-secondary-2);
  }

  .text-secondary-4 {
    color: var(--color-secondary-4);
  }

  .text-secondary-6 {
    color: var(--color-secondary-6);
  }

  .text-secondary-7 {
    color: var(--color-secondary-7);
  }

  .text-slate-500 {
    color: var(--color-slate-500);
  }

  .text-slate-600 {
    color: var(--color-slate-600);
  }

  .text-slate-700 {
    color: var(--color-slate-700);
  }

  .text-status-bad {
    color: var(--color-status-bad);
  }

  .text-status-good {
    color: var(--color-status-good);
  }

  .text-status-okay {
    color: var(--color-status-okay);
  }

  .text-status-very-bad {
    color: var(--color-status-very-bad);
  }

  .text-transparent {
    color: #0000;
  }

  .text-white {
    color: var(--color-white);
  }

  .text-yellow-400 {
    color: var(--color-yellow-400);
  }

  .text-yellow-500 {
    color: var(--color-yellow-500);
  }

  .\!normal-case {
    text-transform: none !important;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .placeholder-primary::placeholder {
    color: var(--md-primaryXX);
  }

  .accent-\[var\(--md-primary-container\)\] {
    accent-color: var(--md-primary-container);
  }

  .accent-primary-6 {
    accent-color: var(--color-primary-6);
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-100 {
    opacity: 1;
  }

  .opacity-\[0\.95\] {
    opacity: .95;
  }

  .\!shadow-none {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_20px_35px_0px_rgba\(0\,0\,0\,0\.3\)\] {
    --tw-shadow: 0 20px 35px 0px var(--tw-shadow-color, #0000004d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring, .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-surface-container {
    --tw-shadow-color: #f3f3f3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-surface-container {
      --tw-shadow-color: color-mix(in oklab, var(--md-surface-container) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-black\/5 {
    --tw-ring-color: #0000000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-black\/5 {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }

  .ring-blue-400 {
    --tw-ring-color: var(--color-blue-400);
  }

  .ring-blue-500 {
    --tw-ring-color: var(--color-blue-500);
  }

  .ring-primary {
    --tw-ring-color: var(--md-primaryXX);
  }

  .ring-secondary {
    --tw-ring-color: var(--md-secondary);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .outline-0 {
    outline-style: var(--tw-outline-style);
    outline-width: 0;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[1px_1px_1px_rgba\(0\,0\,0\,0\.31\)\] {
    --tw-drop-shadow-size: drop-shadow(1px 1px 1px var(--tw-drop-shadow-color, #0000004f));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[1px_1px_1px_rgba\(0\,0\,0\,0\.41\)\] {
    --tw-drop-shadow-size: drop-shadow(1px 1px 1px var(--tw-drop-shadow-color, #00000069));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-3xl {
    --tw-backdrop-blur: blur(var(--blur-3xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .delay-500 {
    transition-delay: .5s;
  }

  .duration-100 {
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  @media (hover: hover) {
    .group-hover\:block:is(:where(.group):hover *) {
      display: block;
    }

    .group-hover\:w-full:is(:where(.group):hover *) {
      width: 100%;
    }

    .group-hover\:font-bold:is(:where(.group):hover *) {
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold);
    }

    .group-hover\:text-neutral-3:is(:where(.group):hover *) {
      color: var(--color-neutral-3);
    }

    .group-hover\:text-primary-6:is(:where(.group):hover *) {
      color: var(--color-primary-6);
    }

    .group-hover\:no-underline:is(:where(.group):hover *) {
      text-decoration-line: none;
    }

    .group-hover\:underline:is(:where(.group):hover *) {
      text-decoration-line: underline;
    }

    .group-hover\:opacity-65:is(:where(.group):hover *) {
      opacity: .65;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  .placeholder\:text-neutral-6::placeholder {
    color: var(--color-neutral-6);
  }

  .first\:ml-\[0px\]:first-child {
    margin-left: 0;
  }

  .first\:rounded-l-xl:first-child {
    border-top-left-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }

  .first\:rounded-tl-lg:first-child {
    border-top-left-radius: var(--radius-lg);
  }

  .last\:mb-0:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .last\:rounded-r-xl:last-child {
    border-top-right-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
  }

  .last\:rounded-tr-lg:last-child {
    border-top-right-radius: var(--radius-lg);
  }

  .last\:border-none:last-child {
    --tw-border-style: none;
    border-style: none;
  }

  .checked\:bg-white:checked {
    background-color: var(--color-white);
  }

  .checked\:after\:absolute:checked:after {
    content: var(--tw-content);
    position: absolute;
  }

  .checked\:after\:top-\[1px\]:checked:after {
    content: var(--tw-content);
    top: 1px;
  }

  .checked\:after\:left-1:checked:after {
    content: var(--tw-content);
    left: calc(var(--spacing) * 1);
  }

  .checked\:after\:h-2:checked:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 2);
  }

  .checked\:after\:w-1:checked:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 1);
  }

  .checked\:after\:rotate-45:checked:after {
    content: var(--tw-content);
    rotate: 45deg;
  }

  .checked\:after\:border-r-2:checked:after {
    content: var(--tw-content);
    border-right-style: var(--tw-border-style);
    border-right-width: 2px;
  }

  .checked\:after\:border-b-2:checked:after {
    content: var(--tw-content);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .checked\:after\:border-\[\#fb5c00\]:checked:after {
    content: var(--tw-content);
    border-color: #fb5c00;
  }

  .checked\:after\:content-\[\'\'\]:checked:after {
    content: var(--tw-content);
    --tw-content: "";
    content: var(--tw-content);
  }

  .focus-within\:border-0:focus-within {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .focus-within\:border-clap-orange-500:focus-within {
    border-color: var(--color-clap-orange-500);
  }

  .focus-within\:border-neutral-1:focus-within {
    border-color: var(--color-neutral-1);
  }

  .focus-within\:border-neutral-6:focus-within {
    border-color: var(--color-neutral-6);
  }

  @media (hover: hover) {
    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:scale-100:hover {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-110:hover {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:border-neutral-1:hover {
      border-color: var(--color-neutral-1);
    }

    .hover\:border-neutral-5:hover {
      border-color: var(--color-neutral-5);
    }

    .hover\:border-neutral-6:hover {
      border-color: var(--color-neutral-6);
    }

    .hover\:border-primary-5:hover {
      border-color: var(--color-primary-5);
    }

    .hover\:border-primary-6:hover {
      border-color: var(--color-primary-6);
    }

    .hover\:border-primary-7:hover {
      border-color: var(--color-primary-7);
    }

    .hover\:border-slate-500:hover {
      border-color: var(--color-slate-500);
    }

    .hover\:\!bg-white:hover {
      background-color: var(--color-white) !important;
    }

    .hover\:bg-\[\#F4EEEC\]:hover {
      background-color: #f4eeec;
    }

    .hover\:bg-\[\#FAFAFA\]:hover {
      background-color: #fafafa;
    }

    .hover\:bg-\[var\(--md-primary-container-hover\)\]:hover {
      background-color: var(--md-primary-container-hover);
    }

    .hover\:bg-\[var\(--md-surface-container\)\]:hover {
      background-color: var(--md-surface-container);
    }

    .hover\:bg-\[var\(--md-surface-container-lowest\)\]:hover {
      background-color: var(--md-surface-container-lowest);
    }

    .hover\:bg-blue-700:hover {
      background-color: var(--color-blue-700);
    }

    .hover\:bg-gray-100:hover {
      background-color: var(--color-gray-100);
    }

    .hover\:bg-gray-200:hover {
      background-color: var(--color-gray-200);
    }

    .hover\:bg-gray-300:hover {
      background-color: var(--color-gray-300);
    }

    .hover\:bg-green-700:hover {
      background-color: var(--color-green-700);
    }

    .hover\:bg-grey-1:hover {
      background-color: var(--color-grey-1);
    }

    .hover\:bg-grey-2:hover {
      background-color: var(--color-grey-2);
    }

    .hover\:bg-indigo-100:hover {
      background-color: var(--color-indigo-100);
    }

    .hover\:bg-indigo-700:hover {
      background-color: var(--color-indigo-700);
    }

    .hover\:bg-neutral-1:hover {
      background-color: var(--color-neutral-1);
    }

    .hover\:bg-neutral-9:hover {
      background-color: var(--color-neutral-9);
    }

    .hover\:bg-neutral-11:hover {
      background-color: var(--color-neutral-11);
    }

    .hover\:bg-neutral-100:hover {
      background-color: var(--color-neutral-100);
    }

    .hover\:bg-orange-700:hover {
      background-color: var(--color-orange-700);
    }

    .hover\:bg-primary-5:hover {
      background-color: var(--color-primary-5);
    }

    .hover\:bg-primary-6:hover {
      background-color: var(--color-primary-6);
    }

    .hover\:bg-primary-7:hover {
      background-color: var(--color-primary-7);
    }

    .hover\:bg-primary-10:hover {
      background-color: var(--color-primary-10);
    }

    .hover\:bg-primary-11:hover {
      background-color: var(--color-primary-11);
    }

    .hover\:bg-primary-container-hover:hover {
      background-color: var(--md-primary-container-hover);
    }

    .hover\:bg-purple-700:hover {
      background-color: var(--color-purple-700);
    }

    .hover\:bg-red-50:hover {
      background-color: var(--color-red-50);
    }

    .hover\:bg-red-700:hover {
      background-color: var(--color-red-700);
    }

    .hover\:bg-secondary-2:hover {
      background-color: var(--color-secondary-2);
    }

    .hover\:bg-secondary-10:hover {
      background-color: var(--color-secondary-10);
    }

    .hover\:bg-slate-100:hover {
      background-color: var(--color-slate-100);
    }

    .hover\:bg-surface:hover {
      background-color: var(--md-surface);
    }

    .hover\:bg-surface-container:hover {
      background-color: var(--md-surface-container);
    }

    .hover\:bg-surface-container-high:hover {
      background-color: var(--md-surface-container-high);
    }

    .hover\:bg-surface-container-low:hover {
      background-color: var(--md-surface-container-low);
    }

    .hover\:bg-surface-container-lowest:hover {
      background-color: var(--md-surface-container-lowest);
    }

    .hover\:bg-surface-container-lowest-hover:hover {
      background-color: var(--md-surface-container-lowest-hover);
    }

    .hover\:bg-surface-container\/80:hover {
      background-color: #f3f3f3cc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-surface-container\/80:hover {
        background-color: color-mix(in oklab, var(--md-surface-container) 80%, transparent);
      }
    }

    .hover\:\!bg-none:hover {
      background-image: none !important;
    }

    .hover\:from-pink-600:hover {
      --tw-gradient-from: var(--color-pink-600);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:to-violet-600:hover {
      --tw-gradient-to: var(--color-violet-600);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:fill-neutral-1:hover {
      fill: var(--color-neutral-1);
    }

    .hover\:fill-secondary-7:hover {
      fill: var(--color-secondary-7);
    }

    .hover\:text-\[var\(--md-primary\)\]:hover {
      color: var(--md-primary);
    }

    .hover\:text-black:hover {
      color: var(--color-black);
    }

    .hover\:text-gray-600:hover {
      color: var(--color-gray-600);
    }

    .hover\:text-gray-900:hover {
      color: var(--color-gray-900);
    }

    .hover\:text-indigo-500:hover {
      color: var(--color-indigo-500);
    }

    .hover\:text-neutral-1:hover {
      color: var(--color-neutral-1);
    }

    .hover\:text-neutral-3:hover {
      color: var(--color-neutral-3);
    }

    .hover\:text-primary-6:hover {
      color: var(--color-primary-6);
    }

    .hover\:text-secondary-2:hover {
      color: var(--color-secondary-2);
    }

    .hover\:text-slate-900:hover {
      color: var(--color-slate-900);
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }

    .hover\:no-underline:hover {
      text-decoration-line: none;
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:accent-primary-6:hover {
      accent-color: var(--color-primary-6);
    }

    .hover\:opacity-80:hover {
      opacity: .8;
    }

    .hover\:shadow:hover {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .focus\:border-blue-500:focus {
    border-color: var(--color-blue-500);
  }

  .focus\:border-neutral-6:focus {
    border-color: var(--color-neutral-6);
  }

  .focus\:border-transparent:focus {
    border-color: #0000;
  }

  .focus\:bg-clap-orange-600:focus {
    background-color: var(--color-clap-orange-600);
  }

  .focus\:bg-gray-100:focus {
    background-color: var(--color-gray-100);
  }

  .focus\:bg-zinc-300:focus {
    background-color: var(--color-zinc-300);
  }

  .focus\:accent-primary-6:focus {
    accent-color: var(--color-primary-6);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-4:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-blue-500:focus {
    --tw-ring-color: var(--color-blue-500);
  }

  .focus\:ring-gray-100:focus {
    --tw-ring-color: var(--color-gray-100);
  }

  .focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--color-indigo-500);
  }

  .focus\:ring-orange-500:focus {
    --tw-ring-color: var(--color-orange-500);
  }

  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus\:outline-hidden:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .focus\:outline-hidden:focus {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:scale-110:active {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:bg-surface-container:active {
    background-color: var(--md-surface-container);
  }

  .active\:accent-primary-6:active {
    accent-color: var(--color-primary-6);
  }

  .disabled\:bg-\[var\(--md-primary-container-disabled\)\]:disabled {
    background-color: var(--md-primary-container-disabled);
  }

  .disabled\:bg-\[var\(--md-surface-container-lowest\)\]:disabled {
    background-color: var(--md-surface-container-lowest);
  }

  .disabled\:bg-clap-orange-700:disabled {
    background-color: var(--color-clap-orange-700);
  }

  .disabled\:bg-zinc-300:disabled {
    background-color: var(--color-zinc-300);
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .data-focus\:bg-surface-container-lowest[data-focus] {
    background-color: var(--md-surface-container-lowest);
  }

  .data-\[mode\=drawer\]\:border-t[data-mode="drawer"] {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .data-\[mode\=drawer\]\:border-outline-variant[data-mode="drawer"] {
    border-color: var(--md-outline-variant);
  }

  .data-\[mode\=drawer\]\:bg-surface[data-mode="drawer"] {
    background-color: var(--md-surface);
  }

  .data-\[outline\=true\]\:border-solid[data-outline="true"] {
    --tw-border-style: solid;
    border-style: solid;
  }

  .data-\[outline\=true\]\:border-\[var\(--md-outline\)\][data-outline="true"] {
    border-color: var(--md-outline);
  }

  .data-\[safe-area\=true\]\:pt-\[56px\][data-safe-area="true"] {
    padding-top: 56px;
  }

  .data-\[safe-area\=true\]\:pb-\[76px\][data-safe-area="true"] {
    padding-bottom: 76px;
  }

  @media (min-width: 40rem) {
    .sm\:flex {
      display: flex;
    }

    .sm\:inline-flex {
      display: inline-flex;
    }

    .sm\:w-48 {
      width: calc(var(--spacing) * 48);
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:items-start {
      align-items: flex-start;
    }

    .sm\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }

    .sm\:p-2 {
      padding: calc(var(--spacing) * 2);
    }

    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .sm\:p-16 {
      padding: calc(var(--spacing) * 16);
    }

    .sm\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }

    .sm\:pt-8 {
      padding-top: calc(var(--spacing) * 8);
    }

    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }

  @media (min-width: 48rem) {
    .md\:absolute {
      position: absolute;
    }

    .md\:relative {
      position: relative;
    }

    .md\:static {
      position: static;
    }

    .md\:top-0 {
      top: calc(var(--spacing) * 0);
    }

    .md\:top-5 {
      top: calc(var(--spacing) * 5);
    }

    .md\:top-auto {
      top: auto;
    }

    .md\:right-0 {
      right: calc(var(--spacing) * 0);
    }

    .md\:bottom-auto {
      bottom: auto;
    }

    .md\:-left-\[48px\] {
      left: -48px;
    }

    .md\:left-0 {
      left: calc(var(--spacing) * 0);
    }

    .md\:left-\[56px\] {
      left: 56px;
    }

    .md\:left-\[57px\] {
      left: 57px;
    }

    .md\:z-40 {
      z-index: 40;
    }

    .md\:order-1 {
      order: 1;
    }

    .md\:order-2 {
      order: 2;
    }

    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .md\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .md\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .md\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .md\:-mt-\[45px\] {
      margin-top: -45px;
    }

    .md\:-mt-\[90px\] {
      margin-top: -90px;
    }

    .md\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .md\:mb-2 {
      margin-bottom: calc(var(--spacing) * 2);
    }

    .md\:mb-4 {
      margin-bottom: calc(var(--spacing) * 4);
    }

    .md\:mb-20 {
      margin-bottom: calc(var(--spacing) * 20);
    }

    .md\:-ml-10 {
      margin-left: calc(var(--spacing) * -10);
    }

    .md\:-ml-\[50px\] {
      margin-left: -50px;
    }

    .md\:line-clamp-4 {
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:hidden {
      display: none;
    }

    .md\:\!h-\[446px\] {
      height: 446px !important;
    }

    .md\:h-\[60px\] {
      height: 60px;
    }

    .md\:h-\[446px\] {
      height: 446px;
    }

    .md\:h-\[854px\] {
      height: 854px;
    }

    .md\:h-auto {
      height: auto;
    }

    .md\:h-full {
      height: 100%;
    }

    .md\:h-screen {
      height: 100vh;
    }

    .md\:max-h-screen {
      max-height: 100vh;
    }

    .md\:\!w-1\/2 {
      width: 50% !important;
    }

    .md\:\!w-\[404px\] {
      width: 404px !important;
    }

    .md\:\!w-auto {
      width: auto !important;
    }

    .md\:w-\[56px\] {
      width: 56px;
    }

    .md\:w-\[304px\] {
      width: 304px;
    }

    .md\:w-\[422px\] {
      width: 422px;
    }

    .md\:w-\[500px\] {
      width: 500px;
    }

    .md\:w-\[512px\] {
      width: 512px;
    }

    .md\:w-\[581px\] {
      width: 581px;
    }

    .md\:w-\[600px\] {
      width: 600px;
    }

    .md\:w-\[640px\] {
      width: 640px;
    }

    .md\:w-\[816px\] {
      width: 816px;
    }

    .md\:w-\[1064px\] {
      width: 1064px;
    }

    .md\:w-\[calc\(50\%\+50px\)\] {
      width: calc(50% + 50px);
    }

    .md\:w-\[calc\(100\%\+77px\)\] {
      width: calc(100% + 77px);
    }

    .md\:w-\[calc\(100\%\+83px\)\] {
      width: calc(100% + 83px);
    }

    .md\:w-\[calc\(100vw-40px-40px-16px\)\] {
      width: calc(100vw - 96px);
    }

    .md\:w-\[calc\(100vw-300px\)\] {
      width: calc(100vw - 300px);
    }

    .md\:w-auto {
      width: auto;
    }

    .md\:w-full {
      width: 100%;
    }

    .md\:max-w-80 {
      max-width: calc(var(--spacing) * 80);
    }

    .md\:max-w-\[364px\] {
      max-width: 364px;
    }

    .md\:max-w-\[512px\] {
      max-width: 512px;
    }

    .md\:max-w-\[calc\(100vw-40px-40px-32px\)\] {
      max-width: calc(100vw - 112px);
    }

    .md\:max-w-none {
      max-width: none;
    }

    .md\:flex-shrink-0 {
      flex-shrink: 0;
    }

    .md\:-translate-x-\[100px\] {
      --tw-translate-x: calc(100px * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .md\:\!grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .md\:\!grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .md\:\!grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .md\:\!grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:flex-col {
      flex-direction: column;
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:flex-row-reverse {
      flex-direction: row-reverse;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:items-end {
      align-items: flex-end;
    }

    .md\:justify-between {
      justify-content: space-between;
    }

    .md\:justify-center {
      justify-content: center;
    }

    .md\:justify-end {
      justify-content: flex-end;
    }

    .md\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .md\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }

    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .md\:\!rounded-none {
      border-radius: 0 !important;
    }

    .md\:rounded-lg {
      border-radius: var(--radius-lg);
    }

    .md\:rounded-md {
      border-radius: var(--radius-md);
    }

    .md\:rounded-l-\[12px\] {
      border-top-left-radius: 12px;
      border-bottom-left-radius: 12px;
    }

    .md\:border {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }

    .md\:border-b {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }

    .md\:bg-\[var\(--md-surface-container\)\] {
      background-color: var(--md-surface-container);
    }

    .md\:p-2 {
      padding: calc(var(--spacing) * 2);
    }

    .md\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .md\:p-16 {
      padding: calc(var(--spacing) * 16);
    }

    .md\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }

    .md\:px-2 {
      padding-inline: calc(var(--spacing) * 2);
    }

    .md\:px-3 {
      padding-inline: calc(var(--spacing) * 3);
    }

    .md\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .md\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }

    .md\:px-14 {
      padding-inline: calc(var(--spacing) * 14);
    }

    .md\:px-16 {
      padding-inline: calc(var(--spacing) * 16);
    }

    .md\:px-\[100px\] {
      padding-inline: 100px;
    }

    .md\:py-0 {
      padding-block: calc(var(--spacing) * 0);
    }

    .md\:py-\[80px\] {
      padding-block: 80px;
    }

    .md\:pt-0 {
      padding-top: calc(var(--spacing) * 0);
    }

    .md\:pt-4 {
      padding-top: calc(var(--spacing) * 4);
    }

    .md\:pt-14 {
      padding-top: calc(var(--spacing) * 14);
    }

    .md\:pr-4 {
      padding-right: calc(var(--spacing) * 4);
    }

    .md\:pr-14 {
      padding-right: calc(var(--spacing) * 14);
    }

    .md\:pb-0 {
      padding-bottom: calc(var(--spacing) * 0);
    }

    .md\:pb-4 {
      padding-bottom: calc(var(--spacing) * 4);
    }

    .md\:pl-4 {
      padding-left: calc(var(--spacing) * 4);
    }

    .md\:pl-\[56px\] {
      padding-left: 56px;
    }

    .md\:pl-\[361px\] {
      padding-left: 361px;
    }

    .md\:text-center {
      text-align: center;
    }

    .md\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .md\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .md\:text-\[28px\] {
      font-size: 28px;
    }

    .md\:text-\[32px\] {
      font-size: 32px;
    }

    .md\:text-\[36px\] {
      font-size: 36px;
    }

    .md\:leading-\[36px\] {
      --tw-leading: 36px;
      line-height: 36px;
    }

    .md\:leading-\[40px\] {
      --tw-leading: 40px;
      line-height: 40px;
    }

    .md\:leading-\[44px\] {
      --tw-leading: 44px;
      line-height: 44px;
    }

    .md\:shadow-lg {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .md\:shadow-none {
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  @media (min-width: 64rem) {
    .lg\:fixed {
      position: fixed;
    }

    .lg\:right-0 {
      right: calc(var(--spacing) * 0);
    }

    .lg\:left-\[40px\] {
      left: 40px;
    }

    .lg\:order-2 {
      order: 2;
    }

    .lg\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .lg\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .lg\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .lg\:mb-5 {
      margin-bottom: calc(var(--spacing) * 5);
    }

    .lg\:block {
      display: block;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:inline {
      display: inline;
    }

    .lg\:w-\[25\%\] {
      width: 25%;
    }

    .lg\:w-\[50\%\] {
      width: 50%;
    }

    .lg\:w-\[288px\] {
      width: 288px;
    }

    .lg\:w-\[350px\] {
      width: 350px;
    }

    .lg\:w-\[464px\] {
      width: 464px;
    }

    .lg\:w-\[500px\] {
      width: 500px;
    }

    .lg\:w-\[calc\(100vw-207px-40px-40px-16px\)\] {
      width: calc(100vw - 303px);
    }

    .lg\:max-w-\[calc\(100vw-208px-40px-40px-32px\)\] {
      max-width: calc(100vw - 320px);
    }

    .lg\:max-w-\[calc\(100vw-208px-40px-40px-288px-40px-32px\)\] {
      max-width: calc(100vw - 648px);
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:items-end {
      align-items: flex-end;
    }

    .lg\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .lg\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }

    .lg\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .lg\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }

    .lg\:text-center {
      text-align: center;
    }

    .lg\:text-left {
      text-align: left;
    }
  }

  @media (min-width: 80rem) {
    .xl\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .xl\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .xl\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .xl\:flex {
      display: flex;
    }

    .xl\:grid {
      display: grid;
    }

    .xl\:w-\[288px\] {
      width: 288px;
    }

    .xl\:w-\[420px\] {
      width: 420px;
    }

    .xl\:max-w-\[calc\(100vw-208px-40px-40px-288px-128px-32px\)\] {
      max-width: calc(100vw - 736px);
    }

    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:gap-32 {
      gap: calc(var(--spacing) * 32);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .\32 xl\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .\32 xl\:h-\[220px\] {
      height: 220px;
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-gray-600 {
      border-color: var(--color-gray-600);
    }

    .dark\:bg-\[\#161615\] {
      background-color: #161615;
    }

    .dark\:bg-gray-700 {
      background-color: var(--color-gray-700);
    }

    .dark\:bg-gray-800 {
      background-color: var(--color-gray-800);
    }

    .dark\:text-gray-400 {
      color: var(--color-gray-400);
    }

    .dark\:text-white {
      color: var(--color-white);
    }

    .dark\:placeholder-gray-400::placeholder {
      color: var(--color-gray-400);
    }

    @media (hover: hover) {
      .dark\:hover\:bg-\[\#1A1A19\]:hover {
        background-color: #1a1a19;
      }

      .dark\:hover\:bg-gray-700:hover {
        background-color: var(--color-gray-700);
      }

      .dark\:hover\:text-white:hover {
        color: var(--color-white);
      }
    }

    .dark\:focus\:border-blue-500:focus {
      border-color: var(--color-blue-500);
    }

    .dark\:focus\:bg-gray-700:focus {
      background-color: var(--color-gray-700);
    }

    .dark\:focus\:ring-blue-500:focus {
      --tw-ring-color: var(--color-blue-500);
    }

    .dark\:focus\:ring-gray-700:focus {
      --tw-ring-color: var(--color-gray-700);
    }
  }
}

@keyframes slide-in-b {
  to {
    transform: translateY(0);
  }

  from {
    transform: translateY(100vh);
  }
}

.ph-surface-bg-radial-1 {
  background: radial-gradient(245.54% 206.68% at -28.73% -26.89%, var(--md-surface-container-low) 0%, var(--md-surface) 100%);
}

:root {
  accent-color: #fb5c00;
}

.global {
  --nav-priamry-height: 68px;
}

body {
  background: #f5f5f5 !important;
}

html, body {
  overscroll-behavior: none;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}