@font-face {
    font-display: swap;
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(https://a.poki-cdn.com/fonts/proxima-nova-regular-cyrillic.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/proxima-nova-regular-cyrillic.woff) format("woff");
    unicode-range: u+04??
}

@font-face {
    font-display: swap;
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(https://a.poki-cdn.com/fonts/proxima-nova-regular-greek-coptic.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/proxima-nova-regular-greek-coptic.woff) format("woff");
    unicode-range: u+0370-03ff
}

@font-face {
    font-display: swap;
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(https://a.poki-cdn.com/fonts/proxima-nova-regular-latin.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/proxima-nova-regular-latin.woff) format("woff");
    unicode-range: u+0020-007f, u+00a0-00ff
}

@font-face {
    font-display: swap;
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(https://a.poki-cdn.com/fonts/proxima-nova-regular-latin-ext-a.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/proxima-nova-regular-latin-ext-a.woff) format("woff");
    unicode-range: u+0100-017f
}

@font-face {
    font-display: swap;
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(https://a.poki-cdn.com/fonts/proxima-nova-regular-latin-ext-b.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/proxima-nova-regular-latin-ext-b.woff) format("woff");
    unicode-range: u+0180-024f
}

@font-face {
    font-display: swap;
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(https://a.poki-cdn.com/fonts/proxima-nova-regular-latin-extended.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/proxima-nova-regular-latin-extended.woff) format("woff");
    unicode-range: u+1e??, u+0300-036f
}

@font-face {
    font-display: swap;
    font-family: Proxima Nova;
    font-weight: 700;
    src: url(https://a.poki-cdn.com/fonts/proxima-nova-bold-cyrillic.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/proxima-nova-bold-cyrillic.woff) format("woff");
    unicode-range: u+04??
}

@font-face {
    font-display: swap;
    font-family: Proxima Nova;
    font-weight: 700;
    src: url(https://a.poki-cdn.com/fonts/proxima-nova-bold-greek-coptic.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/proxima-nova-bold-greek-coptic.woff) format("woff");
    unicode-range: u+0370-03ff
}

@font-face {
    font-display: swap;
    font-family: Proxima Nova;
    font-weight: 700;
    src: url(https://a.poki-cdn.com/fonts/proxima-nova-bold-latin.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/proxima-nova-bold-latin.woff) format("woff");
    unicode-range: u+0020-007f, u+00a0-00ff
}

@font-face {
    font-display: swap;
    font-family: Proxima Nova;
    font-weight: 700;
    src: url(https://a.poki-cdn.com/fonts/proxima-nova-bold-latin-ext-a.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/proxima-nova-bold-latin-ext-a.woff) format("woff");
    unicode-range: u+0100-017f
}

@font-face {
    font-display: swap;
    font-family: Proxima Nova;
    font-weight: 700;
    src: url(https://a.poki-cdn.com/fonts/proxima-nova-bold-latin-ext-b.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/proxima-nova-bold-latin-ext-b.woff) format("woff");
    unicode-range: u+0180-024f
}

@font-face {
    font-display: swap;
    font-family: Proxima Nova;
    font-weight: 700;
    src: url(https://a.poki-cdn.com/fonts/proxima-nova-bold-latin-extended.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/proxima-nova-bold-latin-extended.woff) format("woff");
    unicode-range: u+0180-024f
}

@font-face {
    font-display: swap;
    font-family: Torus;
    font-weight: 700;
    src: url(https://a.poki-cdn.com/fonts/torus-bold-latin.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/torus-bold-latin.woff) format("woff");
    unicode-range: u+0020-007f, u+00a0-00ff
}

@font-face {
    font-display: swap;
    font-family: Torus;
    font-weight: 700;
    src: url(https://a.poki-cdn.com/fonts/torus-bold-latin-ext-a.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/torus-bold-latin-ext-a.woff) format("woff");
    unicode-range: u+0100-017f
}

@font-face {
    font-display: swap;
    font-family: Torus;
    font-weight: 700;
    src: url(https://a.poki-cdn.com/fonts/torus-bold-latin-ext-b.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/torus-bold-latin-ext-b.woff) format("woff");
    unicode-range: u+0180-024f
}

@font-face {
    font-display: swap;
    font-family: Torus;
    font-weight: 700;
    src: url(https://a.poki-cdn.com/fonts/torus-bold-latin-extended.woff2) format("woff2"), url(https://a.poki-cdn.com/fonts/torus-bold-latin-extended.woff) format("woff");
    unicode-range: u+0180-024f
}

@font-face {
    font-display: swap;
    font-family: Noto Sans Arabic;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 400;
    src: url(https://a.poki-cdn.com/fonts/noto-sans-arabic.woff2) format("woff2");
    unicode-range: u+06??, u+0750-077f, u+0870-088e, u+0890-0891, u+0898-08e1, u+08e3-08ff
}

@font-face {
    font-display: swap;
    font-family: Noto Sans Arabic;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 700;
    src: url(https://a.poki-cdn.com/fonts/noto-sans-arabic.woff2) format("woff2");
    unicode-range: u+06??, u+0750-077f, u+0870-088e, u+0890-0891, u+0898-08e1, u+08e3-08ff
}

:root {
    --fontBody: "Proxima Nova", "Open Sans", "Gill Sans MT", "Gill Sans", "Noto Sans Arabic", Arial, sans-serif;
    --fontTorus: "Torus", "Noto Sans Arabic", sans-serif;
    --bezier: cubic-bezier(.25, .1, .25, 1);
    --cellSize: 94px;
    --cellSpacing: 16px;
    --maxPageWidth: 1860px;
    --shadow-angle: 2px 2px 1px 0px #5d6b8408, 2px 2px 1px 0px #5d6b8417, 1px 1px 3px 1px #5d6b8426;
    --shadow-close: 0px 2px 4px 2px #5d6b8414, 0px 8px 3px 0px #5d6b8408, 0px 4px 3px 0px #5d6b8417, 0px 2px 2px 0px #5d6b8426, 0px 0px 1px 0px #5d6b842e;
    --shadow-mid: 0px 2px 12px 4px #5d6b8414, 0px 23px 9px 0px #5d6b8408, 0px 13px 8px 0px #5d6b8417, 0px 6px 6px 0px #5d6b8426, 0px 1px 3px 0px #5d6b842e;
    --shadow-hover: 0px 2px 12px 4px #5d6b8414, 0px 31px 12px 0px #5d6b8414, 0px 17px 10px 0px #5d6b8417, 0px 8px 8px 0px #5d6b8426, 0px 2px 4px 0px #5d6b842e;
    --shadow-far: 0px 2px 12px 4px #5d6b8414, 0px 60px 24px 0px #5d6b8417, 0px 34px 20px 0px #5d6b8417, 0px 15px 15px 0px #5d6b8426, 0px 4px 8px 0px #5d6b842e;
    --blue-5: #0074e0;
    --blue-3: #054a91;
    --denim-blue: #002b50;
    --green-1: #15c8d1;
    --green-2: #17d7d8;
    --green-3: #18e9da;
    --green-4: #17f1d8;
    --green-5: #3cf7dc;
    --green-6: #4dffe1;
    --green-7: #83ffe7;
    --green-8: #a4ffee;
    --grey-3: #5d6b84;
    --grey-5: #bac9de;
    --grey-7: #f0f5fc;
    --grey-9: #f9fbff;
    --pink-1: #ff7690;
    --pink-2: #ff8aa6;
    --pink-3: #ff99b1;
    --pink-4: #ffa4ba;
    --pink-5: #ffa9be;
    --pink-6: #ffaec5;
    --pink-7: #ffc2d6;
    --pink-8: #ffc9dd;
    --poki-blue: #009cff;
    --pure-white: #fff;
    --purple-1: #c977e8;
    --purple-2: #d490f2;
    --purple-3: #da9ef3;
    --purple-4: #dca7f2;
    --purple-5: #e0aef5;
    --purple-6: #e1b5f7;
    --purple-7: #eac0fc;
    --purple-8: #ebccff;
    --yellow-1: #ff9e00;
    --yellow-2: #ffaf00;
    --yellow-3: #ffc500;
    --yellow-4: #ffd100;
    --yellow-5: #ffdc00;
    --yellow-6: #ffe200;
    --yellow-7: #fbe756;
    --yellow-8: #ffed85
}

*,
:after,
:before {
    box-sizing: border-box
}

body,
canvas,
div,
html,
iframe {
    margin: 0;
    padding: 0
}

body.isFullscreen {
    overflow: hidden
}

#app-root {
    display: flex;
    flex-direction: column;
    min-height: 100dvh
}

img {
    color: #0000
}

h1,
h2 {
    font: 700 24px var(--fontTorus)
}

h1,
h2,
p {
    margin: 0
}

a {
    color: var(--poki-blue);
    -webkit-text-decoration: none;
    text-decoration: none
}

body {
    min-width: 314px;
    --bodyBackground: var(--green-7) url(/img/home-bg.jpg);
    background: var(--bodyBackground);
    background-attachment: fixed;
    color: var(--denim-blue);
    font: 400 16px/24px var(--fontBody)
}

.global-cq {
    container-name: tilecq;
    container-type: inline-size
}

@container (min-width: 200px) {
    .global-cq-title {
        --tileFontSize: 16px
    }
}

.buttonReset {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 100%;
    padding: 0
}

.buttonReset:focus {
    outline: 0
}