/* ═══════════════════════════════════════════════════════════════
   main.css - Core site styles: variables, layout, nav, profile,
              Instagram grid, YouTube grid, components
   ═══════════════════════════════════════════════════════════════ */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box
  }

  :root {
  --bg: #0c0b0a;
  --s1: #141210;
  --s2: #1c1a17;
  --s3: #252320;
  --ink: #ede8de;
  --ink2: rgba(237, 232, 222, 0.55);
  --ink3: rgba(237, 232, 222, 0.22);
  --pk: #d4a0b5;
  --pk2: #e8c0d0;
  --cy: #8ec5c8;
  --pg: #9cbe94;
  --dp: #8878a0;
  --dp2: #b0a0c0;
  --border: rgba(237, 232, 222, 0.07);
  --border2: rgba(237, 232, 222, 0.12);
  --site-stone-bg: url("../assets/images/white-stone.jpg");
  --site-concrete-bg: url("../assets/images/concrete.jpg");
}

  html.light-mode {

    --bg: #f6f5f4;
    --s1: #ffffff;
    --s2: #fbfaf9;
    --s3: #f0efee;
    --ink: #0c0b0a;
    --ink2: rgba(12, 11, 10, 0.80);
    --ink3: rgba(12, 11, 10, 0.45);
    --pk: #d4a0b5;
    --pk2: #e8c0d0;
    --cy: #317a78;
    --pg: #3b6f39;
    --dp: #5a4b73;
    --dp2: #8b78a2;
    --border: rgba(12, 11, 10, 0.08);
    --border2: rgba(12, 11, 10, 0.16);
    background-image: var(--site-stone-bg);
  }

html.light-mode .nav {

  background-image: none;
    position: sticky;
    top: 0;
    z-index: 300;
    height: 86px;
    min-height: 86px;
    border: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    overflow: visible
  }

  html.light-mode .nav .nav-av svg, html.light-mode .nav .nav-search svg, html.light-mode .nav .nb {

    color: var(--ink3);
    stroke: currentColor;
    fill: none
  }

  body, html {

    background: var(--bg);
    background-image: var(--site-stone-bg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    font-weight: 600;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    cursor: var(--fd-cursor-default)
  }

  a {

    text-decoration: none;
    color: inherit
  }

  button {

    font-family: 'DM Sans', sans-serif;
    cursor: var(--fd-cursor-action)
  }

  input, textarea {

    font-family: 'DM Sans', sans-serif;
    cursor: text
  }

  svg {

    stroke-width: 1.6px;
    vector-effect: non-scaling-stroke
  }

.nav {

  background-image: none;
  border: 0;
  position: sticky;
  top: 0;
  z-index: 300;
  height: 86px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  overflow: visible;
  }

html:not(.light-mode) .nav {
  background-image: none;
  position: sticky;
  top: 0;
  z-index: 300;
  height: 86px;
  min-height: 86px;
  border: 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  overflow: visible;
}

  html:not(.light-mode) .nav .nav-av svg, html:not(.light-mode) .nav .nav-search svg, html:not(.light-mode) .nav .nb, html:not(.light-mode) .nav .nb svg, html:not(.light-mode) .nav .nb-label, html:not(.light-mode) .nav .nb-star polygon {

    color: var(--ink);
    stroke: var(--ink);
    fill: var(--ink)
  }

  html:not(.light-mode) #nav-live .nb-icon svg, html:not(.light-mode) .nav-live-mini .nb-icon svg {

    stroke: var(--ink);
    fill: var(--ink);
    color: var(--ink)
  }

  html:not(.light-mode) .nav .nav-search {

    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .03)
  }

  html:not(.light-mode) .nav .nav-av:hover, html:not(.light-mode) .nav .nb:hover {

    color: var(--ink);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6))
  }

.nav::after {
  display: none;
  content: none;
  background-image: none;
  border: 0;
  opacity: 0;
}


  .nav:hover {

    box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .03)
  }

  .nav-logo {

    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 6px;
    color: var(--ink);
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    padding-right: 16px;
    margin-right: 4px
  }

  .nav-logo b {

    color: var(--pk);
    font-weight: 400
  }

  .nav-search {

    background: var(--s2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    height: 28px;
    border-radius: 2px;
    transition: border-color .2s
  }

  .nav-search:focus-within {

    border-color: var(--cy)
  }

  .nav-search svg {

    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: 2;
    flex-shrink: 0
  }

  .nav-search input {

    background: 0 0;
    border: none;
    outline: 0;
    font-size: 13px;
    color: var(--ink);
    width: 140px;
    font-weight: 600
  }

  .nav-search input::placeholder {

    color: var(--ink3)
  }

  .nav-spacer {

    flex: 1
  }

  .nav-icons {

    display: flex;
    align-items: center;
    gap: 0
  }

  .nav-center {

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 320;
    pointer-events: auto;
    gap: 12px;
    padding: 0 6px;
    overflow: visible;
    transition: transform .18s ease
  }

  @keyframes shimmer {
    0% {
      background-position: -200% center
    }
    100% {
      background-position: 200% center
    }
  }

  @keyframes shimmer-sweep {
    0% {
      left: -40%
    }
    100% {
      left: 140%
    }
  }

  @keyframes icon-bob {
    0%,
    100% {
      transform: translateY(0)
    }
    50% {
      transform: translateY(-2px)
    }
  }

  @keyframes nav-glow {
    0%,
    100% {
      filter: drop-shadow(0 0 4px rgba(255, 255, 255, .3))
    }
    50% {
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, .6))
    }
  }

  @keyframes icon-float {
    0%,
    100% {
      transform: translateY(0)
    }
    50% {
      transform: translateY(-3px)
    }
  }

  @keyframes exclaim-pop {
    0%,
    70% {
      transform: scale(.3) translateY(3px);
      opacity: 0
    }
    20% {
      transform: scale(1.4) translateY(-1px);
      opacity: 1
    }
    40% {
      transform: scale(1) translateY(0);
      opacity: 1
    }
    60% {
      transform: scale(1) translateY(0);
      opacity: .9
    }
  }

  @keyframes shout-wave {
    0% {
      opacity: 0;
      transform: translateX(-2px)
    }
    30% {
      opacity: 1;
      transform: translateX(0)
    }
    100% {
      opacity: 0;
      transform: translateX(5px)
    }
  }

  @keyframes eye-blink {
    0%,
    100%,
    88% {
      transform: scaleY(1)
    }
    92%,
    96% {
      transform: scaleY(.08)
    }
  }

  .talk-exclaim-pop {

    animation: exclaim-pop 2.5s ease-in-out infinite;
    transform-origin: 12px 13px
  }

  .shout-1 {

    animation: shout-wave 1.4s ease-out infinite 0s
  }

  .shout-2 {

    animation: shout-wave 1.4s ease-out infinite .35s
  }

  .shout-3 {

    animation: shout-wave 1.4s ease-out infinite .7s
  }

  .eye-blink-svg {

    animation: eye-blink 4s ease-in-out infinite;
    transform-origin: 12px 12px
  }

  @keyframes finger-swipe {
    0% {
      transform: translateY(4px);
      opacity: 0
    }
    30% {
      opacity: 1
    }
    70% {
      transform: translateY(-8px);
      opacity: 1
    }
    100% {
      transform: translateY(-14px);
      opacity: 0
    }
  }

  @keyframes scroll-lines {
    0%,
    100% {
      transform: translateY(0)
    }
    50% {
      transform: translateY(-3px)
    }
  }

  #nav-scrollables .scroll-line-1 {

    animation: scroll-lines 1.2s ease-in-out infinite 0s
  }

  #nav-scrollables .scroll-line-2 {

    animation: scroll-lines 1.2s ease-in-out infinite .15s
  }

  #nav-scrollables .scroll-line-3 {

    animation: scroll-lines 1.2s ease-in-out infinite .3s
  }

  #nav-scrollables .scroll-line-4 {

    animation: scroll-lines 1.2s ease-in-out infinite .45s
  }

  @keyframes live-arc1 {
    0%,
    100% {
      opacity: .3;
      stroke-width: 1.8
    }
    50% {
      opacity: 1;
      stroke-width: 2.2
    }
  }

  @keyframes live-arc2 {
    0%,
    100% {
      opacity: .15;
      stroke-width: 1.8
    }
    50% {
      opacity: .8;
      stroke-width: 2.2
    }
  }

  @keyframes music-wave {
    0%,
    100% {
      opacity: .15;
      transform: scaleX(.7);
      transform-origin: left center
    }
    50% {
      opacity: .9;
      transform: scaleX(1);
      transform-origin: left center
    }
  }

  @keyframes note-fly1 {
    0% {
      opacity: 0;
      transform: translate(0, 0) scale(.6)
    }
    20% {
      opacity: 1
    }
    100% {
      opacity: 0;
      transform: translate(6px, -12px) scale(1)
    }
  }

  @keyframes note-fly2 {
    0% {
      opacity: 0;
      transform: translate(0, 0) scale(.5)
    }
    20% {
      opacity: .8
    }
    100% {
      opacity: 0;
      transform: translate(9px, -10px) scale(.9)
    }
  }

  @keyframes note-fly3 {
    0% {
      opacity: 0;
      transform: translate(0, 0) scale(.4)
    }
    20% {
      opacity: .7
    }
    100% {
      opacity: 0;
      transform: translate(5px, -14px) scale(.8)
    }
  }

  .music-note-1 {

    animation: note-fly1 2.2s ease-out infinite;
    display: inline-block
  }

  .music-note-2 {

    animation: note-fly2 2.2s ease-out infinite .7s;
    display: inline-block
  }

  .music-note-3 {

    animation: note-fly3 2.2s ease-out infinite 1.4s;
    display: inline-block
  }

  .shop-dollar-1 {

    animation: note-fly1 2.5s ease-out infinite;
    display: inline-block
  }

  .shop-dollar-2 {

    animation: note-fly2 2.5s ease-out infinite .8s;
    display: inline-block
  }

  .shop-dollar-3 {

    animation: note-fly3 2.5s ease-out infinite 1.6s;
    display: inline-block
  }

  #nav-live .nb-icon path:nth-child(2) {

    animation: live-arc1 1.4s ease-in-out infinite
  }

  #nav-live .nb-icon path:nth-child(3) {

    animation: live-arc2 1.4s ease-in-out infinite .2s
  }

  @keyframes star-spin {
    0% {
      transform: rotate(0)
    }
    100% {
      transform: rotate(360deg)
    }
  }

  @keyframes star-shadow-pulse {
    0% {
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6))
    }
    50% {
      filter: drop-shadow(0 9px 20px rgba(0, 0, 0, .72))
    }
    100% {
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6))
    }
  }

  .main-nav-btn {

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    border: none;
    background: 0 0;
    cursor: var(--fd-cursor-action);
    position: relative;
    min-width: 72px;
    height: 78px;
    border-radius: 10px;
    transition: transform .18s cubic-bezier(.2, .9, .2, 1), box-shadow .18s, filter .18s;
    will-change: transform, box-shadow
  }

  .main-nav-btn .nb-star-wrap {

    position: relative;
    width: 64px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .18s ease, box-shadow .18s ease
  }

  .main-nav-btn .nb-star {

    display: none
  }

  .main-nav-btn .nb-star polygon {

    display: none
  }

  .nb-icon svg, .nb-star, .nb-star svg, .nb-star-wrap {

    overflow: visible;
    vector-effect: non-scaling-stroke
  }

  .main-nav-btn .nb-icon {

    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: icon-float 2.8s ease-in-out infinite;
    width: 38px;
    height: 38px;
    overflow: visible;
    transition: transform .18s ease
  }

  .main-nav-btn .nb-icon svg {

    width: 30px;
    height: 30px;
    stroke: #000;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s;
    flex-shrink: 0;
    overflow: visible
  }

  .main-nav-btn .nb-label {

    font-family: Sprayerz, cursive;
    font-size: 10px;
    color: #000;
    margin-top: 1px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color .2s;
    white-space: nowrap;
    text-align: center
  }

  .main-nav-btn:hover {

    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45))
  }

  .main-nav-btn:hover .nb-star polygon {

    display: none
  }

  .main-nav-btn:hover .nb-icon svg {

    stroke: #000;
    transform: translateY(-1px) scale(1.06)
  }

  .main-nav-btn:hover .nb-label {

    color: #000;
    transform: translateY(-1px);
    font-weight: 700
  }

  .main-nav-btn.active .nb-star polygon, .main-nav-btn.on .nb-star polygon {

    display: none
  }

  .main-nav-btn.active .nb-icon svg, .main-nav-btn.on .nb-icon svg {

    stroke: #000
  }

  .main-nav-btn.active .nb-label, .main-nav-btn.on .nb-label {

    color: #000
  }

  .main-nav-btn.active, .main-nav-btn.on {

    animation: nav-glow 2s ease-in-out infinite
  }

  #nav-live .nb-icon {
  animation-delay: 0s;
  width: 38px;
  height: 38px;
}

  #nav-live .nb-star-wrap {

    width: 64px;
    height: 42px
  }


  #nav-live .nb-icon svg {

    width: 30px;
    height: 30px;
    stroke-width: 2.2
  }

  #nav-scrollables .nb-icon {

    animation-delay: .4s
  }

  #nav-talk .nb-icon {

    animation-delay: .8s
  }

  #nav-profile .nb-icon {
  animation-delay: 1.2s;
  width: 42px;
  height: 42px;
}

  #nav-community .nb-icon {

    animation-delay: 1.6s
  }

  #nav-music .nb-icon {

    animation-delay: 2s
  }

  #nav-shop-main .nb-icon {

    animation-delay: 2.4s
  }

  .main-nav-btn .main-nav-label {

    display: none
  }

  .main-nav-btn .badge {

    display: none
  }

  #nav-music .nb-icon span, #nav-music .nb-icon svg {

    stroke: #000;
    color: #000;
    fill: none
  }

  html:not(.light-mode) #nav-music .nb-icon .music-note-1, html:not(.light-mode) #nav-music .nb-icon .music-note-2, html:not(.light-mode) #nav-music .nb-icon .music-note-3 {

    color: #fff
  }

  .bra-nav-btn {

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: 0 0;
    cursor: var(--fd-cursor-action);
    height: 80px;
    width: 116px;
    flex-shrink: 0;
    transition: filter .2s
  }

  .bra-svg {

    width: 110px;
    height: auto;
    overflow: visible;
    display: block
  }

  .bra-cup-fill {

    fill: var(--s2);
    stroke: #000;
    stroke-width: 1.3;
    stroke-dasharray: 3.5 2;
    stroke-linecap: round;
    transition: fill .2s, stroke .2s;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5))
  }

  .bra-band {

    fill: var(--s2);
    stroke: #000;
    stroke-width: 1;
    transition: fill .2s, stroke .2s
  }

  .bra-strap {

    stroke: #000;
    stroke-width: 1.3;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .bra-gore {

    stroke: #000;
    stroke-width: .9;
    stroke-dasharray: 2 2;
    opacity: .4;
    transition: stroke .2s
  }

  .bra-lace-top {

    fill: none;
    stroke: var(--pk);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .85;
    transition: stroke .2s, opacity .2s
  }

  .bra-inner-lace {
  fill: none;
  stroke: var(--pk);
  stroke-width: .75;
  stroke-dasharray: 1.6 1.8;
  stroke-linecap: round;
  opacity: .55;
  transition: stroke .2s;
}

  .bra-underwire {

    fill: none;
    stroke: var(--ink3);
    stroke-width: .85;
    opacity: .55;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .bra-band-lace {

    fill: none;
    stroke: var(--pk);
    stroke-width: .75;
    stroke-dasharray: 2 1.8;
    stroke-linecap: round;
    opacity: .5;
    transition: stroke .2s
  }

  .bra-bow-loop {

    fill: none;
    stroke: var(--pk);
    stroke-width: .85;
    stroke-linejoin: round;
    transition: stroke .2s
  }

  .bra-bow-loop-fill {

    fill: var(--s2);
    stroke: var(--pk);
    stroke-width: .85;
    stroke-linejoin: round;
    transition: fill .2s, stroke .2s
  }

  .bra-bow-loop-crease {

    fill: none;
    stroke: var(--pk2);
    stroke-width: .5;
    stroke-linecap: round;
    opacity: .45
  }

  .bra-bow-knot-fill {

    fill: var(--pk);
    stroke: none;
    opacity: .88;
    transition: fill .2s
  }

  .bra-bow-knot-stitch {

    fill: none;
    stroke: var(--pk2);
    stroke-width: .5;
    stroke-linecap: round;
    opacity: .65
  }

  .bra-bow-knot-dot {

    fill: var(--s2);
    stroke: var(--pk);
    stroke-width: .5
  }

  .bra-bow-ribbon {
  stroke: var(--pk);
  stroke-width: 1.2;
  stroke-linecap: round;
  fill: none;
  opacity: .85;
  vector-effect: non-scaling-stroke;
}

  .bra-bow-tip {
  stroke: var(--pk);
  stroke-width: .9;
  fill: none;
  stroke-linecap: round;
  opacity: .7;
}

  @keyframes ribbon-fall {
    0% {
      transform: translateY(0) rotate(0)
    }
    50% {
      transform: translateY(2px) rotate(-1.5deg)
    }
    100% {
      transform: translateY(0) rotate(0)
    }
  }

  @keyframes ribbon-sway {
    0% {
      transform: translateX(0)
    }
    50% {
      transform: translateX(1.5px) rotate(1.5deg)
    }
    100% {
      transform: translateX(0)
    }
  }

  .ribbon-1 {

    transform-origin: 59px 36px;
    animation: ribbon-fall 2.6s ease-in-out infinite, ribbon-sway 3.4s ease-in-out infinite
  }

  .ribbon-2 {

    transform-origin: 61px 36px;
    animation: ribbon-fall 3s ease-in-out infinite .3s, ribbon-sway 3.8s ease-in-out infinite .25s
  }

  .bra-nav-btn:hover .bra-lace-top {

    stroke: rgba(255, 255, 255, 0.75);
    opacity: .8
  }

  .bra-nav-btn:hover .bra-inner-lace {

    stroke: rgba(255, 255, 255, 0.5)
  }

  .bra-nav-btn:hover .bra-underwire {

    stroke: rgba(255, 255, 255, 0.45)
  }

  .bra-nav-btn:hover .bra-band-lace {

    stroke: rgba(255, 255, 255, 0.6)
  }

  .bra-nav-btn:hover .bra-bow-loop, .bra-nav-btn:hover .bra-bow-loop-fill {

    fill: none;
    stroke: var(--pk2)
  }

  .bra-nav-btn:hover .bra-bow-knot-fill {

    fill: var(--pk2)
  }

  .bra-nav-btn:hover .bra-bow-ribbon, .bra-nav-btn:hover .bra-bow-tip {

    stroke: var(--pk2)
  }

  .bra-nav-btn.active .bra-bow-loop, .bra-nav-btn.active .bra-bow-loop-fill, .bra-nav-btn.on .bra-bow-loop, .bra-nav-btn.on .bra-bow-loop-fill {

    fill: url("#zebra-nav-pattern");
    stroke: none
  }

  .bra-left-content {

    position: absolute;
    left: 13px;
    top: 47%;
    transform: translateY(-50%);
    color: var(--ink2);
    transition: color .2s;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .bra-right-content {

    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink2);
    transition: color .2s;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-top: 1px
  }

  .bra-shop-label {

    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink)
  }

  .bra-nav-btn:hover {

    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .7))
  }

  .bra-nav-btn:hover .bra-cup-fill {

    fill: var(--s3);
    stroke: #000;
    stroke-dasharray: none
  }

  .bra-nav-btn:hover .bra-band {

    fill: var(--s3);
    stroke: #000
  }

  .bra-nav-btn:hover .bra-gore, .bra-nav-btn:hover .bra-strap {

    stroke: #000
  }

  .bra-nav-btn:hover .bra-left-content, .bra-nav-btn:hover .bra-right-content {

    color: #fff
  }

  .bra-nav-btn.active .bra-cup-fill, .bra-nav-btn.on .bra-cup-fill {

    fill: url("#zebra-nav-pattern");
    stroke: none;
    stroke-dasharray: none
  }

  .bra-nav-btn.active .bra-band, .bra-nav-btn.on .bra-band {

    fill: url("#zebra-nav-pattern");
    stroke: none
  }

  .bra-nav-btn.active .bra-left-content, .bra-nav-btn.active .bra-right-content, .bra-nav-btn.on .bra-left-content, .bra-nav-btn.on .bra-right-content {

    color: var(--bg)
  }

  .bra-nav-btn.active, .bra-nav-btn.on {

    animation: nav-glow 2s ease-in-out infinite
  }

  #nav-profile {

    width: 82px
  }

  #nav-profile .nb-star-wrap {

    width: 70px;
    height: 42px
  }


  #nav-profile .nb-icon svg {

    width: 34px;
    height: 34px
  }

  #nav-profile .nb-label {

    font-size: 11.5px;
    letter-spacing: 1.5px
  }

  .nav-live-mini {

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border: none;
    background: 0 0;
    cursor: var(--fd-cursor-action);
    position: relative;
    width: 40px;
    height: 80px;
    transition: filter .2s
  }

  .nav-live-mini .nb-star-wrap {

    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
  }

  .nav-live-mini .nb-star {

    position: absolute;
    inset: 0;
    transition: opacity .2s, filter .2s
  }

  .nav-live-mini .nb-star polygon {

    fill: var(--s2);
    stroke: var(--border2);
    stroke-width: 1.5;
    transition: fill .2s, stroke .2s;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7))
  }

  .nav-live-mini .nb-icon {

    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: icon-float 2.8s ease-in-out infinite;
    width: 20px;
    height: 20px;
    overflow: visible
  }

  .nav-live-mini .nb-icon svg {

    width: 16px;
    height: 16px;
    stroke: var(--ink3);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s;
    overflow: visible
  }

  .nav-live-mini .nb-label {

    font-family: Sprayerz, cursive;
    font-size: 6.5px;
    color: #000;
    margin-top: 1px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color .2s;
    white-space: nowrap;
    text-align: center
  }

  .nav-live-mini:hover {

    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .7))
  }

  .nav-live-mini:hover .nb-star polygon {

    fill: var(--s3);
    stroke: rgba(255, 255, 255, 0.9)
  }

  .nav-live-mini:hover .nb-icon svg {

    stroke: #fff
  }

  .nav-live-mini:hover .nb-label {

    color: #fff
  }

  .nav-live-mini.active .nb-star polygon, .nav-live-mini.on .nb-star polygon {

    fill: url("#zebra-nav-pattern");
    stroke: none
  }

  .nav-live-mini.active .nb-icon svg, .nav-live-mini.on .nb-icon svg {

    stroke: var(--bg)
  }

  .nav-live-mini.active .nb-label, .nav-live-mini.on .nb-label {

    color: var(--ink)
  }

  .nav-live-mini.active, .nav-live-mini.on {

    animation: nav-glow 2s ease-in-out infinite
  }

  .nav-profile {

    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--s2);
    border: 1px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: var(--fd-cursor-action);
    transition: transform .18s, box-shadow .18s, border-color .18s;
    color: var(--ink3);
    font-size: 16px
  }

  .nav-profile svg {

    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6
  }

  .nav-profile.active, .nav-profile.on {

    transform: scale(1.15);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 10px rgba(212, 160, 181, .06) inset;
    border-color: var(--pk);
    color: var(--pk)
  }

  .nb {

    background: 0 0;
    border: none;
    color: var(--ink3);
    padding: 0 9px;
    height: 80px;
    display: flex;
    align-items: center;
    transition: color .15s;
    position: relative
  }

  .nb.on, .nb:hover {

    color: var(--ink)
  }

  .nb svg {

    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5
  }

  .nb-dot {

    position: absolute;
    top: 9px;
    right: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pk);
    border: 1px solid var(--bg)
  }

  .nav-av {

    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--s2);
    border: 1px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: var(--fd-cursor-action);
    margin-left: 4px;
    transition: border-color .2s
  }

  #nav-settings-btn {

    border-left: 1px solid var(--border);
    padding-left: 12px;
    margin-left: 8px
  }

  .nav-av:hover {

    border-color: var(--pk)
  }

  .nav-av svg {

    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: 1.5
  }

  .nav-av img {

    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .page {

    display: none
  }

  .page.active {

    display: block
  }

  .shop-page {

    position: relative;
    width: 100%;
    height: calc(100dvh - 80px);
    min-height: 540px;
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-sizing: border-box;
    isolation: auto
  }

  .shop-page.active {

    display: block
  }

  .shop-frame-shell {

    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden
  }

  .shop-viewport {

    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 2;
    width: min(calc(100% - 24px), calc((100dvh - 80px) * 16 / 9));
    height: 100%;
    transform: translateX(-50%);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 3px;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.24)
  }

  .shop-embed {

    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent
  }

  .shop-graffiti-border {

    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    background-image: url('../assets/images/fame-doll-graffiti-border-transparent.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%
  }

  .shop-embed-fallback {

    display: grid;
    min-height: 70vh;
    place-items: center;
    color: var(--ink)
  }

  .three-col {

    display: grid;
    grid-template-columns: 230px 1fr;
    grid-template-rows: auto;
    min-height: auto;
    border-top: none
  }

  .sidebar-left {

    border-right: 1px solid var(--border);
    background: var(--s1);
    position: relative;
    height: auto;
    overflow-y: visible;
    display: flex;
    flex-direction: column
  }

  .sidebar-left::-webkit-scrollbar {

    display: none
  }

  .sl-avatar-block {

    position: relative;
    background: var(--s2);
    border-bottom: 1px solid var(--border);
    overflow: hidden
  }

  .sl-avatar-block::before {

    content: '';
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(ellipse 10px 13px at 12px 14px, rgba(136, 120, 160, .08) 0, rgba(136, 120, 160, .08) 28%, transparent 28%);
    background-size: 24px 26px;
    pointer-events: none
  }

  .sl-avatar-wrap {

    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 16px
  }

  .sl-avatar {

    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--s3);
    border: 2px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    cursor: var(--fd-cursor-action);
    box-shadow: none;
    transition: border-color .2s;
    margin-bottom: 12px;
    position: relative
  }

  .sl-avatar:hover {

    border-color: var(--pk)
  }

  .sl-avatar svg {

    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: .9
  }

  .sl-avatar img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%
  }

  .sl-avatar-inner {

    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .sl-av-edit-badge {

    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--s1);
    border: 1.5px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .2s;
    z-index: 2;
    cursor: var(--fd-cursor-action)
  }

  .sl-avatar:hover .sl-av-edit-badge {

    opacity: 1;
    border-color: var(--pk)
  }

  .sl-av-edit-badge svg {

    width: 9px;
    height: 9px;
    fill: none;
    stroke: var(--pk);
    stroke-width: 2
  }

  .sl-name {

    font-family: var(--display-name-font, Sprayerz, sans-serif);
    font-size: 26px;
    letter-spacing: 3px;
    color: var(--ink);
    background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 38%, rgba(255, 255, 255, .72) 48%, var(--ink) 58%, var(--ink) 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: .95;
    text-align: center;
    animation: fame-title-shine 5.5s ease-in-out infinite
  }

  html[data-display-name-font="rock-salt"] .sl-name {

    font-size: 24px;
    letter-spacing: .1px;
    line-height: 1.45;
    padding: .08em .12em;
    white-space: nowrap
  }

  body.dark-mode #page-profile, html.dark-mode #page-profile, html:not(.light-mode) #page-profile {

    --ink: #0c0b0a;
    --ink2: rgba(12, 11, 10, 0.72);
    --ink3: rgba(12, 11, 10, 0.46);
    color: var(--ink);
  }

  body.dark-mode #page-profile .sl-name, html.dark-mode #page-profile .sl-name, html:not(.light-mode) #page-profile .sl-name {

    color: var(--ink);
    background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 38%, rgba(255, 255, 255, .86) 48%, var(--ink) 58%, var(--ink) 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  body.dark-mode #page-profile .sl-realname, body.dark-mode #page-profile #sl-origin, body.dark-mode #page-profile .np-title, body.dark-mode #page-profile .sl-bio-label, body.dark-mode #page-profile .sl-bio-text, html.dark-mode #page-profile .sl-realname, html.dark-mode #page-profile #sl-origin, html.dark-mode #page-profile .np-title, html.dark-mode #page-profile .sl-bio-label, html.dark-mode #page-profile .sl-bio-text, html:not(.light-mode) #page-profile .sl-realname, html:not(.light-mode) #page-profile #sl-origin, html:not(.light-mode) #page-profile .np-title, html:not(.light-mode) #page-profile .sl-bio-label, html:not(.light-mode) #page-profile .sl-bio-text {

    color: var(--ink);
  }

  body.dark-mode #page-profile .np-artist-name, body.dark-mode #page-profile .np-label, html.dark-mode #page-profile .np-artist-name, html.dark-mode #page-profile .np-label, html:not(.light-mode) #page-profile .np-artist-name, html:not(.light-mode) #page-profile .np-label {

    color: var(--ink2);
  }

  @keyframes fame-title-shine {
    0%,
    72%,
    100% {
      background-position: 140% 0
    }
    84% {
      background-position: -40% 0
    }
  }

  .sl-name b {

    color: var(--pk);
    font-weight: 400
  }

  .semantic-context {

    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
  }

  .sl-realname {

    font-family: 'Cormorant Garamond', serif;
    font-style: normal;
    font-weight: 300;
    font-size: 11px;
    color: var(--ink3);
    margin-top: 4px;
    text-align: center;
    letter-spacing: 4px;
    text-transform: uppercase
  }

  .sl-realname:empty {

    display: none
  }

  #sl-origin:empty {

    display: none
  }

  .sl-follow-count {

    display: inline-block;
    margin-top: 12px
  }

  .fans-star-wrap {

    text-align: center;
    width: 150px;
    height: 132px;
    margin: 8px auto 0;
    cursor: var(--fd-cursor-action);
    display: block;
    position: relative;
    isolation: isolate
  }

  .fans-star-wrap::before {

    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: polygon(50% 6%, 60.7% 37.9%, 92% 37.9%, 67.3% 56.8%, 77.3% 88.6%, 50% 70.5%, 22.7% 88.6%, 32.7% 56.8%, 8% 37.9%, 39.3% 37.9%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 132'%3E%3Cpolygon points='75,8 91,50 138,50 101,75 116,117 75,93 34,117 49,75 12,50 59,50' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 132'%3E%3Cpolygon points='75,8 91,50 138,50 101,75 116,117 75,93 34,117 49,75 12,50 59,50' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background:
      radial-gradient(circle at 30% 18%, rgba(255,255,255,.82), transparent 38%),
      linear-gradient(145deg, rgba(255,255,255,.58), rgba(190,197,204,.22) 44%, rgba(255,255,255,.34) 68%, rgba(139,148,157,.2));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.86),
      inset 0 -8px 16px rgba(77,84,91,.08);
    backdrop-filter: blur(9px) saturate(1.24);
    -webkit-backdrop-filter: blur(9px) saturate(1.24);
    filter: drop-shadow(0 8px 9px rgba(0,0,0,.2));
    pointer-events: none
  }

  #fans-star-svg {

    display: block;
    margin: 0 auto;
    overflow: visible;
    position: relative;
    z-index: 1
  }

  .fans-shadow-el {
    fill: rgba(0, 0, 0, .14)
  }

  .fans-star-g {
    filter:
      drop-shadow(-1px 0 rgba(255,172,206,.18))
      drop-shadow(1px 0 rgba(154,194,224,.16))
      drop-shadow(0 2px 2px rgba(0,0,0,.12))
      drop-shadow(0 1px 0 rgba(255,255,255,.92))
  }


  .fans-star-poly {

    fill: url('#fans-star-glass');
    stroke: url('#fans-star-edge');
    stroke-width: 2;
    stroke-linejoin: round
  }

  .fans-star-inner {

    fill: url('#fans-star-glow');
    stroke: rgba(255, 255, 255, .7);
    stroke-width: .85;
    opacity: .68;
    pointer-events: none
  }

  .fans-star-bevel {

    fill: none;
    stroke: rgba(20, 23, 26, .28);
    stroke-width: .75;
    stroke-linejoin: round;
    opacity: .8;
    pointer-events: none
  }

  .fans-star-reflections {

    pointer-events: none
  }

  .fans-star-reflection {

    fill: rgba(255, 255, 255, .44)
  }

  .fans-star-reflection-secondary {

    fill: rgba(255, 255, 255, .16)
  }

  .fans-sparkle {

    display: none
  }

  .fans-star-num {

    transform-box: fill-box;
    transform-origin: center;
    animation: fans-num-drift 3.2s ease-in-out infinite
  }

  @keyframes fans-num-drift {
    0%,
    100% {
      transform: translateY(0);
      opacity: 1
    }
    50% {
      transform: translateY(-2px);
      opacity: .85
    }
  }

  .fans-star-label {

    transform-box: fill-box;
    transform-origin: center;
    animation: fans-label-drift 3.2s ease-in-out infinite
  }

  @keyframes fans-label-drift {
    0%,
    100% {
      transform: translateY(0);
      opacity: .6
    }
    50% {
      transform: translateY(-1px);
      opacity: .45
    }
  }

  .sl-info {

    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 5px
  }

  .sl-row {

    display: flex;
    align-items: center;
    gap: 8px
  }

  .sl-row-label {

    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink3);
    flex-shrink: 0;
    width: 62px;
    font-weight: 700
  }

  .sl-row-val {

    font-size: 11px;
    color: var(--ink2)
  }

  .sl-row-val b {

    color: var(--ink);
    font-weight: 500
  }

  .sl-lvl {

    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--pk);
    background: rgba(212, 160, 181, .08);
    border: 1px solid rgba(212, 160, 181, .2);
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-block
  }

  .sl-lvl-block {

    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px
  }

  .lvl-top {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0
  }

  .lvl-val {

    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: url('../assets/images/zebra-bg.jpg') center/cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: saturate(0) contrast(3)
  }

  .lvl-range {

    font-family: 'DM Mono', monospace;
    font-size: 9px;
    color: var(--ink3);
    display: flex;
    gap: 6px;
    align-items: center
  }

  .lvl-widget {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
  }

  .lvl-visual {

    width: 140px;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0
  }

  .lvl-bar {

    --h: 10px;
    flex: 1;
    height: var(--h);
    background: rgba(255, 255, 255, .04);
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border2)
  }

  .lvl-bar-fill {

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: url('../assets/images/zebra-bg.jpg') center/cover repeat;
    border-radius: 999px;
    filter: saturate(0);
    transition: width 1.2s cubic-bezier(.2, .9, .2, 1);
    animation: zebra-scroll 3s linear infinite
  }

  @keyframes zebra-scroll {
    0% {
      background-position: 0 0
    }
    100% {
      background-position: 60px 0
    }
  }

  .lvl-bar-label {

    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    color: var(--ink3);
    pointer-events: none
  }

  .lvl-endnums {

    display: flex;
    align-items: center
  }

  .lvl-endnums .num {

    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 1px
  }

  .lvl-endnums .num.left {

    color: var(--ink)
  }

  .lvl-endnums .num.right {

    color: var(--ink3)
  }

  .lvl-bar-fill::after {

    content: '';
    position: absolute;
    left: -40%;
    top: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
    transform: skewX(-20deg);
    animation: shimmer-sweep 1.6s linear infinite
  }

  .lvl-tooltip {

    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--s2);
    border: 1px solid var(--border);
    padding: 5px 8px;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    top: -32px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s
  }

  .lvl-wrapper {

    position: relative
  }

  .lvl-wrapper:hover .lvl-tooltip {

    opacity: 1;
    transform: translateX(-50%) translateY(-12px)
  }

  .lvl-wrapper:focus .lvl-tooltip, .lvl-wrapper:focus-within .lvl-tooltip, .lvl-wrapper:active .lvl-tooltip {

    opacity: 1;
    transform: translateX(-50%) translateY(-12px)
  }

  .sl-flag {

    font-size: 14px
  }

  .sl-song-block {

    padding: 12px 14px;
    border-bottom: 1px solid var(--border)
  }

  @keyframes glass-shine {
    0% {
      transform: translateX(-120%) skewX(-15deg)
    }
    100% {
      transform: translateX(300%) skewX(-15deg)
    }
  }

  .np-widget {

    position: relative;
    overflow: hidden;
    z-index: auto;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, .02) 50%, rgba(0, 0, 0, .1) 100%), var(--s2);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .2)
  }

  .np-widget::after {

    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .07) 40%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .07) 60%, transparent 100%);
    animation: glass-shine 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 5
  }

  .np-widget::before {

    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0, rgba(255, 255, 255, .01) 40%, transparent 100%);
    pointer-events: none;
    z-index: 4;
    border-radius: inherit
  }

  .panties-widget {

    position: relative;
    margin: 8px 14px;
    padding: 0;
    border: none;
    background: 0 0;
    cursor: var(--fd-cursor-action);
    display: block;
    transition: filter .2s;
    filter: none;
    z-index: 10
  }

  .panties-widget:hover {

    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .55))
  }

  .sl-social-actions {

    width: calc(100% - 28px);
    margin: 0 14px 10px;
    padding: 4px 2px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    z-index: 12
  }

  .sl-social-action {

    min-height: 28px;
    border: 1px solid rgba(255, 255, 255, .54);
    border-radius: 999px;
    background:
      radial-gradient(circle at 18% 18%, rgba(255,255,255,.9), rgba(255,255,255,0) 34%),
      linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .26));
    color: var(--ink);
    cursor: var(--fd-cursor-action);
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .55px;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 5px 12px rgba(0, 0, 0, .12);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px
  }

  .sl-social-symbol {

    width: 14px;
    height: 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 11, 10, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68);
    font-size: 9px;
    line-height: 1;
    flex: 0 0 14px
  }

  .sl-social-symbol svg {

    width: 10px;
    height: 10px;
    fill: currentColor;
    stroke: none
  }

  .sl-social-action:hover {

    transform: translateY(-1px);
    border-color: rgba(255, 172, 206, .76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 5px 12px rgba(0, 0, 0, .16)
  }

  .panties-svg {

    width: 100%;
    height: auto;
    overflow: visible;
    display: block
  }

  /* ensure Now Playing widget sits above the panties widget on mobile/desktop */

  .sl-song-block .np-widget {

    position: relative;
    z-index: 40
  }

  .panties-body {

    fill: none;
    stroke: #000;
    stroke-width: 1.3;
    stroke-dasharray: 3.5 2;
    stroke-linecap: round;
    transition: fill .2s, stroke .2s
  }

  .panties-band {

    fill: none;
    stroke: #000;
    stroke-width: 1;
    transition: fill .2s, stroke .2s
  }

  .panties-band-top {

    fill: none;
    stroke: #000;
    stroke-width: 1.8;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .panties-lace {

    fill: none;
    stroke: var(--pk);
    stroke-width: .85;
    stroke-dasharray: 2.5 2;
    opacity: .6;
    stroke-linecap: round
  }

  .panties-gore {

    stroke: #000;
    stroke-width: .9;
    stroke-dasharray: 2 2;
    opacity: .4;
    fill: none
  }

  .panties-bow-loop {

    fill: none;
    stroke: var(--pk2);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .95;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25))
  }

  .panties-bow-knot {

    fill: none;
    stroke: var(--pk);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round
  }

  .panties-bow-ribbon {
  fill: none;
  stroke: var(--pk);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: .9;
}

  .panties-bow-tip {
  fill: none;
  stroke: var(--pk);
  stroke-width: .9;
  stroke-linecap: round;
  opacity: .75;
}

  .panties-bow-dot {

    fill: var(--pk);
    stroke: none
  }

  .panties-label {

    font-family: 'DM Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    fill: var(--ink2);
    transition: fill .2s
  }

  .panties-label-top {

    fill: var(--ink);
    font-size: 9.2px;
    font-weight: 900;
    letter-spacing: 0;
    paint-order: stroke fill;
    stroke: rgba(255, 255, 255, .62);
    stroke-width: .42px
  }

  .panties-label-main {

    font-size: 9.6px;
    letter-spacing: 1.2px;
    font-weight: 900
  }

  .panties-title-art {

    pointer-events: none
  }

  .panties-string {

    fill: none;
    stroke: #000;
    stroke-width: 1;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .panties-widget:hover .panties-string {

    stroke: #000
  }

  .panties-widget:hover .panties-body {

    fill: none;
    stroke: #000;
    stroke-dasharray: none
  }

  .panties-widget:hover .panties-band {

    fill: none;
    stroke: #000
  }

  .panties-widget:hover .panties-band-top {

    stroke: #000
  }

  .panties-widget:hover .panties-lace {

    stroke: rgba(255, 255, 255, 0.65)
  }

  .panties-widget:hover .panties-gore {

    stroke: #000
  }

  .panties-widget:hover .panties-bow-loop {

    stroke: var(--s3)
  }

  .panties-widget:hover .panties-bow-knot, .panties-widget:hover .panties-bow-ribbon, .panties-widget:hover .panties-bow-tip {

    stroke: var(--pk2)
  }

  .panties-widget:hover .panties-bow-dot {

    fill: var(--pk2)
  }

  .panties-widget:hover .panties-label {

    fill: var(--ink)
  }

  .bra-scallop {

    fill: none;
    stroke: var(--pk);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s
  }

  .bra-pearl {

    fill: var(--pk);
    opacity: .5;
    transition: fill .2s, opacity .2s
  }

  .bra-seam {

    fill: none;
    stroke: #000;
    stroke-width: .55;
    stroke-dasharray: 1.5 2.5;
    opacity: .38;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .bra-strap-ring {

    fill: none;
    stroke: #000;
    stroke-width: 1.1;
    transition: stroke .2s
  }


  .bra-floral {

    fill: var(--pk);
    opacity: .3;
    transition: fill .2s
  }

  .bra-floral-petal {

    fill: none;
    stroke: var(--pk);
    stroke-width: .85;
    transition: stroke .2s
  }

  .bra-nav-btn:hover .bra-floral-petal {

    stroke: rgba(255, 255, 255, 0.65)
  }

  .bra-nav-btn:hover .bra-scallop {

    stroke: rgba(255, 255, 255, 0.8)
  }

  .bra-nav-btn:hover .bra-pearl {

    fill: #fff;
    opacity: .8
  }

  .bra-nav-btn:hover .bra-seam {

    stroke: #000
  }

  .bra-nav-btn:hover .bra-strap-ring {

    stroke: #000
  }

  .bra-nav-btn:hover .bra-floral {

    fill: #fff;
    opacity: .5
  }

  .bra-nav-btn.active .bra-pearl, .bra-nav-btn.on .bra-pearl {

    fill: var(--bg)
  }


  .bra-nav-btn:hover .bra-bow-ribbon {

    stroke: var(--pk2)
  }

  .bra-nav-btn:hover .bra-bow-tip {

    stroke: var(--pk2)
  }

  .panties-scallop {

    fill: none;
    stroke: var(--pk);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s
  }

  .panties-pearl {

    fill: var(--pk);
    opacity: .45;
    transition: fill .2s, opacity .2s
  }

  .panties-seam {

    fill: none;
    stroke: var(--ink3);
    stroke-width: .55;
    stroke-dasharray: 2 3;
    opacity: .32;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .panties-bow-loop-fill {

    fill: none;
    stroke: var(--pk);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: stroke .2s
  }

  .panties-bow-loop-crease {

    fill: none;
    stroke: var(--pk2);
    stroke-width: .65;
    stroke-linecap: round;
    opacity: .6
  }

  .panties-bow-knot-fill {

    fill: var(--pk);
    stroke: none;
    opacity: .9;
    transition: fill .2s
  }

  .panties-bow-knot-stitch {

    fill: none;
    stroke: var(--pk2);
    stroke-width: .55;
    stroke-linecap: round;
    opacity: .75
  }

  .panties-lace-inner {

    fill: none;
    stroke: var(--pk);
    stroke-width: .65;
    stroke-dasharray: 1.4 2;
    stroke-linecap: round;
    opacity: .38;
    transition: stroke .2s
  }


  .panties-widget:hover .panties-bow-ribbon {

    stroke: var(--pk2)
  }

  .panties-widget:hover .panties-bow-tip {

    stroke: var(--pk2)
  }

  .panties-widget:hover .panties-scallop {

    stroke: rgba(255, 255, 255, 0.8)
  }

  .panties-widget:hover .panties-pearl {

    fill: #fff;
    opacity: .7
  }

  .panties-widget:hover .panties-seam {

    stroke: rgba(255, 255, 255, 0.3)
  }

  .panties-widget:hover .panties-bow-loop-fill {

    stroke: var(--pk2)
  }

  .panties-widget:hover .panties-bow-knot-fill {

    fill: var(--pk2)
  }

  .panties-widget:hover .panties-lace-inner {

    stroke: rgba(255, 255, 255, 0.4)
  }

  .panties-widget:hover .panties-bow-loop-crease {

    stroke: rgba(255, 255, 255, 0.55)
  }

  .age18-badge {

    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
  }

  .age18-ring {

    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed var(--pk);
    animation: spin 5s linear infinite;
    opacity: .8
  }

  .age18-ring2 {

    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px dashed var(--pk2);
    animation: spin 5s linear infinite reverse;
    opacity: .5
  }

  .age18-inner {

    font-family: 'DM Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    color: var(--pk);
    letter-spacing: 0;
    text-align: center;
    line-height: 1;
    animation: age18-pulse 2.2s ease-in-out infinite;
    position: relative;
    z-index: 1
  }

  @keyframes age18-pulse {
    0%,
    100% {
      color: var(--pk);
      text-shadow: 0 0 4px rgba(212, 160, 181, .4)
    }
    50% {
      color: var(--pk2);
      text-shadow: 0 0 10px rgba(232, 192, 208, .9), 0 0 20px rgba(212, 160, 181, .5)
    }
  }

  .np-widget .np-notes {
  position: absolute;
  right: 38px;
  top: 7px;
  width: 42px;
  height: 28px;
  pointer-events: none;
  display: block;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  transform-origin: center;
  opacity: 0;
  transition: opacity .28s ease;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  max-width: 42px;
  max-height: 28px;
  margin: 0;
  padding: 0;
  flex: 0 0 0;
  overflow: visible;
  contain: paint;
}

  .np-widget .np-notes span {
  display: block;
  color: var(--pk2);
  line-height: 1;
  font-size: 11px;
  transform-origin: center;
  will-change: transform, opacity;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
  position: absolute;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
}

  .np-widget .np-notes .music-note-1 {

    left: 2px;
    top: 12px
  }

  .np-widget .np-notes .music-note-2 {

    left: 16px;
    top: 4px
  }

  .np-widget .np-notes .music-note-3 {

    left: 30px;
    top: 13px
  }

  .np-widget.playing .np-notes {

    opacity: 1
  }

  .np-widget.playing .np-notes .music-note-1 {

    animation: note-fly1 1.8s ease-out infinite
  }

  .np-widget.playing .np-notes .music-note-2 {

    animation: note-fly2 1.9s ease-out infinite .18s
  }

  .np-widget.playing .np-notes .music-note-3 {

    animation: note-fly3 2s ease-out infinite .36s
  }

  .np-widget-inner {
  padding: 11px 12px 12px;
  position: relative;
  overflow: hidden;
}

  .np-top-row {

    display: flex;
    position: relative;
    z-index: 2;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
  }

  .np-label-row {

    display: flex;
    align-items: center;
    gap: 5px
  }

  .np-label {

    font-family: 'DM Mono', monospace;
    font-size: 6px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink3)
  }

  .np-mini-bars {

    display: flex;
    gap: 1.5px;
    align-items: flex-end;
    height: 7px
  }

  .np-mini-bar {

    width: 2px;
    background: var(--ink3);
    border-radius: 1px;
    opacity: .6;
    animation: npb var(--s) ease-in-out infinite alternate var(--d);
    animation-play-state: paused
  }

  .np-widget.playing .np-mini-bar {

    animation-play-state: running
  }

  .np-mini-bar:nth-child(1) {

    --s: .6s;
    --d: 0s;
    height: 3px
  }

  .np-mini-bar:nth-child(2) {

    --s: .4s;
    --d: .1s;
    height: 6px
  }

  .np-mini-bar:nth-child(3) {

    --s: .7s;
    --d: .05s;
    height: 4px
  }

  @keyframes npb {
    from {
      transform: scaleY(.2)
    }
    to {
      transform: scaleY(1)
    }
  }

  .np-play-btn {

    background: 0 0;
    border: none;
    color: var(--ink3);
    cursor: var(--fd-cursor-action);
    display: flex;
    align-items: center;
    padding: 0;
    transition: color .15s
  }

  .np-play-btn:hover {

    color: var(--ink)
  }

  .np-play-btn svg {

    width: 13px;
    height: 13px
  }

  .np-title {

    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .15px;
    color: var(--ink);
    line-height: .92;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-transform: none;
    margin-bottom: 3px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 5px 16px rgba(0, 0, 0, .22)
  }

  .np-artist-name {

    font-family: 'DM Mono', monospace;
    font-size: 8.5px;
    font-weight: 700;
    color: var(--ink3);
    letter-spacing: 1.2px;
    line-height: 1;
    margin-bottom: 9px;
    text-transform: uppercase;
    opacity: .86
  }

  .np-progress {

    height: 6px;
    background: var(--border);
    border-radius: 999px;
    position: relative;
    overflow: hidden
  }

  .np-progress-fill {

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 38%;
    background: url('../assets/images/zebra-bg.jpg') center/120px;
    filter: saturate(0);
    border-radius: 999px;
    animation: zebra-scroll 3s linear infinite;
    animation-play-state: paused;
    transition: width .08s linear
  }

  .np-widget.playing .np-progress-fill {

    animation-play-state: running
  }

  .np-links {

    display: none;
    flex-direction: row;
    border-top: 1px solid var(--border)
  }

  .np-stream-btn {

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 0;
    flex: 1;
    cursor: var(--fd-cursor-action);
    transition: background .15s;
    border: none;
    background: 0 0;
    color: var(--ink3);
    border-right: 1px solid var(--border)
  }

  .np-stream-btn:last-child {

    border-right: none
  }

  .np-stream-btn:hover {

    background: rgba(237, 232, 222, .04);
    color: var(--ink2)
  }

  .np-stream-btn:hover svg {

    filter: saturate(0) brightness(1.4)
  }

  .sl-waveform {

    display: none
  }

  .np-stream-btn svg {

    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: saturate(0)
  }

  .sl-bio-block {

    padding: 10px 14px;
    flex: 1
  }

  .sl-bio-label {

    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ink3);
    display: block;
    margin-bottom: 6px
  }

  .sl-bio-text {

    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink2);
    white-space: pre-line;
    font-weight: 600
  }

  .sl-actions {

    padding: 10px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 6px;
    margin-top: auto
  }

  .sl-btn {

    flex: 1;
    padding: 7px 0;
    text-align: center;
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: var(--fd-cursor-action);
    transition: all .15s;
    border-radius: 1px
  }

  .sl-btn.primary {

    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink)
  }

  .sl-btn.primary:hover {

    background: var(--pk2);
    border-color: var(--pk2)
  }

  .sl-btn.ghost {

    background: 0 0;
    color: var(--ink2);
    border: 1px solid var(--border2)
  }

  .sl-btn.ghost:hover {

    border-color: var(--ink2);
    color: var(--ink)
  }

  .sl-btn.following {

    background: 0 0;
    color: var(--ink2);
    border: 1px solid var(--border2)
  }

  .sl-stat:last-child {

    border-right: none
  }

  .col-center {

    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column
  }

  .feat-block {

    border-bottom: 1px solid var(--border)
  }

  .feat-topbar {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--s1)
  }

  .feat-topbar-label {

    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px
  }

  .feat-topbar-label::before {

    content: '*';
    font-size: 10px;
    line-height: 1;
    margin-right: 4px
  }

  .feat-pin-btn {

    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid rgba(212, 160, 181, .2);
    color: var(--pk);
    padding: 3px 10px;
    border-radius: 1px;
    cursor: var(--fd-cursor-action);
    transition: all .2s
  }

  .feat-pin-btn:hover {

    background: rgba(212, 160, 181, .08);
    border-color: var(--pk)
  }

  .feat-container {

    display: grid;
    grid-template-columns: minmax(360px, 1.05fr) minmax(420px, 1.35fr);
    gap: 12px;
    align-items: start;
    margin: 12px 14px 0 14px
  }

  .feat-container>div:first-child {

    min-width: 0
  }

  .feat-embed {

    width: 100%;
    min-width: 0;
    aspect-ratio: 16/9;
    border-radius: 6px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    position: relative
  }

  .feat-embed iframe {

    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    border-radius: 6px
  }

  .feat-embed:hover iframe {

    pointer-events: auto
  }

  .featured-saturation-panel {
    position: absolute;
    right: 8px;
    bottom: 40px;
    z-index: 5;
    width: min(250px, calc(100% - 16px));
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 14px;
    background: linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.42)),rgba(255,255,255,.3);
    box-shadow: 0 16px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.78);
    backdrop-filter: blur(18px) saturate(1.14);
    -webkit-backdrop-filter: blur(18px) saturate(1.14);
  }

  .featured-saturation-panel[hidden] { display: none; }

  .featured-saturation-head,
  .featured-saturation-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .featured-saturation-head {
    color: var(--ink);
    font: 8px/1 'DM Mono',monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .featured-saturation-panel input {
    width: 100%;
    margin: 12px 0;
    accent-color: var(--pk);
  }

  .featured-saturation-actions { justify-content: flex-end; }

  .featured-saturation-actions button {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.5);
    color: var(--ink2);
    padding: 6px 9px;
    cursor: var(--fd-cursor-action);
    font: 7px/1 'DM Mono',monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .feat-placeholder {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--ink3);
    padding: 18px
  }

  .feat-placeholder svg {

    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: .8;
    opacity: .4
  }

  .feat-placeholder span {

    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: .4
  }

  .feat-desc-floating {

    position: relative;
    background: 0 0;
    border: none;
    padding: 8px 14px 0 14px;
    font-size: 13px;
    color: var(--ink2);
    line-height: 1.4;
    display: block;
    margin: 0 14px 0 14px
  }

  .feat-desc-floating .feat-desc-label {

    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink3);
    display: block;
    margin-bottom: 6px
  }

  .feat-desc-floating #feat-desc-text {

    font-size: 14px;
    color: var(--ink);
    margin-left: 0;
    display: block
  }

  .feat-yt-list {

    width: auto;
    flex: 1;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    padding: 8px;
    background: linear-gradient(180deg, var(--s2), transparent);
    border-radius: 6px;
    border: 1px solid var(--border)
  }

  .feat-yt-item {

    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 4px;
    cursor: var(--fd-cursor-action);
    background: 0 0;
    border: 1px solid transparent;
    transition: all .15s
  }

  .feat-yt-item:hover {

    background: rgba(255, 255, 255, .02);
    border-color: var(--border2)
  }

  .feat-yt-thumb {

    width: 88px;
    height: 56px;
    border-radius: 4px;
    background: var(--s1);
    overflow: hidden;
    flex-shrink: 0
  }

  .feat-yt-meta {

    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column
  }

  .feat-yt-title {

    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .feat-yt-time {

    font-family: 'DM Mono', monospace;
    font-size: 8px;
    color: var(--ink3);
    margin-top: 4px
  }

  .section-bar {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--s1);
    position: sticky;
    top: 80px;
    z-index: 50
  }

  .section-bar-title {

    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px
  }

  .section-bar-title::before {

    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0
  }

  .section-bar-title.tiktok {

    color: var(--cy)
  }

  .section-bar-title.instagram {

    color: var(--pk)
  }

  .section-bar-title .insta-handle {

    font-family: 'DM Mono', monospace;
    font-size: 9px;
    color: var(--ink3);
    margin-left: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none
  }

  .section-bar-add {

    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid var(--border2);
    color: var(--ink3);
    padding: 3px 10px;
    border-radius: 1px;
    cursor: var(--fd-cursor-action);
    transition: all .15s
  }

  .section-bar-add:hover {

    border-color: var(--ink2);
    color: var(--ink2)
  }

  .tiktok-grid {

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    padding: 3px;
    background: rgba(237, 232, 222, .04)
  }

  .tiktok-cell {

    aspect-ratio: 9/14;
    background: var(--s2);
    border-radius: 8px;
    overflow: hidden;
    cursor: var(--fd-cursor-action);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .tiktok-cell iframe {

    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    border-radius: 8px
  }

  .tiktok-cell:hover iframe {

    pointer-events: auto
  }

  .cell-ov {

    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(12, 11, 10, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s
  }

  .tiktok-cell:hover .cell-ov {

    opacity: 1
  }

  .cell-stat {

    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px
  }

  .cell-stat svg {

    width: 13px;
    height: 13px;
    fill: var(--ink)
  }

  .tiktok-cell::after {

    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cy), transparent);
    border-radius: 8px 8px 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s
  }

  .tiktok-cell:hover::after {

    transform: scaleX(1)
  }

  .tiktok-feed-column {

    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: 0 0
  }

  .tiktok-feed-column .tiktok-embed {

    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: 9/16;
    border-radius: 0;
    overflow: hidden
  }

  .tiktok-feed-column .tiktok-embed iframe, .tiktok-feed-column .tiktok-embed section {

    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0
  }

  #page-scrollables .tiktok-embed, #page-scrollables .tiktok-embed blockquote, #page-scrollables .tiktok-embed iframe, #page-scrollables .tiktok-embed section {

    margin: 0;
    padding: 0;
    border-radius: 0
  }

  #scrollables-grid {

    gap: 0;
    padding: 0;
    margin: 0
  }

  .scrollables-layout {

    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
    padding: 12px;
    max-width: 920px;
    margin: 0 auto
  }

  .scrollables-left-panel {

    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .35) inset;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    gap: 12px
  }

  .scroll-thumb-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-items: start
  }

  .scroll-thumb {

    background: var(--s1);
    border: 1px solid var(--border2);
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 9/16;
    display: block;
    cursor: var(--fd-cursor-action);
    position: relative
  }

  .scroll-thumb img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
  }

  .scroll-thumb .st-overlay {

    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45));
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(2px)
  }

  .scroll-thumb .st-overlay .st-user {

    opacity: .9;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--ink2)
  }

  .scroll-thumb .st-play {

    background: rgba(255, 255, 255, .06);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px
  }

  .scrollables-left-panel h3 {

    font-family: 'Bebas Neue', sans-serif;
    margin: 0;
    font-size: 20px;
    color: var(--ink)
  }

  .scrollables-left-panel p {

    color: var(--ink2);
    font-size: 13px;
    margin: 0;
    line-height: 1.4
  }

  .scrollables-left-panel .panel-action {

    margin-top: auto;
    display: flex;
    gap: 8px
  }

  .scrollables-left-panel .panel-action button {

    flex: 1;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border2);
    background: 0 0;
    color: var(--ink);
    cursor: var(--fd-cursor-action)
  }

  .scrollables-left-panel .panel-action button.primary {

    background: var(--pk);
    color: var(--bg);
    border-color: var(--pk)
  }

  .scrollables-right {

    background: 0 0;
    width: 100%;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible
  }

  #page-scrollables .feed-wrap {

    max-width: 100%;
    padding: 8px 0
  }

  .insta-grid {

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 3px;
    gap: 0 3px;
    padding: 3px;
    align-items: start;
    background: transparent
  }

  .insta-cell {

    margin-bottom: 0;
    padding-bottom: 3px;
    background: var(--s2);
    overflow: hidden;
    cursor: var(--fd-cursor-action);
    position: relative;
    display: block
  }

  .insta-cell > a {

    display: block;
    position: static;
    inset: auto;
    width: 100%;
    height: auto
  }

  .insta-cell img {

    width: 100%;
    height: auto;
    display: block;
    object-fit: unset
  }

  .insta-cell .cell-ov {

    border-radius: 0;
    pointer-events: none
  }

  .insta-cell:hover .cell-ov {

    opacity: 1
  }

  .insta-cell::after {

    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--pk), var(--dp));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s
  }

  .insta-cell:hover::after {

    transform: scaleX(1)
  }

  .insta-cell.is-reordering {

    cursor: var(--fd-cursor-dragging);
    opacity: .92;
    transform: scale(.98);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .28)
  }

  .insta-drop-placeholder {

    border: 1px dashed rgba(212, 160, 181, .72);
    background: rgba(212, 160, 181, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24)
  }

  .insta-drop-indicator {

    position: fixed;
    width: 6px;
    min-height: 34px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.95), var(--pk));
    box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 8px 18px rgba(0,0,0,.22);
    pointer-events: none;
    z-index: 10001;
    display: none
  }

  body.insta-reorder-active {

    user-select: none;
    cursor: var(--fd-cursor-dragging)
  }

  body:not(.talk-admin) .talk-admin-only {

    display: none
  }

  body:not(.talk-admin, .login-unlocked) #nav-logout-btn {

    display: none
  }

  body.talk-admin .insta-cell:hover .insta-cell-delete {

    opacity: 1
  }

  .insta-cell-delete {

    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 10;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, .75);
    border: 1px solid rgba(237, 232, 222, .3);
    color: rgba(237, 232, 222, .8);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: var(--fd-cursor-action);
    opacity: 0;
    transition: opacity .15s, background .15s;
    line-height: 1
  }

  .insta-cell-delete:hover {

    background: rgba(180, 40, 40, .85);
    border-color: rgba(255, 100, 100, .5);
    color: #fff
  }

  .carousel-badge {

    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 10;
    width: 22px;
    height: 22px;
    pointer-events: none;
    display: none;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .72))
  }

  .insta-cell.is-carousel .carousel-badge {

    display: flex
  }

  .carousel-badge svg {

    width: 22px;
    height: 22px;
    fill: rgba(0, 0, 0, .18);
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 2.15
  }

  .carousel-toggle-btn {

    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 10;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, .75);
    border: 1px solid rgba(237, 232, 222, .3);
    color: rgba(237, 232, 222, .55);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: var(--fd-cursor-action);
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s, border-color .15s
  }

  .carousel-toggle-btn svg {

    width: 13px;
    height: 13px;
    fill: rgba(255, 255, 255, .08);
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 2
  }

  body.talk-admin .insta-cell:hover .carousel-toggle-btn {

    opacity: 1
  }

  body.talk-admin .insta-cell.is-carousel .carousel-toggle-btn {

    color: var(--pk);
    border-color: var(--pk);
    opacity: 1;
    background: rgba(212, 160, 181, .2)
  }

  body:not(.talk-admin) .carousel-toggle-btn {

    display: none
  }

  .carousel-toggle-btn:hover {

    background: rgba(212, 160, 181, .3);
    border-color: var(--pk2);
    color: var(--pk2)
  }

  .grid-empty {

    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    gap: 10px;
    text-align: center;
    color: var(--ink3)
  }

  .ge-icon {

    width: 44px;
    height: 44px;
    border: 1px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px
  }

  .ge-icon svg {

    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: 1
  }

  .ge-t {

    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    color: var(--ink2)
  }

  .ge-s {

    font-family: 'DM Mono', monospace;
    font-size: 8px;
    letter-spacing: 1px;
    text-transform: uppercase
  }

  .ge-btn {

    margin-top: 2px;
    padding: 6px 18px;
    border: 1px solid var(--border2);
    background: 0 0;
    color: var(--ink2);
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: var(--fd-cursor-action);
    transition: all .15s
  }

  .ge-btn:hover {

    border-color: var(--pk);
    color: var(--pk)
  }

  .sidebar-right {

    background: var(--s1);
    position: relative;
    height: auto;
    overflow-y: visible;
    display: flex;
    flex-direction: column
  }

  .sidebar-right::-webkit-scrollbar {

    display: none
  }

  .sr-header {

  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10
  }

  .sr-title {

    font-family: 'DM Mono', monospace;
    font-size: 8px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #f66;
    display: flex;
    align-items: center;
    gap: 6px
  }

  .sr-title::before {

    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f66;
    flex-shrink: 0
  }

  .sr-add {

    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid var(--border2);
    color: var(--ink3);
    padding: 3px 8px;
    border-radius: 1px;
    cursor: var(--fd-cursor-action);
    transition: all .15s
  }

  .sr-add:hover {

    border-color: #f66;
    color: #f66
  }

  .yt-list {

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 3px;
    align-content: start;
    padding: 2px;
    flex: 1;
    max-height: none;
    overflow: visible;
    scrollbar-width: thin
  }

  #yt-list-side {

    margin-top: 0;
    max-height: none;
    overflow: visible
  }

  #yt-list-overflow {

    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 8px 14px 12px;
    padding-top: 3px;
    border-top: 1px solid var(--border)
  }

  #yt-list-overflow[hidden] {

    display: none
  }

  .yt-item {

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 2px;
    border-bottom: none;
    cursor: var(--fd-cursor-action);
    transition: background .15s
  }

  .yt-item:hover {

    background: var(--s2)
  }

  .yt-thumb {

    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    border-radius: 6px;
    background: var(--s2);
    flex-shrink: 0;
    overflow: hidden;
    display: block;
    position: relative
  }

  .yt-thumb iframe {

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none
  }

  .yt-thumb img {

    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    max-width: none;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    image-rendering: auto
  }

body:not(.talk-admin) .yt-saturation-button {
  display: none;
}

.yt-saturation-button {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 4;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(10,10,10,.72);
  color: #fff;
  font: 700 7px/1 "DM Mono", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.youtube-saturation-popup {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.youtube-saturation-panel {
  width: min(390px, calc(100vw - 32px));
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06)), rgba(12,11,10,.91);
  box-shadow: 0 28px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.18);
  color: #f5f2ed;
}

.youtube-saturation-head, .youtube-saturation-actions, .youtube-saturation-control {
  display: flex;
  align-items: center;
}

.youtube-saturation-head {
  justify-content: space-between;
  gap: 14px;
}

.youtube-saturation-head span, .youtube-saturation-head small {
  display: block;
  font-family: "DM Mono", monospace;
}

.youtube-saturation-head span {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.youtube-saturation-head small {
  max-width: 290px;
  margin-top: 5px;
  overflow: hidden;
  color: rgba(255,255,255,.48);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.youtube-saturation-head button {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.62);
  font-size: 18px;
}

.youtube-saturation-control {
  gap: 12px;
  padding: 24px 0;
}

.youtube-saturation-control input {
  flex: 1;
  accent-color: var(--pk);
}

.youtube-saturation-control output {
  min-width: 44px;
  color: rgba(255,255,255,.72);
  font: 9px "DM Mono", monospace;
  text-align: right;
}

.youtube-saturation-actions {
  justify-content: flex-end;
  gap: 8px;
}

.youtube-saturation-actions button {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 9px 14px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font: 700 8px "DM Mono", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.youtube-saturation-actions button[data-action="apply"] {
  border-color: var(--pk);
  background: var(--pk);
  color: #171216;
}

.selective-color-controls {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
}

.selective-color-title, .selective-color-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selective-color-title span, .selective-color-controls label span {
  min-width: 88px;
  color: rgba(255,255,255,.58);
  font: 700 8px "DM Mono", monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.selective-color-title [data-pick], .selective-color-clear {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 7px 9px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  font: 700 7px "DM Mono", monospace;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.selective-color-title [data-color] {
  width: 32px;
  height: 26px;
  margin-left: auto;
  padding: 2px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 8px;
  background: transparent;
}

.selective-color-controls label input {
  min-width: 0;
  flex: 1;
  accent-color: var(--pk);
}

.selective-color-controls output {
  min-width: 34px;
  color: rgba(255,255,255,.60);
  font: 8px "DM Mono", monospace;
  text-align: right;
}

.selective-color-clear {
  justify-self: start;
  color: rgba(255,255,255,.52);
}

.crop-picker-popup > div {
  max-height: calc(100vh - 28px);
  overflow-y: auto;
}

  .yt-thumb::after {

    content: '>';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(237, 232, 222, 0);
    background: rgba(12, 11, 10, 0);
    transition: background .15s, color .15s
  }

  .yt-item:hover .yt-thumb::after {

    background: rgba(12, 11, 10, .5);
    color: rgba(237, 232, 222, .9)
  }

  .yt-info {

    flex: 1;
    min-width: 0
  }

  .yt-title {

    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  .yt-meta {

    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--ink3);
    letter-spacing: .5px;
    font-weight: 700
  }

  .yt-empty {

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px;
    gap: 8px;
    text-align: center;
    color: var(--ink3);
    flex: 1
  }

  .yt-empty svg {

    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: .8;
    opacity: .4;
    margin-bottom: 4px
  }

  .yt-empty-t {

    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--ink2)
  }

  .yt-empty-s {

    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 1px;
    text-transform: uppercase
  }

  .yt-empty-btn {

    margin-top: 4px;
    padding: 6px 14px;
    border: 1px solid var(--border2);
    background: 0 0;
    color: var(--ink2);
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: var(--fd-cursor-action);
    transition: all .15s
  }

  .yt-empty-btn:hover {

    border-color: #f66;
    color: #f66
  }

  .feed-wrap {

    max-width: 480px;
    margin: 0 auto;
    padding: 28px 20px 80px
  }

  .fpa {

    background: 0 0;
    border: none;
    padding: 4px 7px 4px 0;
    color: var(--ink2);
    display: flex;
    align-items: center;
    transition: all .15s
  }

  .fpa:hover {

    color: var(--ink)
  }

  .fpa svg {

    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6
  }

  .fpa.liked svg {

    fill: var(--pk);
    stroke: var(--pk)
  }

  .fpa.saved svg {

    fill: var(--ink);
    stroke: var(--ink)
  }

  .fpa-r {

    margin-left: auto
  }

  .modal-bg {

    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    z-index: 500;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px)
  }

  .modal-bg.open {

    display: flex
  }

  .modal-box {

    background: var(--s1);
    border: 1px solid var(--border2);
    width: min(92vw, 480px);
    overflow: hidden
  }

  .modal-head {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(12, 11, 10, .5)
  }

  .modal-title {

    font-family: 'DM Mono', monospace;
    font-size: 8px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink)
  }

  .modal-tag {

    font-family: 'DM Mono', monospace;
    font-size: 6px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 2px 7px;
    margin-left: 5px;
    border-radius: 1px
  }

  .modal-close {

    background: 0 0;
    border: none;
    color: var(--ink3);
    font-size: 15px;
    cursor: var(--fd-cursor-action);
    padding: 0;
    line-height: 1;
    transition: color .15s
  }

  .modal-close:hover {

    color: var(--ink)
  }

  .modal-body {

    padding: 14px
  }

  .m-lbl {

    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink3);
    display: block;
    margin-bottom: 6px;
    font-weight: 700
  }

  .m-input {

    width: 100%;
    background: var(--s2);
    border: 1px solid var(--border);
    padding: 9px 12px;
    font-size: 14px;
    color: var(--ink);
    outline: 0;
    transition: border-color .2s;
    font-weight: 600
  }

  .m-input:focus {

    border-color: var(--cy)
  }

  .m-input::placeholder {

    color: var(--ink3)
  }

  .m-textarea {

    width: 100%;
    background: var(--s2);
    border: 1px solid var(--border);
    padding: 9px 12px;
    font-size: 14px;
    color: var(--ink);
    outline: 0;
    resize: none;
    min-height: 58px;
    transition: border-color .2s;
    font-weight: 600
  }

  .m-textarea:focus {

    border-color: var(--cy)
  }

  .m-textarea::placeholder {

    color: var(--ink3)
  }

  .m-row {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .m-preview {

    width: 100%;
    aspect-ratio: 1;
    background: var(--s2);
    border: 1px solid var(--border);
    overflow: hidden;
    display: none;
    position: relative
  }

  .m-preview.show {

    display: block
  }

  .m-preview iframe {

    width: 100%;
    height: 100%;
    border: none
  }

  .m-loading {

    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ink3)
  }

  .m-loading svg {

    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: 1.5;
    animation: spin 1.2s linear infinite
  }

  @keyframes spin {
    to {
      transform: rotate(360deg)
    }
  }

  .m-loading span {

    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase
  }

  .m-footer {

    display: flex;
    gap: 6px;
    justify-content: flex-end
  }

  .m-cancel {

    padding: 7px 14px;
    border: 1px solid var(--border2);
    background: 0 0;
    color: var(--ink2);
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: var(--fd-cursor-action);
    transition: all .15s
  }

  .m-cancel:hover {

    color: var(--ink)
  }

  .m-submit {

    padding: 7px 18px;
    background: var(--ink);
    color: var(--bg);
    border: none;
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: var(--fd-cursor-action);
    transition: all .15s
  }

  .m-submit:hover {

    background: var(--pk2)
  }

  .m-submit:disabled {

    opacity: .3;
    cursor: var(--fd-cursor-disabled)
  }

  .detail-bg {

    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 500;
    align-items: center;
    justify-content: center
  }

  .detail-bg.open {

    display: flex
  }

  .detail-box {

    background: var(--s1);
    border: 1px solid var(--border2);
    display: flex;
    width: min(92vw, 900px);
    max-height: 90vh;
    overflow: hidden
  }

  .det-media {

    flex: 1;
    background: var(--s2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 0
  }

  .det-media iframe {

    width: 100%;
    height: 100%;
    border: none
  }

  .det-side {

    width: 290px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border)
  }

  .det-head {

    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0
  }

  .det-av {

    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--s2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border)
  }

  .det-av svg {

    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: 1.5
  }

  .det-user {

    font-size: 11px;
    font-weight: 500;
    flex: 1;
    color: var(--ink)
  }

  .det-close {

    background: 0 0;
    border: none;
    color: var(--ink3);
    font-size: 15px;
    cursor: var(--fd-cursor-action);
    padding: 0;
    transition: color .15s
  }

  .det-close:hover {

    color: var(--ink)
  }

  .det-comments {

    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    scrollbar-width: none
  }

  .det-comments::-webkit-scrollbar {

    display: none
  }

  .dc {

    display: flex;
    gap: 7px
  }

  .dc-av {

    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--s2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Mono', monospace;
    font-size: 6px;
    color: var(--ink3)
  }

  .dc-text {

    font-size: 11px;
    line-height: 1.5;
    color: var(--ink2)
  }

  .dc-text strong {

    font-weight: 600;
    color: var(--ink);
    margin-right: 3px
  }

  .dc-meta {

    font-family: 'DM Mono', monospace;
    font-size: 7px;
    color: var(--ink3);
    margin-top: 2px;
    letter-spacing: .5px
  }

  .det-actions {

    padding: 7px 10px 3px;
    border-top: 1px solid var(--border);
    flex-shrink: 0
  }

  .da-row {

    display: flex;
    align-items: center;
    margin-bottom: 3px
  }

  .da-btn {

    background: 0 0;
    border: none;
    padding: 4px 6px 4px 0;
    color: var(--ink2);
    display: flex;
    align-items: center;
    transition: all .15s
  }

  .da-btn:hover {

    color: var(--ink)
  }

  .da-btn svg {

    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6
  }

  .da-btn.liked svg {

    fill: var(--pk);
    stroke: var(--pk)
  }

  .da-btn.saved svg {

    fill: var(--ink);
    stroke: var(--ink)
  }

  .da-right {

    margin-left: auto
  }

  .da-likes {

    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1px
  }

  .da-time {

    font-family: 'DM Mono', monospace;
    font-size: 7px;
    color: var(--ink3);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px
  }

  .det-add {

    display: flex;
    align-items: center;
    gap: 7px;
    border-top: 1px solid var(--border);
    padding: 8px 10px;
    flex-shrink: 0
  }

  .det-input {

    flex: 1;
    background: 0 0;
    border: none;
    outline: 0;
    font-size: 11px;
    color: var(--ink)
  }

  .det-input::placeholder {

    color: var(--ink3)
  }

  .det-post {

    background: 0 0;
    border: none;
    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cy);
    cursor: var(--fd-cursor-action);
    opacity: .3;
    transition: opacity .15s
  }

  .det-post.ready {

    opacity: 1
  }

  .sheet-bg {

    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 400;
    align-items: flex-end;
    justify-content: center
  }

  .sheet-bg.open {

    display: flex
  }

  .sheet {

    background: var(--s1);
    border: 1px solid var(--border2);
    border-bottom: none;
    width: min(100%, 480px);
    padding-bottom: 20px
  }

  .sheet-handle {

    width: 28px;
    height: 2px;
    background: var(--border2);
    margin: 9px auto 12px
  }

  .sheet-opt {

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: var(--fd-cursor-action);
    font-size: 12px;
    color: var(--ink2);
    border-bottom: 1px solid var(--border);
    transition: all .15s
  }

  .sheet-opt:hover {

    color: var(--ink);
    background: var(--s2)
  }

  .sheet-opt svg {

    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5
  }

  .sheet-cancel {

    width: 100%;
    padding: 12px;
    font-family: 'DM Mono', monospace;
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink3);
    background: 0 0;
    border: none
  }

  ::-webkit-scrollbar {

    width: 10px;
    height: 10px
  }

  ::-webkit-scrollbar-track {

    background: 0 0
  }

  ::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background .15s
  }

  ::-webkit-scrollbar-thumb:hover {

    background: rgba(255, 255, 255, .12)
  }

  html.light-mode ::-webkit-scrollbar-thumb {

    background: rgba(12, 11, 10, .08)
  }

  #edit-modal {

    padding: 24px;
    box-sizing: border-box;
    z-index: 10000;
    background: rgba(8, 8, 8, .54);
    backdrop-filter: blur(12px) saturate(1.08);
    -webkit-backdrop-filter: blur(12px) saturate(1.08)
  }

  #ep-panel {

    width: min(94vw, 680px);
    max-height: min(900px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .52);
    border-radius: 8px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.42)),
      rgba(238,238,236,.4);
    box-shadow:
      0 30px 90px rgba(0,0,0,.34),
      0 6px 20px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.92);
    backdrop-filter: blur(20px) saturate(1.18);
    -webkit-backdrop-filter: blur(20px) saturate(1.18)
  }

  html:not(.light-mode) #ep-panel {

    border-color: rgba(255,255,255,.18);
    background:
      linear-gradient(145deg, rgba(38,38,38,.88), rgba(18,18,18,.74)),
      rgba(20,20,20,.72);
    box-shadow:
      0 30px 90px rgba(0,0,0,.62),
      inset 0 1px 0 rgba(255,255,255,.12)
  }

  .ep-header {

    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 20px 22px 18px;
    border-bottom: 1px solid rgba(255,255,255,.42)
  }

  .ep-header::before {

    content: '';
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pk), transparent);
    opacity: .72
  }

  .ep-header-copy {

    display: flex;
    flex-direction: column;
    gap: 4px
  }

  .ep-kicker, .ep-section-heading, .ep-help, .ep-accent-name, .ep-accent-value {

    font-family: 'DM Mono', monospace
  }

  .ep-kicker {

    color: var(--pk);
    font-size: 8px;
    line-height: 1;
    letter-spacing: 2.4px;
    text-transform: uppercase
  }

  .ep-title {

    color: var(--ink);
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 34px;
    font-weight: 900;
    line-height: .95;
    letter-spacing: 0;
    text-transform: uppercase
  }

  .ep-close {

    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.46);
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    color: var(--ink2);
    font: 14px/1 'DM Mono', monospace;
    cursor: var(--fd-cursor-action);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.64);
    transition: border-color .16s, color .16s, transform .16s
  }

  .ep-close:hover {

    border-color: var(--pk);
    color: var(--ink);
    transform: scale(1.04)
  }

  .ep-body {

    min-height: 0;
    flex: 1;
    max-height: none;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--pk-rgb), .42) transparent
  }

  .ep-body::-webkit-scrollbar {

    width: 6px
  }

  .ep-body::-webkit-scrollbar-thumb {

    border: 0;
    background: rgba(var(--pk-rgb), .42)
  }

  .ep-section {

    padding: 20px 22px;
    border-bottom: 1px solid rgba(255,255,255,.34)
  }

  .ep-section:last-child {

    border-bottom: 0
  }

  .ep-photo-section {

    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    background: linear-gradient(90deg, rgba(var(--pk-rgb),.07), transparent 68%)
  }

  .ep-av-wrap {

    position: relative;
    cursor: var(--fd-cursor-action);
    width: 76px;
    height: 76px;
    flex-shrink: 0
  }

  .ep-av-preview {

    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--s2);
    border: 1px solid rgba(255,255,255,.74);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.8);
    transition: border-color .2s, transform .2s
  }

  .ep-av-wrap:hover .ep-av-preview {

    border-color: var(--pk);
    transform: translateY(-1px)
  }

  .ep-av-preview img {

    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .ep-av-preview svg {

    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--ink3);
    stroke-width: .9
  }

  .ep-av-overlay {

    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(12, 11, 10, .72);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    opacity: 0;
    transition: opacity .2s
  }

  .ep-av-wrap:hover .ep-av-overlay {

    opacity: 1
  }

  .ep-av-overlay svg {

    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    flex-shrink: 0
  }

  .ep-av-overlay span {

    font-family: 'DM Mono', monospace;
    font-size: 5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink)
  }

  .ep-photo-fields {

    min-width: 0
  }

  .ep-section-heading {

    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--ink2);
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase
  }

  .ep-section-heading::after {

    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, rgba(var(--pk-rgb),.45), transparent)
  }

  .ep-identity-grid {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px
  }

  .ep-wide {

    grid-column: 1/-1
  }

  .ep-help {

    margin-top: 7px;
    color: var(--ink3);
    font-size: 8px;
    line-height: 1.45;
    letter-spacing: .4px
  }

  #ep-panel .ep-lbl {

    margin-bottom: 7px;
    color: var(--ink3);
    font-size: 8px;
    letter-spacing: 1.5px
  }

  #ep-panel .ep-field {

    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 6px;
    background: rgba(255,255,255,.2);
    color: var(--ink);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
    transition: border-color .16s, background .16s, box-shadow .16s
  }

  #ep-panel .ep-field:focus {

    border-color: rgba(var(--pk-rgb), .72);
    background: rgba(255,255,255,.3);
    box-shadow: 0 0 0 3px rgba(var(--pk-rgb), .1)
  }

  #ep-panel textarea.ep-field {

    min-height: 78px;
    padding: 10px 11px;
    resize: vertical;
    line-height: 1.5
  }

  .ep-accent-row {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
  }

  .ep-accent-name, .ep-accent-value {

    color: var(--ink3);
    font-size: 9px
  }

  .ep-accent-control {

    display: flex;
    align-items: center;
    gap: 10px
  }

  #accent-picker {

    width: 44px;
    height: 32px;
    padding: 3px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 6px;
    background: rgba(255,255,255,.22);
    cursor: var(--fd-cursor-action)
  }

  .ep-footer {

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-shrink: 0;
    padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,.42);
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px)
  }

  .ep-action {

    min-height: 38px;
    padding: 0 18px;
    border-radius: 6px;
    font: 9px/1 'DM Mono', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: var(--fd-cursor-action);
    transition: transform .16s, border-color .16s, background .16s
  }

  .ep-action:hover {

    transform: translateY(-1px)
  }

  .ep-action-secondary {

    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.14);
    color: var(--ink2)
  }

  .ep-action-primary {

    border: 1px solid rgba(12,11,10,.88);
    background: rgba(12,11,10,.92);
    color: #fff;
    box-shadow: 0 7px 18px rgba(0,0,0,.16)
  }

  .ep-action-primary:hover {

    border-color: var(--pk);
    background: color-mix(in srgb, #0c0b0a 88%, var(--pk))
  }

  @media(max-width:600px) {

    #edit-modal {

      padding: 10px
    }

    #ep-panel {

      width: 100%;
      max-height: calc(100dvh - 20px)
    }

    .ep-header {

      padding: 17px 16px 15px
    }

    .ep-title {

      font-size: 30px
    }

    .ep-section {

      padding: 17px 16px
    }

    .ep-photo-section {

      grid-template-columns: 66px minmax(0, 1fr);
      gap: 13px
    }

    .ep-av-wrap, .ep-av-preview {

      width: 66px;
      height: 66px
    }

    .ep-identity-grid {

      gap: 12px
    }

    .ep-footer {

      padding: 11px 12px
    }

    .ep-action {

      flex: 1;
      padding: 0 10px
    }
  }

  .settings-wrap {

    max-width: 580px;
    margin: 0 auto;
    padding: 36px 24px 80px
  }

  .settings-head {

    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border)
  }

  .settings-head-t {

    font-family: 'Bebas Neue', sans-serif;
    font-size: 44px;
    letter-spacing: 4px;
    color: var(--ink)
  }

  .settings-head-t b {

    color: var(--pk);
    font-weight: 400
  }

  .settings-head-s {

    font-family: 'DM Mono', monospace;
    font-size: 8px;
    color: var(--ink3);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 4px
  }

  .settings-section {

    margin-bottom: 22px
  }

  .settings-sec-lbl {

    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink3);
    margin-bottom: 8px;
    padding-left: 2px;
    display: block;
    font-weight: 700
  }

  .settings-card {

    background: var(--s1);
    border: 1px solid var(--border);
    overflow: hidden
  }

  .setting-row {

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border)
  }

  .setting-row:last-child {

    border-bottom: none
  }

  .setting-info {

    flex: 1;
    min-width: 0
  }

  .setting-name {

    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 2px
  }

  .setting-desc {

    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: .5px;
    color: var(--ink3);
    text-transform: uppercase
  }

  .setting-btn {

    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid var(--border2);
    color: var(--ink2);
    padding: 5px 12px;
    cursor: var(--fd-cursor-action);
    transition: all .15s;
    flex-shrink: 0;
    border-radius: 1px
  }

  .setting-btn:hover {

    border-color: var(--pk);
    color: var(--pk)
  }

  .setting-btn.danger {

    border-color: rgba(255, 80, 80, .2);
    color: rgba(255, 100, 100, .55)
  }

  .setting-btn.danger:hover {

    border-color: #ff6464;
    color: #ff6464;
    background: rgba(255, 80, 80, .06)
  }

  .setting-btn.armed {

    background: rgba(255, 80, 80, .12);
    border-color: #ff6464;
    color: #ff6464
  }

  .accent-swatches {

    display: flex;
    gap: 7px;
    align-items: center
  }

  .accent-sw {

    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: var(--fd-cursor-action);
    border: 2px solid transparent;
    transition: all .2s;
    flex-shrink: 0;
    position: relative
  }

  .accent-sw.on {

    border-color: var(--ink);
    transform: scale(1.2)
  }

  .accent-sw.on::after {

    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: rgba(237, 232, 222, .35)
  }

  .toggle {

    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0
  }

  .toggle input {

    opacity: 0;
    width: 0;
    height: 0;
    position: absolute
  }

  .toggle-track {

    position: absolute;
    inset: 0;
    background: var(--s3);
    border: 1px solid var(--border2);
    border-radius: 10px;
    cursor: var(--fd-cursor-action);
    transition: all .25s
  }

  .toggle-track::before {

    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    background: var(--ink3);
    border-radius: 50%;
    transition: all .25s
  }

  .toggle input:checked+.toggle-track {

    background: rgba(212, 160, 181, .12);
    border-color: var(--pk)
  }

  .toggle input:checked+.toggle-track::before {

    transform: translateX(16px);
    background: var(--pk)
  }

  .settings-ver {

    font-family: 'DM Mono', monospace;
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink3);
    text-align: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border)
  }

  .settings-ver b {

    color: var(--border2)
  }

  @keyframes flash-border {
    0% {
      border-color: var(--pk)
    }
    100% {
      border-color: var(--border2)
    }
  }

/* ── Site intro ── */

/* ── Nav settings dropdown z-index fix ── */
#nav-settings-dropdown {

        position: fixed;
        z-index: 2147483647;
        pointer-events: auto;
      }

/* ── Admin-only visibility ── */
body:not(.talk-admin) #nav-traffic-btn.admin-only {

            display: none
          }

          body.talk-admin #nav-traffic-btn.admin-only {

            display: flex;
            align-items: center;
            gap: 8px
          }

/* ── Admin-only dropdown buttons (Restore + Add Post) ── */
body:not(.talk-admin) #nav-restore-btn, body:not(.talk-admin) #nav-addpost-btn {

  display: none
}

/* Desktop profile sidebar: keep level and now-playing glass cards from touching */
@media (min-width: 769px) {

    #page-profile .sidebar-left .sl-widgets-row {

      display: flex;
      flex-direction: column;
      gap: 6px;
      }

    #page-profile .sidebar-left .sl-widgets-row > .sl-info, #page-profile .sidebar-left .sl-widgets-row > .sl-song-block {

      padding: 0;
      border-bottom: 0;
      }

    #page-profile .sidebar-left .sl-widgets-row .np-widget {

      background:
        linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.18)),
        rgba(210,210,210,.20);
      border-color: rgba(255,255,255,.36);
      box-shadow: 0 8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.48);
      }

    #page-profile .sidebar-left .sl-widgets-row > .sl-song-block {

      margin-top: 0;
      }

}

/* ── Scrollables scroll-grid-btn ── */
#scroll-grid-btn {

            display: none
          }

          @media(max-width:768px) {

              #page-scrollables {

                background: transparent
                }
              .scrollables-layout {

                margin: 0
                }
              .scrollables-right, .scrollables-right .feed-wrap {

                background: transparent
                }

}

/* ── Edit Profile labels ── */
.ep-lbl {

            font-family: 'DM Mono', monospace;
            font-size: 10px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--ink2);
            margin-bottom: 8px;
            display: block
          }

          .ep-field {

            width: 100%;
            background: rgba(237, 232, 222, .04);
            border: none;
            border-bottom: 1px solid rgba(237, 232, 222, .25);
            padding: 11px 2px;
            font-family: 'DM Mono', monospace;
            font-size: 14px;
            color: var(--ink);
            outline: 0;
            transition: border-color .2s, background .2s;
            box-sizing: border-box
          }

          .ep-field:focus {

            border-bottom-color: var(--pk)
          }

          .ep-field::placeholder {

            color: rgba(237, 232, 222, .3);
            font-size: 13px
          }

          .ep-font-picker {

            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 7px;
            margin-top: 12px
          }

          .ep-font-choice {

            min-width: 0;
            height: 58px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            gap: 4px;
            padding: 8px 9px;
            overflow: hidden;
            border: 1px solid rgba(237, 232, 222, .12);
            border-radius: 5px;
            background: rgba(237, 232, 222, .035);
            color: var(--ink);
            cursor: var(--fd-cursor-action);
            text-align: left;
            transition: border-color .16s, background .16s, box-shadow .16s
          }

          .ep-font-choice:hover {

            border-color: rgba(var(--pk-rgb), .55);
            background: rgba(var(--pk-rgb), .07)
          }

          .ep-font-choice[aria-pressed="true"] {

            border-color: var(--pk);
            background: rgba(var(--pk-rgb), .12);
            box-shadow: inset 0 0 0 1px rgba(var(--pk-rgb), .18)
          }

          .ep-font-choice-name {

            font: 8px/1 'DM Mono', monospace;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--ink3)
          }

          .ep-font-sample {

            display: block;
            width: 100%;
            overflow: hidden;
            color: var(--ink);
            font-size: 17px;
            line-height: 1;
            letter-spacing: 0;
            white-space: nowrap;
            text-overflow: ellipsis
          }

          @media(max-width:480px) {

            .ep-font-picker {

              grid-template-columns: repeat(auto-fit, minmax(84px, 1fr))
            }

            .ep-font-sample {

              font-size: 13px
            }
          }

          textarea.ep-field {

            min-height: 80px;
            border: 1px solid rgba(237, 232, 222, .15);
            border-bottom: 1px solid rgba(237, 232, 222, .25);
            padding: 10px
          }

/* ── Fans widget ── */
.fans-row {

            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 11px 22px;
            border-bottom: 1px solid var(--border);
            transition: background .1s
          }

          .fans-row:last-child {

            border-bottom: none
          }

          .fans-row:hover {

            background: var(--s1)
          }

          .fans-row span:first-child {

            font-family: 'DM Mono', monospace;
            font-size: 9px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--ink3)
          }

          .fans-row span:last-child {

            font-family: 'Bebas Neue', sans-serif;
            font-size: 20px;
            letter-spacing: 1px;
            color: var(--ink)
          }

          .fans-edit-input {

            display: none;
            width: 70px;
            background: rgba(237, 232, 222, .05);
            border: none;
            border-bottom: 1px solid rgba(237, 232, 222, .2);
            color: var(--ink2);
            font-family: 'DM Mono', monospace;
            font-size: 10px;
            padding: 3px 6px;
            text-align: right;
            outline: 0
          }

          .fans-edit-input:focus {

            border-bottom-color: var(--pk)
          }

          body.talk-admin .fans-edit-input {

            display: block
          }

          .fans-edit-footer {

            display: none;
            padding: 10px 22px;
            border-top: 1px solid var(--border);
            font-family: 'DM Mono', monospace;
            font-size: 7px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--ink3);
            gap: 8px;
            align-items: center
          }

          body.talk-admin .fans-edit-footer {

            display: flex
          }

/* ── Custom background modal ── */
#custom-bg-modal {

            display: none;
            position: fixed;
            inset: 0;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, .7);
            z-index: 1200
          }

          #custom-bg-modal .cb-panel {

            width: min(92vw, 520px);
            background: var(--s1);
            border: 1px solid var(--border2);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 30px 80px rgba(0, 0, 0, .6)
          }

          #custom-bg-modal .cb-head {

            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between
          }

          #custom-bg-modal .cb-body {

            padding: 14px;
            display: flex;
            gap: 10px;
            flex-direction: column
          }

          #custom-bg-modal .cb-preview {

            height: 120px;
            border: 1px solid var(--border);
            background-size: cover;
            background-position: center;
            border-radius: 4px;
            overflow: hidden
          }

          #custom-bg-modal .cb-input {

            width: 100%;
            padding: 9px 10px;
            border: 1px solid var(--border);
            background: var(--s2);
            color: var(--ink);
            outline: 0;
            border-radius: 4px;
            font-family: DM Mono, monospace
          }

          #custom-bg-modal .cb-foot {

            display: flex;
            gap: 8px;
            justify-content: flex-end;
            padding: 12px 16px;
            border-top: 1px solid var(--border)
          }

          #custom-bg-modal .cb-btn {

            padding: 8px 14px;
            border-radius: 4px;
            border: 1px solid var(--border2);
            background: 0 0;
            color: var(--ink2);
            cursor: var(--fd-cursor-action);
            font-family: DM Mono, monospace
          }

          #custom-bg-modal .cb-btn.primary {

            background: var(--ink);
            color: var(--bg);
            border: none
          }

          .fd-file-picker, #custom-bg-modal .cb-file-picker {

            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            border: 1px solid var(--border2);
            border-radius: 4px;
            background: var(--s2);
            padding: 6px;
          }

          .fd-file-picker input[type="file"], #custom-bg-modal .cb-file-picker input[type="file"] {

            display: none;
          }

          .fd-file-btn, #custom-bg-modal .cb-file-btn {

            border: 1px solid var(--border2);
            border-radius: 4px;
            background: var(--s1);
            color: var(--ink);
            font-family: 'DM Mono', monospace;
            font-size: 10px;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 8px 10px;
            cursor: var(--fd-cursor-action);
            flex: 0 0 auto;
          }

          .fd-file-name, #custom-bg-modal #custom-bg-file-name {

            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--ink3);
            font-family: 'DM Mono', monospace;
            font-size: 11px;
          }

          .npe-links-grid {

            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
          }

/* Scrollables feed: TikTok cards should touch edge-to-edge vertically */
#page-scrollables #scrollables-grid, #page-scrollables .tiktok-grid {

  display: block;
  gap: 0;
  row-gap: 0;
  line-height: 0;
}

#page-scrollables .tiktok-embed, #page-scrollables .tiktok-embed iframe, #page-scrollables .tiktok-embed section {

  display: block;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: top;
}
@media(min-width:769px) {

    #page-scrollables .tiktok-embed {

      height: 739px;
      min-height: 739px;
      max-height: none;
      margin-top: 0;
      margin-bottom: 0;
      overflow: hidden;
      }

    #page-scrollables .tiktok-embed iframe {

      display: block;
      min-height: 739px;
      height: 739px;
      margin: 0;
      border: 0;
      }

}

/* Shared page loading state */
.page-loading {

  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-loader {

  width: 44px;
  height: 44px;
  border: 1px solid var(--border2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}

.page-loader span {

  width: 18px;
  height: 18px;
  border: 2px solid var(--ink3);
  border-top-color: var(--pk);
  border-radius: 50%;
  animation: page-loader-spin .75s linear infinite;
}

@keyframes page-loader-spin {
  to { transform: rotate(360deg); }
}

/* Image prompt policy: admins choose media, visitors link */
body.talk-admin .image-link-prompt {

  display: none;
}

body:not(.talk-admin) .image-file-prompt {

  display: none;
}

/* ── Desktop nav: remove long header bar, keep original buttons, add glass shells ── */
@media (min-width: 769px) {

    .nav {

    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    border: 0;
    position: sticky;
    top: 0;
    z-index: 300;
    height: 86px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    overflow: visible;
    pointer-events: none;
      }

    .nav > *, .nav button, .nav a, .nav input, .nav-center, .nav-icons {

      pointer-events: auto;
      }

    .nav-center {

      gap: 12px;
      background: transparent;
      box-shadow: none;
      border: none;
      }

    .main-nav-btn, #nav-shop-main, #nav-live {

      position: relative;
      isolation: isolate;
      }

    .main-nav-btn::before, #nav-shop-main::before, #nav-live::before {

      content: "";
      position: absolute;
      inset: -5px;
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.20) 42%, rgba(255,255,255,.08)),
        rgba(255,255,255,.18);
      border: 1px solid rgba(255,255,255,.42);
      box-shadow:
        0 14px 34px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.78),
        inset 0 -12px 22px rgba(0,0,0,.045);
      backdrop-filter: blur(18px) saturate(1.18);
      -webkit-backdrop-filter: blur(18px) saturate(1.18);
      z-index: -1;
      pointer-events: none;
      }

    .main-nav-btn::after, #nav-shop-main::after, #nav-live::after {

      content: "";
      position: absolute;
      left: 9px;
      right: 9px;
      top: -1px;
      height: 36%;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.16), transparent);
      opacity: .7;
      z-index: -1;
      pointer-events: none;
      }

    #nav-shop-main::before, #nav-shop-main::after {

      border-radius: 24px;
      }

    #nav-live::before {

      border-radius: 999px;
      inset: -7px;
      }

    #nav-live::after {

      border-radius: 999px;
      }

    .main-nav-btn:hover::before, #nav-shop-main:hover::before, #nav-live:hover::before {

      box-shadow:
        0 18px 40px rgba(0,0,0,.19),
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -12px 22px rgba(0,0,0,.05);
      }

}

/* ── Profile sidebar: carded glass sections, not one slab ─────────────── */
@media (min-width: 769px) {

    .sidebar-left {

      background: transparent;
      border-right: none;
      padding: 10px 8px 12px;
      gap: 10px;
      box-shadow: none;
      overflow: visible;
      }

    .sidebar-left::before, .sidebar-left::after {

      display: none;
      content: none;
      }

    .sidebar-left > * {

      position: relative;
      z-index: 1;
      }

    .sl-avatar-block, .sl-info, .sl-song-block, .sl-bio-block, .sl-actions {

      margin: 0;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.30) 45%, rgba(255,255,255,.18)),
        rgba(255,255,255,.16);
      box-shadow:
        0 14px 30px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.72),
        inset 0 -18px 28px rgba(0,0,0,.035);
      backdrop-filter: blur(16px) saturate(1.18);
      -webkit-backdrop-filter: blur(16px) saturate(1.18);
      overflow: hidden;
      }

    .sl-avatar-block {

      padding-bottom: 4px;
      }

    .sl-avatar-block::before {

      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.45), transparent 44%),
        linear-gradient(120deg, transparent 0 28%, rgba(255,255,255,.28) 42%, rgba(255,255,255,.06) 56%, transparent 72%);
      opacity: .55;
      }

    .sl-avatar-wrap {

      padding: 18px 14px 14px;
      }

    .sl-info, .sl-song-block, .sl-bio-block {

      padding: 12px 14px;
      }

    .sl-actions {

      padding: 10px;
      margin-top: 0;
      }

    .np-widget {

      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.20);
      box-shadow:
        0 10px 24px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.52);
      overflow: hidden;
      }

    .panties-widget {

      margin: 0;
      padding: 10px 4px;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.30) 45%, rgba(255,255,255,.18)),
        rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow:
        0 14px 30px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.72),
        inset 0 -18px 28px rgba(0,0,0,.035);
      backdrop-filter: blur(16px) saturate(1.18);
      -webkit-backdrop-filter: blur(16px) saturate(1.18);
      }

    .panties-widget .panties-svg {

      width: 118%;
      max-width: none;
      transform: translateX(-7.5%);
      transform-origin: center center;
      }

    .sl-avatar {

      box-shadow:
        0 12px 24px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.24);
      }

    .fans-star-wrap {

      width: 178px;
      height: 156px;
      margin: 2px auto 4px;
      }

    #fans-star-svg {

      width: 178px;
      height: 156px;
      }

}

/* ── Desktop nav: fully remove long header surface in both dark and light ── */
@media (min-width: 769px) {

    .nav, html:not(.light-mode) .nav, html.light-mode .nav {

    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    border: 0;
    position: sticky;
    top: 0;
    z-index: 300;
    height: 86px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    overflow: visible;
    pointer-events: none;
      }

    .nav::before, .nav::after, html:not(.light-mode) .nav::before, html:not(.light-mode) .nav::after, html.light-mode .nav::before, html.light-mode .nav::after {

    display: none;
    content: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
    opacity: 0;
      }

    .nav:hover {

      background: transparent;
      background-color: transparent;
      background-image: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      }

}

/* ── Custom background modal built-in texture controls + dropdown theme row ── */
#custom-bg-modal .cb-builtins-row {

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--s2);
}

#custom-bg-modal .cb-sub {

  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--ink3);
  margin-top: 4px;
}

#custom-bg-modal .cb-texture-actions {

  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#custom-bg-modal #texture-label {

  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink3);
  min-width: 58px;
  text-align: right;
}

/* ── Settings dropdown theme color selector ── */
#nav-settings-dropdown .nav-accent-row {

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.035);
}

body:not(.talk-admin) #nav-settings-dropdown .nav-accent-row.talk-admin-only {

  display: none;
}

body:not(.talk-admin) #nav-settings-dropdown.settings-menu-open .nav-accent-row.talk-admin-only, body:not(.talk-admin) #nav-settings-dropdown.mobile-settings-open .nav-accent-row.talk-admin-only {

  display: none;
}

#nav-settings-dropdown .nav-accent-copy {

  display: flex;
  flex-direction: column;
  min-width: 0;
}

#nav-settings-dropdown .nav-accent-title {

  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink3);
}

#nav-settings-dropdown .nav-accent-sub {

  font-size: 12px;
  color: var(--ink);
  margin-top: 2px;
}

#nav-settings-dropdown .nav-accent-swatches {

  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#nav-settings-dropdown .nav-accent-swatch {

  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: var(--sw);
  padding: 0;
  cursor: var(--fd-cursor-action);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

#nav-settings-dropdown .nav-accent-swatch.on {

  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

#nav-settings-dropdown #nav-accent-custom {

  width: 22px;
  height: 22px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 0;
  background: transparent;
  overflow: hidden;
  cursor: var(--fd-cursor-action);
}

#nav-settings-dropdown .nav-cursor-controls {

  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#nav-settings-dropdown .nav-cursor-picker {

  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 0;
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink3);
  cursor: var(--fd-cursor-action);
}

#nav-settings-dropdown .nav-cursor-picker input {

  width: 22px;
  height: 22px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 0;
  background: transparent;
  overflow: hidden;
  cursor: var(--fd-cursor-action);
}

/* ── Scrollables desktop: compact grid + real viewer stage, no giant white canvas ── */
@media (min-width: 769px) {

    #page-scrollables.active {

      position: relative;
      height: calc(100vh - 86px);
      min-height: 0;
      overflow: hidden;
      background: transparent;
      }

    #page-scrollables.active .scrollables-layout {

      width: 100%;
      max-width: none;
      height: 100%;
      min-height: 0;
      margin: 0;
      padding: 0;
      display: block;
      position: relative;
      overflow: hidden;
      }

    #page-scrollables.active .scrollables-left-panel {

      position: fixed;
      left: 16px;
      top: 96px;
      bottom: 16px;
      width: 272px;
      height: auto;
      min-height: 0;
      overflow-y: auto;
      padding: 10px;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.28) 48%, rgba(255,255,255,.14)),
        rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.22);
      box-shadow:
        0 14px 34px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.72);
      backdrop-filter: blur(16px) saturate(1.16);
      -webkit-backdrop-filter: blur(16px) saturate(1.16);
      z-index: 4;
      }

    #page-scrollables.active .scroll-thumb-grid {

      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      align-content: start;
      }

    #page-scrollables.active .scrollables-right {

      position: fixed;
      left: 50vw;
      top: 86px;
      bottom: 0;
      transform: translateX(-50%);
      width: min(380px, calc(100vw - 720px));
      min-width: 325px;
      height: 100%;
      min-height: 0;
      overflow: hidden;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      z-index: 2;
      }

    #page-scrollables.active #scroll-grid-btn {

      display: none;
      }

    #page-scrollables.active .feed-wrap, #page-scrollables.active .feed-wrap > div, #page-scrollables.active #scrollables-grid {

      width: 100%;
      max-width: none;
      height: 100%;
      min-height: 0;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background: transparent;
      }

    #page-scrollables.active .tiktok-embed {

      display: block;
      }

    #page-scrollables.active .tiktok-embed:not(.is-current) {

      position: absolute;
      left: -10000px;
      top: 0;
      width: 360px;
      max-width: 360px;
      min-width: 325px;
      height: 640px;
      max-height: 640px;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      overflow: hidden;
      }

    #page-scrollables.active .tiktok-embed.is-current {

      --scroll-tiktok-scale: 1.1;
      position: relative;
      left: auto;
      top: auto;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: 100%;
      min-height: 0;
      max-height: 100%;
      align-self: stretch;
      flex: 0 0 auto;
      margin: 0 auto;
      display: flex;
      align-items: stretch;
      justify-content: center;
      border-radius: 0;
      overflow: hidden;
      background: transparent;
      box-shadow: none;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      }

  #page-scrollables.active .tiktok-embed.is-current iframe {

      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: calc(100% / var(--scroll-tiktok-scale));
      min-height: 0;
      max-height: none;
      flex: 0 0 100%;
      align-self: stretch;
      aspect-ratio: auto;
      border-radius: 0;
      pointer-events: auto;
      transform: scale(var(--scroll-tiktok-scale));
      transform-origin: top center;
    }

    #page-scrollables.active .scroll-swipe-lane {

      display: none;
    }

}

#page-community #widgetbot-container [data-warmed="1"] {

  display: block;
  width: 100%;
  height: 100%;
}

/* ── Settings dropdown open state ── */
#nav-settings-dropdown.settings-menu-open {

  display: block;
  position: fixed;
  z-index: 2147483647;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {

    #nav-settings-dropdown.settings-menu-open {

      left: 10px;
      right: 10px;
      top: 58px;
      width: auto;
      min-width: 0;
      max-width: none;
      max-height: calc(100svh - 76px);
      overflow-y: auto;
      }

    #mob-settings-btn {

      pointer-events: auto;
      touch-action: manipulation;
      }

}

/* ── Desktop nav: settings is a bare hamburger, not image/bubble ── */
@media (min-width: 769px) {

    #nav-settings-btn, #nav-settings-btn:hover {

      background: transparent;
      background-image: none;
      box-shadow: none;
      border: none;
      }

}

/* ── Dark mode nav: remove black header slab ── */

html:not(.light-mode) .nav::before, html:not(.light-mode) .nav::after {
  display: none;
  content: none;
  background: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  opacity: 0;
}

/* ── Dark mode desktop header: no black strip behind nav ── */

html:not(.light-mode) body::before {

  display: none;
  content: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  opacity: 0;
}

/* ── Profile Discography header: short label, no full-width slab ── */
#page-profile .discography-section-bar, #page-profile .section-bar:has(+ #grid-music), #page-profile .section-bar:has(+ .music-grid), #page-profile .section-bar:has(.discography-section-title) {

  width: auto;
  max-width: max-content;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 7px 10px;
  margin: 0 0 3px 3px;
  border: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
  border-radius: 999px;
  background: var(--s1);
  position: relative;
  top: auto;
  z-index: 1;
  align-self: flex-start;
}

#page-profile .discography-section-bar .section-bar-title, #page-profile .section-bar:has(+ #grid-music) .section-bar-title, #page-profile .section-bar:has(+ .music-grid) .section-bar-title, #page-profile .discography-section-title {

  width: auto;
  max-width: max-content;
  min-width: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1;
  margin: 0;
}

#page-profile .discography-section-bar .section-bar-add, #page-profile .section-bar:has(+ #grid-music) .section-bar-add, #page-profile .section-bar:has(+ .music-grid) .section-bar-add {

  flex: 0 0 auto;
}

/* keep other Profile section bars normal unless they are the Discography header */
#page-profile .section-bar:not(.discography-section-bar, :has(+ #grid-music), :has(+ .music-grid)) {

  width: 100%;
}

/* ── Desktop Profile: YouTube grid sized around true 16:9 thumbnails ── */
@media (min-width: 769px) {

    #page-profile .feat-container {

      display: grid;
      grid-template-columns: minmax(520px, 38%) minmax(0, 1fr);
      align-items: start;
      gap: 14px;
      }

    #page-profile .feat-container > div:first-child {

      min-width: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      }

    #page-profile #yt-list-side {

      width: 100%;
      height: auto;
      min-height: 0;
      max-height: none;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: auto;
      gap: 6px;
      align-content: start;
      overflow: visible;
      margin-top: 0;
      padding: 0;
      }

    #page-profile #yt-list-side .yt-item {

      height: auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      }

    #page-profile #yt-list-side .yt-thumb {

      width: 100%;
      aspect-ratio: 16 / 9;
      height: auto;
      min-height: 0;
      padding-bottom: 0;
      flex: 0 0 auto;
      }

    #page-profile #yt-list-side .yt-thumb img, #page-profile #yt-list-side .yt-thumb iframe {

      width: 100%;
      height: 100%;
      object-fit: cover;
      }

    #page-profile #yt-list-side .yt-info {

      flex: 0 0 auto;
      }

}

/* ── Nav right controls geometry only ── */
@media (min-width: 769px) {

    .nav-icons {

      position: fixed;
      top: 0;
      right: 18px;
      left: auto;
      height: 86px;
      min-height: 86px;
      max-height: 86px;
      transform: none;
      margin: 0;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      width: auto;
      min-width: 0;
      max-width: calc(100vw - 36px);
      z-index: 1001;
      pointer-events: auto;
      }

    #nav-live.nav-live-mini {

      width: 64px;
      min-width: 64px;
      max-width: 64px;
      height: 64px;
      min-height: 64px;
      max-height: 64px;
      flex: 0 0 64px;
      padding: 0;
      margin: 0;
      transform: none;
      align-self: center;
      border-radius: 16px;
      overflow: hidden;
      }

    #nav-settings-btn {

      width: 24px;
      min-width: 24px;
      max-width: 24px;
      height: 64px;
      min-height: 64px;
      max-height: 64px;
      flex: 0 0 24px;
      margin: 0;
      padding: 0;
      transform: none;
      border: none;
      border-radius: 0;
      background: transparent;
      background-image: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      }

    #nav-settings-btn::before, #nav-settings-btn::after {

      display: none;
      content: none;
      }

    #nav-settings-btn img, #nav-av-img {

      display: none;
      }

    #nav-settings-btn svg {

      display: block;
      width: 18px;
      height: 18px;
      }

}

body.dark-mode .nav {

  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 300;
    height: 86px;
    min-height: 86px;
    border: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    overflow: visible
}

html.dark-mode .nav {

  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 300;
    height: 86px;
    min-height: 86px;
    border: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    overflow: visible
}

html:not(.light-mode) .nav-center {

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 320;
    pointer-events: auto;
    gap: 12px;
    padding: 0 6px;
    overflow: visible;
    transition: transform .18s ease
}

body.dark-mode .nav-center {

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 320;
    pointer-events: auto;
    gap: 12px;
    padding: 0 6px;
    overflow: visible;
    transition: transform .18s ease
}

html.dark-mode .nav-center {

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 320;
    pointer-events: auto;
    gap: 12px;
    padding: 0 6px;
    overflow: visible;
    transition: transform .18s ease
}

.nav::before {

    display: none;
    content: none;
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    opacity: 0
}

html:not(.light-mode) .nav::before {

    display: none;
    content: none;
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    opacity: 0
}

body.dark-mode .nav::before {

    display: none;
    content: none;
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    opacity: 0
}

body.dark-mode .nav::after {

    display: none;
    content: none;
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    opacity: 0
}

html.dark-mode .nav::before {

    display: none;
    content: none;
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    opacity: 0
}

html.dark-mode .nav::after {

    display: none;
    content: none;
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    opacity: 0
}

/* ── Dark mode transparent header: nav controls stay black ── */
html:not(.light-mode) .nav, body.dark-mode .nav, html.dark-mode .nav {

  background: transparent;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  color: #000;
}

html:not(.light-mode) .nav .main-nav-btn, html:not(.light-mode) .nav .main-nav-btn .nb-label, html:not(.light-mode) .nav .main-nav-btn .nb-icon, html:not(.light-mode) .nav .main-nav-btn .nb-icon svg, html:not(.light-mode) .nav .main-nav-btn .nb-icon span, html:not(.light-mode) .nav .nav-av, html:not(.light-mode) .nav .nav-av svg, html:not(.light-mode) #nav-live, html:not(.light-mode) #nav-live .nb-label, html:not(.light-mode) #nav-live .nb-icon, html:not(.light-mode) #nav-live .nb-icon svg, html:not(.light-mode) #nav-live .nb-icon span, html:not(.light-mode) .nav-live-mini, html:not(.light-mode) .nav-live-mini .nb-label, html:not(.light-mode) .nav-live-mini .nb-icon, html:not(.light-mode) .nav-live-mini .nb-icon svg, html:not(.light-mode) .nav-live-mini .nb-icon span, html:not(.light-mode) #nav-settings-btn, html:not(.light-mode) #nav-settings-btn svg, html:not(.light-mode) #nav-settings-btn span, body.dark-mode .nav .main-nav-btn, body.dark-mode .nav .main-nav-btn .nb-label, body.dark-mode .nav .main-nav-btn .nb-icon, body.dark-mode .nav .main-nav-btn .nb-icon svg, body.dark-mode .nav .main-nav-btn .nb-icon span, body.dark-mode #nav-live, body.dark-mode #nav-live .nb-label, body.dark-mode #nav-live .nb-icon, body.dark-mode #nav-live .nb-icon svg, body.dark-mode .nav-live-mini, body.dark-mode .nav-live-mini .nb-label, body.dark-mode .nav-live-mini .nb-icon, body.dark-mode .nav-live-mini .nb-icon svg, body.dark-mode #nav-settings-btn, body.dark-mode #nav-settings-btn svg {

  color: #000;
  stroke: #000;
  fill: none;
}

html:not(.light-mode) .nav .main-nav-btn .nb-star polygon, html:not(.light-mode) #nav-live .nb-star polygon, html:not(.light-mode) .nav-live-mini .nb-star polygon, body.dark-mode .nav .main-nav-btn .nb-star polygon, body.dark-mode #nav-live .nb-star polygon, body.dark-mode .nav-live-mini .nb-star polygon {

  stroke: rgba(0, 0, 0, 0.6);
}

html:not(.light-mode) .nav .main-nav-btn.active .nb-label, html:not(.light-mode) .nav .main-nav-btn.on .nb-label, html:not(.light-mode) .nav .main-nav-btn.active .nb-icon svg, html:not(.light-mode) .nav .main-nav-btn.on .nb-icon svg, body.dark-mode .nav .main-nav-btn.active .nb-label, body.dark-mode .nav .main-nav-btn.on .nb-label, body.dark-mode .nav .main-nav-btn.active .nb-icon svg, body.dark-mode .nav .main-nav-btn.on .nb-icon svg {

  color: #000;
  stroke: #000;
}

html:not(.light-mode) #nav-settings-btn::before, html:not(.light-mode) #nav-settings-btn::after, body.dark-mode #nav-settings-btn::before, body.dark-mode #nav-settings-btn::after {

  background: #000;
  color: #000;
}

/* ── Background canvas: default light stone, explicit dark concrete only ── */

/* Default canvas: stone. This covers users before/without any class too. */
html {

  background-color: var(--bg);
  background-image: var(--site-stone-bg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
}

body {

  background-color: transparent;
  background-image: none;
}

/* Theme classes affect UI colors only; the selected texture/custom background owns the page canvas. */

/* Live zebra removed: live uses same normal canvas logic. */
html.live-page-active {

  background-color: var(--bg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
}

/* App wrappers stay transparent so the document canvas is the single source of truth. */
#app, #app-root, main, .app {

  background-image: none;
}

/* Pages/header/nav/wrappers never own background images. */
.page, .page.active, #page-live, #page-community, #page-community.active, #page-community:not([data-loaded="1"]), #page-community.page-loading, #page-community.page-loading .page-loader, #page-community > div, #page-community > div > div, #page-community > *, .nav, header, #mobile-top-bar, #mobile-bottom-bar {

  background-image: none;
}

#page-community > div {

  width: 100%;
  max-width: none;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}

.nav::before, .nav::after, header::before, header::after, #mobile-top-bar::before, #mobile-top-bar::after, #mobile-bottom-bar::before, #mobile-bottom-bar::after, #page-community > *::before, #page-community > *::after {

  display: none;
  content: none;
  background-image: none;
  opacity: 0;
}

/* ── Header/nav background ownership impossible ── */
.nav, header, #mobile-top-bar, #mobile-bottom-bar, html.light-mode .nav, html.dark-mode .nav, html:not(.light-mode) .nav, body.light-mode .nav, body.dark-mode .nav, html.live-page-active .nav, body.live-page-active .nav, html.community-page-active .nav, body.community-page-active .nav, html.light-mode #mobile-top-bar, html.light-mode #mobile-bottom-bar, html.dark-mode #mobile-top-bar, html.dark-mode #mobile-bottom-bar, html:not(.light-mode) #mobile-top-bar, html:not(.light-mode) #mobile-bottom-bar, body.dark-mode #mobile-top-bar, body.dark-mode #mobile-bottom-bar, body.light-mode #mobile-top-bar, body.light-mode #mobile-bottom-bar {

  background-image: none;
  background-size: auto;
  background-repeat: initial;
  background-position: initial;
  background-attachment: initial;
  border-image: none;
}

.nav::before, .nav::after, header::before, header::after, #mobile-top-bar::before, #mobile-top-bar::after, #mobile-bottom-bar::before, #mobile-bottom-bar::after, html.light-mode .nav::before, html.light-mode .nav::after, html.dark-mode .nav::before, html.dark-mode .nav::after, html:not(.light-mode) .nav::before, html:not(.light-mode) .nav::after, body.dark-mode .nav::before, body.dark-mode .nav::after, html.live-page-active .nav::before, html.live-page-active .nav::after, body.live-page-active .nav::before, body.live-page-active .nav::after, html.community-page-active .nav::before, html.community-page-active .nav::after, body.community-page-active .nav::before, body.community-page-active .nav::after {

  display: none;
  content: none;
  background-image: none;
  opacity: 0;
}

/* ── Community source layout: transparent outer canvas ── */
#page-community {

  background: transparent;
  background-color: transparent;
  background-image: none;
  min-height: calc(100vh - 80px);
  overflow: auto;
}

#widgetbot-container {

  background: transparent;
  background-color: transparent;
  background-image: none;
  min-height: calc(100vh - 96px);
  width: 100%;
}

#page-community #widgetbot-container > * {

  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
    rgba(12, 11, 10, .92);
}


/* ── Scrollables desktop TikTok link panel ── */
@media (min-width: 769px) {
  #page-scrollables.active .scrollables-layout,
  #page-scrollables .scrollables-layout {
    grid-template-columns: 300px minmax(360px, 680px) 300px;
    max-width: 1320px;
  }

  #page-scrollables .scrollables-links-panel {
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35) inset;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}

.scroll-links-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.scroll-links-head span {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink);
}

.scroll-links-head small {
  display: block;
  margin-top: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink3);
}

.scroll-link-add {
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--ink2);
  font: 9px/1 'DM Mono', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 9px;
  cursor: var(--fd-cursor-action);
}

.scroll-links-bubbles,
.scroll-mobile-tiktok-links {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
}

.scroll-tiktok-link-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.scroll-tiktok-link-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  color: var(--ink);
  font: 10px/1 'DM Mono', monospace;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  overflow: hidden;
  text-overflow: ellipsis;
}

.scroll-tiktok-link-edit {
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: var(--ink3);
  font: 8px/1 'DM Mono', monospace;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 6px 7px;
  cursor: var(--fd-cursor-action);
}

.scroll-tiktok-link-delete {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: var(--ink3);
  font: 15px/1 sans-serif;
  cursor: var(--fd-cursor-action);
}

body:not(.talk-admin) .scroll-tiktok-link-delete,
.scroll-mobile-tiktok-links .scroll-tiktok-link-delete {
  display: none;
}

#scroll-link-editor {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#scroll-link-editor.open { display: flex; }

.scroll-link-editor-panel {
  width: min(420px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 20px;
  background: linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.48)),rgba(255,255,255,.38);
  box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(22px) saturate(1.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.14);
}

.scroll-link-editor-head,
.scroll-link-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scroll-link-editor-head {
  margin-bottom: 16px;
  color: var(--ink);
  font: 800 11px/1 'DM Mono',monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.scroll-link-editor-head button,
.scroll-link-editor-actions button {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  color: var(--ink2);
  padding: 8px 12px;
  cursor: var(--fd-cursor-action);
  font: 9px/1 'DM Mono',monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.scroll-link-editor-head button {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 15px;
}

.scroll-link-editor-panel label {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: var(--ink3);
  font: 9px/1 'DM Mono',monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.scroll-link-editor-panel input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 11px;
  background: rgba(255,255,255,.54);
  color: var(--ink);
  padding: 11px 12px;
  outline: none;
  font: 12px/1.3 'DM Mono',monospace;
}

.scroll-link-editor-panel input:focus {
  border-color: var(--pk);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--pk) 18%,transparent);
}

.scroll-link-editor-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.scroll-link-editor-actions button.primary {
  border-color: var(--pk);
  background: var(--pk);
  color: #fff;
}

@media (max-width: 768px) {
  #page-scrollables .scrollables-links-panel {
    display: none;
  }

  #page-scrollables .scroll-mobile-tiktok-links {
    flex: 0 0 auto;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--s2);
  }

  #page-scrollables .scroll-mobile-tiktok-links .scroll-tiktok-link-bubble {
    min-height: 24px;
    padding: 6px 9px;
    font-size: 8px;
    letter-spacing: .9px;
  }

  #page-scrollables .scroll-mobile-tiktok-links .scroll-tiktok-link-edit {
    display: none;
  }
}


/* ── Scrollables admin thumbnail saturation toggle ── */
.scroll-tiktok-style-control {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.scroll-tiktok-style-control span {
  color: var(--ink3);
  font: 9px/1 'DM Mono', monospace;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.scroll-tiktok-desat-toggle {
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--ink2);
  font: 9px/1 'DM Mono', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 10px;
  cursor: var(--fd-cursor-action);
}

.scroll-tiktok-desat-toggle.is-on {
  background: rgba(255,255,255,.18);
  color: var(--ink);
}

#page-scrollables.scroll-tiktok-thumbs-desaturated .scroll-thumb img,
#page-scrollables.scroll-tiktok-thumbs-desaturated .scroll-thumb > div:first-child {
  filter: grayscale(1) saturate(0);
}

#page-scrollables .scroll-thumb img,
#page-scrollables .scroll-thumb > div:first-child {
  transition: filter .22s ease;
}

#page-scrollables .scroll-thumb {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.12));
}

#page-scrollables .scroll-thumb-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink3);
  font: 11px/1 'DM Mono', monospace;
  letter-spacing: 1px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.38), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.3), rgba(255,255,255,.08));
}

#page-scrollables .scroll-thumb img {
  position: relative;
  z-index: 1;
}


/* ── Final desktop hamburger contrast ring for dark/image backgrounds ── */
@media (min-width: 769px) {
  body #nav-settings-btn {
    position: relative;
    isolation: isolate;
  }

  body #nav-settings-btn::before {
    display: none;
    content: none;
  }

  body #nav-settings-btn::after {
    display: none;
    content: none;
  }

  body #nav-settings-btn svg {
    position: relative;
    z-index: 1;
    filter:
      drop-shadow(0 1px 0 rgba(255,255,255,.72))
      drop-shadow(0 1px 1px rgba(0,0,0,.72));
  }
}


/* ── Final Scrollables desktop: mirrored TikTok links panel matches thumbnail panel ── */
@media (min-width: 769px) {
  #page-scrollables.active .scrollables-links-panel {
    position: fixed;
    right: 16px;
    top: 96px;
    bottom: 16px;
    width: 272px;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.28) 48%, rgba(255,255,255,.14)),
      rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
      0 14px 34px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.72);
    backdrop-filter: blur(16px) saturate(1.16);
    -webkit-backdrop-filter: blur(16px) saturate(1.16);
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}


/* Hidden logout stays hidden inside the settings menu. */
#nav-settings-dropdown #nav-logout-btn[hidden] {
  display: none;
}

/* Desktop Scrollables link panel: full-panel bubbles plus thumbnail style control. */
@media (min-width: 769px) {
  #page-scrollables .scroll-links-bubbles {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    grid-auto-rows: minmax(92px, 1fr);
    gap: 12px;
    align-content: stretch;
  }

  #page-scrollables .scroll-tiktok-link-wrap {
    display: flex;
    min-width: 0;
    min-height: 0;
    position: relative;
  }

  #page-scrollables .scroll-tiktok-link-bubble {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 92px;
    border-radius: 24px;
    font-size: 13px;
    letter-spacing: 1.8px;
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.07));
  }

  #page-scrollables .scroll-tiktok-link-edit {
    position: absolute;
    top: 8px;
    right: 8px;
  }

  #page-scrollables .scroll-link-add {
    align-self: flex-end;
    margin-bottom: 0;
  }
}

#page-scrollables .scroll-grid-style-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  margin: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#page-scrollables .scroll-grid-style-overlay span {
  display: none;
}

body:not(.talk-admin) #page-scrollables .scroll-grid-style-overlay {
  display: none;
}

.scroll-mobile-style-overlay {
  display: none;
  padding: 8px 12px 0;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  body:not(.talk-admin) #page-scrollables .scroll-mobile-style-overlay {
    display: none;
  }
}


/* Scrollables desktop link cards fill the fixed right panel. */
@media (min-width: 769px) {
  #page-scrollables.active .scroll-links-bubbles {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-content: stretch;
  }

  #page-scrollables.active .scroll-tiktok-link-wrap {
    position: relative;
    display: flex;
    flex: 1 1 0;
    width: 100%;
    min-height: 72px;
  }

  #page-scrollables.active .scroll-tiktok-link-bubble {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 22px;
    font-size: 13px;
    letter-spacing: 2px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.16)),
      rgba(255,255,255,.12);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.42),
      0 10px 24px rgba(0,0,0,.08);
  }

  #page-scrollables.active .scroll-tiktok-link-edit {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
  }
}