body {
  margin: 0;
  padding: 30px 12px;
  background: #200003 url("public/assets/images/redwallpaper.png") center / cover fixed;
  font: 13px/1.5 "Trebuchet MS", Verdana, Tahoma, sans-serif;
  color: #ffe9eb;
  overflow-x: hidden;
}

/* red cursor (the link one has a lil heart) */
html, body {
  cursor: url("public/assets/cursors/red-arrow.svg") 2 2, url("public/assets/cursors/red-arrow.png") 2 2, auto;
}
a, button, .bubbles i, .pfp {
  cursor: url("public/assets/cursors/red-link.svg") 2 2, url("public/assets/cursors/red-link.png") 2 2, pointer;
}

a { color: #ff8e98; }
a:hover { color: #fff; text-shadow: 0 0 6px #ff2035; }

.note { color: #c98e95; font-size: 11px; white-space: nowrap; }
.teal { color: #39c5bb; }

/* bubbles floating up in the background, u can pop them */
.bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.bubbles i {
  position: absolute; bottom: -80px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 200, 205, .5);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.8) 0 8%, rgba(255,255,255,0) 25%), rgba(255, 60, 80, .08);
  pointer-events: auto;
  animation: up linear infinite;
  transition: opacity .25s, scale .25s;
}
.bubbles i.popped { opacity: 0; scale: 1.8; }
@keyframes up { to { transform: translateY(-120vh); } }

/* everything sits in one big glass frame */
#wrap {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 2px;
  background: rgba(255, 90, 105, .18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 190, 195, .6);
  box-shadow: 0 0 0 1px #2a0005, 0 10px 40px #000;
  animation: load-in .7s ease-out;
}
#wrap::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 60px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(rgba(255,255,255,.25), transparent);
  pointer-events: none;
}
@keyframes load-in { from { opacity: 0; transform: translateY(20px) scale(.98); } }

#progress {
  position: fixed; top: 0; left: 0; z-index: 30;
  height: 4px; width: 0;
  background: linear-gradient(#ff9aa4, #e3132c 50%, #9e0016);
  box-shadow: 0 0 8px #ff2035;
}

/* banner */
#banner {
  position: relative;
  overflow: hidden;
  height: 170px;
  box-sizing: border-box;
  padding: 18px 22px;
  border: 1px solid #3a0008;
  border-radius: 2px 2px 0 0;
  background: url("public/assets/images/windows_stock_photos_1.jpg") 30% 62% / cover;
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift { to { background-position: 70% 62%; } }

#banner::before, #banner::after {
  content: "";
  position: absolute; left: 0; right: 0;
  pointer-events: none;
}
#banner::before { top: 0; height: 45%; background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.04)); }
#banner::after { bottom: 0; height: 50%; background: linear-gradient(transparent, rgba(40,0,6,.45)); }
#banner h1, #banner p { position: relative; z-index: 1; }

#banner h1 {
  margin: 0;
  font: bold 64px/1 "Trebuchet MS", sans-serif;
  color: #fff;
  letter-spacing: -1px;
  text-shadow: 2px 2px 0 #b3001b, 0 0 14px rgba(255,255,255,.7);
  animation: glow 3s ease-in-out infinite;
}
@keyframes glow {
  50% { text-shadow: 2px 2px 0 #b3001b, 0 0 26px rgba(255,255,255,.95), 0 0 40px rgba(255,60,80,.8); }
}
#banner h1 span { display: inline-block; transition: transform .25s cubic-bezier(.3,1.8,.5,1); }
#banner h1 span:hover { transform: translateY(-10px) rotate(-6deg); }

#banner p {
  margin: 6px 0 0;
  min-height: 21px;
  color: #fff;
  font-size: 14px;
  text-shadow: 1px 1px 2px #000;
}
#banner p.typing::after { content: "▌"; margin-left: 1px; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* twinkly stars in the sky part of the banner */
.twinkle {
  position: absolute;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 12px #ff8e98;
  pointer-events: none;
  animation: twinkle 2.4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* nav bar */
#nav {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  border: 1px solid #3a0008;
  border-top: 0;
  background: linear-gradient(#ff5a6a, #d3142b 50%, #a8001a 51%, #c8102a);
  color: #ffd0d5;
}
#nav a { position: relative; color: #fff; font-weight: bold; text-decoration: none; }
#nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px;
  height: 2px; background: #fff; box-shadow: 0 0 6px #fff;
  transition: right .25s;
}
#nav a:hover::after { right: 0; }
.links { margin-right: auto; }
.updated { font-size: 11px; opacity: .85; white-space: nowrap; }

/* search bar (it doesn't actually search anything lol) */
#search {
  display: inline-flex;
  height: 18px;
  border: 1px solid #3a0008;
  border-radius: 2px;
  background: linear-gradient(#5a0010, #2a0005);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.25);
}
#search input {
  width: 90px;
  padding: 0 5px;
  border: 0;
  background: transparent;
  font: 11px "Trebuchet MS", Verdana, sans-serif;
  color: #fff;
  outline: none;
  transition: width .25s;
}
#search input:focus { width: 130px; }
#search input::placeholder { color: #ff9aa4; }
#search button {
  display: grid; place-items: center;
  width: 18px;
  padding: 0;
  border: 0;
  border-left: 1px solid #3a0008;
  background: linear-gradient(#ff7480, #d3142b 50%, #9e0016 51%, #c41029);
}
#search button img { width: 11px; height: 11px; filter: brightness(0) invert(1); }
#search button:hover { filter: brightness(1.2); }
#search:focus-within { box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 8px #ff4b5c; }
#search.nope { animation: nope .35s; }
@keyframes nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* layout: sidebar on the left, main stuff on the right */
#cols { display: flex; gap: 8px; margin-top: 8px; align-items: flex-start; }
#side { width: 210px; flex: none; }
#main { flex: 1; min-width: 0; }

/* boxes + panels */
.box, .panel {
  background: rgba(30, 0, 4, .72);
  border: 1px solid #ff8e98;
  border-radius: 2px;
  margin-bottom: 8px;
  transition: opacity .6s, transform .4s, box-shadow .25s;
}
.box:hover, .panel:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 12px rgba(255,40,60,.3); }
.box { padding: 0 10px 10px; }
.panel { padding: 0 14px 12px; }

.box h3, .panel h2 {
  position: relative;
  overflow: hidden;
  margin: 0 -10px 8px;
  padding: 3px 10px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(#ff7480, #d3142b 50%, #9e0016 51%, #c41029);
  border-bottom: 1px solid #3a0008;
  border-radius: 1px 1px 0 0;
  text-shadow: 1px 1px 0 #600010;
}
.panel h2 { margin: 0 -14px 10px; padding: 4px 12px; font-size: 15px; }
.box h3 img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; transition: transform .3s cubic-bezier(.3,1.8,.5,1); }
.box:hover h3 img { transform: scale(1.25) rotate(-8deg); }
.panel h2 img { width: 18px; vertical-align: -3px; margin-right: 6px; transition: transform .3s cubic-bezier(.3,1.8,.5,1); }
.panel:hover h2 img { transform: scale(1.25) rotate(-8deg); }
.panel p { margin: 0 0 8px; font-size: 14px; }

/* shine that swipes across a header bar when u hover */
.box h3::after, .panel h2::after, #nav::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.box:hover h3::after, .panel:hover h2::after, #nav:hover::after { animation: shine .8s ease; }
@keyframes shine { to { left: 130%; } }

/* things fade up as u scroll down to them (js adds these) */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.shown { opacity: 1; transform: none; }
.reveal.shown:hover { transform: translateY(-2px); }

/* pfp, tilted like a polaroid */
.pfp {
  position: relative;
  overflow: hidden;
  margin: 4px 4px 12px;
  padding: 6px;
  background: #fff;
  border: 1px solid #3a0008;
  box-shadow: 2px 2px 0 #3a0008;
  transform: rotate(-2deg);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s;
}
.pfp:hover { box-shadow: 4px 6px 0 #3a0008, 0 0 16px rgba(255,60,80,.5); }
.pfp img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pfp::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -80%;
  width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  animation: sweep 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweep { 0%, 70% { left: -80%; } 100% { left: 140%; } }

/* the "me" table */
.info { width: 100%; border-collapse: collapse; }
.info td { padding: 3px 0; border-bottom: 1px dotted #7a2a33; vertical-align: top; }
.info td:first-child { color: #ff8e98; width: 70px; }
.info tr { transition: background .2s; }
.info tr:hover { background: rgba(255, 60, 80, .12); }

.colors { white-space: nowrap; }
.maroon, .black {
  display: inline-block;
  padding: 0 5px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: bold;
  line-height: 17px;
  color: #fff;
  text-decoration: none;
  transition: box-shadow .2s;
}
.maroon { background: #800020; }
.black { background: #000; }
.maroon:hover, .black:hover { box-shadow: 0 0 8px #ff4b5c; }

/* flags (they wave!!) */
.flags img {
  height: 30px;
  margin: 2px 4px 0 0;
  border: 1px solid #fff;
  transform-origin: left center;
  animation: wave 3s ease-in-out infinite;
}
.flags a:nth-child(2) img { animation-delay: -1.5s; }
.flags img:hover { animation: hop .5s; }
@keyframes wave {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  25% { transform: skewY(3deg) scaleX(.97); }
  75% { transform: skewY(-3deg) scaleX(.97); }
}
@keyframes hop { 40% { transform: translateY(-6px) rotate(-4deg); } }

/* miku corner gets her own colors obviously */
.box.miku { border-color: #39c5bb; animation: teal-pulse 4s ease-in-out infinite; }
@keyframes teal-pulse { 50% { box-shadow: 0 0 14px rgba(57, 197, 187, .45); } }
.box.miku h3 {
  background: linear-gradient(#8ff0e7, #39c5bb 50%, #1e9e95 51%, #2fb8ae);
  text-shadow: 1px 1px 0 #11615b;
}
.miku-link { display: block; overflow: hidden; animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.miku-pic {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 100% 50%;
  border: 1px solid #39c5bb;
  transition: transform .5s, box-shadow .3s;
}
.miku-link:hover .miku-pic { transform: scale(1.12); box-shadow: 0 0 10px #39c5bb; }
.np { margin: 8px 0 0; font-size: 12px; color: #bdf3ee; }
.np img { vertical-align: -3px; }
.np a.song { color: #bdf3ee; }
.np a.song:hover { color: #fff; text-shadow: 0 0 6px #39c5bb; }

/* likes */
.likes { columns: 2; column-gap: 20px; }
.likes > div { break-inside: avoid; margin-bottom: 10px; }
.likes h4 { margin: 0 0 2px; color: #ff8e98; font-size: 13px; }
.likes h4 img { width: 16px; vertical-align: -3px; margin-right: 4px; transition: transform .3s cubic-bezier(.3,1.8,.5,1); }
.likes > div:hover h4 img { transform: scale(1.3); }
.likes ul { margin: 0; padding-left: 22px; list-style: "♥ "; }
.likes li::marker { color: #ff3347; }
.likes li:hover::marker { color: #fff; }
.likes a, .dni-list a { color: #ffe9eb; text-decoration: none; border-bottom: 1px dotted #ff8e98; }
.likes a:hover, .dni-list a:hover { color: #fff; border-bottom-style: solid; }
.likes li, .dni-list li { transition: transform .2s; }
.likes li:hover, .dni-list li:hover { transform: translateX(4px); }
.likes .more { list-style: none; margin-left: -14px; color: #c98e95; font-size: 12px; font-style: italic; }

/* dni */
#dni h2 img { background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px #fff, 0 0 4px #fff; }
.dni-list { margin: 0; padding-left: 22px; list-style: "✕ "; font-size: 14px; }
.dni-list li { padding: 2px 0; }
.dni-list li::marker { color: #ff3347; }
.dni-list li:hover { text-shadow: 0 0 8px rgba(255, 60, 80, .6); }

.minor-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid #ffcc33;
  border-radius: 2px;
  background: rgba(255, 204, 51, .1);
}
.minor-note p { margin: 0 0 4px; font-size: 14px; }
.minor-note ul { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.minor-note li { margin-bottom: 2px; }
.minor-note b, .info-body b { color: #ffd966; }
#minor-btn {
  padding: 4px 12px;
  border-radius: 2px;
  border: 1px solid #a07800;
  font: 12px "Trebuchet MS", Verdana, sans-serif;
  color: #2a1d00;
  background: linear-gradient(#fff2b3, #ffd966 50%, #f2bd2a 51%, #ffd24d);
  transition: box-shadow .2s, transform .15s;
}
#minor-btn:hover { transform: translateY(-1px); box-shadow: 0 0 10px #ffcc33; }

/* privacy policy */
#privacy { margin-top: 8px; }
#privacy h4 { margin: 10px 0 2px; color: #ff8e98; font-size: 13px; }
#privacy ul { margin: 0; padding-left: 20px; font-size: 12px; }
#privacy li { margin-bottom: 3px; }

#foot { text-align: center; font-size: 11px; padding: 6px 0 2px; }

/* popups (video, "are u sure", minor info) */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(10, 0, 2, .75);
  animation: fade-bg .2s ease-out;
}
.overlay[hidden] { display: none; }
@keyframes fade-bg { from { background: rgba(10, 0, 2, 0); } }

.win {
  width: min(760px, 100%);
  border: 1px solid #ff8e98;
  border-radius: 2px;
  background: rgba(30, 0, 4, .9);
  box-shadow: 0 10px 40px #000, 0 0 20px rgba(255, 40, 60, .4);
  overflow: hidden;
  animation: pop-in .25s ease-out;
}
@keyframes pop-in { from { transform: scale(.9); opacity: 0; } }
.win h2 {
  display: flex; align-items: center;
  margin: 0;
  padding: 4px 6px 4px 12px;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(#ff7480, #d3142b 50%, #9e0016 51%, #c41029);
  border-bottom: 1px solid #3a0008;
  text-shadow: 1px 1px 0 #600010;
}
.win h2 span { flex: 1; }
.x-btn {
  width: 38px; height: 20px;
  border: 1px solid #3a0008;
  border-radius: 2px;
  background: linear-gradient(#ff9a9a, #e0303a 50%, #b80010 51%, #ff3a3a);
  color: #fff;
  font-size: 11px;
}
.x-btn:hover { filter: brightness(1.2); box-shadow: 0 0 8px #ff4b5c; }

.vid-frame { aspect-ratio: 16 / 9; background: #000; }
.vid-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.leave-box { width: min(420px, 100%); }
.leave-body { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 4px; }
.leave-body p { margin: 0 0 6px; font-size: 14px; }
#leave-url { font-size: 12px; color: #ff8e98; word-break: break-all; }
#leave-note, #site-note {
  margin-top: 10px;
  padding: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: #ffc9cf;
  background: rgba(0, 0, 0, .3);
  border: 1px dotted #7a2a33;
}
.policy-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.policy-btns a {
  padding: 5px 10px;
  border-radius: 2px;
  border: 1px solid #ff8e98;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(rgba(255,255,255,.25), rgba(255,60,80,.25) 50%, rgba(120,0,15,.4) 51%, rgba(255,60,80,.3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .15s, box-shadow .15s;
}
.policy-btns a:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 8px #ff4b5c; }
.leave-btns { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 14px 14px; }
.leave-btns button {
  min-width: 70px;
  padding: 3px 12px;
  border: 1px solid #3a0008;
  border-radius: 2px;
  font: 13px "Trebuchet MS", Verdana, sans-serif;
  color: #fff;
  background: linear-gradient(#ff7480, #d3142b 50%, #9e0016 51%, #c41029);
  text-shadow: 1px 1px 0 #600010;
}
#leave-cancel { background: linear-gradient(#777, #444 50%, #2a2a2a 51%, #3a3a3a); text-shadow: none; }
.leave-btns button:hover { filter: brightness(1.2); box-shadow: 0 0 8px #ff4b5c; }

.info-box { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.info-body { padding: 12px 16px 14px; font-size: 13px; line-height: 1.5; }
.info-body p { margin: 0 0 8px; }
.info-body ul { margin: 0 0 10px; padding-left: 18px; }
.info-body li { margin-bottom: 4px; }

/* the lil things js spawns: sparkles, click rings, hearts, miku notes */
.spark {
  position: fixed; z-index: 20;
  pointer-events: none;
  color: #ff4b5c;
  font-size: 12px;
  text-shadow: 0 0 6px #ff2035;
  animation: spark .7s ease-out forwards;
}
@keyframes spark { to { transform: translateY(18px) scale(.3) rotate(90deg); opacity: 0; } }

.ring {
  position: fixed; z-index: 25;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid #ff4b5c;
  box-shadow: 0 0 8px #ff2035;
  pointer-events: none;
  animation: ring .5s ease-out forwards;
}
@keyframes ring { to { transform: scale(5) rotate(45deg); opacity: 0; } }

.heart {
  position: fixed; z-index: 25;
  pointer-events: none;
  color: #ff3347;
  text-shadow: 0 0 6px #fff;
  animation: heart 1s ease-out forwards;
}
@keyframes heart { to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }

.note-fall {
  position: fixed; top: -30px; z-index: 25;
  pointer-events: none;
  color: #39c5bb;
  text-shadow: 0 0 8px #39c5bb;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }

/* shooting star that zips across the banner every so often */
.shooting-star {
  position: absolute; top: 12px; left: 105%;
  width: 70px; height: 2px;
  background: linear-gradient(90deg, #fff, transparent);
  box-shadow: 0 0 6px #fff;
  transform: rotate(-12deg);
  animation: shoot 9s ease-in infinite 3s;
  pointer-events: none;
}
@keyframes shoot {
  0%, 88% { left: 105%; top: 12px; opacity: 0; }
  89% { opacity: 1; }
  100% { left: 30%; top: 40px; opacity: 0; }
}

/* red scrollbar + red text highlight */
html { scrollbar-color: #c41029 #1a0003; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #1a0003; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #ff7480, #d3142b 50%, #9e0016); border: 1px solid #3a0008; }
::selection { background: #e3132c; color: #fff; }

/* so keyboard users can see where they are */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ===== miku mode =====
   type "miku" anywhere (or search it). colors are from her outfit:
   gray top, teal hair + tie, pink hair ties */

body.miku {
  background-image: url("public/assets/images/vocaloid_1.jpg");
  background-position: 75% center;
  color: #eef3f4;
}
body.miku, html:has(body.miku) {
  cursor: url("public/assets/cursors/teal-arrow.svg") 2 2, url("public/assets/cursors/teal-arrow.png") 2 2, auto;
}
body.miku a, body.miku button, body.miku .bubbles i, body.miku .pfp {
  cursor: url("public/assets/cursors/teal-link.svg") 2 2, url("public/assets/cursors/teal-link.png") 2 2, pointer;
}
html:has(body.miku) { scrollbar-color: #39c5bb #1b1e21; }
body.miku ::selection { background: #e12885; color: #fff; }

body.miku a { color: #5fd8cf; }
body.miku a:hover { color: #fff; text-shadow: none; text-decoration: underline; }
body.miku .maroon, body.miku .black, body.miku .policy-btns a { color: #fff; text-decoration: none; }

body.miku #wrap {
  background: rgba(60, 66, 72, .35);
  border-color: #6b7177;
  box-shadow: 0 0 0 1px #111, 0 10px 40px #000;
}

/* banner turns into a lil miku header */
body.miku #banner {
  border-color: #111;
  background:
    linear-gradient(90deg, #1b1e21 25%, rgba(27,30,33,.6) 50%, rgba(27,30,33,0) 70%),
    url("public/assets/images/vocaloid_1.jpg") 100% 15% / 110% auto;
  animation: none;
}
body.miku #banner::after { display: none; }
body.miku #banner h1 {
  color: #39c5bb;
  text-shadow: 2px 2px 0 #0b3d3a;
  animation: none;
}
body.miku #banner h1::after {
  content: "01";
  margin-left: 6px;
  font-size: 15px;
  vertical-align: top;
  color: #e12885;
  letter-spacing: 0;
  text-shadow: none;
}
body.miku #banner p { color: #c9d1d6; text-shadow: none; }
body.miku .twinkle, body.miku .shooting-star { display: none; }

/* nav is her gray top, headers are her tie */
body.miku #nav {
  background: linear-gradient(#70767c, #474c51 50%, #34383c 51%, #3e4347);
  border-color: #111;
  color: #b9c2c8;
}
body.miku #nav a::after { background: #39c5bb; box-shadow: none; }

body.miku .box h3,
body.miku .panel h2,
body.miku .win h2,
body.miku #search button,
body.miku #leave-go,
body.miku #progress {
  background: linear-gradient(#8ff0e7, #39c5bb 50%, #1e9e95 51%, #2fb8ae);
  border-color: #0b3d3a;
  text-shadow: 1px 1px 0 #11615b;
}
body.miku #progress { box-shadow: none; }
body.miku .x-btn { background: linear-gradient(#ff8ac4, #e12885 50%, #b5156a 51%, #d81f7c); border-color: #4a0628; }

body.miku .box, body.miku .panel { background: rgba(27, 30, 33, .88); border-color: #4f565c; }
body.miku .box:hover, body.miku .panel:hover { box-shadow: 0 6px 16px rgba(0,0,0,.5); }
body.miku .box h3::after, body.miku .panel h2::after { display: none; }
body.miku .box.miku { border-color: #39c5bb; animation: none; }
body.miku .win { background: rgba(27, 30, 33, .96); border-color: #4f565c; box-shadow: 0 10px 40px #000; }
body.miku .pfp { box-shadow: 3px 3px 0 #111; }

body.miku .info td { border-bottom-color: #3a4248; }
body.miku .info tr:hover { background: rgba(255, 255, 255, .05); }
body.miku .info td:first-child,
body.miku .likes h4,
body.miku #privacy h4,
body.miku #leave-url { color: #5fd8cf; }
body.miku .note { color: #8d979e; }

/* hearts -> pink music notes */
body.miku .likes ul { list-style: "♪ "; }
body.miku .likes li::marker, body.miku .dni-list li::marker { color: #e12885; }
body.miku .likes a, body.miku .dni-list a { color: #eef3f4; border-bottom-color: #39c5bb; }
body.miku .dni-list li:hover { text-shadow: none; }

body.miku #search { background: linear-gradient(#2b2f33, #1b1e21); border-color: #111; }
body.miku #search input::placeholder { color: #8d979e; }
body.miku #search:focus-within { box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px #39c5bb; }

body.miku #leave-note, body.miku #site-note { color: #c9d1d6; border-color: #3a4248; }
body.miku .policy-btns a {
  border-color: #39c5bb;
  background: linear-gradient(rgba(255,255,255,.2), rgba(57,197,187,.25) 50%, rgba(0,60,56,.45) 51%, rgba(57,197,187,.25));
  box-shadow: none;
}

body.miku .bubbles i {
  border-color: rgba(143, 240, 231, .5);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.8) 0 8%, rgba(255,255,255,0) 25%), rgba(57, 197, 187, .06);
}
body.miku .spark, body.miku .heart { color: #39c5bb; text-shadow: none; }
body.miku .ring { border-color: #e12885; box-shadow: none; }

/* the "back to red" button */
#miku-exit {
  position: fixed; right: 16px; bottom: 16px; z-index: 9;
  padding: 5px 12px;
  border: 1px solid #3a0008;
  border-radius: 2px;
  font: bold 12px "Trebuchet MS", Verdana, sans-serif;
  color: #fff;
  text-shadow: 1px 1px 0 #600010;
  background: linear-gradient(#ff7480, #d3142b 50%, #9e0016 51%, #c41029);
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
#miku-exit[hidden] { display: none; }
#miku-exit:hover { filter: brightness(1.15); }

/* "miku.exe" loading box that shows up while it switches */
.mode-load {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .3);
  transition: opacity .2s;
}
.mode-load.out { opacity: 0; }
.mode-load .win { width: min(300px, 100%); }
.load-body { display: flex; gap: 10px; align-items: center; padding: 12px 14px 14px; }
.load-body > div { flex: 1; }
.load-body p { margin: 0 0 6px; font-size: 13px; }
.load-bar {
  height: 13px;
  border: 1px solid #555;
  border-radius: 2px;
  background: linear-gradient(#ddd, #fff);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
  overflow: hidden;
}
.load-bar i {
  display: block;
  width: 0; height: 100%;
  background: linear-gradient(#b5fff7, #39c5bb 50%, #1e9e95 51%, #39c5bb);
  animation: load-fill .9s steps(9, end) forwards;
}
.mode-load.to-red .load-bar i { background: linear-gradient(#ff9aa4, #e3132c 50%, #9e0016 51%, #e3132c); }
@keyframes load-fill { to { width: 100%; } }

/* phones */
@media (max-width: 620px) {
  body { padding: 10px 6px; }
  #cols { flex-direction: column; }
  #side, #main { width: 100%; }
  .pfp { width: 160px; margin: 4px auto 12px; }
  #banner { height: 130px; }
  #banner h1 { font-size: 48px; }
  #nav { flex-wrap: wrap; }
  .links { width: 100%; }
  #search input, #search input:focus { width: 100px; }
  .likes { columns: 1; }
  .miku-link { max-width: 240px; margin: 0 auto; }
}

/* if someone has reduce motion on, chill everything out */
@media (prefers-reduced-motion: reduce) {
  .bubbles, .twinkle, .shooting-star { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}