/* Home page in the style of the TSUKI Project homepage (new.systemspace.network):
   a fixed header with an announcement strip, ticker and tabs, a slanted hero,
   drifting dots, and outlined sections with slanted edges in two columns. */

:root {
	--main-color: #ffdf9b;
	--accent-color: #ff9b9b;
	--inverse-color: #518ee2;
	--positive-color: #61de61;
	--negative-color: #ff9b9b;
	--header-h: 5.4em;
}

html {
	font-family: "Paragraph", monospace;
	font-size: 17px;
	overflow-x: hidden;
}

/* Dark fades down both sides of the window. */
html::before,
html::after {
	content: "";
	position: fixed;
	top: 0;
	width: 16px;
	height: 100%;
	z-index: 999;
	pointer-events: none;
}

html::before {
	left: 0;
	background: linear-gradient(to right, #000, transparent);
}

html::after {
	right: 0;
	background: linear-gradient(to left, #000, transparent);
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	color: var(--main-color);
}

.moon {
	display: inline-block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	box-shadow: inset -0.22em 0.12em 0 0 currentColor;
	transform: rotate(-20deg);
	vertical-align: -0.12em;
}

.brand-icon {
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
	object-fit: cover;
	border-radius: 50%;
	vertical-align: -0.3em;
}

.link {
	color: inherit;
	border-bottom: 1px dotted;
}

.link:hover {
	background: none;
	color: #fff;
}

.highlight {
	color: var(--accent-color);
}

.posneg.positive { color: var(--positive-color); }
.posneg.negative { color: var(--negative-color); }
.posneg.neutral { color: var(--main-color); }

/* ------------------------------------------------ loading box */

#loading-box {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: #000;
	transition: opacity 0.2s;
}

#loading-box.finished {
	opacity: 0;
	pointer-events: none;
}

#loading-box-text {
	position: fixed;
	right: 72px;
	bottom: 28px;
	color: #fff;
	font-family: "Tiny", monospace;
	font-size: 22px;
	transition: bottom 0.2s ease-in;
}

#loading-box-icon {
	position: fixed;
	right: 14px;
	bottom: 14px;
	width: 50px;
	height: 50px;
	color: #fff;
	transition: bottom 0.2s ease-in;
}

#loading-box.finished #loading-box-text { bottom: -36px; }
#loading-box.finished #loading-box-icon { bottom: -50px; }

#loading-box-icon .moon {
	position: absolute;
	left: 13px;
	top: 13px;
	width: 24px;
	height: 24px;
}

#loading-box-icon .icon {
	position: absolute;
	left: 7px;
	top: 7px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

#loading-box-icon .spin {
	position: absolute;
	inset: 0;
	border: 2px dotted #fff;
	border-radius: 50%;
	animation: loaderSpin 2s infinite linear;
}

/* ------------------------------------------------ header */

header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 500;
	filter: drop-shadow(-1px 0 #fff) drop-shadow(0 1px #fff) drop-shadow(1px 0 #fff);
	transition: 0.5s top;
}

header.hidden {
	top: -12em;
}

header.anim-slow {
	transition: 1s top;
}

#header-announcement {
	position: relative;
	max-height: 2.4em;
	padding: 0.3em 2em;
	overflow: hidden;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: "Heading", monospace;
	font-size: 1.6em;
	letter-spacing: 0.15em;
	color: #aff;
	text-shadow: 0 0 16px #aff;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(80, 200, 255, 0.35), transparent 70%),
		repeating-linear-gradient(to bottom, rgba(170, 255, 255, 0.07) 0 1px, transparent 1px 3px),
		#000;
	box-shadow: inset 0 -16px 16px #000;
	transition: 0.3s max-height, 0.3s padding;
}

.announcement-hidden #header-announcement {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

#close-announcement {
	position: absolute;
	top: 0.15em;
	right: 0.5em;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

#header-inner {
	position: relative;
	height: 2em;
	overflow: hidden;
	background: #000;
}

#header-status {
	--uc: var(--negative-color);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 21vw;
	min-width: 190px;
	height: 2em;
	padding: 0.3em 0.5em;
	font-family: "Heading", monospace;
	font-size: 1.05em;
	color: var(--uc);
	text-shadow: 0 0 4px var(--uc);
	background: linear-gradient(to right, #000 0%, #000 45%, transparent 90%);
	white-space: nowrap;
}

#header-status span {
	margin-right: 0.4em;
	opacity: 0.6;
	color: #000;
	text-shadow: -1px -1px var(--uc), 0 -1px var(--uc), 1px -1px var(--uc), 1px 0 var(--uc), 1px 1px var(--uc), 0 1px var(--uc), -1px 1px var(--uc), -1px 0 var(--uc);
}

.hs_ok { --uc: var(--positive-color) !important; }
.hs_warn { --uc: var(--main-color) !important; }

#header-marquee {
	height: 2em;
	padding: 0.3em 0;
	overflow: hidden;
	white-space: nowrap;
	color: #fff;
	font-family: "Heading", monospace;
	font-size: 1.05em;
	letter-spacing: 0.05em;
}

#header-marquee_inner {
	display: inline-block;
	animation: marqueeIntro 3s linear, marqueeRun 40s 3s linear infinite;
}

@keyframes marqueeIntro {
	0% { opacity: 0; transform: translateX(3.333%); }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes marqueeRun {
	0% { transform: translateX(0); }
	100% { transform: translateX(-33.333%); }
}

/* A slanted line between ticker items. */
.tick::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1.5em;
	margin: 0 0.6em 0 1.3em;
	vertical-align: -0.35em;
	background: #fff;
	transform: skewX(-15deg);
}

/* Tabs hanging off the ticker, cut into trapezoids. */
#header-knobs {
	display: flex;
	align-items: flex-start;
}

.header-knob-form {
	display: contents;
}

.header-knob {
	display: inline-block;
	flex: none;
	margin-left: 1em;
	background: #000;
	color: #fff;
	border: 0;
	cursor: pointer;
}

.header-knob.right-hand {
	margin-left: 0;
	margin-right: 1em;
}

#header-knobs .right-hand {
	margin-right: 0.3em;
}

/* The first of the right-hand tabs pushes them all to the right. */
#header-knobs .push {
	margin-left: auto;
}

#header-knobs_logo {
	margin-left: 0;
	padding: 0.35em 1.6em 0.45em 0.8em;
	clip-path: polygon(100% 0, 0 0, 0 100%, 90% 95%);
	font-family: "Heading", monospace;
	font-size: 1.15em;
	letter-spacing: 0.08em;
}

#header-knobs_logo .moon,
#header-knobs_logo .brand-icon {
	margin-right: 0.35em;
}

.header-knob-text {
	height: 1.35em;
	padding: 0 1em;
	clip-path: polygon(100% 0, 0 0, 10% 100%, 90% 100%);
	font-family: "Tiny", monospace;
	font-size: 0.85em;
	line-height: 1.3em;
}

.header-knob:hover {
	background: #fff;
	color: #000;
}

/* ------------------------------------------------ hero */

#bg-dots {
	position: fixed;
	left: -256px;
	top: 0;
	width: calc(100% + 256px);
	height: calc(100% + 64px);
	z-index: -1;
	background-image: radial-gradient(rgba(255, 223, 155, 0.16) 1px, transparent 1.5px);
	background-size: 16px 16px;
	animation: dotsDrift 16s linear infinite;
}

@keyframes dotsDrift {
	0% { transform: translate(0, 0); }
	100% { transform: translate(256px, -64px); }
}

#header-shadow {
	filter: drop-shadow(0 1px var(--main-color));
}

#header {
	position: relative;
	min-height: max(36vw, 640px);
	padding: calc(var(--header-h) + 4vw) 10vw 10vw;
	clip-path: polygon(100% 0, 0 0, 0 100%, 100% 90%);
	overflow: hidden;
}

#header .sky {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 76% 34%, rgba(255, 244, 214, 0.9) 0 5vw, rgba(255, 223, 155, 0.18) 5.2vw, transparent 14vw),
		radial-gradient(1px 1px at 12% 30%, #fff, transparent),
		radial-gradient(1px 1px at 22% 62%, #bbb, transparent),
		radial-gradient(1px 1px at 38% 24%, #fff, transparent),
		radial-gradient(1px 1px at 47% 70%, #999, transparent),
		radial-gradient(1px 1px at 57% 40%, #ddd, transparent),
		radial-gradient(1px 1px at 91% 20%, #fff, transparent),
		radial-gradient(1px 1px at 95% 66%, #aaa, transparent),
		radial-gradient(ellipse at 50% 120%, rgba(81, 142, 226, 0.45), transparent 60%),
		linear-gradient(to bottom, #02030c 0%, #0b1236 60%, #1b2a5c 100%);
	background-attachment: fixed;
}

#header .sky::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
}

#motto {
	position: relative;
	z-index: 3;
	margin: 0;
	font-family: "Heading", monospace;
	font-size: 3vw;
	font-weight: 400;
	letter-spacing: 0.3em;
	line-height: 1.25;
	color: #fff;
	text-shadow: 3px 6px #000, 0 -1px #000, 0 1px #000, -1px 0 #000, 1px 0 #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
}

/* The site icon, standing beside the login card like TSUKI's character art. */
#header-art {
	position: absolute;
	z-index: 1;
	right: calc(6vw + 330px);
	bottom: 0;
	height: min(34vw, 540px);
}

#header-art img {
	height: 100%;
	width: auto;
	max-width: 34vw;
	object-fit: contain;
	filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.6));
	animation: artFloat 6s ease-in-out infinite alternate;
}

@keyframes artFloat {
	from { transform: translateY(6px); }
	to { transform: translateY(-6px); }
}

/* A little biolink page that is really the login form. */
#hero-card {
	position: absolute;
	z-index: 2;
	right: 6vw;
	top: calc(var(--header-h) + 1.5vw);
	width: 300px;
	margin: 0;
	padding: 26px 24px 22px;
	text-align: center;
	color: #fff;
	border: 1px solid #fff;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.92));
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

.mock-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin: 0 auto 14px;
	border: 1px solid #fff;
	background: #222 center / cover no-repeat;
	box-shadow: 0 5px var(--main-color);
	font-family: "Heading", monospace;
	font-size: 2.2em;
}

.mock-avatar.blank {
	background: radial-gradient(circle at 50% 38%, #fff 0 18%, transparent 19%), radial-gradient(circle at 50% 100%, #fff 0 38%, transparent 39%), #333;
}

.mock-name {
	font-family: "Heading", monospace;
	font-size: 1.3em;
	letter-spacing: 0.08em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mock-bio {
	margin: 4px 0 18px;
	font-size: 1em;
	color: #999;
}

.mock-btn {
	display: block;
	width: 100%;
	margin: 0 0 16px;
	padding: 7px 10px;
	background: #000;
	border: 1px solid var(--main-color);
	box-shadow: 0 4px var(--main-color);
	color: var(--main-color);
	font-family: "Heading", monospace;
	font-size: 1em;
	letter-spacing: 0.1em;
	text-align: center;
	outline: none;
	transition: 0.15s;
}

.mock-btn.white {
	border-color: #fff;
	box-shadow: 0 4px #fff;
	color: #fff;
}

input.mock-btn::placeholder {
	color: #777;
}

input.mock-btn:focus {
	box-shadow: 0 4px var(--main-color), 0 0 16px rgba(255, 223, 155, 0.35);
}

input.mock-btn.white:focus {
	box-shadow: 0 4px #fff, 0 0 16px rgba(255, 255, 255, 0.3);
}

/* Buttons on the logged-in card: filled like LOG IN, and an outlined one. */
.card-btn {
	display: block;
	margin: 0 0 12px;
	padding: 8px 0 6px;
	background: var(--main-color);
	border: 1px solid var(--main-color);
	color: #000;
	font-family: "Tiny", monospace;
	font-size: 1.15em;
	letter-spacing: 0.15em;
	text-align: center;
	transition: 0.12s;
}

.card-btn:hover {
	background: #fff;
	border-color: #fff;
}

.card-btn:active {
	transform: translateY(2px);
}

.card-btn.outline {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.card-btn.outline:hover {
	background: #fff;
	color: #000;
}

.mock-go {
	width: 100%;
	padding: 6px 0 4px;
	background: var(--main-color);
	border: 0;
	color: #000;
	font-family: "Tiny", monospace;
	font-size: 1.2em;
	letter-spacing: 0.15em;
	cursor: pointer;
	transition: 0.1s;
}

.mock-go:hover {
	background: #fff;
}

.mock-go:active {
	transform: translateY(2px);
}

.mock-sub {
	display: block;
	width: 100%;
	margin-top: 10px;
	background: none;
	border: 0;
	color: #888;
	font-family: "Paragraph", monospace;
	font-size: 1em;
	cursor: pointer;
}

.mock-sub:hover {
	color: #fff;
}

/* The Mochi box in the right-hand column. */
#mochi {
	text-align: center;
}

#mochi .kicker {
	top: -0.2em;
	opacity: 0.8;
}

.mochi-title {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: "Heading", monospace;
	font-size: 2em;
	letter-spacing: 0.3em;
	color: #fff;
	text-shadow: 0 0 12px var(--section-color);
}

.mochi-title img {
	width: 0.9em;
	height: 0.9em;
	filter: invert(1) drop-shadow(0 0 6px #8f9bff);
}

#mochi p {
	text-align: center;
}

.mochi-go {
	display: inline-block;
	margin: 0.5em 0 0.3em;
	color: var(--section-color);
}

.mochi-go:hover {
	color: #fff;
}

/* ------------------------------------------------ sections */

.sectionable-block {
	width: 95vw;
	margin: 0 0 2vw 2.5vw;
	text-align: center;
}

/* Each section is an outlined parallelogram: the <section> draws the
   outline (drop-shadows in its colour) around a black .sec-in panel cut with
   clip-path, so the slanted edges come out as clean single lines. */
section {
	--section-color: var(--main-color);
	--slant: 22px;
	position: relative;
	margin: 18px 0 30px;
	color: var(--section-color);
	text-align: justify;
	filter: drop-shadow(0 1px 0 var(--section-color)) drop-shadow(0 -1px 0 var(--section-color)) drop-shadow(-1px 0 0 var(--section-color)) drop-shadow(1px 0 0 var(--section-color));
}

.sec-in {
	padding: calc(var(--slant) + 0.5em) 1.3em calc(var(--slant) + 0.4em);
	background: #000;
	clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
	transition: background 0.15s, color 0.15s;
}

section ::selection {
	background: var(--section-color);
	color: #000;
}

section h1 {
	margin: -0.3em -0.5em 0.4em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid;
	text-align: center;
	font-family: "Heading", monospace;
	font-size: 1.9em;
	font-weight: 400;
	letter-spacing: 0.3em;
}

section h3 {
	margin: 0.4em 0;
	text-align: center;
	font-family: "Tiny", monospace;
	font-size: 1em;
	font-weight: 400;
}

section h3.kicker {
	position: relative;
	top: -0.5em;
	margin: 0;
	font-size: 0.8em;
}

section p {
	margin: 0.4em 0;
	font-size: 1.2em;
	line-height: 1.15;
}

.float-above {
	display: block;
	width: calc(90vw + 1.5em);
	margin: 0 auto;
}

.float-above section {
	--slant: 30px;
}

.float-left {
	display: inline-block;
	width: 60vw;
	margin-right: 0.5em;
	vertical-align: top;
}

.float-right {
	display: inline-block;
	width: 30vw;
	margin-left: 0.5em;
	margin-top: -1.55vw;
	vertical-align: top;
}

.float-right section {
	--slant: 12px;
	margin-bottom: 2.25vw;
}

/* The newest pages on one side (like the company logos on TSUKI), the
   welcome text on the other. */
#featured .sec-in {
	display: flex;
	align-items: center;
	gap: 1.5em 2.5em;
}

.tiles {
	flex: 1 1 55%;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	gap: 0.6em;
	min-width: 0;
}

.featured-info {
	flex: 1 1 40%;
	min-width: 0;
	text-align: left;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	padding-left: 2em;
}

.featured-info h1 {
	margin: 0.1em 0 0.3em;
}

.featured-info p {
	margin: 0.3em 0;
}

.featured-stats {
	font-family: "Tiny", monospace;
}

.tile {
	--tile: var(--main-color);
	display: flex;
	align-items: center;
	gap: 0.8em;
	width: 15.5em;
	max-width: 100%;
	padding: 0.6em 0.8em;
	background: #000;
	color: var(--tile);
	border: 1px solid rgba(255, 255, 255, 0.15);
	font-family: "Tiny", monospace;
	font-size: 0.8em;
	text-align: left;
	transition: 0.15s;
}

.tile:hover {
	background: var(--tile);
	border-color: var(--tile);
	color: #000;
}

.tile-img {
	flex: 0 0 auto;
	width: 3.6em;
	height: 3.6em;
	border: 1px solid currentColor;
	background: #111 center / cover no-repeat;
}

.tile-text {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

.tile-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: "Heading", monospace;
	font-size: 1.15em;
	color: #fff;
}

.tile:hover .tile-title {
	color: #000;
}

.tile-bio {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #999;
}

.tile:hover .tile-bio {
	color: #222;
}

.tiles-icon {
	width: 5em;
	height: 5em;
	object-fit: cover;
	border: 1px solid #fff;
}

.tile-img.letter {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Heading", monospace;
	font-size: 1.1em;
}

.tile-name {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tiles-empty {
	align-self: center;
	text-align: left;
}

/* Claim box. */
.claim {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin: 1em 0 0.3em;
	font-family: "Heading", monospace;
}

.claim label {
	opacity: 0.7;
}

.claim input {
	width: 11em;
	padding: 0.25em 0.4em;
	background: #000;
	border: 1px solid currentColor;
	color: #fff;
	font: inherit;
	font-size: 1.1em;
	outline: none;
}

.claim input:focus {
	box-shadow: 0 0 10px var(--section-color);
}

.button {
	position: relative;
	top: 0;
	padding: 0.25em 1em 0.15em;
	background: #000;
	border: 1px solid currentColor;
	box-shadow: 0 3px currentColor;
	color: inherit;
	font-family: "Heading", monospace;
	font-size: 1.05em;
	cursor: pointer;
	transition: 0.2s top, 0.2s color, 0.2s background-color, 0.2s box-shadow;
}

.button:hover {
	top: 1px;
	box-shadow: 0 2px currentColor;
}

.button:active {
	top: 2px;
	box-shadow: 0 1px currentColor, 0 1px 10px currentColor;
	background: var(--section-color);
	color: #000;
}

/* The big REGISTER block. */
.bigbutton {
	display: block;
}

.bigbutton section {
	text-align: center;
	font-family: "Tiny", monospace;
}

.bigbutton section span {
	display: block;
	font-size: 2.3em;
	line-height: 1;
	text-transform: uppercase;
}

.bigbutton:hover .sec-in {
	background: var(--section-color);
	color: #000;
}

/* FAQ: questions that open when clicked. */
.faq details {
	border-top: 1px solid color-mix(in srgb, var(--section-color) 35%, transparent);
}

.faq details:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--section-color) 35%, transparent);
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.65em 0.2em;
	list-style: none;
	cursor: pointer;
	font-size: 1.3em;
	color: #fff;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "\25BE";
	flex: none;
	color: var(--section-color);
	transition: transform 0.2s;
}

.faq details[open] summary::after {
	transform: rotate(180deg);
}

.faq summary:hover {
	color: var(--section-color);
}

.faq details p {
	margin: 0 0.2em 0.9em;
	color: var(--section-color);
}

/* Terms and privacy pages. */
.info-page {
	width: min(900px, 92vw);
	margin: calc(var(--header-h) + 3em) auto 3em;
}

.info-page h2 {
	margin: 1.2em 0 0.3em;
	font-family: "Heading", monospace;
	font-size: 1.25em;
	font-weight: 400;
	letter-spacing: 0.15em;
	color: #fff;
}

.info-page p,
.info-page li {
	font-size: 1.2em;
	line-height: 1.2;
}

.info-page ul {
	margin: 0.3em 0 0.6em 1.2em;
	padding: 0;
}

.info-page .updated {
	text-align: center;
	opacity: 0.7;
}

/* ------------------------------------------------ team page */

.team-intro {
	text-align: center;
}

.team-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em;
}

.team-card {
	--tile: var(--main-color);
	display: flex;
	align-items: center;
	gap: 1em;
	width: calc(50% - 0.4em);
	min-width: 0;
	padding: 0.8em 1em;
	background: #000;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--tile);
	transition: 0.15s;
}

.team-card.owner {
	width: 100%;
	border-color: var(--tile);
	box-shadow: 0 4px var(--tile);
}

.team-card:hover {
	background: var(--tile);
	color: #000;
}

.team-img {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border: 1px solid currentColor;
	background: #111 center / cover no-repeat;
}

.team-card.owner .team-img {
	width: 110px;
	height: 110px;
}

.team-img.letter {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Heading", monospace;
	font-size: 2em;
}

.team-text {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

.team-role {
	align-self: flex-start;
	padding: 0 0.4em;
	background: var(--tile);
	color: #000;
	font-family: "Tiny", monospace;
	font-size: 0.85em;
}

.team-card:hover .team-role {
	background: #000;
	color: var(--tile);
}

.team-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: "Heading", monospace;
	font-size: 1.3em;
	color: #fff;
}

.team-card.owner .team-name {
	font-size: 1.7em;
}

.team-card:hover .team-name {
	color: #000;
}

.team-handle,
.team-bio {
	font-family: "Tiny", monospace;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.team-bio {
	color: #999;
}

.team-card:hover .team-bio {
	color: #222;
}

.team-none,
.team-small {
	opacity: 0.7;
}

.team-form {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	max-width: 32em;
	margin: 1em auto 0.5em;
	font-family: "Tiny", monospace;
}

.team-form label {
	margin-top: 0.5em;
}

.team-form input,
.team-form textarea {
	padding: 0.35em 0.5em;
	background: #000;
	border: 1px solid currentColor;
	color: #fff;
	font: inherit;
	font-size: 1.1em;
	outline: none;
	resize: vertical;
}

.team-form input:focus,
.team-form textarea:focus {
	box-shadow: 0 0 10px var(--section-color);
}

.team-form .button {
	align-self: center;
	margin-top: 1em;
}

.team-error {
	padding: 0.4em 0.7em;
	border: 1px solid var(--negative-color);
	color: var(--negative-color);
}

.team-note {
	padding: 0.4em 0.7em;
	border: 1px dashed currentColor;
}

.team-code {
	margin: 0.8em 0;
	text-align: center;
}

.team-code code {
	display: inline-block;
	padding: 0.3em 0.8em;
	border: 1px solid currentColor;
	box-shadow: 0 4px currentColor;
	font-family: "Seg", monospace;
	font-size: 2em;
	letter-spacing: 0.15em;
	color: #fff;
	user-select: all;
}

.team-actions {
	text-align: center;
}

@media (max-width: 700px) {
	.team-card {
		width: 100%;
	}
}

/* Stats. */
section h1.statistic {
	margin: 0 0 -0.2em;
	border-bottom: 0;
	font-family: "Seg", monospace;
	font-size: 4em;
	letter-spacing: 0.12em;
	line-height: 1;
}

section p.statistic-label {
	margin: 0;
	text-align: center;
	font-family: "Tiny", monospace;
	font-size: 1.6em;
}

section p.statistic-addendum {
	margin: 0.3em 0 -0.6em;
	text-align: center;
	font-family: "Tiny", monospace;
	font-size: 0.8em;
}

/* Sitemap. */
#sitemap,
#makeyours {
	text-align: left;
	padding-left: 2em;
}

.sitemap-header {
	display: block;
	margin-top: 0.5em;
	font-family: "Heading", monospace;
	font-size: 1.2em;
	letter-spacing: 0.2em;
}

.sitemap-header .moon,
.sitemap-header .brand-icon,
.sitemap-header .square {
	margin-right: 0.4em;
}

.sitemap-header .square {
	display: inline-block;
	width: 0.65em;
	height: 0.65em;
	border: 1px solid currentColor;
	transform: rotate(45deg);
}

.sitemap-item {
	display: block;
	margin-left: 22px;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font-family: "Tiny", monospace;
	font-size: 0.8em;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}

.sitemap-deep {
	margin-left: 40px;
}

.sitemap-xlink::after {
	content: " \2197";
}

.sitemap-item.disabled {
	color: #000;
	cursor: default;
	text-shadow: -1px -1px #888, 0 -1px #888, 1px -1px #888, 1px 0 #888, 1px 1px #888, 0 1px #888, -1px 1px #888, -1px 0 #888;
}

#sitemap a:hover,
#sitemap button:hover,
#makeyours a:hover {
	color: #fff;
}

/* ------------------------------------------------ footer */

footer {
	position: relative;
	z-index: 100;
	margin-top: auto;
	padding: 1.5em;
	background: #000;
	color: #fff;
	filter: drop-shadow(0 -1px #fff);
	opacity: 0.1;
	transition: 2s opacity ease-out;
}

footer.scrolled,
footer:hover {
	opacity: 1;
	transition: 0.3s opacity ease-in;
}

footer::before {
	content: "";
	display: block;
	position: relative;
	top: calc(-2.5vw - 1.5em + 1px);
	left: -1.5em;
	width: calc(100% + 3em);
	height: 2.5vw;
	margin-bottom: -2.5vw;
	background: #000;
	clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.footer-block {
	display: inline-block;
	vertical-align: middle;
	margin: 0.5em;
	text-align: left;
}

.footer-block p {
	margin: 0;
	font-family: "Tiny", monospace;
	font-size: 0.75em;
	line-height: 1.5;
}

#footer-logo {
	font-family: "Heading", monospace;
	font-size: 1.8em;
	letter-spacing: 0.1em;
}

#footer-logo .moon,
#footer-logo .brand-icon {
	margin-right: 0.3em;
}

/* ------------------------------------------------ intro (like Mochi's) */

#intro {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: #000;
	cursor: pointer;
}

#intro[hidden] {
	display: none;
}

/* The screen heats up from black to grey while the text glows... */
#intro.ready {
	animation: 1.7s introHeat cubic-bezier(.82, .28, .93, .3) forwards;
}

#intro.ready #intro_motto {
	animation: 1.7s introTypeHeat cubic-bezier(.82, .28, .93, .3) forwards;
}

/* ...then fades away onto the page. */
#intro.destroyed {
	transition: 2s opacity;
	opacity: 0;
	pointer-events: none;
}

@keyframes introHeat {
	0% { background-color: #000; }
	100% { background-color: #888; }
}

@keyframes introTypeHeat {
	0% { text-shadow: 0 0 0 #fff; color: #fff; }
	100% { text-shadow: 0 0 100px #fff, 0 0 20px #fff, 0 0 10px #fff; color: #aaa; }
}

/* Placed over the page's motto by home.js. */
#intro_motto {
	position: fixed;
	left: 10vw;
	top: calc(var(--header-h) + 4vw);
	margin: 0;
	font-family: "Heading", monospace;
	font-size: 3vw;
	font-weight: 400;
	letter-spacing: 0.3em;
	line-height: 1.25;
	white-space: nowrap;
	color: #fff;
	text-shadow: 3px 6px #000, 0 -1px #000, 0 1px #000, -1px 0 #000, 1px 0 #000, -1px -1px #000, 1px 1px #000, -1px 1px #000, 1px -1px #000;
}

#intro_enter {
	position: fixed;
	top: 45vh;
	width: 100%;
	text-align: center;
	font-family: "Heading", monospace;
	font-size: 1.4em;
	letter-spacing: 4px;
	color: var(--main-color);
	animation: blink 1.2s steps(2) infinite;
}

#intro_skip {
	position: fixed;
	left: 50%;
	bottom: 6vh;
	transform: translateX(-50%);
	background: none;
	border: 0;
	color: #fff;
	font-family: "Tiny", monospace;
	cursor: pointer;
	opacity: 0.2;
}

#intro_skip:hover {
	opacity: 0.6;
}

#intro.ready #intro_skip {
	display: none;
}

#musicknob[aria-pressed="true"] {
	color: var(--main-color);
}

#musicknob.waiting {
	color: var(--main-color);
	animation: blink 1.2s steps(2) infinite;
}


/* ------------------------------------------------ phones */

@media (max-width: 800px) {
	html {
		font-size: 15px;
	}

	#featured .sec-in {
		flex-direction: column;
		align-items: stretch;
	}

	.featured-info {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
		padding: 1em 0 0;
	}

	.tile {
		width: 100%;
	}

	#header-status {
		width: auto;
		min-width: 0;
		padding-right: 2.5em;
	}

	#header {
		min-height: 0;
		padding: calc(var(--header-h) + 8vw) 5vw 16vw;
	}

	#motto,
	#intro_motto {
		font-size: 5.4vw;
		letter-spacing: 0.2em;
	}

	#intro_motto {
		left: 5vw;
	}

	#header-art {
		position: relative;
		right: auto;
		bottom: auto;
		height: 55vw;
		margin-top: 6vw;
		text-align: center;
	}

	#header-art img {
		max-width: 80vw;
	}

	#hero-card {
		position: relative;
		right: auto;
		top: auto;
		width: min(320px, 90vw);
		margin: 6vw auto 0;
	}

	.float-above,
	.float-left,
	.float-right {
		display: block;
		width: 95vw;
		margin: 0;
	}

	section,
	.float-above section,
	.float-right section {
		--slant: 14px;
		margin-bottom: 22px;
	}

	section h1 {
		font-size: 1.4em;
		letter-spacing: 0.15em;
	}

	.header-knob-text {
		padding: 0 0.6em;
	}

	#header-announcement {
		font-size: 1.1em;
	}

}

@media (max-width: 520px) {
	#intro_enter {
		font-size: 1em;
		letter-spacing: 2px;
	}

	#header-knobs .header-knob-text:not(.right-hand),
	#header-knobs .phone-hide {
		display: none;
	}
}