@font-face{font-display:swap;font-family:Barlow Condensed;font-style:normal;font-weight:600;src:url(/static/fonts/barlow-condensed-600-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:Barlow Condensed;font-style:normal;font-weight:600;src:url(/static/fonts/barlow-condensed-600-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:Barlow Condensed;font-style:normal;font-weight:700;src:url(/static/fonts/barlow-condensed-700-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:Barlow Condensed;font-style:normal;font-weight:700;src:url(/static/fonts/barlow-condensed-700-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:Barlow Condensed;font-style:normal;font-weight:800;src:url(/static/fonts/barlow-condensed-800-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:Barlow Condensed;font-style:normal;font-weight:800;src:url(/static/fonts/barlow-condensed-800-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:400;src:url(/static/fonts/figtree-400-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:400;src:url(/static/fonts/figtree-400-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:500;src:url(/static/fonts/figtree-500-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:500;src:url(/static/fonts/figtree-500-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:600;src:url(/static/fonts/figtree-600-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:600;src:url(/static/fonts/figtree-600-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:700;src:url(/static/fonts/figtree-700-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:700;src:url(/static/fonts/figtree-700-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:JetBrains Mono;font-style:normal;font-weight:400;src:url(/static/fonts/jetbrains-mono-400-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:JetBrains Mono;font-style:normal;font-weight:400;src:url(/static/fonts/jetbrains-mono-400-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:JetBrains Mono;font-style:normal;font-weight:500;src:url(/static/fonts/jetbrains-mono-500-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:JetBrains Mono;font-style:normal;font-weight:500;src:url(/static/fonts/jetbrains-mono-500-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:JetBrains Mono;font-style:normal;font-weight:700;src:url(/static/fonts/jetbrains-mono-700-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:JetBrains Mono;font-style:normal;font-weight:700;src:url(/static/fonts/jetbrains-mono-700-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:Figtree,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:JetBrains Mono,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-x-3{left:.75rem;right:.75rem}.inset-x-\[28\%\]{left:28%;right:28%}.inset-y-0{bottom:0;top:0}.inset-y-\[28\%\]{bottom:28%;top:28%}.-bottom-1{bottom:-.25rem}.-left-\[1\.48rem\]{left:-1.48rem}.-right-1{right:-.25rem}.-right-1\.5{right:-.375rem}.-right-20{right:-5rem}.-top-1{top:-.25rem}.-top-1\.5{top:-.375rem}.-top-20{top:-5rem}.-top-5{top:-1.25rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-3{top:.75rem}.top-4{top:1rem}.top-\[var\(--header-h\)\]{top:var(--header-h)}.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}.col-span-2{grid-column:span 2/span 2}.col-start-2{grid-column-start:2}.col-end-4{grid-column-end:4}.-mx-4{margin-left:-1rem;margin-right:-1rem}.-mx-5{margin-left:-1.25rem;margin-right:-1.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-bottom:.25rem;margin-top:.25rem}.my-10{margin-bottom:2.5rem;margin-top:2.5rem}.my-8{margin-bottom:2rem;margin-top:2rem}.-mt-1{margin-top:-.25rem}.-mt-3{margin-top:-.75rem}.-mt-5{margin-top:-1.25rem}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-1\.5{margin-left:.375rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.ml-px{margin-left:1px}.mr-0\.5{margin-right:.125rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-3{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.line-clamp-3{-webkit-line-clamp:3}.line-clamp-4{-webkit-line-clamp:4}.line-clamp-4,.line-clamp-5{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.line-clamp-5{-webkit-line-clamp:5}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-row{display:table-row}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-\[16\/10\]{aspect-ratio:16/10}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-square{aspect-ratio:1/1}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-36{height:9rem}.h-4{height:1rem}.h-40{height:10rem}.h-5{height:1.25rem}.h-52{height:13rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[10\%\]{height:10%}.h-\[220px\]{height:220px}.h-full{height:100%}.h-px{height:1px}.max-h-64{max-height:16rem}.max-h-\[42rem\]{max-height:42rem}.max-h-\[80vh\]{max-height:80vh}.min-h-10{min-height:2.5rem}.min-h-11{min-height:2.75rem}.min-h-12{min-height:3rem}.min-h-14{min-height:3.5rem}.min-h-16{min-height:4rem}.min-h-20{min-height:5rem}.min-h-7{min-height:1.75rem}.min-h-9,.min-h-\[2\.25rem\]{min-height:2.25rem}.min-h-\[2\.75rem\]{min-height:2.75rem}.min-h-\[2rem\]{min-height:2rem}.min-h-\[3rem\]{min-height:3rem}.min-h-\[4\.25rem\]{min-height:4.25rem}.min-h-full{min-height:100%}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-32{width:8rem}.w-36{width:9rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-5\/6{width:83.333333%}.w-56{width:14rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[12\%\]{width:12%}.w-\[3\.25rem\]{width:3.25rem}.w-\[5\.75rem\]{width:5.75rem}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0}.min-w-10{min-width:2.5rem}.min-w-4{min-width:1rem}.min-w-44{min-width:11rem}.min-w-\[2\.75rem\]{min-width:2.75rem}.min-w-\[28rem\]{min-width:28rem}.min-w-\[32rem\]{min-width:32rem}.min-w-\[34rem\]{min-width:34rem}.min-w-\[42rem\]{min-width:42rem}.min-w-\[560px\]{min-width:560px}.min-w-\[9rem\]{min-width:9rem}.min-w-max{min-width:-moz-max-content;min-width:max-content}.max-w-0{max-width:0}.max-w-24{max-width:6rem}.max-w-2xl{max-width:42rem}.max-w-3{max-width:.75rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-\[14rem\]{max-width:14rem}.max-w-\[16rem\]{max-width:16rem}.max-w-\[3\.25rem\]{max-width:3.25rem}.max-w-\[48px\]{max-width:48px}.max-w-\[60\%\]{max-width:60%}.max-w-\[64px\]{max-width:64px}.max-w-\[72px\]{max-width:72px}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulseDot{0%,to{opacity:1}50%{opacity:.35}}.animate-pulsedot{animation:pulseDot 1.4s ease-in-out infinite}.cursor-default{cursor:default}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-start{scroll-snap-align:start}.scroll-mt-24{scroll-margin-top:6rem}.scroll-pl-4{scroll-padding-left:1rem}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[1\.5rem_minmax\(0\2c 1fr\)_auto_auto\]{grid-template-columns:1.5rem minmax(0,1fr) auto auto}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr}.grid-cols-\[1fr_auto_auto\]{grid-template-columns:1fr auto auto}.grid-cols-\[2\.25rem_minmax\(0\2c 1fr\)\]{grid-template-columns:2.25rem minmax(0,1fr)}.grid-cols-\[2\.5rem_minmax\(11rem\2c 1fr\)_4\.5rem_4\.5rem_4\.5rem_5rem_4\.5rem\]{grid-template-columns:2.5rem minmax(11rem,1fr) 4.5rem 4.5rem 4.5rem 5rem 4.5rem}.grid-cols-\[2rem_minmax\(0\2c 1fr\)\]{grid-template-columns:2rem minmax(0,1fr)}.grid-cols-\[2rem_minmax\(0\2c 1fr\)_3\.5rem\]{grid-template-columns:2rem minmax(0,1fr) 3.5rem}.grid-cols-\[2rem_minmax\(0\2c 1fr\)_auto\]{grid-template-columns:2rem minmax(0,1fr) auto}.grid-cols-\[minmax\(0\2c 1fr\)_7rem_minmax\(0\2c 1fr\)\]{grid-template-columns:minmax(0,1fr) 7rem minmax(0,1fr)}.grid-cols-\[minmax\(0\2c 1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.grid-cols-\[minmax\(0\2c 1fr\)_auto_minmax\(0\2c 1fr\)\]{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.grid-cols-\[repeat\(7\2c minmax\(0\2c 1fr\)\)\]{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-start{align-content:flex-start}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-7{gap:1.75rem}.gap-px{gap:1px}.gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-0\.5{row-gap:.125rem}.gap-y-1{row-gap:.25rem}.gap-y-1\.5{row-gap:.375rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.gap-y-4{row-gap:1rem}.gap-y-5{row-gap:1.25rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.125rem*var(--tw-space-y-reverse));margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.375rem*var(--tw-space-y-reverse));margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2.5rem*var(--tw-space-y-reverse));margin-top:calc(2.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.625rem*var(--tw-space-y-reverse));margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.25rem*var(--tw-space-y-reverse));margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-pitch-line>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(35 43 51/var(--tw-divide-opacity,1))}.divide-pitch-line\/40>:not([hidden])~:not([hidden]){border-color:rgba(35,43,51,.4)}.divide-pitch-line\/60>:not([hidden])~:not([hidden]){border-color:rgba(35,43,51,.6)}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.125rem}.rounded-2xl{border-radius:.5rem}.rounded-\[2px\]{border-radius:2px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.25rem}.rounded-md{border-radius:.1875rem}.rounded-sm{border-radius:.0625rem}.rounded-xl{border-radius:.375rem}.rounded-t-sm{border-top-left-radius:.0625rem;border-top-right-radius:.0625rem}.border{border-width:1px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-b-0{border-bottom-width:0}.border-l{border-left-width:1px}.border-l-0{border-left-width:0}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-t-0{border-top-width:0}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-gold{--tw-border-opacity:1;border-color:rgb(232 197 71/var(--tw-border-opacity,1))}.border-gold\/30{border-color:rgba(232,197,71,.3)}.border-gold\/40{border-color:rgba(232,197,71,.4)}.border-gold\/50{border-color:rgba(232,197,71,.5)}.border-live{--tw-border-opacity:1;border-color:rgb(255 77 77/var(--tw-border-opacity,1))}.border-live\/40{border-color:rgba(255,77,77,.4)}.border-pitch-line{--tw-border-opacity:1;border-color:rgb(35 43 51/var(--tw-border-opacity,1))}.border-pitch-line\/40{border-color:rgba(35,43,51,.4)}.border-pitch-line\/50{border-color:rgba(35,43,51,.5)}.border-pitch-line\/60{border-color:rgba(35,43,51,.6)}.border-pitch-line\/70{border-color:rgba(35,43,51,.7)}.border-transparent{border-color:transparent}.border-volt{--tw-border-opacity:1;border-color:rgb(201 247 58/var(--tw-border-opacity,1))}.border-volt\/35{border-color:rgba(201,247,58,.35)}.border-volt\/40{border-color:rgba(201,247,58,.4)}.border-volt\/50{border-color:rgba(201,247,58,.5)}.border-volt\/60{border-color:rgba(201,247,58,.6)}.border-volt\/70{border-color:rgba(201,247,58,.7)}.border-l-gold\/60{border-left-color:rgba(232,197,71,.6)}.border-l-live\/40{border-left-color:rgba(255,77,77,.4)}.border-l-live\/70{border-left-color:rgba(255,77,77,.7)}.border-l-pitch-line{--tw-border-opacity:1;border-left-color:rgb(35 43 51/var(--tw-border-opacity,1))}.border-l-transparent{border-left-color:transparent}.border-l-volt{--tw-border-opacity:1;border-left-color:rgb(201 247 58/var(--tw-border-opacity,1))}.border-l-volt\/50{border-left-color:rgba(201,247,58,.5)}.bg-down\/15{background-color:hsla(0,84%,69%,.15)}.bg-gold{--tw-bg-opacity:1;background-color:rgb(232 197 71/var(--tw-bg-opacity,1))}.bg-gold\/10{background-color:rgba(232,197,71,.1)}.bg-gold\/5{background-color:rgba(232,197,71,.05)}.bg-gold\/60{background-color:rgba(232,197,71,.6)}.bg-live{--tw-bg-opacity:1;background-color:rgb(255 77 77/var(--tw-bg-opacity,1))}.bg-live\/10{background-color:rgba(255,77,77,.1)}.bg-live\/15{background-color:rgba(255,77,77,.15)}.bg-live\/40{background-color:rgba(255,77,77,.4)}.bg-live\/5{background-color:rgba(255,77,77,.05)}.bg-live\/70{background-color:rgba(255,77,77,.7)}.bg-pitch-ground{--tw-bg-opacity:1;background-color:rgb(11 14 17/var(--tw-bg-opacity,1))}.bg-pitch-ground\/25{background-color:rgba(11,14,17,.25)}.bg-pitch-ground\/30{background-color:rgba(11,14,17,.3)}.bg-pitch-ground\/35{background-color:rgba(11,14,17,.35)}.bg-pitch-ground\/50{background-color:rgba(11,14,17,.5)}.bg-pitch-ground\/60{background-color:rgba(11,14,17,.6)}.bg-pitch-ground\/70{background-color:rgba(11,14,17,.7)}.bg-pitch-ground\/90{background-color:rgba(11,14,17,.9)}.bg-pitch-ground\/95{background-color:rgba(11,14,17,.95)}.bg-pitch-ink\/50{background-color:rgba(233,237,240,.5)}.bg-pitch-line{--tw-bg-opacity:1;background-color:rgb(35 43 51/var(--tw-bg-opacity,1))}.bg-pitch-line\/20{background-color:rgba(35,43,51,.2)}.bg-pitch-line\/30{background-color:rgba(35,43,51,.3)}.bg-pitch-line\/40{background-color:rgba(35,43,51,.4)}.bg-pitch-line\/50{background-color:rgba(35,43,51,.5)}.bg-pitch-line\/60{background-color:rgba(35,43,51,.6)}.bg-pitch-muted{--tw-bg-opacity:1;background-color:rgb(138 148 158/var(--tw-bg-opacity,1))}.bg-pitch-surface{--tw-bg-opacity:1;background-color:rgb(17 22 27/var(--tw-bg-opacity,1))}.bg-pitch-surface\/40{background-color:rgba(17,22,27,.4)}.bg-pitch-surface\/45{background-color:rgba(17,22,27,.45)}.bg-pitch-surface\/50{background-color:rgba(17,22,27,.5)}.bg-pitch-surface\/60{background-color:rgba(17,22,27,.6)}.bg-pitch-surface\/90{background-color:rgba(17,22,27,.9)}.bg-pitch-surface\/95{background-color:rgba(17,22,27,.95)}.bg-up\/15{background-color:rgba(62,207,142,.15)}.bg-volt{--tw-bg-opacity:1;background-color:rgb(201 247 58/var(--tw-bg-opacity,1))}.bg-volt\/10{background-color:rgba(201,247,58,.1)}.bg-volt\/15{background-color:rgba(201,247,58,.15)}.bg-volt\/20{background-color:rgba(201,247,58,.2)}.bg-volt\/30{background-color:rgba(201,247,58,.3)}.bg-volt\/40{background-color:rgba(201,247,58,.4)}.bg-volt\/5{background-color:rgba(201,247,58,.05)}.bg-volt\/50{background-color:rgba(201,247,58,.5)}.bg-volt\/80{background-color:rgba(201,247,58,.8)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-pitch-line\/30{--tw-gradient-from:rgba(35,43,51,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(35,43,51,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-pitch-line\/40{--tw-gradient-from:rgba(35,43,51,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(35,43,51,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-pitch-line\/10{--tw-gradient-to:rgba(35,43,51,.1) var(--tw-gradient-to-position)}.to-pitch-line\/5{--tw-gradient-to:rgba(35,43,51,.05) var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-14{padding-bottom:3.5rem;padding-top:3.5rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-3\.5{padding-bottom:.875rem;padding-top:.875rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-7{padding-bottom:1.75rem;padding-top:1.75rem}.py-8{padding-bottom:2rem;padding-top:2rem}.py-px{padding-bottom:1px;padding-top:1px}.pb-1{padding-bottom:.25rem}.pb-1\.5{padding-bottom:.375rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-7{padding-bottom:1.75rem}.pl-0{padding-left:0}.pl-1{padding-left:.25rem}.pl-1\.5{padding-left:.375rem}.pl-12{padding-left:3rem}.pl-14{padding-left:3.5rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pl-\[4\.75rem\]{padding-left:4.75rem}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-\[-1px\]{vertical-align:-1px}.align-\[-2px\]{vertical-align:-2px}.font-body{font-family:Figtree,sans-serif}.font-display{font-family:Barlow Condensed,sans-serif}.font-mono{font-family:JetBrains Mono,monospace}.font-sans{font-family:Figtree,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[18px\]{font-size:18px}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\[0\.95\]{line-height:.95}.leading-\[0\.9\]{line-height:.9}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.12em\]{letter-spacing:.12em}.tracking-\[0\.13em\]{letter-spacing:.13em}.tracking-\[0\.14em\]{letter-spacing:.14em}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.22em\]{letter-spacing:.22em}.tracking-\[0\.24em\]{letter-spacing:.24em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-\[0\.4em\]{letter-spacing:.4em}.tracking-normal{letter-spacing:0}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-down{--tw-text-opacity:1;color:rgb(242 109 109/var(--tw-text-opacity,1))}.text-gold{--tw-text-opacity:1;color:rgb(232 197 71/var(--tw-text-opacity,1))}.text-live{--tw-text-opacity:1;color:rgb(255 77 77/var(--tw-text-opacity,1))}.text-miss{--tw-text-opacity:1;color:rgb(208 112 95/var(--tw-text-opacity,1))}.text-pitch-ground{--tw-text-opacity:1;color:rgb(11 14 17/var(--tw-text-opacity,1))}.text-pitch-ink{--tw-text-opacity:1;color:rgb(233 237 240/var(--tw-text-opacity,1))}.text-pitch-ink\/70{color:rgba(233,237,240,.7)}.text-pitch-ink\/80{color:rgba(233,237,240,.8)}.text-pitch-ink\/90{color:rgba(233,237,240,.9)}.text-pitch-muted{--tw-text-opacity:1;color:rgb(138 148 158/var(--tw-text-opacity,1))}.text-pitch-muted\/40{color:hsla(210,9%,58%,.4)}.text-pitch-muted\/50{color:hsla(210,9%,58%,.5)}.text-pitch-muted\/60{color:hsla(210,9%,58%,.6)}.text-pitch-muted\/70{color:hsla(210,9%,58%,.7)}.text-pitch-muted\/80{color:hsla(210,9%,58%,.8)}.text-up{--tw-text-opacity:1;color:rgb(62 207 142/var(--tw-text-opacity,1))}.text-volt{--tw-text-opacity:1;color:rgb(201 247 58/var(--tw-text-opacity,1))}.text-volt\/70{color:rgba(201,247,58,.7)}.text-volt\/80{color:rgba(201,247,58,.8)}.underline{text-decoration-line:underline}.decoration-pitch-line{text-decoration-color:#232b33}.decoration-volt\/40{text-decoration-color:rgba(201,247,58,.4)}.decoration-dotted{text-decoration-style:dotted}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-\[\#C9F73A\],.accent-volt{accent-color:#c9f73a}.opacity-20{opacity:.2}.opacity-25{opacity:.25}.opacity-30{opacity:.3}.opacity-35{opacity:.35}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-black\/60{--tw-shadow-color:rgba(0,0,0,.6);--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-volt{--tw-ring-opacity:1;--tw-ring-color:rgb(201 247 58/var(--tw-ring-opacity,1))}.ring-volt\/70{--tw-ring-color:rgba(201,247,58,.7)}.blur-3xl{--tw-blur:blur(64px)}.blur-3xl,.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)}.backdrop-blur,.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-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\[appearance\:textfield\]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.\[scrollbar-width\:none\]{scrollbar-width:none}.marker\:content-none ::marker{--tw-content:none;content:var(--tw-content)}.marker\:content-none::marker{--tw-content:none;content:var(--tw-content)}.selection\:bg-volt\/30 ::-moz-selection{background-color:rgba(201,247,58,.3)}.selection\:bg-volt\/30 ::selection{background-color:rgba(201,247,58,.3)}.selection\:bg-volt\/30::-moz-selection{background-color:rgba(201,247,58,.3)}.selection\:bg-volt\/30::selection{background-color:rgba(201,247,58,.3)}.placeholder\:text-pitch-muted\/40::-moz-placeholder{color:hsla(210,9%,58%,.4)}.placeholder\:text-pitch-muted\/40::placeholder{color:hsla(210,9%,58%,.4)}.placeholder\:text-pitch-muted\/50::-moz-placeholder{color:hsla(210,9%,58%,.5)}.placeholder\:text-pitch-muted\/50::placeholder{color:hsla(210,9%,58%,.5)}.placeholder\:text-pitch-muted\/60::-moz-placeholder{color:hsla(210,9%,58%,.6)}.placeholder\:text-pitch-muted\/60::placeholder{color:hsla(210,9%,58%,.6)}.first\:mt-0:first-child{margin-top:0}.last\:border-0:last-child{border-width:0}.last\:border-b-0:last-child{border-bottom-width:0}.last\:pb-0:last-child{padding-bottom:0}.empty\:hidden:empty{display:none}.hover\:border-gold:hover{--tw-border-opacity:1;border-color:rgb(232 197 71/var(--tw-border-opacity,1))}.hover\:border-pitch-line:hover{--tw-border-opacity:1;border-color:rgb(35 43 51/var(--tw-border-opacity,1))}.hover\:border-pitch-muted:hover{--tw-border-opacity:1;border-color:rgb(138 148 158/var(--tw-border-opacity,1))}.hover\:border-volt:hover{--tw-border-opacity:1;border-color:rgb(201 247 58/var(--tw-border-opacity,1))}.hover\:border-volt\/40:hover{border-color:rgba(201,247,58,.4)}.hover\:border-volt\/50:hover{border-color:rgba(201,247,58,.5)}.hover\:border-volt\/60:hover{border-color:rgba(201,247,58,.6)}.hover\:bg-pitch-line:hover{--tw-bg-opacity:1;background-color:rgb(35 43 51/var(--tw-bg-opacity,1))}.hover\:bg-pitch-line\/20:hover{background-color:rgba(35,43,51,.2)}.hover\:bg-pitch-line\/30:hover{background-color:rgba(35,43,51,.3)}.hover\:bg-pitch-line\/40:hover{background-color:rgba(35,43,51,.4)}.hover\:bg-pitch-raised:hover{--tw-bg-opacity:1;background-color:rgb(22 28 34/var(--tw-bg-opacity,1))}.hover\:text-live:hover{--tw-text-opacity:1;color:rgb(255 77 77/var(--tw-text-opacity,1))}.hover\:text-pitch-ink:hover{--tw-text-opacity:1;color:rgb(233 237 240/var(--tw-text-opacity,1))}.hover\:text-volt:hover{--tw-text-opacity:1;color:rgb(201 247 58/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-volt:hover{text-decoration-color:#c9f73a}.hover\:opacity-100:hover{opacity:1}.hover\:brightness-110:hover{--tw-brightness:brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:not-sr-only:focus{height:auto;margin:0;overflow:visible;padding:0;position:static;width:auto;clip:auto;white-space:normal}.focus\:absolute:focus{position:absolute}.focus\:left-4:focus{left:1rem}.focus\:top-4:focus{top:1rem}.focus\:z-\[60\]:focus{z-index:60}.focus\:rounded-lg:focus{border-radius:.25rem}.focus\:border:focus{border-width:1px}.focus\:border-gold:focus{--tw-border-opacity:1;border-color:rgb(232 197 71/var(--tw-border-opacity,1))}.focus\:border-volt:focus{--tw-border-opacity:1;border-color:rgb(201 247 58/var(--tw-border-opacity,1))}.focus\:bg-pitch-surface:focus{--tw-bg-opacity:1;background-color:rgb(17 22 27/var(--tw-bg-opacity,1))}.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}.focus\:py-2:focus{padding-bottom:.5rem;padding-top:.5rem}.focus\:text-sm:focus{font-size:.875rem;line-height:1.25rem}.focus\:font-semibold:focus{font-weight:600}.focus\:text-pitch-ink:focus{--tw-text-opacity:1;color:rgb(233 237 240/var(--tw-text-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\:text-volt:focus-visible{--tw-text-opacity:1;color:rgb(201 247 58/var(--tw-text-opacity,1))}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-inset:focus-visible{--tw-ring-inset:inset}.focus-visible\:ring-volt:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(201 247 58/var(--tw-ring-opacity,1))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:cursor-wait:disabled{cursor:wait}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-70:disabled{opacity:.7}.group[open] .group-open\:inline{display:inline}.group[open] .group-open\:hidden{display:none}.group[open] .group-open\:rotate-180,.group\/more[open] .group-open\/more\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group[open] .group-open\:text-volt{--tw-text-opacity:1;color:rgb(201 247 58/var(--tw-text-opacity,1))}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-volt{--tw-text-opacity:1;color:rgb(201 247 58/var(--tw-text-opacity,1))}.peer[open]~.peer-open\:hidden{display:none}.has-\[\:checked\]\:border-volt:has(:checked){--tw-border-opacity:1;border-color:rgb(201 247 58/var(--tw-border-opacity,1))}.has-\[\:checked\]\:text-volt:has(:checked){--tw-text-opacity:1;color:rgb(201 247 58/var(--tw-text-opacity,1))}@supports ((-webkit-backdrop-filter:var(--tw )) or (backdrop-filter:var(--tw ))){.supports-\[backdrop-filter\]\:bg-pitch-ground\/80{background-color:rgba(11,14,17,.8)}}@media (max-width:360px){.max-\[360px\]\:w-12{width:3rem}}@media (min-width:640px){.sm\:absolute{position:absolute}.sm\:left-0{left:0}.sm\:right-auto{right:auto}.sm\:top-auto{top:auto}.sm\:col-span-1{grid-column:span 1/span 1}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:col-span-3{grid-column:span 3/span 3}.sm\:row-span-2{grid-row:span 2/span 2}.sm\:mx-0{margin-right:0}.sm\:ml-0,.sm\:mx-0{margin-left:0}.sm\:ml-auto{margin-left:auto}.sm\:mt-1{margin-top:.25rem}.sm\:mt-2{margin-top:.5rem}.sm\:block{display:block}.sm\:inline{display:inline}.sm\:flex{display:flex}.sm\:table-cell{display:table-cell}.sm\:grid{display:grid}.sm\:hidden{display:none}.sm\:aspect-\[16\/9\]{aspect-ratio:16/9}.sm\:aspect-\[2\/1\]{aspect-ratio:2/1}.sm\:h-10{height:2.5rem}.sm\:h-12{height:3rem}.sm\:h-14{height:3.5rem}.sm\:h-20{height:5rem}.sm\:h-28{height:7rem}.sm\:h-3\.5{height:.875rem}.sm\:h-80{height:20rem}.sm\:h-9{height:2.25rem}.sm\:h-full{height:100%}.sm\:max-h-\[70vh\]{max-height:70vh}.sm\:min-h-64{min-height:16rem}.sm\:w-1\/2{width:50%}.sm\:w-10{width:2.5rem}.sm\:w-12{width:3rem}.sm\:w-14{width:3.5rem}.sm\:w-20{width:5rem}.sm\:w-28{width:7rem}.sm\:w-3\.5{width:.875rem}.sm\:w-32{width:8rem}.sm\:w-56{width:14rem}.sm\:w-64{width:16rem}.sm\:w-9{width:2.25rem}.sm\:w-96{width:24rem}.sm\:w-auto{width:auto}.sm\:max-w-\[72px\]{max-width:72px}.sm\:max-w-\[88px\]{max-width:88px}.sm\:max-w-\[96px\]{max-width:96px}.sm\:snap-none{scroll-snap-type:none}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:grid-cols-\[1\.5rem_minmax\(0\2c 1fr\)_auto\]{grid-template-columns:1.5rem minmax(0,1fr) auto}.sm\:grid-cols-\[2\.5rem_minmax\(11rem\2c 1fr\)_4\.5rem_4\.5rem_4\.5rem_5rem_4\.5rem\]{grid-template-columns:2.5rem minmax(11rem,1fr) 4.5rem 4.5rem 4.5rem 5rem 4.5rem}.sm\:grid-cols-\[7rem_minmax\(0\2c 1fr\)_auto\]{grid-template-columns:7rem minmax(0,1fr) auto}.sm\:grid-cols-\[9rem_minmax\(0\2c 1fr\)\]{grid-template-columns:9rem minmax(0,1fr)}.sm\:grid-cols-\[minmax\(0\2c 1\.3fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)\]{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}.sm\:grid-cols-\[minmax\(0\2c 16rem\)_minmax\(0\2c 1fr\)\]{grid-template-columns:minmax(0,16rem) minmax(0,1fr)}.sm\:grid-cols-\[minmax\(0\2c 1fr\)_10rem_minmax\(0\2c 1fr\)\]{grid-template-columns:minmax(0,1fr) 10rem minmax(0,1fr)}.sm\:grid-cols-\[minmax\(0\2c 1fr\)_9rem_minmax\(0\2c 1fr\)\]{grid-template-columns:minmax(0,1fr) 9rem minmax(0,1fr)}.sm\:grid-cols-\[minmax\(0\2c 1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.sm\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(18rem\2c 23rem\)\]{grid-template-columns:minmax(0,1fr) minmax(18rem,23rem)}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:items-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:gap-1\.5{gap:.375rem}.sm\:gap-3{gap:.75rem}.sm\:gap-4{gap:1rem}.sm\:gap-5{gap:1.25rem}.sm\:space-y-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.75rem*var(--tw-space-y-reverse));margin-top:calc(1.75rem*(1 - var(--tw-space-y-reverse)))}.sm\:divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)));border-right-width:calc(1px*var(--tw-divide-x-reverse))}.sm\:divide-y-0>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(0px*var(--tw-divide-y-reverse));border-top-width:calc(0px*(1 - var(--tw-divide-y-reverse)))}.sm\:overflow-visible{overflow:visible}.sm\:truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sm\:rounded{border-radius:.125rem}.sm\:border{border-width:1px}.sm\:border-x{border-left-width:1px;border-right-width:1px}.sm\:border-y-0{border-top-width:0}.sm\:border-b-0,.sm\:border-y-0{border-bottom-width:0}.sm\:border-l{border-left-width:1px}.sm\:border-l-0{border-left-width:0}.sm\:border-r{border-right-width:1px}.sm\:border-t-0{border-top-width:0}.sm\:border-pitch-line{--tw-border-opacity:1;border-color:rgb(35 43 51/var(--tw-border-opacity,1))}.sm\:p-4{padding:1rem}.sm\:p-5{padding:1.25rem}.sm\:p-6{padding:1.5rem}.sm\:p-7{padding:1.75rem}.sm\:p-8{padding:2rem}.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-3{padding-left:.75rem;padding-right:.75rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-0{padding-bottom:0;padding-top:0}.sm\:py-10{padding-bottom:2.5rem;padding-top:2.5rem}.sm\:py-20{padding-bottom:5rem;padding-top:5rem}.sm\:py-3{padding-bottom:.75rem;padding-top:.75rem}.sm\:py-4{padding-bottom:1rem;padding-top:1rem}.sm\:py-8{padding-bottom:2rem;padding-top:2rem}.sm\:py-9{padding-bottom:2.25rem;padding-top:2.25rem}.sm\:pb-0{padding-bottom:0}.sm\:pl-0{padding-left:0}.sm\:pl-1{padding-left:.25rem}.sm\:pl-5{padding-left:1.25rem}.sm\:pl-6{padding-left:1.5rem}.sm\:pr-5{padding-right:1.25rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:text-7xl{font-size:4.5rem;line-height:1}.sm\:text-\[10px\]{font-size:10px}.sm\:text-\[11px\]{font-size:11px}.sm\:text-\[20px\]{font-size:20px}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}.sm\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:768px){.md\:mx-0{margin-left:0;margin-right:0}.md\:block{display:block}.md\:inline{display:inline}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-64{width:16rem}.md\:min-w-\[16rem\]{min-width:16rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr}.md\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(20rem\2c 0\.8fr\)\]{grid-template-columns:minmax(0,1fr) minmax(20rem,.8fr)}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:items-stretch{align-items:stretch}.md\:gap-5{gap:1.25rem}.md\:gap-6{gap:1.5rem}.md\:border-l{border-left-width:1px}.md\:border-t-0{border-top-width:0}.md\:px-0{padding-left:0;padding-right:0}.md\:pl-6{padding-left:1.5rem}.md\:pt-0{padding-top:0}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:top-\[calc\(var\(--header-h\)\+1\.5rem\)\]{top:calc(var(--header-h) + 1.5rem)}.lg\:top-\[calc\(var\(--header-h\)\+1rem\)\]{top:calc(var(--header-h) + 1rem)}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-start-1{grid-column-start:1}.lg\:col-start-2{grid-column-start:2}.lg\:row-span-3{grid-row:span 3/span 3}.lg\:row-start-1{grid-row-start:1}.lg\:ml-auto{margin-left:auto}.lg\:mt-0{margin-top:0}.lg\:flex{display:flex}.lg\:table-cell{display:table-cell}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:w-3\/5{width:60%}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-\[21rem_minmax\(0\2c 1fr\)\]{grid-template-columns:21rem minmax(0,1fr)}.lg\:grid-cols-\[minmax\(0\2c \.82fr\)_minmax\(0\2c 1\.18fr\)\]{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}.lg\:grid-cols-\[minmax\(0\2c 0\.9fr\)_minmax\(0\2c 1\.35fr\)\]{grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr)}.lg\:grid-cols-\[minmax\(0\2c 1\.15fr\)_minmax\(0\2c \.85fr\)\]{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.lg\:grid-cols-\[minmax\(0\2c 1\.45fr\)_minmax\(17rem\2c \.55fr\)\]{grid-template-columns:minmax(0,1.45fr) minmax(17rem,.55fr)}.lg\:grid-cols-\[minmax\(0\2c 1fr\)_20rem\]{grid-template-columns:minmax(0,1fr) 20rem}.lg\:grid-cols-\[minmax\(0\2c 1fr\)_auto\]{grid-template-columns:minmax(0,1fr) auto}.lg\:grid-cols-\[minmax\(0\2c 1fr\)_auto_auto\]{grid-template-columns:minmax(0,1fr) auto auto}.lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(18rem\2c \.42fr\)\]{grid-template-columns:minmax(0,1fr) minmax(18rem,.42fr)}.lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(18rem\2c \.55fr\)\]{grid-template-columns:minmax(0,1fr) minmax(18rem,.55fr)}.lg\:flex-col{flex-direction:column}.lg\:items-start{align-items:flex-start}.lg\:items-end{align-items:flex-end}.lg\:items-center{align-items:center}.lg\:gap-6{gap:1.5rem}.lg\:gap-8{gap:2rem}}@media (min-width:1280px){.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-\[minmax\(0\2c 1\.25fr\)_minmax\(20rem\2c \.75fr\)\]{grid-template-columns:minmax(0,1.25fr) minmax(20rem,.75fr)}}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button,.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none}
/* --- begin hand-written component layer (static/app.css) --- */
/* ==========================================================================
GolVolt design system — "Terminal"
A betting-terminal register: flat near-black ground, hairline borders,
sharp corners, dense rows, JetBrains Mono for every figure. Volt is the
SIGNAL color (actionable elements, key numerals) — decisive, not ambient.
Token/class NAMES are stable across design generations; templates and
tests hook into them, so edit VALUES here, never rename casually.
Reference and copy-paste examples: docs/DESIGN.md.
========================================================================== */
:root {
/* Sticky header height: h-14 inner row + 2px signal rule (base.html).
Sticky elements under the header (calendar day rail) use
top-[var(--header-h)] so the offset can never drift from the chrome. */
--header-h: 58px;
--ground: #0B0E11; /* page background (terminal near-black, neutral) */
--surface: #11161B; /* panels / raised chrome */
--line: #232B33; /* 1px hairlines, dividers */
--volt: #C9F73A; /* SIGNAL: live edges, CTAs, active tab, key numerals */
--gold: #E8C547; /* leaderboard medals / highlights ONLY */
--live: #FF4D4D; /* live & danger */
--ink: #E9EDF0; /* primary text */
--muted: #8A949E; /* secondary text */
--surface-2: #161C22; /* PANEL surface: the open ticket. One step above --surface. */
--miss: #D0705F; /* settled-negative (MISSED). NOT --live. */
--up: #3ECF8E; /* profit / price shortening */
--down: #F26D6D; /* loss / price drifting */
--shadow-1: 0 12px 32px -12px rgba(0, 0, 0, 0.65); /* the single shadow token (ticket) */
}
/* --------------------------------------------------------------------------
Ground: FLAT. A terminal does not glow; depth comes from hairlines and
raised panels, not gradients. One barely-there top sheen separates the
chrome zone from the scroll body.
-------------------------------------------------------------------------- */
body {
background-color: var(--ground);
background-image: linear-gradient(180deg, rgba(22, 28, 34, 0.55), rgba(22, 28, 34, 0) 14rem);
background-repeat: no-repeat;
}
/* Yard-line texture: fine vertical hairlines. Used on the chrome bands
(.club-weave), formation pitches and section bands (.pitch-lines) — the
terminal's graph-paper grid at ~3% ink. */
.pitch-lines {
background-image: repeating-linear-gradient(
90deg,
rgba(233, 237, 240, 0.03) 0 1px,
transparent 1px 12px
);
}
/* Ruler divider between major page sections: twin hairlines with tick marks. */
.section-divider {
height: 0.4375rem;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background-image: repeating-linear-gradient(
90deg,
rgba(233, 237, 240, 0.05) 0 1px,
transparent 1px 10px
);
}
/* Chrome band texture (header + footer): the same grid, one notch dimmer. */
.club-weave {
background-image: repeating-linear-gradient(
90deg,
rgba(233, 237, 240, 0.02) 0 1px,
transparent 1px 13px
);
}
/* Signal rule: the header's accent line as a TICKER TRACE — volt dashes with
a periodic brighter segment, faded at both gutters. Pure CSS, static. */
.scarf-rule {
height: 2px;
background-image: repeating-linear-gradient(
90deg,
var(--volt) 0 10px,
transparent 10px 18px,
rgba(201, 247, 58, 0.45) 18px 22px,
transparent 22px 36px
);
opacity: 0.55;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* --------------------------------------------------------------------------
Data numerals — JetBrains Mono, tabular by design. Every price, edge,
stake, return, P&L and countdown figure takes .num (or font-mono).
-------------------------------------------------------------------------- */
.num {
font-family: "JetBrains Mono", monospace;
font-feature-settings: "tnum" 1;
letter-spacing: -0.01em;
}
/* Terminal cursor — the brand underscore and "awaiting input" affordance. */
.cursor {
animation: cursor-blink 1.1s step-end infinite;
}
@keyframes cursor-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* --------------------------------------------------------------------------
Panels & cards — a panel is a labelled terminal section; .card stays the
generic raised surface. Sharp corners (4px), 1px hairline, no shadow.
-------------------------------------------------------------------------- */
.card {
background-color: var(--surface);
border: 1px solid var(--line);
border-radius: 0.25rem;
}
.panel {
background-color: var(--surface);
border: 1px solid var(--line);
border-radius: 0.25rem;
}
/* Labelled panel header strip: eyebrow label left, meta/actions right. */
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.4375rem 0.75rem;
border-bottom: 1px solid var(--line);
font-family: "JetBrains Mono", monospace;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.card-hover {
transition: border-color 150ms ease, background-color 150ms ease;
}
.card-hover:hover {
border-color: rgba(201, 247, 58, 0.35);
background-color: var(--surface-2);
}
/* Club odds card state. The data hook only exists in the club bettor board,
so the persistent accumulator highlight cannot leak into WC surfaces. */
[data-acca-fixture-card] {
transition: border-color 150ms ease, box-shadow 150ms ease;
}
[data-acca-fixture-card].is-acca-selected {
border-color: rgba(201, 247, 58, 0.58);
box-shadow: inset 3px 0 0 var(--volt);
}
[data-acca-fixture-card].is-acca-selected > details > summary {
background-color: rgba(201, 247, 58, 0.045);
}
[data-acca-add].is-acca-swap {
border-color: rgba(201, 247, 58, 0.48);
color: var(--volt);
}
.chip-btn.odds-filter-chip {
min-height: 2.75rem;
}
/* --------------------------------------------------------------------------
Badges — small uppercase data labels in mono. Base = muted outline.
-------------------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.1875rem 0.5rem;
border-radius: 0.125rem;
border: 1px solid var(--line);
background-color: rgba(35, 43, 51, 0.45);
color: var(--muted);
font-family: "JetBrains Mono", monospace;
font-size: 0.6875rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.badge-volt {
background-color: var(--volt);
border-color: var(--volt);
color: var(--ground);
}
.badge-gold {
background-color: rgba(232, 197, 71, 0.14);
border-color: rgba(232, 197, 71, 0.55);
color: var(--gold);
}
.badge-live {
background-color: rgba(255, 77, 77, 0.12);
border-color: rgba(255, 77, 77, 0.5);
color: var(--live);
}
/* Quiet volt outline — achievement chips inside list rows (e.g. the minutes
board's "Every minute") where the solid .badge-volt would shout. */
.badge-volt-outline {
background-color: rgba(201, 247, 58, 0.08);
border-color: rgba(201, 247, 58, 0.6);
color: var(--volt);
}
/* Neutral ink emphasis — identity chips (e.g. the social "Player" badge):
brighter than the muted base without claiming volt (live/active) or gold
(leaderboard medals ONLY). */
.badge-ink {
border-color: rgba(233, 237, 240, 0.28);
color: var(--ink);
}
/* Profit/loss tints for journal + position chips. */
.badge-up {
background-color: rgba(62, 207, 142, 0.1);
border-color: rgba(62, 207, 142, 0.5);
color: var(--up);
}
.badge-down {
background-color: rgba(242, 109, 109, 0.1);
border-color: rgba(242, 109, 109, 0.5);
color: var(--down);
}
/* Badge-shaped BUTTONS (filter chips): keeps the .badge look but expands
padding/height to a finger-sized hit area — the bare .badge computes to
~22px tall, under the 24px WCAG floor and far under the 44px platform
guidance, fine for passive labels but not for interactive controls. */
.chip-btn {
padding: 0.4375rem 0.75rem;
min-height: 2rem;
}
/* The club Scores workbench is a mobile-first command surface, not a passive
badge rail. Keep every filter/pill at the 44px platform touch target while
leaving the shared WC badge system byte-for-byte in its compact register. */
.club-scores .chip-btn {
min-height: 2.75rem;
}
/* Club competition names can include a round label. Let that identity chip
wrap on narrow match screens so the adjacent state badge is never clipped. */
.club-match-competition-chip {
max-width: 100%;
white-space: normal;
line-height: 1.25;
}
/* Angled group chip: skew the shell, un-skew the label. */
.chip-skew {
transform: skewX(-12deg);
border-radius: 0.125rem;
}
.chip-skew > * {
display: inline-block;
transform: skewX(12deg);
}
/* --------------------------------------------------------------------------
Buttons — mono uppercase labels; .btn-volt is the one decisive CTA.
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 0.1875rem;
border: 1px solid var(--line);
background-color: var(--surface);
color: var(--ink);
font-family: "JetBrains Mono", monospace;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.25;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.btn:hover {
border-color: rgba(201, 247, 58, 0.45);
color: var(--volt);
}
.btn:disabled {
opacity: 0.5;
pointer-events: none;
}
.btn-volt {
border-color: var(--volt);
background-color: var(--volt);
color: var(--ground);
font-weight: 700;
}
.btn-volt:hover {
border-color: var(--volt);
background-color: #d9ff5c;
color: var(--ground);
}
/* --------------------------------------------------------------------------
Tab rail — horizontal scrollable tabs with a sliding volt underline.
Also used for the sticky day rail on the calendar.
-------------------------------------------------------------------------- */
.tab-rail {
display: flex;
gap: 0.25rem;
overflow-x: auto;
border-bottom: 1px solid var(--line);
scrollbar-width: none;
/* Overflow affordance: the scrollbar is hidden, so a static right-edge
fade signals there are more tabs offscreen (no JS). When everything
fits it only dims the last 28px of the empty border line. */
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.tab-rail::-webkit-scrollbar {
display: none;
}
.tab-rail .tab {
position: relative;
flex: none;
padding: 0.5rem 0.75rem;
color: var(--muted);
font-family: "Barlow Condensed", sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
transition: color 150ms ease;
}
.tab-rail .tab::after {
content: "";
position: absolute;
left: 0.25rem;
right: 0.25rem;
bottom: -1px;
height: 2px;
background-color: var(--volt);
transform: scaleX(0);
transform-origin: left;
transition: transform 200ms ease;
}
.tab-rail .tab:hover {
color: var(--ink);
}
.tab-rail .tab:hover::after {
transform: scaleX(0.35);
}
.tab-rail .tab.active {
color: var(--volt);
}
.tab-rail .tab.active::after {
transform: scaleX(1);
}
/* A nested sub-toggle inside a tab body (the Insights Overview | Expected Goals
sub-pages, mirroring the Best XI best/flop toggle). It is NOT a full-width
page rail: smaller type, no bottom border line / edge fade, and it sits
inline so it reads as a control within the tab, not a second page-level
navigation. The active underline + colour come from .tab-rail .tab above. */
.tab-rail-sub {
border-bottom: 0;
-webkit-mask-image: none;
mask-image: none;
gap: 0.5rem;
}
.tab-rail-sub .tab {
padding: 0.35rem 0.1rem;
font-size: 0.875rem;
}
/* --------------------------------------------------------------------------
Matchday rail — a horizontal, scroll-snapping strip of gameweek chips that
is the calendar's RANDOM-ACCESS control. Doubles as a season-progress
glance: dimmed = played, the volt fill = the matchday on screen, a red dot
= live. Borrows .tab-rail's hidden-scrollbar + edge-fade affordance.
position:relative so a chip's offsetParent is the rail (the auto-centre
script in _league_calendar.html scrolls the active chip to centre).
-------------------------------------------------------------------------- */
.md-rail {
position: relative;
display: flex;
gap: 0.375rem;
overflow-x: auto;
padding: 0.125rem 0;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 24px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 24px), transparent);
}
.md-rail::-webkit-scrollbar {
display: none;
}
.md-chip {
scroll-snap-align: center;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
min-width: 2.375rem;
min-height: 2.375rem;
padding: 0 0.625rem;
border-radius: 0.1875rem;
border: 1px solid var(--line);
background-color: rgba(35, 43, 51, 0.4);
color: var(--muted);
font-family: "JetBrains Mono", monospace;
font-size: 0.8125rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, opacity 150ms ease;
}
.md-chip:hover {
border-color: rgba(201, 247, 58, 0.45);
color: var(--ink);
}
/* PLAYED — recede so the eye lands on what's live / up next. */
.md-chip.is-done {
opacity: 0.55;
}
.md-chip.is-done:hover {
opacity: 1;
}
/* LIVE — red ring + dot while a gameweek is in play. */
.md-chip.is-live {
border-color: rgba(255, 77, 77, 0.6);
color: var(--live);
}
.md-chip .md-dot {
width: 0.4rem;
height: 0.4rem;
border-radius: 9999px;
background-color: var(--live);
}
/* ON SCREEN — the one decisive volt fill (matches .badge-volt); wins even when
the focused matchday is also live (the red dot stays for the live cue). */
.md-chip.is-active {
background-color: var(--volt);
border-color: var(--volt);
color: var(--ground);
opacity: 1;
}
.md-chip.is-active .md-dot {
background-color: var(--ground);
}
/* --------------------------------------------------------------------------
Modal — hx-get a fragment into #modal-root:
base.html closes it on ESC / backdrop / [data-modal-close] clicks.
-------------------------------------------------------------------------- */
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: rgba(4, 6, 8, 0.75);
backdrop-filter: blur(4px);
}
/* Body scroll lock — base.html toggles .modal-open on while any modal
is open (it stays set across the nested player<->match swaps and clears
only when #modal-root empties). Freezes the page behind the modal so
wheel/touch scrolling does not bleed through to the document underneath and
the (now tall, scrollable) .modal-shell owns the scroll. */
html.modal-open,
html.modal-open body {
overflow: hidden;
}
.modal-shell {
width: 100%;
max-width: 32rem;
max-height: calc(100vh - 2rem);
overflow-y: auto;
background-color: var(--surface);
border: 1px solid var(--line);
border-radius: 0.375rem;
box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.8);
animation: modal-in 150ms ease-out;
}
/* Wide variant for content-heavy modals (match center). */
.modal-shell-lg {
max-width: 42rem;
}
/* Full variant for the unified match modal: wide enough for the main/rail
2-column body on desktop, tall + scrollable (the shell itself scrolls). */
.modal-shell-full {
max-width: 64rem;
}
/* Compact peek's sticky scoreboard: a slim crest — score/status — crest bar
pinned to the top of the scrolling .modal-shell so the fixture identity
never leaves view. The template positions it with `sticky -top-5` (pulling
flush past the shell's p-5 padding) + a translucent blurred surface; this
rule only guarantees it sits ABOVE the body content and degrades gracefully
where backdrop-filter is unsupported (opaque-ish surface from the utility).
Pure CSS — reuses the existing modal JS, adds none. */
.modal-scorebar {
/* The utility classes carry layout; keep a hard isolation so the sticky bar
forms its own stacking context over the scrolling body below it. */
isolation: isolate;
}
@keyframes modal-in {
from {
opacity: 0;
transform: scale(0.98) translateY(4px);
}
to {
opacity: 1;
transform: none;
}
}
/* --------------------------------------------------------------------------
Skeleton shimmer — put .skel on placeholder blocks while HTMX loads.
-------------------------------------------------------------------------- */
.skel {
border-radius: 0.125rem;
color: transparent !important;
background: linear-gradient(100deg, #11161B 40%, #1C242C 50%, #11161B 60%);
background-size: 200% 100%;
animation: skel-slide 1.4s linear infinite;
pointer-events: none;
user-select: none;
}
@keyframes skel-slide {
to {
background-position: -200% 0;
}
}
/* --------------------------------------------------------------------------
Live indicators
-------------------------------------------------------------------------- */
.live-dot {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
background-color: var(--live);
animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55);
}
70% {
box-shadow: 0 0 0 6px rgba(255, 77, 77, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 77, 77, 0);
}
}
/* Score-change flash: a subtle, on-brand volt-tint pulse applied to a live
SCORE element for ~600ms when its value changes on a live swap. The
.score-flash class is a STATIC hook the score lives under; the animation is
added/removed by the global handler in base.html only when the value
actually changed (plain innerHTML swaps AND idiomorph morph). Gated OFF
under prefers-reduced-motion below so a score still updates, just without
motion. */
.score-flash.is-flashing {
animation: score-flash 0.6s ease-out;
}
@keyframes score-flash {
0% {
color: var(--volt);
text-shadow: 0 0 10px rgba(201, 247, 58, 0.55);
}
60% {
text-shadow: 0 0 6px rgba(201, 247, 58, 0.25);
}
100% {
text-shadow: 0 0 0 rgba(201, 247, 58, 0);
}
}
/* Soft volt pulse for live cards / scores. */
.pulse-volt {
animation: volt-pulse 2.4s ease-in-out infinite;
}
@keyframes volt-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(201, 247, 58, 0);
}
50% {
box-shadow: 0 0 20px -2px rgba(201, 247, 58, 0.3);
}
}
/* --------------------------------------------------------------------------
Staggered load-in — put .stagger on a list container; children rise+fade
once per page load, 40ms apart. The ONLY page-load animation allowed.
-------------------------------------------------------------------------- */
.stagger > * {
opacity: 0;
animation: rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: none;
}
}
.stagger > :nth-child(1) { animation-delay: 0ms; }
.stagger > :nth-child(2) { animation-delay: 40ms; }
.stagger > :nth-child(3) { animation-delay: 80ms; }
.stagger > :nth-child(4) { animation-delay: 120ms; }
.stagger > :nth-child(5) { animation-delay: 160ms; }
.stagger > :nth-child(6) { animation-delay: 200ms; }
.stagger > :nth-child(7) { animation-delay: 240ms; }
.stagger > :nth-child(8) { animation-delay: 280ms; }
.stagger > :nth-child(9) { animation-delay: 320ms; }
.stagger > :nth-child(10) { animation-delay: 360ms; }
.stagger > :nth-child(11) { animation-delay: 400ms; }
.stagger > :nth-child(12) { animation-delay: 440ms; }
.stagger > :nth-child(n + 13) { animation-delay: 480ms; }
/* --------------------------------------------------------------------------
Header nav links (base chrome) — sliding volt underline.
-------------------------------------------------------------------------- */
.nav-link {
position: relative;
padding-bottom: 0.125rem;
transition: color 150ms ease;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.25rem;
height: 2px;
background-color: var(--volt);
transform: scaleX(0);
transform-origin: left;
transition: transform 200ms ease;
}
.nav-link:hover {
color: var(--ink);
}
.nav-link.active {
color: var(--volt);
}
.nav-link.active::after {
transform: scaleX(1);
}
/* --------------------------------------------------------------------------
Match ROW + TICKET — the club match-card system (GolVolt 2.0 §1.3/§2).
Rows are borderless, on the GROUND, inside a divide-y group; the TICKET is
the one PANEL a row opens into (border allowed — it is open).
-------------------------------------------------------------------------- */
/* Match ROW — borderless, on the GROUND. Rows live inside a divide-y group. */
.mrow { display: grid; grid-template-columns: 3.25rem minmax(0,1fr) auto; column-gap: .75rem;
align-items: center; min-height: 3rem; padding: .375rem .75rem; }
.mrow:hover { background-color: rgba(35, 43, 51, 0.35); }
.mrow-live { box-shadow: inset 2px 0 0 var(--volt); } /* the list-level live marker */
/* The star stays visually compact in the score register while its hit area
reaches 44px on touch screens. The 6px gap between team rows keeps the two
expanded targets adjacent without overlap. */
.score-follow-hit { position: relative; touch-action: manipulation; }
.score-follow-hit::after { content: ""; position: absolute; inset: -.1875rem; }
/* TICKET — the one PANEL a row opens into. Border allowed (it is open). */
.ticket { background-color: var(--surface-2); border: 1px solid var(--line);
border-radius: .25rem; box-shadow: var(--shadow-1); }
.ticket-section { border-top: 1px solid var(--line); } /* hairline sections inside */
/* Move #1 of the motion budget. */
.ticket-in { animation: ticket-in 160ms ease-out; }
@keyframes ticket-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
/* --------------------------------------------------------------------------
LIVE match centre — the de-boxed GROUND (live surfaces spec §2).
The CLUB live/post fragment root carries .live-ground; every non-openable
.card inside flattens to a hairline-topped section on the pitch (border
law: borders are for things you can open). The commentary .card
is openable and keeps its box — hence div/section scoping, never a bare
.card. WC never emits .live-ground, so these rules cannot touch the World
Cup surfaces (parity by construction: same section markup, one root class).
-------------------------------------------------------------------------- */
.live-ground div.card,
.live-ground section.card {
background-color: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
/* The first section opens clean — the hero above already closes the zone;
every following section draws its own hairline top. */
.live-ground > div.card:first-child,
.live-ground > section.card:first-child {
border-top: 0;
}
/* Flattened-card interiors that carried the box's horizontal padding align
flush with the GROUND: the pitch's "Starting XIs" header row becomes the
plain section-label row over a hairline, and the "Came on" strip keeps its
hairline top only. */
.live-ground div.card > .border-b,
.live-ground div.card > [data-testid="came-on-strip"] {
padding-left: 0;
padding-right: 0;
}
/* The bench fold (openable — its chrome is legal) aligns its
summary row and columns flush with the flattened GROUND sections too. */
.live-ground div.card > details[data-testid="bench-fold"] > summary,
.live-ground div.card > details[data-testid="bench-fold"] > .bench-cols {
padding-left: 0;
padding-right: 0;
}
/* --------------------------------------------------------------------------
CLUB broadcast pitch (live-3.0 §1). ONE DOM node per player: the spot's
inline style carries the landscape percent coordinates as CSS vars
(--x/--y) plus the portrait projection (--xr = 100 - x). Below sm the
pitch turns PORTRAIT (home defends the bottom): a rigid 90° rotation of
the same geometry — left <- y, top <- 100 - x, one formula for BOTH teams
(the away side's landscape mirroring carries through, so the shapes stay
faced-off). The same node re-projects across the breakpoint; nothing
churns, so the live poll's idiomorph identity holds. WC never emits
.pitch-club — these rules cannot touch the World Cup pitch (parity by
construction). */
.pitch-club .pitch-spot {
left: var(--y);
top: var(--xr);
}
@media (min-width: 640px) {
.pitch-club .pitch-spot {
left: var(--x);
top: var(--y);
}
}
/* --------------------------------------------------------------------------
Reduced motion: everything snaps into place, nothing pulses.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.stagger > *,
.modal-shell,
.live-dot,
.pulse-volt,
.score-flash.is-flashing,
.ticket-in,
.skel,
.cursor {
animation: none !important;
}
.stagger > * {
opacity: 1;
}
.tab-rail .tab::after,
.nav-link::after,
.card-hover,
.btn {
transition: none;
}
}
/* --------------------------------------------------------------------------
Best XI / Flop XI pitch: the national-team (crest + code) chip under a
player. Width-capped to the slot label so a long crest+code never widens a
pitch column and shoves the formation out of shape; the crest image keeps
its intrinsic ratio, the code truncates.
-------------------------------------------------------------------------- */
.xi-nation,
.xi-games {
max-width: 72px;
}
@media (min-width: 640px) {
.xi-nation,
.xi-games {
max-width: 96px;
}
}
/* --------------------------------------------------------------------------
Insights tab — grouped chart sections (/leaders?tab=insights).
The cards are organised into titled bands (Goals · Expected goals ·
Advanced leaders · Tournament shape); each band owns a 1-col-mobile /
2-col-desktop grid. The hard requirement here is that NO chart overflows
or clips: every SVG is pinned to the card width and scales to fit.
-------------------------------------------------------------------------- */
/* A card is a flex column so its chart/footnote stack cleanly; min-width:0
lets it shrink inside the grid track (without it a wide SVG would force the
column — and the page — to scroll horizontally). */
.insights-card {
min-width: 0;
}
/* The chart wrapper never adds its own width; it just clips overflow as a
belt-and-braces guard behind the SVG's own width:100%. */
.insights-chart {
width: 100%;
max-width: 100%;
overflow: hidden;
}
/* --------------------------------------------------------------------------
Tournament tab — the curated DB-only stat-card grid (/leaders?tab=tournament).
A stat tile is a flex column (title / hero value / sub-label) like the
insights card, with min-width:0 so it shrinks inside its grid track and a
long pre-formatted value (e.g. "3 · 1 · 2") truncates instead of forcing the
row — and the page — to scroll sideways at 375px. The grid itself is the
Tailwind utility classes on the container; this just guards the tile.
-------------------------------------------------------------------------- */
.stat-tile {
min-width: 0;
}
/* The grid track must be allowed to shrink below its content's intrinsic width
(CSS grid items default to min-width:auto), or a wide tabular value would
blow the 1fr track out and overflow the viewport on a narrow phone. */
.stat-grid {
min-width: 0;
}
.stat-grid > * {
min-width: 0;
}
/* The load-bearing overflow fix: force EVERY inline SVG to the wrapper width
and let height follow the aspect ratio. block removes the inline-baseline
gap; max-width:100% guarantees a chart whose intrinsic viewBox is wider than
the card scales DOWN to fit rather than spilling out or being clipped. This
holds on mobile (≈309px card interior) and desktop alike. */
.insights-chart svg {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
/* --------------------------------------------------------------------------
Folded matchdays — collapsible past-result days on the Predictor league
page (native /, zero-JS). The OPEN groups (today +
future + the most-recent finished day) render expanded as before; OLDER
finished days fold into these blocks so past results
stop piling up. Lock/reveal/scoring and the predict form inside an
expanded fold are untouched — this is presentation only.
-------------------------------------------------------------------------- */
/* Hide the platform disclosure triangle (the chevron SVG carries the affordance).
Tailwind's marker:content-none covers the standard ::marker; this catches the
WebKit/Safari ::-webkit-details-marker too. */
details[data-fold] > summary::-webkit-details-marker {
display: none;
}
/* Chevron points right when collapsed, rotates down when the day is open. */
details[data-fold][open] > summary [data-fold-chevron] {
transform: rotate(90deg);
}
/* --------------------------------------------------------------------------
Sticky matchday header — the /highlights page groups finished fixtures by
day (newest first), mirroring the calendar's day rail. Each day's heading
sticks under the chrome as you scroll its matches, so the day separation
stays clear on long pages. top: var(--header-h) keeps it flush with the
sticky site header; the translucent ground + blur lets cards scroll under
it without a hard edge. Mobile-safe: it spans the page gutter (-mx-4 in the
template) so the blur reaches the viewport edge.
-------------------------------------------------------------------------- */
.day-sticky {
position: sticky;
top: var(--header-h);
z-index: 30;
background-color: rgba(11, 14, 17, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
/* --------------------------------------------------------------------------
Bracket slot PROJECTION — an unresolved knockout slot ("2nd Group A", a
best-third pool slot) shows the team CURRENTLY occupying that standings
position. While the position can still move it is PROVISIONAL: rendered
translucent + italic (the design system's "provisional state" cue) so it
reads as a forecast, not a confirmed qualifier. Once the group is
mathematically decided the .bracket-proj class is dropped and the slot
renders solid (full opacity, upright) — identical weight to a real team.
-------------------------------------------------------------------------- */
.bracket-proj {
opacity: 0.55;
font-style: italic;
transition: opacity 0.15s ease;
}
.bracket-proj img {
filter: grayscale(0.35);
transition: filter 0.15s ease;
}
/* Hover restores full opacity (and a crisp crest) so a truncated provisional
name reads clearly in the narrow column — the house muted-content pattern
(unverified social cards restore opacity on hover). The class sits on an
inner span, not the tie's , so it does not fight the card-hover tint. */
.bracket-proj:hover {
opacity: 1;
}
.bracket-proj:hover img {
filter: none;
}
/* The compact position badge on a projected slot ("A2", "3rd #4"): a quiet
neutral chip, smaller than the base .badge so it rides inside a tie row
without crowding the team name. */
.badge-proj {
padding: 0.0625rem 0.3125rem;
font-size: 0.625rem;
letter-spacing: 0.04em;
color: var(--muted);
border-color: rgba(138, 148, 158, 0.4);
background-color: rgba(35, 43, 51, 0.4);
font-style: normal;
}
/* The "proj." affordance tag — a dotted-border hint that this slot is a
projection, not a settled result. Distinct from the solid badge so the
forecast nature is legible even at the reduced opacity. */
.badge-proj-tag {
padding: 0.0625rem 0.3125rem;
font-size: 0.5625rem;
letter-spacing: 0.04em;
color: var(--muted);
border: 1px dotted rgba(138, 148, 158, 0.55);
background-color: transparent;
font-style: normal;
}
/* --------------------------------------------------------------------------
Club Match Centre 4.0 - one compact, sticky score identity plus a
phase-aware section rail. The WC archive and compact modal never mount the
.match-centre root, so these rules are club-page scoped by construction.
-------------------------------------------------------------------------- */
.match-centre {
min-width: 0;
}
.match-centre [hidden] {
display: none !important;
}
/* Server-selected phase tabs work before the enhancement script runs and
remain useful with JavaScript disabled. Once JS marks the root ready it
owns the native hidden attributes instead. */
.match-centre:not([data-match-tabs-ready="true"]) [data-match-area] {
display: none;
}
.match-centre[data-active-tab="preview"]:not([data-match-tabs-ready="true"]) [data-match-area~="preview"],
.match-centre[data-active-tab="odds"]:not([data-match-tabs-ready="true"]) [data-match-area~="odds"],
.match-centre[data-active-tab="lineups"]:not([data-match-tabs-ready="true"]) [data-match-area~="lineups"],
.match-centre[data-active-tab="h2h"]:not([data-match-tabs-ready="true"]) [data-match-area~="h2h"],
.match-centre[data-active-tab="info"]:not([data-match-tabs-ready="true"]) [data-match-area~="info"],
.match-centre[data-active-tab="live"]:not([data-match-tabs-ready="true"]) [data-match-area~="live"],
.match-centre[data-active-tab="timeline"]:not([data-match-tabs-ready="true"]) [data-match-area~="timeline"],
.match-centre[data-active-tab="stats"]:not([data-match-tabs-ready="true"]) [data-match-area~="stats"],
.match-centre[data-active-tab="summary"]:not([data-match-tabs-ready="true"]) [data-match-area~="summary"],
.match-centre[data-active-tab="players"]:not([data-match-tabs-ready="true"]) [data-match-area~="players"] {
display: revert;
}
/* The live poller remains the one HTMX owner, but neither of its transport
wrappers should form a sticky containing block around the score chrome. */
.match-live-owner,
.match-live-page-root {
display: contents;
}
.match-centre-chrome {
position: sticky;
top: var(--header-h);
z-index: 40;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 0.25rem;
background: rgba(17, 22, 27, 0.97);
box-shadow: 0 12px 28px -20px rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.match-context-row {
display: flex;
min-height: 2rem;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.4rem 0.75rem;
border: 1px solid var(--line);
border-radius: 0.25rem;
background-color: var(--surface);
color: var(--muted);
font-family: "JetBrains Mono", monospace;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.match-score-shell .match-context-row {
border-width: 0 0 1px;
border-radius: 0;
}
.match-context-link {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 0.4rem;
color: var(--ink);
transition: color 0.15s ease;
}
.match-context-link:hover,
.match-context-link:focus-visible {
color: var(--volt);
}
.match-context-separator {
color: var(--line);
}
.match-score-shell {
background-color: var(--surface);
}
.match-score-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 1rem;
min-height: 5.25rem;
padding: 0.65rem 1rem;
}
.match-score-team {
display: flex;
min-width: 0;
align-items: center;
gap: 0.75rem;
}
.match-score-team-home {
justify-content: flex-end;
text-align: right;
}
.match-score-team-away {
justify-content: flex-start;
text-align: left;
}
.match-score-crest {
width: 2.75rem;
height: 2.75rem;
flex: 0 0 auto;
object-fit: contain;
}
.match-score-side {
display: block;
color: var(--muted);
font-family: "JetBrains Mono", monospace;
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.match-score-name {
display: block;
overflow: hidden;
color: var(--ink);
font-family: "Barlow Condensed", sans-serif;
font-size: clamp(1rem, 2.2vw, 1.55rem);
font-weight: 700;
line-height: 1.05;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
transition: color 0.15s ease;
}
.match-score-centre {
display: flex;
min-width: 5.5rem;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.match-score-value {
font-family: "JetBrains Mono", monospace;
font-size: clamp(1.7rem, 4vw, 2.4rem);
font-weight: 700;
letter-spacing: -0.06em;
line-height: 1;
}
.match-score-status {
margin-top: 0.25rem;
color: var(--muted);
font-family: "JetBrains Mono", monospace;
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.match-live-status,
.match-score-breakdown {
display: flex;
min-height: 1.9rem;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.35rem 0.75rem;
border-bottom: 1px solid var(--line);
color: var(--live);
font-family: "JetBrains Mono", monospace;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.match-score-breakdown {
justify-content: center;
border-top: 1px solid var(--line);
border-bottom: 0;
color: var(--muted);
}
.match-score-breakdown span + span {
padding-left: 1rem;
border-left: 1px solid var(--line);
}
.match-section-nav {
display: flex;
overflow-x: auto;
border-top: 1px solid var(--line);
background-color: rgba(11, 14, 17, 0.94);
scrollbar-width: none;
}
.match-section-nav::-webkit-scrollbar {
display: none;
}
.match-section-tab {
position: relative;
display: inline-flex;
min-height: 2.75rem;
flex: 1 0 auto;
align-items: center;
justify-content: center;
padding: 0.55rem 1rem;
color: var(--muted);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
transition: color 0.15s ease, background-color 0.15s ease;
}
.match-section-tab::after {
position: absolute;
right: 0.75rem;
bottom: 0;
left: 0.75rem;
height: 2px;
background-color: transparent;
content: "";
}
.match-section-tab:hover,
.match-section-tab:focus-visible {
color: var(--ink);
background-color: rgba(35, 43, 51, 0.4);
}
.match-section-tab[aria-current="page"] {
color: var(--volt);
}
.match-section-tab[aria-current="page"]::after {
background-color: var(--volt);
}
.match-score-story,
.match-thesis,
.match-info-summary,
.match-personal-ready {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background-color: rgba(17, 22, 27, 0.46);
padding: 1rem;
}
.match-thesis-head,
.match-personal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.match-thesis-phase,
.match-personal-label {
flex: 0 0 auto;
color: var(--muted);
font-family: "JetBrains Mono", monospace;
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.match-thesis-rows {
margin-top: 0.8rem;
}
.match-thesis-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: start;
padding: 0.75rem 0;
border-top: 1px solid var(--line);
}
.match-thesis-verdict {
display: flex;
min-width: 6.5rem;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
text-align: right;
}
.match-thesis-status {
font-family: "JetBrains Mono", monospace;
font-size: 0.6875rem;
text-transform: uppercase;
}
.match-thesis-status-positive { color: var(--volt); }
.match-thesis-status-neutral { color: var(--muted); }
.match-thesis-status-caution { color: var(--gold); }
.match-thesis-status-negative { color: var(--miss); }
.match-thesis-trust {
padding-top: 0.65rem;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.625rem;
}
.match-action-row,
.match-personal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1rem;
border: 1px solid var(--line);
border-radius: 0.25rem;
background-color: var(--surface);
}
.match-personal-section {
margin-top: 1rem;
padding-top: 0.8rem;
border-top: 1px solid var(--line);
}
.match-personal-room-list,
.match-owned-players {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
margin-top: 0.6rem;
}
.match-personal-room,
.match-owned-player {
display: flex;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem;
border: 1px solid var(--line);
border-radius: 0.25rem;
background-color: var(--surface);
}
.match-friend-read {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.25rem 0.55rem;
color: var(--muted);
font-size: 0.625rem;
text-align: right;
}
.match-draft-room + .match-draft-room {
margin-top: 0.8rem;
}
.match-owned-player {
justify-content: flex-start;
transition: border-color 0.15s ease;
}
.match-owned-player:hover,
.match-owned-player:focus-visible {
border-color: rgba(201, 247, 58, 0.6);
}
.match-empty-state {
padding: 1.15rem 1rem;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.match-empty-state h2 {
color: var(--ink);
font-family: "Barlow Condensed", sans-serif;
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
}
.match-empty-state p {
margin-top: 0.25rem;
color: var(--muted);
font-size: 0.75rem;
}
.match-info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem 1.25rem;
margin-top: 0.9rem;
}
.match-info-grid dt {
color: var(--muted);
font-family: "JetBrains Mono", monospace;
font-size: 0.5625rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.match-info-grid dd {
margin-top: 0.15rem;
color: var(--ink);
font-size: 0.8rem;
}
@media (max-width: 639px) {
.match-centre-chrome {
margin-right: -0.25rem;
margin-left: -0.25rem;
}
.match-context-row {
min-height: 1.75rem;
padding: 0.3rem 0.55rem;
font-size: 0.5625rem;
}
.match-score-grid {
min-height: 4.25rem;
gap: 0.35rem;
padding: 0.45rem 0.55rem;
}
.match-score-team {
gap: 0.35rem;
}
.match-score-crest {
width: 1.9rem;
height: 1.9rem;
}
.match-score-side {
display: none;
}
.match-score-name {
font-size: 0.82rem;
}
.match-score-centre {
min-width: 3.8rem;
}
.match-score-value {
font-size: 1.45rem;
}
.match-section-tab {
min-height: 2.6rem;
padding: 0.5rem 0.8rem;
font-size: 0.6875rem;
}
.match-thesis-head,
.match-personal-head,
.match-action-row,
.match-personal {
align-items: stretch;
flex-direction: column;
}
.match-thesis-phase {
align-self: flex-start;
}
.match-thesis-row {
grid-template-columns: minmax(0, 1fr) 5.75rem;
gap: 0.65rem;
}
.match-thesis-verdict {
min-width: 0;
}
.match-personal-room-list,
.match-owned-players,
.match-info-grid {
grid-template-columns: minmax(0, 1fr);
}
.match-personal-room {
align-items: flex-start;
flex-direction: column;
}
.match-friend-read {
justify-content: flex-start;
text-align: left;
}
}
@media (prefers-reduced-transparency: reduce) {
.match-centre-chrome {
background-color: var(--surface);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}