API tools faq
paste
Ru1nous

EPHEMERIS_SILVER_css

Ru1nous
Oct 24th, 2026 (edited)
21
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 107.29 KB | Source Code | 0 0
raw download clone embed print report
  1. <div class="nx-fairy" aria-hidden="true"><span><i></i><b></b></span><span><i></i><b></b><u></u></span><span><i></i><b></b><u></u></span><span><i></i><b></b><u></u></span><span><i></i><b></b><u></u></span><span><i></i><b></b><u></u></span><span><i></i><b></b><u></u></span></div>
  2. <div class="nx-fairyb" aria-hidden="true"><span><i></i><b></b></span><span><i></i><b></b><u></u><em></em></span><span><i></i><b></b><u></u></span><span><i></i><b></b><u></u></span><span><i></i><b></b><u></u><em></em></span><span><i></i><b></b><u></u></span><span><i></i><b></b><u></u></span><span><i></i><b></b><u></u><em></em></span><span><i></i><b></b><u></u><em></em></span><span><i></i><b></b><u></u></span><span><i></i><b></b><u></u></span></div>
  3. <div class="nx">
  4. <div class="nx-bg"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><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>
  5. <div class="nx-fore"><i></i><i></i><i></i><i></i></div>
  6. <div class="nx-stage">
  7. <div class="nx-hills"></div>
  8. <div class="nx-moon">
  9. <span class="nx-moon-glow"></span>
  10. <span class="nx-moon-disc"><span class="nx-moon-pic"><img src="https://i.imgur.com/o3kojTf.png" alt="" draggable="false"></span><span class="nx-moon-clip"><b class="nx-moon-veil"></b></span></span>
  11. <i class="nx-sp sp1"></i><i class="nx-sp sp2"></i><i class="nx-sp sp3"></i>
  12. </div>
  13. <div class="nx-sona"><img src="" alt="" draggable="false"></div>
  14. <div class="nx-hero">
  15. <div class="nx-hero-text">
  16. <p class="nx-kicker">✦ short welcome line ✦</p>
  17. <p class="nx-title"><span>Your Name</span></p>
  18. <div class="nx-slot"></div>
  19. </div>
  20. </div>
  21. <div class="nx-mp">
  22. <details class="nx-mp-trk t1" name="nxmp" open>
  23. <summary></summary>
  24. <span class="nx-mp-disc"><img src="" alt="" draggable="false"></span>
  25. <span class="nx-mp-top"><span class="nx-mp-meta"><b class="nx-mp-song">song title one</b><small class="nx-mp-artist">artist name</small></span><span class="nx-mp-eq"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></span>
  26. <span class="nx-mp-bar"><i></i></span>
  27. <span class="nx-mp-ctl"><a class="nx-mp-btn" href="https://www.youtube.com/watch?v=VIDEO_ID&list=PLAYLIST_ID_ONE&autoplay=1" target="_blank" rel="noopener noreferrer"></a></span>
  28. </details>
  29. <details class="nx-mp-trk t2" name="nxmp">
  30. <summary></summary>
  31. <span class="nx-mp-disc"><img src="" alt="" draggable="false"></span>
  32. <span class="nx-mp-top"><span class="nx-mp-meta"><b class="nx-mp-song">song title two</b><small class="nx-mp-artist">artist name</small></span><span class="nx-mp-eq"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></span>
  33. <span class="nx-mp-bar"><i></i></span>
  34. <span class="nx-mp-ctl"><a class="nx-mp-btn" href="https://www.youtube.com/watch?v=VIDEO_ID&list=PLAYLIST_ID_TWO&autoplay=1" target="_blank" rel="noopener noreferrer"></a></span>
  35. </details>
  36. <details class="nx-mp-trk t3" name="nxmp">
  37. <summary></summary>
  38. <span class="nx-mp-disc"><img src="" alt="" draggable="false"></span>
  39. <span class="nx-mp-top"><span class="nx-mp-meta"><b class="nx-mp-song">song title three</b><small class="nx-mp-artist">artist name</small></span><span class="nx-mp-eq"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></span>
  40. <span class="nx-mp-bar"><i></i></span>
  41. <span class="nx-mp-ctl"><a class="nx-mp-btn" href="https://www.youtube.com/watch?v=VIDEO_ID&list=PLAYLIST_ID_THREE&autoplay=1" target="_blank" rel="noopener noreferrer"></a></span>
  42. </details>
  43. </div>
  44. </div>
  45. <div class="nx-ticker">
  46. <div class="nx-ticker-track">
  47. <div class="nx-ticker-set"><span>✦ ticker text one</span><span>☾ ticker text two</span><span>✧ ticker text three</span><span>✦ ticker text four</span></div>
  48. <div class="nx-ticker-set"><span>✦ ticker text one</span><span>☾ ticker text two</span><span>✧ ticker text three</span><span>✦ ticker text four</span></div>
  49. </div>
  50. </div>
  51. <div class="nx-wrap">
  52. <section class="nx-panel" id="about">
  53. <p class="nx-h"><span></span>About Me<small>a few words about you</small></p>
  54. <div class="nx-about">
  55. <div class="nx-portrait"><img src="" alt="" draggable="false"><img src="" alt="" draggable="false"><img src="" alt="" draggable="false"></div>
  56. <div class="nx-acc">
  57. <details name="nx-about" open>
  58. <summary>Who I Am</summary>
  59. <div class="nx-acc-body">
  60. <div class="nx-tags"><span>pronouns</span><span>timezone</span><span>age</span><span>tag</span></div>
  61. <p>Hi, I'm <strong>Your Name</strong>. Tell people who you are, what you love writing, and anything you want them to notice first.</p>
  62. <p class="nx-quote">“A favorite quote goes here.”</p>
  63. </div>
  64. </details>
  65. <details name="nx-about">
  66. <summary>What I Write</summary>
  67. <div class="nx-acc-body">
  68. <div class="nx-tags"><span>genre</span><span>genre</span><span>genre</span><span>genre</span></div>
  69. <p>Describe your characters, your writing style, and which genres you like.</p>
  70. </div>
  71. </details>
  72. <details name="nx-about">
  73. <summary>Extra Info</summary>
  74. <div class="nx-acc-body">
  75. <p>✦ Fact one: add yours<br>☾ Fact two: add yours<br>✧ Fact three: add yours<br>✦ Fact four: add yours</p>
  76. <div class="nx-road">
  77. <div class="nx-rm planned"><small>Planned</small><b>Project name</b><span>A short note about what is coming next.</span></div>
  78. <div class="nx-rm current"><small>In progress</small><b>Project name</b><span>A short note about what you are working on now.</span></div>
  79. <div class="nx-rm done"><small>Finished</small><b>Project name</b><span>A short note about what you have finished.</span></div>
  80. </div>
  81. </div>
  82. </details>
  83. </div>
  84. </div>
  85. </section>
  86. <section class="nx-panel" id="rules">
  87. <p class="nx-h"><span></span>Rules &amp; FAQ<small>pick a card to open it</small></p>
  88. <div class="nx-rf">
  89. <img class="nx-rf-bg" src="" alt="" draggable="false">
  90. <details class="nx-rf-a" name="nx-rf">
  91. <summary><img src="" alt="" draggable="false"><b>Rules</b></summary>
  92. <div class="nx-rf-body">
  93. <div class="nx-dni"><span>✕ Do not interact: add one</span><span>✕ Add one</span><span>✕ Add one</span></div>
  94. <div class="nx-const">
  95. <div class="nx-rule"><b>Rule one</b><span>Replace this with your own rule and a short reason.</span></div>
  96. <div class="nx-rule"><b>Rule two</b><span>Replace this with your own rule and a short reason.</span></div>
  97. <div class="nx-rule"><b>Rule three</b><span>Replace this with your own rule and a short reason.</span></div>
  98. <div class="nx-rule"><b>Rule four</b><span>Replace this with your own rule and a short reason.</span></div>
  99. </div>
  100. </div>
  101. </details>
  102. <details class="nx-rf-b" name="nx-rf">
  103. <summary><img src="" alt="" draggable="false"><b>FAQ</b></summary>
  104. <div class="nx-rf-body">
  105. <div class="nx-acc">
  106. <details name="nx-faq">
  107. <summary>Question one?</summary>
  108. <div class="nx-acc-body"><p>Your answer goes here.</p></div>
  109. </details>
  110. <details name="nx-faq">
  111. <summary>Question two?</summary>
  112. <div class="nx-acc-body"><p>Your answer goes here.</p></div>
  113. </details>
  114. <details name="nx-faq">
  115. <summary>Question three?</summary>
  116. <div class="nx-acc-body"><p>Your answer goes here.</p></div>
  117. </details>
  118. <details name="nx-faq">
  119. <summary>Question four?</summary>
  120. <div class="nx-acc-body"><p>Your answer goes here.</p></div>
  121. </details>
  122. </div>
  123. </div>
  124. </details>
  125. </div>
  126. </section>
  127. <section class="nx-panel" id="findme">
  128. <p class="nx-h"><span></span>Find Me<small>where else to find you</small></p>
  129. <div class="nx-finds">
  130. <a class="nx-fl" href="https://YOUR-LINK-HERE" target="_blank" rel="noopener noreferrer"><i>✦</i><b>Discord</b><small>short line</small></a>
  131. <a class="nx-fl" href="https://YOUR-LINK-HERE" target="_blank" rel="noopener noreferrer"><i>☾</i><b>Ko-fi</b><small>short line</small></a>
  132. <a class="nx-fl" href="https://YOUR-LINK-HERE" target="_blank" rel="noopener noreferrer"><i>✧</i><b>Carrd</b><small>short line</small></a>
  133. </div>
  134. </section>
  135. </div>
  136. <div class="nx-banner"><img src="" alt="" draggable="false"></div>
  137. <div class="nx-lower">
  138. <section class="nx-panel" id="friends">
  139. <p class="nx-h"><span></span>Friends<small>a short line about your friends</small></p>
  140. <div class="nx-friends">
  141. <a class="nx-friend" href="https://janitorai.com/profiles/FRIEND-LINK-HERE"><b>Friend One</b><small>short line</small><span class="nx-orb"><img src="" alt="" draggable="false"></span></a>
  142. <a class="nx-friend" href="https://janitorai.com/profiles/FRIEND-LINK-HERE"><b>Friend Two</b><small>short line</small><span class="nx-orb"><img src="" alt="" draggable="false"></span></a>
  143. <a class="nx-friend" href="https://janitorai.com/profiles/FRIEND-LINK-HERE"><b>Friend Three</b><small>short line</small><span class="nx-orb"><img src="" alt="" draggable="false"></span></a>
  144. <a class="nx-friend" href="https://janitorai.com/profiles/FRIEND-LINK-HERE"><b>Friend Four</b><small>short line</small><span class="nx-orb"><img src="" alt="" draggable="false"></span></a>
  145. <a class="nx-friend" href="https://janitorai.com/profiles/FRIEND-LINK-HERE"><b>Friend Five</b><small>short line</small><span class="nx-orb"><img src="" alt="" draggable="false"></span></a>
  146. <a class="nx-friend" href="https://janitorai.com/profiles/FRIEND-LINK-HERE"><b>Friend Six</b><small>short line</small><span class="nx-orb"><img src="" alt="" draggable="false"></span></a>
  147. <a class="nx-friend" href="https://janitorai.com/profiles/FRIEND-LINK-HERE"><b>Friend Seven</b><small>short line</small><span class="nx-orb"><img src="" alt="" draggable="false"></span></a>
  148. <a class="nx-friend" href="https://janitorai.com/profiles/FRIEND-LINK-HERE"><b>Friend Eight</b><small>short line</small><span class="nx-orb"><img src="" alt="" draggable="false"></span></a>
  149. </div>
  150. </section>
  151. <section class="nx-panel" id="gallery">
  152. <p class="nx-h"><span></span>Gallery<small>hover or tap to pause</small></p>
  153. <div class="nx-car">
  154. <div class="nx-gtrack">
  155. <div class="nx-gset">
  156. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  157. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  158. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  159. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  160. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  161. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  162. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  163. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  164. </div>
  165. <div class="nx-gset">
  166. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  167. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  168. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  169. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  170. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  171. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  172. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  173. <div class="nx-gi"><img src="" alt="" draggable="false"></div>
  174. </div>
  175. </div>
  176. </div>
  177. </section>
  178. </div>
  179. <div class="nx-below">
  180. <section class="nx-panel" id="series">
  181. <p class="nx-h"><span></span>Series<small>a short line about your series</small></p>
  182. <div class="nx-rack">
  183. <details class="nx-cover" name="nx-series">
  184. <summary><span class="nx-cover-art"><img src="" alt="" draggable="false"></span><strong>Series Name</strong></summary>
  185. <div class="nx-cover-pop"><em>Short description of this series.</em><a href="https://janitorai.com/search?mode=all&amp;sort=popular&amp;custom_tags=YOURTAG1&amp;page=1" target="_blank" rel="noopener noreferrer">Browse series ✦</a></div>
  186. </details>
  187. <details class="nx-cover" name="nx-series">
  188. <summary><span class="nx-cover-art"><img src="" alt="" draggable="false"></span><strong>Series Name</strong></summary>
  189. <div class="nx-cover-pop"><em>Short description of this series.</em><a href="https://janitorai.com/search?mode=all&amp;sort=popular&amp;custom_tags=YOURTAG2&amp;page=1" target="_blank" rel="noopener noreferrer">Browse series ✦</a></div>
  190. </details>
  191. <details class="nx-cover" name="nx-series">
  192. <summary><span class="nx-cover-art"><img src="" alt="" draggable="false"></span><strong>Series Name</strong></summary>
  193. <div class="nx-cover-pop"><em>Short description of this series.</em><a href="https://janitorai.com/search?mode=all&amp;sort=popular&amp;custom_tags=YOURTAG3&amp;page=1" target="_blank" rel="noopener noreferrer">Browse series ✦</a></div>
  194. </details>
  195. <details class="nx-cover" name="nx-series">
  196. <summary><span class="nx-cover-art"><img src="" alt="" draggable="false"></span><strong>Series Name</strong></summary>
  197. <div class="nx-cover-pop"><em>Short description of this series.</em><a href="https://janitorai.com/search?mode=all&amp;sort=popular&amp;custom_tags=YOURTAG4&amp;page=1" target="_blank" rel="noopener noreferrer">Browse series ✦</a></div>
  198. </details>
  199. <details class="nx-cover" name="nx-series">
  200. <summary><span class="nx-cover-art"><img src="" alt="" draggable="false"></span><strong>Series Name</strong></summary>
  201. <div class="nx-cover-pop"><em>Short description of this series.</em><a href="https://janitorai.com/search?mode=all&amp;sort=popular&amp;custom_tags=YOURTAG5&amp;page=1" target="_blank" rel="noopener noreferrer">Browse series ✦</a></div>
  202. </details>
  203. <details class="nx-cover" name="nx-series">
  204. <summary><span class="nx-cover-art"><img src="" alt="" draggable="false"></span><strong>Series Name</strong></summary>
  205. <div class="nx-cover-pop"><em>Short description of this series.</em><a href="https://janitorai.com/search?mode=all&amp;sort=popular&amp;custom_tags=YOURTAG6&amp;page=1" target="_blank" rel="noopener noreferrer">Browse series ✦</a></div>
  206. </details>
  207. </div>
  208. </section>
  209. </div>
  210. <div class="nx-banner"><img src="" alt="" draggable="false"></div>
  211. <div class="nx-credit">Ephemeris CSS by Ru1nous</div>
  212. <details class="nx-pet">
  213. <summary><span class="nx-pet-orbit"><i></i><i></i><i></i><i></i></span><span class="nx-pet-img"><img src="" alt="" draggable="false"></span></summary>
  214. <div class="nx-bubble"><div class="nx-bubble-box">Type your pet's message here.</div></div>
  215. </details>
  216. </div>
  217. <style>
  218. .pp-page-background,.profile-page-container{background:#030304 !important;background-image:radial-gradient(ellipse 70% 40% at 78% 18%,rgba(190,190,200,.13),transparent 70%),radial-gradient(ellipse 60% 45% at 15% 60%,rgba(150,150,160,.2),transparent 70%),radial-gradient(ellipse 50% 30% at 60% 90%,rgba(200,200,215,.08),transparent 70%),radial-gradient(1.4px 1.4px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 120px,#d9dce6,transparent),radial-gradient(1.6px 1.6px at 160px 60px,#fff,transparent),radial-gradient(1px 1px at 210px 180px,#b9a6d6,transparent),radial-gradient(1.2px 1.2px at 60px 210px,#fff,transparent) !important;background-size:auto,auto,auto,230px 250px,300px 280px,340px 310px,270px 330px,210px 240px !important;background-attachment:fixed !important}
  219. .profile-page-flex{position:relative !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:30px !important;max-width:1560px !important;margin:0 auto !important;padding:30px 24px 60px !important}
  220. .pp-uc-background{flex:none !important;width:100% !important;min-width:0 !important;max-width:100% !important;position:relative;z-index:auto !important}
  221. .profile-page-container-flex-box{position:relative;z-index:2;width:100% !important;min-width:0 !important;max-width:100% !important;margin:0 !important}
  222. .profile-background-box-1,.profile-background-box-2,.profile-background-box-3,.pp-cc-gradient-1,.pp-cc-gradient-2,.pp-cc-gradient-3,.pp-uc-about-me img[src=""],.pp-uc-about-me img:not([src]){display:none !important}
  223. .profile-info-stack-inner>button{background:transparent !important;color:#fff !important;border:1px solid #d9dce6 !important;border-radius:999px !important;letter-spacing:.14em;text-transform:uppercase;transition:.3s}
  224. .profile-info-stack-inner>button:hover{background:#d9dce6 !important;color:#08080a !important;box-shadow:0 0 18px rgba(217,220,230,.5)}
  225. .profile-uc-follow-button{background:transparent !important;color:#fff !important;border:1px solid #d9dce6 !important;border-radius:999px !important}
  226. .pp-uc-follow-button,.profile-uc-follow-button{background:transparent !important;padding:5px 22px !important;color:#fff !important;border:1px solid #d9dce6 !important;border-radius:999px !important;letter-spacing:.1em;transition:.3s}
  227. .Btn,.Btn::before{box-shadow:none}
  228. .profile-uc-follow-text{font-family:"Cinzel",serif !important;font-size:.75rem !important;letter-spacing:.14em;color:#fff !important}
  229. .pp-uc-follow-button:hover{box-shadow:0 0 18px rgba(217,220,230,.6);transform:translateY(-2px)}
  230. .pp-uc-follow-button[data-following="true"]{background:transparent !important;color:#d9dce6 !important}
  231. .pp-uc-options-menu,.profile-uc-options-menu{display:inline-flex !important;align-items:center;justify-content:center;width:34px !important;min-width:34px !important;height:34px !important;background:transparent !important;color:#d9dce6 !important;border:1px solid #5b5b66 !important;border-radius:50% !important;padding:0 !important;transition:.3s}
  232. .pp-uc-options-menu>span:first-child{display:none !important}
  233. .pp-uc-options-menu .chakra-button__icon{display:flex !important;margin:0 !important}
  234. .pp-uc-options-menu svg{width:14px;height:14px}
  235. .pp-uc-options-menu:hover,.profile-uc-options-menu:hover{border-color:#d9dce6 !important;box-shadow:0 0 14px rgba(217,220,230,.4)}
  236. .profile-about-me{color:#ececf0 !important;background:transparent !important;max-width:100% !important;overflow:visible !important}
  237. .profile-about-me p{margin:0}
  238. .nx{position:relative;color:#e6e6ea;font-family:'Crimson Text',Georgia,serif;font-size:17px;line-height:1.6;text-align:left}
  239. .nx div,.nx section,.nx details,.nx summary,.nx a,.nx span,.nx p,.nx img,.nx b,.nx i,.nx em{box-sizing:border-box}
  240. .nx a{color:inherit;text-decoration:none}
  241. .nx img{max-width:100%;display:block}
  242. .nx p{margin:0}
  243. .nx-stage{position:relative;min-height:540px;padding:70px 34px 60px;border-radius:22px 22px 0 0;overflow:visible;border:1px solid rgba(217,220,230,.3);border-bottom:0;background:radial-gradient(ellipse 60% 55% at 78% 40%,rgba(200,200,210,.16),transparent 70%),radial-gradient(ellipse 30% 35% at 70% 60%,rgba(185,166,214,.14),transparent 70%),radial-gradient(ellipse 45% 40% at 20% 20%,rgba(190,190,205,.1),transparent 70%),linear-gradient(180deg,#050507,#0f0f13 72%,#070709)}
  244. .nx-stage::before,.nx-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
  245. .nx-stage::before{background:radial-gradient(1.6px 1.6px at 30px 40px,#fff,transparent),radial-gradient(1.2px 1.2px at 120px 90px,#d9dce6,transparent),radial-gradient(2px 2px at 200px 20px,#fff,transparent),radial-gradient(1px 1px at 70px 150px,#fff,transparent);background-size:220px 190px,260px 200px,310px 230px,180px 170px;animation:nxtwink 4s ease-in-out infinite}
  246. .nx-stage::after{background:radial-gradient(1.4px 1.4px at 50px 70px,#fff,transparent),radial-gradient(1.8px 1.8px at 150px 130px,#fff,transparent),radial-gradient(1px 1px at 240px 60px,#d9dce6,transparent);background-size:280px 210px,330px 260px,240px 180px;animation:nxtwink 5.5s ease-in-out infinite 1.5s}
  247. .nx-hills{position:absolute;left:0;right:0;bottom:0;height:80px;z-index:1;background:radial-gradient(ellipse 55% 100% at 18% 100%,#040405 97%,transparent 100%),radial-gradient(ellipse 45% 85% at 72% 100%,#050506 97%,transparent 100%),radial-gradient(ellipse 35% 70% at 100% 100%,#040405 97%,transparent 100%)}
  248. .nx-hero{position:relative;z-index:3}
  249. .nx-hero-text{max-width:52%;min-width:0}
  250. .nx-kicker{display:block;height:22px;line-height:22px;font-family:"Cinzel",serif;font-size:.8rem;letter-spacing:.4em;text-transform:uppercase;color:#b9a6d6;animation:nxtwink 4s ease-in-out infinite}
  251. .nx-title{font-family:"Berkshire Swash","Cinzel Decorative",serif;height:100px;font-size:70px;line-height:90px;font-weight:400;letter-spacing:.02em;white-space:nowrap}
  252. .nx-slot{height:112px}
  253. .nx-title span{display:inline-block;padding:0 6px;white-space:nowrap;background:linear-gradient(100deg,#fff 0,#c9cbd3 30%,#8f8f99 50%,#fff 70%,#d9dce6 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 10px rgba(255,255,255,.45));animation:nxshine 5s linear infinite}
  254. .nx-moon{position:absolute;z-index:1;right:20px;top:38%;width:420px;height:420px;margin-top:-210px;animation:nxfloat 9s ease-in-out infinite}
  255. .nx-moon-glow{position:absolute;inset:-34%;border-radius:50%;background:radial-gradient(closest-side,transparent 52%,rgba(217,220,230,.5) 62%,rgba(217,220,230,.2) 76%,rgba(185,166,214,.08) 88%,transparent 100%),radial-gradient(circle at 34% 50%,rgba(217,220,230,.3),transparent 55%);animation:nxglow 60s linear infinite -12s}
  256. .nx-moon-disc{position:absolute;inset:0}
  257. .nx-moon-pic{position:absolute;inset:-19%;animation:nxpf 60s linear infinite -12s}
  258. .nx .nx-moon-pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;animation:nxpo 60s linear infinite -12s}
  259. .nx-moon-clip{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;overflow:hidden}
  260. .nx-moon-veil{position:absolute;inset:0;display:block;border-radius:50%;background:#08080a;box-shadow:0 0 26px 14px #08080a;animation:nxvl 60s ease-in-out infinite -12s}
  261. .nx-sp{position:absolute;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:nxtwink 2.4s ease-in-out infinite}
  262. .nx-sp.sp1{width:26px;height:26px;right:-24px;top:8px}.nx-sp.sp2{width:16px;height:16px;right:-46px;top:84px;animation-delay:.7s}.nx-sp.sp3{width:20px;height:20px;right:-12px;bottom:10px;animation-delay:1.3s}
  263. .nx-ticker{overflow:hidden;border:1px solid rgba(217,220,230,.3);border-top:1px solid rgba(217,220,230,.5);border-bottom:0;background:#070709;padding:9px 0}
  264. .nx-ticker-track{display:flex;width:max-content;animation:nxmarq 28s linear infinite}
  265. .nx-ticker:hover .nx-ticker-track{animation-play-state:paused}
  266. .nx-ticker-set{display:flex;flex:0 0 auto}
  267. .nx-ticker-set span{font-family:"Cinzel",serif;padding:0 28px;white-space:nowrap;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:#b9a6d6}
  268. .nx-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"about rules" "about find";gap:22px;padding:22px 14px 14px;border:1px solid rgba(217,220,230,.3);border-top:0;border-radius:0 0 22px 22px;background:linear-gradient(180deg,#070709,#0b0b0e)}
  269. .nx-panel{position:relative;padding:28px 24px 26px;border:1px solid rgba(217,220,230,.28);border-radius:18px;background:linear-gradient(160deg,rgba(18,18,22,.88),rgba(6,6,8,.9));box-shadow:0 0 26px rgba(150,150,160,.15),inset 0 0 40px rgba(0,0,0,.4)}
  270. .nx-h{font-family:"Cinzel Decorative","Cinzel",serif;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:16px;font-size:1.5rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 0 14px rgba(255,255,255,.55)}
  271. .nx-h span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:0;flex:none}
  272. .nx-h span::before{content:"✦";font-size:26px;line-height:1;color:#fff;text-shadow:0 0 10px #fff,0 0 22px rgba(185,166,214,.9);animation:nxspin 6s linear infinite}
  273. .nx-h::after{content:"";order:2;flex:1 1 60px;height:2px;min-width:40px;border-radius:2px;background:linear-gradient(90deg,#fff,rgba(217,220,230,.55) 35%,rgba(185,166,214,.2) 70%,transparent);filter:drop-shadow(0 0 4px rgba(217,220,230,.8));align-self:center}
  274. .nx-h small{order:3;font-family:"Jim Nightshade","Crimson Text",cursive;font-size:1.1rem;flex-basis:100%;font-size:.72rem;letter-spacing:.3em;color:#8e8e98;text-shadow:none;font-style:italic;text-transform:none}
  275. .nx-about{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:24px;align-items:start}
  276. .nx-portrait{border:2px solid #d9dce6;border-radius:160px 160px 14px 14px;overflow:hidden;aspect-ratio:3/4;background:linear-gradient(160deg,#1f1f24,#08080a);box-shadow:0 0 0 6px rgba(217,220,230,.12),0 0 28px rgba(217,220,230,.3)}
  277. .nx-portrait{position:relative}
  278. .nx-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
  279. .nx-portrait img:first-child{opacity:1}
  280. .nx-about:has(.nx-acc details:nth-child(n+2)[open]) .nx-portrait img:first-child{opacity:0}
  281. .nx-about:has(.nx-acc details:nth-child(2)[open]) .nx-portrait img:nth-child(2),.nx-about:has(.nx-acc details:nth-child(3)[open]) .nx-portrait img:nth-child(3){opacity:1}
  282. .nx-about .nx-acc details[open]{flex:1 1 auto}
  283. .nx-about .nx-acc details[open]>summary{position:relative;pointer-events:none;cursor:default}
  284. .nx-about .nx-acc details[open]>summary::after{font-size:1.7rem;line-height:1;color:#fff;text-shadow:0 0 10px #fff,0 0 22px rgba(185,166,214,.9);transform:none;animation:nxspin 6s linear infinite}
  285. .nx-about .nx-acc details[open]>summary::before{content:"";position:absolute;right:34px;top:50%;width:96px;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(185,166,214,.5) 45%,#fff);filter:drop-shadow(0 0 4px rgba(255,255,255,.8))}
  286. .nx-acc{display:flex;flex-direction:column;gap:10px}
  287. .nx-acc details{border:1px solid rgba(217,220,230,.3);border-radius:22px;background:rgba(9,9,12,.7);overflow:hidden;transition:.3s}
  288. .nx-acc details[open]{border-color:#d9dce6;box-shadow:0 0 18px rgba(217,220,230,.25)}
  289. .nx-acc summary{font-family:"Cinzel",serif;cursor:pointer;list-style:none;padding:13px 18px;letter-spacing:.16em;text-transform:uppercase;font-size:.85rem;color:#ececf0;display:flex;justify-content:space-between;align-items:center;transition:.25s}
  290. .nx-acc summary::-webkit-details-marker{display:none}
  291. .nx-acc summary::after{content:"✦";color:#b9a6d6;transition:transform .4s}
  292. .nx-acc summary:hover{background:rgba(217,220,230,.14);color:#fff}
  293. .nx-acc details[open] summary::after{transform:rotate(225deg);color:#fff}
  294. .nx-acc-body{padding:6px 18px 18px;color:#cfcfd6;font-size:.95rem}
  295. .nx-acc details[open]>.nx-acc-body{animation:nxdrop .5s ease}
  296. .nx-acc-body p+p{margin-top:10px}
  297. .nx-tags,.nx-dni{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
  298. .nx-tags span{padding:3px 12px;border-radius:999px;border:1px solid #5b5b66;background:rgba(150,150,160,.2);font-size:.75rem;letter-spacing:.1em;transition:.25s}
  299. .nx-tags span:hover{background:#b9a6d6;color:#08080a;transform:translateY(-2px)}
  300. .nx-quote{font-family:"Jim Nightshade","Crimson Text",cursive;font-size:1.35rem;padding-left:14px;border-left:2px solid #b9a6d6;font-style:italic;color:#fff}
  301. .nx-const{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:8px}
  302. .nx-rule{position:relative;padding:14px 14px 14px 38px;border:1px solid rgba(217,220,230,.3);border-radius:10px;background:rgba(18,18,22,.7);transition:.3s}
  303. .nx-rule::before{content:"✦";position:absolute;left:13px;top:12px;color:#d9dce6;animation:nxtwink 3s ease-in-out infinite}
  304. .nx-rule b{font-family:"Cinzel",serif;display:block;color:#fff;letter-spacing:.08em}
  305. .nx-rule span{font-size:.85rem;color:#b4b4bc}
  306. .nx-rule:hover{transform:translateY(-4px);border-color:#d9dce6;box-shadow:0 6px 18px rgba(150,150,160,.4)}
  307. .nx-dni span{padding:4px 14px;border-radius:6px;border:1px solid rgba(220,120,140,.45);color:#e9b8c4;font-size:.8rem;letter-spacing:.08em}
  308. .profile-page-container-flex-box{background:transparent !important}
  309. #profile-tabs::before{content:"✦ Under the Stars ✦";display:block;margin:6px auto 18px;padding:0 6px;text-align:center;font-family:"Cinzel Decorative","Cinzel",serif;font-size:1.6rem;letter-spacing:.16em;text-transform:uppercase;background:linear-gradient(100deg,#fff 0,#c9cbd3 30%,#8f8f99 50%,#fff 70%,#d9dce6 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 10px rgba(255,255,255,.45));animation:nxshine 5s linear infinite}
  310. .pp-tabs-wrapper{display:flex !important;flex-wrap:wrap;justify-content:center !important;gap:10px 12px !important;width:100% !important;height:auto !important;margin:0 auto 18px !important;padding:6px !important;background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important}
  311. .pp-tabs-button{position:relative;flex:0 1 190px;min-width:0;padding:9px 14px !important;font-family:"Cinzel",serif !important;font-size:.8rem !important;color:#d9dce6 !important;letter-spacing:.16em !important;text-transform:uppercase !important;background:rgba(8,8,10,.85) !important;border:1px solid rgba(217,220,230,.45) !important;border-radius:999px !important;box-shadow:none !important;transition:.25s}
  312. .pp-tabs-button:hover{color:#fff !important;border-color:#fff !important;text-shadow:0 0 10px #b9a6d6}
  313. .pp-tabs-button[aria-selected="true"],.pp-tabs-button[data-selected]{color:#fff !important;background:linear-gradient(180deg,rgba(185,166,214,.22),rgba(8,8,10,.9)) !important;border-color:#d9dce6 !important;box-shadow:0 0 18px rgba(217,220,230,.4) !important;text-shadow:0 0 10px rgba(255,255,255,.6)}
  314. .pp-tabs-button[aria-selected="true"]::before{content:"✦";display:inline-block;margin-right:8px;font-size:.7rem}
  315. .pp-tabs-indicator{display:none !important}
  316. .character-list-pagination-flex{position:relative;display:grid !important;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"search search search" "count sort filt";align-items:center;gap:14px 10px;margin:22px 0 28px !important;padding:22px 18px 16px !important;color:#b9a6d6 !important;border:1px solid rgba(217,220,230,.4);border-radius:18px;background:radial-gradient(1.4px 1.4px at 20px 24px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 70px 60px,rgba(217,220,230,.6),transparent),radial-gradient(1.2px 1.2px at 120px 14px,rgba(255,255,255,.6),transparent),linear-gradient(160deg,rgba(24,22,32,.95),rgba(6,6,8,.97));background-size:140px 80px,140px 80px,140px 80px,auto;box-shadow:0 0 26px rgba(150,150,160,.18),inset 0 0 30px rgba(0,0,0,.4)}
  317. .character-list-pagination-flex::after{content:"☾";position:absolute;right:16px;top:-16px;font-size:26px;line-height:1;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.9);pointer-events:none}
  318. .profile-filters-flex-outer,.profile-filters-flex-inner{display:contents !important}
  319. .character-list-pagination-box{grid-area:count;justify-self:start}
  320. .profile-pagination-flex-outer{display:block}
  321. .profile-filters-flex-inner-hassearchfilter{grid-area:search;min-width:0}
  322. .profile-filters-flex-inner-onorderchanged{grid-area:sort;justify-self:end;width:100%;max-width:180px;min-width:0}
  323. .pp-fl-filter-button{grid-area:filt}
  324. .pp-pg-total{display:inline-flex !important;align-items:center;padding:5px 16px !important;color:#fff !important;background:rgba(8,8,10,.85) !important;border:1px solid #d9dce6 !important;border-radius:999px !important;box-shadow:0 0 12px rgba(217,220,230,.25) !important}
  325. .pp-pg-total div{display:flex;align-items:baseline;gap:7px}
  326. .pp-pg-total-count{font-family:"Cinzel Decorative","Cinzel",serif !important;font-size:1.3rem !important;color:#fff !important}
  327. .pp-pg-total-text{margin:0 !important;font-size:0 !important;color:#b9a6d6 !important}
  328. .pp-pg-total-text::after{content:"signs";font-family:"Cutive Mono",monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#b9a6d6}
  329. .profile-tab-panel[data-tab="chats"] .pp-pg-total-text::after{content:"transits"}
  330. .profile-tab-panel[data-tab="scripts"] .pp-pg-total-text::after{content:"omens"}
  331. .pp-tabs-button[data-tab="characters"],.pp-tabs-button[data-tab="chats"],.pp-tabs-button[data-tab="scripts"]{font-size:0 !important;letter-spacing:0 !important}
  332. .pp-tabs-button[data-tab]::after{font-family:"Cinzel",serif;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}
  333. .pp-tabs-button[data-tab="characters"]::after{content:"Signs"}
  334. .pp-tabs-button[data-tab="chats"]::after{content:"Transits"}
  335. .pp-tabs-button[data-tab="scripts"]::after{content:"Omens"}
  336. .profile-character-search-input-group{position:relative}
  337. .profile-character-search-input-group::before{content:"✦";position:absolute;left:18px;top:50%;z-index:2;margin-top:-.6em;font-size:1rem;line-height:1.2;color:#b9a6d6;pointer-events:none;animation:nxtwink 3s ease-in-out infinite}
  338. .pp-fl-search-input{width:100% !important;min-height:44px;padding:10px 20px 10px 44px !important;background:rgba(8,8,10,.92) !important;color:#fff !important;font-family:"Cutive Mono",monospace !important;border:1px solid rgba(217,220,230,.5) !important;border-radius:999px !important;box-shadow:none !important}
  339. .pp-fl-search-input::placeholder{color:#8e8e98 !important}
  340. .pp-fl-search-input:focus{border-color:#fff !important;box-shadow:0 0 16px rgba(217,220,230,.55) !important}
  341. .pp-fl-filter-button{display:inline-flex !important;align-items:center;justify-content:center;width:44px !important;min-width:44px !important;height:44px !important;padding:0 !important;color:#d9dce6 !important;background:#08080a !important;border:1px solid #d9dce6 !important;border-radius:50% !important;box-shadow:0 0 12px rgba(217,220,230,.3) !important;transition:.25s}
  342. .pp-fl-filter-button:hover{color:#08080a !important;background:#e8eaf1 !important;transform:rotate(-12deg);box-shadow:0 0 18px rgba(217,220,230,.6) !important}
  343. .react-select__control{min-height:44px !important;background:rgba(8,8,10,.92) !important;border:1px solid rgba(217,220,230,.5) !important;border-radius:999px !important;box-shadow:none !important}
  344. .react-select__control:hover{border-color:#fff !important}
  345. .react-select__indicator-separator{background-color:rgba(217,220,230,.3) !important}
  346. .react-select__indicator{color:#b9a6d6 !important}
  347. .react-select__menu{background:#08080a !important;border:1px solid #5b5b66 !important;border-radius:14px !important;overflow:hidden}
  348. .react-select__option{background:transparent !important;color:#d9dce6 !important}
  349. .react-select__option--is-focused{background:rgba(217,220,230,.2) !important}
  350. .react-select__single-value,.react-select__placeholder{color:#e6e6ea !important;font-family:"Cinzel",serif !important;font-size:.8rem !important}
  351. .profile-top-bar,.profile-top-bar-flex-outer,.pp-top-bar-outer,.pp-top-bar-inner{background-color:rgba(5,5,7,.92) !important;border-color:rgba(217,220,230,.3) !important;color:#d9dce6 !important}
  352. .pp-top-bar-app-menu-list{background:#08080a !important;border:1px solid #5b5b66 !important}
  353. .pp-top-bar-app-menu-list-item{color:#d9dce6 !important}
  354. .pp-top-bar-app-menu-list-item:hover{background:rgba(217,220,230,.2) !important}
  355. .pp-fl-modal{background:#08080a !important;border:1px solid #b9a6d6 !important;color:#ececf0 !important;border-radius:18px !important;box-shadow:0 0 40px rgba(150,150,160,.5) !important}
  356. .profile-filter-modal-modal-overlay{background:rgba(2,2,3,.82) !important;backdrop-filter:blur(4px)}
  357. @keyframes nxtwink{0%,100%{opacity:1}50%{opacity:.35}}
  358. @keyframes nxshine{to{background-position:-300% 0}}
  359. @keyframes nxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  360. @keyframes nxmarq{to{transform:translateX(-50%)}}
  361. @keyframes nxspin{to{transform:rotate(360deg)}}
  362. @keyframes nxdrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  363. @media (max-width:720px){
  364. .nx-about{grid-template-columns:1fr}
  365. .nx-portrait{max-width:230px;margin:0 auto}
  366. .nx-panel{padding:26px 12px 20px}
  367. .nx-h{font-size:1.3rem}
  368. }
  369. .nx-bg,.nx-fore{position:fixed !important;inset:0;pointer-events:none;overflow:hidden}
  370. .nx-bg{z-index:0 !important}
  371. .nx-fore{z-index:95 !important}
  372. .nx-bg i{position:absolute;display:block;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:.12;animation:nxtw 5s ease-in-out infinite}
  373. .nx-bg i:nth-child(3n){clip-path:none;border-radius:50%;width:2px !important;height:2px !important;box-shadow:0 0 4px #fff}
  374. .nx-bg i:nth-child(1){left:25%;top:18%;width:6px;height:6px;animation-duration:5.3s;animation-delay:-4.9s}
  375. .nx-bg i:nth-child(2){left:86%;top:60%;width:8px;height:8px;animation-duration:4.9s;animation-delay:-0.8s}
  376. .nx-bg i:nth-child(3){left:44%;top:33%;width:12px;height:12px;animation-duration:6.1s;animation-delay:-2.2s}
  377. .nx-bg i:nth-child(4){left:27%;top:65%;width:10px;height:10px;animation-duration:4.7s;animation-delay:-5.1s}
  378. .nx-bg i:nth-child(5){left:39%;top:61%;width:10px;height:10px;animation-duration:7.1s;animation-delay:-2.6s}
  379. .nx-bg i:nth-child(6){left:34%;top:91%;width:14px;height:14px;animation-duration:6.9s;animation-delay:-5.4s}
  380. .nx-bg i:nth-child(7){left:17%;top:44%;width:12px;height:12px;animation-duration:3.8s;animation-delay:-1.0s}
  381. .nx-bg i:nth-child(8){left:68%;top:89%;width:12px;height:12px;animation-duration:3.2s;animation-delay:-3.3s}
  382. .nx-bg i:nth-child(9){left:24%;top:33%;width:12px;height:12px;animation-duration:5.6s;animation-delay:-0.1s}
  383. .nx-bg i:nth-child(10){left:27%;top:49%;width:14px;height:14px;animation-duration:6.5s;animation-delay:-2.5s}
  384. .nx-bg i:nth-child(11){left:75%;top:67%;width:12px;height:12px;animation-duration:5.3s;animation-delay:-3.4s}
  385. .nx-bg i:nth-child(12){left:65%;top:30%;width:12px;height:12px;animation-duration:6.8s;animation-delay:-5.0s}
  386. .nx-bg i:nth-child(13){left:93%;top:41%;width:8px;height:8px;animation-duration:4.2s;animation-delay:-5.1s}
  387. .nx-bg i:nth-child(14){left:35%;top:3%;width:8px;height:8px;animation-duration:7.3s;animation-delay:-4.4s}
  388. .nx-bg i:nth-child(15){left:70%;top:47%;width:10px;height:10px;animation-duration:5.3s;animation-delay:-4.7s}
  389. .nx-bg i:nth-child(16){left:72%;top:17%;width:6px;height:6px;animation-duration:7.2s;animation-delay:-4.6s}
  390. .nx-bg i:nth-child(17){left:89%;top:83%;width:8px;height:8px;animation-duration:7.4s;animation-delay:-3.1s}
  391. .nx-bg i:nth-child(18){left:77%;top:36%;width:8px;height:8px;animation-duration:4.3s;animation-delay:-0.5s}
  392. .nx-bg i:nth-child(19){left:13%;top:72%;width:14px;height:14px;animation-duration:6.2s;animation-delay:-4.8s}
  393. .nx-bg i:nth-child(20){left:2%;top:20%;width:8px;height:8px;animation-duration:7.2s;animation-delay:-0.6s}
  394. .nx-fore i{position:absolute;display:block;width:150px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.45) 40%,transparent);opacity:0;filter:drop-shadow(0 0 4px rgba(255,255,255,.9));transform:rotate(-35deg)}
  395. .nx-fore i::after{content:"";position:absolute;left:-7px;top:-6px;width:14px;height:14px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
  396. .nx-fore i:nth-child(1){left:72%;top:6%;animation:nxsh 11s linear infinite 2s}
  397. .nx-fore i:nth-child(2){left:94%;top:34%;width:110px;animation:nxsh 15s linear infinite 7s}
  398. .nx-fore i:nth-child(3){left:50%;top:3%;width:120px;animation:nxsh 13s linear infinite 10s}
  399. .nx-fore i:nth-child(4){left:98%;top:58%;width:90px;animation:nxsh 17s linear infinite 4s}
  400. @keyframes nxtw{0%,100%{opacity:.1;transform:scale(.6)}50%{opacity:.8;transform:scale(1)}}
  401. @keyframes nxsh{0%{opacity:0;transform:rotate(-35deg) translateX(0)}2%{opacity:1}12%{opacity:0;transform:rotate(-35deg) translateX(-560px)}100%{opacity:0;transform:rotate(-35deg) translateX(-560px)}}
  402. @media (prefers-reduced-motion:reduce){.nx-bg i,.nx-fore i,.nx-sona img,.pp-top-bar-create-char::before,.nx-stage::before,.nx-stage::after,.nx-kicker,.nx-title span,.nx-moon,.nx-moon-glow,.nx-moon-disc b,.nx-pet-img,.nx-pet-orbit,.nx-pet-orbit i,.nx-pet summary::after,.nx-bubble,.nx-bubble-box::after,.nx-sp,.nx-ticker-track,.nx-rule::before,.nx-orb::after,.nx-acc-body,.nx-gtrack,.nx-mp-eq i,.nx-mp-bar i,.nx-mp-disc,.nx-mp-disc img{animation:none !important}.nx-fore{display:none !important}}
  403. .nx-credit{padding:16px 0 4px;text-align:center;font-family:"Cinzel",serif;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:#5b5b66}
  404. .nx-sona{position:absolute;z-index:2;bottom:0;right:320px;height:86%;pointer-events:none}
  405. .nx-sona img{display:block;height:100%;width:auto;max-width:none;transform-origin:50% 100%;filter:drop-shadow(0 0 16px rgba(217,220,230,.3));animation:nxbreathe 6s ease-in-out infinite}
  406. @keyframes nxbreathe{0%,100%{transform:scale(1);filter:drop-shadow(0 0 14px rgba(217,220,230,.25))}50%{transform:scale(1.018);filter:drop-shadow(0 0 28px rgba(217,220,230,.55))}}
  407. .pp-uc-background,.profile-info-wrapper-box{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
  408. .profile-info-stack{display:grid !important;grid-template-columns:minmax(0,1fr);align-items:stretch !important;gap:0 !important;padding:0 !important;margin:0 !important;width:100%}
  409. .pp-uc-about-me{display:contents !important}
  410. .nx{grid-area:1/1;position:relative;z-index:1}
  411. .profile-info-stack>div:first-child:not(.profile-info-hstack){grid-area:1/1;justify-self:end;align-self:start;z-index:12;margin:14px 14px 0 0}
  412. .profile-info-hstack{grid-area:1/1;align-self:start;z-index:6;display:block !important;width:100%;max-width:52%;margin:0 !important;padding:223px 0 0 35px !important;pointer-events:none}
  413. .profile-avatar-container,.pp-uc-avatar-container{display:none !important}
  414. .profile-info-stack-inner{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:center !important;gap:10px !important;width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important}
  415. .profile-info-stack-inner-flex{display:contents !important}
  416. .pp-uc-title{display:none !important}
  417. .pp-uc-followers-count{order:1;display:inline-flex !important;align-items:center;gap:6px;margin:0 !important;padding:6px 16px;border:1px solid #d9dce6;border-radius:999px;background:rgba(8,8,10,.72);color:#fff !important;font-family:"Cutive Mono",monospace !important;font-size:.9rem !important;letter-spacing:.06em;pointer-events:auto}
  418. .pp-uc-followers-count::before{content:"★";color:#d9dce6}
  419. .pp-uc-followers-count span{font:inherit !important;color:inherit !important}
  420. .pp-uc-followers-count span:last-child{font-size:0 !important}
  421. .pp-uc-followers-count span:last-child::after{content:"Stars";font-size:.9rem}
  422. .profile-info-stack-inner>button{order:2;margin:0 !important;padding:6px 18px !important;pointer-events:auto;font-family:"Cinzel",serif !important;font-size:.75rem !important;height:auto !important}
  423. .pp-uc-member-since::after{content:"Shining since: mm.dd.yy";font-size:.75rem}
  424. .profile-janitor-plus-box,.profile-badges{order:3;display:flex;gap:6px;align-items:center;pointer-events:auto}
  425. .pp-uc-member-since{order:5;display:inline-flex !important;font-size:0 !important;margin:0 !important;padding:4px 14px;border:1px dashed rgba(217,220,230,.5);border-radius:999px;color:#b9a6d6 !important;font-family:"Cutive Mono",monospace !important;letter-spacing:.08em;pointer-events:auto}
  426. .profile-info-stack>div:has(.profile-uc-follow-button):not(.profile-info-hstack){grid-area:1/1;align-self:start;justify-self:start;z-index:6;display:flex;gap:8px;margin:0 !important;padding:290px 0 0 35px !important;align-items:center;pointer-events:none}
  427. .profile-info-stack>div:has(.profile-uc-follow-button):not(.profile-info-hstack) button,.profile-info-stack>div:has(.profile-uc-follow-button):not(.profile-info-hstack) a{pointer-events:auto}
  428. .pp-top-bar-logo{position:relative;display:block;width:36px;height:36px}
  429. .pp-top-bar-logo img{opacity:0}
  430. .pp-top-bar-logo::before{content:"";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(90deg,#f1f2f7 50%,#0a0a0d 50%);border:1.5px solid #d9dce6;box-shadow:0 0 12px rgba(217,220,230,.75),0 0 28px rgba(217,220,230,.35)}
  431. .pp-top-bar-tabs>span{display:none !important}
  432. .pp-top-bar-tabs a{font-size:0 !important;min-width:40px;text-align:center}
  433. .pp-top-bar-tabs a::after{display:block;font-size:22px;line-height:1.4;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.85),0 0 22px rgba(217,220,230,.5)}
  434. .pp-top-bar-tabs a:nth-of-type(1){display:none !important}
  435. .pp-top-bar-tabs a:nth-of-type(2)::after{content:"✦"}
  436. .pp-top-bar-notifications-button svg{display:none !important}
  437. .pp-top-bar-notifications-button::after{content:"☾";font-size:22px;line-height:1;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.85),0 0 22px rgba(217,220,230,.5)}
  438. @media (max-width:999px){
  439. .nx-wrap{display:flex;flex-direction:column}
  440. .nx-title{height:74px;font-size:52px;line-height:66px}
  441. .profile-info-hstack{padding-top:197px !important}
  442. .profile-info-stack>div:has(.profile-uc-follow-button):not(.profile-info-hstack){padding-top:311px !important}
  443. }
  444. @media (max-width:720px){
  445. #profile-tabs::before{font-size:1.05rem;letter-spacing:.08em}
  446. .character-list-pagination-flex{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"search search" "count filt" "sort sort";gap:12px 10px;padding:22px 14px 14px !important}
  447. .profile-filters-flex-inner-onorderchanged{max-width:none}
  448. .profile-page-flex{padding:12px 4px 70px !important;gap:20px !important}
  449. .nx-title{height:60px;font-size:42px;line-height:54px}
  450. .nx-hero-text{max-width:100%}
  451. .nx-panel{padding:26px 12px 20px}
  452. .nx-panel{display:flex;flex-direction:column}
  453. .nx-about{display:contents}
  454. #about .nx-portrait{order:-1;width:100%;max-width:260px;aspect-ratio:3/4;min-height:0;margin:0 auto 16px}
  455. .nx-wrap{padding:22px 8px 12px}
  456. .nx-pet{right:22px;bottom:84px}
  457. }
  458. .pp-top-bar-create-char,.profile-top-bar-create-char{position:relative !important;box-sizing:border-box;display:inline-flex !important;align-items:center;justify-content:center;flex:0 0 44px !important;width:44px !important;min-width:44px !important;max-width:44px !important;height:44px !important;min-height:44px !important;padding:0 !important;overflow:visible !important;background:transparent !important;border:0 !important;border-radius:50% !important;box-shadow:none !important;color:transparent !important;font-size:0 !important;line-height:0 !important;opacity:1 !important;visibility:visible !important;transition:background .3s}
  459. .pp-top-bar-create-char svg,.pp-top-bar-create-char span{display:none !important}
  460. .pp-top-bar-create-char::before{content:"✦" !important;position:absolute !important;inset:0 !important;z-index:2;display:flex !important;align-items:center;justify-content:center;width:auto !important;height:auto !important;margin:0 !important;padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important;opacity:1 !important;visibility:visible !important;filter:none !important;font-size:26px !important;line-height:1 !important;color:#fff !important;text-shadow:0 0 10px rgba(255,255,255,.85),0 0 22px rgba(217,220,230,.5);pointer-events:none;transform:none;animation:nxspin 6s linear infinite !important}
  461. .pp-top-bar-create-char::after{content:none !important;display:none !important}
  462. .pp-top-bar-create-char:hover{background:rgba(217,220,230,.12) !important}
  463. .pp-top-bar-notifications-button,.profile-top-bar-notifications-button{display:inline-flex !important;align-items:center;justify-content:center;width:42px !important;min-width:42px !important;height:42px !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:50% !important;box-shadow:none !important}
  464. .pp-top-bar-notifications-button:hover{background:rgba(217,220,230,.12) !important}
  465. .pp-top-bar-app-menu,.profile-top-bar-app-menu{box-sizing:border-box !important;display:inline-flex !important;align-items:center;justify-content:center;width:42px !important;min-width:42px !important;height:42px !important;padding:0 !important;overflow:hidden !important;background:#08080a !important;border:2px solid #d9dce6 !important;border-radius:50% !important;box-shadow:0 0 12px rgba(217,220,230,.7),0 0 28px rgba(217,220,230,.3) !important;transition:box-shadow .3s}
  466. .pp-top-bar-app-menu:hover{box-shadow:0 0 16px rgba(255,255,255,.9),0 0 36px rgba(217,220,230,.5) !important}
  467. .pp-top-bar-app-menu div,.pp-top-bar-app-menu span{display:contents !important}
  468. .pp-top-bar-app-menu img{display:block !important;width:100% !important;height:100% !important;object-fit:cover;border-radius:50% !important}
  469. .pp-top-bar-notifications-popover{background:#08080a !important;border:1px solid rgba(217,220,230,.4) !important;border-radius:20px !important;box-shadow:0 0 30px rgba(217,220,230,.18),inset 0 0 40px rgba(0,0,0,.6) !important;color:#ececf0 !important;overflow:hidden}
  470. .pp-top-bar-notifications-popover::before{content:"" !important;position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,#fff,transparent);pointer-events:none}
  471. .pp-top-bar-notifications-popover div{background-color:transparent !important;border-color:rgba(217,220,230,.14) !important}
  472. .pp-top-bar-notifications-popover button{background:transparent !important;border:1px solid #5b5b66 !important;border-radius:999px !important;color:#d9dce6 !important;transition:.25s}
  473. .pp-top-bar-notifications-popover button:hover{border-color:#fff !important;box-shadow:0 0 12px rgba(217,220,230,.4)}
  474. .pp-top-bar-notifications-popover a{color:#b9a6d6 !important}
  475. .pp-top-bar-notifications-popover img{border-radius:50% !important;border:1px solid rgba(217,220,230,.4) !important}
  476. .pp-top-bar-notifications-popover [class^="_unreadIndicator"]{background-color:#b9a6d6 !important}
  477. .pp-top-bar-notifications-popover [class^="_notificationItem"]:hover{background-color:rgba(217,220,230,.07) !important}
  478. .nx-pet{position:fixed;right:30px;bottom:22px;z-index:97}
  479. .nx-pet summary{position:relative;display:block;width:96px;height:130px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  480. .nx-pet summary::-webkit-details-marker{display:none}
  481. .nx-pet summary::after{content:"";position:absolute;left:50%;bottom:-2px;width:64px;height:10px;margin-left:-32px;border-radius:50%;background:rgba(217,220,230,.28);filter:blur(3px)}
  482. .nx-pet[open] summary::after{animation:nxshadow 1.3s ease-in-out 1 both}
  483. .nx-pet-img{position:absolute;left:0;right:0;bottom:4px;height:112px;transform-origin:50% 100%}
  484. .nx .nx-pet-img img{display:block;height:100%;width:auto;max-width:none;margin:0 auto;filter:drop-shadow(0 0 10px rgba(217,220,230,.5))}
  485. .nx-pet[open] .nx-pet-img{animation:nxjump 1.3s ease-in-out 1 both}
  486. .nx-pet-orbit{position:absolute;left:50%;top:56px;width:0;height:0;animation:nxspin 10s linear infinite}
  487. .nx-pet-orbit i{position:absolute;display:block;width:14px;height:14px;margin:-7px 0 0 -7px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:nxtwink 2.2s ease-in-out infinite}
  488. .nx-pet-orbit i:nth-child(1){left:0;top:-58px}
  489. .nx-pet-orbit i:nth-child(2){left:56px;top:-6px;width:10px;height:10px;animation-delay:.5s}
  490. .nx-pet-orbit i:nth-child(3){left:-54px;top:10px;width:18px;height:18px;animation-delay:1s}
  491. .nx-pet-orbit i:nth-child(4){left:18px;top:54px;width:11px;height:11px;animation-delay:1.5s}
  492. .nx-bubble{position:absolute;right:-8px;bottom:100%;width:230px;margin-bottom:14px;padding:16px 18px;border:1px solid #d9dce6;border-radius:18px;background:rgba(8,8,10,.97);box-shadow:0 0 22px rgba(217,220,230,.35);transform-origin:100% 100%;animation:nxpop .35s ease both;transition:translate .35s ease,box-shadow .35s ease,border-color .35s}
  493. .nx-bubble:hover{translate:0 -4px;border-color:#fff;box-shadow:0 0 30px rgba(217,220,230,.6)}
  494. .nx-bubble::after{content:"";position:absolute;right:38px;bottom:-8px;width:14px;height:14px;background:#08080a;border-right:1px solid #d9dce6;border-bottom:1px solid #d9dce6;transform:rotate(45deg)}
  495. .nx-bubble-box{padding:0;border:0;background:none;text-align:center;font-family:"Cutive Mono",monospace;font-size:.82rem;line-height:1.45;color:#ececf0}
  496. .nx-bubble-box::after{content:"";display:inline-block;width:1px;height:1em;margin-left:3px;vertical-align:-2px;background:#fff;animation:nxcaret 1s steps(1) infinite}
  497. @keyframes nxjump{0%,100%{transform:translateY(0) scale(1,1)}12%{transform:translateY(0) scale(1.07,.92)}30%{transform:translateY(-36px) scale(.96,1.06)}50%{transform:translateY(0) scale(1.07,.92)}60%{transform:translateY(0) scale(1,1)}74%{transform:translateY(-22px) scale(.98,1.03)}90%{transform:translateY(0) scale(1.04,.96)}}
  498. @keyframes nxshadow{0%,40%,100%{transform:scale(1,1);opacity:.9}56%{transform:scale(.6,1);opacity:.4}66%{transform:scale(1.1,1);opacity:1}78%{transform:scale(.75,1);opacity:.55}}
  499. @keyframes nxpop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
  500. @keyframes nxcaret{50%{opacity:0}}
  501. @keyframes nxkc{0%,5%,95%,100%{color:#d8ccf2;text-shadow:0 0 12px rgba(185,166,214,.9),0 0 26px rgba(185,166,214,.6)}14%,86%{color:#fff;text-shadow:0 0 6px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.85),0 0 28px rgba(0,0,0,.6)}}
  502. @keyframes nxvl{0%,5%{translate:0 0}42%,50%{translate:-104% 0}50.01%,58%{translate:104% 0}95%,100%{translate:0 0}}
  503. @keyframes nxpf{0%,49.99%{transform:scale(1,1)}50%,100%{transform:scale(-1,1)}}
  504. @keyframes nxpo{0%,5%,95%,100%{opacity:.3}14%,86%{opacity:1}}
  505. @keyframes nxglow{0%,100%{opacity:.12}25%,75%{opacity:.55}50%{opacity:1}}
  506. .pp-mnb-wrapper{background:rgba(5,5,7,.94) !important;border-top:1px solid rgba(217,220,230,.3) !important}
  507. .pp-mnb-item-icon{display:none !important}
  508. .pp-mnb-item{display:flex !important;align-items:center;justify-content:center}
  509. .pp-mnb-item::after{font-size:24px;line-height:1.4;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.85),0 0 22px rgba(217,220,230,.5)}
  510. .pp-mnb-container a:nth-of-type(1) .pp-mnb-item::after{content:"☾"}
  511. .pp-mnb-container a:nth-of-type(2) .pp-mnb-item::after{content:"✺"}
  512. .pp-mnb-container a:nth-of-type(3) .pp-mnb-item::after{content:"✦"}
  513. #about{grid-area:about}
  514. #about{display:flex;flex-direction:column}
  515. #about .nx-about{flex:1;align-items:stretch}
  516. #about .nx-portrait{aspect-ratio:auto;min-height:380px}
  517. #about .nx-acc{align-self:stretch}
  518. #rules{grid-area:rules}
  519. #findme{grid-area:find}
  520. #series{grid-area:series}
  521. .nx-rf{position:relative;height:380px;padding:12px;border:1px solid rgba(217,220,230,.4);border-radius:16px;overflow:hidden;background:#050507}
  522. .nx .nx-rf-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.9;transition:opacity .5s}
  523. .nx-rf:has(details[open]) .nx-rf-bg{opacity:0}
  524. .nx-rf>details{display:block}
  525. .nx-rf>details>summary{position:absolute;top:12px;bottom:12px;width:calc(50% - 18px);overflow:hidden;list-style:none;cursor:pointer;border:1px solid rgba(217,220,230,.5);border-radius:14px;background:linear-gradient(160deg,#2b2b31,#08080a);box-shadow:0 0 18px rgba(0,0,0,.6);transition:width .4s,box-shadow .3s,border-color .3s;-webkit-tap-highlight-color:transparent}
  526. .nx-rf>details>summary::-webkit-details-marker{display:none}
  527. .nx-rf-a>summary{left:12px;transform-origin:0 50%}
  528. .nx-rf-b>summary{right:12px;transform-origin:100% 50%}
  529. .nx .nx-rf>details>summary img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:grayscale(1) brightness(.6) contrast(1.1);transition:.5s}
  530. .nx-rf>details>summary:hover{border-color:#fff;box-shadow:0 0 24px rgba(217,220,230,.45)}
  531. .nx-rf>details>summary:hover img{filter:grayscale(1) brightness(.9) contrast(1.1);transform:scale(1.05)}
  532. .nx-rf>details>summary b{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 12px;text-align:center;font-family:"Cinzel Decorative","Cinzel",serif;font-size:1.3rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.6);background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
  533. .nx-rf>details>summary b::before{content:"✦ ";font-size:.7em;color:#b9a6d6}
  534. .nx-rf>details[open]>summary{width:36%;border-color:#d9dce6;animation:nxrf .55s ease both}
  535. .nx .nx-rf>details[open]>summary img{filter:grayscale(.15) brightness(.95)}
  536. .nx-rf:has(details[open])>details:not([open])>summary{display:none}
  537. .nx-rf-body{position:absolute;top:12px;bottom:12px;overflow:auto;padding:16px;border:1px solid rgba(217,220,230,.4);border-radius:14px;background:linear-gradient(160deg,rgba(18,18,22,.97),rgba(6,6,8,.98));box-shadow:inset 0 0 30px rgba(0,0,0,.5);scrollbar-width:thin;scrollbar-color:#5b5b66 transparent}
  538. .nx-rf details[open]>.nx-rf-body{animation:nxdrop .5s .15s ease both}
  539. .nx-rf-a>.nx-rf-body{left:calc(36% + 24px);right:12px}
  540. .nx-rf-b>.nx-rf-body{left:12px;right:calc(36% + 24px)}
  541. .nx-rf-body .nx-const{margin-top:0}
  542. .nx-rf-body .nx-dni{margin:0 0 14px}
  543. .nx-finds{display:flex;flex-direction:column;gap:10px}
  544. .nx-fl{display:grid;grid-template-columns:38px minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:9px 18px 9px 10px;border:1px solid rgba(217,220,230,.4);border-radius:999px;background:rgba(9,9,12,.75);transition:.3s}
  545. .nx-fl i{grid-row:1/3;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid #b9a6d6;border-radius:50%;font-style:normal;color:#fff;transition:.4s}
  546. .nx-fl b{font-family:"Cinzel",serif;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;line-height:1.2}
  547. .nx-fl small{font-family:"Jim Nightshade","Crimson Text",cursive;font-size:1rem;color:#8e8e98;line-height:1.1}
  548. .nx-fl::after{content:"✦";grid-row:1/3;grid-column:3;color:#b9a6d6}
  549. .nx-fl:hover{transform:translateX(4px);border-color:#fff;box-shadow:0 0 18px rgba(217,220,230,.45)}
  550. .nx-fl:hover i{transform:rotate(180deg);background:#b9a6d6;color:#08080a}
  551. @keyframes nxrf{from{transform:scale(1.39,1.02);opacity:.85}to{transform:none;opacity:1}}
  552. .nx-road{display:grid;gap:10px;margin-top:14px}
  553. .nx-rm{position:relative;padding:11px 14px 12px;border:1px solid rgba(217,220,230,.3);border-radius:12px;background:rgba(18,18,22,.7)}
  554. .nx-rm small{display:inline-block;margin-bottom:5px;padding:1px 10px;border:1px solid #5b5b66;border-radius:999px;font-family:"Cutive Mono",monospace;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:#8e8e98}
  555. .nx-rm b{display:block;font-family:"Cinzel",serif;letter-spacing:.06em;color:#fff}
  556. .nx-rm span{display:block;font-size:.85rem;line-height:1.4;color:#b4b4bc}
  557. .nx-rm.planned{border-style:dashed}
  558. .nx-rm.current{border-color:#b9a6d6;box-shadow:0 0 16px rgba(185,166,214,.3)}
  559. .nx-rm.current small{border-color:#b9a6d6;color:#b9a6d6}
  560. .nx-rm.done{border-color:rgba(217,220,230,.5)}
  561. .nx-rm.done small{border-color:#d9dce6;color:#d9dce6}
  562. .nx-rm.done small::before{content:"✓ "}
  563. @media (min-width:721px){
  564. .nx-rf>details>summary{transition:width .6s ease-in-out,box-shadow .3s,border-color .3s}
  565. .nx-rf:not(:has(details[open])):has(.nx-rf-a>summary:hover) .nx-rf-a>summary{width:calc(70% - 20px)}
  566. .nx-rf:not(:has(details[open])):has(.nx-rf-a>summary:hover) .nx-rf-b>summary{width:calc(30% - 16px)}
  567. .nx-rf:not(:has(details[open])):has(.nx-rf-b>summary:hover) .nx-rf-b>summary{width:calc(70% - 20px)}
  568. .nx-rf:not(:has(details[open])):has(.nx-rf-b>summary:hover) .nx-rf-a>summary{width:calc(30% - 16px)}
  569. .nx-rf>details>summary:hover b::before{content:"✦ "}
  570. .nx-rf>details[open]>summary,.nx-rf>details[open]>summary:hover{top:20px;bottom:auto;left:auto;right:24px;width:auto;height:34px;padding:0;display:block;z-index:5;border:0;border-radius:0;background:none;box-shadow:none;animation:none;overflow:visible}
  571. .nx .nx-rf>details[open]>summary img{display:none}
  572. .nx-rf>details[open]>summary b{position:relative;display:block;width:140px;height:34px;padding:0;background:none;font-size:0;text-shadow:none}
  573. .nx-rf>details[open]>summary b::before,.nx-rf>details[open]>summary:hover b::before{content:"✦";position:absolute;right:0;top:50%;width:30px;height:30px;margin-top:-15px;display:flex;align-items:center;justify-content:center;z-index:1;font-size:1.7rem;line-height:1;color:#fff;text-shadow:0 0 10px #fff,0 0 22px rgba(185,166,214,.9);animation:nxspin 6s linear infinite}
  574. .nx-rf>details[open]>summary b::after{content:"";position:absolute;right:15px;top:50%;width:115px;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(185,166,214,.5) 45%,#fff);filter:drop-shadow(0 0 4px rgba(255,255,255,.8))}
  575. .nx-rf-a>.nx-rf-body,.nx-rf-b>.nx-rf-body{left:12px;right:12px;padding-top:58px}
  576. }
  577. @media (max-width:720px){
  578. .nx-rf{height:auto;min-height:392px;padding:142px 0 0;border:0;border-radius:0;overflow:visible;background:none}
  579. .nx .nx-rf-bg{top:150px;bottom:0;height:calc(100% - 150px);border:1px solid rgba(217,220,230,.4);border-radius:16px}
  580. .nx-rf>details>summary{top:0;bottom:auto;height:130px;width:calc(50% - 6px)}
  581. .nx-rf>details[open]>summary{width:calc(50% - 6px);animation:none}
  582. .nx-rf:has(details[open])>details:not([open])>summary{display:block}
  583. .nx-rf::before{content:"";position:absolute;top:150px;bottom:0;left:0;right:0;border:1px solid rgba(217,220,230,.4);border-radius:16px;background:#050507}
  584. .nx-rf-a>summary{left:0}
  585. .nx-rf-b>summary{right:0}
  586. .nx-rf-body{position:relative;top:0;bottom:auto;min-height:242px}
  587. .nx-rf-a>.nx-rf-body,.nx-rf-b>.nx-rf-body{left:auto;right:auto}
  588. }
  589. .nx-panel{padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
  590. .nx-rack{display:flex;gap:10px;height:440px}
  591. .nx-cover{position:relative;display:block;flex:1 1 0;min-width:0;overflow:hidden;border:1px solid rgba(217,220,230,.5);border-radius:14px;background:linear-gradient(160deg,#2b2b31,#08080a);transition:flex .6s ease-in-out,border-color .3s,box-shadow .3s}
  592. .nx-cover:hover{flex:4 1 0;border-color:#fff;box-shadow:0 0 28px rgba(217,220,230,.45)}
  593. .nx-cover-art{position:absolute;inset:0;display:block}
  594. .nx .nx-cover-art img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 15%;filter:grayscale(1) brightness(.55);transition:filter .6s,transform .8s}
  595. .nx-cover:hover .nx-cover-art img{filter:none;transform:scale(1.04)}
  596. .nx-cover-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent 55%)}
  597. .nx-cover:hover strong{font-size:1.3rem}
  598. .nx-cover>summary{position:absolute;inset:0;display:block;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  599. .nx-cover>summary::-webkit-details-marker{display:none}
  600. .nx-cover-pop{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding:0 18px 64px;background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.92) 38%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.25) 100%);pointer-events:none}
  601. .nx-cover-pop em{display:block;margin-bottom:14px;font-size:.92rem;font-style:normal;line-height:1.5;color:#e4e4ea}
  602. .nx-cover-pop a{pointer-events:auto;align-self:flex-start;display:inline-flex;align-items:center;padding:6px 16px;border:1px solid #d9dce6;border-radius:999px;background:rgba(8,8,10,.9);font-family:"Cinzel",serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:.3s}
  603. .nx .nx-cover[open] .nx-cover-art img{filter:grayscale(.85) brightness(.55)}
  604. .nx-cover-pop a:hover{background:#e8eaf1;color:#08080a}
  605. .nx-cover strong{position:absolute;left:16px;right:16px;bottom:18px;z-index:2;font-family:"Cinzel",serif;font-size:.95rem;letter-spacing:.06em;line-height:1.25;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.5);transition:font-size .4s}
  606. @media (max-width:720px){
  607. .nx-rack{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;height:400px;margin:0 -8px;padding:0 26px 8px;scroll-padding:0 26px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent)}
  608. .nx-rack::-webkit-scrollbar{display:none}
  609. .nx-cover,.nx-cover:hover{flex:0 0 74%;scroll-snap-align:center}
  610. .nx .nx-cover-art img,.nx-cover:hover .nx-cover-art img{filter:grayscale(1) brightness(.6);transform:none}
  611. .nx-cover strong,.nx-cover em{opacity:1}
  612. .nx-cover:hover strong{font-size:.95rem}
  613. }
  614. .nx-below{display:flex;flex-direction:column;gap:34px;padding:22px 14px 0}
  615. @media (max-width:720px){ .nx-below{padding:22px 8px 0} }
  616. .nx-moon-glow{inset:-45%;border-radius:0;background:radial-gradient(closest-side,rgba(217,220,230,.3) 48%,rgba(217,220,230,.24) 54%,rgba(217,220,230,.15) 60%,rgba(217,220,230,.08) 68%,rgba(185,166,214,.04) 80%,transparent 100%)}
  617. .nx-sona{-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
  618. .nx-sona{box-sizing:content-box;padding:40px 40px 0;margin:-40px 0 0 -40px}
  619. .nx-sona img{animation:none;filter:drop-shadow(1px 0 0 rgba(232,234,241,.6)) drop-shadow(-1px 0 0 rgba(232,234,241,.6)) drop-shadow(0 1px 0 rgba(232,234,241,.6)) drop-shadow(0 -1px 0 rgba(232,234,241,.6)) drop-shadow(0 0 12px rgba(217,220,230,.55))}
  620. .nx-title span{padding:.3em .45em;margin:-.3em -.45em}
  621. .pp-uc-follow-button,.profile-uc-follow-button,.pp-uc-options-menu,.profile-uc-options-menu{background:#050507 !important}
  622. .profile-info-stack>div:has(.profile-uc-follow-button):not(.profile-info-hstack) .chakra-stack{gap:14px !important}
  623. .profile-uc-follow-text{font-size:0 !important}
  624. .profile-uc-follow-text::after{content:"Stargaze";font-family:"Cinzel",serif;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff}
  625. .pp-uc-follow-button[data-following="true"] .profile-uc-follow-text::after{content:"Stargazing \2726"}
  626. .pp-uc-follow-button[data-following="true"]:hover .profile-uc-follow-text::after{content:"Look away"}
  627. .profile-info-hstack .profile-info-stack-inner>button{position:absolute !important;height:40px !important;padding:0 26px !important;border-radius:999px !important;background:#050507 !important;border:1px solid #d9dce6 !important;color:#fff !important}
  628. .profile-info-hstack{position:relative;width:100% !important;max-width:none !important;box-sizing:border-box}
  629. .nx-hills{border-radius:0;height:170px;z-index:3;background:linear-gradient(180deg,transparent,rgba(5,5,7,.85) 70%,#050507) !important}
  630. .pp-uc-followers-count{box-sizing:border-box;height:48px;min-width:170px;justify-content:center;padding:0 24px !important;font-size:1.1rem !important}
  631. .pp-uc-followers-count::before{display:inline-block;animation:nxspin 7s linear infinite}
  632. .pp-uc-followers-count span:last-child::after{font-size:1.1rem !important}
  633. .profile-info-hstack .profile-badges{display:flex;align-items:center;justify-content:center;gap:8px;min-width:170px;min-height:48px;padding:6px 20px;flex-wrap:wrap;border:1px solid #d9dce6;border-radius:999px;background:rgba(8,8,10,.72);box-sizing:border-box}
  634. .profile-info-hstack .profile-badges img{width:26px;height:26px}
  635. .pp-uc-member-since{display:none !important}
  636. .pp-uc-options-menu .chakra-button__icon,.pp-uc-options-menu svg{display:none !important}
  637. .pp-uc-options-menu::after{content:"✦";font-size:17px;line-height:1;color:#fff;text-shadow:0 0 8px rgba(255,255,255,.8)}
  638. .pp-uc-follow-button,.profile-uc-follow-button{display:inline-flex !important;align-items:center;height:40px !important;padding:0 28px !important}
  639. .pp-uc-options-menu,.profile-uc-options-menu{width:40px !important;min-width:40px !important;height:40px !important;border:1px solid #d9dce6 !important}
  640. .pp-uc-options-menu::after{font-size:19px}
  641. @media (min-width:1100px){
  642. .nx-stage{min-height:calc(clamp(420px,38vw,600px) + 10px);padding:30px calc(50px + clamp(240px,22vw,340px)) 0 calc((clamp(420px,38vw,600px) + 60px)*.62 + 20px);display:flex;align-items:center;justify-content:center}
  643. .nx-hero{width:100%}
  644. .nx-hero-text{max-width:100%;text-align:center}
  645. .nx-title{height:clamp(64px,7.4vw,116px);font-size:clamp(56px,6.6vw,104px);line-height:calc(clamp(64px,7.4vw,116px) - 10px)}
  646. .nx-slot{height:56px}
  647. .nx-moon{right:40px;top:12px;margin:0;width:clamp(240px,22vw,340px);height:clamp(240px,22vw,340px)}
  648. .nx-sona{left:70px;right:auto;top:-50px;bottom:auto;transform:none;height:calc(clamp(420px,38vw,600px) + 60px)}
  649. .profile-info-hstack{padding:calc((clamp(420px,38vw,600px) + 10px)/2 + clamp(64px,7.4vw,116px)/2 + 3px) calc(50px + clamp(240px,22vw,340px)) 0 calc((clamp(420px,38vw,600px) + 60px)*.62 + 20px) !important}
  650. .profile-info-stack-inner{justify-content:center !important}
  651. .profile-info-hstack .profile-verified-box,.profile-info-hstack .profile-janitor-plus-box{position:absolute !important;left:calc(((clamp(420px,38vw,600px)*0 + calc((clamp(420px,38vw,600px) + 60px)*.62 + 20px)) + 100% - 50px - clamp(240px,22vw,340px))/2 + clamp(129px,15.2vw,239px) + 14px);top:calc((clamp(420px,38vw,600px) + 10px)/2 - 30px - clamp(64px,7.4vw,116px)*.1 + 15px);display:flex;align-items:center;pointer-events:auto}
  652. .profile-info-hstack .profile-janitor-plus-box{margin-left:32px}
  653. .profile-info-stack>div:has(.profile-uc-follow-button):not(.profile-info-hstack){justify-content:flex-end;padding:calc((clamp(420px,38vw,600px) + 10px)/2 + clamp(64px,7.4vw,116px)/2 - 16px) calc(clamp(240px,22vw,340px)/2 - 65px) 0 0 !important}
  654. .pp-uc-follow-button,.profile-uc-follow-button{height:46px !important;padding:0 38px !important}
  655. .profile-info-hstack .profile-info-stack-inner>button{top:calc((clamp(420px,38vw,600px) + 10px)/2 + clamp(64px,7.4vw,116px)/2 - 16px);right:calc(40px + clamp(240px,22vw,340px)/2 - 80px);height:46px !important;padding:0 34px !important}
  656. .profile-uc-follow-text::after{font-size:.9rem}
  657. .pp-uc-options-menu,.profile-uc-options-menu{width:46px !important;min-width:46px !important;height:46px !important}
  658. .pp-uc-options-menu::after{font-size:22px}
  659. }
  660. @media (min-width:1700px){
  661. .nx-sona{left:30px}
  662. }
  663. @media (max-width:1099px){
  664. .nx-sona{margin-left:0}
  665. .profile-info-stack-inner{flex-wrap:nowrap !important;gap:10px !important;align-items:flex-start !important}
  666. .pp-uc-followers-count{min-width:0;flex:0 0 auto;padding:0 18px !important}
  667. .profile-info-hstack .profile-badges{min-width:0;flex:1 1 0;padding:6px 12px;gap:4px;flex-wrap:nowrap;overflow:hidden;justify-content:flex-start}
  668. .profile-info-hstack .profile-badges img{width:20px;height:20px}
  669. .profile-info-hstack .profile-verified-box,.profile-info-hstack .profile-janitor-plus-box{position:absolute !important;left:calc(50% - 152px);top:808px}
  670. .profile-info-hstack .profile-janitor-plus-box{margin-left:-30px}
  671. .nx-title{height:74px;font-size:52px;line-height:66px}
  672. .nx-stage{min-height:0;padding:778px 14px 24px}
  673. .nx-moon{top:24px;bottom:auto;left:50%;right:auto;margin:0 0 0 -150px;width:300px;height:300px}
  674. .nx-sona{top:404px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);height:440px}
  675. .nx-hero{position:static}
  676. .nx-hero-text{position:static;max-width:100%;text-align:center}
  677. .nx-title,.nx-slot{position:relative;z-index:4}
  678. .nx-kicker{position:absolute;z-index:4;left:50%;top:174px;width:260px;height:auto;transform:translate(-50%,-50%);text-align:center;font-family:"Jim Nightshade","Crimson Text",cursive;font-size:1.5rem;line-height:1.15;letter-spacing:.03em;text-transform:none;animation:nxkc 60s linear infinite -12s}
  679. .nx-slot{height:56px}
  680. .profile-info-hstack{max-width:100%;padding:860px 14px 0 14px !important}
  681. .profile-info-stack-inner{justify-content:center !important}
  682. .profile-info-stack>div:has(.profile-uc-follow-button):not(.profile-info-hstack){justify-content:center;padding:344px 0 0 0 !important}
  683. .profile-info-hstack .profile-info-stack-inner>button{top:344px;left:50%;right:auto;transform:translateX(-50%)}
  684. .pp-uc-followers-count{height:30px;gap:4px;padding:0 10px !important;font-size:.72rem !important}
  685. .pp-uc-followers-count span:last-child::after{font-size:.72rem !important}
  686. .profile-info-hstack .profile-badges{min-height:30px;height:30px;padding:0 10px}
  687. .profile-info-hstack .profile-badges img{width:16px;height:16px}
  688. .profile-info-hstack .profile-badge{display:flex;align-items:center;height:100%;margin:0;padding:0}
  689. }
  690. @media (max-width:720px){
  691. .nx-title{height:60px;font-size:42px;line-height:54px}
  692. .nx-stage{padding:684px 14px 24px}
  693. .nx-moon{margin-left:-120px;width:240px;height:240px}
  694. .nx-sona{top:350px;height:400px}
  695. .nx-kicker{top:144px;width:220px;font-size:1.3rem}
  696. .profile-info-hstack{padding:752px 14px 0 14px !important}
  697. .profile-info-hstack .profile-verified-box,.profile-info-hstack .profile-janitor-plus-box{left:calc(50% - 130px);top:700px}
  698. .profile-info-stack>div:has(.profile-uc-follow-button):not(.profile-info-hstack){padding:286px 0 0 0 !important}
  699. .profile-info-hstack .profile-info-stack-inner>button{top:286px}
  700. }
  701. .nx-banner{margin:20px 0;height:clamp(110px,15vw,210px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
  702. .nx .nx-banner img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent)}
  703. .nx-lower{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:26px;padding:26px 22px 24px;border:1px solid rgba(217,220,230,.3);border-radius:22px;background:linear-gradient(180deg,#070709,#0b0b0e)}
  704. .nx-friends{margin-top:16px;display:flex;flex-direction:column;gap:10px;height:clamp(300px,30vw,420px);box-sizing:border-box;overflow-x:hidden;overflow-y:auto;padding:2px 8px 2px 2px;scrollbar-width:thin;scrollbar-color:#8f8f99 transparent}
  705. .nx-friend{position:relative;flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) 46%;align-content:center;height:80px;padding:0 0 0 20px;overflow:hidden;border:1px solid rgba(217,220,230,.35);border-radius:14px;background:linear-gradient(160deg,#1b1b20,#08080a);text-align:left;transition:.3s}
  706. .nx-friend b{grid-column:1;grid-row:1;align-self:end;font-family:"Cinzel",serif;font-size:1rem;letter-spacing:.12em;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.35);position:relative;z-index:2}
  707. .nx-friend b::before{content:"✦ ";color:#b9a6d6}
  708. .nx-friend small{grid-column:1;grid-row:2;align-self:start;font-family:"Cutive Mono",monospace;font-size:.72rem;letter-spacing:.08em;color:#b9a6d6;position:relative;z-index:2}
  709. .nx-orb{grid-column:2;grid-row:1 / span 2;display:block;width:auto;height:100%;margin:0;padding:0;background:none;box-shadow:none;border-radius:0}
  710. .nx .nx-orb img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;filter:grayscale(.8) brightness(.8);transition:filter .4s;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
  711. .nx-friend:hover{transform:translateX(4px);border-color:#d9dce6;box-shadow:0 0 22px rgba(217,220,230,.35)}
  712. .nx .nx-friend:hover .nx-orb img{filter:none}
  713. @media (max-width:999px){
  714. .nx-lower{grid-template-columns:minmax(0,1fr);gap:30px}
  715. .nx-friends{height:320px}
  716. }
  717. @media (max-width:720px){
  718. .nx-lower{padding:22px 12px 18px}
  719. .nx-friend b{font-size:.9rem}
  720. }
  721. .nx-cover-pop{transition:opacity .3s,visibility .3s}
  722. @media (hover:hover){
  723. .nx-cover[open]:not(:hover) .nx-cover-pop{opacity:0;visibility:hidden}
  724. }
  725. .nx-car{margin-top:16px;position:relative;height:clamp(300px,30vw,420px);overflow:hidden;border:1px solid rgba(217,220,230,.4);border-radius:16px;background:#050507;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  726. .nx-lower>.nx-panel{min-width:0}
  727. .nx-gtrack{display:flex;width:max-content;height:100%;animation:nxmarq 50s linear infinite}
  728. .nx-car:hover .nx-gtrack{animation-play-state:paused}
  729. .nx-gset{display:flex;flex:0 0 auto;gap:14px;padding:12px 14px 12px 0;height:100%;box-sizing:border-box}
  730. .nx-gi{flex:0 0 auto;width:clamp(190px,18vw,270px);height:100%;overflow:hidden;border:1px solid rgba(217,220,230,.35);border-radius:12px;background:#0b0b0e}
  731. .nx .nx-gi img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;filter:grayscale(.5);transition:filter .5s,transform .6s}
  732. .nx .nx-gi:hover img{filter:none;transform:scale(1.05)}
  733. .nx-friend{flex:0 0 calc((100% - 30px)/4);height:auto}
  734. .nx-portrait{overflow:visible;border:1px solid rgba(217,220,230,.55);border-radius:14px;box-shadow:none;background:linear-gradient(160deg,#1f1f24,#08080a)}
  735. .nx-portrait img{border-radius:13px}
  736. @media (max-width:999px){ #about .nx-portrait{margin-bottom:30px} }
  737. @media (max-width:720px){
  738. .character-list-pagination-flex{gap:12px !important;padding:22px 14px 18px !important}
  739. .profile-filters-flex-inner-onorderchanged{justify-self:stretch !important;width:100% !important;max-width:none !important}
  740. .profile-filters-flex-inner-onorderchanged>*{width:100% !important;max-width:none !important}
  741. .character-list-pagination-box{justify-self:start}
  742. .pp-pg-total{height:44px;box-sizing:border-box;padding:0 18px !important}
  743. }
  744. .pp-cc-list-container{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(min(100%,500px),1fr)) !important;gap:56px 30px !important;margin:24px 0 40px !important;padding:0 !important;counter-reset:card}
  745. .pp-cc-wrapper{position:relative;width:100% !important;max-width:none !important;height:auto !important;aspect-ratio:640/540;container-type:inline-size;margin:0 !important;padding:0 !important;overflow:visible !important;border:0 !important;background:transparent !important;box-shadow:none !important;counter-increment:card;transition:transform .35s}
  746. .pp-cc-wrapper>div:empty{background:transparent !important}
  747. .pp-cc-wrapper>div:not(:empty){position:absolute;inset:0;display:block;margin:0;padding:0;overflow:visible !important;border:0 !important;background:none !important;box-shadow:none !important;filter:none !important}
  748. .pp-cc-wrapper>div:not(:empty)>a:not(a + a){position:absolute;inset:0;display:block}
  749. .pp-cc-wrapper>div:not(:empty)>a~a,.pp-cc-star-line{display:none !important}
  750. .pp-cc-wrapper div:has(>.pp-cc-name){position:absolute;top:6%;left:3%;right:3%;z-index:4;display:flex;align-items:center;justify-content:center;height:12%;margin:0;padding:0;border:0;background:none;box-shadow:none}
  751. .pp-cc-wrapper div:has(>.pp-cc-name)::after{content:"";position:absolute;left:16%;right:16%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(217,220,230,.6),transparent)}
  752. .pp-cc-wrapper .pp-cc-name{display:block;width:100%;margin:0;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-family:"Cinzel",serif !important;font-weight:500;font-size:4.2cqw !important;line-height:1.3 !important;letter-spacing:.06em;color:#fff !important;text-shadow:0 0 14px rgba(255,255,255,.4);transition:text-shadow .3s}
  753. .pp-cc-wrapper div:has(>.pp-cc-avatar){position:absolute;top:20%;left:2.5%;z-index:2;display:block;width:44%;height:62%;margin:0;aspect-ratio:auto;overflow:hidden;border:0 !important;border-radius:3cqw !important;background:#0a0a0e !important;box-shadow:0 14px 34px rgba(0,0,0,.65),0 0 0 1px rgba(217,220,230,.55) !important;transition:box-shadow .35s}
  754. .pp-cc-wrapper .pp-cc-avatar{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;object-fit:cover;object-position:top center;filter:grayscale(.85);transition:transform .7s,filter .5s}
  755. .pp-cc-wrapper div:has(>.pp-cc-description){position:absolute;top:20%;left:50.5%;right:2.5%;z-index:3;width:auto;height:54%;margin:0;padding:0;box-sizing:border-box;overflow:hidden;border:1px solid rgba(217,220,230,.4) !important;border-radius:3cqw !important;background:linear-gradient(160deg,rgba(24,24,30,.95),rgba(6,6,8,.97)) !important;box-shadow:0 12px 28px rgba(0,0,0,.6),inset 0 0 26px rgba(0,0,0,.4) !important;transition:border-color .3s;pointer-events:none}
  756. .pp-cc-wrapper div:has(>.pp-cc-description)::before{content:"\2726 story";position:absolute;z-index:2;top:2.6cqw;left:3.2cqw;right:3.2cqw;padding-bottom:1cqw;border-bottom:1px solid rgba(217,220,230,.2);color:#b9a6d6;font:400 1.9cqw/1 "Cutive Mono",monospace;letter-spacing:.24em;text-transform:uppercase}
  757. .pp-cc-wrapper div:has(>.pp-cc-description)::after{content:counter(card,upper-roman);position:absolute;right:4%;bottom:-3%;z-index:0;color:rgba(217,220,230,.09);font:400 17cqw/1 "Cinzel Decorative","Cinzel",serif;pointer-events:none}
  758. .pp-cc-wrapper div:has(>.pp-cc-description) *{font-family:"Crimson Text",Georgia,serif !important;font-size:2.5cqw !important;font-weight:400 !important;line-height:1.45 !important;text-align:left !important;color:#e4e4ea !important}
  759. .pp-cc-wrapper .pp-cc-description{position:relative;z-index:1;display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:11;box-sizing:border-box;height:100%;max-height:none !important;margin:0;padding:7.4cqw 3.2cqw 3cqw;overflow:hidden !important;pointer-events:none}
  760. .pp-cc-wrapper div:has(>.pp-cc-tokens-count){position:absolute;top:67.5%;left:50.5%;right:2.5%;z-index:3;display:block;width:auto;height:18%;margin:0;padding:0;border:0;background:none;pointer-events:none}
  761. .pp-cc-wrapper .pp-cc-tokens-count{position:absolute;left:0;top:46%;display:inline-flex;align-items:center;width:auto;margin:0;padding:1.1cqw 2.4cqw;box-sizing:border-box;white-space:nowrap;border:1px solid rgba(185,166,214,.5);border-radius:99px;background:rgba(5,5,7,.7);color:#b9a6d6 !important;font:400 2.1cqw/1.2 "Cutive Mono",monospace !important;text-transform:uppercase;letter-spacing:.1em;box-shadow:none}
  762. .pp-cc-wrapper div:has(>span>.pp-cc-ribbon){position:absolute;top:75.8%;right:2.5%;left:auto;z-index:5;width:auto;margin:0;padding:0;border:0;background:none;box-shadow:none;pointer-events:none}
  763. .pp-cc-wrapper div:has(>span>.pp-cc-ribbon)>span{display:flex;width:auto;height:auto}
  764. .pp-cc-ribbon,.pp-cc-ribbon-wrap{display:contents;background:none;box-shadow:none !important}
  765. .pp-cc-wrapper .pp-cc-chats{display:inline-flex !important;align-items:center;width:auto !important;height:auto !important;min-height:0;padding:1.1cqw 2.4cqw !important;border:1px solid rgba(217,220,230,.45) !important;border-radius:99px !important;background:rgba(5,5,7,.7) !important;color:#fff !important;font:400 2.1cqw/1.2 "Cutive Mono",monospace !important;letter-spacing:.1em;text-transform:uppercase;transform:none;box-shadow:none !important}
  766. .pp-cc-chats::before,.pp-cc-chats::after{content:none}
  767. .pp-cc-chats svg{display:none}
  768. .pp-cc-chats{white-space:nowrap;gap:.6cqw}
  769. .pp-cc-chats-count,.pp-cc-public-chats{font:inherit !important;color:inherit !important;display:inline-flex;align-items:center}
  770. .pp-cc-chats-count::before{content:"transits: "}
  771. .pp-cc-public-chats-count{display:inline}
  772. .pp-cc-public-chats-count::before{content:"transits: "}
  773. .pp-cc-wrapper .pp-cc-tags{position:absolute;top:86%;left:2.5%;right:2.5%;z-index:4;width:auto;height:11.5%;box-sizing:border-box;margin:0;padding:1cqw 2.4cqw;overflow:hidden;border:1px solid rgba(217,220,230,.4) !important;border-radius:2.4cqw !important;background:linear-gradient(160deg,rgba(24,24,30,.95),rgba(6,6,8,.97)) !important;box-shadow:0 8px 20px rgba(0,0,0,.55) !important}
  774. .pp-cc-wrapper .pp-cc-tags,.pp-cc-wrapper .pp-cc-tags *{pointer-events:none}
  775. .pp-cc-wrapper .pp-cc-tags a{display:block;text-decoration:none}
  776. .pp-cc-wrapper .pp-cc-tags>ul{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:.8cqw 1.2cqw;height:100%;margin:0 !important;padding:0;list-style:none}
  777. .pp-cc-wrapper .pp-cc-tags li{margin:0;min-width:0;width:auto;flex:none}
  778. .pp-cc-wrapper .pp-cc-tags li span{display:block;width:auto;height:auto;min-height:unset;margin:0;padding:.4cqw 1.8cqw;white-space:nowrap;font:400 1.9cqw/1.5 "Cutive Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#e4e4ea !important;text-shadow:none;background:rgba(150,150,160,.14) !important;border:1px solid rgba(217,220,230,.3) !important;border-radius:99px !important;box-shadow:none}
  779. .pp-cc-wrapper .pp-cc-tags li span span{display:inline;padding:0;font:inherit;color:inherit;background:none !important;border:0 !important;border-radius:0 !important}
  780. .pp-cc-wrapper .pp-cc-tags li img,.pp-cc-wrapper .pp-cc-tags li svg{display:none}
  781. .pp-cc-wrapper .pp-cc-tags li:nth-child(1) span{color:#b9a6d6 !important;background:rgba(185,166,214,.12) !important;border-color:rgba(185,166,214,.6) !important}
  782. .pp-cc-wrapper .pp-cc-tags~div.pp-cc-sparks{display:none}
  783. @media (hover:hover){
  784. .pp-cc-wrapper:hover{transform:translateY(-6px)}
  785. .pp-cc-wrapper:hover div:has(>.pp-cc-avatar){box-shadow:0 14px 34px rgba(0,0,0,.65),0 0 0 1px #fff,0 0 30px rgba(217,220,230,.4) !important}
  786. .pp-cc-wrapper:hover .pp-cc-avatar{transform:scale(1.06);filter:none}
  787. .pp-cc-wrapper:hover .pp-cc-name{text-shadow:0 0 18px rgba(255,255,255,.8)}
  788. .pp-cc-wrapper:hover div:has(>.pp-cc-description){border-color:#fff !important}
  789. }
  790. @media (max-width:600px){
  791. .pp-cc-list-container{grid-template-columns:minmax(0,1fr) !important}
  792. .pp-cc-wrapper{aspect-ratio:640/600}
  793. .pp-cc-wrapper div:has(>.pp-cc-description) *{font-size:3cqw !important}
  794. .pp-cc-wrapper .pp-cc-description{-webkit-line-clamp:9}
  795. .pp-cc-wrapper .pp-cc-tags li span{font-size:2.3cqw}
  796. .pp-cc-wrapper .pp-cc-tokens-count,.pp-cc-wrapper .pp-cc-chats{font-size:2.5cqw !important}
  797. .pp-cc-wrapper div:has(>.pp-cc-description)::before{font-size:2.2cqw}
  798. }
  799. .nx-portrait::before{content:"";position:absolute;left:50%;bottom:-.5px;z-index:3;width:34px;height:34px;transform:translate(-50%,50%);background:#d9dce6;clip-path:polygon(50% 0,64% 36%,100% 50%,64% 64%,50% 100%,36% 64%,0 50%,36% 36%);pointer-events:none}
  800. .nx-portrait::after{content:"";position:absolute;left:50%;bottom:-.5px;z-index:3;width:86px;height:18px;transform:translate(-50%,50%);background:#d9dce6;clip-path:polygon(9px 0,11.5px 6.5px,18px 9px,68px 9px,74.5px 6.5px,77px 0,79.5px 6.5px,86px 9px,79.5px 11.5px,77px 18px,74.5px 11.5px,68px 9px,18px 9px,11.5px 11.5px,9px 18px,6.5px 11.5px,0 9px,6.5px 6.5px);pointer-events:none}
  801. .pp-cc-wrapper>.profile-character-card-stack::before{content:"";position:absolute;left:50%;bottom:2.5%;z-index:6;width:24px;height:24px;transform:translate(-50%,50%);background:#d9dce6;clip-path:polygon(50% 0,64% 36%,100% 50%,64% 64%,50% 100%,36% 64%,0 50%,36% 36%);pointer-events:none}
  802. .pp-cc-wrapper>.profile-character-card-stack::after{content:"";position:absolute;left:50%;bottom:2.5%;z-index:6;width:62px;height:13px;transform:translate(-50%,50%);background:#d9dce6;clip-path:polygon(6.5px 0,8.3px 4.7px,13px 6.5px,49px 6.5px,53.6px 4.7px,55.4px 0,57.2px 4.7px,61.9px 6.5px,57.2px 8.3px,55.4px 13px,53.6px 8.3px,49px 6.5px,13px 6.5px,8.3px 8.3px,6.5px 13px,4.7px 8.3px,0 6.5px,4.7px 4.7px);pointer-events:none}
  803. .pp-cc-wrapper::before{content:"";position:absolute;z-index:1;left:4%;top:6px;width:calc(46% - 5cqw);height:20px;background:linear-gradient(90deg,transparent,rgba(185,166,214,.5) 45%,#fff) center/100% 2px no-repeat;pointer-events:none}
  804. .pp-cc-wrapper::after{content:"";position:absolute;z-index:1;right:4%;top:6px;width:calc(46% - 5cqw);height:20px;background:linear-gradient(270deg,transparent,rgba(185,166,214,.5) 45%,#fff) center/100% 2px no-repeat;pointer-events:none}
  805. .pp-cc-wrapper div:has(>.pp-cc-name)::before{content:"";position:absolute;left:50%;top:calc(-50% + 6px);z-index:5;width:calc(10cqw + 20px);height:20px;transform:translateX(-50%);background:#fff;clip-path:polygon(10px 0,13px 7px,20px 10px,calc(100% - 20px) 10px,calc(100% - 13px) 7px,calc(100% - 10px) 0,calc(100% - 7px) 7px,100% 10px,calc(100% - 7px) 13px,calc(100% - 10px) 20px,calc(100% - 13px) 13px,calc(100% - 20px) 10px,20px 10px,13px 13px,10px 20px,7px 13px,0 10px,7px 7px);pointer-events:none}
  806. .pp-cc-wrapper div:has(>.pp-cc-tokens-count)::before{content:"";position:absolute;left:50%;top:calc(46% + .9cqw);width:3cqw;height:3cqw;transform:translateX(-50%);background:#d9dce6;clip-path:polygon(50% 0,64% 36%,100% 50%,64% 64%,50% 100%,36% 64%,0 50%,36% 36%)}
  807. .pp-cc-wrapper .pp-cc-tokens-count,.pp-cc-wrapper .pp-cc-chats{min-width:20cqw;box-sizing:border-box;justify-content:center}
  808. .pp-cc-wrapper>div:not(:empty)>a:not(a + a)::before,.pp-cc-wrapper>div:not(:empty)>a:not(a + a)::after,.pp-cc-wrapper div:has(>.pp-cc-tokens-count)::after{content:"\2726\2727\2726\2726\2727\2726";position:absolute;z-index:8;left:calc(24.5% - 30cqw);top:calc(51% - 2cqw);width:60cqw;height:4cqw;display:block;text-align:center;white-space:nowrap;font-size:3.6cqw;line-height:4cqw;color:#fff;text-shadow:0 0 6px #fff,0 0 14px rgba(185,166,214,.95),0 0 26px rgba(185,166,214,.7);opacity:0;pointer-events:none}
  809. .pp-cc-wrapper>div:not(:empty)>a:not(a + a)::before{transform:rotate(0deg)}
  810. .pp-cc-wrapper>div:not(:empty)>a:not(a + a)::after{transform:rotate(60deg);font-size:3cqw}
  811. .pp-cc-wrapper div:has(>.pp-cc-tokens-count)::after{transform:rotate(120deg);left:-56cqw;top:-15.92cqw}
  812. @media (max-width:600px){.pp-cc-wrapper div:has(>.pp-cc-tokens-count)::after{top:-17.47cqw}}
  813. @keyframes nxburst0{0%{opacity:0;letter-spacing:0;text-indent:0;transform:rotate(0deg) scale(.3)}15%{opacity:1}100%{opacity:0;letter-spacing:4.5cqw;text-indent:4.5cqw;transform:rotate(0deg) scale(1)}}
  814. @keyframes nxburst60{0%{opacity:0;letter-spacing:0;text-indent:0;transform:rotate(60deg) scale(.3)}15%{opacity:1}100%{opacity:0;letter-spacing:4.5cqw;text-indent:4.5cqw;transform:rotate(60deg) scale(1)}}
  815. @keyframes nxburst120{0%{opacity:0;letter-spacing:0;text-indent:0;transform:rotate(120deg) scale(.3)}15%{opacity:1}100%{opacity:0;letter-spacing:4.5cqw;text-indent:4.5cqw;transform:rotate(120deg) scale(1)}}
  816. @media (hover:hover){
  817. .pp-cc-wrapper:hover>div:not(:empty)>a:not(a + a)::before{animation:nxburst0 1.1s ease-out both}
  818. .pp-cc-wrapper:hover>div:not(:empty)>a:not(a + a)::after{animation:nxburst60 1.1s ease-out both}
  819. .pp-cc-wrapper:hover div:has(>.pp-cc-tokens-count)::after{animation:nxburst120 1.1s ease-out both}
  820. }
  821. .nx-mp{position:relative;z-index:5;display:block;box-sizing:border-box;min-height:104px;margin:10px -14px -24px;padding:14px 26px 12px 130px;border:0;border-radius:26px 26px 0 0;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 -8px 30px rgba(0,0,0,.35)}
  822. .nx-mp-disc{position:absolute;left:24px;top:50%;width:84px;height:84px;margin-top:-42px;overflow:hidden;border-radius:50%;background:radial-gradient(circle,#2a2a34,#0a0a0e);box-shadow:0 10px 22px rgba(0,0,0,.6)}
  823. .nx-mp-trk[open] .nx-mp-disc{animation:nxdiscin .6s ease-out}
  824. .nx-mp-trk[open] .nx-mp-disc img{animation:nxspin 12s linear infinite}
  825. @keyframes nxdiscin{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
  826. .nx .nx-mp-disc img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
  827. .nx-mp-top{display:flex;height:38px;align-items:flex-start;justify-content:space-between;gap:18px}
  828. .nx-mp-meta{display:block;flex:0 1 auto;min-width:0}
  829. .nx-mp-song,.nx-mp-artist{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  830. .nx-mp-song{font:500 .95rem/1.3 "Cinzel",serif;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.35)}
  831. .nx-mp-artist{font:400 .72rem/1.4 "Cutive Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#cfc6e4}
  832. .nx-mp-eq{flex:1 1 0;display:flex;align-items:flex-end;justify-content:space-between;height:30px;min-width:0;overflow:hidden}
  833. .nx-mp-eq i{flex:0 0 auto;display:block;width:11px;height:11px;margin-bottom:3px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:nxeqs .9s ease-in-out infinite}
  834. .nx-mp-eq i:nth-child(3n+1){animation-duration:.7s;animation-delay:-.2s}
  835. .nx-mp-eq i:nth-child(3n+2){animation-duration:1.1s;animation-delay:-.5s}
  836. .nx-mp-eq i:nth-child(4n){animation-duration:.8s;animation-delay:-.65s;background:#d9d0ee}
  837. .nx-mp-eq i:nth-child(5n){animation-duration:1.3s;animation-delay:-.1s;background:#b9a6d6}
  838. @keyframes nxeqs{0%,100%{transform:translateY(0) scale(.55);opacity:.55}50%{transform:translateY(-15px) scale(1.15);opacity:1}}
  839. .nx-mp-bar{position:relative;display:block;height:4px;margin:12px 0 0;border-radius:4px;background:rgba(255,255,255,.22)}
  840. .nx-mp-bar i{position:absolute;left:0;top:0;bottom:0;display:block;width:0;border-radius:4px;background:linear-gradient(90deg,#b9a6d6,#fff)}
  841. .nx-mp-trk[open] .nx-mp-bar i{animation:nxmpbar 204s linear infinite}
  842. .nx-mp-bar i::after{content:"";position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
  843. @keyframes nxmpbar{from{width:0}to{width:100%}}
  844. .nx-mp-ctl{display:flex;align-items:center;justify-content:center;height:36px;margin-top:8px;padding:0}
  845. .nx-mp-btn::before{width:20px;height:20px;margin:-10px 0 0 -9px;clip-path:polygon(10% 0,100% 50%,10% 100%)}
  846. .nx-mp-btn{position:relative;display:block;width:48px;height:36px;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
  847. .nx-mp-btn::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -9px;background:#fff;clip-path:polygon(10% 0,100% 50%,10% 100%);filter:drop-shadow(0 0 6px rgba(255,255,255,.45));transition:transform .25s}
  848. .nx-mp-btn:hover::before{transform:scale(1.2)}
  849. .nx-mp-trk>summary{position:absolute;z-index:3;top:76px;display:block;width:48px;height:36px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  850. .nx-mp-trk>summary::-webkit-details-marker{display:none}
  851. .nx-mp-trk[open]>summary{display:none}
  852. .nx-mp-trk>summary::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:18px;margin:-9px 0 0 -11px;background:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.45));transition:transform .25s}
  853. .nx-mp-trk>summary:hover::before{transform:scale(1.2)}
  854. .nx-mp:has(.t1[open]) .t3>summary,.nx-mp:has(.t2[open]) .t1>summary,.nx-mp:has(.t3[open]) .t2>summary{left:130px}
  855. .nx-mp:has(.t1[open]) .t3>summary::before,.nx-mp:has(.t2[open]) .t1>summary::before,.nx-mp:has(.t3[open]) .t2>summary::before{clip-path:polygon(0 50%,50% 0,50% 50%,100% 0,100% 100%,50% 50%,50% 100%)}
  856. .nx-mp:has(.t1[open]) .t2>summary,.nx-mp:has(.t2[open]) .t3>summary,.nx-mp:has(.t3[open]) .t1>summary{left:238px}
  857. .nx-mp:has(.t1[open]) .t2>summary::before,.nx-mp:has(.t2[open]) .t3>summary::before,.nx-mp:has(.t3[open]) .t1>summary::before{clip-path:polygon(0 0,50% 50%,50% 0,100% 50%,50% 100%,50% 50%,0 100%)}
  858. @media (min-width:1100px){
  859. .nx-mp{position:absolute;left:0;right:0;bottom:0;margin:0}
  860. .nx-mp-ctl{justify-content:flex-start;padding-left:54px}
  861. }
  862. @media (max-width:1099px){
  863. .nx-mp:has(.t1[open]) .t3>summary,.nx-mp:has(.t2[open]) .t1>summary,.nx-mp:has(.t3[open]) .t2>summary{left:134px}
  864. .nx-mp:has(.t1[open]) .t2>summary,.nx-mp:has(.t2[open]) .t3>summary,.nx-mp:has(.t3[open]) .t1>summary{left:auto;right:30px}
  865. .nx-mp-eq{flex:0 0 auto;width:100px}.nx-mp-eq i:nth-child(n+9){display:none}}
  866. @media (max-width:480px){
  867. .nx-mp:has(.t1[open]) .t3>summary,.nx-mp:has(.t2[open]) .t1>summary,.nx-mp:has(.t3[open]) .t2>summary{left:116px}
  868. .nx-mp:has(.t1[open]) .t2>summary,.nx-mp:has(.t2[open]) .t3>summary,.nx-mp:has(.t3[open]) .t1>summary{right:22px}
  869. .nx-mp{padding-left:112px;padding-right:18px}.nx-mp-disc{left:16px;width:76px;height:76px;margin-top:-38px}.nx-mp-eq{width:100px}}
  870. @media (max-width:720px){ .nx-pet{right:18px;bottom:50px} }
  871. .nx-fairy{position:fixed!important;top:56px;left:0;right:0;height:60px;z-index:99999!important;pointer-events:none;display:flex;filter:drop-shadow(0 0 3px rgba(255,255,255,.55)) drop-shadow(0 0 7px rgba(185,166,214,.35))}
  872. .nx-fairy span{position:relative;height:16px}
  873. .nx-fairy span::before{content:"";position:absolute;inset:0;background:#7d7d89}
  874. .nx-fairy span::after{content:"";position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#b8b8c4}
  875. .nx-fairy i{position:absolute;background:#fff;clip-path:shape(from 50% 0%,curve to 100% 50% with 55% 45%,curve to 50% 100% with 55% 55%,curve to 0% 50% with 45% 55%,curve to 50% 0% with 45% 45%,close);animation:nxfltw 3s ease-in-out infinite}
  876. .nx-fairy b{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#e8e8f0;animation:nxfltw 2.4s ease-in-out infinite}
  877. .nx-fairy u{position:absolute;left:0;top:0;width:0;text-decoration:none;transform-origin:0 0;animation:nxflsw 4.6s ease-in-out infinite}
  878. .nx-fairy u::before{content:"";position:absolute;left:-.5px;top:0;width:1px;height:100%;background:#9a9aa8}
  879. .nx-fairy u::after{content:"";position:absolute;left:0;top:100%;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:nxfltw 2.8s ease-in-out infinite}
  880. @keyframes nxfltw{0%,100%{opacity:1}50%{opacity:.35}}
  881. @keyframes nxflsw{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
  882. .nx-fairy span:nth-child(1){flex:1.1 1 0}
  883. .nx-fairy span:nth-child(1)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 24px,line to 100% 1.5px,curve to 0px 1.5px with 50% 25.5px,close)}
  884. .nx-fairy span:nth-child(1) i{left:30%;top:10.1px;width:16px;height:16px;margin:-8.0px 0 0 -8.0px;animation-delay:-0.0s}
  885. .nx-fairy span:nth-child(1) b{left:74%;top:9.2px;animation-delay:-1.0s}
  886. .nx-fairy span:nth-child(2){flex:0.9 1 0}
  887. .nx-fairy span:nth-child(2)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 18px,line to 100% 1.5px,curve to 0px 1.5px with 50% 19.5px,close)}
  888. .nx-fairy span:nth-child(2) i{left:65%;top:8.2px;width:12px;height:12px;margin:-6.0px 0 0 -6.0px;animation-delay:-0.7s}
  889. .nx-fairy span:nth-child(2) b{left:30%;top:7.6px;animation-delay:-2.3s}
  890. .nx-fairy span:nth-child(2) u{height:34px;animation-delay:-0s}
  891. .nx-fairy span:nth-child(2) u::after{width:14px;height:14px;margin:-6.0px 0 0 -7.0px;animation-delay:-0.4s}
  892. .nx-fairy span:nth-child(3){flex:1.2 1 0}
  893. .nx-fairy span:nth-child(3)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 28px,line to 100% 1.5px,curve to 0px 1.5px with 50% 29.5px,close)}
  894. .nx-fairy span:nth-child(3) i{left:35%;top:12.7px;width:18px;height:18px;margin:-9.0px 0 0 -9.0px;animation-delay:-1.4s}
  895. .nx-fairy span:nth-child(3) b{left:78%;top:9.6px;animation-delay:-0.6s}
  896. .nx-fairy span:nth-child(3) u{height:22px;animation-delay:-1.3s}
  897. .nx-fairy span:nth-child(3) u::after{width:11px;height:11px;margin:-4.5px 0 0 -5.5px;animation-delay:-1.7s}
  898. .nx-fairy span:nth-child(4){flex:0.8 1 0}
  899. .nx-fairy span:nth-child(4)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 16px,line to 100% 1.5px,curve to 0px 1.5px with 50% 17.5px,close)}
  900. .nx-fairy span:nth-child(4) i{left:70%;top:6.7px;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;animation-delay:-2.1s}
  901. .nx-fairy span:nth-child(4) b{left:34%;top:7.2px;animation-delay:-1.9s}
  902. .nx-fairy span:nth-child(4) u{height:46px;animation-delay:-2.4s}
  903. .nx-fairy span:nth-child(4) u::after{width:16px;height:16px;margin:-7.0px 0 0 -8.0px;animation-delay:-0.9s}
  904. .nx-fairy span:nth-child(5){flex:1 1 0}
  905. .nx-fairy span:nth-child(5)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 22px,line to 100% 1.5px,curve to 0px 1.5px with 50% 23.5px,close)}
  906. .nx-fairy span:nth-child(5) i{left:40%;top:10.6px;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;animation-delay:-2.8s}
  907. .nx-fairy span:nth-child(5) b{left:70%;top:9.2px;animation-delay:-0.2s}
  908. .nx-fairy span:nth-child(5) u{height:28px;animation-delay:-0.7s}
  909. .nx-fairy span:nth-child(5) u::after{width:12px;height:12px;margin:-5.0px 0 0 -6.0px;animation-delay:-2.5s}
  910. .nx-fairy span:nth-child(6){flex:1.15 1 0}
  911. .nx-fairy span:nth-child(6)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 26px,line to 100% 1.5px,curve to 0px 1.5px with 50% 27.5px,close)}
  912. .nx-fairy span:nth-child(6) i{left:30%;top:10.9px;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;animation-delay:-0.5s}
  913. .nx-fairy span:nth-child(6) b{left:72%;top:10.5px;animation-delay:-1.5s}
  914. .nx-fairy span:nth-child(6) u{height:38px;animation-delay:-1.9s}
  915. .nx-fairy span:nth-child(6) u::after{width:15px;height:15px;margin:-6.5px 0 0 -7.5px;animation-delay:-0.2s}
  916. .nx-fairy span:nth-child(7){flex:0.85 1 0}
  917. .nx-fairy span:nth-child(7)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 20px,line to 100% 1.5px,curve to 0px 1.5px with 50% 21.5px,close)}
  918. .nx-fairy span:nth-child(7) i{left:62%;top:9.4px;width:12px;height:12px;margin:-6.0px 0 0 -6.0px;animation-delay:-1.2s}
  919. .nx-fairy span:nth-child(7) b{left:28%;top:8.1px;animation-delay:-2.8s}
  920. .nx-fairy span:nth-child(7) u{height:24px;animation-delay:-3.1s}
  921. .nx-fairy span:nth-child(7) u::after{width:11px;height:11px;margin:-4.5px 0 0 -5.5px;animation-delay:-1.4s}
  922. @media (max-width:720px){.nx-fairy span:nth-child(6),.nx-fairy span:nth-child(7){display:none}}
  923. @media (prefers-reduced-motion:reduce){.nx-fairy i,.nx-fairy b,.nx-fairy u,.nx-fairy u::after{animation:none}}
  924. .nx-fairyb{position:fixed!important;top:56px;left:0;right:0;height:70px;z-index:100000!important;pointer-events:none;display:flex;filter:drop-shadow(0 0 3px rgba(255,255,255,.5)) drop-shadow(0 0 8px rgba(185,166,214,.4))}
  925. .nx-fairyb span{position:relative;height:14px}
  926. .nx-fairyb span::before{content:"";position:absolute;inset:0;background:#8d86a3}
  927. .nx-fairyb span::after{content:"";position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#cfc4e6}
  928. .nx-fairyb i{position:absolute;background:#f1ecfb;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:nxfltw 2.6s ease-in-out infinite}
  929. .nx-fairyb b{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#d8cdf0;animation:nxfltw 2.1s ease-in-out infinite}
  930. .nx-fairyb u,.nx-fairyb em{position:absolute;top:0;width:0;transform-origin:0 0;animation:nxflsw 3.9s ease-in-out infinite}
  931. .nx-fairyb u{left:0}
  932. .nx-fairyb u::before,.nx-fairyb em::before{content:"";position:absolute;left:-.5px;top:0;width:1px;height:100%;background:#a79fbd}
  933. .nx-fairyb u::after,.nx-fairyb em::after{content:"";position:absolute;left:0;top:100%;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:nxfltw 2.3s ease-in-out infinite}
  934. .nx-fairyb span:nth-child(1){flex:0.7 1 0}
  935. .nx-fairyb span:nth-child(1)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 14px,line to 100% 1.5px,curve to 0px 1.5px with 50% 15.5px,close)}
  936. .nx-fairyb span:nth-child(1) i{left:60%;top:7.7px;width:12px;height:12px;margin:-6.0px 0 0 -6.0px;animation-delay:-2.2s}
  937. .nx-fairyb span:nth-child(1) b{left:71%;top:5.8px;animation-delay:-0.9s}
  938. .nx-fairyb span:nth-child(2){flex:1.5 1 0}
  939. .nx-fairyb span:nth-child(2)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 36px,line to 100% 1.5px,curve to 0px 1.5px with 50% 37.5px,close)}
  940. .nx-fairyb span:nth-child(2) i{left:37%;top:17.8px;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;animation-delay:-0.5s}
  941. .nx-fairyb span:nth-child(2) b{left:77%;top:12.8px;animation-delay:-1.0s}
  942. .nx-fairyb span:nth-child(2) u{height:42px;animation-delay:-0.4s}
  943. .nx-fairyb span:nth-child(2) u::after{width:10px;height:10px;margin:-4.0px 0 0 -5.0px;animation-delay:-0.7s}
  944. .nx-fairyb span:nth-child(2) em{left:37%;top:16.8px;height:38px;animation-delay:-2.3s}
  945. .nx-fairyb span:nth-child(2) em::after{width:8px;height:8px;margin:-3.0px 0 0 -4.0px;animation-delay:-0.9s}
  946. .nx-fairyb span:nth-child(3){flex:0.9 1 0}
  947. .nx-fairyb span:nth-child(3)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 22px,line to 100% 1.5px,curve to 0px 1.5px with 50% 23.5px,close)}
  948. .nx-fairyb span:nth-child(3) i{left:66%;top:10.9px;width:12px;height:12px;margin:-6.0px 0 0 -6.0px;animation-delay:-1.9s}
  949. .nx-fairyb span:nth-child(3) b{left:32%;top:9.6px;animation-delay:-1.3s}
  950. .nx-fairyb span:nth-child(3) u{height:42px;animation-delay:-0.2s}
  951. .nx-fairyb span:nth-child(3) u::after{width:8px;height:8px;margin:-3.0px 0 0 -4.0px;animation-delay:-0.4s}
  952. .nx-fairyb span:nth-child(4){flex:0.6 1 0}
  953. .nx-fairyb span:nth-child(4)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 10px,line to 100% 1.5px,curve to 0px 1.5px with 50% 11.5px,close)}
  954. .nx-fairyb span:nth-child(4) i{left:63%;top:5.7px;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;animation-delay:-0.1s}
  955. .nx-fairyb span:nth-child(4) b{left:71%;top:4.1px;animation-delay:-0.7s}
  956. .nx-fairyb span:nth-child(4) u{height:42px;animation-delay:-2.0s}
  957. .nx-fairyb span:nth-child(4) u::after{width:10px;height:10px;margin:-4.0px 0 0 -5.0px;animation-delay:-1.5s}
  958. .nx-fairyb span:nth-child(5){flex:1.3 1 0}
  959. .nx-fairyb span:nth-child(5)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 32px,line to 100% 1.5px,curve to 0px 1.5px with 50% 33.5px,close)}
  960. .nx-fairyb span:nth-child(5) i{left:25%;top:13.0px;width:12px;height:12px;margin:-6.0px 0 0 -6.0px;animation-delay:-1.7s}
  961. .nx-fairyb span:nth-child(5) b{left:70%;top:13.4px;animation-delay:-1.4s}
  962. .nx-fairyb span:nth-child(5) u{height:34px;animation-delay:-3.9s}
  963. .nx-fairyb span:nth-child(5) u::after{width:14px;height:14px;margin:-6.0px 0 0 -7.0px;animation-delay:-1.9s}
  964. .nx-fairyb span:nth-child(5) em{left:57%;top:15.7px;height:22px;animation-delay:-3.0s}
  965. .nx-fairyb span:nth-child(5) em::after{width:11px;height:11px;margin:-4.5px 0 0 -5.5px;animation-delay:-1.2s}
  966. .nx-fairyb span:nth-child(6){flex:1.0 1 0}
  967. .nx-fairyb span:nth-child(6)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 18px,line to 100% 1.5px,curve to 0px 1.5px with 50% 19.5px,close)}
  968. .nx-fairyb span:nth-child(6) i{left:29%;top:8.4px;width:8px;height:8px;margin:-4.0px 0 0 -4.0px;animation-delay:-1.5s}
  969. .nx-fairyb span:nth-child(6) b{left:25%;top:6.8px;animation-delay:-0.8s}
  970. .nx-fairyb span:nth-child(6) u{height:26px;animation-delay:-0.3s}
  971. .nx-fairyb span:nth-child(6) u::after{width:13px;height:13px;margin:-5.5px 0 0 -6.5px;animation-delay:-0.0s}
  972. .nx-fairyb span:nth-child(7){flex:0.65 1 0}
  973. .nx-fairyb span:nth-child(7)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 12px,line to 100% 1.5px,curve to 0px 1.5px with 50% 13.5px,close)}
  974. .nx-fairyb span:nth-child(7) i{left:25%;top:5.5px;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;animation-delay:-0.6s}
  975. .nx-fairyb span:nth-child(7) b{left:18%;top:3.5px;animation-delay:-1.0s}
  976. .nx-fairyb span:nth-child(7) u{height:52px;animation-delay:-1.6s}
  977. .nx-fairyb span:nth-child(7) u::after{width:13px;height:13px;margin:-5.5px 0 0 -6.5px;animation-delay:-1.3s}
  978. .nx-fairyb span:nth-child(8){flex:1.45 1 0}
  979. .nx-fairyb span:nth-child(8)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 38px,line to 100% 1.5px,curve to 0px 1.5px with 50% 39.5px,close)}
  980. .nx-fairyb span:nth-child(8) i{left:74%;top:15.6px;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;animation-delay:-1.8s}
  981. .nx-fairyb span:nth-child(8) b{left:55%;top:18.8px;animation-delay:-0.2s}
  982. .nx-fairyb span:nth-child(8) u{height:26px;animation-delay:-3.8s}
  983. .nx-fairyb span:nth-child(8) u::after{width:8px;height:8px;margin:-3.0px 0 0 -4.0px;animation-delay:-1.7s}
  984. .nx-fairyb span:nth-child(8) em{left:38%;top:17.9px;height:16px;animation-delay:-2.8s}
  985. .nx-fairyb span:nth-child(8) em::after{width:9px;height:9px;margin:-3.5px 0 0 -4.5px;animation-delay:-0.0s}
  986. .nx-fairyb span:nth-child(9){flex:0.8 1 0}
  987. .nx-fairyb span:nth-child(9)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 20px,line to 100% 1.5px,curve to 0px 1.5px with 50% 21.5px,close)}
  988. .nx-fairyb span:nth-child(9) i{left:56%;top:10.9px;width:12px;height:12px;margin:-6.0px 0 0 -6.0px;animation-delay:-0.5s}
  989. .nx-fairyb span:nth-child(9) b{left:83%;top:5.6px;animation-delay:-0.4s}
  990. .nx-fairyb span:nth-child(9) u{height:42px;animation-delay:-3.8s}
  991. .nx-fairyb span:nth-child(9) u::after{width:10px;height:10px;margin:-4.0px 0 0 -5.0px;animation-delay:-1.8s}
  992. .nx-fairyb span:nth-child(9) em{left:48%;top:10.0px;height:30px;animation-delay:-1.5s}
  993. .nx-fairyb span:nth-child(9) em::after{width:8px;height:8px;margin:-3.0px 0 0 -4.0px;animation-delay:-2.3s}
  994. .nx-fairyb span:nth-child(10){flex:1.2 1 0}
  995. .nx-fairyb span:nth-child(10)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 28px,line to 100% 1.5px,curve to 0px 1.5px with 50% 29.5px,close)}
  996. .nx-fairyb span:nth-child(10) i{left:42%;top:14.6px;width:8px;height:8px;margin:-4.0px 0 0 -4.0px;animation-delay:-2.2s}
  997. .nx-fairyb span:nth-child(10) b{left:87%;top:6.3px;animation-delay:-0.6s}
  998. .nx-fairyb span:nth-child(10) u{height:14px;animation-delay:-0.7s}
  999. .nx-fairyb span:nth-child(10) u::after{width:10px;height:10px;margin:-4.0px 0 0 -5.0px;animation-delay:-2.3s}
  1000. .nx-fairyb span:nth-child(11){flex:0.75 1 0}
  1001. .nx-fairyb span:nth-child(11)::before{clip-path:shape(from 0px 0px,curve to 100% 0px with 50% 16px,line to 100% 1.5px,curve to 0px 1.5px with 50% 17.5px,close)}
  1002. .nx-fairyb span:nth-child(11) i{left:66%;top:8.2px;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;animation-delay:-1.5s}
  1003. .nx-fairyb span:nth-child(11) b{left:17%;top:4.5px;animation-delay:-2.1s}
  1004. .nx-fairyb span:nth-child(11) u{height:18px;animation-delay:-1.0s}
  1005. .nx-fairyb span:nth-child(11) u::after{width:13px;height:13px;margin:-5.5px 0 0 -6.5px;animation-delay:-1.8s}
  1006. @media (max-width:720px){.nx-fairyb span:nth-child(n+8){display:none}}
  1007. @media (prefers-reduced-motion:reduce){.nx-fairyb i,.nx-fairyb b,.nx-fairyb u,.nx-fairyb em,.nx-fairyb u::after,.nx-fairyb em::after{animation:none}}
  1008. @media (max-width:720px){.nx-fairy,.nx-fairyb{top:44px!important}}
  1009. </style>
Tags: CSS
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!