/* ===== Responsive Breakpoints ===== */
@media (max-width: 1024px) {
  .page-layout { flex-direction: column; }
  .content-area { padding: 20px 16px !important; width: 100%; max-width: none !important; box-sizing: border-box; overflow-x: hidden; }
  .tutorial-container .content-area .example-box { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); }
  .example-box:not(.floating-editor) { border-radius: 0; }
  .navbar ul { display: none; }
  .editor-wrap { flex-direction: column; }
}
@media (max-width: 480px) {
  h1 { font-size: 22px; }
  .subject-grid { grid-template-columns: 1fr 1fr; }
}