.kiwi-guide {
    position: fixed;
    inset: 0;
    z-index: 240;
    overflow: hidden;
    pointer-events: none;
}

.kiwi-guide[hidden] { display: none; }

.kiwi-guide__canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 520ms ease;
}

.kiwi-guide.is-ready .kiwi-guide__canvas { opacity: 1; }

.kiwi-guide__hit {
    appearance: none;
    position: absolute;
    z-index: 2;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
}

.kiwi-guide__hit:active { cursor: grabbing; }

.kiwi-guide__close {
    appearance: none;
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    padding: 0 0 2px;
    background: var(--bg-color);
    color: var(--text-color);
    border: var(--line-weight) solid var(--border-color);
    border-radius: 50%;
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.72);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}

.kiwi-guide.is-close-visible .kiwi-guide__close {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.kiwi-guide__message {
    position: absolute;
    z-index: 3;
    width: max-content;
    max-width: min(150px, calc(100vw - 24px));
    margin: 0;
    padding: 5px 9px;
    background: var(--bg-color);
    color: var(--text-color);
    border: var(--line-weight) solid var(--border-color);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    word-spacing: 0;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
    transform: translate(-50%, -100%);
    transition: opacity 520ms ease, transform 520ms ease;
    pointer-events: none;
}

.kiwi-guide.is-crying .kiwi-guide__message {
    transform: translate(-50%, -112%) scale(1.08);
}

.kiwi-guide.is-dismissing .kiwi-guide__canvas,
.kiwi-guide.is-dismissing .kiwi-guide__message {
    opacity: 0;
}

.kiwi-guide.is-dismissing .kiwi-guide__message {
    transform: translate(-50%, -132%) scale(0.84);
}

.kiwi-guide.is-dismissing .kiwi-guide__hit { pointer-events: none; }

.kiwi-effect {
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.kiwi-effect--scratch {
    width: 64px;
    height: 50px;
    transform: rotate(-14deg);
}

.kiwi-effect--scratch i {
    position: absolute;
    left: 5px;
    top: 7px;
    width: 54px;
    height: 3px;
    background: var(--text-color);
    box-shadow: 0 0 0 0.5px var(--bg-color);
    clip-path: polygon(0 15%, 18% 0, 34% 65%, 52% 18%, 70% 82%, 86% 32%, 100% 55%, 100% 100%, 0 100%);
    transform-origin: left center;
    animation: kiwi-scratch 1950ms ease-out forwards;
}

.kiwi-effect--scratch i:nth-child(2) { top: 20px; animation-delay: 85ms; }
.kiwi-effect--scratch i:nth-child(3) { top: 33px; animation-delay: 170ms; }

.kiwi-letter-stage { white-space: pre-wrap; }

.kiwi-letter-piece {
    position: relative;
    display: inline-block;
    transform-origin: 50% 70%;
}

.kiwi-letter-piece.is-rotating { animation: kiwi-letter-rotate 1750ms ease-in-out both; }
.kiwi-letter-piece.is-rotating.is-reverse { animation-direction: reverse; }
.kiwi-letter-piece.is-falling { animation: kiwi-letter-fall 1750ms cubic-bezier(0.25, 0.7, 0.3, 1) both; }
.kiwi-letter-piece.is-gone { animation: kiwi-letter-gone 1750ms steps(2, end) both; }

.kiwi-letter-piece.is-cut {
    color: transparent;
    min-width: 0.35em;
}

.kiwi-letter-piece.is-cut::before,
.kiwi-letter-piece.is-cut::after {
    content: attr(data-letter);
    position: absolute;
    inset: 0;
    color: var(--text-color);
}

.kiwi-letter-piece.is-cut::before {
    clip-path: inset(0 0 49% 0);
    animation: kiwi-letter-cut-top 1750ms ease-in-out both;
}

.kiwi-letter-piece.is-cut::after {
    clip-path: inset(51% 0 0 0);
    animation: kiwi-letter-cut-bottom 1750ms ease-in-out both;
}

@keyframes kiwi-scratch {
    0% { opacity: 0; transform: scaleX(0); }
    18%, 64% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: translate(5px, -3px) scaleX(1); }
}

@keyframes kiwi-letter-rotate {
    0%, 12%, 100% { transform: rotate(0); }
    34%, 78% { transform: translateY(-0.12em) rotate(76deg); }
}

@keyframes kiwi-letter-fall {
    0%, 15% { opacity: 1; transform: translate(0, 0) rotate(0); }
    72%, 100% { opacity: 0; transform: translate(-0.35em, 1.1em) rotate(-42deg); }
}

@keyframes kiwi-letter-gone {
    0%, 20% { opacity: 1; transform: scale(1); }
    38%, 100% { opacity: 0; transform: scale(0.1); }
}

@keyframes kiwi-letter-cut-top {
    0%, 15%, 100% { transform: translate(0, 0); }
    36%, 78% { transform: translate(-0.15em, -0.14em) rotate(-8deg); }
}

@keyframes kiwi-letter-cut-bottom {
    0%, 15%, 100% { transform: translate(0, 0); }
    36%, 78% { transform: translate(0.18em, 0.16em) rotate(7deg); }
}

.kiwi-guide__fallback {
    display: none;
    position: absolute;
    left: 28px;
    bottom: 28px;
    width: 112px;
    height: 112px;
    padding: 0;
    object-fit: contain;
    cursor: pointer;
    pointer-events: auto;
    filter: drop-shadow(3px 5px 0 rgb(0 0 0 / 16%));
}

.kiwi-guide.is-fallback .kiwi-guide__fallback { display: block; }
@media (max-width: 750px) {
    .kiwi-guide__message {
        max-width: min(128px, calc(100vw - 20px));
        padding: 5px 8px;
        font-size: 10px;
    }

    .kiwi-guide__close {
        width: 23px;
        height: 23px;
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kiwi-guide__canvas { transition: none; }
    .kiwi-effect,
    .kiwi-letter-piece,
    .kiwi-letter-piece::before,
    .kiwi-letter-piece::after { animation: none !important; }
}