:root {
  /* palette */
  --bg: #0e0e0f;
  --border: #363636;
  --text: #e8e8e8;
  --text-dim: #7a7a7a;
  --new: rgb(29, 155, 241);
  --accent: #f97316;
  --gradient-purple-orange: linear-gradient(180deg, #db4a6a, #f0883a);
  --gradient-green-blue: linear-gradient(180deg, #14b8a6, #38bdf8);
  --gradient-green-blue-dark: linear-gradient(180deg, #0d3d38, #14304d);
  --panel-bg: #141416;
  --follow-none: #555;
  --follow-following: #0f6fb8;
  --follow-subscribed: #d4af37;

  /* motion */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --layout-ease: var(--ease);
  --layout-duration: 0.22s;
  --pane-exit-duration: 0.12s;

  /* nav layout */
  --nav-bar-size: 4rem;
  --nav-col-left: 4.5rem;
  --nav-col-right: var(--nav-col-left);
  --nav-gap: 1.5rem;
  --nav-padding: 1.5rem;
  --nav-padding-tight: 0.75rem;
  --nav-group-gap: 0.5rem;
  --nav-cluster-gap: 0.75rem;
  --avatar-gap: 0.4rem;
  --nav-item-max: 12rem;
  --icon-size: 3rem;
  --avatar-size: 2.25rem;
  --level-dot-size: 1.02rem;
  --level-gap: 0.6rem;

  /* pane layout */
  --main-padding: 0;
  --pane-radius: 0.65rem;
  --pane-gap: 0.25rem;
  --split-gap: 4.75rem;
  --pane-content-padding: 0.75rem;
  --pane-top-bar: 1.5rem;
  --layout-standard-alpha: 2;
  --layout-standard-gamma: 1;

  /* cards & composer */
  --card-font-size: 0.85rem;
  --card-line-height: 1.4;
  --card-bg: rgba(0, 0, 0, 0.55);
  --card-radius: 0.75rem;
  --card-padding: 1rem;
  --composer-font-size: calc(var(--card-font-size) * 1.4);
  --trend-avatar-col: 2.1rem; /* avatar width + header gap, so text/stats align to the name and leave runway under the avatar */
  --thread-gap: 1px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.app {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: var(--nav-col-left) 1fr var(--nav-col-right);
  grid-template-rows: var(--nav-bar-size) 1fr var(--nav-bar-size);
  grid-template-areas:
    "left top    right"
    "left main   right"
    "left bottom right";
}

.nav {
  display: flex;

  a {
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;

    &:hover {
      color: #fff;
    }
  }

  .label {
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  &.top, &.bottom {
    align-items: center;
    padding: 0 var(--nav-padding);
  }

  &.top {
    grid-area: top;
    justify-content: space-between;
    padding-right: 0;
  }

  &.bottom {
    grid-area: bottom;
    justify-content: space-between;
  }

  &.left {
    grid-area: left;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: var(--nav-bar-size) var(--nav-padding-tight) var(--nav-bar-size);
    gap: var(--nav-gap);
  }

  &.right {
    grid-area: right;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--nav-bar-size) var(--nav-padding-tight) var(--nav-bar-size);
  }
}

.nav-items {
  display: flex;
  align-items: center;

  > * + * {
    margin-left: var(--nav-gap);
  }
}

.nav.top [data-level],
.nav.bottom [data-level] {
  display: inline-block;
  max-width: var(--nav-item-max);
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.35s var(--ease), max-width 0.35s var(--ease), margin-left 0.35s var(--ease),
    transform 0.2s var(--ease);

  &.is-hidden {
    opacity: 0;
    max-width: 0;
    margin-left: 0;
    pointer-events: none;
  }
}

.nav.top .icon-btn[data-level] {
  max-width: var(--icon-size);
}

.main {
  grid-area: main;
  padding: var(--main-padding);
  display: flex;
  min-height: 0;
}

.pane.alpha {
  position: relative;
  overflow: visible;
}

.pane-clip {
  height: 100%;
  border-radius: var(--pane-radius);
  background: var(--panel-bg);
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.pane {
  height: 100%;
  min-height: 0;
  min-width: 0;
  border-radius: var(--pane-radius);
  background: var(--panel-bg);
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: flex var(--layout-duration) var(--layout-ease), margin-right var(--layout-duration) var(--layout-ease),
    border-color var(--layout-duration) var(--layout-ease), transform var(--pane-exit-duration) var(--ease-snappy),
    opacity var(--pane-exit-duration) var(--ease);

  &::-webkit-scrollbar {
    display: none;
  }

  .view {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease-snappy);

    &[hidden] {
      display: none;
    }

    &.slide-offset {
      opacity: 0;
      transform: translateY(3rem);
    }
  }

  .hint {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.85rem;
    text-align: center;
  }

  .profile-view, .viral-view {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    justify-content: normal;
    padding: 0;
  }

  .alpha-empty-view {
    position: relative;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    background: var(--gradient-green-blue);
    container-type: size;
  }
}

/*
  Each gamma sub-view (post/notifications/detail) carries its own full
  "pane" chrome — background, rounded corners, top bar, close button —
  so switching between them looks like whole containers swapping. All
  three sit stacked (inset: 0) at full size in the same spot; the
  outgoing one disappears instantly (no transition) while the incoming
  one fades in.
*/
.gamma-content {
  position: relative;
  height: 100%;
}

.gamma-view {
  position: absolute;
  inset: 0;
  border-radius: var(--pane-radius);
  padding-top: var(--pane-top-bar);
  overflow: visible;
  background: var(--gradient-green-blue);
  opacity: 0;
  pointer-events: none;
}

#gamma-pane:not([data-active-view="post"]) .post-view,
#gamma-pane:not([data-active-view="notifications"]) .notifications-view,
#gamma-pane:not([data-active-view="detail"]) .tweet-detail-view {
  transition: none;
}

#gamma-pane[data-active-view="post"] .post-view,
#gamma-pane[data-active-view="notifications"] .notifications-view,
#gamma-pane[data-active-view="detail"] .tweet-detail-view {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--layout-duration) var(--ease);
}

.view.post-view {
  align-items: stretch;
  justify-content: flex-start;
  background: var(--gradient-purple-orange);
  padding: var(--pane-content-padding) var(--pane-content-padding) var(--nav-padding);
}

.view.notifications-view {
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--pane-content-padding);
}

.view.tweet-detail-view {
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--pane-content-padding);
  padding: 0;
  background: var(--gradient-green-blue-dark);
  color: #fff;
  font-size: var(--card-font-size);
  line-height: var(--card-line-height);
}

.tweet-detail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--pane-content-padding);
  gap: var(--thread-gap);
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.tweet-detail-thread {
  display: flex;
  flex-direction: column;
  gap: var(--thread-gap);

  &:empty {
    display: none;
  }
}

.tweet-detail-comments {
  display: flex;
  flex-direction: column;
  margin-top: var(--pane-content-padding);

  &:empty {
    display: none;
  }
}

.detail-reply {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 var(--pane-content-padding) var(--pane-content-padding);
  padding: var(--pane-content-padding);
  border-radius: var(--card-radius);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--card-bg);
  backdrop-filter: blur(6px);

  .composer-input {
    min-height: 2.5rem;
    max-height: 30vh;
    padding: 0.25rem 0;
    border: none;
    background: transparent;
    font-size: var(--card-font-size);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .reply-post-btn {
    align-self: flex-end;
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem;
  }
}

/*
  .main tracks a single toggle, .gamma-open, controlling whether the
  second pane is part of the layout — that pane hosts whichever of
  compose/notifications/tweet-detail is currently active internally
  (see data-active-view). It always stays in the DOM; when the toggle
  is off it collapses to zero flex and zero margin so alpha fills the
  space instead of leaving a gap.
*/
.main:not(.gamma-open) .pane.gamma {
  flex: 0 0 0%;
  margin-right: 0;
  border-color: transparent;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96);
}

.main:not(.gamma-open) .pane.alpha {
  flex: var(--layout-standard-alpha) 1 0%;
  margin-right: 0;
}

.main.gamma-open {
  .pane.alpha {
    flex: var(--layout-standard-alpha) 1 0%;
    margin-right: var(--pane-gap);
  }

  .pane.gamma {
    flex: var(--layout-standard-gamma) 1 0%;
    margin-right: 0;
  }
}

.composer {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--pane-content-padding);
  min-height: 0;
  padding-bottom: calc(2 * var(--pane-content-padding) + 3.3rem);
}

.composer-input {
  width: 100%;
  min-height: calc(5 * var(--composer-font-size) * var(--card-line-height) + 2.2rem + 2px);
  max-height: 100%;
  padding: 1.1rem 1.25rem;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--composer-font-size);
  line-height: var(--card-line-height);
  resize: none;
  outline: none;
  overflow: hidden;

  &::placeholder {
    color: rgba(255, 255, 255, 0.55);
  }
}

.composer-article {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  overflow: hidden;

  &[hidden] {
    display: none;
  }
}

.article-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.25);
}

.article-toolbar-divider {
  width: 1px;
  height: 1.2rem;
  margin: 0 0.25rem;
  background: var(--border);
}

.article-tool {
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);

  svg {
    width: 1rem;
    height: 1rem;
  }

  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

.composer-article-input {
  flex: 1;
  min-height: 0;
  padding: 1.1rem 1.25rem;
  overflow-y: auto;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: var(--card-line-height);
  white-space: pre-wrap;
  outline: none;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }

  &:empty::before {
    content: attr(data-placeholder);
    color: rgba(255, 255, 255, 0.55);
  }

  blockquote {
    margin: 0.5rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--border);
    color: var(--text-dim);
    font-style: italic;
  }

  ul, ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
  }

  a {
    color: var(--new);
    text-decoration: underline;
  }
}

.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.75rem;

  &[hidden] {
    display: none;
  }
}

.article-btn {
  border: none;
  background: transparent;
  padding: 0.35rem 0.5rem;
  margin: 0 0 0 -0.5rem;
  border-radius: 0.4rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);

  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  &[hidden] {
    display: none;
  }
}

.char-counter {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: auto;
  border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden;
  flex-shrink: 0;
}

.char-counter-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #fff;
  transition: height 0.15s var(--ease);
}

.new-tweets-btn {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  margin: 0;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 1rem 0.4rem 0.4rem;
  background: var(--new);
  color: #fff;
  cursor: pointer;
  transform: translateY(4rem);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--ease-snappy), opacity 0.3s var(--ease);

  &.showing {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  &.leaving {
    transform: translateY(-4rem);
    opacity: 0;
    pointer-events: none;
  }

  &.no-transition {
    transition: none;
  }

  &:hover {
    background: #1a8cd8;
  }

  &.passive {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;

    &:hover {
      background: rgba(0, 0, 0, 0.55);
    }
  }
}

#alpha-pane:has(.alpha-empty-view[hidden]) .new-tweets-btn {
  opacity: 0;
  pointer-events: none;
}

.new-tweets-avatars {
  display: flex;
  align-items: center;

  img {
    width: 1.6rem;
    height: 1.6rem;
    margin-left: -0.6rem;
    border: 2px solid var(--new);
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
    transition: border-color 0.2s var(--ease);

    &:first-child {
      margin-left: 0;
    }
  }
}

.new-tweets-btn.passive .new-tweets-avatars img {
  border-color: #d0d0d5;
}

.new-tweets-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;

  svg {
    width: 14px;
    height: 14px;
  }
}

.new-tweets-column {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column-reverse;
  padding: 0;
  padding-bottom: 40cqh;
  border-left: 1px solid transparent;
  transition: width 0.35s var(--ease-snappy), padding-inline 0.35s var(--ease-snappy), border-color 0.2s var(--ease);
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);

  &.shifting {
    animation: new-feed-shift 0.4s var(--ease-snappy);
  }

  &::-webkit-scrollbar {
    display: none;
  }
}

@keyframes new-feed-shift {
  from {
    transform: translateY(-2rem);
  }
  to {
    transform: translateY(0);
  }
}

.alpha-empty-view.new-col-open .new-tweets-column {
  width: 36rem;
  padding-inline: var(--pane-content-padding);
  border-left-color: rgba(255, 255, 255, 0.18);
}

.current-tweets-column {
  position: relative;
  flex: 0 1 36rem;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);

  &::-webkit-scrollbar {
    display: none;
  }
}

.trending-columns {
  display: flex;
  flex-direction: column;
  padding: var(--pane-content-padding);
  padding-top: 40cqh;
}

.trending-loading {
  padding: 0 0 var(--pane-content-padding);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--card-font-size);
  text-align: center;
  animation: trending-loading-pulse 1s ease-in-out infinite;

  &[hidden] {
    display: none;
  }
}

@keyframes trending-loading-pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

.trend-tweet {
  position: relative;
  margin-bottom: var(--pane-content-padding);
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  border: none;
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--card-font-size);
  line-height: var(--card-line-height);
  cursor: pointer;
  transition: opacity 0.25s var(--ease);

  &.popping {
    animation: trend-tweet-pop 0.3s var(--ease-snappy) backwards;
  }

  &:has(img[data-follow="subscribed"]) {
    border: 4px solid var(--follow-subscribed);
    margin-inline: -4px;
  }

  &.viral {
    border: none;
    background: rgba(0, 0, 0, 0.9);
  }
}

.profile-feed .trend-tweet:has(img[data-follow="subscribed"]) {
  border: none;
  margin-inline: 0;
}

.main.gamma-open:has(#gamma-pane[data-active-view="detail"]) #alpha-pane .trend-tweet:not(.detail-source) {
  opacity: 0.45;
}

@keyframes trend-tweet-pop {
  0% {
    transform: scale(0.96);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.trend-tweet-header {
  display: flex;
  align-items: center;
  column-gap: 0.35rem;
  margin-bottom: 0.5rem;

  &:not(:has(.trend-tweet-handle)) {
    margin-bottom: 0.1rem;
  }

  img {
    position: relative;
    top: -0.15rem;
    left: -0.325rem;
    width: 1.75rem;
    height: 1.75rem;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s var(--ease);

    &:hover {
      transform: scale(1.12);
    }

    &[data-follow="following"] {
      border-color: var(--follow-following);
    }

    &[data-follow="subscribed"] {
      border-color: var(--follow-subscribed);
    }
  }
}

.trend-tweet-headtext {
  display: flex;
  flex-direction: column;
}

.trend-tweet-nameline {
  display: flex;
  align-items: baseline;
  column-gap: 0.35rem;
}

.trend-tweet-name {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.1;
}

.verified-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  width: 0.95em;
  height: 0.95em;
  margin-left: -0.2rem;
  color: var(--new);

  svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  &[hidden] {
    display: none;
  }
}

.verified-badge-lg {
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.15em;
  vertical-align: middle;
}

.trend-tweet-time,
.trend-tweet-handle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
  line-height: 1.1;
}

.trend-tweet-handle:empty {
  display: none;
}

.trend-tweet-text {
  margin: 0 0 0.75rem;
  padding-left: var(--trend-avatar-col);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.trend-tweet-media {
  display: block;
  width: calc(100% - var(--trend-avatar-col));
  max-height: 50vh;
  object-fit: cover;
  border-radius: 0.5rem;
  margin: 0 0 0.75rem var(--trend-avatar-col);
  cursor: zoom-in;
}

.tweet-detail-card {
  position: relative;
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  border: none;
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  transition: border-radius 0.25s var(--ease);

  &.popping {
    animation: tweet-detail-pop 0.18s var(--ease-snappy);
  }

  &:has(img[data-follow="subscribed"]) {
    border: 4px solid var(--follow-subscribed);
    margin-inline: -4px;
  }

  &.viral {
    border: none;
    background: rgba(0, 0, 0, 0.9);
  }
}

@keyframes tweet-detail-pop {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.poll-results {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.poll-bars {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.poll-bar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s var(--ease);

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--fill, 0%);
    background: var(--new);
    opacity: 0.35;
    transition: opacity 0.2s var(--ease), width 0.4s var(--ease);
  }

  &:hover {
    border-color: rgba(255, 255, 255, 0.5);
  }

  &:hover::before {
    opacity: 0.45;
  }

  &.active {
    border-color: var(--new);
  }

  &.active::before {
    opacity: 0.6;
  }
}

.poll-bar-label,
.poll-bar-count {
  position: relative;
  z-index: 1;
}

.poll-bar-count {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.85);
}

.poll-more {
  margin: 0.6rem 0 0;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.thread-avatar {
  position: absolute;
  top: calc(var(--card-padding) - 0.15rem);
  left: calc(var(--card-padding) - 0.325rem);
  width: 1.75rem;
  height: 1.75rem;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  transition: border-color 0.2s var(--ease);

  &[data-follow="following"] {
    border-color: var(--follow-following);
  }

  &[data-follow="subscribed"] {
    border-color: var(--follow-subscribed);
  }
}

.thread-card.has-thread-line::after {
  content: "";
  position: absolute;
  top: calc(var(--card-padding) - 0.15rem + 1.75rem);
  bottom: calc(-1 * (var(--card-padding) + var(--thread-gap)));
  left: calc(var(--card-padding) - 0.325rem + 1.75rem / 2 - 1px);
  width: 2px;
  background: #3b3e41;
}

.tweet-detail-thread .thread-card {
  cursor: pointer;
}

#tweet-detail-scroll.thread-focus > .thread-card.has-thread-line {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#tweet-detail-scroll.thread-focus .tweet-detail-thread .thread-card {
  border-radius: 0;

  &:last-child {
    border-bottom-left-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
  }
}

.tweet-detail-thread .thread-card::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--card-padding));
  height: calc(2 * var(--card-padding) - 0.15rem);
  left: calc(var(--card-padding) - 0.325rem + 1.75rem / 2 - 1px);
  width: 2px;
  background: #3b3e41;
}

#tweet-detail-scroll.thread-focus {
  --thread-gap: 0rem;
}

#tweet-detail-scroll.thread-focus .tweet-detail-thread .thread-card {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

#tweet-detail-scroll.thread-focus .thread-card::before,
#tweet-detail-scroll.thread-focus .thread-card.has-thread-line::after {
  display: none;
}

.tweet-detail-text {
  margin: 0 0 0.75rem;
  padding-left: var(--trend-avatar-col);
  font-size: var(--card-font-size);
  line-height: var(--card-line-height);
}

#tweet-detail-text,
#viral-info-card .tweet-detail-text {
  font-size: var(--composer-font-size);
}


.thread-focus-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);

  svg {
    width: 1.05rem;
    height: 1.05rem;
  }

  &:hover {
    background: rgba(0, 0, 0, 0.6);
  }

  &.active {
    background: var(--new);
    color: #fff;
  }

  &[hidden] {
    display: none;
  }
}

#tweet-detail-scroll.thread-focus .trend-tweet-stats,
#tweet-detail-scroll.thread-focus .thread-index,
#tweet-detail-scroll.thread-focus .thread-avatar {
  display: none;
}

.post-btn, .reply-post-btn {
  border: none;
  border-radius: 999px;
  background: var(--new);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s var(--ease-snappy), background-color 0.2s var(--ease);

  &:hover {
    transform: scale(1.05);
  }
}

.post-btn {
  position: absolute;
  right: var(--pane-content-padding);
  bottom: var(--pane-content-padding);
  padding: 1rem 2rem;
  font-size: 1.05rem;
}

.reply-post-btn {
  flex-shrink: 0;
  padding: 0.65rem 1.35rem;
  font-size: 0.9rem;
}

.notif-list {
  height: 100%;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 0 1.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.notif-row {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  column-gap: 0.4rem;
  row-gap: 0.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);

  &:last-child {
    border-bottom: none;
  }
}

.notif-icon {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);

  svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  &.like {
    color: #f91880;
  }
}

.notif-avatars {
  grid-column: 2;
  grid-row: 1;
  display: flex;

  img {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-bg);
    margin-left: -0.6rem;
    cursor: pointer;

    &:first-child {
      margin-left: 0;
    }
  }
}

.notif-body {
  grid-column: 1 / span 2;
  grid-row: 2;
  min-width: 0;
}

.notif-text {
  margin: 0 0 0.2rem;
  font-size: 0.85rem;
  line-height: 1.3;
}

.notif-time {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

.notif-excerpt {
  margin: 0;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.notif-row.follow {
  grid-template-columns: 1.75rem 1fr auto;

  .notif-avatars {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .notif-body {
    display: contents;
  }

  .notif-text {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }

  .notif-excerpt {
    grid-column: 1 / span 2;
    grid-row: 2;
  }
}

.notif-media {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.5rem;
  object-fit: cover;
}

.trend-tweet-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  row-gap: 0.1rem;
  overflow-x: hidden;
  padding-left: var(--trend-avatar-col);

  .stat-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;

    svg {
      width: 0.9rem;
      height: 0.9rem;
      flex-shrink: 0;
    }
  }

  .stat-like {
    cursor: pointer;

    &:hover {
      color: #f91880;
    }

    &.liked {
      color: #f91880;
    }
  }

  .stat-bookmark {
    display: flex;
    align-items: center;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: color 0.2s var(--ease);

    svg {
      width: 0.9rem;
      height: 0.9rem;
      flex-shrink: 0;
    }

    &:hover {
      color: var(--new);
    }
  }
}

.heart-burst-particle {
  position: fixed;
  width: 0.9rem;
  height: 0.9rem;
  margin: -0.45rem 0 0 -0.45rem;
  color: #f91880;
  pointer-events: none;
  z-index: 300;
  animation: heart-burst 0.5s ease-out forwards;

  svg {
    width: 100%;
    height: 100%;
  }
}

@keyframes heart-burst {
  0% {
    transform: translate(0, 0) scale(0.4);
    opacity: 1;
  }
  100% {
    transform: translate(var(--burst-x), var(--burst-y)) scale(1);
    opacity: 0;
  }
}

.profile-info {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.viral-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pane-content-padding);
  padding: var(--pane-content-padding);
  background: var(--gradient-green-blue-dark);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.viral-comment-box {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--pane-content-padding);
  border-radius: var(--card-radius);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--card-bg);
  backdrop-filter: blur(6px);

  .composer-input {
    min-height: 0;
    max-height: 30vh;
    padding: 0.25rem 0;
    border: none;
    background: transparent;
    font-size: var(--card-font-size);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .reply-post-btn {
    align-self: flex-end;
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem;
  }

  &[hidden] {
    display: none;
  }

  &.popping {
    animation: tweet-detail-pop 0.18s var(--ease-snappy);
  }
}

.profile-banner {
  flex: 0 0 33%;
  overflow: hidden;
  border-bottom: 2px solid var(--follow-none);
  transition: border-color 0.2s var(--ease);

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

.profile-info[data-state="following"] .profile-banner {
  border-bottom-color: var(--follow-following);
}

.profile-info[data-state="subscribed"] .profile-banner {
  border-bottom-color: var(--follow-subscribed);
}

.profile-avatar {
  position: absolute;
  top: 33%;
  left: 2rem;
  transform: translateY(-50%);
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--follow-none);
  transition: border-color 0.2s var(--ease);
  z-index: 1;
}

.profile-info[data-state="following"] .profile-avatar {
  border-color: var(--follow-following);
}

.profile-info[data-state="subscribed"] .profile-avatar {
  border-color: var(--follow-subscribed);
}

.profile-body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 3.5rem 2rem 2rem;
}

.profile-pinned {
  margin-top: auto;
  padding: 0 2rem 1.5rem;

  &:empty {
    display: none;
  }
}

.pinned-tweet {
  position: relative;
  margin-bottom: 0;
  padding-right: calc(var(--card-padding) + 1.5rem);
}

.pin-badge {
  position: absolute;
  top: var(--card-padding);
  right: var(--card-padding);
  display: flex;
  color: rgba(255, 255, 255, 0.7);

  svg {
    width: 1rem;
    height: 1rem;
  }
}

.thread-badge {
  position: absolute;
  top: var(--card-padding);
  right: var(--card-padding);
  display: flex;
  color: rgba(255, 255, 255, 0.55);

  svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}

.profile-name {
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.profile-handle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: -0.35rem;
}

.profile-handle {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.follows-chip {
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  background: var(--border);
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 600;

  &[hidden] {
    display: none;
  }
}

.profile-follow-btn {
  position: absolute;
  top: 33%;
  right: 2rem;
  transform: translateY(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 8rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.55rem 0 0.55rem 1rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.15s var(--ease-snappy), background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);

  &:hover {
    transform: translateY(-50%) scale(1.05);
  }

  &[data-state="none"] {
    background: var(--panel-bg);
    color: #d0d0d0;
    border-color: var(--follow-none);
  }

  &[data-state="following"] {
    letter-spacing: -0.01rem;
    background: var(--follow-following);
    color: #fff;
    border-color: var(--follow-following);
  }

  &[data-state="subscribed"] {
    letter-spacing: -0.01rem;
    background: var(--follow-subscribed);
    color: #0e0e0f;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(
      100deg,
      transparent 30%,
      rgba(255, 255, 255, 0.95) 48%,
      rgba(255, 255, 255, 0.95) 52%,
      transparent 70%
    );
    background-size: 300% 100%;
    background-position: -150% 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
  }

  &.glistening::after {
    animation: follow-glisten 1.4s var(--ease);
  }
}

@keyframes follow-glisten {
  0% {
    background-position: 110% 0;
    opacity: 1;
  }
  100% {
    background-position: 0% 0;
    opacity: 1;
  }
}

.follow-dots {
  position: absolute;
  right: 0.2rem;
  top: 0.2rem;
  bottom: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  padding: 0 0.4rem;
  --follow-index: 0;
  --follow-dot-size: 5px;
}

.follow-thumb {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0.4rem;
  width: var(--follow-dot-size);
  height: var(--follow-dot-size);
  border-radius: 50%;
  background: #fff;
  transform: translate(calc(var(--follow-index) * (var(--follow-dot-size) + 0.12rem)), -50%) scale(1.3);
  transition: transform 0.2s var(--ease-snappy);
  pointer-events: none;
}

.follow-dot {
  position: relative;
  z-index: 1;
  width: var(--follow-dot-size);
  height: var(--follow-dot-size);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1.5rem;
  margin-top: 0.5rem;

  .stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;

    strong {
      font-size: 1.05rem;
      font-weight: 600;
    }

    span {
      color: var(--text-dim);
      font-size: 0.75rem;
    }
  }
}

.profile-feed, .viral-comments {
  grid-column: 2 / span 3;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--pane-content-padding);
  overflow-y: auto;
  padding: var(--pane-content-padding);
  background: var(--gradient-green-blue);
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.profile-feed-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.top-actions {
  display: flex;
  align-items: center;

  > * + * {
    margin-left: 0.5rem;
  }
}

.notif-bell {
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.2s var(--ease);

  svg {
    width: 55%;
    height: 55%;
  }

  &:hover {
    transform: scale(1.1);
  }
}

.notif-badge {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--new);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--bg);

  &[hidden] {
    display: none;
  }
}

.favorites {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nav-cluster-gap);

  .avatar-list {
    display: flex;
    flex-direction: column;
    gap: var(--avatar-gap);
  }
}

.fav-avatar {
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  padding: 2px;
  border: none;
  border-radius: 50%;
  background: var(--follow-subscribed);
  cursor: pointer;

  img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.15s var(--ease-snappy);
  }

  &:hover {
    img {
      transform: scale(1.3);
    }

    .tip {
      opacity: 1;
      transform: translate(0, -50%);
    }
  }

  .tip {
    position: absolute;
    left: calc(100% + 0.75rem);
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    background: #1c1c1e;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-0.5rem, -50%);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease-snappy);
    pointer-events: none;
    z-index: 50;

    strong {
      color: var(--text);
      font-size: 0.8rem;
      font-weight: 600;
    }

    small {
      color: var(--text-dim);
      font-size: 0.7rem;
    }
  }

  &[data-new]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--new);
    border: 2px solid var(--bg);
  }
}


.fav-ghost {
  position: fixed;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  z-index: 200;
  transition: top 0.35s var(--ease), left 0.35s var(--ease), width 0.35s var(--ease),
    height 0.35s var(--ease);
}

.avatar {
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  padding: 0;
  border-radius: 50%;
  background: var(--border);
  border: none;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  margin-left: 0.65rem;
  transition: transform 0.2s var(--ease);
  will-change: transform;
  backface-visibility: hidden;

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

  &:hover {
    transform: scale(1.3);
  }

  &[data-new]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--new);
    border: 2px solid var(--bg);
  }
}

.group {
  display: flex;
  flex-direction: column;
  align-items: center;

  > * + * {
    margin-top: var(--nav-group-gap);
  }
}

.create {
  display: flex;
  flex-direction: column;
  align-items: center;

  > * + * {
    margin-top: var(--avatar-gap);
  }
}

.icon-btn {
  width: var(--icon-size);
  height: var(--icon-size);
  max-height: var(--icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: opacity 0.35s var(--ease), max-height 0.35s var(--ease), margin-top 0.35s var(--ease),
    transform 0.2s var(--ease);

  svg {
    width: 70%;
    height: 70%;
    flex-shrink: 0;
  }

  &:hover {
    transform: scale(1.3);
  }

  &.is-hidden {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    pointer-events: none;
  }
}

.logo {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 100;

  img {
    display: block;
    width: 1.15rem;
    height: auto;
    filter: invert(1);
  }
}

.back-btn {
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: calc(var(--icon-size) * 1.8);
  border: none;
  border-radius: 0 var(--pane-radius) var(--pane-radius) 0;
  background: var(--gradient-green-blue);
  color: var(--text);
  cursor: pointer;
  transform: translateY(-50%) scale(0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease-snappy);

  &.no-transition {
    transition: none;
  }

  svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }
}

body.show-back-btn .back-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.search-bar {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 22rem;
  max-width: calc(100vw - 3rem);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-bg);

  &.open {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }

  svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--text-dim);
    flex-shrink: 0;
  }

  input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;

    &::placeholder {
      color: var(--text-dim);
    }
  }
}

.search-results {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: -1px;
  right: -1px;
  max-height: 50vh;
  overflow-y: auto;
  background: rgba(10, 10, 11, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }

  &[hidden] {
    display: none;
  }
}

.search-query-hint {
  padding: 0.65rem 0.85rem;
  border-radius: 0.6rem;
  color: var(--text);
  font-size: 0.85rem;
  cursor: default;

  strong {
    font-weight: 700;
  }

  &.active {
    background: rgba(54, 54, 54, 0.7);
  }
}

.search-result-list {
  display: flex;
  flex-direction: column;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.6rem;
  cursor: default;

  img {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  &:hover, &.active {
    background: rgba(54, 54, 54, 0.7);
  }
}

.search-result-nameline {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);

  .verified-badge {
    align-self: center;
    margin-left: 0;
    color: var(--new);
  }
}

.search-result-handle {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.level-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--level-gap);
  --level-index: 2;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: var(--card-bg);
}

.level-thumb {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0.6rem;
  width: var(--level-dot-size);
  height: var(--level-dot-size);
  border-radius: 50%;
  background: #fff;
  transform: translate(calc(var(--level-index) * (var(--level-dot-size) + var(--level-gap))), -50%) scale(1.15);
  transition: transform 0.2s var(--ease-snappy);
  pointer-events: none;
}

.level-dot {
  position: relative;
  z-index: 1;
  width: var(--level-dot-size);
  height: var(--level-dot-size);
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--text-dim);
  background: transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);

  &:hover {
    border-color: #fff;
    transform: scale(1.15);
  }
}

.media-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;

  &[hidden] {
    display: none;
  }
}

.media-modal-content {
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  cursor: default;

  img, video {
    display: block;
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: 0.75rem;
    object-fit: contain;
  }
}

.media-modal-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1001;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s var(--ease);

  svg {
    width: 1.6rem;
    height: 1.6rem;
  }

  &:hover {
    transform: scale(1.15);
  }
}