:root{
  color-scheme: dark;

  /* Dark mode (default) */
  --bg:#0B0F14;
  --text:#F2F2F2;
  --muted:rgba(242,242,242,.72);
  --border:rgba(242,242,242,.14);
  --bar:rgba(255,255,255,.04);
  --shadow:rgba(0,0,0,.35);

  --body-font:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

  /* Spacing defaults (dark mode) */
  --letter-spacing-body:0.2px;
  --letter-spacing-title:0.2px;
}

/* Light mode overrides */
body.light{
  color-scheme: light;

  --bg:#ffffff;
  --text:#1612d3;
  --muted:#1612d3;
  --border:rgba(22,18,211,.25);
  --bar:rgba(22,18,211,.06);
  --shadow:rgba(0,0,0,.08);

  --body-font:"Times New Roman", Times, serif;

  /* Your updated spacing request */
  --letter-spacing-title:-0.72px;
  --letter-spacing-body:-0.62px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body-font);
  letter-spacing:var(--letter-spacing-body);
  transition: background .35s ease, color .35s ease;
}

.wrap{
  width:min(760px,92vw);
  padding:56px 0;
}

.top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

h1{
  margin:0;
  font-weight:650;
  font-size:clamp(28px,4vw,44px);
  letter-spacing: var(--letter-spacing-title);
}

.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:12px;

  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  padding:8px 10px 8px 12px;
  border-radius:999px;

  font-size:14px;
  cursor:pointer;
  transition: background .25s ease, border-color .25s ease, transform .15s ease;
  white-space:nowrap;
}

.theme-toggle:hover{
  background:var(--bar);
}

.theme-toggle:active{
  transform: translateY(1px);
}

.theme-toggle__label{
  line-height:1;
}

/* Smaller Apple-style switch */
.theme-toggle__switch{
  width: 40px;
  height: 24px;
  border-radius: 999px;
  position: relative;
  flex: 0 0 auto;

  /* OFF track */
  background: #d1d1d6;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.06),
    inset 0 6px 14px rgba(0,0,0,0.06);
  transition: background .22s ease, box-shadow .22s ease;
}

/* Knob */
.theme-toggle__knob{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  position: absolute;
  top: 2px;
  left: 2px;

  background: #ffffff;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.20);
  transition: transform .22s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

/* ON state (Light mode) */
body.light .theme-toggle__switch{
  background: #1612d3; /* matches your font blue */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.06),
    inset 0 8px 18px rgba(255,255,255,0.18);
}

body.light .theme-toggle__knob{
  transform: translateX(16px);
}


.terminal{
  margin-top:18px;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:rgba(10,12,16,.78);
  box-shadow:0 18px 44px var(--shadow);
  transition: border-color .35s ease, box-shadow .35s ease;
}

/* Light mode terminal background tweak (still feels like a code box) */
body.light .terminal{
  background: rgba(255,255,255,.75);
}

.terminal__bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--bar);
  border-bottom:1px solid rgba(242,242,242,.10);
}

/* make the divider match theme */
body.light .terminal__bar{
  border-bottom:1px solid rgba(22,18,211,.14);
}

.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
}
.dot--red{ background:#ff5f57; }
.dot--yellow{ background:#febc2e; }
.dot--green{ background:#28c840; }

.terminal__title{
  margin-left:6px;
  font-size:13px;
  color:var(--muted);
}

.terminal__body{
  margin:0;
  padding:16px 16px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:15px;
  line-height:1.65;
  white-space:pre-wrap;
  letter-spacing:0; /* keep code readable even in light mode */
}

.caret{
  display:inline-block;
  margin-left:2px;
  animation: blink 1s steps(1) infinite;
  opacity:.9;
}

@keyframes blink{
  50%{ opacity:0; }
}

.footer{
  margin-top:28px;
  font-size:14px;
  color:var(--muted);
}

.footer__name{
  color:var(--text);
  font-weight:650;
  margin-bottom:6px;
}

.footer__meta{ margin-bottom:6px; }

.footer__link{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid rgba(242,242,242,.35);
}

body.light .footer__link{
  border-bottom-color: rgba(22,18,211,.35);
}

.footer__link:hover{
  border-bottom-color: rgba(242,242,242,.75);
}

body.light .footer__link:hover{
  border-bottom-color: rgba(22,18,211,.75);
}

/* Mobile: stack header + toggle */
@media (max-width: 560px){
  .top{
    flex-direction:column;
    align-items:flex-start;
  }
}