*{margin:0;padding:0;box-sizing:border-box;font-family:'Courier New',monospace}
:root{--accent:rgba(255,255,255,.35)}
body{background:#000;color:#fff;overflow:hidden;cursor:none}
a,button,input{cursor:none!important}
.cursor{position:fixed;width:14px;height:14px;border:2px solid #fff;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s}
.cursor.hover{width:26px;height:26px}
#bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
#start{position:fixed;inset:0;background:rgba(0,0,0,.9);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:30;font-size:22px;text-align:center;padding:0 20px}
.hidden{display:none!important}
#card{position:fixed;top:50%;left:50%;width:820px;max-width:92vw;background:rgba(0,0,0,.7);border:1px solid var(--accent);padding:20px;border-radius:15px;z-index:20;display:flex;flex-direction:column;gap:15px;backdrop-filter:blur(10px);transform:translate(-50%,-50%);opacity:0;transition:opacity 1s,border-color .4s}
#card.show{opacity:1}
.head{display:flex;gap:15px;align-items:flex-start}
.pic{position:relative;width:150px;height:150px;flex:none}
.pic img,.pic .ph{border:2px solid rgba(255,255,255,.6);width:150px;height:150px;border-radius:50%;object-fit:cover;background:#111;display:flex;align-items:center;justify-content:center;font-size:60px}
.info{flex:1}
#name{font-family:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;font-weight:700;font-size:32px;line-height:1.2;letter-spacing:3px;filter:drop-shadow(0 0 8px rgba(255,255,255,.7));margin-bottom:10px;min-height:40px}
#bio{color:rgba(255,255,255,.8);font-size:18px;line-height:1.5;min-height:54px}
.sep{height:1px;background:rgba(255,255,255,.2);margin:10px 0}
.social{display:flex;justify-content:center;gap:14px}
.social a{color:#fff;transition:transform .3s}
.social a:hover{transform:scale(1.4) rotateY(15deg)}
.social svg{width:36px;height:36px;fill:currentColor;filter:drop-shadow(0 0 8px rgba(255,255,255,.7))}
.foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.pill{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);padding:8px 15px;border-radius:20px;font-size:14px}
.pill svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
#footer{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:40;padding:8px 12px;font-size:12px;letter-spacing:1px;text-transform:uppercase;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:12px;backdrop-filter:blur(8px);white-space:nowrap}
.goto{position:absolute;top:15px;right:15px;z-index:5;padding:10px 20px;background:rgba(0,0,0,.8);border:2px solid rgba(192,192,192,.5);border-radius:6px;color:#fff;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;backdrop-filter:blur(10px);transition:all .3s}
.goto:hover{background:rgba(192,192,192,.2);border-color:rgba(192,192,192,.8);transform:translateY(-2px);box-shadow:0 4px 12px rgba(192,192,192,.3)}
@media(max-width:600px){.goto{top:8px;right:8px;padding:6px 10px;font-size:10px}.head{padding-top:28px}.head{flex-direction:column;align-items:center;text-align:center}#name{font-size:24px}#bio{font-size:14px}.pic,.pic img,.pic .ph{border:2px solid rgba(255,255,255,.6);width:120px;height:120px}.foot{flex-direction:column;gap:8px}}
.pill.off{display:none}
#yt{display:none;position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;background:#000}
#yt iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;transform:translate(-50%,-50%);border:0}
.ctrl{position:fixed;left:50%;bottom:60px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;z-index:20;background:rgba(0,0,0,.7);padding:8px 14px;border-radius:20px;backdrop-filter:blur(5px)}
.ctrl svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.slider{-webkit-appearance:none;appearance:none;width:100px;height:5px;border-radius:5px;background:rgba(255,255,255,.3);outline:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff}
.slider::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
.pic::before{content:'';position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(rgba(255,255,255,.12) 0 50%,#fff 88%,rgba(255,255,255,.12));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:spin 3s linear infinite;pointer-events:none}
.pic::after{content:'';position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 22px rgba(255,255,255,.35);animation:pulse 2.6s ease-in-out infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.pic::before,.pic::after{animation:none}#card{transition:none}}