:root {
  --rosewater: #dc8a78;
  --flamingo: #dd7878;
  --pink: #ea76cb;
  --mauve: #8839ef;
  --red: #d20f39;
  --maroon: #e64553;
  --peach: #fe640b;
  --yellow: #df8e1d;
  --green: #40a02b;
  --teal: #179299;
  --sky: #04a5e5;
  --sapphire: #209fb5;
  --blue: #1e66f5;
  --lavender: #7287fd;
  --text: #4c4f69;
  --subtext1: #5c5f77;
  --subtext0: #6c6f85;
  --overlay2: #7c7f93;
  --overlay1: #8c8fa1;
  --overlay0: #9ca0b0;
  --surface2: #acb0be;
  --surface1: #bcc0cc;
  --surface0: #ccd0da;
  --base: #eff1f5;
  --mantle: #e6e9ef;
  --crust: #dce0e8;
}

body {
  background: var(--base);
  color: var(--text);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: var(--base);
}

.terminal {
  background: var(--crust);
  border-radius: 10px;
  width: 600px;
  max-width: 90%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  font-family: monospace;
  overflow: hidden;
}

.terminal-header {
  background: var(--mantle);
  padding: 10px;
  display: flex;
  gap: 8px;
}

.circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.red {
  background-color: var(--red);
}

.yellow {
  background-color: var(--yellow);
}

.green {
  background-color: var(--green);
}

.terminal-body {
  padding: 20px;
  color: var(--text);
  background: var(--base);
}