@charset "utf-8";

.prompt-demo { background: rgba(255, 255, 255, 0.03); border-radius: 12px; padding: 25px; margin: 20px 0px; }

.prompt-input { width: 100%; min-height: 120px; padding: 15px; border: 2px solid rgb(229, 231, 235); border-radius: 8px; font-size: 0.95rem; font-family: inherit; resize: vertical; margin-bottom: 15px; }

.prompt-input:focus { outline: none; border-color: rgba(147, 197, 253, 0.95); }

.prompt-output { background: rgba(255, 255, 255, 0.03); padding: 20px; border-radius: 8px; border-left: 4px solid rgb(34, 197, 94); min-height: 100px; margin-top: 15px; }

.demo-button { background: linear-gradient(135deg, rgb(102, 126, 234), rgb(118, 75, 162)); color: white; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 12px 30px; border-radius: 8px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: 0.3s; }

.demo-button:hover { transform: translateY(-2px); box-shadow: rgba(102, 126, 234, 0.4) 0px 4px 12px; }

.comparison-box { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0px; }

.bad-example { background: rgba(254, 242, 242, 0.1); padding: 20px; border-radius: 10px; border: 1px solid rgba(239, 68, 68, 0.3); }

.good-example { background: rgba(240, 253, 244, 0.1); padding: 20px; border-radius: 10px; border: 1px solid rgba(34, 197, 94, 0.3); }

@media (max-width: 768px) {
  .comparison-box { grid-template-columns: 1fr; }
}

.exercise-container { margin: 30px 0px; padding: 25px; background: rgba(255, 255, 255, 0.05); border-radius: 15px; border: 1px solid rgba(147, 197, 253, 0.3); }

.exercise-item { margin: 20px 0px; border: 1px solid rgba(147, 197, 253, 0.2); border-radius: 10px; overflow: hidden; }

.question { padding: 20px; background: rgba(59, 130, 246, 0.1); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: 0.3s; }

.question:hover { background: rgba(59, 130, 246, 0.2); }

.toggle-icon { font-size: 1.2rem; transition: transform 0.3s; }

.toggle-icon.rotated { transform: rotate(180deg); }

.answer { max-height: 0px; overflow: hidden; transition: max-height 0.3s; }

.answer.show { max-height: 2000px; }

.answer-content { padding: 20px; background: rgba(255, 255, 255, 0.03); }

.answer-content ul { margin: 10px 0px; padding-left: 20px; }

.answer-content li { margin: 8px 0px; line-height: 1.6; }

.answer-content code { background: rgba(0, 0, 0, 0.3); padding: 2px 6px; border-radius: 4px; font-family: "Courier New", monospace; }