/* ==========================================================================
 * App Shell — home/hero/panels/foot toolbar/snap scaffolding
 * ========================================================================== */
.-body {
	top: 0;
	left: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	user-select: none;
	overflow: hidden;
	position: absolute;
	isolation: isolate;
	flex-flow: column;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	color: var(--app-color);
	font-family: var(--app-font);
	background: var(--app-theme);
	-webkit-tap-highlight-color: #0000;
}

.-home {
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	position: relative;
	flex-flow: column;
}

.-home-above {
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	overflow: hidden;
	position: absolute;
	pointer-events: none;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
}

.---horizontal-scroll {
	overflow: auto hidden;
}

.-left-panel-overlay,
.-right-panel-overlay {
	height: 100%;
	display: flex;
	flex: 0 0 87.5vw;
	pointer-events: none;
	scroll-snap-stop: always;
	scroll-snap-align: center;
}

.-center-panel-parent {
	width: 100%;
	height: 100%;
	display: flex;
	flex: 0 0 100vw;
	position: relative;
	overflow: visible;
	pointer-events: none;
	scroll-snap-stop: always;
	scroll-snap-align: center;
}

.-center-panel-parent::before,
.-center-panel-parent::after {
	top: auto;
	opacity: 0;
	content: "";
	z-index: 40;
	height: 9.375vw;
	min-width: 2.5vw;
	position: absolute;
	align-self: center;
	pointer-events: auto;
	border-radius: 6.25vw;
	transition: opacity 0.3s;
	background: var(--app-accent);
}

.-home-above.---horizontal-scroll .-center-panel-parent::before,
.-home-above.---horizontal-scroll .-center-panel-parent::after {
	opacity: 1;
}

.-center-panel-parent::before {
	left: -1.25vw;
	box-shadow: -0.3125vw -0.3125vw 0.9375vw #00000055;
}

.-center-panel-parent::after {
	right: -1.25vw;
	box-shadow: 0.3125vw -0.3125vw 0.9375vw #00000055;
}

.-center-panel {
	width: 100vw;
	height: 100%;
	display: flex;
	flex: 0 0 100vw;
	position: relative;
	flex-flow: column;
	align-items: center;
	pointer-events: auto;
	overflow: hidden auto;
	scroll-snap-stop: always;
	scroll-snap-align: center;
	justify-content: flex-start;
	background: var(--app-theme);
	box-shadow: -0.3125vw -0.3125vw 0.9375vw rgb(0 0 0 / 60%), 0.3125vw 0.3125vw 0.9375vw rgb(0 0 0 / 60%);
	isolation: isolate;
}

.-hero {
	width: 100%;
	display: flex;
	overflow: hidden;
	position: absolute;
	transition: height 0.3s;
	height: var(--hero-height);
}

.-hero-above {
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: flex;
	overflow: auto hidden;
	position: absolute;
	pointer-events: none;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	overscroll-behavior-inline: contain;
}

.-hero-left-panel-overlay,
.-hero-right-panel-overlay {
	height: 100%;
	display: flex;
	flex: 0 0 87.5vw;
	pointer-events: none;
	scroll-snap-stop: always;
	scroll-snap-align: center;
}

.-foot-snap-left .-foot-snap-hold {
	padding: 0 0 0 3.125vw;
}

.-foot-snap-right .-foot-snap-hold {
	padding: 0 4.6875vw 0 0;
}

.-hero-center {
	width: 100vw;
	height: 100%;
	min-height: 0;
	display: flex;
	min-width: 100vw;
	flex: 0 0 100vw;
	isolation: isolate;
	position: relative;
	flex-flow: column;
	pointer-events: auto;
	overflow: hidden auto;
	scroll-behavior: smooth;
	scroll-snap-stop: always;
	scroll-snap-align: center;
	scroll-snap-type: y mandatory;
	background: var(--app-theme);
	box-shadow: -0.3125vw -0.3125vw 0.9375vw rgb(0 0 0 / 60%), 0.3125vw 0.3125vw 0.9375vw rgb(0 0 0 / 60%);
}

.-hero-below {
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	flex-flow: column;
	background: inherit;
}

.-hero-below-panels {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
}

.-hero-left-panel,
.-hero-right-panel {
	width: 87.5vw;
	height: 100%;
	display: flex;
	position: absolute;
	flex-flow: column;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s;
}

.-hero-left-panel {
	left: 0;
}

.-hero-right-panel {
	right: 0;
}

.-hero-left-panel-box,
.-hero-right-panel-box {
	flex: 1;
	min-height: 0;
	gap: 3.125vw;
	display: flex;
	position: relative;
	flex-flow: column;
	margin: 0 0 1.5625vw;
	padding: 0 0 1.5625vw;
	overflow: hidden auto;
}

.-hero-blog {
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
	flex: 0 0 100%;
	min-height: 100%;
	position: relative;
	overflow: hidden auto;
	scroll-behavior: smooth;
	scroll-snap-stop: always;
	scroll-snap-align: center;
	scroll-snap-type: y mandatory;
}

.-hero-tools {
	flex: 1;
	width: 100%;
	position: absolute;
	overflow: hidden auto;
	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
	min-height: -webkit-fill-available;
	overscroll-behavior-block: contain;
}

.---hero-full .-foot-toolbar {
	height: 0;
	opacity: 0;
	min-height: 0;
	display: flex;
	align-items: end;
	position: relative;
	max-height: 18.75vw;
	pointer-events: auto;
	overflow: auto hidden;
	scroll-behavior: smooth;
	width: -webkit-fill-available;
	scroll-snap-type: x mandatory;
	transition: min-height 0.3s, opacity 0.3s;
}

.-horizontal-divider {
	height: 0;
	z-index: 3;
	display: flex;
	position: absolute;
	overflow: visible;
	min-height: 0.625vw;
	align-items: center;
	margin: 0 4.6875vw;
	justify-content: center;
	width: -webkit-fill-available;
	transition: margin 0.3s, min-height 0.3s;
	background: linear-gradient(90deg,#0000,color-mix(in srgb,var(--app-accent) 55%,transparent),#0000);
}

.-foot {
	width: 100%;
	z-index: 100;
	display: flex;
	position: sticky;
	flex-flow: column;
	height: fit-content;
	pointer-events: none;
	justify-content: end;
	background: var(--app-theme);
}

.-foot-lever {
	opacity: 1;
	z-index: 10;
	bottom: 100%;
	display: flex;
	align-items: end;
	position: absolute;
	min-width: 9.375vw;
	aspect-ratio: 1/1;
	pointer-events: auto;
	justify-content: center;
	transition: opacity 0.3s;
	margin: auto calc((100% - 9.375vw)/2);
}

.-foot-lever::before {
	content: "";
	height: 1.25vw;
	position: relative;
	min-width: 6.875vw;
	margin: 50% 1.25vw;
	border-radius: 6.25vw;
	transition: margin 0.3s;
	background: var(--app-accent);
}

.-foot-toolbar {
	height: 0;
	opacity: 0;
	min-height: 0;
	display: flex;
	align-items: end;
	position: relative;
	max-height: 18.75vw;
	pointer-events: auto;
	overflow: auto hidden;
	scroll-behavior: smooth;
	width: -webkit-fill-available;
	scroll-snap-type: x mandatory;
	transition: min-height 0.3s, opacity 0.3s;
}

.-foot-snap-left,
.-foot-snap-right {
	height: 100%;
	display: flex;
	min-width: 12.5vw;
	position: relative;
}

.-foot-tool {
	height: 100%;
	min-width: 100%;
	display: flex;
	position: relative;
	align-items: center;
	padding: 0 3.125vw;
	scroll-snap-align: center;
}

.-foot-find {
	width: 100%;
	display: flex;
	height: 12.5vw;
	position: relative;
	text-align: center;
	align-items: center;
	font-size: 3.4375vw;
	letter-spacing: 0.09375vw;
	clip-path: var(--squircle);
	background: var(--dimmer);
	border: 0.9375vw solid #0000;
}

.-foot-plus {
	display: flex;
	min-width: 12.5vw;
	position: relative;
	border-radius: 50%;
	aspect-ratio: 1/1;
	align-items: center;
	justify-content: center;
	border: 0.9375vw solid #0000;
	transition: opacity 0.3s, margin 0.3s, width 0.3s, border 0.3s;
}

.-foot-plus .material-symbols-rounded {
	font-size: 6.875vw;
	transition: transform 0.18s cubic-bezier(.2,.9,.25,1.35);
}

.-foot-plus.---pressed .material-symbols-rounded {
	transform: scale(0.72) rotate(-8deg);
}

.-foot-menu {
	height: 100%;
	display: flex;
	font-size: 7.5vw;
	position: relative;
	min-height: 8.75vw;
	min-width: 10.625vw;
	align-items: center;
	aspect-ratio: 1/1;
	justify-content: center;
	margin: 0 0.9375vw 0 0;
	clip-path: var(--squircle);
	background: var(--surface);
	border: 0.9375vw solid #0000;
}

.-foot-menu .material-symbols-rounded {
	font-size: 8.75vw;
	text-shadow: none;
	color: var(--app-accent);
}

.-foot-more {
	right: 0;
	z-index: 2;
	height: auto;
	display: flex;
	min-width: 8.75vw;
	margin: 0.9375vw;
	position: absolute;
	aspect-ratio: 1/1;
	align-items: center;
	border-radius: 50%;
	justify-content: center;
	color: var(--app-accent);
	background: var(--dimmer);
	border: 1.25vw solid #0000;
}

.-foot-more .material-symbols-rounded {
	font-size: 5.625vw;
	padding: 0.625vw 0 0;
	transition: transform 0.3s;
}

.-foot-push {
	width: 100%;
	display: flex;
	position: relative;
	align-items: center;
	pointer-events: auto;
	margin: 0 0 2.1875vw;
	justify-content: center;
}

.-home-below {
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	flex-flow: column;
	background: inherit;
	isolation: isolate;
}

.-home-below-panels {
	width: 100%;
	display: flex;
	position: relative;
	flex-flow: column;
	height: -webkit-fill-available;
}

.-left-panel,
.-right-panel {
	height: 100%;
	width: 87.5vw;
	opacity: 0;
	display: flex;
	position: absolute;
	flex-flow: column;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s;
}

.-left-panel.---show-feed-panel,
.-right-panel.---show-feed-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.-left-panel {
	left: 0;
}

.-right-panel {
	right: 0;
}

.-left-panel-box,
.-right-panel-box {
	flex: 1;
	min-height: 0;
	gap: 3.125vw;
	display: flex;
	position: relative;
	flex-flow: column;
	overflow: hidden auto;
	padding: 0 0 4.6875vw;
}

.-panel-foot {
	z-index: 100;
	width: 87.5vw;
	display: flex;
	position: relative;
	flex-flow: column;
	height: fit-content;
}

.-special-toast {
	left: 50%;
	opacity: 0;
	top: 4.6875vw;
	z-index: 90000;
	color: #fff;
	display: flex;
	position: fixed;
	font-weight: 600;
	white-space: pre;
	min-height: 12.5vw;
	font-size: 4.0625vw;
	font-family: Delius;
	align-items: center;
	pointer-events: none;
	padding: 0 4.6875vw;
	min-width: fit-content;
	justify-content: center;
	letter-spacing: 0.15625vw;
	transform: translate(-50%, -6.25vw) scale(.92);
	text-shadow: 0.15625vw 0.15625vw 0.9375vw #00000080;
	transition: opacity .22s, transform .32s cubic-bezier(.2,.85,.2,1);
}

.-special-toast::before {
	content: "";
	z-index: -1;
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	border-radius: 9.375vw;
	box-shadow: 0 0.625vw 3.125vw #000000aa;
}

.-special-toast::after {
	content: "";
	z-index: -1;
	width: 100%;
	height: 100%;
	position: absolute;
	clip-path: var(--squircle);
	background: var(--special-toast-color);
}

.-special-toast.---show-special-toast {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
}

.-toast {
	left: 50%;
	bottom: 0;
	opacity: 0;
	z-index: 300;
	display: flex;
	position: fixed;
	color: #fff;
	height: 14.0625vw;
	white-space: pre;
	font-size: 4.0625vw;
	align-items: center;
	pointer-events: none;
	background: #2F2C29;
	padding: 0 4.6875vw;
	min-width: fit-content;
	clip-path: var(--squircle);
	transition: opacity 0.18s, transform 0.22s;
	transform: translate(-50%, 0) scale(0.80);
}

.-toast.---show-toast {
	opacity: 1;
	transform: translate(-50%, -18.75vw) scale(1);
}

@media (min-width: 431px) {
	.-body {
		width: 430px;
		left: 50%;
		transform: translateX(-50%);
	}
}

.-foot-note {
	margin: 0;
	z-index: 10;
	width: 100%;
	min-width: 0;
	display: flex;
	height: 12.5vw;
	align-self: end;
	position: relative;
	min-height: 12.5vw;
	flex-flow: column;
	align-items: center;
	clip-path: var(--squircle);
	background: var(--dimmer);
	transform: translate(0, -3.1254vw);
	transition: min-height 0.3s, min-width 0.3s;
}

.-foot-note-tool {
	margin: 0;
	min-width: 100%;
	display: flex;
	min-height: 12.5vw;
	position: relative;
	text-align: center;
	align-items: center;
	font-size: 3.4375vw;
	background: #0000;
	letter-spacing: 0.09375vw;
	scroll-snap-align: center;
	clip-path: var(--squircle);
	border: 0.9375vw solid #0000;
	transition: background 0.3s, min-height 0.3s, margin 0.3s, border 0.3s;
}

.-foot-note-sticker {
	height: 100%;
	display: flex;
	font-size: 7.5vw;
	position: relative;
	min-height: 8.75vw;
	min-width: 10.625vw;
	align-items: center;
	aspect-ratio: 1/1;
	justify-content: center;
	margin: 0 0.9375vw 0 0;
	clip-path: var(--squircle);
	background: var(--surface);
	border: 0.9375vw solid #0000;
	transition: border 0.3s, min-width 0.3s, margin 0.3s, opacity 0.3s;
}

.-foot-note-sticker .material-symbols-rounded {
	color: #ffd179;
	font-size: 7.5vw;
	text-shadow: 0.15625vw 0.15625vw 0.46875vw #000;
}

.-foot-note-area {
	z-index: 1;
	width: 100%;
	display: flex;
	min-height: 100%;
	position: relative;
	clip-path: var(--squircle);
	transition: background 0.3s;
	background: var(--surface);
}

.-foot-note-phantom {
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	color: #fff;
	display: flex;
	overflow: hidden;
	white-space: pre;
	position: absolute;
	align-items: center;
	font-size: 4.0625vw;
	pointer-events: none;
	font-family: Maiandra;
	letter-spacing: 0.09375vw;
	transition: padding 0.3s;
	padding: 0 10.9375vw 0 3.75vw;
	text-shadow: 0.15625vw 0.15625vw 0.46875vw #000;
}

.-foot-note-phantom:empty {
	opacity: 0;
}

.-foot-note-text {
	border: 0;
	outline: 0;
	display: flex;
	color: #fff;
	min-height: 100%;
	text-align: left;
	line-height: 5vw;
	font-size: 3.75vw;
	overflow: hidden;
	position: relative;
	align-items: center;
	font-family: "Nunito";
	word-break: break-word;
	white-space: pre-wrap;
	background: #00ff1624;
	clip-path: var(--squircle);
	width: -webkit-fill-available;
	padding: 0 10.9375vw 0 3.75vw;
	transition: padding 0.3s, opacity 0.3s, background 0.8s;
}

.-foot-note-text ul,
.-foot-note-text ol {
	margin: 1.5625vw 0;
	padding-inline-start: 5.625vw;
}

.-foot-note-text ul ul,
.-foot-note-text ul ol,
.-foot-note-text ol ul,
.-foot-note-text ol ol {
	margin: 0.78125vw 0;
	padding-inline-start: 4.6875vw;
}

.-foot-note-text ul.-editor-checklist {
	list-style: none;
	padding-inline-start: 0;
}

.-foot-note-text ul.-editor-checklist > li {
	position: relative;
	padding-inline-start: 5.625vw;
}

.-foot-note-text ul.-editor-checklist > li::before {
	left: 0;
	top: 0;
	content: "check_box_outline_blank";
	position: absolute;
	font-size: 4.6875vw;
	font-family: "Material Symbols Rounded";
	font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
}

.-foot-note::after {
	content: "";
	z-index: -1;
	width: 100%;
	height: 100%;
	position: absolute;
	backdrop-filter: unset;
	border-radius: 6.25vw;
	box-shadow: 0 0 0 #0000;
	transition: box-shadow 0.3s;
}

.-foot-note-cogs {
	opacity: 0;
	min-height: 0;
	display: flex;
	position: relative;
	margin: 0 3.125vw;
	align-items: center;
	pointer-events: none;
	width: -webkit-fill-available;
	justify-content: space-between;
	transition: min-height 0.3s, opacity 0.3s;
}

.-foot-note-cogs-hold {
	height: 100%;
	display: flex;
	gap: 1.5625vw;
	position: relative;
	align-items: center;
	min-width: fit-content;
	justify-content: center;
}

.-foot-note >:first-child .-foot-note-cogs-hold:nth-child(1) {
	min-width: 50%;
	justify-content: flex-start;
}

.-foot-note >:first-child .-foot-note-cogs-hold:nth-child(3) {
	min-width: 50%;
}

.-foot-note >:last-child .-foot-note-cogs-hold:nth-child(3) {
	width: -webkit-fill-available;
}

.-foot-note >:last-child .-foot-note-cogs-hold:nth-child(5) {
	min-width: 50%;
	justify-content: flex-end;
}

.-foot-note-count {
	display: flex;
	height: 9.375vw;
	position: relative;
	margin: 0 3.125vw;
	align-items: center;
	font-size: 3.4375vw;
	padding: 0 3.125vw;
	font-family: "Delius";
	justify-content: center;
	transition: color 0.25s;
	width: -webkit-fill-available;
	background: rgb(0 0 0 / 20%);
	clip-path: var(--squircle-small);
}

.-foot-note-lever {
	z-index: 10;
	font-size: 5vw;
	display: flex;
	height: 9.375vw;
	color: #ff6b6b;
	position: relative;
	min-width: 9.375vw;
	aspect-ratio: 1/1;
	align-items: center;
	border-radius: 50%;
	pointer-events: auto;
	justify-content: center;
}

.-foot .-foot-lever {
	opacity: 0;
	pointer-events: none;
}

.---show-foot-toolbar .-foot-lever::before {
	margin: 0 1.25vw;
}

.---show-foot-toolbar .-foot-toolbar {
	opacity: 1;
	min-height: 18.75vw;
}

.-hero-snap-top,
.-hero-snap-bottom {
	display: flex;
	min-width: 100%;
	position: relative;
	align-items: center;
	min-height: 18.75vw;
	justify-content: center;
}

.-hero-explainer-title {
	color: #fff;
	font-size: 8.125vw;
	line-height: 9.0625vw;
	font-family: inherit;
	font-weight: 800;
	text-wrap: balance;
}

.-hero-explainer-body {
	color: #ffffffc7;
	font-size: 4.0625vw;
	line-height: 6.25vw;
	font-family: inherit;
}

.-hero-explainer-mark {
	width: 15.625vw;
	height: 1.25vw;
	border-radius: 6.25vw;
	background: var(--app-accent);
}

.-hero-explainer-coming {
	color: var(--app-accent);
	font-size: 7.5vw;
	line-height: 8.4375vw;
	font-family: inherit;
	font-weight: 800;
	padding-top: 3.125vw;
}

.-hero-center.---hero-static .-hero-snap-top,
.-hero-center.---hero-static .-hero-snap-bottom {
	display: none;
}

.-hero-center.---hero-static {
	scroll-snap-type: none;
	overflow: hidden;
}

.-hero-explainer-context {
	display: flex;
	gap: 3.125vw;
	align-items: center;
	flex-flow: row wrap;
}

.-foot-note-cogs .-vertical-divider {
	margin: 3.125vw 0;
}

.-foot-note-tool-rail {
	width: 100%;
	display: flex;
	overflow: hidden;
	position: relative;
	min-height: 12.5vw;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
}

.-foot-note-snap-left,
.-foot-note-snap-right {
	height: 100%;
	display: flex;
	min-width: 12.5vw;
	position: relative;
	align-items: center;
	justify-content: center;
}

.-foot-note-snap-hold {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
}

.---immersive-mode .-foot-note {
	min-height: calc(100vh - 9.375vw);
}

.---immersive-mode .-foot-note-text {
	max-height: calc(100vh - 40.625vw);
}

.---immersive-mode .-foot-plus {
	margin: 0;
}

.---immersive-mode .-foot-snap-left,
.---immersive-mode .-foot-snap-right {
	pointer-events: none;
}

.-foot-note-text[contenteditable="true"] {
	background: #0000;
	-webkit-user-select: text;
	caret-color: var(--app-accent);
}

.-foot-note-lever .material-symbols-rounded {
	width: 100%;
	height: 100%;
	display: flex;
	font-size: 5vw;
	color: #ff6b6b;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	text-shadow: 0.15625vw 0.15625vw 0.9375vw #00000080;
	transition: color 0.3s, transform 0.3s;
}

.-foot-note-lever.---collapse-content .material-symbols-rounded {
	color: #88d6ff;
	font-size: 7.5vw;
}

.-foot-note-snap-left .-foot-note-snap-hold {
	padding: 0 0 0 3.125vw;
}

.-foot-note-snap-right .-foot-note-snap-hold {
	padding: 0 3.125vw 0 0;
}

.-foot-note-text .---anchor-target-glissando {
	position: relative;
}

.-foot-note-text .---anchor-target-glissando::after {
	inset: 0;
	content: "";
	position: absolute;
	pointer-events: none;
	background: linear-gradient(90deg, #0000, rgb(136 214 255 / 22%), #0000);
	transform: translateX(-100%);
	animation: anchor-target-glissando 0.7s ease-out forwards;
}

/* HiverGo Cards */

.-hero-section {
	width: 100%;
	height: 100%;
	display: flex;
	min-height: 100%;
	position: relative;
	align-items: center;
	justify-content: center;
	scroll-snap-stop: always;
	scroll-snap-align: start;
}

.-left-panel-box.---ideas {
	gap: 3.125vw;
	padding: 3.125vw 0 9.375vw;
}

/* Soft Fellowship material canvas: large and small circles sit behind, never around, the UI. */

.-body::before {
	inset: 0;
	content: "";
	z-index: -1;
	position: absolute;
	pointer-events: none;
	background-image: var(--theme-background-image);
	background-repeat: no-repeat;
}

.-article-kicker {
	color: var(--app-accent);
	font-size: 3.125vw;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .3125vw;
	padding: 0 4.6875vw;
}