@font-face {
	font-family: 'Haffer';
	src: url('../../fonts/haffer-uprights-variable.woff2') format('woff2-variations');
	font-weight: 100 1000;
	font-style: normal;
	font-feature-settings: 'ss06' on;
}

@font-face {
	font-family: 'Fraktion Mono';
	font-style: normal;
	font-weight: 400;
	font-feature-settings: 'ss04' 1, 'zero' 1;
	src: url('../../fonts/ppfraktionmono-regular.woff2') format('woff2');
}

:root {
	--top-bar-height: 64px;
	--page-maximum-width: 1400px;
	--page-narrow-width: 660px;

	--color-profile-placeholder: #e9e9eb;
	--color-caret: #3f95ff;
	--color-scrollbar: #4a4a4f;
	--color-selection: #4a4a4f;
	--color-focus: #fafafa;
	--color-status-updates: #3f95ff;
	--color-status-bugs: #f46c1e;

	--color-surface-1: #000000;
	--color-surface-2: #0d0d0f;
	--color-surface-3: #ffffff;
	--color-surface-4: #f4f4f5;
	--color-surface-5: #d6d6d9;

	--color-background-1-default: #0d0d0f;
	--color-background-1-pressed: #1c1c1e;
	--color-background-1-active: #2c2c2f;
	--color-background-2-default: #1c1c1e;
	--color-background-2-pressed: #2c2c2f;
	--color-background-2-active: #4a4a4f;
	--color-background-3-default: #2c2c2f;
	--color-background-3-pressed: #4a4a4f;
	--color-background-3-active: #6d6d73;
	--color-background-4-default: #ffffff;
	--color-background-4-pressed: #f4f4f5;
	--color-background-4-active: #e9e9eb;
	--color-background-5-default: #f4f4f5;
	--color-background-5-pressed: #e9e9eb;
	--color-background-5-active: #d6d6d9;
	--color-background-6-default: #e9e9eb;
	--color-background-6-pressed: #d6d6d9;
	--color-background-6-active: #b2b2b7;

	--color-text-1: #fafafa;
	--color-text-2: #b2b2b7;
	--color-text-3: #919196;
	--color-text-4: #0d0d0f;
	--color-text-5: #4a4a4f;
	--color-text-6: #6d6d73;

	--color-icon-1: #fafafa;
	--color-icon-2: #b2b2b7;
	--color-icon-3: #919196;
	--color-icon-4: #0d0d0f;
	--color-icon-5: #4a4a4f;
	--color-icon-6: #6d6d73;

	--color-interactive-1-default: #fafafa;
	--color-interactive-1-hover: #f4f4f5;
	--color-interactive-1-pressed: #e9e9eb;
	--color-interactive-1-active: #919196;
	--color-interactive-1-disabled: #6d6d73;
	--color-interactive-2-default: #919196;
	--color-interactive-2-hover: #b2b2b7;
	--color-interactive-2-pressed: #d6d6d9;
	--color-interactive-2-active: #e9e9eb;
	--color-interactive-2-disabled: #4a4a4f;
	--color-interactive-3-default: #0d0d0f;
	--color-interactive-3-hover: #1c1c1e;
	--color-interactive-3-pressed: #2c2c2f;
	--color-interactive-3-active: #4a4a4f;
	--color-interactive-3-disabled: #b2b2b7;

	--color-stroke-1: #ffffff1a;
	--color-stroke-2: #ffffff33;
	--color-stroke-3: #ffffff4d;
	--color-stroke-4: #0000000d;
	--color-stroke-5: #0000001a;
	--color-stroke-6: #00000033;
	--color-stroke-7: #2c2c2f;
	--color-stroke-8: #d6d6d9;

	--overlay-1: #0000004d;
	--overlay-2: #0000000d;
	--overlay-3: #ffffff4d;
	--overlay-4: #ffffff1a;

	--color-feedback-success-1-default: #4fd48a;
	--color-feedback-success-1-surface: #041a0e;
	--color-feedback-success-1-strong: #2ebf6f;
	--color-feedback-success-2-default: #12683a;
	--color-feedback-success-2-surface: #ecfff3;
	--color-feedback-success-2-strong: #1fa45c;
	--color-feedback-error-1-default: #ff6c6c;
	--color-feedback-error-1-surface: #2b0808;
	--color-feedback-error-1-strong: #f04444;
	--color-feedback-error-2-default: #b82b2b;
	--color-feedback-error-2-surface: #fff1f1;
	--color-feedback-error-2-strong: #d93636;
	--color-feedback-warning-1-default: #ffd233;
	--color-feedback-warning-1-surface: #1f1900;
	--color-feedback-warning-1-strong: #e6b800;
	--color-feedback-warning-2-default: #7f6500;
	--color-feedback-warning-2-surface: #fffceb;
	--color-feedback-warning-2-strong: #c79e00;
	--color-feedback-info-1-default: #69b1ff;
	--color-feedback-info-1-surface: #05162e;
	--color-feedback-info-1-strong: #2977cc;
	--color-feedback-info-2-default: #1762c2;
	--color-feedback-info-2-surface: #f0f7ff;
	--color-feedback-info-2-strong: #1f7ae6;
	--color-feedback-neutral-1-default: #fafafa;
	--color-feedback-neutral-1-surface: #1c1c1e;
	--color-feedback-neutral-1-strong: #000000;
	--color-feedback-neutral-2-default: #0d0d0f;
	--color-feedback-neutral-2-surface: #fafafa;
	--color-feedback-neutral-2-strong: #ffffff;

	--color-code-red: #ff6c6c;
	--color-code-orange: #ff8a3d;
	--color-code-green: #4fd48a;
	--color-code-cyan: #42d2ff;
	--color-code-purple: #9670ff;
	--color-code-gray: #a8adb7;
	--color-code-white: #ffffff;

	--font-l-regular: 400 16px/24px 'Haffer', system-ui, sans-serif;
	--font-l-bold: 500 16px/24px 'Haffer', system-ui, sans-serif;
	--font-m-regular: 400 14px/20px 'Haffer', system-ui, sans-serif;
	--font-m-bold: 500 14px/20px 'Haffer', system-ui, sans-serif;
	--font-s-regular: 400 12px/16px 'Haffer', system-ui, sans-serif;
	--font-s-bold: 500 12px/16px 'Haffer', system-ui, sans-serif;

	--font-label-s: 500 12px/8px 'Haffer', system-ui, sans-serif;
	--font-label-m: 500 14px/10px 'Haffer', system-ui, sans-serif;
	--font-label-l: 500 16px/11px 'Haffer', system-ui, sans-serif;

	--font-h1: 500 36px/50px 'Haffer', system-ui, sans-serif;
	--font-h2: 500 30px/36px 'Haffer', system-ui, sans-serif;
	--font-h3: 500 26px/32px 'Haffer', system-ui, sans-serif;
	--font-h4: 500 22px/28px 'Haffer', system-ui, sans-serif;
	--font-h5: 500 20px/26px 'Haffer', system-ui, sans-serif;
	--font-h6: 500 18px/24px 'Haffer', system-ui, sans-serif;

	--font-code-s: 400 12px/16px 'Fraktion Mono';
	--font-code-m: 400 14px/20px 'Fraktion Mono';
	--font-code-l: 400 16px/24px 'Fraktion Mono';
}

*, *:before, *:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

b, strong, th {
	font-weight: 550;
}

html {
	font: var(--font-m-regular);
	text-size-adjust: none; /* property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property. We don't want to automatically resize on mobile. */
	height: 100%;
	interpolate-size: allow-keywords;
	scrollbar-width: thin;
	scrollbar-color: var(--color-scrollbar) transparent;
	scroll-behavior: smooth;
}

html:has(dialog[open]) {
	/* When dialog is shown, show scrollbar to avoid page flicker if scrollbar would disappear */
	scrollbar-gutter: stable;

	body {
		overflow: hidden;
	}
}

body {
	background-color: var(--color-surface-1);
	color: var(--color-text-1);
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

::selection {
	background: var(--color-selection);
}

a {
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent; /* remove flash effect on safari/chrome */
}

a:not([class]),
button:not([class]) {
	color: var(--color-interactive-1-default);
}

a:not([class]):active,
button:not([class]):active {
	color: var(--color-interactive-1-pressed);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--color-focus);
}

ul {
	padding-left: 24px;
	list-style-type: square;
}

ol {
	padding-left: 24px;
}

th, td, tr {
	border: none;
}

img {
	vertical-align: text-bottom;
}

h1, h2, h3, h4, h5, h6 {
	scroll-margin-top: 110px;
	letter-spacing: 0.02em;
	font-feature-settings: 'liga' on, 'dlig' on;
}

h1 {
	font: var(--font-h1);
}

h2 {
	font: var(--font-h2);
}

h3 {
	font: var(--font-h3);
}

h4 {
	font: var(--font-h4);
}

h5 {
	font: var(--font-h5);
}

h6 {
	font: var(--font-h6);
}

hr {
	border: none;
	height: 1px;
}

.page-container {
	flex: 1 0 auto; /* take up all the space, keep footer at the bottom */
	padding: var(--top-bar-height) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

.content-container {
	max-width: var(--page-maximum-width);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
}

.content-container-maximum-width {
	max-width: var(--page-maximum-width);
	margin: 0 auto;
	padding: 0;
}

.content-container-narrow-centered {
	max-width: var(--page-narrow-width);
	margin: 0 auto;
	padding: 0 24px;
}

.page-heading {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	padding: 80px 0 80px 0;
}

footer {
	display: flex;
	flex-direction: column;
}

.footer-container-top {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 40px calc(24px + env(safe-area-inset-right, 0)) 40px calc(24px + env(safe-area-inset-left, 0));
	gap: 40px;
	align-items: center;
	max-width: var(--page-maximum-width);
	margin: 0 auto;
	width: 100%;
}

.footer-container-bottom {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	padding: 40px calc(24px + env(safe-area-inset-right, 0)) 40px calc(24px + env(safe-area-inset-left, 0));
	align-items: center;
	gap: 40px;
	max-width: var(--page-maximum-width);
	margin: 0 auto;
	width: 100%;
}

footer hr {
	background-color: var(--color-stroke-1);
}

.footer-link {
	text-decoration: none;
	font: var(--font-l-bold);
	color: var(--color-interactive-1-default);
}

.footer-link:active {
	color: var(--color-interactive-1-pressed);
}

.footer-link-legal-page {
	text-decoration: none;
	font: var(--font-s-bold);
	color: var(--color-interactive-2-default);
}

.footer-link-legal-page:active {
	color: var(--color-interactive-2-pressed);
}

.footer-button-icon span {
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: var(--color-interactive-1-default);
	mask-size: 24px 24px;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	display: flex;
}

.footer-button-icon:active span {
	background-color: var(--color-interactive-1-pressed);
}

.loading-animation-top {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10;
	background: transparent;
	overflow: hidden;
	height: 8px;
}

.loading-animation-top-bar {
	position: absolute;
	top: 0;
	left: -30%;
	width: 30%;
	height: 100%;
	background-color: var(--color-stroke-3);
	animation: loading-animation-top-slider 1.5s linear infinite;
}

@keyframes loading-animation-top-slider {
	from {
		left: -30%;
	}
	to {
		left: 100%;
	}
}

.profile-image-container {
	border-radius: 50%;
	color: var(--color-text-4);
	align-content: center;
	text-align: center;
	font-family: 'Haffer', system-ui, sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	flex-shrink: 0;
}

.profile-image {
	border-radius: 50%;
	width: 100%;
	height: 100%;
	display: flex;
}

.profile-image-container.small {
	width: 24px;
	height: 24px;
	font-size: 9px;
}

.profile-image-container.medium {
	width: 40px;
	height: 40px;
	font-size: 14px;
}

.profile-image-container.large {
	width: 48px;
	height: 48px;
	font-size: 17px;
}

.legal-page-container,
.legal-notices-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 120px 0;
	font: var(--font-m-regular);
}

.legal-page-container h3,
.legal-notices-container h3 {
	margin-bottom: 16px;
}

.legal-page-version {
	font: var(--font-s-bold);
	color: var(--color-text-2);
	text-align: center;
}

.legal-page-company-info {
	font: var(--font-s-regular);
	color: var(--color-text-3);
	text-align: center;
}

.legal-page-subheading-1 {
	font: var(--font-l-bold);
	color: var(--color-text-1);
}

.legal-page-subheading-2 {
	font: var(--font-m-bold);
	color: var(--color-text-1);
}

.legal-page-container section,
.legal-notices-container section {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.legal-page-container span {
	display: inline-block;
	width: 40px;
}

.legal-page-container hr,
.legal-notices-container hr {
	width: 100%;
	height: 1px;
	border: none;
	background-color: var(--color-stroke-7);
}

.legal-page-content,
.legal-notices-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--color-text-2);
}

.legal-page-content {
	margin-left: 40px;
}

.legal-page-table {
	border: 1px solid var(--color-stroke-7);
	border-radius: 8px;
	display: flex;
	overflow: hidden;
}

.legal-page-table th,
.legal-page-table td {
	border-right: 1px solid var(--color-stroke-7);
	border-bottom: 1px solid var(--color-stroke-7);
	padding: 8px;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.legal-page-table td {
	color: var(--color-text-2);
}

.legal-page-table th {
	width: 100px;
	background-color: var(--color-background-1-default);
}

.legal-page-table tr > *:last-child {
	border-right: none;
}

.legal-page-table tr:last-child > * {
	border-bottom: none;
}

.error-page-container {
	align-content: center;
	flex: 1 0 auto;
	height: 100svh;
	padding: 80px 0;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.error-page-container h6 {
	margin-bottom: 40px;
}

.error-code-container {
	width: 100vw;
	display: flex;
	justify-content: center;
	overflow: hidden;
	font: 500 116px/116px 'Haffer', system-ui, sans-serif;
	color: var(--color-text-3);
}

.error-text-container {
	max-width: 232px;
}

.faq-container {
	padding: 120px 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.faq-container h3 {
	text-align: center;
}

.faq-details-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.faq-details-container details {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.faq-details-container summary {
	font: var(--font-l-bold);
	display: flex;
	justify-content: space-between;
	cursor: pointer;
	gap: 24px;
}

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

.faq-details-container summary::after {
	content: '';
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	background: url('/static/icons/chevron-down.svg') center / contain no-repeat;
	filter: invert(1);
}

.faq-details-container details[open] summary::after {
	background: url('/static/icons/chevron-top.svg') center / contain no-repeat;
}

.faq-details-container p {
	color: var(--color-text-3);
}

@media screen and (min-width: 960px) {
	:root {
		--top-bar-height: 80px;

		--font-h1: 500 56px/60px 'Haffer', system-ui, sans-serif;
		--font-h2: 500 40px/44px 'Haffer', system-ui, sans-serif;
		--font-h3: 500 32px/36px 'Haffer', system-ui, sans-serif;
		--font-h4: 500 24px/28px 'Haffer', system-ui, sans-serif;
		--font-h5: 500 20px/26px 'Haffer', system-ui, sans-serif;
		--font-h6: 500 18px/24px 'Haffer', system-ui, sans-serif;
	}

	.content-container {
		padding: 0 40px;
	}

	.content-container-maximum-width {
		padding: 0 40px;
	}

	.content-container-narrow-centered {
		padding: 0;
	}

	.page-heading {
		padding: 120px 0 80px 0;
	}

	.footer-container-top {
		flex-direction: row;
		padding: 40px calc(40px + env(safe-area-inset-right, 0)) 40px calc(40px + env(safe-area-inset-left, 0));
	}

	.footer-container-bottom {
		flex-direction: row;
		padding: 20px calc(40px + env(safe-area-inset-right, 0)) 20px calc(40px + env(safe-area-inset-left, 0));
	}

	.error-page-container {
		height: 100%;
	}

	.legal-page-table th {
		width: 200px;
	}

	.error-code-container {
		width: calc(100vw - 80px);
	}
}