:root {
  --bg: #090a0c;
  --bg-2: #0f1113;
  --surface: #131518;
  --surface-2: #191c20;
  --surface-hover: #1e2226;
  --text: #dce3de;
  --muted: #a8ada9;
  --faint: #737a76;
  --border: rgba(220, 227, 222, 0.12);
  --border-strong: rgba(220, 227, 222, 0.22);
  --accent: #b7c7ff;
  --soundcloud: #ff6a1a;
  --green: #76b891;
  --red: #d66b70;
  --grey: #66706a;
  --black: #080a09;
  --console: #8fb79c;
  --radius: 12px;
  --radius-sm: 8px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; color-scheme: dark; }
body {
  height: 100%;
  overflow: hidden;
  color: var(--text);
  font: 15px/1.45 var(--font-sans);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: rgba(139,123,255,.32); }

.container {
  width: min(1120px, 100%);
  height: 100vh;
  margin: 0 auto;
  padding: 26px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.top-grid, .bottom-grid { display: grid; gap: 14px; align-items: stretch; }
.top-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.bottom-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); flex: 1; min-height: 0; }

.profile-card, .spotify-card, .section-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.profile-card:hover, .spotify-card:hover, .section-card:hover { border-color: var(--border-strong); }

/* Profile */
#profile { display: flex; padding: 0 18px 16px; flex-direction: column; align-items: flex-start; }
#profile-banner {
  width: calc(100% + 36px);
  height: 96px;
  margin: 0 -18px;
  display: block;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.profile-meta-row {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  gap: 8px;
  align-items: center;
}
.meta-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(10,11,18,.6);
  color: var(--text);
  font: 12px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(8px);
}
.clock-icon { color: var(--accent); }
#time-diff-display { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-wrapper { position: relative; z-index: 4; margin-top: -38px; }
.avatar {
  width: 74px; height: 74px; display: block; object-fit: cover;
  border: 3px solid var(--surface); outline: 2px solid rgba(139,123,255,.55);
  border-radius: 50%; background: var(--surface-2);
}
.status-dot {
  position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px;
  border: 3px solid var(--surface); border-radius: 50%; background: var(--grey);
}
.status-dot.online { background: var(--green); box-shadow: none; }
.status-dot.idle { background: var(--soundcloud); }
.status-dot.dnd { background: var(--red); }
.status-dot.offline { background: var(--grey); }
.username-container { margin-top: 9px; }
.display-name { font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.rainbow-text { color: var(--text); }
.username-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.at-username { color: var(--accent); }
.username-divider { color: var(--faint); }
.id-hash { color: var(--faint); font: 11.5px/1.4 var(--font-mono); overflow-wrap: anywhere; }
.devices { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.device-chip { color: var(--accent); font: 11.5px/1.3 var(--font-mono); }
.activity-line, .custom-status { max-width: 100%; margin-top: 6px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }

/* Shared headers and controls */
.section-title-container { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.card-title { margin: 0; color: var(--text); font-size: 16px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }
.icon-btn, .social-links a, .social-links button, .spotify-controls-wrapper a, .close-popup {
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.icon-btn { all: unset; display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; }
.icon-btn:hover, .social-links a:hover, .social-links button:hover, .spotify-controls-wrapper a:hover, .close-popup:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn[disabled] { opacity: .45; pointer-events: none; }

/* Now playing */
.spotify-card { padding: 16px 18px; display: flex; flex-direction: column; }
.spotify-title { color: var(--text); }
.spotify-controls-wrapper { display: flex; gap: 6px; }
.spotify-controls-wrapper a { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.spotify-bg-icon { position: absolute; right: 16px; bottom: 12px; width: 66px; height: 66px; color: var(--muted); opacity: .08; pointer-events: none; }
.spotify-container { display: flex; min-width: 0; align-items: center; gap: 14px; margin-top: 14px; }
.album-art { width: 68px; height: 68px; flex: 0 0 68px; object-fit: cover; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.spotify-info { min-width: 0; flex: 1; }
.song-name { overflow: hidden; color: var(--text); font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.artist-name { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.album-name { margin-top: 2px; overflow: hidden; color: var(--faint); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.progress-container { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; }
.time-display, .lyrics-time { color: var(--faint); font: 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.progress-bar, .lyrics-progress-container { height: 4px; flex: 1; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); }
.progress-fill, .lyrics-progress-fill { height: 100%; width: 0; border-radius: inherit; background: var(--soundcloud); transition: width .4s linear; }
.spotify-card.inactive .spotify-controls-wrapper { visibility: hidden; }
.spotify-card.inactive #spotify-progress-container { visibility: hidden; }

/* Sections */
.section-card { padding: 16px 18px; }
#about-me-card { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.social-links { display: flex; gap: 4px; align-items: center; }
.social-links a, .social-links button { all: unset; display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; }
.about-me-content { flex: 1; min-height: 0; overflow: hidden; }
.about-sections { display: flex; flex-direction: column; gap: 12px; }
.about-section h3 { margin-bottom: 5px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
#about-me-card .about-section:nth-child(1) h3 { color: var(--accent); }
#about-me-card .about-section:nth-child(2) h3 { color: var(--accent); }
.about-section p { max-width: 62ch; color: var(--muted); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.about-section p a { color: var(--accent); text-decoration-color: rgba(67,214,208,.5); text-underline-offset: 3px; }
.about-section p a:hover { color: var(--text); }
.love-text { color: var(--muted); font-weight: 700; }
.danger-text { color: var(--soundcloud); font-weight: 700; }
.emote { width: auto; height: 1.2em; vertical-align: middle; }
.tooltip-trigger { position: relative; border-bottom: 1px dotted var(--faint); color: var(--text); cursor: help; }
.tooltip-box { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 30; visibility: hidden; width: max-content; max-width: min(280px, 80vw); padding: 8px 10px; transform: translate(-50%, 4px); border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 12.5px; opacity: 0; pointer-events: none; }
.tooltip-trigger:hover .tooltip-box { visibility: visible; transform: translate(-50%, 0); opacity: 1; }
.stamp-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.stamp-grid img, .stamp-grid video { width: 82px; height: 29px; object-fit: cover; border: 1px solid var(--border); border-radius: 4px; }
.views-container { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.views-label { color: var(--faint); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.views-count { color: var(--accent); font: 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.digit-image { width: 22px; height: auto; image-rendering: pixelated; }

/* Streams */
#streams-card { display: flex; flex-direction: column; min-height: 0; }
.controls-group { display: flex; align-items: center; gap: 6px; }
.search-wrapper { position: relative; width: min(180px, 32vw); }
.search-icon { position: absolute; top: 50%; left: 11px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
#song-search-input { width: 100%; height: 34px; padding: 0 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; background: var(--bg-2); color: var(--text); font-size: 13.5px; }
#song-search-input::placeholder { color: var(--faint); }
#song-search-input:focus { border-color: var(--accent); }
#clear-search-btn { position: absolute; top: 1px; right: 1px; opacity: 0; pointer-events: none; }
#clear-search-btn.visible { opacity: 1; pointer-events: auto; }
.interactive-title { color: var(--soundcloud); cursor: pointer; }
.interactive-title:hover { filter: brightness(1.15); }
#songs-list-wrapper { min-height: 0; flex: 1; margin-top: 12px; overflow: hidden; }
#recent-songs-container, #top-songs-container { height: 100%; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.song-item { position: relative; display: flex; min-height: 56px; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 10px; }
.song-item + .song-item { margin-top: 2px; }
.song-item:hover { background: var(--surface-2); }
.song-album-art-wrapper { position: relative; width: 40px; height: 40px; flex: 0 0 40px; }
.song-album-art, .letter-cover { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.song-album-art { display: block; object-fit: cover; }
.letter-cover { display: flex; align-items: center; justify-content: center; color: var(--black); font-weight: 800; background: var(--surface-hover); }
.song-details { min-width: 0; flex: 1; }
.song-title { overflow: hidden; color: var(--text); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.song-artist-container { display: flex; min-width: 0; align-items: center; gap: 6px; margin-top: 2px; color: var(--faint); font-size: 12.5px; }
.song-artist-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explicit-tag { display: inline-flex; width: 14px; height: 14px; flex: 0 0 14px; align-items: center; justify-content: center; border-radius: 3px; background: var(--faint); color: var(--bg); font-size: 9px; font-weight: 800; }
.song-meta { margin-left: auto; padding-left: 10px; color: var(--faint); font-size: 12px; white-space: nowrap; }
.song-duration { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.song-links { position: absolute; top: 6px; right: 6px; display: flex; gap: 6px; }
.song-links a { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--faint); }
.song-links a:hover { color: var(--accent); }
.streams-empty, .streams-error, .streams-hint { padding: 40px 12px; color: var(--faint); font-size: 13.5px; text-align: center; }
.streams-error { color: var(--red); }

/* Loading */
.loading-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: rgba(10,11,18,.85); backdrop-filter: blur(3px); transition: opacity .2s ease; }
.loading-overlay span { color: var(--muted); font: 13px/1 var(--font-mono); }
.loading-overlay.hidden { opacity: 0; pointer-events: none; }

/* Footer */
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px; color: var(--faint); font-size: 12.5px; }
.footer-left .rainbow-text { font-weight: 700; }
#footer-domain { color: var(--muted); }
.footer-right { font-family: var(--font-mono); }
.footer-right.connected { color: var(--green); }
.footer-right.error { color: var(--red); }

/* Lyrics dialog */
.popup-overlay-dim { position: fixed; inset: 0; z-index: 40; background: rgba(6,7,14,.7); backdrop-filter: blur(5px); }
.popup-window { position: fixed; inset: 0; z-index: 41; width: min(660px, calc(100vw - 32px)); height: min(680px, calc(100vh - 48px)); margin: auto; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface); }
.popup-window::before { display: none; }
.lyrics-backdrop { position: absolute; inset: 0; width: 100%; height: 200px; object-fit: cover; opacity: .12; filter: blur(20px) saturate(1.1); pointer-events: none; }
.popup-header { position: relative; z-index: 1; padding: 22px 62px 16px 24px; border-bottom: 1px solid var(--border); background: rgba(20,23,42,.82); backdrop-filter: blur(10px); }
.lyrics-song-title { font-size: 21px; line-height: 1.25; font-weight: 700; }
.lyrics-song-artist { margin-top: 4px; color: var(--muted); font-size: 13.5px; }
.unsynced-label { display: inline-block; margin-top: 9px; padding: 2px 9px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--faint); font-size: 11.5px; }
.close-popup { all: unset; position: absolute; top: 16px; right: 16px; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 10px; color: var(--muted); cursor: pointer; }
.lyrics-content { position: relative; z-index: 1; flex: 1; overflow-y: auto; padding: 22px 24px; scroll-behavior: smooth; }
.lyric-line { padding: 5px 0; color: var(--faint); font-size: 16px; line-height: 1.6; transition: color .15s ease, transform .15s ease; }
.lyric-line.current { transform: translateX(4px); color: var(--accent); font-weight: 600; }
.lyrics-status-message { padding: 44px 0; color: var(--faint); text-align: center; }
.lyrics-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 13px 24px 16px; border-top: 1px solid var(--border); background: var(--bg-2); }

/* Discord modal */
.discord-popup { align-items: center; justify-content: center; gap: 10px; padding: 30px 24px; text-align: center; }
.discord-popup-avatar { width: 92px; height: 92px; object-fit: cover; border: 2px solid rgba(139,123,255,.5); border-radius: 50%; background: var(--surface-2); }
.discord-popup-name { font-size: 21px; font-weight: 700; }
.discord-popup-sub { color: var(--faint); font: 13px/1.4 var(--font-mono); }
.discord-copy-btn { margin-top: 8px; padding: 9px 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: transparent; color: var(--accent); cursor: pointer; }
.discord-copy-btn:hover { background: var(--surface-2); }
.discord-copy-btn.copied { color: var(--green); }

.no-js-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); text-align: center; }
.no-js-message h1 { margin-bottom: 10px; font-size: 26px; }
.no-js-message p { max-width: 48ch; color: var(--muted); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--border-strong); background-clip: padding-box; }

@media (max-width: 860px) {
  body { overflow: auto; }
  .container { height: auto; min-height: 100vh; overflow: visible; }
  .top-grid, .bottom-grid { grid-template-columns: 1fr; }
  .bottom-grid { flex: none; }
  #recent-songs-container, #top-songs-container { height: auto; max-height: 320px; }
  #songs-list-wrapper { overflow: visible; }
}

@media (max-width: 520px) {
  body { font-size: 14.5px; }
  .container { padding: 14px 13px 20px; gap: 12px; }
  .top-grid, .bottom-grid { gap: 12px; }
  #profile { padding: 0 15px 15px; }
  #profile-banner { width: calc(100% + 30px); height: 84px; margin: 0 -15px; }
  .profile-meta-row { top: 10px; right: 10px; left: 10px; justify-content: space-between; }
  #time-diff-display { max-width: 140px; }
  .avatar { width: 66px; height: 66px; }
  .display-name { font-size: 19px; }
  .id-hash, .username-divider { display: none; }
  .section-title-container { align-items: flex-start; }
  #streams-card .section-title-container { flex-direction: column; }
  .controls-group, .search-wrapper { width: 100%; }
  .song-meta { display: none; }
  .popup-window { width: calc(100vw - 20px); height: calc(100vh - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Hidden interactions — intentionally dormant until discovered */
.secret-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1000;
  translate: -50% 12px;
  opacity: 0;
  padding: 8px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--black);
  color: var(--muted);
  font: 11px/1.2 var(--font-mono);
  letter-spacing: .025em;
  transition: opacity .2s ease, translate .2s ease;
  pointer-events: none;
}
.secret-toast.is-visible { opacity: 1; translate: -50% 0; }
.secret-bit {
  position: fixed;
  z-index: 999;
  color: var(--accent);
  font: 10px/1 var(--font-mono);
  pointer-events: none;
  animation: secret-bit .85s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes secret-bit {
  to { translate: var(--x) var(--y); rotate: var(--r); opacity: 0; }
}
.secret-console {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 998;
  width: min(310px, calc(100vw - 36px));
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--black);
  color: var(--console);
  font: 11px/1.6 var(--font-mono);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .25s ease;
}
.secret-console b, .secret-console span { display: block; }
.secret-console b { margin-bottom: 6px; color: var(--text); }
.secret-console.is-open { opacity: 1; transform: none; }
.diagnostic-mode body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 997;
  border: 1px solid var(--console);
  opacity: .12;
  pointer-events: none;
  animation: diagnostic-pulse 1.2s steps(2, end) infinite;
}
@keyframes diagnostic-pulse { 50% { opacity: .035; } }
.secret-avatar { animation: secret-avatar .75s cubic-bezier(.2,.85,.25,1); }
@keyframes secret-avatar {
  35% { transform: rotate(-8deg) scale(1.08); }
  70% { transform: rotate(5deg) scale(1.03); }
}
.secret-shake { animation: secret-shake .7s ease; }
@keyframes secret-shake {
  20% { transform: translateX(-3px) rotate(-.12deg); }
  40% { transform: translateX(3px) rotate(.12deg); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(1px); }
}
.secret-invert body { filter: invert(.88) hue-rotate(155deg); transition: filter .45s ease; }
.secret-invert img, .secret-invert video { filter: invert(1) hue-rotate(205deg); }
.avatar-wrapper, .page-footer { cursor: pointer; }

@media (min-width: 861px) {
  body { display: flex; align-items: center; }
  .container { height: min(720px, 100vh); padding-top: 18px; padding-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .secret-bit { display: none; }
  .secret-avatar, .secret-shake, .diagnostic-mode body::after { animation: none !important; }
  .secret-invert body { transition: none; }
}


/* Keep the stamp wall dense enough to fit without clipping. */
.stamp-grid { gap: 5px; max-width: 100%; overflow: hidden; }
.stamp-grid img, .stamp-grid video { width: 74px; height: 26px; }
.about-sections { gap: 10px; }
.about-section p { line-height: 1.45; }

@media (max-width: 520px) {
  .tooltip-box { display: none; }
  .tooltip-trigger { cursor: default; border-bottom-color: transparent; }
}

/* =========================================================
   VISUAL DIRECTION V2 — compact personal console
   Flat surfaces, editorial rhythm, restrained accents.
   ========================================================= */

body {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.005em;
  background: var(--bg);
}

.container {
  width: min(1160px, 100%);
  gap: 12px;
  padding-inline: 20px;
}

.top-grid,
.bottom-grid { gap: 12px; }
.top-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.bottom-grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }

.profile-card,
.spotify-card,
.section-card {
  isolation: isolate;
  border-color: var(--border);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.profile-card:hover,
.spotify-card:hover,
.section-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-1px);
}

.profile-card::after,
.spotify-card::after,
#about-me-card::after,
#streams-card::after {
  position: absolute;
  right: 14px;
  bottom: 4px;
  z-index: -1;
  color: var(--text);
  font: 700 54px/.9 var(--font-mono);
  letter-spacing: -.08em;
  opacity: .025;
  pointer-events: none;
}
.profile-card::after { content: "01"; }
.spotify-card::after { content: "02"; }
#about-me-card::after { content: "03"; }
#streams-card::after { content: "04"; }

/* Profile — the visual anchor */
#profile {
  min-height: 210px;
  padding: 0 18px 16px;
  align-items: flex-start;
}
#profile-banner {
  width: calc(100% + 36px);
  height: 108px;
  margin-inline: -18px;
  border-bottom-color: var(--border);
  background: var(--surface-2);
  filter: brightness(.72) saturate(.72) contrast(1.06);
}
.profile-meta-row { top: 10px; right: 10px; gap: 6px; }
.meta-badge {
  min-height: 27px;
  padding-inline: 8px;
  border-color: var(--border-strong);
  border-radius: 6px;
  background: var(--black);
  color: var(--muted);
  backdrop-filter: blur(10px);
}
.clock-icon { color: var(--muted); }
.avatar-wrapper { margin-top: -39px; }
.avatar {
  width: 76px;
  height: 76px;
  border: 4px solid var(--surface);
  outline: 1px solid var(--border-strong);
  background: var(--surface-hover);
}
.status-dot { width: 14px; height: 14px; border-width: 3px; }
.username-container { margin-top: 10px; }
.display-name {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 720;
  letter-spacing: -.035em;
}
.display-name .rainbow-text { color: var(--accent); }
.username-line { margin-top: 6px; gap: 8px; font-size: 12px; }
.at-username { color: var(--muted); }
.id-hash { font-size: 10px; opacity: .78; }
.device-chip {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--faint);
  background: transparent;
}
.activity-line,
.custom-status { margin-top: 7px; color: var(--muted); font-size: 12.5px; }

/* Shared title rhythm */
.section-card,
.spotify-card { padding: 17px 18px; }
.section-title-container {
  min-height: 32px;
  align-items: center;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
}
.card-title {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  font-weight: 680;
  letter-spacing: -.015em;
}
.card-title::before {
  content: "/ ";
  color: var(--faint);
  font-family: var(--font-mono);
  font-weight: 400;
}
.icon-btn,
.social-links a,
.social-links button,
.spotify-controls-wrapper a,
.close-popup {
  border-radius: 6px;
}
.icon-btn { width: 30px; height: 30px; }
.icon-btn:hover,
.social-links a:hover,
.social-links button:hover,
.spotify-controls-wrapper a:hover,
.close-popup:hover {
  border-color: var(--border);
  background: var(--surface-hover);
}
.icon-btn:active,
.social-links a:active,
.spotify-controls-wrapper a:active { transform: translateY(2px); }

/* SoundCloud */
.spotify-card { min-height: 210px; }
.spotify-title { color: var(--text); }
.spotify-bg-icon {
  right: 18px;
  bottom: 18px;
  width: 78px;
  height: 78px;
  color: var(--soundcloud);
  opacity: .055;
}
.spotify-container { gap: 15px; margin-top: 17px; }
.album-art {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
  border-radius: 7px;
  border-color: var(--border);
  background: var(--surface-hover);
}
.song-name { font-size: 15px; font-weight: 680; letter-spacing: -.015em; }
.artist-name { margin-top: 3px; font-size: 12.5px; }
.album-name { font-size: 11.5px; }
.progress-container { padding-top: 16px; }
.progress-bar,
.lyrics-progress-container { height: 3px; border-radius: 0; background: var(--surface-hover); }
.progress-fill,
.lyrics-progress-fill { border-radius: 0; background: var(--soundcloud); }
.time-display,
.lyrics-time { font-size: 10px; }

/* About — dense but readable */
#about-me-card { gap: 12px; }
.about-me-content { padding-top: 2px; }
.about-sections { gap: 11px; }
.about-section h3 {
  margin-bottom: 5px;
  color: var(--faint);
  font: 600 10px/1.2 var(--font-mono);
  letter-spacing: .12em;
}
#about-me-card .about-section:nth-child(1) h3,
#about-me-card .about-section:nth-child(2) h3 { color: var(--faint); }
.about-section p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.about-section p strong,
.love-text,
.danger-text { color: var(--text); font-weight: 650; }
.social-links { gap: 3px; }
.social-links a,
.social-links button { width: 29px; height: 29px; }
.stamp-grid { gap: 5px; align-content: flex-start; }
.stamp-grid a { line-height: 0; }
.stamp-grid img,
.stamp-grid video {
  width: 76px;
  height: 27px;
  border-radius: 2px;
  border-color: var(--border);
  opacity: .82;
  filter: saturate(.78) contrast(1.02);
  transition: opacity .16s ease, filter .16s ease, transform .16s ease;
}
.stamp-grid img:hover,
.stamp-grid video:hover {
  opacity: 1;
  filter: saturate(1) contrast(1);
  transform: translateY(-1px);
}
.views-container {
  justify-content: space-between;
  padding-top: 10px;
  border-top-style: solid;
}
.views-label { font: 500 9px/1 var(--font-mono); letter-spacing: .14em; }
.views-count { color: var(--muted); font-size: 12px; }
.digit-image { width: 21px; }

/* Streams — list, not a stack of mini-cards */
#streams-card { min-height: 0; }
#streams-card .interactive-title { color: var(--soundcloud); }
.controls-group { gap: 7px; }
.search-wrapper { width: min(180px, 32vw); }
#song-search-input {
  height: 31px;
  border-radius: 6px;
  background: var(--black);
  font-size: 12px;
}
#song-search-input:focus { border-color: var(--border-strong); }
#songs-list-wrapper { margin-top: 8px; }
#recent-songs-container,
#top-songs-container { padding-right: 4px; }
.song-item {
  min-height: 58px;
  gap: 12px;
  padding: 8px 5px;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.song-item + .song-item { margin-top: 0; }
.song-item:last-child { border-bottom-color: transparent; }
.song-item:hover { background: var(--surface-hover); }
.song-album-art-wrapper,
.song-album-art,
.letter-cover { width: 42px; height: 42px; }
.song-album-art,
.letter-cover { border-radius: 5px; }
.letter-cover {
  color: var(--muted);
  background: var(--surface-hover);
  font-family: var(--font-mono);
}
.song-title { font-size: 12.5px; font-weight: 650; }
.song-artist-container,
.song-artist-name { color: var(--faint); font-size: 11px; }
.song-meta { color: var(--faint); font-size: 10px; }
.song-links a:hover { color: var(--text); }
.streams-empty,
.streams-hint { color: var(--faint); }
.streams-error { color: var(--red); }

/* Footer and overlays */
.page-footer {
  padding-inline: 2px;
  color: var(--faint);
  font: 11px/1 var(--font-mono);
}
.footer-left .rainbow-text { color: var(--text); font-weight: 600; }
#footer-domain { color: var(--faint); }
.loading-overlay { background: var(--surface); backdrop-filter: none; }
.loading-overlay span::after { content: "_"; animation: cursor-blink .8s steps(2, end) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.popup-overlay-dim { background: rgba(8,10,9,.78); }
.popup-window { border-radius: 10px; background: var(--surface); }
.popup-header { background: var(--surface); backdrop-filter: none; }
.lyrics-backdrop { opacity: .08; filter: grayscale(.35) blur(18px); }
.lyric-line.current { color: var(--accent); }
.discord-popup-avatar { border-color: var(--border-strong); }
.discord-copy-btn { color: var(--text); }

@media (min-width: 861px) {
  .container { height: min(740px, 100vh); }
}

@media (max-width: 860px) {
  .profile-card:hover,
  .spotify-card:hover,
  .section-card:hover { transform: none; }
  .section-card,
  .spotify-card { padding: 16px 18px; }
  #profile { min-height: 0; }
}

@media (max-width: 520px) {
  .container { padding: 12px; gap: 10px; }
  .top-grid,
  .bottom-grid { gap: 10px; }
  .profile-card,
  .spotify-card,
  .section-card { border-radius: 9px; }
  #profile-banner { height: 92px; }
  .spotify-card { min-height: 174px; }
  .section-title-container { padding-bottom: 10px; }
  .spotify-container { margin-top: 14px; }
  .album-art { width: 66px; height: 66px; flex-basis: 66px; }
  .stamp-grid img,
  .stamp-grid video { width: 74px; height: 26px; }
  #streams-card .section-title-container { gap: 10px; }
  .search-wrapper { width: 100%; }
  .profile-card::after,
  .spotify-card::after,
  #about-me-card::after,
  #streams-card::after { display: none; }
}

/* Mobile stack must win over the desktop proportion rules above. */
@media (max-width: 860px) {
  .top-grid,
  .bottom-grid { grid-template-columns: minmax(0, 1fr); }
  .bottom-grid { flex: none; }
}
@media (max-width: 520px) {
  #time-diff-display { max-width: none; }
  .profile-meta-row { left: 10px; right: 10px; justify-content: space-between; }
}


/* =========================================================
   TYPE + SEMANTIC COLOR PASS
   ========================================================= */
:root {
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --nick-color: #b7c7ff;
  --age-color: #f2c66d;
  --hobby-color: #9cc5b7;
  --music-color: #ff8a5b;
  --gaming-color: #75c9a2;
  --coding-color: #79b8ff;
  --internet-color: #d6a8e3;
}

body { font-family: var(--font-sans); }
.display-name,
.card-title,
.lyrics-song-title,
.discord-popup-name {
  font-family: var(--font-display);
}
.display-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.045em;
}
.display-name .rainbow-text,
.profile-name-accent { color: var(--nick-color); }
.card-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.035em;
}
.song-name,
.song-title { font-family: var(--font-sans); }
.meta-badge,
.id-hash,
.device-chip,
.about-section h3,
.views-label,
.time-display,
.lyrics-time,
.page-footer,
.song-meta { font-family: var(--font-mono); }

.profile-name-accent,
.age-accent,
.hobby-accent,
.music-accent,
.gaming-accent,
.coding-accent,
.internet-accent {
  font-weight: 650;
}
.profile-name-accent { color: var(--nick-color); }
.age-accent { color: var(--age-color); }
.hobby-accent { color: var(--hobby-color); }
.music-accent { color: var(--music-color); }
.gaming-accent { color: var(--gaming-color); }
.coding-accent { color: var(--coding-color); }
.internet-accent { color: var(--internet-color); }
.birthday-note {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--age-color) 36%, transparent);
  border-radius: 4px;
  color: var(--age-color);
  font: 500 9px/1.25 var(--font-mono);
  letter-spacing: .04em;
  white-space: nowrap;
  vertical-align: 1px;
}

/* Let color guide attention instead of filling whole surfaces. */
#about-who,
#about-interests { color: var(--muted); }
#about-who .tooltip-trigger,
#about-interests .tooltip-trigger { border-bottom-color: currentColor; }
#streams-card .interactive-title { color: var(--music-color); }
.spotify-card .card-title::before { color: var(--music-color); }

@media (max-width: 520px) {
  .display-name { font-size: 19px; }
  .card-title { font-size: 11px; }
  .birthday-note { margin-top: 4px; margin-left: 0; }
}


/* Stamp wall: exactly 3 columns × 5 rows. */
.stamp-grid {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  grid-template-rows: repeat(5, 27px);
  gap: 5px;
  width: max-content;
  max-width: 100%;
  align-content: start;
}
.stamp-grid > :nth-child(n + 16) { display: none; }
.stamp-grid img,
.stamp-grid video {
  width: 76px;
  height: 27px;
}
@media (max-width: 520px) {
  .stamp-grid {
    grid-template-columns: repeat(3, 74px);
    grid-template-rows: repeat(5, 26px);
  }
  .stamp-grid img,
  .stamp-grid video {
    width: 74px;
    height: 26px;
  }
}


/* Full-width 3 × 5 stamp wall. */
.stamp-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}
.stamp-grid > * { min-width: 0; }
.stamp-grid img,
.stamp-grid video {
  display: block;
  width: 100%;
  height: 27px;
  object-fit: cover;
}
@media (max-width: 520px) {
  .stamp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stamp-grid img,
  .stamp-grid video { width: 100%; height: 26px; }
}


/* Banner must bleed to both card edges; global img max-width must not cap it. */
#profile-banner {
  width: calc(100% + 36px);
  max-width: none;
  margin-left: -18px;
  margin-right: -18px;
}
@media (max-width: 520px) {
  #profile-banner {
    width: calc(100% + 36px);
    max-width: none;
    margin-left: -18px;
    margin-right: -18px;
  }
}


/* Age tooltip: open below the age and stay inside the About card. */
.about-me-content,
.about-sections { overflow: visible; }
.age-accent.tooltip-trigger .tooltip-box {
  top: calc(100% + 7px);
  bottom: auto;
  left: 0;
  width: max-content;
  max-width: min(220px, calc(100vw - 72px));
  padding: 7px 9px;
  white-space: normal;
  line-height: 1.4;
  transform: translateY(-4px);
}
.age-accent.tooltip-trigger:hover .tooltip-box {
  transform: translateY(0);
}


/* Smoother, slightly larger animated view-counter characters. */
#view-counter {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
}
.digit-image {
  display: block;
  width: 25px;
  height: auto;
  image-rendering: auto;
  object-fit: contain;
  filter: saturate(1.06) contrast(1.03);
  backface-visibility: hidden;
  transform: translateZ(0);
}
@media (max-width: 520px) {
  .digit-image { width: 24px; }
}