@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');

:root { --black: #08050d; --white: #f7f1ff; --pink: #a855f7; --soft-pink: #35135a; --gray: #a99bb6; --line: rgba(247, 241, 255, .16); --mono: 'DM Mono', monospace; --sans: 'Archivo', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--white); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
.site-shell { max-width: 1440px; min-height: 100vh; margin: 0 auto; overflow: hidden; background: var(--black); }
.topbar { height: 82px; display: flex; align-items: center; padding: 0 6vw; border-bottom: 1px solid var(--line); }
.brand { font-size: 1.05rem; font-weight: 700; letter-spacing: -.05em; }.brand-mark { display: inline-grid; place-items: center; width: 27px; height: 27px; margin-right: 7px; color: var(--black); background: var(--pink); border-radius: 50%; }
.nav { display: flex; gap: 31px; margin-left: auto; margin-right: 33px; font: .67rem var(--mono); text-transform: uppercase; color: var(--gray); }.nav a:hover, .social-links a:hover { color: var(--pink); }
.profile-hero { --line: rgba(247, 241, 255, .16); position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; align-items: center; min-height: 620px; padding: 82px 10vw 86px; color: var(--white); background: radial-gradient(circle at 18% 38%, rgba(168, 85, 247, .3), transparent 30%), var(--black); }
.profile-hero::before { content: 'BIO // 2026'; position: absolute; top: 28px; right: 7vw; color: var(--gray); font: .62rem var(--mono); letter-spacing: .11em; }.profile-visual { position: relative; height: 415px; border: 1px solid var(--line); background: var(--white); color: var(--black); transform: rotate(-3deg); box-shadow: 14px 14px 0 var(--pink); }.profile-visual::after { content: ''; position: absolute; inset: 13px; border: 1px solid var(--black); pointer-events: none; }.visual-tag { position: absolute; top: 28px; left: 30px; z-index: 1; font: .67rem var(--mono); }.visual-caption { position: absolute; right: 27px; bottom: 25px; z-index: 1; font: .65rem var(--mono); line-height: 1.5; text-align: right; text-transform: uppercase; }.avatar-shape { position: absolute; width: 63%; height: 63%; top: 19%; left: 18%; display: grid; place-items: center; border: 2px solid var(--black); border-radius: 48% 52% 45% 55%; background: var(--pink); transform: rotate(13deg); }.avatar-shape::before, .avatar-shape::after { content: ''; position: absolute; width: 105%; height: 25%; border: 1px solid var(--black); border-radius: 50%; }.avatar-shape::before { transform: rotate(48deg); }.avatar-shape::after { transform: rotate(-48deg); }.avatar-shape span { position: relative; z-index: 2; font-size: 8.5rem; font-weight: 700; line-height: .65; letter-spacing: -.15em; transform: rotate(-13deg) skew(-9deg); }.cross { position: absolute; font-size: 1.6rem; font-weight: 700; }.cross-one { top: 67px; right: 44px; }.cross-two { bottom: 68px; left: 42px; }
.profile-info { animation: rise .7s ease both; }.eyebrow, .section-kicker, .handle, .box-label, .level, .footer { font: .67rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--gray); }.status-dot { width: 8px; height: 8px; background: var(--pink); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 47, 159, .15); }.profile-info h1 { margin: 26px 0 15px; font-size: clamp(5rem, 10vw, 10.5rem); line-height: .78; letter-spacing: -.12em; }.profile-info h1 em, h2 em { color: var(--pink); font-style: normal; }.handle { color: var(--pink); }.handle span { color: var(--gray); }.hero-text { max-width: 390px; margin: 31px 0 0; color: #756d76; font-size: 1rem; line-height: 1.55; }.quick-stats { display: flex; gap: 27px; margin-top: 31px; color: var(--gray); font: .67rem var(--mono); text-transform: uppercase; }.quick-stats b { display: block; margin-bottom: 5px; color: var(--black); font-size: 1rem; }
.section-grid { display: grid; grid-template-columns: 24% 76%; padding: 115px 10vw; color: var(--black); border-bottom: 1px solid var(--line); }.section-kicker { margin: 4px 0; color: var(--gray); }.dashboard-content h2, .interest-content h2, .socials h2 { margin: 0; font-size: clamp(3rem, 6vw, 6.7rem); line-height: .83; letter-spacing: -.1em; }.dashboard-content h2 span { color: var(--gray); }.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 64px; }.bio-box { min-height: 190px; padding: 24px; border: 1px solid var(--line); background: #fff5fa; color: var(--black); }.bio-box:first-child { background: var(--soft-pink); color: var(--black); }.box-label { opacity: .65; }.bio-box p { max-width: 290px; margin: 43px 0 0; font-size: .9rem; line-height: 1.55; }
.interests { padding-top: 95px; padding-bottom: 120px; }.interest-heading { display: flex; justify-content: space-between; }.level { color: var(--pink); }.interest-content h2 { margin-bottom: 65px; }.interest-list { border-top: 1px solid var(--line); }.interest-row { display: grid; grid-template-columns: 7% 28% 1fr 6%; align-items: center; min-height: 90px; border-bottom: 1px solid var(--line); transition: padding .25s ease, color .25s ease; }.interest-row:hover { padding-left: 12px; color: var(--pink); }.interest-icon { font-size: 1.3rem; }.interest-name { font-size: 1.15rem; font-weight: 700; }.interest-detail, .interest-row > span:last-child { color: var(--gray); font: .68rem var(--mono); }.interest-row > span:last-child { justify-self: end; }
.socials { padding: 102px 10vw 30px; background: var(--white); color: var(--black); }.socials .section-kicker { color: #777177; }.socials-main { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; align-items: end; padding: 105px 0 125px; }.socials h2 { font-size: clamp(3.8rem, 7vw, 8rem); }.social-links { border-top: 1px solid rgba(17, 16, 18, .25); }.social-links a { display: grid; grid-template-columns: 12% 1fr 10%; align-items: center; min-height: 61px; border-bottom: 1px solid rgba(17, 16, 18, .25); font: 1.05rem var(--mono); text-transform: lowercase; transition: color .2s ease, padding .2s ease; }.social-links a:hover { padding-left: 8px; }.social-links span { color: #9b969d; font-size: .62rem; }.social-links b { justify-self: end; color: var(--pink); font-size: 1.3rem; }.footer { display: grid; grid-template-columns: 1fr 1fr 1fr; padding-top: 23px; border-top: 1px solid rgba(17, 16, 18, .25); color: #777177; }.footer span:nth-child(2) { text-align: center; }.footer span:last-child { text-align: right; }.footer a:hover { color: var(--pink); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .topbar { height: 70px; padding: 0 6vw; }.nav { display: none; }.theme-toggle { margin-left: auto; }.profile-hero { display: block; padding: 58px 8vw 80px; }.profile-hero::before { top: 22px; right: 8vw; }.profile-visual { width: 85%; height: 345px; margin: 20px auto 74px; }.avatar-shape span { font-size: 6.5rem; }.profile-info h1 { font-size: clamp(5rem, 23vw, 8rem); }.quick-stats { gap: 18px; }.section-grid { display: block; padding: 78px 8vw; }.section-kicker { margin-bottom: 42px; }.dashboard-grid { display: block; margin-top: 45px; }.bio-box + .bio-box { margin-top: 12px; }.bio-box p { margin-top: 34px; }.interests { padding-top: 78px; }.interest-content h2 { margin-bottom: 46px; }.interest-row { grid-template-columns: 12% 1fr 8%; }.interest-detail { display: none; }.socials { padding: 78px 8vw 28px; }.socials-main { display: block; padding: 75px 0 100px; }.social-links { margin-top: 60px; }.footer { grid-template-columns: 1fr 1fr; gap: 15px; line-height: 1.5; }.footer span:nth-child(2) { display: none; }.footer span:last-child { text-align: right; } }

.profile-visual { overflow: hidden; }
.sakura-moon { position: absolute; top: 23%; left: 21%; width: 57%; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--black); border-radius: 50%; background: var(--soft-pink); box-shadow: 18px 18px 0 var(--pink); animation: moonPulse 4s ease-in-out infinite; }
.sakura-moon::before, .sakura-moon::after { content: ''; position: absolute; width: 135%; height: 1px; background: var(--black); transform: rotate(45deg); opacity: .45; }.sakura-moon::after { transform: rotate(-45deg); }.sakura-moon span { position: relative; z-index: 1; color: var(--pink); font-size: 3.5rem; }
.sakura-branch { position: absolute; right: 7%; bottom: 26%; color: var(--black); font-size: 8rem; transform: rotate(-35deg); opacity: .8; }
.petal { position: absolute; z-index: 2; width: 15px; height: 10px; border-radius: 100% 0 100% 0; background: var(--pink); animation: petalFloat 5s ease-in-out infinite; }.petal-a { top: 19%; left: 16%; }.petal-b { top: 34%; right: 17%; animation-delay: -1.8s; }.petal-c { bottom: 22%; left: 29%; animation-delay: -3s; }.petal-d { top: 14%; right: 31%; animation-delay: -2.5s; }.petal-e { bottom: 16%; right: 19%; animation-delay: -4s; }
.interest-row { width: 100%; padding: 0; border: 0; color: inherit; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }.interest-row:focus-visible { outline: 2px solid var(--pink); outline-offset: 5px; }
.interest-modal[hidden] { display: none; }.interest-modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(23, 19, 26, .48); backdrop-filter: blur(8px); animation: modalIn .25s ease both; }.interest-modal.is-closing { animation: modalOut .24s ease both; pointer-events: none; }.modal-window { position: relative; width: min(680px, 100%); min-height: 430px; padding: clamp(28px, 5vw, 58px); overflow: hidden; border: 2px solid var(--black); background: var(--white); box-shadow: 14px 14px 0 var(--pink); animation: modalRise .3s ease both; }.interest-modal.is-closing .modal-window { animation: modalFall .22s ease both; }.modal-window::after { content: '✦  ✦  ✦'; position: absolute; top: 27px; right: 76px; color: var(--pink); font-size: .82rem; letter-spacing: 7px; pointer-events: none; }.modal-close { position: absolute; z-index: 3; top: 19px; right: 19px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0 0 3px; border: 1px solid rgba(202, 157, 255, .6); border-radius: 50%; color: #eadbfa; background: #211332; box-shadow: 0 0 15px rgba(168, 85, 247, .16); font: 1.45rem/1 var(--sans); cursor: pointer; transition: transform .25s ease, color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; }.modal-close:hover { transform: rotate(90deg); color: #fff; border-color: #d7b5ff; background: #512878; box-shadow: 0 0 20px rgba(168, 85, 247, .45); }.modal-kicker { max-width: calc(100% - 118px); color: var(--gray); font: .68rem var(--mono); letter-spacing: .1em; }.modal-window h2 { max-width: 470px; margin: 48px 0 22px; font-size: clamp(3.4rem, 8vw, 6.5rem); line-height: .82; letter-spacing: -.1em; }.modal-copy { max-width: 450px; color: var(--gray); line-height: 1.6; }.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 45px; }.game-grid span { min-height: 100px; padding: 16px; border: 1px solid var(--black); background: var(--soft-pink); font-size: .72rem; font-weight: 800; }.game-grid span:nth-child(2) { background: #fff5fa; }.game-grid b { display: block; margin-top: 12px; color: var(--gray); font: .6rem var(--mono); font-weight: 400; }.playlist-list { margin-top: 38px; border-top: 1px solid var(--black); }.playlist-list a { display: grid; grid-template-columns: 12% 1fr auto; align-items: center; min-height: 55px; border-bottom: 1px solid var(--black); font-weight: 700; }.playlist-list span, .playlist-list b { color: var(--gray); font: .62rem var(--mono); }.playlist-list b { color: var(--pink); }.hobby-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 42px; }.hobby-tags span { padding: 13px 16px; border: 1px solid var(--black); border-radius: 999px; background: var(--soft-pink); font-size: .78rem; font-weight: 700; }.hobby-tags span:nth-child(2n) { background: #fff5fa; }
@keyframes petalFloat { 0%, 100% { transform: translate(0, 0) rotate(20deg); } 50% { transform: translate(14px, 19px) rotate(120deg); } } @keyframes moonPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } @keyframes modalIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalRise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes modalOut { to { opacity: 0; } } @keyframes modalFall { to { opacity: 0; transform: translateY(12px) scale(.97); } }
@media (max-width: 700px) { .sakura-moon { left: 19%; width: 61%; }.sakura-moon span { font-size: 2.5rem; }.sakura-branch { font-size: 6rem; }.modal-window { min-height: 0; }.modal-window h2 { margin-top: 54px; }.game-grid { grid-template-columns: 1fr; gap: 7px; }.game-grid span { min-height: auto; }.playlist-list a { grid-template-columns: 14% 1fr; gap: 10px; }.playlist-list b { grid-column: 2; }.interest-modal { padding: 16px; }.modal-close { top: 13px; right: 14px; } }

.anime-scene { position: relative; min-height: 415px; overflow: hidden; border: 1px solid rgba(186, 130, 255, .35); background: linear-gradient(180deg, #130b22 0%, #24123d 58%, #100916 100%); box-shadow: 14px 14px 0 #54258a; isolation: isolate; animation: sceneFloat 7s ease-in-out infinite; }
.anime-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .6; background-image: radial-gradient(1px 1px at 12% 20%, #fff 50%, transparent 100%), radial-gradient(2px 2px at 37% 12%, #d7b5ff 50%, transparent 100%), radial-gradient(1px 1px at 75% 18%, #fff 50%, transparent 100%), radial-gradient(1px 1px at 90% 41%, #e0caff 50%, transparent 100%), radial-gradient(1px 1px at 54% 31%, #fff 50%, transparent 100%); animation: starPulse 4s ease-in-out infinite alternate; }
.anime-scene::after { content: ''; position: absolute; z-index: 2; inset: auto 0 0; height: 35%; background: linear-gradient(0deg, #0a0710 0%, rgba(10, 7, 16, .75) 58%, transparent 100%); }
.scene-label, .scene-caption { position: absolute; z-index: 5; color: #f4eaff; font: .64rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }.scene-label { top: 23px; left: 25px; }.scene-caption { right: 25px; bottom: 20px; text-align: right; line-height: 1.65; }
.scene-moon { position: absolute; top: 13%; right: 18%; width: 104px; aspect-ratio: 1; border-radius: 50%; background: #e7d3ff; box-shadow: 0 0 30px #b873ff, 0 0 85px rgba(168, 85, 247, .6); animation: moonGlow 5s ease-in-out infinite; }.scene-moon::after { content: ''; position: absolute; top: -8px; right: -21px; width: 100%; height: 100%; border-radius: 50%; background: #211334; }
.scene-cloud { position: absolute; z-index: 1; width: 120px; height: 25px; border-radius: 50%; background: rgba(119, 71, 154, .4); filter: blur(12px); animation: cloudDrift 14s ease-in-out infinite alternate; }.cloud-one { top: 35%; left: 7%; }.cloud-two { top: 27%; right: 4%; animation-delay: -6s; }
.scene-torii { position: absolute; z-index: 1; bottom: 13%; left: 13%; width: 120px; height: 175px; border-left: 9px solid #a149db; border-right: 9px solid #a149db; filter: drop-shadow(0 0 9px rgba(183, 90, 255, .55)); }.scene-torii::before { content: ''; position: absolute; top: 12px; left: -24px; width: 150px; height: 13px; background: #c27bff; border-radius: 8px 8px 2px 2px; box-shadow: 0 8px 0 #7736a8; }.scene-torii::after { content: ''; position: absolute; top: 58px; left: -10px; width: 120px; height: 8px; background: #a149db; }.torii-back { left: auto; right: 13%; bottom: 18%; transform: scale(.68); opacity: .58; }
.scene-roof { position: absolute; z-index: 3; bottom: 0; width: 190px; height: 90px; background: #0a0710; }.scene-roof::before { content: ''; position: absolute; top: -27px; left: -17px; width: 225px; height: 35px; background: #0a0710; clip-path: polygon(0 100%, 20% 35%, 50% 0, 80% 35%, 100% 100%); border-top: 2px solid #704292; }.roof-one { left: -38px; }.roof-two { right: -43px; transform: scale(.78); transform-origin: bottom right; }
.scene-branch { position: absolute; z-index: 4; top: 16%; left: -4%; width: 60%; height: 45%; border-top: 5px solid #41234e; border-radius: 50%; transform: rotate(-22deg); }.scene-branch::before, .scene-branch::after { content: ''; position: absolute; width: 42%; height: 4px; background: #41234e; transform: rotate(34deg); transform-origin: left; }.scene-branch::before { top: 3px; left: 27%; }.scene-branch::after { top: -5px; left: 67%; transform: rotate(-36deg); }
.scene-petal { position: absolute; z-index: 4; width: 12px; height: 9px; border-radius: 100% 0 100% 0; background: #e6b6ff; box-shadow: 0 0 9px #bf77ff; animation: petalFall 7s linear infinite; }.petal-one { top: -10%; left: 22%; }.petal-two { top: -18%; left: 42%; animation-delay: -2.2s; }.petal-three { top: -9%; left: 62%; animation-delay: -4.5s; }.petal-four { top: -22%; left: 77%; animation-delay: -1.1s; }.petal-five { top: -14%; left: 53%; animation-delay: -5.7s; }.petal-six { top: -25%; left: 32%; animation-delay: -3.4s; }
.section-grid { color: var(--white); border-color: var(--line); }.dashboard-content h2 span { color: var(--gray); }.bio-box { background: #12091c; color: var(--white); border-color: var(--line); }.bio-box:first-child { background: #28103e; color: var(--white); }.interests { background: var(--black); }.interest-row { color: var(--white); border-color: var(--line); }.interest-detail, .interest-row > span:last-child { color: var(--gray); }.socials { background: #0d0814; color: var(--white); }.socials .section-kicker, .socials .social-links span, .socials .footer { color: var(--gray); }.social-links, .social-links a, .footer { border-color: var(--line); }.modal-window { background: #12091c; color: var(--white); border-color: rgba(168, 85, 247, .8); box-shadow: 14px 14px 0 var(--pink); }.modal-close { border-color: var(--white); color: var(--white); }.modal-window h2 { color: var(--white); }.modal-copy { color: var(--gray); }.game-grid span, .hobby-tags span { border-color: rgba(247, 241, 255, .35); background: #28103e; color: var(--white); }.game-grid span:nth-child(2), .hobby-tags span:nth-child(2n) { background: #1b0d2b; }.playlist-list { border-color: var(--line); }.playlist-list a { border-color: var(--line); }.modal-orbit { float: right; display: grid; place-items: center; width: 76px; height: 76px; margin: 14px 12px 12px 25px; border: 1px solid var(--pink); border-radius: 50%; color: var(--pink); animation: orbitSpin 9s linear infinite; }.modal-orbit::before { content: ''; position: absolute; width: 98px; height: 36px; border: 1px solid rgba(168, 85, 247, .6); border-radius: 50%; transform: rotate(-35deg); }.sound-wave { display: flex; align-items: center; gap: 7px; height: 54px; margin: 20px 0; }.sound-wave i { width: 5px; height: 22px; border-radius: 5px; background: var(--pink); box-shadow: 0 0 12px rgba(168, 85, 247, .7); animation: soundBeat .8s ease-in-out infinite alternate; }.sound-wave i:nth-child(3n) { animation-delay: -.4s; }.sound-wave i:nth-child(2n) { animation-delay: -.2s; }
@keyframes sparkleFloat { 0%, 100% { transform: translateY(0) rotate(0); opacity: .65; } 50% { transform: translateY(-9px) rotate(15deg); opacity: 1; } }
@media (max-width: 700px) { .anime-scene { min-height: 300px; margin: 20px auto 62px; }.scene-moon { width: 75px; }.scene-torii { transform: scale(.75); transform-origin: bottom left; }.torii-back { transform: scale(.52); }.profile-info h1 { color: var(--white); } }

.topbar { animation: topbarIn .7s .1s both; }.brand-mark { animation: brandTurn 7s linear infinite; }.status-dot { animation: statusPulse 2s ease-in-out infinite; }.bio-box { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }.bio-box:hover { transform: translateY(-7px); border-color: var(--pink); box-shadow: 0 12px 35px rgba(111, 49, 160, .2); }.interest-row { transition: padding .25s ease, color .25s ease, background .25s ease; }.interest-row:hover { background: rgba(168, 85, 247, .08); }.interest-icon { display: inline-block; transition: transform .3s ease; }.interest-row:hover .interest-icon { transform: rotate(20deg) scale(1.2); }.social-links a { transition: color .2s ease, padding .2s ease, background .2s ease; }.social-links a:hover { background: rgba(168, 85, 247, .08); }.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1); }.reveal.is-visible { opacity: 1; transform: translateY(0); }.profile-info h1 em { display: inline-block; animation: nameGlow 4s ease-in-out infinite; }
@keyframes topbarIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } @keyframes brandTurn { to { transform: rotate(360deg); } } @keyframes statusPulse { 50% { box-shadow: 0 0 0 8px rgba(168, 85, 247, .08), 0 0 16px var(--pink); } } @keyframes twinkle { to { transform: scale(1.25) rotate(18deg); opacity: .65; } } @keyframes nameGlow { 0%, 100% { text-shadow: 0 0 0 rgba(168, 85, 247, 0); } 50% { text-shadow: 0 0 28px rgba(168, 85, 247, .55); } } @keyframes sceneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes starPulse { to { opacity: .95; } } @keyframes moonGlow { 50% { box-shadow: 0 0 42px #c183ff, 0 0 100px rgba(168, 85, 247, .8); } } @keyframes cloudDrift { to { transform: translateX(35px); opacity: .75; } } @keyframes petalFall { 0% { transform: translate3d(0, -20px, 0) rotate(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate3d(90px, 480px, 0) rotate(540deg); opacity: 0; } } @keyframes orbitSpin { to { transform: rotate(360deg); } } @keyframes soundBeat { to { height: 48px; opacity: .65; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; } }
.modal-open { overflow: hidden; }
.music-player { position: fixed; z-index: 10; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 11px; max-width: calc(100vw - 32px); padding: 10px 13px; border: 1px solid rgba(183, 123, 255, .5); border-radius: 8px; background: rgba(17, 10, 27, .92); color: #f7f1ff; box-shadow: 0 8px 30px rgba(0, 0, 0, .35), 0 0 24px rgba(168, 85, 247, .16); backdrop-filter: blur(12px); }
.music-player-icon { color: #c38cff; font-size: 1.1rem; animation: musicIconPulse 1.5s ease-in-out infinite; }.music-track-title { max-width: 230px; overflow: hidden; color: #d8c7e9; font: .62rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }.music-play { flex: none; padding: 8px 10px; border: 1px solid rgba(194, 140, 255, .6); border-radius: 5px; background: #31174a; color: #fff; font: .62rem var(--mono); cursor: pointer; transition: background .2s ease, transform .2s ease; }.music-play:hover { background: #54277b; transform: translateY(-1px); }.music-play span { margin-left: 5px; color: #d9b8ff; }.youtube-player { position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
@keyframes musicIconPulse { 50% { transform: scale(1.15); text-shadow: 0 0 12px #bd83ff; } }
@media (max-width: 520px) { .music-player { right: 10px; bottom: 10px; left: 10px; justify-content: center; gap: 8px; padding: 8px; }.music-track-title { flex: 1; max-width: none; }.music-play { padding: 8px; font-size: .56rem; } }
.profile-name { margin: 23px 0 0; color: var(--gray); font: 600 clamp(1rem, 1.7vw, 1.3rem)/1.2 var(--sans); letter-spacing: .04em; }
.profile-info h1 { margin: 8px 0 15px; font-size: clamp(3.4rem, 7.5vw, 7.2rem); line-height: .9; letter-spacing: -.085em; overflow-wrap: anywhere; }
.hero-text { color: #a99bb6; }
@media (max-width: 700px) { .profile-name { margin-top: 27px; }.profile-info h1 { font-size: clamp(3.2rem, 15vw, 6rem); letter-spacing: -.075em; } }
.quick-stats { align-items: stretch; gap: 12px; color: var(--gray); }
.quick-stats span { min-width: 112px; display: flex; align-items: baseline; gap: 8px; padding: 11px 14px; border: 1px solid rgba(168, 85, 247, .42); border-radius: 6px; background: rgba(50, 19, 79, .48); font: .68rem var(--mono); color: #d8c7e9; }
.quick-stats b { display: inline; margin: 0; color: #d6a8ff; font: 800 1.35rem var(--sans); }
.quick-stats small { color: #d8c7e9; font: .68rem var(--mono); }
.game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.game-grid span { overflow-wrap: anywhere; }
@media (max-width: 700px) { .quick-stats span { min-width: 104px; } .game-grid { grid-template-columns: 1fr; } }

/* Site-wide motion: staggered entrances, ambient movement, and tactile controls. */
body::before { content: ''; position: fixed; z-index: -1; inset: -25%; pointer-events: none; background: radial-gradient(ellipse at 20% 15%, rgba(120, 48, 183, .12), transparent 37%), radial-gradient(ellipse at 82% 70%, rgba(79, 32, 125, .1), transparent 34%); animation: ambientDrift 24s ease-in-out infinite alternate; }
.page-ready .topbar { animation: headerEnter .75s cubic-bezier(.2, .7, .2, 1) both; }
.page-ready .profile-info > * { animation: elementEnter .65s cubic-bezier(.2, .7, .2, 1) both; }
.page-ready .profile-info > *:nth-child(1) { animation-delay: .08s; }.page-ready .profile-info > *:nth-child(2) { animation-delay: .16s; }.page-ready .profile-info > *:nth-child(3) { animation-delay: .24s; }.page-ready .profile-info > *:nth-child(4) { animation-delay: .32s; }.page-ready .profile-info > *:nth-child(5) { animation-delay: .4s; }
.page-ready .code-window { animation: terminalEnter .8s .28s cubic-bezier(.2, .7, .2, 1) both, terminalHover 5s 1.1s ease-in-out infinite; }
.page-ready .interest-row { animation: elementEnter .55s cubic-bezier(.2, .7, .2, 1) both; }.page-ready .interest-row:nth-child(2) { animation-delay: .1s; }.page-ready .interest-row:nth-child(3) { animation-delay: .2s; }
.page-ready .social-links a { animation: elementEnter .5s cubic-bezier(.2, .7, .2, 1) both; }.page-ready .social-links a:nth-child(2) { animation-delay: .08s; }.page-ready .social-links a:nth-child(3) { animation-delay: .16s; }
.brand, .nav a, .social-links a, .footer a, .interest-row, .music-play, .modal-close { -webkit-tap-highlight-color: transparent; }
.brand { transition: color .25s ease, letter-spacing .25s ease; }.brand:hover { color: #d9b8ff; letter-spacing: .015em; }.brand-mark { transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }.brand:hover .brand-mark { transform: rotate(90deg) scale(1.12); box-shadow: 0 0 18px rgba(168, 85, 247, .75); }
.nav a { position: relative; transition: color .25s ease, transform .25s ease; }.nav a::after { content: ''; position: absolute; right: 0; bottom: -7px; left: 0; height: 1px; background: var(--pink); transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }.nav a:hover { color: var(--white); transform: translateY(-2px); }.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.profile-name, .eyebrow, .section-kicker, .scene-label, .scene-caption, .code-titlebar, .window-status { transition: color .3s ease, letter-spacing .3s ease; }.profile-info:hover .profile-name { color: #d1a9fa; letter-spacing: .12em; }.quick-stats span { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; }.quick-stats span:hover { transform: translateY(-5px); border-color: #bd83ff; background: rgba(88, 42, 130, .62); box-shadow: 0 8px 25px rgba(111, 49, 160, .2); }
.anime-scene { transition: border-color .4s ease, box-shadow .4s ease; }.anime-scene:hover { border-color: rgba(210, 167, 255, .75); box-shadow: 14px 14px 0 #6d36a5, 0 0 38px rgba(145, 70, 211, .24); }.scene-moon { transition: filter .4s ease; }.anime-scene:hover .scene-moon { filter: brightness(1.18); }.scene-petal { will-change: transform; }
.interest-row { position: relative; isolation: isolate; overflow: hidden; }.interest-row::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(100deg, transparent, rgba(168, 85, 247, .13), transparent); transform: translateX(-110%); transition: transform .6s ease; }.interest-row:hover::before, .interest-row:focus-visible::before { transform: translateX(110%); }.interest-row > span:last-child { transition: transform .25s ease, color .25s ease; }.interest-row:hover > span:last-child { transform: translateX(-5px); color: #d9b8ff; }
.social-links a { position: relative; overflow: hidden; }.social-links a b { display: inline-block; transition: transform .25s ease; }.social-links a:hover b { transform: translate(3px, -3px); }.social-links a span { transition: color .25s ease; }.social-links a:hover span { color: #c28cff; }
.bio-box { transform: perspective(600px) translateZ(0); }.bio-box p { transition: transform .3s ease; }.bio-box:hover p { transform: translateY(-2px); }
.music-player { animation: playerEnter .65s .8s cubic-bezier(.2, .7, .2, 1) both, playerFloat 6s 1.5s ease-in-out infinite; transition: border-color .3s ease, box-shadow .3s ease; }.music-player:hover { border-color: rgba(205, 159, 255, .8); box-shadow: 0 10px 35px rgba(0, 0, 0, .42), 0 0 30px rgba(168, 85, 247, .28); }.music-track-title { transition: color .25s ease; }.music-player:hover .music-track-title { color: #fff; }.music-play:active, .modal-close:active, .interest-row:active { transform: scale(.97); }
.modal-close { transition: transform .25s ease, color .25s ease, background .25s ease; }.modal-close:hover { transform: rotate(90deg); background: rgba(168, 85, 247, .14); }.game-grid span, .hobby-tags span { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }.game-grid span:hover, .hobby-tags span:hover { transform: translateY(-4px); border-color: #bb83fa; box-shadow: 0 8px 22px rgba(106, 48, 159, .22); }.playlist-list a { transition: padding .25s ease, color .25s ease, background .25s ease; }.playlist-list a:hover { padding-left: 10px; color: #e4ccff; background: rgba(168, 85, 247, .1); }
.footer a { display: inline-block; transition: transform .25s ease, color .25s ease; }.footer a:hover { transform: translateY(-3px); }
.coding-interlude.reveal { transition-delay: .08s; }.interests.reveal { transition-delay: .04s; }.socials.reveal { transition-delay: .06s; }
.code-titlebar { animation: elementEnter .6s .12s both; }.code-content > :nth-child(2) { animation: codeLineIn .45s .18s both; }.code-content > :nth-child(4) { animation: codeLineIn .45s .28s both; }.code-content > :nth-child(6) { animation: codeLineIn .45s .38s both; }.code-content > :nth-child(8) { animation: codeLineIn .45s .48s both; }
.interest-content h2, .socials h2 { transition: letter-spacing .35s ease, text-shadow .35s ease; }.interest-content h2:hover, .socials h2:hover { letter-spacing: -.075em; text-shadow: 0 0 26px rgba(168, 85, 247, .2); }
.section-kicker { transition: transform .3s ease, color .3s ease; }.section-grid:hover > .section-kicker, .socials:hover > .section-kicker { transform: translateX(5px); color: #c69aff; }
.window-dots i { animation: dotBreathe 2.4s ease-in-out infinite; }.window-dots i:nth-child(2) { animation-delay: .3s; }.window-dots i:nth-child(3) { animation-delay: .6s; }
.socials-main > h2 { animation: elementEnter .7s .12s both; }.footer span { animation: elementEnter .45s .3s both; }.footer span:nth-child(2) { animation-delay: .38s; }.footer span:nth-child(3) { animation-delay: .46s; }
.modal-window > * { animation: modalContentEnter .45s both; }.modal-window > *:nth-child(1) { animation-delay: .04s; }.modal-window > *:nth-child(2) { animation-delay: .1s; }.modal-window > *:nth-child(3) { animation-delay: .16s; }.modal-window > *:nth-child(4) { animation-delay: .22s; }.modal-window > *:nth-child(5) { animation-delay: .28s; }.modal-window > *:nth-child(6) { animation-delay: .34s; }.playlist-list a { animation: elementEnter .4s both; }.playlist-list a:nth-child(2) { animation-delay: .06s; }.playlist-list a:nth-child(3) { animation-delay: .12s; }.playlist-list a:nth-child(4) { animation-delay: .18s; }.playlist-list a:nth-child(5) { animation-delay: .24s; }
@keyframes codeLineIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } @keyframes dotBreathe { 50% { box-shadow: 0 0 9px currentColor; filter: brightness(1.35); } } @keyframes modalContentEnter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.modal-window::after { top: 27px; right: auto; left: 29px; letter-spacing: 6px; animation: modalStars 2.4s ease-in-out infinite alternate; }
.modal-close { top: 18px; right: 18px; width: 40px; height: 40px; border-color: rgba(198, 151, 255, .72); background: linear-gradient(145deg, #32194b, #1a1025); box-shadow: 0 4px 16px rgba(0, 0, 0, .28); }
.modal-close:hover { transform: rotate(90deg) scale(1.06); border-color: #dfc4ff; background: #69349a; box-shadow: 0 0 22px rgba(168, 85, 247, .48); }
.interest-modal.is-closing .modal-close { transform: rotate(-75deg) scale(.82); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
@keyframes modalStars { from { opacity: .55; transform: translateY(0); } to { opacity: 1; transform: translateY(-2px); } }
@media (max-width: 700px) { .modal-window::after { top: 24px; left: 23px; }.modal-close { top: 13px; right: 13px; width: 36px; height: 36px; } }
@keyframes headerEnter { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } @keyframes elementEnter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes terminalEnter { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes playerEnter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes playerFloat { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 4px; } } @keyframes ambientDrift { from { transform: translate3d(-2%, -1%, 0) rotate(-2deg); } to { transform: translate3d(2%, 1%, 0) rotate(2deg); } }

.coding-interlude { padding-top: 30px; padding-bottom: 27px; background: radial-gradient(ellipse at 50% 20%, rgba(124, 58, 237, .16), transparent 70%), #09060f; }
.code-window { position: relative; width: min(760px, 100%); min-height: 210px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(177, 125, 255, .42); border-radius: 9px; background: linear-gradient(135deg, #171020, #0e0b15 72%); box-shadow: 0 0 38px rgba(116, 55, 194, .18), 0 18px 50px rgba(0, 0, 0, .28); animation: terminalHover 5s ease-in-out infinite; }
.code-titlebar { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; height: 39px; padding: 0 14px; border-bottom: 1px solid rgba(247, 241, 255, .1); color: #b9a9c9; font: .62rem var(--mono); }.code-titlebar > span:nth-child(2) { justify-self: center; }.window-dots { display: flex; gap: 6px; }.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #a855f7; }.window-dots i:nth-child(2) { background: #8657bf; }.window-dots i:nth-child(3) { background: #55436c; }.window-status { justify-self: end; color: #bd8dff; font-size: .58rem; }
.code-content { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 8px 15px; width: max-content; min-width: 65%; margin: 18px 0 20px 22px; color: #eee5fa; font: .75rem/1.6 var(--mono); }.code-content .line-number { color: #675977; text-align: right; user-select: none; }.code-content code { font: inherit; }.code-content code i { color: #ca8cff; font-style: normal; }.code-content code b { color: #a8e6c2; font-weight: 400; }.code-content code em { color: #766d82; font-style: normal; }.code-cursor { position: absolute; bottom: 1px; left: 53px; width: 7px; height: 15px; background: #bc73ff; animation: cursorBlink .9s steps(2, start) infinite; }.code-glow { position: absolute; top: 45%; left: -20%; width: 45%; height: 1px; background: #bd73ff; box-shadow: 0 0 16px 3px rgba(189, 115, 255, .48); opacity: 0; animation: scanLine 5.5s ease-in-out infinite; }
.coding-interlude .interlude-caption { width: min(760px, 100%); margin: 12px auto 0; }
@keyframes terminalHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes cursorBlink { to { opacity: 0; } } @keyframes scanLine { 0%, 15% { left: -25%; opacity: 0; } 25% { opacity: .8; } 80% { left: 110%; opacity: .4; } 100% { left: 110%; opacity: 0; } }
@media (max-width: 700px) { .coding-interlude { padding: 22px 6vw; }.code-window { min-height: 190px; }.code-content { margin-left: 10px; font-size: .62rem; grid-template-columns: 26px 1fr; gap: 7px 9px; }.code-cursor { left: 36px; }.code-titlebar { padding: 0 10px; }.window-status { font-size: .5rem; }.coding-interlude .interlude-caption span { display: block; margin: 5px 0 0; } }

.interlude { position: relative; padding: 26px 10vw 31px; overflow: hidden; background: #0b0711; border-top: 1px solid rgba(168, 85, 247, .3); border-bottom: 1px solid rgba(168, 85, 247, .3); }
.interlude-sky { position: relative; height: 150px; overflow: hidden; border-radius: 5px; background: linear-gradient(180deg, #10091b 0%, #211037 62%, #321650 100%); box-shadow: inset 0 0 45px rgba(168, 85, 247, .18); }
.interlude-sky::before { content: ''; position: absolute; inset: 0; opacity: .7; background-image: radial-gradient(1px 1px at 8% 23%, #fff 50%, transparent 100%), radial-gradient(1px 1px at 18% 64%, #d9b8ff 50%, transparent 100%), radial-gradient(2px 2px at 42% 18%, #fff 50%, transparent 100%), radial-gradient(1px 1px at 73% 32%, #fff 50%, transparent 100%), radial-gradient(1px 1px at 91% 19%, #d9b8ff 50%, transparent 100%); animation: skyTwinkle 3s ease-in-out infinite alternate; }
.interlude-sky::after { content: ''; position: absolute; inset: auto 0 0; height: 54%; background: linear-gradient(0deg, #0a0710 0 25%, transparent 100%); }
.interlude-moon { position: absolute; top: 21px; right: 20%; width: 54px; height: 54px; border-radius: 50%; background: #e9d6ff; box-shadow: 0 0 23px #b77bff, 0 0 60px rgba(168, 85, 247, .6); animation: interludeMoon 4s ease-in-out infinite; }
.interlude-moon::after { content: ''; position: absolute; top: -5px; right: -11px; width: 53px; height: 53px; border-radius: 50%; background: #1c102d; }
.interlude-star { position: absolute; z-index: 1; color: #e8d5ff; animation: starDrift 3s ease-in-out infinite alternate; }.star-a { top: 28px; right: 31%; }.star-b { top: 61px; right: 12%; animation-delay: -1.2s; }
.interlude-cloud { position: absolute; top: 61px; z-index: 1; width: 125px; height: 20px; border-radius: 50%; background: rgba(141, 88, 183, .42); filter: blur(10px); animation: interludeCloud 12s ease-in-out infinite alternate; }.cloud-a { left: 20%; }.cloud-b { left: 59%; width: 85px; animation-delay: -5s; }
.interlude-gate { position: absolute; z-index: 2; bottom: 15px; left: 32%; width: 74px; height: 91px; border-left: 6px solid #9b57c9; border-right: 6px solid #9b57c9; filter: drop-shadow(0 0 6px rgba(187, 112, 255, .45)); }.interlude-gate::before { content: ''; position: absolute; top: 9px; left: -13px; width: 88px; height: 8px; background: #c78cff; box-shadow: 0 6px 0 #75409a; }.interlude-gate::after { content: ''; position: absolute; top: 38px; left: -6px; width: 74px; height: 5px; background: #9b57c9; }
.interlude-roof { position: absolute; z-index: 3; bottom: 0; width: 140px; height: 40px; background: #0a0710; }.interlude-roof::before { content: ''; position: absolute; top: -21px; left: -12px; width: 164px; height: 27px; background: #0a0710; clip-path: polygon(0 100%, 20% 43%, 50% 0, 80% 43%, 100% 100%); }.roof-a { left: -19px; }.roof-b { right: -15px; transform: scale(.8); transform-origin: bottom right; }
.interlude-petal { position: absolute; z-index: 4; top: -8px; width: 9px; height: 7px; border-radius: 100% 0 100% 0; background: #e2b1ff; box-shadow: 0 0 7px #b77bff; animation: interludePetal 5.5s linear infinite; }.interlude-petal.petal-a { left: 17%; }.interlude-petal.petal-b { left: 44%; animation-delay: -2s; }.interlude-petal.petal-c { left: 66%; animation-delay: -3.7s; }.interlude-petal.petal-d { left: 82%; animation-delay: -1s; }
.interlude-caption { margin: 12px 2px 0; color: #d8c4ec; font: .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }.interlude-caption span { margin-left: 10px; color: #9d8aaa; text-transform: none; }
@keyframes skyTwinkle { to { opacity: .35; } } @keyframes interludeMoon { 50% { box-shadow: 0 0 34px #c58cff, 0 0 75px rgba(168, 85, 247, .75); } } @keyframes starDrift { to { transform: translateY(-5px) rotate(20deg); opacity: .5; } } @keyframes interludeCloud { to { transform: translateX(34px); opacity: .65; } } @keyframes interludePetal { 0% { transform: translate(0, -8px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(65px, 175px) rotate(440deg); opacity: 0; } }
@media (max-width: 700px) { .interlude { padding: 18px 6vw 22px; }.interlude-sky { height: 125px; }.interlude-moon { right: 18%; width: 43px; height: 43px; }.interlude-moon::after { width: 42px; height: 42px; }.interlude-gate { left: 35%; transform: scale(.82); transform-origin: bottom; }.interlude-caption span { display: block; margin: 5px 0 0; } }