@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  src: url("Inter-Regular.woff2?v=3.15") format("woff2"),
       url("Inter-Regular.woff?v=3.15") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 400;
  src: url("Inter-Italic.woff2?v=3.15") format("woff2"),
       url("Inter-Italic.woff?v=3.15") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url("Inter-Bold.woff2?v=3.15") format("woff2"),
       url("Inter-Bold.woff?v=3.15") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url("Inter-BoldItalic.woff2?v=3.15") format("woff2"),
       url("Inter-BoldItalic.woff?v=3.15") format("woff");
}
html * {box-sizing:border-box}
html {font-family:Inter,sans-serif; font-size:12pt; line-height:1.6; color:#666}
body {padding:0;position:relative;width:140vh;max-width:100%;margin:0 auto}
a {color:#669}
a:visited {color:#969}
img {width:100%; height:auto}
#head {padding:0}
#head h1 {font-size:1.5rem;margin:0 1rem 1rem}
.text {padding:0 1rem}
nav {position:-webkit-sticky;position:sticky;top:0;padding:0;background:#fff}
nav li span, nav li a, nav li a:visited {color:#555;text-decoration:none;padding:0.5rem;display:block}
nav li span {color:#fff;background-color:#555}
nav ul {padding:0}
img.fw {width:100%;height:auto}
ul.list {list-style:none;padding:0}
.ham {cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 500ms;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}
.ham.active {transform:rotate(45deg)}
.line {fill:none;transition:stroke-dasharray 500ms, stroke-dashoffset 500ms;stroke:#000;stroke-width:5.5;stroke-linecap:round}
.ham .top, .ham .bottom {stroke-dasharray:40 121}
.ham.active .top, .ham.active .bottom {stroke-dashoffset:-68px}
.menu {display:none;margin:0;z-index:1}
.menu li {display:block;text-align:center}
.menu-toggle {font-size:36px;display:inline-block;position:absolute;top:0;right:5px;background-color:#fff;border:0;padding:0;margin:0}
.menu a {display:block;cursor:pointer}
.menu a:hover {background:#000;color:#fff}
.active .menu {display:block}
.active #main,.active #head h1 {display:none}
.menu-toggle:focus {outline:2px solid}
#logo {padding:0.5rem 0;margin-left:0.5rem}
#logo img {width:160px;height:48px}
#btn {text-align:center}
#enter {display:inline-block;color:#333;text-decoration:none;width:auto;margin:0 0 2rem;padding:0.5rem;font-size:1em;border-radius:1rem;border:1px solid #999;-webkit-box-shadow:5px 5px 9px 3px #999999;box-shadow:5px 5px 9px 3px #999999; background-color:#fff}
#enter:hover {-webkit-box-shadow:inset 5px 5px 9px 3px #999;box-shadow:inset 5px 5px 9px 3px #999}
#enter span {display:inline-block;background:url("/images/btn/animate1.svg") 0% 50% no-repeat;text-align:right; padding:0.5rem 0.5rem 0.5rem 4rem}
h2#subtitle {font-size:0.8em;margin-left:1rem}
.to, .to h2 {margin:0; padding:0;font-size:0.8rem; font-weight:normal;text-align:center}
.to h2 {margin:0 1rem}
.to h2.blk {color:#000}
.people details {font-size:.9rem}
summary {cursor:pointer}
summary strong {font-size:120%}
.tech summary {font-weight:bold}
.people details summary img, .people p.summary img {float:right;padding:0 0 0.5rem 0.5rem;width:initial;max-width:30%}
details:after, details summary:after, p.summary:after {content:"";display:table;clear:both}
details[open]:after, details summary:after, .summary:after {width:100%;border-bottom:1px solid #666}
.tech details[open]:after, .tech details summary:after, .tech .summary:after {border-bottom:none}
.people details summary:after, .people .summary:after {height:1rem}
.people details[open] summary:after {border-bottom:none;height:0}
.people details[open] summary span {display:none}
.people details img {float:left;max-width:10rem;padding:0 1rem 0.5rem 0}
.people details {font-size:0.9rem}
summary:focus { outline:thin dotted; }
.people details summary, .people .summary {font-size:1rem}
details summary {position:relative}
details summary span:after {content:'…'}
.tech details summary span:after {content:''}
.tech details {margin:1em 0}
.tech details details {margin-left:2rem}
summary h2, summary h3 {display:inline;font-size:initial}
figure img {background-color:#fff}
figcaption {text-align:center;font-size:90%;color:#000}
#footnotes {font-size:0.6rem}
#footnotes:before {content:"";display:table;clear:both;width:25%;border-top:1px solid #666}
#foot {background-color:#17809B;color:#fff;text-align:center}
#foot { background:-webkit-linear-gradient(left, #F00, #F90 , #EC0, #090, #09C, #009, #909, #C0C); background:-o-linear-gradient(right, o#F00, #F90 , #EC0, #090, #09C, #009, #909, #C0C); background:-moz-linear-gradient(right, #F00, #F90 , #EC0, #090, #09C, #009, #909, #C0C);background:linear-gradient(to right, #F00, #F90 , #EC0, #090, #09C, #009, #909, #C0C)}
#foot .contact {font-size:85%}
#foot a {color:#fff}
#foot h2:hover, #foot p:hover {background:#000}
#design {font-size:60%;text-align:center;padding:0 1rem}
#design a {color:#666;text-decoration:none}
#funded {text-align:center;font-size:70%}
#funded img {width:150px; max-width:50%}
.wide {display:none;}
@media only screen and (min-width:20rem) and (min-height:14.286rem) {
	html {font-size:12pt}
	.to {position:relative;text-align:left;color:white}
	.to h2 {position:absolute;top:50%;left:25%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;margin-right:25%;font-size:1.1rem;text-align:left}
	.to h2.top {top:10%;left:3%;-ms-transform:translate(-3%,-10%);transform:translate(-3%,-10%);margin-right:0}
	.to h2 span {display:none}
}
@media only screen and (min-width:25rem) and (min-height:17.857rem){
	html {font-size:14pt}
	.to h2 {font-size:1.2rem}
	.right {float:right;margin:1em 0 1em 1em}
	.left {float:left;margin:1em 1em 1em 0}
	img.right, img.left {width:initial;max-width:50%}
	.text {padding:0 1.5rem}
	#foot {padding:1.5rem}
	#design {text-align:right}
}
@media only screen and (min-width:30rem) and (min-height:21.439rem){
	html {font-size:16pt}
	.to h2 {font-size:1.5rem}
	details summary, .summary {font-size:.8rem}
	details[open] {font-size:.8em}
}
@media only screen and (min-width:38rem)  and (min-height:27.143rem) {
	.to h2 span, .wide {display:inline}
	.ham, .narrow {display:none}
	nav {position:absolute;top:0; right:1rem;background-color:transparent;font-size:0.75em}
	.menu {display:block}
	.menu li {display:inline-block}
	.active #main, .active #head h1 {display:block}
	figure.f2 img {width:50%}
	figure.r60, figure.r50, figure.r25 {float:right;width:25%}
	figure.l60, figure.l50, figure.l25 {float:left;width:25%}
	figure.r60, figure.l60 {width:60%}
	figure.r50, figure.l50 {width:50%}
	.text p {clear:both}
}
@media only screen and (min-width:45rem) and (min-height:32.143rem){
	.to h2 {font-size:1.6rem;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}
	figure.cr {display:flex;justify-content:space-between;align-items:center}
	figure.cr img {flex:0 0 600px;max-width:600px}
}
@media only screen and (min-width:55rem) and (min-height:39.286rem) {
	h2#subtitle {font-size:0.9em}
	.to h2 {font-size:1.7rem}
}
@media only screen and (min-width:60rem) and (min-height:42.857rem){
	.to h2 {font-size:1.9em}
}
@media only screen and (min-width:64rem) {
	body {width:64rem;max-width:140vh}
}
@media only screen and (min-width:64rem) and (min-height:45.714rem) {
	.to h2 {font-size:2rem}
	#enter {padding:0.8rem;font-size:1.1em;border-radius:1.2rem;margin:1rem}
	.btn1a span, .btn1b span, .btn2a span,.btn2b span,.btn5a span,.btn5b span {padding:1rem 1rem 1rem 5rem}
}
@media (prefers-color-scheme:dark) {
	html {background-color:#000}
	html, #design a {color:#ccc}
	a {color:#66F}
	a:visited {color:#F6F}
	.line {stroke:#fff}
	nav {background:#000}
	nav li a, nav li a:visited {color:#aaa}
	nav li span {color:#fff;background-color:#900}
	.menu a:hover {background:#600}
	.menu-toggle {background-color:#000}
	figcaption {background-color:#000;color:#fff}
	#logo span {background:#000 url('/images/logo_blk.svg') no-repeat;position:absolute;width:160px;height:48px;background-size:contain}
	#enter{background-color:#111;border-color:#111;-webkit-box-shadow:inset 5px 5px 9px 3px #333;box-shadow:inset 5px 5px 9px 3px #333}
	#enter span {color:#fff}
	#enter:hover {background-color:#000;-webkit-box-shadow:5px 5px 9px 3px #333;box-shadow:5px 5px 9px 3px #333}
	details img, .summary img {background-color:#fff;border:2px solid #fff}
}