/* New smooth scrolling and transition rules */
html {
    scroll-behavior: smooth;
}

/* Define CSS variables for consistent theming */
:root {
    --primary-color: #4F46E5;
    --secondary-color: #A855F7;
    --bg-dark: #0B1120;
    --bg-light: #F3F4F6;
    --text-dark: #1E293B;
    --text-light: #fff;
}

/* Basic reset and accessibility improvements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Removed universal transition to improve scroll performance */
    /* transition: all 0.3s ease-in-out; */
}

/* Optionally, add targeted transitions only on elements that benefit from them */
/* Example: */
button, input {
    transition: background 0.3s, border-color 0.3s;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--bg-light);
    transition: background 0.3s, color 0.3s;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

input {
  display: block;
  margin: 10px 0;
  padding: 8px;
  width: 100%;
}

button {
  padding: 10px 20px;
  margin: 5px 0;
  cursor: pointer;
}

pre {
  background: #f4f4f4;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
}