:root { --border-width-default: 1px; --border-width-input: 2px; --border-width-input-overlay-unfocused: 1px; --border-width-marked: 3px; --border-width-spinner: 2px; --border-width-tag: 2px; --border-radius-none: 0; --border-radius-small: 0.2rem; --border-radius-medium: 0.4rem; --border-radius-large: 0.6rem; --border-radius-extra-large: 1rem; --border-radius-extra-extra-large: 1.6rem; --border-radius-rounded: 9000px; --break-xs: 480px; --break-sm: 768px; --break-md: 1024px; --break-lg: 1200px; --break-xl: 1440px; --break-xxl: 1600px; --color-brand-muted-ice: #d6e4ff; --color-brand-muted-cupcake: #ffa3ee; --color-brand-muted-mint: #5cffbe; --color-brand-muted-sky: #7aa7ff; --color-brand-muted-blush: #ffcdcc; --color-brand-muted-canary: #ebeb00; --color-brand-muted-smoke: #d3d3d9; --color-brand-muted-lavender: #d1b3ff; --color-brand-muted-mustard: #ffd37a; --color-brand-muted-emerald: #00f593; --color-brand-muted-coral: #ff8280; --color-brand-muted-ocean: #1345aa; --color-brand-accent-grape: #5c16c5; --color-brand-accent-dragonfruit: #ff38db; --color-brand-accent-carrot: #e69900; --color-brand-accent-sun: #ebeb00; --color-brand-accent-lime: #00f593; --color-brand-accent-turquoise: #00f0f0; --color-brand-accent-eggplant: #451093; --color-brand-accent-wine: #ae1392; --color-brand-accent-slime: #00f593; --color-brand-accent-seafoam: #5cffbe; --color-brand-accent-cherry: #eb0400; --color-brand-accent-marine: #1f69ff; --color-brand-accent-seaweed: #00a3a3; --color-brand-accent-pebble: #848494; --color-brand-accent-moon: #efeff1; --color-brand-accent-fiji: #5cffbe; --color-brand-accent-blueberry: #1f69ff; --color-brand-accent-arctic: #00f0f0; --color-brand-accent-highlighter: #f5f500; --color-brand-accent-flamingo: #ff38db; --color-brand-accent-ruby: #eb0400; --color-brand-accent-punch: #ffcdcc; --color-brand-accent-creamsicle: #ffd37a; --color-white: #fff; --color-black: #000; --color-red: #e91916; --color-red-darker: #bb1411; --color-orange: #ffd37a; --color-yellow: #ffd37a; --color-green: #00f593; --color-green-darker: #00ad96; --color-blue: #1f69ff; --color-prime-blue: #0e9bd8; --color-magenta: #c53dff; --color-error: #eb0400; --color-warn: #ffd37a; --color-success: #00f593; --color-info: #1f69ff; --color-accent: #9147ff; --color-twitch-purple: #9147ff; --color-twitch-purple-1: #040109; --color-twitch-purple-2: #0d031c; --color-twitch-purple-3: #15052e; --color-twitch-purple-4: #24094e; --color-twitch-purple-5: #330c6e; --color-twitch-purple-6: #451093; --color-twitch-purple-7: #5c16c5; --color-twitch-purple-8: #772ce8; --color-twitch-purple-9: #9147ff; --color-twitch-purple-10: #a970ff; --color-twitch-purple-11: #bf94ff; --color-twitch-purple-12: #d1b3ff; --color-twitch-purple-13: #e3d1ff; --color-twitch-purple-14: #ede0ff; --color-twitch-purple-15: #f3ebff; --color-hinted-grey-1: #0e0e10; --color-hinted-grey-2: #18181b; --color-hinted-grey-3: #1f1f23; --color-hinted-grey-4: #26262c; --color-hinted-grey-5: #323239; --color-hinted-grey-6: #3b3b44; --color-hinted-grey-7: #53535f; --color-hinted-grey-8: #848494; --color-hinted-grey-9: #adadb8; --color-hinted-grey-10: #c8c8d0; --color-hinted-grey-11: #d3d3d9; --color-hinted-grey-12: #dedee3; --color-hinted-grey-13: #e6e6ea; --color-hinted-grey-14: #efeff1; --color-hinted-grey-15: #f7f7f8; --color-transparent: transparent; --color-opac-b-1: rgba(0,0,0,.05); --color-opac-b-2: rgba(0,0,0,.1); --color-opac-b-3: rgba(0,0,0,.15); --color-opac-b-4: rgba(0,0,0,.2); --color-opac-b-5: rgba(0,0,0,.25); --color-opac-b-6: rgba(0,0,0,.3); --color-opac-b-7: rgba(0,0,0,.4); --color-opac-b-8: rgba(0,0,0,.5); --color-opac-b-9: rgba(0,0,0,.6); --color-opac-b-10: rgba(0,0,0,.7); --color-opac-b-11: rgba(0,0,0,.75); --color-opac-b-12: rgba(0,0,0,.8); --color-opac-b-13: rgba(0,0,0,.85); --color-opac-b-14: rgba(0,0,0,.9); --color-opac-b-15: rgba(0,0,0,.95); --color-opac-w-1: hsla(0,0%,100%,.05); --color-opac-w-2: hsla(0,0%,100%,.1); --color-opac-w-3: hsla(0,0%,100%,.15); --color-opac-w-4: hsla(0,0%,100%,.2); --color-opac-w-5: hsla(0,0%,100%,.25); --color-opac-w-6: hsla(0,0%,100%,.3); --color-opac-w-7: hsla(0,0%,100%,.4); --color-opac-w-8: hsla(0,0%,100%,.5); --color-opac-w-9: hsla(0,0%,100%,.6); --color-opac-w-10: hsla(0,0%,100%,.7); --color-opac-w-11: hsla(0,0%,100%,.75); --color-opac-w-12: hsla(0,0%,100%,.8); --color-opac-w-13: hsla(0,0%,100%,.85); --color-opac-w-14: hsla(0,0%,100%,.9); --color-opac-w-15: hsla(0,0%,100%,.95); --color-opac-p-1: rgba(92,22,197,.05); --color-opac-p-2: rgba(92,22,197,.1); --color-opac-p-3: rgba(92,22,197,.15); --color-opac-p-4: rgba(92,22,197,.2); --color-opac-p-5: rgba(92,22,197,.25); --color-opac-p-6: rgba(92,22,197,.3); --color-opac-p-7: rgba(92,22,197,.4); --color-opac-p-8: rgba(92,22,197,.5); --color-opac-p-9: rgba(92,22,197,.6); --color-opac-p-10: rgba(92,22,197,.7); --color-opac-p-11: rgba(92,22,197,.75); --color-opac-p-12: rgba(92,22,197,.8); --color-opac-p-13: rgba(92,22,197,.85); --color-opac-p-14: rgba(92,22,197,.9); --color-opac-p-15: rgba(92,22,197,.95); --color-orange-1: #050301; --color-orange-2: #090601; --color-orange-3: #120d02; --color-orange-4: #251a04; --color-orange-5: #372706; --color-orange-6: #453008; --color-orange-7: #65470b; --color-orange-8: #7c570e; --color-orange-9: #9e6900; --color-orange-10: #c28100; --color-orange-11: #e69900; --color-orange-12: #ffb31a; --color-orange-13: #ffd37a; --color-orange-14: #ffdf9e; --color-orange-15: #ffebc2; --color-yellow-1: #050501; --color-yellow-2: #090901; --color-yellow-3: #0e0e02; --color-yellow-4: #1c1c03; --color-yellow-5: #292905; --color-yellow-6: #373706; --color-yellow-7: #4e4e09; --color-yellow-8: #60600b; --color-yellow-9: #7a7a00; --color-yellow-10: #949400; --color-yellow-11: #adad00; --color-yellow-12: #c7c700; --color-yellow-13: #e0e000; --color-yellow-14: #ebeb00; --color-yellow-15: #f5f500; --color-green-1: #010503; --color-green-2: #010906; --color-green-3: #02120c; --color-green-4: #042015; --color-green-5: #063221; --color-green-6: #074029; --color-green-7: #0a5738; --color-green-8: #016b40; --color-green-9: #018852; --color-green-10: #00a865; --color-green-11: #00c274; --color-green-12: #00db84; --color-green-13: #00f593; --color-green-14: #5cffbe; --color-green-15: #a8ffdc; --color-cyan-1: #010505; --color-cyan-2: #010909; --color-cyan-3: #021212; --color-cyan-4: #042020; --color-cyan-5: #052e2e; --color-cyan-6: #073c3c; --color-cyan-7: #095353; --color-cyan-8: #0c6a6a; --color-cyan-9: #018383; --color-cyan-10: #00a3a3; --color-cyan-11: #00b8b8; --color-cyan-12: #00d6d6; --color-cyan-13: #00f0f0; --color-cyan-14: #2effff; --color-cyan-15: #94ffff; --color-blue-1: #010205; --color-blue-2: #020712; --color-blue-3: #040d20; --color-blue-4: #071a40; --color-blue-5: #0a255c; --color-blue-6: #0d3177; --color-blue-7: #1345aa; --color-blue-8: #1756d3; --color-blue-9: #1f69ff; --color-blue-10: #528bff; --color-blue-11: #7aa7ff; --color-blue-12: #a3c2ff; --color-blue-13: #c7daff; --color-blue-14: #d6e4ff; --color-blue-15: #e5eeff; --color-magenta-1: #050104; --color-magenta-2: #12020f; --color-magenta-3: #20041b; --color-magenta-4: #37062e; --color-magenta-5: #4e0941; --color-magenta-6: #650b55; --color-magenta-7: #8a0f73; --color-magenta-8: #ae1392; --color-magenta-9: #c516a5; --color-magenta-10: #ff38db; --color-magenta-11: #ff75e6; --color-magenta-12: #ffa3ee; --color-magenta-13: #ffc7f5; --color-magenta-14: #ffd6f8; --color-magenta-15: #ffe5fa; --color-red-1: #050101; --color-red-2: #120202; --color-red-3: #200404; --color-red-4: #3c0807; --color-red-5: #530a09; --color-red-6: #6e0e0c; --color-red-7: #971311; --color-red-8: #bb1411; --color-red-9: #eb0400; --color-red-10: #ff4f4d; --color-red-11: #ff8280; --color-red-12: #ffaaa8; --color-red-13: #ffcdcc; --color-red-14: #ffdcdb; --color-red-15: #ffe6e5; --color-twitter: #1da1f2; --color-facebook: #3b5998; --color-reddit: #ff4500; --color-snapchat: #fffc00; --color-instagram: #405de6; --color-youtube: #cd201f; --color-paypal: #009cde; --color-paypal-blue: #009cde; --color-paypal-yellow: #fcc439; --color-vk: #45668e; --color-amazon: #fad677; --button-size-small: 2.4rem; --button-size-default: 3rem; --button-size-large: 3.6rem; --button-text-small: 1.2rem; --button-text-default: 1.3rem; --button-text-large: 1.4rem; --button-padding-x: 1rem; --button-padding-y: 0.5rem; --input-text-small: 1.2rem; --input-text-default: 1.3rem; --input-text-large: 1.4rem; --input-size-small: 2.4rem; --input-size-default: 3rem; --input-size-large: 3.6rem; --font-base: "Inter","Roobert","Helvetica Neue",Helvetica,Arial,sans-serif; --font-display: "Roobert","Inter","Helvetica Neue",Helvetica,Arial,sans-serif; --font-mono: monospace; --font-size-1: 5.4rem; --font-size-2: 3.6rem; --font-size-3: 2.4rem; --font-size-4: 1.8rem; --font-size-5: 1.4rem; --font-size-6: 1.3rem; --font-size-7: 1.2rem; --font-size-8: 1.2rem; --font-size-base: 1.3rem; --font-weight-normal: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-hdr: 400; --line-height-body: 1.5; --line-height-heading: 1.2; --base-rem-unit: 10; --grid-columns: 12; --grid-gutter-width: 1.5rem; --grid-gutter-width-lg: 2rem; --grid-gutter-width-sm: 1rem; --grid-gutter-width-xs: 0.5rem; --opac-1: 0.05; --opac-2: 0.1; --opac-3: 0.15; --opac-4: 0.2; --opac-5: 0.25; --opac-6: 0.3; --opac-7: 0.4; --opac-8: 0.5; --opac-9: 0.6; --opac-10: 0.7; --opac-11: 0.75; --opac-12: 0.8; --opac-13: 0.85; --opac-14: 0.9; --opac-15: 0.95; --space-0: 0; --space-1: 1rem; --space-2: 2rem; --space-3: 3rem; --space-4: 4rem; --space-5: 5rem; --space-6: 6rem; --space-7: 7rem; --space-8: 8rem; --space-9: 9rem; --space-10: 10rem; --space-auto: auto; --space-05: 0.5rem; --timing-short: 100ms; --timing-medium: 150ms; --timing-long: 200ms; --z-index-modal: 5000; --z-index-notification: 4000; --z-index-overlay: 3000; --z-index-balloon: 2000; --z-index-sticky: 1000; --z-index-above: 10; --z-index-default: 1; --z-index-below: -1; --color-background-button: var(--color-twitch-purple-7); --color-background-button-hover: var(--color-twitch-purple-8); --color-background-button-focus: var(--color-twitch-purple-8); --color-background-button-active: var(--color-twitch-purple-7); --color-background-button-purchase: var(--color-opac-b-5); --color-background-button-status: var(--color-background-button-success); --color-background-button-status-hover: var(--color-background-button-error-hover); --color-background-button-status-focus: var(--color-background-button-error-hover); --color-background-button-status-active: var(--color-background-button-error-active); --color-background-button-success-focus: var(--color-green-darker); --color-background-button-alert: var(--color-red); --color-background-button-alert-hover: var(--color-red-darker); --color-background-button-alert-focus: var(--color-red-darker); --color-background-button-alert-active: var(--color-red); --color-background-button-overlay: var(--color-transparent); --color-background-button-overlay-hover: var(--color-opac-w-1); --color-background-button-overlay-focus: var(--color-opac-w-1); --color-background-button-overlay-active: transparent; --color-background-interactable-alpha-hover: var(--color-opac-w-4); --color-background-interactable-alpha-active: var(--color-opac-w-5); --color-background-interactable-alpha-selected: var(--color-opac-w-3); --color-text-button: var(--color-white); --color-text-button-hover: var(--color-white); --color-text-button-focus: var(--color-white); --color-text-button-active: var(--color-white); --color-text-button-secondary-hover: var(--color-hinted-grey-6); --color-text-button-secondary-focus: var(--color-hinted-grey-6); --color-text-button-secondary-active: var(--color-hinted-grey-6); --color-text-button-text-focus: var(--color-opac-w-1); --color-text-button-text-active: var(--color-opac-p-2); --color-text-button-status: var(--color-white); --color-text-button-status-hover: var(--color-white); --color-text-button-status-focus: var(--color-white); --color-text-button-status-active: var(--color-white); --color-text-button-success-hover: var(--color-black); --color-text-button-success-focus: var(--color-black); --color-text-button-success-active: var(--color-black); --color-text-button-alert: var(--color-black); --color-text-button-alert-hover: var(--color-black); --color-text-button-alert-focus: var(--color-black); --color-text-button-alert-active: var(--color-black); --color-text-button-overlay: var(--color-white); --color-text-button-overlay-hover: var(--color-white); --color-text-button-overlay-focus: var(--color-white); --color-text-button-overlay-active: var(--color-white); --color-text-interactable: currentColor; --color-text-interactable-hover: var(--color-white); --color-text-interactable-active: var(--color-white); --color-text-interactable-inverted: var(--color-white); --color-text-input-focus: transparent; --color-border-button: var(--color-twitch-purple-7); --color-border-button-hover: var(--color-twitch-purple-8); --color-border-button-focus: var(--color-twitch-purple-9); --color-border-button-active: var(--color-twitch-purple-8); --color-border-button-disabled: var(--color-opac-w-1); --color-border-button-status: var(--color-green); --color-border-button-status-hover: var(--color-red-darker); --color-border-button-status-focus: var(--color-red-darker); --color-border-button-status-active: var(--color-red); --color-border-button-success: var(--color-green); --color-border-button-success-hover: var(--color-green); --color-border-button-success-focus: var(--color-green); --color-border-button-success-active: var(--color-green); --color-border-button-alert: var(--color-red); --color-border-button-alert-hover: var(--color-red-darker); --color-border-button-alert-focus: var(--color-red-darker); --color-border-button-alert-active: var(--color-red); --color-border-button-overlay: var(--color-transparent); --color-border-button-overlay-hover: var(--color-transparent); --color-border-button-overlay-focus: var(--color-opac-w-6); --color-border-button-overlay-active: var(--color-opac-w-9); --color-border-button-overlay-bordered: var(--color-white); --color-border-interactable-selected: var(--color-twitch-purple-10); --shadow-input: inset 0 0 0 1px var(--color-twitch-purple-5); --shadow-input-error: 0 0 0 1px var(--color-border-error); --shadow-input-focus: 0 0 10px -2px var(--color-border-brand); --shadow-input-error-focus: 0 0 6px -2px var(--color-border-error); --shadow-interactable-focus: 0 0 6px 0 var(--color-twitch-purple-8); --color-background-subscriber-stream-tag-default: var(--color-twitch-purple-4); --color-background-subscriber-stream-tag-hover: var(--color-twitch-purple-3); --color-background-subscriber-stream-tag-active: var(--color-twitch-purple-4); --color-border-subscriber-stream-tag: var(--color-twitch-purple-5); --color-background-body: var(--color-hinted-grey-1); --color-background-base: var(--color-hinted-grey-2); --color-background-alt: var(--color-hinted-grey-3); --color-background-alt-2: var(--color-hinted-grey-4); --color-background-float: var(--color-hinted-grey-3); --color-background-accent: var(--color-twitch-purple-8); --color-background-accent-alt: var(--color-twitch-purple-7); --color-background-accent-alt-2: var(--color-twitch-purple-6); --color-background-placeholder: var(--color-opac-w-1); --color-background-overlay-placeholder: var(--color-opac-w-3); --color-background-live: var(--color-red); --color-background-prime: var(--color-prime-blue); --color-background-error: var(--color-red-11); --color-background-warn: var(--color-orange-13); --color-background-success: var(--color-green-13); --color-background-info: var(--color-blue-12); --color-background-brand: var(--color-twitch-purple-11); --color-background-overlay-error: var(--color-red-11); --color-background-overlay-warn: var(--color-orange-13); --color-background-overlay-success: var(--color-green-13); --color-background-overlay-info: var(--color-blue-12); --color-background-overlay-brand: var(--color-twitch-purple-11); --color-background-interactable-hover: var(--color-opac-w-4); --color-background-interactable-active: var(--color-opac-w-5); --color-background-interactable-selected: var(--color-background-button-brand); --color-background-interactable-overlay-hover: var(--color-opac-w-4); --color-background-interactable-overlay-active: var(--color-opac-w-5); --color-background-interactable-overlay-selected: var(--color-white); --color-background-interactable-destructive-hover: var(--color-red-darker); --color-background-interactable-destructive-active: var(--color-red); --color-background-button-primary-default: var(--color-background-button-brand); --color-background-button-primary-hover: var(--color-background-button-brand-hover); --color-background-button-primary-active: var(--color-background-button-brand-active); --color-background-button-secondary-default: var(--color-opac-w-3); --color-background-button-secondary-hover: var(--color-background-interactable-hover); --color-background-button-secondary-active: var(--color-background-interactable-active); --color-background-button-text-default: var(--color-transparent); --color-background-button-text-hover: var(--color-background-interactable-hover); --color-background-button-text-active: var(--color-background-interactable-active); --color-background-button-destructive-default: var(--color-background-button-error); --color-background-button-destructive-hover: var(--color-background-button-error-hover); --color-background-button-destructive-active: var(--color-background-button-error-active); --color-background-button-error: var(--color-red-10); --color-background-button-error-hover: var(--color-red-12); --color-background-button-error-active: var(--color-red-14); --color-background-button-warn: var(--color-orange-12); --color-background-button-warn-hover: var(--color-orange-14); --color-background-button-warn-active: var(--color-orange-15); --color-background-button-success: var(--color-green-12); --color-background-button-success-hover: var(--color-green-14); --color-background-button-success-active: var(--color-green-15); --color-background-button-info: var(--color-blue-11); --color-background-button-info-hover: var(--color-blue-13); --color-background-button-info-active: var(--color-blue-15); --color-background-button-brand: var(--color-twitch-purple-9); --color-background-button-brand-hover: var(--color-twitch-purple-8); --color-background-button-brand-active: var(--color-twitch-purple-7); --color-background-button-overlay-primary-default: var(--color-white); --color-background-button-overlay-primary-hover: var(--color-opac-w-14); --color-background-button-overlay-primary-active: var(--color-opac-w-13); --color-background-button-overlay-secondary-default: var(--color-opac-w-3); --color-background-button-overlay-secondary-hover: var(--color-background-interactable-overlay-hover); --color-background-button-overlay-secondary-active: var(--color-background-interactable-overlay-active); --color-background-button-overlay-text-default: var(--color-transparent); --color-background-button-overlay-text-hover: var(--color-background-interactable-overlay-hover); --color-background-button-overlay-text-active: var(--color-background-interactable-overlay-active); --color-background-button-overlay-error: var(--color-background-button-error); --color-background-button-overlay-error-hover: var(--color-background-button-error-hover); --color-background-button-overlay-error-active: var(--color-background-button-error-active); --color-background-button-overlay-warn: var(--color-background-button-warn); --color-background-button-overlay-warn-hover: var(--color-background-button-warn-hover); --color-background-button-overlay-warn-active: var(--color-background-button-warn-active); --color-background-button-overlay-success: var(--color-background-button-success); --color-background-button-overlay-success-hover: var(--color-background-button-success-hover); --color-background-button-overlay-success-active: var(--color-background-button-success-active); --color-background-button-overlay-info: var(--color-background-button-info); --color-background-button-overlay-info-hover: var(--color-background-button-info-hover); --color-background-button-overlay-info-active: var(--color-background-button-info-active); --color-background-button-overlay-brand: var(--color-white); --color-background-button-overlay-brand-hover: var(--color-opac-w-14); --color-background-button-overlay-brand-active: var(--color-opac-w-13); --color-background-button-icon-overlay-default: var(--color-transparent); --color-background-button-icon-overlay-hover: var(--color-background-interactable-overlay-hover); --color-background-button-icon-overlay-active: var(--color-background-interactable-overlay-active); --color-background-button-disabled: var(--color-opac-w-3); --color-background-button-overlay-disabled: var(--color-opac-w-2); --color-background-image-selector-overlay: var(--color-transparent); --color-background-input: var(--color-opac-w-4); --color-background-input-focus: var(--color-black); --color-background-input-checked: var(--color-twitch-purple-8); --color-background-input-overlay: var(--color-opac-b-4); --color-background-input-overlay-focus: var(--color-black); --color-background-input-checkbox-checked: var(--color-border-brand); --color-background-input-checkbox-checked-background: var(--color-black); --color-background-input-checkbox-checked-background-overlay: var(--color-black); --color-background-input-checkbox-checked-overlay: var(--color-white); --color-background-selectable: var(--color-opac-w-3); --color-background-selectable-hover: var(--color-opac-w-4); --color-background-selectable-overlay: var(--color-opac-w-3); --color-background-selectable-overlay-hover: var(--color-opac-w-4); --color-background-tag-default: var(--color-opac-w-3); --color-background-tag-hover: var(--color-background-interactable-hover); --color-background-tag-active: var(--color-background-interactable-active); --color-background-toggle: var(--color-transparent); --color-background-toggle-handle: var(--color-white); --color-background-toggle-handle-checked: var(--color-twitch-purple-10); --color-background-toggle-handle-overlay: var(--color-white); --color-background-toggle-hover: var(--color-opac-w-5); --color-background-toggle-focus: var(--color-opac-w-5); --color-background-toggle-checked: var(--color-black); --color-background-toggle-overlay: var(--color-opac-b-4); --color-background-toggle-overlay-checked: var(--color-black); --color-background-tooltip: var(--color-white); --color-background-overlay: var(--color-opac-b-9); --color-background-progress: var(--color-opac-w-4); --color-background-progress-status: var(--color-border-brand); --color-background-progress-status-error: var(--color-border-error); --color-background-progress-status-caution: var(--color-border-warn); --color-background-progress-status-success: var(--color-border-success); --color-background-progress-overlay-status: var(--color-opac-w-12); --color-background-progress-overlay-mask: var(--color-opac-b-7); --color-background-progress-countdown: none; --color-background-progress-countdown-status: var(--color-twitch-purple-9); --color-background-pill: var(--color-hinted-grey-7); --color-background-pill-new: var(--color-magenta-11); --color-background-pill-subtle: var(--color-hinted-grey-10); --color-background-pill-notification: var(--color-red); --color-background-range: var(--color-opac-w-4); --color-background-range-fill: var(--color-border-brand); --color-background-range-overlay: var(--color-opac-w-6); --color-background-range-overlay-fill: var(--color-white); --color-background-social-column: var(--color-hinted-grey-2); --color-background-top-nav: var(--color-twitch-purple-6); --color-background-chat: var(--color-twitch-purple-1); --color-background-chat-alt: var(--color-twitch-purple-3); --color-background-chat-header: var(--color-twitch-purple-2); --color-background-chat-line-mentioning: var(--color-hinted-grey-5); --color-background-chat-line-mentioned: var(--color-hinted-grey-15); --color-background-modal-overlay: var(--color-opac-b-13); --color-background-modal: var(--color-twitch-purple-3); --color-background-graph: var(--color-twitch-purple-2); --color-background-graph-fill: var(--color-twitch-purple-8); --color-background-scrollbar: var(--color-opac-w-8); --color-background-hover: var(--color-opac-w-3); --color-text-base: var(--color-hinted-grey-14); --color-text-alt: var(--color-hinted-grey-12); --color-text-alt-2: var(--color-hinted-grey-9); --color-text-link: var(--color-twitch-purple-11); --color-text-link-hover: var(--color-twitch-purple-10); --color-text-link-active: var(--color-twitch-purple-11); --color-text-link-focus: var(--color-twitch-purple-10); --color-text-link-visited: var(--color-twitch-purple-11); --color-text-live: var(--color-text-accessible-red); --color-text-alert: var(--color-text-accessible-red); --color-text-prime: var(--color-prime-blue); --color-text-error: var(--color-red-11); --color-text-warn: var(--color-orange-11); --color-text-success: var(--color-green-11); --color-text-info: var(--color-blue-11); --color-text-brand: var(--color-twitch-purple-11); --color-text-overlay-error: var(--color-red-11); --color-text-overlay-warn: var(--color-orange-11); --color-text-overlay-success: var(--color-green-11); --color-text-overlay-info: var(--color-blue-11); --color-text-overlay-brand: var(--color-white); --color-text-accessible-red: var(--color-red-11); --color-text-accessible-green: var(--color-green-11); --color-text-accessible-blue: var(--color-blue-11); --color-text-tab: var(--color-text-base); --color-text-tab-active: var(--color-twitch-purple-11); --color-text-badge-alt: var(--color-black); --color-text-badge-alt-2: var(--color-black); --color-text-button-primary: var(--color-white); --color-text-button-secondary: var(--color-text-base); --color-text-button-text: var(--color-text-brand); --color-text-button-text-hover: var(--color-text-base); --color-text-button-destructive: var(--color-text-button-error); --color-text-button-error: var(--color-black); --color-text-button-warn: var(--color-black); --color-text-button-success: var(--color-black); --color-text-button-info: var(--color-black); --color-text-button-brand: var(--color-white); --color-text-button-overlay-primary: var(--color-black); --color-text-button-overlay-secondary: var(--color-white); --color-text-button-overlay-text: var(--color-white); --color-text-button-overlay-error: var(--color-black); --color-text-button-overlay-warn: var(--color-black); --color-text-button-overlay-success: var(--color-black); --color-text-button-overlay-info: var(--color-black); --color-text-button-overlay-brand: var(--color-black); --color-text-button-disabled: var(--color-opac-w-8); --color-text-interactable-selected: var(--color-text-overlay); --color-text-interactable-overlay-selected: var(--color-black); --color-text-input: var(--color-text-base); --color-text-input-placeholder: var(--color-opac-w-10); --color-text-input-placeholder-overlay: var(--color-opac-w-10); --color-text-input-checked-icon: var(--color-white); --color-text-label: var(--color-hinted-grey-15); --color-text-label-optional: var(--color-hinted-grey-8); --color-text-hint: var(--color-hinted-grey-8); --color-text-tag: var(--color-opac-w-10); --color-text-toggle-checked-icon: var(--color-border-brand); --color-text-toggle-checked-icon-overlay: var(--color-white); --color-text-tooltip: var(--color-twitch-purple-1); --color-text-overlay: var(--color-white); --color-text-overlay-alt: var(--color-opac-w-13); --color-text-overlay-link: var(--color-white); --color-text-overlay-link-hover: var(--color-opac-w-12); --color-text-overlay-link-active: var(--color-white); --color-text-overlay-link-focus: var(--color-opac-w-12); --color-text-overlay-link-visited: var(--color-white); --color-text-pill: var(--color-black); --color-text-chat-line-mentioning: var(--color-white); --color-text-chat-line-mentioned: var(--color-hinted-grey-2); --color-text-channel-status-text-indicator-hosting: var(--color-black); --color-text-channel-status-text-indicator-rerun: var(--color-black); --color-text-channel-status-text-indicator-offline: var(--color-black); --color-text-channel-status-text-indicator-hosting-overlay: var(--color-black); --color-text-channel-status-text-indicator-rerun-overlay: var(--color-black); --color-text-channel-status-text-indicator-offline-overlay: var(--color-black); --color-text-ribbon: var(--color-white); --color-border-base: var(--color-opac-w-2); --color-border-region: var(--color-black); --color-border-overlay: var(--color-opac-w-5); --color-border-alert: var(--color-red); --color-border-error: var(--color-red-10); --color-border-warn: var(--color-orange-12); --color-border-success: var(--color-green-12); --color-border-info: var(--color-blue-10); --color-border-brand: var(--color-twitch-purple-10); --color-border-error-decorative: var(--color-red-10); --color-border-warn-decorative: var(--color-orange-12); --color-border-success-decorative: var(--color-green-12); --color-border-info-decorative: var(--color-blue-10); --color-border-brand-decorative: var(--color-twitch-purple-10); --color-border-overlay-error: var(--color-red-10); --color-border-overlay-warn: var(--color-orange-12); --color-border-overlay-success: var(--color-green-12); --color-border-overlay-info: var(--color-blue-10); --color-border-overlay-brand: var(--color-white); --color-border-overlay-error-decorative: var(--color-red-10); --color-border-overlay-warn-decorative: var(--color-orange-12); --color-border-overlay-success-decorative: var(--color-green-12); --color-border-overlay-info-decorative: var(--color-blue-10); --color-border-overlay-brand-decorative: var(--color-twitch-purple-10); --color-border-balloon-overlay: var(--color-opac-w-4); --color-border-tab: var(--color-border-base); --color-border-tab-hover: var(--color-twitch-purple-11); --color-border-tab-focus: var(--color-twitch-purple-11); --color-border-tab-active: var(--color-border-brand); --color-border-image-selector: var(--color-opac-b-6); --color-border-image-selector-overlay: var(--color-opac-w-6); --color-border-image-selector-overlay-selected: var(--color-white); --color-border-input: var(--color-opac-w-4); --color-border-input-hover: var(--color-opac-w-6); --color-border-input-focus: var(--color-border-brand); --color-border-input-error: var(--color-border-error); --color-border-input-overlay: var(--color-opac-w-6); --color-border-input-overlay-hover: var(--color-opac-w-8); --color-border-input-overlay-focus: var(--color-white); --color-border-input-checkbox: var(--color-opac-w-10); --color-border-input-checkbox-hover: var(--color-white); --color-border-input-checkbox-focus: var(--color-border-brand); --color-border-input-checkbox-checked: var(--color-border-brand); --color-border-input-checkbox-error: var(--color-border-error); --color-border-input-checkbox-overlay: var(--color-opac-w-10); --color-border-input-checkbox-hover-overlay: var(--color-white); --color-border-input-checkbox-checked-overlay: var(--color-white); --color-border-input-checkbox-overlay-focus: var(--color-white); --color-border-range-handle: var(--color-border-brand); --color-border-range-handle-focus: var(--color-white); --color-border-tag: var(--color-opac-w-3); --color-border-toggle: var(--color-opac-w-10); --color-border-toggle-hover: var(--color-white); --color-border-toggle-focus: var(--color-border-brand); --color-border-toggle-checked: var(--color-border-brand); --color-border-toggle-overlay: var(--color-opac-w-10); --color-border-toggle-overlay-hover: var(--color-white); --color-border-toggle-overlay-focus: var(--color-white); --color-border-toggle-overlay-checked: var(--color-white); --color-border-whisper-incoming: var(--color-twitch-purple-10); --color-border-whisper-outgoing: var(--color-hinted-grey-9); --color-border-selectable: var(--color-opac-w-3); --color-border-selectable-hover: var(--color-opac-w-4); --color-border-selectable-hover-selected: var(--color-white); --color-border-selectable-selected-outer: var(--color-white); --color-border-selectable-selected-inner: var(--color-black); --color-border-selectable-overlay: var(--color-opac-w-3); --color-border-selectable-overlay-hover: var(--color-opac-w-4); --color-border-selectable-overlay-selected: var(--color-white); --color-border-selectable-overlay-selected-inner: var(--color-black); --color-border-spinner: var(--color-opac-w-3); --color-border-spinner-fill: var(--color-hinted-grey-12); --color-border-quote: var(--color-hinted-grey-9); --color-data-series-a-base: var(--color-twitch-purple-12); --color-data-series-a-alt: var(--color-twitch-purple-11); --color-data-series-a-alt-2: var(--color-twitch-purple-10); --color-data-series-a-alt-3: var(--color-twitch-purple-9); --color-data-series-a-alt-4: var(--color-twitch-purple-8); --color-data-series-b-base: var(--color-magenta-12); --color-data-series-b-alt: var(--color-magenta-11); --color-data-series-b-alt-2: var(--color-magenta-10); --color-data-series-b-alt-3: var(--color-magenta-9); --color-data-series-b-alt-4: var(--color-magenta-8); --color-data-series-c-base: var(--color-blue-12); --color-data-series-c-alt: var(--color-blue-11); --color-data-series-c-alt-2: var(--color-blue-10); --color-data-series-c-alt-3: var(--color-blue-9); --color-data-series-c-alt-4: var(--color-blue-8); --color-data-series-d-base: var(--color-cyan-12); --color-data-series-d-alt: var(--color-cyan-11); --color-data-series-d-alt-2: var(--color-cyan-10); --color-data-series-d-alt-3: var(--color-cyan-9); --color-data-series-d-alt-4: var(--color-cyan-8); --color-data-series-e-base: var(--color-orange-12); --color-data-series-e-alt: var(--color-orange-11); --color-data-series-e-alt-2: var(--color-orange-10); --color-data-series-e-alt-3: var(--color-orange-9); --color-data-series-e-alt-4: var(--color-orange-8); --color-data-text-title: var(--color-text-base); --color-data-text-subtitle: var(--color-text-alt-2); --color-data-background-chart: var(--color-background-base); --color-data-axis: var(--color-text-alt-2); --color-data-grid: var(--color-border-base); --color-data-background-gauge: var(--color-background-alt); --color-data-indicator-positive: var(--color-cyan-11); --color-data-indicator-negative: var(--color-red-11); --color-icon-input-checked: var(--color-white); --color-icon-input-radio-checked: var(--color-white); --color-fill-base: var(--color-text-base); --color-fill-current: currentColor; --color-fill-alt: var(--color-text-alt); --color-fill-alt-2: var(--color-text-alt-2); --color-fill-offline: var(--color-hinted-grey-9); --color-fill-hosting: var(--color-orange-13); --color-fill-live: var(--color-red-9); --color-fill-recording: var(--color-red-9); --color-fill-alert: var(--color-error); --color-fill-error: var(--color-red-10); --color-fill-warn: var(--color-orange-12); --color-fill-success: var(--color-green-13); --color-fill-info: var(--color-blue-10); --color-fill-brand: var(--color-twitch-purple-10); --color-fill-error-overlay: var(--color-red-10); --color-fill-warn-overlay: var(--color-orange-12); --color-fill-success-overlay: var(--color-green-13); --color-fill-info-overlay: var(--color-blue-10); --color-fill-brand-overlay: var(--color-twitch-purple-10); --color-fill-prime: var(--color-prime-blue); --color-fill-drops: var(--color-green); --color-fill-crate: var(--color-green); --color-fill-range-notch: var(--color-hinted-grey-7); --color-fill-button-icon: var(--color-text-base); --color-fill-button-icon-hover: var(--color-text-base); --color-fill-button-icon-focus: var(--color-text-base); --color-fill-button-icon-active: var(--color-text-base); --color-fill-channel-status-text-indicator-hosting: var(--color-opac-w-10); --color-fill-channel-status-text-indicator-rerun: var(--color-opac-w-10); --color-fill-channel-status-text-indicator-offline: var(--color-white); --color-fill-channel-status-text-indicator-hosting-overlay: var(--color-opac-w-10); --color-fill-channel-status-text-indicator-rerun-overlay: var(--color-opac-w-10); --color-fill-channel-status-text-indicator-offline-overlay: var(--color-white); --color-fill-new-item-indicator: var(--color-magenta-11); --color-fill-presence-offline: var(--color-hinted-grey-9); --color-fill-presence-invisible: var(--color-hinted-grey-9); --color-fill-presence-online: var(--color-green-13); --color-fill-presence-away: var(--color-orange-12); --color-fill-presence-busy: var(--color-red-10); --color-fill-presence-idle: var(--color-orange-12); --color-fill-ribbon: var(--color-red-9); --color-social-twitter: var(--color-twitter); --color-social-facebook: var(--color-facebook); --color-social-reddit: var(--color-reddit); --color-social-snapchat: var(--color-snapchat); --color-social-instagram: var(--color-instagram); --color-social-youtube: var(--color-youtube); --color-social-paypal: var(--color-paypal); --color-social-vk: var(--color-vk); --shadow-elevation-umbra: 0.34; --shadow-elevation-penumbra: 0.26; --shadow-elevation-ambient: 0.28; --shadow-elevation-1: 0 1px 2px var(--color-opac-b-14),0 0px 2px var(--color-opac-b-14); --shadow-elevation-2: 0 4px 8px var(--color-opac-b-7),0 0px 4px var(--color-opac-b-7); --shadow-elevation-3: 0 6px 16px var(--color-opac-b-8),0 0px 4px var(--color-opac-b-7); --shadow-elevation-4: 0 12px 32px var(--color-opac-b-8),0 0px 8px var(--color-opac-b-7); --shadow-elevation-5: 0 32px 64px var(--color-opac-b-9),0 0px 16px var(--color-opac-b-7); --shadow-button-focus: 0 0 6px 0 var(--color-twitch-purple-8); --shadow-button-active: 0 0 6px 0 var(--color-twitch-purple-8); --shadow-button-disabled: none; --shadow-button-overlay-focus: 0 0 6px 0 var(--color-opac-w-6); --shadow-button-overlay-active: 0 0 6px 0 var(--color-opac-w-6); --shadow-tab-focus: 0 4px 6px -4px var(--color-twitch-purple-11); --shadow-balloon: 0 1px 1px var(--color-opac-b-5); --shadow-scrollbar: 0 0 1px 1px var(--color-opac-w-5); }