/* About page palette inspired by the reference site's bright cards and layered surfaces. */
.type-about #content-inner {
  max-width: 1240px;
  --about-card: transparent;
  --about-border: rgba(66, 90, 239, .34);
  --about-text: #ffffff;
  --about-muted: rgba(255, 255, 255, .84);
  --about-blue: #425aef;
  --about-green: #57bd6a;
  --about-shadow: 0 8px 22px rgba(44, 45, 48, .08);
}
[data-theme="dark"] .type-about #content-inner {
  --about-card: #1b1c20; --about-border: #3d3d3f;
  --about-text: #f7f7fa; --about-muted: #d2d3de; --about-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}
#body-wrap.type-about { background: transparent; }
.type-about #content-inner { background: transparent; }
#about-me { width: 100%; min-width: 0; color: var(--about-text); }
#about-me .about-heading { padding: 18px 4px 28px; }
#about-me .about-heading h1 { margin: 8px 0; font-size: clamp(28px, 4vw, 44px); color: inherit; letter-spacing: -.03em; }
#about-me .about-heading p { margin: 0; color: var(--about-muted); }
#about-me .about-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; opacity: .9; }
#about-me .about-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
#about-me .about-card { position: relative; min-width: 0; overflow: hidden; grid-column: span 3; padding: 32px; border: 3px solid var(--about-border); border-radius: 26px; background: var(--about-card); color: var(--about-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), var(--about-shadow); }
#about-me h2 { margin: 14px 0; color: inherit; font-size: clamp(23px, 2.6vw, 32px); line-height: 1.4; letter-spacing: -.025em; }
#about-me p { line-height: 1.9; margin: 12px 0; color: var(--about-muted); opacity: 1; }
#about-me .about-intro { grid-column: span 4; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #fff; border-color: transparent; background: linear-gradient(120deg, #5b27ff 0%, #425aef 48%, #00d4ff 100%); background-size: 200% 200%; }
#about-me .about-intro h2 { font-size: clamp(28px, 3.2vw, 40px); }
#about-me .about-intro p, #about-me .about-games p, #about-me .about-films p, #about-me .about-music p, #about-me .about-galaxy p { color: inherit; opacity: .86; }
#about-me .about-avatar { width: 144px; height: 144px; flex-shrink: 0; object-fit: cover; border-radius: 50%; border: 5px solid rgba(255,255,255,.28); box-shadow: 0 10px 30px rgba(22, 30, 100, .22); }
#about-me .about-purpose { grid-column: span 2; border-color: rgba(66, 90, 239, .48); }
#about-me .about-purpose,
#about-me .about-personality,
#about-me .about-tools,
#about-me .about-story {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.045) 32%, rgba(255,255,255,.025));
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  outline: 1px solid rgba(255,255,255,.12);
}
#about-me .about-purpose::before,
#about-me .about-personality::before,
#about-me .about-tools::before,
#about-me .about-story::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  pointer-events: none;
}
#about-me .about-purpose h2 { font-size: 26px; color: #fff; }
#about-me .about-tags, #about-me .about-tool-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
#about-me .about-tags span { padding: 4px 12px; border: 1px solid currentColor; border-radius: 30px; font-size: 12px; }
#about-me .about-personality { grid-column: span 2; border-color: rgba(87, 189, 106, .52); }
#about-me .about-personality .about-type { color: #57bd6a; }
#about-me .about-type { display: block; margin-top: 18px; font: 800 clamp(54px, 6vw, 80px)/1.1 sans-serif; letter-spacing: -.05em; }
#about-me .about-tools { grid-column: span 4; }
#about-me .about-tool-list { margin-bottom: 22px; }
#about-me .about-tool-list span { padding: 10px 18px; border: 1px solid rgba(66, 90, 239, .32); border-radius: 12px; background: rgba(66, 90, 239, .09); color: var(--about-text); font-weight: 700; box-shadow: 0 3px 10px rgba(66,90,239,.08); }
[data-theme="dark"] #about-me .about-tool-list span { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
#about-me .about-link { display: inline-block; margin-top: 14px; color: #fff; font-size: 14px; font-weight: 700; }
#about-me .about-intro .about-link, #about-me .about-games .about-link { color: #fff; }
#about-me a.about-card { display: flex; flex-direction: column; text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
#about-me a.about-card .about-link { margin-top: auto; padding-top: 18px; }
#about-me a.about-card:hover { transform: translateY(-4px); border-color: #425aef; box-shadow: 0 12px 30px rgba(66, 90, 239, .16); }
#about-me a:focus-visible { outline: 3px solid #425aef; outline-offset: 4px; }
#about-me .about-games { grid-column: span 4; grid-row: span 2; min-height: 340px; color: #fff; border-color: transparent; background: radial-gradient(circle at 78% 18%, rgba(0, 212, 255, .34), transparent 34%), linear-gradient(135deg, #11152b 0%, #123b4a 52%, #0d5d5a 100%); }
#about-me .about-games h2 { font-size: clamp(28px, 3.5vw, 42px); position: relative; z-index: 1; }
#about-me .about-decoration { position: absolute; right: 26px; bottom: 25px; font: 170px/1 sans-serif; opacity: .13; }
#about-me .about-films { grid-column: span 2; color: #fff; border-color: transparent; background: linear-gradient(120deg, #ff27e8 0%, #f45f7f 48%, #ff8000 100%); }
#about-me .about-music { grid-column: span 2; color: #fff; border-color: transparent; background: linear-gradient(145deg, #2436a6 0%, #425aef 48%, #7a60d2 100%); }
#about-me .about-films h2, #about-me .about-music h2 { font-size: 24px; }
#about-me .about-story, #about-me .about-galaxy { grid-column: 1 / -1; }
#about-me .about-story { border-color: rgba(66, 90, 239, .38); }
#about-me .about-story h2 { color: #fff; }
#about-me .about-story p { max-width: 850px; color: var(--about-muted); }
#about-me .about-galaxy { background: linear-gradient(145deg, #1b1c20 0%, #25283a 100%); color: #f7f7fa; border-color: transparent; }
#about-me .about-video { overflow: hidden; margin-top: 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: #0f1114; box-shadow: 0 18px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .3s ease, box-shadow .3s ease; }
#about-me .about-video:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(66,90,239,.2); }
#about-me .about-video-toolbar { display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px; color: rgba(255,255,255,.72); background: rgba(27,28,32,.9); border-bottom: 1px solid rgba(255,255,255,.1); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
#about-me .about-video-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #ff5f57; box-shadow: 0 0 10px rgba(255,95,87,.28); }
#about-me .about-video-dot:nth-child(2) { background: #febc2e; box-shadow: 0 0 10px rgba(254,188,46,.28); }
#about-me .about-video-dot:nth-child(3) { background: #28c840; box-shadow: 0 0 10px rgba(40,200,64,.28); }
#about-me .about-video-title { margin-left: 7px; font-size: 13px; font-weight: 700; letter-spacing: .05em; }
#about-me .about-video-source { margin-left: auto; padding: 4px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.58); font-size: 10px; font-weight: 700; letter-spacing: .1em; line-height: 1; }
#about-me .aspect-ratio { position: relative; height: auto; padding: 0; aspect-ratio: 16 / 9; background: #000; }
#about-me .aspect-ratio iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
  #about-me .about-intro, #about-me .about-tools, #about-me .about-games { grid-column: 1 / -1; }
  #about-me .about-purpose, #about-me .about-personality, #about-me .about-films, #about-me .about-music { grid-column: span 3; }
  #about-me .about-games { grid-row: auto; }
}
@media (max-width: 540px) {
  #about-me .about-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #about-me .about-grid > .about-card { grid-column: 1; padding: 24px; border-radius: 20px; }
  #about-me .about-intro { flex-direction: column-reverse; align-items: flex-start; }
  #about-me .about-avatar { width: 90px; height: 90px; }
  #about-me .about-video { border-radius: 14px; }
  #about-me .about-video-toolbar { height: 40px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { #about-me a.about-card { transition: none; } }