@font-face {
		font-family: 'Barlow Condensed';
		src: url('fonts/BarlowCondensed-Regular.eot');
		src: url('fonts/BarlowCondensed-Regular.eot?#iefix') format('embedded-opentype'),
				url('fonts/BarlowCondensed-Regular.woff2') format('woff2'),
				url('fonts/BarlowCondensed-Regular.woff') format('woff'),
				url('fonts/BarlowCondensed-Regular.ttf') format('truetype'),
				url('fonts/BarlowCondensed-Regular.svg#BarlowCondensed-Regular') format('svg');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
}

@font-face {
		font-family: 'Barlow Condensed';
		src: url('fonts/BarlowCondensed-Medium.eot');
		src: url('fonts/BarlowCondensed-Medium.eot?#iefix') format('embedded-opentype'),
				url('fonts/BarlowCondensed-Medium.woff2') format('woff2'),
				url('fonts/BarlowCondensed-Medium.woff') format('woff'),
				url('fonts/BarlowCondensed-Medium.ttf') format('truetype'),
				url('fonts/BarlowCondensed-Medium.svg#BarlowCondensed-Medium') format('svg');
		font-weight: 500;
		font-style: normal;
		font-display: swap;
}

@font-face {
		font-family: 'Barlow Condensed';
		src: url('fonts/BarlowCondensed-Bold.eot');
		src: url('fonts/BarlowCondensed-Bold.eot?#iefix') format('embedded-opentype'),
				url('fonts/BarlowCondensed-Bold.woff2') format('woff2'),
				url('fonts/BarlowCondensed-Bold.woff') format('woff'),
				url('fonts/BarlowCondensed-Bold.ttf') format('truetype'),
				url('fonts/BarlowCondensed-Bold.svg#BarlowCondensed-Bold') format('svg');
		font-weight: bold;
		font-style: normal;
		font-display: swap;
}

@font-face {
		font-family: 'Poppins';
		src: url('fonts/Poppins-Regular.eot');
		src: url('fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
				url('fonts/Poppins-Regular.woff2') format('woff2'),
				url('fonts/Poppins-Regular.woff') format('woff'),
				url('fonts/Poppins-Regular.ttf') format('truetype'),
				url('fonts/Poppins-Regular.svg#Poppins-Regular') format('svg');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
}
@font-face {
		font-family: 'Poppins';
		src: url('fonts/Poppins-Bold.eot');
		src: url('fonts/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
				url('fonts/Poppins-Bold.woff2') format('woff2'),
				url('fonts/Poppins-Bold.woff') format('woff'),
				url('fonts/Poppins-Bold.ttf') format('truetype'),
				url('fonts/Poppins-Bold.svg#Poppins-Bold') format('svg');
		font-weight: bold;
		font-style: normal;
		font-display: swap;
}
@font-face {
		font-family: 'Poppins';
		src: url('fonts/Poppins-BoldItalic.eot');
		src: url('fonts/Poppins-BoldItalic.eot?#iefix') format('embedded-opentype'),
				url('fonts/Poppins-BoldItalic.woff2') format('woff2'),
				url('fonts/Poppins-BoldItalic.woff') format('woff'),
				url('fonts/Poppins-BoldItalic.ttf') format('truetype'),
				url('fonts/Poppins-BoldItalic.svg#Poppins-BoldItalic') format('svg');
		font-weight: bold;
		font-style: italic;
		font-display: swap;
}
@font-face {
		font-family: 'Poppins';
		src: url('fonts/Poppins-SemiBold.eot');
		src: url('fonts/Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
				url('fonts/Poppins-SemiBold.woff2') format('woff2'),
				url('fonts/Poppins-SemiBold.woff') format('woff'),
				url('fonts/Poppins-SemiBold.ttf') format('truetype'),
				url('fonts/Poppins-SemiBold.svg#Poppins-SemiBold') format('svg');
		font-weight: 600;
		font-style: normal;
		font-display: swap;
}
@font-face {
		font-family: 'Poppins';
		src: url('fonts/Poppins-SemiBoldItalic.eot');
		src: url('fonts/Poppins-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
				url('fonts/Poppins-SemiBoldItalic.woff2') format('woff2'),
				url('fonts/Poppins-SemiBoldItalic.woff') format('woff'),
				url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'),
				url('fonts/Poppins-SemiBoldItalic.svg#Poppins-SemiBoldItalic') format('svg');
		font-weight: 600;
		font-style: italic;
		font-display: swap;
}    
@font-face {
		font-family: 'Poppins';
		src: url('fonts/Poppins-Italic.eot');
		src: url('fonts/Poppins-Italic.eot?#iefix') format('embedded-opentype'),
				url('fonts/Poppins-Italic.woff2') format('woff2'),
				url('fonts/Poppins-Italic.woff') format('woff'),
				url('fonts/Poppins-Italic.ttf') format('truetype'),
				url('fonts/Poppins-Italic.svg#Poppins-Italic') format('svg');
		font-weight: normal;
		font-style: italic;
		font-display: swap;
}

:root {
	--green:#30ff9f;
	--teal:#008972;
	--blue:#031b67;
	--red:#e40528;
	--red-transparent:rgba(228,5,40,0.65);
	--white: #ffffff;
	--black:#000000;
	--orange-transparent:rgba(232,82,41,0.65);
	--orange1:#f1b84a;
	--orange2:#eea245;
	--orange3:#ec8c41;
	--orange4:#e06d3d;
	--orange5:#d84c37;
	--orange6:#d33a32;
	--option:rgba(0,0,0,0.35);
	--option-selected:rgba(232,82,41,0.65);
	--option-reselected:rgba(0,137,114,0.65);
}
*, *::after, *::before {
		-webkit-tap-highlight-color: transparent;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing:border-box
}
html, body { position:relative; margin:0px; padding:0px; width:100vw; height:100vh; height:100vh; }
body { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; line-height: 24px; background-color: var(--black);}
body::after {
	content:''; display:block; position:fixed; z-index: 0; left:0px; top:0px; right:0px; bottom:0px; width:100vw; height:100vh;  background:url('assets/background.jpg') no-repeat center center / cover; opacity:0.8;
}
h1, h2, h3, h4, h5, h6 {font-family: 'Poppins', sans-serif;}
button { -webkit-appearance: none; border:none; background:var(--blue); color: var(--white); font-family: inherit; font-size: inherit; font-weight: 700; line-height: inherit; padding:12px 24px; margin: 0px; text-align: center; pointer-events:all; position: relative; }
button * { pointer-events: none;}
button > span { display:inline-block; vertical-align: middle;}
button > i {display:inline-block; vertical-align: middle; width:24px; height:24px;}
button:hover { cursor:pointer;}
button:focus { outline:none;}

body > header { position:fixed; z-index: 10; top:0px; left:0px; right:0px; width:100%; text-align: left; pointer-events: none;}
body > header > svg { display:inline-block; width:192px; height:auto; margin-top:calc( env(safe-area-inset-top) + 3vh); margin-left: 3vw;}

body > main { 
	position:fixed; z-index: 5; top:0px; left:0px; right:0px; bottom:0px; width:100vw; height:100vh; padding: calc( env(safe-area-inset-top) + 96px ) 0px 96px 0; margin: 0px;
	display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; align-content: space-between; overflow: hidden; overflow-y: auto; 
}
body > main::after {
	content:''; display:block; position:fixed; z-index: 0; left:0px; top:0px; right:0px; bottom:0px; width:100vw; height:100vh;  background:#000; opacity:0.3; pointer-events: none; transition: opacity 275ms linear; will-change:opacity;
}
body > main > * { display: inline-block; width:100%; padding:0px; margin:0px; position: relative; z-index: 1; flex-basis: calc(100vw / 3); pointer-events: none;}

body > main > #model { height:128px; flex-basis: 100%; pointer-events:none; }

body > main > #start { color:#fff; flex-basis: 100%; pointer-events: none;  }
body > main > #start > article { width:100%; max-width: calc(100%); padding:3vw;}
body > main > #start > article h1 { font-size: 42px; line-height: 1em; margin: 0px 0px 16px 0px;}
body > main > #start > article p { font-size: 21px; line-height:1.2em; font-weight:500; text-shadow: var(--option) 1px 0 10px;}
body > main > #start > article button { width:100%; pointer-events: all; padding:24px; text-transform: uppercase;}
body > main > #start > article button > span { margin-right: 8px;  }
body > main > #start > article button > i {
	animation: twiggle 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

body > main > #intro { color:#fff; flex-basis: 100%; pointer-events: none; display:none; }
body > main > #intro > article { width:100%; max-width: calc(100%); padding:3vw;}
body > main > #intro > article h3 { font-size:32px; margin-bottom:6px;}
body > main > #intro > article h1 { font-size: 42px; line-height: 1em; margin: 0px 0px 16px 0px;}
body > main > #intro > article p { font-size: 21px; line-height:1.2em; font-weight:500; text-shadow: var(--option) 1px 0 10px;}
body > main > #intro > article button { width:100%; pointer-events: all; padding:24px; text-transform: uppercase;}
body > main > #intro > article button > span { margin-right: 8px;  }
body > main > #intro > article button > i {
	animation: twiggle 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

body > main > #again { color:#fff; flex-basis: 100%; pointer-events: none; display:none; }
body > main > #again > article { width:100%; max-width: calc(100%); padding:3vw;}
body > main > #again > article h3 { font-size:32px; margin-bottom:6px;}
body > main > #again > article h1 { font-size: 42px; line-height: 1em; margin: 0px 0px 16px 0px;}
body > main > #again > article p { font-size: 21px; line-height:1.2em; font-weight:500; text-shadow: var(--option) 1px 0 10px;}
body > main > #again > article button { width:100%; pointer-events: all; padding:24px; text-transform: uppercase;}
body > main > #again > article button > span { margin-right: 8px;  }
body > main > #again > article button > i {
	animation: twiggle 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}


body > main > #options { flex-basis: 100%; padding:0px; width:0px; display:none; pointer-events: none; }
body > main > #options > form { width:100%; max-width: calc(100% - 6vw); margin:3vw; pointer-events: all; }
body > main > #options > form > button {width:100%; pointer-events: all; padding:24px; text-transform: uppercase;}
body > main > #options > form > button > span { margin-left: 12px;}
body > main > #options > form > details {}
body > main > #options > form > details > summary { position:relative; padding:12px; text-transform: uppercase; font-weight: 700; color:var(--white);}
body > main > #options > form > details > summary * { pointer-events: none;}
body > main > #options > form > details > summary > * { position:relative; z-index: 1;}
body > main > #options > form > details > summary::marker {position:relative; z-index: 1;}
body > main > #options > form > details > summary::-webkit-details-marker {position:relative; z-index: 1;}
body > main > #options > form > details > summary::after { content:''; display:block; width:100%; height:100%; position: absolute; left:0px; top:0px; z-index: -1;}
body > main > #options > form > details > summary > span {}
body > main > #options > form > details > summary > span > i { display:none; font-style: normal;}
body > main > #options > form > details > summary > b { position: absolute; z-index: 1; right:12px; top:14px; width:24px; height:24px; overflow: hidden; color:var(--green);}
body > main > #options > form > details > summary > b > svg { position: absolute; display: block; width:24px; height:24px; transform:translateY(24px); transition:transform 175ms ease-in-out;}
body > main > #options > form > details.--selection > summary > b > svg { transform:translateY(0px);}

body > main > #options > form > details > summary:hover { cursor: pointer;}
body > main > #options > form > details > fieldset { margin:0px; padding: 8px; border:none; background: var(--orange-transparent); color: var(--white); display: flex; flex-wrap: wrap; gap:8px; align-items: stretch;}
body > main > #options > form > details > fieldset > p { margin:0px; font-weight: 500; flex-basis: 100%;}
body > main > #options > form > details > fieldset > p:first-of-type {}
body > main > #options > form > details > fieldset > p:last-of-type { display:none;}
body > main > #options > form > details > fieldset > label { position: relative; display: inline-block; margin: 0; padding:0px; flex-basis: calc(50% - 4px); flex-shrink: 1; flex-grow: 0; }
body > main > #options > form > details > fieldset > label > input { display:none;}
body > main > #options > form > details > fieldset > label > img { position: absolute; z-index: 1; left:50%; top:8px; transform:translateX(-50%) scale(0.9); transition:transform 175ms ease-in-out; max-width:100%; height:auto;}
body > main > #options > form > details > fieldset > label > span.title { position:relative; z-index: 2; display: block; padding:8px 32px 8px 8px; line-height:1em; font-weight:500; text-transform: uppercase;}
body > main > #options > form > details > fieldset > label > span.icon { position:absolute; right:0px; top:0px; width:24px; height:24px; line-height: 16px; padding:4px; background-color: var(--white); color:var(--blue); z-index: 3; } 
body > main > #options > form > details > fieldset > label > span.icon svg { width:16px; height:16px;}
body > main > #options > form > details > fieldset > label > span.background { position: absolute; z-index: 0; left:0px; top:0px; right:0px; bottom:0px; display:block; padding:0px; margin:0px; width:100%; height:100%; background:var(--option);}

body > main > #options > form > details > fieldset > label > img + span.title {padding-top:112px;}
body > main > #options > form > details > fieldset > label:hover { cursor: pointer;}
body > main > #options > form > details > fieldset > label:hover > img {transform:translateX(-50%) scale(1);}
body > main > #options > form > details > fieldset > label > input:checked ~ img {transform:translateX(-50%) scale(1);}
body > main > #options > form > details > fieldset > label > input:checked ~ span.background {background:var(--option-selected);}

body > main > #options > form > details.--lock > summary { pointer-events:none;}
body > main > #options > form > details > fieldset > label.--reselected > input ~ span.background {background:var(--option-reselected);}
body > main > #options > form > details > fieldset > label.--selected > input ~ span.background {background:var(--option-selected);}
body > main > #options > form > details > fieldset > label.--selected > input ~ span.icon { display:none;}

body > main > #options > form > details[data-step="1"]{}
body > main > #options > form > details[data-step="1"] > summary::after { background-color: var(--orange1);}
body > main > #options > form > details[data-step="2"]{}
body > main > #options > form > details[data-step="2"] > summary::after {background-color: var(--orange2); color:var(--white);}
body > main > #options > form > details[data-step="3"]{}
body > main > #options > form > details[data-step="3"] > summary::after {background-color: var(--orange3); color:var(--white);}
body > main > #options > form > details[data-step="4"]{}
body > main > #options > form > details[data-step="4"] > summary::after {background-color: var(--orange4); color:var(--white);}
body > main > #options > form > details[data-step="5"]{}
body > main > #options > form > details[data-step="5"] > summary::after {background-color: var(--orange5); color:var(--white);}
body > main > #options > form > details[data-step="6"]{}
body > main > #options > form > details[data-step="6"] > summary::after {background-color: var(--orange6); color:var(--white);}

body > main > #calc { padding:0px; width:0px; flex-basis: 100%; display:none; pointer-events: none;}
body > main > #calc table { border-collapse: collapse; width:100%; max-width: calc(100% - 6vw); margin:3vw; float:right; pointer-events:all; }
body > main > #calc table > thead { background-color: var(--red); color:var(--white); }
body > main > #calc table > thead > tr > td { text-transform: uppercase; font-weight: 700;}
body > main > #calc table > tbody { background-color: var(--red-transparent); color:var(--white); display:block;}
body > main > #calc table > tbody > tr { display:table; width: 100%; table-layout: fixed;}
body > main > #calc table > tbody > tr > td { text-transform: uppercase;}
body > main > #calc table > tbody > tr > td > span { display:block; font-weight: 700; line-height: 1em;}
body > main > #calc table > tbody > tr > td > hr { height:1px; background-color: var(--white); border:none; display:block; width:100%; padding:0px; margin:0px;}
body > main > #calc table > tbody > tr:not(:last-child) > td { padding-bottom: 0px;}
body > main > #calc table > tbody > tr:last-child > td > hr { display:none;}
body > main > #calc table > tfoot { background-color: var(--red-transparent); color:var(--white);}
body > main > #calc table > tfoot > tr > td > button { pointer-events: all; width:100%; pointer-events: all; padding:24px; text-transform: uppercase;}
body > main > #calc table > tfoot > tr > td > button > span { margin-right: 8px;  }
body > main > #calc table:first-child > tfoot > tr> td > button > i {
	animation: twiggle 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
body > main > #calc table > tfoot > tr > td > strong { display:inline-block; font-size:32px; line-height:32px; vertical-align: baseline; margin-right:6px;}
body > main > #calc table > tfoot > tr:first-child td { font-weight:700; font-size:21px; line-height:24px;}
body > main > #calc table > tfoot > tr:last-child td { padding:0px;}
body > main > #calc table > tfoot:not(.--completed) { display:none;}

body > main > #calc table:last-of-type { margin-top:0px;}
body > main > #calc table:last-of-type > thead { background-color: var(--teal); color:var(--white);}
body > main > #calc table:last-of-type > tbody { background-color: var(--option-reselected); color:var(--white);}
body > main > #calc table:last-of-type > tfoot { background-color: var(--option-reselected); color:var(--white);}


body > main > #disclaimer { position: relative; bottom:0px; left:0px; right:0px; width:100%; text-align: center; z-index: 10; flex-basis: 100%;  pointer-events: none; display:none;}
body > main > #disclaimer > small { display:inline-block; padding: 24px; color:var(--white); font-size: 16px; line-height: 19px;}

body > main[data-step="1"]::after { opacity:0.3;}
body > main[data-step="1"] > #model { }
body > main[data-step="1"] > #start {display:none;}
body > main[data-step="1"] > #intro { display:inline-block;}
body > main[data-step="1"] > #again { display:none;}
body > main[data-step="1"] > #options { display:none;}
body > main[data-step="1"] > #calc { display:none;}
body > main[data-step="1"] > #disclaimer { display:none;}

body > main[data-step="2"]::after { opacity:0.1;}
body > main[data-step="2"] > #model { display:none;}
body > main[data-step="2"] > #intro { display:none;}
body > main[data-step="2"] > #start { display:none;}
body > main[data-step="2"] > #again { display:none;}
body > main[data-step="2"] > #options { display:inline-block;}
body > main[data-step="2"] > #options > form > details.--selection > summary::after { opacity:0.65;}
body > main[data-step="2"] > #calc { display:inline-block;}
body > main[data-step="2"] > #calc > table:last-of-type { display:none;}
body > main[data-step="2"] > #disclaimer { display:inline-block;}

body > main[data-step="3"]::after { opacity:0.3;}
body > main[data-step="3"] > #model { }
body > main[data-step="3"] > #intro { display:none;}
body > main[data-step="3"] > #start { display:none;}
body > main[data-step="3"] > #again { display:inline-block;}
body > main[data-step="3"] > #options { display:none;}
body > main[data-step="3"] > #calc { display:none;}
body > main[data-step="3"] > #disclaimer { display:none;}


body > main[data-step="4"]::after { opacity:0.1;}
body > main[data-step="4"] > #model { display:none;}
body > main[data-step="4"] > #intro { display:none;}
body > main[data-step="4"] > #start { display:none;}
body > main[data-step="4"] > #again { display:none;}
body > main[data-step="4"] > #options { display:inline-block;}
body > main[data-step="4"] > #options > form > details[data-step="1"],
body > main[data-step="4"] > #options > form > details[data-step="2"] { display:none!important;}
body > main[data-step="4"] > #options > form > details.--selection > summary > span > i { display:inline;}
body > main[data-step="4"] > #options > form > details.--selection > fieldset > p { display:none;}
body > main[data-step="4"] > #options > form > details > fieldset > p:first-of-type {display:none;}
body > main[data-step="4"] > #options > form > details > fieldset > p:last-of-type { display:block;}
body > main[data-step="4"] > #calc { display:inline-block;}
body > main[data-step="4"] > #calc > table:first-of-type { margin-bottom:1vh;}
body > main[data-step="4"] > #calc > table:first-of-type > tbody { display:none;}
body > main[data-step="4"] > #calc > table:first-of-type > tfoot > tr:last-child { display:none;}
body > main[data-step="4"] > #calc > table:last-of-type > tbody > tr:nth-child(1),
body > main[data-step="4"] > #calc > table:last-of-type > tbody > tr:nth-child(2) { display:none;}
body > main[data-step="4"] > #disclaimer { display:inline-block;}


body > canvas { position: relative; z-index: 1;}


body > dialog {
	/* Reset global button markup */
	-webkit-appearance: none; 
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none; 
	appearance: none;
	/* Remove border radius default for all devices */
	-webkit-border-radius: 0px; 
	-moz-border-radius: 0px;
	-ms-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	/* Remove text shadow default for all devices */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	/* Default bounding box behaviour (include padding in width) */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	border:none; margin: 0px; padding: 0px; 
	opacity:0; transform:translateY(0px); pointer-events: none;
	/* Animation */
	display:block; opacity:0; pointer-events:none;
	position: fixed; z-index:999998; left:0px; top:0px; width:100vw; height:100vh; max-height:100vh; max-width: 100vw; overflow: hidden;
	transition: opacity 75ms linear; background-color:rgba(0,0,0,0.6);
}
body > dialog:not([open]) * {
	pointer-events: none!important;
}
body > dialog[open] {
	opacity: 1; pointer-events: all;
}
body > dialog > form { position: fixed; bottom:0%; left:50%; transform: translate(-50%, calc(0% + 24px)); width:100vw; background-color: var(--white); padding:48px 24px; font-size: 18px; line-height: 24px; transition: transform 125ms ease-in-out;}
body > dialog > form > h2 { text-transform: uppercase; color: var(--blue);  margin-bottom:8px; font-size:28px; line-height:1.1em;}
body > dialog > form > p {font-size: 18px; line-height: 24px; color:var(--blue);}
body > dialog > form > section { display:none; background:var(--green); color:var(--blue); padding:24px; font-family: inherit; font-size: inherit; font-weight: 700; line-height: inherit; margin: 0px; text-align: center;}
body > dialog > form > section > i {display:inline-block; vertical-align: middle; width:24px; height:24px; margin-right:8px;}
body > dialog > form > section > span { display:inline-block; vertical-align: middle; font-weight: 700; font-family: inherit; text-transform: uppercase;}
body > dialog > form > fieldset { margin:0px; padding:0px; border:none; margin-bottom:24px; }
body > dialog > form > fieldset > label { display: block; margin-bottom:12px;}
body > dialog > form > fieldset > label > span { display:block; text-transform: uppercase;  font-weight: 700; color: var(--blue);}
body > dialog > form > fieldset > label > small { display:block; font-size: 18px; line-height:24px; margin-bottom: 6px; color: var(--blue);}
body > dialog > form > fieldset > label > input { width:100%; height:48px; border:var(--blue) 1px solid; background-color: var(--white); color: var(--blue); font-family: 'Barlow Condensed', sans-serif; font-size: 18px; line-height: 24px; padding: 0 12px; border-radius:0px;}
body > dialog > form > fieldset > label > input[type="checkbox"] { -webkit-appearance: none; appearance:none; display:inline-block;width:28px; height:28px; margin-right:8px; vertical-align: top; border-radius:0px;} 
body > dialog > form > fieldset > label > input[type="checkbox"] + span { display: inline-block; max-width:calc(100% - 40px); font-size:18px; line-height: 21px; vertical-align: top;}
body > dialog > form > fieldset > label > input[type="checkbox"]:checked { background: var(--blue) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>') no-repeat center center / 16px;}
body > dialog > form > fieldset > label > input:focus { outline:none;}
body > dialog > form > fieldset > button {width:100%; padding:14px 24px; margin-top:8px;}
body > dialog > form > fieldset > button > span {margin-left: 8px; text-transform:uppercase;}

body > dialog > form > fieldset.--invalid > label:first-of-type > span { color:var(--red);}
body > dialog > form > fieldset.--invalid > label:first-of-type > input[type="email"] { border-color:var(--red);}


body > dialog > form > fieldset.--sent { display:none;}
body > dialog > form > fieldset.--sent + section { display:block;}


body > dialog > form > button { width:100%;}
body > dialog > form > button > span { margin-left: 8px; text-transform:uppercase;}
body > dialog > form > button[data-step] { background-color:var(--white); color:var(--blue);}
body > dialog > form > button[data-dialog] { position: absolute; right:0px; top:0px; width:50px; padding:12px; background-color: var(--white); color: var(--blue);}
body > dialog > form > button[data-dialog] > span { display: none;}

body > dialog[open] > form {transform: translate(-50%, 0%);}

@media only screen and (min-width: 920px) {
	body > header { position:fixed;}
	body > main { flex-wrap: nowrap; overflow: hidden; pointer-events: none; }
	body > main > #model { display:none;}
	body > main > #intro { flex-basis: 680px; }
	body > main > #intro > article h1 { font-size: 56px; }
	body > main > #start{ flex-basis: 680px; }
	body > main > #start > article h1 { font-size: 56px; }
	body > main > #again { flex-basis: 680px; }
	body > main > #again > article h1 { font-size: 56px; }
	body > main > #options { flex-basis: calc(100vw / 3); }
	body > main > #options > form {max-width:296px;}
	body > main > #options > form > details > fieldset { max-height:calc(100vh - (76px + 72px + 48px) - (6 * 52px) - 6vh); overflow: hidden; overflow-y: auto;}
	body > main > #calc { flex-basis: calc(100vw / 3);}
	body > main > #calc > table {max-width:296px;}
	body > main > #calc > table > tbody { max-height:calc(100vh - ( 56px + 132px + 132px ) - ( 3vh + 6vh ) ); overflow: hidden; overflow-y: auto;}
	body > main > #disclaimer { position: fixed;}
	body > dialog > form { top:50%; left:50%; bottom: auto; width:calc(100vw - 6vw); max-width:384px; transform: translate(-50%, calc(-50% + 24px)); }
	body > dialog[open] > form {transform: translate(-50%, -50%);}
}

@keyframes twiggle {
	0% {transform: translateX(8px);}
	10% {transform: translateX(0px);}
	90% {transform: translateX(0px);}
	100% {transform: translateX(8px);}
}