/* b35f7fe31ab34c23f4cc48c68f20a646 */:root {
    --sn-aside-width: 24rem;
    --sn-nav-control: 2.5rem;
}

.sn {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sn__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--card);
    border-radius: var(--br-16);
    overflow: hidden;
    isolation: isolate;
}

.sn__head> :not(.sn__head-grid) {
    position: relative;
    z-index: 1;
}

.sn__head-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 85% 120% at 50% 50%, black 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 85% 120% at 50% 50%, black 40%, transparent 100%);
}

.sn__head-info {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.sn__title {
    margin: 0;
    font-family: var(--font-family-1);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-7);
    color: var(--text-default);
    text-transform: uppercase;
    line-height: 1.1;
}

.sn__subtitle {
    font-size: var(--font-size-m);
    color: var(--text-secondary);
}

.sn__nav {
    --sn-nav-buttons: 3;
    position: relative;
    padding: .3rem;
    border: 1px solid var(--transparent-5-w);
    border-radius: 14px;
}

.sn__nav.is-no-likes {
    --sn-nav-buttons: 2;
}

.sn__nav-list {
    padding-right: calc(var(--sn-nav-control) * var(--sn-nav-buttons) + .3rem * var(--sn-nav-buttons));
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scroll-padding-inline: 3rem;
    transition: opacity .2s ease .12s;
}

.sn__nav .filter {
    flex: none;
    height: 2.5rem;
    border-color: transparent;
}

.sn__nav-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.3rem;
    padding-inline: .5rem;
    border-radius: var(--br-20);
    background-color: var(--transparent-10-w);
    color: var(--text-default);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-7);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sn__scroll {
    position: relative;
    margin-bottom: 1rem;
}

.sn__subfilter {
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    touch-action: pan-x pan-y;
    scroll-padding-inline: 3rem;
}

.sn__scroll .sn__nav-arrow {
    top: 0;
    width: 2.2rem;
    height: 2.2rem;
}

.sn__scroll .sn__nav-arrow--prev {
    left: 0;
}

.sn__scroll .sn__nav-arrow--next {
    right: 0;
}

.sn__scroll::before,
.sn__scroll::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 4rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-duration);
}

.sn__scroll::before {
    left: 0;
    background-image: linear-gradient(90deg, var(--bg) 55%, transparent);
}

.sn__scroll::after {
    right: 0;
    background-image: linear-gradient(270deg, var(--bg) 55%, transparent);
}

.sn__scroll.can-prev::before,
.sn__scroll.can-next::after,
.sn__scroll.can-prev .sn__nav-arrow--prev,
.sn__scroll.can-next .sn__nav-arrow--next {
    opacity: 1;
    visibility: visible;
}

[data-sn-scroll-list].is-draggable {
    cursor: grab;
}

[data-sn-scroll-list].is-dragging {
    cursor: grabbing;
    user-select: none;
}

[data-sn-scroll-list].is-dragging .filter {
    pointer-events: none;
}

.sn__subfilter .filter {
    flex: none;
    height: 2.2rem;
    border-color: transparent;
}

.sn__subfilter .filter:not(.active):hover {
    border-color: transparent;
}

.sn__subfilter .filter.active .sn__nav-count,
.sn__nav .filter.active .sn__nav-count,
.sna__chips .filter.active .sn__nav-count {
    background-color: var(--bg);
    color: var(--text-default);
}

.sn__nav .filter:not(.active):hover {
    border-color: transparent;
}

.sn__nav-arrow {
    position: absolute;
    top: .3rem;
    z-index: 2;
    width: 2.5rem;
    padding-inline: 0;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-duration), visibility var(--transition-duration), background-color var(--transition-duration);
}

.sn__nav-arrow--prev {
    left: .3rem;
}

.sn__nav-arrow--next {
    right: calc(var(--sn-nav-control) * var(--sn-nav-buttons) + .3rem * (var(--sn-nav-buttons) + 1));
}

.sn__nav::before,
.sn__nav::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 4.5rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-duration);
}

.sn__nav::before {
    left: 0;
    border-radius: 14px 0 0 14px;
    background-image: linear-gradient(90deg, var(--bg) 60%, transparent);
}

.sn__nav::after {
    right: 0;
    width: calc(var(--sn-nav-control) * var(--sn-nav-buttons) + 5.6rem);
    border-radius: 0 14px 14px 0;
    background-image: linear-gradient(270deg, var(--bg) 60%, transparent);
}

.sn__nav.can-prev::before,
.sn__nav.can-next::after,
.sn__nav.can-prev .sn__nav-arrow--prev,
.sn__nav.can-next .sn__nav-arrow--next {
    opacity: 1;
    visibility: visible;
}

.sn__nav.is-searching .sn__nav-list,
.sn__nav.is-searching::before,
.sn__nav.is-searching::after,
.sn__nav.is-searching .sn__nav-arrow {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s;
}

.sn__search {
    position: absolute;
    top: .3rem;
    right: calc(var(--sn-nav-control) * (var(--sn-nav-buttons) - 1) + .3rem * var(--sn-nav-buttons));
    bottom: .3rem;
    z-index: 3;
    display: flex;
    align-items: center;
    width: var(--sn-nav-control);
    border-radius: var(--br-10);
    background-color: var(--button);
    overflow: hidden;
    transition: width .35s cubic-bezier(.22, 1, .36, 1), background-color var(--transition-duration);
}

.sn__search:not(.is-open):hover {
    background-color: var(--button-hover);
}

.sn__search.is-open {
    width: calc(100% - var(--sn-nav-control) * (var(--sn-nav-buttons) - 1) - .3rem * (var(--sn-nav-buttons) + 1));
}

.sn__fav-toggle {
    position: absolute;
    top: .3rem;
    right: calc(var(--sn-nav-control) + .6rem);
    bottom: .3rem;
    z-index: 3;
    width: var(--sn-nav-control);
    height: auto;
    padding: 0;
    justify-content: center;
    border-color: transparent;
    border-radius: var(--br-10);
    background-color: var(--red-10);
    color: var(--red);
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sn__filters-toggle {
    position: absolute;
    top: .3rem;
    right: .3rem;
    bottom: .3rem;
    z-index: 3;
    width: var(--sn-nav-control);
    height: auto;
    padding: 0;
    justify-content: center;
    border-color: transparent;
    border-radius: var(--br-10);
}

.sn__filters-toggle:not(.active):hover,
.sn__filters-toggle:focus {
    border-color: transparent;
}

.sn__filters-toggle svg {
    width: .9rem;
    height: .9rem;
}

.sn__filters-badge {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding-inline: .25rem;
    border-radius: var(--br-20);
    background-color: var(--span);
    color: var(--text-default);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-7);
    line-height: 1;
}

.sn__filters-badge[hidden] {
    display: none;
}

.sn__filters-wrap[hidden] {
    display: none;
}

.sn__filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, .7fr);
    gap: 2rem;
    padding: 1.2rem 1.4rem;
    border-radius: var(--br-16);
    background-color: var(--card);
}

.sn__filters-col {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-width: 0;
}

.sn__filters-label {
    color: var(--text-secondary);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
}

.sn__range {
    position: relative;
    height: 1.1rem;
    margin-block: .2rem;
}

.sn__range::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 5px;
    translate: 0 -50%;
    background: linear-gradient(to right, var(--input-form) var(--sn-from), var(--span) var(--sn-from), var(--span) var(--sn-to), var(--input-form) var(--sn-to));
}

.sn__range .sn__range-input {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: transparent;
    pointer-events: none;
}

.sn__range-input.is-top {
    z-index: 1;
}

.sn__range-input::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}

.sn__range-input::-moz-range-track {
    background: transparent;
    border: none;
}

.sn__range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border: 0;
    border-radius: var(--br-50);
    box-shadow: 0 0 0 4px inset var(--text-default);
    background-color: var(--button);
    cursor: pointer;
    pointer-events: auto;
    transition: var(--transition-duration);
}

.sn__range-input::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border: 0;
    border-radius: var(--br-50);
    box-shadow: 0 0 0 4px inset var(--text-default);
    background-color: var(--button);
    cursor: pointer;
    pointer-events: auto;
    transition: var(--transition-duration);
}

.sn__range-input::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px inset var(--text-default);
}

.sn__range-input::-webkit-slider-thumb:active {
    box-shadow: 0 0 0 6px inset var(--text-default);
}

.sn__range-input::-moz-range-thumb:hover {
    box-shadow: 0 0 0 5px inset var(--text-default);
}

.sn__range-input::-moz-range-thumb:active {
    box-shadow: 0 0 0 6px inset var(--text-default);
}

.sn__range-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.sn__range-fields input {
    width: 100%;
    min-width: 0;
}

.sn__filters-switches {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: .8rem 1.6rem;
    margin-top: 1.3rem;
}

.sn__filters-switch .switch {
    flex-shrink: 0;
}

.sn__filters-switch {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.sn__filters-switch label {
    margin-bottom: 0;
    white-space: nowrap;
}

.sn__filters .sn__sort {
    width: 100%;
    margin-bottom: 0;
}

.sn__filters-reset {
    align-self: center;
    gap: .4rem;
    height: auto;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--red);
    font-size: var(--font-size-s);
}

.sn__filters-reset svg {
    width: .9rem;
    height: .9rem;
    fill: var(--red);
}

.sn__filters-reset span {
    color: inherit;
}

.sn__filters-reset:hover,
.sn__filters-reset:focus {
    border-color: transparent;
    background-color: transparent;
    color: var(--red);
}

.sn__fav-toggle:hover {
    border-color: transparent;
    background-color: var(--red-20);
    color: var(--red);
}

.sn__fav-toggle:focus {
    border-color: transparent;
}

.sn__fav-toggle svg {
    width: .95rem;
    height: .95rem;
}

.sn__fav-toggle.active,
.sn__fav-toggle.active:hover {
    background-color: var(--red);
    color: var(--text-default);
}

.sn__search .sn__search-open {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--sn-nav-control);
    height: 100%;
    padding: 0;
    justify-content: center;
    border-color: transparent;
    background-color: transparent;
}

.sn__search .sn__search-open svg {
    width: .9rem;
    height: .9rem;
}

.sn__search.is-open .sn__search-open {
    cursor: default;
}

.sn__search .sn__search-input {
    width: 100%;
    height: 100%;
    padding: 0 2.8rem 0 var(--sn-nav-control);
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--text-default);
    font-size: var(--font-size-m);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.sn__search .sn__search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.sn__search.is-open .sn__search-input {
    opacity: 1;
    pointer-events: auto;
    transition-delay: .12s;
}

.sn__search-close {
    position: absolute;
    top: 50%;
    right: .35rem;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    translate: 0 -50%;
    background-color: transparent;
    color: var(--text-secondary);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, color var(--transition-duration), background-color var(--transition-duration);
}

.sn__search-close svg {
    width: .7rem;
    height: .7rem;
}

.sn__search-close:hover {
    background-color: var(--button-hover);
    color: var(--text-default);
}

.sn__search-close:focus {
    border-color: transparent;
}

.sn__search.is-open .sn__search-close {
    opacity: 1;
    pointer-events: auto;
    transition-delay: .12s;
}

.sn__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sn-aside-width);
    gap: 1rem;
    align-items: start;
}

.sn__main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    padding-top: 1rem;
}

.sn__section[hidden],
.sn .no-data[hidden] {
    display: none;
}

.sn__section-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
}

.sn__section-head::after {
    content: '';
    order: 1;
    flex: 1;
    height: 2px;
    background-image: linear-gradient(90deg, var(--transparent-5-w), transparent);
}

.sn__section-toggle {
    order: 2;
    flex: none;
    height: 2rem;
    padding-inline: 0;
    gap: .4rem;
    background-color: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
    transition: color var(--transition-duration), opacity var(--transition-duration), visibility var(--transition-duration);
}

.sn.is-filtered .sn__section-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sn__section-toggle:hover {
    background-color: transparent;
    color: var(--text-default);
}

.sn__section-toggle:focus {
    border-color: transparent;
}

.sn__section-toggle span {
    color: inherit;
}

.sn__section-toggle svg {
    width: .7rem;
    height: .7rem;
    rotate: 180deg;
    transition: rotate var(--transition-duration);
}

.sn__section.is-collapsed .sn__section-toggle svg {
    rotate: 0deg;
}

.sn__section-body[hidden] {
    display: none;
}

.sn__section-body .sn__section-empty {
    margin-block: 0;
    padding-block: 2rem;
}

.sn__section-title {
    margin: 0;
    font-family: var(--font-family-1);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-7);
    color: var(--text-default);
    text-transform: uppercase;
}

.sn__tiers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: .5rem;
}

.sn__tier {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 19rem;
    background-color: var(--card);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--sn-tier) 16%, transparent), transparent 75%);
    border-radius: var(--br-16);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    outline: none;
    transition: background-color var(--transition-duration);
    -webkit-user-select: none;
    user-select: none;

    --sn-px: 0;
    --sn-py: 0;
    --sn-layer-ease: cubic-bezier(.22, 1, .36, 1);
}

.sn__tier[hidden] {
    display: none;
}

.sn__tier:hover {
    background-color: var(--input-form);
}

.sn__tier::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(0deg, color-mix(in srgb, var(--card) 85%, transparent) 0%, color-mix(in srgb, var(--card) 50%, transparent) 30%, transparent 55%);
    pointer-events: none;
    transition: opacity var(--transition-duration);
}

.sn__tier::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 3px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    transition: border-color var(--transition-duration);
}

.sn__tier.active::after,
.sn__tier:focus-visible::after {
    border-color: var(--sn-tier);
}

.sn__tier-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    translate: calc(var(--sn-px) * -6px) calc(var(--sn-py) * -6px);
    transition:
        opacity var(--transition-duration),
        scale .7s var(--sn-layer-ease),
        translate .7s var(--sn-layer-ease);
}

.sn__tier:hover .sn__tier-bg {
    scale: 1.06;
}

.sn__tier:has(.sn__tier-image) .sn__tier-bg {
    opacity: .1;
}

.sn__tier:has(.sn__tier-image):hover .sn__tier-bg,
.sn__tier:has(.sn__tier-image).active .sn__tier-bg {
    opacity: .2;
}

.sn__tier-image {
    position: absolute;
    top: 1rem;
    left: 50%;
    z-index: 2;
    width: 72%;
    height: calc(100% - 6.5rem);
    translate: calc(-50% + var(--sn-px) * 8px) calc(var(--sn-py) * 4px);
    transform-origin: 50% 100%;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    transition:
        scale .5s var(--sn-layer-ease),
        translate .5s var(--sn-layer-ease);
}

.sn__tier:has(.sn__tier-type) .sn__tier-image {
    height: calc(100% - 7.8rem);
}

.sn__tier:hover .sn__tier-image {
    scale: 1.05;
}

@media (prefers-reduced-motion: reduce) {

    .sn__tier-bg,
    .sn__tier-image {
        transition: opacity var(--transition-duration);
        scale: 1 !important;
        translate: none;
    }

    .sn__tier-image {
        translate: -50% 0;
    }
}

.sn__tier-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem 1.2rem;
}

.sn__tier-type {
    margin-bottom: .15rem;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
    color: color-mix(in srgb, var(--sn-tier) 70%, var(--text-default));
}

.sn__tier-name[hidden] {
    display: none;
}

.sn__tier-name {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-7);
    color: var(--text-default);
}

.sn__tier-price {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-7);
    color: var(--text-default);
}

.sn__tier-price small {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-4);
    color: var(--text-secondary);
}

.sn__discount {
    padding: .15rem .4rem;
    border-radius: var(--br-5);
    background-color: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-7);
}

.sn__labels {
    position: absolute;
    top: .8rem;
    left: .8rem;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
}

.sn__label {
    padding: .2rem .45rem;
    border-radius: var(--br-5);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-7);
    text-transform: uppercase;
}

.sn__label--hit {
    background-color: color-mix(in srgb, var(--orange) 12%, transparent);
    color: var(--orange);
}

.sn__label--owned {
    background-color: color-mix(in srgb, var(--green) 12%, transparent);
    color: var(--green);
    cursor: help;
}

.sn__label--new {
    background-color: var(--span);
    color: var(--text-default);
}

.sn__label--badge {
    background-color: color-mix(in srgb, var(--sn-tier) 14%, transparent);
    color: var(--sn-tier);
}

.toFavourite {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-custom);
    opacity: .6;
    transition: opacity .2s ease, color .2s ease, transform .2s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
    flex: none;
}

.toFavourite:hover {
    opacity: 1;
    background-color: transparent;
}

.toFavourite:focus {
    outline: none;
    border: none;
}

.toFavourite .fav-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
}

.toFavourite .fav-icon--filled {
    opacity: 0;
    transform: scale(.4);
    color: var(--red);
}

.toFavourite.is-favourite {
    opacity: 1;
    color: var(--red);
}

.toFavourite.is-favourite .fav-icon--outline {
    opacity: 0;
    transform: scale(.4);
}

.toFavourite.is-favourite .fav-icon--filled {
    opacity: 1;
    transform: scale(1);
}

@keyframes favouriteBounce {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(.75);
    }

    45% {
        transform: scale(1.35);
    }

    70% {
        transform: scale(.92);
    }

    100% {
        transform: scale(1);
    }
}

.toFavourite.is-bouncing {
    animation: favouriteBounce .55s cubic-bezier(.34, 1.56, .64, 1);
}

.fav-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--red);
    pointer-events: none;
    opacity: 0;
    --tx: 0px;
    --ty: 0px;
    animation: favouriteBurst .6s ease-out forwards;
}

@keyframes favouriteBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(.6);
    }

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(.2);
    }
}

.sn__tier-actions {
    position: absolute;
    top: .8rem;
    right: .8rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.sn__video-open,
.sn__video-open:hover,
.sn__video-open:focus {
    border-color: transparent;
    background-color: transparent;
}

.sn__video-open {
    width: auto;
    height: 1rem;
    padding: 0;
    color: var(--text-custom);
    opacity: .6;
    transition: opacity var(--transition-duration), color var(--transition-duration);
}

.sn__video-open:hover {
    color: var(--text-default);
    opacity: 1;
}

.sn__video-open svg {
    width: .9rem;
    height: .9rem;
}

.sn__video {
    gap: 1rem;
    width: min(56rem, 96vw);
    min-width: 0;
    max-width: 96vw;
}

.sn__video-title {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.sn__video-title span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sn__video-frame {
    position: relative;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    max-height: 75vh;
    margin-inline: auto;
    border-radius: var(--br-12);
    background-color: var(--bg);
    overflow: hidden;
}

.sn__video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sn__video-toggle,
.sn__video-toggle:hover,
.sn__video-toggle:focus {
    border-color: transparent;
}

.sn__video-toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    padding: 0;
    translate: -50% -50%;
    border-radius: var(--br-50);
    background-color: color-mix(in srgb, var(--bg) 55%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--text-default);
    transition: opacity .25s ease, background-color var(--transition-duration);
}

.sn__video-toggle:hover {
    background-color: color-mix(in srgb, var(--bg) 75%, transparent);
    color: var(--text-default);
}

.sn__video-toggle span {
    display: flex;
    color: inherit;
}

.sn__video-toggle svg {
    width: 1.6rem;
    height: 1.6rem;
}

.sn__video-pause,
.sn__video-frame.is-playing .sn__video-play {
    display: none !important;
}

.sn__video-frame.is-playing .sn__video-pause {
    display: flex !important;
}

.sn__video-frame.is-playing .sn__video-toggle {
    opacity: 0;
}

.sn__video-frame.is-playing:hover .sn__video-toggle,
.sn__video-frame.is-playing .sn__video-toggle:focus-visible {
    opacity: 1;
}

.sn__aside {
    position: sticky;
    top: .5rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.sn__panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem;
    background-color: var(--card);
    border-radius: var(--br-16);
}

.sn__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.sn__panel-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-7);
    color: var(--text-default);
}

.sn__panel-title svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: var(--span);
}

.sn__product-preview {
    display: flex;
    align-items: center;
    padding: .8rem 1rem;
    border-radius: var(--br-12);
    background-color: var(--input-form);
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--sn-tier) 14%, transparent), transparent 70%);
}

.sn__product-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sn__product-info small {
    font-size: var(--font-size-s);
    color: color-mix(in srgb, var(--sn-tier) 55%, var(--text-default));
    transition: color var(--transition-duration);
}

.sn__product-info span {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-7);
    color: var(--sn-tier);
    transition: color var(--transition-duration);
}

.sn__features-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.sn__features-group summary::-webkit-details-marker {
    display: none;
}

.sn__features-group summary svg {
    width: .9rem;
    height: .9rem;
    flex: none;
    fill: var(--text-custom);
    rotate: 0deg;
    transition: rotate var(--transition-duration);
}

.sn__features-group[open]:not(.is-closing) summary svg {
    rotate: 180deg;
}

.sn [hidden] {
    display: none !important;
}

.sn__features {
    display: flex;
    flex-direction: column;
}

.sn__features-group {
    border-bottom: 1px solid var(--transparent-5-w);
}

.sn__features-group summary {
    padding-block: 1rem;
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-6);
    color: var(--text-default);
    transition: color var(--transition-duration);
}

.sn__features-group:not([open]) summary:hover {
    color: var(--text-custom);
}

.sn__features-group:first-child summary {
    padding-top: 0;
}

.sn__features-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding-bottom: 1rem;
}

@property --sn-fade-top {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --sn-fade-bottom {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

.sn__scrollarea {
    position: relative;
}

.sn__scrollarea-viewport {
    max-height: 26rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    padding-right: 0;
    --sn-fade: linear-gradient(180deg, transparent 0, black var(--sn-fade-top), black calc(100% - var(--sn-fade-bottom)), transparent 100%);
    -webkit-mask-image: var(--sn-fade);
    mask-image: var(--sn-fade);
    transition:
        --sn-fade-top var(--transition-duration),
        --sn-fade-bottom var(--transition-duration),
        padding-right var(--transition-duration);
}

.sn__scrollarea.is-overflowing .sn__scrollarea-viewport {
    padding-right: 1rem;
}

.sn__scrollarea.can-up .sn__scrollarea-viewport {
    --sn-fade-top: 2.5rem;
}

.sn__scrollarea.can-down .sn__scrollarea-viewport {
    --sn-fade-bottom: 3.5rem;
}

.sn__scrollbar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--br-4);
    background-color: var(--transparent-5-w);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    translate: 8px 0;
    transition: opacity .25s ease, translate .25s ease, visibility .25s, width var(--transition-duration);
    touch-action: none;
}

.sn__scrollarea.is-overflowing .sn__scrollbar {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
}

.sn__scrollbar::before {
    content: '';
    position: absolute;
    inset: 0 -6px;
}

.sn__scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: var(--br-4);
    background-color: var(--span);
    cursor: grab;
    transition: background-color var(--transition-duration);
}

.sn__scrollbar-thumb:hover,
.sn__scrollarea.is-dragging .sn__scrollbar-thumb {
    background-color: color-mix(in srgb, var(--span) 80%, var(--text-default));
}

.sn__scrollarea.is-dragging .sn__scrollbar-thumb {
    cursor: grabbing;
}

.sn__feature {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: var(--font-size-m);
    color: var(--text-default);
    line-height: 1.35;
}

.sn__feature svg {
    width: .85rem;
    height: .85rem;
    margin-top: .15rem;
    flex: none;
    fill: var(--span);
}

.sn__feature.disabled {
    color: var(--text-secondary);
    opacity: .5;
}

.sn__feature.disabled svg {
    fill: var(--text-secondary);
}

.sn__timer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    flex: none;
}

.sn__timer[hidden] {
    display: none;
}

.sn__timer-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
    color: var(--text-secondary);
}

.sn__timer-title svg {
    width: .85rem;
    height: .85rem;
    fill: currentColor;
}

.sn__timer-cells {
    display: flex;
    gap: .3rem;
}

.sn__timer-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 3.4rem;
    padding-block: .4rem;
    border-radius: var(--br-8);
    background-color: var(--transparent-3-w);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.sn__timer-cell span {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-7);
    line-height: 1.2;
    color: var(--text-default);
    font-variant-numeric: tabular-nums;
}

.sn__timer-cell small {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.sn__periods {
    display: grid;
    grid-template-columns: repeat(var(--sn-period-cols, 3), minmax(0, 1fr));
    gap: .2rem;
    padding: .25rem;
    border-radius: var(--br-12);
    background-color: var(--input-form);
}

.sn__periods .filter {
    width: auto;
    min-width: 0;
    height: 2.4rem;
    border-color: transparent;
    justify-content: center;
}

.sn__periods .filter:not(.active) {
    background-color: transparent;
}

.sn__periods .filter:not(.active):hover {
    background-color: var(--button);
    border-color: transparent;
}

.sn__modes {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.sn__modes-list {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.sn__modes-select {
    width: 100%;
    margin-bottom: 0;
}

.sn__notice {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .8rem;
    border-radius: var(--br-10);
    background-color: color-mix(in srgb, var(--orange) 10%, transparent);
    color: var(--orange);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-5);
    line-height: 1.6;
}

.sn__notice--info {
    background-color: var(--span-10);
    color: var(--span);
}

.sn__modes[hidden],
.sn__notice[hidden],
.sn__modes-caption[hidden] {
    display: none;
}

.sn__notice svg {
    width: 1rem;
    height: 1rem;
    flex: none;
    fill: currentColor;
}

.sn__notice span {
    color: inherit;
}

.sn__modes-caption {
    font-size: var(--font-size-s);
    color: var(--text-secondary);
}

.sn__total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
}

.sn__total-price {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.sn__total-price>span {
    display: inline-flex;
    font-family: var(--font-family-2);
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-7);
    line-height: 1.1;
    color: var(--text-default);
    white-space: pre;
}

.sn__roller {
    display: inline-flex;
}

.sn__digit {
    display: inline-block;
    height: 1.1em;
    overflow: hidden;
    transition: width .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}

.sn__digit.is-hidden {
    opacity: 0;
}

.sn__digit-col {
    display: flex;
    flex-direction: column;
    width: max-content;
    translate: 0 calc(var(--sn-digit, 0) * -10%);
    transition: translate .6s cubic-bezier(.22, 1, .36, 1);
}

.sn__roller-instant .sn__digit,
.sn__roller-instant .sn__digit-col {
    transition: none !important;
}

.sn__digit-col span {
    height: 1.1em;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {

    .sn__digit,
    .sn__digit-col {
        transition: none;
    }
}

.sn__total-price small {
    font-size: var(--font-size-m);
    color: var(--text-secondary);
}

.sn__total-discount {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.sn__total-discount[hidden] {
    display: none;
}

.sn__total-percent {
    padding: .15rem .4rem;
    border-radius: var(--br-5);
    background-color: var(--red-10);
    color: var(--red);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-7);
}

.sn__total-old {
    font-size: var(--font-size-default);
    color: var(--text-secondary);
}

.sn__buy {
    display: flex;
    gap: .3rem;
}

.sn__buy button {
    height: 3rem;
}

.sn__buy .button-icon {
    width: 3rem;
}

.sn__buy span {
    color: inherit;
}

.sn__buy svg {
    width: 1.1rem;
    height: 1.1rem;
}

.sn__cart {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: min(40rem, calc(100% - 2rem));
    translate: -50% 0;
    border-radius: var(--br-16);
    background-color: color-mix(in srgb, var(--card) 80%, transparent);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    border: 1px solid var(--transparent-10-w);
}

.sn__cart[hidden],
.sn__cart-body[hidden] {
    display: none;
}

.sn__cart-body {
    display: flex;
    flex-direction: column;
    padding: .5rem 1rem 0 1rem;
    border-bottom: 1px solid var(--transparent-5-w);
}

.sn__cart-viewport {
    max-height: 18rem;
}

.sn__cart-list {
    display: flex;
    flex-direction: column;
}

.sn__cart-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-block: .7rem;
}

.sn__cart-item:not(:last-child) {
    border-bottom: 1px solid var(--transparent-10-w);
}

.sn__cart-modes {
    display: flex;
    flex: none;
    color: var(--transparent-20-w);
    cursor: help;
    transition: color var(--transition-duration);
}

.sn__cart-modes:hover {
    color: var(--text-custom);
}

.sn__cart-modes svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.sn__tip-list {
    display: block;
    margin-top: .35rem;
}

.sn__cart-info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 1;
    min-width: 0;
}

.sn__cart-info span {
    overflow: hidden;
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-6);
    color: var(--text-default);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sn__cart-info small {
    overflow: hidden;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sn__cart-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
    line-height: 1.2;
}

.sn__cart-price s {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.sn__cart-price span {
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-7);
    color: var(--text-default);
    white-space: nowrap;
}

.sn__qty {
    display: flex;
    align-items: center;
    flex: none;
    height: 2.4rem;
    padding: .2rem;
    border-radius: var(--br-8);
    background-color: var(--button);
}

.sn__qty button {
    width: 2rem;
    height: 100%;
    padding: 0;
    border-radius: var(--br-6);
    background-color: transparent;
    color: var(--text-custom);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-5);
    line-height: 1;
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sn__qty button:hover {
    background-color: var(--button-hover);
    color: var(--text-default);
}

.sn__qty button:focus {
    border-color: transparent;
}

.sn__qty button:disabled,
.sn__qty button:disabled:hover {
    background-color: transparent;
    color: var(--transparent-10-w);
}

.sn__qty span {
    min-width: 1.8rem;
    color: var(--text-default);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-7);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.sn__cart-remove {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    margin-left: .2rem;
    padding: 0;
    border-radius: var(--br-8);
    background-color: var(--button);
    color: var(--text-secondary);
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sn__cart-remove svg {
    width: .8rem;
    height: .8rem;
}

.sn__cart-remove:hover {
    background-color: var(--red-10);
    color: var(--red);
}

.sn__cart-remove:focus {
    border-color: transparent;
}

.sn__cart-actions {
    display: flex;
    flex: none;
    gap: .3rem;
}

.sn__cart-gift,
.sn__cart-gift:hover {
    border-color: transparent;
    background-color: var(--money);
    color: var(--bg);
}

.sn__cart-gift {
    transition: background-color var(--transition-duration);
}

.sn__cart-gift:hover {
    background-color: color-mix(in srgb, var(--money) 85%, var(--text-default));
}

.sn__cart-gift:focus {
    border-color: transparent;
}

.sn__cart-bar {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .6rem .6rem .8rem;
}

.sn__cart-icon {
    display: flex;
    flex: none;
    color: var(--transparent-20-w);
}

.sn__cart-icon svg {
    width: 2.15rem;
    height: 2.15rem;
    fill: currentColor;
}

.sn__cart-summary {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.sn__cart-summary small {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.sn__cart-summary strong {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-7);
    color: var(--text-default);
    white-space: nowrap;
}

.sn__cart-count {
    margin-right: auto;
    padding: .2rem .5rem;
    border-radius: var(--br-6);
    background-color: var(--transparent-5-w);
    color: var(--text-custom);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
    white-space: nowrap;
}

.sn__compare-open {
    height: 3.3rem;
    background-color: var(--span);
    color: var(--text-default);
    border-radius: var(--br-12);
}

.sn__compare-open:hover {
    background-color: color-mix(in srgb, var(--span) 88%, var(--text-default));
    color: var(--text-default);
}

.sn__compare-open span {
    color: inherit;
}

.sn__cmp {
    gap: 1.1rem;
    width: min(60rem, 96vw);
    min-width: 0;
    max-width: 96vw;
}

.sn__cmp-step {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sn__cmp-label {
    color: var(--text-secondary);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
}

.sn__cmp-types {
    max-width: 26rem;
}

.sn__cmp-product.active {
    background-color: color-mix(in srgb, var(--sn-tier) 10%, transparent);
    color: var(--sn-tier);
}

.sn__cmp-product.active:hover {
    background-color: color-mix(in srgb, var(--sn-tier) 16%, transparent);
    color: var(--sn-tier);
}

.sn__cmp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sn__cmp-diff {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sn__cmp-diff label {
    margin-bottom: 0;
    font-size: var(--font-size-s);
}

.sn__cmp-table-wrap {
    max-height: min(55vh, 34rem);
    overflow: auto;
}

.sn__cmp-table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: visible;
}

.sn__cmp-table th,
.sn__cmp-table td {
    background-color: var(--card);
}

.sn__cmp-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    opacity: 1;
}

.sn__cmp-table th:first-child,
.sn__cmp-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}

.sn__cmp-table thead th:first-child {
    z-index: 3;
}

.sn__cmp-table th:not(:first-child),
.sn__cmp-table td:not(:first-child) {
    text-align: center;
}

.sn__cmp-table td:not(:first-child) {
    padding-right: 1rem;
}

.sn__cmp-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
}

.sn__cmp-head span {
    color: var(--sn-tier);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-7);
}

.sn__cmp-head small {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-5);
}

.sn__cmp-table .sn__cmp-group td {
    position: static;
    color: var(--text-secondary);
    font-weight: var(--font-weight-7);
    text-align: center;
}

.sn__cmp-group span {
    position: sticky;
    left: 1rem;
    color: inherit;
}

.sn__cmp-yes,
.sn__cmp-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    aspect-ratio: 1 / 1;
    border-radius: var(--br-50);
    vertical-align: middle;
}

.sn__cmp-yes {
    background-color: color-mix(in srgb, var(--green) 10%, transparent);
}

.sn__cmp-no {
    background-color: var(--transparent-5-w);
}

.sn__cmp-yes svg {
    width: .8rem;
    height: .8rem;
    fill: var(--green);
}

.sn__cmp-no svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: var(--transparent-20-w);
}

.sn__cmp-value {
    color: var(--text-default);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-7);
}

.sn__cmp-empty {
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-size: var(--font-size-m);
    text-align: center;
}

.sn__gift {
    gap: 1rem;
    width: min(28rem, 96vw);
    min-width: 0;
}

.sn__gift-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-radius: var(--br-12);
    background-color: var(--money-bg);
    color: var(--money);
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-5);
}

.sn__gift-banner span {
    color: inherit;
}

.sn__gift-banner svg {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
}

.sn__gift-input {
    position: relative;
    display: flex;
    align-items: center;
}

.sn__gift-input input {
    padding-right: 2.8rem;
}

.sn__gift-input svg {
    position: absolute;
    right: 1rem;
    width: 1.1rem;
    height: 1.1rem;
    fill: var(--text-secondary);
    pointer-events: none;
}

.sn__gift-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    border-radius: var(--br-12);
    background-color: var(--input-form);
}

.sn__gift-summary-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.sn__gift-summary-info span {
    color: var(--text-default);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-6);
}

.sn__gift-summary-info small {
    color: var(--text-secondary);
    font-size: var(--font-size-s);
}

.sn__gift-summary strong {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-7);
    color: var(--text-default);
    white-space: nowrap;
}

.sn__gift-field {
    display: flex;
    flex-direction: column;
}

.sn__gift-field input {
    width: 100%;
}

.sn__gift-hint {
    margin-top: .4rem;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    line-height: 1.4;
}

.sn__gift-player {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-top: .8rem;
    padding: .8rem;
    border-radius: var(--br-12);
    background-color: var(--input-form);
}

.sn__gift-player[hidden],
.sn__gift-error[hidden],
.sn__gift-confirmed[hidden],
.sn__gift-ask[hidden] {
    display: none;
}

.sn__gift-profile {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.sn__gift-avatar {
    flex: none;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: var(--br-50);
    background-color: var(--button);
    overflow: hidden;
}

.sn__gift-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sn__gift-profile-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.sn__gift-profile-info a {
    overflow: hidden;
    color: var(--text-default);
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-6);
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color var(--transition-duration);
}

.sn__gift-profile-info a:hover {
    color: var(--span);
}

.sn__gift-profile-info small {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

.sn__gift-player.is-loading .sn__gift-avatar {
    min-height: 0;
    border-radius: var(--br-50);
}

.sn__gift-player.is-loading .sn__gift-profile-info a,
.sn__gift-player.is-loading .sn__gift-profile-info small {
    min-height: 0;
    border-radius: var(--br-4);
}

.sn__gift-player.is-loading .sn__gift-profile-info a {
    width: 9rem;
    height: .95rem;
}

.sn__gift-player.is-loading .sn__gift-profile-info small {
    width: 6rem;
    height: .7rem;
}

.sn__gift-ask {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.sn__gift-ask>span {
    color: var(--text-custom);
    font-size: var(--font-size-m);
}

.sn__gift-ask-buttons {
    display: flex;
    gap: .3rem;
}

.sn__gift-ask-buttons button {
    flex: 1;
    width: auto;
}

.sn__gift-confirmed,
.sn__gift-error {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    border-radius: var(--br-10);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
}

.sn__gift-confirmed {
    background-color: color-mix(in srgb, var(--green) 10%, transparent);
    color: var(--green);
}

.sn__gift-error {
    margin-top: .8rem;
    background-color: color-mix(in srgb, var(--orange) 10%, transparent);
    color: var(--orange);
}

.sn__gift-confirmed svg,
.sn__gift-error svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.sn__gift-confirmed span,
.sn__gift-error span {
    color: inherit;
}

.sn__gift-submit {
    height: 2.8rem;
}

.sn__gift-submit span {
    color: inherit;
}

.sn__cart-toggle {
    background-color: var(--button);
}

.sn__cart-toggle svg {
    rotate: 180deg;
    transition: rotate var(--transition-duration);
}

.sn__cart.is-open .sn__cart-toggle svg {
    rotate: 0deg;
}

@media (max-width: 1200px) {
    .sn__layout {
        grid-template-columns: 1fr;
    }

    .sn__aside {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        align-items: start;
    }
}

@media (max-width: 480px) {
    .sn__cart-bar {
        gap: .5rem;
    }

    .sn__cart-icon,
    .sn__cart-count {
        display: none;
    }

    .sn__cart-summary {
        margin-right: auto;
    }

    .sn__cart-item {
        gap: .6rem;
    }

    .sn__qty button {
        width: 1.6rem;
    }

    .sn__qty span {
        min-width: 1.3rem;
    }
}

@media (max-width: 1100px) {
    .sn__filters {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sn__filters-col:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .sn__filters {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        padding: 1.1rem;
    }

    .sn__filters-switches {
        grid-template-columns: 1fr;
    }

    .sn__cmp-table th:first-child,
    .sn__cmp-table td:first-child {
        min-width: 9rem;
        max-width: 45vw;
        white-space: normal;
    }

    .sn__cart {
        bottom: calc(4rem + .5rem);
        width: calc(100% - 1rem);
    }

    body:has(.sn__cart) .wheel-launcher-btn {
        bottom: calc(4rem + .5rem + 4.4rem) !important;
    }

    .sn {
        padding-bottom: 10rem;
    }

    .sn__head {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.2rem;
    }

    .sn__timer {
        align-items: flex-start;
    }

    .sn__title {
        font-size: var(--font-size-xxxl);
    }

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

    .sn__tier {
        min-height: 15rem;
    }

    .sn__aside {
        grid-template-columns: 1fr;
    }
}

.sna {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-bottom: 2rem;
}

.sna__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-radius: var(--br-16);
    background-color: var(--card);
}

.sna__head-info {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.sna__title {
    margin: 0;
    color: var(--text-default);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-7);
}

.sna__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1rem;
}

.sna__guide-open {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 1.9rem;
    padding: 0 .8rem 0 .55rem;
    border: 0;
    border-radius: var(--br-20);
    background-color: var(--span-10);
    color: var(--span);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
    white-space: nowrap;
    outline: none;
    box-shadow: none;
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sna__guide-open:focus {
    border: none;
}

.sna__guide-open:focus:not(:hover) {
    background-color: var(--span-10);
    color: var(--span);
    outline: none;
    box-shadow: none;
}

.sna__guide-open span {
    color: inherit;
}

.sna__guide-open svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.sna__guide-open:hover {
    background-color: var(--span);
    color: var(--text-default);
}

.sna__subtitle,
.sna__muted {
    color: var(--text-secondary);
    font-size: var(--font-size-s);
}

.sna__head-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.sna__head-actions button span {
    color: inherit;
}

.sna__savebar {
    position: fixed;
    bottom: 1.5rem;
    left: var(--sna-center, 50%);
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .8rem 1.6rem;
    width: max-content;
    max-width: var(--sna-max, calc(100% - 2rem));
    padding: .6rem .6rem .6rem 1.2rem;
    border: 1px solid var(--transparent-10-w);
    border-radius: var(--br-16);
    background-color: var(--transparent-10-b);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 1rem);
    transition: opacity var(--transition-duration), transform var(--transition-duration), visibility var(--transition-duration);
}

.sna__savebar.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.sna__savebar-text {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--text-default);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-6);
}

.sna__savebar-text svg {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    fill: var(--orange);
}

.sna__savebar-actions {
    display: flex;
    gap: .5rem;
}

.sna__savebar-actions button {
    white-space: nowrap;
}

.sna__card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    border-radius: var(--br-16);
    background-color: var(--card);
    min-width: 0;
}

.sna__card--flush {
    gap: 0;
    padding: 0;
}

.sna__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sna__card-title {
    margin: 0;
    color: var(--text-custom);
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-6);
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--transparent-5-w);
}

.sna__settings {
    columns: 2 24rem;
    column-gap: .5rem;
}

.sna__settings .sna__card {
    break-inside: avoid;
    margin-bottom: .5rem;
    gap: .4rem;
}

.sna__rows {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sna__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
}

.sna__rows hr {
    margin: 0;
}

.sna__row-info {
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    margin: 0;
    white-space: normal;
    cursor: pointer;
}

.sna__row-label {
    color: var(--text-default);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-5);
}

.sna__row-hint {
    color: var(--text-secondary);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
    line-height: 1.4;
}

.sna__row-control {
    width: min(14rem, 42vw);
}

.sna__row-control:has(.switch) {
    width: auto;
}

.sna__select {
    width: 100%;
    margin-bottom: 0;
}

.sna__affix {
    position: relative;
}

.sna__affix input {
    padding-right: 3.6rem;
}

.sna__affix span {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: var(--font-size-s);
    pointer-events: none;
}

.sna__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.sna__accordion-fill {
    align-self: flex-start;
}

.sna__chips {
    display: flex;
    gap: .3rem;
    min-width: 0;
    overflow-x: auto;
}

.sna__chips .filter {
    gap: .4rem;
}

.sna__chips .filter:not(.active):hover {
    border-color: transparent;
}

.sna__search {
    position: relative;
    width: min(18rem, 100%);
    margin: 0;
}

.sna__search svg {
    position: absolute;
    top: 50%;
    right: .9rem;
    z-index: 1;
    width: .9rem;
    height: .9rem;
    fill: var(--text-secondary);
    transform: translateY(-50%);
    transition: fill var(--transition-duration);
    pointer-events: none;
}

.sna__search:focus-within svg {
    fill: var(--text-default);
}

.sna__search input {
    padding-right: 2.4rem;
}

.sna__search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}







.sna__product b {
    overflow: hidden;
    color: var(--sna-color);
    font-weight: var(--font-weight-6);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__product .sn__label {
    margin-left: .375rem;
}

.sna__badge {
    background-color: color-mix(in srgb, var(--sna-color) 14%, transparent);
    color: var(--sna-color);
}

.sna__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28rem;
    align-items: start;
    gap: .5rem;
}

.sna__tree {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sna__features {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    min-width: 0;
    max-height: calc(100dvh - 2rem);
    padding: 1.2rem 1rem 1rem;
    border-radius: var(--br-16);
    background-color: var(--card);
}

.sna__features [hidden] {
    display: none;
}

.sna__features-head {
    padding-inline: .2rem;
}

.sna__features-head .sna__card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sna__features .sna__search {
    width: 100%;
}

.sna__features-list {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sna__feature {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.6rem;
    padding: .2rem .2rem .2rem .6rem;
    border-radius: var(--br-10);
    transition: background-color var(--transition-duration);
}

.sna__feature:hover {
    background-color: var(--transparent-3-w);
}

.sna__feature-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text-custom);
    font-size: var(--font-size-m);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__feature-usage {
    color: var(--text-secondary);
    font-size: var(--font-size-s);
}

@media (max-width: 1200px) {
    .sna__workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .sna__features {
        position: static;
        max-height: none;
    }

    .sna__features-list {
        max-height: 28rem;
    }
}

.sna__tree [hidden] {
    display: none;
}

.sna__head-actions button {
    white-space: nowrap;
}

.sna__category-head {
    margin-right: 0;
}

.sna__category-head .sna__actions {
    margin-left: auto;
}

.sna__handle {
    flex-shrink: 0;
    cursor: grab;
}

.sna__tree.is-searching .sna__handle {
    visibility: hidden;
}

.sna__item {
    min-height: 3.2rem;
    padding-block: .45rem;
    padding-right: .45rem;
}

.sna__item .sna__product {
    flex: 1;
}

.sna__category>.sna__item {
    transition: var(--transition-duration);
}

.sna__category:has(> .sna__category-head [data-sna-category-toggle]:not(:checked))>.sna__item {
    opacity: .4;
}

.sna__meta {
    display: flex;
    gap: 1.2rem;
    color: var(--text-secondary);
    font-size: var(--font-size-s);
    white-space: nowrap;
}

.sna__meta span {
    color: inherit;
}

.sna__actions .switch {
    margin-right: .4rem;
}

.sna__colored {
    color: var(--sna-color);
    font-weight: var(--font-weight-6);
}

.sna__choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.sna__choice-item {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    margin: 0;
    padding: .8rem .9rem;
    border-radius: var(--br-10);
    background-color: var(--input-form);
    white-space: normal;
    cursor: pointer;
    transition: background-color var(--transition-duration);
}

.sna__choice-item:hover {
    background-color: var(--button-hover);
}

.sna__choice-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sna__choice-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-default);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-6);
    transition: color var(--transition-duration);
}

.sna__choice-title svg {
    width: .95rem;
    height: .95rem;
    fill: currentColor;
}

.sna__choice-item:has(input:checked) {
    background-color: var(--span-10);
}

.sna__choice-item:has(input:checked) .sna__choice-title {
    color: var(--span);
}

.sna__row--stack {
    grid-template-columns: 1fr;
    gap: .7rem;
}

.sna__row--stack .sna__row-control {
    width: 100%;
}

.sna__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
}

.sna__actions .button-icon {
    width: 2.2rem;
    height: 2.2rem;
}


.sna__actions .button-icon svg {
    width: .95rem;
    height: .95rem;
}

.sna__event {
    --sna-tone: var(--span);
    display: inline-flex;
    padding: .3rem .75rem;
    border-radius: var(--br-40);
    background-color: color-mix(in srgb, var(--sna-tone) 12%, transparent);
    color: var(--sna-tone);
    font-size: var(--font-size-s);
    white-space: nowrap;
    font-style: normal;
    font-weight: var(--font-weight-6);
}

.sna__event--green {
    --sna-tone: var(--green);
}

.sna__event--money {
    --sna-tone: var(--money);
}

.sna__log-product {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    min-width: 0;
}

.sna__log-product .sna__muted {
    flex-shrink: 0;
}

.sna__log-targets {
    display: flex;
    flex-shrink: 0;
    align-self: center;
    color: var(--transparent-20-w);
    cursor: help;
    transition: color var(--transition-duration);
}

.sna__log-targets:hover {
    color: var(--text-default);
}

.sna__log-targets svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.sna__product small {
    font-size: var(--font-size-xs);
}

.sna__table table {
    min-width: 60rem;
    table-layout: fixed;
}

.sna__table th:first-child {
    width: 8rem;
}

.sna__table th:nth-child(2),
.sna__table th:nth-child(3) {
    width: 16rem;
}

.sna__table th:nth-child(5) {
    width: 8rem;
}

.sna__table th:last-child {
    width: 9rem;
}

.sna__table .sna__log-product b {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sna__nick {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--text-default);
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition-duration);
}

.sna__nick:hover {
    color: var(--span);
}


.sna__amount {
    font-weight: var(--font-weight-6);
}

.sna__amount.is-plus,
.sna__delta.is-plus {
    color: var(--green);
}

.sna__delta.is-minus {
    color: var(--red);
}

.sna__pager {
    margin-top: -.5rem;
}

.sna__pager[hidden],
.sna .no-data[hidden] {
    display: none;
}

.sna__pager .pagination {
    margin: 0;
}

.sna__flip {
    display: flex;
    transform: rotate(180deg);
}

.sna__modal {
    width: min(38rem, 100%);
}

.sna__modal--small {
    width: min(26rem, 100%);
}

.sna__modal--filter {
    width: min(46rem, 100%);
    max-width: 46rem;
}

.sna__modal--crop {
    width: min(52rem, 100%);
    max-width: 52rem;
}

.sna__crop {
    display: flex;
    justify-content: center;
    margin-bottom: .6rem;
    padding: .6rem;
    border-radius: var(--br-12);
    background-color: var(--transparent-2-w);
}

.sna__modal--crop .sna__row-hint {
    display: block;
    margin-bottom: 1rem;
}

.sna__crop-box {
    position: relative;
    overflow: hidden;
    border-radius: var(--br-8);
    touch-action: none;
    user-select: none;
    cursor: crosshair;
}

.sna__crop-box img {
    display: block;
    max-width: 100%;
    max-height: min(60vh, 32rem);
    pointer-events: none;
}

.sna__crop-frame {
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #fff;
    border-radius: var(--br-8);
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / .6);
    outline: none;
    cursor: grab;
    transition: border-color var(--transition-duration);
}

.sna__crop-box.is-dragging .sna__crop-frame {
    cursor: grabbing;
}

.sna__crop-frame:focus-visible {
    border-color: var(--span);
}

.sna__crop-box:not(.is-x, .is-y) .sna__crop-frame {
    cursor: default;
}

.sna__guide {
    width: min(34rem, 100%);
}

.sna__guide-progress {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: .3rem;
    margin-bottom: 1.2rem;
}

.sna__guide-dot {
    width: 100%;
    min-width: 0;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: var(--br-20);
    background-color: var(--transparent-10-w);
    cursor: pointer;
    transition: background-color var(--transition-duration);
}

.sna__guide-dot:hover {
    background-color: var(--span-half);
}

.sna__guide-dot.is-done {
    background-color: var(--span-half);
}

.sna__guide-dot.is-active {
    background-color: var(--span);
}

.sna__guide-viewport {
    overflow: hidden;
    transition: height .45s cubic-bezier(.22, 1, .36, 1);
}

.sna__guide-track {
    display: grid;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    align-items: start;
    column-gap: 2rem;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.sna__guide-track.is-instant,
.sna__guide-track.is-instant .sna__guide-slide {
    transition: none;
}

.sna__guide-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-bottom: 1.4rem;
    opacity: .2;
    transition: opacity .45s;
}

.sna__guide-slide.is-active {
    opacity: 1;
}

.sna__guide-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 11.5rem;
    margin-bottom: .6rem;
    padding: 1rem;
    border-radius: var(--br-12);
    background-color: var(--transparent-2-w);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.sna__guide-stage>* {
    width: 100%;
}

:is(.sna__guide-slide.is-active, .sna__figure.is-playing) .sna__guide-focus {
    animation: sna-guide-pulse 1.8s ease-in-out infinite;
}

:is(.sna__guide-slide.is-active, .sna__figure.is-playing) .sna__guide-focus-soft {
    animation: sna-guide-soft 1.8s ease-in-out infinite;
}

@keyframes sna-guide-pulse {

    0%,
    100% {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    50% {
        outline: 2px solid var(--span-half);
        outline-offset: 2px;
    }
}

@keyframes sna-guide-soft {

    0%,
    100% {
        color: var(--text-secondary);
    }

    50% {
        color: var(--span);
    }
}

@property --sna-fade-start {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --sna-fade-end {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

.sna__guide-nav {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--sna-fade-start), #000 calc(100% - var(--sna-fade-end)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--sna-fade-start), #000 calc(100% - var(--sna-fade-end)), transparent);
    transition: --sna-fade-start var(--transition-duration), --sna-fade-end var(--transition-duration);
}

.sna__guide-nav.is-fade-start {
    --sna-fade-start: 2rem;
}

.sna__guide-nav.is-fade-end {
    --sna-fade-end: 2rem;
}

.sna__guide-nav-track {
    display: flex;
    width: max-content;
    margin-inline: auto;
    gap: .4rem;
    transition: transform .5s ease;
}

.sna__guide-nav .button {
    flex-shrink: 0;
    white-space: nowrap;
}

.sna__guide-nav .button {
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sna__guide-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.sna__guide-list .sna__category {
    margin: 0;
}

:is(.sna__guide-slide.is-active, .sna__figure.is-playing) .sna__guide-drag-0 {
    animation: sna-guide-drag-down 4s cubic-bezier(.65, 0, .35, 1) infinite;
}

:is(.sna__guide-slide.is-active, .sna__figure.is-playing) .sna__guide-drag-1 {
    animation: sna-guide-drag-up 4s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes sna-guide-drag-down {

    0%,
    20%,
    100% {
        transform: translateY(0);
    }

    40%,
    70% {
        transform: translateY(calc(100% + .4rem));
    }
}

@keyframes sna-guide-drag-up {

    0%,
    20%,
    100% {
        transform: translateY(0);
    }

    40%,
    70% {
        transform: translateY(calc(-100% - .4rem));
    }
}

.sna__guide-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12rem;
    align-items: stretch;
    gap: 1rem;
}

.sna__guide-fields {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.sna__guide-input {
    display: flex;
    align-items: center;
    gap: .55rem;
    height: var(--input-height);
    padding-inline: 1rem;
    border-radius: var(--br-12);
    background-color: var(--transparent-5-w);
    color: var(--text-default);
    font-size: var(--font-size-s);
    white-space: nowrap;
}

.sna__guide-input.is-muted {
    color: var(--text-secondary);
}

.sna__guide-input .sna__guide-typed {
    color: inherit;
}

.sna__guide-caret {
    width: 1px;
    height: 1em;
    margin-left: -.5rem;
    background-color: var(--span);
    opacity: 0;
}

.is-typing>.sna__guide-caret {
    animation: sna-guide-caret .9s step-end infinite;
}

@keyframes sna-guide-caret {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

.sna__guide-color i {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: var(--br-50);
    transition: background-color var(--transition-duration);
}

.sna__guide-color span {
    color: inherit;
    text-transform: uppercase;
}

.sna__guide-card-box {
    display: flex;
    min-width: 0;
}

.sna__guide-card {
    width: 100%;
    min-height: 0;
    cursor: default;
}

.sna__guide-card .sn__tier-image {
    height: calc(100% - 5.6rem);
}

.sna__guide-card .sn__tier-content {
    padding-bottom: 1rem;
}

.sna__guide-card .sn__tier-price {
    white-space: nowrap;
}

.sna__guide-card,
.sna__guide-card::after,
.sna__guide-card .sn__tier-type,
.sna__guide-card .sn__tier-name {
    transition: border-color .4s, color .4s, background-image .4s;
}

.sna__guide-card .sn__tier-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__guide-stage:has(.sna__guide-product) {
    height: auto;
}

.sna__guide-fields .sna__field {
    gap: .35rem;
}

.sna__guide-discount {
    opacity: 0;
    scale: .6;
    transition: opacity .3s, scale .3s cubic-bezier(.34, 1.56, .64, 1);
}

.sna__guide-product:has([data-sna-type-key='old'].is-typed, .is-typed>[data-sna-type-key='old']) .sna__guide-discount {
    opacity: 1;
    scale: 1;
}

.sna__guide-periods {
    --sna-guide-columns: 3.3rem 3.4rem 5.6rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.sna__guide-periods .sna__period {
    display: grid;
    grid-template-columns: var(--sna-guide-columns);
    gap: .4rem;
    padding: 0;
    border-radius: var(--br-12);
}

.sna__guide-periods .sna__period--head span {
    padding-inline: .55rem;
    overflow: hidden;
    font-size: var(--font-size-s);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__guide-periods .sna__guide-input {
    height: 2.1rem;
    padding-inline: .55rem;
}

:is(.sna__guide-slide.is-active, .sna__figure.is-playing) .sna__guide-periods .sna__guide-focus {
    animation: none;
    outline: 2px solid var(--span-half);
    outline-offset: 2px;
}

.sna__guide-periods .sna__period {
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color var(--transition-duration);
}

.sna__guide-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    width: 100%;
}

.sna__guide-terms {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: .6rem;
}

.sna__guide-terms .sna__guide-periods .sna__period {
    padding: 0;
    border: 0;
}

.sna__guide-buy {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: .6rem;
    border-radius: var(--br-16);
    background-color: var(--card);
}

.sna__guide-buy .sn__periods .filter {
    height: 2rem;
    padding-inline: .2rem;
    font-size: var(--font-size-s);
    white-space: nowrap;
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sna__guide-buy .sn__total {
    align-items: center;
    flex-wrap: wrap;
    min-height: 2.2rem;
}

.sna__guide-buy .sn__total-price>span {
    font-size: var(--font-size-xxxl);
}

.sna__guide-buy .sn__total-price>span.is-swap {
    animation: sna-guide-swap .4s ease;
}

.sna__guide-buy .sn__total-price small {
    font-size: var(--font-size-s);
}

.sna__guide-buy .sn__total-discount {
    transition: opacity var(--transition-duration);
}

.sna__guide-buy .sn__total-discount.is-hidden {
    opacity: 0;
}

.sna__guide-buy .sn__total-old {
    font-size: var(--font-size-s);
}

@keyframes sna-guide-swap {
    from {
        opacity: 0;
        translate: 0 .4rem;
    }
}

.sna__guide-features .sna__guide-list {
    gap: .3rem;
}

.sna__guide-features .sna__feature {
    padding: .5rem .7rem;
    border-radius: var(--br-8);
    transition: background-color var(--transition-duration);
}

.sna__guide-features .sna__feature.is-active {
    background-color: var(--span-10);
}

.sna__guide-features .sna__feature-name {
    overflow: hidden;
    font-size: var(--font-size-s);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__guide-features .sna__feature-usage {
    transition: color var(--transition-duration);
}

.sna__guide-features .sna__feature-usage.is-added {
    color: var(--span);
}

.sna__guide-arrow {
    display: flex;
    color: var(--span);
}

.sna__guide-arrow svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

:is(.sna__guide-slide.is-active, .sna__figure.is-playing) .sna__guide-arrow {
    animation: sna-guide-arrow 1.1s ease-in-out infinite;
}

@keyframes sna-guide-arrow {

    0%,
    100% {
        opacity: .35;
        translate: -2px 0;
    }

    50% {
        opacity: 1;
        translate: 2px 0;
    }
}

.sna__guide-accordion {
    align-self: stretch;
    padding: .8rem .9rem;
    border-radius: var(--br-12);
    background-color: var(--card);
}

.sna__guide-accordion .sn__features-group {
    border-bottom: 0;
}

.sna__guide-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .7rem;
    color: var(--text-default);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-6);
}

.sna__guide-summary svg {
    width: .8rem;
    height: .8rem;
    fill: var(--text-custom);
    rotate: 180deg;
}

.sna__guide-accordion .sn__features-list {
    gap: .55rem;
    padding-bottom: 0;
}

.sna__guide-accordion .sn__feature {
    font-size: var(--font-size-s);
    opacity: 0;
    transform: translateX(-.6rem);
    transition: opacity .4s, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.sna__guide-accordion .sn__feature span {
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__guide-accordion .sn__feature.is-shown {
    opacity: 1;
    transform: none;
}

:is(.sna__guide-slide.is-active, .sna__figure.is-playing) .sna__guide-appear {
    animation: sna-guide-appear 3.6s cubic-bezier(.22, 1, .36, 1) infinite;
}

@keyframes sna-guide-appear {
    0% {
        opacity: 0;
        transform: translateX(-1.5rem);
    }

    20%,
    85% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
    }
}

.sna__guide-shelf {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: 100%;
}

.sna__guide-shelf .sna__guide-nav-track {
    gap: .3rem;
    margin-inline: 0;
}

.sna__guide-chips .filter {
    flex: none;
    height: 2rem;
    border-color: transparent;
    font-size: var(--font-size-s);
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sna__guide-chips .filter.active .sn__nav-count {
    background-color: var(--bg);
    color: var(--text-default);
}

.sna__guide-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 2.9rem);
    gap: .4rem;
}

.sna__guide-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding-inline: .7rem;
    border-radius: var(--br-10);
    background-color: var(--card);
    transition: opacity .2s, scale .2s;
}

.sna__guide-tile[hidden] {
    display: none;
}

.sna__guide-tile.is-out {
    opacity: 0;
    scale: .9;
}

.sna__guide-tile small,
.sna__guide-tile span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__guide-tile small {
    color: var(--sn-tier);
    font-size: var(--font-size-xs);
}

.sna__guide-tile span {
    color: var(--text-default);
    font-size: var(--font-size-s);
}

.sna__guide-stats {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.sna__guide-stats .sna__kpi {
    background-color: var(--card);
}

.sna__guide-stats .sna__kpi {
    flex-direction: column;
    gap: .3rem;
}

.sna__guide-frames {
    display: grid;
    overflow: hidden;
}

.sna__guide-frame {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .4s;
}

.sna__guide-frame.active {
    opacity: 1;
    transform: translateY(0);
}

.sna__guide-frame.leave {
    opacity: 0;
    transform: translateY(100%);
}

.sna__guide-frame:not(.active, .leave) {
    transition: none;
}

.sna__guide-charts {
    display: grid;
}

.sna__guide-line {
    grid-area: 1 / 1;
    width: 100%;
    height: 6rem;
    overflow: visible;
    opacity: 0;
    transition: opacity .3s;
}

.sna__guide-line.active {
    opacity: 1;
}

.sna__guide-line path:not(.sna__guide-area) {
    fill: none;
    stroke: var(--span);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:is(.sna__guide-slide.is-active, .sna__figure.is-playing) .sna__guide-line.active {
    animation: sna-guide-line 1.4s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sna-guide-line {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.sna__guide-step {
    color: var(--span);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
}

.sna__guide-title {
    margin: 0;
    color: var(--text-default);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-7);
}

.sna__guide-text {
    margin: 0 0 .5rem;
    color: var(--text-custom);
    font-size: var(--font-size-m);
    line-height: 1.5;
}

.sna__guide-tips {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sna__guide-tips li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem .85rem;
    border-radius: var(--br-12);
    background-color: var(--transparent-2-w);
    color: var(--text-default);
    font-size: var(--font-size-m);
    line-height: 1.45;
}

.sna__guide-tips li span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--br-50);
    background-color: var(--span-10);
    color: var(--span);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-7);
}

.sna__modal--editor {
    width: min(62rem, 100%);
    max-width: 62rem;
}

.sna__editor {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) 15rem;
    grid-template-rows: minmax(0, 1fr);
    gap: 1.5rem;
    min-height: 0;
}

.sna__editor>.sna__form {
    min-height: 0;
    padding: 1px;
    overflow-y: auto;
}

.sna__preview {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sna__preview-actions {
    margin-top: auto;
}

.sna__preview-title {
    color: var(--text-secondary);
    font-size: var(--font-size-s);
}

.sna__preview-card {
    flex-shrink: 0;
    min-height: 21rem;
    cursor: default;
}

.sna__preview-visible {
    margin-top: .25rem;
}

.sna__preview-visible>.switch {
    flex-shrink: 0;
}

.sna__preview-visible>label {
    min-width: 0;
    line-height: 1.3;
    white-space: normal;
}

.sna__preview-card .sn__like {
    pointer-events: none;
}

.sna__preview-card .sn__tier-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition-duration);
}

.sna__preview-card .sn__tier-name.is-empty {
    color: var(--text-secondary);
}

.sna__preview-video {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-duration), visibility var(--transition-duration);
}

.sna__preview-card.is-playing .sna__preview-video {
    opacity: 1;
    visibility: visible;
}

.sna__preview-card.is-playing .sn__video-open {
    color: var(--text-default);
    opacity: 1;
}

:is(.sna__field, .sna__row-control) .filepond--root .filepond--list-scroller {
    overflow: visible !important;
    scrollbar-width: none;
    margin-top: calc(1rem - 1px);
    -webkit-mask: none;
    mask: none;
}

:is(.sna__field, .sna__row-control) .filepond--root .filepond--list-scroller .filepond--list {
    left: calc(1rem - 1px);
    right: calc(1rem - 1px);
}

:is(.sna__field, .sna__row-control) .filepond--item {
    margin: 0;
}

:is(.sna__field, .sna__row-control) .filepond--item>.filepond--panel .filepond--panel-bottom {
    box-shadow: none;
}

:is(.sna__field, .sna__row-control) .filepond--list-scroller::-webkit-scrollbar {
    display: none;
}

:is(.sna__field, .sna__row-control) .filepond--root {
    max-width: none;
    margin: 0;
    border-radius: var(--br-16);
    min-height: 4.6875rem;
}

:is(.sna__field, .sna__row-control) .filepond--drop-label {
    color: var(--text-secondary);
    font-size: var(--font-size-s);
}

:is(.sna__field, .sna__row-control) .filepond--item-panel {
    transition: background-color var(--transition-duration);
}

:is(.sna__field, .sna__row-control) [data-filepond-item-state='processing-complete'] .filepond--item-panel {
    background-color: #22a061 !important;
}

:is(.sna__field, .sna__row-control) [data-filepond-item-state*='invalid'] .filepond--item-panel,
:is(.sna__field, .sna__row-control) [data-filepond-item-state*='error'] .filepond--item-panel {
    background-color: var(--red) !important;
}

:is(.sna__field, .sna__row-control) .filepond--file {
    min-width: 0;
    max-width: 100%;
}

:is(.sna__field, .sna__row-control) .filepond--file-info {
    flex: 1 1 0;
    min-width: 0;
}

:is(.sna__field, .sna__row-control) .filepond--file-status {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 40%;
}

:is(.sna__field, .sna__row-control) .filepond--file-info>span,
:is(.sna__field, .sna__row-control) .filepond--file-status>span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(.sna__field, .sna__row-control) .filepond--root .filepond--drop-label {
    min-height: 4.6875rem;
}

:is(.sna__field, .sna__row-control) .filepond--drop-label label {
    white-space: normal;
    text-align: center;
}

.filepond--drop-label.filepond--drop-label label {
    display: block;
    margin: 0;
    padding: .5em;
    font-size: var(--font-size-m);
}

.sna__form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sna__form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

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

.sna__form-grid+.sna__form-grid {
    margin-top: .5rem;
}

.sna__field {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
}

.sna__field>label,
.sna__field-head>label {
    margin: 0;
}

.sna__field>label:has(+ .adaptive-select-wrapper [data-sna-kind])::after {
    content: '*';
    color: var(--red);
}

.sna__field--wide {
    grid-column: 1 / -1;
}

.sna__field--inline {
    flex-direction: row;
    align-items: center;
    gap: .6rem;
}

.sna__field--inline>label {
    color: var(--text-custom);
    font-size: var(--font-size-m);
    cursor: pointer;
}

.sna__field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sna__input-check {
    position: relative;
}

.sna__input-check>input[type='text'] {
    width: 100%;
    padding-right: 2.75rem;
}

.sna__input-check>input[type='checkbox'] {
    position: absolute;
    top: 50%;
    right: .9rem;
    margin: 0;
    transform: translateY(-50%);
}

.sna__field>label:has(+ .sna__input-check > input[required])::after {
    content: '*';
    color: var(--red);
}

.sna__link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: .4rem;
    font-weight: var(--font-weight-5);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-duration);
    height: auto;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--span);
    font-size: var(--font-size-s);
}

.sna__link span {
    color: inherit;
}

.sna__link svg {
    flex-shrink: 0;
    width: .8rem;
    height: .8rem;
    fill: currentColor;
}

a.sna__link svg {
    width: .5rem;
    height: .5rem;
}

.sna__link:hover,
.sna__link:focus {
    border-color: transparent;
    background-color: transparent;
    color: var(--text-default);
}

.sna__periods,
.sna__period--head {
    --sna-period-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr) var(--input-height);
}

.is-all-targets .sna__periods,
.is-all-targets .sna__period--head {
    --sna-period-columns: repeat(3, minmax(0, 1fr)) var(--input-height);
}

.is-shared [data-sna-all-targets-field] {
    display: none;
}

.is-all-targets .sna__period-targets,
.is-all-targets .sna__period--head>span:nth-child(4) {
    display: none;
}

.sna__periods {
    display: grid;
    grid-template-columns: var(--sna-period-columns);
    gap: .4rem .5rem;
    padding: 1px;
    max-height: 15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.adaptive-select.is-invalid,
.sna__period input.is-invalid {
    outline-color: var(--red);
    background-color: var(--red-10);
    color: var(--red);
}

.sna__error {
    color: var(--red);
}

.sna__period {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
}

.sna__period-targets {
    min-width: 0;
    margin: 0;
}

.sna__period-targets .adaptive-select__dropdown-list {
    z-index: 1000;
    min-width: 0;
    max-width: none;
    transition-behavior: allow-discrete;
}

.sna__period-targets .adaptive-select__dropdown-list:not(.visible) {
    display: none;
}

@starting-style {
    .sna__period-targets .adaptive-select__dropdown-list.visible {
        opacity: 0;
    }
}

.sna__period--head {
    grid-template-columns: var(--sna-period-columns);
    gap: .5rem;
    padding-inline: 1px;
    color: var(--text-secondary);
    font-size: var(--font-size-m);
}

.sna__period--head span {
    color: inherit;
}

.sna__accordions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sna__accordions:empty {
    display: none;
}

.sna__accordion {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .7rem .8rem .8rem;
    border: 1px dashed var(--transparent-10-w);
    border-radius: var(--br-12);
    transition: background-color var(--transition-duration), border-color var(--transition-duration);
}

.sna__accordion:hover,
.sna__accordion:focus-within {
    border-color: var(--transparent-20-w);
    background-color: var(--transparent-1-w);
}

.sna__accordion-remove,
.sna__accordion-remove:hover,
.sna__accordion-remove:focus {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
}

.sna__accordion-remove svg {
    fill: var(--red);
}

.sna__accordion-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sna__accordion-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text-default);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-6);
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition-duration);
}

.sna__accordion-title.is-empty {
    color: var(--text-secondary);
}

.sna__accordion-langs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .4rem;
}

.sna__lang-input {
    position: relative;
    display: block;
    margin: 0;
}

.sna__lang-input span {
    position: absolute;
    top: 50%;
    left: .9rem;
    z-index: 1;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-6);
    pointer-events: none;
    transform: translateY(-50%);
}

.sna__lang-input input {
    padding-left: 2.6rem;
}

.sna__reveal {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: -.45rem;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows var(--transition-duration), margin-top var(--transition-duration), opacity var(--transition-duration), visibility var(--transition-duration);
}

.sna__reveal.is-open {
    grid-template-rows: 1fr;
    margin-top: .1rem;
    opacity: 1;
    visibility: visible;
}

.sna__reveal-inner {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-height: 0;
    overflow: hidden;
}

.sna__reveal.is-shown .sna__reveal-inner {
    overflow: visible;
}

.sna__reveal-inner>.adaptive-select-wrapper::before,
.sna__reveal-inner>.adaptive-select-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(100% - 1rem);
    height: 1px;
    background-color: var(--transparent-5-w);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-duration);
}

.sna__reveal-inner>.adaptive-select-wrapper::before {
    right: calc(100% + 1.5rem);
}

.sna__reveal-inner>.adaptive-select-wrapper::after {
    left: calc(100% + 1.5rem);
}

.sna__reveal.is-shown .sna__reveal-inner>.adaptive-select-wrapper::before,
.sna__reveal.is-shown .sna__reveal-inner>.adaptive-select-wrapper::after {
    opacity: 1;
}

.sna__reveal-inner>label {
    margin: 0;
}

[data-sna-panel-permissions] .adaptive-select-wrapper::before,
[data-sna-panel-permissions] .adaptive-select-wrapper::after {
    display: none;
}

.sna__kind-extra .sna__reveal-inner {
    padding-left: 1.4rem;
}

.sna__kind-extra-main {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.sna__kind-extra-main>label,
.sna__label-info {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

.sna__group-info {
    display: inline-flex;
    cursor: help;
}

.sna__group-info[hidden] {
    display: none;
}

.sna__group-info svg {
    width: .85rem;
    height: .85rem;
    fill: var(--text-secondary);
    transition: fill var(--transition-duration);
}

.sna__group-info:hover svg {
    fill: var(--text-default);
}

.sna__kind-extra-main::before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    width: .85rem;
    height: calc(100% - var(--input-height) / 2);
    border-bottom: 1px solid var(--transparent-10-w);
    border-left: 1px solid var(--transparent-10-w);
    border-bottom-left-radius: var(--br-8);
    pointer-events: none;
}

.sna__kind-extra input {
    width: 100%;
}

.sna__kind-extra input:user-invalid {
    outline-color: var(--red);
    background-color: var(--red-10);
}

.sna__form-grid:has(.sna__kind-extra.is-open) .sna__reveal-inner>.adaptive-select-wrapper::before {
    opacity: 0;
}

.sna__required::after {
    content: '*';
    color: var(--red);
}

.sna__filter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
}

.sna__filter-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-right: 0;
}

.sna__filter-head .sna__actions {
    margin-left: auto;
}

.sna__filter-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-custom);
    font-weight: var(--font-weight-6);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__filter:has([data-sna-filter-toggle]:not(:checked)) .sna__filter-options {
    opacity: .4;
}

.sna__filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    transition: opacity var(--transition-duration);
}

.sna__filter-options:empty {
    display: none;
}

.sna__filter-tag {
    padding: .3rem .7rem;
    border-radius: var(--br-8);
    background-color: var(--transparent-5-w);
    color: var(--text-default);
    font-size: var(--font-size-s);
}

.sna__commands-field {
    margin-top: 0;
}

.sna__commands-field.is-open {
    margin-top: 1rem;
}

.sna__commands-field+.sna__form-grid {
    margin-top: 1rem;
}

.sna__commands {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.sna__command {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sna__command input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--font-size-s);
    line-height: 1.5;
}

.sna__command input.is-invalid {
    outline-color: var(--red);
    background-color: var(--red-10);
}

.sna__vars {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin-top: .2rem;
    color: var(--text-secondary);
    font-size: var(--font-size-m);
}

.sna__vars span {
    margin-right: .2rem;
}

.sna__vars .sna__var {
    width: auto;
    height: 1.6rem;
    padding-inline: .5rem;
    border: none;
    border-radius: var(--br-6);
    background-color: var(--span-10);
    color: var(--span);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-5);
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sna__vars .sna__var:hover {
    background-color: var(--span);
    color: var(--text-default);
}

.sna__vars .sna__var:focus-visible {
    outline: none;
    background-color: var(--span);
    color: var(--text-default);
}

.sna__option {
    flex-direction: row;
    align-items: center;
    padding: .6rem .8rem;
}

.sna__modal--filter [data-sna-options] {
    max-height: 22rem;
    padding: 1px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sna__option .sna__accordion-langs {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .sna__modal--filter .sna__accordion-langs {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sna__picker {
    position: relative;
    margin-bottom: 0;
}

.sna__picker .adaptive-select__dropdown-list {
    width: 100%;
    max-width: none;
    transition-behavior: allow-discrete;
}

.sna__picker .adaptive-select__dropdown-list:not(.visible) {
    display: none;
}

@starting-style {
    .sna__picker .adaptive-select__dropdown-list.visible {
        opacity: 0;
    }
}


.sna__picker li[hidden],
.sna__picker .no-data[hidden],
.sna__picker-empty[hidden] {
    display: none;
}

.sna__picker-empty {
    padding: .8rem;
    color: var(--text-secondary);
    font-size: var(--font-size-s);
    text-align: center;
}

.sna__picker-search {
    position: sticky;
    top: -.3rem;
    z-index: 1;
    margin: -.3rem -.3rem 0;
    padding: .3rem;
    background-color: var(--card);
}

.sna__accordion-fill {
    align-self: flex-start;
}

.sna__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.sna__chips:empty {
    display: none;
}

.sna__chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    padding: .25rem;
    border-radius: var(--br-40);
    background-color: var(--transparent-5-w);
    color: var(--text-default);
    font-size: var(--font-size-s);
    cursor: grab;
    transition: color var(--transition-duration);
}

.sna__chip>span:not(.sna__chip-state) {
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__chip.is-off {
    color: var(--text-secondary);
}

.sna__chip .sna__chip-value {
    flex-shrink: 0;
    width: 4rem;
    height: 1.4rem;
    padding: 0 .55rem;
    border: 0;
    border-radius: var(--br-40);
    background-color: var(--transparent-5-w);
    color: var(--text-default);
    font-size: var(--font-size-xs);
    cursor: text;
    transition: background-color var(--transition-duration), opacity var(--transition-duration);
}

.sna__chip .sna__chip-value:focus {
    background-color: var(--transparent-10-w);
}

.sna__chip .sna__chip-value:disabled {
    opacity: .4;
    cursor: default;
}

.sna__chip.is-off>span:not(.sna__chip-state) {
    text-decoration: line-through;
}

.sna__chip-state {
    display: inline-flex;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--br-40);
    background-color: var(--transparent-5-w);
}

.sna__chip-state button,
.sna__chip-remove {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.4rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--text-secondary);
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sna__chip-remove {
    width: 1.4rem;
    border-radius: 50%;
}

.sna__chip-state svg,
.sna__chip-remove svg {
    width: .6rem;
    height: .6rem;
    fill: currentColor;
}

.sna__chip-off:not(.active):hover {
    color: var(--red);
}

.sna__chip-on:not(.active):hover {
    color: var(--green);
}

.sna__chip-off.active,
.sna__chip-off.active:hover,
.sna__chip-off.active:focus {
    background-color: var(--red);
    color: #fff;
}

.sna__chip-on.active,
.sna__chip-on.active:hover,
.sna__chip-on.active:focus {
    background-color: var(--green);
    color: #fff;
}

.sna__chip-remove:hover,
.sna__chip-remove:focus {
    border-color: transparent;
    background-color: var(--transparent-10-w);
    color: var(--text-default);
}

.sna__form-actions {
    display: flex;
    gap: .5rem;
}

.sna__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
}

.sna__kpi {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.sna__kpi::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--green);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
    mask-image: linear-gradient(90deg, transparent, #000);
    opacity: .1;
    pointer-events: none;
    z-index: -1;
    transition: background-color var(--transition-duration);
}

.sna__kpi.is-minus::before {
    background-color: var(--red);
}

.sna__kpi-icon {
    position: absolute;
    top: 50%;
    right: -1.2rem;
    display: flex;
    color: var(--green);
    opacity: .04;
    pointer-events: none;
    transform: translateY(-50%);
    z-index: -1;
    transition: color var(--transition-duration);
}

.sna__kpi.is-minus .sna__kpi-icon {
    color: var(--red);
}

.sna__kpi-icon svg {
    width: 6.5rem;
    height: 6.5rem;
    fill: currentColor;
}

.sna__kpi-body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.sna__kpi-title {
    color: var(--text-secondary);
    font-size: var(--font-size-m);
}

.sna__kpi-value {
    color: var(--text-default);
    font-family: var(--font-family-2);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-7);
    line-height: 1.15;
    white-space: nowrap;
}

.sna__kpi-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    color: var(--text-secondary);
    font-size: var(--font-size-s);
}

.sna__delta {
    padding: .15rem .4rem;
    border-radius: var(--br-4);
    background-color: color-mix(in srgb, var(--green) 10%, transparent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-6);
}

.sna__delta.is-minus {
    background-color: var(--red-10);
}

.sna__chart-head {
    align-items: flex-end;
    flex-wrap: wrap;
}

.sna__chart-summary {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.sna__chart-total {
    color: var(--text-default);
    font-family: var(--font-family-2);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-7);
    line-height: 1.15;
}

.sna__chart-legend {
    display: flex;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: var(--font-size-s);
}

.sna__chart-key {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: inherit;
}

.sna__chart-key i {
    width: .9rem;
    height: 2px;
    border-radius: var(--br-20);
    background-color: var(--span);
}

.sna__chart-key.is-prev i {
    background: repeating-linear-gradient(90deg, var(--text-secondary) 0 3px, transparent 3px 5px);
}

.sna__chart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 15rem auto;
    column-gap: .8rem;
    row-gap: .6rem;
}

.sna__chart-grid {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: -.45rem 0;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    line-height: .9rem;
    text-align: right;
}

.sna__chart-grid span {
    color: inherit;
}

.sna__chart-plot {
    position: relative;
    background-image: linear-gradient(var(--transparent-5-w) 1px, transparent 1px);
    background-size: 100% 25%;
    border-bottom: 1px solid var(--transparent-10-w);
    cursor: crosshair;
    touch-action: pan-y;
}

.sna__chart-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sna__chart.is-drawn .sna__chart-svg {
    animation: sna-draw .7s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sna-draw {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.sna__chart-line,
.sna__chart-prev {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sna__chart-line {
    stroke: var(--span);
    stroke-width: 2;
}

.sna__chart-prev {
    stroke: var(--text-secondary);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
    opacity: .5;
}

.sna__chart-guide,
.sna__chart-dot,
.sna__chart-tip {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-duration);
}

.sna__chart.is-hover :is(.sna__chart-guide, .sna__chart-dot, .sna__chart-tip) {
    opacity: 1;
}

.sna__chart-guide {
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--transparent-10-w);
}

.sna__chart-dot {
    width: .6rem;
    height: .6rem;
    border: 2px solid var(--card);
    border-radius: var(--br-50);
    background-color: var(--span);
    transform: translate(-50%, 50%);
}

.sna__chart-tip {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .5rem .7rem;
    border: 1px solid var(--transparent-10-w);
    border-radius: var(--br-8);
    background-color: var(--card);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    transform: translateX(-50%);
    transition: opacity var(--transition-duration), top var(--transition-duration), left var(--transition-duration);
    z-index: 1;
}

.sna__chart-tip span,
.sna__chart-tip small {
    color: var(--text-secondary);
    font-size: inherit;
}

.sna__chart-tip b {
    color: var(--text-default);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-6);
}

.sna__chart-axis {
    position: relative;
    grid-column: 2;
    height: .9rem;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.sna__chart-axis span {
    position: absolute;
    top: 0;
    color: inherit;
    white-space: nowrap;
    transform: translateX(-50%);
}

.sna__chart-axis span:first-child {
    transform: none;
}

.sna__chart-axis span:last-child {
    transform: translateX(-100%);
}

.sna__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .5rem;
}

.sna__span-4 {
    grid-column: span 4;
}

.sna__span-5 {
    grid-column: span 5;
}

.sna__span-7 {
    grid-column: span 7;
}

.sna__span-12 {
    grid-column: span 12;
}

.sna__card-head:has(.sna__card-title) {
    flex-wrap: wrap;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--transparent-5-w);
}

.sna__card-head .sna__card-title {
    padding-bottom: 0;
    border-bottom: 0;
}

.sna__card-head .sna__muted b {
    color: var(--text-default);
}

.sna__pill {
    padding: .3rem .65rem;
    border-radius: var(--br-20);
    background-color: var(--span-10);
    color: var(--span);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-6);
}

.sna__good {
    color: var(--green);
}

.sna__insight {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--text-default);
    font-size: var(--font-size-m);
}

.sna__insight span {
    color: inherit;
}

.sna__insight svg {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    fill: var(--span);
}

.sna__funnel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    flex: 1;
}

.sna__funnel-step {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .4rem;
    padding: .9rem;
    border-radius: var(--br-12);
    background-color: var(--transparent-2-w);
    transition: background-color var(--transition-duration);
}

.sna__funnel-step:hover {
    background-color: var(--transparent-5-w);
}

.sna__funnel-icon {
    display: flex;
    margin-bottom: auto;
    padding-bottom: .6rem;
}

.sna__funnel-icon svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: var(--span);
}

.sna__funnel-value {
    color: var(--text-default);
    font-family: var(--font-family-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-7);
}

.sna__funnel-bar {
    display: block;
    height: 4px;
    border-radius: var(--br-20);
    background-color: var(--transparent-5-w);
    overflow: hidden;
}

.sna__funnel-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--span);
    transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

.sna__funnel-rate {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.sna__goal-body {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.sna__ring,
.sna__donut {
    position: relative;
    flex-shrink: 0;
    width: 9.5rem;
    aspect-ratio: 1;
}

.sna__ring svg,
.sna__donut svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.sna__ring circle {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}

.sna__ring-track {
    stroke: var(--transparent-5-w);
}

.sna__ring-forecast {
    stroke: var(--span-half);
    stroke-dasharray: var(--sna-forecast) 100;
    opacity: .45;
    animation: sna-ring-forecast 1s cubic-bezier(.22, 1, .36, 1) both;
}

.sna__ring-value {
    stroke: var(--span);
    stroke-dasharray: var(--sna-goal) 100;
    animation: sna-ring-value 1s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sna-ring-value {
    from {
        stroke-dasharray: 0 100;
    }
}

@keyframes sna-ring-forecast {
    from {
        stroke-dasharray: 0 100;
    }
}

.sna__ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    padding: 1.4rem;
    text-align: center;
    pointer-events: none;
}

.sna__ring-label b {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-default);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-7);
    line-height: 1.15;
}

.sna__ring-unit {
    color: var(--text-custom);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
    white-space: nowrap;
}

.sna__ring-unit:empty {
    display: none;
}

.sna__ring-label small {
    overflow: hidden;
    max-width: 100%;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__goal-info {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    flex: 1;
    min-width: 0;
}

.sna__goal-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--transparent-5-w);
    font-size: var(--font-size-m);
}

.sna__goal-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.sna__goal-row span {
    color: var(--text-secondary);
}

.sna__goal-row b {
    color: var(--text-default);
    font-weight: var(--font-weight-6);
    text-align: right;
}

.sna__goal-row b.sna__good {
    color: var(--green);
}

.sna__goal-row small {
    font-size: var(--font-size-xs);
}

.sna__heat {
    display: grid;
    grid-template-columns: 1.8rem repeat(24, minmax(0, 1fr));
    gap: 3px;
}

.sna__heat i {
    height: 1.45rem;
    border-radius: var(--br-4);
    background-color: color-mix(in srgb, var(--span) var(--sna-level), var(--transparent-2-w));
    outline: 1px solid transparent;
    outline-offset: 1px;
    transition: outline-color var(--transition-duration);
}

.sna__heat i:hover {
    outline-color: var(--span);
}

.sna__heat-day,
.sna__heat-hour {
    align-self: center;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.sna__heat-hour {
    grid-column: span 3;
    padding-top: .2rem;
}

.sna__heat-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    margin-top: auto;
}

.sna__heat-scale {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.sna__heat-scale i {
    width: .8rem;
    height: .8rem;
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--span) var(--sna-level), var(--transparent-2-w));
}

.sna__heat-scale i:first-of-type {
    margin-left: .3rem;
}

.sna__heat-scale i:last-of-type {
    margin-right: .3rem;
}

.sna__audience {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.sna__audience-key {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-secondary);
    font-size: var(--font-size-s);
}

.sna__audience-key b {
    color: var(--text-default);
    font-weight: var(--font-weight-6);
}

.sna__audience-key i {
    width: .55rem;
    height: .55rem;
    border-radius: var(--br-50);
    background-color: var(--span);
}

.sna__audience-key.is-new i {
    background-color: var(--transparent-10-w);
}

.sna__audience-bar {
    display: flex;
    height: .55rem;
    border-radius: var(--br-20);
    background-color: var(--transparent-10-w);
    overflow: hidden;
}

.sna__audience-bar i {
    border-radius: inherit;
    background-color: var(--span);
    transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

.sna__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    flex: 1;
}

.sna__fact {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    padding: 1rem;
    border-radius: var(--br-12);
    background-color: var(--transparent-2-w);
    overflow: hidden;
    isolation: isolate;
    transition: background-color var(--transition-duration);
}

.sna__fact:hover {
    background-color: var(--transparent-5-w);
}

.sna__fact-icon {
    position: absolute;
    top: 50%;
    right: -.9rem;
    display: flex;
    color: var(--text-default);
    opacity: .05;
    pointer-events: none;
    transform: translateY(-50%);
    z-index: -1;
}

.sna__fact-icon svg {
    width: 4.5rem;
    height: 4.5rem;
    fill: currentColor;
}

.sna__fact b {
    color: var(--text-default);
    font-family: var(--font-family-2);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-7);
    line-height: 1.15;
    white-space: nowrap;
}

.sna__stats-table table {
    min-width: 58rem;
    table-layout: fixed;
}

.sna__stats-table th:first-child {
    width: 3.2rem;
}

.sna__stats-table th:nth-child(3) {
    width: 8rem;
}

.sna__stats-table th:nth-child(4) {
    width: 9rem;
}

.sna__stats-table th:nth-child(5),
.sna__stats-table th:nth-child(6) {
    width: 11rem;
}

.sna__stats-table--whales table {
    min-width: 38rem;
}

.sna__stats-table--whales th:nth-child(3) {
    width: 5.5rem;
}

.sna__stats-table--whales th:nth-child(4) {
    width: 7rem;
}

.sna__stats-table--whales th:nth-child(5) {
    width: auto;
}

.sna__stats-table--whales th:nth-child(6) {
    width: 10rem;
}

.sna__stats-table b {
    color: var(--text-default);
    font-weight: var(--font-weight-6);
}

.sna__rank-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--br-8);
    background-color: var(--transparent-5-w);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-7);
}

.sna__rank-num.is-top {
    background-color: color-mix(in srgb, var(--sna-place) 12%, transparent);
    color: var(--sna-place);
}

tr:nth-child(1) .sna__rank-num.is-top {
    --sna-place: var(--top-one);
}

tr:nth-child(2) .sna__rank-num.is-top {
    --sna-place: var(--top-two);
}

tr:nth-child(3) .sna__rank-num.is-top {
    --sna-place: var(--top-three);
}

.sna__cell-product {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.sna__cell-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.sna__cell-info b,
.sna__ellipsis {
    display: block;
    overflow: hidden;
    color: var(--text-default);
    font-weight: var(--font-weight-6);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__ellipsis {
    font-weight: inherit;
}

.sna__cell-share,
.sna__cell-trend {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.sna__cell-share .sna__bar {
    flex: 1;
    margin-top: 0;
}

.sna__spark {
    width: 5rem;
    height: 1.6rem;
    overflow: visible;
}

.sna__spark path {
    fill: none;
    stroke: var(--span);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sna__thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--br-8);
    background-color: var(--transparent-5-w);
    color: var(--text-secondary);
    overflow: hidden;
}

.sna__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sna__thumb img.is-icon {
    inset: 12%;
    width: 76%;
    height: 76%;
    object-fit: contain;
}

.sna__thumb svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
}

.sna__donut-wrap {
    display: flex;
    justify-content: center;
    padding: .3rem 0;
}

.sna__donut {
    width: 10rem;
}

.sna__donut circle {
    fill: none;
    stroke: var(--span);
    stroke-width: 12;
    opacity: var(--sna-tone);
    transition: opacity var(--transition-duration);
    animation: sna-ring-value .9s cubic-bezier(.22, 1, .36, 1) both;
}

.sna__donut svg.is-focus circle:not(.is-active) {
    opacity: .08;
}

.sna__legend {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.sna__legend-row {
    display: grid;
    grid-template-columns: .6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .45rem .55rem;
    border-radius: var(--br-8);
    font-size: var(--font-size-s);
    transition: background-color var(--transition-duration);
}

.sna__legend-row:hover {
    background-color: var(--transparent-2-w);
}

.sna__legend-row>i {
    width: .6rem;
    height: .6rem;
    border-radius: var(--br-50);
    background-color: color-mix(in srgb, var(--span) calc(var(--sna-tone) * 100%), transparent);
}

.sna__legend-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
}

.sna__legend-side b {
    color: var(--text-default);
}

.sna__rank {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.sna__rank-row {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    padding: .55rem .6rem;
    border-radius: var(--br-12);
    transition: background-color var(--transition-duration);
}

.sna__rank-row:hover {
    background-color: var(--transparent-2-w);
}

.sna__top-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: var(--font-size-s);
}

.sna__top-line b {
    overflow: hidden;
    color: var(--text-default);
    font-weight: var(--font-weight-6);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__top-revenue {
    flex-shrink: 0;
    color: var(--text-default);
    font-weight: var(--font-weight-6);
}

.sna__top-sub {
    color: var(--text-secondary);
    font-size: var(--font-size-s);
}

.sna__top-sub span {
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__bar {
    display: block;
    height: 3px;
    margin-top: .2rem;
    border-radius: var(--br-20);
    background-color: var(--transparent-5-w);
    overflow: hidden;
}

.sna__bar::after {
    content: '';
    display: block;
    width: var(--sna-fill);
    height: 100%;
    border-radius: inherit;
    background-color: var(--span-half);
    transition: background-color var(--transition-duration);
}

:is(.sna__rank-row, tr):hover .sna__bar::after {
    background-color: var(--span);
}

.sna__columns {
    display: grid;
    grid-template-columns: repeat(var(--sna-columns, 4), minmax(0, 1fr));
    gap: .4rem;
    flex: 1;
    min-height: 12rem;
}

.sna__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.sna__column small {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    transition: color var(--transition-duration);
}

.sna__column-bar {
    display: flex;
    align-items: flex-end;
    flex: 1;
    width: 100%;
    border-radius: var(--br-8);
    background-color: var(--transparent-2-w);
    overflow: hidden;
}

.sna__column-bar i {
    width: 100%;
    height: var(--sna-h);
    border-radius: var(--br-8);
    background-color: var(--span-10);
    transform-origin: bottom;
    animation: sna-bar .6s cubic-bezier(.22, 1, .36, 1) both;
    transition: background-color var(--transition-duration);
}

.sna__column.is-top .sna__column-bar i {
    background-color: var(--span-half);
}

.sna__column:hover .sna__column-bar i {
    background-color: var(--span);
}

.sna__column.is-top small,
.sna__column:hover small {
    color: var(--text-default);
}

@keyframes sna-bar {
    from {
        transform: scaleY(0);
    }
}

.sna__column-label {
    overflow: hidden;
    max-width: 100%;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__feed {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.sna__feed-row {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .45rem .5rem;
    border-radius: var(--br-12);
    transition: background-color var(--transition-duration);
}

.sna__feed-row:hover {
    background-color: var(--transparent-2-w);
}

.sna__feed-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.sna__feed-info>.sna__top-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__feed-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
}

.sna__feed-title .sna__nick {
    min-width: 0;
}

.sna__feed-gift {
    display: flex;
    flex-shrink: 0;
}

.sna__feed-gift svg {
    width: .85rem;
    height: .85rem;
    fill: var(--span);
}

.sna__feed-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
    font-size: var(--font-size-s);
    white-space: nowrap;
}

.admin_nav a.button {
    text-decoration: none;
}

@media (max-width: 1100px) {
    .sna__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sna__grid>[class*='sna__span-'] {
        grid-column: span 12;
    }
}

@media (max-width: 768px) {
    .sna__savebar {
        bottom: 5rem;
        width: var(--sna-max, calc(100% - 2rem));
        padding: .8rem;
    }

    .sna__savebar-text {
        justify-content: center;
        width: 100%;
    }

    .sna__savebar-actions {
        flex: 1;
    }

    .sna__savebar-actions button {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 768px) {

    .sna__head,
    .sna__card {
        padding: 1rem;
    }

    .sna__periods,
    .sna__period--head {
        --sna-period-columns: repeat(3, minmax(0, 1fr)) var(--input-height);
    }

    .sna__period:not(.sna__period--head) {
        row-gap: .4rem;
        padding-bottom: .4rem;
        border-bottom: 1px dashed var(--transparent-10-w);
    }

    .sna__period-targets {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .sna__period--head span:nth-child(4) {
        display: none;
    }

    .sna__card--flush {
        padding: 0;
    }

    .sna__search {
        width: 100%;
    }

    .sna__row {
        grid-template-columns: 1fr;
        gap: .6rem;
    }

    .sna__row:has(.switch) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sna__row-control {
        width: 100%;
    }

    .sna__editor {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        row-gap: .6rem;
        overflow-y: auto;
    }

    .sna__editor>.sna__form {
        min-height: auto;
        overflow: visible;
    }

    .sna__preview {
        display: contents;
    }

    .sna__preview-title,
    .sna__preview-card,
    .sna__preview>.sna__row-hint,
    .sna__preview-visible {
        order: -1;
        justify-self: center;
    }

    .sna__preview-card {
        width: min(15rem, 100%);
        min-height: 19rem;
    }

    .sna__form-grid {
        grid-template-columns: 1fr;
    }

    .sna__reveal-inner>.adaptive-select-wrapper::before,
    .sna__reveal-inner>.adaptive-select-wrapper::after {
        display: none;
    }

    .sna__chart {
        grid-template-rows: 11rem auto;
    }

    .sna__guide-periods {
        --sna-guide-columns: 3.4rem minmax(0, 1fr) minmax(0, 1fr);
    }

    .sna__guide-product {
        grid-template-columns: minmax(0, 1fr) 9rem;
    }

    .sna__guide-stage:has(.sna__guide-flow) {
        height: auto;
    }

    .sna__guide-flow {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: .5rem;
    }

    .sna__guide-flow>* {
        width: 100%;
    }

    .sna__guide-flow .sna__guide-arrow {
        width: auto;
        rotate: 90deg;
    }

    .sna__guide-card .sn__tier-content {
        padding-inline: .5rem;
    }

    .sna__guide-card .sn__tier-price {
        gap: .3rem;
        font-size: var(--font-size-l);
    }

    .sna__guide-card .sn__tier-price small {
        display: none;
    }


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

    .sna__goal-body {
        flex-direction: column;
        align-items: stretch;
    }

    .sna__goal-body .sna__ring {
        align-self: center;
    }

    .sna__heat {
        grid-template-columns: 1.4rem repeat(24, minmax(0, 1fr));
        gap: 2px;
    }

    .sna__heat i {
        height: .9rem;
        border-radius: 2px;
    }

    .sna__heat-hour {
        font-size: 8px;
    }

    .sna__kpi-icon svg {
        width: 5rem;
        height: 5rem;
    }

    .sna__head-actions {
        flex-wrap: wrap;
        width: 100%;
    }

    .sna__item {
        flex-wrap: wrap;
    }

    .sna__item .sna__product {
        flex-basis: calc(100% - 2rem);
    }

    .sna__item .sna__meta {
        padding-left: 1.5rem;
    }

    .sna__item .sna__actions {
        margin-left: auto;
    }

    .sna__choice {
        grid-template-columns: 1fr;
    }

}
.sna__help {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    align-items: start;
    gap: .5rem;
}

.sna__help-aside {
    position: sticky;
    top: .5rem;
}

.sna__help-nav {
    gap: .6rem;
    max-height: calc(100vh - 1rem);
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.sna__help-nav-title {
    padding-inline: .5rem;
    color: var(--text-secondary);
    font-size: var(--font-size-s);
}

.sna__help-nav ol,
.sna__help-nav ul {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sna__help-nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .5rem;
    border-radius: var(--br-10);
    color: var(--text-custom);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-5);
    text-decoration: none;
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sna__help-nav-link span {
    line-height: normal;
}

.sna__help-nav-link:hover {
    background-color: var(--transparent-5-w);
    color: var(--text-default);
}

.sna__help-nav-num {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--br-6);
    background-color: var(--transparent-5-w);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-6);
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

[data-sna-help-nav-chapter].active>.sna__help-nav-link {
    color: var(--text-default);
}

[data-sna-help-nav-chapter].active .sna__help-nav-num {
    background-color: var(--span);
    color: var(--text-default);
}

.sna__help-nav-sub {
    display: grid;
    grid-template-rows: 0fr;
    margin-left: 1.25rem;
    opacity: 0;
    transition: grid-template-rows var(--transition-duration), opacity var(--transition-duration), margin var(--transition-duration);
}

.sna__help-nav-sub>ul {
    min-height: 0;
    padding-left: .85rem;
    overflow: hidden;
    border-left: 1px solid var(--transparent-10-w);
}

[data-sna-help-nav-chapter].active .sna__help-nav-sub {
    grid-template-rows: 1fr;
    margin-block: .2rem .4rem;
    opacity: 1;
}

.sna__help-nav ul a {
    display: block;
    padding: .3rem .5rem;
    border-radius: var(--br-8);
    color: var(--text-secondary);
    font-size: var(--font-size-m);
    text-decoration: none;
    transition: color var(--transition-duration), background-color var(--transition-duration);
}

.sna__help-nav ul a:hover {
    color: var(--text-default);
}

.sna__help-nav ul a.active {
    background-color: var(--span-10);
    color: var(--span);
}

.sna__help-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.sna__help-chapter {
    gap: 1.2rem;
    padding: 1.6rem 1.8rem;
    scroll-margin-top: .5rem;
}

.sna__help-body>.no-data {
    margin: 0;
    padding: 2.5rem 1.4rem;
    color: var(--text-secondary);
    font-size: var(--font-size-l);
    opacity: 1;
    text-align: center;
}

.sna__help-body>.no-data[hidden] {
    display: none;
}

.sna__help-chapter[hidden],
.sna__help-section[hidden],
[data-sna-help-nav-chapter][hidden],
.sna__help-nav li[hidden] {
    display: none;
}

.sna__help-chapter-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sna__help-chapter-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.sna__help-chapter-info small {
    color: var(--span);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
}

.sna__help-chapter-info h2 {
    margin: 0;
    color: var(--text-default);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-7);
}

.sna__help-open {
    color: var(--span);
}

.sna__help-open:hover {
    color: var(--text-default);
}

.sna__help-lead {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-m);
    font-style: italic;
    line-height: 1.55;
}

.sna__help-section {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--transparent-5-w);
    scroll-margin-top: .5rem;
}

.sna__help-section h3 {
    margin: 0;
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-6);
}

.sna__help-section h3 a {
    color: var(--text-default);
    text-decoration: none;
    transition: color var(--transition-duration);
}

.sna__help-section h3 a:hover {
    color: var(--span);
}

.sna__help-p,
.sna__help-list li,
.sna__help-fields dd,
.sna__help-steps p,
.sna__help-note p,
.sna__help-faq p {
    margin: 0;
    color: var(--text-custom);
    font-size: var(--font-size-m);
    line-height: 1.6;
}

.sna__help b {
    color: var(--text-default);
    font-weight: var(--font-weight-6);
}

.sna__help code {
    display: inline;
    padding: .1rem .35rem;
    border-radius: var(--br-5);
    background-color: var(--transparent-5-w);
    color: var(--span);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    word-break: break-word;
}

.sna__help-steps {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sna-step;
}

.sna__help-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding-left: 2.6rem;
    counter-increment: sna-step;
}

.sna__help-steps li::before {
    content: counter(sna-step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: var(--br-50);
    background-color: var(--span-10);
    color: var(--span);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-7);
}

.sna__help-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2rem;
    bottom: -.7rem;
    left: .85rem;
    width: 1px;
    background-color: var(--transparent-10-w);
}

.sna__help-steps b {
    font-size: var(--font-size-m);
    line-height: 1.7rem;
}

.sna__help-fields {
    display: flex;
    flex-direction: column;
    margin: 0;
    border-radius: var(--br-12);
    background-color: var(--transparent-2-w);
}

.sna__help-fields>div {
    display: grid;
    grid-template-columns: minmax(10rem, 30%) minmax(0, 1fr);
    gap: 1rem;
    padding: .8rem 1rem;
}

.sna__help-fields>div+div {
    border-top: 1px solid var(--transparent-5-w);
}

.sna__help-fields dt {
    color: var(--text-default);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-6);
    line-height: 1.6;
}

.sna__help-fields dd {
    margin: 0;
}

.sna__help-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding-left: 1.2rem;
}

.sna__help-list li::marker {
    color: var(--span);
}

.sna__help-note {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--br-12);
    background-color: var(--transparent-5-w);
}

.sna__help-note>svg {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    color: var(--green);
    fill: var(--green);
}

.sna__help-note>div {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    color: var(--text-custom);
    font-size: var(--font-size-m);
    line-height: 1.6;
}

.sna__help-note.is-warn>svg {
    color: var(--orange);
    fill: var(--orange);
}

.sna__help-faq {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.sna__help-faq details {
    border-radius: var(--br-12);
    background-color: var(--transparent-2-w);
    transition: background-color var(--transition-duration);
}

.sna__help-faq details[open] {
    background-color: var(--transparent-5-w);
}

.sna__help-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    color: var(--text-default);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-6);
    list-style: none;
    cursor: pointer;
}

.sna__help-faq summary::-webkit-details-marker {
    display: none;
}

.sna__help-faq summary svg {
    flex-shrink: 0;
    width: .8rem;
    height: .8rem;
    fill: var(--text-secondary);
    transition: rotate var(--transition-duration), fill var(--transition-duration);
}

.sna__help-faq summary:hover svg {
    fill: var(--text-default);
}

.sna__help-faq details[open] summary svg {
    rotate: 180deg;
}

.sna__help-faq p {
    padding: 0 1rem 1rem;
}

.sna__help-pages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: .5rem;
}

.sna__help-page {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem;
    border-radius: var(--br-12);
    background-color: var(--transparent-2-w);
    color: var(--text-custom);
    font-size: var(--font-size-s);
    line-height: 1.5;
    text-decoration: none;
    transition: background-color var(--transition-duration);
}

.sna__help-page:hover {
    background-color: var(--transparent-5-w);
}

.sna__help-page b {
    font-size: var(--font-size-m);
}

.sna__help-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    margin-bottom: .3rem;
    border-radius: var(--br-10);
    background-color: var(--span-10);
    transition: background-color var(--transition-duration);
}

.sna__help-page-icon svg {
    width: 1rem;
    height: 1rem;
    fill: var(--span);
    transition: fill var(--transition-duration);
}

.sna__help-page:hover .sna__help-page-icon {
    background-color: var(--span);
}

.sna__help-page:hover .sna__help-page-icon svg {
    fill: var(--text-default);
}

.sna__help-roadmap {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.sna__help-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-custom);
    font-size: var(--font-size-s);
    white-space: nowrap;
}

.sna__help-bar {
    display: block;
    flex: 1;
    height: .4rem;
    overflow: hidden;
    border-radius: var(--br-10);
    background-color: var(--transparent-5-w);
}

.sna__help-bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background-color: var(--span);
    transition: width .5s ease;
}

.sna__help-roadmap ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sna__help-task {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .2rem .8rem;
    padding: .9rem 1rem;
    border-radius: var(--br-12);
    background-color: var(--transparent-2-w);
    transition: background-color var(--transition-duration);
}

.sna__help-check {
    margin-top: .15rem;
}

.sna__help .sna__help-task label {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    white-space: normal;
    align-items: flex-start;
    margin: 0;
    text-align: left;
    color: var(--text-custom);
    font-size: var(--font-size-s);
    line-height: 1.5;
    cursor: pointer;
}

.sna__help .sna__help-task label b {
    font-size: var(--font-size-m);
    transition: color var(--transition-duration);
}

.sna__help-task.is-done label b {
    color: var(--span);
}

.sna__help-task .sna__link {
    grid-column: 2;
    justify-self: start;
    margin-top: .3rem;
    color: var(--span);
    font-size: var(--font-size-s);
}

.sna__help-task .sna__link:hover {
    color: var(--text-default);
}

@media (max-width: 1024px) {
    .sna__help {
        grid-template-columns: minmax(0, 1fr);
    }

    .sna__help-aside {
        position: static;
    }

    .sna__help-nav {
        max-height: none;
    }

    .sna__help-nav>ol {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sna__help-nav-sub {
        display: none;
    }
}

@media (max-width: 768px) {
    .sna__help-chapter {
        padding: 1.2rem 1rem;
    }

    .sna__help-chapter-head {
        flex-wrap: wrap;
    }

    .sna__help-open {
        order: 3;
        width: 100%;
    }

    .sna__help-fields>div {
        grid-template-columns: minmax(0, 1fr);
        gap: .2rem;
    }

    .sna__help-roadmap ol,
    .sna__help-nav>ol {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sna__figure {
    margin: .2rem 0;
}

.sna__figure .sna__guide-stage {
    height: auto;
    min-height: 13rem;
    margin: 0;
    padding: 1.6rem;
}

.sna__figure .sna__guide-stage>* {
    max-width: 40rem;
    margin-inline: auto;
}

.sna__figure .sna__guide-stage>.sna__guide-product {
    max-width: 34rem;
}

.sna__figure .sna__guide-stage>.sna__figure-editor {
    max-width: none;
}

.sna__figure-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12.5rem;
    gap: 1.2rem;
    padding: 1.2rem;
    border-radius: var(--br-16);
    background-color: var(--card);
    text-align: left;
}

.sna__figure-form .sna__form-grid {
    gap: .8rem;
}

.sna__figure-form .sna__field label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--font-size-s);
}

.sna__figure-num {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: var(--br-50);
    background-color: var(--span);
    color: var(--text-default);
    font-size: var(--font-size-xxs);
    font-style: normal;
    font-weight: var(--font-weight-7);
}

.sna__figure-form .adaptive-select,
.sna__figure-form .sna__guide-input {
    height: 2.5rem;
    min-width: 0;
    overflow: hidden;
}

.sna__figure-form .adaptive-select__span_text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__figure-color {
    justify-content: space-between;
    padding-right: .35rem;
}

.sna__figure-color i {
    align-self: stretch;
    width: 2.4rem;
    margin-block: .35rem;
    border-radius: var(--br-8);
    transition: background-color var(--transition-duration);
}

.sna__figure-color span {
    text-transform: uppercase;
}

.sna__figure-name input {
    margin: 0 0 0 auto;
}

.sna__figure-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.4rem;
    padding: .5rem;
    border: 1px dashed var(--transparent-20-w);
    border-radius: var(--br-12);
    color: var(--text-custom);
    font-size: var(--font-size-s);
    line-height: 1.4;
    text-align: center;
}

.sna__figure-drop .filepond--label-action {
    color: var(--span);
}

.sna__figure-drop.is-filled {
    justify-content: flex-start;
}

.sna__figure-file {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-width: 0;
    padding: .45rem .55rem;
    border-radius: var(--br-10);
    background-color: var(--transparent-5-w);
    text-align: left;
}

.sna__figure-file i {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--br-50);
    background-color: var(--transparent-10-w);
}

.sna__figure-file i svg {
    width: .55rem;
    height: .55rem;
    fill: var(--text-default);
}

.sna__figure-file>span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sna__figure-file b,
.sna__figure-file small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sna__figure-file b {
    font-size: var(--font-size-xs);
}

.sna__figure-file small {
    color: var(--text-secondary);
    font-size: var(--font-size-xxs);
}

.sna__figure-editor .sna__preview {
    gap: .5rem;
}

.sna__figure-card {
    --sna-color: var(--sn-tier);
    min-height: 15rem;
    transition: border-color .4s;
}

.sna__figure-card .sn__tier-image {
    height: calc(100% - 6rem);
}

.sna__figure-card .sn__label {
    transition: color .4s, background-color .4s;
}

.sna__figure-chips {
    grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr);
}

.sna__figure .sna__guide-stage>.sna__figure-head {
    max-width: none;
}

.sna__figure-head {
    flex-wrap: wrap;
    text-align: left;
}

.sna__figure-head .sn__title {
    margin: 0;
}

@property --sna-pos {
    syntax: '<number>';
    inherits: true;
    initial-value: 50;
}

.sna__figure-crop {
    --sna-pos: 50;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 7.5rem;
    align-items: center;
    gap: 1rem;
    transition: --sna-pos .9s cubic-bezier(.65, 0, .35, 1);
}

.sna__figure-crop .sna__crop-box {
    cursor: default;
}

.sna__figure-crop .sna__crop-box img {
    width: 100%;
    max-height: none;
}

.sna__figure-crop .sna__crop-frame {
    left: calc((100% - var(--sna-frame)) * var(--sna-pos) / 100);
    width: var(--sna-frame);
    height: 100%;
    cursor: default;
}

.sna__figure-mini {
    min-height: 10rem;
    aspect-ratio: 3 / 4;
    cursor: default;
}

.sna__figure-mini .sn__tier-bg {
    object-position: calc(var(--sna-pos) * 1%) 50%;
}

.sna__figure-mini .sn__tier-content {
    padding: .7rem;
}

.sna__figure-mini .sn__tier-name {
    font-size: var(--font-size-m);
}

.sna__figure-panel {
    width: 100%;
    padding: 1rem 1.1rem;
    border-radius: var(--br-16);
    background-color: var(--card);
    text-align: left;
}

.sna__figure-command {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1.5;
}

.sna__figure-panel .sna__vars .sna__var {
    display: inline-flex;
    align-items: center;
}

.sna__figure-panel .sna__vars .sna__var.is-hot {
    background-color: var(--span);
    color: var(--text-default);
}

.sna__figure-panel .button-icon {
    flex-shrink: 0;
}

.sna__figure-panel .sna__link {
    color: var(--span);
}

.sna__figure .sna__guide-stage>.sna__figure-buy {
    max-width: 22rem;
}

.sna__figure-buy {
    text-align: left;
}

.sna__figure-buy .sna__guide-focus {
    outline: none;
    box-shadow: none;
    animation: none;
}

.sna__figure-buy .sn__periods .filter {
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sna__figure-buy .sn__total-discount {
    transition: opacity var(--transition-duration);
}

.sna__figure-buy .sn__total-discount.is-hidden {
    opacity: 0;
}

.sna__figure-buy .sn__total-price>span.is-swap {
    animation: sna-guide-swap .4s ease;
}

.sna__figure-buy .sn__buy .button-icon {
    width: 3rem;
    height: 3rem;
}

.sna__figure-logs {
    padding: .4rem .6rem;
}

.sna__figure-logs .table {
    margin: 0;
}

.sna__figure-logs td,
.sna__figure-logs th {
    white-space: nowrap;
}

.sna__figure-discord {
    display: flex;
    gap: .9rem;
    padding: 1rem;
    border-radius: var(--br-12);
    background-color: var(--card);
    text-align: left;
}

.sna__figure-discord-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--br-50);
    background-color: #5865f2;
}

.sna__figure-discord-avatar svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: var(--text-default);
}

.sna__figure-discord-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}

.sna__figure-discord-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--font-size-m);
}

.sna__figure-discord-meta small {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.sna__figure-discord-tag {
    padding: .05rem .3rem;
    border-radius: var(--br-4);
    background-color: var(--span);
    color: var(--text-default);
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-7);
}

.sna__figure-embed {
    --sn-tier: #5865F2;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    max-width: 32rem;
    padding: .9rem 1rem 1rem;
    border-left: 4px solid var(--sn-tier);
    border-radius: var(--br-6);
    background-color: var(--transparent-5-w);
    transition: border-color .4s;
}

.sna__figure-embed-swatch {
    display: none;
}

.sna__figure-embed-main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.sna__figure-embed-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
    color: var(--text-custom);
    font-size: var(--font-size-s);
}

.sna__figure-embed-title {
    color: var(--text-default);
    font-size: var(--font-size-m);
}

.sna__figure-embed-fields {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: .5rem 2rem;
}

.sna__figure-embed-fields span,
.sna__figure-embed-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    color: var(--text-custom);
}

.sna__figure-embed-fields small,
.sna__figure-embed-field small {
    color: var(--text-default);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-6);
}

.sna__figure-embed code {
    padding: .05rem .3rem;
    border: 1px solid var(--transparent-10-w);
    border-radius: var(--br-4);
    background-color: var(--transparent-5-w);
    color: var(--text-default);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--font-size-xs);
}

.sna__figure-embed-field i {
    color: #00a8fc;
    font-style: normal;
}

.sna__figure-embed-thumb {
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--br-6);
    object-fit: cover;
}

.sna__figure-embed-image {
    display: block;
    aspect-ratio: 6 / 1;
    border-radius: var(--br-6);
    background-color: var(--transparent-5-w);
    background-position: center;
    background-size: cover;
}

.sna__figure-chips .sna__accordion {
    align-self: stretch;
    gap: .8rem;
    background-color: var(--card);
}

.sna__figure-chips .sna__chips {
    flex-direction: column;
    align-items: flex-start;
}

.sna__figure-chips .sna__chip {
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: color var(--transition-duration), outline-color var(--transition-duration);
}

.sna__figure-chips .sna__chip-state button {
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.sna__figure-chips .sna__guide-accordion {
    align-self: stretch;
}

.sna__figure-chips .sn__feature.disabled {
    opacity: .5;
}

.sna__figure-chips .sn__feature {
    opacity: 1;
    transform: none;
    font-size: var(--font-size-s);
    transition: color var(--transition-duration), opacity var(--transition-duration);
}

.sna__figure-cmp {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1rem;
    border-radius: var(--br-12);
    background-color: var(--card);
}

.sna__figure-cmp .sn__cmp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sna__figure-cmp .sn__cmp-table {
    width: 100%;
}

.sna__figure-cmp .sn__cmp-table th,
.sna__figure-cmp .sn__cmp-table td {
    position: static;
    height: auto;
    padding: 0;
    font-size: var(--font-size-s);
}

.sna__figure-cmp .sn__cmp-yes,
.sna__figure-cmp .sn__cmp-no {
    width: 1.5rem;
}

.sna__figure-cmp .sn__cmp-diff label {
    font-size: var(--font-size-s);
}

.sna__figure-cmp .sn__cmp-table td>div,
.sna__figure-cmp .sn__cmp-table th>div {
    display: flex;
    align-items: center;
    max-height: 3rem;
    padding: .45rem .6rem;
    overflow: hidden;
    transition: max-height .4s ease, padding .4s ease, opacity .3s ease;
}

.sna__figure-cmp .sn__cmp-table td:not(:first-child)>div,
.sna__figure-cmp .sn__cmp-table th:not(:first-child)>div {
    justify-content: center;
}

.sna__figure-cmp.is-diff tr.is-same td>div {
    max-height: 0;
    padding-block: 0;
    opacity: 0;
}

@media (max-width: 768px) {
    .sna__figure .sna__guide-stage {
        padding: 1rem;
    }

    .sna__figure-chips {
        grid-template-columns: minmax(0, 1fr);
    }


    .sna__figure-crop {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .sna__figure-crop .sna__guide-arrow {
        rotate: 90deg;
    }

    .sna__figure-mini {
        width: 8rem;
    }

    .sna__figure-head .sn__timer {
        width: 100%;
    }

    .sna__figure-logs {
        overflow: hidden;
    }

    .sna__figure-logs th:nth-child(3),
    .sna__figure-logs td:nth-child(3),
    .sna__figure-logs th:nth-child(5),
    .sna__figure-logs td:nth-child(5) {
        display: none;
    }

    .sna__figure-embed-thumb {
        width: 3.2rem;
        height: 3.2rem;
    }

    .sna__figure-embed-fields {
        grid-template-columns: repeat(2, max-content);
        gap: .5rem 1.2rem;
    }

    .sna__figure-editor {
        grid-template-columns: minmax(0, 1fr);
        padding: .9rem;
    }

    .sna__figure-form .sna__form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sna__figure-editor .sna__preview {
        width: min(14rem, 100%);
        margin-inline: auto;
    }

    .sna__figure-cmp {
        padding: .8rem .6rem;
    }

    .sna__figure-cmp .sn__cmp-table th:nth-child(4),
    .sna__figure-cmp .sn__cmp-table td:nth-child(4) {
        display: none;
    }

    .sna__figure-cmp .sn__cmp-table td>div,
    .sna__figure-cmp .sn__cmp-table th>div {
        padding-inline: .35rem;
    }
}