/* =========================================================
   SERVOMIX — SHARED PARTS: NAV, FOOTER, ANNOUNCEMENT
   File: css/core/site.css
   Needs: tokens.css, base.css, components.css.
   Markup: partials/*.html   Behaviour: js/core/nav.js
========================================================= */

/* ---------------------------------------------------------
   SLOTS
   Reserve the nav's height before the partial arrives so the
   page doesn't jump (CLS).
--------------------------------------------------------- */

[data-include="nav"]{
    position:sticky;
    top:0;
    z-index:var(--z-nav);
    min-height:var(--nav-h);
    padding-top:0;
}

@media (max-width:1023.98px){
    [data-include="nav"]{
        padding-top:0;
    }
}

.site-nav-sentinel{
    position:absolute;
    top:0;
    left:0;
    width:1px;
    height:24px;
    pointer-events:none;
}

/* fallback links shown only if the partial fails to load */
.include-fallback{
    display:none !important;
}

[data-included="failed"] .include-fallback{
    display:flex !important;
    flex-wrap:wrap;
    gap:var(--s-2) var(--s-4);
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
    padding:var(--s-3) var(--s-4);
    border-radius:var(--r-control);
    background:var(--surface);
    font-weight:var(--w-strong);
}

.no-transition,
.no-transition *{
    transition:none !important;
}


/* ---------------------------------------------------------
   ANNOUNCEMENT
--------------------------------------------------------- */

.announce{
    background:var(--accent);
    color:var(--ink-on-accent);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.announce__inner{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:40px;
}

.announce__text{
    flex:1;
    min-width:0;
    max-width:none;
    padding-block:var(--s-2);
    text-align:center;
    text-wrap:balance;
}

.announce__badge{
    display:inline-block;
    margin-right:var(--s-2);
    padding:0 var(--s-2);
    border-radius:var(--r-pill);
    background:var(--ink-on-accent);
    color:var(--accent-strong);
    font-size:var(--t-micro);
    letter-spacing:.06em;
    line-height:20px;
}

.announce__link{
    color:inherit;
    text-decoration:underline;
}

.announce__badge + span + .announce__link,
[data-announcement-text] + .announce__link{
    margin-left:var(--s-2);
}

.announce__link:hover{
    color:inherit;
}

.announce__close{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:40px;
    height:40px;
    border:0;
    border-radius:var(--r-control);
    background:transparent;
    color:inherit;
}

.announce__close:hover{
    background:var(--on-accent-tint);
}

.announce__close:focus-visible{
    outline:2px solid var(--ink-on-accent);
    outline-offset:-4px;
}


/* ---------------------------------------------------------
   NAV BAR
--------------------------------------------------------- */

.site-nav{
    width:100%;
    margin-inline:0;
}

.site-nav__bar{
    position:relative;
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:var(--nav-h);
    padding:0 var(--s-4);
    border-radius:0;
    border:none;
    border-bottom:1px solid var(--glass-edge);
    background:var(--glass);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--shadow-card);
    transition:
        background-color var(--dur-base) var(--ease),
        border-color var(--dur-base) var(--ease),
        box-shadow var(--dur-base) var(--ease);
}

.site-nav.is-scrolled .site-nav__bar{
    background:var(--glass-strong);
    border-color:var(--line-strong);
    box-shadow:var(--shadow-float), var(--glass-highlight);
}

.site-nav__logo{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    min-height:44px;
    padding-right:var(--s-2);
}

.site-nav__logo img{
    width:auto !important;
    height:26px !important;
    max-height:26px !important;
    object-fit:contain;
    display:block;
    flex-shrink:0;
    transition:filter var(--dur-fast) var(--ease);
}

:root:not([data-theme="light"]) .site-nav__logo img,
:root:not([data-theme="light"]) .site-footer__logo img,
html[data-theme="dark"] .site-nav__logo img,
html[data-theme="dark"] .site-footer__logo img{
    filter:brightness(1.16);
}

html[data-theme="light"] .site-nav__logo img,
html[data-theme="light"] .site-footer__logo img{
    filter:none;
}

.site-nav__list{
    display:flex;
    flex-direction:column;
    gap:var(--s-1);
    margin:0;
}

.site-nav__trigger,
.site-nav__link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-2);
    width:100%;
    min-height:48px;
    padding:0 var(--s-4);
    border:0;
    border-radius:var(--r-control);
    background:transparent;
    color:var(--ink);
    font-size:var(--t-body);
    font-weight:var(--w-strong);
    text-decoration:none;
}

.site-nav__trigger:hover,
.site-nav__link:hover,
.site-nav__trigger[aria-expanded="true"]{
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.site-nav__link[aria-current="page"]{
    color:var(--accent);
}

.site-nav__trigger .icon{
    transition:transform var(--dur-fast) var(--ease);
}

.site-nav__trigger[aria-expanded="true"] .icon{
    transform:rotate(180deg);
}

.site-nav__trigger:focus-visible,
.site-nav__link:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}


/* ---------- Panels ---------- */

.site-nav__panel{
    padding:var(--s-2) 0 var(--s-3) var(--s-3);
}

.site-nav__panel[hidden]{
    display:none;
}

.site-nav__games,
.site-nav__links{
    display:grid;
    gap:var(--s-1);
    margin:0;
}

.site-nav__game,
.site-nav__links a{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:44px;
    padding:var(--s-2) var(--s-3);
    border-radius:var(--r-control);
    color:var(--ink);
    font-weight:var(--w-strong);
    text-decoration:none;
}

.site-nav__links a .icon{
    color:var(--accent);
}

.site-nav__game:hover,
.site-nav__links a:hover,
.site-nav__game[aria-current="page"],
.site-nav__links a[aria-current="page"]{
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.site-nav__game img{
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    object-fit:cover;
}

.site-nav__game span{
    display:grid;
    line-height:1.3;
}

.site-nav__game small{
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-body);
}

.site-nav__all{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:44px;
    margin-top:var(--s-2);
    padding:0 var(--s-3);
    border-radius:var(--r-control);
    font-weight:var(--w-strong);
    text-decoration:none;
}

.site-nav__all:hover{
    background:var(--accent-soft);
}


/* ---------- Actions ---------- */

.site-nav__actions{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    margin-left:auto;
}

.site-nav__theme{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    cursor:pointer;
    transition:
        border-color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.site-nav__theme:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
    background:var(--accent-soft);
    transform:translateY(-1px);
}

.site-nav__theme:active{
    transform:translateY(0);
}

.site-nav__theme:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.site-nav__theme .icon{
    width:20px;
    height:20px;
    pointer-events:none;
}

/* In Dark/Bluish theme (default): show Sun icon */
:root:not([data-theme="light"]) .site-nav__theme .icon--theme-moon,
html[data-theme="dark"] .site-nav__theme .icon--theme-moon{
    display:none;
}

:root:not([data-theme="light"]) .site-nav__theme .icon--theme-sun,
html[data-theme="dark"] .site-nav__theme .icon--theme-sun{
    display:block;
    color:#f59e0b;
}

/* In Light theme: show Moon icon */
html[data-theme="light"] .site-nav__theme .icon--theme-sun{
    display:none;
}

html[data-theme="light"] .site-nav__theme .icon--theme-moon{
    display:block;
    color:var(--accent);
}

.site-nav__lang{
    min-width:44px;
    min-height:44px;
    padding:0 var(--s-3);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.site-nav__lang:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

.site-nav__lang:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.site-nav__burger .site-nav__burger-close,
.site-nav.is-open .site-nav__burger-open{
    display:none !important;
}

.site-nav.is-open .site-nav__burger-close{
    display:block !important;
}

.site-nav__mobile-item{
    display:none;
}


/* ---------- Mobile: menu is a sheet under the bar ---------- */

@media (max-width:1023.98px){

    .site-nav__client span{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
        white-space:nowrap;
    }

    .site-nav__client{
        width:var(--btn-h-sm);
        padding:0;
    }

    .site-nav__variants-pane{
        display:none;
    }

    .site-nav__menu{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        z-index:var(--z-overlay);
        max-height:calc(100dvh - var(--nav-h) - var(--s-7));
        overflow-y:auto;
        overscroll-behavior:contain;
        padding:var(--s-2);
        border:1px solid var(--line);
        border-radius:var(--r-card);
        background:var(--surface);   /* solid: a blur nested in the blurred bar doesn't render */
        box-shadow:var(--shadow-float);
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        transition:
            opacity var(--dur-base) var(--ease),
            transform var(--dur-base) var(--ease),
            visibility 0s linear var(--dur-base);
    }

    .site-nav.is-open .site-nav__menu{
        opacity:1;
        visibility:visible;
        transform:none;
        transition:
            opacity var(--dur-base) var(--ease),
            transform var(--dur-base) var(--ease);
    }

    html.site-nav-open{
        overflow:hidden;
    }

    .site-nav__mobile-item{
        display:block;
        padding-top:var(--s-3);
        margin-top:var(--s-2);
        border-top:1px solid var(--line);
    }
}


/* ---------- Desktop: inline menu with dropdown panels ---------- */

@media (min-width:1024px){

    .site-nav__burger{
        display:none;
    }

    .site-nav__menu{
        flex:1;
    }

    .site-nav__list{
        flex-direction:row;
        align-items:center;
    }

    .site-nav__item{
        position:relative;
    }

    .site-nav__trigger,
    .site-nav__link{
        width:auto;
        min-height:44px;
        padding:0 var(--s-3);
        font-size:var(--t-small);
    }

    .site-nav__panel{
        position:absolute;
        top:calc(100% + var(--s-3));
        left:0;
        z-index:var(--z-overlay);
        width:min(520px, 90vw);
        padding:var(--s-3);
        border:1px solid var(--line);
        border-radius:var(--r-card);
        background:var(--surface);   /* solid, same reason as the mobile sheet */
        box-shadow:var(--shadow-float);
        animation:navPanelSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Invisible hover bridge to eliminate the gap between trigger and panel */
    .site-nav__panel::before{
        content:"";
        position:absolute;
        bottom:100%;
        left:0;
        right:0;
        height:calc(var(--s-3) + 4px);
    }

    .site-nav__panel--list{
        width:280px;
    }

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


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.site-footer{
    margin-top:var(--section-y);
    padding-top:var(--s-8);
    border-top:1px solid var(--line);
    background:var(--glass);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.site-footer__grid{
    display:grid;
    gap:var(--s-6);
}

@media (min-width:768px){

    .site-footer__grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .site-footer__brand{
        grid-column:1 / -1;
    }
}

@media (min-width:1024px){

    .site-footer__grid{
        grid-template-columns:1.6fr repeat(3, minmax(0, 1fr));
    }

    .site-footer__brand{
        grid-column:auto;
    }
}

.site-footer__brand{
    display:grid;
    gap:var(--s-4);
    align-content:start;
}

.site-footer__logo img{
    width:auto !important;
    height:26px !important;
    max-height:26px !important;
    object-fit:contain;
    display:block;
    flex-shrink:0;
}

.site-footer__about{
    max-width:36ch;
}

.site-footer__contact,
.site-footer__col ul{
    display:grid;
    gap:var(--s-1);
    margin:0;
}

.site-footer__heading{
    margin-bottom:var(--s-3);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    font-stretch:var(--wd-text);
    letter-spacing:0;
}

.site-footer a{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:44px;
    color:var(--ink-2);
    text-decoration:none;
}

.site-footer a:hover,
.site-footer a[aria-current="page"]{
    color:var(--accent-strong);
}

.site-footer__payments{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-4);
    margin-top:var(--s-7);
    padding-block:var(--s-5);
    border-top:1px solid var(--line);
}

.site-footer__payments img{
    width:20px;
    height:20px;
    opacity:.7;
}

.site-footer__payments-label{
    color:var(--ink);
    font-weight:var(--w-strong);
}

.site-footer__bottom{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3) var(--s-6);
    padding-block:var(--s-5) var(--s-6);
    border-top:1px solid var(--line);
}


/* ---------------------------------------------------------
   NAV: original menu content (panel headers, services
   console, company descriptions, language menu)
--------------------------------------------------------- */

.site-nav__panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    margin-bottom:var(--s-2);
    padding:0 var(--s-3);
}

.site-nav__eyebrow{
    display:block;
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
    text-transform:uppercase;
}

.site-nav__panel-title{
    color:var(--ink);
    font-weight:var(--w-strong);
}

.site-nav__panel-head .site-nav__all{
    margin-top:0;
}

.site-nav__panel-foot{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:var(--s-2);
    margin-top:var(--s-3);
    padding:var(--s-3) var(--s-3) 0;
    border-top:1px solid var(--line);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.site-nav__panel-foot > span{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.site-nav__dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--up-fill);
}

.site-nav__links--desc a{
    align-items:flex-start;
}

.site-nav__links--desc a .icon{
    margin-top:3px;
}

.site-nav__links--desc span{
    display:grid;
    line-height:1.35;
}

.site-nav__links--desc small{
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-body);
}

/* ---------- Services Mega-Menu & Variants ---------- */

.site-nav__services-nav{
    display:flex;
    flex-direction:column;
}

.site-nav__service-list{
    display:grid;
    gap:2px;
}

.site-nav__service-link{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:42px;
    padding:0 var(--s-3);
    border-radius:var(--r-control);
    color:var(--ink);
    font-weight:var(--w-strong);
    text-decoration:none;
    transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.site-nav__service-link:hover,
.site-nav__service-link.is-active{
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.site-nav__service-arrow{
    margin-left:auto;
    opacity:0;
    transform:translateX(-4px);
    transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.site-nav__service-link:hover .site-nav__service-arrow,
.site-nav__service-link.is-active .site-nav__service-arrow{
    opacity:1;
    transform:translateX(0);
}

.site-nav__variants-pane{
    display:flex;
    flex-direction:column;
    padding:var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface-sunken);
}

.site-nav__variant-group{
    display:flex;
    flex-direction:column;
    gap:var(--s-2);
}

.site-nav__variant-group[hidden]{
    display:none;
}

.site-nav__variant-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-2);
    padding-bottom:var(--s-2);
    margin-bottom:var(--s-1);
    border-bottom:1px solid var(--line);
}

.site-nav__variant-title{
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    color:var(--ink-2);
    letter-spacing:0.06em;
    text-transform:uppercase;
}

.site-nav__variant-items{
    display:grid;
    gap:var(--s-2);
}

.site-nav__variant-card{
    display:flex;
    align-items:flex-start;
    gap:var(--s-3);
    padding:var(--s-2) var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    text-decoration:none;
    transition:
        border-color var(--dur-fast) var(--ease),
        background var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.site-nav__variant-card:hover{
    border-color:var(--accent);
    background:var(--accent-soft);
    transform:translateY(-1px);
}

.site-nav__variant-icon{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    min-width:32px;
    border-radius:8px;
    background:var(--accent-soft);
    color:var(--accent);
    margin-top:2px;
}

.site-nav__variant-info{
    display:grid;
    gap:2px;
}

.site-nav__variant-info strong{
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    color:var(--ink);
    line-height:1.25;
}

.site-nav__variant-info p{
    margin:0;
    font-size:var(--t-micro);
    color:var(--ink-2);
    line-height:1.35;
}

@media (min-width:1024px){

    .site-nav__panel--games{
        width:min(560px, 90vw);
    }

    .site-nav__panel--hostings,
    .site-nav__panel--cloud,
    .site-nav__panel--services,
    .site-nav__panel--network{
        display:grid;
        grid-template-columns:230px 1fr;
        gap:var(--s-4);
        width:min(740px, calc(100vw - 48px));
        max-width:740px;
    }

    .site-nav__panel--hostings[hidden],
    .site-nav__panel--cloud[hidden],
    .site-nav__panel--services[hidden],
    .site-nav__panel--network[hidden]{
        display:none;
    }

    .site-nav__panel--company{
        width:360px;
    }
}

@media (min-width:1024px) and (max-width:1160px){
    .site-nav__panel--hostings,
    .site-nav__panel--cloud{
        left:-40px;
    }

    .site-nav__panel--services,
    .site-nav__panel--network{
        left:-140px;
    }
}

@media (min-width:1161px) and (max-width:1280px){
    .site-nav__panel--services,
    .site-nav__panel--network{
        left:-80px;
    }
}


/* ---------- Language menu ---------- */

.site-nav__lang-wrap{
    position:relative;
}

.site-nav__lang{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.site-nav__lang img{
    width:20px;
    height:15px;
    border-radius:2px;
    object-fit:cover;
}

.site-nav__lang[aria-expanded="true"] .icon{
    transform:rotate(180deg);
}

.site-nav__lang-panel{
    position:absolute;
    top:calc(100% + var(--s-3));
    right:0;
    z-index:var(--z-overlay);
    display:grid;
    gap:2px;
    width:220px;
    max-height:min(420px, 70dvh);
    overflow-y:auto;
    padding:var(--s-2);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    box-shadow:var(--shadow-float);
    animation:navPanelSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-nav__lang-panel::before{
    content:"";
    position:absolute;
    bottom:100%;
    left:0;
    right:0;
    height:calc(var(--s-3) + 4px);
}

@keyframes navPanelSlideIn{
    from{
        opacity:0;
        transform:translateY(-6px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.site-nav__lang-panel[hidden]{
    display:none;
}

.site-nav__lang-panel button{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    min-height:44px;
    padding:0 var(--s-3);
    border:0;
    border-radius:var(--r-control);
    background:transparent;
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    text-align:left;
}

.site-nav__lang-panel button img{
    width:20px;
    height:15px;
    border-radius:2px;
    object-fit:cover;
}

.site-nav__lang-panel button:hover{
    background:var(--accent-soft);
}

.site-nav__lang-panel button[aria-checked="true"]{
    background:var(--accent-soft);
    color:var(--accent-strong);
}

/* translations not available yet */
.site-nav__lang-panel button[aria-disabled="true"]{
    color:var(--ink-2);
    font-weight:var(--w-body);
    cursor:default;
}

.site-nav__lang-panel button[aria-disabled="true"]:hover{
    background:transparent;
}

.site-nav__lang-panel button:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

@media (max-width:519.98px){

    .site-nav__bar{
        padding:var(--s-2) var(--s-3);
    }

    .site-nav__actions{
        gap:var(--s-1);
    }

    .site-nav__theme,
    .site-nav__lang{
        width:38px;
        height:38px;
        min-width:38px;
        min-height:38px;
        padding:0;
        justify-content:center;
    }

    .site-nav__lang .icon{
        display:none;
    }

    .site-nav__lang-name{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
        white-space:nowrap;
    }
}


/* ---------------------------------------------------------
   FOOTER: original content (payments in the brand column,
   social links, tools list, locations line)
--------------------------------------------------------- */

.site-footer__brand .site-footer__payments{
    display:grid;
    gap:var(--s-2);
    margin:0;
    padding:0;
    border:0;
}

.site-footer__payment-logos{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-4);
}

.site-footer__payments img.site-footer__mark{
    width:auto;
    height:18px;
    opacity:1;
}

.site-footer__social{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2) var(--s-4);
    margin:0;
}

.site-footer__social a{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:44px;
}

.site-footer__plain li{
    display:flex;
    align-items:center;
    min-height:36px;
    color:var(--ink-2);
}

.site-footer__locations{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--ink-2);
}

.site-footer__location-dot{
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--ink-3);
}