/*
 * Kontrakt wizualny interaktywnych narzędzi MegaPets.
 * Kalkulator Terrarium 2.0.13 jest niezmienianym punktem odniesienia dla
 * szerokości 1320 px, panelu sterowania 336 px, wspólnej karty, nagłówka,
 * sceny i dolnej sekcji informacyjnej. Do tego wzorca dopasowujemy wyłącznie
 * Anatomię. Jej scena zachowuje natywne proporcje 3:2 wymagane przez obrazy
 * 1536 × 1024, maski, canvas i punkty narządów. Na telefonach sama scena jest
 * pełnej szerokości i bez własnej ramki, aby ślimak pozostał możliwie duży.
 * Nie zmieniać tych wartości lokalnie: są kontraktem serii interaktywnych
 * narzędzi MegaPets, opisanym również w DEVELOPMENT-NOTES.md.
 */

.mpsa-anatomy,
.mpsa-anatomy *,
.mpsa-anatomy *::before,
.mpsa-anatomy *::after {
    box-sizing: border-box;
}

.mpsa-anatomy {
    --mpsa-page: var(--mp-color-page, #fbfbfb);
    --mpsa-surface: var(--mp-color-surface, #ffffff);
    --mpsa-brand: var(--mp-global-color-background-brand, #efe5d7);
    --mpsa-soft: var(--mp-color-background-soft, #f4ece2);
    --mpsa-cream: var(--mp-color-cream, #f7efe2);
    --mpsa-dark: var(--mp-color-dark, #2a221b);
    --mpsa-grey: var(--mp-color-grey, #5b544d);
    --mpsa-chocolate: var(--mp-color-brown-chocolate, #6b5643);
    --mpsa-gold: var(--mp-color-gold, #c79a57);
    --mpsa-gold-dark: var(--mp-color-gold-dark, #b8833e);
    --mpsa-gold-light: var(--mp-color-gold-light, #d7ac69);
    --mpsa-border: var(--mp-color-border-subtle, rgba(199, 154, 87, 0.24));
    --mpsa-border-strong: var(--mp-color-border-interactive, rgba(184, 131, 62, 0.48));
    --mpsa-shadow: var(--mp-shadow, 0 8px 24px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.04));
    --mpsa-radius: var(--mp-radius, 8px);
    --mpsa-radius-large: var(--mp-radius-large, 12px);
    --mpsa-ease: var(--mp-ease, cubic-bezier(0.22, 1, 0.36, 1));
    --mpsa-current-organ: var(--mpsa-gold);
    --mpsa-series-max-width: 1320px;
    --mpsa-series-panel-width: 336px;
    --mpsa-series-stage-gutter: 28px;
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: var(--mpsa-series-max-width);
    margin: 0 auto;
    border: var(--mp-border-width, 1px) solid var(--mpsa-border);
    border-radius: var(--mpsa-radius-large);
    background: var(--mpsa-surface);
    box-shadow: var(--mpsa-shadow);
    color: var(--mpsa-dark);
    font-family: var(--mp-font-body, "Manrope", Arial, sans-serif);
    font-size: 15px;
    line-height: 1.55;
}

.mpsa-anatomy button,
.mpsa-anatomy input {
    font: inherit;
}

.mpsa-anatomy button {
    appearance: none;
    -webkit-appearance: none;
    letter-spacing: normal;
    text-transform: none;
    font-style: normal;
}

.mpsa-anatomy__header {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 20px 24px 18px;
    border-bottom: var(--mp-border-width, 1px) solid var(--mpsa-border-strong);
    border-radius: var(--mpsa-radius-large) var(--mpsa-radius-large) 0 0;
    background: linear-gradient(135deg, var(--mpsa-cream), var(--mpsa-brand));
    text-align: left;
}

.mpsa-anatomy__header::before,
.mpsa-anatomy__header::after {
    display: none;
}

.mpsa-anatomy__eyebrow {
    margin: 0;
    color: var(--mp-color-action-primary-dark, #a56d24);
    font-size: 10.5px;
    font-weight: var(--mp-font-weight-semibold, 600);
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.mpsa-anatomy__title {
    margin: 7px 0 0;
    color: var(--mpsa-chocolate);
    font-family: var(--mp-font-heading, "Cormorant Garamond", Georgia, serif);
    font-size: 32px;
    font-weight: var(--mp-font-weight-medium, 500);
    letter-spacing: 0;
    line-height: 1.05;
}

.mpsa-anatomy__intro {
    max-width: 780px;
    margin: 8px 0 0;
    color: var(--mpsa-grey);
    font-size: 13px;
    line-height: 1.5;
}

.mpsa-anatomy__experience {
    display: grid;
    grid-template-columns: var(--mpsa-series-panel-width) minmax(0, 1fr);
    grid-template-areas: "panel visual";
    gap: 0;
    align-items: stretch;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mpsa-anatomy__visual-column {
    grid-area: visual;
    min-width: 0;
    padding: 0 var(--mpsa-series-stage-gutter) 12px 0;
}

.mpsa-anatomy__stage {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3 / 2;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
}

.mpsa-anatomy.is-researching .mpsa-anatomy__stage {
    touch-action: pinch-zoom;
}

@media (pointer: fine) {
    .mpsa-anatomy.is-researching .mpsa-anatomy__stage {
        cursor: none;
    }

    .mpsa-anatomy.is-researching .mpsa-anatomy__marker {
        cursor: none;
    }
}

.mpsa-anatomy__image,
.mpsa-anatomy__scratch,
.mpsa-anatomy__highlight,
.mpsa-anatomy__desaturate,
.mpsa-anatomy__contour,
.mpsa-anatomy__reveal-edge,
.mpsa-anatomy__hotspots {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.mpsa-anatomy__image {
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}

.mpsa-anatomy__image--anatomy {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

/* Prevent a flash of the uncovered model while the images and scratch canvas
 * are still being prepared. The !important values intentionally override the
 * inline first-paint guard only after this scoped stylesheet is available and
 * the painted cover has already been committed. */
.mpsa-anatomy.is-ready .mpsa-anatomy__image--anatomy {
    opacity: 1 !important;
    visibility: visible !important;
}

.mpsa-anatomy__highlight {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
    /*
     * Opacity is owned here and nowhere else: showing the layer adds is-visible
     * and this transition performs the appearance, every time, with no script
     * scheduling. Only opacity is transitioned — a transform transition cannot
     * smooth the pulse, because dropping an animation never starts one.
     */
    transition: opacity 0.42s ease;
}

.mpsa-anatomy__highlight.is-visible,
.mpsa-anatomy__highlight.is-visible.is-preview,
.mpsa-anatomy__highlight.is-visible.is-active {
    opacity: 1;
}

/*
 * The pulse itself carries no delay: an organ-to-organ handover restarts the
 * animation, and a delay there would leave the organ still for its length.
 * Only a genuine appearance is marked is-appearing, which holds the pulse back
 * until the layer has faded up — running both at once re-rasterises this
 * full-frame layer every frame, which read as a nervous first open.
 */
.mpsa-anatomy__highlight.is-visible.is-pulsing {
    animation: mpsa-highlight-catch 3.2s cubic-bezier(0.37, 0, 0.63, 1) 5;
}

.mpsa-anatomy__highlight.is-visible.is-pulsing.is-appearing {
    animation-delay: 0.42s;
}

/*
 * The contour sits in its own layer and never scales: the pulse must read as
 * the organ swelling inside a fixed outline, not as a moving outline.
 */
.mpsa-anatomy__contour {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.mpsa-anatomy__contour.is-visible {
    opacity: 0.9;
}

.mpsa-anatomy__contour.is-visible.is-active {
    opacity: 1;
}

/*
 * Colour isolation: a grey plate with the examined organ punched out. Composited
 * in the saturation blend mode it drains colour from the rest of the drawing, so
 * the chosen structure stays the only coloured one without dimming the plate.
 */
.mpsa-anatomy__desaturate {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: color;
    will-change: opacity;
    transition: opacity 0.65s cubic-bezier(0.37, 0, 0.63, 1);
}

.mpsa-anatomy__desaturate.is-visible {
    opacity: 1;
}

.mpsa-anatomy__hotspots {
    /*
     * The highlight belongs to the anatomical layer. Keeping it below the
     * erasable cover means an organ contour can only appear through portions
     * that have already been examined.
     */
    z-index: 2;
    overflow: visible;
    pointer-events: none !important;
}

.mpsa-anatomy__image--cover {
    z-index: 3;
    opacity: 1;
}

.mpsa-anatomy__scratch {
    z-index: 4;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
}

.mpsa-anatomy.is-canvas-ready .mpsa-anatomy__scratch {
    visibility: visible;
}

.mpsa-anatomy__reveal-edge {
    z-index: 5;
    pointer-events: none;
}

.mpsa-anatomy.is-cover-released .mpsa-anatomy__image--cover {
    opacity: 0;
}

.mpsa-anatomy.is-fallback .mpsa-anatomy__brush,
.mpsa-anatomy.is-fallback .mpsa-anatomy__highlight,
.mpsa-anatomy.is-fallback .mpsa-anatomy__reveal-edge,
.mpsa-anatomy.is-fallback .mpsa-anatomy__hotspots {
    display: none;
}

.mpsa-anatomy.has-organ-mask .mpsa-anatomy__hotspots {
    display: none;
}

.mpsa-anatomy__hotspot {
    opacity: 0;
    pointer-events: none !important;
    transition: opacity 0.3s var(--mpsa-ease);
}

.mpsa-anatomy__hotspot.is-hovered,
.mpsa-anatomy__hotspot.is-active {
    opacity: 1;
}

.mpsa-anatomy__hotspot-shape {
    fill: transparent;
    stroke: transparent;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none !important;
    transition: fill 0.22s var(--mpsa-ease), stroke 0.22s var(--mpsa-ease), filter 0.22s var(--mpsa-ease), opacity 0.22s var(--mpsa-ease);
}

.mpsa-anatomy__hotspot-shape--fill {
    fill: none;
    stroke-width: 4px;
}

.mpsa-anatomy__hotspot-shape--stroke {
    fill: none;
    stroke-width: var(--mpsa-outline-width, 16px);
}

.mpsa-anatomy__hotspot.is-hovered .mpsa-anatomy__hotspot-shape--fill,
.mpsa-anatomy__hotspot.is-active .mpsa-anatomy__hotspot-shape--fill {
    fill: none;
    stroke: var(--mpsa-organ-color);
    stroke-opacity: 0.94;
    filter: none;
}

.mpsa-anatomy__hotspot.is-hovered .mpsa-anatomy__hotspot-shape--stroke,
.mpsa-anatomy__hotspot.is-active .mpsa-anatomy__hotspot-shape--stroke {
    stroke: var(--mpsa-organ-color);
    stroke-opacity: 0.94;
    filter: none;
}

.mpsa-anatomy__hotspot.is-active .mpsa-anatomy__hotspot-shape--fill {
    stroke-width: 5px;
}

.mpsa-anatomy__markers {
    position: absolute;
    z-index: 10;
    inset: 0;
    pointer-events: none;
}

.mpsa-anatomy button.mpsa-anatomy__marker {
    position: absolute;
    display: grid;
    place-items: center;
    width: 36px;
    min-width: 0;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    outline: 0;
    opacity: 1;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
    transform: translate3d(-50%, -50%, 0) !important;
    transition: none !important;
    touch-action: manipulation;
}

.mpsa-anatomy button.mpsa-anatomy__marker:hover,
.mpsa-anatomy button.mpsa-anatomy__marker:focus,
.mpsa-anatomy button.mpsa-anatomy__marker:active,
.mpsa-anatomy button.mpsa-anatomy__marker.is-hovered,
.mpsa-anatomy button.mpsa-anatomy__marker.is-active {
    transform: translate3d(-50%, -50%, 0) !important;
}

.mpsa-anatomy button.mpsa-anatomy__marker[hidden] {
    display: none !important;
}

.mpsa-anatomy__marker span {
    position: relative;
    display: block;
    width: 13px;
    height: 13px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(145deg, #dfbd78, #ad772f 72%);
    box-shadow:
        0 0 0 1.5px #a56d24,
        0 3px 9px rgba(82, 54, 25, 0.25);
    backface-visibility: hidden;
    transform: translateZ(0);
    transform-origin: 50% 50%;
}

/*
 * Growth is a separate ring that scales, and the dot itself never moves. Scaling
 * the 13 px dot re-rasterises its 2 px border every frame, and transitioning its
 * box-shadow is worse still: the base state has two shadows against three on
 * hover, so the browser interpolates the missing one up from nothing while the
 * gold ring recolours to white — that is the jerk. A transform on a pseudo
 * element is composited, so nothing repaints.
 */
.mpsa-anatomy__marker span::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid #b8833e;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #ffffff inset;
    opacity: 0;
    /*
     * The resting scale equals the animation's own 0% keyframe, and the binding
     * below is permanent — merely paused at rest, never bound to hover. Dropping
     * an animation reverts transform in a single frame and no transition can
     * absorb that, because the specified value never changes; a pointer leaving
     * mid-cycle used to shrink the ring by 6% at full opacity. Paused, it holds
     * the scale it had reached and only the opacity fades.
     */
    transform: scale(0.94);
    transform-origin: 50% 50%;
    pointer-events: none;
    transition: opacity 0.2s ease;
    animation: mpsa-marker-breathe 3.2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    animation-play-state: paused;
}

.mpsa-anatomy__marker:hover span::after,
.mpsa-anatomy__marker:focus-visible span::after,
.mpsa-anatomy__marker.is-hovered span::after,
.mpsa-anatomy__marker.is-active span::after {
    opacity: 1;
    /*
     * Same 3.2 s cycle and easing as mpsa-highlight-catch, so the ring keeps the
     * organ's rhythm. Only the play state is switched here.
     */
    animation-play-state: running;
}

/* Only while the highlight is fading in does the ring's fade wait with it. The
 * breathing cannot be delayed here: animation-delay counts from the animation's
 * own start and this binding is never restarted — the wait is done by holding
 * the play state instead. */
.mpsa-anatomy.has-appearing-highlight .mpsa-anatomy__marker:hover span::after,
.mpsa-anatomy.has-appearing-highlight .mpsa-anatomy__marker:focus-visible span::after,
.mpsa-anatomy.has-appearing-highlight .mpsa-anatomy__marker.is-hovered span::after,
.mpsa-anatomy.has-appearing-highlight .mpsa-anatomy__marker.is-active span::after {
    transition-delay: 0.42s;
}

/* The organ pulse is bounded at five cycles. When it settles the ring is paused
 * rather than unbound, so it stops where it stands — unbinding would revert its
 * transform in a single frame. */
.mpsa-anatomy.has-settled-pulse .mpsa-anatomy__marker:hover span::after,
.mpsa-anatomy.has-settled-pulse .mpsa-anatomy__marker:focus-visible span::after,
.mpsa-anatomy.has-settled-pulse .mpsa-anatomy__marker.is-hovered span::after,
.mpsa-anatomy.has-settled-pulse .mpsa-anatomy__marker.is-active span::after {
    animation-play-state: paused;
}

.mpsa-anatomy__marker:focus-visible {
    outline: 2px solid var(--mpsa-gold-dark);
    outline-offset: 1px;
}

.mpsa-anatomy__marker.is-new span {
    animation: mpsa-marker-found 0.7s ease;
}

.mpsa-anatomy__brush {
    position: absolute;
    z-index: 8;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.84);
    transition: opacity 0.16s ease, transform 0.2s var(--mpsa-ease);
}

.mpsa-anatomy__brush::before {
    position: absolute;
    z-index: 0;
    top: calc(50% - 3.5px);
    left: 50%;
    width: 98%;
    height: 7px;
    border: 1px solid rgba(42, 27, 18, 0.9);
    border-radius: 999px;
    background: linear-gradient(90deg, #805b3f 0%, #5b3b2a 48%, #302017 100%);
    box-shadow: 0 2px 5px rgba(42, 27, 18, 0.34), inset 0 1px 1px rgba(255, 236, 205, 0.2);
    content: "";
    transform: rotate(43deg);
    transform-origin: left center;
}

.mpsa-anatomy__lens {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #79502f;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.93);
    box-shadow:
        inset 0 0 0 1px rgba(255, 232, 190, 0.78),
        inset -4px -5px 7px rgba(55, 34, 18, 0.17),
        0 0 0 1px rgba(255, 255, 255, 0.78),
        0 4px 11px rgba(52, 34, 22, 0.27);
    object-fit: cover;
}

.mpsa-anatomy__lens-shine {
    position: absolute;
    z-index: 2;
    top: 13%;
    left: 17%;
    width: 40%;
    height: 21%;
    border-top: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    content: "";
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
    transform: rotate(-25deg);
}

.mpsa-anatomy__brush.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.mpsa-anatomy__brush.is-over-organ {
    transform: translate(-50%, -50%) scale(1);
}

.mpsa-anatomy__brush.is-over-organ .mpsa-anatomy__lens {
    border-color: #644027;
    box-shadow:
        inset 0 0 0 1px rgba(255, 234, 193, 0.86),
        inset -4px -5px 8px rgba(55, 34, 18, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.84),
        0 4px 13px rgba(52, 34, 22, 0.31);
}

/*
 * Deliberate start gate. The stationary loupe is the only control that begins
 * revealing the model; merely entering the scene with a pointer never does.
 */
.mpsa-anatomy button.mpsa-anatomy__start-loupe {
    appearance: none;
    position: absolute;
    z-index: 13;
    top: 39%;
    left: 43%;
    display: grid;
    grid-template-rows: var(--mpsa-start-loupe-size, 64px) auto;
    justify-items: center;
    gap: 13px;
    width: 138px;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 18px;
    outline: 0;
    opacity: 0;
    visibility: hidden;
    color: var(--mpsa-chocolate);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.94);
    transition:
        opacity 0.28s ease,
        visibility 0s linear 0.28s,
        transform 0.42s var(--mpsa-ease);
    touch-action: manipulation;
}

.mpsa-anatomy.is-awaiting-start button.mpsa-anatomy__start-loupe:not(:disabled) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0s;
}

.mpsa-anatomy.is-guide-playing button.mpsa-anatomy__start-loupe,
.mpsa-anatomy.is-awaiting-start.is-guide-playing button.mpsa-anatomy__start-loupe:not(:disabled) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/*
 * The start loupe is the reveal lens itself, not a lookalike: the same 2 px
 * #79502f rim, the same glass, the same shine and the same 43 degree handle.
 * Its diameter arrives from the script as --mpsa-start-loupe-size, computed
 * with the lens formula, so both loupes match at every stage width, and its
 * glass is a canvas holding the magnified scene underneath.
 */
.mpsa-anatomy__start-loupe-body {
    position: relative;
    display: block;
    width: var(--mpsa-start-loupe-size, 64px);
    height: var(--mpsa-start-loupe-size, 64px);
    animation: mpsa-start-loupe-float 3.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    animation-play-state: paused;
}

/* A soft shadow around the loupe instead of a glow: it wraps the rim and
 * only breathes, so nothing sits under the instrument. */
.mpsa-anatomy__start-loupe-shadow {
    position: absolute;
    z-index: 0;
    inset: -16%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(58, 38, 20, 0.22) 0%, rgba(58, 38, 20, 0.1) 52%, rgba(58, 38, 20, 0) 72%);
    opacity: 0.75;
    pointer-events: none;
    transform: scale(1);
    animation: mpsa-start-loupe-shadow 3.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    animation-play-state: paused;
}

.mpsa-anatomy__start-loupe-echo {
    position: absolute;
    z-index: 0;
    inset: -2px;
    border: 1.5px solid var(--mpsa-gold-light);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: mpsa-start-loupe-echo 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    animation-play-state: paused;
}

.mpsa-anatomy__start-loupe-echo--late {
    animation-delay: 0.9s;
}

.mpsa-anatomy.is-awaiting-start .mpsa-anatomy__start-loupe-body,
.mpsa-anatomy.is-awaiting-start .mpsa-anatomy__start-loupe-shadow,
.mpsa-anatomy.is-awaiting-start .mpsa-anatomy__start-loupe-echo {
    animation-play-state: running;
}

.mpsa-anatomy__start-loupe-handle {
    position: absolute;
    z-index: 0;
    top: calc(50% - 3.5px);
    left: 50%;
    width: 98%;
    height: 7px;
    border: 1px solid rgba(42, 27, 18, 0.9);
    border-radius: 999px;
    background: linear-gradient(90deg, #805b3f 0%, #5b3b2a 48%, #302017 100%);
    box-shadow: 0 2px 5px rgba(42, 27, 18, 0.34), inset 0 1px 1px rgba(255, 236, 205, 0.2);
    pointer-events: none;
    transform: rotate(43deg);
    transform-origin: left center;
}

.mpsa-anatomy__start-loupe-glass {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #79502f;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.93);
    box-shadow:
        inset 0 0 0 1px rgba(255, 232, 190, 0.78),
        inset -4px -5px 7px rgba(55, 34, 18, 0.17),
        0 0 0 1px rgba(255, 255, 255, 0.78),
        0 4px 11px rgba(52, 34, 22, 0.27);
    object-fit: cover;
}

.mpsa-anatomy__start-loupe-shine {
    position: absolute;
    z-index: 2;
    top: 13%;
    left: 17%;
    width: 40%;
    height: 21%;
    border-top: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
    pointer-events: none;
    transform: rotate(-25deg);
}

.mpsa-anatomy__start-loupe-label {
    align-self: end;
    display: inline-flex;
    justify-content: center;
    min-width: 126px;
    padding: 7px 11px;
    border: 1px solid rgba(199, 154, 87, 0.42);
    border-radius: var(--mpsa-radius);
    background: var(--mpsa-surface);
    box-shadow: 0 7px 18px rgba(69, 49, 30, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.075em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.mpsa-anatomy button.mpsa-anatomy__start-loupe:hover:not(:disabled) .mpsa-anatomy__start-loupe-glass,
.mpsa-anatomy button.mpsa-anatomy__start-loupe:focus-visible .mpsa-anatomy__start-loupe-glass {
    border-color: var(--mpsa-gold-dark);
    filter: brightness(1.04) drop-shadow(0 7px 11px rgba(76, 48, 23, 0.16));
}

.mpsa-anatomy button.mpsa-anatomy__start-loupe:focus-visible {
    outline: 2px solid var(--mpsa-gold-dark);
    outline-offset: 4px;
}

.mpsa-anatomy button.mpsa-anatomy__start-loupe:active:not(:disabled) .mpsa-anatomy__start-loupe-glass {
    transform: scale(0.97);
}

@keyframes mpsa-start-loupe-float {
    0%, 100% {
        transform: translateY(3px);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes mpsa-start-loupe-shadow {
    0%, 100% {
        opacity: 0.75;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.08);
    }
}

@keyframes mpsa-start-loupe-echo {
    0% {
        opacity: 0.55;
        transform: scale(1);
    }

    70%, 100% {
        opacity: 0;
        transform: scale(1.75);
    }
}


.mpsa-anatomy__tooltip-leader {
    position: absolute;
    z-index: 9;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.mpsa-anatomy__tooltip-leader[hidden] {
    display: none;
}

.mpsa-anatomy__tooltip-leader line {
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.mpsa-anatomy__tooltip-leader-under {
    stroke: rgba(255, 255, 255, 0.94);
    stroke-width: 3px;
}

.mpsa-anatomy__tooltip-leader-line {
    stroke: var(--mpsa-gold-dark);
    stroke-width: 1.3px;
}

.mpsa-anatomy__tooltip {
    position: absolute;
    z-index: 12;
    display: grid;
    gap: 3px;
    align-items: center;
    min-width: 0;
    width: max-content;
    max-width: min(240px, 60%);
    padding: 7px 11px 8px;
    border: 1px solid rgba(199, 154, 87, 0.46);
    border-radius: 10px;
    background: #ffffff;
    box-shadow:
        0 12px 28px rgba(42, 34, 27, 0.16),
        0 2px 6px rgba(42, 34, 27, 0.08);
    opacity: 0;
    pointer-events: none;
    text-align: center;
    backdrop-filter: blur(8px);
    transform: translateY(2px);
    transition: opacity 0.14s ease, transform 0.18s var(--mpsa-ease);
}

.mpsa-anatomy__tooltip[hidden] {
    display: none;
}

.mpsa-anatomy__tooltip.is-positioned {
    opacity: 1;
    transform: translateY(0);
}

.mpsa-anatomy__tooltip span {
    color: #4a423a;
    font-family: var(--mp-font-sans, Manrope, system-ui, sans-serif);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
}

.mpsa-anatomy__mobile-hint {
    display: none;
    margin: 10px 3px 0;
    color: var(--mpsa-grey);
    font-size: 12px;
}

.mpsa-anatomy__orientation-hint {
    display: none;
}

.mpsa-anatomy__note-active {
    display: none;
}

.mpsa-anatomy.is-researching .mpsa-anatomy__note-awaiting {
    display: none;
}

.mpsa-anatomy.is-researching .mpsa-anatomy__note-active {
    display: inline;
}

.mpsa-anatomy.is-fallback .mpsa-anatomy__research-note,
.mpsa-anatomy.is-fallback .mpsa-anatomy__mobile-hint,
.mpsa-anatomy.is-fallback .mpsa-anatomy__orientation-hint {
    display: none;
}

.mpsa-anatomy__panel {
    position: sticky;
    top: var(--mp-site-header-sticky-offset-desktop, 80px);
    z-index: 4;
    grid-area: panel;
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 12px;
    min-width: 0;
    height: fit-content;
    max-height: calc(100vh - var(--mp-site-header-sticky-offset-desktop, 80px) - 12px);
    max-height: calc(100dvh - var(--mp-site-header-sticky-offset-desktop, 80px) - 12px);
    padding: 18px 14px 18px 20px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mpsa-anatomy__research-note {
    display: flex;
    gap: 9px;
    align-items: center;
    margin: 10px 3px 0;
    color: var(--mpsa-chocolate);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.mpsa-anatomy__research-note::before {
    width: 9px;
    height: 9px;
    border: 1px solid var(--mpsa-gold-dark);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(199, 154, 87, 0.1);
    content: "";
}

.mpsa-anatomy__progress-wrap {
    margin: 0;
    padding: 14px 13px;
    border: var(--mp-border-width, 1px) solid var(--mpsa-border);
    border-radius: var(--mpsa-radius);
    background: var(--mpsa-cream);
    box-shadow: none;
}

.mpsa-anatomy__progress-copy {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: var(--mpsa-grey);
    font-size: 10px;
}

.mpsa-anatomy__progress-copy > span {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mpsa-anatomy__progress-copy strong {
    color: var(--mpsa-chocolate);
    font-family: var(--mp-font-display, "Cormorant Garamond", Georgia, serif);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-align: right;
    text-transform: none;
}

.mpsa-anatomy__progress {
    overflow: hidden;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: rgba(199, 154, 87, 0.16);
}

.mpsa-anatomy__progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mpsa-gold-light), var(--mpsa-gold-dark));
    box-shadow: 0 0 9px rgba(199, 154, 87, 0.42);
    transition: width 0.42s var(--mpsa-ease);
}

.mpsa-anatomy__detail {
    position: relative;
    min-height: 300px;
    max-height: none;
    margin: 0;
    padding: 14px 13px;
    overflow: visible;
    border: var(--mp-border-width, 1px) solid var(--mpsa-border);
    border-radius: var(--mpsa-radius);
    background: var(--mpsa-surface);
    box-shadow: none;
    overscroll-behavior: auto;
    transition: border-color 0.25s ease;
}

.mpsa-anatomy__detail::-webkit-scrollbar {
    width: 6px;
}

.mpsa-anatomy__detail::-webkit-scrollbar-track {
    background: transparent;
}

.mpsa-anatomy__detail::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(184, 131, 62, 0.38);
}

.mpsa-anatomy__detail::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 131, 62, 0.62);
}

.mpsa-anatomy__detail-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.24s var(--mpsa-ease);
}

.mpsa-anatomy__detail.is-changing .mpsa-anatomy__detail-content {
    opacity: 0;
    transform: translateY(3px);
}

.mpsa-anatomy__detail-kicker {
    margin: 0 0 8px;
    color: var(--mpsa-gold-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.mpsa-anatomy__detail h3.mpsa-anatomy__detail-name {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--mpsa-dark);
    font-family: var(--mp-font-heading, "Cormorant Garamond", Georgia, serif);
    font-size: clamp(21px, 2.1vw, 28px);
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.06;
}

.mpsa-anatomy__detail-latin {
    margin: 12px 0 0;
    overflow-wrap: anywhere;
    color: var(--mpsa-grey);
    font-family: var(--mp-font-accent, "Source Serif 4", Georgia, serif);
    font-size: 12.5px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
}

.mpsa-anatomy__detail-latin::before {
    content: "łac. ";
}

.mpsa-anatomy__detail-latin + .mpsa-anatomy__detail-block {
    margin-top: 20px;
}

.mpsa-anatomy__detail-description {
    margin: 4px 0 0;
    color: var(--mpsa-grey);
    font-size: 13px;
    line-height: 1.62;
}

.mpsa-anatomy__detail-block {
    margin-top: 14px;
}

.mpsa-anatomy__detail-block > span {
    display: block;
    margin-bottom: 5px;
    color: var(--mpsa-gold-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mpsa-anatomy__detail:not(.has-organ) .mpsa-anatomy__detail-block > span,
.mpsa-anatomy__detail:not(.has-organ) .mpsa-anatomy__detail-extra {
    display: none;
}

.mpsa-anatomy__detail-extra {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid rgba(199, 154, 87, 0.18);
}

.mpsa-anatomy__detail-extra .mpsa-anatomy__detail-block {
    margin: 0;
}

.mpsa-anatomy__detail-extra p {
    margin: 0;
    color: var(--mpsa-grey);
    font-size: 11.5px;
    line-height: 1.55;
}

.mpsa-anatomy__detail-extra .mpsa-anatomy__detail-block:has(p:empty) {
    display: none;
}

.mpsa-anatomy__detail-extra .mpsa-anatomy__detail-block + .mpsa-anatomy__detail-block {
    padding-top: 13px;
    border-top: 1px solid rgba(199, 154, 87, 0.18);
}

.mpsa-anatomy button.mpsa-anatomy__reset {
    display: inline-flex;
    gap: 7px;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    min-width: 0;
    min-height: 36px;
    margin: 0;
    padding: 3px 0;
    border: 0;
    border-radius: var(--mpsa-radius);
    color: var(--mpsa-grey);
    background: transparent;
    box-shadow: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.25;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.18s ease, opacity 0.18s ease;
}

.mpsa-anatomy button.mpsa-anatomy__reset:hover:not(:disabled),
.mpsa-anatomy button.mpsa-anatomy__reset:focus-visible {
    color: var(--mpsa-gold-dark);
    background: transparent;
}

.mpsa-anatomy button.mpsa-anatomy__reset:disabled {
    opacity: 0.45;
    cursor: default;
}

.mpsa-anatomy button.mpsa-anatomy__reset:focus-visible {
    outline: 2px solid var(--mpsa-gold-dark);
    outline-offset: 3px;
}

.mpsa-anatomy button.mpsa-anatomy__reset:focus:not(:focus-visible) {
    outline: 0;
}

.mpsa-anatomy__reset span {
    font-size: 12px;
}

.mpsa-anatomy__source {
    margin: 14px 0 0;
    padding: 16px 28px 18px;
    border-top: 1px solid var(--mp-standard-separator-line-color, rgba(199, 154, 87, 0.16));
    border-radius: 0 0 var(--mpsa-radius-large) var(--mpsa-radius-large);
    color: var(--mpsa-grey);
    background: color-mix(in srgb, var(--mpsa-surface) 78%, var(--mpsa-cream));
    font-size: 13px;
    font-style: normal;
    line-height: 1.55;
    text-align: left;
}

.mpsa-anatomy__noscript,
.mpsa-missing {
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid rgba(199, 154, 87, 0.42);
    border-radius: 8px;
    color: #6b5643;
    background: #f7efe2;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 13px;
}

.mpsa-anatomy__sr-only {
    position: absolute !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

.mpsa-missing a {
    color: #a56d24;
    font-weight: 700;
}

@keyframes mpsa-marker-breathe {
    0%, 100% {
        transform: scale(0.94);
    }

    50% {
        transform: scale(1);
    }
}

@keyframes mpsa-marker-found {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*
 * Scale only. Opacity is deliberately absent: a running animation overrides a
 * transition on the same property, and the appearance fade owns opacity.
 * The brightness dip rides on a filter instead.
 */
@keyframes mpsa-highlight-catch {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }

    25%, 75% {
        filter: brightness(0.95);
    }

    50% {
        transform: scale(var(--mpsa-pulse-scale, 1.028));
        filter: brightness(1);
    }
}

@media (max-width: 1100px) {
    .mpsa-anatomy__header {
        padding: 17px 18px 15px;
    }

    .mpsa-anatomy__title {
        font-size: 26px;
    }

    .mpsa-anatomy__experience {
        grid-template-columns: 1fr;
        grid-template-areas:
            "visual"
            "panel";
    }

    .mpsa-anatomy__visual-column {
        padding: 0 14px 8px;
    }

    .mpsa-anatomy__panel {
        position: static;
        display: flex;
        flex-direction: column;
        align-self: stretch;
        gap: 10px;
        height: auto;
        max-height: none;
        padding: 14px 14px 4px;
    }

    .mpsa-anatomy__detail {
        min-height: 320px;
        max-height: none;
        margin: 0;
        overflow: visible;
        overscroll-behavior: auto;
    }

    .mpsa-anatomy__source {
        padding: 14px 18px 16px;
    }
}

@media (hover: none), (pointer: coarse) {
    .mpsa-anatomy__tooltip,
    .mpsa-anatomy__tooltip-leader {
        display: none !important;
    }

    /* The loupe caption tells the visitor to hover; on touch the caption below
     * it says the opposite, so only one of the two is shown. */
    .mpsa-anatomy__research-note {
        display: none;
    }

    .mpsa-anatomy__mobile-hint {
        display: block;
    }

    .mpsa-anatomy__brush {
        display: none;
    }

    /* No separate phone geometry: the loupe follows the reveal lens formula. */
    .mpsa-anatomy button.mpsa-anatomy__start-loupe {
        width: 150px;
    }

    .mpsa-anatomy__start-loupe-label {
        min-width: 134px;
        min-height: 32px;
        align-items: center;
        font-size: 10px;
    }

    .mpsa-anatomy button.mpsa-anatomy__marker {
        width: 44px;
        height: 44px;
    }

    .mpsa-anatomy__marker span {
        width: 12px;
        height: 12px;
        border-width: 1.5px;
    }

    .mpsa-anatomy__marker span::after {
        inset: -4px;
        border-width: 1.5px;
    }
}

@media (max-width: 760px) {
    .mpsa-anatomy {
        width: 100%;
        margin: 0 auto;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: 14px;
    }

    .mpsa-anatomy__header {
        margin: 0;
        padding: 16px 14px 14px;
        border-radius: 0;
    }

    .mpsa-anatomy__title {
        font-size: 24px;
    }

    .mpsa-anatomy__experience {
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .mpsa-anatomy__visual-column {
        padding-right: 0;
        padding-left: 0;
    }

    .mpsa-anatomy__stage {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .mpsa-anatomy__mobile-hint {
        margin: 8px 16px 0;
        font-size: 11.5px;
        line-height: 1.5;
    }

    .mpsa-anatomy__panel {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .mpsa-anatomy__progress-wrap {
        margin: 0 16px;
        padding: 12px 14px;
        border: 1px solid rgba(199, 154, 87, 0.28);
        border-radius: var(--mpsa-radius);
        background: linear-gradient(145deg, rgba(247, 239, 226, 0.76), rgba(255, 255, 255, 0.96));
        box-shadow: 0 5px 16px rgba(69, 49, 30, 0.055);
    }

    .mpsa-anatomy__detail {
        min-height: clamp(260px, 72vw, 340px);
        max-height: none;
        margin: 0;
        padding: 18px 16px 20px;
        overflow: visible;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        overscroll-behavior: auto;
    }

    .mpsa-anatomy__detail-latin + .mpsa-anatomy__detail-block {
        margin-top: 14px;
    }

    .mpsa-anatomy__detail-extra {
        gap: 10px;
        margin-top: 12px;
        padding-top: 12px;
    }

    .mpsa-anatomy__marker span {
        width: 12px;
        height: 12px;
        border-width: 1.5px;
    }

    .mpsa-anatomy__marker span::after {
        inset: -4px;
        border-width: 1.5px;
    }

    .mpsa-anatomy__source {
        margin: 12px 0 0;
        padding: 14px 18px 16px;
        border-radius: 0;
        text-align: left;
    }
}

@media (max-width: 1100px) and (orientation: portrait) and (pointer: coarse),
       (max-width: 1100px) and (orientation: portrait) and (hover: none) {
    .mpsa-anatomy__orientation-hint {
        display: flex;
        gap: 8px;
        align-items: center;
        margin: 7px 16px 0;
        color: var(--mpsa-grey);
        font-size: 11px;
        line-height: 1.4;
    }

    .mpsa-anatomy__orientation-hint svg {
        flex: 0 0 auto;
        width: 21px;
        height: 21px;
        overflow: visible;
        fill: none;
        stroke: var(--mpsa-gold-dark);
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}

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

    .mpsa-anatomy__highlight.is-visible {
        opacity: 0.92;
        animation: none !important;
        transform: none !important;
    }

    .mpsa-anatomy__highlight.is-visible.is-pulsing {
        animation: none !important;
    }

    /* The blanket rule above cuts the breathing animation after one 0.01 ms
     * pass, which would leave the ring frozen at its 94% keyframe. */
    .mpsa-anatomy__marker:hover span::after,
    .mpsa-anatomy__marker:focus-visible span::after,
    .mpsa-anatomy__marker.is-hovered span::after,
    .mpsa-anatomy__marker.is-active span::after {
        animation: none !important;
        transform: scale(1);
    }

    .mpsa-anatomy__start-loupe-body {
        animation: none !important;
        transform: none;
    }

    .mpsa-anatomy__start-loupe-shadow {
        opacity: 0.7;
        animation: none !important;
        transform: scale(1);
    }

    .mpsa-anatomy__start-loupe-echo {
        opacity: 0.5;
        animation: none !important;
        transform: scale(1.12);
    }

}

@media (forced-colors: active) {
	.mpsa-anatomy.has-organ-mask .mpsa-anatomy__hotspots {
		display: block;
	}

	.mpsa-anatomy__highlight,
	.mpsa-anatomy__desaturate,
	.mpsa-anatomy__contour {
		display: none;
	}

	.mpsa-anatomy__reveal-edge {
		display: none;
	}

    .mpsa-anatomy__stage,
    .mpsa-anatomy__progress-wrap,
    .mpsa-anatomy__detail {
        border: 1px solid CanvasText;
    }

    .mpsa-anatomy__hotspot-shape {
        fill: transparent !important;
        stroke: Highlight !important;
        stroke-opacity: 1 !important;
        filter: none !important;
    }

    .mpsa-anatomy__brush {
        border-color: Highlight;
        background: Canvas;
    }

    .mpsa-anatomy__lens {
        border-color: Highlight;
        background: Canvas;
        box-shadow: none;
    }

    .mpsa-anatomy__start-loupe-glass,
    .mpsa-anatomy__start-loupe-label {
        border-color: Highlight;
        color: CanvasText;
        background: Canvas;
        box-shadow: none;
    }

    .mpsa-anatomy__marker span {
        border-color: Canvas;
        background: Highlight;
        box-shadow: 0 0 0 2px Highlight;
    }
}

@media print {
    .mpsa-anatomy__image--cover,
    .mpsa-anatomy__scratch,
    .mpsa-anatomy__reveal-edge,
    .mpsa-anatomy__hotspots,
    .mpsa-anatomy__markers,
    .mpsa-anatomy__brush,
    .mpsa-anatomy__start-loupe,
    .mpsa-anatomy__tooltip-leader,
    .mpsa-anatomy__research-note,
    .mpsa-anatomy__progress-wrap,
    .mpsa-anatomy__mobile-hint,
    .mpsa-anatomy__orientation-hint {
        display: none !important;
    }

    .mpsa-anatomy__stage,
    .mpsa-anatomy__detail {
        border-color: #d9d0c4;
        box-shadow: none;
    }
}

/*
 * On desktop the panel mirrors the stage height. AnatomyLayout measures only
 * the stage (not the hints below it), while the detail card uses the remaining
 * space and scrolls only when its copy is longer.
 */
@media (min-width: 1101px) {
    .mpsa-anatomy__panel {
        display: flex;
        flex-direction: column;
    }

    .mpsa-anatomy__panel .mpsa-anatomy__detail {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* A right-hand shop sidebar can narrow the shortcode even on a wide
     * viewport. AnatomyLayout measures the component itself and applies the
     * same calm stage-first stack used by the Terrarium Calculator. */
    .mpsa-anatomy.is-narrow .mpsa-anatomy__experience {
        grid-template-columns: 1fr;
        grid-template-areas:
            "visual"
            "panel";
    }

    .mpsa-anatomy.is-narrow .mpsa-anatomy__header {
        padding: 17px 18px 15px;
    }

    .mpsa-anatomy.is-narrow .mpsa-anatomy__title {
        font-size: 26px;
    }

    .mpsa-anatomy.is-narrow .mpsa-anatomy__visual-column {
        padding: 0 14px 8px;
    }

    .mpsa-anatomy.is-narrow .mpsa-anatomy__panel {
        position: static;
        align-self: stretch;
        gap: 10px;
        height: auto;
        max-height: none;
        padding: 14px 14px 4px;
    }

    .mpsa-anatomy.is-narrow .mpsa-anatomy__panel .mpsa-anatomy__detail {
        flex: 0 0 auto;
        min-height: 320px;
        max-height: none;
        margin: 0;
        overflow: visible;
        overscroll-behavior: auto;
    }

    .mpsa-anatomy.is-narrow .mpsa-anatomy__source {
        padding: 14px 18px 16px;
    }
}

/*
 * Audio guide.
 *
 * The button and the single gold pointer deliberately mirror the terrarium
 * calculator guide, so both educational tools use one visual language.
 */
.mpsa-anatomy.is-guide-playing .mpsa-anatomy__stage {
    cursor: default;
    pointer-events: none;
}

/*
 * Keep the guide purely presentational. The untouched outer image fills every
 * transparent research aperture in the scratch canvas while narration plays,
 * so the model looks completely closed without repainting the canvas, clearing
 * discoveries or changing the current research state. Removing the class
 * restores the exact previous research state.
 */
.mpsa-anatomy.is-guide-playing .mpsa-anatomy__image--cover {
    opacity: 1;
}

.mpsa-anatomy.is-guide-playing .mpsa-anatomy__reveal-edge,
.mpsa-anatomy.is-guide-playing .mpsa-anatomy__markers,
.mpsa-anatomy.is-guide-playing .mpsa-anatomy__brush,
.mpsa-anatomy.is-guide-playing .mpsa-anatomy__tooltip,
.mpsa-anatomy.is-guide-playing .mpsa-anatomy__tooltip-leader {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.mpsa-anatomy__progress-actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.mpsa-anatomy button.mpsa-anatomy__guide {
    appearance: none;
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    justify-content: center;
    align-items: center;
    min-width: 0;
    min-height: 36px;
    margin: 0;
    padding: 8px 10px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mpsa-gold) 52%, #ffffff);
    border-radius: var(--mpsa-radius);
    color: var(--mpsa-chocolate);
    background: linear-gradient(110deg, #fffaf0 0%, #f4e4c6 38%, #fff7e7 52%, #ecd09d 72%, #fffaf0 100%);
    background-size: 220% 100%;
    box-shadow: 0 2px 7px rgba(84, 57, 32, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

.mpsa-anatomy button.mpsa-anatomy__guide[hidden] {
    display: none;
}

.mpsa-anatomy button.mpsa-anatomy__guide > * {
    position: relative;
    z-index: 1;
}

.mpsa-anatomy button.mpsa-anatomy__guide::after {
    position: absolute;
    top: -45%;
    bottom: -45%;
    left: -32%;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
    content: "";
    pointer-events: none;
    transform: translateX(-190%) skewX(-18deg);
    animation: mpsa-guide-sheen 5.8s ease-in-out infinite;
}

.mpsa-anatomy button.mpsa-anatomy__guide:hover:not(:disabled),
.mpsa-anatomy button.mpsa-anatomy__guide:focus-visible {
    border-color: color-mix(in srgb, var(--mpsa-gold-dark) 62%, #ffffff);
    color: var(--mpsa-chocolate);
    background-color: transparent;
    box-shadow: 0 5px 13px rgba(84, 57, 32, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    filter: saturate(1.04);
    transform: translateY(-1px);
}

.mpsa-anatomy button.mpsa-anatomy__guide:focus-visible {
    outline: 2px solid var(--mpsa-gold-dark);
    outline-offset: 3px;
}

.mpsa-anatomy button.mpsa-anatomy__guide:focus:not(:focus-visible) {
    outline: 0;
}

.mpsa-anatomy button.mpsa-anatomy__guide:active:not(:disabled) {
    color: var(--mpsa-chocolate);
    transform: translateY(0);
}

.mpsa-anatomy button.mpsa-anatomy__guide:disabled {
    opacity: 0.62;
    cursor: not-allowed;
    transform: none;
}

.mpsa-anatomy button.mpsa-anatomy__guide:disabled::after,
.mpsa-anatomy button.mpsa-anatomy__guide.is-completed::after {
    opacity: 0;
    animation: none;
}

.mpsa-anatomy button.mpsa-anatomy__guide.is-playing {
    border-color: color-mix(in srgb, var(--mpsa-gold-dark) 62%, #ffffff);
    color: var(--mpsa-chocolate);
    background: linear-gradient(110deg, #f9edd8, #ecd09d 48%, #f8e8ca);
}

.mpsa-anatomy__guide-speaker {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(145deg, var(--mpsa-gold), var(--mpsa-gold-dark));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 5px rgba(121, 79, 31, 0.18);
}

.mpsa-anatomy__guide-speaker svg {
    width: 13px;
    height: 13px;
    overflow: visible;
}

.mpsa-anatomy__guide-speaker path {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mpsa-anatomy__guide-speaker path + path {
    fill: none;
}

.mpsa-anatomy .mpsa-anatomy__progress-actions .mpsa-anatomy__reset {
    flex: 1 1 auto;
    text-align: right;
}

@keyframes mpsa-guide-sheen {
    0%, 68% {
        opacity: 0;
        transform: translateX(-190%) skewX(-18deg);
    }
    72% {
        opacity: 0.85;
    }
    88%, 100% {
        opacity: 0;
        transform: translateX(470%) skewX(-18deg);
    }
}

.mpsa-anatomy__guide-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}

.mpsa-anatomy__guide-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.mpsa-anatomy__guide-svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mpsa-anatomy__guide-path {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 1px 4px rgba(151, 100, 34, 0.32));
}

.mpsa-anatomy__guide-path.is-drawing {
    animation: mpsa-guide-draw 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) 0.42s both;
}

.mpsa-anatomy__guide-overlay.is-paused .mpsa-anatomy__guide-path.is-drawing {
    animation-play-state: paused;
}

@keyframes mpsa-guide-draw {
    from {
        opacity: 0.42;
        stroke-dashoffset: 1;
    }
    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

.mpsa-anatomy__guide-pointer {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 21px;
    height: 21px;
    border: 1px solid rgba(122, 79, 27, 0.72);
    border-radius: 50%;
    opacity: 0.97;
    background: radial-gradient(circle at 34% 29%, #fff9e9 0 11%, #e5bf79 17%, #c89548 58%, #976323 100%);
    box-shadow: 0 2px 7px rgba(91, 55, 17, 0.26), 0 0 12px rgba(199, 154, 87, 0.22);
    transform: translate(-50%, -50%);
    transition: left 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), top 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}

.mpsa-anatomy__guide-pointer-glint {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0.74;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 5px rgba(255, 248, 220, 0.86);
}

.mpsa-anatomy__guide-overlay.is-visible .mpsa-anatomy__guide-pointer {
    will-change: left, top;
}

.mpsa-anatomy__guide-overlay.is-visible:not(.is-paused) .mpsa-anatomy__guide-pointer {
    animation: mpsa-guide-breathe 1.9s ease-in-out infinite;
}

.mpsa-anatomy__guide-overlay.is-visible:not(.is-paused) .mpsa-anatomy__guide-pointer-glint {
    animation: mpsa-guide-glint 1.9s ease-in-out infinite;
}

.mpsa-anatomy__guide-overlay.is-tracing .mpsa-anatomy__guide-pointer {
    animation: none;
    transition: none;
}

@keyframes mpsa-guide-breathe {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 0 2px 7px rgba(91, 55, 17, 0.26), 0 0 10px rgba(199, 154, 87, 0.18);
    }
    50% {
        filter: brightness(1.09);
        box-shadow: 0 2px 8px rgba(91, 55, 17, 0.3), 0 0 17px rgba(199, 154, 87, 0.4);
    }
}

@keyframes mpsa-guide-glint {
    0%, 100% {
        opacity: 0.48;
    }
    45%, 60% {
        opacity: 1;
    }
}

@media (max-width: 760px) {
    .mpsa-anatomy .mpsa-anatomy__progress-actions button.mpsa-anatomy__guide,
    .mpsa-anatomy .mpsa-anatomy__progress-actions button.mpsa-anatomy__reset {
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .mpsa-anatomy__progress-copy {
        justify-content: flex-start;
    }

    .mpsa-anatomy__progress-copy > span {
        display: none;
    }

    .mpsa-anatomy__progress-copy strong {
        text-align: left;
    }

    .mpsa-anatomy__progress-actions {
        gap: 7px;
        align-items: center;
    }

    .mpsa-anatomy button.mpsa-anatomy__guide {
        gap: 6px;
        padding-right: 8px;
        padding-left: 8px;
        font-size: 11px;
    }

    .mpsa-anatomy .mpsa-anatomy__progress-actions .mpsa-anatomy__reset {
        font-size: 10px;
        letter-spacing: 0.06em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mpsa-anatomy__guide-path.is-drawing {
        opacity: 1;
        stroke-dashoffset: 0;
    }

    .mpsa-anatomy__guide-pointer,
    .mpsa-anatomy__guide-pointer-glint {
        animation: none !important;
    }
}

@media (forced-colors: active) {
    .mpsa-anatomy__guide-path {
        stroke: Highlight !important;
        filter: none;
    }

    .mpsa-anatomy__guide-pointer,
    .mpsa-anatomy__guide-speaker {
        border: 1px solid CanvasText;
        color: HighlightText;
        background: Highlight;
        box-shadow: none;
    }
}

@media print {
    .mpsa-anatomy__guide-overlay,
    .mpsa-anatomy__guide {
        display: none !important;
    }
}