@keyframes _si{from{opacity:0}to{opacity:1}}

.legacy-content .role-chips { display: flex; flex-wrap: wrap; gap: 8px; }.legacy-content .role-chip {
  padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--card);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 0.2s; color: var(--sub); font-family: inherit;
  min-height: 44px;
}.legacy-content .role-chip:hover { border-color: var(--purple); color: var(--purple); }.legacy-content .role-chip.active { background: var(--purple); border-color: var(--purple); color: white; }.legacy-content .code-panel {
  background: var(--surface-soft); border-radius: var(--radius);
  padding: 16px 18px; font-size: 13px;
  font-family: "SF Mono", "Fira Code", Menlo, monospace;
  line-height: 1.7; color: var(--muted);
  white-space: pre-wrap; overflow-x: auto;
}.legacy-content .code-panel .kw { color: var(--muted); }.legacy-content .code-panel .str { color: var(--muted); }.legacy-content .code-panel .com { color: #6c7086; }.legacy-content .fmt-row { display: flex; gap: 8px; flex-wrap: wrap; }.legacy-content .fmt-btn {
  padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--card);
  font-size: 14px; color: var(--sub); cursor: pointer;
  transition: all 0.2s; font-family: inherit;
  min-height: 44px;
}.legacy-content .fmt-btn:hover { border-color: var(--purple); color: var(--purple); }.legacy-content .fmt-btn.active { background: var(--purple); color: white; border-color: var(--purple); }.legacy-content .question-box {
  background: rgba(8,145,178,0.06); border: 1.5px solid rgba(8,145,178,0.22);
  border-radius: var(--radius); padding: 12px 16px;
  font-size: 15px; color: var(--cyan); margin-bottom: 12px;
}.legacy-content .answer-box {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
  font-size: 15px; line-height: 1.8; color: var(--text);
  white-space: pre-wrap; transition: all 0.3s;
  box-shadow: var(--shadow-card);
  min-height: 180px;
}.legacy-content .fmt-output {
  background: var(--surface-soft); border-radius: var(--radius);
  padding: 16px 18px; font-size: 13px;
  font-family: "SF Mono", "Fira Code", Menlo, monospace;
  line-height: 1.7; color: var(--muted);
  white-space: pre; overflow-x: auto;
  min-height: 180px;
}.legacy-content .insight-box {
  background: rgba(124,58,237,0.06); border: 1.5px solid rgba(124,58,237,0.2);
  border-radius: var(--radius); padding: 16px 20px;
  font-size: 15px; color: var(--text); display: flex; gap: 10px;
  margin-top: 28px; line-height: 1.7;
}.legacy-content .insight-box b { color: var(--purple); }.legacy-content .demo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }.legacy-content .demo-col-lbl {
  font-size: 12px; font-weight: 800; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--sub); margin-bottom: 8px;
}@media (max-width: 768px){.legacy-content .demo-cols { grid-template-columns: 1fr; }}