:root {
                --bg: #090414;
                --bg2: #03010a;
                --panel: rgba(255,255,255,.06);
                --line: rgba(255,255,255,.16);
                --text: #ffffff;
                --muted: rgba(255,255,255,.68);
                --accent: #ffffff;
                --shadow: 0 28px 90px rgba(0,0,0,.46);
                --color-bg1: 18, 6, 31;
                --color-bg2: 3, 1, 10;
                --color1: 139, 77, 255;
                --color2: 110, 51, 255;
                --color3: 255, 255, 255;
                --color4: 115, 76, 255;
                --color5: 84, 46, 210;
                --color-montserratactive: 188, 164, 255;
                --circle-size: 80%;
                --blending: hard-light
            }

            * {
                box-sizing: border-box;
                -webkit-tap-highlight-color: transparent
            }

            html,body {
                margin: 0;
                min-height: 100%;
                background: #000;
                color: var(--text);
                font-family: "montserrat",sans-serif
            }

            body {
                overflow-x: hidden
            }

            .bg {
                position: fixed;
                inset: 0;
                z-index: 0;
                pointer-events: none;
                overflow: hidden;
                background: #05070d;
            }

            .bg-grid {
                position: fixed;
                inset: 0;
                z-index: 0;
                pointer-events: none;
                mask-image: radial-gradient(circle at center,black 68%,transparent 100%);
                -webkit-mask-image: radial-gradient(circle at center,black 68%,transparent 100%);
            }

            .bg-grid::before {
                content: "";
                position: absolute;
                inset: 0;
                background: rgba(0,0,0,.5);
            }

            .bg-grid::after {
                content: "";
                position: absolute;
                inset: 0;
                background-image:
                    linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px);
                background-size: 72px 72px;
                background-position: 0 0,0 0;
                opacity: .38;
                filter: url(#grid-warp);
                animation: gridFloat 16s ease-in-out infinite alternate,gridPulse 7s ease-in-out infinite
            }

            .bg svg {
                position: fixed;
                width: 0;
                height: 0
            }

            .gradients-container {
                width: 100%;
                height: 100%;
                filter: url(#goo) blur(40px)
            }

            .g1,.g2,.g3,.g4,.g5,.montserratactive {
                position: absolute;
		
                mix-blend-mode: var(--blending)
            }

            .g1,.g2,.g3,.g4,.g5 {
                width: var(--circle-size);
                height: var(--circle-size);
                top: calc(50% - var(--circle-size) / 2);
                left: calc(50% - var(--circle-size) / 2)
            }

            .g1 {
                background: radial-gradient(circle at center, rgb(79 105 180 / 24%) 0, rgba(var(--color1), 0) 50%) no-repeat;
                transform-origin: center center;
                animation: moveVertical 30s ease infinite
            }

            .g2 {
                background: radial-gradient(circle at center, rgb(79 105 180 / 24%) 0, rgba(var(--color2), 0) 50%) no-repeat;
                transform-origin: calc(50% - 420px);
                animation: moveInCircle 22s reverse infinite
            }

            .g3 {
                background: radial-gradient(circle at center, rgb(79 105 180 / 24%) 0, rgba(var(--color3), 0) 50%) no-repeat;
                top: calc(50% - var(--circle-size) / 2 + 220px);
                left: calc(50% - var(--circle-size) / 2 - 480px);
                transform-origin: calc(50% + 380px);
                animation: moveInCircle 38s linear infinite
            }

            .g4 {
                background: radial-gradient(circle at center, rgb(79 105 180 / 24%) 0, rgba(var(--color4), 0) 50%) no-repeat;
                transform-origin: calc(50% - 220px);
                animation: moveHorizontal 42s ease infinite;
                opacity: .75
            }

            .g5 {
                background: radial-gradient(circle at center, rgb(79 105 180 / 24%) 0, rgba(var(--color5), 0) 50%) no-repeat;
                width: calc(var(--circle-size) * 1.85);
                height: calc(var(--circle-size) * 1.85);
                top: calc(50% - var(--circle-size));
                left: calc(50% - var(--circle-size));
                transform-origin: calc(50% - 760px) calc(50% + 180px);
                animation: moveInCircle 20s ease infinite
            }

            .montserratactive {
                background: radial-gradient(circle at center, rgb(79 105 180 / 24%) 0, rgba(var(--color-montserratactive), 0) 50%) no-repeat;
                width: 100%;
                height: 100%;
                top: -50%;
                left: -50%;
                opacity: .7
            }

            @keyframes moveInCircle {
                0% {
                    transform: rotate(0deg)
                }

                50% {
                    transform: rotate(180deg)
                }

                100% {
                    transform: rotate(360deg)
                }
            }

            @keyframes moveVertical {
                0% {
                    transform: translateY(-50%)
                }

                50% {
                    transform: translateY(50%)
                }

                100% {
                    transform: translateY(-50%)
                }
            }

            @keyframes moveHorizontal {
                0% {
                    transform: translateX(-50%) translateY(-10%)
                }

                50% {
                    transform: translateX(50%) translateY(10%)
                }

                100% {
                    transform: translateX(-50%) translateY(-10%)
                }
            }

            @keyframes gridFloat {
                0% {
                    background-position: 0 0,0 0
                }

                100% {
                    background-position: 42px 20px,-42px -20px
                }
            }

            @keyframes gridPulse {
                0%,100% {
                    opacity: .2
                }

                50% {
                    opacity: .3
                }
            }

            .page {
                position: relative;
                z-index: 1;
                width: min(100%,1568px);
                margin: 0 auto;
                padding: 22px 24px 32px
            }

            .header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
                margin-bottom: 18px
            }

            .actions {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                justify-content: flex-end
            }

            .btn,.btn-ghost,.pill,.style-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                text-decoration: none;
                cursor: pointer;
                border: 0;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: inherit;
                line-height: inherit;
                font-weight: 600;
                transition: .18s ease transform,.18s ease background,.18s ease border-color;
            }

            .btn i,.btn-ghost i,.pill i,.chip i,.badge i,.hint i,.style-label i,.style-btn i,.close i,.kicker i,.ready-head i,.progress-head i {
                font-size: .95em
            }

            .actions .btn-ghost:before,.actions .btn:before {
                font: var(--fa-font-solid);
                font-size: .95em
            }

            .actions .btn-ghost:before {
                content: "\f234"
            }

            .actions .btn:before {
                content: "\f2f6"
            }

            .btn:hover,.btn-ghost:hover,.style-btn:hover {
                transform: translateY(-1px)
            }

            .pill {
                font-family: "Montserrat","montserrat",sans-serif;
                padding: 11px 14px;
                font-size: 13px;
                color: var(--muted)
            }

            .btn,.btn-ghost {
                min-height: 44px;
                padding: 0 18px;
                border-radius: 15px;
                font-size: 14px
            }

            .btn {
                background: var(--accent);
                color: #000;
                box-shadow: 0 18px 42px rgba(255,255,255,.14);
		color: #ffffff;
    		box-shadow: 0 18px 42px rgba(255, 255, 255, .14);
   		background: linear-gradient(135deg, #4d8dff, #2563ff);
            }

            .btn-ghost {
                background: rgba(255,255,255,.04);
                color: var(--text);
                border: 1px solid rgba(255,255,255,.08)
            }

            .hero {
                display: grid;
                grid-template-columns: minmax(0,1.03fr) minmax(420px,.97fr);
                gap: 18px
            }

            .left,.right {
                display: grid;
                gap: 18px
            }

            .left {
                grid-template-rows: auto 1fr
            }

            .panel {
                border: 1px solid rgb(119 140 198 / 20%);
                border-radius: 30px;
                background: linear-gradient(180deg, #282b317a, #282b317a);
                backdrop-filter: blur(22px);
                box-shadow: var(--shadow);
                overflow: hidden
            }

            .hero-copy {
                display: grid;
                gap: 18px;
                padding: 35px 10px 6px 4px;
                background: none;
                border: 0;
                box-shadow: none;
                backdrop-filter: none;
                overflow: visible
            }

            .hero-copy:before {
                content: "";
                position: absolute;
                left: -7%;
                bottom: -10%;
                border-radius: 50%;

            }

            .site-pill {
                position: relative;
                display: inline-flex;
                align-items: center;
                gap: 14px;
                padding: 12px 20px;
                border-radius: 18px;
                background: rgba(255,255,255,.04);
                border: 1px solid rgba(255,255,255,.08);
                color: var(--text);
                margin-bottom: 0;
                box-shadow: 0 18px 45px rgba(0,0,0,.22);
            }

            .hero-copy>.site-pill {
                display: inline-flex
            }

            .site-pill-mark {
                position: relative;
                width: 150px;
                height: 57px;
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                overflow: visible
            }

            .site-pill img {
                position: absolute;
                left: 0;
                top: 50%;
                width: 150px;
                height: 81px;
                transform: translateY(-50%);
                object-fit: contain;
                display: block
            }

            .site-pill-copy {
                display: grid;
                gap: 4px
            }

            .site-pill-copy strong {
                font-family: "Unbounded","Manrope","montserrat",sans-serif;
                font-size: 14px;
                font-weight: 600;
                letter-spacing: -.03em;
                line-height: 1
            }

            .site-pill-copy span {
                font-size: 13px;
                line-height: 1.35;
                color: var(--muted)
            }

            .hero-title {
                position: relative;
                margin: 0;
                font-family: "Unbounded","Manrope","montserrat",sans-serif;
                font-size: 36px;
                line-height: .92;
                text-transform: uppercase;
		color: #3a79ff;
            }

            .hero-title .accent {
                color: var(--accent)
            }

            .hero-copy .site-pill {
                width: fit-content
            }

            .hero-copy .site-pill-copy strong {
                font-size: 15px
            }

            .hero-copy .site-pill-copy span {
                font-size: 14px
            }

            .hero-desc {
                position: relative;
                margin: 0;
                color: var(--muted);
                font-size: 15px;
                line-height: 1.6
            }

            .chips {
                position: relative;
                display: flex;
                gap: 10px;
                flex-wrap: wrap
            }

.phone {
  transform: rotate(3deg) translateZ(0);
  transform-origin: center center;
  border-radius: 34px;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.35s ease;
}

.phone:hover {
  transform: rotate(0deg) scale(1.2) translateZ(0);
}

.phone *,
.phone *::before,
.phone *::after {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

            .chip {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 11px 14px;
                border-radius: 999px;
                background: rgba(255,255,255,.04);
                border: 1px solid rgba(255,255,255,.08);
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 13px
            }

            .hero-note {
                position: relative;
                margin-top: 2px;
                font-size: 13px;
                line-height: 1.55;
                color: rgba(245,247,241,.75);
                max-width: 48ch
            }

            .hero-note strong {
                color: var(--accent)
            }

            .upload {
                padding: 34px 36px;
                display: grid;
                grid-template-columns: 1fr;
                gap: 22px;
                align-items: start;
                min-height: 100%
            }

            .upload-intro {
                max-width: 640px
            }

            .upload>div:first-child {
                max-width: 640px
            }

            .kicker {
                color: #4099ff;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 12px;
                font-weight: 900;
                text-transform: uppercase;
                letter-spacing: .18em;
                margin-bottom: 10px
            }

            .upload h2,.demo h2,.modal h3 {
                margin: 0;
                font-family: "Unbounded","Manrope","montserrat",sans-serif;
                font-size: 24px;
                line-height: .94;
                text-transform: uppercase
            }

            .upload p,.demo p,.modal p,.note,.progress-note,.ready-text {
                font-family: "Montserrat","montserrat",sans-serif;
                color: var(--muted);
                font-size: 15px;
                line-height: 1.55
            }

            .controls {
                display: grid;
                gap: 12px
            }

            #fileInput {
                display: none
            }

            .picker {
                position: relative;
                min-height: 320px;
                padding: 26px;
                border-radius: 28px;
                border: 3px dashed rgba(255,255,255,.16);
                background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
                color: rgba(255,255,255,.12);
                font-size: 20px;
                font-weight: 900;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 12px;
                overflow: hidden;
                text-align: center;
                letter-spacing: -.03em;
                cursor: pointer;
                transition: border-color .2s ease,box-shadow .2s ease,background .2s ease
            }

            .picker:before {
                content: "\f03e";
                position: absolute;
                inset: 0;
                display: grid;
                place-items: center;
                font: var(--fa-font-solid);
                font-size: 220px;
                color: rgba(255,255,255,.08);
                transform: translateY(-8px);
                pointer-events: none;
            }

            .picker:after {
                content: "\f07b  Выбрать изображение\AЗагрузите фото человека, чтобы перейти к выбору стиля и следующему шагу сценария.";
                position: relative;
                z-index: 2;
                display: block;
                white-space: pre-line;
                font-family: "montserrat",sans-serif;
                font-size: 14px;
                line-height: 1.5;
                font-weight: 600;
                color: var(--muted);
                max-width: 280px;
                text-align: left
            }

            .picker {
                box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
            }

            .picker:hover {
                border-color: rgba(255,255,255,.26);
                background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
                box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 0 28px rgba(255,255,255,.08)
            }

            .picker-cta {
                position: relative;
                z-index: 2;
                display: inline-flex;
                align-items: center;
                gap: 12px;
                padding: 14px 18px;
                border-radius: 18px;
                background: rgb(107 107 107 / 38%);
                border: 1px solid rgba(255,255,255,.08);
                backdrop-filter: blur(10px);
                color: rgba(255,255,255,.3);
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 15px;
                font-weight: 600;
                transition: transform .2s ease,color .2s ease,background .2s ease,border-color .2s ease
            }

            .picker:hover .picker-cta {
                transform: translateY(-1px);
                color: rgba(255,255,255,.55);
                background: rgba(255,255,255,.08);
                border-color: rgba(255,255,255,.14)
            }

            .picker-cta i {
                font-size: 20px;
                color: inherit
            }

            .picker::selection {
                background: transparent
            }

            .picker:after {
                content: ""!important;
                display: none!important
            }

            .picker-wrap {
                position: relative
            }

            .picker-wrap:before {
                content: "";
                position: absolute;
                left: -8%;
                bottom: -12%;
                width: 220px;
                height: 220px;
                border-radius: 50%;
                background: radial-gradient(circle,rgba(255,255,255,.12),transparent 68%);
                filter: blur(8px);
                pointer-events: none
            }

            .meta,.progress,.ready {
                display: none;
                border-radius: 18px;
                padding: 15px 16px;
                border: 1px solid rgba(255,255,255,.08);
                background: rgba(255,255,255,.04)
            }

            .meta.active,.progress.active,.ready.active {
                display: block
            }

            .file-row {
                display: flex;
                align-items: center;
                gap: 12px;
                min-width: 0
            }

            .thumb {
                width: 54px;
                height: 54px;
                border-radius: 14px;
                border: 1px solid rgba(255,255,255,.08);
                object-fit: cover;
                background: #11140b;
                flex: 0 0 auto
            }

            .file-name {
                font-size: 14px;
                font-weight: 800;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 300px
            }

            .file-size {
                margin-top: 4px;
                font-size: 12px;
                color: var(--muted)
            }

            .flow {
                display: grid;
                grid-template-columns: repeat(3,minmax(0,1fr));
                gap: 10px
            }

            .step {
                min-height: 60px;
                border-radius: 16px;
                border: 1px solid rgba(255,255,255,.08);
                background: rgba(255,255,255,.03);
                padding: 12px 14px;
                display: grid;
                gap: 5px;
                align-content: center
            }

            .step span {
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: .12em;
                color: var(--muted)
            }

            .step strong {
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 14px;
                line-height: 1.35
            }

            .progress-head,.ready-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                margin-bottom: 10px;
                font-size: 14px;
		olor: #80ff5b;
		font-family: "montserrat", sans-serif;
                font-weight: 700
            }

            .ready-head>div:first-child {
                letter-spacing: -.025em
		color: #46ed31;
            }

            .percent {
                color: var(--accent)
            }

            .track {
                height: 10px;
                border-radius: 999px;
                background: rgba(255,255,255,.08);
                overflow: hidden;
                margin-bottom: 10px
            }

            .fill {
                width: 0;
                height: 100%;
                border-radius: inherit;
                background: linear-gradient(90deg,#ffffff,#d7d7d7);
                box-shadow: 0 0 24px rgba(255,255,255,.18);
                transition: width .16s linear
            }

            .ready-actions {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                margin-top: 12px
            }

            .demo {
                padding: 34px 36px;
                display: grid;
                grid-template-rows: auto 1fr auto;
                gap: 12px
            }

            .demo-top {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 12px
            }

            .badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 10px 12px;
                border-radius: 14px;
                border: 1px solid rgba(255,255,255,.08);
                background: rgba(255,255,255,.04);
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 13px;
                color: var(--muted);
                white-space: nowrap
            }

            .scene {
                display: grid;
                place-items: center;
                border-radius: 24px;
                /* overflow: hidden; */
                position: relative;
                /* background: radial-gradient(circle at 50% 30%,rgba(255,255,255,.03),transparent 50%),linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0)); */
                /* padding: 4px 0; */
            }


            .scene:before {
                content: "";
                position: absolute;
                left: 50%;
                bottom: 14px;
                width: 64%;
                height: 14%;
                transform: translateX(-50%);
                background: radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);
                filter: blur(18px)
            }

            .phone {
                position: relative;
                width: min(100%,410px);
                aspect-ratio: .76;
                border-radius: 34px;
                padding: 14px;
                background: #ffffff;
                box-shadow: 0 28px 90px rgba(0,0,0,.5)
            }

            .screen {
                position: relative;
                width: 100%;
                height: 100%;
                border-radius: 26px;
                overflow: hidden;
                border: 1px solid rgba(255,255,255,.32);
                background: #090b07
            }

            .viewer {
                position: absolute;
                inset: 0;
                user-select: none;
                touch-action: none;
                cursor: ew-resize;
                overflow: hidden;
                --cut: 48%;
                --handle: 48%;
            }

            .viewer.is-dragging {
                cursor: grabbing;
            }

            .layer {
                position: absolute;
                inset: 0;
                overflow: hidden;
            }

            .fill-video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                background: #090b07;
                pointer-events: none;
            }

            .after {
                z-index: 1;
            }

            .before {
                z-index: 2;
                clip-path: inset(0 calc(100% - var(--cut)) 0 0);
                will-change: clip-path;
            }

            .grid {
                position: absolute;
                z-index: 3;
                inset: 0 calc(100% - var(--cut)) 0 0;
                background: linear-gradient(rgba(255,255,255,.52) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.52) 1px,transparent 1px);
                background-size: 48px 48px;
                opacity: .22;
                pointer-events: none;
                will-change: inset;
            }

            .divider {
                position: absolute;
                z-index: 4;
                top: 0;
                bottom: 0;
                left: var(--handle);
                width: 2px;
                transform: translateX(-50%);
                background: rgba(255,255,255,.92);
                box-shadow: 0 0 28px rgba(255,255,255,.22);
                pointer-events: none;
                will-change: left;
            }

            .handle {
                position: absolute;
                z-index: 5;
                left: var(--handle);
                top: 50%;
                width: 58px;
                height: 58px;
                transform: translate(-50%,-50%);
                border-radius: 50%;
                background: rgba(255,255,255,.16);
                border: 1px solid rgba(255,255,255,.3);
                backdrop-filter: blur(14px);
                display: grid;
                place-items: center;
                pointer-events: none;
                overflow: hidden;
                will-change: left;
            }

            .handle img,
            .video-hint img {
                pointer-events: none;
                user-select: none;
                -webkit-user-drag: none;
            }

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

.labels {
                position: absolute;
                left: 14px;
                right: 14px;
                top: 14px;
                display: flex;
                justify-content: space-between;
                gap: 12px;
                pointer-events: none
            }

            .tag {
                padding: 9px 12px;
                border-radius: 999px;
                background: rgba(255,255,255,.16);
                border: 1px solid rgba(255,255,255,.12);
                backdrop-filter: blur(12px);
                font-size: 12px;
                font-weight: 600;
            }

            .video-hint {
                position: absolute;
                left: 50%;
                bottom: 14px;
                transform: translateX(-50%);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 12px;
                width: min(92%,460px);
                max-width: 460px;
                padding: 10px 14px;
                border-radius: 16px;
                background: rgba(255,255,255,.16);
                border: 1px solid rgba(255,255,255,.12);
                backdrop-filter: blur(12px);
                color: #f3f5ef;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 13px;
                font-weight: 500;
                line-height: 1.35;
                text-align: center;
                z-index: 2;
                pointer-events: none
            }

            .video-hint img {
                width: 35px;
                height: 35px;
                object-fit: contain;
                display: block;
                flex: 0 0 auto
            }

            .video-hint span {
                display: block
            }

            .video-hint-copy {
                display: grid;
                gap: 2px
            }

            .video-hint-copy span {
                white-space: nowrap
            }

            .footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                flex-wrap: wrap
            }

            .demo-cta {
                margin-top: 14px;
                display: grid;
                gap: 12px;
                justify-items: center;
                text-align: center
            }

            .demo-cta-copy {
                max-width: 34ch;
                color: var(--muted);
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 14px;
                line-height: 1.6
            }

            .hint {
                display: none
            }

            .footer .btn-ghost {
                display: none
            }

            .hint strong {
                color: var(--text)
            }

            .backdrop {
                position: fixed;
                inset: 0;
                z-index: 30;
                display: none;
                align-items: center;
                justify-content: center;
                padding: 18px;
                background: rgba(2,2,1,.76);
                backdrop-filter: blur(10px)
            }

            .backdrop.open {
                display: flex
            }

            .modal {
                width: min(100%,1200px);
                max-height: min(92vh,980px);
                overflow: auto;
                border-radius: 30px;
                border: 1px solid rgba(255,255,255,.08);
                background:
                    radial-gradient(circle at 16% 0%, rgba(255,255,255,.08), transparent 24%),
                    radial-gradient(circle at 70% 60%, rgba(121,83,255,.18), transparent 30%),
                    linear-gradient(180deg,rgba(18,12,33,.97),rgba(9,7,18,.96));
                box-shadow: var(--shadow);
                padding: 28px
            }

            .modal-top,.modal-bottom {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 16px
            }

            .modal-copy {
                display: grid;
                gap: 12px;
                max-width: 68ch
            }

            .modal-kicker {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                width: fit-content;
                min-height: 34px;
                padding: 0 12px;
                border-radius: 999px;
                background: rgba(255,255,255,.06);
                border: 1px solid rgba(255,255,255,.08);
                color: rgba(255,255,255,.88);
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 12px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .12em
            }

            .close {
                background: rgba(255,255,255,.04);
                color: var(--text);
                border: 1px solid rgba(255,255,255,.08);
                min-height: 46px;
                padding: 0 14px;
                border-radius: 14px;
                cursor: pointer;
                font: inherit;
                font-weight: 800
            }

            .styles {
                display: grid;
                grid-template-columns: repeat(3,minmax(0,1fr));
                gap: 16px;
                margin-top: 22px
            }

            .style {
                border-radius: 24px;
                border: 1px solid rgba(255,255,255,.08);
                background: linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));
                overflow: hidden;
                min-height: 250px;
                display: grid;
                grid-template-rows: 188px auto;
                backdrop-filter: blur(16px)
            }

            .style-preview {
                position: relative;
                background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
                overflow: hidden
            }

            .style-face {
                position: absolute;
                left: 16px;
                top: 14px;
                z-index: 2;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 52px;
                height: 34px;
                padding: 0 12px;
                border-radius: 999px;
                background: rgba(10,10,12,.42);
                border: 1px solid rgba(255,255,255,.12);
                backdrop-filter: blur(10px);
                color: #fff;
                font-family: "Unbounded","montserrat",sans-serif;
                font-size: 13px;
                font-weight: 700
            }

            .style-preview video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                filter: saturate(.96) contrast(1.02) brightness(.95)
            }

            .style-preview:after {
                content: "";
                position: absolute;
                inset: auto 0 0 0;
                height: 58%;
                background: linear-gradient(180deg,transparent,rgba(11,11,14,.78));
                pointer-events: none
            }

            .style-video-badge {
                position: absolute;
                right: 14px;
                top: 14px;
                z-index: 2;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                min-height: 34px;
                padding: 0 12px;
                border-radius: 999px;
                background: rgba(10,10,12,.42);
                border: 1px solid rgba(255,255,255,.12);
                backdrop-filter: blur(10px);
                color: rgba(255,255,255,.92);
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 12px;
                font-weight: 700
            }

            .style-preview-copy {
                position: absolute;
                left: 16px;
                right: 16px;
                bottom: 16px;
                z-index: 2;
                display: grid;
                gap: 6px
            }

            .style-preview-title {
                font-family: "Unbounded","montserrat",sans-serif;
                font-size: 16px;
                line-height: 1.05;
                letter-spacing: -.03em
            }

            .style-preview-note {
                color: rgba(255,255,255,.72);
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 12px;
                line-height: 1.45
            }

            .style-body {
                padding: 16px;
                display: grid;
                gap: 12px
            }

            .style-label {
                display: inline-flex;
                width: fit-content;
                padding: 7px 10px;
                border-radius: 999px;
                background: rgba(255,255,255,.12);
                color: #ffffff;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 12px;
                font-weight: 900;
                text-transform: uppercase
            }

            .style-title {
                font-family: "Unbounded","Manrope","montserrat",sans-serif;
                font-size: 19px;
                font-weight: 900;
                line-height: 1.1;
                letter-spacing: -.03em
            }

            .style-sub {
                font-family: "Montserrat","montserrat",sans-serif;
                color: var(--muted);
                font-size: 13px;
                line-height: 1.5;
                min-height: 40px
            }

            .style-btn {
                min-height: 46px;
                padding: 0 14px;
                border-radius: 14px;
                background: var(--accent);
                color: #000;
                box-shadow: 0 16px 30px rgba(255,255,255,.14);
                font-size: 14px
            }

            .status {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                color: #ffffff;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 13px;
                font-weight: 800
            }

            .status:before {
                content: "";
                width: 9px;
                height: 9px;
                border-radius: 50%;
                background: var(--accent);
                box-shadow: 0 0 18px rgba(255,255,255,.35)
            }

            .modal-bottom {
                margin-top: 18px;
                padding-top: 18px;
                border-top: 1px solid rgba(255,255,255,.08)
            }

            .auth-modal {
                position: relative;
                width: min(100%, 920px);
                border-radius: 30px;
                border: 1px solid rgba(255,255,255,.55);
                background: #fff;
                box-shadow: 0 30px 90px rgba(0,0,0,.28);
                padding: 42px 70px 46px
            }

            .auth-top {
                text-align: center
            }

            .auth-top .close {
                position: absolute;
                top: 24px;
                right: 28px;
                min-height: 48px;
                min-width: 48px;
                padding: 0;
                border: none;
                background: transparent;
                color: rgba(0,0,0,.34);
                font-size: 42px;
                font-weight: 300;
                box-shadow: none
            }

            .auth-top .close:hover {
                color: rgba(0,0,0,.56)
            }

            .auth-top > div:first-child {
                display: none
            }

            .auth-copy-wrap {
                text-align: center
            }

            .auth-title {
                margin: 0;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: clamp(42px, 4.2vw, 72px);
                font-weight: 800;
                line-height: 1.02;
                letter-spacing: -.045em;
                color: #050505
            }

            .auth-copy {
                margin: 28px auto 0;
                max-width: 21ch;
                color: rgba(0,0,0,.34);
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 17px;
                font-weight: 500;
                line-height: 1.45
            }

            .auth-providers {
                display: grid;
                gap: 16px;
                margin: 46px auto 0;
                max-width: 700px
            }

            .auth-provider,
            .auth-provider-telegram {
                min-height: 82px;
                padding: 0 30px;
                border-radius: 22px;
                border: 1px solid #f0f0f0;
                background: #f6f6f6;
                color: #111218;
                text-decoration: none;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 14px;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 18px;
                font-weight: 700;
                transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease
            }

            .auth-provider:hover,
            .auth-provider-telegram:hover {
                transform: translateY(-1px);
                background: #f1f1f1;
                border-color: #e9e9e9
            }

            .auth-provider-main,
            .auth-providers > a.auth-provider.auth-provider-main {
                background: #f6f6f6;
                border-color: #f0f0f0;
                box-shadow: none
            }

            #authContinueDemoBtn.auth-provider {
                justify-content: center;
                background: linear-gradient(180deg, #2f7cff, #1d68e8);
                border-color: rgba(38,110,235,.95);
                color: #fff;
                box-shadow: 0 14px 32px rgba(31,98,226,.24)
            }

            #authContinueDemoBtn.auth-provider:hover {
                background: linear-gradient(180deg, #3985ff, #256fee);
                box-shadow: 0 16px 34px rgba(31,98,226,.28)
            }

            .auth-provider-copy {
                display: grid;
                grid-template-columns: 40px 1fr;
                align-items: center;
                gap: 18px;
                width: 100%
            }

            .auth-provider-icon {
                width: 40px;
                height: 40px;
                border-radius: 12px;
                background: #fff;
                color: #111;
                display: grid;
                place-items: center;
                font-size: 20px;
                flex: 0 0 auto
            }

            #authContinueDemoBtn.auth-provider .auth-provider-icon {
                background: rgba(255,255,255,.16);
                color: #fff
            }

            .auth-provider-meta {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                width: 100%
            }

            .auth-provider-meta strong {
                font-size: 18px;
                line-height: 1.2
            }
.auth-provider-meta span,
            .auth-provider-arrow {
                display: none
            }

            .auth-provider-disabled {
                opacity: .52;
                cursor: not-allowed;
                pointer-events: none
            }

            .auth-provider-locked {
                opacity: .46;
                filter: grayscale(.08)
            }

            .auth-provider-telegram {
                padding: 8px 14px;
                overflow: hidden;
                background: #f6f6f6
            }

            .auth-provider-telegram script + iframe {
                width: 100% !important;
                min-width: 100% !important
            }
.auth-turnstile {
                margin: 0 auto 22px;
                display: grid;
                justify-content: center;
                gap: 10px
            }

            .auth-turnstile-copy {
                color: rgba(0,0,0,.46);
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 13px;
                line-height: 1.4;
                text-align: center
            }

            .auth-error {
                margin: 0 auto 18px;
                max-width: 760px;
                padding: 14px 18px;
                border: 1px solid rgba(214,84,84,.18);
                border-radius: 22px;
                background: rgba(214,84,84,.08);
                color: #7a2020;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 13px;
                font-weight: 600;
                line-height: 1.45;
                text-align: center;
            }

            .auth-consent {
                margin: 18px auto 0;
                max-width: 760px;
                display: flex;
                gap: 12px;
                align-items: flex-start;
                color: rgba(0,0,0,.5);
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 13px;
                line-height: 1.55
            }

            .auth-consent input {
                width: 18px;
                height: 18px;
                margin-top: 2px;
                accent-color: #1d68e8;
                flex: 0 0 auto
            }

            .auth-consent a {
                color: #a2a2a2;
                text-decoration: underline
            }

            @media (max-width: 900px) {
                .auth-modal {
                    width: min(100%, 92vw);
                    padding: 26px 18px 22px
                }

                .auth-top .close {
                    top: 10px;
                    right: 12px;
                    font-size: 34px
                }

                .auth-title {
                    font-size: clamp(30px, 9vw, 52px)
                }

                .auth-copy {
                    margin-top: 18px;
                    font-size: 15px
                }

                .auth-providers {
                    margin-top: 28px;
                    max-width: none
                }

                .auth-provider,
                .auth-provider-telegram {
                    min-height: 70px;
                    padding: 0 18px;
                    border-radius: 18px
                }

                .auth-provider-copy {
                    grid-template-columns: 34px 1fr;
                    gap: 14px
                }

                .auth-provider-icon {
                    width: 34px;
                    height: 34px;
			color: #f31937;
                    font-size: 18px
                }

                .auth-provider[href="/auth/vk/start"] strong::after,
                .auth-provider[href="/auth/yandex/start"] strong::after,
                .auth-provider-disabled strong::after,
                #authContinueDemoBtn strong::after {
                    font-size: 16px
                }
            }

            .auth-modal {
                width: 100%;
                max-width: 520px;
                background: #fff;
                border-radius: 24px;
                padding: 33px 29px 27px;
                box-shadow: 0 18px 60px rgba(0,0,0,.16);
                border: 0
            }

            .auth-top {
                text-align: center
            }

            .auth-top .close {
                position: absolute;
                top: 14px;
                right: 14px;
                width: 34px;
                height: 34px;
                min-width: 34px;
                min-height: 34px;
                padding: 0;
                border: 0;
                background: transparent;
                border-radius: 50%;
                box-shadow: none;
                cursor: pointer;
                color: transparent;
                font-size: 0
            }

            .auth-top .close::before,
            .auth-top .close::after {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                width: 18px;
                height: 2px;
                background: #a4a4a4;
                border-radius: 10px
            }

            .auth-top .close::before {
                transform: translate(-50%,-50%) rotate(45deg)
            }

            .auth-top .close::after {
                transform: translate(-50%,-50%) rotate(-45deg)
            }

            .auth-copy-wrap {
                text-align: center
            }

            .auth-title {
                margin: 0 0 12px;
                text-align: center;
                font-family: "Montserrat",sans-serif;
                font-size: 28px;
                line-height: 1.1;
                font-weight: 700;
                color: #111
            }

            .auth-copy {
                max-width: 360px;
                margin: 0 auto 22px;
                text-align: center;
                font-family: "montserrat",sans-serif;
                font-size: 16px;
                line-height: 1.4;
                color: #9a9a9a;
                font-weight: 500
            }

            .auth-providers {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin: 0
            }

            .auth-provider,
            .auth-provider-telegram {
                display: flex;
                align-items: center;
                gap: 14px;
                width: 100%;
                min-height: 58px;
                padding: 0 18px;
                border-radius: 16px;
                text-decoration: none;
                border: 0;
                background: #f5f5f5;
                color: #202020;
                transition: background .2s ease, transform .2s ease;
                font-family: "montserrat",sans-serif
            }

            .auth-provider:hover,
            .auth-provider-telegram:hover {
                background: #eee;
                transform: translateY(-1px)
            }

            .auth-provider-copy {
                display: flex;
                align-items: center;
                gap: 14px;
                width: 100%
            }

            .auth-provider-icon {
                width: 24px;
                flex: 0 0 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 22px;
                background: transparent;
                height: auto;
		color: #f31937;
                border-radius: 0
            }

            .auth-provider-meta {
                flex: 1;
                text-align: center;
                display: block;
                width: auto
            }

            .auth-provider-meta strong {
                display: block;
                font-size: 16px;
                font-weight: 600;
                line-height: 1.2;
                color: #202020;
                transform: translateX(-12px)
            }

            .auth-provider-meta span,
            .auth-provider-arrow {
                display: none
            }

            .auth-provider[href="/auth/vk/start"] .auth-provider-icon {
                color: #2787f5
            }

            .auth-provider[href="/auth/yandex/start"] .auth-provider-icon {
                color: #ff4438;
                font-weight: 700;
                font-size: 24px
            }

            .auth-provider-telegram {
                padding: 0 10px;
                justify-content: center;
                background: linear-gradient(180deg,#1f73ff,#1465ec);
                color: #fff;
                overflow: hidden
            }

            .auth-provider-telegram:hover {
                background: linear-gradient(180deg,#2a7cff,#1a6ef4)
            }

            .auth-provider-telegram script + iframe {
                width: 100%!important;
                min-width: 100%!important;
                min-height: 58px!important
            }

            .auth-provider-locked {
                opacity: .5;
                filter: grayscale(.08)
            }

            .auth-social-block.hidden {
                display: none
            }

            .auth-panel-compact {
                display: grid;
                gap: 12px
            }

            .auth-email-trigger {
                min-height: 58px;
                border: 0;
                border-radius: 15px;
                background: linear-gradient(180deg, #1f73ff, #1465ec);
                color: #fff;
                font-family: "montserrat", sans-serif;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
                transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
		z-index: 5;
                box-shadow: 0 18px 32px rgba(31,98,226,.22)
            }

            .auth-email-trigger:hover {
                transform: translateY(-1px)
            }

            .auth-email-panel {
                display: none
            }

            .auth-email-panel.active {
                display: block
            }

            .auth-email-back {
                padding: 0;
                border: 0;
                background: transparent;
                color: rgba(0,0,0,.48);
                font-family: "montserrat", sans-serif;
                font-size: 13px;
                font-weight: 600;
                text-align: left;
                cursor: pointer
            }

            .auth-turnstile {
                margin: 14px 0 14px 0px;
                display: grid;
                justify-content: center;
                gap: 8px
            }

            .auth-turnstile-copy {
                color: #989898;
                font-family: "montserrat",sans-serif;
                font-size: 12px;
                line-height: 1.35;
                text-align: center
            }

            .auth-error {
                margin: 0 0 14px;
                max-width: none;
                padding: 12px 14px;
                border-radius: 14px;
                border: 1px solid rgba(214,84,84,.18);
                background: rgba(214,84,84,.08);
                color: #9f2b2b;
                font-family: "montserrat",sans-serif;
                font-size: 13px;
                font-weight: 600;
                line-height: 1.4;
                text-align: center
            }

.auth-consent {
    margin: 16px 0 0;
    max-width: none;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #5e5c5c;
    font-family: "montserrat", sans-serif;
    font-size: 12px;
    line-height: 1.4;
}

            .auth-consent input {
                width: 16px;
                height: 16px;
                margin-top: 2px;
                accent-color: #1465ec;
                flex: 0 0 auto
            }

            .auth-consent a {
                color: #666;
                text-decoration: underline
            }
@media (max-width: 480px) {
                .auth-modal {
                    max-width: 100%;
                    border-radius: 20px;
                    padding: 20px 16px 16px
                }

                .auth-title {
                    font-size: 26px;
                    padding-right: 24px;
                    padding-left: 24px
                }

                .auth-copy {
                    font-size: 14px;
                    margin-bottom: 14px
                }

                .auth-switch {
                    margin-bottom: 14px
                }

                .auth-provider,
                .auth-provider-telegram,
                .auth-email-trigger {
                    min-height: 52px;
                    padding: 0 14px;
                    border-radius: 14px
                }

                .auth-provider-icon {
                    width: 22px;
                    flex-basis: 22px;
                    font-size: 20px
                }

                .auth-provider-meta strong {
                    font-size: 16px;
                    transform: translateX(-10px)
                }

                .auth-consent {
                    font-size: 13px
                }

                .auth-turnstile {
                    margin: 0 0 12px
                }

                .auth-panel {
                    margin-bottom: 14px
                }

                .auth-field input {
                    min-height: 52px
                }
            }

            .auth-provider strong {
                font-size: 15px !important;
                line-height: 1.2 !important;
            }

            .auth-provider strong::after {
                content: none !important;
            }

            .auth-note {
                display: none !important;
            }

            .auth-switch {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                margin: 0 auto 18px;
                max-width: 760px;
            }

            .auth-switch-btn {
                min-height: 48px;
                border: 0;
                border-radius: 14px;
                background: #f5f5f5;
                color: #8f8f98;
                font-family: "montserrat", sans-serif;
                font-size: 15px;
                font-weight: 600;
                cursor: pointer;
                transition: background .2s ease, color .2s ease, transform .2s ease;
            }

            .auth-switch-btn:hover {
                transform: translateY(-1px);
            }

            .auth-switch-btn.active {
                background: linear-gradient(180deg, #1f73ff, #1465ec);
                color: #fff;
                box-shadow: 0 16px 34px rgba(31,98,226,.22);
            }

            .auth-panel {
                display: none;
                max-width: 760px;
                margin: 0 auto 18px;
            }

            .auth-panel.active {
                display: block;
            }

            .auth-panel.email-active .auth-panel-compact {
                display: none
            }

            .auth-form {
                display: grid;
                gap: 12px;
            }

            .auth-field {
                display: grid;
                gap: 8px;
                text-align: left;
            }

            .auth-field label {
                color: rgba(0,0,0,.68);
                font-family: "montserrat", sans-serif;
                font-size: 16px;
                font-weight: 600;
                line-height: 1.3;
            }

            .auth-field input {
                width: 100%;
                min-height: 54px;
                padding: 0 16px;
                border: 1px solid rgba(0,0,0,.08);
                border-radius: 16px;
                background: #f5f5f5;
                color: #202020;
                font-family: "montserrat", sans-serif;
                font-size: 14px;
                font-weight: 500;
                outline: none;
                transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
            }

            .auth-field input:focus {
                background: #fff;
                border-color: rgba(20,101,236,.34);
                box-shadow: 0 0 0 4px rgba(20,101,236,.08);
            }

            .auth-submit {
                min-height: 58px;
                border: 0;
                border-radius: 16px;
                background: linear-gradient(180deg, #1f73ff, #1465ec);
                color: #fff;
                font-family: "montserrat", sans-serif;
                font-size: 16px;
                font-weight: 600;
                cursor: pointer;
                transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
                box-shadow: 0 18px 32px rgba(31,98,226,.22);
		z-index: 3;
            }

            .auth-submit:hover {
                transform: translateY(-1px);
            }

            .auth-submit:disabled {
                opacity: .46;
                cursor: not-allowed;
                transform: none;
                box-shadow: none;
            }

            .auth-separator {
                position: relative;
                margin: 4px auto 14px;
                max-width: 760px;
                text-align: center;
            }

            .auth-separator::before {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                height: 1px;
                background: rgba(0,0,0,.08);
            }

            .auth-separator span {
                position: relative;
                z-index: 1;
                display: inline-block;
                padding: 0 12px;
                background: #fff;
                color: rgba(0,0,0,.42);
                font-family: "montserrat", sans-serif;
                font-size: 13px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .08em;
            }

            @media (max-width: 480px) {
                .auth-switch-btn {
                    min-height: 44px;
                    font-size: 14px;
                }

                .auth-field input {
                    min-height: 50px;
                    font-size: 15px;
                    border-radius: 14px;
                }

                .auth-submit {
                    min-height: 52px;
                    font-size: 16px;
                    border-radius: 14px;
                }
            }

            .age-gate {
                z-index: 42
            }

            .age-modal {
                width: min(100%, 560px);
                max-height: min(92vh, 560px);
                overflow: hidden;
                border-radius: 24px;
                border: 1px solid rgba(255,255,255,.08);
                background: #fff;
                box-shadow: 0 36px 120px rgba(0,0,0,.58);
                padding: 20px
            }

            .age-head {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 14px
            }

            .age-mark {
                width: 46px;
                height: 46px;
                border-radius: 14px;
                border: 1px solid rgba(255,255,255,.08);
                background:
                    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 28%),
                    linear-gradient(135deg, rgba(255,255,255,.08), rgba(121,83,255,.16));
                display: grid;
                place-items: center;
                overflow: hidden;
                flex: 0 0 auto
            }

            .age-mark img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block
            }

            .age-brand {
                display: grid;
                gap: 4px
            }

            .age-brand-title {
                font-family: "Unbounded","montserrat",sans-serif;
                font-size: 22px;
                line-height: 1;
                letter-spacing: -.04em
            }

            .age-brand-sub {
                color: rgba(255,255,255,.72);
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 12px;
                line-height: 1.35
            }

            .age-copy {
                display: grid;
                gap: 10px
            }

            .age-copy h3 {
                margin: 0;
                max-width: none;
                font-family: "Unbounded","montserrat",sans-serif;
                font-size: clamp(18px, 3vw, 30px);
                line-height: 1.04;
		color: #000000;
		text-align: center;
                letter-spacing: -.05em
            }

            .age-copy p {
                margin: 0;
                max-width: 48ch;
                color: #2f2f2f;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 14px;
		text-align: center;
                line-height: 1.48
            }

            .age-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 10px;
                margin-top: 14px
            }

            .age-panel {
                border-radius: 16px;
                border: 1px solid rgb(219 228 240);
                background: #fbfbfb;
                padding: 14px 16px;
		color: #464646;
                backdrop-filter: blur(16px)
            }

            .age-list {
                margin: 0;
                padding-left: 18px;
                display: grid;
                gap: 8px;
                сolor: #606060d1;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 13px;
                line-height: 1.45
            }

            .age-actions {
                display: flex;
                gap: 10px;
                margin-top: 14px
            }

            .age-leave {
                min-height: 46px;
                padding: 0 16px;
                border-radius: 12px;
                border: 1px solid rgb(223 223 223);
                background: rgba(255,255,255,.04);
                color: #000000;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                cursor: pointer;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 13px;
                font-weight: 600
            }

            .age-accept {
                flex: 1 1 auto;
                min-width: 0;
                min-height: 46px;
                border-radius: 14px
            }

            .banner {
                margin-bottom: 16px;
                padding: 14px 16px;
                border-radius: 16px;
                border: 1px solid rgba(255,255,255,.08);
                background: rgba(255,255,255,.04);
                font-size: 14px;
                line-height: 1.5
            }

            .banner strong {
                color: var(--accent)
            }

            .footer-site {
                margin-top: 22px;
                border: 1px solid rgba(255,255,255,.08);
                border-radius: 30px;
                background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
                backdrop-filter: blur(22px);
                box-shadow: var(--shadow);
                overflow: hidden
            }

            .footer-grid {
                display: grid;
                grid-template-columns: minmax(240px,1fr) minmax(260px,1.05fr) repeat(2,minmax(180px,.9fr));
                gap: 24px;
                padding: 26px 28px
            }

            .footer-brand {
                display: grid;
                gap: 14px;
                align-content: start
            }

            .footer-brand .site-pill {
                box-shadow: none
            }

            .footer-text {
                max-width: 34ch;
                color: var(--muted);
                font-size: 14px;
                line-height: 1.65
            }

            .footer-title {
                font-family: "Unbounded","Manrope","montserrat",sans-serif;
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: .14em;
                color: var(--accent);
                font-weight: 900;
                margin-bottom: 10px
            }

            .footer-links {
                display: grid;
                gap: 10px
            }

            .footer-links a {
                color: #ffffff8a;;
                text-decoration: none;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 13px;
                font-weight: 500
            }

            .footer-links a:hover {
                color: var(--accent)
            }

            .footer-meta {
                display: grid;
                gap: 8px;
                color: var(--muted);
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 14px;
                line-height: 1.55
            }

            .footer-bottom {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                flex-wrap: wrap;
                padding: 16px 28px;
                border-top: 1px solid rgba(255,255,255,.08);
                background: rgba(255,255,255,.02);
                color: var(--muted);
                font-size: 13px
            }

            .footer-keywords {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                padding: 0 28px 22px
            }

            .footer-keywords a {
                display: inline-flex;
                align-items: center;
                min-height: 36px;
                padding: 0 14px;
                border-radius: 999px;
                border: 1px solid rgba(255,255,255,.08);
                background: rgba(255,255,255,.03);
                color: rgba(255,255,255,.9);
                text-decoration: none;
                font-family: "Montserrat","montserrat",sans-serif;
                font-size: 13px;
                font-weight: 600
            }

            .footer-keywords a:hover {
                background: rgba(255,255,255,.07)
            }


            .footer-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 9px 12px;
                border-radius: 999px;
                background: rgba(255,255,255,.04);
                border: 1px solid rgba(255,255,255,.08);
                color: #ffffff;
                font-weight: 800
            }

            @media (max-width: 1200px) {
                .hero {
                    grid-template-columns:1fr
                }

                .right {
                    order: 1
                }

                .left {
                    order: 2
                }

                .left {
                    grid-template-rows: auto 1fr
                }

                .styles {
                    grid-template-columns: repeat(2,minmax(0,1fr))
                }
            }

            @media (max-width: 900px) {
                .page {
                    padding:16px
                }

                .header {
                    flex-wrap: wrap
                }

                .actions {
                    width: 100%;
                    justify-content: space-between
                }

                .hero-copy {
                    padding: 0
                }

                .upload {
                    padding: 22px;
                    border-radius: 24px
                }

                .demo {
                    padding: 22px;
                    border-radius: 24px
                }

                .hero-title {
                    font-size: clamp(38px,7.5vw,56px)
                }

                .styles,.flow,.footer-grid,.age-grid {
                    grid-template-columns: 1fr
                }

                .site-pill {
                    margin-bottom: 0
                }

                .picker {
                    min-height: 260px
                }

                .picker-text {
                    font-size: 24px
                }

                .picker-art i {
                    font-size: 180px
                }
            }

            @media (max-width: 760px) {
                .page {
                    padding:12px
                }

                .hero-copy > .site-pill {
                    display: none
                }

                .actions,.ready-actions {
                    display: grid;
                    grid-template-columns: 1fr
                }

                .pill,.btn,.btn-ghost {
                    width: 100%
                }

                .chips,.footer,.modal-top,.modal-bottom,.demo-top,.age-actions {
                    display: grid;
                    grid-template-columns: 1fr
                }

                .modal {
                    padding: 20px
                }

                .age-modal {
                    padding: 16px
                }

                .age-accept {
                    min-width: 0
                }

                .file-name {
                    max-width: 180px
                }
            }
.handle {
	padding: 10px
}
        
@media (max-width: 760px) {
  .header > .site-pill,
  .header .actions > .pill {
    display: none !important;
  }
}