@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.11"}.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:-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 .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} /* Every face this app paints is declared and served from /assets/fonts below. Plus Jakarta Sans is the one body copy is actually set in (see the body rule near the end of this file); it used to arrive from a third-party CDN while the self-hosted files sat unused, so the app took a runtime network dependency for its core type. Nothing here may reference an external font host again. */ *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } /* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: var(--font-mono), monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } /* [data-mode="light"] is the same block, not a copy: it lets a nested element (the skin picker's light swatch) mount the light palette while the page around it is dark. Restating these values under a second selector would give the 2026-07-16 lock two homes, and they would drift. */ :root, [data-mode="light"] { /* Numina design tokens */ /* THE desktop frame width — owner-picked 2026-07-23 (NUMINA-DESKTOP board, all-wide verdict): every page's desktop container reads this ONE token via max-w-[var(--desktop-col)], under the ONE top bar. Page widths must never diverge again ("every page is a different width"). The only sanctioned exception is the mid-session focused stage (locked SESSIONS spec), which deliberately narrows while answering. */ --desktop-col: 1060px; --font-display: "Archivo", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", monospace; /* `one` (2026-08-25): --radius is no longer a second scale — tailwind reads --radius-card for every step, and this stays in step so a stray var(--radius) in a vendored primitive cannot render a fourth number. */ --radius: var(--radius-card); /* ═══ LIGHT MODE — "Porcelain" (owner-locked 2026-07-16) ═══ Spec: docs/2026-07-16-DESIGN-LOCK.md · mockup docs/2026-07-16-TC-LIGHT/L2-porcelain.html. Warm-neutral porcelain ground, white cards, deep quiet mint voltage. */ --background: #FAFAF7; /* The GROUND as an image layer — none for every skin except Sunset, whose whisper-sky gradient lives in its [data-skin] block. body paints background-color: var(--background) + background-image: var(--ground-image); --background stays a flat COLOUR always (≈30 tokens color-mix against it — a gradient in a mix would be invalid). Not re-declared in .dark: it inherits `none`, and Sunset's dark block carries its own dusk. */ --ground-image: none; --foreground: #2A2533; --card: #FFFFFF; --card-foreground: #2A2533; /* Popover steps OFF --card. Both tokens were #FFFFFF, so an overlay sitting on a card was 1.000:1 — literally invisible, and nothing renders a scrim behind it. Porcelain has no surface LIGHTER than the white card, so the floating sheet steps one rung DOWN the warm ramp instead (bg #FAFAF7 → popover #F7F5EF → muted #F3F1EC): 1.09:1 against the card it covers, 1.04:1 against the page, and it still carries --border + shadow on top of that. */ --popover: #F7F5EF; --popover-foreground: #2A2533; /* #2A2533 on #F7F5EF = 13.7:1 */ /* CHROME IS LOCKED to the voltage (design lock: "chrome never tints"). --primary no longer follows the learner accent — that role moved to --personal-accent (avatar ring / streak flame / progress fills only). */ --primary: var(--accent-primary); --primary-foreground: #FFFFFF; /* white on #2E7D6B = 4.9:1 */ /* ⭐ The BUTTON FILL and its ink, split from --primary on 2026-08-07. Default to --primary so every existing skin renders byte-identically; a skin overrides these ONLY when its voltage is too bright to be text. ⛔ Do not point `text-primary` at these — that is the conflation this split exists to end. */ --primary-fill: var(--primary); --primary-fill-ink: var(--primary-foreground); /* Secondary */ --secondary: #F3F1EC; --secondary-foreground: #2A2533; /* Muted — subtle backgrounds */ --muted: #F3F1EC; --muted-rgb: 243 241 236; --muted-foreground: #6E6880; --muted-foreground-rgb: 110 104 128; /* Destructive — the locked "wrong" rose, deep form for light ink-duty */ --destructive: #B4384F; --destructive-rgb: 180 56 79; --destructive-foreground: #FFFFFF; /* Borders — the EDGE is what gives a card presence (owner verdict D2-B 2026-07-27: "stronger outline only"). A white card on the porcelain ground is only 1.05:1, and the old #E5E2DA hairline was 1.29:1 on the card / 1.24:1 on the page, so cards read as barely drawn. #CFCBC0 lifts that to 1.62:1 on the card / 1.55:1 on the page. The lifted-FILL alternative was rejected: raising --card would shift the ~30 shades that color-mix() against it. --input deliberately does NOT follow --border any more: in dark it is also a FILL (ui/input.tsx and ui/button.tsx mix it 30/50% into --card), so raising it would restyle field and outline-button surfaces — outside this verdict. */ --border: #CFCBC0; --border-rgb: 207 203 192; --input: #E5E2DA; --ring: #2E7D6B; --ring-rgb: 46 125 107; /* Charts */ --chart-1: oklch(0.52 0.19 260); --chart-2: oklch(0.55 0.16 145); --chart-3: oklch(0.65 0.17 55); --chart-4: oklch(0.55 0.2 25); --chart-5: oklch(0.5 0.18 300); /* Elite (fast-answer "Lightning!") feedback — a BRIGHT golden-yellow that pops (brighter + more yellow than the muted brand gold). Used by BOTH the in-session ⚡ feedback and the My Growth "Lightning-fast" card so they stay identical. The brand gold (--accent-gold, logo/awards) stays its own muted hue. */ --accent-lightning: #C9962E; /* calm earned-gold (light form; dark lifts to #E3B559) */ /* Readable ink for lightning TEXT/labels sitting on the pale gold wash: deep bronze in light; lifts to the calm gold in dark (see .dark). */ --accent-lightning-ink: #8A6414; /* Ink drawn ON the gold disc itself — deep bronze in BOTH modes. */ --accent-lightning-disc-ink: #3A2A08; /* Lightning strip SURFACE + EDGE. Light: a pale 22% gold wash reads as warm and clean. Dark: the same wash over navy turns olive-sludge, so the dark variant (see .dark) keeps the surface near-dark (whisper of gold) and lets a gold EDGE + the bright disc/text carry the signal instead. Mixed into --card, never toward transparent: both consumers (the session feedback strip, the Numina Master results cells) sit on cards, so the result is identical to the old wash while staying an opaque fill. */ --accent-lightning-tint: color-mix(in srgb, var(--accent-lightning) 22%, var(--card)); --accent-lightning-edge: transparent; --accent-lightning-flash: color-mix(in srgb, var(--accent-lightning) 42%, var(--card)); /* Podium feedback bar — on-accent inks + solid top-edge lines. Theme-invariant: gold #FFC400 and the success green are the same in both themes, so their ink/edge companions are too (never translucent). */ --strip-gold-ink: #2E2410; --strip-gold-sub: #8A6414; --strip-gold-edge: #E8CE8F; --strip-success-edge: #5FDD9B; --strip-success-sub: #D6F5E4; --strip-success-chip: #115C34; /* Soft tint surfaces that were referenced but never defined (fell back to near-white hardcodes on dark). Opaque by construction — mixed into the card — and resolve correctly in BOTH themes via var(--card). */ --tier-mastered-soft: color-mix(in srgb, var(--tier-mastered) 14%, var(--card)); --accent-current-soft: color-mix(in srgb, var(--accent-primary) 12%, var(--card)); --color-success-soft: color-mix(in srgb, var(--color-success) 15%, var(--card)); /* Bottom-nav active pill — TRANSPARENT since 2026-08-22 (owner, shown the School app's tab bar: "i like the highlighted state: we should have this style for numina play too"). The active tab is now marked the way School marks it — the icon and label take the accent, and nothing sits behind them. This app used to paint a 22% accent tint here, which is the only thing that differed: BottomNav.tsx is byte-identical across both apps, and School simply never defined this token. ⚠ Declared as `transparent` rather than deleted ON PURPOSE. School's tab bar gets its look from this token being UNDEFINED, which is a latent bug wearing a correct appearance: `bg-[var(--nav-active-pill)]` with no value is an invalid declaration, so one stray definition anywhere would silently hand both apps a pill nobody asked for. An explicit value says the intent out loud and keeps the seam if a look ever wants its pill back. */ --nav-active-pill: transparent; /* Segmented-tab active pill surface: a raised white card in light. In dark no surface token is lighter than the muted track, so the active pill switches to the accent tint instead (see .dark) rather than sinking below the track. */ --tab-active-bg: var(--card); /* Calm earned-gold — a FIXED achievement accent (not learner-tinted): awards, elite speed, medals. "Gold is earned", never a warning. */ --accent-gold: #C9962E; /* Fixed brand ink — the wordmark IS the voltage (locked mint), never overridden by the learner's accent. */ /* --brand-ink RETIRED 2026-08-08 (`numina-play-wordmark-colour` = follow): the lockup now reads --accent-primary directly in Logo.tsx, so it follows the chosen look. The mint #2E7D6B dated from the all-mint era. */ /* The pre-lock 8-hue chrome palette (--accent-{coral,amber,yellow,green, teal,cobalt,violet,magenta}-{primary,muted}) is DELETED, along with its Tailwind mappings. The design lock replaced per-learner chrome tinting with locked mint chrome + --personal-accent; leaving the hues spellable would let chrome tinting return with one class name. */ /* THE VOLTAGE — deep quiet mint (Porcelain form). Locked chrome accent for every learner; one value serves fills (white ink 4.9:1) AND link/label text on the porcelain ground (4.7:1). Personalisation lives in --personal-accent, never here. */ --accent-primary: #2E7D6B; /* Accent tints DERIVE from --accent-primary (opaque color-mix, never rgba) so a learner-chosen accent re-tints everything in both themes for free. */ --accent-muted: color-mix(in srgb, var(--accent-primary) 12%, var(--card)); --accent-foreground: oklch(1.0 0 0); /* Award tier metallic colours */ --award-bronze: #CD7F32; --award-bronze-bg: #FDF3E4; --award-bronze-border: #D4904A; --award-silver: #A8A9AD; --award-silver-bg: #F2F3F5; --award-silver-border: #BEC0C6; --award-gold: #C9962E; --award-gold-bg: #F7EED7; --award-gold-border: #C9962E; /* Award text colours (moved from bare :root) */ --award-bronze-text: #7A4010; --award-silver-text: #4A5060; --award-gold-text: #8A6414; /* Semantic named colours — LOCKED meanings (one colour = one job). Light uses the deep ink forms; dark lifts to the locked bright hues. */ --color-success: #1F7A4D; --color-warning: #96600E; --color-destructive: var(--destructive); /* Info = the locked soft-sky family (design lock: #7BA7E8, deepening to #3D6FC2 in light). First consumer: the slow-correct state — a right answer that banked nothing must not wear success green. */ --color-info: #3D6FC2; /* Track identity colours — the ONE app-wide mapping (My Growth's): T1 Core facts, T2 Mental strategies, T3 Applied fluency. Recoloured to a collision-free domain trio (design lock): the old green/orange collided with success-green and due-amber under the mint voltage. */ --track-1: #5B8DEF; --track-2: #9B7BFF; --track-3: #E0729B; /* Award category hues without a track home (pink / violet / ember). Like --track-*, single hex in both themes — always consumed through color-mix tints or as solid disc fills with --ink-on-accent on top. */ --award-cat-practice: #D4537E; --award-cat-explorer: #7F77DD; --award-cat-forge: #D85A30; /* Ink on saturated accent/award fills — white in BOTH themes (the fill supplies the contrast, not the theme). Use instead of literal #fff. */ --ink-on-accent: #FFFFFF; /* Sidebar tokens (aliases for existing semantic tokens) */ --sidebar: var(--background); --sidebar-foreground: var(--foreground); --sidebar-primary: var(--primary); --sidebar-primary-foreground: var(--primary-foreground); --sidebar-accent: var(--accent-primary); --sidebar-accent-foreground: var(--primary-foreground); --sidebar-border: var(--border); --sidebar-ring: var(--ring); --accent-primary-border: color-mix(in srgb, var(--accent-primary) 30%, var(--card)); --accent-primary-soft: color-mix(in srgb, var(--accent-primary) 10%, var(--card)); --certificate-bg: #FEFCF8; --certificate-gold: #B8930A; --certificate-gold-dark: #7A6000; --certificate-track-core: var(--track-1); --certificate-track-strategies: var(--track-2); --certificate-track-applied: var(--track-3); --certificate-subtext: #8A7A4A; --radius-full: 9999px; /* ⛔ THE STEP TOKENS ARE RETIRED — owner verdict `numina-play-radius-scale-2026-08-25` = `one`. They used to hold their own numbers (lg = --radius, md = 0.5rem) and each look re-forked them, which is half of how one sign-in card came to render three different radii. They survive only so an existing `var(--radius-md)` cannot resolve to nothing — every one of them now reads the single number below. */ --radius-lg: var(--radius-card); --radius-md: var(--radius-card); /* ═══ THE HEIGHT CAP — 2026-08-27 ═══════════════════════════════════════ Owner, twice: "the buttons and components on numina play are too rounded" / "and they fuck up the aesthetic". Measured on the live landing, Space (--radius-card 20px), before this: step numerals 28×28 radius 20 → −12px of flat edge (full circles) Log in / Get started ×44 radius 20 → 4px (91% of the side is curve) Try it free / answer box ×48 radius 20 → 8px (83%) the step cards ×148 radius 20 → 108px (27%) ← correct ⭐ ONE NUMBER CANNOT SERVE A 28px CHIP AND A 148px CARD. At 148px tall the look's 20px is exactly right; on a 44px button it is a lozenge; on a 28px chip it is a circle. That is not a colour or a component bug — it is what `numina-play-radius-scale-2026-08-25` = `one` produced when it pointed every Tailwind step at --radius-card. ⚠ THIS REVISES THAT VERDICT'S MECHANISM AND KEEPS ITS INTENT. `one` was killing steps NOBODY COULD NAME — the −2px control and +4px focal-card offsets that made a single sign-in card render 24 / 20 / 18. Those are still dead and stay dead. What lands here is not a scale to memorise: it is ONE rule — a control may not spend more than about a third of its own height on curve — expressed as a ceiling over the same single authored number. The look's knob is still --radius-card and nothing else. ⛔ Still do not add a step with its own hand-picked number. Add a CAP with a stated height, or nothing. On looks whose card radius is already under the ceiling the cap never binds and every step stays identical, which is the old behaviour exactly: Volt (8px) and Arcade (10px) are unchanged by this block. */ --radius-control: min(var(--radius-card), 14px); /* ~44-48px tall controls */ --radius-chip: min(var(--radius-card), 9px); /* ~28-32px chips and numerals */ /* ── THE CARD RADIUS — the one knob a look turns to change shape ───────── `does-picking-a-look-change-t` = shape-too (owner, 2026-08-02). Each skin already declared its own anatomy in words ("cards float: big radius", "tight corners", "rounds them to 10px") and the picker already previewed it, but the cards themselves never moved: --radius drives only the lg/md/sm utilities, while DESIGN.md puts every card on rounded-xl and every focal card on rounded-2xl. Both are now derived from THIS token, and so is .card-surface and the picker's own swatch — one number per look, read by everything, so the preview cannot drift from the app again. 0.75rem is the Tailwind rounded-xl default, i.e. Calm is unchanged. ⭐ 2026-08-25 (`one`): this stopped being the CARD radius and became THE radius — tailwind.config maps sm·md·lg·xl·2xl all to it, so buttons, inputs, chips and pad keys wear the same number as the cards. */ --radius-card: 0.75rem; --certificate-text-muted: #A09080; --certificate-footer-text: #B0A090; --certificate-ornament-white: rgba(255,255,255,0.35); --certificate-ornament-white-md: rgba(255,255,255,0.4); --duration-progress: 300ms; --easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /* Legacy aliases removed — all components now use canonical tokens */ --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.06); --vh: 1dvh; --header-height: 56px; /* Bottom tab-bar height — the fixed BottomNav band. MobileAppShell's content column reserves it as pb-[calc(3.75rem+safe-area)]; named here (audit 08-10) so one-viewport pages compose their chrome subtraction from tokens instead of hand-summed rems (Today's 9.25rem would have silently drifted the moment either bar changed). ⚠ Keep in sync with MobileAppShell's bottom padding until it consumes this token too. */ --bottom-nav-height: 3.75rem; /* ═══ TIER LADDER — REBUILT 2026-07-29 (decision `numina-play-look-tiers`) ═══ Owner: "i dont think this color system works". Four faults were measured on the old plum→mint ramp, and the negative control still reproduces all four — run `node src/frontend/scripts/tierRamp.check.mjs` against them: 1. the ramp climbed steadily TOWARD the reward colour, so Advanced read as arrival: 22/24 Advanced beside "0 mastered" looked ~92% finished. Measured, the last rung was the SMALLEST step in the ladder (ΔE 5.0) and an earlier one was 5× bigger. 2. Advanced/Mastered were the closest pair in the set (ΔE 5.0 light). 3. Beginner was 2.02:1 on the dark card — invisible; and the light ramp ran backwards at the top (L* 36 → 43 → 52 → 47). 4. Mastered was ΔE 17.1 from the correct-answer green: mastery and correctness wearing one colour, against the app's own one-colour-one- meaning rule. THE FIX IS "EARN YOUR COLOUR". Red, gold, green, mint and blue are already spoken for, so four distinct tier hues do not exist in this palette. The bottom rung therefore gives its colour UP — Beginner is a neutral, and the ladder reads grey (nothing earned) → violet, deepening (earning) → teal (arrived). Because the top rung CHANGES HUE rather than continuing the ramp, the last step is now the biggest step by construction, which is the only thing that fixes fault 1 — no recolouring of a steady ramp does. ⚠ Mastered is NOT --accent-primary here. At the button mint it scored ΔE 17.1 against success green (fault 4); this deep teal clears 30. */ --tier-beginner: #8E8879; --tier-intermediate: #8878B8; --tier-advanced: #5B2FB5; --tier-mastered: #0A5350; /* INK = the badge label drawn ON the fill. Tokens, not `color: white`, because white measured 3.53:1 on beginner and 3.87:1 on intermediate here, and as low as 1.70:1 in dark — the old CSS papered over two dark cases with hardcoded .dark .badge-tier-* rules that stopped matching the moment the ramp moved, and would break again for every new skin. */ --tier-beginner-ink: #0B0A12; --tier-intermediate-ink: #0B0A12; --tier-advanced-ink: #FFFFFF; --tier-mastered-ink: #FFFFFF; /* TEXT = the stop used as a WORD on the card (MyGrowth, detail panels). Fills answer to 3:1; a word answers to 4.5:1, so the two low stops carry a deepened companion and the two high stops are the fill itself. */ --tier-beginner-text: #6B6657; --tier-intermediate-text: #655399; --tier-advanced-text: #5B2FB5; --tier-mastered-text: #0A5350; --session-card-min-height: 420px; --session-question-font-size: 28px; --session-benchmark-accent: oklch(0.60 0.24 25); --session-forge-ember: oklch(0.70 0.18 45); --session-forge-ember-muted: color-mix(in srgb, var(--session-forge-ember) 25%, var(--card)); --session-forge-dark-card: oklch(0.16 0.02 260); --session-forge-dark-border: oklch(0.28 0.04 260 / 0.6); --session-forge-dark-muted: oklch(0.65 0.02 260); --session-tc-pass-accent: oklch(0.75 0.15 85); --session-tc-pass-muted: color-mix(in srgb, var(--session-tc-pass-accent) 20%, var(--card)); --session-tc-fail-accent: oklch(0.55 0.03 260); --session-tc-fail-muted: color-mix(in srgb, var(--session-tc-fail-accent) 20%, var(--card)); --session-placement-accent: oklch(0.65 0.12 240); --session-placement-muted: color-mix(in srgb, var(--session-placement-accent) 18%, var(--card)); --session-benchmark-strip: oklch(0.55 0.06 220); --session-benchmark-muted: color-mix(in srgb, var(--session-benchmark-strip) 15%, var(--card)); --session-numina-accent: oklch(0.50 0.20 290); --session-numina-muted: color-mix(in srgb, var(--session-numina-accent) 18%, var(--card)); --session-class-accent: oklch(0.65 0.18 30); --session-class-muted: color-mix(in srgb, var(--session-class-accent) 18%, var(--card)); --session-mixed-accent: oklch(0.60 0.15 310); --session-mixed-muted: color-mix(in srgb, var(--session-mixed-accent) 18%, var(--card)); --session-warmup-accent: oklch(0.70 0.14 75); --session-warmup-muted: color-mix(in srgb, var(--session-warmup-accent) 18%, var(--card)); --table-header-bg: oklch(0.96 0.006 250); --table-header-text: oklch(0.30 0.018 255); --table-header-border: oklch(0.88 0.008 260); --table-row-hover: oklch(0.97 0.012 255 / 0.7); --table-row-selected: oklch(0.96 0.008 255 / 0.4); --table-sort-icon: oklch(0.55 0.02 255); --table-sort-icon-active: var(--primary); --session-accent-forge: oklch(0.75 0.18 55); --session-accent-track-challenge: oklch(0.63 0.18 140); --session-accent-numina-master: oklch(0.50 0.20 290); --session-accent-placement: oklch(0.65 0.12 240); --session-accent-benchmark: oklch(0.55 0.06 220); --session-accent-class-challenge: oklch(0.65 0.18 30); --session-accent-mixed-practice: oklch(0.60 0.15 310); --session-accent-practice: oklch(0.55 0.08 260); /* The global weekly event (verdict `numina-play-comeback-layer` = weekly-event). Earned-gold hue — it is the one session that is an OCCASION rather than practice, and gold is already this app's achievement accent. ⚠ Declared here AND given a `.session-chrome-weekly-event` block below. Warm-up shipped with neither and its badge+tint computed to rgba(0,0,0,0): a `var()` with no fallback kills the WHOLE declaration, so a missing token is an invisible colour, not a fallback colour. */ /* ⚠ Darkened 0.72→0.55 (owner, 2026-08-09: "difficult to read"). The badge recipe draws the ACCENT ITSELF as text on a 12% tint of itself, so a light accent is pale-on-pale by construction. 0.55 matches the sibling accents (practice/benchmark 0.55, master 0.50) — gold stops being the lightest text in the family. The hue is unchanged. */ --session-accent-weekly-event: oklch(0.55 0.12 85); /* Warm-up was the ONE SessionType missing from this namespace, so `.session-chrome-warmup` did not exist, `--session-accent` never resolved, and — because a var() with no fallback kills its WHOLE declaration — the header badge and the background tint both computed to rgba(0,0,0,0). Warm-up was the only session that rendered with no colour at all. ⚖ Measured, not assumed: all 8 other types resolved an accent and painted both surfaces; warmup alone came back EMPTY / transparent. ⛔ No new hue invented — this is the app's own warm-up amber, already chosen at --session-warmup-accent above and until now unreachable from the chrome classes. The two namespaces are a known duplication; bridging is the minimal honest fix, not a third spelling. */ --session-accent-warmup: var(--session-warmup-accent); --session-chrome-tint-opacity: 0.06; --session-chrome-animation-duration: 500ms; --feedback-transition: background-color 100ms ease; /* History session-type badge colours (bg + text pairs) */ --history-badge-practice-bg: oklch(0.93 0.01 260); --history-badge-practice-text: oklch(0.45 0.03 260); --history-badge-placement-bg: oklch(0.88 0.10 240); --history-badge-placement-text: oklch(0.30 0.12 240); --history-badge-mixed-bg: oklch(0.88 0.12 310); --history-badge-mixed-text: oklch(0.30 0.15 310); --history-badge-track-challenge-bg: oklch(0.92 0.12 85); --history-badge-track-challenge-text: oklch(0.40 0.15 85); --history-badge-numina-master-bg: oklch(0.88 0.15 290); --history-badge-numina-master-text: oklch(0.30 0.18 290); --history-badge-forge-bg: oklch(0.92 0.14 45); --history-badge-forge-text: oklch(0.38 0.18 45); --history-badge-warmup-bg: oklch(0.93 0.05 75); --history-badge-warmup-text: oklch(0.45 0.12 75); --history-badge-class-challenge-bg: oklch(0.90 0.14 30); --history-badge-class-challenge-text: oklch(0.38 0.18 30); --history-badge-benchmark-bg: oklch(0.88 0.05 220); --history-badge-benchmark-text: oklch(0.35 0.06 220); /* History question-row status icon colours */ --history-icon-correct: oklch(0.60 0.18 145); --history-icon-incorrect: var(--muted-foreground); /* wrong = slate, never red */ --history-icon-speed: oklch(0.70 0.18 45); /* ── Feedback verdict tokens ── VOLTAGE construction ───────────────────── `numina-play-feedback-construction` = voltage (owner, 2026-08-02), picked with the note "are you sure this will work in light and dark and for all skins?" — answered BEFORE this block was written by docs/2026-08-02-FEEDBACK-R2.voltage-proof.mjs: every skin × state × floor, from each skin's own solids. ONE rule, four states, BOTH MODES: the bar is the state's solid; ink, sub and disc are color-mix(bar 18%, black) — the construction dark's solid gold already used; the glyph wears the bar's own colour inside the near-black coin (his contrasting-icon idea, `numina-play-disc-treatment` withdrawn into the construction call). Bars are MODE-INDEPENDENT, so the .dark block keeps ONLY the streak chip — everything else inherits from here. Skins override --fb-bad-source with their own rose; the green deliberately has NO skin override — one green for every look AND mode (extends `numina-play-correct-green` = fresh, which unified looks; this also retires dark's teal-leaning mint, stated on the board). ⚠ --fb-ok-source is NOT --color-success: that token is semantic and read elsewhere (--color-success-soft, the tier-ramp ΔE rule). This one exists so the bar can change alone. ⚠ #9CEDBA is the fresh #16A34A HUE at a SEARCHED lightness — the smallest L clearing deutan ≥ 10.5 (margin; floor 10) against EVERY skin's rose. A Calm-only search landed #8BEAAE and FAILED the margin on the other skins' lighter #F07E90 — thresholds tuned on one population die when the population moves. Re-run the proof script when ANY rose or this green changes; never nudge one end alone. ⚠ Solid bars retire the tint %s and the 98%/96% ink patches (`numina-play-verdict-colour` = a's floors are KEPT and re-measured — worst pair deutan 10.8; `numina-play-status-label-ink` = fix's floors likewise — worst ink/glyph 6.10:1; the light elite disc, 2.19:1 live before this, is 8.35:1). Elite still has no --fb-elite-sub: QuestionFrame hands its sub line the ink token. Gated by scripts/feedbackColours.check.mjs — its EXPECTED_* baselines change together with this block, never one alone. */ --fb-ok-source: #9CEDBA; --fb-bad-source: #E8788A; /* ⚡ FAST gold — owner verdict `numina-play-fast-bar-colour` = lighter-gold (2026-08-09, note: "i love the colors"). Was #E3B559 (L* 76), the odd one out against the three pastel verdict bars (mint 88 · rose 64 · blue 68) — yellow goes muddy at a lightness where pink stays pastel. #F2CE6B sits at L* 84, inside the family, and reads MORE gold, not less. ⚠ FAST gold ≠ EARNED gold. --accent-lightning (chips, awards, tier arrivals) deliberately stays #C9962E/#E3B559 — the verdict's own option text promised "nothing else in the app changes". The inks and the bolt disc below are MIXED from this source, so they recalibrate for free — and the bolt actually gains visibility (a brighter glyph on the same near-black disc). */ --fb-elite-source: #F2CE6B; --fb-slow-source: #7BA7E8; --fb-ok-bg: var(--fb-ok-source); --fb-ok-ink: color-mix(in srgb, var(--fb-ok-source) 18%, #000000); --fb-ok-sub: var(--fb-ok-ink); --fb-ok-disc: var(--fb-ok-ink); --fb-ok-disc-ink: var(--fb-ok-source); --fb-bad-bg: var(--fb-bad-source); --fb-bad-ink: color-mix(in srgb, var(--fb-bad-source) 18%, #000000); --fb-bad-sub: var(--fb-bad-ink); --fb-bad-disc: var(--fb-bad-ink); --fb-bad-disc-ink: var(--fb-bad-source); --fb-elite-bg: var(--fb-elite-source); --fb-elite-ink: color-mix(in srgb, var(--fb-elite-source) 18%, #000000); --fb-elite-disc: var(--fb-elite-ink); --fb-elite-disc-ink: var(--fb-elite-source); --fb-slow-bg: var(--fb-slow-source); --fb-slow-ink: color-mix(in srgb, var(--fb-slow-source) 18%, #000000); --fb-slow-sub: var(--fb-slow-ink); --fb-slow-disc: var(--fb-slow-ink); --fb-slow-disc-ink: var(--fb-slow-source); --fb-streak-bg: color-mix(in srgb, var(--personal-accent) 14%, var(--card)); --fb-streak-ink: var(--personal-accent);} .dark { /* ═══ DARK MODE — "Twilight Calm" (owner-locked 2026-07-16) ═══ Spec: docs/2026-07-16-DESIGN-LOCK.md · mockup docs/2026-07-15-DIRECTIONS/05-twilight-calm.html. Slate-plum evening room; the voltage is the quiet mint, full-strength. */ --accent-primary: #6FD9BE; /* --brand-ink retired — see the :root note. */ /* Dark tints also derive from the (possibly learner-chosen) accent — slightly stronger mixes than light so they read on the graphite cards. */ --accent-muted: color-mix(in srgb, var(--accent-primary) 18%, var(--card)); --accent-primary-border: color-mix(in srgb, var(--accent-primary) 38%, var(--card)); --accent-primary-soft: color-mix(in srgb, var(--accent-primary) 16%, var(--card)); /* Dark: the elite strip is dark, so the label ink lifts to the calm gold; the segmented active pill uses the accent tint (no surface is lighter than muted). */ --accent-lightning: #E3B559; --accent-lightning-ink: #E3B559; /* Dark lightning strip: its OWN warm, opaque gold surface. Mixing bright gold *toward transparent* over the navy card muddied to olive at even 8%, so the strip read as barely-there. Instead we mix gold into a warm near-black base: chroma stays golden (never olive), the band reads as a real, lit celebration surface, and it stays correct over ANY dark card. A brighter gold top edge crowns it; the flash pulse lifts the same surface brighter still. */ --accent-lightning-tint: color-mix(in srgb, var(--accent-lightning) 26%, #241D0F); --accent-lightning-edge: color-mix(in srgb, var(--accent-lightning) 55%, transparent); --accent-lightning-flash: color-mix(in srgb, var(--accent-lightning) 48%, #241D0F); /* Award metals — dark-mode recut (the :root set is cream/brown, built for the light theme; it was never overridden here, so gold/silver/bronze chips rendered as light-theme chips pasted on the dark card). Opaque mixes into the dark card + bright metallic ink; shine gradients live at the component level — these are the token-level surfaces every consumer inherits. */ --award-gold: #E3B559; --award-gold-bg: color-mix(in srgb, #E3B559 16%, var(--card)); --award-gold-border: color-mix(in srgb, #E3B559 55%, var(--card)); --award-gold-text: #EACD8F; --accent-gold: #E3B559; --award-silver-bg: color-mix(in srgb, #C5CAD6 14%, var(--card)); --award-silver-border: color-mix(in srgb, #C5CAD6 45%, var(--card)); --award-silver-text: #D6DBE6; --award-bronze-bg: color-mix(in srgb, #D4904A 16%, var(--card)); --award-bronze-border: color-mix(in srgb, #D4904A 50%, var(--card)); --award-bronze-text: #E5A667; --tab-active-bg: var(--accent-muted); /* Core surface — slate-plum evening room (never black). */ --background: #1E1B2E; --foreground: #EDEAF6; --card: #262238; --card-foreground: #EDEAF6; /* Popover steps OFF --card here too (both were #262238 ⇒ 1.000:1, no scrim). Dark has room to LIFT, so the sheet takes the next rung up the plum ramp, above --muted #322D48: 1.24:1 over the card it covers, 1.36:1 over the room. */ --popover: #363050; --popover-foreground: #EDEAF6; /* #EDEAF6 on #363050 = 10.4:1 */ /* CHROME LOCKED to the voltage — the quiet mint at full strength. Mint is a LIGHT fill, so its ink is the deep evergreen (never white on mint). */ --primary: var(--accent-primary); --primary-foreground: #14241F; /* Secondary / muted — plum steps */ --secondary: #2E2A42; --secondary-foreground: #DCD6EC; --muted: #322D48; --muted-rgb: 50 45 72; --muted-foreground: #B3ABCC; --muted-foreground-rgb: 179 171 204; /* Destructive / alerts — the locked "wrong" rose (light fill → dark ink) */ --destructive: #E8788A; --destructive-rgb: 232 120 138; --destructive-foreground: #33101A; /* Borders — same D2-B verdict as light: the edge carries the card. The graphite card is 1.09:1 on the evening room, and the old #3A3550 hairline was 1.32:1 on the card / 1.44:1 on the page — nearly nothing. #524B73 lifts that to 1.91:1 on the card / 2.09:1 on the page. --input keeps the old plum hairline on purpose (it doubles as a dark FILL — see the :root note). */ --border: #524B73; --border-rgb: 82 75 115; --input: #3A3550; --ring: #6FD9BE; --ring-rgb: 111 217 190; /* Semantic colors — the locked bright forms for dark */ --color-success: #66C98F; --color-warning: #E8B45A; --color-info: #7BA7E8; /* Sidebar */ --sidebar: #1A1728; --sidebar-foreground: #EDEAF6; --sidebar-border: #2E2A42; --table-header-bg: #2A2540; --table-header-text: #C9C2DD; --table-header-border: #2E2A42; --table-row-hover: #322C4A; --table-row-selected: #383157; --table-sort-icon: #8B82A8; /* Tier ladder — same "earn your colour" shape as light (see :root for the four measured faults this replaces). Dark has room light does not: the mint voltage sits ΔE 38 from the dark success green, so mastery KEEPS the brand colour here and only the light form has to move off it. Beginner lifts from #56506E (2.02:1 on the card — fault 3) to 3.42:1. */ /* #767090 not #7A7296: white badge ink over #7A7296 measured 4.49:1 — a rounding error away from failing. Nudged until white clears 4.5 outright while the fill still clears 3:1 on the card. */ --tier-beginner: #767090; --tier-intermediate: #A385E8; --tier-advanced: #C9B0FF; --tier-mastered: #6FD9BE; /* Dark inverts the ink: only the dim bottom rung can carry white. */ --tier-beginner-ink: #FFFFFF; --tier-intermediate-ink: #0B0A12; --tier-advanced-ink: #0B0A12; --tier-mastered-ink: #0B0A12; --tier-beginner-text: #A49CB4; --tier-intermediate-text: #A385E8; --tier-advanced-text: #C9B0FF; --tier-mastered-text: #6FD9BE; --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.40), 0 1px 2px -1px rgb(0 0 0 / 0.30); /* History badge colours — darker tints */ --history-badge-practice-bg: oklch(0.20 0.015 260); --history-badge-practice-text: oklch(0.75 0.05 260); --history-badge-placement-bg: oklch(0.20 0.12 240); --history-badge-placement-text: oklch(0.80 0.14 240); --history-badge-mixed-bg: oklch(0.20 0.14 310); --history-badge-mixed-text: oklch(0.82 0.17 310); --history-badge-track-challenge-bg: oklch(0.22 0.14 85); --history-badge-track-challenge-text: oklch(0.85 0.17 85); --history-badge-numina-master-bg: oklch(0.20 0.17 290); --history-badge-numina-master-text: oklch(0.82 0.20 290); --history-badge-forge-bg: oklch(0.22 0.16 45); --history-badge-forge-text: oklch(0.85 0.20 45); --history-badge-warmup-bg: oklch(0.22 0.10 75); --history-badge-warmup-text: oklch(0.85 0.14 75); --history-badge-class-challenge-bg: oklch(0.20 0.16 30); --history-badge-class-challenge-text: oklch(0.85 0.20 30); --history-badge-benchmark-bg: oklch(0.18 0.06 220); --history-badge-benchmark-text: oklch(0.80 0.08 220); /* Feedback verdict tokens: VOLTAGE bars are mode-independent — the whole set inherits from the base block (`numina-play-feedback-construction` = voltage, 2026-08-02; the old dark D1 solids were the template the base now generalises). ONLY the streak chip stays mode-split: its light formula tints toward --card, and dark's chip sits on the room instead. */ --fb-streak-bg: var(--background); --fb-streak-ink: var(--personal-accent); } /* Prevent iOS font-size inflation on orientation change */ /* Plus Jakarta Sans — THE body face for the whole app. ⚠ font-weight is capped at 700 ON PURPOSE. This is a variable file whose axis runs to 800, but the Google stylesheet it replaces only ever served 400/500/ 600/700 — so today a font-extrabold (800) heading is already painted at 700. Declaring the range as 400-700 keeps that clamp exactly, which is why this swap changes no pixels. Widen it to 800 only as a deliberate design decision. */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/PlusJakartaSans.woff2") format("woff2"); } /* JetBrains Mono — the numeric/data face: the font-mono utility (landing word blocks, the Ops console) and the arcade skin's display voice. Axis runs 300-700; capped to 400-700 to match the weights the stylesheet used to serve. */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/JetBrainsMono.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Inter-latinext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Archivo-latinext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Nunito — the kid-friendly numerals KaTeX draws with (owner decision `numina-play-math-numerals: a`, 2026-07-31). Variable weight so the maths inherits its host's weight: the question hero (font-bold 700), an MCQ tile (font-semibold 600). Latin subset covers digits + ( ) ? = and × ÷ (U+00D7/00F7); the minus is emitted as ASCII "-" by toLatex, so no U+2212 glyph is needed. */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/Nunito-latin.woff2") format("woff2"); } /* KaTeX draws the structure; Nunito supplies the glyphs. KaTeX's own `font:` shorthand sets family AND weight:normal — override both so the numerals are Nunito and INHERIT the host weight (hero bold, tile semibold). Structure (radical SVG, fraction bar, exponent offsets) is baked em-geometry and is left untouched — only the visible glyph changes. */ .katex, .katex * { font-family: "Nunito", var(--font-body), sans-serif !important; font-weight: inherit !important; } /* ⚠ THE THIRD THING THE SHORTHAND SETS. The comment above says the KaTeX `font` shorthand sets "family AND weight" — it sets a SIZE too: katex.min.css ships `.katex { font: normal 1.21em KaTeX_Main }`. Overriding two of the three left the 1.21 in force, so EVERY typeset string in this app rendered 21% larger than its host asked for. On the question hero that is the difference between the 80px the code caps at (QuestionFrame.tsx:1121) and the 96.8px that actually landed — measured 1.210 exactly, host 72px → 87.12px, in math-render-harness.html. It also split a mixed question into words at one size and numerals at another, because only the typeset half was inflated. ⚠ `.katex` ONLY, never `.katex *`: the children size themselves in em against this root (`.sizing`, `.reset-textstyle`, fraction bars, exponent offsets), so forcing inherit on them would flatten the maths geometry rather than fix it. ⭐ The general lesson: overriding SOME properties of a vendor shorthand leaves the rest of it in force. */ .katex { font-size: inherit !important; } /* ⚠ THE COMMENT ABOVE USED TO CLAIM "exponent offsets ... left untouched - only the visible glyph changes". The em geometry IS untouched; the PICTURE is not, and the owner spotted it before any measurement did ("i still dont think it looks right. compare it to katex"). MEASURED against stock KaTeX, same string, same 64px host, both rendered by the real engine (scripts/katex-nunito-check.mjs): stock KaTeX_Main base glyph box 86px exponent rise 0.385 of the base Nunito (ours) base glyph box 105px exponent rise 0.344 of the base Nunito's digits are ~22% TALLER at the same font-size. KaTeX raises the superscript by a fixed em amount calibrated to KaTeX_Main, so against a taller digit that same offset lands the power LOWER on the number - it sags into the digit instead of riding its shoulder. Nothing in the CSS was wrong; the font substitution invalidated a constant baked for the original face. +0.055em restores KaTeX's own proportion (measured 0.381 at 0.05em and 0.388 at 0.06em; stock is 0.385). WARNING: `transform`, NOT `top` - KaTeX writes `top:-3.063em` INLINE on this span, so a stylesheet `top` silently loses. The first sweep returned the IDENTICAL ratio for all six candidates, i.e. six fake options. */ .katex .msupsub .vlist > span { transform: translateY(-0.055em); } /* THE SQUARE-ROOT SIGN WAS SHORTER THAN THE NUMBER IT COVERS. Same root cause as the exponent, found by extending that measurement to every structure (owner asked for exactly this after the exponent fix). MEASURED, same method, ratios not pixels: fractions bar position 0.564 stock vs 0.554 ours -> FINE, left alone radicals surd spans 0.940 of its box stock vs 0.796 ours -> BROKEN At 64px the surd glyph was 84px tall against a 93px radicand: the sign did not reach over its own content, so 49 burst out of the root. KaTeX sizes `.hide-tail` from the radicand height in KaTeX_Main metrics; Nunito's digits are taller, so the sign came up short. scaleY(1.18) lands it exactly on KaTeX's 0.940. scaleY, NOT a fixed height: KaTeX recomputes .hide-tail per expression, so multiplying whatever it chose is the only form that generalises. REFUTED ALONG THE WAY, so nobody retries it: scaling the maths FONT-SIZE to compensate for Nunito's taller digits fixes nothing here — the surd and the radicand scale together, so the ratio is size-invariant (0.796 at every factor from 0.78 to 1.0). It looked like the elegant root-cause fix and it does not work. ⚠ Twice during this the selector simply did not match and every candidate returned the IDENTICAL number — six fake options that read like data. If a sweep gives one answer for every input, the lever is wrong, not the theory. */ .katex .hide-tail { display: inline-block; transform: scaleY(1.18); transform-origin: bottom; } html, body { /* overflow intentionally not set — session screens apply their own overflow-hidden */ } html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; /* Responsive: phones → desktop. Floor at a small-phone width to avoid extreme squish. */ min-width: 320px; } /* Touch ergonomics (kid-facing app): kill the 300ms tap delay and the grey iOS tap-flash on interactive elements so taps feel instant and clean. */ button, a, label, summary, select, [role="button"], [data-slot="button"], [data-slot="select-trigger"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 2rem; padding-left: 2rem; } @media (min-width: 1400px) { .container { max-width: 1400px; } } .prose { color: var(--tw-prose-body); max-width: 65ch; } .prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } .prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-lead); font-size: 1.25em; line-height: 1.6; margin-top: 1.2em; margin-bottom: 1.2em; } .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-links); text-decoration: underline; font-weight: 500; } .prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-bold); font-weight: 600; } .prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: decimal; margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em; } .prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-alpha; } .prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-alpha; } .prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-alpha; } .prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-alpha; } .prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-roman; } .prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-roman; } .prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-roman; } .prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-roman; } .prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: decimal; } .prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: disc; margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em; } .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { font-weight: 400; color: var(--tw-prose-counters); } .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { color: var(--tw-prose-bullets); } .prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.25em; } .prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-color: var(--tw-prose-hr); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } .prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 500; font-style: italic; color: var(--tw-prose-quotes); border-left-width: 0.25rem; border-left-color: var(--tw-prose-quote-borders); quotes: "\201C""\201D""\2018""\2019"; margin-top: 1.6em; margin-bottom: 1.6em; padding-left: 1em; } .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: open-quote; } .prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: close-quote; } .prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 800; font-size: 2.25em; margin-top: 0; margin-bottom: 0.8888889em; line-height: 1.1111111; } .prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 900; color: inherit; } .prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 700; font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; line-height: 1.3333333; } .prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 800; color: inherit; } .prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.6; } .prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 700; color: inherit; } .prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; } .prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 700; color: inherit; } .prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { display: block; margin-top: 2em; margin-bottom: 2em; } .prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 500; font-family: inherit; color: var(--tw-prose-kbd); box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%); font-size: 0.875em; border-radius: 0.3125rem; padding-top: 0.1875em; padding-right: 0.375em; padding-bottom: 0.1875em; padding-left: 0.375em; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: "`"; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: "`"; } .prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-size: 0.875em; } .prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-size: 0.9em; } .prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-pre-code); background-color: var(--tw-prose-pre-bg); overflow-x: auto; font-weight: 400; font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; margin-bottom: 1.7142857em; border-radius: 0.375rem; padding-top: 0.8571429em; padding-right: 1.1428571em; padding-bottom: 0.8571429em; padding-left: 1.1428571em; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { background-color: transparent; border-width: 0; border-radius: 0; padding: 0; font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: none; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: none; } .prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { width: 100%; table-layout: auto; text-align: left; margin-top: 2em; margin-bottom: 2em; font-size: 0.875em; line-height: 1.7142857; } .prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-th-borders); } .prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; vertical-align: bottom; padding-right: 0.5714286em; padding-bottom: 0.5714286em; padding-left: 0.5714286em; } .prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-td-borders); } .prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 0; } .prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { vertical-align: baseline; } .prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-top-width: 1px; border-top-color: var(--tw-prose-th-borders); } .prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { vertical-align: top; } .prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } .prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; } .prose { --tw-prose-body: #374151; --tw-prose-headings: #111827; --tw-prose-lead: #4b5563; --tw-prose-links: #111827; --tw-prose-bold: #111827; --tw-prose-counters: #6b7280; --tw-prose-bullets: #d1d5db; --tw-prose-hr: #e5e7eb; --tw-prose-quotes: #111827; --tw-prose-quote-borders: #e5e7eb; --tw-prose-captions: #6b7280; --tw-prose-kbd: #111827; --tw-prose-kbd-shadows: 17 24 39; --tw-prose-code: #111827; --tw-prose-pre-code: #e5e7eb; --tw-prose-pre-bg: #1f2937; --tw-prose-th-borders: #d1d5db; --tw-prose-td-borders: #e5e7eb; --tw-prose-invert-body: #d1d5db; --tw-prose-invert-headings: #fff; --tw-prose-invert-lead: #9ca3af; --tw-prose-invert-links: #fff; --tw-prose-invert-bold: #fff; --tw-prose-invert-counters: #9ca3af; --tw-prose-invert-bullets: #4b5563; --tw-prose-invert-hr: #374151; --tw-prose-invert-quotes: #f3f4f6; --tw-prose-invert-quote-borders: #374151; --tw-prose-invert-captions: #9ca3af; --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: 255 255 255; --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: #d1d5db; --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-invert-th-borders: #4b5563; --tw-prose-invert-td-borders: #374151; font-size: 1rem; line-height: 1.75; } .prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } .prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; } .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-left: 0.375em; } .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-left: 0.375em; } .prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } .prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; } .prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 1.25em; } .prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; } .prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 1.25em; } .prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } .prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } .prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.5em; padding-left: 1.625em; } .prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-left: 0; } .prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-right: 0; } .prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-top: 0.5714286em; padding-right: 0.5714286em; padding-bottom: 0.5714286em; padding-left: 0.5714286em; } .prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-left: 0; } .prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-right: 0; } .prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; } .visible { visibility: visible; } .invisible { visibility: hidden; } .collapse { visibility: collapse; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { inset: 0px; } .inset-x-0 { left: 0px; right: 0px; } .inset-x-px { left: 1px; right: 1px; } .inset-y-0 { top: 0px; bottom: 0px; } .-bottom-1 { bottom: -0.25rem; } .-right-1 { right: -0.25rem; } .-right-1\.5 { right: -0.375rem; } .-right-2 { right: -0.5rem; } .-top-1\.5 { top: -0.375rem; } .bottom-0 { bottom: 0px; } .bottom-px { bottom: 1px; } .left-0 { left: 0px; } .left-1 { left: 0.25rem; } .left-1\/2 { left: 50%; } .left-2 { left: 0.5rem; } .left-\[-9999px\] { left: -9999px; } .left-\[12\.5\%\] { left: 12.5%; } .left-\[50\%\] { left: 50%; } .right-0 { right: 0px; } .right-0\.5 { right: 0.125rem; } .right-1\.5 { right: 0.375rem; } .right-2 { right: 0.5rem; } .right-\[12\.5\%\] { right: 12.5%; } .top-0 { top: 0px; } .top-0\.5 { top: 0.125rem; } .top-1\.5 { top: 0.375rem; } .top-14 { top: 3.5rem; } .top-2 { top: 0.5rem; } .top-6 { top: 1.5rem; } .top-\[50\%\] { top: 50%; } .top-\[5px\] { top: 5px; } .top-\[var\(--header-height\)\] { top: var(--header-height); } .isolate { isolation: isolate; } .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; } .order-1 { order: 1; } .order-2 { order: 2; } .col-span-full { grid-column: 1 / -1; } .col-start-2 { grid-column-start: 2; } .row-span-2 { grid-row: span 2 / span 2; } .row-start-1 { grid-row-start: 1; } .-m-1 { margin: -0.25rem; } .m-0 { margin: 0px; } .m-auto { margin: auto; } .-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; } .-mx-4 { margin-left: -1rem; margin-right: -1rem; } .-mx-5 { margin-left: -1.25rem; margin-right: -1.25rem; } .-my-2\.5 { margin-top: -0.625rem; margin-bottom: -0.625rem; } .mx-4 { margin-left: 1rem; margin-right: 1rem; } .mx-\[0\.14em\] { margin-left: 0.14em; margin-right: 0.14em; } .mx-auto { margin-left: auto; margin-right: auto; } .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-\[0\.08em\] { margin-top: 0.08em; margin-bottom: 0.08em; } .my-auto { margin-top: auto; margin-bottom: auto; } .-mb-4 { margin-bottom: -1rem; } .-mb-8 { margin-bottom: -2rem; } .-ml-2 { margin-left: -0.5rem; } .-mr-2 { margin-right: -0.5rem; } .-mt-0\.5 { margin-top: -0.125rem; } .-mt-7 { margin-top: -1.75rem; } .mb-0\.5 { margin-bottom: 0.125rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-1\.5 { margin-bottom: 0.375rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-2\.5 { margin-bottom: 0.625rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-7 { margin-bottom: 1.75rem; } .mb-8 { margin-bottom: 2rem; } .mb-auto { margin-bottom: auto; } .ml-0\.5 { margin-left: 0.125rem; } .ml-1 { margin-left: 0.25rem; } .ml-1\.5 { margin-left: 0.375rem; } .ml-2 { margin-left: 0.5rem; } .ml-3 { margin-left: 0.75rem; } .ml-auto { margin-left: auto; } .mr-1 { margin-right: 0.25rem; } .mr-1\.5 { margin-right: 0.375rem; } .mr-2 { margin-right: 0.5rem; } .mr-2\.5 { margin-right: 0.625rem; } .mr-auto { margin-right: auto; } .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-1\.5 { margin-top: 0.375rem; } .mt-2 { margin-top: 0.5rem; } .mt-2\.5 { margin-top: 0.625rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-9 { margin-top: 2.25rem; } .mt-\[3px\] { margin-top: 3px; } .mt-auto { margin-top: auto; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .line-clamp-4 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .table-caption { display: table-caption; } .table-cell { display: table-cell; } .table-row { display: table-row; } .grid { display: grid; } .contents { display: contents; } .hidden { display: none; } .aspect-square { aspect-ratio: 1 / 1; } .size-10 { width: 2.5rem; height: 2.5rem; } .size-11 { width: 2.75rem; height: 2.75rem; } .size-2 { width: 0.5rem; height: 0.5rem; } .size-2\.5 { width: 0.625rem; height: 0.625rem; } .size-3 { width: 0.75rem; height: 0.75rem; } .size-3\.5 { width: 0.875rem; height: 0.875rem; } .size-4 { width: 1rem; height: 1rem; } .size-5 { width: 1.25rem; height: 1.25rem; } .size-6 { width: 1.5rem; height: 1.5rem; } .size-7 { width: 1.75rem; height: 1.75rem; } .size-8 { width: 2rem; height: 2rem; } .size-9 { width: 2.25rem; height: 2.25rem; } .size-\[18px\] { width: 18px; height: 18px; } .size-auto { width: auto; height: auto; } .h-0\.5 { height: 0.125rem; } .h-1 { height: 0.25rem; } .h-1\.5 { height: 0.375rem; } .h-10 { height: 2.5rem; } .h-11 { height: 2.75rem; } .h-12 { height: 3rem; } .h-14 { height: 3.5rem; } .h-16 { height: 4rem; } .h-2 { height: 0.5rem; } .h-2\.5 { height: 0.625rem; } .h-20 { height: 5rem; } .h-24 { height: 6rem; } .h-28 { height: 7rem; } .h-3 { height: 0.75rem; } .h-3\.5 { height: 0.875rem; } .h-4 { height: 1rem; } .h-40 { height: 10rem; } .h-48 { height: 12rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-7 { height: 1.75rem; } .h-8 { height: 2rem; } .h-9 { height: 2.25rem; } .h-\[0\.09em\] { height: 0.09em; } .h-\[100dvh\] { height: 100dvh; } .h-\[17px\] { height: 17px; } .h-\[26px\] { height: 26px; } .h-\[2px\] { height: 2px; } .h-\[300px\] { height: 300px; } .h-\[30px\] { height: 30px; } .h-\[33px\] { height: 33px; } .h-\[3px\] { height: 3px; } .h-\[400px\] { height: 400px; } .h-\[420px\] { height: 420px; } .h-\[42px\] { height: 42px; } .h-\[44px\] { height: 44px; } .h-\[520px\] { height: 520px; } .h-\[52px\] { height: 52px; } .h-\[560px\] { height: 560px; } .h-\[56px\] { height: 56px; } .h-\[5px\] { height: 5px; } .h-\[70px\] { height: 70px; } .h-\[74px\] { height: 74px; } .h-\[calc\(100dvh-10\.25rem-env\(safe-area-inset-top\)-env\(safe-area-inset-bottom\)\)\] { height: calc(100dvh - 10.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } .h-\[calc\(100dvh-10\.25rem-safe-areas\)\] { height: calc(100dvh - 10.25rem - safe-areas); } .h-\[calc\(100dvh-6\.5rem\)\] { height: calc(100dvh - 6.5rem); } .h-\[calc\(100dvh-var\(--header-height\)-3\.5rem\)\] { height: calc(100dvh - var(--header-height) - 3.5rem); } .h-\[var\(--header-height\)\] { height: var(--header-height); } .h-auto { height: auto; } .h-dvh { height: 100dvh; } .h-full { height: 100%; } .h-px { height: 1px; } .h-screen { height: 100vh; } .max-h-48 { max-height: 12rem; } .max-h-\[300px\] { max-height: 300px; } .max-h-\[320px\] { max-height: 320px; } .max-h-\[45vh\] { max-height: 45vh; } .max-h-\[90dvh\] { max-height: 90dvh; } .max-h-\[calc\(100dvh-12rem\)\] { max-height: calc(100dvh - 12rem); } .max-h-\[calc\(100vh-12\.5rem\)\] { max-height: calc(100vh - 12.5rem); } .max-h-full { max-height: 100%; } .min-h-0 { min-height: 0px; } .min-h-11 { min-height: 2.75rem; } .min-h-12 { min-height: 3rem; } .min-h-14 { min-height: 3.5rem; } .min-h-8 { min-height: 2rem; } .min-h-\[100dvh\] { min-height: 100dvh; } .min-h-\[104px\] { min-height: 104px; } .min-h-\[112px\] { min-height: 112px; } .min-h-\[176px\] { min-height: 176px; } .min-h-\[20px\] { min-height: 20px; } .min-h-\[28px\] { min-height: 28px; } .min-h-\[30px\] { min-height: 30px; } .min-h-\[36px\] { min-height: 36px; } .min-h-\[420px\] { min-height: 420px; } .min-h-\[44px\] { min-height: 44px; } .min-h-\[480px\] { min-height: 480px; } .min-h-\[52px\] { min-height: 52px; } .min-h-\[54px\] { min-height: 54px; } .min-h-\[56px\] { min-height: 56px; } .min-h-\[58px\] { min-height: 58px; } .min-h-\[60vh\] { min-height: 60vh; } .min-h-\[64px\] { min-height: 64px; } .min-h-\[680px\] { min-height: 680px; } .min-h-\[68px\] { min-height: 68px; } .min-h-\[70vh\] { min-height: 70vh; } .min-h-\[76px\] { min-height: 76px; } .min-h-\[80px\] { min-height: 80px; } .min-h-\[calc\(100dvh-var\(--header-height\)-var\(--bottom-nav-height\)-2rem-env\(safe-area-inset-top\)-env\(safe-area-inset-bottom\)\)\] { min-height: calc(100dvh - var(--header-height) - var(--bottom-nav-height) - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } .min-h-\[calc\(100dvh-var\(--header-height\2c 56px\)\)\] { min-height: calc(100dvh - var(--header-height,56px)); } .min-h-\[calc\(var\(--vh\2c 1dvh\)\*100-12rem\)\] { min-height: calc(var(--vh,1dvh) * 100 - 12rem); } .min-h-dvh { min-height: 100dvh; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .w-1 { width: 0.25rem; } .w-1\.5 { width: 0.375rem; } .w-1\/3 { width: 33.333333%; } .w-10 { width: 2.5rem; } .w-11 { width: 2.75rem; } .w-12 { width: 3rem; } .w-14 { width: 3.5rem; } .w-16 { width: 4rem; } .w-2 { width: 0.5rem; } .w-2\.5 { width: 0.625rem; } .w-2\/3 { width: 66.666667%; } .w-2\/5 { width: 40%; } .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-28 { width: 7rem; } .w-3 { width: 0.75rem; } .w-3\.5 { width: 0.875rem; } .w-3\/4 { width: 75%; } .w-3\/5 { width: 60%; } .w-32 { width: 8rem; } .w-36 { width: 9rem; } .w-4 { width: 1rem; } .w-40 { width: 10rem; } .w-44 { width: 11rem; } .w-48 { width: 12rem; } .w-5 { width: 1.25rem; } .w-56 { width: 14rem; } .w-6 { width: 1.5rem; } .w-64 { width: 16rem; } .w-7 { width: 1.75rem; } .w-72 { width: 18rem; } .w-8 { width: 2rem; } .w-80 { width: 20rem; } .w-9 { width: 2.25rem; } .w-\[100px\] { width: 100px; } .w-\[128px\] { width: 128px; } .w-\[150px\] { width: 150px; } .w-\[180px\] { width: 180px; } .w-\[26\%\] { width: 26%; } .w-\[26px\] { width: 26px; } .w-\[288px\] { width: 288px; } .w-\[300px\] { width: 300px; } .w-\[340px\] { width: 340px; } .w-\[360px\] { width: 360px; } .w-\[38\%\] { width: 38%; } .w-\[400px\] { width: 400px; } .w-\[44px\] { width: 44px; } .w-\[50px\] { width: 50px; } .w-\[70\%\] { width: 70%; } .w-\[74px\] { width: 74px; } .w-auto { width: auto; } .w-fit { width: -moz-fit-content; width: fit-content; } .w-full { width: 100%; } .w-max { width: -moz-max-content; width: max-content; } .w-px { width: 1px; } .w-screen { width: 100vw; } .min-w-0 { min-width: 0px; } .min-w-11 { min-width: 2.75rem; } .min-w-4 { min-width: 1rem; } .min-w-\[17px\] { min-width: 17px; } .min-w-\[20px\] { min-width: 20px; } .min-w-\[28px\] { min-width: 28px; } .min-w-\[48px\] { min-width: 48px; } .min-w-\[52px\] { min-width: 52px; } .min-w-\[64px\] { min-width: 64px; } .min-w-\[7rem\] { min-width: 7rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-5xl { max-width: 64rem; } .max-w-6xl { max-width: 72rem; } .max-w-\[120px\] { max-width: 120px; } .max-w-\[15rem\] { max-width: 15rem; } .max-w-\[16ch\] { max-width: 16ch; } .max-w-\[380px\] { max-width: 380px; } .max-w-\[400px\] { max-width: 400px; } .max-w-\[420px\] { max-width: 420px; } .max-w-\[46ch\] { max-width: 46ch; } .max-w-\[480px\] { max-width: 480px; } .max-w-\[520px\] { max-width: 520px; } .max-w-\[52ch\] { max-width: 52ch; } .max-w-\[620px\] { max-width: 620px; } .max-w-\[640px\] { max-width: 640px; } .max-w-\[680px\] { max-width: 680px; } .max-w-\[70\%\] { max-width: 70%; } .max-w-\[80ch\] { max-width: 80ch; } .max-w-\[85\%\] { max-width: 85%; } .max-w-\[95vw\] { max-width: 95vw; } .max-w-\[calc\(100\%-2rem\)\] { max-width: calc(100% - 2rem); } .max-w-\[var\(--desktop-col\)\] { max-width: var(--desktop-col); } .max-w-full { max-width: 100%; } .max-w-md { max-width: 28rem; } .max-w-sm { max-width: 24rem; } .max-w-xl { max-width: 36rem; } .max-w-xs { max-width: 20rem; } .flex-1 { flex: 1 1 0%; } .flex-none { flex: none; } .flex-shrink { flex-shrink: 1; } .flex-shrink-0 { flex-shrink: 0; } .shrink { flex-shrink: 1; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; } .caption-bottom { caption-side: bottom; } .border-collapse { border-collapse: collapse; } .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-\[-50\%\] { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[-50\%\] { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-180 { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .animate-\[cut-refuse_0\.3s_ease-in-out\] { animation: cut-refuse 0.3s ease-in-out; } @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } .cursor-pointer { cursor: pointer; } .touch-none { touch-action: none; } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .select-all { -webkit-user-select: all; -moz-user-select: all; user-select: all; } .resize { resize: both; } .scroll-pt-14 { scroll-padding-top: 3.5rem; } .list-none { list-style-type: none; } .auto-rows-min { grid-auto-rows: min-content; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, 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-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-\[minmax\(0\2c 1fr\)_360px\] { grid-template-columns: minmax(0,1fr) 360px; } .grid-cols-\[repeat\(auto-fill\2c minmax\(190px\2c 1fr\)\)\] { grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); } .grid-rows-\[auto_auto\] { grid-template-rows: auto auto; } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .place-items-center { place-items: center; } .content-start { align-content: flex-start; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-evenly { justify-content: space-evenly; } .gap-0 { gap: 0px; } .gap-0\.5 { gap: 0.125rem; } .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-10 { gap: 2.5rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-3\.5 { gap: 0.875rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-7 { gap: 1.75rem; } .gap-8 { gap: 2rem; } .gap-\[18px\] { gap: 18px; } .gap-\[3px\] { gap: 3px; } .gap-x-3 { -moz-column-gap: 0.75rem; column-gap: 0.75rem; } .gap-x-4 { -moz-column-gap: 1rem; column-gap: 1rem; } .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; } .gap-x-8 { -moz-column-gap: 2rem; column-gap: 2rem; } .gap-y-0\.5 { row-gap: 0.125rem; } .gap-y-1 { row-gap: 0.25rem; } .gap-y-2 { row-gap: 0.5rem; } .gap-y-3 { row-gap: 0.75rem; } .space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); } .space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.625rem * var(--tw-space-y-reverse)); } .space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .space-y-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } .divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } .divide-\[color-mix\(in_srgb\2c var\(--border\)_40\%\2c var\(--card\)\)\] > :not([hidden]) ~ :not([hidden]) { border-color: color-mix(in srgb,var(--border) 40%,var(--card)); } .divide-\[color-mix\(in_srgb\2c var\(--border\)_55\%\2c var\(--card\)\)\] > :not([hidden]) ~ :not([hidden]) { border-color: color-mix(in srgb,var(--border) 55%,var(--card)); } .divide-border > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(var(--border-rgb) / var(--tw-divide-opacity, 1)); } .self-start { align-self: flex-start; } .self-center { align-self: center; } .justify-self-end { justify-self: end; } .justify-self-center { justify-self: center; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-hidden { overflow-y: hidden; } .overflow-x-clip { overflow-x: clip; } .overscroll-x-contain { overscroll-behavior-x: contain; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whitespace-normal { white-space: normal; } .whitespace-nowrap { white-space: nowrap; } .text-pretty { text-wrap: pretty; } .break-words { overflow-wrap: break-word; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: var(--radius-card); } .rounded-\[3px\] { border-radius: 3px; } .rounded-full { border-radius: 9999px; } .rounded-lg { border-radius: var(--radius-card); } .rounded-md { border-radius: var(--radius-control); } .rounded-none { border-radius: 0px; } .rounded-sm { border-radius: var(--radius-chip); } .rounded-xl { border-radius: var(--radius-card); } .rounded-b-2xl { border-bottom-right-radius: var(--radius-card); border-bottom-left-radius: var(--radius-card); } .rounded-l-xl { border-top-left-radius: var(--radius-card); border-bottom-left-radius: var(--radius-card); } .rounded-r { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .rounded-r-xl { border-top-right-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); } .rounded-t-2xl { border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); } .rounded-t-lg { border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); } .rounded-t-md { border-top-left-radius: var(--radius-control); border-top-right-radius: var(--radius-control); } .rounded-t-xl { border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); } .border { border-width: 1px; } .border-0 { border-width: 0px; } .border-2 { border-width: 2px; } .border-x-0 { border-left-width: 0px; border-right-width: 0px; } .border-b { border-bottom-width: 1px; } .border-b-0 { border-bottom-width: 0px; } .border-l { border-left-width: 1px; } .border-l-2 { border-left-width: 2px; } .border-l-4 { border-left-width: 4px; } .border-t { border-top-width: 1px; } .border-t-4 { border-top-width: 4px; } .border-dashed { border-style: dashed; } .border-\[color-mix\(in_srgb\2c var\(--accent-gold\)_45\%\2c var\(--card\)\)\] { border-color: color-mix(in srgb,var(--accent-gold) 45%,var(--card)); } .border-\[color-mix\(in_srgb\2c var\(--accent-lightning\)_55\%\2c var\(--border\)\)\] { border-color: color-mix(in srgb,var(--accent-lightning) 55%,var(--border)); } .border-\[color-mix\(in_srgb\2c var\(--accent-primary\)_20\%\2c var\(--card\)\)\] { border-color: color-mix(in srgb,var(--accent-primary) 20%,var(--card)); } .border-\[color-mix\(in_srgb\2c var\(--accent-primary\)_25\%\2c var\(--card\)\)\] { border-color: color-mix(in srgb,var(--accent-primary) 25%,var(--card)); } .border-\[color-mix\(in_srgb\2c var\(--accent-primary\)_40\%\2c var\(--card\)\)\] { border-color: color-mix(in srgb,var(--accent-primary) 40%,var(--card)); } .border-\[color-mix\(in_srgb\2c var\(--accent-primary\)_45\%\2c var\(--border\)\)\] { border-color: color-mix(in srgb,var(--accent-primary) 45%,var(--border)); } .border-\[color-mix\(in_srgb\2c var\(--border\)_40\%\2c var\(--card\)\)\] { border-color: color-mix(in srgb,var(--border) 40%,var(--card)); } .border-\[color-mix\(in_srgb\2c var\(--border\)_50\%\2c var\(--card\)\)\] { border-color: color-mix(in srgb,var(--border) 50%,var(--card)); } .border-\[color-mix\(in_srgb\2c var\(--border\)_55\%\2c var\(--card\)\)\] { border-color: color-mix(in srgb,var(--border) 55%,var(--card)); } .border-\[color-mix\(in_srgb\2c var\(--border\)_60\%\2c var\(--background\)\)\] { border-color: color-mix(in srgb,var(--border) 60%,var(--background)); } .border-\[color-mix\(in_srgb\2c var\(--border\)_60\%\2c var\(--card\)\)\] { border-color: color-mix(in srgb,var(--border) 60%,var(--card)); } .border-\[color-mix\(in_srgb\2c var\(--border\)_70\%\2c var\(--card\)\)\] { border-color: color-mix(in srgb,var(--border) 70%,var(--card)); } .border-\[color-mix\(in_srgb\2c var\(--color-success\)_35\%\2c var\(--card\)\)\] { border-color: color-mix(in srgb,var(--color-success) 35%,var(--card)); } .border-\[color-mix\(in_srgb\2c var\(--color-warning\)_30\%\2c var\(--card\)\)\] { border-color: color-mix(in srgb,var(--color-warning) 30%,var(--card)); } .border-\[color-mix\(in_srgb\2c var\(--color-warning\)_35\%\2c var\(--card\)\)\] { border-color: color-mix(in srgb,var(--color-warning) 35%,var(--card)); } .border-\[color-mix\(in_srgb\2c var\(--primary\)_25\%\2c var\(--background\)\)\] { border-color: color-mix(in srgb,var(--primary) 25%,var(--background)); } .border-\[var\(--accent-gold\)\] { border-color: var(--accent-gold); } .border-\[var\(--accent-primary\)\] { border-color: var(--accent-primary); } .border-\[var\(--border\)\] { border-color: var(--border); } .border-\[var\(--color-success\)\] { border-color: var(--color-success); } .border-\[var\(--color-warning\)\] { border-color: var(--color-warning); } .border-\[var\(--destructive\)\] { border-color: var(--destructive); } .border-\[var\(--muted-foreground\)\] { border-color: var(--muted-foreground); } .border-\[var\(--primary\)\] { border-color: var(--primary); } .border-\[var\(--tier-mastered\)\] { border-color: var(--tier-mastered); } .border-accent-primary { border-color: var(--accent-primary); } .border-background { border-color: var(--background); } .border-border { --tw-border-opacity: 1; border-color: rgb(var(--border-rgb) / var(--tw-border-opacity, 1)); } .border-destructive { --tw-border-opacity: 1; border-color: rgb(var(--destructive-rgb) / var(--tw-border-opacity, 1)); } .border-input { border-color: var(--input); } .border-primary { border-color: var(--primary); } .border-transparent { border-color: transparent; } .border-white\/15 { border-color: rgb(255 255 255 / 0.15); } .border-t-\[var\(--accent-gold\)\] { border-top-color: var(--accent-gold); } .bg-\[color-mix\(in_srgb\2c var\(--accent-gold\)_12\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--accent-gold) 12%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--accent-lightning\)_30\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--accent-lightning) 30%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--accent-lightning\)_8\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--accent-lightning) 8%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--accent-primary\)_10\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--accent-primary) 10%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--accent-primary\)_14\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--accent-primary) 14%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--accent-primary\)_15\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--accent-primary) 15%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--accent-primary\)_16\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--accent-primary) 16%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--border\)_45\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--border) 45%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--color-success\)_15\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--color-success) 15%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--color-success\)_8\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--color-success) 8%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--color-warning\)_10\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--color-warning) 10%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--color-warning\)_15\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--color-warning) 15%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--destructive\)_8\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--destructive) 8%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--foreground\)_6\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--foreground) 6%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--muted\)_30\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--muted) 30%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--muted\)_40\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--muted) 40%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--muted\)_50\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--muted) 50%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--muted\)_60\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--muted) 60%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_60\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--muted-foreground) 60%,var(--card)); } .bg-\[color-mix\(in_srgb\2c var\(--primary\)_5\%\2c var\(--background\)\)\] { background-color: color-mix(in srgb,var(--primary) 5%,var(--background)); } .bg-\[color-mix\(in_srgb\2c var\(--primary\)_6\%\2c var\(--card\)\)\] { background-color: color-mix(in srgb,var(--primary) 6%,var(--card)); } .bg-\[var\(--accent-muted\)\] { background-color: var(--accent-muted); } .bg-\[var\(--accent-primary\)\] { background-color: var(--accent-primary); } .bg-\[var\(--award-gold-bg\)\] { background-color: var(--award-gold-bg); } .bg-\[var\(--border\)\] { background-color: var(--border); } .bg-\[var\(--card\)\] { background-color: var(--card); } .bg-\[var\(--certificate-bg\)\] { background-color: var(--certificate-bg); } .bg-\[var\(--nav-active-pill\)\] { background-color: var(--nav-active-pill); } .bg-\[var\(--personal-accent\)\] { background-color: var(--personal-accent); } .bg-\[var\(--personal-accent-soft\)\] { background-color: var(--personal-accent-soft); } .bg-\[var\(--tier-\$\{key\.toLowerCase\(\)\}\)\] { background-color: var(--tier-${key.toLowerCase()}); } .bg-accent-primary-soft { background-color: var(--accent-primary-soft); } .bg-background { background-color: var(--background); } .bg-black\/40 { background-color: rgb(0 0 0 / 0.4); } .bg-black\/50 { background-color: rgb(0 0 0 / 0.5); } .bg-border { --tw-bg-opacity: 1; background-color: rgb(var(--border-rgb) / var(--tw-bg-opacity, 1)); } .bg-card { background-color: var(--card); } .bg-current { background-color: currentColor; } .bg-destructive { --tw-bg-opacity: 1; background-color: rgb(var(--destructive-rgb) / var(--tw-bg-opacity, 1)); } .bg-destructive\/10 { background-color: rgb(var(--destructive-rgb) / 0.1); } .bg-foreground { background-color: var(--foreground); } .bg-highlight { --tw-bg-opacity: 1; background-color: color-mix(in srgb, var(--highlight, var(--primary)) calc(var(--tw-bg-opacity, 1) * 100%), transparent); } .bg-highlight\/\[0\.06\] { background-color: color-mix(in srgb, var(--highlight, var(--primary)) calc(0.06 * 100%), transparent); } .bg-muted { --tw-bg-opacity: 1; background-color: rgb(var(--muted-rgb) / var(--tw-bg-opacity, 1)); } .bg-popover { background-color: var(--popover); } .bg-primary { background-color: var(--primary); } .bg-primary-fill { background-color: var(--primary-fill); } .bg-secondary { background-color: var(--secondary); } .bg-tint-destructive-strong { background-color: color-mix(in srgb, var(--destructive) 18%, var(--card)); } .bg-tint-primary { background-color: color-mix(in srgb, var(--primary) 12%, var(--card)); } .bg-tint-primary-strong { background-color: color-mix(in srgb, var(--primary) 18%, var(--card)); } .bg-tint-wash { background-color: color-mix(in srgb, var(--muted) 40%, var(--card)); } .bg-transparent { background-color: transparent; } .bg-white\/20 { background-color: rgb(255 255 255 / 0.2); } .bg-\[linear-gradient\(180deg\2c var\(--card\)\2c var\(--background\)\)\] { background-image: linear-gradient(180deg,var(--card),var(--background)); } .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); } .bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } .from-transparent { --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-white\/10 { --tw-gradient-from: rgb(255 255 255 / 0.1) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-background { --tw-gradient-to: var(--background) var(--tw-gradient-to-position); } .to-black\/25 { --tw-gradient-to: rgb(0 0 0 / 0.25) var(--tw-gradient-to-position); } .to-card { --tw-gradient-to: var(--card) var(--tw-gradient-to-position); } .p-0 { padding: 0px; } .p-1 { padding: 0.25rem; } .p-1\.5 { padding: 0.375rem; } .p-2 { padding: 0.5rem; } .p-2\.5 { padding: 0.625rem; } .p-3 { padding: 0.75rem; } .p-3\.5 { padding: 0.875rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-7 { padding: 1.75rem; } .p-8 { padding: 2rem; } .p-\[3px\] { padding: 3px; } .px-0 { padding-left: 0px; padding-right: 0px; } .px-0\.5 { padding-left: 0.125rem; padding-right: 0.125rem; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; } .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .px-\[0\.3em\] { padding-left: 0.3em; padding-right: 0.3em; } .px-\[22px\] { padding-left: 22px; padding-right: 22px; } .px-\[56px\] { padding-left: 56px; padding-right: 56px; } .px-\[60px\] { padding-left: 60px; padding-right: 60px; } .px-\[64px\] { padding-left: 64px; padding-right: 64px; } .py-0 { padding-top: 0px; padding-bottom: 0px; } .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-\[18px\] { padding-top: 18px; padding-bottom: 18px; } .py-px { padding-top: 1px; padding-bottom: 1px; } .pb-0 { padding-bottom: 0px; } .pb-0\.5 { padding-bottom: 0.125rem; } .pb-1 { padding-bottom: 0.25rem; } .pb-1\.5 { padding-bottom: 0.375rem; } .pb-12 { padding-bottom: 3rem; } .pb-14 { padding-bottom: 3.5rem; } .pb-2 { padding-bottom: 0.5rem; } .pb-2\.5 { padding-bottom: 0.625rem; } .pb-20 { padding-bottom: 5rem; } .pb-3 { padding-bottom: 0.75rem; } .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-7 { padding-bottom: 1.75rem; } .pb-8 { padding-bottom: 2rem; } .pb-\[12vh\] { padding-bottom: 12vh; } .pb-\[44px\] { padding-bottom: 44px; } .pb-\[52px\] { padding-bottom: 52px; } .pb-\[calc\(3\.75rem\+safe-area\)\] { padding-bottom: calc(3.75rem + safe-area); } .pb-\[calc\(6\.5rem\+env\(safe-area-inset-bottom\)\)\] { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); } .pb-\[calc\(8rem\+env\(safe-area-inset-bottom\)\)\] { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); } .pb-\[calc\(var\(--bottom-nav-height\)\+env\(safe-area-inset-bottom\)\)\] { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); } .pb-\[env\(safe-area-inset-bottom\)\] { padding-bottom: env(safe-area-inset-bottom); } .pb-\[inset\] { padding-bottom: inset; } .pb-\[max\(0\.25rem\2c env\(safe-area-inset-bottom\)\)\] { padding-bottom: max(0.25rem, env(safe-area-inset-bottom)); } .pb-\[max\(0\.75rem\2c env\(safe-area-inset-bottom\)\)\] { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); } .pb-\[max\(1rem\2c env\(safe-area-inset-bottom\)\)\] { padding-bottom: max(1rem, env(safe-area-inset-bottom)); } .pb-\[max\(env\(safe-area-inset-bottom\)\2c 1\.25rem\)\] { padding-bottom: max(env(safe-area-inset-bottom), 1.25rem); } .pl-0 { padding-left: 0px; } .pl-12 { padding-left: 3rem; } .pl-2 { padding-left: 0.5rem; } .pl-3 { padding-left: 0.75rem; } .pl-5 { padding-left: 1.25rem; } .pl-\[22px\] { padding-left: 22px; } .pr-0 { padding-right: 0px; } .pr-4 { padding-right: 1rem; } .pt-1 { padding-top: 0.25rem; } .pt-1\.5 { padding-top: 0.375rem; } .pt-14 { padding-top: 3.5rem; } .pt-2 { padding-top: 0.5rem; } .pt-2\.5 { padding-top: 0.625rem; } .pt-3 { padding-top: 0.75rem; } .pt-4 { padding-top: 1rem; } .pt-5 { padding-top: 1.25rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .pt-\[48px\] { padding-top: 48px; } .pt-\[52px\] { padding-top: 52px; } .pt-\[56px\] { padding-top: 56px; } .pt-\[calc\(var\(--header-height\)\+var\(--session-chrome-height\)\)\] { padding-top: calc(var(--header-height) + var(--session-chrome-height)); } .pt-\[env\(safe-area-inset-top\)\] { padding-top: env(safe-area-inset-top); } .pt-\[safe-area-inset\] { padding-top: safe-area-inset; } .pt-\[var\(--header-height\)\] { padding-top: var(--header-height); } .pt-px { padding-top: 1px; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .align-middle { vertical-align: middle; } .font-display { font-family: var(--font-display), serif; } .font-mono { font-family: var(--font-mono), monospace; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-\[0\.78em\] { font-size: 0.78em; } .text-\[10px\] { font-size: 10px; } .text-\[11\.5px\] { font-size: 11.5px; } .text-\[13px\] { font-size: 13px; } .text-\[28px\] { font-size: 28px; } .text-\[34px\] { font-size: 34px; } .text-base { font-size: 16px; line-height: 1.55; } .text-body { font-size: 16px; line-height: 1.55; } .text-body-sm { font-size: 14px; line-height: 1.5; } .text-caption { font-size: 12px; line-height: 1.4; } .text-cta { font-size: 19px; line-height: 1.3; } .text-display { font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; } .text-heading { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; } .text-lg { font-size: 18px; line-height: 1.4; } .text-micro { font-size: 11px; line-height: 1.3; } .text-sm { font-size: 14px; line-height: 1.5; } .text-subheading { font-size: 18px; line-height: 1.4; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-xs { font-size: 12px; line-height: 1.4; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-medium { font-weight: 500; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .normal-case { text-transform: none; } .italic { font-style: italic; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .leading-5 { line-height: 1.25rem; } .leading-\[1\.05\] { line-height: 1.05; } .leading-\[1\.15\] { line-height: 1.15; } .leading-\[1\.1\] { line-height: 1.1; } .leading-none { line-height: 1; } .leading-relaxed { line-height: 1.625; } .leading-snug { line-height: 1.375; } .leading-tight { line-height: 1.25; } .tracking-\[0\.06em\] { letter-spacing: 0.06em; } .tracking-\[0\.09em\] { letter-spacing: 0.09em; } .tracking-\[0\.12em\] { letter-spacing: 0.12em; } .tracking-\[0\.18em\] { letter-spacing: 0.18em; } .tracking-\[0\.1em\] { letter-spacing: 0.1em; } .tracking-\[0\.22em\] { letter-spacing: 0.22em; } .tracking-\[0\.26em\] { letter-spacing: 0.26em; } .tracking-\[0\.3em\] { letter-spacing: 0.3em; } .tracking-normal { letter-spacing: 0em; } .tracking-tight { letter-spacing: -0.025em; } .tracking-wide { letter-spacing: 0.025em; } .tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; } .text-\[color-mix\(in_srgb\2c var\(--foreground\)_78\%\2c var\(--background\)\)\] { color: color-mix(in srgb,var(--foreground) 78%,var(--background)); } .text-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_30\%\2c var\(--background\)\)\] { color: color-mix(in srgb,var(--muted-foreground) 30%,var(--background)); } .text-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_35\%\2c var\(--card\)\)\] { color: color-mix(in srgb,var(--muted-foreground) 35%,var(--card)); } .text-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_50\%\2c var\(--muted\)\)\] { color: color-mix(in srgb,var(--muted-foreground) 50%,var(--muted)); } .text-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_60\%\2c var\(--card\)\)\] { color: color-mix(in srgb,var(--muted-foreground) 60%,var(--card)); } .text-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_70\%\2c var\(--card\)\)\] { color: color-mix(in srgb,var(--muted-foreground) 70%,var(--card)); } .text-\[var\(--accent-lightning\)\] { color: var(--accent-lightning); } .text-\[var\(--accent-lightning-ink\)\] { color: var(--accent-lightning-ink); } .text-\[var\(--accent-primary\)\] { color: var(--accent-primary); } .text-\[var\(--award-gold-text\)\] { color: var(--award-gold-text); } .text-\[var\(--background\)\] { color: var(--background); } .text-\[var\(--certificate-footer-text\)\] { color: var(--certificate-footer-text); } .text-\[var\(--certificate-gold-dark\)\] { color: var(--certificate-gold-dark); } .text-\[var\(--certificate-subtext\)\] { color: var(--certificate-subtext); } .text-\[var\(--certificate-text-muted\)\] { color: var(--certificate-text-muted); } .text-\[var\(--color-success\)\] { color: var(--color-success); } .text-\[var\(--color-warning\)\] { color: var(--color-warning); } .text-\[var\(--destructive\)\] { color: var(--destructive); } .text-\[var\(--personal-accent\)\] { color: var(--personal-accent); } .text-\[var\(--primary\)\] { color: var(--primary); } .text-\[var\(--tier-mastered\)\] { color: var(--tier-mastered); } .text-accent { --tw-text-opacity: 1; color: rgb(var(--muted-rgb) / var(--tw-text-opacity, 1)); } .text-accent-primary { color: var(--accent-primary); } .text-card-foreground { color: var(--card-foreground); } .text-destructive { --tw-text-opacity: 1; color: rgb(var(--destructive-rgb) / var(--tw-text-opacity, 1)); } .text-destructive-foreground { color: var(--destructive-foreground); } .text-foreground { color: var(--foreground); } .text-highlight-foreground { --tw-text-opacity: 1; color: color-mix(in srgb, var(--highlight-foreground, var(--primary-foreground)) calc(var(--tw-text-opacity, 1) * 100%), transparent); } .text-muted-foreground { --tw-text-opacity: 1; color: rgb(var(--muted-foreground-rgb) / var(--tw-text-opacity, 1)); } .text-muted-foreground\/50 { color: rgb(var(--muted-foreground-rgb) / 0.5); } .text-popover-foreground { color: var(--popover-foreground); } .text-primary { color: var(--primary); } .text-primary-fill-ink { color: var(--primary-fill-ink); } .text-primary-foreground { color: var(--primary-foreground); } .text-secondary-foreground { color: var(--secondary-foreground); } .underline { text-decoration-line: underline; } .no-underline { text-decoration-line: none; } .underline-offset-2 { text-underline-offset: 2px; } .underline-offset-4 { text-underline-offset: 4px; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .accent-muted { accent-color: rgb(var(--muted-rgb) / 1); } .accent-primary { accent-color: var(--primary); } .opacity-0 { opacity: 0; } .opacity-100 { opacity: 1; } .opacity-20 { opacity: 0.2; } .opacity-30 { opacity: 0.3; } .opacity-35 { opacity: 0.35; } .opacity-40 { opacity: 0.4; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-75 { opacity: 0.75; } .opacity-80 { opacity: 0.8; } .opacity-85 { opacity: 0.85; } .opacity-90 { opacity: 0.9; } .opacity-\[0\.72\] { opacity: 0.72; } .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_0_14px_color-mix\(in_srgb\2c var\(--tier-mastered\)_22\%\2c transparent\)\] { --tw-shadow: 0 0 14px color-mix(in srgb,var(--tier-mastered) 22%,transparent); --tw-shadow-colored: 0 0 14px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_24px_50px_-24px_color-mix\(in_srgb\2c var\(--accent-primary\)_40\%\2c transparent\)\] { --tw-shadow: 0 24px 50px -24px color-mix(in srgb,var(--accent-primary) 40%,transparent); --tw-shadow-colored: 0 24px 50px -24px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-elevated { --tw-shadow: 0 4px 12px 0 rgba(0,0,0,0.12); --tw-shadow-colored: 0 4px 12px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-none { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-pad { --tw-shadow: 0 -2px 16px rgba(0,0,0,0.08); --tw-shadow-colored: 0 -2px 16px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-subtle { --tw-shadow: 0 1px 3px 0 rgba(0,0,0,0.08); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-xs { --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline-none { outline: 2px solid transparent; outline-offset: 2px; } .outline { outline-style: solid; } .ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-1 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-2 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-4 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-\[color-mix\(in_srgb\2c var\(--accent-primary\)_40\%\2c var\(--card\)\)\] { --tw-ring-color: color-mix(in srgb,var(--accent-primary) 40%,var(--card)); } .ring-\[var\(--accent-primary\)\] { --tw-ring-color: var(--accent-primary); } .ring-\[var\(--foreground\)\] { --tw-ring-color: var(--foreground); } .ring-\[var\(--personal-accent\)\] { --tw-ring-color: var(--personal-accent); } .ring-\[var\(--ring\)\] { --tw-ring-color: var(--ring); } .ring-border { --tw-ring-opacity: 1; --tw-ring-color: rgb(var(--border-rgb) / var(--tw-ring-opacity, 1)); } .ring-border\/60 { --tw-ring-color: rgb(var(--border-rgb) / 0.6); } .ring-card { --tw-ring-color: var(--card); } .ring-foreground { --tw-ring-color: var(--foreground); } .ring-primary { --tw-ring-color: var(--primary); } .ring-transparent { --tw-ring-color: transparent; } .ring-offset-1 { --tw-ring-offset-width: 1px; } .ring-offset-2 { --tw-ring-offset-width: 2px; } .ring-offset-\[var\(--background\)\] { --tw-ring-offset-color: var(--background); } .ring-offset-background { --tw-ring-offset-color: var(--background); } .ring-offset-card { --tw-ring-offset-color: var(--card); } .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); } .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); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[color\2c box-shadow\] { transition-property: color,box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[width\] { transition-property: width; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-100 { transition-duration: 100ms; } .duration-150 { transition-duration: 150ms; } .duration-200 { transition-duration: 200ms; } .duration-300 { transition-duration: 300ms; } .duration-500 { transition-duration: 500ms; } .duration-75 { transition-duration: 75ms; } .ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .\@container\/card-header { container-type: inline-size; container-name: card-header; } @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); } } @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); } } .animate-in { animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .fade-in { --tw-enter-opacity: 0; } .fade-out { --tw-exit-opacity: 0; } .duration-100 { animation-duration: 100ms; } .duration-150 { animation-duration: 150ms; } .duration-200 { animation-duration: 200ms; } .duration-300 { animation-duration: 300ms; } .duration-500 { animation-duration: 500ms; } .duration-75 { animation-duration: 75ms; } .ease-in { animation-timing-function: cubic-bezier(0.4, 0, 1, 1); } .ease-in-out { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-out { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .running { animation-play-state: running; } /* Tailwind v3 shim: shadcn ui/* (generated for Tailwind v4) use the * `outline-hidden` utility, which does not exist in Tailwind v3, so focused * inputs/dialogs fell back to the browser default blue focus ring. Define it. */ .outline-hidden { outline: 2px solid transparent; outline-offset: 2px; } /* The one shared card surface for tiny tiles/rows where is heavy (design-unification §1.5): identical to `bg-card border border-border rounded-xl`, which is why it reads the same --radius-card token the xl utility does (shape-too, 2026-08-02) — a literal 0.75rem here would have made this the one surface that ignores the chosen look. Never hand-roll that chrome ad hoc. */ .card-surface { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); } /* Numina motion vocabulary */ /* chrome: subtle opacity fade for nav/shell elements */ .transition-chrome { transition: opacity 200ms ease-out; } @media (prefers-reduced-motion: reduce) { .transition-chrome { transition: none !important; } } /* smooth: general interactive transitions */ .transition-smooth { transition: color 100ms ease-out, background-color 100ms ease-out, border-color 100ms ease-out, opacity 100ms ease-out, box-shadow 100ms ease-out; } @media (prefers-reduced-motion: reduce) { .transition-smooth { transition: none !important; } } /* theme-transition: expected by the vendored design-system shell (MobileAppShell) — soft cross-fade of surfaces when light/dark mode flips. */ .theme-transition { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; } @media (prefers-reduced-motion: reduce) { .theme-transition { transition: none !important; } } .animate-skeleton-pulse { animation: skeleton-pulse 1.5s ease-in-out infinite; } /* Fixed brand-gold ink — logo + earned-award accents ("gold is earned"). */ .text-accent-gold { color: var(--accent-gold); } /* ── Tier utility classes — used by MyGrowth, tiles, detail panels ─────── */ /* Fill backgrounds (solid) */ .tier-fill-beginner { background-color: var(--tier-beginner) !important; } .tier-fill-intermediate { background-color: var(--tier-intermediate) !important; } .tier-fill-advanced { background-color: var(--tier-advanced) !important; } .tier-fill-mastered { background-color: var(--tier-mastered) !important; } /* Text colours — each stop's WORD form. The per-mode lifts used to live here as two hardcoded `.dark .tier-text-*` hexes; one of them (#74B4B9, a teal) was a leftover from the pre-2026-07-29 ramp and would now have printed "Intermediate" in teal while its own bar was violet. Reading the token instead means a skin re-points fill and word together, or neither. */ .tier-text-beginner { color: var(--tier-beginner-text) !important; } .tier-text-intermediate { color: var(--tier-intermediate-text) !important; } .tier-text-advanced { color: var(--tier-advanced-text) !important; } .tier-text-mastered { color: var(--tier-mastered-text) !important; } /* ── Compact tier badge classes — vivid solid colours, white text ─────── */ .badge-tier-beginner { display: inline-flex; align-items: center; justify-content: center; background-color: var(--tier-beginner) !important; color: var(--tier-beginner-ink) !important; border-radius: 9999px; padding: 0.1em 0.6em; font-size: 0.75rem; font-weight: 600; } .badge-tier-intermediate { display: inline-flex; align-items: center; justify-content: center; background-color: var(--tier-intermediate) !important; color: var(--tier-intermediate-ink) !important; border-radius: 9999px; padding: 0.1em 0.6em; font-size: 0.75rem; font-weight: 600; } .badge-tier-advanced { display: inline-flex; align-items: center; justify-content: center; background-color: var(--tier-advanced) !important; color: var(--tier-advanced-ink) !important; border-radius: 9999px; padding: 0.1em 0.6em; font-size: 0.75rem; font-weight: 600; } .badge-tier-mastered { display: inline-flex; align-items: center; justify-content: center; background-color: var(--tier-mastered) !important; color: var(--tier-mastered-ink) !important; border-radius: 9999px; padding: 0.1em 0.6em; font-size: 0.75rem; font-weight: 600; } /* The two hardcoded `.dark .badge-tier-advanced/mastered { color: #14241F }` overrides are GONE — --tier-*-ink carries the flip for every stop in every skin. They only ever covered 2 of the 4 dark stops; measured, white ink on the dark intermediate fill was 2.97:1, which neither rule caught. */ .badge-status-active { display: inline-flex; align-items: center; border-radius: 9999px; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 14px; line-height: 1.5; font-weight: 600; /* Opaque per no-translucent-fills-on-dark; derives from the live tokens. */ background-color: var(--color-success-soft); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 35%, var(--card)); } .table-header { background-color: var(--table-header-bg); color: var(--table-header-text); border-bottom: 1px solid var(--table-header-border); } .table-row-selected { background-color: var(--table-row-selected); } .table-row-selected:hover { background-color: var(--table-row-selected); } .table-row { min-height: 52px; border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(var(--border-rgb) / var(--tw-border-opacity, 1)); transition: background-color 150ms ease-out; } @media (prefers-reduced-motion: reduce) { .table-row { transition: none !important; } } .table-row:hover { background-color: var(--table-row-hover); } .table-cell-numeric { text-align: right; } .animate-slide-up { animation: slideUp 150ms ease-out forwards; } .question-pulse { animation: questionPulse 50ms ease-out forwards; } .text-accent-dynamic { color: var(--accent-primary); } .bg-accent-dynamic { background-color: var(--accent-primary); } .border-accent-dynamic { border-color: var(--accent-primary); } /* Card shadow — applied to all card surfaces */ /* (Removed: a global .card/.bg-card box-shadow rule silently resurrected shadows on every resting card, undoing the flat-card ruling. Interactive cards opt into shadow-sm at the call site.) */ .session-chrome-practice { --session-accent: var(--session-accent-practice); } .session-chrome-forge { --session-accent: var(--session-accent-forge); } .session-chrome-track-challenge { --session-accent: var(--session-accent-track-challenge); } .session-chrome-numina-master { --session-accent: var(--session-accent-numina-master); } .session-chrome-mixed-practice { --session-accent: var(--session-accent-mixed-practice); } .session-chrome-placement { --session-accent: var(--session-accent-placement); } .session-chrome-benchmark { --session-accent: var(--session-accent-benchmark); } .session-chrome-warmup { --session-accent: var(--session-accent-warmup); } .session-chrome-class-challenge { --session-accent: var(--session-accent-class-challenge); } .session-chrome-weekly-event { --session-accent: var(--session-accent-weekly-event); } .session-background-tint { /* Opaque tint (no alpha on dark): mix the session accent into the page bg. */ background-color: color-mix(in srgb, var(--session-accent) calc(var(--session-chrome-tint-opacity) * 100%), var(--background)); transition: background-color var(--session-chrome-animation-duration) ease-out; } .session-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); background-color: color-mix(in srgb, var(--session-accent) 12%, var(--background)); /* 🚨 2026-08-17: `color: var(--session-accent)` FAILED AA on 57 of 80 skin×mode×type pairs (worst 3.42) — the raw accent has no contract with the ground it sits on. It shipped because the live probe's badge rows were silently DROPPED (oklch beat its rgb parser and nulls weren't counted); contrast.check.mjs measures found-or-fail. The ink now derives from the accent at a mode-appropriate lightness — same hue per session type, contrast bounded by construction. */ color: oklch(from var(--session-accent) 0.44 c h); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; } .dark .session-badge { color: oklch(from var(--session-accent) 0.84 c h); } .\[appearance\:textfield\] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .\[mask-image\:linear-gradient\(to_bottom\2c black_calc\(100\%-28px\)\2c transparent\)\] { -webkit-mask-image: linear-gradient(to bottom,black calc(100% - 28px),transparent); mask-image: linear-gradient(to bottom,black calc(100% - 28px),transparent); } .\[scrollbar-width\:none\] { scrollbar-width: none; } /* ===== Dark mode token overrides ===== */ /* Applied when has class="dark" (manual toggle) or via system preference via the useDarkMode hook. Only semantic + structural tokens need overriding; session chrome / award metallic colours are designed to work on any surface. */ /* ===== PERSONAL ACCENT (design lock 2026-07-16) ============================ */ /* The learner's chosen colour appears ONLY on their avatar ring, streak flame, and progress fills — CHROME NEVER TINTS (buttons/nav/tabs stay the locked mint voltage for every learner). The picker still sets data-accent="" on , but it now drives --personal-accent instead of --accent-primary. Every accent stays a LIGHT/DARK PAIR: deep enough to glow on porcelain, lifted so it pops on the plum room. Keep in sync with ACCENT_COLOURS in hooks/useAccentColour.ts. UNLAYERED on purpose: must override @layer base. */ :root { --accent-pair-blue: #3D6FC2; /* Lime replaced Teal 2026-07-24 (owner): teal sat on top of the mint voltage, so picking it looked like nothing happened. */ --accent-pair-lime: #5C9410; --accent-pair-coral: #E8461F; --accent-pair-magenta: #DB2777; --accent-pair-purple: #8A5FD6; --accent-pair-green: #0D9668; --accent-pair-orange: #EA580C; --accent-pair-red: #DC2626; --personal-accent: var(--accent-pair-blue); /* Derived personal tint — sanctioned homes only (ring/flame/progress). */ --personal-accent-soft: color-mix(in srgb, var(--personal-accent) 14%, var(--card)); } .dark { --accent-pair-blue: #7BA7E8; --accent-pair-lime: #A3E635; --accent-pair-coral: #FF8E7E; --accent-pair-magenta: #FF5CA8; --accent-pair-purple: #B48CF2; --accent-pair-green: #4ADE80; --accent-pair-orange: #FB923C; --accent-pair-red: #F87171; } :root[data-accent="blue"] { --personal-accent: var(--accent-pair-blue); } :root[data-accent="lime"] { --personal-accent: var(--accent-pair-lime); } :root[data-accent="coral"] { --personal-accent: var(--accent-pair-coral); } :root[data-accent="magenta"] { --personal-accent: var(--accent-pair-magenta); } :root[data-accent="purple"] { --personal-accent: var(--accent-pair-purple); } :root[data-accent="green"] { --personal-accent: var(--accent-pair-green); } :root[data-accent="orange"] { --personal-accent: var(--accent-pair-orange); } :root[data-accent="red"] { --personal-accent: var(--accent-pair-red); } /* ═══════════════════════════════════════════════════════════════════════════ SKINS — the look a learner chooses. hooks/useSkin.ts · lib/skins.ts ✅ THE SHIPPING SET IS FOUR AND THE CODE CARRIES FOUR — **Space (DEFAULT) · Arcade · Volt · Berry**. (This banner read "THREE … CARRIES THREE" from 2026-08-08 to 2026-08-16, having missed Berry landing on the same day it was written.) Owner-confirmed 2026-08-16: `numina-play-skin-set-does-not-match-your-verdict-2026-08-16` = `keep-cull`. ⛔ This block used to attribute the set to `numina-play-skin-cull` (2026-08-07, "lets try space arcade and volt") — **an id that never existed in the decision inbox**, contradicting the one that did (`numina-play-skin-set`, 2026-08-01). Cite the 08-16 id; the full account is in `lib/skins.ts`. Two looks were retired in the 08-07 pass — the quiet one and the printed one. Their three CSS blocks each are gone; the earlier four-look and magenta-led transplant notes below are kept only where they still explain a surviving block. 🔁 THE THING THAT ACTUALLY CHANGED, AND IT IS ARCHITECTURAL. The base palette (Porcelain / Twilight Calm, design lock 2026-07-16) used to BE a choice — the quiet look was "the absence of a skin block", which is what made shipping the seam zero-regression. It is now a SUBSTRATE ONLY: all three surviving looks declare a block, so no learner is ever on the bare base. The base is still what the blocks override, and the no-second-copy rule below is therefore MORE load-bearing than before, not less. ⚠ THE BASE MUST NEVER BE RESTATED IN A SKIN BLOCK. Every rule above already expresses the 2026-07-16 lock. A block that repeats those values gives the lock two homes and they WILL drift. `skinShape.check.mjs` gates this. ONE ANATOMY, N PALETTES. A skin re-points only the PRIMITIVE tokens; the ~30 shades that color-mix() against --card follow for free. That is the whole reason a skin costs a CSS block instead of a re-skin of every screen. Since 2026-07-30 the seam also reaches the VERDICT tokens — --color-success, --destructive(-foreground), --color-info and the --fb-* family live in @layer base — so a skin may carry its OWN green (r3 feedback law). Calm still overrides nothing. UNLAYERED on purpose — must beat @layer base, exactly like [data-accent]. Selectors are unprefixed [data-skin="…"] (never :root[data-skin]) so the picker's swatch divs can mount a skin scoped off-page. ═══════════════════════════════════════════════════════════════════════════ */ /* ── ARCADE · light — the NEO rendition: the arcade a family walks into at noon, not the dim one (`numina-play-arcade-rendition` = a, 2026-07-30 — concept liked, previous cream/press-ink rendition replaced IN PLACE; the id stays "arcade" so every stored learner preference remains valid). Candy magenta on near-white; hard rules survive, the murk does not. Values from docs/2026-07-30-NEW-LOOKS-R4.gen.mjs (ARCNEO), tier stops remediated to the shipped tierRamp gate where the board's failed (see scripts/tierRamp.check.mjs row comments). Neo carries its OWN verdict greens — the success/destructive inheritance trap dies here. */ /* ⚖ THE SUNSET TRANSPLANT — `numina-play-arcade-sunset-colourway` = `magenta-led` (owner, 2026-08-02). Sunset is retired as a standalone look and its DRESS moves here: every value in this palette block and the dark one below is lifted from the retired Sunset palette, verbatim. Arcade's ANATOMY is deliberately untouched (see its anatomy block: 10px cabinet edges, mono display face, hairline card shadow) — that is what "Sunset's palette on the Arcade construction" means, and it is why this is a palette edit and not a new skin. ⚠ The magenta LEADS: --accent-primary #D6208C → #C2187A by day, #FF4FD8 → #FF5CA8 after dark. Arcade's own Neo verdict greens are replaced by Sunset's teal success — the verdict family travels WITH the dress, or the feedback bar reads as a different skin from the rest of the screen. ⚠ Tier stops moved too, so scripts/tierRamp.check.mjs's arcade rows were updated in the SAME change: that file MIRRORS this CSS by hand and cannot follow an edit on its own. ⚠ Do not write the retired skin's full attribute selector anywhere in this file's prose. A delete pass that greps for it will match inside the comment, walk back to the comment's start, and take the block BELOW it — which is exactly what happened once while making this change. */ [data-skin="arcade"] { --background: #FBF2EE; --ground-image: linear-gradient(135deg, #FCF6F1 0%, #FBF5F1 45%, #F7F6F3 100%); --card: #FFFFFF; --card-foreground: #2B2140; --foreground: #2B2140; --popover: #F9EDE8; --popover-foreground: #2B2140; --secondary: #F7E9E3; --secondary-foreground: #2B2140; --muted: #F7E9E3; --muted-rgb: 247 233 227; --muted-foreground: #6E6180; --muted-foreground-rgb: 110 97 128; --border: #E5CFC7; --border-rgb: 229 207 199; --input: #F9EDE8; --ring: #C2187A; --ring-rgb: 194 24 122; --accent-primary: #C2187A; --primary-foreground: #FFFFFF; --ink-on-accent: #FFFFFF; --color-success: #0B6E63; --destructive: #C03A20; --destructive-rgb: 192 58 32; --tier-beginner: #91848E; --tier-intermediate: #1E8D9F; /* was #12879A — 4.65 with the near-black ink; ≥5.0 now */ --tier-advanced: #1F6A9E; --tier-mastered: #B02555; --tier-beginner-ink: #0B0A12; --tier-intermediate-ink: #0B0A12; --tier-advanced-ink: #FFFFFF; --tier-mastered-ink: #FFFFFF; --tier-beginner-text: #655A63; --tier-intermediate-text: #0F6F7E; --tier-advanced-text: #1F6A9E; --tier-mastered-text: #B02555; /* Voltage (numina-play-feedback-construction = voltage, 2026-08-02): a skin overrides ONE feedback token — its rose. Everything else (bars, inks, discs, the shared green) inherits the base construction, identical in both modes. ⚠ This value IS this skin's dark --destructive — if that solid ever moves, move this with it and re-run docs/2026-08-02-FEEDBACK-R2.voltage-proof.mjs (deutan was searched against every rose at once). */ --fb-bad-source: #F07E90; } /* ── ARCADE · dark — the same dusk after dark (the transplanted dress) ────── */ [data-skin="arcade"].dark { --background: #1A1130; --ground-image: linear-gradient(135deg, #1C1131 0%, #1A1130 45%, #16172D 100%); --card: #261B41; --card-foreground: #F5EEFA; --foreground: #F5EEFA; --popover: #362A58; --popover-foreground: #F5EEFA; --secondary: #2F2350; --secondary-foreground: #F5EEFA; --muted: #2F2350; --muted-rgb: 47 35 80; --muted-foreground: #B9AACF; --muted-foreground-rgb: 185 170 207; --border: #4C3D6A; --border-rgb: 76 61 106; --input: #2C2149; --ring: #FF5CA8; --ring-rgb: 255 92 168; --accent-primary: #FF5CA8; --primary-foreground: #2A0016; --ink-on-accent: #2A0016; --color-success: #4FD6B8; --destructive: #F07E90; --destructive-rgb: 240 126 144; --tier-beginner: #746B8B; /* board #7D7494 — no passing badge ink there */ --tier-intermediate: #3FC6D4; --tier-advanced: #8FBCFF; /* board #7FB3FF — monotonic ramp */ --tier-mastered: #FFB59B; /* coral rewards — the trio's own law */ --tier-beginner-ink: #FFFFFF; --tier-intermediate-ink: #0B0A12; --tier-advanced-ink: #0B0A12; --tier-mastered-ink: #0B0A12; --tier-beginner-text: #A79DBE; --tier-intermediate-text: #3FC6D4; --tier-advanced-text: #8FBCFF; --tier-mastered-text: #FFB59B; /* --fb-*: none under voltage (numina-play-feedback-construction, 2026-08-02) — bars are mode-independent and the skin's one override (--fb-bad-source, in its unlayered light block) reaches dark too. The old restated-solids cascade trap died WITH the mode split: nothing remains here for an unlayered light value to beat. */ } /* ── ARCADE · anatomy (shared by both modes) ───────────────────────────────── Neo keeps the cabinet's EDGES but rounds them to 10px (the board's claim): square-zero read as severe in the bright rendition. The marquee voice stays mono on DISPLAY type only. ⚠ --font-body is deliberately NOT switched to mono. The board's 11px uppercase mono is dashboard CHROME; applying it to body copy would set every maths question and every sentence of instruction in a monospace face, in an app used by children. The display face carries the cabinet voice; prose stays legible. */ [data-skin="arcade"] { /* The cabinet's edges, rounded to the 10px the board claimed (shape-too). */ --radius-card: 0.625rem; --font-display: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --shadow-card: 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); } /* ── SPACE · light — dawn before launch ────────────────────────────────────── `numina-play-looks-r3` = "space+comic" (owner, 2026-07-30). ⚠ That verdict also carried two looks retired by the 2026-08-07 cull (owner-confirmed 2026-08-16 as `keep-cull`; ⛔ not `numina-play-skin-cull`, which never existed); only Space survives from it. Values from docs/2026-07-30-NEW-LOOKS-R3.gen.mjs (SPACE); tier stops remediated to the shipped gate where the board's failed. */ [data-skin="space"] { --background: #F2F4FC; --card: #FFFFFF; --card-foreground: #232741; --foreground: #232741; --popover: #EDEFF9; --popover-foreground: #232741; --secondary: #E7EAF7; --secondary-foreground: #232741; --muted: #E7EAF7; --muted-rgb: 231 234 247; --muted-foreground: #5C6388; --muted-foreground-rgb: 92 99 136; --border: #C9CEE4; --border-rgb: 201 206 228; --input: #EDEFF9; --ring: #4A56D2; --ring-rgb: 74 86 210; --accent-primary: #4A56D2; --primary-foreground: #FFFFFF; --ink-on-accent: #FFFFFF; --color-success: #0D7268; --destructive: #C03A20; --destructive-rgb: 192 58 32; --tier-beginner: #8A8DA6; --tier-intermediate: #4A56D2; --tier-advanced: #6234C8; /* board #7B5CD6 — adjacent-step + monotonic ramp */ --tier-mastered: #06312F; /* board #0A5350 — deep-space arrival; ΔE-vs-success */ --tier-beginner-ink: #0B0A12; --tier-intermediate-ink: #FFFFFF; --tier-advanced-ink: #FFFFFF; --tier-mastered-ink: #FFFFFF; --tier-beginner-text: #61647E; --tier-intermediate-text: #4A56D2; --tier-advanced-text: #6234C8; --tier-mastered-text: #06312F; /* Voltage (numina-play-feedback-construction = voltage, 2026-08-02): a skin overrides ONE feedback token — its rose. Everything else (bars, inks, discs, the shared green) inherits the base construction, identical in both modes. ⚠ This value IS this skin's dark --destructive — if that solid ever moves, move this with it and re-run docs/2026-08-02-FEEDBACK-R2.voltage-proof.mjs (deutan was searched against every rose at once). */ --fb-bad-source: #F07E90; } /* ── SPACE · dark — deep space; the one look where dark is the hero mode ──── */ [data-skin="space"].dark { --background: #0A0D1F; --card: #151A33; --card-foreground: #EDF0FF; --foreground: #EDF0FF; --popover: #232B4D; --popover-foreground: #EDF0FF; --secondary: #1C2340; --secondary-foreground: #EDF0FF; --muted: #1C2340; --muted-rgb: 28 35 64; --muted-foreground: #A2ABD3; --muted-foreground-rgb: 162 171 211; --border: #2E3760; --border-rgb: 46 55 96; --input: #1A2140; --ring: #8F9DFF; --ring-rgb: 143 157 255; --accent-primary: #8F9DFF; --primary-foreground: #0B0F26; --ink-on-accent: #0B0F26; --color-success: #4FD6B8; --destructive: #F07E90; --destructive-rgb: 240 126 144; --tier-beginner: #676D8F; /* was #6C7396 — 4.64 under white; ≥5.0 now */ --tier-intermediate: #8F9DFF; --tier-advanced: #C9B6FF; /* board #C3B3FF — adjacent-step floor */ --tier-mastered: #FFD76A; /* board #58E0C8 sat ΔE 5 from the success green — two meanings, one colour. Mastery becomes a STAR: gold, the earned hue, and the last step is the biggest by a distance. */ --tier-beginner-ink: #FFFFFF; --tier-intermediate-ink: #0B0A12; --tier-advanced-ink: #0B0A12; --tier-mastered-ink: #0B0A12; --tier-beginner-text: #9BA1BC; --tier-intermediate-text: #8F9DFF; --tier-advanced-text: #C9B6FF; --tier-mastered-text: #FFD76A; /* --fb-*: none under voltage (numina-play-feedback-construction, 2026-08-02) — bars are mode-independent and the skin's one override (--fb-bad-source, in its unlayered light block) reaches dark too. The old restated-solids cascade trap died WITH the mode split: nothing remains here for an unlayered light value to beat. */ } /* ── SPACE · anatomy — cards float: big radius, soft glow, no hard edge ───── */ [data-skin="space"] { /* ⭐ 2026-08-29 — 11px, THE TIGHTEST THE 3px LAW ALLOWS. Owner, twice: the corners are still too rounded. Owner, on being shown a tighter build: "you said you would keep everything — every component and asset within 3px of numina school". Both hold at 11px, and nothing else does: Schools token 12px, Schools entry card 24px (MEASURED on its dev server, /sign-in, not inferred). This card draws calc(token * 2), so the token gap DOUBLES on the biggest corner in the app — which is why `near` (14px) obeyed the law on buttons (14 vs 12 = 2px) and broke it on the card (28 vs 24 = 4px). That doubling is the whole reason it kept reading rounder than Schools however many times the ladder was nudged. At 11px: card 22px vs 24px = 2px · buttons 11 vs 12 = 1px · chips 9 = 9. ⛔ 12px is NOT available — check:shape requires every skin to be a distinct shape from the 0.75rem base, so matching Schools exactly fails the guard. 10px would be 4px out at the card. 11px is the floor. */ --radius-card: 0.6875rem; --shadow-card: 0 4px 16px rgb(0 0 0 / 0.10); } /* ── VOLT ───────────────────────────────────────────────────────────────────── Owner verdict `numina-play-which-looks` = `add-volt` (2026-08-04), note: "lets try space arcade and volt". WHY IT EXISTS. On the walk he said he was not happy with the looks; drawn beside Numina Schools the reason was plain — Schools is institutional (near-white, deep navy) and Play's four were all variations on the same soft daylight palette. For a product whose own landing page promises "mental maths, but a GAME", not one of them read like a game. Volt is the one that does: near-black ground, electric lime voltage, tight corners. ⚠ DARK IS THE HERO, but the light form is not an afterthought — the picker promises every look in both modes, and the light half is the one more likely to be wrong because it cannot be derived from the dark one. Light Volt keeps lime as the VOLTAGE ONLY on a cool near-white, with near-black ink, and uses a DEEPER lime: #B8F135 as text or as a white-ink surface is about 1.5:1 and unreadable. Lime is a surface that carries dark ink, never ink itself. ⚠ ACCENTS: lime and green are EXCLUDED from this skin's personal-accent set — both sit a few ΔE from the voltage, so picking one would look like nothing happened. Same rule the other skins' accent audits already apply; see lib/skins.ts. */ [data-skin="volt"] { /* ⚠ REBUILT 2026-08-07. Owner: "light mode volt looks disgusting" — and it was. The first version darkened the lime to #5C7A16 so it could carry WHITE ink, which turned an electric colour into army green on a sage ground. That was solving the wrong problem: I compromised the HUE instead of changing which token carries it. 🔑 THE FIX IS THAT FILL AND INK ARE SEPARABLE. `--primary` (button fills) defaults to `var(--accent-primary)` but can be overridden independently. 43 places use `--accent-primary` as TEXT, which is what forced the darkening — so that token stays a deep, readable lime, and `--primary` takes the bright electric lime with DARK ink on it. Exactly what the dark form already does: lime is a SURFACE that carries dark ink, never ink itself. Ground lifted off the sage toward near-white so the lime reads as voltage rather than camouflage. */ --background: #F8FAF4; --card: #FFFFFF; --card-foreground: #15180F; --foreground: #15180F; --popover: #F1F4EA; --popover-foreground: #15180F; --secondary: #EAEEE0; --secondary-foreground: #15180F; --muted: #EAEEE0; --muted-rgb: 234 238 224; --muted-foreground: #5A6150; --muted-foreground-rgb: 90 97 80; --border: #D6DCC8; --border-rgb: 214 220 200; --input: #F1F4EA; /* ⭐ VOLUME TURNED DOWN — owner verdict `numina-play-volt-green` = `deep-lime` (2026-08-10), answering his 08-08 note "i am not sure about volt green". Same family, a few steps deeper: apple rather than highlighter, so it stops shouting on a white page. Candidate sheet + 32 measured captures (contrast read off the painted pixels, never the palette file): docs/2026-08-09-VOLT-GREEN/index.html. Only the green moves — ground, ink and the fill/ink split below are exactly as they were. */ --ring: #8FC61F; --ring-rgb: 143 198 31; /* text/icon uses — must stay readable on white (43 sites) */ --accent-primary: #46600F; /* ⭐ THE FILL IS BRIGHT; THE INK IS NOT. Both jobs used to ride --primary, so a lime bright enough to read as voltage made the active nav item 1.34:1 — unreadable — and darkening it to compensate produced the army green the owner called disgusting. --primary-fill (2026-08-07) separates them: the BUTTON gets the electric lime with dark ink on it, exactly as the dark form does, while --primary stays the deep readable lime for the 33 `text-primary` sites. Measured after: CTA 12.5:1, active nav 6.6:1. ⛔ Do not point text at --primary-fill. */ --primary-fill: #8FC61F; --primary-fill-ink: #14210A; /* ⚠ WHITE, not dark. These were flipped to dark ink while --primary was the BRIGHT lime; with the deep lime restored, dark-on-deep-lime measured 2.54:1 — worse than what it replaced. Ink follows the fill it actually sits on. */ --primary-foreground: #FFFFFF; --ink-on-accent: #FFFFFF; --color-success: #0D7268; --destructive: #C03A20; --destructive-rgb: 192 58 32; /* ⚠ SOLVED AGAINST tierRamp.check.mjs, not chosen by eye. Three drafts failed it: the ladder must run monotonically darker, each step >= 18 ΔE, the LAST step the biggest, mastery >= 25 ΔE from the success green, and every rung >= 3:1 on white. Grey-olive -> lime -> deep teal -> deep indigo satisfies all five (L 58/50/34/15, steps 45/50/52). */ --tier-beginner: #888D7A; --tier-intermediate: #5C7A16; --tier-advanced: #1F5A4E; --tier-mastered: #2A1E4A; --tier-beginner-ink: #0B0A12; --tier-intermediate-ink: #FFFFFF; --tier-advanced-ink: #FFFFFF; --tier-mastered-ink: #FFFFFF; --tier-beginner-text: #5F6454; --tier-intermediate-text: #5C7A16; --tier-advanced-text: #1F5A4E; --tier-mastered-text: #2A1E4A; /* One override, like every other skin: this skin's rose. ⚠ It IS this skin's dark --destructive — if that solid moves, move this with it. */ --fb-bad-source: #F58C7A; /* Tight corners — an arcade cabinet, not a pillow. ⚠ --radius-card MUST differ from :root's 0.75rem. The first draft of this block reused 0.75rem and `check:shape` failed it correctly: the picker would have shown Volt as a different shape while every card stayed exactly as it was — a promise the app does not keep. ⭐ LADDER COMPRESSED 2026-08-29 (`numina-play-radius-ladder-vs-schools` = near): volt 0.5625 · arcade 0.625 · forest 0.6875 · ember 0.8125 · space 0.875 · berry 0.875 · reef 0.9375 — 9px to 15px. Numina for Schools sits FLAT at 0.75rem on every screen, and these looks ran up to 1.375rem (22px), so the same card read up to 10px rounder in the consumer app than in the school one. None of these is the base 0.75, which stays a substrate no learner can select. ⚠ Looks MAY share a value (space and berry are both 0.875): the gate compares each look to :root only, never to each other. */ --radius-card: 0.5625rem; --shadow-card: 0 2px 10px rgb(0 0 0 / 0.14); } [data-skin="volt"].dark { --background: #101219; --card: #1A1D27; --card-foreground: #F1F3F6; --foreground: #F1F3F6; --popover: #232733; --popover-foreground: #F1F3F6; --secondary: #202430; --secondary-foreground: #F1F3F6; --muted: #202430; --muted-rgb: 32 36 48; --muted-foreground: #A0A7B6; --muted-foreground-rgb: 160 167 182; --border: #2E3341; --border-rgb: 46 51 65; --input: #1C202B; /* deep-lime, as in the light form above — owner verdict `numina-play-volt-green`. */ --ring: #8FC61F; --ring-rgb: 143 198 31; --accent-primary: #8FC61F; --primary-foreground: #14210A; --ink-on-accent: #14210A; --color-success: #4FD6B8; --destructive: #F58C7A; --destructive-rgb: 245 140 122; --tier-beginner: #676F80; /* was #6E7688 — 4.56 under white; ≥5.0 now */ --tier-intermediate: #B8F135; --tier-advanced: #5FE0A8; /* Mastery is GOLD, not a brighter lime: a ladder that ends in its own voltage has no arrival. Gold is this app's earned hue and sits far from lime. */ --tier-mastered: #FFD76A; --tier-beginner-ink: #FFFFFF; --tier-intermediate-ink: #14210A; --tier-advanced-ink: #0B0A12; --tier-mastered-ink: #0B0A12; --tier-beginner-text: #909578; --tier-intermediate-text: #9CAF5E; --tier-advanced-text: #B9D967; --tier-mastered-text: #FFE9A0; } /* ── BERRY ──────────────────────────────────────────────────────────────────── The fourth look, added 2026-08-08 for the youngest learners — the ONE the under-13 band lands on (lib/ageBand.ts `skinForBand`). WHY IT EXISTS. The 2026-08-07 cull left three looks, and the previous under-13 default was one of the two it retired. That default had been argued explicitly AGAINST Arcade ("marquee, lamps and HARD RULES" — a lives-and- streaks cabinet is the wrong first impression for a six-year-old), so the cull forced a pick nobody had chosen on the merits. This restores a friendly bright look and gives that band a real answer again. ⚠ THE HUE WAS COMPUTED, NOT PICKED. Three hue families are RESERVED as meanings in this app — green = correct, gold = earned, rose = wrong — and three more were already voltages (indigo · magenta · lime). Scoring every candidate by ΔE00 against all six put the friendly-looking warm options out of reach: coral lands 2.6 from the "wrong" rose and orange 9.3, while teal sits 1.8 from the success green and turquoise 9.7. A child would be reading the chrome as a verdict. Violet was the only bright, child-legible family with real clearance (40.6 from the nearest reserved meaning). Its one cost is sitting 8.1 from Space's indigo — acceptable, because two looks are never on screen together outside the picker swatches, and the two differ sharply in everything else: Space is dark-hero and cool at 1.25rem; this is light-first, warm-tinted and the roundest thing in the set. ⚠ THE TIER LADDER IS A FITTED SOLUTION, NOT A PALETTE SOMEONE LIKED. The gate in scripts/tierRamp.check.mjs demands: every stop >= 3:1 on its card, adjacent stops >= dE 18, the LAST step strictly the biggest, lightness monotonic, and mastered >= dE 25 from the success green. Inside one hue family those fight each other — three steps of >=18 plus a bigger fourth barely fits the ~62 points of lightness available above the 3:1 floor. Rotating Space's proven ladder into violet does NOT work (it collapses the indigo->violet hue step to dE 8), so these stops were solved against the gate's own maths. Light steps 21.8 / 20.4 / 23.3 · dark 21.5 / 21.0 / 62.7. Mastery ends in GOLD in the dark form, the same arrival Volt uses: a ladder that ends in its own voltage has no arrival. */ [data-skin="berry"] { --background: #F9F5FD; --card: #FFFFFF; --card-foreground: #241B33; --foreground: #241B33; --popover: #F3EDFA; --popover-foreground: #241B33; --secondary: #EFE7F8; --secondary-foreground: #241B33; --muted: #EFE7F8; --muted-rgb: 239 231 248; --muted-foreground: #665A7A; --muted-foreground-rgb: 102 90 122; --border: #DCCDEC; --border-rgb: 220 205 236; --input: #F3EDFA; --ring: #8C31B9; --ring-rgb: 140 49 185; --accent-primary: #8C31B9; --primary-foreground: #FFFFFF; --ink-on-accent: #FFFFFF; --color-success: #0E7A5E; --destructive: #C03A20; --destructive-rgb: 192 58 32; --tier-beginner: #9372AC; --tier-intermediate: #8C31B9; --tier-advanced: #4F1763; --tier-mastered: #0D050F; --tier-beginner-ink: #0B0A12; --tier-intermediate-ink: #FFFFFF; --tier-advanced-ink: #FFFFFF; --tier-mastered-ink: #FFFFFF; --tier-beginner-text: #6E5A82; --tier-intermediate-text: #8C31B9; --tier-advanced-text: #4F1763; --tier-mastered-text: #0D050F; /* Voltage (numina-play-feedback-construction = voltage): a skin overrides ONE feedback token — its rose. This value IS this skin's dark --destructive; if that solid ever moves, move this with it. */ --fb-bad-source: #F07E90; } [data-skin="berry"].dark { --background: #15102A; --card: #221B3D; --card-foreground: #F2EDFB; --foreground: #F2EDFB; --popover: #2A2249; --popover-foreground: #F2EDFB; --secondary: #2A2249; --secondary-foreground: #F2EDFB; --muted: #2A2249; --muted-rgb: 42 34 73; --muted-foreground: #A79BC2; --muted-foreground-rgb: 167 155 194; --border: #3A3059; --border-rgb: 58 48 89; --input: #1E1836; --ring: #C591F3; --ring-rgb: 197 145 243; --accent-primary: #C591F3; --primary-foreground: #1E0733; --ink-on-accent: #1E0733; --color-success: #57DCA8; --destructive: #F07E90; --destructive-rgb: 240 126 144; --tier-beginner: #78639C; --tier-intermediate: #8E49DD; /* was #944CE6 — 4.73 under white; ≥5.0 now */ --tier-advanced: #C591F3; /* Gold arrival — see the block header. */ --tier-mastered: #FFC94D; --tier-beginner-ink: #FFFFFF; --tier-intermediate-ink: #FFFFFF; --tier-advanced-ink: #0B0A12; --tier-mastered-ink: #0B0A12; --tier-beginner-text: #A99BC6; --tier-intermediate-text: #B98CF5; --tier-advanced-text: #D4AAF8; --tier-mastered-text: #FFE09A; } [data-skin="berry"] { /* ⚠ 1.75rem UNTIL 2026-08-27. Owner verdict `numina-play-berry-radius-2026-08-26` = n20: Berry's cards come down to 20px and match Space. His note on the option he did NOT take says why — "i think the cards are too rounded" — so the rejected `cap` treatment, which kept the cards at 28px and only stopped small things becoming pills, answered the wrong half of the complaint. ⭐ 28px was never reviewed: it entered the repo 2026-08-20 and no render of the `one` board ever drew it, so `one` promoted it from "the card radius" to "THE radius" unseen. At 28px a box shorter than 2× the radius keeps no flat edge at all — on the phone Practice screen both 56px rail rows and all three 36px icon tiles measured 0px of straight side. Berry is now shape-identical to Space and carries its colour and shadow alone; the option text said so and he chose it knowing that. radius-card MUST still differ from :root's 0.75rem, or `check:shape` fails it correctly — the picker would promise a shape change that never happens. ⛔ The gate compares each look to :root ONLY; it has never required looks to differ from EACH OTHER, and the older wording here claimed it did — which is exactly what lets berry keep sharing space's number through the 2026-08-29 compression (`numina-play-radius-ladder-vs-schools` = near). Both are now 0.875rem/14px; the full ladder is written out in the volt block. */ --radius-card: 0.875rem; --shadow-card: 0 6px 20px rgb(60 20 90 / 0.10); } /* ⛔ NO-DOT-PROGRESS LAW — 2026-08-01, standing, applies to EVERY skin ─────── The owner rejected bead / dot / notch progress rows THREE times; on 2026-08-01 it stopped being a per-board preference and became a law of this app. Progress is ONE plain rounded pill: a rounded-full track (var(--muted)) with a rounded-full fill, nothing else. No beads, no dots, no ticks, no notches, no segments, no repeating-linear-gradient, no mask / -webkit-mask, and no ::before / ::after on any progress element or its indicator. Sunset's ten-notch ::after used to live here — it shipped rec (d) of `numina-play-sunset-progress`, a call the owner then RETIRED unanswered (2026-08-01, "skipped deliberately"; moot after `numina-play-skin-set` = four-no-sunset). It is deleted, not commented out. Every skin now inherits the base pill from components/ui/progress.tsx — that is the compliant form. Gated by scripts/progressBarLaw.check.mjs (npm run check:bar), which parses THIS file. If you are about to add a progress construction here, the gate will stop you, and it is right to. */ /* Sheen finish DELETED (design lock: flat fills everywhere; the owner rejected the gloss). The only rich finish left in the system is medal metal. */ /* ===== Active session per-type visual signatures ===== */ /* ── Accent bar animations for non-practice sessions ── */ @keyframes accent-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Blinking caret for the pad-driven answer box (readOnly inputs show no caret) */ @keyframes pad-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .pad-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; border-radius: 1px; background: var(--primary); vertical-align: middle; animation: pad-caret-blink 1.06s steps(1, end) infinite; } @media (prefers-reduced-motion: reduce) { .pad-caret { animation: none; opacity: 1; } } @keyframes accent-slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @keyframes elite-flash { 0% { background-color: var(--accent-lightning-tint); } 20% { background-color: var(--accent-lightning-flash); } 80% { background-color: var(--accent-lightning-flash); } 100% { background-color: var(--accent-lightning-tint); } } .elite-flash { animation: elite-flash 0.5s ease-out; } .elite-bolt-icon { animation: bolt-pop 0.5s ease-out; } @media (prefers-reduced-motion: reduce) { .elite-flash { animation: none !important; } .elite-bolt-icon { animation: none !important; } } /* Cut Down's refusal shake — the fraction visibly refuses to move when a divisor only divides one side (the misconception the skill exists to catch). ⚠ The component used to reference `question-pulse`, which exists only as a CLASS (the keyframes are camelCase `questionPulse`) — so the shake resolved to nothing and the teaching moment was dead (audit 08-10). Horizontal on purpose: a refusal reads sideways; a pulse reads like feedback. */ @keyframes cut-refuse { 0%, 100% { transform: translateX(0); } 16% { transform: translateX(-4px); } 33% { transform: translateX(4px); } 50% { transform: translateX(-4px); } 66% { transform: translateX(4px); } 83% { transform: translateX(-2px); } } @keyframes bolt-pop { 0% { transform: scale(0.6); opacity: 0; } 30% { transform: scale(1.2); opacity: 1; } 60% { transform: scale(1.0); opacity: 1; } 100% { transform: scale(1.0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .accent-bar { animation: none !important; } } * { --tw-border-opacity: 1; border-color: rgb(var(--border-rgb) / var(--tw-border-opacity, 1)); } body { background-color: var(--background); /* Sunset's whisper-sky ground (none everywhere else) — the app shells are bg-transparent so this layer shows through; see --ground-image. */ background-image: var(--ground-image); color: var(--foreground); font-family: "Plus Jakarta Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: auto; } /* Reduced motion: zero out all transitions and animations */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .animate-skeleton-pulse { animation: none !important; } .animate-slide-up { animation: none !important; } .question-pulse { animation: none !important; } } /* ─── Keyframes — top level (not inside @layer) ─────────────────────────── */ @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes questionPulse { from { opacity: 0.6; } to { opacity: 1; } } /* ─── Print styles — top level (not inside @layer) ───────────────────────── */ /* Default: track & challenge certs print landscape */ /* @page rule removed — Biome CSS parser does not support it. Modern browsers have reasonable print defaults for A4. If precise margins are needed, use a print stylesheet with @media print { body { margin: 15mm; } } or configure the print dialog. */ /* ─── Reduced motion — top level (not inside @layer) ────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } [data-slot="progress-indicator"] { min-width: 6px; } [data-radix-switch-root][data-state="checked"], button[role="switch"][data-state="checked"], [data-slot="switch"][data-state="checked"] { background-color: var(--accent-primary) !important; } /* ─── Print / Save as PDF ────────────────────────────────────────────────── */ @media print { @page { size: A4 portrait; margin: 20mm; } /* ⚠ THIS USED TO PRINT A BLANK PAGE, AND HAD DONE SINCE IT WAS WRITTEN. The rule here was `body > * { display: none !important }` — written for a plain HTML page, where hiding body's children hides the page furniture and leaves the thing you want. This app is a single-root SPA: index.html has exactly ONE body child, `
`, and the entire app — including .certificate-print-root — renders inside it. So the rule hid the whole document, and `display: revert` on the print root could not bring it back: a descendant of a display:none ancestor is not rendered at all, at any specificity. Every "Save as PDF" on a child's certificate produced an empty sheet. (Found 2026-08-10 by reading the ancestor chain, not the stylesheet.) The cure is `visibility`, not `display`. visibility IS inherited but CAN be turned back on by a descendant, so hiding everything and re-showing the certificate subtree actually works through the #root wrapper. The print root is already position:fixed below, so the hidden-but-laid-out boxes around it cost nothing. */ body * { visibility: hidden !important; } /* Show only the certificate print root and its children */ .certificate-print-root, .certificate-print-root * { visibility: visible !important; } /* Ensure the print root is the only thing visible */ body { background: white !important; margin: 0 !important; padding: 0 !important; } /* Isolate the certificate card. ⚠ padding is 0 ON PURPOSE — @page already carries the 20mm margin. The old 20mm here STACKED on it, so the printable width was 130mm (~491px) and the 680px-design card printed squeezed. One margin, owned by @page. */ .certificate-print-root { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; box-sizing: border-box !important; } /* The same A4 sheet from EVERY entry width (the owner's "certificate A4, both widths"). The card is pinned to the paper (170mm = 210mm − 2×20mm), not to the viewport, so a phone-width Share-print and a desktop Save-as-PDF produce byte-identical layout. max-width:none because the screen rule caps at 620–680px ≈ under 170mm and would re-shrink it. */ .certificate-card { box-shadow: none !important; border: none !important; page-break-inside: avoid !important; -moz-column-break-inside: avoid !important; break-inside: avoid !important; width: 170mm !important; max-width: none !important; margin: 0 auto !important; } /* An A4 certificate is a DOCUMENT — its cream ground, track bar and gold chips are the design. Browsers strip backgrounds when printing unless told otherwise, which turned the sheet into bare black-on-white. */ .certificate-print-root, .certificate-print-root * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Hide the print actions button bar */ .no-print { display: none !important; } } /* ── Role-based Today page ─────────────────────────────────────────────── */ .streak-recovery-banner { background: var(--card); border-left: 3px solid var(--muted-foreground); border-radius: 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0; padding: 12px 16px; } @keyframes spinner-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spinner { animation: spinner-rotate 1.2s linear infinite; } @media (prefers-reduced-motion: reduce) { .animate-spinner { animation: none !important; } } .session-chrome-header-badge { /* Opaque tint (was an alpha wash — no-translucent-fills-on-dark); same formula as .session-badge — including the 2026-08-17 mode-aware ink (see there). */ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); background-color: color-mix(in srgb, var(--session-accent) 12%, var(--background)); color: oklch(from var(--session-accent) 0.44 c h); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; } .dark .session-chrome-header-badge { color: oklch(from var(--session-accent) 0.84 c h); } .session-chrome-exercise-label { font-size: 14px; font-weight: 500; color: var(--foreground); line-height: 1.3; } .session-chrome-progress-bar { height: 2px; width: 100%; background-color: var(--muted); border-radius: var(--radius-full); overflow: hidden; } .session-chrome-progress-fill { height: 100%; background-color: var(--session-accent); transition: width var(--duration-progress) var(--easing-decelerate); min-width: 2px; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .numina-master-glow { box-shadow: 0 0 40px color-mix(in oklch, var(--session-numina-accent) 25%, transparent); } /* ── Medal metal utilities ───────────────────────────────────────────────── Physical-metal chips + coins. Metal is metal — identical treatment in light and dark (the gradients are literal metal, not theme tokens). Glow shadows on coins are emitted light, not a surface fill, so they are allowed on dark. */ /* CHIP — inline tier pill */ .medal-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; } .medal-chip svg { width: 14px; height: 14px; } .medal-chip-gold { background: linear-gradient(150deg, #FFE79A 0%, #FFC61A 52%, #E09600 100%); /* Inks deepened 2026-08-17 (owner: "the medal and the tick have contrast issues", measured: gold 4.74 · silver 4.43 · bronze 2.78 on the worst gradient stop). The METAL is untouched — only the engraved ink goes deeper. */ color: #412F00; } .medal-chip-silver { background: linear-gradient(150deg, #F7F9FC 0%, #C9CFDB 52%, #9BA2B2 100%); color: #292E3D; } .medal-chip-bronze { /* Bronze alone could not pass by ink: pure black on the old #A75D24 end stop is 4.23. The end stop lifts one shade (kept warm) so a deep ink clears 4.6. */ background: linear-gradient(150deg, #F3BE86 0%, #D67E33 52%, #B06D3A 100%); color: #180D04; } /* COIN — medallion. Default 44px; size hook via --medal-coin-size. */ .medal-coin { width: var(--medal-coin-size, 44px); height: var(--medal-coin-size, 44px); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .medal-coin-gold { background: radial-gradient(circle at 34% 28%, #FFF3BE 0%, #FFC824 50%, #C98A00 100%); border: 2px solid #FFE488; box-shadow: 0 0 16px rgba(255, 200, 0, 0.5); color: #3F2C00; } .medal-coin-silver { background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #CDD3DF 52%, #969DAD 100%); border: 2px solid #E6EAF2; box-shadow: 0 0 14px rgba(205, 211, 223, 0.4); color: #2E3442; } .medal-coin-bronze { background: radial-gradient(circle at 34% 28%, #F8CF9E 0%, #D67E33 52%, #A66431 100%); border: 2px solid #F0B074; box-shadow: 0 0 15px rgba(214, 126, 51, 0.46); color: #1A0F06; } /* ═══ EMBER — added 2026-08-27 ═══════════════════════════════════════ Owner: "just give more colors/themes". Nothing in the set was warm. The four looks sat at 79 / 235 / 280 / 325 degrees — lime, indigo, purple, magenta — so the entire warm half of the wheel was empty and every look read cool. Every value below was SOLVED against the gate floors, not picked by eye: --accent-primary is walked down in lightness until it clears 4.5:1 on the card (it is TEXT in 43 places, which is what forced Volt's fill/ink split), and --muted-foreground until it clears 4.5:1 on BOTH the card and the ground. ⛔ Do not hand-edit a hex here without re-running check:contrast and check:fb — both now read lib/skins.ts, so this look IS covered (it was not before today: they carried literal four-item arrays that would have skipped it silently). */ [data-skin="ember"] { --background: #FBF8F6; --card: #FFFFFF; --card-foreground: #30221A; --foreground: #30221A; --popover: #F8F2EF; --popover-foreground: #30221A; --secondary: #F4EDE9; --secondary-foreground: #30221A; --muted: #F4EDE9; --muted-rgb: 244 237 233; --muted-foreground: #856B5B; --muted-foreground-rgb: 133 107 91; --border: #E7DAD2; --border-rgb: 231 218 210; --input: #F8F2EF; --ring: #BA581E; --ring-rgb: 186 88 30; --accent-primary: #BA581E; --primary-foreground: #FFFFFF; --ink-on-accent: #FFFFFF; --color-success: #0E7A5E; --destructive: #C03A20; --destructive-rgb: 192 58 32; --tier-beginner: #887063; --tier-intermediate: #BA581E; --tier-advanced: #643114; --tier-mastered: #140D08; --tier-beginner-ink: #FFFFFF; --tier-intermediate-ink: #FFFFFF; --tier-advanced-ink: #FFFFFF; --tier-mastered-ink: #FFFFFF; --tier-beginner-text: #887063; --tier-intermediate-text: #BA581E; --tier-advanced-text: #643114; --tier-mastered-text: #140D08; --fb-bad-source: #F07E90; } /* Ember — dark form. */ [data-skin="ember"].dark { --background: #19110D; --card: #261B15; --card-foreground: #F5F3F2; --foreground: #F5F3F2; --popover: #261B15; --popover-foreground: #F5F3F2; --secondary: #382A22; --secondary-foreground: #F5F3F2; --muted: #382A22; --muted-rgb: 56 42 34; --muted-foreground: #BFAFA6; --muted-foreground-rgb: 191 175 166; --border: #4C3B31; --border-rgb: 76 59 49; --input: #382A22; --ring: #EB9D70; --ring-rgb: 235 157 112; --accent-primary: #EB9D70; --primary-foreground: #0B0A12; --ink-on-accent: #0B0A12; --color-success: #3FD9A4; --destructive: #FF7A5C; --destructive-rgb: 255 122 92; --tier-beginner: #A58673; --tier-intermediate: #EB9D70; --tier-advanced: #EBC4AD; --tier-mastered: #FAF5F3; --tier-beginner-ink: #0B0A12; --tier-intermediate-ink: #0B0A12; --tier-advanced-ink: #0B0A12; --tier-mastered-ink: #0B0A12; --tier-beginner-text: #A58673; --tier-intermediate-text: #EB9D70; --tier-advanced-text: #EBC4AD; --tier-mastered-text: #FAF5F3; } /* Ember — its own shape. Must differ from :root's 0.75rem or check:shape fails it: the picker would promise a change that never happens. */ [data-skin="ember"] { --radius-card: 0.8125rem; --shadow-card: 0 4px 14px rgb(90 40 10 / 0.10); } /* ═══ FOREST — added 2026-08-27 ═══════════════════════════════════════ Owner: "just give more colors/themes". The largest remaining gap once Ember and Reef were placed: 79 to 190 degrees, with nothing in it. Deep green, deliberately not Volt's lime — 61 degrees apart and a different job (Volt is voltage, Forest is calm). Every value below was SOLVED against the gate floors, not picked by eye: --accent-primary is walked down in lightness until it clears 4.5:1 on the card (it is TEXT in 43 places, which is what forced Volt's fill/ink split), and --muted-foreground until it clears 4.5:1 on BOTH the card and the ground. ⛔ Do not hand-edit a hex here without re-running check:contrast and check:fb — both now read lib/skins.ts, so this look IS covered (it was not before today: they carried literal four-item arrays that would have skipped it silently). */ [data-skin="forest"] { --background: #F6FBF8; --card: #FFFFFF; --card-foreground: #1B2F22; --foreground: #1B2F22; --popover: #F0F7F2; --popover-foreground: #1B2F22; --secondary: #EAF3ED; --secondary-foreground: #1B2F22; --muted: #EAF3ED; --muted-rgb: 234 243 237; --muted-foreground: #567661; --muted-foreground-rgb: 86 118 97; --border: #D4E6DA; --border-rgb: 212 230 218; --input: #F0F7F2; --ring: #1F8642; --ring-rgb: 31 134 66; --accent-primary: #1F8642; --primary-foreground: #FFFFFF; --ink-on-accent: #FFFFFF; --color-success: #0E7A5E; --destructive: #C03A20; --destructive-rgb: 192 58 32; --tier-beginner: #5E7B67; --tier-intermediate: #1F8642; --tier-advanced: #1A5E31; --tier-mastered: #09130C; --tier-beginner-ink: #FFFFFF; --tier-intermediate-ink: #FFFFFF; --tier-advanced-ink: #FFFFFF; --tier-mastered-ink: #FFFFFF; --tier-beginner-text: #5E7B67; --tier-intermediate-text: #1F8642; --tier-advanced-text: #1A5E31; --tier-mastered-text: #09130C; --fb-bad-source: #F07E90; } /* Forest — dark form. */ [data-skin="forest"].dark { --background: #0E1811; --card: #16251B; --card-foreground: #F2F5F3; --foreground: #F2F5F3; --popover: #16251B; --popover-foreground: #F2F5F3; --secondary: #233629; --secondary-foreground: #F2F5F3; --muted: #233629; --muted-rgb: 35 54 41; --muted-foreground: #A8BDAF; --muted-foreground-rgb: 168 189 175; --border: #334A3B; --border-rgb: 51 74 59; --input: #233629; --ring: #78E39C; --ring-rgb: 120 227 156; --accent-primary: #78E39C; --primary-foreground: #0B0A12; --ink-on-accent: #0B0A12; --color-success: #3FD9A4; --destructive: #FF7A5C; --destructive-rgb: 255 122 92; --tier-beginner: #77A285; --tier-intermediate: #78E39C; --tier-advanced: #B1E7C3; --tier-mastered: #F3F9F5; --tier-beginner-ink: #0B0A12; --tier-intermediate-ink: #0B0A12; --tier-advanced-ink: #0B0A12; --tier-mastered-ink: #0B0A12; --tier-beginner-text: #77A285; --tier-intermediate-text: #78E39C; --tier-advanced-text: #B1E7C3; --tier-mastered-text: #F3F9F5; } /* Forest — its own shape. Must differ from :root's 0.75rem or check:shape fails it: the picker would promise a change that never happens. */ [data-skin="forest"] { --radius-card: 0.6875rem; --shadow-card: 0 3px 12px rgb(15 60 35 / 0.10); } /* ═══ REEF — added 2026-08-27 ═══════════════════════════════════════ Owner: "just give more colors/themes". The teal/cyan range was empty. Sits 45 degrees off Space's indigo and reads as a different family entirely — cyan against blue-violet, on a pale aqua ground rather than Space's cool white. Every value below was SOLVED against the gate floors, not picked by eye: --accent-primary is walked down in lightness until it clears 4.5:1 on the card (it is TEXT in 43 places, which is what forced Volt's fill/ink split), and --muted-foreground until it clears 4.5:1 on BOTH the card and the ground. ⛔ Do not hand-edit a hex here without re-running check:contrast and check:fb — both now read lib/skins.ts, so this look IS covered (it was not before today: they carried literal four-item arrays that would have skipped it silently). */ [data-skin="reef"] { --background: #F6FAFB; --card: #FFFFFF; --card-foreground: #1A2C30; --foreground: #1A2C30; --popover: #F0F6F8; --popover-foreground: #1A2C30; --secondary: #E9F2F4; --secondary-foreground: #1A2C30; --muted: #E9F2F4; --muted-rgb: 233 242 244; --muted-foreground: #56757C; --muted-foreground-rgb: 86 117 124; --border: #D2E3E7; --border-rgb: 210 227 231; --input: #F0F6F8; --ring: #1A7F93; --ring-rgb: 26 127 147; --accent-primary: #1A7F93; --primary-foreground: #FFFFFF; --ink-on-accent: #FFFFFF; --color-success: #0E7A5E; --destructive: #C03A20; --destructive-rgb: 192 58 32; --tier-beginner: #5D797F; --tier-intermediate: #1A7F93; --tier-advanced: #155663; --tier-mastered: #091213; --tier-beginner-ink: #FFFFFF; --tier-intermediate-ink: #FFFFFF; --tier-advanced-ink: #FFFFFF; --tier-mastered-ink: #FFFFFF; --tier-beginner-text: #5D797F; --tier-intermediate-text: #1A7F93; --tier-advanced-text: #155663; --tier-mastered-text: #091213; --fb-bad-source: #F07E90; } /* Reef — dark form. */ [data-skin="reef"].dark { --background: #0D1719; --card: #152326; --card-foreground: #F2F4F5; --foreground: #F2F4F5; --popover: #152326; --popover-foreground: #F2F4F5; --secondary: #223437; --secondary-foreground: #F2F4F5; --muted: #223437; --muted-rgb: 34 52 55; --muted-foreground: #A7BABE; --muted-foreground-rgb: 167 186 190; --border: #31474C; --border-rgb: 49 71 76; --input: #223437; --ring: #71D5E9; --ring-rgb: 113 213 233; --accent-primary: #71D5E9; --primary-foreground: #0B0A12; --ink-on-accent: #0B0A12; --color-success: #3FD9A4; --destructive: #FF7A5C; --destructive-rgb: 255 122 92; --tier-beginner: #749CA4; --tier-intermediate: #71D5E9; --tier-advanced: #AEE0EA; --tier-mastered: #F3F8FA; --tier-beginner-ink: #0B0A12; --tier-intermediate-ink: #0B0A12; --tier-advanced-ink: #0B0A12; --tier-mastered-ink: #0B0A12; --tier-beginner-text: #749CA4; --tier-intermediate-text: #71D5E9; --tier-advanced-text: #AEE0EA; --tier-mastered-text: #F3F8FA; } /* Reef — its own shape. Must differ from :root's 0.75rem or check:shape fails it: the picker would promise a change that never happens. */ [data-skin="reef"] { --radius-card: 0.9375rem; --shadow-card: 0 5px 18px rgb(10 60 75 / 0.10); } .selection\:bg-primary-fill *::-moz-selection { background-color: var(--primary-fill); } .selection\:bg-primary-fill *::selection { background-color: var(--primary-fill); } .selection\:text-primary-fill-ink *::-moz-selection { color: var(--primary-fill-ink); } .selection\:text-primary-fill-ink *::selection { color: var(--primary-fill-ink); } .selection\:bg-primary-fill::-moz-selection { background-color: var(--primary-fill); } .selection\:bg-primary-fill::selection { background-color: var(--primary-fill); } .selection\:text-primary-fill-ink::-moz-selection { color: var(--primary-fill-ink); } .selection\:text-primary-fill-ink::selection { color: var(--primary-fill-ink); } .file\:inline-flex::file-selector-button { display: inline-flex; } .file\:h-7::file-selector-button { height: 1.75rem; } .file\:border-0::file-selector-button { border-width: 0px; } .file\:bg-transparent::file-selector-button { background-color: transparent; } .file\:text-sm::file-selector-button { font-size: 14px; line-height: 1.5; } .file\:font-medium::file-selector-button { font-weight: 500; } .file\:text-foreground::file-selector-button { color: var(--foreground); } .placeholder\:text-muted-foreground::-moz-placeholder { --tw-text-opacity: 1; color: rgb(var(--muted-foreground-rgb) / var(--tw-text-opacity, 1)); } .placeholder\:text-muted-foreground::placeholder { --tw-text-opacity: 1; color: rgb(var(--muted-foreground-rgb) / var(--tw-text-opacity, 1)); } .placeholder\:text-muted-foreground\/50::-moz-placeholder { color: rgb(var(--muted-foreground-rgb) / 0.5); } .placeholder\:text-muted-foreground\/50::placeholder { color: rgb(var(--muted-foreground-rgb) / 0.5); } .after\:absolute::after { content: var(--tw-content); position: absolute; } .after\:-inset-3\.5::after { content: var(--tw-content); inset: -0.875rem; } .after\:content-\[\'\'\]::after { --tw-content: ''; content: var(--tw-content); } .last\:border-b-0:last-child { border-bottom-width: 0px; } .focus-within\:border-ring:focus-within { --tw-border-opacity: 1; border-color: rgb(var(--ring-rgb) / var(--tw-border-opacity, 1)); } .focus-within\:ring-\[3px\]:focus-within { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-within\:ring-ring\/50:focus-within { --tw-ring-color: rgb(var(--ring-rgb) / 0.5); } .hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:border-\[color-mix\(in_srgb\2c var\(--accent-lightning\)_40\%\2c var\(--border\)\)\]:hover { border-color: color-mix(in srgb,var(--accent-lightning) 40%,var(--border)); } .hover\:border-\[color-mix\(in_srgb\2c var\(--accent-primary\)_40\%\2c var\(--border\)\)\]:hover { border-color: color-mix(in srgb,var(--accent-primary) 40%,var(--border)); } .hover\:border-\[color-mix\(in_srgb\2c var\(--foreground\)_30\%\2c var\(--card\)\)\]:hover { border-color: color-mix(in srgb,var(--foreground) 30%,var(--card)); } .hover\:border-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_40\%\2c var\(--background\)\)\]:hover { border-color: color-mix(in srgb,var(--muted-foreground) 40%,var(--background)); } .hover\:border-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_40\%\2c var\(--card\)\)\]:hover { border-color: color-mix(in srgb,var(--muted-foreground) 40%,var(--card)); } .hover\:border-\[var\(--accent-primary-border\)\]:hover { border-color: var(--accent-primary-border); } .hover\:border-\[var\(--muted-foreground\)\]:hover { border-color: var(--muted-foreground); } .hover\:border-primary:hover { border-color: var(--primary); } .hover\:bg-\[color-mix\(in_srgb\2c var\(--accent-primary\)_10\%\2c var\(--card\)\)\]:hover { background-color: color-mix(in srgb,var(--accent-primary) 10%,var(--card)); } .hover\:bg-\[color-mix\(in_srgb\2c var\(--border\)_30\%\2c var\(--card\)\)\]:hover { background-color: color-mix(in srgb,var(--border) 30%,var(--card)); } .hover\:bg-\[color-mix\(in_srgb\2c var\(--destructive\)_6\%\2c var\(--card\)\)\]:hover { background-color: color-mix(in srgb,var(--destructive) 6%,var(--card)); } .hover\:bg-\[color-mix\(in_srgb\2c var\(--destructive\)_90\%\2c var\(--card\)\)\]:hover { background-color: color-mix(in srgb,var(--destructive) 90%,var(--card)); } .hover\:bg-\[color-mix\(in_srgb\2c var\(--muted\)_40\%\2c var\(--card\)\)\]:hover { background-color: color-mix(in srgb,var(--muted) 40%,var(--card)); } .hover\:bg-\[color-mix\(in_srgb\2c var\(--primary\)_5\%\2c var\(--background\)\)\]:hover { background-color: color-mix(in srgb,var(--primary) 5%,var(--background)); } .hover\:bg-\[color-mix\(in_srgb\2c var\(--primary\)_6\%\2c var\(--card\)\)\]:hover { background-color: color-mix(in srgb,var(--primary) 6%,var(--card)); } .hover\:bg-\[color-mix\(in_srgb\2c var\(--primary-fill\)_90\%\2c var\(--card\)\)\]:hover { background-color: color-mix(in srgb,var(--primary-fill) 90%,var(--card)); } .hover\:bg-\[color-mix\(in_srgb\2c var\(--secondary\)_80\%\2c var\(--card\)\)\]:hover { background-color: color-mix(in srgb,var(--secondary) 80%,var(--card)); } .hover\:bg-\[var\(--nav-active-pill\)\]:hover { background-color: var(--nav-active-pill); } .hover\:bg-accent:hover { --tw-bg-opacity: 1; background-color: rgb(var(--muted-rgb) / var(--tw-bg-opacity, 1)); } .hover\:bg-background:hover { background-color: var(--background); } .hover\:bg-card:hover { background-color: var(--card); } .hover\:bg-destructive:hover { --tw-bg-opacity: 1; background-color: rgb(var(--destructive-rgb) / var(--tw-bg-opacity, 1)); } .hover\:bg-highlight:hover { --tw-bg-opacity: 1; background-color: color-mix(in srgb, var(--highlight, var(--primary)) calc(var(--tw-bg-opacity, 1) * 100%), transparent); } .hover\:bg-muted:hover { --tw-bg-opacity: 1; background-color: rgb(var(--muted-rgb) / var(--tw-bg-opacity, 1)); } .hover\:bg-primary-fill:hover { background-color: var(--primary-fill); } .hover\:bg-tint-wash-strong:hover { background-color: color-mix(in srgb, var(--muted) 65%, var(--card)); } .hover\:bg-transparent:hover { background-color: transparent; } .hover\:text-\[var\(--accent-primary\)\]:hover { color: var(--accent-primary); } .hover\:text-accent-foreground:hover { color: var(--foreground); } .hover\:text-destructive-foreground:hover { color: var(--destructive-foreground); } .hover\:text-foreground:hover { color: var(--foreground); } .hover\:text-muted-foreground:hover { --tw-text-opacity: 1; color: rgb(var(--muted-foreground-rgb) / var(--tw-text-opacity, 1)); } .hover\:text-primary:hover { color: var(--primary); } .hover\:text-primary-fill-ink:hover { color: var(--primary-fill-ink); } .hover\:text-primary-foreground:hover { color: var(--primary-foreground); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:opacity-100:hover { opacity: 1; } .hover\:opacity-75:hover { opacity: 0.75; } .hover\:opacity-80:hover { opacity: 0.8; } .hover\:opacity-90:hover { opacity: 0.9; } .hover\:shadow-\[0_28px_60px_-20px_color-mix\(in_srgb\2c var\(--accent-primary\)_55\%\2c transparent\)\]:hover { --tw-shadow: 0 28px 60px -20px color-mix(in srgb,var(--accent-primary) 55%,transparent); --tw-shadow-colored: 0 28px 60px -20px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:shadow-md:hover { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:ring-2:hover { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .hover\:ring-\[var\(--accent-primary\)\]:hover { --tw-ring-color: var(--accent-primary); } .hover\:brightness-95:hover { --tw-brightness: brightness(.95); 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); } .focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } .focus\:fixed:focus { position: fixed; } .focus\:left-2:focus { left: 0.5rem; } .focus\:top-2:focus { top: 0.5rem; } .focus\:z-\[60\]:focus { z-index: 60; } .focus\:rounded-xl:focus { border-radius: var(--radius-card); } .focus\:bg-card:focus { background-color: var(--card); } .focus\:bg-primary-fill:focus { background-color: var(--primary-fill); } .focus\:px-4:focus { padding-left: 1rem; padding-right: 1rem; } .focus\:py-2:focus { padding-top: 0.5rem; padding-bottom: 0.5rem; } .focus\:text-sm:focus { font-size: 14px; line-height: 1.5; } .focus\:font-medium:focus { font-weight: 500; } .focus\:text-primary-fill-ink:focus { color: var(--primary-fill-ink); } .focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-ring\/50:focus { --tw-ring-color: rgb(var(--ring-rgb) / 0.5); } .focus\:placeholder\:text-transparent:focus::-moz-placeholder { color: transparent; } .focus\:placeholder\:text-transparent:focus::placeholder { color: transparent; } .focus-visible\:not-sr-only:focus-visible { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } .focus-visible\:fixed:focus-visible { position: fixed; } .focus-visible\:left-2:focus-visible { left: 0.5rem; } .focus-visible\:top-2:focus-visible { top: 0.5rem; } .focus-visible\:z-\[60\]:focus-visible { z-index: 60; } .focus-visible\:rounded-xl:focus-visible { border-radius: var(--radius-card); } .focus-visible\:border:focus-visible { border-width: 1px; } .focus-visible\:border-border:focus-visible { --tw-border-opacity: 1; border-color: rgb(var(--border-rgb) / var(--tw-border-opacity, 1)); } .focus-visible\:border-primary:focus-visible { border-color: var(--primary); } .focus-visible\:border-ring:focus-visible { --tw-border-opacity: 1; border-color: rgb(var(--ring-rgb) / var(--tw-border-opacity, 1)); } .focus-visible\:bg-card:focus-visible { background-color: var(--card); } .focus-visible\:px-4:focus-visible { padding-left: 1rem; padding-right: 1rem; } .focus-visible\:py-2:focus-visible { padding-top: 0.5rem; padding-bottom: 0.5rem; } .focus-visible\:text-sm:focus-visible { font-size: 14px; line-height: 1.5; } .focus-visible\:font-medium:focus-visible { font-weight: 500; } .focus-visible\:text-foreground:focus-visible { color: var(--foreground); } .focus-visible\:opacity-100:focus-visible { opacity: 1; } .focus-visible\:shadow-md:focus-visible { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .focus-visible\:shadow-none:focus-visible { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .focus-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; } .focus-visible\:ring-0:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-2:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-\[3px\]:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-inset:focus-visible { --tw-ring-inset: inset; } .focus-visible\:ring-destructive\/20:focus-visible { --tw-ring-color: rgb(var(--destructive-rgb) / 0.2); } .focus-visible\:ring-ring\/50:focus-visible { --tw-ring-color: rgb(var(--ring-rgb) / 0.5); } .focus-visible\:ring-offset-1:focus-visible { --tw-ring-offset-width: 1px; } .focus-visible\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; } .active\:scale-95:active { --tw-scale-x: .95; --tw-scale-y: .95; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .active\:scale-\[0\.99\]:active { --tw-scale-x: 0.99; --tw-scale-y: 0.99; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .active\:border-border:active { --tw-border-opacity: 1; border-color: rgb(var(--border-rgb) / var(--tw-border-opacity, 1)); } .active\:bg-\[color-mix\(in_srgb\2c var\(--border\)_50\%\2c var\(--card\)\)\]:active { background-color: color-mix(in srgb,var(--border) 50%,var(--card)); } .disabled\:pointer-events-none:disabled { pointer-events: none; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:border:disabled { border-width: 1px; } .disabled\:border-border:disabled { --tw-border-opacity: 1; border-color: rgb(var(--border-rgb) / var(--tw-border-opacity, 1)); } .disabled\:bg-muted:disabled { --tw-bg-opacity: 1; background-color: rgb(var(--muted-rgb) / var(--tw-bg-opacity, 1)); } .disabled\:text-muted-foreground:disabled { --tw-text-opacity: 1; color: rgb(var(--muted-foreground-rgb) / var(--tw-text-opacity, 1)); } .disabled\:opacity-100:disabled { opacity: 1; } .disabled\:opacity-30:disabled { opacity: 0.3; } .disabled\:opacity-40:disabled { opacity: 0.4; } .disabled\:opacity-50:disabled { opacity: 0.5; } .group[open] .group-open\:rotate-90 { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .peer:disabled ~ .peer-disabled\:cursor-not-allowed { cursor: not-allowed; } .peer:disabled ~ .peer-disabled\:opacity-50 { opacity: 0.5; } .has-\[\>svg\]\:px-2\.5:has(>svg) { padding-left: 0.625rem; padding-right: 0.625rem; } .has-\[\>svg\]\:px-3:has(>svg) { padding-left: 0.75rem; padding-right: 0.75rem; } .has-\[\>svg\]\:px-4:has(>svg) { padding-left: 1rem; padding-right: 1rem; } .has-\[\>svg\]\:px-5:has(>svg) { padding-left: 1.25rem; padding-right: 1.25rem; } .has-\[\>svg\]\:px-6:has(>svg) { padding-left: 1.5rem; padding-right: 1.5rem; } .data-\[state\=open\]\:animate-in[data-state="open"] { animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .data-\[state\=closed\]\:animate-out[data-state="closed"] { animation-name: exit; animation-duration: 150ms; --tw-exit-opacity: initial; --tw-exit-scale: initial; --tw-exit-rotate: initial; --tw-exit-translate-x: initial; --tw-exit-translate-y: initial; } .data-\[state\=closed\]\:fade-out-0[data-state="closed"] { --tw-exit-opacity: 0; } .data-\[state\=open\]\:fade-in-0[data-state="open"] { --tw-enter-opacity: 0; } .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] { --tw-exit-scale: .95; } .data-\[state\=open\]\:zoom-in-95[data-state="open"] { --tw-enter-scale: .95; } .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] { --tw-enter-translate-y: -0.5rem; } .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] { --tw-enter-translate-x: 0.5rem; } .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] { --tw-enter-translate-x: -0.5rem; } .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] { --tw-enter-translate-y: 0.5rem; } .group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none { pointer-events: none; } .group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 { opacity: 0.5; } @media (prefers-reduced-motion: no-preference) { .motion-safe\:scroll-smooth { scroll-behavior: smooth; } .motion-safe\:duration-200 { transition-duration: 200ms; } .motion-safe\:animate-in { animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .motion-safe\:fade-in { --tw-enter-opacity: 0; } .motion-safe\:slide-in-from-top-1 { --tw-enter-translate-y: -0.25rem; } .motion-safe\:duration-200 { animation-duration: 200ms; } } .dark\:border-input:is(.dark *) { border-color: var(--input); } .dark\:bg-\[color-mix\(in_srgb\2c var\(--destructive\)_60\%\2c var\(--card\)\)\]:is(.dark *) { background-color: color-mix(in srgb,var(--destructive) 60%,var(--card)); } .dark\:bg-\[color-mix\(in_srgb\2c var\(--input\)_30\%\2c var\(--card\)\)\]:is(.dark *) { background-color: color-mix(in srgb,var(--input) 30%,var(--card)); } .dark\:text-\[color-mix\(in_srgb\2c var\(--accent-lightning\)_65\%\2c white\)\]:is(.dark *) { color: color-mix(in srgb,var(--accent-lightning) 65%,white); } .dark\:hover\:bg-\[color-mix\(in_srgb\2c var\(--input\)_50\%\2c var\(--card\)\)\]:hover:is(.dark *) { background-color: color-mix(in srgb,var(--input) 50%,var(--card)); } .dark\:hover\:bg-\[color-mix\(in_srgb\2c var\(--muted\)_60\%\2c var\(--card\)\)\]:hover:is(.dark *) { background-color: color-mix(in srgb,var(--muted) 60%,var(--card)); } .dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *) { --tw-ring-color: rgb(var(--destructive-rgb) / 0.4); } @media not all and (min-width: 1024px) { .max-lg\:hidden { display: none; } } @media not all and (min-width: 768px) { .max-md\:bottom-0 { bottom: 0px; } .max-md\:top-auto { top: auto; } .max-md\:order-1 { order: 1; } .max-md\:order-2 { order: 2; } .max-md\:hidden { display: none; } .max-md\:w-full { width: 100%; } .max-md\:max-w-none { max-width: none; } .max-md\:translate-y-0 { --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .max-md\:rounded-b-none { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .max-md\:rounded-t-2xl { border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); } .max-md\:pb-\[max\(1\.5rem\2c env\(safe-area-inset-bottom\)\)\] { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); } .max-md\:data-\[state\=open\]\:slide-in-from-bottom-4[data-state="open"] { --tw-enter-translate-y: 1rem; } } @media not all and (min-width: 640px) { .max-sm\:data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] { --tw-enter-translate-y: 100%; } } @media (min-width: 640px) { .sm\:inset-x-auto { left: auto; right: auto; } .sm\:bottom-auto { bottom: auto; } .sm\:left-1\/2 { left: 50%; } .sm\:top-1\/2 { top: 50%; } .sm\:order-1 { order: 1; } .sm\:order-2 { order: 2; } .sm\:row-span-2 { grid-row: span 2 / span 2; } .sm\:mx-auto { margin-left: auto; margin-right: auto; } .sm\:mb-10 { margin-bottom: 2.5rem; } .sm\:mb-4 { margin-bottom: 1rem; } .sm\:block { display: block; } .sm\:inline { display: inline; } .sm\:flex { display: flex; } .sm\:inline-flex { display: inline-flex; } .sm\:grid { display: grid; } .sm\:hidden { display: none; } .sm\:h-12 { height: 3rem; } .sm\:h-\[560px\] { height: 560px; } .sm\:h-\[680px\] { height: 680px; } .sm\:h-\[\px\] { height: px; } .sm\:max-h-\[85dvh\] { max-height: 85dvh; } .sm\:max-h-full { max-height: 100%; } .sm\:min-h-\[100dvh\] { min-height: 100dvh; } .sm\:min-h-\[calc\(100dvh-3\.5rem\)\] { min-height: calc(100dvh - 3.5rem); } .sm\:w-32 { width: 8rem; } .sm\:w-\[480px\] { width: 480px; } .sm\:w-\[960px\] { width: 960px; } .sm\:w-\[\px\] { width: px; } .sm\:w-auto { width: auto; } .sm\:w-full { width: 100%; } .sm\:max-w-\[420px\] { max-width: 420px; } .sm\:max-w-full { max-width: 100%; } .sm\:max-w-lg { max-width: 32rem; } .sm\:max-w-md { max-width: 28rem; } .sm\:max-w-sm { max-width: 24rem; } .sm\:-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .sm\:-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .sm\:snap-y { scroll-snap-type: y var(--tw-scroll-snap-strictness); } .sm\:snap-mandatory { --tw-scroll-snap-strictness: mandatory; } .sm\:snap-start { scroll-snap-align: start; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sm\:grid-rows-subgrid { grid-template-rows: subgrid; } .sm\:flex-row { flex-direction: row; } .sm\:items-start { align-items: flex-start; } .sm\:items-center { align-items: center; } .sm\:justify-end { justify-content: flex-end; } .sm\:justify-center { justify-content: center; } .sm\:gap-3 { gap: 0.75rem; } .sm\:gap-6 { gap: 1.5rem; } .sm\:gap-8 { gap: 2rem; } .sm\:rounded-\[calc\(var\(--radius\2c 0\.5rem\)\*2\)\] { border-radius: calc(var(--radius,0.5rem) * 2); } .sm\:rounded-xl { border-radius: var(--radius-card); } .sm\:border { border-width: 1px; } .sm\:border-border { --tw-border-opacity: 1; border-color: rgb(var(--border-rgb) / var(--tw-border-opacity, 1)); } .sm\:p-6 { padding: 1.5rem; } .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; } .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .sm\:px-7 { padding-left: 1.75rem; padding-right: 1.75rem; } .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; } .sm\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem; } .sm\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .sm\:py-8 { padding-top: 2rem; padding-bottom: 2rem; } .sm\:pb-0 { padding-bottom: 0px; } .sm\:pb-8 { padding-bottom: 2rem; } .sm\:pb-9 { padding-bottom: 2.25rem; } .sm\:pt-12 { padding-top: 3rem; } .sm\:text-left { text-align: left; } .sm\:shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .sm\:data-\[state\=open\]\:zoom-in-95[data-state="open"] { --tw-enter-scale: .95; } } @media (min-width: 768px) { .md\:mx-auto { margin-left: auto; margin-right: auto; } .md\:block { display: block; } .md\:inline { display: inline; } .md\:grid { display: grid; } .md\:hidden { display: none; } .md\:h-12 { height: 3rem; } .md\:h-9 { height: 2.25rem; } .md\:min-h-0 { min-height: 0px; } .md\:min-w-0 { min-width: 0px; } .md\:max-w-lg { max-width: 32rem; } .md\:max-w-md { max-width: 28rem; } .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\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; } .md\:grid-rows-\[auto_auto\] { grid-template-rows: auto auto; } .md\:items-start { align-items: flex-start; } .md\:gap-6 { gap: 1.5rem; } .md\:gap-x-4 { -moz-column-gap: 1rem; column-gap: 1rem; } .md\:rounded-t-2xl { border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); } .md\:border-x { border-left-width: 1px; border-right-width: 1px; } .md\:p-12 { padding: 3rem; } .md\:p-4 { padding: 1rem; } .md\:text-sm { font-size: 14px; line-height: 1.5; } .md\:opacity-0 { opacity: 0; } .group:hover .md\:group-hover\:opacity-100 { opacity: 1; } } @media (min-width: 1024px) { .lg\:order-1 { order: 1; } .lg\:order-2 { order: 2; } .lg\:mx-auto { margin-left: auto; margin-right: auto; } .lg\:mb-0 { margin-bottom: 0px; } .lg\:mb-2 { margin-bottom: 0.5rem; } .lg\:ml-2 { margin-left: 0.5rem; } .lg\:mt-0 { margin-top: 0px; } .lg\:mt-6 { margin-top: 1.5rem; } .lg\:block { display: block; } .lg\:flex { display: flex; } .lg\:hidden { display: none; } .lg\:size-10 { width: 2.5rem; height: 2.5rem; } .lg\:h-\[30px\] { height: 30px; } .lg\:h-\[86px\] { height: 86px; } .lg\:h-\[calc\(100dvh-var\(--session-offset\2c 3\.5rem\)\)\] { height: calc(100dvh - var(--session-offset,3.5rem)); } .lg\:h-auto { height: auto; } .lg\:min-h-0 { min-height: 0px; } .lg\:min-h-12 { min-height: 3rem; } .lg\:min-h-9 { min-height: 2.25rem; } .lg\:min-h-\[64px\] { min-height: 64px; } .lg\:min-h-\[92px\] { min-height: 92px; } .lg\:w-\[30px\] { width: 30px; } .lg\:w-auto { width: auto; } .lg\:w-full { width: 100%; } .lg\:max-w-4xl { max-width: 56rem; } .lg\:max-w-\[680px\] { max-width: 680px; } .lg\:max-w-lg { max-width: 32rem; } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lg\:grid-cols-\[1\.1fr_0\.9fr\] { grid-template-columns: 1.1fr 0.9fr; } .lg\:items-center { align-items: center; } .lg\:justify-center { justify-content: center; } .lg\:gap-0 { gap: 0px; } .lg\:gap-12 { gap: 3rem; } .lg\:gap-2 { gap: 0.5rem; } .lg\:gap-3 { gap: 0.75rem; } .lg\:gap-4 { gap: 1rem; } .lg\:space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .lg\:justify-self-end { justify-self: end; } .lg\:border { border-width: 1px; } .lg\:border-t-0 { border-top-width: 0px; } .lg\:border-solid { border-style: solid; } .lg\:bg-muted { --tw-bg-opacity: 1; background-color: rgb(var(--muted-rgb) / var(--tw-bg-opacity, 1)); } .lg\:p-3 { padding: 0.75rem; } .lg\:p-4 { padding: 1rem; } .lg\:p-5 { padding: 1.25rem; } .lg\:px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; } .lg\:px-4 { padding-left: 1rem; padding-right: 1rem; } .lg\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .lg\:py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .lg\:py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .lg\:py-4 { padding-top: 1rem; padding-bottom: 1rem; } .lg\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .lg\:py-8 { padding-top: 2rem; padding-bottom: 2rem; } .lg\:pb-0 { padding-bottom: 0px; } .lg\:pb-8 { padding-bottom: 2rem; } .lg\:pt-0 { padding-top: 0px; } .lg\:pt-4 { padding-top: 1rem; } .lg\:pt-6 { padding-top: 1.5rem; } .lg\:text-body { font-size: 16px; line-height: 1.55; } .lg\:text-subheading { font-size: 18px; line-height: 1.4; } .lg\:shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .lg\:ring-offset-\[var\(--card\)\] { --tw-ring-offset-color: var(--card); } .lg\:card-surface { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); } .lg\:hover\:bg-muted:hover { --tw-bg-opacity: 1; background-color: rgb(var(--muted-rgb) / var(--tw-bg-opacity, 1)); } } @media (min-width: 1280px) { .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (orientation: landscape) { .landscape\:h-11 { height: 2.75rem; } } .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker { display: none; } .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar { display: none; } .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) { padding-right: 0px; } .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] { --tw-translate-y: 2px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .\[\&\>svg\]\:pointer-events-none>svg { pointer-events: none; } .\[\&\>svg\]\:size-3>svg { width: 0.75rem; height: 0.75rem; } .\[\&\>svg\]\:h-auto>svg { height: auto; } .\[\&\>svg\]\:w-full>svg { width: 100%; } .\[\&\>tr\]\:last\:border-b-0:last-child>tr { border-bottom-width: 0px; } .\[\&_a\]\:min-h-12 a { min-height: 3rem; } .\[\&_a\]\:w-full a { width: 100%; } .\[\&_a\]\:text-body a { font-size: 16px; line-height: 1.55; } .\[\&_button\]\:min-h-12 button { min-height: 3rem; } .\[\&_button\]\:w-full button { width: 100%; } .\[\&_button\]\:text-body button { font-size: 16px; line-height: 1.55; } .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) { width: 1rem; height: 1rem; } .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-5 svg:not([class*='size-']) { width: 1.25rem; height: 1.25rem; } .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6 svg:not([class*='size-']) { width: 1.5rem; height: 1.5rem; } .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-auto svg:not([class*='size-']) { width: auto; height: auto; } .\[\&_svg\]\:pointer-events-none svg { pointer-events: none; } .\[\&_svg\]\:size-4 svg { width: 1rem; height: 1rem; } .\[\&_svg\]\:size-5 svg { width: 1.25rem; height: 1.25rem; } .\[\&_svg\]\:size-6 svg { width: 1.5rem; height: 1.5rem; } .\[\&_svg\]\:h-8 svg { height: 2rem; } .\[\&_svg\]\:w-8 svg { width: 2rem; } .\[\&_svg\]\:shrink-0 svg { flex-shrink: 0; } .\[\&_tr\:last-child_td\]\:border-0 tr:last-child td { border-width: 0px; } a.\[a\&\]\:min-h-11 { min-height: 2.75rem; } a.\[a\&\]\:px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; } a.\[a\&\]\:hover\:bg-\[color-mix\(in_srgb\2c var\(--destructive\)_90\%\2c var\(--card\)\)\]:hover { background-color: color-mix(in srgb,var(--destructive) 90%,var(--card)); } a.\[a\&\]\:hover\:bg-\[color-mix\(in_srgb\2c var\(--primary-fill\)_90\%\2c var\(--card\)\)\]:hover { background-color: color-mix(in srgb,var(--primary-fill) 90%,var(--card)); } a.\[a\&\]\:hover\:bg-\[color-mix\(in_srgb\2c var\(--secondary\)_90\%\2c var\(--card\)\)\]:hover { background-color: color-mix(in srgb,var(--secondary) 90%,var(--card)); } a.\[a\&\]\:hover\:bg-accent:hover { --tw-bg-opacity: 1; background-color: rgb(var(--muted-rgb) / var(--tw-bg-opacity, 1)); } a.\[a\&\]\:hover\:text-accent-foreground:hover { color: var(--foreground); } button.\[button\&\]\:min-h-11 { min-height: 2.75rem; } button.\[button\&\]\:px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }