* {
	-webkit-user-drag: none;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0; padding: 0; box-sizing: border-box;
	-webkit-tap-highlight-color: transparent; user-select: none;
}
body {
	color: #333;
	padding: 16px;
	background: #F2F2F2;
}
.group {
	padding: 16px;
	background: white;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.75);
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.section-nav-bar {
	padding: 8px;
	border-radius: 8px 8px 0 0;
	display: flex; justify-content: space-between;
	box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45);
	background: linear-gradient(to bottom, #DADADC, #CFCFD0 33%, #C7C7C9 67%, #C2C2C3);
}
.section-nav-bar a {
	border-radius: 5px; padding: 8px; transition: transform 0.25s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	background: linear-gradient(to bottom, #797979, #6E6E6F 33%, #575859 67%, #484749); 
	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0.5px rgba(0, 0, 0, 0.2);
	font-weight: bold; text-decoration: none; color: white; text-shadow: 0 -1px rgba(0, 0, 0, 0.6);
}
.section-nav-bar a:active { transform: scale(0.84); }

.section {
	min-width: 0;
	display: flex; flex-direction: column;
} 
.section-title {
	text-shadow: 0 1px rgba(0, 0, 0, 0.4);
    padding: 8px; border-radius: 8px 8px 0 0;
	color: white; font-size: 18px; font-weight: 700;
    background: linear-gradient(to bottom, #93A3AD, #C0C9D1);
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.15), inset 0 -1px rgba(0, 0, 0, 0.15), inset 0 2px rgba(255, 255, 255, 0.25);
}
.section-body {
	overflow: hidden;
	border-radius: 0 0 8px 8px;
	flex: 1; padding: 8px;
	box-shadow: inset 0px -1px 5px rgba(0, 0, 0, 0.75);
	display: flex; flex-direction: column; justify-content: center; gap: 8px;
	background: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 100%);
}
.brief-intro-body {
	padding: 0;
	position: relative;
	border-radius: 8px;
	display: flex; align-items: center; 
	background: url("../icons/fabric.png"); background-size: 64px;
}
.brief-intro-body * {
	z-index: 1;
}
.brief-intro-body::after {
    inset: 0;
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.5);
    background: radial-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15));
}
.brief-intro-title {
	color: #E7E4E4;
	padding: 16px;
    font-size: 48px;
   	text-wrap: nowrap;
    -webkit-text-stroke: 1px #F5F5F4;
    text-shadow: 0 3px 2px rgba(0, 0, 0, 0.75);
}
.brief-intro-version {
    font-size: 24px;
    margin-left: -8px;
}
.brief-intro-spacer { flex: 1; }
.brief-intro-essay {
	color: white;
	width: 85%;
	padding: 8px;
	font-size: 18px;
	text-shadow: 0 -1px rgba(0, 0, 0, 0.6);
}
.brief-intro-essay span {
	font-weight: 700;
	font-size: 18px;
	line-height: 48px;
	text-wrap: nowrap;
}
.section-keyboard {
	grid-column: span 2;
}
.section-body-keyboard {
	flex-direction: row;
	justify-content: space-evenly;
}
@media(hover: hover) {
	::-webkit-scrollbar { width: 8px; }
	::-webkit-scrollbar-track { background: #CCC; }
	::-webkit-scrollbar-thumb { background: #888; }
	.section-nav-bar a:hover { transform: scale(0.92); }
}
@media(max-width: 768px) {
	body {
		padding: 16px 8px;
	}
	.group {
		padding: 8px;
		grid-template-columns: repeat(2, 1fr); gap: 24px;
	}
}
@media(max-width: 576px) {
	.section-keyboard {
		grid-column: span 1;
	}
	.section-body-keyboard {
		flex-direction: column;
	}
	.group {
		grid-template-columns: repeat(1, 1fr);
	}
}