.header-hero[data-astro-cid-acd23kf2] {
  height: var(--max-h);
  padding-bottom: var(--space-s);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  & .header-hero-info {
    text-align: center;
    padding-bottom: var(--space-s);

    & .header-hero-info__h2 {
      font-family: var(--regular-font);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .header-hero[data-astro-cid-acd23kf2] {
    & .header-hero__chevron-arrow {
      display: grid;
      place-items: center;
      animation: 1.5s ease-in infinite pulse, 1.5s ease-in infinite blink;
    }
  }
}
.section {
    padding: var(--space-2xl) 0;

    & .section-header {
        padding-bottom: var(--space-l);
    
        & .section-header__h2 {
            font-size: var(--fs-xl);
            padding-bottom: var(--space-xs);
        }
    
        & .section-header__h3 {
            color: var(--blue-haze);
            font-family: var(--regular-font);
            font-size: var(--fs-m);
        }
    
        .section-header__h2,
        .section-header__h3 {
            text-align: center;
            text-transform: uppercase;
        }
    }
}
    
    .section.section--work-experience {
    .work-experience-list {
        --timeline-w: 5px;
        
        margin: 0 auto;
        position: relative;

        &::before,
        &::after {
            content: '';
            background-color: var(--blue-haze);
            position: absolute;
            z-index: 1;
        }

        &::before {
            width: var(--timeline-w);
            height: 100%;
            left: calc(var(--space-xs) + (var(--timeline-w) / 2));
            border-radius: var(--br-m);
        }

        &::after {
            width: var(--space-xs);
            aspect-ratio: 1/1;
            left: calc(var(--space-xs) / 1.20);
            bottom: -5px;
            border-radius: 50%;
        }

        .work-experience-item {
            --timeline-gap: calc(var(--space-2xs) * 2);
            --main-dot-w: var(--space-l);
            --space-total: calc(var(--timeline-gap) + var(--main-dot-w));


            width: calc(100% - (var(--space-total) + var(--space-xs)));
            margin: 0 0 var(--space-m) var(--space-total);

            &::before {
                content: '';
                background-color: var(--blue-haze);
                width: var(--space-m);
                aspect-ratio: 1/1;
                position: absolute;
                left: calc(var(--space-xs) / 2.5);
                border-radius: 50%;
                border: calc(var(--space-2xs) / 1.15) solid var(--woodsmoke);
                outline: calc(var(--space-2xs) / 1.5) solid var(--blue-haze);
                z-index: 1;
            }

            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }
}
    
    @media (width >= 992px) {
    .section.section--work-experience {
        .work-experience-list {
            width: var(--max-w);

            &::before,
            &::after,
            .work-experience-item::before,
            .work-experience-item::after {
                left: 50%;
                translate: -50%;
            }

            .work-experience-item {
                width: calc(50% - (var(--timeline-gap) + var(--space-s)));
                margin: 0 auto 0 0;

                &:nth-child(odd) {
                    & .base-card {
                        transform-origin: top right;
                    }
                }

                &:nth-child(even) {
                    margin: 0 0 0 auto;
                }

                &:not(&:nth-child(1)) {
                    margin-top: calc(-1 * var(--space-s));
                }
            }
        }
    }
}
    
    @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        .section.section--work-experience {
            .work-experience-list {
                &::before {
                    transform: scaleY(0);
                    transform-origin: top;
                    animation: timeline-scale linear both;
                    animation-timeline: view();
                    animation-range: entry 20% cover 40%;
                }

                &::after,
                .work-experience-item::before,
                .work-experience-item::after {
                    opacity: 0;
                    animation: scale-on-scroll linear both;
                    animation-range: entry 5% cover 20%; 
                    animation-timeline: view();
                }

                .work-experience-item {
                    .base-card {
                        transform-origin: top left;
                    }
                }
            }
        }
    }
}
    
    .section.section--main-projects {
    .projects-container {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);

        .base-card {
            /* --filter-color: var(--filter-maroon-flush); */
            --bg-color: var(--maroon-flush);

            font-size: var(--fs-m);
            
            .project {
                aspect-ratio: 3/1;

                .carousel-wrapper {
                    .carousel {
                        .slide {
                            &::before,
                            &::after {
                                content: '';
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                top: 0;
                                left: 0;
                            }

                            &::before {
                                background-color: var(--woodsmoke);
                                background-image: var(--bg-img);
                                background-position: center;
                                background-size: 150%;
                                background-repeat: no-repeat;
                                z-index: -1;
                                filter: blur(10px) grayscale(60%);
                                opacity: 0.8;
                            }

                            &::after {
                                background-color: var(--bg-color);
                                mix-blend-mode: color;
                                transition: background-color var(--tr-xs);
                                opacity: 0.85;
                                z-index: 1;
                            }

                            img {
                                object-fit: contain;
                            }

                        }
                    }
                }
                
                .project-info {
                    .base-card__title,
                    .base-card__description {
                        line-height: var(--lh-m);
                        margin-bottom: var(--space-2xs);
                    }
                }
            }
            
            &:nth-child(2) { --bg-color: var(--scarlet-gum); }

            &:nth-child(3) { --bg-color: var(--chestnut-rose); }

            &:nth-child(4) { --bg-color: var(--hibiscus); }

            &:hover {
                --bg-color: transparent;
            }
        }
    }
}
    
    @media (width >= 481px) {
    .section.section--main-projects {
        .projects-container {
            .base-card {
                .project {
                    display: grid;
                    grid-template-columns: 40% calc(60% - var(--space-xs));
                    gap: var(--space-xs);
    
                    .carousel {
                        .slides {
                            border-radius: var(--br-m);
                        }
                    }
                }
            }
        }
    }
}
    
    @media (width >= 1025px) {
    .section.section--main-projects {
        .projects-container {
            width: var(--max-w);

            .base-card {
                .project {
                    .project-info {
                        .base-card__description {
                            font-size: var(--fs-2xs);
                        }
                    }
                }
            }
        }
    }
}
    
    @media (width >= 1280px) {
    .section.section--main-projects {
        .projects-container {
            flex-direction: row;
            flex-wrap: wrap;

            .base-card {
                width: 45%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex-grow: 1;
                /* width: min(100%, calc(25dvw + 15rem)); */

                &:nth-child(even) {
                    margin: 0;
                }

                @media (prefers-reduced-motion: no-preference) {
                    @supports (animation-timeline: scroll()) {
                        &:nth-child(1) {
                            transform-origin: bottom right;
                        }
                        
                        &:nth-child(2) {
                            transform-origin: bottom left;
                        }

                        &:nth-child(3) {
                            transform-origin: top right;
                        }
                        
                        &:nth-child(4) {
                            transform-origin: top left;
                        }
                    }
                }
            }
        }
    }
}
    
    .section.section--about-me {
    text-align: center;

    .location-info {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .section__p {
        line-height: var(--lh-m);
        width: 95%;
        margin: var(--space-m) auto 0;

        span {
            color: transparent;
            font-family: var(--bold-font);
        }
    }

    .location-info,
    .section__p,
    .section__p span {
        font-size: var(--fs-s);
    }
}
    
    @media ((width >= 768px) and (width < 1921px)) {
    .section.section--about-me {
        .section__p {
            width: min(95%, calc(45dvw + 15rem));
        }

        .location-info,
        .section__p,
        .section__p span {
            font-size: var(--fs-xs);
        }
    }
}
    
    @media (width >= 1400px) {
    .section.section--about-me {
        .section__p {
            width: min(95%, calc(45dvw + 15rem));
        }
    }
}
    
    .section.section--skills {
    .skill-list {
        margin: 0 auto;
        display: grid;
        gap: var(--space-3xs);
        grid-template-columns: repeat(
            auto-fill,
            minmax(
                clamp(100px, 20%, calc(10dvw + 5rem)),
                1fr
            )
        );

        .skill-item {
            width: 100%;
            aspect-ratio: 1/1;
            
            .base-card {
                height: 100%;
                display: grid;
                justify-items: center;
                align-content: center;
                gap: var(--space-2xs);

                .base-card__title {
                    color: var(--dolphin);
                    font-size: var(--fs-xs);
                }
            }
        }
    }

    .skill-list,
    .game-controls {
        width: clamp(50%, 689px, calc(45dvw + 10rem));
    }
}
    
    @media (prefers-reduced-motion: no-preference) {
    .section.section--skills {
        .skill-list {
            overflow: visible;

            .skill-item {
                &,
                .base-card,
                .base-card .base-card__title {
                    transition: var(--tr-s);
                }

                /* &:hover {
                    scale: 1.05;

                    .base-card {
                        background: transparent;
                        outline: var(--blue-haze) 0.05em solid;
                    }
                } */
            }
        }
    }
}
    
    @media (width >= 1280px) {
    .section.section--skills {
        .skill-list {
            .skill-item {
                .base-card {
                    gap: var(--space-xs);
                }
            }
        }

        .skill-list,
        .game-controls {
            width: clamp(40%, 689px, calc(35dvw + 10rem));
        }
    }
}
    
    .section.section--contact {
    .form {
        &.form--ContactCopyEmail {
            margin-bottom: var(--space-m);
            display: flex;
            gap: var(--space-2xs);

            .form-field {
                width: 100%;
            }

            .base-button {
                height: fit-content;
                flex-shrink: 0;
            }
        }

        .base-button {
            margin: 0 auto;
            display: block;
        }
    }
}.base-card[data-astro-cid-up32xytl] {
  background-image: linear-gradient(0deg, 
        transparent 0%, 
        var(--baltic-sea) 100%);
  margin: 0 3px;
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  border-radius: var(--br-m);
  box-shadow: var(--shadow-upper);

  &.base-card--reverted {
    background-image: linear-gradient(0deg, 
            var(--baltic-sea) 0%, 
            transparent 100%);
    box-shadow: var(--shadow-under);
  }

  & .base-card__title {
    color: var(--blue-haze);
    font-size: var(--fs-s);
  }

  & .base-card__subtitle, & .base-card__description {
    font-size: var(--fs-xs);
  }

  & .base-card__detail {
    font-size: var(--fs-2xs);
  }
}
.skill-chip-list[data-astro-cid-a5cfrsby] {
  margin-top: var(--space-2xs);
  padding: 0 .1em;
  gap: var(--space-2xs);

  &, & .skill-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  & .skill-chip {
    color: var(--blue-haze);
    font-size: var(--fs-3xs);
    gap: var(--space-3xs);
    padding: calc(var(--space-3xs) / 2) calc(var(--space-3xs) * 1.5);
    border-radius: 50px;
    outline: .1em solid var(--blue-haze);

    &:before {
      background-image: var(--gradient-chip-bg);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .skill-chip-list[data-astro-cid-a5cfrsby] {
    & .skill-chip {
      &:hover {
        background-image: var(--gradient-magenta);
        outline-color: var(--burnt-sienna);
      }
    }
  }
}
.carousel-wrapper[data-astro-cid-whzlry7e] {
  & .carousel {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    border-radius: var(--br-s);
    overflow: hidden;

    & swiper-slide {
      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  & .carousel-pagination {
    overflow-x: clip;

    &.carousel-pagination--custom {
      margin: var(--space-xs);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--space-3xs);

      & .swiper-pagination-bullet {
        background-color: var(--dolphin);
        width: var(--space-3xs);
        aspect-ratio: 1;
        display: block;
        border-radius: 50%;
        transition: scale var(--tr-xs);
        scale: .9;

        &.swiper-pagination-bullet-active {
          background-color: var(--amaranth);
          scale: 1.25;
        }
      }
    }
  }
}
.section--blog {


    .section-content {
        text-align: center;
        width: var(--calc-w);
        margin-inline: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-s) var(--space-2xl);
        padding-bottom: var(--space-l);

        .section__subtitle,
        .base-link {
            line-height: var(--lh-m);
        }

        .section__subtitle {
            font-family: var(--regular-font);
            font-size: var(--fs-s);
            font-weight: 400;
            width: var(--max-w-2);
            flex-shrink: 0;
        }

        .base-link {
            --main-color:       var(--hibiscus);
            --secondary-color:  transparent;

            background-color: var(--secondary-color);
            color: var(--main-color);
            height: fit-content;
            padding: var(--space-2xs) var(--space-m);
            align-items: flex-end;
            place-items: center;
            border: var(--o-hibiscus-xs);
            border-radius: var(--br-m);
            opacity: 
                background var(--tr-xs),
                color      var(--tr-xs);

            &:hover {
                --main-color: var(--baltic-sea);
                --secondary-color: var(--hibiscus);
            }
        }
    }

    .entries {
        display: grid;
        gap: var(--space-xs);

        .blog-entry-item {
            min-width: 0;
        }
    }

    .blog-entry {
        min-height: clamp(22rem, 62dvw, 32rem);
        display: grid;
        gap: var(--space-s);
        overflow: hidden;

        .blog-entry__media,
        .blog-entry__content {
            min-width: 0;
        }

        .blog-entry__media {
            background-color: var(--woodsmoke);
            border-radius: var(--br-s);
            overflow: hidden;
        }

        .blog-entry__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .blog-entry__content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: var(--space-xs);
        }

        .skill-chip-list { margin-top: 0; }

        .blog-entry__title {
            --n-lines: 5;

            color: var(--blue-haze);
            font-family: var(--title-font);
            font-size: var(--fs-m);
            font-weight: 400;
            line-height: var(--lh-s);
            width: calc(100% - var(--space-xs));

            text-overflow: ellipsis;
            display:  -webkit-box;
            -webkit-line-clamp: var(--n-lines);
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .blog-entry__description {
            font-size: var(--fs-2xs);
            line-height: var(--lh-m);
        }

        .blog-entry__link {
            font-size: var(--fs-xs);
            flex-grow: 1;
            height: fit-content;
            align-self: self-start;
            display: grid;
            align-items: flex-end;
        }
    }
}

@media ((width >= 768px) and (width < 1921px)) {
    .section--blog {
        .section-content {
            .section__subtitle {
                font-size: var(--fs-xs);
            }
        }
    }
}

/* ------------- */
/* ---- FIX ---- */
/* ------------- */
@media (width >= 909px) {
    .section--blog {
        .section-content {
            text-align: left;
            justify-content: space-between;
        }
    }
}

@media (width >= 1025px) {
    .section--blog {

        .section-header,
        .section__subtitle {
            transform-origin: left;
        }

        .entries {
            grid-template-columns:
                minmax(0, 1.15fr)
                minmax(18rem, 0.85fr);
        }

        .blog-entry {
            height: 100%;
            min-height: 15rem;
            grid-template-columns: 40% 1fr;

        }

        .blog-entry-item--main {
            grid-column: 1;
            grid-row: span 2;

            .blog-entry {
                min-height: 30rem;
                grid-template-columns: 45% 1fr;
            }
        }

        .blog-entry-item:not(.blog-entry-item--main) {
            grid-column: 2;

            .blog-entry__title {
                font-size: var(--fs-s);
            }
        }
    }
}

@media (width >= 1025px) {
    .section--blog {
        .section-header {
            .section-header__h2,
            .section-header__h3 {
                text-align: left;
            }
        }
    }
}

@media (width >= 1280px) {
    .section--blog {
        .entries {
            width: var(--max-w);
            margin: 0 auto;
        }
    }
}
.section.section--code-activity {
    .section__p {
        color: var(--dolphin);
        font-size: var(--fs-xs);
        text-align: center;
        line-height: var(--lh-m);
        width: 95%;
        margin: 0 auto var(--space-m);
    }

    .code-activity-grid {
        width: var(--calc-w);
        margin: 0 auto;
        display: grid;
        gap: var(--space-xs);
    }

    .code-stat-card {
        min-height: 100%;
        outline: 0.05em solid var(--dolphin);
        box-shadow:
            var(--shadow-upper),
            0 0 var(--space-xs) #4406424d;

        .code-stat-card__header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: var(--space-2xs);
        }

        .code-stat-card__title {
            color: var(--blue-haze);
            font-family: var(--bold-font);
            font-size: var(--fs-xs);
            text-transform: uppercase;
        }

        .code-stat-card__subtitle {
            color: var(--dolphin);
            font-size: var(--fs-xs);
        }

    }

    .commit-periods {
        height: fit-content;
        display: flex;
        overflow: hidden;
        border-radius: var(--br-m);

        .commit-periods__button {
            background-color: #44064266;
            color: var(--dolphin);
            padding: calc(var(--space-3xs) / 2) var(--space-3xs);
            font-size: var(--fs-2xs);
            transition:
                background-color var(--tr-xs),
                color var(--tr-xs),
                box-shadow var(--tr-xs);

            &.commit-periods__button--active {
                background-color: #9f1758;
                color: var(--blue-haze);
                box-shadow: 0 0 var(--space-2xs) #ef325499;
            }
        }
    }

    .commit-chart {
        position: relative;
        margin-top: var(--space-xs);

        .commit-chart__svg {
            width: 100%;
            display: block;
            border-bottom: 0.05em solid var(--dolphin);
        }

        .commit-chart__line {
            stroke-width: 4;

            &.commit-chart__line--hidden {
                opacity: 0;
            }
        }

        .commit-chart__area {
            opacity: 1;

            &.commit-chart__area--glow {
                opacity: 0.42;
                filter: blur(14px);
            }

            &.commit-chart__area--hidden {
                opacity: 0;
            }
        }

        .commit-chart__empty {
            position: absolute;
            inset: 0 0 var(--space-s);
            display: none;
            place-items: center;
            color: var(--dolphin);
            font-size: var(--fs-xs);
            text-align: center;

            &.commit-chart__empty--visible {
                display: grid;
            }
        }

        .commit-chart__labels {
            padding-top: var(--space-3xs);
            display: grid;
            grid-template-columns: repeat(var(--chart-points), 1fr);

            li {
                color: var(--dolphin);
                font-size: var(--fs-3xs);
                text-align: center;
            }
        }
    }

    .language-ring-list {
        margin-top: var(--space-s);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-s) var(--space-2xs);
    }

    .language-ring {
        min-width: 0;
        display: grid;
        justify-items: center;
        gap: var(--space-3xs);

        .language-ring__chart {
            width: min(100%, 7.5rem);
            aspect-ratio: 1;
            display: grid;
            place-items: center;
            position: relative;
        }

        .language-ring__svg,
        .language-ring__icon {
            position: absolute;
        }

        .language-ring__svg {
            width: 100%;
            height: 100%;
            rotate: -90deg;

            circle {
                fill: none;
                stroke-width: 3.5;
            }
        }

        .language-ring__track {
            stroke: #44064299;
        }

        .language-ring__value {
            stroke-dasharray: var(--language-percentage) calc(100 - var(--language-percentage));
            stroke-linecap: round;
        }

        .language-ring__icon {
            display: grid;
            place-items: center;
        }

        .language-ring__name {
            color: var(--blue-haze);
            font-size: var(--fs-2xs);
            text-align: center;
        }

        .language-ring__type {
            color: var(--dolphin);
            font-size: var(--fs-3xs);
            text-align: center;
        }
    }
}

@media (width >= 768px) {
    .section.section--code-activity {
        .code-activity-grid {
            grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.8fr);
        }
    }
}
.simon-says-board {
    width: clamp(50%, 689px, calc(45dvw + 10rem));
    max-width: 689px;
    margin: 0 auto;
    padding: var(--space-xs);
    display: grid;
    gap: var(--space-m);

    .top {
        justify-content: space-between;
        gap: var(--space-s);

        &,
        .scores {
            display: flex;
            align-items: center;
        }
        
        .scores {
            color: var(--blue-haze);
            justify-content: center;
            gap: var(--space-xs);
            text-transform: uppercase;

            &,
            .scores__score,
            .scores__score span {
                font-family: var(--regular-font);
                font-size: var(--fs-2xs);
            }
        }
    }

    .game {
        background-color: var(--baltic-sea);
        aspect-ratio: 1 / 1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xs);
        padding: var(--space-s);
        position: relative;
        border-radius: 100%;
        box-shadow: var(--shadow-under);
        overflow: visible;

        .key-light {
            background:
                radial-gradient(
                    circle at 50% 38%,
                    color-mix(in srgb, var(--key-light), transparent 38%) 0%,
                    color-mix(in srgb, var(--key-bg), var(--key-light) 10%) 58%,
                    color-mix(in srgb, var(--key-bg), var(--woodsmoke) 22%) 100%
                );
            display: grid;
            place-items: center;
            position: relative;
            border: 0.08em solid color-mix(in srgb, var(--key-light), transparent 68%);
            border-radius: var(--key-radius);
            box-shadow:
                inset 0 0 var(--space-xs) color-mix(in srgb, var(--key-light), transparent 72%),
                0 0 var(--space-xs) color-mix(in srgb, var(--key-light), transparent 88%);
            cursor: pointer;
            overflow: visible;
            opacity: 0.86;

            &:disabled {
                cursor: default;
            }

            &.key-light--active {
                opacity: 1;
                background:
                    radial-gradient(
                        circle at 50% 38%,
                        color-mix(in srgb, var(--key-light), transparent 18%) 0%,
                        color-mix(in srgb, var(--key-bg), var(--key-light) 18%) 58%,
                        color-mix(in srgb, var(--key-bg), var(--woodsmoke) 28%) 100%
                    );
                border-color: color-mix(in srgb, var(--key-light), transparent 25%);
                box-shadow:
                    inset 0 0 var(--space-s) color-mix(in srgb, var(--key-light), transparent 48%),
                    0 0 var(--space-s) color-mix(in srgb, var(--key-light), transparent 42%);
            }

            &.key-light--error {
                opacity: 1;
                background:
                    radial-gradient(
                        circle at 50% 38%,
                        color-mix(in srgb, var(--flamingo), transparent 8%) 0%,
                        color-mix(in srgb, var(--key-bg), var(--flamingo) 25%) 60%,
                        color-mix(in srgb, var(--key-bg), var(--woodsmoke) 38%) 100%
                    );
                border-color: var(--flamingo);
                box-shadow:
                    inset 0 0 var(--space-s) color-mix(in srgb, var(--flamingo), transparent 35%),
                    0 0 var(--space-s) color-mix(in srgb, var(--flamingo), transparent 48%);
            }

            &.key-light--help::after {
                content: '➡️';
                font-size: var(--fs-m);
                position: absolute;
                z-index: 1;
                pointer-events: none;
                content: '\27A1\FE0F';
                inset: auto;
                top: var(--help-top, auto);
                right: var(--help-right, auto);
                bottom: var(--help-bottom, auto);
                left: var(--help-left, auto);
                transform: rotate(var(--help-rotate));
            }

            &:nth-child(1) {
                --key-bg: var(--maroon-flush);
                --key-light: #ff007f;
                --key-radius: 100% var(--br-m) var(--br-m) var(--br-m);
                --help-top: calc(var(--space-2xs) * -1);
                --help-left: calc(var(--space-2xs) * -1);
                --help-rotate: 45deg;
                --skills-template:
                    ". center"
                    "outer inner";
            }

            &:nth-child(2) {
                --key-bg: var(--scarlet-gum);
                --key-light: #9d36d4;
                --key-radius: var(--br-m) 100% var(--br-m) var(--br-m);
                --help-top: calc(var(--space-2xs) * -1);
                --help-right: calc(var(--space-2xs) * -1);
                --help-rotate: 135deg;
                --skills-template:
                    "center ."
                    "inner outer";
            }

            &:nth-child(3) {
                --key-bg: var(--chestnut-rose);
                --key-light: #ff6b6b;
                --key-radius: var(--br-m) var(--br-m) var(--br-m) 100%;
                --help-bottom: calc(var(--space-2xs) * -1);
                --help-left: calc(var(--space-2xs) * -1);
                --help-rotate: -45deg;
                --skills-template:
                    "outer inner"
                    ". center";
            }

            &:nth-child(4) {
                --key-bg: var(--hibiscus);
                --key-light: #e63970;
                --key-radius: var(--br-m) var(--br-m) 100% var(--br-m);
                --help-right: calc(var(--space-2xs) * -1);
                --help-bottom: calc(var(--space-2xs) * -1);
                --help-rotate: -135deg;
                --skills-template:
                    "inner outer"
                    "center .";
            }

            .skills {
                width: 76%;
                height: 76%;
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-template-rows: repeat(2, minmax(0, 1fr));
                grid-template-areas: var(--skills-template);
                gap: var(--space-2xs);

                .skills__item {
                    width: 100%;
                    min-width: 0;
                    aspect-ratio: 1 / 1;
                    display: grid;
                    place-items: center;
                    align-self: center;
                    justify-self: center;
                    overflow: visible;

                    svg {
                        max-width: 86%;
                        max-height: 86%;
                        overflow: visible;
                    }

                    &:nth-child(1) {
                        grid-area: center;
                    }

                    &:nth-child(2) {
                        grid-area: inner;
                    }

                    &:nth-child(3) {
                        grid-area: outer;
                    }
                }
            }
        }

    }

    &.simon-says-board--finished {
        .game {
            box-shadow:
                var(--shadow-under),
                0 0 var(--space-s) color-mix(in srgb, var(--flamingo), transparent 68%);
        }
    }

}
.form {
    width: min(100%, calc(45dvw + 15rem));
    margin: 0 auto;
.form-field {
        margin-bottom: var(--space-s);
        padding: 0 0.1em;
        border: none;
.form-field__label {
            display: block;
            margin-bottom: var(--space-2xs);
&:has(+ .form-field__input:focus) {
                color: var(--blue-haze);
                font-weight: 600;
& span {
                    font-weight: 400;
}
}
}
.form-field__label,
        .form-field__label span,
        .form-field__input {
            font-size: var(--fs-xs);
}
.form-field__input {
            background-color: var(--input-bg-inactive);
            color: var(--dolphin);
            width: 100%;
            padding: var(--space-3xs);
            border-radius: var(--br-m);
            outline: var(--o-dolphin-xs);
            transition: var(--tr-xs);
            opacity: 0.7;
&:focus {
                background-color: var(--input-bg-active);
                color: var(--blue-haze);
                outline-color: var(--blue-haze);
                opacity: 1;
}
&.form-field__input--textarea {
                height: clamp(250px, calc(3dvh + 3rem), 10dvh);
}
}
&.form-field--error {
& .form-field__label,
            & .form-field__label:has(+ .form-field__input:focus),
            & .form-field__input {
                color: var(--flamingo);
}
& .form-field__input {
                background-color: #3e3333;
                outline-color: var(--flamingo);
}
}
&.form-field--success {
& .form-field__label,
            & .form-field__label:has(+ .form-field__input:focus),
            & .form-field__input {
                color: var(--mountain-meadow);
}
& .form-field__input {
                background-color: var(--input-bg-success);
                outline-color: var(--mountain-meadow);
}
}
.errors {
            margin-top: var(--space-3xs);
.errors__item {
                color: var(--flamingo);
                font-size: var(--fs-2xs);
                display: inline;
                margin-left: var(--space-3xs);
&:first-of-type {
                    margin-left: 0;
}
}
}
}
}