* {  border-box; margin: 0; padding: 0; }

body {
  font-family: monospace;
  background: #fff;
  color: #111;
  max-width: 760px;
  margin: 40px auto;
  padding: 0 24px 60px;
}

.back { display: inline-block; margin-bottom: 24px; color: #2d7a2d; text-decoration: none; font-size: 13px; }
h1 { font-size: 20px; color: #2d7a2d; margin-bottom: 32px; }
h2 { font-size: 15px; margin: 32px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 6px; }

.questions { display: flex; flex-direction: column; gap: 16px; }
.qa { padding: 16px; background: #f9f9f9; border-left: 3px solid #2d7a2d; }
.q  { font-weight: bold; margin-bottom: 8px; }

pre {
  background: #111;
  color: #7fff7f;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 13px;
  overflow-x: auto;
}

.demo-zone {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  flex-wrap: wrap;
}

.btn {
  position: relative;
  overflow: hidden;
  padding: 12px 28px;
  background: transparent;
  border: 2px solid #2d7a2d;
  color: #2d7a2d;
  font-family: monospace;
  font-size: 14px;
  cursor: pointer;
  transition: color .3s, transform .2s;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #2d7a2d;
  transform: translateX(-100%);
  transition: transform .3s ease;
  z-index: 0;
}

.btn span { position: relative; z-index: 1; }

.btn:hover { color: #fff; transform: translateY(-2px); }
.btn:hover::before { transform: translateX(0); }

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #ddd;
  border-top-color: #2d7a2d;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.dots { display: flex; gap: 6px; }

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2d7a2d;
  animation: bounce 1.2s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3) { animation-delay: .4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .5; }
  40%           { transform: scale(1);  opacity: 1;  }
}

.pulse {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2d7a2d;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1;  }
  50%       { transform: scale(1.5); opacity: .4; }
}