/* assets/main.css */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: sans-serif;
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
  line-height: 1.6;
}

/* Links */
a { color: #0366d6; }
header h1 a { text-decoration: none; color: inherit; }

/* Media should not overflow */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Code blocks: allow horizontal scroll instead of breaking the layout */
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* Long URLs/words should wrap instead of forcing horizontal scrolling */
p, li {
  overflow-wrap: anywhere;
}

/* Keep your responsive video embed */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 480px) {
  body { padding: 0.85rem; }
  header h1 { font-size: 1.4rem; }
}

mjx-container { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; }