@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=IBM+Plex+Mono:wght@400;600&display=swap');
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;overflow-x:hidden;background:#05080d;color:#eef7ff;font-family:Inter,system-ui,sans-serif;cursor:none}a,button{cursor:none}#yt-wrap{position:fixed;inset:-12%;z-index:0;opacity:.58;filter:brightness(.55) contrast(1.1) saturate(.55) blur(1px);transform:scale(1.12)}#yt-player{width:100%;height:100%;pointer-events:none}.bg-tint{position:fixed;inset:0;z-index:1;background:radial-gradient(circle at 50% 35%,rgba(180,220,255,.16),transparent 30%),linear-gradient(120deg,rgba(5,14,25,.86),rgba(2,3,6,.74),rgba(13,25,34,.78));pointer-events:none}#snow,#mist{position:fixed;inset:0;z-index:4;pointer-events:none}#mist{z-index:3;opacity:.55;filter:blur(10px)}.crt{position:fixed;inset:0;z-index:6;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);mix-blend-mode:overlay;opacity:.28}.crt:after{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,%3Csvg viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity=".5"/%3E%3C/svg%3E');opacity:.08}.vignette{position:fixed;inset:0;z-index:7;pointer-events:none;box-shadow:inset 0 0 180px #000,inset 0 0 60px rgba(160,210,255,.18)}.frost{position:fixed;z-index:5;pointer-events:none;opacity:.3;filter:blur(.2px)}.frost-a{inset:0;background:radial-gradient(circle at 8% 12%,rgba(210,240,255,.24),transparent 13%),radial-gradient(circle at 95% 88%,rgba(210,240,255,.18),transparent 18%)}.frost-b{inset:auto 0 0 0;height:170px;background:linear-gradient(to top,rgba(210,240,255,.14),transparent)}.ice-edge{position:fixed;left:0;right:0;z-index:8;pointer-events:none;opacity:.32;filter:blur(.15px)}.ice-top{top:0;height:105px;background:linear-gradient(to bottom,rgba(235,250,255,.20),transparent),radial-gradient(circle at 10% 0,rgba(240,250,255,.25),transparent 15%),radial-gradient(circle at 82% 0,rgba(240,250,255,.19),transparent 18%)}.ice-bottom{bottom:0;height:120px;background:linear-gradient(to top,rgba(225,245,255,.18),transparent),radial-gradient(circle at 32% 100%,rgba(240,250,255,.20),transparent 14%),radial-gradient(circle at 92% 100%,rgba(240,250,255,.16),transparent 20%)}.breath{position:fixed;z-index:4;left:50%;bottom:18%;width:240px;height:90px;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,rgba(230,248,255,.12),transparent 66%);filter:blur(18px);opacity:0;animation:breath 7s infinite ease-in-out}
.enter{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#020305;transition:opacity 1.2s ease,visibility 1.2s}.enter.hide{opacity:0;visibility:hidden}.boot{text-align:center;padding:42px;border:1px solid rgba(220,245,255,.22);background:rgba(4,10,16,.48);backdrop-filter:blur(18px);box-shadow:0 0 80px rgba(130,190,255,.1)}.boot h1{font-size:clamp(40px,7vw,88px);letter-spacing:.12em;margin:10px 0;text-shadow:0 0 30px rgba(200,235,255,.25)}.mono{font-family:'IBM Plex Mono',monospace}.small,.hint{opacity:.65;font-size:12px;letter-spacing:.2em}.boot button,#muteBtn{background:rgba(210,240,255,.06);border:1px solid rgba(230,248,255,.35);color:#f2fbff;padding:13px 22px;font-family:'IBM Plex Mono';letter-spacing:.18em;transition:.25s}button:hover,.links a:hover{background:#eef7ff;color:#071018;box-shadow:0 0 35px rgba(220,245,255,.25)}.hidden{display:none}.app{position:relative;z-index:10;min-height:100vh;padding:22px 22px 96px;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;opacity:.85}.layout{flex:1;display:grid;grid-template-columns:minmax(230px,330px) minmax(320px,560px) minmax(230px,330px);gap:22px;align-items:center;justify-content:center;width:100%;max-width:1360px;margin:0 auto;padding:34px 0 30px}.panel,.card{border:1px solid rgba(220,245,255,.18);background:linear-gradient(135deg,rgba(180,220,255,.1),rgba(10,15,22,.42));backdrop-filter:blur(20px);box-shadow:0 30px 100px rgba(0,0,0,.35),inset 0 0 35px rgba(220,245,255,.045);border-radius:24px}.side{padding:18px;max-height:min(580px,calc(100vh - 230px));overflow:auto;scrollbar-width:none}.side::-webkit-scrollbar{display:none}.side h3,.system h3{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.2em;opacity:.75;margin:0 0 14px}.center-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-width:0}.main-card{text-align:center;padding:34px;position:relative;overflow:hidden;width:100%}.main-card:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 32%,rgba(170,220,255,.06) 70%,transparent);opacity:.55}.main-card:before{content:"";position:absolute;inset:-2px;background:linear-gradient(90deg,transparent,rgba(235,250,255,.2),transparent);transform:translateX(-100%);animation:shine 6s infinite}.avatar-wrap{position:relative;margin:auto;width:116px;height:116px}.avatar,.avatar-fallback{position:absolute;inset:0;width:116px;height:116px;border-radius:50%;object-fit:cover;border:1px solid rgba(230,248,255,.35);box-shadow:0 0 45px rgba(180,225,255,.18)}.avatar:not([src]),.avatar[src=""]{display:none}.avatar-fallback{display:grid;place-items:center;font-size:48px;font-weight:800;background:rgba(220,245,255,.08)}.name{font-size:clamp(46px,6vw,74px);letter-spacing:.13em;margin:18px 0 4px;text-shadow:2px 0 rgba(120,220,255,.22),-2px 0 rgba(255,80,80,.14)}.quote{opacity:.72;font-style:italic}.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.status-grid div{padding:14px;border:1px solid rgba(220,245,255,.13);border-radius:16px;background:rgba(0,0,0,.16);text-align:left}.status-grid span,.track-info{min-width:0;overflow:hidden}.track-info span{display:block;font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.16em;opacity:.55}.status-grid strong,.track-info strong{display:block;margin:5px 0;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.status-grid small,.track-info small{opacity:.65;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.spotify-box{display:grid;grid-template-columns:86px minmax(0,1fr) 34px;gap:15px;align-items:center;text-align:left;padding:14px;border-radius:20px;border:1px solid rgba(220,245,255,.18);background:rgba(2,7,12,.32)}.cover{width:86px;height:86px;border-radius:16px;object-fit:cover;background:rgba(220,245,255,.08);box-shadow:0 0 40px rgba(185,225,255,.14)}.bar{height:6px;background:rgba(230,248,255,.14);border-radius:99px;overflow:hidden;margin-top:10px}.bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#dff7ff,#ffffff);border-radius:99px;box-shadow:0 0 20px #dff7ff}.times{display:flex;justify-content:space-between;font-family:'IBM Plex Mono';font-size:11px;opacity:.55;margin-top:6px}.bars{height:54px;display:flex;align-items:end;gap:4px}.bars i{width:4px;background:#eef7ff;border-radius:4px;animation:eq 1s infinite ease-in-out}.bars i:nth-child(2){animation-delay:.15s}.bars i:nth-child(3){animation-delay:.3s}.bars i:nth-child(4){animation-delay:.45s}.links{display:flex;gap:10px;justify-content:center;margin-top:18px}.links a{border:1px solid rgba(220,245,255,.22);padding:10px 14px;border-radius:999px;color:#eef7ff;text-decoration:none;font-family:'IBM Plex Mono';font-size:12px;transition:.25s}.command{font-size:11px;opacity:.48;margin-top:15px}.list{display:grid;gap:10px}.item{display:grid;grid-template-columns:54px minmax(0,1fr);gap:10px;align-items:center;padding:9px;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid rgba(220,245,255,.1)}.item img{width:54px;height:54px;border-radius:10px;object-fit:cover;background:rgba(255,255,255,.06)}.item b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.item div{min-width:0}.item small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.item small{opacity:.58}.system{position:fixed;left:22px;right:22px;bottom:16px;padding:12px 16px}.sys{display:flex;gap:12px;flex-wrap:wrap;font-family:'IBM Plex Mono';font-size:12px}.sys span{opacity:.45}.sys b{margin-right:18px}.toast{position:fixed;right:24px;bottom:90px;padding:12px 16px;border:1px solid rgba(220,245,255,.2);background:rgba(0,0,0,.42);border-radius:14px;opacity:0;transform:translateY(10px);transition:.3s;z-index:30}.toast.show{opacity:1;transform:none}#cursor{position:fixed;z-index:50;width:18px;height:18px;border:1px solid #eef7ff;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 25px rgba(210,240,255,.55);mix-blend-mode:difference}body.vhs .crt{opacity:.65}body.freeze .bg-tint{background:radial-gradient(circle at 50% 35%,rgba(220,245,255,.25),transparent 35%),linear-gradient(120deg,rgba(12,30,50,.86),rgba(2,3,6,.68))}
@keyframes shine{50%,100%{transform:translateX(100%)}}@keyframes eq{0%,100%{height:18%}50%{height:100%}}
@media(max-width:980px){.layout{grid-template-columns:1fr;min-height:unset;margin-top:18px;padding-top:12px;max-width:620px}.center-stack{order:-1}.side{max-height:none;width:100%}.topbar{font-size:12px}.app{padding:14px 14px 40px}.system{position:relative;left:auto;right:auto;bottom:auto;margin-top:18px}.spotify-box{grid-template-columns:70px 1fr}.cover{width:70px;height:70px}.bars{display:none}body{cursor:auto}#cursor{display:none}a,button{cursor:pointer}}

.game-cover-wrap{position:relative;width:54px;height:54px;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,rgba(220,245,255,.16),rgba(60,90,120,.08));border:1px solid rgba(220,245,255,.12);display:grid;place-items:center}.game-cover-wrap:before{content:"✦";position:absolute;color:rgba(235,250,255,.42);font-size:18px;text-shadow:0 0 16px rgba(220,245,255,.4)}.game-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px;background:transparent}.game-cover.broken{display:none}.game-fallback{display:none!important}.song-title-marquee:hover b{animation:marquee 7s linear infinite;text-overflow:clip}.side .item{overflow:hidden}.side .list a{color:#dcefff;text-decoration:none}.side .list a:hover b{text-decoration:underline}#cursor{position:fixed;z-index:50;width:22px;height:22px;border:1px solid rgba(238,247,255,.95);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 30px rgba(210,240,255,.62),inset 0 0 14px rgba(210,240,255,.18);mix-blend-mode:screen}#cursor span{position:absolute;inset:-7px;border-radius:inherit;border:1px solid rgba(210,240,255,.18);animation:pulse 1.9s infinite ease-in-out}body.glitch .main-card{animation:microglitch .18s steps(2,end) infinite}body.night .bg-tint{background:radial-gradient(circle at 50% 35%,rgba(80,130,185,.12),transparent 30%),linear-gradient(120deg,rgba(1,4,10,.92),rgba(0,0,0,.84),rgba(4,11,20,.88))}@keyframes marquee{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(calc(-100% + 190px))}}@keyframes pulse{0%,100%{transform:scale(.8);opacity:.2}50%{transform:scale(1.45);opacity:.55}}@keyframes breath{0%,100%{opacity:0;transform:translate(-50%,30px) scale(.6)}45%{opacity:.45;transform:translate(-50%,-8px) scale(1.25)}}@keyframes microglitch{0%{transform:translate(0)}50%{transform:translate(1px,-1px)}100%{transform:translate(-1px,1px)}}



/* V6.3 responsive layout + real visitor counter under profile card */
.visitor-chip{position:relative;z-index:16;display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);padding:12px 18px;border:1px solid rgba(220,245,255,.22);border-radius:999px;background:linear-gradient(135deg,rgba(210,238,255,.12),rgba(3,8,14,.58));backdrop-filter:blur(18px);box-shadow:0 18px 70px rgba(0,0,0,.36),0 0 36px rgba(190,230,255,.1);font-size:12px;letter-spacing:.12em;color:#eef8ff;opacity:.9;transition:opacity .25s,transform .25s;overflow:hidden;margin:0 auto}
.visitor-chip:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(235,250,255,.13),transparent);transform:translateX(-120%);animation:visitorShine 7s infinite ease-in-out;pointer-events:none}.visitor-chip:hover{opacity:1;transform:translateY(-2px)}.visitor-chip .eye{width:22px;height:22px;border:1px solid rgba(235,250,255,.72);border-radius:50%;display:grid;place-items:center;font-size:9px;color:#eaf8ff;box-shadow:0 0 24px rgba(215,245,255,.32),inset 0 0 12px rgba(215,245,255,.16);animation:visitorPulse 2.8s infinite ease-in-out}.visitor-chip b{font-size:16px;min-width:58px;text-align:right;text-shadow:0 0 18px rgba(215,245,255,.28)}.visitor-chip small{opacity:.68;white-space:nowrap}.visitor-chip i{font-style:normal;opacity:.5;border-left:1px solid rgba(220,245,255,.18);padding-left:10px;letter-spacing:.05em;text-transform:lowercase;white-space:nowrap}.visitor-chip.bump{animation:visitorBump .55s ease}
@keyframes visitorPulse{0%,100%{transform:scale(.92);opacity:.65}50%{transform:scale(1.08);opacity:1}}@keyframes visitorBump{0%{filter:brightness(1)}45%{filter:brightness(1.8);box-shadow:0 0 60px rgba(220,245,255,.35)}100%{filter:brightness(1)}}@keyframes visitorShine{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media(max-width:1280px){.layout{grid-template-columns:minmax(210px,300px) minmax(320px,520px) minmax(210px,300px);gap:16px;max-width:1160px}.main-card{padding:28px}.name{font-size:clamp(42px,5.2vw,64px)}.avatar-wrap,.avatar,.avatar-fallback{width:98px;height:98px}.side{padding:16px}.item{grid-template-columns:48px minmax(0,1fr)}.item img,.game-cover-wrap{width:48px;height:48px}.spotify-box{grid-template-columns:74px minmax(0,1fr) 28px}.cover{width:74px;height:74px}}
@media(min-width:981px) and (max-width:1080px){.layout{grid-template-columns:minmax(300px,560px) minmax(260px,360px);grid-template-areas:"main steam" "songs steam";align-items:start;padding-top:26px}.center-stack{grid-area:main}.layout>aside:first-child{grid-area:songs}.layout>aside:last-child{grid-area:steam}.side{max-height:none}.main-card{padding:26px}.topbar{gap:10px}.temp{font-size:12px}}
@media(max-width:760px){html,body{overflow-x:hidden;cursor:auto}.app{padding:12px 12px 28px;display:block}.layout{display:flex;flex-direction:column;gap:14px;padding:16px 0 10px}.center-stack{order:0;width:100%}.layout>aside:first-child{order:1}.layout>aside:last-child{order:2}.main-card,.panel{border-radius:20px}.main-card{padding:22px 16px}.side{width:100%;padding:15px}.name{font-size:clamp(38px,12vw,56px);letter-spacing:.1em}.avatar-wrap,.avatar,.avatar-fallback{width:86px;height:86px}.avatar-fallback{font-size:36px}.status-grid{grid-template-columns:1fr;gap:10px;margin:18px 0}.spotify-box{grid-template-columns:62px minmax(0,1fr);gap:12px;padding:12px}.cover{width:62px;height:62px;border-radius:13px}.bars{display:none}.links{gap:8px;flex-wrap:wrap}.links a{padding:9px 12px;font-size:11px}.command{font-size:10px;line-height:1.6}.visitor-chip{margin:2px auto 6px;padding:10px 13px;font-size:10px;gap:8px}.visitor-chip b{font-size:14px;min-width:48px}.visitor-chip i{display:none}.topbar{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"clock mute" "temp temp";padding:4px 0}.topbar #clock{grid-area:clock}.topbar .temp{grid-area:temp;text-align:center;font-size:11px;opacity:.72}.topbar #muteBtn{grid-area:mute;padding:10px 13px;font-size:11px}.system{position:relative;left:auto;right:auto;bottom:auto;margin-top:14px;padding:12px}.sys{gap:8px;font-size:10px}.sys b{margin-right:8px}#cursor{display:none}a,button{cursor:pointer}#yt-wrap{inset:-20%;filter:brightness(.5) contrast(1.08) saturate(.55) blur(1px)}}
@media(max-height:760px) and (min-width:981px){.app{padding-top:12px;padding-bottom:78px}.layout{padding-top:8px;padding-bottom:20px}.main-card{padding:22px}.avatar-wrap,.avatar,.avatar-fallback{width:82px;height:82px}.avatar-fallback{font-size:34px}.name{font-size:clamp(40px,5vw,58px);margin:14px 0 2px}.status-grid{margin:16px 0}.spotify-box{grid-template-columns:66px minmax(0,1fr) 28px;padding:12px}.cover{width:66px;height:66px}.side{max-height:calc(100vh - 170px)}.system{padding:9px 14px}.visitor-chip{padding:9px 14px}}