update demo styles

demo/styles.less

@@ -1,5 +1,4 @@
 @inter: '../node_modules/typeface-inter/Inter Web';
-@muted: hsl(215, 12%, 30%);
 @bg: #0e1115;
 
 @font-face {
@@ -26,17 +25,18 @@ body {
 	background-color: @bg;
 	overflow: hidden;
 	font-family: 'Inter';
-	font-size: 18px;
-	font-weight: 540;
+	font-size: 17px;
+	font-weight: 480;
 	line-height: 1.45;
 
 	@media (max-width: 500px) {
-		font-size: 16px;
+		font-size: 15px;
 	}
 }
 
 canvas {
 	background-color: @bg;
+	object-fit: cover !important;
 }
 
 .wrapper {
@@ -48,19 +48,21 @@ canvas {
 }
 
 image-refractor {
-	width: 94vmin;
-	height: 94vmin;
-	border-radius: 15px;
-	overflow: hidden;
+	width: 100vmax;
+	height: 100vmax;
 }
 
 main {
 	position: absolute;
 	display: flex;
 	flex-direction: column;
+	align-items: start;
 	gap: 2rem;
-	inset: 0;
-	padding: 1.7rem 2rem;
+	inset: 0.5rem auto auto 0.5rem;
+	padding: 0.8rem 1.5rem 0.8rem 1rem;
+	border-radius: 0.5rem;
+	background-color: hsla(215, 20%, 7%, 0.2);
+	backdrop-filter: blur(20px);
 }
 
 main * {
@@ -69,11 +71,11 @@ main * {
 
 h1 {
 	margin: 0;
-	margin-left: -2px;
-	font-size: 2.65rem;
-	font-weight: 760;
-	letter-spacing: -0.035em;
-	line-height: 1;
+	margin-left: -1px;
+	font-size: 2.05rem;
+	font-weight: 680;
+	letter-spacing: -0.02em;
+	line-height: 1.05;
 }
 
 p {
@@ -83,15 +85,28 @@ p {
 a {
 	color: inherit;
 	text-decoration: none;
-	transition: color 0.2s;
+	opacity: 1;
+	transition: opacity 0.2s;
 
 	&:hover {
-		color: @muted;
+		opacity: 0.4;
 	}
 }
 
 summary {
+	display: inline-flex;
+	align-items: center;
 	cursor: pointer;
+
+	&:before {
+		content: '';
+		font-size: 0.8em;
+		padding-right: 0.6em;
+	}
+
+	[open] &:before {
+		content: '';
+	}
 }
 
 details > div {
@@ -113,17 +128,24 @@ label {
 
 swap-image,
 refractor-preset {
-	color: @muted;
+	display: inline-flex;
+	align-items: center;
+	opacity: 0.35;
 	cursor: pointer;
-	transition: color 0.2s;
+	transition: opacity 0.2s;
 
 	&:before {
 		content: '○';
-		padding-right: 0.5em;
+		font-size: 0.8em;
+		padding-right: 0.7em;
+	}
+
+	&:hover {
+		opacity: 0.7;
 	}
 
 	&.active {
-		color: #ffffff;
+		opacity: 1;
 
 		&:before {
 			content: '●';
@@ -133,6 +155,6 @@ refractor-preset {
 
 .github {
 	position: fixed;
-	top: 2rem;
-	right: 2rem;
+	top: 1.5rem;
+	right: 1.5rem;
 }