.tuaf-root,
.tuaf-root * {
    box-sizing: border-box;
}

.tuaf-root {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: var(--tuaf-background, #111111);
    font-family: var(--tuaf-font-family, inherit);
    overflow-x: clip;
    isolation: isolate;
}

.tuaf-root .tuaf-shell {
    width: 100%;
    max-width: var(--tuaf-max-width, 900px);
    margin: 0 auto;
    padding: var(--tuaf-pad-top, 28px) var(--tuaf-pad-right, 26px) var(--tuaf-pad-bottom, 28px) var(--tuaf-pad-left, 26px);
}

.tuaf-root .tuaf-media {
    position: relative;
    width: min(var(--tuaf-media-width, 100%), 100%);
    height: var(--tuaf-media-height, 365px);
    margin: 0 auto;
    overflow: hidden;
    border: var(--tuaf-media-border-width, 4px) solid var(--tuaf-media-border-color, #777777);
    border-radius: var(--tuaf-media-radius, 26px);
    background: var(--tuaf-video-transition-bg, #000000);
    contain: layout paint;
}

/* v93 safety plate: a dedicated black/selected transition underlay always sits below media layers. */
.tuaf-root .tuaf-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--tuaf-video-transition-bg, #000000);
    pointer-events: none;
}

.tuaf-root .tuaf-media.is-transitioning,
.tuaf-root .tuaf-media.is-video-active {
    background: #000000 !important;
}

/* v94 hard black video safety surface. This sits below every frame and remains
   black before JS initializes, while decoding, and between transition layers. */
.tuaf-root .tuaf-media.is-transitioning::before,
.tuaf-root .tuaf-media.is-video-active::before {
    background: #000000 !important;
}

.tuaf-root .tuaf-media-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    background: transparent;
    transition: opacity var(--tuaf-media-transition, 250ms) ease;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.tuaf-root .tuaf-media-layer.is-active {
    z-index: 2;
    opacity: 1;
}

.tuaf-root .tuaf-media-layer.is-outgoing {
    z-index: 2;
    opacity: 1;
}

.tuaf-root .tuaf-media-layer.is-entering {
    z-index: 3;
    opacity: 1;
    transition: none;
    will-change: transform, clip-path, filter, opacity;
    animation-duration: var(--tuaf-video-transition-duration, 450ms);
    animation-timing-function: cubic-bezier(.22,.72,.18,1);
    animation-fill-mode: both;
}

.tuaf-root .tuaf-media-layer img,
.tuaf-root .tuaf-media-layer video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    object-fit: var(--tuaf-media-fit, cover);
    object-position: var(--tuaf-layer-pos-x, var(--tuaf-media-pos-x, 50%)) var(--tuaf-layer-pos-y, var(--tuaf-media-pos-y, 50%));
}

.tuaf-root .tuaf-media-layer img {
    background: var(--tuaf-media-bg, #000000);
}

.tuaf-root .tuaf-media-layer[data-media-type="video"] {
    /* v94: a video layer is never transparent to the legacy media color. */
    background: #000000 !important;
}

.tuaf-root .tuaf-media-layer video {
    /* v94: before the first decoded frame, browsers may paint the video box itself.
       Keep that paint black so the historical red surface can never flash through. */
    background: #000000 !important;
    color: transparent;
}

.tuaf-root .tuaf-media-empty {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--tuaf-media-bg, #000000);
}

.tuaf-root .tuaf-media.is-transitioning .tuaf-media-empty {
    background: var(--tuaf-video-transition-bg, #000000);
}

/* v93: video-to-video transitions keep the outgoing frame underneath the incoming layer.
   This prevents red/black flashes and avoids a dark dip between clips. */
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--reveal-left { animation-name: tuafMediaRevealLeft; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--reveal-right { animation-name: tuafMediaRevealRight; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--reveal-up { animation-name: tuafMediaRevealUp; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--reveal-down { animation-name: tuafMediaRevealDown; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--slide-left { animation-name: tuafMediaSlideLeft; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--slide-right { animation-name: tuafMediaSlideRight; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--slide-up { animation-name: tuafMediaSlideUp; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--slide-down { animation-name: tuafMediaSlideDown; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--zoom-in { animation-name: tuafMediaZoomIn; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--zoom-out { animation-name: tuafMediaZoomOut; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--soft-crossfade { animation-name: tuafMediaSoftCrossfade; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--blur-clear { animation-name: tuafMediaBlurClear; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--wipe-center { animation-name: tuafMediaWipeCenter; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--diagonal { animation-name: tuafMediaDiagonal; }
.tuaf-root .tuaf-media-layer.is-entering.tuaf-media-effect--none { animation: none; }

@keyframes tuafMediaRevealLeft { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tuafMediaRevealRight { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes tuafMediaRevealUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tuafMediaRevealDown { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tuafMediaSlideLeft { from { transform: translate3d(10%,0,0); } to { transform: translate3d(0,0,0); } }
@keyframes tuafMediaSlideRight { from { transform: translate3d(-10%,0,0); } to { transform: translate3d(0,0,0); } }
@keyframes tuafMediaSlideUp { from { transform: translate3d(0,10%,0); } to { transform: translate3d(0,0,0); } }
@keyframes tuafMediaSlideDown { from { transform: translate3d(0,-10%,0); } to { transform: translate3d(0,0,0); } }
@keyframes tuafMediaZoomIn { from { transform: scale(1.075); } to { transform: scale(1); } }
@keyframes tuafMediaZoomOut { from { transform: scale(.94); } to { transform: scale(1); } }
@keyframes tuafMediaSoftCrossfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tuafMediaBlurClear { from { filter: blur(10px); transform: scale(1.025); } to { filter: blur(0); transform: scale(1); } }
@keyframes tuafMediaWipeCenter { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes tuafMediaDiagonal { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }

/* v87: Banner can be attached flush to a selected media edge/corner. */
.tuaf-root .tuaf-banner-anchor {
    position: absolute;
    z-index: 10;
    width: min(var(--tuaf-banner-width, 72%), 100%);
    max-width: 100%;
    box-sizing: border-box;
    pointer-events: none;
}

/* Default: bottom-left, attached directly to the media border edge. */
.tuaf-root .tuaf-banner-position--bottom-left {
    left: 0;
    bottom: 0;
    top: auto;
    right: auto;
    transform: none;
}

.tuaf-root .tuaf-banner-position--bottom-right {
    right: 0;
    bottom: 0;
    top: auto;
    left: auto;
    transform: none;
}

.tuaf-root .tuaf-banner-position--top-right {
    right: 0;
    top: 0;
    bottom: auto;
    left: auto;
    transform: none;
}

.tuaf-root .tuaf-banner-position--top-left {
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    transform: none;
}

.tuaf-root .tuaf-banner-position--top-center {
    top: 0;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
}

.tuaf-root .tuaf-banner-position--bottom-center {
    bottom: 0;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
}

.tuaf-root .tuaf-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--tuaf-banner-height, 74px);
    padding: var(--tuaf-banner-pad-y, 12px) var(--tuaf-banner-pad-x, 24px);
    overflow: hidden;
    border: var(--tuaf-banner-border-width, 2px) solid var(--tuaf-banner-border-normal, #777777);
    border-radius: var(--tuaf-banner-radius, 16px);
    color: var(--tuaf-banner-text-normal, #ffffff);
    font-family: var(--tuaf-accordion-font-family, var(--tuaf-font-family, inherit));
    font-size: var(--tuaf-banner-font-size, 30px);
    font-weight: var(--tuaf-banner-font-weight, 700);
    line-height: 1.15;
    letter-spacing: var(--tuaf-banner-letter-spacing, 0px);
    text-align: center;
    overflow-wrap: anywhere;
    transform-origin: center;
    will-change: transform, opacity, filter, clip-path;
    transition: border-color var(--tuaf-active-transition, 300ms) ease,
                color var(--tuaf-active-transition, 300ms) ease;
}

.tuaf-root .tuaf-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: var(--tuaf-banner-bg-normal, #111111);
    opacity: var(--tuaf-banner-opacity, 0.88);
    transition: background-color var(--tuaf-active-transition, 300ms) ease,
                opacity var(--tuaf-active-transition, 300ms) ease;
}

.tuaf-root .tuaf-banner-text {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 100%;
}

.tuaf-root .tuaf-media-layer.is-active .tuaf-banner {
    border-color: var(--tuaf-banner-border-active, #7cff00);
    color: var(--tuaf-banner-text-active, #000000);
}

.tuaf-root .tuaf-media-layer.is-active .tuaf-banner::before {
    background: var(--tuaf-banner-bg-active, #7cff00);
}

.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--fade-in { animation: tuafBannerFadeIn var(--tuaf-banner-effect-duration, 550ms) ease both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--slide-up { animation: tuafBannerSlideUp var(--tuaf-banner-effect-duration, 550ms) cubic-bezier(.2,.7,.2,1) both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--slide-down { animation: tuafBannerSlideDown var(--tuaf-banner-effect-duration, 550ms) cubic-bezier(.2,.7,.2,1) both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--slide-left { animation: tuafBannerSlideLeft var(--tuaf-banner-effect-duration, 550ms) cubic-bezier(.2,.7,.2,1) both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--slide-right { animation: tuafBannerSlideRight var(--tuaf-banner-effect-duration, 550ms) cubic-bezier(.2,.7,.2,1) both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--zoom-in { animation: tuafBannerZoomIn var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--zoom-out { animation: tuafBannerZoomOut var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--flip-x { animation: tuafBannerFlipX var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--flip-y { animation: tuafBannerFlipY var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--rotate-in { animation: tuafBannerRotateIn var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--blur-in { animation: tuafBannerBlurIn var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--bounce-up { animation: tuafBannerBounceUp var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--bounce-down { animation: tuafBannerBounceDown var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--elastic-up { animation: tuafBannerElasticUp var(--tuaf-banner-effect-duration, 550ms) cubic-bezier(.34,1.56,.64,1) both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--swing-in { animation: tuafBannerSwingIn var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--reveal-up { animation: tuafBannerRevealUp var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--reveal-down { animation: tuafBannerRevealDown var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--reveal-left { animation: tuafBannerRevealLeft var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--reveal-right { animation: tuafBannerRevealRight var(--tuaf-banner-effect-duration, 550ms) ease-out both; }
.tuaf-root .tuaf-media-layer.is-active .tuaf-banner-effect--pop { animation: tuafBannerPop var(--tuaf-banner-effect-duration, 550ms) cubic-bezier(.2,.9,.25,1.25) both; }

@keyframes tuafBannerFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tuafBannerSlideUp { from { opacity: 0; transform: translateY(52px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tuafBannerSlideDown { from { opacity: 0; transform: translateY(-52px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tuafBannerSlideLeft { from { opacity: 0; transform: translateX(72px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tuafBannerSlideRight { from { opacity: 0; transform: translateX(-72px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tuafBannerZoomIn { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes tuafBannerZoomOut { from { opacity: 0; transform: scale(1.28); } to { opacity: 1; transform: scale(1); } }
@keyframes tuafBannerFlipX { from { opacity: 0; transform: perspective(700px) rotateX(-78deg); } to { opacity: 1; transform: perspective(700px) rotateX(0); } }
@keyframes tuafBannerFlipY { from { opacity: 0; transform: perspective(700px) rotateY(78deg); } to { opacity: 1; transform: perspective(700px) rotateY(0); } }
@keyframes tuafBannerRotateIn { from { opacity: 0; transform: rotate(-7deg) scale(.88); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes tuafBannerBlurIn { from { opacity: 0; filter: blur(14px); transform: scale(.97); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes tuafBannerBounceUp { 0% { opacity: 0; transform: translateY(64px); } 65% { opacity: 1; transform: translateY(-10px); } 82% { transform: translateY(4px); } 100% { transform: translateY(0); } }
@keyframes tuafBannerBounceDown { 0% { opacity: 0; transform: translateY(-64px); } 65% { opacity: 1; transform: translateY(10px); } 82% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
@keyframes tuafBannerElasticUp { 0% { opacity: 0; transform: translateY(70px) scaleY(.72); } 70% { opacity: 1; transform: translateY(-5px) scaleY(1.04); } 100% { transform: translateY(0) scaleY(1); } }
@keyframes tuafBannerSwingIn { 0% { opacity: 0; transform: rotateZ(-8deg) translateY(24px); } 65% { opacity: 1; transform: rotateZ(2deg) translateY(0); } 100% { transform: rotateZ(0); } }
@keyframes tuafBannerRevealUp { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes tuafBannerRevealDown { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes tuafBannerRevealLeft { from { opacity: 0; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes tuafBannerRevealRight { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes tuafBannerPop { 0% { opacity: 0; transform: scale(.45); } 72% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }

.tuaf-root .tuaf-steps {
    position: relative;
    width: 100%;
}

.tuaf-root .tuaf-step-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

.tuaf-root .tuaf-step-1 {
    margin-top: var(--tuaf-gap-media-1, 35px);
}

.tuaf-root .tuaf-step-2 {
    margin-top: var(--tuaf-gap-1-2, 38px);
}

/* v86: Steps 3 and 4 use the exact same full width as all other accordions. */
.tuaf-root .tuaf-branch {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--tuaf-gap-3-4, 105px);
    width: 100%;
    min-width: 0;
    margin-top: var(--tuaf-gap-2-3, 78px);
    overflow: visible;
}

.tuaf-root .tuaf-step-3 {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
}

.tuaf-root .tuaf-step-4 {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
}

.tuaf-root .tuaf-step-5 {
    margin-top: var(--tuaf-gap-4-5, 52px);
}

.tuaf-root button.tuaf-step {
    all: unset;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: var(--tuaf-min-height, 108px);
    padding: 0.42em 0.78em;
    box-sizing: border-box;
    border: var(--tuaf-border-width, 4px) solid var(--tuaf-border-normal, #777777);
    border-radius: var(--tuaf-radius, 26px);
    background: var(--tuaf-bg-normal, #000000);
    color: var(--tuaf-text-normal, #f4f4f4);
    font-family: var(--tuaf-accordion-font-family, var(--tuaf-font-family, inherit));
    font-size: var(--tuaf-font-size, 42px);
    font-weight: var(--tuaf-font-weight, 400);
    line-height: var(--tuaf-line-height, 1.15);
    letter-spacing: var(--tuaf-letter-spacing, 0px);
    text-align: center;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--tuaf-active-transition, 300ms) ease,
                background-color var(--tuaf-active-transition, 300ms) ease,
                color var(--tuaf-active-transition, 300ms) ease;
}

.tuaf-root .tuaf-step-wrap.is-active > button.tuaf-step {
    border-color: var(--tuaf-border-active, #7cff00);
    background: var(--tuaf-bg-active, #000000);
    color: var(--tuaf-text-active, #ffffff);
}

.tuaf-root button.tuaf-step:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.tuaf-root .tuaf-step-title {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.tuaf-root .tuaf-subcategory {
    position: absolute;
    z-index: 12;
    left: 7%;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    max-width: 72%;
    padding: var(--tuaf-sub-pad-y, 13px) var(--tuaf-sub-pad-x, 28px);
    transform: translateY(58%);
    border: var(--tuaf-sub-border-width, 0px) solid var(--tuaf-sub-border-normal, #7cff00);
    border-radius: var(--tuaf-sub-radius, 15px);
    background: var(--tuaf-sub-bg-normal, #7cff00);
    color: var(--tuaf-sub-text-normal, #000000);
    font-family: var(--tuaf-font-family, inherit);
    font-size: var(--tuaf-sub-font-size, 25px);
    font-weight: var(--tuaf-sub-font-weight, 800);
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
    overflow-wrap: anywhere;
    pointer-events: none;
    transition: border-color var(--tuaf-active-transition, 300ms) ease,
                background-color var(--tuaf-active-transition, 300ms) ease,
                color var(--tuaf-active-transition, 300ms) ease;
}

.tuaf-root .tuaf-step-wrap.is-active > .tuaf-subcategory,
.tuaf-root .tuaf-subcategory.is-active {
    border-color: var(--tuaf-sub-border-active, #7cff00);
    background: var(--tuaf-sub-bg-active, #7cff00);
    color: var(--tuaf-sub-text-active, #000000);
}

/* OR/arrow system overlays the right side without reducing accordion width. */
.tuaf-root .tuaf-branch-arrows {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    width: var(--tuaf-arrow-zone, 132px);
    min-height: 0;
    transform: translate(var(--tuaf-arrow-offset-x, 0px), var(--tuaf-arrow-offset-y, 0px));
    overflow: visible;
    pointer-events: none;
    contain: layout style;
}

.tuaf-root .tuaf-arrow-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    overflow: visible;
    shape-rendering: geometricPrecision;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.tuaf-root .tuaf-arrow-path {
    fill: none;
    stroke: var(--tuaf-arrow-normal, #ffffff);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: stroke var(--tuaf-active-transition, 300ms) ease;
}

.tuaf-root .tuaf-branch.is-upper-active .tuaf-arrow-upper {
    stroke: var(--tuaf-arrow-active, #7cff00);
}

.tuaf-root .tuaf-branch.is-lower-active .tuaf-arrow-lower {
    stroke: var(--tuaf-arrow-active, #7cff00);
}

.tuaf-root .tuaf-or {
    position: absolute;
    top: var(--tuaf-or-y, 50%);
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    padding: 0.12em 0.18em;
    background: var(--tuaf-background, #111111);
    color: var(--tuaf-or-color, #ffffff);
    font-family: var(--tuaf-font-family, inherit);
    font-size: var(--tuaf-or-font-size, 31px);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .tuaf-root .tuaf-shell {
        width: 100%;
    }

    .tuaf-root .tuaf-arrow-path {
        stroke-width: 8;
    }
}

@media (max-width: 680px) {
    .tuaf-root .tuaf-arrow-path {
        stroke-width: 6;
    }

    .tuaf-root button.tuaf-step {
        padding-left: 0.48em;
        padding-right: 0.48em;
    }
}

/* v91: Hardened OR/arrow geometry for phones. The arrow overlay always uses the
   real branch height, stays inside the viewport and is never stretched by a stale
   desktop min-height. JS recalculates exact row-center targets on resize. */
@media (max-width: 680px) {
    .tuaf-root .tuaf-branch {
        isolation: isolate;
    }

    .tuaf-root .tuaf-branch-arrows {
        top: 0;
        right: 2px;
        bottom: 0;
        height: auto;
        min-height: 0;
        max-height: none;
        width: clamp(58px, 18vw, 78px);
        transform: translateY(var(--tuaf-arrow-offset-y, 0px));
    }

    .tuaf-root .tuaf-arrow-svg {
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .tuaf-root .tuaf-arrow-path {
        stroke-width: 5.5;
    }

    .tuaf-root .tuaf-or {
        max-width: 100%;
        padding: 0.16em 0.22em;
        line-height: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tuaf-root .tuaf-media-layer,
    .tuaf-root button.tuaf-step,
    .tuaf-root .tuaf-subcategory,
    .tuaf-root .tuaf-arrow-path,
    .tuaf-root .tuaf-banner {
        transition-duration: 1ms !important;
    }

    .tuaf-root .tuaf-media-layer.is-entering,
    .tuaf-root .tuaf-media-layer.is-active .tuaf-banner {
        animation: none !important;
    }
}