@font-face {
  font-family: "Quicksand";
  src: url("./assets/fonts/quicksand-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("./assets/fonts/noto-sans-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --surface: #181818;
  --focus: #ffffff;
  --navbar-height: 64px;
  --edge-space: clamp(12px, 2vw, 24px);
  --logo-size: 56px;
  --glass: rgba(30, 30, 30, 0.6);
  --glass-highlight: rgba(255, 255, 255, 0.025);
  --glass-edge: rgba(0, 0, 0, 0.5);
  --nav-text: #d4d4d4;
  --search-surface: rgba(0, 0, 0, 0.12);
  --search-edge: rgba(255, 255, 255, 0.07);
  --search-focus-edge: rgba(255, 255, 255, 0.2);
  --search-muted: #858585;
  --scroll-track: transparent;
  --scroll-thumb: rgba(255, 255, 255, 0.07);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.17);
}

* { box-sizing: border-box; }

html {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: auto;
}

@supports selector(::-webkit-scrollbar) {
  html { scrollbar-color: auto; scrollbar-width: auto; }

  ::-webkit-scrollbar { width: 7px; height: 7px; }

  ::-webkit-scrollbar-track {
    background: var(--scroll-track);
    box-shadow: none;
  }

  ::-webkit-scrollbar-thumb {
    border: 2px solid var(--scroll-track);
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--scroll-thumb) 48%, transparent);
    background-clip: padding-box;
    box-shadow: none;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
    background-clip: padding-box;
  }

  ::-webkit-scrollbar-thumb:active { background: rgba(255, 255, 255, 0.22); }
  ::-webkit-scrollbar-corner { background: var(--scroll-track); }
}

@media (forced-colors: active) {
  html { scrollbar-color: auto; }
}

html.custom-scrollbar { scrollbar-width: none; }
html.custom-scrollbar::-webkit-scrollbar { display: none; }

.page-scrollbar {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  width: 7px;
  padding: 1px;
  background: var(--scroll-track);
  border-left: 1px solid transparent;
}

.page-scrollbar[hidden] { display: none; }

.page-scrollbar-thumb {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.025);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.015), var(--scroll-thumb) 48%, rgba(255, 255, 255, 0.015));
  box-shadow: none;
  transition: background-color 200ms ease, border-color 200ms ease;
  cursor: grab;
  touch-action: none;
}

.page-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
.page-scrollbar-thumb:active { cursor: grabbing; }
.page-scrollbar-thumb:focus-visible { outline: 1px solid var(--focus); outline-offset: -2px; }

html, body {
  margin: 0;
  min-width: 240px;
  min-height: 100vh;
  background: var(--surface);
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
}

.navbar {
  font-family: "Quicksand", sans-serif;
  position: sticky;
  top: calc(16px + env(safe-area-inset-top, 0px));
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: var(--navbar-height);
  margin: calc(16px + env(safe-area-inset-top, 0px))
    calc(var(--edge-space) + 6px + env(safe-area-inset-right, 0px)) 0
    calc(var(--edge-space) + 6px + env(safe-area-inset-left, 0px));
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

.nav-panel,
.search-box {
  border: 1px solid var(--glass-edge);
  background: linear-gradient(135deg, var(--glass-highlight), transparent), var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  backdrop-filter: blur(24px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.nav-panel {
  display: flex;
  align-items: center;
  height: var(--navbar-height);
  min-width: 0;
  border-radius: 18px;
}

.nav-left {
  margin-right: -32px;
  padding: 3px 48px 3px 12px;
  -webkit-mask-image: radial-gradient(circle 40px at right center, transparent 39px, #000 40px);
  mask-image: radial-gradient(circle 40px at right center, transparent 39px, #000 40px);
}

.brand {
  position: relative;
  display: block;
  flex: 0 0 var(--logo-size);
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 4px;
  transform-origin: center;
  transition: transform 280ms ease;
}

.brand:hover,
.brand:focus-visible { transform: scale(1.2); }

.brand-mark { display: block; width: 100%; height: 100%; }
.brand-base { fill: #ffffff; transition: fill 280ms ease; }
.brand:hover .brand-base,
.brand:focus-visible .brand-base { fill: #303030; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(2px, 1.2vw, 18px);
  margin-left: 12px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 clamp(6px, 1vw, 12px);
  border-radius: 12px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-weight: inherit;
  cursor: pointer;
  color: var(--nav-text);
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color 220ms ease;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--focus);
}

.mobile-nav-icon, .mobile-create-icon, .mobile-search-toggle { display: none; }

.brand:focus-visible,
.nav-link:focus-visible,
.nav-actions button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.nav-search {
  position: relative;
  z-index: 1;
  width: 300px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: width 280ms ease;
}

.nav-search:focus-within { width: 360px; }
.nav-search.palette-open { width: 360px; }

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: var(--navbar-height);
  padding: 0 56px 0 24px;
  border-radius: 999px;
  color: var(--search-muted);
  cursor: text;
  pointer-events: auto;
  transition: width 280ms ease, border-color 220ms ease, color 220ms ease;
}

.search-box:focus-within {
  border-color: var(--search-focus-edge);
  color: var(--nav-text);
}

.search-icon {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.search-box input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--focus);
  font: inherit;
  font-size: 14px;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.search-box input::placeholder { color: transparent; }

.search-placeholder {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: baseline;
  color: var(--search-muted);
  font-size: 14px;
  line-height: 1.4;
  pointer-events: none;
  white-space: nowrap;
}

.search-placeholder > span {
  display: inline-block;
  white-space: pre;
  animation: placeholder-wave 5.2s ease-in-out infinite;
}

.search-field input:not(:placeholder-shown) + .search-placeholder { display: none; }

@keyframes placeholder-wave {
  0%, 10%, 44%, 100% {
    color: var(--search-muted);
  }
  26% {
    color: var(--focus);
  }
}

.palette-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.palette-toggle svg { width: 30px; height: 30px; transform: rotate(0deg); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.palette-toggle:hover svg,
.palette-toggle[aria-expanded="true"] svg { transform: rotate(360deg); }
.palette-toggle:focus-visible { outline: 1px solid var(--focus); outline-offset: 2px; }
.color-palette {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid var(--search-edge);
  border-radius: 20px;
  background: rgba(28, 28, 28, 0.97);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  animation: palette-in 180ms ease-out;
}
.color-palette[hidden] { display: none; }
.color-plane {
  position: relative;
  height: 190px;
  border-radius: 14px;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), var(--picker-hue, #f00);
  touch-action: none;
  cursor: crosshair;
}
.color-cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px #000;
  pointer-events: none;
}
.hue-slider {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 12px;
  margin: 14px 0;
  border-radius: 999px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
}
.hue-slider::-webkit-slider-thumb { appearance: none; width: 12px; height: 18px; border: 2px solid #fff; border-radius: 8px; background: transparent; }
.hue-slider::-moz-range-thumb { width: 8px; height: 14px; border: 2px solid #fff; border-radius: 8px; background: transparent; }
.palette-controls { display: flex; align-items: center; gap: 8px; }
.hex-control { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--search-edge); border-radius: 999px; }
.color-preview { width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: var(--picked-color); }
.color-hex { width: 82px; border: 0; outline: none; background: transparent; color: #ededed; font: inherit; font-size: 14px; }
.color-hex[aria-invalid="true"] { color: #e89a9a; }
.color-reset { width: 36px; height: 36px; border: 1px solid var(--search-edge); border-radius: 50%; background: transparent; color: var(--nav-text); font-size: 22px; cursor: pointer; }
.color-add { margin-left: auto; padding: 10px 17px; border: 0; border-radius: 999px; background: #eee; color: #181818; font: inherit; font-size: 14px; cursor: pointer; }
.color-add:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.color-plane:focus { outline: none; }
.hue-slider:focus-visible, .hex-control:focus-within, .color-reset:focus-visible { outline: 1px solid #ddd; outline-offset: 3px; }
.has-search-color .search-icon { flex-basis: 23px; width: 23px; height: 23px; border-radius: 50%; background: var(--search-color); stroke: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.has-search-color .mobile-search-toggle svg { visibility: hidden; }
.has-search-color .mobile-search-toggle::after { content: ''; position: absolute; width: 23px; height: 23px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: var(--search-color); }
.color-arriving .search-icon,
.color-arriving .mobile-search-toggle::after { opacity: 0; }
.color-flight {
  position: fixed;
  z-index: 1000;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  will-change: transform;
}
@keyframes palette-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
  margin-left: -32px;
  padding: 3px 12px 3px 48px;
  -webkit-mask-image: radial-gradient(circle 40px at left center, transparent 39px, #000 40px);
  mask-image: radial-gradient(circle 40px at left center, transparent 39px, #000 40px);
}

.nav-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  color: var(--nav-text);
  font: inherit;
  cursor: pointer;
  transition: color 220ms ease, border-color 220ms ease;
}

.nav-actions .create-button {
  height: 36px;
  padding: 0 15px;
  border: 1px solid var(--search-focus-edge);
  border-radius: 999px;
  font-size: 14px;
}

.icon-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
}

.nav-actions svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--search-focus-edge);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
}

.nav-actions .notification-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--search-focus-edge);
  border-radius: 50%;
}

.notification-button svg { width: 17px; height: 17px; }

.nav-actions .profile-button {
  width: auto;
  gap: 6px;
  border-radius: 14px;
}

.profile-badge svg { width: 23px; height: 23px; }
.nav-actions .profile-chevron { width: 16px; height: 16px; }

.nav-actions button:hover { color: var(--focus); }
.create-button:hover { border-color: rgba(255, 255, 255, 0.4); }

@media (max-width: 1100px) {
  .navbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: auto;
    gap: 12px;
  }

  .nav-search {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(300px, calc(100% - 32px));
    grid-row: 2;
  }

  .nav-panel { margin: 0; padding: 3px 12px; -webkit-mask-image: none; mask-image: none; }
  .nav-actions { grid-column: 2; grid-row: 1; }
  .nav-search:focus-within, .nav-search.palette-open { width: min(360px, 100%); }
}

@media (max-width: 700px) {
  .navbar {
    --navbar-height: 48px;
    --logo-size: 28px;
    grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
    gap: 0;
    height: 48px;
  }
  .nav-panel { border-radius: 14px; }
  .nav-left {
    grid-column: 1;
    grid-row: 1;
    margin-right: -24px;
    padding: 3px 34px 3px 6px;
    -webkit-mask-image: radial-gradient(circle 30px at right center, transparent 29px, #000 30px);
    mask-image: radial-gradient(circle 30px at right center, transparent 29px, #000 30px);
  }
  .nav-links { margin-left: 2px; gap: 0; }
  .nav-label, .create-label { display: none; }
  .nav-link { min-height: 36px; width: 22px; padding: 0; }
  .mobile-nav-icon { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
  .nav-actions {
    grid-column: 3;
    grid-row: 1;
    margin-left: -24px;
    padding: 3px 6px 3px 34px;
    gap: 4px;
    -webkit-mask-image: radial-gradient(circle 30px at left center, transparent 29px, #000 30px);
    mask-image: radial-gradient(circle 30px at left center, transparent 29px, #000 30px);
  }
  .nav-actions .create-button { width: 24px; height: 26px; padding: 0; }
  .nav-actions .mobile-create-icon { display: block; width: 14px; height: 14px; }
  .nav-actions .notification-button { width: 24px; height: 24px; }
  .notification-button svg { width: 14px; height: 14px; }
  .profile-badge { width: 28px; height: 28px; }
  .profile-badge svg { width: 17px; height: 17px; }
  .nav-actions .profile-button { height: 36px; gap: 2px; }
  .nav-actions .profile-chevron { width: 9px; height: 9px; }
  .nav-search, .nav-search:focus-within, .nav-search.palette-open {
    grid-column: 2;
    grid-row: 1;
    width: 76px;
    height: 48px;
  }
  .search-box { width: 76px; padding: 0; pointer-events: none; }
  .search-box > .search-icon { display: none; }
  .mobile-search-toggle {
    position: absolute;
    top: 0;
    left: 5px;
    width: 32px;
    height: 48px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--nav-text);
    pointer-events: auto;
    cursor: pointer;
  }
  .mobile-search-toggle svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .palette-toggle { right: 5px; width: 30px; height: 32px; z-index: 2; }
  .palette-toggle svg { width: 28px; height: 28px; }
  .mobile-search-toggle:focus-visible { outline: 1px solid var(--focus); outline-offset: -4px; }
  .search-field {
    position: absolute;
    display: none;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: min(340px, calc(100vw - 32px));
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--search-focus-edge);
    border-radius: 16px;
    background: rgba(28, 28, 28, 0.96);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
  }
  .nav-search.is-open .search-field { display: flex; animation: search-dropdown-in 180ms ease-out; }
  .search-placeholder { left: 18px; }
  @keyframes search-dropdown-in {
    from { opacity: 0; translate: 0 -4px; }
    to { opacity: 1; translate: 0 0; }
  }
}

@media (max-width: 380px) {
  .navbar { --logo-size: 26px; }
  .nav-link { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-link, .nav-search, .search-box, .nav-actions button { transition: none; }
  .search-placeholder > span { animation: none; }
  .nav-search.is-open .search-field { animation: none; }
  .color-palette { animation: none; }
  .palette-toggle svg { transition: none; }
  .brand-base { transition: none; }
  .brand { transition: none; }

}

.discover-feed {
  padding: 28px var(--edge-space) 40px;
}

@font-face {
  font-family: "Capriola";
  src: url("./assets/fonts/capriola-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.site-footer {
  position: relative;
  overflow: hidden;
  --footer-progress: 0%;
  --footer-dark: #202020;
  display: flex;
  align-items: center;
  min-height: clamp(260px, 32vw, 470px);
  padding: 24px var(--edge-space) 88px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-wordmark {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: calc(50vw - var(--edge-space));
  font-family: "Capriola", sans-serif;
  font-size: clamp(64px, 14.3vw, 260px);
  font-weight: 400;
  line-height: 1.5;
  padding: 0.08em 0.12em 0.22em 0;
  letter-spacing: -0.055em;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(90deg, #dedede 0%, #dedede var(--footer-progress), var(--footer-dark) calc(var(--footer-progress) + 8%), var(--footer-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.footer-watermark {
  position: absolute;
  right: -10vw;
  top: 50%;
  transform: translateY(-50%);
  width: 36vw;
  height: auto;
  fill: #ffffff;
  opacity: 1;
  pointer-events: none;
}

.footer-logo-dark-stop { stop-color: var(--footer-dark); }
.footer-logo-light-stop { stop-color: #dedede; }

.masonry-feed {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  grid-auto-rows: 4px;
  gap: 0 20px;
  columns: 5;
  column-gap: 20px;
}
.masonry-feed > .feed-card { display: block; margin-bottom: 0; align-self: start; }
.feed-card.feed-pending { display: none !important; }
.feed-sentinel { height: 1px; pointer-events: none; }
.feed-sentinel[hidden] { display: none; }
.masonry-feed .feed-card { content-visibility: auto; contain-intrinsic-size: auto 240px; }
.masonry-feed .feed-card img { opacity: 0; transition: opacity 180ms ease; }
.masonry-feed .feed-card img.image-ready { opacity: 1; }
.masonry-feed .feed-card img.image-failed { opacity: 1; }
@media(prefers-reduced-motion:reduce) { .masonry-feed .feed-card img { transition: none; } }
@media(max-width:1100px) { .masonry-feed { grid-template-columns: repeat(4,minmax(0,1fr)); column-gap: 16px; } }
@media(max-width:700px) { .masonry-feed { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 12px; } }
.feed-card[hidden], .search-results-header[hidden], .search-no-results[hidden] { display: none; }
.search-results-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 10px 0 32px; }
.search-results-eyebrow { color: #888; letter-spacing: .18em; font-size: 10px; }
.search-results-header h1 { margin: 10px 0; color: #eee; font-size: clamp(24px,3vw,34px); font-weight: 500; letter-spacing: -.03em; }
.search-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: #aaa; font-size: 13px; }
.result-color { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.search-clear { color: #aaa; font-size: 12px; text-decoration: none; white-space: nowrap; }
.search-clear:hover { color: #fff; }
.search-no-results { padding: 70px 16px 120px; text-align: center; color: #999; }
.search-no-results h2 { color: #ddd; font-size: 22px; font-weight: 500; }
.search-no-results p { font-size: 13px; line-height: 1.7; }
@media (max-width:700px) { .search-results-header { align-items: flex-start; gap: 12px; } .search-clear { margin-top: 8px; font-size: 11px; } }

.content-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.content-link:focus-visible { outline: 2px solid #ddd; outline-offset: -3px; }
.card-action { position: relative; z-index: 2; }
.content-page[hidden], .related-heading[hidden], .content-info[hidden] { display: none; }
.content-page { max-width: 1320px; margin: 0 auto 70px; }
.content-back { display: inline-flex; gap: 10px; align-items: center; margin: 0 0 28px; color: #aaa; font-size: 13px; text-decoration: none; transition: color 180ms ease; }
.content-back:hover { color: #fff; }
.content-current.feed-card { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(280px,1fr); align-items: start; gap: clamp(32px,5vw,80px); margin: 0; background: transparent; overflow: visible; border-radius: 0; }
.content-current > .content-link { display: none; }
.content-current > img { width: auto; max-width: 100%; max-height: 65vh; height: auto; justify-self: center; object-fit: contain; background: transparent; border-radius: 0; }
.content-current .card-overlay { position: sticky; top: 112px; inset-inline: auto; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 0; background: transparent; opacity: 1; pointer-events: auto; min-width: 0; }
.content-eyebrow { color: #939393; font-size: 10px; letter-spacing: .18em; }
.content-info h1 { margin: 18px 0; color: #eee; font-size: clamp(26px,2.8vw,40px); line-height: 1.2; font-weight: 500; letter-spacing: -.035em; outline: none; }
.content-description { max-width: 38ch; margin: 0 0 30px; color: #aaa; font-size: 14px; line-height: 1.85; }
.content-creator { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.content-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #30322d; color: #dedede; }
.content-creator strong { display: block; color: #ddd; font-size: 13px; font-weight: 500; }
.content-creator small { display: block; margin-top: 4px; color: #888; font-size: 11px; }
.content-source { display: inline-block; color: #aaa; text-decoration: none; font-size: 12px; padding-bottom: 4px; border-bottom: 1px solid #414141; }
.content-source:hover { color: #fff; }
.content-current .card-bottom-actions { position: static; display: flex; gap: 12px; margin-top: 30px; padding-top: 24px; width: 100%; border-top: 1px solid #303030; }
.content-current .card-action { width: 44px; height: 44px; background: linear-gradient(135deg,rgba(255,255,255,.04),transparent),rgba(34,34,34,.7); border: 1px solid rgba(255,255,255,.09); }
.content-current .card-save,
.content-current .card-share { width: 50px; height: 50px; }
.content-current .card-save svg,
.content-current .card-share svg { width: 23px; height: 23px; }
.content-current .card-more { top: 12px; right: 0; }
.related-heading { margin: 0 0 24px; padding-top: 32px; border-top: 1px solid #303030; font-size: 19px; font-weight: 500; color: #ddd; letter-spacing: -.02em; }
@media (max-width: 700px) {
  .content-page { margin-bottom: 38px; }
  .content-back { margin-bottom: 20px; }
  .content-current.feed-card { grid-template-columns: 1fr; gap: 10px; }
  .content-current > img { height: auto; max-height: 52vh; border-radius: 0; }
  .content-current .card-overlay { position: relative; top: auto; padding: 16px 2px 0; }
  .content-current .content-info { padding-right: 36px; }
  .content-current .card-more { top: 10px; }
  .content-info h1 { font-size: 28px; }
  .content-current .card-bottom-actions { margin-top: 24px; }
}

.feed-card {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  margin: 0 0 20px;
  overflow: hidden;
  break-inside: avoid;
  border-radius: 10px;
  background: #202020;
}

.feed-card img {
  display: block;
  width: 100%;
  height: auto;
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.23);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.feed-card:hover .card-overlay,
.feed-card:focus-within .card-overlay { opacity: 1; }
.feed-card.menu-open .card-overlay { opacity: 1; }
.more-mark { position: relative; width: 20px; height: 20px; display: block; }
.more-mark i, .more-mark b { position: absolute; top: 50%; left: 50%; translate: -50% -50%; height: 3px; width: 3px; border-radius: 999px; background: currentColor; transform-origin: center;  }
.more-mark i:first-child { transform: translateX(-6px); }
.more-mark i:nth-child(3) { transform: translateX(6px); }
.more-mark b { opacity: 0; }
.card-menu {
  position: fixed;
  z-index: 80;
  width: 218px;
  max-width: calc(100vw - 24px);
  padding: 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 17px;
  background: linear-gradient(145deg,rgba(255,255,255,.035),transparent),rgba(27,27,27,.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 16px 42px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.025);
  pointer-events: auto;
  transform-origin: top right;
  animation: card-menu-reveal 180ms cubic-bezier(.2,.8,.2,1);
}
.card-menu[hidden] { display: none; }
.card-menu-heading { padding: 9px 10px 10px; color: #858585; font-size: 11px; }
.card-menu button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 10px; border: 0; border-radius: 10px; text-align: left; font: inherit; font-size: 13px; color: #dedede; background: transparent; cursor: pointer; transition: background-color 160ms ease,color 160ms ease; }
.card-menu button svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: #a4a4a4; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card-menu button:hover, .card-menu button:focus-visible { background: rgba(255,255,255,.055); color: #fff; outline: none; }
.card-menu button:focus-visible { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.card-menu-divider { height: 1px; margin: 4px 10px; background: rgba(255,255,255,.07); }
@keyframes card-menu-reveal { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .card-menu { animation: none; } }
.card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  background: rgba(35,35,35,.8);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}
.card-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card-more { position: absolute; top: 10px; right: 10px; }
.card-more svg { fill: currentColor; stroke: none; }
.card-bottom-actions { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 7px; }
.card-action:hover { background: rgba(65,65,65,.85); }
.card-share:disabled { cursor: wait; opacity: .65; }
.card-share { overflow: hidden; }
.card-share svg { transform-origin: center; }
.share-status { position: fixed; z-index: 100; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(28,28,28,.96); color: #dedede; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.share-status[hidden] { display: none; }
.card-action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.card-action[aria-pressed="true"] svg { fill: currentColor; }
.card-save svg,
.card-save[aria-pressed="true"] svg { fill: none; }
.card-save .save-outline { fill: none; stroke: #dedede; }
.card-save .save-fill {
  fill: #dedede;
  stroke: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 420ms cubic-bezier(.4, 0, .2, 1);
}
.card-save[aria-pressed="true"] .save-fill { clip-path: inset(0); }
@media (prefers-reduced-motion: reduce) {
  .card-save .save-fill { transition: none; }
}
.card-like[aria-pressed="true"] svg { fill: #dedede; stroke: #dedede; }
.card-like { position: relative; }
.card-like svg {
  fill: rgba(222, 222, 222, 0);
  stroke: #ffffff;
  transform-origin: center;
  transform-box: fill-box;
  transition: fill 360ms cubic-bezier(.4, 0, .2, 1), stroke 360ms cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 701px) and (max-width: 1100px) {
  .masonry-feed { columns: 4; column-gap: 16px; }
  .feed-card { margin-bottom: 16px; }
}

@media (max-width: 700px) {
  .discover-feed { padding-top: 20px; }
  .masonry-feed { columns: 2; column-gap: 12px; }
  .feed-card { margin-bottom: 12px; }
}

@media (hover: none) {
  .card-overlay { opacity: 1; background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .card-overlay { transition: none; }
}
.footer-bottom {
  position: absolute;
  z-index: 2;
  left: var(--edge-space);
  right: var(--edge-space);
  bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #878787;
  font-size: 12px;
}
.footer-legal { display: flex; align-items: center; gap: 10px; }
.footer-legal button { padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: color 180ms ease; }
.footer-legal button:hover { color: #dedede; }
.back-to-top {
  position: fixed;
  z-index: 30;
  right: 22px;
  bottom: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(30,30,30,.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #dedede;
  box-shadow: 0 5px 18px rgba(0,0,0,.2);
  cursor: pointer;
}
.back-to-top[hidden] { display: none; }
.back-to-top svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.back-to-top:hover { background: #303030; color: #fff; }
.back-to-top:focus-visible, .footer-legal button:focus-visible { outline: 1px solid #dedede; outline-offset: 4px; }
@media (max-width: 380px) {
  .footer-bottom { font-size: 10px; gap: 8px; }
  .footer-legal { gap: 6px; }
}
.feed-card.share-open .card-overlay { opacity: 1; }
.share-dropdown { position: fixed; z-index: 90; width: 370px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(30,30,30,.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 16px 48px rgba(0,0,0,.45); color: #dedede; animation: palette-in 160ms ease-out; }
.share-dropdown[hidden] { display: none; }
.share-dropdown-header { position: relative; margin-bottom: 18px; text-align: center; }
.share-dropdown-header h2 { margin: 0; font-size: 16px; font-weight: 500; }
.share-dropdown .share-close { position: absolute; top: -4px; right: 0; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #aaa; font-size: 23px; cursor: pointer; }
.share-destinations { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.share-destinations > * { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; gap: 9px; padding: 0; border: 0; background: transparent; color: #dedede; font: inherit; font-size: 10px; line-height: 1.6; text-align: center; text-decoration: none; cursor: pointer; }
.destination-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; transition: transform 180ms ease; }
.share-destinations > *:hover .destination-icon { transform: translateY(-2px); }
.destination-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.destination-copy,.destination-more { background: #414141; }
.destination-download { background: #363b38; }
.destination-whatsapp { background: #20c65b; }
.destination-facebook { background: #1877f2; font-family: sans-serif; font-size: 44px; font-weight: 700; line-height: 1; padding-top: 7px; overflow: hidden; }
.destination-x { background: #0b0b0b; font-size: 28px; }
.share-person-search { display: flex; align-items: center; gap: 10px; margin: 16px 0; padding: 0 13px; height: 46px; border: 1px solid #535353; border-radius: 15px; }
.share-person-search svg { width: 19px; height: 19px; fill: none; stroke: #bcbcbc; stroke-width: 1.6; }
.share-person-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #dedede; font: inherit; font-size: 13px; }
.share-person-search:focus-within { border-color: #aaa; }
.share-person { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.share-person[hidden],.share-empty[hidden] { display: none; }
.person-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: #45473f; color: #ddd; font-family: inherit; font-size: 20px; }
.person-avatar-alt { background: #403b48; }
.person-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.person-info strong { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-info > span { font-size: 11px; color: #929292; }
.person-send { margin-left: auto; padding: 9px 12px; border: 0; border-radius: 12px; background: #414141; color: #dedede; font: inherit; font-size: 12px; cursor: pointer; }
.person-send:hover { background: #505050; }
.toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  padding: 14px 20px;
  border: 1px solid rgba(111, 177, 138, .48);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255,255,255,.035), transparent), rgba(24,24,24,.9);
  -webkit-backdrop-filter: blur(32px) saturate(120%);
  backdrop-filter: blur(32px) saturate(120%);
  box-shadow: 0 10px 32px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.025);
  color: #e2e2e2;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity 240ms ease, transform 240ms ease, border-color 240ms ease;
  pointer-events: none;
}
.toast[hidden] { display: none; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast-symbol {
  position: absolute;
  top: -12px;
  left: -10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(111,177,138,.65);
  border-radius: 50%;
  background: #202722;
  color: #91c6a3;
  box-shadow: 0 2px 7px rgba(0,0,0,.25);
}
.toast-symbol svg { display: block; width: 23px; height: 23px; stroke-width: 2.5; }
.toast[data-type="error"] { border-color: rgba(203,111,111,.52); }
.toast[data-type="error"] .toast-symbol { color: #dfa0a0; background: #2b2222; border-color: rgba(203,111,111,.65); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.share-empty { font-size: 12px; color: #aaa; text-align: center; }
.share-demo-note { display: block; margin-top: 10px; font-size: 10px; color: #858585; }
.share-dropdown :focus-visible { outline: 1px solid #ddd; outline-offset: 3px; }
.share-dropdown input:focus-visible { outline: none; }
@media (max-width: 380px) { .share-dropdown { padding: 14px; } .destination-icon { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .share-dropdown { animation: none; } .destination-icon { transition: none; } }
.share-dropdown { overflow: visible; padding: 0; animation: share-dropdown-rise 200ms cubic-bezier(.2,.8,.2,1); }
.share-dropdown-scroll { padding: 18px; max-height: inherit; overflow-y: auto; border-radius: inherit; }
.share-pointer { position: absolute; z-index: -1; top: -6px; left: var(--share-pointer,50%); width: 12px; height: 12px; border-radius: 4px 0 0 0; transform: translateX(-50%) rotate(45deg); background: #1e1e1e; border-top: 1px solid rgba(255,255,255,.12); border-left: 1px solid rgba(255,255,255,.12); }
.share-dropdown.opens-above .share-pointer { top: auto; bottom: -6px; transform: translateX(-50%) rotate(225deg); }
@keyframes share-dropdown-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 380px) { .share-dropdown { padding: 0; } .share-dropdown-scroll { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .share-dropdown { animation: none; } }
.destination-icon img { display: block; width: 26px; height: 26px; object-fit: contain; }
.destination-facebook { padding-top: 0; }
.share-destinations { gap: 6px; }
.share-destinations .destination-icon { width: clamp(32px,9vw,46px); height: clamp(32px,9vw,46px); }
.destination-facebook img { width: 29px; height: 29px; }
.copy-link-animation { display: block; width: 30px; height: 30px; }
.copy-link-animation > svg { width: 100% !important; height: 100% !important; }
.copy-link-animation path[stroke] { stroke: #dedede; }
.copy-link-animation img { filter: invert(1); width: 30px; height: 30px; }
.card-menu .copy-link-animation { width: 24px; height: 24px; flex-shrink: 0; }
.card-menu .copy-link-animation img { width: 24px; height: 24px; }
.navbar { transition: filter 240ms ease; }
.navbar .nav-panel { transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease; }
.navbar.is-scrolled { filter: drop-shadow(0 10px 18px rgba(0,0,0,.52)); }
.navbar.is-scrolled .nav-panel,
.navbar.is-scrolled .search-box {
  background-color: rgba(24,24,24,.94);
  border-color: rgba(0,0,0,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), inset 0 -1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(32px) saturate(110%);
  -webkit-backdrop-filter: blur(32px) saturate(110%);
}
@media (prefers-reduced-motion: reduce) { .navbar, .navbar .nav-panel { transition: none; } }

.search-color-badge { display: none; flex: 0 0 23px; width: 23px; height: 23px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.has-search-color .search-box > .search-color-badge { display: block; }
.has-search-color .search-icon { display: none; }
.has-search-color .mobile-search-toggle::after { display: none; }
.has-search-color .mobile-search-toggle > .search-color-badge { display: block; position: absolute; }
.search-box > .search-color-badge[tabindex="0"] { cursor: pointer; }
.search-color-badge:focus-visible { outline: 2px solid #ddd; outline-offset: 4px; }
.color-arriving .search-color-badge { opacity: 0; }
.selected-colors-menu { position: absolute; z-index: 40; top: calc(100% + 12px); left: 10px; display: flex; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: linear-gradient(135deg,rgba(255,255,255,.04),transparent),rgba(26,26,26,.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 10px 25px rgba(0,0,0,.4); animation: search-dropdown-in 180ms ease-out; }
.selected-colors-menu[hidden] { display: none; }
.selected-colors-menu { pointer-events: auto; }
.selected-color-chip { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; text-shadow: 0 1px 3px #000,0 0 4px #000; font-size: 18px; cursor: pointer; }
.selected-color-chip:hover { transform: scale(1.08); }
.selected-color-chip { position: relative; }
.selected-color-chip::before, .selected-color-chip::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px;
  border-radius: 1px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.65);
  opacity: 0; pointer-events: none; transition: opacity 160ms ease;
  transform: translate(-50%,-50%) rotate(45deg);
}
.selected-color-chip::after { transform: translate(-50%,-50%) rotate(-45deg); }
.selected-color-chip:hover::before, .selected-color-chip:hover::after, .selected-color-chip:focus-visible::before, .selected-color-chip:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .selected-color-chip::before, .selected-color-chip::after { transition: none; }
}
.selected-color-chip:focus-visible { outline: 2px solid #ddd; outline-offset: 3px; }
@media (max-width:700px) { .has-search-color .search-box > .search-color-badge { display: none; } .selected-colors-menu { left: 0; } }
@media (prefers-reduced-motion:reduce) { .selected-colors-menu { animation: none; } }
.image-colors { margin-top: 26px; }
.image-colors > span { display: block; color: #bbb; font-size: 12px; }
.image-colors small { display: block; color: #777; font-size: 10px; margin-top: 6px; }
.image-color-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px; }
.image-color { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; cursor: pointer; transition: transform 180ms ease; }
.image-color:hover { transform: translateY(-2px); }
.image-color[aria-pressed="true"] { outline: 2px solid #ddd; outline-offset: 3px; }
.image-color:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.related-heading { scroll-margin-top: 110px; }
@media (prefers-reduced-motion: reduce) { .image-color { transition: none; } }
.nav-actions [hidden] { display: none !important; }
.nav-auth { display: flex; align-items: center; gap: 22px; }
.nav-actions .nav-login { border: 0; padding: 10px 0; font-size: 14px; color: #b6b6b6; }
.nav-actions .nav-signup { border: 0; padding: 12px 23px; border-radius: 999px; background: #f5f5f5; color: #181818; font-size: 14px; }
.nav-actions .nav-signup:hover { color: #181818; background: #fff; }
@media(max-width:700px) {
  .nav-auth { gap: 8px; }
  .nav-actions .nav-login { font-size: 11px; }
  .nav-actions .nav-signup { padding: 9px 12px; font-size: 11px; }
}
@media(max-width:380px) {
  .navbar:has(.nav-auth:not([hidden])) { grid-template-columns: minmax(0,1fr) 64px minmax(116px,1fr); }
  .navbar:has(.nav-auth:not([hidden])) .nav-search, .navbar:has(.nav-auth:not([hidden])) .search-box { width: 64px; }
  .navbar:has(.nav-auth:not([hidden])) .palette-toggle { right: 0; }
  .navbar:has(.nav-auth:not([hidden])) .mobile-search-toggle { left: 0; }
  .nav-auth { gap: 6px; }
  .nav-actions .nav-login { font-size: 10px; }
  .nav-actions .nav-signup { padding: 9px 10px; font-size: 10px; }
}
body.auth-active { overflow: hidden; }
body.auth-active > .navbar, body.auth-active > .discover-feed, body.auth-active > .site-footer, body.auth-active > .back-to-top, body.auth-active > .page-scrollbar { visibility: hidden; }
.auth-page[hidden], .auth-page [hidden] { display: none !important; }
.auth-page { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: 1fr 1fr; background: #171717; color: #e5e5e5; font-family: 'Noto Sans',sans-serif; overflow: auto; }
.auth-left { position: relative; display: flex; flex-direction: column; min-height: 100dvh; padding: 42px clamp(28px,5vw,86px) 30px; }
.auth-page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.auth-progress-logo { width: 42px; height: 42px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.auth-progress-logo svg { display: block; width: 100%; height: 100%; }
.auth-logo-base { fill: #393939; }
.auth-logo-fill { fill: #e2e7d9; clip-path: inset(calc(100% - var(--auth-progress,0%)) 0 0); transition: clip-path 420ms cubic-bezier(.2,.7,.2,1); }
.auth-exit { padding: 8px 0; border: 0; background: transparent; color: #888; font: inherit; font-size: 11px; cursor: pointer; }
.auth-exit:hover { color: #ddd; }
.auth-center { width: min(100%,360px); margin: auto; padding: 52px 0; }
.auth-step-caption { color: #747474; font-size: 10px; letter-spacing: .12em; margin-bottom: 20px; }
.auth-stage h1 { margin: 0 0 12px; font-size: clamp(24px,2.1vw,32px); line-height: 1.25; letter-spacing: -.035em; font-weight: 500; outline: none; }
.auth-intro { min-height: 40px; margin: 0 0 26px; color: #919191; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 9px; color: #a2a2a2; font-size: 11px; }
.auth-form input { display: block; width: 100%; min-width: 0; padding: 17px 18px; border: 1px solid #393939; border-radius: 15px; outline: none; background: rgba(255,255,255,.015); color: #eee; font: inherit; font-size: 14px; transition: border-color 180ms ease; }
.auth-form input::placeholder { color: #676767; }
.auth-form input:focus { border-color: #8b8f84; }
.auth-password { position: relative; display: block; }
.auth-password input { padding-right: 48px; }
.auth-show { position: absolute; inset: 0 0 0 auto; width: 45px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #999; cursor: pointer; }
.auth-show svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.auth-show[aria-pressed='true'] { color: #fff; }
.auth-submit { width: 100%; padding: 17px; margin-top: 2px; border: 0; border-radius: 999px; background: #e1e4dc; color: #20221e; font: inherit; font-size: 13px; cursor: pointer; transition: background 180ms ease; }
.auth-submit:hover { background: #f1f4ec; }
.auth-submit:disabled { opacity: .55; cursor: wait; }
.auth-error { margin: 0; color: #dfa5a5; font-size: 12px; line-height: 1.6; }
.auth-step-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 22px; font-size: 11px; }
.auth-step-actions button { padding: 4px 0; border: 0; background: transparent; color: #ddd; font: inherit; cursor: pointer; }
.auth-step-actions .auth-previous { margin-right: auto; color: #999; }
.auth-mode-prompt { color: #777; }
.auth-local-note { margin: 28px 0 0; color: #666; font-size: 10px; line-height: 1.8; }
.auth-page-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: #727272; font-size: 10px; }
.auth-page-footer > span:first-child { color: #ccc; font-size: 22px; letter-spacing: -.05em; }
.auth-visual { position: relative; min-width: 0; height: 100dvh; overflow: hidden; background: #1e201d; }
.auth-reel { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 0 7%; will-change: transform; transition: transform 780ms cubic-bezier(.22,.7,.15,1); }
.auth-reel img { display: block; flex: 0 0 auto; width: 100%; height: 62dvh; object-fit: cover; border-radius: 5px; }
.auth-reel img:nth-child(odd) { width: 76%; height: 45dvh; }
.auth-visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom,rgba(22,23,21,.35),transparent 16%,transparent 80%,rgba(22,23,21,.6)); }
.auth-visual-caption { position: absolute; z-index: 1; bottom: 30px; left: 32px; right: 24px; color: #f4f4f4; text-shadow: 0 1px 8px #111; font-size: 12px; }
.auth-visual-caption small { display: block; margin-top: 5px; color: #b8bcb5; font-size: 10px; }
.auth-page button:focus-visible { outline: 2px solid #bbb; outline-offset: 4px; }
@media(max-width:700px) {
  .auth-page { grid-template-columns: minmax(0,1fr) 32%; }
  .auth-left { padding: 26px 22px 24px; }
  .auth-center { padding: 38px 0; }
  .auth-stage h1 { font-size: 24px; }
  .auth-exit { font-size: 10px; }
  .auth-progress-logo { width: 32px; height: 32px; }
  .auth-form input { font-size: 16px; padding: 15px 12px; }
  .auth-reel { padding: 0 8%; gap: 16px; }
  .auth-reel img { height: 52dvh; }
  .auth-reel img:nth-child(odd) { height: 36dvh; width: 88%; }
  .auth-visual-caption { left: 12px; bottom: 26px; font-size: 10px; }
  .auth-visual-caption small { font-size: 9px; }
  .auth-page-footer > span:last-child { display: none; }
}
@media(max-width:420px) {
  .auth-page { grid-template-columns: minmax(0,1fr) 22%; }
  .auth-left { padding: 24px 18px; }
  .auth-page-header { gap: 8px; }
  .auth-visual-caption { display: none; }
  .auth-step-actions { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) { .auth-logo-fill,.auth-reel,.auth-form input,.auth-submit { transition: none; } }
.auth-form select { width: 100%; min-width: 0; padding: 16px 14px; border: 1px solid #393939; border-radius: 15px; outline: none; background: #202020; color: #ddd; font: inherit; font-size: 14px; cursor: pointer; }
.auth-form select:focus { border-color: #8b8f84; }
.auth-welcome { animation: auth-welcome-in 420ms cubic-bezier(.2,.8,.2,1); }
.welcome-avatar { display: block; width: 88px; height: 88px; border-radius: 50%; margin-bottom: 26px; box-shadow: 0 0 0 5px rgba(255,255,255,.025); }
.auth-welcome h1 { margin: 0 0 14px; color: #eee; font-size: clamp(26px,2.5vw,36px); font-weight: 500; line-height: 1.2; letter-spacing: -.035em; overflow-wrap: anywhere; outline: none; }
.auth-welcome p { margin: 0 0 30px; color: #969696; font-size: 13px; line-height: 1.8; }
.welcome-explore, .welcome-profile { display: block; width: 100%; padding: 16px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; }
.welcome-explore { background: #e1e4dc; color: #20221e; }
.welcome-explore:hover { background: #f1f4ec; }
.welcome-profile { margin-top: 12px; background: transparent; color: #aaa; border: 1px solid #3d3d3d; }
.welcome-profile:hover { color: #eee; border-color: #777; }
.profile-badge:has(.nav-user-avatar) { overflow: hidden; }
.profile-badge:has(.nav-user-avatar) svg { display: none; }
.nav-user-avatar { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
@keyframes auth-welcome-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:700px) { .auth-form select { font-size: 16px; } .welcome-avatar { width: 72px; height: 72px; } }
@media(prefers-reduced-motion:reduce) { .auth-welcome { animation: none; } }
.profile-menu { position: fixed; z-index: 85; width: 204px; max-width: calc(100vw - 24px); padding: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: linear-gradient(145deg,rgba(255,255,255,.035),transparent),rgba(27,27,27,.96); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); box-shadow: 0 16px 38px rgba(0,0,0,.4); animation: card-menu-reveal 180ms ease-out; }
.profile-menu[hidden],.saved-header[hidden] { display: none; }
.profile-menu > button,.profile-menu > a { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 43px; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: #d7d7d7; font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.profile-menu > button:hover,.profile-menu > a:hover { background: rgba(255,255,255,.055); color: #fff; }
.profile-menu [role='menuitem']:focus-visible { outline: 1px solid #999; outline-offset: -2px; background: rgba(255,255,255,.04); }
.profile-menu svg { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: #aaa; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.profile-menu-divider { height: 1px; margin: 5px 10px; background: rgba(255,255,255,.08); }
.profile-motion-icon { display: block; flex: 0 0 20px; width: 20px; height: 20px; }
.profile-menu .profile-motion-icon > svg { width: 100% !important; height: 100% !important; }
.profile-motion-icon path[stroke] { stroke: #bbb; }
.profile-motion-star path[fill]:not([fill="none"]) { fill: #bbb; }
.profile-menu .menu-save-outline { fill: none; }
.profile-menu .menu-save-fill { fill: #dedede; stroke: none; clip-path: inset(0 0 100% 0); transition: clip-path 420ms cubic-bezier(.4,0,.2,1); }
.profile-menu a[href="#kaydedilenler"]:hover .menu-save-fill,
.profile-menu a[href="#kaydedilenler"]:focus-visible .menu-save-fill { clip-path: inset(0); }
@media(prefers-reduced-motion:reduce) { .profile-menu .menu-save-fill { transition: none; } }
.profile-button .profile-chevron { transition: transform 180ms ease; }
.profile-button[aria-expanded='true'] .profile-chevron { transform: rotate(180deg); }
.saved-header { margin: 12px 0 30px; }
.saved-header h1 { margin: 10px 0; font-size: clamp(25px,3vw,34px); font-weight: 500; letter-spacing: -.03em; color: #eee; }
.saved-header p { color: #999; font-size: 13px; }
@media(prefers-reduced-motion:reduce) { .profile-menu { animation: none; } .profile-button .profile-chevron { transition: none; } }
.nav-actions .chat-button { width: 34px; height: 34px; border: 1px solid var(--search-focus-edge); border-radius: 50%; }
.chat-button svg { width: 17px; height: 17px; }
.account-page[hidden] { display: none; }
.account-page-active > :not(.account-page) { display: none !important; }
.account-page { width: min(780px,100%); margin: 12px auto 100px; }
.account-page .content-back { display: flex; margin-bottom: 38px; }
.account-page > .search-results-eyebrow { display: block; }
.account-page h1 { margin: 12px 0; color: #eee; font-weight: 500; font-size: clamp(28px,4vw,42px); letter-spacing: -.04em; }
.account-page-intro { color: #999; font-size: 13px; line-height: 1.8; }
.account-page-panel { margin-top: 32px; padding: clamp(24px,4vw,40px); border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: linear-gradient(135deg,rgba(255,255,255,.025),transparent),rgba(30,30,30,.6); }
.account-page-panel h2 { color: #ddd; font-weight: 500; font-size: 22px; line-height: 1.4; letter-spacing: -.025em; }
.account-page-panel p { max-width: 55ch; color: #999; line-height: 1.8; font-size: 13px; }
.settings-avatar { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 18px; }
.settings-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 0; border-bottom: 1px solid #343434; font-size: 13px; }
.settings-row span { color: #929292; }
.settings-row strong { color: #ddd; font-weight: 400; overflow-wrap: anywhere; }
.account-coming-soon { display: inline-block; border: 1px solid #53594c; border-radius: 999px; padding: 6px 12px; color: #bbc5ae; font-size: 10px; }
.account-page-disabled { margin-top: 18px; padding: 12px 18px; border: 1px solid #444; border-radius: 999px; background: transparent; color: #858585; font: inherit; font-size: 12px; }
.account-page-link { display: inline-block; margin-top: 14px; color: #ddd; font-size: 13px; text-decoration: none; }
@media(max-width:700px) { .nav-actions .chat-button { width: 24px; height: 24px; } .chat-button svg { width: 14px; height: 14px; } }
@media(max-width:380px) {
  .navbar:has(.chat-button:not([hidden])) { grid-template-columns: minmax(0,1fr) 64px minmax(116px,1fr); }
  .navbar:has(.chat-button:not([hidden])) .nav-search,.navbar:has(.chat-button:not([hidden])) .search-box { width: 64px; }
  .navbar:has(.chat-button:not([hidden])) .palette-toggle { right: 0; }
  .navbar:has(.chat-button:not([hidden])) .mobile-search-toggle { left: 0; }
  .navbar:has(.chat-button:not([hidden])) .nav-actions { gap: 2px; }
  .nav-actions .chat-button { width: 22px; height: 22px; }
}
.search-history { position: absolute; z-index: 35; top: calc(100% + 10px); left: -8px; width: calc(100% + 16px); max-height: 164px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: linear-gradient(135deg,rgba(255,255,255,.025),transparent),rgba(27,27,27,.97); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); box-shadow: 0 12px 30px rgba(0,0,0,.4); pointer-events: auto; animation: search-dropdown-in 160ms ease-out; }
.search-history[hidden] { display: none; }
.history-heading { display: block; margin: 0 0 7px 3px; color: #828282; font-size: 10px; }
.history-colors { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 3px 4px; border-top: 1px solid rgba(255,255,255,.06); overflow-x: auto; scrollbar-width: none; }
.history-color { display: block; flex: 0 0 24px; position: relative; }
.history-color-pick { display: block; width: 24px; height: 24px; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; cursor: pointer; }
.history-color-remove { display: grid; place-items: center; position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; padding: 0; border: 1px solid #555; border-radius: 50%; color: #ddd; background: #252525; font-size: 12px; line-height: 1; opacity: 0; cursor: pointer; transition: opacity 140ms ease; }
.history-color:hover .history-color-remove,.history-color:focus-within .history-color-remove { opacity: 1; }
.history-searches { display: flex; align-items: center; gap: 7px; padding: 2px 1px; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.history-row { display: flex; flex: 0 0 auto; align-items: center; width: max-content; max-width: 420px; min-height: 32px; gap: 5px; padding: 0 3px 0 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; }
.history-row:hover,.history-row:focus-within { background: rgba(255,255,255,.035); }
.history-pick { flex: 0 0 auto; width: max-content; display: flex; align-items: center; gap: 8px; padding: 7px 4px; border: 0; background: transparent; color: #c1c1c1; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.history-clock { display: grid; place-items: center; flex: 0 0 15px; width: 15px; height: 16px; color: #777; }
.history-clock svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.history-query { display: block; width: max-content; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 0 auto; }
.history-query-color { display: block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); }
.history-delete { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #888; cursor: pointer; }
.history-delete svg,.history-color-remove svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; pointer-events: none; }
.history-color-remove svg { width: 12px; height: 12px; }
.history-delete:hover { color: #eee; }
.history-empty { margin: 6px 4px; color: #818181; font-size: 11px; line-height: 1.6; }
.search-history button:focus-visible { outline: 1px solid #bbb; outline-offset: 2px; }
@media(max-width:700px) { .search-history { top: calc(100% + 68px); left: 50%; transform: translateX(-50%); width: min(340px,calc(100vw - 32px)); } }
@media(hover:none) { .history-color-remove { opacity: 1; } }
@media(prefers-reduced-motion:reduce) { .search-history { animation: none; } .history-color-remove { transition: none; } }
.auth-form .auth-remember { display:flex; align-items:center; gap:10px; font-size:13px; cursor:pointer; }
.auth-form .auth-remember input { width:17px; height:17px; padding:0; accent-color:#cbd3c3; }
.auth-remember small { display:block; margin-top:3px; color:#777; font-size:11px; }
.auth-policy-note { color:#888; font-size:11px; line-height:1.8; margin:0; }
.auth-policy-note a,.footer-legal a { color:inherit; text-decoration:none; }
.auth-policy-note a:hover,.footer-legal a:hover { color:#eee; }
.footer-legal { flex-wrap:wrap; }
.cookie-panel { position:fixed; z-index:20000; bottom:22px; left:22px; width:min(480px,calc(100vw - 44px)); max-height:calc(100dvh - 44px); overflow:auto; padding:24px; border:1px solid #414141; border-radius:24px; background:rgba(27,27,27,.95); backdrop-filter:blur(24px); box-shadow:0 16px 60px #0008; animation:cookie-in .3s ease-out; color:#eee; }
.cookie-panel h2 { margin:0 0 12px; font-size:19px; }
.cookie-panel p { color:#aaa; font-size:12px; line-height:1.8; }
.cookie-panel a { color:#ddd; }
.cookie-actions { display:flex; flex-wrap:wrap; gap:8px; }
.cookie-panel button,.policy-page button { padding:11px 14px; border:1px solid #555; border-radius:24px; background:#292929; color:#eee; font:inherit; font-size:12px; cursor:pointer; }
.cookie-panel button:hover { background:#393939; }
.cookie-details { margin:18px 0; border-top:1px solid #393939; padding-top:16px; }
.cookie-details label { display:block; margin:12px 0; font-size:13px; }
.cookie-details input { accent-color:#bec9b4; }
.cookie-details small { display:block; margin:5px 0 0 24px; color:#888; font-size:11px; }
.cookie-save { margin-top:12px; }
.policy-body { background:#181818; color:#ddd; }
.policy-page { max-width:850px; margin:auto; padding:45px 24px 70px; line-height:1.85; }
.policy-brand { font-size:32px; color:#eee; text-decoration:none; }
.policy-page nav { display:flex; flex-wrap:wrap; gap:18px; margin:25px 0 50px; font-size:13px; }
.policy-page a { color:#c5c5c5; }
.policy-page small { color:#888; }
.policy-page h1 { font-size:clamp(28px,5vw,45px); line-height:1.2; margin:15px 0 45px; }
.policy-page section { margin-bottom:32px; }
.policy-page h2 { font-size:19px; color:#eee; }
.policy-page p { font-size:14px; color:#aaa; }
.policy-page footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:50px; border-top:1px solid #333; padding-top:25px; }
@keyframes cookie-in { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .cookie-panel { animation:none; } }
.history-magnifier { display:block; flex:0 0 15px; width:15px; height:15px; color:#777; } .history-magnifier svg { display:block; width:100%; height:100%; }
/* Keep the image footprint and a muted colour preview while decoding. */
.masonry-feed .feed-card { background:color-mix(in srgb,var(--preview-color,#303030) 28%,#202020); }
.masonry-feed .feed-card img { object-fit:cover; }
.empty-search-actions { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:24px; }
.empty-search-actions button,.empty-search-actions a { border:1px solid #444; border-radius:999px; padding:11px 18px; color:#ddd; background:#252525; font:inherit; font-size:13px; text-decoration:none; cursor:pointer; transition:background 180ms ease,border-color 180ms ease; }
.empty-search-actions button:hover,.empty-search-actions a:hover { background:#303030; border-color:#666; }
.empty-search-actions [hidden] { display:none; }
.profile-page-panel { padding:30px 0; }
.profile-identity { display:flex; align-items:center; gap:24px; }
.profile-identity img { width:96px; height:96px; flex:0 0 96px; border-radius:50%; object-fit:cover; }
.profile-identity div { min-width:0; }
.profile-identity h1 { margin:0 0 8px; font-size:clamp(26px,4vw,40px); font-weight:800; line-height:1.2; overflow-wrap:anywhere; color:#eee; }
.profile-identity p { margin:0; font-size:14px; color:#999; overflow-wrap:anywhere; }
@media(max-width:700px) { .profile-identity { gap:16px; } .profile-identity img { width:72px; height:72px; flex-basis:72px; } }
.profile-avatar-edit { position:relative; flex:0 0 180px; width:180px; height:180px; padding:0; border:0; background:none; border-radius:50%; cursor:pointer; overflow:hidden; }
.profile-identity .profile-avatar-edit img { width:100%; height:100%; display:block; }
.profile-avatar-edit span { position:absolute; inset:auto 0 0; padding:14px 0 18px; background:#0008; color:#fff; font-size:12px; opacity:0; transition:opacity 180ms ease; }
.profile-avatar-edit:hover span,.profile-avatar-edit:focus-visible span { opacity:1; }
.profile-identity { gap:32px; }
.profile-identity h1 { font-size:clamp(36px,5vw,60px); font-weight:800; }
.profile-identity p { font-size:16px; }
.avatar-editor { width:min(460px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); overflow:auto; padding:26px; border:1px solid #454545; border-radius:24px; background:#202020; color:#ddd; box-shadow:0 24px 100px #0009; }
.avatar-editor::backdrop { background:#0009; backdrop-filter:blur(8px); }
.avatar-editor header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.avatar-editor h2 { margin:0; font-size:21px; }
.avatar-editor p,.avatar-editor small { color:#aaa; font-size:12px; line-height:1.7; }
.avatar-editor button { background:#2d2d2d; border:1px solid #494949; border-radius:999px; color:#eee; padding:10px 16px; font:inherit; font-size:12px; cursor:pointer; }
.avatar-editor button:hover { background:#3a3a3a; }
.avatar-source,.avatar-adjust { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.avatar-editor canvas { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:50%; touch-action:none; cursor:grab; margin:22px 0 12px; }
.avatar-editor canvas:active { cursor:grabbing; }
.avatar-editor label { display:grid; gap:8px; font-size:12px; margin:18px 0; }
.avatar-editor input[type=range] { width:100%; accent-color:#d1d6c9; }
.avatar-editor video { display:block; width:100%; border-radius:16px; margin:20px 0 12px; }
.avatar-editor .avatar-save { width:100%; background:#ddd; color:#181818; font-weight:700; }
.avatar-editor .avatar-error { color:#e6a5a5; }
.avatar-editor [hidden] { display:none!important; }
@media(max-width:700px) { .profile-avatar-edit { width:120px; height:120px; flex-basis:120px; } .profile-identity { gap:20px; align-items:center; } .profile-identity h1 { font-size:32px; } .profile-identity p { font-size:12px; } .profile-avatar-edit span { opacity:1; padding:8px 0; } .avatar-editor { padding:20px; } }
.account-page:has(.profile-page-panel) { width:100%; margin-left:0; margin-right:0; padding-inline:clamp(28px,4vw,64px); padding-top:24px; }
.profile-stats { display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,28px); margin-top:18px; color:#999; font-size:14px; } @media(max-width:700px) { .profile-stats { gap:12px; margin-top:12px; font-size:12px; } }
.profile-stats { column-gap:0; row-gap:10px; } .profile-stat { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; } .profile-stat + .profile-stat { border-left:1px solid rgba(255,255,255,.12); margin-left:18px; padding-left:18px; } .profile-stat strong { color:#ddd; font-weight:700; font-variant-numeric:tabular-nums; } @media(max-width:700px) { .profile-stat + .profile-stat { margin-left:10px; padding-left:10px; } .profile-stat { gap:5px; } }
.profile-share { display:grid; place-items:center; width:32px; height:32px; padding:5px; margin-left:20px; border:0; background:transparent; color:#999; cursor:pointer; transition:color 180ms ease,transform 180ms ease; } .profile-share svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .profile-share:hover { color:#eee; transform:translate(1px,-1px); } .profile-stats { align-items:center; } .profile-identity > div { width:max-content; max-width:100%; } .profile-share { margin-left:auto; } .profile-stats .profile-stat:last-of-type { margin-right:18px; }
.share-destinations > [hidden] { display:none; }
.auth-resend { border:0; background:none; color:#aaa; font:inherit; font-size:12px; cursor:pointer; text-align:left; padding:0; } .auth-resend:hover { color:#eee; }
.auth-code-tools { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.auth-edit-email,.auth-forgot { border:0; padding:0; background:none; color:#aaa; font:inherit; font-size:12px; text-decoration:none; cursor:pointer; }
.auth-edit-email:hover,.auth-forgot:hover { color:#eee; }
.auth-spam { margin:0; font-size:12px; color:#92998a; line-height:1.7; }
.auth-resend:disabled { opacity:.5; cursor:default; }
.reset-password-fields { display:grid; gap:14px; }
body.recovery-active { overflow:hidden; }
body.recovery-active > .navbar,body.recovery-active > .discover-feed,body.recovery-active > .site-footer,body.recovery-active > .back-to-top,body.recovery-active > .page-scrollbar { visibility:hidden; }
.profile-identity > .profile-info { width:max-content; max-width:min(620px,100%); }
.profile-identity .profile-handle { margin:7px 0 0; font-size:14px; color:#777; }
.profile-identity .profile-bio { margin:14px 0 0; font-size:14px; line-height:1.7; white-space:pre-wrap; color:#aaa; overflow-wrap:anywhere; max-width:55ch; }
.profile-primary-actions { display:flex; gap:10px; margin-top:20px; }
.profile-edit-button,.profile-follow-button,.profile-list-more { padding:10px 18px; border:1px solid #414141; background:#252525; border-radius:999px; color:#ddd; font:inherit; font-size:12px; cursor:pointer; transition:background 180ms ease; }
.profile-follow-button[aria-pressed=false] { background:#ddd; color:#181818; border-color:#ddd; }
.profile-edit-button:hover,.profile-list-more:hover { background:#333; }
.profile-follow-button[aria-pressed=true]:hover { background:#333; }
.profile-follow-button:disabled { opacity:.55; cursor:default; }
.profile-stat-button { border:0; background:none; padding:0; color:inherit; font:inherit; cursor:pointer; }
.profile-stat-button:hover { color:#ddd; }
.profile-avatar-edit:disabled { cursor:default; }
.profile-network { max-width:620px; margin-top:44px; padding-top:24px; border-top:1px solid #333; }
.profile-network[hidden] { display:none; }
.profile-network h2 { margin:0 0 20px; font-size:19px; color:#ddd; }
.profile-people { display:grid; gap:10px; }
.profile-person { display:flex; align-items:center; gap:15px; padding:12px; border-radius:16px; color:#ddd; text-decoration:none; }
.profile-person:hover { background:#ffffff06; }
.profile-person img { width:48px; height:48px; flex:0 0 48px; border-radius:50%; object-fit:cover; }
.profile-person span { min-width:0; }
.profile-person strong,.profile-person small { display:block; overflow-wrap:anywhere; }
.profile-person strong { font-size:14px; }
.profile-person small { font-size:12px; color:#777; margin-top:5px; }
.profile-list-status { color:#888; font-size:13px; }
.profile-editor { width:min(460px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); overflow:auto; padding:28px; border:1px solid #424242; border-radius:24px; background:#202020; color:#ddd; box-shadow:0 24px 100px #0009; }
.profile-editor::backdrop { background:#0009; backdrop-filter:blur(8px); }
.profile-editor header { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.profile-editor h2 { font-size:21px; margin:0; }
.profile-editor button { border:1px solid #444; border-radius:999px; padding:10px 17px; background:#2a2a2a; color:#ddd; font:inherit; font-size:12px; cursor:pointer; }
.profile-editor [data-close] { padding:4px 12px; font-size:23px; }
.profile-editor form { display:grid; gap:17px; }
.profile-editor label { display:grid; gap:9px; font-size:12px; color:#aaa; }
.profile-editor input,.profile-editor textarea { width:100%; padding:13px 15px; border:1px solid #424242; background:#181818; border-radius:13px; color:#eee; font:inherit; font-size:14px; outline:none; }
.profile-editor textarea { resize:vertical; min-height:95px; }
.profile-editor input:focus,.profile-editor textarea:focus { border-color:#8b8f84; }
.profile-username-input { position:relative; }
.profile-username-input > span { position:absolute; left:15px; top:13px; color:#777; }
.profile-username-input input { padding-left:34px; }
.profile-bio-count { color:#777; text-align:right; font-size:11px; margin-top:-11px; }
.profile-editor footer { display:flex; gap:10px; justify-content:flex-end; margin-top:7px; }
.profile-editor button[type=submit] { background:#ddd; border-color:#ddd; color:#181818; }
.profile-editor-error { color:#e3a5a5; font-size:12px; margin:0; }
.profile-editor [hidden] { display:none; }
@media(max-width:700px) { .profile-identity { align-items:flex-start; } .profile-identity .profile-handle { font-size:12px; } .profile-identity .profile-bio { font-size:12px; } .profile-editor { padding:22px; } .profile-editor input,.profile-editor textarea { font-size:16px; } }

/* Page heading for crawlers and screen readers; hidden while another view shows its own heading. */
.home-heading { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.view-content .home-heading, body.auth-active .home-heading, body.recovery-active .home-heading, .discover-feed.account-page-active .home-heading, body:has(.search-results-header:not([hidden])) .home-heading, body:has(.saved-header:not([hidden])) .home-heading { display: none; }

/* Topic links under a content title */
.content-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.content-tags a { padding: 6px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #cfcfcf; font-size: 13px; text-decoration: none; transition: color 180ms ease, border-color 180ms ease; }
.content-tags a:hover, .content-tags a:focus-visible { color: #fff; border-color: rgba(255,255,255,.4); outline: none; }

/* Display preferences (Ayarlar > Görünüm) */
.pref-reduce-motion *, .pref-reduce-motion *::before, .pref-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.density-dense .masonry-feed { grid-template-columns: repeat(6,minmax(0,1fr)); }
.density-roomy .masonry-feed { grid-template-columns: repeat(4,minmax(0,1fr)); }
@media(max-width:1100px) { .density-dense .masonry-feed { grid-template-columns: repeat(5,minmax(0,1fr)); } .density-roomy .masonry-feed { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) { .density-dense .masonry-feed { grid-template-columns: repeat(3,minmax(0,1fr)); } .density-roomy .masonry-feed { grid-template-columns: minmax(0,1fr); } }
.settings-group { max-width: 520px; margin-bottom: 32px; }
.settings-group h2 { margin: 0 0 6px; font-size: 20px; font-weight: 500; }
.settings-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.settings-option small { display: block; margin-top: 4px; color: #8a8a8a; font-size: 13px; font-weight: 400; }
.settings-switch { position: relative; flex: none; width: 48px; height: 28px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.06); cursor: pointer; }
.settings-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #9a9a9a; transition: transform 180ms ease, background 180ms ease; }
.settings-switch[aria-checked="true"] { background: rgba(255,255,255,.2); }
.settings-switch[aria-checked="true"]::after { transform: translateX(20px); background: #fff; }
.settings-switch:focus-visible, .settings-segment button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.settings-segment { display: flex; flex: none; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; }
.settings-segment button { padding: 8px 14px; border: 0; background: transparent; color: #bdbdbd; font: inherit; font-size: 14px; cursor: pointer; }
.settings-segment button[aria-pressed="true"] { background: rgba(255,255,255,.14); color: #fff; }

/* Touch screens: card icons appear only after the card is tapped */
@media (hover: none) {
  .feed-card:not(.content-current) .card-overlay { opacity: 0; }
  .feed-card:not(.content-current) .card-overlay .card-action { pointer-events: none; }
  .feed-card.actions-open .card-overlay,
  .feed-card.menu-open .card-overlay,
  .feed-card.share-open .card-overlay { opacity: 1; }
  .feed-card.actions-open .card-overlay .card-action,
  .feed-card.menu-open .card-overlay .card-action,
  .feed-card.share-open .card-overlay .card-action { pointer-events: auto; }
}

/* Feed tabs, tags, history, 404, shortcuts help, offline strip */
.feed-tabs { display: flex; gap: 8px; margin: 0 0 22px; }
.feed-tabs[hidden] { display: none; }
.feed-tabs button { padding: 8px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: transparent; color: #aaa; font: inherit; font-size: 14px; cursor: pointer; }
.feed-tabs button[aria-pressed="true"] { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; }
.feed-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tag-cloud a { display: inline-flex; gap: 8px; align-items: baseline; padding: 9px 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #ddd; font-size: 15px; text-decoration: none; transition: background 160ms ease, border-color 160ms ease; }
.tag-cloud a:hover, .tag-cloud a:focus-visible { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; outline: none; }
.tag-cloud small { color: #888; font-size: 12px; }
.history-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 16px; margin: 0 0 28px; padding: 0; list-style: none; }
.history-item { display: block; color: #ddd; text-decoration: none; }
.history-item img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 14px; background: #1e1e1e; }
.history-item span { display: block; margin-top: 8px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.history-item small { color: #888; font-size: 12px; }
.account-page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.account-page-actions a, .account-page-actions button { padding: 10px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.account-page-actions a:hover, .account-page-actions button:hover { background: rgba(255,255,255,.08); }
.content-random { margin-left: 20px; color: #aaa; font-size: 13px; text-decoration: none; }
.content-random:hover { color: #fff; }
.shortcuts { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); }
.shortcuts[hidden] { display: none; }
.shortcuts-box { width: 100%; max-width: 420px; padding: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: #1b1b1b; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.shortcuts-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.shortcuts-head h2 { margin: 0; font-size: 18px; font-weight: 500; }
.shortcuts-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.shortcuts dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; margin: 0; }
.shortcuts dt { justify-self: start; }
.shortcuts dd { margin: 0; color: #bdbdbd; font-size: 14px; }
.shortcuts kbd { display: inline-block; min-width: 28px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.2); border-bottom-width: 2px; border-radius: 7px; background: rgba(255,255,255,.05); color: #fff; font: 13px/1.4 inherit; text-align: center; }
.offline-bar { padding: 9px 16px; background: #2a2a2a; color: #ddd; font-size: 13px; text-align: center; }
.offline-bar[hidden] { display: none; }
.offline-bar a { color: #fff; }

/* Collections, collection dialogs, trends */
.card-menu .menu-collection[hidden] { display: none; }
.profile-collections { margin: 36px 0 0; }
.profile-collections[hidden] { display: none; }
.profile-collections h2 { margin: 0 0 16px; font-size: 20px; font-weight: 500; }
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 18px; }
.collection-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 3/4; padding: 0; border: 1.5px dashed rgba(255,255,255,.28); border-radius: 18px; background: rgba(255,255,255,.03); color: #ddd; font: inherit; font-size: 14px; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.collection-add svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.collection-add:hover, .collection-add:focus-visible { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); color: #fff; outline: none; }
.collection-tile { display: block; color: #ddd; text-decoration: none; }
.collection-cover { display: grid; gap: 2px; aspect-ratio: 3/4; overflow: hidden; border-radius: 18px; background: #222; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.collection-cover img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.collection-cover[data-count="0"] { background: #262626; }
.collection-cover[data-count="1"] img { grid-column: 1 / 3; grid-row: 1 / 3; }
.collection-cover[data-count="2"] img { grid-row: 1 / 3; }
.collection-cover[data-count="3"] img:first-child { grid-row: 1 / 3; }
.collection-tile strong { display: block; margin-top: 10px; overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.collection-tile small { color: #888; font-size: 12px; }
.collection-tile:hover .collection-cover, .collection-tile:focus-visible .collection-cover { outline: 2px solid rgba(255,255,255,.4); outline-offset: 2px; }
.collection-hint { margin: 14px 0 0; color: #999; font-size: 14px; }
.collection-dialog { width: min(420px, calc(100vw - 24px)); padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: #1b1b1b; color: #eee; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.collection-dialog::backdrop { background: rgba(0,0,0,.6); }
.collection-dialog form, .collection-picker { display: block; }
.collection-dialog form { padding: 22px; }
.collection-picker { padding: 22px; }
.collection-dialog header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.collection-dialog h2 { margin: 0; font-size: 19px; font-weight: 500; }
.collection-dialog header button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.collection-dialog label { display: block; margin-bottom: 14px; color: #bdbdbd; font-size: 14px; }
.collection-dialog input[name="name"] { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.04); color: #fff; font: inherit; font-size: 16px; }
.collection-dialog input[name="name"]:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.collection-private { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.collection-private input { margin-top: 3px; width: 18px; height: 18px; accent-color: #fff; }
.collection-private small { display: block; margin-top: 3px; color: #888; font-size: 12px; }
.collection-dialog-error { margin: 0 0 12px; color: #ff9b9b; font-size: 14px; }
.collection-dialog-error[hidden] { display: none; }
.collection-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.collection-dialog-actions button { padding: 10px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.collection-dialog-actions button[type="submit"] { border-color: #fff; background: #fff; color: #111; }
.collection-dialog-actions button:disabled { opacity: .5; cursor: default; }
.collection-picker-list { display: grid; gap: 8px; max-height: min(50vh, 360px); margin-bottom: 12px; overflow: auto; }
.collection-pick-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: transparent; color: #eee; font: inherit; text-align: left; cursor: pointer; }
.collection-pick-row:hover, .collection-pick-row:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.collection-pick-cover { flex: none; width: 46px; height: 58px; overflow: hidden; border-radius: 10px; background: #2a2a2a; }
.collection-pick-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collection-pick-text { flex: 1; min-width: 0; }
.collection-pick-text strong { display: block; overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.collection-pick-text small { color: #888; font-size: 12px; }
.collection-pick-check { flex: none; width: 22px; height: 22px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 50%; }
.collection-pick-row[aria-pressed="true"] .collection-pick-check { border-color: #fff; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat; }
.collection-picker-status { min-height: 18px; margin: 0 0 8px; color: #999; font-size: 13px; }
.feed-page-header .feed-page-actions { margin-top: 14px; }
.feed-page-header a { color: #ddd; }

/* Text size (Ayarlar > Görünüm): the whole page scales */
html[data-text="large"] { zoom: 1.1; }
html[data-text="xlarge"] { zoom: 1.22; }
@media (max-width: 700px) { .settings-option { flex-wrap: wrap; } .settings-segment { max-width: 100%; overflow-x: auto; } }

/* Collection page tools, selection mode, share button, colour page */
.collection-share { display: inline-flex; align-items: center; gap: 8px; }
.collection-share svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.collection-share-hint { align-self: center; color: #888; font-size: 13px; }
.collection-arrange[aria-pressed="true"] { border-color: #fff; background: rgba(255,255,255,.12); }
.collection-card-tools { position: absolute; top: 8px; left: 8px; z-index: 4; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(20,20,20,.78); }
.collection-card-tools button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.collection-card-tools button:hover, .collection-card-tools button:focus-visible { background: rgba(255,255,255,.22); outline: none; }
.saved-select { margin-top: 14px; padding: 9px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.saved-select[hidden] { display: none; }
.saved-select[aria-pressed="true"] { border-color: #fff; background: rgba(255,255,255,.12); }
.saved-header .saved-select { display: block; }
body.selecting .feed-card { cursor: pointer; }
.feed-card.is-selected { outline: 3px solid #fff; outline-offset: -3px; }
.feed-card.is-selected::after { content: ""; position: absolute; top: 10px; left: 10px; z-index: 4; width: 26px; height: 26px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center/16px no-repeat; }
.selection-bar { position: fixed; left: 50%; bottom: 20px; z-index: 80; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 10px 12px 10px 20px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: #202020; box-shadow: 0 16px 40px rgba(0,0,0,.45); color: #eee; font-size: 14px; }
.selection-bar button { padding: 9px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.selection-bar .selection-add { border-color: #fff; background: #fff; color: #111; }
.selection-bar .selection-add:disabled { opacity: .45; cursor: default; }
.color-family { margin: 0 0 30px; }
.color-family h2 { margin: 0 0 14px; font-size: 18px; font-weight: 500; }
.color-swatches { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 14px; }
.color-swatch { display: block; color: #ddd; text-decoration: none; }
.color-chip { display: block; aspect-ratio: 4/3; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: transform 160ms ease; }
.color-swatch:hover .color-chip, .color-swatch:focus-visible .color-chip { transform: translateY(-2px); }
.color-swatch:focus-visible { outline: none; }
.color-swatch:focus-visible .color-chip { box-shadow: 0 0 0 2px #fff; }
.color-swatch strong { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; }
.color-swatch small { color: #888; font-size: 12px; }

/* "Senin için / Tümü": a pill fixed at the bottom centre of the screen */
.feed-tabs { position: fixed; z-index: 40; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); gap: 4px; margin: 0; padding: 5px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: #202020; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.feed-tabs button { padding: 9px 20px; border-color: transparent; white-space: nowrap; }
.feed-tabs button[aria-pressed="true"] { border-color: #fff; background: #fff; color: #111; }
body:has(.feed-tabs:not([hidden])) .toast { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }

/* Feed tabs: sliding thumb, soft entrance */
.feed-tabs-thumb { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: #fff; pointer-events: none; }
.feed-tabs.is-ready .feed-tabs-thumb { transition: transform 320ms cubic-bezier(.3,.9,.3,1), width 320ms cubic-bezier(.3,.9,.3,1); }
.feed-tabs button { position: relative; z-index: 1; transition: color 260ms ease; }
.feed-tabs button[aria-pressed="true"] { border-color: transparent; background: transparent; color: #111; }
@keyframes feed-tabs-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.feed-tabs:not([hidden]) { animation: feed-tabs-in 340ms cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .feed-tabs:not([hidden]) { animation: none; } .feed-tabs.is-ready .feed-tabs-thumb { transition: none; } }

/* Motion: card morph, image loading, entrances, touch feedback, tab pill, flying chip, empty-state art, read progress, colour reveal */
::view-transition-group(card-hero) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
html.vt-card::view-transition-old(root), html.vt-card::view-transition-new(root) { animation-duration: 220ms; }
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation-duration: 320ms; }
.masonry-feed .feed-card img { transform: scale(1.04); transition: opacity 420ms ease, transform 700ms cubic-bezier(.2,.8,.2,1); }
.masonry-feed .feed-card img.image-ready, .masonry-feed .feed-card img.image-failed { transform: none; }
.feed-card.is-loading { overflow: hidden; }
.feed-card.is-loading::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.07) 50%, transparent 80%); transform: translateX(-100%); animation: card-shimmer 1.3s ease-in-out infinite; }
@keyframes card-shimmer { to { transform: translateX(100%); } }
.feed-card.card-enter { animation: card-in 480ms cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--enter-delay, 0ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
@media (hover: none) {
  .masonry-feed .feed-card { transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
  .masonry-feed .feed-card.actions-open { transform: scale(.985); }
  .feed-card.actions-open .card-action { animation: action-pop 320ms cubic-bezier(.2,.9,.3,1.3) both; }
  .feed-card.actions-open .card-bottom-actions .card-action:nth-child(2) { animation-delay: 50ms; }
  .feed-card.actions-open .card-bottom-actions .card-action:nth-child(3) { animation-delay: 100ms; }
}
@keyframes action-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.feed-tabs { transition: transform 300ms cubic-bezier(.2,.8,.2,1), opacity 300ms ease; }
.feed-tabs:not([hidden]) { animation: feed-tabs-in 340ms cubic-bezier(.2,.8,.2,1) backwards; }
.feed-tabs.is-compact { transform: translateX(-50%) translateY(16px) scale(.7); opacity: .55; }
.feed-tabs.is-compact:hover, .feed-tabs.is-compact:focus-within { transform: translateX(-50%); opacity: 1; }
.fly-chip { position: fixed; z-index: 200; top: 0; left: 0; display: grid; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; background: #fff; color: #111; box-shadow: 0 6px 18px rgba(0,0,0,.4); pointer-events: none; will-change: transform; }
.fly-chip svg { width: 16px; height: 16px; }
.empty-art { display: flex; justify-content: center; margin: 0 0 12px; color: #8a8a8a; }
.empty-art svg { width: 112px; height: 112px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty-art [class^="art-"] { transform-box: fill-box; transform-origin: center; }
.art-a { animation: art-float 3.2s ease-in-out infinite; }
.art-b { animation: art-float 3.2s ease-in-out -.6s infinite; }
.art-c { animation: art-float 3.2s ease-in-out -1.2s infinite; }
.empty-art .art-hand, .empty-art .art-needle { transform-box: view-box; transform-origin: 60px 60px; }
.art-hand { animation: art-spin 6s linear infinite; }
.art-needle { animation: art-wobble 4.5s ease-in-out infinite; }
.art-lens { animation: art-sweep 3.6s ease-in-out infinite; }
@keyframes art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-wobble { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(40deg); } }
@keyframes art-sweep { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(8px, -6px) rotate(8deg); } }
.read-progress { display: none; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px; background: #fff; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
@supports (animation-timeline: scroll()) { body.view-content .read-progress { display: block; animation: read-progress linear both; animation-timeline: scroll(root block); } }
@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.color-cover { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.color-chip { transition: transform 200ms ease; }
.color-swatch:hover .color-chip, .color-swatch:focus-visible .color-chip { transform: translateY(-3px) scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .masonry-feed .feed-card img { transform: none; transition: none; }
  .feed-card.card-enter, .feed-card.is-loading::after, .feed-card.actions-open .card-action, .feed-tabs:not([hidden]), .art-a, .art-b, .art-c, .art-hand, .art-needle, .art-lens { animation: none; }
  .feed-tabs, .masonry-feed .feed-card { transition: none; }
  .color-chip { transition: none; }
}