:root{
    --void: #07080a;
    --panel: #10141299;
    --mint: #8CFFC9;
    --mint-dim: #4d7a63;
    --magenta: #ff3e8e;
    --cyan: #3ef0ff;
    --text: #EAF2EE;
    --dim: #aaa0a7;
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0; padding:0; height:100%;
    background:var(--void);
    color:var(--text);
    font-family:'Space Grotesk', system-ui, sans-serif;
    overflow:hidden;
  }

  .bg-image{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:url('images/background.jpg');
    background-size:cover;
    background-position:center;
    filter: brightness(0.85) contrast(1.05);
    opacity:1;
    animation: bgmove 22s ease-in-out infinite;
  }

  @keyframes bgmove{
    0%{ transform: scale(1) translate(0,0); }
    50%{ transform: scale(1.12) translate(-1.5%, -1%); }
    100%{ transform: scale(1) translate(0,0); }
  }

  .bg-dark-overlay{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(180deg, rgba(5,5,6,0.5) 0%, rgba(5,5,6,0.7) 50%, rgba(5,5,6,0.88) 100%);
  }

  .bg-video{
    position:fixed; inset:0; z-index:0;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    transition: opacity 1.4s ease;
    pointer-events:none;
  }
  .bg-video.show{ opacity:1; }
  .bg-video.top{ z-index:1; }

  .video-toggle-btn{
    position:fixed; bottom:16px; right:18px; z-index:10;
    background:none; border:none; cursor:pointer;
    font-size:1.05rem;
    color: rgba(255,255,255,0.12);
    transition: color .3s ease, transform .2s ease;
    padding:4px;
    line-height:1;
  }
  .video-toggle-btn:hover{ color: rgba(255,70,90,0.55); transform: scale(1.15); }
  .video-toggle-btn.active{ color: #fff; }

  #particles{
    position:fixed; inset:0; width:100%; height:100%; display:block;
    z-index:2;
  }

  .vignette{
    position:fixed; inset:0; z-index:3; pointer-events:none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.82) 100%);
  }

  .scanlines{
    position:fixed; inset:0; z-index:4; pointer-events:none; opacity:0.05;
    background: repeating-linear-gradient(0deg, #fff 0px, #fff 1px, transparent 1px, transparent 3px);
  }

  .stage{
    position:relative; z-index:5;
    height:100%; width:100%;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
  }

  .card{
    position:relative;
    isolation:isolate;
    width:100%; max-width:360px;
    background: rgba(2,2,3,0.92);
    border:1px solid rgba(219,194,205,0.28);
    border-radius:12px;
    padding:42px 30px 30px;
    text-align:center;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 0 50px rgba(0,0,0,0.9), 0 30px 70px rgba(0,0,0,0.85);
  }

  .card-texture{
    position:absolute; inset:0; width:100%; height:100%;
    z-index:-1; border-radius:4px; overflow:hidden; pointer-events:none;
    opacity:.16; filter:invert(1) grayscale(1);
    -webkit-mask-image:radial-gradient(ellipse at 50% 44%,rgba(0,0,0,.22) 12%,rgba(0,0,0,.65) 48%,#000 85%);
    mask-image:radial-gradient(ellipse at 50% 44%,rgba(0,0,0,.22) 12%,rgba(0,0,0,.65) 48%,#000 85%);
  }

  @keyframes rise{
    from{ opacity:0; transform: translateY(18px); }
    to{ opacity:1; transform: translateY(0); }
  }

  .avatar-wrap{
    position:relative;
    width:120px; height:120px;
    margin:0 auto 24px;
  }

  .avatar-ring{
    position:absolute; inset:-6px;
    border-radius:26px;
    background: conic-gradient(from 0deg, #1a1a1d, #3a0d13, #0d0d0e, #5c0d17, #1a1a1d);
    animation: spin 10s linear infinite;
    opacity:0.9;
  }

  .avatar-ring-symbol{
    position:absolute; inset:-22px;
    width: calc(100% + 44px);
    height: calc(100% + 44px);
    object-fit:contain;
    pointer-events:none;
    animation: spin 24s linear infinite;
  }

  @keyframes blink{
    0%, 100%{ filter: brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0)); }
    50%{ filter: brightness(2.8) drop-shadow(0 0 14px rgba(255,255,255,0.9)); }
  }

  @keyframes spin{ to{ transform: rotate(360deg); } }

  .avatar{
    position:relative;
    width:120px; height:120px;
    border-radius:30px;
    object-fit:cover;
    object-position:center;
    display:block;
    border:2px solid #000;
  }


  .username{
    font-family:'Share Tech Mono', monospace;
    font-size:1.7rem;
    letter-spacing:1px;
    position:relative;
    color:var(--text);
    margin:0 0 6px;
    display:inline-block;
  }

  .tag{
    display:flex; align-items:center; justify-content:center; gap:12px;
    margin:10px 0 26px;
    font-family:'Share Tech Mono',monospace;
    font-size:11px; font-weight:400; line-height:1.7;
    color:#bcb1b7; letter-spacing:2px;
    text-shadow:0 0 14px rgba(229,192,208,.12);
  }
  .tag::before,.tag::after{
    content:''; width:20px; height:1px; flex-shrink:0;
    background:linear-gradient(90deg,transparent,#bcb1b74d);
  }
  .tag::after{ transform:rotate(180deg); }

  .links{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

  .link-btn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:48px; height:48px; padding:11px; position:relative;
    background:transparent;
    border:0;
    border-radius:50%;
    color:var(--text);
    font-family:'Space Grotesk', sans-serif;
    font-size:0.95rem;
    cursor:pointer;
    transition: color .2s ease, transform .15s ease;
  }
  .link-btn:hover{
    transform: translateY(-3px) scale(1.08);
  }
  .link-btn:active{ transform: translateY(0); }

  .link-btn svg,.link-btn img{ width:24px; height:24px; flex-shrink:0; object-fit:contain; }
  .link-btn svg{ fill:currentColor; transition:filter .2s ease; }
  .link-btn:hover svg,.link-btn:focus-visible svg{ filter:drop-shadow(0 0 7px currentColor); }
  .link-btn img{ border-radius:5px; }
  .link-btn:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
  .link-btn::after{ content:attr(data-tooltip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%); padding:5px 8px; border-radius:5px; background:#101013; color:#eee; font-size:11px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; }
  .link-btn:hover::after,.link-btn:focus-visible::after{ opacity:1; }
  .link-btn:hover,.link-btn:focus-visible{ color:#fff; }
  .links a{ text-decoration:none; }
  @media(prefers-reduced-motion:reduce){ .link-btn,.link-btn::after,.link-btn svg{ transition:none; } .link-btn:hover{ transform:none; } }

  .copied-toast{
    position:fixed; bottom:26px; left:50%;
    transform: translate(-50%, 20px);
    background: rgba(16,20,23,0.95);
    border:1px solid #c49aaa60;
    color:#e4ced9;
    padding:10px 18px;
    border-radius:10px;
    font-size:0.85rem;
    opacity:0;
    pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
    z-index:10;
  }
  .copied-toast.show{
    opacity:1;
    transform: translate(-50%, 0);
  }

  .sound-hint{
    position:fixed; top:18px; right:18px; z-index:10;
    font-size:0.7rem; color:var(--dim);
    display:flex; align-items:center; gap:6px;
    opacity:0.7;
  }
  .sound-hint .dot{ width:6px; height:6px; border-radius:50%; background:var(--mint); }

  .views-hint{
    position:fixed; top:18px; left:18px; z-index:10;
    font-size:0.7rem; color:var(--dim);
    display:flex; align-items:center; gap:5px;
    opacity:0.85;
    font-family:'Share Tech Mono', monospace;
  }
  .views-hint svg{ width:12px; height:12px; opacity:0.8; }

  :root { color-scheme: dark; }
  button, a, input { -webkit-tap-highlight-color: transparent; }
  button { touch-action: manipulation; }
  :focus-visible { outline: 2px solid #d9b6c6; outline-offset: 4px; }
  #profile:focus { outline: none; }
  ::selection { background: #754255; color: #fff; }
  #particles { pointer-events: none; }
  .card { background: linear-gradient(155deg, #171217f0, #060608f5 65%); -webkit-backdrop-filter: blur(4px); }
  .card::before { content: ''; position: absolute; top: -1px; left: 22%; right: 22%; height: 1px; background: linear-gradient(90deg, transparent, #dbc0ce99, transparent); }
  .username { font-size: 1.85rem; line-height: 1.25; }
  .link-btn { background: #ffffff04; border: 1px solid #ffffff12; border-radius: 12px; transition: color .2s, background .2s, border-color .2s, transform .2s; }
  .link-btn:hover { background: #c49aaa12; border-color: #c49aaa50; }
  .video-toggle-btn { width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; color: #cbb7c1; font-size: 23px; }
  .video-toggle-btn:hover { color: #f0c9da; }
  .views-hint { color: #b9adb4; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    #particles { display: none; }
  }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }