diff --git a/assets/main.scss b/assets/main.scss
index 8bf6159..8ecb5fc 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -178,10 +178,18 @@ a[href^="#"] {
     }
 
     &_calc {
-        @apply py-0;
+        // @apply;
 
-        &-canvas {
-            @apply relative h-[50vh] min-h-[600px];
+        .container {
+            @apply gap-4 items-stretch;
+
+            >* {
+                @apply relative;
+            }
+
+            >div:first-child {
+                @apply min-h-[600px];
+            }
         }
     }
 
@@ -273,13 +281,17 @@ label {
 }
 
 input {
-    @apply bg-neutral-200 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 disabled:cursor-not-allowed disabled:text-black;
+    @apply bg-white border border-gray-300 text-gray-900 text-lg p-2.5 rounded focus:ring-blue-500 focus:border-blue-500 focus-visible:border-blue-500 disabled:cursor-not-allowed disabled:text-black
 }
 
 input[type=checkbox] {
     @apply w-4 h-4;
 }
 
+input[type=range] {
+    @apply w-full bg-transparent border-transparent cursor-pointer appearance-none disabled:opacity-50 disabled:pointer-events-none focus:outline-none [&::-webkit-slider-thumb]:w-2.5 [&::-webkit-slider-thumb]:h-2.5 [&::-webkit-slider-thumb]:-mt-0.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_0_0_4px_#111] [&::-webkit-slider-thumb]:shadow-slate-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-150 [&::-webkit-slider-thumb]:ease-in-out [&::-webkit-slider-thumb]:dark:bg-neutral-700 [&::-moz-range-thumb]:w-2.5 [&::-moz-range-thumb]:h-2.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:border-4 [&::-moz-range-thumb]:border-blue-600 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:duration-150 [&::-moz-range-thumb]:ease-in-out [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:bg-gray-100 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:dark:bg-neutral-700 [&::-moz-range-track]:w-full [&::-moz-range-track]:h-2 [&::-moz-range-track]:bg-gray-100 [&::-moz-range-track]:rounded-full;
+}
+
 textarea {
     @apply block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 max-w-full min-h-10 max-h-40;
 }
@@ -294,51 +306,133 @@ button {
 }
 
 .form {
-    @apply col-span-full grid grid-cols-12 gap-4;
+    @apply col-span-full h-full flex flex-col gap-4 justify-between;
+
+    &-group {
+        @apply rounded flex flex-col gap-4 p-4 shadow shadow-slate-400;
+    }
 
     &-row {
-        @apply col-span-full flex flex-row flex-wrap gap-4;
+        @apply flex flex-row flex-wrap gap-2;
+
+        &_picker {
+            @apply grid grid-cols-2 justify-center items-center;
+        }
     }
 
     &-item {
-        @apply flex flex-row gap-4 items-center justify-start xl:justify-center flex-wrap xl:flex-nowrap;
+        @apply flex flex-row items-center justify-start flex-wrap;
 
         label {
-            @apply w-full xl:w-auto;
+            @apply w-full;
         }
 
         .icon {
-            @apply hover:text-primary cursor-pointer transition-colors text-2xl;
+            @apply hover:text-primary cursor-pointer transition-colors text-xl;
 
             &.disabled {
                 @apply text-neutral pointer-events-none cursor-not-allowed;
             }
         }
 
-        &_checkbox {
-            @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap
+        &_total {
+            @apply w-full flex-nowrap;
+
+            input {
+                @apply w-20 bg-slate-100;
+            }
         }
 
-        input[type=range] {
-            @apply min-w-[calc(100%-8rem)] xl:min-w-min;
+        &_checkbox {
+            @apply w-full xl:w-auto flex-row xl:flex-initial flex-nowrap gap-2 items-center;
+
+            label {
+                @apply leading-none;
+            }
+
+            svg {
+                @apply text-slate-500;
+            }
+        }
+
+        &_range {
+            @apply w-full;
+
+            >div {
+                @apply flex flex-nowrap w-full gap-2 items-center;
+
+                input {
+                    @apply flex-grow;
+                }
+
+                span {
+                    @apply min-w-16;
+                }
+            }
+        }
+
+        &_picker {
+            @apply w-full;
+
+            svg {
+                @apply text-slate-500;
+            }
         }
     }
 }
 
-.color_picker {
-    @apply leading-none;
+.picker {
+    @apply leading-none w-full row-start-2;
+
+    &_open {
+        @apply flex-wrap;
+    }
+
+    &_disabled {
+        @apply pointer-events-none opacity-50;
+    }
+
+    &-input {
+        @apply flex items-center justify-between;
+
+        >div {
+            @apply min-h-12 overflow-hidden rounded border-gray-300 shadow flex leading-none grow justify-center items-center p-2;
+
+            span {
+                @apply grow text-left max-w-[80%] break-words line-clamp-2;
+            }
+        }
+
+    }
+
+    &-button {
+        @apply min-w-6 shrink-0 h-full;
+    }
 
     &-selected {
-        @apply size-10 rounded border-gray-300 shadow inline-block leading-none;
-
-        &__active {
-            @apply outline outline-2 outline-offset-2 outline-primary;
-        }
+        @apply h-10 overflow-hidden rounded border-gray-300 shadow inline-block leading-none grow;
     }
 
     &-changer {
-        @apply absolute w-80 z-10 p-4 border rounded bg-white flex gap-0 right-0 lg:right-auto;
+        @apply gap-3 mt-4 max-h-36 overflow-auto order-10 hidden;
+
+        &_open {
+            @apply flex flex-wrap col-span-2;
+        }
     }
+
+    &-list {
+        @apply flex gap-4 w-full;
+    }
+
+    &-item {
+        @apply size-10;
+
+        &--empty {
+            @apply block bg-slate-300;
+        }
+    }
+
 }
 
 .feature {
@@ -369,11 +463,15 @@ button {
     }
 }
 
+.calc {
+    @apply max-h-[800px] relative h-full;
+}
+
 .calc_table {
-    @apply flex flex-col gap-2 mb-4;
+    @apply flex flex-col gap-2 self-end;
 
     >.grid {
-        @apply gap-2 items-center;
+        @apply gap-2 items-end;
 
         >[class*=col] {
             @apply p-1 border-solid border-b;
diff --git a/components/calc/models.vue b/components/calc/models.vue
new file mode 100644
index 0000000..6a8a735
--- /dev/null
+++ b/components/calc/models.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Stats, OrbitControls } from '@tresjs/cientos'
+import { degToRad } from 'three/src/math/MathUtils.js';
+
+const controlsState = reactive({
+    position: { x: 0, y: 0, z: 0 },
+    enablePan: false,
+    enableZoom: false,
+    minPolarAngle: degToRad(60),
+    maxPolarAngle: degToRad(100),
+    minAzimuthAngle: degToRad(0),
+    maxAzimuthAngle: degToRad(180),
+})
+const cameraStat = reactive({
+    position: [0, 0, 5],
+    aspect: 1920 / 600,
+    // fov: 40,
+})
+</script>
+<template>
+    <div class="calc">
+        <ClientOnly fallback-tag="div">
+            <template #fallback>
+                <div class="fallback">
+                    Загрузка 3D модели
+                </div>
+            </template>
+            <Loader />
+            <TresCanvas clear-color="#e2e8f0">
+                <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
+                <OrbitControls v-bind="controlsState" make-default />
+                <Suspense>
+                    <ModelSmoothCamera />
+                </Suspense>
+                <Suspense>
+                    <ModelEnv />
+                </Suspense>
+                <TresGroup>
+                    <Suspense>
+                        <ModelParametric />
+                    </Suspense>
+                </TresGroup>
+            </TresCanvas>
+        </ClientOnly>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/calc/values.vue b/components/calc/values.vue
new file mode 100644
index 0000000..e7910f3
--- /dev/null
+++ b/components/calc/values.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import { Vector3 } from 'three';
+import { getColorNameFromRal } from '@/components/ral'
+import type { ralTypes } from '@/components/ral'
+
+import { predefLamelleColors, predefPillarColors } from '~/composables/useCalc';
+import { getName as getPattern, type patternIds } from '../pattern';
+import { getName as getTopper, type toppersIds } from '../topper';
+
+const lamelle_height = use_lamelle_height()
+const lamelles_count = use_lamelles_count()
+const fence_section = use_fence_section()
+const remove_pillar = use_remove_pillar()
+const pillar_color = use_pillar_color()
+const pillar_pattern = use_pattern()
+const pillar_topper = use_topper()
+const lamelle_color = use_lamelle_color()
+const section_count = use_section_count()
+const extra_section = use_extra_section()
+const total_length = use_total_length()
+const min_length = use_min_length()
+
+if (!pillar_color.value) {
+    const r = Math.floor(Math.random() * predefPillarColors.length)
+    pillar_color.value = predefPillarColors[r] as ralTypes
+    lamelle_color.value = predefLamelleColors[r] as ralTypes
+}
+
+const parametric = reactive({
+    length: {
+        min: min_length.value,
+        max: 2470,
+        step: 1,
+    },
+    total_length: {
+        min: min_length.value * 0.001,
+        max: undefined,
+        step: 0.5,
+    },
+    height: {
+        min: 20 + lamelle_height.value * 1000 * 5,
+        max: 20 + lamelle_height.value * 1000 * 20,
+        step: lamelle_height.value * 1000,
+    }
+})
+const form_state = reactive({
+    length: fence_section.value * 1000,
+    fence_length: 104,
+    height: 100 + lamelles_count.value * parametric.height.step,
+    total_length: total_length.value,
+    total_length_mm: fence_section.value * 1000,
+    full_sections: section_count.value,
+    extra_section: 0,
+    auto_length: true,
+    remove_pillar: false
+})
+let copy_form_state = Object.assign({}, form_state)
+const form_refs = {
+    length: ref(),
+    height: ref(),
+    total_length: ref(),
+}
+
+const changeParametres = () => {
+    // console.log('form', form_state.total_length * 1000, 'copy', copy_form_state.total_length * 1000)
+
+    const lamelles = Math.floor(form_state.height / parametric.height.step)
+
+    for (const key in form_state) {
+        if (parametric.hasOwnProperty(key)) {
+            const key_p = key as keyof typeof parametric
+            const key_s = key as keyof typeof form_state
+            if (parametric[key_p].max) {
+                if ((form_state[key_s] as number) > parametric[key_p].max) {
+                    (form_state[key_s] as number) = parametric[key_p].max
+                }
+            }
+        }
+    }
+
+    form_state.total_length_mm = form_state.total_length * 1000
+
+    let { fence_length, total_length_mm, auto_length, length, full_sections } = form_state
+    length = parseFloat(length.toString())
+    if (total_length_mm < parametric.length.min) total_length_mm = parametric.length.min
+
+    if (auto_length) {
+        let w = parametric.length.min
+        const max_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.min + fence_length))
+        const min_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.max + fence_length)) || 1
+
+        for (let index = min_sections; index <= max_sections; index++) {
+            full_sections = index
+            w = (total_length_mm - fence_length - fence_length * index) / index
+            if (
+                w >= parametric.length.min
+                && w <= parametric.length.max
+                && w * index <= total_length_mm
+            ) {
+                break
+            }
+        }
+        length = w
+    } else {
+        full_sections = Math.floor((total_length_mm - fence_length) / (length + fence_length))
+        if (full_sections == 0) {
+            length = total_length_mm - fence_length - fence_length
+        }
+    }
+    const calc_full_section = () => (full_sections * length) + (full_sections * fence_length) + fence_length
+    let total_length_calc = calc_full_section()
+    if (
+        Math.round(total_length_mm - total_length_calc) > 0
+        && Math.round(total_length_mm - total_length_calc) <= fence_length
+    ) {
+        full_sections -= 1
+        total_length_calc = calc_full_section()
+    }
+    if (Math.round(total_length_mm - total_length_calc) > 0) {
+        form_state.extra_section = total_length_mm - total_length_calc - fence_length
+    } else {
+        form_state.extra_section = 0
+    }
+
+    form_state.full_sections = full_sections
+    form_state.length = typeof length == 'string' ? parseFloat(length) : length
+    form_state.fence_length = typeof fence_length == 'string' ? parseFloat(fence_length) : fence_length
+
+    copy_form_state = Object.assign({}, form_state)
+
+    total_length.value = form_state.total_length
+    lamelles_count.value = lamelles
+    fence_section.value = form_state.length * 0.001
+    section_count.value = form_state.full_sections
+    extra_section.value = form_state.extra_section
+    remove_pillar.value = form_state.remove_pillar
+
+    goal('calc_fence', form_state)
+}
+
+const setLamelleColor = (color: ralTypes) => {
+    lamelle_color.value = color;
+}
+const setPillarColor = (color: ralTypes) => {
+    pillar_color.value = color
+}
+const setPillarPattern = (id: patternIds) => {
+    pillar_pattern.value = id
+}
+const setPillarTopper = (id: toppersIds) => {
+    pillar_topper.value = id
+}
+watch(() => form_state, changeParametres, { deep: true })
+
+const isModalOpen = useState('modal_open', () => false)
+const toggleModal = () => {
+    isModalOpen.value = !isModalOpen.value
+}
+const goal = (target: string, params: object) => {
+    const nuxtApp = useNuxtApp()
+    if (nuxtApp.$metrika) {
+        (nuxtApp.$metrika as any).reachGoal(target, params || {})
+    }
+}
+const calc_table = computed(() => {
+    return [
+        {
+            name: 'Секции',
+            value: section_count,
+            extra: 1,
+            extra_name: 'Дополнительная секция'
+        },
+        {
+            name:
+                `Ламели`,
+            value: section_count.value * lamelles_count.value,
+            extra: 1 * lamelles_count.value
+        },
+        {
+            name: `Столбы`,
+            value: !form_state.remove_pillar ? section_count.value + ~~(!!form_state.extra_section) + 1 : `—`,
+            extra: `—`
+        },
+    ]
+})
+</script>
+<template>
+    <div class="form">
+        <div class="form-group">
+            <div class="form-row form-row_picker">
+                <label for="lamelle_color">Цвет ламелей</label>
+                <DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color" :color="lamelle_color"
+                    :goto_target="new Vector3(0, lamelles_count * lamelle_height * 0.75, 0)"
+                    :goto_cam="new Vector3(0.75, 0.75, 0.75)" />
+                <label for="pillar_color">Цвет столба</label>
+                <DropdownPicker type="color" :cb="setPillarColor" name="pillar_color" :color="pillar_color"
+                    :goto_target="new Vector3(-fence_section * 0.5, lamelles_count * lamelle_height, 0)"
+                    :goto_cam="new Vector3(-1, -1, 1)" />
+            </div>
+            <div class="form-row form-row_picker">
+                <label for="pillar_pattern">Узор столба</label>
+                <DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
+                    :pattern="getPattern(pillar_pattern)" :disabled="remove_pillar"
+                    :goto_target="new Vector3(fence_section * 0.5, lamelles_count * lamelle_height, 0)"
+                    :goto_cam="new Vector3(1, 2, -1)" />
+                <label for="pillar_topper">Колпак столба</label>
+                <DropdownPicker type="topper" :cb="setPillarTopper" name="pillar_topper"
+                    :pattern="getTopper(pillar_topper)" :disabled="remove_pillar"
+                    :goto_target="new Vector3(fence_section * -0.5, lamelles_count * lamelle_height, 0)"
+                    :goto_cam="new Vector3(-1, 2, 1)" />
+            </div>
+        </div>
+        <div class="form-group">
+            <div class="form-row">
+                <div class="form-item form-item_range w-full">
+                    <label for="length">Длина ламельного блока, мм</label>
+                    <div>
+                        <input id="length" type="range" v-bind="parametric.length" v-model="form_state.length"
+                            :disabled="form_state.auto_length" :ref="form_refs.length" />
+                        <span>{{ form_state.length.toFixed(0) }}&nbsp;мм</span>
+                    </div>
+                </div>
+            </div>
+            <div class="form-row">
+                <div class="form-item form-item_range w-full">
+                    <label for="height">Высота забора, мм</label>
+                    <div>
+                        <input id="height" type="range" v-bind="parametric.height" v-model="form_state.height"
+                            :ref="form_refs.height" />
+                        <span>{{ form_state.height }}&nbsp;мм</span>
+                    </div>
+                </div>
+            </div>
+            <div class="form-row">
+                <div class="form-item form-item_total">
+                    <label for="total_length">Общая длина забора, м</label>
+                    <input type="number" id="total_length" v-bind="parametric.total_length" min=0 max="600"
+                        v-model="form_state.total_length" :ref="form_refs.total_length" />
+                </div>
+            </div>
+            <div class="form-row">
+                <div class="form-item form-item_checkbox">
+                    <Icon :name="`mdi:check-box-outline${!form_state.auto_length ? '-blank' : ''}`"
+                        @click="form_state.auto_length = !form_state.auto_length" />
+                    <input id="auto_length" type="checkbox" hidden v-model="form_state.auto_length" />
+                    <label for="auto_length">Автоматический подбор секции</label>
+                </div>
+                <p v-if="!form_state.auto_length" class="text-ioprim text-sm">
+                    Рекомендуем вам включить автоподбор длины секции
+                </p>
+                <div class="form-item form-item_checkbox">
+                    <Icon :name="`mdi:check-box-outline${!form_state.remove_pillar ? '-blank' : ''}`"
+                        @click="form_state.remove_pillar = !form_state.remove_pillar" />
+                    <input id="remove_pillar" type="checkbox" hidden v-model="form_state.remove_pillar" />
+                    <label for="remove_pillar">Без столбов</label>
+                </div>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <p v-if="form_state.total_length * 1000 < (parametric.length.min) || form_state.full_sections == 0"
+                class="text-ioprim text-sm">
+                Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
+                размер, чтобы продолжить.
+            </p>
+            <template v-else>
+                <div class="grid calc_table w-full">
+                    <div class="grid grid-cols-4 relative">
+                        <template v-for="item in calc_table">
+                            <div class="col-span-3 calc_table-maincell">
+                                {{ item.name }}
+                            </div>
+                            <div class="col-span-1 calc_table-maincell">{{ item.value }}</div>
+                        </template>
+                    </div>
+                    <button @click.prevent="toggleModal">Рассчитать</button>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/calcModels.vue b/components/calcModels.vue
deleted file mode 100644
index 5689f78..0000000
--- a/components/calcModels.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { FrontSide, RepeatWrapping } from 'three';
-import { TresCanvas, useTexture } from '@tresjs/core'
-import { OrbitControls, useGLTF } from '@tresjs/cientos'
-
-const fence_section = use_fence_section()
-const section_count = use_section_count()
-const extra_section = use_extra_section()
-const max_size = use_max_size()
-
-const controlsState = reactive({
-    distance: section_count.value,
-    minDistance: 7,
-    maxDistance: 20,
-    position: { x: 0, y: 0, z: 0 },
-    enablePan: false,
-    maxPolarAngle: (Math.PI / 2) - 0.2,
-})
-const cameraStat = reactive({
-    position: [-4, 2, 8],
-    aspect: 1920 / 600,
-    fov: 40,
-})
-
-const pointLight = ref()
-const loadAll = async () => {
-    const { scene: light } = await useGLTF('/models_light/zabor_so_svetom.glb')
-    pointLight.value = light.children[2]
-    pointLight.value.color = '#f0dea9'
-    pointLight.value.intensity = pointLight.value.intensity * 0.1
-    pointLight.value.shadow.camera.near = 50
-    pointLight.value.shadow.bias = -0.002
-    const j = 4
-    pointLight.value.shadow.mapSize.x = 512 * j
-    pointLight.value.shadow.mapSize.y = 512 * j
-
-    const k = 3
-    pointLight.value.position.x = pointLight.value.position.x * k
-    pointLight.value.position.y = pointLight.value.position.y * k
-    pointLight.value.position.z = pointLight.value.position.z * k
-}
-const camera = ref("camera")
-
-onMounted(() => {
-    cameraStat.aspect = window.innerWidth / (window.innerHeight * 0.5)
-    loadAll()
-})
-watch([section_count, extra_section], () => {
-    let v = (section_count.value + ~~(!!extra_section.value)) * 2
-    if (v < controlsState.minDistance) v = controlsState.minDistance;
-    if (v > controlsState.maxDistance) v = controlsState.maxDistance;
-    (camera.value as any).position.normalize().multiplyScalar(v)
-})
-</script>
-<template>
-    <div class="container min-w-full siteblock_calc-canvas">
-        <ClientOnly fallback-tag="div">
-            <template #fallback>
-                <div class="fallback">
-                    Загрузка 3D модели
-                </div>
-            </template>
-            <Loader />
-            <TresCanvas>
-                <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
-                <OrbitControls v-bind="controlsState" make-default />
-                <TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1" :position-y="-3">
-                    <Suspense>
-                        <ModelParametric />
-                    </Suspense>
-                </TresGroup>
-                <TresMesh receive-shadow :position-y="-3.65" name="ground">
-                    <TresCircleGeometry :args="[50, 32]" :rotate-x="-Math.PI * 0.5" />
-                    <TresShadowMaterial :opacity="0.2" />
-                </TresMesh>
-
-                <template v-if="pointLight">
-                    <TresPointLight v-bind="pointLight" cast-shadow />
-                </template>
-            </TresCanvas>
-        </ClientOnly>
-    </div>
-</template>
\ No newline at end of file
diff --git a/components/calcValues.vue b/components/calcValues.vue
deleted file mode 100644
index 65c4c5b..0000000
--- a/components/calcValues.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script setup lang="ts">
-import { getColorNameFromRal } from '@/components/ral'
-import type { ralTypes } from '@/components/ral'
-
-import { predefLamelleColors, predefPillarColors } from '~/composables/useCalc';
-
-const lamelle_height = use_lamelle_height()
-const lamelles_count = use_lamelles_count()
-const fence_section = use_fence_section()
-const remove_pillar = use_remove_pillar()
-const pillar_color = use_pillar_color()
-const lamelle_color = use_lamelle_color()
-const section_count = use_section_count()
-const extra_section = use_extra_section()
-const total_length = use_total_length()
-const min_length = use_min_length()
-
-if (!pillar_color.value) {
-    const r = Math.floor(Math.random() * predefPillarColors.length)
-    pillar_color.value = predefPillarColors[r] as ralTypes
-    lamelle_color.value = predefLamelleColors[r] as ralTypes
-}
-
-const parametric = reactive({
-    length: {
-        min: min_length.value,
-        max: 2470,
-        step: 1,
-    },
-    total_length: {
-        min: min_length.value * 0.001,
-        max: undefined,
-        step: 0.5,
-    },
-    height: {
-        min: 20 + lamelle_height.value * 1000 * 5,
-        max: 20 + lamelle_height.value * 1000 * 20,
-        step: lamelle_height.value * 1000,
-    }
-})
-const form_state = reactive({
-    length: fence_section.value * 1000,
-    fence_length: 104,
-    height: 100 + lamelles_count.value * parametric.height.step,
-    total_length: total_length.value,
-    total_length_mm: fence_section.value * 1000,
-    full_sections: section_count.value,
-    extra_section: 0,
-    auto_length: true,
-    remove_pillar: false
-})
-let copy_form_state = Object.assign({}, form_state)
-const form_refs = {
-    length: ref(),
-    height: ref(),
-    total_length: ref(),
-}
-
-const changeParametres = () => {
-    // console.log('form', form_state.total_length * 1000, 'copy', copy_form_state.total_length * 1000)
-
-    const lamelles = Math.floor(form_state.height / parametric.height.step)
-
-    for (const key in form_state) {
-        if (parametric.hasOwnProperty(key)) {
-            const key_p = key as keyof typeof parametric
-            const key_s = key as keyof typeof form_state
-            if (parametric[key_p].max) {
-                if ((form_state[key_s] as number) > parametric[key_p].max) {
-                    (form_state[key_s] as number) = parametric[key_p].max
-                }
-            }
-        }
-    }
-
-    form_state.total_length_mm = form_state.total_length * 1000
-
-    let { fence_length, total_length_mm, auto_length, length, full_sections } = form_state
-    length = parseFloat(length.toString())
-    if (total_length_mm < parametric.length.min) total_length_mm = parametric.length.min
-
-    if (auto_length) {
-        let w = parametric.length.min
-        const max_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.min + fence_length))
-        const min_sections = Math.floor((total_length_mm - fence_length) / (parametric.length.max + fence_length)) || 1
-
-        for (let index = min_sections; index <= max_sections; index++) {
-            full_sections = index
-            w = (total_length_mm - fence_length - fence_length * index) / index
-            if (
-                w >= parametric.length.min
-                && w <= parametric.length.max
-                && w * index <= total_length_mm
-            ) {
-                break
-            }
-        }
-        length = w
-    } else {
-        full_sections = Math.floor((total_length_mm - fence_length) / (length + fence_length))
-        if (full_sections == 0) {
-            length = total_length_mm - fence_length - fence_length
-        }
-    }
-    const calc_full_section = () => (full_sections * length) + (full_sections * fence_length) + fence_length
-    let total_length_calc = calc_full_section()
-    if (Math.round(total_length_mm - total_length_calc) > 0 && Math.round(total_length_mm - total_length_calc) <= fence_length) {
-        full_sections -= 1
-        total_length_calc = calc_full_section()
-    }
-    if (Math.round(total_length_mm - total_length_calc) > 0) {
-        form_state.extra_section = total_length_mm - total_length_calc - fence_length
-    } else {
-        form_state.extra_section = 0
-    }
-
-    form_state.full_sections = full_sections
-    form_state.length = typeof length == 'string' ? parseFloat(length) : length
-    form_state.fence_length = typeof fence_length == 'string' ? parseFloat(fence_length) : fence_length
-
-    copy_form_state = Object.assign({}, form_state)
-
-    total_length.value = form_state.total_length
-    lamelles_count.value = lamelles
-    fence_section.value = form_state.length * 0.001
-    section_count.value = form_state.full_sections
-    extra_section.value = form_state.extra_section
-    remove_pillar.value = form_state.remove_pillar
-
-    goal('calc_fence', form_state)
-}
-
-const setLamelleColor = (color: ralTypes) => {
-    lamelle_color.value = color
-}
-const setPillarColor = (color: ralTypes) => {
-    pillar_color.value = color
-}
-watch(() => form_state, changeParametres, { deep: true })
-
-const isModalOpen = useState('modal_open', () => false)
-const toggleModal = () => {
-    isModalOpen.value = !isModalOpen.value
-}
-const goal = (target: string, params: object) => {
-    const nuxtApp = useNuxtApp()
-    if (nuxtApp.$metrika) {
-        (nuxtApp.$metrika as any).reachGoal(target, params || {})
-    }
-}
-</script>
-<template>
-    <div class="container relative py-4">
-        <form class="form">
-            <div class="col-span-12 sm:col-span-6">
-                <div class="form-row">
-                    <div class="form-item w-full">
-                        <label for="length">Длина ламельного блока, мм</label>
-                        <input disabled :value.input="`${form_state.length.toFixed(0)} мм`" class="w-28" />
-                        <input id="length" type="range" class="xl:w-full" v-bind="parametric.length"
-                            v-model="form_state.length" :disabled="form_state.auto_length" :ref="form_refs.length" />
-                    </div>
-                    <div class="form-item w-full">
-                        <label for="height">Высота забора, мм</label>
-                        <input disabled :value="`${form_state.height} мм`" class="w-28" />
-                        <input id="height" type="range" class="xl:w-full" v-bind="parametric.height"
-                            v-model="form_state.height" :ref="form_refs.height" />
-                    </div>
-                </div>
-            </div>
-            <div class="col-span-12 sm:col-span-6">
-                <div class="form-row">
-                    <div class="form-item">
-                        <label for="lamelle_color">Цвет ламелей</label>
-                        <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" class="w-60"
-                            disabled />
-                        <ColorPicker :cb="setLamelleColor" />
-                    </div>
-                    <div class="form-item">
-                        <label for="pillar_color">Цвет столба</label>
-                        <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" class="w-60"
-                            disabled />
-                        <ColorPicker :cb="setPillarColor" />
-                    </div>
-                </div>
-            </div>
-            <div class="col-span-12">
-                <div class="form-row">
-                    <div class="form-item">
-                        <label for="total_length">Общая длина забора, м</label>
-                        <input type="number" id="total_length" v-bind="parametric.total_length" min=0
-                            v-model="form_state.total_length" :ref="form_refs.total_length" />
-                    </div>
-                    <div class="form-item xl:w-2/4 text-sm xl:text-base">
-                        <p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
-                            Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
-                            размер, чтобы продолжить.
-                        </p>
-                        <p v-if="form_state.extra_section" class="text-ioprim">
-                            Внимание! Дополнительная секция приводит к увеличению стоимости.
-                            Рекомендуем вам изменить длину забора или длину секции!
-                        </p>
-                    </div>
-                </div>
-                <div class="form-row min-h-12 mt-2 xl:mt-0">
-                    <div class="form-item form-item_checkbox">
-                        <input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
-                        <label for="auto_length">Автоматический подбор секции</label>
-                    </div>
-                    <div class="form-item form-item_checkbox">
-                        <input id="remove_pillar" type="checkbox" v-model="form_state.remove_pillar" />
-                        <label for="remove_pillar">Без столбов</label>
-                    </div>
-                </div>
-            </div>
-            <template v-if="(form_state.total_length * 1000) >= parametric.length.min">
-                <div class="col-span-12 xl:col-span-8 xl:col-start-3 grid calc_table">
-                    <div class="grid grid-cols-6">
-                        <div class="col-span-4 calc_table-maincell">Секции</div>
-                        <div class="col-span-2 calc_table-maincell">{{ section_count }}</div>
-                        <div class="col-span-6 sm:col-span-4">
-                            Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
-                        </div>
-                        <div class="col-span-3 sm:col-span-1">{{ section_count * lamelles_count }}</div>
-                        <div class="col-span-3 sm:col-span-1">
-                            {{ `${parseFloat(form_state.length.toString()).toFixed(2)}\xa0мм` }}</div>
-                        <template v-if="!form_state.remove_pillar">
-                            <div class="col-span-6 sm:col-span-4">Столбы, RAL {{ pillar_color }}, {{
-                                getColorNameFromRal(pillar_color)?.toLowerCase() }}</div>
-                            <div class="col-span-3 sm:col-span-1">
-                                {{ section_count + ~~(!!form_state.extra_section) + 1 }}
-                            </div>
-                            <div class="col-span-3 sm:col-span-1">
-                                {{ `${parseFloat(form_state.fence_length.toString()).toFixed(2)}\xa0мм` }}
-                            </div>
-                        </template>
-                        <template v-if="form_state.extra_section">
-                            <div class="col-span-4 calc_table-maincell">Дополнительная секция</div>
-                            <div class="col-span-2 calc_table-maincell">1</div>
-                            <div class="col-span-6 sm:col-span-4">
-                                Ламели, RAL {{ lamelle_color }}, {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }}
-                            </div>
-                            <div class="col-span-3 sm:col-span-1">
-                                {{ 1 * lamelles_count }}</div>
-                            <div class="col-span-3 sm:col-span-1">{{
-                                `${parseFloat(form_state.extra_section.toString()).toFixed(2)}\xa0мм` }}</div>
-                        </template>
-                    </div>
-                </div>
-                <div class="col-span-12 text-center mb-4">
-                    <button @click.prevent="toggleModal">Рассчитать</button>
-                </div>
-            </template>
-        </form>
-    </div>
-</template>
\ No newline at end of file
diff --git a/components/colorPicker.vue b/components/colorPicker.vue
deleted file mode 100644
index 5c084f4..0000000
--- a/components/colorPicker.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { ralClassicPallette, getColorHexFromRal } from '@/components/ral'
-
-const props = defineProps(['color', 'cb', 'open', 'active'])
-const open = props.open ?? true
-
-const onClick = (color: string) => {
-    if (props.cb) {
-        props.cb(color)
-    }
-    toggleOpen()
-}
-const isOpenPicker = ref<boolean>(false)
-const toggleOpen = (value: boolean = !isOpenPicker) => {
-    isOpenPicker.value = value !== undefined ? value : !isOpenPicker.value
-}
-const picker = ref()
-const clickOutside = (e: Event) => {
-    if (!picker.value.contains(e.target)) {
-        toggleOpen(false)
-    }
-}
-onMounted(() => {
-    document.addEventListener('click', clickOutside)
-})
-onUnmounted(() => {
-    document.removeEventListener('click', clickOutside)
-})
-</script>
-<template>
-    <div>
-        <div class="color_picker" ref="picker">
-            <div class="color_picker-selected" @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)"
-                :style="[props.color && { backgroundColor: getColorHexFromRal(props.color) ?? '' }]"
-                :class="[{ 'color_picker-selected__active': active }]"></div>
-            <div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker">
-                <template v-for="col in ralClassicPallette">
-                    <div class="color size-5" :class="[{ 'outline outline-primary': props.color == col.hex }]"
-                        :style="[{ backgroundColor: col.hex }]" @click="onClick(col.code)">
-                    </div>
-                </template>
-            </div>
-        </div>
-    </div>
-</template>
-<style scoped>
-.color_picker-selected:not([style*=color]) {
-    background-image: conic-gradient(from 50deg, orange, yellow, green, cyan, blue, violet)
-}
-</style>
\ No newline at end of file
diff --git a/components/dropdown/color.vue b/components/dropdown/color.vue
new file mode 100644
index 0000000..1055670
--- /dev/null
+++ b/components/dropdown/color.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ralClassicPallette } from '@/components/ral'
+
+const props = defineProps([ 'cb'])
+
+</script>
+<template>
+    <template v-for="col in ralClassicPallette">
+        <div class="picker-item" 
+            :style="[{ backgroundColor: col.hex }]" @click="props.cb(col.code)">
+        </div>
+    </template>
+</template>
\ No newline at end of file
diff --git a/components/dropdown/list.vue b/components/dropdown/list.vue
new file mode 100644
index 0000000..2aa0af9
--- /dev/null
+++ b/components/dropdown/list.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { getFilename as getPattern, patterns } from '../pattern';
+import { getFilename as getTopper, toppers } from '../topper';
+
+const props = defineProps(['cb', 'patterns']);
+type pType = {
+    list: typeof patterns | typeof toppers,
+    func: any
+}
+const p = {
+    list: [],
+    func: () => { }
+} as pType
+
+if (props.patterns == 'pattern') {
+    p.list = patterns;
+    p.func = getPattern
+} else if (props.patterns == 'topper') {
+    p.list = toppers
+    p.func = getTopper
+}
+</script>
+<template>
+    <template v-for="item in p.list">
+        <NuxtImg :src="p.func(item.id)" class="picker-item" @click="props.cb(item.id)" v-if="item.filename" />
+        <span class="picker-item picker-item--empty" @click="props.cb(item.id)" v-else />
+    </template>
+</template>
\ No newline at end of file
diff --git a/components/dropdown/picker.vue b/components/dropdown/picker.vue
new file mode 100644
index 0000000..4e0a8a6
--- /dev/null
+++ b/components/dropdown/picker.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { getFilename } from '../pattern';
+import { getColorHexFromRal, getColorNameFromRal } from '../ral';
+
+const props = defineProps(['cb', 'name', 'color', 'pattern', 'type', 'disabled', 'goto_cam', 'goto_target'])
+
+const goto_cam = use_goto_camera()
+const goto_target = use_goto_target()
+const open_calc = use_open_calc()
+
+const picker = ref()
+const is_open = ref<boolean>(open_calc.value.includes(props.name))
+
+const toggleOpen = (value: boolean = !is_open) => {
+    is_open.value = value
+    if (value == true) open_calc.value = [props.name]
+    else if (value == false && open_calc.value.includes(props.name)) open_calc.value = []
+
+    if (value == true && props.goto_cam) goto_cam.value = props.goto_cam
+    if (value == true && props.goto_target) goto_target.value = props.goto_target
+}
+
+const onClick = (color: string) => {
+    if (props.cb) {
+        props.cb(color)
+    }
+}
+
+watch(open_calc, () => {
+    if (open_calc.value.includes(props.name) && is_open.value !== true) {
+        is_open.value = true
+    } else if (!open_calc.value.includes(props.name) && is_open.value !== false) {
+        is_open.value = false
+    }
+})
+</script>
+<template>
+    <div class="picker" :class="[{
+        'picker_open': is_open,
+        'picker_disabled': props.disabled,
+    }]" ref="picker">
+        <div class="picker-input">
+            <template v-if="props.type == 'color'">
+                <div @click="toggleOpen(!is_open)"
+                    :style="[{ color: contrastColor(props.color), backgroundColor: getColorHexFromRal(props.color) ?? 'transparent' }]">
+                    <span>
+                        {{ getColorNameFromRal(props.color) }}
+                    </span>
+                    <Icon class="picker-button" :name="is_open ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
+                </div>
+            </template>
+            <template v-else>
+                <div @click="toggleOpen(!is_open)" :style="getFilename(props.pattern) ? [{
+                    backgroundImage: `url(${getFilename(props.pattern)})`,
+                    backgroundSize: 'contain',
+                    color: 'transparent'
+                }] : []">
+                    <span>
+                        {{ props.pattern }}
+                    </span>
+                    <Icon class="picker-button" :name="is_open ? 'mdi:chevron-up' : 'mdi:chevron-down'" />
+                </div>
+            </template>
+        </div>
+    </div>
+    <div class="picker-changer" :class="[{ 'picker-changer_open': is_open }]">
+        <template v-if="props.type == 'color'">
+            <DropdownColor :cb="onClick" />
+        </template>
+        <template v-else>
+            <DropdownList :cb="onClick" :patterns="props.type" />
+        </template>
+    </div>
+</template>
+<style scoped>
+.color_picker-selected:not([style*=color]) {
+    background-image: conic-gradient(from 50deg, orange, yellow, green, cyan, blue, violet)
+}
+</style>
\ No newline at end of file
diff --git a/components/expDiagram.vue b/components/expDiagram.vue
index 66193a8..358cf2a 100644
--- a/components/expDiagram.vue
+++ b/components/expDiagram.vue
@@ -18,23 +18,16 @@ const toggleExpState = () => {
     explosion_state.value = !explosion_state.value
 }
 const back_light = ref()
-const key_light = ref()
 const secondary_light = ref()
 const loadAll = async () => {
     const { scene: back } = await useGLTF('/models_light/back_exp.glb')
-    const { scene: key } = await useGLTF('/models_light/key_exp.glb')
     const { scene: secondary } = await useGLTF('/models_light/secondary_exp.glb')
 
-    const k = 0.001
+    const k = 0.03
 
     back_light.value = back.children[0]
     back_light.value.intensity = back_light.value.intensity * k
-    back_light.value.shadow.bias = -0.01
-
-    key_light.value = key.children[0]
-    key_light.value.intensity = key_light.value.intensity * k
-    key_light.value.shadow.bias = -0.01
-    key_light.value.cast_shadow = true
+    back_light.value.shadow.bias = -0.02
 
     secondary_light.value = secondary.children[0]
     secondary_light.value.intensity = secondary_light.value.intensity * k
@@ -63,17 +56,10 @@ onMounted(() => {
             <TresCanvas height="600">
                 <TresPerspectiveCamera :position="[-7, 2, 4]" ref="camera" />
                 <OrbitControls v-bind="controlsState" ref="controls" make-default />
+                <ModelEnv />
                 <Suspense>
                     <ModelDiagram />
                 </Suspense>
-
-                <TresPointLight v-bind="back_light" v-if="back_light"
-                    :position="[back_light.position.x, back_light.position.y, back_light.position.z]" />
-                <TresPointLight v-bind="key_light" v-if="key_light"
-                    :position="[key_light.position.x, key_light.position.y, key_light.position.z]" />
-                <TresPointLight v-bind="secondary_light" v-if="secondary_light"
-                    :position="[secondary_light.position.x, secondary_light.position.y, secondary_light.position.z]" />
-                <!-- <TresAmbientLight :intensity="2" /> -->
             </TresCanvas>
         </ClientOnly>
         <div class="canvas-icons">
diff --git a/components/modal.vue b/components/modal.vue
index 08957fa..38478a3 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -2,6 +2,8 @@
 import { getColorNameFromRal } from '@/components/ral'
 import type { ralTypes } from '@/components/ral'
 import { apiFetch } from '~/utils/apiFetch';
+import { getName as getPatternName } from './pattern';
+import { getName as getTopperName } from './topper';
 
 const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
@@ -17,6 +19,8 @@ const section_count = useState('section_count')
 const extra_section = useState('extra_section')
 const total_length = useState('total_length')
 const remove_pillar = useState<boolean>('remove_pillar')
+const pillar_topper = use_topper()
+const pillar_pattern = use_pattern()
 
 const toggleModal = () => {
     modal_data.email = undefined
@@ -143,6 +147,8 @@ const total_txt = computed(() => {
         lam_quad_regular: discountValue * lamelles_block * lam_count * lamelle_height.value * length_m,
         lam_quad_extra: discountValue * lamelles_block * lam_count * lamelle_height.value * extra_m,
     }
+    const isPattern = pillar_pattern.value !== 0;
+    const isTopper = pillar_topper.value !== 0;
     // console.log(prices)
     const extra = extra_section.value ? {
         pillar: !remove_pillar.value && {
@@ -164,6 +170,24 @@ const total_txt = computed(() => {
             value: prices.lam_quad_regular * sections
         },
     };
+    const decor = {} as { [key: string]: { txt: string, value?: string } }
+    if (
+        !remove_pillar.value
+        && (
+            pillar_pattern.value !== 0
+            || pillar_topper.value !== 0
+        )
+    ) {
+        const els = [];
+        if (isPattern) els.push('нанесения узоров на опорные столбы')
+        if (isTopper) els.push('индивидуального дизайна колпаков')
+        const txt = `Стоимость ${els.join(' и ')} рассчитывается отдельно.`
+        decor.el = {
+            txt: txt,
+        }
+        if (isPattern) decor.pattern = { txt: 'Узор опорного столба', value: getPatternName(pillar_pattern.value) }
+        if (isTopper) decor.topper = { txt: 'Колпак', value: getTopperName(pillar_topper.value) }
+    }
 
     const total = [extra, regular].map(item => Object.values(item).map(el => el ? el.value : 0)).flat().reduce((a, b) => a + b, 0)
 
@@ -173,11 +197,18 @@ const total_txt = computed(() => {
     const res_extra = extra_section.value ? Object.values(extra).map(item =>
         Object.entries(item).map(el => el[0] == 'value' ? roubleSign.format(el[1] as number) : el[1]).join(': ')
     ).filter(Boolean) : []
+    const res_decor = Object.values(decor).map(item =>
+        Object.entries(item).map(el => el[1]).join(': ')
+    ).filter(Boolean)
 
-    const res_total = [`Итого ${roubleSign.format(total)}`]
+    const total_str = []
+    if (isPattern) total_str.push('узора')
+    if (isTopper) total_str.push('колпаков')
+    const res_total = [`Итого${total_str.length ? ' без ' + total_str.join(' и ') : ''}: ${roubleSign.format(total)}`]
     return {
         regular: res_regular,
         extra: res_extra,
+        decor: res_decor,
         total: res_total
     }
 })
@@ -243,8 +274,8 @@ const policy = () => {
                         Цвет столба: {{ getColorNameFromRal(pillar_color) }}<br />
                         Цвет ламелей: {{ getColorNameFromRal(lamelle_color) }}
                     </p>
-                    <template v-for="item in total_txt">
-                        <p v-if="item.length">
+                    <template v-for="(item, i) in total_txt">
+                        <p v-if="item.length" :class="[{ 'text-ioprim': i == 'decor' }]">
                             <template v-for="i in item">{{ i }}<br /></template>
                         </p>
                     </template>
diff --git a/components/model/diagram.vue b/components/model/diagram.vue
index b22a3e8..3844897 100644
--- a/components/model/diagram.vue
+++ b/components/model/diagram.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+//@ts-ignore
 import { useGLTF } from '@tresjs/cientos'
 import { getColorHexFromRal } from '../ral';
 
@@ -14,12 +15,12 @@ const targetExplosion = {
     verh: [0 * k, 0.25 * k, 0 * k],
 }
 
-const { scene: kosynka } = await useGLTF('/models/kosynka.glb')
-const { scene: krepleniye_planok } = await useGLTF('/models/krepleniye_planok.glb')
-const { scene: osnova_stolba } = await useGLTF('/models/osnova_stolba.glb')
-const { scene: planki } = await useGLTF('/models/planki.glb')
-const { scene: stolb } = await useGLTF('/models/stolb.glb')
-const { scene: verh } = await useGLTF('/models/verh.glb')
+const { scene: kosynka } = await useGLTF('/models_exp/kosynka.glb')
+const { scene: krepleniye_planok } = await useGLTF('/models_exp/krepleniye_planok.glb')
+const { scene: osnova_stolba } = await useGLTF('/models_exp/osnova_stolba.glb')
+const { scene: planki } = await useGLTF('/models_exp/planki.glb')
+const { scene: stolb } = await useGLTF('/models_exp/stolb.glb')
+const { scene: verh } = await useGLTF('/models_exp/verh.glb')
 
 const lamelle_color = use_lamelle_color()
 const pillar_color = use_pillar_color()
diff --git a/components/model/env.vue b/components/model/env.vue
new file mode 100644
index 0000000..521b3af
--- /dev/null
+++ b/components/model/env.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import {
+    PCFSoftShadowMap,
+    CineonToneMapping,
+    PMREMGenerator,
+    Vector3,
+} from 'three';
+import { GainMapLoader, } from '@monogrid/gainmap-js'
+import { useLoop } from '@tresjs/core';
+const { scene, renderer, camera } = useTresContext()
+const {onBeforeRender} = useLoop()
+
+renderer.value.toneMapping = CineonToneMapping
+renderer.value.toneMappingExposure = 1
+
+renderer.value.shadowMap.enabled = true
+renderer.value.shadowMap.type = PCFSoftShadowMap
+
+const pmremGenerator = new PMREMGenerator(renderer.value);
+pmremGenerator.compileEquirectangularShader();
+onMounted(async () => {
+    const loader = new GainMapLoader(renderer.value)
+    const result = await loader.loadAsync([
+        'hdrmaps/hdr.webp',
+        'hdrmaps/hdr-gainmap.webp',
+        'hdrmaps/hdr.json',
+    ])
+    if (renderer.value && camera.value) {
+        renderer.value.render(scene.value, camera.value)
+    }
+    const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
+    const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
+
+    scene.value.environment = newEnvMap
+    scene.value.environmentIntensity = 1
+    scene.value.environmentRotation.z = 0.25
+    result.renderTarget.texture.dispose();
+})
+onBeforeRender(()=>{
+    if(camera.value) {
+        const cameraDirection = new Vector3()
+        camera.value.getWorldDirection(cameraDirection);
+        const angle = Math.atan2(cameraDirection.z, cameraDirection.x);
+        scene.value.environmentRotation.z = angle + 0.25
+    }
+})
+</script>
+<template></template>
\ No newline at end of file
diff --git a/components/model/fence.vue b/components/model/fence.vue
index 222c2fd..9e9543b 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { BufferGeometry, Matrix4, Vector3 } from 'three';
+import { BufferGeometry, Matrix4, Mesh, Object3D, Vector3 } from 'three';
+import { getColorHexFromRal } from '../ral';
 
-const props = defineProps(['index', 'models'])
+const props = defineProps(['index', 'models', 'last_element', 'first_element'])
 
 const lamelle_height = use_lamelle_height()
 const lamelles_count = use_lamelles_count()
@@ -9,33 +10,39 @@ const fence_section = use_fence_section()
 const section_count = use_section_count()
 const extra_section = use_extra_section()
 const remove_pillar = use_remove_pillar()
-const max_size = use_max_size()
+
+const pillar_color = use_pillar_color()
+const pillar_pattern = use_pattern()
+const pillar_topper = use_topper()
+const lamelle_color = use_lamelle_color()
 
 const lSize = lamelle_height.value
-const bSize = 0.0235
 const pillar_size = 104 * 0.001
 
-const pillar_one_pos = ref(fence_section.value * -0.5 - 0.015)
-const pillar_two_pos = ref(fence_section.value * 0.5 + pillar_size + bSize - 0.01)
+const pillar_one_pos = ref()
+const pillar_two_pos = ref()
 
-const scale_koef = 2.5
-const show_pillar_one = ref(props.index == 1)
+const scale_koef = 1
+const show_pillar_one = ref(props.first_element)
 const show_pillar_two = ref(true)
 
-const last_element = ref(Math.min((section_count.value + ~~(!!extra_section.value)), max_size.value))
-watch([section_count, fence_section, extra_section], () => {
-    last_element.value = Math.min(section_count.value + ~~(!!extra_section.value), max_size.value)
-})
-
-const getExtraValue = () => (extra_section.value && props.index == last_element.value) ? extra_section.value * 0.001 : false
-const extra = ref(getExtraValue())
-if (extra.value) {
-    pillar_one_pos.value = (extra.value as number) * -0.5 - 0.015
-    pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize - 0.01
+const setPillarValues = () => {
+    extra.value = getExtraValue()
+    if (extra_section.value && props.last_element && !props.first_element) {
+        pillar_one_pos.value = (extra.value as number) * -0.5
+        pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size
+    } else {
+        pillar_one_pos.value = fence_section.value * -0.5
+        pillar_two_pos.value = fence_section.value * 0.5 + pillar_size
+    }
 }
 
+const getExtraValue = () => (extra_section.value && props.last_element && !props.first_element) ? extra_section.value * 0.001 : false
+const extra = ref(getExtraValue())
+setPillarValues()
+
 const make_translate_to_section = (source = fence_section.value) => {
-    const one_s = (source + pillar_size + bSize) * scale_koef
+    const one_s = (source + (remove_pillar.value ? 0 : pillar_size)) * scale_koef
     let r = (props.index - 1) * one_s
     if (typeof extra.value == 'number') {
         r -= (fence_section.value - extra.value) * scale_koef * 0.5
@@ -47,84 +54,222 @@ watch([fence_section, extra], () => {
     translate_to_section.value = make_translate_to_section()
 })
 
+set_material({ children: [props.models.pillar_brace, props.models.fixing] }, '#111');
+
 const instanced_lamelle = shallowRef();
-const instanced_lamelle_geometry = Object.assign(new BufferGeometry, props.models.lamelle.children[0].geometry)
-const instanced_lamelle_material = props.models.lamelle.children[0].material
 const instanced_lamelle_count = 24
-const instanced_v = [instanced_lamelle_geometry, instanced_lamelle_material, instanced_lamelle_count]
-watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra], () => {
-    // console.log(props.index, instanced_v, instanced_lamelle.value)
+const instanced_lamelle_el = [
+    Object.assign(new BufferGeometry, props.models.lamelle.children[0].geometry),
+    props.models.lamelle.children[0].material,
+    instanced_lamelle_count
+]
+
+const instanced_fixing_one = shallowRef();
+const instanced_fixing_one_el = [
+    Object.assign(new BufferGeometry, props.models.fixing.children[0].geometry),
+    props.models.fixing.children[0].material,
+    instanced_lamelle_count
+]
+
+const instanced_fixing_two = shallowRef();
+const instanced_fixing_two_el = [
+    Object.assign(new BufferGeometry, props.models.fixing.children[0].geometry),
+    props.models.fixing.children[0].material,
+    instanced_lamelle_count
+]
+const lamelleMatrix = (i: number) => {
+    const scale_x = (((extra.value as number) || fence_section.value) * 9.9)
+    const pos_x = pillar_size * 0.5
+    const pos_y = (lSize * i)
+    const pos_z = 0.022 * scale_koef
+    return new Matrix4().fromArray([
+        scale_x, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        pos_x, pos_y, pos_z, 1
+    ])
+}
+const fixingOneMatrix = (i: number) => {
+    const pos_x = pillar_one_pos.value + pillar_size * 0.66
+    const pos_y = (lSize * i) + 0.01 * scale_koef;
+    const pos_z = 0.022 * scale_koef
+    return new Matrix4().fromArray([
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        pos_x, pos_y, pos_z, 1
+    ])
+}
+const fixingTwoMatrix = (i: number) => {
+    const pos_x = pillar_two_pos.value - pillar_size * 0.66
+    const pos_y = (lSize * i) + 0.01 * scale_koef;
+    const pos_z = 0.022 * scale_koef
+    return new Matrix4().fromArray([
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        pos_x, pos_y, pos_z, 1
+    ])
+}
+
+watch([section_count, fence_section, extra_section], setPillarValues)
+
+const brace = props.models.pillar_brace.clone().children[0]
+const braces = ref<Mesh[]>([])
+const setBraceCount = () => {
+    const brace_count = Math.floor(lamelles_count.value / 4)
+    const arr: Mesh[] = []
+    for (let index = 0; index < brace_count; index++) {
+        const brace_item = brace.clone()
+        brace_item.position.setComponent(1, lamelle_height.value * 4 * (index + 0.75))
+        arr.push(brace_item)
+    }
+    braces.value = arr
+}
+
+setBraceCount()
+watch(lamelles_count, setBraceCount)
+
+const pillar = ref<Mesh[]>([])
+const setPillar = () => {
+    const top = props.models.pillar_top.children[0];
+    top.position.setComponent(1, lSize * lamelles_count.value + lamelles_count.value * 0.0001 * scale_koef);
+
+    const pillar_outer = props.models.pillar_center.children[0];
+    pillar_outer.scale.setComponent(1, lamelles_count.value);
+
+    const pillar_inner = props.models.pillar_inner.children[0];
+    pillar_inner.scale.setComponent(1, lamelles_count.value);
+
+    const bottom = props.models.pillar_bottom.children[0];
+    bottom.position.setComponent(1, lSize * -0.5);
+
+    let arr = [top, pillar_outer, pillar_inner, bottom]
+    arr.map(el => {
+        set_material({ children: [el] }, getColorHexFromRal(pillar_color.value), undefined, true)
+    })
+    set_material(
+        { children: [arr[2]] },
+        getColorHexFromRal(pillar_color.value),
+        { pattern: pillar_pattern.value, count: lamelles_count.value },
+        true
+    )
+    pillar.value = arr.map(el => el.clone())
+}
+setPillar()
+watch([pillar_pattern, pillar_color, pillar_topper, fence_section, lamelles_count], setPillar)
+
+const fastening = ref<Object3D[]>([])
+const setFastening = () => {
+    const top_one = props.models.fixing.clone().children[0];
+    top_one.position.set(
+        pillar_one_pos.value + pillar_size * 0.66,
+        lamelles_count.value * lSize - 0.015 * scale_koef,
+        0.025 * scale_koef
+    )
+
+    const top_two = props.models.fixing.clone().children[0];
+    top_two.position.set(
+        pillar_two_pos.value - pillar_size * 0.66,
+        lamelles_count.value * lSize - 0.01 * scale_koef,
+        0.025 * scale_koef
+    )
+
+    const v = ((extra.value as number) || fence_section.value) * 10
+    const top = props.models.fastening_top.clone().children[0];
+    top.position.set(
+        pillar_size * 0.5,
+        lamelles_count.value * lSize - 0.0275 * scale_koef,
+        0
+    );
+    top.scale.setComponent(0, v);
+
+    const side_one = props.models.fastening_side.clone().children[0];
+    side_one.name = 'side_one'
+    side_one.position.set(pillar_one_pos.value, 0, 0.002 * scale_koef);
+    side_one.scale.set(1, lamelles_count.value, 1)
+
+    const side_two = props.models.fastening_side.clone().children[0];
+    side_two.name = 'side_two'
+    side_two.scale.set(-1, lamelles_count.value, -1)
+    side_two.position.set(pillar_two_pos.value, 0, -0.005 * scale_koef);
+
+    let arr = [top_one, top_two, top, side_one, side_two];
+    [top, side_one, side_two, ...braces.value].map(el => {
+        set_material({ children: [el] }, getColorHexFromRal(pillar_color.value))
+    })
+    fastening.value = arr.map(el => el.clone())
+}
+setFastening()
+watch([pillar_color, lamelles_count, pillar_one_pos, pillar_two_pos], setFastening)
+
+const setLamellesColor = () => {
+    if (instanced_lamelle.value) {
+        set_material({ children: [instanced_lamelle.value] }, getColorHexFromRal(lamelle_color.value))
+    }
+}
+setLamellesColor()
+watch([instanced_lamelle, lamelle_color], setLamellesColor)
+
+watch([
+    instanced_lamelle,
+    lamelles_count,
+    fence_section,
+], () => {
+    const translationVector = new Vector3(0, 20, 20)
     for (let i = 0; i < instanced_lamelle_count; i++) {
         if (instanced_lamelle.value) {
-            const scale_x = (((extra.value as number) || fence_section.value) * 10)
-            const pos_x = pillar_size * 0.5
-            const pos_y = (lSize * i)
-            const pos_z = 0.02
-            const newmatrix = new Matrix4().fromArray([
-                scale_x, 0, 0, 0,
-                0, 1, 0, 0,
-                0, 0, 1, 0,
-                pos_x, pos_y, pos_z, 1
-            ])
-            instanced_lamelle.value.setMatrixAt(i, newmatrix);
-
+            instanced_lamelle.value.setMatrixAt(i, lamelleMatrix(i));
             if (i >= lamelles_count.value) {
-                instanced_lamelle.value.setMatrixAt(i, new Matrix4().makeTranslation(new Vector3(0, 20, 20)));
+                instanced_lamelle.value.setMatrixAt(i, new Matrix4().makeTranslation(translationVector));
             }
+            instanced_lamelle.value.instanceMatrix.needsUpdate = true
+        }
+        if (instanced_fixing_one.value) {
+            instanced_fixing_one.value.setMatrixAt(i, fixingOneMatrix(i));
+            if (i >= lamelles_count.value) {
+                instanced_fixing_one.value.setMatrixAt(i, new Matrix4().makeTranslation(translationVector));
+            }
+            instanced_fixing_one.value.instanceMatrix.needsUpdate = true
+        }
+        if (instanced_fixing_two.value) {
+            instanced_fixing_two.value.setMatrixAt(i, fixingTwoMatrix(i));
+            if (i >= lamelles_count.value) {
+                instanced_fixing_two.value.setMatrixAt(i, new Matrix4().makeTranslation(translationVector));
+            }
+            instanced_fixing_two.value.instanceMatrix.needsUpdate = true
         }
-        instanced_lamelle.value.instanceMatrix.needsUpdate = true
     }
 });
-
-watch([section_count, fence_section, extra_section], () => {
-    extra.value = getExtraValue()
-    if (extra_section.value && props.index == last_element.value) {
-        pillar_one_pos.value = (extra.value as number) * -0.5 - 0.015
-        pillar_two_pos.value = (extra.value as number) * 0.5 + pillar_size + bSize - 0.01
-        // translate_to_section.value = make_translate_to_section(extra_section.value * 0.001)
-    } else {
-        pillar_one_pos.value = fence_section.value * -0.5 - 0.015
-        pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize - 0.01
-        // translate_to_section.value = make_translate_to_section()
-    }
-})
 </script>
 <template>
     <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`" :position-y="0">
-        <TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos"
-            :position-z="0">
-            <TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
-                <TresObject3D v-bind="props.models.fence.children[0]" />
-            </TresGroup>
-            <TresObject3D v-bind="props.models.fence.children[0]" :scale-y="lamelles_count" />
-            <TresGroup :position-y="(lSize * lamelles_count)" :scale="[1, 0.5, 1]">
-                <TresObject3D v-bind="props.models.fence.children[0]" />
-            </TresGroup>
+        <TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos">
+            <template v-for="item in pillar">
+                <TresMesh v-bind="item.clone()" />
+            </template>
+            <template v-for="item in braces">
+                <TresMesh v-bind="item.clone()" :name="`brace_one`" />
+            </template>
         </TresGroup>
 
-        <TresGroup name="pillar_two" v-if="!remove_pillar && show_pillar_two" :position-x="pillar_two_pos"
-            :position-z="0">
-            <TresGroup :position-y="(lSize * -0.5)" :scale="[-1, 0.5, 1]">
-                <TresObject3D v-bind="props.models.fence.children[0]" />
-            </TresGroup>
-            <TresObject3D v-bind="props.models.fence.children[0]" :scale="[-1, lamelles_count, 1]" />
-            <TresGroup :position-y="(lSize * lamelles_count)" :scale="[-1, 0.5, 1]">
-                <TresObject3D v-bind="props.models.fence.children[0]" />
-            </TresGroup>
+        <TresGroup name="pillar_two" v-if="!remove_pillar && show_pillar_two" :position-x="pillar_two_pos">
+            <template v-for="item in pillar">
+                <TresObject3D v-bind="item.clone()" />
+            </template>
+            <template v-for="item in braces">
+                <TresMesh v-bind="item.clone()" :name="`brace_two`" />
+            </template>
         </TresGroup>
 
         <TresGroup name="lamelles">
-            <TresInstancedMesh ref="instanced_lamelle" :args="instanced_v" cast-shadow />
-        </TresGroup>
-        <TresGroup name="lam_fastening_one" :position-x="pillar_one_pos" :scale-y="lamelles_count">
-            <TresObject3D v-bind="props.models.fastening.children[0]" />
-        </TresGroup>
-        <TresGroup name="lam_fastening_two" :position-x="pillar_two_pos" :scale="[-1, lamelles_count, 1]">
-            <TresObject3D v-bind="props.models.fastening.children[0]" />
-        </TresGroup>
-        <TresGroup name="top_section" :scale-x="((extra as number) || fence_section) * 10 + 0.1 * scale_koef"
-            :position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
-            <TresObject3D v-bind="props.models.top.children[0]" />
+            <TresInstancedMesh ref="instanced_lamelle" :args="instanced_lamelle_el" />
+            <TresInstancedMesh ref="instanced_fixing_one" :args="instanced_fixing_one_el" />
+            <TresInstancedMesh ref="instanced_fixing_two" :args="instanced_fixing_two_el" />
         </TresGroup>
+
+        <template v-for="item in fastening">
+            <TresObject3D v-bind="item.clone()" />
+        </template>
     </TresGroup>
 </template>
\ No newline at end of file
diff --git a/components/model/item.vue b/components/model/item.vue
index 22a215b..5409c0b 100644
--- a/components/model/item.vue
+++ b/components/model/item.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useGLTF, Text3D } from '@tresjs/cientos'
-import { DoubleSide, Object3D, Vector3 } from 'three';
+// @ts-ignore
+import { useGLTF } from '@tresjs/cientos'
+import { Vector3 } from 'three';
 const props = defineProps(['modelUrl', 'model', 'position', 'target', 'parent'])
 
 let scene: any
diff --git a/components/model/line.vue b/components/model/line.vue
new file mode 100644
index 0000000..800da0d
--- /dev/null
+++ b/components/model/line.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { useLoop, useTresContext } from '@tresjs/core';
+import { Box3, Object3D, Vector3 } from 'three';
+import { degToRad } from 'three/src/math/MathUtils.js';
+
+const props = defineProps(['number', 'count', 'models'])
+const rotate = () => {
+    switch (props.number) {
+        case 1:
+            return degToRad(0)
+        case 2:
+            return degToRad(180)
+        case 3:
+            return degToRad(270)
+        case 4:
+            return degToRad(90)
+    }
+}
+const { seekByName } = useSeek()
+const { scene, camera } = useTresContext()
+
+const section_count = use_section_count()
+const extra_section = use_extra_section()
+const fence_section = use_fence_section()
+const max_size = use_max_size()
+const lamelle_count = use_lamelles_count()
+const lamelle_height = use_lamelle_height()
+
+const total = ref((section_count.value + ~~(!!extra_section.value)))
+const position = ref(new Vector3())
+
+const count_pos = () => {
+    total.value = (section_count.value + ~~(!!extra_section.value))
+
+    const line = seekByName(scene.value, `line_${props.number}`)
+    const line_size = new Vector3()
+    const line_pos = new Vector3()
+
+    if (line && line.children.length) {
+        line.updateMatrixWorld()
+        new Box3().expandByObject(line).getSize(line_size)
+        line.getWorldPosition(line_pos)
+    }
+    const line1 = seekByName(scene.value, `line_1_inner`);
+    const line1_size = new Vector3()
+    const line1_pos = new Vector3()
+    if (line1) {
+        new Box3().expandByObject(line1).getSize(line1_size)
+        line1.getWorldPosition(line1_pos)
+    }
+    const k = (line1_size.x / props.count) * 0.5 - 0.065
+    switch (props.number) {
+        case 1: break;
+        case 2:
+            position.value.z = line1_size.x * -1
+            position.value.x = line1_size.x - k * 2
+            break;
+        case 3:
+            position.value.z = line1_size.x * -1 + k
+            position.value.x = -1 * k
+            break;
+        case 4:
+            position.value.z = -1 * k
+            position.value.x = line1_size.x - k
+            break;
+    }
+    line?.updateMatrixWorld()
+}
+
+onMounted(() => {
+    count_pos()
+})
+watch(() => [props.count, fence_section.value, section_count.value, extra_section.value, lamelle_count.value],
+    count_pos,
+    { flush: 'post' }
+)
+</script>
+<template>
+    <TresGroup :name="`line_${props.number}`" :rotate-y="rotate()" :position-x="position.x" :position-y="position.y"
+        :position-z="position.z">
+        <TresGroup :name="`line_${props.number}_inner`">
+            <template v-for="i in props.count">
+                <template v-if="(i + (props.number - 1) * props.count) <= Math.min(total, max_size)"
+                    :key="(i + (props.number - 1) * props.count)">
+                    <ModelFence :index="i" :models="props.models"
+                        :last_element="(i + (props.number - 1) * props.count) == total"
+                        :first_element="i == 1 && props.number == 1" />
+                </template>
+            </template>
+        </TresGroup>
+    </TresGroup>
+</template>
\ No newline at end of file
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index 9f5fb1f..1c7ba1a 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -1,92 +1,129 @@
 <script setup lang="ts">
-import {
-    PCFSoftShadowMap,
-    EquirectangularReflectionMapping,
-    CineonToneMapping,
-    Euler,
-} from 'three';
-import { GainMapLoader, } from '@monogrid/gainmap-js'
+import { Object3D, Vector3 } from 'three';
+//@ts-ignore
 import { useGLTF, } from '@tresjs/cientos'
-import { getColorHexFromRal, type ralTypes } from '../ral';
+import type { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
+import { getModel, toppers, type toppersIds } from '../topper';
 
-const pillar_color = use_pillar_color()
-const lamelle_color = use_lamelle_color()
 const section_count = use_section_count()
 const extra_section = use_extra_section()
-const max_size = use_max_size()
+const lamelles_count = use_lamelles_count()
+const lamelle_height = use_lamelle_height()
+const fence_section = use_fence_section()
 
-const { scene, renderer, camera } = useTresContext()
-renderer.value.toneMapping = CineonToneMapping
-renderer.value.toneMappingExposure = 0.5
-// renderer.value.gammaOutput = true
+const pillar_topper = use_topper()
 
-renderer.value.shadowMap.enabled = true
-renderer.value.shadowMap.type = PCFSoftShadowMap
+const open_calc = use_open_calc()
+const goto_cam = use_goto_camera()
+const goto_target = use_goto_target()
 
-const { scene: top_model } = await useGLTF('/models_one/verh_100.glb', { draco: true })
-const { scene: fence_model } = await useGLTF('/models_one/fence.glb', { draco: true })
-const { scene: fastening_model } = await useGLTF('/models_one/krepleniye_planok (1).glb', { draco: true })
-const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true })
+const { scene, controls, camera } = useTresContext()
+const { seek, seekAll } = useSeek()
+
+const topper_models = {} as { [key: toppersIds]: Object3D }
+for await (const element of toppers) {
+    const { scene } = await useGLTF(getModel(element.id))
+    topper_models[element.id] = scene
+}
+
+const { scene: model_pillar_center } = await useGLTF('/models_one/pillar/center.glb')
+const { scene: model_pillar_bottom } = await useGLTF('/models_one/pillar/bottom.glb')
+const { scene: model_pillar_inner } = await useGLTF('/models_one/pillar/inner.glb')
+const { scene: model_pillar_brace } = await useGLTF('/models_one/pillar/brace.glb')
+
+const { scene: model_fastening_top } = await useGLTF('/models_one/fastening/top.glb');
+const { scene: model_fastening_side } = await useGLTF('/models_one/fastening/side.glb');
+const { scene: model_fixing } = await useGLTF('/models_one/fixing.glb');
+
+const { scene: top_model } = await useGLTF('/models_one/top_100.glb', { draco: true })
+const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true });
 
 const top = ref(top_model)
-const fence = ref(fence_model)
-const fastening = ref(fastening_model)
+const pillar_top = ref(topper_models[pillar_topper.value])
+const pillar_center = ref(model_pillar_center)
+const pillar_bottom = ref(model_pillar_bottom)
+const pillar_inner = ref(model_pillar_inner)
+const pillar_brace = ref(model_pillar_brace)
+const fastening_top = ref(model_fastening_top)
+const fastening_side = ref(model_fastening_side)
+const fixing = ref(model_fixing)
 const lamelle = ref(lamelle_model)
 
-set_material(lamelle.value, getColorHexFromRal(lamelle_color.value));
-[top, fence, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) })
+watch(pillar_topper, async () => {
+    pillar_top.value = topper_models[pillar_topper.value]
+})
 
-const { seek, seekAll } = useSeek()
-watch(lamelle_color, () => {
-    set_material(lamelle.value, getColorHexFromRal(lamelle_color.value))
-    const items = seekAll(scene.value, 'name', "lamelles")
-    items.forEach(element => {
-        set_material(element, getColorHexFromRal(lamelle_color.value))
+const total = ref((section_count.value + ~~(!!extra_section.value)))
+const size = ref(Math.ceil(total.value / 4))
+const count = ref((total.value >= 4) ? size.value : total.value)
+
+watch(() => [section_count.value, extra_section.value], () => {
+    total.value = (section_count.value + ~~(!!extra_section.value))
+    size.value = Math.ceil(total.value / 4);
+    count.value = (total.value >= 4) ? size.value : total.value;
+
+    const lines_count = (total.value >= 4) ? 4 : 1
+    const base = seek(scene.value, 'name', 'base')
+    if (base?.children && base.children.length !== lines_count) {
+        base.children = [...base?.children.slice(0, lines_count)]
+    }
+
+    const lines = seekAll(scene.value, 'name', 'line')
+    lines.forEach(line => {
+        let n = size.value
+        if (lines_count == 1) {
+            n = total.value
+        }
+        if (line.name.endsWith('_4')) {
+            n = total.value - size.value * 3
+            if (n < 0) {
+                n = 0
+            }
+        }
+        const inner = seek(line, 'name', line.name + '_inner');
+        if (inner?.children && n < inner?.children.length) {
+            inner.children = [...inner?.children.slice(0, n)]
+        }
     });
 })
-watch(pillar_color, () => {
-    [top, fence, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) })
-    const items = [
-        ...seekAll(scene.value, 'name', "pillar_one"),
-        ...seekAll(scene.value, 'name', "pillar_two"),
-        ...seekAll(scene.value, 'name', "lam_fastening_one"),
-        ...seekAll(scene.value, 'name', "lam_fastening_two"),
-        ...seekAll(scene.value, 'name', "top_section"),
-    ]
-    items.forEach(element => {
-        set_material(element, getColorHexFromRal(pillar_color.value))
-    })
+const setTarget = (smooth = false) => {
+    let f = fence_section.value * lamelles_count.value * lamelle_height.value * 0.75;
+    const max = 2.25
+    if (f < max) f = max
+    const target = new Vector3(0, lamelles_count.value * lamelle_height.value * 0.5, 0);
+    if (smooth) {
+        goto_target.value = target
+        goto_cam.value = new Vector3(f, f, f)
+    } else {
+        (controls.value as OrbitControlsProps).target = target;
+        (controls.value as any).update()
+        goto_cam.value = new Vector3(f, f, f)
+    }
+}
+watch([lamelles_count, fence_section], () => {
+    setTarget()
+    open_calc.value = []
 })
-watch([section_count, extra_section], () => {
-    const base = seek(scene.value, 'name', 'base')
-    const n = (section_count.value as number) + ~~(!!extra_section.value)
-    if (base?.children && n < base?.children.length) {
-        base.children = [...base?.children.slice(0, n)]
+
+watch(open_calc, () => {
+    if (Object.keys(open_calc.value).length == 0) {
+        setTarget(true)
     }
 })
+const min_for_square = 12;
 
-onMounted(async () => {
-    const loader = new GainMapLoader(renderer.value)
-    const result = await loader.loadAsync([
-        'hdrmaps/hdr.webp',
-        'hdrmaps/hdr-gainmap.webp',
-        'hdrmaps/hdr.json',
-    ])
-    renderer.value.render(scene.value, camera.value)
-    scene.value.environment = result.renderTarget.texture
-    scene.value.background = result.renderTarget.texture
-    scene.value.background.mapping = EquirectangularReflectionMapping
-    scene.value.backgroundRotation = new Euler(0, 10, 0)
-    scene.value.backgroundIntensity = 1.5
-    scene.value.backgroundBlurriness = 0.06
-    result.renderTarget.texture.dispose();
-})
-
+setTarget()
 </script>
 <template>
     <TresGroup name="base">
-        <template v-for="i in Math.min((section_count + ~~(!!extra_section)), max_size)">
-            <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
+        <template v-for="line in (total >= min_for_square) ? 4 : 1" :key="`${line}_${count}`">
+            <ModelLine :models="{
+                top,
+                pillar_center, pillar_top, pillar_bottom, pillar_inner,
+                pillar_brace,
+                fastening_top, fastening_side, fixing,
+                lamelle
+            }" :number="line" :count="count" />
         </template>
     </TresGroup>
 </template>
\ No newline at end of file
diff --git a/components/model/smoothCamera.vue b/components/model/smoothCamera.vue
new file mode 100644
index 0000000..623ca52
--- /dev/null
+++ b/components/model/smoothCamera.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { Vector3 } from 'three';
+
+const { controls, camera } = useTresContext();
+const goto_camera = use_goto_camera();
+const goto_target = use_goto_target();
+
+const COUNT = 60
+type smooth = {
+    value: Vector3 | undefined,
+    count: number
+}
+const smooth_target = reactive({}) as smooth
+const smooth_move = reactive({}) as smooth
+
+const set_moveto = (obj: smooth, value: smooth["value"]) => {
+    obj.value = value
+    obj.count = COUNT
+}
+
+watch(goto_target, () => {
+    smooth_target.value = goto_target.value
+    smooth_target.count = COUNT
+})
+watch(goto_camera, () => {
+    smooth_move.value = goto_camera.value
+    smooth_move.count = COUNT
+})
+
+const koef = (1 / COUNT) * 3
+const { onBeforeLoop } = useRenderLoop()
+onBeforeLoop(() => {
+    if (smooth_target.value || smooth_move.value) {
+        if (smooth_target.value) {
+            (controls.value as any).target.lerp(smooth_target.value as Vector3, koef);
+            (controls.value as any).update();
+            smooth_target.count -= 1;
+            if (smooth_target.count == 1) {
+                set_moveto(smooth_target, undefined);
+            }
+        }
+        if (smooth_move.value) {
+            camera.value?.position.lerp(smooth_move.value as Vector3, koef);
+            camera.value?.updateMatrixWorld();
+            (controls.value as any).update();
+
+            smooth_move.count -= 1;
+            if (smooth_move.count == 1) {
+                set_moveto(smooth_move, undefined);
+            }
+        }
+    }
+})
+
+</script>
+<template></template>
diff --git a/components/pattern.ts b/components/pattern.ts
new file mode 100644
index 0000000..29061fa
--- /dev/null
+++ b/components/pattern.ts
@@ -0,0 +1,19 @@
+export const patterns = [
+    { name: 'Без узора', },
+    { name: 'Узор 1', filename: 'tile1.png' },
+    { name: 'Узор 2', filename: 'tile2.jpg' },
+].map((el, i) => Object.assign(el, { id: i }))
+
+export const getName = (id: patternIds) => {
+    const el = patterns.find(el => el.id == id)
+    if (!el) return undefined
+    return el.name
+}
+
+export const getFilename = (id: patternIds) => {
+    const el = patterns.find(el => el.id == id)
+    if (!el || !el.filename) return undefined
+    return `/pattern/${el?.filename}`
+}
+
+export type patternIds = typeof patterns[number]['id']
\ No newline at end of file
diff --git a/components/plural.vue b/components/plural.vue
deleted file mode 100644
index aa5a8c1..0000000
--- a/components/plural.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const props = defineProps(['forms', 'n'])
-const ruOrdinalRules = new Intl.PluralRules("ru-RU");
-</script>
-<template>
-    {{ props.forms[ruOrdinalRules.select(props.n)] }}
-</template>
\ No newline at end of file
diff --git a/components/ral.ts b/components/ral.ts
index 82ab4af..a937c2e 100644
--- a/components/ral.ts
+++ b/components/ral.ts
@@ -137,12 +137,6 @@ export const ralClassicPallette = {
         "hex": "#B89C50",
         "groupId": "ral_classic_1"
     },
-    "1026": {
-        "code": "1026",
-        "name": "Люминесцентный жёлтый",
-        "hex": "#F5FF00",
-        "groupId": "ral_classic_1"
-    },
     "1027": {
         "code": "1027",
         "name": "Карри жёлтый",
@@ -173,18 +167,6 @@ export const ralClassicPallette = {
         "hex": "#EDAB56",
         "groupId": "ral_classic_1"
     },
-    "1035": {
-        "code": "1035",
-        "name": "Перламутрово-бежевый",
-        "hex": "#A29985",
-        "groupId": "ral_classic_1"
-    },
-    "1036": {
-        "code": "1036",
-        "name": "Перламутрово-золотой",
-        "hex": "#927549",
-        "groupId": "ral_classic_1"
-    },
     "1037": {
         "code": "1037",
         "name": "Солнечно-жёлтый",
@@ -221,18 +203,7 @@ export const ralClassicPallette = {
         "hex": "#E75B12",
         "groupId": "ral_classic_2"
     },
-    "2005": {
-        "code": "2005",
-        "name": "Люминесцентный оранжевый",
-        "hex": "#FF2300",
-        "groupId": "ral_classic_2"
-    },
-    "2007": {
-        "code": "2007",
-        "name": "Люминесцентный ярко-оранжевый",
-        "hex": "#FFA421",
-        "groupId": "ral_classic_2"
-    },
+
     "2008": {
         "code": "2008",
         "name": "Ярко-красно-оранжевый",
@@ -263,12 +234,6 @@ export const ralClassicPallette = {
         "hex": "#DB6A50",
         "groupId": "ral_classic_2"
     },
-    "2013": {
-        "code": "2013",
-        "name": "Перламутрово-оранжевый",
-        "hex": "#954527",
-        "groupId": "ral_classic_2"
-    },
     "3000": {
         "code": "3000",
         "name": "Огненно-красный",
@@ -377,18 +342,6 @@ export const ralClassicPallette = {
         "hex": "#D56D56",
         "groupId": "ral_classic_3"
     },
-    "3024": {
-        "code": "3024",
-        "name": "Люминесцентный красный",
-        "hex": "#F70000",
-        "groupId": "ral_classic_3"
-    },
-    "3026": {
-        "code": "3026",
-        "name": "Люминесцентный ярко-красный",
-        "hex": "#FF0000",
-        "groupId": "ral_classic_3"
-    },
     "3027": {
         "code": "3027",
         "name": "Малиново-красный",
@@ -407,18 +360,6 @@ export const ralClassicPallette = {
         "hex": "#AC323B",
         "groupId": "ral_classic_3"
     },
-    "3032": {
-        "code": "3032",
-        "name": "Перламутрово-рубиновый",
-        "hex": "#711521",
-        "groupId": "ral_classic_3"
-    },
-    "3033": {
-        "code": "3033",
-        "name": "Перламутрово-розовый",
-        "hex": "#B24C43",
-        "groupId": "ral_classic_3"
-    },
     "4001": {
         "code": "4001",
         "name": "Красно-сиреневый",
@@ -479,18 +420,6 @@ export const ralClassicPallette = {
         "hex": "#C63678",
         "groupId": "ral_classic_4"
     },
-    "4011": {
-        "code": "4011",
-        "name": "Перламутрово-фиолетовый",
-        "hex": "#8773A1",
-        "groupId": "ral_classic_4"
-    },
-    "4012": {
-        "code": "4012",
-        "name": "Перламутрово-ежевичный",
-        "hex": "#6B6880",
-        "groupId": "ral_classic_4"
-    },
     "5000": {
         "code": "5000",
         "name": "Фиолетово-синий",
@@ -629,18 +558,6 @@ export const ralClassicPallette = {
         "hex": "#6A93B0",
         "groupId": "ral_classic_5"
     },
-    "5025": {
-        "code": "5025",
-        "name": "Перламутровый горечавково-синий",
-        "hex": "#296478",
-        "groupId": "ral_classic_5"
-    },
-    "5026": {
-        "code": "5026",
-        "name": "Перламутровый ночной синий",
-        "hex": "#102C54",
-        "groupId": "ral_classic_5"
-    },
     "6000": {
         "code": "6000",
         "name": "Патиново-зелёный",
@@ -833,30 +750,13 @@ export const ralClassicPallette = {
         "hex": "#7FB0B2",
         "groupId": "ral_classic_6"
     },
-    "6035": {
-        "code": "6035",
-        "name": "Перламутрово-зелёный",
-        "hex": "#1B542C",
-        "groupId": "ral_classic_6"
-    },
-    "6036": {
-        "code": "6036",
-        "name": "Перламутровый опаловый зелёный",
-        "hex": "#005D4C",
-        "groupId": "ral_classic_6"
-    },
+
     "6037": {
         "code": "6037",
         "name": "Зелёный",
         "hex": "#008F39",
         "groupId": "ral_classic_6"
     },
-    "6038": {
-        "code": "6038",
-        "name": "Люминесцентный зелёный",
-        "hex": "#00BB2E",
-        "groupId": "ral_classic_6"
-    },
     "7000": {
         "code": "7000",
         "name": "Серая белка",
@@ -1079,12 +979,7 @@ export const ralClassicPallette = {
         "hex": "#CFD0CF",
         "groupId": "ral_classic_7"
     },
-    "7048": {
-        "code": "7048",
-        "name": "Перламутровый мышино-серый",
-        "hex": "#888175",
-        "groupId": "ral_classic_7"
-    },
+
     "8000": {
         "code": "8000",
         "name": "Зелёно-коричневый",
@@ -1199,12 +1094,7 @@ export const ralClassicPallette = {
         "hex": "#4E3B2B",
         "groupId": "ral_classic_8"
     },
-    "8029": {
-        "code": "8029",
-        "name": "Перламутровый медный",
-        "hex": "#773C27",
-        "groupId": "ral_classic_8"
-    },
+
     "9001": {
         "code": "9001",
         "name": "Кремово-белый",
@@ -1235,18 +1125,6 @@ export const ralClassicPallette = {
         "hex": "#0A0A0D",
         "groupId": "ral_classic_9"
     },
-    "9006": {
-        "code": "9006",
-        "name": "Бело-алюминиевый",
-        "hex": "#A5A8A6",
-        "groupId": "ral_classic_9"
-    },
-    "9007": {
-        "code": "9007",
-        "name": "Тёмно-алюминиевый",
-        "hex": "#8F8F8C",
-        "groupId": "ral_classic_9"
-    },
     "9010": {
         "code": "9010",
         "name": "Белый",
@@ -1277,18 +1155,6 @@ export const ralClassicPallette = {
         "hex": "#CFD3CD",
         "groupId": "ral_classic_9"
     },
-    "9022": {
-        "code": "9022",
-        "name": "Перламутровый светло-серый",
-        "hex": "#9C9C9C",
-        "groupId": "ral_classic_9"
-    },
-    "9023": {
-        "code": "9023",
-        "name": "Перламутровый тёмно-серый",
-        "hex": "#7E8182",
-        "groupId": "ral_classic_9"
-    }
 }
 export type ralTypes = keyof typeof ralClassicPallette
 export const getColorHexFromRal = (col: keyof typeof ralClassicPallette) => {
diff --git a/components/topper.ts b/components/topper.ts
new file mode 100644
index 0000000..e27779d
--- /dev/null
+++ b/components/topper.ts
@@ -0,0 +1,24 @@
+export const toppers = [
+    { name: 'Ровный', filename: 'icon_stolb_verh_3.svg', model: 'top' },
+    { name: 'Вершина 1', filename: 'icon_stolb_verh_2.svg', model: 'decor1' },
+    { name: 'Вершина 2', filename: 'icon_stolb_verh_1.svg', model: 'decor2' },
+].map((el, i) => Object.assign(el, { id: i }))
+
+export const getFilename = (id: toppersIds) => {
+    const el = toppers.find(el => el.id == id)
+    if (!el || !el.filename) return undefined
+    return `/topper/${el?.filename}`
+}
+
+export const getName = (id: toppersIds) => {
+    const el = toppers.find(el => el.id == id)
+    if (!el || !el.filename) return undefined
+    return el.name
+}
+export const getModel = (id: toppersIds) => {
+    const el = toppers.find(el => el.id == id)
+    if (!el || !el.filename) return undefined
+    return `/models_one/pillar/topper/${el?.model}.glb`
+}
+
+export type toppersIds = typeof toppers[number]['id']
\ No newline at end of file
diff --git a/composables/useCalc.ts b/composables/useCalc.ts
index b164771..e86f6e3 100644
--- a/composables/useCalc.ts
+++ b/composables/useCalc.ts
@@ -1,20 +1,31 @@
 import type { ralTypes } from '@/components/ral'
+import { Vector3 } from 'three'
+import { type patternIds } from '~/components/pattern'
+import { type toppersIds } from '~/components/topper'
 
 export const predefPillarColors = ['3004', '7043', '6028', '5013', '8016', '1020', '3005', '4009']
 export const predefLamelleColors = ['3009', '9003', '6027', '5024', '9001', '1012', '3007', '4007']
 
-const n = 2
-const min = 1300
+const n = 4
+const min = 1370
 
 export const use_lamelle_height = () => useState<number>('lamelle_height', () => 0.115)
 export const use_lamelles_count = () => useState('lamelles_count', () => 14)
 export const use_fence_section = () => useState<number>('fence_section', () => min * 0.001)
+
 export const use_remove_pillar = () => useState<boolean>('remove_pillar', () => false)
 export const use_pillar_color = () => useState<ralTypes>('pillar_color')
 export const use_lamelle_color = () => useState<ralTypes>('lamelle_color')
+export const use_pattern = () => useState<patternIds>('pattern', () => 0)
+export const use_topper = () => useState<toppersIds>('topper', () => 0)
+
 export const use_section_count = () => useState('section_count', () => n)
 export const use_extra_section = () => useState('extra_section', () => 0)
 export const use_total_length = () => useState('total_length', () => (((min + 104) * n) + 104) * 0.001)
 export const use_min_length = () => useState('min_length', () => 700)
-export const use_max_size = () => useState<number>('max_size', () => 20)
-export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)
\ No newline at end of file
+export const use_max_size = () => useState<number>('max_size', () => 1)
+export const use_explosion_state = () => useState<boolean>('explosion_state', () => false)
+
+export const use_goto_camera = () => useState<Vector3 | undefined>('gotocam', () => undefined)
+export const use_goto_target = () => useState<Vector3 | undefined>('gotocontrols', () => undefined)
+export const use_open_calc = () => useState<string[]>('open_calc', () => [])
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e946173..e6328bf 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 
 export default defineNuxtConfig({
+  devtools: { enabled: false },
   hooks: {},
   app: {
     pageTransition: { name: 'page', mode: 'out-in' },
@@ -45,6 +46,7 @@ export default defineNuxtConfig({
   vite: {
     assetsInclude: ['**/*.glb', '**/*.gltf'],
     build: {
+      target: 'esnext'
       // minify: 'esbuild'
       // minify: false
     },
diff --git a/package-lock.json b/package-lock.json
index 30dcee3..04faeb7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,20 +9,23 @@
       "dependencies": {
         "@artmizu/yandex-metrika-nuxt": "^1.0.4",
         "@monogrid/gainmap-js": "^3.0.5",
+        "@nodetoy/three-nodetoy": "^0.1.36",
         "@nuxt/image": "^1.7.0",
-        "@nuxtjs/robots": "^3.0.0",
+        "@nuxtjs/robots": "^4.0.0",
         "@nuxtjs/sitemap": "^5.3.5",
         "@nuxtjs/tailwindcss": "^6.12.0",
         "@tailwindcss/typography": "^0.5.13",
         "@tresjs/cientos": "^3.9.0",
         "@tresjs/core": "^4.0.2",
         "@tresjs/nuxt": "^2.1.2",
+        "@tresjs/post-processing": "^0.7.1",
         "consola": "^3.2.3",
         "marked": "^12.0.2",
         "nuxt": "^3.11.2",
         "nuxt-icon": "^0.6.10",
         "nuxt-svgo": "^4.0.1",
         "sass": "^1.77.4",
+        "sharp": "^0.33.5",
         "tailwindcss": "^3.4.3",
         "three": "^0.165.0",
         "vue": "^3.4.27",
@@ -786,6 +789,16 @@
         "tailwindcss": "*"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.2.0.tgz",
+      "integrity": "sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -1246,6 +1259,367 @@
         "vue": ">=3"
       }
     },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
+      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
+      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
+      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
+      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
+      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
+      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
+      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
+      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
+      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
+      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
+      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.5"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
+      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
+      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
+      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
+      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
+      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
+      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.2.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
+      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
+      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -1379,9 +1753,10 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
@@ -1518,6 +1893,29 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@nodetoy/shared-nodetoy": {
+      "version": "0.2.21",
+      "resolved": "https://registry.npmjs.org/@nodetoy/shared-nodetoy/-/shared-nodetoy-0.2.21.tgz",
+      "integrity": "sha512-itFQATEfWmbuYSBCHdVw6qY1mPME4JQ4jFEtbspgI+Dk7if4f7WXuNit2wFgLFUXPQ7c1UPUXZsJTBxVFDs6SA==",
+      "dependencies": {
+        "eventemitter3": "^4.0.7"
+      },
+      "peerDependencies": {
+        "three": ">=0.143.0"
+      }
+    },
+    "node_modules/@nodetoy/three-nodetoy": {
+      "version": "0.1.36",
+      "resolved": "https://registry.npmjs.org/@nodetoy/three-nodetoy/-/three-nodetoy-0.1.36.tgz",
+      "integrity": "sha512-qxsZucryVes7LeB/ezW/dFeESicEk2DrrjwHPwzbXXXKaaCS7/8OBCay8ZzoilVYYoZpeoNNu13KSwx8M6sPmQ==",
+      "dependencies": {
+        "@nodetoy/shared-nodetoy": "^0.2.21",
+        "three": ">=0.143.0"
+      },
+      "peerDependencies": {
+        "three": ">=0.143.0"
+      }
+    },
     "node_modules/@npmcli/agent": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-2.2.2.tgz",
@@ -2029,12 +2427,93 @@
       }
     },
     "node_modules/@nuxtjs/robots": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/robots/-/robots-3.0.0.tgz",
-      "integrity": "sha512-qsHGW1KXBvV5Kq7u3huPnFCUTbHS4Fk8Za2mNPgmUXcwLgp3exvhPtdZfIdjrCF/aZk3A8OZONNmGghs6CecBA==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/robots/-/robots-4.1.7.tgz",
+      "integrity": "sha512-1rz2oyBNmpfIzqNG9LfGft+H8Wpp1BMmPyNhkm7BuG/jUXTBFaCh6HDeK6Otx2y53Z9JtCDhiIs/JHj/L4WLPw==",
+      "license": "MIT",
       "dependencies": {
-        "@nuxt/kit": "^3.0.0",
-        "h3": "^1.0.1"
+        "@nuxt/devtools-kit": "^1.4.1",
+        "@nuxt/kit": "^3.13.1",
+        "consola": "^3.2.3",
+        "defu": "^6.1.4",
+        "nuxt-site-config": "^2.2.16",
+        "nuxt-site-config-kit": "^2.2.16",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.0",
+        "sirv": "^2.0.4",
+        "std-env": "^3.7.0",
+        "ufo": "^1.5.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@nuxtjs/robots/node_modules/@nuxt/devtools-kit": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-1.5.0.tgz",
+      "integrity": "sha512-Q8sOquz9CoUMTABo6Bq+nkbNMZi+WVN4xpz1USZPZazcJhSj9imSmQRSycY2fBYqkfB1AKBRhm2UV2ujCQfw0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.13.2",
+        "@nuxt/schema": "^3.13.2",
+        "execa": "^7.2.0"
+      },
+      "peerDependencies": {
+        "vite": "*"
+      }
+    },
+    "node_modules/@nuxtjs/robots/node_modules/@nuxt/kit": {
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.13.2.tgz",
+      "integrity": "sha512-KvRw21zU//wdz25IeE1E5m/aFSzhJloBRAQtv+evcFeZvuroIxpIQuUqhbzuwznaUwpiWbmwlcsp5uOWmi4vwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/schema": "3.13.2",
+        "c12": "^1.11.2",
+        "consola": "^3.2.3",
+        "defu": "^6.1.4",
+        "destr": "^2.0.3",
+        "globby": "^14.0.2",
+        "hash-sum": "^2.0.0",
+        "ignore": "^5.3.2",
+        "jiti": "^1.21.6",
+        "klona": "^2.0.6",
+        "knitwork": "^1.1.0",
+        "mlly": "^1.7.1",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.0",
+        "scule": "^1.3.0",
+        "semver": "^7.6.3",
+        "ufo": "^1.5.4",
+        "unctx": "^2.3.1",
+        "unimport": "^3.12.0",
+        "untyped": "^1.4.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/@nuxtjs/robots/node_modules/@nuxt/schema": {
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.13.2.tgz",
+      "integrity": "sha512-CCZgpm+MkqtOMDEgF9SWgGPBXlQ01hV/6+2reDEpJuqFPGzV8HYKPBcIFvn7/z5ahtgutHLzjP71Na+hYcqSpw==",
+      "license": "MIT",
+      "dependencies": {
+        "compatx": "^0.1.8",
+        "consola": "^3.2.3",
+        "defu": "^6.1.4",
+        "hookable": "^5.5.3",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.0",
+        "scule": "^1.3.0",
+        "std-env": "^3.7.0",
+        "ufo": "^1.5.4",
+        "uncrypto": "^0.1.3",
+        "unimport": "^3.12.0",
+        "untyped": "^1.4.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
       }
     },
     "node_modules/@nuxtjs/sitemap": {
@@ -2918,9 +3397,9 @@
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
-      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz",
+      "integrity": "sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==",
       "dependencies": {
         "@types/estree": "^1.0.0",
         "estree-walker": "^2.0.2",
@@ -3991,6 +4470,47 @@
         }
       }
     },
+    "node_modules/@tresjs/post-processing": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@tresjs/post-processing/-/post-processing-0.7.1.tgz",
+      "integrity": "sha512-MLrjxR4rJ55MOYFKMEZ8aqh5no2/sOG1fdYk2B49Ntx2p2etyuVpI6e9BBAvrc4M/wktRHkQ2JNDbgMaCiJoMg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tresjs/core": "^3.5.1",
+        "@unocss/core": "^0.58.0",
+        "@vueuse/core": "^10.6.1",
+        "postprocessing": "^6.33.4",
+        "three-stdlib": "^2.28.7"
+      },
+      "peerDependencies": {
+        "three": ">=0.133",
+        "vue": ">=3.3"
+      }
+    },
+    "node_modules/@tresjs/post-processing/node_modules/@tresjs/core": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@tresjs/core/-/core-3.9.0.tgz",
+      "integrity": "sha512-6el70oXSduTvSA3XCI8/rQV2GzcgCLceZKA443CTU/MBPmRDULJ12q/UYl18Ij4CJ68rTqgVi0Da+WNMrs784A==",
+      "license": "MIT",
+      "dependencies": {
+        "@alvarosabu/utils": "^3.1.1",
+        "@vue/devtools-api": "^6.6.1",
+        "@vueuse/core": "^10.7.0"
+      },
+      "peerDependencies": {
+        "three": ">=0.133",
+        "vue": ">=3.3"
+      }
+    },
+    "node_modules/@tresjs/post-processing/node_modules/@unocss/core": {
+      "version": "0.58.9",
+      "resolved": "https://registry.npmjs.org/@unocss/core/-/core-0.58.9.tgz",
+      "integrity": "sha512-wYpPIPPsOIbIoMIDuH8ihehJk5pAZmyFKXIYO/Kro98GEOFhz6lJoLsy6/PZuitlgp2/TSlubUuWGjHWvp5osw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -6211,9 +6731,10 @@
       "optional": true
     },
     "node_modules/bare-fs": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.1.tgz",
-      "integrity": "sha512-W/Hfxc/6VehXlsgFtbB5B4xFcsCl+pAh30cYhoFyXErf6oGrwjh8SwiPAdHgpmWonKuYpZgGywN0SXt7dgsADA==",
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.5.tgz",
+      "integrity": "sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==",
+      "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "bare-events": "^2.0.0",
@@ -6222,27 +6743,31 @@
       }
     },
     "node_modules/bare-os": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.4.0.tgz",
-      "integrity": "sha512-v8DTT08AS/G0F9xrhyLtepoo9EJBJ85FRSMbu1pQUlAf6A8T0tEEQGMVObWeqpjhSPXsE0VGlluFBJu2fdoTNg==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.4.4.tgz",
+      "integrity": "sha512-z3UiI2yi1mK0sXeRdc4O1Kk8aOa/e+FNWZcTiPB/dfTWyLypuE99LibgRaQki914Jq//yAWylcAt+mknKdixRQ==",
+      "license": "Apache-2.0",
       "optional": true
     },
     "node_modules/bare-path": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.3.tgz",
       "integrity": "sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==",
+      "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "bare-os": "^2.1.0"
       }
     },
     "node_modules/bare-stream": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.1.3.tgz",
-      "integrity": "sha512-tiDAH9H/kP+tvNO5sczyn9ZAA7utrSMobyDchsnyyXBuUe2FSQWbxhtuHB8jwpHYYevVo2UJpcmvvjrbHboUUQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.3.0.tgz",
+      "integrity": "sha512-pVRWciewGUeCyKEuRxwv06M079r+fRjAQjBEK2P6OYGrO43O+Z0LrPZZEjlc4mB6C2RpZ9AxJ1s7NLEtOHO6eA==",
+      "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "streamx": "^2.18.0"
+        "b4a": "^1.6.6",
+        "streamx": "^2.20.0"
       }
     },
     "node_modules/base64-js": {
@@ -6295,6 +6820,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
       "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "buffer": "^5.5.0",
@@ -6320,6 +6846,7 @@
           "url": "https://feross.org/support"
         }
       ],
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "base64-js": "^1.3.1",
@@ -6330,6 +6857,7 @@
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
       "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "inherits": "^2.0.3",
@@ -6457,9 +6985,10 @@
       }
     },
     "node_modules/c12": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-1.11.1.tgz",
-      "integrity": "sha512-KDU0TvSvVdaYcQKQ6iPHATGz/7p/KiVjPg4vQrB6Jg/wX9R0yl5RZxWm9IoZqaIHD2+6PZd81+KMGwRr/lRIUg==",
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-1.11.2.tgz",
+      "integrity": "sha512-oBs8a4uvSDO9dm8b7OCFW7+dgtVrwmwnrVXYzLm43ta7ep2jCn/0MhoUFygIWtxhyy6+/MG7/agvpY0U1Iemew==",
+      "license": "MIT",
       "dependencies": {
         "chokidar": "^3.6.0",
         "confbox": "^0.1.7",
@@ -6471,7 +7000,7 @@
         "ohash": "^1.1.3",
         "pathe": "^1.1.2",
         "perfect-debounce": "^1.0.0",
-        "pkg-types": "^1.1.1",
+        "pkg-types": "^1.2.0",
         "rc9": "^2.1.2"
       },
       "peerDependencies": {
@@ -6819,7 +7348,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
       "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "optional": true,
       "dependencies": {
         "color-convert": "^2.0.1",
         "color-string": "^1.9.0"
@@ -6845,7 +7373,6 @@
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
       "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "optional": true,
       "dependencies": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
@@ -6863,7 +7390,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "optional": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -6874,8 +7400,7 @@
     "node_modules/color/node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "optional": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/colord": {
       "version": "2.9.3",
@@ -7336,6 +7861,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
       "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "mimic-response": "^3.1.0"
@@ -7356,6 +7882,7 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
       "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=4.0.0"
@@ -7601,6 +8128,7 @@
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
       "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "once": "^1.4.0"
@@ -7801,6 +8329,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -7835,6 +8369,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
       "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "license": "(MIT OR WTFPL)",
       "optional": true,
       "engines": {
         "node": ">=6"
@@ -8014,6 +8549,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
       "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fs-extra": {
@@ -8173,6 +8709,7 @@
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
       "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "license": "MIT",
       "optional": true
     },
     "node_modules/glob": {
@@ -8585,9 +9122,10 @@
       ]
     },
     "node_modules/ignore": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "license": "MIT",
       "engines": {
         "node": ">= 4"
       }
@@ -8733,6 +9271,37 @@
         "ipx": "bin/ipx.mjs"
       }
     },
+    "node_modules/ipx/node_modules/node-addon-api": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
+      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/ipx/node_modules/sharp": {
+      "version": "0.32.6",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
+      "integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.2",
+        "node-addon-api": "^6.1.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.5.4",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^3.0.4",
+        "tunnel-agent": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/iron-webcrypto": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz",
@@ -8744,8 +9313,7 @@
     "node_modules/is-arrayish": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "optional": true
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
@@ -9510,11 +10078,12 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.10",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
-      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "node_modules/magic-string-ast": {
@@ -9804,6 +10373,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
       "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=10"
@@ -10053,6 +10623,7 @@
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
       "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "license": "MIT",
       "optional": true
     },
     "node_modules/mlly": {
@@ -10118,6 +10689,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
       "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+      "license": "MIT",
       "optional": true
     },
     "node_modules/negotiator": {
@@ -10235,9 +10807,10 @@
       }
     },
     "node_modules/node-abi": {
-      "version": "3.65.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.65.0.tgz",
-      "integrity": "sha512-ThjYBfoDNr08AWx6hGaRbfPwxKV9kVzAzOzlLKbk2CuqXE2xnCh+cbAGnwM3t8Lq4v9rUB7VfondlkBckcJrVA==",
+      "version": "3.68.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.68.0.tgz",
+      "integrity": "sha512-7vbj10trelExNjFSBm5kTvZXXa7pZyKWx9RCKIyqe6I9Ev3IzGpQoqBP3a+cOdxY+pWj6VkP28n/2wWysBHD/A==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "semver": "^7.3.5"
@@ -10666,64 +11239,67 @@
       }
     },
     "node_modules/nuxt-site-config": {
-      "version": "2.2.15",
-      "resolved": "https://registry.npmjs.org/nuxt-site-config/-/nuxt-site-config-2.2.15.tgz",
-      "integrity": "sha512-V/gsWAeSWQi7FGoy6vicf6DXaaNJ/akail54dMWnrkcBre4PpBSwP7arZqmZZzj1mc0v7LoYqISr9qeXhcT1NA==",
+      "version": "2.2.18",
+      "resolved": "https://registry.npmjs.org/nuxt-site-config/-/nuxt-site-config-2.2.18.tgz",
+      "integrity": "sha512-NU39ANP1kvRBzpEWV496y/lf9PKVv3t1VKX3zmQ1POcbzAXU4gm0Mh5NKOaLEcoXj6bQnziFNqjzHX3DAA8Aog==",
+      "license": "MIT",
       "dependencies": {
-        "@nuxt/devtools-kit": "^1.3.9",
-        "@nuxt/kit": "^3.12.3",
-        "@nuxt/schema": "^3.12.3",
-        "nuxt-site-config-kit": "2.2.15",
+        "@nuxt/devtools-kit": "^1.4.2",
+        "@nuxt/kit": "^3.13.1",
+        "@nuxt/schema": "^3.13.1",
+        "nuxt-site-config-kit": "2.2.18",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.1.3",
+        "pkg-types": "^1.2.0",
         "sirv": "^2.0.4",
-        "site-config-stack": "2.2.15",
-        "ufo": "^1.5.3"
+        "site-config-stack": "2.2.18",
+        "ufo": "^1.5.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/harlan-zw"
       }
     },
     "node_modules/nuxt-site-config-kit": {
-      "version": "2.2.15",
-      "resolved": "https://registry.npmjs.org/nuxt-site-config-kit/-/nuxt-site-config-kit-2.2.15.tgz",
-      "integrity": "sha512-uN+JOijDt0u35rBhI3GhRHvPKncm2Nu/P3QMRIi+mwt4F/tQtlvLa1XUANkeEy8InTnPTVgs6dSDSqHP4sBXzg==",
+      "version": "2.2.18",
+      "resolved": "https://registry.npmjs.org/nuxt-site-config-kit/-/nuxt-site-config-kit-2.2.18.tgz",
+      "integrity": "sha512-iPtf2X1fvI9m9VV04edSqNGC2EzQ1aLB7F2/AOxYRktCJxHeTdBGifuNPc90EaEIOfWx+gf3lmRd4EppGoAMSA==",
+      "license": "MIT",
       "dependencies": {
-        "@nuxt/kit": "^3.12.3",
-        "@nuxt/schema": "^3.12.3",
-        "pkg-types": "^1.1.3",
-        "site-config-stack": "2.2.15",
+        "@nuxt/kit": "^3.13.1",
+        "@nuxt/schema": "^3.13.1",
+        "pkg-types": "^1.2.0",
+        "site-config-stack": "2.2.18",
         "std-env": "^3.7.0",
-        "ufo": "^1.5.3"
+        "ufo": "^1.5.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/harlan-zw"
       }
     },
     "node_modules/nuxt-site-config-kit/node_modules/@nuxt/kit": {
-      "version": "3.12.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.12.4.tgz",
-      "integrity": "sha512-aNRD1ylzijY0oYolldNcZJXVyxdGzNTl+Xd0UYyFQCu9f4wqUZqQ9l+b7arCEzchr96pMK0xdpvLcS3xo1wDcw==",
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.13.2.tgz",
+      "integrity": "sha512-KvRw21zU//wdz25IeE1E5m/aFSzhJloBRAQtv+evcFeZvuroIxpIQuUqhbzuwznaUwpiWbmwlcsp5uOWmi4vwA==",
+      "license": "MIT",
       "dependencies": {
-        "@nuxt/schema": "3.12.4",
-        "c12": "^1.11.1",
+        "@nuxt/schema": "3.13.2",
+        "c12": "^1.11.2",
         "consola": "^3.2.3",
         "defu": "^6.1.4",
         "destr": "^2.0.3",
         "globby": "^14.0.2",
         "hash-sum": "^2.0.0",
-        "ignore": "^5.3.1",
+        "ignore": "^5.3.2",
         "jiti": "^1.21.6",
         "klona": "^2.0.6",
         "knitwork": "^1.1.0",
         "mlly": "^1.7.1",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.1.3",
+        "pkg-types": "^1.2.0",
         "scule": "^1.3.0",
         "semver": "^7.6.3",
         "ufo": "^1.5.4",
         "unctx": "^2.3.1",
-        "unimport": "^3.9.0",
+        "unimport": "^3.12.0",
         "untyped": "^1.4.2"
       },
       "engines": {
@@ -10731,21 +11307,22 @@
       }
     },
     "node_modules/nuxt-site-config-kit/node_modules/@nuxt/schema": {
-      "version": "3.12.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.12.4.tgz",
-      "integrity": "sha512-H7FwBV4ChssMaeiLyPdVLOLUa0326ebp3pNbJfGgFt7rSoKh1MmgjorecA8JMxOQZziy3w6EELf4+5cgLh/F1w==",
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.13.2.tgz",
+      "integrity": "sha512-CCZgpm+MkqtOMDEgF9SWgGPBXlQ01hV/6+2reDEpJuqFPGzV8HYKPBcIFvn7/z5ahtgutHLzjP71Na+hYcqSpw==",
+      "license": "MIT",
       "dependencies": {
         "compatx": "^0.1.8",
         "consola": "^3.2.3",
         "defu": "^6.1.4",
         "hookable": "^5.5.3",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.1.3",
+        "pkg-types": "^1.2.0",
         "scule": "^1.3.0",
         "std-env": "^3.7.0",
         "ufo": "^1.5.4",
         "uncrypto": "^0.1.3",
-        "unimport": "^3.9.0",
+        "unimport": "^3.12.0",
         "untyped": "^1.4.2"
       },
       "engines": {
@@ -10753,12 +11330,13 @@
       }
     },
     "node_modules/nuxt-site-config/node_modules/@nuxt/devtools-kit": {
-      "version": "1.3.9",
-      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-1.3.9.tgz",
-      "integrity": "sha512-tgr/F+4BbI53/JxgaXl3cuV9dMuCXMsd4GEXN+JqtCdAkDbH3wL79GGWx0/6I9acGzRsB6UZ1H6U96nfgcIrAw==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-1.5.0.tgz",
+      "integrity": "sha512-Q8sOquz9CoUMTABo6Bq+nkbNMZi+WVN4xpz1USZPZazcJhSj9imSmQRSycY2fBYqkfB1AKBRhm2UV2ujCQfw0Q==",
+      "license": "MIT",
       "dependencies": {
-        "@nuxt/kit": "^3.12.2",
-        "@nuxt/schema": "^3.12.3",
+        "@nuxt/kit": "^3.13.2",
+        "@nuxt/schema": "^3.13.2",
         "execa": "^7.2.0"
       },
       "peerDependencies": {
@@ -10766,29 +11344,30 @@
       }
     },
     "node_modules/nuxt-site-config/node_modules/@nuxt/kit": {
-      "version": "3.12.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.12.4.tgz",
-      "integrity": "sha512-aNRD1ylzijY0oYolldNcZJXVyxdGzNTl+Xd0UYyFQCu9f4wqUZqQ9l+b7arCEzchr96pMK0xdpvLcS3xo1wDcw==",
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.13.2.tgz",
+      "integrity": "sha512-KvRw21zU//wdz25IeE1E5m/aFSzhJloBRAQtv+evcFeZvuroIxpIQuUqhbzuwznaUwpiWbmwlcsp5uOWmi4vwA==",
+      "license": "MIT",
       "dependencies": {
-        "@nuxt/schema": "3.12.4",
-        "c12": "^1.11.1",
+        "@nuxt/schema": "3.13.2",
+        "c12": "^1.11.2",
         "consola": "^3.2.3",
         "defu": "^6.1.4",
         "destr": "^2.0.3",
         "globby": "^14.0.2",
         "hash-sum": "^2.0.0",
-        "ignore": "^5.3.1",
+        "ignore": "^5.3.2",
         "jiti": "^1.21.6",
         "klona": "^2.0.6",
         "knitwork": "^1.1.0",
         "mlly": "^1.7.1",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.1.3",
+        "pkg-types": "^1.2.0",
         "scule": "^1.3.0",
         "semver": "^7.6.3",
         "ufo": "^1.5.4",
         "unctx": "^2.3.1",
-        "unimport": "^3.9.0",
+        "unimport": "^3.12.0",
         "untyped": "^1.4.2"
       },
       "engines": {
@@ -10796,21 +11375,22 @@
       }
     },
     "node_modules/nuxt-site-config/node_modules/@nuxt/schema": {
-      "version": "3.12.4",
-      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.12.4.tgz",
-      "integrity": "sha512-H7FwBV4ChssMaeiLyPdVLOLUa0326ebp3pNbJfGgFt7rSoKh1MmgjorecA8JMxOQZziy3w6EELf4+5cgLh/F1w==",
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.13.2.tgz",
+      "integrity": "sha512-CCZgpm+MkqtOMDEgF9SWgGPBXlQ01hV/6+2reDEpJuqFPGzV8HYKPBcIFvn7/z5ahtgutHLzjP71Na+hYcqSpw==",
+      "license": "MIT",
       "dependencies": {
         "compatx": "^0.1.8",
         "consola": "^3.2.3",
         "defu": "^6.1.4",
         "hookable": "^5.5.3",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.1.3",
+        "pkg-types": "^1.2.0",
         "scule": "^1.3.0",
         "std-env": "^3.7.0",
         "ufo": "^1.5.4",
         "uncrypto": "^0.1.3",
-        "unimport": "^3.9.0",
+        "unimport": "^3.12.0",
         "untyped": "^1.4.2"
       },
       "engines": {
@@ -11316,9 +11896,10 @@
       }
     },
     "node_modules/pkg-types": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.3.tgz",
-      "integrity": "sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.2.0.tgz",
+      "integrity": "sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==",
+      "license": "MIT",
       "dependencies": {
         "confbox": "^0.1.7",
         "mlly": "^1.7.1",
@@ -11918,6 +12499,15 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/postprocessing": {
+      "version": "6.36.2",
+      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.36.2.tgz",
+      "integrity": "sha512-a1qZjpm0Vrozat7YFtYOEvwElWz/ukhxoA+K7HzDVeor20vzacREMnJZL5GTj6TFVr7/ma3W0qD03Go0V5gQOA==",
+      "license": "Zlib",
+      "peerDependencies": {
+        "three": ">= 0.157.0 < 0.169.0"
+      }
+    },
     "node_modules/potpack": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
@@ -11927,6 +12517,7 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.2.tgz",
       "integrity": "sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "detect-libc": "^2.0.0",
@@ -11953,12 +12544,14 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
       "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC",
       "optional": true
     },
     "node_modules/prebuild-install/node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
       "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "inherits": "^2.0.3",
@@ -11973,6 +12566,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
       "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "chownr": "^1.1.1",
@@ -11985,6 +12579,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
       "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "bl": "^4.0.3",
@@ -12073,9 +12668,10 @@
       "integrity": "sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q=="
     },
     "node_modules/pump": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+      "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "end-of-stream": "^1.1.0",
@@ -12150,6 +12746,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
       "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
       "optional": true,
       "dependencies": {
         "deep-extend": "^0.6.0",
@@ -12165,6 +12762,7 @@
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC",
       "optional": true
     },
     "node_modules/rc9": {
@@ -12944,34 +13542,44 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
     "node_modules/sharp": {
-      "version": "0.32.6",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
-      "integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
+      "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
       "hasInstallScript": true,
-      "optional": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "color": "^4.2.3",
-        "detect-libc": "^2.0.2",
-        "node-addon-api": "^6.1.0",
-        "prebuild-install": "^7.1.1",
-        "semver": "^7.5.4",
-        "simple-get": "^4.0.1",
-        "tar-fs": "^3.0.4",
-        "tunnel-agent": "^0.6.0"
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.3"
       },
       "engines": {
-        "node": ">=14.15.0"
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.5",
+        "@img/sharp-darwin-x64": "0.33.5",
+        "@img/sharp-libvips-darwin-arm64": "1.0.4",
+        "@img/sharp-libvips-darwin-x64": "1.0.4",
+        "@img/sharp-libvips-linux-arm": "1.0.5",
+        "@img/sharp-libvips-linux-arm64": "1.0.4",
+        "@img/sharp-libvips-linux-s390x": "1.0.4",
+        "@img/sharp-libvips-linux-x64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4",
+        "@img/sharp-linux-arm": "0.33.5",
+        "@img/sharp-linux-arm64": "0.33.5",
+        "@img/sharp-linux-s390x": "0.33.5",
+        "@img/sharp-linux-x64": "0.33.5",
+        "@img/sharp-linuxmusl-arm64": "0.33.5",
+        "@img/sharp-linuxmusl-x64": "0.33.5",
+        "@img/sharp-wasm32": "0.33.5",
+        "@img/sharp-win32-ia32": "0.33.5",
+        "@img/sharp-win32-x64": "0.33.5"
       }
     },
-    "node_modules/sharp/node_modules/node-addon-api": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
-      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
-      "optional": true
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -13046,6 +13654,7 @@
           "url": "https://feross.org/support"
         }
       ],
+      "license": "MIT",
       "optional": true
     },
     "node_modules/simple-get": {
@@ -13066,6 +13675,7 @@
           "url": "https://feross.org/support"
         }
       ],
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "decompress-response": "^6.0.0",
@@ -13091,7 +13701,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
       "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "optional": true,
       "dependencies": {
         "is-arrayish": "^0.3.1"
       }
@@ -13115,11 +13724,12 @@
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
     },
     "node_modules/site-config-stack": {
-      "version": "2.2.15",
-      "resolved": "https://registry.npmjs.org/site-config-stack/-/site-config-stack-2.2.15.tgz",
-      "integrity": "sha512-Ykh1X+puUlGoM/HX7bV7xZMKd4mQTm0KtB/9ChHKSIknCJ6pEwIRKuDiEnImtOTG+HUhuFJGW8lV8CkAB58tXw==",
+      "version": "2.2.18",
+      "resolved": "https://registry.npmjs.org/site-config-stack/-/site-config-stack-2.2.18.tgz",
+      "integrity": "sha512-kwyuCwYZBJikuLN3IB15cGT7SHQQxAitLaDs1b6eNZbb+tBHubVUhj0pnFZnZZi4+5eNCO+3HiZxaU3qpFxP2A==",
+      "license": "MIT",
       "dependencies": {
-        "ufo": "^1.5.3"
+        "ufo": "^1.5.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/harlan-zw"
@@ -13327,9 +13937,10 @@
       "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg=="
     },
     "node_modules/streamx": {
-      "version": "2.18.0",
-      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.18.0.tgz",
-      "integrity": "sha512-LLUC1TWdjVdn1weXGcSxyTR3T4+acB6tVGXT95y0nGbca4t4o/ng1wKAGTljm9VicuCVLvRlqFYXYy5GwgM7sQ==",
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.20.1.tgz",
+      "integrity": "sha512-uTa0mU6WUC65iUvzKH4X9hEdvSW7rbPxPtwfWiLMSj3qTdQbAiUboZTxauKfpFuGIGa1C2BYijZ7wgdUXICJhA==",
+      "license": "MIT",
       "dependencies": {
         "fast-fifo": "^1.3.2",
         "queue-tick": "^1.0.1",
@@ -13425,6 +14036,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
       "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=0.10.0"
@@ -13739,6 +14351,7 @@
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
       "integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "pump": "^3.0.0",
@@ -14017,6 +14630,13 @@
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
+    "node_modules/tslib": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/tsscmp": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.6.tgz",
@@ -14042,6 +14662,7 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
         "safe-buffer": "^5.0.1"
@@ -14198,23 +14819,24 @@
       }
     },
     "node_modules/unimport": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.9.0.tgz",
-      "integrity": "sha512-H2ftTISja1BonUVdOKRos6HC6dqYDR40dQTZY3zIDJ/5/z4ihncuL0LqLvtxYqUDMib41eAtunQUhXIWTCZ8rA==",
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.12.0.tgz",
+      "integrity": "sha512-5y8dSvNvyevsnw4TBQkIQR1Rjdbb+XjVSwQwxltpnVZrStBvvPkMPcZrh1kg5kY77kpx6+D4Ztd3W6FOBH/y2Q==",
+      "license": "MIT",
       "dependencies": {
-        "@rollup/pluginutils": "^5.1.0",
+        "@rollup/pluginutils": "^5.1.2",
         "acorn": "^8.12.1",
         "escape-string-regexp": "^5.0.0",
         "estree-walker": "^3.0.3",
         "fast-glob": "^3.3.2",
         "local-pkg": "^0.5.0",
-        "magic-string": "^0.30.10",
+        "magic-string": "^0.30.11",
         "mlly": "^1.7.1",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.1.3",
+        "pkg-types": "^1.2.0",
         "scule": "^1.3.0",
         "strip-literal": "^2.1.0",
-        "unplugin": "^1.11.0"
+        "unplugin": "^1.14.1"
       }
     },
     "node_modules/unimport/node_modules/acorn": {
@@ -14305,17 +14927,24 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.12.0.tgz",
-      "integrity": "sha512-KeczzHl2sATPQUx1gzo+EnUkmN4VmGBYRRVOZSGvGITE9rGHRDGqft6ONceP3vgXcyJ2XjX5axG5jMWUwNCYLw==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.14.1.tgz",
+      "integrity": "sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w==",
+      "license": "MIT",
       "dependencies": {
         "acorn": "^8.12.1",
-        "chokidar": "^3.6.0",
-        "webpack-sources": "^3.2.3",
         "webpack-virtual-modules": "^0.6.2"
       },
       "engines": {
         "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "webpack-sources": "^3"
+      },
+      "peerDependenciesMeta": {
+        "webpack-sources": {
+          "optional": true
+        }
       }
     },
     "node_modules/unplugin-vue-router": {
diff --git a/package.json b/package.json
index 55af535..45e86d8 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@artmizu/yandex-metrika-nuxt": "^1.0.4",
     "@monogrid/gainmap-js": "^3.0.5",
+    "@nodetoy/three-nodetoy": "^0.1.36",
     "@nuxt/image": "^1.7.0",
     "@nuxtjs/robots": "^4.0.0",
     "@nuxtjs/sitemap": "^5.3.5",
@@ -20,12 +21,14 @@
     "@tresjs/cientos": "^3.9.0",
     "@tresjs/core": "^4.0.2",
     "@tresjs/nuxt": "^2.1.2",
+    "@tresjs/post-processing": "^0.7.1",
     "consola": "^3.2.3",
     "marked": "^12.0.2",
     "nuxt": "^3.11.2",
     "nuxt-icon": "^0.6.10",
     "nuxt-svgo": "^4.0.1",
     "sass": "^1.77.4",
+    "sharp": "^0.33.5",
     "tailwindcss": "^3.4.3",
     "three": "^0.165.0",
     "vue": "^3.4.27",
diff --git a/pages/calc.vue b/pages/calc.vue
new file mode 100644
index 0000000..15dc9ef
--- /dev/null
+++ b/pages/calc.vue
@@ -0,0 +1,14 @@
+<template>
+    <div class="siteblock siteblock_calc bg-white">
+        <div class="container">
+            <div class="col-span-12 xl:col-span-9 h-full relative">
+                <Suspense>
+                    <LazyCalcModels />
+                </Suspense>
+            </div>
+            <div class="col-span-12 xl:col-span-3">
+                <CalcValues />
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 4dffb05..372cf5e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -107,10 +107,16 @@ const { data: advData } = await apiFetch<ApiAdvantageType[]>(`advantage/`)
                 alt="коричневый забор" title="" format="webp" loading="lazy" />
         </div>
         <div class="siteblock siteblock_calc bg-white">
-            <LazyCalcValues />
-            <Suspense>
-                <LazyCalcModels />
-            </Suspense>
+            <div class="container">
+                <div class="col-span-12 xl:col-span-9 h-full relative">
+                    <Suspense>
+                        <LazyCalcModels />
+                    </Suspense>
+                </div>
+                <div class="col-span-12 xl:col-span-3">
+                    <CalcValues />
+                </div>
+            </div>
         </div>
         <div class="siteblock bg-white siteblock_content" :id="delivery?.slug" v-if="deliveryText">
             <div class="container">
diff --git a/public/models/kosynka.glb b/public/models_exp/kosynka.glb
similarity index 100%
rename from public/models/kosynka.glb
rename to public/models_exp/kosynka.glb
diff --git a/public/models/krepleniye_planok.glb b/public/models_exp/krepleniye_planok.glb
similarity index 100%
rename from public/models/krepleniye_planok.glb
rename to public/models_exp/krepleniye_planok.glb
diff --git a/public/models/osnova_stolba.glb b/public/models_exp/osnova_stolba.glb
similarity index 100%
rename from public/models/osnova_stolba.glb
rename to public/models_exp/osnova_stolba.glb
diff --git a/public/models/planki.glb b/public/models_exp/planki.glb
similarity index 100%
rename from public/models/planki.glb
rename to public/models_exp/planki.glb
diff --git a/public/models/stolb.glb b/public/models_exp/stolb.glb
similarity index 100%
rename from public/models/stolb.glb
rename to public/models_exp/stolb.glb
diff --git a/public/models/verh.glb b/public/models_exp/verh.glb
similarity index 100%
rename from public/models/verh.glb
rename to public/models_exp/verh.glb
diff --git a/public/models_one/fastening/side.glb b/public/models_one/fastening/side.glb
new file mode 100644
index 0000000..8d7fa34
Binary files /dev/null and b/public/models_one/fastening/side.glb differ
diff --git a/public/models_one/fastening/top.glb b/public/models_one/fastening/top.glb
new file mode 100644
index 0000000..3c3af94
Binary files /dev/null and b/public/models_one/fastening/top.glb differ
diff --git a/public/models_one/fence.glb b/public/models_one/fence.glb
deleted file mode 100644
index 15a6ef0..0000000
Binary files a/public/models_one/fence.glb and /dev/null differ
diff --git a/public/models_one/fixing.glb b/public/models_one/fixing.glb
new file mode 100644
index 0000000..d45fe16
Binary files /dev/null and b/public/models_one/fixing.glb differ
diff --git a/public/models_one/krepleniye_planok (1).glb b/public/models_one/krepleniye_planok (1).glb
deleted file mode 100644
index 9982e33..0000000
Binary files a/public/models_one/krepleniye_planok (1).glb and /dev/null differ
diff --git a/public/models_one/pillar/bottom.glb b/public/models_one/pillar/bottom.glb
new file mode 100644
index 0000000..d8253c4
Binary files /dev/null and b/public/models_one/pillar/bottom.glb differ
diff --git a/public/models_one/pillar/brace.glb b/public/models_one/pillar/brace.glb
new file mode 100644
index 0000000..a850340
Binary files /dev/null and b/public/models_one/pillar/brace.glb differ
diff --git a/public/models_one/pillar/center.glb b/public/models_one/pillar/center.glb
new file mode 100644
index 0000000..e9af9f2
Binary files /dev/null and b/public/models_one/pillar/center.glb differ
diff --git a/public/models_one/pillar/inner.glb b/public/models_one/pillar/inner.glb
new file mode 100644
index 0000000..f978295
Binary files /dev/null and b/public/models_one/pillar/inner.glb differ
diff --git a/public/models_one/pillar/topper/decor1.glb b/public/models_one/pillar/topper/decor1.glb
new file mode 100644
index 0000000..4c5c1f9
Binary files /dev/null and b/public/models_one/pillar/topper/decor1.glb differ
diff --git a/public/models_one/pillar/topper/decor2.glb b/public/models_one/pillar/topper/decor2.glb
new file mode 100644
index 0000000..0bcd67e
Binary files /dev/null and b/public/models_one/pillar/topper/decor2.glb differ
diff --git a/public/models_one/pillar/topper/top.glb b/public/models_one/pillar/topper/top.glb
new file mode 100644
index 0000000..0eaabb0
Binary files /dev/null and b/public/models_one/pillar/topper/top.glb differ
diff --git a/public/models_one/top_100.glb b/public/models_one/top_100.glb
new file mode 100644
index 0000000..0c6408b
Binary files /dev/null and b/public/models_one/top_100.glb differ
diff --git a/public/pattern/svg_tile1.svg b/public/pattern/svg_tile1.svg
new file mode 100644
index 0000000..4ce6847
--- /dev/null
+++ b/public/pattern/svg_tile1.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke-width: 0px;
+        color: #000;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path class="cls-1" d="M256,154.83c-2.56,4.22-5.21,8.38-7.97,12.46-24.26,35.89-56.06,66.22-93.21,88.72,4.22,2.56,8.38,5.21,12.46,7.97,35.89,24.26,66.22,56.06,88.72,93.21,2.56-4.22,5.21-8.38,7.97-12.46,24.26-35.89,56.06-66.22,93.21-88.72-4.22-2.56-8.38-5.21-12.46-7.97-35.89-24.26-66.22-56.06-88.72-93.21Z"/>
+      <path class="cls-1" d="M137.02,79.47c-33.99,22.96-61.04,55.55-77.17,93.69-4.62,10.93-8.35,22.31-11.1,34.08,4.92-1.15,9.78-2.46,14.56-3.95,19.96-6.21,38.67-15.28,55.67-26.76,33.99-22.96,61.04-55.55,77.17-93.69,4.62-10.93,8.35-22.31,11.1-34.08-4.92,1.15-9.78,2.46-14.56,3.95-19.96,6.21-38.67,15.28-55.67,26.76Z"/>
+      <path class="cls-1" d="M315.86,429.16c-4.62,10.93-8.35,22.31-11.1,34.08,4.92-1.15,9.78-2.46,14.56-3.95,19.96-6.21,38.67-15.28,55.67-26.76,33.99-22.96,61.04-55.55,77.17-93.69,4.62-10.93,8.35-22.31,11.1-34.08-4.92,1.15-9.78,2.46-14.56,3.95-19.96,6.21-38.67,15.28-55.67,26.76-33.99,22.96-61.04,55.55-77.17,93.69Z"/>
+      <path class="cls-1" d="M432.53,137.02c-22.96-33.99-55.55-61.04-93.69-77.17-10.93-4.62-22.31-8.35-34.08-11.1,1.15,4.92,2.46,9.78,3.95,14.56,6.21,19.96,15.28,38.67,26.76,55.67,22.96,33.99,55.55,61.04,93.69,77.17,10.93,4.62,22.31,8.35,34.08,11.1-1.15-4.92-2.46-9.78-3.95-14.56-6.21-19.96-15.28-38.67-26.76-55.67Z"/>
+      <path class="cls-1" d="M0,410.83c22.5,37.14,52.82,68.95,88.71,93.2,4.08,2.76,8.24,5.41,12.47,7.97H0v-101.17Z"/>
+      <path class="cls-1" d="M410.83,512h101.17v-101.18c-2.56,4.22-5.21,8.38-7.97,12.47-24.25,35.89-56.06,66.21-93.2,88.71Z"/>
+      <path class="cls-1" d="M512,101.17c-22.5-37.14-52.82-68.95-88.71-93.2C419.2,5.21,415.04,2.56,410.82,0h101.18s0,101.17,0,101.17Z"/>
+      <path class="cls-1" d="M101.17,0H0v101.18c2.56-4.22,5.21-8.38,7.97-12.47C32.22,52.82,64.03,22.5,101.17,0Z"/>
+      <path class="cls-1" d="M79.47,374.98c22.96,33.99,55.55,61.04,93.69,77.17,10.93,4.62,22.31,8.35,34.08,11.1-1.15-4.92-2.46-9.78-3.95-14.56-6.21-19.96-15.28-38.67-26.76-55.67-22.96-33.99-55.55-61.04-93.69-77.17-10.93-4.62-22.31-8.35-34.08-11.1,1.15,4.92,2.46,9.78,3.95,14.56,6.21,19.96,15.28,38.67,26.76,55.67Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/public/pattern/tile1.png b/public/pattern/tile1.png
new file mode 100644
index 0000000..ce7ba34
Binary files /dev/null and b/public/pattern/tile1.png differ
diff --git a/public/pattern/tile2.jpg b/public/pattern/tile2.jpg
new file mode 100644
index 0000000..8671d3e
Binary files /dev/null and b/public/pattern/tile2.jpg differ
diff --git a/public/texture/images.jpeg b/public/texture/images.jpeg
new file mode 100644
index 0000000..6bd718f
Binary files /dev/null and b/public/texture/images.jpeg differ
diff --git a/public/texture/normal.jpg b/public/texture/normal.jpg
new file mode 100644
index 0000000..6317861
Binary files /dev/null and b/public/texture/normal.jpg differ
diff --git a/public/texture/test_texture.jpg b/public/texture/test_texture.jpg
new file mode 100644
index 0000000..e6165f7
Binary files /dev/null and b/public/texture/test_texture.jpg differ
diff --git a/public/topper/icon_stolb_verh_1.svg b/public/topper/icon_stolb_verh_1.svg
new file mode 100644
index 0000000..38eb476
--- /dev/null
+++ b/public/topper/icon_stolb_verh_1.svg
@@ -0,0 +1,3 @@
+<svg width="147" height="129" viewBox="0 0 147 129" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.092 0.0210266L73.148 0L126.204 0.0210266L129.064 3.06403L128.838 14.843L146.236 22.519L146.296 37.488L140.375 47.003L132.706 47.026V128.971L73.148 128.983L13.59 128.971V47.026L5.92099 47.003L0 37.488L0.0599976 22.519L17.458 14.843L17.232 3.06403L20.092 0.0210266Z" fill="black"/>
+</svg>
diff --git a/public/topper/icon_stolb_verh_2.svg b/public/topper/icon_stolb_verh_2.svg
new file mode 100644
index 0000000..a07e8f9
--- /dev/null
+++ b/public/topper/icon_stolb_verh_2.svg
@@ -0,0 +1,3 @@
+<svg width="117" height="135" viewBox="0 0 117 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.541 134.891H60.328H64.115H67.902H103.205H116.867V38.407H103.205L67.81 3.65302L64.454 1.259L60.508 0H56.359L52.413 1.259L49.057 3.65302L13.662 38.407H0V134.891H13.662H48.965H52.752H56.541Z" fill="black"/>
+</svg>
diff --git a/public/topper/icon_stolb_verh_3.svg b/public/topper/icon_stolb_verh_3.svg
new file mode 100644
index 0000000..df48c07
--- /dev/null
+++ b/public/topper/icon_stolb_verh_3.svg
@@ -0,0 +1,3 @@
+<svg width="117" height="130" viewBox="0 0 117 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116.868 129.438V0H0V129.438H116.868Z" fill="black"/>
+</svg>
diff --git a/shaders/noise/dith.frag b/shaders/noise/dith.frag
new file mode 100644
index 0000000..3ff65b5
--- /dev/null
+++ b/shaders/noise/dith.frag
@@ -0,0 +1,3 @@
+#include <dithering_fragment>
+
+// gl_FragColor = vec4(normal, 1.0);
\ No newline at end of file
diff --git a/shaders/noise/normal.frag b/shaders/noise/normal.frag
new file mode 100644
index 0000000..387e4f7
--- /dev/null
+++ b/shaders/noise/normal.frag
@@ -0,0 +1,4 @@
+float noise =  pnoise( 1000.0 * vPosition, vec3( 1000.0 ) );
+vec3 modifiedNormal = normal - vec3(noise) * 0.05;
+// modifiedNormal = vec3(noise);
+normal = vec3(modifiedNormal);
diff --git a/shaders/noise/pnoise.glsl b/shaders/noise/pnoise.glsl
new file mode 100644
index 0000000..cdc70be
--- /dev/null
+++ b/shaders/noise/pnoise.glsl
@@ -0,0 +1,171 @@
+//
+// GLSL textureless classic 3D noise "cnoise",
+// with an RSL-style periodic variant "pnoise".
+// Author:  Stefan Gustavson (stefan.gustavson@liu.se)
+// Version: 2011-10-11
+//
+// Many thanks to Ian McEwan of Ashima Arts for the
+// ideas for permutation and gradient selection.
+//
+// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
+// Distributed under the MIT license. See LICENSE file.
+// https://github.com/stegu/webgl-noise
+//
+
+vec3 mod289(vec3 x) {
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 mod289(vec4 x) {
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec4 permute(vec4 x) {
+    return mod289(((x * 34.0) + 10.0) * x);
+}
+
+vec4 taylorInvSqrt(vec4 r) {
+    return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+vec3 fade(vec3 t) {
+    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
+}
+
+// Classic Perlin noise
+float cnoise(vec3 P) {
+    vec3 Pi0 = floor(P); // Integer part for indexing
+    vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
+    Pi0 = mod289(Pi0);
+    Pi1 = mod289(Pi1);
+    vec3 Pf0 = fract(P); // Fractional part for interpolation
+    vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
+    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+    vec4 iy = vec4(Pi0.yy, Pi1.yy);
+    vec4 iz0 = Pi0.zzzz;
+    vec4 iz1 = Pi1.zzzz;
+
+    vec4 ixy = permute(permute(ix) + iy);
+    vec4 ixy0 = permute(ixy + iz0);
+    vec4 ixy1 = permute(ixy + iz1);
+
+    vec4 gx0 = ixy0 * (1.0 / 7.0);
+    vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
+    gx0 = fract(gx0);
+    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+    vec4 sz0 = step(gz0, vec4(0.0));
+    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+    gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+
+    vec4 gx1 = ixy1 * (1.0 / 7.0);
+    vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
+    gx1 = fract(gx1);
+    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+    vec4 sz1 = step(gz1, vec4(0.0));
+    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+    gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+
+    vec3 g000 = vec3(gx0.x, gy0.x, gz0.x);
+    vec3 g100 = vec3(gx0.y, gy0.y, gz0.y);
+    vec3 g010 = vec3(gx0.z, gy0.z, gz0.z);
+    vec3 g110 = vec3(gx0.w, gy0.w, gz0.w);
+    vec3 g001 = vec3(gx1.x, gy1.x, gz1.x);
+    vec3 g101 = vec3(gx1.y, gy1.y, gz1.y);
+    vec3 g011 = vec3(gx1.z, gy1.z, gz1.z);
+    vec3 g111 = vec3(gx1.w, gy1.w, gz1.w);
+
+    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+    g000 *= norm0.x;
+    g010 *= norm0.y;
+    g100 *= norm0.z;
+    g110 *= norm0.w;
+    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+    g001 *= norm1.x;
+    g011 *= norm1.y;
+    g101 *= norm1.z;
+    g111 *= norm1.w;
+
+    float n000 = dot(g000, Pf0);
+    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+    float n111 = dot(g111, Pf1);
+
+    vec3 fade_xyz = fade(Pf0);
+    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
+    return 2.2 * n_xyz;
+}
+
+// Classic Perlin noise, periodic variant
+float pnoise(vec3 P, vec3 rep) {
+    vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
+    vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
+    Pi0 = mod289(Pi0);
+    Pi1 = mod289(Pi1);
+    vec3 Pf0 = fract(P); // Fractional part for interpolation
+    vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
+    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+    vec4 iy = vec4(Pi0.yy, Pi1.yy);
+    vec4 iz0 = Pi0.zzzz;
+    vec4 iz1 = Pi1.zzzz;
+
+    vec4 ixy = permute(permute(ix) + iy);
+    vec4 ixy0 = permute(ixy + iz0);
+    vec4 ixy1 = permute(ixy + iz1);
+
+    vec4 gx0 = ixy0 * (1.0 / 7.0);
+    vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
+    gx0 = fract(gx0);
+    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+    vec4 sz0 = step(gz0, vec4(0.0));
+    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+    gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+
+    vec4 gx1 = ixy1 * (1.0 / 7.0);
+    vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
+    gx1 = fract(gx1);
+    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+    vec4 sz1 = step(gz1, vec4(0.0));
+    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+    gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+
+    vec3 g000 = vec3(gx0.x, gy0.x, gz0.x);
+    vec3 g100 = vec3(gx0.y, gy0.y, gz0.y);
+    vec3 g010 = vec3(gx0.z, gy0.z, gz0.z);
+    vec3 g110 = vec3(gx0.w, gy0.w, gz0.w);
+    vec3 g001 = vec3(gx1.x, gy1.x, gz1.x);
+    vec3 g101 = vec3(gx1.y, gy1.y, gz1.y);
+    vec3 g011 = vec3(gx1.z, gy1.z, gz1.z);
+    vec3 g111 = vec3(gx1.w, gy1.w, gz1.w);
+
+    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+    g000 *= norm0.x;
+    g010 *= norm0.y;
+    g100 *= norm0.z;
+    g110 *= norm0.w;
+    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+    g001 *= norm1.x;
+    g011 *= norm1.y;
+    g101 *= norm1.z;
+    g111 *= norm1.w;
+
+    float n000 = dot(g000, Pf0);
+    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+    float n111 = dot(g111, Pf1);
+
+    vec3 fade_xyz = fade(Pf0);
+    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
+    return 2.2 * n_xyz;
+}
\ No newline at end of file
diff --git a/shaders/noise/vertex.vert b/shaders/noise/vertex.vert
new file mode 100644
index 0000000..24a9304
--- /dev/null
+++ b/shaders/noise/vertex.vert
@@ -0,0 +1,8 @@
+
+vec3 scale;
+scale.x = length(modelMatrix[0].xyz);
+scale.y = length(modelMatrix[1].xyz);
+scale.z = length(modelMatrix[2].xyz);
+
+// Применяем масштаб к позиции вершины
+vPosition = (position.xyz + normal) * scale;
\ No newline at end of file
diff --git a/utils/contrast_color.ts b/utils/contrast_color.ts
new file mode 100644
index 0000000..7093e14
--- /dev/null
+++ b/utils/contrast_color.ts
@@ -0,0 +1,18 @@
+import { Color } from 'three';
+import { type ralTypes } from './../components/ral';
+import { getColorHexFromRal } from "~/components/ral"
+
+export const contrastColor = (color: ralTypes) => {
+    const hex = getColorHexFromRal(color)
+    if (hex) {
+        const hsl = { h: 0, s: 0, l: 0 }
+        new Color(hex).getHSL(hsl)
+        if (hsl.l < 0.45) {
+            return '#fff'
+        } else {
+            return '#000'
+        }
+    } else {
+        return '#000'
+    }
+}
\ No newline at end of file
diff --git a/utils/material.ts b/utils/material.ts
index 2976a67..d49c6c5 100644
--- a/utils/material.ts
+++ b/utils/material.ts
@@ -1,23 +1,115 @@
-import { Color, MeshStandardMaterial } from "three"
+import {
+    Color, DoubleSide,
+    MeshStandardMaterial, RepeatWrapping,
+    Texture, TextureLoader,
+    type WebGLProgramParameters
+} from "three"
+import { useLoader, } from '@tresjs/core'
+import { getFilename, patterns, type patternIds, } from "~/components/pattern"
+
+import vertexShader from '../shaders/noise/vertex.vert?raw'
+import normalShader from '../shaders/noise/normal.frag?raw'
+import dithShader from '../shaders/noise/dith.frag?raw'
+import noiseShader from '../shaders/noise/pnoise.glsl?raw'
 
 const set_metaril_func = (scene: any, material: any) => {
     scene.children.forEach((el: any) => {
-        if (el.isMesh && !el.isInstancedMesh) {
+        if (el.isMesh) {
             el.castShadow = true
             el.receiveShadow = true
         }
-        if (el.material) el.material = material
+        el.material = material
         set_metaril_func(el, material)
     })
 }
-export const set_material = (scene: any, color: any) => {
+
+const loaded_patterns: { [key: string]: any } = {}
+for (let index = 0; index < patterns.length; index++) {
+    const element = patterns[index];
+    const filename = getFilename(element.id)
+    if (filename) {
+        // @ts-ignore
+        loaded_patterns[filename] = useLoader(TextureLoader, filename)
+    }
+}
+Promise.all(Object.keys(loaded_patterns))
+
+const noiseMaterial = new MeshStandardMaterial({
+    // alphaMap: pattern ? texture : null,
+    transparent: true,
+    opacity: 1,
+    roughness: 0.2,
+    metalness: 0,
+    side: DoubleSide,
+})
+
+const m_onBeforeCompile = (shader: WebGLProgramParameters) => {
+    // Изменяем вершинный шейдер
+    shader.vertexShader = `
+        varying vec3 vPosition;
+        ${shader.vertexShader}
+    `.replace(
+        `#include <begin_vertex>`,
+        `#include <begin_vertex>
+        ${vertexShader}
+        `
+    );
+
+    // Изменяем фрагментный шейдер
+    shader.fragmentShader = `
+        varying vec3 vPosition;
+
+        ${noiseShader}
+        ${shader.fragmentShader}`
+        .replace(
+            '#include <normal_fragment_begin>',
+            `#include <normal_fragment_begin>
+            ${normalShader}
+            `
+        )
+        .replace(
+            `#include <dithering_fragment>`,
+            `#include <dithering_fragment>
+
+            ${dithShader}
+        `
+        );
+};
+export const set_material = (
+    scene: any,
+    color: any,
+    pattern: { pattern: patternIds, count: number } | undefined = undefined,
+    noise_material: boolean = false,
+) => {
     let c = color
-    const material = new MeshStandardMaterial({
-        color: new Color(c || '#9c9c00'),
-        transparent: true,
-        opacity: 1,
-        roughness: 0.5,
-        metalness: 0
-    })
-    set_metaril_func(scene, material)
+    const material = noiseMaterial.clone()
+    material.color = new Color(c || '#9c9c00')
+    if (noise_material) {
+        material.onBeforeCompile = m_onBeforeCompile
+    }
+
+    const promises = []
+    if (pattern && pattern.pattern !== undefined) {
+        const filename = getFilename(pattern.pattern)
+        if (filename) {
+            const texture = loaded_patterns[filename]
+            promises.push(texture)
+            texture.then((res: Texture) => {
+                res.wrapT = RepeatWrapping;
+                res.repeat.set(1, pattern.count);
+                res.needsUpdate = true
+                material.alphaMap = res
+                scene.renderOrder = 0
+                return res
+            })
+        }
+    }
+
+    if (scene) set_metaril_func(scene, material)
+    else console.log(scene)
+
+    Promise.all(promises).then((values) => {
+        if (scene) set_metaril_func(scene, material)
+        else console.log(scene)
+    });
 }
\ No newline at end of file