@charset "UTF-8";

/* STREAMING_CHUNK: Setting base typography and page boundaries... */
html, body {
margin: 0;
padding: 0;
min-height: 100vh;
}

body {
color: #CCCCCC;
background-color: #000000;
font-family: "Bankgothic Lt Bt", "Bankgothic Lt", "Bankgothic Light", "Bank Gothic Light", "Bank Gothic Lt", "Bank Gothic", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 2rem 7%;
text-align: left;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
hyphens: auto;
line-height: 1.6;
}

/* STREAMING_CHUNK: Setting up cosmic gradient layout variables... */
.gradient-background {
background: linear-gradient(300deg, #44008d, #160066, #03010a);
background-size: 300% 300%;
background-attachment: fixed;
animation: gradient-animation 20s ease infinite;
}

@keyframes gradient-animation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
.gradient-background {
animation: none;
background-size: 100% 100%;
}
}

/* STREAMING_CHUNK: Drawing section divider boundaries and text embosses... */
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 5%, rgba(255, 255, 255, 0.15) 95%, rgba(255, 255, 255, 0) 100%);
margin: 2.5rem 0;
}

h1 {
font-size: 1.4rem;
font-weight: 700;
color: #FFFFFF;
margin-top: 0;
margin-bottom: 1rem;
letter-spacing: 0.05em;
text-shadow:
1px 1px 0px #333333,
-1px -1px 0px #000000;
}

h2 {
font-size: 1.25rem;
font-weight: 500;
color: #E2E8F0;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}

/* STREAMING_CHUNK: Designing anchor link states and push effects... */
a {
text-decoration: none;
color: #FFFFFF;
position: relative;
transition: color 0.25s ease;
display: inline-block;
}

a:hover {
color: #0099FF;
}

a:active {
color: #00D1FF;
transform: translateY(2px);
}

a:focus {
outline: none;
}

a:focus-visible {
outline: 1px solid #00D1FF;
color: #00D1FF;
}

/* STREAMING_CHUNK: Configuring social links and custom spacing... */
.contact-link {
display: inline-flex;
align-items: center;
gap: 6px;
vertical-align: middle;
font-weight: normal;
transition: color 0.25s ease, transform 0.2s ease;
}

.contact-link svg {
display: inline-block;
vertical-align: middle;
stroke: currentColor;
transition: transform 0.2s ease;
}

.contact-link:hover svg {
transform: translate(-1px, 1px);
}

.bullet-separator {
margin: 0 10px;
color: rgba(255, 255, 255, 0.25);
user-select: none;
font-size: 1rem;
vertical-align: middle;
}

/* STREAMING_CHUNK: Formatting archive spacing controls... */
.archive-intro {
margin-top: 3.5rem;
margin-bottom: 3.5rem;
}

.mix-section {
margin: 1.5rem 0;
}

/* STREAMING_CHUNK: Creating custom glassmorphic audio player boundaries... */
.custom-audio-player {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
max-width: 600px;
margin: 1rem 0;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 8px 16px;
box-shadow: 0 8px 32px 0 rgba(0, 153, 255, 0.25);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: linear-gradient(270deg, rgba(255, 255, 255, 0.15), rgba(200, 200, 205, 0.45), rgba(255, 255, 255, 0.15));
background-size: 200% 200%;
animation: silver-flow 12s ease infinite;
transition: all 0.3s ease;
box-sizing: border-box;
transform: translateY(-2px);
}

.custom-audio-player:hover {
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
transform: translateY(0);
}

/* STREAMING_CHUNK: Formatting interactive elements within audio containers... */
.custom-audio-player .play-btn {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #FFFFFF;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
flex-shrink: 0;
padding: 0;
}

.custom-audio-player .play-btn:hover {
background: rgba(255, 255, 255, 0.35);
border-color: rgba(255, 255, 255, 0.5);
transform: scale(1.05);
}

.custom-audio-player .play-btn svg {
width: 14px;
height: 14px;
fill: currentColor;
}

.custom-audio-player .timeline {
display: flex;
align-items: center;
gap: 10px;
flex-grow: 1;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 0.75rem;
color: #E2E8F0;
}

/* STREAMING_CHUNK: Formatting custom sliders and range controls... */
.custom-audio-player .scrubber {
flex-grow: 1;
-webkit-appearance: none;
appearance: none;
background: rgba(255, 255, 255, 0.18);
height: 5px;
border-radius: 3px;
outline: none;
cursor: pointer;
transition: background 0.25s ease;
}

.custom-audio-player .scrubber:hover {
background: rgba(255, 255, 255, 0.3);
}

.custom-audio-player .scrubber::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
transition: transform 0.15s ease;
}

.custom-audio-player .scrubber::-webkit-slider-thumb:hover {
transform: scale(1.25);
}

.custom-audio-player .scrubber::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: #FFFFFF;
border: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
transition: transform 0.15s ease;
}

.custom-audio-player .scrubber::-moz-range-thumb:hover {
transform: scale(1.25);
}

@keyframes silver-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

/* STREAMING_CHUNK: Creating layout limits for iframes and vector link lists... */
object,
iframe {
display: block;
margin: 1.5rem 0;
width: 100%;
border-radius: 12px;
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(0, 153, 255, 0.25);
transform: translateY(-2px);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}

object:hover,
iframe:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
transform: translateY(0);
}

.inline-tracklist {
margin-left: 4%;
margin-right: 4%;
font-size: 0.875rem;
color: #A0AEC0;
line-height: 1.6;
}

.playlist-link {
font-style: italic;
display: inline-flex;
align-items: center;
gap: 4px;
vertical-align: middle;
}

.playlist-link svg {
transition: transform 0.2s ease;
}

.playlist-link:hover svg {
transform: translate(-1px, 1px);
}