html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
form,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

ul {
	list-style: none;
}

button,
input,
select,
textarea {
	margin: 0;
}

html {
	box-sizing: border-box;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

img,
video {
	max-width: 100%;
	height: auto;
}

iframe {
	border: 0;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
}

td,
th {
	padding: 0;
}

td:not( [ align ] ),
th:not( [ align ] ) {
	text-align: left;
}

a {
	text-decoration: none;
}

img {
	display: block;
}

img[ alt="" ],
img:not( [ alt ] ) {
	border: 1px dashed red;
}

button {
	padding: 0;
	background: none;
	border: 0;
	outline: none;
	font-family: inherit;
}

input[ type=number ]::-webkit-inner-spin-button,
input[ type=number ]::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}

::-ms-clear {
	display: none;
}

@keyframes blink-1 {
	0% {
		opacity: 1
	}

	1% {
		opacity: 0
	}

	4% {
		opacity: .8
	}

	8% {
		opacity: 0
	}

	12% {
		opacity: 0
	}

	15% {
		opacity: .4
	}

	18% {
		opacity: 1
	}

	21% {
		opacity: 0
	}

	23% {
		opacity: 0
	}

	31% {
		opacity: .6
	}

	100% {
		opacity: 1
	}

}

@keyframes blink-2 {
	0% {
		opacity: 1
	}

	1% {
		opacity: 1
	}

	2% {
		opacity: 1
	}

	4% {
		opacity: 0
	}

	10% {
		opacity: 1
	}

	13% {
		opacity: .4
	}

	15% {
		opacity: .4
	}

	17% {
		opacity: 1
	}

	20% {
		opacity: .5
	}

	21% {
		opacity: .5
	}

	25% {
		opacity: 1
	}

	29% {
		opacity: 1
	}

	30% {
		opacity: .8
	}

	32% {
		opacity: 1
	}

	85% {
		opacity: 1
	}

	100% {
		opacity: 1
	}

}

@keyframes blink-3 {
	0% {
		opacity: 1
	}

	1% {
		opacity: 1
	}

	2% {
		opacity: 1
	}

	4% {
		opacity: 0
	}

	10% {
		opacity: 1
	}

	13% {
		opacity: .4
	}

	15% {
		opacity: .4
	}

	17% {
		opacity: 1
	}

	20% {
		opacity: .5
	}

	21% {
		opacity: .5
	}

	25% {
		opacity: 1
	}

	29% {
		opacity: 1
	}

	30% {
		opacity: .8
	}

	32% {
		opacity: 1
	}

	85% {
		opacity: 1
	}

	100% {
		opacity: 1
	}

}

@keyframes scrolling {
	100% {
		transform: translateX( -50% );
	}

}

@keyframes rotate {
	100% {
		transform: rotate( 360deg )
	}

}

html {
	--timing-function: cubic-bezier( .55, 0, .1, 1 );
	--color-white: #eeeeee;
	--color-black: #000000;
	--color-grey: #666666;
	--color-green: #25b69b;
	--color-pink: #c679a7;
	--color-yellow: #fac35f;
	--font-family-a: "A";
	--font-family-b: "B";
	--font-family-c: "C";
	--font-size-xxl: 4.5rem;
	--font-size-xl: 3.5rem;
	--font-size-l: 2.25rem;
	--font-size-m: 1.6rem;
	--font-size-s: 1.4rem;
	--font-size-xs: 1.2rem;
	--font-size-xxs: 1rem;
	--line-height: 1.8;
	--border-size: 1px;
	--border-color: transparent;
	--background-color: rgba( 0, 0, 0, 0 );
	--border-color: rgba( 255, 255, 255, 1 );
	--margin-m: 40px;
	--margin-s: 20px;
	--margin-xs: 10px;
	--archive-wide-width: 1392px;
	text-rendering: geometricPrecision;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 10px;
	font-family: var( --font-family-a );
	color: var( --color-white );
	user-select: none;
}

body {
	font-size: var( --font-size-m );
	background-color: var( --color-black );
}

[ path="/virtual-miniature" ] body,
[ path="/contact" ] body,
[ path="/photogrammetry" ] body,
[ path="/miniature-street-view" ] body,
[ path="/experiments" ][ list="places" ] body,
[ path="/experiments" ][ list="sphere" ] body,
[ path="/experiments" ][ list="particles" ] body {
	overflow: hidden;
}

h3 {
	font-family: var( --font-family-b );
}

h4 {
	font-family: var( --font-family-a );
}

p {
	line-height: var( --line-height );
}

*::-webkit-scrollbar {
	display: none;
}

::selection {
	color: var( --color-white );
	background: var( --color-black );
}

[ font-style-title ] {
	font-family: var( --font-family-b );
}

[ font-style-title ]:first-line {
	font-family: var( --font-family-a );
	font-size: 1.25em;
}

[ blurred-background ] {
	--blur: blur( 10px );
	backdrop-filter: var( --blur );
	-webkit-backdrop-filter: var( --blur );
}

[ view ] {
	opacity: 0;
}

[ view ][ hidden ] {
	display: none;
}

[ view-exit ] [ view ]:not( projects-views ) {
	opacity: 0;
}

[ view-enter ] [ view ]:not( projects-views ) {
	opacity: 1;
}

@font-face {
	font-family: 'A';
	src: url('/fonts/A.woff2') format('woff2'), url('/fonts/A.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'B';
	src: url('/fonts/B.woff2') format('woff2'), url('/fonts/B.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2'), url('/fonts/JetBrainsMono-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-ExtraBold.woff2') format('woff2'), url('/fonts/JetBrainsMono-ExtraBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-ExtraBoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-ExtraLight.woff2') format('woff2'), url('/fonts/JetBrainsMono-ExtraLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-BoldItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-BoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-Italic.woff2') format('woff2'), url('/fonts/JetBrainsMono-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-LightItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-SemiBoldItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-SemiBoldItalic.woff') format('woff');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-SemiBold.woff2') format('woff2'), url('/fonts/JetBrainsMono-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-ThinItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-ThinItalic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff2'), url('/fonts/JetBrainsMono-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-Thin.woff2') format('woff2'), url('/fonts/JetBrainsMono-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-Light.woff2') format('woff2'), url('/fonts/JetBrainsMono-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-MediumItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-ExtraLightItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-ExtraLightItalic.woff') format('woff');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'), url('/fonts/JetBrainsMono-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@media ( max-width: 650px ) {
	body {
		font-size: 9px;
	}

	[ loading ] [ view ],
[ loading ] canvas-block {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transition: none !important;
	}

}

@media ( hover: hover ) {
	[ grab ] {
		cursor: grab
	}

	[ grabbing ] {
		cursor: grabbing
	}

	[ pointer ] {
		cursor: pointer
	}

	[ crosshair ] {
		cursor: crosshair
	}

}

canvas-block {
	position: fixed;
	margin: auto;
	top: 0;
	left: 0;
	transition: opacity .45s var( --timing-function );
}

[ path="/experiments" ][ list="particles" ]:not( [ pixel-experience-started ] ):not( [ pixel-experience-background-visible ] ) canvas-block,
[ path="/experiments" ][ list="particles" ][ pixel-experience-transitioning ]:not( [ pixel-experience-background-visible ] ) canvas-block {
	opacity: 0;
	pointer-events: none;
}

[ path="/experiments" ][ list="grid" ] canvas-block {
	opacity: 0;
	pointer-events: none;
}

[ path="/about" ] canvas-block,
[ path="/mete-kutlu" ] canvas-block,
canvas-block[ inactive-project-canvas ] {
	opacity: 0;
	pointer-events: none;
}

@media ( hover: hover ) {
	[ path="/experiments" ][ list="sphere" ] canvas-block,
[ path="/experiments" ][ list="particles" ] canvas-block {
		cursor: crosshair;
	}

}

header-block {
	--width: 350px;
	--top-panel-gap: calc( var( --margin-xs ) / 2 );
	--header-panel-background: rgba( 0, 0, 0, .22 );
	--header-panel-backdrop-filter: blur( 10px );
	--header-panel-webkit-backdrop-filter: blur( 10px );
	z-index: 20;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: var( --width );
	padding: var( --margin-m );
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: opacity .5s var( --timing-function );
}

[ display-menu ] header-block {
	z-index: 45;
}

[ loading ] header-block,
[ path="/experiments" ][ list="particles" ]:not( [ ui-ready ] ) header-block,
[ path="/experiments" ][ list="particles" ][ pixel-experience-gate-visible ] header-block,
[ path="/experiments" ][ list="particles" ][ pixel-experience-transitioning ] header-block,
header-block[ landing-hidden ] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: none;
	z-index: 0;
}

header-block default-button:not( [ visible ] ):not( [ display-menu ] ) {
	display: none
}

[ path="/experiments" ][ list="particles" ] header-block,
[ path="/experiments" ][ list="grid" ] header-block {
	--header-panel-background: rgba( 0, 0, 0, 1 );
	--header-panel-backdrop-filter: none;
	--header-panel-webkit-backdrop-filter: none;
}

[ path="/experiments" ][ list="places" ] header-block {
	--header-panel-background: #8f73c8;
	--header-panel-backdrop-filter: none;
	--header-panel-webkit-backdrop-filter: none;
}

header-small-screen,
header-navigation,
header-grid-modes,
header-controls {
	display: flex;
	flex-direction: row;
	position: absolute;
	pointer-events: all;
	opacity: 1;
	transition: opacity .2s linear;
}

[ path="/" ] :is(header-small-screen,
header-navigation,
header-grid-modes,
header-controls) {
	transition: none;
}

:is(header-small-screen,
header-navigation,
header-grid-modes,
header-controls) default-button {
	transition: none;
	will-change: auto;
}

header-analytics {
	position: absolute;
	display: block;
	pointer-events: all;
	opacity: 1;
	transition: opacity .2s linear;
}

[ path="/" ] header-analytics {
	transition: none;
}

header-top-row {
	position: absolute;
	top: var( --margin-m );
	left: 50%;
	transform: translateX( -50% );
	display: flex;
	width: min( calc( 100vw - ( var( --margin-m ) * 2 ) ), var( --archive-wide-width ) );
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 14px;
	pointer-events: none;
	padding: 0;
	border: none;
	background: none;
	overflow: visible;
	isolation: auto;
}

header-small-screen {
	top: 95px;
}

header-small-screen [ display-menu ] {
	display: none !important;
}

:is([ loading ] undefined,
[ path="/experiments" ][ list="particles" ]:not( [ ui-ready ] ) undefined,
[ path="/experiments" ][ list="particles" ][ pixel-experience-gate-visible ] undefined,
[ path="/experiments" ][ list="particles" ][ pixel-experience-transitioning ] undefined,
undefined[ landing-hidden ]) header-top-row,
:is([ loading ] undefined,
[ path="/experiments" ][ list="particles" ]:not( [ ui-ready ] ) undefined,
[ path="/experiments" ][ list="particles" ][ pixel-experience-gate-visible ] undefined,
[ path="/experiments" ][ list="particles" ][ pixel-experience-transitioning ] undefined,
undefined[ landing-hidden ]) header-small-screen,
:is([ loading ] undefined,
[ path="/experiments" ][ list="particles" ]:not( [ ui-ready ] ) undefined,
[ path="/experiments" ][ list="particles" ][ pixel-experience-gate-visible ] undefined,
[ path="/experiments" ][ list="particles" ][ pixel-experience-transitioning ] undefined,
undefined[ landing-hidden ]) header-navigation,
:is([ loading ] undefined,
[ path="/experiments" ][ list="particles" ]:not( [ ui-ready ] ) undefined,
[ path="/experiments" ][ list="particles" ][ pixel-experience-gate-visible ] undefined,
[ path="/experiments" ][ list="particles" ][ pixel-experience-transitioning ] undefined,
undefined[ landing-hidden ]) header-grid-modes,
:is([ loading ] undefined,
[ path="/experiments" ][ list="particles" ]:not( [ ui-ready ] ) undefined,
[ path="/experiments" ][ list="particles" ][ pixel-experience-gate-visible ] undefined,
[ path="/experiments" ][ list="particles" ][ pixel-experience-transitioning ] undefined,
undefined[ landing-hidden ]) header-controls,
:is([ loading ] undefined,
[ path="/experiments" ][ list="particles" ]:not( [ ui-ready ] ) undefined,
[ path="/experiments" ][ list="particles" ][ pixel-experience-gate-visible ] undefined,
[ path="/experiments" ][ list="particles" ][ pixel-experience-transitioning ] undefined,
undefined[ landing-hidden ]) header-analytics {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: none;
}

undefined[ archive-panels-hidden ] header-analytics,
undefined[ archive-panels-hidden ] header-grid-modes > div {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

header-navigation {
	left: 0;
	top: 0;
	position: relative;
	flex-wrap: nowrap;
	background: var( --header-panel-background );
	border: none;
	box-shadow: inset 0 0 0 var( --border-size ) rgba( 255, 255, 255, 1 );
	padding-right: 0;
	flex-shrink: 0;
	overflow: hidden;
	backdrop-filter: var( --header-panel-backdrop-filter );
	-webkit-backdrop-filter: var( --header-panel-webkit-backdrop-filter );
}

header-navigation default-button {
	font-family: var( --font-family-c );
	font-size: 1.65rem;
	letter-spacing: .04em;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
	margin-right: -1px;
}

header-navigation default-button[ selected ] {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

header-navigation default-button[ home ] {
	font-family: var( --font-family-b );
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: .02em;
}

header-navigation button-label,
header-navigation button-label span {
	white-space: nowrap;
}

header-navigation default-button button-label {
	min-height: 60px;
	box-sizing: border-box;
}

header-navigation default-button + default-button {
	border-left: var( --border-size ) solid rgba( 255, 255, 255, 1 );
}

header-navigation default-button[ home ] button-label {
	padding-left: 30px;
	padding-right: 72px;
}

header-navigation default-button[ back ] {
	margin-right: 14px;
}

header-navigation default-button[ home ]:hover {
	--background-color: transparent;
	z-index: 1;
}

header-grid-modes {
	left: 0;
	right: 0;
	margin: auto;
	bottom: var( --margin-m );
	display: none;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	z-index: 0;
}

[ path="/experiments" ] header-grid-modes {
	display: flex;
}

header-grid-modes default-button {
	margin-bottom: 0 !important;
}

header-grid-modes default-button:not( :last-child ) {
	margin-right: 0;
	border-right: none;
}

header-grid-modes > div {
	display: none;
	justify-content: center;
	position: relative;
	background: var( --header-panel-background );
	border: var( --border-size ) solid rgba( 255, 255, 255, 1 );
	backdrop-filter: var( --header-panel-backdrop-filter );
	-webkit-backdrop-filter: var( --header-panel-webkit-backdrop-filter );
	opacity: 1;
	transition: opacity .2s linear;
}

header-grid-modes > div:not( :last-child ) {
	margin-bottom: var( --margin-xs );
}

[ path="/experiments" ] header-grid-modes #modeTabs {
	display: flex;
}

[ path="/experiments" ][ list="particles" ] header-grid-modes #particleModes {
	display: flex;
}

[ path="/experiments" ][ list="places" ] header-grid-modes #placeModes {
	display: flex;
}

header-grid-modes default-button {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

header-grid-modes default-button[ selected ] {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

header-controls {
	left: 0;
	top: 0;
	bottom: auto;
	right: auto;
	position: relative;
	flex-wrap: nowrap;
	background: var( --header-panel-background );
	margin-left: 0;
	padding-left: 0;
	flex-shrink: 0;
	border: none;
	box-shadow: inset 0 0 0 var( --border-size ) rgba( 255, 255, 255, 1 );
	overflow: hidden;
	backdrop-filter: var( --header-panel-backdrop-filter );
	-webkit-backdrop-filter: var( --header-panel-webkit-backdrop-filter );
}

header-controls default-button {
	font-family: var( --font-family-c );
	font-size: 1.65rem;
	letter-spacing: .04em;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
	margin-right: -1px;
}

header-controls default-button[ selected ] {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

header-controls button-label,
header-controls button-label span {
	white-space: nowrap;
}

header-controls default-button button-label {
	min-height: 60px;
	box-sizing: border-box;
}

header-controls default-button + default-button {
	border-left: var( --border-size ) solid rgba( 255, 255, 255, 1 );
}

header-controls default-button[ fullscreen ] {
	width: auto;
}

header-controls default-button[ audio ] {
	width: auto;
}

header-credits {
	display: none;
}

header-analytics {
	position: absolute;
	bottom: var( --margin-m );
	left: var( --margin-m );
	font-size: var( --font-size-m );
	font-family: var( --font-family-c );
	opacity: 0;
	padding: 0;
	text-align: left;
	min-width: auto;
}

[ path="/experiments" ][ list="particles" ] header-analytics {
	opacity: 1;
}

header-analytics li {
	list-style: none;
}

header-analytics li:not(:last-child) {
	margin-bottom: 5px;
}

header-analytics-title {
	width: auto;
	margin: 0 0 12px;
	padding: 0;
	margin-bottom: 12px;
	display: block;
	font-family: var( --font-family-c );
	font-size: var( --font-size-m );
	font-weight: normal;
	letter-spacing: .04em;
	text-align: left;
}

@media ( max-width: 650px ) {
	header-block {
		padding: var( --margin-s );
	}

}

@media ( max-width: 1024px ) {
	header-block {
		justify-content: flex-start;
		align-items: flex-start;
	}

	header-block::before {
		content: '';
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
		opacity: 0;
		background: var( --color-black );
		z-index: 1;
		transition: opacity .5s var( --timing-function );
	}

	[ display-menu ] header-block::before {
		opacity: .9;
		pointer-events: all;
	}

	header-top-row {
		position: relative;
		top: initial;
		left: initial;
		transform: none;
		display: contents;
		padding: 0;
		border: none;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		overflow: visible;
		isolation: auto;
	}

	header-small-screen [ display-menu ] {
		display: flex !important;
	}

	header-small-screen default-button {
		background: var( --header-panel-background );
		backdrop-filter: var( --header-panel-backdrop-filter );
		-webkit-backdrop-filter: var( --header-panel-webkit-backdrop-filter );
		overflow: visible;
		isolation: auto;
		transform: none;
	}

	:is(header-small-screen,
header-navigation,
header-controls) {
		position: relative;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		z-index: 2;
		left: initial;
		top: initial;
		right: initial;
		bottom: initial;
	}

	:is(header-small-screen,
header-navigation,
header-controls):not( :last-child ) {
		margin-bottom: var( --margin-s );
	}

	:is(header-navigation,
header-controls) {
		opacity: 0;
		pointer-events: none;
	}

	[ display-menu ] :is(header-navigation,
header-controls) {
		opacity: 1;
		pointer-events: all;
	}

	:is(header-navigation,
header-controls) default-button {
		background: var( --header-panel-background );
		backdrop-filter: var( --header-panel-backdrop-filter );
		-webkit-backdrop-filter: var( --header-panel-webkit-backdrop-filter );
		overflow: visible;
		isolation: auto;
		transform: none;
		border: none;
		margin: 0;
	}

	:is(header-navigation,
header-controls) default-button:not( :last-child ) {
		margin-bottom: var( --margin-xs );
	}

	:is(header-navigation,
header-controls) default-button a,
:is(header-navigation,
header-controls) default-button button-label {
		border: none;
		box-shadow: inset 0 0 0 var( --border-size ) rgba( 255, 255, 255, 1 );
		box-sizing: border-box;
	}

	:is(header-navigation,
header-controls) default-button a {
		width: auto;
	}

	undefined[ mobile-page-scrolled ] header-small-screen {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	undefined[ mobile-grid-scrolled ] header-grid-modes,
undefined[ mobile-grid-scrolled ] header-grid-modes > div {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	header-navigation default-button[ back ] {
		margin-right: 0;
		margin-bottom: 14px;
	}

	header-navigation {
		padding-right: 0;
		border: none;
		box-shadow: none;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		overflow: visible;
	}

	header-navigation default-button + default-button {
		border-left: none;
	}

	header-controls {
		margin-left: 0;
		padding-left: 0;
		border: none;
		box-shadow: none;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		overflow: visible;
	}

	header-controls default-button + default-button {
		border-left: none;
	}

	header-controls default-button[ fullscreen ] {
		display: none !important;
	}

	header-analytics {
		display: none;
		font-size: var( --font-size-xs );
	}

	header-analytics-title {
		font-size: var( --font-size-xs );
	}

}

@media ( hover: hover ) {
	header-navigation default-button:not( [ selected ] ):not( [ home ] ):hover {
		background: rgba( 255, 255, 255, .08 );
	}

	header-grid-modes default-button:not( [ selected ] ):hover {
		background: rgba( 255, 255, 255, .08 );
	}

	header-controls default-button:not( [ selected ] ):hover {
		background: rgba( 255, 255, 255, .08 );
	}

}

default-button {
	cursor: pointer;
	color: var( --color-white );
	font-size: var( --font-size-l );
	font-family: var( --font-family-b );
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	background-color: var( --background-color );
	border: var( --border-size ) solid var( --border-color );
	opacity: 0;
}

[ view ] default-button {
	opacity: 0;
}

[ view-enter ] default-button {
	opacity: 1;
}

default-button:not( :last-child ) {
	margin-right: -1px;
}

default-button:active {
	--background-color: rgba( 255, 255, 255, .75 );
}

default-button[ visible ] {
	display: flex
}

default-button[ disabled ] {
	color: var( --color-grey )
}

default-button[ selected ] {
	z-index: 1;
	background: var( --color-white );
	color: var( --color-black );
}

:is(:is([ miniature ] default-button,
default-button[ activated ]) button-label,
:is([ miniature ] default-button,
default-button[ activated ]) button-icon) > *:first-child {
	display: none
}

:is(:is([ miniature ] default-button,
default-button[ activated ]) button-label,
:is([ miniature ] default-button,
default-button[ activated ]) button-icon) > *:last-child {
	display: flex
}

default-button[ label-hidden ] button-label {
	display: none;
}

default-button[ reversed ],
default-button[ reversed ] a {
	flex-direction: row;
}

default-button svg {
	width: 20px;
	height: 20px;
}

default-button path {
	fill: currentColor;
}

default-button a {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: stretch;
	flex-direction: row-reverse
}

default-button img {
	visibility: hidden;
	height: 100%;
	width: 100%;
	position: absolute;
}

:is(button-label,
button-icon) > *:nth-child( 2 ) {
	display: none
}

button-icon {
	height: var( --margin-m );
	width: var( --margin-m );
	display: flex;
	justify-content: center;
	align-items: center;
}

[ view-enter ] button-icon {
	animation: 1.5s linear var( --transition-delay ) var(  --animation );
}

button-label {
	--border: var( --border-size ) solid var( --border-color );
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	display: flex;
}

a {
	color: currentColor;
}

@media ( max-width: 1024px ) {
	default-button:not( :last-child ) {
		margin-bottom: -1px;
		margin-right: 0;
	}

	default-button {
		font-size: var( --font-size-m );
	}

	button-label {
		padding: var( --margin-xs ) var( --margin-s );
	}

}

@media ( hover: hover ) {
	default-button:hover {
		z-index: 2;
		--background-color: rgba( 255, 255, 255, .25 );
	}

	default-button:hover button-label {
		display: flex;
	}

}

project-view {
	width: 100vw;
	display: block;
	padding-bottom: 300px;
	overscroll-behavior-y: contain;
}

[ path="/miniature-street-view" ] project-view,
[ path="/virtual-miniature" ] project-view,
[ path="/photogrammetry" ] project-view {
	z-index: 25;
	position: relative;
}

[ path="/when-gaspard-paints-a-gospel" ] project-view,
[ path="/miniature-street-view" ] project-view,
[ path="/virtual-miniature" ] project-view,
[ path="/photogrammetry" ] project-view,
[ path="/augustus-ar" ] project-view {
	pointer-events: none;
}

[ section ] {
	position: relative;
	min-width: 100%;
}

project-credit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 100px;
	padding: 0 var( --margin-m ) var( --margin-m );
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	opacity: .55;
	text-align: center;
}

@media ( max-width: 650px ) {
	project-credit {
		margin-top: 200px;
		padding: 0 var( --margin-s ) calc( var( --margin-s ) * 2 );
		font-size: var( --font-size-xs );
	}

}

section-type-1 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	min-height: 100vh;
	min-height: calc( var( --vh, 1vh ) * 100 );
	margin-bottom: calc( var( --margin-m ) * 2 );
	overflow: hidden;
	background: var( --color-black );
	user-select: none;
}

section-type-1 hero-media,
section-type-1 hero-overlay,
section-type-1 hero-lines {
	position: absolute;
	inset: 0;
}

section-type-1 hero-media {
	z-index: 0;
}

section-type-1 hero-lines {
	z-index: 1;
	background: linear-gradient( 180deg, rgba( 0, 0, 0, .42 ) 0%, rgba( 0, 0, 0, .42 ) 100% ), repeating-linear-gradient( 180deg, rgba( 255, 255, 255, .075 ) 0, rgba( 255, 255, 255, .075 ) 2px, rgba( 255, 255, 255, 0 ) 2px, rgba( 255, 255, 255, 0 ) 6px );
	mix-blend-mode: normal;
	opacity: 1;
	pointer-events: none;
}

section-type-1 hero-overlay {
	z-index: 2;
	position: relative;
	width: min( 980px, calc( 100vw - 80px ) );
	padding: 80px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var( --color-white );
	pointer-events: none;
}

section-type-1 hero-index {
	margin-bottom: 22px;
	font-family: var( --font-family-c );
	font-size: 1.6rem;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .8;
}

section-type-1 h3 {
	font-size: clamp( 4.8rem, 7vw, 9.6rem );
	font-family: var( --font-family-a );
	line-height: .95;
	letter-spacing: .02em;
}

section-type-1 h4 {
	margin-top: 12px;
	font-size: clamp( 2.4rem, 2.5vw, 3.8rem );
	font-family: var( --font-family-b );
	letter-spacing: .06em;
	text-transform: uppercase;
}

section-type-1 hero-meta {
	margin-top: 24px;
	font-family: var( --font-family-c );
	font-size: clamp( 1.6rem, 1.25vw, 2rem );
	font-weight: 300;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .78;
}

section-type-1 video-block,
section-type-1 img {
	width: 100%;
	height: 100%;
}

section-type-1 video,
section-type-1 img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

@media ( max-width: 650px ) {
	section-type-1 {
		min-height: 100svh;
		margin-bottom: var( --margin-m );
	}

	section-type-1 hero-overlay {
		width: calc( 100vw - 32px );
		padding: 64px 0;
	}

	section-type-1 hero-index {
		margin-bottom: 18px;
		font-size: 1.3rem;
	}

	section-type-1 hero-meta {
		margin-top: 18px;
		font-size: 1.3rem;
		line-height: 1.6;
	}

}

section-type-2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: calc( var( --margin-m ) * 2 );
	padding-left: calc( var( --margin-m ) * 4 );
	background: var( --color-black );
}

section-type-2 > *:not( :last-child ) {
	margin-right: var( --margin-m );
}

section-type-2[ text-centered ] {
	align-items: center;
}

section-type-2[ text-centered ] h3,
section-type-2[ text-centered ] p {
	text-align: center;
}

section-type-2 h3 {
	font-size: var( --font-size-xxl );
	text-align: left;
	margin-bottom: var( --margin-s );
	max-width: calc( 85% - 200px );
}

section-type-2 p {
	font-size: 2rem;
	font-family: var( --font-family-c );
	line-height: var( --line-height );
	max-width: calc( 85% - 200px );
}

@media ( max-width: 1024px ) {
	section-type-2 {
		flex-direction: column;
		padding: calc( var( --margin-m ) ) calc( var( --margin-s ) );
	}

	section-type-2 h3 {
		max-width: initial;
		text-align: left;
		margin-bottom: var( --margin-s );
		margin-right: 0 !important;
	}

	section-type-2 h3 br {
		display: none;
	}

	section-type-2 p {
		max-width: initial;
		font-size: 1.5rem;
	}

}

@media ( max-width: 1280px ) {
	section-type-2 h3 {
		font-size: var( --font-size-xl );
	}

}

section-type-12 {
	padding: var( --margin-m ) calc( var( --margin-m ) * 2 ) calc( var( --margin-m ) + 20px ) calc( var( --margin-m ) * 4 );
	display: flex;
	justify-content: flex-start;
	background: var( --color-black );
}

presentation-card {
	width: min( 1180px, calc( 100vw - ( var( --margin-m ) * 6 ) ) );
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 18px;
	padding: 0;
	border: none;
	background: none;
	backdrop-filter: none;
}

presentation-card[ single-column ] {
	grid-template-columns: minmax( 0, 1fr );
	gap: 0;
}

presentation-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

presentation-heading {
	margin-bottom: 20px;
	font-family: var( --font-family-c );
	font-size: 2.1rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: none;
}

presentation-line,
presentation-person {
	font-family: var( --font-family-c );
	font-size: 1.75rem;
	line-height: 1.6;
}

presentation-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

presentation-stack + presentation-stack,
presentation-line + presentation-line,
presentation-person + presentation-person {
	margin-top: 10px;
}

presentation-stack + presentation-stack {
	margin-top: 44px;
}

@media ( max-width: 1024px ) {
	presentation-card {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 40px 32px;
	}

}

@media ( max-width: 650px ) {
	section-type-12 {
		padding: var( --margin-m ) var( --margin-s );
	}

	presentation-card {
		width: 100%;
		padding: 0;
		gap: 28px;
	}

	presentation-heading {
		font-size: 1.5rem;
	}

	presentation-line,
presentation-person {
		font-size: 1.5rem;
		line-height: var( --line-height );
	}

}

section-type-3 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var( --color-black );
	padding: 0;
}

section-type-3[ model ] {
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	width: 100vw;
	background: none;
}

section-type-3[ model ] img {
	visibility: hidden;
}

section-type-3 + section-type-3 {
	padding-top: calc( var( --margin-s ) * 4 );
}

section-type-3 img {
	object-fit: cover;
	width: 100%;
}

section-type-3 content-frame {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

section-type-3 media-frame {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

section-type-3 media-frame > * {
	width: 100%;
}

section-type-3[ compact ],
section-type-3[ medium ] {
	padding: calc( var( --margin-s ) * 4 ) 0;
}

:is(section-type-3[ compact ],
section-type-3[ medium ]) content-frame {
	width: min( 75vw, 1400px );
	align-items: flex-start;
}

:is(section-type-3[ compact ],
section-type-3[ medium ]) img,
:is(section-type-3[ compact ],
section-type-3[ medium ]) video-block,
:is(section-type-3[ compact ],
section-type-3[ medium ]) video {
	width: 100%;
}

:is(section-type-3[ compact ],
section-type-3[ medium ]) p {
	width: min( 50vw, 934px );
	margin: 18px 0 0;
	padding: 0 48px 0 0;
	box-sizing: border-box;
	text-align: left;
	align-self: flex-start;
}

section-type-3[ compact ] content-frame {
	width: min( var( --archive-wide-width ), calc( 100vw - ( var( --margin-m ) * 2 ) ) );
}

section-type-3[ compact ] p {
	width: min( 788px, 100% );
	padding-right: 0;
}

section-type-3[ medium ] content-frame {
	width: min( 82vw, 1600px );
}

section-type-3[ medium ] p {
	width: min( 54.67vw, 1067px );
	padding-left: 200px;
}

section-type-3[ centered ] {
	padding-top: var( --margin-s );
}

section-type-3[ centered ] img {
	object-fit: contain;
	max-width: 50vw;
	max-height: 100vh;
}

section-type-3 p {
	width: 1000px;
	margin: var( --margin-s ) 0 0;
	padding-left: 300px;
	box-sizing: content-box;
	align-self: flex-start;
	text-align: left;
	font-family: var( --font-family-c );
	font-size: var( --font-size-m );
	font-weight: 350;
	opacity: 1;
}

section-type-3 p[ centered-text ] {
	padding-left: 0;
	padding-right: 0;
	align-self: center;
	text-align: center;
}

section-type-3[ compact ] p[ centered-text ],
section-type-3[ medium ] p[ centered-text ] {
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	align-self: center;
	text-align: center;
}

section-type-3[ compact ] p[ centered-text ] {
	width: min( 788px, 100% );
}

section-type-3[ medium ] p[ centered-text ] {
	width: min( 54.67vw, 1067px );
}

section-type-3 project-caption strong,
section-type-3 p strong {
	font-weight: inherit;
}

section-type-3 project-caption {
	font-weight: 300;
}

section-type-3 project-explain {
	font-weight: 300;
}

section-type-3 project-caption + project-explain::before {
	content: ' ';
}

@media ( max-width: 1024px ) {
	section-type-3 + section-type-3 {
		padding-top: 0;
	}

	section-type-3[ centered ] img {
		max-width: unset;
	}

	:is(section-type-3[ compact ],
section-type-3[ medium ]) content-frame {
		width: calc( 100vw - ( var( --margin-m ) * 2 ) );
	}

	:is(section-type-3[ compact ],
section-type-3[ medium ]) p {
		width: min( 100%, 1067px );
		padding-left: 72px;
		padding-right: 0;
	}

	section-type-3 p[ centered-text ] {
		padding-left: 0;
	}

}

@media ( max-width: 650px ) {
	section-type-3 p {
		width: 100%;
		margin: var( --margin-s ) 0 0;
		padding-bottom: calc( var( --margin-s ) * 2 );
		padding-left: 0;
		box-sizing: border-box;
		font-size: var( --font-size-s );
	}

	section-type-3[ without-caption ] {
		padding-bottom: calc( var( --margin-s ) * 2 );
	}

	section-type-3[ compact ],
section-type-3[ medium ] {
		padding: var( --margin-s ) 0;
	}

	:is(section-type-3[ compact ],
section-type-3[ medium ]) content-frame {
		width: calc( 100vw - ( var( --margin-s ) * 2 ) );
	}

	:is(section-type-3[ compact ],
section-type-3[ medium ]) p {
		width: 100%;
		margin-top: calc( var( --margin-s ) * .5 );
		padding-left: 0;
		padding-right: 0;
	}

	section-type-3 > content-frame > p {
		margin-top: calc( var( --margin-s ) * .5 );
	}

}

preloader-overlay {
	display: flex;
	position: fixed;
	z-index: 45;
	inset: 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: auto;
	height: auto;
	min-height: 0;
	overflow: hidden;
	pointer-events: none;
	background: var( --color-black );
	opacity: 0;
	transition: none;
}

preloader-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0;
	background-image: url( "/public/common/Grid.svg" );
	background-size: 50px;
	background-position: center center;
	transition: opacity .5s var( --timing-function );
	transition-delay: 0s;
}

[ loading ] preloader-overlay {
	opacity: 1;
	pointer-events: all;
}

[ loading ] preloader-overlay h1,
[ loading ] preloader-overlay h2,
[ loading ] preloader-overlay svg,
[ loading ] preloader-overlay text,
[ loading ] preloader-overlay preloader-counter,
[ loading ] preloader-overlay preloader-square {
	opacity: 1 !important;
	transform: scale( 1 ) !important;
}

[ loading ] preloader-overlay:before {
	opacity: .25;
	transition-delay: 0s;
}

[ loading ] preloader-overlay h1 {
	transition: all .5s var( --timing-function );
}

[ loading ] preloader-overlay h2 {
	transition: all .6s var( --timing-function );
}

[ loading ] preloader-overlay preloader-text {
	opacity: 1;
	transform: translateY( -50% );
}

preloader-overlay preloader-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 220px;
}

preloader-overlay h1 {
	font-size: 8rem;
	color: var( --color-white );
	font-family: var( --font-family-a );
	line-height: 1.25;
	text-align: center;
	transition: all .6s var( --timing-function );
	opacity: 0;
	transform: scale( .98 );
}

preloader-overlay h2 {
	font-size: var( --font-size-xxl );
	color: var( --color-white );
	font-family: var( --font-family-b );
	line-height: 1.25;
	text-align: center;
	transition: all .5s var( --timing-function );
	margin-bottom: var( --margin-xs );
	opacity: 0;
	transform: scale( .98 );
}

preloader-overlay preloader-subtitle-line {
	display: inline;
}

preloader-overlay preloader-square {
	--border: 2px dotted rgba( 255, 255, 255, .25 );
	appearance: none;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 15px;
	transition: all .5s var( --timing-function );
	transform: scale( .8 );
	opacity: 0;
}

preloader-overlay preloader-text {
	position: absolute;
	top: 100%;
	font-family: var( --font-family-a );
	font-size: var( --font-size-m );
	text-transform: uppercase;
	display: block;
	padding: 2px 10px;
	transform: translateY( -35% );
	opacity: 0;
	transition: all .75s var( --timing-function );
	display: none;
}

preloader-overlay preloader-text span {
	animation: blink-2 1.5s infinite linear;
}

preloader-overlay preloader-spinner {
	position: relative;
	width: 75px;
	height: 75px;
}

preloader-overlay [ reverse ] {
	animation: rotate 2s infinite linear;
	animation-direction: reverse;
}

preloader-overlay [ reverse ] svg {
	transform: scale( 1.1 );
	opacity: 0;
}

preloader-overlay [ reverse ] circle {
	animation: blink-1 1s infinite linear;
}

preloader-overlay [ reverse ] circle:last-child {
	stroke-width: 1;
	stroke: rgba( 255, 255, 255, .1 );
	stroke-dasharray: 47.12388980384689;
	display: none;
}

preloader-overlay [ normal ] {
	animation: rotate 4s infinite linear;
	position: absolute;
	left: 0;
	top: 0;
}

preloader-overlay [ normal ] svg {
	transform: scale( 1.1 );
	opacity: 0;
}

preloader-overlay [ normal ] circle {
	animation: blink-2 2s infinite linear;
}

preloader-overlay [ normal ] circle:first-child {
	stroke-width: 1;
	stroke: rgba( 255, 255, 255, .25 );
	stroke-dasharray: 37.69911184307752;
}

preloader-overlay [ normal ] circle:nth-child( 2 ) {
	stroke-width: 1;
	stroke: rgba( 255, 255, 255, .25 );
	stroke-dasharray: 188.49555921538757;
}

preloader-overlay [ normal ] circle:last-child {
	stroke: rgba( 255, 255, 255, 1 );
	stroke-width: 1.5;
	stroke-dasharray: 188.49555921538757;
	stroke-dashoffset: 188.49555921538757;
}

preloader-overlay svg {
	width: 75px;
	height: 75px;
	transition: all 1s var( --timing-function );
}

preloader-overlay circle {
	fill: none;
	stroke-width: 1;
}

preloader-overlay preloader-counter {
	position: absolute;
	color: var( --color-white );
	font-family: var( --font-family-b );
	font-size: var( --font-size-xs );
	transform: scale( .8 );
	opacity: 0;
	transition: all 1s var( --timing-function );
}

preloader-overlay preloader-counter counter-text {
	display: block;
	visibility: hidden;
	transition: all 1s var( --timing-function );
}

[ loading ] preloader-overlay preloader-counter counter-text {
	visibility: visible;
	animation: blink-2 2s infinite linear;
}

@media ( max-width: 650px ) {
	preloader-overlay h1 {
		font-size: 5.5rem;
		min-height: 6.9rem;
	}

	preloader-overlay h2 {
		font-size: 3rem;
		max-width: none;
		margin-left: auto;
		margin-right: auto;
		line-height: 1.15;
		min-height: 7rem;
	}

	preloader-overlay preloader-subtitle-line {
		display: block;
	}

}

rotate-device-overlay {
	z-index: 25;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	background: var( --color-black );
	font-size: var( --font-size-l );
	text-align: center;
	display: none;
}

@media ( orientation: landscape ) and ( max-width: 650px ) {
	rotate-device-overlay {
		display: flex;
	}

}

editor-block {
	--font-color: #2c3e50;
	--border-color: #ddd;
	--select-color: #dee6ed;
	--background-color: #eee;
	--slider-thumb-color: #eee;
	--highlight-color: #f1c40f;
	--true-color: #1abc9c;
	--false-color: #ee5253;
	position: fixed;
	top: 20px;
	right: 20px;
	max-height: calc( 100% - 40px );
	margin: 0;
	overflow: auto;
	min-width: 350px;
	padding: 15px;
	background-color: var( --background-color );
	border-radius: 10px;
	border: 1px solid var( --border-color );
	color: var( --font-color );
	visibility: hidden;
	z-index: 25;
	display: none;
	font-size: 12px;
	font-family: var( --font-family-c );
}

editor-block[ dark ] {
	--font-color: #eeeeee;
	--border-color: #4a4a4a;
	--select-color: #dee6ed;
	--background-color: rgba( 28, 27, 32, .95 );
	--slider-thumb-color: rgba( 28, 27, 32, 1 );
}

editor-block[ open ] {
	visibility: visible;
}

editor-block[ visible ] {
	display: block;
}

editor-block > editor-list::before {
	display: none !important;
}

editor-block output {
	color: var( --highlight-color );
	text-align: right;
	font-weight: 400;
}

editor-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	top: 10px;
	right: 10px;
	margin-bottom: 15px;
	width: 100%;
}

editor-header button {
	cursor: pointer;
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: flex-start;
	padding: 6px;
	background: var( --background-color );
	border-radius: 5px;
	border: 1px solid var( --border-color );
}

editor-header button:not(:last-child) {
	margin-right: 5px;
}

editor-header button:last-child {
	visibility: visible;
}

editor-header button:active {
	transform: translateY(1px);
}

editor-header header-group-left,
editor-header header-group-right {
	display: flex;
}

editor-header svg {
	width: 15px;
	height: 15px;
	fill: var( --font-color );
}

editor-block[ open ] editor-header [ switch ] {
	border: 1px solid var( --border-color );
}

editor-block[ open ] editor-header [ switch ] svg:first-child {
	visibility: hidden
}

editor-block[ open ] editor-header [ switch ] svg:last-child {
	visibility: visible
}

editor-header [ switch ] svg:last-child {
	visibility: hidden;
	position: absolute;
	transform: rotate( 45deg );
}

editor-performance {
	display: flex;
	align-self: flex-start;
	font-size: 11px;
}

editor-performance graph-container {
	position: relative;
	width: 80px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: left;
	border-radius: 5px;
}

editor-performance graph-container:not(:last-child) {
	margin-right: .5em;
}

editor-performance graph-title {
	display: block;
	z-index: 1;
	margin: 0;
	font-weight: normal;
	position: absolute;
	top: 5px;
	left: 8px;
}

editor-performance graph-values {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 50px;
	border: 1px solid var( --border-color );
	border-radius: 5px;
	display: flex;
	align-content: stretch;
	opacity: .5;
}

editor-performance graph-values span {
	height: 100%;
	width: 100%;
	background-color: var( --border-color );
	transform: scaleY( 0 );
	transform-origin: bottom;
}

user-info {
	--user-info-panel-background: rgba( 0, 0, 0, .28 );
	--user-info-panel-button-background: rgba( 0, 0, 0, .18 );
	--user-info-panel-backdrop-filter: blur( 10px );
	--user-info-panel-webkit-backdrop-filter: blur( 10px );
	position: fixed;
	z-index: 15;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	font-size: 3rem;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

[ path="/experiments" ][ list="particles" ] user-info {
	--user-info-panel-background: rgba( 0, 0, 0, 1 );
	--user-info-panel-button-background: rgba( 0, 0, 0, 1 );
	--user-info-panel-backdrop-filter: none;
	--user-info-panel-webkit-backdrop-filter: none;
}

[ path="/experiments" ][ list="places" ] user-info {
	--user-info-panel-background: #8f73c8;
	--user-info-panel-button-background: #7d62b8;
	--user-info-panel-backdrop-filter: none;
	--user-info-panel-webkit-backdrop-filter: none;
}

user-info-text {
	position: absolute;
	bottom: 180px;
	padding: var( --margin-s ) var( --margin-m );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: opacity 1s;
	opacity: 0;
	pointer-events: none;
	border: 1px solid var( --color-white );
}

user-info-text[ name="World" ],
user-info-text[ name="Cosmos" ] {
	top: 50%;
	left: 50%;
	bottom: auto;
	width: 780px;
	max-width: calc( 100vw - 64px );
	padding: 22px 28px 20px;
	box-sizing: border-box;
	overflow: hidden;
	isolation: isolate;
	transform: translate( -50%, -50% );
	background: var( --user-info-panel-background );
	backdrop-filter: var( --user-info-panel-backdrop-filter );
	-webkit-backdrop-filter: var( --user-info-panel-webkit-backdrop-filter );
	border: var( --border-size ) solid var( --border-color );
}

:is(user-info-text[ name="World" ],
user-info-text[ name="Cosmos" ]) h5 {
	display: none;
}

:is(user-info-text[ name="World" ],
user-info-text[ name="Cosmos" ]) p {
	margin-top: 0;
	font-size: 18px;
	line-height: 1.6;
}

:is(user-info-text[ name="World" ],
user-info-text[ name="Cosmos" ]) user-info-actions {
	padding-top: 36px;
	display: flex;
	justify-content: center;
}

:is(user-info-text[ name="World" ],
user-info-text[ name="Cosmos" ]) user-info-button {
	cursor: pointer;
	min-width: 0;
	padding: 12px 18px;
	border: var( --border-size ) solid var( --border-color );
	background: var( --user-info-panel-button-background );
	font-family: var( --font-family-b );
	font-size: 16px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

user-info-text[ name="Images" ] {
	bottom: auto;
	top: 50%;
	left: 50%;
	overflow: hidden;
	isolation: isolate;
	transform: translate( -50%, -50% );
	width: min( 520px, calc( 100vw - 64px ) );
	padding: 20px 22px 18px;
	background: var( --user-info-panel-background );
	backdrop-filter: var( --user-info-panel-backdrop-filter );
	-webkit-backdrop-filter: var( --user-info-panel-webkit-backdrop-filter );
	border: var( --border-size ) solid var( --border-color );
}

user-info-text[ name="Images" ] h5 {
	display: none;
}

user-info-text[ name="Images" ] p {
	margin-top: 0;
	font-size: 18px;
	line-height: 1.6;
}

user-info-text[ name="Images" ] user-info-actions {
	padding-top: 36px;
	display: flex;
	justify-content: center;
}

user-info-text[ name="Images" ] user-info-button {
	cursor: pointer;
	min-width: 0;
	padding: 12px 18px;
	border: var( --border-size ) solid var( --border-color );
	background: var( --user-info-panel-button-background );
	font-family: var( --font-family-b );
	font-size: 16px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

user-info-text h5 {
	font-size: var( --font-size-l );
	font-family: var( --font-family-b );
	line-height: 1.4;
}

user-info-text p {
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	margin-top: var( --margin-xs );
	line-height: 1.6;
}

user-info-text[ visible ]:not( [ hidden ] ) {
	opacity: 1;
	pointer-events: all;
}

user-info-text[ hidden ] {
	opacity: 0;
	pointer-events: none;
}

[ path="/experiments" ][ list="particles" ]:not( [ intro-ready ] ) user-info-text {
	opacity: 0;
	pointer-events: none;
}

user-info-text[ name="Particles" ] {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: none;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	box-sizing: border-box;
	background: none;
	border: none;
	pointer-events: none;
}

user-info-text[ name="Particles" ] user-info-guide {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 380px;
	transition: opacity 1s var( --timing-function );
	will-change: opacity;
	pointer-events: all;
	overflow: hidden;
	isolation: isolate;
	transform: translateZ( 0 );
}

user-info-text[ name="Particles" ] user-info-guide::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	transform: translateZ( 0 );
}

user-info-text[ name="Particles" ] user-info-copy {
	position: relative;
	z-index: 1;
	padding: 22px 26px 20px;
	border: var( --border-size ) solid var( --border-color );
	text-align: center;
}

user-info-text[ name="Particles" ] h5 {
	display: none;
}

user-info-text[ name="Particles" ] p {
	margin-top: 0;
	font-size: 18px;
	line-height: 1.5;
	text-align: center;
}

user-info-text[ name="Particles" ] user-info-actions {
	padding-top: 36px;
	display: flex;
	justify-content: center;
	gap: 12px;
}

user-info-text[ name="Particles" ] user-info-button {
	cursor: pointer;
	min-width: 0;
	padding: 14px 20px;
	border: 1px solid rgba( 255, 255, 255, .9 );
	background: rgba( 0, 0, 0, .12 );
	font-family: var( --font-family-b );
	font-size: 18px;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: background-color .35s var( --timing-function ), border-color .35s var( --timing-function ), opacity .35s var( --timing-function );
}

user-info-text[ name="Particles" ] user-info-button[ hidden ] {
	display: none;
}

user-info-text[ name="Particles" ] user-info-button:not( [ visible ] )[ explore ] {
	display: none;
}

user-info-text[ name="Particles" ] user-info-visual {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba( 255, 255, 255, .92 );
	font-family: var( --font-family-c );
	font-size: 3rem;
	letter-spacing: .04em;
}

user-info-text[ name="Particles" ][ cue="intro" ] user-info-guide {
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 480px;
	max-width: calc( 100vw - 80px );
	min-height: 292px;
	box-sizing: border-box;
	padding: 22px 26px 20px;
	transition: opacity 1s var( --timing-function );
	background: var( --user-info-panel-background );
	backdrop-filter: var( --user-info-panel-backdrop-filter );
	-webkit-backdrop-filter: var( --user-info-panel-webkit-backdrop-filter );
	border: var( --border-size ) solid var( --border-color );
}

user-info-text[ name="Particles" ][ cue="intro" ] user-info-guide::before {
	display: none;
}

user-info-text[ name="Particles" ][ cue="intro" ] user-info-copy {
	padding: 0;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
}

user-info-text[ name="Particles" ][ cue="intro" ] user-info-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 100%;
}

user-info-text[ name="Particles" ][ cue="intro" ] p {
	width: 100%;
	max-width: 100%;
	overflow-wrap: anywhere;
	text-align: center;
}

user-info-text[ name="Particles" ][ cue="intro" ] p {
	text-align: left;
}

user-info-text[ name="Particles" ][ cue="intro" ] user-info-visual {
	display: none;
}

user-info-text[ name="Particles" ][ cue="timeline" ] user-info-guide {
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 460px;
	max-width: calc( 100vw - 80px );
	min-height: 200px;
	box-sizing: border-box;
	padding: 22px 26px 20px;
	transition: opacity 1s var( --timing-function );
	background: var( --user-info-panel-background );
	backdrop-filter: var( --user-info-panel-backdrop-filter );
	-webkit-backdrop-filter: var( --user-info-panel-webkit-backdrop-filter );
	border: var( --border-size ) solid var( --border-color );
}

user-info-text[ name="Particles" ][ cue="timeline" ] user-info-guide::before {
	display: none;
}

user-info-text[ name="Particles" ][ cue="timeline" ] user-info-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 100%;
	padding: 0;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
}

user-info-text[ name="Particles" ][ cue="timeline" ] user-info-visual {
	display: none;
}

user-info-text[ name="Particles" ][ cue="timeline" ] p {
	text-align: center;
}

user-info-text[ name="Particles" ][ cue="spectrum" ] user-info-guide {
	top: 50%;
	right: calc( var( --margin-m ) + 196px );
	transform: translateY( -50% );
	width: 380px;
	flex-direction: row;
	align-items: center;
	gap: 26px;
	overflow: visible;
	background: var( --user-info-panel-background );
	backdrop-filter: var( --user-info-panel-backdrop-filter );
	-webkit-backdrop-filter: var( --user-info-panel-webkit-backdrop-filter );
	border: var( --border-size ) solid var( --border-color );
}

user-info-text[ name="Particles" ][ cue="spectrum" ] user-info-guide::before {
	display: none;
}

user-info-text[ name="Particles" ][ cue="spectrum" ] user-info-guide user-info-copy {
	order: 1;
	width: 520px;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
	text-align: left;
}

user-info-text[ name="Particles" ][ cue="spectrum" ] user-info-visual {
	order: 2;
	position: absolute;
	left: calc( 100% + 18px );
	top: 50%;
	width: 92px;
	height: 32px;
	transform: translateY( -50% );
}

user-info-text[ name="Particles" ][ cue="spectrum" ] user-info-visual::before {
	content: '';
	position: absolute;
	left: 8px;
	right: 14px;
	top: 50%;
	height: 2px;
	background: currentColor;
	transform: translateY( -50% );
}

user-info-text[ name="Particles" ][ cue="spectrum" ] user-info-visual::after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	width: 12px;
	height: 12px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY( -50% ) rotate( 45deg );
}

user-info-text[ name="Particles" ][ cue="viewpoint" ] user-info-guide {
	left: 50%;
	bottom: 270px;
	transform: translateX( -50% );
	width: 760px;
	max-width: calc( 100vw - 80px );
	height: 210px;
	overflow: visible;
	background: var( --user-info-panel-background );
	backdrop-filter: var( --user-info-panel-backdrop-filter );
	-webkit-backdrop-filter: var( --user-info-panel-webkit-backdrop-filter );
	border: var( --border-size ) solid var( --border-color );
}

user-info-text[ name="Particles" ][ cue="viewpoint" ] user-info-guide::before {
	display: none;
}

user-info-text[ name="Particles" ][ cue="viewpoint" ] user-info-copy {
	order: 1;
	margin-bottom: 14px;
	width: 760px;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
}

user-info-text[ name="Particles" ][ cue="viewpoint" ] user-info-visual {
	order: 2;
	position: absolute;
	left: 50%;
	top: calc( 100% + 18px );
	width: 32px;
	height: 92px;
	transform: translateX( -50% );
}

user-info-text[ name="Particles" ][ cue="viewpoint" ] user-info-visual::before {
	content: '';
	position: absolute;
	top: 8px;
	bottom: 14px;
	left: 50%;
	width: 2px;
	background: currentColor;
	transform: translateX( -50% );
}

user-info-text[ name="Particles" ][ cue="viewpoint" ] user-info-visual::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 10px;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateX( -50% ) rotate( 45deg );
}

user-info-text[ name="Particles" ][ cue="spectrum" ] p {
	text-align: left;
	white-space: nowrap;
}

user-info-text[ name="Particles" ][ visible ]:not( [ hidden ] ) {
	opacity: 1;
	pointer-events: none;
}

user-info-text[ name="Particles" ][ visible ]:not( [ hidden ] ) user-info-guide {
	opacity: 1;
	pointer-events: all;
}

user-info-text[ name="Particles" ]:not( [ visible ] ) {
	pointer-events: none;
}

user-info-text[ name="Particles" ]:not( [ visible ] ) user-info-guide {
	opacity: 0;
	pointer-events: none;
}

user-info-text[ name="Particles" ][ hidden ] {
	opacity: 1;
	pointer-events: none;
}

user-info-text[ name="Particles" ][ hidden ] user-info-guide {
	opacity: 0;
	pointer-events: none;
}

[ path="/experiments" ][ list="particles" ]:not( [ intro-ready ] ) user-info-text[ name="Particles" ] {
	opacity: 1;
	pointer-events: none;
}

[ path="/experiments" ][ list="particles" ]:not( [ intro-ready ] ) user-info-text[ name="Particles" ] user-info-guide {
	opacity: 0;
	pointer-events: none;
}

@media ( max-width: 1024px ) {
	user-info-text {
		bottom: 160px;
		padding: var( --margin-s );
		margin: 0 var( --margin-m );
	}

	user-info-text[ name="World" ],
user-info-text[ name="Cosmos" ] {
		top: 50%;
		bottom: auto;
		left: 50%;
		transform: translate( -50%, -50% );
	}

	user-info-text[ name="Images" ] {
		top: 50%;
		bottom: auto;
		left: 50%;
		transform: translate( -50%, -50% );
	}

	user-info-text[ name="Particles" ][ cue="spectrum" ] user-info-guide {
		right: calc( var( --margin-m ) + 148px );
	}

	user-info-text[ name="Particles" ][ cue="viewpoint" ] user-info-guide {
		bottom: 132px;
	}

}

@media ( max-width: 650px ) {
	user-info-text[ name="World" ],
user-info-text[ name="Images" ],
user-info-text[ name="Cosmos" ] {
		top: 50%;
		right: auto;
		bottom: auto;
		left: 50%;
		margin: 0;
		transform: translate( -50%, -50% );
		width: calc( 100vw - 40px );
		max-width: calc( 100vw - 40px );
		padding: 18px 18px 16px;
	}

	:is(user-info-text[ name="World" ],
user-info-text[ name="Images" ],
user-info-text[ name="Cosmos" ]) p {
		font-size: 15px;
		line-height: 1.5;
		text-align: center;
	}

	:is(user-info-text[ name="World" ],
user-info-text[ name="Images" ],
user-info-text[ name="Cosmos" ]) user-info-actions {
		padding-top: 22px;
	}

	:is(user-info-text[ name="World" ],
user-info-text[ name="Images" ],
user-info-text[ name="Cosmos" ]) user-info-button {
		width: auto;
		min-width: 120px;
		padding: 11px 18px;
		font-size: 15px;
	}

	user-info-text h5 {
		font-size: var( --font-size-s );
	}

	user-info-text h5 br {
		display: none;
	}

	user-info-text p {
		font-size: var( --font-size-xxs );
	}

	user-info-text p br {
		display: none;
	}

	user-info-text[ name="Particles" ] {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 0;
		transform: none;
		width: 100%;
		max-width: 100%;
		padding: 0;
	}

	user-info-text[ name="Particles" ][ name="World" ],
user-info-text[ name="Particles" ][ name="Images" ],
user-info-text[ name="Particles" ][ name="Cosmos" ] {
		top: 50%;
		left: 50%;
		bottom: auto;
		transform: translate( -50%, -50% );
		width: calc( 100vw - ( var( --margin-s ) * 2 ) );
		max-width: calc( 100vw - ( var( --margin-s ) * 2 ) );
		padding: 18px 18px 16px;
	}

	:is(user-info-text[ name="Particles" ][ name="World" ],
user-info-text[ name="Particles" ][ name="Images" ],
user-info-text[ name="Particles" ][ name="Cosmos" ]) p {
		font-size: 15px;
		line-height: 1.55;
		text-align: center;
	}

	:is(user-info-text[ name="Particles" ][ name="World" ],
user-info-text[ name="Particles" ][ name="Images" ],
user-info-text[ name="Particles" ][ name="Cosmos" ]) user-info-actions {
		padding-top: 24px;
	}

	:is(user-info-text[ name="Particles" ][ name="World" ],
user-info-text[ name="Particles" ][ name="Images" ],
user-info-text[ name="Particles" ][ name="Cosmos" ]) user-info-button {
		width: auto;
		min-width: 120px;
		padding: 11px 18px;
		font-size: 15px;
	}

	user-info-text[ name="Particles" ] user-info-guide {
		max-width: calc( 100vw - 32px );
	}

	user-info-text[ name="Particles" ] user-info-copy {
		padding: 18px 18px 16px;
	}

	user-info-text[ name="Particles" ] p {
		font-size: 16px;
	}

	user-info-text[ name="Particles" ] user-info-actions {
		padding-top: 18px;
		flex-wrap: wrap;
	}

	user-info-text[ name="Particles" ] user-info-button {
		width: 100%;
		font-size: 16px;
	}

	user-info-text[ name="Particles" ][ cue="mobile" ] user-info-guide {
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		transform: translate( -50%, -50% );
		width: calc( 100vw - 40px );
		max-width: calc( 100vw - 40px );
		min-height: auto;
		padding: 18px 18px 16px;
		background: var( --user-info-panel-background );
		backdrop-filter: var( --user-info-panel-backdrop-filter );
		-webkit-backdrop-filter: var( --user-info-panel-webkit-backdrop-filter );
		border: var( --border-size ) solid var( --border-color );
	}

	user-info-text[ name="Particles" ][ cue="mobile" ] user-info-copy {
		width: 100%;
		padding: 0;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: none;
	}

	user-info-text[ name="Particles" ][ cue="mobile" ] user-info-visual {
		display: none;
	}

	user-info-text[ name="Particles" ][ cue="mobile" ] p {
		font-size: 15px;
		line-height: 1.5;
		text-align: center;
	}

	user-info-text[ name="Particles" ][ cue="mobile" ] user-info-actions {
		padding-top: 24px;
	}

	user-info-text[ name="Particles" ][ cue="mobile" ] user-info-button {
		width: auto;
		min-width: 120px;
		padding: 11px 18px;
		font-size: 15px;
	}

	user-info-text[ name="Particles" ][ cue="intro" ] user-info-guide {
		top: 50%;
		width: calc( 100vw - 32px );
		max-width: calc( 100vw - 32px );
		min-height: 240px;
	}

	user-info-text[ name="Particles" ][ cue="timeline" ] user-info-guide {
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		transform: translate( -50%, -50% );
		width: calc( 100vw - 40px );
		max-width: calc( 100vw - 40px );
		min-height: auto;
		padding: 18px 18px 16px;
	}

	user-info-text[ name="Particles" ][ cue="timeline" ] p {
		font-size: 15px;
		line-height: 1.5;
		text-align: center;
	}

	user-info-text[ name="Particles" ][ cue="timeline" ] user-info-actions {
		padding-top: 24px;
	}

	user-info-text[ name="Particles" ][ cue="timeline" ] user-info-button {
		width: auto;
		min-width: 120px;
		padding: 11px 18px;
		font-size: 15px;
	}

	user-info-text[ name="Particles" ][ cue="spectrum" ] user-info-guide {
		right: calc( var( --margin-s ) + 84px );
		gap: 10px;
	}

	user-info-text[ name="Particles" ][ cue="spectrum" ] user-info-guide user-info-copy {
		width: 100%;
	}

	user-info-text[ name="Particles" ][ cue="viewpoint" ] user-info-guide {
		bottom: 156px;
	}

	user-info-text[ name="Particles" ][ cue="intro" ] user-info-copy {
		width: 100%;
	}

	user-info-text[ name="Particles" ][ cue="spectrum" ] p {
		white-space: normal;
	}

}

@media ( hover: hover ) {
	user-info-text[ name="Particles" ] user-info-button:hover {
		background: rgba( 255, 255, 255, .08 );
		border-color: rgba( 255, 255, 255, .5 );
	}

}

video-block {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
}

[ path="/augustus-ar" ] video-block {
	visibility: hidden;
	position: absolute;
}

video-block[ fullscreen ] {
	position: absolute;
	padding: 0;
	border: none;
}

video-block[ border ] {
	height: auto;
}

video {
	width: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
}

video:not( [ controls ] )::-webkit-media-controls,
video:not( [ controls ] )::-webkit-media-controls-panel,
video:not( [ controls ] )::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
	opacity: 0 !important;
}

[ fullscreen ] video {
	height: 100%;
}

[ border ] video {
	max-height: 100vh;
	max-height: calc(var(--vh, 1vh) * 100);
	object-fit: contain
}

@media ( max-width: 650px ) {
	video-block[ fullscreen ] {
		position: relative;
	}

	video-block[ border ] {
		padding: 0;
	}

}

section-type-13 {
	padding: calc( var( --margin-m ) * 2 ) 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var( --color-black );
}

youtube-frame {
	width: min( 80vw, 1440px );
	aspect-ratio: 16 / 9;
	display: block;
	position: relative;
	background: #000;
	overflow: hidden;
}

youtube-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #000;
}

youtube-note {
	width: min( 80vw, 1440px );
	margin-top: 14px;
	font-family: var( --font-family-c );
	font-size: 1.6rem;
	line-height: 1.6;
	text-align: center;
}

@media ( max-width: 650px ) {
	section-type-13 {
		padding: var( --margin-m ) 0;
	}

	youtube-frame {
		width: calc( 100vw - ( var( --margin-s ) * 2 ) );
	}

	youtube-note {
		width: calc( 100vw - ( var( --margin-s ) * 2 ) );
		font-size: 1.4rem;
	}

}

section-type-15 {
	padding: calc( var( --margin-m ) * 2 ) 0;
	display: flex;
	justify-content: center;
	background: var( --color-black );
}

dailymotion-frame {
	width: min( 80vw, 1440px );
	aspect-ratio: 16 / 9;
	display: block;
	position: relative;
	background: radial-gradient( circle at 50% 38%, rgba( 255, 255, 255, .08 ) 0%, rgba( 255, 255, 255, 0 ) 34% ), linear-gradient( 145deg, rgba( 24, 33, 50, 1 ) 0%, rgba( 0, 0, 0, 1 ) 100% );
	overflow: hidden;
}

dailymotion-frame::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 0, 0, 0, .18 ) 0%, rgba( 0, 0, 0, .48 ) 100% ), var( --poster-image, none ) center center / cover no-repeat;
	opacity: .9;
	pointer-events: none;
}

dailymotion-frame iframe,
dailymotion-frame button,
dailymotion-frame [dailymotion-player] {
	width: 100%;
	height: 100%;
	display: block;
}

dailymotion-frame iframe {
	border: 0;
	background: #000;
}

dailymotion-frame button {
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var( --color-white );
	background: transparent;
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

dailymotion-frame button span {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 22px 28px;
	border: 1px solid rgba( 255, 255, 255, .18 );
	background: rgba( 7, 9, 15, .72 );
	backdrop-filter: blur( 12px );
	font-family: var( --font-family-c );
	font-size: 1.4rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

dailymotion-frame button i {
	width: 70px;
	height: 50px;
	display: inline-block;
	position: relative;
	border-radius: 14px;
	background: rgba( 255, 255, 255, .16 );
}

dailymotion-frame button i::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 16px solid #fff;
	transform: translate( -30%, -50% );
}

@media ( max-width: 650px ) {
	section-type-15 {
		padding: var( --margin-m ) 0;
	}

	dailymotion-frame {
		width: calc( 100vw - ( var( --margin-s ) * 2 ) );
	}

	dailymotion-frame button span {
		padding: 18px 20px;
		font-size: 1.15rem;
		gap: 14px;
	}

	dailymotion-frame button i {
		width: 58px;
		height: 42px;
	}

}

section-type-16 {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 140px var( --margin-m );
	background: var( --color-black );
	text-align: center;
}

section-type-16 p {
	max-width: 1200px;
	font-family: var( --font-family-a );
	font-size: clamp( 2.8rem, 4vw, 5.2rem );
	line-height: 1.3;
	letter-spacing: .04em;
}

@media ( max-width: 650px ) {
	section-type-16 {
		padding: 88px var( --margin-s );
	}

	section-type-16 p {
		font-size: clamp( 2.2rem, 7vw, 3.4rem );
	}

}

section-type-14 {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: calc( var( --margin-m ) * 3 ) calc( var( --margin-m ) * 2 );
	background: var( --color-black );
	text-align: center;
}

section-type-14 article {
	width: min( 1600px, calc( 100vw - ( var( --margin-m ) * 2 ) ) );
}

section-type-14 h3 {
	margin-bottom: var( --margin-m );
	font-size: clamp( 2.25rem, 4vw, 4rem );
	text-align: center;
}

section-type-14 p {
	font-size: clamp( 2rem, 3vw, 3.25rem );
	font-family: var( --font-family-c );
	line-height: 2;
}

@media ( max-width: 1024px ) {
	section-type-14 {
		padding: calc( var( --margin-m ) * 2 ) var( --margin-s );
	}

	section-type-14 p {
		font-size: clamp( 1.5rem, 5vw, 2.25rem );
	}

}

@media ( max-width: 650px ) {
	section-type-14 h3 {
		font-size: clamp( 1.8rem, 7vw, 2.4rem );
	}

	section-type-14 p {
		font-size: 1.9rem;
		line-height: 1.7;
	}

}

section-type-4 {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: calc( var( --margin-m ) * 2 );
	font-family: var( --font-family-c );
}

section-type-4 > p {
	max-width: 40vw;
	padding: var( --margin-m );
	font-size: var( --font-size-l );
	line-height: 1.8;
}

section-type-4 media-column {
	width: fit-content;
	max-width: calc( 100vw - ( var( --margin-m ) * 4 ) );
	display: flex;
	flex-direction: column;
	align-items: center;
}

section-type-4 media-caption {
	width: 0;
	min-width: 100%;
	align-self: stretch;
}

section-type-4 video-block,
section-type-4 video,
section-type-4 img {
	height: 90vh;
	max-height: 90vh;
	object-fit: cover;
}

section-type-4[ eighty-vh ] video-block,
section-type-4[ eighty-vh ] video,
section-type-4[ eighty-vh ] img {
	height: 80vh;
	max-height: 80vh;
}

section-type-4 ul {
	margin-left: var( --margin-m );
	font-size: var( --font-size-s );
}

section-type-4 li {
	display: flex;
	flex-direction: column;
}

section-type-4 li:not( :last-child ) {
	margin-bottom: var( --margin-xs );
}

section-type-4 li h5 {
	font-weight: bold;
}

section-type-4 li p {
	line-height: 1.5;
}

section-type-4 figcaption {
	display: block;
	width: min( 800px, 100% );
	margin-top: var( --margin-s );
	font-family: var( --font-family-c );
	font-size: var( --font-size-m );
	line-height: 1.6;
	text-align: left;
	align-self: flex-start;
}

section-type-4[ text-centered ] media-caption {
	display: flex;
	justify-content: center;
}

section-type-4[ text-centered ] figcaption {
	text-align: center;
	align-self: center;
}

section-type-4 project-caption {
	font-weight: 300;
}

section-type-4 project-explain {
	font-weight: 300;
}

section-type-4 project-caption + project-explain::before {
	content: ' ';
}

@media ( max-width: 650px ) {
	section-type-4 {
		padding: var( --margin-m );
		flex-direction: column;
	}

	section-type-4 > p {
		padding: var( --margin-m ) 0;
		margin-top: var( --margin-s );
		max-width: initial;
	}

	section-type-4 media-column {
		width: 100%;
		max-width: 100vw;
	}

	:is(section-type-4 video-block,
section-type-4 video,
section-type-4 img) {
		width: 100vw;
		max-width: 100vw;
		height: auto;
		max-height: none;
		margin-left: calc( var( --margin-m ) * -1 );
		margin-right: calc( var( --margin-m ) * -1 );
		object-fit: contain;
		object-position: center top;
	}

	:is(section-type-4[ eighty-vh ] video-block,
section-type-4[ eighty-vh ] video,
section-type-4[ eighty-vh ] img) {
		height: auto;
		max-height: none;
	}

	section-type-4 ul {
		margin-left: 0;
		column-count: 2;
		margin-top: var( --margin-m );
		column-gap: var( --margin-m );
	}

	section-type-4 figcaption {
		margin-top: calc( var( --margin-s ) * .5 );
		margin-bottom: calc( var( --margin-s ) * 2 );
		width: 100%;
		font-size: var( --font-size-s );
		line-height: var( --line-height );
	}

}

section-type-5 {
	display: flex;
	width: 100vw;
	height: 100%;
	position: absolute;
	top: 0;
	pointer-events: none;
}

section-type-5 > * {
	pointer-events: all;
}

section-type-5 aside-block img {
	margin: var( --margin-m ) 0;
}

section-type-5 project-scene-controls {
	position: fixed;
	left: 50%;
	bottom: var( --margin-m );
	transform: translateX( -50% );
	display: flex;
	align-items: stretch;
	justify-content: center;
	pointer-events: all;
	border: var( --border-size ) solid var( --border-color );
	background: rgba( 0, 0, 0, .28 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
}

section-type-5 project-scene-control {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 0 24px;
	font-size: 1.65rem;
	font-family: var( --font-family-c );
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

section-type-5 project-scene-control:not( :last-child ) {
	border-right: var( --border-size ) solid var( --border-color );
}

section-type-5 project-scene-control[ active ] {
	background: var( --color-white );
	color: var( --color-black );
}

@media ( max-width: 650px ) {
	section-type-5 project-scene-controls {
		bottom: var( --margin-s );
	}

}

@media ( hover: hover ) {
	section-type-5 project-scene-control:hover {
		background: rgba( 255, 255, 255, .08 );
	}

}

aside-block {
	z-index: 4;
	position: absolute;
	background-color: var( --background-color );
	bottom: var( --margin-m );
	left: var( --margin-m );
	padding: var( --margin-m );
	overflow: scroll;
	transition: transform .5s var( --timing-function ), opacity .5s var( --timing-function );
	border: var( --border-size ) solid var( --border-color );
}

[ view-exit ] aside-block {
	transition: transform .5s var( --timing-function ), opacity .5s var( --timing-function );
}

[ view-enter ] aside-block:not( [ scrollable ] ),
[ view-enter ][ display-aside ] aside-block[ scrollable ]:not( [ tag-linked-panel ] ),
[ view-enter ]  aside-block[ visible ][ scrollable ] {
	transform: translateX( 0 );
}

aside-block[ scrollable ] {
	transform: translateX( -125% );
	max-width: 450px;
	bottom: initial;
	left: 0;
	top: 0;
	bottom: 0;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	border: none;
	border-right: var( --border-size ) solid var( --border-color );
	transition: transform .85s var( --timing-function ), opacity .85s var( --timing-function );
	opacity: 1;
}

aside-block[ scrollable ] default-button {
	display: flex;
	right: var( --margin-m );
	top: var( --margin-m );
}

aside-block[ scrollable ] scrolling-block {
	padding: var( --margin-m ) 0;
}

aside-block[ scrollable ][ floating-panel ] {
	transform: translateX( calc( -100% - var( --margin-m ) - 16px ) );
	top: calc( var( --margin-m ) + 84px );
	bottom: var( --margin-m );
	left: var( --margin-m );
	width: min( 420px, calc( 100vw - 180px ) );
	max-width: min( 420px, calc( 100vw - 180px ) );
	max-height: calc( 100vh - 84px - ( var( --margin-m ) * 2 ) );
	border: var( --border-size ) solid var( --border-color );
	border-right: var( --border-size ) solid var( --border-color );
	background: rgba( 0, 0, 0, .28 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	scrollbar-width: thin;
	scrollbar-color: rgba( 255, 255, 255, .45 ) rgba( 255, 255, 255, .08 );
}

aside-block[ scrollable ][ floating-panel ]::-webkit-scrollbar {
	display: block;
	width: 8px;
}

aside-block[ scrollable ][ floating-panel ]::-webkit-scrollbar-track {
	background: rgba( 255, 255, 255, .08 );
}

aside-block[ scrollable ][ floating-panel ]::-webkit-scrollbar-thumb {
	background: rgba( 255, 255, 255, .45 );
	border-radius: 999px;
}

aside-block[ scrollable ][ floating-panel ] default-button {
	display: flex;
	top: 12px;
	right: 12px;
	z-index: 1;
	background: rgba( 255, 255, 255, .08 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	border: var( --border-size ) solid rgba( 255, 255, 255, .28 );
}

aside-block[ scrollable ][ floating-panel ] default-button button-label {
	padding: 8px 12px;
	font-size: var( --font-size-s );
	font-family: var( --font-family-b );
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
}

aside-block[ scrollable ][ tag-linked-panel ] default-button {
	display: flex;
}

aside-block[ scrollable ][ tag-linked-panel ] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

[ view-enter ] aside-block[ scrollable ][ tag-linked-panel ][ visible ] {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

aside-block scrolling-block {
	position: relative;
	display: flex;
	flex-direction: column;
}

aside-block default-button {
	display: none;
	position: absolute
}

aside-block h3,
aside-block h4 {
	font-size: var( --font-size-xl );
	max-width: 600px;
}

aside-block h4 {
	margin-top: 2px;
}

aside-block p {
	max-width: 600px;
	font-size: var( --font-size-s );
	font-family: var( --font-family-c );
	line-height: var( --line-height );
	margin-top: var( --margin-s );
}

@media ( max-width: 650px ) {
	aside-block:not( [ scrollable ] ) {
		padding: var( --margin-s );
		left: var( --margin-s );
		right: var( --margin-s );
	}

	aside-block:not( [ scrollable ] ) scrolling-block ul {
		display: none;
	}

	aside-block[ scrollable ] {
		width: 100%;
		border-right: none;
	}

	aside-block[ scrollable ][ floating-panel ] {
		top: calc( var( --margin-s ) + 84px );
		right: var( --margin-s );
		bottom: 180px;
		left: var( --margin-s );
		width: auto;
		max-width: none;
		max-height: none;
	}

	aside-block[ scrollable ][ photogrammetry-library ] {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		height: calc( var( --vh, 1vh ) * 100 );
		max-width: none;
		max-height: none;
		min-height: 100vh;
		min-height: 100dvh;
		min-height: calc( var( --vh, 1vh ) * 100 );
		padding: 0;
		box-sizing: border-box;
		background: rgba( 0, 0, 0, .96 );
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: none;
		scrollbar-width: none;
		transform: translateX( -100% );
	}

	aside-block[ scrollable ][ photogrammetry-library ] default-button {
		display: none;
	}

	aside-block[ scrollable ][ photogrammetry-library ] scrolling-block {
		min-height: 100%;
		padding: calc( 54px + var( --margin-s ) * 2 ) var( --margin-s ) 120px;
		box-sizing: border-box;
	}

	[ view-enter ][ display-aside ] aside-block[ scrollable ][ photogrammetry-library ] {
		transform: translateX( 0 );
	}

	aside-block[ scrollable ][ tag-linked-panel ] {
		position: fixed;
		top: 50%;
		right: auto;
		bottom: auto;
		left: 50%;
		width: min( 420px, calc( 100vw - ( var( --margin-s ) * 2 ) ) );
		max-width: min( 420px, calc( 100vw - ( var( --margin-s ) * 2 ) ) );
		max-height: min( calc( ( var( --vh, 1vh ) * 100 ) - ( var( --margin-s ) * 2 ) ), 70vh );
		padding: calc( 52px + var( --margin-s ) ) var( --margin-s ) var( --margin-s );
		transform: translate( -50%, calc( -50% - 8px ) );
	}

	aside-block[ scrollable ][ tag-linked-panel ] default-button {
		position: absolute;
		top: var( --margin-s );
		right: var( --margin-s );
		left: auto;
		margin: 0;
		z-index: 2;
		width: fit-content;
	}

	aside-block[ scrollable ][ tag-linked-panel ] scrolling-block {
		padding: 0;
		height: 100%;
	}

	[ view-enter ] aside-block[ scrollable ][ tag-linked-panel ][ visible ] {
		transform: translate( -50%, -50% );
	}

	:is(aside-block h3,
aside-block h4) {
		font-size: var( --font-size-l );
	}

}

@media ( max-width: 1024px ) {
	aside-block[ scrollable ] default-button {
		right: var( --margin-s );
		top: var( --margin-s );
	}

	aside-block[ scrollable ][ floating-panel ] {
		width: min( 380px, calc( 100vw - ( var( --margin-m ) * 2 ) ) );
		max-width: min( 380px, calc( 100vw - ( var( --margin-m ) * 2 ) ) );
	}

}

panorama-buttons {
	pointer-events: none;
	position: fixed;
	height: 100%;
	width: 100%;
}

panorama-buttons button {
	top: 0;
	left: 0;
	pointer-events: all;
	position: fixed;
	transition: opacity .5s var( --timing-function );
	opacity: 0;
	display: flex;
	flex-direction: column;
	pointer-events: none;
}

panorama-buttons button[ clickable ] {
	cursor: pointer;
}

panorama-buttons button[ visible ] {
	opacity: 1;
	pointer-events: all;
}

panorama-buttons img {
	max-width: 250px;
}

panorama-buttons img:not( :last-child ) {
	margin-bottom: 5px;
}

panorama-map-point {
	position: absolute;
	transform: translate( -50%, -50% );
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

panorama-map-point[ active ] span {
	border: 2px solid white;
	background: black;
}

panorama-map-point[ active ] svg {
	visibility: visible
}

panorama-map-point:hover {
	transform: translate( -50%, -50% ) scale( 1.1 );
}

panorama-map-point svg {
	position: absolute;
	top: 0;
	left: 0;
	margin: auto;
	height: 100%;
	width: 100%;
	transform: rotate( var( --angle ) ) scale( 2 );
	visibility: hidden;
}

panorama-map-point svg path {
	fill: url( #gradient );
}

panorama-map-point span {
	position: relative;
	z-index: 1;
	padding: 0;
	height: 30px;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid white;
	font-family: var( --font-family-a );
	background-color: var( --background-color );
	font-size: var( --font-size-s );
}

panorama-maps-block {
	position: absolute;
	top: var( --margin-m );
	right: var( --margin-m );
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	background-size: cover;
	cursor: default;
}

panorama-maps-block default-button {
	margin-top: var( --margin-s );
}

panorama-map {
	position: relative;
	border: 1px solid rgba( 255, 255, 255, .5 );
}

panorama-map:nth-child( 1 ) {
	display: flex
}

panorama-map:nth-child( 2 ) {
	display: none
}

[ miniature ] panorama-map:nth-child( 1 ) {
	display: none
}

[ miniature ] panorama-map:nth-child( 2 ) {
	display: flex
}

panorama-map img {
	max-height: 500px;
}

@media ( max-width: 1024px ) {
	panorama-map-point span {
		height: 20px;
		width: 20px;
		font-size: var( --font-size-xs );
	}

	panorama-maps-block {
		top: var( --margin-s );
		right: var( --margin-s );
	}

	panorama-map img {
		max-height: 35vh;
	}

}

section-type-6 {
	display: flex;
	width: 100vw;
	height: 100%;
	position: absolute;
	top: 0;
}

section-type-6 aside-block {
	pointer-events: all;
}

section-type-6 photogrammetry-controls {
	position: fixed;
	left: 50%;
	bottom: var( --margin-m );
	transform: translateX( -50% );
	display: flex;
	align-items: stretch;
	justify-content: center;
	pointer-events: all;
	border: var( --border-size ) solid var( --border-color );
	background: rgba( 0, 0, 0, .28 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	box-sizing: border-box;
	overflow: hidden;
	isolation: isolate;
}

section-type-6 photogrammetry-library-toggle {
	display: none;
}

section-type-6 photogrammetry-control {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 0 24px;
	font-size: 1.65rem;
	font-family: var( --font-family-c );
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

section-type-6 photogrammetry-control:not( :last-child ) {
	border-right: var( --border-size ) solid var( --border-color );
}

section-type-6 photogrammetry-control[ active ] {
	background: var( --color-white );
	color: var( --color-black );
}

artwork-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

artwork-list li {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min( 320px, 100% );
	padding: var( --margin-m ) 0;
	transition: all .75s var( --timing-function );
}

artwork-list li:not( :last-child ) {
	border-bottom: var( --border-size ) solid var( --border-color );
}

artwork-list artwork-description {
	margin-top: var( --margin-m );
	margin-left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

artwork-list img {
	position: relative;
	max-height: 200px;
	width: min( 220px, 100% );
	object-fit: contain;
	object-position: center;
}

artwork-list h3 {
	font-size: var( --font-size-l ) !important;
}

artwork-list p {
	line-height: 1.2em;
	margin-top: 5px;
}

@media ( max-width: 650px ) {
	section-type-6 photogrammetry-controls {
		left: 50%;
		bottom: var( --margin-s );
		transform: translateX( -50% );
	}

	section-type-6 photogrammetry-library-toggle {
		position: fixed;
		top: var( --margin-s );
		right: var( --margin-s );
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 0;
		padding: var( --margin-xs ) var( --margin-s );
		border: var( --border-size ) solid var( --border-color );
		background: rgba( 0, 0, 0, .28 );
		backdrop-filter: blur( 10px );
		-webkit-backdrop-filter: blur( 10px );
		color: var( --color-white );
		font-size: var( --font-size-m );
		font-family: var( --font-family-c );
		line-height: 1;
		letter-spacing: .04em;
		text-transform: uppercase;
		pointer-events: all;
		box-sizing: border-box;
	}

	section-type-6 photogrammetry-control:not( :last-child ) {
		border-right: var( --border-size ) solid var( --border-color );
		border-bottom: none;
	}

}

@media ( hover: hover ) {
	section-type-6 photogrammetry-control:hover {
		background: rgba( 255, 255, 255, .08 );
	}

}

home-view {
	position: relative;
	min-width: 100vw;
	min-height: 100vh;
	min-height: calc( var( --vh, 1vh ) * 100 );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc( var( --margin-m ) * 2 );
	overflow: hidden;
}

home-content {
	position: relative;
	z-index: 35;
	width: min( 1720px, calc( 100vw - 120px ) );
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var( --color-white );
	pointer-events: none;
}

[ path="/" ][ home-copy-ready ] home-content {
	pointer-events: all;
}

home-reveal {
	position: fixed;
	inset: 0;
	z-index: 39;
	background: var( --color-black );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 1.8s var( --timing-function ), visibility 0s linear 1.8s;
}

[ revealing ] home-reveal {
	opacity: 1;
	visibility: visible;
	transition: none;
}

home-title {
	font-family: var( --font-family-a );
	font-size: clamp( 4.2rem, 4.9vw, 8.2rem );
	line-height: 1.02;
	letter-spacing: .04em;
	text-transform: none;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
}

[ path="/" ][ home-copy-ready ] home-title {
	opacity: 1;
	visibility: visible;
}

[ path="/" ][ home-gate-visible ] home-title {
	opacity: 0;
	visibility: hidden;
}

home-copy {
	margin-top: 28px;
	font-family: var( --font-family-c );
	font-size: clamp( 1.9rem, 1.6vw, 3rem );
	line-height: 1.6;
	text-transform: none;
	opacity: 0;
	visibility: hidden;
}

[ path="/" ][ home-copy-ready ] home-copy {
	opacity: 1;
	visibility: visible;
}

[ path="/" ][ home-gate-visible ] home-copy {
	opacity: 0;
	visibility: hidden;
}

home-copy span {
	display: block;
	white-space: nowrap;
}

home-mobile-break {
	display: none;
}

home-mobile-only {
	display: none;
}

home-desktop-only {
	display: block;
}

home-start {
	cursor: pointer;
	position: relative;
	z-index: 36;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: all;
	margin-top: 84px;
	padding: 18px;
	border: var( --border-size ) solid var( --border-color );
	overflow: hidden;
	isolation: isolate;
	font-family: var( --font-family-b );
	font-size: clamp( 2.1rem, 1.5vw, 2.4rem );
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --color-white );
	background: transparent;
	opacity: 0;
	transform: translateZ( 0 );
	visibility: hidden;
	will-change: opacity, transform;
	transition: background-color .25s var( --timing-function ), border-color .25s var( --timing-function );
}

[ path="/" ][ home-copy-ready ] home-start {
	opacity: 1;
	transform: translateZ( 0 );
	visibility: visible;
}

[ path="/" ][ home-gate-visible ] home-start {
	opacity: 0;
	transform: translateZ( 0 );
	visibility: hidden;
}

home-start::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba( 8, 8, 8, .34 );
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	transform: translateZ( 0 );
	will-change: opacity;
}

home-gate {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px;
	background: var( --color-black );
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0s linear .45s;
}

home-gate::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url( "/public/common/Grid.svg" );
	background-size: 50px;
	background-position: center center;
	opacity: .25;
}

[ path="/" ][ home-gate-visible ] home-gate {
	pointer-events: all;
	visibility: visible;
	transition-delay: 0s;
}

[ gate-closing ] home-gate {
	pointer-events: none;
}

home-gate-panel {
	position: relative;
	z-index: 1;
	width: min( 980px, calc( 100vw - 120px ) );
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var( --color-white );
}

home-gate-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	opacity: 0;
	transform: translateY( 16px );
	transition: opacity .6s var( --timing-function ), transform .6s var( --timing-function );
}

[ gate-entered ] home-gate-copy {
	opacity: 1;
	transform: none;
}

home-gate-copy h2 {
	font-family: var( --font-family-a );
	font-size: clamp( 3.2rem, 3.4vw, 5.2rem );
	line-height: 1.05;
	letter-spacing: .05em;
	text-transform: uppercase;
}

home-gate-copy p {
	max-width: 34ch;
	font-family: var( --font-family-c );
	font-size: clamp( 1.6rem, 1.2vw, 2rem );
	line-height: 1.8;
}

home-gate-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: 50px;
}

home-gate-options {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp( 52px, 7vw, 108px );
	width: 100%;
	opacity: 0;
	transform: translateY( 16px );
	transition: opacity .6s var( --timing-function ), transform .6s var( --timing-function );
}

[ gate-entered ] home-gate-options {
	opacity: 1;
	transform: none;
	transition-delay: .12s;
}

[ home-gate-option ] {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 0;
	border: none;
	background: transparent;
	color: rgba( 255, 255, 255, .78 );
	transition: color .35s var( --timing-function );
}

[ home-gate-option ][ active ] {
	color: var( --color-green );
}

[ home-gate-option ][ active ] home-gate-option-frame {
	box-shadow: inset 0 0 0 var( --border-size ) currentColor;
}

home-gate-option-frame {
	width: clamp( 82px, 6vw, 98px );
	height: clamp( 82px, 6vw, 98px );
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	box-shadow: inset 0 0 0 var( --border-size ) rgba( 255, 255, 255, 1 );
	background: rgba( 0, 0, 0, .9 );
	transition: box-shadow .35s var( --timing-function ), background-color .35s var( --timing-function ), color .35s var( --timing-function );
}

home-gate-option-frame svg {
	width: 34px;
	height: 34px;
}

home-gate-option-frame path {
	fill: currentColor !important;
}

home-gate-option-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

home-gate-option-icon > *:nth-child( 2 ) {
	display: none;
}

[ active ] home-gate-option-icon > *:first-child {
	display: none;
}

[ active ] home-gate-option-icon > *:nth-child( 2 ) {
	display: block;
}

home-gate-option-label {
	font-family: var( --font-family-b );
	font-size: clamp( 1.35rem, 1vw, 1.7rem );
	letter-spacing: .08em;
	text-transform: uppercase;
}

[ home-gate-enter ] {
	cursor: pointer;
	margin-top: 76px;
	padding: 16px 46px;
	min-width: 220px;
	border: none;
	box-shadow: inset 0 0 0 var( --border-size ) rgba( 255, 255, 255, 1 );
	background: rgba( 0, 0, 0, .92 );
	font-family: var( --font-family-b );
	font-size: clamp( 1.6rem, 1.1vw, 1.95rem );
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --color-white );
	opacity: 0;
	transform: translateY( 16px );
	transition: background-color .35s var( --timing-function ), box-shadow .35s var( --timing-function ), color .35s var( --timing-function ), opacity .6s var( --timing-function ), transform .6s var( --timing-function );
}

[ gate-entered ] [ home-gate-enter ] {
	opacity: 1;
	transform: none;
	transition-delay: .22s;
}

home-credit {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 2;
	font-family: var( --font-family-c );
	font-size: 1.5rem;
	letter-spacing: .04em;
	color: rgba( 255, 255, 255, .78 );
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

[ path="/" ][ home-copy-ready ] home-credit {
	opacity: 1;
	visibility: visible;
}

@media ( max-width: 650px ) {
	home-view {
		padding: calc( var( --margin-m ) * 2 ) var( --margin-s );
	}

	home-content {
		width: calc( 100vw - 40px );
	}

	home-title {
		max-width: 13.2ch;
		font-size: clamp( 4rem, 9.4vw, 5.2rem );
		line-height: 1.06;
		letter-spacing: .03em;
		white-space: normal;
		text-wrap: balance;
	}

	home-copy {
		max-width: 28ch;
		margin-top: 20px;
		font-size: 1.95rem;
		line-height: 1.5;
	}

	home-copy span {
		white-space: normal;
	}

	home-mobile-break {
		display: block;
	}

	home-mobile-only {
		display: block;
	}

	home-desktop-only {
		display: none;
	}

	home-start {
		width: auto;
		max-width: calc( 100vw - 32px );
		margin-top: 44px;
		padding: 16px;
		font-size: 1.8rem;
		letter-spacing: .08em;
	}

	home-gate {
		padding: 24px 16px;
	}

	home-gate-panel {
		width: calc( 100vw - 32px );
	}

	home-gate-options {
		flex-direction: column;
		align-items: center;
		gap: 28px;
	}

	home-gate-options button:first-child {
		display: none;
	}

	[ home-gate-enter ] {
		margin-top: 52px;
	}

	home-credit {
		right: 14px;
		bottom: 14px;
		font-size: 1.3rem;
	}

}

@media ( hover: hover ) {
	home-start:hover {
		border-color: rgba( 255, 255, 255, .5 );
	}

	home-start:hover::before {
		background: rgba( 255, 255, 255, .16 );
	}

	[ home-gate-option ]:hover {
		color: var( --color-white );
	}

	[ home-gate-option ]:hover home-gate-option-frame {
		box-shadow: inset 0 0 0 var( --border-size ) rgba( 255, 255, 255, 1 );
		background: rgba( 0, 0, 0, .95 );
	}

	[ home-gate-enter ]:hover {
		background: rgba( 255, 255, 255, .08 );
		box-shadow: inset 0 0 0 var( --border-size ) rgba( 255, 255, 255, 1 );
	}

}

@media ( max-width: 900px ) {
	home-gate-panel {
		width: calc( 100vw - 48px );
	}

	[ home-gate-enter ] {
		margin-top: 62px;
	}

}

projects-view {
	overflow: hidden;
	pointer-events: none;
}

projects-cursor {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	pointer-events: none;
}

cursor-card {
	background-color: var( --background-color );
	border: var( --border-size ) solid var( --border-color );
	display: flex;
	justify-content: center;
	align-items: stretch;
	max-width: 450px;
}

cursor-content {
	padding: var( --margin-s ) var(--margin-s) var(--margin-xs);
}

cursor-content h3 {
	font-family: var( --font-family-c );
	font-size: var( --font-size-xs );
	font-weight: bold;
}

cursor-content h3 span {
	font-family: var( --font-family-b );
	font-size: .9em;
	opacity: .25;
	display: none;
}

cursor-content h4 {
	margin-top: 6px;
	font-family: var( --font-family-c );
	font-size: var( --font-size-xs );
	font-style: italic;
	opacity: .5;
}

cursor-content h4 span {
	display: inline-block;
}

cursor-content h5 {
	margin-top: 8px;
	font-family: var( --font-family-c );
	font-size: var( --font-size-m );
	font-weight: bold;
	text-align: right;
}

cursor-number {
	margin-left: var( --margin-m );
	font-size: 3em;
	color: transparent;
	line-height: .65;
	-webkit-text-stroke: 1px rgba( 255, 255, 255, .75);
}

cursor-color {
	position: relative;
	padding: var( --margin-s );
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-right: var( --border-size ) solid var( --border-color );
	color: var( --color );
}

cursor-color span {
	display: inline-block;
}

cursor-color color-code {
	font-size: var( --font-size-s );
	font-family: var( --font-family-c );
}

@media ( hover: hover ) {
	canvas-block:hover ~ projects-view projects-cursor[ visible ] {
		opacity: 1;
	}

}

projects-grid {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100vw;
	padding: calc( 84px + var( --margin-m ) ) var( --margin-m ) var( --margin-m );
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	align-items: flex-start;
	margin-bottom: 100px;
}

[ list="grid" ] projects-grid {
	pointer-events: all;
	opacity: 1;
	visibility: visible;
}

grid-column {
	width: 100%;
}

grid-column:not( :last-child ) {
	margin-right: var( --margin-m );
}

@media ( max-width: 650px ) {
	projects-grid {
		padding: calc( 84px + var( --margin-s ) ) var( --margin-s ) var( --margin-s );
	}

}

grid-item {
	display: block;
	list-style: none;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	pointer-events: none;
}

grid-item:not( :last-child ) {
	margin-bottom: 40px;
}

grid-item:nth-child( 3n+0 ) item-thumbnail {
	--animation: blink-1;
}

grid-item:nth-child( 3n+1 ) item-thumbnail {
	--animation: blink-2;
}

grid-item:nth-child( 3n+2 ) item-thumbnail {
	--animation: blink-3;
}

grid-item:nth-child( 3n+0 ) item-thumbnail {
	--animation: blink-1;
}

grid-item:nth-child( 3n+1 ) item-thumbnail {
	--animation: blink-2;
}

grid-item:nth-child( 3n+2 ) item-thumbnail {
	--animation: blink-3;
}

grid-item:active {
	opacity: .75
}

[ list="grid" ] grid-item {
	pointer-events: all;
}

grid-item h3 {
	font-family: var( --font-family-a );
	font-size: var( --font-size-xl );
	width: initial;
	margin-bottom: 2px;
}

grid-item h3 span {
	font-family: var( --font-family-b );
	font-size: .9em;
	opacity: .25;
}

grid-item h4 {
	font-family: var( --font-family-c );
	font-size: var( --font-size-m );
	line-height: 1.4;
	margin-bottom: 4px;
}

grid-item h5 {
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	opacity: .5;
}

grid-item video {
	transform: var( --transform );
	height: 100%;
}

item-link,
item-quote,
item-object {
	opacity: 0;
	transform: scale( .975 );
	transition: transform .1s var( --timing-function ), opacity .1s var( --timing-function );
	transition-delay: 0s;
}

[ view-exit ][ list="grid" ] :is(item-link,
item-quote,
item-object) {
	transition-delay: 0s;
	transition: transform .1s var( --timing-function ), opacity .1s var( --timing-function );
	opacity: 0;
}

[ view-enter ][ list="grid" ] :is(item-link,
item-quote,
item-object) {
	opacity: 1;
	transform: scale( 1 );
	transition: transform 1s var( --timing-function ), opacity 1s var( --timing-function );
	transition-delay: var( --transition-delay );
}

@media ( max-width: 650px ) {
	grid-item {
		transform: none !important;
	}

}

item-link {
	display: block;
	color: var( --color-white );
	cursor: pointer;
}

item-overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
}

item-overlay default-button {
	position: absolute;
	bottom: 15px;
	right: 15px;
}

item-thumbnail {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: var( --aspect-ratio );
	border: 1px solid transparent;
	background: #222;
	margin-bottom: var( --margin-xs );
}

[ view-enter ][ list="grid" ] item-thumbnail {
	animation: 1.5s linear var( --transition-delay ) var( --animation );
}

item-thumbnail > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

item-thumbnail video-block {
	position: relative;
	z-index: 1;
	pointer-events: none;
}

item-footer {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

@media ( hover: hover ) {
	item-link:hover item-overlay {
		opacity: 1;
	}

	item-link:hover item-thumbnail {
		border: 1px solid var( --color-white );
	}

	item-link:hover default-button {
		animation: 1s linear var( --animation );
	}

}

@media ( max-width: 1280px ) {
	item-thumbnail {
		margin-bottom: var( --margin-xs );
	}

}

projects-image-preview {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
	background: rgba( 0, 0, 0, .5 );
	opacity: 0;
	transition: opacity .5s var( --timing-function );
	cursor: default;
}

projects-image-preview[ visible ] {
	opacity: 1;
	pointer-events: all;
}

projects-image-preview[ visible ] img {
	transform: scale( 1 );
}

projects-image-preview img {
	width: 100%;
	max-height: 75vh;
	max-width: 1024px;
	transform: scale( 1.025 );
	transition: transform .5s var( --timing-function );
}

image-preview {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	margin: var( --margin-m );
}

image-preview-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: var( --margin-xs );
}

image-preview-footer {
	align-self: flex-start;
	margin-top: var( --margin-xs );
}

image-preview-footer h3 {
	font-family: var( --font-family-a );
	font-size: var( --font-size-m );
	width: initial;
	margin-bottom: 2px;
}

image-preview-footer h3 span {
	font-family: var( --font-family-b );
	font-size: .9em;
	opacity: .25;
	display: inline;
}

image-preview-footer h4 {
	display: none;
}

image-preview-footer h5 {
	margin-top: 5px;
	font-family: var( --font-family-c );
	font-size: var( --font-size-xs );
	opacity: .5;
}

@media ( max-width: 650px ) {
	image-preview {
		margin: var( --margin-s );
	}

}

projects-panel {
	z-index: 4;
	position: fixed;
	display: flex;
	flex-direction: column;
	background-color: var( --background-color );
	top: var( --margin-m );
	left: var( --margin-m );
	margin-top: 70px;
	border: var( --border-size ) solid var( --border-color );
	max-width: 450px;
	opacity: 0;
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	line-height: 1.8;
	pointer-events: none;
	max-height: calc( 100% - var( --margin-m ) * 2 - 200px );
	--background-color: rgba( 0, 0, 0, .28 );
}

[ path="/experiments" ][ list="places" ] projects-panel {
	--background-color: #8f73c8;
}

projects-panel p:not( :last-child ) {
	margin-bottom: var( --margin-s );
}

panel-title {
	padding: var( --margin-s );
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

[ open ] panel-title {
	border-bottom: var( --border-size ) solid var( --border-color );
}

panel-title panel-chevron {
	height: 25px;
	width: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}

panel-title svg {
	height: 20px;
	width: 20px;
	fill: var( --color-white );
	transform: rotate( 90deg );
}

[ open ] panel-title svg {
	transform: rotate( -90deg );
}

panel-title h3 {
	line-height: 1;
	font-size: var( --font-size-l );
}

panel-title h3 + p {
	margin-top: var( --margin-s );
}

panel-description {
	max-height: 0;
	padding: 0;
	overflow: scroll;
}

[ open ] panel-description {
	max-height: initial;
	padding: var( --margin-s );
}

@media ( max-width: 1024px ) {
	projects-panel {
		display: none;
		margin-top: 50px;
	}

}

@media ( hover: hover ) {
	panel-title:hover {
		background-color: rgba( 255, 255, 255, .25 );
	}

}

projects-filters {
	z-index: 4;
	position: fixed;
	display: flex;
	flex-direction: column;
	background: rgba( 0, 0, 0, .28 );
	top: calc( var( --margin-m ) + 150px );
	left: var( --margin-m );
	border: var( --border-size ) solid var( --border-color );
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	line-height: 1.8;
	list-style: none;
	opacity: 0;
	max-height: calc( 100% - var( --margin-m ) * 2 - 300px );
}

[ view-enter ][ list="sphere" ] projects-filters {
	opacity: 1;
	pointer-events: all;
}

projects-filters-title {
	padding: var( --margin-s );
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

[ open ] projects-filters-title {
	border-bottom: var( --border-size ) solid var( --border-color );
}

projects-filters-title projects-filters-chevron {
	height: 25px;
	width: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}

projects-filters-title svg {
	height: 20px;
	width: 20px;
	fill: var( --color-white );
	transform: rotate( 90deg );
}

[ open ] projects-filters-title svg {
	transform: rotate( -90deg );
}

projects-filters-title h3 {
	line-height: 1;
	font-size: var( --font-size-l );
}

projects-filters-title h3 + p {
	margin-top: var( --margin-s );
}

projects-filters-description {
	max-height: 0;
	overflow: auto;
}

projects-filters-description::-webkit-scrollbar {
	width: 18px;
	display: initial;
}

projects-filters-description::-webkit-scrollbar-track {
	border-left: 1px solid var( --color-white );
}

projects-filters-description::-webkit-scrollbar-thumb {
	background-color: var( --color-white );
	border: 6px solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
}

[ open ] projects-filters-description {
	max-height: initial;
	padding: var( --margin-s ) 0;
}

projects-filters-description div {
	padding: 0 var( --margin-s );
}

projects-filters-description div h4 {
	font-family: var( --font-family-b );
	font-size: 2rem;
	line-height: normal;
}

projects-filters-description div ul {
	padding: var( --margin-xs ) var( --margin-s );
}

projects-filters-description div li {
	display: flex;
	align-items: center;
	padding-right: 20px;
}

projects-filters-description div label {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

projects-filters-description div input {
	appearance: none;
	border: var( --border-size ) solid rgba( 255, 255, 255, .25 );
	height: 15px;
	width: 15px;
	margin-right: var( --margin-xs );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

projects-filters-description div input:before {
	display: block;
	content: '';
	height: 8px;
	width: 8px;
	background: var( --color-white );
	opacity: 0;
}

projects-filters-description div input:checked:before {
	opacity: 1;
}

projects-filters-description hr {
	border-color: var( --border-color );
	margin-top: calc(0.5 * var( --margin-xs ));
	margin-bottom: var( --margin-s );
}

@media ( max-width: 1024px ) {
	projects-filters {
		display: none;
	}

}

@media ( hover: hover ) {
	projects-filters-title:hover {
		background-color: rgba( 255, 255, 255, .25 );
	}

}

projects-color-range {
	position: fixed;
	right: var( --margin-m );
	top: 0;
	bottom: 0;
	margin: auto;
	width: 5px;
	height: 500px;
	display: none;
	opacity: 0;
	transition: opacity 1s var( --timing-function );
	touch-action: none;
}

[ view-enter ][ list="particles" ][ particles="color-range" ] projects-color-range {
	display: flex;
}

[ view-enter ][ list="particles" ][ particles="color-range" ][ pixel-experience-started ][ ui-ready ]:not( [ pixel-experience-gate-visible ] ):not( [ pixel-experience-transitioning ] ) projects-color-range {
	display: flex;
	opacity: 1;
	pointer-events: all;
}

projects-color-range canvas {
	position: absolute;
	height: 100%;
	width: 100%;
	pointer-events: none;
}

color-range-track {
	position: relative;
	width: 5px;
	height: 100%;
	display: block;
	pointer-events: all;
}

color-range-header {
	position: absolute;
	right: 0;
	top: calc( 100% + 33px );
	display: block;
}

color-range-label {
	font-family: var( --font-family-c );
	font-size: var( --font-size-m );
	font-weight: normal;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
	line-height: 1;
	padding: 0;
}

color-range-divider {
	display: none;
}

color-range-handle {
	--size: 24px;
	position: absolute;
	top: calc( var( --size ) * -.5 );
	right: calc( 100% + var( --margin-xs ) );
	display: flex;
	align-items: center;
	cursor: grab;
	border: var( --border-size ) solid var( --border-color );
	pointer-events: all;
	z-index: 2;
	touch-action: none;
}

color-range-handle[ grabbed ] {
	cursor: grabbing;
}

color-range-handle span {
	display: block;
	padding: 5px 8px;
	font-family: var( --font-family-a );
	font-size: var( --font-size-s );
	border-right: var( --border-size ) solid var( --border-color );
	white-space: nowrap;
}

color-range-handle svg {
	height: 25px;
	width: 25px;
	fill: var( --color-white );
}

color-range-band {
	display: contents;
}

@media ( max-width: 650px ) {
	projects-color-range {
		right: var( --margin-s );
		width: 5px;
		height: 320px;
	}

	color-range-label {
		font-size: var( --font-size-xs );
		display: none;
	}

	color-range-handle {
		right: calc( 100% + 8px );
	}

	color-range-handle span {
		padding: 4px 7px;
		font-size: var( --font-size-xs );
	}

	color-range-handle svg {
		height: 22px;
		width: 22px;
	}

}

project-timeline {
	position: fixed;
	right: var( --margin-m );
	top: 0;
	bottom: 0;
	margin: auto;
	height: 500px;
	opacity: 0;
	display: flex;
	align-items: center;
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	pointer-events: none;
}

timeline-navigation {
	position: absolute;
	right: 0;
	display: flex;
	align-items: center;
	cursor: pointer;
	pointer-events: all;
	border: var( --border-size ) solid var( --border-color );
}

timeline-navigation svg {
	height: 32px;
	width: 32px;
	fill: var( --color-white );
}

timeline-navigation[ scroll-top ] {
	top: -48px;
}

timeline-navigation[ scroll-top ] svg {
	transform: rotate(270deg);
}

timeline-navigation[ scroll-bottom ] {
	bottom: -48px;
}

timeline-navigation[ scroll-bottom ] svg {
	transform: rotate(90deg);
}

project-timeline ul {
	height: 100%;
	padding-right: 8px;
	pointer-events: none;
	overflow-y: scroll;
	scroll-behavior: smooth;
}

project-timeline li {
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	cursor: pointer;
}

project-timeline li[ selected ]:after {
	transform: scale( 1.75 );
	background: var( --color-white );
}

project-timeline li:not( :last-child ) {
	margin-bottom: var( --margin-xs );
}

project-timeline li:not( :last-child ):before {
	content: '';
	position: absolute;
	display: block;
	top: 100%;
	right: 4px;
	width: 1px;
	height: var( --margin-xs );
	background: var( --color-white );
	opacity: .25;
}

project-timeline li:after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border: 1px solid var( --color-white );
	border-radius: 50%;
	margin-left: var( --margin-s );
}

project-timeline li:first-child,
project-timeline li:last-child {
	pointer-events: none !important;
}

:is(project-timeline li:first-child,
project-timeline li:last-child):after {
	width: 5px;
	height: 5px;
	border: none;
	background: var( --color-white );
}

project-timeline span {
	display: flex;
	flex-direction: column;
	font-size: var( --font-size-m );
	font-family: var( --font-family-a );
}

project-timeline h6 {
	font-size: var( --font-size-xs );
	font-family: var( --font-family-c );
}

[ view-enter ][ list="particles" ][ particles="timeline" ] project-timeline {
	opacity: 1;
}

[ view-enter ][ list="particles" ][ particles="timeline" ] project-timeline li {
	pointer-events: all;
}

@media ( max-width: 1024px ) {
	project-timeline {
		height: 300px;
	}

}

@media ( max-width: 650px ) {
	project-timeline {
		right: var( --margin-s );
	}

}

@media ( hover: hover ) {
	timeline-navigation:hover {
		background-color: rgba( 255, 255, 255, .25 );
	}

	project-timeline li:hover:after {
		transform: scale( 1.75 );
		background: var( --color-white );
	}

}

projects-start-gate {
	position: fixed;
	inset: 0;
	z-index: 31;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s var( --timing-function );
}

projects-start-gate[ visible ] {
	opacity: 1;
	pointer-events: all;
}

start-gate-panel {
	width: min( 980px, calc( 100vw - 120px ) );
	padding: 60px 36px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

start-gate-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

start-gate-copy h2 {
	font-family: var( --font-family-a );
	font-size: clamp( 3.2rem, 3.4vw, 5.2rem );
	line-height: 1.05;
	letter-spacing: .05em;
	text-transform: uppercase;
}

start-gate-copy p {
	font-family: var( --font-family-c );
	font-size: clamp( 1.6rem, 1.2vw, 2rem );
	line-height: 1.8;
	max-width: 34ch;
}

start-gate-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: 50px;
}

start-gate-options {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp( 52px, 7vw, 108px );
	width: 100%;
}

start-gate-option {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	color: rgba( 255, 255, 255, .78 );
	transition: color .35s var( --timing-function );
}

start-gate-option[ active ] {
	color: var( --color-green );
}

start-gate-option[ active ] start-gate-option-frame {
	box-shadow: inset 0 0 0 var( --border-size ) currentColor;
}

start-gate-option-frame {
	width: clamp( 82px, 6vw, 98px );
	height: clamp( 82px, 6vw, 98px );
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	box-shadow: inset 0 0 0 var( --border-size ) rgba( 255, 255, 255, 1 );
	background: rgba( 0, 0, 0, .9 );
	transition: box-shadow .35s var( --timing-function ), background-color .35s var( --timing-function ), color .35s var( --timing-function );
}

start-gate-option-frame svg {
	width: 34px;
	height: 34px;
}

start-gate-option-frame path {
	fill: currentColor !important;
}

start-gate-option-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

start-gate-option-icon > *:nth-child( 2 ) {
	display: none;
}

[ active ] start-gate-option-icon > *:first-child {
	display: none;
}

[ active ] start-gate-option-icon > *:nth-child( 2 ) {
	display: block;
}

start-gate-option-label {
	font-family: var( --font-family-b );
	font-size: clamp( 1.35rem, 1vw, 1.7rem );
	letter-spacing: .08em;
	text-transform: uppercase;
}

start-gate-enter {
	cursor: pointer;
	margin-top: 76px;
	padding: 16px 46px;
	min-width: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	box-shadow: inset 0 0 0 var( --border-size ) rgba( 255, 255, 255, 1 );
	font-family: var( --font-family-b );
	font-size: clamp( 1.6rem, 1.1vw, 1.95rem );
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --color-white );
	background: rgba( 0, 0, 0, .92 );
	transition: background-color .35s var( --timing-function ), box-shadow .35s var( --timing-function ), color .35s var( --timing-function );
}

@media ( hover: hover ) {
	start-gate-option:hover {
		color: var( --color-white );
	}

	start-gate-option:hover start-gate-option-frame {
		box-shadow: inset 0 0 0 var( --border-size ) rgba( 255, 255, 255, 1 );
		background: rgba( 0, 0, 0, .95 );
	}

	start-gate-enter:hover {
		background: rgba( 255, 255, 255, .08 );
		box-shadow: inset 0 0 0 var( --border-size ) rgba( 255, 255, 255, 1 );
	}

}

@media ( max-width: 900px ) {
	start-gate-panel {
		width: calc( 100vw - 48px );
		padding: 48px 24px 40px;
	}

	start-gate-actions {
		margin-top: 42px;
	}

	start-gate-options {
		gap: 36px;
	}

	start-gate-enter {
		margin-top: 62px;
	}

}

@media ( max-width: 650px ) {
	start-gate-panel {
		width: calc( 100vw - 32px );
		padding: 40px 18px 32px;
	}

	start-gate-copy p {
		max-width: 24ch;
	}

	start-gate-options {
		flex-direction: column;
		align-items: center;
		gap: 28px;
	}

	start-gate-enter {
		margin-top: 52px;
		min-width: 220px;
	}

}

projects-popins {
	z-index: 20;
	position: absolute;
}

projects-popins default-button {
	position: absolute;
	top: var( --margin-m );
	right: var( --margin-m );
	z-index: 2;
}

projects-popin {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 15;
	background: rgba( 0, 0, 0, .5 );
	transition: opacity .5s var( --timing-function ), visibility .5s var( --timing-function );
	cursor: default;
	opacity: 0;
	visibility: hidden;
}

projects-popin[ visible ] {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

projects-popin img {
	flex-shrink: 0;
	margin-right: var( --margin-s );
	width: 100px !important;
	height: 100px !important;
	object-fit: cover;
}

projects-popin a {
	display: flex;
	margin-bottom: var( --margin-s );
	align-items: center;
}

projects-popin h2 {
	font-size: var( --font-size-xl );
	font-family: var( --font-family-b );
	margin-bottom: var( --margin-s );
}

projects-popin h3 {
	font-family: var( --font-family-a );
	font-size: var( --font-size-l );
	width: initial;
	margin-bottom: 2px;
}

projects-popin h3 span {
	font-family: var( --font-family-b );
	font-size: .9em;
	opacity: .25;
}

projects-popin h4 {
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	line-height: 1.4;
	margin-bottom: 4px;
}

projects-popin h5 {
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	opacity: .5;
}

popin-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var( --margin-s );
}

popin-columns {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
}

popin-block {
	max-height: 100%;
	padding: calc( var( --margin-m ) * 2 );
	overflow: auto;
}

popin-content {
	max-width: 40%;
	padding-right: var( --margin-s );
	margin-right: var( --margin-m );
}

popin-content p {
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
}

popin-content p:not( :last-child ) {
	margin-bottom: var( --margin-s );
}

popin-content p:last-child {
	font-style: italic;
}

popin-projects {
	list-style: none;
}

@media ( max-width: 650px ) {
	projects-popin img {
		width: 75px !important;
		height: 75px !important;
	}

	projects-popin h3 {
		font-size: var( --font-size-m );
	}

	projects-popin h4 {
		font-size: var( --font-size-xs );
	}

	projects-popin h5 {
		font-size: var( --font-size-xs );
	}

	popin-block {
		padding: var( --margin-m ) !important;
		padding-top: calc( var( --margin-m ) * 3 ) !important;
	}

}

@media ( max-width: 1024px ) {
	popin-columns {
		flex-direction: column;
		justify-content: flex-start;
	}

	popin-content {
		max-width: initial;
		margin-right: initial;
	}

	popin-projects {
		margin-top: var( --margin-m );
	}

}

mete-view {
	position: relative;
	min-width: 100vw;
	min-height: 100%;
	display: block;
	background: rgba( 0, 0, 0, .25 );
	padding-top: 350px;
}

mete-view section {
	margin: 0 auto;
	padding: 0 calc( var(--margin-m ) * 3 ) calc( var(--margin-m ) * 3 );
}

mete-view section h3 {
	font-size: var(--font-size-l );
	font-family: var(--font-family-c );
	font-weight: bold;
	line-height: var(--line-height );
	padding-top: var( --margin-m );
	padding-bottom: var( --margin-s );
	text-transform: uppercase;
}

mete-view section p {
	font-size: var(--font-size-l );
	font-family: var(--font-family-c );
	font-weight: 200;
	line-height: var(--line-height );
	padding-bottom: var( --margin-s );
}

mete-reveal {
	position: fixed;
	inset: 0;
	z-index: 39;
	background: var( --color-black );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 1.8s var( --timing-function ), visibility 0s linear 1.8s;
}

[ revealing ] mete-reveal {
	opacity: 1;
	visibility: visible;
	transition: none;
}

mete-credit {
	display: block;
	margin-top: calc( var( --margin-m ) * 2 );
	padding: 0 calc( var( --margin-s ) );
	font-family: var( --font-family-c );
	font-size: 1.5rem;
	letter-spacing: .04em;
	color: rgba( 255, 255, 255, .78 );
	pointer-events: none;
	text-align: right;
}

@media (max-width: 1024px) {
	mete-view {
		padding-top: 350px;
	}

	mete-view section {
		padding: 0 calc( var(--margin-m ) * 2 ) calc( var(--margin-m ) * 2 );
	}

}

@media (max-width: 650px) {
	mete-view {
		padding-top: 130px;
	}

	mete-view section {
		padding: 0 calc( var(--margin-s ) ) calc( var(--margin-s ) );
	}

}

@media ( max-width: 650px ) {
	mete-view section p {
		font-size: 1.5rem;
	}

	mete-credit {
		margin-top: var( --margin-m );
		padding: 0;
	}

}

@media (min-width: 768px) {
	mete-view section {
		max-width: 720px;
	}

}

@media (min-width: 1024px) {
	mete-view section {
		max-width: 960px;
	}

}

@media (min-width: 1200px) {
	mete-view section {
		max-width: 1140px;
	}

}

@media (min-width: 1400px) {
	mete-view section {
		max-width: 1320px;
	}

}

about-view {
	position: relative;
	min-width: 100vw;
	min-height: 100%;
	display: block;
	background: rgba( 0, 0, 0, .80 );
}

about-view section {
	margin: 0 auto;
	padding: calc( var(--margin-m ) * 3 ) ;
}

about-view section h3 {
	font-size: var(--font-size-l );
	font-family: var(--font-family-c );
	font-weight: bold;
	line-height: var(--line-height );
	padding-top: var( --margin-m );
	padding-bottom: var( --margin-s );
	text-transform: uppercase;
}

about-view section p {
	font-size: var(--font-size-l );
	font-family: var(--font-family-c );
	font-weight: 200;
	line-height: var(--line-height );
	padding-bottom: var( --margin-s );
}

about-reveal {
	position: fixed;
	inset: 0;
	z-index: 39;
	background: var( --color-black );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 1.8s var( --timing-function ), visibility 0s linear 1.8s;
}

[ revealing ] about-reveal {
	opacity: 1;
	visibility: visible;
	transition: none;
}

@media ( max-width: 650px ) {
	about-view section p {
		font-size: 1.5rem;
	}

}

@media (max-width: 1024px) {
	about-view section {
		padding: calc( var(--margin-m ) * 2 ) calc( var(--margin-m ) );
	}

}

@media (max-width: 650px) {
	about-view section {
		padding: calc( var(--margin-m ) * 2 ) calc( var(--margin-s ) );
	}

}

@media (min-width: 768px) {
	about-view section {
		max-width: 720px;
	}

}

@media (min-width: 1024px) {
	about-view section {
		max-width: 960px;
	}

}

@media (min-width: 1200px) {
	about-view section {
		max-width: 1140px;
	}

}

@media (min-width: 1400px) {
	about-view section {
		max-width: 1320px;
	}

}

contact-view {
	position: relative;
	min-width: 100vw;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: var( --font-size-xl );
	text-align: center;
	user-select: text;
	background: rgba( 0, 0, 0, .5 );
}

contact-view h4 {
	margin-bottom: var( --margin-m );
	font-size: calc( var( --font-size-xxl ) * 1.5 );
	line-height: .9;
}

contact-view contact-mobile-break {
	display: none;
}

contact-view h3 {
	font-family: var( --font-family-c );
	line-height: 1.1;
}

contact-view a {
	margin-bottom: var( --margin-m );
	color: var( --color-white );
	font-family: var( --font-family-c );
	font-size: 100%;
}

contact-reveal {
	position: fixed;
	inset: 0;
	z-index: 39;
	background: var( --color-black );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 1.8s var( --timing-function ), visibility 0s linear 1.8s;
}

[ revealing ] contact-reveal {
	opacity: 1;
	visibility: visible;
	transition: none;
}

contact-credit {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 2;
	font-family: var( --font-family-c );
	font-size: 1.5rem;
	letter-spacing: .04em;
	color: rgba( 255, 255, 255, .78 );
	pointer-events: none;
}

@media ( max-width: 1024px ) {
	contact-view {
		font-size: var( --font-size-l );
	}

	contact-view h4 {
		font-size: calc( var( --font-size-l ) * 1.5 );
	}

}

@media ( max-width: 650px ) {
	contact-view h4 {
		line-height: 1.5;
	}

	contact-view contact-mobile-break {
		display: block;
	}

	contact-credit {
		right: 14px;
		bottom: 14px;
	}

}

@media ( hover: hover ) {
	contact-view a:hover {
		color: var( --color-yellow );
	}

}