:root {
  color-scheme: light dark;

  --color-page: #d5d5d5;
  --color-canvas: #ffffff;
  --color-text: #000000;
  --color-text-muted: #596058;
  --color-border: #326632;

  --color-brand-deep: #002c00;
  --color-brand-dark: #205521;
  --color-brand-interactive: #79ad76;
  --color-brand-wash: #deedde;

  --color-accent-deep: #522e8a;

  --color-link: #205521;
  --color-link-hover: #522e8a;
  --color-module-bar: #326632;
  --color-module-bar-text: #ffffff;
  --color-label-cell: #bbd7ba;
  --color-label-text: #205521;
  --color-value-cell: #deedde;
  --color-accent-surface: #d2c3f8;
  --color-accent-text: #522e8a;
  --color-focus: #522e8a;
  --color-error-surface: #d2c3f8;
  --color-error-text: #522e8a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-page: #0c140c;
    --color-canvas: #151d15;
    --color-text: #f5f7f5;
    --color-text-muted: #aab2aa;
    --color-border: #374737;

    --color-link: #79ad76;
    --color-link-hover: #bbd7ba;
    --color-module-bar: #205521;
    --color-module-bar-text: #f5f7f5;
    --color-label-cell: #142d14;
    --color-label-text: #bbd7ba;
    --color-value-cell: #0c1a0b;
    --color-accent-surface: #522e8a;
    --color-accent-text: #d2c3f8;
    --color-error-surface: #522e8a;
    --color-error-text: #d2c3f8;
    --color-focus: #d2c3f8;
  }
}

html { background: var(--color-page); }

body,
td,
li,
p,
div,
textarea {
  color: var(--color-text);
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 8pt;
  font-weight: normal;
}

body {
  margin: 0;
  background: var(--color-page);
}

[hidden] { display: none !important; }

a {
  color: var(--color-link);
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 8pt;
  font-weight: bold;
  text-decoration: underline;
}

a:visited { color: var(--color-link); }
a:hover,
a:active { color: var(--color-link-hover); }

a:focus-visible,
.profilePlayerButton:focus-visible,
.profilePlayerArt:focus-visible,
#player-seek:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Silver hardware and image links sit on colors the palette does not own.
   Black + white guarantees 3:1 against at least one adjacent tone. */
.profilePlayerButton:focus-visible,
.profilePlayerArt:focus-visible,
#player-seek:focus-visible,
.friendPhotoLink:focus-visible {
  outline-color: #000000;
  box-shadow: 0 0 0 2px #ffffff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 4px;
  z-index: 20;
  padding: 3px 6px;
  border: 1px solid var(--color-focus);
  background: var(--color-accent-surface);
  color: var(--color-accent-text);
}

.skip-link:visited,
.skip-link:hover { color: var(--color-accent-text); }

.skip-link:focus { top: 4px; }

.profileError {
  width: 800px;
  max-width: calc(100% - 16px);
  margin: 10px auto;
  padding: 8px;
  border: 1px solid var(--color-focus);
  background: var(--color-error-surface);
  color: var(--color-error-text);
  font-weight: bold;
}

.siteHeader,
.siteHeader td {
  background: var(--color-brand-deep);
}

.siteNav,
.siteNav table,
.siteNav td {
  background: var(--color-module-bar);
}

.siteNavItems {
  color: var(--color-module-bar-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;
  white-space: nowrap;
}

.siteNavLabel {
  color: var(--color-module-bar-text);
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 8pt;
}

.profileShell,
.profileShellGutter,
.profileColumnGap,
.profileColumn {
  background: var(--color-canvas);
}

/* Lock desktop column geometry before the right column streams in.
   Measured settled layout is 304 / 15 / 445 = 764. Mobile stacking
   below still overrides these via display:block/flex rules. */
.profileColumns {
  width: 764px;
  table-layout: fixed;
}

.profileColumns > col.profileCol-left { width: 304px; }
.profileColumns > col.profileCol-gap { width: 15px; }
.profileColumns > col.profileCol-right { width: 445px; }

#profile-photo {
  width: 170px;
  height: 138px;
  object-fit: cover;
  object-position: center top;
}

.themeImage { display: inline; }
.themeImage img { filter: var(--ui-icon-filter, none); }
.onlineBadge { width: 80px !important; height: 20px !important; }

/* Reserve intrinsic UI icon sizes so delayed SVGs do not reflow modules. */
.contactPanel .themeImage img {
  width: 132px;
  height: 20px;
}

#profile-mood-image {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

.friendPhotoCell > img,
.friendPhotoCell > .friendPhotoLink > img {
  width: 90px;
  max-width: 90px;
  height: auto;
  aspect-ratio: 1 / 1;
  vertical-align: top;
  object-fit: cover;
}

html.has-custom-layer #custom-code-slot {
  min-height: 34px;
}

.profileName {
  color: var(--color-text);
  font-size: 12pt;
  font-weight: bold;
}

.displayLabel {
  color: var(--color-link);
  cursor: default;
  font-size: 8pt;
  font-weight: bold;
  text-decoration: none;
}

.friendName {
  color: var(--color-text-muted);
  font-size: 8pt;
  font-weight: bold;
}

.friendPhotoLink {
  display: inline-block;
  line-height: 0;
}

.friendPhotoLink:hover img {
  outline: 1px solid var(--color-link-hover);
  outline-offset: 1px;
}

.strongAction,
.emphasisCount { color: var(--color-accent-deep); }

.emphasisCount {
  font-size: 10pt;
  font-weight: normal;
}

.moduleBar {
  background: var(--color-module-bar);
  color: var(--color-module-bar-text);
}

.moduleTitle {
  color: var(--color-module-bar-text);
  font-size: 9pt;
  font-weight: bold;
}

.moduleLead {
  color: var(--color-text);
  font-size: 8pt;
  font-weight: bold;
}

.accentBar {
  background: var(--color-accent-surface);
  border-color: var(--color-accent-surface);
}

.accentHeading {
  color: var(--color-accent-text);
  font-size: 9pt;
  font-weight: bold;
}

@media (prefers-color-scheme: dark) {
  .strongAction,
  .emphasisCount { color: var(--color-accent-text); }
}

.contactPanel,
.profileDataPanel {
  border-color: var(--color-module-bar);
  background: var(--color-canvas);
}

.contactPanel td,
.profileDataPanel td {
  border-color: var(--color-module-bar);
}

.profileUrlBorder {
  padding: 1px;
  background: var(--color-module-bar);
}

.profileUrlBorder > table {
  background: var(--color-canvas);
}

.dataLabelCell {
  background: var(--color-label-cell);
}

.dataValueCell {
  background: var(--color-value-cell);
}

.dataLabel {
  color: var(--color-label-text);
  font-size: 8pt;
  font-weight: bold;
}

.networkNotice {
  border-color: var(--color-text);
  background: var(--color-canvas);
}

.networkNoticeText {
  color: var(--color-text);
  font-size: 12pt;
  font-weight: bold;
}

.blurbsPanel,
.friendsPanel {
  background: var(--color-canvas);
}

.accentBar td {
  border-color: var(--color-accent-surface);
}

.profileWelcome {
  margin: 0 0 9px;
  padding: 4px 6px;
  border: 1px dashed var(--color-brand-interactive);
  background: var(--color-brand-wash);
  color: var(--color-brand-dark);
  font-size: 10px;
}

/* Give Apple Music a wider internal viewport so it uses its horizontal
   playlist layout, then scale that layout back to the About Me width. */
.apple-music-embed {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-canvas);
}

.apple-music-embed::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 10px 10px, transparent 9px, var(--color-canvas) 10px) top left / 10px 10px no-repeat,
    radial-gradient(circle at 0 10px, transparent 9px, var(--color-canvas) 10px) top right / 10px 10px no-repeat,
    radial-gradient(circle at 10px 0, transparent 9px, var(--color-canvas) 10px) bottom left / 10px 10px no-repeat,
    radial-gradient(circle at 0 0, transparent 9px, var(--color-canvas) 10px) bottom right / 10px 10px no-repeat;
  box-shadow: inset 0 0 0 1px var(--color-canvas);
  content: "";
  pointer-events: none;
}

.apple-music-embed iframe {
  display: block;
  width: 125% !important;
  max-width: none !important;
  transform: scale(0.8);
  transform-origin: top left;
}

/* Keep Apple's internal viewport wide enough for artwork-left/list-right when
   the profile itself is viewed in a narrow window. */
@media (max-width: 434px) {
  .apple-music-embed {
    height: 315px;
  }

  .apple-music-embed iframe {
    width: 142.857% !important;
    transform: scale(0.7);
  }
}

@media (max-width: 362px) {
  .apple-music-embed {
    height: 261px;
  }

  .apple-music-embed iframe {
    width: 172.414% !important;
    transform: scale(0.58);
  }
}

@media (prefers-color-scheme: dark) {
  .profileWelcome {
    background: var(--color-label-cell);
    color: var(--color-label-text);
  }
}

.profilePlayer,
.profilePlayer * { box-sizing: border-box; }

#profile-song { margin: 0; }

.profilePlayer {
  width: 295px;
  height: 51px;
  margin: 0 auto;
  padding: 2px;
  border: 1px solid #4d4e50;
  border-radius: 5px;
  background: linear-gradient(#eeeeee, #c7c8c9 58%, #a5a6a8);
  box-shadow: inset 0 1px 0 #ffffff;
}

.profilePlayerMain {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 45px;
}

.profilePlayerArt {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #4d4e50;
  border-radius: 3px;
  background: #17181a;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.55);
  appearance: none;
  cursor: zoom-in;
}

.profilePlayerArt:disabled { cursor: default; }

.profilePlayerArt img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profilePlayerArt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08) 42%, rgba(0, 0, 0, 0.06) 43%, transparent);
  pointer-events: none;
}

.profilePlayerArtGlyph {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #17181a 0 3px, #9aa0a6 3px 4.5px, transparent 4.5px),
    conic-gradient(#b9bfc6, #7c828a, #d9dee3, #868c94, #c3c9cf, #767c84, #b9bfc6);
}

.profilePlayerButton {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #4d4e50;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fdfdfd, #c9cacc 55%, #8f9092);
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 70ms linear, box-shadow 70ms linear, transform 70ms ease-out;
}

.profilePlayerButton:hover {
  background: radial-gradient(circle at 35% 30%, #ffffff, #d6d7d9 55%, #9b9c9e);
}

.profilePlayerButton:active {
  background: radial-gradient(circle at 40% 40%, #cbcccd, #9fa0a2 55%, #737476);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4);
  transform: translateY(1px);
}

.profilePlayerButtonIcon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #3a3b3d;
  transition: transform 70ms ease-out;
}

.profilePlayerButton:active .profilePlayerButtonIcon { transform: scale(0.92); }

.profilePlayer.playing .profilePlayerButtonIcon {
  width: 10px;
  height: 13px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(to right, #3a3b3d 0 4px, transparent 4px 6px, #3a3b3d 6px 10px);
}

.profilePlayerPanel {
  flex: 1;
  min-width: 0;
  height: 45px;
}

.profilePlayerLcd {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 31px;
  padding: 2px 0 2px 2px;
  overflow: hidden;
  border: 1px solid #000000;
  border-radius: 2px;
  background: #1a1c1a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.4);
}

.profilePlayerTitleWindow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.profilePlayerTitle {
  display: inline-block;
  padding-left: 0;
  color: #f2f2f2;
  font: bold 12px Arial, Helvetica, sans-serif;
  line-height: 15px;
  white-space: nowrap;
}

.profilePlayer.playing .profilePlayerTitle.scrolls {
  padding-left: 100%;
  animation: profile-song-marquee 9s linear infinite;
}

@keyframes profile-song-marquee {
  to { transform: translateX(-100%); }
}

.profilePlayerSpectrum {
  display: block;
  flex: none;
  width: 44px;
  height: 25px;
}

.profilePlayerControls {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 12px;
  margin-top: 2px;
}

.profilePlayerSeek {
  --player-fill: 0%;
  position: relative;
  flex: 1;
  min-width: 0;
  height: 12px;
}

.profilePlayerSeek::before {
  content: "";
  position: absolute;
  inset: 3px 0;
  border: 1px solid #3c3d3f;
  border-radius: 3px;
  background:
    linear-gradient(to right, var(--color-brand-interactive) var(--player-fill), #26282a var(--player-fill)),
    #26282a;
  background-clip: padding-box;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.profilePlayerControls input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: grab;
}

.profilePlayerControls input[type="range"]:active { cursor: grabbing; }
.profilePlayerControls input[type="range"]:disabled { cursor: default; }

.profilePlayerControls input[type="range"]::-webkit-slider-runnable-track {
  height: 12px;
  margin: 0;
  border: 0;
  background: transparent;
}

.profilePlayerControls input[type="range"]::-webkit-slider-thumb {
  width: 11px;
  height: 10px;
  margin-top: 1px;
  border: 1px solid #3c3d3f;
  border-radius: 1px;
  background:
    linear-gradient(to right, transparent 0 5px, rgba(45, 46, 48, 0.95) 5px 6px, transparent 6px),
    linear-gradient(#fafafa, #d7d8da 28%, #b1b2b5 58%, #858689);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.65), inset -1px 0 0 rgba(50, 51, 53, 0.38), 0 1px 2px rgba(0, 0, 0, 0.5);
  appearance: none;
  cursor: grab;
}

.profilePlayerControls input[type="range"]::-moz-range-track {
  height: 12px;
  border: 0;
  background: transparent;
}

.profilePlayerControls input[type="range"]::-moz-range-progress { background: transparent; }

.profilePlayerControls input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 10px;
  border: 1px solid #3c3d3f;
  border-radius: 1px;
  background:
    linear-gradient(to right, transparent 0 5px, rgba(45, 46, 48, 0.95) 5px 6px, transparent 6px),
    linear-gradient(#fafafa, #d7d8da 28%, #b1b2b5 58%, #858689);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.65), inset -1px 0 0 rgba(50, 51, 53, 0.38), 0 1px 2px rgba(0, 0, 0, 0.5);
  cursor: grab;
}

.profilePlayerTime {
  flex: none;
  min-width: 44px;
  color: #2e2f31;
  font: bold 9px Arial, Helvetica, sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 12px;
  text-align: right;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.profilePlayerButton:disabled,
.profilePlayerControls input[type="range"]:disabled { opacity: 0.75; }

body.albumArtOpen { overflow: hidden; }

.albumArtOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 5vh 5vw;
  border: 0;
  background: rgba(7, 9, 12, 0.78);
  appearance: none;
  cursor: zoom-out;
}

.albumArtOverlay[hidden] { display: none; }
.albumArtOverlay:focus { outline: none; }

.albumArtOverlay img {
  display: block;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  border: 4px solid #eeeeee;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.siteFooter {
  padding: 14px 0 30px;
  background: var(--color-page);
}

.siteFooter td { background: var(--color-page); }

.footerLink {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
}

.site-legal {
  width: 760px;
  max-width: calc(100% - 32px);
  margin: 0 auto 14px;
  color: var(--color-text);
  line-height: 1.4;
  text-align: left;
}

.site-legal p {
  margin: 0 0 8px;
  color: var(--color-text);
}

@media (max-width: 799px) {
  .siteHeader,
  .siteNav,
  .profileShell,
  .siteFooter {
    width: 100%;
    max-width: 435px;
    margin-right: auto;
    margin-left: auto;
  }

  .siteNav table {
    width: 100%;
    max-width: 100%;
  }

  .siteNavItems {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 0;
    padding: 1px 10px;
    font-size: 0;
    line-height: 0;
  }

  .siteNavLabel {
    flex: none;
    margin: 0 6px;
    line-height: 11px;
    white-space: nowrap;
  }

  .siteFooter,
  .siteFooter > tbody,
  .siteFooter > tbody > tr,
  .siteFooter > tbody > tr > td {
    display: block;
    width: 100%;
  }

  .siteFooter {
    padding: 0 0 24px;
    border-top: 1px solid var(--color-border);
  }

  .siteFooter > tbody > tr > td > div > div:first-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 0;
    padding: 18px 16px 0;
    font-size: 0;
    line-height: 1.3;
  }

  .siteFooter > tbody > tr > td > div > div:first-child > br,
  .siteFooter > tbody > tr > td > div > br { display: none; }

  .siteFooter > tbody > tr > td > div > div:first-child > a {
    margin: 0 2px;
    font-size: 8pt;
  }

  .site-legal {
    width: auto;
    max-width: none;
    margin: 16px;
  }

  .profileShell,
  .profileShell > tbody,
  .profileShell > tbody > tr,
  .profileShell > tbody > tr > td,
  .profileColumns,
  .profileColumns > tbody,
  .profileColumn {
    display: block;
    width: 100%;
  }

  .profileColumns {
    table-layout: auto;
    width: 100%;
    max-width: 100%;
  }

  .profileColumns > colgroup,
  .profileColumns > col {
    display: none;
  }

  .profileColumns > tbody > tr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 0;
  }

  .profileShellGutter,
  .profileColumnGap { display: none; }

  .profileColumn {
    display: contents;
    height: auto !important;
    background: var(--color-canvas);
  }

  .profileColumn > br,
  #vplayer:empty { display: none; }

  [data-module="profile-summary"] { order: 1; }
  [data-module="contact"] { order: 2; }
  [data-module="profile-url"] { order: 3; }
  [data-module="profile-song"] { order: 4; }
  [data-module="extended-network"] { order: 5; }
  [data-module="blurbs"] { order: 6; }
  [data-module="interests"] { order: 7; }
  [data-module="details"] { order: 8; }
  [data-module="schools"] { order: 9; }
  [data-module="friend-space"] { order: 10; }

  .profileColumn table,
  .profileColumn td { max-width: 100%; }

  /* Responsive photos/icons only. Spacer shims are 1x1 SVGs whose HTML
     width/height attributes hold table row gaps; height:auto would replace
     those authored sizes with the decoded square aspect after load. */
  .profileColumn img:not([src*="layout-shim"]) {
    max-width: 100%;
    height: auto;
  }

  #profile-photo {
    height: auto;
    aspect-ratio: 170 / 138;
  }

  .profileColumn > table,
  .profileColumn > div[data-module] {
    width: 100%;
    max-width: 435px;
  }

  .profileColumn > .networkNotice {
    width: calc(100% - 12px);
    max-width: 423px;
    margin-top: 8px;
  }

  .profileColumn > .contactPanel,
  .profileColumn > .profileUrlPanel,
  .profileColumn > #profile-song {
    width: 300px;
    max-width: 100%;
  }

  .profileColumn > .profileSummary {
    width: min(400px, 100%);
    max-width: 100%;
  }

  .profileSummary table,
  .profileSummary td { width: auto; }

  .profileDataPanel > tbody > tr > td > table,
  .blurbsPanel > tbody > tr > td > table,
  .friendsPanel > tbody > tr > td > table {
    width: 100%;
  }

  .friendsPanel table {
    width: 100%;
    max-width: 100%;
  }

  .friendsPanel td { width: auto; }
  .friendsPanel .friendName { overflow-wrap: anywhere; }

  #friend-grid img { max-width: 60px; }

  #friend-grid .friendPhotoCell > img,
  #friend-grid .friendPhotoCell > .friendPhotoLink > img {
    width: 60px;
    max-width: 60px;
  }

  #friend-grid img.onlineBadge { height: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .profilePlayer.playing .profilePlayerTitle.scrolls {
    padding-left: 0;
    animation: none !important;
  }
}