@font-face {
  font-family: "angeris";
  src: url(https://file.garden/Z5Do5O7JvxCrm3fo/fonts/RoyalInitialen.ttf);
  font-display: swap;
}
@font-face {
  font-family: "cursive";
  src: url(https://file.garden/Z5Do5O7JvxCrm3fo/fonts/virale.ttf);
  font-display: swap;
}
@font-face {
  font-family: "MS Gothic";
  src: url(https://file.garden/Z5Do5O7JvxCrm3fo/fonts/HinaMincho-Regular.ttf);
  font-display: swap;
}
@font-face {
  font-family: "spirit";
  src: url(https://file.garden/Z5Do5O7JvxCrm3fo/fonts/ROMANTIC.TTF);
  font-display: swap;
}
@font-face {
  font-family: "pixel";
  src: url(https://file.garden/Z5Do5O7JvxCrm3fo/fonts/FreePixel.ttf);
  font-display: swap;
}

:root {
	--blue: #29c5f6;
	--blue-mid: #00a8e8;
	--blue-deep: #07c;
	--blue-pale: #e0f7fa;
	--pink: #ff79c6;
	--pink-mid: #ff60bb;
	--pink-border: #ff3da8;
	--pink-glow: rgba(255, 61, 168, 0.28);
	--mint: #00ddb5;
	--mint-mid: #00c49c;
	--orange: #ff8533;
	--yellow: #ffd93d;
	--coral: #ff7070;
	--text: #2d3436;
	--text-soft: #636e72;
	--card-bg: rgba(255, 255, 255, 0.95);
	--card-border: 1px solid var(--orange);
	--card-radius: 8px;
	--card-padding: 8px;
	--card-shadow: 0 4px 12px rgba(255, 133, 51, 0.15), inset 0 0 4px rgba(255, 255, 255, 0.8);
	scroll-behavior: smooth
}

body {
	font-family: "pixel", "msgothic", sans-serif;
	font-size: 10px;
	color: var(--text);
	background-color: #f8edf3;
	background-image: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/winter.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: right;
	background-size: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	height: 100dvh;
	overflow: hidden
}

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

::selection {
	background: var(--pink-border);
	color: #fff
}

::-webkit-scrollbar {
	width: 12px;
	height: 12px
}

::-webkit-scrollbar-track {
	background: transparent;
	margin: 4px;
	border-radius: 8px
}

::-webkit-scrollbar-thumb {
	background-color: var(--pink);
	border: 4px solid transparent;
	background-clip: padding-box;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px var(--pink-border)
}

::-webkit-scrollbar-corner {
	background: transparent
}

.wrapper {
	width: 810px;
	max-width: 100%;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.97);
	padding: 5px;
	border: 2px solid var(--pink-border);
	border-radius: 8px;
	box-shadow: inset var(--pink-glow) 0 0 12px, 0 0 6px var(--pink), 0 8px 32px rgba(0, 153, 230, 0.32), 0 0 0 1px rgba(255, 61, 168, 0.1)
}

.wrapper2 {
	width: 100%;
	flex: 1;
	min-height: 0;
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/f2428f559e443de94f132c489b4d548f.jpg) center / cover no-repeat;
	padding: 5px 2px 10px 5px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 1px dashed var(--mint);
	border-radius: 4px;
	border: 2px solid var(--yellow);
	box-shadow: var(--orange) 0 0 0 1px, #fff 0 0 0 3px, rgba(0, 221, 181, 0.3) 0 0 10px;
	box-shadow: var(--blue-mid) 0 0 0 1px, #fff 0 0 0 2px, var(--orange) 0 -1px 3px 1px;
	overflow: hidden
}

.body-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 4px
}

.top-row,
.bottom-row {
	display: flex;
	gap: 6px;
	flex-shrink: 0
}

.top-row .left-top {
	flex: 1;
	min-width: 0
}

.top-row .right-top {
	width: 190px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 5px
}

.bottom-row .left-bottom {
	width: 190px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 5px
}

.bottom-row .right-bottom {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px
}

.about-layout {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 5px;
	border: var(--card-border);
	border-radius: var(--card-radius);
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/yellowpinkpolka.jpg) center / 200px repeat;
	box-shadow: var(--card-shadow);
	animation: fadeInUp .4s ease both
}

.al-top-row {
	display: grid;
	grid-template-columns: 155px 1fr;
	gap: 6px
}

.al-bottom-row {
	display: grid;
	grid-template-columns: 1fr 155px;
	gap: 6px
}

.al-stamps-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0
}

.al-right-col {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 155px;
	flex-shrink: 0
}

.al-food-box {
	display: flex;
	flex-direction: column;
	gap: 3px;
	background: var(--card-bg);
	border: 1px solid var(--orange);
	border-radius: var(--card-radius);
	padding: 5px;
	flex: 1;
	min-height: 0
}

.al-food-box .food-scroll {
	flex: 1;
	max-height: 125px;
	overflow-y: auto;
	border: 0;
	padding: 0;
	background: 0
}

.about-sidebar {
	display: flex;
	flex-direction: column;
	gap: 5px
}

.about-pfp-wrapper {
	width: 100%;
	height: 155px;
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	position: relative
}

.about-pfp-wrapper::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none
}

.about-pfp {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 89%;
	display: block;
	transition: transform .35s ease, filter .35s ease
}

.about-pfp-wrapper:hover .about-pfp {
	transform: scale(1.04);
	filter: brightness(1.06) saturate(1.1)
}

.about-status-box {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(255, 235, 249, .95)),
		repeating-linear-gradient(-45deg, rgba(255, 121, 198, .16) 0 6px, rgba(41, 197, 246, .13) 6px 12px);
	border: 1px solid var(--pink-border);
	border-radius: var(--card-radius);
	box-shadow: 0 0 0 1px #fff inset, 0 0 8px var(--pink-glow), var(--card-shadow);
	padding: 5px;
	font-size: 9px;
	color: var(--text-soft);
	line-height: 1.55;
	position: relative;
	overflow: hidden
}

.about-status-box::before,
.about-status-box::after {
	position: absolute;
	pointer-events: none;
	color: rgba(255, 61, 168, .5);
	text-shadow: 1px 1px 0 #fff
}

.about-status-box::before {
	content: '♡';
	top: 18px;
	right: 9px;
	font-size: 14px;
	animation: twinkle 1.6s ease-in-out infinite
}

.about-status-box::after {
	content: '☆';
	right: 23px;
	bottom: 24px;
	font-size: 11px;
	animation: celesteFloat 2.4s ease-in-out infinite alternate
}

.about-status-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	margin: -1px -1px 5px;
	padding: 2px 5px;
	color: #fff;
	background: linear-gradient(90deg, var(--pink), var(--blue), var(--mint));
	border: 1px solid #fff;
	border-radius: 5px;
	box-shadow: 0 1px 0 rgba(255, 61, 168, .22);
	font-size: 8px;
	text-shadow: 1px 1px 0 var(--pink-border)
}

.about-status-stars {
	white-space: nowrap;
	animation: blink 1.25s ease-in-out infinite
}

.about-status-line {
	position: relative;
	z-index: 1;
	margin: 0 0 5px;
	padding: 4px 5px;
	background: rgba(255, 255, 255, .74);
	border: 1px dashed rgba(255, 61, 168, .65);
	border-radius: 5px;
	color: var(--text);
	text-wrap: balance
}

.about-status-line b {
	color: var(--pink-border);
	text-shadow: 1px 1px 0 #fff
}

.about-status-ticker {
	position: relative;
	z-index: 1;
	height: 18px;
	margin-bottom: 5px;
	overflow: hidden;
	border: 1px solid rgba(41, 197, 246, .7);
	border-radius: 4px;
	background: repeating-linear-gradient(90deg, #fff 0 8px, #e9fbff 8px 16px);
	color: var(--blue-deep);
	white-space: nowrap
}

.about-status-ticker span {
	display: inline-block;
	min-width: 100%;
	padding: 2px 0;
	animation: statusTicker 9s linear infinite
}

.about-status-badges {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3px;
	margin-bottom: 5px
}

.about-status-badges span {
	min-width: 0;
	padding: 2px 1px;
	border: 1px solid var(--orange);
	border-radius: 3px;
	background: #fff7cf;
	color: var(--pink-border);
	text-align: center;
	font-size: 7px;
	box-shadow: inset 0 0 0 1px #fff;
	text-shadow: 1px 1px 0 #fff
}

.about-online {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 3px 5px;
	border: 1px solid rgba(0, 221, 181, .65);
	border-radius: 5px;
	background: rgba(255, 255, 255, .78);
	color: var(--mint-mid);
	font-weight: 700;
	white-space: nowrap;
	animation: blink 2s infinite
}

.about-online-dot {
	width: 7px;
	height: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
	background: var(--mint);
	box-shadow: 0 0 0 1px #fff, 0 0 7px var(--mint);
	animation: divPulse 1.2s ease-in-out infinite
}

.under-status-box {
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/df.jpg) center / cover no-repeat;
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: var(--card-padding);
	min-height: 80px
}

.video-box1 {
	background: url(https://i.pinimg.com/webp87/1200x/b7/13/94/b71394e6d1c2bf718ee8bd4aec839151.webp) center / cover no-repeat;
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: 6px;
	animation: fadeInUp .4s ease both
}

.video-box-inner1 {
	position: relative;
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	height: 225px
}

.video-box-inner1 video {
	width: 125%;
	height: 100%;
	object-fit: cover;
	display: block
}

.about-content {
	background-image: url("https://file.garden/Z5Do5O7JvxCrm3fo/about/feuille.jpg");
	background-repeat: repeat-y;
	background-size: 101% auto;
	background-position: center top;
	background-attachment: local;
	position: relative;
	transform: rotate(-0.6deg)
}

.about-sticker-pin {
	position: absolute;
	top: -50px;
	left: 130px;
	z-index: 9999;
	pointer-events: none
}

.about-sticker-pin img {
	width: 150px;
	height: auto;
	filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.1));
	transform: rotate(-25deg)
}

.about-sticker-pin1 {
	position: absolute;
	top: -50px;
	right: -20px;
	transform: rotate(4deg);
	z-index: 9999;
	pointer-events: none
}

.about-sticker-pin1 img {
	width: 130px;
	height: auto;
	filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.1));
	transform: rotate(-80deg)
}

.sticker-clover,
.stickers {
	position: absolute;
	pointer-events: none;
	filter: drop-shadow(2px 0 white) drop-shadow(-2px 0 white) drop-shadow(0 2px white) drop-shadow(0 -2px white)
}

.sticker-clover img {
	width: 120px
}

.stickers img {
	width: 60px
}

.sticker-etoile {
	top: 20px;
	left: -30px
}

.sticker-autocollants {
	top: 120px;
	left: 6px
}

.sticker-autocollants img {
	transform: rotate(10deg)
}

.sticker-cinna {
	top: 180px;
	left: 2px;
	transform: rotate(-20deg)
}

.sticker-cinna img {
	width: 60px
}

.sticker-seafairy {
	top: 250px;
	left: 3px
}

.sticker-seafairy img {
	width: 65px
}

.sticker-star {
	top: 230px;
	left: 5px
}

.sticker-star img {
	width: 30px;
	transform: rotate(-20deg)
}

.sticker-coeurcerise {
	top: 310px;
	left: -15px
}

.sticker-coeurcerise img {
	width: 100px;
	transform: rotate(-10deg)
}

.sticker-sticker {
	top: 375px;
	left: -20px
}

.sticker-sticker img {
	width: 100px;
	transform: rotate(15deg)
}

.sticker-coeurrose {
	top: 630px;
	left: -3px
}

.sticker-coeurrose img {
	width: 40px;
	transform: rotate(15deg)
}

.sticker-coeurbleu {
	top: 465px;
	left: 2px
}

.sticker-coeurbleu img {
	width: 60px
}

.sticker-chat {
	top: 515px;
	left: 0
}

.sticker-chat img {
	width: 70px
}

.sticker-wand {
	bottom: -170px;
	left: -18px
}

.sticker-wand img {
	width: 110px;
	transform: rotate(-20deg)
}

.sticker-monkifraise {
	bottom: -230px;
	left: -15px;
	z-index: 2
}

.sticker-monkifraise img {
	width: 90px;
	transform: rotate(10deg)
}

.sticker-lapincerise {
	bottom: -270px;
	left: 0;
	z-index: 1
}

.sticker-lapincerise img {
	width: 60px
}

.sticker-etoile1 {
	bottom: -330px;
	left: 0;
	z-index: 3
}

.sticker-etoile1 img {
	width: 60px;
	transform: rotate(5deg)
}

.sticker-megumi {
	bottom: -385px;
	left: -5px;
	z-index: 3
}

.sticker-megumi img {
	width: 70px;
	transform: rotate(-5deg)
}

.sticker-LUCK777 {
	bottom: -435px;
	left: 0;
	z-index: 3
}

.about-text {
	 position: relative;
  background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/feuille.jpg) top / 100%;
  background-color: #fffaf5;
  border: 1px solid #ffb7d2;
  border-radius: var(--card-radius);
  padding: 25px 10px 10px 68px;
  font-size: 17px;
  line-height: 23px;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.03), 0 6px 16px rgba(255, 61, 168, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  font-family: 'MS Gothic';
  font-style: oblique 90deg;
  transition: all .2s ease;
  overflow: scroll;
  max-height: 585px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .8), 2px 2px 0 rgba(0, 0, 0, .08);
}

.at-greeting {
	font-family: 'MSGothic';
	font-size: 1.6em;
	background: linear-gradient(135deg, #ff7ab5, #ff4d94);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	display: inline-block;
	margin-right: 6px;
	letter-spacing: 2px;
	text-shadow: none
}

.big-c {
	font-family: "angeris";
	color: #ff4d94;
	font-size: 60px;
	display: inline-block;
	transform: translateY(8px)
}

.at-tag {
	display: inline-block;
	background: #ffe0f0;
	border-radius: 2px;
	padding: 1px 5px;
	color: #9e1f5e;
	margin: 0 2px;
	letter-spacing: .3px
}

.at-tag:nth-of-type(7n+1) {
	background: #ddf3ff;
	color: #0a6a99
}

.at-tag:nth-of-type(7n+2) {
	background: #ffecd2;
	color: #a04d00
}

.at-tag:nth-of-type(7n+3) {
	background: #e8f5e2;
	color: #3a7a1e
}

.at-tag:nth-of-type(7n+4) {
	background: #f0e8ff;
	color: #6a31b5
}

.at-tag:nth-of-type(7n+5) {
	background: #ffe0f0;
	color: #9e1f5e
}

.at-tag:nth-of-type(7n+6) {
	background: #fff3cc;
	color: #8a6000
}

.at-tag:nth-of-type(7n) {
	background: #d6f5f0;
	color: #1a7a6a
}

.about-text b {
	color: var(--blue-deep)
}

.stamps-outer {
	display: flex;
	align-items: flex-end;
	position: relative;
	background: url(https://i.pinimg.com/736x/9e/3a/a7/9e3aa7ee02b8189a00523b14615001b9.jpg) center / 100px repeat;
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: var(--card-padding);
	overflow: hidden
}

.stamps-row {
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--card-radius);
	flex: 1;
	padding: 3px;
	max-height: 340px;
	overflow-y: auto
}

.stamps-col {
	display: grid;
	grid-template-columns: repeat(4, 60px);
	gap: 3px;
	margin-left: 60px;
	align-content: start
}

.stamps-row img {
	height: auto;
	width: 60px;
	transition: filter .2s
}

.stamps-row img:hover {
	filter: brightness(1.12) saturate(1.2)
}

.gjs-img {
	width: auto !important;
	height: 210px !important;
	display: block;
	position: absolute;
	bottom: 0;
	right: 285px;
	pointer-events: none;
	object-fit: contain;
	z-index: 10
}

.gts-img {
	width: auto !important;
	height: 208px !important;
	display: block;
	position: absolute;
	bottom: 0;
	left: 280px;
	pointer-events: none;
	object-fit: contain;
	z-index: 10
}

.lfm-now-box {
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: var(--card-padding);
	display: flex;
	flex-direction: column;
	gap: 4px
}

.lfm-label {
	font-size: 8px;
	color: var(--pink);
	letter-spacing: 2px
}

.lfm-cover-wrap {
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 3px;
	border: 1px solid var(--pink);
	background: var(--blue-pale);
	position: relative
}

.lfm-cover-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 3px;
	background: transparent;
	transition: background .3s;
	z-index: 2;
	pointer-events: none
}

.lfm-cover-wrap:hover::before {
	background: linear-gradient(135deg, rgba(255, 160, 212, .18) 0, rgba(91, 200, 245, .12) 100%)
}

.lfm-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease
}

.lfm-cover-wrap:hover .lfm-cover {
	transform: scale(1.05)
}

.lfm-track {
	font-size: 9px;
	color: var(--text);
	font-weight: bold;
	line-height: 1.4
}

.lfm-artist {
	font-size: 8px;
	color: var(--text-soft)
}

.lfm-date {
	font-size: 7px;
	color: var(--mint-mid)
}

.lfm-live-dot {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--mint);
	margin-right: 3px;
	animation: blink 1.2s ease-in-out infinite;
	vertical-align: middle
}

.food-scroll {
	display: flex;
	flex-direction: column;
	gap: 3px;
	max-height: 165px;
	overflow-y: auto;
	background: var(--card-bg);
	border: 1px solid var(--orange);
	border-radius: 3px;
	padding: 5px
}

.food-card {
	display: flex;
	align-items: center;
	gap: 5px;
	background: var(--card-bg);
	border: 1px solid var(--pink);
	border-radius: 3px;
	padding: 2px 4px;
	font-size: 9px;
	color: var(--text-soft);
	transition: background .18s, border-color .18s, transform .18s
}

.food-card:hover {
	background: var(--blue-pale);
	border-color: var(--blue);
	transform: translateY(-2px);
	cursor: zoom-in
}

.food-card img {
	width: 22px;
	height: 22px;
	object-fit: cover;
	border-radius: 2px;
	flex-shrink: 0
}

.drink-icon {
	width: 28px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid var(--blue);
	border-radius: 2px;
	background: linear-gradient(180deg, #fff, var(--blue-pale));
	color: var(--pink-border);
	font-size: 7px;
	text-align: center;
	text-shadow: 1px 1px 0 #fff
}

.section-divider {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0;
	border-top: 0
}

.section-divider::before,
.section-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--pink-border), transparent);
	opacity: .4
}

.section-divider-label {
	font-size: 8px;
	color: var(--pink-border);
	letter-spacing: 2px;
	background: #fff;
	padding: 0 6px;
	border: 1px dashed var(--pink);
	border-radius: 20px;
	white-space: normal;
	max-width: 100%;
	box-shadow: none;
	font-family: inherit
}

.a-box {
	width: 100%;
	height: 100px;
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/seventeen.gif) center / cover no-repeat;
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	transition: box-shadow .2s;
	animation: fadeInUp .4s ease both
}

.a-box:hover {
	box-shadow: 0 2px 16px rgba(255, 61, 168, 0.3), var(--card-shadow)
}

.fav-widget {
	border: var(--card-border);
	border-radius: var(--card-radius);
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/pinkpolka.jpg) center / 290px repeat;
	padding: 5px;
	box-shadow: var(--card-shadow);
	animation: fadeInUp .4s ease both
}

.fav-inner {
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow)
}

.dratini-box {
	width: 100%;
	height: 150px;
	border-radius: var(--card-radius);
	background: url(https://64.media.tumblr.com/2f7ae946cd02acdea03a92d63cfa594d/fba69074cb31e4e8-6f/s250x400/10716cbe1daa49c7c4ae4a5438bc9f18737fbf9d.gif) center / cover no-repeat;
	overflow: hidden
}

.lfm-box {
	background: url(https://i.pinimg.com/736x/73/03/7c/73037c4ec4a80790d706ec55a7c36592.jpg) center / cover no-repeat;
	border: 1px solid var(--orange);
	border-radius: var(--card-radius);
	padding: 5px;
	animation: fadeInUp .4s ease both
}

.lfm-stats-box {
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: var(--card-padding)
}

.lfm-stats-title {
	font-family: 'IM Fell English', serif;
	font-size: .9em;
	color: var(--blue-mid);
	text-align: center;
	margin-bottom: 5px;
	padding-bottom: 4px;
	border-bottom: 1px dashed var(--blue);
	background: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	box-shadow: none;
	display: block;
	letter-spacing: normal
}

.lfm-period {
	font-size: .65em;
	color: var(--text-soft);
	letter-spacing: 1px
}

.lfm-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px
}

.lfm-list li {
	font-size: 9px;
	color: var(--text-soft);
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px;
	border-bottom: 1px dashed var(--blue);
	line-height: 1.5;
	flex-wrap: wrap;
	border-radius: 2px;
	transition: background .15s
}

.lfm-list li:hover {
	background: var(--blue-pale)
}

.lfm-list li:last-child {
	border-bottom: 0
}

.lfm-placeholder {
	opacity: .5;
	font-style: italic
}

.lfm-tags-title {
	width: 100%;
	height: 180px;
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/chiitruesound.jpg) center / cover no-repeat;
	border: var(--card-border);
	border-radius: 2px;
	box-shadow: var(--card-shadow);
	overflow: hidden;
	margin-top: 5px;
	transition: box-shadow .2s;
	animation: fadeInUp .4s ease both
}

.lfm-ticker {
	position: relative;
	z-index: 1;
	height: 90px;
	margin-bottom: 5px;
	overflow: hidden;
	border: 1px solid rgba(41, 197, 246, .7);
	border-radius: 4px;
	background: url(https://64.media.tumblr.com/545b8cd61fffb9efb3041253d27f4578/0683242010ab4c79-d9/s400x600/eabdef8e6bd32b0a17a3a38693d15b505cfb4703.gif) center / cover no-repeat;
	color: var(--blue-deep);
	white-space: nowrap
}

.rand-img-box {
	display: flex;
	gap: 4px;
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	background: var(--card-bg);
	animation: fadeInUp .4s ease both
}

#rand-img-1 {
	background: url('https://file.garden/Z5Do5O7JvxCrm3fo/about/seminhyuk') center / cover;
	min-height: 180px
}

#rand-img-3 {
	background: url('https://file.garden/Z5Do5O7JvxCrm3fo/about/n%26mibuprofen.jpg') center / cover;
	min-height: 90px
}

#rand-img-2 {
	background: url('https://file.garden/Z5Do5O7JvxCrm3fo/about/header.jpg') center / cover;
	min-height: 85px
}

.pixel-divider {
	display: flex;
	justify-content: center;
	gap: 3px;
	margin: 2px 0
}

.pixel-divider span {
	font-size: 9px;
	animation: divPulse 2s ease-in-out infinite
}

.pixel-divider span:nth-child(1) {
	color: var(--pink);
	animation-delay: 0
}

.pixel-divider span:nth-child(2) {
	color: var(--blue);
	animation-delay: .2s
}

.pixel-divider span:nth-child(3) {
	color: var(--mint);
	animation-delay: .4s
}

.pixel-divider span:nth-child(4) {
	color: var(--orange);
	animation-delay: .6s
}

.pixel-divider span:nth-child(5) {
	color: var(--pink);
	animation-delay: .8s
}

.pixel-divider span:nth-child(6) {
	color: var(--blue);
	animation-delay: 1s
}

.pixel-divider span:nth-child(7) {
	color: var(--mint);
	animation-delay: 1.2s
}

.pixel-divider span:nth-child(8) {
	color: var(--orange);
	animation-delay: 1.4s
}

.pixel-divider span:nth-child(9) {
	color: var(--pink);
	animation-delay: 1.6s
}

.quiz-gallery-box {
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--card-radius);
	padding: 6px;
	max-height: 330px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: fadeInUp .4s ease both
}

.quiz-scroll {
	overflow-y: auto;
	flex: 1;
	min-height: 0
}

.quiz-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	margin-top: 5px
}

.quiz-card {
	display: block;
	border: 1px dashed var(--pink);
	border-radius: 3px;
	overflow: hidden;
	background: var(--blue-pale);
	cursor: pointer;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease
}

.quiz-card img {
	width: 100%;
	height: auto;
	display: block;
	transition: filter .2s
}

.quiz-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 61, 168, 0.2)
}

.quiz-card:focus-visible {
	outline: 2px solid var(--blue-mid);
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 4px 12px rgba(255, 61, 168, 0.2)
}

.quiz-card:hover img {
	filter: brightness(1.08) saturate(1.1)
}

.coded-grid {
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/fond1.jpg) center / cover no-repeat;
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: var(--card-padding);
	height: 455px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	animation: fadeInUp .4s ease both
}

.coded-grid .wide {
	position: sticky;
	top: 0;
	z-index: 10;
	width: fit-content;
	max-width: 80%;
	margin: 0 auto 6px;
	padding: 2px 16px 3px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(4px);
	border: 1px solid var(--mint);
	border-radius: 20px;
	box-shadow: var(--mint) inset 0 0 4px, 0 2px 8px rgba(0, 212, 170, .28);
	text-align: center;
	font-size: .78em;
	color: var(--mint-mid);
	letter-spacing: 2px;
	flex-shrink: 0
}

.masonry-scroll {
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1;
	min-height: 0
}

.coded-grid img,
.coded-grid video {
	width: 100%;
	display: block;
	margin-top: 4px;
	break-inside: avoid;
	border-radius: 3px;
	filter: saturate(115%) brightness(1.06);
	transition: transform .22s ease, filter .22s ease, box-shadow .22s ease
}

.coded-grid img:hover,
.coded-grid video:hover {
	position: relative;
	z-index: 5;
	transform: scale(1.03);
	filter: saturate(130%) brightness(1.1);
	box-shadow: 0 4px 14px rgba(255, 61, 168, 0.25)
}

.masonry-scroll img,
.masonry-scroll video {
	position: absolute;
	margin-top: 0
}

.masonry-scroll img:hover,
.masonry-scroll video:hover {
	position: absolute;
	z-index: 5;
	transform: scale(1.03);
	filter: saturate(130%) brightness(1.1);
	box-shadow: 0 4px 14px rgba(255, 61, 168, 0.25)
}

.currently-box {
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/mintpolka.jpg) center/100px repeat;
	border: 1px solid var(--mint);
	border-radius: var(--card-radius);
	box-shadow: 0 1px 8px rgba(0, 212, 170, .18), inset 0 0 8px rgba(0, 212, 170, .04);
	padding: 6px;
	animation: fadeInUp .4s ease both
}

.currently-list {
	display: flex;
	flex-direction: column;
	gap: 3px;
	background: var(--card-bg);
	border: 1px solid var(--mint);
	border-radius: var(--card-radius);
	padding: 6px;
	box-shadow: 0 1px 8px rgba(0, 212, 170, .12)
}

.curr-item {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	padding: 3px 2px;
	border-bottom: 1px dashed rgba(0, 212, 170, .25);
	transition: background .15s;
	border-radius: 2px
}

.curr-item:last-child {
	border-bottom: 0
}

.curr-item:hover {
	background: rgba(0, 212, 170, .06)
}

.curr-icon {
	font-size: 11px;
	flex-shrink: 0;
	line-height: 1.5
}

.curr-content {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0
}

.curr-label {
	font-size: 7px;
	color: var(--mint-mid);
	letter-spacing: 1.5px;
	text-transform: lowercase
}

.curr-val {
	font-size: 9px;
	color: var(--text);
	font-weight: bold;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-shrink: 0
}

.curr-val-scroll {
	display: flex;
	flex-direction: column;
	gap: 5px;
	max-height: 40px;
	overflow-y: auto;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--mint) transparent
}

.curr-val-scroll::-webkit-scrollbar {
	width: 4px
}

.curr-val-scroll::-webkit-scrollbar-track {
	background: transparent;
	margin: 2px
}

.curr-val-scroll::-webkit-scrollbar-thumb {
	background-color: var(--mint);
	border-radius: 10px
}

.reading-box {
	position: relative;
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/pinkpolka.jpg) center / 100px repeat;
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: 6px;
	animation: fadeInUp .4s ease both
}

.reading-box .sticker-favs {
	position: absolute;
	top: -14px;
	right: -10px;
	z-index: 5;
	pointer-events: none;
	filter: drop-shadow(1px 0 white) drop-shadow(-1px 0 white) drop-shadow(0 1px white) drop-shadow(0 -1px white)
}

.reading-box .sticker-favs img {
	width: 38px;
	transform: rotate(12deg);
	filter: drop-shadow(1px 2px 2px #0000001a)
}

.reading-flash {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: repeating-linear-gradient(-45deg, var(--pink-border) 0 7px, #ff6fc0 7px 14px);
	color: #fff;
	font-family: 'pixel', monospace;
	font-size: 9px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 5px 6px;
	border-radius: 3px;
	border: 1px solid var(--pink-border);
	box-shadow: 0 2px 6px rgba(255, 61, 168, .4);
	transform: rotate(-1.5deg);
	margin-bottom: 8px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .25)
}

.reading-flash-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	flex-shrink: 0;
	box-shadow: 0 0 4px #fff;
	animation: blink 1s ease-in-out infinite
}

.reading-content {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--card-radius);
	padding: 10px 6px 8px;
	box-shadow: var(--card-shadow)
}

.reading-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1
}

.reading-cover {
	width: 68px;
	border-radius: 3px;
	overflow: hidden;
	border: 2px solid #fff;
	outline: 1px solid var(--pink-border);
	box-shadow: 0 4px 10px rgba(255, 61, 168, .35);
	transform: rotate(-1.2deg);
	transition: transform .2s ease
}

.reading-item:nth-child(2) .reading-cover {
	transform: rotate(1.2deg)
}

.reading-content:hover .reading-cover {
	transform: rotate(0) scale(1.04)
}

.reading-cover img {
	display: block;
	width: 100%;
	height: auto
}

.reading-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center
}

.reading-title {
	font-size: 10px;
	font-weight: bold;
	color: var(--text);
	line-height: 1.25
}

.reading-author {
	font-size: 8px;
	color: var(--pink-border);
	letter-spacing: .5px
}

.video-box-inner {
	position: relative;
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	height: 267px
}

.video-box-inner video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 267px;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%) rotate(-90deg)
}

.bias-box {
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/pinkpolka.jpg) center / 100px repeat;
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: 6px;
	animation: fadeInUp .4s ease both
}

.bias-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
	max-height: 383px;
	overflow-y: auto;
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--card-radius);
	padding: 6px;
	box-shadow: var(--card-shadow)
}

.bias-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 5px;
	border: 1px dashed var(--pink);
	border-radius: 4px;
	transition: transform .2s, box-shadow .2s;
	background: #fff;
	text-align: center
}

.bias-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(255, 61, 168, 0.15)
}

.bias-photo-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid var(--pink);
	background: var(--blue-pale)
}

.bias-photo-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease
}

.bias-item:hover .bias-photo-wrap img {
	transform: scale(1.08)
}

.bias-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	width: 100%
}

.bias-name {
	font-size: 9px;
	font-weight: bold;
	color: var(--text);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.bias-group {
	font-size: 7px;
	color: var(--pink-border);
	letter-spacing: .3px;
	text-transform: lowercase
}

.see-more-link {
	display: block;
	text-align: center;
	margin-top: 8px;
	padding: 4px;
	font-size: 9px;
	font-family: 'DotGothic16', sans-serif;
	background-color: var(--blue-pale);
	color: var(--pink-border);
	text-decoration: none;
	border: 1px solid var(--pink-border);
	border-radius: 4px;
	transition: all .3s ease
}

.see-more-link:hover {
	background: var(--pink-border);
	color: #fff;
	cursor: pointer
}

.duo-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	align-items: start
}

.celeste-pc-box {
	background: url('https://file.garden/Z5Do5O7JvxCrm3fo/about/mintpolka.jpg') center / 100px repeat;
	border: 1px solid var(--mint);
	border-radius: var(--card-radius);
	padding: 8px;
	box-shadow: 0 1px 8px rgba(0, 212, 170, .18), inset 0 0 8px rgba(0, 212, 170, .04);
	position: relative;
	animation: fadeInUp .4s ease both;
	display: flex;
	flex-direction: column;
	gap: 6px
}

.pc-tape {
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(-2deg);
	width: 50px;
	height: 12px;
	background: rgba(0, 221, 181, 0.3);
	border: 1px dashed rgba(0, 221, 181, 0.6);
	border-radius: 2px;
	z-index: 5
}

.pc-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px dashed var(--mint-mid);
	padding-bottom: 4px
}

.pc-title {
	font-family: 'DotGothic16', 'MS PGothic', monospace;
	color: var(--mint-mid);
	font-size: 10px;
	letter-spacing: 1px
}

.pc-tag {
	background: var(--mint-mid);
	color: #fff;
	font-size: 7px;
	padding: 2px 6px;
	border-radius: 10px;
	letter-spacing: .5px
}

.pc-toploader {
	display: flex;
	gap: 6px;
	background: var(--card-bg);
	border: 1px solid var(--mint-mid);
	border-radius: 5px;
	padding: 6px;
	box-shadow: 0 2px 6px rgba(0, 212, 170, 0.1)
}

.pc-img-wrapper {
	flex-shrink: 0;
	width: 70px;
	height: 90px;
	padding: 3px;
	background: #fff;
	border: 1px solid #e0d0d8;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.04);
	transform: rotate(-2deg);
	transition: transform .2s ease
}

.pc-img-wrapper:hover {
	transform: rotate(0) scale(1.05)
}

.pc-img-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.pc-info {
	display: flex;
	flex-direction: column;
	gap: 4px
}

.pc-subtitle {
	font-family: 'IM Fell English', serif;
	font-size: 11px;
	color: var(--mint-mid);
	border-bottom: 1px solid rgba(0, 212, 170, 0.2);
	padding-bottom: 2px
}

.pc-info p {
	font-size: 8px;
	color: var(--text-soft);
	line-height: 1.6
}

.pc-mini-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px
}

.pc-mini-gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 3px;
	border: 1px solid var(--mint-mid);
	transition: transform .2s ease, filter .2s ease
}

.pc-mini-gallery img:hover {
	transform: translateY(-2px) scale(1.05);
	filter: brightness(1.1);
	box-shadow: 0 4px 8px rgba(0, 212, 170, 0.2)
}

.duo-left-col {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.bf-journal-box {
	background: url('https://file.garden/Z5Do5O7JvxCrm3fo/about/pinkpolka.jpg') center / 100px repeat;
	border: 1px solid var(--pink);
	border-radius: var(--card-radius);
	padding: 8px;
	box-shadow: 0 1px 8px rgba(255, 61, 168, .15), inset 0 0 8px rgba(255, 61, 168, .04);
	position: relative;
	animation: fadeInUp .4s ease both;
	display: flex;
	flex-direction: column;
	gap: 6px
}

.journal-clip {
	position: absolute;
	top: -6px;
	right: 15px;
	width: 12px;
	height: 20px;
	background: linear-gradient(135deg, #e6e6e6, #fff, #ccc);
	border: 1px solid #aaa;
	border-radius: 10px;
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
	z-index: 5
}

.journal-paper {
	background: var(--card-bg);
	border: 1px dashed var(--pink-border);
	border-radius: 4px;
	padding: 8px;
	box-shadow: 2px 2px 0 rgba(255, 61, 168, 0.1)
}

.journal-dear {
	font-family: 'IM Fell English', serif;
	font-size: 12px;
	color: var(--pink-border);
	margin-bottom: 4px;
	font-style: italic
}

.journal-paper p {
	font-size: 8px;
	color: var(--text-soft);
	line-height: 1.5;
	margin-bottom: 6px
}

.journal-anni {
	display: inline-block;
	background: var(--blue-pale);
	border: 1px solid var(--blue);
	color: var(--blue-deep);
	font-family: 'DotGothic16', 'MS PGothic', monospace;
	font-size: 8px;
	padding: 3px 8px;
	border-radius: 20px;
	letter-spacing: .5px
}

.journal-mosaic-wrap {
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 61, 168, 0.3);
	border-radius: 4px;
	padding: 4px
}

.bf-mosaic {
	position: relative;
	padding: 2px;
	max-height: 160px;
	overflow-y: auto;
	scrollbar-width: none
}

.bf-mosaic-img {
	background: #fff;
	border: 1px solid #f0d8e5;
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(26, 26, 46, .05);
	display: block;
	padding: 4px 4px 10px;
	transition: transform .24s ease, filter .24s ease, box-shadow .24s ease;
	width: 100%;
	margin-top: 4px
}

.bf-mosaic-img:nth-child(3n+1) {
	transform: rotate(-1.5deg)
}

.bf-mosaic-img:nth-child(3n+2) {
	transform: rotate(1.2deg)
}

.bf-mosaic-img:nth-child(3n) {
	transform: rotate(0.5deg)
}

.bf-mosaic-img:hover {
	transform: rotate(0) scale(1.04);
	box-shadow: 0 4px 12px rgba(255, 61, 168, 0.2);
	z-index: 5;
	position: relative
}

.literallyme-box {
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/brpolka.jpg) center / 90px repeat;
	border: 1px solid var(--blue);
	border-radius: var(--card-radius);
	box-shadow: 0 1px 8px rgba(91, 200, 245, .2), inset 0 0 8px rgba(91, 200, 245, .04);
	padding: 6px;
	animation: fadeInUp .4s ease both;
	position: relative
}

.lm-grid {
	display: flex;
	flex-direction: row;
	gap: 5px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
	scroll-snap-type: x mandatory
}

.lm-card {
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	transition: transform .2s ease, box-shadow .2s ease;
	flex-shrink: 0;
	width: 90px;
	scroll-snap-align: start
}

.lm-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 61, 168, 0.22)
}

.lm-img-wrap {
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 3px;
	border: 1px solid var(--pink);
	background: var(--blue-pale)
}

.lm-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease
}

.lm-card:hover .lm-img-wrap img {
	transform: scale(1.06)
}

.lm-name {
	font-size: 8px;
	font-weight: bold;
	color: var(--text);
	text-align: center;
	line-height: 1.3
}

.lm-source {
	font-size: 7px;
	color: var(--text-soft);
	font-style: italic;
	text-align: center
}

.moe-music-box {
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/mintpolka.jpg) center / 80px repeat;
	border: var(--card-border);
	border-color: var(--orange);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: 6px;
	animation: fadeInUp .4s ease both;
	max-height: 548px;
	display: flex;
	flex-direction: column;
	overflow: hidden
}

.mmb-body {
	display: grid;
	grid-template-columns: 1fr 145px;
	gap: 5px;
	flex: 1;
	min-height: 0
}

.mmb-col-label {
	font-size: 7px;
	letter-spacing: 2px;
	color: var(--pink-border);
	background: rgba(255, 255, 255, 0.9);
	border-left: 3px solid var(--pink-border);
	padding: 2px 6px;
	margin-bottom: 5px;
	border-radius: 0 3px 3px 0;
	flex-shrink: 0
}

.mmb-left,
.mmb-right {
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: 5px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden
}

.mmb-albums-grid {
	display: grid;
	grid-template-columns: repeat(4, 90px);
	gap: 5px;
	justify-content: center;
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1;
	align-content: start
}

.mmb-album {
	width: 90px;
	height: 90px;
	position: relative;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid var(--pink);
	box-shadow: 0 1px 4px rgba(255, 61, 168, .12);
	cursor: default;
	transition: transform .18s ease, box-shadow .18s ease
}

.mmb-album img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.mmb-album:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 5px 14px rgba(255, 61, 168, .28);
	z-index: 2
}

.mmb-album-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(255, 61, 168, .88));
	color: #fff;
	font-size: 6px;
	line-height: 1.4;
	padding: 10px 3px 3px;
	text-align: center;
	opacity: 0;
	transform: translateY(3px);
	transition: opacity .18s ease, transform .18s ease
}

.mmb-album:hover .mmb-album-label {
	opacity: 1;
	transform: translateY(0)
}

.mmb-tabs {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
	min-height: 0;
	overflow: hidden
}

.mmb-tab-labels {
	display: flex;
	gap: 2px;
	background: var(--card-bg);
	border: 1px solid var(--pink);
	border-radius: var(--card-radius);
	padding: 3px;
	flex-shrink: 0
}

.mmb-tab-btn {
	flex: 1;
	text-align: center;
	font-size: 8px;
	letter-spacing: 1px;
	text-transform: lowercase;
	padding: 4px 2px;
	border-radius: 3px;
	background: transparent;
	color: var(--text-soft);
	cursor: pointer;
	transition: background .2s, color .2s, box-shadow .2s;
	font-family: 'DotGothic16', monospace;
	border: 0;
	outline: 0
}

.mmb-tab-btn:hover {
	background: var(--blue-pale);
	color: var(--text)
}

.mmb-tab-btn.active {
	background: var(--pink-border);
	color: #fff;
	box-shadow: 0 0 6px var(--pink-glow)
}

.mmb-tab-panel {
	display: none;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--card-radius);
	padding: 5px;
	box-shadow: var(--card-shadow)
}

.mmb-tab-panel.active {
	display: flex;
	flex-direction: column
}

.mmb-tab-panel .mmb-favs-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden
}

.mmb-fav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 5px;
	border-bottom: 1px dashed var(--pink)
}

.mmb-fav:last-child {
	border-bottom: 0;
	padding-bottom: 0
}

.mmb-fav-cover {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid var(--pink);
	flex-shrink: 0
}

.mmb-fav-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.mmb-fav-info {
	display: flex;
	flex-direction: column;
	gap: 2px
}

.mmb-fav-title {
	font-size: 8px;
	font-weight: bold;
	color: var(--text);
	line-height: 1.3
}

.mmb-fav-artist {
	font-size: 7.5px;
	color: var(--pink-border);
	letter-spacing: .3px
}

.mmb-fav-note {
	font-size: 7px;
	color: var(--text-soft);
	font-style: italic;
	line-height: 1.4
}

.taste-section {
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	animation: fadeInUp .4s ease both
}

.taste-header {
	background: linear-gradient(120deg, var(--pink-mid), var(--pink-border));
	padding: 7px 10px;
	display: flex;
	align-items: center;
	gap: 6px
}

.taste-header img {
	width: 18px;
	height: 18px
}

.taste-header-text {
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .5px
}

.taste-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 8px
}

@media(max-width:480px) {
	.taste-body {
		grid-template-columns: 1fr
	}
}

.taste-block {
	background: #fff;
	border: 1px solid var(--pink);
	border-radius: 4px;
	padding: 6px 7px
}

.taste-block1 {
	background: url(https://file.garden/Z5Do5O7JvxCrm3fo/about/JUNHYUK) center / 100% repeat;
	border: 1px solid var(--pink);
	border-radius: 4px;
	padding: 6px 7px
}

.taste-block-title {
	font-size: 8px;
	letter-spacing: 1.5px;
	color: var(--pink-border);
	text-transform: lowercase;
	border-bottom: 1px dashed var(--pink);
	padding-bottom: 4px;
	margin-bottom: 5px
}

.taste-id-row {
	font-size: 9px;
	color: var(--text);
	line-height: 1.9
}

.taste-id-label {
	background: var(--pink-glow);
	color: var(--pink-border);
	font-weight: bold;
	font-size: 7.5px;
	padding: 1px 5px;
	border-radius: 3px;
	margin-right: 5px;
	display: inline-block;
	text-transform: lowercase
}

.taste-cover-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px
}

.taste-cover {
	aspect-ratio: 2 / 3;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid var(--pink);
	background: var(--blue-pale)
}

.taste-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.taste-interests {
	grid-column: 1 / -1;
	background: #fff;
	border: 1px solid var(--pink);
	border-radius: 4px;
	padding: 6px 7px
}

.taste-interests-title {
	font-size: 8px;
	letter-spacing: 1.5px;
	color: var(--pink-border);
	text-transform: lowercase;
	border-bottom: 1px dashed var(--pink);
	padding-bottom: 4px;
	margin-bottom: 5px
}

.taste-interests p {
	font-size: 9px;
	color: var(--text-soft);
	line-height: 1.7
}

.taste-interests b {
	color: var(--text)
}

.sticker-mio,
.sticker-aya,
.sticker-celeste,
.sticker-mew,
.sticker-trefle {
	position: absolute;
	z-index: 9999;
	pointer-events: none;
	filter: drop-shadow(2px 0 white) drop-shadow(-2px 0 white) drop-shadow(0 2px white) drop-shadow(0 -2px white)
}

.sticker-mio img,
.sticker-aya img,
.sticker-celeste img,
.sticker-mew img,
.sticker-trefle img {
	height: auto;
	filter: drop-shadow(1px 2px 2px #0000001a)
}

.sticker-mio {
	top: 110px;
	left: -80px
}

.sticker-mio img {
	width: 150px;
	transform: rotate(-15deg)
}

.sticker-aya {
	top: 335px;
	right: -10px
}

.sticker-aya img {
	width: 100px;
	transform: rotate(10deg)
}

.sticker-celeste {
	top: -20px;
	right: -20px
}

.sticker-celeste img {
	width: 85px;
	transform: rotate(12deg)
}

.sticker-mew {
	top: 80px;
	left: 215px
}

.sticker-mew img {
	width: 95px;
	transform: rotate(-2deg)
}

.sticker-trefle {
	top: -600px;
	right: -591px;
	transform: rotate(-80deg);
	filter: drop-shadow(1px 0 white) drop-shadow(-1px 0 white) drop-shadow(0 1px white) drop-shadow(0 -1px white)
}

.sticker-trefle img {
	width: 70px;
	transform: rotate(10deg)
}

.c-box {
	width: 100%;
	height: 115px;
	background: url(https://64.media.tumblr.com/fe988dd91096a3c1ba82dfcfac1ffb43/ab4479d2ca86585f-27/s400x600/ad553010b1eb86dd7c107ead3e680c63c0f2ae35.gif) center / contain no-repeat;
	border: var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	transition: box-shadow .2s;
	animation: fadeInUp .4s ease both
}

.c-box:hover {
	box-shadow: 0 2px 16px rgba(91, 200, 245, 0.35), var(--card-shadow)
}

.spark {
	position: fixed;
	pointer-events: none;
	z-index: 9999;
	animation: sparkFade .7s ease-out forwards
}

.lfm-item-cover {
	width: 18px;
	height: 18px;
	object-fit: cover;
	border-radius: 2px;
	flex-shrink: 0;
	border: 1px solid var(--pink)
}

.lfm-rank {
	color: var(--pink);
	font-size: 8px;
	flex-shrink: 0;
	width: 10px;
	text-align: right
}

.lfm-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.lfm-now-badge {
	color: var(--pink);
	font-size: 8px;
	flex-shrink: 0;
	animation: blink 1.5s ease-in-out infinite
}

.lfm-plays {
	font-size: 7px;
	color: var(--mint-mid);
	flex-shrink: 0;
	margin-left: auto
}

.lfm-bar-wrap {
	width: 100%;
	height: 2px;
	background: var(--blue-pale);
	border-radius: 2px;
	margin-top: 2px
}

.lfm-bar {
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--pink), var(--blue));
	transition: width .6s ease
}

.lastfm-track-link {
	color: var(--text);
	text-decoration: none;
	font-weight: bold
}

.lastfm-track-link:hover {
	color: var(--pink-border);
	text-decoration: underline
}

.stamp-wiggle {
	animation: stampWiggle .5s ease-in-out
}

#loading-screen {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .6s ease, transform .6s ease
}

#loading-screen.ls-hide {
	opacity: 0;
	transform: scale(1.04);
	pointer-events: none
}

.ls-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: 32px 40px;
	min-width: 220px
}

.ls-bar-wrap {
	width: 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px
}

.ls-bar-track {
	width: 100%;
	height: 6px;
	background: var(--blue-pale);
	border: 1px solid var(--pink);
	border-radius: 10px;
	overflow: hidden
}

.ls-bar-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--pink) 0, var(--blue) 100%);
	border-radius: 10px;
	transition: width .4s ease;
	box-shadow: 0 0 6px var(--pink)
}

.ls-bar-label {
	font-family: 'freepixel', 'msgothic', monospace;
	font-size: 8px;
	color: var(--text-soft);
	letter-spacing: 1px;
	min-height: 12px
}

.ls-tip {
	margin: 2px 0 0;
	max-width: 220px;
	font-family: 'freepixel', 'msgothic', monospace;
	font-size: 7px;
	line-height: 1.5;
	letter-spacing: .5px;
	color: var(--text-soft);
	opacity: .75;
	text-align: center
}

.ls-ascii {
	margin: 0 0 4px;
	width: 64px;
	height: auto;
	filter: drop-shadow(0 0 8px var(--pink-glow))
}

@keyframes headerSheen {
	0% {
		background-position: 200% 0
	}

	100% {
		background-position: -200% 0
	}
}

@keyframes twinkle {

	0%,
	100% {
		opacity: 1
	}

	50% {
		opacity: .4
	}
}

@keyframes blink {

	0%,
	100% {
		opacity: 1
	}

	50% {
		opacity: .35
	}
}

@keyframes statusTicker {
	0% {
		transform: translateX(100%)
	}

	100% {
		transform: translateX(-100%)
	}
}

@keyframes divPulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .4;
		transform: scale(.8)
	}
}

@keyframes stampWiggle {
	0% {
		transform: rotate(0) scale(1)
	}

	20% {
		transform: rotate(-8deg) scale(1.12)
	}

	45% {
		transform: rotate(7deg) scale(1.1)
	}

	65% {
		transform: rotate(-4deg) scale(1.05)
	}

	85% {
		transform: rotate(2deg) scale(1.02)
	}

	100% {
		transform: rotate(0) scale(1)
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes celesteFloat {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@keyframes floatDrift {
	0% {
		transform: translateY(0) rotate(0)
	}

	100% {
		transform: translateY(-10px) rotate(8deg)
	}
}

@keyframes sparkFade {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1)
	}

	100% {
		opacity: 0;
		transform: translateY(-18px) scale(.4)
	}
}

@keyframes targetPulse {
	0% {
		filter: saturate(1)
	}

	35% {
		filter: saturate(1.28) brightness(1.04)
	}

	100% {
		filter: saturate(1)
	}
}

@media(max-width:820px) {
	body {
		height: auto;
		min-height: 100vh;
		min-height: 100dvh;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 10px 0;
		align-items: flex-start
	}

	.wrapper {
		width: calc(100vw - 12px);
		max-height: none
	}

	.wrapper2,
	.body-row {
		overflow: visible
	}

	.top-row,
	.bottom-row,
	.al-top-row,
	.al-bottom-row,
	.duo-row,
	.mmb-body {
		display: grid;
		grid-template-columns: 1fr
	}

	.top-row .right-top,
	.bottom-row .left-bottom,
	.bottom-row .right-bottom,
	.al-right-col {
		width: auto
	}

	.about-sidebar {
		display: grid;
		grid-template-columns: 155px minmax(0, 1fr);
		align-items: start
	}

	.video-box1 {
		display: none
	}
}

@media(max-width:520px) {
	.wrapper2 {
		padding: 5px
	}

	.about-sidebar {
		grid-template-columns: 1fr
	}

	.about-pfp-wrapper {
		height: min(260px, 74vw)
	}

	.about-text {
		font-size: 12px;
		line-height: 1.72;
		padding: 11px
	}

	.sticker-clover,
	.stickers,
	.about-sticker-pin,
	.about-sticker-pin1,
	.gjs-img,
	.gts-img {
		opacity: .55;
		pointer-events: none
	}

	.quiz-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.lm-card {
		width: 105px
	}
}

@media(prefers-reduced-motion:reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: .001ms !important
	}

	body {
		animation: none
	}
}

#bio,
#stamps,
#bias,
#princesse-core,
#literally-me,
#faves {
	scroll-margin-top: 12px
}

#bio:target,
#stamps:target,
#bias:target,
#princesse-core:target,
#literally-me:target,
#faves:target {
	animation: targetPulse 1.15s ease
}

.about-map {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3px;
	padding: 5px;
	border: 1px dashed var(--blue);
	border-radius: var(--card-radius);
	background: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 248, 253, .86)), var(--card-bg);
	box-shadow: var(--card-shadow)
}

.about-map a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 18px;
	padding: 2px 4px;
	border: 1px solid rgba(255, 61, 168, .45);
	border-radius: 4px;
	background: linear-gradient(to bottom, #fff 0, #fff0f8 52%, #e5f8ff 100%);
	color: var(--pink-border);
	font-size: 8px;
	line-height: 1;
	text-decoration: none;
	transition: transform .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease
}

.about-map a:nth-child(5) {
	grid-column: 1 / -1
}

.about-map a:hover,
.about-map a:focus-visible {
	transform: translateY(-1px);
	border-color: var(--blue-mid);
	color: var(--blue-deep);
	box-shadow: 1px 1px 0 rgba(255, 61, 168, .22);
	outline: 0
}

.webprincess-note {
	position: relative;
	z-index: 2;
	margin: 0 0 7px 52px;
	padding: 7px 8px 7px 10px;
	border: 1px dashed rgba(255, 61, 168, .72);
	border-radius: 5px;
	background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 245, 251, .9)), repeating-linear-gradient(0, transparent 0 13px, rgba(91, 200, 245, .14) 13px 14px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65), 2px 2px 0 rgba(91, 200, 245, .18), 0 1px 8px rgba(255, 61, 168, .12);
	color: var(--text)
}

.webprincess-note::before {
	content: "read me";
	position: absolute;
	top: -9px;
	right: 8px;
	padding: 1px 6px;
	border: 1px solid var(--orange);
	border-radius: 999px;
	background: #fff8df;
	color: #a04d00;
	font-size: 7px;
	letter-spacing: 1px;
	transform: rotate(2deg)
}

.wpn-kicker {
	display: block;
	margin-bottom: 3px;
	color: var(--pink-border);
	font-family: 'pixel', 'DotGothic16', monospace;
	font-size: 9px;
	letter-spacing: .8px;
	text-transform: lowercase
}

.webprincess-note p {
	margin: 0;
	font-size: 10px;
	line-height: 1.55
}

.profile-badges {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin: 0 0 7px 52px
}

.profile-badges span {
	padding: 2px 6px;
	border: 1px solid rgba(0, 153, 230, .45);
	border-radius: 999px;
	background: rgba(255, 255, 255, .84);
	color: var(--text-soft);
	font-size: 8px;
	line-height: 1.2;
	box-shadow: inset 0 -3px 5px rgba(91, 200, 245, .12)
}

.mmb-fav-title[data-tip] {
	position: relative;
	display: inline-block;
	cursor: help;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	text-decoration-color: var(--pink)
}

.mmb-fav-title[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100%+6px);
	z-index: 500;
	width: max-content;
	max-width: 150px;
	padding: 5px 7px;
	border: 1px solid var(--pink-border);
	border-radius: 5px;
	background: linear-gradient(rgba(255, 255, 255, .94), rgba(255, 240, 248, .94)), var(--card-bg);
	box-shadow: 2px 2px 0 rgba(91, 200, 245, .28), 0 2px 8px rgba(255, 61, 168, .18);
	color: var(--text);
	font-size: 8px;
	font-weight: normal;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	text-align: center;
	transform: translate(-50%, 4px);
	transition: opacity .16s ease, transform .16s ease
}

.mmb-fav-title[data-tip]:hover::after,
.mmb-fav-title[data-tip]:focus-visible::after {
	opacity: 1;
	transform: translate(-50%, 0)
}

.gjs-img,
.gts-img {
	pointer-events: auto;
	cursor: help
}

.gjs-img:focus-visible,
.gts-img:focus-visible {
	outline: 1px solid var(--pink-border);
	outline-offset: 3px
}

.jjk-bubble {
	position: absolute;
	z-index: 30;
	max-width: 142px;
	padding: 6px 8px;
	border: 1px solid var(--pink-border);
	border-radius: 8px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 2px 2px 0 rgba(91, 200, 245, .3), 0 2px 10px rgba(255, 61, 168, .16);
	color: var(--text);
	font-size: 8px;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px) rotate(-1deg);
	transition: opacity .16s ease, transform .16s ease
}

.jjk-bubble::after {
	content: "";
	position: absolute;
	bottom: -6px;
	width: 10px;
	height: 10px;
	border-right: 1px solid var(--pink-border);
	border-bottom: 1px solid var(--pink-border);
	background: rgba(255, 255, 255, .94);
	transform: rotate(45deg)
}

.bubble-gojo {
	right: 185px;
	bottom: 165px
}

.bubble-gojo::after {
	right: 120px
}

.bubble-geto {
	left: 190px;
	bottom: 160px
}

.bubble-geto::after {
	left: 120px
}

.gjs-img:hover~.bubble-gojo,
.gjs-img:focus-visible~.bubble-gojo,
.gts-img:hover~.bubble-geto,
.gts-img:focus-visible~.bubble-geto {
	opacity: 1;
	transform: translateY(0) rotate(-1deg)
}

[data-secret] {
	cursor: help
}

.at-tag[data-secret] {
	position: relative;
	transition: transform .14s ease, box-shadow .14s ease, filter .14s ease
}

.at-tag[data-secret]:hover,
.at-tag[data-secret]:focus-visible {
	transform: translateY(-1px) rotate(-1deg);
	filter: saturate(1.14);
	box-shadow: 1px 1px 0 rgba(91, 200, 245, .35), 0 0 8px rgba(255, 61, 168, .18);
	outline: 0
}

.sticker-clover[data-secret],
.stickers[data-secret] {
	pointer-events: auto;
	cursor: help
}

.sticker-clover[data-secret]:hover img,
.stickers[data-secret]:hover img,
.sticker-clover[data-secret]:focus-visible img,
.stickers[data-secret]:focus-visible img {
	animation: stampWiggle .5s ease-in-out
}

.food-card[data-secret],
.bias-item[data-secret],
.reading-content[data-secret],
.about-pfp-wrapper[data-secret] {
	cursor: help
}

.food-card[data-secret]:hover span::after,
.bias-item[data-secret]:hover .bias-name::after {
	content: " ?";
	color: var(--pink-border);
	animation: twinkle 1s ease-in-out infinite
}

.secret-tooltip {
	position: fixed;
	z-index: 100000;
	max-width: 185px;
	padding: 6px 8px;
	border: 1px solid var(--pink-border);
	border-radius: 7px;
	background: linear-gradient(rgba(255, 255, 255, .95), rgba(255, 241, 249, .95)), var(--card-bg);
	box-shadow: 2px 2px 0 rgba(91, 200, 245, .34), 0 2px 10px rgba(255, 61, 168, .2);
	color: var(--text);
	font-family: 'DotGothic16', 'MS PGothic', monospace;
	font-size: 9px;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	text-align: center;
	transform: translateY(4px) rotate(-1deg);
	transition: opacity .14s ease, transform .14s ease
}

.secret-tooltip::before {
	display: block;
	margin: -2px 0 3px;
	color: var(--pink-border);
	font-size: 7px;
	letter-spacing: 1px
}

.secret-tooltip.show {
	opacity: 1;
	transform: translateY(0) rotate(-1deg)
}

.wrapper,
.wrapper2 {
	max-width: min(1180px, calc(100vw - 24px))
}

.wrapper2 {
	border-radius: 10px;
	box-shadow: 0 0 0 5px rgba(255, 255, 255, .45), 0 18px 56px rgba(255, 61, 168, .12)
}

.about-text {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 8px 20px rgba(255, 61, 168, .08)
}

.at-tag {
	border-radius: 999px
}

.about-pfp {
	border-radius: 8px
}

.footer {
	height: 2rem;
	border: 1px solid var(--blue-pale);
	border-radius: 0 0 8px 5px;
	box-shadow: var(--mint) inset 0 0 2px, var(--mint) 0 0 0 1px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.footer p {
	font-size: 9px;
	color: var(--blue-mid);
	letter-spacing: .5px
}

.footer a {
	color: var(--blue-mid);
	text-decoration: none
}

.footer a:hover {
	text-decoration: underline
}

/* ── food/drink hover preview: bigger image on hover (see initFoodPreview in about.js) ── */
.food-preview {
	position: fixed;
	z-index: 100000;
	width: 120px;
	padding: 6px 6px 5px;
	text-align: center;
	border: 1px solid var(--pink-border);
	border-radius: 7px;
	background: linear-gradient(rgba(255, 255, 255, .95), rgba(255, 241, 249, .95)), var(--card-bg);
	box-shadow: 2px 2px 0 rgba(91, 200, 245, .34), 0 2px 10px rgba(255, 61, 168, .2);
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px) rotate(-1deg);
	transition: opacity .14s ease, transform .14s ease;
}

.food-preview.show {
	opacity: 1;
	transform: translateY(0) rotate(-1deg);
}

.food-preview img {
	display: block;
	width: 100%;
	height: 100px;
	object-fit: cover;
	border-radius: 5px;
	border: 1px solid var(--pink);
}

.food-preview span {
	display: block;
	margin-top: 4px;
	font-family: 'DotGothic16', 'MS PGothic', monospace;
	font-size: 9px;
	color: var(--text);
	letter-spacing: .3px;
}