how to use it

live preview here: https://janitorai.com/profiles/16b0b9c2-012d-4baf-ac1e-358b2d68a040_profile-of-tokyodoll

how to use it

1. Changing Text & Information

Most of the text can be found directly within the HTML structure. Search for the specific tags and replace the content between them:

Name / Codename / MBTI / Pronouns: Look for the ID Card section (<section class="pnl b idcard">) and edit the <dd> tags:
⎗

✓
1 2
<dt>NAME</dt><dd>YOUR_NAME</dd> <dt>CODENAME</dt><dd>YOUR_CODENAME</dd>

Lead Operator Bio: Find the section with [LEAD OPERATOR] to change your main bio text:

⎗
✓
   <div class="bd prof">
  <div><h3>SUBJECT: YOUR_NAME</h3><p>Your custom bio goes here.</p></div>
</div>

Accomplices / Crew List: Inside the [KNOWN ACCOMPLICES] section (class="frs"), you can update or add profile cards for your friends or characters:

⎗
✓
   <a class="fr" href="YOUR_PROFILE_LINK">
  <span class="ph"><img src="IMAGE_URL" alt=""></span>
  <div><div class="fn">FRIEND_NAME</div><div class="fd">ROLE_OR_TITLE</div></div>
  <span class="rl">GETAWAY DRIVER</span>
</a>

External Links: Update the URLs in the footer links section (class="links"):

⎗
✓
   <a href="YOUR_LINK_HERE">INSTAGRAM</a>
<a href="YOUR_LINK_HERE">DISCORD</a>

2. Changing Images

Images are linked via standard src="..." attributes. To replace an image, upload your image to a host (like File.Garden, Imgur, or Discord) and paste the direct image URL into the src attribute:

ID Card Picture:
⎗

✓
1
<img src="YOUR_NEW_IMAGE_URL" alt="">
Surveillance Feeds (CCTV Cams): Find the cam-screen section and update the image sources inside each <img> tag:
⎗

✓
1
<img src="YOUR_NEW_GIF_OR_IMAGE_URL" alt="">

3. Changing Colors

The color scheme is controlled via CSS classes (.pnl.b, .pnl.g, .pnl.p) and root accent properties at the bottom in the <style> block:

Neon Accent Classes:

.pnl.b controls Blue elements.
.pnl.g controls Cyan/Teal elements.
.pnl.p controls Pink/Magenta elements.

Global Color Variables / Hex Codes: You can perform a find-and-replace in the <style> section for the main color codes:

⎗

#00d9ff (Primary Blue)
#00f5ff (Primary Cyan)
#ff2ea6 (Primary Pink)
#010306 (Dark Background)

Simply replace these hex codes with your preferred color palette values.

the code

COPY AND PASTE EVERYTHING!!!!

⎗
✓
<div class="cp">

<div class="idrow">
<section class="pnl b idcard"><div class="bar"><b>[ID_CARD // WANTED// CLASS-A FUGITIVE]</b><i>NO. 11-ANGEL</i></div>
<div class="bd idbd">
<div class="idtop">

<div class="ph idpic"><em></em><img src="https://file.garden/armdUXMXF3bq2ABd/TA-2026-10-20-11-00-52-masterpiec-1595492572.png" alt=""></div>
<dl>
<dt>NAME</dt><dd>ANGEL</dd>
<dt>CODENAME</dt><dd>SIGMALICIOUS</dd>
<dt>MBTI</dt><dd>ENTP</dd>
<dt>PRONOUNS</dt><dd>SHE/HER (OR YOURS)</dd>
<dt>AGE</dt><dd>CLASSIFIED</dd>
<dt>LAST SEEN</dt><dd>TOKYO DIVISION</dd>
<dt>STATUS</dt><dd>AT LARGE</dd>
</dl>
</div>
<div class="barcode"></div>
<div class="mrz">ANGEL&lt;&lt;THE&lt;DOLL&lt;&lt;&lt;ENTP&lt;&lt;&lt;TOKYO&lt;DIV&lt;&lt;&lt;0001</div>
</div></section>
</div>

<div class="sys"><span>MR VAULT (TM)</span><span>COPYRIGHT ANGEL(C) 2026</span><span>VER V1.03</span><span>PORT......3</span><span class="blink">● SILENT ALARM: ARMED</span></div>

<div class="ticker"><div class="track">
<span>▓▒░ 金庫 // BREACH DETECTED ▓▒░ ARASAKA SECURITY // OFFLINE ▓▒░ AUTHORIZED PERSONELL ONLY ▓▒░ 金庫 // ASSET EXTRACTION IN PROGRESS ▓▒░ VAULT BREACH DETECTED </span>
<span>▓▒░ 金庫 // BREACH DETECTED ▓▒░ ARASAKA SECURITY // OFFLINE ▓▒░ AUTHORIZED PERSONELL ONLY ▓▒░ 金庫 // ASSET EXTRACTION IN PROGRESS ▓▒░ VAULT BREACH DETECTED </span>
</div></div>

<div class="grid">

<section class="pnl p g-rec1"><div class="bar"><b>[CALL_LOG_0417]</b><i class="blink">● REC</i></div>
<div class="bd"><h3>INTERCEPTED // SECURITY BRIEFING</h3>
<div class="log">
<p><u>ANGEL&gt;</u> Characters are unfortunately fictional.</p>
<p><u>ANGEL&gt;</u> Content warnings are there to help YOU choose your experience.</p>
</div>
<div class="wave"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
</div></section>

<section class="pnl g g-rec2"><div class="bar"><b>[CALL_LOG_0382]</b><i class="blink">● REC</i></div>
<div class="bd"><h3>INTERCEPTED // POST-OP DEBRIEF</h3>
<div class="log">
<p><u>ANGEL&gt;</u> Every city has its regulars. Thank you for supporting me and being a part of my dumb fabricated little world where I progressively become more delusional by the passing second.</p>
</div>
<div class="wave"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
</div></section>

<section class="pnl b g-prof"><div class="bar"><b>[LEAD OPERATOR]</b><i>FILE 001</i></div>
<div class="bd prof">
<div><h3>SUBJECT: ANGEL</h3><p>Hey! My name's Angel! My MBTI is ENTP, I go by she/her pronouns.... but I also go by yours (rizz?).</p></div>
</div></section>

<section class="pnl g g-feed"><div class="bar"><b>[SURVEILLANCE_FEED_TOKYO]</b><i class="blink">● LIVE</i></div>
<div class="bd feedbd">
<div class="cam-feed"><div class="cam-screen">
<details class="cam-d c1" name="cam" open=""><summary>&nbsp;</summary><div class="cam-frame ph">
<img src="https://file.garden/armdUXMXF3bq2ABd/Untitled%20(512%20x%20450%20px).gif" alt="">
<div class="cam-hud"><span>CAM 01 // MAIN VAULT CCTV</span><span class="cam-rec">● REC</span></div><div class="cam-time">10/19/2026 03:42:17</div></div></details>
<details class="cam-d c2" name="cam"><summary>&nbsp;</summary><div class="cam-frame ph">
<img src="https://file.garden/armdUXMXF3bq2ABd/Untitled%20(512%20x%20450%20px)%20(1).gif" alt="">
<div class="cam-hud"><span>CAM 02 // ELEVATOR 9 CCTV</span><span class="cam-rec">● REC</span></div><div class="cam-time">10/19/2026 03:42:17</div></div></details>
<details class="cam-d c3" name="cam"><summary>&nbsp;</summary><div class="cam-frame ph">
<img src="https://file.garden/armdUXMXF3bq2ABd/nuh.gif" alt="">
<div class="cam-hud"><span>CAM 03 // BEDROOM CCTV</span><span class="cam-rec">● REC</span></div><div class="cam-time">10/19/2026 03:42:17</div></div></details>
<details class="cam-d c4" name="cam"><summary>&nbsp;</summary><div class="cam-frame ph">
<img src="https://file.garden/armdUXMXF3bq2ABd/dsaj.gif" alt="">
<div class="cam-hud"><span>CAM 04 // KONBINI CCTV</span><span class="cam-rec">● REC</span></div><div class="cam-time">10/19/2026 03:42:17</div></div></details>
</div></div>
</div></section>

<section class="pnl b g-cam1"><div class="bd cambd"><div class="cam-frame ph"><img src="https://file.garden/armdUXMXF3bq2ABd/download.gif" alt=""><div class="cam-hud"><span>CAM 05//ALLEY 01</span><span class="cam-rec">●</span></div></div></div></section>
<section class="pnl p g-cam2"><div class="bd cambd"><div class="cam-frame ph"><img src="https://file.garden/armdUXMXF3bq2ABd/download%20(1).gif" alt=""><div class="cam-hud"><span>CAM 06//ALLEY 06</span><span class="cam-rec">●</span></div></div></div></section>

<section class="pnl b g-friends"><div class="bar"><b>[KNOWN ACCOMPLICES]</b><i>CREW LIST</i></div>
<div class="bd">
<div class="frs">
<a class="fr" href="https://janitorai.com/profiles/5e623c43-20aa-43d2-99fd-88206f6c5421_profile-of-general-lui"><span class="ph"><img src="https://file.garden/armdUXMXF3bq2ABd/TA-2026-10-12-11-37-22-masterpiec-1541265597.png" alt=""></span><div><div class="fn">LUVLUI</div><div class="fd">my wifey</div></div><span class="rl">GETAWAY DRIVER</span></a>
<a class="fr" href="https://janitorai.com/profiles/54259e10-ade2-4a5e-8618-03de70407c77_profile-of-ayaume"><span class="ph"><img src="https://file.garden/armdUXMXF3bq2ABd/Untitled%20(512%20x%20450%20px).jpg" alt=""></span><div><div class="fn">AYAUME</div><div class="fd">my lil gooner</div></div><span class="rl">LOOKOUT</span></a><a class="fr" href="https://janitorai.com/profiles/THEIR-PROFILE-LINK"><span class="ph"><img alt="" src="THEIR-PICTURE-URL"></span><div><div class="fn">???</div><div class="fd">RECRUITMENT IN PROGRESS</div></div></a>
<a class="fr" href="https://janitorai.com/profiles/THEIR-PROFILE-LINK"><span class="ph"><img alt="" src="THEIR-PICTURE-URL"></span><div><div class="fn">???</div><div class="fd">RECRUITMENT IN PROGRESS</div></div></a>
<a class="fr" href="https://janitorai.com/profiles/THEIR-PROFILE-LINK"><span class="ph"><img alt="" src="THEIR-PICTURE-URL"></span><div><div class="fn">???</div><div class="fd">RECRUITMENT IN PROGRESS</div></div></a>
<a class="fr" href="https://janitorai.com/profiles/THEIR-PROFILE-LINK"><span class="ph"><img alt="" src="THEIR-PICTURE-URL"></span><div><div class="fn">???</div><div class="fd">RECRUITMENT IN PROGRESS</div></div></a>
<a class="fr" href="https://janitorai.com/profiles/THEIR-PROFILE-LINK"><span class="ph"><img alt="" src="THEIR-PICTURE-URL"></span><div><div class="fn">???</div><div class="fd">RECRUITMENT IN PROGRESS</div></div></a>
</div>
</div></section>

</div>

<div class="bottom">
<a class="pnl p g-np" href="https://open.spotify.com/track/6XaJfhwof7qIgbbXO5tIQI?si=519512e0e2a34216"><div class="bar"><b>[--GETAWAY_TRACK]</b><i class="eq"><s></s><s></s><s></s><s></s><s></s></i></div>
<div class="bd">
<div class="npb"><span class="ph"><img src="https://file.garden/armdUXMXF3bq2ABd/850ffa96e0caaaebcb1cbeeffd3a62c5.1000x1000x1.png" alt=""></span>
<div><div class="nt">Igual Que Un Ángel</div><div class="na">Kali Uchis, Peso Pluma</div></div></div>
<div class="npbar"><div class="npfill"></div></div>
<div class="nptime"><span>▶ PLAYING</span><span>3:47</span></div>
</div></a>

<section class="pnl g g-links"><div class="bar"><b>[-TALK DIRTY TO ME]</b><i>3 OPEN</i></div>
<div class="bd"><div class="links">
<a href="https://www.instagram.com/tokyodoll999/">INSTAGRAM</a>
<a href="https://forms.gle/25VqkwbTHX9BjbZJA">BOT REQUESTS</a>
<a href="https://discord.com/users/1537687098159661066">DISCORD</a>
<a href="https://your-link-here" rel="noopener noreferrer">???</a>
<a href="https://your-link-here" rel="noopener noreferrer">???</a>

</div></div></section>
</div>

  <div class="credits">
<br> code done by <a href="https://janitorai.com/profiles/16b0b9c2-012d-4baf-ac1e-358b2d68a040_profile-of-tokyodoll"><emph>@TOKYODOLL</emph></a>
  </div>

</div>

<style>

.pnl.b{ color:#00d9ff; }
.pnl.g{ color:#00f5ff; }
.pnl.p{ color:#ff2ea6; }


html,body,.pp-page-background{ background:#010306 !important; }
body{ color:#00d9ff; font-family:"Courier Prime","Courier New",monospace; font-size:15px; }
a{ color:#00d9ff; text-decoration:none; transition:.2s; }
.pp-uc-avatar-container{ display:none; }
.pp-uc-avatar{ height:0; }


.profile-page-flex{ flex-direction:column !important; align-items:stretch; }
.profile-info-hstack{ flex-direction:column !important; }
.profile-info-stack-inner-flex{ justify-content:center; }
.profile-page-flex > div:not(.profile-page-container-flex-box){ max-width:unset !important; width:100% !important; }
.profile-page-container-flex-box{ width:100% !important; max-width:100% !important; }
.profile-info-stack-inner{
  position:relative; z-index:5; width:92%; margin:18px auto 0; padding:18px; box-sizing:border-box; text-align:center;
  background:#02050a; border:2px solid #00f5ff; box-shadow:0 0 16px #00c8ff, inset 0 0 26px #00c8ff33;
}


@media screen and (min-width:901px){
  .profile-info-stack{ position:relative; }
  .profile-info-hstack{ align-items:flex-start !important; }   

  .profile-info-stack-inner{
    width:calc(min(1168px, 100% - 32px) / 2 - 10px); height:420px; box-sizing:border-box;
    margin:18px 0 -420px calc(50% + 10px);
    padding:112px 18px 0 30px;          
    display:flex; flex-direction:column; justify-content:flex-start;
    align-items:flex-start !important; text-align:left;
  }
  .profile-info-stack-inner > *{ align-self:flex-start; }
  .profile-info-stack-inner-flex{ justify-content:flex-start; }
  .pp-uc-title,.pp-uc-followers-count,.pp-uc-member-since{ text-align:left; }
  .profile-badges{ justify-content:flex-start; }

  .cp{ margin-top:-7px !important; }    
  .idrow{ width:calc(50% - 10px); height:420px; }
  .idcard{ height:100%; }


  .profile-info-stack > .css-1rxxh0p{
    position:absolute !important; z-index:8;
    left:calc(50% + 10px) !important;
    width:calc(min(1168px, 100% - 32px) / 2 - 10px) !important;
    top:calc(18px + 262px) !important;  
    transform:none !important;
    margin:0 !important;
    padding-left:32px; box-sizing:border-box;   
  }
  .profile-info-stack > .css-1rxxh0p .css-1aq5geu{
    margin:0 !important; justify-content:flex-start; align-items:center; gap:10px;
  }
}

.pp-uc-title{
  font-family:"Graduate","Orbitron",monospace !important; font-weight:400 !important; font-size:26px; letter-spacing:3px; text-align:center; text-transform:uppercase;
  color:#00f5ff !important; text-shadow:2px 0 #ff2ea6, -2px 0 #00d9ff, 0 0 16px #00c8ff;
}
.pp-uc-followers-count{ font-family:"Courier Prime","Courier New",monospace; font-size:18px; text-align:center; color:#00f5ff; text-shadow:0 0 10px #00c8ff; }
.pp-uc-followers-count > span + span{ font-size:0; }
.pp-uc-followers-count > span + span::after{ content:" FUGITIVES ON THE RUN"; font-size:18px; }
.pp-uc-member-since{ font-size:0; text-align:center; }
.pp-uc-member-since:after{ content:"ON THE RUN SINCE '25"; font-family:"Courier Prime","Courier New",monospace; font-size:17px; color:#ff2ea6; text-shadow:0 0 10px #ff1493; }


.pp-uc-follow-button{
  display:flex !important; align-items:center; justify-content:center;
  width:12rem !important; height:2.6rem !important; margin:0 !important; padding:0 !important; overflow:hidden;
  background:#02050a !important; border:2px solid #00f5ff !important; border-radius:0 !important;
  opacity:1 !important; box-shadow:0 0 12px #00c8ff; transition:.2s !important;
}

.pp-uc-follow-button::before,.pp-uc-follow-button::after{ content:none !important; display:none !important; }

.pp-uc-follow-button .pp-uc-follow-text{ font-size:0 !important; line-height:0 !important; opacity:1 !important; }
.pp-uc-follow-button .pp-uc-follow-text::after{
  content:"JOIN THE HEIST";
  font-family:"Graduate","Orbitron",monospace; font-size:12px; line-height:1; letter-spacing:2px; white-space:nowrap;
  color:#00f5ff !important; -webkit-text-fill-color:#00f5ff !important; opacity:1 !important;
  text-shadow:0 0 8px #00c8ff;
}
.pp-uc-follow-button[data-following=true] .pp-uc-follow-text::after{ content:"LAY LOW"; }
.pp-uc-follow-button:hover{ background:#00f5ff !important; }
.pp-uc-follow-button:hover .pp-uc-follow-text::after{ color:#000 !important; -webkit-text-fill-color:#000 !important; text-shadow:none; }

.pp-uc-options-menu{
  display:flex !important; align-items:center; gap:8px;
  height:2.6rem !important; padding:0 14px !important;
  background:#02050a !important; border:2px solid #00f5ff !important; border-radius:0 !important;
  color:#00f5ff !important; font-family:"Graduate","Orbitron",monospace !important;
  font-size:12px !important; letter-spacing:2px; text-transform:uppercase;
  box-shadow:0 0 12px #00c8ff; cursor:pointer; transition:.2s;
}
.pp-uc-options-menu span,.pp-uc-options-menu svg{ color:inherit !important; }
.pp-uc-options-menu:hover{ background:#00f5ff !important; color:#000 !important; }
.pp-uc-options-menu-item{ font-family:"Courier Prime","Courier New",monospace; font-size:16px; }
.pp-tabs-wrapper{ display:none !important; }


.cp{ width:100%; max-width:1200px; margin:18px auto 40px; padding:0 16px; box-sizing:border-box; }
div:has(> div > .css-1s5evre){ width:100%; max-width:1200px; margin:0 auto; padding:0 16px; box-sizing:border-box; }
.grid{ display:grid; gap:20px; grid-template-columns:1fr 1.25fr .55fr; grid-template-rows:repeat(12,56px); }
.g-rec1{ grid-area:1/1/5/2 } .g-rec2{ grid-area:5/1/9/2 } .g-prof{ grid-area:9/1/13/2 }
.g-feed{ grid-area:1/2/7/3 } .g-cam1{ grid-area:1/3/4/4 } .g-cam2{ grid-area:4/3/7/4 }
.g-friends{ grid-area:7/2/13/4 }
.bottom{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; margin-top:20px; }

.sys{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-bottom:10px; font-size:14px; letter-spacing:2px; color:#00f5ff; text-shadow:0 0 8px #00c8ff; }
.blink{ animation:Blink 1.1s steps(1,end) infinite; font-style:normal; }
.ticker{ overflow:hidden; height:34px; margin-bottom:22px; border:1px solid #ff2ea6; background:#0a0208; box-shadow:0 0 12px #ff1493, inset 0 0 12px #ff149444; }
.track{ display:flex; width:max-content; animation:Tape 40s linear infinite; }
.track span{ flex-shrink:0; line-height:32px; font-family:"Courier Prime",sans-serif; font-size:16px; letter-spacing:2px; white-space:nowrap; color:#ff2ea6; text-shadow:0 0 8px #ff1493, 1px 0 #00d9ff; }


.pnl{
  position:relative; display:flex; flex-direction:column; min-width:0; box-sizing:border-box;
  background:#02050a; border:2px solid currentColor;
  box-shadow:0 0 18px currentColor, inset 0 0 30px color-mix(in srgb,currentColor 35%,transparent);

}
.pnl::before{ content:""; position:absolute; inset:5px; border:1px solid color-mix(in srgb,currentColor 55%,transparent); pointer-events:none; z-index:6; }
.pnl::after{
  content:""; position:absolute; inset:-6px; pointer-events:none; z-index:7; background-repeat:no-repeat;
  background-image:
   linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),
   linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-position:left 0 top 5px,left 5px top 0,right 0 top 5px,right 5px top 0,left 0 bottom 5px,left 5px bottom 0,right 0 bottom 5px,right 5px bottom 0;
  background-size:11px 1px,1px 11px,11px 1px,1px 11px,11px 1px,1px 11px,11px 1px,1px 11px;
  filter:drop-shadow(0 0 3px currentColor);
}
.bar{ position:relative; z-index:5; display:flex; justify-content:space-between; margin:10px 10px 0; padding:2px 10px; border:1px solid currentColor; background:color-mix(in srgb,currentColor 22%,#000); font-size:14px; letter-spacing:2px; text-shadow:0 0 8px currentColor; }
.bar b{ font-weight:400; } .bar i{ font-style:normal; }
.bd{ position:relative; flex:1; min-height:0; margin:10px; padding:10px; overflow:hidden; box-sizing:border-box; }
.bd::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(0deg,#00000066 0 1px,transparent 1px 3px), repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 4px);
  opacity:.55; mix-blend-mode:overlay;
}
.bd::after{
  content:attr(data-k); position:absolute; right:6px; bottom:-8px; z-index:0; pointer-events:none;
  font-family:"Courier Prime",sans-serif; font-size:84px; line-height:1; color:currentColor; opacity:.13; text-shadow:0 0 20px currentColor;
}
.pnl:hover{ box-shadow:0 0 28px currentColor, 0 0 60px color-mix(in srgb,currentColor 45%,transparent), inset 0 0 40px color-mix(in srgb,currentColor 50%,transparent); }
h3{ position:relative; z-index:2; margin:0 0 10px; font-family:"Graduate","Orbitron",monospace; font-weight:400; font-size:11px; line-height:1.5; letter-spacing:1px; color:currentColor; text-shadow:2px 0 #ff2ea6, 0 0 10px currentColor, 0 0 24px currentColor; }
.pnl p{ position:relative; z-index:2; margin:0 0 8px; padding:0; font-size:16px; line-height:1.1; text-shadow:0 0 5px currentColor, 0 0 14px currentColor; }
.log u{ text-decoration:none; color:#ff2ea6; text-shadow:0 0 8px #ff2ea6; }
.wave{ position:absolute; left:14px; right:14px; bottom:10px; z-index:2; display:flex; align-items:center; gap:1px; height:36px; }
.wave i, .eq s{ flex:1; background:currentColor; box-shadow:0 0 8px currentColor; height:4px; animation:Eq 1s ease-in-out infinite; }
.wave i{ height:100%; max-height:70%; transform-origin:center; background:color-mix(in srgb,currentColor 62%,#000); box-shadow:0 0 4px color-mix(in srgb,currentColor 50%,#000); animation:Env 3.6s steps(1,end) infinite, Jit .3s steps(1,end) infinite; }


.ph{ position:relative; background:currentColor; overflow:hidden; box-shadow:0 0 14px currentColor; }
.ph img{ display:block; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; filter:grayscale(1) contrast(1.35) brightness(1.15); }
.ph::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(#000a 35%,transparent 38%) 0 0/3px 3px; mix-blend-mode:multiply; }

.prof{ display:flex; gap:12px; }
.pic{ flex:0 0 44%; border:1px solid currentColor; z-index:2; }


.feedbd{ padding:0; }
.cam-feed{ height:100%; }
.cam-screen{ position:relative; height:100%; min-height:250px; overflow:hidden; background:#000; border:1px solid currentColor; }
.cam-d{ margin:0; padding:0; }
.cam-frame{ position:absolute; inset:0; }
.cam-frame::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:repeating-linear-gradient(0deg,#00000055 0 1px,transparent 1px 3px), radial-gradient(ellipse at center,transparent 50%,#000000bb 100%); }
.cam-frame::after{ z-index:2; }
.cam-hud{ position:absolute; top:0; left:0; right:0; z-index:3; display:flex; justify-content:space-between; padding:8px 10px; font-family:"Courier Prime","Courier New",monospace; font-size:14px; letter-spacing:2px; color:#fff; text-shadow:0 0 8px currentColor, 1px 0 #ff2ea6; }
.cam-rec{ color:#ff1493; text-shadow:0 0 8px #ff1493; animation:Blink 1.2s steps(1,end) infinite; }
.cam-time{ position:absolute; left:10px; bottom:8px; z-index:3; font-size:14px; letter-spacing:1px; color:currentColor; text-shadow:0 0 8px currentColor; }
.cam-d > summary{ display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:36px; height:54px; align-items:center; justify-content:center; cursor:pointer; list-style:none; user-select:none; font-size:0; background:#000c; border:1px solid currentColor; box-shadow:0 0 8px currentColor; }
.cam-d > summary::before{ font-family:"Graduate","Orbitron",monospace; font-size:16px; color:currentColor; }
.cam-feed:has(.c4[open]) .c1 > summary,.cam-feed:has(.c1[open]) .c2 > summary,.cam-feed:has(.c2[open]) .c3 > summary,.cam-feed:has(.c3[open]) .c4 > summary{ display:flex; right:10px; }
.cam-feed:has(.c4[open]) .c1 > summary::before,.cam-feed:has(.c1[open]) .c2 > summary::before,.cam-feed:has(.c2[open]) .c3 > summary::before,.cam-feed:has(.c3[open]) .c4 > summary::before{ content:">"; }
.cam-feed:has(.c2[open]) .c1 > summary,.cam-feed:has(.c3[open]) .c2 > summary,.cam-feed:has(.c4[open]) .c3 > summary,.cam-feed:has(.c1[open]) .c4 > summary{ display:flex; left:10px; }
.cam-feed:has(.c2[open]) .c1 > summary::before,.cam-feed:has(.c3[open]) .c2 > summary::before,.cam-feed:has(.c4[open]) .c3 > summary::before,.cam-feed:has(.c1[open]) .c4 > summary::before{ content:"<"; }
.cam-d > summary:hover{ background:currentColor; } .cam-d > summary:hover::before{ color:#000; }
summary::-webkit-details-marker{ display:none; } details > summary::marker{ content:""; } details > summary{ list-style-type:none; }
.cambd{ padding:0; }
.cambd .cam-frame{ position:absolute; inset:0; }
.cambd .cam-hud{ font-size:14px; padding:5px 8px; }


.frs{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.fr{ display:flex; gap:12px; align-items:center; padding:10px; background:#000; border:1px solid currentColor; box-shadow:0 0 10px currentColor, inset 0 0 14px color-mix(in srgb,currentColor 30%,transparent); }
.fr .ph{ flex:0 0 86px; height:86px; border:1px solid currentColor; }
.fn{ font-family:"Graduate","Orbitron",monospace; font-size:14px; color:currentColor; text-shadow:2px 0 #ff2ea6, 0 0 10px currentColor; }
.fd{ font-size:15px; color:#ff2ea6; text-shadow:0 0 8px #ff2ea6; }
.fr:hover{ background:currentColor; } .fr:hover .fn,.fr:hover .fd{ color:#000; text-shadow:none; }
.g-friends .bd{display:flex !important;flex-direction:column;}
.g-friends .frs{flex:1 1 0;min-height:0;max-height:none !important;overflow-y:auto !important;overflow-x:hidden;align-content:start;padding-right:8px;}
.g-friends .frs::-webkit-scrollbar{width:8px;}
.g-friends .frs::-webkit-scrollbar-track{background:#010306;border:1px solid #00d9ff44;}
.g-friends .frs::-webkit-scrollbar-thumb{background:#00d9ff;box-shadow:0 0 8px #00d9ff;}
.g-friends .frs{}


.eq{ display:inline-flex; align-items:flex-end; gap:2px; width:40px; height:16px; }
.eq s{ width:3px; animation-duration:.9s; }
.eq s:nth-child(2){ animation-delay:.2s } .eq s:nth-child(3){ animation-delay:.4s } .eq s:nth-child(4){ animation-delay:.1s } .eq s:nth-child(5){ animation-delay:.3s }
.npb{ position:relative; z-index:2; display:flex; gap:12px; align-items:center; }
.npb .ph{ flex:0 0 66px; height:66px; border:1px solid currentColor; }
.nt{ font-family:"Graduate","Orbitron",monospace; font-size:13px; color:currentColor; text-shadow:2px 0 #ff2ea6, 0 0 10px currentColor; }
.na{ font-size:15px; color:#ff2ea6; text-shadow:0 0 8px #ff2ea6; }
.npbar{ position:relative; z-index:2; height:6px; margin-top:14px; border:1px solid currentColor; }
.npfill{ height:100%; width:0; background:currentColor; box-shadow:0 0 10px currentColor; animation:NpProgress 227s linear infinite; animation-delay:-84s; }
.nptime{ position:relative; z-index:2; display:flex; justify-content:space-between; margin-top:4px; font-size:14px; }


.links{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:10px; }
.links{display:grid !important;grid-template-columns:1fr 1fr;}
.links a{ flex:1 1 auto; text-align:center; padding:8px 12px; font-family:"Graduate","Orbitron",monospace; font-size:11px; letter-spacing:1px; color:currentColor; background:#000; border:1px solid currentColor; box-shadow:0 0 10px currentColor; text-shadow:2px 0 #ff2ea6; }
.links a:hover{ background:#00f5ff; color:#000; text-shadow:none; }


.pp-cc-star,.pp-cc-star-line,.pp-cc-chats svg{ display:none; }
div:has(> div > .css-1s5evre){ display:flex; flex-flow:row wrap; justify-content:center; gap:24px; }
div:has(> .css-1s5evre){ flex:0 1 300px; height:auto; min-width:0; max-width:100%; }
.profile-character-card-box,.profile-character-card-stack-link-component-box{ display:contents; }
.css-1s5evre *{ min-width:0; }
.pp-cc-name,.pp-cc-description{ overflow-wrap:anywhere; white-space:normal; }
.pp-cc-tags-regular,.pp-cc-tags-custom{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; }
.css-1s5evre > a{ display:contents; }
.css-1s5evre{
  position:relative !important; display:grid !important; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto !important; gap:0 !important; width:100% !important; min-width:0 !important; max-width:100% !important;
  background:#02050a !important; border:2px solid #00d9ff !important; border-radius:0 !important; overflow:hidden !important;
  box-shadow:0 0 16px #0a5cff, inset 0 0 26px #0a5cff44 !important; transition:.25s !important;
}
.css-1s5evre:hover{ border-color:#ff1493 !important; transform:translateY(-4px); box-shadow:0 0 26px #ff1493, inset 0 0 30px #ff149444 !important; }
.css-1q7rmf0{ order:1; grid-area:auto !important; position:relative !important; width:100% !important; height:340px !important; margin:0 !important; background:#02050a; border:none !important; border-bottom:1px solid #00d9ff !important; filter:none; overflow:hidden; }
.css-1q7rmf0 img{ position:absolute !important; inset:0; display:block; width:100% !important; height:100% !important; max-height:none !important; object-fit:contain !important; filter:grayscale(1) contrast(1.3) brightness(1.1) !important; }
.css-1q7rmf0::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background-color:#00d9ff; background-image:repeating-linear-gradient(0deg,#00000055 0 1px,transparent 1px 3px), radial-gradient(#000a 35%,transparent 38%); background-size:auto,3px 3px; mix-blend-mode:multiply; }
.css-1s5evre:hover .css-1q7rmf0::after{ background-color:transparent; }
.css-10cv7r2{ position:absolute !important; top:8px !important; left:8px !important; right:auto !important; width:auto !important; z-index:7; grid-area:auto !important; }
.pp-cc-ribbon,.pp-cc-ribbon-wrap{ position:unset; background:transparent; box-shadow:none; clip-path:none; filter:none; padding:0; }
.pp-cc-chats{ width:auto !important; padding:2px 10px !important; background:#000c !important; border:1px solid #ff2ea6 !important; border-radius:0 !important; color:#ff2ea6 !important; font-family:"Courier Prime","Courier New",monospace !important; font-size:15px !important; text-shadow:0 0 8px #ff1493; }
.pp-cc-chats::before{ content:"★ "; color:#ff2ea6; }
.pp-cc-name{ order:2; grid-area:auto !important; padding:8px 12px !important; background:#000 !important; border-bottom:1px solid #00d9ff !important; border-radius:0 !important; color:#00d9ff !important; font-family:"Graduate","Orbitron",monospace !important; font-size:13px !important; text-transform:uppercase !important; letter-spacing:1px; text-shadow:2px 0 #ff2ea6, 0 0 10px #0a5cff !important; }
.pp-cc-name::before{ content:"HEIST// "; color:#ff2ea6; }
.pp-cc-name:hover{ background:#ff2ea6 !important; color:#000 !important; text-shadow:none !important; }
.profile-character-card-description-box{ order:3; grid-area:auto !important; padding:10px 12px 4px !important; }
.pp-cc-description{ -webkit-line-clamp:3 !important; margin:0 !important; color:#00d9ff !important; font-family:"Courier Prime","Courier New",monospace !important; font-size:15px !important; line-height:1.1 !important; text-shadow:0 0 6px #0a5cff !important; }
.pp-cc-tags{ order:4; grid-area:auto !important; padding:6px 12px 10px !important; margin:0 !important; }
.css-k1urot{ display:flex !important; flex-wrap:wrap; gap:5px; padding:0 !important; justify-content:flex-start !important; }
.pp-cc-tags-regular,.pp-cc-tags-custom{ width:auto !important; height:auto !important; padding:0 7px !important; border-radius:0 !important; background:#000 !important; border:1px solid #00d9ff !important; color:#00d9ff !important; font-family:"Courier Prime","Courier New",monospace !important; font-size:13px !important; }
.pp-cc-tags-custom{ color:#ff2ea6 !important; border-color:#ff2ea6 !important; }
.pp-cc-tags-regular:hover,.pp-cc-tags-custom:hover{ background:#ff2ea6 !important; color:#000 !important; }
.pp-cc-tokens-count{ order:5; grid-area:auto !important; width:100% !important; padding:4px 12px !important; border:none !important; border-top:1px dashed #00d9ff !important; border-radius:0 !important; background:#000 !important; color:#00f5ff !important; font-family:"Courier Prime","Courier New",monospace !important; font-size:14px !important; text-align:right !important; text-shadow:0 0 8px #00c8ff; }

.MonoTemplateCredit{ margin-top:16px; font-size:16px; opacity:.7; text-align:center; }
.MonoTemplateCredit p{ margin:0; padding:0; }


.idrow{ margin-bottom:22px; }
@media screen and (min-width:901px){ .idrow{ width:calc(50% - 10px); height:420px; } .idcard{ height:100%; } }
.idbd{ display:flex; flex-direction:column; justify-content:center; }
.idtop{ position:relative; z-index:2; display:flex; gap:16px; align-items:flex-start; }
.idpic{ flex:0 0 150px; height:190px; border:1px solid currentColor; }
.idpic em{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-style:normal; font-family:"Graduate","Orbitron",monospace; font-size:10px; color:#000; }
.idtop dl{ flex:1; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; align-content:start; }
.idtop dt{ font-family:"Graduate","Orbitron",monospace; font-size:9px; line-height:22px; color:#ff2ea6; text-shadow:0 0 8px #ff2ea6; }
.idtop dd{ margin:0; font-size:17px; line-height:1; color:currentColor; text-shadow:0 0 6px currentColor, 0 0 14px currentColor; }
.barcode{ position:relative; z-index:2; height:34px; margin-top:16px; background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 9px,currentColor 9px 12px,transparent 12px 14px); opacity:.85; }
.mrz{ position:relative; z-index:2; margin-top:6px; font-size:15px; letter-spacing:3px; white-space:nowrap; overflow:hidden; opacity:.8; }


.heistbar{ margin-top:22px; }
.hb{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:16px 20px; }
.hb h2{ position:relative; z-index:2; margin:0; font-family:"Graduate","Orbitron",monospace; font-weight:400; font-size:20px; letter-spacing:3px; color:currentColor; text-shadow:3px 0 #ff2ea6, 0 0 12px currentColor, 0 0 28px currentColor; }
.hcount{ position:relative; z-index:2; font-size:20px; color:#ff2ea6; text-shadow:0 0 10px #ff2ea6; }
.hcount b{ font-family:"Graduate","Orbitron",monospace; font-weight:400; font-size:24px; color:currentColor; text-shadow:0 0 12px currentColor; }


@keyframes Blink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
@keyframes Env{ 0%{ transform:scaleY(0.1) } 5%{ transform:scaleY(1) } 7%{ transform:scaleY(0.55) } 9%{ transform:scaleY(0.95) } 12%{ transform:scaleY(0.3) } 14%{ transform:scaleY(0.85) } 17%{ transform:scaleY(0.15) } 19%{ transform:scaleY(0.1) } 27%{ transform:scaleY(0.1) } 28%{ transform:scaleY(0.9) } 31%{ transform:scaleY(0.4) } 33%{ transform:scaleY(1) } 36%{ transform:scaleY(0.5) } 38%{ transform:scaleY(0.9) } 41%{ transform:scaleY(0.2) } 44%{ transform:scaleY(0.1) } 55%{ transform:scaleY(0.1) } 56%{ transform:scaleY(0.75) } 59%{ transform:scaleY(1) } 62%{ transform:scaleY(0.35) } 64%{ transform:scaleY(0.8) } 67%{ transform:scaleY(0.12) } 70%{ transform:scaleY(0.1) } 82%{ transform:scaleY(0.18) } 85%{ transform:scaleY(0.1) } 88%{ transform:scaleY(0.22) } 91%{ transform:scaleY(0.1) } 100%{ transform:scaleY(0.1) } }
@keyframes Sp1{ 0%{ transform:scaleY(0.1) } 5%{ transform:scaleY(0.45) } 7%{ transform:scaleY(0.25) } 9%{ transform:scaleY(0.43) } 12%{ transform:scaleY(0.14) } 14%{ transform:scaleY(0.38) } 17%{ transform:scaleY(0.1) } 19%{ transform:scaleY(0.1) } 20.5%{ transform:scaleY(0.1) } 21%{ transform:scaleY(1) } 22.5%{ transform:scaleY(0.8) } 23.5%{ transform:scaleY(0.35) } 24.5%{ transform:scaleY(0.1) } 27%{ transform:scaleY(0.1) } 28%{ transform:scaleY(0.41) } 31%{ transform:scaleY(0.18) } 33%{ transform:scaleY(0.45) } 36%{ transform:scaleY(0.23) } 38%{ transform:scaleY(0.41) } 41%{ transform:scaleY(0.1) } 44%{ transform:scaleY(0.1) } 55%{ transform:scaleY(0.1) } 56%{ transform:scaleY(0.34) } 59%{ transform:scaleY(0.45) } 62%{ transform:scaleY(0.16) } 64%{ transform:scaleY(0.36) } 67%{ transform:scaleY(0.1) } 70%{ transform:scaleY(0.1) } 82%{ transform:scaleY(0.1) } 85%{ transform:scaleY(0.1) } 88%{ transform:scaleY(0.1) } 91%{ transform:scaleY(0.1) } 100%{ transform:scaleY(0.1) } }
@keyframes Sp2{ 0%{ transform:scaleY(0.1) } 5%{ transform:scaleY(0.45) } 7%{ transform:scaleY(0.25) } 9%{ transform:scaleY(0.43) } 12%{ transform:scaleY(0.14) } 14%{ transform:scaleY(0.38) } 17%{ transform:scaleY(0.1) } 19%{ transform:scaleY(0.1) } 27%{ transform:scaleY(0.1) } 28%{ transform:scaleY(0.41) } 31%{ transform:scaleY(0.18) } 33%{ transform:scaleY(0.45) } 36%{ transform:scaleY(0.23) } 38%{ transform:scaleY(0.41) } 41%{ transform:scaleY(0.1) } 44%{ transform:scaleY(0.1) } 47.5%{ transform:scaleY(0.1) } 48%{ transform:scaleY(1) } 50%{ transform:scaleY(0.7) } 51.5%{ transform:scaleY(0.25) } 52.5%{ transform:scaleY(0.1) } 55%{ transform:scaleY(0.1) } 56%{ transform:scaleY(0.34) } 59%{ transform:scaleY(0.45) } 62%{ transform:scaleY(0.16) } 64%{ transform:scaleY(0.36) } 67%{ transform:scaleY(0.1) } 70%{ transform:scaleY(0.1) } 82%{ transform:scaleY(0.1) } 85%{ transform:scaleY(0.1) } 88%{ transform:scaleY(0.1) } 91%{ transform:scaleY(0.1) } 100%{ transform:scaleY(0.1) } }
@keyframes Sp3{ 0%{ transform:scaleY(0.1) } 5%{ transform:scaleY(0.45) } 7%{ transform:scaleY(0.25) } 9%{ transform:scaleY(0.43) } 12%{ transform:scaleY(0.14) } 14%{ transform:scaleY(0.38) } 17%{ transform:scaleY(0.1) } 19%{ transform:scaleY(0.1) } 27%{ transform:scaleY(0.1) } 28%{ transform:scaleY(0.41) } 31%{ transform:scaleY(0.18) } 33%{ transform:scaleY(0.45) } 36%{ transform:scaleY(0.23) } 38%{ transform:scaleY(0.41) } 41%{ transform:scaleY(0.1) } 44%{ transform:scaleY(0.1) } 55%{ transform:scaleY(0.1) } 56%{ transform:scaleY(0.34) } 59%{ transform:scaleY(0.45) } 62%{ transform:scaleY(0.16) } 64%{ transform:scaleY(0.36) } 67%{ transform:scaleY(0.1) } 70%{ transform:scaleY(0.1) } 73.5%{ transform:scaleY(0.1) } 74%{ transform:scaleY(1) } 75.5%{ transform:scaleY(0.85) } 77%{ transform:scaleY(0.3) } 78%{ transform:scaleY(0.1) } 82%{ transform:scaleY(0.1) } 85%{ transform:scaleY(0.1) } 88%{ transform:scaleY(0.1) } 91%{ transform:scaleY(0.1) } 100%{ transform:scaleY(0.1) } }
@keyframes Sp4{ 0%{ transform:scaleY(0.1) } 5%{ transform:scaleY(0.45) } 7%{ transform:scaleY(0.25) } 9%{ transform:scaleY(0.43) } 12%{ transform:scaleY(0.14) } 14%{ transform:scaleY(0.38) } 17%{ transform:scaleY(0.1) } 19%{ transform:scaleY(0.1) } 27%{ transform:scaleY(0.1) } 28%{ transform:scaleY(0.41) } 31%{ transform:scaleY(0.18) } 33%{ transform:scaleY(0.45) } 36%{ transform:scaleY(0.23) } 38%{ transform:scaleY(0.41) } 41%{ transform:scaleY(0.1) } 44%{ transform:scaleY(0.1) } 55%{ transform:scaleY(0.1) } 56%{ transform:scaleY(0.34) } 59%{ transform:scaleY(0.45) } 62%{ transform:scaleY(0.16) } 64%{ transform:scaleY(0.36) } 67%{ transform:scaleY(0.1) } 70%{ transform:scaleY(0.1) } 82%{ transform:scaleY(0.1) } 85%{ transform:scaleY(0.1) } 88%{ transform:scaleY(0.1) } 91%{ transform:scaleY(0.1) } 93.5%{ transform:scaleY(0.1) } 94%{ transform:scaleY(1) } 95.5%{ transform:scaleY(0.6) } 96.5%{ transform:scaleY(0.2) } 97.5%{ transform:scaleY(0.1) } 100%{ transform:scaleY(0.1) } }
@keyframes Jit{ 0%{ height:35% } 12%{ height:100% } 25%{ height:50% } 37%{ height:85% } 50%{ height:25% } 62%{ height:95% } 75%{ height:45% } 88%{ height:70% } 100%{ height:35% } }
@keyframes Eq{ 0%,100%{ height:4px } 50%{ height:20px } }
@keyframes Tape{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes NpProgress{ from{ width:0 } to{ width:100% } }
@media (prefers-reduced-motion:reduce){ .track,.wave i,.eq s,.blink{ animation:none !important; } }


.css-1q7rmf0 img{ transition:filter .25s; }
.css-1s5evre:hover .css-1q7rmf0 img{ filter:saturate(1.15) contrast(1.1) !important; }


.css-1q7rmf0::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;

  background-image:
    linear-gradient(#ff1493, #ff1493),
    linear-gradient(#ff1493, #ff1493);

  background-size:
    30px 2px,
    2px 30px;

  background-position:
    center center,
    center center;

  filter: drop-shadow(0 0 4px #ff1493);
}
.css-1s5evre:hover .css-1q7rmf0::before{ opacity:1; }


.css-1s5evre::before{
  content:"TARGET ACQUIRED"; position:absolute; top:8px; right:8px; z-index:8;
  padding:2px 8px; opacity:0; pointer-events:none;
  background:#000c; border:1px solid #ff1493;
  font-family:"Graduate","Orbitron",monospace; font-size:11px; letter-spacing:2px;
  color:#ff1493; text-shadow:0 0 8px #ff1493;
}
.css-1s5evre:hover::before{ opacity:1; }


.profile-badges{ justify-content:center; }
.profile-badges img,.profile-badges svg{
  filter:grayscale(1) brightness(1.1) contrast(1.2) sepia(1) saturate(4) hue-rotate(140deg) drop-shadow(0 0 5px #00c8ff);
  transition:filter .3s;
}
.profile-badges img:hover,.profile-badges svg:hover{ filter:none; }
.pnl.p h3,.pnl.p .nt,.pnl.p .hb h2{ text-shadow:2px 0 #00d9ff, 0 0 10px currentColor, 0 0 24px currentColor; }
.pnl.p .cam-hud{ text-shadow:0 0 8px currentColor, 1px 0 #00d9ff; }
.pnl.p .log u,.pnl.p .na,.pnl.p .hcount{ color:#00d9ff; text-shadow:0 0 8px #00d9ff; }


.pp-top-bar-outer{
  background-color:#02050a !important;
  background-image:repeating-linear-gradient(0deg,#00000066 0 1px,transparent 1px 3px) !important;
  border-bottom:2px solid #00f5ff !important;
  box-shadow:0 0 18px #00c8ff, inset 0 -14px 24px -14px #00c8ff66 !important;
}
.pp-top-bar{ background:transparent !important; box-shadow:none !important; }


.pp-top-bar-logo{ display:inline-flex; }
.pp-top-bar-logo img{
  filter:grayscale(1) brightness(1.15) contrast(1.25) sepia(1) saturate(5) hue-rotate(140deg) drop-shadow(0 0 6px #00c8ff);
  transition:filter .3s;
}
.pp-top-bar-logo:hover img{ filter:none; }
.pp-top-bar-tabs{ background:#000 !important; border:1px solid #00f5ff !important; border-radius:0 !important; box-shadow:0 0 10px #00c8ff, inset 0 0 12px #00c8ff33 !important; }
.pp-top-bar-tabs > span{ background:#00f5ff44 !important; border-radius:0 !important; }
.pp-top-bar-tabs a{
  color:#00f5ff !important; border-radius:0 !important; text-transform:uppercase;
  font-family:"Graduate","Orbitron",monospace !important; font-size:11px !important; letter-spacing:2px; text-shadow:0 0 8px #00c8ff;
}
.pp-top-bar-tabs a:hover{ color:#000 !important; background:#00f5ff !important; text-shadow:none; }


.pp-top-bar-search-input-group{ background:#000 !important; border:1px solid #00d9ff !important; border-radius:0 !important; box-shadow:0 0 12px #0a5cff, inset 0 0 14px #0a5cff33 !important; }
.pp-top-bar-search-input input{ background:transparent !important; color:#00d9ff !important; font-family:"Courier Prime","Courier New",monospace !important; text-shadow:0 0 6px #0a5cff; }
.pp-top-bar-search-input input::placeholder{ color:#ff2ea6 !important; opacity:.85; }
.pp-top-bar-search-icon,.pp-top-bar-search-icon *{ color:#00d9ff !important; }
.pp-top-bar-search-shortcut{ background:#000 !important; color:#ff2ea6 !important; border:1px solid #ff2ea6 !important; border-radius:0 !important; font-family:"Graduate","Orbitron",monospace !important; font-size:10px !important; }
.pp-top-bar-filter-button button{ background:#000 !important; border:1px solid #00d9ff !important; border-radius:0 !important; }


.pp-top-bar-create-char{
  background:#02050a !important; border:1px solid #ff2ea6 !important; border-radius:0 !important; color:#ff2ea6 !important;
  box-shadow:0 0 12px #ff1493, inset 0 0 12px #ff149433 !important;
  font-family:"Graduate","Orbitron",monospace !important; text-transform:uppercase; letter-spacing:2px; text-shadow:0 0 8px #ff1493; transition:.2s;
}
.pp-top-bar-create-char *{ color:inherit !important; font-family:inherit !important; letter-spacing:inherit; }
.pp-top-bar-create-char span{ font-size:12px !important; }
.pp-top-bar-create-char:hover{ background:#ff2ea6 !important; color:#000 !important; text-shadow:none; }


.pp-top-bar-notifications-button{ background:transparent !important; border-radius:0 !important; color:#00f5ff !important; }
.pp-top-bar-notifications-icon{ color:#00f5ff !important; filter:drop-shadow(0 0 5px #00c8ff); }
.pp-top-bar-notifications-badge{ background:#ff1493 !important; color:#000 !important; border-radius:0 !important; font-family:"Graduate","Orbitron",monospace !important; font-size:10px !important; box-shadow:0 0 8px #ff1493; }
.pp-top-bar-app-menu{ background:transparent !important; }
.pp-top-bar-app-menu *{ border-radius:0 !important; }
.pp-top-bar-app-menu .chakra-avatar{ background:#02050a !important; border:2px solid #00f5ff !important; box-shadow:0 0 12px #00c8ff; }
.pp-top-bar-app-menu .chakra-avatar__initials{ color:#00f5ff !important; font-family:"Graduate","Orbitron",monospace !important; text-transform:uppercase; text-shadow:2px 0 #ff2ea6, 0 0 8px #00c8ff; }
.pp-top-bar-app-menu-list{ background:#02050a !important; border:2px solid #00f5ff !important; border-radius:0 !important; box-shadow:0 0 16px #00c8ff, inset 0 0 20px #00c8ff33 !important; }
.pp-top-bar-app-menu-list-item{ background:transparent !important; color:#00f5ff !important; font-family:"Courier Prime","Courier New",monospace !important; }
.pp-top-bar-app-menu-list-item:hover{ background:#00f5ff !important; color:#000 !important; }


:is(.pp-top-bar-notifications > :not(button),[class*="otificationsPanel"],[class*="otificationPanel"],[class*="otificationsDropdown"],[class*="otificationsPopover"],[class*="otificationsMenu"]){
  position:absolute; overflow:hidden;
  background-color:#02050a !important;
  background-image:repeating-linear-gradient(0deg,#00000055 0 1px,transparent 1px 3px) !important;
  border:2px solid #00f5ff !important; border-radius:0 !important;
  box-shadow:0 0 18px #00c8ff, inset 0 0 26px #00c8ff33 !important;
  color:#00f5ff !important; backdrop-filter:none !important;
}
:is(.pp-top-bar-notifications > :not(button),[class*="otificationsPanel"],[class*="otificationPanel"],[class*="otificationsDropdown"],[class*="otificationsPopover"],[class*="otificationsMenu"]) *{
  background-color:transparent !important; border-radius:0 !important; box-shadow:none;
  border-color:#00f5ff55 !important; border-left-color:#ff2ea6 !important;
  color:#00f5ff !important; font-family:"Courier Prime","Courier New",monospace !important; text-shadow:0 0 6px #00c8ff88;
}
:is(.pp-top-bar-notifications > :not(button),[class*="otificationsPanel"],[class*="otificationPanel"],[class*="otificationsDropdown"],[class*="otificationsPopover"],[class*="otificationsMenu"]) a,
:is(.pp-top-bar-notifications > :not(button),[class*="otificationsPanel"],[class*="otificationPanel"],[class*="otificationsDropdown"],[class*="otificationsPopover"],[class*="otificationsMenu"]) a *{
  color:#00d9ff !important; text-shadow:0 0 6px #0a5cff88;
}

:is(.pp-top-bar-notifications > :not(button),[class*="otificationsPanel"],[class*="otificationPanel"],[class*="otificationsDropdown"],[class*="otificationsPopover"],[class*="otificationsMenu"]) button{
  background:#000 !important; border:1px solid #00f5ff !important; box-shadow:0 0 8px #00c8ff !important; cursor:pointer; transition:.2s;
}
:is(.pp-top-bar-notifications > :not(button),[class*="otificationsPanel"],[class*="otificationPanel"],[class*="otificationsDropdown"],[class*="otificationsPopover"],[class*="otificationsMenu"]) button:hover{
  background:#00f5ff !important;
}
:is(.pp-top-bar-notifications > :not(button),[class*="otificationsPanel"],[class*="otificationPanel"],[class*="otificationsDropdown"],[class*="otificationsPopover"],[class*="otificationsMenu"]) button:hover *{
  color:#000 !important; text-shadow:none;
}

:is(.pp-top-bar-notifications > :not(button),[class*="otificationsPanel"],[class*="otificationPanel"],[class*="otificationsDropdown"],[class*="otificationsPopover"],[class*="otificationsMenu"]) img{ border:1px solid #00f5ff !important; }
:is(.pp-top-bar-notifications > :not(button),[class*="otificationsPanel"],[class*="otificationPanel"],[class*="otificationsDropdown"],[class*="otificationsPopover"],[class*="otificationsMenu"]) :has(> img){ position:relative; overflow:hidden; }
:is(.pp-top-bar-notifications > :not(button),[class*="otificationsPanel"],[class*="otificationPanel"],[class*="otificationsDropdown"],[class*="otificationsPopover"],[class*="otificationsMenu"]) :has(> img)::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(#000a 35%,transparent 38%) 0 0/3px 3px; mix-blend-mode:multiply;
}

:is(.pp-top-bar-notifications > :not(button),[class*="otificationsPanel"],[class*="otificationPanel"],[class*="otificationsDropdown"],[class*="otificationsPopover"],[class*="otificationsMenu"])::after{
  content:"通知"; position:absolute; right:8px; bottom:-6px; z-index:0; pointer-events:none;
  font-family:"Courier Prime",sans-serif; font-size:70px; line-height:1; color:#00f5ff; opacity:.13; text-shadow:0 0 20px #00c8ff;
}




.idcard .bd::after{ content:"手配"; }
.g-rec1 .bd::after{ content:"盗聴"; }
.g-rec2 .bd::after{ content:"仲間"; }
.g-prof .bd::after{ content:"首謀者"; }
.g-feed .bd::after{ content:"監視"; }
.g-cam1 .bd::after{ content:"録画"; font-size:44px; right:4px; bottom:2px; z-index:5; }
.g-cam2 .bd::after{ content:"警戒"; font-size:44px; right:4px; bottom:2px; z-index:5; }
.g-friends .bd::after{ content:"共犯"; }
.g-np .bd::after{ content:"逃走"; }
.g-links .bd::after{ content:"連絡"; }
.heistbar .bd::after{ content:"強盗"; font-size:64px; bottom:-12px; }
.profile-info-stack-inner::after{
  content:"逃亡者"; position:absolute; right:8px; bottom:-8px; z-index:-1; pointer-events:none;
  font-family:"Courier Prime",sans-serif; font-size:84px; line-height:1; color:#00f5ff; opacity:.13; text-shadow:0 0 20px #00c8ff;
}


@media screen and (max-width:900px){
  @media screen and (max-width:900px){

  .g-rec1,
  .g-rec2,
  .g-cam1,
  .g-cam2{ display:none !important; }


  .g-friends .frs{
    flex:none !important;
    max-height:420px !important;
    overflow-y:auto !important;

  }
}
  .grid{ display:flex; flex-direction:column; }
  .bottom{ grid-template-columns:1fr; }
  .cam-screen{ min-height:240px; }
  .cambd{ min-height:150px; }
  .prof{ flex-direction:column; } .pic{ flex:none; height:300px; }
  .pp-uc-title{ font-size:18px; }
  .idrow{ width:100%; }
  .idtop{ flex-wrap:wrap; }
  .idpic{ flex:0 0 130px; height:165px; }
  .hb h2{ font-size:15px; }
  .profile-info-stack > .css-1rxxh0p{ width:92%; margin:12px auto 0; }
  .profile-info-stack > .css-1rxxh0p .css-1aq5geu{ justify-content:center; margin:0; }
}

.g-rec1 .wave i:nth-child(1){ max-height:51%; animation-duration:3.6s,0.23s; animation-delay:-0.10s,-0.02s; }
.g-rec1 .wave i:nth-child(2){ max-height:49%; animation-duration:3.6s,0.25s; animation-delay:-0.00s,-0.13s; }
.g-rec1 .wave i:nth-child(3){ max-height:40%; animation-duration:3.6s,0.30s; animation-delay:-0.12s,-0.08s; }
.g-rec1 .wave i:nth-child(4){ max-height:66%; animation-duration:3.6s,0.23s; animation-delay:-0.05s,-0.22s; }
.g-rec1 .wave i:nth-child(5){ max-height:96%; animation-duration:3.6s,0.26s; animation-delay:-0.06s,-0.01s; }
.g-rec1 .wave i:nth-child(6){ max-height:97%; animation-duration:3.6s,0.38s; animation-delay:-0.12s,-0.24s; }
.g-rec1 .wave i:nth-child(7){ max-height:49%; animation-duration:3.6s,0.37s; animation-delay:-0.12s,-0.36s; }
.g-rec1 .wave i:nth-child(8){ max-height:75%; animation-duration:3.6s,0.24s; animation-delay:-0.09s,-0.08s; }
.g-rec1 .wave i:nth-child(9){ max-height:77%; animation-duration:3.6s,0.24s; animation-delay:-0.02s,-0.17s; }
.g-rec1 .wave i:nth-child(10){ max-height:91%; animation-duration:3.6s,0.25s; animation-delay:-0.11s,-0.08s; }
.g-rec1 .wave i:nth-child(11){ max-height:93%; animation-duration:3.6s,0.26s; animation-delay:-0.13s,-0.05s; }
.g-rec1 .wave i:nth-child(12){ max-height:73%; animation-duration:3.6s,0.39s; animation-delay:-0.02s,-0.25s; }
.g-rec1 .wave i:nth-child(13){ max-height:88%; animation-duration:3.6s,0.33s; animation-delay:-0.06s,-0.30s; }
.g-rec1 .wave i:nth-child(14){ height:100%; max-height:100%; animation:Sp3 3.6s steps(1,end) infinite; }
.g-rec1 .wave i:nth-child(15){ max-height:40%; animation-duration:3.6s,0.37s; animation-delay:-0.02s,-0.32s; }
.g-rec1 .wave i:nth-child(16){ max-height:87%; animation-duration:3.6s,0.28s; animation-delay:-0.07s,-0.28s; }
.g-rec1 .wave i:nth-child(17){ max-height:75%; animation-duration:3.6s,0.23s; animation-delay:-0.11s,-0.20s; }
.g-rec1 .wave i:nth-child(18){ max-height:54%; animation-duration:3.6s,0.30s; animation-delay:-0.12s,-0.29s; }
.g-rec1 .wave i:nth-child(19){ max-height:42%; animation-duration:3.6s,0.39s; animation-delay:-0.09s,-0.12s; }
.g-rec1 .wave i:nth-child(20){ max-height:94%; animation-duration:3.6s,0.41s; animation-delay:-0.13s,-0.38s; }
.g-rec1 .wave i:nth-child(21){ max-height:80%; animation-duration:3.6s,0.39s; animation-delay:-0.04s,-0.33s; }
.g-rec1 .wave i:nth-child(22){ max-height:36%; animation-duration:3.6s,0.36s; animation-delay:-0.14s,-0.29s; }
.g-rec1 .wave i:nth-child(23){ max-height:91%; animation-duration:3.6s,0.24s; animation-delay:-0.08s,-0.12s; }
.g-rec1 .wave i:nth-child(24){ max-height:94%; animation-duration:3.6s,0.24s; animation-delay:-0.14s,-0.08s; }
.g-rec1 .wave i:nth-child(25){ max-height:51%; animation-duration:3.6s,0.25s; animation-delay:-0.00s,-0.02s; }
.g-rec1 .wave i:nth-child(26){ max-height:75%; animation-duration:3.6s,0.34s; animation-delay:-0.13s,-0.08s; }
.g-rec1 .wave i:nth-child(27){ max-height:81%; animation-duration:3.6s,0.31s; animation-delay:-0.10s,-0.17s; }
.g-rec1 .wave i:nth-child(28){ height:100%; max-height:100%; animation:Sp4 3.6s steps(1,end) infinite; }
.g-rec1 .wave i:nth-child(29){ max-height:83%; animation-duration:3.6s,0.38s; animation-delay:-0.01s,-0.07s; }
.g-rec1 .wave i:nth-child(30){ max-height:87%; animation-duration:3.6s,0.21s; animation-delay:-0.09s,-0.14s; }
.g-rec1 .wave i:nth-child(31){ max-height:37%; animation-duration:3.6s,0.25s; animation-delay:-0.06s,-0.05s; }
.g-rec1 .wave i:nth-child(32){ max-height:46%; animation-duration:3.6s,0.30s; animation-delay:-0.08s,-0.26s; }
.g-rec1 .wave i:nth-child(33){ max-height:36%; animation-duration:3.6s,0.40s; animation-delay:-0.02s,-0.34s; }
.g-rec1 .wave i:nth-child(34){ max-height:47%; animation-duration:3.6s,0.24s; animation-delay:-0.05s,-0.00s; }
.g-rec1 .wave i:nth-child(35){ max-height:82%; animation-duration:3.6s,0.41s; animation-delay:-0.08s,-0.41s; }
.g-rec1 .wave i:nth-child(36){ max-height:53%; animation-duration:3.6s,0.33s; animation-delay:-0.10s,-0.18s; }
.g-rec1 .wave i:nth-child(37){ max-height:88%; animation-duration:3.6s,0.23s; animation-delay:-0.01s,-0.23s; }
.g-rec1 .wave i:nth-child(38){ max-height:40%; animation-duration:3.6s,0.29s; animation-delay:-0.08s,-0.27s; }
.g-rec1 .wave i:nth-child(39){ max-height:77%; animation-duration:3.6s,0.33s; animation-delay:-0.13s,-0.17s; }
.g-rec1 .wave i:nth-child(40){ max-height:89%; animation-duration:3.6s,0.23s; animation-delay:-0.06s,-0.15s; }
.g-rec1 .wave i:nth-child(41){ height:100%; max-height:100%; animation:Sp1 3.6s steps(1,end) infinite; }
.g-rec1 .wave i:nth-child(42){ max-height:75%; animation-duration:3.6s,0.42s; animation-delay:-0.01s,-0.42s; }
.g-rec1 .wave i:nth-child(43){ max-height:40%; animation-duration:3.6s,0.39s; animation-delay:-0.02s,-0.15s; }
.g-rec1 .wave i:nth-child(44){ max-height:90%; animation-duration:3.6s,0.32s; animation-delay:-0.08s,-0.21s; }
.g-rec1 .wave i:nth-child(45){ max-height:64%; animation-duration:3.6s,0.23s; animation-delay:-0.08s,-0.02s; }
.g-rec1 .wave i:nth-child(46){ max-height:42%; animation-duration:3.6s,0.35s; animation-delay:-0.07s,-0.30s; }
.g-rec1 .wave i:nth-child(47){ max-height:76%; animation-duration:3.6s,0.29s; animation-delay:-0.00s,-0.08s; }
.g-rec1 .wave i:nth-child(48){ max-height:82%; animation-duration:3.6s,0.30s; animation-delay:-0.08s,-0.21s; }
.g-rec1 .wave i:nth-child(49){ max-height:38%; animation-duration:3.6s,0.32s; animation-delay:-0.08s,-0.27s; }
.g-rec1 .wave i:nth-child(50){ max-height:39%; animation-duration:3.6s,0.40s; animation-delay:-0.03s,-0.08s; }
.g-rec1 .wave i:nth-child(51){ max-height:91%; animation-duration:3.6s,0.41s; animation-delay:-0.13s,-0.31s; }
.g-rec1 .wave i:nth-child(52){ max-height:41%; animation-duration:3.6s,0.39s; animation-delay:-0.10s,-0.01s; }
.g-rec1 .wave i:nth-child(53){ max-height:95%; animation-duration:3.6s,0.38s; animation-delay:-0.11s,-0.10s; }
.g-rec1 .wave i:nth-child(54){ max-height:38%; animation-duration:3.6s,0.24s; animation-delay:-0.05s,-0.22s; }
.g-rec1 .wave i:nth-child(55){ max-height:81%; animation-duration:3.6s,0.24s; animation-delay:-0.12s,-0.08s; }
.g-rec1 .wave i:nth-child(56){ max-height:71%; animation-duration:3.6s,0.35s; animation-delay:-0.05s,-0.29s; }
.g-rec1 .wave i:nth-child(57){ max-height:82%; animation-duration:3.6s,0.41s; animation-delay:-0.02s,-0.11s; }
.g-rec1 .wave i:nth-child(58){ max-height:83%; animation-duration:3.6s,0.42s; animation-delay:-0.13s,-0.05s; }
.g-rec1 .wave i:nth-child(59){ max-height:86%; animation-duration:3.6s,0.40s; animation-delay:-0.10s,-0.22s; }
.g-rec1 .wave i:nth-child(60){ max-height:54%; animation-duration:3.6s,0.41s; animation-delay:-0.09s,-0.38s; }
.g-rec1 .wave i:nth-child(61){ max-height:98%; animation-duration:3.6s,0.27s; animation-delay:-0.06s,-0.11s; }
.g-rec1 .wave i:nth-child(62){ max-height:65%; animation-duration:3.6s,0.35s; animation-delay:-0.09s,-0.32s; }
.g-rec1 .wave i:nth-child(63){ height:100%; max-height:100%; animation:Sp2 3.6s steps(1,end) infinite; }
.g-rec1 .wave i:nth-child(64){ max-height:82%; animation-duration:3.6s,0.25s; animation-delay:-0.08s,-0.19s; }
.g-rec1 .wave i:nth-child(65){ max-height:92%; animation-duration:3.6s,0.30s; animation-delay:-0.11s,-0.27s; }
.g-rec1 .wave i:nth-child(66){ max-height:88%; animation-duration:3.6s,0.34s; animation-delay:-0.13s,-0.03s; }
.g-rec1 .wave i:nth-child(67){ max-height:41%; animation-duration:3.6s,0.21s; animation-delay:-0.07s,-0.05s; }
.g-rec1 .wave i:nth-child(68){ max-height:85%; animation-duration:3.6s,0.33s; animation-delay:-0.05s,-0.23s; }
.g-rec1 .wave i:nth-child(69){ max-height:45%; animation-duration:3.6s,0.37s; animation-delay:-0.11s,-0.08s; }
.g-rec1 .wave i:nth-child(70){ max-height:52%; animation-duration:3.6s,0.30s; animation-delay:-0.09s,-0.24s; }
.g-rec1 .wave i:nth-child(71){ max-height:84%; animation-duration:3.6s,0.33s; animation-delay:-0.07s,-0.24s; }
.g-rec1 .wave i:nth-child(72){ max-height:97%; animation-duration:3.6s,0.39s; animation-delay:-0.11s,-0.18s; }
.g-rec1 .wave i:nth-child(73){ max-height:71%; animation-duration:3.6s,0.34s; animation-delay:-0.01s,-0.09s; }
.g-rec1 .wave i:nth-child(74){ max-height:83%; animation-duration:3.6s,0.22s; animation-delay:-0.05s,-0.03s; }
.g-rec1 .wave i:nth-child(75){ max-height:69%; animation-duration:3.6s,0.32s; animation-delay:-0.03s,-0.13s; }
.g-rec1 .wave i:nth-child(76){ max-height:90%; animation-duration:3.6s,0.20s; animation-delay:-0.08s,-0.18s; }
.g-rec1 .wave i:nth-child(77){ max-height:98%; animation-duration:3.6s,0.39s; animation-delay:-0.06s,-0.37s; }
.g-rec1 .wave i:nth-child(78){ max-height:54%; animation-duration:3.6s,0.31s; animation-delay:-0.07s,-0.08s; }
.g-rec1 .wave i:nth-child(79){ max-height:95%; animation-duration:3.6s,0.24s; animation-delay:-0.02s,-0.11s; }
.g-rec1 .wave i:nth-child(80){ max-height:85%; animation-duration:3.6s,0.35s; animation-delay:-0.06s,-0.03s; }
.g-rec2 .wave i:nth-child(1){ max-height:67%; animation-duration:4.3s,0.25s; animation-delay:-0.11s,-0.08s; }
.g-rec2 .wave i:nth-child(2){ max-height:90%; animation-duration:4.3s,0.38s; animation-delay:-0.10s,-0.18s; }
.g-rec2 .wave i:nth-child(3){ max-height:36%; animation-duration:4.3s,0.37s; animation-delay:-0.11s,-0.24s; }
.g-rec2 .wave i:nth-child(4){ max-height:59%; animation-duration:4.3s,0.25s; animation-delay:-0.02s,-0.12s; }
.g-rec2 .wave i:nth-child(5){ max-height:79%; animation-duration:4.3s,0.24s; animation-delay:-0.10s,-0.14s; }
.g-rec2 .wave i:nth-child(6){ max-height:38%; animation-duration:4.3s,0.33s; animation-delay:-0.08s,-0.30s; }
.g-rec2 .wave i:nth-child(7){ max-height:58%; animation-duration:4.3s,0.22s; animation-delay:-0.09s,-0.15s; }
.g-rec2 .wave i:nth-child(8){ max-height:96%; animation-duration:4.3s,0.38s; animation-delay:-0.08s,-0.30s; }
.g-rec2 .wave i:nth-child(9){ max-height:36%; animation-duration:4.3s,0.31s; animation-delay:-0.12s,-0.11s; }
.g-rec2 .wave i:nth-child(10){ max-height:99%; animation-duration:4.3s,0.40s; animation-delay:-0.02s,-0.18s; }
.g-rec2 .wave i:nth-child(11){ max-height:91%; animation-duration:4.3s,0.38s; animation-delay:-0.07s,-0.20s; }
.g-rec2 .wave i:nth-child(12){ max-height:46%; animation-duration:4.3s,0.38s; animation-delay:-0.12s,-0.03s; }
.g-rec2 .wave i:nth-child(13){ max-height:79%; animation-duration:4.3s,0.27s; animation-delay:-0.05s,-0.14s; }
.g-rec2 .wave i:nth-child(14){ max-height:74%; animation-duration:4.3s,0.39s; animation-delay:-0.04s,-0.28s; }
.g-rec2 .wave i:nth-child(15){ max-height:77%; animation-duration:4.3s,0.29s; animation-delay:-0.03s,-0.16s; }
.g-rec2 .wave i:nth-child(16){ max-height:47%; animation-duration:4.3s,0.22s; animation-delay:-0.10s,-0.05s; }
.g-rec2 .wave i:nth-child(17){ max-height:87%; animation-duration:4.3s,0.28s; animation-delay:-0.08s,-0.27s; }
.g-rec2 .wave i:nth-child(18){ max-height:44%; animation-duration:4.3s,0.23s; animation-delay:-0.02s,-0.04s; }
.g-rec2 .wave i:nth-child(19){ max-height:48%; animation-duration:4.3s,0.36s; animation-delay:-0.08s,-0.10s; }
.g-rec2 .wave i:nth-child(20){ max-height:54%; animation-duration:4.3s,0.27s; animation-delay:-0.04s,-0.10s; }
.g-rec2 .wave i:nth-child(21){ height:100%; max-height:100%; animation:Sp2 4.3s steps(1,end) infinite; }
.g-rec2 .wave i:nth-child(22){ max-height:53%; animation-duration:4.3s,0.32s; animation-delay:-0.02s,-0.22s; }
.g-rec2 .wave i:nth-child(23){ max-height:97%; animation-duration:4.3s,0.26s; animation-delay:-0.05s,-0.13s; }
.g-rec2 .wave i:nth-child(24){ max-height:59%; animation-duration:4.3s,0.38s; animation-delay:-0.01s,-0.15s; }
.g-rec2 .wave i:nth-child(25){ max-height:79%; animation-duration:4.3s,0.41s; animation-delay:-0.03s,-0.03s; }
.g-rec2 .wave i:nth-child(26){ max-height:90%; animation-duration:4.3s,0.25s; animation-delay:-0.06s,-0.13s; }
.g-rec2 .wave i:nth-child(27){ max-height:94%; animation-duration:4.3s,0.33s; animation-delay:-0.13s,-0.02s; }
.g-rec2 .wave i:nth-child(28){ max-height:91%; animation-duration:4.3s,0.35s; animation-delay:-0.02s,-0.05s; }
.g-rec2 .wave i:nth-child(29){ max-height:86%; animation-duration:4.3s,0.30s; animation-delay:-0.04s,-0.01s; }
.g-rec2 .wave i:nth-child(30){ max-height:42%; animation-duration:4.3s,0.40s; animation-delay:-0.09s,-0.32s; }
.g-rec2 .wave i:nth-child(31){ max-height:86%; animation-duration:4.3s,0.25s; animation-delay:-0.04s,-0.04s; }
.g-rec2 .wave i:nth-child(32){ max-height:95%; animation-duration:4.3s,0.36s; animation-delay:-0.04s,-0.21s; }
.g-rec2 .wave i:nth-child(33){ max-height:88%; animation-duration:4.3s,0.31s; animation-delay:-0.01s,-0.15s; }
.g-rec2 .wave i:nth-child(34){ max-height:77%; animation-duration:4.3s,0.21s; animation-delay:-0.09s,-0.05s; }
.g-rec2 .wave i:nth-child(35){ max-height:76%; animation-duration:4.3s,0.38s; animation-delay:-0.11s,-0.22s; }
.g-rec2 .wave i:nth-child(36){ height:100%; max-height:100%; animation:Sp3 4.3s steps(1,end) infinite; }
.g-rec2 .wave i:nth-child(37){ max-height:81%; animation-duration:4.3s,0.24s; animation-delay:-0.09s,-0.14s; }
.g-rec2 .wave i:nth-child(38){ max-height:64%; animation-duration:4.3s,0.27s; animation-delay:-0.02s,-0.03s; }
.g-rec2 .wave i:nth-child(39){ max-height:80%; animation-duration:4.3s,0.38s; animation-delay:-0.06s,-0.21s; }
.g-rec2 .wave i:nth-child(40){ max-height:73%; animation-duration:4.3s,0.39s; animation-delay:-0.00s,-0.32s; }
.g-rec2 .wave i:nth-child(41){ max-height:76%; animation-duration:4.3s,0.28s; animation-delay:-0.09s,-0.21s; }
.g-rec2 .wave i:nth-child(42){ max-height:68%; animation-duration:4.3s,0.30s; animation-delay:-0.02s,-0.21s; }
.g-rec2 .wave i:nth-child(43){ max-height:59%; animation-duration:4.3s,0.27s; animation-delay:-0.06s,-0.00s; }
.g-rec2 .wave i:nth-child(44){ max-height:41%; animation-duration:4.3s,0.34s; animation-delay:-0.13s,-0.05s; }
.g-rec2 .wave i:nth-child(45){ max-height:88%; animation-duration:4.3s,0.42s; animation-delay:-0.08s,-0.10s; }
.g-rec2 .wave i:nth-child(46){ max-height:45%; animation-duration:4.3s,0.39s; animation-delay:-0.11s,-0.11s; }
.g-rec2 .wave i:nth-child(47){ max-height:45%; animation-duration:4.3s,0.26s; animation-delay:-0.08s,-0.08s; }
.g-rec2 .wave i:nth-child(48){ max-height:79%; animation-duration:4.3s,0.31s; animation-delay:-0.11s,-0.10s; }
.g-rec2 .wave i:nth-child(49){ max-height:97%; animation-duration:4.3s,0.25s; animation-delay:-0.12s,-0.10s; }
.g-rec2 .wave i:nth-child(50){ max-height:73%; animation-duration:4.3s,0.28s; animation-delay:-0.11s,-0.19s; }
.g-rec2 .wave i:nth-child(51){ max-height:76%; animation-duration:4.3s,0.41s; animation-delay:-0.01s,-0.14s; }
.g-rec2 .wave i:nth-child(52){ max-height:56%; animation-duration:4.3s,0.36s; animation-delay:-0.09s,-0.15s; }
.g-rec2 .wave i:nth-child(53){ max-height:79%; animation-duration:4.3s,0.34s; animation-delay:-0.01s,-0.13s; }
.g-rec2 .wave i:nth-child(54){ max-height:87%; animation-duration:4.3s,0.34s; animation-delay:-0.07s,-0.30s; }
.g-rec2 .wave i:nth-child(55){ max-height:81%; animation-duration:4.3s,0.40s; animation-delay:-0.10s,-0.40s; }
.g-rec2 .wave i:nth-child(56){ max-height:46%; animation-duration:4.3s,0.30s; animation-delay:-0.13s,-0.21s; }
.g-rec2 .wave i:nth-child(57){ max-height:92%; animation-duration:4.3s,0.29s; animation-delay:-0.06s,-0.07s; }
.g-rec2 .wave i:nth-child(58){ height:100%; max-height:100%; animation:Sp1 4.3s steps(1,end) infinite; }
.g-rec2 .wave i:nth-child(59){ max-height:79%; animation-duration:4.3s,0.39s; animation-delay:-0.03s,-0.24s; }
.g-rec2 .wave i:nth-child(60){ max-height:66%; animation-duration:4.3s,0.30s; animation-delay:-0.13s,-0.20s; }
.g-rec2 .wave i:nth-child(61){ max-height:47%; animation-duration:4.3s,0.30s; animation-delay:-0.08s,-0.10s; }
.g-rec2 .wave i:nth-child(62){ max-height:77%; animation-duration:4.3s,0.24s; animation-delay:-0.07s,-0.09s; }
.g-rec2 .wave i:nth-child(63){ max-height:89%; animation-duration:4.3s,0.26s; animation-delay:-0.09s,-0.26s; }
.g-rec2 .wave i:nth-child(64){ max-height:92%; animation-duration:4.3s,0.41s; animation-delay:-0.10s,-0.38s; }
.g-rec2 .wave i:nth-child(65){ max-height:56%; animation-duration:4.3s,0.33s; animation-delay:-0.09s,-0.12s; }
.g-rec2 .wave i:nth-child(66){ max-height:93%; animation-duration:4.3s,0.35s; animation-delay:-0.01s,-0.05s; }
.g-rec2 .wave i:nth-child(67){ max-height:51%; animation-duration:4.3s,0.33s; animation-delay:-0.01s,-0.24s; }
.g-rec2 .wave i:nth-child(68){ max-height:42%; animation-duration:4.3s,0.37s; animation-delay:-0.05s,-0.33s; }
.g-rec2 .wave i:nth-child(69){ max-height:71%; animation-duration:4.3s,0.41s; animation-delay:-0.12s,-0.12s; }
.g-rec2 .wave i:nth-child(70){ max-height:55%; animation-duration:4.3s,0.39s; animation-delay:-0.14s,-0.28s; }
.g-rec2 .wave i:nth-child(71){ height:100%; max-height:100%; animation:Sp4 4.3s steps(1,end) infinite; }
.g-rec2 .wave i:nth-child(72){ max-height:92%; animation-duration:4.3s,0.20s; animation-delay:-0.06s,-0.11s; }
.g-rec2 .wave i:nth-child(73){ max-height:90%; animation-duration:4.3s,0.41s; animation-delay:-0.03s,-0.04s; }
.g-rec2 .wave i:nth-child(74){ max-height:89%; animation-duration:4.3s,0.25s; animation-delay:-0.12s,-0.02s; }
.g-rec2 .wave i:nth-child(75){ max-height:58%; animation-duration:4.3s,0.21s; animation-delay:-0.14s,-0.01s; }
.g-rec2 .wave i:nth-child(76){ max-height:69%; animation-duration:4.3s,0.30s; animation-delay:-0.10s,-0.20s; }
.g-rec2 .wave i:nth-child(77){ max-height:59%; animation-duration:4.3s,0.39s; animation-delay:-0.12s,-0.26s; }
.g-rec2 .wave i:nth-child(78){ max-height:82%; animation-duration:4.3s,0.28s; animation-delay:-0.13s,-0.12s; }
.g-rec2 .wave i:nth-child(79){ max-height:92%; animation-duration:4.3s,0.40s; animation-delay:-0.01s,-0.26s; }
.g-rec2 .wave i:nth-child(80){ max-height:99%; animation-duration:4.3s,0.22s; animation-delay:-0.09s,-0.05s; }

.character-list-pagination-flex{position:relative !important;display:flex !important;flex-wrap:wrap;align-items:center !important;justify-content:space-between !important;gap:14px 24px;width:100% !important;box-sizing:border-box;padding:22px 28px !important;margin:22px 0 !important;background:#02050a !important;border:2px solid #ff2ea6 !important;border-radius:0 !important;color:#ff2ea6;box-shadow:0 0 18px #ff2ea6,inset 0 0 30px #ff2ea659 !important;}
.character-list-pagination-flex::before{content:"";position:absolute;inset:5px;border:1px solid #ff2ea68c;pointer-events:none;}
.character-list-pagination-flex::after{content:"";position:absolute;inset:-6px;pointer-events:none;background-repeat:no-repeat;background-image:linear-gradient(#ff2ea6,#ff2ea6),linear-gradient(#ff2ea6,#ff2ea6),linear-gradient(#ff2ea6,#ff2ea6),linear-gradient(#ff2ea6,#ff2ea6),linear-gradient(#ff2ea6,#ff2ea6),linear-gradient(#ff2ea6,#ff2ea6),linear-gradient(#ff2ea6,#ff2ea6),linear-gradient(#ff2ea6,#ff2ea6);background-position:left 0 top 5px,left 5px top 0,right 0 top 5px,right 5px top 0,left 0 bottom 5px,left 5px bottom 0,right 0 bottom 5px,right 5px bottom 0;background-size:11px 1px,1px 11px,11px 1px,1px 11px,11px 1px,1px 11px,11px 1px,1px 11px;}
.character-list-pagination-box,.profile-filters-flex-outer{position:relative;z-index:2;}
.pp-pg-total{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;}
.pp-pg-total .profile-badge-flex-inner{display:flex;align-items:baseline;gap:14px;}
.pp-pg-total .profile-badge-flex-inner::before{content:"ACTIVE HEISTS";font-family:"Graduate","Orbitron",monospace;font-size:20px;letter-spacing:3px;color:#ff2ea6;text-shadow:3px 0 #00d9ff,0 0 12px #ff2ea6,0 0 28px #ff2ea6;}
.pp-pg-total-count{font-family:"Graduate","Orbitron",monospace !important;font-size:26px !important;color:#00f5ff !important;text-shadow:0 0 12px #00f5ff;}
.pp-pg-total-text{font-size:0 !important;margin:0 !important;}
.pp-pg-total-text::after{content:"JOBS ON THE BOARD";font-family:"Courier Prime","Courier New",monospace;font-size:17px;letter-spacing:2px;color:#00d9ff;text-shadow:0 0 8px #00d9ff;}
.profile-character-search-input,.profile-filter-button{background:#010306 !important;border:1px solid #00d9ff !important;border-radius:0 !important;color:#00d9ff !important;box-shadow:0 0 8px #00d9ff59;}
.react-select__control{background:#010306 !important;border:1px solid #00d9ff !important;border-radius:0 !important;box-shadow:0 0 8px #00d9ff59 !important;min-height:40px;}
.react-select__control:hover{border-color:#00f5ff !important;box-shadow:0 0 12px #00f5ff !important;}
.react-select__single-value{font-family:"Graduate","Orbitron",monospace !important;font-size:13px !important;letter-spacing:2px;color:#00d9ff !important;text-shadow:2px 0 #ff2ea6,0 0 8px #00d9ff;text-transform:uppercase;}
.react-select__indicator-separator{background:#00d9ff !important;opacity:.5;}
.react-select__dropdown-indicator{color:#00d9ff !important;}
.react-select__menu{background:#02050a !important;border:1px solid #00d9ff !important;border-radius:0 !important;box-shadow:0 0 18px #00d9ff,inset 0 0 20px #00d9ff33 !important;margin-top:6px !important;}
.react-select__menu-list{padding:0 !important;}
.react-select__option{background:transparent !important;font-family:"Graduate","Orbitron",monospace !important;font-size:12px !important;letter-spacing:2px;text-transform:uppercase;color:#00d9ff !important;border-bottom:1px solid #00d9ff33;cursor:pointer;}
.react-select__option--is-focused{background:#00d9ff33 !important;color:#00f5ff !important;text-shadow:0 0 8px #00f5ff;}
.react-select__option--is-selected{background:#ff2ea6 !important;color:#000 !important;text-shadow:none;}
.fr{position:relative;}
.fr .rl{position:absolute;top:6px;right:6px;z-index:3;padding:2px 8px;opacity:0;pointer-events:none;background:#000;border:1px solid #ff1a3c;font-family:"Graduate","Orbitron",monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#ff1a3c;text-shadow:0 0 8px #ff1a3c;box-shadow:0 0 8px #ff1a3c;transition:opacity .2s;}
.fr:hover .rl{opacity:1;color:#ff1a3c;text-shadow:0 0 8px #ff1a3c;}

@keyframes Jit{0%{}12%{}25%{}37%{}50%{}62%{}75%{}88%{}100%{}}
@keyframes NpProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes Eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.npfill{width:100%;transform-origin:left;}
.eq s{height:16px;transform-origin:bottom;}
.bd::before{mix-blend-mode:normal;opacity:.3;}
.pnl::after{filter:none;}
.credits {  
  color: #00f5ff; 
  text-shadow: 0 0 8px #00f5ff; 
  font-size: 14px;
  letter-spacing: 1px;
}
.credits a { 
  color: #ff2ea6; 
  text-shadow: 0 0 8px #ff2ea6; 
}

</style>

how to use it

1. Changing Text & Information

2. Changing Images

3. Changing Colors

Neon Accent Classes:

Global Color Variables / Hex Codes: You can perform a find-and-replace in the <style> section for the main color codes:

the code

Warning