.kailab-mechanism-animation {

--kma-text: #30465f;
--kma-deep: #17375d;

--kma-cell: #eef5fb;
--kma-cell-line: #a8bdd8;

--kma-envelope: #e8edf8;
--kma-envelope-line: #b7c8e4;

--kma-h: #789bd3;
--kma-h-dark: #6589c5;

--kma-f: #d5a8dc;
--kma-f-dark: #bc8cc7;

--kma-rnp: #9885be;

position: relative;

/* デスクトップでは本文幅の約60% */
width: 70%;
max-width: 100%;

/* 中央寄せ */
margin: 2.2rem auto;

/* 少し凸に見せるための土台 */
padding: 24px;
border-radius: 30px;

background: linear-gradient(145deg, #fbfdff 0%, #f1f6fc 100%);
box-shadow:
  14px 14px 34px rgba(109, 132, 163, .10),
  -12px -12px 30px rgba(255, 255, 255, .95);

color: var(--kma-text);
}

/* ================================
HEADER
================================ */

.kailab-mechanism-animation__header {
margin-bottom: 24px;
}

.kailab-mechanism-animation__type {

display: block;

margin-bottom: 8px;

font-size: .72rem;
font-weight: 700;

letter-spacing: .14em;

color: #8194ad;
}

.kailab-mechanism-animation__title {

margin: 0 0 10px;

font-size: clamp(1.5rem, 3vw, 2.2rem);

color: var(--kma-deep);
}

.kailab-mechanism-animation__intro {

max-width: 720px;

margin: 0;

line-height: 1.8;
}

/* ================================
STAGE
================================ */

.kailab-mechanism-animation__stage {

position: relative;
overflow: hidden;

border-radius: 24px;

background: linear-gradient(145deg, #f8fbfe 0%, #f2f7fd 100%);

box-shadow:
  inset 7px 7px 16px rgba(153, 172, 198, .12),
  inset -7px -7px 16px rgba(255, 255, 255, .96),
  6px 6px 18px rgba(96, 122, 157, .06);

border: 1px solid rgba(220, 230, 241, .85);
}

.kma-svg {

display: block;

width: 100%;
height: auto;
}

/* ================================
STAGE TEXT
================================ */

.kma-stage-title {

font-size: 24px;
font-weight: 700;

fill: #274f81;
}

.kma-stage-desc {

font-size: 15px;

fill: #647c98;
}

/* ================================
CELL
================================ */

.kma-cell-body {
fill: var(--kma-cell);
}

.kma-membrane-top,
.kma-membrane-bottom {

fill: none;

stroke: var(--kma-cell-line);

stroke-width: 5;

stroke-linecap: round;
stroke-linejoin: round;
}

/* ================================
RECEPTOR
================================ */

.kma-receptor path {

fill: none;

stroke: #93a8ca;

stroke-width: 6;

stroke-linecap: round;
}

.kma-receptor circle {
fill: #b8c9e5;
}

/* ================================
VIRAL ENVELOPE
================================ */

.kma-envelope-outer {

fill: var(--kma-envelope);

stroke: var(--kma-envelope-line);

stroke-width: 6;

stroke-linejoin: round;
}

.kma-envelope-inner {

fill: #f8f9fc;

stroke: #d5e0f1;

stroke-width: 4;

stroke-linejoin: round;
}

/* ================================
H
================================ */

.kma-h-stem {

fill: none;

stroke: var(--kma-h-dark);

stroke-width: 9;

stroke-linecap: round;
}

.kma-h-head {

fill: var(--kma-h);

stroke: var(--kma-h-dark);

stroke-width: 2;
}

.kma-h-head-simple {
fill: var(--kma-h);
}

/* ================================
F
================================ */

.kma-f-anchor {
fill: var(--kma-f-dark);
}

.kma-f-stem {

fill: none;

stroke: var(--kma-f-dark);

stroke-width: 9;

stroke-linecap: round;
}

.kma-f-head,
.kma-f-head-small {

fill: var(--kma-f);

stroke: var(--kma-f-dark);

stroke-width: 2;
}

.kma-f-peptide {

fill: none;

stroke: #cb89bd;

stroke-width: 5;

stroke-linecap: round;
}

/* ================================
RNP
================================ */

.kma-rnp-path {

fill: none;

stroke: var(--kma-rnp);

/* 前回より太く */
stroke-width: 24;

stroke-linecap: round;
stroke-linejoin: round;
}

/* ================================
FUSION
================================ */

.kma-fusion-glow {

fill: rgba(164, 199, 236, .16);

opacity: 0;
}

.kma-fusion-wall {

fill: none;

stroke: var(--kma-cell-line);

stroke-width: 7;

stroke-linecap: round;
stroke-linejoin: round;
}

/* ================================
BINDING
================================ */

.kma-binding-halo {

fill: rgba(120, 155, 211, .15);

stroke: rgba(120, 155, 211, .42);

stroke-width: 2;

opacity: 0;
}

/* ================================
META
================================ */

.kailab-mechanism-animation__meta {
padding: 22px 6px 0;
}

.kailab-mechanism-animation__dots {

display: flex;

gap: 8px;

margin-bottom: 12px;
}

.kailab-mechanism-animation__dots span {

width: 8px;
height: 8px;

border-radius: 50%;

background: #d8e1ed;
}

.kailab-mechanism-animation__dots span.is-active {
background: #7197ca;
}

.kailab-mechanism-animation__caption {

margin: 0;

font-size: .95rem;

line-height: 1.75;

color: #60758e;
}

/* ================================
CONTROLS
================================ */

.kailab-mechanism-animation__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.kailab-mechanism-animation__controls button {

appearance: none;
-webkit-appearance: none;
border: 0;

padding: 11px 20px;
min-width: 7.2em;

border-radius: 999px;

background: linear-gradient(145deg, #f8fbff 0%, #eaf1f8 100%);
color: #496684;

cursor: pointer;
font: inherit;
font-weight: 600;
letter-spacing: .01em;

box-shadow:
  7px 7px 16px rgba(133, 154, 182, .18),
  -7px -7px 16px rgba(255, 255, 255, .95);

transition:
  transform .16s ease,
  box-shadow .16s ease,
  color .16s ease,
  background .16s ease;
}

.kailab-mechanism-animation__controls button:hover {
  transform: translateY(-1px);
  color: #3e5d7f;
  box-shadow:
    9px 9px 18px rgba(133, 154, 182, .20),
    -8px -8px 18px rgba(255, 255, 255, .98);
}

.kailab-mechanism-animation__controls button:active {
  transform: translateY(0);
  box-shadow:
    inset 5px 5px 12px rgba(133, 154, 182, .18),
    inset -5px -5px 12px rgba(255, 255, 255, .96);
}

.kailab-mechanism-animation__controls button:focus-visible {
  outline: 2px solid rgba(121, 155, 202, .45);
  outline-offset: 3px;
}

@media (max-width: 640px) {

  .kailab-mechanism-animation {
    width: 100%;
    padding: 18px;
    border-radius: 24px;
    margin: 1.8rem auto;
  }

.kailab-mechanism-animation__stage {
    border-radius: 18px;
}

.kma-stage-title {
    font-size: 27px;
}

.kma-stage-desc {
    font-size: 18px;
}

.kailab-mechanism-animation__controls button {
    width: 100%;
  }

}

@media (prefers-reduced-motion: reduce) {

.kailab-mechanism-animation * {
animation: none !important;
transition: none !important;
}

}