:root {
  --sea-abyss: #041521;
  --sea-deep: #072a3e;
  --sea-mid: #0b4f6c;
  --sea-turquoise: #12829c;
  --sea-shallow: #22b8cf;
  --sea-caustic: rgba(102, 238, 255, 0.11);
  --mattress-bg-top: rgba(15, 27, 38, 0.94);
  --mattress-bg-bottom: rgba(10, 19, 28, 0.97);
  --mattress-piping: rgba(56, 217, 232, 0.36);
  --mattress-piping-strong: rgba(78, 229, 242, 0.58);
  --mattress-under: rgba(24, 168, 188, 0.28);
  --text-primary: #eef9fc;
  --text-secondary: #bddce5;
  --text-muted: #8ab4c2;
}


body {
  position: relative;
  min-height: 100vh;
  color: var(--text-primary);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  background-color: var(--sea-abyss);
  background-image:
    radial-gradient(ellipse 90% 55% at 18% 12%, rgba(34, 184, 207, 0.34) 0%, rgba(18, 130, 156, 0.14) 48%, transparent 78%),
    radial-gradient(ellipse 85% 60% at 82% 28%, rgba(20, 160, 185, 0.28) 0%, rgba(11, 79, 108, 0.12) 52%, transparent 80%),
    radial-gradient(ellipse 100% 70% at 50% 78%, rgba(15, 118, 144, 0.24) 0%, rgba(7, 42, 62, 0.35) 58%, transparent 88%),
    repeating-linear-gradient(168deg, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 2px, transparent 2px, transparent 44px),
    linear-gradient(180deg, #0d5c75 0%, #0a465e 24%, #073349 54%, #052233 80%, #031520 100%);
  background-attachment: fixed;
}


body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}


body::before {
  background-image:
    radial-gradient(circle at 22% 30%, var(--sea-caustic) 0%, transparent 36%),
    radial-gradient(circle at 76% 22%, rgba(120, 242, 255, 0.09) 0%, transparent 32%),
    radial-gradient(circle at 64% 68%, var(--sea-caustic) 0%, transparent 40%),
    radial-gradient(circle at 28% 80%, rgba(72, 219, 238, 0.08) 0%, transparent 35%),
    repeating-radial-gradient(ellipse 120% 45% at 50% -10%, rgba(94, 234, 248, 0.045) 0px, rgba(94, 234, 248, 0.045) 14px, transparent 15px, transparent 68px);
  animation: sea-caustics 14s ease-in-out infinite alternate;
}


body::after {
  background-image:
    linear-gradient(180deg, rgba(6, 28, 42, 0.18) 0%, transparent 22%, transparent 78%, rgba(2, 12, 20, 0.65) 100%),
    repeating-linear-gradient(-12deg, rgba(56, 217, 232, 0.03) 0px, rgba(56, 217, 232, 0.03) 18px, transparent 18px, transparent 64px);
}


article.project {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(168deg, var(--mattress-bg-top) 0%, var(--mattress-bg-bottom) 100%);
  border-radius: 18px;
  border: 1px solid var(--mattress-piping);
  box-shadow:
    0 18px 36px -10px rgba(2, 10, 18, 0.76),
    0 6px 16px -4px rgba(5, 32, 48, 0.52),
    0 3px 0 0 var(--mattress-under),
    inset 0 1px 0 rgba(145, 242, 252, 0.18),
    inset 0 -8px 18px rgba(3, 9, 15, 0.65);
  padding: 0.85rem;
  overflow: hidden;
  will-change: transform;
  transform-origin: 50% 50%;
  animation: mattress-wave-a 11.5s ease-in-out infinite;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


article.project::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 13px;
  border: 1px solid rgba(72, 222, 236, 0.12);
  background-image: repeating-linear-gradient(
    90deg,
     rgba(255, 255, 255, 0.012) 0px,
    rgba(255, 255, 255, 0.012) 1px,
    transparent 1px,
    transparent 56px
  );
  pointer-events: none;
  z-index: 0;
}


article.project > * {
  position: relative;
  z-index: 1;
}


article.project:nth-child(1)  { animation-name: mattress-wave-a; animation-duration: 9.4s;  animation-delay: -1.1s; }

article.project:nth-child(2)  { animation-name: mattress-wave-b; animation-duration: 11.2s; animation-delay: -3.7s; }

article.project:nth-child(3)  { animation-name: mattress-wave-c; animation-duration: 12.8s; animation-delay: -6.2s; }

article.project:nth-child(4)  { animation-name: mattress-wave-a; animation-duration: 10.3s; animation-delay: -2.4s; }

article.project:nth-child(5)  { animation-name: mattress-wave-b; animation-duration: 13.9s; animation-delay: -8.1s; }

article.project:nth-child(6)  { animation-name: mattress-wave-c; animation-duration: 9.8s;  animation-delay: -4.9s; }

article.project:nth-child(7)  { animation-name: mattress-wave-a; animation-duration: 14.6s; animation-delay: -7.3s; }

article.project:nth-child(8)  { animation-name: mattress-wave-b; animation-duration: 10.7s; animation-delay: -1.8s; }

article.project:nth-child(9)  { animation-name: mattress-wave-c; animation-duration: 12.1s; animation-delay: -5.5s; }

article.project:nth-child(10) { animation-name: mattress-wave-a; animation-duration: 13.4s; animation-delay: -9.0s; }


article.project:hover,
article.project:focus,
article.project:focus-within {
  animation-play-state: paused;
  border-color: var(--mattress-piping-strong);
  box-shadow:
    0 22px 42px -10px rgba(1, 8, 15, 0.84),
    0 8px 20px -4px rgba(14, 96, 120, 0.45),
    0 3px 0 0 rgba(56, 217, 232, 0.42),
    inset 0 1px 0 rgba(175, 248, 255, 0.26),
    inset 0 -8px 18px rgba(3, 9, 15, 0.7);
}


@keyframes mattress-wave-a {
  0%, 100% {
    transform: translate3d(0, 0px, 0) rotate(0deg);
  }
  33% {
    transform: translate3d(1.5px, -3.2px, 0) rotate(0.65deg);
  }
  66% {
    transform: translate3d(-1.5px, 2.8px, 0) rotate(-0.6deg);
  }
}


@keyframes mattress-wave-b {
  0%, 100% {
    transform: translate3d(0, 0px, 0) rotate(0deg);
  }
  38% {
    transform: translate3d(-2px, -3.5px, 0) rotate(-0.75deg);
  }
  72% {
    transform: translate3d(1.8px, 3px, 0) rotate(0.7deg);
  }
}


@keyframes mattress-wave-c {
  0%, 100% {
    transform: translate3d(0, 0px, 0) rotate(0deg);
  }
  30% {
    transform: translate3d(1.2px, 3.2px, 0) rotate(-0.55deg);
  }
  68% {
    transform: translate3d(-1.6px, -3.4px, 0) rotate(0.8deg);
  }
}


@keyframes sea-caustics {
  0% {
    opacity: 0.78;
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, -4px, 0);
  }
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  body::before,
  article.project {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
/* Adapt Gemini's visual rules to the existing DOM: #projekty also contains the toolbar; cinematic-hero is an image panel, not the page header. */
header,main,footer,.wrap,.page-shell{position:relative;z-index:1}body{isolation:isolate}body::before,body::after{z-index:-1}.projects{gap:38px;padding:18px 8px 48px}.hero{background:transparent!important}.hero h1,.hero p{color:#e6faff!important}.hero .eyebrow{color:#8fe4ec}.toolbar,.filters,.search{color:#d9f4f9}.search input{color:#e3faff;background:#072d3b;border-color:#4db3c1}.search input::placeholder{color:#aed5dc}article.project{border-radius:30px;transform-origin:center;padding:10px;animation-timing-function:ease-in-out}article.project>.visual,article.project>.cinematic-hero,article.project>.sondy-art{border-radius:21px;overflow:hidden}.project>.card-body,#project-mikroforma>.card-body,#project-sondy>.card-body{background:linear-gradient(155deg,#112c3c,#0a1c2b)!important;border-radius:0 0 21px 21px;color:#ebf8fc!important}.project h2{color:#eefaff!important}.project .description,.project .note,.project .card-top{color:#badbe5!important}.project .destination{box-shadow:none}.access-info{background:#092d3bd9;color:#d5f3fa}.access-info p,.access-info h3,footer{color:#c0e8ed!important}.filter{margin:0!important}.preview-notice{margin-bottom:0}#project-mikroforma .cinematic-hero,#project-sondy .sondy-art{max-width:none;margin:0;padding:0}.project:hover,.project:focus-within{animation-play-state:paused!important}
@media(max-width:640px){.projects{grid-template-columns:1fr;gap:28px;padding-inline:3px}article.project{border-radius:25px;padding:8px}}
@media(prefers-reduced-motion:reduce){body::before,body::after,.project{animation:none!important;transform:none!important}}