From e3a7e3b64dccde1cea945b543e7e76a08544f90a Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Tue, 10 Apr 2018 21:13:34 -0400
Subject: [PATCH] Add experiments system. Add experiments UI. Update disabled
 buttons to use tw-button--disabled. Update chat line rendering. Add preset
 emote sizes to the emote menu to reduce reflows when loading. Fix directory
 issues caused by fixes to route sorting. Update the theme. Add a current
 route name value to fine router. Add recursive object protection to
 deep_copy.

---
 changelog.html                                |  11 +
 package-lock.json                             |  10 +
 package.json                                  |   2 +
 src/experiments.js                            | 272 +++++++
 src/main.js                                   |   6 +-
 .../main_menu/components/badge-visibility.vue |   1 +
 .../main_menu/components/experiments.vue      | 251 ++++++
 .../main_menu/components/profile-editor.vue   |   1 +
 src/sites/twitch-twilight/index.js            |  16 +
 .../modules/chat/emote_menu.jsx               |   6 +-
 .../twitch-twilight/modules/chat/line.js      |  18 +-
 .../styles/chat-borders-3d-inset.scss         |   4 +-
 .../css_tweaks/styles/chat-borders-3d.scss    |   4 +-
 .../css_tweaks/styles/chat-borders-wide.scss  |   4 +-
 .../css_tweaks/styles/chat-borders.scss       |   4 +-
 .../styles/chat-mention-bg-alt.scss           |   4 +-
 .../css_tweaks/styles/chat-mention-bg.scss    |   4 +-
 .../css_tweaks/styles/chat-padding.scss       |  10 +-
 .../modules/css_tweaks/styles/chat-rows.scss  |   6 +-
 .../modules/directory/browse_popular.gql      |   2 +-
 .../modules/directory/followed_channels.gql   |   2 +-
 .../modules/directory/followed_hosts.gql      |   4 +-
 .../modules/directory/followed_index.gql      |   6 +-
 .../modules/directory/followed_live.gql       |   2 +-
 .../modules/directory/following.jsx           |  56 +-
 .../modules/directory/game.gql                |   6 -
 .../modules/featured-follow.vue               |  11 +-
 .../modules/featured_follow_query.gql         |   2 +-
 .../modules/following_link.off                |   2 +-
 src/sites/twitch-twilight/styles/chat.scss    |   5 +
 src/sites/twitch-twilight/styles/theme.scss   | 741 +++++++++---------
 src/utilities/compat/apollo.js                |  24 +-
 src/utilities/compat/fine-router.js           |   4 +-
 src/utilities/object.js                       |  14 +-
 styles/widgets/profile-selector.scss          |  11 +
 35 files changed, 1075 insertions(+), 451 deletions(-)
 create mode 100644 src/experiments.js
 create mode 100644 src/modules/main_menu/components/experiments.vue

diff --git a/changelog.html b/changelog.html
index 2e724d4c..964f8006 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,14 @@
+<div class="list-header">4.0.0-beta2.4<span>@b3fb24504616675ad2b9</span> <time datetime="2018-04-10">(2018-04-10)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Debugging > Experiments for viewing active experiment information.</li>
+	<li>Added: Experiments system in case I ever need to A/B something, like the new backend under development.</li>
+	<li>Changed: Cleaned up a lot of instances of buttons that weren't being marked as disabled properly.</li>
+	<li>Changed: Update dark theme for latest Twitch changes.</li>
+	<li>Fixed: Update the render method for chat lines to bring subscription notices and rituals back in line with what Twitch generates.</li>
+	<li>Fixed: Following directory not being properly modified because of changes made to router.</li>
+	<li>Fixed? Made changes to how we modify data requesting profile images to hopefully stop breaking the game directory for people till we can make a more proper fix.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta2.3<span>@a07fb33207e6659acc9f</span> <time datetime="2018-04-09">(2018-04-09)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Favorite emotes by Ctrl-Clicking them! ⌘-Click for Mac users.</li>
diff --git a/package-lock.json b/package-lock.json
index ef1765e1..2e490883 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2357,6 +2357,11 @@
         "randomfill": "1.0.4"
       }
     },
+    "crypto-js": {
+      "version": "3.1.9-1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.1.9-1.tgz",
+      "integrity": "sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -5103,6 +5108,11 @@
       "integrity": "sha512-H7ErYLM34CvDMto3GbD6xD0JLUGYXR3QTcH6B/tr4Hi/QpSThnCsIp+Sy5FRTw3B0d6py4HcNkW7nO/wdtGWEw==",
       "dev": true
     },
+    "js-cookie": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.0.tgz",
+      "integrity": "sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
diff --git a/package.json b/package.json
index 94bd9ec5..7b429d0c 100755
--- a/package.json
+++ b/package.json
@@ -47,9 +47,11 @@
     "url": "https://github.com/FrankerFaceZ/FrankerFaceZ.git"
   },
   "dependencies": {
+    "crypto-js": "^3.1.9-1",
     "displacejs": "^1.2.4",
     "graphql": "^0.13.2",
     "graphql-tag": "^2.8.0",
+    "js-cookie": "^2.2.0",
     "path-to-regexp": "^2.2.0",
     "popper.js": "^1.14.2",
     "sortablejs": "^1.7.0",
diff --git a/src/experiments.js b/src/experiments.js
new file mode 100644
index 00000000..85c46b84
--- /dev/null
+++ b/src/experiments.js
@@ -0,0 +1,272 @@
+'use strict';
+
+// ============================================================================
+// Experiments
+// ============================================================================
+
+import {SERVER} from 'utilities/constants';
+import Module from 'utilities/module';
+import {has, deep_copy} from 'utilities/object';
+
+import Cookie from 'js-cookie';
+import SHA1 from 'crypto-js/sha1';
+
+const OVERRIDE_COOKIE = 'experiment_overrides',
+	COOKIE_OPTIONS = {
+		expires: 7,
+		domain: '.twitch.tv'
+	};
+
+
+// ============================================================================
+// Experiment Manager
+// ============================================================================
+
+export default class ExperimentManager extends Module {
+	constructor(...args) {
+		super(...args);
+
+		this.inject('settings');
+
+		this.settings.addUI('experiments', {
+			path: 'Debugging > Experiments',
+			component: 'experiments',
+			ffz_data: () => deep_copy(this.experiments),
+			twitch_data: () => deep_copy(this.getTwitchExperiments()),
+
+			usingTwitchExperiment: key => this.usingTwitchExperiment(key),
+			getTwitchAssignment: key => this.getTwitchAssignment(key),
+			hasTwitchOverride: key => this.hasTwitchOverride(key),
+			setTwitchOverride: (key, val) => this.setTwitchOverride(key, val),
+			deleteTwitchOverride: key => this.deleteTwitchOverride(key),
+
+			getAssignment: key => this.getAssignment(key),
+			hasOverride: key => this.hasOverride(key),
+			setOverride: (key, val) => this.setOverride(key, val),
+			deleteOverride: key => this.deleteOverride(key),
+
+			on: (...args) => this.on(...args),
+			off: (...args) => this.off(...args)
+		});
+
+		this.unique_id = Cookie.get('unique_id');
+
+		this.Cookie = Cookie;
+
+		this.experiments = {};
+		this.cache = new Map;
+	}
+
+	async onLoad() {
+		await this.loadExperiments();
+	}
+
+
+	async loadExperiments() {
+		let data;
+
+		try {
+			data = await fetch(`${SERVER}/static/experiments.json?_=${Date.now()}`).then(r =>
+				r.ok ? r.json() : null);
+
+		} catch(err) {
+			this.log.warn('Unable to load experiment data.', err);
+		}
+
+		if ( ! data )
+			return;
+
+		this.experiments = data;
+
+		const old_cache = this.cache;
+		this.cache = new Map;
+
+		let changed = 0;
+
+		for(const [key, old_val] of old_cache.entries()) {
+			const new_val = this.getAssignment(key);
+			if ( old_val !== new_val ) {
+				changed++;
+				this.emit(':changed', key, new_val);
+				this.emit(`:changed:${key}`, new_val);
+			}
+		}
+
+		this.log.info(`Loaded information on ${Object.keys(data).length} experiments.${changed > 0 ? ` ${changed} values updated.` : ''}`);
+	}
+
+
+	onEnable() {
+		this.on('socket:command:reload_experiments', this.loadExperiments, this);
+		this.on('socket:command:update_experiment', this.updateExperiment, this);
+	}
+
+
+	updateExperiment(key, data) {
+		this.log.info(`Received updated data for experiment "${key}" via WebSocket.`, data);
+
+		if ( data.groups )
+			this.experiments[key] = data;
+		else
+			this.experiments[key].groups = data;
+
+		this._rebuildKey(key);
+	}
+
+
+	// Twitch Experiments
+
+	getTwitchExperiments() {
+		if ( window.__twilightSettings )
+			return window.__twilightSettings.experiments;
+
+		const core = this.resolve('site').getCore();
+		return core && core.experiments.experiments;
+	}
+
+
+	usingTwitchExperiment(key) {
+		const core = this.resolve('site').getCore();
+		return core && has(core.experiments.assignments, key)
+	}
+
+
+	setTwitchOverride(key, value = null) {
+		const overrides = Cookie.getJSON(OVERRIDE_COOKIE) || {};
+		overrides[key] = value;
+		Cookie.set(OVERRIDE_COOKIE, overrides, COOKIE_OPTIONS);
+
+		const core = this.resolve('site').getCore();
+		if ( core )
+			core.experiments.overrides[key] = value;
+
+		this._rebuildTwitchKey(key, true, value);
+	}
+
+	deleteTwitchOverride(key) {
+		const overrides = Cookie.getJSON(OVERRIDE_COOKIE);
+		if ( ! overrides || ! has(overrides, key) )
+			return;
+
+		const old_val = overrides[key];
+		delete overrides[key];
+		Cookie.set(OVERRIDE_COOKIE, overrides, COOKIE_OPTIONS);
+
+		const core = this.resolve('site').getCore();
+		if ( core )
+			delete core.experiments.overrides[key];
+
+		this._rebuildTwitchKey(key, false, old_val);
+	}
+
+	hasTwitchOverride(key) { // eslint-disable-line class-methods-use-this
+		const overrides = Cookie.getJSON(OVERRIDE_COOKIE);
+		return overrides && has(overrides, key);
+	}
+
+	getTwitchAssignment(key) {
+		const core = this.resolve('site').getCore(),
+			exps = core && core.experiments;
+
+		if ( exps && exps.overrides[key] )
+			return exps.overrides[key];
+
+		else if ( exps && exps.assignments[key] )
+			return exps.assignments[key];
+
+		return null;
+	}
+
+	_rebuildTwitchKey(key, is_set, new_val) {
+		const core = this.resolve('site').getCore(),
+			exps = core.experiments;
+
+		if ( ! has(exps.assignments, key) )
+			return;
+
+		const old_val = exps.assignments[key];
+
+		if ( old_val !== new_val ) {
+			const value = is_set ? new_val : old_val;
+			this.emit(':twitch-changed', key, value);
+			this.emit(`:twitch-changed:${key}`, value);
+		}
+	}
+
+
+	// FFZ Experiments
+
+	setOverride(key, value = null) {
+		const overrides = this.settings.provider.get('experiment-overrides') || {};
+		overrides[key] = value;
+
+		this.settings.provider.set('experiment-overrides', overrides);
+
+		this._rebuildKey(key);
+	}
+
+	deleteOverride(key) {
+		const overrides = this.settings.provider.get('experiment-overrides');
+		if ( ! overrides || ! has(overrides, key) )
+			return;
+
+		delete overrides[key];
+		this.settings.provider.set('experiment-overrides', overrides);
+
+		this._rebuildKey(key);
+	}
+
+	hasOverride(key) {
+		const overrides = this.settings.provider.get('experiment-overrides');
+		return overrides && has(overrides, key);
+	}
+
+	getAssignment(key) {
+		if ( this.cache.has(key) )
+			return this.cache.get(key);
+
+		const experiment = this.experiments[key];
+		if ( ! experiment ) {
+			this.log.warn(`Tried to get assignment for experiment "${key}" which is not known.`);
+			return null;
+		}
+
+		const overrides = this.settings.provider.get('experiment-overrides'),
+			out = overrides && has(overrides, key) ?
+				overrides[key] :
+				ExperimentManager.selectGroup(key, experiment, this.unique_id);
+
+		this.cache.set(key, out);
+		return out;
+	}
+
+	_rebuildKey(key) {
+		if ( ! this.cache.has(key) )
+			return;
+
+		const old_val = this.cache.get(key);
+		this.cache.delete(key);
+		const new_val = this.getAssignment(key);
+
+		if ( new_val !== old_val ) {
+			this.emit(':changed', key, new_val);
+			this.emit(`:changed:${key}`, new_val);
+		}
+	}
+
+
+	static selectGroup(key, experiment, unique_id) {
+		const seed = key + unique_id + (experiment.seed || ''),
+			total = experiment.groups.reduce((a,b) => a + b.weight, 0);
+
+		let value = (SHA1(seed).words[0] >>> 0) / Math.pow(2, 32);
+
+		for(const group of experiment.groups) {
+			value -= group.weight / total;
+			if ( value <= 0 )
+				return group.value;
+		}
+
+		return null;
+	}
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f58f59c7..ae3ef9e3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,7 @@ import Module from 'utilities/module';
 import {DEBUG} from 'utilities/constants';
 
 import SettingsManager from './settings/index';
-//import ExperimentManager from './experiments';
+import ExperimentManager from './experiments';
 import {TranslationManager} from './i18n';
 import SocketClient from './socket';
 import Site from 'site';
@@ -35,7 +35,7 @@ class FrankerFaceZ extends Module {
 		// ========================================================================
 
 		this.inject('settings', SettingsManager);
-		//this.inject('experiments', ExperimentManager);
+		this.inject('experiments', ExperimentManager);
 		this.inject('i18n', TranslationManager);
 		this.inject('socket', SocketClient);
 		this.inject('site', Site);
@@ -97,7 +97,7 @@ class FrankerFaceZ extends Module {
 FrankerFaceZ.Logger = Logger;
 
 const VER = FrankerFaceZ.version_info = {
-	major: 4, minor: 0, revision: 0, extra: '-beta2.3',
+	major: 4, minor: 0, revision: 0, extra: '-beta2.4',
 	build: __webpack_hash__,
 	toString: () =>
 		`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
diff --git a/src/modules/main_menu/components/badge-visibility.vue b/src/modules/main_menu/components/badge-visibility.vue
index 9c900a55..a1f06d71 100644
--- a/src/modules/main_menu/components/badge-visibility.vue
+++ b/src/modules/main_menu/components/badge-visibility.vue
@@ -11,6 +11,7 @@
 		<div class="tw-mg-b-2 tw-align-right">
 			<button
 				:disabled="! has_value"
+				:class="{'tw-button--disabled': ! has_value}"
 				class="tw-mg-l-05 tw-button tw-button--hollow tw-tooltip-wrapper"
 				@click="clear"
 			>
diff --git a/src/modules/main_menu/components/experiments.vue b/src/modules/main_menu/components/experiments.vue
new file mode 100644
index 00000000..e01617f9
--- /dev/null
+++ b/src/modules/main_menu/components/experiments.vue
@@ -0,0 +1,251 @@
+<template lang="html">
+	<div class="ffz--experiments tw-pd-t-05">
+		<div class="tw-pd-b-1 tw-mg-b-2 tw-border-b">
+			{{ t('settings.experiments.about', 'This feature allows you to override experiment values. Please note that, for most experiments, you may have to refresh the page for your changes to take effect.') }}
+		</div>
+
+		<h3 class="tw-mg-b-1">
+			{{ t('settings.experiments.ffz', 'FrankerFaceZ Experiments') }}
+		</h3>
+
+		<div class="ffz--experiment-list">
+			<section
+				v-for="({key, exp}) of sorted(ffz_data)"
+				:key="key"
+				:data-key="key"
+			>
+				<div class="tw-elevation-1 tw-c-background tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex tw-flex-nowrap">
+
+					<div class="tw-flex-grow-1">
+						<h4>{{ exp.name }}</h4>
+						<div v-if="exp.description" class="description">
+							{{ exp.description }}
+						</div>
+					</div>
+
+					<div class="tw-flex tw-flex-shrink-0 tw-align-items-start">
+						<select
+							:data-key="key"
+							class="tw-mg-05 tw-select tw-display-line tw-width-auto"
+							@change="onChange($event)"
+						>
+							<option
+								v-for="(i, idx) in exp.groups"
+								:key="idx"
+								:selected="i.value === exp.value"
+							>
+								{{ t('settings.exepriments.entry', '%{value} (weight: %{weight})', i) }}
+							</option>
+						</select>
+
+						<button
+							:disabled="exp.default"
+							:class="{'tw-button--disabled': exp.default}"
+							class="tw-mg-t-05 tw-button tw-button--text tw-tooltip-wrapper"
+							@click="reset(key)"
+						>
+							<span class="tw-button__text ffz-i-cancel" />
+							<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+								{{ t('setting.reset', 'Reset to Default') }}
+							</span>
+						</button>
+					</div>
+				</div>
+			</section>
+			<div v-if="! Object.keys(ffz_data).length">
+				{{ t('settings.experiments.none', 'There are no current experiments.') }}
+			</div>
+		</div>
+
+		<h3 class="tw-mg-t-5 tw-mg-b-1">
+			{{ t('settings.experiments.twitch', 'Twitch Experiments') }}
+		</h3>
+
+		<div class="ffz--experiment-list">
+			<section
+				v-for="({key, exp}) of sorted(twitch_data)"
+				:key="key"
+				:data-key="key"
+			>
+				<div
+					:class="{live: exp.in_use}"
+					class="ffz--experiment-row tw-elevation-1 tw-c-background tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex"
+				>
+					<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-border-r tw-mg-r-1 tw-pd-r-1">
+						<div v-if="exp.in_use" class="ffz--profile__icon ffz-i-ok tw-tooltip-wrapper">
+							<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+								{{ t('setting.experiments.active', 'This experiment is active.') }}
+							</div>
+						</div>
+						<div v-else class="ffz--profile__icon ffz-i-cancel tw-tooltip-wrapper">
+							<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+								{{ t('setting.experiments.inactive', 'This experiment is not active.') }}
+							</div>
+						</div>
+					</div>
+
+					<div class="tw-flex-grow-1">
+						<h4>{{ exp.name }}</h4>
+						<div class="description">
+							{{ exp.remainder }}
+						</div>
+					</div>
+
+					<div class="tw-flex tw-flex-shrink-0 tw-align-items-start">
+						<select
+							:data-key="key"
+							class="tw-mg-05 tw-select tw-display-line tw-width-auto"
+							@change="onTwitchChange($event)"
+						>
+							<option
+								v-for="(i, idx) in exp.groups"
+								:key="idx"
+								:selected="i.value === exp.value"
+							>
+								{{ i.value }} (weight: {{ i.weight }})
+							</option>
+						</select>
+
+						<button
+							:disabled="exp.default"
+							:class="{'tw-button--disabled': exp.default}"
+							class="tw-mg-t-05 tw-button tw-button--text tw-tooltip-wrapper"
+							@click="resetTwitch(key)"
+						>
+							<span class="tw-button__text ffz-i-cancel" />
+							<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+								{{ t('setting.reset', 'Reset to Default') }}
+							</span>
+						</button>
+					</div>
+				</div>
+			</section>
+			<div v-if="! Object.keys(twitch_data).length">
+				{{ t('settings.experiments.none', 'There are no current experiments.') }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+
+import {has} from 'utilities/object';
+
+export default {
+	props: ['item'],
+
+	data() {
+		return {
+			ffz_data: this.item.ffz_data(),
+			twitch_data: this.item.twitch_data()
+		}
+	},
+
+	created() {
+		for(const key in this.ffz_data)
+			if ( has(this.ffz_data, key) ) {
+				const exp = this.ffz_data[key];
+				this.$set(exp, 'value', this.item.getAssignment(key));
+				this.$set(exp, 'default', ! this.item.hasOverride(key));
+			}
+
+		for(const key in this.twitch_data)
+			if ( has(this.twitch_data, key) ) {
+				const exp = this.twitch_data[key];
+				this.$set(exp, 'value', this.item.getTwitchAssignment(key));
+				this.$set(exp, 'default', ! this.item.hasTwitchOverride(key));
+
+				exp.in_use = this.item.usingTwitchExperiment(key);
+				exp.remainder = `v: ${exp.v}, t: ${exp.t}`;
+			}
+
+		this.item.on(':changed', this.valueChanged, this);
+		this.item.on(':twitch-changed', this.twitchValueChanged, this);
+	},
+
+	beforeDestroy() {
+		this.item.off(':changed', this.valueChanged, this);
+		this.item.off(':twitch-changed', this.twitchValueChanged, this);
+	},
+
+	methods: {
+		sorted(data) {
+			const out = Object.entries(data).map(x => ({key: x[0], exp: x[1]}));
+
+			out.sort((a,b) => {
+				const a_use = a.exp.in_use,
+					b_use = b.exp.in_use;
+
+				if ( a_use && ! b_use ) return -1;
+				if ( ! a_use && b_use ) return 1;
+
+				const a_n = a.exp.name.toLowerCase(),
+					b_n = b.exp.name.toLowerCase();
+
+				if ( a_n < b_n ) return -1;
+				if ( a_n > b_n ) return 1;
+				return 0;
+			});
+
+			return out;
+		},
+
+		reset(key) {
+			this.item.deleteOverride(key);
+			const exp = this.ffz_data[key];
+			if ( exp )
+				exp.default = ! this.item.hasOverride(key);
+		},
+
+		resetTwitch(key) {
+			this.item.deleteTwitchOverride(key);
+			const exp = this.twitch_data[key];
+			if ( exp )
+				exp.default = ! this.item.hasTwitchOverride(key);
+		},
+
+		onChange(event) {
+			const el = event.target,
+				idx = el.selectedIndex,
+				key = el.dataset.key;
+
+			const exp = this.ffz_data[key],
+				groups = exp && exp.groups,
+				entry = groups && groups[idx];
+
+			if ( entry )
+				this.item.setOverride(key, entry.value);
+		},
+
+		onTwitchChange(event) {
+			const el = event.target,
+				idx = el.selectedIndex,
+				key = el.dataset.key;
+
+			const exp = this.twitch_data[key],
+				groups = exp && exp.groups,
+				entry = groups && groups[idx];
+
+			if ( entry )
+				this.item.setTwitchOverride(key, entry.value);
+		},
+
+		valueChanged(key, value) {
+			const exp = this.ffz_data[key];
+			if ( exp ) {
+				exp.value = value;
+				exp.default = ! this.item.hasOverride(key);
+			}
+		},
+
+		twitchValueChanged(key, value) {
+			const exp = this.twitch_data[key];
+			if ( exp ) {
+				exp.value = value;
+				exp.default = ! this.item.hasTwitchOverride(key);
+			}
+		}
+	}
+}
+
+</script>
\ No newline at end of file
diff --git a/src/modules/main_menu/components/profile-editor.vue b/src/modules/main_menu/components/profile-editor.vue
index f016bf18..c55da09d 100644
--- a/src/modules/main_menu/components/profile-editor.vue
+++ b/src/modules/main_menu/components/profile-editor.vue
@@ -12,6 +12,7 @@
 			</button>
 			<button
 				:disabled="item.profile && context.profiles.length < 2"
+				:class="{'tw-button--disabled': item.profile && context.profiles.length < 2}"
 				class="tw-mg-l-1 tw-button tw-button--text"
 				@click="del"
 			>
diff --git a/src/sites/twitch-twilight/index.js b/src/sites/twitch-twilight/index.js
index ff199f1a..baa765ff 100644
--- a/src/sites/twitch-twilight/index.js
+++ b/src/sites/twitch-twilight/index.js
@@ -96,12 +96,28 @@ export default class Twilight extends BaseSite {
 		const session = this.getSession();
 		return session && session.user;
 	}
+
+	getCore() {
+		if ( this._core )
+			return this._core;
+
+		let core = this.web_munch.getModule('core-1');
+		if ( core )
+			return this._core = core.o;
+
+		core = this.web_munch.getModule('core-2');
+		if ( core )
+			return this._core = core.p;
+	}
 }
 
 
 Twilight.KNOWN_MODULES = {
 	simplebar: n => n.globalObserver && n.initDOMLoadedElements,
 	react: n => n.Component && n.createElement,
+	'core-1': n => n.o && n.o.experiments,
+	'core-2': n => n.p && n.p.experiments,
+	cookie: n => n && n.set && n.get && n.getJSON && n.withConverter,
 	'extension-service': n => n.extensionService,
 	'chat-types': n => n.a && n.a.PostWithMention,
 	'gql-printer': n => n !== window && n.print
diff --git a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
index 28b93f80..7ec47227 100644
--- a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
+++ b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
@@ -313,6 +313,8 @@ export default class EmoteMenu extends Module {
 							src={data.src}
 							srcSet={data.srcSet}
 							alt={data.name}
+							height={data.height ? `${data.height}px` : null}
+							width={data.width ? `${data.width}px` : null}
 						/>
 					</figure>
 					{favorite && (<figure class="ffz--favorite ffz-i-star" />)}
@@ -1007,7 +1009,9 @@ export default class EmoteMenu extends Module {
 								src: emote.urls[1],
 								srcSet: emote.srcSet,
 								name: emote.name,
-								favorite: is_fav
+								favorite: is_fav,
+								height: emote.height,
+								width: emote.width
 							};
 
 						emotes.push(em);
diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js
index 7d569d70..d517782d 100644
--- a/src/sites/twitch-twilight/modules/chat/line.js
+++ b/src/sites/twitch-twilight/modules/chat/line.js
@@ -168,9 +168,9 @@ export default class ChatLine extends Module {
 						months = msg.sub_months || 1,
 						tier = SUB_TIERS[plan.plan] || 1;
 
-					cls = 'chat-line__subscribe';
+					cls = 'user-notice-line tw-pd-y-05 tw-pd-r-2 ffz--subscribe-line';
 					out = [
-						e('span', null, [
+						e('div', {className: 'tw-c-text-alt-2'}, [
 							t.i18n.t('chat.sub.main', '%{user} just subscribed with %{plan}!', {
 								user: user.userDisplayName,
 								plan: plan.prime ?
@@ -187,7 +187,7 @@ export default class ChatLine extends Module {
 									})}` : null
 						]),
 						out && e('div', {
-							className: 'chat-line__subscribe--message',
+							className: 'chat-line--inline chat-line__message',
 							'data-room-id': this.props.channelID,
 							'data-room': room,
 							'data-user-id': user.userID,
@@ -198,16 +198,18 @@ export default class ChatLine extends Module {
 				} else if ( msg.ffz_type === 'ritual' && t.chat.context.get('chat.rituals.show') ) {
 					let system_msg;
 					if ( msg.ritual === 'new_chatter' )
-						system_msg = t.i18n.t('chat.ritual', '%{user} is new here. Say hello!', {
-							user: user.userDisplayName
-						});
+						system_msg = e('div', {className: 'tw-c-text-alt-2'}, [
+							t.i18n.t('chat.ritual', '%{user} is new here. Say hello!', {
+								user: user.userDisplayName
+							})
+						]);
 
 					if ( system_msg ) {
-						cls = 'chat-line__ritual';
+						cls = 'user-notice-line tw-pd-y-05 tw-pd-r-2 ffz--ritual-line';
 						out = [
 							system_msg,
 							out && e('div', {
-								className: 'chat-line__ritual--message',
+								className: 'chat-line--inline chat-line__message',
 								'data-room-id': this.props.channelID,
 								'data-room': room,
 								'data-user-id': user.userID,
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss
index 76ca03f6..ac12ac76 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d-inset.scss
@@ -2,11 +2,11 @@
 .thread-message__timestamp,
 .thread-message__warning,
 
-.chat-line__message,
+.chat-line__message:not(.chat-line--inline),
 .chat-line__moderation,
 .chat-line__status,
 .chat-line__raid,
-.chat-line__subscribe {
+.user-notice-line {
 	padding-top: calc(.5rem - 1px) !important;
 
 	border-top: 1px solid #aaa;
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d.scss
index 0f05dc2b..ce400817 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-3d.scss
@@ -2,11 +2,11 @@
 .thread-message__timestamp,
 .thread-message__warning,
 
-.chat-line__message,
+.chat-line__message:not(.chat-line--inline),
 .chat-line__moderation,
 .chat-line__status,
 .chat-line__raid,
-.chat-line__subscribe {
+.user-notice-line {
 	padding-top: calc(.5rem - 1px) !important;
 
 	border-top: 1px solid rgba(255,255,255,0.5);
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-wide.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-wide.scss
index 695e36b6..27ecd26b 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-wide.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders-wide.scss
@@ -2,11 +2,11 @@
 .thread-message__timestamp,
 .thread-message__warning,
 
-.chat-line__message,
+.chat-line__message:not(.chat-line--inline),
 .chat-line__moderation,
 .chat-line__status,
 .chat-line__raid,
-.chat-line__subscribe {
+.user-notice-line {
 	padding-top: calc(.5rem - 1px) !important;
 	border-top: 1px solid var(--ffz-border-color);
 
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders.scss
index e3980a41..c6ac2e54 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-borders.scss
@@ -2,11 +2,11 @@
 .thread-message__timestamp,
 .thread-message__warning,
 
-.chat-line__message,
+.chat-line__message:not(.chat-line--inline),
 .chat-line__moderation,
 .chat-line__status,
 .chat-line__raid,
-.chat-line__subscribe {
+.user-notice-line {
 	padding-bottom: calc(.5rem - 1px) !important;
 	border-bottom: 1px solid var(--ffz-border-color);
 
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss
index 3439d7a9..4a525813 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-alt.scss
@@ -1,5 +1,5 @@
-.chat-line__message,
-.chat-line__subscribe {
+.chat-line__message:not(.chat-line--inline),
+.user-notice-line {
 	&.ffz-mentioned:nth-child(2n+0) {
 		background-color: rgba(255,127,127,.4) !important;
 
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss
index c22c9f4b..c259ac80 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg.scss
@@ -1,5 +1,5 @@
-.chat-line__message,
-.chat-line__subscribe {
+.chat-line__message:not(.chat-line--inline),
+.user-notice-line {
 	&.ffz-mentioned {
 		background-color: rgba(255,127,127,.2) !important;
 
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-padding.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-padding.scss
index 1a5654fb..5af9ca6d 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-padding.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-padding.scss
@@ -1,7 +1,11 @@
-.chat-line__message,
+.chat-line__message:not(.chat-line--inline),
 .chat-line__moderation,
 .chat-line__status,
-.chat-line__raid,
-.chat-line__subscribe {
+.chat-line__raid {
 	padding: .5rem 1rem !important;
+}
+
+.user-notice-line {
+	padding: .5rem 1rem !important;
+	padding-left: .6rem !important;
 }
\ No newline at end of file
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss
index 0ecdad88..5ba72ddf 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/chat-rows.scss
@@ -5,11 +5,9 @@
 .chat-line__moderation,
 .chat-line__status,
 .chat-list__lines .chat-line__raid,
-.chat-list__lines .chat-line__subscribe,
 .chat-list__lines .chat-line__bits-charity,
-.chat-list__lines .chat-line__ritual,
-.chat-line__subscribe,
-.chat-line__message {
+.user-notice-line,
+.chat-line__message:not(.chat-line--inline) {
 	background-color: transparent !important;
 
 	&:nth-child(2n+0) {
diff --git a/src/sites/twitch-twilight/modules/directory/browse_popular.gql b/src/sites/twitch-twilight/modules/directory/browse_popular.gql
index 889d4bef..5ebcaf8f 100644
--- a/src/sites/twitch-twilight/modules/directory/browse_popular.gql
+++ b/src/sites/twitch-twilight/modules/directory/browse_popular.gql
@@ -4,7 +4,7 @@ query {
 			node {
 				createdAt
 				broadcaster {
-					profileImageURL(width: 70)
+					profileImageURL(width: 50)
 				}
 			}
 		}
diff --git a/src/sites/twitch-twilight/modules/directory/followed_channels.gql b/src/sites/twitch-twilight/modules/directory/followed_channels.gql
index 3118abf2..39955eff 100644
--- a/src/sites/twitch-twilight/modules/directory/followed_channels.gql
+++ b/src/sites/twitch-twilight/modules/directory/followed_channels.gql
@@ -2,7 +2,7 @@ query {
 	currentUser {
 		followedLiveUsers {
 			nodes {
-				profileImageURL(width: 70)
+				profileImageURL(width: 50)
 				stream {
 					type
 					createdAt
diff --git a/src/sites/twitch-twilight/modules/directory/followed_hosts.gql b/src/sites/twitch-twilight/modules/directory/followed_hosts.gql
index a0717056..0bd303b1 100644
--- a/src/sites/twitch-twilight/modules/directory/followed_hosts.gql
+++ b/src/sites/twitch-twilight/modules/directory/followed_hosts.gql
@@ -2,9 +2,9 @@ query {
 	currentUser {
 		followedHosts {
 			nodes {
-				profileImageURL(width: 70)
+				profileImageURL(width: 50)
 				hosting {
-					profileImageURL(width: 70)
+					profileImageURL(width: 50)
 					stream {
 						createdAt
 					}
diff --git a/src/sites/twitch-twilight/modules/directory/followed_index.gql b/src/sites/twitch-twilight/modules/directory/followed_index.gql
index 3dcf06f7..aaf8ed0f 100644
--- a/src/sites/twitch-twilight/modules/directory/followed_index.gql
+++ b/src/sites/twitch-twilight/modules/directory/followed_index.gql
@@ -2,7 +2,7 @@ query {
 	currentUser {
 		followedLiveUsers {
 			nodes {
-				profileImageURL(width: 70)
+				profileImageURL(width: 50)
 				stream {
 					createdAt
 				}
@@ -10,9 +10,9 @@ query {
 		}
 		followedHosts {
 			nodes {
-				profileImageURL(width: 70)
+				profileImageURL(width: 50)
 				hosting {
-					profileImageURL(width: 70)
+					profileImageURL(width: 50)
 					stream {
 						createdAt
 						type
diff --git a/src/sites/twitch-twilight/modules/directory/followed_live.gql b/src/sites/twitch-twilight/modules/directory/followed_live.gql
index 69595a41..7d719875 100644
--- a/src/sites/twitch-twilight/modules/directory/followed_live.gql
+++ b/src/sites/twitch-twilight/modules/directory/followed_live.gql
@@ -3,7 +3,7 @@ query {
 		followedLiveUsers {
 			edges {
 				node {
-					profileImageURL(width: 70)
+					profileImageURL(width: 50)
 					stream {
 						createdAt
 					}
diff --git a/src/sites/twitch-twilight/modules/directory/following.jsx b/src/sites/twitch-twilight/modules/directory/following.jsx
index 9bba47c8..2ef03517 100644
--- a/src/sites/twitch-twilight/modules/directory/following.jsx
+++ b/src/sites/twitch-twilight/modules/directory/following.jsx
@@ -89,11 +89,6 @@ export default class Following extends SiteModule {
 		this.apollo.registerModifier('FollowingHosts_CurrentUser', res => this.modifyLiveHosts(res), false);
 	}
 
-	isRouteAcceptable() {
-		return this.router.current.name === 'dir-following'
-			|| this.router.current.name === 'dir-category' && this.router.match[1] === 'following';
-	}
-
 	modifyLiveUsers(res) {
 		const hiddenThumbnails = this.settings.provider.get('directory.game.hidden-thumbnails') || [];
 		const blockedGames = this.settings.provider.get('directory.game.blocked-games') || [];
@@ -167,34 +162,35 @@ export default class Following extends SiteModule {
 	}
 
 	ensureQueries () {
-		if (this.router && this.router.match) {
+		this.apollo.ensureQuery(
+			'FollowedChannels',
+			'data.currentUser.followedLiveUsers.nodes.0.profileImageURL'
+		);
+
+		if ( this.router.current_name !== 'dir-following' )
+			return;
+
+		const bit = this.router.match[1];
+
+		if ( ! bit )
 			this.apollo.ensureQuery(
-				'FollowedChannels',
-				'data.currentUser.followedLiveUsers.nodes.0.profileImageURL'
+				'FollowedIndex_CurrentUser',
+				n =>
+					get('data.currentUser.followedLiveUsers.nodes.0.stream.createdAt', n) !== undefined ||
+					get('data.currentUser.followedHosts.nodes.0.hosting.stream.createdAt', n) !== undefined
 			);
 
-			if (!this.router.match[1] || this.router.match[1] === 'following') {
-				this.apollo.ensureQuery(
-					'FollowedIndex_CurrentUser',
-					n =>
-						get('data.currentUser.followedLiveUsers.nodes.0.profileImageURL', n) !== undefined
-						||
-						get('data.currentUser.followedLiveUsers.edges.0.node.profileImageURL', n) !== undefined
-						||
-						get('data.currentUser.followedHosts.nodes.0.hosting.profileImageURL', n) !== undefined
-				);
-			} else if (this.router.match[1] === 'live') {
-				this.apollo.ensureQuery(
-					'FollowingLive_CurrentUser',
-					'data.currentUser.followedLiveUsers.nodes.0.profileImageURL' || 'data.currentUser.followedLiveUsers.edges.0.node.profileImageURL'
-				);
-			} else if (this.router.match[1] === 'hosts') {
-				this.apollo.ensureQuery(
-					'FollowingHosts_CurrentUser',
-					'data.currentUser.followedHosts.nodes.0.hosting.profileImageURL'
-				);
-			}
-		}
+		else if ( bit === 'live' )
+			this.apollo.ensureQuery(
+				'FollowingLive_CurrentUser',
+				'data.currentUser.followedLiveUsers.nodes.0.stream.createdAt'
+			);
+
+		else if ( bit === 'hosts' )
+			this.apollo.ensureQuery(
+				'FollowingHosts_CurrentUser',
+				'data.currentUser.followedHosts.nodes.0.hosting.stream.createdAt'
+			);
 	}
 
 	onEnable() {
diff --git a/src/sites/twitch-twilight/modules/directory/game.gql b/src/sites/twitch-twilight/modules/directory/game.gql
index 7f31632d..b007e73e 100644
--- a/src/sites/twitch-twilight/modules/directory/game.gql
+++ b/src/sites/twitch-twilight/modules/directory/game.gql
@@ -6,9 +6,6 @@ query {
 					node {
 						createdAt
 						type
-						broadcaster {
-							profileImageURL(width: 70)
-						}
 					}
 				}
 			}
@@ -19,9 +16,6 @@ query {
 					node {
 						createdAt
 						type
-						broadcaster {
-							profileImageURL(width: 70)
-						}
 					}
 				}
 			}
diff --git a/src/sites/twitch-twilight/modules/featured-follow.vue b/src/sites/twitch-twilight/modules/featured-follow.vue
index 96f6588c..174fff3c 100644
--- a/src/sites/twitch-twilight/modules/featured-follow.vue
+++ b/src/sites/twitch-twilight/modules/featured-follow.vue
@@ -1,10 +1,14 @@
 <template lang="html">
 	<div class="ffz-featured-follow tw-c-background">
 		<header class="tw-full-width tw-align-items-center tw-flex tw-flex-nowrap">
-			<h4>{{ t('metadata.featured-follow.title', 'Featured Follow') }}</h4>
+			<h4>{{ t('metadata.featured-follow.title', 'Featured Channels') }}</h4>
 
 			<div class="tw-flex-grow-1 tw-pd-x-2"/>
-			<button :class="{ 'ffz--featured-follow-update': hasUpdate, 'tw-button--disabled': !hasUpdate }" class="tw-button tw-button--hollow" @click="refresh">
+			<button
+				v-if="hasUpdate"
+				class="ffz--featured-follow-update tw-button tw-button--hollow"
+				@click="refresh"
+			>
 				<span class="tw-button__icon tw-button__icon--left">
 					<figure class="ffz-i-arrows-cw"/>
 				</span>
@@ -32,6 +36,7 @@
 									<button
 										v-if="user.following"
 										:disabled="user.loading"
+										:class="{'tw-button--disabled': user.loading}"
 										:data-title="user.loading ? null : t('featured-follow.button.unfollow', 'Unfollow %{user}', {user: user.displayName})"
 										data-tooltip-type="html"
 										class="tw-button tw-button--status tw-button--success ffz-tooltip ffz--featured-button-unfollow"
@@ -44,6 +49,7 @@
 									<button
 										v-if="user.following"
 										:disabled="user.loading"
+										:class="{'tw-button--disabled': user.loading}"
 										:data-title="notifyTip(user.disableNotifications)"
 										data-tooltip-type="html"
 										class="tw-button-icon tw-mg-l-05 ffz-tooltip ffz--featured-button-notification"
@@ -56,6 +62,7 @@
 									<button
 										v-else
 										:disabled="user.loading"
+										:class="{'tw-button--disabled': user.loading}"
 										class="tw-button"
 										@click="followUser(user.id)"
 									>
diff --git a/src/sites/twitch-twilight/modules/featured_follow_query.gql b/src/sites/twitch-twilight/modules/featured_follow_query.gql
index a5781648..39b689b2 100644
--- a/src/sites/twitch-twilight/modules/featured_follow_query.gql
+++ b/src/sites/twitch-twilight/modules/featured_follow_query.gql
@@ -3,7 +3,7 @@ query($logins: [String!]) {
         id
 		login
         displayName
-        profileImageURL(width: 70)
+        profileImageURL(width: 50)
         self {
             follower {
                 disableNotifications
diff --git a/src/sites/twitch-twilight/modules/following_link.off b/src/sites/twitch-twilight/modules/following_link.off
index c710f89d..8ced3f3f 100644
--- a/src/sites/twitch-twilight/modules/following_link.off
+++ b/src/sites/twitch-twilight/modules/following_link.off
@@ -25,7 +25,7 @@ export default class FollowingText extends SiteModule {
 			currentUser {
 				followedLiveUsers {
 					nodes {
-						profileImageURL(width: 70)
+						profileImageURL(width: 50)
 						stream {
 							type
 							createdAt
diff --git a/src/sites/twitch-twilight/styles/chat.scss b/src/sites/twitch-twilight/styles/chat.scss
index 729ab916..6724f0af 100644
--- a/src/sites/twitch-twilight/styles/chat.scss
+++ b/src/sites/twitch-twilight/styles/chat.scss
@@ -11,6 +11,11 @@
 	will-change: opacity;
 }
 
+.user-notice-line.tw-mg-y-05 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+
 .autocomplete-balloon {
     .autocomplete-balloon__item {
         > .tw-flex {
diff --git a/src/sites/twitch-twilight/styles/theme.scss b/src/sites/twitch-twilight/styles/theme.scss
index 3d522e37..6f66fe16 100644
--- a/src/sites/twitch-twilight/styles/theme.scss
+++ b/src/sites/twitch-twilight/styles/theme.scss
@@ -61,6 +61,9 @@
 	--ffz-color-57: rgba(204,204,204,0.5);
 	--ffz-color-58: hsla(0, 0%, 100%, 0.6);
 	--ffz-color-59: #6a6a6a;
+	--ffz-color-60: hsla(260, 8%, 55%, 0.5);
+	--ffz-color-61: rgba(75, 54, 124, 0.5);
+	--ffz-color-62: #cd201f;
 }
 
 .tw-theme--ffz, .tw-theme--ffz .tw-theme--dark, .tw-theme--ffz.tw-theme--dark {
@@ -108,7 +111,7 @@
 	}
 	.tw-badge {
 		background-color: var(--ffz-color-26);
-		color: var(--ffz-color-4);
+		color: var(--ffz-color-23);
 	}
 	.tw-badge--alt {
 		background-color: var(--ffz-color-28);
@@ -173,14 +176,12 @@
 			border-color: var(--ffz-color-29);
 			background-color: var(--ffz-color-5);
 			color: var(--ffz-color-4);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 		&:active {
 			border-color: var(--ffz-color-5);
 			background-color: var(--ffz-color-3);
 			color: var(--ffz-color-4);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 	}
@@ -194,17 +195,15 @@
 			color: var(--ffz-color-10);
 		}
 		&:focus {
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
-			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			border-color: var(--ffz-color-11);
 			background-color: var(--ffz-color-9);
 			color: var(--ffz-color-10);
+			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 		&:active {
 			border-color: var(--ffz-color-13);
 			background-color: var(--ffz-color-12);
 			color: var(--ffz-color-10);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 	}
@@ -259,15 +258,13 @@
 			color: var(--ffz-color-10);
 		}
 		&:focus {
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
-			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			border-color: var(--ffz-color-11);
+			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 		&:active {
 			border-color: var(--ffz-color-13);
 			background-color: var(--ffz-color-12);
 			color: var(--ffz-color-10);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 		&.tw-button--disabled {
@@ -294,14 +291,12 @@
 			border-color: var(--ffz-color-22);
 			background-color: var(--ffz-color-6);
 			color: var(--ffz-color-4);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-22);
 			box-shadow: 0 0 6px 0 var(--ffz-color-22);
 		}
 		&:active {
 			border-color: var(--ffz-color-58);
 			background-color: transparent;
 			color: var(--ffz-color-4);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-22);
 			box-shadow: 0 0 6px 0 var(--ffz-color-22);
 		}
 		&.tw-button--hollow, &.tw-button--state-loading, &.tw-button--state-success {
@@ -358,11 +353,10 @@
 			color: var(--ffz-color-10);
 		}
 		&:focus {
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
-			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			border-color: var(--ffz-color-11);
 			background-color: var(--ffz-color-9);
 			color: var(--ffz-color-10);
+			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 		&:active {
 			border-color: var(--ffz-color-13);
@@ -404,14 +398,12 @@
 			border-color: var(--ffz-color-29);
 			background-color: var(--ffz-color-5);
 			color: var(--ffz-color-4);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 		&:active {
 			border-color: var(--ffz-color-5);
 			background-color: var(--ffz-color-3);
 			color: var(--ffz-color-4);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 	}
@@ -425,17 +417,15 @@
 			color: var(--ffz-color-10);
 		}
 		&:focus {
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
-			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			border-color: var(--ffz-color-11);
 			background-color: var(--ffz-color-9);
 			color: var(--ffz-color-10);
+			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 		&:active {
 			border-color: var(--ffz-color-13);
 			background-color: var(--ffz-color-12);
 			color: var(--ffz-color-10);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 	}
@@ -482,14 +472,12 @@
 			border-color: var(--ffz-color-22);
 			background-color: var(--ffz-color-6);
 			color: var(--ffz-color-4);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-22);
 			box-shadow: 0 0 6px 0 var(--ffz-color-22);
 		}
 		&:active {
 			border-color: var(--ffz-color-58);
 			background-color: transparent;
 			color: var(--ffz-color-4);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-22);
 			box-shadow: 0 0 6px 0 var(--ffz-color-22);
 		}
 		&.tw-button-icon--hollow {
@@ -535,7 +523,6 @@
 		&:checked + .tw-checkbox__label {
 			&:before {
 				background-color: var(--ffz-color-5);
-				-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-5);
 				box-shadow: inset 0 0 0 1px var(--ffz-color-5);
 			}
 			&:after {
@@ -544,19 +531,16 @@
 			}
 		}
 		&:focus + .tw-checkbox__label:before {
-			-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-5), 0 0 6px -2px var(--ffz-color-5);
 			box-shadow: inset 0 0 0 1px var(--ffz-color-5), 0 0 6px -2px var(--ffz-color-5);
 		}
 	}
 	.tw-checkbox__label {
 		color: var(--ffz-color-23);
 		&:before {
-			-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-26), 0 0 0 transparent;
 			box-shadow: inset 0 0 0 1px var(--ffz-color-26), 0 0 0 transparent;
 		}
 	}
 	.tw-checkbox--error .tw-checkbox__label:before {
-		-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-14), 0 0 0 transparent;
 		box-shadow: inset 0 0 0 1px var(--ffz-color-14), 0 0 0 transparent;
 	}
 	.tw-drop-zone {
@@ -577,7 +561,6 @@
 		}
 		&:focus {
 			border-color: var(--ffz-color-5);
-			-webkit-box-shadow: 0 0 6px -2px var(--ffz-color-5);
 			box-shadow: 0 0 6px -2px var(--ffz-color-5);
 		}
 	}
@@ -604,7 +587,6 @@
 			color: var(--ffz-color-4);
 		}
 		&:focus {
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5), inset 0 0 0 1px var(--ffz-color-5);
 			box-shadow: 0 0 6px 0 var(--ffz-color-5), inset 0 0 0 1px var(--ffz-color-5);
 		}
 	}
@@ -622,7 +604,6 @@
 			color: inherit;
 		}
 		&:focus {
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5), inset 0 0 0 1px var(--ffz-color-5);
 			box-shadow: 0 0 6px 0 var(--ffz-color-5), inset 0 0 0 1px var(--ffz-color-5);
 		}
 		&.tw-interactable--selected {
@@ -679,6 +660,9 @@
 		&:visited {
 			color: inherit;
 		}
+		&:hover {
+			color: var(--ffz-color-2);
+		}
 	}
 	.tw-form-group__label {
 		color: var(--ffz-color-23);
@@ -727,13 +711,11 @@
 		&:focus {
 			border-color: var(--ffz-color-29);
 			background-color: var(--ffz-color-5);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 		&:active {
 			border-color: var(--ffz-color-5);
 			background-color: var(--ffz-color-3);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 		&:disabled {
@@ -754,7 +736,7 @@
 	}
 	.tw-pill {
 		background-color: var(--ffz-color-26);
-		color: var(--ffz-color-4);
+		color: var(--ffz-color-23);
 	}
 	.tw-pill--alt {
 		background-color: var(--ffz-color-28);
@@ -770,6 +752,7 @@
 	}
 	.tw-pill--warn {
 		background-color: var(--ffz-color-39);
+		color: var(--ffz-color-33);
 	}
 	.tw-pill--alert {
 		background-color: var(--ffz-color-14);
@@ -782,7 +765,6 @@
 	}
 	.tw-pill--overlay {
 		background-color: var(--ffz-color-25);
-		-webkit-box-shadow: 0 0 0 1px var(--ffz-color-34);
 		box-shadow: 0 0 0 1px var(--ffz-color-34);
 	}
 	.tw-progress-bar {
@@ -812,14 +794,12 @@
 			background-color: var(--ffz-color-5);
 		}
 		&:focus + .tw-radio__label:before {
-			-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-5), 0 0 6px -2px var(--ffz-color-5);
 			box-shadow: inset 0 0 0 1px var(--ffz-color-5), 0 0 6px -2px var(--ffz-color-5);
 		}
 	}
 	.tw-radio__label {
 		color: var(--ffz-color-23);
 		&:before {
-			-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-26), 0 0 0 transparent;
 			box-shadow: inset 0 0 0 1px var(--ffz-color-26), 0 0 0 transparent;
 			background-color: var(--ffz-color-27);
 		}
@@ -828,13 +808,37 @@
 		}
 	}
 	.tw-radio--error .tw-radio__label:before {
-		-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-14), 0 0 0 transparent;
 		box-shadow: inset 0 0 0 1px var(--ffz-color-14), 0 0 0 transparent;
 	}
+	.tw-image-selector__label {
+		border-color: var(--ffz-color-26);
+		&:hover {
+			border-color: var(--ffz-color-3);
+		}
+	}
+	.tw-image-selector__input {
+		&:focus + .tw-image-selector__label {
+			border-color: var(--ffz-color-3);
+			box-shadow: 0 0 2px var(--ffz-color-3);
+		}
+		&:checked {
+			+ .tw-image-selector__label {
+				border-color: var(--ffz-color-3);
+				background-color: var(--ffz-color-4);
+				box-shadow: inset 0 0 0 2px var(--ffz-color-3);
+			}
+			&:focus + .tw-image-selector__label {
+				box-shadow: 0 0 2px var(--ffz-color-3), inset 0 0 0 2px var(--ffz-color-3);
+			}
+		}
+	}
+	.tw-image-selector--error .tw-image-selector__input + .tw-image-selector__label {
+		border-color: var(--ffz-color-14);
+		box-shadow: inset 0 0 0 2px var(--ffz-color-14);
+	}
 	.tw-toggle__input {
 		&:focus + .tw-toggle__button {
 			background-color: var(--ffz-color-8);
-			-webkit-box-shadow: 0 0 6px -2px var(--ffz-color-5), inset 0 0 0 1px var(--ffz-color-5);
 			box-shadow: 0 0 6px -2px var(--ffz-color-5), inset 0 0 0 1px var(--ffz-color-5);
 		}
 		&:checked + .tw-toggle__button {
@@ -855,7 +859,6 @@
 		}
 	}
 	.tw-toggle--error .tw-toggle__button {
-		-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-14), 0 0 0 transparent;
 		box-shadow: inset 0 0 0 1px var(--ffz-color-14), 0 0 0 transparent;
 	}
 	.tw-range {
@@ -865,20 +868,11 @@
 			background-color: transparent;
 			box-shadow: none;
 		}
-		&::-moz-range-track, &::-ms-track {
+		&::-moz-range-track, &::-ms-track, &::-webkit-slider-runnable-track {
 			background-color: var(--ffz-color-26);
 			box-shadow: inset 0 0 0 1px var(--ffz-color-26);
 		}
-		&::-webkit-slider-runnable-track {
-			background-color: var(--ffz-color-26);
-			-webkit-box-shadow: var(--ffz-color-26) 0 0 0 1px inset;
-			box-shadow: inset 0 0 0 1px var(--ffz-color-26);
-		}
-		&::-moz-range-thumb, &::-ms-thumb {
-			box-shadow: inset 0 0 0 1px var(--ffz-color-26);
-		}
-		&::-webkit-slider-thumb {
-			-webkit-box-shadow: var(--ffz-color-26) 0 0 0 1px inset;
+		&::-moz-range-thumb, &::-ms-thumb, &::-webkit-slider-thumb {
 			box-shadow: inset 0 0 0 1px var(--ffz-color-26);
 		}
 		&::-ms-fill-lower, &::-ms-fill-upper {
@@ -886,21 +880,13 @@
 			box-shadow: inset 0 0 0 1px var(--ffz-color-26);
 		}
 		&:focus {
-			&::-moz-range-thumb, &::-ms-thumb {
-				box-shadow: inset 0 0 0 1px var(--ffz-color-5), 0 0 6px -2px var(--ffz-color-5);
-			}
-			&::-webkit-slider-thumb {
-				-webkit-box-shadow: var(--ffz-color-5) 0 0 0 1px inset, 0 0 6px -2px var(--ffz-color-5);
+			&::-moz-range-thumb, &::-ms-thumb, &::-webkit-slider-thumb {
 				box-shadow: inset 0 0 0 1px var(--ffz-color-5), 0 0 6px -2px var(--ffz-color-5);
 			}
 		}
 	}
 	.tw-range--error {
-		&::-moz-range-thumb, &::-ms-thumb {
-			box-shadow: inset 0 0 0 1px var(--ffz-color-14);
-		}
-		&::-webkit-slider-thumb {
-			-webkit-box-shadow: var(--ffz-color-14) 0 0 0 1px inset;
+		&::-moz-range-thumb, &::-ms-thumb, &::-webkit-slider-thumb {
 			box-shadow: inset 0 0 0 1px var(--ffz-color-14);
 		}
 	}
@@ -914,30 +900,26 @@
 			color: var(--ffz-color-10);
 		}
 		&:focus {
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
-			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			border-color: var(--ffz-color-11);
 			background-color: var(--ffz-color-9);
 			color: var(--ffz-color-10);
+			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 		&:active {
 			border-color: var(--ffz-color-13);
 			background-color: var(--ffz-color-12);
 			color: var(--ffz-color-10);
-			-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			box-shadow: 0 0 6px 0 var(--ffz-color-5);
 		}
 		input {
 			&[type=checkbox]:focus + .tw-segmented-button-option__label, &[type=radio]:focus + .tw-segmented-button-option__label {
 				background-color: var(--ffz-color-9);
 				color: var(--ffz-color-10);
-				-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 				box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			}
 			&[type=checkbox]:active + .tw-segmented-button-option__label, &[type=radio]:active + .tw-segmented-button-option__label {
 				background-color: var(--ffz-color-12);
 				color: var(--ffz-color-10);
-				-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 				box-shadow: 0 0 6px 0 var(--ffz-color-5);
 			}
 			&[type=checkbox]:checked + .tw-segmented-button-option__label, &[type=radio]:checked + .tw-segmented-button-option__label {
@@ -948,13 +930,11 @@
 				&:focus + .tw-segmented-button-option__label {
 					background-color: var(--ffz-color-9);
 					color: var(--ffz-color-10);
-					-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 					box-shadow: 0 0 6px 0 var(--ffz-color-5);
 				}
 				&:active + .tw-segmented-button-option__label {
 					background-color: var(--ffz-color-12);
 					color: var(--ffz-color-10);
-					-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
 					box-shadow: 0 0 6px 0 var(--ffz-color-5);
 				}
 				&:checked {
@@ -979,7 +959,6 @@
 		}
 		&:focus {
 			border-color: var(--ffz-color-5);
-			-webkit-box-shadow: 0 0 6px -2px var(--ffz-color-5);
 			box-shadow: 0 0 6px -2px var(--ffz-color-5);
 		}
 	}
@@ -1000,16 +979,13 @@
 			color: var(--ffz-color-28);
 		}
 		a:hover, button:hover {
-			-webkit-box-shadow: 0 -1px 0 var(--ffz-color-3) inset;
 			box-shadow: inset 0 -1px 0 var(--ffz-color-3);
 		}
 		a:focus, button:focus {
-			-webkit-box-shadow: 0 -2px 0 var(--ffz-color-3) inset, 0 4px 6px -4px var(--ffz-color-5);
 			box-shadow: inset 0 -2px 0 var(--ffz-color-3), 0 4px 6px -4px var(--ffz-color-5);
 		}
 		a.active, button.active {
 			color: var(--ffz-color-23);
-			-webkit-box-shadow: 0 -1px 0 var(--ffz-color-3) inset;
 			box-shadow: inset 0 -1px 0 var(--ffz-color-3);
 		}
 	}
@@ -1019,7 +995,6 @@
 		}
 	}
 	.tw-tab-nav {
-		-webkit-box-shadow: inset 0 -1px 0 var(--ffz-color-26);
 		box-shadow: inset 0 -1px 0 var(--ffz-color-26);
 	}
 	.tw-textarea {
@@ -1031,7 +1006,6 @@
 		}
 		&:focus {
 			border-color: var(--ffz-color-5);
-			-webkit-box-shadow: 0 0 6px -2px var(--ffz-color-5);
 			box-shadow: 0 0 6px -2px var(--ffz-color-5);
 		}
 	}
@@ -1082,40 +1056,45 @@
 	.passport-modal {
 		background-color: var(--ffz-color-4);
 	}
-	.language-selector__list--border-right {
-		border-right-color: var(--ffz-color-20);
-	}
-	.persistent-notification__read {
-		background-color: var(--ffz-color-0);
-	}
-	.persistent-notification__unread {
-		background-color: var(--ffz-color-27);
-	}
-	.onsite-notification-toast {
-		-webkit-box-shadow: 0 0 6px -2px var(--ffz-color-5);
-		box-shadow: 0 0 6px -2px var(--ffz-color-5);
-	}
-	.onsite-notification-toast--hover, .onsite-notification-toast:hover {
-		-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-5);
-		box-shadow: 0 0 6px 0 var(--ffz-color-5);
-	}
-	.search-live-result-card__info {
-		color: var(--ffz-color-1);
-	}
-	.search-result-section__titlesep {
-		color: var(--ffz-color-7);
-		background-color: var(--ffz-color-21);
-	}
-	.search-results-panel__highlight-link {
-		color: var(--ffz-color-2);
-	}
-	.search-results-panel__link {
+	.follow-btn__dropdown-toggle {
+		background-color: var(--ffz-color-49);
 		color: var(--ffz-color-7);
 	}
-	.search-results-panel__card:hover {
-		.search-results-panel__highlight-link, .search-results-panel__link {
-			color: var(--ffz-color-23);
-		}
+	.esports-square__svg--background {
+		fill: var(--ffz-color-0);
+	}
+	.esports-square__svg--border {
+		stroke: var(--ffz-color-20);
+	}
+	.esports-square__svg--border__brand {
+		stroke: var(--ffz-color-3);
+	}
+	.esports-square__svg--border__none {
+		stroke: var(--ffz-color-0);
+	}
+	.esports-hexagon__svg--fill {
+		fill: var(--ffz-color-3);
+		stroke: var(--ffz-color-3);
+	}
+	.esports-hexagon__svg--fill-emote-locked {
+		fill: var(--ffz-color-27);
+		stroke: var(--ffz-color-27);
+	}
+	.esports-hexagon__svg--fill-coming-soon {
+		fill: var(--ffz-color-29);
+		stroke: var(--ffz-color-29);
+	}
+	.esports-hexagon__svg--background {
+		fill: var(--ffz-color-21);
+	}
+	.esports-hexagon__svg--background-coming-soon {
+		fill: var(--ffz-color-27);
+	}
+	.esports-hexagon__svg--question-mark {
+		fill: var(--ffz-color-1);
+	}
+	.non-subbed-top-page__prime-icon {
+		color: var(--ffz-color-32);
 	}
 	.blue-bar {
 		background-color: var(--ffz-color-32);
@@ -1126,31 +1105,16 @@
 			color: var(--ffz-color-2);
 		}
 	}
-	.top-nav__home-link {
-		color: var(--ffz-color-4);
-		&:hover {
-			color: var(--ffz-color-4);
+	.channel-header__subscription-balloon-options {
+		.subscription-balloon-options__prime-crown {
+			color: var(--ffz-color-32);
+		}
+		.subscription-balloon-options__subbed-message, .subscription-balloon-options__subbed-star {
+			color: var(--ffz-color-18);
 		}
 	}
-	.top-nav__menu {
-		background-color: var(--ffz-color-26);
-	}
-	.top-nav__nav-link {
-		&.active, &:hover {
-			color: var(--ffz-color-4);
-		}
-	}
-	.top-nav__beta-badge {
-		background-color: var(--ffz-color-14);
-		color: var(--ffz-color-4);
-		&:hover {
-			background-color: var(--ffz-color-15);
-			color: var(--ffz-color-4);
-		}
-	}
-	.follow-btn__dropdown-toggle {
-		background-color: var(--ffz-color-49);
-		color: var(--ffz-color-7);
+	.balloon-subscribed-user__gift-upgrade-info {
+		color: var(--ffz-color-18);
 	}
 	.autocomplete-balloon__item {
 		color: var(--ffz-color-2);
@@ -1180,7 +1144,6 @@
 	}
 	.thread-header__title-bar-container {
 		background-color: var(--ffz-color-21);
-		-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-20), 0 2px 0 var(--ffz-color-47);
 		box-shadow: inset 0 0 0 1px var(--ffz-color-20), 0 2px 0 var(--ffz-color-47);
 	}
 	.thread-header__title-bar-container--focused {
@@ -1188,7 +1151,9 @@
 	}
 	.thread-header__title-bar-container--highlighted {
 		background-color: var(--ffz-color-3);
-		color: var(--ffz-color-4);
+	}
+	.thread-header__click-area:focus .thread-header__title-bar-container {
+		background-color: var(--ffz-color-27);
 	}
 	.thread-header__activity-link--highlighted {
 		color: var(--ffz-color-23);
@@ -1196,27 +1161,6 @@
 			color: var(--ffz-color-23);
 		}
 	}
-	.verify-email-banner {
-		background-color: var(--ffz-color-20);
-		&:hover {
-			background-color: var(--ffz-color-0);
-		}
-	}
-	.verify-email-banner__body {
-		color: var(--ffz-color-4);
-	}
-	.verify-email-banner--success {
-		background-color: var(--ffz-color-18);
-		&:hover {
-			background-color: var(--ffz-color-19);
-		}
-	}
-	.verify-email-banner--error {
-		background-color: var(--ffz-color-14);
-		&:hover {
-			background-color: var(--ffz-color-15);
-		}
-	}
 	.right-column__toggle-visibility {
 		background-color: var(--ffz-color-0);
 		color: var(--ffz-color-1);
@@ -1255,17 +1199,6 @@
 		background-color: var(--ffz-color-0);
 		color: var(--ffz-color-1);
 	}
-	.channel-header__subscription-balloon-options {
-		.subscription-balloon-options__prime-crown {
-			color: var(--ffz-color-32);
-		}
-		.subscription-balloon-options__subbed-message, .subscription-balloon-options__subbed-star {
-			color: var(--ffz-color-18);
-		}
-	}
-	.balloon-subscribed-user__gift-upgrade-info {
-		color: var(--ffz-color-18);
-	}
 	.persistent-player__hover-controls {
 		background-color: var(--ffz-color-25);
 	}
@@ -1273,30 +1206,87 @@
 		background-color: var(--ffz-color-20);
 		color: var(--ffz-color-23);
 	}
+	.language-selector__list--border-right {
+		border-right-color: var(--ffz-color-20);
+	}
+	.persistent-notification__read {
+		background-color: var(--ffz-color-0);
+	}
+	.persistent-notification__unread {
+		background-color: var(--ffz-color-27);
+	}
+	.onsite-notification-toast {
+		box-shadow: 0 0 6px -2px var(--ffz-color-5);
+	}
+	.onsite-notification-toast--hover, .onsite-notification-toast:hover {
+		box-shadow: 0 0 6px 0 var(--ffz-color-5);
+	}
+	.search-live-result-card__info {
+		color: var(--ffz-color-1);
+	}
+	.search-result-section__titlesep {
+		color: var(--ffz-color-7);
+		background-color: var(--ffz-color-21);
+	}
+	.search-results-panel__highlight-link {
+		color: var(--ffz-color-2);
+	}
+	.search-results-panel__link {
+		color: var(--ffz-color-7);
+	}
+	.search-results-panel__card:hover {
+		.search-results-panel__highlight-link, .search-results-panel__link {
+			color: var(--ffz-color-23);
+		}
+	}
+	.top-nav__home-link {
+		color: var(--ffz-color-4);
+		&:hover {
+			color: var(--ffz-color-4);
+		}
+	}
+	.top-nav__menu {
+		background-color: var(--ffz-color-26);
+	}
+	.top-nav__nav-link {
+		&.active, &:hover {
+			color: var(--ffz-color-4);
+		}
+	}
+	.top-nav__beta-badge {
+		background-color: var(--ffz-color-14);
+		color: var(--ffz-color-4);
+		&:hover {
+			background-color: var(--ffz-color-15);
+			color: var(--ffz-color-4);
+		}
+	}
+	.verify-email-banner {
+		background-color: var(--ffz-color-20);
+		&:hover {
+			background-color: var(--ffz-color-0);
+		}
+	}
+	.verify-email-banner__body {
+		color: var(--ffz-color-23);
+	}
+	.verify-email-banner--success {
+		background-color: var(--ffz-color-18);
+		&:hover {
+			background-color: var(--ffz-color-19);
+		}
+	}
+	.verify-email-banner--error {
+		background-color: var(--ffz-color-14);
+		&:hover {
+			background-color: var(--ffz-color-15);
+		}
+	}
 	.whispers-list-item:hover {
 		background-color: var(--ffz-color-27);
 	}
-	.recurly-form {
-		.recurly-hosted-field {
-			border-color: var(--ffz-color-26);
-			background-color: var(--ffz-color-27);
-			color: var(--ffz-color-23);
-		}
-		.recurly-hosted-field-focus {
-			border-color: var(--ffz-color-5);
-			-webkit-box-shadow: 0 0 6px -2px var(--ffz-color-5);
-			box-shadow: 0 0 6px -2px var(--ffz-color-5);
-		}
-		.recurly-error {
-			.recurly-hosted-field {
-				border-color: var(--ffz-color-14);
-			}
-			.recurly-hosted-field-focus {
-				border-color: var(--ffz-color-5);
-				-webkit-box-shadow: 0 0 6px -2px var(--ffz-color-5);
-				box-shadow: 0 0 6px -2px var(--ffz-color-5);
-			}
-		}
+	.media-carousel__button--inset, .media-carousel:hover .media-carousel__button {
+		background-color: var(--ffz-color-0);
 	}
 	.footer__link {
 		color: var(--ffz-color-4);
@@ -1316,6 +1306,18 @@
 	.carousel-nav__meta {
 		color: var(--ffz-color-4);
 	}
+	.video-preview-card__video-title {
+		color: var(--ffz-color-1);
+	}
+	.video-preview-card__owner-display-name {
+		color: var(--ffz-color-7);
+		&:hover {
+			color: var(--ffz-color-2);
+		}
+	}
+	.video-preview-card__video-title:hover {
+		color: var(--ffz-color-2);
+	}
 	.live-channel-card__meta {
 		color: var(--ffz-color-7);
 	}
@@ -1334,22 +1336,12 @@
 	.anon-front__social-container {
 		background-color: var(--ffz-color-0);
 	}
-	.follow-game-card__overlay {
-		background-color: var(--ffz-color-25);
-		color: var(--ffz-color-23);
-		&:hover {
-			border-color: var(--ffz-color-3);
-		}
+	.follow-game-card__overlay:hover {
+		border-color: var(--ffz-color-3);
 	}
 	.follow-game-card__overlay--followed {
 		border-color: var(--ffz-color-26);
 	}
-	.top-nav__home-link {
-		color: var(--ffz-color-4);
-	}
-	.top-nav__menu {
-		background-color: var(--ffz-color-26);
-	}
 	.community-selection-page__progress-container {
 		background-color: var(--ffz-color-27);
 	}
@@ -1443,15 +1435,6 @@
 	.chat-card__title {
 		color: var(--ffz-color-1);
 	}
-	.chat-line__purchase {
-		background-color: var(--ffz-color-0);
-	}
-	.chat-line__purchase-loot-drawer {
-		background-color: var(--ffz-color-27);
-	}
-	.chat-line__purchase-reward-text {
-		color: var(--ffz-color-7);
-	}
 	.chat-line__message--mention-sender {
 		background-color: var(--ffz-color-8);
 	}
@@ -1462,16 +1445,7 @@
 	.chat-line__message--special {
 		background-color: var(--ffz-color-27);
 	}
-	.chat-line__moderation, .chat-line__status, .chat-line__mod-icons .mod-icon, .chat-line__bits-charity, .chat-line__raid, .chat-line__ritual, .chat-line__subscribe {
-		color: var(--ffz-color-7);
-	}
-	.chat-line__bits-charity--prime, .chat-line__raid--prime, .chat-line__ritual--prime, .chat-line__subscribe--prime {
-		color: var(--ffz-color-2);
-	}
-	.chat-line__bits-charity--message, .chat-line__raid--message, .chat-line__ritual--message, .chat-line__subscribe--message {
-		color: var(--ffz-color-24);
-	}
-	.chat-line__timestamp {
+	.chat-line__moderation, .chat-line__status, .chat-line__bits-charity, .chat-line__timestamp {
 		color: var(--ffz-color-7);
 	}
 	.pinned-cheer__bounding-box {
@@ -1490,7 +1464,6 @@
 		}
 		&:focus:not([disabled]), &:hover:not([disabled]) {
 			background-color: var(--ffz-color-26);
-			-webkit-box-shadow: 0 1px 5px var(--ffz-color-26);
 			box-shadow: 0 1px 5px var(--ffz-color-26);
 		}
 	}
@@ -1502,11 +1475,9 @@
 		color: var(--ffz-color-7);
 	}
 	.color-chooser--selected {
-		-webkit-box-shadow: 0 0 0 3px var(--ffz-color-26);
 		box-shadow: 0 0 0 3px var(--ffz-color-26);
 	}
 	.color-chooser:hover {
-		-webkit-box-shadow: 0 0 0 3px var(--ffz-color-8);
 		box-shadow: 0 0 0 3px var(--ffz-color-8);
 	}
 	.edit-appearance__badge-chooser--selected {
@@ -1541,7 +1512,7 @@
 	.chat-viewers-list__button {
 		color: var(--ffz-color-2);
 	}
-	.chat-viewers__pane, .chat-viewers__old-pane {
+	.chat-viewers__pane {
 		background-color: var(--ffz-color-27);
 		color: var(--ffz-color-24);
 	}
@@ -1549,94 +1520,6 @@
 		border-bottom-color: var(--ffz-color-20);
 		background-color: var(--ffz-color-21);
 	}
-	.social-button__link--copy:after {
-		color: var(--ffz-color-3);
-	}
-	.social-button__link--facebook:after {
-		color: var(--ffz-color-50);
-	}
-	.social-button__link--vkontakte:after {
-		color: var(--ffz-color-51);
-	}
-	.social-button__link--twitter:after {
-		color: var(--ffz-color-52);
-	}
-	.social-button__link--reddit:after {
-		color: var(--ffz-color-53);
-	}
-	.social-button__icon--reddit {
-		background-color: var(--ffz-color-53);
-	}
-	.social-button__icon--twitter {
-		background-color: var(--ffz-color-52);
-	}
-	.social-button__icon--vkontakte {
-		background-color: var(--ffz-color-51);
-	}
-	.social-button__icon--facebook {
-		background-color: var(--ffz-color-50);
-	}
-	.social-button__icon--copy {
-		background-color: var(--ffz-color-3);
-	}
-	.clips-preview-card__boxart {
-		border-color: var(--ffz-color-0);
-	}
-	.clips-preview-card__title {
-		color: var(--ffz-color-1);
-	}
-	.clips-preview-card__display-name {
-		color: var(--ffz-color-7);
-	}
-	.esports-notification-card__circle--svg {
-		fill: var(--ffz-color-0);
-	}
-	.esports-hexagon__svg--fill {
-		fill: var(--ffz-color-3);
-		stroke: var(--ffz-color-3);
-	}
-	.esports-hexagon__svg--fill-emote-locked {
-		fill: var(--ffz-color-27);
-		stroke: var(--ffz-color-27);
-	}
-	.esports-hexagon__svg--fill-coming-soon {
-		fill: var(--ffz-color-29);
-		stroke: var(--ffz-color-29);
-	}
-	.esports-hexagon__svg--background {
-		fill: var(--ffz-color-21);
-	}
-	.esports-hexagon__svg--background-coming-soon {
-		fill: var(--ffz-color-27);
-	}
-	.esports-hexagon__svg--question-mark {
-		fill: var(--ffz-color-1);
-	}
-	.esports-ftue__bordered {
-		border-color: var(--ffz-color-3) !important;
-	}
-	.esports-milestone-balloon__redeemed {
-		color: var(--ffz-color-18);
-	}
-	.esports-progress-bar__circle {
-		fill: var(--ffz-color-21);
-		stroke: var(--ffz-color-29);
-	}
-	.esports-progress-bar__circle--bit {
-		fill: var(--ffz-color-5);
-	}
-	.progress-cicle__text {
-		fill: var(--ffz-color-1);
-	}
-	.media-carousel__button--inset, .media-carousel:hover .media-carousel__button {
-		background-color: var(--ffz-color-0);
-	}
-	.commerce-content {
-		background-color: var(--ffz-color-21);
-	}
-	.fuel-bar {
-		background-color: var(--ffz-color-0);
-	}
 	.active-room-button__states {
 		color: var(--ffz-color-7);
 	}
@@ -1697,6 +1580,48 @@
 	.room-picker__label--active-main:after {
 		border-left-color: var(--ffz-color-3);
 	}
+	.social-button__link--copy:after {
+		color: var(--ffz-color-3);
+	}
+	.social-button__link--facebook:after {
+		color: var(--ffz-color-50);
+	}
+	.social-button__link--vkontakte:after {
+		color: var(--ffz-color-51);
+	}
+	.social-button__link--twitter:after {
+		color: var(--ffz-color-52);
+	}
+	.social-button__link--reddit:after {
+		color: var(--ffz-color-53);
+	}
+	.social-button__icon--reddit {
+		background-color: var(--ffz-color-53);
+	}
+	.social-button__icon--twitter {
+		background-color: var(--ffz-color-52);
+	}
+	.social-button__icon--vkontakte {
+		background-color: var(--ffz-color-51);
+	}
+	.social-button__icon--facebook {
+		background-color: var(--ffz-color-50);
+	}
+	.social-button__icon--copy {
+		background-color: var(--ffz-color-3);
+	}
+	.clips-preview-card__boxart {
+		border-color: var(--ffz-color-0);
+	}
+	.clips-preview-card__title {
+		color: var(--ffz-color-1);
+	}
+	.clips-preview-card__display-name {
+		color: var(--ffz-color-7);
+	}
+	.esports-notification-card__circle--svg {
+		fill: var(--ffz-color-0);
+	}
 	.embed-card__overlay {
 		background-color: var(--ffz-color-25);
 		color: var(--ffz-color-23);
@@ -1704,6 +1629,46 @@
 			color: var(--ffz-color-1);
 		}
 	}
+	.t-extension-panel__top-controls {
+		color: var(--ffz-color-7);
+	}
+	.esports-ftue__bordered {
+		border-color: var(--ffz-color-20);
+	}
+	.esports-leaderboard-self-row {
+		background-color: var(--ffz-color-20);
+	}
+	.esports-milestone-balloon__redeemed {
+		color: var(--ffz-color-18);
+	}
+	.esports-progress-bar__circle {
+		fill: var(--ffz-color-21);
+		stroke: var(--ffz-color-29);
+	}
+	.esports-progress-bar__circle--bit {
+		fill: var(--ffz-color-5);
+	}
+	.esports-progress-bar__threshold-stem--locked {
+		border-color: var(--ffz-color-20) !important;
+	}
+	.esports-progress-bar__threshold-stem--unlocked {
+		border-color: var(--ffz-color-3) !important;
+	}
+	.progress-circle__trough {
+		stroke: var(--ffz-color-56);
+	}
+	.progress-circle__meter--inner, .progress-circle__trough--inner {
+		stroke: var(--ffz-color-8);
+	}
+	.progress-circle__text {
+		fill: var(--ffz-color-1);
+	}
+	.commerce-content {
+		background-color: var(--ffz-color-21);
+	}
+	.fuel-bar {
+		background-color: var(--ffz-color-0);
+	}
 	.drops-campaign-details__drops-success {
 		color: var(--ffz-color-18);
 	}
@@ -1713,25 +1678,10 @@
 	.channel-info-bar__action-container {
 		border-top-color: var(--ffz-color-20);
 	}
-	.t-extension-panel__top-controls {
-		color: var(--ffz-color-7);
-	}
 	.channel-page__data-error-notice {
 		color: var(--ffz-color-14);
 		border-color: var(--ffz-color-14) !important;
 	}
-	.video-preview-card__video-title {
-		color: var(--ffz-color-1);
-	}
-	.video-preview-card__owner-display-name {
-		color: var(--ffz-color-7);
-		&:hover {
-			color: var(--ffz-color-2);
-		}
-	}
-	.video-preview-card__video-title:hover {
-		color: var(--ffz-color-2);
-	}
 	.video-carousel:hover .video-carousel__button {
 		background-color: var(--ffz-color-0);
 	}
@@ -1826,7 +1776,10 @@
 			color: var(--ffz-color-2);
 		}
 	}
-	.recurly-credit-card {
+	.drops-list__count {
+		background-color: var(--ffz-color-18);
+	}
+	.recurly-form {
 		.recurly-hosted-field {
 			border-color: var(--ffz-color-26);
 			background-color: var(--ffz-color-27);
@@ -1834,7 +1787,6 @@
 		}
 		.recurly-hosted-field-focus {
 			border-color: var(--ffz-color-5);
-			-webkit-box-shadow: 0 0 6px -2px var(--ffz-color-5);
 			box-shadow: 0 0 6px -2px var(--ffz-color-5);
 		}
 		.recurly-error {
@@ -1843,19 +1795,69 @@
 			}
 			.recurly-hosted-field-focus {
 				border-color: var(--ffz-color-5);
-				-webkit-box-shadow: 0 0 6px -2px var(--ffz-color-5);
 				box-shadow: 0 0 6px -2px var(--ffz-color-5);
 			}
 		}
 	}
-	.ticket-description__broadcaster-info {
-		background-color: var(--ffz-color-25);
+	.pika-single {
+		background-color: var(--ffz-color-0);
+		color: var(--ffz-color-1);
 	}
-	.search-card-row:hover .search-card-row__link {
-		color: var(--ffz-color-4);
+	.pika-label {
+		background-color: var(--ffz-color-0);
+		color: var(--ffz-color-1);
+		&:active, &:focus, &:hover {
+			background-color: var(--ffz-color-9);
+		}
 	}
-	.vod-message__timestamp {
-		color: var(--ffz-color-7);
+	.pika-next {
+		&:active, &:focus, &:hover {
+			background-color: var(--ffz-color-9);
+		}
+	}
+	.pika-prev {
+		&:active, &:focus, &:hover {
+			background-color: var(--ffz-color-9);
+		}
+	}
+	.is-rtl .pika-next:after, .pika-prev:after {
+		border-right-color: var(--ffz-color-2);
+	}
+	.is-rtl .pika-prev:after, .pika-next:after {
+		border-left-color: var(--ffz-color-2);
+	}
+	.pika-button {
+		background-color: var(--ffz-color-0);
+		color: var(--ffz-color-1);
+	}
+	.is-today .pika-button {
+		box-shadow: inset 0 0 0 2px var(--ffz-color-20);
+	}
+	.is-disabled .pika-button, .is-outside-current-month .pika-button {
+		color: var(--ffz-color-60);
+	}
+	.pika-button:hover {
+		background-color: var(--ffz-color-9);
+		color: var(--ffz-color-10);
+	}
+	.is-inrange .pika-button {
+		background-color: var(--ffz-color-26);
+		color: currentColor;
+		&:hover {
+			background-color: var(--ffz-color-61);
+		}
+	}
+	.team-invitations-item:hover, .team-manager-item:hover, .team-memberships-item:hover {
+		background-color: var(--ffz-color-27);
+	}
+	.connection-image--facebook {
+		background-color: var(--ffz-color-50);
+	}
+	.connection-image--twitter {
+		background-color: var(--ffz-color-52);
+	}
+	.connection-image--youtube {
+		background-color: var(--ffz-color-62);
 	}
 	.video-chat__message-author {
 		color: var(--ffz-color-2);
@@ -1879,29 +1881,17 @@
 		color: var(--ffz-color-2);
 	}
 	.vod-message__reply {
-		-webkit-box-shadow: inset 3px 0 0 0 var(--ffz-color-56);
 		box-shadow: inset 3px 0 0 0 var(--ffz-color-56);
 	}
 	.vod-message {
 		&.vod-message--focused {
-			-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-5);
 			box-shadow: inset 0 0 0 1px var(--ffz-color-5);
 			background-color: var(--ffz-color-20);
 		}
 		&:hover {
 			background-color: var(--ffz-color-20);
 		}
-		&.vod-message--focused .vod-message__timestamp, &:hover .vod-message__timestamp {
-			background-color: var(--ffz-color-3);
-		}
-		&.vod-message--focused .vod-message__timestamp, &:hover .vod-message__timestamp {
-			color: var(--ffz-color-4);
-		}
-		&.vod-message--focused .vod-message__timestamp:hover, &:hover .vod-message__timestamp:hover {
-			background-color: var(--ffz-color-5);
-		}
 		&.vod-message--focused .vod-message__reply, &:hover .vod-message__reply {
-			-webkit-box-shadow: inset 3px 0 0 0 var(--ffz-color-16);
 			box-shadow: inset 3px 0 0 0 var(--ffz-color-16);
 		}
 	}
@@ -1919,11 +1909,9 @@
 		}
 	}
 	.video-chat__input {
-		-webkit-box-shadow: inset 0 1px 0 0 var(--ffz-color-20);
 		box-shadow: inset 0 1px 0 0 var(--ffz-color-20);
 	}
 	.video-chat__header {
-		-webkit-box-shadow: inset 0 -1px 0 0 var(--ffz-color-20);
 		box-shadow: inset 0 -1px 0 0 var(--ffz-color-20);
 	}
 	.video-delete-modal__error-container {
@@ -2099,23 +2087,18 @@
 		border-color: var(--ffz-color-1) !important;
 	}
 	.tw-elevation-1 {
-		-webkit-box-shadow: 0 2px 4px -1px var(--ffz-color-36), 0 2px 2px -2px var(--ffz-color-37), 0 1px 4px 0 var(--ffz-color-38) !important;
 		box-shadow: 0 2px 4px -1px var(--ffz-color-36), 0 2px 2px -2px var(--ffz-color-37), 0 1px 4px 0 var(--ffz-color-38) !important;
 	}
 	.tw-elevation-2 {
-		-webkit-box-shadow: 0 4px 6px -2px var(--ffz-color-36), 0 3px 4px -2px var(--ffz-color-37), 0 1px 8px 0 var(--ffz-color-38) !important;
 		box-shadow: 0 4px 6px -2px var(--ffz-color-36), 0 3px 4px -2px var(--ffz-color-37), 0 1px 8px 0 var(--ffz-color-38) !important;
 	}
 	.tw-elevation-3 {
-		-webkit-box-shadow: 0 6px 10px 0 var(--ffz-color-36), 0 1px 8px -3px var(--ffz-color-37), 0 2px 16px 0 var(--ffz-color-38) !important;
 		box-shadow: 0 6px 10px 0 var(--ffz-color-36), 0 1px 8px -3px var(--ffz-color-37), 0 2px 16px 0 var(--ffz-color-38) !important;
 	}
 	.tw-elevation-4 {
-		-webkit-box-shadow: 0 10px 14px 4px var(--ffz-color-36), 0 6px 14px -6px var(--ffz-color-37), 0 4px 24px 0 var(--ffz-color-38) !important;
 		box-shadow: 0 10px 14px 4px var(--ffz-color-36), 0 6px 14px -6px var(--ffz-color-37), 0 4px 24px 0 var(--ffz-color-38) !important;
 	}
 	.tw-elevation-5 {
-		-webkit-box-shadow: 0 14px 20px 8px var(--ffz-color-36), 0 10px 22px -8px var(--ffz-color-37), 0 8px 38px 0 var(--ffz-color-38) !important;
 		box-shadow: 0 14px 20px 8px var(--ffz-color-36), 0 10px 22px -8px var(--ffz-color-37), 0 8px 38px 0 var(--ffz-color-38) !important;
 	}
 	.twilight-root {
@@ -2159,7 +2142,6 @@
 	}
 	.ach-col::-webkit-scrollbar-thumb {
 		background-color: var(--ffz-color-27);
-		-webkit-box-shadow: inset 0 0 1px var(--ffz-color-34);
 		box-shadow: inset 0 0 1px var(--ffz-color-34);
 	}
 	.ach-sb {
@@ -2168,26 +2150,38 @@
 	.ach-sb__text {
 		color: var(--ffz-color-1);
 	}
+	.bounty-item {
+		background-color: var(--ffz-color-0);
+	}
+	.bounty-item__amount {
+		color: var(--ffz-color-1);
+	}
 	.bb-col::-webkit-scrollbar-thumb {
 		background-color: var(--ffz-color-27);
-		-webkit-box-shadow: inset 0 0 1px var(--ffz-color-34);
 		box-shadow: inset 0 0 1px var(--ffz-color-34);
 	}
 	.top-stats-tab {
-		color: "color-text-tab";
+		color: var(--ffz-color-28);
 		&:hover {
-			-webkit-box-shadow: 0 -1px 0 var(--ffz-color-3) inset;
-			box-shadow: inset 0 -1px 0 var(--ffz-color-3);
-		}
-		&:focus {
-			-webkit-box-shadow: 0 -2px 0 var(--ffz-color-3) inset, 0 4px 6px -4px var(--ffz-color-5);
 			box-shadow: inset 0 -2px 0 var(--ffz-color-3), 0 4px 6px -4px var(--ffz-color-5);
+			background-color: var(--ffz-color-21);
+		}
+		&:not(:last-child) {
+			border-right-color: var(--ffz-color-20);
 		}
 	}
 	.top-stats-tab--active {
-		-webkit-box-shadow: 0 -1px 0 var(--ffz-color-3) inset;
-		box-shadow: inset 0 -1px 0 var(--ffz-color-3);
 		color: var(--ffz-color-23);
+		box-shadow: inset 0 -2px 0 var(--ffz-color-3);
+		.top-stats-tab__title {
+			color: var(--ffz-color-23);
+		}
+	}
+	.referral-group-row:not(:last-child), .breakdown-card-row:not(:last-child), .subscribers-panel-row:not(:last-child), .stream-card-row:not(:last-child) {
+		border-bottom-color: var(--ffz-color-20);
+	}
+	.dashboard-events-leaf-card__expanded-image {
+		border-color: var(--ffz-color-0);
 	}
 	.dashboard-side-nav__link {
 		color: var(--ffz-color-2);
@@ -2234,7 +2228,6 @@
 	.video-card-dropdown__dropdown-wrapper {
 		background-color: var(--ffz-color-0);
 		color: var(--ffz-color-1);
-		-webkit-box-shadow: 0 0 0 1px var(--ffz-color-20), 0 1px 1px var(--ffz-color-17);
 		box-shadow: 0 0 0 1px var(--ffz-color-20), 0 1px 1px var(--ffz-color-17);
 	}
 	.video-card {
@@ -2249,6 +2242,33 @@
 	.thumbnail-selector-cropper__thumbnail-select-image--selected {
 		border-color: var(--ffz-color-3);
 	}
+	.thumbnail-selector-cropper--error {
+		border-color: var(--ffz-color-14);
+	}
+	.thumbnail-selector-cropper__thumbnail-select-image:hover:before {
+		background-color: var(--ffz-color-20);
+	}
+	.thumbnail-selector-cropper__thumbnail-select-image--selected {
+		border-color: var(--ffz-color-3);
+	}
+	.thumbnail-selector-cropper--error {
+		border-color: var(--ffz-color-14);
+	}
+	.thumbnail-selector-cropper__thumbnail-select-image:hover:before {
+		background-color: var(--ffz-color-20);
+	}
+	.thumbnail-selector-cropper__thumbnail-select-image--selected {
+		border-color: var(--ffz-color-3);
+	}
+	.thumbnail-selector-cropper--error {
+		border-color: var(--ffz-color-14);
+	}
+	.thumbnail-selector-cropper__thumbnail-select-image:hover:before {
+		background-color: var(--ffz-color-20);
+	}
+	.thumbnail-selector-cropper__thumbnail-select-image--selected {
+		border-color: var(--ffz-color-3);
+	}
 	.video-manager-badge {
 		border-color: var(--ffz-color-0);
 	}
@@ -2289,7 +2309,10 @@
 			color: var(--ffz-color-4);
 		}
 	}
-	.members-list-item:hover {
-		background-color: var(--ffz-color-27);
+	.top-nav__home-link {
+		color: var(--ffz-color-4);
+	}
+	.top-nav__menu {
+		background-color: var(--ffz-color-26);
 	}
 }
\ No newline at end of file
diff --git a/src/utilities/compat/apollo.js b/src/utilities/compat/apollo.js
index 30f246fa..3e562a21 100644
--- a/src/utilities/compat/apollo.js
+++ b/src/utilities/compat/apollo.js
@@ -136,13 +136,14 @@ export default class Apollo extends Module {
 			query = query_map && query_map.get(id),
 			modifiers = this.modifiers[operation];
 
-		if ( modifiers )
+		if ( modifiers ) {
 			for(const mod of modifiers) {
 				if ( typeof mod === 'function' )
 					mod(request);
 				else if ( mod[1] )
 					this.applyModifier(request, mod[1]);
 			}
+		}
 
 		this.emit(`:request.${operation}`, request.query, request.variables);
 
@@ -358,18 +359,23 @@ function merge(a, b) {
 		const s = a.selectionSet.selections,
 			selects = {};
 		for(const sel of b.selectionSet.selections) {
-			if (sel.name && sel.name.value) {
-				selects[`${sel.name.value}:${sel.alias?sel.alias.value:null}`] = sel;
-			} else {
-				if (sel.kind === 'InlineFragment') {
-					selects[`${sel.typeCondition.name.value}:${sel.alias?sel.alias.value:null}`] = sel;
-				}
-			}
+			const name = sel.kind === 'InlineFragment' ?
+					(sel.typeCondition.name ?
+						sel.typeCondition.name.value : null) :
+					(sel.name ? sel.name.value : null),
+				alias = sel.alias ? sel.alias.value : null,
+				key = `${name}:${alias}`;
+
+			if ( name )
+				selects[key] = sel;
 		}
 
 		for(let i=0, l = s.length; i < l; i++) {
 			const sel = s[i],
-				name = sel.kind === 'InlineFragment' ? (sel.typeCondition.name ? sel.typeCondition.name.value : null) : (sel.name ? sel.name.value : null),
+				name = sel.kind === 'InlineFragment' ?
+					(sel.typeCondition.name ?
+						sel.typeCondition.name.value : null) :
+					(sel.name ? sel.name.value : null),
 				alias = sel.alias ? sel.alias.value : null,
 				key = `${name}:${alias}`,
 				other = selects[key];
diff --git a/src/utilities/compat/fine-router.js b/src/utilities/compat/fine-router.js
index 5e75ff1c..f2a75128 100644
--- a/src/utilities/compat/fine-router.js
+++ b/src/utilities/compat/fine-router.js
@@ -17,6 +17,7 @@ export default class FineRouter extends Module {
 		this.__routes = [];
 		this.routes = {};
 		this.current = null;
+		this.current_name = null;
 		this.match = null;
 		this.location = null;
 	}
@@ -58,6 +59,7 @@ export default class FineRouter extends Module {
 			if ( match ) {
 				this.log.debug('Matching Route', route, match);
 				this.current = route;
+				this.current_name = route.name;
 				this.match = match;
 				this.emitSafe(':route', route, match);
 				this.emitSafe(`:route:${route.name}`, ...match);
@@ -65,7 +67,7 @@ export default class FineRouter extends Module {
 			}
 		}
 
-		this.current = this.match = null;
+		this.current = this.current_name = this.match = null;
 		this.emitSafe(':route', null, null);
 	}
 
diff --git a/src/utilities/object.js b/src/utilities/object.js
index 84480f9a..1d0b09f4 100644
--- a/src/utilities/object.js
+++ b/src/utilities/object.js
@@ -185,19 +185,27 @@ export function get(path, object) {
 }
 
 
-export function deep_copy(object) {
+export function deep_copy(object, seen) {
 	if ( typeof object !== 'object' )
 		return object;
 
+	if ( ! seen )
+		seen = new Set;
+
+	if ( seen.has(object) )
+		throw new Error('recursive structure detected');
+
+	seen.add(object);
+
 	if ( Array.isArray(object) )
-		return object.map(deep_copy);
+		return object.map(x => deep_copy(x, seen));
 
 	const out = {};
 	for(const key in object)
 		if ( HOP.call(object, key) ) {
 			const val = object[key];
 			if ( typeof val === 'object' )
-				out[key] = deep_copy(val);
+				out[key] = deep_copy(val, seen);
 			else
 				out[key] = val;
 		}
diff --git a/styles/widgets/profile-selector.scss b/styles/widgets/profile-selector.scss
index c4a34e8c..c80326aa 100644
--- a/styles/widgets/profile-selector.scss
+++ b/styles/widgets/profile-selector.scss
@@ -62,4 +62,15 @@
 	position: absolute;
 	top: 0.5rem; right: 0.5rem;
 	font-size: 1.6rem;
+}
+
+
+.ffz--experiment-row {
+	&:not(.live):not(:hover):not(:focus) {
+		opacity: 0.5;
+
+		.tw-theme--dark & {
+			opacity: .25;
+		}
+	}
 }
\ No newline at end of file