← Back to Layouts
vocaloid layout wip

Name: FriendRewind
Author: FriendRewind
Author: . ܸ　。🪽 buni 𓏵 ᛝ
Category: Classic
Created: October 15, 2026
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"","pageBgMode":"cover","heroImageUrl":"","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#2b333f","navBgImage":"","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#66aaff","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#4169E1","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#DAA520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#000000","textHeading":"#000000","textLink":"#0066cc","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>
/* ==========================================================================
   SYS32.BROADCAST  -  
   Win2000 + 2005 MySpace, acid yellow and black, "TV broadcast" vibe.

   HOW TO USE
   1. My Layouts > your layout > Advanced CSS: select all, delete, then paste
      THIS WHOLE FILE (the style part AND the HTML part at the bottom). Save.
   2. Hard-refresh your profile: Ctrl+Shift+R.
   It works straight away (you will see my music and pics). Then
   make it yours: press Ctrl+F in this file and search for a tag, e.g. EDIT-05

   QUICK EDIT LIST
   EDIT-01  Colours (purple / black / greys)
   EDIT-02  Tiled album-cover background (24 covers)
   EDIT-03  Background parallax speed
   EDIT-04  Top-left nav logo (Cornish flag)
   EDIT-05  Big banner under the nav
   EDIT-06  Brackets round your name, quote under it, REC label
   EDIT-07  Sticker on the corner of your profile pic (Aphex Twin logo)
   EDIT-08  ON AIR / OFF AIR, Mood text and mood icon
   EDIT-09  Box headings (01 // CONTACT ... TOP 8 (RIFF LORDS) ... side labels)
   EDIT-10  Footer text
   EDIT-11  Mouse cursor (old sword)
   EDIT-12  Monitor wall: where it sits and when it hides
   --- these are in the HTML part at the very bottom of the file ---
   EDIT-13  Blue screen easter egg text
   EDIT-14  Winamp: album cover, song on the display, YOUR last.fm username
   EDIT-15  TV screens CH.01 - CH.07 (gifs)
   EDIT-16  Scrolling yellow ticker text
   EDIT-17  "sys32.exe" pop-up when someone opens your profile

   TIPS
   - Images: any https:// link to an image works. Right-click an image >
     Copy image address. Wikipedia album covers, tenor gifs and catbox.moe
     uploads all work. Links with .php in them get blocked by FriendRewind.
   - Text between the quotes in  content: "..."  is what shows on the page.
     Keep the quotes. To show a quote mark inside, write it as \"
   - Leave!important on every line, or FriendRewind's own styles win.
   - Selectors start with body.profile-page on purpose, it beats the site's
     defaults. Do the same if you add your own rules.
   - Broke something? Clear this tab, save, and paste the original again.
   ========================================================================== */
/* ==== EDIT-01  COLOURS ====
   Change these and the whole layout follows. Hex colours: pick one at
   any colour picker site and paste it here.                              */
:root {--y: #9ee0ff; /* main accent - the acid yellow */ --k: #0a0a0a; /* near-black */ --w: #ffffff; /* white */ --g: #3a3a3a; /* dark grey (interest labels) */ --g2: #d4d0c8; /* Windows 2000 window grey */ --c: conic-gradient(from 270deg at 120px 120px, #000 25%, #0000 0); /* DON'T TOUCH - used to cut out the background tiles */ --hz: repeating-linear-gradient(-45deg, #f2e600 0 14px, #0a0a0a 14px 28px); /* hazard stripes (nav border + scrollbar). Has the yellow hex in it too, change both */}

@keyframes fin-blink { 50% { visibility: hidden; } }
@keyframes fin-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fin-hop { 20% { bottom: 66px; } to { bottom: 56px; } }
@keyframes fin-dim { 50% { opacity: .3; } }
@keyframes fin-rec { 0%, 49% { color: #ff2a2a; } 50%, 100% { color: #5a0000; } }

/* ==== PAGE ==== */
html, body, body.profile-page {background-color: #000!important;}
body, body.profile-page {background-image: none!important; color: #fff!important; font: 11px/1.45 Verdana, Tahoma, Arial, sans-serif!important;}
body.profile-page #bg-image {display: none!important;}
body.profile-page a, body.profile-page .profile a {color: var(--y)!important; text-decoration: underline!important;}
body.profile-page a:hover, body.profile-page .profile a:hover {background: var(--y)!important; color: #000!important;}
::selection {background: var(--y)!important; color: #000!important;}
body.profile-page h1, body.profile-page h2, body.profile-page h3, body.profile-page h4, body.profile-page h5, body.profile-page h6 {font-family: Tahoma, Verdana, Arial, sans-serif!important;}

/* ==== EDIT-02  ALBUM-COVER BACKGROUND ====
   24 album covers tiled across the page in a staggered grid, dimmed with
   scanlines. Each nth-child line below is ONE cover: swap the image link
   inside the quotes for your own album art. Square images look best.
   Leave the --p / --q numbers alone (they place the tile in the grid).
   Wikipedia trick: open the album's page, click the cover, then
   "More details" > "Original file" and copy that upload.wikimedia.org link.
   Fewer than 24 albums? Just use some covers twice.
   Tiles are 120px. Darkness of the dim layer: see "fin-bg::after" below,
   rgba(0,0,0,.55) - raise .55 for darker, lower it for brighter.          */
body.profile-page .fin-bg {position: fixed!important; inset: 0!important; z-index: 0!important; pointer-events: none!important; background: #000!important;}
/* ==== EDIT-03  PARALLAX ====
   The covers scroll up slower than the page. 1700px = how far they drift
   over the whole page. Bigger = faster drift. Change BOTH 1700px numbers
   (here and the height line in the rule under it). Firefox shows a still
   background.                                                              */
@keyframes fin-par { to { transform: translateY(-1700px); } }
@supports (animation-timeline: scroll()) {
body.profile-page .fin-bg {bottom: auto!important; height: calc(100vh + 1700px)!important; will-change: transform!important; animation: fin-par linear both!important; animation-timeline: scroll(root)!important;}
}
body.profile-page .fin-bg .fin-t {position: absolute!important; inset: 0!important; background-size: 120px 120px!important; background-repeat: repeat!important;}
body.profile-page .fin-bg .fin-t {-webkit-mask: var(--c) var(--p)/960px 720px, var(--c) var(--q)/960px 720px!important;}
body.profile-page .fin-bg .fin-t:nth-child(1) {background-image: url("https://upload.wikimedia.org/wikipedia/en/3/3f/Richard_d_james_album_cover.jpg")!important; --p: 0 0; --q: 480px 360px;}   /* 1: Aphex Twin - Richard D. James Album */
body.profile-page .fin-bg .fin-t:nth-child(2) {background-image: url("https://upload.wikimedia.org/wikipedia/en/a/a8/CowboysFromHell.jpg")!important; --p: 120px 0; --q: 600px 360px;}   /* 2: Pantera - Cowboys from Hell */
body.profile-page .fin-bg .fin-t:nth-child(3) {background-image: url("https://upload.wikimedia.org/wikipedia/en/5/53/Wu-TangClanEntertheWu-Tangalbumcover.jpg")!important; --p: 240px 0; --q: 720px 360px;}   /* 3: Wu-Tang Clan - Enter the Wu-Tang (36 Chambers) */
body.profile-page .fin-bg .fin-t:nth-child(4) {background-image: url("https://upload.wikimedia.org/wikipedia/en/2/2a/Witchcult_Today.jpg")!important; --p: 360px 0; --q: 840px 360px;}   /* 4: Electric Wizard - Witchcult Today */
body.profile-page .fin-bg .fin-t:nth-child(5) {background-image: url("https://upload.wikimedia.org/wikipedia/en/e/e9/Massive_Attack_-_Mezzanine.png")!important; --p: 480px 0; --q: 0 360px;}   /* 5: Massive Attack - Mezzanine */
body.profile-page .fin-bg .fin-t:nth-child(6) {background-image: url("https://upload.wikimedia.org/wikipedia/en/8/8e/Reign_in_blood.jpg")!important; --p: 600px 0; --q: 120px 360px;}   /* 6: Slayer - Reign in Blood */
body.profile-page .fin-bg .fin-t:nth-child(7) {background-image: url("https://upload.wikimedia.org/wikipedia/en/8/82/Selected_Ambient_Works_85-92.png")!important; --p: 720px 0; --q: 240px 360px;}   /* 7: Aphex Twin - Selected Ambient Works 85-92 */
body.profile-page .fin-bg .fin-t:nth-child(8) {background-image: url("https://upload.wikimedia.org/wikipedia/en/1/14/Oddfellowsrest.JPG")!important; --p: 840px 0; --q: 360px 360px;}   /* 8: Crowbar - Odd Fellows Rest */
body.profile-page .fin-bg .fin-t:nth-child(9) {background-image: url("https://upload.wikimedia.org/wikipedia/en/d/dc/Megadeth-RustInPeace.jpg")!important; --p: 0 120px; --q: 480px 480px;}   /* 9: Megadeth - Rust in Peace */
body.profile-page .fin-bg .fin-t:nth-child(10) {background-image: url("https://upload.wikimedia.org/wikipedia/en/8/86/Geogaddi.jpg")!important; --p: 120px 120px; --q: 600px 480px;}   /* 10: Boards of Canada - Geogaddi */
body.profile-page .fin-bg .fin-t:nth-child(11) {background-image: url("https://upload.wikimedia.org/wikipedia/en/8/89/Acid_Bath_-_When_The_Kite_String_Pops.jpg")!important; --p: 240px 120px; --q: 720px 480px;}   /* 11: Acid Bath - When the Kite String Pops */
body.profile-page .fin-bg .fin-t:nth-child(12) {background-image: url("https://upload.wikimedia.org/wikipedia/en/d/df/Gorillaz_Demon_Days.PNG")!important; --p: 360px 120px; --q: 840px 480px;}   /* 12: Gorillaz - Demon Days */
body.profile-page .fin-bg .fin-t:nth-child(13) {background-image: url("https://upload.wikimedia.org/wikipedia/en/9/9c/DeathSOP-1998.jpg")!important; --p: 480px 120px; --q: 0 480px;}   /* 13: Death - The Sound of Perseverance */
body.profile-page .fin-bg .fin-t:nth-child(14) {background-image: url("https://upload.wikimedia.org/wikipedia/en/c/c9/Aphex_Twin_-_Come_to_Daddy.png")!important; --p: 600px 120px; --q: 120px 480px;}   /* 14: Aphex Twin - Come to Daddy */
body.profile-page .fin-bg .fin-t:nth-child(15) {background-image: url("https://upload.wikimedia.org/wikipedia/en/2/21/Black_Sabbath_Master_of_Reality_album_cover.jpg")!important; --p: 720px 120px; --q: 240px 480px;}   /* 15: Black Sabbath - Master of Reality */
body.profile-page .fin-bg .fin-t:nth-child(16) {background-image: url("https://upload.wikimedia.org/wikipedia/en/f/f8/10000Days.jpg")!important; --p: 840px 120px; --q: 360px 480px;}   /* 16: Tool - 10,000 Days */
body.profile-page .fin-bg .fin-t:nth-child(17) {background-image: url("https://upload.wikimedia.org/wikipedia/en/1/1a/Exmilitary_artwork.png")!important; --p: 0 240px; --q: 480px 600px;}   /* 17: Death Grips - Exmilitary */
body.profile-page .fin-bg .fin-t:nth-child(18) {background-image: url("https://upload.wikimedia.org/wikipedia/en/c/cf/Sepultura_-_Chaos_A.D._1993.jpg")!important; --p: 120px 240px; --q: 600px 600px;}   /* 18: Sepultura - Chaos A.D. */
body.profile-page .fin-bg .fin-t:nth-child(19) {background-image: url("https://upload.wikimedia.org/wikipedia/en/f/f0/Drukqs_%28Front_Cover%29.png")!important; --p: 240px 240px; --q: 720px 600px;}   /* 19: Aphex Twin - Drukqs */
body.profile-page .fin-bg .fin-t:nth-child(20) {background-image: url("https://upload.wikimedia.org/wikipedia/en/2/21/SonicExcessits_Purest_Form.JPG")!important; --p: 360px 240px; --q: 840px 600px;}   /* 20: Crowbar - Sonic Excess in Its Purest Form */
body.profile-page .fin-bg .fin-t:nth-child(21) {background-image: url("https://upload.wikimedia.org/wikipedia/en/9/92/Boards_of_Canada_-_Inferno.png")!important; --p: 480px 240px; --q: 0 600px;}   /* 21: Boards of Canada - Inferno */
body.profile-page .fin-bg .fin-t:nth-child(22) {background-image: url("https://upload.wikimedia.org/wikipedia/en/f/f4/Ridetl.png")!important; --p: 600px 240px; --q: 120px 600px;}   /* 22: Metallica - Ride the Lightning */
body.profile-page .fin-bg .fin-t:nth-child(23) {background-image: url("https://upload.wikimedia.org/wikipedia/en/3/30/Pantera_The_Great_Southern_Trendkill.jpg")!important; --p: 720px 240px; --q: 240px 600px;}   /* 23: Pantera - The Great Southern Trendkill */
body.profile-page .fin-bg .fin-t:nth-child(24) {background-image: url("https://upload.wikimedia.org/wikipedia/en/3/3f/Richard_d_james_album_cover.jpg")!important; --p: 840px 240px; --q: 360px 600px;}   /* 24: Aphex Twin - Richard D. James Album */
body.profile-page .fin-bg::after {content: ""!important; position: absolute!important; inset: 0!important; background: rgba(0,0,0,.55)!important; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px)!important;}

/* ==== SPLASH: Win2000 warning dialog ==== */
body.profile-page #fin-warn {position: fixed!important; inset: 0!important; z-index: 2147483050!important; overflow-y: auto!important; background: rgba(0,0,0,.6)!important; font: 11px Tahoma, Verdana, sans-serif!important;}
body.profile-page #fin-warn:target {display: none!important;}
body.profile-page #fin-warn .fin-dlg {width: 420px!important; max-width: 92vw!important; margin: 18vh auto 0!important; background: var(--g2)!important; border: 2px solid!important; border-color: #fff #404040 #404040 #fff!important; box-shadow: 1px 1px 0 #000, 0 0 0 1px #d4d0c8, 6px 6px 0 rgba(0,0,0,.5)!important; color: #000!important;}
body.profile-page #fin-warn .fin-dlg-t {display: flex!important; justify-content: space-between!important; align-items: center!important; padding: 3px 4px 3px 6px!important; background: linear-gradient(90deg, #0a0a0a, #3a3a3a)!important; color: var(--y)!important; font: bold 11px Tahoma, sans-serif!important;}
body.profile-page #fin-warn .fin-dlg-t b {background: var(--g2)!important; color: #000!important; border: 1px solid; border-color: #fff #404040 #404040 #fff!important; padding: 0 4px!important; font: bold 10px/12px Tahoma, sans-serif!important;}
body.profile-page #fin-warn .fin-dlg-b {display: flex!important; gap: 14px!important; padding: 16px 16px 6px!important;}
body.profile-page #fin-warn .fin-ico {flex: none!important; width: 34px!important; height: 34px!important; background: var(--y)!important; color: #000!important; clip-path: polygon(50% 0, 100% 100%, 0 100%)!important; font: bold 20px/40px Arial, sans-serif!important; text-align: center!important;}
body.profile-page #fin-warn p {margin: 0 0 8px!important; color: #000!important; font: 11px/1.5 Tahoma, sans-serif!important;}
body.profile-page #fin-warn .fin-dlg-btns {display: flex!important; justify-content: center!important; gap: 8px!important; padding: 8px 0 14px!important;}
body.profile-page #fin-warn .fin-dlg-btns a {min-width: 76px!important; padding: 3px 10px!important; text-align: center!important; background: var(--g2)!important; color: #000!important; text-decoration: none!important; border: 2px solid!important; border-color: #fff #404040 #404040 #fff!important; font: 11px Tahoma, sans-serif!important;}
body.profile-page #fin-warn .fin-dlg-btns a.fin-def {outline: 1px dotted #000!important; outline-offset: -5px!important; font-weight: bold!important;}
body.profile-page #fin-warn .fin-dlg-btns a:active {border-color: #404040 #fff #fff #404040!important;}

/* ==== NAV ==== */
body.profile-page .myspace-header .top-nav, body.profile-page #navbar, body.profile-page nav#nav .top {background: #000!important; border-bottom: 4px solid transparent!important; border-image: var(--hz) 4!important;}
body.profile-page nav#nav .top {min-height: 80px!important; display: flex!important; align-items: center!important; justify-content: space-between!important;}
/* ==== EDIT-04  NAV LOGO ====
   The Cornish flag gif in the top-left corner. Swap the link for your own
   logo / flag / gif. It's shown 64px tall.                                 */
body.profile-page .myspace-header .nav-logo, body.profile-page .logo .nav-logo, body.profile-page #logo, body.profile-page nav#nav .logo img, body.profile-page .layout-nav-logo img {content: url("https://media.tenor.com/DBshNiXxWGYAAAAC/vinteria-vint%C3%A9ria.gif")!important; height: 64px!important; width: auto!important; max-height: none!important; max-width: none!important; border: 2px solid var(--y)!important;}
body.profile-page .myspace-header .search-input, body.profile-page .nav-search-input, body.profile-page nav#nav .search-input {background: #000!important; color: var(--y)!important; border: 2px solid var(--y)!important; border-radius: 0!important; font: 12px "Courier New", monospace!important;}
body.profile-page .myspace-header .search-button, body.profile-page .nav-search-btn, body.profile-page nav#nav .search-button {background: var(--y)!important; color: #000!important; border: 2px solid var(--y)!important; border-radius: 0!important; font: bold 11px Tahoma, sans-serif!important; text-transform: uppercase!important;}
body.profile-page .myspace-header .main-nav-wrapper, body.profile-page .main-nav-container, body.profile-page nav#nav .links {background: var(--y)!important; border: 0!important; border-radius: 0!important; border-bottom: 2px solid #000!important;}
body.profile-page .myspace-header .main-nav li a, body.profile-page .main-nav a, body.profile-page .dropdown-toggle, body.profile-page nav#nav .links a {color: #000!important; font: bold 11px Tahoma, Verdana, sans-serif!important; text-transform: uppercase!important; text-decoration: none!important; text-shadow: none!important;}
body.profile-page .myspace-header .main-nav li a:hover, body.profile-page nav#nav .links a:hover {background: #000!important; color: var(--y)!important; outline: none!important; text-shadow: none!important;}
body.profile-page .dropdown-menu {background: #000!important; border: 2px solid var(--y)!important; border-radius: 0!important;}
body.profile-page .dropdown-menu a {color: var(--y)!important; font: bold 11px Tahoma, sans-serif!important; text-decoration: none!important;}

/* ==== BANNER: broadcast title card ==== */
/* ==== EDIT-05  BANNER ====
   finfin030's "WELCOME TO FINS PROFILE" banner. Replace the image link with
   your own. Best size: about 1200 x 200 (it is fitted inside a 200px tall
   box on a black background). Change height: 200px to make it taller.     */
body.profile-page main::before {content: ""!important; display: block!important; width: 100%!important; height: 200px!important; margin: 8px 0 12px!important; box-sizing: border-box!important; position: relative!important; z-index: 2!important; background: #000 url("https://files.catbox.moe/3fpwjf.jpg") center / contain no-repeat!important; border: 3px solid #000!important; outline: 3px solid var(--y)!important;}
body.profile-page main::after {content: none!important;}

/* ==== PROFILE AREA ==== */
body.profile-page .row.profile, body.profile-page .profile {position: relative!important; z-index: 2!important; background: rgba(0,0,0,.88)!important; border: 3px solid var(--y)!important; box-shadow: none!important; padding-top: 6px!important;}
body.profile-page .w-40.left h1, body.profile-page .profile h1 {margin: 0 0 6px!important; padding: 4px 6px!important; background: none!important; border: 0!important;}
body.profile-page .profile-name-text {display: inline-block!important; font: bold 24px/1.2 "Courier New", Courier, monospace!important; color: var(--y)!important; background: #000!important; border: 2px solid var(--y)!important; padding: 2px 8px!important; text-transform: uppercase!important; letter-spacing: 2px!important; word-break: break-word!important; text-shadow: 0 0 6px rgba(242,230,0,.6)!important;}
/* ==== EDIT-06  NAME + QUOTE ====
   [ ] brackets around your display name, the quote under it
   ("I JUST BE CHILLIN.") and the blinking REC label above it.             */
body.profile-page .profile-name-text::before {content: "[ "!important;}
body.profile-page .profile-name-text::after {content: " ]"!important;}
body.profile-page .profile-name-row::after {content: "\"I LOVE UTAU.\""!important; display: block!important; margin-top: 4px!important; font: italic bold 12px "Times New Roman", Times, serif!important; color: #fff!important;}
body.profile-page .profile-name-row::before {content: "● REC"!important; display: block!important; margin-bottom: 2px!important; font: bold 10px "Courier New", monospace!important; animation: fin-rec 1.4s steps(1) infinite!important;}

body.profile-page .general-about {display: flex!important; flex-wrap: wrap!important; align-items: flex-start!important; gap: 10px!important; padding: 4px 6px!important;}
body.profile-page .general-about .details {flex: 1 1 130px!important; min-width: 130px!important; float: none!important; margin: 0!important;}
body.profile-page .general-about .details p {margin: 3px 0!important; color: #fff!important; font: 11px Verdana, sans-serif!important;}
body.profile-page .profile-pic {float: none!important; flex: none!important; width: 160px!important; height: auto!important; overflow: visible!important; position: relative!important;}
body.profile-page .profile-pic img {display: block!important; width: 150px!important; height: 150px!important; object-fit: cover!important; border: 4px solid var(--y)!important; outline: 2px solid #000!important; border-radius: 0!important;}
/* ==== EDIT-07  PROFILE PIC STICKER ====
   Aphex Twin logo on the corner of your profile picture. Swap the gif link,
   or delete this whole rule (down to its closing brace) for no sticker.    */
body.profile-page .profile-pic::after {content: ""!important; position: absolute!important; right: -4px!important; bottom: -12px!important; width: 52px!important; height: 52px!important; background: var(--y) url("https://media.tenor.com/IdkTJwSKIJgAAAAC/aphex-twin-idm.gif") center / 90% no-repeat!important; border: 2px solid #000!important; border-radius: 50%!important; pointer-events: none!important;}

/* ==== EDIT-08  ONLINE STATUS + MOOD ====
   "ON AIR" / "OFF AIR" replace the normal online/offline text.
   The Mood line is fixed text ("Mood: chillin :)") with a little sofa gif
   next to it - change both. It shows instead of the site's mood.          */
/* ON AIR / OFF AIR */
body.profile-page .general-about .details p.online, body.profile-page .general-about .details p.offline {font-size: 0!important;}
body.profile-page .general-about .details p.online img, body.profile-page .general-about .details p.offline img, body.profile-page .general-about .details .status-icon {display: none!important;}
body.profile-page .general-about .details p.online::after {content: "● AWAKE"!important; font: bold 13px Tahoma, sans-serif!important; color: #000!important; background: var(--y)!important; padding: 2px 6px!important; animation: fin-blink 1.2s steps(1) infinite!important;}
body.profile-page .general-about .details p.offline::after {content: "○ ASLEEP"!important; font: bold 13px Tahoma, sans-serif!important; color: var(--y)!important; border: 2px solid var(--y)!important; padding: 0 6px!important;}
body.profile-page .general-about .details p.last-login {color: #aaa!important; font: 10px "Courier New", monospace!important;}

/* MOOD */
body.profile-page .profile .mood {margin: 10px 6px!important; padding: 4px 6px!important; background: #000!important; border: 1px dashed var(--y)!important; color: #fff!important;}
body.profile-page .profile .mood::before {content: "Mood: trying to make vocaloid songs"!important; display: block!important; padding-left: 30px!important; min-height: 26px!important; line-height: 26px!important; background: url("https://i.pinimg.com/736x/5f/7b/52/5f7b522885e7421df2322b22f4ad781f.jpg") left center / 26px 26px no-repeat!important; font: bold 11px Verdana, sans-serif!important; color: var(--y)!important;}
body.profile-page .profile .mood p, body.profile-page .profile .mood b {color: #fff!important;}

/* ==== BOXES: broadcast panels ==== */
body.profile-page .contact, body.profile-page .url-info, body.profile-page .table-section, body.profile-page .blurbs, body.profile-page .friends, body.profile-page .blog-preview, body.profile-page .module, body.profile-page #comments, body.profile-page .badges-widget,
body.profile-page .profile .photos-preview, body.profile-page .profile .videos-preview {position: relative!important; background: #000!important; background-image: none!important; color: #fff!important; border: 3px solid var(--y)!important; border-radius: 0!important; box-shadow: 5px 5px 0 rgba(242,230,0,.25)!important; padding: 0!important; margin-bottom: 14px!important;}
body.profile-page .contact .heading, body.profile-page .table-section .heading, body.profile-page .blurbs .heading, body.profile-page .friends .heading, body.profile-page .module .heading, body.profile-page .section .heading, body.profile-page .profileInfo .heading {position: relative!important; background: var(--y)!important; border: 0!important; border-radius: 0!important; padding: 4px 70px 4px 6px!important;}
body.profile-page .contact .heading::after, body.profile-page .table-section .heading::after, body.profile-page .blurbs .heading::after, body.profile-page .friends .heading::after {position: absolute!important; right: 6px!important; top: 50%!important; transform: translateY(-50%)!important; font: bold 10px "Courier New", monospace!important; color: #000!important;}
body.profile-page .heading h4 {color: #000!important; font: bold 12px Tahoma, Verdana, sans-serif!important; text-transform: uppercase!important; letter-spacing: 0!important; text-shadow: none!important; margin: 0!important;}
body.profile-page .heading h4::before {font: bold 12px "Courier New", monospace!important; color: #000!important;}
body.profile-page .heading h4 a, body.profile-page .heading a.more {color: #000!important; font: bold 11px Tahoma, sans-serif!important; text-transform: none!important;}
body.profile-page .heading h4 a:hover, body.profile-page .heading a.more:hover {background: #000!important; color: var(--y)!important;}
body.profile-page .contact .inner, body.profile-page .table-section .inner, body.profile-page .blurbs .inner, body.profile-page .friends .inner, body.profile-page .module .inner {background: transparent!important; color: #fff!important; padding: 8px!important; border: 0!important;}

/* ==== EDIT-09  BOX HEADINGS ====
   Every box gets a broadcast-style number ("01 // ") and a little side label
   on the right (time codes, Russian/Japanese words for "broadcast"/"signal").
   Edit the text in the quotes. TOP 8 is renamed "TOP 8 (RIFF LORDS)" further
   down - search RIFF LORDS.                                                */
body.profile-page .contact .heading h4::before {content: "01 // "!important;}
body.profile-page .contact .heading::after {content: "⚠ 00:01"!important;}
body.profile-page .contact .inner {background: var(--g2)!important;}
body.profile-page .contact .inner a {display: block!important; margin: 2px!important; padding: 3px 6px!important; background: var(--g2)!important; color: #000!important; border: 2px solid!important; border-color: #fff #404040 #404040 #fff!important; box-shadow: 1px 1px 0 #000!important; font: 11px Tahoma, sans-serif!important; text-decoration: none!important; text-align: center!important;}
body.profile-page .contact .inner a:hover {background: var(--g2)!important; color: #000!important; outline: 1px dotted #000!important; outline-offset: -4px!important;}
body.profile-page .contact .inner a:active {border-color: #404040 #fff #fff #404040!important; box-shadow: none!important;}
body.profile-page .table-section.interests .heading h4::before {content: "03 // "!important;}
body.profile-page .table-section.interests .heading::after {content: "ЭФИР 00:03"!important;}
body.profile-page .blurbs .heading h4::before {content: "04 // "!important;}
body.profile-page .blurbs .heading::after {content: "信号 00:04"!important;}
body.profile-page .friends:not(#comments):not(.badges-widget) .heading::after {content: "⚠ 00:08"!important;}
body.profile-page #comments .heading::after {content: "LIVE ●"!important; animation: fin-blink 1s steps(1) infinite!important;}
body.profile-page .badges-widget .heading::after {content: "00:09"!important;}

/* url box: info strip */
body.profile-page .url-info {padding: 8px 10px!important; border-style: dashed!important;}
body.profile-page .url-info::before {content: "02 // URL"!important; display: block!important; font: bold 12px "Courier New", monospace!important; color: var(--y)!important; margin-bottom: 4px!important;}
body.profile-page .url-info p, body.profile-page .url-info b {color: #fff!important; font: 11px "Courier New", monospace!important; margin: 0!important; word-break: break-all!important;}

/* interests */
body.profile-page .profile .details-table td {padding: 5px!important; vertical-align: top!important; border: 0!important;}
body.profile-page .profile .details-table tr > td:first-child {width: 32%!important; background: var(--g)!important; border-left: 4px solid var(--y)!important;}
body.profile-page .profile .details-table tr > td:first-child, body.profile-page .profile .details-table tr > td:first-child * {color: var(--y)!important; font: bold 11px Tahoma, sans-serif!important; text-transform: uppercase!important;}
body.profile-page .profile .details-table tr > td:last-child {background: #111!important; color: #fff!important; border-bottom: 1px dotted #555!important;}
body.profile-page .details-table tr > td:last-child * {color: #fff!important;}

/* blog / photos / videos -> Win2000 windows with yellow title bars */
body.profile-page .profile .photos-preview, body.profile-page .profile .videos-preview, body.profile-page .blog-preview {background: var(--g2)!important; border: 2px solid!important; border-color: #fff #404040 #404040 #fff!important; box-shadow: 1px 1px 0 #000!important; color: #000!important; padding: 3px!important;}
body.profile-page .photos-preview .heading, body.profile-page .videos-preview .heading {background: linear-gradient(90deg, #f2e600, #fff7a0)!important; padding: 3px 44px 3px 6px!important;}
body.profile-page .photos-preview .heading::after, body.profile-page .videos-preview .heading::after {content: "_ □ x"!important; right: 4px!important; font: bold 10px Tahoma, sans-serif!important; letter-spacing: 3px!important;}
body.profile-page .photos-preview .heading h4, body.profile-page .videos-preview .heading h4 {text-transform: none!important; font: bold 11px Tahoma, sans-serif!important;}
body.profile-page .photos-preview .inner, body.profile-page .videos-preview .inner {background: #fff!important; border: 2px solid!important; border-color: #808080 #fff #fff #808080!important; margin-top: 3px!important;}
body.profile-page .photos-preview .inner *, body.profile-page .videos-preview .inner * {color: #000!important;}
body.profile-page .blog-preview h4 {background: linear-gradient(90deg, #f2e600, #fff7a0)!important; color: #000!important; font: bold 11px Tahoma, sans-serif!important; padding: 3px 6px!important; margin: 0 0 4px!important;}
body.profile-page .blog-preview h4 a {color: #000!important;}
body.profile-page .blog-preview p, body.profile-page .blog-preview i {color: #000!important; padding: 0 4px!important;}

/* bio */
body.profile-page .blurbs .section > h4 {display: none!important;}
body.profile-page .blurbs .section, body.profile-page .bio-text, body.profile-page .blurbs p {color: #fff!important; font: 11px/1.5 Verdana, sans-serif!important;}

/* top 8 (riff lords) */
body.profile-page .friends:not(#comments):not(.badges-widget) .heading h4 {font-size: 0!important;}
body.profile-page .friends:not(#comments):not(.badges-widget) .heading h4::after {content: "TOP 8 (RIFF LORDS)"!important; font: bold 12px Tahoma, sans-serif!important; color: #000!important;}
body.profile-page .friends:not(#comments):not(.badges-widget) .heading h4::before {content: "05 // "!important; font-size: 12px!important;}
body.profile-page .friends .inner p, body.profile-page .friends .inner b {color: #fff!important;}
body.profile-page .friends .count {color: var(--y)!important;}
body.profile-page .friends-grid .person, body.profile-page #top8-grid .person {display: flex!important; flex-direction: column-reverse!important; align-items: center!important; text-align: center!important; padding: 4px 2px!important;}
body.profile-page .friends-grid .person p, body.profile-page #top8-grid .person p {display: inline-block!important; max-width: 100%!important; margin: 3px 0 0!important; padding: 0 2px!important; font: 11px Tahoma, Verdana, sans-serif!important; color: #fff!important; text-shadow: 1px 1px 0 #000!important; text-decoration: none!important; word-break: break-word!important;}
body.profile-page .friends-grid .person a, body.profile-page #top8-grid .person a {text-decoration: none!important;}
body.profile-page .friends-grid .person a:hover, body.profile-page #top8-grid .person a:hover {background: transparent!important;}
body.profile-page .friends-grid .person img, body.profile-page #top8-grid .person img {width: 52px!important; height: 52px!important; max-width: 100%!important; object-fit: cover!important; border: 0!important; border-radius: 0!important; filter: none!important; box-shadow: 2px 2px 0 rgba(0,0,0,.6)!important;}
body.profile-page .friends-grid .person:hover img, body.profile-page #top8-grid .person:hover img {filter: sepia(1) hue-rotate(190deg) saturate(3) brightness(.8)!important;}
body.profile-page .friends-grid .person:hover p, body.profile-page #top8-grid .person:hover p {background: #0a246a!important; color: #fff!important; outline: 1px dotted #fff!important;}
/* badges */
body.profile-page .friends.badges-widget .heading h4 {font-size: 0!important;}
body.profile-page .friends.badges-widget .heading h4::after {content: "06 // BADGES"!important; font: bold 12px Tahoma, sans-serif!important; color: #000!important;}
body.profile-page .badge-label {color: #fff!important; font: 10px Verdana, sans-serif!important;}

/* comments -> call-in line */
body.profile-page #comments .heading h4 {font-size: 0!important;}
body.profile-page #comments .heading h4::after {content: "07 // COMMENTS"!important; font: bold 12px Tahoma, sans-serif!important; color: #000!important;}
body.profile-page #comments .inner {max-height: 800px!important; overflow-y: auto!important; background: var(--g2)!important; padding: 4px!important;}
body.profile-page #comments .comment-count-links {background: var(--g2)!important; padding: 2px 4px!important;}
body.profile-page #comments .comment-count-links p, body.profile-page #comments .comment-count-links b {color: #000!important; font: 11px Tahoma, sans-serif!important;}
body.profile-page #comments .comment-count-links a {color: #000080!important;}
body.profile-page #comments .count {color: #ff0000!important;}
body.profile-page #comments .comments-table td.cb-content-cell p, body.profile-page #comments .comments-table td.cb-content-cell b {color: #000!important;}
body.profile-page .comments-table {background: #fff!important; border: 2px solid!important; border-color: #808080 #fff #fff #808080!important; border-collapse: collapse!important; width: 100%!important;}
body.profile-page .comments-table td {border: 0!important; border-bottom: 1px solid #e4e4e4!important;}
body.profile-page .profile .comments-table td.cb-author-cell {background: #fff!important; border: 0!important; border-bottom: 1px solid #e4e4e4!important; text-align: left!important; padding: 6px 4px!important;}
body.profile-page #comments .comments-table .cb-author-name {color: #ff0000!important; font: bold 13px "Times New Roman", Times, serif!important;}
body.profile-page #comments .cb-author-link {text-decoration: none!important;}
body.profile-page #comments .comments-table .cb-author-name::after {content: ":"!important;}
body.profile-page .comments-table .cb-pfp-img {width: 32px!important; height: 32px!important; border: 1px solid #000!important; border-radius: 0!important; object-fit: cover!important;}
body.profile-page .comments-table td.cb-content-cell {background: #fff!important; color: #000!important; font: 13px/1.4 "Times New Roman", Times, serif!important; padding: 6px!important;}
body.profile-page .comments-table td.cb-content-cell * {color: #000!important;}
body.profile-page .comments-table td.cb-content-cell a {color: #0000ff!important;}
body.profile-page .comments-table td.cb-content-cell .comment-reply {background: #f4f4f4!important; border-left: 3px solid #0000ff!important;}
body.profile-page .comments-table time {color: #808080!important; font: italic 11px Arial, sans-serif!important;}
body.profile-page .profile button, body.profile-page .profile input[type="submit"], body.profile-page .profile input[type="button"] {background: var(--g2)!important; color: #000!important; border: 2px solid!important; border-color: #fff #404040 #404040 #fff!important; border-radius: 0!important; font: 11px Tahoma, sans-serif!important; box-shadow: none!important;}
body.profile-page .profile textarea, body.profile-page .profile input[type="text"] {background: #000!important; color: var(--y)!important; border: 2px solid var(--y)!important; border-radius: 0!important; font: 11px "Courier New", monospace!important;}

/* footer */
body.profile-page footer {position: relative!important; z-index: 2!important; background: #000!important; color: #aaa!important; border-top: 4px solid var(--y)!important; font: 10px Verdana, sans-serif!important; padding-bottom: 80px!important;}
body.profile-page footer .links, body.profile-page footer ul.links {border: none!important; background: transparent!important;}
body.profile-page footer p, body.profile-page footer i {color: #aaa!important;}
/* EDIT-10  FOOTER - the yellow text above the site footer */
body.profile-page footer::before {content: "SYS32.BROADCAST"!important; display: block!important; padding-top: 8px!important; text-align: center!important; color: var(--y)!important; font: bold 10px "Courier New", monospace!important;}

/* ==== PROFILE TUNES -> WINAMP PLAYLIST ==== */
body.profile-page #profile-playlist-container .profile-playlist-widget {position: relative!important; padding: 18px 6px 26px!important; background: #1c1c1c!important; border: 2px solid!important; border-color: #5a5a5a #000 #000 #5a5a5a!important; border-radius: 0!important; box-shadow: none!important; overflow: hidden!important;}
body.profile-page #profile-playlist-container .pp-header h3, body.profile-page #profile-playlist-container .profile-playlist-widget h3 {position: absolute!important; top: 0; left: 0; right: 0!important; margin: 0!important; height: 14px!important; font-size: 0!important; background: repeating-linear-gradient(0deg, #f2e600 0 1px, #6b6500 1px 3px)!important; text-align: center!important;}
body.profile-page #profile-playlist-container .pp-header h3::after, body.profile-page #profile-playlist-container .profile-playlist-widget h3::after {content: " WINAMP PLAYLIST "!important; background: #1c1c1c!important; color: var(--y)!important; font: bold 9px/14px Arial, sans-serif!important; letter-spacing: 1px!important; padding: 0 4px!important;}
body.profile-page #profile-playlist-container .profile-playlist-widget ul {background: #000!important; border: 1px solid #5a5a5a!important; border-radius: 0!important; max-height: 150px!important; overflow-y: auto!important; padding: 2px!important; margin: 0!important; box-shadow: none!important;}
body.profile-page #profile-playlist-container .profile-playlist-widget li, body.profile-page #profile-playlist-container .profile-playlist-widget li *, body.profile-page #profile-playlist-container .profile-playlist-empty {color: var(--y)!important; font: 10px/1.3 Arial, Helvetica, sans-serif!important; text-shadow: none!important; border: 0!important;}
body.profile-page #profile-playlist-container .profile-playlist-widget li.current {background: var(--y)!important;}
body.profile-page #profile-playlist-container .profile-playlist-widget li.current * {color: #000!important;}
body.profile-page #profile-playlist-container .profile-playlist-widget hr {display: none!important;}
body.profile-page #profile-playlist-container .profile-playlist-widget::before {display: none!important; content: none!important;}
body.profile-page #profile-playlist-container .profile-playlist-widget::after {content: "+ADD -REM SEL MISC LIST OPTS"!important; position: absolute!important; left: 6px!important; right: 6px!important; bottom: 5px!important; font: bold 8px/14px Arial, sans-serif!important; color: #ccc!important; background: #333!important; border: 1px solid #555!important; white-space: pre!important; padding-left: 4px!important; overflow: hidden!important;}
body.profile-page .pp-equalizer span {background: var(--y)!important;}

/* ==== MUSIC BAR -> WINAMP ==== */
body.profile-page #footer-music-bar, body.profile-page .music-bar {background: #1c1c1c!important; background-image: none!important; border-top: 3px solid var(--y)!important; box-shadow: none!important;}
body.profile-page .music-bar::before {display: none!important;}
body.profile-page .music-bar .bar-title, body.profile-page .bar-title {color: var(--y)!important; font: 11px "Courier New", Courier, monospace!important; text-shadow: none!important;}
body.profile-page .bar-now-playing {color: var(--y)!important; font: bold 10px Arial, sans-serif!important;}
body.profile-page .bar-time-display, body.profile-page .bar-time-total {color: var(--y)!important; background: #000!important; font: bold 12px "Courier New", monospace!important; padding: 0 3px!important;}
body.profile-page .bar-progress {background: #000!important; border: 1px solid #555!important; border-radius: 0!important;}
body.profile-page .bar-progress-fill {background: var(--y)!important; border-radius: 0!important; box-shadow: none!important;}
body.profile-page .music-bar .bar-btn {background: var(--g2)!important; color: #000!important; border: 2px solid!important; border-color: #fff #404040 #404040 #fff!important; border-radius: 0!important;}

/* ==== SCROLLBAR + CURSOR ==== */
html, body.profile-page {scrollbar-color: var(--y) #000!important;}
::-webkit-scrollbar {width: 16px!important; height: 16px!important;}
::-webkit-scrollbar-track {background: var(--hz)!important;}
::-webkit-scrollbar-thumb {background: #000!important; border: 3px solid var(--y)!important;}

/* EDIT-11  CURSOR - an old-school sword. Swap the link for any 32x32 image
   (cursors-4u.com has loads). Delete this line for the normal cursor.   */
* {cursor: url("https://cdn.cursors-4u.net/previews/sword-9f476b70-32.webp") 32 32, auto!important;}

/* ==== FIXED STUFF ==== */

body.profile-page .fin-ticker {position: fixed!important; left: 0!important; right: 0!important; bottom: 40px!important; height: 20px!important; z-index: 9000!important; background: var(--y)!important; border-top: 2px solid #000!important; overflow: hidden!important; pointer-events: none!important;}
body.profile-page .fin-tk {display: inline-block!important; white-space: nowrap!important; color: #000!important; font: bold 12px/18px "Courier New", monospace!important; animation: fin-tick 80s linear infinite!important;}

/* winamp main window (floating, left) */
body.profile-page .fin-amp {position: relative!important; flex: none!important; background: #1c1c1c!important; border: 2px solid!important; border-color: #5a5a5a #000 #000 #5a5a5a!important; font: 10px Arial, sans-serif!important;}
body.profile-page .fin-amp a {display: block!important; text-decoration: none!important;}
body.profile-page .fin-amp a:hover {background: transparent!important;}
body.profile-page .fin-amp-bar {height: 14px!important; background: repeating-linear-gradient(0deg, #f2e600 0 1px, #6b6500 1px 3px)!important; text-align: center!important;}
body.profile-page .fin-amp-bar span {background: #1c1c1c!important; color: var(--y)!important; font: bold 9px/14px Arial, sans-serif!important; padding: 0 4px!important; letter-spacing: 1px!important;}
body.profile-page .fin-amp-top {display: flex!important; gap: 6px!important; padding: 5px!important; align-items: center!important;}
body.profile-page .fin-amp-top img {width: 54px!important; height: 54px!important; object-fit: cover!important; border: 1px solid #5a5a5a!important;}
body.profile-page .fin-amp-lcd {flex: 1!important; background: #000!important; border: 1px solid #5a5a5a!important; padding: 3px!important; color: var(--y)!important; font: 10px "Courier New", monospace!important; overflow: hidden!important;}
body.profile-page .fin-amp-lcd b {display: block!important; font: bold 18px "Courier New", monospace!important; color: var(--y)!important;}
body.profile-page .fin-amp-btns {display: flex!important; gap: 2px!important; padding: 0 5px 5px!important;}
body.profile-page .fin-amp-btns span {flex: 1!important; background: var(--g2)!important; color: #000!important; border: 1px solid; border-color: #fff #404040 #404040 #fff!important; text-align: center!important; font: bold 9px/12px Arial, sans-serif!important;}
body.profile-page .fin-amp-pl {margin: 0 5px 5px!important; background: #000!important; border: 1px solid #5a5a5a!important; padding: 2px!important; max-height: 0!important; overflow: hidden!important;}
body.profile-page .fin-amp:hover .fin-amp-pl {max-height: 320px!important; overflow-y: auto!important;}
body.profile-page .fin-amp:hover {z-index: 5!important;}
body.profile-page .fin-amp-hint {margin: 0 5px 5px!important; color: #ccc!important; background: #333!important; border: 1px solid #555!important; font: bold 9px Arial, sans-serif!important; padding: 1px 4px!important;}
body.profile-page .fin-amp:hover .fin-amp-hint {display: none!important;}

/* ==== EDIT-12  MONITOR WALL ====
   The Winamp + TV screens floating on both sides of the page. They hide on
   screens narrower than 1500px (the @media line at the end of this group).
   The gifs on the screens are in the HTML part - EDIT-15.                 */
/* MONITOR WALL (floating screens, both sides) */
body.profile-page .fin-wall {position: fixed!important; top: 108px!important; bottom: 66px!important; width: 230px!important; z-index: 60!important; display: flex!important; flex-direction: column!important; justify-content: space-between!important; gap: 10px!important;}
body.profile-page .fin-wall.fin-l {left: 14px!important;}
body.profile-page .fin-wall.fin-r {right: 14px!important;}
body.profile-page .fin-tv {position: relative!important; flex: 1 1 0!important; min-height: 0!important; max-height: 200px!important; background: #111!important; border: 3px solid var(--y)!important; outline: 2px solid #000!important; padding: 14px 4px 4px!important; box-sizing: border-box!important; overflow: hidden!important;}
body.profile-page .fin-tv .fin-ch {position: absolute!important; top: 0; left: 0; right: 0!important; height: 13px!important; padding: 0 4px!important; background: var(--y)!important; color: #000!important; font: bold 9px/13px "Courier New", monospace!important;}
body.profile-page .fin-tv::after {content: "● REC"!important; position: absolute!important; top: 0; right: 4px!important; color: #e10600!important; font: bold 9px/13px "Courier New", monospace!important; animation: fin-blink 1.4s steps(1) infinite!important;}
body.profile-page .fin-tv img {display: block!important; width: 100%!important; height: 100%!important; object-fit: cover!important; border: 1px solid #000!important;}
body.profile-page .fin-tv .fin-alt {position: absolute!important; left: 4px; top: 14px; width: calc(100% - 8px)!important; height: calc(100% - 18px)!important; opacity: 0!important;}
body.profile-page .fin-tv:hover .fin-alt {opacity: 1!important;}
body.profile-page .fin-tv-scan {position: absolute!important; left: 4px; right: 4px; top: 14px; bottom: 4px!important; pointer-events: none!important; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px)!important;}
@media (max-width: 1500px) { body.profile-page .fin-wall {display: none!important;} }
@media (max-width: 768px) {
  body.profile-page main::before {height: 90px!important;}
  body.profile-page .profile-name-text {font-size: 24px!important;}
}

/* ==========================================================================
   ABOUT ME WIDGETS
   Styles for boxes you can build in your About Me: Win2000 windows,
   blinkies grid, stamps, gifs, the live last.fm card. They do nothing
   unless your About Me HTML uses these class names, so it's safe to leave
   them. (finfin030's own chart / CD rack / folder styles were left out to
   fit FriendRewind's size limit.)
   Quick reference for your own About Me (Edit Profile > About Me):
     a window:   div class="fin-win"  >  span class="fin-wt" (title bar)
                 then  div class="fin-wb" (window body, your text in here)
     fin-wb fin-dark = black window body     fin-cht = yellow sub-heading
     fin-yeah = big blinking yellow word     fin-blk / fin-bgrid = blinkies grid
   ========================================================================== */
/* ==== ABOUT ME WIDGETS ==== */
body.profile-page .fin-win {background: var(--g2)!important; border: 2px solid!important; border-color: #fff #404040 #404040 #fff!important; box-shadow: 1px 1px 0 #000!important; padding: 3px!important; margin: 10px 0!important; color: #000!important; text-align: left!important;}
body.profile-page .fin-wt {position: relative!important; display: block!important; background: linear-gradient(90deg, #0a0a0a, #3a3a3a)!important; color: var(--y)!important; font: bold 11px Tahoma, sans-serif!important; padding: 3px 50px 3px 6px!important;}
body.profile-page .fin-wt::after {content: "_ □ x"!important; position: absolute!important; right: 5px!important; top: 3px!important; color: #fff!important; font: bold 10px Tahoma, sans-serif!important; letter-spacing: 3px!important;}
body.profile-page .fin-wb {background: #fff!important; border: 2px solid!important; border-color: #808080 #fff #fff #808080!important; margin-top: 3px!important; padding: 8px!important; color: #000!important; font: 12px/1.5 Verdana, sans-serif!important;}
body.profile-page .fin-wb * {color: #000!important;}
body.profile-page .fin-wb.fin-dark {background: #000!important;}
body.profile-page .fin-wb.fin-dark, body.profile-page .fin-wb.fin-dark * {color: #fff!important;}
body.profile-page .fin-wb.fin-dark a {color: var(--y)!important;}

body.profile-page .fin-panel {border: 3px solid var(--y)!important; background: #000!important; margin: 12px 0!important; text-align: left!important;}
body.profile-page .fin-ph {display: flex!important; justify-content: space-between!important; background: var(--y)!important; color: #000!important; font: bold 12px Tahoma, sans-serif!important; padding: 4px 6px!important; text-transform: uppercase!important;}
body.profile-page .fin-ph span {font: bold 10px "Courier New", monospace!important; color: #000!important;}

body.profile-page .fin-big {display: block!important; font: 40px/1 Impact, "Arial Black", sans-serif!important; color: var(--y)!important; letter-spacing: 1px!important; margin: 4px 0!important;}
body.profile-page .fin-yeah {display: inline-block!important; background: var(--y)!important; color: #000!important; font: 28px/1 Impact, "Arial Black", sans-serif!important; padding: 2px 10px!important; animation: fin-blink .8s steps(1) infinite!important;}

body.profile-page .fin-cht {display: block!important; margin: 8px 0 4px!important; padding: 2px 6px!important; background: var(--y)!important; color: #000!important; font: bold 10px "Courier New", monospace!important; letter-spacing: 1px!important;}
body.profile-page .fin-cht:first-child {margin-top: 0!important;}
/* deco scroll box (element #160) */
body.profile-page .fin-blk {background: #000!important; padding: 6px 4px!important; text-align: center!important;}
body.profile-page .fin-blk img {display: inline-block!important; width: 150px!important; height: 20px!important; margin: 1px!important; border: 0!important; vertical-align: top!important; image-rendering: pixelated!important;}
body.profile-page .fin-bgrid {line-height: 0!important; padding: 6px 0!important;}
body.profile-page .fin-bgrid img:hover {transform: scale(1.5)!important; position: relative!important; z-index: 2!important; outline: 1px solid var(--y)!important;}
body.profile-page .fin-bm {overflow: hidden!important; white-space: nowrap!important; text-align: left!important; line-height: 0!important; border-top: 2px solid var(--y)!important; border-bottom: 2px solid var(--y)!important; padding: 2px 0!important;}
body.profile-page .fin-bmt {display: inline-block!important; animation: fin-tick 45s linear infinite!important;}
body.profile-page .fin-bmr .fin-bmt {animation-direction: reverse!important;}
body.profile-page .fin-bcr {margin-top: 4px!important; color: var(--y)!important; font: 9px Tahoma, sans-serif!important; text-align: right!important;}
body.profile-page .fin-bcr a {color: var(--y)!important;}
body.profile-page .fin-deco {height: 420px!important; overflow-y: auto!important; overflow-x: hidden!important; padding: 8px!important; background: #000!important; text-align: center!important; scrollbar-color: var(--y) #000!important;}
body.profile-page .fin-dh {display: block!important; margin: 10px 0 6px!important; padding: 2px 6px!important; background: var(--y)!important; color: #000!important; font: bold 11px Tahoma, sans-serif!important; text-align: left!important; text-transform: uppercase!important;}
body.profile-page .fin-dh:first-child {margin-top: 0!important;}
body.profile-page .fin-st {display: inline-flex!important; align-items: center!important; width: 99px!important; height: 56px!important; margin: 1px!important; box-sizing: border-box!important; border: 1px solid #000!important; outline: 1px solid var(--y)!important; overflow: hidden!important; vertical-align: middle!important; text-align: left!important; background: var(--y)!important;}
body.profile-page .fin-st img {width: 42px!important; height: 54px!important; object-fit: cover!important; flex: none!important; border: 0!important;}
body.profile-page .fin-st span {flex: 1!important; min-width: 0!important; padding: 0 3px!important; word-break: normal!important; overflow-wrap: anywhere!important; font: bold 8px/1.1 Verdana, sans-serif!important; color: #000!important; text-transform: uppercase!important;}
body.profile-page .fin-st.fin-k {background: #000!important;}
body.profile-page .fin-st.fin-k span {color: var(--y)!important;}
body.profile-page .fin-gw img {width: 23%!important; height: 70px!important; object-fit: cover!important; border: 2px solid var(--y)!important; margin: 1px!important; vertical-align: middle!important;}

body.profile-page .fin-amp-np {margin: 0 5px 5px!important; border: 1px solid #5a5a5a!important; background: #0a0a0a!important; line-height: 0!important;}
body.profile-page .fin-amp-np img, body.profile-page .fin-amp-pl img {display: block!important; width: 100%!important; height: auto!important; border: 0!important;}
body.profile-page .fin-np, body.profile-page .fin-col {display: block!important; width: 100%!important; height: auto!important; margin: 0 0 8px!important; border: 2px solid var(--y)!important; box-sizing: border-box!important;}
body.profile-page .fin-col {aspect-ratio: 1!important; object-fit: cover!important; background: #111!important;}
body.profile-page .fin-bsodt {display: flex!important; flex-direction: column!important; align-items: center!important; width: 96px!important; margin: 4px 0 10px!important; cursor: help!important;}
body.profile-page .fin-bsodi {display: block!important; width: 32px!important; height: 30px!important; background: var(--y)!important; color: #000!important; clip-path: polygon(50% 0, 100% 100%, 0 100%)!important; font: bold 18px/34px Tahoma, sans-serif!important; text-align: center!important;}
body.profile-page .fin-bsodt span + span {margin-top: 3px!important; padding: 0 2px!important; color: #fff!important; font: 11px Tahoma, sans-serif!important; text-shadow: 1px 1px 0 #000!important;}
body.profile-page .fin-bsodt:hover span + span {background: #0a246a!important; outline: 1px dotted #fff!important;}
body.profile-page .fin-bsod {position: fixed!important; inset: 0!important; z-index: 2147483647!important; background: #0000aa!important; color: #fff!important; padding: 40px 6vw!important; overflow: hidden!important; visibility: hidden!important; pointer-events: none!important; text-align: left!important;}
body.profile-page .fin-bsod p {margin: 0 0 18px!important; color: #fff!important; font: 15px/1.35 "Lucida Console", "Courier New", monospace!important; max-width: 900px!important;}
body.profile-page .fin-cur {animation: fin-blink 1s steps(1) infinite!important;}
body:has(.fin-bsodt:hover) .fin-bsod {visibility: visible!important;}
</style><div class="fin-bsod"><p>A problem has been detected and SYS32.BROADCAST has been shut down to prevent damage to your computer.</p><p>TOO_MUCH_CHILL_DETECTED</p><p>If this is the first time you've seen this Stop error screen, put on Vocaloid/Utau songs and lie down. If this screen appears again, follow these steps:</p><p>Check to make sure you have fed your utau. Turn the volume up. Disable any non-metal software.</p><p>Technical information:</p><p>*** STOP: 0x0000C0RN (0xF1NF1N03, 0x00000000, 0x00002265, 0x00000000)</p><p>*** Vocaloid.SYS - Address F7A2C0DE base at F7A20000, DateStamp 3d6dd67c</p><p>Beginning dump of physical memory<br>Physical memory dump complete.<br>Move your mouse away to continue<span class="fin-cur">_</span></p></div>

<div class="fin-bg"><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div><div class="fin-t"></div></div>


<div class="fin-wall fin-l">
  <div class="fin-amp">
    <a href="https://www.last.fm/user/finfin030" target="_blank" rel="noopener noreferrer">
      <div class="fin-amp-bar"><span>WINAMP</span></div>
      <div class="fin-amp-top">
        <img src="/proxy/image.php?url=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2F1%2F14%2FOddfellowsrest.JPG" alt="">
        <div class="fin-amp-lcd">03:12CROWBAR - EMBRACING EMPTINESS *** 128kbps</div>
      </div>
      <div class="fin-amp-btns"><span>|&lt;</span><span>&gt;</span><span>||</span><span>[]</span><span>&gt;|</span></div>
      <div class="fin-amp-np"><img src="/proxy/image.php?url=https%3A%2F%2Flastfm-recently-played.vercel.app%2Fapi%3Fuser%3Dfinfin030%26radius%3D0%26bg_color%3D0a0a0a%26text_color%3Df2e600%26artist_color%3Dffffff%26meta_color%3D9a9a9a%26accent_color%3Df2e600%26logo_color%3Df2e600%26profile%3Doff%26count%3D1%26width%3D260%26header%3D0%26time%3D0" alt=""></div>
      <div class="fin-amp-bar"><span>RECENTLY PLAYED</span></div>
      <div class="fin-amp-hint">last.fm/finfin030</div>
      <div class="fin-amp-pl"><img src="/proxy/image.php?url=https%3A%2F%2Flastfm-recently-played.vercel.app%2Fapi%3Fuser%3Dfinfin030%26radius%3D0%26bg_color%3D0a0a0a%26text_color%3Df2e600%26artist_color%3Dffffff%26meta_color%3D9a9a9a%26accent_color%3Df2e600%26logo_color%3Df2e600%26profile%3Doff%26count%3D8%26width%3D260%26header%3D0" alt="">
      </div>
    </a>
  </div>
  <div class="fin-tv"><span class="fin-ch">CH.01</span><img src="/proxy/image.php?url=https%3A%2F%2Fmedia.tenor.com%2FTiu3IuQJW6kAAAAM%2Fcrowbar-sludge.gif" alt=""><div class="fin-tv-scan"></div></div>  
  <div class="fin-tv"><span class="fin-ch">CH.02</span><img src="/proxy/image.php?url=https%3A%2F%2Fmedia.tenor.com%2F2-SyRcs4DEoAAAAM%2Fboards-of-canada.gif" alt=""><div class="fin-tv-scan"></div></div>  
  <div class="fin-tv"><span class="fin-ch">CH.03</span><img src="/proxy/image.php?url=https%3A%2F%2Fblob.gifcities.org%2Fgifcities%2FJJ37DSWXDPWJR2YHDQLY7UCWIOHUIGIH.gif" alt=""><div class="fin-tv-scan"></div></div>  
</div>
<div class="fin-wall fin-r">
  <div class="fin-tv"><span class="fin-ch">CH.04</span><img src="/proxy/image.php?url=https%3A%2F%2Fmedia.tenor.com%2FD5Y5eszO7lMAAAAM%2Fdagoth-ur-morrowind.gif" alt=""><div class="fin-tv-scan"></div></div>  
  <div class="fin-tv"><span class="fin-ch">CH.05</span><img src="/proxy/image.php?url=https%3A%2F%2Fmedia.tenor.com%2FXjl0TnzN1roAAAAM%2Fdeath-grips-mc-ride.gif" alt=""><div class="fin-tv-scan"></div></div>  
  <div class="fin-tv"><span class="fin-ch">CH.06</span><img src="/proxy/image.php?url=https%3A%2F%2Fmedia.tenor.com%2FBuLWco2d3tMAAAAM%2Fafx-aphex-twin.gif" alt=""><div class="fin-tv-scan"></div></div>  
  <div class="fin-tv"><span class="fin-ch">CH.07</span><img src="/proxy/image.php?url=https%3A%2F%2Fmedia.tenor.com%2F8JPCkLefPZYAAAAM%2Fsavlian-matius-imperial.gif" alt=""><img class="fin-alt" src="/proxy/image.php?url=https%3A%2F%2Fmedia.tenor.com%2FDTYwWl-W-CsAAAAM%2Foblivion-gate.gif" alt=""><div class="fin-tv-scan"></div></div>  
</div>


<div class="fin-ticker"><div class="fin-tk">▲ Vocaloid is my passion. ▲ NOW PLAYING: Utsu-P - IMPERFECT ANIMALS ▲ I LOVE UTAU ▲ MUSIC PRODUCER ▲ I LOVE VOCALOST ▲ NOW PLAYING: CROWBAR - EMBRACING EMPTINESS ▲ LOVE APHEX TWIN ▲ LOVE CROWBAR ▲ LOVE METAL ▲ YEAH ▲ I JUST BE CHILLIN. ▲ NOW PLAYING: CROWBAR - EMBRACING EMPTINESS ▲ LOVE APHEX TWIN ▲ LOVE CROWBAR ▲ LOVE METAL ▲ YEAH ▲ I JUST BE CHILLIN. ▲ NOW PLAYING: CROWBAR - EMBRACING EMPTINESS ▲ LOVE APHEX TWIN ▲ LOVE CROWBAR ▲ LOVE METAL ▲ YEAH ▲ </div></div>


<div id="fin-warn">
  <div class="fin-dlg">
    <div class="fin-dlg-t">vocalost.exe</div>
    <div class="fin-dlg-b">
      <div class="fin-ico">!</div>
      <div><p>LOVE VOCALOID?UTAU?</p></div>
    </div>
    <div class="fin-dlg-btns">
      <a class="fin-def" href="#fin-warn">YES!!!</a>
      <a href="https://friendrewind.com/home.php">Nah</a>
    </div>
  </div>
</div>