:root {
  color-scheme:dark;
  --black:#070708;
  --surface:#111114;
  --surface-2:#18181d;
  --pink:#ff4fa3;
  --pink-hot:#ff2f92;
  --pink-soft:#ff9acb;
  --purple:#7a4cff;
  --white:#f7f7fa;
  --muted:#aaa6b2;
  --line:rgba(255,255,255,.1);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--white);
  background:var(--black);
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  padding:44px 20px 24px;
  background:radial-gradient(ellipse at 12% 15%,#39112575,transparent 45%),radial-gradient(ellipse at 90% 42%,#24163f60,transparent 45%),#070708;
  background-attachment:fixed;
}

a {
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

button {
  font:inherit;
}

svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}

.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

a,button {
  touch-action:manipulation;
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--pink-soft);
  outline-offset:4px;
}

a {
  transition:border-color .2s,background-color .2s,box-shadow .2s,transform .2s;
}

a:hover {
  border-color:#ff4fa380;
}

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

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:20;
  transform:translateY(-150%);
  padding:12px 18px;
  background:var(--pink-soft);
  color:var(--black);
  border:0;
  border-radius:8px;
}

.skip-link:focus {
  transform:none;
}

.page-shell {
  max-width:500px;
  margin:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 30px 100px #0009,0 0 70px #ff4fa308;
}

.page-shell:focus {
  outline:none;
}

.media {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.hero {
  aspect-ratio:4/5;
  background:#151019;
  border-radius:31px 31px 0 0;
}

.hero:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(0deg,#111114 1%,#111114e8 14%,#0b080e00 65%,#08070a30);
  pointer-events:none;
}

.hero-top {
  position:absolute;
  z-index:3;
  top:26px;
  left:26px;
  right:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.eyebrow {
  font-size:9px;
  font-weight:700;
  letter-spacing:1.8px;
  line-height:1.6;
}

.pink-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--pink);
  border-radius:50%;
  margin-right:7px;
  box-shadow:0 0 12px #ff4fa380;
}

.edition {
  font-size:11px;
  color:var(--pink-soft);
}

.hero-art {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 70% 26%,#84244860,transparent 58%),linear-gradient(145deg,#16131d,#23151f 55%,#0b0b10);
}

.hero-art:after,.game-art:after {
  content:"";
  position:absolute;
  inset:0;
  opacity:.2;
  background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(#000,transparent);
}

.orbit {
  position:absolute;
  border:1px solid #d773a72e;
  border-radius:50%;
  width:330px;
  height:330px;
  left:50%;
  top:40%;
  transform:translate(-50%,-50%);
}

.orbit.outer {
  width:390px;
  height:390px;
  border-style:dashed;
  border-color:#d773a71c;
}

.eclipse {
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  left:50%;
  top:18%;
  transform:translateX(-50%);
  background:#ff94c0;
  box-shadow:0 0 80px #ed579a33,inset -36px 0 40px #9e3c7650;
}

.eclipse:after {
  content:"";
  position:absolute;
  inset:-6px -1px 16px 32px;
  border-radius:50%;
  background:#24131f;
}

.spark {
  position:absolute;
  color:#ffa0cc;
}

.spark.one {
  font-size:64px;
  right:14%;
  top:19%;
}

.spark.two {
  font-size:26px;
  left:17%;
  top:43%;
}

.art-word {
  position:absolute;
  left:11%;
  top:36%;
  font-size:68px;
  font-weight:850;
  letter-spacing:-5px;
  line-height:.9;
  color:#ffb8d6bd;
  transform:rotate(-7deg);
}

.art-word i {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:65px;
  letter-spacing:-4px;
  color:#ff9acb90;
}

.hero-copy {
  position:absolute;
  z-index:3;
  bottom:22px;
  left:26px;
  right:26px;
}

.pink {
  color:var(--pink-soft);
}

h1 {
  font-size:49px;
  letter-spacing:-2.4px;
  line-height:1.06;
  margin:8px 0 7px;
  font-weight:850;
}

h1>span {
  font-size:36px;
  color:var(--pink);
  display:inline-block;
  margin-left:9px;
  vertical-align:top;
}

.handle {
  color:var(--muted);
  font-size:13px;
  margin:0;
}

.tagline {
  margin:15px 0 0;
  font-size:13px;
  color:#e2dce6;
}

.tagline span {
  color:var(--pink);
  margin-left:4px;
}

.asset-caption {
  position:absolute;
  z-index:3;
  bottom:12px;
  left:16px;
  font-size:9px;
  font-weight:650;
  letter-spacing:1.3px;
  color:#ddd0e0;
}

.hero>.asset-caption {
  bottom:auto;
  top:61%;
  left:26px;
  font-size:9px;
  color:#c8abbc;
}

.page-body {
  padding:0 24px;
}

.social-icons {
  display:flex;
  gap:11px;
  padding:12px 0 19px;
}

.social-icons a {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:50%;
}

.social-icons svg {
  width:20px;
  height:20px;
}

.social-icons a:hover {
  color:var(--pink-soft);
  background:#2a1724;
  box-shadow:0 0 18px #ff4fa31c;
  transform:translateY(-2px);
}

.personality {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  list-style:none;
  padding:0;
  margin:0;
}

.personality li {
  padding:7px 10px;
  border:1px solid #ff4fa32b;
  border-radius:999px;
  font-size:10px;
  color:#e8c5d7;
  background:#ff4fa306;
}

.personality li:hover {
  border-color:#ff4fa370;
}

.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:23px 0 25px;
}

.intro p {
  font-size:19px;
  letter-spacing:-.5px;
  line-height:1.45;
  margin:0;
}

.intro em {
  font-family:Georgia,serif;
  color:var(--pink-soft);
  font-size:22px;
  font-weight:400;
}

.intro>span {
  font-size:38px;
  color:var(--pink);
  padding-right:6px;
}

.primary-card {
  display:block;
  aspect-ratio:1.13;
  border:1px solid #ff4fa345;
  border-radius:24px;
  background:#25131f;
  box-shadow:0 14px 30px #0004,0 0 25px #ff4fa30a;
}

.primary-card:after,.trainer-card:after,.look:after,.gallery-tile:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(0deg,#0c0810eb,transparent 75%);
}

.portal-art {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 70% 30%,#ec348253,transparent 65%),repeating-linear-gradient(135deg,#ff4fa306 0 1px,transparent 1px 18px),#281020;
}

.portal-art>span {
  position:absolute;
  right:24px;
  top:35px;
  font-size:150px;
  line-height:1;
  color:#ff7ebf80;
  text-shadow:0 0 40px #ff2f9233;
  transform:rotate(15deg);
}

.portal-art i {
  position:absolute;
  left:36px;
  top:65px;
  width:55%;
  height:95%;
  border:1px solid #ff85bd55;
  border-radius:120px 120px 0 0;
  transform:rotate(-18deg);
  box-shadow:0 0 0 12px #ff4fa308,0 0 0 25px #ff4fa306;
}

.portal-art b {
  position:absolute;
  left:23px;
  top:78px;
  font-size:41px;
  line-height:1.06;
  letter-spacing:-1.8px;
  color:#ffbfd938;
  transform:rotate(-8deg);
}

.card-badge {
  position:absolute;
  top:18px;
  left:18px;
  z-index:3;
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--pink-soft);
  padding:7px 9px;
  border:1px solid #ff9acb40;
  border-radius:5px;
  background:#120c14a0;
}

.primary-card>.asset-caption {
  bottom:91px;
  font-size:9px;
  color:#b99aaa;
}

.card-bottom {
  position:absolute;
  z-index:3;
  bottom:22px;
  left:20px;
  right:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.card-bottom .eyebrow {
  color:#d5b5c8;
  font-size:9px;
  letter-spacing:1.3px;
}

.card-bottom strong {
  display:block;
  font-size:26px;
  letter-spacing:-1px;
  margin-top:5px;
}

.arrow-circle {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border-radius:50%;
  background:var(--pink);
  color:#160811;
}

.primary-card:hover {
  box-shadow:0 14px 30px #0004,0 0 28px #ff4fa326;
}

.section {
  margin-top:38px;
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:17px;
}

.section-heading .eyebrow {
  color:var(--muted);
  font-size:9px;
  letter-spacing:1.5px;
}

.section-heading h2 {
  font-size:24px;
  letter-spacing:-1px;
  line-height:1.2;
  margin:5px 0 0;
  font-weight:800;
}

.section-heading h2>span {
  font-size:22px;
  color:var(--pink);
  margin-left:6px;
}

.tiny-badge {
  border:1px solid #ff4fa332;
  color:var(--pink-soft);
  border-radius:5px;
  padding:6px;
  font-size:9px;
  letter-spacing:1px;
  white-space:nowrap;
}

.heading-icon {
  color:var(--pink-soft);
  width:27px;
  height:27px;
}

.trainer-card {
  display:block;
  aspect-ratio:1.55;
  border-radius:20px;
  border:1px solid #89729b3b;
  background:#1b1528;
}

.trainer-label {
  position:absolute;
  z-index:3;
  left:18px;
  top:16px;
  color:#d4c5ea;
  font-size:9px;
}

.game-art {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 60% 30%,#58357a88,transparent 65%),#1b1528;
}

.game-ring {
  position:absolute;
  top:20px;
  right:21%;
  width:140px;
  height:140px;
  border:1px solid #ff9acb33;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:0 0 0 10px #ff9acb04,0 0 0 22px #ff9acb05;
  transform:rotate(-12deg);
}

.game-ring svg {
  width:85px;
  height:85px;
  stroke-width:1;
  color:#ffa2d1;
}

.game-art>span {
  position:absolute;
  top:37px;
  right:32px;
  font-size:20px;
  letter-spacing:5px;
  color:#c2a0e7;
}

.trainer-bottom {
  position:absolute;
  z-index:3;
  bottom:20px;
  left:18px;
  right:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.trainer-bottom strong {
  font-size:23px;
  letter-spacing:-.7px;
}

.trainer-bottom small {
  display:block;
  color:#c1b3cf;
  font-size:11px;
  margin-top:6px;
}

.trainer-bottom>svg {
  color:var(--pink-soft);
}

.trainer-card>.asset-caption {
  bottom:85px;
  font-size:9px;
}

.hud {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  font-size:9px;
  letter-spacing:1.1px;
  color:#a99ab1;
}

.hud i {
  height:3px;
  flex:1;
  background:linear-gradient(90deg,#ff4fa3 77%,#332633 77%);
  border-radius:4px;
}

.hud span:last-child {
  color:var(--pink-soft);
}

.cosplay-grid,.social-grid,.shelf-grid,.gallery-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.look {
  display:block;
  aspect-ratio:3/4;
  border:1px solid var(--line);
  border-radius:18px;
}

.art-rose {
  background:radial-gradient(ellipse at 40% 30%,#77304b88,transparent 65%),#22151e;
}

.art-violet {
  background:radial-gradient(ellipse at 65% 30%,#62448688,transparent 65%),#1d1729;
}

.art-plum {
  background:radial-gradient(ellipse at 30% 25%,#7b396b88,transparent 65%),#261c2d;
}

.art-pink {
  background:radial-gradient(ellipse at 75% 25%,#9e446f88,transparent 65%),#341e2c;
}

.look-art {
  position:absolute;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%) rotate(-12deg);
  font-family:Georgia,serif;
  font-size:108px;
  color:#ffb1d255;
  line-height:1;
}

.look:before {
  content:"";
  position:absolute;
  inset:28px 20px;
  border:1px solid #ff9acb18;
  border-radius:90px 90px 12px 12px;
  transform:rotate(-8deg);
}

.look-number {
  position:absolute;
  z-index:3;
  top:13px;
  left:14px;
  color:#e6c6d5;
  font-size:9px;
  letter-spacing:1px;
}

.look-caption {
  position:absolute;
  z-index:3;
  bottom:18px;
  left:13px;
  right:25px;
}

.look-caption strong {
  display:block;
  font-size:16px;
  letter-spacing:-.3px;
}

.look-caption small {
  display:block;
  font-size:9px;
  letter-spacing:1px;
  color:#baa7b8;
  margin-top:7px;
}

.look>svg {
  position:absolute;
  z-index:3;
  right:11px;
  bottom:20px;
  width:14px;
  height:14px;
  color:#ffafd4;
}

.social-card {
  position:relative;
  padding:17px 14px 18px;
  min-height:137px;
  border-radius:18px;
  border:1px solid var(--line);
  background:radial-gradient(ellipse at 100% 0%,#ff4fa30a,transparent 80%),var(--surface-2);
}

.social-card>svg:first-child {
  width:24px;
  height:24px;
  color:var(--pink-soft);
  margin-bottom:22px;
}

.social-card .social-arrow {
  position:absolute;
  right:13px;
  top:17px;
  width:14px;
  height:14px;
  color:#aaa6b2;
}

.social-card strong {
  display:block;
  font-size:15px;
}

.social-card small {
  display:block;
  font-size:10px;
  color:var(--muted);
  line-height:1.5;
  margin-top:6px;
}

.shelf-mark {
  font-size:30px;
  color:var(--pink-soft);
}

.shelf-grid {
  gap:0 16px;
}

.shelf-grid a {
  min-height:60px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid var(--line);
  font-size:12px;
}

.shelf-grid a>span {
  font-size:22px;
  width:23px;
  color:var(--pink-soft);
  text-align:center;
}

.shelf-grid svg {
  margin-left:auto;
  width:13px;
  height:13px;
  color:var(--muted);
}

.shelf-grid a:hover {
  color:var(--pink-soft);
}

.gallery-grid {
  gap:10px;
}

.gallery-tile {
  display:block;
  aspect-ratio:1;
  border:1px solid var(--line);
  border-radius:18px;
}

.gallery-wide {
  grid-column:1/-1;
  aspect-ratio:1.45;
}

.gallery-art {
  position:absolute;
  top:17%;
  left:12%;
  font-size:57px;
  letter-spacing:-3px;
  line-height:.95;
  font-weight:800;
  transform:rotate(-6deg);
  color:#f1a8cc8c;
}

.gallery-art i {
  font-family:Georgia,serif;
  font-weight:400;
  color:#d5b2e7;
}

.gallery-wide:before {
  content:"✧";
  position:absolute;
  font-size:115px;
  right:25px;
  top:15px;
  color:#ff9acb48;
}

.gallery-wide>svg {
  position:absolute;
  z-index:3;
  bottom:16px;
  right:16px;
  width:19px;
  height:19px;
  color:var(--pink-soft);
}

.gallery-symbol {
  position:absolute;
  top:45%;
  left:50%;
  transform:translate(-50%,-50%) rotate(12deg);
  font-size:95px;
  color:#ffb1d255;
}

.gallery-tile .asset-caption {
  font-size:9px;
  left:12px;
}

.secondary-cta {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:36px;
  padding:20px 0;
  border-top:1px solid #ff4fa32e;
  border-bottom:1px solid #ff4fa32e;
}

.secondary-cta>span {
  color:var(--pink);
  font-size:27px;
}

.secondary-cta p {
  font-size:17px;
  letter-spacing:-.4px;
  margin:0;
}

.secondary-cta small {
  display:block;
  font-size:10px;
  color:var(--muted);
  letter-spacing:0;
  margin-top:5px;
}

.secondary-cta a {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:650;
  background:var(--pink-soft);
  color:#20101a;
  min-height:44px;
  padding:0 12px;
  border-radius:10px;
  white-space:nowrap;
}

.secondary-cta svg {
  width:14px;
  height:14px;
}

footer {
  text-align:center;
  padding:36px 0 25px;
}

.footer-name {
  font-size:13px;
  letter-spacing:2px;
  font-weight:800;
}

.footer-name span {
  color:var(--pink);
  margin-left:6px;
}

footer p {
  color:var(--muted);
  font-family:Georgia,serif;
  font-style:italic;
  font-size:13px;
  margin:9px 0 18px;
}

footer nav {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:13px;
  color:var(--muted);
  font-size:10px;
}

footer nav a {
  display:grid;
  place-items:center;
  min-height:44px;
  min-width:44px;
}

footer nav a:hover {
  color:var(--pink-soft);
}

.footer-end {
  display:block;
  font-size:12px;
  color:#ff4fa366;
  margin-top:18px;
}

.toast {
  position:fixed;
  z-index:30;
  left:50%;
  bottom:24px;
  transform:translate(-50%,15px);
  width:max-content;
  max-width:calc(100% - 32px);
  padding:13px 18px;
  border:1px solid #ff4fa360;
  border-radius:12px;
  background:#241922f5;
  color:#ffe4f1;
  font-size:12px;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  box-shadow:0 8px 40px #0008;
}

.toast.is-visible {
  opacity:1;
  transform:translate(-50%,0);
}

/* Images stay hidden until loaded; invalid files leave the styled placeholder visible. */
.media-asset {
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  object-fit:cover;
  object-position:center 28%;
  background:#171019;
}

.media-asset.is-loaded {
  opacity:1;
}

.hero .media-asset,.primary-card .media-asset {
  object-fit:contain;
  object-position:center;
}

.has-media>.hero-art,.has-media>.portal-art,.has-media>.game-art,.has-media>.look-art,.has-media>.gallery-art,.has-media>.gallery-symbol,.has-media>.asset-caption {
  display:none;
}

.has-media:before {
  display:none;
}

.has-media .look-caption small {
  display:none;
}

@media(min-width:800px) {
  body {
    padding-top:48px;
    padding-bottom:48px;
  }
  .page-shell {
    box-shadow:0 35px 120px #000b,0 0 100px #ff4fa30a;
  }
}

@media(max-width:520px) {
  body {
    padding:0;
    background:var(--surface);
  }
  .page-shell {
    border:0;
    border-radius:0;
    max-width:500px;
  }
  .hero {
    border-radius:0;
  }
  .page-body {
    padding-left:22px;
    padding-right:22px;
  }
}

@media(max-width:380px) {
  .page-body {
    padding-left:18px;
    padding-right:18px;
  }
  .hero-copy,.hero-top {
    left:22px;
    right:22px;
  }
  h1 {
    font-size:43px;
  }
  .card-bottom strong {
    font-size:23px;
  }
  .section-heading h2 {
    font-size:22px;
  }
  .tiny-badge {
    font-size:9px;
  }
  .social-grid,.cosplay-grid {
    gap:10px;
  }
  .secondary-cta {
    gap:8px;
  }
  .secondary-cta small {
    font-size:9px;
  }
  .secondary-cta a {
    padding:0 10px;
  }
  .art-word {
    font-size:61px;
  }
  .art-word i {
    font-size:57px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}