/* ══════════════════════════════════════════════════════
   AI & CODE
   ══════════════════════════════════════════════════════ */
.ai-section {
  background: var(--paper-warm);
  border-top: 2px solid var(--line);
}

.ai-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-3xl);
  align-items: start;
}

.ai-copy .body-lg { margin-bottom: var(--sp-lg); }
.ai-copy > p { margin-bottom: var(--sp-lg); }

.ai-principles {
  display: grid;
  gap: var(--sp-lg);
  margin-top: var(--sp-xl);
}

.ai-p {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--sp-md);
  align-items: start;
  padding: var(--sp-md) var(--sp-lg);
  background: var(--paper);
  border: var(--border-line);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--rose);
  transition: transform var(--ease-slow), box-shadow var(--ease-base);
}
.ai-p:hover {
  transform: translateX(4px);
  box-shadow: -4px 0 0 var(--rose);
}

.aip-mark {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--rose);
  line-height: 1.4;
}

.ai-p strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-2xs);
}
.ai-p p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Terminal */
.ai-terminal {
  border: var(--border-ink);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(0.8deg);
  background: var(--ink-soft);
}

.at-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  background: rgb(0 0 0 / 30%);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.at-dot { width: 11px; height: 11px; border-radius: 50%; }
.d-red    { background: #ff5f57; }
.d-yellow { background: #febc2e; }
.d-green  { background: #28c840; }
.at-title {
  margin-left: var(--sp-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgb(255 255 255 / 35%);
  letter-spacing: 0.05em;
}

.at-body {
  padding: var(--sp-lg) var(--sp-xl);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.at-line {
  display: flex;
  gap: var(--sp-xs);
  line-height: 2;
}
.at-gap { height: var(--sp-sm); }
.at-prompt { color: var(--rose); font-weight: 700; }
.at-cmd { color: rgb(255 255 255 / 90%); }
.at-arg { color: var(--orange-mid); }
.at-out { color: rgb(255 255 255 / 45%); padding-left: 1.2rem; }
.at-rose { color: var(--rose-mid) !important; }
.at-orange { color: var(--orange-mid) !important; }
.at-blink {
  color: var(--rose);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.ai-hand-note {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-md);
  color: var(--rose);
  font-family: var(--font-hand);
  font-size: 1rem;
  transform: rotate(-1deg);
  padding-left: var(--sp-md);
}
.curve-arrow { width: 3.5rem; height: 1.5rem; flex-shrink: 0; }