:root {
    --color-default-black: #1F1F1F;
    --color-default-white: #FFF;
    --color-blue-50: #F5F8FD;
    --color-blue-100: #EAF2FB;
    --color-blue-800: #4B709C;
    --color-pink-50: #FDF5FB;
    --color-pink-100: #FBEAF7;
    --color-pink-700: #B664A4;
    --color-gold-50: #F9F7F1;
    --color-gold-100: #F4EFE3;
    --color-gold-700: #957A41;
    --color-light-green-50: #F4F9F1;
    --color-light-green-100: #E8F4E3;
    --color-light-green-600: #74AE5A;
    --color-light-green-800: #417B27;
    --color-green-0: #F5F9F9;
    --color-green-50: #F1F6F5;
    --color-green-100: #E7F0EF;
    --color-green-125: #D0E0DE;
    --color-green-200: #71A39D;
    --color-green-500: #13655C;
    --color-green-600: #004C43;
    --color-base-100: #FBFBFB;
    --color-base-500: #EBEBEB;
    --color-base-600: #D1D1D1;
    --color-base-800: #858585;
    --color-base-900: #6B6B6B;
    --color-error-100: #FFEEEE;
    --color-error-500: #FF5757;
    --color-red-500: #870305;
    --color-yellow-800: #7B7B27;
    --border-radius-default: 4px;
    --border-radius-s: 2px;
    --max-width: 80rem;
    accent-color: var(--color-green-500);
    height: 100%;
    scroll-behavior: smooth;
}

@view-transition {
    navigation: auto;
}

@font-face {
    font-display: swap;
    font-family: 'Fact VF';
    src: url('../fonts/fact_vf.woff2') format('woff2');
}

body {
    color: var(--color-default-black);
    display: flex;
    flex-direction: column;
    font-family: Fact VF, system-ui, sans-serif;
    margin: 0;
    min-height: 100%;
}

button {
    font-family: inherit;
}

img {
    height: auto;
    margin: 0;
    max-width: 100%;
}

.page-main {
    flex-grow: 1;
}


/* MARK: Utilities */
.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap;
}

.nowrap {
    white-space: nowrap;
}

.about-info dl,
.m-0 {
    margin: 0;
}

.ml-auto {
    margin-inline-start: auto;
}

.p-0 {
    padding: 0;
}

.portfolio-projects__props dt,
.about-info dt,
.c-base-900 {
    color: var(--color-base-900);
}

.link--color {
    text-decoration: none;
}

.link--color,
.link--solid {
    color: var(--color-green-500);
}

.about-info a:hover,
.link--color:hover,
.link--solid:hover,
.link--solid:visited {
    color: var(--color-green-600);
}

button.link--color {
    appearance: none;
    background: none;
    border-radius: 0;
    border: 0;
    font: inherit;
    padding: 0;
    text-align: inherit;
}

.link--solid {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

.link--back {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2313655C'%3E%3Cpath d='m9.602 12-4-4 4-4 .85.85L7.302 8l3.15 3.15-.85.85Z'/%3E%3C/svg%3E") left no-repeat;
    display: inline-block;
    text-align: left;
    padding-left: 18px;
}

button.link--close {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2313655C'%3E%3Cpath d='M4.675 12.5 3.5 11.325l3.313-3.337L3.5 4.675 4.675 3.5l3.337 3.313L11.325 3.5 12.5 4.675 9.187 7.988l3.313 3.337-1.175 1.175-3.313-3.313L4.675 12.5Z'/%3E%3C/svg%3E") 100% 5px no-repeat;
    display: inline-block;
    text-align: right;
    padding-right: 18px;
}

.about-graph__chart::before,
.entry-field output,
.entry-field textarea:not(:placeholder-shown)~label,
.entry-field input:not(:placeholder-shown)~label,
.entry-field textarea:focus~label,
.entry-field input:focus~label,
.description-1 {
    font-weight: 400;
    font-size: 11px;
    font-variation-settings: 'wdth' 100, 'wght' 400;
    line-height: 12px;
    letter-spacing: -.01em;
}

.text-1 {
    font-weight: 400;
    font-variation-settings: 'wdth' 100, 'wght' 400;
    font-size: 22px;
    line-height: 24px;
    letter-spacing: -.01em;
}

table-saw ::before,
.table thead th,
.table-like> :first-child,
.info-group dt,
.entry-field,
.text-2 {
    font-size: 15px;
    font-variation-settings: 'wdth' 100, 'wght' 400;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -.01em;
}

.text-2-long {
    line-height: 20px;
}

.portfolio-projects__props dt,
.about-info dt,
.page-header__badge,
.checkbox-field,
.dz-size,
.text-3 {
    font-weight: 400;
    font-size: 13px;
    font-variation-settings: 'wdth' 100, 'wght' 400;
    line-height: 16px;
    letter-spacing: -.01em;
}

.header-1 {
    font-weight: 500;
    font-size: 44px;
    font-variation-settings: 'wdth' 88, 'wght' 500;
    line-height: 52px;
}

@media (max-width: 980px) {
    .header-1 {
        font-size: 36px;
        line-height: 40px;
    }
}

.info-group dd,
.header-2 {
    font-weight: 500;
    font-size: 34px;
    font-variation-settings: 'wdth' 88, 'wght' 500;
    line-height: 40px;
}

.header-2-alt {
    font-weight: 400;
    font-variation-settings: 'wdth' 88;
}

.header-3 {
    font-weight: 500;
    font-size: 28px;
    font-variation-settings: 'wdth' 88, 'wght' 500;
    line-height: 32px;
}

.header-3-alt {
    font-weight: 400;
    font-variation-settings: 'wdth' 88;
}

.header-4 {
    font-weight: 500;
    font-size: 20px;
    font-variation-settings: 'wdth' 88, 'wght' 500;
}

.header-4--long {
    line-height: 24px;
}

.portfolio-projects__props dd,
.table,
.table tbody th,
.table-like,
.btn,
.view-switch,
.header-5 {
    font-weight: 500;
    font-size: 17px;
    font-variation-settings: 'wdth' 88, 'wght' 500;
    line-height: 20px;
}

.portfolio-projects__props dd,
.table,
.table-like,
.header-5-alt {
    font-variation-settings: 'wdth' 88;
    font-weight: 400;
}

.info-group> :first-child,
.page-header__link,
.dz-filename,
.header-6 {
    font-weight: 500;
    font-size: 15px;
    font-variation-settings: 'wdth' 88, 'wght' 500;
    line-height: 16px;
}

.dz-filename,
.header-6-alt {
    font-variation-settings: 'wdth' 88;
    font-weight: 400;
}

/* MARK: Fields */
.entry-field {
    align-items: center;
    align-self: stretch;
    background-color: var(--color-base-100);
    border-radius: var(--border-radius-default);
    border-width: 1px;
    border: 1px solid var(--color-base-500);
    box-sizing: border-box;
    color: var(--color-base-800);
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto 0;
    margin: 0;
    min-height: 3.375rem;
    padding: 7px 1rem;
    position: relative;
    text-align: start;
}

.entry-field:not([hidden]) {
    display: grid;
}

.entry-field:has(output),
.entry-field:has(textarea:not(:placeholder-shown)),
.entry-field:has(input:not(:placeholder-shown)),
.entry-field:focus-within {
    align-items: start;
    grid-template-rows: auto auto;
}

.entry-field:focus-within {
    outline: auto;
}

.entry-field:has([aria-invalid="true"]) {
    border-color: var(--color-error-500);
}

.entry-field:has([aria-invalid="true"]) label {
    color: var(--color-error-500);
}

.entry-field label::before {
    content: '';
    inset: 0;
    position: absolute;
}

.entry-field textarea,
.entry-field output,
.entry-field input {
    background: transparent;
    border: 0;
    box-sizing: border-box;
    caret-color: var(--color-light-green-600);
    color: var(--color-default-black);
    font: inherit;
    font-size: 16px;
    margin: 0;
    padding: 0;
    order: 1;
    outline: none;
    position: relative;
    width: 100%;
    z-index: 1;
}

.entry-field[data-value]::after {
    content: attr(data-value) ' ';
    display: block;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    grid-column: 1/2;
    grid-row: 2/3;
    letter-spacing: normal;
    line-height: 1;
    padding-block-start: .5rem;
    visibility: hidden;
    white-space: pre-wrap;
}

.entry-field textarea {
    align-self: stretch;
    box-sizing: border-box;
    grid-column: 1/2;
    grid-row: 2/3;
    line-height: 1;
    min-height: 1.375rem;
    overflow: hidden;
    resize: none;
    vertical-align: middle;
}

.entry-field textarea::-webkit-scrollbar {
    display: none;
}

.entry-field textarea,
.entry-field input {
    font-variant-numeric: tabular-nums;
    opacity: 0;
}

.entry-field textarea::disabled,
.entry-field input:disabled {
    color: var(--color-base-600);
}

.entry-field textarea:not(:placeholder-shown),
.entry-field textarea:focus,
.entry-field input:not(:placeholder-shown),
.entry-field input:focus {
    padding-block-start: .25rem;
    opacity: 1;
}

.entry-field__note {
    display: block;
    margin-block-start: .375rem;
}

.entry-field__note+.entry-field,
.entry-field-row+.entry-field,
.entry-field+.entry-field-row,
.entry-field+.entry-field {
    margin-block-start: 1rem;
}

.entry-field-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

.entry-field-row .entry-field {
    margin: 0;
}

.entry-field__toggle {
    background: none;
    border: 0;
    cursor: pointer;
    grid-column: 2/3;
    grid-row: 1/3;
    margin: 0;
    padding: 0;
    z-index: 1;
}

.entry-field__toggle[aria-pressed="true"] img:first-child {
    display: none;
}

.entry-field__toggle[aria-pressed="true"] img:last-child {
    display: inline-block;
}

input:disabled~.entry-field__toggle {
    display: none;
}

.entry-field .suggestions-wrapper {
    bottom: 0;
    left: .5rem;
    position: absolute;
    right: .5rem;
}

.entry-field .suggestions-suggestions {
    border-color: var(--color-base-500);
}

.entry-field .suggestions-suggestions strong {
    color: var(--color-green-500);
}

.entry-field .suggestions-hint,
.entry-field .suggestions-suggestion {
    padding: .25rem .4rem;
}

.entry-field .suggestions-promo {
    display: none !important;
}

/* MARK: Checkbox */
.checkbox-field {
    align-items: start;
    display: flex;
    text-align: start;
    gap: .5rem;
    margin: 1rem 0 0;
    position: relative;
}

.checkbox-field__tick {
    background-color: var(--color-green-0);
    border: 1px solid var(--color-green-500);
    border-radius: var(--border-radius-s);
    display: inline-block;
    margin-block-start: -2px;
    padding: 9px;
}

.checkbox-field__input:focus+.checkbox-field__tick {
    outline: auto;
}

.checkbox-field__input:checked+.checkbox-field__tick {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' fill='%23fff'%3E%3Cpath d='M3.333 7.73 0 4.395l1.063-1.063 2.27 2.271L8.937 0 10 1.063 3.333 7.729Z'/%3E%3C/svg%3E") center no-repeat var(--color-green-500);
}

.checkbox-field:has([aria-invalid="true"]) {
    color: var(--color-error-500);
}

.checkbox-field:has([aria-invalid="true"]) .checkbox-field__tick {
    background-color: var(--color-error-100);
    border-color: var(--color-error-500);
}

.checkbox-field:has([aria-invalid="true"]) a {
    color: inherit;
}

.checkbox-field label::before {
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    bottom: 0;
    width: calc(20px + .5rem);
}

/* MARK: Radiobutton */
.radio-list {
    border: 0;
    margin: 1.5rem 0 1.75rem;
    padding: 0;
}

.radio-list__legend {
    margin: 0 0 .75rem;
    padding: 0;
}

.radio-list__item {
    align-items: center;
    border: 1px solid var(--color-base-500);
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    position: relative;
}

.radio-list__item::after {
    background-clip: padding-box;
    content: '';
    padding: 3px;
    display: inline-block;
    border-radius: 50%;
    border: 3px solid transparent;
    box-shadow: 0 0 0 2px;
}

.radio-list__item:has(input:checked) {
    background-color: var(--color-green-0);
    color: var(--color-green-500);
}

.radio-list__item:has(input:checked)::after {
    background-color: currentColor;
}

.radio-list__item:focus-within::after {
    outline: auto;
    outline-offset: 3px;
}

.radio-list__item+.radio-list__item {
    border-top-width: 0;
}

.radio-list__item:first-child {
    border-top-left-radius: var(--border-radius-default);
    border-top-right-radius: var(--border-radius-default);
}

.radio-list__item:last-child {
    border-bottom-left-radius: var(--border-radius-default);
    border-bottom-right-radius: var(--border-radius-default);
}

/* MARK: Buttons */
.btn {
    background-color: var(--color-green-500);
    border-radius: var(--border-radius-default);
    border: 1px solid transparent;
    margin: 0;
    padding: 14px 16px;
    color: var(--color-default-white);
    font-family: inherit;
    text-align: center;
}

.btn:hover {
    background-color: var(--color-green-600);
    color: var(--color-default-white);
}

.btn--submit {
    align-self: stretch;
    box-sizing: border-box;
    display: block;
    margin-block-start: 1.5rem;
    width: 100%;
}

a.btn {
    text-decoration: none;
}

.btn--secondary {
    background-color: var(--color-green-50);
    color: var(--color-green-500);
}

.btn--secondary:hover {
    background-color: var(--color-green-100);
    color: var(--color-green-500);
}

/* MARK: Footer */
.page-footer {
    background-color: var(--color-base-100);
    border-top: 1px solid var(--color-base-500);
    padding: 1.5rem 1.5rem 1rem;
    text-align: center;
}

.page-footer__row {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.75rem;
    justify-content: center;
    margin-block: 1rem;
}

.page-footer__row>.page-footer__link:first-child {
    text-align: start;
}

.page-footer__row>* {
    min-width: 15.5rem;
}

.page-footer__link {
    color: inherit;
    text-decoration: none;
}

.page-footer__link:hover {
    color: var(--color-base-800);
}

.page-footer__link-group {
    display: flex;
    flex-wrap: wrap;
    gap: inherit;
    justify-content: end;
}

.page-footer__info {
    color: var(--color-base-900);
    margin-inline: auto;
}

@media (max-width: 1036px) {
    .page-footer__info {
        flex-basis: 100%;
        order: 1;
    }

    .page-footer__row .page-footer__link:first-child {
        text-align: center;
    }

    .page-footer__link {
        min-width: auto;
    }
}

.login-page .page-footer {
    background-color: transparent;
    border: none;
}

.login-page .page-footer__logo {
    display: inline-block;
}

.login-page .page-footer__logo--dark {
    display: none;
}

.login-page .page-footer__info {
    color: var(--color-base-600);
}

.login-page .page-footer__link--studio {
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 8px;
    margin-inline: auto;
    text-align: start;
    text-transform: uppercase;
}

@media (max-width: 380px) {
    .page-footer__link--studio {
        max-width: min-content;
    }

    .page-footer__link-group {
        align-items: center;
        flex-direction: column;
        order: -1;
    }

}

/* MARK: Header */
.page-header {
    background-color: var(--color-default-white);
    border-bottom: 1px solid var(--color-base-500);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

.page-header__logo {
    align-self: center;
    margin: .5rem 1rem;
}

@media (min-width: 980px) {
    .page-header__logo {
        margin-inline: 1.5rem;
    }
}

.page-header__nav {
    display: flex;
    flex-wrap: wrap;
}

.page-header__link {
    align-items: center;
    box-sizing: border-box;
    color: var(--color-default-black);
    flex-wrap: wrap;
    gap: 7px;
    min-height: 64px;
    padding: .5rem .75rem;
    text-decoration: none;
}

.page-header__link:not([hidden]) {
    display: inline-flex;
}

.page-header__link:hover,
.page-header__link--active {
    color: var(--color-base-800);
}

.page-header__link--menu {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%231F1F1F'%3E%3Cpath d='M3 7V5h18v2H3Zm0 12v-2h18v2H3Zm0-6v-2h18v2H3Z'/%3E%3C/svg%3E") center no-repeat;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    margin: 0;
    padding-inline: 1.625rem;
}

@media (max-width: 980px) {
    .page-header__link--menu {
        display: inline-block;
    }

    .page-header__link--menu~.page-header__link,
    .page-header__link--menu[aria-expanded="false"]+.page-header__nav {
        display: none;
    }

    .page-header__nav {
        background-color: var(--color-default-white);
        border-bottom: 1px solid var(--color-base-500);
        display: block;
        flex-basis: 100%;
        left: 0;
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 2;
    }

    .page-header__nav>.page-header__link {
        display: flex;
        justify-content: center;
        text-align: center;
    }
}

.avatar {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--color-base-500);
    margin: 0;
    object-fit: cover;
    object-position: center;
    vertical-align: middle;
}

.page-header__badge {
    background-color: var(--color-base-100);
    background-position: 6px;
    background-size: 16px;
    background-repeat: no-repeat;
    border-radius: var(--border-radius-default);
    color: var(--color-base-800);
    padding: 6px 6px 6px 26px;
}

.page-header__badge--rating {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cmask id='a' width='16' height='16' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23D9D9D9' d='M0 0h16v16H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23C8AD74' d='m8 1.824 2.41 3.513 4.09 1.205-2.6 3.375.117 4.257L8 12.747l-4.017 1.427.117-4.257-2.6-3.375 4.09-1.205L8 1.824Z'/%3E%3Cmask id='b' width='14' height='14' x='1' y='1' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%238EC874' d='m8 1.824 2.41 3.513 4.09 1.205-2.6 3.375.117 4.257L8 12.747l-4.017 1.427.117-4.257-2.6-3.375 4.09-1.205L8 1.824Z'/%3E%3C/mask%3E%3Cg fill='%23957A41' mask='url(%23b)'%3E%3Cpath d='M7.946 7.89 8 1.825 5.562 5.291l2.384 2.6ZM7.945 7.89l-4.062 6.392 4.116-1.408-.054-4.983Z'/%3E%3Cpath d='M7.946 7.89 1.5 6.534l2.546 3.413 3.9-2.059Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-color: var(--color-gold-50);
    color: var(--color-gold-700);
}

.page-header__link:hover .page-header__badge--rating {
    background-color: var(--color-gold-100);
}

.page-header__badge--balance {
    background-image: url("../images/icons/structure-portfolio.svg");
    background-color: var(--color-light-green-50);
    color: var(--color-light-green-800);
}

.page-header__link:hover .page-header__badge--balance {
    background-color: var(--color-light-green-100);
}


.page-header__link--logout {
    padding-inline: 1.5rem;
}

.page-submenu {
    --inline-padding: 1rem;
    align-items: end;
    background: linear-gradient(0deg, var(--color-base-500) 1px, var(--color-default-white) 1px);
    column-gap: 1.75rem;
    display: flex;
    list-style: none;
    margin: 0;
    overflow: auto hidden;
    padding: 0 var(--inline-padding);
    position: sticky;
    scroll-padding: var(--inline-padding);
    scrollbar-width: none;
    top: 0;
    z-index: 1;
}

html:has(.page-submenu) {
    scroll-padding-top: 40px;
}

@media (min-width: 980px) {
    .page-submenu {
        --inline-padding: 1.75rem;
    }
}

.page-submenu>li {
    flex-shrink: 0;
}

.page-submenu> :first-child {
    margin-inline-start: auto;
}

.page-submenu> :last-child {
    margin-inline-end: auto;
}

.page-submenu a {
    border-bottom: 2px solid transparent;
    color: inherit;
    display: block;
    text-decoration: none;
    padding-block: .625rem .5rem;
}

.page-submenu a[aria-current="true"] {
    color: var(--color-green-500);
    border-bottom-color: currentColor;
}

/* MARK: Table */
.table {
    border-spacing: 0;
    width: 100%;
}

.table-like {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.table-like>* {
    margin: 0;
}

.table-like> :first-child,
.table thead th {
    background-color: var(--color-base-100);
    border-color: var(--color-base-500);
    border-style: solid;
    border-block-width: 1px;
    border-right-width: 1px;
    border-left-width: 0;
    color: var(--color-base-900);
    padding: .75rem 1rem;
    text-align: start;
}

.table-like> :first-child,
.table thead tr:first-child th:first-child {
    border-top-left-radius: var(--border-radius-default);
    border-left-width: 1px;
}

.table-like> :first-child,
.table thead tr:first-child th:last-child {
    border-top-right-radius: var(--border-radius-default);
}

.table-like> :last-child,
.table :not(thead) tr>* {
    border-color: var(--color-base-500);
    border-style: solid;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-left-width: 0;
    border-top-width: 0;
    padding: .75rem 1rem;
}

.table-like> :last-child,
.table :not(thead) tr> :first-child {
    border-left-width: 1px;
}

.table-like> :last-child,
.table> :last-child tr:last-child> :first-child {
    border-bottom-left-radius: var(--border-radius-default);
}

.table-like> :last-child,
.table> :last-child tr:last-child> :last-child {
    border-bottom-right-radius: var(--border-radius-default);
}

.table-like> :last-child {
    flex-grow: 1;
}

.table [colspan] {
    text-align: center;
}

.table small {
    color: var(--color-base-900);
    display: block;
    margin-block-start: .25rem;
}

.positive {
    color: var(--color-light-green-800);
}

.negative {
    color: var(--color-red-500);
}

table-saw {
    max-width: 100%;
    overflow-x: auto;
}

table-saw ::before {
    color: var(--color-base-900);
}

@media (max-width: 50em) {
    table-saw tr:not(:last-child) {
        border-block-end: 1px solid var(--color-base-500);
    }

    table-saw .table tr>* {
        border: none;
        padding-inline: 0;
    }

    table-saw .table tr>:last-child {
        padding-bottom: 1.5rem;
    }

    table-saw .table tr>*+* {
        padding-block-start: 0;
    }

    table-saw .table tfoot td {
        --table-saw-ratio: 1fr;
        padding: 0 !important;
    }

    table-saw tfoot ::before {
        display: none;
    }
}

/* MARK: Info group */
.info-group {
    color: var(--color-light-green-800);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.info-group> :first-child {
    background-color: var(--color-light-green-100);
    border-top-left-radius: var(--border-radius-default);
    border-top-right-radius: var(--border-radius-default);
    margin: 0;
    padding: 22px 1.5rem;
}

.info-group> :first-child svg {
    vertical-align: text-bottom;
}

.info-group dl {
    align-content: end;
    background-color: var(--color-light-green-50);
    border-bottom-left-radius: var(--border-radius-default);
    border-bottom-right-radius: var(--border-radius-default);
    display: grid;
    flex-grow: 1;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin: 0;
    padding: 1.5rem;
}

.info-group dd {
    color: var(--color-default-black);
    font-variation-settings: 'wdth' 88;
    font-weight: 300;
    margin: 0 0 .25rem;
    padding: 0;
}

.info-group--gold {
    color: var(--color-gold-700);
}

.info-group--gold> :first-child {
    background-color: var(--color-gold-100);
}

.info-group--gold dl {
    background-color: var(--color-gold-50);
}

.info-group--blue {
    color: var(--color-blue-800);
}

.info-group--blue> :first-child {
    background-color: var(--color-blue-100);
}

.info-group--blue dl {
    background-color: var(--color-blue-50);
}

.info-group--pink {
    color: var(--color-pink-700);
}

.info-group--pink> :first-child {
    background-color: var(--color-pink-100);
}

.info-group--pink dl {
    background-color: var(--color-pink-50);
}

/* MARK: Login */
.login-page {
    background: url('../images/login-bg.svg') top no-repeat var(--color-green-500);
    color: var(--color-default-white);
    text-align: center;
}

.login-form {
    background-color: var(--color-default-white);
    border-radius: var(--border-radius-default);
    box-sizing: border-box;
    color: var(--color-default-black);
    margin: 1rem auto auto;
    padding: 1.5rem;
    width: min(344px, 100vw - 1rem);
}

@media (min-width: 480px) {
    .login-form {
        margin-block-start: 1.5rem;
    }
}

.login-form__header {
    align-items: last baseline;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.login-form__logo {
    grid-column: 2/3;
}

.login-form__title {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 20px 0 16px;
    text-align: start;
}

.login-form__body {
    display: flex;
    flex-direction: column;
}

.login-form__timer {
    margin: 1.5rem 0 0;
    text-align: center;
}

:not(.login-form__timer)+.login-form__timer {
    display: block;
}

.login-form .btn {
    margin-block-start: 1.5rem;
}

.login-form__login {
    margin-block-start: 1.25rem;
}

/* MARK: Profile */
.profile-page {
    padding-inline: 1rem;
}

.profile-page__banner {
    background-color: var(--color-green-50);
    border-radius: var(--border-radius-default);
    line-height: 1.25;
    margin: 1.5rem auto;
    max-width: 31rem;
    /* 496 px */
    padding: 1.5rem;
}

.profile-page__name {
    margin-block: .75rem .5rem;
    text-align: center;
}

.profile-page__edit {
    margin: 2rem auto 7rem;
    max-width: 22rem;
}

.profile-page__avatar {
    display: block;
    position: relative;
    margin: 0 auto .75rem;
    text-align: center;
}

.profile-page__avatar::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23fff'%3E%3Cpath d='M4.77 15.523h.98l7.833-7.822-.99-.99-7.822 7.844v.968ZM3.376 16.92v-2.958L13.583 3.742c.139-.143.289-.246.45-.31.16-.064.333-.096.515-.096s.357.033.524.099c.167.066.327.168.48.307l1 .99c.139.146.241.3.307.463.066.164.1.334.1.512 0 .19-.033.369-.098.536-.065.167-.168.32-.309.458L6.333 16.919H3.375Zm9.71-9.71-.491-.498.99.99-.5-.491Z'/%3E%3C/svg%3E") center no-repeat var(--color-green-500);
    border-radius: 50%;
    bottom: 0;
    content: '';
    display: inline-block;
    padding: 18px;
    position: absolute;
    transform: translateX(-50%);
}

.profile-page__avatar:hover::after {
    background-color: var(--color-green-600);
}

.profile-page__avatar:has([src$="userpic.svg"])::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23fff'%3E%3Cpath d='M4.357 5.648H.21V4.357h4.146V.21h1.291v4.146h4.146v1.291H5.648v4.146H4.357V5.648Z'/%3E%3C/svg%3E");
}

.profile-page__approve {
    color: var(--color-red-500);
    display: flex;
    gap: .25rem;
    justify-content: center;
    margin: 0;
}

.profile-page__approve svg {
    margin-top: 3px;
}

.profile-page__approve--checking {
    color: var(--color-yellow-800);
}

.profile-page__approve--approved {
    color: var(--color-light-green-800);
}

.profile-page__number {
    color: var(--color-base-900);
    margin-block: .5rem 1rem;
    text-align: center;
}

.profile-page--form {
    background-color: var(--color-base-100);
}

.profile-form {
    border: 1px solid var(--color-base-500);
    border-radius: var(--border-radius-default);
    background-color: var(--color-default-white);
    margin: 1.5rem auto 6.25rem;
    max-width: 25rem;
    padding: 1.5rem;
}

.profile-page__description {
    color: var(--color-base-900);
    margin-block: .25rem .75rem;
}

.profile-form__fieldset {
    border: 0;
    margin: 1.75rem 0;
    padding: 0;
}

.profile-form__legend {
    margin: 0 0 .75rem;
    padding: 0;
}

.profile-modal {
    border: 0;
    border-radius: var(--border-radius-default);
    padding: 0;
}

.profile-modal .login-form__header {
    grid-template-columns: 1fr;
}

.profile-modal form {
    margin: 0;
}

.profile-modal::backdrop {
    background-color: rgba(31, 31, 31, 0.5);
}

.dz-message {
    border-radius: var(--border-radius-default);
    background-color: var(--color-green-0);
    border: 2px dashed var(--color-green-200);
    color: var(--color-base-800);
    margin: 0;
    padding: 3rem 1rem;
    text-align: center;
}

.dz-drag-hover .dz-message {
    background-color: var(--color-green-125);
}

.dz-message span {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' fill='%23004C43'%3E%3Cpath d='M7.839 13.335V7.9L6.105 9.635l-.933-.967 3.333-3.333 3.333 3.333-.933.967L9.172 7.9v5.434H7.839ZM3.172 6v-2c0-.366.13-.68.392-.941.26-.261.575-.392.941-.392h8c.367 0 .68.13.942.392.261.26.392.575.392.941v2h-1.334v-2h-8v2H3.172Z'/%3E%3C/svg%3E") right no-repeat;
    padding-right: 18px;
}

.profile-form:has(.dz-fallback) .profile-form__fieldset:last-of-type {
    display: none;
}

.dz-preview {
    align-items: center;
    background-color: var(--color-base-100);
    border-radius: var(--border-radius-default);
    border: 1px solid var(--color-base-500);
    display: grid;
    margin-block-start: 1rem;
    column-gap: .5rem;
    grid-template-columns: auto 1fr auto;
    padding: 0.25rem;
}

.dz-image>img[src] {
    border-radius: var(--border-radius-default);
    border: 1px solid var(--color-base-500);
    height: 38px;
    object-fit: cover;
    vertical-align: middle;
    width: 38px;
}

.dz-details {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.dz-filename {
    grid-row: 1/2;
}

.dz-size {
    color: var(--color-base-900);
}

.dz-size strong {
    font: inherit;
}

.dz-details~ :not(.dz-remove) {
    display: none;
}

.dz-remove {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23870305'%3E%3Cpath d='M8.333 13.23 10 11.561l1.667 1.667 1.062-1.062-1.666-1.667 1.666-1.667-1.062-1.062L10 9.438 8.333 7.77 7.271 8.833 8.938 10.5 7.27 12.167l1.062 1.062ZM6.5 17c-.412 0-.766-.147-1.06-.44A1.445 1.445 0 0 1 5 15.5v-10H4V4h4V3h4v1h4v1.5h-1v9.991c0 .423-.147.78-.44 1.072A1.45 1.45 0 0 1 13.5 17h-7Zm7-11.5h-7v10h7v-10Z'/%3E%3C/svg%3E") 8px 50% no-repeat;
    color: transparent;
    width: 40px;
    overflow: hidden;
}

/* MARK: About */
.about-founder {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2.5rem;
}

.about-founder h1 {
    flex-basis: 100%;
}

.about-founder blockquote {
    flex-basis: 320px;
    flex-grow: 1;
    flex-shrink: 1;
    font-size: 17px;
    font-variation-settings: 'wdth' 88, 'wght' 500;
    font-weight: 500;
    line-height: 22px;
    margin: 0 0 1.5rem;
}

@media (min-width: 980px) {
    .about-founder blockquote {
        font-size: 20px;
        line-height: 27px;
    }
}

.about-founder p {
    margin: 0;
}

.about-founder p+p {
    margin-block-start: .5rem;
}

.about-founder figure {
    flex-shrink: 1;
    margin: 0;
    max-width: min(100%, 608px);
}

.about-founder__video {
    aspect-ratio: 16/9;
    background-color: var(--color-default-black);
    border-radius: var(--border-radius-default);
    height: auto;
    margin: 0 0 .75rem;
    object-fit: cover;
    vertical-align: middle;
    width: 100%;
}

.about-graph h2,
.about-key h2 {
    margin-block: 3.5rem 1.5rem;
}

.about-key__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.about-key__factoid {
    background-repeat: no-repeat;
    background-size: 64px;
    padding-top: 72px;
}

.about-key__factoid--capital {
    background-image: url("../images/icons/key-capital.svg");
}

.about-key__factoid--profit {
    background-image: url("../images/icons/key-profit.svg");
}

.about-key__factoid--sold {
    background-image: url("../images/icons/key-sold.svg");
}

.about-key__factoid--earned {
    background-image: url("../images/icons/key-earned.svg");
}

.about-key__factoid--members {
    background-image: url("../images/icons/key-members.svg");
}

.about-key__factoid--sum {
    background-image: url("../images/icons/key-sum.svg");
}

.about-key__factoid--area {
    background-image: url("../images/icons/key-area.svg");
}

.about-key__factoid--projects {
    background-image: url("../images/icons/key-projects.svg");
}

.about-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.about-contacts>h2 {
    flex-basis: 100%;
    margin-block: 3.5rem .5rem;
}

.about-contacts__block {
    background-color: var(--color-base-100);
    border-bottom-left-radius: var(--border-radius-default);
    border-bottom-right-radius: var(--border-radius-default);
    flex-grow: 3;
}

.about-contacts__map {
    border-top-left-radius: var(--border-radius-default);
    border-top-right-radius: var(--border-radius-default);
    height: 272px;
}

.ymaps3--default-marker__background {
    color: var(--color-green-500) !important;
}

.about-info {
    display: flex;
    flex-wrap: wrap;
    font-weight: inherit;
    font-variation-settings: 'wdth' 88;
    gap: 3rem;
    padding: 1.5rem 1.5rem 3rem;
}

.about-info dd {
    margin: .25rem 0 0;
}

.about-info dd+dt {
    margin-block-start: 1rem;
}

.about-info a {
    font-variation-settings: 'wdth' 88, 'wght' 500;
    color: var(--color-green-500);
    text-decoration: none;
}

.about-info br+a {
    display: inline-block;
    margin-block-start: .5rem;
}

.about-tg {
    align-items: center;
    background-color: var(--color-green-50);
    border-radius: var(--border-radius-default);
    box-sizing: border-box;
    display: inline-flex;
    flex-basis: 25rem;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    text-align: center;
    padding: 3rem;
}

.about-tg img {
    border-radius: 50%;
    vertical-align: middle;
}

.about-tg p {
    margin-block: .75rem 1.5rem;
}

.about-graph__chart {
    position: relative;
    min-height: 300px;
}

.about-graph__chart::before {
    color: var(--color-base-900);
    content: 'млн. руб';
    left: 1ch;
    position: absolute;
    top: 0;
    width: min-content;
}

@media (min-width: 980px) {
    .about-graph__chart::before {
        left: -2ch;
        top: .7lh;
        width: auto;
    }
}

.about-graph__legend ul {
    border-top: 1px solid var(--color-base-600);
    direction: rtl;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap-reverse;
    gap: 1rem;
    list-style: none;
    margin-block: 1rem 0;
    max-height: 6lh;
    padding: 1rem 0 0;
    text-align: end;
}

@media (min-width: 720px) {
    .about-graph__legend ul {
        direction: ltr;
        flex-direction: row;
        margin-inline: 2rem;
    }
}

.about-graph__legend li {
    align-items: center;
    direction: ltr;
    display: flex;
    gap: .5rem;
}

.about-graph__legend span {
    margin: 0;
    padding: 1.5px .75rem;
}

.about-graph__legend li:nth-child(2)~* {
    order: -1;
}

.about-graph__legend li:nth-child(2)~* span {
    padding-block: .375rem;
}

.about-graph__legend p {
    margin: 0;
}

/* MARK: Operations */
.operations-page {
    box-sizing: border-box;
    margin-inline: auto;
    max-width: var(--max-width);
    padding: 2rem 1.5rem 2rem;
    width: 100%;
}

.operations-page__title {
    margin: 0 0 1.5rem;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block-end: 2rem;
}

.filters>* {
    flex-grow: 1;
}

.filters output {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filters__block {
    cursor: default;
    flex-basis: 15rem;
    flex-grow: 10;
    position: relative;
}

.filters__block .entry-field {
    align-items: center;
}

details.filters__block .entry-field::after {
    background: url('../images/icons/arrow-down.svg') center no-repeat;
    content: "";
    grid-column: 2 / 3;
    grid-row: span 2;
    padding: 10px;
}

.calendar__toggle {
    background: url('../images/icons/calendar.svg') center no-repeat;
    border: 0;
    border-radius: var(--border-radius-s);
    grid-column: 2 / 3;
    grid-row: span 2;
    margin: 0;
    padding: 10px;
}

.calendar__toggle--clear {
    background-image: url('../images/icons/cross.svg');
}

.calendar__toggle::before {
    border-radius: var(--border-radius-default);
    content: '';
    display: block;
    position: absolute;
    inset: 0;
}

.filters__block:has(.datepicker.active) .entry-field::after,
.filters__block:open .entry-field::after {
    transform: scaleY(-1);
}

.filters__popup {
    border-radius: var(--border-radius-default);
    box-shadow: 0px 4px 16px 0px #00000029;
    left: 0;
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 2;
}

.filters__popup> :first-child {
    border-top-left-radius: var(--border-radius-default);
    border-top-right-radius: var(--border-radius-default);
}

.filters__popup> :last-child {
    border-bottom-left-radius: var(--border-radius-default);
    border-bottom-right-radius: var(--border-radius-default);
}

.filters__popup>* {
    align-items: center;
    background-color: var(--color-default-white);
    border: 1px solid var(--color-base-500);
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
}

.filters__popup>*+* {
    margin-top: -1px;
}

.filters__empty {
    margin-block: 3.25rem 0;
    text-align: center;
}

@media (min-width: 980px) {
    .filters__empty {
        font-size: 28px;
        line-height: 32px;
        margin-block-start: 5rem;
    }
}

.filters__block .datepicker {
    box-shadow: 0px 4px 16px 0px #00000029;
    top: auto !important;
    left: 0 !important;
    min-width: 100%;
}

div.datepicker-header .datepicker-controls {
    padding: 18px 16px;
}

.datepicker-header .datepicker-controls button.button {
    font-weight: inherit;
}

.datepicker-header .datepicker-controls button.view-switch:hover {
    background: none;
    color: var(--color-green-500);
}

.view-switch::after {
    background: url("../images/icons/arrow-down.svg") center / contain no-repeat;
    content: '';
    display: inline-block;
    margin-left: 4px;
    padding: 10px;
}

.datepicker-controls button.next-button,
.datepicker-controls button.prev-button {
    aspect-ratio: 1;
    background: url("../images/icons/arrow-down.svg") center / 20px no-repeat var(--color-green-50);
}

.prev-button {
    transform: rotate(90deg);
}

.next-button {
    transform: rotate(-90deg);
}

div.datepicker-main {
    padding: 0;
}

div.datepicker-view {
    width: auto;
}

.days-of-week {
    background-color: var(--color-base-100);
    border-block: 1px solid var(--color-base-500);
    padding-inline: 20px;
}

.datepicker .days-of-week .dow {
    font-weight: inherit;
    padding-block: 7px;
}

.datepicker .datepicker-cell.range-end:not(.selected),
.datepicker .datepicker-cell.range-start:not(.selected),
.datepicker .datepicker-cell.selected,
.datepicker .datepicker-cell.selected:hover {
    background-color: var(--color-light-green-600);
}

.datepicker .datepicker-cell.range {
    background-color: var(--color-light-green-100);
}

.datepicker .datepicker-cell.today.focused:not(.selected) {
    background: none;
    color: var(--color-light-green-600);
}

.datepicker-grid {
    padding: 0 20px 20px;
}

.operations-page thead {
    view-transition-name: operations-header;
}

/* MARK: Portfolio */
.inner-page {
    box-sizing: border-box;
    margin-inline: auto;
    max-width: var(--max-width);
    padding: 1.75rem 1rem 4.5rem;
}

@media (min-width: 980px) {
    .inner-page {
        padding: 2rem 1.5rem 6.25rem;
    }
}

.portfolio-structure {
    display: grid;
    gap: 1rem;
    margin-block-end: 3.5rem;
}

.portfolio-structure h1 {
    margin: 0 0 .5rem;
}

.portfolio-structure .info-group> :first-child {
    background-image: url('../images/icons/info.svg'), var(--info-group-icon);
    background-repeat: no-repeat;
    background-position: right, 1.5rem 50%;
    background-origin: content-box, border-box;
    padding: 1rem 1.5rem 1rem 3.25rem;
}

.portfolio-structure__portfolio {
    --info-group-icon: url("../images/icons/structure-portfolio.svg");
}

.portfolio-structure__income {
    --info-group-icon: url("../images/icons/structure-income.svg");
}

.portfolio-structure__active {
    --info-group-icon: url("../images/icons/structure-active.svg");
}

.portfolio-structure__investments {
    --info-group-icon: url("../images/icons/structure-investments.svg");
}

@media (min-width: 780px) {
    .portfolio-structure h1 {
        grid-column: span 2;
    }
}

@media (min-width: 1280px) {
    .portfolio-structure {
        grid-template-columns: repeat(4, 1fr);
    }

    .portfolio-structure h1 {
        grid-column: span 4;
    }

    .portfolio-structure__portfolio {
        grid-column: span 2;
        grid-row: span 2;
    }

    .portfolio-structure__portfolio dl {
        grid-template-columns: auto;
    }

    .portfolio-structure__portfolio dd {
        font-size: 80px;
        font-variation-settings: 'wdth' 87.5, 'wght' 300;
        line-height: 1;
    }

    .portfolio-structure__portfolio dl dt {
        font-weight: 400;
        font-variation-settings: 'wdth' 100, 'wght' 400;
        font-size: 22px;
        line-height: 24px;
        letter-spacing: -.01em;
    }

    .portfolio-structure__income {
        grid-column: span 2;
    }

    .portfolio-structure__income dl {
        grid-template-columns: 1fr 7rem 7rem;
    }
}

.tippy-box {
    background: var(--color-default-white);
    border-radius: var(--border-radius-default);
    color: var(--color-base-900);
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: -.01em;
    box-shadow: 0px 4px 16px 0px #00000029;
}

.tippy-content {
    padding: 1rem;
}

.tippy-content b {
    color: var(--color-default-black);
    font-weight: 500;
}

.portfolio-projects {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.portfolio-projects li+li {
    margin-block-start: 1rem;
}

.portfolio-projects__row {
    align-items: center;
    border: 1px solid var(--color-base-500);
    border-radius: var(--border-radius-default);
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-auto-flow: row dense;
    gap: 1rem .625rem;
    padding: 1rem;
}

.portfolio-projects__open {
    background-color: var(--color-green-50);
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../images/icons/arrow-down.svg");
    border: 0;
    border-radius: var(--border-radius-default);
    content: '';
    cursor: pointer;
    margin: 0 0 0 1.5rem;
    padding: 18px;
}

.portfolio-projects__open[aria-expanded="true"] {
    transform: scaleY(-1);
}

.portfolio-projects__open:hover {
    background-color: var(--color-green-100);
}

.portfolio-projects__row:has(.portfolio-projects__open[aria-expanded="true"])+.portfolio-projects__details {
    display: block;
}

.portfolio-projects__row:has(.portfolio-projects__open[aria-expanded="true"]) {
    border-bottom-width: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.portfolio-projects img {
    background-color: var(--color-base-100);
    border: 1px solid var(--color-base-500);
    border-radius: var(--border-radius-default);
    object-fit: cover;
}

.portfolio-projects__name {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: .25rem;
}

@media (min-width: 980px) {
    .portfolio-projects__row {
        gap: 1rem;
        padding: 1.5rem;
    }

    .portfolio-projects__name {
        gap: .375rem;
    }
}

.portfolio-projects__props {
    align-items: baseline;
    border-block-start: 1px solid var(--color-base-500);
    display: grid;
    gap: 1rem;
    grid-column: span 3;
    grid-template-columns: auto 1fr;
    margin: 0;
    padding-block-start: 1rem;
}

.portfolio-projects__props>div {
    display: contents;
    min-width: 3rem;
}

.portfolio-projects__props dd {
    margin: 0;
}

@media (min-width: 630px) {
    .portfolio-projects__props {
        grid-template-columns: auto 1fr auto 1fr;
    }
}

.portfolio-projects__details {
    border-bottom: 1px solid var(--color-base-500);
    border-inline: 1px solid var(--color-base-500);
    border-bottom-left-radius: var(--border-radius-default);
    border-bottom-right-radius: var(--border-radius-default);
    padding: 0 1rem 1.25rem;
}

.portfolio-projects__details .header-3 {
    display: block;
    margin: 0;
    padding-block: 1.25rem .75rem;
}

.portfolio-projects__details .header-3:first-child {
    border-top: 1px solid var(--color-base-500);
}

.portfolio-projects__tables {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.portfolio-projects__details a {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2313655C'%3E%3Cpath d='M8.005 10.664 4.672 7.331l.933-.967L7.34 8.097V2.664h1.333v5.433l1.733-1.733.934.967-3.334 3.333Zm-4 2.667c-.366 0-.68-.13-.941-.392a1.284 1.284 0 0 1-.392-.942v-2h1.333v2h8v-2h1.333v2c0 .367-.13.681-.391.942a1.284 1.284 0 0 1-.942.392h-8Z'/%3E%3C/svg%3E") 100% 2px no-repeat;
    color: var(--color-green-500);
    display: block;
    max-width: max-content;
    padding-inline-end: 18px;
    text-decoration: none;
}

.portfolio-projects__details a[target="_blank"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2313655C'%3E%3Cpath d='m4.27 11.999-.934-.934 6.4-6.4H4.003V3.332h8v8h-1.334V5.599l-6.4 6.4Z'/%3E%3C/svg%3E");
}

.portfolio-projects__details a+a {
    margin-block-start: 1rem;
}

@media (min-width: 900px) {
    .portfolio-projects__row {
        align-items: start;
        display: flex;
    }

    .portfolio-projects__name h3 {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        line-clamp: 2;
        max-width: 15ch;
        overflow: hidden;
    }

    .portfolio-projects__props {
        border: 0;
        padding: 0;
    }

    .portfolio-projects__row:has(.portfolio-projects__open[aria-expanded="true"]) {
        border: 1px solid var(--color-base-500);
        border-radius: var(--border-radius-default);
    }

    .portfolio-projects__props>div {
        display: block;
    }

    .portfolio-projects__name {
        min-width: 10rem;
    }

    .portfolio-projects__details {
        margin-inline: 1.5rem;
        padding: 1.75rem 1.5rem 1.5rem;
    }

    .portfolio-projects__details .header-3 {
        padding-block: 1.75rem 1rem;
    }

    .portfolio-projects__details .header-3:first-child {
        border: 0;
        padding-block-start: 0;
    }
}

@media (min-width: 1250px) {
    .portfolio-projects__props {
        display: flex;
        flex-wrap: wrap;
        flex-wrap: balance;
        gap: 1rem 2rem;
    }
}

.portfolio-projects__details table:has(tfoot) tbody tr:nth-child(20)~tr {
    display: none;
}

/** MARK: Error */
.error-page .page-footer__link--studio {
    display: none;
}

.error-page main {
    margin: auto;
}

.error-page__btn {
    display: inline-block;
}

.error-page__description {
    margin: .75rem auto 1.5rem;
    max-width: 24rem;
    text-wrap: balance;
}

/** MARK: Home */
.home-page>div {
    background: url('../images/home.webp') center / cover no-repeat;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
}

.home-page__header {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 8rem);
    box-sizing: border-box;
    flex-grow: 1;
    padding: 1rem 1rem 21rem;
}

.home-page main {
    padding: 1rem .5rem 5rem;
}

.home-page__title {
    font-size: 28px;
    font-variation-settings: 'wdth' 88, 'wght' 500;
    font-weight: 500;
    line-height: 32px;
    margin: 0 auto;
    max-width: 16.5em;
    text-shadow: 0 1px 5px #F8F8F8;
    text-wrap: balance;
}

.home-page__description {
    margin: .5rem auto 1.5rem;
    max-width: 29em;
    text-shadow: 0 1px 5px #F8F8F8;
    text-wrap: balance;
}

.home-page main a {
    display: block;
    margin-inline: auto;
    max-width: max-content;
}

.home-page main a:last-child {
    margin-block-start: 1.25rem;
}

.home-page .page-footer {
    background: none;
    border: 0;
}

.home-page .page-footer img {
    width: 118px;
}

.home-page .page-footer a {
    display: none;
}

@media (min-width: 58em) {
    .home-page__title {
        font-size: 48px;
        line-height: 52px;
    }

    .home-page__description {
        font-size: 20px;
        line-height: 26px;
        margin-block: .75rem 2rem;
    }

    .home-page .page-footer img {
        width: 178px;
    }
}