@media (width > 767px) {
	html {
		--right-gutter: 0px;
		--main-chute-width-emulator: calc(var(--main-chute-width) * .75); /* Will be changed via JS */
	}
	
	.main {
		--main-chute-width-fill: min(calc(100vw - 4 * var(--margin)), 2000px);
		max-width: var(--main-chute-width-fill);
	}

	.main > hr:after {
		left: 0;
		right: auto;
		width: calc(300px - var(--margin));	
	}

	p,
	div.width-chute-narrow,
	figure.width-chute-narrow,
	footer {
		max-width: var(--main-chute-width);
	}
}

@media (width >= 2072px) {
	body .main {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (width > 767px) and (width <= 1079px) {
	html {
		--main-chute-width: calc(100vw - 2 * var(--margin) - var(--left-gutter) - 200px);
	}
}


@media (width <= 767px) {
	.figure-group.mobile-bleed,
	.figure-group.width-chute-narrow.mobile-bleed {
		width: 100vw;
		margin-left: calc(-1 * (var(--left-gutter) + var(--margin)));
	}
	
	.figure-group + figcaption {
		width: calc(100vw - 2 * var(--margin));
	}
}





div.width-aside-fill,
figure.width-aside-fill {
	margin-bottom: var(--margin);
	
	br {
		display: none;
	}
}

@media (width > 1440px) {
	div.width-aside-fill,
	figure.width-aside-fill {
		float: right;
		width: calc(var(--main-chute-width-fill) - var(--main-chute-width) - var(--margin));
		
		margin-left: var(--margin);
		margin-top: 0 !important;
		
		br {
			display: block;
		}
	}
}

@media (width > 1800px) {
	div.width-aside-fill,
	figure.width-aside-fill {
		br {
			display: none;
		}
	}
}


.width-half {
	margin-bottom: calc(var(--margin) + 1em);
}
.width-half + .width-half {
	margin-top: calc(-1 * var(--margin) - 1em) !important;
}

@media (width > 767px) {
	.width-half,
	.width-half + figcaption {
		max-width: calc(var(--main-chute-width) / 2);
	}
}

@media (width > 1280px) {
	.right-aligned,
	.right-aligned + figcaption {
		margin-left: auto;	
	}
}



h3 {
	margin-top: 0;
	padding-top: var(--margin);
}



/* Normally, smaller fonts kick in at <= 1280px. Here we do <= 1440px */
@media (width > 767px and width <= 1440px) {
	html {
		--font-size: var(--font-size-m);
		--figcaption-font-size: var(--figcaption-font-size-m);
		--line-height: var(--line-height-m);
		--font-size-h1: var(--font-size-h1-m);
		--font-size-h2: var(--font-size-h2-m);
	}
}







.emulation-section {
	display: flex;
	flex-direction: row-reverse;

	gap: calc(2 * var(--margin));

	margin-top: calc(1 * var(--margin) + 1 * var(--line-height));
	margin-bottom: calc(4 * var(--margin) + 1 * var(--line-height));
}
.emulation-section.emulation-section-right {
	flex-direction: row;
}

.emulation-section p:first-child {
	margin-top: 0;
}
.emulation-section p:last-child {
	margin-bottom: 0;
}

.emulation-section > * {
	position: relative;
}

.emulation-section > *:first-child {
	flex-grow: 1;
	position: relative;
	text-align: right;
}
.emulation-section.emulation-section-right > *:first-child {
	text-align: left;
}

@media (width <= 767px) {
	.emulation-section > *:first-child {
		margin-left: calc(-1 * (var(--left-gutter) + var(--margin)));
		margin-right: calc(-1 * var(--margin));
		
		
		/* Not necessary on desktop because desktop has more rigid overflow */
		overflow: clip;
	}

	.emulation-section > *:first-child:has(.emulation-tag) {
		padding-bottom: calc(32px + 1.0 * var(--margin)); /* Room for tag */
	}

}


.emulation-section > *:first-child > .emulation {
	left: 0; 
	top: 0;
	bottom: 0;
	right: 0;
}



.emulation-list {	
	font-family: var(--font-selectric-un);
	line-height: 1.2;
	letter-spacing: .03em;
	font-size: var(--figcaption-font-size);

	background: var(--light-gray);

	pointer-events: none;	
}
@media (prefers-color-scheme: dark) {
	.emulation-list {	
		background: var(--dark-gray);
	}
}

.emulation-list .tasks {
	overscroll-behavior: contain;
	overflow-y: auto;	
	padding: var(--margin);
	padding-top: 0;
}

@media (width >= 1280px) {
	.emulation-list {	
		position: sticky;
		display: flex;
		flex-direction: column;

		opacity: 0;
		
		top: var(--margin);
		
		left: 0;
		right: 0;
		z-index: 10000;
		
		height: calc(100vh - 2 * var(--margin));
		margin-bottom: calc(-100vh + 2 * var(--margin));
	
		transition: transform 500ms cubic-bezier(1, -0.03, .02, 1.02), opacity 500ms var(--bezier);
		transform: rotateY(-90deg);
	}
	
	.emulation-list .data {
		display: none; /* Already in a tag */
	}
	
	
	
	.emulation-list .data + .divider {
		margin-top: 0;
	}

	.emulation-section.task-list-visible .emulation-list {
		pointer-events: auto;	
		transition: transform 500ms 200ms cubic-bezier(1, -0.03, .02, 1.02), opacity 500ms 200ms var(--bezier);
		transform: rotateY(0);
		opacity: 1;
	}
	
	.emulation-section > .contents > *:not(.emulation-list) {
		transition: transform 500ms 200ms cubic-bezier(1, -0.03, .02, 1.02), opacity 500ms 200ms var(--bezier);
	}
	.emulation-section.task-list-visible > .contents > *:not(.emulation-list) {
		transition: transform 500ms cubic-bezier(1, -0.03, .02, 1.02), opacity 500ms var(--bezier);
		transform: rotateY(90deg);
		opacity: 0;
	}


}

@media (width < 1280px) {	
	.emulation-list {
		--extra-margin: 0px;
		
		display: flex;
		flex-direction: column;
		position: absolute !important;
		z-index: 100;
		margin-top: -45vw;
		width: min(460px, 100vw);
		box-sizing: border-box;
		left: calc(-2 * var(--margin));
		transform: translate(calc(-100% + var(--extra-margin)), calc(-50% - 2 * var(--margin)));		
		transition: transform 150ms var(--bezier);		
		
		max-height: calc(100vh - 2 * var(--margin));
	}
	.emulation-section.task-list-visible .emulation-list {
		pointer-events: auto;
		transform: translate(var(--extra-margin), calc(-50% - 2 * var(--margin)));		
		transition: transform 350ms var(--bezier);		
	}
	.emulation-tag {
		transition: translate 350ms var(--bezier);				
	}
	.emulation-section.task-list-visible .emulation-tag {
		translate: -100%; /* Move off screen to the right */
		transition: translate 150ms var(--bezier);		
	}
	.emulation-section .emulation-wrapper {
		transition: transform 150ms var(--bezier);		
	}
	.emulation-section.task-list-visible .emulation-wrapper {
		transform: translateX(8vw);
		transition: transform 350ms var(--bezier);		
	}
	
	.emulation-list .data {
		padding-left: var(--margin);
		padding-right: var(--margin);
		padding-bottom: calc(.5 * var(--margin));
	}
}

@media (width <= 767px) {	
	.emulation-list {
		--extra-margin: -12px;
		position: absolute !important;
	}
	.emulation-list .data {
		display: none;
	}
}



.emulation-section > .contents {
	perspective: 5000px;
	flex-shrink: 0;
	flex-grow: 0;
	width: var(--main-chute-width-emulator);
	min-width: var(--main-chute-width-emulator);
	flex-basis: var(--main-chute-width-emulator);
}

.emulation-section > .contents > *:last-child {
	margin-bottom: 0;
}


.emulation-list .desc {
	padding-left: 0;
	text-indent: 0;
	margin-top: .2em;
	font-size: var(--figcaption-font-size); 
	letter-spacing: .03em;
	line-height: 1.2;
	font-family: var(--font-selectric-un);
	color: var(--text-gray);
}
@media (prefers-color-scheme: dark) {
	.emulation-list .desc {
		color: var(--lighter-gray);
	}
}

.emulation-list .divider {
	margin-top: 1em;
	color: var(--text-gray);
	margin-bottom: .3em;
}
.emulation-list .divider:first-child {
	margin-top: 0;
}

button.small-underline-button {
	background: var(--background);
	box-sizing: border-box;
	border: none;
	text-decoration: underline;
	text-underline-offset: .1em;
	text-decoration-thickness: .08em;
	text-decoration-color: var(--accent-diluted);
	font-size: var(--figcaption-font-size); 
	letter-spacing: .03em;
	line-height: 1.2;
	font-family: var(--font-selectric-un);
	color: inherit;
	padding: 0;
}

@media (prefers-color-scheme: dark) {
	button.small-underline-button {
		text-decoration-color: var(--accent);
	}
}
@media (hover: hover) {
	button.small-underline-button:hover {
		text-decoration: none;
	}
}

button.small-text-button {
	background: var(--background);
	box-sizing: border-box;
	border: none;
	outline: 1px solid var(--text-gray);	
	font-size: var(--figcaption-font-size); 
	letter-spacing: .03em;
	line-height: 1.2;
	font-family: var(--font-selectric-un);
	color: var(--text-gray);
	padding-top: 3px;
	margin-top: -4px;
	
	&:active {
		transform: translateY(3px);
	}
}
@media (prefers-color-scheme: dark) {
	button.small-text-button {	
		background: var(--darker-gray);
		outline: 1px solid var(--light-gray);
		color: var(--light-gray);
	}
}

@media (hover: hover) {
	button.small-text-button:hover {
		color: var(--background);
		outline-color: var(--accent);
	}
}
	

button.light-button {
	outline: 1px solid white;		
	font-family: var(--font-selectric-un);
	letter-spacing: .03em;
	line-height: 1.4;
	border: none;
	background: transparent;
	color: white;
	padding-top: 3px;

	&:active {
		transform: translateY(3px);
	}
}

@media (hover: hover) {
	button.light-button:hover {	
		color: black;
		outline-color: white;
		background: white;		
	}
}

.emulation-list .buttons {
	margin-right: calc(var(--margin) * -.25);
	margin-top: calc(var(--margin) * -.25);
	margin-bottom: var(--margin);
	padding: var(--margin);
	padding-bottom: 0;
	padding-right: 96px;
	
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: calc(var(--margin) / 2);
	
	button,
	.button {
		z-index: 1000;
		min-width: 48px;
		display: inline-flex;
		box-sizing: border-box;
		min-height: 48px;
		max-width: 112px;
		padding-left: 12px;
		padding-right: 12px;
		padding-top: 48px;
		padding-bottom: 6px;
		user-select: none;
		text-align: left;
		border: none;
		outline: 1px solid var(--text-gray);
		background: transparent;
		position: relative;
		
		hyphens: auto;
		
		font-size: var(--figcaption-font-size); 
		letter-spacing: .03em;
		line-height: 1.2;
		font-family: var(--font-selectric-un);
		color: var(--text-gray);
	}
	
	button:disabled {
		opacity: .25;
	}
	
	
	button.close,
	button.close:active {
		position: absolute;
		top: 12px;
		right: 12px;
		height: 48px;
		padding-bottom: 0;
		outline: none;
	}
	button.close:active {
		top: 15px;
	}
	
	button:after,
	.button:after {
		content: '';
		z-index: 1;
		display: block;
		position: absolute;
		left: 6px;
		top: 6px;
		width: 36px;
		height: 36px;
		background: var(--text-gray);
		mask-position: 50% 50%;
		mask-repeat: no-repeat;
	}
	button.restart:after {
		mask-image: url(ui/buttons/frame-of-preference/restart.svg);			
	}
	button.close:after {
		mask-image: url(ui/buttons/frame-of-preference/close.svg);			
	}
	button.screenshot:after {
		mask-image: url(ui/buttons/frame-of-preference/screenshot.svg);			
	}
	button.video:after {
		mask-image: url(ui/buttons/frame-of-preference/video.svg);			
	}
	.button.open-external:after {
		mask-image: url(ui/buttons/frame-of-preference/external.svg);			
	}
	
	button:not(:disabled):active,
	.button:not(:disabled):active {
		transform: translateY(3px);
		background: var(--accent);
		outline-color: var(--accent);
		color: var(--background)
	}
	button:not(:disabled):active:after,
	.button:not(:disabled):active:after {
		background: var(--background);
	}
}

@media (hover: hover) {
	button:not(:disabled):hover,
	.button:not(:disabled):hover {
		background: var(--accent);
		outline-color: var(--accent);
		color: var(--background)
	}
	button:not(:disabled):hover:after,
	.button:not(:disabled):hover:after {
		background: var(--background);
	}
}



body.showing-tasks .main .task,
.emulation-list .task {
	padding-left: .3em;
	margin-left: -.3em;
	padding-right: .3em;
	margin-right: -.3em;
	padding-top: .15em;
	margin-top: -.15em;
	padding-bottom: .1em;
	margin-bottom: -.1em;	 
	
	position: relative;
	
	&:before {
		/* Cannot be inline-block so it keeps with the next letter */
		
		margin-right: .55em;
		margin-left: .1em;
		outline: .5px solid var(--accent);
		position: relative;
		top: -.2em;
		
		content: '  '; /* Two thin spaces */
		letter-spacing: .25em;
		padding: 0 .17em;
		font-size: 75%;
	}
	&:after {
		content: '';
		
		width: 0;
		height: 24px;
		left: 1px;
		top: -1px;
		display: block;
		position: absolute;
		background: var(--accent);		
		mask-position: 8px 0;
		mask-repeat: no-repeat;
		mask-image: url(ui/check.svg);
	}

	background: linear-gradient(90deg, var(--accent) 50%, transparent 50%);
	background-size: 200% 100%;
	background-repeat: no-repeat;
	background-position: 200% 0;
}



/* On narrow screens, only tasks in the list */
@media (width < 1280px) {
	p > .task {
		position: static;
		margin: 0;
		padding: 0;
		
		background: none;
		&:before {
			display: none !important;
		}
		&:after {
			display: none !important;
		}
	}
}


.main .emulation-list .task {
	text-indent: -1.2em;
	margin-left: 1em !important;
	margin-bottom: .3em !important;
	
	&:after {
		left: -24px !important;
		top: -.1em !important;	
	}
	
	&.indented {
		margin-left: 2.2em !important;
	}
	&.indented-twice {
		margin-left: 3.8em !important;
	}
}
.main .emulation-list .task:before {
	margin-right: .5em;
	outline-color: var(--text-gray);
}
@media (width <= 767px) {
	.main .emulation-list .task {
		&:after {
			top: -.25em !important;	
		}
	}
}

@media (prefers-color-scheme: dark) {
	.main .emulation-list .task:before {
		outline-color: var(--light-gray);
	}
}
.main .emulation-list .task:after {
	top: -1px;
	left: -23px;
}

.main .task.completed {
	&:before {
		transition: background 3s, outline 3s;
		background: var(--accent-diluted);
		outline-color: var(--accent);
	}
	&:after {		
		transition: all 1.2s .8s var(--bezier);
		width: 32px !important;
	}	
}

.main .emulation-list .task.completed:before {
	background: var(--background);
	outline-color: var(--accent);
}

.main .task.completed-part2 {
	transition: background 1s var(--bezier) !important;
	background-position: 0% 0 !important;
}
.main .task.completed-part3 {
	transition: background 750ms var(--bezier) !important;
	background-position: -110% 0 !important;
}



.task-summary {
	display: none;
	
	background: var(--light-gray);
	font-family: var(--font-selectric-un);
	font-size: var(--figcaption-font-size); 
	letter-spacing: .03em;
	line-height: .9;
	
	padding: var(--margin);
	
	max-width: var(--main-chute-width);
	box-sizing: border-box;
	
	gap: var(--margin);
	
	grid-template-columns: 1fr 1fr 1fr;
	row-count: 2;

	
	.desc {
		grid-row: 1 / 1;
	}
	.count-group {
		grid-row: 2 / 2;
		
		font-size: var(--font-size-h2);

		color: var(--text-gray);
	}
	.count {
		color: var(--text);
	}	
	.completed .count {
		color: var(--accent);
	}
	.total {
		color: var(--text-gray);
	}
}
.task-summary > * {
	width: 1fr;
	text-align: center;
}
@media (prefers-color-scheme: dark) {
	.task-summary {
		background: var(--dark-gray);
	}
}
@media (width <= 767px) {
	.task-summary {
		margin-left: calc(-1 * var(--left-gutter));
		
		max-width: calc(var(--main-chute-width) + var(--left-gutter));
	}
}


body.showing-tasks .task-summary {
	display: grid;
}



.task-summary.all-completed {
	background: var(--accent);
	color: var(--light-gray);
		
	.completed .count {
		color: var(--background);	
	}

	.count-group,
	.total {
		color: var(--light-gray);
	}
}
@media (prefers-color-scheme: dark) {
	.task-summary.all-completed {
		background: var(--accent);
		color: var(--dark-gray);	
			
		.completed .count {
			color: var(--background);	
		}
	
		.count-group,
		.total {
			color: var(--dark-gray);	
		}
	}
}


.task-summary .count-group.completed {
	cursor: var(--cursor-hand);
}
.task-summary .count-group.completed:active {
	cursor: var(--cursor-hand-pressed);
}


.emulation-tag {
	position: fixed;
	display: flex;
	flex-direction: column;
	padding-top: .4em;
	padding-bottom: .2em;
	
	user-select: none;
	
	justify-content: center;

	background: var(--light-gray);

	font-family: var(--font-selectric-un);
	font-size: var(--figcaption-font-size); 
	letter-spacing: .03em;
	line-height: 1.2em;
	
	cursor: var(--cursor-hand);

	
	> * {
		flex-grow: 0;
	}
	
	* {
		vertical-align: middle;
	}
	
}
@media (prefers-color-scheme: dark) {
	.emulation-tag {
		background: var(--text-gray);
	}
}


.emulation-tag:active {
	cursor: var(--cursor-hand-pressed);
}


@media (width >= 1280px) {
	.emulation-tag {
		z-index: 95;
		bottom: 0;
		top: calc(100vh - 3.6em - var(--margin));
		height: 2.4em;
		
		right: 0;
		border-right: calc(1 * var(--margin) + max((100vw - 2400px - 40px) / 2, 0px)) solid var(--light-gray);
		
		padding-right: 0;
		padding-left: calc(var(--margin) / 2);

		transition: transform 250ms, opacity 1ms;
	}
	@media (prefers-color-scheme: dark) {
		.emulation-tag {
			border-right-color: var(--text-gray);
		}
	}

	.emulation-section-right .emulation-tag {
		padding-left: 0;
		padding-right: calc(var(--margin) / 2);
	
		right: auto;
		left: 0;
		border-left: calc(1 * var(--margin) + max((100vw - 2400px - 40px) / 2, 0px)) solid var(--light-gray);
		border-right: 0;
	}
	
	.emulation-section.emulation-video-offscreen .emulation-tag {
		transition: transform 250ms, opacity 250ms 250ms;
	
		transform: translateY(50vh);
		pointer-events: none;
		opacity: 0;	
	}
}

@media (width >= 1280px) and (prefers-color-scheme: dark) {
	.emulation-section-right .emulation-tag {
		border-left-color: var(--text-gray);
	}
}


@media (width < 1280px) {
	.emulation-tag {
		position: absolute;
		z-index: 120;
		left: calc(-2 * var(--margin));
		top: 50%;
		max-width: 70px;

		transform: translateY(-50%) !important;
		padding-left: calc(.5 * var(--margin));
		padding-right: calc(.5 * var(--margin));
		padding-top: calc(.5 * var(--margin));
		padding-bottom: calc(.5 * var(--margin));

		text-align: center;
	}
	.emulation[data-emulator-id='macintosh-portable'] + .emulation-tag,
	.emulation[data-emulator-id='powerbook2400c'] + .emulation-tag,
	.emulation[data-emulator-id='imac-g4'] + .emulation-tag,
	.emulation[data-emulator-id='powerbook-titanium'] + .emulation-tag {
		top: 25%;
	}
	.emulation[data-emulator-id='powerbook3400c'] + .emulation-tag,
	.emulation[data-emulator-id='centris650'] + .emulation-tag,
	.emulation[data-emulator-id='next-cube'] + .emulation-tag,
	.emulation[data-emulator-id='imac'] + .emulation-tag {
		top: 75%;
	}
	
	.emulation-tag .data {
		text-align: left;
		hyphens: auto;
				
		.small-text-button {
			margin-top: 12px;
			margin-left: 0;
		}
	}
}

@media (width > 767px) and (width < 1280px) {
	body.showing-tasks .emulation-tag .data {
		display: none;
	}
	.emulation-tag .data {
		.details {
			display: none;
		}		
	}
	.emulation-tag .tasks {
		margin: 0 !important;
		height: auto !important;
	}
	.emulation-tag .tasks .task-count {
		margin-bottom: 1em;
	}
		
	.emulation-tag .tasks .task-mark {
		display: block !important;
		margin-top: -10px;
		margin-right: auto !important;
		margin-left: auto !important;
		position: relative;
		left: -2px !important;
		top: 0 !important;
		
		mask-position: 6px 0 !important;
	}
	
}



.emulation-tag.completed .task-list {
	background: var(--accent) !important;
	outline-color: var(--background);
	color: var(--background);
}
@media (hover: hover) {
	.emulation-tag.completed .task-list:hover {
		background: var(--background) !important;		
		color: var(--accent);
	}
}


@media (width <= 767px) {
	.emulation-tag {
		left: 0 !important;
		top: auto !important;
		bottom: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		height: 32px !important;
		transform: none !important;
		
		padding-left: calc(1 * var(--margin)) !important;
		padding-right: calc(1 * var(--margin)) !important;

	}
	.emulation-tag .data {
		white-space: nowrap;

		.details {
			display: initial;
		}
		.small-text-button {
			margin-top: 0;
			margin-left: 12px;
		}
	}
}


.emulation-tag.completed {
	background: var(--accent);	
	border-color: var(--accent);
	color: var(--background);
}

.emulation-tag .loading {
	text-align: left;
	min-height: 1.333em;
	color: var(--text-gray);
	display: none;
}
.emulation-tag.completed .loading {
	color: var(--background);
}

.emulation-tag .tasks {
	text-align: left;
	min-height: 1.333em;
	height: 1.333em;
	padding-right: .5em;

	display: none;
}
.emulation-tag .tasks > * {
	vertical-align: top;
}


.emulation-section.not-loaded-yet .emulation-tag .loading {
	display: block;
}
body.showing-tasks .emulation-section:not(.not-loaded-yet) .emulation-tag .tasks {
	display: block;
}


.emulation-section.emulation-section-right .emulation-tag .tasks {
	margin-left: 0;
}
.emulation-section.emulation-section-right .emulation-tag .loading {
	margin-left: 0;
}
.emulation-tag .tasks .task-count {
	display: inline-block;
	position: relative;
	height: 1.333em;
	vertical-align: center;
	color: var(--text-gray);
}
.emulation-tag .tasks .task-count .greater-than-zero {
	vertical-align: top;
}

.emulation-tag:not(.completed) .tasks .task-count .greater-than-zero {
	color: var(--text);
}
.emulation-tag.completed .task-count {
	color: var(--accent-diluted);
}

@media (prefers-color-scheme: dark) {
	.emulation-tag .tasks .task-count {	
		color: var(--text);
	}
	.emulation-tag.completed .task-count {	
		color: var(--background);
	}
}


.emulation-tag .tasks .task-mark {
	display: inline-block;
	width: 24px;
	height: 24px;
	transform: translateY(-1px);
	
	margin-right: -16px;
	background: var(--lighter-gray);		
	mask-position: 8px 0;
	mask-repeat: no-repeat;
	mask-image: url(ui/check.svg);
}
@media (width <= 1440px) {
	.emulation-tag .tasks .task-mark {
		transform: translateY(-3px);	
	}
}

@media (prefers-color-scheme: dark) {
	.emulation-tag .tasks .task-mark {	
		background: var(--mid-gray);		
	}
}
.emulation-tag .tasks .task-mark.completed {
	background: var(--accent);
	position: relative;
	z-index: 100;
}
.emulation-tag.completed .task-mark.completed {
	background: var(--accent-diluted);
}



.emulation-tag .task-list {
	position: relative;
	margin-left: 32px;
}
body.showing-tasks .emulation-tag .task-list {
	top: 12px;
	
}
.emulation-section.emulation-section-right .emulation-tag .task-list {
}
.emulation-tag.completed button.task-list {
	background: var(--accent-diluted);
}

@media (hover: hover) {
	.emulation-tag button.task-list:hover {
		background: var(--accent);
	}	
}








.emulation-floating-bk {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	content: '';
	image-rendering: pixelated;
	background-size: 128px 128px;
	z-index: -100;
	opacity: 0;
	pointer-events: none;	
	
	transition: opacity 1s;
}
.emulation-floating-bk.visible {
	opacity: .04;
}



.emulation-wrapper {
	width: 100%;
	height: 100%;
}




.emulation {
	box-sizing: border-box;	
	opacity: 1;
	width: 100%;
	position: relative;
}
.emulation-section.smart-positioning .emulation {
	position: fixed;	
	max-height: none !important;
	margin-bottom: 0;
	margin-top: 0 !important;
	will-change: transform;
}


.emulation-section .emulation {
	opacity: 0;
	pointer-events: none;
}
.emulation-section .emulation-tag {
	opacity: 0;
	pointer-events: none;
}
.emulation-section:not([images-loaded='all']) iframe,
.emulation-section:not([images-loaded='all']) video {
  opacity: 0.01 !important;
	pointer-events: none;
}
.emulation-section .emulation .wrapper:before {
	opacity: 0;
}

.video-interlace {
	
}

.emulation-section[images-loaded='shadow'] .video-interlace:before {
	background: white;
	opacity: .8;
	content: 'Loading…';
	color: var(--lighter-gray);

	width: 100%;
	height: 100%;
	font-size: min(75%, 14px);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--font-selectric-un);
}
@media (width <= 767px) {
	.emulation-section[images-loaded='shadow'] .video-interlace:before {
		font-size: min(200%, 35px);
	}
}

@media (prefers-color-scheme: dark) {
	.emulation-section[images-loaded='shadow'] .video-interlace:before {	
		background: var(--background);
		opacity: 1;
	}
}

.emulation-section[images-loaded='shadow'] .emulation {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 500ms;	
}
.emulation-section[images-loaded='shadow'] .emulation .wrapper {
	background: var(--light-gray);
}
@media (prefers-color-scheme: dark) {
	.emulation-section[images-loaded='shadow'] .emulation .wrapper {
		background: var(--dark-gray);
	}
}

.emulation-section:not(.emulation-computer-offscreen)[images-loaded='all'] .emulation {
	opacity: 1;
	pointer-events: auto;
}
.emulation-section[images-loaded='all'] .emulation-tag {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 500ms, transform 500ms;
}
.emulation-section:not(.emulation-video-offscreen)[images-loaded='all'] .video-outer {
	opacity: 1;
	pointer-events: auto;	
}
.emulation-section[images-loaded='all'] .video-interlace {
	opacity: 1;
}
.emulation-section[images-loaded='all'] .video-interlace:before {
	display: none; 
}
.emulation-section[images-loaded='all'] .wrapper:before {
	opacity: 1;
}

.emulation-section.emulation-computer-offscreen .emulation {
	opacity: 0 !important;
	pointer-events: none !important;
}

.emulation-section .text-cover {
	position: absolute;
	left: -54px;
	top: 0;
	bottom: 0;
	z-index: -1;
	
	background: var(--background);
	opacity: .8;
}
.emulation-section.emulation-section-darker-cover .text-cover {
	opacity: .9;
}
.emulation-section.emulation-section-right.text-cover {
	left: auto;
	right: -54px;
}

.emulation-section.emulation-section-ignore-text-cover .text-cover {
	display: none;
	
}

.emulation .wrapper {
	position: absolute;
	left: 0;
	right: 0;
	top: 0; 
	bottom: 0;
	
	z-index: -1;
	pointer-events: none;

  background-size: 100%;
	background-repeat: no-repeat;
	mask-size: 100%;
	mask-repeat: no-repeat;
	
  &:before {
		content: '';
		position: absolute;
		pointer-events: none;

		background-size: 100%;
		background-repeat: no-repeat;
		background-image: var(--background-image);
		
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
	}
}

.emulation .wrapper-above {
	position: absolute;
	left: 0;
	right: 0;
	top: 0; 
	bottom: 0;
	
	z-index: 10000;
	pointer-events: none;

	background-size: 100%;
	background-repeat: no-repeat;
	background-image: var(--background-image-above);
	
	opacity: 0;
}
.emulation-section[images-loaded='all'] .emulation .wrapper-above {
	opacity: 1;
}



@media (width < 1280px) {
	.emulation {
		overflow: hidden;
		overflow: clip;
	}	

	.emulation-section {
		flex-direction: column !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		gap: 0 !important;
	}
	.emulation-section.smart-positioning .emulation {
		height: 90vw;
	}
	.emulation-section.smart-positioning  > :first-child {
		height: 90vw;
	}
	
	.emulation-section > .contents {
		margin-top: calc(2 * var(--margin));
	}

	.emulation-section.smart-positioning .emulation {
		position: relative;	
		margin-bottom: 0;
		margin-top: 0 !important;
		will-change: transform;
	}
	
	.emulation-section .text-cover {
		display: none;
	}
}



@media (width >= 1440px) {
	/* Asymmetric text */
	.main {
		margin-left: calc(var(--margin) * 2);
	}
	
	.emulation {		
		left: 0;
		right: 0;
	}	
}


.emulation .video-outer {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	
	container-name: video-outer;
	container-type: size;
}
.emulation-section[images-loaded='all'] .video-outer {
	mix-blend-mode: screen;	
}

.emulation .video-wrapper {
	width: 50%;
		
	transform-origin: 0 0;
	position: absolute;
	
	z-index: 1000;
	
	--vertical-opacity: 1;
}
.emulation-section[images-loaded='all'] .emulation .video-wrapper {
	background: black;	
}

.emulation[data-emulator-id='mac1984'] .video-wrapper {
	aspect-ratio: 512 / 341;
	transform: translate(43.5%, 55%) scale(1.15);
}

.emulation[data-emulator-id='mac2025'] .video-wrapper {
	aspect-ratio: 512 / 341;
	transform: translate(43.5%, 55%) scale(1.15);
}

.emulation[data-emulator-id='mac-plus'] .video-wrapper {
	aspect-ratio: 512 / 341;
	transform: translate(71.8%, 28%) scale(.6);
}

.emulation[data-emulator-id='mac-classic'] .video-wrapper {
	aspect-ratio: 512 / 341;
	transform: translate(34.5%, 82%) scale(1.32);
}

.emulation[data-emulator-id='powerbook140'] .video-wrapper {
	aspect-ratio: 640 / 400;	
	transform: translate(43.2%, 34%) scale(1.125);
}
.emulation-section:not(.not-loaded-yet)[images-loaded='all'] .emulation[data-emulator-id='powerbook140'] .video-wrapper {
	opacity: .8;		
}

.emulation[data-emulator-id='macintosh-portable'] .video-wrapper > * {
	aspect-ratio: 640 / 400;	
	transform: matrix3d(0.687191, 0.162606, 0, -0.0001223, -0.0943664, 0.902559, 0, 5.34e-05, 0, 0, 1, 0, 575, 213, 0, 1);
	transform-origin: 0px 0px 0px;	
}
.emulation[data-emulator-id='macintosh-portable'] iframe {
	filter: grayscale(1);
}
.emulation-section:not(.not-loaded-yet)[images-loaded='all'] .emulation[data-emulator-id='macintosh-portable'] .video-wrapper > * {
	outline: 30px solid hsl(83, 100%, 90%);	
}


.emulation[data-emulator-id='centris650'] .video-wrapper > * {
	aspect-ratio: 640 / 480;	
	transform: matrix3d(1.02569, -0.00176632, 0, 8.63909e-07, 0.167831, 1.08159, 0, 0.000227423, 0, 0, 1, 0, calc(423.221 * 1), calc(242.295 * 1), 0, calc(1 / 1));
	transform-origin: 0px 0px 0px;
}

.emulation[data-emulator-id='powerbook2400c'] .video-wrapper > * {
	aspect-ratio: 640 / 480;
	transform: matrix3d(0.746157, -0.0015617, 0, -0.0001658, -0.11523, 0.919174, 0, -8.5e-06, 0, 0, 1, 0, 611.221, 49.2952, 0, 1);
}
.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='powerbook2400c'] .video-wrapper > * {
	opacity: .6;		
}

.emulation[data-emulator-id='powerbook3400c'] .video-wrapper > * {
	aspect-ratio: 640 / 480;
	transform: matrix3d(1.162, 0.0347119, 0, 0.0001676, 0.133373, 1.27457, 0, -3.45e-05, 0, 0, 1, 0, 111.221, 65.2952, 0, 1);
}
.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='powerbook3400c'] .video-wrapper > * {
	opacity: .8;	
}

.emulation[data-emulator-id='imac'] .video-wrapper > * {
	width: 50%;
	aspect-ratio: 832 / 624;
	transform: matrix3d(1.10438, 0.0249088, 0, 0.0001036, 0.150698, 1.14127, 0, -2.67e-05, 0, 0, 1, 0, 287, 160, 0, 1);
}

.emulation[data-emulator-id='powerbook-titanium'] .video-wrapper > * {
	width: 50%;
	aspect-ratio: 832 / 624;
	transform: matrix3d(0.901548, 0.300154, 0, -6.2e-05, -0.104492, 0.872768, 0, 9.31e-05, 0, 0, 1, 0, 535, 31, 0, 1);
}

.emulation[data-emulator-id='imac-g4'] .video-wrapper > * {
	width: 50%;
	aspect-ratio: 1024 / 768;
	transform: matrix3d(0.49638, -0.0125045, 0, -7.84e-05, -0.0317301, 0.591438, 0, 9.1e-06, 0, 0, 1, 0, 542, 148, 0, 1);
}

.emulation[data-emulator-id='imac-g4'].easter-egg .video-wrapper > * {
	transform: matrix3d(0.317844, -0.0025405, 0, -5.18e-05, -0.0141229, 0.378901, 0, 7.3e-06, 0, 0, 1, 0, 575, 245, 0, 1);	
}
.emulation[data-emulator-id='imac-g4'].easter-egg .video-wrapper > iframe {
	filter: blur(.5px) contrast(120%) grayscale(1);	
}

.emulation[data-emulator-id='next-cube'] .video-wrapper > * {
	width: 50%;
	aspect-ratio: 1120 / 832;
	transform: matrix3d(0.452037, -0.0190925, 0, 6.91e-05, 0.0115485, 0.502969, 0, 1.33e-05, 0, 0, 1, 0, 318, 169, 0, 1);
}

.emulation[data-emulator-id='sony-camera'] .video-wrapper > * {
	width: 50%;
	aspect-ratio: 1666 / 1080;
	transform: matrix3d(0.330342, 0.0178431, 0, -9.2e-06, 0.0090836, 0.338945, 0, 9.7e-06, 0, 0, 1, 0, 641, 882, 0, 1);
}
.emulation[data-emulator-id='lisa'] .video-wrapper > * {
	width: 50%;
	aspect-ratio: 2556 / 1917;
	
	opacity: 1;
	
	transform: matrix3d(0.278302, -0.0135034, 0, 6.03e-05, 0.0250277, 0.272306, 0, 6.3e-06, 0, 0, 1, 0, 459, 339, 0, 1);
}


.emulation .video-wrapper iframe,
.emulation .video-wrapper img,
.emulation .video-wrapper video {
	position: absolute;
	left: 0;
	top: 0;
	border: none;
	transform-origin: 0 0;
	overflow: hidden;
	overflow: clip;
	user-select: none;
}
.emulation .video-wrapper video {
	image-rendering: pixelated;
}
.emulation .video-wrapper iframe {
	cursor: none !important; /* Prevents custom cursor from leaking in Safari */
	border: none !important;
}
.emulation .video-wrapper:active {
	cursor: none !important;
}
.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation .video-wrapper iframe {
	outline: 1px solid black; /* Helps a bit with the hue cover not leaking subpixels on the edges */	
}
.emulation-section.paused .video-wrapper iframe {
	pointer-events: none;
}

.emulation-section.not-loaded-yet .video-wrapper iframe {
	opacity: .001 !important; /* 0 doesn’t work for some reason */
	pointer-events: none;
}

/* Scanlines and modifiers */

.emulation .video-interlace {
	transform-origin: 0 0;
	pointer-events: none;	
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;

	text-align: left;
	
	color: white;
	font-size: min(75%, 14px);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--font-selectric-un);
	letter-spacing: .03em;
}
.emulation-section[images-loaded='all'] .emulation .video-interlace.interactive {
	pointer-events: initial;
}
.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation .video-interlace {
	mix-blend-mode: multiply;	
}
.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='mac1984'] .video-interlace { background: hsl(182, 100%, 90%); }
.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='mac-plus'] .video-interlace { background: hsl(182, 100%, 93%); }
.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='macintosh-portable'] .video-interlace { 
	background: hsl(83, 100%, 84%); 
}
.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='lisa'] .video-interlace { background: hsl(182, 100%, 90%); }

/* Easter egg */
.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='imac-g4'].easter-egg .video-interlace { background: hsl(182, 100%, 95%); } 

/* Scanlines */

@media (min-resolution: 2dppx) { /* Retina only */
	.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation .video-interlace:after {
		--vertical-opacity: .2;
		
		content: '';
		position: absolute;
		z-index: 1002;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		
		background-size: 1px calc(100% / 341);
		background-position: 0 0;
		background-image:
			linear-gradient(to bottom, rgba(0, 0, 0, var(--vertical-opacity)) .5px, transparent .5px);
			
		pointer-events: none;
		
		display: none;
	}
	
	@container video-outer (width >= 1500px) {
		.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='mac1984'] .video-interlace:after {
			display: block;
			--vertical-opacity: .3;
			background-size: 1px calc(100% / 341);
		}
	}
	
	@container video-outer (width >= 2900px) {
		.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='mac-plus'] .video-interlace:after {
			display: block;
			--vertical-opacity: .3;
			background-size: 1px calc(100% / 341);
		}
	}
	
	@container video-outer (width >= 2400px) {
		.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='imac-g4'].easter-egg .video-interlace:after {
			display: block;
			--vertical-opacity: .4;
			background-size: 1px calc(100% / 240);
		}
	}
	
	@container video-outer (width >= 2400px) {
		.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='macintosh-portable'] .video-interlace:after {
			display: block;
			--vertical-opacity: .2;
			background-size: calc(100% / 640) calc(100% / 400);
			background-image:
				linear-gradient(to right, rgba(0, 0, 0, var(--vertical-opacity)) .5px, transparent .5px),
				linear-gradient(to bottom, rgba(0, 0, 0, var(--vertical-opacity)) .5px, transparent .5px);
		}
		.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='macintosh-portable'] .video-wrapper > * {
			outline-color: hsl(83, 60%, 80%);	
		}

	}
	
	@container video-outer (width >= 2400px) {
		.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='centris650'] .video-interlace:after {
			display: block;
			--vertical-opacity: .3;
			background-size: 1px calc(100% / 480);
		}
	}
	
	@container video-outer (width >= 2400px) {
		.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='powerbook2400c'] .video-wrapper > * {
			opacity: 1;
		}
		.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='powerbook2400c'] .video-interlace:after {
			display: block;
			--vertical-opacity: .2;
			background-size: calc(100% / 640) calc(100% / 480);
			background-image:
				linear-gradient(to right, rgba(0, 0, 0, var(--vertical-opacity)) .5px, transparent .5px),
				linear-gradient(to bottom, rgba(0, 0, 0, var(--vertical-opacity)) .5px, transparent .5px);
		}
	}
	
	@container video-outer (width >= 2100px) {
		.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='powerbook3400c'] .video-wrapper > * {
			opacity: 1;
		}
		.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='powerbook3400c'] .video-interlace:after {
			display: block;
			--vertical-opacity: .2;
			background-size: calc(100% / 640) calc(100% / 480);
			background-image:
				linear-gradient(to right, rgba(0, 0, 0, var(--vertical-opacity)) .5px, transparent .5px),
				linear-gradient(to bottom, rgba(0, 0, 0, var(--vertical-opacity)) .5px, transparent .5px);
		}
	}
	
	@container video-outer (width >= 2000px) {
		.emulation-section[images-loaded='all']:not(.not-loaded-yet) .emulation[data-emulator-id='imac'] .video-interlace:after {
			display: block;
			--vertical-opacity: .3;
			background-size: 1px calc(100% / 480);
		}
	}
}

.emulation .non-interactive:after {
	position: absolute;
	content: 'Non-interactive';
	right: 0;
	bottom: 0;
	z-index: -1;
	
	pointer-events: none;
	
	font-size: var(--figcaption-font-size); 
	letter-spacing: .03em;
	line-height: 1.5;
	font-family: var(--font-selectric-un);
	color: var(--text-gray);
	outline: 1px solid var(--text-gray);
	padding: calc(var(--margin) / 2) var(--margin) calc(var(--margin) * .4);
	background: var(--background);
}
.emulation[data-emulator-id='lisa'] .non-interactive:after {
	top: 10%;
	right: 5%;
	bottom: auto;	
}
@media (width <= 767px) {
	.emulation[data-emulator-id='lisa'] .non-interactive:after {
		bottom: 5%;
		right: auto;
		left: 17%;
		top: auto;	
	}
}






.warning {
	max-width: var(--main-chute-width);
	box-sizing: border-box;
	
	outline: 1px solid var(--accent);
	padding: 0;
	font-size: var(--figcaption-font-size); 
	letter-spacing: .03em;
	line-height: 1.5;
	font-family: var(--font-selectric-un);
	color: var(--accent);
	margin-bottom: 3em;
	
	interpolate-size: allow-keywords;
			
	display: flex;
	flex-direction: row-reverse;
	
	overflow: hidden;
	position: relative;
	
	> :first-child {
		flex-grow: 0;
		background: var(--accent);
		padding: calc(var(--margin) * .6);
	}
	
	> .contents {
		flex-grow: 1;
		padding: calc(var(--margin) / 2) calc(var(--margin) * .4) calc(var(--margin) * .4) calc(var(--margin));
	}
	
	&.invisible {
		display: none;
	}
	
	&.invisible-animated {
		transition: all 500ms cubic-bezier(1, -0.03, .02, 1.02), outline-color 150ms 350ms, margin-bottom 1200ms, display 1200ms;		
		transition-behavior: allow-discrete;
		transform-origin: 50% 0;
		outline-color: transparent;
		margin-bottom: 0;
		height: 0;
		display: none;
		
		> .contents {
			transition: all 750ms var(--bezier);		
			
			transform: translateY(-50%);
			opacity: 0;
		}
	}
	
	&.warning-big-screen[data-state='ask'] .contents:not([data-state='ask']),
	&.warning-big-screen[data-state='thanks'] .contents:not([data-state='thanks']) {
		display: none;
	}
}



.toast {
	position: fixed;
	
	top: 61.8%;
	text-wrap: pretty;
	color: var(--text);
	background: var(--background);
	font-size: calc(var(--font-size-h2) * 1.5);
	max-width: 80vw;
	display: inline-block;
	font-family: var(--font-selectric-un);
	
	z-index: 1000;
	
	padding-top: .15em;
	padding-left: .2em;
	padding-right: .2em;
	
	transform: translate(calc(50vw - 50%), -50%);
	clip-path: inset(0 100% 0 0);	
	
	
	&.accented {
		color: var(--background);
		background: var(--accent);		
	}
	
	&.super {
		--margin: 30px;
		
		padding-top: calc(.15em + var(--margin));
		padding-left: calc(.2em + var(--margin));
		padding-right: calc(.2em + var(--margin));
		padding-bottom: var(--margin);
		z-index: 999;
		
		opacity: .33;
		
		color: transparent;
		background: var(--accent);
	}	
	&.super.super-alt {
		background: var(--background);
	}
	
	
	&.appearing {
		transition: transform 100ms, clip-path 500ms, opacity 100ms;
		transition-timing-function: cubic-bezier(1, -.03, .02, 1.02);
		
		clip-path: inset(0 0 0 0);	
	}
	&.super.appearing {
		transition: clip-path 3000ms;
	}

	&.disappearing {
		transition: transform 100ms, clip-path 400ms, opacity 100ms;
		transition-timing-function: cubic-bezier(1, -.03, .02, 1.02);
		
		clip-path: inset(0 0 0 100%);	
	}
}