/* [next]/internal/font/google/ibm_plex_sans_cae6ec27.module.css [app-client] (css) */
@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/7fea77d1d19108bf-s.0xyeb7czu1stb.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/1bcd0e671759a44c-s.0vnh8.d8wxa2x.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/e15f58668ad64cb8-s.0~.8lt~vdqmc3.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/90c51ce8fb754fe8-s.00z~hoalba5dm.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/57215795b8570f5c-s.0vwgtotjdgnhr.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/03fc1b4a8d284b5e-s.p.09.f.n_ccld80.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/7fea77d1d19108bf-s.0xyeb7czu1stb.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/1bcd0e671759a44c-s.0vnh8.d8wxa2x.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/e15f58668ad64cb8-s.0~.8lt~vdqmc3.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/90c51ce8fb754fe8-s.00z~hoalba5dm.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/57215795b8570f5c-s.0vwgtotjdgnhr.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/03fc1b4a8d284b5e-s.p.09.f.n_ccld80.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/7fea77d1d19108bf-s.0xyeb7czu1stb.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/1bcd0e671759a44c-s.0vnh8.d8wxa2x.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/e15f58668ad64cb8-s.0~.8lt~vdqmc3.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/90c51ce8fb754fe8-s.00z~hoalba5dm.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/57215795b8570f5c-s.0vwgtotjdgnhr.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/03fc1b4a8d284b5e-s.p.09.f.n_ccld80.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/7fea77d1d19108bf-s.0xyeb7czu1stb.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/1bcd0e671759a44c-s.0vnh8.d8wxa2x.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/e15f58668ad64cb8-s.0~.8lt~vdqmc3.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/90c51ce8fb754fe8-s.00z~hoalba5dm.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/57215795b8570f5c-s.0vwgtotjdgnhr.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/03fc1b4a8d284b5e-s.p.09.f.n_ccld80.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/7fea77d1d19108bf-s.0xyeb7czu1stb.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/1bcd0e671759a44c-s.0vnh8.d8wxa2x.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/e15f58668ad64cb8-s.0~.8lt~vdqmc3.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/90c51ce8fb754fe8-s.00z~hoalba5dm.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/57215795b8570f5c-s.0vwgtotjdgnhr.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../media/03fc1b4a8d284b5e-s.p.09.f.n_ccld80.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Sans Fallback;
  src: local(Arial);
  ascent-override: 101.32%;
  descent-override: 27.18%;
  line-gap-override: 0.0%;
  size-adjust: 101.17%;
}

.ibm_plex_sans_cae6ec27-module__HLhFQa__className {
  font-family: IBM Plex Sans, IBM Plex Sans Fallback;
  font-style: normal;
}

.ibm_plex_sans_cae6ec27-module__HLhFQa__variable {
  --font-plex-sans: "IBM Plex Sans", "IBM Plex Sans Fallback";
}

/* [next]/internal/font/google/ibm_plex_serif_e644c946.module.css [app-client] (css) */
@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../media/7568d9fdf375fafc-s.0jlqdw8km95fk.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../media/dedc35c9c0cde9c7-s.0jzli~3uf.uza.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../media/d70ec756e41afea7-s.10r2ptfd8sv5u.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../media/1a65e46a4517d41b-s.0gle__oy2gjvj.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../media/baf76fecf0282555-s.p.02gr68w3vlzfv.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/b6a3ba25a63ffdc2-s.15ohl7e77t946.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/c46d9efd5b21dbaa-s.05wsi7y..0-zn.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/6308822089fd3411-s.0gpf~ipgyub9r.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/ff4d9f8b7294524b-s.07f3ikk4yi_cj.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../media/0e64cfb82a47c250-s.p.0ifiqyzdok2k..woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../media/79d9db89a59a83fa-s.00t13ga90sieb.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../media/11705a6cc6a37f59-s.0i8u8rm4-rxel.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../media/221a7ef2b9efbaad-s.15v8us89x~07t.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../media/730055c84ed23e9d-s.0c8d635zbe~1j.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../media/b02a479d288d97d4-s.p.06_fqbhf6hhmd.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../media/15c09482df909879-s.14blccx~bbv97.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../media/60bfa20ba60b1b5d-s.10-.hy4h~y_2m.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../media/6cf6eaf2cf9795dc-s.0ckzt6-otdf3v.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../media/3a7d6c5ab4b67497-s.0twqk6vvna2vh.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../media/374bfedbce52fcde-s.p.0iml90u_clsy3.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/d162c89b3544a19d-s.10wzmkvbs-q6y.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/01ab0124acb934ce-s.0-r2sjcflp_2g.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/07cd5ee061c575c4-s.0.yk-f-~g2n~i.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/293c8202cce5edd5-s.10tc08fj~yjft.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/370b336b43118e10-s.p.04mv4d3vqkns7.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/7f49c72243bdcede-s.02n~ovut9q.eh.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/a2797aaeec05c026-s.0heuz94e2xu-_.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/b3baf9375001c1f5-s.0pgow3hyiaf3k.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/9096fd5f49bfad97-s.0wnpx~ncnbwem.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/ef7be03ed7e60a63-s.p.14o~5h-2n.9~4.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/4bd7aa058bc96e4f-s.15bgzjziiwxor.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/0bd78c1bd4dfd4c7-s.131wlma90crvu.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/197b82234d448be7-s.15ua0zfd806~o.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/79050e547acec5d8-s.10902ftf82jy~.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/522cd826f2dc0be6-s.p.0n2990xzhyidg.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/be04ef6d3831928d-s.0o4ka-p93aw.5.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/690c9e92a92dc3ad-s.0hqurtsn5_f~5.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/bd1c8a16898c933f-s.0lp.-olc331pf.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/c63a115de3206da5-s.17ey1u~4-vz6b.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Serif;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/713e82fa9fe87496-s.p.08fj0~_8shb3u.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Serif Fallback;
  src: local(Times New Roman);
  ascent-override: 88.04%;
  descent-override: 23.62%;
  line-gap-override: 0.0%;
  size-adjust: 116.43%;
}

.ibm_plex_serif_e644c946-module__lFzuca__className {
  font-family: IBM Plex Serif, IBM Plex Serif Fallback;
}

.ibm_plex_serif_e644c946-module__lFzuca__variable {
  --font-plex-serif: "IBM Plex Serif", "IBM Plex Serif Fallback";
}

/* [next]/internal/font/google/ibm_plex_mono_3193b099.module.css [app-client] (css) */
@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/43fa41482cbf5ee5-s.0~btz4rqmgych.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/51430d34a2dfca2f-s.0.5.ezl_0i0ce.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/3b8d31b6d618cd27-s.06sjesqvmxwcw.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/7a2e4ff4560f5ac3-s.0cign27nilu.e.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../media/e9d5b069f63ab620-s.p.17tf8b5td.v-i.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/e390973e931a41c5-s.08hd0g.321csk.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/59b15b4bcd7b1eb5-s.0x08jh8vondwt.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/e532fa1b9921e1cd-s.0~wrfy7sm-h4g.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/2fe89d53234c61d4-s.0k_.i63k_i_qa.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/99e609270109b47d-s.p.16-z~2sp29ex6.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/5e05ae5b48faa55e-s.0m9hhkgdlzukj.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/a7afbb44bec2bb18-s.0juuwbcf7uz~t.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/02263ebadd758ea4-s.0qg7j5o.yrclm.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/68757d6cddeff913-s.0hkrq11n-dhos.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/effe91970fc4db64-s.p.07ig5l8azj~hy.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/6ff74e33ebd7bca3-s.0_n_qwbzcushi.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/1a69062cfe6f77f8-s.07r2ragk8ph~z.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/9a4838fcda0d1bca-s.0787d67~10694.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/2e95a7d252b9825a-s.0dgq8lqrj3gc_.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: IBM Plex Mono;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/23b7a97ae3b5c134-s.p.0o14nraug8u5s.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: IBM Plex Mono Fallback;
  src: local(Arial);
  ascent-override: 76.16%;
  descent-override: 20.43%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%;
}

.ibm_plex_mono_3193b099-module__B0yDrW__className {
  font-family: IBM Plex Mono, IBM Plex Mono Fallback;
  font-style: normal;
}

.ibm_plex_mono_3193b099-module__B0yDrW__variable {
  --font-plex-mono: "IBM Plex Mono", "IBM Plex Mono Fallback";
}

/* [next]/internal/font/google/inter_dfa45f92.module.css [app-client] (css) */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/2c55a0e60120577a-s.0bjc5tiuqdqro.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/9c72aa0f40e4eef8-s.0m6w47a4e5dy9.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/ad66f9afd8947f86-s.11u06r12fd6v_.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/5476f68d60460930-s.0wxq9webf.ew4.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/2bbe8d2671613f1f-s.067x_6k0k23tk.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/1bffadaabf893a1e-s.16ipb6fqu393i.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/2c55a0e60120577a-s.0bjc5tiuqdqro.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/9c72aa0f40e4eef8-s.0m6w47a4e5dy9.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/ad66f9afd8947f86-s.11u06r12fd6v_.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/5476f68d60460930-s.0wxq9webf.ew4.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/2bbe8d2671613f1f-s.067x_6k0k23tk.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/1bffadaabf893a1e-s.16ipb6fqu393i.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/2c55a0e60120577a-s.0bjc5tiuqdqro.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/9c72aa0f40e4eef8-s.0m6w47a4e5dy9.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/ad66f9afd8947f86-s.11u06r12fd6v_.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/5476f68d60460930-s.0wxq9webf.ew4.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/2bbe8d2671613f1f-s.067x_6k0k23tk.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/1bffadaabf893a1e-s.16ipb6fqu393i.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/83afe278b6a6bb3c-s.p.0q-301v4kxxnr.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter Fallback;
  src: local(Arial);
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0.0%;
  size-adjust: 107.12%;
}

.inter_dfa45f92-module__ig9XPW__className {
  font-family: Inter, Inter Fallback;
  font-style: normal;
}

.inter_dfa45f92-module__ig9XPW__variable {
  --font-inter: "Inter", "Inter Fallback";
}

/* [next]/internal/font/google/jetbrains_mono_cb316616.module.css [app-client] (css) */
@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/04c5164763c40239-s.0h-nw9_c8d~-_.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/26f284dcc38c84c0-s.10hk62x1-0d9n.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/7e7f32a39836f228-s.0bmyfaahigzds.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/fa39153a3fc630ba-s.0-0ft90hthv3~.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/6a5386fd6038edbe-s.16fk0g~ypa53a.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../media/051742360c26797e-s.p.0f97p8c3305p~.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/04c5164763c40239-s.0h-nw9_c8d~-_.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/26f284dcc38c84c0-s.10hk62x1-0d9n.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/7e7f32a39836f228-s.0bmyfaahigzds.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/fa39153a3fc630ba-s.0-0ft90hthv3~.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/6a5386fd6038edbe-s.16fk0g~ypa53a.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../media/051742360c26797e-s.p.0f97p8c3305p~.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/04c5164763c40239-s.0h-nw9_c8d~-_.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/26f284dcc38c84c0-s.10hk62x1-0d9n.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/7e7f32a39836f228-s.0bmyfaahigzds.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/fa39153a3fc630ba-s.0-0ft90hthv3~.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/6a5386fd6038edbe-s.16fk0g~ypa53a.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../media/051742360c26797e-s.p.0f97p8c3305p~.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: JetBrains Mono Fallback;
  src: local(Arial);
  ascent-override: 75.79%;
  descent-override: 22.29%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%;
}

.jetbrains_mono_cb316616-module__v6nbha__className {
  font-family: JetBrains Mono, JetBrains Mono Fallback;
  font-style: normal;
}

.jetbrains_mono_cb316616-module__v6nbha__variable {
  --font-jetbrains-mono: "JetBrains Mono", "JetBrains Mono Fallback";
}

/* [project]/src/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: var(--font-body);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-400: #ff6568;
    --color-red-500: #fb2c36;
    --color-amber-300: #ffd236;
    --color-amber-400: #fcbb00;
    --color-amber-500: #f99c00;
    --color-green-400: #05df72;
    --color-emerald-600: #009767;
    --color-teal-50: #f0fdfa;
    --color-teal-100: #cbfbf1;
    --color-teal-200: #96f7e4;
    --color-teal-300: #46ecd5;
    --color-teal-500: #00baa7;
    --color-teal-600: #009588;
    --color-teal-700: #00776e;
    --color-teal-800: #005f5a;
    --color-teal-900: #0b4f4a;
    --color-teal-950: #022f2e;
    --color-rose-50: #fff1f2;
    --color-rose-200: #ffccd3;
    --color-rose-300: #ffa2ae;
    --color-rose-600: #e70044;
    --color-rose-700: #c20039;
    --color-zinc-50: #fafafa;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-300: #d4d4d8;
    --color-zinc-400: #9f9fa9;
    --color-zinc-500: #71717b;
    --color-zinc-600: #52525c;
    --color-zinc-700: #3f3f46;
    --color-zinc-900: #18181b;
    --color-zinc-950: #09090b;
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-body);
    --default-mono-font-family: var(--font-mono);
    --color-builder-accent: var(--builder-accent);
    --color-builder-accent-hover: var(--builder-accent-hover);
    --color-builder-accent-active: var(--builder-accent-active);
    --color-builder-app: var(--builder-app);
    --color-builder-canvas: var(--builder-canvas);
    --color-builder-panel: var(--builder-panel);
    --color-builder-panel-deep: var(--builder-panel-deep);
    --color-builder-panel-raised: var(--builder-panel-raised);
    --color-builder-surface: var(--builder-surface);
    --color-builder-input: var(--builder-input);
    --color-builder-hover: var(--builder-hover);
    --color-builder-border: var(--builder-border);
    --color-builder-text: var(--builder-text);
    --color-builder-text-soft: var(--builder-text-soft);
    --color-builder-text-muted: var(--builder-text-muted);
    --color-builder-text-faint: var(--builder-text-faint);
    --color-builder-danger: var(--builder-danger);
    --color-builder-warning: var(--builder-warning);
    --color-builder-success: var(--builder-success);
    --color-builder-selection: var(--builder-selection);
    --color-builder-focus: var(--builder-focus);
    --color-builder-zone-free: #34d399;
    --color-builder-zone-dynamic: #a78bfa;
  }

  @supports (color: lab(0% 0 0)) {
    :root, :host {
      --color-red-400: lab(63.7053% 60.7449 31.3109);
      --color-red-500: lab(55.4814% 75.0732 48.8528);
      --color-amber-300: lab(86.4156% 6.13147 78.3961);
      --color-amber-400: lab(80.1641% 16.6016 99.2089);
      --color-amber-500: lab(72.7183% 31.8672 97.9407);
      --color-green-400: lab(78.503% -64.9265 39.7492);
      --color-emerald-600: lab(55.0481% -49.9246 15.93);
      --color-teal-50: lab(98.3189% -4.74921 -.111723);
      --color-teal-100: lab(95.1845% -17.4212 -.425434);
      --color-teal-200: lab(90.7612% -33.1343 -.542295);
      --color-teal-300: lab(84.8977% -48.1517 -1.3321);
      --color-teal-500: lab(67.3859% -49.0983 -2.63511);
      --color-teal-600: lab(55.0223% -41.0774 -3.90277);
      --color-teal-700: lab(44.4134% -33.1436 -4.22149);
      --color-teal-800: lab(35.5975% -26.6648 -4.34487);
      --color-teal-900: lab(29.506% -21.4706 -3.59886);
      --color-teal-950: lab(16.6371% -15.3183 -3.81732);
      --color-rose-50: lab(96.2369% 4.94152 1.28012);
      --color-rose-200: lab(86.806% 19.1909 4.07754);
      --color-rose-300: lab(76.6339% 38.3549 9.68834);
      --color-rose-600: lab(49.1882% 81.577 36.0311);
      --color-rose-700: lab(41.1651% 71.6251 30.3087);
      --color-zinc-50: lab(98.26% 0 0);
      --color-zinc-100: lab(96.1634% .0993013 -.364029);
      --color-zinc-200: lab(90.6853% .399202 -1.45452);
      --color-zinc-300: lab(84.9837% .601262 -2.17985);
      --color-zinc-400: lab(65.6464% 1.53494 -5.42429);
      --color-zinc-500: lab(47.8878% 1.65477 -5.77283);
      --color-zinc-600: lab(35.1166% 1.7821 -6.1173);
      --color-zinc-700: lab(26.8019% 1.35386 -4.68303);
      --color-zinc-900: lab(8.30603% .618212 -2.16573);
      --color-zinc-950: lab(2.51107% .242703 -.886115);
    }
  }
}

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

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

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

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

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

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

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

  b, strong {
    font-weight: bolder;
  }

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

  small {
    font-size: 80%;
  }

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

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

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

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

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

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

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

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

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

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

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

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

  ::placeholder {
    opacity: 1;
  }

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

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

  textarea {
    resize: vertical;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

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

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

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

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

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

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

@layer components;

@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }

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

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

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

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

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

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

  .inset-x-4 {
    inset-inline: calc(var(--spacing) * 4);
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .top-\[calc\(100\%\+8px\)\] {
    top: calc(100% + 8px);
  }

  .top-full {
    top: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .left-\[calc\(100\%\+4px\)\] {
    left: calc(100% + 4px);
  }

  .left-\[calc\(100\%\+6px\)\] {
    left: calc(100% + 6px);
  }

  .left-full {
    left: 100%;
  }

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

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

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

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

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

  .z-\[2\] {
    z-index: 2;
  }

  .z-\[90\] {
    z-index: 90;
  }

  .z-\[95\] {
    z-index: 95;
  }

  .z-\[100\] {
    z-index: 100;
  }

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

  .container {
    width: 100%;
  }

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

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

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

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

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

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

  .mx-0\.5 {
    margin-inline: calc(var(--spacing) * .5);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

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

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

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

  .table {
    display: table;
  }

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

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

  .aspect-\[4\/5\.8\] {
    aspect-ratio: 4 / 5.8;
  }

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

  .aspect-\[5\/3\.6\] {
    aspect-ratio: 5 / 3.6;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .h-dvh {
    height: 100dvh;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .min-h-full {
    min-height: 100%;
  }

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

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

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

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

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

  .w-2\/3 {
    width: 66.6667%;
  }

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

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-3\/4 {
    width: 75%;
  }

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

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

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

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

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

  .w-8\.5 {
    width: calc(var(--spacing) * 8.5);
  }

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

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

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

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

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-\[14px\] {
    width: 14px;
  }

  .w-\[15px\] {
    width: 15px;
  }

  .w-\[72px\] {
    width: 72px;
  }

  .w-\[240px\] {
    width: 240px;
  }

  .w-\[260px\] {
    width: 260px;
  }

  .w-\[340px\] {
    width: 340px;
  }

  .w-full {
    width: 100%;
  }

  .w-px {
    width: 1px;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-36 {
    max-width: calc(var(--spacing) * 36);
  }

  .max-w-44 {
    max-width: calc(var(--spacing) * 44);
  }

  .max-w-\[10ch\] {
    max-width: 10ch;
  }

  .max-w-\[220px\] {
    max-width: 220px;
  }

  .max-w-\[280px\] {
    max-width: 280px;
  }

  .max-w-\[480px\] {
    max-width: 480px;
  }

  .max-w-\[560px\] {
    max-width: 560px;
  }

  .max-w-\[720px\] {
    max-width: 720px;
  }

  .max-w-\[1600px\] {
    max-width: 1600px;
  }

  .max-w-\[min\(92vw\,520px\)\] {
    max-width: min(92vw, 520px);
  }

  .max-w-full {
    max-width: 100%;
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }

  .min-w-44 {
    min-width: calc(var(--spacing) * 44);
  }

  .min-w-\[48px\] {
    min-width: 48px;
  }

  .min-w-\[132px\] {
    min-width: 132px;
  }

  .min-w-\[140px\] {
    min-width: 140px;
  }

  .min-w-\[144px\] {
    min-width: 144px;
  }

  .min-w-\[160px\] {
    min-width: 160px;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink, .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .flex-grow, .grow {
    flex-grow: 1;
  }

  .origin-top-left {
    transform-origin: 0 0;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-3\.5 {
    --tw-translate-x: calc(var(--spacing) * 3.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .rotate-0 {
    rotate: none;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-col-resize {
    cursor: col-resize;
  }

  .cursor-crosshair {
    cursor: crosshair;
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-e-resize {
    cursor: e-resize;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-grabbing {
    cursor: grabbing;
  }

  .cursor-n-resize {
    cursor: n-resize;
  }

  .cursor-ne-resize {
    cursor: ne-resize;
  }

  .cursor-nw-resize {
    cursor: nw-resize;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-s-resize {
    cursor: s-resize;
  }

  .cursor-se-resize {
    cursor: se-resize;
  }

  .cursor-sw-resize {
    cursor: sw-resize;
  }

  .cursor-w-resize {
    cursor: w-resize;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .resize-y {
    resize: vertical;
  }

  .\[appearance\:textfield\] {
    appearance: textfield;
  }

  .appearance-none {
    appearance: none;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-cols-\[1fr_28px_1fr\] {
    grid-template-columns: 1fr 28px 1fr;
  }

  .grid-cols-\[22px_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: 22px minmax(0, 1fr) auto;
  }

  .grid-cols-\[28px_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .grid-cols-\[48px_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .grid-cols-\[60px_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: 60px minmax(0, 1fr) auto;
  }

  .grid-cols-\[104px_minmax\(0\,1fr\)\] {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .grid-cols-\[108px_minmax\(0\,1fr\)\] {
    grid-template-columns: 108px minmax(0, 1fr);
  }

  .grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

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

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

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

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

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

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

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

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

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

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

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

  :where(.space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  .self-start {
    align-self: flex-start;
  }

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

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-scroll {
    overflow: scroll;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overscroll-contain {
    overscroll-behavior: contain;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-\[3px\] {
    border-radius: 3px;
  }

  .rounded-\[9px\] {
    border-radius: 9px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-\[22px\] {
    border-radius: 22px;
  }

  .rounded-\[28px\] {
    border-radius: 28px;
  }

  .rounded-\[30px\] {
    border-radius: 30px;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-\[\#1d6cff\] {
    border-color: #1d6cff;
  }

  .border-\[\#1d6cff\]\/50 {
    border-color: #1d6cff80;
    border-color: lab(48.3679% 21.5432 -80.9181 / .5);
  }

  .border-black {
    border-color: var(--color-black);
  }

  .border-black\/5 {
    border-color: #0000000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/5 {
      border-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }

  .border-black\/10 {
    border-color: #0000001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/10 {
      border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }

  .border-builder-accent {
    border-color: var(--color-builder-accent);
  }

  .border-builder-accent\/20 {
    border-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-accent\/20 {
      border-color: color-mix(in oklab, var(--color-builder-accent) 20%, transparent);
    }
  }

  .border-builder-accent\/25 {
    border-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-accent\/25 {
      border-color: color-mix(in oklab, var(--color-builder-accent) 25%, transparent);
    }
  }

  .border-builder-accent\/30 {
    border-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-accent\/30 {
      border-color: color-mix(in oklab, var(--color-builder-accent) 30%, transparent);
    }
  }

  .border-builder-accent\/35 {
    border-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-accent\/35 {
      border-color: color-mix(in oklab, var(--color-builder-accent) 35%, transparent);
    }
  }

  .border-builder-accent\/40 {
    border-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-accent\/40 {
      border-color: color-mix(in oklab, var(--color-builder-accent) 40%, transparent);
    }
  }

  .border-builder-accent\/45 {
    border-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-accent\/45 {
      border-color: color-mix(in oklab, var(--color-builder-accent) 45%, transparent);
    }
  }

  .border-builder-accent\/55 {
    border-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-accent\/55 {
      border-color: color-mix(in oklab, var(--color-builder-accent) 55%, transparent);
    }
  }

  .border-builder-accent\/60 {
    border-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-accent\/60 {
      border-color: color-mix(in oklab, var(--color-builder-accent) 60%, transparent);
    }
  }

  .border-builder-accent\/80 {
    border-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-accent\/80 {
      border-color: color-mix(in oklab, var(--color-builder-accent) 80%, transparent);
    }
  }

  .border-builder-accent\/85 {
    border-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-accent\/85 {
      border-color: color-mix(in oklab, var(--color-builder-accent) 85%, transparent);
    }
  }

  .border-builder-accent\/90 {
    border-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-accent\/90 {
      border-color: color-mix(in oklab, var(--color-builder-accent) 90%, transparent);
    }
  }

  .border-builder-border {
    border-color: var(--color-builder-border);
  }

  .border-builder-border\/70 {
    border-color: var(--color-builder-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-border\/70 {
      border-color: color-mix(in oklab, var(--color-builder-border) 70%, transparent);
    }
  }

  .border-builder-border\/80 {
    border-color: var(--color-builder-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-border\/80 {
      border-color: color-mix(in oklab, var(--color-builder-border) 80%, transparent);
    }
  }

  .border-builder-danger\/25 {
    border-color: var(--color-builder-danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-danger\/25 {
      border-color: color-mix(in oklab, var(--color-builder-danger) 25%, transparent);
    }
  }

  .border-builder-danger\/35 {
    border-color: var(--color-builder-danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-danger\/35 {
      border-color: color-mix(in oklab, var(--color-builder-danger) 35%, transparent);
    }
  }

  .border-builder-focus {
    border-color: var(--color-builder-focus);
  }

  .border-builder-success\/20 {
    border-color: var(--color-builder-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-success\/20 {
      border-color: color-mix(in oklab, var(--color-builder-success) 20%, transparent);
    }
  }

  .border-builder-warning\/35 {
    border-color: var(--color-builder-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-warning\/35 {
      border-color: color-mix(in oklab, var(--color-builder-warning) 35%, transparent);
    }
  }

  .border-builder-warning\/40 {
    border-color: var(--color-builder-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-builder-warning\/40 {
      border-color: color-mix(in oklab, var(--color-builder-warning) 40%, transparent);
    }
  }

  .border-current\/15 {
    border-color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-current\/15 {
      border-color: color-mix(in oklab, currentcolor 15%, transparent);
    }
  }

  .border-red-500\/20 {
    border-color: #fb2c3633;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-red-500\/20 {
      border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }

  .border-rose-200 {
    border-color: var(--color-rose-200);
  }

  .border-rose-300 {
    border-color: var(--color-rose-300);
  }

  .border-teal-200 {
    border-color: var(--color-teal-200);
  }

  .border-teal-600 {
    border-color: var(--color-teal-600);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-white\/20 {
    border-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/20 {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .border-white\/24 {
    border-color: #ffffff3d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/24 {
      border-color: color-mix(in oklab, var(--color-white) 24%, transparent);
    }
  }

  .border-white\/25 {
    border-color: #ffffff40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/25 {
      border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }

  .border-white\/\[0\.1\] {
    border-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.1\] {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .border-white\/\[0\.06\] {
    border-color: #ffffff0f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.06\] {
      border-color: color-mix(in oklab, var(--color-white) 6%, transparent);
    }
  }

  .border-white\/\[0\.07\] {
    border-color: #ffffff12;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.07\] {
      border-color: color-mix(in oklab, var(--color-white) 7.0%, transparent);
    }
  }

  .border-white\/\[0\.08\] {
    border-color: #ffffff14;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.08\] {
      border-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }

  .border-white\/\[0\.12\] {
    border-color: #ffffff1f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/\[0\.12\] {
      border-color: color-mix(in oklab, var(--color-white) 12%, transparent);
    }
  }

  .border-zinc-100 {
    border-color: var(--color-zinc-100);
  }

  .border-zinc-200 {
    border-color: var(--color-zinc-200);
  }

  .border-zinc-200\/80 {
    border-color: #e4e4e7cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-zinc-200\/80 {
      border-color: color-mix(in oklab, var(--color-zinc-200) 80%, transparent);
    }
  }

  .border-zinc-300 {
    border-color: var(--color-zinc-300);
  }

  .bg-\[\#0a0a0a\] {
    background-color: #0a0a0a;
  }

  .bg-\[\#1a1a1a\] {
    background-color: #1a1a1a;
  }

  .bg-\[\#1d6cff\] {
    background-color: #1d6cff;
  }

  .bg-\[\#1d6cff\]\/20 {
    background-color: #1d6cff33;
    background-color: lab(48.3679% 21.5432 -80.9181 / .2);
  }

  .bg-\[\#1d6cff\]\/\[0\.18\] {
    background-color: #1d6cff2e;
    background-color: lab(48.3679% 21.5432 -80.9181 / .18);
  }

  .bg-\[\#1e1e1e\]\/95 {
    background-color: #1e1e1ef2;
    background-color: lab(11.2636% 0 .00000596046 / .95);
  }

  .bg-\[\#2a2a2a\] {
    background-color: #2a2a2a;
  }

  .bg-\[\#34d399\]\/15 {
    background-color: #34d39926;
    background-color: lab(75.6955% -52.188 16.7595 / .15);
  }

  .bg-\[\#111\] {
    background-color: #111;
  }

  .bg-\[\#252525\] {
    background-color: #252525;
  }

  .bg-\[\#a78bfa\]\/15 {
    background-color: #a78bfa26;
    background-color: lab(64.0812% 29.1806 -52.4362 / .15);
  }

  .bg-amber-400 {
    background-color: var(--color-amber-400);
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/10 {
    background-color: #0000001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/10 {
      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }

  .bg-black\/25 {
    background-color: #00000040;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/25 {
      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
    }
  }

  .bg-black\/30 {
    background-color: #0000004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/30 {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }

  .bg-black\/55 {
    background-color: #0000008c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/55 {
      background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
    }
  }

  .bg-builder-accent {
    background-color: var(--color-builder-accent);
  }

  .bg-builder-accent\/10 {
    background-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-accent\/10 {
      background-color: color-mix(in oklab, var(--color-builder-accent) 10%, transparent);
    }
  }

  .bg-builder-accent\/80 {
    background-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-accent\/80 {
      background-color: color-mix(in oklab, var(--color-builder-accent) 80%, transparent);
    }
  }

  .bg-builder-accent\/\[0\.03\] {
    background-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-accent\/\[0\.03\] {
      background-color: color-mix(in oklab, var(--color-builder-accent) 3%, transparent);
    }
  }

  .bg-builder-accent\/\[0\.04\] {
    background-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-accent\/\[0\.04\] {
      background-color: color-mix(in oklab, var(--color-builder-accent) 4%, transparent);
    }
  }

  .bg-builder-accent\/\[0\.06\] {
    background-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-accent\/\[0\.06\] {
      background-color: color-mix(in oklab, var(--color-builder-accent) 6%, transparent);
    }
  }

  .bg-builder-accent\/\[0\.08\] {
    background-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-accent\/\[0\.08\] {
      background-color: color-mix(in oklab, var(--color-builder-accent) 8%, transparent);
    }
  }

  .bg-builder-accent\/\[0\.012\] {
    background-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-accent\/\[0\.012\] {
      background-color: color-mix(in oklab, var(--color-builder-accent) 1.2%, transparent);
    }
  }

  .bg-builder-accent\/\[0\.14\] {
    background-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-accent\/\[0\.14\] {
      background-color: color-mix(in oklab, var(--color-builder-accent) 14.0%, transparent);
    }
  }

  .bg-builder-app {
    background-color: var(--color-builder-app);
  }

  .bg-builder-border {
    background-color: var(--color-builder-border);
  }

  .bg-builder-border\/70 {
    background-color: var(--color-builder-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-border\/70 {
      background-color: color-mix(in oklab, var(--color-builder-border) 70%, transparent);
    }
  }

  .bg-builder-canvas {
    background-color: var(--color-builder-canvas);
  }

  .bg-builder-danger {
    background-color: var(--color-builder-danger);
  }

  .bg-builder-danger\/10 {
    background-color: var(--color-builder-danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-danger\/10 {
      background-color: color-mix(in oklab, var(--color-builder-danger) 10%, transparent);
    }
  }

  .bg-builder-hover {
    background-color: var(--color-builder-hover);
  }

  .bg-builder-input {
    background-color: var(--color-builder-input);
  }

  .bg-builder-panel {
    background-color: var(--color-builder-panel);
  }

  .bg-builder-panel-deep {
    background-color: var(--color-builder-panel-deep);
  }

  .bg-builder-panel-deep\/90 {
    background-color: var(--color-builder-panel-deep);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-panel-deep\/90 {
      background-color: color-mix(in oklab, var(--color-builder-panel-deep) 90%, transparent);
    }
  }

  .bg-builder-panel-raised {
    background-color: var(--color-builder-panel-raised);
  }

  .bg-builder-panel-raised\/85 {
    background-color: var(--color-builder-panel-raised);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-panel-raised\/85 {
      background-color: color-mix(in oklab, var(--color-builder-panel-raised) 85%, transparent);
    }
  }

  .bg-builder-panel-raised\/88 {
    background-color: var(--color-builder-panel-raised);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-panel-raised\/88 {
      background-color: color-mix(in oklab, var(--color-builder-panel-raised) 88%, transparent);
    }
  }

  .bg-builder-panel-raised\/90 {
    background-color: var(--color-builder-panel-raised);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-panel-raised\/90 {
      background-color: color-mix(in oklab, var(--color-builder-panel-raised) 90%, transparent);
    }
  }

  .bg-builder-panel-raised\/92 {
    background-color: var(--color-builder-panel-raised);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-panel-raised\/92 {
      background-color: color-mix(in oklab, var(--color-builder-panel-raised) 92%, transparent);
    }
  }

  .bg-builder-panel-raised\/94 {
    background-color: var(--color-builder-panel-raised);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-panel-raised\/94 {
      background-color: color-mix(in oklab, var(--color-builder-panel-raised) 94%, transparent);
    }
  }

  .bg-builder-panel-raised\/95 {
    background-color: var(--color-builder-panel-raised);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-panel-raised\/95 {
      background-color: color-mix(in oklab, var(--color-builder-panel-raised) 95%, transparent);
    }
  }

  .bg-builder-panel-raised\/96 {
    background-color: var(--color-builder-panel-raised);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-panel-raised\/96 {
      background-color: color-mix(in oklab, var(--color-builder-panel-raised) 96%, transparent);
    }
  }

  .bg-builder-panel\/75 {
    background-color: var(--color-builder-panel);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-panel\/75 {
      background-color: color-mix(in oklab, var(--color-builder-panel) 75%, transparent);
    }
  }

  .bg-builder-panel\/90 {
    background-color: var(--color-builder-panel);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-panel\/90 {
      background-color: color-mix(in oklab, var(--color-builder-panel) 90%, transparent);
    }
  }

  .bg-builder-panel\/95 {
    background-color: var(--color-builder-panel);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-panel\/95 {
      background-color: color-mix(in oklab, var(--color-builder-panel) 95%, transparent);
    }
  }

  .bg-builder-selection {
    background-color: var(--color-builder-selection);
  }

  .bg-builder-success {
    background-color: var(--color-builder-success);
  }

  .bg-builder-success\/15 {
    background-color: var(--color-builder-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-success\/15 {
      background-color: color-mix(in oklab, var(--color-builder-success) 15%, transparent);
    }
  }

  .bg-builder-success\/\[0\.07\] {
    background-color: var(--color-builder-success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-success\/\[0\.07\] {
      background-color: color-mix(in oklab, var(--color-builder-success) 7.0%, transparent);
    }
  }

  .bg-builder-surface {
    background-color: var(--color-builder-surface);
  }

  .bg-builder-surface\/55 {
    background-color: var(--color-builder-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-surface\/55 {
      background-color: color-mix(in oklab, var(--color-builder-surface) 55%, transparent);
    }
  }

  .bg-builder-surface\/65 {
    background-color: var(--color-builder-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-surface\/65 {
      background-color: color-mix(in oklab, var(--color-builder-surface) 65%, transparent);
    }
  }

  .bg-builder-surface\/80 {
    background-color: var(--color-builder-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-surface\/80 {
      background-color: color-mix(in oklab, var(--color-builder-surface) 80%, transparent);
    }
  }

  .bg-builder-text-faint {
    background-color: var(--color-builder-text-faint);
  }

  .bg-builder-warning {
    background-color: var(--color-builder-warning);
  }

  .bg-builder-warning\/10 {
    background-color: var(--color-builder-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-warning\/10 {
      background-color: color-mix(in oklab, var(--color-builder-warning) 10%, transparent);
    }
  }

  .bg-builder-warning\/15 {
    background-color: var(--color-builder-warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-builder-warning\/15 {
      background-color: color-mix(in oklab, var(--color-builder-warning) 15%, transparent);
    }
  }

  .bg-current {
    background-color: currentColor;
  }

  .bg-current\/70 {
    background-color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-current\/70 {
      background-color: color-mix(in oklab, currentcolor 70%, transparent);
    }
  }

  .bg-green-400 {
    background-color: var(--color-green-400);
  }

  .bg-red-400 {
    background-color: var(--color-red-400);
  }

  .bg-red-500\/\[0\.04\] {
    background-color: #fb2c360a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-red-500\/\[0\.04\] {
      background-color: color-mix(in oklab, var(--color-red-500) 4%, transparent);
    }
  }

  .bg-rose-50 {
    background-color: var(--color-rose-50);
  }

  .bg-teal-50 {
    background-color: var(--color-teal-50);
  }

  .bg-teal-600 {
    background-color: var(--color-teal-600);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/5 {
    background-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/5 {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .bg-white\/6 {
    background-color: #ffffff0f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/6 {
      background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
    }
  }

  .bg-white\/20 {
    background-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/20 {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .bg-white\/70 {
    background-color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/70 {
      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .bg-white\/80 {
    background-color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/80 {
      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .bg-white\/90 {
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/90 {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .bg-white\/94 {
    background-color: #fffffff0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/94 {
      background-color: color-mix(in oklab, var(--color-white) 94%, transparent);
    }
  }

  .bg-white\/95 {
    background-color: #fffffff2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/95 {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
  }

  .bg-white\/\[0\.1\] {
    background-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.1\] {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .bg-white\/\[0\.04\] {
    background-color: #ffffff0a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.04\] {
      background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
    }
  }

  .bg-white\/\[0\.05\] {
    background-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.05\] {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .bg-white\/\[0\.06\] {
    background-color: #ffffff0f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.06\] {
      background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
    }
  }

  .bg-white\/\[0\.07\] {
    background-color: #ffffff12;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.07\] {
      background-color: color-mix(in oklab, var(--color-white) 7.0%, transparent);
    }
  }

  .bg-white\/\[0\.08\] {
    background-color: #ffffff14;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.08\] {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }

  .bg-white\/\[0\.12\] {
    background-color: #ffffff1f;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.12\] {
      background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
    }
  }

  .bg-zinc-50 {
    background-color: var(--color-zinc-50);
  }

  .bg-zinc-100 {
    background-color: var(--color-zinc-100);
  }

  .bg-zinc-950 {
    background-color: var(--color-zinc-950);
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .from-\[rgba\(5\,5\,5\,0\.96\)\] {
    --tw-gradient-from: #050505f5;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .via-\[rgba\(5\,5\,5\,0\.78\)\] {
    --tw-gradient-via: #050505c7;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .to-\[rgba\(5\,5\,5\,0\.32\)\] {
    --tw-gradient-to: #05050552;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .fill-current {
    fill: currentColor;
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

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

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

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

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

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

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

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

  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }

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

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

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

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

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

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

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

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

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

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

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

  .pt-3\.5 {
    padding-top: calc(var(--spacing) * 3.5);
  }

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

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

  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }

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

  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }

  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-3\.5 {
    padding-bottom: calc(var(--spacing) * 3.5);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-px {
    padding-bottom: 1px;
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

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

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[1\.9rem\] {
    font-size: 1.9rem;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[22px\] {
    font-size: 22px;
  }

  .text-\[28px\] {
    font-size: 28px;
  }

  .text-\[40px\] {
    font-size: 40px;
  }

  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }

  .leading-\[0\.96\] {
    --tw-leading: .96;
    line-height: .96;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-\[family\:var\(--font-display\)\] {
    --tw-font-weight: var(--font-display);
    font-weight: var(--font-display);
  }

  .font-\[family\:var\(--font-mono\)\] {
    --tw-font-weight: var(--font-mono);
    font-weight: var(--font-mono);
  }

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

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

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

  .tracking-\[0\.1em\] {
    --tw-tracking: .1em;
    letter-spacing: .1em;
  }

  .tracking-\[0\.12em\] {
    --tw-tracking: .12em;
    letter-spacing: .12em;
  }

  .tracking-\[0\.14em\] {
    --tw-tracking: .14em;
    letter-spacing: .14em;
  }

  .tracking-\[0\.16em\] {
    --tw-tracking: .16em;
    letter-spacing: .16em;
  }

  .tracking-\[0\.18em\] {
    --tw-tracking: .18em;
    letter-spacing: .18em;
  }

  .tracking-\[0\.22em\] {
    --tw-tracking: .22em;
    letter-spacing: .22em;
  }

  .tracking-\[0\.24em\] {
    --tw-tracking: .24em;
    letter-spacing: .24em;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .text-\[\#00c8ff\]\/50 {
    color: #00c8ff80;
    color: lab(74.4881% -28.1733 -39.4452 / .5);
  }

  .text-\[\#1d6cff\]\/60 {
    color: #1d6cff99;
    color: lab(48.3679% 21.5432 -80.9181 / .6);
  }

  .text-\[\#34d399\] {
    color: #34d399;
  }

  .text-\[\#a78bfa\] {
    color: #a78bfa;
  }

  .text-amber-300 {
    color: var(--color-amber-300);
  }

  .text-amber-400\/80 {
    color: #fcbb00cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-400\/80 {
      color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
    }
  }

  .text-amber-500 {
    color: var(--color-amber-500);
  }

  .text-black\/55 {
    color: #0000008c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-black\/55 {
      color: color-mix(in oklab, var(--color-black) 55%, transparent);
    }
  }

  .text-builder-accent {
    color: var(--color-builder-accent);
  }

  .text-builder-accent\/70 {
    color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-builder-accent\/70 {
      color: color-mix(in oklab, var(--color-builder-accent) 70%, transparent);
    }
  }

  .text-builder-accent\/80 {
    color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-builder-accent\/80 {
      color: color-mix(in oklab, var(--color-builder-accent) 80%, transparent);
    }
  }

  .text-builder-accent\/85 {
    color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-builder-accent\/85 {
      color: color-mix(in oklab, var(--color-builder-accent) 85%, transparent);
    }
  }

  .text-builder-danger {
    color: var(--color-builder-danger);
  }

  .text-builder-success {
    color: var(--color-builder-success);
  }

  .text-builder-text {
    color: var(--color-builder-text);
  }

  .text-builder-text-faint {
    color: var(--color-builder-text-faint);
  }

  .text-builder-text-muted {
    color: var(--color-builder-text-muted);
  }

  .text-builder-text-soft {
    color: var(--color-builder-text-soft);
  }

  .text-builder-warning {
    color: var(--color-builder-warning);
  }

  .text-builder-zone-dynamic {
    color: var(--color-builder-zone-dynamic);
  }

  .text-builder-zone-free {
    color: var(--color-builder-zone-free);
  }

  .text-current {
    color: currentColor;
  }

  .text-current\/55 {
    color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-current\/55 {
      color: color-mix(in oklab, currentcolor 55%, transparent);
    }
  }

  .text-current\/60 {
    color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-current\/60 {
      color: color-mix(in oklab, currentcolor 60%, transparent);
    }
  }

  .text-current\/70 {
    color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-current\/70 {
      color: color-mix(in oklab, currentcolor 70%, transparent);
    }
  }

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-red-400 {
    color: var(--color-red-400);
  }

  .text-red-400\/80 {
    color: #ff6568cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-400\/80 {
      color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
    }
  }

  .text-red-400\/85 {
    color: #ff6568d9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-red-400\/85 {
      color: color-mix(in oklab, var(--color-red-400) 85%, transparent);
    }
  }

  .text-rose-600 {
    color: var(--color-rose-600);
  }

  .text-rose-700 {
    color: var(--color-rose-700);
  }

  .text-teal-200 {
    color: var(--color-teal-200);
  }

  .text-teal-300 {
    color: var(--color-teal-300);
  }

  .text-teal-700 {
    color: var(--color-teal-700);
  }

  .text-teal-950 {
    color: var(--color-teal-950);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/20 {
    color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/20 {
      color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .text-white\/25 {
    color: #ffffff40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/25 {
      color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }

  .text-white\/30 {
    color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/30 {
      color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .text-white\/35 {
    color: #ffffff59;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/35 {
      color: color-mix(in oklab, var(--color-white) 35%, transparent);
    }
  }

  .text-white\/40 {
    color: #fff6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/40 {
      color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }

  .text-white\/45 {
    color: #ffffff73;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/45 {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }

  .text-white\/50 {
    color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/50 {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .text-white\/55 {
    color: #ffffff8c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/55 {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }

  .text-white\/60 {
    color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/60 {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .text-white\/65 {
    color: #ffffffa6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/65 {
      color: color-mix(in oklab, var(--color-white) 65%, transparent);
    }
  }

  .text-white\/70 {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .text-white\/72 {
    color: #ffffffb8;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/72 {
      color: color-mix(in oklab, var(--color-white) 72%, transparent);
    }
  }

  .text-white\/75 {
    color: #ffffffbf;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/75 {
      color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-white\/85 {
    color: #ffffffd9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/85 {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }

  .text-white\/90 {
    color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/90 {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .text-zinc-100\/90 {
    color: #f4f4f5e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-zinc-100\/90 {
      color: color-mix(in oklab, var(--color-zinc-100) 90%, transparent);
    }
  }

  .text-zinc-300 {
    color: var(--color-zinc-300);
  }

  .text-zinc-400 {
    color: var(--color-zinc-400);
  }

  .text-zinc-500 {
    color: var(--color-zinc-500);
  }

  .text-zinc-600 {
    color: var(--color-zinc-600);
  }

  .text-zinc-700 {
    color: var(--color-zinc-700);
  }

  .text-zinc-900 {
    color: var(--color-zinc-900);
  }

  .text-zinc-950 {
    color: var(--color-zinc-950);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .not-italic {
    font-style: normal;
  }

  .underline {
    text-decoration-line: underline;
  }

  .decoration-teal-500\/40 {
    text-decoration-color: #00baa766;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .decoration-teal-500\/40 {
      -webkit-text-decoration-color: color-mix(in oklab, var(--color-teal-500) 40%, transparent);
      text-decoration-color: color-mix(in oklab, var(--color-teal-500) 40%, transparent);
    }
  }

  .decoration-teal-500\/50 {
    text-decoration-color: #00baa780;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .decoration-teal-500\/50 {
      -webkit-text-decoration-color: color-mix(in oklab, var(--color-teal-500) 50%, transparent);
      text-decoration-color: color-mix(in oklab, var(--color-teal-500) 50%, transparent);
    }
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

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

  .accent-\[\#1d6cff\] {
    accent-color: #1d6cff;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-35 {
    opacity: .35;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-100 {
    opacity: 1;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_1px_var\(--builder-focus\)\] {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--builder-focus));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_0_4px_rgba\(29\,108\,255\,0\.22\)\] {
    --tw-shadow: 0 0 0 4px var(--tw-shadow-color, #1d6cff38);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_10px_24px_rgba\(15\,23\,42\,0\.08\)\] {
    --tw-shadow: 0 10px 24px var(--tw-shadow-color, #0f172a14);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_14px_30px_rgba\(15\,23\,42\,0\.08\)\] {
    --tw-shadow: 0 14px 30px var(--tw-shadow-color, #0f172a14);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_18px_40px_rgba\(15\,23\,42\,0\.14\)\] {
    --tw-shadow: 0 18px 40px var(--tw-shadow-color, #0f172a24);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_24px_70px_rgba\(15\,23\,42\,0\.2\)\] {
    --tw-shadow: 0 24px 70px var(--tw-shadow-color, #0f172a33);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_24px_90px_rgba\(0\,0\,0\,0\.20\)\] {
    --tw-shadow: 0 24px 90px var(--tw-shadow-color, #0003);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_24px_96px_rgba\(0\,0\,0\,0\.7\)\] {
    --tw-shadow: 0 24px 96px var(--tw-shadow-color, #000000b3);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_28px_80px_rgba\(15\,23\,42\,0\.18\)\] {
    --tw-shadow: 0 28px 80px var(--tw-shadow-color, #0f172a2e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.32\)\] {
    --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, #ffffff52);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-builder-panel {
    --tw-shadow: 0 24px 80px var(--tw-shadow-color, #00000047);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-builder-popover {
    --tw-shadow: 0 18px 50px var(--tw-shadow-color, #00000052);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring, .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-\[\#1d6cff\] {
    --tw-ring-color: #1d6cff;
  }

  .ring-\[\#1d6cff\]\/80 {
    --tw-ring-color: #1d6cffcc;
  }

  @supports (color: lab(0% 0 0)) {
    .ring-\[\#1d6cff\]\/80 {
      --tw-ring-color: lab(48.3679% 21.5432 -80.9181 / .8);
    }
  }

  .ring-builder-accent {
    --tw-ring-color: var(--color-builder-accent);
  }

  .ring-builder-accent\/15 {
    --tw-ring-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-builder-accent\/15 {
      --tw-ring-color: color-mix(in oklab, var(--color-builder-accent) 15%, transparent);
    }
  }

  .ring-builder-accent\/30 {
    --tw-ring-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-builder-accent\/30 {
      --tw-ring-color: color-mix(in oklab, var(--color-builder-accent) 30%, transparent);
    }
  }

  .ring-builder-accent\/35 {
    --tw-ring-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-builder-accent\/35 {
      --tw-ring-color: color-mix(in oklab, var(--color-builder-accent) 35%, transparent);
    }
  }

  .ring-builder-accent\/40 {
    --tw-ring-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-builder-accent\/40 {
      --tw-ring-color: color-mix(in oklab, var(--color-builder-accent) 40%, transparent);
    }
  }

  .ring-builder-accent\/80 {
    --tw-ring-color: var(--color-builder-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-builder-accent\/80 {
      --tw-ring-color: color-mix(in oklab, var(--color-builder-accent) 80%, transparent);
    }
  }

  .ring-builder-border {
    --tw-ring-color: var(--color-builder-border);
  }

  .ring-builder-focus\/35 {
    --tw-ring-color: var(--color-builder-focus);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-builder-focus\/35 {
      --tw-ring-color: color-mix(in oklab, var(--color-builder-focus) 35%, transparent);
    }
  }

  .ring-teal-200 {
    --tw-ring-color: var(--color-teal-200);
  }

  .ring-teal-300\/80 {
    --tw-ring-color: #46ecd5cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-teal-300\/80 {
      --tw-ring-color: color-mix(in oklab, var(--color-teal-300) 80%, transparent);
    }
  }

  .ring-offset-1 {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .ring-offset-2 {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .ring-offset-4 {
    --tw-ring-offset-width: 4px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .ring-offset-\[\#f7f4ed\] {
    --tw-ring-offset-color: #f7f4ed;
  }

  .ring-offset-builder-panel-raised {
    --tw-ring-offset-color: var(--color-builder-panel-raised);
  }

  .ring-offset-transparent {
    --tw-ring-offset-color: transparent;
  }

  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .outline-hidden {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

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

  .ring-inset {
    --tw-ring-inset: inset;
  }

  @media (hover: hover) {
    .group-hover\:bg-builder-accent\/50:is(:where(.group):hover *) {
      background-color: var(--color-builder-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-builder-accent\/50:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--color-builder-accent) 50%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .group-hover\:bg-teal-100:is(:where(.group):hover *) {
      background-color: var(--color-teal-100);
    }
  }

  @media (hover: hover) {
    .group-hover\:text-teal-700:is(:where(.group):hover *) {
      color: var(--color-teal-700);
    }
  }

  @media (hover: hover) {
    .group-hover\:text-white\/60:is(:where(.group):hover *) {
      color: #fff9;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:text-white\/60:is(:where(.group):hover *) {
        color: color-mix(in oklab, var(--color-white) 60%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .group-hover\:text-white\/85:is(:where(.group):hover *) {
      color: #ffffffd9;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:text-white\/85:is(:where(.group):hover *) {
        color: color-mix(in oklab, var(--color-white) 85%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .group-hover\:opacity-35:is(:where(.group):hover *) {
      opacity: .35;
    }
  }

  @media (hover: hover) {
    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  @media (hover: hover) {
    .group-hover\/menuitem\:visible:is(:where(.group\/menuitem):hover *) {
      visibility: visible;
    }
  }

  @media (hover: hover) {
    .group-hover\/menuitem\:opacity-100:is(:where(.group\/menuitem):hover *) {
      opacity: 1;
    }
  }

  .placeholder\:text-builder-text-faint::placeholder {
    color: var(--color-builder-text-faint);
  }

  .placeholder\:text-white\/25::placeholder {
    color: #ffffff40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-white\/25::placeholder {
      color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }

  .placeholder\:text-white\/30::placeholder {
    color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-white\/30::placeholder {
      color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .placeholder\:text-zinc-400::placeholder {
    color: var(--color-zinc-400);
  }

  .focus-within\:border-builder-focus:focus-within {
    border-color: var(--color-builder-focus);
  }

  .focus-within\:ring-1:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-2:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-\[\#1d6cff\]\/50:focus-within {
    --tw-ring-color: #1d6cff80;
  }

  @supports (color: lab(0% 0 0)) {
    .focus-within\:ring-\[\#1d6cff\]\/50:focus-within {
      --tw-ring-color: lab(48.3679% 21.5432 -80.9181 / .5);
    }
  }

  .focus-within\:ring-builder-focus:focus-within {
    --tw-ring-color: var(--color-builder-focus);
  }

  .focus-within\:ring-builder-focus\/20:focus-within {
    --tw-ring-color: var(--color-builder-focus);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-within\:ring-builder-focus\/20:focus-within {
      --tw-ring-color: color-mix(in oklab, var(--color-builder-focus) 20%, transparent);
    }
  }

  @media (hover: hover) {
    .hover\:border-\[\#1d6cff\]\/50:hover {
      border-color: #1d6cff80;
      border-color: lab(48.3679% 21.5432 -80.9181 / .5);
    }
  }

  @media (hover: hover) {
    .hover\:border-\[color\:var\(--accent\)\]:hover {
      border-color: var(--accent);
    }
  }

  @media (hover: hover) {
    .hover\:border-black:hover {
      border-color: var(--color-black);
    }
  }

  @media (hover: hover) {
    .hover\:border-builder-accent\/60:hover {
      border-color: var(--color-builder-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-builder-accent\/60:hover {
        border-color: color-mix(in oklab, var(--color-builder-accent) 60%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-rose-200:hover {
      border-color: var(--color-rose-200);
    }
  }

  @media (hover: hover) {
    .hover\:border-teal-200:hover {
      border-color: var(--color-teal-200);
    }
  }

  @media (hover: hover) {
    .hover\:border-teal-700:hover {
      border-color: var(--color-teal-700);
    }
  }

  @media (hover: hover) {
    .hover\:border-white\/25:hover {
      border-color: #ffffff40;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-white\/25:hover {
        border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:border-zinc-400:hover {
      border-color: var(--color-zinc-400);
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[\#1d6cff\]\/\[0\.06\]:hover {
      background-color: #1d6cff0f;
      background-color: lab(48.3679% 21.5432 -80.9181 / .06);
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[\#1d6cff\]\/\[0\.07\]:hover {
      background-color: #1d6cff12;
      background-color: lab(48.3679% 21.5432 -80.9181 / .07);
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[\#2d7aff\]:hover {
      background-color: #2d7aff;
    }
  }

  @media (hover: hover) {
    .hover\:bg-\[color\:var\(--accent\)\]:hover {
      background-color: var(--accent);
    }
  }

  @media (hover: hover) {
    .hover\:bg-black:hover {
      background-color: var(--color-black);
    }
  }

  @media (hover: hover) {
    .hover\:bg-builder-accent:hover {
      background-color: var(--color-builder-accent);
    }
  }

  @media (hover: hover) {
    .hover\:bg-builder-accent-hover:hover {
      background-color: var(--color-builder-accent-hover);
    }
  }

  @media (hover: hover) {
    .hover\:bg-builder-accent\/10:hover {
      background-color: var(--color-builder-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-builder-accent\/10:hover {
        background-color: color-mix(in oklab, var(--color-builder-accent) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-builder-accent\/20:hover {
      background-color: var(--color-builder-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-builder-accent\/20:hover {
        background-color: color-mix(in oklab, var(--color-builder-accent) 20%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-builder-danger\/10:hover {
      background-color: var(--color-builder-danger);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-builder-danger\/10:hover {
        background-color: color-mix(in oklab, var(--color-builder-danger) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-builder-danger\/20:hover {
      background-color: var(--color-builder-danger);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-builder-danger\/20:hover {
        background-color: color-mix(in oklab, var(--color-builder-danger) 20%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-builder-hover:hover {
      background-color: var(--color-builder-hover);
    }
  }

  @media (hover: hover) {
    .hover\:bg-builder-hover\/80:hover {
      background-color: var(--color-builder-hover);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-builder-hover\/80:hover {
        background-color: color-mix(in oklab, var(--color-builder-hover) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-builder-warning\/10:hover {
      background-color: var(--color-builder-warning);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-builder-warning\/10:hover {
        background-color: color-mix(in oklab, var(--color-builder-warning) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-rose-50:hover {
      background-color: var(--color-rose-50);
    }
  }

  @media (hover: hover) {
    .hover\:bg-teal-50:hover {
      background-color: var(--color-teal-50);
    }
  }

  @media (hover: hover) {
    .hover\:bg-teal-700:hover {
      background-color: var(--color-teal-700);
    }
  }

  @media (hover: hover) {
    .hover\:bg-white\/\[0\.1\]:hover {
      background-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.1\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-white\/\[0\.05\]:hover {
      background-color: #ffffff0d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.05\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-white\/\[0\.06\]:hover {
      background-color: #ffffff0f;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.06\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-white\/\[0\.07\]:hover {
      background-color: #ffffff12;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.07\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 7.0%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-white\/\[0\.08\]:hover {
      background-color: #ffffff14;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[0\.08\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:bg-zinc-50:hover {
      background-color: var(--color-zinc-50);
    }
  }

  @media (hover: hover) {
    .hover\:text-\[color\:var\(--accent-fg\)\]:hover {
      color: var(--accent-fg);
    }
  }

  @media (hover: hover) {
    .hover\:text-builder-accent:hover {
      color: var(--color-builder-accent);
    }
  }

  @media (hover: hover) {
    .hover\:text-builder-danger:hover {
      color: var(--color-builder-danger);
    }
  }

  @media (hover: hover) {
    .hover\:text-builder-text:hover {
      color: var(--color-builder-text);
    }
  }

  @media (hover: hover) {
    .hover\:text-builder-text-soft:hover {
      color: var(--color-builder-text-soft);
    }
  }

  @media (hover: hover) {
    .hover\:text-rose-600:hover {
      color: var(--color-rose-600);
    }
  }

  @media (hover: hover) {
    .hover\:text-rose-700:hover {
      color: var(--color-rose-700);
    }
  }

  @media (hover: hover) {
    .hover\:text-teal-700:hover {
      color: var(--color-teal-700);
    }
  }

  @media (hover: hover) {
    .hover\:text-teal-800:hover {
      color: var(--color-teal-800);
    }
  }

  @media (hover: hover) {
    .hover\:text-teal-900:hover {
      color: var(--color-teal-900);
    }
  }

  @media (hover: hover) {
    .hover\:text-white:hover {
      color: var(--color-white);
    }
  }

  @media (hover: hover) {
    .hover\:text-white\/55:hover {
      color: #ffffff8c;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-white\/55:hover {
        color: color-mix(in oklab, var(--color-white) 55%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:text-white\/60:hover {
      color: #fff9;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-white\/60:hover {
        color: color-mix(in oklab, var(--color-white) 60%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:text-white\/65:hover {
      color: #ffffffa6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-white\/65:hover {
        color: color-mix(in oklab, var(--color-white) 65%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:text-white\/70:hover {
      color: #ffffffb3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-white\/70:hover {
        color: color-mix(in oklab, var(--color-white) 70%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:text-white\/75:hover {
      color: #ffffffbf;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-white\/75:hover {
        color: color-mix(in oklab, var(--color-white) 75%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:text-white\/80:hover {
      color: #fffc;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-white\/80:hover {
        color: color-mix(in oklab, var(--color-white) 80%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:text-zinc-950:hover {
      color: var(--color-zinc-950);
    }
  }

  @media (hover: hover) {
    .hover\:opacity-100:hover {
      opacity: 1;
    }
  }

  @media (hover: hover) {
    .hover\:ring-2:hover {
      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  @media (hover: hover) {
    .hover\:ring-zinc-300\/65:hover {
      --tw-ring-color: #d4d4d8a6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:ring-zinc-300\/65:hover {
        --tw-ring-color: color-mix(in oklab, var(--color-zinc-300) 65%, transparent);
      }
    }
  }

  @media (hover: hover) {
    .hover\:ring-offset-4:hover {
      --tw-ring-offset-width: 4px;
      --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }

  @media (hover: hover) {
    .hover\:ring-offset-\[\#f7f4ed\]:hover {
      --tw-ring-offset-color: #f7f4ed;
    }
  }

  .focus\:border-builder-focus:focus {
    border-color: var(--color-builder-focus);
  }

  .focus\:border-teal-300:focus {
    border-color: var(--color-teal-300);
  }

  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-\[\#1d6cff\]\/40:focus {
    --tw-ring-color: #1d6cff66;
  }

  @supports (color: lab(0% 0 0)) {
    .focus\:ring-\[\#1d6cff\]\/40:focus {
      --tw-ring-color: lab(48.3679% 21.5432 -80.9181 / .4);
    }
  }

  .focus\:ring-\[\#1d6cff\]\/50:focus {
    --tw-ring-color: #1d6cff80;
  }

  @supports (color: lab(0% 0 0)) {
    .focus\:ring-\[\#1d6cff\]\/50:focus {
      --tw-ring-color: lab(48.3679% 21.5432 -80.9181 / .5);
    }
  }

  .focus\:ring-builder-focus:focus {
    --tw-ring-color: var(--color-builder-focus);
  }

  .focus\:ring-builder-focus\/20:focus {
    --tw-ring-color: var(--color-builder-focus);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-builder-focus\/20:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-builder-focus) 20%, transparent);
    }
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .active\:bg-\[\#1560e8\]:active {
    background-color: #1560e8;
  }

  .active\:bg-builder-accent-active:active {
    background-color: var(--color-builder-accent-active);
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:bg-builder-surface:disabled {
    background-color: var(--color-builder-surface);
  }

  .disabled\:text-builder-text-faint:disabled {
    color: var(--color-builder-text-faint);
  }

  .disabled\:opacity-30:disabled {
    opacity: .3;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  @media (min-width: 40rem) {
    .sm\:block {
      display: block;
    }
  }

  @media (min-width: 40rem) {
    .sm\:flex {
      display: flex;
    }
  }

  @media (min-width: 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 40rem) {
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 40rem) {
    .sm\:flex-row {
      flex-direction: row;
    }
  }

  @media (min-width: 40rem) {
    .sm\:items-center {
      align-items: center;
    }
  }

  @media (min-width: 40rem) {
    .sm\:justify-between {
      justify-content: space-between;
    }
  }

  @media (min-width: 40rem) {
    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }

  @media (min-width: 48rem) {
    .md\:flex {
      display: flex;
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-\[72px_minmax\(0\,1fr\)_120px\] {
      grid-template-columns: 72px minmax(0, 1fr) 120px;
    }
  }

  @media (min-width: 48rem) {
    .md\:flex-row {
      flex-direction: row;
    }
  }

  @media (min-width: 48rem) {
    .md\:items-center {
      align-items: center;
    }
  }

  @media (min-width: 48rem) {
    .md\:items-end {
      align-items: flex-end;
    }
  }

  @media (min-width: 48rem) {
    .md\:justify-between {
      justify-content: space-between;
    }
  }

  @media (min-width: 48rem) {
    .md\:p-7 {
      padding: calc(var(--spacing) * 7);
    }
  }

  @media (min-width: 48rem) {
    .md\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
  }

  @media (min-width: 48rem) {
    .md\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }
  }

  @media (min-width: 48rem) {
    .md\:text-\[48px\] {
      font-size: 48px;
    }
  }

  @media (min-width: 64rem) {
    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }

  @media (min-width: 64rem) {
    .lg\:block {
      display: block;
    }
  }

  @media (min-width: 64rem) {
    .lg\:inline {
      display: inline;
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .xl\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }

  @media (min-width: 80rem) {
    .xl\:col-span-3 {
      grid-column: span 3 / span 3;
    }
  }

  @media (min-width: 80rem) {
    .xl\:block {
      display: block;
    }
  }

  @media (min-width: 80rem) {
    .xl\:flex {
      display: flex;
    }
  }

  @media (min-width: 80rem) {
    .xl\:inline {
      display: inline;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[0\.95fr_1\.05fr\] {
      grid-template-columns: .95fr 1.05fr;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[1\.1fr_0\.9fr\] {
      grid-template-columns: 1.1fr .9fr;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[1\.2fr_0\.8fr\] {
      grid-template-columns: 1.2fr .8fr;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[1\.4fr_repeat\(4\,minmax\(0\,1fr\)\)_auto\] {
      grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)) auto;
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[220px_minmax\(0\,1fr\)\] {
      grid-template-columns: 220px minmax(0, 1fr);
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[270px_minmax\(0\,1fr\)\] {
      grid-template-columns: 270px minmax(0, 1fr);
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[280px_220px_minmax\(0\,1fr\)\] {
      grid-template-columns: 280px 220px minmax(0, 1fr);
    }
  }

  @media (min-width: 80rem) {
    .xl\:grid-cols-\[minmax\(0\,1\.02fr\)_minmax\(320px\,0\.98fr\)\] {
      grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr);
    }
  }

  .\[\&_a\]\:border-zinc-200 a {
    border-color: var(--color-zinc-200);
  }

  .\[\&_a\]\:bg-white a {
    background-color: var(--color-white);
  }

  .\[\&_a\]\:text-zinc-700 a {
    color: var(--color-zinc-700);
  }

  @media (hover: hover) {
    .\[\&_a\]\:hover\:border-teal-200 a:hover {
      border-color: var(--color-teal-200);
    }
  }

  @media (hover: hover) {
    .\[\&_a\]\:hover\:text-teal-700 a:hover {
      color: var(--color-teal-700);
    }
  }
}

:root, [data-builder-theme="dark"] {
  --builder-accent: #0ea5ff;
  --builder-accent-hover: #38bdf8;
  --builder-accent-active: #0284c7;
  --builder-app: #050505;
  --builder-canvas: #080808;
  --builder-panel: #111;
  --builder-panel-deep: #0b0b0b;
  --builder-panel-raised: #1f1f1f;
  --builder-surface: #171717;
  --builder-input: #2a2a2a;
  --builder-canvas-dot: #ffffff0b;
  --builder-hover: #ffffff13;
  --builder-border: #ffffff14;
  --builder-text: #ffffffeb;
  --builder-text-soft: #ffffffb8;
  --builder-text-muted: #ffffff7a;
  --builder-text-faint: #ffffff47;
  --builder-danger: #fb7185;
  --builder-warning: #fbbf24;
  --builder-success: #34d399;
  --builder-selection: #0ea5ff2e;
  --builder-focus: #0ea5ff8c;
}

[data-builder-theme="light"] {
  --builder-accent: #0b8fe8;
  --builder-accent-hover: #0284c7;
  --builder-accent-active: #0369a1;
  --builder-app: #f1f1ee;
  --builder-canvas: #eeeeeb;
  --builder-panel: #fbfbf8;
  --builder-panel-deep: #f3f3ef;
  --builder-panel-raised: #fff;
  --builder-surface: #f7f7f4;
  --builder-input: #ededeb;
  --builder-canvas-dot: #0000000e;
  --builder-hover: #0000000e;
  --builder-border: #00000018;
  --builder-text: #141414eb;
  --builder-text-soft: #141414ad;
  --builder-text-muted: #1414147a;
  --builder-text-faint: #14141447;
  --builder-danger: #e11d48;
  --builder-warning: #b45309;
  --builder-success: #059669;
  --builder-selection: #0b8fe829;
  --builder-focus: #0b8fe875;
}

:root {
  --background: #f4f1e7;
  --foreground: #09090b;
  --card: #fffdf7;
  --surface: #fffdf7;
  --surface-soft: #ede9dd;
  --surface-alt: #f6f3ea;
  --border: #101010;
  --border-soft: #cfc8ba;
  --font-display: var(--font-plex-serif),
    "Iowan Old Style",
    "Palatino Linotype",
    serif;
  --font-body: var(--font-plex-sans),
    "Segoe UI",
    Arial,
    sans-serif;
  --font-mono: var(--font-plex-mono),
    "SFMono-Regular",
    Consolas,
    monospace;
  --radius-panel: 0px;
  --radius-card: 0px;
  --radius-soft: 0px;
  --shadow-panel: none;
  --shadow-soft: none;
  --accent: #0f766e;
  --accent-hover: #115e59;
  --accent-subtle: #dff3ee;
  --amber-subtle: #fdf2cf;
  --amber-border: #b45309;
  --amber-text: #7c2d12;
  --neutral-subtle: #f1ede3;
  --neutral-text: #57534e;
  --success-subtle: #e5f6ef;
  --success-border: #14532d;
  --success-text: #14532d;
  --warning-subtle: #fef3c7;
  --warning-border: #92400e;
  --warning-text: #78350f;
  --danger-subtle: #fee2e2;
  --danger-border: #b91c1c;
  --danger-text: #991b1b;
  --motion-instant: 60ms;
  --motion-quick: .12s;
  --motion-default: .18s;
  --motion-enter: .26s;
  --motion-slow: .4s;
  --motion-drift: 8s;
  --ease-standard: cubic-bezier(.2, 0, .38, .9);
  --ease-enter: cubic-bezier(0, 0, .38, .9);
  --ease-exit: cubic-bezier(.2, 0, 1, .9);
  --ease-press: cubic-bezier(.34, 1.56, .64, 1);
  --ease-release: cubic-bezier(0, 0, .2, 1);
  --ease-shimmer: linear;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

  to {
    opacity: 1;
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-up {
  animation: fade-up        var(--motion-enter) var(--ease-enter) both;
}

.animate-fade-in {
  animation: fade-in         var(--motion-enter) var(--ease-enter) both;
}

.animate-slide-left {
  animation: slide-in-left   var(--motion-enter) var(--ease-enter) both;
}

.animate-stagger-1 {
  animation-delay: 40ms;
}

.animate-stagger-2 {
  animation-delay: 80ms;
}

.animate-stagger-3 {
  animation-delay: .12s;
}

.animate-stagger-4 {
  animation-delay: .16s;
}

.animate-stagger-5 {
  animation-delay: .2s;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up, .animate-fade-in, .animate-slide-left {
    animation: linear both fade-in;
  }

  .animate-stagger-1, .animate-stagger-2, .animate-stagger-3, .animate-stagger-4, .animate-stagger-5 {
    animation-delay: 0s;
  }
}

* {
  box-sizing: border-box;
  min-width: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--background);
}

body {
  background: linear-gradient(#09090b0a 1px, transparent 1px),
    linear-gradient(90deg, #09090b0a 1px, transparent 1px),
    linear-gradient(180deg, #faf8f1 0%, var(--background) 100%);
  color: var(--foreground);
  font-family: var(--font-body), sans-serif;
  letter-spacing: -.01em;
  background-size: 100% 28px, 28px 100%, 100% 100%;
}

a, button, input, select, textarea {
  transition: color            var(--motion-quick) var(--ease-standard),
    background-color var(--motion-quick) var(--ease-standard),
    border-color     var(--motion-quick) var(--ease-standard),
    opacity          var(--motion-quick) var(--ease-standard);
  font: inherit;
}

::selection {
  color: var(--foreground);
  background: #0f766e38;
}

body.collectit-brutalist :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display), serif;
  letter-spacing: -.03em;
}

body.collectit-brutalist :is(code, pre) {
  font-family: var(--font-mono), monospace;
}

body.collectit-brutalist [class*="rounded"] {
  border-radius: 0 !important;
}

body.collectit-brutalist .card-sheen, body.collectit-brutalist .card-sheen:after {
  display: none;
}

.ui-panel, .ui-hero, .ui-card, .ui-card-soft, .ui-media, .ui-chip, .ui-control, .live-panel, .live-card, .live-card-soft, .live-control, .live-chip, .live-kpi {
  box-shadow: none;
  border-radius: 0;
}

.ui-panel {
  border: 2px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  color: var(--foreground);
}

.ui-hero {
  border: 2px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  color: var(--foreground);
  border-radius: 0;
}

.ui-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--foreground);
}

.ui-card-soft {
  border: 1px solid var(--border);
  border-radius: var(--radius-soft);
  background: var(--surface-soft);
  color: var(--neutral-text);
}

.ui-media {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  border-radius: 0;
  overflow: hidden;
}

.ui-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0;
}

.ui-control {
  border: 2px solid var(--border);
  border-radius: var(--radius-soft);
  background: var(--surface);
  color: var(--foreground);
}

.ui-button {
  border-radius: 0;
}

.ui-pressable {
  transition: color            var(--motion-quick)   var(--ease-standard),
    background-color var(--motion-quick)   var(--ease-standard),
    border-color     var(--motion-quick)   var(--ease-standard),
    transform        var(--motion-default) var(--ease-release);
}

.ui-pressable:active {
  transition: color            var(--motion-quick)   var(--ease-standard),
    background-color var(--motion-quick)   var(--ease-standard),
    border-color     var(--motion-quick)   var(--ease-standard),
    transform        var(--motion-instant) var(--ease-press);
  transform: translateY(1px)scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  .ui-pressable:active {
    transform: none;
  }
}

.live-shell {
  min-height: 100vh;
  color: var(--foreground);
  background: none;
}

.live-top-frame {
  border-bottom: 2px solid var(--border);
  background: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .live-top-frame {
    background: color-mix(in srgb, var(--surface) 96%, white 4%);
  }
}

.live-top-frame {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: none;
}

.live-panel {
  border: 2px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .live-panel {
    background: color-mix(in srgb, var(--surface) 96%, white 4%);
  }
}

.live-panel {
  box-shadow: var(--shadow-panel);
}

.live-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .live-card {
    background: color-mix(in srgb, var(--surface) 98%, white 2%);
  }
}

.live-card {
  box-shadow: var(--shadow-soft);
}

.live-card-soft {
  border: 1px solid var(--border);
  border-radius: var(--radius-soft);
  background: var(--surface-soft);
}

@supports (color: color-mix(in lab, red, red)) {
  .live-card-soft {
    background: color-mix(in srgb, var(--surface-soft) 92%, white 8%);
  }
}

@keyframes skeleton-sweep {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

.live-skeleton {
  background-color: var(--surface-soft);
  background-image: linear-gradient(105deg,
    var(--surface-soft)                                    0%,
    var(--surface-soft)                                   35%,
    var(--surface-alt)                                    50%,
    var(--surface-alt) 55%,
    var(--surface-soft)                                   65%,
    var(--surface-soft)                                  100%);
}

@supports (color: color-mix(in lab, red, red)) {
  .live-skeleton {
    background-image: linear-gradient(105deg,
    var(--surface-soft)                                    0%,
    var(--surface-soft)                                   35%,
    var(--surface-alt)                                    50%,
    color-mix(in srgb, var(--surface-alt) 80%, white 20%) 55%,
    var(--surface-soft)                                   65%,
    var(--surface-soft)                                  100%);
  }
}

.live-skeleton {
  animation: skeleton-sweep 1.6s var(--ease-shimmer) infinite;
  background-repeat: no-repeat;
  background-size: 800px 100%;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .live-skeleton {
    background-image: none;
    animation: none;
  }
}

.live-control {
  border: 2px solid var(--border);
  border-radius: var(--radius-soft);
  background: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .live-control {
    background: color-mix(in srgb, var(--surface) 97%, white 3%);
  }
}

.live-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 0;
}

.live-segmented {
  border: 2px solid var(--border);
  background: var(--surface-soft);
  border-radius: 0;
  align-items: center;
  gap: 0;
  padding: 0;
  display: inline-flex;
}

.live-segmented-item {
  border-left: 1px solid var(--border);
  font-family: var(--font-mono), monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--neutral-text);
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
}

.live-segmented-item:first-child {
  border-left: 0;
}

.live-segmented-item[data-active="true"] {
  background: var(--foreground);
  color: #fff;
  box-shadow: none;
}

.live-segmented-item {
  transition: color            var(--motion-quick)   var(--ease-standard),
    background-color var(--motion-quick)   var(--ease-standard),
    transform        var(--motion-default) var(--ease-release);
}

.live-segmented-item:active {
  transition-duration: var(--motion-instant);
  transition-timing-function: var(--ease-press);
  transform: translateY(1px)scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  .live-segmented-item:active {
    transform: none;
  }
}

.live-kpi {
  border: 2px solid var(--border);
  border-radius: var(--radius-soft);
  background: var(--surface);
  padding: 16px 18px;
}

.live-hero {
  border: 2px solid var(--border);
  box-shadow: none;
  background: #050505;
  border-radius: 0;
}

.live-divider {
  border-color: var(--border);
}

.live-badge {
  border: 1px solid var(--border);
  min-height: 28px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
}

.live-badge[data-tone="neutral"] {
  background: var(--surface);
  color: var(--neutral-text);
}

.live-badge[data-tone="owned"], .live-badge[data-tone="cheapest"] {
  background: var(--success-subtle);
  border-color: var(--success-border);
  color: var(--success-text);
}

.live-badge[data-tone="missing"] {
  background: var(--surface-soft);
  border-color: var(--border);
  color: var(--neutral-text);
}

.live-badge[data-tone="premium"], .live-badge[data-tone="high-value"] {
  background: var(--amber-subtle);
  border-color: var(--amber-border);
  color: var(--amber-text);
}

.live-badge[data-tone="accent"], .live-badge[data-tone="game"], .live-badge[data-tone="current"] {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

@keyframes live-pulse-ring {
  0% {
    box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 50%, transparent 50%);
    transform: scale(.92);
  }

  65% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%,  transparent 100%);
    transform: scale(1);
  }

  100% {
    box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 0%,  transparent 100%);
    transform: scale(.92);
  }
}

.live-pulse {
  background: var(--accent);
  width: 8px;
  height: 8px;
  animation: live-pulse-ring 2.4s var(--ease-standard) infinite;
  vertical-align: middle;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.live-pulse--sm {
  width: 6px;
  height: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .live-pulse {
    animation: none;
  }
}

@keyframes badge-flash {
  0% {
    filter: brightness(2) saturate(.4);
  }

  40% {
    filter: brightness(1.6) saturate(.6);
  }

  100% {
    filter: brightness() saturate();
  }
}

.live-badge--flash {
  animation: badge-flash .48s var(--ease-exit) both;
}

@media (prefers-reduced-motion: reduce) {
  .live-badge--flash {
    animation: none;
  }
}

.live-insight {
  border: 1px solid;
  border-left-width: 4px;
  border-radius: 0;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  display: flex;
}

.live-insight[data-tone="neutral"] {
  background: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .live-insight[data-tone="neutral"] {
    background: color-mix(in srgb, var(--surface) 84%, white 16%);
  }
}

.live-insight[data-tone="neutral"] {
  color: var(--neutral-text);
}

.live-insight[data-tone="owned"], .live-insight[data-tone="cheapest"] {
  background: var(--success-subtle);
  color: var(--success-text);
}

.live-insight[data-tone="premium"], .live-insight[data-tone="high-value"] {
  background: var(--amber-subtle);
  color: var(--amber-text);
}

.live-callout {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--neutral-text);
  padding: 16px;
}

.live-callout[data-tone="neutral"] {
  background: var(--surface);
  color: var(--neutral-text);
}

.live-callout[data-tone="owned"], .live-callout[data-tone="cheapest"] {
  background: var(--success-subtle);
  color: var(--success-text);
}

.live-callout[data-tone="premium"], .live-callout[data-tone="high-value"] {
  background: var(--amber-subtle);
  color: var(--amber-text);
}

.shell-frame {
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
}

.shell-brand {
  border-right: 2px solid var(--border);
  color: var(--foreground);
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  text-decoration: none;
  display: inline-flex;
}

.shell-brand:hover {
  background: var(--foreground);
  color: #fff;
}

.shell-brand-mark {
  border: 2px solid var(--foreground);
  background: var(--foreground);
  color: #fff;
  width: 34px;
  height: 34px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
}

.shell-brand-copy {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.shell-brand-title {
  font-family: var(--font-display), serif;
  letter-spacing: -.04em;
  font-size: 18px;
  font-weight: 600;
}

.shell-brand-subtitle {
  font-family: var(--font-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--foreground);
  font-size: 10px;
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-brand-subtitle {
    color: color-mix(in srgb, var(--foreground) 55%, white 45%);
  }
}

.shell-nav {
  scrollbar-width: none;
  align-items: stretch;
  display: flex;
  overflow-x: auto;
}

.shell-nav::-webkit-scrollbar {
  display: none;
}

.shell-nav-link {
  border-right: 1px solid var(--border);
  align-items: center;
  min-height: 56px;
  padding: 0 16px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-nav-link {
    border-right: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
  }
}

.shell-nav-link {
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-nav-link {
    color: color-mix(in srgb, var(--foreground) 62%, white 38%);
  }
}

.shell-nav-link {
  white-space: nowrap;
  text-decoration: none;
}

.shell-nav-link:hover, .shell-nav-link[data-active="true"] {
  background: var(--foreground);
  color: #fff;
}

.shell-nav-link[data-active="true"] {
  border-bottom: 3px solid var(--accent);
}

.shell-utility {
  align-items: stretch;
  margin-left: auto;
  display: flex;
}

.shell-search-form {
  border-left: 1px solid var(--border);
  align-items: stretch;
  min-width: min(100%, 360px);
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-search-form {
    border-left: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
  }
}

.shell-search-field {
  align-items: center;
  min-width: min(100%, 360px);
  display: flex;
  position: relative;
}

.shell-search-field input {
  width: 100%;
  height: 56px;
  color: var(--foreground);
  background: none;
  border: 0;
  outline: 0;
  padding: 0 18px 0 42px;
  font-size: 13px;
}

.shell-search-field svg {
  width: 15px;
  height: 15px;
  color: var(--foreground);
  position: absolute;
  left: 16px;
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-search-field svg {
    color: color-mix(in srgb, var(--foreground) 38%, white 62%);
  }
}

.shell-search-field input::placeholder {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-search-field input::placeholder {
    color: color-mix(in srgb, var(--foreground) 34%, white 66%);
  }
}

.shell-utility-button, .shell-account-button {
  border-left: 1px solid var(--border);
  justify-content: center;
  align-items: center;
  min-height: 56px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-utility-button, .shell-account-button {
    border-left: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
  }
}

.shell-utility-button, .shell-account-button {
  color: var(--foreground);
  background: none;
}

.shell-utility-button {
  min-width: 56px;
}

.shell-account-button {
  text-align: left;
  gap: 10px;
  padding: 0 16px;
}

.shell-auth-link {
  text-decoration: none;
}

.shell-account-button:hover, .shell-utility-button:hover {
  background: var(--foreground);
  color: #fff;
}

.shell-account-avatar {
  width: 30px;
  height: 30px;
  font-family: var(--font-display), serif;
  border: 1px solid;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.shell-account-copy {
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.shell-account-name {
  font-size: 12px;
  font-weight: 600;
}

.shell-account-handle {
  font-family: var(--font-mono), monospace;
  color: currentColor;
  font-size: 10px;
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-account-handle {
    color: color-mix(in srgb, currentColor 62%, white 38%);
  }
}

.shell-account-backdrop {
  z-index: 70;
  background: none;
  position: fixed;
  inset: 0;
}

.shell-account-panel {
  border: 2px solid var(--border);
  background: var(--surface);
  width: 304px;
  box-shadow: 0 18px 38px #0f172a1f;
}

.shell-account-panel-desktop {
  position: fixed;
}

.shell-account-panel-head {
  border-bottom: 2px solid var(--border);
  padding: 18px;
}

.shell-account-panel-title {
  font-family: var(--font-display), serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.shell-account-panel-subtitle {
  font-family: var(--font-mono), monospace;
  color: var(--neutral-text);
  margin-top: 4px;
  font-size: 11px;
}

.shell-account-panel-link {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-account-panel-link {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
  }
}

.shell-account-panel-link {
  color: var(--foreground);
  background: var(--surface);
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
}

.shell-account-panel-link:hover, .shell-account-panel-action:hover {
  background: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-account-panel-link:hover, .shell-account-panel-action:hover {
    background: color-mix(in srgb, var(--foreground) 4%, white 96%);
  }
}

.shell-account-panel-link:hover, .shell-account-panel-action:hover {
  color: var(--foreground);
}

.shell-account-panel-action {
  width: 100%;
  color: var(--danger-text);
  background: none;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.4;
  display: flex;
}

.shell-account-panel-mobile {
  border-top: 2px solid var(--border);
  width: auto;
  box-shadow: none;
  border-left: 0;
  border-right: 0;
  position: fixed;
  left: 0;
  right: 0;
}

.shell-auth-mobile-link {
  border-left: 1px solid var(--border);
  justify-content: center;
  align-items: center;
  min-width: 88px;
  min-height: 56px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-auth-mobile-link {
    border-left: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
  }
}

.shell-auth-mobile-link {
  font-family: var(--font-mono), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--foreground);
  padding: 0 14px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.shell-auth-mobile-link:hover {
  background: var(--foreground);
  color: #fff;
}

.shell-status-badge {
  border-left: 2px solid var(--border);
  background: var(--foreground);
  font-family: var(--font-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  align-items: center;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
}

.shell-breadcrumb-bar {
  border-top: 1px solid var(--border);
  align-items: center;
  min-height: 34px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-breadcrumb-bar {
    border-top: 1px solid color-mix(in srgb, var(--border) 14%, white 86%);
  }
}

.shell-breadcrumb-bar {
  background: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-breadcrumb-bar {
    background: color-mix(in srgb, var(--surface) 98%, white 2%);
  }
}

.shell-breadcrumb-bar {
  padding: 0 18px;
}

.shell-breadcrumb-list {
  font-family: var(--font-mono), monospace;
  color: var(--foreground);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-breadcrumb-list {
    color: color-mix(in srgb, var(--foreground) 44%, white 56%);
  }
}

.shell-breadcrumb-link {
  color: inherit;
  text-decoration: none;
}

.shell-breadcrumb-link:hover, .shell-breadcrumb-current {
  color: var(--foreground);
}

.collectit-auth-shell {
  width: 100%;
}

.collectit-auth-shell .cl-rootBox, .collectit-auth-shell .cl-cardBox, .collectit-auth-shell .cl-card, .collectit-auth-shell .cl-main {
  width: 100%;
  max-width: none;
  box-shadow: none;
}

.collectit-auth-shell .cl-main {
  gap: 0;
  width: 100%;
  display: block;
}

.collectit-auth-shell .cl-form {
  justify-items: stretch;
  gap: 18px;
  width: 100%;
  max-width: none;
  display: grid;
}

.collectit-auth-shell .cl-formField, .collectit-auth-shell .cl-formFieldRow, .collectit-auth-shell .cl-footer, .collectit-auth-shell .cl-footerAction, .collectit-auth-shell .cl-formButtonPrimary, .collectit-auth-shell .cl-alert, .collectit-auth-shell .cl-formResendCodeLink {
  width: 100%;
  max-width: none;
}

.collectit-auth-shell .cl-formFieldRow {
  gap: 12px;
  display: grid;
}

.collectit-auth-shell .cl-formField {
  gap: 0;
  display: grid;
}

.collectit-auth-shell .cl-formFieldLabel {
  font-family: var(--font-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--neutral-text);
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
}

.collectit-auth-shell .cl-formFieldInput, .collectit-auth-shell .cl-otpCodeFieldInput {
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 0;
  width: 100%;
  min-width: 0;
  min-height: 48px;
}

@supports (color: color-mix(in lab, red, red)) {
  .collectit-auth-shell .cl-formFieldInput, .collectit-auth-shell .cl-otpCodeFieldInput {
    background: color-mix(in srgb, var(--surface) 97%, white 3%);
  }
}

.collectit-auth-shell .cl-formFieldInput, .collectit-auth-shell .cl-otpCodeFieldInput {
  box-shadow: none;
  color: var(--foreground);
}

.collectit-auth-shell .cl-otpCodeFieldInput {
  width: 48px;
}

.collectit-auth-shell .cl-formButtonPrimary {
  border: 2px solid var(--border);
  background: var(--foreground);
  width: 100%;
  min-height: 48px;
  box-shadow: none;
  font-family: var(--font-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
}

.collectit-auth-shell .cl-formButtonPrimary:hover {
  background: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .collectit-auth-shell .cl-formButtonPrimary:hover {
    background: color-mix(in srgb, var(--foreground) 88%, white 12%);
  }
}

.collectit-auth-shell .cl-alert {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  border-left-width: 4px;
}

@supports (color: color-mix(in lab, red, red)) {
  .collectit-auth-shell .cl-alert {
    background: color-mix(in srgb, var(--surface-soft) 88%, white 12%);
  }
}

.collectit-auth-shell .cl-alert {
  padding: 12px 14px;
}

.collectit-auth-shell .cl-dividerRow {
  margin: 20px 0;
}

.collectit-auth-shell .cl-dividerLine {
  background: var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .collectit-auth-shell .cl-dividerLine {
    background: color-mix(in srgb, var(--border) 18%, white 82%);
  }
}

.collectit-auth-shell .cl-dividerText, .collectit-auth-shell .cl-footerActionText, .collectit-auth-shell .cl-identityPreviewText, .collectit-auth-shell .cl-alertText, .collectit-auth-shell .cl-formResendCodeLink {
  font-size: 13px;
}

.collectit-auth-shell .cl-footer {
  border-top: 1px solid var(--border);
  margin-top: 20px;
}

@supports (color: color-mix(in lab, red, red)) {
  .collectit-auth-shell .cl-footer {
    border-top: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
  }
}

.collectit-auth-shell .cl-footer {
  background: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .collectit-auth-shell .cl-footer {
    background: color-mix(in srgb, var(--surface) 98%, white 2%);
  }
}

.collectit-auth-shell .cl-footer {
  padding-top: 16px;
}

.collectit-auth-shell .cl-footerAction {
  justify-content: flex-start;
  align-items: center;
  padding-top: 0;
  display: flex;
}

.collectit-auth-shell .cl-footerActionLink, .collectit-auth-shell .cl-formResendCodeLink {
  color: var(--accent);
  font-weight: 600;
}

.collectit-auth-shell .cl-formFieldInput::placeholder {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .collectit-auth-shell .cl-formFieldInput::placeholder {
    color: color-mix(in srgb, var(--foreground) 34%, white 66%);
  }
}

.collectit-auth-shell .cl-footerActionLink:hover, .collectit-auth-shell .cl-formResendCodeLink:hover {
  color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .collectit-auth-shell .cl-footerActionLink:hover, .collectit-auth-shell .cl-formResendCodeLink:hover {
    color: color-mix(in srgb, var(--accent) 82%, black 18%);
  }
}

.shell-footer {
  border-top: 2px solid var(--border);
  background: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .shell-footer {
    background: color-mix(in srgb, var(--surface) 96%, white 4%);
  }
}

.shell-footer-copy {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
}

.brutal-card-link {
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.brutal-card-link:hover, .brutal-list-row:hover {
  background: var(--foreground);
  color: #fff;
  border-color: var(--foreground);
}

.brutal-card-link:hover :is(.text-zinc-950, .text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-600, .text-zinc-500, .text-zinc-400), .brutal-list-row:hover :is(.text-zinc-950, .text-zinc-900, .text-zinc-800, .text-zinc-700, .text-zinc-600, .text-zinc-500, .text-zinc-400) {
  color: #fff !important;
}

.brutal-card-link:hover :is(.text-teal-700, .text-teal-800), .brutal-list-row:hover :is(.text-teal-700, .text-teal-800) {
  color: #9ee7da !important;
}

.brutal-card-link:hover :is(.bg-zinc-50, .bg-white, .bg-white\/90, .bg-\[color\:var\(--surface-soft\)\]), .brutal-list-row:hover :is(.bg-zinc-50, .bg-white, .bg-white\/90, .bg-\[color\:var\(--surface-soft\)\]) {
  background: #ffffff14 !important;
}

.brutal-card-link:hover :is(.border-zinc-200, .border-zinc-200\/80, .border-zinc-200\/85, .border-\[color\:var\(--border-soft\)\]), .brutal-list-row:hover :is(.border-zinc-200, .border-zinc-200\/80, .border-zinc-200\/85, .border-\[color\:var\(--border-soft\)\]) {
  border-color: #ffffff38 !important;
}

.brutal-card-link:hover .brutal-card-image, .brutal-list-row:hover .brutal-card-image {
  transform: scale(1.02);
  filter: grayscale(0) saturate() !important;
}

.brutal-data-table {
  border-collapse: collapse;
  border: 2px solid var(--border);
  background: var(--surface);
  width: 100%;
}

.brutal-data-table th, .brutal-data-table td {
  border-top: 1px solid var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .brutal-data-table th, .brutal-data-table td {
    border-top: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
  }
}

.brutal-data-table th, .brutal-data-table td {
  text-align: left;
  padding: 12px 16px;
}

.brutal-data-table thead th {
  font-family: var(--font-mono), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 600;
}

.brutal-context-trigger {
  border: 1px solid var(--border);
  background: var(--surface);
  width: 34px;
  height: 34px;
  color: var(--foreground);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.brutal-context-trigger:hover {
  background: var(--foreground);
  color: #fff;
}

.brutal-context-panel {
  border: 2px solid var(--border);
  background: var(--surface);
  width: 260px;
  box-shadow: none;
}

.brutal-context-panel-head {
  border-bottom: 2px solid var(--border);
  padding: 14px 16px;
}

.brutal-context-panel-title {
  font-family: var(--font-display), serif;
  color: var(--foreground);
  font-size: 16px;
  font-weight: 600;
}

.brutal-context-panel-subtitle {
  font-family: var(--font-mono), monospace;
  color: var(--neutral-text);
  margin-top: 4px;
  font-size: 10px;
}

.brutal-context-item {
  border-top: 1px solid var(--border);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .brutal-context-item {
    border-top: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
  }
}

.brutal-context-item {
  color: var(--foreground);
  text-align: left;
  background: none;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.brutal-context-item:first-of-type {
  border-top: 0;
}

.brutal-context-item[data-tone="primary"] {
  border-left: 4px solid var(--foreground);
  padding-left: 12px;
  font-weight: 600;
}

.brutal-context-item[data-tone="danger"] {
  color: var(--danger-text);
}

.brutal-context-item:hover {
  background: var(--foreground);
  color: #fff;
}

.admin-modal-overlay {
  z-index: 90;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: linear-gradient(#f8f6eed1, #f8f6eee6), #0f17242e;
  justify-content: center;
  align-items: center;
  padding: 28px;
  display: flex;
  position: fixed;
  inset: 0;
}

.admin-modal {
  border: 2px solid var(--border);
  background: linear-gradient(#f8f6eefa, #fffffff5);
  flex-direction: column;
  width: min(1180px, 100%);
  min-height: min(720px, 86vh);
  max-height: min(92vh, 920px);
  display: flex;
  overflow: hidden;
  box-shadow: 0 32px 100px #0f172a2e, inset 0 1px #ffffffa6;
}

.admin-modal-header {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-modal-header {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 22%, white 78%);
  }
}

.admin-modal-header {
  background: linear-gradient(#ffffffe0, #f8f6eed1);
  padding: 24px 28px 20px;
}

.admin-modal-close {
  border: 1px solid var(--border);
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-modal-close {
    border: 1px solid color-mix(in srgb, var(--border) 26%, white 74%);
  }
}

.admin-modal-close {
  color: var(--neutral-text);
  background: #ffffffe0;
  transition: background .16s, border-color .16s, color .16s;
}

.admin-modal-close:hover {
  border-color: var(--danger-text);
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-modal-close:hover {
    border-color: color-mix(in srgb, var(--danger-text) 30%, white 70%);
  }
}

.admin-modal-close:hover {
  color: var(--danger-text);
  background: #fff;
}

.admin-modal-preview {
  border-right: 1px solid var(--border);
  min-width: 0;
  overflow-y: auto;
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-modal-preview {
    border-right: 1px solid color-mix(in srgb, var(--border) 20%, white 80%);
  }
}

.admin-modal-preview {
  background: linear-gradient(#f5f1e7e6, #ffffffc7);
  padding: 28px;
}

.admin-modal-sidebar {
  border-right: 1px solid var(--border);
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  display: flex;
  overflow-y: auto;
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-modal-sidebar {
    border-right: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
  }
}

.admin-modal-sidebar {
  background: #ffffff9e;
  padding: 24px 16px;
}

.admin-modal-sidebar-button {
  width: 100%;
  min-height: 46px;
  color: var(--neutral-text);
  text-align: left;
  border-left: 3px solid #0000;
  align-items: center;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
  transition: background .16s, border-color .16s, color .16s;
  display: flex;
}

.admin-modal-sidebar-button:hover, .admin-modal-sidebar-button[data-active="true"] {
  border-left-color: var(--accent);
  color: var(--foreground);
  background: #ffffffe0;
}

.admin-modal-content {
  min-width: 0;
  padding: 28px;
  overflow-y: auto;
}

.admin-modal-field-label {
  font-family: var(--font-mono), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--neutral-text);
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  display: block;
}

.admin-modal-field {
  border: 1px solid var(--border);
  width: 100%;
  min-height: 48px;
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-modal-field {
    border: 1px solid color-mix(in srgb, var(--border) 24%, white 76%);
  }
}

.admin-modal-field {
  color: var(--foreground);
  background: #fffffff0;
  outline: none;
  padding: 0 14px;
  font-size: 15px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}

.admin-modal-field:focus {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-modal-field:focus {
    border-color: color-mix(in srgb, var(--accent) 55%, white 45%);
  }
}

.admin-modal-field:focus {
  box-shadow: 0 0 0 3px #2cb1a41f;
}

.admin-modal-field-help {
  color: var(--neutral-text);
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
}

.admin-modal-checkbox {
  border: 1px solid var(--border);
  gap: 12px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-modal-checkbox {
    border: 1px solid color-mix(in srgb, var(--border) 20%, white 80%);
  }
}

.admin-modal-checkbox {
  background: #ffffffe6;
  padding: 16px;
}

.admin-modal-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  margin-top: 2px;
}

.admin-modal-checkbox-copy {
  flex-direction: column;
  display: flex;
}

.admin-modal-footer {
  border-top: 1px solid var(--border);
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-modal-footer {
    border-top: 1px solid color-mix(in srgb, var(--border) 22%, white 78%);
  }
}

.admin-modal-footer {
  background: #ffffffd1;
  padding: 18px 28px;
}

.admin-modal-secondary-button, .admin-modal-primary-button {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  transition: background .16s, border-color .16s, color .16s, opacity .16s;
}

.admin-modal-secondary-button {
  border: 1px solid var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-modal-secondary-button {
    border: 1px solid color-mix(in srgb, var(--border) 22%, white 78%);
  }
}

.admin-modal-secondary-button {
  color: var(--foreground);
  background: #fffffff5;
}

.admin-modal-secondary-button:hover {
  background: #fff;
}

.admin-modal-primary-button {
  border: 2px solid var(--foreground);
  background: var(--foreground);
  color: #fff;
}

.admin-modal-primary-button:hover {
  background: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .admin-modal-primary-button:hover {
    background: color-mix(in srgb, var(--foreground) 92%, white 8%);
  }
}

.admin-modal-primary-button:disabled, .admin-modal-secondary-button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.admin-edit-trigger {
  border: 2px solid var(--border);
  background: var(--accent-subtle);
  min-height: 40px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.admin-edit-trigger:hover {
  background: var(--foreground);
  border-color: var(--foreground);
  color: #fff;
}

@media (max-width: 900px) {
  .admin-modal-overlay {
    padding: 16px;
  }

  .admin-modal {
    min-height: auto;
    max-height: 94vh;
  }

  .admin-modal-header, .admin-modal-content, .admin-modal-preview, .admin-modal-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .admin-modal-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    overflow: auto hidden;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .admin-modal-sidebar {
      border-bottom: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
    }
  }

  .admin-modal-sidebar {
    padding: 12px 18px;
  }

  .admin-modal-sidebar-button {
    border-bottom: 2px solid #0000;
    border-left: 0;
    min-width: max-content;
    min-height: 40px;
    padding: 0 10px 8px;
  }

  .admin-modal-sidebar-button:hover, .admin-modal-sidebar-button[data-active="true"] {
    border-left-color: #0000;
    border-bottom-color: var(--accent);
  }

  .admin-modal-preview {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .admin-modal-preview {
      border-bottom: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
    }
  }

  .admin-modal-footer {
    flex-wrap: wrap;
  }

  .shell-frame {
    border-left: 0;
    border-right: 0;
  }

  .shell-search-form {
    border-left: 0;
    border-top: 1px solid var(--border);
    min-width: 100%;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shell-search-form {
      border-top: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
    }
  }

  .shell-nav-link {
    min-height: 48px;
  }

  .shell-account-copy {
    display: none;
  }

  .shell-brand {
    padding: 0 14px;
  }

  .shell-breadcrumb-bar {
    padding: 6px 14px;
  }
}

.concept-shell {
  background: linear-gradient(#ffffffe6, #f7f5edf2), linear-gradient(#0f172a0a 1px, #0000 1px) 0 0 / 32px 32px, linear-gradient(90deg, #0f172a0a 1px, #0000 1px) 0 0 / 32px 32px;
  position: relative;
}

.concept-header {
  z-index: 40;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #f8f5ecf0;
  border-bottom: 2px solid #111827;
  position: sticky;
  top: 0;
}

.concept-header-bar {
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(300px, 420px);
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.75rem;
  display: grid;
}

.concept-brand {
  color: #111827;
  align-items: center;
  gap: .875rem;
  text-decoration: none;
  display: inline-flex;
}

.concept-brand-mark, .concept-account-mark {
  color: #f9fafb;
  width: 2.8rem;
  height: 2.8rem;
  font-family: var(--font-plex-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: #111827;
  border: 2px solid #111827;
  justify-content: center;
  align-items: center;
  font-size: .85rem;
  font-weight: 600;
  display: inline-flex;
}

.concept-account-mark {
  color: #111827;
  background: #fff;
  width: 2.5rem;
  height: 2.5rem;
}

.concept-brand-copy, .concept-account-copy {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.concept-brand-copy strong, .concept-account-copy strong {
  font-size: 1.05rem;
  line-height: 1.1;
}

.concept-brand-copy span, .concept-account-copy span {
  color: #6b7280;
  font-family: var(--font-plex-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: .1rem;
  font-size: .69rem;
}

.concept-header-copy {
  min-width: 0;
}

.concept-header-copy p {
  color: #4b5563;
  max-width: 52rem;
  margin-top: .55rem;
  font-size: .95rem;
  line-height: 1.7;
}

.concept-preview-pill, .concept-kicker, .concept-chip {
  font-family: var(--font-plex-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: #ffffffdb;
  border: 1px solid #0f172a29;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
}

.concept-kicker {
  color: #0f766e;
  background: #14b8a61f;
  border-color: #0f172a3d;
  margin-bottom: 1rem;
}

.concept-header-actions {
  justify-content: flex-end;
  align-items: stretch;
  gap: 1rem;
  display: flex;
}

.concept-live-link, .concept-account-tool, .concept-nav-link, .concept-action {
  color: #111827;
  background: #ffffffe6;
  border: 1px solid #0f172a2e;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1rem;
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .16s, color .16s, border-color .16s, transform .16s;
  display: inline-flex;
}

.concept-live-link:hover, .concept-account-tool:hover, .concept-nav-link:hover, .concept-action:hover {
  color: #0f766e;
  background: #ccfbf1a6;
  border-color: #0d948873;
  transform: translateY(-1px);
}

.concept-account {
  background: #ffffffd6;
  border: 1px solid #0f172a1f;
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.concept-account-link {
  color: inherit;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  padding: .8rem .9rem;
  text-decoration: none;
  display: grid;
}

.concept-account-tools {
  flex-wrap: wrap;
  gap: .6rem;
  padding: 0 .9rem .9rem;
  display: flex;
}

.concept-account-tool {
  padding: .55rem .7rem;
  font-size: .78rem;
}

.concept-mobile-toggle {
  color: #111827;
  background: #ffffffe6;
  border: 1px solid #0f172a2e;
  justify-content: center;
  align-items: center;
  width: 3rem;
  display: none;
}

.concept-nav {
  border-top: 1px solid #0f172a1a;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 0 1.75rem 1rem;
  display: flex;
}

.concept-nav-link {
  padding: .7rem .9rem;
}

.concept-nav-link[data-active="true"] {
  color: #f9fafb;
  background: #111827;
  border-color: #0d948880;
}

.concept-main {
  padding: 2rem 0 3rem;
}

.page-container {
  width: 100%;
  margin: 0 auto;
}

.page-container--regular {
  max-width: 1280px;
  padding-inline: clamp(1rem, 2vw, 1.75rem);
}

.page-container--extended {
  max-width: 1600px;
  padding-inline: clamp(1.15rem, 2.3vw, 2.5rem);
}

.concept-stage {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
  align-items: stretch;
  gap: 1.5rem;
  display: grid;
}

.concept-stage-copy, .concept-page-surface, .concept-band, .concept-footer {
  background: #fcfaf6eb;
  border: 2px solid #111827;
  box-shadow: 0 24px 80px #0f172a14;
}

.concept-stage-copy {
  flex-direction: column;
  justify-content: center;
  min-height: 34rem;
  padding: clamp(1.5rem, 2vw, 2.6rem);
  display: flex;
}

.concept-stage-copy h1, .concept-band-header h2, .concept-footer-copy h2 {
  font-family: var(--font-plex-serif);
  letter-spacing: -.04em;
  font-size: clamp(2.4rem, 4vw, 5rem);
  line-height: .96;
}

.concept-stage-copy p, .concept-band-header p, .concept-footer-copy p {
  color: #4b5563;
  max-width: 44rem;
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.8;
}

.concept-chip-row, .concept-action-row {
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.15rem;
  display: flex;
}

.concept-stage-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.5rem;
  display: grid;
}

.concept-stage-stat {
  background: #fffc;
  border: 1px solid #0f172a1f;
  padding: 1rem;
}

.concept-stage-stat span {
  color: #6b7280;
  font-family: var(--font-plex-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .72rem;
  display: block;
}

.concept-stage-stat strong {
  color: #111827;
  margin-top: .35rem;
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  line-height: 1.1;
  display: block;
}

.concept-stage-media {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .8rem;
  min-height: 34rem;
  display: grid;
}

.concept-stage-tile {
  background: #e5e7eb;
  border: 2px solid #111827;
  min-height: 10rem;
  position: relative;
  overflow: hidden;
}

.concept-stage-media[data-count="1"] .concept-stage-tile:first-child {
  grid-column: span 12;
}

.concept-stage-media[data-count="2"] .concept-stage-tile {
  grid-column: span 6;
}

.concept-stage-media[data-count="3"] .concept-stage-tile:first-child {
  grid-area: span 2 / span 8;
}

.concept-stage-media[data-count="3"] .concept-stage-tile:nth-child(n+2) {
  grid-column: span 4;
}

.concept-stage-media[data-count="4"] .concept-stage-tile:first-child, .concept-stage-media[data-count="5"] .concept-stage-tile:first-child, .concept-stage-media[data-count="6"] .concept-stage-tile:first-child {
  grid-area: span 2 / span 7;
}

.concept-stage-media[data-count="4"] .concept-stage-tile:nth-child(n+2), .concept-stage-media[data-count="5"] .concept-stage-tile:nth-child(n+2), .concept-stage-media[data-count="6"] .concept-stage-tile:nth-child(n+2) {
  grid-column: span 5;
}

.concept-stage-media[data-count="5"] .concept-stage-tile:nth-child(4), .concept-stage-media[data-count="5"] .concept-stage-tile:nth-child(5), .concept-stage-media[data-count="6"] .concept-stage-tile:nth-child(4), .concept-stage-media[data-count="6"] .concept-stage-tile:nth-child(5), .concept-stage-media[data-count="6"] .concept-stage-tile:nth-child(6) {
  grid-column: span 4;
}

.concept-stage-fallback {
  color: #f9fafb;
  background: linear-gradient(145deg, #14b8a642, #111827c7), radial-gradient(circle at 100% 0, #ffffff40, #0000 40%);
  border: 2px solid #111827;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 34rem;
  padding: 1.5rem;
  display: flex;
}

.concept-stage-fallback h2 {
  font-family: var(--font-plex-serif);
  margin-top: 1rem;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.04;
}

.concept-page-surface, .concept-band {
  padding: 1.2rem;
}

.concept-band-header {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 1rem;
  padding: .5rem .3rem 1.25rem;
  display: grid;
}

.concept-cms-canvas {
  width: 100%;
}

.concept-cms-canvas .live-panel {
  background: #ffffffe0;
}

.concept-footer {
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1.5rem;
  display: grid;
}

.concept-footer-links {
  align-content: start;
  gap: .8rem;
  display: grid;
}

.concept-footer-links a {
  color: #111827;
  background: #ffffffe0;
  border: 1px solid #0f172a29;
  justify-content: space-between;
  align-items: center;
  padding: .9rem 1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}

@media (max-width: 1200px) {
  .concept-header-bar, .concept-stage, .concept-band-header, .concept-footer {
    grid-template-columns: 1fr;
  }

  .concept-header-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .concept-mobile-toggle {
    display: inline-flex;
  }

  .concept-header-actions {
    flex-wrap: wrap;
  }

  .concept-live-link, .concept-account {
    width: 100%;
  }

  .concept-nav {
    flex-direction: column;
    padding-top: 1rem;
    display: none;
  }

  .concept-nav-open {
    display: flex;
  }

  .concept-stage-stats, .concept-stage-media {
    grid-template-columns: 1fr 1fr;
  }

  .concept-stage-media[data-count] .concept-stage-tile {
    grid-area: span 1 / span 1 !important;
  }
}

@media (max-width: 640px) {
  .concept-header-bar, .page-container--regular, .page-container--extended, .page-container--full {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .concept-stage-copy, .concept-page-surface, .concept-band, .concept-footer {
    padding: 1rem;
  }

  .concept-stage-stats, .concept-stage-media {
    grid-template-columns: 1fr;
  }
}

:root {
  --shell-sidebar-width: 232px;
  --shell-sidebar-collapsed-width: 74px;
  --shell-topbar-height: 60px;
  --accent-soft: #d7f0eb;
  --accent-ink: #0f4f49;
  --surface-strong: #e7e2d4;
}

body.collectit-v5 {
  background: linear-gradient(#09090b0d 1px, transparent 1px),
    linear-gradient(90deg, #09090b0d 1px, transparent 1px),
    linear-gradient(180deg, #fbf9f2 0%, var(--background) 100%);
  color: var(--foreground);
  background-size: 100% 28px, 28px 100%, 100% 100%;
}

body.collectit-v5[data-theme="dark"] {
  --background: #080808;
  --foreground: #f3f4f6;
  --card: #111;
  --surface: #111;
  --surface-soft: #171717;
  --surface-alt: #1d1d1d;
  --surface-strong: #222;
  --border: #f3f4f6;
  --border-soft: #3f3f46;
  --neutral-subtle: #1a1a1a;
  --neutral-text: #d4d4d8;
  --accent-soft: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  body.collectit-v5[data-theme="dark"] {
    --accent-soft: color-mix(in srgb, var(--accent) 24%, #111 76%);
  }
}

body.collectit-v5[data-theme="dark"] {
  --accent-ink: #f8fafc;
  background: linear-gradient(#f4f4f50a 1px, transparent 1px),
    linear-gradient(90deg, #f4f4f50a 1px, transparent 1px),
    linear-gradient(180deg, #040404 0%, var(--background) 100%);
  background-size: 100% 28px, 28px 100%, 100% 100%;
}

body.collectit-v5[data-accent="amber"] {
  --accent: #c26d05;
  --accent-hover: #9a5700;
  --accent-soft: #f6e3bc;
  --accent-ink: #7c2d12;
}

body.collectit-v5[data-accent="indigo"] {
  --accent: #4338ca;
  --accent-hover: #312e81;
  --accent-soft: #e3e7ff;
  --accent-ink: #312e81;
}

body.collectit-v5[data-accent="rose"] {
  --accent: #be123c;
  --accent-hover: #881337;
  --accent-soft: #ffe1e8;
  --accent-ink: #881337;
}

body.collectit-v5[data-accent="mono"] {
  --accent: #111;
  --accent-hover: #000;
  --accent-soft: #ececec;
  --accent-ink: #111;
}

body.collectit-v5[data-theme="dark"][data-accent="mono"] {
  --accent: #f3f4f6;
  --accent-hover: #fff;
  --accent-soft: #1c1c1c;
  --accent-ink: #f3f4f6;
}

.v5-shell {
  min-height: 100vh;
  color: var(--foreground);
}

.v5-sidebar {
  z-index: 60;
  width: var(--shell-sidebar-width);
  border-right: 2px solid var(--border);
  background: var(--surface);
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0 auto 0 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .v5-sidebar {
    background: color-mix(in srgb, var(--surface) 96%, white 4%);
  }
}

.v5-sidebar {
  transition: width .18s, transform .18s;
}

.v5-sidebar-collapsed, .v5-shell-sidebar-collapsed .v5-sidebar {
  width: var(--shell-sidebar-collapsed-width);
}

.v5-sidebar-brand {
  min-height: var(--shell-topbar-height);
  border-bottom: 2px solid var(--border);
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  display: flex;
}

.v5-brand-mark, .v5-account-avatar {
  border: 2px solid var(--border);
  background: var(--foreground);
  width: 2.25rem;
  height: 2.25rem;
  color: var(--background);
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-size: .8rem;
  font-weight: 700;
  display: inline-flex;
}

.v5-brand-copy, .v5-account-copy {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.v5-brand-copy strong, .v5-account-copy strong {
  font-family: var(--font-display), serif;
  letter-spacing: -.03em;
  font-size: 1rem;
  font-weight: 600;
}

.v5-brand-copy span, .v5-account-copy span {
  color: var(--neutral-text);
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 600;
}

.v5-sidebar-toggle, .v5-topbar-button, .v5-topbar-icon-button, .v5-account-button, .v5-topbar-select {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
}

.v5-sidebar-toggle {
  justify-content: center;
  align-items: center;
  width: 2.25rem;
  height: 2.25rem;
  transition: background-color .12s;
  display: inline-flex;
}

.v5-sidebar-toggle:hover, .v5-topbar-button:hover, .v5-topbar-icon-button:hover, .v5-account-button:hover, .v5-account-panel-link:hover, .v5-sidebar-link:hover {
  background: var(--foreground);
  color: var(--background);
}

.v5-sidebar-toggle, .v5-topbar-button, .v5-topbar-icon-button, .v5-account-button {
  transition: color            var(--motion-quick)   var(--ease-standard),
    background-color var(--motion-quick)   var(--ease-standard),
    border-color     var(--motion-quick)   var(--ease-standard),
    transform        var(--motion-default) var(--ease-release);
}

.v5-sidebar-toggle:active, .v5-topbar-button:active, .v5-topbar-icon-button:active, .v5-account-button:active {
  transition-duration: var(--motion-instant);
  transition-timing-function: var(--ease-press);
  transform: translateY(1px)scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  .v5-sidebar-toggle:active, .v5-topbar-button:active, .v5-topbar-icon-button:active, .v5-account-button:active {
    transform: none;
  }
}

.v5-sidebar-scroll {
  flex-direction: column;
  flex: 1;
  gap: 1rem;
  padding: 1rem .75rem;
  display: flex;
  overflow-y: auto;
}

.v5-sidebar-label, .v5-footer-eyebrow {
  color: var(--neutral-text);
  font-family: var(--font-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .66rem;
  font-weight: 700;
}

.v5-sidebar-nav {
  gap: .35rem;
  display: grid;
}

.v5-sidebar-spacer {
  flex: 1;
  min-height: .5rem;
}

.v5-sidebar-footer {
  border-top: 2px solid var(--border);
  margin-top: auto;
  padding-top: .75rem;
}

.v5-sidebar-link {
  min-height: 2.75rem;
  color: var(--foreground);
  border: 1px solid #0000;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .v5-sidebar-link {
    color: color-mix(in srgb, var(--foreground) 72%, transparent 28%);
  }
}

.v5-sidebar-link {
  font-size: .92rem;
  font-weight: 500;
  transition: background-color .12s, border-color .12s, color .12s;
}

.v5-sidebar-link[data-active="true"] {
  border-color: var(--border);
  background: var(--foreground);
  color: var(--background);
}

.v5-sidebar-link-button {
  text-align: left;
  background: none;
  width: 100%;
}

.v5-shell-sidebar-collapsed .v5-brand-copy, .v5-shell-sidebar-collapsed .v5-sidebar-label, .v5-shell-sidebar-collapsed .v5-sidebar-link span {
  display: none;
}

.v5-main {
  min-height: 100vh;
  margin-left: var(--shell-sidebar-width);
  transition: margin-left .18s;
}

@media (max-width: 1100px) {
  body.collectit-v5 .home-two-col {
    display: block;
  }

  body.collectit-v5 .home-right {
    margin-top: 32px;
  }
}

@media (max-width: 720px) {
  body.collectit-v5 .page-container, body.collectit-v5 .page-container--full {
    padding-inline: 16px;
  }

  body.collectit-v5 .v5-topbar-row, body.collectit-v5 .v5-footer-strip {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.collectit-v5 .hero-banner {
    padding: 20px;
  }

  body.collectit-v5 .hero-title {
    font-size: 26px;
  }

  body.collectit-v5 .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

body.collectit-v5 {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

body.collectit-v5 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--serif);
  letter-spacing: -.01em;
}

body.collectit-v5 .page-container--regular {
  max-width: 1200px;
}

body.collectit-v5 .page-container--extended {
  max-width: 1600px;
}

body.collectit-v5 .page-container--full {
  max-width: none;
  padding-inline: 32px;
}

body.collectit-v5 .content-inner {
  width: min(1200px, 100vw - 64px);
  margin: 0 auto;
}

body.collectit-v5[data-view="extended"] .content-inner {
  width: min(1600px, 100vw - 72px);
}

body.collectit-v5[data-view="wide"] .content-inner {
  width: calc(100vw - 64px);
}

body.collectit-v5 .v5-topbar {
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

body.collectit-v5 .v5-topbar-row {
  min-height: var(--shell-topbar-height);
  gap: 16px;
  padding: 0 24px;
}

body.collectit-v5 .v5-breadcrumb-list {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  gap: 8px;
  font-size: 11px;
}

body.collectit-v5 .v5-breadcrumb-link {
  color: var(--muted);
  text-decoration: none;
}

body.collectit-v5 .v5-breadcrumb-current {
  color: var(--fg);
  font-weight: 500;
}

body.collectit-v5 .shell-search-field {
  border: 2px solid var(--border-soft);
  background: var(--surface2);
  min-height: 32px;
  box-shadow: none;
}

body.collectit-v5 .shell-search-field input {
  letter-spacing: 0;
  font-size: 12px;
}

body.collectit-v5 .v5-topbar-button, body.collectit-v5 .v5-topbar-select {
  height: 32px;
  min-height: 32px;
  font-family: var(--mono);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
}

body.collectit-v5 .v5-topbar-icon-button, body.collectit-v5 .v5-account-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
}

body.collectit-v5 .v5-account-button {
  padding: 0;
}

body.collectit-v5 .v5-footer-strip {
  background: var(--surface);
  gap: 16px;
  padding: 10px 24px;
}

body.collectit-v5 .v5-footer-shortcut, body.collectit-v5 .v5-footer-status {
  font-family: var(--mono);
  font-size: 10px;
}

body.collectit-v5 .v5-footer-key {
  padding: 2px 4px;
}

body.collectit-v5 .sec-title, body.collectit-v5 .calendar-page-head-v5 h1, body.collectit-v5 .v5-page-title h1, body.collectit-v5 .v5-block-title {
  font-family: var(--serif);
  letter-spacing: -.3px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

body.collectit-v5 .sec-sub, body.collectit-v5 .v5-page-subtitle, body.collectit-v5 .calendar-page-head-v5 .v5-page-subtitle, body.collectit-v5 .collection-export-v5 {
  font-family: var(--mono);
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
}

body.collectit-v5 .sec-action {
  font-family: var(--mono);
  color: var(--accent);
  letter-spacing: .08em;
  text-underline-offset: 3px;
  text-transform: uppercase;
  margin-left: auto;
  font-size: 11px;
  text-decoration: underline;
}

body.collectit-v5 .panel {
  border: 2px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}

body.collectit-v5 .panel-hdr, body.collectit-v5 .stat-label, body.collectit-v5 .sparkline-meta {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

body.collectit-v5 .panel-hdr {
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
  padding: 12px 16px;
}

body.collectit-v5 .panel-body {
  padding: 16px;
}

body.collectit-v5 .badge {
  min-height: auto;
  font-family: var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 600;
  display: inline-block;
}

body.collectit-v5 .badge-accent {
  background: var(--accent);
  color: var(--accent-fg);
}

body.collectit-v5 .v5-home-page {
  width: 100%;
}

body.collectit-v5 .home-content-shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

body.collectit-v5 .hero-banner {
  border: 2px solid var(--border);
  color: #fff;
  background-color: #050505;
  gap: 10px;
  min-height: 232px;
  margin-bottom: 32px;
  padding: 32px;
}

body.collectit-v5 .hero-banner:before {
  content: "COLLECT-IT";
  font-family: var(--serif);
  letter-spacing: -5px;
  opacity: .04;
  pointer-events: none;
  font-size: 120px;
  font-weight: 700;
  position: absolute;
  bottom: -20px;
  right: -20px;
}

body.collectit-v5 .hero-eyebrow {
  font-family: var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ffffffc7;
  font-size: 10px;
  font-weight: 700;
}

body.collectit-v5 .hero-title {
  font-family: var(--serif);
  letter-spacing: -1px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
}

body.collectit-v5 .hero-sub {
  color: #ffffffd1;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.55;
}

body.collectit-v5 .hero-stats {
  border-top: 1px solid #ffffff1f;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 18px;
  padding-top: 18px;
  display: grid;
}

body.collectit-v5 .hero-stat-val {
  font-family: var(--serif);
  letter-spacing: -.5px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

body.collectit-v5 .hero-stat-lbl {
  font-family: var(--mono);
  color: #9ca3af;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 2px;
  font-size: 10px;
}

body.collectit-v5 .home-two-col {
  margin-top: 32px;
  display: block;
}

body.collectit-v5[data-view="wide"] .home-two-col {
  grid-template-columns: 3fr 2fr;
  align-items: start;
  gap: 32px;
  display: grid;
}

body.collectit-v5:not([data-view="wide"]) .home-right {
  margin-top: 32px;
}

body.collectit-v5 .home-left, body.collectit-v5 .home-right {
  min-width: 0;
}

body.collectit-v5 .home-right {
  align-content: start;
  gap: 24px;
  display: grid;
}

body.collectit-v5 .home-right .panel {
  margin-bottom: 0;
}

body.collectit-v5 .sec-hdr {
  border-bottom: 2px solid var(--border);
  align-items: end;
  gap: 10px;
  padding-bottom: 10px;
  display: flex;
}

body.collectit-v5 .release-row {
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: none;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  text-decoration: none;
  display: flex;
}

body.collectit-v5 .mover-row {
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  background: none;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  display: flex;
}

body.collectit-v5 .release-row + .release-row, body.collectit-v5 .mover-row + .mover-row, body.collectit-v5 .activity-row + .activity-row {
  margin-top: 0;
}

body.collectit-v5 .release-row:hover, body.collectit-v5 .mover-row:hover {
  border-color: var(--border-soft);
  background: var(--surface2);
}

body.collectit-v5 .release-date-box {
  border: 2px solid var(--border);
  background: var(--surface);
  text-align: center;
  flex-shrink: 0;
  width: 44px;
  padding: 4px;
}

body.collectit-v5 .release-date-mon {
  font-family: var(--mono);
  color: var(--muted);
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: 9px;
}

body.collectit-v5 .release-date-day {
  font-family: var(--serif);
  letter-spacing: -.02em;
  margin-top: 2px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

body.collectit-v5 .release-info, body.collectit-v5 .mover-info {
  flex: 1;
  min-width: 0;
}

body.collectit-v5 .release-name {
  font-family: var(--serif);
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

body.collectit-v5 .release-code, body.collectit-v5 .mover-set {
  font-family: var(--mono);
  color: var(--accent);
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top: 0;
  font-size: 10px;
}

body.collectit-v5 .release-arrow {
  color: var(--muted);
  font-size: 12px;
}

body.collectit-v5 .mover-thumb {
  border: 1px solid var(--border-soft);
  background: var(--surface2);
  flex-shrink: 0;
  width: 36px;
  height: 52px;
  overflow: hidden;
}

body.collectit-v5 .mover-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

body.collectit-v5 .mover-name {
  font-family: var(--serif);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
}

body.collectit-v5 .mover-price {
  text-align: right;
  flex-shrink: 0;
}

body.collectit-v5 .mover-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

body.collectit-v5 .mover-chg, body.collectit-v5 .stat-delta {
  font-family: var(--mono);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
}

body.collectit-v5 .mover-chg.up, body.collectit-v5 .stat-delta.up {
  color: #059669;
}

body.collectit-v5 .mover-chg.dn, body.collectit-v5 .stat-delta.dn {
  color: #dc2626;
}

body.collectit-v5 .activity-row {
  border-bottom: 1px solid var(--border-soft);
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  display: flex;
}

body.collectit-v5 .activity-text {
  font-size: 13px;
  line-height: 1.4;
}

body.collectit-v5 .activity-time {
  font-family: var(--mono);
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
  font-size: 10px;
}

body.collectit-v5 .snapshot-value {
  font-family: var(--serif);
  letter-spacing: -.5px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

body.collectit-v5 .snapshot-secondary {
  font-family: var(--serif);
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

body.collectit-v5 .stat-label, body.collectit-v5 .sparkline-meta {
  color: var(--muted);
}

body.collectit-v5 .sparkline {
  align-items: flex-end;
  gap: 3px;
  min-height: 40px;
  padding-top: 4px;
  display: flex;
}

body.collectit-v5 .spark-bar {
  background: var(--border-soft);
  flex: 1;
  min-height: 4px;
}

body.collectit-v5 .spark-bar.hi {
  background: var(--accent);
}

body.collectit-v5 .spark-bar:last-child {
  background: var(--fg);
}

body.collectit-v5 .sparkline-meta {
  margin-top: 10px;
}

@media (max-width: 1100px) {
  body.collectit-v5 .home-two-col {
    display: block;
  }

  body.collectit-v5 .home-right {
    margin-top: 32px;
  }
}

@media (max-width: 720px) {
  body.collectit-v5 .page-container, body.collectit-v5 .page-container--full {
    padding-inline: 16px;
  }

  body.collectit-v5 .v5-topbar-row, body.collectit-v5 .v5-footer-strip {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.collectit-v5 .hero-banner {
    padding: 20px;
  }

  body.collectit-v5 .hero-title {
    font-size: 26px;
  }

  body.collectit-v5 .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

.live-shell {
  --shell-topbar-height: 52px;
  --shell-view-regular: 1200px;
  --shell-view-extended: 1600px;
}

.live-shell .v5-topbar {
  z-index: 40;
  min-height: var(--shell-topbar-height);
  border-bottom: 2px solid var(--border);
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  position: sticky;
  top: 0;
}

.live-shell .v5-topbar-row {
  min-height: var(--shell-topbar-height);
  align-items: center;
  gap: 14px;
  padding: 0 24px 0 18px;
}

.live-shell .v5-breadcrumb-list {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
}

.live-shell .v5-topbar-search {
  flex: 560px;
  width: min(560px, 100%);
  max-width: 560px;
}

.live-shell .shell-search-form {
  width: 100%;
}

.live-shell .shell-search-field {
  border: 2px solid var(--border-soft);
  background: var(--bg);
  height: 32px;
  min-height: 32px;
  box-shadow: none;
  border-radius: 0;
  padding: 6px 12px;
}

.live-shell .shell-search-field svg {
  width: 12px;
  height: 12px;
}

.live-shell .shell-search-field input {
  font-size: 12px;
  line-height: 1.1;
}

.live-shell .v5-topbar-actions {
  gap: 8px;
}

.live-shell .v5-topbar-group {
  display: inline-flex;
}

.live-shell .v5-topbar-button {
  border: 2px solid var(--border-soft);
  background: var(--bg);
  height: 32px;
  min-height: 32px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: none;
  border-radius: 0;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
}

.live-shell .v5-topbar-group .v5-topbar-button + .v5-topbar-button {
  margin-left: -2px;
}

.live-shell .v5-topbar-button[data-active="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
}

.live-shell .dark-toggle {
  border: 2px solid var(--border-soft);
  background: var(--bg);
  border-radius: 0;
  width: 40px;
  height: 22px;
}

.live-shell .dark-toggle:after {
  background: var(--fg);
  width: 14px;
  height: 14px;
  box-shadow: none;
  border-radius: 0;
  top: 2px;
  left: 2px;
  transform: translateX(0);
}

body[data-theme="dark"] .live-shell .dark-toggle {
  border-color: var(--accent);
  background: var(--accent);
}

body[data-theme="dark"] .live-shell .dark-toggle:after {
  background: var(--accent-fg);
  transform: translateX(18px);
}

.live-shell .v5-account-button {
  border: 2px solid var(--border-soft);
  background: var(--accent);
  width: 32px;
  height: 32px;
  color: var(--accent-fg);
  border-radius: 0;
  padding: 0;
}

.live-shell .v5-account-avatar {
  width: 100%;
  height: 100%;
  color: inherit;
  font-family: var(--mono);
  letter-spacing: .08em;
  background: none;
  border: 0;
  font-size: 12px;
  font-weight: 700;
}

.live-shell .v5-content {
  padding-block: 24px 56px;
}

.calendar-page-v5 {
  gap: 18px;
}

.calendar-page-head-v5 {
  border-bottom: 2px solid var(--border);
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  display: flex;
}

.calendar-page-head-v5 h1 {
  font-family: var(--serif);
  letter-spacing: -.01em;
  font-size: 18px;
  font-weight: 600;
}

.calendar-page-head-v5 .v5-page-subtitle {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: 10px;
}

.cal-shell {
  border: 2px solid var(--border);
  background: var(--bg);
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0;
  min-height: 540px;
  display: grid;
}

.cal-main {
  border-right: 2px solid var(--border);
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  display: grid;
}

.cal-hdr {
  border-bottom: 2px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  display: flex;
}

.cal-nav-btn {
  border: 2px solid var(--border-soft);
  background: var(--bg);
  border-radius: 0;
  width: 30px;
  height: 30px;
}

.cal-dow-cell {
  text-align: center;
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--subtle);
  padding: 6px 0;
  font-size: 9px;
  font-weight: 600;
}

.cal-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(104px, 1fr);
  display: grid;
}

.cal-cell {
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg);
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 104px;
  padding: 6px;
  font-size: 12px;
  display: flex;
  position: relative;
}

.cal-cell.other-month {
  color: var(--subtle);
}

.cal-cell.selected {
  background: var(--fg);
  color: var(--bg);
}

.cal-cell.today:not(.selected) {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .cal-cell.today:not(.selected) {
    background: color-mix(in srgb, var(--accent) 18%, var(--bg));
  }
}

.cal-cell.has-release:after {
  content: "";
  background: var(--accent);
  border-radius: 999px;
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.cal-detail {
  background: var(--surface);
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  display: flex;
}

.cal-detail-hdr {
  border-bottom: 2px solid var(--border);
  font-family: var(--serif);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}

.cal-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.cal-detail-row {
  border-bottom: 1px solid var(--border-soft);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px;
  display: flex;
}

.cal-detail-copy strong {
  font-size: 12px;
  font-weight: 600;
}

.cal-detail-dot {
  background: var(--accent);
  width: 6px;
  height: 6px;
}

.cal-detail-badge {
  border: 1px solid var(--accent);
  background: var(--accent);
  min-width: 24px;
  color: var(--accent-fg);
  font-family: var(--mono);
  text-align: center;
  letter-spacing: .08em;
  padding: 2px 4px;
  font-size: 8px;
  font-weight: 700;
}

.storage-shell {
  min-height: calc(100vh - var(--shell-topbar-height) - 28px);
  border-top: 2px solid var(--border);
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  display: grid;
}

.storage-panel, .storage-viewer {
  min-width: 0;
}

.storage-main {
  min-width: 0;
  position: relative;
}

.storage-selection-bar, .storage-unfiled-banner {
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  background: var(--accent);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .storage-selection-bar, .storage-unfiled-banner {
    background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  }
}

.storage-selection-meta, .storage-unfiled-banner span {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 10px;
}

.binder-stage-v5 {
  padding: 22px 24px 18px;
}

.binder-spread {
  background: #3a2416;
  border: 2px solid #24160d;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  gap: 0;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px;
  display: grid;
  position: relative;
  box-shadow: 0 18px 36px #0f172a2e;
}

.binder-page-v5 {
  background: #fff;
  min-height: 540px;
  padding: 28px 12px 14px;
  transition: opacity .18s;
  position: relative;
}

.binder-page-v5.page-hidden {
  opacity: 0;
}

.binder-page-marker {
  text-align: center;
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 600;
}

.binder-pocket {
  background: #fbfbfc;
  border: 2px dashed #d5d9e1;
  min-height: 144px;
  position: relative;
}

.binder-pocket.is-active {
  border-color: var(--accent);
}

.binder-spine {
  background: #2a1a10;
  align-content: space-evenly;
  justify-items: center;
  padding-block: 26px;
  display: grid;
}

.binder-ring {
  border: 2px solid #fff9;
  border-radius: 999px;
  width: 8px;
  height: 8px;
}

.binder-flipper {
  perspective: 1200px;
  pointer-events: none;
  z-index: 5;
  width: calc(50% - 18px);
  position: absolute;
  top: 12px;
  bottom: 12px;
}

.binder-flipper.flip-fwd {
  transform-origin: 0;
  animation: .38s cubic-bezier(.45, 0, .25, 1) bPageFwd;
  left: calc(50% + 18px);
}

.binder-flipper.flip-back {
  transform-origin: 100%;
  animation: .38s cubic-bezier(.45, 0, .25, 1) bPageBack;
  right: calc(50% + 18px);
}

.binder-flipper-face {
  backface-visibility: hidden;
  background: linear-gradient(#fff 0%, #f7f7f7 100%);
  border: 1px solid #0f172a14;
  position: absolute;
  inset: 0;
}

.binder-flipper-front {
  box-shadow: 0 14px 28px #0f172a2e;
}

.binder-flipper-back {
  background: linear-gradient(#fbfbfb 0%, #efefef 100%);
  transform: rotateY(180deg);
}

@keyframes bPageFwd {
  from {
    transform: rotateY(0);
  }

  to {
    transform: rotateY(-180deg);
  }
}

@keyframes bPageBack {
  from {
    transform: rotateY(0);
  }

  to {
    transform: rotateY(180deg);
  }
}

.binder-controls, .binder-footer {
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  display: flex;
}

.binder-nav {
  border: 2px solid var(--border);
  background: var(--bg);
  width: 36px;
  height: 36px;
}

.binder-spread-count, .binder-stage-note {
  text-align: center;
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 10px;
}

.binder-stage-note {
  margin-top: 10px;
}

.deck-stage-v5 {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  padding: 22px 24px 24px;
  display: grid;
}

.deck-box-panel {
  align-content: start;
  justify-items: center;
  gap: 12px;
  display: grid;
}

.deck-box-visual {
  border: 2px solid var(--border);
  background: linear-gradient(#101010 0%, #2a2a2a 24%, #c7c7c7 24% 100%);
  width: 164px;
  padding: 28px 18px 16px;
  position: relative;
  box-shadow: 12px 12px #0f172a14;
}

.deck-box-lid, .deck-box-side {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  position: absolute;
}

.deck-box-lid {
  color: #9ddad4;
  text-align: center;
  top: 10px;
  left: 0;
  right: 0;
}

.deck-box-front {
  justify-content: center;
  align-items: center;
  min-height: 226px;
  display: flex;
}

.deck-box-side {
  transform-origin: 100% 0;
  color: #0f172a73;
  top: 50%;
  right: -36px;
  transform: rotate(90deg)translateX(-50%);
}

.deck-box-help, .deck-box-meta {
  font-family: var(--mono);
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 10px;
}

.deck-list-panel {
  min-width: 0;
}

.deck-list-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.deck-edit-link {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
}

.deck-gallery {
  opacity: 0;
  gap: 18px;
  transition: opacity .22s, transform .22s;
  display: grid;
  transform: translateY(10px);
}

.deck-gallery.revealed {
  opacity: 1;
  transform: translateY(0);
}

.deck-gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  display: grid;
}

.deck-gallery-card {
  border: 2px solid var(--border);
  background: var(--bg);
  text-align: left;
}

.deck-gallery-card.is-active {
  border-color: var(--accent);
}

.deck-gallery-card-image {
  justify-content: center;
  align-items: center;
  padding: 8px 8px 0;
  display: flex;
}

.deck-gallery-card-copy {
  border-top: 2px solid var(--border);
  padding: 8px;
}

.deck-gallery-card-name {
  font-size: 12px;
  font-weight: 600;
}

.deck-gallery-card-meta, .deck-gallery-empty {
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
}

.deck-gallery-empty {
  padding: 14px 0 2px;
}

.card-popup {
  z-index: 80;
  border: 2px solid var(--border);
  background: var(--surface);
  width: 460px;
  max-width: calc(100vw - 24px);
  display: none;
  position: fixed;
  box-shadow: 0 24px 44px #0f172a38;
}

.card-popup.on {
  display: block;
}

.card-popup-inner {
  grid-template-columns: 156px minmax(0, 1fr);
  min-height: 220px;
  display: grid;
}

.card-popup-img {
  border-right: 2px solid var(--border);
  background: var(--surface2);
  justify-content: center;
  align-items: center;
  padding: 12px;
  display: flex;
}

.card-popup-info {
  gap: 10px;
  padding: 14px;
  display: grid;
}

.card-popup-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
}

.card-popup-type, .card-popup-location {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 10px;
}

.card-popup-divider {
  background: var(--border-soft);
  height: 1px;
}

.card-popup-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  display: grid;
}

.card-popup-stat {
  gap: 2px;
  display: grid;
}

.card-popup-stat-label {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: 9px;
  font-weight: 600;
}

.card-popup-stat-value {
  font-size: 12px;
  font-weight: 600;
}

.card-popup-desc {
  color: var(--fg-mid);
  font-size: 12px;
  line-height: 1.45;
}

.stg-modal-footer {
  border-top: 2px solid var(--border);
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  display: flex;
}

@media (max-width: 1100px) {
  .cal-shell, body[data-view="wide"] .cal-shell, .deck-stage-v5 {
    grid-template-columns: 1fr;
  }

  .storage-selection-bar, .storage-unfiled-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

.v5-topbar {
  z-index: 40;
  min-height: var(--shell-topbar-height);
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
}

.v5-topbar-icon-button {
  border: 2px solid var(--border);
  background: var(--surface2);
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: inline-flex;
}

.v5-breadcrumb-list {
  font-family: var(--mono);
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

.v5-breadcrumb-link {
  color: var(--muted);
}

.v5-breadcrumb-current {
  color: var(--fg);
  font-weight: 500;
}

.v5-topbar-search {
  flex: 560px;
  width: min(560px, 100%);
  min-width: 0;
  max-width: 560px;
}

.shell-search-field {
  border: 2px solid var(--border-soft);
  background: var(--surface2);
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  display: flex;
}

.shell-search-field:focus-within {
  border-color: var(--border);
}

.shell-search-field svg {
  width: 14px;
  height: 14px;
  color: var(--subtle);
  flex-shrink: 0;
}

.shell-search-field input {
  width: 100%;
  color: var(--fg);
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.shell-search-field input::placeholder {
  color: var(--subtle);
}

.v5-topbar-actions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.v5-topbar-group {
  border: 2px solid var(--border);
  background: var(--surface);
  display: inline-flex;
}

.v5-topbar-button {
  border-right: 1px solid var(--border);
  min-width: 42px;
  height: 32px;
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 10px;
  font-size: 12px;
}

.v5-topbar-button:last-child {
  border-right: 0;
}

.dark-toggle:after {
  content: "";
  border: 2px solid var(--border);
  background: var(--fg);
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body.collectit-v5[data-theme="dark"] .dark-toggle {
  background: var(--fg);
}

body.collectit-v5[data-theme="dark"] .dark-toggle:after {
  border-color: var(--bg);
  background: var(--bg);
}

.v5-account-button {
  border: 2px solid var(--border);
  background: var(--surface);
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  display: inline-flex;
}

.v5-account-avatar {
  background: var(--fg);
  width: 26px;
  height: 26px;
  color: var(--bg);
  font-family: var(--mono);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
}

.v5-account-panel {
  z-index: 80;
  border: 2px solid var(--border);
  background: var(--surface);
  min-width: 220px;
  box-shadow: var(--shadow-md);
  display: grid;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
}

.v5-account-panel-head {
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
  gap: 2px;
  padding: 12px 14px;
  display: grid;
}

.v5-account-panel-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
}

.v5-account-panel-subtitle, .v5-account-panel-status {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 10px;
}

.v5-account-panel-links {
  display: grid;
}

.v5-account-panel-link {
  border-top: 1px solid var(--border-soft);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 12px;
  display: flex;
}

.v5-account-panel-link-button {
  cursor: pointer;
  width: 100%;
}

.v5-account-panel-link:hover {
  background: var(--surface2);
}

.v5-content {
  background: var(--bg);
  flex: 1;
  padding: 32px 0 40px;
}

.v5-footer-strip {
  border-top: 2px solid var(--border);
  background: var(--surface);
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  display: flex;
}

.v5-footer-shortcuts {
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}

.v5-footer-status {
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  margin-left: auto;
  font-size: 10px;
}

.v5-footer-swatch {
  border: 2px solid var(--border);
  width: 18px;
  height: 18px;
}

body.collectit-v5[data-theme="dark"] .v5-footer-swatch[data-accent="mono"] {
  background: #eee;
}

.v5-footer-shortcut {
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  display: inline-flex;
}

.v5-footer-key {
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--fg);
  padding: 2px 4px;
}

.sec-hdr, .v5-page-title, .calendar-page-head-v5 {
  border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 0;
  padding-bottom: 12px;
  display: flex;
}

.sec-title, .calendar-page-head-v5 h1, .v5-page-title h1 {
  font-family: var(--serif);
  letter-spacing: -.3px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.sec-sub, .v5-page-subtitle, .calendar-page-head-v5 .v5-page-subtitle, .collection-export-v5 {
  font-family: var(--mono);
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
}

.sec-action {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: auto;
  font-size: 11px;
}

.v5-tabbar, .filter-bar, .feed-tabs {
  border: 2px solid var(--border);
  background: var(--surface);
  align-items: center;
  gap: 0;
  display: flex;
  overflow: hidden;
}

.v5-tab, .ftab, .feed-tab {
  border-right: 1px solid var(--border);
  min-height: 40px;
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
}

.v5-tab:last-of-type, .ftab:last-of-type, .feed-tab:last-of-type {
  border-right: 0;
}

.v5-tab:hover, .ftab:hover, .feed-tab:hover {
  background: var(--surface2);
  color: var(--fg);
}

.v5-tab[data-active="true"], .ftab[data-active="true"], .ftab.active, .feed-tab[data-active="true"] {
  background: var(--fg);
  color: var(--bg);
}

.v5-tabbar-meta, .filter-count {
  font-family: var(--mono);
  color: var(--subtle);
  text-transform: uppercase;
  margin-left: auto;
  padding: 10px 16px;
  font-size: 11px;
}

.filter-sep {
  flex: 1;
}

.page-crumbs-v5 {
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  display: flex;
}

.page-crumb-link-v5 {
  color: var(--accent);
}

.page-crumb-muted-v5 {
  color: var(--muted);
}

.v5-empty-block {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--fg-mid);
  gap: 8px;
  padding: 18px;
  display: grid;
}

.set-grid, .catalog-set-grid-v5 {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  display: grid;
}

.set-card, .catalog-set-card-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  transition: transform var(--t),
    box-shadow var(--t);
  gap: 0;
  display: grid;
}

.set-card:hover, .catalog-set-card-v5:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.set-card-preview, .catalog-set-card-media-v5 {
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
  height: 140px;
  overflow: hidden;
}

.set-card-preview-image, .set-card-preview img, .catalog-set-card-image-v5 {
  object-fit: cover;
  filter: grayscale(.5);
  width: 100%;
  height: 100%;
  transition: filter var(--t);
}

.set-card:hover .set-card-preview-image, .catalog-set-card-v5:hover .catalog-set-card-image-v5 {
  filter: grayscale(0);
}

.set-card-body, .catalog-set-card-copy-v5 {
  gap: 4px;
  padding: 14px 16px;
  display: grid;
}

.set-card-name, .catalog-set-card-copy-v5 strong {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.set-card-code, .catalog-set-card-copy-v5 p {
  font-family: var(--mono);
  color: var(--accent);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 10px;
}

.set-card-copy {
  min-height: 40px;
  color: var(--fg-mid);
  font-size: 12px;
  line-height: 1.5;
}

.set-card-meta, .catalog-set-card-meta-v5 {
  color: var(--fg-mid);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 11px;
  display: flex;
}

.cal-shell {
  border: 2px solid var(--border);
  background: var(--surface);
  grid-template-columns: minmax(0, 1fr) 320px;
  min-height: 720px;
  display: grid;
  overflow: hidden;
}

body[data-view="wide"] .cal-shell {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.cal-main {
  align-content: start;
  min-height: 0;
  display: grid;
}

.cal-hdr {
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  display: flex;
}

.cal-month {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
}

.cal-nav {
  gap: 8px;
  display: flex;
}

.cal-nav-btn {
  border: 2px solid var(--border);
  background: var(--surface);
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: inline-flex;
}

.cal-dow {
  border-bottom: 2px solid var(--border);
  grid-template-columns: repeat(7, minmax(0, 1fr));
  display: grid;
}

.cal-dow-cell {
  border-right: 1px solid var(--border-soft);
  text-align: center;
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  padding: 10px 8px;
  font-size: 10px;
}

.cal-dow-cell:last-child {
  border-right: 0;
}

.cal-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 0;
  display: grid;
}

.cal-cell {
  aspect-ratio: 1;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  text-align: left;
  font-family: var(--mono);
  color: var(--fg);
  padding: 10px;
  font-size: 12px;
}

.cal-cell.other-month {
  color: var(--subtle);
  background: var(--surface2);
}

.cal-cell.today span {
  background: var(--fg);
  min-width: 24px;
  color: var(--bg);
  justify-content: center;
  display: inline-flex;
}

.cal-cell.has-release {
  background: linear-gradient(0deg, var(--accent), transparent),
    var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .cal-cell.has-release {
    background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent),
    var(--surface);
  }
}

.cal-cell.selected {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cal-detail {
  background: var(--surface);
  border-left: 2px solid var(--border);
}

.cal-detail-hdr {
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
  font-family: var(--serif);
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
}

.cal-detail-body {
  max-height: 460px;
  overflow-y: auto;
}

.cal-detail-row {
  border-top: 1px solid var(--border-soft);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  display: flex;
}

.cal-detail-row:first-child {
  border-top: 0;
}

.cal-detail-copy {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.cal-detail-dot {
  background: var(--accent);
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.cal-detail-badge {
  border: 1px solid var(--border);
  font-family: var(--mono);
  text-transform: uppercase;
  padding: 2px 6px;
  font-size: 10px;
}

.feed-stage {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0;
}

body[data-view="extended"] .feed-stage {
  max-width: 1100px;
}

body[data-view="wide"] .feed-stage {
  max-width: 100%;
  padding-inline: 28px;
}

.feed-header {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  display: flex;
}

.feed-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.feed-tabs {
  margin-left: auto;
}

.feed-body {
  gap: 18px;
  display: grid;
}

.feed-item {
  border: 2px solid var(--border);
  background: var(--surface);
  gap: 0;
  display: grid;
}

.feed-item-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 14px;
  display: flex;
}

.feed-item-author {
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.feed-avatar {
  background: var(--surface2);
  border: 2px solid var(--border);
  width: 36px;
  height: 36px;
  font-family: var(--mono);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.feed-item-meta {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.feed-item-name {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.feed-item-name strong {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
}

.feed-item-time {
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
}

.feed-item-body {
  color: var(--fg-mid);
  padding: 0 20px 18px;
  font-size: 13px;
  line-height: 1.65;
}

.feed-card-grid {
  border-top: 1px solid var(--border-soft);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  display: grid;
}

.feed-card {
  border-right: 1px solid var(--border-soft);
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
}

.feed-card:last-child {
  border-right: 0;
}

.feed-card-thumb {
  border: 1px solid var(--border-soft);
  object-fit: cover;
  width: 72px;
  height: 96px;
}

.feed-card-copy {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.feed-card-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.feed-card-subtitle {
  color: var(--fg-mid);
  font-size: 11px;
}

.feed-card-meta {
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10px;
  display: flex;
}

.feed-hero-image {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  max-height: 380px;
  overflow: hidden;
}

.feed-item-footer {
  border-top: 2px solid var(--border);
  flex-wrap: wrap;
  display: flex;
}

.feed-footer-cell {
  border-right: 1px solid var(--border);
  min-height: 40px;
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  font-size: 10px;
  display: inline-flex;
}

.feed-footer-cell:last-child {
  border-right: 0;
}

.feed-footer-cell.is-action {
  color: var(--fg);
}

button.feed-footer-cell {
  cursor: pointer;
  background: none;
  border: 0;
}

.feed-footer-cell.is-action[data-active="true"] {
  color: var(--accent);
}

.collection-table-pagination-v5 {
  font-family: var(--mono);
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 0 12px;
  font-size: 10px;
  display: flex;
}

.collection-page-arrow-v5 {
  color: var(--accent);
}

.collection-page-arrow-v5.is-disabled {
  color: var(--muted);
}

.collection-page-status-v5 {
  color: var(--fg-mid);
}

.feed-search-note {
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 8px;
  font-size: 10px;
}

.messages-layout-v5 {
  min-height: calc(100vh - var(--shell-topbar-height) - 84px);
  border: 2px solid var(--border);
  background: var(--surface);
  grid-template-columns: 300px minmax(0, 1fr);
  display: grid;
  overflow: hidden;
}

body[data-view="extended"] .messages-layout-v5 {
  grid-template-columns: 340px minmax(0, 1fr);
}

body[data-view="wide"] .messages-layout-v5 {
  grid-template-columns: 380px minmax(0, 1fr);
}

.messages-rail-v5 {
  border-right: 2px solid var(--border);
  background: var(--surface);
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.messages-rail-head {
  border-bottom: 2px solid var(--border);
  padding: 16px 20px;
}

.messages-rail-heading-v5 h1, .messages-thread-title-v5 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
}

.messages-square-action-v5, .messages-pill-action-v5 {
  border: 2px solid var(--border);
  background: var(--surface2);
  min-height: 32px;
  font-family: var(--mono);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  display: inline-flex;
}

.messages-search-input-v5 {
  border: 2px solid var(--border-soft);
  background: var(--surface2);
  width: 100%;
  padding: 9px 12px;
  font-size: 12px;
}

.messages-rail-list {
  display: grid;
  overflow-y: auto;
}

.messages-thread-item {
  border-top: 1px solid var(--border-soft);
  text-align: left;
  background: var(--surface);
  padding: 14px 16px;
  display: block;
}

.messages-thread-item:first-child {
  border-top: 0;
}

.messages-thread-item[data-active="true"] {
  background: var(--surface2);
}

.messages-thread-item-head-v5 {
  gap: 12px;
  display: flex;
}

.messages-thread-avatar-v5, .message-inline-avatar-v5 {
  border: 2px solid var(--border);
  background: var(--surface2);
  width: 32px;
  height: 32px;
  font-family: var(--mono);
  text-transform: uppercase;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  display: inline-flex;
}

.messages-thread-copy-v5, .message-stack-v5 {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.messages-thread-name-v5, .message-author-v5 {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
}

.messages-thread-time-v5, .messages-thread-meta-v5, .messages-day-marker-v5, .message-time-v5 {
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
}

.messages-thread-preview-v5 {
  color: var(--fg-mid);
  font-size: 12px;
  line-height: 1.45;
}

.messages-thread-shell-v5 {
  background: var(--bg);
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.messages-thread-head {
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  display: flex;
}

.messages-thread-head-primary-v5, .messages-thread-actions-v5 {
  align-items: center;
  gap: 12px;
  display: flex;
}

.messages-thread-body {
  flex-direction: column;
  flex: 1;
  gap: 14px;
  min-height: 0;
  padding: 20px;
  display: flex;
  overflow-y: auto;
}

.messages-day-marker-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  align-self: center;
  padding: 2px 8px;
}

.message-row-v5 {
  gap: 10px;
  display: flex;
}

.message-bubble-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  max-width: min(560px, 72vw);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
}

.message-bubble-v5.is-mine {
  background: var(--fg);
  color: var(--bg);
}

.message-attachment-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  gap: 10px;
  padding: 10px;
  display: flex;
}

.message-attachment-thumb-v5 {
  object-fit: cover;
  width: 56px;
  height: 74px;
}

.messages-compose-v5 {
  border-top: 2px solid var(--border);
  background: var(--surface);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
  display: grid;
}

.messages-compose-input-v5 {
  border: 2px solid var(--border-soft);
  background: var(--surface2);
  min-height: 40px;
  padding: 0 12px;
  font-size: 12px;
}

.messages-send-v5 {
  border: 2px solid var(--border);
  background: var(--fg);
  min-width: 88px;
  min-height: 40px;
  color: var(--bg);
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 11px;
}

.auth-screen-v5 {
  min-height: calc(100vh - var(--shell-topbar-height) - 84px);
  border: 2px solid var(--border);
  background: #0c0c0c;
  grid-template-columns: minmax(0, 1fr) 240px;
  width: 100%;
  margin-left: 0;
  display: grid;
  position: relative;
  overflow: hidden;
}

.auth-backdrop-v5 {
  opacity: .98;
  background-color: #0000;
  background-image: linear-gradient(#000000a8, #000000a8), url("/live/collect-it/yugioh-title.webp");
  background-position: center;
  background-repeat: repeat, repeat;
  background-size: cover;
  background-attachment: scroll, scroll;
  background-origin: padding-box, padding-box;
  background-clip: border-box, border-box;
  position: absolute;
  inset: 0;
}

.auth-stage-v5 {
  z-index: 1;
  place-items: center;
  padding: 40px;
  display: grid;
  position: relative;
}

.auth-card-v5 {
  border: 2px solid var(--border);
  width: min(460px, 100%);
  box-shadow: var(--shadow-lg);
  background: #fffffff0;
  display: grid;
  overflow: hidden;
}

body.collectit-v5[data-theme="dark"] .auth-card-v5 {
  background: #111111f5;
}

.auth-card-head-v5 {
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
  gap: 2px;
  padding: 16px 18px;
  display: grid;
}

.auth-brand-v5 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
}

.auth-subtitle-v5 {
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
}

.auth-tabs-v5 {
  border-bottom: 2px solid var(--border);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.auth-tab-v5 {
  border-right: 1px solid var(--border);
  min-height: 42px;
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--muted);
  justify-content: center;
  align-items: center;
  font-size: 11px;
  display: inline-flex;
}

.auth-tab-v5:last-child {
  border-right: 0;
}

.auth-form-wrap-v5 {
  background: #fffffff5;
  padding: 22px 22px 20px;
}

body.collectit-v5[data-theme="dark"] .auth-form-wrap-v5 {
  background: #111111f5;
}

.auth-input-v5, .auth-submit-v5, .auth-secondary-v5, .auth-reset-v5 {
  min-height: 40px;
}

.auth-input-v5 {
  border: 2px solid var(--border-soft);
  background: var(--surface2);
  padding: 0 12px;
}

.auth-status-v5 {
  border-top: 2px solid var(--border);
  background: var(--surface2);
}

body.collectit-v5[data-theme="dark"] .auth-rail-v5 {
  background: #111111f0;
}

.dashboard-kpis-v5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.dashboard-kpi-v5, .profile-stat-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
}

.dashboard-panel-v5, .collection-table-shell-v5, .profile-section-v5, .settings-group-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
}

.dashboard-panel-head-v5, .collection-table-head-v5, .profile-section-head-v5, .settings-group-head-v5 {
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
}

.collection-table-head-v5, .collection-table-row-v5 {
  grid-template-columns: 220px repeat(7, minmax(0, 1fr));
}

.collection-table-row-v5 {
  border-top: 1px solid var(--border-soft);
  padding: 10px 14px;
}

.profile-band-v5 {
  border: 2px solid var(--border);
  background-color: #050505;
  background-image: linear-gradient(135deg, #ffffff0f 25%, #0000 25%), linear-gradient(225deg, #ffffff0f 25%, #0000 25%), linear-gradient(315deg, #ffffff0f 25%, #0000 25%), linear-gradient(45deg, #ffffff0f 25%, #0000 25%), none;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat, repeat;
  background-size: 24px 24px;
  background-attachment: scroll, scroll, scroll, scroll, scroll;
  background-origin: padding-box, padding-box, padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box, border-box, border-box;
  min-height: 136px;
}

.profile-main-v5, .settings-page-v5, .search-page-v5 {
  gap: 24px;
  display: grid;
}

.profile-game-tabs-v5, .settings-segment-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
  display: inline-flex;
}

.profile-game-tab-v5, .settings-segment-button-v5 {
  border-right: 1px solid var(--border);
  min-height: 38px;
  font-family: var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  padding: 0 14px;
  font-size: 11px;
}

.profile-game-tab-v5[data-active="true"], .settings-segment-button-v5[data-active="true"] {
  background: var(--fg);
  color: var(--bg);
}

.search-results-grid-v5 {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.search-result-card-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  transition: transform var(--t),
    box-shadow var(--t);
}

.search-result-card-v5:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.storage-shell {
  min-height: calc(100vh - var(--shell-topbar-height) - 54px);
  border: 2px solid var(--border);
  background: var(--surface);
  grid-template-columns: 260px minmax(0, 1fr);
  display: grid;
  overflow: hidden;
}

body[data-view="wide"] .storage-shell {
  grid-template-columns: 280px minmax(0, 1fr);
}

body[data-view="regular"] .storage-shell {
  grid-template-columns: 240px minmax(0, 1fr);
}

.storage-panel {
  border-right: 2px solid var(--border);
  background: var(--surface);
}

.storage-viewer {
  background: var(--bg);
}

@media (max-width: 1200px) {
  .dashboard-kpis-v5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feed-stage {
    max-width: 100%;
    padding-inline: 0;
  }
}

@media (max-width: 1080px) {
  .v5-sidebar {
    transform: translateX(-100%);
  }

  .v5-sidebar.v5-sidebar-mobile-open {
    transform: translateX(0);
  }

  .v5-sidebar-backdrop {
    z-index: 55;
    background: #0000002e;
    position: fixed;
    inset: 0;
  }

  .v5-main, .v5-shell-sidebar-collapsed .v5-main {
    margin-left: 0;
  }

  .v5-topbar-mobile {
    display: flex;
  }

  .v5-topbar-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .v5-topbar-search {
    order: 4;
    grid-column: 1 / -1;
  }

  .v5-shell-sidebar-collapsed .v5-brand-copy, .v5-shell-sidebar-collapsed .v5-sidebar-label, .v5-shell-sidebar-collapsed .v5-sidebar-link span {
    opacity: 1;
    pointer-events: auto;
  }

  .auth-screen-v5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-rail-v5 {
    border-left: 0;
    border-top: 2px solid var(--border);
  }
}

@media (max-width: 960px) {
  .messages-layout-v5, .cal-shell, .storage-shell, .dashboard-grid-v5, .product-summary-v5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .messages-rail-v5, .storage-panel {
    border-right: 0;
    border-bottom: 2px solid var(--border);
  }

  .cal-detail {
    border-left: 0;
    border-top: 2px solid var(--border);
  }

  .messages-rail-v5 {
    max-height: 320px;
  }

  .dashboard-kpis-v5, .profile-stats-v5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .page-container, .page-container--full {
    padding-inline: 16px;
  }

  .content-inner {
    width: min(100vw, 100vw - 24px);
  }

  .v5-topbar-row, .v5-footer-strip, .v5-footer-shortcuts, .v5-footer-status, .feed-header, .messages-thread-head, .profile-head-v5, .profile-head-actions-v5, .product-summary-actions-v5 {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-kpis-v5, .dashboard-grid-v5, .profile-stats-v5, .catalog-set-grid-v5, .set-grid, .search-results-grid-v5, .feed-card-grid, .messages-compose-v5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .v5-tabbar, .filter-bar, .feed-tabs, .profile-game-tabs-v5, .settings-segment-v5 {
    flex-wrap: wrap;
  }
}

.v5-topbar {
  z-index: 40;
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .v5-topbar {
    background: color-mix(in srgb, var(--surface) 96%, white 4%);
  }
}

.v5-topbar {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.v5-topbar-row {
  min-height: var(--shell-topbar-height);
  grid-template-columns: auto minmax(0, 1fr) minmax(280px, .9fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.25rem;
  display: grid;
}

.v5-topbar-mobile {
  display: none;
}

.v5-breadcrumb-list {
  color: var(--neutral-text);
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 600;
  display: flex;
}

.v5-breadcrumb-link {
  text-underline-offset: .25rem;
  text-decoration: underline;
}

.v5-breadcrumb-current {
  color: var(--foreground);
}

.v5-topbar-search {
  min-width: 0;
}

.shell-search-form {
  width: 100%;
}

.shell-search-field {
  border: 2px solid var(--border);
  background: var(--surface);
  align-items: center;
  gap: .65rem;
  min-height: 2.75rem;
  padding: 0 .85rem;
  display: flex;
}

.shell-search-field input {
  width: 100%;
  color: var(--foreground);
  background: none;
  outline: none;
}

.shell-search-field svg {
  width: 1rem;
  height: 1rem;
}

.v5-topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  display: flex;
}

.v5-topbar-group {
  flex-wrap: nowrap;
  display: inline-flex;
}

.v5-topbar-button, .v5-topbar-select {
  min-height: 2.5rem;
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  padding: 0 .9rem;
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
}

.v5-topbar-icon-button {
  justify-content: center;
  align-items: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  display: inline-flex;
}

.v5-topbar-group .v5-topbar-button + .v5-topbar-button {
  border-left-width: 0;
}

.v5-topbar-button[data-active="true"] {
  background: var(--accent);
  color: var(--accent-fg);
}

.v5-topbar-button:disabled {
  cursor: default;
  opacity: .72;
}

.v5-topbar-select-wrap {
  display: inline-flex;
}

.v5-topbar-select {
  cursor: pointer;
  min-width: 7rem;
}

.v5-topbar-preview-link {
  background: var(--surface-strong);
}

.v5-account-wrap {
  position: relative;
}

.v5-account-button {
  align-items: center;
  gap: .65rem;
  min-height: 2.5rem;
  padding: .25rem .35rem .25rem .25rem;
  display: inline-flex;
}

.v5-account-avatar {
  width: 2rem;
  height: 2rem;
  font-size: .72rem;
}

.v5-account-panel {
  z-index: 50;
  border: 2px solid var(--border);
  background: var(--surface);
  gap: .85rem;
  width: min(20rem, 100vw - 2rem);
  padding: 1rem;
  display: grid;
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
}

.v5-account-panel-head {
  gap: .2rem;
  display: grid;
}

.v5-account-panel-title {
  color: var(--foreground);
  font-family: var(--font-display), serif;
  font-size: 1.15rem;
  font-weight: 600;
}

.v5-account-panel-subtitle, .v5-account-panel-status, .v5-footer-copy, .v5-footer-meta {
  color: var(--neutral-text);
  font-size: .9rem;
  line-height: 1.6;
}

.v5-account-panel-status {
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .6rem .75rem;
  font-size: .72rem;
  font-weight: 700;
}

.v5-account-panel-links {
  gap: .5rem;
  display: grid;
}

.v5-account-panel-link {
  border: 1px solid var(--border);
  align-items: center;
  gap: .7rem;
  min-height: 2.6rem;
  padding: .65rem .8rem;
  font-size: .92rem;
  font-weight: 500;
  display: flex;
}

.v5-account-panel-link-button {
  text-align: left;
  background: none;
  width: 100%;
}

.v5-content {
  padding: 1.25rem 0 2rem;
}

.v5-footer {
  padding: 0 1.25rem 1.5rem;
}

.v5-footer-inner {
  border: 2px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .v5-footer-inner {
    background: color-mix(in srgb, var(--surface) 96%, white 4%);
  }
}

.v5-footer-inner {
  padding: 1rem 1.1rem;
}

.v5-footer-meta {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
}

.v5-sidebar-backdrop {
  z-index: 55;
  background: #00000073;
  position: fixed;
  inset: 0;
}

.page-container--full {
  max-width: none;
}

.live-panel, .live-card, .live-card-soft, .live-control, .live-callout, .live-insight, .live-badge {
  border-color: var(--border);
  box-shadow: none;
  border-radius: 0;
}

.live-panel {
  background: var(--surface);
  border-width: 2px;
}

@supports (color: color-mix(in lab, red, red)) {
  .live-panel {
    background: color-mix(in srgb, var(--surface) 97%, white 3%);
  }
}

.live-card {
  background: var(--surface);
  border-width: 1px;
}

@supports (color: color-mix(in lab, red, red)) {
  .live-card {
    background: color-mix(in srgb, var(--surface) 98%, white 2%);
  }
}

.live-card-soft, .ui-card-soft {
  background: var(--surface-soft);
}

@supports (color: color-mix(in lab, red, red)) {
  .live-card-soft, .ui-card-soft {
    background: color-mix(in srgb, var(--surface-soft) 94%, white 6%);
  }
}

.live-control, .ui-control {
  background: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .live-control, .ui-control {
    background: color-mix(in srgb, var(--surface) 98%, white 2%);
  }
}

.live-card:hover, .brutal-card-link:hover, .ui-card:hover {
  box-shadow: 6px 6px 0 var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .live-card:hover, .brutal-card-link:hover, .ui-card:hover {
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--border) 18%, transparent 82%);
  }
}

.live-badge {
  background: var(--surface);
  color: var(--foreground);
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-width: 1px;
  align-items: center;
  gap: .35rem;
  padding: .38rem .7rem;
  font-size: .67rem;
  font-weight: 700;
  display: inline-flex;
}

.live-badge[data-tone="owned"], .live-badge[data-tone="cheapest"], .live-badge[data-tone="accent"], .live-badge[data-tone="current"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.live-badge[data-tone="premium"], .live-badge[data-tone="high-value"] {
  background: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .live-badge[data-tone="premium"], .live-badge[data-tone="high-value"] {
    background: color-mix(in srgb, var(--foreground) 8%, var(--surface) 92%);
  }
}

.live-badge[data-tone="missing"] {
  color: #991b1b;
  background: #fee2e2;
}

.live-badge[data-tone="game"] {
  background: var(--foreground);
  color: var(--background);
}

.live-insight, .live-callout {
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

@supports (color: color-mix(in lab, red, red)) {
  .live-insight, .live-callout {
    background: color-mix(in srgb, var(--surface-soft) 96%, white 4%);
  }
}

.live-insight, .live-callout {
  color: var(--foreground);
}

.live-insight[data-tone="owned"], .live-insight[data-tone="cheapest"], .live-callout[data-tone="owned"], .live-callout[data-tone="cheapest"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.live-segmented {
  border-color: var(--border);
  background: var(--surface-soft);
}

.live-segmented-item[data-active="true"] {
  background: var(--foreground);
  color: var(--background);
}

.v5-accent-swatch {
  border: 1px solid var(--border);
  background: var(--accent);
  width: 1rem;
  height: 1rem;
  display: inline-flex;
}

.v5-accent-swatch[data-accent="amber"] {
  background: #c26d05;
}

.v5-accent-swatch[data-accent="indigo"] {
  background: #4338ca;
}

.v5-accent-swatch[data-accent="rose"] {
  background: #be123c;
}

.v5-accent-swatch[data-accent="mono"] {
  background: #111;
}

body.collectit-v5 [class*="text-teal-"] {
  color: var(--accent) !important;
}

body.collectit-v5 [class*="border-teal-"] {
  border-color: var(--accent) !important;
}

@supports (color: color-mix(in lab, red, red)) {
  body.collectit-v5 [class*="border-teal-"] {
    border-color: color-mix(in srgb, var(--accent) 45%, white 55%) !important;
  }
}

body.collectit-v5 [class*="bg-teal-50"] {
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
}

body.collectit-v5 [class*="bg-teal-600"], body.collectit-v5 [class*="bg-teal-700"], body.collectit-v5 [class*="bg-teal-800"] {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}

body.collectit-v5[data-theme="dark"] [class*="text-zinc-95"], body.collectit-v5[data-theme="dark"] [class*="text-zinc-90"], body.collectit-v5[data-theme="dark"] [class*="text-zinc-80"], body.collectit-v5[data-theme="dark"] [class*="text-zinc-70"] {
  color: var(--foreground) !important;
}

body.collectit-v5[data-theme="dark"] [class*="text-zinc-60"], body.collectit-v5[data-theme="dark"] [class*="text-zinc-50"], body.collectit-v5[data-theme="dark"] [class*="text-zinc-40"] {
  color: #a1a1aa !important;
}

body.collectit-v5[data-theme="dark"] [class*="bg-white"], body.collectit-v5[data-theme="dark"] [class*="bg-zinc-50"], body.collectit-v5[data-theme="dark"] [class*="bg-zinc-100"] {
  background: var(--surface) !important;
}

body.collectit-v5[data-theme="dark"] [class*="border-zinc-"], body.collectit-v5[data-theme="dark"] [class*="border-black"] {
  border-color: var(--border-soft) !important;
}

body.collectit-v5[data-theme="dark"] .live-badge[data-tone="game"] {
  background: var(--accent);
  color: var(--accent-fg);
}

body.collectit-v5[data-theme="dark"] .v5-sidebar, body.collectit-v5[data-theme="dark"] .v5-topbar, body.collectit-v5[data-theme="dark"] .v5-footer-inner, body.collectit-v5[data-theme="dark"] .v5-account-panel {
  background: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  body.collectit-v5[data-theme="dark"] .v5-sidebar, body.collectit-v5[data-theme="dark"] .v5-topbar, body.collectit-v5[data-theme="dark"] .v5-footer-inner, body.collectit-v5[data-theme="dark"] .v5-account-panel {
    background: color-mix(in srgb, var(--surface) 96%, black 4%);
  }
}

body.collectit-v5[data-theme="dark"] .v5-brand-mark, body.collectit-v5[data-theme="dark"] .v5-account-avatar {
  background: var(--accent);
  color: var(--accent-fg);
}

@media (max-width: 1100px) {
  .v5-topbar-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .v5-topbar-search {
    grid-column: 1 / -1;
  }

  .v5-topbar-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 1024px) {
  .v5-sidebar {
    transform: translateX(-100%);
  }

  .v5-sidebar-mobile-open {
    transform: translateX(0);
  }

  .v5-main, .v5-shell-sidebar-collapsed .v5-main {
    margin-left: 0;
  }

  .v5-topbar-mobile {
    display: flex;
  }

  .v5-shell-sidebar-collapsed .v5-brand-copy, .v5-shell-sidebar-collapsed .v5-sidebar-label, .v5-shell-sidebar-collapsed .v5-sidebar-link span {
    display: initial;
  }
}

@media (max-width: 720px) {
  .v5-topbar-row, .v5-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .v5-topbar-actions {
    gap: .4rem;
  }

  .v5-topbar-button, .v5-topbar-select, .v5-account-button {
    justify-content: center;
    width: 100%;
  }

  .v5-topbar-group {
    width: 100%;
  }

  .v5-topbar-group .v5-topbar-button {
    flex: 1;
  }

  .v5-account-copy {
    display: none;
  }
}

.v5-home-page {
  padding: 32px 0 56px;
}

.home-content-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

body.collectit-v5[data-view="extended"] .home-content-shell {
  max-width: 1380px;
}

body.collectit-v5[data-view="wide"] .home-content-shell {
  max-width: 1700px;
}

.hero-banner {
  border: 2px solid var(--border);
  color: #fff;
  background: linear-gradient(90deg, #050505e6 0%, #050505b8 52%, #0505052e 100%), #050505;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  min-height: 290px;
  padding: 34px 32px;
  display: flex;
  position: relative;
  overflow: hidden;
}

@keyframes watermark-drift {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-24px);
  }

  100% {
    transform: translateX(0);
  }
}

.hero-banner:before {
  content: "COLLECT-IT";
  font-family: var(--font-display), serif;
  letter-spacing: -5px;
  color: #ffffff0a;
  pointer-events: none;
  animation: watermark-drift var(--motion-drift) var(--ease-standard) infinite;
  will-change: transform;
  z-index: 0;
  font-size: 120px;
  font-weight: 700;
  position: absolute;
  bottom: -20px;
  right: -20px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-banner:before {
    animation: none;
  }
}

.hero-eyebrow, .sv-eyebrow, .storage-empty-eyebrow {
  font-family: var(--font-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ffffffc7;
  font-size: 10px;
  font-weight: 700;
}

.hero-title {
  font-family: var(--font-display), serif;
  letter-spacing: -.05em;
  font-size: clamp(2.2rem, 5vw, 4.35rem);
  line-height: .98;
}

.hero-sub {
  color: #ffffffd1;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.65;
}

.hero-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  display: grid;
}

.hero-stat-val {
  font-family: var(--font-display), serif;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1;
}

.hero-stat-lbl {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffffb8;
  margin-top: 6px;
  font-size: 10px;
}

.home-two-col {
  margin-top: 28px;
  display: block;
}

body.collectit-v5[data-view="extended"] .home-two-col, body.collectit-v5[data-view="wide"] .home-two-col {
  grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr);
  align-items: start;
  gap: 24px;
  display: grid;
}

body.collectit-v5[data-view="wide"] .home-two-col {
  grid-template-columns: minmax(0, 1.95fr) minmax(360px, .98fr);
  gap: 28px;
}

.home-left, .home-right {
  min-width: 0;
}

.home-right {
  align-content: start;
  gap: 22px;
  display: grid;
}

.sec-hdr {
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.sec-title, .sp-title, .sv-title {
  font-family: var(--font-display), serif;
  color: var(--foreground);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1;
}

.sec-sub, .sp-subtitle, .sv-subtitle, .slot-editor-subtitle {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.sec-action {
  font-family: var(--font-mono), monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  text-underline-offset: 4px;
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
}

.release-row, .mover-row {
  border: 2px solid var(--border);
  background: var(--surface);
  color: inherit;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
  display: grid;
}

.release-row + .release-row, .activity-row + .activity-row, .panel + .panel, .mover-row + .mover-row {
  margin-top: 12px;
}

.release-row:hover, .mover-row:hover, .news-card:hover {
  border-color: var(--accent);
}

.release-row, .mover-row {
  transition: background-color var(--motion-quick)   var(--ease-standard),
    border-color     var(--motion-quick)   var(--ease-standard),
    transform        var(--motion-default) var(--ease-release);
}

.release-row:active, .mover-row:active {
  transition-duration: var(--motion-instant);
  transition-timing-function: var(--ease-press);
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .release-row:active, .mover-row:active {
    transform: none;
  }
}

.release-date-box {
  border: 2px solid var(--border);
  background: var(--surface-alt);
  text-align: center;
  width: 62px;
  padding: 8px 6px;
}

.release-date-mon, .release-date-day, .release-code, .news-card-meta, .panel-hdr, .stat-label, .sparkline-meta {
  font-family: var(--font-mono), monospace;
  text-transform: uppercase;
}

.release-date-mon, .news-card-meta {
  letter-spacing: .14em;
  color: var(--neutral-text);
  font-size: 10px;
}

.release-date-day {
  letter-spacing: -.04em;
  margin-top: 2px;
  font-size: 22px;
  font-weight: 700;
}

.release-name, .mover-name {
  font-family: var(--font-display), serif;
  font-size: 18px;
  line-height: 1.05;
}

.release-code, .mover-set {
  letter-spacing: .08em;
  color: var(--accent);
  margin-top: 5px;
  font-size: 11px;
}

.badge {
  border: 1px solid var(--border);
  min-height: 28px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.badge-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg, #fff);
}

.release-arrow {
  color: var(--neutral-text);
  font-size: 18px;
}

.activity-row {
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
  padding: 12px 0;
  display: flex;
}

.activity-dot {
  background: var(--accent);
  border-radius: 999px;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 8px;
}

.activity-text {
  font-size: 14px;
  line-height: 1.6;
}

.activity-time {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  margin-top: 4px;
  font-size: 10px;
}

.panel {
  border: 2px solid var(--border);
  background: var(--surface);
}

.panel-hdr {
  border-bottom: 2px solid var(--border);
  letter-spacing: .14em;
  color: var(--neutral-text);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.panel-body {
  padding: 16px;
}

.mover-thumb {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  width: 56px;
}

.mover-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.mover-price {
  text-align: right;
}

.mover-val, .snapshot-value {
  font-family: var(--font-display), serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1;
}

.mover-chg, .stat-delta {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
}

.mover-chg.up, .stat-delta.up {
  color: #15803d;
}

.mover-chg.dn, .stat-delta.dn {
  color: #b91c1c;
}

.stat-label, .sparkline-meta {
  letter-spacing: .12em;
  color: var(--neutral-text);
  font-size: 10px;
}

.snapshot-secondary {
  font-family: var(--font-display), serif;
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.3;
}

.sparkline {
  grid-template-columns: repeat(20, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  min-height: 124px;
  display: grid;
}

.spark-bar {
  background: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .spark-bar {
    background: color-mix(in srgb, var(--foreground) 18%, transparent);
  }
}

.spark-bar.hi {
  background: var(--accent);
}

@keyframes spark-grow {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

.spark-bar {
  transform-origin: bottom;
  animation: spark-grow var(--motion-enter) var(--ease-enter) both;
}

.spark-bar:first-child {
  animation-delay: 0s;
}

.spark-bar:nth-child(2) {
  animation-delay: 20ms;
}

.spark-bar:nth-child(3) {
  animation-delay: 40ms;
}

.spark-bar:nth-child(4) {
  animation-delay: 60ms;
}

.spark-bar:nth-child(5) {
  animation-delay: 80ms;
}

.spark-bar:nth-child(6) {
  animation-delay: .1s;
}

.spark-bar:nth-child(7) {
  animation-delay: .12s;
}

.spark-bar:nth-child(8) {
  animation-delay: .14s;
}

.spark-bar:nth-child(9) {
  animation-delay: .16s;
}

.spark-bar:nth-child(10) {
  animation-delay: .18s;
}

.spark-bar:nth-child(11) {
  animation-delay: .2s;
}

.spark-bar:nth-child(12) {
  animation-delay: .22s;
}

.spark-bar:nth-child(13) {
  animation-delay: .24s;
}

.spark-bar:nth-child(14) {
  animation-delay: .26s;
}

.spark-bar:nth-child(15) {
  animation-delay: .28s;
}

.spark-bar:nth-child(16) {
  animation-delay: .3s;
}

.spark-bar:nth-child(17) {
  animation-delay: .32s;
}

.spark-bar:nth-child(18) {
  animation-delay: .34s;
}

.spark-bar:nth-child(19) {
  animation-delay: .36s;
}

.spark-bar:nth-child(20) {
  animation-delay: .38s;
}

@media (prefers-reduced-motion: reduce) {
  .spark-bar {
    transform-origin: unset;
    animation: none;
  }
}

.sparkline-meta {
  margin-top: 10px;
}

.hero-actions-strip {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  display: flex;
}

.hero-action-link {
  border: 2px solid var(--border);
  background: var(--surface);
  min-height: 42px;
  color: var(--foreground);
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  align-items: center;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.hero-action-link:hover {
  background: var(--foreground);
  color: var(--background);
}

.hero-action-link {
  transition: color            var(--motion-quick)   var(--ease-standard),
    background-color var(--motion-quick)   var(--ease-standard),
    border-color     var(--motion-quick)   var(--ease-standard),
    transform        var(--motion-default) var(--ease-release);
}

.hero-action-link:active {
  transition-duration: var(--motion-instant);
  transition-timing-function: var(--ease-press);
  transform: translateY(1px)scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  .hero-action-link:active {
    transform: none;
  }
}

.home-news-strip {
  margin-top: 28px;
}

.home-news-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.news-card {
  border: 2px solid var(--border);
  background: var(--surface);
  padding: 18px;
}

.news-card h2 {
  font-family: var(--font-display), serif;
  margin-top: 10px;
  font-size: 24px;
  line-height: 1;
}

.news-card p {
  color: var(--neutral-text);
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
}

.storage-route-page {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
}

.live-shell .v5-content:has(.storage-route-page) {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding-block: 0;
  display: flex;
}

.page-container--full:has(.storage-route-page) {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding-inline: 0;
  display: flex;
}

.storage-shell {
  border: 2px solid var(--border);
  background: var(--surface);
  grid-template-columns: 272px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

body.collectit-v5[data-view="wide"] .storage-shell, body.collectit-v5[data-view="extended"] .storage-shell, body.collectit-v5[data-view="regular"] .storage-shell {
  grid-template-columns: 272px minmax(0, 1fr);
}

.storage-panel {
  border-right: 2px solid var(--border);
  background: var(--surface);
  flex-direction: column;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.sp-header, .storage-modal-head {
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 16px 14px;
  display: flex;
}

.sv-topbar {
  z-index: 10;
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  align-items: flex-start;
  gap: 12px;
  padding: 18px 24px 14px;
  display: flex;
  position: sticky;
  top: 0;
}

.storage-panel .sp-title {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 600;
}

.storage-panel .sp-subtitle {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--foreground);
  margin-top: 4px;
  font-size: 10px;
}

@supports (color: color-mix(in lab, red, red)) {
  .storage-panel .sp-subtitle {
    color: color-mix(in srgb, var(--foreground) 52%, transparent);
  }
}

.storage-viewer .sv-title {
  font-family: var(--font-display), serif;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.06;
}

.storage-viewer .sv-subtitle {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.sp-add-btn, .sv-btn {
  border: 2px solid var(--border-soft);
  background: var(--surface);
  min-height: 32px;
  color: var(--foreground);
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
}

.sp-add-btn:hover, .sv-btn:hover {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}

.dark-toggle {
  border: 2px solid var(--border);
  background: var(--surface);
  width: 42px;
  height: 24px;
  position: relative;
}

.dark-toggle:after {
  content: "";
  background: var(--foreground);
  width: 16px;
  height: 16px;
  transition: transform .12s;
  position: absolute;
  top: 2px;
  left: 2px;
}

body.collectit-v5[data-theme="dark"] .dark-toggle {
  background: var(--accent);
  border-color: var(--accent);
}

body.collectit-v5[data-theme="dark"] .dark-toggle:after {
  background: var(--accent-fg, #fff);
  transform: translateX(18px);
}

.sv-btn-danger {
  color: var(--danger-text);
  border-color: var(--danger-border);
}

.sp-list {
  flex-direction: column;
  flex: 1;
  padding: 8px 0 16px;
  display: flex;
  overflow-y: auto;
}

.sp-group + .sp-group {
  margin-top: 6px;
}

.sp-section {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 4px;
  font-size: 9px;
  font-weight: 600;
  display: flex;
}

.sp-count {
  background: var(--surface3);
  color: var(--neutral-text);
  padding: 1px 5px;
}

.sp-item {
  text-align: left;
  width: 100%;
  color: var(--foreground);
  background: none;
  border-left: 2px solid #0000;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  display: flex;
  position: relative;
}

.sp-item:hover {
  background: var(--surface2);
}

.sp-item[data-active="true"] {
  background: var(--foreground);
  border-left-color: var(--accent);
  color: var(--background);
}

.sp-status-dot {
  background: var(--accent);
  width: 6px;
  height: 6px;
  margin-left: auto;
}

.sp-status-dot.is-inactive {
  background: var(--subtle);
}

.sp-item-icon {
  border: 2px solid var(--border-soft);
  background: var(--surface);
  width: 30px;
  height: 30px;
  color: var(--foreground);
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: inline-flex;
}

.sp-item[data-active="true"] .sp-item-icon {
  border-color: #ffffff4d;
}

.sp-item-info {
  flex: 1;
  min-width: 0;
}

.sp-item-name {
  font-family: var(--font-sans), sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
}

.sp-item-sub {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  color: var(--neutral-text);
  margin-top: 4px;
  font-size: 10px;
}

.sp-item[data-active="true"] .sp-item-sub {
  color: #ffffff85;
}

.storage-viewer {
  background: var(--bg);
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: auto;
}

.sv-heading {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 12px;
  display: flex;
}

.sv-type-pill {
  border: 2px solid var(--accent);
  background: var(--accent);
  min-height: 22px;
  color: var(--accent-fg, #fff);
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 600;
  display: inline-flex;
}

.sv-heading > .sv-subtitle:not(.sv-subtitle-live) {
  display: none;
}

.sv-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.storage-alert {
  border-bottom: 2px solid var(--border);
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .storage-alert {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface2));
  }
}

.storage-alert {
  padding: 12px 16px;
  font-size: 13px;
}

.storage-alert[data-kind="success"] {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .storage-alert[data-kind="success"] {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
  }
}

.storage-alert[data-kind="error"] {
  background: #ef4444;
}

@supports (color: color-mix(in lab, red, red)) {
  .storage-alert[data-kind="error"] {
    background: color-mix(in srgb, #ef4444 10%, var(--surface2));
  }
}

.storage-alert[data-kind="error"] {
  color: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .storage-alert[data-kind="error"] {
    color: color-mix(in srgb, var(--foreground) 88%, #7f1d1d 12%);
  }
}

.sv-selection-chip {
  border: 2px solid var(--accent);
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .sv-selection-chip {
    border: 2px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  }
}

.sv-selection-chip {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .sv-selection-chip {
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  }
}

.sv-selection-chip {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 700;
}

.storage-selection-bar, .storage-unfiled-banner {
  border-bottom: 2px solid var(--border);
  background: var(--accent);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .storage-selection-bar, .storage-unfiled-banner {
    background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  }
}

.storage-selection-copy {
  gap: 4px;
  display: grid;
}

.storage-selection-eyebrow {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: 9px;
  font-weight: 600;
}

.storage-selection-title {
  font-family: var(--font-sans), sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.storage-selection-meta, .storage-unfiled-banner span {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.storage-selection-actions {
  gap: 8px;
  display: inline-flex;
}

.storage-unfiled-banner.is-binder-pending {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .storage-unfiled-banner.is-binder-pending {
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  }
}

.storage-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
}

.binder-stage, .section-stage, .storage-empty-state {
  padding: 28px 32px;
}

.storage-empty-eyebrow {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 600;
}

.binder-toolbar, .binder-footer {
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  display: flex;
}

.binder-footer {
  margin-top: 18px;
}

.binder-page-label {
  text-align: center;
  min-width: 220px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}

.binder-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.binder-slot, .section-slot {
  border: 2px dashed var(--border-soft);
  background: var(--surface-alt);
  position: relative;
  overflow: hidden;
}

.binder-slot {
  aspect-ratio: 420 / 614;
}

.section-slot {
  min-height: 132px;
  padding: 8px;
}

.binder-slot:hover, .section-slot:hover, .binder-slot.is-active, .section-slot.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.binder-slot-image, .section-slot-image {
  width: 100%;
  height: 100%;
}

.binder-slot-image img, .section-slot-image img, .slot-editor-preview-image img, .unfiled-thumb img, .storage-search-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.binder-slot-qty, .binder-slot-num {
  background: var(--accent);
  min-width: 20px;
  color: var(--accent-fg, #fff);
  font-family: var(--font-mono), monospace;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 700;
  position: absolute;
  bottom: 6px;
}

.binder-slot-qty {
  left: 6px;
}

.binder-slot-num {
  background: var(--foreground);
  right: 6px;
}

@supports (color: color-mix(in lab, red, red)) {
  .binder-slot-num {
    background: color-mix(in srgb, var(--foreground) 82%, transparent);
  }
}

.binder-slot-empty {
  width: 100%;
  height: 100%;
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.storage-sidecar {
  border-left: 2px solid var(--border);
  background: var(--surface);
  padding: 0;
}

.slot-editor-panel {
  border-bottom: 2px solid var(--border);
  padding: 20px;
}

.storage-form-field {
  gap: 8px;
  margin-top: 14px;
  display: grid;
}

.storage-form-field span {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 700;
}

.storage-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.storage-input, .storage-input-plain, .storage-textarea {
  border: 2px solid var(--border-soft);
  background: var(--surface-alt);
  width: 100%;
  color: var(--foreground);
  outline: none;
  min-height: 42px;
  padding: 0 12px;
}

.storage-textarea {
  resize: vertical;
  min-height: 128px;
  padding: 10px 12px;
}

.storage-input:focus, .storage-input-plain:focus, .storage-textarea:focus {
  border-color: var(--accent);
}

.storage-editor-actions, .storage-modal-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  display: flex;
}

.slot-editor-preview, .storage-search-result, .unfiled-item {
  border: 2px solid var(--border);
  background: var(--surface-alt);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin-top: 14px;
  padding: 10px;
  display: grid;
}

.slot-editor-preview-image {
  border: 1px solid var(--border);
  background: var(--surface);
  width: 92px;
}

.slot-editor-preview-name {
  font-family: var(--font-display), serif;
  font-size: 22px;
  line-height: 1;
}

.slot-editor-preview-meta, .unfiled-copy div:last-child, .storage-search-copy div:last-child, .storage-search-meta, .storage-empty-note {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  margin-top: 6px;
  font-size: 10px;
}

.unfiled-list {
  gap: 10px;
  display: grid;
}

.unfiled-thumb, .storage-search-thumb {
  border: 1px solid var(--border);
  background: var(--surface);
  width: 46px;
}

.storage-modal-backdrop {
  z-index: 80;
  background: #05050573;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
  position: fixed;
  inset: 0;
}

.storage-modal {
  border: 2px solid var(--border);
  background: var(--surface);
  width: min(720px, 100%);
  box-shadow: 0 18px 60px #0000002e;
}

.storage-modal-body {
  padding: 20px;
}

.storage-search-row {
  margin-bottom: 14px;
}

.storage-search-results {
  gap: 10px;
  max-height: 340px;
  display: grid;
  overflow-y: auto;
}

.storage-search-result {
  text-align: left;
  width: 100%;
  margin-top: 0;
}

.storage-search-result.is-active {
  border-color: var(--accent);
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .storage-search-result.is-active {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  }
}

.storage-search-meta {
  text-align: right;
}

.storage-empty-state {
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  max-width: 720px;
  min-height: 520px;
  display: flex;
}

.storage-empty-state h1 {
  font-family: var(--font-display), serif;
  letter-spacing: -.04em;
  font-size: clamp(2.1rem, 5vw, 3.7rem);
  line-height: .98;
}

.storage-empty-state p, .storage-empty-note p {
  color: var(--neutral-text);
  font-size: 14px;
  line-height: 1.7;
}

.section-stage {
  gap: 20px;
  display: grid;
}

.section-block {
  border: 2px solid var(--border);
  background: var(--surface);
  padding: 18px;
}

.section-slot-grid {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  display: grid;
}

.storage-stage-layout, .box-stage-v5 {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
  display: grid;
}

.storage-stage-content, .deck-list-panel {
  min-width: 0;
}

.storage-stage-header, .display-stage-head, .storage-stage-section-head {
  border-bottom: 2px solid var(--border);
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  padding-bottom: 10px;
  display: flex;
}

.storage-stage-section-head {
  margin-bottom: 14px;
}

.storage-stage-header-title, .storage-stage-section-title {
  font-family: var(--font-display), serif;
  font-size: 32px;
  line-height: 1;
}

.storage-stage-header-subtitle, .storage-stage-section-subtitle, .deck-box-help, .deck-box-meta, .box-stage-meta, .binder-stage-note, .storage-cover-name {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.storage-slot-image {
  width: 100%;
  height: 100%;
}

.storage-slot-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.storage-slot-qty, .storage-slot-badge {
  background: var(--accent);
  min-width: 20px;
  color: var(--accent-fg, #fff);
  font-family: var(--font-mono), monospace;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 700;
  position: absolute;
  bottom: 6px;
}

.storage-slot-qty {
  left: 6px;
}

.storage-slot-badge {
  background: var(--foreground);
  right: 6px;
}

@supports (color: color-mix(in lab, red, red)) {
  .storage-slot-badge {
    background: color-mix(in srgb, var(--foreground) 82%, transparent);
  }
}

.storage-slot-empty-label {
  width: 100%;
  height: 100%;
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.binder-stage-v5 {
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 32px;
  display: flex;
}

body.collectit-v5[data-view="extended"] .binder-stage-v5 {
  padding-inline: 48px;
}

body.collectit-v5[data-view="wide"] .binder-stage-v5 {
  padding-inline: 64px;
}

.binder-spread {
  background: #1c1410;
  border: 3px solid #0a0806;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 6px;
  transition: max-width .3s;
  display: flex;
  position: relative;
  box-shadow: 0 12px 40px #00000073, 0 2px 8px #0000004d;
}

body.collectit-v5[data-view="extended"] .binder-spread {
  max-width: 1200px;
}

body.collectit-v5[data-view="wide"] .binder-spread {
  max-width: 1600px;
}

.binder-spread:before {
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(90deg, #0000, #0000 60px, #ffffff03 60px 61px);
  position: absolute;
  inset: 0;
}

.binder-page-turn-zone {
  z-index: 5;
  background: none;
  border: 1px dashed #0000;
  width: 64px;
  transition: border-color .14s, background-color .14s;
  position: absolute;
  top: 18px;
  bottom: 18px;
}

.binder-page-turn-zone.is-left {
  left: -44px;
}

.binder-page-turn-zone.is-right {
  right: -44px;
}

.binder-page-turn-zone.is-armed {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .binder-page-turn-zone.is-armed {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

.binder-page-turn-zone.is-armed {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .binder-page-turn-zone.is-armed {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
}

.binder-page-v5 {
  background: var(--surface);
  flex: 1;
  min-width: 0;
  padding: 10px;
  transition: opacity 60ms;
  position: relative;
}

.binder-page-v5.is-left {
  border-right: 1px solid #0003;
}

.binder-page-v5.is-right {
  border-left: 1px solid #ffffff0d;
}

.binder-page-v5.is-placeholder {
  background: var(--surface2);
}

.binder-page-marker {
  border-bottom: 1px solid var(--border-soft);
  text-align: center;
  font-family: var(--font-mono), monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--neutral-text);
  margin-bottom: 8px;
  padding-bottom: 6px;
  font-size: 9px;
  font-weight: 600;
}

.binder-pocket-grid {
  gap: 6px;
  display: grid;
}

.binder-pocket, .deck-card-slot, .box-card-slot, .display-slot, .shelf-slot {
  border: 2px dashed var(--border-soft);
  background: var(--surface2);
  position: relative;
  overflow: hidden;
}

.binder-pocket {
  aspect-ratio: 420 / 614;
  justify-content: center;
  align-items: center;
  transition: border-color .12s, box-shadow .12s;
  display: flex;
}

.binder-pocket.is-occupied {
  border-style: solid;
  border-color: var(--border-soft);
}

.binder-pocket:hover, .deck-card-slot:hover, .box-card-slot:hover, .display-slot:hover, .shelf-slot:hover, .binder-pocket.is-active, .deck-card-slot.is-active, .box-card-slot.is-active, .display-slot.is-active, .shelf-slot.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.binder-spine {
  background: #1a1208;
  border-left: 1px solid #0a0806;
  border-right: 1px solid #0a0806;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: space-evenly;
  align-items: center;
  width: 26px;
  padding: 8px 2px;
  display: flex;
}

.binder-ring {
  background: linear-gradient(135deg, #999, #555);
  border: 2.5px solid #777;
  border-radius: 999px;
  width: 14px;
  height: 14px;
  box-shadow: 0 1px 2px #00000080;
}

.binder-controls {
  justify-content: center;
  align-items: center;
  gap: 14px;
  display: flex;
}

.binder-nav {
  border: 2px solid var(--border);
  background: var(--surface);
  width: 44px;
  height: 44px;
  color: var(--foreground);
  transition: background var(--t),
    color var(--t);
  -webkit-user-select: none;
  user-select: none;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  display: inline-flex;
}

.binder-nav:hover:not(:disabled) {
  background: var(--foreground);
  color: var(--background);
}

.binder-nav:disabled {
  opacity: .25;
  pointer-events: none;
}

.binder-spread-count {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.binder-stage-note {
  text-align: center;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.binder-pocket .storage-slot-badge {
  min-width: auto;
  color: var(--neutral-text);
  background: #ffffffc7;
  padding: 0 2px;
  font-size: 8px;
  line-height: 14px;
  bottom: 1px;
  right: 2px;
}

.binder-pocket .storage-slot-qty {
  min-width: auto;
  padding: 0 3px;
  font-size: 8px;
  line-height: 14px;
  bottom: 1px;
  left: 2px;
}

body.collectit-v5[data-theme="dark"] .binder-pocket .storage-slot-badge {
  background: #0000008c;
}

.slot-editor-title {
  font-family: var(--font-display), serif;
  font-size: 22px;
  line-height: 1;
}

.stg-modal-overlay {
  z-index: 90;
  background: #05050573;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: none;
  position: fixed;
  inset: 0;
}

.stg-modal-overlay.on {
  display: flex;
}

.stg-modal {
  border: 2px solid var(--border);
  background: var(--surface);
  width: min(760px, 100%);
  box-shadow: 0 18px 60px #0000002e;
}

.stg-modal-hdr {
  border-bottom: 2px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  display: flex;
}

.stg-modal-title {
  font-family: var(--font-display), serif;
  font-size: 30px;
  line-height: 1;
}

.stg-modal-close {
  border: 2px solid var(--border-soft);
  background: var(--surface);
  width: 38px;
  height: 38px;
  color: var(--foreground);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.stg-modal-close:hover {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}

.stg-type-row {
  border-bottom: 2px solid var(--border);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  display: grid;
}

.stg-type-cell {
  border-right: 1px solid var(--border-soft);
  background: var(--surface2);
  text-align: left;
  gap: 6px;
  padding: 14px 12px;
  display: grid;
}

.stg-type-cell:last-child {
  border-right: 0;
}

.stg-type-cell.sel {
  background: var(--foreground);
  color: var(--background);
}

.stg-type-icon {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}

.stg-type-name {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
}

.stg-modal-body {
  gap: 14px;
  padding: 20px;
  display: grid;
}

.stg-field {
  gap: 8px;
  display: grid;
}

.stg-label {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 700;
}

.stg-label em {
  color: var(--danger-text);
  font-style: normal;
}

.stg-input {
  border: 2px solid var(--border-soft);
  background: var(--surface-alt);
  width: 100%;
  min-height: 42px;
  color: var(--foreground);
  outline: none;
  padding: 0 12px;
}

.stg-input:focus {
  border-color: var(--accent);
}

.stg-input-hint {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.stg-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.stg-status-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.stg-status-opt {
  border: 2px solid var(--border-soft);
  background: var(--surface-alt);
  min-height: 38px;
  color: var(--foreground);
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}

.stg-status-opt.sel {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}

.stg-preview {
  border: 2px dashed var(--border-soft);
  background: var(--accent);
  padding: 12px 14px;
}

@supports (color: color-mix(in lab, red, red)) {
  .stg-preview {
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  }
}

.stg-preview {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 11px;
  line-height: 1.8;
}

.storage-delete-button {
  color: var(--danger-text);
  border-color: var(--danger-border);
}

.stg-modal-footer-note {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  align-self: center;
  margin-right: auto;
  font-size: 10px;
}

.deck-box-panel, .box-stage-hero {
  align-content: start;
  gap: 12px;
  display: grid;
}

.deck-box-visual {
  cursor: pointer;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: stretch;
  width: min(100%, 260px);
  padding-top: 26px;
  display: grid;
  position: relative;
}

.deck-box-lid, .deck-box-side {
  border: 2px solid var(--border);
  background: var(--foreground);
  color: var(--background);
  font-family: var(--font-mono), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.deck-box-lid {
  height: 28px;
  position: absolute;
  top: 0;
  left: 0;
  right: 36px;
}

.deck-box-front {
  border: 2px solid var(--border);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 100%);
  min-height: 340px;
}

@supports (color: color-mix(in lab, red, red)) {
  .deck-box-front {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #0a0a0a) 0%, color-mix(in srgb, var(--accent) 72%, #031818) 100%);
  }
}

.deck-box-front {
  padding: 22px 18px 14px;
}

.deck-box-side {
  writing-mode: vertical-rl;
  background: var(--foreground);
  transform: rotate(180deg);
}

@supports (color: color-mix(in lab, red, red)) {
  .deck-box-side {
    background: color-mix(in srgb, var(--foreground) 18%, var(--surface));
  }
}

.deck-box-side {
  color: var(--foreground);
}

.deck-box-front img {
  border: 2px solid #0003;
  width: 100%;
  height: auto;
}

.deck-stage-sections, .box-stage-sections {
  gap: 18px;
  margin-top: 18px;
  display: grid;
}

.deck-section-block, .box-section-block {
  border-top: 2px solid var(--border);
  padding-top: 16px;
}

.deck-section-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  display: grid;
}

.box-section-grid {
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 14px;
  display: grid;
}

.deck-card-slot, .box-card-slot {
  min-height: 208px;
  padding: 8px;
}

.box-stage-visual {
  border: 2px solid var(--border);
  background: linear-gradient(180deg, var(--foreground) 0%, var(--foreground) 100%);
  padding: 20px;
}

@supports (color: color-mix(in lab, red, red)) {
  .box-stage-visual {
    background: linear-gradient(180deg, color-mix(in srgb, var(--foreground) 96%, #101010) 0%, color-mix(in srgb, var(--foreground) 84%, #1b1b1c) 100%);
  }
}

.box-stage-lid {
  font-family: var(--font-mono), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f5f5f5;
  margin-bottom: 14px;
  font-size: 10px;
  font-weight: 700;
}

.box-stage-strip {
  align-items: end;
  gap: 4px;
  min-height: 84px;
  display: flex;
  overflow: hidden;
}

.box-stage-strip-card {
  border: 1px solid #ffffff38;
  width: 40px;
}

.display-stage-v5 {
  padding: 24px;
}

.display-stage-frame {
  border: 2px solid var(--border);
  background: var(--surface);
  max-width: 1040px;
  padding: 20px;
}

.display-slot-row {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 16px;
  margin-top: 18px;
  display: grid;
}

.display-slot {
  min-height: 244px;
  padding: 10px;
}

.shelf-stage-v5 {
  gap: 18px;
  padding: 24px;
  display: grid;
}

.shelf-row-block {
  border-top: 14px solid var(--foreground);
  border-bottom: 6px solid var(--foreground);
  background: var(--surface);
  padding: 14px 16px 18px;
}

.shelf-row-label {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 700;
}

.shelf-row-grid {
  grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
  gap: 12px;
  display: grid;
}

.shelf-slot {
  min-height: 178px;
  padding: 8px;
}

.storage-cover-modal {
  width: min(520px, 100%);
}

.storage-cover-grid {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 12px;
  display: grid;
}

.storage-cover-option {
  border: 2px solid var(--border-soft);
  background: var(--surface-alt);
  text-align: left;
  width: 100%;
  padding: 10px;
}

.storage-cover-option.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.storage-cover-thumb {
  aspect-ratio: .72;
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.storage-cover-thumb-image {
  object-fit: contain;
  object-position: center;
  display: block;
}

.storage-gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
  display: grid;
}

.storage-gallery-card {
  border: 2px solid var(--border);
  background: var(--surface);
  text-align: left;
  color: var(--foreground);
  cursor: pointer;
  transition: border-color var(--t),
    transform var(--t),
    box-shadow var(--t);
  gap: 0;
  padding: 0;
  display: grid;
}

.storage-gallery-card:hover, .storage-gallery-card.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  transform: translateY(-1px);
}

.storage-gallery-card[draggable="true"] {
  cursor: grab;
}

.storage-gallery-card.is-dragging {
  opacity: .42;
  transform: scale(.98);
}

.storage-gallery-card.is-drop-target-before {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent),
    inset 0 0 0 1px var(--accent);
}

.storage-gallery-card-media {
  aspect-ratio: 150 / 214;
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
  position: relative;
}

.storage-gallery-card-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.storage-gallery-card-qty {
  background: var(--accent);
  min-width: 20px;
  color: var(--accent-fg, #fff);
  font-family: var(--font-mono), monospace;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 700;
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.storage-gallery-card-copy {
  gap: 4px;
  padding: 10px 12px 12px;
  display: grid;
}

.storage-gallery-card-name {
  font-family: var(--font-sans), sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
}

.storage-gallery-card-meta, .deckbox-panel-subtitle, .deckbox-panel-meta, .deckbox-click-hint, .sbox-panel-meta, .sbox-click-hint, .dcase-top-label, .dcase-location, .sbox-empty-note {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.storage-gallery-grid.is-drop-target {
  border: 1px dashed var(--accent);
  padding: 8px;
}

@supports (color: color-mix(in lab, red, red)) {
  .storage-gallery-grid.is-drop-target {
    border: 1px dashed color-mix(in srgb, var(--accent) 48%, var(--border));
  }
}

.storage-gallery-grid.is-drop-target {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .storage-gallery-grid.is-drop-target {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
  }
}

.sp-item-badge {
  border: 1px solid var(--border);
  background: var(--accent);
  color: #fff;
  min-width: 24px;
  font-family: var(--font-mono), monospace;
  text-align: center;
  margin-left: auto;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.draft-stage-shell {
  min-height: 100%;
  display: grid;
}

.draft-stage-shell.has-sidecar {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.draft-stage-main {
  background: linear-gradient(#ffffffc7 0%, #ffffff75 100%), linear-gradient(90deg, #0f766e0a, #0000 28%);
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  display: flex;
}

.draft-stage-overview {
  border-top: 2px solid var(--border);
  border-bottom: 1px solid var(--border-soft);
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding: 18px 20px 16px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .draft-stage-overview {
    border-bottom: 1px solid color-mix(in srgb, var(--border-soft) 72%, white 28%);
  }
}

.draft-stage-overview {
  background: linear-gradient(135deg, #0f766e14, transparent 45%),
    var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .draft-stage-overview {
    background: linear-gradient(135deg, #0f766e14, transparent 45%),
    color-mix(in srgb, var(--surface) 94%, white 6%);
  }
}

.draft-stage-overview-copy {
  gap: 6px;
  max-width: 720px;
  display: grid;
}

.draft-stage-overline {
  font-family: var(--font-mono), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

.draft-stage-overview-title {
  font-family: var(--font-display), serif;
  font-size: clamp(1.1rem, 1.2vw, 1.45rem);
  line-height: 1.08;
}

.draft-stage-overview-stat {
  border: 2px solid var(--border);
  background: var(--surface);
  justify-items: end;
  gap: 2px;
  min-width: 132px;
  padding: 10px 12px;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .draft-stage-overview-stat {
    background: color-mix(in srgb, var(--surface) 92%, white 8%);
  }
}

.draft-stage-overview-stat {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 9px;
  font-weight: 700;
}

.draft-stage-overview-stat span {
  font-family: var(--font-display), serif;
  letter-spacing: -.04em;
  color: var(--foreground);
  font-size: 1.9rem;
  line-height: .9;
}

.draft-stage-sortbar {
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .draft-stage-sortbar {
    background: color-mix(in srgb, var(--surface) 94%, white 6%);
  }
}

.draft-stage-sorttabs {
  flex-wrap: wrap;
  align-items: stretch;
  min-width: 0;
  display: flex;
}

.draft-stage-sortlabel, .draft-stage-sortbtn {
  border-right: 2px solid var(--border);
  min-height: 28px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.draft-stage-sortlabel {
  color: var(--neutral-text);
}

.draft-stage-sortbtn {
  color: var(--neutral-text);
  background: none;
}

.draft-stage-sortbtn:hover, .draft-stage-sortbtn.is-active {
  background: var(--foreground);
  color: var(--background);
}

.draft-stage-sortdir {
  opacity: .7;
}

.draft-stage-count {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  white-space: nowrap;
  padding: 0 16px;
  font-size: 10px;
  font-weight: 700;
}

.draft-stage-grid {
  background: linear-gradient(#ffffff70, #fff0), repeating-linear-gradient(90deg, #0000, #0000 72px, #0f172a05 72px 73px);
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(122px, 122px));
  place-content: start;
  gap: 16px;
  padding: 22px 22px 28px;
  display: grid;
}

.draft-card-tile {
  border: 2px solid var(--border);
  background: linear-gradient(180deg, #fffffffa, #f6f3eaf5),
    var(--surface);
  text-align: left;
  color: var(--foreground);
  align-content: start;
  gap: 9px;
  padding: 0 0 12px;
  transition: border-color .12s, box-shadow .12s, transform .12s, opacity .12s;
  display: grid;
  box-shadow: 6px 6px #0f172a0f;
}

.draft-card-tile:hover, .draft-card-tile.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  transform: translateY(-2px);
}

.draft-card-tile.is-selected {
  box-shadow: inset 0 0 0 1px var(--accent),
    8px 8px 0 var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .draft-card-tile.is-selected {
    box-shadow: inset 0 0 0 1px var(--accent),
    8px 8px 0 color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

.draft-card-tile.is-dragging {
  opacity: .5;
  transform: translateY(-4px)rotate(-1deg);
}

.draft-card-media {
  border-bottom: 2px solid var(--border);
  background: linear-gradient(180deg, #ffffffc7, #ede9ddd1),
    var(--surface2);
  min-height: 158px;
  padding: 8px;
  position: relative;
}

.draft-card-media img {
  object-fit: contain;
  border: 1px solid var(--border-soft);
  width: 100%;
  height: auto;
  display: block;
}

@supports (color: color-mix(in lab, red, red)) {
  .draft-card-media img {
    border: 1px solid color-mix(in srgb, var(--border-soft) 85%, white 15%);
  }
}

.draft-card-media img {
  background: #fff;
}

.draft-card-placeholder {
  min-height: 158px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.draft-card-drag-handle {
  border: 1px solid var(--border-soft);
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: inline-flex;
  position: absolute;
  top: 6px;
  left: 6px;
}

@supports (color: color-mix(in lab, red, red)) {
  .draft-card-drag-handle {
    border: 1px solid color-mix(in srgb, var(--border-soft) 70%, white 30%);
  }
}

.draft-card-drag-handle {
  color: var(--neutral-text);
  pointer-events: none;
  background: #ffffffe0;
}

.draft-card-check {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 5px;
  font-size: 9px;
  font-weight: 700;
  position: absolute;
  top: 6px;
  right: 6px;
}

.draft-card-name {
  font-family: var(--font-display), serif;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 0 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.18;
  display: -webkit-box;
  overflow: hidden;
}

.draft-card-meta, .draft-card-rarity, .draft-card-value, .draft-stage-rail-label, .draft-stage-destination-meta, .draft-binder-panel-sub, .draft-binder-current-meta, .draft-binder-current-price, .draft-binder-recommended, .draft-binder-remaining-item span:last-child {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 9px;
}

.draft-card-meta {
  min-height: 22px;
  padding: 0 9px;
  line-height: 1.35;
}

.draft-card-foot {
  border-top: 1px solid var(--border-soft);
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 9px 0;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .draft-card-foot {
    border-top: 1px solid color-mix(in srgb, var(--border-soft) 60%, white 40%);
  }
}

.draft-card-value {
  color: var(--foreground);
  font-weight: 700;
}

.draft-stage-rail {
  background: linear-gradient(180deg, #fffffff5, #f6f3eaf5),
    var(--surface);
  flex-direction: column;
  min-height: 100%;
  display: flex;
}

.draft-stage-rail-head {
  border-bottom: 2px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.draft-stage-rail-title {
  font-size: 14px;
  font-weight: 600;
}

.draft-stage-rail-subtitle {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  margin-top: 6px;
  font-size: 9px;
}

.draft-stage-rail-label {
  border-bottom: 2px solid var(--border);
  padding: 12px 14px;
}

.draft-stage-destinations {
  flex: 1;
  overflow: auto;
}

.draft-stage-destination {
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  width: 100%;
  color: var(--foreground);
  background: none;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  display: flex;
}

.draft-stage-destination:hover, .draft-stage-destination.is-active {
  background: var(--accent-subtle);
}

@supports (color: color-mix(in lab, red, red)) {
  .draft-stage-destination:hover, .draft-stage-destination.is-active {
    background: color-mix(in srgb, var(--accent-subtle) 80%, white 20%);
  }
}

.draft-stage-destination.is-drop-target {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .draft-stage-destination.is-drop-target {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  }
}

.draft-stage-destination.is-drop-target {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.draft-stage-destination.is-active {
  box-shadow: inset 3px 0 0 0 var(--accent);
}

.draft-stage-destination-mark {
  background: var(--accent);
  color: #fff;
  min-width: 28px;
  min-height: 18px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.draft-stage-destination-copy {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.draft-stage-destination-name {
  font-size: 12px;
  font-weight: 600;
}

.draft-stage-destination-dropcopy {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 2px;
  font-size: 9px;
}

@supports (color: color-mix(in lab, red, red)) {
  .draft-stage-destination-dropcopy {
    color: color-mix(in srgb, var(--accent) 72%, var(--neutral-text));
  }
}

.draft-stage-empty-rail {
  gap: 12px;
  padding: 16px 14px;
  display: grid;
}

.draft-stage-assignbar {
  border-top: 2px solid var(--border);
  background: linear-gradient(180deg, #fffffff5, #f4f1e7f5),
    var(--surface);
  padding: 14px;
  position: sticky;
  bottom: 0;
}

.draft-stage-assignbar .sv-btn {
  justify-content: center;
  width: 100%;
}

.draft-binder-modal {
  border: 2px solid var(--border);
  background: var(--surface);
  grid-template-columns: minmax(0, 1fr) 320px;
  width: min(1540px, 100vw - 48px);
  height: min(920px, 100vh - 48px);
  display: grid;
  overflow: hidden;
}

.draft-binder-main {
  background: var(--surface-alt);
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.draft-binder-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.draft-binder-side {
  border-left: 2px solid var(--border);
  background: var(--surface);
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.draft-binder-panel {
  border-bottom: 2px solid var(--border);
  padding: 14px;
}

.draft-binder-panel-title {
  font-size: 18px;
  font-weight: 700;
}

.draft-binder-current {
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  margin-top: 10px;
  display: grid;
}

.draft-binder-current-media {
  border: 2px solid var(--border);
  background: var(--surface2);
}

.draft-binder-current-media img {
  width: 100%;
  height: auto;
  display: block;
}

.draft-binder-current-copy {
  gap: 6px;
  display: grid;
}

.draft-binder-current-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.draft-binder-current-hint {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  margin-top: 8px;
  font-size: 9px;
}

.draft-binder-recommended {
  margin-top: 10px;
}

.draft-binder-remaining {
  flex: 1;
  min-height: 0;
}

.draft-binder-remaining-list {
  gap: 8px;
  margin-top: 10px;
  display: grid;
  overflow: auto;
}

.draft-binder-remaining-item {
  border: 0;
  border-top: 1px solid var(--border-soft);
  text-align: left;
  width: 100%;
  color: var(--foreground);
  background: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 0 0;
  display: grid;
}

.draft-binder-remaining-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.draft-binder-remaining-item.is-active {
  color: var(--accent);
}

.draft-binder-remaining-item.is-dragging {
  opacity: .5;
}

.draft-binder-remaining-grip {
  border: 1px solid var(--border-soft);
  background: var(--surface2);
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .draft-binder-remaining-grip {
    background: color-mix(in srgb, var(--surface2) 90%, white 10%);
  }
}

.draft-binder-remaining-grip {
  color: var(--neutral-text);
}

.draft-binder-remaining-copy {
  gap: 3px;
  display: grid;
}

.draft-binder-complete {
  color: var(--neutral-text);
  margin-top: 10px;
  font-size: 12px;
}

.draft-binder-actions {
  border-top: 2px solid var(--border);
  gap: 8px;
  padding: 14px;
  display: grid;
}

.draft-binder-actions .sv-btn {
  justify-content: center;
  width: 100%;
}

.binder-pocket.is-planned {
  border-style: solid;
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .binder-pocket.is-planned {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-soft));
  }
}

.binder-pocket.is-planned {
  box-shadow: inset 0 0 0 1px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .binder-pocket.is-planned {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

.binder-pocket.is-recommended {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.binder-pocket.is-drop-target {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent),
    0 0 0 2px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .binder-pocket.is-drop-target {
    box-shadow: inset 0 0 0 2px var(--accent),
    0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
  }
}

.deckbox-stage, .sbox-stage {
  min-height: 100%;
  display: grid;
}

.deckbox-stage {
  grid-template-columns: 300px minmax(0, 1fr);
}

.sbox-stage {
  grid-template-columns: 420px minmax(0, 1fr);
}

body.collectit-v5[data-view="extended"] .deckbox-stage {
  grid-template-columns: 340px minmax(0, 1fr);
}

body.collectit-v5[data-view="wide"] .deckbox-stage {
  grid-template-columns: 380px minmax(0, 1fr);
}

body.collectit-v5[data-view="extended"] .sbox-stage {
  grid-template-columns: 460px minmax(0, 1fr);
}

body.collectit-v5[data-view="wide"] .sbox-stage {
  grid-template-columns: 500px minmax(0, 1fr);
}

.deckbox-panel-left, .sbox-panel-left {
  border-right: 1px solid var(--border-soft);
  background: var(--surface);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 40px 24px 24px;
  display: flex;
}

.deckbox-panel-right, .sbox-panel-right {
  min-width: 0;
  padding: 24px 28px 32px;
}

.deckbox-panel-header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  display: flex;
}

.deckbox-panel-title {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}

.deckbox-gallery, .sbox-gallery {
  opacity: 0;
  transition: opacity .18s, transform .18s;
  transform: translateY(6px);
}

.deckbox-gallery.revealed, .sbox-gallery.revealed {
  opacity: 1;
  transform: translateY(0);
}

.deckbox-gallery-section + .deckbox-gallery-section {
  margin-top: 28px;
}

.deckbox-gallery-section.is-drop-target .storage-stage-section-head {
  border-bottom-color: var(--accent);
}

.deckbox-gallery-section-body {
  min-height: 54px;
  transition: background-color var(--t),
    border-color var(--t),
    box-shadow var(--t);
}

.deckbox-gallery-section-body.is-drop-target {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .deckbox-gallery-section-body.is-drop-target {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
  }
}

.deckbox-gallery-section-body.is-drop-target {
  box-shadow: inset 0 0 0 1px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .deckbox-gallery-section-body.is-drop-target {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
  }
}

.deckbox-gallery-empty {
  color: var(--neutral-text);
  padding: 18px 0;
  font-size: 13px;
}

.deckbox-gallery-empty.is-drop-target {
  border: 1px dashed var(--accent);
  padding: 18px 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .deckbox-gallery-empty.is-drop-target {
    border: 1px dashed color-mix(in srgb, var(--accent) 48%, var(--border));
  }
}

.deckbox-gallery-empty.is-drop-target {
  color: var(--foreground);
}

.deckbox-scene {
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: flex;
}

.db-tuckbox {
  --db-front-width: 132px;
  --db-front-height: 204px;
  --db-depth: 18px;
  --db-top-height: 14px;
  --db-lid-height: 38px;
  width: calc(var(--db-front-width) + var(--db-depth));
  height: calc(var(--db-front-height) + var(--db-top-height));
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  margin: 0 auto;
  padding: 0;
  transition: transform .18s;
  position: relative;
}

.db-tuckbox:hover {
  transform: translateY(-1px);
}

.db-tuckbox:focus-visible {
  outline: none;
}

.db-tuckbox:focus-visible .db-tuckbox-front, .db-tuckbox:focus-visible .db-tuckbox-top, .db-tuckbox:focus-visible .db-tuckbox-side {
  box-shadow: 0 0 0 2px var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .db-tuckbox:focus-visible .db-tuckbox-front, .db-tuckbox:focus-visible .db-tuckbox-top, .db-tuckbox:focus-visible .db-tuckbox-side {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
  }
}

.db-tuckbox-front {
  top: var(--db-top-height);
  width: var(--db-front-width);
  height: var(--db-front-height);
  background: linear-gradient(#fff 0%, #f5f7fa 100%);
  border: 1px solid #d6dce4;
  position: absolute;
  left: 0;
  overflow: hidden;
  box-shadow: inset -8px 0 12px #cbd3de1a, 8px 12px 20px #0f172a14;
}

.db-tuckbox-top {
  width: calc(var(--db-front-width) + var(--db-depth));
  height: var(--db-top-height);
  clip-path: polygon(0 100%,
    calc(100% - var(--db-depth)) 100%,
    100% 0,
    var(--db-depth) 0);
  background: linear-gradient(#fefefe 0%, #eef2f6 100%);
  border: 1px solid #d8dde5;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.db-tuckbox-side {
  top: var(--db-top-height);
  left: calc(var(--db-front-width) - 1px);
  width: calc(var(--db-depth) + 2px);
  height: var(--db-front-height);
  clip-path: polygon(0 var(--db-top-height), 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(#edf1f5 0%, #dfe5ec 100%);
  border: 1px solid #d6dce4;
  border-left: 0;
  position: absolute;
}

.db-tuckbox-top-print {
  font-family: var(--font-mono), monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #475569;
  font-size: 7px;
  font-weight: 700;
}

.db-tuckbox-front-lid {
  height: var(--db-lid-height);
  background: linear-gradient(#fff 0%, #f4f7fa 100%);
  position: absolute;
  inset: 0 0 auto;
}

.db-tuckbox-front-art {
  inset: calc(var(--db-lid-height) + 1px) 0 0 0;
  background: linear-gradient(#ffffff38 0%, #fff0 18%), linear-gradient(#f7fafc 0%, #ecf1f5 100%);
  position: absolute;
  overflow: hidden;
}

.deck-cover-crop {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.deck-cover-crop-image {
  object-fit: cover;
  object-position: var(--deck-cover-position, 50% 28%);
  transform: scale(var(--deck-cover-scale, 1.48));
  transform-origin: center;
  transition: transform .22s, filter .22s;
}

.deck-cover-crop.is-placeholder {
  justify-content: center;
  align-items: center;
  display: flex;
}

.deck-cover-crop-placeholder {
  width: 100%;
  height: 100%;
  font-family: var(--font-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7b8794;
  justify-content: center;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  display: flex;
}

.db-tuckbox-front-art:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(#ffffff24 0%, #fff0 24%);
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px #ffffff38, inset -10px 0 14px #1118270f;
}

.db-tuckbox:hover .db-tuckbox-front-art .deck-cover-crop-image {
  transform: scale(calc(var(--deck-cover-scale, 1.48) + .04));
  filter: saturate(1.05);
}

.db-tuckbox-front-art.is-placeholder {
  justify-content: center;
  align-items: center;
  display: flex;
}

.db-tuckbox-lid-seam {
  top: calc(var(--db-top-height) + var(--db-lid-height));
  width: var(--db-front-width);
  background: #b1b9c2f2;
  height: 1px;
  position: absolute;
  left: 0;
}

.db-tuckbox-side-seam {
  top: calc(var(--db-top-height) + var(--db-lid-height) - 4px);
  left: calc(var(--db-front-width) - 1px);
  width: calc(var(--db-depth) + 2px);
  transform-origin: 0;
  background: #b1b9c2eb;
  height: 1px;
  position: absolute;
  transform: rotate(-13deg);
}

.db-art-picker {
  color: #374151;
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(#f6f8fb 0%, #e9edf2 100%);
  border: 1px solid #d5dbe3;
  border-top: 0;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 4px 10px 5px;
  font-size: 8px;
  font-weight: 700;
  display: inline-flex;
  box-shadow: 0 8px 14px #0f172a0f;
}

.db-art-picker:hover {
  background: linear-gradient(#f8fafc 0%, #edf1f5 100%);
}

.db-art-picker:focus-visible {
  box-shadow: 0 0 0 2px var(--accent),
    0 8px 14px #0f172a0f;
  outline: none;
}

@supports (color: color-mix(in lab, red, red)) {
  .db-art-picker:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent),
    0 8px 14px #0f172a0f;
  }
}

.db-art-picker-icon {
  font-size: 10px;
}

.sbox-iso-lid-text {
  font-family: var(--font-mono), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--background);
  font-size: 9px;
  font-weight: 700;
}

.deckbox-panel-meta span {
  color: var(--accent);
  font-weight: 700;
}

.sbox-iso-wrapper {
  --sbox-dx: 38px;
  --sbox-dy: 22px;
  width: calc(244px + var(--sbox-dx));
  height: calc(126px + var(--sbox-dy) + 52px);
  position: relative;
}

.sbox-iso-top {
  border: 2px solid var(--border);
  background: var(--surface);
  width: 244px;
  height: 58px;
  position: absolute;
  top: 0;
  left: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .sbox-iso-top {
    background: color-mix(in srgb, var(--surface) 94%, #000 6%);
  }
}

.sbox-iso-top {
  clip-path: polygon(0 100%, 100% 100%, calc(100% + var(--sbox-dx)) 0, var(--sbox-dx) 0);
  overflow: hidden;
}

.sbox-iso-top-cards {
  align-items: flex-end;
  gap: 3px;
  height: 100%;
  padding: 10px 12px 8px;
  display: flex;
}

.sbox-iso-top-card {
  background: var(--surface);
  border: 1px solid #00000040;
  flex: 0 0 18px;
  width: 18px;
  overflow: hidden;
}

.sbox-iso-top-card img {
  width: 100%;
  height: auto;
  display: block;
}

.sbox-iso-right {
  width: var(--sbox-dx);
  height: calc(126px + var(--sbox-dy));
  border: 2px solid var(--border);
  background: var(--surface);
  border-left: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  left: 244px;
}

@supports (color: color-mix(in lab, red, red)) {
  .sbox-iso-right {
    background: color-mix(in srgb, var(--surface) 60%, #000 40%);
  }
}

.sbox-iso-right {
  clip-path: polygon(0 var(--sbox-dy), 100% 0, 100% 100%, 0 100%);
}

.sbox-iso-right-label {
  writing-mode: vertical-rl;
  font-family: var(--font-mono), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--background);
  font-size: 8px;
  font-weight: 700;
  transform: rotate(180deg);
}

@supports (color: color-mix(in lab, red, red)) {
  .sbox-iso-right-label {
    color: color-mix(in srgb, var(--background) 82%, white 18%);
  }
}

.sbox-iso-front {
  top: var(--sbox-dy);
  border: 2px solid var(--border);
  background: var(--surface);
  flex-direction: column;
  width: 244px;
  height: 126px;
  display: flex;
  position: absolute;
  left: 0;
  overflow: hidden;
}

.sbox-iso-label-strip {
  border-bottom: 2px solid var(--border);
  background: var(--foreground);
  color: var(--background);
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.sbox-iso-interior {
  background: linear-gradient(180deg, #00000008, transparent 34%),
    var(--surface2);
  flex: 1;
  align-items: flex-end;
  gap: 3px;
  min-height: 0;
  padding: 10px 10px 6px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .sbox-iso-interior {
    background: linear-gradient(180deg, #00000008, transparent 34%),
    color-mix(in srgb, var(--surface2) 84%, white 16%);
  }
}

.sbox-iso-spine {
  background: var(--surface);
  border: 1px solid #0003;
  flex: 0 0 10px;
  align-self: stretch;
  width: 10px;
  overflow: hidden;
}

.sbox-iso-spine img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.sbox-iso-lid {
  width: calc(244px + var(--sbox-dx) - 8px);
  pointer-events: none;
  height: 42px;
  position: absolute;
  top: -8px;
  left: 8px;
}

.sbox-iso-lid-top {
  width: 244px;
  height: var(--sbox-dy);
  background: var(--foreground);
  position: absolute;
  top: 0;
  left: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .sbox-iso-lid-top {
    background: color-mix(in srgb, var(--foreground) 96%, #000 4%);
  }
}

.sbox-iso-lid-top {
  clip-path: polygon(0 100%, 100% 100%, calc(100% + var(--sbox-dx)) 0, var(--sbox-dx) 0);
}

.sbox-iso-lid-right {
  width: var(--sbox-dx);
  background: var(--foreground);
  height: 34px;
  position: absolute;
  top: 0;
  left: 244px;
}

@supports (color: color-mix(in lab, red, red)) {
  .sbox-iso-lid-right {
    background: color-mix(in srgb, var(--foreground) 84%, #000 16%);
  }
}

.sbox-iso-lid-right {
  clip-path: polygon(0 100%, 100% calc(100% - var(--sbox-dy)), 100% 0, 0 var(--sbox-dy));
}

.sbox-iso-lid-front {
  top: var(--sbox-dy);
  background: var(--foreground);
  justify-content: center;
  align-items: center;
  width: 244px;
  height: 20px;
  display: flex;
  position: absolute;
  left: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .sbox-iso-lid-front {
    background: color-mix(in srgb, var(--foreground) 98%, #000 2%);
  }
}

.sbox-shadow {
  filter: blur(4px);
  background: radial-gradient(circle, #00000042 0%, #0000 72%);
  border-radius: 999px;
  width: 180px;
  height: 22px;
  margin-top: -6px;
}

.dcase-stage, .shelf-stage {
  padding: 32px;
}

body.collectit-v5[data-view="extended"] .dcase-stage, body.collectit-v5[data-view="extended"] .shelf-stage {
  padding: 32px 48px;
}

body.collectit-v5[data-view="wide"] .dcase-stage, body.collectit-v5[data-view="wide"] .shelf-stage {
  padding: 32px 64px;
}

.dcase-unit {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

body.collectit-v5[data-view="extended"] .dcase-unit {
  max-width: 1300px;
}

body.collectit-v5[data-view="wide"] .dcase-unit {
  max-width: 100%;
}

.dcase-top {
  background: var(--foreground);
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 24px;
  display: flex;
}

.dcase-top-bolt {
  background: var(--background);
  border-radius: 999px;
  width: 8px;
  height: 8px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dcase-top-bolt {
    background: color-mix(in srgb, var(--background) 68%, transparent);
  }
}

.dcase-header-strip {
  border: 2px solid var(--border);
  background: var(--surface);
  border-top: 0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .dcase-header-strip {
    background: color-mix(in srgb, var(--surface) 88%, white 12%);
  }
}

.dcase-header-name {
  font-family: var(--font-display), serif;
  font-size: 30px;
  line-height: 1;
}

.dcase-glass {
  border: 2px solid var(--border);
  background: linear-gradient(120deg, #ffffff3d, #fff0 28%),
    var(--surface);
  border-top: 0;
  padding: 28px 24px 32px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dcase-glass {
    background: linear-gradient(120deg, #ffffff3d, #fff0 28%),
    color-mix(in srgb, var(--surface) 82%, white 18%);
  }
}

.dcase-slots {
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 18px;
  display: grid;
}

body.collectit-v5[data-view="extended"] .dcase-slots {
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 24px;
}

body.collectit-v5[data-view="wide"] .dcase-slots {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 28px;
}

.dcase-slot {
  min-width: 0;
  min-height: 0;
  color: var(--foreground);
  text-align: center;
  cursor: pointer;
  background: none;
  border: 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  display: flex;
}

.dcase-card-frame {
  border: 2px dashed var(--border-soft);
  background: var(--surface2);
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 168px;
  padding: 8px;
  display: flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .dcase-card-frame {
    background: color-mix(in srgb, var(--surface2) 86%, white 14%);
  }
}

.dcase-card-frame {
  transition: border-color var(--t),
    box-shadow var(--t),
    transform var(--t);
}

.dcase-slot.is-occupied .dcase-card-frame {
  border-style: solid;
  border-color: var(--border);
}

.dcase-slot:hover .dcase-card-frame, .dcase-slot.is-active .dcase-card-frame {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  transform: translateY(-1px);
}

.dcase-card-frame img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.dcase-pedestal {
  border: 1px solid var(--border);
  width: 70%;
  height: 10px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dcase-pedestal {
    border: 1px solid color-mix(in srgb, var(--border) 70%, white 30%);
  }
}

.dcase-pedestal {
  background: var(--surface);
}

@supports (color: color-mix(in lab, red, red)) {
  .dcase-pedestal {
    background: color-mix(in srgb, var(--surface) 70%, #000 30%);
  }
}

.dcase-card-name {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 700;
}

.dcase-empty-plus {
  font-family: var(--font-display), serif;
  color: var(--neutral-text);
  font-size: 32px;
  line-height: 1;
}

.dcase-base {
  border: 2px solid var(--border);
  background: var(--foreground);
  border-top: 0;
  height: 12px;
}

@supports (color: color-mix(in lab, red, red)) {
  .dcase-base {
    background: color-mix(in srgb, var(--foreground) 92%, #000 8%);
  }
}

.shelf-unit {
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
  background: var(--surface);
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

@supports (color: color-mix(in lab, red, red)) {
  .shelf-unit {
    background: color-mix(in srgb, var(--surface) 92%, white 8%);
  }
}

body.collectit-v5[data-view="extended"] .shelf-unit {
  max-width: 1400px;
}

body.collectit-v5[data-view="wide"] .shelf-unit {
  max-width: 100%;
}

.shelf-top-cap, .shelf-bot-cap {
  background: var(--foreground);
  height: 16px;
}

@supports (color: color-mix(in lab, red, red)) {
  .shelf-top-cap, .shelf-bot-cap {
    background: color-mix(in srgb, var(--foreground) 92%, #000 8%);
  }
}

.shelf-row {
  min-height: 140px;
  padding: 18px 18px 0;
}

body.collectit-v5[data-view="extended"] .shelf-row {
  min-height: 155px;
}

body.collectit-v5[data-view="wide"] .shelf-row {
  min-height: 180px;
}

.shelf-items {
  align-items: flex-end;
  gap: 14px;
  min-height: 0;
  padding-bottom: 16px;
  display: flex;
  overflow-x: auto;
}

.shelf-item {
  width: 110px;
  min-width: 0;
  color: var(--foreground);
  text-align: center;
  cursor: pointer;
  background: none;
  border: 0;
  flex-direction: column;
  flex: 0 0 110px;
  align-items: center;
  gap: 8px;
  padding: 0;
  display: flex;
}

.shelf-card-upright {
  border: 2px solid var(--border);
  background: var(--surface);
  width: 100%;
  height: 138px;
  transition: border-color var(--t),
    box-shadow var(--t),
    transform var(--t);
  padding: 4px;
}

.shelf-card-upright img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.shelf-item:hover .shelf-card-upright, .shelf-item.is-active .shelf-card-upright {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  transform: translateY(-1px);
}

.shelf-item-lbl {
  max-width: 100%;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
}

.shelf-empty-spot {
  border: 2px dashed var(--border-soft);
  background: var(--surface2);
  flex: 0 0 88px;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 88px;
  height: 88px;
  padding: 0;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .shelf-empty-spot {
    background: color-mix(in srgb, var(--surface2) 84%, white 16%);
  }
}

.shelf-empty-spot {
  font-family: var(--font-display), serif;
  color: var(--neutral-text);
  cursor: pointer;
  transition: border-color var(--t),
    box-shadow var(--t),
    transform var(--t);
  font-size: 32px;
  line-height: 1;
}

.shelf-empty-spot:hover, .shelf-empty-spot.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  transform: translateY(-1px);
}

.shelf-plank {
  background: var(--foreground);
  height: 10px;
}

@supports (color: color-mix(in lab, red, red)) {
  .shelf-plank {
    background: color-mix(in srgb, var(--foreground) 92%, #000 8%);
  }
}

@media (max-width: 1100px) {
  .draft-stage-shell.has-sidecar, .deckbox-stage, .sbox-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .deckbox-panel-left, .sbox-panel-left {
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .draft-stage-rail, .draft-binder-side {
    border-left: 0;
    border-top: 2px solid var(--border);
  }

  .draft-binder-modal {
    grid-template-columns: minmax(0, 1fr);
    height: min(960px, 100vh - 32px);
  }

  .deckbox-panel-right, .sbox-panel-right {
    padding-top: 20px;
  }
}

@media (max-width: 960px) {
  .storage-route-page {
    display: block;
  }

  .live-shell .v5-content:has(.storage-route-page) {
    min-height: auto;
    display: block;
  }

  .page-container--full:has(.storage-route-page) {
    min-height: auto;
    display: block;
  }

  .storage-shell {
    height: auto;
    min-height: 0;
  }

  .deckbox-stage, .sbox-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .deckbox-panel-left, .sbox-panel-left, .deckbox-panel-right, .sbox-panel-right {
    padding-left: 18px;
    padding-right: 18px;
  }

  .dcase-stage, .shelf-stage {
    padding: 20px 18px;
  }

  .storage-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
  }

  .draft-stage-sortbar, .draft-stage-overview {
    flex-direction: column;
    align-items: stretch;
  }

  .draft-stage-overview-stat {
    justify-items: start;
    min-width: 0;
  }

  .draft-stage-count {
    padding: 0 12px 12px;
  }

  .draft-stage-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 112px));
    padding: 14px;
  }

  .draft-binder-modal {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
  }

  .shelf-item {
    flex-basis: 96px;
    width: 96px;
  }
}

.v5-page-stack {
  gap: 28px;
  display: grid;
}

.v5-page-title {
  border-top: 2px solid var(--border);
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding-top: 14px;
  display: flex;
}

.v5-page-title h1, .v5-block-title {
  font-family: var(--font-display), serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: .98;
}

.v5-page-subtitle, .v5-block-meta, .v5-tabbar-meta, .v5-list-meta, .v5-empty-block {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.v5-section-stack {
  gap: 18px;
  display: grid;
}

.v5-section-header {
  border-top: 2px solid var(--border);
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  padding-top: 12px;
  display: flex;
}

.v5-tabbar {
  border: 2px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
  align-items: stretch;
  display: flex;
}

.v5-tab, .v5-tabbar button, .v5-tabbar a {
  border-right: 1px solid var(--border-soft);
  min-height: 44px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--foreground);
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.v5-tab[data-active="true"] {
  background: var(--foreground);
  color: var(--background);
}

.v5-tabbar-meta {
  align-items: center;
  margin-left: auto;
  padding: 0 16px;
  display: inline-flex;
}

.v5-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  display: grid;
}

.v5-product-card, .v5-feed-card, .v5-note-card, .v5-side-panel, .v5-form-card {
  border: 2px solid var(--border);
  background: var(--surface);
}

.v5-product-card {
  color: var(--foreground);
}

.v5-product-card-media {
  aspect-ratio: 4 / 3;
  border-bottom: 2px solid var(--border);
  background: var(--surface-alt);
}

.v5-product-card-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.v5-product-card-body {
  gap: 10px;
  padding: 14px;
  display: grid;
}

.v5-product-card-title {
  font-family: var(--font-display), serif;
  font-size: 28px;
  line-height: 1;
}

.v5-product-card-subtitle {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.v5-product-card-footer {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.messages-layout-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  grid-template-columns: 320px minmax(0, 1fr);
  display: grid;
}

.messages-rail-v5 {
  border-right: 2px solid var(--border);
  background: var(--surface);
}

.messages-rail-head, .messages-thread-head, .messages-compose {
  border-bottom: 2px solid var(--border);
  padding: 18px;
}

.messages-rail-list {
  display: grid;
}

.messages-thread-item {
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  gap: 4px;
  padding: 14px 16px;
  display: grid;
}

.messages-thread-item[data-active="true"] {
  background: var(--foreground);
  color: var(--background);
}

.messages-thread-body {
  background: var(--background);
  gap: 16px;
  min-height: 540px;
  padding: 22px 18px;
  display: grid;
}

.message-bubble-v5 {
  max-width: min(76%, 640px);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.7;
}

.message-bubble-v5.is-mine {
  border: 2px solid var(--foreground);
  background: var(--foreground);
  color: var(--background);
  margin-left: auto;
}

.message-bubble-v5.is-peer {
  border: 1px solid var(--border);
  background: var(--surface);
}

.message-time-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: currentColor;
  margin-top: 6px;
  font-size: 10px;
}

@supports (color: color-mix(in lab, red, red)) {
  .message-time-v5 {
    color: color-mix(in srgb, currentColor 56%, transparent);
  }
}

.v5-feed-list {
  gap: 12px;
  display: grid;
}

.v5-discover-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 18px;
  display: grid;
}

.v5-discover-rail {
  gap: 12px;
  display: grid;
}

.v5-feed-card {
  gap: 12px;
  padding: 16px;
  display: grid;
}

.v5-wishlist-grid {
  grid-template-columns: 1.05fr .95fr;
  gap: 20px;
  display: grid;
}

.v5-list-card {
  border-bottom: 1px solid var(--border-soft);
  gap: 10px;
  padding: 14px;
  display: grid;
}

.v5-list-card:last-child {
  border-bottom: 0;
}

.onboarding-layout-v5 {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  display: grid;
}

.v5-form-card {
  padding: 20px;
}

.v5-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.v5-toggle-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.v5-empty-block {
  border: 2px dashed var(--border-soft);
  background: var(--surface);
  gap: 8px;
  padding: 18px;
  display: grid;
}

@supports (color: color-mix(in lab, red, red)) {
  .v5-empty-block {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
  }
}

body.collectit-v5[data-theme="dark"] .hero-banner {
  border-color: #f3f4f6;
}

@media (max-width: 1100px) {
  .storage-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .storage-sidecar {
    border-left: 0;
    border-top: 2px solid var(--border);
  }

  .storage-stage-layout, .box-stage-v5, .messages-layout-v5, .v5-discover-layout, .v5-wishlist-grid, .onboarding-layout-v5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .storage-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .storage-panel {
    border-right: 0;
    border-bottom: 2px solid var(--border);
  }

  .sp-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
    padding: 12px;
    display: grid;
  }

  .sp-item {
    border: 2px solid var(--border);
  }

  .sp-item[data-active="true"] {
    border-color: var(--accent);
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .content-inner {
    width: min(100vw, 100vw - 24px);
  }

  .home-content-shell {
    max-width: none;
  }

  .home-two-col {
    display: block;
  }

  .hero-banner, .binder-stage, .section-stage, .storage-empty-state {
    padding: 20px;
  }

  .storage-page-frame {
    margin-inline: -32px;
  }

  .binder-spread {
    flex-direction: column;
    max-width: none;
  }

  .binder-spine {
    display: none;
  }

  .release-row, .mover-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .badge, .release-arrow, .storage-search-meta {
    display: none;
  }

  .home-news-grid, .storage-form-grid, .stg-row-2, .binder-grid, .deck-section-grid, .box-section-grid, .display-slot-row, .shelf-row-grid, .storage-cover-grid, .v5-form-grid, .v5-toggle-grid {
    grid-template-columns: 1fr;
  }

  .sec-hdr, .sp-header, .sv-topbar {
    flex-direction: column;
    align-items: start;
  }

  .stg-type-row, .stg-status-toggle {
    grid-template-columns: 1fr;
  }
}

.v5-footer-strip {
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: 4px 12px;
  font-size: 9px;
  display: flex;
}

.v5-footer-palette, .v5-footer-shortcuts, .v5-footer-status {
  align-items: center;
  gap: 4px;
  display: flex;
}

.v5-footer-palette {
  min-width: 74px;
}

.v5-footer-swatch {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  width: 14px;
  height: 14px;
}

.v5-footer-swatch[data-active="true"] {
  outline: 1px solid var(--border);
  outline-offset: 1px;
}

.v5-footer-swatch[data-accent="teal"] {
  background: #159a8c;
}

.v5-footer-swatch[data-accent="amber"] {
  background: #d97706;
}

.v5-footer-swatch[data-accent="indigo"] {
  background: #4f46e5;
}

.v5-footer-swatch[data-accent="rose"] {
  background: #e11d48;
}

.v5-footer-swatch[data-accent="mono"] {
  background: #111;
}

.v5-footer-shortcut {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  display: inline-flex;
}

.v5-footer-shortcut.is-static {
  opacity: .8;
}

.v5-footer-key {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  justify-content: center;
  align-items: center;
  min-width: 14px;
  padding: 0 2px;
  display: inline-flex;
}

.v5-footer-status {
  color: var(--neutral-text);
}

.settings-page-v5, .search-page-v5, .dashboard-page-v5, .collection-page-v5, .profile-page-v5 {
  gap: 18px;
}

.settings-group-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
}

.settings-group-head-v5 {
  border-bottom: 2px solid var(--border);
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 700;
}

.settings-row-v5 {
  border-bottom: 1px solid var(--border-soft);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px;
  display: grid;
}

.settings-row-v5:last-child {
  border-bottom: 0;
}

.settings-row-copy-v5 {
  gap: 4px;
  display: grid;
}

.settings-row-copy-v5 strong {
  color: var(--foreground);
  font-size: 14px;
}

.settings-row-copy-v5 p {
  color: var(--neutral-text);
  font-size: 12px;
  line-height: 1.6;
}

.settings-row-control-v5 {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.settings-select-v5 {
  min-width: 180px;
}

.settings-segment-v5 {
  border: 1px solid var(--border);
  background: var(--surface);
  display: inline-flex;
}

.settings-segment-button-v5 {
  border-left: 1px solid var(--border-soft);
  min-height: 28px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.settings-segment-button-v5:first-child {
  border-left: 0;
}

.settings-segment-button-v5[data-active="true"] {
  background: var(--accent);
  color: #fff;
}

.settings-toggle-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  display: inline-flex;
}

.settings-toggle-track-v5 {
  border: 1px solid var(--border);
  background: var(--surface);
  align-items: center;
  width: 34px;
  height: 20px;
  padding: 2px;
  display: inline-flex;
  position: relative;
}

.settings-toggle-thumb-v5 {
  background: var(--foreground);
  width: 12px;
  height: 12px;
  transition: transform .12s;
  display: block;
  transform: translateX(0);
}

.settings-toggle-v5[data-active="true"] .settings-toggle-thumb-v5 {
  transform: translateX(14px);
}

.settings-palette-v5 {
  align-items: center;
  gap: 6px;
  display: flex;
}

.settings-palette-swatch-v5 {
  border: 1px solid var(--border);
  width: 22px;
  height: 22px;
}

.settings-palette-swatch-v5[data-active="true"] {
  outline: 1px solid var(--border);
  outline-offset: 2px;
}

.settings-palette-swatch-v5[data-accent="teal"] {
  background: #159a8c;
}

.settings-palette-swatch-v5[data-accent="amber"] {
  background: #d97706;
}

.settings-palette-swatch-v5[data-accent="indigo"] {
  background: #4f46e5;
}

.settings-palette-swatch-v5[data-accent="rose"] {
  background: #e11d48;
}

.settings-palette-swatch-v5[data-accent="mono"] {
  background: #111;
}

.settings-action-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  min-height: 30px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.search-hero-v5 {
  gap: 10px;
  width: min(680px, 100%);
  display: grid;
}

.search-hero-form-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  grid-template-columns: minmax(0, 1fr) 42px;
  display: grid;
}

.search-hero-input-v5 {
  background: none;
  border: 0;
  outline: none;
  min-height: 42px;
  padding: 0 14px;
  font-size: 15px;
}

.search-hero-submit-v5 {
  border-left: 2px solid var(--border);
  background: var(--foreground);
  color: #fff;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.search-board-v5 {
  border-top: 2px solid var(--border);
  gap: 16px;
  padding-top: 18px;
  display: grid;
}

.search-filter-form-v5 {
  border-top: 2px solid var(--border);
  gap: 14px;
  padding-top: 18px;
  display: grid;
}

.search-filter-grid-v5 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  display: grid;
}

.search-filter-field-v5 {
  gap: 6px;
  display: grid;
}

.search-filter-field-v5 span {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.search-filter-field-v5 select {
  border: 2px solid var(--border);
  background: var(--surface);
  min-height: 42px;
  color: var(--foreground);
  outline: none;
  padding: 0 12px;
  font-size: 13px;
}

.search-filter-actions-v5 {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.search-results-section-head-v5 {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.search-secondary-results-v5 {
  border-top: 2px solid var(--border);
  gap: 14px;
  padding-top: 18px;
  display: grid;
}

.search-results-grid-v5 {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-items: start;
  gap: 14px;
  display: grid;
}

.search-result-card-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
  gap: 0;
  display: grid;
}

.search-result-media-v5 {
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 8px;
}

.search-result-media-v5.is-product {
  aspect-ratio: 2.2;
}

.search-result-image-v5 {
  aspect-ratio: 4 / 5.8;
  object-fit: contain;
  width: 100%;
}

.search-result-image-v5.is-product {
  aspect-ratio: 2.2;
}

.search-result-copy-v5 {
  gap: 4px;
  padding: 9px 10px 11px;
  display: grid;
}

.search-result-copy-v5 strong {
  font-size: 13px;
  line-height: 1.3;
}

.search-result-copy-v5 p {
  color: var(--neutral-text);
  text-transform: uppercase;
  font-size: 11px;
}

.search-result-meta-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .06em;
  color: var(--accent);
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  display: flex;
}

.dashboard-kpis-v5, .profile-stats-v5 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.dashboard-kpi-v5, .profile-stat-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  gap: 4px;
  padding: 12px 14px;
  display: grid;
}

.dashboard-kpi-v5 p, .profile-stat-v5 span {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.dashboard-kpi-v5 strong, .profile-stat-v5 strong {
  font-family: var(--font-display), serif;
  font-size: 18px;
}

.dashboard-kpi-v5 span {
  color: var(--neutral-text);
  font-size: 11px;
}

.dashboard-grid-v5 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.dashboard-panel-v5, .collection-table-shell-v5, .profile-section-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
}

.dashboard-panel-head-v5, .profile-section-head-v5, .collection-table-head-v5 {
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.dashboard-list-v5, .dashboard-bars-v5, .dashboard-activity-v5, .collection-table-body-v5, .profile-activity-v5 {
  display: grid;
}

.dashboard-list-row-v5, .dashboard-activity-row-v5, .profile-activity-row-v5 {
  border-top: 1px solid var(--border-soft);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.dashboard-list-row-v5 strong, .dashboard-activity-row-v5 strong {
  font-size: 13px;
  display: block;
}

.dashboard-list-row-v5 p, .dashboard-activity-row-v5 p, .profile-activity-row-v5 span {
  color: var(--neutral-text);
  font-size: 11px;
}

.dashboard-list-price-v5 {
  font-family: var(--font-display), serif;
  color: var(--accent);
  font-size: 18px;
}

.dashboard-bar-row-v5 {
  border-top: 1px solid var(--border-soft);
  gap: 6px;
  padding: 12px 14px;
  display: grid;
}

.dashboard-bar-meta-v5 {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
}

.dashboard-bar-track-v5 {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  height: 8px;
}

.dashboard-bar-fill-v5 {
  background: var(--accent);
  height: 100%;
}

.dashboard-panel-foot-v5 {
  color: var(--neutral-text);
  padding: 12px 14px 14px;
  font-size: 11px;
}

.dashboard-activity-dot-v5, .profile-activity-dot-v5 {
  background: var(--accent);
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
}

.dashboard-spark-v5 {
  align-items: end;
  gap: 6px;
  min-height: 118px;
  padding: 16px 14px 10px;
  display: flex;
}

.dashboard-spark-bar-v5 {
  background: #d1d5db;
  flex: 1 1 0;
  min-width: 8px;
}

.dashboard-spark-bar-v5.is-active {
  background: var(--accent);
}

.dashboard-spark-meta-v5 {
  font-family: var(--font-mono), monospace;
  color: var(--neutral-text);
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px 14px;
  font-size: 10px;
  display: flex;
}

.collection-export-v5 {
  font-family: var(--font-mono), monospace;
  text-transform: uppercase;
  font-size: 10px;
}

.collection-table-body-v5 {
  width: 100%;
}

.collection-table-row-v5 {
  border-top: 1px solid var(--border-soft);
  grid-template-columns: 70px minmax(180px, 1.4fr) repeat(7, minmax(0, .75fr));
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  font-size: 12px;
  display: grid;
}

.collection-card-cell-v5 {
  align-items: center;
  gap: 12px;
  display: flex;
}

.collection-card-thumb-v5 {
  border: 1px solid var(--border);
  object-fit: cover;
  width: 22px;
  height: 32px;
}

.collection-market-v5 {
  color: var(--accent);
  font-weight: 700;
}

.profile-band-v5 {
  border: 2px solid var(--border);
  background-color: #050505;
  background-image: linear-gradient(135deg, #ffffff0f 25%, #0000 25%), linear-gradient(225deg, #ffffff0f 25%, #0000 25%), linear-gradient(315deg, #ffffff0f 25%, #0000 25%), linear-gradient(45deg, #ffffff0f 25%, #0000 25%), none;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, repeat, repeat;
  background-size: 24px 24px;
  background-attachment: scroll, scroll, scroll, scroll, scroll;
  background-origin: padding-box, padding-box, padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box, border-box, border-box;
  min-height: 128px;
  position: relative;
}

.profile-avatar-flag-v5 {
  position: absolute;
  bottom: -30px;
  left: 18px;
}

.profile-avatar-tile-v5 {
  border: 3px solid #fff;
  width: 58px;
  height: 58px;
}

.profile-main-v5 {
  gap: 22px;
  display: grid;
}

.profile-head-v5 {
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  padding-top: 12px;
  display: flex;
}

.profile-head-v5 h1 {
  font-family: var(--font-display), serif;
  font-size: 22px;
}

.profile-head-v5 p {
  color: var(--neutral-text);
  margin-top: 4px;
  font-size: 12px;
}

.profile-head-actions-v5 {
  align-items: center;
  gap: 8px;
  display: flex;
}

.profile-button-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  min-height: 30px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.profile-game-tabs-v5, .profile-favorite-sets-v5, .profile-highlights-v5 {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.profile-game-tab-v5 {
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 30px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.profile-game-tab-v5[data-active="true"] {
  background: var(--foreground);
  color: var(--background);
}

.profile-highlights-v5 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  display: grid;
}

.profile-highlight-card-v5 {
  border: 1px solid var(--border);
  background: var(--surface);
  gap: 8px;
  display: grid;
}

.profile-highlight-thumb-v5 {
  aspect-ratio: 4 / 5.8;
  object-fit: contain;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  width: 100%;
}

.profile-highlight-copy-v5 {
  gap: 4px;
  padding: 8px 10px 10px;
  display: grid;
}

.profile-highlight-copy-v5 strong {
  font-size: 13px;
}

.profile-highlight-copy-v5 p {
  color: var(--neutral-text);
  text-transform: uppercase;
  font-size: 10px;
}

.profile-highlight-copy-v5 span {
  font-family: var(--font-mono), monospace;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 10px;
}

.profile-set-chip-v5 {
  border: 1px solid var(--border);
  background: var(--surface);
  gap: 4px;
  min-width: 180px;
  padding: 10px 12px;
  display: grid;
}

.profile-set-chip-v5 strong {
  font-size: 13px;
}

.profile-set-chip-v5 span, .profile-activity-row-v5 p, .profile-activity-row-v5 span {
  color: var(--neutral-text);
  font-size: 11px;
}

.messages-layout-v5 {
  min-height: 760px;
}

.messages-rail-heading-v5 {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.messages-rail-heading-v5 h1 {
  font-family: var(--font-display), serif;
  font-size: 21px;
}

.messages-square-action-v5 {
  border: 1px solid var(--border);
  background: var(--surface);
  width: 24px;
  height: 24px;
  font-family: var(--font-mono), monospace;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  display: inline-flex;
}

.messages-rail-search-v5 {
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 14px;
}

.messages-search-input-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  outline: none;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  font-size: 11px;
}

.messages-thread-item-head-v5 {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  display: grid;
}

.messages-thread-avatar-v5, .message-inline-avatar-v5 {
  background: var(--foreground);
  width: 22px;
  height: 22px;
  color: var(--background);
  font-family: var(--font-mono), monospace;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-size: 9px;
  display: inline-flex;
}

.messages-thread-copy-v5 {
  gap: 3px;
  display: grid;
}

.messages-thread-name-row-v5 {
  justify-content: space-between;
  align-items: start;
  gap: 8px;
  display: flex;
}

.messages-thread-name-v5 {
  font-size: 12px;
  font-weight: 700;
}

.messages-thread-time-v5 {
  font-family: var(--font-mono), monospace;
  text-transform: uppercase;
  font-size: 9px;
}

.messages-thread-preview-v5 {
  color: inherit;
  opacity: .8;
  font-size: 11px;
  line-height: 1.45;
}

.messages-thread-shell-v5 {
  background: var(--surface);
  grid-template-rows: auto minmax(0, 1fr) auto;
  display: grid;
}

.messages-thread-head-primary-v5 {
  align-items: center;
  gap: 12px;
  display: flex;
}

.messages-thread-title-v5 {
  font-size: 15px;
  font-weight: 700;
}

.messages-thread-meta-v5 {
  color: var(--neutral-text);
  margin-top: 2px;
  font-size: 11px;
}

.messages-thread-actions-v5 {
  align-items: center;
  gap: 8px;
  display: flex;
}

.messages-pill-action-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  min-height: 24px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  font-size: 9px;
  display: inline-flex;
}

.message-cluster-v5 {
  gap: 10px;
  display: grid;
}

.messages-day-marker-v5 {
  text-align: center;
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 9px;
}

.message-row-v5 {
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.message-row-v5.is-mine {
  justify-content: flex-end;
}

.message-stack-v5 {
  gap: 6px;
  min-width: 0;
  max-width: min(76%, 640px);
  display: grid;
}

.message-row-v5.is-mine .message-stack-v5 {
  justify-items: end;
}

.message-row-v5.is-peer .message-stack-v5 {
  justify-items: start;
}

.message-bubble-v5 {
  width: fit-content;
  min-width: 0;
  max-width: 100%;
}

.message-bubble-copy-v5 {
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0;
}

.message-author-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 9px;
}

.message-attachment-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  width: min(260px, 100%);
  padding: 10px;
  display: grid;
}

.message-attachment-thumb-v5 {
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface);
  width: 56px;
  height: 72px;
}

.message-attachment-copy-v5 {
  gap: 4px;
  display: grid;
}

.message-attachment-title-v5 {
  font-size: 12px;
  font-weight: 700;
}

.message-attachment-subtitle-v5, .message-attachment-meta-v5 {
  color: var(--neutral-text);
  font-size: 10px;
}

.message-attachment-meta-v5 {
  text-transform: uppercase;
  font-family: var(--font-mono), monospace;
  gap: 8px;
  display: flex;
}

.messages-compose-v5 {
  border-top: 2px solid var(--border);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px 14px;
  display: grid;
}

.messages-compose-input-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  outline: none;
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.messages-send-v5 {
  border: 1px solid var(--border);
  background: var(--foreground);
  color: #fff;
  min-width: 42px;
  font-family: var(--font-mono), monospace;
  text-transform: uppercase;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
}

.discover-page-v5 {
  gap: 18px;
}

.discover-page-head-v5 {
  border-top: 2px solid var(--border);
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  padding-top: 14px;
  display: flex;
}

.discover-shell-v5 {
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 18px;
  display: grid;
}

.discover-feed-list-v5 {
  gap: 10px;
  display: grid;
}

.discover-feed-card-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  gap: 0;
  display: grid;
}

.discover-feed-head-v5 {
  border-bottom: 1px solid var(--border-soft);
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  padding: 12px 14px;
  display: flex;
}

.discover-feed-author-v5 {
  align-items: start;
  gap: 10px;
  display: flex;
}

.discover-feed-avatar-v5 {
  background: var(--foreground);
  width: 24px;
  height: 24px;
  color: var(--background);
  font-family: var(--font-mono), monospace;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-size: 9px;
  display: inline-flex;
}

.discover-feed-author-copy-v5 {
  gap: 4px;
  display: grid;
}

.discover-feed-author-row-v5 {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.discover-feed-meta-v5 {
  color: var(--neutral-text);
  font-size: 10px;
  font-family: var(--font-mono), monospace;
  text-transform: uppercase;
}

.discover-feed-body-v5 {
  padding: 14px;
  font-size: 13px;
  line-height: 1.65;
}

.discover-attachment-grid-v5 {
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 14px 14px;
  display: flex;
}

.discover-attachment-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  width: min(240px, 100%);
  padding: 10px;
  display: grid;
}

.discover-attachment-thumb-v5 {
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface);
  width: 64px;
  height: 84px;
}

.discover-attachment-copy-v5 {
  gap: 4px;
  display: grid;
}

.discover-attachment-title-v5 {
  font-size: 12px;
  font-weight: 700;
}

.discover-attachment-subtitle-v5, .discover-attachment-meta-v5 {
  color: var(--neutral-text);
  font-size: 10px;
}

.discover-attachment-meta-v5 {
  font-family: var(--font-mono), monospace;
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.discover-hero-image-v5 {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  min-height: 180px;
  margin: 0 14px 14px;
  overflow: hidden;
}

.discover-feed-footer-v5, .discover-footer-statgrid-v5 {
  border-top: 1px solid var(--border-soft);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
}

.discover-footer-cell-v5 {
  border-left: 1px solid var(--border-soft);
  min-height: 38px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 10px;
  display: flex;
}

.discover-footer-cell-v5:first-child {
  border-left: 0;
}

.discover-footer-cell-v5.is-action {
  cursor: pointer;
}

.discover-side-v5 {
  gap: 10px;
  display: grid;
}

.discover-side-block-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  padding: 12px;
}

.discover-search-form-v5 {
  gap: 8px;
  display: grid;
}

.discover-search-input-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  outline: none;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.discover-side-list-v5 {
  gap: 8px;
  display: grid;
}

.discover-side-row-v5 {
  border-top: 1px solid var(--border-soft);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  display: flex;
}

.discover-post-button-v5 {
  border: 1px solid var(--border);
  background: var(--foreground);
  color: #fff;
  min-height: 30px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.social-composer-shell {
  border: 2px solid var(--border);
  background: var(--surface);
  gap: 16px;
  padding: 18px;
  display: grid;
}

.social-composer-section {
  gap: 10px;
  display: grid;
}

.social-composer-search-results {
  gap: 8px;
  display: grid;
}

.social-composer-search-row {
  border: 1px solid var(--border-soft);
  background: var(--surface2);
  text-align: left;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  display: grid;
}

.social-composer-search-row span {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.social-composer-search-row strong {
  font-size: 12px;
}

.social-composer-search-row span span {
  color: var(--neutral-text);
  font-size: 10px;
}

.social-composer-attachments {
  gap: 10px;
  display: grid;
}

.social-composer-attachment {
  border: 1px solid var(--border-soft);
  background: var(--surface2);
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  display: grid;
}

.social-composer-attachment-copy {
  gap: 3px;
  display: grid;
}

.social-composer-attachment-copy strong {
  font-size: 12px;
}

.social-composer-attachment-copy span {
  color: var(--neutral-text);
  font-size: 10px;
}

.social-composer-actions {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.discover-modal-backdrop-v5 {
  z-index: 80;
  background: #0000008c;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: fixed;
  inset: 0;
}

.discover-modal-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  width: min(420px, 100%);
}

.discover-modal-head-v5 {
  border-bottom: 2px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  display: flex;
}

.discover-modal-body-v5 {
  padding: 14px;
  font-size: 13px;
  line-height: 1.65;
}

.discover-modal-actions-v5 {
  border-top: 1px solid var(--border-soft);
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px;
  display: flex;
}

.catalog-set-grid-v5 {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  display: grid;
}

.catalog-set-card-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
  gap: 0;
  display: grid;
}

.catalog-set-card-v5.is-editable {
  overflow: hidden;
}

.catalog-set-card-link-v5 {
  gap: 0;
  display: grid;
}

.catalog-set-card-media-v5 {
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 4px;
}

.catalog-set-card-image-v5 {
  object-fit: cover;
  width: 100%;
  height: 132px;
}

.catalog-set-card-copy-v5 {
  gap: 4px;
  padding: 12px;
  display: grid;
}

.catalog-set-card-copy-v5 strong {
  font-size: 16px;
}

.catalog-set-card-copy-v5 p {
  text-transform: uppercase;
  color: var(--accent);
  font-size: 10px;
  font-family: var(--font-mono), monospace;
}

.catalog-set-card-meta-v5 {
  color: var(--neutral-text);
  font-size: 10px;
  font-family: var(--font-mono), monospace;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.catalog-set-card-admin-v5 {
  border-top: 1px solid var(--border-soft);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.catalog-set-card-admin-meta-v5 {
  align-items: center;
  gap: 6px;
  display: flex;
}

.product-detail-page-v5, .printing-detail-page-v5 {
  gap: 18px;
  display: grid;
}

.product-summary-v5, .printing-detail-layout-v5, .product-browser-v5, .printing-side-block-v5, .related-printings-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
}

.product-summary-v5 {
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  display: grid;
}

.product-summary-media-v5 {
  border: 2px solid var(--border);
  color: #fff;
  background: #050505;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 96px;
  display: flex;
  overflow: hidden;
}

.product-summary-media-v5 img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.product-summary-copy-v5 {
  gap: 6px;
  display: grid;
}

.product-summary-copy-v5 h1, .printing-detail-main-v5 h1 {
  font-family: var(--font-display), serif;
  font-size: clamp(2rem, 3vw, 2.9rem);
  line-height: 1;
}

.product-summary-meta-v5, .product-summary-stats-v5, .printing-detail-eyebrow-v5, .printing-history-meta-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  flex-wrap: wrap;
  gap: 14px;
  font-size: 10px;
  display: flex;
}

.product-summary-actions-v5, .printing-detail-actions-v5 {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.product-hero-button-v5, .printing-action-v5, .printing-inline-button-v5 {
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 34px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.product-hero-button-v5.is-primary, .printing-action-v5.is-primary {
  background: var(--foreground);
  color: #fff;
}

.product-browser-v5 {
  gap: 16px;
  padding: 16px;
  display: grid;
}

.product-browser-grid-v5 {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  display: grid;
}

.product-printing-card-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
  gap: 0;
  display: grid;
}

.product-printing-thumb-v5 {
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 8px;
}

.product-printing-thumb-v5 img {
  aspect-ratio: 4 / 5.8;
  object-fit: contain;
  width: 100%;
}

.product-printing-copy-v5 {
  gap: 4px;
  padding: 9px 10px 10px;
  display: grid;
}

.product-printing-copy-v5 strong {
  font-size: 12px;
  line-height: 1.35;
}

.product-printing-copy-v5 p {
  color: var(--neutral-text);
  text-transform: uppercase;
  font-size: 10px;
}

.product-printing-price-v5 {
  font-family: var(--font-mono), monospace;
  color: var(--accent);
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  display: flex;
}

.printing-detail-layout-v5 {
  grid-template-columns: 220px minmax(0, 1fr);
  display: grid;
}

.printing-detail-sidebar-v5 {
  border-right: 2px solid var(--border);
  padding: 16px;
}

.printing-detail-art-v5 {
  border: 2px solid var(--border);
  background: var(--surface-alt);
  width: 100%;
  padding: 10px;
}

.printing-detail-art-v5 img {
  aspect-ratio: 4 / 5.8;
  object-fit: contain;
  width: 100%;
}

.printing-detail-art-note-v5 {
  text-align: center;
  color: var(--neutral-text);
  text-transform: uppercase;
  font-size: 10px;
  font-family: var(--font-mono), monospace;
  margin-top: 10px;
}

.printing-detail-main-v5 {
  gap: 16px;
  padding: 16px;
  display: grid;
}

.printing-detail-tabs-v5 {
  border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
  gap: 0;
  display: flex;
}

.printing-detail-tab-v5 {
  min-height: 34px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  justify-content: center;
  align-items: center;
  padding: 0 14px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.printing-detail-tab-v5[data-active="true"] {
  border-bottom: 2px solid var(--accent);
  color: var(--foreground);
}

.printing-detail-stats-v5 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.printing-detail-stat-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  gap: 5px;
  padding: 14px;
  display: grid;
}

.printing-detail-stat-v5 span {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.printing-detail-stat-v5 strong {
  font-family: var(--font-display), serif;
  font-size: 20px;
}

.printing-detail-description-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  color: var(--neutral-text);
  padding: 14px;
  font-size: 13px;
  line-height: 1.7;
}

.printing-history-v5 {
  gap: 12px;
  display: grid;
}

.printing-history-bars-v5 {
  align-items: end;
  gap: 4px;
  min-height: 58px;
  display: flex;
}

.printing-history-bar-v5 {
  background: #d1d5db;
  flex: 1 1 0;
  min-width: 10px;
}

.printing-history-bar-v5.is-active {
  background: var(--accent);
}

.printing-history-bar-v5.is-current {
  background: var(--foreground);
}

.printing-secondary-grid-v5 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.printing-side-block-v5 {
  gap: 0;
  display: grid;
}

.printing-side-head-v5 {
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.printing-copy-list-v5, .printing-watch-list-v5, .related-printings-list-v5 {
  display: grid;
}

.printing-copy-row-v5, .printing-watch-row-v5, .related-printing-row-v5 {
  border-top: 1px solid var(--border-soft);
  gap: 10px;
  padding: 12px 14px;
  display: grid;
}

.printing-copy-row-v5:first-child, .printing-watch-row-v5:first-child, .related-printing-row-v5:first-child {
  border-top: 0;
}

.printing-copy-row-v5 strong, .printing-watch-row-v5 strong, .related-printing-copy-v5 strong {
  font-size: 12px;
}

.printing-copy-row-v5 span, .printing-watch-row-v5 span, .related-printing-copy-v5 p, .related-printing-meta-v5 {
  color: var(--neutral-text);
  font-size: 11px;
}

.printing-copy-actions-v5, .printing-watch-actions-v5 {
  justify-content: flex-end;
  display: flex;
}

.printing-inline-button-v5 {
  border-color: var(--border-soft);
  min-height: 26px;
  font-size: 9px;
}

.related-printings-v5 {
  display: grid;
}

.related-printings-head-v5 {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: end;
  gap: 10px;
  padding: 12px 14px;
  display: flex;
}

.related-printing-row-v5 {
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
}

.related-printing-thumb-v5 {
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface-alt);
  width: 62px;
  height: 84px;
}

.related-printing-copy-v5 {
  gap: 4px;
  display: grid;
}

.related-printing-price-v5 {
  font-family: var(--font-display), serif;
  color: var(--accent);
  font-size: 18px;
}

.sell-root-v5 {
  gap: 18px;
}

.sell-page-shell-v5 {
  gap: 18px;
  display: grid;
}

.sell-panel-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  gap: 14px;
  padding: 16px;
  display: grid;
}

.sell-panel-head-v5 {
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  display: flex;
}

.sell-provider-meta-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 700;
}

.sell-storage-grid-v5, .ops-provider-grid-v5 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  display: grid;
}

.sell-storage-card-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  text-align: left;
  gap: 6px;
  padding: 14px;
  display: grid;
}

.sell-storage-card-v5[data-active="true"] {
  border-color: var(--accent);
  background: #11ae5f14;
}

.sell-storage-card-v5 strong {
  font-size: 14px;
}

.sell-storage-card-v5 span, .ops-provider-note-v5 span, .sell-preview-row-v5 span {
  color: var(--neutral-text);
  font-size: 11px;
}

.sell-action-row-v5 {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.sell-selection-copy-v5 {
  color: var(--neutral-text);
  font-size: 12px;
}

.sell-preview-grid-v5 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.sell-preview-stat-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  gap: 5px;
  padding: 12px;
  display: grid;
}

.sell-preview-stat-v5 span {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.sell-preview-stat-v5 strong {
  font-family: var(--font-display), serif;
  font-size: 22px;
  line-height: 1;
}

.sell-preview-list-v5 {
  border-top: 1px solid var(--border-soft);
  display: grid;
}

.sell-preview-row-v5 {
  border-bottom: 1px solid var(--border-soft);
  justify-content: space-between;
  align-items: start;
  gap: 10px;
  padding: 12px 0;
  display: flex;
}

.ops-provider-card-v5 {
  align-content: start;
}

.ops-provider-actions-v5 {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.ops-provider-note-v5 {
  gap: 4px;
  padding-top: 4px;
  display: grid;
}

.auth-screen-v5 {
  border: 2px solid var(--border);
  min-height: calc(100vh - 132px);
  width: calc(100vw - var(--shell-sidebar-width));
  max-width: none;
  margin-left: calc(50% - ((100vw - var(--shell-sidebar-width)) / 2));
  background: #0c0c0c;
  grid-template-columns: minmax(0, 1fr) 220px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.v5-shell-sidebar-collapsed .auth-screen-v5 {
  width: calc(100vw - var(--shell-sidebar-collapsed-width));
  margin-left: calc(50% - ((100vw - var(--shell-sidebar-collapsed-width)) / 2));
}

.auth-backdrop-v5 {
  filter: blur(.5px);
  background-color: #0000;
  background-image: linear-gradient(#000000a8, #000000a8), url("/live/collect-it/yugioh-title.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll, scroll;
  background-origin: padding-box, padding-box;
  background-clip: border-box, border-box;
  position: absolute;
  inset: 0;
}

.auth-stage-v5 {
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 48px;
  display: flex;
  position: relative;
}

.auth-card-v5 {
  border: 2px solid var(--border);
  background: #fffffff7;
  width: min(340px, 100%);
}

.auth-card-head-v5 {
  padding: 16px 16px 18px;
}

.auth-brand-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
}

.auth-subtitle-v5 {
  color: var(--neutral-text);
  margin-top: 4px;
  font-size: 12px;
}

.auth-tabs-v5 {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.auth-tab-v5 {
  border-left: 1px solid var(--border-soft);
  min-height: 36px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.auth-tab-v5:first-child {
  border-left: 0;
}

.auth-tab-v5[data-active="true"] {
  background: var(--foreground);
  color: #fff;
}

.auth-form-wrap-v5 {
  padding: 14px;
}

.auth-pane-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  padding: 12px;
}

.auth-form-v5 {
  gap: 12px;
  display: grid;
}

.auth-label-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 700;
}

.auth-input-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  outline: none;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-size: 12px;
}

.auth-input-v5.is-code {
  font-family: var(--font-mono), monospace;
  letter-spacing: .16em;
}

.auth-submit-v5, .auth-secondary-v5, .auth-reset-v5 {
  border: 1px solid var(--border);
  min-height: 40px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.auth-submit-v5 {
  background: var(--foreground);
  color: #fff;
}

.auth-secondary-v5, .auth-reset-v5 {
  background: var(--surface);
}

.auth-code-grid-v5 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.auth-switch-copy-v5 {
  color: var(--neutral-text);
  font-size: 11px;
  line-height: 1.5;
}

.auth-callout-v5 {
  border: 1px solid var(--border-soft);
  padding: 12px;
  font-size: 12px;
  line-height: 1.6;
}

.auth-callout-v5[data-tone="error"] {
  color: #991b1b;
  background: #fee2e2;
}

.auth-callout-v5[data-tone="info"] {
  color: #155e75;
  background: #ecfeff;
}

.auth-status-v5 {
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  background: #eefbf6;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 9px;
  display: flex;
}

.auth-status-dot-v5 {
  background: #10b981;
  width: 6px;
  height: 6px;
}

.auth-rail-v5 {
  z-index: 1;
  border-left: 2px solid var(--border);
  background: #fffffff0;
  align-content: end;
  gap: 10px;
  padding: 18px;
  display: grid;
  position: relative;
}

.auth-rail-panel-v5, .auth-rail-stat-v5 {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 12px;
}

.auth-update-list-v5 {
  gap: 10px;
  margin-top: 10px;
  display: grid;
}

.auth-update-row-v5 {
  border-top: 1px solid var(--border-soft);
  gap: 4px;
  padding-top: 10px;
  display: grid;
}

.auth-update-row-v5:first-child {
  border-top: 0;
  padding-top: 0;
}

.auth-update-row-v5 h2 {
  font-size: 13px;
  font-weight: 700;
}

.auth-update-row-v5 p, .auth-rail-stat-v5 span {
  color: var(--neutral-text);
  font-size: 11px;
  line-height: 1.6;
}

.auth-update-meta-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 9px;
}

.auth-update-meta-v5 span {
  color: var(--neutral-text);
}

.auth-rail-stats-v5 {
  gap: 10px;
  display: grid;
}

.auth-rail-stat-v5 {
  gap: 4px;
  display: grid;
}

.auth-rail-stat-v5 strong {
  font-size: 12px;
  font-weight: 700;
}

body[data-card-grayscale="true"] .search-result-image-v5, body[data-card-grayscale="true"] .product-printing-thumb-v5 img, body[data-card-grayscale="true"] .profile-highlight-thumb-v5, body[data-card-grayscale="true"] .catalog-set-card-image-v5 {
  filter: grayscale();
}

body[data-card-grayscale="true"] .search-result-card-v5:hover .search-result-image-v5, body[data-card-grayscale="true"] .product-printing-card-v5:hover .product-printing-thumb-v5 img, body[data-card-grayscale="true"] .profile-highlight-card-v5:hover .profile-highlight-thumb-v5, body[data-card-grayscale="true"] .catalog-set-card-v5:hover .catalog-set-card-image-v5 {
  filter: grayscale(0);
}

@media (max-width: 1200px) {
  .dashboard-kpis-v5, .profile-stats-v5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-grid-v5, .printing-secondary-grid-v5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discover-shell-v5, .auth-screen-v5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-rail-v5 {
    border-left: 0;
    border-top: 2px solid var(--border);
  }

  .auth-screen-v5, .v5-shell-sidebar-collapsed .auth-screen-v5 {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 960px) {
  .messages-layout-v5, .printing-detail-layout-v5, .product-summary-v5, .dashboard-grid-v5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .printing-detail-sidebar-v5 {
    border-right: 0;
    border-bottom: 2px solid var(--border);
  }

  .collection-table-row-v5 {
    grid-template-columns: 60px minmax(140px, 1fr) repeat(3, minmax(0, .8fr));
  }

  .profile-highlights-v5, .catalog-set-grid-v5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .dashboard-kpis-v5, .profile-stats-v5, .product-browser-grid-v5, .profile-highlights-v5, .catalog-set-grid-v5, .search-results-grid-v5 {
    grid-template-columns: 1fr;
  }

  .messages-compose-v5, .printing-detail-stats-v5, .printing-secondary-grid-v5, .auth-code-grid-v5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .v5-footer-strip, .v5-footer-shortcuts, .v5-footer-status, .profile-head-v5, .profile-head-actions-v5, .product-summary-actions-v5, .discover-page-head-v5 {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-row-v5, .collection-table-row-v5, .related-printing-row-v5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-stage-v5, .auth-rail-v5 {
    padding: 16px;
  }

  .auth-screen-v5 {
    min-height: auto;
  }
}

:root {
  --serif: var(--font-plex-serif),
    Georgia,
    serif;
  --sans: var(--font-plex-sans),
    system-ui,
    sans-serif;
  --mono: var(--font-plex-mono),
    "Courier New",
    monospace;
}

html {
  font-size: 14px;
}

body.collectit-v5 {
  --bg: #f9fafb;
  --surface: #fff;
  --surface2: #f3f4f6;
  --surface3: #e9eaec;
  --border: #000;
  --border-mid: #6b7280;
  --border-soft: #d1d5db;
  --fg: #000;
  --fg-mid: #374151;
  --muted: #6b7280;
  --subtle: #9ca3af;
  --accent: #0d9488;
  --accent-fg: #fff;
  --accent-dim: #ccfbf1;
  --background: var(--bg);
  --foreground: var(--fg);
  --card: var(--surface);
  --surface-alt: var(--surface2);
  --surface-soft: var(--surface2);
  --surface-strong: var(--surface3);
  --font-display: var(--serif);
  --font-body: var(--sans);
  --font-mono: var(--mono);
  --accent-hover: #0f766e;
  --accent-subtle: var(--accent-dim);
  --accent-soft: var(--accent-dim);
  --accent-ink: var(--accent);
  --neutral-subtle: var(--surface2);
  --neutral-text: var(--fg-mid);
  --shell-sidebar-width: 220px;
  --shell-sidebar-collapsed-width: 56px;
  --shell-topbar-height: 52px;
  --t: .14s ease;
  --t-slow: .28s ease;
  --shadow-panel: 0 4px 16px #0000001f;
  --shadow-soft: 0 1px 3px #00000014;
  --shadow-sm: 0 1px 3px #00000014;
  --shadow-md: 0 4px 16px #0000001f;
  --shadow-lg: 0 8px 32px #00000029;
  color: var(--fg);
  font-family: var(--sans);
  letter-spacing: 0;
  background: var(--bg) !important;
  background-image: none !important;
}

body.collectit-v5[data-theme="dark"] {
  --bg: #0a0a0a;
  --surface: #111;
  --surface2: #1a1a1a;
  --surface3: #222;
  --border: #fff;
  --border-mid: #888;
  --border-soft: #333;
  --fg: #f9fafb;
  --fg-mid: #d1d5db;
  --muted: #9ca3af;
  --subtle: #4b5563;
  --accent-dim: #042f2e;
  --accent-soft: #042f2e;
}

body.collectit-v5[data-accent="amber"] {
  --accent: #d97706;
  --accent-fg: #fff;
  --accent-dim: #fef3c7;
  --accent-hover: #b45309;
}

body.collectit-v5[data-accent="indigo"] {
  --accent: #4f46e5;
  --accent-fg: #fff;
  --accent-dim: #eef2ff;
  --accent-hover: #4338ca;
}

body.collectit-v5[data-accent="rose"] {
  --accent: #e11d48;
  --accent-fg: #fff;
  --accent-dim: #ffe4e6;
  --accent-hover: #be123c;
}

body.collectit-v5[data-accent="mono"] {
  --accent: #111;
  --accent-fg: #fff;
  --accent-dim: #f3f4f6;
  --accent-hover: #000;
}

body.collectit-v5[data-theme="dark"][data-accent="amber"] {
  --accent-dim: #451a03;
}

body.collectit-v5[data-theme="dark"][data-accent="indigo"] {
  --accent-dim: #1e1b4b;
}

body.collectit-v5[data-theme="dark"][data-accent="rose"] {
  --accent-dim: #4c0519;
}

body.collectit-v5[data-theme="dark"][data-accent="mono"] {
  --accent: #eee;
  --accent-fg: #000;
  --accent-dim: #1a1a1a;
}

body.collectit-v5 ::selection {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  body.collectit-v5 ::selection {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
  }
}

body.collectit-v5 ::selection {
  color: var(--fg);
}

.page-container {
  width: 100%;
  margin: 0 auto;
  padding-inline: 24px;
}

.page-container--regular {
  max-width: 1200px;
}

.page-container--extended {
  max-width: 1600px;
}

.page-container--full {
  max-width: none;
  padding-inline: 32px;
}

.content-inner {
  width: min(1200px, 100vw - 64px);
  margin: 0 auto;
}

body[data-view="extended"] .content-inner {
  width: min(1600px, 100vw - 72px);
}

body[data-view="wide"] .content-inner {
  width: calc(100vw - 64px);
}

.v5-shell {
  background: var(--bg);
  min-height: 100vh;
  color: var(--fg);
  display: flex;
}

.v5-sidebar {
  z-index: 60;
  width: var(--shell-sidebar-width);
  border-right: 2px solid var(--border);
  background: var(--surface);
  transition: width var(--t-slow),
    transform var(--t-slow);
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0 auto 0 0;
  overflow: hidden;
}

.v5-shell-sidebar-collapsed .v5-sidebar {
  width: var(--shell-sidebar-collapsed-width);
}

.v5-sidebar-brand {
  min-height: var(--shell-topbar-height);
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  display: flex;
}

.v5-brand-link {
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.v5-brand-mark {
  background: var(--fg);
  width: 28px;
  height: 28px;
  color: var(--bg);
  font-family: var(--serif);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  display: flex;
}

.v5-brand-copy {
  min-width: 0;
  transition: opacity var(--t);
  line-height: 1.1;
  display: grid;
}

.v5-brand-copy strong {
  font-family: var(--serif);
  letter-spacing: -.3px;
  font-size: 15px;
  font-weight: 600;
}

.v5-brand-copy span {
  font-family: var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: 9px;
}

.v5-sidebar-toggle {
  width: 24px;
  height: 24px;
  color: var(--muted);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.v5-sidebar-scroll {
  flex: 1;
  align-content: start;
  gap: 4px;
  padding: 8px 0;
  display: grid;
  overflow-y: auto;
}

.v5-sidebar-section {
  gap: 4px;
  display: grid;
}

.v5-sidebar-label {
  font-family: var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--subtle);
  transition: opacity var(--t);
  padding: 16px 16px 4px;
  font-size: 9px;
  font-weight: 600;
}

.v5-sidebar-nav {
  display: grid;
}

.v5-sidebar-link {
  height: 40px;
  color: var(--fg-mid);
  transition: background var(--t),
    color var(--t),
    border-color var(--t);
  white-space: nowrap;
  border-left: 2px solid #0000;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 400;
  display: flex;
}

.v5-sidebar-link:hover {
  background: var(--surface2);
  color: var(--fg);
}

.v5-sidebar-link {
  transition: color            var(--motion-quick)   var(--ease-standard),
    background-color var(--motion-quick)   var(--ease-standard),
    border-color     var(--motion-quick)   var(--ease-standard),
    transform        var(--motion-default) var(--ease-release);
}

.v5-sidebar-link:active {
  transition-duration: var(--motion-instant);
  transition-timing-function: var(--ease-press);
  transform: translateY(1px)scale(.99);
}

@media (prefers-reduced-motion: reduce) {
  .v5-sidebar-link:active {
    transform: none;
  }
}

.v5-sidebar-link[data-active="true"] {
  background: var(--fg);
  color: var(--bg);
  border-left-color: var(--accent);
  font-weight: 500;
}

.v5-sidebar-badge {
  min-width: 18px;
  height: 18px;
  font-family: var(--mono);
  border: 1px solid;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  padding: 0 4px;
  font-size: 9px;
  line-height: 1;
  display: inline-flex;
}

.v5-shell-sidebar-collapsed .v5-brand-copy, .v5-shell-sidebar-collapsed .v5-sidebar-label, .v5-shell-sidebar-collapsed .v5-sidebar-link span, .v5-shell-sidebar-collapsed .v5-sidebar-badge {
  opacity: 0;
  pointer-events: none;
}

.v5-shell-sidebar-collapsed .v5-sidebar-brand {
  padding-inline: 14px;
}

.v5-shell-sidebar-collapsed .v5-sidebar-link {
  justify-content: center;
  padding-inline: 0;
}

.v5-main {
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--shell-sidebar-width);
  transition: margin-left var(--t-slow);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.v5-shell-sidebar-collapsed .v5-main {
  margin-left: var(--shell-sidebar-collapsed-width);
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* [project]/src/app/live-overrides.css [app-client] (css) */
.v5-topbar-search--expanded {
  min-width: 0;
}

.live-shell .v5-topbar-row--search-only {
  justify-content: space-between;
  gap: 16px;
}

.live-shell .v5-topbar-search--expanded {
  flex: 0 clamp(560px, 46vw, 860px);
  max-width: 860px;
}

.live-shell .shell-search-form {
  width: 100%;
}

.live-shell .shell-search-field {
  border-radius: 999px;
  min-height: 38px;
  padding: 8px 14px;
}

.live-shell .v5-topbar-actions {
  gap: 10px;
  margin-left: 16px;
}

.v5-task-indicator, .v5-task-indicator-button {
  position: relative;
}

.v5-task-indicator-badge {
  color: #111;
  min-width: 16px;
  height: 16px;
  font-family: var(--mono);
  text-align: center;
  background: #ffb400;
  border-radius: 999px;
  padding: 0 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  position: absolute;
  top: -6px;
  right: -6px;
}

.v5-task-indicator-panel {
  z-index: 90;
  border: 2px solid var(--border);
  background: var(--surface);
  width: min(480px, 100vw - 32px);
  color: var(--foreground);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  box-shadow: 0 18px 36px #0f172a24;
}

.v5-task-indicator-head {
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  font-size: 11px;
  display: flex;
}

.v5-task-indicator-link {
  color: #ffb400;
  text-decoration: none;
}

.v5-task-indicator-summary {
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 14px;
  font-size: 10px;
  display: flex;
}

.v5-task-indicator-section {
  border-bottom: 1px solid var(--border-soft);
  gap: 8px;
  padding: 12px 14px;
  display: grid;
}

.v5-task-indicator-label {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.v5-task-group-card {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  gap: 10px;
  padding: 12px;
  display: grid;
}

.v5-task-group-card.is-running-now {
  border-left: 4px solid var(--accent);
}

.v5-task-group-card.is-queued-next, .v5-task-group-card.is-deferred-followup {
  border-left: 4px solid #ffb400;
}

.v5-task-group-card.is-recent-result {
  border-left: 4px solid color-mix(in srgb, var(--border) 72%, white 28%);
}

.v5-task-group-card.is-recent {
  gap: 8px;
}

.v5-task-indicator-row {
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 10px;
  display: grid;
}

.v5-task-indicator-row svg {
  color: var(--accent);
  margin-top: 2px;
}

.v5-task-indicator-copy {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.v5-task-indicator-copy strong {
  font-size: 13px;
  font-weight: 600;
}

.v5-task-indicator-copy span {
  color: var(--neutral-text);
  font-size: 12px;
}

.v5-task-status-chip {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  min-height: 24px;
  font-family: var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
}

.v5-task-status-chip.is-running, .v5-task-status-chip.is-success {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-soft) 72%);
  color: var(--accent);
}

.v5-task-status-chip.is-warming, .v5-task-status-chip.is-stopping, .v5-task-status-chip.is-draining, .v5-task-status-chip.is-queued, .v5-task-status-chip.is-cancelling, .v5-task-status-chip.is-partial {
  border-color: color-mix(in srgb, #ffb400 40%, var(--border-soft) 60%);
  color: #a16207;
}

.v5-task-status-chip.is-stalled {
  color: #be123c;
  border-color: #be185d47;
}

.v5-task-status-chip.is-cancelled {
  border-color: color-mix(in srgb, var(--border) 60%, white 40%);
  color: var(--neutral-text);
}

.v5-task-status-chip.is-failed {
  color: #be123c;
  border-color: #be185d47;
}

.v5-task-progress-meta {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  display: flex;
}

.v5-task-progress {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  height: 8px;
  position: relative;
  overflow: hidden;
}

.v5-task-progress-bar {
  background: var(--accent);
  height: 100%;
  transition: width .18s;
  display: block;
}

.v5-task-progress-bar.is-queued, .v5-task-progress-bar.is-cancelling, .v5-task-progress-bar.is-partial {
  background: #ffb400;
}

.v5-task-progress-bar.is-failed {
  background: #be123c;
}

.v5-task-progress-bar.is-cancelled {
  background: color-mix(in srgb, var(--accent) 28%, var(--border) 72%);
}

.v5-task-progress.is-indeterminate .v5-task-progress-bar.is-indeterminate {
  background: linear-gradient(90deg, #ffb40029 0%, #ffb4007a 50%, #ffb40029 100%) 0 0 / 220px 100%;
  animation: 1.2s linear infinite ops-task-progress-scan;
  width: 100% !important;
}

@keyframes ops-task-progress-scan {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 220px 0;
  }
}

.v5-task-indicator-note {
  color: var(--neutral-text);
  font-size: 12px;
  line-height: 1.5;
}

.v5-task-indicator-note.is-error {
  color: #be123c;
}

.v5-task-indicator-empty {
  color: var(--neutral-text);
  padding: 14px;
  font-size: 12px;
}

.search-page-v5--plex {
  gap: 20px;
}

.search-hero-v5--plex {
  gap: 12px;
  width: min(920px, 100%);
}

.search-page-title-v5 {
  font-family: var(--serif);
  letter-spacing: -.03em;
  font-size: 28px;
  line-height: 1;
}

.search-board-v5--plex {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
  gap: 18px;
  padding: 24px;
  display: grid;
}

.search-tabbar-v5 .v5-tab {
  background: var(--surface-alt);
  border-color: var(--border-soft);
  color: var(--neutral-text);
}

.search-tabbar-v5 .v5-tab[data-active="true"] {
  background: var(--foreground);
  color: var(--background);
}

.search-tabbar-v5 .v5-tabbar-meta {
  color: var(--neutral-text);
}

.search-results-list-v5 {
  gap: 10px;
  display: grid;
}

.search-result-row-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  color: var(--foreground);
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  text-decoration: none;
  transition: background .14s, border-color .14s;
  display: grid;
}

.search-result-row-v5:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-soft) 72%);
}

.search-result-row-v5.is-product {
  grid-template-columns: 120px minmax(0, 1fr) auto;
}

.search-result-media-v5.is-row {
  background: none;
  border: 0;
  padding: 0;
}

.search-result-image-v5.is-row {
  border: 1px solid var(--border-soft);
  object-fit: cover;
  width: 100%;
}

.search-result-image-v5.is-row.is-product {
  aspect-ratio: 1.55;
}

.search-result-row-v5 .search-result-copy-v5 {
  gap: 4px;
  padding: 0;
}

.search-result-row-v5 .search-result-copy-v5 strong {
  font-size: 20px;
  line-height: 1.1;
}

.search-result-row-v5 .search-result-copy-v5 p, .search-result-row-v5 .search-result-meta-v5 span {
  color: var(--neutral-text);
}

.search-result-aside-v5 {
  justify-items: end;
  gap: 6px;
  min-width: 120px;
  display: grid;
}

.search-result-kind-v5 {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 10px;
}

.search-result-kind-v5.is-subtle {
  color: var(--neutral-text);
}

.ops-provider-page-v5 {
  gap: 18px;
}

.ops-provider-summary-grid-v5, .ops-provider-runtime-grid-v5 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  display: grid;
}

.ops-provider-task-shell-v5 {
  gap: 16px;
  display: grid;
}

.ops-provider-task-column-v5 {
  gap: 10px;
  display: grid;
}

.ops-provider-task-grid-v5 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  display: grid;
}

.ops-provider-task-card-v5 {
  gap: 10px;
}

.ops-provider-task-card-v5.is-recent {
  background: var(--surface);
}

.ops-provider-task-head-v5 {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.ops-provider-task-copy-v5 {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.ops-provider-task-copy-v5 span {
  color: var(--neutral-text);
  font-size: 11px;
}

.ops-provider-runtime-card-v5, .ops-provider-cache-stat-v5 {
  gap: 8px;
}

.ops-provider-cache-grid-v5 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
  display: grid;
}

.ops-provider-cache-stat-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  padding: 10px;
  display: grid;
}

.ops-provider-cache-stat-v5 span {
  color: var(--neutral-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
}

.ops-provider-cache-stat-v5 strong {
  font-family: var(--font-display), serif;
  font-size: 20px;
  line-height: 1;
}

.status-page-v5 {
  gap: 18px;
}

.status-hero-v5 {
  gap: 16px;
}

.status-hero-copy-v5 {
  gap: 8px;
  display: grid;
}

.status-hero-copy-v5 h1 {
  font-family: var(--font-display), serif;
  letter-spacing: -.03em;
  margin: 0;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: .94;
}

.status-hero-aside-v5 {
  color: var(--neutral-text);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
}

.status-summary-grid-v5 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.status-summary-stat-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  gap: 6px;
  padding: 12px;
  display: grid;
}

.status-summary-stat-v5 span, .status-service-group-head-v5 span, .status-service-meta-v5 span, .status-incident-meta-v5 span, .status-incident-update-head-v5 span {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.status-summary-stat-v5 strong {
  font-family: var(--font-display), serif;
  font-size: 24px;
  line-height: 1;
}

.status-incident-grid-v5, .status-history-list-v5, .status-service-groups-v5 {
  gap: 12px;
  display: grid;
}

.status-incident-card-v5, .status-service-group-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  gap: 12px;
  padding: 14px;
  display: grid;
}

.status-incident-head-v5, .status-service-row-v5, .status-service-group-head-v5, .status-incident-update-head-v5 {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.status-incident-copy-v5, .status-service-copy-v5 {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.status-incident-copy-v5 strong, .status-service-group-head-v5 strong, .status-service-copy-v5 strong {
  font-size: 16px;
  line-height: 1.2;
}

.status-incident-copy-v5 span, .status-service-copy-v5 span, .status-incident-summary-v5, .status-incident-update-v5 p {
  color: var(--neutral-text);
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.status-incident-badges-v5, .status-service-meta-v5 {
  justify-items: end;
  gap: 8px;
  display: grid;
}

.status-incident-meta-v5 {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.status-incident-timeline-v5 {
  gap: 10px;
  display: grid;
}

.status-incident-update-v5 {
  border-left: 2px solid var(--border-soft);
  gap: 6px;
  padding-left: 10px;
  display: grid;
}

.status-service-list-v5 {
  gap: 10px;
  display: grid;
}

.status-service-row-v5 {
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}

.status-service-row-v5:first-child {
  border-top: 0;
  padding-top: 0;
}

.status-badge-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  min-height: 26px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.status-badge-v5.is-operational, .status-badge-v5.is-resolved {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-soft) 72%);
  color: var(--accent);
}

.status-badge-v5.is-degraded, .status-badge-v5.is-investigating, .status-badge-v5.is-identified, .status-badge-v5.is-monitoring {
  color: #b45309;
  border-color: #d9770638;
}

.status-badge-v5.is-partial_outage, .status-badge-v5.is-maintenance {
  color: #c2410c;
  border-color: #bf5a2438;
}

.status-badge-v5.is-major_outage {
  color: #be123c;
  border-color: #be185d47;
}

@media (max-width: 960px) {
  .status-summary-grid-v5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-incident-head-v5, .status-service-row-v5, .status-service-group-head-v5 {
    flex-direction: column;
    align-items: flex-start;
  }

  .status-incident-badges-v5, .status-service-meta-v5 {
    justify-items: start;
  }
}

@media (max-width: 640px) {
  .status-summary-grid-v5 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .live-shell .v5-topbar-search--expanded {
    flex-basis: min(100%, 640px);
  }

  .search-board-v5--plex {
    padding: 18px;
  }

  .search-result-row-v5, .search-result-row-v5.is-product {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .search-result-aside-v5 {
    grid-column: 2;
    justify-items: start;
    min-width: 0;
  }
}

.collection-page-v5 {
  gap: 18px;
}

.collection-table-shell-v5 {
  overflow-x: auto;
}

.collection-table-layout-v5 {
  min-width: 980px;
}

.collection-table-head-v5, .collection-table-row-v5 {
  grid-template-columns: minmax(360px, 2.5fr) minmax(120px, .9fr) minmax(160px, 1.1fr) minmax(70px, .45fr) minmax(180px, 1.1fr) minmax(110px, .65fr);
  align-items: center;
  display: grid;
}

.collection-table-head-v5[data-provider-columns="true"], .collection-table-row-v5[data-provider-columns="true"] {
  grid-template-columns: minmax(320px, 2.2fr) minmax(120px, .85fr) minmax(150px, 1fr) minmax(70px, .4fr) minmax(160px, 1fr) minmax(110px, .7fr) minmax(110px, .7fr) minmax(110px, .7fr) minmax(90px, .55fr);
}

.collection-table-head-v5 {
  z-index: 1;
  background: var(--surface);
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  padding: 12px 18px;
  font-size: 10px;
  font-weight: 700;
  position: sticky;
  top: 0;
}

.collection-table-row-v5 {
  min-height: 118px;
  color: inherit;
  gap: 18px;
  padding: 14px 18px;
  font-size: 11px;
  text-decoration: none;
  transition: background .14s;
}

.collection-table-row-v5:hover {
  background: var(--surface-alt);
}

.collection-card-cell-v5 {
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.collection-card-thumb-v5 {
  border: 2px solid var(--border);
  background: var(--surface-alt);
  object-fit: cover;
  flex: 0 0 62px;
  width: 62px;
  height: 90px;
}

body[data-card-grayscale="true"] .collection-card-thumb-v5 {
  filter: grayscale();
}

body[data-card-grayscale="true"] .collection-table-row-v5:hover .collection-card-thumb-v5 {
  filter: grayscale(0);
}

.collection-card-copy-v5, .collection-cell-stack-v5 {
  gap: 6px;
  min-width: 0;
  display: grid;
}

.collection-card-copy-v5 strong, .collection-cell-stack-v5 strong {
  text-overflow: ellipsis;
  overflow: hidden;
}

.collection-card-copy-v5 strong {
  font-family: var(--font-display), serif;
  letter-spacing: -.015em;
  font-size: 13px;
  line-height: 1.05;
}

.collection-card-copy-v5 span, .collection-cell-stack-v5 span, .collection-qty-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.collection-card-copy-v5 span, .collection-cell-stack-v5 span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.collection-cell-stack-v5 strong {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.collection-qty-v5 {
  font-family: var(--font-mono), monospace;
  color: var(--foreground);
  font-size: 11px;
  font-weight: 700;
}

.collection-market-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.collection-market-v5[data-available="false"] {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 700;
}

.printing-detail-sidebar-v5 {
  align-content: start;
  gap: 12px;
  display: grid;
}

.printing-detail-action-stack-v5 {
  gap: 8px;
  margin-top: 8px;
  display: grid;
}

.printing-action-wide-v5 {
  width: 100%;
}

.printing-provider-panel-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  gap: 14px;
  padding: 14px;
  display: grid;
}

.printing-provider-panel-head-v5 {
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  display: flex;
}

.printing-provider-title-v5 {
  font-family: var(--font-display), serif;
  font-size: 22px;
  line-height: 1;
}

.printing-provider-state-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 700;
}

.printing-provider-grid-v5 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.printing-provider-stat-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  gap: 4px;
  padding: 10px;
  display: grid;
}

.printing-provider-stat-v5 span, .printing-provider-stat-v5 small {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.printing-provider-stat-v5 strong {
  font-family: var(--font-display), serif;
  font-size: 20px;
  line-height: 1;
}

.storage-slot-provider {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f5f5f5;
  max-width: calc(100% - 16px);
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #0c0c0cd1;
  padding: 2px 6px;
  font-size: 9px;
  position: absolute;
  bottom: 8px;
  right: 8px;
  overflow: hidden;
}

.draft-card-provider {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  margin-top: 8px;
  font-size: 9px;
}

.printing-detail-main-head-v5 {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.printing-detail-head-copy-v5 {
  gap: 24px;
  display: grid;
}

.printing-detail-header-actions-v5 {
  flex-shrink: 0;
}

.printing-detail-support-v5 {
  gap: 18px;
  display: grid;
}

.printing-tab-section-v5 {
  scroll-margin-top: calc(var(--shell-topbar-height) + 20px);
}

.price-history-chart-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  gap: 16px;
  padding: 16px;
  display: grid;
}

.price-history-chart-head-v5 {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.price-history-chart-label-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
  font-weight: 700;
}

.price-history-chart-summary-v5 {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-top: 8px;
  display: flex;
}

.price-history-chart-summary-v5 strong {
  font-family: var(--font-display), serif;
  font-size: clamp(2.2rem, 3vw, 3.5rem);
  line-height: .92;
}

.price-history-chart-delta-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 11px;
  font-weight: 600;
}

.price-history-chart-delta-v5.is-up {
  color: var(--accent);
}

.price-history-chart-delta-v5.is-down {
  color: #be123c;
}

.price-history-range-v5 {
  border: 1px solid var(--border-soft);
  flex-wrap: wrap;
  display: inline-flex;
}

.price-history-range-button-v5 {
  border-left: 1px solid var(--border-soft);
  background: var(--surface);
  min-height: 38px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.price-history-range-button-v5:first-child {
  border-left: 0;
}

.price-history-range-button-v5[data-active="true"] {
  background: var(--foreground);
  color: #fff;
}

.price-history-chart-stats-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.price-history-chart-stat-v5 {
  border-left: 1px solid var(--border-soft);
  gap: 6px;
  padding: 14px 16px;
  display: grid;
}

.price-history-chart-stat-v5:first-child {
  border-left: 0;
}

.price-history-chart-stat-v5 span {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.price-history-chart-stat-v5 strong {
  font-family: var(--font-display), serif;
  font-size: 1.8rem;
  line-height: 1;
}

.price-history-chart-plot-v5 {
  min-width: 0;
  height: 260px;
}

.price-history-chart-canvas-v5 {
  min-width: 0;
  height: 100%;
}

.price-history-chart-placeholder-v5 {
  border: 1px dashed var(--border-soft);
  background: var(--surface-alt);
  height: 100%;
  color: var(--neutral-text);
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
}

.price-history-chart-note-v5, .price-history-chart-empty-v5 {
  color: var(--neutral-text);
  font-size: 12px;
  line-height: 1.6;
}

.price-history-chart-empty-v5 {
  border: 1px dashed var(--border-soft);
  background: var(--surface-alt);
  padding: 20px;
}

.related-printings-v5 {
  height: fit-content;
}

@media (min-width: 1081px) {
  .v5-topbar-row--search-only {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .live-shell .v5-topbar-search--expanded {
    flex: auto;
    width: min(820px, 100%);
    max-width: none;
  }
}

@media (min-width: 1240px) {
  .printing-detail-support-v5 {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .printing-secondary-grid-v5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .related-printings-v5 {
    position: static;
    top: auto;
  }
}

@media (min-width: 1480px) {
  body.collectit-v5[data-view="wide"] .printing-detail-page-v5 {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(340px, .8fr);
    align-items: start;
  }

  body.collectit-v5[data-view="wide"] .page-crumbs-v5 {
    grid-column: 1 / -1;
  }

  body.collectit-v5[data-view="wide"] .printing-detail-layout-v5 {
    grid-column: 1 / 3;
  }

  body.collectit-v5[data-view="wide"] .printing-detail-support-v5 {
    grid-area: 2 / 3 / span 2;
    align-self: start;
    display: grid;
  }

  body.collectit-v5[data-view="wide"] .printing-secondary-grid-v5 {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  body.collectit-v5[data-view="wide"] .related-printings-v5 {
    grid-area: auto;
    align-self: auto;
    position: static;
    top: auto;
  }
}

@media (max-width: 1200px) {
  .price-history-chart-head-v5 {
    flex-direction: column;
  }

  .price-history-chart-stats-v5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .printing-detail-main-head-v5 {
    flex-direction: column;
  }

  .printing-detail-header-actions-v5 {
    width: 100%;
  }

  .collection-table-layout-v5 {
    min-width: 920px;
  }

  .collection-table-row-v5 {
    gap: 14px;
    min-height: 108px;
  }

  .collection-card-thumb-v5 {
    flex-basis: 56px;
    width: 56px;
    height: 82px;
  }
}

.printing-detail-tab-v5 {
  cursor: pointer;
  background: none;
  border: 0;
}

.printing-detail-tab-v5:hover {
  color: var(--foreground);
}

@media (max-width: 720px) {
  .price-history-chart-head-v5, .price-history-chart-summary-v5, .related-printings-head-v5 {
    flex-direction: column;
    align-items: flex-start;
  }

  .price-history-range-v5 {
    width: 100%;
  }

  .price-history-range-button-v5 {
    flex: 72px;
  }

  .price-history-chart-stats-v5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-history-chart-plot-v5 {
    height: 220px;
  }
}

.live-shell .v5-topbar-search--expanded {
  flex: auto;
  width: min(1120px, 100%);
  max-width: none;
}

.live-shell .shell-search-form, .live-shell .shell-search-field {
  min-width: 0;
}

.printing-detail-layout-v5 {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  align-items: start;
}

.printing-detail-sidebar-v5 {
  gap: 12px;
}

.printing-detail-art-panel-v5 {
  padding: 14px;
}

.printing-detail-art-panel-v5 img {
  min-height: 460px;
}

.printing-detail-fact-grid-v5 {
  border: 2px solid var(--border);
  background: var(--surface);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

.printing-detail-fact-v5 {
  border-right: 1px solid var(--border-soft);
  border-top: 1px solid var(--border-soft);
  gap: 4px;
  min-height: 70px;
  padding: 10px 12px;
  display: grid;
}

.printing-detail-fact-v5:nth-child(-n+2) {
  border-top: 0;
}

.printing-detail-fact-v5:nth-child(2n) {
  border-right: 0;
}

.printing-detail-fact-v5 span {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 9px;
}

.printing-detail-fact-v5 strong {
  font-family: var(--font-display), serif;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.12;
}

.printing-detail-head-copy-v5 {
  gap: 12px;
}

.printing-detail-meta-v5 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-text);
  margin: 0;
  font-size: 11px;
}

.printing-detail-description-v5 {
  border: 1px solid var(--border-soft);
  background: var(--surface-alt);
  padding: 18px;
}

.catalog-rich-text-v5 {
  color: var(--foreground);
  gap: 12px;
  font-size: 14px;
  line-height: 1.75;
  display: grid;
}

.catalog-rich-text-v5 p, .catalog-rich-text-v5 ul, .catalog-rich-text-v5 ol, .catalog-rich-text-v5 blockquote {
  margin: 0;
}

.catalog-rich-text-v5 ul, .catalog-rich-text-v5 ol {
  padding-left: 1.25rem;
}

.catalog-rich-text-v5 a {
  color: var(--accent);
  text-underline-offset: .18em;
  text-decoration: underline;
}

.product-summary-v5 {
  grid-template-columns: minmax(280px, clamp(320px, 22vw, 380px)) minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

.product-summary-media-v5 {
  background: none;
  border: 0;
  justify-content: flex-start;
  align-self: start;
  align-items: flex-start;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  display: flex;
  overflow: visible;
}

.product-summary-media-v5 img, .product-summary-hero-image-v5 {
  object-fit: contain;
  width: clamp(320px, 22vw, 380px);
  max-width: 100%;
  height: auto;
  max-height: clamp(320px, 24vw, 420px);
  display: block;
}

.product-summary-copy-v5 {
  gap: 10px;
}

.product-summary-description-v5 {
  max-width: 90ch;
}

.product-summary-actions-v5 {
  align-self: start;
}

.admin-rich-text-shell {
  border: 1px solid color-mix(in srgb, var(--border) 24%, white 76%);
  background: #fffffff0;
}

.admin-rich-text-toolbar {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 18%, white 82%);
  background: #f8fafceb;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.admin-rich-text-toolbar-group {
  align-items: center;
  gap: 6px;
  display: flex;
}

.admin-rich-text-button {
  border: 1px solid color-mix(in srgb, var(--border) 24%, white 76%);
  min-width: 34px;
  min-height: 34px;
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #fff;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.admin-rich-text-button[data-active="true"] {
  border-color: color-mix(in srgb, var(--accent) 60%, white 40%);
  background: color-mix(in srgb, var(--accent) 10%, white 90%);
  color: var(--accent);
}

.admin-rich-text-button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.admin-rich-text-color {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  align-items: center;
  gap: 8px;
  font-size: 10px;
  display: inline-flex;
}

.admin-rich-text-color input {
  background: none;
  border: 0;
  width: 28px;
  height: 28px;
  padding: 0;
}

.admin-rich-text-editor {
  min-height: 220px;
  position: relative;
}

.admin-rich-text-input {
  color: #18181b;
  outline: none;
  min-height: 220px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.75;
  position: relative;
}

.admin-rich-text-input[data-empty="true"]:before {
  content: attr(data-placeholder);
  color: #71717a;
  pointer-events: none;
  position: absolute;
  top: 14px;
  left: 16px;
}

@media (max-width: 1200px) {
  .printing-detail-layout-v5, .product-summary-v5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-summary-media-v5 {
    justify-content: center;
    min-height: 0;
  }

  .product-summary-media-v5 img, .product-summary-hero-image-v5 {
    width: clamp(260px, 58vw, 380px);
    max-height: clamp(260px, 58vw, 420px);
  }
}

@media (max-width: 720px) {
  .printing-detail-fact-grid-v5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .printing-detail-fact-v5 {
    border-right: 0;
  }

  .printing-detail-fact-v5:nth-child(2) {
    border-top: 1px solid var(--border-soft);
  }
}

.live-shell .product-index-page-copy-v5 {
  max-width: 72ch;
  margin: -4px 0 2px;
}

.live-shell .product-index-edit-trigger-v5 {
  min-height: auto;
  color: var(--accent);
  background: none;
  border: 0;
  margin-left: auto;
  padding: 0;
}

.live-shell .product-index-edit-trigger-v5:hover {
  color: var(--foreground);
  background: none;
  border: 0;
}

.live-shell .v5-topbar-search, .live-shell .v5-topbar-search--expanded {
  flex: 760px;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.live-shell .shell-search-form, .live-shell .shell-search-field {
  width: 100%;
  min-width: 0;
}

@media (min-width: 1081px) {
  .live-shell .v5-topbar-row--search-only {
    grid-template-columns: auto minmax(720px, 1fr) auto;
  }
}

@media (min-width: 1400px) {
  .live-shell .v5-topbar-row--search-only {
    grid-template-columns: auto minmax(920px, 1fr) auto;
  }
}

.live-shell .cal-detail {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  display: grid;
}

.live-shell .cal-detail-body {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.live-shell .printing-detail-fact-grid-v5 {
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.live-shell .printing-detail-fact-v5 {
  border-top: 0;
  border-right: 1px solid var(--border-soft);
  gap: 8px;
  min-height: auto;
  padding: 14px 10px 12px;
}

.live-shell .printing-detail-fact-v5:nth-child(-n+2) {
  border-top: 0;
}

.live-shell .printing-detail-fact-v5:nth-child(n+3) {
  border-top: 1px solid var(--border-soft);
}

.live-shell .printing-detail-fact-v5:nth-child(2n) {
  border-right: 0;
}

.live-shell .printing-detail-fact-v5 span {
  letter-spacing: .16em;
  font-size: 10px;
}

.live-shell .printing-detail-fact-v5 strong {
  min-height: 28px;
  font-family: var(--font-sans), sans-serif;
  letter-spacing: 0;
  align-items: center;
  font-size: 16px;
  line-height: 1.2;
  display: flex;
}

.live-shell .printing-detail-level-value-v5 {
  align-items: baseline;
  gap: 8px;
  display: inline-flex;
}

.live-shell .printing-detail-level-stars-v5 {
  letter-spacing: .08em;
  font-size: 15px;
}

.live-shell .printing-detail-level-number-v5 {
  font-family: var(--font-display), serif;
  font-size: 18px;
}

@media (max-width: 720px) {
  .live-shell .printing-detail-fact-v5 {
    border-right: 0;
  }

  .live-shell .printing-detail-fact-v5 + .printing-detail-fact-v5 {
    border-top: 1px solid var(--border-soft);
  }
}

.ops-provider-page-v8 {
  --ops-surface: color-mix(in srgb, var(--surface) 96%, white 4%);
  --ops-surface-soft: color-mix(in srgb, var(--surface) 90%, white 10%);
  --ops-border: color-mix(in srgb, var(--border) 80%, white 20%);
  --ops-border-soft: color-mix(in srgb, var(--border-soft) 76%, white 24%);
  --ops-muted: var(--neutral-text);
  --ops-ok: #16a34a;
  --ops-warn: #d97706;
  --ops-danger: #dc2626;
  --ops-hatching: repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      color-mix(in srgb, var(--ops-surface-soft) 82%, black 18%) 10px,
      color-mix(in srgb, var(--ops-surface-soft) 82%, black 18%) 20px);
  color: var(--foreground);
}

body[data-theme="dark"] .ops-provider-page-v8 {
  --ops-surface: color-mix(in srgb, var(--surface) 88%, black 12%);
  --ops-surface-soft: color-mix(in srgb, var(--surface-alt) 86%, black 14%);
  --ops-border: color-mix(in srgb, var(--border) 72%, black 28%);
  --ops-border-soft: color-mix(in srgb, var(--border-soft) 70%, black 30%);
  --ops-hatching: repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      #ffffff0a 10px,
      #ffffff0a 20px);
}

.ops-page-header-v8 {
  border: 1px solid var(--ops-border);
  background: var(--ops-surface);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding: 28px 32px;
  display: grid;
}

.ops-page-copy-v8 {
  gap: 10px;
  display: grid;
}

.ops-page-eyebrow-v8 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ops-muted);
  margin: 0;
  font-size: 10px;
  font-weight: 700;
}

.ops-page-copy-v8 h1 {
  font-family: var(--font-display), serif;
  letter-spacing: -.04em;
  margin: 0;
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  line-height: .96;
}

.ops-page-copy-v8 p:last-child {
  max-width: 72ch;
  color: var(--ops-muted);
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.ops-page-summary-v8 {
  justify-items: end;
  gap: 8px;
  display: grid;
}

.ops-overall-pill-v8 {
  border: 1px solid var(--ops-border);
  background: var(--ops-surface-soft);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.ops-overall-pill-v8.is-warn {
  border-color: color-mix(in srgb, var(--ops-warn) 56%, var(--ops-border) 44%);
  background: color-mix(in srgb, var(--ops-warn) 10%, var(--ops-surface) 90%);
}

.ops-pill-dot-v8, .ops-status-dot-v8 {
  border-radius: 999px;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
}

.ops-pill-dot-v8.is-ok, .ops-status-dot-v8.is-ok {
  background: var(--ops-ok);
}

.ops-pill-dot-v8.is-warn, .ops-status-dot-v8.is-warn {
  background: var(--ops-warn);
}

.ops-status-dot-v8.is-down {
  background: var(--ops-danger);
}

.ops-status-dot-v8.is-idle {
  background: var(--ops-muted);
}

.ops-page-updated-v8 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ops-muted);
  font-size: 10px;
}

.ops-incident-banner-v8 {
  border: 1px solid color-mix(in srgb, var(--ops-warn) 48%, var(--ops-border) 52%);
  background: color-mix(in srgb, var(--ops-warn) 8%, var(--ops-surface) 92%);
  border-left-width: 4px;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 24px;
  display: flex;
}

.ops-incident-icon-v8 {
  border: 1px solid color-mix(in srgb, var(--ops-warn) 48%, var(--ops-border) 52%);
  min-width: 24px;
  min-height: 24px;
  color: var(--ops-warn);
  font-family: var(--font-mono), monospace;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  display: inline-flex;
}

.ops-incident-copy-v8 {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.ops-incident-label-v8, .ops-incident-code-v8, .ops-section-label-v8, .ops-section-badge-v8, .ops-status-label-v8, .ops-status-meta-v8 span, .ops-status-tag-v8, .ops-batch-stat-label-v8, .ops-batch-progress-labels-v8, .ops-provider-history-labels-v8, .ops-provider-history-summary-v8, .ops-provider-stat-label-v8, .ops-provider-foot-v8 span, .ops-provider-detail-label-v8, .ops-runtime-header-v8 > span, .ops-runtime-row-v8 > span:first-child, .ops-runtime-tag-v8, .ops-log-table-v8 th, .ops-log-subtype-v8 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10px;
}

.ops-incident-label-v8, .ops-incident-code-v8, .ops-section-badge-v8, .ops-status-label-v8, .ops-status-meta-v8 span, .ops-batch-stat-label-v8, .ops-batch-progress-labels-v8, .ops-provider-history-labels-v8, .ops-provider-history-summary-v8, .ops-provider-stat-label-v8, .ops-provider-foot-v8 span, .ops-runtime-header-v8 > span, .ops-runtime-row-v8 > span:first-child, .ops-log-table-v8 th, .ops-log-subtype-v8 {
  color: var(--ops-muted);
}

.ops-incident-title-v8 {
  font-size: 15px;
  font-weight: 700;
}

.ops-incident-message-v8 {
  color: color-mix(in srgb, var(--foreground) 76%, var(--ops-muted) 24%);
  font-size: 13px;
  line-height: 1.6;
}

.ops-incident-actions-v8 {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.ops-incident-link-v8 {
  border: 1px solid color-mix(in srgb, var(--ops-warn) 48%, var(--ops-border) 52%);
  min-height: 26px;
  color: var(--ops-warn);
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.ops-incident-link-v8:hover {
  background: color-mix(in srgb, var(--ops-warn) 10%, var(--ops-surface) 90%);
}

.ops-section-v8 {
  border: 1px solid var(--ops-border);
  background: var(--ops-surface);
  gap: 20px;
  padding: 28px 26px;
  display: grid;
}

.ops-section-head-v8 {
  border-bottom: 1px solid var(--ops-border);
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding-bottom: 16px;
  display: flex;
}

.ops-section-head-v8 > div {
  gap: 4px;
  display: grid;
}

.ops-section-meta-v8 {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.ops-section-label-v8.is-accent {
  color: var(--ops-ok);
}

.ops-section-label-v8.is-warn {
  color: var(--ops-warn);
}

.ops-section-label-v8.is-neutral {
  color: var(--ops-muted);
}

.ops-section-title-v8 {
  letter-spacing: -.03em;
  font-size: 22px;
  font-weight: 700;
}

.ops-section-badge-v8 {
  border: 1px solid var(--ops-border);
  background: var(--ops-surface-soft);
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  display: inline-flex;
}

.ops-status-rail-v8 {
  border: 1px solid var(--ops-border);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.ops-status-tile-v8 {
  border-right: 1px solid var(--ops-border);
  background: var(--ops-surface);
  gap: 10px;
  padding: 22px;
  display: grid;
}

.ops-status-tile-v8:last-child {
  border-right: 0;
}

.ops-status-tile-v8.is-active {
  background: var(--foreground);
  color: var(--background);
}

.ops-status-tile-v8.is-active .ops-status-label-v8, .ops-status-tile-v8.is-active .ops-status-meta-v8 span, .ops-status-tile-v8.is-active .ops-status-tag-v8 {
  color: color-mix(in srgb, var(--background) 60%, transparent 40%);
}

.ops-status-label-v8 {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.ops-status-value-v8 {
  letter-spacing: -.03em;
  align-items: baseline;
  gap: 6px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  display: flex;
}

.ops-status-value-unit-v8 {
  color: var(--ops-muted);
  font-size: 13px;
  font-weight: 500;
}

.ops-status-meta-v8 {
  gap: 4px;
  font-size: 12px;
  line-height: 1.6;
  display: grid;
}

.ops-status-tag-v8, .ops-provider-status-tag-v8, .ops-runtime-tag-v8 {
  border: 1px solid var(--ops-border);
  background: var(--ops-surface-soft);
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 26px;
  padding: 0 10px;
  font-weight: 700;
  display: inline-flex;
}

.ops-status-tag-v8.is-ok, .ops-runtime-tag-v8.is-ok, .ops-provider-status-tag-v8.is-healthy {
  border-color: color-mix(in srgb, var(--ops-ok) 38%, var(--ops-border) 62%);
  color: var(--ops-ok);
}

.ops-status-tag-v8.is-warn, .ops-runtime-tag-v8.is-warn, .ops-provider-status-tag-v8.is-degraded {
  border-color: color-mix(in srgb, var(--ops-warn) 38%, var(--ops-border) 62%);
  color: var(--ops-warn);
}

.ops-status-tag-v8.is-down, .ops-runtime-tag-v8.is-down, .ops-provider-status-tag-v8.is-down {
  border-color: color-mix(in srgb, var(--ops-danger) 38%, var(--ops-border) 62%);
  color: var(--ops-danger);
}

.ops-status-tag-v8.is-idle, .ops-runtime-tag-v8.is-idle, .ops-provider-status-tag-v8.is-unknown {
  color: var(--ops-muted);
}

.ops-active-work-grid-v8 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.ops-batch-card-v8 {
  border: 1px solid var(--ops-border);
  background: var(--ops-surface-soft);
  gap: 16px;
  display: grid;
}

.ops-batch-header-v8 {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 16px;
  padding: 16px 20px 0;
  display: grid;
}

.ops-batch-name-v8 {
  letter-spacing: -.01em;
  font-size: 15px;
  font-weight: 700;
}

.ops-batch-type-v8 {
  color: var(--ops-muted);
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 1.6;
}

.ops-batch-eta-v8 {
  justify-items: end;
  gap: 4px;
  min-width: 110px;
  display: grid;
}

.ops-batch-eta-v8 span {
  color: var(--ops-muted);
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px;
}

.ops-batch-eta-v8 strong {
  font-size: 12px;
  line-height: 1.4;
}

.ops-batch-actions-v8 {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.ops-batch-body-v8 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 0 20px;
  display: grid;
}

.ops-batch-stat-value-v8 {
  letter-spacing: -.02em;
  font-size: 18px;
  font-weight: 700;
  display: block;
}

.ops-batch-progress-v8 {
  gap: 6px;
  padding: 0 20px;
  display: grid;
}

.ops-batch-progress-labels-v8 {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.ops-task-progress-v8 {
  height: 10px;
}

.ops-batch-current-v8, .ops-batch-error-v8 {
  padding: 0 20px 18px;
  font-size: 12px;
  line-height: 1.6;
}

.ops-batch-current-v8 {
  color: var(--ops-muted);
  font-family: var(--font-mono), monospace;
}

.ops-batch-current-v8 span {
  color: var(--foreground);
  font-family: var(--font-sans), sans-serif;
  font-weight: 500;
}

.ops-batch-error-v8 {
  color: var(--ops-danger);
}

.ops-batch-empty-v8 {
  border: 1px dashed var(--ops-border);
  background: var(--ops-hatching);
  color: var(--ops-muted);
  align-items: center;
  gap: 12px;
  padding: 24px 28px;
  font-size: 13px;
  display: flex;
}

.ops-batch-empty-icon-v8 {
  border: 1px solid var(--ops-border);
  background: var(--ops-surface);
  min-width: 20px;
  min-height: 20px;
  font-family: var(--font-mono), monospace;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.ops-pipeline-legend-v8 {
  color: var(--ops-muted);
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-size: 10px;
}

.ops-pipeline-alert-v8 {
  border: 1px solid color-mix(in srgb, var(--ops-warn) 35%, var(--ops-border) 65%);
  background: color-mix(in srgb, var(--ops-warn) 7%, var(--ops-surface) 93%);
  color: var(--foreground);
  margin-bottom: 16px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
}

.ops-pipeline-board-v8 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.ops-pipeline-lane-v8 {
  border: 1px solid var(--ops-border);
  background: var(--ops-surface-soft);
  align-content: start;
  display: grid;
}

.ops-pipeline-lane-head-v8 {
  border-bottom: 1px solid var(--ops-border);
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  padding: 16px 18px;
  display: flex;
}

.ops-pipeline-lane-title-v8 {
  font-family: var(--font-mono), monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}

.ops-pipeline-lane-description-v8 {
  color: var(--ops-muted);
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.ops-pipeline-lane-count-v8 {
  border: 1px solid var(--ops-border);
  background: var(--ops-surface);
  min-width: 28px;
  min-height: 28px;
  font-family: var(--font-mono), monospace;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.ops-pipeline-lane-body-v8 {
  display: grid;
}

.ops-pipeline-card-v8 {
  border-top: 1px solid var(--ops-border);
  background: var(--ops-surface);
  gap: 12px;
  padding: 14px 16px;
  display: grid;
}

.ops-pipeline-card-v8.is-running-now {
  border-left: 4px solid var(--ops-ok);
}

.ops-pipeline-card-v8.is-running, .ops-pipeline-card-v8.is-warming {
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--ops-ok) 5%, var(--ops-surface) 95%) 0%,
      var(--ops-surface) 100%);
}

.ops-pipeline-card-v8.is-warming {
  border-left-color: var(--ops-warn);
}

.ops-pipeline-card-v8.is-stopping, .ops-pipeline-card-v8.is-draining {
  border-left-color: var(--ops-warn);
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--ops-warn) 6%, var(--ops-surface) 94%) 0%,
      var(--ops-surface) 100%);
}

.ops-pipeline-card-v8.is-stalled {
  border-left-color: var(--ops-danger);
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--ops-danger) 7%, var(--ops-surface) 93%) 0%,
      var(--ops-surface) 100%);
}

.ops-pipeline-card-v8.is-queued-next, .ops-pipeline-card-v8.is-deferred-followup {
  border-left: 4px solid var(--ops-warn);
}

.ops-pipeline-card-v8.is-recent-result {
  border-left: 4px solid var(--ops-border);
}

.ops-pipeline-card-head-v8 {
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  display: flex;
}

.ops-pipeline-card-note-v8 {
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.6;
}

.ops-pipeline-metrics-v8 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.ops-pipeline-card-current-v8 {
  color: var(--ops-muted);
  font-family: var(--font-mono), monospace;
  font-size: 12px;
  line-height: 1.6;
}

.ops-pipeline-card-current-v8 span {
  color: var(--foreground);
  font-family: var(--font-sans), sans-serif;
  font-weight: 500;
}

.ops-pipeline-card-v8.is-running .ops-pipeline-card-note-v8:before, .ops-pipeline-card-v8.is-warming .ops-pipeline-card-note-v8:before {
  content: "";
  background: var(--ops-ok);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ops-ok) 40%, transparent 60%);
  vertical-align: middle;
  border-radius: 999px;
  margin-right: 8px;
  animation: 1.4s ease-out infinite ops-heartbeat-pulse;
  display: inline-flex;
}

.ops-pipeline-card-v8.is-stopping .ops-pipeline-card-note-v8:before, .ops-pipeline-card-v8.is-draining .ops-pipeline-card-note-v8:before {
  content: "";
  background: var(--ops-warn);
  vertical-align: middle;
  border-radius: 999px;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  display: inline-flex;
}

.ops-pipeline-card-v8.is-stalled .ops-pipeline-card-note-v8:before {
  content: "";
  background: var(--ops-danger);
  vertical-align: middle;
  border-radius: 999px;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  display: inline-flex;
}

@keyframes ops-heartbeat-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ops-ok) 40%, transparent 60%);
    transform: scale(.95);
  }

  70% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--ops-ok) 0%, transparent 100%);
    transform: scale(1);
  }

  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ops-ok) 0%, transparent 100%);
    transform: scale(.95);
  }
}

.ops-pipeline-queued-meta-v8, .ops-pipeline-recent-meta-v8 {
  color: var(--ops-muted);
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  display: flex;
}

.ops-pipeline-empty-v8 {
  border-top: 1px solid var(--ops-border);
  background: var(--ops-hatching);
  color: var(--ops-muted);
  padding: 18px 16px;
  font-size: 12px;
  line-height: 1.6;
}

.ops-provider-list-v8 {
  border: 1px solid var(--ops-border);
  flex-direction: column;
  display: flex;
}

.ops-provider-row-v8 {
  border-bottom: 1px solid var(--ops-border);
  background: var(--ops-surface);
  gap: 0;
  display: grid;
}

.ops-provider-row-v8:last-child {
  border-bottom: 0;
}

.ops-provider-row-v8.is-down {
  background: color-mix(in srgb, var(--ops-danger) 3%, var(--ops-surface) 97%);
}

.ops-provider-row-v8.is-degraded {
  background: color-mix(in srgb, var(--ops-warn) 3%, var(--ops-surface) 97%);
}

.ops-provider-main-v8 {
  grid-template-columns: 220px minmax(0, 1fr) minmax(220px, auto);
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  display: grid;
}

.ops-provider-name-v8 {
  letter-spacing: -.02em;
  font-size: 16px;
  font-weight: 700;
}

.ops-provider-type-v8 {
  color: var(--ops-muted);
  font-family: var(--font-mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 4px;
  font-size: 10px;
}

.ops-provider-history-v8 {
  gap: 6px;
  min-width: 0;
  display: grid;
}

.ops-provider-history-labels-v8 {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.ops-provider-history-track-v8 {
  align-items: stretch;
  gap: 2px;
  min-height: 30px;
  display: flex;
}

.ops-provider-history-segment-v8 {
  border: 1px solid var(--ops-border-soft);
  background: color-mix(in srgb, var(--ops-surface-soft) 76%, white 24%);
  flex: 1 1 0;
  min-width: 3px;
}

.ops-provider-history-segment-v8.is-healthy {
  background: color-mix(in srgb, var(--ops-ok) 18%, var(--ops-surface) 82%);
  border-color: color-mix(in srgb, var(--ops-ok) 28%, var(--ops-border) 72%);
}

.ops-provider-history-segment-v8.is-degraded {
  background: color-mix(in srgb, var(--ops-warn) 18%, var(--ops-surface) 82%);
  border-color: color-mix(in srgb, var(--ops-warn) 28%, var(--ops-border) 72%);
}

.ops-provider-history-segment-v8.is-down {
  background: color-mix(in srgb, var(--ops-danger) 24%, var(--ops-surface) 76%);
  border-color: color-mix(in srgb, var(--ops-danger) 28%, var(--ops-border) 72%);
}

.ops-provider-history-segment-v8.is-empty {
  background: var(--ops-hatching);
}

.ops-provider-history-summary-v8 strong {
  color: var(--foreground);
  font-size: 12px;
}

.ops-provider-side-v8 {
  border-left: 1px solid var(--ops-border);
  justify-items: end;
  gap: 10px;
  min-width: 240px;
  padding-left: 20px;
  display: grid;
}

.ops-provider-actions-v8 {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  display: flex;
}

.ops-provider-stats-row-v8 {
  border-top: 1px solid var(--ops-border);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  display: grid;
}

.ops-provider-stat-v8 {
  border-right: 1px solid var(--ops-border);
  background: var(--ops-surface);
  gap: 6px;
  min-height: 78px;
  padding: 14px 16px;
  display: grid;
}

.ops-provider-stat-v8:last-child {
  border-right: 0;
}

.ops-provider-stat-value-v8 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.ops-provider-foot-v8 {
  border-top: 1px solid var(--ops-border);
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 14px 20px;
  display: flex;
}

.ops-provider-detail-v8 {
  border-top: 1px solid var(--ops-border);
  border-left: 4px solid var(--ops-warn);
  background: color-mix(in srgb, var(--ops-warn) 6%, var(--ops-surface) 94%);
  gap: 6px;
  padding: 14px 20px 18px;
  display: grid;
}

.ops-provider-detail-label-v8 {
  color: var(--ops-warn);
  font-weight: 700;
}

.ops-provider-detail-title-v8 {
  font-size: 14px;
  font-weight: 700;
}

.ops-provider-detail-body-v8, .ops-provider-detail-code-v8 {
  color: var(--ops-muted);
  font-size: 13px;
  line-height: 1.6;
}

.ops-runtime-grid-v8 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.ops-runtime-panel-v8 {
  border: 1px solid var(--ops-border);
  background: var(--ops-surface-soft);
  gap: 0;
  display: grid;
}

.ops-runtime-header-v8 {
  border-bottom: 1px solid var(--ops-border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  display: flex;
}

.ops-runtime-title-v8 {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
}

.ops-runtime-body-v8 {
  display: grid;
}

.ops-runtime-row-v8 {
  border-top: 1px solid var(--ops-border);
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  padding: 12px 18px;
  display: flex;
}

.ops-runtime-row-v8:first-child {
  border-top: 0;
}

.ops-runtime-row-v8 > span:last-child {
  text-align: right;
  max-width: 60%;
  font-size: 13px;
  line-height: 1.5;
}

.ops-log-table-shell-v8 {
  border: 1px solid var(--ops-border);
  background: var(--ops-surface);
  overflow-x: auto;
}

.ops-log-table-v8 {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
}

.ops-log-table-v8 th, .ops-log-table-v8 td {
  border-top: 1px solid var(--ops-border);
  text-align: left;
  vertical-align: top;
  padding: 14px 16px;
}

.ops-log-table-v8 thead th {
  background: var(--ops-surface-soft);
  border-top: 0;
  font-weight: 700;
}

.ops-log-provider-v8 {
  letter-spacing: -.01em;
  font-size: 14px;
  font-weight: 700;
}

.ops-log-table-v8 td {
  font-size: 13px;
  line-height: 1.5;
}

.ops-provider-button-v8, .ops-stop-button-v8 {
  border-color: var(--ops-border-soft);
  background: var(--ops-surface);
  min-height: 26px;
  font-size: 9px;
}

.ops-stop-button-v8 {
  border-color: color-mix(in srgb, var(--ops-danger) 34%, var(--ops-border) 66%);
  color: var(--ops-danger);
}

.ops-stop-button-v8:disabled, .ops-provider-clear-button-v8:disabled {
  opacity: .6;
}

.ops-provider-events-feedback-v8 {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
}

.ops-provider-events-feedback-v8.is-ok {
  color: var(--ops-ok);
}

.ops-provider-events-feedback-v8.is-error {
  color: var(--ops-danger);
}

@media (max-width: 1320px) {
  .ops-status-rail-v8, .ops-runtime-grid-v8, .ops-active-work-grid-v8, .ops-pipeline-board-v8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-provider-main-v8 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ops-provider-side-v8 {
    border-left: 0;
    justify-items: start;
    min-width: 0;
    padding-left: 0;
  }

  .ops-provider-actions-v8 {
    justify-content: start;
  }
}

@media (max-width: 960px) {
  .ops-page-header-v8, .ops-incident-banner-v8, .ops-section-head-v8, .ops-batch-header-v8, .ops-runtime-row-v8 {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .ops-page-summary-v8, .ops-batch-eta-v8, .ops-provider-side-v8 {
    justify-items: start;
  }

  .ops-section-meta-v8 {
    justify-content: start;
  }

  .ops-incident-actions-v8 {
    margin-left: 0;
  }

  .ops-status-rail-v8, .ops-active-work-grid-v8, .ops-runtime-grid-v8, .ops-provider-stats-row-v8, .ops-pipeline-board-v8 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ops-pipeline-lane-head-v8, .ops-pipeline-card-head-v8, .ops-pipeline-queued-meta-v8, .ops-pipeline-recent-meta-v8 {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .ops-status-tile-v8 {
    border-right: 0;
    border-bottom: 1px solid var(--ops-border);
  }

  .ops-status-tile-v8:last-child {
    border-bottom: 0;
  }

  .ops-provider-stat-v8 {
    border-right: 0;
    border-bottom: 1px solid var(--ops-border);
  }

  .ops-provider-stat-v8:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 720px) {
  .ops-page-header-v8, .ops-section-v8 {
    padding: 20px;
  }

  .ops-status-value-v8 {
    font-size: 24px;
  }

  .ops-provider-main-v8, .ops-batch-header-v8, .ops-batch-body-v8, .ops-pipeline-card-v8, .ops-pipeline-lane-head-v8, .ops-batch-progress-v8, .ops-batch-current-v8, .ops-batch-error-v8, .ops-provider-foot-v8, .ops-provider-detail-v8, .ops-runtime-header-v8, .ops-runtime-row-v8 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ops-pipeline-metrics-v8 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ops-provider-page-v7, .status-page-v6 {
  gap: 20px;
  display: grid;
}

.ops-hero-v7, .status-hero-v6 {
  border: 1px solid color-mix(in srgb, var(--border) 40%, white 60%);
  background: linear-gradient(#fffffffa, #fafbfdf0);
  gap: 18px;
  padding: 24px;
  display: grid;
  box-shadow: 0 18px 44px #1018280f;
}

.ops-hero-copy-v7, .status-hero-copy-v6 {
  gap: 8px;
  display: grid;
}

.ops-hero-copy-v7 h1, .status-hero-copy-v6 h1 {
  font-family: var(--font-display), serif;
  letter-spacing: -.04em;
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
}

.ops-hero-copy-v7 p:not(.v5-block-meta), .status-hero-copy-v6 p:not(.v5-block-meta) {
  max-width: 70ch;
  color: var(--neutral-text);
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.ops-summary-grid-v7, .status-summary-grid-v6 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.ops-summary-card-v7, .status-summary-stat-v6 {
  border: 1px solid color-mix(in srgb, var(--border) 34%, white 66%);
  background: #fffffff5;
  gap: 6px;
  min-height: 108px;
  padding: 16px 18px;
  display: grid;
}

.ops-summary-card-v7 span, .status-summary-stat-v6 span, .ops-section-head-v7 > span, .status-section-head-v6 > span, .ops-task-meta-v7 span, .ops-task-footer-v7 span, .ops-provider-card-foot-v7 span, .ops-provider-cache-stat-v7 span, .ops-runtime-card-v7 span, .status-service-foot-v6 span, .status-incident-meta-v6 span, .status-incident-update-head-v6 span {
  font-family: var(--font-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neutral-text);
  font-size: 10px;
}

.ops-summary-card-v7 strong, .status-summary-stat-v6 strong {
  font-family: var(--font-display), serif;
  font-size: 32px;
  line-height: 1;
}

.ops-summary-card-v7 small {
  color: var(--neutral-text);
  font-size: 13px;
  line-height: 1.5;
}

.ops-section-v7, .status-section-v6 {
  border: 1px solid color-mix(in srgb, var(--border) 36%, white 64%);
  background: #fffffff5;
  gap: 18px;
  padding: 20px;
  display: grid;
}

.ops-section-head-v7, .status-section-head-v6 {
  border-bottom: 1px solid color-mix(in srgb, var(--border-soft) 70%, white 30%);
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding-bottom: 12px;
  display: flex;
}

.ops-section-head-v7 > div, .status-section-head-v6 > div {
  gap: 6px;
  display: grid;
}

.ops-section-head-v7 h2, .status-section-head-v6 h2 {
  letter-spacing: -.03em;
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
}

.ops-active-task-grid-v7, .ops-recent-task-grid-v7 {
  gap: 14px;
  display: grid;
}

.ops-active-task-grid-v7 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-task-card-v7, .ops-recent-task-card-v7, .ops-runtime-card-v7, .ops-provider-card-v7, .status-service-card-v6, .status-incident-card-v6 {
  border: 1px solid color-mix(in srgb, var(--border) 30%, white 70%);
  background: linear-gradient(#fffffffa, #fafbfdeb);
  gap: 14px;
  padding: 18px;
  display: grid;
}

.ops-task-head-v7, .ops-provider-card-head-v7, .status-service-card-head-v6, .status-incident-head-v6, .status-incident-update-head-v6 {
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  display: flex;
}

.ops-task-head-v7 > div:first-child, .ops-provider-card-head-v7 > div:first-child, .status-service-copy-v6, .status-incident-copy-v6 {
  gap: 4px;
  display: grid;
}

.ops-task-head-v7 strong, .ops-provider-card-head-v7 strong, .ops-runtime-card-v7 strong, .status-service-copy-v6 strong, .status-incident-copy-v6 strong {
  font-size: 18px;
  line-height: 1.15;
}

.ops-task-head-v7 span, .ops-provider-card-head-v7 span, .status-service-copy-v6 span, .status-incident-copy-v6 span, .status-incident-summary-v6, .status-incident-update-v6 p {
  color: var(--neutral-text);
  font-size: 13px;
  line-height: 1.6;
}

.ops-task-actions-v7 {
  align-items: center;
  gap: 10px;
  display: flex;
}

.ops-task-meta-v7 {
  flex-wrap: wrap;
  gap: 10px 16px;
  display: flex;
}

.ops-task-progress-v7 {
  height: 10px;
}

.ops-task-footer-v7, .ops-provider-card-foot-v7, .status-incident-meta-v6 {
  flex-wrap: wrap;
  gap: 8px 16px;
  display: flex;
}

.ops-runtime-grid-v7, .status-service-grid-v6, .status-incident-grid-v6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.ops-provider-grid-v7 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.ops-provider-cache-grid-v7 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.ops-provider-cache-stat-v7 {
  border: 1px solid color-mix(in srgb, var(--border-soft) 75%, white 25%);
  background: #ffffffe6;
  gap: 4px;
  padding: 14px;
  display: grid;
}

.ops-provider-cache-stat-v7 strong {
  font-size: 22px;
  line-height: 1;
}

.ops-provider-actions-v7 {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.ops-provider-inline-note-v7, .status-history-list-v6, .status-incident-timeline-v6 {
  gap: 8px;
  display: grid;
}

.ops-provider-inline-note-v7 strong {
  font-size: 14px;
}

.ops-provider-inline-note-v7 span {
  color: var(--neutral-text);
  font-size: 13px;
  line-height: 1.5;
}

.ops-stop-button-v7 {
  color: #be123c;
  border-color: #be185d3d;
}

.ops-stop-button-v7:disabled {
  opacity: .6;
}

.status-hero-v6 {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.status-hero-meta-v6 {
  justify-items: end;
  gap: 8px;
  display: grid;
}

.status-service-grid-v6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.status-service-uplink-v6 {
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  display: flex;
}

.status-service-uplink-v6 strong {
  font-size: 22px;
  line-height: 1;
}

.status-uptime-bars-v6 {
  grid-template-columns: repeat(48, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  min-height: 74px;
  display: grid;
}

.status-uptime-bar-v6 {
  background: color-mix(in srgb, var(--accent) 18%, white 82%);
  border-radius: 999px;
  height: 100%;
  min-height: 42px;
  display: block;
}

.status-uptime-bar-v6.is-operational {
  background: #2fb36d;
}

.status-uptime-bar-v6.is-degraded, .status-uptime-bar-v6.is-investigating, .status-uptime-bar-v6.is-identified, .status-uptime-bar-v6.is-monitoring {
  background: #e8a11b;
}

.status-uptime-bar-v6.is-partial_outage, .status-uptime-bar-v6.is-maintenance {
  background: #dc6b2f;
}

.status-uptime-bar-v6.is-major_outage {
  background: #be123c;
}

.status-uptime-empty-v6, .status-empty-v6 {
  border: 1px dashed color-mix(in srgb, var(--border-soft) 76%, white 24%);
  color: var(--neutral-text);
  padding: 18px;
  font-size: 14px;
}

.status-service-foot-v6 {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  display: flex;
}

.status-incident-badges-v6 {
  flex-wrap: wrap;
  justify-content: end;
  gap: 8px;
  display: flex;
}

.status-history-list-v6 {
  grid-template-columns: 1fr;
}

@media (max-width: 1280px) {
  .ops-provider-grid-v7, .ops-active-task-grid-v7, .ops-runtime-grid-v7, .status-service-grid-v6, .status-incident-grid-v6, .ops-summary-grid-v7, .status-summary-grid-v6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .ops-provider-grid-v7, .ops-active-task-grid-v7, .ops-runtime-grid-v7, .status-service-grid-v6, .status-incident-grid-v6, .ops-summary-grid-v7, .status-summary-grid-v6, .ops-provider-cache-grid-v7 {
    grid-template-columns: minmax(0, 1fr);
  }

  .status-hero-v6, .ops-section-head-v7, .status-section-head-v6, .ops-task-head-v7, .ops-provider-card-head-v7, .status-service-card-head-v6, .status-incident-head-v6 {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .status-hero-meta-v6 {
    justify-items: start;
  }

  .ops-task-actions-v7, .status-incident-badges-v6 {
    justify-content: start;
  }

  .status-uptime-bars-v6 {
    gap: 3px;
  }
}

/* [project]/src/app/collectit-v5-reference.css [app-client] (css) */
html {
  font-size: 14px;
}

body.collectit-v5 {
  color: var(--fg);
  font-family: var(--sans);
  letter-spacing: 0;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
  background: var(--bg) !important;
  background-image: none !important;
}

body.collectit-v5 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--serif);
  letter-spacing: -.01em;
}

body.collectit-v5 .page-container {
  width: 100%;
  padding: 32px;
}

body.collectit-v5 .page-container--regular {
  max-width: 1200px;
  margin: 0 auto;
}

body.collectit-v5 .page-container--extended {
  max-width: 1600px;
  margin: 0 auto;
}

body.collectit-v5 .page-container--full {
  max-width: none;
  padding: 32px 40px;
}

body.collectit-v5 .content-inner {
  padding: 32px;
}

body.collectit-v5[data-view="regular"] .content-inner {
  max-width: 1200px;
  margin: 0 auto;
}

body.collectit-v5[data-view="extended"] .content-inner {
  max-width: 1600px;
  margin: 0 auto;
}

body.collectit-v5[data-view="wide"] .content-inner {
  max-width: none;
  padding: 32px 40px;
}

body.collectit-v5 .v5-sidebar {
  border-right: 2px solid var(--border);
  background: var(--surface);
}

body.collectit-v5 .v5-sidebar-brand {
  min-height: var(--shell-topbar-height);
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  gap: 10px;
  padding: 0 16px;
}

body.collectit-v5 .v5-brand-mark {
  width: 28px;
  height: 28px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
}

body.collectit-v5 .v5-brand-copy strong {
  font-family: var(--serif);
  letter-spacing: -.02em;
  font-size: 15px;
  font-weight: 600;
}

body.collectit-v5 .v5-brand-copy span {
  font-family: var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--subtle);
  font-size: 9px;
}

body.collectit-v5 .v5-sidebar-label {
  font-family: var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--subtle);
  padding: 16px 16px 4px;
  font-size: 9px;
  font-weight: 600;
}

body.collectit-v5 .v5-sidebar-link {
  height: 40px;
  min-height: 40px;
  font-family: var(--sans);
  color: var(--fg-mid);
  border-left: 2px solid #0000;
  gap: 12px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 400;
}

body.collectit-v5 .v5-sidebar-link:hover {
  background: var(--surface2);
  color: var(--fg);
}

body.collectit-v5 .v5-sidebar-link[data-active="true"] {
  background: var(--fg);
  color: var(--bg);
  border-left-color: var(--accent);
  font-weight: 500;
}

body.collectit-v5 .v5-sidebar-badge {
  min-width: 18px;
  height: 18px;
  font-family: var(--mono);
  border: 1px solid;
  padding: 0 4px;
  font-size: 9px;
  line-height: 1;
}

body.collectit-v5 .v5-topbar {
  border-bottom: 2px solid var(--border);
  background: var(--surface);
}

body.collectit-v5 .v5-topbar-row {
  min-height: var(--shell-topbar-height);
  gap: 16px;
  padding: 0 24px;
}

body.collectit-v5 .v5-breadcrumb-list {
  font-family: var(--mono);
  letter-spacing: .02em;
  gap: 8px;
  font-size: 11px;
}

body.collectit-v5 .v5-breadcrumb-link {
  color: var(--muted);
}

body.collectit-v5 .v5-breadcrumb-current {
  color: var(--fg);
  font-weight: 500;
}

body.collectit-v5 .shell-search-field {
  border: 2px solid var(--border-soft);
  background: var(--surface2);
  gap: 8px;
  height: 32px;
  min-height: 32px;
  padding: 6px 12px;
}

body.collectit-v5 .shell-search-field:focus-within {
  border-color: var(--border);
}

body.collectit-v5 .shell-search-field svg {
  width: 12px;
  height: 12px;
  color: var(--subtle);
}

body.collectit-v5 .shell-search-field input {
  letter-spacing: 0;
  font-size: 12px;
  line-height: 1.1;
}

body.collectit-v5 .shell-search-field input::placeholder {
  color: var(--subtle);
}

body.collectit-v5 .v5-topbar-button, body.collectit-v5 .v5-topbar-select, body.collectit-v5 .v5-topbar-icon-button, body.collectit-v5 .v5-account-button {
  border: 2px solid var(--border-soft);
  background: var(--surface);
  height: 32px;
  min-height: 32px;
  color: var(--fg);
  font-family: var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
}

body.collectit-v5 .v5-topbar-button {
  min-width: 42px;
  padding: 0 10px;
}

body.collectit-v5 .v5-topbar-group .v5-topbar-button + .v5-topbar-button {
  margin-left: -2px;
}

body.collectit-v5 .v5-topbar-button:hover, body.collectit-v5 .v5-topbar-icon-button:hover, body.collectit-v5 .v5-account-button:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

body.collectit-v5 .v5-topbar-button[data-active="true"] {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

body.collectit-v5 .v5-topbar-icon-button, body.collectit-v5 .v5-account-button {
  justify-content: center;
  width: 32px;
  min-width: 32px;
  padding: 0;
}

body.collectit-v5 .dark-toggle {
  border: 2px solid var(--border-mid);
  background: var(--surface3);
  width: 40px;
  height: 22px;
}

body.collectit-v5 .dark-toggle:after {
  background: var(--fg);
  width: 14px;
  height: 14px;
  top: 1px;
  left: 1px;
}

body.collectit-v5[data-theme="dark"] .dark-toggle {
  background: var(--accent);
  border-color: var(--accent);
}

body.collectit-v5[data-theme="dark"] .dark-toggle:after {
  background: var(--accent-fg);
  transform: translateX(18px);
}

body.collectit-v5 .v5-account-avatar {
  background: var(--accent);
  width: 100%;
  height: 100%;
  color: var(--accent-fg);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}

body.collectit-v5 .v5-account-panel {
  border: 2px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}

body.collectit-v5 .v5-account-panel-head {
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 16px;
}

body.collectit-v5 .v5-account-panel-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
}

body.collectit-v5 .v5-account-panel-subtitle, body.collectit-v5 .v5-account-panel-status {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 10px;
}

body.collectit-v5 .v5-account-panel-link {
  border-top: 1px solid var(--border-soft);
  min-height: 36px;
  padding: 0 16px;
  font-size: 12px;
}

body.collectit-v5 .v5-footer-strip {
  border-top: 2px solid var(--border);
  background: var(--surface);
  gap: 16px;
  padding: 10px 24px;
}

body.collectit-v5 .v5-footer-shortcut, body.collectit-v5 .v5-footer-status {
  font-family: var(--mono);
  letter-spacing: .05em;
  color: var(--muted);
  font-size: 10px;
}

body.collectit-v5 .v5-footer-key {
  border: 1px solid var(--border-soft);
  padding: 2px 4px;
}

body.collectit-v5 .sec-title, body.collectit-v5 .v5-block-title {
  font-family: var(--serif);
  letter-spacing: -.02em;
  font-size: 18px;
  font-weight: 600;
}

body.collectit-v5 .v5-page-title h1, body.collectit-v5 .calendar-page-head-v5 h1 {
  font-family: var(--serif);
  letter-spacing: -.025em;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
}

body.collectit-v5 .sec-sub, body.collectit-v5 .v5-page-subtitle, body.collectit-v5 .calendar-page-head-v5 .v5-page-subtitle, body.collectit-v5 .collection-export-v5, body.collectit-v5 .v5-block-meta, body.collectit-v5 .v5-tabbar-meta, body.collectit-v5 .v5-list-meta {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 11px;
}

body.collectit-v5 .sec-hdr {
  border-bottom: 2px solid var(--border);
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  display: flex;
}

body.collectit-v5 .sec-action {
  font-family: var(--mono);
  color: var(--accent);
  margin-left: auto;
  font-size: 11px;
  text-decoration: none;
}

body.collectit-v5 .sec-action:hover {
  color: var(--fg);
}

body.collectit-v5 .panel {
  border: 2px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}

body.collectit-v5 .panel-hdr, body.collectit-v5 .stat-label, body.collectit-v5 .sparkline-meta {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}

body.collectit-v5 .panel-hdr {
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
  padding: 12px 16px;
}

body.collectit-v5 .panel-body {
  padding: 16px;
}

body.collectit-v5 .badge {
  border: 1px solid var(--border-soft);
  min-height: auto;
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 600;
  display: inline-flex;
}

body.collectit-v5 .v5-home-page {
  width: 100%;
}

body.collectit-v5 .home-content-shell {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

body.collectit-v5 .hero-banner {
  border: 2px solid var(--border);
  min-height: 232px;
  box-shadow: none;
  background: #050505;
  align-items: stretch;
  display: flex;
  position: relative;
  overflow: hidden;
}

body.collectit-v5 .hero-banner:before {
  content: "COLLECT-IT";
  font-family: var(--serif);
  letter-spacing: -.06em;
  color: #ffffff0d;
  pointer-events: none;
  font-size: 84px;
  font-weight: 700;
  position: absolute;
  bottom: -18px;
  right: 28px;
}

body.collectit-v5 .hero-banner--media:before {
  z-index: 1;
}

body.collectit-v5 .hero-banner-media, body.collectit-v5 .hero-banner-overlay {
  position: absolute;
  inset: 0;
}

body.collectit-v5 .hero-banner-media-image {
  object-fit: cover;
  object-position: center;
}

body.collectit-v5 .hero-banner-overlay {
  z-index: 0;
  background: linear-gradient(90deg, #050505e6 0%, #050505bd 52%, #05050547 100%);
}

body.collectit-v5 .hero-banner-content {
  z-index: 2;
  width: 100%;
  padding: 32px;
  position: relative;
}

body.collectit-v5 .hero-eyebrow {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
}

body.collectit-v5 .hero-title {
  max-width: 1100px;
  font-family: var(--serif);
  letter-spacing: -.04em;
  margin-top: 14px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
}

body.collectit-v5 .hero-sub {
  color: #ffffffc7;
  max-width: 640px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
}

body.collectit-v5 .hero-stats {
  border-top: 1px solid #ffffff1a;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 1040px;
  margin-top: 26px;
  padding-top: 18px;
  display: grid;
}

body.collectit-v5 .hero-stat-val {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

body.collectit-v5 .hero-stat-lbl {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffffb8;
  margin-top: 4px;
  font-size: 10px;
}

body.collectit-v5 .home-two-col {
  margin-top: 24px;
  display: block;
}

body.collectit-v5[data-view="wide"] .home-two-col {
  grid-template-columns: minmax(0, 1.7fr) minmax(360px, 1fr);
  align-items: start;
  gap: 24px;
  display: grid;
}

body.collectit-v5 .home-right {
  align-content: start;
  gap: 24px;
  display: grid;
}

body.collectit-v5:not([data-view="wide"]) .home-right {
  margin-top: 24px;
}

body.collectit-v5 .release-row {
  border-bottom: 1px solid var(--border-soft);
  background: none;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  display: flex;
}

body.collectit-v5 .release-row:hover {
  background: var(--surface2);
  margin: 0 -16px;
  padding: 14px 16px;
}

body.collectit-v5 .release-row:last-child {
  border-bottom: none;
}

body.collectit-v5 .release-date-box {
  border: 2px solid var(--border);
  text-align: center;
  flex-shrink: 0;
  width: 52px;
  padding: 8px 0;
}

body.collectit-v5 .release-date-mon {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 9px;
}

body.collectit-v5 .release-date-day {
  font-family: var(--serif);
  margin-top: 2px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

body.collectit-v5 .release-name {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

body.collectit-v5 .release-code {
  font-family: var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 4px;
  font-size: 11px;
}

body.collectit-v5 .release-arrow {
  color: var(--muted);
  font-size: 12px;
}

body.collectit-v5 .movers-panel-body {
  padding: 8px 16px;
}

body.collectit-v5 .mover-row {
  border-bottom: 1px solid var(--border-soft);
  background: none;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  display: flex;
}

body.collectit-v5 .mover-row:hover {
  background: var(--surface2);
  margin: 0 -16px;
  padding: 10px 16px;
}

body.collectit-v5 .mover-row:last-child {
  border-bottom: none;
}

body.collectit-v5 .mover-thumb {
  border: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
  width: 36px;
  height: 52px;
  overflow: hidden;
}

body.collectit-v5 .mover-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

body.collectit-v5 .mover-name {
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

body.collectit-v5 .mover-set {
  font-family: var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 4px;
  font-size: 10px;
}

body.collectit-v5 .mover-price {
  text-align: right;
  flex-shrink: 0;
}

body.collectit-v5 .mover-val {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
}

body.collectit-v5 .mover-chg, body.collectit-v5 .stat-delta {
  font-family: var(--mono);
  margin-top: 2px;
  font-size: 10px;
}

body.collectit-v5 .mover-chg.up, body.collectit-v5 .stat-delta.up {
  color: #059669;
}

body.collectit-v5 .mover-chg.dn, body.collectit-v5 .stat-delta.dn {
  color: #dc2626;
}

body.collectit-v5 .activity-row {
  border-bottom: 1px solid var(--border-soft);
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  display: flex;
}

body.collectit-v5 .activity-row:last-child {
  border-bottom: none;
}

body.collectit-v5 .activity-dot {
  background: var(--accent);
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
}

body.collectit-v5 .activity-text {
  font-size: 13px;
  line-height: 1.35;
}

body.collectit-v5 .activity-time {
  font-family: var(--mono);
  color: var(--muted);
  margin-top: 4px;
  font-size: 10px;
}

body.collectit-v5 .snapshot-grid {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  display: grid;
}

body.collectit-v5 .snapshot-value {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.05;
}

body.collectit-v5 .snapshot-secondary {
  font-family: var(--serif);
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.2;
}

body.collectit-v5 .snapshot-top-value {
  color: var(--accent);
}

body.collectit-v5 .snapshot-sparkline {
  margin-top: 16px;
}

body.collectit-v5 .sparkline {
  align-items: flex-end;
  gap: 4px;
  height: 52px;
  display: flex;
}

body.collectit-v5 .spark-bar {
  background: var(--border-soft);
  flex: 1;
  min-height: 4px;
}

body.collectit-v5 .spark-bar.hi {
  background: var(--accent);
}

body.collectit-v5 .spark-bar:last-child {
  background: var(--fg);
}

body.collectit-v5 .hero-actions-strip {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  display: flex;
}

body.collectit-v5 .hero-action-link {
  border: 2px solid var(--border);
  background: var(--surface);
  min-height: 32px;
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
}

body.collectit-v5 .home-news-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

body.collectit-v5 .news-card {
  border: 2px solid var(--border);
  background: var(--surface);
  padding: 16px;
}

body.collectit-v5 .news-card-meta {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 10px;
}

body.collectit-v5 .news-card h2 {
  font-family: var(--serif);
  margin-top: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
}

body.collectit-v5 .news-card p {
  color: var(--fg-mid);
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 960px) {
  body.collectit-v5 .page-container, body.collectit-v5 .page-container--full, body.collectit-v5 .content-inner, body.collectit-v5[data-view="wide"] .content-inner {
    padding: 16px;
  }

  body.collectit-v5 .v5-topbar-row, body.collectit-v5 .v5-footer-strip {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.collectit-v5 .hero-banner-content {
    padding: 20px;
  }

  body.collectit-v5 .hero-title {
    font-size: 26px;
  }

  body.collectit-v5 .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  body.collectit-v5 .home-two-col {
    display: block;
  }

  body.collectit-v5 .home-right {
    margin-top: 24px;
  }

  body.collectit-v5 .snapshot-grid, body.collectit-v5 .home-news-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body.collectit-v5 .v5-footer-strip {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  body.collectit-v5 .v5-footer-shortcuts, body.collectit-v5 .v5-footer-status {
    width: 100%;
  }
}

/* [project]/src/app/browser-core-reference.css [app-client] (css) */
body.browser-core {
  --sans: var(--bc-font-ui);
  --serif: var(--bc-font-ui);
  --mono: var(--bc-font-mono);
  --bg: var(--bc-bg);
  --surface: var(--bc-panel);
  --surface2: var(--bc-panel-dim);
  --surface3: #eef2f7;
  --border: var(--bc-border);
  --border-mid: var(--bc-border-mid);
  --border-soft: var(--bc-border);
  --fg: var(--bc-text);
  --fg-mid: var(--bc-text-mid);
  --muted: var(--bc-text-muted);
  --subtle: var(--bc-text-subtle);
  --accent: var(--bc-accent);
  --accent-fg: var(--bc-accent-fg);
  --accent-dim: var(--bc-accent-subtle);
  --accent-hover: var(--bc-accent-hover);
  --background: var(--bc-bg);
  --foreground: var(--bc-text);
  --card: var(--bc-panel);
  --surface-alt: var(--bc-panel-dim);
  --surface-soft: var(--bc-panel-dim);
  --surface-strong: #eef2f7;
  --font-display: var(--bc-font-ui);
  --font-body: var(--bc-font-ui);
  --font-mono: var(--bc-font-mono);
  --accent-subtle: var(--bc-accent-subtle);
  --accent-soft: var(--bc-accent-subtle);
  --accent-ink: var(--bc-accent);
  --neutral-subtle: var(--bc-panel-dim);
  --neutral-text: var(--bc-text-mid);
  --shell-sidebar-width: 236px;
  --shell-sidebar-collapsed-width: 64px;
  --shell-topbar-height: 52px;
  --t: var(--bc-motion-quick) var(--bc-ease-standard);
  --t-slow: var(--bc-motion-default) var(--bc-ease-standard);
  --shadow-panel: var(--bc-shadow-panel);
  --shadow-soft: var(--bc-shadow-panel);
  --shadow-sm: var(--bc-shadow-panel);
  --shadow-md: var(--bc-shadow-float);
  --shadow-lg: var(--bc-shadow-lift);
  color: var(--bc-text);
  font-family: var(--bc-font-ui);
  letter-spacing: 0;
  line-height: 1.5;
  background-color: var(--bc-bg) !important;
  background-image: linear-gradient(color-mix(in srgb, var(--bc-border) 30%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--bc-border) 30%, transparent) 1px, transparent 1px),
    linear-gradient(180deg, #fafcff 0%, var(--bc-bg) 100%) !important;
  background-position: 0 0, 0 0, 0 0 !important;
  background-size: 20px 20px, 20px 20px, 100% 100% !important;
}

body.browser-core :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--bc-font-ui);
  letter-spacing: -.03em;
  font-weight: 600;
}

body.browser-core :is(code, pre) {
  font-family: var(--bc-font-mono);
}

body.browser-core .v5-shell {
  background: none;
}

body.browser-core .page-container {
  width: 100%;
  padding: 24px 28px;
}

body.browser-core .page-container--regular {
  max-width: 1200px;
  margin: 0 auto;
}

body.browser-core .page-container--extended {
  max-width: 1600px;
  margin: 0 auto;
}

body.browser-core .page-container--full {
  max-width: none;
  padding: 24px 32px;
}

body.browser-core .content-inner {
  width: 100%;
  padding: 24px 28px;
}

body.browser-core[data-view="regular"] .content-inner {
  max-width: 1200px;
  margin: 0 auto;
}

body.browser-core[data-view="extended"] .content-inner {
  max-width: 1600px;
  margin: 0 auto;
}

body.browser-core[data-view="wide"] .content-inner {
  max-width: none;
  padding: 24px 32px;
}

body.browser-core .v5-sidebar, body.browser-core .v5-topbar, body.browser-core .v5-footer-strip, body.browser-core .v5-account-panel, body.browser-core .panel, body.browser-core .news-card, body.browser-core .settings-group-v5, body.browser-core .auth-card-v5, body.browser-core .auth-form-wrap-v5, body.browser-core .shell-search-field, body.browser-core .v5-topbar-select, body.browser-core .v5-topbar-icon-button, body.browser-core .v5-account-button, body.browser-core .settings-segment-v5, body.browser-core .settings-select-v5, body.browser-core .settings-action-v5 {
  border-radius: var(--bc-radius-md);
  box-shadow: var(--bc-shadow-panel);
}

body.browser-core .v5-sidebar {
  border-right: 1px solid var(--bc-border);
  background: var(--bc-panel);
}

body.browser-core .v5-sidebar-brand {
  min-height: var(--shell-topbar-height);
  border-bottom: 1px solid var(--bc-border);
  background: var(--bc-panel);
  gap: 10px;
  padding: 0 16px;
}

body.browser-core .v5-brand-mark {
  border: 1px solid color-mix(in srgb, var(--bc-accent) 22%, var(--bc-border) 78%);
  border-radius: var(--bc-radius-md);
  background: var(--bc-accent-subtle);
  width: 30px;
  height: 30px;
  color: var(--bc-accent);
  font-family: var(--bc-font-mono);
  font-size: 13px;
  font-weight: 600;
}

body.browser-core .v5-brand-copy strong {
  font-family: var(--bc-font-ui);
  letter-spacing: -.02em;
  font-size: 15px;
  font-weight: 600;
}

body.browser-core .v5-brand-copy span, body.browser-core .v5-sidebar-label, body.browser-core .v5-footer-key, body.browser-core .v5-footer-shortcut, body.browser-core .v5-footer-status, body.browser-core .v5-account-panel-subtitle, body.browser-core .v5-account-panel-status, body.browser-core .hero-eyebrow, body.browser-core .panel-hdr, body.browser-core .stat-label, body.browser-core .sparkline-meta, body.browser-core .release-code, body.browser-core .activity-time, body.browser-core .news-card-meta, body.browser-core .settings-group-head-v5, body.browser-core .settings-segment-button-v5, body.browser-core .settings-toggle-v5 {
  font-family: var(--bc-font-mono);
}

body.browser-core .v5-brand-copy span, body.browser-core .v5-sidebar-label, body.browser-core .settings-group-head-v5 {
  color: var(--bc-text-subtle);
}

body.browser-core .v5-sidebar-link {
  height: 40px;
  min-height: 40px;
  color: var(--bc-text-mid);
  box-shadow: none;
  border-left: 2px solid #0000;
  border-radius: 0;
  gap: 12px;
  padding: 0 16px;
}

body.browser-core .v5-sidebar-link:hover {
  background: var(--bc-panel-dim);
  color: var(--bc-text);
}

body.browser-core .v5-sidebar-link[data-active="true"] {
  border-left-color: var(--bc-accent);
  background: var(--bc-accent-subtle);
  color: var(--bc-accent);
}

body.browser-core .v5-sidebar-badge {
  border-radius: var(--bc-radius-pill);
}

body.browser-core .v5-topbar {
  border-bottom: 1px solid var(--bc-border);
  background: color-mix(in srgb, var(--bc-panel) 92%, white 8%);
}

body.browser-core .v5-topbar-row {
  gap: 16px;
  padding: 12px 20px;
}

body.browser-core .v5-topbar-group {
  display: inline-flex;
}

body.browser-core .shell-search-field {
  border: 1px solid var(--bc-border);
  background: var(--bc-bg);
  min-height: 40px;
  padding: 8px 14px;
}

body.browser-core .shell-search-field svg {
  color: var(--bc-text-subtle);
}

body.browser-core .shell-search-field input {
  font-family: var(--bc-font-mono);
  color: var(--bc-text);
}

body.browser-core .shell-search-field:focus-within, body.browser-core .v5-topbar-button:hover, body.browser-core .v5-topbar-icon-button:hover, body.browser-core .v5-account-button:hover, body.browser-core .settings-action-v5:hover {
  border-color: var(--bc-accent);
}

body.browser-core .v5-topbar-button, body.browser-core .v5-topbar-select, body.browser-core .v5-topbar-icon-button, body.browser-core .v5-account-button {
  border: 1px solid var(--bc-border);
  background: var(--bc-panel);
  color: var(--bc-text-mid);
}

body.browser-core .v5-topbar-button {
  min-width: 42px;
  height: 32px;
  min-height: 32px;
  box-shadow: none;
  font-family: var(--bc-font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
}

body.browser-core .v5-topbar-group .v5-topbar-button + .v5-topbar-button {
  margin-left: -1px;
}

body.browser-core .v5-topbar-group .v5-topbar-button:first-child {
  border-top-left-radius: var(--bc-radius-md);
  border-bottom-left-radius: var(--bc-radius-md);
}

body.browser-core .v5-topbar-group .v5-topbar-button:last-child {
  border-top-right-radius: var(--bc-radius-md);
  border-bottom-right-radius: var(--bc-radius-md);
}

body.browser-core .v5-topbar-button[data-active="true"] {
  border-color: var(--bc-accent);
  background: var(--bc-accent-subtle);
  color: var(--bc-accent);
}

body.browser-core .v5-account-avatar {
  border-radius: var(--bc-radius-md);
  background: var(--bc-accent-subtle);
  color: var(--bc-accent);
}

body.browser-core .v5-account-panel {
  border: 1px solid var(--bc-border);
  background: var(--bc-panel);
}

body.browser-core .v5-account-panel-head {
  border-bottom: 1px solid var(--bc-border);
}

body.browser-core .v5-account-panel-link {
  border-radius: var(--bc-radius-sm);
}

body.browser-core .v5-account-panel-link:hover {
  background: var(--bc-panel-dim);
  color: var(--bc-accent);
}

body.browser-core .v5-footer-strip {
  border-top: 1px solid var(--bc-border);
  background: var(--bc-panel);
}

body.browser-core .v5-footer-shortcut, body.browser-core .v5-footer-status {
  color: var(--bc-text-muted);
}

body.browser-core .v5-footer-key {
  border: 1px solid var(--bc-border-mid);
  border-radius: var(--bc-radius-sm);
  background: var(--bc-bg);
  box-shadow: 0 1px 0 var(--bc-border-mid);
}

body.browser-core .sec-title, body.browser-core .calendar-page-head-v5 h1, body.browser-core .v5-page-title h1, body.browser-core .v5-block-title {
  font-family: var(--bc-font-ui);
  color: var(--bc-text);
}

body.browser-core .sec-sub, body.browser-core .v5-page-subtitle, body.browser-core .calendar-page-head-v5 .v5-page-subtitle, body.browser-core .collection-export-v5 {
  color: var(--bc-text-muted);
}

body.browser-core .sec-action {
  color: var(--bc-accent);
}

body.browser-core .panel, body.browser-core .news-card, body.browser-core .release-row, body.browser-core .mover-row {
  border: 1px solid var(--bc-border);
  background: var(--bc-panel);
}

body.browser-core .panel-hdr, body.browser-core .panel-body, body.browser-core .settings-group-head-v5, body.browser-core .settings-row-v5 {
  border-color: var(--bc-border);
}

body.browser-core .panel-hdr, body.browser-core .stat-label, body.browser-core .sparkline-meta {
  color: var(--bc-text-muted);
  letter-spacing: .08em;
}

body.browser-core .panel-body {
  color: var(--bc-text-mid);
}

body.browser-core .badge {
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  background: var(--bc-panel-dim);
  color: var(--bc-text-mid);
}

body.browser-core .badge-accent {
  border-color: color-mix(in srgb, var(--bc-accent) 40%, var(--bc-border) 60%);
  background: var(--bc-accent-subtle);
  color: var(--bc-accent);
}

body.browser-core .v5-home-page {
  width: 100%;
}

body.browser-core .home-content-shell {
  gap: var(--bc-space-8);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

body.browser-core[data-view="extended"] .home-content-shell {
  max-width: 1380px;
}

body.browser-core[data-view="wide"] .home-content-shell {
  max-width: 1700px;
}

body.browser-core .hero-banner {
  border: 1px solid var(--bc-border);
  background: linear-gradient(135deg, #06b6d414, #fff0),
    var(--bc-panel);
  min-height: 232px;
  box-shadow: var(--bc-shadow-lift);
  border-radius: 14px;
  align-items: stretch;
  display: flex;
  position: relative;
  overflow: hidden;
}

body.browser-core .hero-banner:before {
  content: "COLLECT-IT";
  font-family: var(--bc-font-ui);
  letter-spacing: -.06em;
  color: color-mix(in srgb, var(--bc-text) 6%, transparent);
  pointer-events: none;
  font-size: 84px;
  font-weight: 700;
  position: absolute;
  bottom: -18px;
  right: 28px;
}

body.browser-core .hero-banner--media:before {
  z-index: 1;
}

body.browser-core .hero-banner-media, body.browser-core .hero-banner-overlay {
  position: absolute;
  inset: 0;
}

body.browser-core .hero-banner-media {
  z-index: 0;
}

body.browser-core .hero-banner-media-image {
  object-fit: cover;
  object-position: center;
}

body.browser-core .hero-banner-content {
  z-index: 2;
  width: 100%;
  padding: 32px;
  position: relative;
}

body.browser-core .hero-banner-overlay {
  z-index: 1;
  background: linear-gradient(90deg, #0d1117d6 0%, #0d11179e 52%, #0d111733 100%);
}

body.browser-core .hero-eyebrow {
  color: var(--bc-accent);
  letter-spacing: .12em;
}

body.browser-core .hero-title {
  color: #fff;
  max-width: 1100px;
  font-family: var(--bc-font-ui);
  margin-top: 14px;
  font-weight: 600;
  line-height: .92;
}

body.browser-core .hero-sub, body.browser-core .hero-stat-lbl {
  color: color-mix(in srgb, white 82%, var(--bc-text-muted));
}

body.browser-core .activity-text, body.browser-core .snapshot-secondary, body.browser-core .news-card p {
  color: var(--bc-text-mid);
}

body.browser-core .hero-stat-val {
  color: #fff;
  font-family: var(--bc-font-mono);
}

body.browser-core .snapshot-value, body.browser-core .mover-val {
  color: var(--bc-text);
  font-family: var(--bc-font-mono);
}

body.browser-core .release-code, body.browser-core .mover-set, body.browser-core .activity-time {
  color: var(--bc-text-muted);
}

body.browser-core .home-two-col {
  margin-top: 28px;
  display: block;
}

body.browser-core[data-view="extended"] .home-two-col, body.browser-core[data-view="wide"] .home-two-col {
  grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr);
  align-items: start;
  gap: 24px;
  display: grid;
}

body.browser-core[data-view="wide"] .home-two-col {
  grid-template-columns: minmax(0, 1.95fr) minmax(360px, .98fr);
  gap: 28px;
}

body.browser-core .home-left, body.browser-core .home-right {
  min-width: 0;
}

body.browser-core .home-right {
  align-content: start;
  gap: 22px;
  display: grid;
}

body.browser-core:not([data-view="extended"]):not([data-view="wide"]) .home-right {
  margin-top: 24px;
}

body.browser-core .release-row, body.browser-core .mover-row {
  border-radius: var(--bc-radius-md);
  align-items: center;
  gap: 14px;
}

body.browser-core .release-row:hover, body.browser-core .mover-row:hover, body.browser-core .news-card:hover {
  border-color: var(--bc-accent);
  transform: translateY(-1px);
}

body.browser-core .release-date-box, body.browser-core .mover-thumb {
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-md);
  background: var(--bc-panel-dim);
}

body.browser-core .release-date-mon, body.browser-core .release-date-day {
  font-family: var(--bc-font-mono);
}

body.browser-core .release-name, body.browser-core .mover-name, body.browser-core .news-card h2 {
  color: var(--bc-text);
}

body.browser-core .release-arrow {
  color: var(--bc-accent);
}

body.browser-core .mover-chg.up, body.browser-core .stat-delta.up {
  color: var(--bc-success);
}

body.browser-core .mover-chg.dn, body.browser-core .stat-delta.dn {
  color: var(--bc-danger);
}

body.browser-core .activity-row {
  border-bottom: 1px solid var(--bc-border);
}

body.browser-core .activity-dot, body.browser-core .spark-bar.hi {
  background: var(--bc-accent);
}

body.browser-core .settings-group-v5 {
  border: 1px solid var(--bc-border);
  background: var(--bc-panel);
}

body.browser-core .settings-group-head-v5 {
  border-bottom: 1px solid var(--bc-border);
  background: var(--bc-panel-dim);
}

body.browser-core .settings-segment-v5, body.browser-core .settings-toggle-track-v5, body.browser-core .settings-select-v5, body.browser-core .settings-action-v5 {
  border: 1px solid var(--bc-border);
  background: var(--bc-panel);
}

body.browser-core .settings-segment-button-v5[data-active="true"] {
  background: var(--bc-accent);
}

body.browser-core .settings-toggle-thumb-v5 {
  background: var(--bc-text);
}

body.browser-core .settings-palette-swatch-v5 {
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
}

body.browser-core .settings-palette-swatch-v5[data-active="true"] {
  outline: 2px solid var(--bc-accent);
  outline-offset: 2px;
}

body.browser-core :is(.settings-segment-button-v5, .settings-toggle-v5, .settings-action-v5):disabled {
  cursor: not-allowed;
  opacity: .55;
}

@media (max-width: 960px) {
  body.browser-core .page-container, body.browser-core .page-container--full, body.browser-core .content-inner, body.browser-core .page-container--full, body.browser-core[data-view="wide"] .content-inner {
    padding: 20px;
  }

  body.browser-core .hero-title {
    max-width: none;
  }

  body.browser-core .home-two-col, body.browser-core[data-view="extended"] .home-two-col, body.browser-core[data-view="wide"] .home-two-col {
    display: block;
  }

  body.browser-core .home-right {
    margin-top: 24px;
  }
}

/* [project]/src/design/tokens/browser-core.css [app-client] (css) */
.browser-core {
  --bc-bg: #f3f4f6;
  --bc-panel: #fff;
  --bc-panel-dim: #f9fafb;
  --bc-border: #e5e7eb;
  --bc-border-mid: #d1d5db;
  --bc-border-dark: #9ca3af;
  --bc-text: #111827;
  --bc-text-mid: #374151;
  --bc-text-muted: #6b7280;
  --bc-text-subtle: #9ca3af;
  --bc-accent: #06b6d4;
  --bc-accent-hover: #0891b2;
  --bc-accent-subtle: #06b6d41a;
  --bc-accent-fg: #fff;
  --bc-tl-red: #ff5f57;
  --bc-tl-yellow: #febc2e;
  --bc-tl-green: #28c840;
  --bc-dark-bg: #0d1117;
  --bc-dark-panel: #161b22;
  --bc-dark-border: #30363d;
  --bc-dark-text: #e6edf3;
  --bc-dark-muted: #8b949e;
  --bc-dark-accent: #06b6d4;
  --bc-success: #22c55e;
  --bc-warning: #f59e0b;
  --bc-danger: #ef4444;
  --bc-success-bg: #f0fdf4;
  --bc-warning-bg: #fffbeb;
  --bc-danger-bg: #fef2f2;
  --bc-font-ui: var(--font-inter),
    "Inter",
    "Segoe UI",
    system-ui,
    sans-serif;
  --bc-font-mono: var(--font-jetbrains-mono),
    "JetBrains Mono",
    "Fira Code",
    "SFMono-Regular",
    Consolas,
    monospace;
  --bc-space-1: 4px;
  --bc-space-2: 8px;
  --bc-space-3: 12px;
  --bc-space-4: 16px;
  --bc-space-5: 20px;
  --bc-space-6: 24px;
  --bc-space-8: 32px;
  --bc-space-10: 40px;
  --bc-space-12: 48px;
  --bc-radius-sm: 4px;
  --bc-radius-md: 6px;
  --bc-radius-lg: 8px;
  --bc-radius-xl: 12px;
  --bc-radius-pill: 9999px;
  --bc-shadow-panel: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --bc-shadow-float: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --bc-shadow-lift: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --bc-motion-quick: .12s;
  --bc-motion-default: .2s;
  --bc-motion-enter: .4s;
  --bc-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --bc-ease-enter: cubic-bezier(0, 0, .2, 1);
  --bc-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --bc-sidebar-left: 256px;
  --bc-sidebar-right: 320px;
  --bc-changelog-left: 300px;
  --bc-tab-height: 36px;
  --bc-addressbar-height: 44px;
  --bc-inspector-row-height: 28px;
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__0fgrngh._.css.map*/