body {
  background: #181c24;
  color: #e0e0e0;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', 'monospace', monospace;
  margin: 0;
  min-height: 100vh;
}

.navbar {
  background: #23283b;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 56px;
  box-shadow: 0 2px 8px #0004;
  width: 100%;
  box-sizing: border-box;
  position: sticky; /* Make navbar stick to top */
  top: 0; /* Stick to the top */
  z-index: 100; /* Ensure it's above other content */
}

.navbar nav {
  margin-left: 32px;
  flex: 1 1 auto;
  align-items: center; /* Vertically center nav items */
  display: flex; /* Ensure align-items works */
}

.logo-img {
  height: 36px;
  vertical-align: middle;
  margin-right: 12px;
  border-radius: 6px;
}
.navbar nav a {
  color: #e0e0e0;
  text-decoration: none;
  margin-right: 24px;
  font-size: 1.1em;
  transition: color 0.2s;
}
.navbar nav a:hover, .navbar nav a.active {
  color: #ba1923;
}

.github-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 16px;
  transition: opacity 0.15s;
  opacity: 0.85;
  flex: 0 0 auto;
  width: auto;
  min-width: unset;
  max-width: 48px;
  box-sizing: content-box;
}
.github-btn:hover,
.github-btn:focus {
  opacity: 1;
}
.github-btn img.github-icon {
  height: 20px;
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  display: block;
}

/* Center the container and keep it at a fixed max width */
.container {
  max-width: 700px;
  width: 100%;
  margin: 40px auto 0 auto;
  background: #23283b;
  border-radius: 12px;
  box-shadow: 0 4px 32px #000a;
  padding: 32px 32px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

h2 {
  text-align: center;
  font-weight: 700;
  margin-bottom: 24px;
  color: #ba1923;
  letter-spacing: 1px;
}
/* Shared styles for both input and output */
#code, #output {
  width: 100%;
  min-height: 300px;
  padding: 12px;
  background: #181c24;
  color: #e0e0e0;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  font-size: 1.1em;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 2px 8px #0004;
  box-sizing: border-box;
  white-space: pre-wrap;
  margin: 0 0 16px 0;
  overflow: auto;
}
/* Input-specific */
#code {
  resize: vertical;
  outline: none;
  caret-color: #ba1923;
}
#code:focus {
  border-color: #ba1923;
}
.button-row {
  margin-bottom: 16px;
  text-align: right;
}
button {
  background: #ba1923;
  color: #23283b;
  border: none;
  border-radius: 6px;
  padding: 8px 22px;
  font-size: 1em;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
button:hover {
  background: #d62d2d;
}
/* Error/success states */
.error { color: #ff5555; font-weight: bold; }
.success { color: #50fa7b; font-weight: bold; }
/* CodeMirror customization */
.CodeMirror {
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  font-size: 1.1em;
  border: 1px solid #333;
  border-radius: 8px;
  margin-bottom: 16px;
  background: #181c24 !important;
}

/* Input editor specific */
#code + .CodeMirror {
  height: 180px !important;
}

/* Output editor specific */
#output + .CodeMirror {
  min-height: 50px;
  height: auto !important;
}

/* Error styling for output */
.error-output.CodeMirror {
  border-color: #ff5555;
}

/* Common theme overrides */
.cm-s-dracula .cm-comment, .cm-s-monokai .cm-comment { color: #6A9955 !important; font-style: italic !important; }
.cm-s-dracula .cm-keyword, .cm-s-monokai .cm-keyword { color: #569CD6 !important; }
.cm-s-dracula .cm-keyword-control, .cm-s-monokai .cm-keyword-control { color: #C678DD !important; }
.cm-s-dracula .cm-builtin, .cm-s-monokai .cm-builtin { color: #569CD6 !important; }
.cm-s-dracula .cm-function, .cm-s-monokai .cm-function { color: #DCDCAA !important; }
.cm-s-dracula .cm-variable, .cm-s-monokai .cm-variable { color: #9CDCFE !important; }
.cm-s-dracula .cm-property, .cm-s-monokai .cm-property { color: #FFB86C !important; font-weight: 600; }
.cm-s-dracula .cm-type, .cm-s-monokai .cm-type { color: #4EC9B0 !important; }
.cm-s-dracula .cm-number, .cm-s-monokai .cm-number { color: #B5CEA8 !important; }
.cm-s-dracula .cm-string, .cm-s-monokai .cm-string { color: #CE9178 !important; }
.cm-s-dracula .cm-boolean { color: #569CD6 !important; }
.cm-s-dracula .cm-constant, .cm-s-monokai .cm-constant { color: #E5C07B !important; }
.cm-s-dracula .cm-operator { color: #D4D4D4 !important; }

/* Error output styles */
.error-output {
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  white-space: pre-wrap;
  line-height: 1.5;
  background: #181c24;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ff5555;
}

.error-output span {
  font-family: inherit;
  font-size: inherit;
  white-space: pre;
}

/* ANSI color overrides for error output */
.error-output .ansi-red { color: #FF5555; font-weight: bold; }
.error-output .ansi-magenta { color: #FF79C6; font-weight: bold; }
.error-output .ansi-yellow { color: #F1FA8C; font-weight: bold; }
.error-output .ansi-blue { color: #569CD6; font-weight: bold; }
.error-output .ansi-gray { color: #6272A4; font-weight: bold; }
.error-output .ansi-green { color: #50FA7B; font-weight: bold; }
.error-output .ansi-location { color: #F8F8F2; font-weight: bold; }
.error-output .ansi-comment { color: #6A9955; font-style: italic; }
.error-output .ansi-keyword { color: #569CD6; }
.error-output .ansi-func { color: #DCDCAA; }
.error-output .ansi-control { color: #C678DD; }
.error-output .ansi-var { color: #9CDCFE; }
.error-output .ansi-type { color: #4EC9B0; }
.error-output .ansi-number { color: #B5CEA8; }
.error-output .ansi-string { color: #CE9178; }

.output-area {
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  font-size: 1.1em;
  background: #181c24;
  color: #e0e0e0;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 12px;
  margin: 0 0 16px 0;
  min-height: 180px;
  white-space: pre-wrap;
  overflow-x: auto;
  box-sizing: border-box;
}

.exec-time {
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  font-size: 0.92em;
  color: #9aa4bf;
  margin: 0 0 8px 0;
  text-align: right;
}

@media (max-width: 800px) {
  .container { max-width: 98vw; padding: 10px; }
  .CodeMirror { font-size: 1em; }
}

/* Hamburger styles */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 0;
  margin-right: 0;
  z-index: 102;
  position: static;
  padding: 0;
}
.hamburger:focus,
.hamburger:active {
  outline: none;
  background: none;
  box-shadow: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 18px;
  height: 2.5px;
  background: #ba1923;
  margin: 3px 0;
  border-radius: 2px;
  transition: background 0.18s;
}
.hamburger.active span {
  background: #ffffff;
}

/* Hide the menu-github button by default (desktop), show navbar-github */
.menu-github { display: none; }
.navbar-github { display: flex; }

/* Responsive navbar for mobile */
@media (max-width: 800px) {
  .navbar {
    flex-wrap: nowrap;
    position: sticky;
    height: 56px; /* Same height as desktop */
    justify-content: flex-start;
    align-items: center;
  }
  .logo-img {
    order: 0;
    margin-right: 0;
  }
  nav {
    order: 1;
    margin-left: 0;
    flex: unset;
  }
  .hamburger {
    display: flex;
    margin-left: auto;
    margin-right: 0;
    order: 3;
  }
  .navbar nav {
    position: fixed;
    top: 0;
    left: auto;
    right: -260px;
    width: 240px;
    height: 100vh;
    background: #23283b;
    flex-direction: column;
    align-items: flex-start;
    padding: 56px 0 8px 0;
    box-shadow: -2px 0 12px #0006;
    z-index: 100;
    display: flex;
    transition: right 0.22s cubic-bezier(0.4, 0.2, 0.2, 1);
    box-sizing: border-box;
  }

  .navbar.menu-open nav {
    right: 0;
  }

  /* Regular navbar github button */
  .navbar > .github-btn {
    display: none !important;
  }

  /* Menu github button */
  .navbar nav .github-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-bottom: none;
    z-index: 101;
  }

  .navbar:not(.menu-open) .github-btn {
    display: none !important;
  }

  .navbar nav a {
    width: 100%;
    padding: 14px 24px;
    border-bottom: 1px solid #2226;
    margin: 0;
  }
}

#exampleSelect {
  width: 100%;
  padding: 10px;
  margin-bottom: 16px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #181c24;
  color: #e0e0e0;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  font-size: 1em;
  outline: none;
  box-sizing: border-box;
}