.terminal {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(121, 214, 181, .22);
    background: var(--term-bg);
    backdrop-filter: blur(8px);
}

.terminal__chrome {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: var(--term-chrome);
    border-bottom: 1px dashed rgba(121, 214, 181, .22)
}

.terminal__chrome .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block
}

.terminal__chrome .dot.red {
    background: #ff5f56
}

.terminal__chrome .dot.yellow {
    background: #ffbd2e
}

.terminal__chrome .dot.green {
    background: #27c93f
}

.terminal__chrome .title {
    margin-left: 6px;
    color: var(--muted);
    font-weight: 600
}

/* make command blocks wrap instead of widening the box */
.terminal__body pre {
    margin: 0;
    white-space: pre-wrap;
    /* allow wrapping */
    word-break: break-word;
    /* break long tokens */
    overflow-wrap: anywhere;
    /* last-resort break */
}

.terminal__body code {
    display: block;
    /* each prompt is a full line */
    font: inherit;
    /* keep your mono font/size */
    color: var(--term-fg);
}

/* a bit of vertical rhythm between prompts */
.terminal__body pre+pre {
    margin-top: .65rem;
}

.terminal__body {
    overflow-x: hidden;
    padding: 12px 18px;
    /* top/bottom, left/right spacing */
    line-height: 1.6;
    /* makes lines breathe more */
}

.prompt {
    color: var(--term-fg)
}

/* solid block caret after the prompt’s last character */
.prompt--active::after {
    content: "";
    display: inline-block;
    width: 0.6ch;
    /* ~ width of a glyph in your mono font */
    height: 1em;
    /* match line height */
    background: var(--term-caret, var(--term-fg, #79D6B5));
    margin-left: 2px;
    animation: term-blink 1s steps(1, end) infinite;
    vertical-align: -0.15em;
    /* nudge to sit on baseline cleanly */
    border-radius: 1px;
    /* tiny rounding so it looks crisp */
}

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

/* Respect reduced-motion prefs */
@media (prefers-reduced-motion: reduce) {
    .prompt::after {
        animation: none;
    }
}

.answer {
    color: var(--term-fg)
}