/* Soft scrapbook theme using MetwoVT's pink, warm brown, and amber palette. */
:root {
  color-scheme: light;
  --background: #fff8f4;
  --surface: #fffefd;
  --text: #543840;
  --muted: #795e68;
  --pink: #e367a2;
  --pink-light: #a43e70;
  --brown: #8f574d;
  --amber: #a56a24;
  --line: #ecd7df;
  --font: 'Trebuchet MS', 'Arial Rounded MT Bold', Arial, sans-serif;
}
body {
  background-image: radial-gradient(#e8bdcd66 .8px, transparent .8px);
  background-size: 22px 22px;
}
::selection { background: #f7c4d9; color: #543840; }
.site-header {
  margin: 20px auto 0;
  max-width: 1310px;
  width: 92%;
  padding: 17px 25px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fffefde8;
  box-shadow: 0 5px 0 #f4e2e8;
}
.brand { color: #633f4f; }
.brand img { border-radius: 12px; }
.site-header nav a { color: #78515f; font-weight: 600; }
.site-header nav a:hover, .text-link:hover { color: #a02e64; }
.header-link, .menu-toggle {
  border: 1px solid #e9bacd;
  background: #fff0f6;
  color: #864663;
}
.hero { min-height: 680px; padding-top: 65px; }
.hero h1 { font-weight: 700; letter-spacing: -3.8px; }
.italic-word, .serif-accent { color: #ab4477; }
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid #edc3d4;
  border-radius: 30px;
  background: #fff0f6;
  letter-spacing: 1.5px;
}
.title-spark { color: #c88a32; }
.button { border-radius: 24px; }
.button-primary {
  background: #f5b4cf;
  color: #663448;
  border: 1px solid #e394b6;
  box-shadow: 0 4px 0 #db8aab;
}
.button-primary:hover { background: #f9c7dc; }
.button-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #db8aab; }
.hero-art {
  background: radial-gradient(ellipse, #f8d8e9 0%, #fff0e6aa 52%, transparent 72%);
}
.art-grid { opacity: .3; }
.art-orbit { border: 1px dashed #d69cae; }
.chemical-card {
  background: #fffdf9;
  border: 1px solid #e8c9d4;
  border-radius: 24px;
  box-shadow: 10px 13px 0 #f0c9d5, 0 22px 55px #b97f9526;
  transform: translate(-50%, -50%) rotate(-7deg);
  padding: 18px;
}
/* Paper tape turns the portrait frame into a scrapbook keepsake. */
.chemical-card::before {
  content: '';
  position: absolute;
  top: -9px;
  left: calc(50% - 41px);
  width: 82px;
  height: 29px;
  background: #f1d18bba;
  transform: rotate(5deg);
  z-index: 3;
  border: 1px solid #e9c78380;
}
.chemical-card { overflow: visible; }
.chemical-top { color: #9a5773; }
.avatar-art { border-radius: 15px; filter: saturate(.85) brightness(1.04); }
.chemical-name { color: #794b5c; font-weight: 700; letter-spacing: 6px; }
.chemical-bottom { color: #946173; border-color: #ecd2dc; }
.art-label {
  background: #fffefd;
  color: #79525f;
  border: 1px solid #e9c4d2;
  box-shadow: 0 4px 0 #edd4dc;
  padding: 10px 14px;
}
.label-dot { background: #d18f40; }
.star-one { color: #dca24c; }
.star-two { color: #c3769a; }
.star-three { color: #bf7094; }
.heart-sticker {
  position: absolute;
  width: 51px;
  height: 51px;
  left: 9%;
  top: 20%;
  color: #eda5c3;
  transform: rotate(-18deg);
  filter: drop-shadow(2px 3px 0 #fffdf9);
}
.heart-sticker svg { width: 100%; height: 100%; }
.ticker {
  background: #fce9f0;
  border: 0;
  border-top: 2px dashed #e6b7c9;
  border-bottom: 2px dashed #e6b7c9;
  color: #98516f;
  padding: 19px 0;
}
.ticker span { color: #c88c35; }
h2 { font-weight: 600; }
.serif-accent { font-weight: 400; }
.pill-row span {
  background: #fff0f6;
  border-color: #eac5d5;
  color: #95516e;
}
.formula {
  padding: 25px 20px;
  border: 1px dashed #ddb5c3;
  border-radius: 22px;
  background: #fffefd;
  box-shadow: 0 4px 0 #f4e5eb;
}
.formula-result { color: #9e4b72; }
.stream-card, .schedule-block, .replay-block {
  border-radius: 25px;
  border: 1px solid #e6c8d5;
  box-shadow: 0 5px 0 #f0dfe6;
}
.stream-card { background: #f9e3ed; }
.stream-card:hover { border-color: #ce88a6; }
.stream-card-top { color: #8c4f69; }
.small-tag, .corner-arrow { color: #96526f; }
.stream-art { background: radial-gradient(ellipse, #fff6ed 0%, transparent 70%); }
.stream-art > span { color: #85405f; }
.stream-art svg { stroke: #c8799b77; }
.stream-art svg circle { fill: #dca24c; stroke: #dca24c; }
.stream-card-bottom { background: #fffefd; border-top: 1px dashed #e8c5d5; }
.round-arrow { border-color: #dfb5c5; background: #fff0f5; color: #94506c; }
.schedule-block { background: #fffefd; }
.replay-block { background: #fff5e8; border-color: #ead2b4; }
.replay-block:hover { background: #ffedd6; }
.replay-icon { background: #f9dfb7; color: #915b20; }
.community-section {
  background: #f9dfeb;
  color: var(--text);
  border-top: 1px solid #ebc4d5;
  border-bottom: 1px solid #ebc4d5;
}
.community-section::before, .community-section::after {
  content: '';
  position: absolute;
  width: 190px;
  height: 100px;
  background: #ffffff60;
  border-radius: 100px;
  box-shadow: 45px -35px 0 #ffffff60, 90px 0 0 #ffffff60;
  pointer-events: none;
}
.community-section::before { right: 6%; bottom: -60px; }
.community-section::after { left: -130px; top: -65px; transform: scale(.7); }
.community-content .eyebrow { color: #96506f; }
.community-content > p:not(.eyebrow) { color: #76505f; }
.community-decoration { color: #ce8aaa24; }
.community-small-star { color: #b9799b; }
.button-dark {
  background: #8f516d;
  color: #fff9fc;
  border: 1px solid #81435e;
  box-shadow: 0 4px 0 #713d55;
}
.button-dark:hover { background: #a36380; }
.social-links a { border-color: #c88eaa; color: #804563; }
.social-links a:hover { border-color: #804563; }
.faq-list details {
  margin-bottom: 12px;
  padding: 0 19px;
  border: 1px solid #ead1dc;
  border-radius: 18px;
  background: #fffefd;
}
.faq-list details:first-child { border-top: 1px solid #ead1dc; }
.faq-list details[open] { background: #fff1f6; }
summary { color: #744d5c; font-weight: 600; }
.footer-top { border-top: 1px dashed #dfbdcc; }
.footer-bottom { border-color: #ebd8e0; }
dialog {
  background: #fffaf7;
  border: 1px solid #e6bdcf;
  border-radius: 26px;
  box-shadow: 0 20px 80px #8f516d33;
}
dialog::backdrop { background: #78506455; }
@media (max-width: 760px) {
  .site-header { width: 92%; margin-top: 14px; padding: 14px 16px; border-radius: 23px; gap: 9px; }
  .site-header .brand { font-size: 22px; }
  .site-header .brand img { width: 26px; height: 26px; margin-right: 7px; }
  .header-link, .menu-toggle { padding: 6px 9px; font-size: 10px; }
  .hero { min-height: 0; padding-top: 42px; }
  .hero h1 { letter-spacing: -2.7px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .heart-sticker { top: 17%; left: 8%; width: 39px; height: 39px; }
  .formula { padding: 20px 12px; gap: 18px 9px; }
  .formula-result { font-size: 14px; }
  .community-section { padding-top: 45px; padding-bottom: 52px; }
  .community-small-star { top: 17%; right: 7%; }
}

/* Preserve the original brand palette; cuteness comes from shapes and details. */
:root {
  color-scheme: dark;
  --background: #181214;
  --surface: #21191c;
  --text: #f6eee7;
  --muted: #c1aeb4;
  --pink: #e367a2;
  --pink-light: #f4a8cd;
  --brown: #8f574d;
  --amber: #de9f50;
  --line: #8f574d66;
}
body { background-image: radial-gradient(#de9f501a .8px, transparent .8px); }
::selection { background: var(--pink); color: #181214; }
.site-header { background: #21191cf5; box-shadow: 0 5px 0 #8f574d55; }
.brand, .site-header nav a { color: var(--text); }
.site-header nav a:hover, .text-link:hover { color: var(--pink-light); }
.header-link, .menu-toggle {
  background: #8f574d33;
  border-color: var(--brown);
  color: var(--text);
}
.italic-word, .serif-accent { color: var(--pink); }
.hero .eyebrow { background: #e367a215; border-color: #e367a255; }
.title-spark { color: var(--amber); }
.button-primary {
  background: var(--pink);
  color: #24131b;
  border-color: var(--pink);
  box-shadow: 0 4px 0 var(--brown);
}
.button-primary:hover { background: var(--pink-light); }
.button-primary:active { box-shadow: 0 2px 0 var(--brown); }
.hero-art { background: radial-gradient(ellipse, #e367a225 0%, #de9f5010 52%, transparent 72%); }
.art-orbit { border-color: #de9f5066; }
.chemical-card {
  background: var(--brown);
  border-color: #de9f5080;
  box-shadow: 10px 13px 0 #de9f5033, 0 22px 55px #0004;
}
.chemical-card::before { background: var(--amber); border-color: var(--amber); }
.chemical-top, .chemical-name, .chemical-bottom { color: #fff8f2; }
.chemical-bottom { border-color: #de9f5080; }
.avatar-art { filter: none; }
.art-label { background: var(--surface); color: var(--text); border-color: var(--brown); box-shadow: 0 4px 0 #8f574d55; }
.label-dot, .stream-art svg circle { fill: var(--amber); stroke: var(--amber); background: var(--amber); }
.star-one, .ticker span { color: var(--amber); }
.star-two, .star-three, .heart-sticker { color: var(--pink); }
.heart-sticker { filter: drop-shadow(2px 3px 0 var(--brown)); }
.ticker { background: var(--brown); border-color: var(--amber); color: #fff8f2; }
.pill-row span { background: #e367a21a; border-color: #e367a255; color: var(--pink-light); }
.formula { background: var(--surface); border-color: var(--brown); box-shadow: 0 4px 0 #8f574d44; }
.formula-result { color: var(--pink-light); }
.stream-card, .schedule-block, .replay-block { border-color: var(--brown); box-shadow: 0 5px 0 #8f574d55; }
.stream-card { background: #e367a21f; }
.stream-card:hover { border-color: var(--pink); }
.stream-card-top, .small-tag, .corner-arrow { color: var(--pink-light); }
.stream-art { background: radial-gradient(ellipse, #de9f501a, transparent 70%); }
.stream-art > span { color: var(--text); }
.stream-art svg { stroke: #e367a277; }
.stream-card-bottom { background: var(--surface); border-color: var(--brown); }
.round-arrow { background: #e367a21a; color: var(--pink-light); border-color: var(--pink); }
.schedule-block { background: var(--surface); }
.replay-block { background: #de9f5015; border-color: #de9f5080; }
.replay-block:hover { background: #de9f5025; }
.replay-icon { background: #de9f5033; color: var(--amber); }
.community-section { background: var(--amber); color: #382118; border-color: var(--brown); }
.community-content .eyebrow, .community-content > p:not(.eyebrow) { color: #543124; }
.community-content .serif-accent { color: #643a31; }
.community-decoration { color: #8f574d22; }
.community-small-star { color: var(--brown); }
.button-dark { background: var(--brown); border-color: #643a31; color: #fff8f2; box-shadow: 0 4px 0 #643a31; }
.button-dark:hover { background: #74463e; }
.social-links a { color: #543124; border-color: #8f574d99; }
.social-links a:hover { border-color: #543124; }
.faq-list details, .faq-list details:first-child { background: var(--surface); border-color: var(--brown); }
.faq-list details[open] { background: #e367a215; }
summary { color: var(--text); }
.footer-top, .footer-bottom { border-color: var(--brown); }
dialog { background: var(--surface); border-color: var(--pink); box-shadow: 0 20px 80px #0006; }
dialog::backdrop { background: #181214aa; }
@media (max-width: 760px) { .title-spark { display: none; } }