/* Profile refinement — monochrome composition inspired by bio.yyhvh.com.
   Spotlight primitive adapted from React Bits; see licenses/react-bits.md. */
:root { --bg:#070809; --bg-2:#070809; --surface:rgba(10,12,13,.86); --surface-solid:#101213; --border:rgba(255,255,255,.12); --muted:#a0a3a6; --muted-2:#82878c; --accent:#9ebcbd; --accent-2:#9ebcbd; --accent-glow:rgba(175,207,207,.12); --container:820px; --radius:16px; }
.bg__glow { display:none; }
.bg__img { opacity:.07; filter:grayscale(1) brightness(.5); animation:none; }
.bg__grain { opacity:.025; }
.cursor { display:none; }
.hero { padding:80px 24px; }
.hero__inner { position:relative; display:grid; grid-template-columns:132px minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:34px; width:min(820px,100%); text-align:left; align-items:center; padding:42px; border:1px solid rgba(152,192,194,.28); border-radius:18px; background:rgba(7,9,10,.88); box-shadow:0 28px 90px #0005; }
.avatar { grid-column:1; grid-row:1 / 3; width:132px; height:132px; margin:0; }
.avatar__ring { inset:-5px; border:1px solid #b4d4d43d; }
.avatar__halo { display:none; }
.name { grid-column:2; align-self:end; font-size:clamp(32px,4vw,48px); font-weight:500; letter-spacing:-.045em; margin:0 0 12px; text-shadow:0 0 22px #ffffff18; overflow-wrap:anywhere; }
.status { grid-column:2; align-self:start; margin:0; min-height:44px; color:#aeb4b8; font:13px/1.8 var(--font-mono); }
.caret { width:1px; background:#a6c4c5; }
.socials { grid-column:1/-1; width:100%; border-top:1px solid var(--border); padding-top:25px; margin-top:32px; gap:18px; }
.social { width:46px; height:46px; border:0; border-radius:10px; background:transparent; color:#c7cdce; }
.social:hover { background:#ffffff08; box-shadow:none; transform:none; color:white; }
.social .ico { transition:transform .4s ease,filter .3s; }
.social:hover .ico { filter:drop-shadow(0 0 8px #ffffff50); }
.social::after { content:attr(aria-label); position:absolute; top:100%; font:10px var(--font-mono); color:#bcc7c7; opacity:0; transition:opacity .2s; }
.social { position:relative; }
.social:hover::after,.social:focus-visible::after { opacity:1; }
.scroll-hint { bottom:42px; font:10px var(--font-mono); text-transform:uppercase; letter-spacing:.16em; }
.scroll-hint.reveal.is-in { transform:translateX(-50%); }
.section { position:relative; padding:88px 0; min-height:100svh; align-content:center; }
.chapter { font:11px var(--font-mono); letter-spacing:.18em; text-transform:uppercase; color:#90a6a8; margin-bottom:24px; display:flex; align-items:center; gap:14px; }
.chapter::after { content:''; width:36px; height:1px; background:#8da4a54d; }
.h2 { font-size:clamp(32px,5vw,52px); font-weight:400; letter-spacing:-.055em; margin-bottom:28px; }
.card { box-shadow:none; backdrop-filter:none; background:var(--surface); padding:28px; }
.bio { border:0; border-left:1px solid #a0bfc166; border-radius:0; background:transparent; padding:4px 0 4px 26px; }
.bio p { font-size:clamp(20px,3vw,28px); line-height:1.65; letter-spacing:-.02em; color:#c9cdcf; }
.grid-2 { gap:16px; }
.grid-2 .chapter { grid-column:1/-1; margin-bottom:8px; }
.discord { min-height:208px; }
.clock { min-height:208px; }
.clock__time { font:400 clamp(30px,4vw,44px)/1.4 var(--font-mono); letter-spacing:-.06em; }
.discord__meta { min-width:0; }
.discord__meta span { line-height:1.7; }
.tags { display:grid; grid-template-columns:1fr 1fr; gap:0 32px; border-top:1px solid var(--border); }
.tag { border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; padding:24px 2px; font-size:18px; gap:14px; }
.tag:hover { transform:none; background:#ffffff03; }
.tag .dot { width:6px; height:6px; opacity:.75; }
.player { padding:30px; gap:20px; }
.player__cover { width:76px; height:76px; border-radius:8px; }
.player.is-playing .player__cover { animation:none; border-radius:8px; }
.player__title { font-size:17px; }
.player__prod { line-height:1.6; }
.player__fill { background:#bad0cf; }
.player__bar { height:4px; margin-top:8px; touch-action:none; }
.player__bar::after { content:''; position:absolute; inset:-9px 0; }
.lyrics { position:relative; max-height:180px; padding:12px 8px 12px 0; }
.lyric { opacity:.8; font-size:14px; line-height:1.8; }
.rail { right:30px; gap:4px; }
.rail__dot { position:relative; width:44px; height:44px; }
.rail__dot::before { content:attr(data-label); position:absolute; right:48px; font:10px var(--font-mono); letter-spacing:.06em; opacity:0; transition:opacity .25s; color:#bac7c7; }
.rail__dot:hover::before,.rail__dot.is-active::before { opacity:1; }
.rail__dot span { width:4px; height:4px; }
.rail__dot.is-active span { height:22px; width:3px; background:#c7dedc; }
.foot { padding:28px 0 90px; font:11px var(--font-mono); border-top:1px solid var(--border); }
:focus-visible { outline:1px solid #bcd8d8; outline-offset:6px; }
.gate__label { font-size:13px; letter-spacing:.15em; }
/* React Bits SpotlightCard: relative pointer coordinates + radial highlight. */
.rb-spotlight { position:relative; --mouse-x:50%; --mouse-y:50%; --spotlight-color:rgba(184,215,214,.09); }
.rb-spotlight::before { content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(320px circle at var(--mouse-x) var(--mouse-y),var(--spotlight-color),transparent 80%); opacity:0; transition:opacity .5s ease; pointer-events:none; }
.rb-spotlight:hover::before,.rb-spotlight:focus-within::before { opacity:.6; }
@media (max-width:1120px) { .rail { display:flex; right:10px; } .rail__dot::before { display:none; } .section { width:min(820px,calc(100% - 88px)); } }
@media (max-width:760px) {
 .hero { padding:70px 24px 110px; }
 .hero__inner { display:flex; flex-direction:column; padding:30px 20px 27px; text-align:center; }
 .avatar { width:108px; height:108px; margin:0 0 28px; }
 .name { font-size:36px; align-self:center; margin-bottom:14px; }
 .status { align-self:center; font-size:11px; min-height:40px; }
 .socials { margin-top:18px; padding-top:20px; gap:6px; }
 .social { width:40px; height:44px; }
 .social .ico { width:20px; height:20px; }
 .rail { top:auto; bottom:16px; left:50%; right:auto; transform:translateX(-50%); flex-direction:row; gap:4px; padding:2px 8px; border:1px solid var(--border); border-radius:30px; background:#0b0d0ef5; backdrop-filter:blur(10px); }
 .rail__dot.is-active span { width:18px; height:3px; }
 .section { width:calc(100% - 48px); padding:80px 0 100px; min-height:100svh; align-content:center; }
 .h2 { font-size:38px; }
 .grid-2 { gap:14px; }
 .discord,.clock { min-height:158px; }
 .card { padding:22px; }
 .tag { font-size:15px; padding:22px 0; gap:10px; }
 .tags { gap:0 18px; }
 .player__head { gap:12px; flex-wrap:wrap; }
 .player__cover { width:52px; height:52px; }
 .player__title { white-space:normal; font-size:14px; }
 .player__artist { font-size:12px; }
 .player__prod { font-size:10px; }
 .player__btn { width:40px; height:40px; }
 .player__info { flex-basis:calc(100% - 68px); }
 .player__btn { margin-left:auto; }
 .lyrics { max-height:150px; }
 .lyric { font-size:12px; }
 .scroll-hint { bottom:100px; }
 .foot { width:calc(100% - 48px); }
}
@media (hover:none),(prefers-reduced-motion:reduce) { .rb-spotlight::before { display:none; } }
@media (prefers-reduced-motion:reduce) { html,.lyrics { scroll-behavior:auto; } .social .ico { transform:none!important; } }

/* Live Discord activity may contain long song titles. */
.status { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
#statusText, #discordActivity { white-space:normal; overflow-wrap:anywhere; }
.discord__meta { flex:1; min-width:0; }

.grid-2 > .card { min-width:0; max-width:100%; }

.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:760px) { .grid-2 { grid-template-columns:minmax(0,1fr); } }

@media(max-width:760px) { .grid-2 > .reveal:not(.is-in) { transform:translateY(24px); } }

/* Black background and native bio cat cursor. */
:root { --bg:#000; --bg-2:#000; }
html,body,.bg { background:#000; }
.bg__img,.bg__grain,.bg__glow { display:none!important; }
.social[aria-label="Telegram"] .ico { opacity:.76; }
.steam-crop { position:relative; border-radius:50%; overflow:hidden; clip-path:circle(50%); opacity:.8; }
.steam-crop img { position:absolute; width:108.7%; height:108.7%; max-width:none; left:-4.35%; top:-4.35%; }
.cat-pointer { position:fixed; width:32px; height:32px; transform:translate(-50%,-50%); object-fit:contain; pointer-events:none; z-index:2147483647; visibility:hidden; }
.cat-pointer.pressed { transform:translate(-50%,-50%) scale(.8); }
@media(hover:hover) and (pointer:fine) { html.cat-cursor-ready,html.cat-cursor-ready * { cursor:none!important; } }