:root {
    --bg: #1e1e1e;
    --card: #252526;
    --accent: #007acc;
    --text: #d4d4d4;
    --code-bg: #1e1e1e;
    --border: #333;
  }
  body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Consolas', 'Courier New', monospace;
    margin: auto;
    padding: 20px;
    max-width: 900px;
  }
  h1, h2 {
    color: var(--accent);
  }
  .card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
  }
  pre {
    background-color: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    overflow-x: auto;
    color: #9cdcfe;
  }
  button {
    background-color: var(--accent);
    color: white;
    border: none;
    padding: 10px 16px;
    margin: 5px 0;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }
  button:hover {
    background-color: #0b7dda;
  }
  input {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background-color: #2d2d2d;
    color: var(--text);
  }
  form {
    margin-top: 10px;
  }
  #myDiv {
    background-color: #2a2a2a;
    padding: 30px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid var(--border);
  }
    note {
        display: block;
        background-color: #333;
        padding: 10px;
        border-left: 4px solid var(--accent);
        margin-bottom: 20px;
    }