[dark] ted com by void

/* ==UserStyle==
@name           [watch] dark? ted
@namespace      github.com/openstyles/stylus
@version        1.241.008
@description    Trying to make sense of TED's styling (crappy)
@author         Me
==/UserStyle== */

@-moz-document url-prefix("https://www.ted.com/talks/") {
	#maincontent [class*="max-w-"],
	#maincontent .max-w-content-max {
		max-width: none;
	}

	#maincontent > div > div > div[style] {
		--side-space-x: 536px;
	}
	#maincontent > div > div > div[style] > :first-child {
		;
	}
	#maincontent > div > div > div[style] > :last-child {
		max-width: var(--side-space-x);
	}
	#maincontent > div > div > div[style] > :last-child > div:empty {
		background: #fff2;
		--display: none;
	}

x	#maincontent .max-w-content-max > .flex {
		--side-space-x: 536px;
		padding: 0  !important;
	}
x	#maincontent .max-w-content-max > .flex > div {
		max-width: calc(100% - var(--side-space-x) );
	}
x	#maincontent .max-w-content-max > .flex > div > div[id]:first-child + div,
x	#maincontent .max-w-content-max > .flex > div > div:not([id]):first-child {
		width:  calc( 100vw - 3rem );
	}
x	#maincontent .max-w-content-max > .flex > aside {
		position: static;
		margin-top: 880px;
	}
}


@-moz-document domain("ted.com") {
	.js * {
		background: transparent;
		color:  inherit;
	}

	html > body,
	.js > body {
		--bg: #222;
		--fg: #ccc;
		--bc: #fff3;

		--bg2: #333;

		background: var(--bg);
		color:      var(--fg);
	}

	button,
	a:link {
		color:  #eee;
	}
	a:visited {
		color:  #999;
	}
	.h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover, .h5 a:hover, .h6 a:hover, .h7 a:hover,
	.h8 a:hover, .h9 a:hover, .h10 a:hover, .h11 a:hover, .h12 a:hover, .h13 a:hover,
	a:hover,
	a:focus {
		color:  #fff;
	}

	.js header {
		background: var(--bg2);
	}

	.Main-nav__icon {
		fill: currentColor;
	}


	ul.popup {
		background: var(--bg2);
		color:      var(--fg);
	}
	.js ul.popup::after {
		border-bottom-color: var(--bg2);
	}
	ul.popup > li > a {
		transition: none;
	}
	.hover\:bg-gray-50:hover,
	.hover\:bg-gray-50:focus,
	ul.popup > li > a:hover,
	ul.popup > li > a:focus {
		background: var(--fg);
		color:      var(--bg);
	}


	.bg\:white,
	.bg-white,
x	.bg\:gray-ll {
		background-color: #222;
	}

	.bg-gray-50,
	.tippy-box[data-theme] .bg-white,
	.tippy-box[data-theme],
	.css-1d6s504,
	.bg\:gray-50,
	.bg-gray-50 {
		background-color: #333;
	}

	.bg-gray-300,
	.bg\:gray-ll,
	.bg\:gray,
	.bg-gray {
		background-color: #444;
	}

	.bg\:red,
	.bg-red-700,
	.bg-red {
		background-color: #932;
	}

	.hover\:bg-gray-300:hover {
		background-color: #fff3;
	}


	.text-textPrimary-onLight,
	.tippy-box[data-theme],
	.css-14bjhnm,
	.text-gray-500,
	.text-black,
	.c\:black,
	.c-black {
		color:  #ccc;
	}

	.text-gray-900,
	.text-gray-700,
	.text-gray {
		color:  #999;
	}

	.text-blue-500 {
		color:  #39c;
	}

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


	.text-gray-700,
	.widget h4,
	.article-content blockquote::before,
	.article-content .pull-quote::before,
	.article-content blockquote,
	.article-content .pull-quote {
		color: inherit;
	}
	.article-tags a {
		color: #333;
	}


	.group:hover .group-hover\:text-gray-700,
	.hover\:text-gray-700:hover {
		color:  #ccc;
	}


	/* Talks in Wide video mode... with very CRAPPY structure * /
	#maincontent > div > div > div.flex[style="flex:1"] > div.flex,
	#maincontent > div > div > div.flex[style="flex:1"] {
		display:  block;
	}
	#maincontent > div > div > div.flex[style="flex:1"] > div.flex > div:not([class]) *,
	#maincontent > div > div > div.flex[style="flex:1"] > div.flex > div:not([class]) {
		max-height: calc(100vh - 56px);
		--max-height: 100vh;
	}
	#maincontent > div > div > div.flex[style="flex:1"] .lg\:w-11\/12 {
		max-width: none;
		width:  60%;
		float:  left;
	}
	#maincontent > div > div > div.flex[style="flex:1"] > .e5j128k0,
	#maincontent > div > div > div.flex[style="flex:1"] > .css-1dn3gor,
	#maincontent > div > div > div.flex[style="flex:1"] > .css-1haqbq1 {
		max-width: none;
		width:  38%;
		float:  right;
	}
	/**/

	/* larger Captions ...and less obtrusive */
	.pointer-events-none > div > div:has(span[dir]),
	.css-16n0hsa {
		background-color: #0003;
		text-shadow:  1px 1px 8px #000;
		max-width:  none;
		font: 600 32px / 1.25 Arial,sans-serif;
		color:  #ddc;
	}
	.pointer-events-none > div > div > span[dir],
	.css-16n0hsa .css-82uonn {
		letter-spacing: 0;
		line-height:  inherit;
		font-weight:  inherit;
		font-size:  inherit;
	}


	/* meaning on meaningless classes */
	.css-10wumxy {
		background-color: var(--bg);
		color:            var(--fg);
	}


	/**
	 * Annoyances
	 */

	/* restore mouse pointer */
	:host([userinactive]:not([mediapaused]):not([mediaiscasting]):not([audio])) ::slotted([slot=media]) {
		cursor: initial;
	}

	/* tiresome shit */
	ow-9sg7r5f10qo {
		display:  none  !important;
	}


	/* shitty coloring... */
	*[style*="color:"] {
		color: inherit  !important;
	}
	*[style*="background-color"] {
		background: var(--bg)  !important;
	}
	:host {
		--spotim-text-color-product-header: inherit;
		--spotim-text-color-comments-count: inherit;

		--spotim-ads-text-color: inherit;
		--spotim-background-color-empty-user-image: transparent;
		--spotim-border-color: inherit;
		--spotim-border-color-muted: inherit;
		--spotim-brand-color: inherit;
		--spotim-brand-text-color: inherit;
		--spotim-card-background-color: transparent;
		--spotim-color-scheme-g1: inherit;
		--spotim-color-scheme-g2: inherit;
		--spotim-color-scheme-g3: inherit;
		--spotim-color-scheme-g4: inherit;
		--spotim-color-scheme-g5: inherit;
		--spotim-color-scheme-l1: inherit;
		--spotim-color-scheme-l2: inherit;
		--spotim-color-scheme-l3: inherit;
		--spotim-color-scheme-l4: inherit;
		--spotim-color-scheme-l5: inherit;
		--spotim-color-scheme-l6: inherit;
		--spotim-color-scheme-l6-rgb: 192,192,192;
		--spotim-content-loader-primary-color: inherit;
		--spotim-content-loaders-secondary-color: inherit;
		--spotim-danger-color: inherit;
		--spotim-extract-background-color: inherit;
		--spotim-input-background-color: inherit;
		--spotim-input-separator-color: inherit;
		--spotim-message-separator-color: inherit;
		--spotim-message-text-color: inherit;
		--spotim-modal-backdrop-background-color: inherit;
		--spotim-modal-backdrop-color: inherit;
		--spotim-modals-backdrop-color: inherit;
		--spotim-overlay-background-color: inherit;
		--spotim-overlay-border-color: transparent;
		--spotim-overlay-z-index: 123456 /*2147483646*/;
		--spotim-page-background-color: inherit;
		--spotim-pitc-header-color: black;
		--spotim-pitc-top-comment-color: inherit;
		--spotim-progress-bar-background-color: inherit;
		--spotim-reactions-reaction-text-color: inherit;
		--spotim-reactions-title-color: black;
		--spotim-safeframe-modal-backdrop-color: inherit;
		--spotim-say-control-action-color: inherit;
		--spotim-say-control-border-color: inherit;
		--spotim-skeleton-background-color: inherit;
		--spotim-skeleton-foreground-color: inherit;
		--spotim-star-color-empty: inherit;
		--spotim-sticky-say-control-background-color: inherit;
		--spotim-strong-border-color: inherit;
		--spotim-success-color: inherit;
		--spotim-text-color-action: inherit;
		--spotim-text-color-comments-count: inherit;
		--spotim-text-color-date-format: inherit;
		--spotim-text-color-default: black;
		--spotim-text-color-muted: inherit;
		--spotim-text-color-product-header: inherit;
		--spotim-text-color-product-subheader: inherit;
		--spotim-text-color-tooltip: inherit;
		--spotim-text-color-x-muted: inherit;
		--spotim-text-color-xx-muted: inherit;
		--spotim-user-image-font-color: inherit;
		--spotim-warning-color: inherit;
		--spotim-brand-color-rgb: 192,192,192;
		--spotim-text-over-brand-color: inherit;
	}
	:host {
	/**
		--launcher--module-font-size-offset: calc(3 * var(--launcher--global-font-size-level, 0));
		--spotim-action-font-weight: normal;
		--spotim-ads-text-color: #373e44;
		--spotim-background-color-empty-user-image: rgba(7, 7, 7, 0.2);
		--spotim-border-color: rgba(18,18,18,0.16);
		--spotim-border-color-muted: #00000014;
		--spotim-border-radius-buttons: var(--spotim-border-radius-medium);
		--spotim-border-radius-inputs: var(--spotim-border-radius-small);
		--spotim-border-radius-medium: 6px;
		--spotim-border-radius-modals: var(--spotim-border-radius-small);
		--spotim-border-radius-popovers: var(--spotim-border-radius-small);
		--spotim-border-radius-small: 4px;
		--spotim-box-shadow-medium: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
		--spotim-brand-color: #eb0028;
		--spotim-brand-text-color: white;
		--spotim-card-background-color: white;
		--spotim-color-badge: var(--spotim-brand-color);
		--spotim-color-community-question: var(--spotim-color-scheme-l6);
		--spotim-color-scheme-g1: #ffffff;
		--spotim-color-scheme-g2: #000000;
		--spotim-color-scheme-g3: #35b940;
		--spotim-color-scheme-g4: #db3737;
		--spotim-color-scheme-g5: #3968ff;
		--spotim-color-scheme-l1: rgba(var(--spotim-color-scheme-l6-rgb, 7,7,7), 0.05);
		--spotim-color-scheme-l2: rgba(var(--spotim-color-scheme-l6-rgb, 7,7,7), 0.1);
		--spotim-color-scheme-l3: rgba(var(--spotim-color-scheme-l6-rgb, 7,7,7), 0.2);
		--spotim-color-scheme-l4: rgba(var(--spotim-color-scheme-l6-rgb, 7,7,7), 0.3);
		--spotim-color-scheme-l5: #121212;
		--spotim-color-scheme-l6: #121212;
		--spotim-color-scheme-l6-rgb: 7,7,7;
		--spotim-content-loader-primary-color: #f3f3f3;
		--spotim-content-loaders-secondary-color: #dddddd;
		--spotim-conversation-background-color: transparent;
		--spotim-conversation-max-width: 700px;
		--spotim-danger-color: #db3737;
		--spotim-extract-background-color: #ffffff;
		--spotim-font-family: Inter;
		--spotim-font-family-action: var(--spotim-font-family);
		--spotim-font-family-badge: var(--spotim-font-family);
		--spotim-font-family-buttons: var(--spotim-font-family);
		--spotim-font-family-comments-count: var(--spotim-font-family-t4);
		--spotim-font-family-community-question: Open Sans, Open Sans Hebrew, Arial;
		--spotim-font-family-date-format: var(--s...