.terminal {
  position: fixed;
  inset: auto 0 0 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  padding: 0.6rem var(--gap);
  font-family: var(--font-mono);
  z-index: 10;
}
.terminal:focus-within { box-shadow: 0 -8px 32px color-mix(in srgb, var(--fg) 25%, transparent); }
#prompt-form { display: flex; align-items: center; gap: 0.5rem; }
.prompt-glyph { color: var(--fg); font-weight: 700; }
#prompt-input { flex: 1; background: transparent; border: 0; outline: 0; caret-color: transparent; color: var(--fg); text-shadow: var(--glow); }
.cursor { display: inline-block; width: 0.55ch; height: 1em; background: var(--fg); vertical-align: text-bottom; animation: blink 1s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }
#prompt-output { margin-top: 0.4rem; font-size: 0.9rem; color: var(--fg-dim); min-height: 0; max-height: 9rem; overflow: auto; }
#prompt-output:empty { display: none; }
:root:has(#prompt-input:focus) body { background: color-mix(in srgb, var(--bg) 97%, var(--fg)); }

/* mobile floating chip */
@media (max-width: 640px) {
  .terminal { padding: 0.4rem 0.6rem; }
}