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

.terminal-box {
    --term-lines: 2;
    margin-top: 16px;
}

.terminal-viewport {
    position: relative;
    display: grid;
    gap: .4rem;
    min-height: calc(var(--term-lines) * 1.4em);
}

.terminal-meta-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 18px;
    color: var(--muted);
}

.terminal-location {
    display: flex;
    align-items: baseline;
    gap: 0;
    min-width: 0;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.terminal-path,
.terminal-path-suffix {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    min-width: 0;
}

.terminal-path a,
.terminal-path-suffix a,
.terminal-path span,
.terminal-path-suffix span {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.terminal-path a:hover,
.terminal-path-suffix a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.terminal-meta {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    white-space: nowrap;
    flex: 0 0 auto;
    margin-left: auto;
}

.terminal-command-line {
    display: flex;
    align-items: baseline;
    gap: .65ch;
    font-size: 24px;
}

.prompt-mark {
    flex: 0 0 auto;
    color: var(--muted);
}

.cmd {
    flex: 1 1 auto;
    min-width: 0;

    white-space: pre-wrap;
    overflow-wrap: break-word;
}

#cursor {
    display: inline-block;
    width: .62ch;
    height: .98em;
    background: var(--cursor);
    transform: translateY(.08em);
    animation: blink 1s step-start infinite;
}

/* terminal overlay */
.content-host {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.content-host > * {
    position: relative;
    z-index: 1;
}

.content-host .terminal-overlay {
    position: absolute;

    top: calc(var(--overlay-start, 0px) - var(--overlay-offset, 0px));
    bottom: var(--footer-height);
    left: 0;
    right: 0;

    pointer-events: none;
    background: transparent;
    color: var(--muted);
    white-space: pre-wrap;
    z-index: 0;
}

.content-host .terminal-overlay .layer {
    font-size: 32px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    line-height: 1.6;
    opacity: var(--terminal-opacity, .24);
    display: block;
    overflow: hidden;
    width: calc(100% + 2 * var(--overlay-bleed));
    transform: translateX(calc(-1 * var(--overlay-bleed) + var(--overlay-shift)));
}

/* mobile */
@media (max-width: 720px) {
    html,
    body {
        overflow-x: hidden;
    }

    .terminal-meta-line {
        font-size: 15px;
        align-items: flex-start;
        gap: .6rem;
    }

    .terminal-location {
        flex: 1 1 auto;
        min-width: 0;
    }

    .terminal-meta {
        flex: 0 0 auto;
        gap: .6rem;
    }

    .terminal-command-line {
        font-size: 18px;
    }

    .content-host {
        overflow: hidden;
    }

    .content-host .terminal-overlay {
        top: calc(var(--overlay-start, 0px) - var(--overlay-offset-mobile, 0px));
    }

    .content-host .terminal-overlay .layer {
        opacity: var(--terminal-opacity-mobile, .74);
        width: calc(100% + 2 * var(--overlay-bleed-mobile));
        transform: translateX(calc(-1 * var(--overlay-bleed-mobile) + var(--overlay-shift-mobile)));
    }
}

@media (min-width: 721px) {
    .content-host {
        overflow: visible;
    }

    .content-host .terminal-overlay {
        white-space: pre-wrap;
    }
}