:root {
    --nv-tw3-ink: #060706;
    --nv-tw3-night: #0b0e0f;
    --nv-tw3-moss: #677044;
    --nv-tw3-olive: #8f8e55;
    --nv-tw3-rust: #9a5436;
    --nv-tw3-bone: #eee8dc;
    --nv-tw3-muted: #a9a89e;
}

.nv-tw3 {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: clip;
    color: var(--nv-tw3-bone);
    background:
        radial-gradient(circle at 72% 12%, rgb(117 126 130 / 0.12), transparent 30rem),
        radial-gradient(circle at 12% 54%, rgb(102 87 52 / 0.08), transparent 24rem),
        linear-gradient(180deg, #080b0d 0%, #080907 48%, #050604 100%);
}

.nv-tw3::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.14;
    background-image:
        linear-gradient(rgb(255 255 255 / 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.018) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 78%, transparent 100%);
}

.nv-tw3__ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.nv-tw3__ambient-storm {
    position: absolute;
    top: 20rem;
    right: 5%;
    width: 44rem;
    height: 28rem;
    border-radius: 50%;
    background: rgb(100 117 132 / 0.09);
    filter: blur(88px);
}

.nv-tw3__ambient-earth {
    position: absolute;
    top: 56rem;
    left: 12%;
    width: 34rem;
    height: 24rem;
    border-radius: 50%;
    background: rgb(111 84 47 / 0.08);
    filter: blur(92px);
}

.nv-tw3__shell {
    width: min(1500px, calc(100% - 32px));
    margin-inline: auto;
    padding: 1.25rem 0 5rem;
}

.nv-tw3__breadcrumb {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.5rem;
    margin: 0 auto 1rem;
    color: #8b8d86;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nv-tw3__breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #c7c6bc;
    transition: color 180ms ease;
}

.nv-tw3__breadcrumb a:hover,
.nv-tw3__breadcrumb a:focus-visible {
    color: #f6f0e4;
}

.nv-tw3__breadcrumb strong {
    color: #c4aa7d;
}

.nv-tw3-hero {
    position: relative;
    min-height: 45rem;
}

.nv-tw3-hero__stage {
    position: relative;
    isolation: isolate;
    min-height: 43rem;
    overflow: hidden;
    border: 1px solid rgb(224 218 199 / 0.14);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 45% 18%, rgb(196 200 184 / 0.13), transparent 18rem),
        linear-gradient(180deg, #151a1c 0%, #141612 44%, #0b0c09 100%);
    box-shadow:
        0 2rem 5rem rgb(0 0 0 / 0.52),
        inset 0 0 0 1px rgb(255 255 255 / 0.02),
        inset 0 -8rem 8rem rgb(0 0 0 / 0.36);
}

.nv-tw3-hero__stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 7rem rgb(0 0 0 / 0.68);
}

.nv-tw3-scene__sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 46% 24%, rgb(207 206 181 / 0.11), transparent 20rem),
        linear-gradient(180deg, #222a2d 0%, #283033 28%, #1d211f 60%, #11130f 100%);
}

.nv-tw3-scene__light {
    position: absolute;
    z-index: 1;
    top: 5%;
    left: 31%;
    width: 29rem;
    height: 30rem;
    border-radius: 50%;
    background: rgb(211 204 169 / 0.1);
    filter: blur(76px);
    pointer-events: none;
}

.nv-tw3-scene__layer,
.nv-tw3-scene__fog {
    --tw3-parallax-x: 0px;
    --tw3-parallax-y: 0px;
    position: absolute;
    pointer-events: none;
    transform: translate3d(var(--tw3-parallax-x), var(--tw3-parallax-y), 0);
    will-change: transform;
}

.nv-tw3-scene__layer img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.nv-tw3-scene__layer--clouds {
    z-index: 2;
    top: -8%;
    left: -5%;
    width: 110%;
    opacity: 0.86;
    filter: saturate(0.7) brightness(0.86) contrast(1.06);
}

.nv-tw3-scene__layer--clouds img {
    animation: nv-tw3-cloud-drift 20s ease-in-out infinite alternate;
}

.nv-tw3-scene__layer--village {
    z-index: 5;
    left: -1%;
    bottom: -3%;
    width: 103%;
    filter: drop-shadow(0 2rem 2rem rgb(0 0 0 / 0.45));
}

.nv-tw3-scene__layer--griffin {
    z-index: 8;
    top: 11%;
    right: 8%;
    width: 27%;
    filter: drop-shadow(0 1.6rem 1.4rem rgb(0 0 0 / 0.55));
}

.nv-tw3-scene__layer--griffin img {
    animation: nv-tw3-griffin-flight 5.2s ease-in-out infinite;
    transform-origin: 54% 56%;
}

.nv-tw3-scene__layer--left {
    z-index: 10;
    left: -7%;
    bottom: -18%;
    width: 39%;
    filter: drop-shadow(1.2rem 1rem 1.2rem rgb(0 0 0 / 0.62));
}

.nv-tw3-scene__layer--right {
    z-index: 11;
    right: -8%;
    bottom: -19%;
    width: 40%;
    filter: drop-shadow(-1.2rem 1rem 1.2rem rgb(0 0 0 / 0.62));
}

.nv-tw3-scene__fog {
    left: -12%;
    width: 124%;
    border-radius: 50%;
    filter: blur(28px);
}

.nv-tw3-scene__fog--back {
    z-index: 6;
    bottom: 15%;
    height: 12rem;
    opacity: 0.38;
    background:
        radial-gradient(ellipse at 24% 55%, rgb(201 207 204 / 0.17), transparent 32%),
        radial-gradient(ellipse at 58% 58%, rgb(186 194 193 / 0.19), transparent 36%),
        radial-gradient(ellipse at 82% 48%, rgb(181 190 192 / 0.14), transparent 34%);
    animation: nv-tw3-fog-back 14s ease-in-out infinite alternate;
}

.nv-tw3-scene__fog--front {
    z-index: 12;
    bottom: -4rem;
    height: 13rem;
    opacity: 0.34;
    background:
        radial-gradient(ellipse at 18% 48%, rgb(196 197 183 / 0.2), transparent 34%),
        radial-gradient(ellipse at 50% 50%, rgb(176 183 177 / 0.2), transparent 37%),
        radial-gradient(ellipse at 84% 50%, rgb(179 183 174 / 0.18), transparent 36%);
    animation: nv-tw3-fog-front 11s ease-in-out infinite alternate;
}

.nv-tw3-scene__vignette {
    position: absolute;
    inset: 0;
    z-index: 14;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgb(5 7 8 / 0.08) 0%, transparent 32%, rgb(5 5 4 / 0.64) 100%),
        linear-gradient(90deg, rgb(4 5 4 / 0.24), transparent 15%, transparent 84%, rgb(4 5 4 / 0.25));
}

.nv-tw3-hero__hint {
    position: absolute;
    z-index: 18;
    right: 1.6rem;
    bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: rgb(228 222 207 / 0.48);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nv-tw3-hero__hint span {
    width: 1.9rem;
    height: 1px;
    background: currentColor;
}

.nv-tw3-hero__scroll {
    position: absolute;
    z-index: 22;
    bottom: -1.15rem;
    left: 50%;
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    transform: translateX(-50%);
    place-items: center;
    border: 1px solid rgb(220 211 189 / 0.18);
    border-radius: 50%;
    background: #0b0d0a;
    color: #c2a26d;
    text-decoration: none;
    box-shadow: 0 0.8rem 1.6rem rgb(0 0 0 / 0.44);
}

.nv-tw3-hero__scroll span {
    animation: nv-tw3-scroll 1.8s ease-in-out infinite;
}

.nv-tw3-section {
    position: relative;
    padding: clamp(4.8rem, 8vw, 8rem) clamp(0.4rem, 3vw, 2.4rem);
}

.nv-tw3-intro {
    padding-top: clamp(4rem, 7vw, 5.6rem);
    padding-bottom: clamp(3rem, 5vw, 4.4rem);
}

.nv-tw3-intro__card {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 0.7fr);
    gap: 1.4rem;
    align-items: end;
    border: 1px solid rgb(223 216 194 / 0.13);
    border-radius: 1.5rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    background:
        radial-gradient(circle at 10% 20%, rgb(122 104 60 / 0.12), transparent 17rem),
        radial-gradient(circle at 88% 90%, rgb(96 111 112 / 0.13), transparent 17rem),
        linear-gradient(135deg, rgb(11 13 11 / 0.92), rgb(18 18 14 / 0.78));
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.2);
    backdrop-filter: blur(14px);
}

.nv-tw3-intro__copy {
    max-width: 50rem;
}

.nv-tw3-eyebrow,
.nv-tw3-heading > p,
.nv-tw3-finale__copy > p {
    margin: 0 0 0.8rem;
    color: #c8aa76;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.nv-tw3-intro h1 {
    margin: 0;
    color: #f3eee3;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(3.3rem, 6.8vw, 6.4rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.88;
    text-shadow: 0 0.4rem 1rem rgb(0 0 0 / 0.38);
}

.nv-tw3-intro__tagline {
    max-width: 43rem;
    margin: 1.2rem 0 0;
    color: #ede6d9;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    line-height: 1.5;
}

.nv-tw3-intro__aside {
    max-width: 43rem;
    margin: 0.9rem 0 0;
    color: #b2b1a8;
    font-size: 0.96rem;
    line-height: 1.7;
}

.nv-tw3-intro__actions,
.nv-tw3-finale__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.7rem;
}

.nv-tw3-button {
    display: inline-flex;
    min-height: 2.85rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px solid rgb(226 219 199 / 0.17);
    border-radius: 999px;
    padding: 0.78rem 1.1rem;
    background: rgb(12 13 11 / 0.58);
    color: #ece7dc;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.nv-tw3-button:hover,
.nv-tw3-button:focus-visible {
    transform: translateY(-2px);
    border-color: rgb(197 171 116 / 0.42);
    background: rgb(54 49 32 / 0.66);
    color: #fffaf0;
}

.nv-tw3-button--primary {
    border-color: rgb(170 130 70 / 0.55);
    background: linear-gradient(135deg, rgb(112 79 39 / 0.92), rgb(67 66 42 / 0.9));
    color: #fff8e9;
    box-shadow: inset 0 0 1.2rem rgb(255 218 146 / 0.06), 0 0.6rem 1.6rem rgb(66 48 24 / 0.17);
}

.nv-tw3-heading {
    max-width: 56rem;
}

.nv-tw3-heading--center {
    margin-inline: auto;
    text-align: center;
}

.nv-tw3-heading h2,
.nv-tw3-finale h2 {
    margin: 0;
    color: #f4eee2;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.7rem, 6vw, 5.3rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.96;
}

.nv-tw3-heading > span,
.nv-tw3-finale__copy > span {
    display: block;
    max-width: 47rem;
    margin-top: 1.1rem;
    color: #a9aaa2;
    font-size: 1rem;
    line-height: 1.75;
}

.nv-tw3-heading--center > span,
.nv-tw3-finale__copy > span {
    margin-inline: auto;
}

.nv-tw3-section--echoes {
    padding-top: 5.4rem;
}

.nv-tw3-memory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 3rem;
}

.nv-tw3-memory-card {
    --memory-rotation: 0deg;
    position: relative;
    min-height: 14rem;
    overflow: hidden;
    border: 1px solid rgb(211 205 184 / 0.12);
    border-radius: 1rem;
    padding: 1.25rem 1.25rem 1.45rem;
    background:
        radial-gradient(circle at 88% 12%, rgb(138 105 61 / 0.07), transparent 8rem),
        linear-gradient(150deg, rgb(24 25 20 / 0.95), rgb(10 11 9 / 0.93));
    box-shadow: 0 1rem 2rem rgb(0 0 0 / 0.16);
    transform: rotate(var(--memory-rotation));
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.nv-tw3-memory-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background: repeating-linear-gradient(0deg, transparent 0 11px, rgb(255 255 255 / 0.012) 11px 12px);
}

.nv-tw3-memory-card:hover {
    transform: rotate(0deg) translateY(-4px);
    border-color: rgb(188 160 105 / 0.28);
    background: linear-gradient(150deg, rgb(33 33 25 / 0.97), rgb(12 13 10 / 0.95));
}

.nv-tw3-memory-card__topline {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #ad966f;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nv-tw3-memory-card__topline small {
    color: #77796f;
    font-size: inherit;
}

.nv-tw3-memory-card blockquote {
    position: relative;
    z-index: 1;
    margin: 2.15rem 0 1.5rem;
    color: #e5e0d5;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.06rem;
    line-height: 1.68;
}

.nv-tw3-memory-card__mark {
    position: absolute;
    right: 1rem;
    bottom: 0.8rem;
    color: #876d42;
    font-size: 1.05rem;
    opacity: 0.62;
}

.nv-tw3-memory-card.is-hidden {
    opacity: 0;
    transform: rotate(var(--memory-rotation)) translateY(14px);
}

.nv-tw3-memory-card.is-revealed {
    animation: nv-tw3-memory-in 430ms ease var(--reveal-delay, 0ms) both;
}

.nv-tw3-inline-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 2.2rem auto 0;
    border: 0;
    padding: 0.65rem 0.4rem;
    background: transparent;
    color: #c4a36b;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.nv-tw3-inline-link:hover,
.nv-tw3-inline-link:focus-visible {
    color: #fff1d5;
}

.nv-tw3-finale {
    position: relative;
    isolation: isolate;
    min-height: 28rem;
    overflow: hidden;
    margin-top: 3rem;
    border: 1px solid rgb(216 210 191 / 0.11);
    border-radius: 2rem;
    display: grid;
    place-items: center;
    padding: 4rem 1.5rem;
    text-align: center;
    background:
        radial-gradient(circle at 50% 24%, rgb(147 154 151 / 0.12), transparent 18rem),
        linear-gradient(180deg, rgb(17 20 19 / 0.96), rgb(8 9 7 / 0.99));
}

.nv-tw3-finale__storm {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.16;
    background:
        radial-gradient(ellipse at 24% 22%, rgb(211 212 198 / 0.24), transparent 22%),
        radial-gradient(ellipse at 72% 34%, rgb(128 142 148 / 0.25), transparent 31%),
        linear-gradient(180deg, transparent, rgb(0 0 0 / 0.38));
}

.nv-tw3-finale__copy {
    max-width: 57rem;
}

.nv-tw3-finale__actions {
    justify-content: center;
    margin-top: 1.8rem;
}

.nv-tw3-finale small {
    display: block;
    margin-top: 1.8rem;
    color: #74756e;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-tw3-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 720ms ease, transform 720ms cubic-bezier(.2,.7,.2,1);
}

[data-tw3-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes nv-tw3-cloud-drift {
    from { transform: translate3d(-0.45%, 0, 0) scale(1.012); }
    to { transform: translate3d(0.65%, -0.35%, 0) scale(1.022); }
}

@keyframes nv-tw3-griffin-flight {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); }
    50% { transform: translate3d(-0.7rem, -0.65rem, 0) rotate(1deg); }
}

@keyframes nv-tw3-fog-back {
    from { transform: translate3d(-1.2%, 0, 0) scaleX(0.98); opacity: 0.25; }
    to { transform: translate3d(1.4%, -0.35rem, 0) scaleX(1.04); opacity: 0.43; }
}

@keyframes nv-tw3-fog-front {
    from { transform: translate3d(1%, 0, 0) scaleX(1.02); opacity: 0.26; }
    to { transform: translate3d(-1.1%, -0.5rem, 0) scaleX(0.97); opacity: 0.4; }
}

@keyframes nv-tw3-scroll {
    0%, 100% { transform: translateY(-2px); opacity: 0.55; }
    50% { transform: translateY(3px); opacity: 1; }
}

@keyframes nv-tw3-memory-in {
    from { opacity: 0; transform: rotate(var(--memory-rotation)) translateY(16px) scale(0.98); }
    to { opacity: 1; transform: rotate(var(--memory-rotation)) translateY(0) scale(1); }
}

@media (max-width: 1180px) {
    .nv-tw3-hero {
        min-height: 40rem;
    }

    .nv-tw3-hero__stage {
        min-height: 38.5rem;
    }

    .nv-tw3-scene__layer--clouds {
        left: -12%;
        width: 124%;
    }

    .nv-tw3-scene__layer--village {
        left: -10%;
        width: 120%;
    }

    .nv-tw3-scene__layer--griffin {
        top: 13%;
        right: 5%;
        width: 31%;
    }

    .nv-tw3-scene__layer--left {
        left: -10%;
        width: 43%;
    }

    .nv-tw3-scene__layer--right {
        right: -12%;
        width: 44%;
    }

    .nv-tw3-intro__card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .nv-tw3-intro__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 860px) {
    .nv-tw3__shell {
        width: min(100% - 20px, 1500px);
        padding-top: 0.75rem;
    }

    .nv-tw3-hero {
        min-height: 33rem;
    }

    .nv-tw3-hero__stage {
        min-height: 31rem;
        border-radius: 1.4rem;
    }

    .nv-tw3-scene__layer--clouds {
        top: -2%;
        left: -35%;
        width: 170%;
    }

    .nv-tw3-scene__layer--village {
        left: -42%;
        bottom: 0;
        width: 178%;
    }

    .nv-tw3-scene__layer--griffin {
        top: 16%;
        right: -4%;
        width: 42%;
    }

    .nv-tw3-scene__layer--left {
        left: -25%;
        bottom: -16%;
        width: 58%;
        opacity: 0.93;
    }

    .nv-tw3-scene__layer--right {
        right: -28%;
        bottom: -17%;
        width: 61%;
        opacity: 0.94;
    }

    .nv-tw3-hero__hint {
        display: none;
    }

    .nv-tw3-memory-grid {
        grid-template-columns: 1fr;
    }

    .nv-tw3-memory-card {
        min-height: 11rem;
        transform: none;
    }

    .nv-tw3-memory-card:hover {
        transform: translateY(-3px);
    }
}

@media (max-width: 560px) {
    .nv-tw3__breadcrumb {
        font-size: 0.65rem;
        letter-spacing: 0.08em;
    }

    .nv-tw3-hero {
        min-height: 28rem;
    }

    .nv-tw3-hero__stage {
        min-height: 26rem;
    }

    .nv-tw3-scene__layer--village {
        left: -61%;
        width: 220%;
    }

    .nv-tw3-scene__layer--griffin {
        top: 19%;
        right: -11%;
        width: 50%;
    }

    .nv-tw3-scene__layer--left {
        left: -33%;
        width: 67%;
        opacity: 0.84;
    }

    .nv-tw3-scene__layer--right {
        right: -37%;
        width: 70%;
        opacity: 0.86;
    }

    .nv-tw3-intro h1 {
        font-size: clamp(2.9rem, 15vw, 4.7rem);
    }

    .nv-tw3-intro__tagline {
        font-size: 1rem;
    }

    .nv-tw3-intro__card {
        padding: 1.05rem;
        border-radius: 1rem;
    }

    .nv-tw3-intro__actions,
    .nv-tw3-finale__actions {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .nv-tw3-button {
        width: 100%;
    }

    .nv-tw3-section {
        padding-block: 4.3rem;
    }

    .nv-tw3-finale {
        min-height: 25rem;
        border-radius: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nv-tw3 *,
    .nv-tw3 *::before,
    .nv-tw3 *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    [data-tw3-reveal] {
        opacity: 1;
        transform: none;
    }

    .nv-tw3-scene__layer,
    .nv-tw3-scene__fog {
        transform: none !important;
    }
}

/* Witcher Signs interactive experience */
.nv-tw3-signs {
    padding-top: clamp(4.5rem, 7vw, 7rem);
    padding-bottom: clamp(4.5rem, 7vw, 7rem);
}

.nv-tw3-signs__heading {
    max-width: 66rem;
}

.nv-tw3-signs__stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 3rem;
    border: 1px solid rgb(218 211 190 / 0.14);
    border-radius: 2rem;
    padding: clamp(1.1rem, 2.8vw, 2.4rem);
    background:
        radial-gradient(circle at 50% 42%, rgb(112 118 99 / 0.13), transparent 22rem),
        radial-gradient(circle at 18% 80%, rgb(100 72 39 / 0.08), transparent 18rem),
        linear-gradient(155deg, rgb(18 21 19 / 0.98), rgb(7 9 8 / 0.98));
    box-shadow:
        0 2rem 5rem rgb(0 0 0 / 0.32),
        inset 0 0 0 1px rgb(255 255 255 / 0.018),
        inset 0 -7rem 8rem rgb(0 0 0 / 0.28);
}

.nv-tw3-signs__stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.34;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 22px, rgb(255 255 255 / 0.012) 22px 23px),
        radial-gradient(circle at 50% 45%, transparent 0 12rem, rgb(203 194 163 / 0.05) 12.05rem 12.15rem, transparent 12.2rem 100%);
}

.nv-tw3-signs__stage::after {
    content: '';
    position: absolute;
    inset: 1rem;
    z-index: -1;
    border: 1px solid rgb(214 207 188 / 0.06);
    border-radius: 1.45rem;
    pointer-events: none;
}

.nv-tw3-signs__etching {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.25;
}

.nv-tw3-signs__etching span {
    position: absolute;
    top: 42%;
    left: 50%;
    width: min(48vw, 42rem);
    aspect-ratio: 1;
    border: 1px solid rgb(199 191 168 / 0.11);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.nv-tw3-signs__etching span:nth-child(2) {
    width: min(37vw, 31rem);
    border-style: dashed;
    transform: translate(-50%, -50%) rotate(17deg);
}

.nv-tw3-signs__etching span:nth-child(3) {
    width: min(25vw, 20rem);
    transform: translate(-50%, -50%) rotate(-11deg);
}

.nv-tw3-signs__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.55rem, 1.4vw, 1rem);
}

.nv-tw3-sign-card {
    --tw3-sign-rgb: 210 205 190;
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 21rem;
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-items: end;
    overflow: hidden;
    border: 1px solid rgb(var(--tw3-sign-rgb) / 0.16);
    border-radius: 1.35rem;
    padding: 0.8rem 0.8rem 1.05rem;
    background:
        radial-gradient(circle at 50% 32%, rgb(var(--tw3-sign-rgb) / 0.09), transparent 52%),
        linear-gradient(180deg, rgb(255 255 255 / 0.02), rgb(0 0 0 / 0.26));
    color: #f2ede2;
    text-align: center;
    cursor: pointer;
    transition:
        transform 220ms cubic-bezier(.2,.7,.2,1),
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}

.nv-tw3-sign-card::before {
    content: '';
    position: absolute;
    inset: auto 18% 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(var(--tw3-sign-rgb) / 0.68), transparent);
    opacity: 0.45;
}

.nv-tw3-sign-card::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4.8rem;
    width: 52%;
    height: 1.5rem;
    border-radius: 50%;
    background: rgb(var(--tw3-sign-rgb) / 0.13);
    filter: blur(13px);
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 220ms ease;
}

.nv-tw3-sign-card--aard { --tw3-sign-rgb: 54 218 255; }
.nv-tw3-sign-card--igni { --tw3-sign-rgb: 255 69 42; }
.nv-tw3-sign-card--yrden { --tw3-sign-rgb: 190 61 255; }
.nv-tw3-sign-card--quen { --tw3-sign-rgb: 255 210 57; }
.nv-tw3-sign-card--axii { --tw3-sign-rgb: 66 231 101; }

.nv-tw3-sign-card__sigil {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 12rem;
    place-items: center;
}

.nv-tw3-sign-card__sigil img {
    display: block;
    width: min(100%, 11.5rem);
    height: auto;
    opacity: 0.78;
    filter: saturate(0.83) brightness(0.86);
    transform: scale(0.88);
    transition: opacity 220ms ease, filter 220ms ease, transform 260ms cubic-bezier(.2,.7,.2,1);
    user-select: none;
    -webkit-user-drag: none;
}

.nv-tw3-sign-card strong {
    position: relative;
    z-index: 2;
    display: block;
    color: #f7f1e6;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.45rem;
    letter-spacing: 0.025em;
}

.nv-tw3-sign-card small {
    position: relative;
    z-index: 2;
    display: block;
    min-height: 3rem;
    margin-top: 0.35rem;
    color: #8f918a;
    font-size: 0.72rem;
    line-height: 1.45;
}

.nv-tw3-sign-card:hover,
.nv-tw3-sign-card:focus-visible,
.nv-tw3-sign-card.is-active {
    transform: translateY(-5px);
    border-color: rgb(var(--tw3-sign-rgb) / 0.55);
    background:
        radial-gradient(circle at 50% 32%, rgb(var(--tw3-sign-rgb) / 0.15), transparent 52%),
        linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(0 0 0 / 0.32));
    box-shadow: inset 0 0 2rem rgb(var(--tw3-sign-rgb) / 0.045), 0 1.4rem 2.5rem rgb(0 0 0 / 0.25);
}

.nv-tw3-sign-card:hover::after,
.nv-tw3-sign-card:focus-visible::after,
.nv-tw3-sign-card.is-active::after {
    opacity: 1;
}

.nv-tw3-sign-card:hover .nv-tw3-sign-card__sigil img,
.nv-tw3-sign-card:focus-visible .nv-tw3-sign-card__sigil img,
.nv-tw3-sign-card.is-active .nv-tw3-sign-card__sigil img {
    opacity: 1;
    filter: saturate(1.08) brightness(1.1);
    transform: scale(1.02);
}

.nv-tw3-sign-card.is-casting .nv-tw3-sign-card__sigil img {
    animation: nv-tw3-sign-cast 520ms cubic-bezier(.2,.8,.2,1);
}

.nv-tw3-signs__status {
    display: grid;
    grid-template-columns: auto minmax(8rem, auto) minmax(0, 1fr);
    gap: 0.55rem 1rem;
    align-items: center;
    margin-top: 1rem;
    border: 1px solid rgb(210 202 182 / 0.09);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    background: rgb(7 9 8 / 0.72);
}

.nv-tw3-signs__status > span {
    color: #8e8f88;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nv-tw3-signs__status > strong {
    color: #e8e1d4;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
}

.nv-tw3-signs__status > small {
    min-width: 0;
    color: #999b93;
    font-size: 0.78rem;
    line-height: 1.45;
}

.nv-tw3-signs__active-copy {
    display: none;
}

/* Viewport-wide spell effects. */
.nv-tw3-sign-fx-root {
    position: fixed;
    inset: 0;
    z-index: 9998;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
}

.nv-tw3-sign-fx-root > * {
    pointer-events: none;
}

.nv-tw3-fx__sigil {
    position: absolute;
    left: var(--fx-x, 50%);
    top: var(--fx-y, 50%);
    width: clamp(14rem, 34vw, 34rem);
    height: auto;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
    filter: saturate(1.2) brightness(1.1);
    animation: nv-tw3-fx-sigil 1000ms cubic-bezier(.16,.7,.22,1) both;
}

.nv-tw3-fx__aard-wave {
    position: absolute;
    left: var(--fx-x);
    top: var(--fx-y);
    width: 7rem;
    height: 7rem;
    border: 2px solid rgb(171 240 255 / 0.82);
    border-radius: 50%;
    box-shadow: 0 0 2rem rgb(61 210 255 / 0.42), inset 0 0 1.4rem rgb(106 226 255 / 0.18);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
    animation: nv-tw3-aard-wave 850ms ease-out var(--fx-delay, 0ms) both;
}

.nv-tw3-fx__aard-shard {
    position: absolute;
    left: var(--fx-x);
    top: var(--fx-y);
    width: clamp(0.9rem, 2vw, 1.7rem);
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgb(225 250 255 / 0.9), rgb(63 212 255 / 0));
    box-shadow: 0 0 0.7rem rgb(67 219 255 / 0.72);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--fx-angle)) translateX(1rem);
    animation: nv-tw3-aard-shard 640ms ease-out var(--fx-delay, 0ms) both;
}

.nv-tw3.is-casting-aard {
    animation: nv-tw3-aard-page 430ms cubic-bezier(.2,.8,.2,1);
}

.nv-tw3-fx__igni-wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at var(--fx-x) var(--fx-y), rgb(255 188 83 / 0.34), transparent 24%),
        linear-gradient(0deg, rgb(223 48 14 / 0.28), transparent 58%);
    opacity: 0;
    animation: nv-tw3-igni-wash 1100ms ease-out both;
}

.nv-tw3-fx__igni-flame {
    position: absolute;
    left: var(--fx-left);
    bottom: -10rem;
    width: var(--fx-size);
    height: calc(var(--fx-size) * 2.2);
    border-radius: 50% 50% 36% 36%;
    background:
        radial-gradient(ellipse at 50% 75%, rgb(255 233 141 / 0.98) 0 10%, rgb(255 123 26 / 0.82) 28%, rgb(238 45 10 / 0.2) 57%, transparent 68%);
    filter: blur(var(--fx-blur, 2px));
    opacity: 0;
    transform: translateX(-50%) rotate(var(--fx-rotate));
    animation: nv-tw3-igni-flame var(--fx-duration) ease-out var(--fx-delay) both;
}

.nv-tw3-fx__ember {
    position: absolute;
    left: var(--fx-left);
    bottom: -1rem;
    width: var(--fx-size);
    height: var(--fx-size);
    border-radius: 50%;
    background: #fff1b2;
    box-shadow: 0 0 0.55rem #ff671f, 0 0 1rem rgb(255 59 19 / 0.7);
    opacity: 0;
    animation: nv-tw3-ember var(--fx-duration) ease-out var(--fx-delay) both;
}

.nv-tw3-fx__yrden-field {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(74vw, 58rem);
    aspect-ratio: 1;
    border: 2px solid rgb(208 118 255 / 0.62);
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 12deg, rgb(184 72 255 / 0.08) 0 3deg, transparent 3deg 30deg),
        radial-gradient(circle, rgb(168 63 255 / 0.08), transparent 58%);
    box-shadow: 0 0 4rem rgb(164 56 255 / 0.26), inset 0 0 5rem rgb(132 31 205 / 0.16);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.56) rotate(-12deg);
    animation: nv-tw3-yrden-field 2200ms cubic-bezier(.2,.7,.2,1) both;
}

.nv-tw3-fx__yrden-field::before,
.nv-tw3-fx__yrden-field::after {
    content: '';
    position: absolute;
    border: 1px solid rgb(222 166 255 / 0.42);
    border-radius: 50%;
}

.nv-tw3-fx__yrden-field::before { inset: 11%; }
.nv-tw3-fx__yrden-field::after { inset: 27%; border-style: dashed; }

.nv-tw3-fx__quen-shell {
    position: absolute;
    inset: 4%;
    border: clamp(2px, 0.35vw, 5px) solid rgb(255 223 108 / 0.82);
    border-radius: 44% 44% 50% 50% / 32% 32% 58% 58%;
    background:
        repeating-linear-gradient(60deg, transparent 0 34px, rgb(255 220 103 / 0.025) 34px 36px),
        repeating-linear-gradient(-60deg, transparent 0 34px, rgb(255 220 103 / 0.022) 34px 36px);
    box-shadow:
        0 0 2rem rgb(255 199 64 / 0.48),
        0 0 6rem rgb(255 178 37 / 0.18),
        inset 0 0 4rem rgb(255 210 83 / 0.12);
    opacity: 0;
    transform: scale(0.93);
    animation: nv-tw3-quen-shell 1650ms cubic-bezier(.2,.7,.2,1) both;
}

.nv-tw3-fx__quen-flare {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 44%, transparent 20%, rgb(255 213 89 / 0.1) 58%, rgb(255 186 38 / 0.25) 100%);
    opacity: 0;
    animation: nv-tw3-quen-flare 1500ms ease-out both;
}

.nv-tw3-fx__axii-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 48%, rgb(70 255 112 / 0.18), transparent 38%),
        radial-gradient(ellipse at center, transparent 36%, rgb(13 73 31 / 0.32) 100%);
    opacity: 0;
    backdrop-filter: saturate(0.72) contrast(1.04) blur(0.7px);
    animation: nv-tw3-axii-veil 1850ms ease-in-out both;
}

.nv-tw3-fx__axii-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--fx-size);
    aspect-ratio: 1;
    border: 1px solid rgb(122 255 151 / 0.54);
    border-radius: 50%;
    box-shadow: 0 0 1.4rem rgb(60 232 103 / 0.22);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.78);
    animation: nv-tw3-axii-ring 1500ms ease-in-out var(--fx-delay) both;
}

@keyframes nv-tw3-sign-cast {
    0% { transform: scale(1.02); }
    35% { transform: scale(1.2); filter: saturate(1.35) brightness(1.38); }
    100% { transform: scale(1.02); }
}

@keyframes nv-tw3-fx-sigil {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    24% { opacity: 0.66; }
    68% { opacity: 0.3; transform: translate(-50%, -50%) scale(1.08); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); }
}

@keyframes nv-tw3-aard-wave {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.22); }
    20% { opacity: 0.94; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(10); }
}

@keyframes nv-tw3-aard-shard {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--fx-angle)) translateX(1rem) scaleX(0.4); }
    24% { opacity: 0.95; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--fx-angle)) translateX(var(--fx-distance)) scaleX(1.25); }
}

@keyframes nv-tw3-aard-page {
    0%, 100% { transform: translate3d(0, 0, 0); }
    22% { transform: translate3d(-5px, 2px, 0); }
    45% { transform: translate3d(4px, -2px, 0); }
    67% { transform: translate3d(-2px, 1px, 0); }
}

@keyframes nv-tw3-igni-wash {
    0% { opacity: 0; }
    18% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes nv-tw3-igni-flame {
    0% { opacity: 0; transform: translateX(-50%) translateY(4rem) scale(0.5) rotate(var(--fx-rotate)); }
    20% { opacity: 0.85; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-20rem) scale(1.35) rotate(var(--fx-rotate)); }
}

@keyframes nv-tw3-ember {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.55); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--fx-drift), -72vh, 0) scale(0.1); }
}

@keyframes nv-tw3-yrden-field {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-20deg); }
    18% { opacity: 0.86; }
    68% { opacity: 0.54; transform: translate(-50%, -50%) scale(1) rotate(8deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05) rotate(16deg); }
}

@keyframes nv-tw3-quen-shell {
    0% { opacity: 0; transform: scale(0.9); }
    18% { opacity: 0.9; transform: scale(1.01); }
    55% { opacity: 0.56; transform: scale(0.995); }
    100% { opacity: 0; transform: scale(1.03); }
}

@keyframes nv-tw3-quen-flare {
    0% { opacity: 0; }
    22% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes nv-tw3-axii-veil {
    0% { opacity: 0; }
    22% { opacity: 1; }
    70% { opacity: 0.72; }
    100% { opacity: 0; }
}

@keyframes nv-tw3-axii-ring {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
    28% { opacity: 0.62; }
    72% { opacity: 0.34; transform: translate(-50%, -50%) scale(1.06); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}

@media (max-width: 980px) {
    .nv-tw3-signs__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nv-tw3-sign-card {
        min-height: 18rem;
    }

    .nv-tw3-sign-card__sigil {
        min-height: 10rem;
    }
}

@media (max-width: 620px) {
    .nv-tw3-signs__stage {
        border-radius: 1.35rem;
        padding: 0.8rem;
    }

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

    .nv-tw3-sign-card {
        min-height: 15rem;
        padding-inline: 0.55rem;
    }

    .nv-tw3-sign-card__sigil {
        min-height: 8.4rem;
    }

    .nv-tw3-sign-card__sigil img {
        width: min(100%, 8.8rem);
    }

    .nv-tw3-sign-card strong {
        font-size: 1.2rem;
    }

    .nv-tw3-sign-card small {
        min-height: 3.6rem;
        font-size: 0.66rem;
    }

    .nv-tw3-signs__status {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .nv-tw3-signs__etching span {
        width: 34rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nv-tw3-sign-fx-root *,
    .nv-tw3-sign-fx-root *::before,
    .nv-tw3-sign-fx-root *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .nv-tw3.is-casting-aard {
        animation: none !important;
    }
}