.move-dynamic-effect {
    box-sizing: border-box;
    position: relative;
    display: inline-grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border, #dfe2ea);
    border-radius: 0.5rem;
    background: var(--surface, #fff);
    color: var(--text, #222);
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    vertical-align: middle;
}

.move-dynamic-effect__value {
    z-index: 2;
    font-size: 1.35rem;
    font-weight: 800;
}

.move-dynamic-effect--fixed-effect-operation {
    border-color: #68707d;
    background: #f4f5f7;
}

.move-dynamic-effect--fixed-operation-remove {
    border-color: #8b3038;
    background: #fff3f3;
}

.move-dynamic-effect__fixed-operation-image {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
}

.move-dynamic-effect__fixed-operation-image img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.move-dynamic-effect__fixed-operation-marker {
    position: absolute;
    z-index: 2;
    top: 0.1rem;
    right: 0.08rem;
    left: 0.08rem;
    overflow: hidden;
    border-radius: 0.18rem;
    background: rgb(24 28 38 / 88%);
    color: #fff;
    font-size: 0.42rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

.move-dynamic-effect--fixed-operation-remove
    .move-dynamic-effect__fixed-operation-marker {
    background: rgb(126 28 39 / 92%);
}

.move-dynamic-effect--stat-bypass {
    grid-template-rows: auto 1fr;
    border-color: #596579;
    background: #eef2f8;
}

.move-dynamic-effect__stat-bypass-marker {
    align-self: stretch;
    width: 100%;
    padding-block: 0.2rem 0.1rem;
    background: #38465d;
    color: #fff;
    font-size: 0.42rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.move-dynamic-effect--stat-bypass
    .move-dynamic-effect__stat {
    align-self: center;
    font-size: 0.78rem;
}

.move-dynamic-effect--resistance-stat-selection {
    grid-template-rows: auto 1fr;
    border-color: #39706d;
    background: #eef8f6;
}

.move-dynamic-effect__resistance-stat-marker {
    align-self: stretch;
    width: 100%;
    padding-block: 0.2rem 0.1rem;
    background: #285c59;
    color: #fff;
    font-size: 0.4rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.move-dynamic-effect--resistance-stat-selection
    .move-dynamic-effect__stat {
    align-self: center;
    font-size: 0.78rem;
}

.move-dynamic-effect--type-operation {
    grid-template-rows: auto 1fr;
    gap: 0.12rem;
    padding: 0.15rem;
    border-color: #596579;
    background: #f4f6fa;
}

.move-dynamic-effect__type-operation-marker {
    align-self: stretch;
    width: 100%;
    padding-block: 0.12rem;
    border-radius: 0.16rem;
    background: #38465d;
    color: #fff;
    font-size: 0.39rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.move-dynamic-effect--type-operation-remove-pokemon-type
    .move-dynamic-effect__type-operation-marker,
.move-dynamic-effect--type-operation-become-typeless
    .move-dynamic-effect__type-operation-marker {
    background: #7e1c27;
}

.move-dynamic-effect__type-chip {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 1.45rem;
    padding-inline: 0.1rem;
    place-items: center;
    border-radius: 0.3rem;
    color: #fff;
    font-size: 0.39rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.move-dynamic-effect__type-operation-typeless {
    align-self: center;
    font-size: 0.42rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}

.move-dynamic-effect--stat-transform {
    grid-template-rows: auto 1fr;
    gap: 0.12rem;
    padding: 0.15rem;
    border-color: #63558a;
    background: #f5f2fb;
}

.move-dynamic-effect__stat-transform-marker {
    align-self: stretch;
    width: 100%;
    padding-block: 0.12rem;
    border-radius: 0.16rem;
    background: #4d3f73;
    color: #fff;
    font-size: 0.39rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.move-dynamic-effect__stat-transform-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
    font-size: 0.34rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.move-dynamic-effect__stat-transform-symbol {
    padding-inline: 0.04rem;
    font-size: 0.72rem;
}

.move-dynamic-effect__stat-transform-invert {
    align-self: center;
    font-size: 0.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}

.move-dynamic-effect--battlefield-operation {
    padding: 0.15rem;
    border-color: #8b3038;
    background: #fff3f3;
}

.move-dynamic-effect__battlefield-operation-marker {
    position: absolute;
    z-index: 2;
    top: 0.1rem;
    right: 0.08rem;
    left: 0.08rem;
    overflow: hidden;
    border-radius: 0.18rem;
    background: rgb(126 28 39 / 92%);
    color: #fff;
    font-size: 0.39rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

.move-dynamic-effect__battlefield-operation-image {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
}

.move-dynamic-effect__battlefield-operation-image img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.move-dynamic-effect__battlefield-operation-label {
    align-self: center;
    max-width: 100%;
    padding-top: 0.65rem;
    font-size: 0.38rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.05;
    overflow-wrap: anywhere;
    text-align: center;
}

.move-dynamic-effect--field-effect,
.move-dynamic-effect--persistent-effect,
.move-dynamic-effect--restriction-effect {
    grid-template-rows: auto 1fr;
    gap: 0.1rem;
    padding: 0.15rem;
}

.move-dynamic-effect--field-effect {
    --move-declarative-marker-background: #2f526d;

    border-color: #4d708e;
    background: #f0f7fb;
    color: #2f526d;
}

.move-dynamic-effect--persistent-effect {
    --move-declarative-marker-background: #3a5d37;

    border-color: #5b7a58;
    background: #f2f8f0;
    color: #3a5d37;
}

.move-dynamic-effect--restriction-effect {
    --move-declarative-marker-background: #712f38;

    border-color: #8b4c54;
    background: #fff3f4;
    color: #712f38;
}

.move-dynamic-effect__declarative-marker,
.move-dynamic-effect__declarative-label {
    align-self: center;
    max-width: 100%;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.move-dynamic-effect__declarative-marker {
    width: 100%;
    padding-block: 0.1rem;
    border-radius: 0.16rem;
    background: var(
        --move-declarative-marker-background,
        #2f526d
    );
    color: #fff;
    font-size: 0.36rem;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.move-dynamic-effect__declarative-label {
    font-size: 0.38rem;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.move-dynamic-effect--timing-marker {
    grid-template-rows: auto 1fr;
    gap: 0.12rem;
    padding: 0.15rem;
    border-color: #49659a;
    background: #f1f5fd;
}

.move-dynamic-effect__timing-marker-caption {
    align-self: stretch;
    width: 100%;
    padding-block: 0.12rem;
    border-radius: 0.16rem;
    background: #365486;
    color: #fff;
    font-size: 0.42rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.move-dynamic-effect__timing-marker-value {
    align-self: center;
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.move-dynamic-effect--leech,
.move-dynamic-effect--damage-scaling,
.move-dynamic-effect--rank-damage,
.move-dynamic-effect--retaliation-damage,
.move-dynamic-effect--ko-effect,
.move-dynamic-effect--fractional-hp-damage,
.move-dynamic-effect--self-damage {
    grid-template-rows: auto 1fr;
    gap: 0.1rem;
    padding: 0.15rem;
    border-color: #49659a;
    background: #f1f5fd;
}

.move-dynamic-effect--leech {
    border-color: #4b8d62;
    background: #f0f8f2;
    color: #28583a;
}

.move-dynamic-effect--ko-effect,
.move-dynamic-effect--self-damage {
    border-color: #9b3f48;
    background: #fff3f3;
    color: #76242d;
}

.move-dynamic-effect--item-operation,
.move-dynamic-effect--ability-operation,
.move-dynamic-effect--faint-effect,
.move-dynamic-effect--revive-effect {
    grid-template-rows: auto 1fr;
    gap: 0.1rem;
    padding: 0.15rem;
}

.move-dynamic-effect--item-operation {
    border-color: #8a682c;
    background: #fff8e8;
    color: #664916;
}

.move-dynamic-effect--ability-operation {
    border-color: #66539a;
    background: #f6f2ff;
    color: #493479;
}

.move-dynamic-effect--faint-effect {
    border-color: #9b3f48;
    background: #fff3f3;
    color: #76242d;
}

.move-dynamic-effect--revive-effect {
    border-color: #4b8d62;
    background: #f0f8f2;
    color: #28583a;
}

.move-dynamic-effect__operation-caption,
.move-dynamic-effect__operation-label {
    align-self: center;
    max-width: 100%;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.move-dynamic-effect__operation-caption {
    font-size: 0.4rem;
    letter-spacing: 0.01em;
}

.move-dynamic-effect__operation-label {
    font-size: 0.46rem;
    letter-spacing: -0.015em;
}

.move-dynamic-effect--item-operation
    .move-dynamic-effect__operation-label:only-child {
    font-size: 0.34rem;
    letter-spacing: -0.025em;
}

.move-dynamic-effect__formula-caption,
.move-dynamic-effect__formula-value {
    align-self: center;
    max-width: 100%;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.move-dynamic-effect__formula-caption {
    font-size: 0.42rem;
    letter-spacing: 0.01em;
}

.move-dynamic-effect__formula-value {
    font-size: 0.5rem;
    letter-spacing: -0.015em;
}

.move-dynamic-effect--value-double
    .move-dynamic-effect__value {
    font-size: 1.1rem;
}

.move-dynamic-effect--value-triple
    .move-dynamic-effect__value {
    font-size: 0.78rem;
}

.move-dynamic-effect__caption,
.move-dynamic-effect__stat,
.move-dynamic-effect__recipient {
    z-index: 2;
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
}

.move-dynamic-effect__operator,
.move-dynamic-effect__direction {
    z-index: 2;
    font-size: 1rem;
    font-weight: 900;
}

.move-dynamic-effect--stat-modifier {
    grid-template-areas:
        "stat recipient"
        "direction value";
    grid-template-columns: 1fr 0.8rem;
    grid-template-rows: 0.8rem 1fr;
    gap: 0 0.08rem;
    padding: 0.12rem;
    border-width: 2px;
}

.move-dynamic-effect--stat-modifier
    .move-dynamic-effect__recipient {
    grid-area: recipient;
    display: grid;
    width: 0.7rem;
    height: 0.7rem;
    place-items: center;
    align-self: start;
    border: 1px solid currentColor;
    border-radius: 0.16rem;
    font-size: 0.42rem;
}

.move-dynamic-effect--stat-modifier
    .move-dynamic-effect__direction {
    grid-area: direction;
    align-self: center;
    font-size: 1.45rem;
    line-height: 0.8;
}

.move-dynamic-effect--stat-modifier
    .move-dynamic-effect__stat {
    grid-area: stat;
    align-self: center;
    justify-self: start;
    font-size: 0.43rem;
    letter-spacing: -0.01em;
}

.move-dynamic-effect--stat-modifier
    .move-dynamic-effect__value {
    grid-area: value;
    align-self: center;
    font-size: 1.45rem;
}

.move-dynamic-effect--recipient-user {
    border-color: var(--primary, #3b4cca);
    background: #eef7ff;
}

.move-dynamic-effect--recipient-foe {
    border-color: #b42318;
    background: #fff1ef;
}

.move-dynamic-effect--recipient-source-defined {
    grid-template-areas:
        "stat stat"
        "direction value";
    border-color: #68707d;
    background: #f4f5f7;
}

.move-dynamic-effect--chance-dice {
    border-color: transparent;
    background: transparent;
}

.move-dynamic-effect__chance-visual {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
}

.move-dynamic-effect__die-face {
    position: absolute;
    top: 0.35rem;
    left: 0.45rem;
    width: 1.55rem;
    height: 1.55rem;
    transform: rotate(45deg);
    border-radius: 0.2rem;
    background: #68685f;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 15%);
}

.move-dynamic-effect__die-face span {
    position: absolute;
    width: 0.24rem;
    height: 0.24rem;
    border-radius: 50%;
    background: #fff;
}

.move-dynamic-effect__die-face span:nth-child(1) {
    top: 0.28rem;
    left: 0.28rem;
}

.move-dynamic-effect__die-face span:nth-child(2) {
    top: 0.28rem;
    right: 0.28rem;
}

.move-dynamic-effect__die-face span:nth-child(3) {
    top: 0.66rem;
    left: 0.66rem;
}

.move-dynamic-effect__die-face span:nth-child(4) {
    right: 0.28rem;
    bottom: 0.28rem;
}

.move-dynamic-effect__die-face span:nth-child(5) {
    bottom: 0.28rem;
    left: 0.28rem;
}

.move-dynamic-effect__chance-count {
    position: absolute;
    right: 0.05rem;
    bottom: 0.05rem;
    z-index: 2;
    display: grid;
    min-width: 1.35rem;
    height: 1.4rem;
    padding: 0 0.12rem;
    place-items: center;
    border: 2px solid #f7f7ef;
    border-radius: 0.2rem;
    background: #595950;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
}

.move-dynamic-effect__chance-count--double {
    min-width: 1.55rem;
    font-size: 0.72rem;
}

.move-dynamic-effect__chance-count--triple {
    min-width: 1.8rem;
    font-size: 0.62rem;
}

.move-dynamic-effect--status {
    border-color: transparent;
}

.move-dynamic-effect__status-image {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.move-dynamic-effect__status-fallback {
    max-width: 40px;
    font-size: 0.48rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.move-dynamic-effect__status-image img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.move-dynamic-effect--status-operation {
    border-color: #4b8d62;
    background: #f0f8f2;
    color: #28583a;
}

.move-dynamic-effect--status-operation-remove {
    border-color: #a05a35;
    background: #fff5ef;
    color: #7a321f;
}

.move-dynamic-effect--status-operation-specific {
    width: min(14rem, calc(100vw - 2rem));
    max-width: 100%;
    height: auto;
    min-height: 48px;
    overflow: visible;
    grid-template-rows: auto 1fr;
    gap: 0.2rem;
    padding: 0.25rem;
}

.move-dynamic-effect__status-operation-marker,
.move-dynamic-effect__status-operation-generic {
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: center;
}

.move-dynamic-effect__status-operation-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.16rem;
    max-width: 100%;
}

.move-dynamic-effect__status-operation-status {
    position: relative;
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
}

.move-dynamic-effect__status-operation-fallback {
    max-width: 30px;
    font-size: 0.34rem;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
}

.move-dynamic-effect__status-operation-image {
    position: absolute;
    inset: 0;
}

.move-dynamic-effect__status-operation-image img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.move-dynamic-effect__chance-visual--status {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 31px;
    height: 31px;
    border-radius: 0.35rem;
    background: rgb(255 255 255 / 92%);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
}

.move-dynamic-effect__chance-visual--status
    .move-dynamic-effect__die-face {
    top: -0.05rem;
    left: -0.05rem;
    transform: rotate(45deg) scale(0.68);
}

.move-dynamic-effect__chance-visual--status
    .move-dynamic-effect__chance-count {
    right: 0;
    bottom: 0;
    min-width: 1rem;
    height: 1.05rem;
    border-width: 1px;
    font-size: 0.62rem;
}

.move-dynamic-effect__chance-visual--status
    .move-dynamic-effect__chance-count--double {
    min-width: 1.25rem;
    font-size: 0.52rem;
}

.move-dynamic-effect__chance-visual--status
    .move-dynamic-effect__chance-count--triple {
    min-width: 1.45rem;
    font-size: 0.46rem;
}

.move-dynamic-effect--minor-heal,
.move-dynamic-effect--damage-pool-modifier,
.move-dynamic-effect--set-damage {
    grid-template-areas:
        "operator value"
        "caption caption";
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    padding: 0.22rem;
}

.move-dynamic-effect--minor-heal
    .move-dynamic-effect__operator,
.move-dynamic-effect--damage-pool-modifier
    .move-dynamic-effect__operator,
.move-dynamic-effect--set-damage
    .move-dynamic-effect__operator {
    grid-area: operator;
}

.move-dynamic-effect--minor-heal
    .move-dynamic-effect__value,
.move-dynamic-effect--damage-pool-modifier
    .move-dynamic-effect__value,
.move-dynamic-effect--set-damage
    .move-dynamic-effect__value {
    grid-area: value;
}

.move-dynamic-effect--minor-heal
    .move-dynamic-effect__caption,
.move-dynamic-effect--damage-pool-modifier
    .move-dynamic-effect__caption,
.move-dynamic-effect--set-damage
    .move-dynamic-effect__caption {
    grid-area: caption;
}

.move-dynamic-effect--reaction,
.move-dynamic-effect--low-accuracy {
    grid-template-areas:
        "caption caption"
        "operator value";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.8rem 1fr;
    padding: 0.12rem;
    border-width: 2px;
}

.move-dynamic-effect--reaction {
    border-color: #6aa9a6;
    background: #eef9f7;
}

.move-dynamic-effect--low-accuracy {
    border-color: #111;
    background: #1d1d20;
    color: #fff;
}

.move-dynamic-effect--reaction
    .move-dynamic-effect__caption,
.move-dynamic-effect--low-accuracy
    .move-dynamic-effect__caption {
    grid-area: caption;
    align-self: center;
    font-size: 0.45rem;
    letter-spacing: -0.01em;
}

.move-dynamic-effect--reaction
    .move-dynamic-effect__direction,
.move-dynamic-effect--low-accuracy
    .move-dynamic-effect__operator {
    grid-area: operator;
    align-self: center;
    font-size: 1.4rem;
    line-height: 0.8;
}

.move-dynamic-effect--low-accuracy
    .move-dynamic-effect__operator {
    color: #e3443b;
}

.move-dynamic-effect--reaction
    .move-dynamic-effect__value,
.move-dynamic-effect--low-accuracy
    .move-dynamic-effect__value {
    grid-area: value;
    align-self: center;
    font-size: 1.4rem;
}

.move-dynamic-effect--duration {
    grid-template-rows: 0.7rem 1fr;
    gap: 0.05rem;
    padding: 0.1rem;
    border-color: #5069a2;
    background: #eef2ff;
    color: #2f477f;
}

.move-dynamic-effect--duration
    .move-dynamic-effect__caption {
    align-self: center;
    font-size: 0.42rem;
}

.move-dynamic-effect__duration-dial {
    position: relative;
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.move-dynamic-effect__duration-dial::before {
    position: absolute;
    top: -0.28rem;
    width: 0.5rem;
    height: 0.18rem;
    border-radius: 0.1rem;
    background: currentColor;
    content: "";
}

.move-dynamic-effect__duration-dial
    .move-dynamic-effect__value {
    font-size: 1.15rem;
}

.move-dynamic-effect__duration-scene {
    font-size: 0.42rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.move-dynamic-effect__conditional-marker {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0.15rem;
    font-size: 0.8rem;
    font-weight: 900;
}

.move-dynamic-effect--invalid {
    border-style: dashed;
    color: var(--text-muted, #5f6470);
}

.move-dynamic-effect__fallback {
    max-width: 42px;
    font-size: 0.55rem;
    font-weight: 800;
    text-align: center;
}

.move-icon-composition__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

.move-icon-composition__item,
.move-icon-composition__semantic {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    line-height: 0;
}

.move-icon-composition__item:has(
    > .move-dynamic-effect--status-operation-specific
) {
    width: min(14rem, 100%);
    max-width: 100%;
}

.move-icon-composition__item
    > .move-dynamic-effect--status-operation-specific {
    width: 100%;
}

.move-icon-composition__fixed,
.move-icon-composition__image {
    width: 48px;
    height: 48px;
}

.move-icon-composition__image {
    display: block;
    object-fit: contain;
    object-position: center center;
}

.move-icon-composition__semantic--conditional {
    position: relative;
}

.move-icon-composition__semantic--always-critical {
    position: relative;
}

.move-icon-composition__always-marker {
    position: absolute;
    z-index: 2;
    right: 0.1rem;
    bottom: 0.1rem;
    left: 0.1rem;
    overflow: hidden;
    border-radius: 0.2rem;
    background: rgb(24 28 38 / 88%);
    color: #fff;
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

.move-icon-composition__branch {
    max-width: 100%;
    line-height: 1.2;
}

.move-icon-composition__relation {
    max-width: 100%;
    line-height: 1.2;
}

.move-icon-relation {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.3rem;
    border: 1px solid var(--border, #dfe2ea);
    border-radius: 0.65rem;
}

.move-icon-relation__label {
    max-width: 8rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-align: center;
}

.move-icon-relation__exceptions {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 24rem;
    color: var(--text-muted, #5f6470);
    font-size: 0.68rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.move-icon-relation__exceptions-label {
    color: inherit;
    font-weight: 700;
}

.move-icon-relation--event {
    align-items: center;
    flex-wrap: nowrap;
}

.move-icon-relation__event-copy {
    display: grid;
    flex: 1 1 13rem;
    min-width: 0;
    max-width: 18rem;
    gap: 0.15rem;
    line-height: 1.2;
}

.move-icon-relation__event-trigger {
    font-size: 0.72rem;
    font-weight: 700;
}

.move-icon-relation__event-condition {
    color: var(--text-muted, #5f6470);
    font-size: 0.7rem;
    overflow-wrap: anywhere;
}

.move-icon-relation__event-outcome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.move-icon-relation__event-result,
.move-icon-relation__event-recipient {
    font-size: 0.7rem;
    overflow-wrap: anywhere;
}

.move-icon-relation__event-result {
    font-weight: 700;
}

.move-icon-relation__event-recipient {
    color: var(--text-muted, #5f6470);
}

.move-icon-branch {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.3rem;
    border: 1px solid var(--border, #dfe2ea);
    border-radius: 0.65rem;
}

.move-icon-branch__state {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
        "caption caption"
        "icon condition";
    gap: 0.2rem 0.35rem;
    align-items: center;
    min-width: 48px;
}

.move-icon-branch__caption {
    grid-area: caption;
    color: var(--text-muted, #5f6470);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
}

.move-icon-branch__state
    .move-icon-composition__semantic,
.move-icon-branch__dynamic {
    grid-area: icon;
}

.move-icon-branch__state--temporal {
    grid-template-columns: minmax(0, auto) minmax(0, 7.5rem);
    grid-template-areas:
        "caption caption"
        "temporal condition";
}

.move-icon-branch__temporal {
    display: inline-flex;
    grid-area: temporal;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.move-icon-branch__temporal-label {
    max-width: 5.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.move-icon-branch__dynamic {
    display: inline-grid;
    place-items: center;
    line-height: 0;
}

.move-icon-branch__connector {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

.move-icon-branch__condition {
    grid-area: condition;
    max-width: 7.5rem;
    font-size: 0.72rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.move-icon-branch__state--suppressed {
    grid-template-columns: minmax(0, 9rem);
    grid-template-areas:
        "caption"
        "suppressed"
        "condition";
}

.move-icon-branch__suppressed {
    grid-area: suppressed;
    max-width: 9rem;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.move-icon-composition__semantic--grouped {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.15rem;
    padding: 0.12rem;
    border: 1px solid var(--border, #dfe2ea);
    border-radius: 0.65rem;
    line-height: 1;
}

.move-icon-composition__target-semantic {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas:
        "caption caption"
        "icon condition";
    gap: 0.2rem 0.4rem;
    max-width: min(100%, 16rem);
    align-items: center;
    padding: 0.25rem;
    border: 1px solid var(--border, #dfe2ea);
    border-radius: 0.65rem;
    line-height: 1.2;
}

.move-icon-composition__target-caption {
    grid-area: caption;
    justify-self: start;
    color: var(--text-muted, #5f6470);
    font-size: 0.68rem;
    font-weight: 700;
}

.move-icon-composition__target-semantic
    .move-icon-composition__image {
    grid-area: icon;
}

.move-icon-composition__target-condition {
    grid-area: condition;
    font-size: 0.72rem;
    line-height: 1.25;
}

.catalog-shell--move
    .move-icon-composition--mini {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
}

.catalog-shell--move
    .move-icon-composition--mini
    .move-icon-composition__mini-heading {
    color: var(--text-muted, #5f6470);
    font-size: 0.67rem;
    font-weight: 700;
    line-height: 1.2;
}

.catalog-shell--move
    .move-icon-composition--mini
    .move-icon-composition__list {
    --move-icon-mini-scale: 0.625;

    gap: 0.4rem;
    align-items: flex-start;
    width: 100%;
    zoom: var(--move-icon-mini-scale);
}