/* css/fonts.css */
/* Generated by scripts/build_font_library.py - do not edit by hand.
 * Marker's font library: open-licensed sans and serif families (SIL OFL / Apache),
 * one face per weight and style, Latin + Latin Extended. Self-hosted: the Mini App must
 * shape identically on every client (a missing face re-wraps every headline).
 * Licences: ../fonts/lib/licenses/. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/inter-100.woff?v=0ed125728c") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/inter-200.woff?v=784a402c8a") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/inter-300.woff?v=cd14f26805") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/inter-400.woff?v=65bffdc328") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/inter-500.woff?v=bdbf53f1e7") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/inter-600.woff?v=76ceeee930") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/inter-700.woff?v=e10fe474a1") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/inter-800.woff?v=0694cbdd04") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/inter-900.woff?v=7cb29760a5") format("woff"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/inter-100-italic.woff?v=2a0eeb5cc3") format("woff"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/inter-200-italic.woff?v=050b046503") format("woff"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/inter-300-italic.woff?v=81b6f36212") format("woff"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/inter-400-italic.woff?v=927774860c") format("woff"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/inter-500-italic.woff?v=c7a77d55c4") format("woff"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/inter-600-italic.woff?v=5a4542e2d9") format("woff"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/inter-700-italic.woff?v=61bc170f41") format("woff"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/inter-800-italic.woff?v=2466162f41") format("woff"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/inter-900-italic.woff?v=847fd51c66") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/montserrat-100.woff?v=6ac08a2c02") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/montserrat-200.woff?v=7256058c22") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/montserrat-300.woff?v=9f3f4948c1") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/montserrat-400.woff?v=db5202d01e") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/montserrat-500.woff?v=5e7ec9c9d2") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/montserrat-600.woff?v=ae12de79c3") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/montserrat-700.woff?v=288f7b9992") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/montserrat-800.woff?v=ce163c9ddb") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/montserrat-900.woff?v=d124f3b324") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/montserrat-100-italic.woff?v=fd6d2d7e9d") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/montserrat-200-italic.woff?v=0c3d185a80") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/montserrat-300-italic.woff?v=4db9ff4678") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/montserrat-400-italic.woff?v=f975f8b04b") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/montserrat-500-italic.woff?v=747dda3af8") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/montserrat-600-italic.woff?v=b7057a43a7") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/montserrat-700-italic.woff?v=c10bb0e69a") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/montserrat-800-italic.woff?v=3f6a782fae") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/montserrat-900-italic.woff?v=84e150b20b") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/poppins-200.woff?v=278b9d5565") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/poppins-300.woff?v=43ace382ac") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/poppins-400.woff?v=fc9030138f") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/poppins-500.woff?v=6f9622fd57") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/poppins-600.woff?v=ba7ef7a616") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/poppins-700.woff?v=3a227bce58") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/poppins-800.woff?v=a44f760c5e") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/poppins-900.woff?v=8b7a8aa626") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/poppins-200-italic.woff?v=a52b75a5d1") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/poppins-300-italic.woff?v=c429295541") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/poppins-400-italic.woff?v=2e5ef0f99a") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/poppins-500-italic.woff?v=97288b227c") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/poppins-600-italic.woff?v=f5d787068e") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/poppins-700-italic.woff?v=b60e110e44") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/poppins-800-italic.woff?v=2efee7521f") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/poppins-900-italic.woff?v=c4405908ec") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/open-sans-300.woff?v=334b14bd56") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/open-sans-400.woff?v=582c2ff0ab") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/open-sans-500.woff?v=90e0026d14") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/open-sans-600.woff?v=042eb40822") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/open-sans-700.woff?v=a9fa0b566f") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/open-sans-800.woff?v=5e91375cc9") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/open-sans-300-italic.woff?v=7c97d01d4d") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/open-sans-400-italic.woff?v=a2dbae58d7") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/open-sans-500-italic.woff?v=81be83d90b") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/open-sans-600-italic.woff?v=5c294db846") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/open-sans-700-italic.woff?v=bff423214f") format("woff"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/open-sans-800-italic.woff?v=0314840a99") format("woff"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/roboto-100.woff?v=238c2dc9f6") format("woff"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/roboto-200.woff?v=86a48dcf8d") format("woff"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/roboto-300.woff?v=9a87fda03c") format("woff"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/roboto-400.woff?v=b03655d50f") format("woff"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/roboto-500.woff?v=58893d547b") format("woff"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/roboto-600.woff?v=79d3c427cd") format("woff"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/roboto-700.woff?v=2e7c6432ef") format("woff"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/roboto-800.woff?v=f858cc0aa8") format("woff"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/roboto-900.woff?v=3c431cdded") format("woff"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/roboto-100-italic.woff?v=9bbcbdbb76") format("woff"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/roboto-200-italic.woff?v=72b6b9fa9d") format("woff"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/roboto-300-italic.woff?v=e6a9d543d2") format("woff"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/roboto-400-italic.woff?v=332087ce9c") format("woff"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/roboto-500-italic.woff?v=1b7f907419") format("woff"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/roboto-600-italic.woff?v=0986530540") format("woff"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/roboto-700-italic.woff?v=5265a5b539") format("woff"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/roboto-800-italic.woff?v=dd49a82442") format("woff"); }
@font-face { font-family: "Roboto"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/roboto-900-italic.woff?v=0503fdee26") format("woff"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/lato-200.woff?v=4634f24105") format("woff"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/lato-300.woff?v=4f91fbe874") format("woff"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/lato-400.woff?v=7b33f1d6c9") format("woff"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/lato-500.woff?v=05b0ba55fd") format("woff"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/lato-600.woff?v=e275e94248") format("woff"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/lato-700.woff?v=f11066852f") format("woff"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/lato-800.woff?v=dbe1b5b57c") format("woff"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/lato-900.woff?v=1564f2785a") format("woff"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/lato-200-italic.woff?v=635936ac8c") format("woff"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/lato-300-italic.woff?v=56700e0ffc") format("woff"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/lato-400-italic.woff?v=270d0dac01") format("woff"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/lato-500-italic.woff?v=abb20c5990") format("woff"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/lato-600-italic.woff?v=f5c709070e") format("woff"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/lato-700-italic.woff?v=dfea311e80") format("woff"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/lato-800-italic.woff?v=deb2d13315") format("woff"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/lato-900-italic.woff?v=223b5b4d98") format("woff"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/raleway-100.woff?v=e40c450d49") format("woff"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/raleway-200.woff?v=58f31ff355") format("woff"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/raleway-300.woff?v=df9320ca02") format("woff"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/raleway-400.woff?v=5792d9d07a") format("woff"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/raleway-500.woff?v=43590c201d") format("woff"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/raleway-600.woff?v=b02eb33188") format("woff"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/raleway-700.woff?v=98c0bec584") format("woff"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/raleway-800.woff?v=6909ce09ac") format("woff"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/raleway-900.woff?v=c9a5298ab2") format("woff"); }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/raleway-100-italic.woff?v=b43257ddbf") format("woff"); }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/raleway-200-italic.woff?v=2bcc0bb845") format("woff"); }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/raleway-300-italic.woff?v=cf4e3a7e95") format("woff"); }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/raleway-400-italic.woff?v=f042933661") format("woff"); }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/raleway-500-italic.woff?v=c6bb82b26e") format("woff"); }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/raleway-600-italic.woff?v=01f9f086f6") format("woff"); }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/raleway-700-italic.woff?v=eadaed8988") format("woff"); }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/raleway-800-italic.woff?v=be02546f6a") format("woff"); }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/raleway-900-italic.woff?v=4b36180d3a") format("woff"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/nunito-200.woff?v=7b2caab58a") format("woff"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/nunito-300.woff?v=315e42f96a") format("woff"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/nunito-400.woff?v=66074d4414") format("woff"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/nunito-500.woff?v=5050cd87ae") format("woff"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/nunito-600.woff?v=384254a0fa") format("woff"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/nunito-700.woff?v=116dc9f6c6") format("woff"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/nunito-800.woff?v=57b6277587") format("woff"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/nunito-900.woff?v=0fa596b636") format("woff"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/nunito-200-italic.woff?v=66e087d885") format("woff"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/nunito-300-italic.woff?v=7181f45954") format("woff"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/nunito-400-italic.woff?v=df87bfda02") format("woff"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/nunito-500-italic.woff?v=6bd131262f") format("woff"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/nunito-600-italic.woff?v=5f425b7046") format("woff"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/nunito-700-italic.woff?v=86091814cf") format("woff"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/nunito-800-italic.woff?v=1904844af7") format("woff"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/nunito-900-italic.woff?v=abac1375e6") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/work-sans-100.woff?v=0bf10f923c") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/work-sans-200.woff?v=5ae51eaaa4") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/work-sans-300.woff?v=13f6ab77dc") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/work-sans-400.woff?v=eb7b1316b6") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/work-sans-500.woff?v=0797616b2c") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/work-sans-600.woff?v=a186f65116") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/work-sans-700.woff?v=79250c0ed7") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/work-sans-800.woff?v=315e1a78b0") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/work-sans-900.woff?v=11f43e2496") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/work-sans-100-italic.woff?v=e23a0f7e52") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/work-sans-200-italic.woff?v=09e548fa40") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/work-sans-300-italic.woff?v=0c02eb75ac") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/work-sans-400-italic.woff?v=513850910b") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/work-sans-500-italic.woff?v=fa80677b83") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/work-sans-600-italic.woff?v=ae3d01453e") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/work-sans-700-italic.woff?v=f29e5cbb29") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/work-sans-800-italic.woff?v=28a5c52820") format("woff"); }
@font-face { font-family: "Work Sans"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/work-sans-900-italic.woff?v=73ed7ced78") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/dm-sans-100.woff?v=b267c58b83") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/dm-sans-200.woff?v=e51edf3b31") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/dm-sans-300.woff?v=0e72ef989a") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/dm-sans-400.woff?v=75cd83d3cb") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/dm-sans-500.woff?v=26fc6295de") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/dm-sans-600.woff?v=67c478a5dd") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/dm-sans-700.woff?v=d601833346") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/dm-sans-800.woff?v=e1968f1bae") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/dm-sans-900.woff?v=d1e1e24d77") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/dm-sans-100-italic.woff?v=80caad95df") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/dm-sans-200-italic.woff?v=b0ddd2eacb") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/dm-sans-300-italic.woff?v=dc54f0c3af") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/dm-sans-400-italic.woff?v=6b0fac24d9") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/dm-sans-500-italic.woff?v=5572e35cee") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/dm-sans-600-italic.woff?v=39f241bcc8") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/dm-sans-700-italic.woff?v=28f99ea2a2") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/dm-sans-800-italic.woff?v=ba0807f93a") format("woff"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/dm-sans-900-italic.woff?v=8ec7fa9b99") format("woff"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/rubik-300.woff?v=149a16c113") format("woff"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/rubik-400.woff?v=fc9798a49b") format("woff"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/rubik-500.woff?v=92b2103e79") format("woff"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/rubik-600.woff?v=6fdc0a800f") format("woff"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/rubik-700.woff?v=b8dd9fc34e") format("woff"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/rubik-800.woff?v=c148d89816") format("woff"); }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/rubik-900.woff?v=ca1f1e4331") format("woff"); }
@font-face { font-family: "Rubik"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/rubik-300-italic.woff?v=c5ba391c5b") format("woff"); }
@font-face { font-family: "Rubik"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/rubik-400-italic.woff?v=0eb6a2d721") format("woff"); }
@font-face { font-family: "Rubik"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/rubik-500-italic.woff?v=a744a98ed3") format("woff"); }
@font-face { font-family: "Rubik"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/rubik-600-italic.woff?v=62ef281819") format("woff"); }
@font-face { font-family: "Rubik"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/rubik-700-italic.woff?v=ee6130b928") format("woff"); }
@font-face { font-family: "Rubik"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/rubik-800-italic.woff?v=cbaf04ab5f") format("woff"); }
@font-face { font-family: "Rubik"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/rubik-900-italic.woff?v=c523baf9e3") format("woff"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/archivo-100.woff?v=0adfc885f1") format("woff"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/archivo-200.woff?v=141e0edc37") format("woff"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/archivo-300.woff?v=e0e02d8884") format("woff"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/archivo-400.woff?v=ca6d7046e7") format("woff"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/archivo-500.woff?v=0722c28250") format("woff"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/archivo-600.woff?v=1e4c954106") format("woff"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/archivo-700.woff?v=03cfc56686") format("woff"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/archivo-800.woff?v=32a84846fe") format("woff"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/archivo-900.woff?v=988283cb3b") format("woff"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/archivo-100-italic.woff?v=f88735ac20") format("woff"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/archivo-200-italic.woff?v=7a79b0bebb") format("woff"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/archivo-300-italic.woff?v=2fee9930bb") format("woff"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/archivo-400-italic.woff?v=0ced49be9a") format("woff"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/archivo-500-italic.woff?v=bdfc9b6109") format("woff"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/archivo-600-italic.woff?v=4590dc2033") format("woff"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/archivo-700-italic.woff?v=f9c88d1d47") format("woff"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/archivo-800-italic.woff?v=afbbc215ff") format("woff"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/archivo-900-italic.woff?v=c22e8e83cd") format("woff"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/oswald-200.woff?v=4ae994dd6b") format("woff"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/oswald-300.woff?v=fee53b770a") format("woff"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/oswald-400.woff?v=66995c518a") format("woff"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/oswald-500.woff?v=c4dbe46314") format("woff"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/oswald-600.woff?v=2f6a20066b") format("woff"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/oswald-700.woff?v=3a7ffbc38c") format("woff"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/league-spartan-100.woff?v=95f21e21b1") format("woff"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/league-spartan-200.woff?v=636d152c98") format("woff"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/league-spartan-300.woff?v=108d3ba73b") format("woff"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/league-spartan-400.woff?v=2e3a3ff121") format("woff"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/league-spartan-500.woff?v=477b27b5a8") format("woff"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/league-spartan-600.woff?v=e49dc8db8b") format("woff"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/league-spartan-700.woff?v=635e937afa") format("woff"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/league-spartan-800.woff?v=65d1b74256") format("woff"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/league-spartan-900.woff?v=f363711a39") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/josefin-sans-100.woff?v=ec4bbbd283") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/josefin-sans-200.woff?v=a32c448b72") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/josefin-sans-300.woff?v=8ec8a246b4") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/josefin-sans-400.woff?v=f523aa7f32") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/josefin-sans-500.woff?v=9a7df4d422") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/josefin-sans-600.woff?v=05dcb9d21d") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/josefin-sans-700.woff?v=d25ffc3eec") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/josefin-sans-100-italic.woff?v=88e0297a71") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/josefin-sans-200-italic.woff?v=aef97c5dc7") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/josefin-sans-300-italic.woff?v=1824bc91ac") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/josefin-sans-400-italic.woff?v=2d331dce08") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/josefin-sans-500-italic.woff?v=7d93be271b") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/josefin-sans-600-italic.woff?v=f9b0e40516") format("woff"); }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/josefin-sans-700-italic.woff?v=94089d22f4") format("woff"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/quicksand-300.woff?v=cd8e18ba61") format("woff"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/quicksand-400.woff?v=7d47aeca24") format("woff"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/quicksand-500.woff?v=8bee9b506f") format("woff"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/quicksand-600.woff?v=8f64b1bc30") format("woff"); }
@font-face { font-family: "Quicksand"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/quicksand-700.woff?v=974c5158c3") format("woff"); }
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/bebas-neue-400.woff?v=8ac142a1b6") format("woff"); }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/anton-400.woff?v=92cb8d50fb") format("woff"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/barlow-200.woff?v=e1bd61340b") format("woff"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/barlow-300.woff?v=d50c8fface") format("woff"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/barlow-400.woff?v=11aff6c6ca") format("woff"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/barlow-500.woff?v=bc04b2e6b1") format("woff"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/barlow-600.woff?v=9d3cbd8967") format("woff"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/barlow-700.woff?v=00ae323c2e") format("woff"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/barlow-800.woff?v=b1d4784f68") format("woff"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/barlow-900.woff?v=0d32d62080") format("woff"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/barlow-200-italic.woff?v=9c25f38f8f") format("woff"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/barlow-300-italic.woff?v=abe99b95a5") format("woff"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/barlow-400-italic.woff?v=74c39883bb") format("woff"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/barlow-500-italic.woff?v=e7c25b8006") format("woff"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/barlow-600-italic.woff?v=78d442f2aa") format("woff"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/barlow-700-italic.woff?v=38cfdd9b25") format("woff"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/barlow-800-italic.woff?v=1d4f2216a4") format("woff"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/barlow-900-italic.woff?v=0eb0807600") format("woff"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/kanit-200.woff?v=0232e0009f") format("woff"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/kanit-300.woff?v=fdbb41cd89") format("woff"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/kanit-400.woff?v=1bb319597d") format("woff"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/kanit-500.woff?v=9e1fd355a8") format("woff"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/kanit-600.woff?v=d3dce66825") format("woff"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/kanit-700.woff?v=3fd834a14d") format("woff"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/kanit-800.woff?v=d0dcbb2c6a") format("woff"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/kanit-900.woff?v=dc0cff45b2") format("woff"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/kanit-200-italic.woff?v=e8ab58a03c") format("woff"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/kanit-300-italic.woff?v=cfd35d1a2b") format("woff"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/kanit-400-italic.woff?v=c712db567d") format("woff"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/kanit-500-italic.woff?v=dad019dd12") format("woff"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/kanit-600-italic.woff?v=aab5d6216b") format("woff"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/kanit-700-italic.woff?v=9804eaedb8") format("woff"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/kanit-800-italic.woff?v=702f10a7cd") format("woff"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/kanit-900-italic.woff?v=327dfcafc9") format("woff"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/manrope-200.woff?v=4ffaeaaf75") format("woff"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/manrope-300.woff?v=e3b8556715") format("woff"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/manrope-400.woff?v=ea1c5124fb") format("woff"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/manrope-500.woff?v=4b88252ecc") format("woff"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/manrope-600.woff?v=8130e97cf6") format("woff"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/manrope-700.woff?v=39a9a9eb00") format("woff"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/manrope-800.woff?v=c148f30e77") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-200.woff?v=e8eb7015c9") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-300.woff?v=0160aefb14") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-400.woff?v=aa624331a3") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-500.woff?v=7452714aa9") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-600.woff?v=76e4c436bb") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-700.woff?v=8b7c974b24") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-800.woff?v=dc7b51b236") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-200-italic.woff?v=c9251bfc0b") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-300-italic.woff?v=a2694c9831") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-400-italic.woff?v=5704f9e323") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-500-italic.woff?v=e06f97b1ab") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-600-italic.woff?v=fa6754f052") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-700-italic.woff?v=e891d80e55") format("woff"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/plus-jakarta-sans-800-italic.woff?v=95397658b2") format("woff"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/outfit-100.woff?v=30ef90566f") format("woff"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/outfit-200.woff?v=3191cb8e20") format("woff"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/outfit-300.woff?v=e1e80e4d4e") format("woff"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/outfit-400.woff?v=5c82abc994") format("woff"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/outfit-500.woff?v=48e2b6c596") format("woff"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/outfit-600.woff?v=52d5715ffe") format("woff"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/outfit-700.woff?v=6e1b4bfda9") format("woff"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/outfit-800.woff?v=b14d67ed93") format("woff"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/outfit-900.woff?v=544c02d870") format("woff"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/space-grotesk-300.woff?v=4d65ac6a49") format("woff"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/space-grotesk-400.woff?v=b692f908bb") format("woff"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/space-grotesk-500.woff?v=1f7c862149") format("woff"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/space-grotesk-600.woff?v=7f44e9e354") format("woff"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/space-grotesk-700.woff?v=145404d6e4") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/source-sans-3-200.woff?v=6bbff4d57e") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/source-sans-3-300.woff?v=eec9fb1184") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/source-sans-3-400.woff?v=96d8d390dc") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/source-sans-3-500.woff?v=19149b504a") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/source-sans-3-600.woff?v=fc6bb77568") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/source-sans-3-700.woff?v=5c0d226d85") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/source-sans-3-800.woff?v=44f5e73fb2") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/source-sans-3-900.woff?v=f5b56bef19") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/source-sans-3-200-italic.woff?v=46eebb63d7") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/source-sans-3-300-italic.woff?v=358a46f535") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/source-sans-3-400-italic.woff?v=f775245b87") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/source-sans-3-500-italic.woff?v=189b45c0de") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/source-sans-3-600-italic.woff?v=7d6dda4247") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/source-sans-3-700-italic.woff?v=527089466d") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/source-sans-3-800-italic.woff?v=c5a98f69c2") format("woff"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/source-sans-3-900-italic.woff?v=1628f3489b") format("woff"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/mulish-200.woff?v=f8dfef828c") format("woff"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/mulish-300.woff?v=fde0013fb5") format("woff"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/mulish-400.woff?v=b2cafe702f") format("woff"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/mulish-500.woff?v=c014fb48f8") format("woff"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/mulish-600.woff?v=5c6a21d5f7") format("woff"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/mulish-700.woff?v=ed68b02e28") format("woff"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/mulish-800.woff?v=1a2b0162d9") format("woff"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/mulish-900.woff?v=cef708c65e") format("woff"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/mulish-200-italic.woff?v=b920c0be03") format("woff"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/mulish-300-italic.woff?v=1a8c4d2ccf") format("woff"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/mulish-400-italic.woff?v=d2f0147fef") format("woff"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/mulish-500-italic.woff?v=cfa6d248dc") format("woff"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/mulish-600-italic.woff?v=16ba7ffc0b") format("woff"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/mulish-700-italic.woff?v=6c919bec52") format("woff"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/mulish-800-italic.woff?v=fc143969a5") format("woff"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/mulish-900-italic.woff?v=09a4480588") format("woff"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/karla-200.woff?v=75c507133b") format("woff"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/karla-300.woff?v=c62214b2c2") format("woff"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/karla-400.woff?v=0c41690dd6") format("woff"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/karla-500.woff?v=16b072e399") format("woff"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/karla-600.woff?v=e192210be7") format("woff"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/karla-700.woff?v=105eef39e1") format("woff"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/karla-800.woff?v=2e0c252c6d") format("woff"); }
@font-face { font-family: "Karla"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/karla-200-italic.woff?v=73c3e28356") format("woff"); }
@font-face { font-family: "Karla"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/karla-300-italic.woff?v=39c0632abd") format("woff"); }
@font-face { font-family: "Karla"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/karla-400-italic.woff?v=cbae1970f6") format("woff"); }
@font-face { font-family: "Karla"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/karla-500-italic.woff?v=b3e2cf4ea0") format("woff"); }
@font-face { font-family: "Karla"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/karla-600-italic.woff?v=0b3c0c6372") format("woff"); }
@font-face { font-family: "Karla"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/karla-700-italic.woff?v=78a646c54c") format("woff"); }
@font-face { font-family: "Karla"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/karla-800-italic.woff?v=ed4f1d6d63") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/noto-sans-100.woff?v=3c7ff9188d") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/noto-sans-200.woff?v=123305ee9a") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/noto-sans-300.woff?v=c1a7104887") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/noto-sans-400.woff?v=15cd7a93aa") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/noto-sans-500.woff?v=fb147db1a3") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/noto-sans-600.woff?v=abea653a11") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/noto-sans-700.woff?v=daa86985b0") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/noto-sans-800.woff?v=8410223952") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/noto-sans-900.woff?v=68f8eb6bd4") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/noto-sans-100-italic.woff?v=fd9e8a6f03") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/noto-sans-200-italic.woff?v=75f1b44769") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/noto-sans-300-italic.woff?v=8b288d7c36") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/noto-sans-400-italic.woff?v=d2cf4eef76") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/noto-sans-500-italic.woff?v=4df1777913") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/noto-sans-600-italic.woff?v=111f6efe78") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/noto-sans-700-italic.woff?v=15c85c59b7") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/noto-sans-800-italic.woff?v=fea3fefe02") format("woff"); }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/noto-sans-900-italic.woff?v=2c741002da") format("woff"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/lexend-100.woff?v=64942fbdc3") format("woff"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/lexend-200.woff?v=578b5d6426") format("woff"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/lexend-300.woff?v=df03c3c30e") format("woff"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/lexend-400.woff?v=2206b1f7b1") format("woff"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/lexend-500.woff?v=4fb401dbe1") format("woff"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/lexend-600.woff?v=7e3a9a8a70") format("woff"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/lexend-700.woff?v=ab38de023c") format("woff"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/lexend-800.woff?v=a8c1a52724") format("woff"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/lexend-900.woff?v=cee4384bd7") format("woff"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/figtree-300.woff?v=3d0090eb66") format("woff"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/figtree-400.woff?v=555338fc72") format("woff"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/figtree-500.woff?v=a595da913c") format("woff"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/figtree-600.woff?v=072fade445") format("woff"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/figtree-700.woff?v=88eafd5b42") format("woff"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/figtree-800.woff?v=0356c5a6e9") format("woff"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/figtree-900.woff?v=77d8b66c17") format("woff"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/figtree-300-italic.woff?v=b2734080b2") format("woff"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/figtree-400-italic.woff?v=afa0e40c61") format("woff"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/figtree-500-italic.woff?v=bd275afd17") format("woff"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/figtree-600-italic.woff?v=292773022a") format("woff"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/figtree-700-italic.woff?v=a00b1e3653") format("woff"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/figtree-800-italic.woff?v=ff0d9a8515") format("woff"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/figtree-900-italic.woff?v=cdf496833d") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/urbanist-100.woff?v=a3108f61bd") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/urbanist-200.woff?v=8464251e05") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/urbanist-300.woff?v=850e8b3c63") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/urbanist-400.woff?v=1d777212fa") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/urbanist-500.woff?v=91806d7843") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/urbanist-600.woff?v=1ff6e8a571") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/urbanist-700.woff?v=ac053f7d95") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/urbanist-800.woff?v=f930fc4e5d") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/urbanist-900.woff?v=e1ef4cb483") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/urbanist-100-italic.woff?v=7ba0e11e82") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/urbanist-200-italic.woff?v=a0de3f49a3") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/urbanist-300-italic.woff?v=0587da8df0") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/urbanist-400-italic.woff?v=be91cd2ff1") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/urbanist-500-italic.woff?v=4f23140afc") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/urbanist-600-italic.woff?v=b8c968ffa9") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/urbanist-700-italic.woff?v=81700ea5cc") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/urbanist-800-italic.woff?v=4391992699") format("woff"); }
@font-face { font-family: "Urbanist"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/urbanist-900-italic.woff?v=e1d51299d8") format("woff"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/sora-100.woff?v=e4a1122d66") format("woff"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/sora-200.woff?v=131c7d23b8") format("woff"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/sora-300.woff?v=7730f4b40c") format("woff"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/sora-400.woff?v=3221a26f0c") format("woff"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/sora-500.woff?v=3f855ee644") format("woff"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/sora-600.woff?v=24b2dfbb53") format("woff"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/sora-700.woff?v=33abc207f5") format("woff"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/sora-800.woff?v=7aed863e36") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/playfair-display-400.woff?v=5fb4ae6117") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/playfair-display-500.woff?v=b8835f5498") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/playfair-display-600.woff?v=8e6e6d221b") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/playfair-display-700.woff?v=f07b3372e8") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/playfair-display-800.woff?v=307452b215") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/playfair-display-900.woff?v=c5275fe776") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/playfair-display-400-italic.woff?v=b7788fd78f") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/playfair-display-500-italic.woff?v=0dca0e7c8a") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/playfair-display-600-italic.woff?v=0515ab169c") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/playfair-display-700-italic.woff?v=bc81bf0421") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/playfair-display-800-italic.woff?v=295c8683bd") format("woff"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/playfair-display-900-italic.woff?v=70f63e5c9b") format("woff"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/lora-400.woff?v=c00eb42f4f") format("woff"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/lora-500.woff?v=d4782925c6") format("woff"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/lora-600.woff?v=27f281ac72") format("woff"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/lora-700.woff?v=fe74f32d1e") format("woff"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/lora-400-italic.woff?v=f2a30c4380") format("woff"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/lora-500-italic.woff?v=6e7707230f") format("woff"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/lora-600-italic.woff?v=a0edb7944e") format("woff"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/lora-700-italic.woff?v=4973f3f406") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/merriweather-300.woff?v=e4482b0f84") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/merriweather-400.woff?v=711c63ff45") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/merriweather-500.woff?v=416fd9bfa4") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/merriweather-600.woff?v=a3589fc120") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/merriweather-700.woff?v=5df2b2ec81") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/merriweather-800.woff?v=3d1f0b03c3") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/merriweather-900.woff?v=c61fd304b0") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/merriweather-300-italic.woff?v=ff03737c7e") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/merriweather-400-italic.woff?v=0277c2d281") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/merriweather-500-italic.woff?v=845217f7c1") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/merriweather-600-italic.woff?v=daebf908df") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/merriweather-700-italic.woff?v=c49170d6e4") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/merriweather-800-italic.woff?v=2d66b0fc5e") format("woff"); }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/merriweather-900-italic.woff?v=c62f4ece84") format("woff"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/libre-baskerville-400.woff?v=06364b885a") format("woff"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/libre-baskerville-500.woff?v=6522706b17") format("woff"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/libre-baskerville-600.woff?v=804f7a6f33") format("woff"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/libre-baskerville-700.woff?v=e75659fb77") format("woff"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/libre-baskerville-400-italic.woff?v=341726bbad") format("woff"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/libre-baskerville-500-italic.woff?v=da202cb2b5") format("woff"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/libre-baskerville-600-italic.woff?v=50d46fb0cd") format("woff"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/libre-baskerville-700-italic.woff?v=b6a586c50f") format("woff"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/eb-garamond-400.woff?v=ca88184659") format("woff"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/eb-garamond-500.woff?v=fb6c26674b") format("woff"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/eb-garamond-600.woff?v=e90af47bf1") format("woff"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/eb-garamond-700.woff?v=7866e72cad") format("woff"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/eb-garamond-800.woff?v=fd9c2bc72c") format("woff"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/eb-garamond-400-italic.woff?v=3ff4289adc") format("woff"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/eb-garamond-500-italic.woff?v=70a7f659e5") format("woff"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/eb-garamond-600-italic.woff?v=3d8f290b74") format("woff"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/eb-garamond-700-italic.woff?v=6568836c99") format("woff"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/eb-garamond-800-italic.woff?v=1f2934039a") format("woff"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/cormorant-garamond-300.woff?v=b451176cbf") format("woff"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/cormorant-garamond-400.woff?v=0273f297b0") format("woff"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/cormorant-garamond-500.woff?v=44823f66de") format("woff"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/cormorant-garamond-600.woff?v=d564486248") format("woff"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/cormorant-garamond-700.woff?v=5ed8c0a5a4") format("woff"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/cormorant-garamond-300-italic.woff?v=fa54090c88") format("woff"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/cormorant-garamond-400-italic.woff?v=d7ebc3a84f") format("woff"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/cormorant-garamond-500-italic.woff?v=b7ab4f128d") format("woff"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/cormorant-garamond-600-italic.woff?v=4cf8202152") format("woff"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/cormorant-garamond-700-italic.woff?v=c6ccce8f87") format("woff"); }
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/cormorant-300.woff?v=9dd94d9521") format("woff"); }
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/cormorant-400.woff?v=384df14e59") format("woff"); }
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/cormorant-500.woff?v=0298a4d9ab") format("woff"); }
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/cormorant-600.woff?v=254220b5fe") format("woff"); }
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/cormorant-700.woff?v=07940fb7e1") format("woff"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/cormorant-300-italic.woff?v=6914211f32") format("woff"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/cormorant-400-italic.woff?v=76c07be041") format("woff"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/cormorant-500-italic.woff?v=b5ac391b1a") format("woff"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/cormorant-600-italic.woff?v=0e0f34a9b0") format("woff"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/cormorant-700-italic.woff?v=ce9ee976a6") format("woff"); }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/dm-serif-display-400.woff?v=b1fb8115fe") format("woff"); }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/dm-serif-display-400-italic.woff?v=bd40655dec") format("woff"); }
@font-face { font-family: "Abril Fatface"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/abril-fatface-400.woff?v=df5d77d859") format("woff"); }
@font-face { font-family: "Prata"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/prata-400.woff?v=878c0955d4") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/noto-serif-100.woff?v=918820a1e5") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/noto-serif-200.woff?v=325b123792") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/noto-serif-300.woff?v=b58deccd8a") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/noto-serif-400.woff?v=16df856ddf") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/noto-serif-500.woff?v=f6e1c0f1b4") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/noto-serif-600.woff?v=470c0b69f9") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/noto-serif-700.woff?v=e425705bac") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/noto-serif-800.woff?v=feea742cf3") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/noto-serif-900.woff?v=98d4213ddd") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/noto-serif-100-italic.woff?v=1ddf20b12e") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/noto-serif-200-italic.woff?v=6e8c6a661e") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/noto-serif-300-italic.woff?v=a292cf4e48") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/noto-serif-400-italic.woff?v=bfced7cd08") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/noto-serif-500-italic.woff?v=2d885e27f4") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/noto-serif-600-italic.woff?v=22cb98a409") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/noto-serif-700-italic.woff?v=7e7c656552") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/noto-serif-800-italic.woff?v=ce0881725d") format("woff"); }
@font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/noto-serif-900-italic.woff?v=a17c19b6a0") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/crimson-pro-200.woff?v=573d9f6d8a") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/crimson-pro-300.woff?v=2b5bcdcdf9") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/crimson-pro-400.woff?v=82f7a44b4d") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/crimson-pro-500.woff?v=52918d5897") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/crimson-pro-600.woff?v=249d1e6da1") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/crimson-pro-700.woff?v=a11b832e60") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/crimson-pro-800.woff?v=ee2b6f311b") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/crimson-pro-900.woff?v=47b2ed473f") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/crimson-pro-200-italic.woff?v=673a2938bd") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/crimson-pro-300-italic.woff?v=f2da64e32e") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/crimson-pro-400-italic.woff?v=a319bfaeb1") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/crimson-pro-500-italic.woff?v=e8bec96eb3") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/crimson-pro-600-italic.woff?v=6c4d90220c") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/crimson-pro-700-italic.woff?v=2d595bd51a") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/crimson-pro-800-italic.woff?v=a3b8d26ecd") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/crimson-pro-900-italic.woff?v=71a7a42645") format("woff"); }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/libre-caslon-text-400.woff?v=e0c02737d8") format("woff"); }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/libre-caslon-text-500.woff?v=872113f070") format("woff"); }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/libre-caslon-text-600.woff?v=13800aff20") format("woff"); }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/libre-caslon-text-700.woff?v=153a221169") format("woff"); }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/libre-caslon-text-400-italic.woff?v=1038b6d694") format("woff"); }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/libre-caslon-text-500-italic.woff?v=c9135f9347") format("woff"); }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/libre-caslon-text-600-italic.woff?v=3eeef665f2") format("woff"); }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/libre-caslon-text-700-italic.woff?v=cef21f296f") format("woff"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/bodoni-moda-400.woff?v=7bf2b3ef5e") format("woff"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/bodoni-moda-500.woff?v=b6d2956422") format("woff"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/bodoni-moda-600.woff?v=4b61563804") format("woff"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/bodoni-moda-700.woff?v=16c6d91997") format("woff"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/bodoni-moda-800.woff?v=ca0104d590") format("woff"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/bodoni-moda-900.woff?v=ecf4ea723d") format("woff"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/bodoni-moda-400-italic.woff?v=80649ce653") format("woff"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/bodoni-moda-500-italic.woff?v=abd5bfb1ac") format("woff"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/bodoni-moda-600-italic.woff?v=3ed791a9f6") format("woff"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/bodoni-moda-700-italic.woff?v=58318c0cbe") format("woff"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/bodoni-moda-800-italic.woff?v=01db875258") format("woff"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/bodoni-moda-900-italic.woff?v=f63a5b4e0c") format("woff"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/cinzel-400.woff?v=4227141aec") format("woff"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/cinzel-500.woff?v=f92b1a5d51") format("woff"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/cinzel-600.woff?v=e2aa475a24") format("woff"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/cinzel-700.woff?v=35c65bbcd4") format("woff"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/cinzel-800.woff?v=2c4aaf2efe") format("woff"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/cinzel-900.woff?v=ec3ac229f3") format("woff"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/spectral-200.woff?v=b1d7f2a396") format("woff"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/spectral-300.woff?v=57e2dcbe09") format("woff"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/spectral-400.woff?v=566412a1d6") format("woff"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/spectral-500.woff?v=6a2b343c1e") format("woff"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/spectral-600.woff?v=ecaa0a6ef8") format("woff"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/spectral-700.woff?v=92fab380fe") format("woff"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/spectral-800.woff?v=4fa7496d59") format("woff"); }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/spectral-200-italic.woff?v=1525057f73") format("woff"); }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/spectral-300-italic.woff?v=4af9d444ab") format("woff"); }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/spectral-400-italic.woff?v=fa1f6dceb5") format("woff"); }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/spectral-500-italic.woff?v=a57e530086") format("woff"); }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/spectral-600-italic.woff?v=753d23a1a2") format("woff"); }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/spectral-700-italic.woff?v=07d549a0a5") format("woff"); }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/spectral-800-italic.woff?v=b36edfd40e") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/source-serif-4-200.woff?v=9f3a9346b2") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/source-serif-4-300.woff?v=bd87f42348") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/source-serif-4-400.woff?v=f7145053c6") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/source-serif-4-500.woff?v=83d79e3f10") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/source-serif-4-600.woff?v=aa8f67b711") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/source-serif-4-700.woff?v=6597f5691e") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/source-serif-4-800.woff?v=a6d282b4f0") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/source-serif-4-900.woff?v=d2b446d758") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/source-serif-4-200-italic.woff?v=f675cb49d3") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/source-serif-4-300-italic.woff?v=5c3b3a4e78") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/source-serif-4-400-italic.woff?v=bf79962656") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/source-serif-4-500-italic.woff?v=02acdd9383") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/source-serif-4-600-italic.woff?v=1815540e38") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/source-serif-4-700-italic.woff?v=3fa216d469") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/source-serif-4-800-italic.woff?v=02093b76ff") format("woff"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/source-serif-4-900-italic.woff?v=31bc4126da") format("woff"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/bitter-100.woff?v=c24646b868") format("woff"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/bitter-200.woff?v=4fa9b72c1c") format("woff"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/bitter-300.woff?v=0ee9c6c91e") format("woff"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/bitter-400.woff?v=18cc4b1940") format("woff"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/bitter-500.woff?v=1938a10eb9") format("woff"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/bitter-600.woff?v=d28f22434d") format("woff"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/bitter-700.woff?v=584fd453ed") format("woff"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/bitter-800.woff?v=d98d1311a5") format("woff"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/bitter-900.woff?v=ad3fe90bcc") format("woff"); }
@font-face { font-family: "Bitter"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/bitter-100-italic.woff?v=ea6e91444e") format("woff"); }
@font-face { font-family: "Bitter"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/bitter-200-italic.woff?v=e8017f567a") format("woff"); }
@font-face { font-family: "Bitter"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/bitter-300-italic.woff?v=6e9a643a4b") format("woff"); }
@font-face { font-family: "Bitter"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/bitter-400-italic.woff?v=dc3d480b9e") format("woff"); }
@font-face { font-family: "Bitter"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/bitter-500-italic.woff?v=5729a43bd5") format("woff"); }
@font-face { font-family: "Bitter"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/bitter-600-italic.woff?v=509ae1de6a") format("woff"); }
@font-face { font-family: "Bitter"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/bitter-700-italic.woff?v=e65179ebf4") format("woff"); }
@font-face { font-family: "Bitter"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/bitter-800-italic.woff?v=3d2438b2ee") format("woff"); }
@font-face { font-family: "Bitter"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/bitter-900-italic.woff?v=15f9963630") format("woff"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/roboto-slab-100.woff?v=0321273023") format("woff"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/roboto-slab-200.woff?v=9601c5f97a") format("woff"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/roboto-slab-300.woff?v=ce198c1f4f") format("woff"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/roboto-slab-400.woff?v=568875b085") format("woff"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/roboto-slab-500.woff?v=298b83b101") format("woff"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/roboto-slab-600.woff?v=57c0671fd2") format("woff"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/roboto-slab-700.woff?v=394d2e36db") format("woff"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/roboto-slab-800.woff?v=33b9e90d85") format("woff"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/roboto-slab-900.woff?v=5eb9fcfd25") format("woff"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/zilla-slab-300.woff?v=d4a9967c42") format("woff"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/zilla-slab-400.woff?v=f2ca3d380c") format("woff"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/zilla-slab-500.woff?v=87b14aab81") format("woff"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/zilla-slab-600.woff?v=c40ad88f94") format("woff"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/zilla-slab-700.woff?v=efd6fda905") format("woff"); }
@font-face { font-family: "Zilla Slab"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/zilla-slab-300-italic.woff?v=8b4b2a2d54") format("woff"); }
@font-face { font-family: "Zilla Slab"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/zilla-slab-400-italic.woff?v=0b03f58502") format("woff"); }
@font-face { font-family: "Zilla Slab"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/zilla-slab-500-italic.woff?v=7a9e68eece") format("woff"); }
@font-face { font-family: "Zilla Slab"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/zilla-slab-600-italic.woff?v=1362dbfc58") format("woff"); }
@font-face { font-family: "Zilla Slab"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/zilla-slab-700-italic.woff?v=b1a4ab8a49") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/fraunces-100.woff?v=b9483fdb70") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/fraunces-200.woff?v=a01cb4f680") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/fraunces-300.woff?v=6ebbb7a612") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/fraunces-400.woff?v=898d94b109") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/fraunces-500.woff?v=8b8827588f") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/fraunces-600.woff?v=fd8fbc1626") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/fraunces-700.woff?v=a92798ba8d") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/fraunces-800.woff?v=b69f569efb") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/fraunces-900.woff?v=129c27a669") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100; font-display: swap; src: url("/static/fonts/lib/fraunces-100-italic.woff?v=02418d614e") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 200; font-display: swap; src: url("/static/fonts/lib/fraunces-200-italic.woff?v=c9026c2335") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300; font-display: swap; src: url("/static/fonts/lib/fraunces-300-italic.woff?v=751c4e1d98") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/fraunces-400-italic.woff?v=6ea056040f") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/fraunces-500-italic.woff?v=b2e850f298") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/fraunces-600-italic.woff?v=98f4728cea") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/fraunces-700-italic.woff?v=f2a71b2361") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 800; font-display: swap; src: url("/static/fonts/lib/fraunces-800-italic.woff?v=21d721670e") format("woff"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 900; font-display: swap; src: url("/static/fonts/lib/fraunces-900-italic.woff?v=bd775ba1e3") format("woff"); }
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/young-serif-400.woff?v=420ea5f87b") format("woff"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/instrument-serif-400.woff?v=6d9467ebac") format("woff"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/instrument-serif-400-italic.woff?v=84618b4422") format("woff"); }
@font-face { font-family: "Gelasio"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/gelasio-400.woff?v=5fd1a0caec") format("woff"); }
@font-face { font-family: "Gelasio"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/gelasio-500.woff?v=82f2d28cbf") format("woff"); }
@font-face { font-family: "Gelasio"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/gelasio-600.woff?v=b3738bb896") format("woff"); }
@font-face { font-family: "Gelasio"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/gelasio-700.woff?v=bb83cdd727") format("woff"); }
@font-face { font-family: "Gelasio"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/gelasio-400-italic.woff?v=4f442c30ed") format("woff"); }
@font-face { font-family: "Gelasio"; font-style: italic; font-weight: 500; font-display: swap; src: url("/static/fonts/lib/gelasio-500-italic.woff?v=f999efffbe") format("woff"); }
@font-face { font-family: "Gelasio"; font-style: italic; font-weight: 600; font-display: swap; src: url("/static/fonts/lib/gelasio-600-italic.woff?v=9a346bcc19") format("woff"); }
@font-face { font-family: "Gelasio"; font-style: italic; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/gelasio-700-italic.woff?v=b356dddd91") format("woff"); }
@font-face { font-family: "Alice"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/alice-400.woff?v=c0797ee24d") format("woff"); }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/marcellus-400.woff?v=361e4355f4") format("woff"); }
@font-face { font-family: "Yeseva One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/yeseva-one-400.woff?v=5b3e27d3a2") format("woff"); }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/old-standard-tt-400.woff?v=f6f54fd299") format("woff"); }
@font-face { font-family: "Old Standard TT"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/lib/old-standard-tt-700.woff?v=6912b1ce3f") format("woff"); }
@font-face { font-family: "Old Standard TT"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/lib/old-standard-tt-400-italic.woff?v=5b3c7053bb") format("woff"); }

/* vendor/webawesome/dist-cdn/styles/webawesome.css */
/* Cascade layers */
/* vendor/webawesome/dist-cdn/styles/layers.css */
/* Order of precedence for all cascade layers in Web Awesome */
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;

@layer wa-base {
  /**
    Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
    IE: \`<a href="#id-for-h2">\` anchors.
    */
  wa-page :is(*, *:after, *:before) {
    scroll-margin-top: var(--scroll-margin-top);
  }

  wa-page[view='desktop'] [data-toggle-nav] {
    display: none;
  }

  wa-page[view='mobile'] .wa-desktop-only,
  wa-page[view='desktop'] .wa-mobile-only {
    display: none !important;
  }
}


/* Native styles */
/* vendor/webawesome/dist-cdn/styles/native.css */
/* vendor/webawesome/dist-cdn/styles/layers.css */
/* Order of precedence for all cascade layers in Web Awesome */
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;

@layer wa-base {
  /**
    Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
    IE: \`<a href="#id-for-h2">\` anchors.
    */
  wa-page :is(*, *:after, *:before) {
    scroll-margin-top: var(--scroll-margin-top);
  }

  wa-page[view='desktop'] [data-toggle-nav] {
    display: none;
  }

  wa-page[view='mobile'] .wa-desktop-only,
  wa-page[view='desktop'] .wa-mobile-only {
    display: none !important;
  }
}


/* Required utilities */
/* vendor/webawesome/dist-cdn/styles/utilities/size.css */
@layer wa-utilities {
  .wa-size-xs {
    font-size: var(--wa-font-size-xs);
  }

  .wa-size-s {
    font-size: var(--wa-font-size-s);
  }

  .wa-size-m {
    font-size: var(--wa-font-size-m);
  }

  .wa-size-l {
    font-size: var(--wa-font-size-l);
  }

  .wa-size-xl {
    font-size: var(--wa-font-size-xl);
  }
}

/* vendor/webawesome/dist-cdn/styles/utilities/variants.css */
@layer wa-utilities {
  :where(:root),
  .wa-neutral,
  .wa-invert {
    --wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
    --wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
    --wa-color-border-loud: var(--wa-color-neutral-border-loud);
    --wa-color-border-normal: var(--wa-color-neutral-border-normal);
    --wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
    --wa-color-on-loud: var(--wa-color-neutral-on-loud);
    --wa-color-on-normal: var(--wa-color-neutral-on-normal);
    --wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
  }

  .wa-brand {
    --wa-color-fill-loud: var(--wa-color-brand-fill-loud);
    --wa-color-fill-normal: var(--wa-color-brand-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
    --wa-color-border-loud: var(--wa-color-brand-border-loud);
    --wa-color-border-normal: var(--wa-color-brand-border-normal);
    --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
    --wa-color-on-loud: var(--wa-color-brand-on-loud);
    --wa-color-on-normal: var(--wa-color-brand-on-normal);
    --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
  }

  .wa-success {
    --wa-color-fill-loud: var(--wa-color-success-fill-loud);
    --wa-color-fill-normal: var(--wa-color-success-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
    --wa-color-border-loud: var(--wa-color-success-border-loud);
    --wa-color-border-normal: var(--wa-color-success-border-normal);
    --wa-color-border-quiet: var(--wa-color-success-border-quiet);
    --wa-color-on-loud: var(--wa-color-success-on-loud);
    --wa-color-on-normal: var(--wa-color-success-on-normal);
    --wa-color-on-quiet: var(--wa-color-success-on-quiet);
  }

  .wa-warning {
    --wa-color-fill-loud: var(--wa-color-warning-fill-loud);
    --wa-color-fill-normal: var(--wa-color-warning-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
    --wa-color-border-loud: var(--wa-color-warning-border-loud);
    --wa-color-border-normal: var(--wa-color-warning-border-normal);
    --wa-color-border-quiet: var(--wa-color-warning-border-quiet);
    --wa-color-on-loud: var(--wa-color-warning-on-loud);
    --wa-color-on-normal: var(--wa-color-warning-on-normal);
    --wa-color-on-quiet: var(--wa-color-warning-on-quiet);
  }

  .wa-danger {
    --wa-color-fill-loud: var(--wa-color-danger-fill-loud);
    --wa-color-fill-normal: var(--wa-color-danger-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
    --wa-color-border-loud: var(--wa-color-danger-border-loud);
    --wa-color-border-normal: var(--wa-color-danger-border-normal);
    --wa-color-border-quiet: var(--wa-color-danger-border-quiet);
    --wa-color-on-loud: var(--wa-color-danger-on-loud);
    --wa-color-on-normal: var(--wa-color-danger-on-normal);
    --wa-color-on-quiet: var(--wa-color-danger-on-quiet);
  }
}


@layer wa-native {
  /* #region General ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    tab-size: 4;

    background-color: var(--wa-color-surface-default);
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  body {
    min-height: 100vh;
    margin: 0;
    padding: 0;

    color: var(--wa-color-text-normal);
    font-family: var(--wa-font-family-body);
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-normal);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
  }
  /* #endregion */

  /* #region Content Flow ~~~~~~~~~~~~~~~~~~~~ */
  address,
  audio,
  blockquote,
  dd,
  details,
  dl,
  fieldset,
  figure,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  iframe,
  ol,
  p,
  pre,
  table,
  ul,
  video {
    margin: 0;

    &:has(+ *) {
      margin-block-end: var(--wa-content-spacing);
    }
  }
  /* #endregion */

  /* #region Block Text ~~~~~~~~~~~~~~~~~~~~~~ */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--wa-font-size-3xl);
  }

  h2 {
    font-size: var(--wa-font-size-2xl);
  }

  h3 {
    font-size: var(--wa-font-size-xl);
  }

  h4 {
    font-size: var(--wa-font-size-l);
  }

  h5 {
    font-size: var(--wa-font-size-m);
  }

  h6 {
    font-size: var(--wa-font-size-xs);
  }

  p {
    text-wrap: wrap;
  }
  @supports (text-wrap: pretty) {
    p {
      text-wrap: pretty;
    }
  }
  blockquote {
    padding: var(--wa-space-xl);

    color: var(--wa-color-text-quiet);
    font-family: var(--wa-font-family-longform);
    font-size: var(--wa-font-size-larger);

    border-inline-start: var(--wa-border-style) var(--wa-border-width-l) var(--wa-color-neutral-border-quiet);
  }

  hr {
    margin: var(--wa-content-spacing) 0;

    border: none;
    border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
  }

  figcaption {
    margin-block-start: var(--wa-space-xs);

    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-smaller);
    line-height: var(--wa-line-height-condensed);
  }
  /* #endregion */

  /* #region Lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  ul,
  ol {
    padding: 0;
  }

  li > ul,
  li > ol {
    margin-inline-start: 0.25em;
  }

  ul {
    list-style: disc;
  }

  li {
    margin-inline-start: 1.125em;
    padding: 0;
  }

  /* `ul` markers are graphical (3:1 contrast threshold); `ol` markers are text
     (4.5:1). Numerals also wear transparency more than discs, so they keep more
     contrast. `currentColor` lets markers ride along when text color changes. */
  ul > li::marker {
    color: color-mix(in oklch, currentColor 40%, transparent);
  }

  ol > li::marker {
    color: color-mix(in oklch, currentColor 60%, transparent);
  }

  dt {
    font-weight: var(--wa-font-weight-bold);
  }

  menu {
    list-style: none;
    margin: 0;
    padding: 0;

    & > li {
      margin: 0;
    }
  }
  /* #endregion */

  /* #region Inline Text ~~~~~~~~~~~~~~~~~~~~~ */
  strong,
  b {
    font-weight: var(--wa-font-weight-bold);
  }

  em,
  i {
    font-style: italic;
  }

  u {
    text-decoration-line: underline;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  s {
    text-decoration-line: line-through;
    text-decoration-thickness: 0.09375em;
  }

  ins {
    text-decoration-color: var(--wa-color-success-on-quiet);
    text-decoration-line: underline;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  del {
    color: color-mix(in oklab, currentColor, transparent 10%);
    text-decoration-color: var(--wa-color-danger-on-quiet);
    text-decoration-line: line-through;
    text-decoration-thickness: 0.09375em;
  }

  mark {
    padding: 0.125em 0.25em;

    color: var(--wa-color-warning-on-quiet);

    background-color: var(--wa-color-warning-fill-quiet);
    border-radius: var(--wa-border-radius-s);
  }

  small {
    font-size: var(--wa-font-size-smaller);
  }

  sub,
  sup {
    font-size: var(--wa-font-size-smaller);
    line-height: 0;
  }

  sub {
    vertical-align: sub;
  }

  sup {
    vertical-align: super;
  }

  abbr[title] {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;

    cursor: help;
  }

  kbd {
    padding: 0.125em 0.25em;

    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);
    font-weight: var(--wa-font-weight-code);

    border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
    border-radius: var(--wa-border-radius-s);
    box-shadow: 0 0.125em 0 0 color-mix(in oklab, currentColor, transparent 50%);

    wa-icon {
      vertical-align: -2px;
    }
  }
  /* #endregion */

  /* #region Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  a {
    color: var(--wa-color-text-link);
    text-decoration: var(--wa-link-decoration-default);
    -webkit-text-decoration: var(--wa-link-decoration-default);
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  *:is([appearance~='accent'], .wa-accent) {
    a,
    a:hover {
      color: currentColor;
    }
  }

  a:hover {
    color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
    text-decoration: var(--wa-link-decoration-hover);
    -webkit-text-decoration: var(--wa-link-decoration-hover);
  }

  a:focus,
  button:focus {
    outline: none;
  }

  a:focus-visible,
  button:focus-visible {
    outline: var(--wa-focus-ring);
    outline-offset: var(--wa-focus-ring-offset);
  }
  /* #endregion */

  /* #region Code ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  code,
  samp,
  var {
    padding: 0.125em 0.25em;

    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);
    font-weight: var(--wa-font-weight-code);

    background-color: var(--wa-color-overlay-inline);
    border-radius: var(--wa-border-radius-s);
  }

  pre {
    padding: var(--wa-space-m);

    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-smaller);
    font-weight: var(--wa-font-weight-code);
    white-space: pre;

    background-color: var(--wa-color-overlay-inline);
    border-radius: var(--wa-panel-border-radius);
    overflow-x: auto;

    /* Remove overlapping styles for child code elements */
    & code,
    & samp,
    & var {
      padding: 0;

      font-size: 1em;

      background-color: transparent;
    }

    /* Print styles */
    @media print {
      background: none;
      border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
    }
  }
  /* #endregion */

  /* #region Media ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  img,
  svg,
  picture,
  video {
    max-width: 100%;
    height: auto;
  }

  img,
  picture,
  video {
    border-radius: var(--wa-border-radius-m);
  }

  embed,
  iframe,
  object {
    max-width: 100%;
  }

  iframe {
    border: none;
  }
  /* #endregion */

  /* #region Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  table {
    width: 100%;

    border: none;
    border-collapse: collapse;

    &.wa-tabular-nums,
    & .wa-tabular-nums {
      font-variant-numeric: tabular-nums;
    }
  }

  caption {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-smaller);

    &:has(+ *) {
      margin-block-end: 0.75em;
    }
  }

  tbody {
    tr {
      border-block-start: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-quiet);

      :where(table.wa-zebra-rows) &:nth-child(odd) {
        background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent);
      }

      :where(table.wa-hover-rows) & {
        @media (hover: hover) {
          &:hover {
            background-color: var(--wa-color-fill-quiet);

            &,
            + tr {
              border-block-start-color: var(--wa-color-border-normal);
            }
          }
        }
      }
    }
  }

  td,
  th {
    padding: 0.75em;

    text-align: start;
    vertical-align: top;
  }

  th {
    font-weight: var(--wa-font-weight-bold);

    /* Column headers only, ruled out by [scope="row"] or by a following non-header cell.
     * Row headers keep the body font size because padding here is em-relative, so smaller
     * type would pull their text out of alignment with the cells beside them. */
    &:not([scope='row']):not(:has(+ td)) {
      font-size: var(--wa-font-size-smaller);
      border-block-end: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-border-normal);
    }
  }
  /* #endregion */

  /* #region Details ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  details {
    padding: 0;

    background-color: var(--wa-color-surface-default);
    border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
    border-radius: var(--wa-panel-border-radius);

    overflow-anchor: none;

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: var(--wa-space-m);

      border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));

      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;

      > * {
        margin: 0;
      }

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: var(--wa-focus-ring);
        outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset));
      }
    }

    &[open] {
      padding: 0 var(--wa-space-m) var(--wa-space-m) var(--wa-space-m);

      summary {
        margin-inline: calc(-1 * var(--wa-space-m));

        border-end-start-radius: 0;
        border-end-end-radius: 0;
      }
    }

    &::details-content {
      box-sizing: border-box; /* Ensure contents don't overflow */
    }

    /* Print styles */
    @media print {
      background: none;
      border: solid var(--wa-border-width-s) var(--wa-color-surface-border);

      summary {
        list-style: none;
      }
    }
  }

  /* Replace the summary marker */
  details summary {
    &::marker,
    &::-webkit-details-marker {
      display: none;
    }

    &::after {
      content: '';
      background-color: var(--wa-color-text-quiet);
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
        center no-repeat;
      width: 1rem;
      height: 1rem;
      rotate: 0deg;
    }

    &:dir(rtl)::after {
      rotate: 180deg;
    }
  }

  details[open] summary::after {
    rotate: 90deg;
  }
  /* #endregion */

  /* #region Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  dialog {
    flex-direction: column;
    align-items: start;

    width: 32rem;
    max-width: calc(100% - var(--wa-space-l));
    padding: var(--wa-space-l);

    background-color: var(--wa-color-surface-raised);
    border-radius: var(--wa-panel-border-radius);
    border: none;
    box-shadow: var(--wa-shadow-l);

    transition: var(--wa-transition-slow, 200ms) var(--wa-transition-easing);

    /* Center the dialog */
    margin: auto;
    inset: 0;

    &[open] {
      display: flex;
    }

    &:focus {
      outline: none;
    }
  }

  dialog::backdrop {
    background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
  }
  /* #endregion */

  /* #region Form Labels ~~~~~~~~~~~~~~~~~~~~~ */
  label {
    display: inline-block;
    position: relative;

    color: var(--wa-form-control-label-color);
    font-weight: var(--wa-form-control-label-font-weight);
    line-height: var(--wa-form-control-label-line-height);

    &:has(
        input:not(
            [type='button'],
            [type='checkbox'],
            [type='color'],
            [type='file'],
            [type='hidden'],
            [type='image'],
            [type='radio'],
            [type='reset'],
            [type='submit']
          ),
        textarea,
        select
      ) {
      width: 100%;
    }

    & + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
    & > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
      margin-block-start: 0.5em;
    }
  }
  /* #endregion */

  /* #region Fieldsets ~~~~~~~~~~~~~~~~~~~~~~~ */
  fieldset {
    padding: var(--wa-space-l);
    padding-block-start: calc(var(--wa-space-l) - 0.5em);

    border: solid 1px var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
  }

  legend {
    padding: 0;
    padding-inline: var(--wa-space-xs);

    font-weight: var(--wa-form-control-label-font-weight);
  }
  /* #endregion */

  /* #region Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  button,
  input[type='button'],
  input[type='reset'],
  input[type='submit'],
  input[type='file'],
  a.wa-button {
    /* We allow modifier classes on <input type="file">,
     * but these selectors ensure the styles only apply to
     * the file selector button in the user agent's shadow root */
    &:not(input[type='file']),
    &::file-selector-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      height: var(--wa-form-control-height);
      padding: 0 var(--wa-form-control-padding-inline);

      font-family: inherit;
      font-size: var(--wa-form-control-value-font-size);
      font-weight: var(--wa-font-weight-action);
      text-decoration: none;
      vertical-align: middle;
      white-space: nowrap;

      border-style: var(--wa-border-style);
      border-width: max(1px, var(--wa-form-control-border-width));

      /* These read the button group's internal custom properties so native buttons can be grouped */
      border-start-start-radius: var(--_button-start-start-radius, var(--wa-form-control-border-radius));
      border-start-end-radius: var(--_button-start-end-radius, var(--wa-form-control-border-radius));
      border-end-start-radius: var(--_button-end-start-radius, var(--wa-form-control-border-radius));
      border-end-end-radius: var(--_button-end-end-radius, var(--wa-form-control-border-radius));

      transition-property: background, border, box-shadow, color;
      transition-duration: var(--wa-transition-fast);
      transition-timing-function: var(--wa-transition-easing);

      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;

      /* Collapse adjacent borders */
      margin-inline-start: var(--_button-horizontal-indent);
      margin-block-start: var(--_button-vertical-indent);
    }

    /* Outlined variants use a negative indent so adjacent borders overlap */
    &.wa-outlined {
      &:not(input[type='file']),
      &::file-selector-button {
        margin-inline-start: var(--_button-horizontal-indent-outlined);
        margin-block-start: var(--_button-vertical-indent-outlined);
      }
    }

    /* Default styles for standard buttons */
    &:not(input[type='file']) {
      color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
      background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
      border-color: transparent;

      &:not(:disabled) {
        @media (hover: hover) {
          &:hover {
            background-color: color-mix(
              in oklab,
              var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
              var(--wa-color-mix-hover)
            );
            transform: var(--wa-button-transform-hover);
          }
        }

        &:active {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
            var(--wa-color-mix-active)
          );
          transform: var(--wa-button-transform-active);
        }

        @media (prefers-reduced-motion: reduce) {
          &:hover,
          &:active {
            transform: none;
          }
        }
      }
    }

    /* Default styles for file selector buttons */
    &:is(input[type='file']) {
      &::file-selector-button {
        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
        background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
        border-color: transparent;
      }

      &:not(:disabled) {
        &::file-selector-button:hover {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
            var(--wa-color-mix-hover)
          );
        }

        &::file-selector-button:active {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
            var(--wa-color-mix-active)
          );
        }
      }
    }

    /* Modifier classes */
    &.wa-plain {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
        background-color: transparent;
        border-color: transparent;
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
            var(--wa-color-mix-active)
          );
        }
      }
    }

    &.wa-outlined {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
        background-color: transparent;
        border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
            var(--wa-color-mix-active)
          );
        }
      }
    }

    &.wa-filled {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
        background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
        border-color: transparent;
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
            var(--wa-color-mix-hover)
          );
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
            var(--wa-color-mix-active)
          );
        }
      }

      &.wa-outlined {
        &:not(input[type='file']),
        &::file-selector-button {
          border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
        }
      }
    }

    &.wa-accent {
      &:not(input[type='file']),
      &::file-selector-button {
        color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
        background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
        border-color: transparent;
      }

      &:not(:disabled) {
        &:not(input[type='file']):hover,
        &::file-selector-button:hover {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
            var(--wa-color-mix-hover)
          );
        }

        &:not(input[type='file']):active,
        &::file-selector-button:active {
          background-color: color-mix(
            in oklab,
            var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
            var(--wa-color-mix-active)
          );
        }
      }
    }

    &.wa-pill {
      &:not(input[type='file']),
      &::file-selector-button {
        border-start-start-radius: var(--_button-start-start-radius, var(--wa-border-radius-pill));
        border-start-end-radius: var(--_button-start-end-radius, var(--wa-border-radius-pill));
        border-end-start-radius: var(--_button-end-start-radius, var(--wa-border-radius-pill));
        border-end-end-radius: var(--_button-end-end-radius, var(--wa-border-radius-pill));
      }
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }

    /* Wrap in :is() so that Safari doesn't stop parsing this block */
    &:is(::-moz-focus-inner) {
      border: 0;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;

      /* When disabled, prevent mouse events from bubbling up from children */
      * {
        pointer-events: none;
      }
    }

    /* Adds space between icons and adjacent elements
     * Prefer sibling selectors over :first-child/:last-child to avoid extra space when an icon is used alone */
    & > wa-icon:has(+ *) {
      margin-inline-end: 0.75em;
    }

    & > * + wa-icon {
      margin-inline-start: 0.75em;
    }
  }
  /* #endregion */

  /* #region File Inputs ~~~~~~~~~~~~~~~~~~~~~ */
  input[type='file'] {
    display: block;

    max-inline-size: 100%;

    color: var(--wa-form-control-value-color);
    font-family: inherit;
    font-size: var(--wa-form-control-value-font-size);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
    vertical-align: middle;

    border-radius: var(--wa-border-radius-m);

    cursor: pointer;
  }
  /* #endregion */

  /* #region Checkboxes + Radios ~~~~~~~~~~~~~ */
  input[type='checkbox'],
  label:has(input[type='checkbox']),
  input[type='radio'],
  label:has(input[type='radio']) {
    display: inline-flex;

    width: fit-content;

    color: var(--wa-form-control-value-color);
    font-family: inherit;
    font-size: var(--wa-form-control-value-font-size);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);

    user-select: none;
    -webkit-user-select: none;

    &,
    + label {
      cursor: pointer;
    }

    &:disabled,
    &:has(:disabled) {
      opacity: 0.5;

      cursor: not-allowed;
    }
  }

  input[type='checkbox'],
  input[type='radio'] {
    appearance: none;

    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: var(--wa-form-control-toggle-size);
    height: var(--wa-form-control-toggle-size);
    margin: 0;
    margin-inline-end: 0.5em;

    background-color: var(--wa-form-control-background-color);
    border-color: var(--wa-form-control-border-color);
    border-style: var(--wa-border-style);
    border-width: var(--wa-form-control-border-width);

    transition:
      background var(--wa-transition-normal),
      border-color var(--wa-transition-fast),
      box-shadow var(--wa-transition-fast),
      color var(--wa-transition-fast);
    transition-timing-function: var(--wa-transition-easing);

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }
  }

  /* Checkbox */
  input[type='checkbox'] {
    --checked-icon-color: var(--wa-color-brand-on-loud);
    --checked-icon-scale: 0.8;

    border-radius: min(
      calc(var(--wa-form-control-toggle-size) * 0.375),
      var(--wa-border-radius-s)
    ); /* min prevents entirely circular checkbox */

    &:checked,
    &:indeterminate {
      color: var(--checked-icon-color);

      background-color: var(--wa-form-control-activated-color);
      border-color: var(--wa-form-control-activated-color);
    }

    &:checked::after,
    &:indeterminate::after {
      content: '';

      width: var(--wa-form-control-toggle-size);
      height: var(--wa-form-control-toggle-size);
      scale: var(--checked-icon-scale);

      background-color: currentColor;
    }

    &:checked::after {
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
        center / 1em 1em no-repeat;
    }

    &:indeterminate::after {
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z"/></svg>')
        center no-repeat;
    }
  }

  /* Radio */
  input[type='radio'] {
    --checked-icon-color: var(--wa-form-control-activated-color);
    --checked-icon-scale: 0.7;

    color: transparent;

    border-radius: 50%;

    &:checked {
      color: var(--checked-icon-color);

      border-color: var(--wa-form-control-activated-color);
    }

    &:checked::after {
      content: '';

      aspect-ratio: 1;
      width: 100%;
      scale: var(--checked-icon-scale);

      background-color: currentColor;
      border-radius: 50%;
    }
  }
  /* #endregion */

  /* #region Text Fields + Textareas + Selects */
  input:not(
    /* Exclude inputs that don't accept text */
    [type='button'],
    [type='checkbox'],
    [type='color'],
    [type='file'],
    [type='hidden'],
    [type='image'],
    [type='radio'],
    [type='range'],
    [type='reset'],
    [type='submit']
  ), textarea, select {
    width: 100%;
    height: var(--wa-form-control-height);
    padding: 0 var(--wa-form-control-padding-inline);

    color: var(--wa-form-control-value-color);
    font-size: var(--wa-form-control-value-size);
    font-family: inherit;
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
    vertical-align: middle;

    background-color: var(--wa-form-control-background-color);
    border-color: var(--wa-form-control-border-color);
    border-style: var(--wa-form-control-border-style);
    border-width: var(--wa-form-control-border-width);
    border-radius: var(--wa-form-control-border-radius);

    transition:
      background-color var(--wa-transition-normal),
      border-color var(--wa-transition-normal),
      outline-color var(--wa-transition-fast);
    transition-timing-function: var(--wa-transition-easing);
    outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) transparent;
    outline-offset: var(--wa-focus-ring-offset);

    cursor: text;

    &::placeholder {
      color: var(--wa-form-control-placeholder-color);

      user-select: none;
      -webkit-user-select: none;
    }

    &:focus-visible {
      outline-color: var(--wa-color-focus);
    }

    &:disabled {
      opacity: 0.5;

      cursor: not-allowed;
    }

    &.wa-outlined {
      background-color: var(--wa-form-control-background-color);
      border-color: var(--wa-form-control-border-color);
    }

    &.wa-filled {
      background-color: var(--wa-color-neutral-fill-quiet);
      border-color: var(--wa-color-neutral-fill-quiet);

      &.wa-outlined {
        border-color: var(--wa-form-control-border-color);
      }
    }

    &.wa-pill {
      border-radius: var(--wa-border-radius-pill);
    }
  }

  /* Textarea */
  textarea {
    height: auto;
    min-height: var(--wa-form-control-height);
    scroll-padding-block: var(--wa-form-control-padding-block);
    padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline); /* accounts for the larger line height of textarea content */

    line-height: var(--wa-line-height-normal);

    resize: vertical;
  }

  /* Select */
  select {
    --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="rgb(180 180 200)" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');

    appearance: none;

    position: relative;

    min-width: 0;
    background-image: var(--icon-caret), var(--icon-caret);
    background-repeat: no-repeat;
    background-position: center right var(--wa-form-control-padding-inline);
    background-blend-mode: hue, difference;
    background-size: 1rem 1rem;
    text-overflow: ellipsis;
    padding-inline-end: calc(var(--wa-form-control-padding-inline) + 1rem + var(--wa-space-xs));
    overflow: hidden;

    cursor: pointer;

    &[multiple] {
      height: auto;
      background-image: none;
      padding-inline: var(--wa-form-control-padding-inline);
    }
  }
  /* #endregion */

  /* #region Color Pickers ~~~~~~~~~~~~~~~~~~~ */
  input[type='color'] {
    display: block;

    block-size: var(--wa-form-control-height);
    inline-size: var(--wa-form-control-height);
    padding: calc(var(--wa-form-control-border-width) * 2);

    font-size: 1em;

    background: transparent;
    border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
    border-radius: var(--wa-form-control-border-radius);

    cursor: pointer;
    forced-color-adjust: none;

    &::-webkit-color-swatch-wrapper {
      padding: 0;
      border-radius: inherit;
    }

    &::-webkit-color-swatch {
      border: none;
      border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
    }

    &::-moz-color-swatch {
      border: none;
      border-radius: calc(var(--wa-form-control-border-radius) - var(--wa-form-control-border-width) * 3);
    }

    &:focus-visible {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }
  }
  /* #endregion */

  /* #region Sliders ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  input[type='range'] {
    --thumb-width: 1.4em;
    --thumb-height: 1.4em;
    --track-size: 0.5em;

    -webkit-appearance: none;

    display: flex;
    flex-direction: column;
    position: relative;

    width: 100%;
    height: var(--track-size);
    margin: 0;

    font-size: inherit;
    line-height: var(--wa-form-control-height);
    vertical-align: middle;

    background-color: var(--wa-color-neutral-fill-normal);
    border-radius: calc(var(--track-size) / 2);

    &::-webkit-slider-runnable-track {
      width: 100%;
      height: var(--track-size);

      border: none;
      border-radius: 999px;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;

      width: var(--thumb-width);
      height: var(--thumb-height);
      margin-top: calc(var(--thumb-height) / -2 + var(--track-size) / 2);

      background-color: var(--wa-form-control-activated-color);
      border: solid 0.125em var(--wa-color-surface-default);
      border-radius: 50%;

      transition-property: background-color, border-color, box-shadow, color;
      transition-duration: var(--wa-transition-normal);
      transition-timing-function: var(--wa-transition-easing);
    }

    &:enabled {
      &:focus-visible::-webkit-slider-thumb {
        outline: var(--wa-focus-ring);
        outline-offset: var(--wa-focus-ring-offset);
      }

      &::-webkit-slider-thumb {
        cursor: pointer;
      }

      &::-webkit-slider-thumb:active {
        cursor: grabbing;
      }
    }

    &::-moz-focus-outer {
      border: 0;
    }

    &::-moz-range-progress {
      height: var(--track-size);

      background-color: var(--wa-color-neutral-fill-normal);
      border-radius: 3px;
    }

    &::-moz-range-track {
      width: 100%;
      height: var(--track-size);

      background-color: var(--wa-color-neutral-fill-normal);
      border: none;
      border-radius: 999px;
    }

    &::-moz-range-thumb {
      width: var(--thumb-width);
      height: var(--thumb-height);

      background-color: var(--wa-form-control-activated-color);
      border: solid 0.125em var(--wa-color-surface-default);
      border-radius: 50%;

      transition-property: background-color, border-color, box-shadow, color;
      transition-duration: var(--wa-transition-normal);
      transition-timing-function: var(--wa-transition-easing);
    }

    &:enabled {
      &:focus-visible::-moz-range-thumb {
        outline: var(--wa-focus-ring);
        outline-offset: var(--wa-focus-ring-offset);
      }

      &::-moz-range-thumb {
        cursor: pointer;
      }

      &::-moz-range-thumb:active {
        cursor: grabbing;
      }
    }
  }

  label > input[type='range'] {
    margin-block-start: 1em;
  }

  input[type='range']:focus {
    outline: none;
  }

  input[type='range']:disabled {
    opacity: 0.5;

    cursor: not-allowed;

    &::-webkit-slider-thumb {
      cursor: not-allowed;
    }

    &::-moz-range-thumb {
      cursor: not-allowed;
    }
  }
  /* #endregion */

  /* #region Progress ~~~~~~~~~~~~~~~~~~~~~~~~ */
  progress {
    --indicator-color: var(--wa-color-brand-fill-loud);

    width: 100%;
    height: 1rem;
    overflow: hidden;

    color: var(--wa-color-brand-on-loud);

    background-color: var(--wa-color-neutral-fill-normal);
    border-radius: var(--wa-border-radius-pill);

    &::-webkit-progress-bar {
      background: transparent;
    }

    &[value]::-webkit-progress-value {
      background-color: var(--indicator-color);
    }

    &::-moz-progress-bar {
      background-color: var(--indicator-color);
    }
  }

  /* Indeterminate */
  progress:not([value]) {
    padding-left: var(--inset-inline-start);

    animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);

    &::-webkit-progress-bar {
      background-color: var(
        --indicator-color
      ); /* Chrome does not render a ::-webkit-progress-value for indeterminate progress */
    }
  }

  @keyframes wa-fade-in {
    from {
      opacity: 0;
    }
  }

  /* For some reason Chrome fiercely resists animations on this pseudo
	  so we had to do it with padding on <progress> */
  @keyframes wa-progress-indeterminate {
    0% {
      padding-inline-end: 100%;
    }

    25%,
    100% {
      padding-inline-end: 0%;
    }

    75%,
    100% {
      padding-inline-start: 100%;
    }
  }
  /* #endregion */

  /* #region Validation ~~~~~~~~~~~~~~~~~~~~~~ */
  .wa-invalid {
    --wa-form-control-border-color: var(--wa-color-danger-border-loud);
    --wa-form-control-activated-color: var(--wa-color-danger-fill-loud);
    --wa-form-control-value-color: var(--wa-color-danger-on-quiet);

    /* Focus ring */
    --wa-color-focus: var(--wa-color-danger-border-loud);

    /* Help text */
    --wa-color-text-quiet: var(--wa-color-danger-on-quiet);
  }

  .wa-valid {
    --wa-form-control-border-color: var(--wa-color-success-border-loud);
    --wa-form-control-activated-color: var(--wa-color-success-fill-loud);
    --wa-form-control-value-color: var(--wa-color-success-on-quiet);

    /* Focus ring */
    --wa-color-focus: var(--wa-color-success-border-loud);

    /* Help text */
    --wa-color-text-quiet: var(--wa-color-success-on-quiet);
  }
  /* #endregion */
}


/* CSS utilities */
/* vendor/webawesome/dist-cdn/styles/utilities.css */
/* vendor/webawesome/dist-cdn/styles/layers.css */
/* Order of precedence for all cascade layers in Web Awesome */
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;

@layer wa-base {
  /**
    Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
    IE: \`<a href="#id-for-h2">\` anchors.
    */
  wa-page :is(*, *:after, *:before) {
    scroll-margin-top: var(--scroll-margin-top);
  }

  wa-page[view='desktop'] [data-toggle-nav] {
    display: none;
  }

  wa-page[view='mobile'] .wa-desktop-only,
  wa-page[view='desktop'] .wa-mobile-only {
    display: none !important;
  }
}


/* vendor/webawesome/dist-cdn/styles/utilities/fouce.css */
@layer wa-utilities {
  /*
   * Utility to minimize FOUCE and show custom elements only after they're registered
   */
  .wa-cloak:has(:not(:defined)) {
    animation: 2s step-end wa-fouce-cloak;
  }

  @keyframes wa-fouce-cloak {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* vendor/webawesome/dist-cdn/styles/utilities/visually-hidden.css */
@layer wa-utilities {
  .wa-visually-hidden:not(:focus-within),
  .wa-visually-hidden-force,
  .wa-visually-hidden-hint::part(hint),
  .wa-visually-hidden-label::part(label),
  .wa-visually-hidden-label::part(form-control-label) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;

    /**
      Always set top / left to prevent accidental overflows. (we could also set -1px margin, but this seems sufficient)
      https://github.com/shoelace-style/webawesome/issues/2567
     */
    top: 0px !important;
    left: 0px !important;
  }
}

/* vendor/webawesome/dist-cdn/styles/utilities/scroll-lock.css */
@layer wa-utilities {
  /* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
  @supports (scrollbar-gutter: stable) {
    .wa-scroll-lock {
      scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
    }

    .wa-scroll-lock body {
      overflow: hidden !important;
    }
  }

  /** This can go away once Safari has scrollbar-gutter support. */
  @supports not (scrollbar-gutter: stable) {
    .wa-scroll-lock body {
      padding-right: var(--wa-scroll-lock-size) !important;
      overflow: hidden !important;
    }
  }
}

/* vendor/webawesome/dist-cdn/styles/utilities/placeholder.css */
@layer wa-utilities {
  .wa-placeholder {
    align-self: stretch;
    background-color: var(--wa-color-neutral-fill-quiet);
    border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-l);
    padding: var(--wa-space-3xl);
  }
}

/* vendor/webawesome/dist-cdn/styles/utilities/align-items.css */
@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure an align-items util produces a visible change */
  :where(
    .wa-align-items-start,
    .wa-align-items-end,
    .wa-align-items-center,
    .wa-align-items-stretch,
    .wa-align-items-baseline
  ) {
    display: flex;
  }

  .wa-align-items-start {
    align-items: flex-start;
  }
  .wa-align-items-end {
    align-items: flex-end;
  }
  .wa-align-items-center {
    align-items: center;
  }
  .wa-align-items-stretch {
    align-items: stretch;
  }
  .wa-align-items-baseline {
    align-items: baseline;
  }

  .wa-align-self-start {
    align-self: flex-start;
  }
  .wa-align-self-end {
    align-self: flex-end;
  }
  .wa-align-self-center {
    align-self: center;
  }
  .wa-align-self-stretch {
    align-self: stretch;
  }
  .wa-align-self-baseline {
    align-self: baseline;
  }
}

/* vendor/webawesome/dist-cdn/styles/utilities/justify-content.css */
@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure a justify-content util produces a visible change */
  :where(
    .wa-justify-content-start,
    .wa-justify-content-end,
    .wa-justify-content-center,
    .wa-justify-content-space-around,
    .wa-justify-content-space-between,
    .wa-justify-content-space-evenly
  ) {
    display: flex;
  }

  .wa-justify-content-start {
    justify-content: flex-start;
  }
  .wa-justify-content-end {
    justify-content: flex-end;
  }
  .wa-justify-content-center {
    justify-content: center;
  }
  .wa-justify-content-space-around {
    justify-content: space-around;
  }
  .wa-justify-content-space-between {
    justify-content: space-between;
  }
  .wa-justify-content-space-evenly {
    justify-content: space-evenly;
  }
}

/* vendor/webawesome/dist-cdn/styles/utilities/flex-wrap.css */
@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure a flex wrap util produces a visible change */
  :where(.wa-flex-wrap, .wa-flex-nowrap, .wa-flex-wrap-reverse) {
    display: flex;
  }

  .wa-flex-wrap {
    flex-wrap: wrap;
  }
  .wa-flex-nowrap {
    flex-wrap: nowrap;
  }
  .wa-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

/* vendor/webawesome/dist-cdn/styles/utilities/border-radius.css */
@layer wa-utilities {
  .wa-border-radius-s {
    border-radius: var(--wa-border-radius-s);
  }
  .wa-border-radius-m {
    border-radius: var(--wa-border-radius-m);
  }
  .wa-border-radius-l {
    border-radius: var(--wa-border-radius-l);
  }
  .wa-border-radius-pill {
    border-radius: var(--wa-border-radius-pill);
  }
  .wa-border-radius-circle {
    border-radius: var(--wa-border-radius-circle);
  }
  .wa-border-radius-square {
    border-radius: var(--wa-border-radius-square);
  }
}

/* vendor/webawesome/dist-cdn/styles/utilities/gap.css */
@layer wa-utilities {
  /* Apply Flexbox with 0 specificity to ensure a gap util produces a visible change */
  :where(
    .wa-gap-0,
    .wa-gap-3xs,
    .wa-gap-2xs,
    .wa-gap-xs,
    .wa-gap-s,
    .wa-gap-m,
    .wa-gap-l,
    .wa-gap-xl,
    .wa-gap-2xl,
    .wa-gap-3xl,
    .wa-gap-4xl,
    .wa-gap-5xl
  ) {
    display: flex;
  }

  .wa-gap-0 {
    gap: 0px;
  }
  .wa-gap-3xs {
    gap: var(--wa-space-3xs);
  }
  .wa-gap-2xs {
    gap: var(--wa-space-2xs);
  }
  .wa-gap-xs {
    gap: var(--wa-space-xs);
  }
  .wa-gap-s {
    gap: var(--wa-space-s);
  }
  .wa-gap-m {
    gap: var(--wa-space-m);
  }
  .wa-gap-l {
    gap: var(--wa-space-l);
  }
  .wa-gap-xl {
    gap: var(--wa-space-xl);
  }
  .wa-gap-2xl {
    gap: var(--wa-space-2xl);
  }
  .wa-gap-3xl {
    gap: var(--wa-space-3xl);
  }
  .wa-gap-4xl {
    gap: var(--wa-space-4xl);
  }
  .wa-gap-5xl {
    gap: var(--wa-space-5xl);
  }
}

/* vendor/webawesome/dist-cdn/styles/utilities/text.css */
@layer wa-utilities {
  /* #region General ~~~~~ */
  [class*='wa-body'] {
    font-family: var(--wa-font-family-body);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-normal);
  }

  [class*='wa-heading'] {
    font-family: var(--wa-font-family-heading);
    font-weight: var(--wa-font-weight-heading);
    line-height: var(--wa-line-height-condensed);
    text-wrap: balance;
  }

  [class*='wa-caption'] {
    color: var(--wa-color-text-quiet);
    font-family: var(--wa-font-family-body);
    font-weight: var(--wa-font-weight-body);
    line-height: var(--wa-line-height-condensed);
  }

  [class*='wa-longform'] {
    font-family: var(--wa-font-family-longform);
    font-weight: var(--wa-font-weight-longform);
    line-height: var(--wa-line-height-normal);
  }

  .wa-font-size-3xs,
  .wa-body-3xs,
  .wa-heading-3xs,
  .wa-caption-3xs,
  .wa-longform-3xs {
    font-size: var(--wa-font-size-3xs);
  }

  .wa-font-size-2xs,
  .wa-body-2xs,
  .wa-heading-2xs,
  .wa-caption-2xs,
  .wa-longform-2xs {
    font-size: var(--wa-font-size-2xs);
  }

  .wa-font-size-xs,
  .wa-body-xs,
  .wa-heading-xs,
  .wa-caption-xs,
  .wa-longform-xs {
    font-size: var(--wa-font-size-xs);
  }

  .wa-font-size-s,
  .wa-body-s,
  .wa-heading-s,
  .wa-caption-s,
  .wa-longform-s {
    font-size: var(--wa-font-size-s);
  }

  .wa-font-size-m,
  .wa-body-m,
  .wa-heading-m,
  .wa-caption-m,
  .wa-longform-m {
    font-size: var(--wa-font-size-m);
  }

  .wa-font-size-l,
  .wa-body-l,
  .wa-heading-l,
  .wa-caption-l,
  .wa-longform-l {
    font-size: var(--wa-font-size-l);
  }

  .wa-font-size-xl,
  .wa-body-xl,
  .wa-heading-xl,
  .wa-caption-xl,
  .wa-longform-xl {
    font-size: var(--wa-font-size-xl);
  }

  .wa-font-size-2xl,
  .wa-body-2xl,
  .wa-heading-2xl,
  .wa-caption-2xl,
  .wa-longform-2xl {
    font-size: var(--wa-font-size-2xl);
  }

  .wa-font-size-3xl,
  .wa-body-3xl,
  .wa-heading-3xl,
  .wa-caption-3xl,
  .wa-longform-3xl {
    font-size: var(--wa-font-size-3xl);
  }

  .wa-font-size-4xl,
  .wa-body-4xl,
  .wa-heading-4xl,
  .wa-caption-4xl,
  .wa-longform-4xl {
    font-size: var(--wa-font-size-4xl);
  }

  .wa-font-size-5xl,
  .wa-body-5xl,
  .wa-heading-5xl,
  .wa-caption-5xl,
  .wa-longform-5xl {
    font-size: var(--wa-font-size-5xl);
  }

  .wa-font-weight-light {
    font-weight: var(--wa-font-weight-light);
  }

  .wa-font-weight-normal {
    font-weight: var(--wa-font-weight-normal);
  }

  .wa-font-weight-semibold {
    font-weight: var(--wa-font-weight-semibold);
  }

  .wa-font-weight-bold {
    font-weight: var(--wa-font-weight-bold);
  }

  .wa-color-text-normal {
    color: var(--wa-color-text-normal);
  }

  .wa-color-text-quiet {
    color: var(--wa-color-text-quiet);
  }

  .wa-color-text-link {
    color: var(--wa-color-text-link);
  }

  .wa-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wa-text-nowrap,
  .wa-text-wrap-nowrap {
    text-wrap: nowrap;
  }

  .wa-text-balance,
  .wa-text-wrap-balance {
    text-wrap: balance;
  }

  @supports (text-wrap: pretty) {
    .wa-text-pretty,
    .wa-text-wrap-pretty {
      text-wrap: pretty;
    }
  }

  .wa-text-uppercase {
    text-transform: uppercase;
  }

  .wa-text-lowercase {
    text-transform: lowercase;
  }

  .wa-text-capitalize {
    text-transform: capitalize;
  }

  .wa-text-start {
    text-align: start;
  }

  .wa-text-center {
    text-align: center;
  }

  .wa-text-end {
    text-align: end;
  }

  .wa-text-justify {
    text-align: justify;
  }
  /* #endregion */

  /* #region Links ~~~~~~~ */
  .wa-link {
    color: var(--wa-color-text-link);
    text-decoration: var(--wa-link-decoration-default);
    -webkit-text-decoration: var(--wa-link-decoration-default);

    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
        text-decoration: var(--wa-link-decoration-hover);
        -webkit-text-decoration: var(--wa-link-decoration-hover);
      }
    }
  }

  .wa-link-plain {
    color: var(--wa-color-text-normal);
    text-decoration: none;

    @media (hover: hover) {
      &:hover {
        color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
        text-decoration: none;
      }
    }
  }
  /* #endregion */

  /* #region Lists ~~~~~~~ */
  .wa-list-plain:is(ol, ul) {
    list-style: none;
    padding-inline-start: 0;

    > li {
      margin-inline-start: 0;
    }
  }
  /* #endregion */

  /* #region Form Controls */
  .wa-form-control-label {
    color: var(--wa-form-control-label-color);
    font-weight: var(--wa-form-control-label-font-weight);
    line-height: var(--wa-form-control-label-line-height);
  }

  .wa-form-control-value {
    color: var(--wa-form-control-value-color);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
  }

  .wa-form-control-placeholder {
    color: var(--wa-form-control-placeholder-color);
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
  }

  .wa-form-control-hint {
    color: var(--wa-form-control-hint-color);
    font-weight: var(--wa-form-control-hint-font-weight);
    font-size: var(--wa-font-size-smaller);
    line-height: var(--wa-form-control-hint-line-height);
  }
  /* #endregion */
}

/* vendor/webawesome/dist-cdn/styles/utilities/layout.css */
@layer wa-utilities {
  :is(
      [class*='wa-cluster'],
      [class*='wa-flank'],
      [class*='wa-frame'],
      [class*='wa-grid'],
      [class*='wa-stack'],
      [class*='wa-split']
    )
    > * {
    margin-block: 0;
    margin-inline: 0;
  }

  :where(
    [class*='wa-cluster'],
    [class*='wa-flank'],
    [class*='wa-frame'],
    [class*='wa-grid'],
    [class*='wa-stack'],
    [class*='wa-split']
  ) {
    gap: var(--wa-space-m);
  }

  /* #region Cluster */
  [class*='wa-cluster'] {
    display: flex;
  }

  :where([class*='wa-cluster']) {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  /* #endregion */

  /* #region Flank */
  [class*='wa-flank'] {
    display: flex;

    --content-percentage: initial;
    --flank-size: initial;
  }

  [class*='wa-flank']:not([class*='\:end']) > :first-child,
  [class*='wa-flank'][class*='\:start'] > :first-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*='wa-flank']:not([class*='\:end']) > :last-child,
  [class*='wa-flank'][class*='\:start'] > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }

  [class*='wa-flank'][class*='\:end'] > :last-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*='wa-flank'][class*='\:end'] > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }

  :where([class*='wa-flank']) {
    align-items: center;
    flex-wrap: wrap;
  }
  /* #endregion */

  /* #region Frame */
  [class*='wa-frame'] {
    display: flex;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  [class*='wa-frame'] > img,
  [class*='wa-frame'] > video {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  [class*='wa-frame'][class*='\:square'] {
    aspect-ratio: 1 / 1;
  }
  [class*='wa-frame'][class*='\:landscape'] {
    aspect-ratio: 16 / 9;
  }
  [class*='wa-frame'][class*='\:portrait'] {
    aspect-ratio: 9 / 16;
  }

  :where([class*='wa-frame']) {
    align-items: center;
    justify-content: center;
  }
  /* #endregion */

  /* #region Grid */
  [class*='wa-grid'] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));

    --min-column-size: initial;
  }

  .wa-span-grid {
    grid-column: 1 / -1;
  }
  /* #endregion */

  /* #region Split */
  [class*='wa-split'] {
    display: flex;
  }

  [class*='wa-split'],
  [class*='wa-split'][class*='\:row'] {
    flex-direction: row;
    block-size: auto;
    inline-size: 100%;
  }

  [class*='wa-split']:not([class*='\:column']) > :first-child {
    flex: 0 1 auto;
  }

  [class*='wa-split'][class*='\:column'] {
    flex-direction: column;
    block-size: auto;
    inline-size: auto;
    align-self: stretch;
  }

  :where([class*='wa-split']) {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  /* #endregion */

  /* #region Stack */
  [class*='wa-stack'] {
    display: flex;
    flex-direction: column;
  }

  :where([class*='wa-stack']) {
    align-items: stretch;
    justify-content: flex-start;
  }
  /* #endregion */
}

/* vendor/webawesome/dist-cdn/styles/utilities/prose.css */
@layer wa-utilities {
  /* `wa-prose` applies hierarchical, asymmetric typographic rhythm to a block
     of long-form content. Builds on `wa-native`'s base block styles instead of
     duplicating them. Em-based spacing scales when composed with `wa-font-size-*`.
     The class and its element selectors are wrapped in `:where()` so every rule
     sits at 0,0,0 specificity — any utility class or element rule the author
     applies inside the container takes precedence without weight tricks. */

  /* @scope is Newly Available in Baseline 2025. As such, it should be reserved for
     non-essential, progressive enhancement features until @scope is established
     as Widely Available. https://caniuse.com/css-cascade-scope */
  @scope (.wa-prose) to (.wa-not-prose) {
    :where(:scope) {
      /* #region Tokens ~~~~~~~~~~~~ */

      /* Em-based rhythm scale: each token resolves at the use site, so margins
        scale with the element's own font-size. `--wa-prose-rhythm-scale` is a
        single knob to tighten or loosen everything at once. */
      --wa-prose-rhythm-scale: 1;
      --wa-prose-rhythm-2xs: calc(0.25em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-xs: calc(0.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-s: calc(0.75em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-m: calc(1em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-l: calc(1.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-xl: calc(2em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-2xl: calc(2.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
      --wa-prose-rhythm-3xl: calc(3em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));

      --wa-prose-line-length: 65ch;

      max-inline-size: var(--wa-prose-line-length);

      /* Oldstyle proportional figures for running text; tables reassert
        `tabular-nums` below. Fonts without the OpenType feature fall back. */
      font-variant-numeric: oldstyle-nums proportional-nums;

      /* Inherits to descendants. Safari today; progressive enhancement elsewhere. */
      hanging-punctuation: first last allow-end;
      /* #endregion */

      /* #region Headings ~~~~~~~~~~~~ */

      /* Em sizes inherit through the cascade — re-applying `--wa-font-size-scale`
        here would double-scale. Authors overriding should stay em-based. */
      & :where(h1) {
        font-size: 2.5625em;
      }
      & :where(h2) {
        font-size: 2em;
      }
      & :where(h3) {
        font-size: 1.5625em;
      }
      & :where(h4) {
        font-size: 1.25em;
      }
      & :where(h5) {
        font-size: 1em;
      }
      & :where(h6) {
        font-size: 0.75em;
      }

      /* Slight optical tracking; only the larger sizes need it. */
      & :where(h1, h2) {
        letter-spacing: -0.01em;
      }

      /* Headings hug what they introduce: generous above, tight below. */
      & :where(h1):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-s);
      }

      & * + :where(h2) {
        margin-block-start: var(--wa-prose-rhythm-2xl);
      }
      & :where(h2):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-s);
      }

      & * + :where(h3) {
        margin-block-start: var(--wa-prose-rhythm-xl);
      }
      & :where(h3):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-s);
      }

      & :where(h4, h5, h6):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-xs);
      }

      /* Back-to-back headings tighten so the second reads as subordinate.
        Enumerated explicitly — skipping more than two levels is rare enough
        that the default rhythm reads better. */
      & :where(h1 + h2, h1 + h3, h2 + h3, h2 + h4, h3 + h4, h4 + h5, h5 + h6) {
        margin-block-start: var(--wa-prose-rhythm-m);
      }
      /* #endregion */

      /* #region Body text & lists ~~~~~~~~~~~~ */

      /* Replaces wa-native's rem-based `--wa-content-spacing` with em rhythm. */
      & :where(p, ul, ol, dl):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-l);
      }

      & :where(ul, ol) > :where(li):has(+ li) {
        margin-block-end: var(--wa-prose-rhythm-2xs);
      }

      & :where(dd):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-s);
      }
      /* #endregion */

      /* #region Captions ~~~~~~~~~~~~ */

      /* Em-based override keeps caption spacing in step with the prose
        container; wa-native sets the visual style. */
      & :where(figcaption) {
        margin-block-start: var(--wa-prose-rhythm-xs);
      }
      /* #endregion */

      /* #region Inline code & long-word breaks ~~~~~~~~~~~~ */

      /* `anywhere` is the right trade-off in prose: long URLs and identifiers
        break instead of overflowing the column. */
      & :where(code, pre) {
        overflow-wrap: anywhere;
      }
      /* #endregion */

      /* #region Section breaks & major non-text blocks ~~~~~~~~~~~~ */

      /* `<hr>`'s own margin defines the gap; the next heading shouldn't double-stack. */
      & :where(hr) {
        margin-block: var(--wa-prose-rhythm-3xl);
      }
      & :where(hr + :is(h1, h2, h3, h4, h5, h6)) {
        margin-block-start: 0;
      }

      /* Major non-text blocks get more air than running prose, but headings
        still hug — so the top-margin rule excludes the heading-to-block case
        (handled separately below with a smaller gap). */
      & :where(pre, figure, table, blockquote, wa-callout, details):has(+ *) {
        margin-block-end: var(--wa-prose-rhythm-xl);
      }

      & :where(:not(h1, h2, h3, h4, h5, h6) + :is(pre, figure, table, blockquote, wa-callout, details)) {
        margin-block-start: var(--wa-prose-rhythm-xl);
      }

      & :where(:is(h1, h2, h3, h4, h5, h6) + :is(pre, figure, table, blockquote, wa-callout, details)) {
        margin-block-start: var(--wa-prose-rhythm-m);
      }
      /* #endregion */
    }
  }
}


/* vendor/webawesome/dist-cdn/styles/utilities/size.css */
@layer wa-utilities {
  .wa-size-xs {
    font-size: var(--wa-font-size-xs);
  }

  .wa-size-s {
    font-size: var(--wa-font-size-s);
  }

  .wa-size-m {
    font-size: var(--wa-font-size-m);
  }

  .wa-size-l {
    font-size: var(--wa-font-size-l);
  }

  .wa-size-xl {
    font-size: var(--wa-font-size-xl);
  }
}

/* vendor/webawesome/dist-cdn/styles/utilities/variants.css */
@layer wa-utilities {
  :where(:root),
  .wa-neutral,
  .wa-invert {
    --wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
    --wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
    --wa-color-border-loud: var(--wa-color-neutral-border-loud);
    --wa-color-border-normal: var(--wa-color-neutral-border-normal);
    --wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
    --wa-color-on-loud: var(--wa-color-neutral-on-loud);
    --wa-color-on-normal: var(--wa-color-neutral-on-normal);
    --wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
  }

  .wa-brand {
    --wa-color-fill-loud: var(--wa-color-brand-fill-loud);
    --wa-color-fill-normal: var(--wa-color-brand-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
    --wa-color-border-loud: var(--wa-color-brand-border-loud);
    --wa-color-border-normal: var(--wa-color-brand-border-normal);
    --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
    --wa-color-on-loud: var(--wa-color-brand-on-loud);
    --wa-color-on-normal: var(--wa-color-brand-on-normal);
    --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
  }

  .wa-success {
    --wa-color-fill-loud: var(--wa-color-success-fill-loud);
    --wa-color-fill-normal: var(--wa-color-success-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
    --wa-color-border-loud: var(--wa-color-success-border-loud);
    --wa-color-border-normal: var(--wa-color-success-border-normal);
    --wa-color-border-quiet: var(--wa-color-success-border-quiet);
    --wa-color-on-loud: var(--wa-color-success-on-loud);
    --wa-color-on-normal: var(--wa-color-success-on-normal);
    --wa-color-on-quiet: var(--wa-color-success-on-quiet);
  }

  .wa-warning {
    --wa-color-fill-loud: var(--wa-color-warning-fill-loud);
    --wa-color-fill-normal: var(--wa-color-warning-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
    --wa-color-border-loud: var(--wa-color-warning-border-loud);
    --wa-color-border-normal: var(--wa-color-warning-border-normal);
    --wa-color-border-quiet: var(--wa-color-warning-border-quiet);
    --wa-color-on-loud: var(--wa-color-warning-on-loud);
    --wa-color-on-normal: var(--wa-color-warning-on-normal);
    --wa-color-on-quiet: var(--wa-color-warning-on-quiet);
  }

  .wa-danger {
    --wa-color-fill-loud: var(--wa-color-danger-fill-loud);
    --wa-color-fill-normal: var(--wa-color-danger-fill-normal);
    --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
    --wa-color-border-loud: var(--wa-color-danger-border-loud);
    --wa-color-border-normal: var(--wa-color-danger-border-normal);
    --wa-color-border-quiet: var(--wa-color-danger-border-quiet);
    --wa-color-on-loud: var(--wa-color-danger-on-loud);
    --wa-color-on-normal: var(--wa-color-danger-on-normal);
    --wa-color-on-quiet: var(--wa-color-danger-on-quiet);
  }
}



/* Theme */
/* vendor/webawesome/dist-cdn/styles/themes/default.css */
/* vendor/webawesome/dist-cdn/styles/layers.css */
/* Order of precedence for all cascade layers in Web Awesome */
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;

@layer wa-base {
  /**
    Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
    IE: \`<a href="#id-for-h2">\` anchors.
    */
  wa-page :is(*, *:after, *:before) {
    scroll-margin-top: var(--scroll-margin-top);
  }

  wa-page[view='desktop'] [data-toggle-nav] {
    display: none;
  }

  wa-page[view='mobile'] .wa-desktop-only,
  wa-page[view='desktop'] .wa-mobile-only {
    display: none !important;
  }
}

/* vendor/webawesome/dist-cdn/styles/color/palettes/default.css */
/* vendor/webawesome/dist-cdn/styles/color/palettes/base.css */
/* Rules shared by all palettes */
/* vendor/webawesome/dist-cdn/styles/layers.css */
/* Order of precedence for all cascade layers in Web Awesome */
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;

@layer wa-base {
  /**
    Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
    IE: \`<a href="#id-for-h2">\` anchors.
    */
  wa-page :is(*, *:after, *:before) {
    scroll-margin-top: var(--scroll-margin-top);
  }

  wa-page[view='desktop'] [data-toggle-nav] {
    display: none;
  }

  wa-page[view='mobile'] .wa-desktop-only,
  wa-page[view='desktop'] .wa-mobile-only {
    display: none !important;
  }
}

/* vendor/webawesome/dist-cdn/styles/color/variants.css */
/* vendor/webawesome/dist-cdn/styles/color/variants/brand.css */
@layer wa-color-variant {
  :where(:root), /* default */
  .wa-brand-blue {
    --wa-color-brand-95: var(--wa-color-blue-95);
    --wa-color-brand-90: var(--wa-color-blue-90);
    --wa-color-brand-80: var(--wa-color-blue-80);
    --wa-color-brand-70: var(--wa-color-blue-70);
    --wa-color-brand-60: var(--wa-color-blue-60);
    --wa-color-brand-50: var(--wa-color-blue-50);
    --wa-color-brand-40: var(--wa-color-blue-40);
    --wa-color-brand-30: var(--wa-color-blue-30);
    --wa-color-brand-20: var(--wa-color-blue-20);
    --wa-color-brand-10: var(--wa-color-blue-10);
    --wa-color-brand-05: var(--wa-color-blue-05);
    --wa-color-brand: var(--wa-color-blue);
    --wa-color-brand-on: var(--wa-color-blue-on);
  }

  .wa-brand-red {
    --wa-color-brand-95: var(--wa-color-red-95);
    --wa-color-brand-90: var(--wa-color-red-90);
    --wa-color-brand-80: var(--wa-color-red-80);
    --wa-color-brand-70: var(--wa-color-red-70);
    --wa-color-brand-60: var(--wa-color-red-60);
    --wa-color-brand-50: var(--wa-color-red-50);
    --wa-color-brand-40: var(--wa-color-red-40);
    --wa-color-brand-30: var(--wa-color-red-30);
    --wa-color-brand-20: var(--wa-color-red-20);
    --wa-color-brand-10: var(--wa-color-red-10);
    --wa-color-brand-05: var(--wa-color-red-05);
    --wa-color-brand: var(--wa-color-red);
    --wa-color-brand-on: var(--wa-color-red-on);
  }

  .wa-brand-orange {
    --wa-color-brand-95: var(--wa-color-orange-95);
    --wa-color-brand-90: var(--wa-color-orange-90);
    --wa-color-brand-80: var(--wa-color-orange-80);
    --wa-color-brand-70: var(--wa-color-orange-70);
    --wa-color-brand-60: var(--wa-color-orange-60);
    --wa-color-brand-50: var(--wa-color-orange-50);
    --wa-color-brand-40: var(--wa-color-orange-40);
    --wa-color-brand-30: var(--wa-color-orange-30);
    --wa-color-brand-20: var(--wa-color-orange-20);
    --wa-color-brand-10: var(--wa-color-orange-10);
    --wa-color-brand-05: var(--wa-color-orange-05);
    --wa-color-brand: var(--wa-color-orange);
    --wa-color-brand-on: var(--wa-color-orange-on);
  }

  .wa-brand-yellow {
    --wa-color-brand-95: var(--wa-color-yellow-95);
    --wa-color-brand-90: var(--wa-color-yellow-90);
    --wa-color-brand-80: var(--wa-color-yellow-80);
    --wa-color-brand-70: var(--wa-color-yellow-70);
    --wa-color-brand-60: var(--wa-color-yellow-60);
    --wa-color-brand-50: var(--wa-color-yellow-50);
    --wa-color-brand-40: var(--wa-color-yellow-40);
    --wa-color-brand-30: var(--wa-color-yellow-30);
    --wa-color-brand-20: var(--wa-color-yellow-20);
    --wa-color-brand-10: var(--wa-color-yellow-10);
    --wa-color-brand-05: var(--wa-color-yellow-05);
    --wa-color-brand: var(--wa-color-yellow);
    --wa-color-brand-on: var(--wa-color-yellow-on);
  }

  .wa-brand-green {
    --wa-color-brand-95: var(--wa-color-green-95);
    --wa-color-brand-90: var(--wa-color-green-90);
    --wa-color-brand-80: var(--wa-color-green-80);
    --wa-color-brand-70: var(--wa-color-green-70);
    --wa-color-brand-60: var(--wa-color-green-60);
    --wa-color-brand-50: var(--wa-color-green-50);
    --wa-color-brand-40: var(--wa-color-green-40);
    --wa-color-brand-30: var(--wa-color-green-30);
    --wa-color-brand-20: var(--wa-color-green-20);
    --wa-color-brand-10: var(--wa-color-green-10);
    --wa-color-brand-05: var(--wa-color-green-05);
    --wa-color-brand: var(--wa-color-green);
    --wa-color-brand-on: var(--wa-color-green-on);
  }

  .wa-brand-cyan {
    --wa-color-brand-95: var(--wa-color-cyan-95);
    --wa-color-brand-90: var(--wa-color-cyan-90);
    --wa-color-brand-80: var(--wa-color-cyan-80);
    --wa-color-brand-70: var(--wa-color-cyan-70);
    --wa-color-brand-60: var(--wa-color-cyan-60);
    --wa-color-brand-50: var(--wa-color-cyan-50);
    --wa-color-brand-40: var(--wa-color-cyan-40);
    --wa-color-brand-30: var(--wa-color-cyan-30);
    --wa-color-brand-20: var(--wa-color-cyan-20);
    --wa-color-brand-10: var(--wa-color-cyan-10);
    --wa-color-brand-05: var(--wa-color-cyan-05);
    --wa-color-brand: var(--wa-color-cyan);
    --wa-color-brand-on: var(--wa-color-cyan-on);
  }

  .wa-brand-indigo {
    --wa-color-brand-95: var(--wa-color-indigo-95);
    --wa-color-brand-90: var(--wa-color-indigo-90);
    --wa-color-brand-80: var(--wa-color-indigo-80);
    --wa-color-brand-70: var(--wa-color-indigo-70);
    --wa-color-brand-60: var(--wa-color-indigo-60);
    --wa-color-brand-50: var(--wa-color-indigo-50);
    --wa-color-brand-40: var(--wa-color-indigo-40);
    --wa-color-brand-30: var(--wa-color-indigo-30);
    --wa-color-brand-20: var(--wa-color-indigo-20);
    --wa-color-brand-10: var(--wa-color-indigo-10);
    --wa-color-brand-05: var(--wa-color-indigo-05);
    --wa-color-brand: var(--wa-color-indigo);
    --wa-color-brand-on: var(--wa-color-indigo-on);
  }

  .wa-brand-purple {
    --wa-color-brand-95: var(--wa-color-purple-95);
    --wa-color-brand-90: var(--wa-color-purple-90);
    --wa-color-brand-80: var(--wa-color-purple-80);
    --wa-color-brand-70: var(--wa-color-purple-70);
    --wa-color-brand-60: var(--wa-color-purple-60);
    --wa-color-brand-50: var(--wa-color-purple-50);
    --wa-color-brand-40: var(--wa-color-purple-40);
    --wa-color-brand-30: var(--wa-color-purple-30);
    --wa-color-brand-20: var(--wa-color-purple-20);
    --wa-color-brand-10: var(--wa-color-purple-10);
    --wa-color-brand-05: var(--wa-color-purple-05);
    --wa-color-brand: var(--wa-color-purple);
    --wa-color-brand-on: var(--wa-color-purple-on);
  }

  .wa-brand-pink {
    --wa-color-brand-95: var(--wa-color-pink-95);
    --wa-color-brand-90: var(--wa-color-pink-90);
    --wa-color-brand-80: var(--wa-color-pink-80);
    --wa-color-brand-70: var(--wa-color-pink-70);
    --wa-color-brand-60: var(--wa-color-pink-60);
    --wa-color-brand-50: var(--wa-color-pink-50);
    --wa-color-brand-40: var(--wa-color-pink-40);
    --wa-color-brand-30: var(--wa-color-pink-30);
    --wa-color-brand-20: var(--wa-color-pink-20);
    --wa-color-brand-10: var(--wa-color-pink-10);
    --wa-color-brand-05: var(--wa-color-pink-05);
    --wa-color-brand: var(--wa-color-pink);
    --wa-color-brand-on: var(--wa-color-pink-on);
  }

  .wa-brand-gray {
    --wa-color-brand-95: var(--wa-color-gray-95);
    --wa-color-brand-90: var(--wa-color-gray-90);
    --wa-color-brand-80: var(--wa-color-gray-80);
    --wa-color-brand-70: var(--wa-color-gray-70);
    --wa-color-brand-60: var(--wa-color-gray-60);
    --wa-color-brand-50: var(--wa-color-gray-50);
    --wa-color-brand-40: var(--wa-color-gray-40);
    --wa-color-brand-30: var(--wa-color-gray-30);
    --wa-color-brand-20: var(--wa-color-gray-20);
    --wa-color-brand-10: var(--wa-color-gray-10);
    --wa-color-brand-05: var(--wa-color-gray-05);
    --wa-color-brand: var(--wa-color-gray);
    --wa-color-brand-on: var(--wa-color-gray-on);
  }
}

/* vendor/webawesome/dist-cdn/styles/color/variants/neutral.css */
@layer wa-color-variant {
  :where(:root), /* default */
  .wa-neutral-gray {
    --wa-color-neutral-95: var(--wa-color-gray-95);
    --wa-color-neutral-90: var(--wa-color-gray-90);
    --wa-color-neutral-80: var(--wa-color-gray-80);
    --wa-color-neutral-70: var(--wa-color-gray-70);
    --wa-color-neutral-60: var(--wa-color-gray-60);
    --wa-color-neutral-50: var(--wa-color-gray-50);
    --wa-color-neutral-40: var(--wa-color-gray-40);
    --wa-color-neutral-30: var(--wa-color-gray-30);
    --wa-color-neutral-20: var(--wa-color-gray-20);
    --wa-color-neutral-10: var(--wa-color-gray-10);
    --wa-color-neutral-05: var(--wa-color-gray-05);
    --wa-color-neutral: var(--wa-color-gray);
    --wa-color-neutral-on: var(--wa-color-gray-on);
  }

  .wa-neutral-red {
    --wa-color-neutral-95: var(--wa-color-red-95);
    --wa-color-neutral-90: var(--wa-color-red-90);
    --wa-color-neutral-80: var(--wa-color-red-80);
    --wa-color-neutral-70: var(--wa-color-red-70);
    --wa-color-neutral-60: var(--wa-color-red-60);
    --wa-color-neutral-50: var(--wa-color-red-50);
    --wa-color-neutral-40: var(--wa-color-red-40);
    --wa-color-neutral-30: var(--wa-color-red-30);
    --wa-color-neutral-20: var(--wa-color-red-20);
    --wa-color-neutral-10: var(--wa-color-red-10);
    --wa-color-neutral-05: var(--wa-color-red-05);
    --wa-color-neutral: var(--wa-color-red);
    --wa-color-neutral-on: var(--wa-color-red-on);
  }

  .wa-neutral-orange {
    --wa-color-neutral-95: var(--wa-color-orange-95);
    --wa-color-neutral-90: var(--wa-color-orange-90);
    --wa-color-neutral-80: var(--wa-color-orange-80);
    --wa-color-neutral-70: var(--wa-color-orange-70);
    --wa-color-neutral-60: var(--wa-color-orange-60);
    --wa-color-neutral-50: var(--wa-color-orange-50);
    --wa-color-neutral-40: var(--wa-color-orange-40);
    --wa-color-neutral-30: var(--wa-color-orange-30);
    --wa-color-neutral-20: var(--wa-color-orange-20);
    --wa-color-neutral-10: var(--wa-color-orange-10);
    --wa-color-neutral-05: var(--wa-color-orange-05);
    --wa-color-neutral: var(--wa-color-orange);
    --wa-color-neutral-on: var(--wa-color-orange-on);
  }

  .wa-neutral-yellow {
    --wa-color-neutral-95: var(--wa-color-yellow-95);
    --wa-color-neutral-90: var(--wa-color-yellow-90);
    --wa-color-neutral-80: var(--wa-color-yellow-80);
    --wa-color-neutral-70: var(--wa-color-yellow-70);
    --wa-color-neutral-60: var(--wa-color-yellow-60);
    --wa-color-neutral-50: var(--wa-color-yellow-50);
    --wa-color-neutral-40: var(--wa-color-yellow-40);
    --wa-color-neutral-30: var(--wa-color-yellow-30);
    --wa-color-neutral-20: var(--wa-color-yellow-20);
    --wa-color-neutral-10: var(--wa-color-yellow-10);
    --wa-color-neutral-05: var(--wa-color-yellow-05);
    --wa-color-neutral: var(--wa-color-yellow);
    --wa-color-neutral-on: var(--wa-color-yellow-on);
  }

  .wa-neutral-green {
    --wa-color-neutral-95: var(--wa-color-green-95);
    --wa-color-neutral-90: var(--wa-color-green-90);
    --wa-color-neutral-80: var(--wa-color-green-80);
    --wa-color-neutral-70: var(--wa-color-green-70);
    --wa-color-neutral-60: var(--wa-color-green-60);
    --wa-color-neutral-50: var(--wa-color-green-50);
    --wa-color-neutral-40: var(--wa-color-green-40);
    --wa-color-neutral-30: var(--wa-color-green-30);
    --wa-color-neutral-20: var(--wa-color-green-20);
    --wa-color-neutral-10: var(--wa-color-green-10);
    --wa-color-neutral-05: var(--wa-color-green-05);
    --wa-color-neutral: var(--wa-color-green);
    --wa-color-neutral-on: var(--wa-color-green-on);
  }

  .wa-neutral-cyan {
    --wa-color-neutral-95: var(--wa-color-cyan-95);
    --wa-color-neutral-90: var(--wa-color-cyan-90);
    --wa-color-neutral-80: var(--wa-color-cyan-80);
    --wa-color-neutral-70: var(--wa-color-cyan-70);
    --wa-color-neutral-60: var(--wa-color-cyan-60);
    --wa-color-neutral-50: var(--wa-color-cyan-50);
    --wa-color-neutral-40: var(--wa-color-cyan-40);
    --wa-color-neutral-30: var(--wa-color-cyan-30);
    --wa-color-neutral-20: var(--wa-color-cyan-20);
    --wa-color-neutral-10: var(--wa-color-cyan-10);
    --wa-color-neutral-05: var(--wa-color-cyan-05);
    --wa-color-neutral: var(--wa-color-cyan);
    --wa-color-neutral-on: var(--wa-color-cyan-on);
  }

  .wa-neutral-blue {
    --wa-color-neutral-95: var(--wa-color-blue-95);
    --wa-color-neutral-90: var(--wa-color-blue-90);
    --wa-color-neutral-80: var(--wa-color-blue-80);
    --wa-color-neutral-70: var(--wa-color-blue-70);
    --wa-color-neutral-60: var(--wa-color-blue-60);
    --wa-color-neutral-50: var(--wa-color-blue-50);
    --wa-color-neutral-40: var(--wa-color-blue-40);
    --wa-color-neutral-30: var(--wa-color-blue-30);
    --wa-color-neutral-20: var(--wa-color-blue-20);
    --wa-color-neutral-10: var(--wa-color-blue-10);
    --wa-color-neutral-05: var(--wa-color-blue-05);
    --wa-color-neutral: var(--wa-color-blue);
    --wa-color-neutral-on: var(--wa-color-blue-on);
  }

  .wa-neutral-indigo {
    --wa-color-neutral-95: var(--wa-color-indigo-95);
    --wa-color-neutral-90: var(--wa-color-indigo-90);
    --wa-color-neutral-80: var(--wa-color-indigo-80);
    --wa-color-neutral-70: var(--wa-color-indigo-70);
    --wa-color-neutral-60: var(--wa-color-indigo-60);
    --wa-color-neutral-50: var(--wa-color-indigo-50);
    --wa-color-neutral-40: var(--wa-color-indigo-40);
    --wa-color-neutral-30: var(--wa-color-indigo-30);
    --wa-color-neutral-20: var(--wa-color-indigo-20);
    --wa-color-neutral-10: var(--wa-color-indigo-10);
    --wa-color-neutral-05: var(--wa-color-indigo-05);
    --wa-color-neutral: var(--wa-color-indigo);
    --wa-color-neutral-on: var(--wa-color-indigo-on);
  }

  .wa-neutral-purple {
    --wa-color-neutral-95: var(--wa-color-purple-95);
    --wa-color-neutral-90: var(--wa-color-purple-90);
    --wa-color-neutral-80: var(--wa-color-purple-80);
    --wa-color-neutral-70: var(--wa-color-purple-70);
    --wa-color-neutral-60: var(--wa-color-purple-60);
    --wa-color-neutral-50: var(--wa-color-purple-50);
    --wa-color-neutral-40: var(--wa-color-purple-40);
    --wa-color-neutral-30: var(--wa-color-purple-30);
    --wa-color-neutral-20: var(--wa-color-purple-20);
    --wa-color-neutral-10: var(--wa-color-purple-10);
    --wa-color-neutral-05: var(--wa-color-purple-05);
    --wa-color-neutral: var(--wa-color-purple);
    --wa-color-neutral-on: var(--wa-color-purple-on);
  }

  .wa-neutral-pink {
    --wa-color-neutral-95: var(--wa-color-pink-95);
    --wa-color-neutral-90: var(--wa-color-pink-90);
    --wa-color-neutral-80: var(--wa-color-pink-80);
    --wa-color-neutral-70: var(--wa-color-pink-70);
    --wa-color-neutral-60: var(--wa-color-pink-60);
    --wa-color-neutral-50: var(--wa-color-pink-50);
    --wa-color-neutral-40: var(--wa-color-pink-40);
    --wa-color-neutral-30: var(--wa-color-pink-30);
    --wa-color-neutral-20: var(--wa-color-pink-20);
    --wa-color-neutral-10: var(--wa-color-pink-10);
    --wa-color-neutral-05: var(--wa-color-pink-05);
    --wa-color-neutral: var(--wa-color-pink);
    --wa-color-neutral-on: var(--wa-color-pink-on);
  }
}

/* vendor/webawesome/dist-cdn/styles/color/variants/success.css */
@layer wa-color-variant {
  :where(:root), /* default */
  .wa-success-green {
    --wa-color-success-95: var(--wa-color-green-95);
    --wa-color-success-90: var(--wa-color-green-90);
    --wa-color-success-80: var(--wa-color-green-80);
    --wa-color-success-70: var(--wa-color-green-70);
    --wa-color-success-60: var(--wa-color-green-60);
    --wa-color-success-50: var(--wa-color-green-50);
    --wa-color-success-40: var(--wa-color-green-40);
    --wa-color-success-30: var(--wa-color-green-30);
    --wa-color-success-20: var(--wa-color-green-20);
    --wa-color-success-10: var(--wa-color-green-10);
    --wa-color-success-05: var(--wa-color-green-05);
    --wa-color-success: var(--wa-color-green);
    --wa-color-success-on: var(--wa-color-green-on);
  }

  .wa-success-red {
    --wa-color-success-95: var(--wa-color-red-95);
    --wa-color-success-90: var(--wa-color-red-90);
    --wa-color-success-80: var(--wa-color-red-80);
    --wa-color-success-70: var(--wa-color-red-70);
    --wa-color-success-60: var(--wa-color-red-60);
    --wa-color-success-50: var(--wa-color-red-50);
    --wa-color-success-40: var(--wa-color-red-40);
    --wa-color-success-30: var(--wa-color-red-30);
    --wa-color-success-20: var(--wa-color-red-20);
    --wa-color-success-10: var(--wa-color-red-10);
    --wa-color-success-05: var(--wa-color-red-05);
    --wa-color-success: var(--wa-color-red);
    --wa-color-success-on: var(--wa-color-red-on);
  }

  .wa-success-orange {
    --wa-color-success-95: var(--wa-color-orange-95);
    --wa-color-success-90: var(--wa-color-orange-90);
    --wa-color-success-80: var(--wa-color-orange-80);
    --wa-color-success-70: var(--wa-color-orange-70);
    --wa-color-success-60: var(--wa-color-orange-60);
    --wa-color-success-50: var(--wa-color-orange-50);
    --wa-color-success-40: var(--wa-color-orange-40);
    --wa-color-success-30: var(--wa-color-orange-30);
    --wa-color-success-20: var(--wa-color-orange-20);
    --wa-color-success-10: var(--wa-color-orange-10);
    --wa-color-success-05: var(--wa-color-orange-05);
    --wa-color-success: var(--wa-color-orange);
    --wa-color-success-on: var(--wa-color-orange-on);
  }

  .wa-success-yellow {
    --wa-color-success-95: var(--wa-color-yellow-95);
    --wa-color-success-90: var(--wa-color-yellow-90);
    --wa-color-success-80: var(--wa-color-yellow-80);
    --wa-color-success-70: var(--wa-color-yellow-70);
    --wa-color-success-60: var(--wa-color-yellow-60);
    --wa-color-success-50: var(--wa-color-yellow-50);
    --wa-color-success-40: var(--wa-color-yellow-40);
    --wa-color-success-30: var(--wa-color-yellow-30);
    --wa-color-success-20: var(--wa-color-yellow-20);
    --wa-color-success-10: var(--wa-color-yellow-10);
    --wa-color-success-05: var(--wa-color-yellow-05);
    --wa-color-success: var(--wa-color-yellow);
    --wa-color-success-on: var(--wa-color-yellow-on);
  }

  .wa-success-cyan {
    --wa-color-success-95: var(--wa-color-cyan-95);
    --wa-color-success-90: var(--wa-color-cyan-90);
    --wa-color-success-80: var(--wa-color-cyan-80);
    --wa-color-success-70: var(--wa-color-cyan-70);
    --wa-color-success-60: var(--wa-color-cyan-60);
    --wa-color-success-50: var(--wa-color-cyan-50);
    --wa-color-success-40: var(--wa-color-cyan-40);
    --wa-color-success-30: var(--wa-color-cyan-30);
    --wa-color-success-20: var(--wa-color-cyan-20);
    --wa-color-success-10: var(--wa-color-cyan-10);
    --wa-color-success-05: var(--wa-color-cyan-05);
    --wa-color-success: var(--wa-color-cyan);
    --wa-color-success-on: var(--wa-color-cyan-on);
  }

  .wa-success-blue {
    --wa-color-success-95: var(--wa-color-blue-95);
    --wa-color-success-90: var(--wa-color-blue-90);
    --wa-color-success-80: var(--wa-color-blue-80);
    --wa-color-success-70: var(--wa-color-blue-70);
    --wa-color-success-60: var(--wa-color-blue-60);
    --wa-color-success-50: var(--wa-color-blue-50);
    --wa-color-success-40: var(--wa-color-blue-40);
    --wa-color-success-30: var(--wa-color-blue-30);
    --wa-color-success-20: var(--wa-color-blue-20);
    --wa-color-success-10: var(--wa-color-blue-10);
    --wa-color-success-05: var(--wa-color-blue-05);
    --wa-color-success: var(--wa-color-blue);
    --wa-color-success-on: var(--wa-color-blue-on);
  }

  .wa-success-indigo {
    --wa-color-success-95: var(--wa-color-indigo-95);
    --wa-color-success-90: var(--wa-color-indigo-90);
    --wa-color-success-80: var(--wa-color-indigo-80);
    --wa-color-success-70: var(--wa-color-indigo-70);
    --wa-color-success-60: var(--wa-color-indigo-60);
    --wa-color-success-50: var(--wa-color-indigo-50);
    --wa-color-success-40: var(--wa-color-indigo-40);
    --wa-color-success-30: var(--wa-color-indigo-30);
    --wa-color-success-20: var(--wa-color-indigo-20);
    --wa-color-success-10: var(--wa-color-indigo-10);
    --wa-color-success-05: var(--wa-color-indigo-05);
    --wa-color-success: var(--wa-color-indigo);
    --wa-color-success-on: var(--wa-color-indigo-on);
  }

  .wa-success-purple {
    --wa-color-success-95: var(--wa-color-purple-95);
    --wa-color-success-90: var(--wa-color-purple-90);
    --wa-color-success-80: var(--wa-color-purple-80);
    --wa-color-success-70: var(--wa-color-purple-70);
    --wa-color-success-60: var(--wa-color-purple-60);
    --wa-color-success-50: var(--wa-color-purple-50);
    --wa-color-success-40: var(--wa-color-purple-40);
    --wa-color-success-30: var(--wa-color-purple-30);
    --wa-color-success-20: var(--wa-color-purple-20);
    --wa-color-success-10: var(--wa-color-purple-10);
    --wa-color-success-05: var(--wa-color-purple-05);
    --wa-color-success: var(--wa-color-purple);
    --wa-color-success-on: var(--wa-color-purple-on);
  }

  .wa-success-pink {
    --wa-color-success-95: var(--wa-color-pink-95);
    --wa-color-success-90: var(--wa-color-pink-90);
    --wa-color-success-80: var(--wa-color-pink-80);
    --wa-color-success-70: var(--wa-color-pink-70);
    --wa-color-success-60: var(--wa-color-pink-60);
    --wa-color-success-50: var(--wa-color-pink-50);
    --wa-color-success-40: var(--wa-color-pink-40);
    --wa-color-success-30: var(--wa-color-pink-30);
    --wa-color-success-20: var(--wa-color-pink-20);
    --wa-color-success-10: var(--wa-color-pink-10);
    --wa-color-success-05: var(--wa-color-pink-05);
    --wa-color-success: var(--wa-color-pink);
    --wa-color-success-on: var(--wa-color-pink-on);
  }

  .wa-success-gray {
    --wa-color-success-95: var(--wa-color-gray-95);
    --wa-color-success-90: var(--wa-color-gray-90);
    --wa-color-success-80: var(--wa-color-gray-80);
    --wa-color-success-70: var(--wa-color-gray-70);
    --wa-color-success-60: var(--wa-color-gray-60);
    --wa-color-success-50: var(--wa-color-gray-50);
    --wa-color-success-40: var(--wa-color-gray-40);
    --wa-color-success-30: var(--wa-color-gray-30);
    --wa-color-success-20: var(--wa-color-gray-20);
    --wa-color-success-10: var(--wa-color-gray-10);
    --wa-color-success-05: var(--wa-color-gray-05);
    --wa-color-success: var(--wa-color-gray);
    --wa-color-success-on: var(--wa-color-gray-on);
  }
}

/* vendor/webawesome/dist-cdn/styles/color/variants/warning.css */
@layer wa-color-variant {
  :where(:root), /* default */
  .wa-warning-yellow {
    --wa-color-warning-95: var(--wa-color-yellow-95);
    --wa-color-warning-90: var(--wa-color-yellow-90);
    --wa-color-warning-80: var(--wa-color-yellow-80);
    --wa-color-warning-70: var(--wa-color-yellow-70);
    --wa-color-warning-60: var(--wa-color-yellow-60);
    --wa-color-warning-50: var(--wa-color-yellow-50);
    --wa-color-warning-40: var(--wa-color-yellow-40);
    --wa-color-warning-30: var(--wa-color-yellow-30);
    --wa-color-warning-20: var(--wa-color-yellow-20);
    --wa-color-warning-10: var(--wa-color-yellow-10);
    --wa-color-warning-05: var(--wa-color-yellow-05);
    --wa-color-warning: var(--wa-color-yellow);
    --wa-color-warning-on: var(--wa-color-yellow-on);
  }

  .wa-warning-red {
    --wa-color-warning-95: var(--wa-color-red-95);
    --wa-color-warning-90: var(--wa-color-red-90);
    --wa-color-warning-80: var(--wa-color-red-80);
    --wa-color-warning-70: var(--wa-color-red-70);
    --wa-color-warning-60: var(--wa-color-red-60);
    --wa-color-warning-50: var(--wa-color-red-50);
    --wa-color-warning-40: var(--wa-color-red-40);
    --wa-color-warning-30: var(--wa-color-red-30);
    --wa-color-warning-20: var(--wa-color-red-20);
    --wa-color-warning-10: var(--wa-color-red-10);
    --wa-color-warning-05: var(--wa-color-red-05);
    --wa-color-warning: var(--wa-color-red);
    --wa-color-warning-on: var(--wa-color-red-on);
  }

  .wa-warning-orange {
    --wa-color-warning-95: var(--wa-color-orange-95);
    --wa-color-warning-90: var(--wa-color-orange-90);
    --wa-color-warning-80: var(--wa-color-orange-80);
    --wa-color-warning-70: var(--wa-color-orange-70);
    --wa-color-warning-60: var(--wa-color-orange-60);
    --wa-color-warning-50: var(--wa-color-orange-50);
    --wa-color-warning-40: var(--wa-color-orange-40);
    --wa-color-warning-30: var(--wa-color-orange-30);
    --wa-color-warning-20: var(--wa-color-orange-20);
    --wa-color-warning-10: var(--wa-color-orange-10);
    --wa-color-warning-05: var(--wa-color-orange-05);
    --wa-color-warning: var(--wa-color-orange);
    --wa-color-warning-on: var(--wa-color-orange-on);
  }

  .wa-warning-green {
    --wa-color-warning-95: var(--wa-color-green-95);
    --wa-color-warning-90: var(--wa-color-green-90);
    --wa-color-warning-80: var(--wa-color-green-80);
    --wa-color-warning-70: var(--wa-color-green-70);
    --wa-color-warning-60: var(--wa-color-green-60);
    --wa-color-warning-50: var(--wa-color-green-50);
    --wa-color-warning-40: var(--wa-color-green-40);
    --wa-color-warning-30: var(--wa-color-green-30);
    --wa-color-warning-20: var(--wa-color-green-20);
    --wa-color-warning-10: var(--wa-color-green-10);
    --wa-color-warning-05: var(--wa-color-green-05);
    --wa-color-warning: var(--wa-color-green);
    --wa-color-warning-on: var(--wa-color-green-on);
  }

  .wa-warning-cyan {
    --wa-color-warning-95: var(--wa-color-cyan-95);
    --wa-color-warning-90: var(--wa-color-cyan-90);
    --wa-color-warning-80: var(--wa-color-cyan-80);
    --wa-color-warning-70: var(--wa-color-cyan-70);
    --wa-color-warning-60: var(--wa-color-cyan-60);
    --wa-color-warning-50: var(--wa-color-cyan-50);
    --wa-color-warning-40: var(--wa-color-cyan-40);
    --wa-color-warning-30: var(--wa-color-cyan-30);
    --wa-color-warning-20: var(--wa-color-cyan-20);
    --wa-color-warning-10: var(--wa-color-cyan-10);
    --wa-color-warning-05: var(--wa-color-cyan-05);
    --wa-color-warning: var(--wa-color-cyan);
    --wa-color-warning-on: var(--wa-color-cyan-on);
  }

  .wa-warning-blue {
    --wa-color-warning-95: var(--wa-color-blue-95);
    --wa-color-warning-90: var(--wa-color-blue-90);
    --wa-color-warning-80: var(--wa-color-blue-80);
    --wa-color-warning-70: var(--wa-color-blue-70);
    --wa-color-warning-60: var(--wa-color-blue-60);
    --wa-color-warning-50: var(--wa-color-blue-50);
    --wa-color-warning-40: var(--wa-color-blue-40);
    --wa-color-warning-30: var(--wa-color-blue-30);
    --wa-color-warning-20: var(--wa-color-blue-20);
    --wa-color-warning-10: var(--wa-color-blue-10);
    --wa-color-warning-05: var(--wa-color-blue-05);
    --wa-color-warning: var(--wa-color-blue);
    --wa-color-warning-on: var(--wa-color-blue-on);
  }

  .wa-warning-indigo {
    --wa-color-warning-95: var(--wa-color-indigo-95);
    --wa-color-warning-90: var(--wa-color-indigo-90);
    --wa-color-warning-80: var(--wa-color-indigo-80);
    --wa-color-warning-70: var(--wa-color-indigo-70);
    --wa-color-warning-60: var(--wa-color-indigo-60);
    --wa-color-warning-50: var(--wa-color-indigo-50);
    --wa-color-warning-40: var(--wa-color-indigo-40);
    --wa-color-warning-30: var(--wa-color-indigo-30);
    --wa-color-warning-20: var(--wa-color-indigo-20);
    --wa-color-warning-10: var(--wa-color-indigo-10);
    --wa-color-warning-05: var(--wa-color-indigo-05);
    --wa-color-warning: var(--wa-color-indigo);
    --wa-color-warning-on: var(--wa-color-indigo-on);
  }

  .wa-warning-purple {
    --wa-color-warning-95: var(--wa-color-purple-95);
    --wa-color-warning-90: var(--wa-color-purple-90);
    --wa-color-warning-80: var(--wa-color-purple-80);
    --wa-color-warning-70: var(--wa-color-purple-70);
    --wa-color-warning-60: var(--wa-color-purple-60);
    --wa-color-warning-50: var(--wa-color-purple-50);
    --wa-color-warning-40: var(--wa-color-purple-40);
    --wa-color-warning-30: var(--wa-color-purple-30);
    --wa-color-warning-20: var(--wa-color-purple-20);
    --wa-color-warning-10: var(--wa-color-purple-10);
    --wa-color-warning-05: var(--wa-color-purple-05);
    --wa-color-warning: var(--wa-color-purple);
    --wa-color-warning-on: var(--wa-color-purple-on);
  }

  .wa-warning-pink {
    --wa-color-warning-95: var(--wa-color-pink-95);
    --wa-color-warning-90: var(--wa-color-pink-90);
    --wa-color-warning-80: var(--wa-color-pink-80);
    --wa-color-warning-70: var(--wa-color-pink-70);
    --wa-color-warning-60: var(--wa-color-pink-60);
    --wa-color-warning-50: var(--wa-color-pink-50);
    --wa-color-warning-40: var(--wa-color-pink-40);
    --wa-color-warning-30: var(--wa-color-pink-30);
    --wa-color-warning-20: var(--wa-color-pink-20);
    --wa-color-warning-10: var(--wa-color-pink-10);
    --wa-color-warning-05: var(--wa-color-pink-05);
    --wa-color-warning: var(--wa-color-pink);
    --wa-color-warning-on: var(--wa-color-pink-on);
  }

  .wa-warning-gray {
    --wa-color-warning-95: var(--wa-color-gray-95);
    --wa-color-warning-90: var(--wa-color-gray-90);
    --wa-color-warning-80: var(--wa-color-gray-80);
    --wa-color-warning-70: var(--wa-color-gray-70);
    --wa-color-warning-60: var(--wa-color-gray-60);
    --wa-color-warning-50: var(--wa-color-gray-50);
    --wa-color-warning-40: var(--wa-color-gray-40);
    --wa-color-warning-30: var(--wa-color-gray-30);
    --wa-color-warning-20: var(--wa-color-gray-20);
    --wa-color-warning-10: var(--wa-color-gray-10);
    --wa-color-warning-05: var(--wa-color-gray-05);
    --wa-color-warning: var(--wa-color-gray);
    --wa-color-warning-on: var(--wa-color-gray-on);
  }
}

/* vendor/webawesome/dist-cdn/styles/color/variants/danger.css */
@layer wa-color-variant {
  :where(:root), /* default */
  .wa-danger-red {
    --wa-color-danger-95: var(--wa-color-red-95);
    --wa-color-danger-90: var(--wa-color-red-90);
    --wa-color-danger-80: var(--wa-color-red-80);
    --wa-color-danger-70: var(--wa-color-red-70);
    --wa-color-danger-60: var(--wa-color-red-60);
    --wa-color-danger-50: var(--wa-color-red-50);
    --wa-color-danger-40: var(--wa-color-red-40);
    --wa-color-danger-30: var(--wa-color-red-30);
    --wa-color-danger-20: var(--wa-color-red-20);
    --wa-color-danger-10: var(--wa-color-red-10);
    --wa-color-danger-05: var(--wa-color-red-05);
    --wa-color-danger: var(--wa-color-red);
    --wa-color-danger-on: var(--wa-color-red-on);
  }

  .wa-danger-orange {
    --wa-color-danger-95: var(--wa-color-orange-95);
    --wa-color-danger-90: var(--wa-color-orange-90);
    --wa-color-danger-80: var(--wa-color-orange-80);
    --wa-color-danger-70: var(--wa-color-orange-70);
    --wa-color-danger-60: var(--wa-color-orange-60);
    --wa-color-danger-50: var(--wa-color-orange-50);
    --wa-color-danger-40: var(--wa-color-orange-40);
    --wa-color-danger-30: var(--wa-color-orange-30);
    --wa-color-danger-20: var(--wa-color-orange-20);
    --wa-color-danger-10: var(--wa-color-orange-10);
    --wa-color-danger-05: var(--wa-color-orange-05);
    --wa-color-danger: var(--wa-color-orange);
    --wa-color-danger-on: var(--wa-color-orange-on);
  }

  .wa-danger-yellow {
    --wa-color-danger-95: var(--wa-color-yellow-95);
    --wa-color-danger-90: var(--wa-color-yellow-90);
    --wa-color-danger-80: var(--wa-color-yellow-80);
    --wa-color-danger-70: var(--wa-color-yellow-70);
    --wa-color-danger-60: var(--wa-color-yellow-60);
    --wa-color-danger-50: var(--wa-color-yellow-50);
    --wa-color-danger-40: var(--wa-color-yellow-40);
    --wa-color-danger-30: var(--wa-color-yellow-30);
    --wa-color-danger-20: var(--wa-color-yellow-20);
    --wa-color-danger-10: var(--wa-color-yellow-10);
    --wa-color-danger-05: var(--wa-color-yellow-05);
    --wa-color-danger: var(--wa-color-yellow);
    --wa-color-danger-on: var(--wa-color-yellow-on);
  }

  .wa-danger-green {
    --wa-color-danger-95: var(--wa-color-green-95);
    --wa-color-danger-90: var(--wa-color-green-90);
    --wa-color-danger-80: var(--wa-color-green-80);
    --wa-color-danger-70: var(--wa-color-green-70);
    --wa-color-danger-60: var(--wa-color-green-60);
    --wa-color-danger-50: var(--wa-color-green-50);
    --wa-color-danger-40: var(--wa-color-green-40);
    --wa-color-danger-30: var(--wa-color-green-30);
    --wa-color-danger-20: var(--wa-color-green-20);
    --wa-color-danger-10: var(--wa-color-green-10);
    --wa-color-danger-05: var(--wa-color-green-05);
    --wa-color-danger: var(--wa-color-green);
    --wa-color-danger-on: var(--wa-color-green-on);
  }

  .wa-danger-cyan {
    --wa-color-danger-95: var(--wa-color-cyan-95);
    --wa-color-danger-90: var(--wa-color-cyan-90);
    --wa-color-danger-80: var(--wa-color-cyan-80);
    --wa-color-danger-70: var(--wa-color-cyan-70);
    --wa-color-danger-60: var(--wa-color-cyan-60);
    --wa-color-danger-50: var(--wa-color-cyan-50);
    --wa-color-danger-40: var(--wa-color-cyan-40);
    --wa-color-danger-30: var(--wa-color-cyan-30);
    --wa-color-danger-20: var(--wa-color-cyan-20);
    --wa-color-danger-10: var(--wa-color-cyan-10);
    --wa-color-danger-05: var(--wa-color-cyan-05);
    --wa-color-danger: var(--wa-color-cyan);
    --wa-color-danger-on: var(--wa-color-cyan-on);
  }

  .wa-danger-blue {
    --wa-color-danger-95: var(--wa-color-blue-95);
    --wa-color-danger-90: var(--wa-color-blue-90);
    --wa-color-danger-80: var(--wa-color-blue-80);
    --wa-color-danger-70: var(--wa-color-blue-70);
    --wa-color-danger-60: var(--wa-color-blue-60);
    --wa-color-danger-50: var(--wa-color-blue-50);
    --wa-color-danger-40: var(--wa-color-blue-40);
    --wa-color-danger-30: var(--wa-color-blue-30);
    --wa-color-danger-20: var(--wa-color-blue-20);
    --wa-color-danger-10: var(--wa-color-blue-10);
    --wa-color-danger-05: var(--wa-color-blue-05);
    --wa-color-danger: var(--wa-color-blue);
    --wa-color-danger-on: var(--wa-color-blue-on);
  }

  .wa-danger-indigo {
    --wa-color-danger-95: var(--wa-color-indigo-95);
    --wa-color-danger-90: var(--wa-color-indigo-90);
    --wa-color-danger-80: var(--wa-color-indigo-80);
    --wa-color-danger-70: var(--wa-color-indigo-70);
    --wa-color-danger-60: var(--wa-color-indigo-60);
    --wa-color-danger-50: var(--wa-color-indigo-50);
    --wa-color-danger-40: var(--wa-color-indigo-40);
    --wa-color-danger-30: var(--wa-color-indigo-30);
    --wa-color-danger-20: var(--wa-color-indigo-20);
    --wa-color-danger-10: var(--wa-color-indigo-10);
    --wa-color-danger-05: var(--wa-color-indigo-05);
    --wa-color-danger: var(--wa-color-indigo);
    --wa-color-danger-on: var(--wa-color-indigo-on);
  }

  .wa-danger-purple {
    --wa-color-danger-95: var(--wa-color-purple-95);
    --wa-color-danger-90: var(--wa-color-purple-90);
    --wa-color-danger-80: var(--wa-color-purple-80);
    --wa-color-danger-70: var(--wa-color-purple-70);
    --wa-color-danger-60: var(--wa-color-purple-60);
    --wa-color-danger-50: var(--wa-color-purple-50);
    --wa-color-danger-40: var(--wa-color-purple-40);
    --wa-color-danger-30: var(--wa-color-purple-30);
    --wa-color-danger-20: var(--wa-color-purple-20);
    --wa-color-danger-10: var(--wa-color-purple-10);
    --wa-color-danger-05: var(--wa-color-purple-05);
    --wa-color-danger: var(--wa-color-purple);
    --wa-color-danger-on: var(--wa-color-purple-on);
  }

  .wa-danger-pink {
    --wa-color-danger-95: var(--wa-color-pink-95);
    --wa-color-danger-90: var(--wa-color-pink-90);
    --wa-color-danger-80: var(--wa-color-pink-80);
    --wa-color-danger-70: var(--wa-color-pink-70);
    --wa-color-danger-60: var(--wa-color-pink-60);
    --wa-color-danger-50: var(--wa-color-pink-50);
    --wa-color-danger-40: var(--wa-color-pink-40);
    --wa-color-danger-30: var(--wa-color-pink-30);
    --wa-color-danger-20: var(--wa-color-pink-20);
    --wa-color-danger-10: var(--wa-color-pink-10);
    --wa-color-danger-05: var(--wa-color-pink-05);
    --wa-color-danger: var(--wa-color-pink);
    --wa-color-danger-on: var(--wa-color-pink-on);
  }

  .wa-danger-gray {
    --wa-color-danger-95: var(--wa-color-gray-95);
    --wa-color-danger-90: var(--wa-color-gray-90);
    --wa-color-danger-80: var(--wa-color-gray-80);
    --wa-color-danger-70: var(--wa-color-gray-70);
    --wa-color-danger-60: var(--wa-color-gray-60);
    --wa-color-danger-50: var(--wa-color-gray-50);
    --wa-color-danger-40: var(--wa-color-gray-40);
    --wa-color-danger-30: var(--wa-color-gray-30);
    --wa-color-danger-20: var(--wa-color-gray-20);
    --wa-color-danger-10: var(--wa-color-gray-10);
    --wa-color-danger-05: var(--wa-color-gray-05);
    --wa-color-danger: var(--wa-color-gray);
    --wa-color-danger-on: var(--wa-color-gray-on);
  }
}



/* Generates --wa-color-{hue}-on tokens for pairing with any palette's key colors */
:where(:root),
:host {
  /**
    * Conditional tokens to check if the key color is >= 60
    * Key colors are the most colorful tint in a scale, recorded as --wa-color-{hue} in each palette
    * The numeric value of the key is isolated as --wa-color-{hue}-key
    * If key < 60, the result is 0%
    * If key >= 60, the result is 100%
    * Intended to be used in the color-mix() functions below
    */

  --wa-color-red-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-red-key), 1) * 100%));
  --wa-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%));
  --wa-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%));
  --wa-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-green-key), 1) * 100%));
  --wa-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%));
  --wa-color-blue-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%));
  --wa-color-indigo-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%));
  --wa-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%));
  --wa-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%));
  --wa-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%));

  /**
    * Tokens to set text color with appropriate WCAG 2.1 contrast
    * If key < 60, the text color is white
    * If key >= 60, the text color is {hue}-10
    */

  --wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
  --wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
  --wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
  --wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
  --wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
  --wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
  --wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
  --wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
  --wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
  --wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
}


@layer wa-color-palette {
  :where(:root),
  .wa-palette-default {
    --wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
    --wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
    --wa-color-red-80: #ffb8b6 /* oklch(84.803% 0.08289 20.771) */;
    --wa-color-red-70: #fd8f90 /* oklch(76.801% 0.13322 20.052) */;
    --wa-color-red-60: #f3676c /* oklch(68.914% 0.17256 20.646) */;
    --wa-color-red-50: #dc3146 /* oklch(58.857% 0.20512 20.223) */;
    --wa-color-red-40: #b30532 /* oklch(48.737% 0.19311 18.413) */;
    --wa-color-red-30: #8a132c /* oklch(41.17% 0.1512 16.771) */;
    --wa-color-red-20: #631323 /* oklch(33.297% 0.11208 14.847) */;
    --wa-color-red-10: #3e0913 /* oklch(24.329% 0.08074 15.207) */;
    --wa-color-red-05: #2a040b /* oklch(19.016% 0.06394 13.71) */;
    --wa-color-red: var(--wa-color-red-50);
    --wa-color-red-key: 50;

    --wa-color-orange-95: #fff0e6 /* oklch(96.426% 0.02105 56.133) */;
    --wa-color-orange-90: #ffdfca /* oklch(92.468% 0.04529 55.325) */;
    --wa-color-orange-80: #ffbb94 /* oklch(84.588% 0.09454 50.876) */;
    --wa-color-orange-70: #ff9266 /* oklch(76.744% 0.14429 42.309) */;
    --wa-color-orange-60: #f46a45 /* oklch(68.848% 0.17805 35.951) */;
    --wa-color-orange-50: #cd491c /* oklch(58.195% 0.17597 37.577) */;
    --wa-color-orange-40: #9f3501 /* oklch(47.889% 0.14981 39.957) */;
    --wa-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
    --wa-color-orange-20: #601b00 /* oklch(33.123% 0.10587 39.117) */;
    --wa-color-orange-10: #3c0d00 /* oklch(24.043% 0.07768 38.607) */;
    --wa-color-orange-05: #280600 /* oklch(18.644% 0.0607 38.252) */;
    --wa-color-orange: var(--wa-color-orange-60);
    --wa-color-orange-key: 60;

    --wa-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */;
    --wa-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */;
    --wa-color-yellow-80: #fac22b /* oklch(84.185% 0.16263 85.991) */;
    --wa-color-yellow-70: #ef9d00 /* oklch(75.949% 0.16251 72.13) */;
    --wa-color-yellow-60: #da7e00 /* oklch(67.883% 0.15587 62.246) */;
    --wa-color-yellow-50: #b45f04 /* oklch(57.449% 0.13836 56.585) */;
    --wa-color-yellow-40: #8c4602 /* oklch(47.319% 0.11666 54.663) */;
    --wa-color-yellow-30: #6f3601 /* oklch(40.012% 0.09892 54.555) */;
    --wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
    --wa-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
    --wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
    --wa-color-yellow: var(--wa-color-yellow-80);
    --wa-color-yellow-key: 80;

    --wa-color-green-95: #e3f9e3 /* oklch(96.006% 0.03715 145.28) */;
    --wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
    --wa-color-green-80: #93da98 /* oklch(82.445% 0.11601 146.11) */;
    --wa-color-green-70: #5dc36f /* oklch(73.554% 0.15308 147.59) */;
    --wa-color-green-60: #00ac49 /* oklch(64.982% 0.18414 148.83) */;
    --wa-color-green-50: #00883c /* oklch(54.765% 0.15165 149.77) */;
    --wa-color-green-40: #036730 /* oklch(45.004% 0.11963 151.06) */;
    --wa-color-green-30: #0a5027 /* oklch(37.988% 0.09487 151.62) */;
    --wa-color-green-20: #0a3a1d /* oklch(30.876% 0.07202 152.23) */;
    --wa-color-green-10: #052310 /* oklch(22.767% 0.05128 152.45) */;
    --wa-color-green-05: #031608 /* oklch(17.84% 0.03957 151.36) */;
    --wa-color-green: var(--wa-color-green-60);
    --wa-color-green-key: 60;

    --wa-color-cyan-95: #e3f6fb /* oklch(96.063% 0.02111 215.26) */;
    --wa-color-cyan-90: #c5ecf7 /* oklch(91.881% 0.04314 216.7) */;
    --wa-color-cyan-80: #7fd6ec /* oklch(82.906% 0.08934 215.86) */;
    --wa-color-cyan-70: #2fbedc /* oklch(74.18% 0.12169 215.86) */;
    --wa-color-cyan-60: #00a3c0 /* oklch(65.939% 0.11738 216.42) */;
    --wa-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
    --wa-color-cyan-40: #026274 /* oklch(45.735% 0.08074 216.18) */;
    --wa-color-cyan-30: #014c5b /* oklch(38.419% 0.06817 216.88) */;
    --wa-color-cyan-20: #003844 /* oklch(31.427% 0.05624 217.32) */;
    --wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
    --wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
    --wa-color-cyan: var(--wa-color-cyan-70);
    --wa-color-cyan-key: 70;

    --wa-color-blue-95: #e8f3ff /* oklch(95.944% 0.01996 250.38) */;
    --wa-color-blue-90: #d1e8ff /* oklch(92.121% 0.03985 248.26) */;
    --wa-color-blue-80: #9fceff /* oklch(83.572% 0.08502 249.92) */;
    --wa-color-blue-70: #6eb3ff /* oklch(75.256% 0.1308 252.03) */;
    --wa-color-blue-60: #3e96ff /* oklch(67.196% 0.17661 254.97) */;
    --wa-color-blue-50: #0071ec /* oklch(56.972% 0.20461 257.29) */;
    --wa-color-blue-40: #0053c0 /* oklch(47.175% 0.1846 259.19) */;
    --wa-color-blue-30: #003f9c /* oklch(39.805% 0.16217 259.98) */;
    --wa-color-blue-20: #002d77 /* oklch(32.436% 0.1349 260.35) */;
    --wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
    --wa-color-blue-05: #000f35 /* oklch(18.565% 0.07904 260.75) */;
    --wa-color-blue: var(--wa-color-blue-50);
    --wa-color-blue-key: 50;

    --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
    --wa-color-indigo-90: #dfe5ff /* oklch(92.527% 0.0359 275.35) */;
    --wa-color-indigo-80: #bcc7ff /* oklch(84.053% 0.07938 275.91) */;
    --wa-color-indigo-70: #9da9ff /* oklch(75.941% 0.12411 276.95) */;
    --wa-color-indigo-60: #808aff /* oklch(67.977% 0.17065 277.16) */;
    --wa-color-indigo-50: #6163f2 /* oklch(57.967% 0.20943 277.04) */;
    --wa-color-indigo-40: #4945cb /* oklch(48.145% 0.20042 277.08) */;
    --wa-color-indigo-30: #3933a7 /* oklch(40.844% 0.17864 277.26) */;
    --wa-color-indigo-20: #292381 /* oklch(33.362% 0.15096 277.21) */;
    --wa-color-indigo-10: #181255 /* oklch(24.534% 0.11483 277.73) */;
    --wa-color-indigo-05: #0d0a3a /* oklch(19.092% 0.08825 276.76) */;
    --wa-color-indigo: var(--wa-color-indigo-50);
    --wa-color-indigo-key: 50;

    --wa-color-purple-95: #f7f0ff /* oklch(96.49% 0.02119 306.84) */;
    --wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
    --wa-color-purple-80: #ddbdff /* oklch(84.781% 0.09615 306.52) */;
    --wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
    --wa-color-purple-60: #b678f5 /* oklch(68.906% 0.1844 304.96) */;
    --wa-color-purple-50: #9951db /* oklch(58.603% 0.20465 304.87) */;
    --wa-color-purple-40: #7936b3 /* oklch(48.641% 0.18949 304.79) */;
    --wa-color-purple-30: #612692 /* oklch(41.23% 0.16836 304.92) */;
    --wa-color-purple-20: #491870 /* oklch(33.663% 0.14258 305.12) */;
    --wa-color-purple-10: #2d0b48 /* oklch(24.637% 0.10612 304.95) */;
    --wa-color-purple-05: #1e0532 /* oklch(19.393% 0.08461 305.26) */;
    --wa-color-purple: var(--wa-color-purple-50);
    --wa-color-purple-key: 50;

    --wa-color-pink-95: #feeff9 /* oklch(96.676% 0.02074 337.69) */;
    --wa-color-pink-90: #feddf0 /* oklch(93.026% 0.04388 342.45) */;
    --wa-color-pink-80: #fcb5d8 /* oklch(84.928% 0.09304 348.21) */;
    --wa-color-pink-70: #f78dbf /* oklch(77.058% 0.14016 351.19) */;
    --wa-color-pink-60: #e66ba3 /* oklch(69.067% 0.16347 353.69) */;
    --wa-color-pink-50: #c84382 /* oklch(58.707% 0.17826 354.82) */;
    --wa-color-pink-40: #9e2a6c /* oklch(48.603% 0.16439 350.08) */;
    --wa-color-pink-30: #7d1e58 /* oklch(41.017% 0.14211 347.77) */;
    --wa-color-pink-20: #5e1342 /* oklch(33.442% 0.11808 347.01) */;
    --wa-color-pink-10: #3c0828 /* oklch(24.601% 0.08768 347.8) */;
    --wa-color-pink-05: #28041a /* oklch(19.199% 0.06799 346.97) */;
    --wa-color-pink: var(--wa-color-pink-50);
    --wa-color-pink-key: 50;

    --wa-color-gray-95: #f1f2f3 /* oklch(96.067% 0.00172 247.84) */;
    --wa-color-gray-90: #e4e5e9 /* oklch(92.228% 0.0055 274.96) */;
    --wa-color-gray-80: #c7c9d0 /* oklch(83.641% 0.00994 273.33) */;
    --wa-color-gray-70: #abaeb9 /* oklch(75.183% 0.01604 273.78) */;
    --wa-color-gray-60: #9194a2 /* oklch(66.863% 0.02088 276.18) */;
    --wa-color-gray-50: #717584 /* oklch(56.418% 0.02359 273.77) */;
    --wa-color-gray-40: #545868 /* oklch(46.281% 0.02644 274.26) */;
    --wa-color-gray-30: #424554 /* oklch(39.355% 0.02564 276.27) */;
    --wa-color-gray-20: #2f323f /* oklch(31.97% 0.02354 274.82) */;
    --wa-color-gray-10: #1b1d26 /* oklch(23.277% 0.01762 275.14) */;
    --wa-color-gray-05: #101219 /* oklch(18.342% 0.01472 272.42) */;
    --wa-color-gray: var(--wa-color-gray-40);
    --wa-color-gray-key: 40;
  }
}


@layer wa-theme {
  :where(:root),
  .wa-theme-default,
  .wa-light,
  .wa-dark .wa-invert,
  .wa-light .wa-theme-default,
  .wa-dark .wa-theme-default.wa-invert,
  .wa-dark .wa-theme-default .wa-invert {
    /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: light;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: white;
    --wa-color-surface-default: white;
    --wa-color-surface-lowered: var(--wa-color-neutral-95);
    --wa-color-surface-border: var(--wa-color-neutral-90);

    --wa-color-text-normal: var(--wa-color-neutral-10);
    --wa-color-text-quiet: var(--wa-color-neutral-40);
    --wa-color-text-link: var(--wa-color-brand-40);

    --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);

    --wa-color-shadow: color-mix(
      in oklab,
      var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
      transparent
    );

    --wa-color-focus: var(--wa-color-brand-60);

    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 10%;
    --wa-color-mix-active: var(--wa-color-surface-default) 10%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-95);
    --wa-color-brand-fill-normal: var(--wa-color-brand-90);
    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
    --wa-color-brand-border-quiet: var(--wa-color-brand-90);
    --wa-color-brand-border-normal: var(--wa-color-brand-80);
    --wa-color-brand-border-loud: var(--wa-color-brand-60);
    --wa-color-brand-on-quiet: var(--wa-color-brand-40);
    --wa-color-brand-on-normal: var(--wa-color-brand-30);
    --wa-color-brand-on-loud: white;

    --wa-color-success-fill-quiet: var(--wa-color-success-95);
    --wa-color-success-fill-normal: var(--wa-color-success-90);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: var(--wa-color-success-90);
    --wa-color-success-border-normal: var(--wa-color-success-80);
    --wa-color-success-border-loud: var(--wa-color-success-60);
    --wa-color-success-on-quiet: var(--wa-color-success-40);
    --wa-color-success-on-normal: var(--wa-color-success-30);
    --wa-color-success-on-loud: white;

    --wa-color-warning-fill-quiet: var(--wa-color-warning-95);
    --wa-color-warning-fill-normal: var(--wa-color-warning-90);
    --wa-color-warning-fill-loud: var(--wa-color-warning-50);
    --wa-color-warning-border-quiet: var(--wa-color-warning-90);
    --wa-color-warning-border-normal: var(--wa-color-warning-80);
    --wa-color-warning-border-loud: var(--wa-color-warning-60);
    --wa-color-warning-on-quiet: var(--wa-color-warning-40);
    --wa-color-warning-on-normal: var(--wa-color-warning-30);
    --wa-color-warning-on-loud: white;

    --wa-color-danger-fill-quiet: var(--wa-color-danger-95);
    --wa-color-danger-fill-normal: var(--wa-color-danger-90);
    --wa-color-danger-fill-loud: var(--wa-color-danger-50);
    --wa-color-danger-border-quiet: var(--wa-color-danger-90);
    --wa-color-danger-border-normal: var(--wa-color-danger-80);
    --wa-color-danger-border-loud: var(--wa-color-danger-60);
    --wa-color-danger-on-quiet: var(--wa-color-danger-40);
    --wa-color-danger-on-normal: var(--wa-color-danger-30);
    --wa-color-danger-on-loud: white;

    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-80);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-60);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-on-loud: white;
    /* #endregion */
  }

  .wa-dark,
  .wa-invert,
  .wa-dark .wa-theme-default,
  .wa-light .wa-theme-default.wa-invert,
  .wa-light .wa-theme-default .wa-invert {
    /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: dark;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: var(--wa-color-neutral-10);
    --wa-color-surface-default: var(--wa-color-neutral-05);
    --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
    --wa-color-surface-border: var(--wa-color-neutral-20);

    --wa-color-text-normal: var(--wa-color-neutral-95);
    --wa-color-text-quiet: var(--wa-color-neutral-60);
    --wa-color-text-link: var(--wa-color-brand-70);

    --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);

    --wa-color-shadow: color-mix(
      in oklab,
      var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
      transparent
    );

    --wa-color-focus: var(--wa-color-brand-60);

    --wa-color-mix-hover: oklch(from currentColor calc(1 - l) c h) 20%;
    --wa-color-mix-active: var(--wa-color-surface-default) 20%;

    --wa-color-brand-fill-quiet: var(--wa-color-brand-10);
    --wa-color-brand-fill-normal: var(--wa-color-brand-20);
    --wa-color-brand-fill-loud: var(--wa-color-brand-50);
    --wa-color-brand-border-quiet: var(--wa-color-brand-20);
    --wa-color-brand-border-normal: var(--wa-color-brand-30);
    --wa-color-brand-border-loud: var(--wa-color-brand-40);
    --wa-color-brand-on-quiet: var(--wa-color-brand-60);
    --wa-color-brand-on-normal: var(--wa-color-brand-70);
    --wa-color-brand-on-loud: white;

    --wa-color-success-fill-quiet: var(--wa-color-success-10);
    --wa-color-success-fill-normal: var(--wa-color-success-20);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: var(--wa-color-success-20);
    --wa-color-success-border-normal: var(--wa-color-success-30);
    --wa-color-success-border-loud: var(--wa-color-success-40);
    --wa-color-success-on-quiet: var(--wa-color-success-60);
    --wa-color-success-on-normal: var(--wa-color-success-70);
    --wa-color-success-on-loud: white;

    --wa-color-warning-fill-quiet: var(--wa-color-warning-10);
    --wa-color-warning-fill-normal: var(--wa-color-warning-20);
    --wa-color-warning-fill-loud: var(--wa-color-warning-50);
    --wa-color-warning-border-quiet: var(--wa-color-warning-20);
    --wa-color-warning-border-normal: var(--wa-color-warning-30);
    --wa-color-warning-border-loud: var(--wa-color-warning-40);
    --wa-color-warning-on-quiet: var(--wa-color-warning-60);
    --wa-color-warning-on-normal: var(--wa-color-warning-70);
    --wa-color-warning-on-loud: white;

    --wa-color-danger-fill-quiet: var(--wa-color-danger-10);
    --wa-color-danger-fill-normal: var(--wa-color-danger-20);
    --wa-color-danger-fill-loud: var(--wa-color-danger-50);
    --wa-color-danger-border-quiet: var(--wa-color-danger-20);
    --wa-color-danger-border-normal: var(--wa-color-danger-30);
    --wa-color-danger-border-loud: var(--wa-color-danger-40);
    --wa-color-danger-on-quiet: var(--wa-color-danger-60);
    --wa-color-danger-on-normal: var(--wa-color-danger-70);
    --wa-color-danger-on-loud: white;

    --wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
    --wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
    --wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
    --wa-color-neutral-border-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-border-loud: var(--wa-color-neutral-40);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
    --wa-color-neutral-on-loud: var(--wa-color-neutral-05);
    /* #endregion */
  }

  :where(:root),
  .wa-theme-default,
  .wa-light,
  .wa-dark,
  .wa-invert {
    font-family: var(--wa-font-family-body);

    /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
    --wa-font-family-heading: var(--wa-font-family-body);
    --wa-font-family-code: ui-monospace, monospace;
    --wa-font-family-longform: ui-serif, serif;

    /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
     * For larger font sizes, each size is twice 1.125x larger to maximize impact.
     * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
    --wa-font-size-scale: 1;
    --wa-font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 10px */
    --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
    --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
    --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
    --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
    --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
    --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
    --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
    --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
    --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
    --wa-font-size-5xl: round(calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px); /* 66px */

    --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);

    --wa-font-weight-light: 300;
    --wa-font-weight-normal: 400;
    --wa-font-weight-semibold: 500;
    --wa-font-weight-bold: 600;

    --wa-font-weight-body: var(--wa-font-weight-normal);
    --wa-font-weight-heading: var(--wa-font-weight-bold);
    --wa-font-weight-code: var(--wa-font-weight-normal);
    --wa-font-weight-longform: var(--wa-font-weight-normal);
    --wa-font-weight-action: var(--wa-font-weight-semibold);

    --wa-line-height-condensed: 1.2;
    --wa-line-height-normal: 1.6;
    --wa-line-height-expanded: 2;

    --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
    --wa-link-decoration-hover: underline;
    /* #endregion */

    /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-space-scale: 1;
    --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
    --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
    --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
    --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
    --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
    --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
    --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
    --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
    --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
    --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
    --wa-space-5xl: calc(var(--wa-space-scale) * 5rem); /* 80px */

    --wa-content-spacing: var(--wa-space-l);
    /* #endregion */

    /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-style: solid;

    --wa-border-width-scale: 1;
    --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
    --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
    --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
    /* #endregion */

    /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-radius-scale: 1;
    --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
    --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
    --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);

    --wa-border-radius-pill: 9999px;
    --wa-border-radius-circle: 50%;
    --wa-border-radius-square: 0px;
    /* #endregion */

    /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-focus-ring-style: solid;
    --wa-focus-ring-width: 0.1875rem; /* 3px */
    --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
    --wa-focus-ring-offset: 0.0625rem; /* 1px */
    /* #endregion */

    /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-shadow-offset-x-scale: 0;
    --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
    --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
    --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);

    --wa-shadow-offset-y-scale: 1;
    --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
    --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
    --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);

    --wa-shadow-blur-scale: 1;
    --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
    --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
    --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);

    --wa-shadow-spread-scale: -0.5;
    --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
    --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
    --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);

    --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
      var(--wa-shadow-spread-s) var(--wa-color-shadow);
    --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
      var(--wa-shadow-spread-m) var(--wa-color-shadow);
    --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
      var(--wa-shadow-spread-l) var(--wa-color-shadow);
    /* #endregion */

    /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-transition-easing: ease;
    --wa-transition-slow: 300ms;
    --wa-transition-normal: 150ms;
    --wa-transition-fast: 75ms;
    /* #endregion */

    /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Form Controls */
    --wa-form-control-background-color: var(--wa-color-surface-default);

    --wa-form-control-border-color: var(--wa-color-neutral-border-loud);
    --wa-form-control-border-style: var(--wa-border-style);
    --wa-form-control-border-width: var(--wa-border-width-s);
    --wa-form-control-border-radius: var(--wa-border-radius-m);

    --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);

    --wa-form-control-label-color: var(--wa-color-text-normal);
    --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
    --wa-form-control-label-line-height: var(--wa-line-height-condensed);

    --wa-form-control-value-color: var(--wa-color-text-normal);
    --wa-form-control-value-font-weight: var(--wa-font-weight-body);
    --wa-form-control-value-line-height: var(--wa-line-height-condensed);

    --wa-form-control-hint-color: var(--wa-color-text-quiet);
    --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
    --wa-form-control-hint-line-height: var(--wa-line-height-normal);

    --wa-form-control-placeholder-color: var(--wa-color-gray-50);

    --wa-form-control-required-content: '*';
    --wa-form-control-required-content-color: inherit;
    --wa-form-control-required-content-offset: 0.1em;

    --wa-form-control-padding-block: 0.75em;
    --wa-form-control-padding-inline: 1em;
    --wa-form-control-height: round(
      calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
      1px
    );
    --wa-form-control-toggle-size: round(1.25em, 1px);

    /* Buttons */
    --wa-button-transform-hover: none;
    --wa-button-transform-active: scale(0.9875);

    /* Panels */
    --wa-panel-border-style: var(--wa-border-style);
    --wa-panel-border-width: var(--wa-border-width-s);
    --wa-panel-border-radius: var(--wa-border-radius-l);

    /* Tooltips */
    --wa-tooltip-arrow-size: 0.375rem;

    --wa-tooltip-background-color: var(--wa-color-text-normal);

    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
    --wa-tooltip-border-style: var(--wa-border-style);
    --wa-tooltip-border-width: var(--wa-border-width-s);
    --wa-tooltip-border-radius: var(--wa-border-radius-s);

    --wa-tooltip-content-color: var(--wa-color-surface-default);
    --wa-tooltip-font-size: var(--wa-font-size-s);
    --wa-tooltip-line-height: var(--wa-line-height-normal);
    /* #endregion */
  }

  :is(html, body):has(wa-page) {
    min-height: 100%;
    padding: 0;
    margin: 0;
  }
}


/* css/tokens.css */
/* Marker - Modern Mobile First Dark Theme.
   Interactive accent is purple; yellow is reserved for badge fills and
   highlight accents. Every token below is referenced by the stylesheets. */
:root {
    --bg-primary: #0a0b0e;
    --bg-canvas: #0c0d12;
    --bg-surface: #14161f;
    --bg-surface-elevated: #1e2230;
    --accent: #8B3DFF;
    --accent-strong: #7D2AE8;
    --accent-text: #C084FC;
    --brand-yellow: #FFE600;
    --brand-yellow-glow: rgba(255, 230, 0, 0.25);
    --cyan: #00F0FF;
    --text-primary: #ffffff;
    --text-secondary: #8e95a5;
    --text-muted: #A0A4B0;
    --text-faint: #9297a3;
    --border: rgba(255, 255, 255, 0.1);
    --border-active: #8B3DFF;
    --danger: #ff4757;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Phase 3: shared overlay, z-index, and spacing primitives.
   Cascade layers keep vendor/overlay overrides predictable without Tailwind. */
@layer tokens, base, components, drawers, popovers, workspace;
:root {
    --z-canvas: 1;
    --z-selection-overlay: 10;
    --z-context-bar: 40;
    --z-top-bar: 50;
    --z-drawer: 500;
    --z-popover: 1000;
    --z-toast: 1200;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 20px;
}

/* style.css */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family);
}

button, input, select, textarea {
    font-family: inherit;
}

#appContainer {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-canvas);
}

/* 1. Top Action Bar */
#topBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 12px;
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    z-index: var(--z-top-bar);
}

.icon-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.icon-btn:disabled {
    opacity: 0.3;
}

#saveStatus {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

#saveStatus.saved {
    color: #2ed573;
}

#saveStatus.saving {
    color: var(--brand-yellow);
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.5; }
    to { opacity: 1; }
}


/* Marker Workspace Layout: Split between Left Side Panel and Canvas Viewport */
#markerWorkspace {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: calc(100vh - 100px);
}

/* Left Docked Side Panel (Desktop 360px) */
#sidePanelContainer {
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 100%;
    background-color: #18191B;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    position: absolute;
    top: 0;
    left: 82px;
    z-index: 55;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-12px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
    box-shadow: 16px 0 34px rgba(0, 0, 0, 0.34);
}

.side-panel-open #sidePanelContainer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear;
}

#sidePanelContainer .bottom-drawer {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    transform: none !important;
    display: none;
    flex-direction: column;
    background: transparent;
    box-shadow: none;
    overflow-y: auto;
}

#sidePanelContainer .bottom-drawer.open {
    display: flex;
}

/* 2. Viewport & Canvas */
#viewport {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: #141518;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Scrollable Viewport Stage */
.viewport-scroll {
    position: absolute;
    inset: 0;
    overflow: auto;
    display: flex;
    padding: 40px;
    box-sizing: border-box;
}

/* Marker Custom Smooth Scrollbars */
.viewport-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.viewport-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

.viewport-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease;
}

.viewport-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 61, 255, 0.75);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.viewport-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) rgba(0, 0, 0, 0.25);
}

/* Canvas Scaler: Real layout box for scaled canvas */
.canvas-scaler {
    position: relative;
    flex-shrink: 0;
    /* Zoom geometry updates synchronously so the viewport anchor never drifts. */
    transition: none;
}

#canvasWrapper {
    position: absolute;
    top: 0;
    left: 0;
    outline: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.14);
    border-radius: 0;
    overflow: visible;
    touch-action: none;
    transition: none;
}

#markerCanvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

/* Vector Selection Overlay: Renders outside canvas bounds into workspace */
.canvas-selection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 25;
}

.canvas-selection-overlay .sel-handle {
    pointer-events: all;
    transition: filter 0.1s ease, opacity 0.1s ease;
}

.canvas-selection-overlay .sel-handle:hover {
    filter: drop-shadow(0 0 5px rgba(184, 154, 255, 0.9));
}

/* 3. Contextual Action Bar (Marker-Grade: Directly under Top Bar) */
#contextBar {
    display: flex;
    align-items: center;
    justify-content: safe center;
    gap: 6px;
    overflow-x: auto;
    padding: 0 16px;
    background-color: #121214;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
    scrollbar-width: none;
    z-index: var(--z-context-bar);
}

#contextBar::-webkit-scrollbar {
    display: none;
}

.context-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background-color: #25262F;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #E2E4E9;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.context-chip-btn svg {
    color: inherit;
    flex-shrink: 0;
}

/* Marker-style tool groups: related chips clustered with dividers. */
.context-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.context-group + .context-group {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 8px;
}

.context-chip-btn:hover {
    background-color: #323440;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.22);
}

.context-chip-btn.active,
.context-chip-btn:active {
    background-color: rgba(139, 61, 255, 0.2);
    border-color: var(--accent);
    color: var(--accent-text);
}

.context-chip-btn.danger:hover {
    background-color: rgba(255, 59, 48, 0.2);
    color: #FF3B30;
    border-color: #FF3B30;
}

.context-chip-btn.deselect-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: 4px;
    padding-left: 14px;
}

/* 4. Bottom Global Navigation */
#bottomBar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 56px;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border);
    z-index: var(--z-top-bar);
}

/* 5. Slide-Up Drawers */
.bottom-drawer {
    position: absolute;
    bottom: 56px;
    left: 0;
    width: 100%;
    max-height: 55vh;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
    z-index: 100;
    display: none;
    flex-direction: column;
    animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bottom-drawer.open {
    display: flex;
}

/* Contextual child panels float over the workspace without opening the dock. */
.context-floating-popover {
    position: fixed;
    /* Compact like Marker: small anchored popover, never a full side panel.
       Per-panel widths below; default fits single-slider panels. */
    width: min(260px, calc(100vw - 24px));
    height: auto !important;
    min-height: 0;
    bottom: auto !important;
    max-height: min(420px, calc(100vh - 24px));
    background-color: #1D1F26;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    z-index: 160;
    overflow: hidden;
    animation: contextPopoverIn 0.16s ease-out forwards;
}

/* Marker proportions per panel: corners ~248, stroke ~272, flip ~232. */
#drawerShapeStyle[data-mode="corners"].context-floating-popover {
    width: min(248px, calc(100vw - 24px));
}
#drawerShapeStyle[data-mode="stroke"].context-floating-popover {
    width: min(272px, calc(100vw - 24px));
}
#drawerFlip.context-floating-popover {
    width: min(232px, calc(100vw - 24px));
}
#drawerColor.context-floating-popover {
    width: min(280px, calc(100vw - 24px));
}
#drawerMore.context-floating-popover {
    width: min(280px, calc(100vw - 24px));
}

.context-floating-popover.open {
    display: flex;
}

.context-floating-popover .drawer-header {
    padding: 8px 10px;
}

.context-floating-popover .crop-title {
    font-size: 13px;
}

.context-floating-popover .drawer-body {
    padding: 10px;
    gap: 8px;
}

.context-floating-popover .prop-group {
    gap: 5px;
}

.context-floating-popover .drawer-close {
    font-size: 13px;
    padding: 2px 6px;
}

#drawerShapeStyle[data-mode="corners"] .stroke-style-group,
#drawerShapeStyle[data-mode="stroke"] .corner-style-group {
    display: none;
}

.compact-context-popover .drawer-body {
    gap: 6px;
}

.flip-options-body {
    display: grid;
    grid-template-columns: 1fr;
    padding: 8px 10px !important;
}

.flip-option-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.flip-option-btn:hover {
    background: rgba(139, 61, 255, 0.18);
    border-color: rgba(139, 61, 255, 0.48);
}

.flip-option-icon {
    width: 22px;
    color: #D8B4FE;
    font-size: 21px;
    line-height: 1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.flip-option-icon svg {
    width: 20px;
    height: 20px;
}

@keyframes contextPopoverIn {
    from { opacity: 0; transform: translateY(-5px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.drawer-header h3 {
    font-size: 15px;
    font-weight: 600;
}

.drawer-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
}

.layer-order-actions {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border);
}

.small-btn {
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.small-btn svg {
    width: 13px;
    height: 13px;
}

.small-btn:active {
    background-color: var(--brand-yellow);
    color: #000;
}

.layer-list {
    list-style: none;
    overflow-y: auto;
    padding: 8px 12px;
}

.layer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
}

.layer-item.selected {
    border-color: var(--brand-yellow);
    /* Opaque olive: the old 8%-alpha yellow wash replaced the solid base
     * and turned selected pills translucent (canvas showed through). */
    background-color: #393a2a;
}

.layer-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.layer-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.layer-btn {
    background: none;
    border: none;
    font-size: 15px;
    cursor: pointer;
    color: var(--text-secondary);
}

.layer-btn.active {
    color: var(--text-primary);
}

/* Familiarity redesign Phase A: Lucide icons inside layer rows. */
.layer-type-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}
.layer-type-icon svg {
    width: 16px;
    height: 16px;
}
.layer-btn {
    display: inline-flex;
    align-items: center;
}
.layer-btn svg {
    width: 15px;
    height: 15px;
}
/* Marker-style drag grip: six-dot handle replaces the up/down arrows.
 * Same 15px box and secondary color as the eye/lock buttons so the row
 * controls read as one family. */
.layer-grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    cursor: grab;
    color: var(--text-secondary);
    touch-action: none;
    border-radius: 6px;
    user-select: none;
    -webkit-user-select: none;
}
.layer-grip:active {
    cursor: grabbing;
    color: var(--text-primary);
}
.layer-grip svg {
    width: 15px;
    height: 15px;
    pointer-events: none;
}
.layer-item {
    user-select: none;
    -webkit-user-select: none;
}
/* Whole-pill drag: rows never scroll by touch (the drag owns the gesture;
 * the list auto-scrolls near its edges mid-drag). Siblings glide to their
 * post-drop slots while the dragged pill follows the finger. */
.layer-item {
    touch-action: none;
    transition: transform 0.18s ease;
}
.layer-item.dragging {
    transition: none;
    opacity: 1;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    position: relative;
    z-index: 3;
}
.layer-item.layer-drop-before {
    box-shadow: 0 -2px 0 0 var(--accent);
}
.layer-item.layer-drop-after {
    box-shadow: 0 2px 0 0 var(--accent);
}

/* Property Sliders & Controls */
.drawer-body {
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.prop-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prop-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.prop-input {
    width: 100%;
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
}

.style-control-header,
.stroke-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.style-number-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 12px;
}

.style-number-wrap input {
    width: 70px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-surface-elevated);
    color: var(--text-primary);
    font-weight: 700;
    text-align: right;
}

.stroke-toggle-btn {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 6px 12px;
}

.stroke-toggle-btn.active {
    background: rgba(139, 61, 255, 0.28);
    border-color: var(--accent);
    color: #FFFFFF;
}

.stroke-color-row {
    margin-top: 4px;
}

.stroke-alignment-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 4px;
}

.stroke-alignment-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.stroke-alignment-options .small-preset-chip.active {
    background: rgba(139, 61, 255, 0.28);
    border-color: var(--accent);
    color: #FFFFFF;
}

.stroke-color-row input[type="color"] {
    width: 34px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-surface-elevated);
    cursor: pointer;
}

.stroke-color-hex {
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
}

.shape-stroke-group {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.color-swatches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
}

.swatch.selected {
    border-color: #fff;
    transform: scale(1.1);
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
}

.template-card {
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.template-card.active {
    border-color: var(--brand-yellow);
}
/* Crop & Framing Menu Drawer */
.crop-drawer {
    background-color: #18191E;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 18px 20px 24px;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
}

.crop-title {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
}

.aspect-ratio-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 2px 8px;
    scrollbar-width: none;
}

.aspect-ratio-grid::-webkit-scrollbar {
    display: none;
}

.aspect-card * { pointer-events: none; }
.aspect-card {
    flex: 0 0 74px;
    height: 74px;
    background-color: #25262F;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    gap: 5px;
    transition: all 0.15s ease;
}

.aspect-card:active {
    transform: scale(0.94);
}

.aspect-card.active {
    border-color: var(--accent);
    background-color: rgba(139, 61, 255, 0.18);
    color: #FFFFFF;
    box-shadow: 0 0 14px rgba(139, 61, 255, 0.35);
}

.aspect-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.aspect-name {
    font-size: 11px;
    font-weight: 600;
    color: inherit;
}

.small-btn.auto-btn,
.small-btn.zero-btn {
    background-color: #25262F;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}

.small-btn.auto-btn:hover,
.small-btn.zero-btn:hover {
    background-color: #323440;
}

.crop-actions-row .crop-btn {
    padding: 9px 22px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.crop-actions-row .cancel-btn {
    background-color: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #E2E4E9;
}

.crop-actions-row .cancel-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.crop-actions-row .done-btn {
    background-color: var(--accent);
    border: none;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(139, 61, 255, 0.45);
}

.crop-actions-row .done-btn:hover {
    background-color: var(--accent-strong);
}

.crop-actions-row .done-btn:active {
    transform: scale(0.96);
}


/* --- Position & Layers Drawer --- */
.position-drawer {
    max-height: 60vh;
}

.position-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}

.position-tabs {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px;
    border-radius: var(--radius-pill);
}

.pos-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 18px;
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pos-tab:hover {
    color: #FFFFFF;
}

.pos-tab.active {
    background: var(--accent);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(139, 61, 255, 0.45);
}

.position-body {
    padding: 14px 16px 20px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.position-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
}

.align-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.align-btn {
    background-color: #1E1F26;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #E2E4E9;
    border-radius: 10px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.align-btn svg {
    color: var(--accent-text);
}

.align-btn span {
    font-size: 11px;
    font-weight: 600;
}

.align-btn:hover {
    background-color: #2A2B36;
    border-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.align-btn:active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
    transform: scale(0.96);
}

.arrange-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.arrange-btn {
    background-color: #1E1F26;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #E2E4E9;
    border-radius: 10px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.arrange-btn svg {
    color: #A855F7;
}

.arrange-btn span {
    font-size: 11px;
    font-weight: 600;
}

.arrange-btn:hover {
    background-color: #2A2B36;
    border-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.arrange-btn:active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
    transform: scale(0.96);
}

.arrange-btn:disabled,
.arrange-btn.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.coords-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    overflow: hidden;
}

.coord-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.coord-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
}

.coord-input {
    background: #1E1F26;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 4px;
    text-align: center;
    outline: none;
    transition: all 0.15s ease;
}

.coord-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(139, 61, 255, 0.35);
}

#drawerPosition.context-floating-popover {
    width: min(320px, calc(100vw - 24px));
}

/* The layer list scrolls inside the capped floating panel. */
#drawerPosition.context-floating-popover #layerList {
    max-height: min(300px, calc(100vh - 320px));
    overflow-y: auto;
}


/* --- Marker UI Layout & Menu Styles --- */
.marker-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 14px;
    background-color: #18191B;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: var(--z-top-bar);
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.doc-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.doc-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
}

.doc-dim {
    font-size: 10px;
    color: #8E95A5;
    font-weight: 500;
}

.history-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 2px;
}

.saved-cloud {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #00E676;
    font-weight: 600;
    background: rgba(0, 230, 118, 0.08);
    padding: 5px 11px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 230, 118, 0.18);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.saved-cloud.saved {
    color: #00E676;
    background: rgba(0, 230, 118, 0.08);
    border-color: rgba(0, 230, 118, 0.2);
}

.saved-cloud.saving {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.saved-cloud.offline {
    color: #FFA726;
    background: rgba(255, 167, 38, 0.12);
    border-color: rgba(255, 167, 38, 0.35);
}

.saved-cloud.back-online {
    color: #00E676;
    background: rgba(0, 230, 118, 0.15);
    border-color: rgba(0, 230, 118, 0.4);
    animation: pulseOnline 1.2s ease;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.status-dot.offline {
    background: #FFA726;
    box-shadow: 0 0 6px rgba(255, 167, 38, 0.7);
}

.status-dot.online {
    background: #00E676;
    box-shadow: 0 0 6px rgba(0, 230, 118, 0.85);
}

@keyframes pulseOnline {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.marker-header-btn {
    background-color: #25262F;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.marker-header-btn:hover {
    background-color: #323440;
}

.marker-done-btn {
    background-color: var(--accent);
    border: none;
    color: #FFFFFF;
    padding: 7px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(139, 61, 255, 0.45);
    transition: all 0.15s ease;
}

.marker-done-btn:hover {
    background-color: var(--accent-strong);
}

/* Floating Action Toolbar on Canvas */
.floating-selection-bar {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 3px;
    background-color: #25262F;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    padding: 3px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
    z-index: 45;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: transform 0.05s linear;
}

.float-btn {
    background: transparent;
    border: none;
    color: #E2E4E9;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.float-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

.float-btn.delete:hover {
    background: rgba(255, 59, 48, 0.2);
    color: #FF3B30;
}

.float-btn.active {
    background: rgba(139, 61, 255, 0.28);
    color: #FFFFFF;
}

/* Unified Marker Bottom Toolbar */
.marker-bottom-bar {
    height: 64px;
    background-color: #18191B;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 0 12px;
    scrollbar-width: none;
    z-index: var(--z-top-bar);
}

.marker-bottom-bar::-webkit-scrollbar {
    display: none;
}

.marker-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 58px;
    height: 52px;
    background: transparent;
    border: none;
    color: #A0A6B2;
    border-radius: 8px;
    cursor: pointer;
    padding: 4px 6px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.marker-tool-btn svg {
    color: inherit;
}

.marker-tool-btn span {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    color: inherit;
}

.marker-tool-btn:hover {
    background-color: #25262F;
    color: #FFFFFF;
}

.marker-tool-btn:active,
.marker-tool-btn.active {
    background-color: rgba(139, 61, 255, 0.15);
    color: var(--accent-text);
}

.marker-tool-btn.danger:hover {
    background-color: rgba(255, 59, 48, 0.15);
    color: #FF3B30;
}

.marker-tool-btn.deselect-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 4px;
    padding-left: 10px;
}

/* Color Drawer */
.color-drawer {
    max-height: 50vh;
}

.color-palette-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-top: 10px;
}

.color-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    padding: 0;
}

.color-swatch:hover,
.color-swatch:focus-visible {
    transform: scale(1.15);
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(139, 61, 255, 0.4);
}


@media (max-width: 768px) {
    #markerWorkspace {
        flex-direction: column;
    }
    #sidePanelContainer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        max-height: 70vh;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px 16px 0 0;
        z-index: 100;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
        transform: translateY(12px);
    }
    .side-panel-open #sidePanelContainer {
        transform: translateY(0);
    }
    #sidePanelContainer .bottom-drawer {
        max-height: 70vh;
    }
}

@media (max-width: 520px) {
    .marker-top-bar {
        padding: 0 6px;
        gap: 4px;
    }

    .top-bar-left {
        min-width: 0;
        gap: 4px;
    }

    .doc-meta {
        min-width: 0;
        max-width: 76px;
    }

    .doc-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .doc-dim {
        display: none;
    }

    .history-controls .icon-btn {
        width: 30px;
        padding: 6px;
    }

    .top-bar-right {
        flex-shrink: 0;
        gap: 4px;
    }

    .saved-cloud {
        min-width: 30px;
        justify-content: center;
        padding: 5px 7px;
    }

    .saved-cloud span,
    .marker-header-btn span {
        display: none;
    }

    .marker-header-btn {
        padding: 6px 8px;
    }

    .marker-done-btn {
        padding: 7px 11px;
    }

    #contextBar {
        justify-content: flex-start;
        padding: 0 8px;
    }
}


/* Marker-Grade Canvas Inline Text Editor */
.canvas-inline-editor {
    position: absolute;
    background: transparent !important;
    border: 1.5px dashed var(--accent) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 0 1px rgba(139, 61, 255, 0.35) !important;
    padding: 0 !important;
    margin: 0 !important;
    resize: none !important;
    outline: none !important;
    overflow: hidden !important;
    z-index: 50 !important;
    box-sizing: border-box !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    caret-color: var(--accent) !important;
    cursor: text !important;
    display: none;
    pointer-events: auto !important;
    touch-action: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.canvas-inline-editor::selection {
    background: rgba(139, 61, 255, 0.45) !important;
    color: inherit !important;
}

/* Template Cards Grid */
.template-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
}

.template-card {
    background-color: #25262F;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 12px;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    gap: 14px;
}

.template-card:hover,
.template-card:focus-visible {
    background-color: #323440;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.template-card-preview {
    width: 64px;
    height: 80px;
    background: #18191B;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.template-aspect-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 9px;
    font-weight: 700;
    background: rgba(139, 61, 255, 0.25);
    color: var(--accent-text);
    padding: 2px 4px;
    border-radius: 4px;
}

.template-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.template-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
}

.template-card-meta {
    font-size: 11px;
    color: #A0A6B2;
}

/* --- Phase 2: Font & Shape Drawer Styles --- */

/* Font Upload Banner & Search (Marker Standard) */
.font-upload-banner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.font-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(139, 61, 255, 0.12);
    border: 1.5px dashed rgba(139, 61, 255, 0.55);
    border-radius: 8px;
    color: var(--accent-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.font-upload-btn:hover {
    background: rgba(139, 61, 255, 0.22);
    border-color: var(--accent);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(139, 61, 255, 0.25);
}

.font-upload-hint {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

.font-upload-banner.drag-over .font-upload-btn {
    background: rgba(139, 61, 255, 0.35);
    border-color: #A855F7;
    box-shadow: 0 0 18px rgba(139, 61, 255, 0.45);
    color: #FFFFFF;
    transform: scale(1.01);
}

/* Multi-Variant Font Family Cards */
.font-item-card.custom-family-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
}

.font-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.font-variant-count-pill {
    background: rgba(139, 61, 255, 0.22);
    color: #D8B4FE;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border: 1px solid rgba(139, 61, 255, 0.35);
}

.font-variant-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.font-variant-tag-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    color: #B8BCC8;
    font-size: 10.5px;
    font-weight: 500;
    padding: 2px 7px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.3;
}

.font-variant-tag-btn:hover {
    background: rgba(139, 61, 255, 0.28);
    border-color: var(--accent);
    color: #FFFFFF;
}

.font-variant-tag-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(139, 61, 255, 0.4);
}

.font-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Floating Toast Notification */
.marker-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1E1F24;
    color: #FFFFFF;
    border: 1px solid rgba(139, 61, 255, 0.45);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.marker-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.font-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #18191B;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.font-search-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(139, 61, 255, 0.25);
    color: #FFFFFF;
}

.font-search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-size: 13px;
    width: 100%;
}

.font-section-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin: 10px 0 6px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.font-badge-custom {
    background: rgba(139, 61, 255, 0.2);
    color: var(--accent-text);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.font-delete-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.15s ease;
    margin-left: 8px;
}

.font-delete-btn:hover {
    opacity: 1;
    color: #FF4D4F;
    background: rgba(255, 77, 79, 0.15);
}

/* Font Family Cards */
.font-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 16px;
    max-height: 480px;
    overflow-y: auto;
}

.font-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #25262F;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #FFFFFF;
    text-align: left;
    width: 100%;
}

.font-item-card:hover {
    background-color: #323440;
    border-color: rgba(255, 255, 255, 0.25);
}

.font-item-card.active {
    background-color: rgba(139, 61, 255, 0.2);
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(139, 61, 255, 0.3);
}

.font-info-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.font-name-label {
    font-size: 15px;
    font-weight: 600;
}

.font-category-tag {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
}

.font-sample-preview {
    font-size: 14px;
    color: #D1D5DB;
}

.shape-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 6px 0 16px;
}

.shape-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 84px;
    background-color: #25262F;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    cursor: pointer;
    gap: 8px;
    transition: all 0.15s ease;
    color: var(--text-muted);
}

.shape-card:hover {
    background-color: #323440;
    border-color: var(--accent);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.shape-card:active {
    transform: scale(0.96);
}

.shape-preview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shape-card-label {
    font-size: 12px;
    font-weight: 600;
}

.drawer-help-text {
    margin: -2px 0 8px;
    color: var(--text-faint);
    font-size: 11px;
    line-height: 1.4;
}

.frame-preview {
    width: 46px;
    height: 46px;
    border: 3px solid var(--accent);
    background: repeating-linear-gradient(45deg, rgba(139, 61, 255, 0.2) 0 6px, rgba(255, 255, 255, 0.08) 6px 12px);
}

.rounded-frame { border-radius: 10px; }
.circle-frame { border-radius: 50%; }
.triangle-frame { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.diamond-frame { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.hexagon-frame { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.star-frame { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 100%, 50% 74%, 21% 100%, 32% 57%, 2% 35%, 39% 35%); }


/* --- Phase 3: Zoom, Opacity, Resize, and HSL Styles --- */

/* Canvas Zoom Controls Widget */
.canvas-zoom-widget {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    background: rgba(30, 31, 38, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-pill);
    padding: 3px 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 45;
    gap: 4px;
}

.canvas-zoom-widget.zoom-visible {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 768px), (pointer: coarse) {
    #viewport .canvas-zoom-widget {
        display: none;
    }
}

body.telegram-mini-app #viewport .canvas-zoom-widget {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    #viewport:hover .canvas-zoom-widget,
    #viewport:focus-within .canvas-zoom-widget {
        opacity: 1;
        pointer-events: auto;
    }
}

.zoom-btn {
    background: transparent;
    border: none;
    color: #FFFFFF;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s ease;
}

.zoom-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--accent);
}

.zoom-btn.zoom-label {
    width: auto;
    padding: 0 8px;
    font-size: 12px;
}

/* Inline prompt modal (replaces blocking prompt()/confirm()) */
.marker-modal-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 6, 9, 0.72);
    z-index: 1300;
}

.marker-modal-card {
    width: min(360px, 100%);
    padding: 18px;
    border-radius: var(--radius-lg);
    background: #1b1d25;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.marker-modal-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.marker-modal-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #101117;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
}

.marker-modal-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}

.marker-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.marker-modal-btn {
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: #e6e7eb;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.marker-modal-confirm {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
}

/* Sliders */
.marker-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #323440;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Preset Chips */
.small-preset-chip {
    flex: 1;
    background: #25262F;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-muted);
    padding: 6px 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.small-preset-chip:hover {
    background: #323440;
    color: #FFFFFF;
    border-color: var(--accent);
}

/* Resize Cards Grid */
.resize-presets-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 4px 0;
}

.resize-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background: #25262F;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    gap: 3px;
    transition: all 0.15s ease;
}

.resize-card:hover {
    background: #323440;
    border-color: var(--accent);
    transform: translateY(-2px);
}

.resize-name {
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
}

.resize-dim {
    font-size: 11px;
    color: var(--text-muted);
}


/* --- Marker-identical Text Toolbar Styling --- */
.marker-font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    background: #25262F;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    max-width: 140px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.marker-font-btn:hover {
    background: #323440;
    border-color: rgba(255, 255, 255, 0.25);
}

.marker-font-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marker-font-size-group {
    display: inline-flex;
    align-items: center;
    height: 32px;
    background: #25262F;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.marker-size-btn {
    background: transparent;
    border: none;
    color: #FFFFFF;
    width: 26px;
    height: 32px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.marker-size-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.marker-size-input {
    width: 40px;
    height: 32px;
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    cursor: text;
}

.marker-size-input::-webkit-outer-spin-button,
.marker-size-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.marker-size-menu-btn {
    width: 20px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    color: #aeb2bd;
    cursor: pointer;
}

.marker-size-menu-btn:hover,
.marker-size-menu-btn:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Familiarity redesign Phase A: Lucide chevrons inherit the old 10px sizing. */
.marker-font-btn svg,
.marker-size-menu-btn svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

#fontSizePopover {
    width: 104px;
    padding: 12px;
}

.font-size-popover-title {
    margin: 0 2px 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.font-size-preset-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 220px;
    overflow-y: auto;
}

.font-size-preset {
    height: 34px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #e8e9ed;
    font-size: 12px;
    cursor: pointer;
}

.font-size-preset:hover { background: rgba(255, 255, 255, 0.1); }

.font-size-preset.active {
    background: #6f42d9;
    border-color: #a98aff;
    color: #fff;
    font-weight: 700;
}



.marker-tool-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
    padding: 0 7px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.marker-tool-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.marker-tool-btn.active {
    background: #593FA0 !important;
    color: #FFFFFF !important;
}

.marker-tool-btn.text-label-btn {
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
}

.marker-tool-btn.text-color-btn {
    gap: 1px;
}

.marker-a-text {
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.marker-color-strip {
    width: 16px;
    height: 3px;
    border-radius: 1.5px;
}

.marker-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Effects drawer styling */
.effects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 6px 0;
}

.effect-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
    background: #25262F;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    gap: 6px;
    transition: all 0.15s ease;
    color: #FFFFFF;
}

.effect-card:hover {
    background: #323440;
    border-color: var(--accent);
}

.effect-card.active {
    border-color: var(--accent);
    background: rgba(139, 61, 255, 0.2);
}

.effect-preview {
    font-size: 22px;
    font-weight: 800;
}

.effect-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}






/* css/popovers.css */
/* --- Marker Floating Popover Styling (compact: opacity/spacing ~252px) --- */
.marker-floating-popover {
    position: fixed;
    z-index: var(--z-popover);
    width: min(252px, calc(100vw - 24px));
    background: #1E1F26;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    padding: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    font-family: 'Inter', -apple-system, sans-serif;
    animation: popoverFadeIn 0.15s ease;
}

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

.marker-pop-row {
    display: flex;
    flex-direction: column;
}

.marker-pop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.marker-pop-title {
    font-size: 13px;
    font-weight: 600;
    color: #E2E4E9;
}

.marker-pop-num {
    width: 58px;
    height: 28px;
    background: #2B2C35;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}

.marker-pop-num::-webkit-outer-spin-button,
.marker-pop-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.marker-pop-num:focus {
    border-color: var(--accent);
}

.marker-pop-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.marker-pop-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.1s, background 0.1s;
}

.marker-pop-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: var(--accent);
}

.marker-pop-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 14px 0;
}

/* Phase 1: native Popover + Floating UI (strategy:fixed, top-layer).
   Legacy path uses [hidden]; never use inline display:none on migrated popovers. */
.marker-floating-popover[hidden] {
    display: none !important;
}
.marker-floating-popover[popover] {
    margin: 0;
    inset: auto;
    position: fixed;
}

.marker-anchor-group {
    display: flex;
    gap: 8px;
}

.marker-anchor-btn {
    flex: 1;
    height: 36px;
    background: #2B2C35;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.marker-anchor-btn:hover {
    background: #363842;
    color: #FFFFFF;
}

.marker-anchor-btn.active {
    background: #4A3E78 !important;
    border-color: var(--accent) !important;
    color: #FFFFFF !important;
}
/* Canva import and native gradient controls. */
.gradient-controls { margin-bottom: var(--space-4); }
.gradient-controls label { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); }
.gradient-controls input, .gradient-controls select { width:50%; margin-left:auto; box-sizing:border-box; background:var(--bg-surface-elevated); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-1); font-family:var(--font-family); }
.gradient-buttons { display:flex; gap:var(--space-2); }
.gradient-buttons button { background:var(--bg-surface-elevated); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-2); }
.canva-import-card { width:min(360px, calc(100vw - 72px)); max-height:calc(100dvh - 32px); overflow:auto; padding:var(--space-4); border-radius:var(--radius-lg); background:var(--bg-surface); color:var(--text-primary); }
.canva-import-card form { display:grid; gap:var(--space-2); }
.canva-import-card input { width:100%; box-sizing:border-box; padding:var(--space-3); background:var(--bg-surface-elevated); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font-family); }
.canva-import-card [role="status"] { line-height:1.5; color:var(--text-secondary); }
.canva-import-card > button { margin-top:var(--space-2); }

/* css/workspace.css */
/* Editing clarity and responsive workspace */
#markerWorkspace { min-height: 0; }
#viewport { min-width: 0; background-image: none; background-color: #202228; }
#topBar { flex-shrink: 0; }
#contextBar { flex-shrink: 0; }
/* Multi-page Marker column: [header][canvas] glued pairs in one scroll. */
.pages-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    gap: 24px;
    transition: none;
}
.pages-column .canvas-scaler { align-self: center; }
.page-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-shrink: 0;
}
.page-block .page-header {
    min-height: 42px;
    background: transparent;
    border-bottom: none;
    padding-left: 0;
    padding-right: 0;
}
.page-block .page-frame {
    position: relative;
    /* width/height set by applyZoom to match scaled canvas */
}
.page-block .page-preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    border-radius: 0;
    outline: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.45);
    background: var(--bg-canvas);
    cursor: pointer;
}
.page-block.active .page-frame { outline: none; }
.page-block:not(.active):hover .page-preview,
.page-block:not(.active):focus-within .page-preview { outline-color: rgba(139, 61, 255, 0.65); }
.page-header {
    display: flex; align-items: center; gap: 6px;
    background: transparent;
    border-bottom: none;
    padding: 6px 0;
    min-width: 0;
}
.page-header.hidden-page { opacity: 0.55; }
.page-header.active-page .page-title { color: #fff; }
.page-title {
    flex: 1; min-width: 0;
    text-align: left; font-size: 13px; font-weight: 600; color: #c0c3cd;
    background: transparent; border: none; border-radius: var(--radius-sm);
    padding: 6px 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-title:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.page-icons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.page-icon-btn {
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; color: #c0c3cd; background: transparent; border: none;
}
.page-icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); color: #fff; }
.page-icon-btn:disabled { opacity: 0.3; }
.page-icon-btn.locked-full { color: var(--brand-yellow); }
.page-icon-btn.hidden-on { color: var(--accent); }
button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px;
}
button:disabled { cursor: default; }
input, textarea { user-select: text; -webkit-user-select: text; }
.selection-hint {
    position: absolute; left: 16px; right: 16px; bottom: 14px;
    color: #c0c3cd; font-size: 12px; text-align: center;
    pointer-events: none; z-index: 4;
}
#viewport .canvas-zoom-widget { bottom: 42px; }
/* Desktop canvas insets: the top band is the context bar's row (it floats
 * over the viewport), the bottom band the selection hint, so neither ever sits
 * on the poster or its page controls. Fit-to-screen reads these insets. */
@media (min-width: 769px) {
    .viewport-scroll { padding: 72px 40px 44px; }
}
@media (max-width: 768px) {
    .viewport-scroll { padding: 16px; }
    .selection-hint { display: none; }
    #sidePanelContainer { max-height: 48dvh; padding-bottom: env(safe-area-inset-bottom); }
    #sidePanelContainer .bottom-drawer { max-height: 48dvh; }
    #contextBar button, .drawer-close, .float-btn { min-height: 44px; }
    #viewport .canvas-zoom-widget { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Marker-style editor chrome: global actions first, contextual actions second. */
#topBar {
    display: grid;
    /* Equal side tracks keep the title on the page's true centre, so it never
     * shifts when the save status or the right-hand buttons change width. */
    grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
    height: 56px;
    padding: 0 12px;
    gap: 12px;
    background: linear-gradient(180deg, #18191f 0%, #14151a 100%);
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

.top-bar-left,
.top-bar-right,
.top-bar-center {
    display: flex;
    align-items: center;
    min-width: 0;
}

.top-bar-left { gap: 8px; }
.top-bar-center { justify-content: center; overflow: hidden; }
.top-bar-right { justify-content: flex-end; gap: 7px; }
.top-bar-left { justify-self: start; }
.top-bar-right { justify-self: end; }

#topBar .icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

#topBar .icon-btn:hover { background: rgba(255, 255, 255, 0.09); }

.doc-meta {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 360px;
    gap: 2px;
    overflow: hidden;
}

.doc-meta.is-truncated .doc-title::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, #14151a 80%);
}

.doc-title {
    position: relative;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: -0.01em;
}

.doc-dim { color: var(--text-faint); }

.history-controls {
    height: 38px;
    padding: 1px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.035);
}

.saved-cloud {
    height: 32px;
    padding: 0 9px;
    border: 0;
    background: transparent;
    color: #a9adb7;
}

.saved-cloud.saved,
.saved-cloud.saving,
.saved-cloud.offline,
.saved-cloud.back-online {
    border: 0;
    background: transparent;
}

.marker-header-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-color: transparent;
    background: transparent;
}

.marker-header-btn span { display: none; }

.marker-done-btn {
    min-width: 64px;
    height: 36px;
    padding: 0 16px;
    border-radius: 9px;
    box-shadow: none;
}

/* "..." overflow menu: mobile-only entry point. Desktop keeps every action
 * visible and never renders this button. */
#topBar .more-menu-btn { display: none; }

.more-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.more-title-wrap .crop-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.more-rename-btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #a9adb7;
    cursor: pointer;
}

.more-rename-btn:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }

.more-meta {
    padding: 0 16px 10px;
    color: var(--text-faint);
    font-size: 12px;
    font-weight: 600;
}

.more-version {
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    opacity: 0.75;
}

.more-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #e6e7eb;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    justify-content: flex-start;
    cursor: pointer;
}

.more-row:hover { background: rgba(255, 255, 255, 0.07); }

.more-row svg { flex: 0 0 auto; color: #a9adb7; }

.more-chevron { margin-left: auto; color: var(--text-secondary); font-size: 19px; }

.more-save-row { cursor: default; }

.more-save-row:hover { background: transparent; }

.more-save-state { margin-left: auto; color: var(--text-faint); font-size: 12px; font-weight: 600; }

#markerWorkspace { height: auto; }

.marker-tool-rail {
    width: 82px;
    flex: 0 0 82px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 6px;
    overflow-y: auto;
    background: #15161a;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    scrollbar-width: none;
    z-index: 32;
}

.marker-tool-rail::-webkit-scrollbar { display: none; }

.rail-tool-btn {
    min-height: 64px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #d5d7dd;
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

.rail-tool-btn:hover,
.rail-tool-btn:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    outline: none;
}

.rail-tool-btn:active { background: rgba(139, 61, 255, 0.24); }

.rail-tool-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#contextBar {
    position: absolute;
    top: 66px;
    left: 50%;
    justify-content: safe center;
    width: max-content;
    max-width: calc(100% - 32px);
    height: 52px;
    min-height: 52px;
    gap: 4px;
    padding: 0 10px;
    margin: 0;
    background: #18191d;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
    scroll-padding-inline: 10px;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear;
    z-index: 60;
}

#contextBar:empty {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
}

#bottomBar {
    position: relative;
}

#contextBar::before,
#contextBar::after,
#bottomBar::before,
#bottomBar::after {
    content: "";
    position: sticky;
    align-self: stretch;
    flex: 0 0 auto;
    width: 30px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 3;
}

#contextBar::before,
#bottomBar::before {
    left: 0;
    margin-right: -30px;
    background: linear-gradient(to right, #18191d 25%, transparent);
}

#contextBar::after,
#bottomBar::after {
    right: 0;
    margin-left: -30px;
    background: linear-gradient(to left, #18191d 25%, transparent);
}

#contextBar.can-scroll-left::before,
#contextBar.can-scroll-right::after,
#bottomBar.can-scroll-left::before,
#bottomBar.can-scroll-right::after {
    opacity: 1;
}

.context-mode-label {
    position: sticky;
    left: 0;
    z-index: 2;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    padding: 0 12px 0 6px;
    margin-right: 3px;
    background: #18191d;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.context-chip-btn {
    height: 36px;
    min-width: 36px;
    padding: 0 10px;
    gap: 7px;
    border-color: transparent;
    background: transparent;
    color: #e6e7eb;
    font-size: 12px;
    border-radius: 8px;
}

.context-chip-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: transparent;
}

.context-chip-btn > svg,
.marker-font-btn > svg,
.marker-size-menu-btn > svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* One primary per bar (Apply, Group): the solid accent, like Done. */
.context-chip-btn.context-primary-action {
    background: var(--accent);
    color: #fff;
}

.context-chip-btn.context-primary-action:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
.context-chip-btn.context-secondary-action { color: #b9bdc7; }

.marker-font-btn,
.marker-font-size-group {
    height: 36px;
    border-color: rgba(255, 255, 255, 0.1);
    background: #24252b;
    border-radius: 8px;
}

.marker-font-btn { max-width: 132px; }
.marker-size-btn, .marker-size-input, .marker-size-menu-btn { height: 34px; }

.marker-tool-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 15px;
}

.marker-tool-btn em { font-family: inherit; font-style: italic; font-weight: 700; }

.toolbar-underline { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.toolbar-strikethrough { text-decoration: line-through; font-weight: 700; }
.toolbar-uppercase, .toolbar-list { font-size: 13px; font-weight: 700; }

.floating-selection-bar {
    gap: 2px;
    padding: 4px 6px;
    border-radius: var(--radius-md);
    background: #25262c;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48);
    will-change: left, top;
}

.floating-selection-bar.is-above { transform: translate(-50%, 0); }
.floating-selection-bar.is-below { transform: translate(-50%, 0); }

.float-btn { border-radius: 8px; }

@media (max-width: 640px) {
    #topBar {
        grid-template-columns: minmax(0, 1fr) auto auto;
        height: 50px;
        gap: 5px;
        padding: 0 6px;
    }

    #topBar .icon-btn,
    .marker-header-btn,
    .marker-done-btn { height: 34px; }

    #topBar .icon-btn,
    .marker-header-btn { width: 34px; }

    .top-bar-left { gap: 2px; }
    .doc-meta { max-width: 110px; }
    .doc-title { font-size: 12px; }
    .doc-dim { display: none; }
    .history-controls { height: 36px; }
    .top-bar-right { gap: 2px; }
    /* Sandbox import sits beside "...": keep every top-bar action on screen
     * on narrow phones. Never squash the buttons into ovals instead. */
    #topBar .icon-btn,
    .marker-header-btn { width: 32px; height: 32px; flex: none; }
    .file-menu-btn { padding: 7px 8px; flex: none; }
    .history-controls, .saved-cloud { flex: none; }
    #topBar { gap: 4px; padding: 0 4px; }
    .saved-cloud { width: 28px; min-width: 28px; padding: 0; justify-content: center; }
    .saved-cloud span { display: none; }
    .marker-done-btn { min-width: 54px; padding: 0 11px; }

    #contextBar {
        height: 50px;
        min-height: 50px;
        padding: 0 6px;
        max-width: calc(100% - 12px);
        border-radius: 13px;
    }

    .context-mode-label { display: none; }
    .context-chip-btn { min-height: 36px !important; }
    .context-chip-btn > span { font-size: 11px; }
    .marker-font-btn { max-width: 96px; padding: 0 8px; }
    .marker-font-size-group { flex-shrink: 0; }
    .marker-tool-rail { width: 66px; flex-basis: 66px; padding-inline: 4px; }
    .rail-tool-btn { min-height: 58px; font-size: 9px; }
    .rail-tool-btn svg { width: 20px; height: 20px; }
}

@media (max-width: 390px) {
    .doc-meta { max-width: 72px; }
    .saved-cloud { display: none; }
    .marker-font-btn { max-width: 82px; }
}

/* Mobile tool rail: Marker-style horizontal snap-scroll strip under the top
 * bar. Same 7 buttons in the same DOM order — pure layout, no new controls.
 * Desktop keeps the vertical left rail above. Placed last so it wins over
 * the narrower 640px sizing rules on small phones. */
@media (max-width: 768px) {
    /* "..." overflow entry point exists on mobile only. */
    #topBar .more-menu-btn { display: inline-flex; }

    /* Draft rename lives in the "..." sheet; drop the cramped top-bar
     * title on small screens so action buttons keep full size. */
    .top-bar-center { display: none; }
    #topBar { grid-template-columns: minmax(0, 1fr) auto; }

    /* Save pill is ambient: hidden while connected, warning only. Desktop
     * keeps the always-on status text. Screen-reader live region intact. */
    .saved-cloud { display: none; }
    .saved-cloud.offline { display: inline-flex; align-items: center; }

    .marker-tool-rail {
        position: relative;
        flex-direction: row;
        align-items: stretch;
        width: auto;
        flex: 0 0 auto;
        max-width: 100%;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        scroll-snap-type: x proximity;
        /* Snap rest must land on scrollLeft 0 (matches the 8px inline
         * padding) or the at-start check never clears and the left fade
         * sticks on permanently. */
        scroll-padding-inline: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    /* Edge fades float above the strip: as sticky flex items they joined
     * the scroll flow (plus gap), offset snap rest to 14px and pinned the
     * left fade on. Absolute overlays never disturb scroll or snap. */
    .marker-tool-rail::before,
    .marker-tool-rail::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 26px;
        margin: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 3;
    }
    .marker-tool-rail::before {
        left: 0;
        background: linear-gradient(to right, #15161a 25%, transparent);
    }
    .marker-tool-rail::after {
        right: 0;
        background: linear-gradient(to left, #15161a 25%, transparent);
    }
    .marker-tool-rail.can-scroll-left::before,
    .marker-tool-rail.can-scroll-right::after {
        opacity: 1;
    }
    .rail-tool-btn {
        flex: 0 0 auto;
        min-width: 64px;
        min-height: 52px;
        padding: 6px 8px;
        font-size: 9px;
        scroll-snap-align: start;
    }
    .rail-tool-btn svg { width: 20px; height: 20px; }
}

/* Templates drawer: two columns of real poster thumbnails. */
#templateList.template-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    padding: 16px;
    align-content: start;
}
#templateList .template-card {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
#templateList .template-card-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: auto;
    flex: none;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 10px;
    background: #18191d;
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #8b8f9a;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
#templateList .template-card-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#templateList .template-card:hover .template-card-preview,
#templateList .template-card:focus-visible .template-card-preview {
    border-color: var(--accent);
    transform: translateY(-1px);
}
#templateList .template-card:focus-visible { outline: none; }
#templateList .template-card-info { display: grid; gap: 2px; padding: 0 2px; min-width: 0; }
#templateList .template-card-title {
    font-size: 13px; font-weight: 600; color: #e6e7eb;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#templateList .template-card-meta { font-size: 11.5px; color: var(--text-faint); }

/* Elements drawer tiles: a label never spills past its tile. */
.shape-card { min-width: 0; }
.shape-card-label { max-width: 100%; padding: 0 6px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Layers list: compact rows, name truncates before the controls. */
.layer-item .layer-name { font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-item .layer-info { min-width: 0; }

/* Frames: each tile previews the shape filled with the empty-photo artwork. */
.frame-card .frame-preview {
    width: 52px;
    height: 52px;
    border: 0;
    background: url("/static/img/photo-placeholder.svg?v=2") center bottom / cover no-repeat, #3a3a6a;
}
.frame-card .rounded-frame { border-radius: 12px; }
.frame-card .pentagon-frame { clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.frame-card .octagon-frame { clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }

/* Elements panel: search, Recently used row, Browse categories, category pages. */
.el-header { gap: 6px; }
.el-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin-left: -6px; padding: 0;
    border: 0; border-radius: 8px; background: transparent; color: #e6e7eb; cursor: pointer;
}
.el-back:hover { background: rgba(255, 255, 255, 0.08); }
.el-back[hidden] { display: none; }
.el-header .crop-title { margin-right: auto; }
.elements-panel { display: flex; flex-direction: column; gap: 22px; padding: 16px; }
.el-search {
    display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: #202127; color: #8d919c;
    cursor: text; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.el-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.el-search-input {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
    color: #f1f2f5; font: inherit; font-size: 14px;
}
.el-search-input::placeholder { color: #8d919c; }
.el-search-input::-webkit-search-cancel-button { filter: invert(0.7); }
.el-results { display: flex; flex-direction: column; gap: 22px; }
.el-section { display: flex; flex-direction: column; gap: 12px; }
.el-section-head { display: flex; align-items: baseline; justify-content: space-between; }
.el-section-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: #f1f2f5; letter-spacing: -0.01em; }
.el-see-all { border: 0; background: none; padding: 2px 4px; color: #c9ccd4; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 6px; }
.el-see-all:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.el-help { margin: -8px 0 0; }

/* Recently used: one scrolling row of bare thumbnails. */
.el-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; scroll-snap-type: x proximity; }
.el-row::-webkit-scrollbar { display: none; }
.el-row .el-item { flex: 0 0 78px; scroll-snap-align: start; }

/* Category tiles: a tilted back card behind a gradient front card. */
.el-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
.el-cat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0; border: 0; background: none; color: #e6e7eb; font: inherit; cursor: pointer; }
.el-cat-label { font-size: 13px; font-weight: 600; }
.el-cat-art { position: relative; width: 72px; height: 72px; display: grid; place-items: center; transition: transform 0.18s ease; }
.el-cat-art::before, .el-cat-art::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.el-cat-art::before { transform: rotate(9deg) translate(5px, -3px); opacity: 0.55; }
.el-cat-art::after { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px rgba(0, 0, 0, 0.35); }
.el-cat-art > * { position: relative; z-index: 1; }
.el-cat-art svg { width: 44px; height: 44px; }
.el-cat:hover .el-cat-art, .el-cat:focus-visible .el-cat-art { transform: translateY(-2px) rotate(-2deg); }
.el-cat:focus-visible { outline: none; }
.el-cat:focus-visible .el-cat-label { text-decoration: underline; text-underline-offset: 3px; }
.el-cat-art--shapes::before { background: #c9a6ff; }
.el-cat-art--shapes::after { background: linear-gradient(145deg, #a46bff, #6a2ee8); }
.el-cat-art--frames::before { background: #f3b38a; }
.el-cat-art--frames::after { background: linear-gradient(145deg, #3a3f9e, #20235f); }
.el-cat-art--overlays::before { background: #9aa3b5; }
.el-cat-art--overlays::after { background: linear-gradient(160deg, #4a5163, #15171d); }
.el-cat-art::after { z-index: 0; }
.el-cat-photo {
    width: 44px; height: 44px; border-radius: 11px; border: 2px solid rgba(255, 255, 255, 0.9);
    background: url("/static/img/photo-placeholder.svg?v=2") center bottom / cover no-repeat, #3a3a6a;
}

/* Element tiles (category pages, search, Recently used). */
.el-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.el-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-width: 0; height: 96px; padding: 10px 6px; border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px; background: #24252c; color: #c9ccd4; font: inherit; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.el-item:hover, .el-item:focus-visible { border-color: var(--accent); background: #2a2b33; outline: none; transform: translateY(-1px); }
.el-item--compact { height: 78px; padding: 8px; }
.el-item-art { display: grid; place-items: center; height: 46px; }
.el-item-art svg { max-width: 52px; max-height: 44px; }
.el-item-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.el-item.frame-card .frame-preview { width: 46px; height: 46px; }
.el-empty { margin: 8px 2px; color: #9a9ea8; font-size: 13.5px; line-height: 1.5; }
/* The drawer is a fixed-height flex column: sections keep their size and the panel scrolls. */
.elements-panel > *, .el-results > *, .el-section > * { flex-shrink: 0; }
.el-cat-art { flex: none; }
/* Category tiles: an explicit two-row grid (art, label); the flex column collapsed the art row. */
.el-cat { display: grid; grid-template-rows: 76px auto; justify-items: center; align-items: center; height: auto; }
.el-categories { padding-top: 6px; }
.el-search .el-search-input, .el-search .el-search-input:focus { border: 0; outline: 0; box-shadow: none; background: transparent; padding: 0; }

/* Text chip controls ------------------------------------------------------ */
.marker-floating-popover [hidden] { display: none !important; }
.chip-text-color-btn { min-width: 36px; justify-content: center; }
.chip-color-a {
    position: relative; display: inline-block; font-weight: 800; font-size: 15px; line-height: 1;
    padding-bottom: 4px; color: #fff;
}
.chip-color-a::after {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 4px; border-radius: 2px;
    background: var(--chip-swatch, #000); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.chip-fill-btn { gap: 8px; }
.chip-fill-dot {
    width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.chip-fit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chip-fit-toggle {
    display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: rgba(255, 255, 255, 0.06);
}
.chip-fit-btn {
    border: 0; background: transparent; color: rgba(255, 255, 255, 0.72); font: inherit; font-size: 12px; font-weight: 600;
    padding: 6px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.chip-fit-btn:hover { color: #fff; }
.chip-fit-btn.active { background: var(--accent, #8B3DFF); color: #fff; box-shadow: 0 2px 8px rgba(139, 61, 255, 0.4); }

/* Colour popover (js/ui/color-panel.mjs) ---------------------------------- */
#drawerColor.context-floating-popover {
    width: min(304px, calc(100vw - 24px));
    max-height: min(560px, calc(100vh - 24px));
    flex-direction: column;
}
#drawerColor .color-panel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.cp-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 10px 12px 0; padding: 3px;
    border-radius: 10px; background: rgba(255, 255, 255, 0.06);
}
.cp-tab {
    border: 0; border-radius: 8px; padding: 7px 0; background: transparent; color: rgba(255, 255, 255, 0.7);
    font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.cp-tab:hover { color: #fff; }
.cp-tab.is-active { background: #fff; color: #111; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.cp-body { overflow-y: auto; overflow-x: hidden; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }

.cp-body > * { flex-shrink: 0; }
.cp-current { display: flex; align-items: center; gap: 8px; }
.cp-preview {
    position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    background: var(--cp-c, #fff);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 4px 14px rgba(0, 0, 0, 0.35);
}
.cp-preview::after {   /* rainbow dot: "this opens the full picker" */
    content: ""; position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%;
    background: conic-gradient(#ff1744, #ffe600, #00e5a0, #00b8ff, #7c3aed, #ff2d87, #ff1744);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
}
.cp-preview--sm { width: 34px; height: 34px; }
.cp-preview--sm::after { width: 10px; height: 10px; }
.cp-native { position: absolute; inset: 0; opacity: 0; border-radius: 50%; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.cp-hex {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 12px;
    border-radius: 12px; background: #14151A; border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.45); font-weight: 650; font-size: 14px; transition: border-color .15s ease;
}
.cp-hex:focus-within { border-color: var(--accent, #8B3DFF); box-shadow: 0 0 0 3px rgba(139, 61, 255, 0.25); }
.cp-hex input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit;
    font-variant-numeric: tabular-nums; letter-spacing: 0.06em; text-transform: uppercase; padding: 0;
}
.cp-hex--sm { height: 34px; border-radius: 10px; font-size: 13px; padding: 0 10px; }
.cp-icon-btn {
    flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 0;
    background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: background .15s ease;
}
.cp-icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cp-icon-btn:disabled { opacity: .35; cursor: default; }

.cp-section { display: flex; flex-direction: column; gap: 8px; }
.cp-section-title { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.cp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: start; }
.cp-grid--compact { gap: 6px; }
.cp-swatch {
    /* Height comes from the width (aspect-ratio). Grid items stretch to the row
       by default, and a stretched height beats aspect-ratio — which made the
       circles taller than wide at some widths / display scales. */
    position: relative; aspect-ratio: 1 / 1; width: 100%; height: auto; align-self: start; justify-self: stretch;
    min-width: 0; min-height: 0; max-height: none; padding: 0; border: 0; cursor: pointer; line-height: 0; font-size: 0;
    border-radius: 50%; background: var(--cp-c);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    transition: transform .14s cubic-bezier(.2, .8, .2, 1), box-shadow .14s ease;
}
.cp-swatch:hover { transform: scale(1.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 6px 16px rgba(0, 0, 0, 0.45); }
.cp-swatch:focus-visible { outline: 2px solid var(--accent, #8B3DFF); outline-offset: 3px; border-radius: 50%; }
.cp-swatch.is-selected { box-shadow: 0 0 0 2px #1D1F26, 0 0 0 4px #fff; }
.cp-swatch.is-selected::after {   /* tick in black or white, whichever reads on the colour */
    content: ""; position: absolute; left: 50%; top: 46%; width: 30%; height: 16%;
    border-left: 2.5px solid var(--cp-ink, #000); border-bottom: 2.5px solid var(--cp-ink, #000);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.cp-grad-preview { height: 72px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.cp-bar-wrap { padding: 0 9px; }
.cp-bar {
    position: relative; height: 22px; border-radius: 11px; cursor: copy; touch-action: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    background-color: #fff;
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%);
}
.cp-stop {
    position: absolute; top: 50%; width: 22px; height: 22px; margin: 0; padding: 0; transform: translate(-50%, -50%);
    border-radius: 50%; border: 3px solid #fff; background: var(--cp-c); cursor: grab; touch-action: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.cp-stop.is-active { width: 26px; height: 26px; box-shadow: 0 0 0 2px var(--accent, #8B3DFF), 0 3px 10px rgba(0, 0, 0, 0.6); }
.cp-stop:active { cursor: grabbing; }
.cp-stop-editor { display: flex; align-items: center; gap: 8px; }
.cp-stop-editor .cp-hex { flex: 1 1 auto; }
.cp-opacity { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; min-width: 0; color: rgba(255, 255, 255, 0.75); font-size: 12px; font-variant-numeric: tabular-nums; }
.cp-opacity input { flex: 1; min-width: 0; accent-color: #8B3DFF; }
.cp-opacity-label { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.cp-opacity-value { width: 36px; text-align: right; }
.cp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp-angles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.cp-angle {
    width: 100%; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; cursor: pointer;
    background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.8);
}
.cp-angle:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cp-angle.is-active { background: var(--accent, #8B3DFF); color: #fff; }
.cp-angle-input {
    flex: 0 0 auto; width: auto; margin: 0;
    display: flex; align-items: center; gap: 2px; height: 26px; padding: 0 8px; border-radius: 8px;
    background: #14151A; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.55);
}
.cp-angle-input input { width: 34px; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 12.5px; text-align: right; -moz-appearance: textfield; }
.cp-angle-input input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cp-gradients { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: start; }
.cp-gradient {
    aspect-ratio: 1 / 1; width: 100%; height: auto; align-self: start; min-height: 0; line-height: 0; font-size: 0;
    padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: transform .14s ease;
}
.cp-gradient:hover { transform: scale(1.06); }
.cp-gradient.is-selected { box-shadow: 0 0 0 2px #1D1F26, 0 0 0 4px #fff; }

/* Context bar system ------------------------------------------------------
 * One control language for every selection: 36px controls on an 8px radius,
 * 18px icons, labels at 12.5/600, one hover, one "on" state, slim dividers
 * between groups. Fields (font, size) are the only filled controls.         */
#contextBar { gap: 0; padding: 0 8px; }
#contextBar .context-group { gap: 2px; padding: 0 6px; }
#contextBar .context-group + .context-group,
#contextBar .marker-font-size-group + .context-group {
    border-left: 0; padding-left: 6px; position: relative;
}
#contextBar .context-group + .context-group::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 20px; transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
}
#contextBar .context-chip-btn,
#contextBar .marker-tool-btn {
    height: 36px; min-width: 36px; padding: 0 10px; gap: 7px; flex-direction: row;
    border: 0; border-radius: 8px; background: transparent;
    color: #E6E7EB; font-size: 12.5px; font-weight: 600; letter-spacing: 0;
    transition: background-color .14s ease, color .14s ease;
}
#contextBar .marker-tool-btn { width: 36px; padding: 0; font-size: 14px; }
#contextBar .context-chip-btn > svg { width: 18px; height: 18px; }
#contextBar .context-chip-btn:hover,
#contextBar .marker-tool-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
/* "On" (pressed toggles, the open panel's tool): one tinted accent everywhere. */
#contextBar .context-chip-btn.active,
#contextBar .marker-tool-btn.active,
#contextBar .context-chip-btn[aria-pressed="true"] {
    background: rgba(139, 61, 255, 0.22) !important;
    color: #D9C7FF !important;
    border: 0 !important;
    box-shadow: none !important;
}
#contextBar .context-chip-btn.context-primary-action { background: var(--accent); color: #fff; }
#contextBar .context-chip-btn.context-primary-action:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); }
#contextBar .context-chip-btn.danger:hover { background: rgba(255, 59, 48, 0.16); color: #FF6B61; }

/* Fields: font family and size share one filled, bordered shape. */
#contextBar .marker-font-btn,
#contextBar .marker-font-size-group {
    height: 36px; border-radius: 8px; background: #24252B; border: 1px solid rgba(255, 255, 255, 0.1);
}
#contextBar .marker-font-btn { padding: 0 10px 0 12px; gap: 8px; font-size: 13px; font-weight: 600; }
#contextBar .marker-font-btn:hover { background: #2C2D34; border-color: rgba(255, 255, 255, 0.18); }
#contextBar .marker-font-size-group { overflow: hidden; }
#contextBar .marker-size-btn,
#contextBar .marker-size-menu-btn,
#contextBar .marker-size-input { height: 34px; }
#contextBar .marker-size-btn { width: 30px; font-size: 16px; }
#contextBar .marker-size-input { width: 40px; font-size: 13px; font-weight: 650; }
#contextBar .marker-size-menu-btn { width: 24px; }

/* Text colour "A" and Fill dot sit on the same 18px optical size as icons. */
#contextBar .chip-color-a { font-size: 16px; padding-bottom: 5px; }
#contextBar .chip-color-a::after { height: 3px; left: -1px; right: -1px; }
#contextBar .chip-fill-dot { width: 18px; height: 18px; }

/* Comfort scale (desktop) --------------------------------------------------
 * One step up from the compact chrome so tools read at arm's length on a
 * laptop or a 1080p/1440p monitor: 40px controls, 20px icons, 13.5px labels,
 * text-style glyphs on the same optical size as the icons. Phones keep their
 * own touch layout (rules above, max-width 768px).                          */
@media (min-width: 769px) {
    /* Top bar */
    #topBar { height: 60px; padding: 0 14px; }
    #topBar .icon-btn { width: 40px; height: 40px; border-radius: 10px; }
    #topBar .icon-btn svg { width: 20px; height: 20px; }
    .history-controls { height: 42px; border-radius: 11px; }
    .file-menu-btn { height: 40px; padding: 0 12px; font-size: 14.5px; font-weight: 650; border-radius: 10px; }
    .doc-meta { max-width: 420px; }
    .doc-title { font-size: 15px; font-weight: 700; }
    .doc-dim { font-size: 12px; color: #9EA3AE; }
    .saved-cloud, .saved-cloud span { height: 36px; font-size: 13px; }
    .saved-cloud span { height: auto; }
    .saved-cloud svg { width: 17px; height: 17px; }
    .marker-header-btn { width: 40px; height: 40px; }
    .marker-done-btn { height: 40px; min-width: 76px; padding: 0 20px; font-size: 14.5px; border-radius: 10px; }
    .file-menu-item { font-size: 14.5px; padding: 11px 14px; }

    /* Context bar */
    #contextBar { height: 58px; min-height: 58px; padding: 0 9px; border-radius: 14px; }
    #contextBar .context-group { gap: 3px; padding: 0 7px; }
    #contextBar .context-group + .context-group { padding-left: 7px; }
    #contextBar .context-group + .context-group::before { height: 22px; }
    #contextBar .context-chip-btn,
    #contextBar .marker-tool-btn { height: 40px; min-width: 40px; border-radius: 10px; font-size: 13.5px; }
    #contextBar .context-chip-btn { padding: 0 12px; gap: 8px; }
    #contextBar .marker-tool-btn { width: 40px; padding: 0; }
    #contextBar .context-chip-btn > svg { width: 20px; height: 20px; }
    /* B I U S aA: one glyph size, matched to the 20px icons. */
    #contextBar .marker-tool-btn strong,
    #contextBar .marker-tool-btn em,
    #contextBar .toolbar-underline,
    #contextBar .toolbar-strikethrough { font-size: 16px; line-height: 1; font-weight: 700; }
    #contextBar .toolbar-uppercase { font-size: 14.5px; line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
    #contextBar .marker-font-btn,
    #contextBar .marker-font-size-group { height: 40px; border-radius: 10px; }
    #contextBar .marker-font-btn { font-size: 14px; padding: 0 12px 0 14px; max-width: 160px; }
    #contextBar .marker-size-btn,
    #contextBar .marker-size-menu-btn,
    #contextBar .marker-size-input { height: 38px; }
    #contextBar .marker-size-btn { width: 34px; font-size: 18px; }
    #contextBar .marker-size-input { width: 46px; font-size: 14.5px; }
    #contextBar .marker-size-menu-btn { width: 26px; }
    #contextBar .chip-color-a { font-size: 18px; }
    #contextBar .chip-fill-dot { width: 20px; height: 20px; }
    .viewport-scroll { padding-top: 80px; }   /* room for the taller bar */

    /* Floating object bar next to the selection */
    .floating-selection-bar { padding: 5px 7px; gap: 3px; border-radius: 14px; }
    .float-btn { width: 38px; height: 38px; border-radius: 10px; }
    .float-btn svg { width: 19px; height: 19px; }

    /* Left rail */
    .rail-tool-btn { min-height: 68px; font-size: 11.5px; gap: 7px; border-radius: 10px; }
    .rail-tool-btn svg { width: 24px; height: 24px; }

    /* Page header above each page */
    .page-title { font-size: 14px; }
    .page-icon-btn { width: 34px; height: 34px; }
    .page-icon-btn svg { width: 18px; height: 18px; }

    /* Popovers, drawers and menus */
    .crop-title { font-size: 17px; }
    .context-floating-popover .crop-title { font-size: 14.5px; }
    .context-floating-popover .drawer-header { padding: 11px 14px; }
    .marker-pop-title { font-size: 14px; }
    .marker-pop-num { height: 32px; width: 62px; font-size: 14px; }
    .prop-label { font-size: 13px; }
    .cp-section-title { font-size: 11.5px; }
    .cp-tab { font-size: 13.5px; padding: 8px 0; }
    .cp-hex { font-size: 15px; }
    .chip-fit-btn { font-size: 13px; padding: 7px 12px; }
    .font-size-preset { height: 38px; font-size: 14px; }
    .font-size-popover-title { font-size: 14px; }
    .canvas-zoom-widget { height: 40px; font-size: 14px; }
    .selection-hint { font-size: 13px; }
}

/* Panel system (image & shape popovers) ------------------------------------
 * Corners, Stroke, Shadow, Flip, Transparency and Position share one look:
 * a single title, uppercase section labels, accent sliders with a number
 * field, preset chips, round colour swatches, segmented choices.            */
wa-slider { --wa-form-control-activated-color: #8B3DFF; }
.pn-range, .marker-slider[type="range"], input[type="range"].marker-pop-slider, #drawerOpacity input[type="range"] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer;
}
.pn-range::-webkit-slider-runnable-track, .marker-slider[type="range"]::-webkit-slider-runnable-track, input[type="range"].marker-pop-slider::-webkit-slider-runnable-track {
    height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14);
}
.pn-range::-webkit-slider-thumb, .marker-slider[type="range"]::-webkit-slider-thumb, input[type="range"].marker-pop-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
    background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(139, 61, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.45);
}
.pn-range::-moz-range-track, .marker-slider[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.pn-range::-moz-range-progress, .marker-slider[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: #8B3DFF; }
.pn-range::-moz-range-thumb, .marker-slider[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #8B3DFF; }

.context-floating-popover .drawer-header { min-height: 46px; }
.pn-body { display: flex; flex-direction: column; gap: 12px !important; padding: 12px 14px 14px !important; }
.pn-body .prop-group { display: flex; flex-direction: column; gap: 10px !important; }
.pn-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.pn-row { display: flex; align-items: center; gap: 12px; }
.pn-row > wa-slider, .pn-row > .pn-range { flex: 1 1 auto; min-width: 0; }
.pn-num {
    flex: 0 0 auto; display: flex; align-items: center; gap: 3px; height: 34px; padding: 0 8px 0 4px; border-radius: 9px;
    background: #14151A; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.5); font-size: 12px;
}
.pn-num:focus-within { border-color: #8B3DFF; box-shadow: 0 0 0 3px rgba(139, 61, 255, 0.25); }
.pn-num input { width: 40px; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 650; text-align: right; -moz-appearance: textfield; }
.pn-num input::-webkit-inner-spin-button, .pn-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pn-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pn-chip {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 56px; padding: 6px 2px;
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: rgba(255, 255, 255, 0.04);
    color: #E6E7EB; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .14s ease, border-color .14s ease;
}
.pn-chip:hover { background: rgba(255, 255, 255, 0.09); }
.pn-chip.active { background: rgba(139, 61, 255, 0.2); border-color: #8B3DFF; color: #fff; }
.pn-corner-ico, .pn-line, .pn-shadow-art { display: block; flex: 0 0 auto; }
.pn-corner-ico { width: 20px; height: 20px; border: 2px solid currentColor; border-radius: var(--r); opacity: .9; }
.pn-line { width: 22px; height: var(--w); border-radius: 2px; background: currentColor; margin: 9px 0; }
.pn-chip[data-stroke-preset="0"]::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; background: linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%); opacity: .7; }
.pn-swatches { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; align-items: start; }
.pn-swatch {
    position: relative; aspect-ratio: 1 / 1; width: 100%; height: auto; align-self: start; min-height: 0; padding: 0; border: 0; cursor: pointer;
    border-radius: 50%; background: var(--pn-c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); transition: transform .12s ease;
}
.pn-swatch:hover { transform: scale(1.08); }
.pn-swatch.active { box-shadow: 0 0 0 2px #1D1F26, 0 0 0 4px #fff; }
.pn-swatch--custom { background: conic-gradient(#ff1744, #ffe600, #00e5a0, #00b8ff, #7c3aed, #ff2d87, #ff1744); overflow: hidden; }
.pn-swatch--custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.pn-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.pn-segmented button {
    height: 32px; border: 0; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.72);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.pn-segmented button:hover { color: #fff; }
.pn-segmented button.active { background: #fff; color: #111; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.pn-field { display: flex; flex-direction: column; gap: 6px; }
.pn-field-head { display: flex; align-items: center; justify-content: space-between; }
.pn-value { font-size: 12.5px; font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; }

/* Shadow presets: a little card under each kind of light. */
.pn-shadow-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pn-shadow {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 9px; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); color: #E6E7EB;
    font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.pn-shadow:hover { background: rgba(255, 255, 255, 0.09); }
.pn-shadow.active { background: rgba(139, 61, 255, 0.2); border-color: #8B3DFF; color: #fff; }
.pn-shadow-art { width: 34px; height: 26px; border-radius: 5px; background: linear-gradient(135deg, #cfd3dc, #9aa0ad); }
.pn-shadow-art[data-art="soft"] { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55); }
.pn-shadow-art[data-art="lift"] { box-shadow: 0 6px 10px rgba(0, 0, 0, 0.75); }
.pn-shadow-art[data-art="float"] { box-shadow: 0 10px 16px rgba(0, 0, 0, 0.7); transform: translateY(-3px); }
.pn-shadow-art[data-art="hard"] { box-shadow: 0 5px 0 rgba(0, 0, 0, 0.9); }
.pn-shadow-art[data-art="glow"] { box-shadow: 0 0 12px 3px rgba(139, 61, 255, 0.9); }
#drawerShadow.context-floating-popover { width: min(300px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 24px)); }
#drawerShapeStyle.context-floating-popover { width: min(300px, calc(100vw - 24px)) !important; }

/* Flip: two side-by-side tiles. */
#drawerFlip.context-floating-popover { width: min(260px, calc(100vw - 24px)); }
#drawerFlip .flip-options-body { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px !important; }
#drawerFlip .flip-option-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 76px; padding: 10px 6px;
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.04);
    color: #E6E7EB; font: inherit; font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer;
}
#drawerFlip .flip-option-btn:hover { background: rgba(139, 61, 255, 0.18); border-color: rgba(139, 61, 255, 0.6); color: #fff; }
#drawerFlip .flip-option-btn svg { width: 24px; height: 24px; color: #C9A8FF; }

/* Transparency popover */
#markerOpacityPopover .preset-chips-row { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px !important; }
#markerOpacityPopover .small-preset-chip { height: 32px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }

/* Position: icon tiles that actually show their icons, accent on hover. */
.align-btn svg, .arrange-btn svg { display: block !important; width: 20px !important; height: 20px !important; color: #C9A8FF !important; stroke: currentColor; fill: none; }
.align-btn, .arrange-btn { min-height: 62px; justify-content: center; }
.align-btn span, .arrange-btn span { font-size: 12px !important; }
.arrange-btn:disabled { opacity: .38; cursor: default; }
.layer-item.selected { border-color: #8B3DFF !important; background-color: rgba(139, 61, 255, 0.16) !important; }
#drawerShadow .pn-shadow { height: auto !important; min-height: 76px; justify-content: center; }
#drawerShadow .pn-shadow-presets { grid-auto-rows: auto; }

/* Context bar, compact: labelled tools become icon buttons when the bar would overflow. */
#contextBar.is-compact .context-chip-btn:not(.context-primary-action):not(.context-secondary-action):not(.marker-font-btn) > span:not(.chip-color-a):not(.chip-fill-dot) { display: none; }
#contextBar.is-compact .context-chip-btn:not(.context-primary-action):not(.context-secondary-action):not(.marker-font-btn) { min-width: 40px; padding: 0 10px; justify-content: center; }

/* Text effects popover: 4×2 look tiles (light thumbnails, so dark shadows read), then the dials. */
#drawerEffects.context-floating-popover { width: min(320px, calc(100vw - 24px)); max-height: min(600px, calc(100vh - 24px)); }
.pn-effects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pn-effect {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px 8px; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); color: #C9CBD3;
    font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; height: auto !important; min-height: 0;
}
.pn-effect:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.pn-effect.active { background: rgba(139, 61, 255, 0.2); border-color: #8B3DFF; color: #fff; }
.pn-effect-art {
    display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px;
    background: linear-gradient(160deg, #F4F2FA, #DCD8E8); color: #15161A;
    font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: -0.01em;
}
.pn-effect-art[data-fx="shadow"] { text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.55); }
.pn-effect-art[data-fx="lift"] { text-shadow: 0 2px 7px rgba(0, 0, 0, 0.6); }
.pn-effect-art[data-fx="outline"] { color: #fff; -webkit-text-stroke: 4px #15161A; paint-order: stroke fill; }
.pn-effect-art[data-fx="hollow"] { color: transparent; -webkit-text-stroke: 1.5px #15161A; }
.pn-effect-art[data-fx="neon"] { background: #15161A; color: #FDF0FF; text-shadow: 0 0 4px #FF2D87, 0 0 10px #FF2D87, 0 0 18px #FF2D87; }
.pn-effect-art[data-fx="echo"] { text-shadow: 3px 3px 0 rgba(21, 22, 26, 0.4), 6px 6px 0 rgba(21, 22, 26, 0.18); }
.pn-effect-art[data-fx="background"] { background-image: linear-gradient(#FFE600, #FFE600), linear-gradient(160deg, #F4F2FA, #DCD8E8); background-size: 70% 52%, 100% 100%; background-position: center, center; background-repeat: no-repeat; }
.pn-effect-controls { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pn-effect-controls[hidden], .pn-effect-controls [hidden] { display: none !important; }
.pn-effect-controls .pn-field[data-effect-dial="color"] { gap: 8px; }
.pn-swatch--auto { display: grid; place-items: center; background: #2A2C33; color: #fff; font-size: 13px; font-weight: 800; border: 1px dashed rgba(255, 255, 255, 0.4); }

/* Font size list (Canva-style): tight rows, tabular numbers, tick on the current size. */
#fontSizePopover { width: 144px !important; padding: 6px !important; border-radius: 12px; }
#fontSizePopover .font-size-preset-grid { gap: 1px; max-height: min(340px, calc(100vh - 180px)); }
#fontSizePopover .font-size-preset {
    display: flex; flex: 0 0 34px; align-items: center; justify-content: space-between; height: 34px; padding: 0 12px;
    border: 0; border-radius: 8px; color: #E6E7EB; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: left;
}
#fontSizePopover .font-size-preset:hover { background: rgba(255, 255, 255, 0.08); }
#fontSizePopover .font-size-preset.active { background: rgba(139, 61, 255, 0.2); color: #fff; font-weight: 700; }
#fontSizePopover .font-size-tick { width: 16px; height: 16px; fill: none; stroke: #C9A8FF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Fonts panel: search first, the list, then a quiet upload row at the end. */
#drawerFonts.open { display: flex; flex-direction: column; }
#drawerFonts .drawer-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; overflow: hidden !important; }
#drawerFonts .font-search-box { order: 0; margin: 0 !important; flex: 0 0 auto; }
#drawerFonts .prop-group { order: 1; margin: 0 !important; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#drawerFonts .font-list-container, #sidePanelContainer #drawerFonts .font-list-container { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-x: hidden; overflow-y: auto; }
#drawerFonts .font-list-container > * { flex-shrink: 0; }
#drawerFonts .font-upload-banner { order: 2; flex: 0 0 auto; margin: 4px 0 0 !important; padding: 12px 0 0 !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; background: none !important; }
#drawerFonts .font-upload-btn { height: 40px; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-style: solid !important; background: rgba(255, 255, 255, 0.04) !important; color: #E6E7EB !important; font-weight: 600; }
#drawerFonts .font-upload-btn:hover { background: rgba(139, 61, 255, 0.16) !important; border-color: rgba(139, 61, 255, 0.6) !important; color: #fff !important; }
#drawerFonts .font-upload-hint { margin-top: 6px; color: rgba(255, 255, 255, 0.45); font-size: 11.5px; }

/* Quick-action bar: styled tooltips (mouse only), clear on/off states. */
.floating-selection-bar { overflow: visible; }
.float-btn { position: relative; }
.float-btn.active { background: rgba(139, 61, 255, 0.22) !important; color: #C9A8FF !important; }
@media (hover: hover) and (pointer: fine) {
    .float-btn[data-tip]::after {
        content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, -2px);
        padding: 6px 9px; border-radius: 7px; background: #0E0F13; border: 1px solid rgba(255, 255, 255, 0.12);
        color: #fff; font: 600 12px/1.2 Inter, system-ui, sans-serif; white-space: nowrap; pointer-events: none;
        opacity: 0; transition: opacity .12s ease .35s, transform .12s ease .35s; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); z-index: 2;
    }
    .floating-selection-bar.is-below .float-btn[data-tip]::after { top: auto; bottom: calc(100% + 10px); transform: translate(-50%, 2px); }
    .float-btn[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
}
@media screen and (max-width: 768px) {
    /* Phone / Mini App: a taller fonts sheet and a one-line upload row, so the list gets the room. */
    #sidePanelContainer:has(#drawerFonts.open), #sidePanelContainer #drawerFonts.open { max-height: 66dvh; }
    #drawerFonts .font-upload-hint { display: none; }
    #drawerFonts .font-upload-banner { padding-top: 10px !important; }
    #drawerFonts .font-upload-btn { height: 38px; }
}

/* Highlight popover + the rich text editor. */
#drawerHighlight.context-floating-popover { width: min(272px, calc(100vw - 24px)); }
.pn-swatch--none { background: #2A2C33 !important; overflow: hidden; }
.pn-swatch--none::after { content: ""; position: absolute; left: 50%; top: 12%; bottom: 12%; width: 2px; background: #FF5A5F; transform: translateX(-50%) rotate(45deg); border-radius: 1px; }
.pn-hint { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); line-height: 1.35; }
.canvas-rich-editor { min-width: 1em; }
.canvas-rich-editor span[data-rs] { white-space: pre-wrap; }
#contextBar .context-chip-btn.has-highlight > svg { color: #FFE600; }

/* Edit mode (typing in a text box): one solid frame like the selection — the
   dashed 1px border was cheap and, being a border, made the box 2px narrower
   than the text on the canvas, so lines re-wrapped while editing. An outline
   takes no room. */
.canvas-inline-editor {
    border: 0 !important;
    border-radius: 2px !important;
    outline: 2px solid var(--accent, #8B3DFF) !important;
    outline-offset: 1px;
    box-shadow: 0 0 0 6px rgba(139, 61, 255, 0.16) !important;
}
.canvas-inline-editor::selection, .canvas-inline-editor *::selection { background: rgba(139, 61, 255, 0.42) !important; color: inherit !important; }

/* Crop mode on a narrow bar: Cancel / Done stay in reach at the right end while the ratio chips scroll. */
#contextBar .context-group:has(> .context-primary-action):last-child {
    position: sticky; right: 0; z-index: 4; background: #18191d; box-shadow: -14px 0 14px -6px #18191d;
}

/* Keyboard shortcuts sheet ("?") */
.shortcuts-sheet { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(6, 7, 10, 0.6); backdrop-filter: blur(3px); padding: 16px; }
.shortcuts-card { width: min(720px, 100%); max-height: min(640px, calc(100dvh - 32px)); display: flex; flex-direction: column; background: #1D1F26; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); color: #E6E7EB; overflow: hidden; }
.shortcuts-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-weight: 700; font-size: 15px; }
.shortcuts-body { overflow-y: auto; padding: 8px 20px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 28px; scrollbar-width: none; }
.shortcuts-body::-webkit-scrollbar { display: none; }
.shortcuts-body h3 { margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.shortcut-row .keys { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; color: rgba(255, 255, 255, 0.45); }
.shortcut-row .keys i { font-style: normal; }
.shortcut-row kbd { font: 600 11.5px/1 Inter, system-ui, sans-serif; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-bottom-width: 2px; border-radius: 6px; padding: 4px 7px; white-space: nowrap; }
.file-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.file-menu-kbd { font: 600 11px/1 Inter, system-ui, sans-serif; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 5px; padding: 3px 6px; }

/* Font library cards (Fonts drawer): family name and sample on one line, then the
   weights the family really has, each button drawn in its own weight. */
#drawerFonts .library-family-card { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 12px; }
#drawerFonts .library-family-card .font-info-col { gap: 6px; min-width: 0; }
#drawerFonts .library-family-card .font-name-label { font-size: 17px; font-weight: 400; line-height: 1.2; }
#drawerFonts .library-family-card .font-sample-preview { font-size: 12px; color: var(--text-muted, #A0A4B0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#drawerFonts .library-family-card .font-variant-pills-row { margin-top: 0; gap: 4px; }
#drawerFonts .library-family-card .font-variant-tag-btn { font-size: 11px; padding: 3px 7px; letter-spacing: 0; }
#drawerFonts .library-family-card .font-variant-tag-btn.active { font-weight: inherit; }
#drawerFonts .library-family-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* css/templates.css */
/* Marker home + templates gallery + publish panel (Phase B).
   Same dark marker theme as the editor; Marker vocabulary throughout. */

/* Editor shell must truly hide on home/gallery views: its own
   #appContainer{display:flex} beats the hidden attribute, leaking the
   whole editor chrome (top bar, empty context-bar pill, zoom widget). */
#appContainer[hidden] {
    display: none !important;
}

/* Editor top bar: Marker order — [back][home][File][undo/redo] left,
   design name centered. */
.top-bar-center {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
    text-align: center;
}

.top-bar-center .doc-meta {
    min-width: 0;
    max-width: min(360px, 100%);
    align-items: center;
}

.top-bar-center .doc-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

@media (max-width: 768px) {
    /* The design name + rename already live in the More sheet — the
       tablet/phone top bar keeps tools only. Desktop keeps the centered name. */
    .top-bar-center {
        display: none;
    }
}

.marker-home,
.marker-templates {
    position: fixed;
    inset: 0;
    z-index: var(--z-context-bar);
    display: flex;
    flex-direction: column;
    background: var(--bg-canvas);
    color: #ececf1;
    overflow-y: auto;
}

.marker-home[hidden],
.marker-templates[hidden] {
    display: none;
}

.home-header,
.templates-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    background: var(--bg-canvas);
    z-index: 2;
}

/* Desktop side rail for browse views (mobile keeps the stacked layout). */
.home-side-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 45;
    width: 76px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px 8px;
    box-sizing: border-box;
    background: #101117;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.home-side-nav[hidden] {
    display: none;
}

@media (max-width: 1023px) {
    .home-side-nav {
        display: none;
    }
}

@media (min-width: 1024px) {
    .home-side-nav:not([hidden]) {
        display: flex;
    }

    body.browsing .marker-home,
    body.browsing .marker-templates {
        padding-left: 76px;
    }
}

.home-rail-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.home-rail-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ececf1;
}

/* Hero: static gradient wash, pure CSS stills only. */
.home-toprow {
    padding: 10px 16px 0;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.home-hero {
    text-align: center;
    padding: 34px 16px 8px;
    background:
        radial-gradient(420px 200px at 18% 0%, rgba(34, 211, 238, 0.22), transparent 70%),
        radial-gradient(520px 240px at 85% 10%, rgba(139, 61, 255, 0.28), transparent 70%);
}

.home-hero-title {
    margin: 0 0 16px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(90deg, #22d3ee, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-pills {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.home-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: #ececf1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.home-pill.active {
    border-color: rgba(139, 61, 255, 0.7);
    background: rgba(139, 61, 255, 0.16);
}

.home-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 640px;
    margin: 0 auto;
    padding: 13px 18px;
    box-sizing: border-box;
    background: #0a0b10;
    border: 1px solid rgba(139, 61, 255, 0.55);
    border-radius: 14px;
    box-shadow: 0 0 24px rgba(139, 61, 255, 0.18);
    color: var(--text-muted);
}

.home-search-wrap input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #ececf1;
    font-size: 15px;
}

.home-search-wrap input::placeholder {
    color: var(--text-secondary);
}

.home-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 4px;
}

.home-chip {
    padding: 8px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: #ececf1;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.home-chip.active {
    border-color: rgba(139, 61, 255, 0.7);
    background: rgba(139, 61, 255, 0.16);
}

@media (max-width: 640px) {
    .home-hero-title {
        font-size: 24px;
    }
}

.home-title {
    font-size: 17px;
    font-weight: 800;
}

.home-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

.home-body,
.templates-body {
    padding: 16px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.home-section-title {
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 10px;
    color: #ececf1;
}

.home-brands-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.home-brand-name {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-brand-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgba(139, 61, 255, 0.25);
    color: #c9a6ff;
    white-space: nowrap;
}

.home-brand-badge.starter {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

.home-brand-go {
    font-size: 13px;
    font-weight: 700;
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.home-empty,
.home-note {
    font-size: 13px;
    color: var(--text-muted);
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.template-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    color: #ececf1;
    text-align: left;
}

.template-card:active {
    transform: scale(0.98);
}

.template-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.template-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    background: #17181f;
}

.template-card-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 12px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-card-size {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 12px 10px;
}

.template-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.7);
}

.template-modal[hidden] {
    display: none;
}

#btnCanvaImport[hidden], #canvaImportModal [hidden], #publishSlots[hidden] {
    display: none !important;
}

#canvaImportModal label { display: block; color: var(--text-primary); margin: 12px 0 6px; }

/* Load failure overlay: explicit dead-end with a way home. */
.load-error-view {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: var(--bg-canvas);
}

.load-error-view[hidden] {
    display: none;
}

.load-error-card {
    width: min(420px, 100%);
    text-align: center;
    background: #14151c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    box-sizing: border-box;
}

.load-error-message {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 18px;
}

.template-modal-card {
    position: relative;
    width: min(560px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: #14151c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-sizing: border-box;
}

.template-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.template-modal-img {
    width: 100%;
    border-radius: 10px;
    display: block;
    background: #17181f;
}

.template-modal-info {
    padding-top: 14px;
}

.template-modal-name {
    font-size: 17px;
    font-weight: 800;
}

.template-modal-size {
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 14px;
}

.template-customize-btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.template-customize-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.file-menu-btn {
    font-size: 14px;
    font-weight: 700;
    padding: 7px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #ececf1;
    cursor: pointer;
}

.file-menu-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.file-menu {
    position: absolute;
    top: 52px;
    left: 12px;
    z-index: 70;
    min-width: 220px;
    padding: 6px;
    background: #1b1d26;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.file-menu[hidden] {
    display: none;
}

.file-menu-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #ececf1;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.file-menu-item:hover {
    background: rgba(139, 61, 255, 0.25);
}

.publish-panel {
    position: fixed;
    top: 56px;   /* below the top bar, so Done and Download stay reachable */
    right: 0;
    bottom: 0;
    z-index: 65;
    width: min(360px, 92vw);
    box-sizing: border-box;
    padding: 18px;
    background: #14151c;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    overflow-y: auto;
}

.publish-panel[hidden] {
    display: none;
}

.publish-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.publish-panel-title {
    font-size: 16px;
    font-weight: 800;
}

.publish-panel-text {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.publish-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary, #b9bdc7);
    margin-bottom: 6px;
}

.publish-select {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 18px;
    box-sizing: border-box;
    background: #1b1d26;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    color: #ececf1;
    font-size: 14px;
}

@media (max-width: 640px) {
    .templates-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
}

/* css/scroll.css */
/* Menus, drawers and popovers scroll without visible scrollbars.
 *
 * Every list inside the editor chrome (fonts, font sizes, colours, layers,
 * templates, position, publish, context bar...) scrolls by wheel, trackpad,
 * touch or keyboard with no scrollbar track or thumb. Where the browser
 * supports scroll-driven animations, a soft fade at the edge says "there is
 * more this way" and disappears once you reach that end; elsewhere the list
 * simply scrolls. The canvas viewport keeps its own scrollbars (style.css).
 */

#sidePanelContainer,
#sidePanelContainer .bottom-drawer,
.drawer-body,
.layer-list,
#layerList,
.template-grid,
.aspect-ratio-grid,
.position-body,
.font-list-container,
.font-size-preset-grid,
.marker-templates,
.template-modal-card,
.publish-panel,
.canva-import-card,
.context-floating-popover,
.cp-body,
.el-row,
#contextBar,
.marker-bottom-bar,
.marker-tool-rail {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#sidePanelContainer::-webkit-scrollbar,
#sidePanelContainer .bottom-drawer::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,
.layer-list::-webkit-scrollbar,
#layerList::-webkit-scrollbar,
.template-grid::-webkit-scrollbar,
.aspect-ratio-grid::-webkit-scrollbar,
.position-body::-webkit-scrollbar,
.font-list-container::-webkit-scrollbar,
.font-size-preset-grid::-webkit-scrollbar,
.marker-templates::-webkit-scrollbar,
.template-modal-card::-webkit-scrollbar,
.publish-panel::-webkit-scrollbar,
.canva-import-card::-webkit-scrollbar,
.context-floating-popover::-webkit-scrollbar,
.cp-body::-webkit-scrollbar,
.el-row::-webkit-scrollbar,
#contextBar::-webkit-scrollbar,
.marker-bottom-bar::-webkit-scrollbar,
.marker-tool-rail::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Vertical lists never scroll sideways (a hover-scaled swatch must not
   summon a horizontal bar). */
.drawer-body,
.layer-list,
#layerList,
.template-grid,
.position-body,
.font-list-container,
.font-size-preset-grid,
.marker-templates,
.publish-panel {
    overflow-x: hidden;
}

/* One scroller per side panel: the drawer body. The panel and drawer frame
   stay still, so the header never scrolls away and wheel input is never
   split between nested lists. */
#sidePanelContainer,
#sidePanelContainer .bottom-drawer {
    overflow: hidden;
}
#sidePanelContainer .bottom-drawer > .drawer-header {
    flex: 0 0 auto;
}
#sidePanelContainer .bottom-drawer > .drawer-body {
    flex: 1 1 auto;
    min-height: 0;
}
#sidePanelContainer .bottom-drawer > :not(.drawer-header):not(.drawer-body) {
    min-height: 0;
}

/* The font list grows with the panel and scrolls with it (no second,
   fixed-height scroller leaving a dead band under the list). */
#sidePanelContainer .font-list-container {
    max-height: none;
    overflow: visible;
}

/* Colour swatches always fit the popover width. */
.color-palette-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.color-palette-grid { align-items: center; }
.color-swatch {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    align-self: center;
}

/* Edge fades (scroll-driven; no JavaScript). */
@property --ss-fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ss-fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }

@keyframes ss-scroll-fade {
    0% { --ss-fade-start: 0px; --ss-fade-end: 22px; }
    6%, 94% { --ss-fade-start: 22px; --ss-fade-end: 22px; }
    100% { --ss-fade-start: 22px; --ss-fade-end: 0px; }
}

@supports (animation-timeline: scroll()) {
    .cp-body,
    .drawer-body,
    .layer-list,
    #layerList,
    .template-grid,
    .position-body,
    .font-size-preset-grid,
    .marker-templates,
    .publish-panel {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ss-fade-start), #000 calc(100% - var(--ss-fade-end)), transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ss-fade-start), #000 calc(100% - var(--ss-fade-end)), transparent 100%);
        animation: ss-scroll-fade linear both;
        animation-timeline: scroll(self block);
    }
    #contextBar,
    .aspect-ratio-grid,
    .el-row,
    .marker-bottom-bar {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ss-fade-start), #000 calc(100% - var(--ss-fade-end)), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 var(--ss-fade-start), #000 calc(100% - var(--ss-fade-end)), transparent 100%);
        animation: ss-scroll-fade linear both;
        animation-timeline: scroll(self inline);
    }
}

@media (prefers-reduced-motion: reduce) {
    .drawer-body, .layer-list, #layerList, .template-grid, .position-body,
    .font-list-container, .font-size-preset-grid, .marker-templates, .publish-panel {
        scroll-behavior: auto;
    }
}

/* css/home-public.css */
/* Marker homepage: reference design, light warm theme. Scoped to browse/home
 * views only. Static sections (quick rail, recents, formats) render from
 * markup; the templates grid, chips, search and brands stay live. */

.marker-home {
    --home-bg: #f7f6f3;
    --home-panel: #fff;
    --home-line: #e8e6e0;
    --home-muted: #72716d;
    --home-purple: #7664dc;
    min-height: 100dvh;
    color: #17151c;
    background: var(--home-bg);
}

/* Page container shared by every home section. width:100% matters: the
 * home root is a flex column, so without it the page sizes to content
 * (max-content) instead of filling narrow viewports. */
.marker-home .home-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 34px 70px;
    box-sizing: border-box;
}

/* No side rail in this design: neutralize the rail-era content offset. */
body.browsing .marker-home {
    padding-left: 0;
}

/* Top nav: brand left, auth right. */
.marker-home .home-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.marker-home .home-brand {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.04em;
    color: #17151c;
}
.marker-home .home-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #6d3df5;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 800;
}
.marker-home .home-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.marker-home .home-signin {
    min-height: 40px;
    padding: 0 17px;
    border: 1px solid #e4e0e9;
    border-radius: 9px;
    background: #fff;
    color: #9a969f;
    font: 600 13px Inter, sans-serif;
    cursor: not-allowed;
}

/* Centered hero. */
.marker-home .home-hero {
    text-align: center;
    padding: 76px 0 42px;
    flex-shrink: 0;
    background: none;
    min-height: 0;
}
.marker-home .home-eyebrow {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #77717f;
}
.marker-home .home-hero-title {
    font-size: 54px;
    line-height: 1.02;
    letter-spacing: -0.045em;
    margin: 15px auto;
    max-width: 720px;
    color: #17151c;
    font-weight: 800;
}
.marker-home .home-hero-title em {
    font-style: normal;
}
.marker-home .home-hero-description {
    font-size: 17px;
    color: #6e6874;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Quick-start rail: horizontal snap strip of paper-card format buttons. */
.marker-home .home-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Snap + scroll containment: cards already declare scroll-snap-align,
     * but it only engages with the container type set here; containment
     * stops the page from scrolling once the rail hits either end. */
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    padding: 4px 2px 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.marker-home .home-rail::-webkit-scrollbar {
    display: none;
}
/* Keyboard users get a visible ring on every focusable home control.
 * (Recent cards are static placeholders, not focusable — no rule for them.) */
.marker-home .home-quick:focus-visible,
.marker-home .home-format:focus-visible,
.marker-home .home-view-all:focus-visible,
.marker-home .home-signin:focus-visible {
    outline: 3px solid #8B3DFF;
    outline-offset: 3px;
}
.marker-home .home-quick {
    flex: 0 0 208px;
    min-width: 208px;
    width: 208px;
    height: 78px;
    border: 1px solid #e5e1e8;
    border-radius: 12px;
    background: #fff;
    padding: 10px 13px;
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    cursor: pointer;
    text-align: left;
    color: #292722;
    scroll-snap-align: start;
}
.marker-home .home-quick strong {
    font-size: 14px;
    font-weight: 700;
}
.marker-home .home-quick span:not(.home-quick-art) {
    grid-column: 2;
    font-size: 11px;
    color: #8a8490;
}
/* Paper-card illustration system: mini canvas sheet + scene glyphs. */
.marker-home .home-quick-art {
    grid-row: 1 / 3;
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    overflow: visible;
    border-radius: 10px;
    background: #ebe9e4;
    box-shadow: inset 0 0 0 1px #dfdcd5;
}
.marker-home .home-quick-art i {
    position: relative;
    display: block;
    width: 30px;
    height: 34px;
    border: 1px solid #dedbd4;
    border-radius: 4px;
    background: #fffefa;
    box-shadow: 0 3px 7px rgba(38, 34, 27, 0.1);
    overflow: hidden;
}
.marker-home .home-quick-art i:before,
.marker-home .home-quick-art i:after {
    content: "";
    position: absolute;
    display: block;
}
.marker-home .icon-custom i {
    width: 29px;
    height: 35px;
    border: 1px dashed #8b7ad5;
    box-shadow: 0 2px 6px rgba(38, 34, 27, 0.07);
}
.marker-home .icon-custom i:before {
    inset: 10px 9px;
    border: 1.5px solid #8b7ad5;
    border-radius: 50%;
}
.marker-home .icon-custom i:after {
    content: "+";
    inset: 0;
    display: grid;
    place-items: center;
    color: #7664dc;
    font: 500 17px/1 Inter, sans-serif;
}
.marker-home .icon-post i {
    width: 29px;
    height: 36px;
}
.marker-home .icon-post i:before {
    left: 4px;
    top: 4px;
    width: 19px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(145deg, #e9a19a 0 34%, #c8b9e8 34% 64%, #a5c3c0 64%);
}
.marker-home .icon-post i:after {
    left: 5px;
    bottom: 5px;
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: #d8d4cc;
    box-shadow: 0 4px 0 #e6e2db;
}
.marker-home .icon-square i {
    width: 34px;
    height: 34px;
}
.marker-home .icon-square i:before {
    left: 4px;
    top: 4px;
    width: 24px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(145deg, #9fc3df 0 45%, #c6b7e5 45% 72%, #8db4bd 72%);
}
.marker-home .icon-square i:after {
    left: 5px;
    bottom: 5px;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: #d5d1ca;
    box-shadow: 0 4px 0 #e5e1da;
}
.marker-home .icon-story i {
    width: 25px;
    height: 39px;
    border-radius: 5px;
}
.marker-home .icon-story i:before {
    left: 3px;
    top: 4px;
    width: 17px;
    height: 22px;
    border-radius: 3px;
    background: linear-gradient(155deg, #bcaee8 0 40%, #8e83ca 40% 67%, #e4b6a2 67%);
}
.marker-home .icon-story i:after {
    left: 5px;
    bottom: 5px;
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: #d8d4cc;
    box-shadow: 0 4px 0 #e6e2db;
}
.marker-home .icon-video i {
    width: 37px;
    height: 28px;
}
.marker-home .icon-video i:before {
    left: 4px;
    top: 4px;
    width: 27px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(145deg, #e6a29b, #d97d75 55%, #b28fd0);
}
.marker-home .icon-video i:after {
    left: 15px;
    top: 8px;
    width: 0;
    height: 0;
    border-left: 6px solid #fffefa;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}
.marker-home .icon-wide i {
    width: 37px;
    height: 28px;
}
.marker-home .icon-wide i:before {
    left: 4px;
    top: 4px;
    width: 10px;
    height: 4px;
    border-radius: 2px;
    background: #9b91c9;
    box-shadow: 13px 0 0 #d8d4cc, 0 7px 0 #d8d4cc, 13px 7px 0 #e5e1da;
}
.marker-home .icon-wide i:after {
    right: 4px;
    bottom: 4px;
    width: 12px;
    height: 8px;
    border-radius: 2px;
    background: #b8cdd2;
}
.marker-home .icon-tall i {
    width: 27px;
    height: 37px;
}
.marker-home .icon-tall i:before {
    left: 3px;
    top: 3px;
    width: 19px;
    height: 21px;
    border-radius: 2px;
    background: linear-gradient(150deg, #e7ad87, #d79d8d 45%, #9d7eb8);
}
.marker-home .icon-tall i:after {
    left: 5px;
    bottom: 5px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: #d8d4cc;
    box-shadow: 0 4px 0 #e6e2db;
}

/* Search + filter chips (live). */
.marker-home .home-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 20px;
    background: #fff;
    border: 1px solid #e3dfe8;
    border-radius: 13px;
    padding: 14px 16px;
    color: #99929f;
    max-width: none;
    height: auto;
    box-shadow: none;
}
.marker-home .home-search-wrap input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #17151c;
    font-size: 14px;
}
.marker-home .home-search-wrap input::placeholder {
    color: #99929f;
}
.marker-home .home-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    justify-content: flex-start;
}
.marker-home .home-chip {
    border: 1px solid #e5e1e8;
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    color: #625c69;
    cursor: pointer;
}
.marker-home .home-chip.active {
    border-color: #7664dc;
    color: #4a3f8f;
    background: #f0edfb;
}

/* Content sections. */
.marker-home .home-section {
    margin-top: 44px;
    max-width: none;
}
.marker-home .home-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.marker-home .home-heading h2 {
    margin: 0;
    font-size: 25px;
    letter-spacing: -0.025em;
    color: #17151c;
}
.marker-home .home-heading p {
    margin: 5px 0 0;
    color: #85808a;
    font-size: 13px;
}
.marker-home .home-view-all {
    border: none;
    background: none;
    color: #6d3df5;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    padding: 4px 0;
}

/* Recent designs (static placeholders until wired to recents data). */
.marker-home .home-recent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.marker-home .home-recent-card {
    height: 160px;
    border: 1px solid #e6e2e8;
    border-radius: 14px;
    background: #fff;
    display: grid;
    place-items: center;
    color: #aaa4ad;
    font-size: 13px;
}

/* Browse by format. */
.marker-home .home-formats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.marker-home .home-format {
    background: #fff;
    border: 1px solid #e3dfe8;
    border-radius: 15px;
    padding: 17px;
    min-height: 104px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 13px;
    cursor: pointer;
    text-align: left;
    color: #17151c;
}
/* Large premium icon chips: real SVG marks on brand-tinted tiles.
 * No font glyphs anywhere — text marks clip and vary per client. */
.marker-home .home-format {
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.marker-home .home-format:hover {
    transform: translateY(-2px);
    border-color: #cfc8ee;
    box-shadow: 0 10px 24px rgba(60, 45, 120, 0.1);
}
.marker-home .home-format-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
}
.marker-home .home-format-icon svg {
    width: 30px;
    height: 30px;
    display: block;
}
.marker-home .home-format-icon.icon-ig {
    color: #d62976;
    background: rgba(214, 41, 118, 0.09);
}
.marker-home .home-format-icon.icon-fb {
    color: #1877f2;
    background: rgba(24, 119, 242, 0.09);
}
.marker-home .home-format-icon.icon-story {
    color: #8e44ad;
    background: linear-gradient(135deg, rgba(214, 41, 118, 0.1), rgba(142, 68, 173, 0.12));
}
.marker-home .home-format-icon.icon-yt {
    background: rgba(255, 0, 51, 0.07);
}
.marker-home .home-format-icon.icon-yt svg {
    width: 34px;
    height: 27px;
}
.marker-home .home-format-icon.icon-x {
    color: #111;
    background: rgba(0, 0, 0, 0.05);
}
.marker-home .home-format-icon.icon-x svg {
    width: 24px;
    height: 24px;
}
.marker-home .home-format-icon.icon-pin {
    color: #bd081c;
    background: rgba(189, 8, 28, 0.08);
}
.marker-home .home-format b {
    font-size: 14px;
}
.marker-home .home-format small {
    display: block;
    color: #8a8490;
    margin-top: 4px;
    font-size: 11px;
}

/* Live templates grid + brands keep their card language, on light. */
.marker-home .templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}
.marker-home .template-card {
    background: #fff;
    border: 1px solid var(--home-line);
    border-radius: 15px;
    overflow: hidden;
}
.marker-home .template-card-name {
    color: #242321;
    min-height: 42px;
    padding: 12px 13px 3px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}
.marker-home .template-card-size {
    color: #9da0ad;
    padding: 2px 13px 13px;
}
.marker-home .home-brands-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.marker-home .home-empty,
.marker-home .home-note {
    color: #9295a3;
    font-size: 13px;
}

@media (max-width: 800px) {
    .marker-home .home-page {
        padding: 22px 18px 56px;
    }
    .marker-home .home-hero {
        padding: 48px 0 30px;
    }
    .marker-home .home-hero-title {
        font-size: 42px;
    }
    .marker-home .home-recent {
        grid-template-columns: repeat(2, 1fr);
    }
    .marker-home .home-formats {
        grid-template-columns: 1fr 1fr;
    }
    .marker-home .templates-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }
}

@media (max-width: 390px) {
    .marker-home .home-formats {
        grid-template-columns: 1fr;
    }
}

/* css/vendor-wa.css */
/* Phase 6: Web Awesome 3.13.0 slider integration (selective: Opacity + Corner radius).
   WA ships its own cascade layers; Marker's unlayered rules keep priority.
   These rules only size the two migrated controls and keep popover layout intact. */
wa-slider.marker-pop-slider,
wa-slider.marker-slider {
    width: 100%;
    display: block;
}
wa-slider.marker-pop-slider::part(base),
wa-slider.marker-slider::part(base) {
    width: 100%;
}

/* css/theme-light.css */
/* GENERATED by scripts/build_marker_light.py from Marker's stylesheets. Do not edit:
   change the source stylesheet, then run the script. Active under :root[data-theme="light"]. */

:root[data-theme="light"] {
    color-scheme: light;
    --bg-primary: #f2f2f5;
    --bg-canvas: #e9e9ee;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #ffffff;
    --accent-text: #7D2AE8;
    --brand-yellow-glow: rgba(230, 200, 0, 0.28);
    --text-primary: #1d1d1f;
    --text-secondary: #5f6370;
    --text-muted: #6b6f7b;
    --text-faint: #6e7280;
    --border: rgba(0, 0, 0, 0.1);
    --danger: #d70015;
}

/* ---- style.css ---- */
:root[data-theme="light"] #sidePanelContainer {
    background-color: #ffffff;
    border-right: 1px solid rgba(18, 18, 28, 0.072);
    box-shadow: 16px 0 34px rgba(0, 0, 0, 0.143);
}
:root[data-theme="light"] #viewport {
    background-color: #ffffff;
    background-image: radial-gradient(circle, rgba(18, 18, 28, 0.06) 1px, transparent 1px);
}
:root[data-theme="light"] .viewport-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
}
:root[data-theme="light"] .viewport-scroll::-webkit-scrollbar-thumb {
    background: rgba(18, 18, 28, 0.165);
}
:root[data-theme="light"] .viewport-scroll {
    scrollbar-color: rgba(18, 18, 28, 0.188) rgba(0, 0, 0, 0.15);
}
:root[data-theme="light"] #canvasWrapper {
    outline: 1px solid rgba(18, 18, 28, 0.144);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.315), 0 2px 8px rgba(0, 0, 0, 0.189), 0 0 0 1px rgba(18, 18, 28, 0.126);
}
:root[data-theme="light"] #contextBar {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(18, 18, 28, 0.072);
}
:root[data-theme="light"] .context-chip-btn {
    background-color: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.108);
    color: #1d1d1f;
}
:root[data-theme="light"] .context-group + .context-group {
    border-left: 1px solid rgba(18, 18, 28, 0.108);
}
:root[data-theme="light"] .context-chip-btn:hover {
    background-color: #e5e6ea;
    color: #1d1d1f;
    border-color: rgba(18, 18, 28, 0.198);
}
:root[data-theme="light"] .context-chip-btn.deselect-btn {
    border-left: 1px solid rgba(18, 18, 28, 0.18);
}
:root[data-theme="light"] .bottom-drawer {
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.252);
}
:root[data-theme="light"] .context-floating-popover {
    background-color: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.162);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.231);
}
:root[data-theme="light"] .layer-order-actions {
    background-color: rgba(0, 0, 0, 0.12);
}
:root[data-theme="light"] .layer-item.selected {
    background-color: #eeeee8;
}
:root[data-theme="light"] .layer-item.dragging {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.231);
}
:root[data-theme="light"] .stroke-toggle-btn.active {
    color: #1d1d1f;
}
:root[data-theme="light"] .stroke-alignment-options .small-preset-chip.active {
    color: #1d1d1f;
}
:root[data-theme="light"] .shape-stroke-group {
    border-top: 1px solid rgba(18, 18, 28, 0.09);
}
:root[data-theme="light"] .crop-drawer {
    background-color: #ffffff;
    border-top: 1px solid rgba(18, 18, 28, 0.108);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.252);
}
:root[data-theme="light"] .crop-title {
    color: #1d1d1f;
}
:root[data-theme="light"] .aspect-card {
    background-color: #f5f5f7;
    border: 1.5px solid rgba(18, 18, 28, 0.108);
}
:root[data-theme="light"] .aspect-card.active {
    color: #1d1d1f;
}
:root[data-theme="light"] .small-btn.auto-btn,
:root[data-theme="light"] .small-btn.zero-btn {
    background-color: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.135);
    color: #1d1d1f;
}
:root[data-theme="light"] .small-btn.auto-btn:hover,
:root[data-theme="light"] .small-btn.zero-btn:hover {
    background-color: #e5e6ea;
}
:root[data-theme="light"] .crop-actions-row .cancel-btn {
    border: 1.5px solid rgba(18, 18, 28, 0.18);
    color: #1d1d1f;
}
:root[data-theme="light"] .crop-actions-row .cancel-btn:hover {
    background-color: rgba(18, 18, 28, 0.06);
}
:root[data-theme="light"] .position-tabs {
    background: rgba(18, 18, 28, 0.045);
}
:root[data-theme="light"] .pos-tab:hover {
    color: #1d1d1f;
}
:root[data-theme="light"] .align-btn {
    background-color: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.072);
    color: #1d1d1f;
}
:root[data-theme="light"] .align-btn:hover {
    background-color: #eaeaee;
    border-color: rgba(18, 18, 28, 0.18);
    color: #1d1d1f;
}
:root[data-theme="light"] .arrange-btn {
    background-color: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.072);
    color: #1d1d1f;
}
:root[data-theme="light"] .arrange-btn:hover {
    background-color: #eaeaee;
    border-color: rgba(18, 18, 28, 0.18);
    color: #1d1d1f;
}
:root[data-theme="light"] .coord-input {
    background: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.09);
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-top-bar {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(18, 18, 28, 0.072);
}
:root[data-theme="light"] .doc-title {
    color: #1d1d1f;
}
:root[data-theme="light"] .doc-dim {
    color: #5b6272;
}
:root[data-theme="light"] .history-controls {
    background: rgba(18, 18, 28, 0.03);
}
:root[data-theme="light"] .saved-cloud.saving {
    background: rgba(18, 18, 28, 0.045);
    border-color: rgba(18, 18, 28, 0.108);
}
:root[data-theme="light"] .marker-header-btn {
    background-color: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.108);
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-header-btn:hover {
    background-color: #e5e6ea;
}
:root[data-theme="light"] .floating-selection-bar {
    background-color: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.294);
}
:root[data-theme="light"] .float-btn {
    color: #1d1d1f;
}
:root[data-theme="light"] .float-btn:hover {
    background: rgba(18, 18, 28, 0.09);
    color: #1d1d1f;
}
:root[data-theme="light"] .float-btn.active {
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-bottom-bar {
    background-color: #ffffff;
    border-top: 1px solid rgba(18, 18, 28, 0.072);
}
:root[data-theme="light"] .marker-tool-btn {
    color: #575e6b;
}
:root[data-theme="light"] .marker-tool-btn:hover {
    background-color: #f5f5f7;
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-tool-btn.deselect-btn {
    border-left: 1px solid rgba(18, 18, 28, 0.09);
}
:root[data-theme="light"] .color-swatch {
    border: 2px solid rgba(18, 18, 28, 0.135);
}
@media (max-width: 768px) {
    :root[data-theme="light"] #sidePanelContainer {
        border-top: 1px solid rgba(18, 18, 28, 0.108);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.336);
    }
}
:root[data-theme="light"] .template-card {
    background-color: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.072);
}
:root[data-theme="light"] .template-card:hover,
:root[data-theme="light"] .template-card:focus-visible {
    background-color: #e5e6ea;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.168);
}
:root[data-theme="light"] .template-card-preview {
    background: #ffffff;
    border: 1px solid rgba(18, 18, 28, 0.054);
}
:root[data-theme="light"] .template-card-title {
    color: #1d1d1f;
}
:root[data-theme="light"] .template-card-meta {
    color: #575e6b;
}
:root[data-theme="light"] .font-upload-banner {
    border-bottom: 1px solid rgba(18, 18, 28, 0.09);
}
:root[data-theme="light"] .font-upload-btn:hover {
    color: #1d1d1f;
}
:root[data-theme="light"] .font-upload-banner.drag-over .font-upload-btn {
    color: #1d1d1f;
}
:root[data-theme="light"] .font-variant-tag-btn {
    background: rgba(18, 18, 28, 0.06);
    border: 1px solid rgba(18, 18, 28, 0.126);
    color: #4e5464;
}
:root[data-theme="light"] .font-variant-tag-btn:hover {
    color: #1d1d1f;
}
:root[data-theme="light"] .font-search-box {
    background: #ffffff;
    border: 1px solid rgba(18, 18, 28, 0.108);
}
:root[data-theme="light"] .font-search-box:focus-within {
    color: #1d1d1f;
}
:root[data-theme="light"] .font-search-box input {
    color: #1d1d1f;
}
:root[data-theme="light"] .font-item-card {
    background-color: #f5f5f7;
    border: 1.5px solid rgba(18, 18, 28, 0.09);
    color: #1d1d1f;
}
:root[data-theme="light"] .font-item-card:hover {
    background-color: #e5e6ea;
    border-color: rgba(18, 18, 28, 0.225);
}
:root[data-theme="light"] .font-sample-preview {
    color: #1d1d1f;
}
:root[data-theme="light"] .shape-card {
    background-color: #f5f5f7;
    border: 1.5px solid rgba(18, 18, 28, 0.108);
}
:root[data-theme="light"] .shape-card:hover {
    background-color: #e5e6ea;
    color: #1d1d1f;
}
:root[data-theme="light"] .frame-preview {
    background: repeating-linear-gradient(45deg, rgba(139, 61, 255, 0.2) 0 6px, rgba(18, 18, 28, 0.06) 6px 12px);
}
:root[data-theme="light"] .canvas-zoom-widget {
    background: rgba(250, 250, 252, 0.85);
    border: 1px solid rgba(18, 18, 28, 0.135);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.168);
}
:root[data-theme="light"] .zoom-btn {
    color: #1d1d1f;
}
:root[data-theme="light"] .zoom-btn:hover {
    background: rgba(18, 18, 28, 0.112);
}
:root[data-theme="light"] .marker-modal-backdrop {
    background: rgba(250, 250, 252, 0.72);
}
:root[data-theme="light"] .marker-modal-card {
    background: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.126);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.231);
}
:root[data-theme="light"] .marker-modal-title {
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-modal-input {
    border: 1px solid rgba(18, 18, 28, 0.162);
    background: #ffffff;
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-modal-btn {
    border: 1px solid rgba(18, 18, 28, 0.144);
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-slider {
    background: #e5e6ea;
}
:root[data-theme="light"] .small-preset-chip {
    background: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.108);
}
:root[data-theme="light"] .small-preset-chip:hover {
    background: #e5e6ea;
    color: #1d1d1f;
}
:root[data-theme="light"] .resize-card {
    background: #f5f5f7;
    border: 1.5px solid rgba(18, 18, 28, 0.09);
}
:root[data-theme="light"] .resize-card:hover {
    background: #e5e6ea;
}
:root[data-theme="light"] .resize-name {
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-font-btn {
    background: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.135);
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-font-btn:hover {
    background: #e5e6ea;
    border-color: rgba(18, 18, 28, 0.225);
}
:root[data-theme="light"] .marker-font-size-group {
    background: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.135);
}
:root[data-theme="light"] .marker-size-btn {
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-size-btn:hover {
    background: rgba(18, 18, 28, 0.09);
}
:root[data-theme="light"] .marker-size-input {
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-size-menu-btn {
    border-left: 1px solid rgba(18, 18, 28, 0.09);
    color: #535866;
}
:root[data-theme="light"] .marker-size-menu-btn:hover,
:root[data-theme="light"] .marker-size-menu-btn:focus-visible {
    background: rgba(18, 18, 28, 0.075);
    color: #1d1d1f;
}
:root[data-theme="light"] .font-size-popover-title {
    color: #1d1d1f;
}
:root[data-theme="light"] .font-size-preset {
    color: #1d1d1f;
}
:root[data-theme="light"] .font-size-preset:hover {
    background: rgba(18, 18, 28, 0.075);
}
:root[data-theme="light"] .font-size-preset.active {
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-tool-btn {
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-tool-btn:hover {
    background: rgba(18, 18, 28, 0.09);
}
:root[data-theme="light"] .marker-tool-btn.active {
    color: #1d1d1f !important;
}
:root[data-theme="light"] .marker-divider {
    background: rgba(18, 18, 28, 0.135);
}
:root[data-theme="light"] .effect-card {
    background: #f5f5f7;
    border: 1.5px solid rgba(18, 18, 28, 0.09);
    color: #1d1d1f;
}
:root[data-theme="light"] .effect-card:hover {
    background: #e5e6ea;
}

/* ---- css/popovers.css ---- */
:root[data-theme="light"] .marker-floating-popover {
    background: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.144);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.252), 0 4px 12px rgba(0, 0, 0, 0.126);
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-pop-title {
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-pop-num {
    background: #eaebee;
    border: 1px solid rgba(18, 18, 28, 0.135);
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-pop-slider {
    background: rgba(18, 18, 28, 0.112);
}
:root[data-theme="light"] .marker-pop-slider::-webkit-slider-thumb {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.168);
}
:root[data-theme="light"] .marker-pop-divider {
    background: rgba(18, 18, 28, 0.075);
}
:root[data-theme="light"] .marker-anchor-btn {
    background: #eaebee;
    border: 1px solid rgba(18, 18, 28, 0.108);
}
:root[data-theme="light"] .marker-anchor-btn:hover {
    background: #e4e4e9;
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-anchor-btn.active {
    color: #1d1d1f !important;
}

/* ---- css/workspace.css ---- */
:root[data-theme="light"] #viewport {
    background-color: #f5f6f7;
}
:root[data-theme="light"] .page-header.active-page .page-title {
    color: #1d1d1f;
}
:root[data-theme="light"] .page-title {
    color: #4d5161;
}
:root[data-theme="light"] .page-title:hover {
    color: #1d1d1f;
    background: rgba(18, 18, 28, 0.045);
}
:root[data-theme="light"] .page-icon-btn {
    color: #4d5161;
}
:root[data-theme="light"] .page-icon-btn:hover:not(:disabled) {
    background: rgba(18, 18, 28, 0.068);
    color: #1d1d1f;
}
:root[data-theme="light"] .selection-hint {
    color: #4d5161;
}
:root[data-theme="light"] #topBar {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    border-bottom-color: rgba(18, 18, 28, 0.063);
}
:root[data-theme="light"] #topBar .icon-btn:hover {
    background: rgba(18, 18, 28, 0.068);
}
:root[data-theme="light"] .doc-meta.is-truncated .doc-title::after {
    background: linear-gradient(to right, transparent, #ffffff 80%);
}
:root[data-theme="light"] .history-controls {
    border: 1px solid rgba(18, 18, 28, 0.063);
    background: rgba(18, 18, 28, 0.026);
}
:root[data-theme="light"] .saved-cloud {
    color: #565b67;
}
:root[data-theme="light"] .more-rename-btn {
    color: #565b67;
}
:root[data-theme="light"] .more-rename-btn:hover {
    background: rgba(18, 18, 28, 0.068);
    color: #1d1d1f;
}
:root[data-theme="light"] .more-row {
    color: #1d1d1f;
}
:root[data-theme="light"] .more-row:hover {
    background: rgba(18, 18, 28, 0.053);
}
:root[data-theme="light"] .more-row svg {
    color: #565b67;
}
:root[data-theme="light"] .marker-tool-rail {
    background: #ffffff;
    border-right: 1px solid rgba(18, 18, 28, 0.072);
}
:root[data-theme="light"] .rail-tool-btn {
    color: #1d1d1f;
}
:root[data-theme="light"] .rail-tool-btn:hover,
:root[data-theme="light"] .rail-tool-btn:focus-visible {
    background: rgba(18, 18, 28, 0.068);
    color: #1d1d1f;
}
:root[data-theme="light"] #contextBar {
    background: #ffffff;
    border: 1px solid rgba(18, 18, 28, 0.108);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.151);
}
:root[data-theme="light"] #contextBar::before,
:root[data-theme="light"] #bottomBar::before {
    background: linear-gradient(to right, #ffffff 25%, transparent);
}
:root[data-theme="light"] #contextBar::after,
:root[data-theme="light"] #bottomBar::after {
    background: linear-gradient(to left, #ffffff 25%, transparent);
}
:root[data-theme="light"] .context-mode-label {
    background: #ffffff;
}
:root[data-theme="light"] .context-chip-btn {
    color: #1d1d1f;
}
:root[data-theme="light"] .context-chip-btn:hover {
    background: rgba(18, 18, 28, 0.068);
}
:root[data-theme="light"] .context-chip-btn.context-secondary-action {
    color: #4f5563;
}
:root[data-theme="light"] .marker-font-btn,
:root[data-theme="light"] .marker-font-size-group {
    border-color: rgba(18, 18, 28, 0.09);
    background: #f5f6f7;
}
:root[data-theme="light"] .floating-selection-bar {
    background: #f5f6f7;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.202);
}
@media (max-width: 768px) {
    :root[data-theme="light"] .marker-tool-rail {
        border-bottom: 1px solid rgba(18, 18, 28, 0.072);
    }
}
@media (max-width: 768px) {
    :root[data-theme="light"] .marker-tool-rail::before {
        background: linear-gradient(to right, #ffffff 25%, transparent);
    }
}
@media (max-width: 768px) {
    :root[data-theme="light"] .marker-tool-rail::after {
        background: linear-gradient(to left, #ffffff 25%, transparent);
    }
}
:root[data-theme="light"] #templateList .template-card-preview {
    background: #ffffff;
    border: 1px solid rgba(18, 18, 28, 0.063);
    color: #626670;
}
:root[data-theme="light"] #templateList .template-card-title {
    color: #1d1d1f;
}
:root[data-theme="light"] .el-back {
    color: #1d1d1f;
}
:root[data-theme="light"] .el-back:hover {
    background: rgba(18, 18, 28, 0.06);
}
:root[data-theme="light"] .el-search {
    border: 1px solid rgba(18, 18, 28, 0.09);
    background: #f5f5f7;
    color: #616570;
}
:root[data-theme="light"] .el-search-input {
    color: #1d1d1f;
}
:root[data-theme="light"] .el-search-input::placeholder {
    color: #616570;
}
:root[data-theme="light"] .el-section-head h4 {
    color: #1d1d1f;
}
:root[data-theme="light"] .el-see-all {
    color: #4a505d;
}
:root[data-theme="light"] .el-see-all:hover {
    color: #1d1d1f;
    background: rgba(18, 18, 28, 0.053);
}
:root[data-theme="light"] .el-cat {
    color: #1d1d1f;
}
:root[data-theme="light"] .el-cat-art::after {
    box-shadow: inset 0 1px 0 rgba(18, 18, 28, 0.252), 0 8px 18px rgba(0, 0, 0, 0.147);
}
:root[data-theme="light"] .el-cat-art--overlays::after {
    background: linear-gradient(160deg, #4a5163, #ffffff);
}
:root[data-theme="light"] .el-cat-photo {
    border: 2px solid rgba(18, 18, 28, 0.81);
}
:root[data-theme="light"] .el-item {
    border: 1px solid rgba(18, 18, 28, 0.063);
    background: #f5f5f7;
    color: #4a505d;
}
:root[data-theme="light"] .el-item:hover,
:root[data-theme="light"] .el-item:focus-visible {
    background: #ebebef;
}
:root[data-theme="light"] .el-empty {
    color: #5c616b;
}
:root[data-theme="light"] .chip-color-a {
    color: #1d1d1f;
}
:root[data-theme="light"] .chip-color-a::after {
    background: var(--chip-swatch, #f4f4f4);
    box-shadow: 0 0 0 1px rgba(18, 18, 28, 0.315);
}
:root[data-theme="light"] .chip-fill-dot {
    box-shadow: inset 0 0 0 1px rgba(18, 18, 28, 0.315), 0 0 0 1px rgba(0, 0, 0, 0.147);
}
:root[data-theme="light"] .chip-fit-toggle {
    background: rgba(18, 18, 28, 0.045);
}
:root[data-theme="light"] .chip-fit-btn {
    color: rgba(18, 18, 28, 0.648);
}
:root[data-theme="light"] .chip-fit-btn:hover {
    color: #1d1d1f;
}
:root[data-theme="light"] .cp-tabs {
    background: rgba(18, 18, 28, 0.045);
}
:root[data-theme="light"] .cp-tab {
    color: rgba(18, 18, 28, 0.63);
}
:root[data-theme="light"] .cp-tab:hover {
    color: #1d1d1f;
}
:root[data-theme="light"] .cp-tab.is-active {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.147);
}
:root[data-theme="light"] .cp-preview {
    box-shadow: inset 0 0 0 1px rgba(18, 18, 28, 0.198), 0 4px 14px rgba(0, 0, 0, 0.147);
}
:root[data-theme="light"] .cp-preview::after {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.189);
}
:root[data-theme="light"] .cp-hex {
    background: #ffffff;
    border: 1px solid rgba(18, 18, 28, 0.108);
    color: rgba(18, 18, 28, 0.405);
}
:root[data-theme="light"] .cp-hex input {
    color: #1d1d1f;
}
:root[data-theme="light"] .cp-icon-btn {
    background: rgba(18, 18, 28, 0.053);
    color: rgba(18, 18, 28, 0.765);
}
:root[data-theme="light"] .cp-icon-btn:hover:not(:disabled) {
    background: rgba(18, 18, 28, 0.105);
    color: #1d1d1f;
}
:root[data-theme="light"] .cp-section-title {
    color: rgba(18, 18, 28, 0.495);
}
:root[data-theme="light"] .cp-swatch {
    box-shadow: inset 0 0 0 1px rgba(18, 18, 28, 0.126);
}
:root[data-theme="light"] .cp-swatch:hover {
    box-shadow: inset 0 0 0 1px rgba(18, 18, 28, 0.18), 0 6px 16px rgba(0, 0, 0, 0.189);
}
:root[data-theme="light"] .cp-swatch.is-selected::after {
    border-left: 2.5px solid var(--cp-ink, #dbdbdb);
    border-bottom: 2.5px solid var(--cp-ink, #dbdbdb);
}
:root[data-theme="light"] .cp-grad-preview {
    box-shadow: inset 0 0 0 1px rgba(18, 18, 28, 0.126);
}
:root[data-theme="light"] .cp-bar {
    box-shadow: inset 0 0 0 1px rgba(18, 18, 28, 0.162);
}
:root[data-theme="light"] .cp-stop {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.231);
}
:root[data-theme="light"] .cp-stop.is-active {
    box-shadow: 0 0 0 2px var(--accent, #8B3DFF), 0 3px 10px rgba(0, 0, 0, 0.252);
}
:root[data-theme="light"] .cp-opacity {
    color: rgba(18, 18, 28, 0.675);
}
:root[data-theme="light"] .cp-opacity-label {
    color: rgba(18, 18, 28, 0.495);
}
:root[data-theme="light"] .cp-angle {
    background: rgba(18, 18, 28, 0.053);
    color: rgba(18, 18, 28, 0.72);
}
:root[data-theme="light"] .cp-angle:hover {
    background: rgba(18, 18, 28, 0.105);
    color: #1d1d1f;
}
:root[data-theme="light"] .cp-angle-input {
    background: #ffffff;
    border: 1px solid rgba(18, 18, 28, 0.108);
    color: rgba(18, 18, 28, 0.495);
}
:root[data-theme="light"] .cp-angle-input input {
    color: #1d1d1f;
}
:root[data-theme="light"] .cp-gradient {
    box-shadow: inset 0 0 0 1px rgba(18, 18, 28, 0.126);
}
:root[data-theme="light"] #contextBar .context-group + .context-group::before {
    background: rgba(18, 18, 28, 0.075);
}
:root[data-theme="light"] #contextBar .context-chip-btn,
:root[data-theme="light"] #contextBar .marker-tool-btn {
    color: #1d1d1f;
}
:root[data-theme="light"] #contextBar .context-chip-btn:hover,
:root[data-theme="light"] #contextBar .marker-tool-btn:hover {
    background: rgba(18, 18, 28, 0.06);
    color: #1d1d1f;
}
:root[data-theme="light"] #contextBar .marker-font-btn,
:root[data-theme="light"] #contextBar .marker-font-size-group {
    background: #f5f6f7;
    border: 1px solid rgba(18, 18, 28, 0.09);
}
:root[data-theme="light"] #contextBar .marker-font-btn:hover {
    background: #ebebee;
    border-color: rgba(18, 18, 28, 0.162);
}
@media (min-width: 769px) {
    :root[data-theme="light"] .doc-dim {
        color: #595f6b;
    }
}
:root[data-theme="light"] .pn-range::-webkit-slider-runnable-track,
:root[data-theme="light"] .marker-slider[type="range"]::-webkit-slider-runnable-track,
:root[data-theme="light"] input[type="range"].marker-pop-slider::-webkit-slider-runnable-track {
    background: rgba(18, 18, 28, 0.105);
}
:root[data-theme="light"] .pn-range::-webkit-slider-thumb,
:root[data-theme="light"] .marker-slider[type="range"]::-webkit-slider-thumb,
:root[data-theme="light"] input[type="range"].marker-pop-slider::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(139, 61, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.189);
}
:root[data-theme="light"] .pn-range::-moz-range-track,
:root[data-theme="light"] .marker-slider[type="range"]::-moz-range-track {
    background: rgba(18, 18, 28, 0.105);
}
:root[data-theme="light"] .pn-label {
    color: rgba(18, 18, 28, 0.495);
}
:root[data-theme="light"] .pn-num {
    background: #ffffff;
    border: 1px solid rgba(18, 18, 28, 0.108);
    color: rgba(18, 18, 28, 0.45);
}
:root[data-theme="light"] .pn-num input {
    color: #1d1d1f;
}
:root[data-theme="light"] .pn-chip {
    border: 1px solid rgba(18, 18, 28, 0.072);
    background: rgba(18, 18, 28, 0.03);
    color: #1d1d1f;
}
:root[data-theme="light"] .pn-chip:hover {
    background: rgba(18, 18, 28, 0.068);
}
:root[data-theme="light"] .pn-chip.active {
    color: #1d1d1f;
}
:root[data-theme="light"] .pn-swatch {
    box-shadow: inset 0 0 0 1px rgba(18, 18, 28, 0.18);
}
:root[data-theme="light"] .pn-segmented {
    background: rgba(18, 18, 28, 0.045);
}
:root[data-theme="light"] .pn-segmented button {
    color: rgba(18, 18, 28, 0.648);
}
:root[data-theme="light"] .pn-segmented button:hover {
    color: #1d1d1f;
}
:root[data-theme="light"] .pn-segmented button.active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.147);
}
:root[data-theme="light"] .pn-value {
    color: #1d1d1f;
}
:root[data-theme="light"] .pn-shadow {
    border: 1px solid rgba(18, 18, 28, 0.072);
    background: rgba(18, 18, 28, 0.03);
    color: #1d1d1f;
}
:root[data-theme="light"] .pn-shadow:hover {
    background: rgba(18, 18, 28, 0.068);
}
:root[data-theme="light"] .pn-shadow.active {
    color: #1d1d1f;
}
:root[data-theme="light"] .pn-shadow-art[data-art="soft"] {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.231);
}
:root[data-theme="light"] .pn-shadow-art[data-art="lift"] {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.315);
}
:root[data-theme="light"] .pn-shadow-art[data-art="float"] {
    box-shadow: 0 10px 16px rgba(0, 0, 0, 0.294);
}
:root[data-theme="light"] .pn-shadow-art[data-art="hard"] {
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.378);
}
:root[data-theme="light"] #drawerFlip .flip-option-btn {
    border: 1px solid rgba(18, 18, 28, 0.072);
    background: rgba(18, 18, 28, 0.03);
    color: #1d1d1f;
}
:root[data-theme="light"] #drawerFlip .flip-option-btn:hover {
    color: #1d1d1f;
}
:root[data-theme="light"] .pn-effect {
    border: 1px solid rgba(18, 18, 28, 0.072);
    background: rgba(18, 18, 28, 0.03);
    color: #4c4f5d;
}
:root[data-theme="light"] .pn-effect:hover {
    background: rgba(18, 18, 28, 0.068);
    color: #1d1d1f;
}
:root[data-theme="light"] .pn-effect.active {
    color: #1d1d1f;
}
:root[data-theme="light"] .pn-effect-art[data-fx="shadow"] {
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.231);
}
:root[data-theme="light"] .pn-effect-art[data-fx="lift"] {
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.252);
}
:root[data-theme="light"] .pn-effect-art[data-fx="outline"] {
    color: #1d1d1f;
    -webkit-text-stroke: 4px #d8d9df;
}
:root[data-theme="light"] .pn-effect-art[data-fx="hollow"] {
    -webkit-text-stroke: 1.5px #d8d9df;
}
:root[data-theme="light"] .pn-effect-art[data-fx="neon"] {
    background: #ffffff;
    color: #1d1d1f;
}
:root[data-theme="light"] .pn-effect-art[data-fx="echo"] {
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.168), 6px 6px 0 rgba(0, 0, 0, 0.076);
}
:root[data-theme="light"] .pn-effect-controls {
    border-top: 1px solid rgba(18, 18, 28, 0.072);
}
:root[data-theme="light"] .pn-swatch--auto {
    color: #1d1d1f;
    border: 1px dashed rgba(18, 18, 28, 0.36);
}
:root[data-theme="light"] #fontSizePopover .font-size-preset {
    color: #1d1d1f;
}
:root[data-theme="light"] #fontSizePopover .font-size-preset:hover {
    background: rgba(18, 18, 28, 0.06);
}
:root[data-theme="light"] #fontSizePopover .font-size-preset.active {
    color: #1d1d1f;
}
:root[data-theme="light"] #drawerFonts .font-upload-banner {
    border-top: 1px solid rgba(18, 18, 28, 0.072) !important;
}
:root[data-theme="light"] #drawerFonts .font-upload-btn {
    border: 1px solid rgba(18, 18, 28, 0.126) !important;
    background: rgba(18, 18, 28, 0.03) !important;
    color: #1d1d1f !important;
}
:root[data-theme="light"] #drawerFonts .font-upload-btn:hover {
    color: #1d1d1f !important;
}
:root[data-theme="light"] #drawerFonts .font-upload-hint {
    color: rgba(18, 18, 28, 0.405);
}
@media (hover: hover) and (pointer: fine) {
    :root[data-theme="light"] .float-btn[data-tip]::after {
        background: #f2f2f5;
        border: 1px solid rgba(18, 18, 28, 0.108);
        color: #1d1d1f;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.189);
    }
}
:root[data-theme="light"] .pn-hint {
    color: rgba(18, 18, 28, 0.45);
}
:root[data-theme="light"] #contextBar .context-group:has(> .context-primary-action):last-child {
    background: #ffffff;
}
:root[data-theme="light"] .shortcuts-sheet {
    background: rgba(250, 250, 252, 0.6);
}
:root[data-theme="light"] .shortcuts-card {
    background: #f5f5f7;
    border: 1px solid rgba(18, 18, 28, 0.09);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.21);
    color: #1d1d1f;
}
:root[data-theme="light"] .shortcuts-head {
    border-bottom: 1px solid rgba(18, 18, 28, 0.072);
}
:root[data-theme="light"] .shortcuts-body h3 {
    color: rgba(18, 18, 28, 0.45);
}
:root[data-theme="light"] .shortcut-row {
    border-bottom: 1px solid rgba(18, 18, 28, 0.045);
}
:root[data-theme="light"] .shortcut-row .keys {
    color: rgba(18, 18, 28, 0.405);
}
:root[data-theme="light"] .shortcut-row kbd {
    color: #1d1d1f;
    background: rgba(18, 18, 28, 0.06);
    border: 1px solid rgba(18, 18, 28, 0.126);
}
:root[data-theme="light"] .file-menu-kbd {
    color: rgba(18, 18, 28, 0.63);
    background: rgba(18, 18, 28, 0.06);
    border: 1px solid rgba(18, 18, 28, 0.126);
}
:root[data-theme="light"] #drawerFonts .library-family-card .font-sample-preview {
    color: var(--text-muted, #585d6a);
}

/* ---- css/templates.css ---- */
:root[data-theme="light"] .marker-home,
:root[data-theme="light"] .marker-templates {
    color: #1d1d1f;
}
:root[data-theme="light"] .home-header,
:root[data-theme="light"] .templates-header {
    border-bottom: 1px solid rgba(18, 18, 28, 0.072);
}
:root[data-theme="light"] .home-side-nav {
    background: #ffffff;
    border-right: 1px solid rgba(18, 18, 28, 0.072);
}
:root[data-theme="light"] .home-rail-btn:hover {
    background: rgba(18, 18, 28, 0.045);
    color: #1d1d1f;
}
:root[data-theme="light"] .home-pill {
    border: 1px solid rgba(18, 18, 28, 0.144);
    color: #1d1d1f;
}
:root[data-theme="light"] .home-search-wrap {
    background: #f1f2f6;
}
:root[data-theme="light"] .home-search-wrap input {
    color: #1d1d1f;
}
:root[data-theme="light"] .home-chip {
    border: 1px solid rgba(18, 18, 28, 0.126);
    color: #1d1d1f;
}
:root[data-theme="light"] .home-section-title {
    color: #1d1d1f;
}
:root[data-theme="light"] .home-brand-row {
    background: rgba(18, 18, 28, 0.03);
    border: 1px solid rgba(18, 18, 28, 0.072);
}
:root[data-theme="light"] .home-brand-badge.starter {
    background: rgba(18, 18, 28, 0.06);
}
:root[data-theme="light"] .template-card {
    background: rgba(18, 18, 28, 0.03);
    border: 1px solid rgba(18, 18, 28, 0.072);
    color: #1d1d1f;
}
:root[data-theme="light"] .template-card img {
    background: #ffffff;
}
:root[data-theme="light"] .template-modal {
    background: rgba(0, 0, 0, 0.42);
}
:root[data-theme="light"] .load-error-card {
    background: #ffffff;
    border: 1px solid rgba(18, 18, 28, 0.09);
}
:root[data-theme="light"] .template-modal-card {
    background: #ffffff;
    border: 1px solid rgba(18, 18, 28, 0.09);
}
:root[data-theme="light"] .template-modal-img {
    background: #ffffff;
}
:root[data-theme="light"] .file-menu-btn {
    color: #1d1d1f;
}
:root[data-theme="light"] .file-menu-btn:hover {
    background: rgba(18, 18, 28, 0.06);
}
:root[data-theme="light"] .file-menu {
    background: #f5f5f8;
    border: 1px solid rgba(18, 18, 28, 0.09);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.21);
}
:root[data-theme="light"] .file-menu-item {
    color: #1d1d1f;
}
:root[data-theme="light"] .publish-panel {
    background: #ffffff;
    border-left: 1px solid rgba(18, 18, 28, 0.09);
}
:root[data-theme="light"] .publish-label {
    color: var(--text-secondary, #4f5563);
}
:root[data-theme="light"] .publish-select {
    background: #f5f5f8;
    border: 1px solid rgba(18, 18, 28, 0.126);
    color: #1d1d1f;
}

/* ---- css/scroll.css ---- */

/* ---- css/home-public.css ---- */
:root[data-theme="light"] .marker-home .home-brand-mark {
    color: #1d1d1f;
}
:root[data-theme="light"] .marker-home .home-signin {
    color: #66626b;
}
:root[data-theme="light"] .marker-home .home-quick-art i {
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.042);
}
:root[data-theme="light"] .marker-home .icon-custom i {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.029);
}
:root[data-theme="light"] .marker-home .home-search-wrap {
    color: #67606d;
}
:root[data-theme="light"] .marker-home .home-search-wrap input::placeholder {
    color: #67606d;
}
:root[data-theme="light"] .marker-home .home-recent-card {
    color: #635c66;
}
:root[data-theme="light"] .marker-home .home-format-icon.icon-x {
    background: rgba(0, 0, 0, 0.03);
}
:root[data-theme="light"] .marker-home .template-card-size {
    color: #5a5d6b;
}
:root[data-theme="light"] .marker-home .home-empty,
:root[data-theme="light"] .marker-home .home-note {
    color: #5d616f;
}

/* ---- css/vendor-wa.css ---- */

/* ---- hand-kept ---- */
/* Selected colour sample: white gap, dark ring (dark theme: dark gap, white ring). */
:root[data-theme="light"] .cp-swatch.is-selected { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1d1d1f; }
:root[data-theme="light"] .cp-swatch, :root[data-theme="light"] .color-swatch, :root[data-theme="light"] .pn-swatch,
:root[data-theme="light"] .swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); }