* {
  margin: 0;
  padding: 0;
}

html {
  scrollbar-gutter: stable;
}

:root {
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-body: 14px;
  --font-size-caption: 13px;
  --font-size-label: 12px;
  --font-size-title: 16px;
  --font-size-display-nav: 34px;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --letter-spacing-label: 0.04em;
  --letter-spacing-title: -0.01em;
  --line-height-tight: 1;
  --line-height-reading: 1.4;
  --color-bg-app: #0a0a0a;
  --color-surface-card: #111111;
  --color-surface-floating: rgba(12, 12, 12, 0.78);
  --color-surface-popover: rgba(30, 30, 30, 0.95);
  --color-surface-control: rgba(255, 255, 255, 0.04);
  --color-surface-interactive: rgba(255, 255, 255, 0.08);
  --color-surface-interactive-hover: rgba(255, 255, 255, 0.20);
  --color-overlay-backdrop: rgba(0, 0, 0, 0.5);
  --color-text-primary: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.76);
  --color-text-subtle: rgba(255, 255, 255, 0.52);
  --color-text-placeholder: rgba(255, 255, 255, 0.40);
  --color-text-link: rgba(255, 255, 255, 0.50);
  --color-text-link-hover: rgba(255, 255, 255, 0.80);
  --color-border-subtle: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-ring-gap: var(--color-bg-app);
  --color-ring: whitesmoke;
  --color-badge-backdrop: rgba(51, 51, 51, 0.6);
  --color-shadow-ambient: rgba(0, 0, 0, 0.24);
  --space-2: 2px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --size-check: 16px;
  --size-icon-sm: 24px;
  --size-badge: 34px;
  --size-control-md: 44px;
  --size-icon-button: 48px;
  --size-nav-button: 52px;
  --size-stage-vw: 90vw;
  --size-stage-vh: 90vh;
  --radius-card: 24px;
  --radius-popover: 20px;
  --radius-control: 16px;
  --radius-option: 18px;
  --radius-round: 50%;
  --radius-pill: 999px;
  --blur-overlay: 6px;
  --blur-chrome: 8px;
  --blur-control: 12px;
  --blur-popover: 16px;
  --blur-floating: 18px;
  --shadow-floating: 0 18px 40px var(--color-shadow-ambient);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --color-surface-control: color-mix(in srgb, var(--color-text-primary) 4%, transparent);
    --color-surface-interactive: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    --color-surface-interactive-hover: color-mix(in srgb, var(--color-text-primary) 20%, transparent);
    --color-text-muted: color-mix(in srgb, var(--color-text-primary) 76%, transparent);
    --color-text-subtle: color-mix(in srgb, var(--color-text-primary) 52%, transparent);
    --color-text-placeholder: color-mix(in srgb, var(--color-text-primary) 40%, transparent);
    --color-text-link: color-mix(in srgb, var(--color-text-primary) 50%, transparent);
    --color-text-link-hover: color-mix(in srgb, var(--color-text-primary) 80%, transparent);
    --color-border-subtle: color-mix(in srgb, var(--color-text-primary) 12%, transparent);
    --color-border-strong: color-mix(in srgb, var(--color-text-primary) 18%, transparent);
  }

  .top-controls {
    --controls-control-hover-bg: color-mix(in srgb, var(--color-surface-popover) 60%, transparent);
  }
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--color-bg-app);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
}

#viewport {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  padding: calc(var(--size-icon-button) + var(--space-28) + var(--space-32)) var(--space-18)
    var(--space-32);
  box-sizing: border-box;
}

#grid {
  --grid-columns: 1;
  width: min(100%, 10000px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--space-8);
  align-items: start;
}

.grid-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.grid-item {
  position: relative;
  overflow: hidden;
  user-select: none;
  backface-visibility: hidden;
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  width: 100%;
  display: block;
}

.grid-preview-tile {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.grid-preview-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  border-radius: var(--radius-card);
  transition: filter 0.3s ease;
}

.grid-item:hover {
  box-shadow:
    0 0 0 2px var(--color-ring-gap),
    0 0 0 4px var(--color-ring);
}

.grid-item--mosaic .grid-preview-tile img,
.grid-item--mosaic .grid-preview-tile {
  border-radius: 0;
}

.grid-mosaic {
  width: 100%;
  height: 100%;
  display: grid;
  gap: var(--space-2);
  background: var(--color-surface-card);
}

.grid-mosaic--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-mosaic--3 {
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(2, 1fr);
}

.grid-mosaic--3 .grid-preview-tile--1 {
  grid-row: 1 / span 2;
}

.grid-mosaic--4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.video-badge {
  --video-badge-bg: var(--color-badge-backdrop);
  position: absolute;
  left: var(--space-14);
  bottom: var(--space-14);
  width: var(--size-badge);
  height: var(--size-badge);
  display: none;
  pointer-events: none;
  z-index: 1;
  color: var(--color-text-primary);
}

@media (max-width: 700px) {
  #viewport {
    padding: calc(var(--size-icon-button) + var(--space-24) + var(--space-24)) var(--space-12)
      var(--space-24);
  }

  #grid {
    gap: var(--space-8);
  }

  .grid-column {
    gap: var(--space-8);
  }
}

.video-badge.visible {
  display: block;
}

.video-badge-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.video-badge-icon-circle {
  fill: var(--video-badge-bg);
}

.video-badge-icon-play {
  fill: currentColor;
}

/* --- Lightbox --- */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-overlay-backdrop);
  -webkit-backdrop-filter: blur(var(--blur-overlay));
  backdrop-filter: blur(var(--blur-overlay));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-close {
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  z-index: 102;
  width: var(--size-icon-button);
  height: var(--size-icon-button);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-interactive);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-round);
  color: var(--color-text-primary);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  -webkit-backdrop-filter: blur(var(--blur-chrome));
  backdrop-filter: blur(var(--blur-chrome));
}

.lightbox-close-icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 102;
  width: var(--size-nav-button);
  height: var(--size-nav-button);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-round);
  background: var(--color-surface-interactive);
  color: var(--color-text-primary);
  font-size: var(--font-size-display-nav);
  line-height: var(--line-height-tight);
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
  -webkit-backdrop-filter: blur(var(--blur-chrome));
  backdrop-filter: blur(var(--blur-chrome));
}

.lightbox-nav-prev {
  left: var(--space-24);
}

.lightbox-nav-next {
  right: var(--space-24);
}

.lightbox-nav.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.lightbox-stage {
  position: relative;
  width: var(--size-stage-vw);
  height: var(--size-stage-vh);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox-stage.is-visible {
  opacity: 1;
}

.lightbox-media-frame {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.lightbox-media-image,
.lightbox-tweet-shell {
  display: block;
  max-width: min(72vw, 1200px);
  max-height: 72vh;
  border-radius: var(--radius-card);
}

.lightbox-media-image {
  width: auto;
  height: auto;
}

.lightbox-tweet-shell {
  position: relative;
  width: var(--size-stage-vw);
  max-width: 100%;
  max-height: 90vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
  border-radius: var(--radius-card);
  background: transparent;
  padding: 0;
  --tweet-scale: 1;
}

.lightbox-tweet-shell .twitter-tweet {
  margin: 0 auto !important;
}

.lightbox-tweet-shell iframe,
.lightbox-tweet-shell .twitter-tweet-rendered {
  transform: scale(var(--tweet-scale));
  transform-origin: center top;
  display: block;
}

@media (max-width: 900px) {
  .lightbox-tweet-shell {
    width: 92vw;
    max-height: 88vh;
    padding: 0;
  }
}

@media (max-width: 640px) {
  .lightbox-stage {
    width: 100vw;
    height: var(--size-stage-vh);
  }

  .lightbox-tweet-shell {
    width: 94vw;
    max-height: 88vh;
    padding: 0;
  }

  .lightbox-info {
    width: min(92vw, 420px);
    bottom: var(--space-18);
  }
}

.lightbox-overlay.active .lightbox-close {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.2s;
}

.lightbox-overlay.is-closing .lightbox-close,
.lightbox-overlay.is-closing .lightbox-nav,
.lightbox-overlay.is-closing .lightbox-info {
  opacity: 0;
  transition-delay: 0s;
}

.lightbox-overlay.is-closing .lightbox-close {
  transform: scale(0.8);
}

.lightbox-close:hover {
  background: var(--color-surface-interactive-hover);
}

.lightbox-info {
  position: absolute;
  left: 50%;
  bottom: var(--space-28);
  transform: translateX(-50%) translateY(8px);
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: 0s;
  color: var(--color-text-primary);
  max-width: 640px;
}

.lightbox-overlay.active .lightbox-info {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.25s;
}

.lightbox-overlay.has-tweet-embed .lightbox-info {
  display: none;
}

.lightbox-title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-6);
  letter-spacing: var(--letter-spacing-title);
  max-width: 640px;
  line-height: var(--line-height-reading);
}

.lightbox-link {
  font-size: var(--font-size-body);
  color: var(--color-text-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

.lightbox-link:hover {
  color: var(--color-text-link-hover);
}

.lightbox-zoom-clone {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius-card);
  will-change: transform, width, height;
}

.lightbox-zoom-clone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lightbox-zoom-clone--plain {
  background: var(--color-surface-card);
}

.top-controls {
  --controls-bg: var(--color-surface-floating);
  --controls-border: var(--color-border-subtle);
  --controls-shadow: var(--color-shadow-ambient);
  --controls-control-bg: var(--color-surface-control);
  --controls-control-border: var(--color-border-subtle);
  --controls-control-hover-bg: rgba(30, 30, 30, 0.57);
  --controls-gap: var(--space-10);
  --controls-padding-x: var(--space-12);
  --controls-padding-y: var(--space-10);
  --controls-edge-offset: var(--space-18);
  --controls-hidden-offset: var(--space-18);
  position: fixed;
  top: var(--controls-edge-offset);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: min(calc(100vw - var(--space-24)), 1180px);
  padding: var(--controls-padding-y) var(--controls-padding-x);
  border: 1px solid var(--controls-border);
  border-radius: var(--radius-card);
  background: var(--controls-bg);
  -webkit-backdrop-filter: blur(var(--blur-floating));
  backdrop-filter: blur(var(--blur-floating));
  box-shadow: var(--shadow-floating);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.top-controls.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(calc(-1 * var(--controls-hidden-offset)));
}

.folder-control {
  position: relative;
}

.folder-pill,
.filter-search-input,
.sort-select,
.result-count {
  min-height: var(--size-control-md);
  background: var(--controls-control-bg);
  border: 1px solid var(--controls-control-border);
  -webkit-backdrop-filter: blur(var(--blur-control));
  backdrop-filter: blur(var(--blur-control));
}

.folder-pill {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-16);
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  user-select: none;
}

.folder-pill:hover {
  background: var(--controls-control-hover-bg);
  border-color: var(--color-border-strong);
}

.search-control,
.sort-control,
.column-control {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-width: 0;
}

.control-label {
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.filter-search-input,
.sort-select {
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  border-radius: var(--radius-control);
  padding: 0 var(--space-14);
  outline: none;
}

.filter-search-input {
  width: min(16vw, 180px);
}

.filter-search-input::placeholder {
  color: var(--color-text-placeholder);
}

.filter-search-input:focus,
.sort-select:focus {
  border-color: var(--color-border-strong);
}

.sort-select {
  min-width: 200px;
  appearance: none;
}

.sort-control-group {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.sort-random-actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.sort-random-button {
  min-height: var(--size-control-md);
  padding: 0 var(--space-12);
  border: 1px solid var(--controls-control-border);
  border-radius: var(--radius-pill);
  background: var(--controls-control-bg);
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--font-size-caption);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sort-random-button--icon,
.column-stepper-button {
  width: var(--size-control-md);
  min-width: var(--size-control-md);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sort-random-button:hover {
  background: var(--controls-control-hover-bg);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.sort-random-button.is-active {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.sort-random-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.column-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.zoom-view-group {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.column-stepper-button {
  min-height: var(--size-control-md);
  border: 1px solid var(--controls-control-border);
  border-radius: var(--radius-pill);
  background: var(--controls-control-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.column-stepper-button:hover {
  background: var(--controls-control-hover-bg);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.column-stepper-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.control-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.view-toggle-group {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.view-toggle-button {
  width: var(--size-control-md);
  min-width: var(--size-control-md);
  min-height: var(--size-control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--controls-control-border);
  border-radius: var(--radius-pill);
  background: var(--controls-control-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.view-toggle-button:hover {
  background: var(--controls-control-hover-bg);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.view-toggle-button.is-active {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.view-toggle-button.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.folder-dropdown {
  --menu-bg: var(--color-surface-popover);
  --menu-border: var(--color-border-subtle);
  --menu-offset: var(--space-10);
  position: absolute;
  top: calc(100% + var(--menu-offset));
  left: 0;
  z-index: 61;
  min-width: 160px;
  padding: var(--space-6);
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: var(--radius-card);
  -webkit-backdrop-filter: blur(var(--blur-popover));
  backdrop-filter: blur(var(--blur-popover));
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.folder-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.folder-dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  background: none;
  border: none;
  border-radius: var(--radius-option);
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.folder-dropdown-item:hover {
  background: var(--color-surface-interactive);
  color: var(--color-text-primary);
}

.folder-dropdown-item.active {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.result-count {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-14);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (max-width: 980px) {
  .top-controls {
    width: min(calc(100vw - var(--radius-popover)), 860px);
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--controls-gap);
  }

  .result-count {
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  .top-controls {
    top: var(--space-10);
    width: calc(100vw - var(--space-16));
    gap: var(--space-8);
    padding: var(--space-10);
    border-radius: var(--radius-popover);
  }

  .search-control,
  .sort-control {
    width: 100%;
  }

  .filter-search-input,
  .sort-select {
    flex: 1;
    width: auto;
  }

  .sort-control-group {
    width: 100%;
    flex-wrap: wrap;
  }

  .result-count {
    width: 100%;
    justify-content: center;
  }
}

.prefetch-staging {
  position: fixed;
  top: -200vh;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

[hidden] {
  display: none !important;
}