/* ...existing code... */
:root {
  --bg-main: #101613;
  --bg-panel: #181f1a;
  --green-primary: #00ff70;
  --green-secondary: #00913a;
  --green-accent: #005c23;
  --white: #e5ffe5;
}
body {
  background: var(--bg-main);
  color: var(--green-primary);
  font-family: 'Fira Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
}
.retro-border {
  border: 1.5px solid #00ff41;
  border-radius: 0;
  box-shadow: 0 0 0 1px #003b1a;
}
.retro-border-outer {
  border: 3px solid #00c932;
  border-radius: 0;
  box-shadow: 0 0 12px 2px #00c932, 0 0 32px 4px #003b1a;
  background: #101510;
  /* Remove animation for steady glow */
}

.retro-border-inner-none {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.retro-border-inner {
  border: 2px solid #00ff41;
  border-radius: 0;
  box-shadow: 0 0 0 1px #003b1a;
  background: #101510;
}

.retro-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--green-primary) var(--bg-main);
}
.retro-scroll::-webkit-scrollbar {
  width: 8px;
  background: var(--bg-main);
}
.retro-scroll::-webkit-scrollbar-thumb {
  background: var(--green-primary);
}
a {
  color: var(--green-primary);
  text-decoration: underline;
  transition: color 0.2s, background 0.2s;
}
a:hover {
  color: var(--bg-main);
  background: var(--green-primary);
}
.terminal-bar {
  background: var(--bg-panel);
  color: var(--green-secondary);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-bottom: 2px solid var(--green-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.1em;
}
.prompt {
  color: var(--green-primary);
  font-weight: bold;
  margin-right: 0.5em;
}
/* Tree nav styles for web component */
tree-nav {
  display: block;
  border-right: 3px solid #00913a;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  background-clip: padding-box;
  box-shadow: 0 0 0 2px #101613;
}
@media (max-width: 768px) {
  main.retro-border-outer {
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
  }
  tree-nav {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    border-bottom: 2px solid #00c932;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0;
  }
  section.retro-border-inner-none {
    max-height: 100dvh !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  .retro-scroll {
    overflow-y: auto;
    max-height: calc(100dvh - 48px) !important;
  }
}
/* ...existing code... */