:root {
    --sn-celerity: 300;
    --sn-pulse: 0.17;
    --sn-absorb: 0.42;
    --sn-radius: 15;
    --sn-life: 7;

    --sn-btn-fabric: 0.575;
    --sn-btn-fabric-hover: 0.748;
    --sn-sheet-gain: 1.75;
    --sn-sheet-sharpen: 1.45;
    --sn-btn-busy: 1.35;
    --sn-btn-hover: 0.62;
    --sn-velvet: 1;

    --sn-ease: cubic-bezier(.16, .9, .24, 1);

    --sn-accent-rgb: 40 159 133;
    --sn-echo-rgb: 15 42 38;
    --sn-ground-rgb: 233 238 244;
}

.diag-sec[data-fill="aurora"],
.diag-sec[data-fill="ink"],
.diag-sec[data-fill="slate"],
[data-sn-deep] {
    --sn-echo-rgb: 214 232 228;
    --sn-accent-rgb: 111 211 184;
    --sn-ground-rgb: 6 24 28;
}

html.sn [data-sn] {
    transition:
        opacity var(--sn-reverb) var(--sn-ease) var(--sn-d, 0s),
        transform var(--sn-reverb) var(--sn-ease) var(--sn-d, 0s);
}

html.sn [data-sn][data-sn-wait] {
    opacity: 0;
    transform: translate3d(0, calc(var(--sn-rise) * var(--sn-a, 1)), 0);
}

html.sn [data-sn-faint] {
    opacity: calc(0.35 + 0.65 * var(--sn-a, 1));
}

[data-sn-echo] {
    transition-property: border-color, box-shadow, background-color, color, transform, opacity, filter;
    transition-duration: var(--sn-reverb);
    transition-timing-function: var(--sn-ease);
}

[data-sn-echo]:hover,
[data-sn-echo]:focus-visible {
    transition-duration: var(--sn-strike);
}

[data-sn-tone] {
    transition:
        border-color var(--sn-strike) var(--sn-ease),
        box-shadow var(--sn-reverb) var(--sn-ease);
}

[data-sn-tone]:focus-visible {
    outline: 2px solid rgb(var(--sn-accent-rgb) / .85);
    outline-offset: 2px;
    border-color: rgb(var(--sn-accent-rgb));
    animation: sn-tone var(--sn-tone) ease-in-out infinite;
}

@keyframes sn-tone {

    0%,
    100% {
        box-shadow: 0 0 0 1px rgb(var(--sn-accent-rgb) / .14);
    }

    50% {
        box-shadow:
            0 0 0 3px rgb(var(--sn-accent-rgb) / .14),
            0 0 18px 0 rgb(var(--sn-accent-rgb) / .14);
    }
}

[data-sn-shadow] {
    position: relative;
    isolation: isolate;
}

[data-sn-shadow]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(var(--sn-shadow-dir, 100deg),
            rgb(var(--sn-ground-rgb) / 0) 0%,
            rgb(var(--sn-ground-rgb) / .28) 34%,
            rgb(var(--sn-ground-rgb) / .72) 100%);
}

[data-sn-shadow]::after {
    content: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
    inset: 0 auto 0 0;
    width: 1px;
    background: linear-gradient(to bottom,
            rgb(var(--sn-accent-rgb) / 0),
            rgb(var(--sn-accent-rgb) / .55),
            rgb(var(--sn-accent-rgb) / 0));
}

.sn-rule {
    display: block;
    border: 0;
    margin: 0;
    width: 100%;
    height: calc(var(--sn-sagitta) * 2 + 2px);
    background: rgb(var(--sn-echo-rgb) / .22);
    -webkit-mask: var(--sn-wavefront) no-repeat center / 100% 100%;
    mask: var(--sn-wavefront) no-repeat center / 100% 100%;
}

.sn-rule--strong {
    background: rgb(var(--sn-echo-rgb) / .42);
}

.sn-rule--accent {
    background: rgb(var(--sn-accent-rgb) / .6);
}

.sn-rule--flip {
    transform: scaleY(-1);
}

[data-sn-curve] {
    position: relative;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

[data-sn-curve]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--sn-sagitta) * -1);
    height: calc(var(--sn-sagitta) * 2 + 2px);
    pointer-events: none;
    background: rgb(var(--sn-echo-rgb) / .22);
    -webkit-mask: var(--sn-wavefront) no-repeat center / 100% 100%;
    mask: var(--sn-wavefront) no-repeat center / 100% 100%;
}

[data-sn-curve="bottom"]::before {
    top: auto;
    bottom: calc(var(--sn-sagitta) * -1);
    transform: scaleY(-1);
}

.sn-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    opacity: var(--sn-field-opacity);
}

.sn-field canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.sn-return {
    display: block;
    width: 100%;
    max-width: 180px;
    height: 54px;
}

.sn-return canvas {
    display: block;
}

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

    [data-sn-echo],
    [data-sn-tone] {
        transition: none;
    }

    [data-sn-tone]:focus-visible {
        animation: none;
        box-shadow: 0 0 0 3px rgb(var(--sn-accent-rgb) / .18);
    }

}

@media (forced-colors: active) {

    [data-sn-shadow]::before,
    [data-sn-shadow]::after,
    .sn-field {
        display: none;
    }

    .sn-rule,
    [data-sn-curve]::before {
        background: CanvasText;
    }
}


.zone-aurora>.sn-field {
    position: absolute;
    inset: 0;
}

html.sn-on .pcard-tracks,
html.sn-on .stats-grid,
html.sn-on .footer-base,
html.sn-on .pc-fix,
html.sn-on .stat:nth-child(n+3) {
    position: relative;
    border-top-color: transparent;
}

html.sn-on .pcard-tracks::before,
html.sn-on .stats-grid::before,
html.sn-on .footer-base::before,
html.sn-on .pc-fix::before,
html.sn-on .stat:nth-child(n+3)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--sn-sagitta) * -1);
    height: calc(var(--sn-sagitta) * 2 + 2px);
    pointer-events: none;
    background: rgb(var(--sn-echo-rgb) / .22);
    -webkit-mask: var(--sn-wavefront) no-repeat center / 100% 100%;
    mask: var(--sn-wavefront) no-repeat center / 100% 100%;
}

html.sn-on .pc-motif {
    --sn-shadow-dir: 100deg;
}


[data-sn-host] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

[data-sn-host]>.sn-field {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: var(--sn-btn-fabric);
    -webkit-mask-image: radial-gradient(115% 150% at 50% 50%, transparent 0%, rgb(0 0 0 / .28) 42%, #000 82%);
    mask-image: radial-gradient(115% 150% at 50% 50%, transparent 0%, rgb(0 0 0 / .28) 42%, #000 82%);
    transition: opacity var(--sn-reverb) var(--sn-ease);
}

[data-sn-host]:hover>.sn-field,
[data-sn-host]:focus-visible>.sn-field {
    opacity: var(--sn-btn-fabric-hover);
    transition-duration: var(--sn-strike);
}

[data-sn-host] {
    --sn-echo-rgb: 255 255 255;
    --sn-accent-rgb: 255 255 255;
    --sn-field-gain: 3.2;
    --sn-field-sharpen: 0.72;
}

.nav-cta[data-sn-host],
.nf-cta[data-sn-host] {
    --sn-btn-fabric: 0.322;
    --sn-btn-fabric-hover: 0.426;
    --sn-btn-busy: 0.85;
    --sn-field-gain: 2.2;
}

.nf-cta[data-sn-host] {
    --sn-echo-rgb: 15 42 38;
    --sn-accent-rgb: 15 42 38;
}

html[data-sn-velvet="0"] .zone-aurora .a1,
html[data-sn-velvet="0"] .zone-aurora .a2,
html[data-sn-velvet="0"] .cta-aurora .a1,
html[data-sn-velvet="0"] .cta-aurora .a2 {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    [data-sn-host]>.sn-field {
        opacity: calc(var(--sn-btn-fabric) * 0.75);
    }
}