@charset "UTF-8";

@layer theme;

@layer theme {
    html {
        color-scheme: dark;

        /* base surfaces */
        --page-bg: #07090d;
        --page-surface: #0e1219;
        --page-surface-2: #121826;
        --page-surface-3: #0b0f16;

        /* text */
        --text: #edf2ff;
        --text-muted: rgba(237, 242, 255, .70);
        --text-muted-2: rgba(237, 242, 255, .55);

        /* lines */
        --line: rgba(237, 242, 255, .10);
        --line-2: rgba(237, 242, 255, .16);

        /* links */
        --link: #8fb1ff;
        --link-hover: #bcd0ff;

        /* remap existing palette used across the site */
        --gray: var(--line);
        --gray-dark: var(--text-muted);
        --gray-black: var(--text);

        /* “wheat” is used as soft card bg – in dark it becomes glass */
        --wheat: rgba(255, 255, 255, .045);

        /* filled-light buttons / tags rely on this */
        --blue-ultra-light: rgba(35, 75, 255, .14);

        /* chat */
        --chat-q-bg: linear-gradient(to right, var(--chat-q-bg-color) 0%, rgba(255, 255, 255, .06) 25%);
        --chat-q-bg-color: #2a2a2a;
        --chat-a-bg: var(--page-surface-2);
        --chat-progress-bg: rgba(255, 255, 255, .12);

        /* glass system */
        --radius-soft: 14px;
        --glass-1: rgba(255, 255, 255, .045);
        --glass-2: rgba(255, 255, 255, .06);
        --glass-3: rgba(255, 255, 255, .075);

        --glow-blue: rgba(35, 75, 255, .22);
        --glow-blue-2: rgba(143, 177, 255, .28);
        --glow-green: rgba(202, 255, 0, .22);

        /* page background */
        /* background:
            radial-gradient(1200px 700px at 12% 18%, rgba(35, 75, 255, .16), transparent 55%),
            radial-gradient(900px 600px at 88% 12%, rgba(255, 95, 0, .11), transparent 55%),
            radial-gradient(1000px 650px at 50% 95%, rgba(202, 255, 0, .06), transparent 55%);
        background-color: color-mix(in srgb, var(--dark), black 50%); */
        /* background-attachment: fixed; */



        /* fallback, если color-mix не поддерживается */
        background-color: #0f1420;
        background-color: color-mix(in srgb, var(--dark), #000 60%);

        background-attachment: fixed;
        background-repeat: no-repeat;

        background-image:
            /* faint dust / milky haze */
            radial-gradient(900px 520px at 20% 65%, rgba(255, 255, 255, .03), transparent 60%),
            radial-gradient(700px 420px at 78% 72%, rgba(200, 220, 255, .025), transparent 60%),
            radial-gradient(800px 500px at 52% 40%, rgba(255, 230, 200, .02), transparent 62%),

            /* your nebula base (upgraded a bit) */
            radial-gradient(1200px 700px at 12% 18%, rgba(35, 75, 255, .18), transparent 55%),
            radial-gradient(900px 600px at 88% 12%, rgba(255, 95, 0, .13), transparent 55%),
            radial-gradient(1000px 650px at 50% 95%, rgba(202, 255, 0, .07), transparent 55%),
            radial-gradient(760px 520px at 72% 58%, rgba(120, 190, 255, .06), transparent 60%),
            radial-gradient(680px 460px at 28% 72%, rgba(255, 170, 220, .05), transparent 62%),

            /* deep-space base */
            linear-gradient(180deg, rgba(6, 8, 14, 1) 0%, rgba(12, 15, 26, 1) 45%, rgba(4, 6, 10, 1) 100%);
    }

    html body {
        background: transparent;
        color: var(--text);
    }

    /* selection */
    html ::selection {
        background: rgba(35, 75, 255, .45);
        color: #fff;
    }

    /* focus */
    /* html :focus-visible {
        outline: 2px solid rgba(202, 255, 0, .45);
        outline-offset: 3px;
    } */

    /* scrollbars */
    html body ::-webkit-scrollbar {
        background: rgba(255, 255, 255, .06);
    }

    html body ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .24);
    }

    html body ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, .35);
    }

    @supports (-moz-appearance:none) {
        html * {
            scrollbar-color: rgba(255, 255, 255, .24) rgba(255, 255, 255, .06);
        }
    }

    /* typography */
    html :is(h1, h2, h3, h4, h5) {
        color: var(--text);
    }

    html :is(p, li, small, figcaption, .desc) {
        color: var(--text-muted);
    }

    html a,
    button.dashed-blue {
        color: var(--link);
    }

    html a:hover,
    button.dashed-blue:hover {
        color: var(--link-hover);
    }

    /* shine base */
    html .--shine {
        --white: rgba(255, 255, 255, .92);
        --black: #000;
        --shadow-blur: 40px;
    }

    /* filled-light buttons: keep them alive in dark */
    html :is(a, button).button.filled-light {
        color: var(--text);
        --bg-color: rgba(143, 177, 255, .14);
        --bg-color-hover: rgba(143, 177, 255, .20);
        --rotate: 205deg;
        --bg-opacity: 90%;
        --saturate-dark: 4;

        &:hover {
            filter: none;
            --bg-color: var(--bg-color-hover);
        }
    }

    /* =========================================================
   1) HEADER
   ========================================================= */

    html main>header {
        background: linear-gradient(to right, rgba(12, 16, 24, .92) 10%, rgba(12, 16, 24, .72) 15%);
        backdrop-filter: blur(22px) saturate(8);
        -webkit-backdrop-filter: blur(22px) saturate(8);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 -6px 12px rgba(0, 0, 0, .20);
    }

    html main>header .contacts .telephone {
        color: var(--text);
    }

    html main>header .buttons .links a {
        color: var(--text-muted);
    }

    html main>header .buttons .links a:hover {
        color: var(--text);
    }

    html .headers .warranty {
        color: var(--orange);
        --bg-color: #ffffff00;
        backdrop-filter: saturate(4);
        -webkit-backdrop-filter: saturate(4);
        contain: layout style;
        isolation: isolate;
    }

    /* =========================================================
   2) MENU (NAV): keep previous design, change ONLY hover effect
   ========================================================= */

    html #menu nav::before {
        background-color: rgba(0, 0, 0, .45);
        backdrop-filter: blur(80px) saturate(1.35);
        -webkit-backdrop-filter: blur(80px) saturate(1.35);
        filter: none;
    }

    html.menu-open #menu .wrapp {
        background-color: rgba(12, 16, 24, .88);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 60px rgba(0, 0, 0, .55);
        backdrop-filter: blur(26px) saturate(1.25);
        -webkit-backdrop-filter: blur(26px) saturate(1.25);

        & .navigation::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 7%);
        }

        & .navigation::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 35%);
        }
    }

    html.menu-open #menu .navigation li a {
        color: var(--text);
    }

    html.menu-open #menu .navigation li a.active {
        color: var(--green);
    }

    @media (any-hover: hover) {
        html.menu-open #menu .navigation li a:not(:first-child):hover {
            color: var(--text);
            background-color: #ffffff21;
        }
    }

    /* =========================================================
   3) TABS
   ========================================================= */

    html app[name=tabs].sticky tabs a {
        background: rgb(12 16 24 / 72%);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
        backdrop-filter: blur(10px) saturate(8);
        -webkit-backdrop-filter: blur(10px) saturate(8);
    }

    html app[name=tabs] tabs tab a {
        color: var(--text-muted);
    }

    html app[name="tabs"] {
        &.sticky {
            & tabs {
                & tab {
                    & .icon {
                        color: var(--text-muted);
                    }
                }
            }
        }
    }

    /* =========================================================
   4) HUB (cards hover like RELS)
   ========================================================= */

    html .hub {
        & .cards {
            & .card {
                & .recommend {
                    & section {
                        &:first-child {
                            background-color: rgba(12, 16, 24, .70);
                            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
                            backdrop-filter: blur(16px) saturate(1.25);
                            -webkit-backdrop-filter: blur(16px) saturate(1.25);
                        }

                        &:last-child {
                            background-color: rgba(255, 255, 255, .05);
                            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
                            backdrop-filter: blur(16px) saturate(1.25);
                            -webkit-backdrop-filter: blur(16px) saturate(1.25);
                        }
                    }
                }
            }
        }
    }

    /* hover frame/glow for hub cards */
    @media (any-hover: hover) {
        html .hub .cards .card:has(a.overlay)::before {
            border-radius: 14px;
            background: rgba(12, 16, 24, .40);
            box-shadow: 0 0 44px var(--glow-blue);
            backdrop-filter: blur(18px) saturate(1.25);
            -webkit-backdrop-filter: blur(18px) saturate(1.25);
            transform: translateY(1px);
            opacity: 0;
            transition: opacity .14s, transform .22s;
        }

        html .hub .cards .card:has(a.overlay):hover::before {
            opacity: 1;
            transform: none;
        }
    }

    /* =========================================================
   5) CAT cards
   ========================================================= */

    html .cat .card .wrapp {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), inset 0 0 120px rgba(0, 0, 0, .55);
    }

    html .cat .card {
        --stroke-color: rgba(0, 0, 0, .55);
    }

    html .cat .card :is(.vars, .services) a:not(.overlay) {
        color: var(--text-muted);
    }

    html .cat .card .services a:hover:before {
        background-color: rgba(255, 255, 255, .06);
        backdrop-filter: blur(12px) saturate(1.2);
        -webkit-backdrop-filter: blur(12px) saturate(1.2);
    }

    /* “light” variant becomes a dark-surface variant */
    html .cat .card.light {
        --bg: var(--page-surface);
        --text-color: var(--text-muted);
        --title-color: var(--blue-bright);

        & .services span.name,
        & :is(.vars, h2)>a {
            --stroke-color: rgba(0, 0, 0, .55);
        }
    }

    html .cat .card.light:hover .wrapp {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 140px rgba(35, 75, 255, .12);
    }

    html .cat .card.light .services a:hover:before {
        background: linear-gradient(to right, rgba(120, 162, 255, .14), rgba(255, 255, 255, .06));
    }

    /* =========================================================
   6) SERVICES list + intro RELS (fix: no “double outline” on hover)
   ========================================================= */

    html #services ul {
        background-color: rgba(255, 255, 255, .04);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 30px rgba(0, 0, 0, .40);
    }

    html #services ul .item:hover:before {
        background-color: rgba(120, 162, 255, .14);
    }

    /* intro highlights on neon background need dark text */
    html .intro .text m {
        color: #000;
    }

    html .intro .rels {
        & .items {
            & .item:not(:hover) .vals {
                filter: brightness(2) grayscale(1);
            }

            & .item {

                &.interactive:hover {

                    &:has(a.overlay) :is(.name, .icon-symbol),
                    & .vals a {
                        color: var(--green);
                    }
                }

                &:not(button) .icon-action {
                    color: rgba(255, 255, 255, .4);
                }

                &.dark-theme-invert {
                    & img {
                        filter: invert(1);
                    }
                }
            }
        }
    }

    /* RELS glow overlay: glow only (no extra inset border -> no double stroke) */
    html .intro .rels .items .item::before {
        box-shadow: inset 0 0 0 .5px #f2f2f214, 0 0 44px var(--glow-blue);
        backdrop-filter: saturate(3) brightness(1.5);
        z-index: -1;
    }

    html .intro .bottom .rels .items .item::before {
        inset: 0;
    }

    /* micro-cards: keep ONE clean outline on the card itself */
    html .intro .rels[theme="micro-cards"] .items .item {
        background-color: var(--glass-1);
        outline: 1px solid rgba(255, 255, 255, .10);
        outline-offset: -1px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .35);

        &::before {
            background-color: var(---dark);
        }
    }

    @media (any-hover: hover) {
        html .intro .rels[theme="micro-cards"] .items .item.interactive:hover {
            background-color: var(--glass-3);
            outline-color: rgba(143, 177, 255, .30);
            box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 0 44px var(--glow-blue);
        }
    }

    /* =========================================================
   7) BOXES (“package .box”)
   ========================================================= */

    html .package .box {
        background-color: var(--page-surface);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), inset 0 0 60px rgba(0, 0, 0, .55);
        --benefits-color: var(--text-muted);
        --color-title: var(--text);
        --color-solution: var(--text);
    }

    html .package .box .solution .benefits-button .benefits li .icon {
        color: var(--green);
    }

    @media (any-hover: hover) {
        html .package .box:hover {
            background-color: var(--page-surface-2);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 90px rgba(35, 75, 255, .12);
            transform: scale(1.015);
        }
    }

    html .package .box .solution .benefits-button button[data-time]:before {
        color: var(--text-muted-2);
    }

    /* =========================================================
   8) PRICE LIST (soft rows + clear active row)
   ========================================================= */

    html .price-list table {
        border-collapse: separate;
        border-spacing: 1px 5px;
    }

    html .price-list table th {
        background: #ffffff1c;
    }

    html .price-list table tr:not(.header) td {
        background-color: var(--glass-1);
        color: var(--text);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    }

    html .price-list table tr:not(.header):nth-child(even) td {
        background-color: var(--glass-2);
    }

    html .price-list table tr.header+tr td {
        background-color: var(--glass-1);
        color: var(--text);
    }

    html .price-list table tr.header td {
        background: none;
    }

    html .price-list table tr:not(.header) td:first-child {
        border-radius: var(--radius-soft) 0 0 var(--radius-soft);
    }

    html .price-list table tr:not(.header) td:last-child {
        border-radius: 0 var(--radius-soft) var(--radius-soft) 0;
        border-left: 1px solid rgba(255, 255, 255, .08);
    }

    /* actions popover */
    html .price-list table .actions {
        background: rgba(12, 16, 24, .92);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, .10),
            0 30px 70px rgba(0, 0, 0, .70);
        backdrop-filter: blur(18px) saturate(1.15);
        -webkit-backdrop-filter: blur(18px) saturate(1.15);

        @media(min-width: 1100px) {
            left: calc(100% + 4px);
        }
    }

    html .price-list table .out-of-center {
        color: var(--link);
    }

    html .price-list table .actions .additionally>.head {
        color: var(--green);
    }

    html .price-list table .actions .additionally .data::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, .28);
    }

    html .price-list table .actions .additionally .data::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, .40);
    }

    /* hover + highlighted + active */
    @media (any-hover: hover) {

        html .price-list table tr:not(.header):hover>td,
        html .price-list table tr.highlighted:not(.header)>td {
            background: linear-gradient(90deg, rgba(35, 75, 255, .20), rgba(255, 255, 255, .06));
            box-shadow:
                inset 0 0 0 1px rgba(143, 177, 255, .35),
                0 18px 50px rgba(0, 0, 0, .55);
        }

        html .price-list table tr:is(:hover, .highlighted):not(.header) a {
            color: var(--link-hover) !important;
        }

        html .price-list table tr:is(:hover, .highlighted):not(.header) .out-of-center {
            color: var(--green);
        }

        html .price-list table tr:is(:hover, .highlighted):not(.header) .related *:not(:last-child):after {
            background: rgba(202, 255, 0, .55);
        }
    }

    @media (any-hover: none) {

        html .price-list table tr.active:not(.header)>td,
        html .price-list table tr.highlighted:not(.header)>td {
            background: linear-gradient(90deg, rgba(35, 75, 255, .22), rgba(255, 255, 255, .06));
            box-shadow:
                inset 0 0 0 1px rgba(143, 177, 255, .40),
                0 18px 50px rgba(0, 0, 0, .55);
        }

        html .price-list table tr:is(.active, .highlighted):not(.header) a {
            color: var(--link-hover) !important;
        }

        html .price-list table tr:is(.active, .highlighted):not(.header) .out-of-center {
            color: var(--green);
        }

        html .price-list table tr:is(.active, .highlighted):not(.header) .related *:not(:last-child):after {
            background: rgba(202, 255, 0, .55);
        }
    }

    /* =========================================================
   9) ORDER FORM (dialog[data-type="form"]) — make it comfy
   ========================================================= */

    html dialog[data-type="form"] {
        border: none;
        padding: 0;
        background: transparent;
        color: var(--text);
    }

    html dialog[data-type="form"]::backdrop {
        background: rgba(0, 0, 0, .58);
        backdrop-filter: blur(14px) saturate(1.15);
        -webkit-backdrop-filter: blur(14px) saturate(1.15);
    }

    /* main panel (scroll) */
    html dialog[data-type="form"] .wrapp-scroll {
        background: linear-gradient(180deg, rgba(18, 24, 38, .88), rgba(12, 16, 24, .76));
        border-radius: 34px;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, .10),
            0 45px 120px rgba(0, 0, 0, .72);
        backdrop-filter: blur(22px) saturate(1.25);
        -webkit-backdrop-filter: blur(22px) saturate(1.25);
    }

    /* inner padding */
    html dialog[data-type="form"] .wrapp-scroll .wrapp {
        padding: 26px 26px 22px;
    }

    /* header/info */
    html dialog[data-type="form"] .wrapp-scroll .wrapp .info {
        padding: 4px 0 18px;
        margin: 0;
        background: none;
    }

    html dialog[data-type="form"] .wrapp-scroll .wrapp .info .title {
        color: var(--text);
        text-shadow: 0 10px 30px rgba(0, 0, 0, .35);
        letter-spacing: -.01em;
    }

    /* chips / conditions */
    html dialog[data-type="form"] .wrapp-scroll .wrapp .info .conditions li {
        background: rgba(255, 255, 255, .06);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, .08),
            0 14px 30px rgba(0, 0, 0, .22);
        color: var(--text-muted);
        backdrop-filter: blur(16px) saturate(1.25);
        -webkit-backdrop-filter: blur(16px) saturate(1.25);
    }

    /* close button */
    html dialog[data-type="form"] .wrapp-scroll .wrapp .close {
        width: 42px;
        height: 42px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .07);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 18px 35px rgba(0, 0, 0, .35);
        backdrop-filter: blur(18px) saturate(1.25);
        -webkit-backdrop-filter: blur(18px) saturate(1.25);
        transition: transform .2s, background-color .2s, box-shadow .2s;
    }

    @media (any-hover: hover) {
        html dialog[data-type="form"] .wrapp-scroll .wrapp .close:hover {
            background: rgba(255, 255, 255, .10);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 45px rgba(0, 0, 0, .45);
            transform: translateY(-0.5px);
        }
    }

    html dialog[data-type="form"] .wrapp-scroll .wrapp .close .icon {
        color: var(--text);
        opacity: .9;
    }

    /* inputs */
    html dialog[data-type="form"] .wrapp-scroll :is(input[type="text"], input[type="tel"], textarea) {
        width: 100%;
        color: var(--text);
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 18px;
        padding: 16px 16px;
        box-shadow: inset 0 -12px 24px rgba(0, 0, 0, .18);
        transition: border-color .15s, box-shadow .2s, background-color .15s;
    }

    html dialog[data-type="form"] textarea {
        min-height: 92px;
        resize: vertical;
    }

    html dialog[data-type="form"] :is(input[type="text"], input[type="tel"], textarea)::placeholder {
        color: rgba(237, 242, 255, .34);
    }

    html dialog[data-type="form"] :is(input[type="text"], input[type="tel"], textarea):focus {
        border-color: rgba(143, 177, 255, .40);
        background: rgba(255, 255, 255, .06);
        box-shadow:
            inset 0 -12px 24px rgba(0, 0, 0, .18),
            0 0 0 2px rgba(143, 177, 255, .18),
            0 0 44px var(--glow-blue);
        outline: none;
    }

    /* submit button inside dialog: add comfy “lift” */
    html dialog[data-type="form"] .wrapp-scroll form .button.filled.--shine {
        border-radius: 24px;
        box-shadow:
            0 26px 70px rgba(0, 0, 0, .45),
            0 0 55px rgba(35, 75, 255, .22);
        transform: translateY(0);
        transition: transform .2s, box-shadow .2s;
    }

    @media (any-hover: hover) {
        html dialog[data-type="form"] .wrapp-scroll form .button.filled.--shine:hover {
            transform: translateY(-1px);
            box-shadow:
                0 32px 85px rgba(0, 0, 0, .55),
                0 0 65px rgba(35, 75, 255, .28);
        }
    }

    /* agreement */
    html dialog[data-type="form"] .wrapp-scroll .agreement {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 4px;
        color: var(--text-muted);
    }

    html dialog[data-type="form"] .wrapp-scroll .agreement input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: rgba(143, 177, 255, .95);
    }

    html dialog[data-type="form"] .wrapp-scroll .agreement a {
        color: var(--link);
        text-decoration-color: rgba(143, 177, 255, .45);
    }

    html dialog[data-type="form"] .wrapp-scroll .agreement a:hover {
        color: var(--link-hover);
        text-decoration-color: rgba(188, 208, 255, .70);
    }

    /* parts panel (right) */
    html dialog[data-type="form"] .parts {
        background: linear-gradient(180deg, rgba(18, 24, 38, .72), rgba(12, 16, 24, .58));
        /* border-radius: 30px; */
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, .10),
            0 45px 120px rgba(0, 0, 0, .65);
        backdrop-filter: blur(22px) saturate(1.25);
        -webkit-backdrop-filter: blur(22px) saturate(1.25);
    }

    html dialog[data-type="form"] .parts .head {
        color: var(--text);
        opacity: .95;
    }

    html dialog[data-type="form"] .parts .part {
        background: rgba(255, 255, 255, .05);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    }

    html dialog[data-type="form"] .parts .part .name {
        color: var(--text-muted);
    }

    html dialog[data-type="form"] .parts .part .price {
        color: var(--text);
    }

    /* responsive: stack parts under */
    @media (max-width: 860px) {
        html dialog[data-type="form"] .wrapp-dialog {
            flex-direction: column;
        }

        html dialog[data-type="form"] .parts {
            border-radius: 26px;
        }
    }

    /* =========================================================
   10) CHAT
   ========================================================= */

    html .chat {
        color: var(--text);

        & .header {
            & .wrapp-message .files {
                & .icon {
                    fill: white;
                }
            }

            & .wrapp-files {
                & .thumb {
                    & button.delete {
                        & .icon {
                            color: var(--dark);
                        }
                    }
                }
            }

            & .contenteditable-fix {
                & .message {

                    --shadow-offset-y: -.8px;
                    --shadow-offset-x: .5px;
                    --shadow-offset-y-top: .8px;
                    --shadow-offset-x-top: .8px;
                    --saturate-dark: 3;

                    &:empty:after {
                        color: rgb(172 171 255 / 62%);
                    }
                }
            }

            & .wrapp-adv {
                & input {

                    --shadow-offset-y: -.8px;
                    --shadow-offset-x: .5px;
                    --shadow-offset-y-top: .8px;
                    --shadow-offset-x-top: .8px;
                    --saturate-dark: 3;

                    &:placeholder-shown::-webkit-input-placeholder {
                        color: rgba(255, 255, 255, 0.721);
                    }
                }
            }
        }
    }

    html .chat .wrapp-scroll {
        background: none;

        & .wrapp-messages {
            & .messages {
                & .message {
                    & a {
                        color: var(--green);
                    }

                    &[data-type="Q"]:before {
                        border-color: var(--chat-q-bg-color);
                    }
                }
            }
        }
    }

    html .chat .wrapp-scroll .wrapp-messages .thread:not(:last-child) {
        border-bottom-color: rgba(255, 255, 255, .06);
    }

    html .chat .wrapp-scroll .wrapp-messages .messages .message {
        color: var(--text);
    }

    html .chat .wrapp-scroll .wrapp-messages .messages .message[data-type="Q"] {
        background: var(--chat-q-bg);
    }

    html .chat .wrapp-scroll .wrapp-messages .messages .message[data-type="A"] {
        background-color: var(--chat-a-bg);
        color: var(--text);
    }

    /* =========================================================
   11) TOGGLE (glass, iOS-ish)
   ========================================================= */

    html .toggle {
        --toggle-padding: 2px;
        --toggle-width: 64px;
        --slider-width: 37px;
        --slider-translate: calc(var(--slider-width) - var(--toggle-width) + var(--toggle-padding) * 2);

        --track-bg: rgba(255, 255, 255, .08);
        --track-bg-2: rgba(255, 255, 255, .04);
        --track-border: rgba(255, 255, 255, .12);

        --knob-bg: rgba(255, 255, 255, .88);
        --knob-bg-2: rgba(255, 255, 255, .62);

        --label: var(--text-muted);
    }

    html .toggle label {
        color: var(--label);
    }

    /* track */
    html .toggle .wrapp {
        background: linear-gradient(180deg, var(--track-bg), var(--track-bg-2));
        border: var(--toggle-padding) solid rgba(255, 255, 255, .00);
        box-shadow:
            inset 0 0 0 1px var(--track-border),
            inset 0 -10px 25px rgba(0, 0, 0, .25),
            0 16px 40px rgba(0, 0, 0, .45);
        backdrop-filter: blur(26px) saturate(1.25);
        -webkit-backdrop-filter: blur(26px) saturate(1.25);
    }

    /* inner highlight */
    html .toggle .wrapp::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 60px;
        pointer-events: none;
        background: radial-gradient(60px 22px at 25% 30%, rgba(255, 255, 255, .12), transparent 65%);
        opacity: .9;
    }

    /* knob */
    html .toggle .wrapp::after {
        background: linear-gradient(180deg, var(--knob-bg), var(--knob-bg-2));
        box-shadow:
            inset 0 0 0 .5px rgba(0, 0, 0, .35),
            0 14px 28px rgba(0, 0, 0, .50);
        transform: translateX(var(--slider-translate));
        transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    }

    /* focus ring on knob */
    html .toggle .wrapp:has(input:focus-visible)::after {
        box-shadow:
            inset 0 0 0 1px rgba(0, 0, 0, .30),
            0 0 0 2px rgba(143, 177, 255, .35),
            0 14px 28px rgba(0, 0, 0, .50);
    }

    /* checked */
    html .toggle .wrapp:has(input:checked),
    html .toggle input:checked+.wrapp,
    html .toggle input:checked~.wrapp {
        background: linear-gradient(180deg, rgba(21, 215, 21, .26), rgba(21, 215, 21, .14));
        box-shadow:
            inset 0 0 0 1px rgba(202, 255, 0, .18),
            inset 0 -10px 25px rgba(0, 0, 0, .20),
            0 16px 40px rgba(0, 0, 0, .45),
            0 0 40px var(--glow-green);
    }

    html .toggle .wrapp:has(input:checked)::after,
    html .toggle input:checked+.wrapp::after,
    html .toggle input:checked~.wrapp::after {
        transform: none;
    }

    /* press */
    html .toggle .wrapp:active::after {
        transition: transform .22s cubic-bezier(.25, .1, 0, 1.22);
        transform: translateX(calc(var(--slider-translate) / 1.55));
    }

    html .toggle .wrapp:active:has(input:checked)::after {
        transform: translateX(calc(var(--slider-translate) / 3.2));
    }

    /* =========================================================
   12) FOOTER
   ========================================================= */

    html footer {
        color: var(--text-muted);
        border-top-color: rgba(255, 255, 255, .10);
    }

    html footer a {
        color: var(--text);
    }

    html footer a:hover {
        color: var(--link-hover);
    }

    /* =========================================================
   13) CONTACT
   ========================================================= */

    html #app.🐈contact {
        & .banner {
            filter: saturate(1.1) brightness(1.1) contrast(1.1);
            
            &>.title {
                & :is(h2, h3) {
                    color: var(--dark);
                }
            }
        }
    }
}